/* cockpit.css — Monolith Command Bridge. Hand-rolled, zero framework, no CDN.
   Design language: layered dark surfaces that lift off the void, a real typographic
   scale (display / title / sub / body / mono), per-panel accent rails + status dots,
   a gold-hero glow, and restrained ambient motion (boot reveal, eased meters).
   Hybrid theming: mythic panel titles paired with a quiet technical subtitle. */

:root {
  /* ----------------------------------------------------------------------------
     LOCAL EXTENSIONS to theme.css — the single source of truth, loaded LAST in
     index.html (after cockpit.css) so its :root wins. Only tokens theme.css does
     NOT define live here; ink / surface-2,3 / line / accent colors are inherited
     from theme.css (their old duplicates here were dead — theme always overrode
     them, e.g. --gold rendered as theme's #f6c651, not the #f5b73f once set here).
     ---------------------------------------------------------------------------- */

  /* surface ramp — cockpit-only steps (theme has --surface/-2/-3, not --surface-1;
     --bg0/1/2 = the deep field cockpit paints behind the glass) */
  --bg0:#060608; --bg1:#0a0a0f; --bg2:#0e0e15;
  --surface-1:#16161e;   /* panel body */

  /* accents theme.css does not define */
  --orange:#fb923c; --silver:#cbd5e1; --gray:#64748b;

  /* type — aliases onto theme.css faces + the opened cockpit scale (theme has no --fs-*) */
  --mono:var(--font-mono, ui-monospace,SFMono-Regular,Menlo,"Cascadia Code","Courier New",monospace);
  --sans:var(--font-ui, system-ui),-apple-system,"Segoe UI",Roboto,sans-serif;
  --display:var(--font-display, var(--sans));
  /* opened scale: kill the cramped 9–14px monospace wash; readable body, real hierarchy */
  --fs-hero:19px; --fs-display:15px; --fs-title:12px; --fs-sub:10px; --fs-body:13px; --fs-tiny:9.5px;

  /* elevation — cockpit-local shadow/glow tokens (theme.css uses --shadow-1/-2) */
  --sh-1:0 1px 3px rgba(0,0,0,.5);
  --sh-2:0 10px 34px rgba(0,0,0,.55);
  --glow-hero:0 0 0 1px rgba(245,183,63,.45), 0 0 30px rgba(245,183,63,.16), inset 0 0 40px rgba(245,183,63,.03);
  --glow-uv:0 0 0 1px rgba(151,71,255,.4), 0 0 22px rgba(151,71,255,.15);
}

* { margin:0; padding:0; box-sizing:border-box; }

body {
  font-family:var(--sans); color:var(--ink); overflow:hidden; height:100vh;
  font-size:var(--fs-body); line-height:1.5; letter-spacing:.005em;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility;
  background:
    radial-gradient(120% 90% at 50% -10%, var(--bg2) 0%, var(--bg1) 45%, var(--bg0) 100%);
}
/* ambient vignette + faint scanlines — pointer-transparent, very low cost */
body::after {
  content:""; position:fixed; inset:0; pointer-events:none; z-index:9999;
  background:
    radial-gradient(130% 110% at 50% 30%, transparent 55%, rgba(0,0,0,.45) 100%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.014) 0 1px, transparent 1px 3px);
  mix-blend-mode:soft-light; opacity:.6;
}
#root { display:flex; flex-direction:column; height:100vh; position:relative; z-index:1; }

/* ---- header ---- */
.header { padding:15px 24px; border-bottom:1px solid var(--line); flex:0 0 auto;
          display:flex; align-items:center; justify-content:space-between;
          background:linear-gradient(180deg, rgba(255,255,255,.02), transparent); }
.brand { font-family:var(--display); font-size:var(--fs-hero); font-weight:700; letter-spacing:.22em;
         text-transform:uppercase;
         background:linear-gradient(90deg, var(--ink), var(--gold) 140%); -webkit-background-clip:text;
         background-clip:text; -webkit-text-fill-color:transparent; }
.brand .dot { color:var(--gold); -webkit-text-fill-color:var(--gold); }
.hud { display:flex; align-items:center; gap:18px; font-size:var(--fs-tiny); letter-spacing:1.5px; color:var(--mute); }
.hud b { color:var(--ink); font-weight:700; letter-spacing:1px; }
#ws-status { color:var(--gold); }
.hbtn { font-family:var(--display); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
        padding:7px 14px; border-radius:6px; cursor:pointer; border:1px solid var(--line-2);
        background:var(--surface-2); color:var(--ink-2);
        transition:border-color var(--dur-1,.16s) var(--ease,ease), color var(--dur-1,.16s) var(--ease,ease), box-shadow var(--dur-1,.16s) var(--ease,ease); }
.hbtn:hover { border-color:var(--gold); color:var(--gold); box-shadow:0 0 14px rgba(245,183,63,.18); }
.seal-btn { background:rgba(52,211,153,.08); color:var(--green); border-color:rgba(52,211,153,.3); }
.seal-btn.sealed { background:rgba(245,158,11,.14); color:var(--amber); border-color:rgba(245,158,11,.5);
                   box-shadow:0 0 16px rgba(245,158,11,.3); animation:pulse 2s ease-in-out infinite; }

