/*
 * ============================================================================
 * ROAD2RADIANT — MOBILE TACTICAL NETWORK DRAWER
 * Completely hidden when closed, right-side drawer when opened
 * ----------------------------------------------------------------------------
 * Loaded last, immediately after mobileDashboardHistory.css. Every rule lives
 * inside the two approved phone tiers, so the desktop dock — a fixed 64px strip
 * that expands to 300px in place — is untouched at 768px and above.
 *
 * CLOSED STATE
 * The dock is no longer a slim tab. It keeps its final drawer geometry but is
 * parked fully outside the right edge (transform), made invisible (visibility)
 * and made inert (pointer-events), so no roster card, avatar, or strip of the
 * old dock can be seen or tapped on the homepage or the dashboard.
 *
 * OPEN STATE
 * `.expanded` — the same class TacticalNetwork.expand() / collapse() already
 * toggles — slides the drawer in from the right edge. `visibility` is
 * transitioned so the close animation still plays, and the drawer can never
 * widen the document because it stays anchored to `right: 0`.
 *
 * The only new node is #tn-mobile-trigger, a tongue welded to the right edge
 * and vertically centred. It is revealed by `body.tn-authenticated`, which the
 * existing handleAuthState() now toggles, and it calls the existing expand().
 * Pulling it left drags the drawer out with the finger (tnEdgeTab.js); tapping
 * it opens the drawer through the button's own click handler. No new fetch,
 * subscription, or state machine is introduced: expand() early-returns while
 * realtimeChannel exists and startRealtime() already dedupes.
 *
 * The existing document click listener already closes the drawer on any tap
 * outside the dock, so the backdrop below carries no handler of its own; the
 * existing Escape listener is unchanged.
 * ============================================================================
 */

