/*
 * Right-docked Messenger modal.
 *
 * The topbar message icon (#portalMessengerBtn) opens this overlay. It hosts the
 * FULL messenger (messenger.html injected into #pmmMount, wired by
 * window.MiiraMessenger.init — same instance as the old tab, zero duplication).
 *
 * Two states:
 *   collapsed (default open): panel docked to the right at 360px, showing only
 *     the conversation list (chat + context columns hidden).
 *   expanded (.pmm-expanded): the right-pinned panel widens to min(90vw,1100px),
 *     so its left edge slides leftward, revealing the full three-column messenger.
 *
 * Slide values mirror the Files drawer (files-drawer.css). Every class is `pmm-`
 * prefixed and scoped under #portalMessengerModal so it never collides with the
 * portal globals, the retired `pmd-` drawer, or the `msgr-` tab rules.
 */

/* backdrop (mirror of the pfd/pmd drawers) */
.pmm-backdrop{position:fixed;inset:0;background:rgba(6,9,13,.45);opacity:0;pointer-events:none;transition:opacity var(--mui-drawer-fade-duration,300ms) var(--mui-drawer-fade-ease,ease);z-index:1190}
.pmm.pmm-open .pmm-backdrop{opacity:1;pointer-events:auto}

/* panel shell — fixed to the right, grows leftward when expanded */
.pmm-panel{
    position:fixed;top:0;right:0;height:100dvh;
    width:360px;max-width:100vw;
    background:var(--portal-nav-bg);
    border-left:1px solid var(--portal-border);
    /* No shadow when closed — the large blur would still show at the viewport edge
       after translateX(100%) (same approach as the right rails in styles.css). */
    box-shadow:none;
    display:flex;flex-direction:column;
    transform:translateX(100%);
    opacity:0;
    /* box-shadow snapped (not transitioned) — its large blur repaints every frame.
       will-change promotes the panel to its own layer for a smooth slide/fade.
       width stays transitioned: the expand/collapse interaction genuinely resizes. */
    will-change:transform,opacity;
    transition:
        transform var(--mui-drawer-slide-duration,340ms) var(--mui-drawer-slide-ease,cubic-bezier(.22,.61,.36,1)),
        width var(--mui-drawer-slide-duration,340ms) var(--mui-drawer-slide-ease,cubic-bezier(.22,.61,.36,1)),
        opacity var(--mui-drawer-fade-duration,300ms) var(--mui-drawer-fade-ease,ease);
    z-index:1200;overflow:hidden;
    color:var(--portal-text);
    font-family:'Inter',-apple-system,system-ui,sans-serif;
}
.pmm.pmm-open .pmm-panel{transform:translateX(0);opacity:1;box-shadow:-24px 0 60px rgba(0,0,0,.45)}
.pmm.pmm-expanded .pmm-panel{width:90vw}

/* Header chrome — the close (✕) and new-DM (+) buttons live inside the
   messenger's own header (.msgr-cl-actions in messenger.html) and share the
   .miira-btn--secondary --icon styling so they match. Collapsing from the
   expanded view back to the list is handled by Escape / opening another
   conversation (see messenger-modal.js); there is no explicit back button. */

/* mount point — reproduce the flex/min-height chain the messenger tab got from the
   `.portal-main:has(> #messengerTab.active)` rule (messenger.css:18), which can't
   apply to a fixed overlay. Without min-height:0 at each level the composer is
   pushed off the bottom. */
.pmm-mount{flex:1;min-height:0;display:flex;flex-direction:column}
.pmm-mount .msgr-app{flex:1;min-height:0;border-top:none}

/* COLLAPSED: hide chat + context columns; let the list fill the 360px panel.
   (Selector specificity (4 classes) beats messenger.css's own column rules and
   `.msgr-col-ctx[hidden]`, so no !important is needed.) */
.pmm:not(.pmm-expanded) .pmm-mount .msgr-col-main,
.pmm:not(.pmm-expanded) .pmm-mount .msgr-col-ctx{display:none}
.pmm:not(.pmm-expanded) .pmm-mount .msgr-col-list{flex:1 1 auto;width:auto;border-right:none}

/* EXPANDED: collapsed selectors stop matching, so messenger.css defaults govern —
   list returns to 312px, main fills, and the ctx panel follows its own [hidden]
   state (shown only when a conversation is active). No explicit rules needed. */

/* topbar trigger active state (matches portal-topbar-icon, mirrors pmd) */
.portal-topbar-icon.pmm-trigger-on{background:var(--portal-accent-indigo-soft,rgba(var(--accent-rgb), .14));color:var(--portal-accent-indigo,var(--accent-text))}

@media (max-width:420px){
    .pmm-panel{width:100vw}
    .pmm.pmm-expanded .pmm-panel{width:100vw}
}
@media (prefers-reduced-motion: reduce){
    .pmm-panel{transition:none}
    .pmm-backdrop{transition:none}
}