claude-agent-service/app/breakglass/static/assets/index-BoWC1Onq.css
Viktor Barzin 5b5daa4bea breakglass UI v2: attachable sessions (tmux model) + mobile-first redesign
Full audit-driven rework. Keeps the proven SSE-translation + verb logic; everything else upgraded for phone-primary use.

Backend — server owns the session, clients attach (Viktor's tmux idea):
- session.py: SessionManager + Session with an event log, subscriber pub/sub, and turns that run DETACHED (keep going if the client disconnects).
- GET /api/session/{id}/stream = attach (SSE): replays the transcript then tails live; per-event id: lines so an EventSource auto-reconnect resumes from Last-Event-ID (free re-attach). POST /{id}/prompt starts a detached turn; POST /{id}/cancel = Stop. Replaces the old one-shot /api/chat.
- agent_session trimmed to the argv + translate_event helpers; 21 new/updated tests (replay, Last-Event-ID resume, broadcast, detached turn, resume, cancel, routes) — 53 green.

Frontend — mobile-first via the frontend-design skill (emergency-console aesthetic):
- EventSource attach (native auto-reconnect, zero client reconnect logic); transcript.js folds events->messages with id-dedupe so replays never double-render (30 unit assertions).
- Installable PWA: manifest + icons (wrench/break-glass mark) + apple-mobile-web-app meta + theme-color; viewport-fit=cover + safe-area; 100dvh; 16px composer (no iOS zoom).
- One-tap diagnosis presets (Triage / Memory-OOM / Disk / Services / QEMU-wedged) mapped to the devvm's real failure modes; Stop button while a turn runs.
- Foldable VM-control sheet, cycle the dominant recovery action w/ confirm, output capped 46vh.
- a11y: fixed --ink-faint contrast 3.6:1 -> 6.1:1 (WCAG AA); >=44px tap targets. Deleted the obsolete fetch-reader sse.js (EventSource replaces it).

Verified: 53 backend tests + 30 transcript assertions; Playwright @390x844 (input on-screen y=721-821, presets/sheet/fold/cap); local integration smoke vs the real backend (attach->caught-up, 404, verbs, PWA served).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2026-06-14 19:19:03 +00:00

1 line
24 KiB
CSS

:root{--bg-0:#06080b;--bg-1:#0b0f14;--bg-2:#10161d;--bg-3:#161e27;--bg-term:#05070a;--line:#1c2530;--line-strong:#2a3744;--line-bright:#3a4a5a;--ink:#e9eff5;--ink-dim:#9bb0c0;--ink-faint:#8499ab;--cyan:#3dd1d6;--cyan-bright:#62e3e7;--cyan-dim:#1f6f72;--cyan-deep:#0e3133;--amber:#f5b657;--amber-dim:#6a5226;--green:#5ddb8e;--green-dim:#1f5f3d;--danger:#ff4d4d;--danger-bright:#ff6363;--danger-deep:#7a1717;--danger-glow:#ff4d4d59;--radius:11px;--radius-sm:8px;--radius-lg:16px;--mono:"Berkeley Mono", ui-monospace, "JetBrains Mono", "SF Mono", "Cascadia Code", "Fira Code", "Source Code Pro", Menlo, Consolas, "Liberation Mono", monospace;--sans:ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--shadow-panel:0 1px 0 #ffffff06 inset, 0 18px 44px -26px #000000f2;--shadow-sheet:0 -22px 48px -12px #000000b3;--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);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body{overscroll-behavior:none;height:100%;margin:0;overflow:hidden}body{background-color:var(--bg-0);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;background-image:radial-gradient(120% 78% at 86% -12%,#3dd1d614,#0000 55%),radial-gradient(90% 70% at 8% 112%,#f5b6570b,#0000 52%),repeating-linear-gradient(0deg,#ffffff03 0 1px,#0000 1px 3px);background-attachment:fixed}#app{height:100dvh}button{font-family:var(--mono);cursor:pointer}button:disabled{cursor:not-allowed}::selection{background:#3dd1d647}*{scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:var(--line-strong);background-clip:content-box;border:2px solid #0000;border-radius:99px}::-webkit-scrollbar-thumb:hover{background:var(--line-bright);background-clip:content-box}@keyframes rise-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.rise-in{animation:.5s cubic-bezier(.22,.61,.36,1) both rise-in;animation-delay:var(--d,0s)}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}}.chip.svelte-2zgsrv{background:var(--bg-3);border:1px solid var(--line-strong);border-left:2px solid var(--cyan-dim);max-width:100%;font-family:var(--mono);vertical-align:baseline;border-radius:6px;align-items:baseline;gap:6px;margin:3px 4px 3px 0;padding:3px 9px;font-size:12px;line-height:1.45;display:inline-flex}.cog.svelte-2zgsrv{color:var(--cyan);font-size:11px;transform:translateY(1px)}.name.svelte-2zgsrv{color:var(--ink);font-weight:600}.sep.svelte-2zgsrv{color:var(--ink-faint)}.cmd.svelte-2zgsrv{color:var(--amber);font-family:var(--mono);text-overflow:ellipsis;white-space:nowrap;max-width:100%;overflow:hidden}.chat.svelte-1bi93vx{background:var(--bg-1);border:1px solid var(--line);border-radius:var(--radius);height:100%;min-height:0;box-shadow:var(--shadow-panel);flex-direction:column;display:flex;overflow:hidden}.chat-head.svelte-1bi93vx{border-bottom:1px solid var(--line);background:linear-gradient(#ffffff05,#0000);flex:none;align-items:baseline;gap:12px;padding:12px 18px;display:flex}.chat-head-label.svelte-1bi93vx{font-family:var(--mono);text-transform:uppercase;letter-spacing:.2em;color:var(--cyan);font-size:11px}.chat-head-hint.svelte-1bi93vx{color:var(--ink-faint);white-space:nowrap;text-overflow:ellipsis;font-size:12px;overflow:hidden}.stream.svelte-1bi93vx{scroll-behavior:smooth;flex-direction:column;flex:1;gap:14px;min-height:0;padding:20px 16px 10px;display:flex;overflow-y:auto}.empty.svelte-1bi93vx{text-align:center;max-width:470px;color:var(--ink-dim);margin:auto;padding:24px 14px}.empty.dim.svelte-1bi93vx{opacity:.8}.empty-mark.svelte-1bi93vx{color:var(--cyan-dim);text-shadow:0 0 26px #3dd1d64d;margin-bottom:14px;font-size:42px;line-height:1;animation:3.6s ease-in-out infinite svelte-1bi93vx-lamp-breathe}@keyframes svelte-1bi93vx-lamp-breathe{0%,to{opacity:.7}50%{opacity:1}}.empty-title.svelte-1bi93vx{font-family:var(--mono);color:var(--ink);letter-spacing:.01em;margin:0 0 8px;font-size:15px}.empty-sub.svelte-1bi93vx{color:var(--ink-faint);margin:0;font-size:13px;line-height:1.6}.empty-sub.svelte-1bi93vx strong:where(.svelte-1bi93vx){color:var(--ink-dim);font-weight:600}.row.svelte-1bi93vx{display:flex}.row--user.svelte-1bi93vx{justify-content:flex-end}.row--assistant.svelte-1bi93vx{justify-content:flex-start}.bubble.svelte-1bi93vx{word-wrap:break-word;overflow-wrap:anywhere;border-radius:13px;max-width:88%;padding:11px 14px;font-size:14px;line-height:1.62}.bubble--user.svelte-1bi93vx{border:1px solid var(--cyan-dim);color:#d8f6f7;white-space:pre-wrap;font-family:var(--sans);background:linear-gradient(#123036,#0d2329);border-bottom-right-radius:4px}.bubble--assistant.svelte-1bi93vx{background:var(--bg-2);border:1px solid var(--line-strong);color:var(--ink);border-bottom-left-radius:4px}.prose.svelte-1bi93vx{white-space:pre-wrap}.thinking.svelte-1bi93vx,.working-dots.svelte-1bi93vx{align-items:center;gap:4px;display:inline-flex}.thinking.svelte-1bi93vx span:where(.svelte-1bi93vx),.working-dots.svelte-1bi93vx span:where(.svelte-1bi93vx){background:var(--amber);opacity:.4;border-radius:50%;width:6px;height:6px;animation:1.2s ease-in-out infinite svelte-1bi93vx-blink}.thinking.svelte-1bi93vx span:where(.svelte-1bi93vx):nth-child(2),.working-dots.svelte-1bi93vx span:where(.svelte-1bi93vx):nth-child(2){animation-delay:.18s}.thinking.svelte-1bi93vx span:where(.svelte-1bi93vx):nth-child(3),.working-dots.svelte-1bi93vx span:where(.svelte-1bi93vx):nth-child(3){animation-delay:.36s}@keyframes svelte-1bi93vx-blink{0%,80%,to{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-2px)}}.turn-note.svelte-1bi93vx{border-radius:var(--radius-sm);font-family:var(--mono);white-space:pre-wrap;overflow-wrap:anywhere;flex-wrap:wrap;align-items:baseline;gap:8px;margin-top:10px;padding:7px 10px;font-size:12px;line-height:1.5;display:flex}.turn-note--ok.svelte-1bi93vx{border:1px solid var(--green-dim);color:#bff5d3;background:#5ddb8e12}.turn-note--error.svelte-1bi93vx{border:1px solid var(--amber-dim);color:#f7d49a;background:#f5b6570f}.turn-note--muted.svelte-1bi93vx{border:1px solid var(--line-strong);color:var(--ink-faint);background:#ffffff05}.turn-note-tag.svelte-1bi93vx{text-transform:uppercase;letter-spacing:.14em;opacity:.85;border:1px solid;border-radius:4px;padding:1px 6px;font-size:10px}.turn-note-body.svelte-1bi93vx{flex:1;min-width:0}.turn-note-time.svelte-1bi93vx{color:var(--ink-faint);margin-left:auto}.dock.svelte-1bi93vx{border-top:1px solid var(--line);background:linear-gradient(#0000,#ffffff04);flex:none}.presets.svelte-1bi93vx{scrollbar-width:none;-webkit-overflow-scrolling:touch;gap:8px;padding:11px 12px 4px;display:flex;overflow-x:auto;-webkit-mask-image:linear-gradient(90deg,#0000 0,#000 14px calc(100% - 18px),#0000 100%);mask-image:linear-gradient(90deg,#0000 0,#000 14px calc(100% - 18px),#0000 100%)}.presets.svelte-1bi93vx::-webkit-scrollbar{display:none}.preset.svelte-1bi93vx{border:1px solid var(--line-strong);background:var(--bg-2);min-height:38px;color:var(--ink-dim);font-family:var(--mono);letter-spacing:.02em;white-space:nowrap;border-radius:999px;flex:none;align-items:center;gap:7px;padding:0 13px;font-size:12.5px;transition:border-color .15s,color .15s,background .15s,transform 60ms;display:inline-flex}.preset.svelte-1bi93vx:hover:not(:disabled){border-color:var(--cyan-dim);color:var(--ink);background:var(--bg-3)}.preset.svelte-1bi93vx:active:not(:disabled){transform:translateY(1px)}.preset.svelte-1bi93vx:disabled{opacity:.4}.preset-icon.svelte-1bi93vx{color:var(--cyan);font-size:12px}.composer.svelte-1bi93vx{padding:8px 12px calc(12px + var(--safe-bottom))}.working-bar.svelte-1bi93vx{font-family:var(--mono);color:var(--amber);letter-spacing:.02em;align-items:center;gap:10px;padding:2px 4px 9px;font-size:12px;display:flex}.composer-row.svelte-1bi93vx{align-items:flex-end;gap:10px;display:flex}textarea.svelte-1bi93vx{resize:none;background:var(--bg-2);min-height:48px;max-height:160px;color:var(--ink);border:1px solid var(--line-strong);border-radius:var(--radius-sm);font-family:var(--sans);field-sizing:content;outline:none;flex:1;padding:13px;font-size:16px;line-height:1.5;transition:border-color .15s,box-shadow .15s}textarea.svelte-1bi93vx::placeholder{color:var(--ink-faint)}textarea.svelte-1bi93vx:focus{border-color:var(--cyan-dim);box-shadow:0 0 0 3px #3dd1d61f}textarea.svelte-1bi93vx:disabled{opacity:.55}.send.svelte-1bi93vx,.stop.svelte-1bi93vx{border-radius:var(--radius-sm);letter-spacing:.05em;flex:none;align-self:stretch;min-width:82px;min-height:48px;padding:0 18px;font-size:13px;font-weight:600;transition:filter .15s,border-color .15s,opacity .15s,background .15s}.send.svelte-1bi93vx{border:1px solid var(--cyan-dim);color:#d8f6f7;background:linear-gradient(#16464a,#0e3438)}.send.svelte-1bi93vx:hover:not(:disabled){filter:brightness(1.24);border-color:var(--cyan)}.send.svelte-1bi93vx:disabled{opacity:.4;background:var(--bg-2);border-color:var(--line-strong);color:var(--ink-faint)}.stop.svelte-1bi93vx{border:1px solid var(--line-bright);background:var(--bg-3);color:var(--ink);justify-content:center;align-items:center;gap:8px;display:inline-flex}.stop.svelte-1bi93vx:hover{border-color:var(--ink-faint);filter:brightness(1.1)}.stop-glyph.svelte-1bi93vx{background:var(--amber);border-radius:2px;width:10px;height:10px;animation:1s ease-in-out infinite svelte-1bi93vx-lamp-pulse;box-shadow:0 0 8px #f5b6578c}@keyframes svelte-1bi93vx-lamp-pulse{0%,to{opacity:.8;transform:scale(.85)}50%{opacity:1;transform:scale(1.08)}}.panel.svelte-1qihpg4{background:var(--bg-1);border:1px solid var(--line);border-top:2px solid var(--danger-deep);border-radius:var(--radius);height:100%;min-height:0;box-shadow:var(--shadow-panel);flex-direction:column;display:flex;overflow-y:auto}.panel-head.svelte-1qihpg4{border-bottom:1px solid var(--line);padding:14px 16px 12px}.panel-head-row.svelte-1qihpg4{align-items:center;gap:9px;display:flex}.hazard.svelte-1qihpg4{color:var(--danger);filter:drop-shadow(0 0 8px var(--danger-glow));font-size:15px}h2.svelte-1qihpg4{font-family:var(--mono);text-transform:uppercase;letter-spacing:.12em;color:var(--ink);margin:0;font-size:13px}.panel-sub.svelte-1qihpg4{color:var(--ink-faint);margin:9px 0 0;font-size:11.5px;line-height:1.55}.loading.svelte-1qihpg4{font-family:var(--mono);color:var(--ink-faint);padding:22px 16px;font-size:12px}.group.svelte-1qihpg4{border-bottom:1px solid var(--line);padding:14px 16px}.group-label.svelte-1qihpg4{font-family:var(--mono);text-transform:uppercase;letter-spacing:.18em;color:var(--ink-faint);align-items:center;gap:8px;margin-bottom:11px;font-size:10.5px;display:flex}.group-label--danger.svelte-1qihpg4{color:var(--danger-bright)}.group-tag.svelte-1qihpg4{letter-spacing:.1em;border:1px solid var(--line-strong);color:var(--ink-faint);border-radius:4px;padding:2px 6px;font-size:9.5px}.group-tag--danger.svelte-1qihpg4{border-color:var(--danger-deep);color:var(--danger-bright);background:#ff4d4d0f}.btn-row.svelte-1qihpg4{flex-wrap:wrap;gap:9px;display:flex}.vbtn.svelte-1qihpg4{border-radius:var(--radius-sm);letter-spacing:.05em;text-transform:lowercase;justify-content:center;align-items:center;gap:8px;min-height:44px;padding:10px 16px;font-size:13px;font-weight:600;transition:filter .14s,border-color .14s,background .14s,transform 60ms;display:inline-flex}.vbtn.svelte-1qihpg4:active:not(:disabled){transform:translateY(1px)}.vbtn.svelte-1qihpg4:disabled{opacity:.4}.vbtn-label.svelte-1qihpg4{line-height:1}.vbtn--safe.svelte-1qihpg4{background:var(--bg-2);color:var(--ink);border:1px solid var(--line-strong)}.vbtn--safe.svelte-1qihpg4:hover:not(:disabled){border-color:var(--cyan-dim);background:var(--bg-3)}.danger-list.svelte-1qihpg4{flex-direction:column;gap:12px;display:flex}.danger-item.svelte-1qihpg4{border-radius:var(--radius-sm);border:1px solid #0000}.danger-item--headline.svelte-1qihpg4{border-color:var(--danger-deep);background:#ff4d4d0b;padding:11px}.vbtn--danger.svelte-1qihpg4{width:100%;color:var(--danger-bright);border:1px solid var(--danger-deep);border-left:3px solid var(--danger);text-shadow:0 0 12px var(--danger-glow);background:linear-gradient(#ff4d4d29,#ff4d4d12)}.vbtn--danger.svelte-1qihpg4:hover:not(:disabled){background:linear-gradient(180deg, var(--danger), var(--danger-bright));color:#1a0606;border-color:var(--danger-bright);text-shadow:none;filter:drop-shadow(0 4px 14px var(--danger-glow))}.vbtn--headline.svelte-1qihpg4{padding:12px 15px;font-size:14px}.headline-badge.svelte-1qihpg4{text-transform:uppercase;letter-spacing:.14em;background:var(--danger);color:#1a0606;border-radius:999px;padding:2px 7px;font-size:9px;font-weight:700}.danger-blurb.svelte-1qihpg4{color:var(--ink-faint);margin:7px 2px 0;font-size:11.5px;line-height:1.5}.danger-item--headline.svelte-1qihpg4 .danger-blurb:where(.svelte-1qihpg4){color:#f0b0b0}.confirm.svelte-1qihpg4{border:1px solid var(--danger);border-radius:var(--radius-sm);background:#ff4d4d1a;margin-top:10px;padding:11px 12px;animation:.16s ease-out svelte-1qihpg4-confirm-in}@keyframes svelte-1qihpg4-confirm-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.confirm-text.svelte-1qihpg4{color:#ffe0e0;margin-bottom:10px;font-size:12.5px;line-height:1.5;display:block}.confirm-text.svelte-1qihpg4 strong:where(.svelte-1qihpg4){color:#fff;font-family:var(--mono);text-transform:uppercase;letter-spacing:.04em}.confirm-actions.svelte-1qihpg4{gap:9px;display:flex}.confirm-yes.svelte-1qihpg4{border-radius:var(--radius-sm);border:1px solid var(--danger-bright);background:var(--danger);color:#1a0606;letter-spacing:.06em;text-transform:uppercase;flex:1;min-height:44px;padding:10px;font-size:13px;font-weight:700;transition:filter .14s}.confirm-yes.svelte-1qihpg4:hover:not(:disabled){filter:brightness(1.12)}.confirm-no.svelte-1qihpg4{border-radius:var(--radius-sm);border:1px solid var(--line-strong);background:var(--bg-2);min-height:44px;color:var(--ink-dim);letter-spacing:.04em;text-transform:uppercase;flex:1;padding:10px;font-size:13px;transition:border-color .14s,color .14s}.confirm-no.svelte-1qihpg4:hover:not(:disabled){border-color:var(--ink-faint);color:var(--ink)}.confirm-yes.svelte-1qihpg4:disabled,.confirm-no.svelte-1qihpg4:disabled{opacity:.5}.spin.svelte-1qihpg4{border:2px solid #e6edf340;border-top-color:var(--cyan);border-radius:50%;flex:none;width:13px;height:13px;animation:.7s linear infinite svelte-1qihpg4-spin}.spin--danger.svelte-1qihpg4{border-color:#ff4d4d4d;border-top-color:var(--danger-bright)}@keyframes svelte-1qihpg4-spin{to{transform:rotate(360deg)}}.out.svelte-1qihpg4{border-radius:var(--radius-sm);border:1px solid var(--line-strong);background:var(--bg-term);margin:14px 16px 16px;overflow:hidden}.out--ok.svelte-1qihpg4{border-color:var(--green-dim)}.out--fail.svelte-1qihpg4{border-color:var(--danger-deep)}.out-head.svelte-1qihpg4{border-bottom:1px solid var(--line);background:#ffffff05;justify-content:space-between;align-items:center;padding:8px 11px;display:flex}.out-verb.svelte-1qihpg4{font-family:var(--mono);color:var(--ink);letter-spacing:.04em;font-size:12px}.out-verb.svelte-1qihpg4:before{content:"$ pve ";color:var(--ink-faint)}.out-status.svelte-1qihpg4{font-family:var(--mono);text-transform:uppercase;letter-spacing:.1em;border:1px solid;border-radius:4px;padding:2px 7px;font-size:10.5px}.out-status--ok.svelte-1qihpg4{color:var(--green)}.out-status--fail.svelte-1qihpg4{color:var(--danger-bright)}.out-pre.svelte-1qihpg4{font-family:var(--mono);color:#c7d6e2;white-space:pre-wrap;overflow-wrap:anywhere;max-height:320px;margin:0;padding:11px 12px;font-size:12px;line-height:1.55;overflow-y:auto}.out-stderr-label.svelte-1qihpg4{font-family:var(--mono);text-transform:uppercase;letter-spacing:.16em;color:var(--danger-bright);padding:6px 12px 0;font-size:10px}.out-pre--stderr.svelte-1qihpg4{color:#f3b6b6}.out-pre--empty.svelte-1qihpg4{color:var(--ink-faint);font-style:italic}.block-error.svelte-1qihpg4{border:1px solid var(--danger-deep);border-left:3px solid var(--danger);border-radius:var(--radius-sm);color:#ffd5d5;background:#ff4d4d12;margin:14px 16px;padding:11px 13px;font-size:12.5px;line-height:1.5}.retry.svelte-1qihpg4{border:1px solid var(--danger-deep);color:var(--danger-bright);background:0 0;border-radius:5px;margin-left:8px;padding:3px 9px;font-size:11px}.retry.svelte-1qihpg4:hover{background:#ff4d4d1f}details.group.svelte-1qihpg4>summary:where(.svelte-1qihpg4),details.out.svelte-1qihpg4>summary:where(.svelte-1qihpg4){cursor:pointer;-webkit-user-select:none;user-select:none;list-style:none}details.group.svelte-1qihpg4>summary:where(.svelte-1qihpg4)::-webkit-details-marker{display:none}details.out.svelte-1qihpg4>summary:where(.svelte-1qihpg4)::-webkit-details-marker{display:none}details.group.svelte-1qihpg4>summary:where(.svelte-1qihpg4):before,details.out.svelte-1qihpg4>summary:where(.svelte-1qihpg4):before{content:"▾";width:11px;color:var(--ink-faint);margin-right:4px;font-size:9px;transition:transform .15s;display:inline-block}details.group.svelte-1qihpg4:not([open])>summary:where(.svelte-1qihpg4):before,details.out.svelte-1qihpg4:not([open])>summary:where(.svelte-1qihpg4):before{transform:rotate(-90deg)}details.group.svelte-1qihpg4>summary:where(.svelte-1qihpg4){padding:3px 0}.out-head.svelte-1qihpg4 .out-status:where(.svelte-1qihpg4){margin-left:auto}.out-pre.svelte-1qihpg4{max-height:46vh;overflow:auto}.shell.svelte-1n46o8q{max-width:1520px;height:100%;padding-left:var(--safe-left);padding-right:var(--safe-right);flex-direction:column;margin:0 auto;display:flex}.rail.svelte-1n46o8q{padding:max(10px, var(--safe-top)) 14px 10px;border-bottom:1px solid var(--line);background:linear-gradient(#3dd1d608,#0000 60%),linear-gradient(#ffffff04,#0000);flex:none;justify-content:space-between;align-items:center;gap:10px;display:flex}.rail-title.svelte-1n46o8q{align-items:center;gap:10px;min-width:0;display:flex}.brand-mark.svelte-1n46o8q{color:var(--cyan);filter:drop-shadow(0 0 10px #3dd1d659);flex:none;display:inline-flex}.brand-mark.svelte-1n46o8q .frac:where(.svelte-1n46o8q){color:var(--amber);stroke:var(--amber);opacity:.85}h1.svelte-1n46o8q{font-family:var(--mono);letter-spacing:.04em;color:var(--ink);white-space:nowrap;margin:0;font-size:16px;font-weight:600}.accent.svelte-1n46o8q{color:var(--cyan);text-shadow:0 0 18px #3dd1d666}.rail-right.svelte-1n46o8q{flex:none;align-items:center;gap:8px;display:flex}.lamp-wrap.svelte-1n46o8q{font-family:var(--mono);align-items:center;gap:8px;padding:0 4px;font-size:12px;display:inline-flex}.lamp.svelte-1n46o8q{background:var(--ink-faint);border-radius:50%;flex:none;width:10px;height:10px;position:relative}.lamp.svelte-1n46o8q:after{content:"";opacity:0;border:1px solid;border-radius:50%;position:absolute;inset:-4px}.lamp--live.svelte-1n46o8q{background:var(--cyan);color:var(--cyan);animation:3.6s ease-in-out infinite svelte-1n46o8q-lamp-breathe;box-shadow:0 0 10px 1px #3dd1d6a6}.lamp--live.svelte-1n46o8q:after{animation:3.6s ease-out infinite svelte-1n46o8q-lamp-ring}.lamp--connecting.svelte-1n46o8q{background:var(--cyan-dim);color:var(--cyan);animation:1.4s ease-in-out infinite svelte-1n46o8q-lamp-blink}.lamp--working.svelte-1n46o8q{background:var(--amber);color:var(--amber);animation:1s ease-in-out infinite svelte-1n46o8q-lamp-pulse;box-shadow:0 0 10px 1px #f5b657b3}.lamp--working.svelte-1n46o8q:after{animation:1s ease-out infinite svelte-1n46o8q-lamp-ring}.lamp--error.svelte-1n46o8q{background:var(--danger);color:var(--danger);box-shadow:0 0 10px 1px var(--danger-glow);animation:1.2s ease-in-out infinite svelte-1n46o8q-lamp-pulse}@keyframes svelte-1n46o8q-lamp-breathe{0%,to{opacity:.6}50%{opacity:1}}@keyframes svelte-1n46o8q-lamp-blink{0%,to{opacity:.35}50%{opacity:.9}}@keyframes svelte-1n46o8q-lamp-pulse{0%,to{opacity:.75;transform:scale(.82)}50%{opacity:1;transform:scale(1.12)}}@keyframes svelte-1n46o8q-lamp-ring{0%{opacity:.5;transform:scale(.6)}70%{opacity:0;transform:scale(1.8)}to{opacity:0;transform:scale(1.8)}}.lamp-text.svelte-1n46o8q{letter-spacing:.04em;color:var(--ink-dim);text-overflow:ellipsis;white-space:nowrap;max-width:88px;overflow:hidden}.lamp-text--live.svelte-1n46o8q .sid:where(.svelte-1n46o8q){color:var(--cyan);letter-spacing:.06em}.lamp-text--working.svelte-1n46o8q{color:var(--amber)}.lamp-text--error.svelte-1n46o8q{color:var(--danger-bright)}.lamp-text--connecting.svelte-1n46o8q{color:var(--ink-faint)}.sid.svelte-1n46o8q{font-family:var(--mono)}@media (width<=439px){.lamp-text.svelte-1n46o8q{display:none}.lamp-wrap.svelte-1n46o8q{padding:0}}.rail-btn.svelte-1n46o8q{border-radius:var(--radius-sm);border:1px solid var(--line-strong);background:var(--bg-2);min-height:44px;color:var(--ink-dim);letter-spacing:.03em;align-items:center;gap:6px;padding:0 14px;font-size:13px;transition:border-color .15s,background .15s,color .15s;display:inline-flex}.rail-btn.svelte-1n46o8q:hover:not(:disabled){border-color:var(--line-bright);color:var(--ink)}.rail-btn.svelte-1n46o8q:active:not(:disabled){background:var(--bg-3)}.rail-btn.svelte-1n46o8q:disabled{opacity:.42}.rail-btn--vm.svelte-1n46o8q{border-color:var(--amber-dim);color:var(--amber)}.rail-btn--vm.svelte-1n46o8q:hover:not(:disabled){border-color:var(--amber);color:var(--amber)}.bolt.svelte-1n46o8q{font-size:13px;line-height:1}.rail-note.svelte-1n46o8q{border:1px solid var(--danger-deep);color:#ffd9d9;border-radius:var(--radius-sm);background:#ff4d4d12;border-left-width:3px;flex-wrap:wrap;flex:none;align-items:center;gap:6px 12px;margin:10px 12px 0;padding:10px 13px;font-size:13px;line-height:1.5;display:flex}.rail-note-aside.svelte-1n46o8q{color:#f0b8b8}.rail-note-aside.svelte-1n46o8q strong:where(.svelte-1n46o8q){color:#fff;font-family:var(--mono)}.rail-note-retry.svelte-1n46o8q{border:1px solid var(--danger-deep);color:var(--danger-bright);background:0 0;border-radius:6px;min-height:36px;margin-left:auto;padding:6px 12px;font-size:12px}.rail-note-retry.svelte-1n46o8q:hover{background:#ff4d4d1f}.toast.svelte-1n46o8q{border:1px solid var(--line-strong);border-left:3px solid var(--amber);background:var(--bg-2);color:var(--amber);border-radius:var(--radius-sm);font-family:var(--mono);flex:none;margin:10px 12px 0;padding:9px 13px;font-size:12.5px;line-height:1.45;animation:.28s ease-out both rise-in}.stage.svelte-1n46o8q{flex:1;min-width:0;min-height:0;padding:10px;display:flex}.chat-pane.svelte-1n46o8q{flex:1;min-width:0;min-height:0;display:flex}.controls-pane.svelte-1n46o8q{z-index:40;background:var(--bg-1);border-top:1px solid var(--line-strong);border-radius:var(--radius-lg) var(--radius-lg) 0 0;max-height:88dvh;box-shadow:var(--shadow-sheet);padding:8px 14px calc(14px + var(--safe-bottom));flex-direction:column;transition:transform .3s cubic-bezier(.32,.72,0,1);display:flex;position:fixed;bottom:0;left:0;right:0;transform:translateY(102%);animation:none!important}.controls-pane.open.svelte-1n46o8q{transform:translateY(0)}.sheet-grip.svelte-1n46o8q{background:var(--line-bright);border-radius:99px;flex:none;width:40px;height:4px;margin:4px auto 10px}.controls-head.svelte-1n46o8q{flex:none;justify-content:space-between;align-items:center;margin-bottom:10px;display:flex}.controls-head-title.svelte-1n46o8q{font-family:var(--mono);text-transform:uppercase;letter-spacing:.2em;color:var(--amber);font-size:11px}.sheet-close.svelte-1n46o8q{border-radius:var(--radius-sm);border:1px solid var(--line-strong);background:var(--bg-2);width:40px;height:40px;color:var(--ink-dim);font-size:14px}.sheet-close.svelte-1n46o8q:active{background:var(--bg-3)}.sheet-backdrop.svelte-1n46o8q{z-index:30;-webkit-backdrop-filter:blur(1.5px);backdrop-filter:blur(1.5px);opacity:0;pointer-events:none;background:#0204079e;border:0;padding:0;transition:opacity .24s;position:fixed;inset:0}.sheet-backdrop.show.svelte-1n46o8q{opacity:1;pointer-events:auto}@media (width>=900px){.rail.svelte-1n46o8q{padding:14px 18px}h1.svelte-1n46o8q{font-size:19px}.stage.svelte-1n46o8q{grid-template-columns:minmax(0,1fr) 384px;gap:16px;padding:16px 18px 18px;display:grid}.chat-pane.svelte-1n46o8q{display:flex}.rail-btn--vm.svelte-1n46o8q{display:none}.controls-pane.svelte-1n46o8q{max-height:none;box-shadow:none;z-index:auto;border:none;border-radius:0;padding:0;position:static;transform:none;animation:.5s cubic-bezier(.22,.61,.36,1) both rise-in!important;animation-delay:var(--d,0s)!important}.sheet-grip.svelte-1n46o8q,.controls-head.svelte-1n46o8q,.sheet-backdrop.svelte-1n46o8q{display:none}}