/* ---- dock (tiling) ---- */
#dock { flex:1 1 auto; display:flex; min-height:0; overflow:hidden; padding:3px; }
.col { display:flex; flex-direction:column; min-width:0; min-height:0; }
.vsplit { flex:0 0 6px; cursor:col-resize; border-radius:3px; transition:background .15s; }
.hsplit { flex:0 0 6px; cursor:row-resize; border-radius:3px; transition:background .15s; }
.vsplit:hover, .hsplit:hover { background:rgba(245,183,63,.45); }

/* ---- panel ---- */
.panel {
  --accent:var(--gold);
  display:flex; flex-direction:column; min-height:0; min-width:0; overflow:hidden;
  border:1px solid var(--line); border-radius:9px; margin:5px; background:var(--surface-1);
  box-shadow:var(--sh-1); position:relative;
  animation:bootIn .5s cubic-bezier(.2,.85,.25,1) both;
}
/* left accent rail */
.panel::before {
  content:""; position:absolute; left:0; top:0; bottom:0; width:2px; border-radius:9px 0 0 9px;
  background:var(--accent); opacity:.55; box-shadow:0 0 10px var(--accent);
}
.panel.hero { border-color:rgba(245,183,63,.4); box-shadow:var(--glow-hero), var(--sh-2); }
.panel.hero::before { opacity:.9; width:3px; }

.panel-head { flex:0 0 auto; display:flex; align-items:center; justify-content:space-between;
              padding:11px 14px 10px; border-bottom:1px solid var(--line);
              background:linear-gradient(180deg, var(--surface-2), rgba(29,29,40,.4)); }
.panel-id { display:flex; align-items:center; gap:8px; min-width:0; }
.panel-dot { flex:0 0 auto; width:7px; height:7px; border-radius:50%; background:var(--accent);
             box-shadow:0 0 8px var(--accent); }
