/* LB Builder — chat with the Claude Code CLI on the host Mac via a
   Cloudflare-Tunneled bridge. Two-pane layout: session list left,
   chat right. Kids never see this — admin code gate up front. */

* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { margin:0; padding:0; width:100%; height:100%;
  background:#f4f6fb; color:#16202e;
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  overflow:hidden; }

/* ── Gates (admin code + one-time bridge config) ──────────────── */
.gate { position:fixed; inset:0; background:linear-gradient(180deg,#1d2842,#0e1524);
  color:#eaf2ff; display:flex; align-items:center; justify-content:center;
  padding:24px; z-index:100; }
.gate-card { background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.10);
  border-radius:18px; padding:28px; max-width:420px; width:100%; text-align:center;
  box-shadow:0 24px 60px rgba(0,0,0,0.35); }
.gate-card h1 { margin:0 0 6px; font-size:28px; letter-spacing:.02em;
  color:#ffd93d; font-weight:800; }
.gate-sub { margin:0 0 18px; color:#9fb0cf; font-size:14px; }
.gate-card input { width:100%; padding:12px 14px; background:#0d1728;
  color:#eaf2ff; border:1px solid #2a3a55; border-radius:10px;
  font:600 15px 'Inter',sans-serif; margin:8px 0; }
.gate-card input:focus { outline:none; border-color:#3d7bff;
  box-shadow:0 0 0 3px rgba(61,123,255,0.20); }
.gate-card button { width:100%; padding:12px; margin-top:10px;
  background:linear-gradient(135deg,#2e6bf0,#6ba0ff); color:#fff;
  border:0; border-radius:10px; font:800 15px 'Inter',sans-serif;
  cursor:pointer; box-shadow:0 6px 16px rgba(46,107,240,0.35); }
.gate-card button:active { transform:translateY(1px); }
.gate-msg { margin-top:12px; min-height:18px; font-size:13px; color:#ff9aa8; }
.gate-msg.ok { color:#7fe1ff; }

/* ── App layout ───────────────────────────────────────────────── */
.app { position:fixed; inset:0; display:grid; grid-template-columns:280px 1fr; background:#f4f6fb; }
/* Desktop: sessions pane collapsed (☰ in the topbar / ◀ in the pane). */
@media (min-width: 721px) {
  .app.side-hidden { grid-template-columns:1fr; }
  .app.side-hidden .side { display:none; }
}
@media (max-width: 720px) {
  .app { grid-template-columns:1fr; }
  /* .app .side (not bare .side) so this beats the later .side{display:flex}
     base rule — otherwise the pane stacks on top of the chat on phones. */
  .app .side { display:none; }
  .app.show-sidebar .side { display:flex; }
  .app.show-sidebar .main { display:none; }
}

.side { display:flex; flex-direction:column; background:#111a2f; color:#dbe6ff;
  border-right:1px solid #1c2846; }
/* Zoom row — sits above the Sessions header; scales the right pane. */
.zoom-row { display:flex; align-items:center; gap:6px; padding:12px 14px 0; }
.zoom-label { flex:1; font-size:11px; letter-spacing:.10em; text-transform:uppercase;
  color:#8390a8; font-weight:800; }
.zoom-btn { width:34px; height:30px; padding:0; font-size:18px; line-height:1;
  display:inline-flex; align-items:center; justify-content:center; margin:0; }
.zoom-pct { min-width:54px; height:30px; padding:0 8px; margin:0;
  font:700 12px 'JetBrains Mono',monospace; color:#ffd93d; }
.side-hide { margin-left:4px; font-size:14px; }
.side-head { display:flex; align-items:center; padding:14px 14px 8px; }
.side-head h2 { flex:1; margin:0; font-size:14px; letter-spacing:.10em;
  text-transform:uppercase; color:#9fb0cf; font-weight:800; }
.sess-list { flex:1; overflow-y:auto; padding:6px 8px 8px; }
.sess-item { display:flex; align-items:center; gap:8px; padding:10px 10px;
  border-radius:10px; cursor:pointer; color:#dbe6ff; font-weight:600; font-size:14px;
  margin-bottom:2px; line-height:1.25; }
.sess-item:hover { background:rgba(255,255,255,0.05); }
.sess-item.active { background:rgba(61,123,255,0.20); color:#fff; }
.sess-item .name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sess-item .when { font-size:11px; color:#8390a8; font-weight:500; }
.sess-check { flex:none; width:18px; height:18px; margin:0; cursor:pointer; accent-color:#ff5c6c; }
.sess-item.checked { background:rgba(255,92,108,0.14); }
.bulk-del { margin-right:8px; white-space:nowrap; }
.side-foot { padding:12px 14px; border-top:1px solid #1c2846; font-size:12px; color:#9fb0cf; }
.side-foot .me { margin-bottom:6px; }
.side-foot b { color:#ffd93d; letter-spacing:.06em; }
.refresh-line { display:flex; align-items:center; gap:8px; margin:0 0 8px; }
.refresh-line #refreshWhen { flex:1; text-align:right; }
/* Tiny pulse on the sessions header the instant a poll completes. */
.side-head.pulse h2 { color:#7fe1ff; transition:color 220ms ease; }

.ghost { appearance:none; background:none; border:1px solid rgba(255,255,255,0.14);
  color:#dbe6ff; padding:6px 10px; border-radius:8px; cursor:pointer;
  font:700 12px 'Inter',sans-serif; }
.ghost:hover { background:rgba(255,255,255,0.06); }
.ghost.small { padding:4px 8px; font-size:11px; margin-right:6px; }
.ghost.danger { color:#ff9aa8; border-color:rgba(255,120,120,0.35); }

/* ── Main pane ────────────────────────────────────────────────── */
.main { display:flex; flex-direction:column; overflow:hidden;
  zoom:var(--main-zoom, 1); }   /* set by the sidebar Zoom −/+ buttons */
.topbar { display:flex; align-items:center; padding:14px 20px; background:#fff;
  border-bottom:1px solid #e3e8f4; box-shadow:0 2px 8px rgba(20,40,90,0.04); }
.side-toggle { color:#3a465e; border-color:#d3daea; background:#fff; font-size:18px;
  line-height:1; padding:6px 10px; margin-right:12px; }
.side-toggle:hover { background:#f0f3fb; }
.model-wrap { display:flex; align-items:center; gap:6px; margin-right:12px; flex:none; }
.model-label { font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:#8b98b3; }
.model-sel { appearance:none; -webkit-appearance:none; background:#fff; color:#16202e;
  border:1px solid #d3daea; border-radius:8px; padding:6px 26px 6px 10px; font-size:13px;
  font-weight:700; font-family:inherit; cursor:pointer; min-width:92px;
  background-image:linear-gradient(45deg,transparent 50%,#8b98b3 50%),linear-gradient(135deg,#8b98b3 50%,transparent 50%);
  background-position:calc(100% - 14px) 52%,calc(100% - 9px) 52%; background-size:5px 5px,5px 5px;
  background-repeat:no-repeat; }
.model-sel:disabled { opacity:.55; cursor:default; }
.model-sel.busy { border-color:#f4c04d; }
.model-sel.mixed { border-color:#f4c04d; background-color:#fffaf0; }
@media (max-width:720px){ .model-label { display:none; } .model-wrap { margin-right:8px; }
  .model-sel { min-width:0; padding:6px 22px 6px 8px; font-size:12px; } }
/* Session title gets its own full-width line under the ☰ / Model / Rename row. */
.topbar { flex-wrap:wrap; row-gap:8px; }
.sess-title-wrap { order:10; flex:1 0 100%; min-width:0; padding-top:8px; border-top:1px solid #eef1f8; }
#sortToggle { margin-left:auto; }   /* sort sits in the top bar, left of Rename/Delete (2026-10-27) */
.sess-title { display:block; font-size:20px; font-weight:800; color:#16202e; padding:4px 6px; overflow-wrap:anywhere;
  border-radius:6px; cursor:text; outline:none; }
.sess-title:focus, .sess-title:hover { background:rgba(61,123,255,0.08); }

.thread { flex:1; overflow-y:auto; padding:22px 20px 8px; background:#f4f6fb;
  -webkit-overflow-scrolling:touch; }
.msg-row { display:flex; margin:0 0 16px; }
.msg-row.user { justify-content:flex-end; }
.msg-row.asst { justify-content:flex-start; }
.msg-stack { max-width:min(720px, 88%); display:flex; flex-direction:column; }
.msg-row.user .msg-stack { align-items:flex-end; }
.msg-row.asst .msg-stack { align-items:flex-start; }
.msg-tag { font:800 10px 'JetBrains Mono',monospace; letter-spacing:.08em;
  padding:2px 8px; border-radius:999px; margin-bottom:4px; }
.msg-row.user .msg-tag { background:#0e1524; color:#ffd93d; }
.msg-row.asst .msg-tag { background:#e6ecf7; color:#3a465e; }
.msg-bubble { padding:12px 16px; border-radius:16px; line-height:1.55;
  font-size:15px; white-space:pre-wrap; word-wrap:break-word; }
/* User = black bg, white text */
.msg-row.user .msg-bubble { background:#0e1524; color:#fff;
  border-bottom-right-radius:6px; box-shadow:0 6px 14px rgba(0,0,0,0.20); }
/* Assistant = opposite (white bg, black text) */
.msg-row.asst .msg-bubble { background:#fff; color:#16202e;
  border:1px solid #e3e8f4; border-bottom-left-radius:6px;
  box-shadow:0 6px 14px rgba(20,40,90,0.06); }
.msg-bubble img { max-width:100%; border-radius:10px; margin:6px 0; }
.msg-bubble pre { background:#0e1524; color:#dbe6ff; padding:12px 14px;
  border-radius:10px; overflow:auto; font:500 13px 'JetBrains Mono',monospace; margin:8px 0; }
.msg-bubble code { font-family:'JetBrains Mono',monospace; font-size:0.95em;
  background:rgba(0,0,0,0.06); padding:1px 5px; border-radius:4px; }
.msg-row.user .msg-bubble code { background:rgba(255,255,255,0.14); color:#ffd93d; }
.msg-row.user .msg-bubble pre  { background:#000; }
.msg-when { font-size:11px; color:#8390a8; margin-top:4px; }

/* ── Composer ─────────────────────────────────────────────────── */
.composer { padding:0 16px 16px; background:#fff; border-top:1px solid #e3e8f4; }
/* Drag handle: makes the typing box taller or shorter as a share of the screen. */
.composer-grip { height:26px; margin:0 -16px 4px; display:flex; align-items:center; justify-content:center;
  cursor:ns-resize; touch-action:none; -webkit-user-select:none; user-select:none; }
.composer-grip span { display:block; width:72px; height:6px; border-radius:999px; background:#d3daea;
  transition:background 120ms ease, width 120ms ease; }
.composer-grip:hover span { background:#aab6d0; width:96px; }
.composer-grip.dragging span { background:#2e6bf0; width:120px; }
.composer-grip::after { content:'⇕'; position:absolute; opacity:0; }
.drop-zone { border:1.5px dashed #c8d2e8; border-radius:14px; padding:10px 12px;
  background:#f4f6fb; transition:border-color 120ms ease, background 120ms ease; }
.drop-zone.drag { border-color:#2e6bf0; background:rgba(46,107,240,0.06); }
.drop-zone textarea { display:block; width:100%; min-height:52px; max-height:240px;
  border:0; background:transparent; outline:none; resize:none;
  font:500 30px 'Inter',sans-serif; color:#16202e; line-height:1.4; padding:6px 4px; }
.drop-preview { position:relative; display:inline-block; margin:4px 0 8px; }
.drop-preview img { max-width:180px; max-height:120px; border-radius:8px; display:block;
  border:1px solid #e3e8f4; }
.drop-preview button { position:absolute; top:-8px; right:-8px; width:24px; height:24px;
  border-radius:50%; border:0; background:#0e1524; color:#fff; cursor:pointer;
  font-size:14px; font-weight:900; line-height:1; box-shadow:0 4px 10px rgba(0,0,0,0.30); }
.composer-foot { display:flex; align-items:center; gap:8px; margin:2px 0 8px; }
.composer-foot .grow { flex:1; }
.composer-foot .ghost { color:#3a465e; border-color:#d3daea; background:#fff; }
.composer-foot .ghost:hover { background:#f0f3fb; }
#attachBtn { }   /* same size as the rest of its row */
#sendBtn { appearance:none; border:0; background:linear-gradient(135deg,#2e6bf0,#6ba0ff);
  color:#fff; padding:9px 20px; border-radius:999px; font:800 14px 'Inter',sans-serif;
  letter-spacing:.04em; text-transform:uppercase; cursor:pointer;
  box-shadow:0 6px 14px rgba(46,107,240,0.32); }
#sendBtn:disabled { opacity:0.55; cursor:not-allowed; }
.dim { color:#8390a8; font-size:13px; padding:8px 6px; }
.small { font-size:12px; }

/* "Claude is working" bubble shown in the thread while a send is in flight */
.msg-row.thinking .msg-bubble { display:flex; align-items:center; gap:10px;
  font-weight:700; color:#3a465e; }
.think-dots { display:inline-flex; gap:5px; }
.think-dots span { width:9px; height:9px; border-radius:50%; background:#2e6bf0;
  animation:thinkPulse 1.2s ease-in-out infinite; }
.think-dots span:nth-child(2) { animation-delay:.2s; }
.think-dots span:nth-child(3) { animation-delay:.4s; }
@keyframes thinkPulse { 0%,100% { opacity:.25; transform:translateY(0); }
  50% { opacity:1; transform:translateY(-4px); } }
.stop-btn { margin-left:14px; border:0; border-radius:10px; background:#ff3d4c; color:#fff;
  font:800 15px 'Inter',sans-serif; padding:10px 16px; cursor:pointer;
  box-shadow:0 3px 8px rgba(255,61,76,0.35); }
.stop-btn:disabled { opacity:.55; cursor:default; }

/* ── Voice mode overlay (2026-10-26) ─────────────────────────── */
.voice-btn{ font-weight:700; }
.voice-overlay{ position:fixed; inset:0; z-index:200; background:#0e1726; color:#fff;
  flex-direction:column; align-items:center; justify-content:center; gap:22px;
  padding:24px 20px calc(24px + env(safe-area-inset-bottom)); text-align:center; font-family:Inter,system-ui,sans-serif; }
.voice-top{ position:absolute; top:calc(14px + env(safe-area-inset-top)); left:0; right:0; display:flex; justify-content:center; }
.voice-pick{ font-size:16px; padding:8px 12px; border-radius:10px; background:#1b2840; color:#fff; border:1px solid #33476b; }
.voice-circle{ width:min(52vw,240px); height:min(52vw,240px); border-radius:50%; border:0; cursor:pointer;
  background:#2e6bf0; box-shadow:0 0 0 0 rgba(46,107,240,.6); position:relative; }
.voice-circle span{ position:absolute; inset:28%; border-radius:50%; background:rgba(255,255,255,.9); }
.voice-overlay.listening .voice-circle{ background:#22b35e; animation:vpulse 1.4s ease-out infinite; }
.voice-overlay.listening .voice-circle span{ inset:34%; }
.voice-overlay.working .voice-circle, .voice-overlay.sending .voice-circle{ background:#d99a1e; animation:vspin 1.6s linear infinite; }
.voice-overlay.working .voice-circle span{ inset:30% 46% 30% 46%; border-radius:6px; }
.voice-overlay.speaking .voice-circle{ background:#2e6bf0; animation:vpulse 0.9s ease-out infinite; }
@keyframes vpulse{ 0%{ box-shadow:0 0 0 0 rgba(255,255,255,.45);} 100%{ box-shadow:0 0 0 38px rgba(255,255,255,0);} }
@keyframes vspin{ to{ transform:rotate(360deg);} }
.voice-state{ font-size:38px; font-weight:800; }
.voice-heard{ font-size:24px; line-height:1.35; max-width:640px; min-height:2.7em; max-height:30vh; overflow:auto; color:#cfe0ff; }
.voice-hint{ font-size:15px; color:#8ea3c7; }
.voice-end{ font-size:24px; font-weight:800; padding:16px 44px; border-radius:16px; border:0; background:#e0453a; color:#fff; cursor:pointer; }
.voice-overlay.thinking .voice-circle{ background:#d99a1e; animation:vspin 1.6s linear infinite; }
.voice-overlay.error .voice-circle{ background:#e0453a; }
.voice-overlay.error .voice-heard{ color:#ffd2cc; }
.voice-overlay.listening .voice-state{ font-size:30px; }
.voice-overlay.drafting .voice-circle{ background:#8a5cf0; animation:vspin 1.6s linear infinite; }
.voice-debug{ position:absolute; bottom:calc(6px + env(safe-area-inset-bottom)); left:8px; right:8px; font:11px/1.3 'JetBrains Mono',monospace; color:#5d7095; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* phones: let the footer buttons wrap instead of pushing Send off-screen */
@media (max-width:560px){ .composer-foot { flex-wrap:wrap; row-gap:6px; } }
#sendBtn { margin-left:auto; }   /* stays at the right edge even when the row wraps on a phone */
.think-meta { margin-left:8px; font-size:.85em; color:#6b7a99; font-variant-numeric:tabular-nums; }
.voice-top{ gap:10px; flex-wrap:wrap; align-items:center; }
.voice-stop{ font-size:18px; font-weight:800; padding:10px 18px; border-radius:12px; border:0; background:#e0453a; color:#fff; cursor:pointer; }
.voice-bottom{ display:flex; gap:14px; align-items:center; justify-content:center; }
.voice-clear{ font-size:24px; font-weight:800; padding:16px 30px; border-radius:16px; border:2px solid #5d7095; background:transparent; color:#fff; cursor:pointer; }
.voice-progress{ font-size:30px; font-weight:800; color:#ffd36b; font-variant-numeric:tabular-nums; }

/* Voice screen layout: small status light UNDER the voice picker, smaller text,
   You / Claude areas split by a divider (Claude's side scrolls), instructions as bullets. */
.voice-overlay{ justify-content:flex-start; gap:10px; padding-top:calc(14px + env(safe-area-inset-top)); }
.voice-overlay .voice-top{ position:static; }
.voice-circle{ width:min(22vw,92px); height:min(22vw,92px); flex:none; }
.voice-state, .voice-overlay.listening .voice-state{ font-size:17px; font-weight:800; }
.voice-said-hd, .voice-heard-hd{ align-self:stretch; max-width:640px; margin:0 auto; width:100%; text-align:left;
  font:800 11px/1 Inter,system-ui,sans-serif; letter-spacing:.12em; text-transform:uppercase; color:#5d7095; }
.voice-heard-hd{ border-top:1px solid #33476b; padding-top:10px; }
.voice-said{ align-self:stretch; width:100%; max-width:640px; margin:0 auto; text-align:left; font-size:17px; line-height:1.35;
  color:#fff; max-height:18vh; overflow:auto; min-height:1.4em; }
.voice-heard{ align-self:stretch; width:100%; max-width:640px; margin:0 auto; text-align:left; font-size:17px; line-height:1.4;
  flex:1 1 auto; min-height:3em; max-height:none; overflow:auto; -webkit-overflow-scrolling:touch;
  background:rgba(255,255,255,.04); border-radius:10px; padding:8px 10px; box-sizing:border-box; }
.voice-progress{ font-size:16px; }
.voice-hint{ align-self:stretch; max-width:640px; margin:0 auto; width:100%; text-align:left; padding-left:20px; box-sizing:border-box;
  font-size:13px; line-height:1.45; color:#8ea3c7; }
.voice-hint li{ margin:0; }
.voice-bottom{ padding-bottom:18px; }
.voice-clear, .voice-end{ font-size:19px; padding:12px 26px; }
.voice-circle{ margin:12px 0 6px; }                    /* room for the pulse ring under the picker */
.voice-said, .voice-said-hd, .voice-heard-hd, .voice-hint, .voice-state, .voice-top, .voice-bottom{ flex:none; }

/* Person + session pickers, top left of the voice screen */
.voice-overlay .voice-top{ align-self:stretch; justify-content:space-between; align-items:flex-start; flex-wrap:nowrap; gap:8px; }
.voice-sess, .voice-right{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.voice-sess{ align-items:flex-start; } .voice-right{ align-items:flex-end; }
.voice-sess .voice-pick{ max-width:46vw; font-size:14px; padding:6px 8px; }
.voice-right .voice-pick{ font-size:14px; padding:6px 8px; max-width:44vw; }
.voice-right .voice-stop{ font-size:14px; padding:7px 12px; }
.voice-sess-list{ display:flex; flex-direction:column; gap:6px; }
.voice-sess-list button{ text-align:left; font:700 16px/1.2 Inter,system-ui,sans-serif; padding:10px 12px; border-radius:10px;
  border:1px solid #33476b; background:#1b2840; color:#fff; cursor:pointer; }
.voice-sess-list button.on{ background:#2e6bf0; border-color:#2e6bf0; }

/* Instructions hidden behind a small button */
.voice-help-btn{ flex:none; align-self:center; font:700 13px Inter,system-ui,sans-serif; color:#8ea3c7; background:transparent;
  border:1px solid #33476b; border-radius:999px; padding:6px 14px; cursor:pointer; }
.voice-hint[hidden]{ display:none; }

/* Layout v3: person + session side by side on top, circle (+ Stop) under them,
   voice picker inside the How-to-talk panel, no debug line. */
.voice-overlay .voice-top{ flex-direction:row; justify-content:flex-start; align-items:center; gap:8px; width:100%; max-width:640px; margin:0 auto; }
.voice-overlay .voice-top .voice-pick{ font-size:14px; padding:6px 8px; max-width:none; }
#voicePerson{ flex:none; } #voiceSession{ flex:1 1 auto; min-width:0; }
.voice-mid{ flex:none; display:flex; align-items:center; justify-content:center; gap:14px; }
.voice-mid .voice-circle{ margin:8px 0 2px; }
.voice-mid .voice-stop{ font-size:14px; padding:8px 12px; }
.voice-debug{ display:none; }
.voice-hint ul{ margin:8px 0 0; padding-left:20px; }
.voice-help-voice{ display:flex; align-items:center; gap:8px; font-weight:700; color:#cfe0ff; }
.voice-help-voice .voice-pick{ font-size:14px; padding:6px 8px; }
.voice-hint{ padding-left:0; }

/* Always open at the very top and fit the visible screen: exact visible height
   (dvh), the Claude box takes whatever room is left (shrinks instead of pushing the top off),
   and the page behind can't scroll while voice is open. */
.voice-overlay{ top:0; bottom:auto; height:100vh; height:100dvh; box-sizing:border-box; overflow-y:auto; overscroll-behavior:contain; }
.voice-heard{ flex:1 1 0; min-height:2.6em; }
html.voice-open, html.voice-open body{ overflow:hidden; height:100%; }
/* Room under the phone's status bar (time / Wi-Fi): exactly 30px + safe area — the user 2026-10-28 */
.voice-overlay{ padding-top:calc(30px + env(safe-area-inset-top)); }