/* ===========================================================================
   mobile.css — MOBILE-PLAN.md §3 touch/responsive pass (M0).
   Loaded AFTER hud-2026.css (index.html) so its rules win the CASCADE ORDER
   — but hud-2026.css's own chrome rules are mostly `body.hud-2026 #selector`
   (ID + class = higher specificity than a plain `#selector`), so most
   overrides below MUST repeat that same `body.hud-2026` prefix to actually
   win; a bare `#sidenav` rule here loses to `body.hud-2026 #sidenav` in
   hud-2026.css regardless of file order. (Found by measuring, not
   eyeballing — see this project's own established lesson on hud-2026 layer
   overrides.) Everything is scoped under (max-width: 600px) or
   (pointer: coarse) — zero risk to desktop/mouse layouts.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   Cross-cutting: 44px tap-target floor (Apple HIG / Android 48dp), any
   screen size, any coarse (touch) pointer — MOBILE-PLAN.md §3.2 closing rule.
   --------------------------------------------------------------------------- */
@media (pointer: coarse) {
  .btn-sm, .hud-icon-btn, .chat-tab, .sq-btn, .nav-link, .map-dock-slot,
  #chat-send, .chat-mini-actions button {
    min-width: 44px;
    min-height: 44px;
  }
  /* Dock-magnify is hover-proximity physics for a cursor that doesn't exist
     on touch (mobile.js already skips mounting it); the resize grips are
     ~8px hover targets a finger can't hit — the hud-2026 chat dock falls
     back to its own fixed collapsed(84px)/open(--chat-dock-h) heights. */
  .chat-grip { display: none; }
}

@media (max-width: 600px) {
  /* ===================================================================
     DEFAULT SKIN (body.hud-2026 — on by default; see hud-2026.js FLAG).
     =================================================================== */

  /* Bottom tab bar: #sidenav leaves the left-rail role and becomes fixed
     chrome along the bottom edge. The <nav> markup and its 12 <a href>
     links are completely untouched — .nav-txt is already display:none at
     every width ≤1280px (style.css), so this is pure repositioning. */
  body.hud-2026 #sidenav {
    position: fixed;
    left: 0; right: 0; bottom: 0; top: auto;
    width: auto; height: 56px;
    align-self: auto;
    flex-direction: row;
    align-items: center;
    gap: 0;
    padding: 0 4px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    border-right: none;
    border-top: 1px solid var(--hairline, #2D3B55);
    z-index: 70; /* above the chat dock (50) and action dock (mobile: hidden below anyway) */
  }
  body.hud-2026 #sidenav .nav-link {
    flex: none;
    padding: 6px 10px;
    justify-content: center;
  }
  /* The colony quick-switch chips need real estate the bottom bar doesn't
     have; the HUD's own #colony-switch dropdown (always visible) already
     covers this job. */
  body.hud-2026 #sidenav .nav-colonies { display: none; }

  /* The action dock (hud-2026's flush hairline strip, left:var(--nav-w) ..
     right:0, bottom:0) assumed a LEFT rail that no longer exists at this
     width, and its 12 buttons duplicate the tab bar's own 12 links one for
     one — rather than fight three stacked fixed bars on a 390px screen,
     fold this one into the tab bar it now overlaps functionally. */
  body.hud-2026 .map-action-dock { display: none; }
  body.hud-2026 .chat-portrait-col { display: none; }

  /* Chat dock: KEEP hud-2026's own collapse/expand system (.open-2026,
     built by mountChatShell() in hud-2026.js) — only resize/reposition it.
     Collapsed height (84px, the COMMS header strip) is untouched; it now
     sits full-width, directly above the new bottom tab bar instead of
     beside the (now-hidden) portrait bay. */
  body.hud-2026 #chat-dock {
    left: 0; right: 0; bottom: 56px;
    width: auto;
    z-index: 65;
  }
  body.hud-2026 #chat-dock.open-2026 { height: 60dvh; }

  /* #page's own bottom clearance is already a custom property (shared with
     .map-stage's height calc) — just override the value instead of
     fighting the padding shorthand directly. 56 (tab bar) + 84 (collapsed
     chat) + a little breathing room. */
  body.hud-2026 {
    --page-pad-b: 148px;
  }

  /* ===================================================================
     LEGACY SKIN fallback (sd_hud2026='0' — opted out of the default skin).
     No .open-2026 mechanism exists here; mobile.js's initMobileChatToggle()
     reintroduces a collapse via .chat-collapsed, gated to this path only.
     =================================================================== */
  body:not(.hud-2026) #sidenav {
    position: fixed;
    left: 0; right: 0; bottom: 0; top: auto;
    width: auto; height: 56px;
    flex-direction: row;
    align-items: center;
    gap: 0;
    padding: 0 4px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    border-right: none;
    border-top: 1px solid #2D3B55;
    border-radius: 0;
    z-index: 70;
  }
  body:not(.hud-2026) #sidenav .nav-link { flex: none; padding: 6px 10px; justify-content: center; }
  body:not(.hud-2026) #sidenav .nav-colonies { display: none; }
  body:not(.hud-2026) .map-action-dock { display: none; }
  body:not(.hud-2026) #chat-dock {
    left: 0 !important; right: 0 !important; bottom: 56px !important;
    width: auto !important;
    z-index: 65;
    clip-path: none; /* the desktop chamfer geometry assumes desktop proportions */
  }
  body:not(.hud-2026) #chat-dock .chat-portrait-col { display: none; }
  body:not(.hud-2026) #chat-dock.chat-collapsed {
    height: 44px;
    overflow: hidden;
  }
  body:not(.hud-2026) #chat-dock.chat-collapsed #chat-msgs,
  body:not(.hud-2026) #chat-dock.chat-collapsed .chat-input-row,
  body:not(.hud-2026) #chat-dock.chat-collapsed #chat-search-input {
    display: none;
  }
  body:not(.hud-2026) #chat-dock:not(.chat-collapsed) {
    height: 60dvh;
    display: flex;
    flex-direction: column;
  }
  body:not(.hud-2026) #chat-dock:not(.chat-collapsed) #chat-msgs { flex: 1; max-height: none; }
  body:not(.hud-2026) #chat-tabs { cursor: pointer; }
  body:not(.hud-2026) #page { padding-bottom: 148px; }
}