/* ═══════════════════════════════════════════════════════════════════════════
 * PHASE 124 — Mobile Fixes + UX Polish Round 2
 *
 * Items addressed:
 *  #1  – More mobile overflow / layout fixes across all views
 *  #2  – Character builder: char-pill name overflow in sidebar bubbles
 *  #3  – Mind Arcade: auth overlay hidden when arcade is active
 *  #4  – Stripboard cine overlay: Low/Medium/High legend spacing
 *  #5  – Continuity Desk: true single-column stack on mobile
 *  #6  – Wardrobe: header cleanup, clothing picker compact on mobile
 *  #7  – LightForge Plot (Gaffer): fixture buttons + presets compact/scrollable
 *  #8  – PCC: hero title aggressively shrunk on mobile
 *  #9  – Nav: Settings (PCC) moved to end, Spatial right of Shot List
 * ═══════════════════════════════════════════════════════════════════════════ */


/* ─── #1  GLOBAL MOBILE OVERFLOW GUARD ───────────────────────────────────── */
/* Prevent any view-level horizontal bleed at mobile widths */
@media (max-width: 760px) {
  .app-pad,
  .view-container > * {
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }
  /* Stop horizontal scroll at the app-pad level for all views */
  .continuity-app,
  #wardrobe-app,
  #char-builder-app,
  #cine-app {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    max-width: 100vw !important;
  }
}


/* ─── #2  CHARACTER PILL NAME — NO OVERFLOW ───────────────────────────────── */
/* The .char-pill is the sidebar character bubble in Character Builder */
.char-pill {
  min-width: 0 !important;
  overflow: hidden !important;
}
.char-pill-name {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  max-width: 100% !important;
  min-width: 0 !important;
}
/* Wardrobe: character name input in sidebar cards */
.wdp2-char-name {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  max-width: 100% !important;
  min-width: 0 !important;
}
.wdp2-char-info {
  min-width: 0 !important;
  overflow: hidden !important;
}


/* ─── #3  MIND ARCADE — SUPPRESS AUTH OVERLAY WHEN ACTIVE ────────────────── */
/* When Mind Arcade is open, the auth wall must not cover it.
   #psych8-quest-root already has z-index 10020; we also hide the auth
   overlay entirely so it cannot paint over the iframe. */
body.mind-arcade-active #auth-overlay {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
/* Belt-and-suspenders: raise the quest root above every possible modal */
#psych8-quest-root {
  z-index: 99999 !important;
}
/* Make the back button more prominent on mobile */
@media (max-width: 760px) {
  .mind-arcade-close {
    font-size: .75rem !important;
    padding: 8px 14px !important;
    top: 8px !important;
    right: 8px !important;
    border-radius: 8px !important;
  }
}


/* ─── #4  CINE OVERLAY — LOW / MEDIUM / HIGH LEGEND SPACING ──────────────── */
/* Increase gap between the dot+label items in the overlay legend so they
   aren't jammed together, especially when the bar wraps on small screens. */
.cine-overlay-legend {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;       /* was effectively 0 — inherit inline */
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  padding: 2px 0 !important;
}
.cine-overlay-legend::-webkit-scrollbar { display: none; }
/* Each legend item: give it breathing room */
.cine-overlay-legend span,
.cine-overlay-legend .coi-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  white-space: nowrap !important;
  font-size: .72rem !important;
  flex-shrink: 0 !important;
  padding: 0 3px !important;
}
/* On mobile make the whole bar scroll, don't wrap lines */
@media (max-width: 760px) {
  #cine-sb-overlay-bar {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    gap: 6px !important;
    padding: 5px 10px !important;
    align-items: center !important;
  }
  #cine-sb-overlay-bar::-webkit-scrollbar { display: none; }
  #cine-sb-overlay-bar .cine-overlay-btn {
    flex-shrink: 0 !important;
    font-size: .68rem !important;
    padding: 3px 8px !important;
    white-space: nowrap !important;
  }
}


