/* CK Labs Lab V3 — responsive (<900px stack) */

/* ── Global mobile safety net — vertical scroll only, no horizontal drag ── */
@media (max-width:900px){
  html,body{max-width:100vw;overflow-x:hidden}
}

@media (max-width:900px){
  .v3-mobile-tabs{display:flex}
  .v3-body{flex-direction:column}

  .v3-chat{flex:1 1 auto;width:100%;min-width:0;border-right:none;border-bottom:1px solid var(--border)}
  .v3-work{flex:1 1 auto;width:100%}

  /* Mobile tab visibility (driven by .v3-body classes set in shell.js) */
  .v3-body.show-chat .v3-chat{display:flex}
  .v3-body.show-chat .v3-work{display:none}
  /* Merged "SQL & Résultats" mobile tab: editor + run-bar + result + validate stacked.
   * Two modes (mode-edit / mode-result) toggle which pane gets the flex space —
   * keeps the validate bar always visible on small screens. */
  .v3-body.show-work .v3-chat{display:none}
  .v3-body.show-work .v3-work{display:flex}
  .v3-body.show-work .v3-validate-bar{display:flex}
  /* Hide result block while a non-Query work tab (Schéma/Brief) is active */
  .v3-body.show-work .v3-work-panel.active ~ .v3-result{display:none}

  /* Mode switcher chips inside the editor bar — desktop hides them via base CSS. */
  /* Mobile editor-bar layout: 2 rows, mode meta row visible on mobile only.
   * Row 1 (actions: Run/Hint/SQL/Live) and Row 2 (mode toggle Console/Résultat) — gives
   * a clearer visual hierarchy than mixing the big Run button with the mode chips. */
  .v3-bar-meta{display:flex !important;justify-content:center;border-top:1px solid var(--border)}
  .v3-mode-switch{display:inline-flex;flex:0 0 auto;background:var(--surface);border:1px solid var(--border2);border-radius:8px;padding:3px;gap:0;margin:0 auto;width:100%;max-width:280px}
  .v3-mode-switch button{flex:1;background:transparent;border:none;color:var(--muted);font-size:12px;font-weight:800;padding:8px 12px;border-radius:5px;cursor:pointer;font-family:inherit;line-height:1;letter-spacing:.01em;transition:background .15s,color .15s}
  .v3-mode-switch button.active{background:var(--accent);color:#fff;box-shadow:0 2px 8px rgba(124,108,255,0.35)}

  /* MODE: edit — console takes the room, result collapses to a 1-line strip */
  .v3-body.show-work.mode-edit .v3-editor-wrap{flex:1 1 auto;min-height:240px}
  .v3-body.show-work.mode-edit .v3-result{flex:0 0 auto;max-height:48px;overflow:hidden}
  .v3-body.show-work.mode-edit .v3-result .v3-result-body{display:none}
  .v3-body.show-work.mode-edit .v3-result-h{cursor:pointer}

  /* MODE: result — result takes the room, console collapses to a fixed compact panel */
  .v3-body.show-work.mode-result .v3-editor-wrap{flex:0 0 auto;max-height:170px;min-height:0;overflow:hidden;display:flex;flex-direction:column}
  /* Override editor-area default min-height:140px so the Run/Hint bar stays
   * visible inside the compact editor-wrap (this was the practice-mode bug). */
  .v3-body.show-work.mode-result .v3-editor-area{min-height:0;flex:1 1 0}
  .v3-body.show-work.mode-result .v3-editor-bar{flex:0 0 auto;padding:6px 8px;flex-wrap:nowrap;overflow-x:auto}
  .v3-body.show-work.mode-result .v3-editor-bar::-webkit-scrollbar{display:none}
  .v3-body.show-work.mode-result .v3-tokenbar{display:none}
  .v3-body.show-work.mode-result .v3-result{flex:1 1 auto;min-height:0}
  /* mode-edit: same min-height:0 override so the bar stays visible too */
  .v3-body.show-work.mode-edit .v3-editor-area{min-height:0}

  /* Single-row compact topbar: nowrap + horizontal scroll if it overflows.
   * The previous flex-wrap was producing 4 rows of header content on small
   * mobile, eating ~160px of vertical space and pushing the validate bar
   * below the viewport. */
  .v3-topbar{padding:6px 8px;gap:6px;flex-wrap:nowrap;min-height:auto;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:auto}
  .v3-topbar::-webkit-scrollbar{display:none}
  .v3-topbar > *{flex:0 0 auto}
  .v3-tb-mission{font-size:10px;gap:6px;margin-left:auto}
  .v3-tb-brand{font-size:12px}
  .v3-tb-brand span{display:none}
  .v3-mission-switch{padding:5px 9px;font-size:11px}
  .v3-mission-switch .v3-ms-current{display:none}
  #v3-btn-theory{padding:5px 8px}

  /* Hide temp mission selector on mobile (accessible via ?mission= URL) */
  #v3-mission-select,
  label[for="v3-mission-select"],
  .v3-topbar label:has(#v3-mission-select){display:none !important}

  /* Stick chat at top when shown, body scrolls inside */
  .v3-body.show-chat .v3-chat{max-height:100vh}

  /* Touch-friendly */
  .v3-chat-input button,
  .v3-btn-run,
  .v3-btn-validate{min-height:44px}
  /* iOS auto-zooms inputs <16px on focus — keep ≥16px to prevent it */
  .v3-chat-input input{min-height:44px;font-size:16px}
  .v3-editor-textarea,
  .v3-editor-highlight{font-size:16px;line-height:1.55}

  /* Tables strip / chips — keep horizontal-scroll INSIDE the strip, never on body */
  .v3p-tables-strip,
  .v3-inline-schema-body{max-width:100vw}

  /* Result tables: allow inner scroll without dragging the page */
  .v3p-result-body,.v3-result-body{max-width:100vw;overflow-x:auto}
  .v3p-result table,.v3-result table{min-width:100%}
}

/* ── Compact topbar items <600px — drop verbose mission step text + theme label ── */
@media (max-width:600px){
  /* The "Étape 1/5 · CA total..." block is interesting on desktop but eats
   * a whole row on mobile. Hide it; the chat already shows the mission brief. */
  .v3-tb-mission{display:none}
  /* Theme toggle + theory button → icon only (kill the "Clair" / "Théorie" labels) */
  .v3-theme-toggle [data-theme-label],
  #v3-btn-theory{padding:5px 7px;font-size:0}
  #v3-btn-theory::before{content:"📖";font-size:13px}
  /* Mission switcher → icon only on small screens (full label on tablet) */
  .v3-mission-switch span:not(.v3-ms-current):not([aria-hidden]){display:none}
  /* Pro pill stays compact (its label was already hidden via .v3-pro-tab-full) */
  .v3-tb-brand{font-size:11px}
}

/* ── Extra-small (<420px) — tighten further so 320–360px iPhones never scroll latérale ── */
@media (max-width:420px){
  .v3-topbar,.v3p-top{padding:6px 8px;gap:4px}
  .v3-tb-back,.v3p-back{padding:4px 7px;font-size:10px}
  .v3p-meta{font-size:10px;gap:6px}
  .v3p-theory-btn{padding:4px 7px;font-size:10px}
  /* Ensure the mission switcher doesn't crowd the bar */
  .v3-mission-switch{flex:0 0 auto}
}