@media (max-width: 767px) {
    /* ------------------------------------------------------------------------
       CLOSED — NOTHING VISIBLE
       The dock keeps its final drawer width so opening is a pure slide, but it
       is parked outside the right edge, invisible and inert. A fixed element
       that never contributes scroll width keeps this free of page shift.
    ------------------------------------------------------------------------ */
    #tactical-network-dock {
        top: 50%;
        bottom: auto;
        right: 0;
        left: auto;
        width: min(300px, 88vw);
        height: 66vh;
        max-height: 560px;
        transform: translate(100%, -50%);
        visibility: hidden;
        pointer-events: none;
        opacity: 0;
        border-right: 0;
        border-radius: 12px 0 0 12px;
        box-shadow: -4px 0 18px rgba(0, 0, 0, 0.55);
        z-index: 115;
        transition: transform 0.24s cubic-bezier(0.4, 0, 0.2, 1),
                    opacity 0.18s ease,
                    visibility 0s linear 0.24s;
    }

    /* ------------------------------------------------------------------------
       EXPANDED — RIGHT-SIDE DRAWER
       The panel slides back to the right edge. `visibility` is restored with
       zero delay so the content is interactive as soon as it starts moving.
    ------------------------------------------------------------------------ */
    #tactical-network-dock.expanded {
        transform: translate(0, -50%);
        visibility: visible;
        pointer-events: auto;
        opacity: 1;
        border-color: rgba(47, 244, 114, 0.25);
        transition: transform 0.24s cubic-bezier(0.4, 0, 0.2, 1),
                    opacity 0.18s ease,
                    visibility 0s linear 0s;
    }

    /* The expanded view settles a beat after the panel. The collapsed view is
       never visible: it lives inside the dock, which is hidden and off-screen.
       Both views stay inside a dock whose overflow is hidden, so neither can
       widen the page. */
    #tactical-network-dock .tn-expanded-view {
        width: 100%;
        transform: translateX(16px);
        transition: opacity 0.16s ease,
                    transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    }

    #tactical-network-dock.expanded .tn-expanded-view {
        transform: translateX(0);
    }

    /* The tab row gains one fixed-width item; the two tabs keep flexing. */
    #tactical-network-dock .tn-tabs {
        padding-right: 4px;
        padding-left: 4px;
    }

    /* ------------------------------------------------------------------------
       BACKDROP
       Inert while the drawer is closed, revealed as a sibling only while it is
       expanded. It sits below the dock, covers the page, and lets the tap fall
       through to the existing outside-click collapse handler.
    ------------------------------------------------------------------------ */
    #tn-drawer-backdrop {
        position: fixed;
        inset: 0;
        z-index: 106;
        background: rgba(3, 8, 12, 0.62);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease;
    }

    #tactical-network-dock.expanded + #tn-drawer-backdrop {
        opacity: 1;
        pointer-events: auto;
    }

    /* ------------------------------------------------------------------------
       CLOSE CONTROL
       A real, labelled 34px button. It lives inside .tn-expanded-view, which
       is pointer-events: none while the drawer is closed, so it cannot be
       tapped early.
    ------------------------------------------------------------------------ */
    #tn-drawer-close {
        flex: 0 0 34px;
        align-self: center;
        width: 34px;
        height: 34px;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.04);
        color: rgba(255, 255, 255, 0.75);
        cursor: pointer;
        transition: background 0.15s ease, color 0.15s ease;
    }

    #tn-drawer-close:hover,
    #tn-drawer-close:focus-visible {
        background: rgba(255, 70, 85, 0.12);
        border-color: rgba(255, 70, 85, 0.45);
        color: #ff4655;
    }

    #tn-drawer-close svg {
        width: 16px;
        height: 16px;
        pointer-events: none;
    }

    /* ------------------------------------------------------------------------
       TRIGGER — AN EDGE TONGUE
       The old floating 44x44 chip read as a share button parked in the page.
       This is now a tab welded to the right edge and vertically centred:
       `right: 0` plus `translateY(-50%)` from `top: 50%`, square against the
       screen edge (`border-right: 0`) and rounded only on its outer side, so
       it looks like something poking out of the edge with a panel tucked
       behind it. It keeps the same green accent and the same reveal rule —
       body.tn-authenticated, owned by handleAuthState().

       `touch-action: none` is load-bearing: without it a vertical finger
       movement would scroll the page instead of pulling the drawer.
       The control widens on hover/focus so it visibly leans out of the edge.
    ------------------------------------------------------------------------ */
    #tn-mobile-trigger {
        position: fixed;
        right: 0;
        top: 50%;
        bottom: auto;
        transform: translateY(-50%);
        width: 28px;
        height: 78px;
        display: none;
        align-items: center;
        justify-content: center;
        margin: 0;
        padding: 0;
        border: 1px solid rgba(47, 244, 114, 0.35);
        border-right: 0;
        border-radius: 12px 0 0 12px;
        background: rgba(6, 14, 20, 0.94);
        color: #2ff472;
        box-shadow: -6px 0 18px rgba(0, 0, 0, 0.55);
        z-index: 105;
        cursor: pointer;
        touch-action: none;
        user-select: none;
        -webkit-user-select: none;
        -webkit-tap-highlight-color: transparent;
        transition: border-color 0.15s ease, background 0.15s ease,
                    opacity 0.15s ease,
                    width 0.16s cubic-bezier(0.4, 0, 0.2, 1);
    }

    body.tn-authenticated #tn-mobile-trigger {
        display: flex;
    }

    #tn-mobile-trigger:hover,
    #tn-mobile-trigger:focus-visible {
        width: 34px;
        border-color: rgba(47, 244, 114, 0.7);
        background: rgba(47, 244, 114, 0.12);
    }

    #tn-mobile-trigger svg {
        width: 18px;
        height: 18px;
        pointer-events: none;
    }

    /* ---- PULL STATE ------------------------------------------------------
       While the tab is being dragged the drawer follows the finger, so the
       slide transition must not fight the inline transform the gesture writes
       on every frame. The class is added and removed by tnEdgeTab.js; nothing
       else sets it, and it never survives a gesture. */
    #tactical-network-dock.tn-dragging {
        transition: none;
    }

    /* The backdrop already covers the trigger while the drawer is open; hiding
       it outright keeps the right edge clean and keeps it out of the tab order.
       `~` tolerates the backdrop node that sits between the dock and the
       trigger. */
    #tactical-network-dock.expanded ~ #tn-mobile-trigger {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
}

@media (max-width: 374px) {
    /* 320px phones: keep a strip of backdrop visible at the right edge, and
       scale the edge tab down with the narrower viewport. */
    #tactical-network-dock,
    #tactical-network-dock.expanded {
        width: min(300px, 92vw);
    }

    #tn-mobile-trigger {
        width: 26px;
        height: 70px;
        border-radius: 10px 0 0 10px;
    }

    #tactical-network-dock .tn-tab-btn {
        font-size: 10px;
        letter-spacing: 0;
    }
}