/* ─── #5  CONTINUITY DESK — PROPER SINGLE-COLUMN MOBILE STACK ────────────── */
@media (max-width: 760px) {
  /* Outer container: clip overflow, scroll vertically */
  .continuity-app {
    display: flex !important;
    flex-direction: column !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    height: auto !important;
    min-height: 100% !important;
    padding: 0 !important;
  }
  /* Top stats bar */
  .cont75-topbar {
    flex-shrink: 0 !important;
    padding: 10px 14px !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  /* Nav buttons — horizontal scroll strip */
  .cont75-nav {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    scrollbar-width: none !important;
    flex-shrink: 0 !important;
    gap: 4px !important;
    padding: 0 12px !important;
  }
  .cont75-nav::-webkit-scrollbar { display: none; }
  .cont75-navbtn {
    flex-shrink: 0 !important;
    font-size: .72rem !important;
    padding: 6px 12px !important;
    white-space: nowrap !important;
  }
  /* Main shell: vertical stack replacing the side-by-side grid */
  .cont75-shell {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    grid-template-columns: unset !important;
  }
  /* Scene rail: compact horizontal strip at top */
  .cont75-rail {
    width: 100% !important;
    height: auto !important;
    max-height: 160px !important;
    overflow-y: auto !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(0,0,0,.1) !important;
    flex-shrink: 0 !important;
  }
  /* Scene items stay readable but compact */
  .cont75-scene-item {
    padding: 8px 12px !important;
    font-size: .78rem !important;
  }
  /* Main content fills remaining space */
  .cont75-main {
    width: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    flex: 1 1 auto !important;
  }
  /* Pulse / stats grid: 2-col on mobile */
  .cont75-pulse-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  /* Overview panels: single column */
  .cont75-overview-grid,
  .cont75-facing-grid {
    grid-template-columns: 1fr !important;
  }
}


/* ─── #6  WARDROBE — HEADER CLEANUP + CLOTHING PICKER COMPACT ────────────── */
@media (max-width: 760px) {
  /* Full app container: scrolls as one page */
  #wardrobe-app.wdb-app {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: auto !important;
    min-height: 100% !important;
  }

  /* Shell stacks: sidebar on top, main below */
  .wdp2-shell {
    display: flex !important;
    flex-direction: column !important;
    overflow: visible !important;
    height: auto !important;
    min-height: unset !important;
    grid-template-columns: unset !important;
  }

  /* Sidebar: compact strip at top */
  .wdp2-sidebar {
    width: 100% !important;
    height: auto !important;
    min-height: unset !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(0,0,0,.10) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }
  /* Sidebar head: one clean row */
  .wdp2-sidebar-head {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 14px !important;
    flex-shrink: 0 !important;
  }
  .wdp2-sidebar-head h3 {
    font-size: .9rem !important;
    margin: 0 !important;
  }
  /* Character cards: horizontal scroll strip */
  .wdp2-char-list {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    gap: 8px !important;
    padding: 8px 14px !important;
    flex-wrap: nowrap !important;
  }
  .wdp2-char-list::-webkit-scrollbar { display: none; }
  .wdp2-char-card {
    flex-shrink: 0 !important;
    min-width: 110px !important;
    max-width: 130px !important;
    width: auto !important;
    padding: 8px !important;
  }
  /* Sidebar footer: compact row */
  .wdp2-sidebar-foot {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 8px 14px !important;
    border-top: 1px solid rgba(0,0,0,.08) !important;
  }

  /* Main panel: full width below sidebar */
  .wdp2-main {
    width: 100% !important;
    overflow: visible !important;
    height: auto !important;
  }
  /* Main header: tabs scroll horizontally */
  .wdp2-main-head {
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
    background: var(--bg, #fff) !important;
    border-bottom: 1px solid rgba(0,0,0,.10) !important;
  }
  .wdp2-topbar {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    gap: 6px !important;
    padding: 8px 10px !important;
  }
  .wdp2-topbar::-webkit-scrollbar { display: none; }
  .wdp2-tabs {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    gap: 4px !important;
  }
  .wdp2-tabs::-webkit-scrollbar { display: none; }
  .wdp2-tab {
    flex-shrink: 0 !important;
    font-size: .72rem !important;
    padding: 5px 10px !important;
    white-space: nowrap !important;
  }
  /* Hide action buttons in topbar on mobile — too crowded */
  .wdp2-topbar-actions {
    display: none !important;
  }
  /* Char header: compact */
  .wdp2-char-header {
    padding: 8px 14px !important;
  }
  .wdp2-char-title { font-size: .8rem !important; }
  .wdp2-char-note { font-size: .68rem !important; }

  /* Builder: stack stage above rail */
  .wdp2-builder {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    overflow: visible !important;
  }
  /* Stage: centered compact doll */
  .wdp2-stage-wrap {
    width: 100% !important;
    flex-shrink: 0 !important;
    padding: 10px 14px !important;
  }
  .wdp2-stage {
    height: 200px !important;
    width: 100% !important;
    max-width: 180px !important;
    margin: 0 auto !important;
  }
  .wdp2-stage-controls {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-bottom: 8px !important;
  }

  /* Clothing picker rail: vertical sections with horizontal item strips */
  .wdp2-rail {
    width: 100% !important;
    overflow: visible !important;
    overflow-y: auto !important;
    padding: 0 0 16px !important;
    height: auto !important;
  }
  .wdp2-rail-group {
    padding: 6px 12px !important;
    border-bottom: 1px solid rgba(0,0,0,.07) !important;
  }
  .wdp2-rail-head {
    font-size: .74rem !important;
    font-weight: 700 !important;
    margin-bottom: 6px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
  }
  /* Item strip: horizontal scroll row — easy to swipe through options */
  .wdp2-rail-items {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    scrollbar-width: none !important;
    gap: 8px !important;
    padding-bottom: 4px !important;
  }
  .wdp2-rail-items::-webkit-scrollbar { display: none; }
  .wdp2-rail-item {
    flex-shrink: 0 !important;
    width: 64px !important;
    min-width: 64px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 3px !important;
    padding: 4px !important;
    font-size: .60rem !important;
    border-radius: 8px !important;
  }
  .wdp2-rail-item img {
    width: 48px !important;
    height: 56px !important;
    object-fit: contain !important;
  }
  .wdp2-rail-item span {
    text-align: center !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 60px !important;
  }
}


/* ─── #7  LIGHTFORGE PLOT (GAFFER SHEET) — COMPACT ON MOBILE ─────────────── */
/* Desktop: tighten the gaffer toolbar slightly — scope to gaffer panel only
   so we don't conflict with find-replace-bar / scene-jump-bar (same class) */
#cine-panel-gaffer .phase14-toolbar {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 6px 10px !important;
}
/* Fixture add buttons — compact on all screens */
.cine-fix-add-btn.phase14-control {
  padding: 3px 9px !important;
  font-size: .70rem !important;
  white-space: nowrap !important;
}
/* Preset strip — scroll horizontally rather than wrapping */
.lf74-presets {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  gap: 6px !important;
  align-items: center !important;
  padding: 5px 10px !important;
  border-bottom: 1px solid rgba(13,148,136,.12) !important;
}
.lf74-presets::-webkit-scrollbar { display: none; }
.lf74-kicker {
  font-size: .60rem !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  opacity: .75 !important;
}
.lf74-preset-btn {
  flex-shrink: 0 !important;
  font-size: .68rem !important;
  padding: 3px 10px !important;
  white-space: nowrap !important;
}
.lf74-action-btn {
  flex-shrink: 0 !important;
  font-size: .68rem !important;
  padding: 3px 10px !important;
  white-space: nowrap !important;
}
@media (max-width: 760px) {
  /* Make the gaffer panel (3rd panel = LightForge Plot) stack cleanly */
  #cine-panel-gaffer {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    height: 100% !important;
  }
  /* Toolbar: wrap fixture buttons in a tight grid (scoped to gaffer panel) */
  #cine-panel-gaffer .phase14-toolbar {
    gap: 4px !important;
    padding: 5px 8px !important;
    flex-wrap: wrap !important;
    flex-shrink: 0 !important;
  }
  .cine-fix-add-btn.phase14-control {
    font-size: .64rem !important;
    padding: 2px 6px !important;
  }
  /* Preset strip scrolls */
  .lf74-presets {
    flex-shrink: 0 !important;
    font-size: .64rem !important;
    padding: 4px 8px !important;
  }
  /* The diagram body: scroll independently */
  #cine-panel-gaffer > div:last-child {
    flex: 1 1 auto !important;
    overflow: auto !important;
    min-height: 0 !important;
  }
}


