/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE v3.1 (2026-07-13) — complementary mobile polish
   v3.0 mistake: it fought the app's EXISTING mobile system (styles.css ≤768px
   already turns #leftSidebar into a drawer with #mobileMenuBtn) and produced a
   black card over the map. v3.1 touches NOTHING the old system owns — it only
   adds what was missing: bottom-sheet layout for the new panels, chip dock
   position, touch sizing, and tooltip suppression on touch.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

    /* new tool panels become bottom sheets (legacy panels are handled by styles.css) */
    #astroLinesPanel, #skyEventsPanel, #alignmentLabPanel {
        left: 3vw !important;
        right: 3vw !important;
        width: auto !important;
        top: auto !important;
        bottom: 64px !important;
        max-height: 60vh !important;
    }

    /* restore chips sit above the bottom bar, larger touch targets */
    #pyraChipDock { bottom: 58px !important; }
    #pyraChipDock button { padding: 9px 15px !important; font-size: 12.5px !important; }

    /* hover tooltips make no sense on touch */
    .map-ctrl-btn:hover::after, .nav-btn:hover::after,
    .map-ctrl-btn:hover::before, .nav-btn:hover::before {
        display: none;
    }

    /* comfortable touch targets in the sidebar */
    .tool-btn { min-height: 56px; }

    /* ── v3.2: drawer must WIN against every other state ──
       desktop-collapse (body.left-collapsed), interface-hide leftovers and
       inline styles were all able to keep the sidebar hidden even when the
       ☰ button set .open. On mobile, .open is absolute law: */
    #leftSidebar.open {
        left: 0 !important;
        transform: none !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;            /* body.left-collapsed sets opacity:0 */
        pointer-events: auto !important;  /* …and pointer-events:none */
        width: min(84vw, 320px) !important;
        z-index: 3000 !important;
        box-shadow: 8px 0 40px rgba(0, 0, 0, 0.6);
    }
    #leftSidebar:not(.open) {
        left: -110vw !important;
    }

    /* ── v3.2: right-side docks must not overlap ──
       controls grid capped + scrollable; zoom/nav toolbar moves to the
       bottom-right, above the interface-hide eye button. */
    #mapControlsPanel {
        top: 64px !important;
        right: 6px !important;
        max-height: 44vh !important;
        overflow-y: auto !important;
    }
    #mapNavToolbar {
        top: auto !important;
        bottom: 128px !important;
        right: 6px !important;
    }

    /* ── v3.2/v3.5: top bar — essentials only, nothing overlaps ──
       overflow must stay VISIBLE: hidden silently clipped the profile
       dropdown, which opens below the bar (that's why it "didn't work"). */
    #topBar {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 0 8px;
        overflow: visible;
    }
    .user-dropdown {
        z-index: 3002 !important;    /* above drawer, docks and chips */
        right: 4px !important;
        max-height: 70vh;
        overflow-y: auto;
    }
    /* v3.6: the dropdown lives INSIDE #topBar — children can never escape
       their parent's stacking layer, so the whole bar must sit above the
       Controls dock for the open menu to cover it. */
    #topBar {
        z-index: 3002 !important;
    }

    /* v3.7: the mic is ABSOLUTELY positioned (right:44px on desktop, leaving
       room for the ⌘K badge). The badge is hidden on mobile, so 44px parked
       the mic over the magnifier in the narrow pill. Pin it to the right edge. */
    #topBar .search-container .voice-search-btn {
        left: auto !important;
        right: 6px !important;
    }
    #searchInput { padding-right: 44px !important; }  /* text never under the mic */
    #topBar .version-badge,
    #topBar .zoom-display-top,
    #topBar .stats-display,
    #topBar .toolbar-separator,
    #topBar .top-bar-history-controls,
    #topBar .search-shortcut,
    #topBar .logo-text {
        display: none !important;
    }
    #topBar .search-container {
        flex: 1 1 auto;
        min-width: 0;
        max-width: none;
    }
    #topBar .icon-btn {
        width: 38px;
        height: 38px;
        flex-shrink: 0;
    }

    /* ── v3.3: search input must stay inside its pill ── */
    #topBar .search-container {
        overflow: hidden;
        max-width: calc(100vw - 190px);
    }
    #searchInput {
        width: 100% !important;
        min-width: 0 !important;
        font-size: 14px !important;
    }

    /* ── v3.3: the drawer must scroll to reach every tool ── */
    #leftSidebar.open {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 110px !important;   /* last tools clear the bottom bar */
    }

    /* ── v3.5: #messageModal is an INLINE-positioned desktop side panel
       (top:70px; right:160px; width:420px) — on a phone its left edge lands
       at NEGATIVE x, which is the half-visible Frequency/Natal/FAQ panel.
       On mobile it becomes a bottom sheet. !important beats the inline styles. */
    #messageModal {
        top: auto !important;
        left: 3vw !important;
        right: 3vw !important;
        bottom: 64px !important;
        width: auto !important;
        max-width: none !important;
        max-height: 72vh !important;
    }
    #messageModal > div {
        max-width: 100% !important;
        width: auto !important;
        overflow-y: auto !important;
        margin: 0 !important;
    }

    /* ── v3.4: EVERY standalone tool panel becomes a bottom sheet ──
       (these are positioned with desktop coordinates and were still
       rendering half off-screen on phones) */
    #drawMeasurePanel, #astralPanel, #directionsPanel, #isochronePanel,
    #snapshotPanel, #terrainReliefPanel, #contourPanel, #discoveryPanel,
    #mapStylePanel, #chatPanel {
        left: 3vw !important;
        right: 3vw !important;
        width: auto !important;
        max-width: none !important;
        top: auto !important;
        bottom: 64px !important;
        max-height: 62vh !important;
        overflow-y: auto !important;
        transform: none !important;
    }

    /* ── v3.4: the ☰/✕ button must stay ABOVE the open drawer ──
       (drawer is z-index 3000; the button was buried under it, so there
       was no way to close the menu) */
    #mobileMenuBtn {
        z-index: 3001 !important;
    }

    /* ── v3.5: eye (cinema mode) was covering the + button in the
       bottom-right corner — move it to the bottom-left, above the scale. */
    #cinemaToggle {
        right: auto !important;
        left: 12px !important;
        bottom: 48px !important;
    }
}