/* ============================================================
   SPAWN MOBILE CSS — Shared responsive stylesheet
   Loaded by all dashboard pages. Contains ONLY @media queries
   and global touch/scroll fundamentals (zero desktop overhead).
   ============================================================ */

/* === GLOBAL MOBILE FOUNDATIONS === */

:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

html { overflow-x: hidden; }
body { overflow-x: hidden; -webkit-text-size-adjust: 100%; }

/* Smooth scrolling for overflow areas */
.pbody, .cmsgs, .term-out, .ap-body, .dp-body,
.nx-memories, .nx-mem-types, .nx-brain-state,
#chatLog, #drawerContent, .preset-list,
.oc-panel, .aterm-out, .seq-grid-wrap,
.war-room, .monitor-grid {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* iOS zoom prevention: 16px minimum on ALL inputs */
input[type="text"], input[type="password"], input[type="email"],
input[type="number"], input[type="search"], input[type="tel"],
input[type="url"], textarea, select,
.cinput, .term-i, .aterm-i, #chatInput,
.oc-key-input, .cs-key-input,
.nx-search input, .sample-search {
  font-size: 16px !important;
}


/* ===========================================
   TABLET — 900px
   =========================================== */
@media (max-width: 900px) {

  /* --- NAV.JS: enlarge touch targets --- */
  #spawnTopNav { height: 34px !important; }
  #spawnTopNav .sn-btn,
  #spawnTopNav .sn-arrow,
  #spawnTopNav .sn-cycle,
  #spawnTopNav .sn-brain,
  #spawnTopNav .sn-memory,
  #spawnTopNav .sn-tools,
  #spawnTopNav .sn-account,
  #spawnTopNav .sn-logout,
  #spawnTopNav .sn-home {
    min-height: 30px;
    min-width: 30px;
    padding: 4px 8px !important;
    font-size: 10px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* --- CLASSIC: 3-col to 2-col --- */
  .container {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: 60px auto 1fr !important;
  }
  .container .center-panel { grid-column: 1 / -1; }

  /* --- WOPR/TICTACTOE: 3x3 to 2x2 --- */
  .war-room {
    grid-template-columns: 1fr 1fr !important;
    overflow-y: auto !important;
  }

  /* --- 001/HAL: monitors compact --- */
  .monitor-grid {
    gap: 20px !important;
    padding: 40px 10px 10px 10px !important;
  }

  /* --- TOOLS: horizontal scroll tabs --- */
  .oc-tabs {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    scrollbar-width: none;
  }
  .oc-tabs::-webkit-scrollbar { display: none; }
  .oc-tab { flex-shrink: 0 !important; min-height: 40px; }

  /* --- NEXUS MEMORY: stack --- */
  .nx-main { grid-template-columns: 1fr !important; }
  .nx-left, .nx-right {
    max-height: 250px !important;
    overflow-y: auto !important;
  }

  /* --- SYNTH: narrow preset sidebar --- */
  .main { grid-template-columns: 120px 1fr 180px !important; }
  .preset-item { padding: 4px 6px !important; font-size: 8px !important; }
  .cat-tab { font-size: 7px !important; padding: 3px 5px !important; }

  /* --- INDEX: smaller cards --- */
  .cards .card { width: 170px !important; padding: 18px 14px !important; }
}


/* ===========================================
   MOBILE — 650px
   =========================================== */
@media (max-width: 650px) {

  /* --- BODY: unlock vertical scroll --- */
  body {
    overflow-y: auto !important;
    height: auto !important;
    min-height: 100vh;
  }

  /* --- NAV: compact further --- */
  #spawnTopNav {
    padding: 0 6px !important;
    gap: 3px !important;
  }
  #spawnTopNav .sn-username,
  #spawnTopNav .sn-tier,
  #spawnTopNav .sn-role { display: none !important; }

  /* --- FONT FLOOR: nothing below 12px --- */
  .emotion-label, .emotion-value, .panel-title,
  .status-indicator, .header-btn, .header-select,
  .ptitle, .drow, .blab, .thought, .ttype,
  .gdesc, .ivoice, .srow .sname, .srow .sval,
  .drow .lab, .drow .v, .xlab, .xrow,
  .ebar-top, .arow-lab, .si-name, .mod-name,
  .act-ln, .tl-name, .cstat-l,
  .oc-card-sub, .oc-skill-desc, .oc-log-entry,
  .nx-mem-count, .nx-mod-row, .nx-kg-stat .label,
  .cat-tab, .preset-item, .knob-label, .knob-val,
  .fx-label, .seq-btn, .seq-row-label, .dtab,
  .rpanel .sec-title, .vp-title, .display-label {
    font-size: 12px !important;
  }

  /* --- TOUCH TARGETS: 44px minimum --- */
  .tbtn, .abtn, .xbtn, .hbtn, .tb-btn,
  .header-btn, .mode-btn,
  .oc-btn, .oc-tab,
  .pb, .ap-close, .dp-close,
  .csend, .term-s, .aterm-s,
  .seq-btn, .wave-btn, .mtab {
    min-height: 44px !important;
    min-width: 44px !important;
    touch-action: manipulation;
  }


  /* --- CLASSIC --- */
  .container {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    height: auto !important;
    overflow-y: auto !important;
  }
  .container .left-panel {
    max-height: 40vh !important;
    overflow-y: auto !important;
    padding: 8px !important;
  }
  .container .center-panel {
    min-height: 50vh;
    order: -1;
  }
  .container .right-panel {
    max-height: 40vh !important;
    overflow-y: auto !important;
    padding: 8px !important;
  }
  .webcam-strip { height: 120px !important; }
  .webcam-container { height: auto !important; max-height: 35vh !important; }
  .chat-area { min-height: 200px !important; max-height: 50vh !important; }
  .chat-input-area { position: sticky; bottom: 0; z-index: 20; }
  .chat-input-area input { font-size: 16px !important; }
  .panel-content { max-height: 200px !important; overflow-y: auto !important; }


  /* --- HOLO --- */
  #hudCanvas { width: 100% !important; height: 100% !important; }
  #brainSphereContainer { width: 120px !important; height: 120px !important; }
  .hud-panel {
    position: relative !important;
    left: 0 !important; top: auto !important; right: auto !important; bottom: auto !important;
    width: 100% !important; max-width: 100% !important;
    margin: 4px 0 !important;
    transform: none !important;
  }
  .hud-panel .panel-body {
    max-height: 250px !important;
    overflow-y: auto !important;
  }
  #panel-chat { order: -1; }
  #panel-chat .panel-body { min-height: 200px !important; max-height: 50vh !important; }
  .chat-input { font-size: 16px !important; }
  #panel-webcam video { max-height: 35vh !important; object-fit: contain !important; }


  /* --- SPAWN / NOVA (already have drawers, fix fonts) --- */
  .drawer-panel .pbody {
    font-size: 14px !important;
    padding: 8px !important;
    max-height: 45vh !important;
  }
  .cmsg, .term-ln, .aterm-ln {
    font-size: 14px !important;
  }
  .cinput, .term-i, .aterm-i {
    padding: 10px !important;
    font-size: 16px !important;
  }
  .csend, .term-s, .aterm-s {
    padding: 10px 16px !important;
    font-size: 14px !important;
    min-height: 44px !important;
  }
  #drawerHandle { height: 48px !important; }
  #drawerContent { max-height: 65vh !important; padding-bottom: 80px !important; }
  .wcam { width: 100px !important; height: 100px !important; }


  /* --- WOPR / TICTACTOE --- */
  .war-room {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    height: auto !important;
    overflow-y: auto !important;
    padding-bottom: 20px !important;
  }
  .war-room .screen { min-height: 250px; }


  /* --- 001 / HAL --- */
  .monitor-grid {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    height: auto !important;
    overflow-y: auto !important;
    gap: 16px !important;
    padding: 44px 8px 20px 8px !important;
  }
  .crt-shell { min-height: 280px; }


  /* --- XENO --- */
  .mod-ring { display: none !important; }
  .detail-panel {
    position: fixed !important;
    left: 3vw !important;
    right: 3vw !important;
    top: 70px !important;
    bottom: auto !important;
    max-width: 94vw !important;
    min-width: unset !important;
    width: auto !important;
    border-radius: 8px !important;
    max-height: 70vh !important;
    overflow-y: auto !important;
  }
  .detail-panel .dp-body { max-height: 50vh !important; overflow-y: auto !important; }


  /* --- ASTRAL / NEXUS --- */
  .astral-panel {
    position: fixed !important;
    left: 3vw !important;
    right: 3vw !important;
    top: 70px !important;
    max-width: 94vw !important;
    min-width: unset !important;
    width: auto !important;
    max-height: 70vh !important;
    overflow-y: auto !important;
  }
  .astral-panel .ap-body { max-height: 50vh !important; overflow-y: auto !important; }
  #timeline {
    height: 60px !important;
    padding: 0 8px 8px !important;
  }
  .tl-node { padding: 0 6px !important; }
  .tl-name { font-size: 9px !important; letter-spacing: 1px !important; }
  #actFeed, #actFeedL { display: none !important; }


  /* --- NEXUS MEMORY --- */
  .nx-header {
    flex-wrap: wrap !important;
    height: auto !important;
    padding: 10px 12px !important;
    gap: 8px !important;
  }
  .nx-stats {
    margin-left: 0 !important;
    width: 100% !important;
    justify-content: space-between !important;
  }
  .nx-stat-val { font-size: 14px !important; }
  .nx-search { flex-direction: column !important; }
  .nx-search button { width: 100% !important; min-height: 44px !important; }
  .nx-mem-types { padding: 4px !important; }
  .nx-mem-type { padding: 10px 10px !important; }


  /* --- TOOLS --- */
  .oc-header {
    height: auto !important;
    flex-wrap: wrap !important;
    padding: 10px 12px !important;
  }
  .oc-nav { display: none !important; }
  .oc-tabs {
    width: 100% !important;
    margin-left: 0 !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .oc-tabs::-webkit-scrollbar { display: none; }
  .oc-grid { grid-template-columns: 1fr !important; }
  .cs-provider-grid { grid-template-columns: 1fr !important; }
  .oc-ask-row { flex-direction: column !important; }
  .oc-ask textarea { min-height: 80px !important; width: 100% !important; }
  .oc-ask select { width: 100% !important; }
  .oc-skill { flex-wrap: wrap !important; gap: 10px !important; }
  .oc-card-actions { flex-wrap: wrap !important; }
  .oc-key-row, .cs-key-row { flex-direction: column !important; }
  .oc-key-row input, .cs-key-row input { width: 100% !important; }


  /* --- INDEX (layout picker) — mobile: only Classic + Memory + Tools --- */
  .cards { padding: 0 12px !important; gap: 12px !important; }
  .cards .card { width: 100% !important; max-width: 320px !important; }
  .title { font-size: 22px !important; letter-spacing: 3px !important; }
  .subtitle { font-size: 12px !important; }
  .brain-section { display: none !important; }

  /* Hide all layout cards except Classic on mobile */
  .card[data-layout="holo"],
  .card[data-layout="spawn"],
  .card[data-layout="tictactoe"],
  .card[data-layout="001"],
  .card[data-layout="nova"],
  .card[data-layout="xeno"],
  .card[data-layout="astral"],
  .card[data-layout="nexus"],
  .card[data-layout="nexus_memory"],
  .card[data-layout="tools"] { display: none !important; }

  /* Desktop note */
  .mobile-desktop-note {
    display: none;
    text-align: center;
    padding: 16px 20px;
    margin: 16px auto;
    max-width: 320px;
    background: rgba(18,18,26,0.9);
    border: 1px solid #2a2a3e;
    border-radius: 6px;
  }


  /* --- FACE-CHAT --- */
  #chatLog { max-height: 35vh !important; }
  .ib { width: 44px !important; height: 44px !important; font-size: 16px !important; }
  .msg-bub { max-width: 85% !important; font-size: 14px !important; }
  #inputBar { padding: 8px 10px calc(8px + var(--safe-bottom)) !important; }


  /* --- FACE-CHAT/CUSTOM-VIEW: full-screen chat --- */
  #chatWin {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: 44px !important;
    width: 100% !important;
    height: auto !important;
    border-radius: 0 !important;
    min-width: unset !important;
  }
  #chatBar { cursor: default !important; }
  .resize-grip { display: none !important; }
  #faceArea {
    height: 35vh !important;
    width: 100vw !important;
  }


  /* --- SYNTH STUDIO (single-screen tabbed mobile) --- */

  /* Override body back to fixed viewport for synth */
  body:has(.main) {
    overflow: hidden !important;
    height: 100vh !important;
  }

  /* Flatten grid: single column, fill viewport */
  .main {
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr !important;
    height: calc(100vh - 38px) !important;
    overflow: hidden !important;
    position: relative !important;
  }

  /* Hide presets sidebar (JS moves it into .piano-area on mobile) */
  .main > .presets { display: none !important; }
  /* When presets is inside piano-area, show it */
  .piano-area .presets { display: flex !important; }

  /* Topbar: compact single row */
  .topbar {
    height: 38px !important;
    flex-wrap: nowrap !important;
    padding: 0 6px !important;
    gap: 4px !important;
    overflow-x: auto !important;
  }
  .topbar .brand { display: none !important; }
  .topbar .sep { display: none !important; }
  .topbar .logo { font-size: 11px !important; letter-spacing: 2px !important; }
  .topbar select { min-width: 100px !important; font-size: 10px !important; padding: 3px 6px !important; }
  .topbar .tgroup { margin-left: 0 !important; gap: 4px !important; }
  .topbar label { font-size: 7px !important; }
  .topbar input[type=number] { width: 36px !important; font-size: 10px !important; }
  .topbar input[type=range] { width: 50px !important; }
  .mode-toggle .mtab { font-size: 7px !important; padding: 3px 6px !important; }
  #resetAll { font-size: 6px !important; padding: 3px 6px !important; }

  /* ALL major sections: absolute fill, hidden by default.
     The JS tab controller toggles .synth-mob-active */
  .main > .center,
  .main > .right,
  .main > .seq-area,
  .main > .piano-area {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: none !important;
    overflow-y: auto !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    border: none !important;
    z-index: 1;
  }
  .main > .center.synth-mob-active,
  .main > .right.synth-mob-active,
  .main > .seq-area.synth-mob-active,
  .main > .piano-area.synth-mob-active {
    display: flex !important;
  }

  /* CENTER (play tab): display area compact + pads + fx */
  .display-area { height: 80px !important; flex-shrink: 0 !important; }
  .pads-row {
    flex-wrap: wrap !important;
    padding: 6px !important;
    gap: 4px !important;
    justify-content: center !important;
  }
  .pad {
    width: 52px !important;
    height: 52px !important;
    font-size: 6px !important;
    border-radius: 8px !important;
  }
  .fx-rack {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    flex: 1 !important;
    min-height: 0 !important;
  }
  .fx-mod {
    min-width: 100px !important;
    padding: 6px 4px !important;
  }
  .knob-wrap { margin: 2px !important; }
  .knob-label { font-size: 6px !important; }
  .knob-val { font-size: 8px !important; }

  /* RIGHT (mix tab): oscillator + ADSR + master */
  .main > .right {
    flex-direction: column !important;
    border-left: none !important;
  }
  .rpanel { padding: 6px !important; }
  .wave-btn { padding: 6px 10px !important; min-height: 36px !important; font-size: 8px !important; }
  .rknobs { gap: 2px !important; }
  .master { padding: 8px !important; }
  .fader-track { height: 70px !important; width: 10px !important; }

  /* SEQ (sequencer tab) */
  .seq-area {
    flex-direction: column !important;
    grid-column: 1 !important;
  }
  .seq-toolbar {
    flex-wrap: wrap !important;
    gap: 3px !important;
    padding: 4px 6px !important;
    flex-shrink: 0 !important;
  }
  .seq-btn {
    font-size: 8px !important;
    padding: 6px 8px !important;
    min-height: 36px !important;
  }
  .seq-grid-wrap { flex: 1 !important; }

  /* PIANO (keys tab) */
  .main > .piano-area {
    flex-direction: column !important;
    grid-column: 1 !important;
  }
  .piano-wrap {
    flex: 1 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
  }
  .wkey { width: 34px !important; height: 100% !important; }
  .bkey { width: 20px !important; height: 60% !important; }
  .vocal-pads {
    width: 100% !important;
    height: auto !important;
    max-height: 30% !important;
    flex-direction: column !important;
    border-left: none !important;
    border-top: 1px solid var(--border) !important;
    padding: 4px !important;
    overflow-y: auto !important;
  }
  .vocal-pads .vp-grid {
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 3px !important;
  }
  .vpad { min-height: 40px !important; font-size: 7px !important; }
  .vocal-pads .vp-title { font-size: 7px !important; }
}