.panel-titles { display:flex; flex-direction:column; min-width:0; line-height:1.15; }
.panel-title { font-family:var(--display); font-size:var(--fs-title); font-weight:700; letter-spacing:.14em;
               text-transform:uppercase;
               color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.panel-sub { font-size:var(--fs-sub); letter-spacing:.6px; color:var(--mute); text-transform:lowercase;
             white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.panel-tools { display:flex; gap:6px; flex:0 0 auto; }
.panel-x { font-size:12px; color:var(--faint); cursor:pointer; line-height:1; padding:0 3px; transition:color .15s; }
.panel-x:hover { color:var(--red); }
.panel-body { flex:1 1 auto; overflow:auto; padding:16px; min-height:0; }
.panel-body.flush { padding:0; }

/* ---- add-panel palette ---- */
#add-panel { position:relative; }
.palette { position:absolute; right:0; top:34px; z-index:40; background:var(--surface-2);
           border:1px solid var(--line-2); border-radius:8px; padding:6px; min-width:200px;
           box-shadow:var(--sh-2); display:none; }
.palette.open { display:block; animation:bootIn .2s ease both; }
.palette-item { font-size:var(--fs-body); padding:7px 10px; border-radius:5px; cursor:pointer; color:var(--ink-2); }
.palette-item:hover { background:rgba(245,183,63,.12); color:var(--gold); }
.palette-empty { font-size:var(--fs-sub); color:var(--mute); padding:7px 10px; }

/* ---- 3D stage (gauntlet + constellation) ---- */
.stage { position:relative; width:100%; height:100%;
         background:radial-gradient(85% 85% at 50% 38%, #11111a 0%, #07070b 70%, #050507 100%); }
#graph, #allspark-cv { width:100%; height:100%; display:block; cursor:grab; }
#graph:active, #allspark-cv:active { cursor:grabbing; }
.stage-hint { position:absolute; bottom:9px; left:13px; font-size:var(--fs-tiny); color:var(--mute);
              letter-spacing:1px; pointer-events:none; text-shadow:0 1px 4px #000; }
.allspark-legend { position:absolute; top:10px; left:13px; font-size:var(--fs-tiny); letter-spacing:.5px;
                   display:flex; gap:11px; pointer-events:none; opacity:.9; text-shadow:0 1px 4px #000; }

/* ---- tiers ---- */
.tier-card { background:var(--surface-2); border:1px solid var(--line); border-radius:7px; padding:10px;
             cursor:pointer; transition:all .18s; margin-bottom:8px; }
.tier-card:hover { border-color:var(--line-2); transform:translateX(2px); }
.tier-card.active { border-color:var(--cyan); box-shadow:0 0 14px rgba(34,211,238,.16); }
.tier-card.sovereign-active { border-color:var(--gold); box-shadow:0 0 20px rgba(245,183,63,.32); }
.tier-head { display:flex; align-items:center; justify-content:space-between; }
.tier-name { font-weight:800; font-size:12px; letter-spacing:1.5px; color:var(--ink); }
.tier-meta { font-size:var(--fs-sub); color:var(--mute); letter-spacing:1px; text-transform:uppercase; }
.tier-desc { font-size:var(--fs-sub); color:var(--mute); margin-top:5px; letter-spacing:.3px; }

/* ---- ledger ---- */
.ledger-item { font-size:var(--fs-body); padding:6px 5px; border-bottom:1px solid rgba(255,255,255,.05);
               line-height:1.4; color:var(--ink-2); display:flex; gap:7px; align-items:baseline; }
.ledger-item::before { content:""; flex:0 0 auto; width:5px; height:5px; border-radius:50%;
                       background:currentColor; opacity:.7; align-self:center; }
.ledger-ts { color:var(--faint); font-size:var(--fs-tiny); }
.k-route        { color:var(--cyan); }
.k-node\.handle { color:var(--purple); }
.k-execute      { color:var(--green); }
.k-spend        { color:var(--amber); }
.k-seal         { color:var(--red); }
.k-tool_result  { color:var(--emerald); }
.k-vault\.written, .k-vault\.write { color:var(--gold); }

/* ---- pending approvals ---- */
.pa-item { background:rgba(245,158,11,.07); border:1px solid rgba(245,158,11,.32); border-radius:6px;
           padding:8px; margin-bottom:7px; }
.pa-head { font-size:var(--fs-body); font-weight:700; color:var(--amber); }
.pa-detail { font-size:var(--fs-sub); color:var(--mute); margin:4px 0 7px; word-break:break-all; }
.pa-row { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.pa-btn { font-family:var(--mono); font-size:var(--fs-sub); letter-spacing:1px; text-transform:uppercase;
          padding:5px; border-radius:5px; cursor:pointer; border:1px solid var(--line-2);
          background:var(--surface-3); color:var(--ink-2); transition:all .15s; }
.pa-btn.ok { background:rgba(52,211,153,.1); color:var(--green); border-color:rgba(52,211,153,.4); }
.pa-btn.no { background:rgba(248,113,113,.1); color:var(--red); border-color:rgba(248,113,113,.4); }
.pa-btn:hover { filter:brightness(1.3); transform:translateY(-1px); }

/* ---- OS metrics ---- */
.os-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.os-bar > i { background:linear-gradient(90deg, var(--cyan), var(--gold)); }

/* ---- All Spark reader ---- */
.vault-reader { display:flex; flex-direction:column; height:100%; }
.vault-bar { flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:8px;
             padding:7px 11px; font-size:var(--fs-body); color:var(--mute);
             border-bottom:1px solid var(--line); background:var(--surface-2); }
.vault-bar #vault-bar-text { flex:1 1 auto; word-break:break-all; }
.vault-bar b { color:var(--gold); font-weight:700; letter-spacing:.5px; }
.vault-meta { color:var(--mute); font-weight:400; }
.vault-content { flex:1 1 auto; overflow:auto; margin:0; padding:11px 13px; font-family:var(--mono);
                 font-size:var(--fs-body); line-height:1.55; color:var(--ink-2); white-space:pre; tab-size:2; }

/* ---- All Spark editor (HITL write) ---- */
.vault-editor { display:flex; flex-direction:column; height:100%; }
.editor-bar { flex:0 0 auto; display:flex; gap:6px; padding:7px 9px;
              border-bottom:1px solid var(--line); background:var(--surface-2); }
.editor-bar input { flex:1; background:var(--bg1); border:1px solid var(--line-2); border-radius:5px;
                    color:var(--ink); font-family:var(--mono); font-size:var(--fs-body); padding:6px 9px; outline:none; }
.editor-bar input:focus { border-color:var(--gold); box-shadow:0 0 0 2px rgba(245,183,63,.12); }
#editor-area { flex:1 1 auto; resize:none; background:var(--bg1); border:none; outline:none; color:var(--ink-2);
               font-family:var(--mono); font-size:var(--fs-body); line-height:1.55; padding:11px 13px; tab-size:2;
               white-space:pre; overflow:auto; }
.editor-status { flex:0 0 auto; padding:6px 11px; font-size:var(--fs-sub); color:var(--mute);
                 border-top:1px solid var(--line); letter-spacing:.3px; }
.editor-status.ok  { color:var(--green); }
.editor-status.err { color:var(--red); }

/* ---- memory search ---- */
.mem-row { display:flex; gap:6px; margin-bottom:9px; }
.mem-row input { flex:1; background:var(--bg1); border:1px solid var(--line-2); border-radius:5px;
                 color:var(--ink); font-family:var(--mono); font-size:var(--fs-body); padding:7px 9px; outline:none; }
.mem-row input:focus { border-color:var(--uv); box-shadow:0 0 0 2px rgba(151,71,255,.14); }

/* ---- console (fixed bottom) ---- */
.console { flex:0 0 auto; border-top:1px solid var(--line-2); background:var(--bg1);
           padding:14px 20px; display:grid; grid-template-columns:1fr 380px; gap:20px; align-items:start;
           box-shadow:0 -8px 30px rgba(0,0,0,.4); }
.disp-label { font-size:var(--fs-sub); letter-spacing:2px; text-transform:uppercase; color:var(--gold);
              margin-bottom:7px; font-weight:700; }
.disp-row { display:flex; gap:8px; flex-wrap:wrap; }
#persona-select { background:var(--surface-1); border:1px solid var(--line-2); border-radius:6px;
                  color:var(--ink); font-family:var(--mono); font-size:11px; padding:6px 8px;
                  max-width:160px; cursor:pointer; }
#persona-select:focus { border-color:var(--uv); outline:none; }
#cmd { flex:1; background:var(--surface-1); border:1px solid var(--line-2); border-radius:6px; color:var(--ink);
       font-family:var(--mono); font-size:13px; padding:11px 13px; outline:none; transition:all .15s; }
#cmd:focus { border-color:var(--gold); box-shadow:0 0 0 3px rgba(245,183,63,.12); }
#gauntlet-btn { font-family:var(--display); font-size:12px; font-weight:700; letter-spacing:.16em;
                text-transform:uppercase; padding:0 20px; border-radius:7px; cursor:pointer;
                border:1px solid rgba(245,183,63,.55); color:#1a1405; transition:all .15s;
                background:linear-gradient(180deg, var(--gold), var(--amber)); }
#gauntlet-btn:hover { box-shadow:0 0 20px rgba(245,183,63,.4); transform:translateY(-1px); }
#gauntlet-btn:disabled { opacity:.5; cursor:wait; filter:grayscale(.4); }
#mic { font-family:var(--display); font-size:11px; font-weight:700; letter-spacing:.12em; padding:0 14px;
       border-radius:6px; cursor:pointer; border:1px solid rgba(34,211,238,.5);
       background:rgba(34,211,238,.1); color:var(--cyan); transition:all .15s; }
#mic:hover { background:rgba(34,211,238,.2); box-shadow:0 0 14px rgba(34,211,238,.25); }
#mic.recording { background:rgba(248,113,113,.18); color:var(--red); border-color:rgba(248,113,113,.6);
                 animation:pulse 1s ease-in-out infinite; }
.resp { margin-top:9px; font-size:var(--fs-body); line-height:1.5; min-height:36px; padding:9px 12px;
        border-radius:6px; border:1px solid var(--line); background:var(--surface-1); color:var(--ink-2);
        white-space:pre-wrap; max-height:130px; overflow-y:auto; transition:border-color .2s; }
.resp.working { border-color:rgba(245,183,63,.5); color:var(--gold); animation:pulse 1.2s ease-in-out infinite; }
.resp.done    { border-color:rgba(52,211,153,.45); color:var(--green); }
.resp.failed  { border-color:rgba(248,113,113,.5); color:var(--red); }

/* ---- meters ---- */
.meters { display:flex; flex-direction:column; gap:9px; }
.meter-label { font-size:var(--fs-tiny); letter-spacing:1px; text-transform:uppercase; color:var(--mute); }
.meter-val { font-size:15px; font-weight:800; color:var(--ink); }
.meter-val .unit { font-size:var(--fs-tiny); color:var(--mute); font-weight:400; }
.bar { height:6px; background:rgba(255,255,255,.06); border:1px solid var(--line); border-radius:3px;
       overflow:hidden; margin-top:5px; }
.bar > i { display:block; height:100%; width:100%; transition:width .6s cubic-bezier(.2,.8,.2,1);
           background:linear-gradient(90deg, var(--amber), var(--green)); }

/* ---- Energon / Vibranium meter groups ---- */
.meter-group { border:1px solid var(--line); border-radius:8px; padding:9px 11px; background:var(--surface-1); }
.group-label { font-size:var(--fs-sub); font-weight:800; letter-spacing:1.5px; text-transform:uppercase; margin-bottom:8px; }
.group-sub { font-weight:400; letter-spacing:1px; opacity:.6; }
.group-row { display:grid; grid-template-columns:repeat(3,1fr); gap:11px; }
.meter-group.vibranium .group-row { grid-template-columns:1fr; }
.meter-group.energon { border-color:rgba(34,211,238,.3);
                       background:linear-gradient(135deg, rgba(34,211,238,.07), rgba(245,183,63,.05)); }
.meter-group.energon .group-label { color:var(--cyan); }
.energon-bar { margin-top:9px; }
.energon-bar > i { background:linear-gradient(90deg, var(--cyan), var(--gold)); }
.meter-group.vibranium { border-color:rgba(139,92,246,.3);
                         background:linear-gradient(135deg, rgba(139,92,246,.08), rgba(203,213,225,.04)); }
.meter-group.vibranium .group-label { color:var(--violet); }
.meter-group.vibranium .meter-val { background:linear-gradient(90deg, var(--violet), var(--silver));
                                     -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }

/* ---- Codex · Notes panel ---- */
.notes-wrap { display:flex; flex-direction:column; height:100%; gap:7px; padding:8px; box-sizing:border-box; }
.notes-tabs { display:flex; flex-wrap:wrap; gap:4px; max-height:62px; overflow-y:auto; }
.notes-tab { font-size:var(--fs-tiny,9px); letter-spacing:.04em; padding:3px 8px; border-radius:5px;
  background:var(--surface-2,#1d1d28); color:var(--mute,#8a8a99); border:1px solid var(--line,rgba(255,255,255,.08));
  cursor:pointer; font-family:inherit; transition:all .15s; }
.notes-tab:hover { color:var(--txt,#e8e8f0); border-color:var(--gold,#f5b73f); }
.notes-tab.active { color:#0a0a0f; background:var(--gold,#f5b73f); border-color:var(--gold,#f5b73f); font-weight:600; }
.notes-empty { font-size:var(--fs-tiny,9px); color:var(--mute,#8a8a99); padding:4px; }
.notes-newrow { display:flex; gap:5px; }
.notes-newrow > input { flex:1; background:var(--surface-1,#16161e); border:1px solid var(--line,rgba(255,255,255,.08));
  color:var(--txt,#e8e8f0); border-radius:5px; padding:5px 8px; font-size:var(--fs-tiny,9px); font-family:inherit; outline:none; }
.notes-newrow > input:focus { border-color:var(--gold,#f5b73f); }
.notes-area { flex:1; min-height:90px; resize:none; background:var(--bg0,#060608);
  border:1px solid var(--line,rgba(255,255,255,.08)); border-radius:6px; color:var(--txt,#e8e8f0);
  padding:9px 11px; font-family:ui-monospace,"Cascadia Code",Menlo,monospace; font-size:11.5px; line-height:1.5;
  outline:none; tab-size:2; }
.notes-area:focus { border-color:rgba(245,183,63,.5); box-shadow:0 0 0 1px rgba(245,183,63,.18) inset; }
.notes-bar { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.notes-status { font-size:var(--fs-tiny,9px); letter-spacing:.04em; color:var(--mute,#8a8a99); }
.notes-status.ok   { color:var(--emerald,#34d399); }
.notes-status.warn { color:var(--amber,#f59e0b); }
.notes-status.err  { color:var(--red,#f87171); }
.notes-actions { display:flex; gap:5px; }
.notes-audit-out { max-height:140px; overflow-y:auto; }
.notes-audit-busy { font-size:var(--fs-tiny,9px); color:var(--cyan,#22d3ee); padding:5px; animation:pulse 1.2s infinite; }
.notes-audit-head { font-size:var(--fs-tiny,9px); letter-spacing:.08em; text-transform:uppercase; color:var(--gold,#f5b73f); margin:4px 0; }
.notes-audit-body { white-space:pre-wrap; font-family:ui-monospace,monospace; font-size:10.5px; line-height:1.5;
  color:var(--txt,#e8e8f0); background:var(--surface-1,#16161e); border-left:2px solid var(--gold,#f5b73f);
  padding:8px 10px; border-radius:0 5px 5px 0; margin:0; }
.notes-audit-err { font-size:var(--fs-tiny,9px); color:var(--amber,#f59e0b); padding:6px 8px; line-height:1.4;
  background:rgba(245,158,11,.07); border-radius:5px; }

/* ---- Workspace panels (Prompts / Plugins / Skills) ---- */
.ws-wrap { display:flex; flex-direction:column; height:100%; gap:6px; padding:8px; box-sizing:border-box; }
.ws-bar { display:flex; align-items:center; justify-content:space-between; }
.ws-count { font-size:var(--fs-tiny,9px); letter-spacing:.06em; text-transform:uppercase; color:var(--mute,#8a8a99); }
.ws-list { flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:4px; }
.ws-empty { font-size:var(--fs-tiny,9px); color:var(--mute,#8a8a99); padding:6px; line-height:1.5; }
.ws-err { font-size:var(--fs-tiny,9px); color:var(--red,#f87171); padding:6px; }
.ws-item { background:var(--surface-1,#16161e); border:1px solid var(--line,rgba(255,255,255,.08)); border-radius:5px; }
.ws-item[open] { border-color:rgba(245,183,63,.35); }
.ws-sum { display:flex; align-items:center; gap:6px; padding:6px 8px; cursor:pointer; list-style:none; flex-wrap:wrap; }
.ws-sum::-webkit-details-marker { display:none; }
.ws-sum::before { content:"▸"; color:var(--mute,#8a8a99); font-size:9px; transition:transform .15s; }
.ws-item[open] .ws-sum::before { transform:rotate(90deg); color:var(--gold,#f5b73f); }
.ws-name { font-size:10.5px; font-weight:600; color:var(--txt,#e8e8f0); }
.ws-desc { font-size:var(--fs-tiny,9px); color:var(--mute,#8a8a99); flex:1; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ws-kind, .ws-type { font-size:8px; letter-spacing:.06em; text-transform:uppercase; padding:1px 5px;
  border-radius:3px; font-weight:700; }
.ws-kind.k-command { background:rgba(139,92,246,.18); color:var(--violet,#a78bfa); }
.ws-kind.k-agent   { background:rgba(34,211,238,.16); color:var(--cyan,#22d3ee); }
.ws-type.t-http    { background:rgba(52,211,153,.16); color:var(--emerald,#34d399); }
.ws-type.t-stdio   { background:rgba(245,183,63,.16); color:var(--gold,#f5b73f); }
.ws-body { white-space:pre-wrap; font-family:ui-monospace,monospace; font-size:10px; line-height:1.5;
  color:var(--txt,#e8e8f0); background:var(--bg0,#060608); border-top:1px solid var(--line,rgba(255,255,255,.08));
  padding:8px 10px; margin:0; max-height:240px; overflow-y:auto; border-radius:0 0 5px 5px; }
.ws-row { display:flex; align-items:center; gap:7px; padding:5px 8px; background:var(--surface-1,#16161e);
  border:1px solid var(--line,rgba(255,255,255,.08)); border-radius:5px; }
.ws-target { font-size:var(--fs-tiny,9px); font-family:ui-monospace,monospace; color:var(--mute,#8a8a99);
  flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ---- motion ---- */
@keyframes pulse  { 0%,100%{opacity:.7} 50%{opacity:1} }
@keyframes bootIn { from{opacity:0; transform:translateY(10px) scale(.99)} to{opacity:1; transform:none} }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; transition:none !important; } }

/* ---- Infinite Brain panel ---- */
.brain-wrap { display:flex; flex-direction:column; height:100%; }
.brain-health { display:flex; gap:12px; padding:8px 10px; border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.01), transparent); font-size:var(--fs-tiny); }
.brain-chip { padding:3px 7px; border-radius:3px; background:rgba(255,255,255,.05);
  color:var(--ink-2); border:1px solid rgba(255,255,255,.08); }
.brain-pills { display:flex; flex-wrap:wrap; gap:6px; padding:8px 10px; border-bottom:1px solid var(--line);
  overflow-x:auto; min-height:32px; align-items:center; }
.brain-pill { padding:4px 9px; border-radius:5px; font-size:var(--fs-tiny); cursor:pointer;
  background:rgba(255,255,255,.06); color:var(--ink-2); border:1px solid rgba(255,255,255,.12);
  transition:all .15s; white-space:nowrap; }
.brain-pill:hover { background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.18); }
.brain-pill.active { background:rgba(151,71,255,.2); color:var(--uv); border-color:var(--uv); }
.brain-pill-count { opacity:.7; margin-left:4px; }
.brain-pill-empty { color:var(--mute); font-style:italic; }
.brain-search { flex:0 0 auto; width:100%; padding:7px 10px; border:1px solid var(--line);
  border-radius:5px; background:var(--surface-2); color:var(--ink); font-size:var(--fs-body);
  font-family:var(--mono); }
.brain-search:focus { outline:none; border-color:var(--uv); box-shadow:0 0 8px rgba(151,71,255,.2); }
.brain-canvas-wrap { flex:1 1 auto; position:relative; min-height:0; overflow:hidden; }
#brain-canvas { display:block; width:100%; height:100%; cursor:crosshair; }
.brain-tooltip { position:absolute; padding:6px 10px; border-radius:4px; background:rgba(0,0,0,.8);
  color:var(--ink); font-size:var(--fs-tiny); pointer-events:none; white-space:nowrap;
  border:1px solid var(--line-2); }

/* ---- tasks panel ---- */
.tasks-wrap { display:flex; flex-direction:column; gap:8px; height:100%; }
.tasks-newrow { display:flex; gap:6px; }
#task-new { flex:1; min-width:0; background:var(--surface-1); border:1px solid var(--line-2);
            border-radius:6px; color:var(--ink); font-family:var(--mono); font-size:12px; padding:8px 10px; }
#task-new:focus { outline:none; border-color:var(--cyan); box-shadow:0 0 0 3px rgba(34,211,238,.12); }
#task-pri { background:var(--surface-1); border:1px solid var(--line-2); border-radius:6px;
            color:var(--ink); font-family:var(--mono); font-size:11px; padding:0 6px; cursor:pointer; }
.tasks-list { flex:1 1 auto; overflow-y:auto; display:flex; flex-direction:column; gap:4px; min-height:0; }
.task-row { display:flex; align-items:center; gap:9px; padding:7px 9px; border:1px solid var(--line);
            border-radius:6px; background:var(--surface-2); }
.task-row.pri-high   { border-left:3px solid var(--red); }
.task-row.pri-normal { border-left:3px solid var(--cyan); }
.task-row.pri-low    { border-left:3px solid var(--gray); }
.task-check { cursor:pointer; font-size:15px; line-height:1; flex:0 0 auto; color:var(--cyan); }
.task-title { flex:1; min-width:0; font-size:12px; word-break:break-word; }
.task-row.done .task-title { text-decoration:line-through; color:var(--mute); }
.task-x { cursor:pointer; color:var(--mute); flex:0 0 auto; }
.task-x:hover { color:var(--red); }
.tasks-bar { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.tasks-status { font-size:var(--fs-tiny); color:var(--mute); }
.tasks-status.err { color:var(--red); }
.tasks-empty, .tools-empty { color:var(--mute); font-size:var(--fs-sub); padding:10px; text-align:center; }

/* ---- reminders panel ---- */
.rem-wrap { display:flex; flex-direction:column; gap:8px; height:100%; }
.rem-newrow { display:flex; gap:6px; flex-wrap:wrap; }
#rem-title { flex:1 1 100%; min-width:0; background:var(--surface-1); border:1px solid var(--line-2);
             border-radius:6px; color:var(--ink); font-family:var(--mono); font-size:12px; padding:8px 10px; }
#rem-when { flex:1 1 auto; background:var(--surface-1); border:1px solid var(--line-2); border-radius:6px;
            color:var(--ink); font-family:var(--mono); font-size:11px; padding:6px 8px; color-scheme:dark; }
#rem-title:focus, #rem-when:focus { outline:none; border-color:var(--violet); }
.rem-list { flex:1 1 auto; overflow-y:auto; display:flex; flex-direction:column; gap:4px; min-height:0; }
.rem-row { display:flex; align-items:center; gap:9px; padding:7px 9px; border:1px solid var(--line);
           border-radius:6px; background:var(--surface-2); border-left:3px solid var(--violet); }
.rem-row.overdue { border-left-color:var(--red); }
.rem-row.fired   { border-left-color:var(--amber); }
.rem-row.done    { border-left-color:var(--gray); }
.rem-check { cursor:pointer; font-size:15px; line-height:1; flex:0 0 auto; color:var(--violet); }
.rem-body { flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.2; }
.rem-title-t { font-size:12px; word-break:break-word; }
.rem-when-t { font-size:var(--fs-tiny); color:var(--mute); margin-top:2px; }
.rem-row.overdue .rem-when-t { color:var(--red); }
.rem-row.done .rem-title-t { text-decoration:line-through; color:var(--mute); }
.rem-x { cursor:pointer; color:var(--mute); flex:0 0 auto; }
.rem-x:hover { color:var(--red); }
.rem-bar { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.rem-status { font-size:var(--fs-tiny); color:var(--mute); }
.rem-status.err { color:var(--red); }
.rem-empty { color:var(--mute); font-size:var(--fs-sub); padding:10px; text-align:center; }

/* ---- reply assistant (compose) panel ---- */
.cmp-wrap { display:flex; flex-direction:column; gap:8px; height:100%; }
.cmp-in { flex:0 0 auto; min-height:64px; max-height:140px; resize:vertical; background:var(--surface-1);
          border:1px solid var(--line-2); border-radius:6px; color:var(--ink); font-family:var(--mono);
          font-size:12px; padding:8px 10px; }
.cmp-in:focus { outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(245,183,63,.12); }
.cmp-row { display:flex; gap:6px; }
#cmp-tone { background:var(--surface-1); border:1px solid var(--line-2); border-radius:6px; color:var(--ink);
            font-family:var(--mono); font-size:11px; padding:0 8px; cursor:pointer; }
#cmp-go { flex:1; }
.cmp-out { flex:1 1 auto; overflow-y:auto; display:flex; flex-direction:column; gap:5px; min-height:0; }
.cmp-draft { display:flex; align-items:flex-start; gap:8px; padding:8px 10px; border:1px solid var(--line);
             border-radius:6px; background:var(--surface-2); border-left:3px solid var(--gold); }
.cmp-draft-t { flex:1; min-width:0; font-size:12px; line-height:1.4; word-break:break-word; }
.cmp-copy { flex:0 0 auto; }
.cmp-status { font-size:var(--fs-tiny); color:var(--mute); }
.cmp-status.err { color:var(--red); }
.cmp-status.working { color:var(--gold); }

/* ---- tools launcher panel ---- */
.tools-wrap { display:flex; flex-direction:column; gap:8px; height:100%; }
.tools-grid { flex:1 1 auto; overflow-y:auto; display:flex; flex-direction:column; gap:5px; min-height:0; }
.tool-tile { display:flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid var(--line);
             border-radius:6px; background:var(--surface-2); }
.tool-launch { flex:1; min-width:0; text-decoration:none; color:var(--gold); font-size:12px;
               font-weight:700; letter-spacing:.5px; }
.tool-launch:hover { text-shadow:0 0 10px rgba(245,183,63,.4); }
.tool-launch.disabled { color:var(--mute); pointer-events:none; font-weight:600; }
.tool-x { cursor:pointer; color:var(--mute); flex:0 0 auto; }
.tool-x:hover { color:var(--red); }
.tools-newrow { display:flex; gap:6px; flex-wrap:wrap; }
.tools-newrow input { flex:1 1 110px; min-width:0; background:var(--surface-1); border:1px solid var(--line-2);
                      border-radius:6px; color:var(--ink); font-family:var(--mono); font-size:11px; padding:7px 9px; }
.tools-newrow input:focus { outline:none; border-color:var(--gold); }
.tools-hint { font-size:var(--fs-tiny); color:var(--faint); line-height:1.45; }

/* ============================================================================
   Responsive — phone / narrow tablet. The desktop cockpit is a fixed-viewport
   tiling dock; below this breakpoint it becomes a single full-width vertical
   scroll so the SAME page is the installable iPhone app. Desktop is untouched
   (everything here is gated by the media query). WebGL renders on the client GPU.
   ============================================================================ */
@media (max-width: 860px) {
  /* release the desktop fixed-viewport lock so the page can scroll */
  html, body { overflow:auto; height:auto; -webkit-text-size-adjust:100%; }
  body { min-height:100dvh; }
  #root { height:auto; min-height:100dvh; }

  /* header wraps and clears the notch */
  .header { flex-wrap:wrap; gap:8px 14px;
            padding:calc(11px + env(safe-area-inset-top)) 14px 11px; }
  .hud { gap:12px; flex-wrap:wrap; row-gap:6px; }

  /* dock: stack the columns vertically, full width; page scrolls (override
     the inline flex-grow app.js sets per column/panel) */
  #dock { flex-direction:column; overflow:visible; padding:6px 8px; }
  .col { flex:none !important; width:100%; }
  .panel { flex:none !important; width:100%; margin:6px 0; min-height:300px; }
  .panel.hero { min-height:58vh; }                 /* the Gauntlet gets real estate */
  .panel-head { padding:11px 13px; }               /* larger tap target */
  .panel-x { font-size:16px; padding:2px 6px; }

  /* drag-resize splitters are meaningless on touch */
  .vsplit, .hsplit { display:none !important; }

  /* console: dispatcher stacked above meters; input sized to stop iOS auto-zoom */
  .console { grid-template-columns:1fr; gap:14px;
             padding:12px 14px calc(12px + env(safe-area-inset-bottom)); }
  .disp-row { gap:8px; }
  #cmd { font-size:16px; padding:12px 13px; flex:1 1 100%; }   /* ≥16px = no zoom on focus */
  #persona-select { max-width:none; flex:1 1 100%; font-size:14px; }
  #gauntlet-btn, #mic { padding:12px 16px; flex:1 1 auto; }
  .meters { flex-direction:row; flex-wrap:wrap; }
  .meter-group { flex:1 1 150px; }
}

/* ============================================================================
   OMNI RESKIN LAYER — appended last so it wins the cascade. Lifts the Bridge to
   the unified glass+energon design system (theme.css tokens). Every heavy effect
   reads tokens that [data-fx=lite] flattens, so the E530 stays smooth.
   ========================================================================== */

/* page: cobalt nebula over the void (replaces the flat dark radial) */
body {
  background: var(--nebula) !important;
  background-attachment: fixed;
  font-family: var(--sans);
}
/* keep the vignette, drop the milky scanline wash for a cleaner, deeper field */
body::after { opacity: .42; }

/* header → energon brand with a hairline energy underline */
.header {
  border-bottom: 1px solid var(--glass-edge);
  background: linear-gradient(180deg, color-mix(in srgb, var(--energon) 6%, transparent), transparent);
  -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur));
}
.brand {
  background: linear-gradient(92deg, var(--energon-hot), var(--energon) 45%, var(--stone-uv-apex) 130%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  text-shadow: 0 0 26px var(--energon-glow);
}
.brand .dot { color: var(--energon); -webkit-text-fill-color: var(--energon); }

/* panels → glass slabs that lift off the void with an accent energy edge */
.panel {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.15);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.15);
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-3);
  /* depth from micro-detail: drop shadow + a crisp top edge-light + a soft floor shadow inside */
  box-shadow:
    var(--shadow-2),
    inset 0 1px 0 color-mix(in srgb, #fff 8%, transparent),
    inset 0 -28px 48px -34px #000;
}
/* top spec sheen */
.panel::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 38%; border-radius: var(--r-3) var(--r-3) 0 0;
  background: linear-gradient(180deg, color-mix(in srgb,#fff 7%, transparent), transparent);
  pointer-events: none;
}
/* left rail → a glowing energon bar */
.panel::before {
  width: 2px; border-radius: var(--r-3) 0 0 var(--r-3);
  background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 30%, transparent));
  opacity: .9; box-shadow: 0 0 14px var(--accent-glow);
}
.panel:hover { box-shadow: var(--shadow-2), var(--edge-glow); }

/* hero (Infinity Gauntlet) → an energy apex with a real core glow */
.panel.hero {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--glass-edge));
  box-shadow: var(--shadow-2), var(--core-glow);
}
.panel.hero::before { width: 3px; }

/* panel head → translucent glass strip */
.panel-head {
  border-bottom: 1px solid var(--hair);
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 60%, transparent), transparent);
}
.panel-title { letter-spacing: var(--tracking-wide); }
/* live status dot pulses (motion-gated by theme.css) */
.panel-dot { box-shadow: 0 0 10px var(--accent), 0 0 2px var(--accent); }
:root[data-fx="full"] .panel-dot { animation: omni-pulse var(--dur-slow) var(--ease) infinite; }

/* console + meters → glass */
.console {
  border-top: 1px solid var(--glass-edge);
  background: var(--glass-bg-2);
  -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur));
}
.meter-group {
  border: 1px solid var(--hair); border-radius: var(--r-2);
  background: color-mix(in srgb, var(--surface) 55%, transparent);
}
.meter-group.energon { border-color: color-mix(in srgb, var(--energon) 30%, transparent);
  box-shadow: inset 0 0 24px -16px var(--energon); }
.meter-group.energon .group-label { color: var(--energon); }

/* energon meter bar → live gradient */
#m-bar { background: linear-gradient(90deg, var(--energon-deep), var(--energon) 60%, var(--energon-hot)); }