/* ─── #8  PCC — AGGRESSIVE MOBILE HERO SHRINK ────────────────────────────── */
@media (max-width: 760px) {
  /* Top stats strip: inline, compact */
  .pcc-hero {
    padding: 8px 12px 6px !important;
    margin-bottom: 6px !important;
  }
  /* Stats row (0 episodes, 0 contacts, 1 beats): stay in one line */
  .pcc-stats-row,
  .pcc-hero-stats {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 6px !important;
    scrollbar-width: none !important;
  }
  .pcc-stat,
  .pcc-hero-stat {
    flex-shrink: 0 !important;
    min-width: 70px !important;
    padding: 6px 8px !important;
    text-align: center !important;
  }
  .pcc-stat-val,
  .pcc-hero-stat-val,
  .pcc-stat > strong,
  .pcc-hero-stat > strong {
    font-size: 1.1rem !important;
    line-height: 1.1 !important;
  }
  .pcc-stat-label,
  .pcc-hero-stat-label,
  .pcc-stat > span,
  .pcc-hero-stat > span {
    font-size: .60rem !important;
    display: block !important;
  }
  /* The giant PRODUCTION COMMAND CENTER stamp: hide on mobile, save space */
  .pcc-hero-title,
  .pcc-hero > h1,
  .pcc-hero > .pcc-stamp {
    display: none !important;
  }
  /* Sub-info under title (project name, day info): compact */
  .pcc-hero-meta,
  .pcc-hero-sub {
    font-size: .72rem !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    padding: 4px 0 !important;
  }
  .pcc-hero-meta > *,
  .pcc-hero-sub > * {
    font-size: .70rem !important;
  }
  /* Production snapshot section */
  .pcc-snapshot {
    padding: 8px 12px !important;
  }
  .pcc-snapshot-title {
    font-size: .78rem !important;
  }
}


/* ─── GENERAL: sticky bottom nav padding when in mobile views ─────────────── */
@media (max-width: 760px) {
  /* Ensure no view content is hidden under the bottom nav */
  .app-pad {
    padding-bottom: env(safe-area-inset-bottom, 0) !important;
  }
  /* Generic view overflow guards */
  [id$="-app"] {
    box-sizing: border-box !important;
  }
}