/* ===========================================
   SMALL MOBILE — 500px
   =========================================== */
@media (max-width: 500px) {

  /* Nav: super compact */
  #spawnTopNav {
    height: 28px !important;
    font-size: 9px !important;
  }
  #spawnTopNav .sn-cycle-group { display: none !important; }

  /* All logos compact */
  .logo, .alogo, .xenologo, .tb-logo, .oc-logo, .nx-logo {
    font-size: 10px !important;
    letter-spacing: 2px !important;
  }

  /* Hide decorative elements to save rendering */
  body::after, .scanlines, .bg-grid, .vignette,
  .corner, .panel-scanlines { display: none !important; }

  /* Headers compact */
  .header, .oc-header, .nx-header, #topbar, #hdr, #topArc, .top-bar {
    padding: 0 6px !important;
  }

  /* WOPR/001 screens minimum height */
  .war-room .screen { min-height: 200px !important; }
  .crt-shell { min-height: 220px !important; }

  /* Astral/Nexus timeline compact */
  #timeline { height: 50px !important; }
  .tl-node::before { display: none; }
  .tl-dot { width: 8px !important; height: 8px !important; }

  /* Nexus Memory compact */
  .nx-mem-type { padding: 8px 10px !important; }
  .nx-mem-icon { width: 24px !important; height: 24px !important; font-size: 12px !important; }

  /* Index cards */
  .cards .card { max-width: 100% !important; }
  .card-desc { font-size: 11px !important; }

  /* Synth small mobile */
  .pad { width: 46px !important; height: 46px !important; }
  .topbar select { min-width: 80px !important; font-size: 9px !important; }
  .topbar .logo { font-size: 9px !important; }
}


/* ===========================================
   LANDSCAPE PHONE
   =========================================== */
@media (orientation: landscape) and (max-height: 500px) {
  /* Reduce vertical chrome */
  #spawnTopNav { height: 24px !important; }
  #topbar, #hdr, #topArc, .top-bar, .header, .topbar {
    height: 30px !important;
  }
  #timeline { height: 40px !important; }
  #drawerContent { max-height: 50vh !important; }

  /* Synth landscape: same tabbed approach */
  .presets { display: none !important; }
}