/**
 * Mirror Ai — Persistent Workspace Shell (mobile)
 * ===============================================
 * On mobile the whole shell — icon rail + contextual panel — slides in as ONE
 * off-canvas drawer. The two columns sit side by side inside it (rail ≈60px + panel
 * fills the rest), so switching services works exactly as on desktop, just in a
 * drawer that floats over the view.
 *
 * MUST LOAD LAST (after every desktop feature stylesheet) — mobile overrides desktop.
 */

@media screen and (max-width: 1023px) {

    /* ---- The shell becomes an off-canvas drawer ---------------------------- */
    html body .ws-sidebar {
        width: var(--ws-rail-mobile);   /* rail + panel */
        max-width: 92vw;
        z-index: var(--z-sidebar-mobile, 850);
        transform: translateX(-100%);
        visibility: hidden;
        box-shadow: none;
        /* Transform, not width — the drawer slides, it does not resize. */
        transition: transform var(--ws-t-base), visibility 0s linear var(--ws-t-base);
    }

    html body .ws-sidebar.ws-open {
        transform: translateX(0);
        visibility: visible;
        box-shadow: 8px 0 40px rgba(0, 0, 0, 0.5);
        transition: transform var(--ws-t-base), visibility 0s;
    }

    /* The panel flexes so rail(60) + panel fills the drawer even on a 320px phone. */
    html body .ws-panel {
        width: auto;
        flex: 1;
        min-width: 0;
    }

    /* Views reclaim the full width — the drawer floats over them. */
    html body.immersive-mode.chat-mode .chat-view-wrapper,
    html body.immersive-mode.chat-history-mode .chat-view-wrapper,
    html body.immersive-mode.documents-mode #documents-view,
    html body.immersive-mode.blog-mode #blog-writer-view {
        left: 0;
        width: 100%;
    }

    /* ---- Collapse is a desktop-only idea. In a drawer the panel is always shown;
            neutralise any persisted `sidebar-collapsed` flag so it can't hide it. -- */
    html body.sidebar-collapsed .ws-sidebar {
        width: var(--ws-rail-mobile);
        max-width: 92vw;
    }
    html body.sidebar-collapsed .ws-panel {
        display: flex;
    }

    /* The collapse chevron is meaningless in a drawer. */
    html body .ws-rail-collapse {
        display: none;
    }

    /* ---- Larger touch targets in the rail --------------------------------- */
    html body .ws-rail {
        padding: 14px 0 16px;
    }
    html body .ws-rail .service-tab {
        width: 46px;
        height: 46px;
    }
    html body .ws-rail-btn {
        width: 44px;
        height: 44px;
    }
    html body .ws-cta {
        height: 44px;
    }

    /* Tooltips are dead weight without hover; the drawer has room, but keep them off
       so a tap doesn't leave a tooltip stuck open. */
    html body .ws-rail [data-tooltip]::after {
        display: none;
    }

    /* ---- Backdrop --------------------------------------------------------- */
    html body .ws-overlay {
        display: block;
        z-index: calc(var(--z-sidebar-mobile, 850) - 1);
        pointer-events: none;
    }

    html body .ws-overlay.ws-open {
        opacity: 1;
        pointer-events: auto;
    }
}

/* The drawer slides; honour reduced-motion by cutting the animation, not the
   behaviour. */
@media screen and (max-width: 1023px) and (prefers-reduced-motion: reduce) {
    html body .ws-sidebar,
    html body .ws-overlay {
        transition: none;
    }
}