/* Mobile shell for the homepage (≤760px): map-first layout.
   The map fills the screen and stays touchable; the header shrinks to brand + search + menu,
   transport chips float under it, and the trips/requests feed lives in a draggable bottom
   sheet (peek → half → full). Desktop is untouched — every rule here sits in the media query
   or targets elements that only exist on phones. */

.ms-only { display: none; }

@media (max-width: 760px), (max-height: 500px) and (pointer: coarse) {
  :root {
    --ms-peek: 150px;                       /* handle + tabs + Route/Dates strip */
    --ms-top: calc(env(safe-area-inset-top) + 8px);
    --ms-surface: rgba(10, 17, 31, 0.96);
    --ms-line: rgba(148, 197, 255, 0.14);
  }

  html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
  body { height: 100dvh; }
  #webgl-canvas { position: fixed; inset: 0; width: 100%; height: 100%; }

  /* The viewport layer no longer stacks content; it only hosts floating pieces. */
  .app-viewport {
    position: fixed; inset: 0; height: auto; min-height: 0; padding: 0;
    pointer-events: none; display: block;
  }

  /* ---- top bar ---- */
  .app-viewport > header {
    position: fixed; left: 0; right: 0; top: 0; z-index: 40;
    flex-direction: row; align-items: center; gap: 8px;
    padding: var(--ms-top) 12px 10px;
    background: linear-gradient(to bottom, rgba(7, 10, 19, 0.92) 55%, rgba(7, 10, 19, 0));
    pointer-events: none;
  }
  .app-viewport > header > * { pointer-events: auto; }
  .brand { gap: 9px; margin-right: auto; }
  .brand-icon { width: 36px; height: 36px; border-radius: 10px; font-size: 19px; }
  .brand-title { font-size: 17px; letter-spacing: 0.06em; }
  .brand-subtitle { display: none; }
  .app-viewport > header .nav-links,
  .app-viewport > header .header-actions { display: none; }

  .ms-only { display: inline-flex; }
  .ms-icon-btn {
    width: 44px; height: 44px; flex: none; align-items: center; justify-content: center;
    border-radius: 14px; border: 1px solid var(--ms-line); background: var(--ms-surface);
    color: #e6eefa; cursor: pointer;
  }
  .ms-icon-btn svg { width: 20px; height: 20px; }
  .ms-icon-btn[aria-expanded="true"] { border-color: rgba(56, 189, 248, 0.55); color: #bfe9ff; }

  /* Booking-code search drops down under the bar when toggled. */
  .track-search {
    display: none; position: fixed; z-index: 41;
    left: 12px; right: 12px; top: calc(var(--ms-top) + 54px);
    width: auto; height: 48px; padding: 4px 6px 4px 16px; border-radius: 14px;
    background: var(--ms-surface); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45);
  }
  body.ms-search-open .track-search { display: flex; }
  .track-search input { width: 100%; max-width: none; font-size: 16px; } /* 16px stops iOS zoom-on-focus */
  .track-search button { width: 38px; height: 38px; }

  /* ---- transport chips ---- */
  .mode-bar {
    position: fixed; z-index: 35; top: calc(var(--ms-top) + 54px); left: 0; right: 0;
    margin: 0; padding: 0 12px; gap: 6px; border: 0; border-radius: 0; background: none;
    backdrop-filter: none; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .mode-bar::-webkit-scrollbar { display: none; }
  body.ms-search-open .mode-bar { visibility: hidden; }
  .mode-btn {
    flex: 0 0 auto; white-space: nowrap; min-height: 36px; padding: 8px 13px; font-size: 13px;
    border-radius: 999px; background: var(--ms-surface); border: 1px solid var(--ms-line);
  }
  .mode-btn.active { background: rgba(32, 46, 70, 0.98); }

  /* ---- bottom sheet with the feed ---- */
  .market-panel {
    position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; top: auto;
    width: 100%; height: calc(100dvh - var(--ms-top) - 60px); max-height: none; margin: 0;
    border-radius: 22px 22px 0 0; border-left: 0; border-right: 0; border-bottom: 0;
    background: rgba(10, 17, 31, 0.97); box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.5);
    transform: translateY(calc(100% - var(--ms-peek) - env(safe-area-inset-bottom)));
    transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform; touch-action: none;
  }
  .market-panel[data-sheet="half"] { transform: translateY(calc(100% - 56dvh)); }
  .market-panel[data-sheet="full"] { transform: translateY(0); }
  .market-panel.ms-dragging { transition: none; }

  .ms-handle {
    display: flex; justify-content: center; align-items: center; height: 22px; flex: none;
    cursor: grab; touch-action: none;
  }
  .ms-handle::before { content: ""; width: 40px; height: 5px; border-radius: 3px; background: rgba(174, 187, 208, 0.45); }
  .market-tabs { border-radius: 0; background: none; padding: 0 12px 8px; touch-action: none; }
  .market-tab { min-height: 42px; font-size: 14px; }
  .market-feed { touch-action: pan-y; overscroll-behavior: contain; padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
  .cc-trigger { padding: 8px 12px 10px; }
  .cc-chip { min-height: 50px; }

  /* ---- right column: only the selected-trip card survives, as a card above the sheet ---- */
  .right-stack { position: static; width: auto; max-height: none; overflow: visible; pointer-events: none; }
  .network-intro, .transport-legend { display: none !important; }
  .telemetry-card {
    position: fixed; z-index: 32; left: 12px; right: 12px; width: auto;
    bottom: calc(var(--ms-peek) + env(safe-area-inset-bottom) + 10px);
    max-height: 44dvh; overflow-y: auto; padding: 16px; margin: 0; pointer-events: auto;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
  }
  body.ms-sheet-expanded .telemetry-card { display: none !important; }
  /* Compact card on phones: reviews + full details live on the trip page itself. */
  .telemetry-card #twReviews { display: none !important; }
  .telemetry-card { gap: 10px; }

  /* Desktop CTA strip moves into the menu. */
  .bottom-cockpit { display: none; }

  /* Chat launcher sits above the sheet and steps aside when the sheet or a card is up. */
  .support-chat-btn { bottom: calc(var(--ms-peek) + env(safe-area-inset-bottom) + 12px) !important; right: 12px !important; height: 48px; min-width: 48px; padding: 0 14px; }
  .support-chat-btn .support-chat-label { display: none; }
  body.ms-sheet-expanded .support-chat-btn, body.ms-has-selection .support-chat-btn,
  body.ms-menu-open .support-chat-btn, body.ms-menu-open .support-chat-panel { display: none !important; }

  .toast { top: calc(var(--ms-top) + 104px); bottom: auto; }
  .maplibregl-ctrl-bottom-left { bottom: calc(var(--ms-peek) + env(safe-area-inset-bottom) + 4px); }
}

/* ---- menu drawer (phones only; built by mobile-shell.js) ---- */
.ms-menu { display: none; }
@media (max-width: 760px), (max-height: 500px) and (pointer: coarse) {
  .ms-menu {
    position: fixed; inset: 0; z-index: 95; display: flex; flex-direction: column;
    background: rgba(7, 10, 19, 0.98); padding: var(--ms-top) 16px calc(20px + env(safe-area-inset-bottom));
    overflow-y: auto; opacity: 0; transform: translateY(-8px); pointer-events: none;
    transition: opacity 0.2s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }
  body.ms-menu-open .ms-menu { opacity: 1; transform: none; pointer-events: auto; }
  .ms-menu-head { display: flex; align-items: center; justify-content: space-between; min-height: 54px; }
  .ms-menu-head strong { font-size: 17px; letter-spacing: 0.06em; text-transform: uppercase; }
  .ms-menu nav { display: flex; flex-direction: column; margin-top: 8px; border-top: 1px solid var(--ms-line); }
  .ms-menu nav a {
    display: flex; align-items: center; min-height: 54px; font-size: 17px; font-weight: 650;
    color: #e6eefa; text-decoration: none; border-bottom: 1px solid var(--ms-line);
  }
  .ms-menu nav a.active { color: #7dd3fc; }
  .ms-menu-section { margin-top: 22px; font-size: 13px; font-weight: 700; color: #8fa2bf; }
  .ms-menu-actions { display: grid; gap: 10px; margin-top: 10px; }
  .ms-menu-actions a {
    display: flex; align-items: center; justify-content: center; min-height: 50px; border-radius: 14px;
    font-size: 15px; font-weight: 750; color: #fff; text-decoration: none;
    background: #0b6fa8;
  }
  .ms-menu-actions a.ms-bounty { background: #b45309; }
  .ms-menu-actions a.ms-b2b { background: #4338ca; }
  .ms-menu-account { margin-top: auto; padding-top: 22px; }
  .ms-menu-account a {
    display: flex; align-items: center; justify-content: center; min-height: 50px; border-radius: 14px;
    border: 1px solid var(--ms-line); color: #e6eefa; font-size: 15px; font-weight: 700; text-decoration: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .market-panel, .ms-menu { transition: none; }
}