agent-afk 5.207.2 → 5.208.1

package/dist/web-ui-assets/styles.css

@@ -1,680 +0,0 @@
-/*
- * Brand tokens hand-ported from website/app/globals.css. The docs site is a
- * separate Next.js package, so these are copied deliberately rather than
- * imported — keep the hexes in sync when the brand moves.
- */
-:root {
-  --bg: #07070b;
-  --bg-raised: #0e0e14;
-  --bg-sunken: #050508;
-  --border: #1e1e28;
-  --text: #e8e8ef;
-  --text-dim: #9a9aab;
-  --text-faint: #6a6a7b;
-  --accent: #f9854b;
-  --success: #4ade80;
-  --error: #f87171;
-  --warning: #fbbf24;
-  --purple: #a78bfa;
-  --cyan: #67e8f9;
-  --mint: #86efac;
-  --lavender: #c4b5fd;
-  --radius: 8px;
-  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
-  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
-}
-
-* { box-sizing: border-box; }
-/* Invariant: the hidden attribute must always win over CSS display rules.
-   Elements like .transcript and .composer have explicit display values that
-   override the UA [hidden] { display: none } in some browsers. */
-[hidden] { display: none !important; }
-:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
-#prompt:focus-visible, .approval-input:focus-visible { outline: none; }
-
-html, body {
-  margin: 0;
-  height: 100%;
-  background: var(--bg);
-  color: var(--text);
-  font-family: var(--sans);
-  font-size: 14px;
-  -webkit-font-smoothing: antialiased;
-}
-
-/* ── top bar ─────────────────────────────────────────────────────────────── */
-.topbar {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  height: 48px;
-  padding: 0 16px;
-  border-bottom: 1px solid var(--border);
-  background: var(--bg-raised);
-  position: sticky;
-  top: 0;
-  /* z-ladder: content=0, backdrop=8, sidebar=9, topbar=10, approvals=15, slash-menu=20, at-popover=25, modal=50 */
-  z-index: 10;
-}
-.brand { display: flex; align-items: center; gap: 8px; font-weight: 600; }
-.brand-mark {
-  width: 10px; height: 10px; border-radius: 50%;
-  background: var(--accent);
-  box-shadow: 0 0 12px var(--accent);
-}
-.brand-name { letter-spacing: 0.04em; }
-.meter { margin-left: auto; color: var(--text-dim); font-family: var(--mono); font-size: 12px; }
-.status {
-  font-family: var(--mono); font-size: 11px; text-transform: uppercase;
-  letter-spacing: 0.06em; color: var(--text-faint);
-  padding: 3px 8px; border: 1px solid var(--border); border-radius: 999px;
-}
-.status-open { color: var(--success); border-color: color-mix(in srgb, var(--success) 40%, transparent); }
-.status-reconnecting, .status-connecting { color: var(--warning); border-color: color-mix(in srgb, var(--warning) 40%, transparent); }
-.status-closed { color: var(--text-faint); }
-.menu-toggle {
-  display: none; background: none; border: 1px solid var(--border);
-  color: var(--text); border-radius: var(--radius); padding: 4px 10px; cursor: pointer;
-}
-
-/* ── layout ──────────────────────────────────────────────────────────────── */
-.layout { display: flex; height: calc(100% - 48px); }
-.sidebar {
-  width: 280px; flex: 0 0 280px; border-right: 1px solid var(--border);
-  background: var(--bg-sunken); overflow-y: auto;
-}
-.sidebar-head {
-  padding: 12px 16px 8px; font-size: 11px; text-transform: uppercase;
-  letter-spacing: 0.08em; color: var(--text-dim);
-  display: flex; align-items: center; justify-content: space-between; gap: 8px;
-}
-.new-session {
-  font: inherit; letter-spacing: inherit; text-transform: inherit;
-  color: var(--accent); background: transparent;
-  border: 1px solid var(--border); border-radius: 6px;
-  padding: 3px 9px; cursor: pointer; white-space: nowrap;
-}
-.new-session:hover:not(:disabled) { border-color: var(--accent); background: var(--bg-raised); }
-.new-session:disabled { opacity: 0.5; cursor: default; }
-.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
-
-/* ── sessions ────────────────────────────────────────────────────────────── */
-.session-row {
-  display: flex; flex-direction: column; gap: 5px; width: 100%;
-  padding: 10px 16px; background: none; border: none; border-left: 2px solid transparent;
-  color: var(--text); text-align: left; cursor: pointer; font: inherit;
-}
-.session-row:hover { background: var(--bg-raised); }
-.session-row.is-active { background: var(--bg-raised); border-left-color: var(--accent); }
-.session-title {
-  font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
-}
-.session-meta { display: flex; align-items: center; gap: 6px; }
-.badge {
-  font-size: 10px; padding: 1px 6px; border-radius: 999px;
-  font-family: var(--mono); letter-spacing: 0.03em;
-}
-.badge-live { color: var(--success); background: color-mix(in srgb, var(--success) 14%, transparent); }
-.badge-readonly { color: var(--text-faint); background: color-mix(in srgb, var(--text-faint) 14%, transparent); }
-.badge-alive { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
-.session-time { font-size: 10px; color: var(--text-faint); margin-left: auto; }
-.session-cwd {
-  font-family: var(--mono); font-size: 10px; color: var(--text-dim);
-  background: var(--bg-sunken); border: 1px solid var(--border);
-  border-radius: 4px; padding: 1px 5px;
-  max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
-}
-.empty { padding: 16px; color: var(--text-faint); }
-
-/* ── transcript ──────────────────────────────────────────────────────────── */
-.transcript { flex: 1; overflow-y: auto; padding: 20px; scroll-behavior: smooth; display: flex; flex-direction: column; align-items: center; }
-.msg { margin-bottom: 18px; max-width: 900px; width: 100%; }
-.msg-role {
-  font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
-  color: var(--text-dim); margin-bottom: 5px;
-}
-.msg-body { white-space: pre-wrap; word-break: break-word; line-height: 1.6; }
-.msg-user .msg-body {
-  background: var(--bg-raised); border-left: 2px solid var(--accent);
-  padding: 10px 14px; border-radius: 0 var(--radius) var(--radius) 0;
-}
-.msg-thinking { opacity: 1; font-style: italic; }
-.msg-thinking summary { opacity: 0.65; cursor: pointer; }
-.msg-thinking[open] .msg-body { margin-top: 8px; padding: 8px 12px; border-left: 2px solid var(--border); font-size: 13px; }
-.msg-error .msg-body { color: var(--error); }
-
-/*
- * Markdown blocks (markdown-dom.ts).
- *
- * Invariant: `.md-body` must cancel the `pre-wrap` inherited from `.msg-body`.
- * That rule exists so UNPARSED text keeps its newlines; once the same text is
- * parsed into real block elements, preserving source newlines double-spaces
- * every paragraph and list. Whitespace is re-preserved only inside `pre`/`code`,
- * where it is semantic.
- */
-.md-body { white-space: normal; }
-.md > :first-child { margin-top: 0; }
-.md > :last-child { margin-bottom: 0; }
-.md-p { margin: 0 0 10px; }
-.md-heading {
-  margin: 18px 0 8px; line-height: 1.3; font-weight: 600;
-  color: var(--text); letter-spacing: -0.01em;
-}
-.md h1.md-heading { font-size: 19px; }
-.md h2.md-heading {
-  font-size: 16px; padding-bottom: 5px; border-bottom: 1px solid var(--border);
-}
-.md h3.md-heading { font-size: 14px; }
-.md h4.md-heading, .md h5.md-heading, .md h6.md-heading {
-  font-size: 13px; color: var(--text-dim);
-}
-.md-list { margin: 0 0 10px; padding-left: 22px; }
-.md-list li { margin: 3px 0; }
-.md-list .md-p { margin: 0; }
-.md-task { margin-right: 7px; vertical-align: middle; accent-color: var(--accent); }
-.md-code-inline {
-  font-family: var(--mono); font-size: 0.88em;
-  background: var(--bg-sunken); border: 1px solid var(--border);
-  border-radius: 4px; padding: 1px 5px; color: var(--accent);
-  white-space: pre-wrap; word-break: break-word;
-}
-.md-pre {
-  margin: 0 0 12px; padding: 11px 13px; overflow-x: auto;
-  background: var(--bg-sunken); border: 1px solid var(--border);
-  border-radius: var(--radius); white-space: pre;
-}
-.md-pre[data-lang]::before {
-  content: attr(data-lang); display: block; text-align: right;
-  font-family: var(--mono); font-size: 10px; color: var(--text-faint);
-  margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.06em;
-}
-.md-pre code {
-  font-family: var(--mono); font-size: 12px; line-height: 1.55;
-  color: var(--text); background: none; border: 0; padding: 0; white-space: pre;
-}
-.md-quote {
-  margin: 0 0 10px; padding: 4px 0 4px 14px;
-  border-left: 3px solid color-mix(in srgb, var(--accent) 45%, transparent);
-  color: var(--text-dim);
-  background: color-mix(in srgb, var(--accent) 4%, transparent);
-  border-radius: 0 4px 4px 0;
-}
-.md-hr { border: 0; border-top: 1px solid var(--border); margin: 16px 0; }
-.md-link { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
-.md-link:hover { text-decoration-thickness: 2px; }
-.md-image { color: var(--text-faint); font-style: italic; }
-.md-table {
-  border-collapse: collapse; margin: 0 0 12px; font-size: 12px; display: block;
-  overflow-x: auto; max-width: 100%;
-}
-.md-table th, .md-table td {
-  border: 1px solid var(--border); padding: 5px 9px; text-align: left;
-}
-.md-table th { background: var(--bg-raised); font-weight: 600; }
-.notice {
-  font-family: var(--mono); font-size: 11px; color: var(--text-faint);
-  padding: 5px 0; border-top: 1px dashed var(--border); margin: 14px 0;
-  max-width: 900px; width: 100%;
-}
-
-/* ── tool calls ──────────────────────────────────────────────────────────── */
-.tool {
-  border: 1px solid var(--border); border-radius: var(--radius);
-  margin-bottom: 10px; background: var(--bg-raised); overflow: hidden;
-  max-width: 900px; width: 100%;
-}
-.tool-summary {
-  display: flex; align-items: center; gap: 8px; padding: 8px 12px;
-  cursor: pointer; font-family: var(--mono); font-size: 12px; list-style: none;
-}
-.tool-summary::-webkit-details-marker { display: none; }
-.tool-summary::before {
-  content: '›';
-  display: inline-block;
-  font-size: 14px;
-  color: var(--text-faint);
-  transition: transform 0.15s ease;
-  margin-right: 4px;
-  flex: 0 0 auto;
-}
-details[open] > .tool-summary::before { transform: rotate(90deg); }
-.tool-dot { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 6px; }
-@keyframes afk-pulse {
-  0%, 100% { opacity: 1; }
-  50%       { opacity: 0.35; }
-}
-.tool-dot-running { background: var(--warning); animation: afk-pulse 1.4s ease-in-out infinite; }
-.tool-dot-ok { background: var(--success); }
-.tool-dot-error { background: var(--error); }
-.tool-name { color: var(--accent); }
-.tool-target { color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.tool-body { padding: 0 12px 12px; border-top: 1px solid var(--border); }
-.tool-label {
-  font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
-  color: var(--text-dim); margin: 10px 0 4px;
-}
-.tool-pre {
-  margin: 0; padding: 10px; background: var(--bg-sunken); border-radius: 6px;
-  font-family: var(--mono); font-size: 12px; line-height: 1.5;
-  overflow-x: auto; white-space: pre-wrap; word-break: break-word;
-  max-height: 420px; overflow-y: auto;
-}
-/* The "we genuinely do not have this" state — visually distinct from empty
-   output, because they mean different things. */
-.tool-unavailable {
-  margin-top: 10px; padding: 8px 10px; border-radius: 6px;
-  background: color-mix(in srgb, var(--warning) 8%, transparent);
-  border: 1px dashed color-mix(in srgb, var(--warning) 35%, transparent);
-  color: var(--warning); font-size: 12px; line-height: 1.5;
-}
-.tool-more {
-  margin-top: 8px; background: none; border: 1px solid var(--border);
-  color: var(--text-dim); border-radius: 6px; padding: 4px 10px;
-  cursor: pointer; font-family: var(--mono); font-size: 11px;
-}
-.tool-more:hover { color: var(--text); border-color: var(--accent); }
-.diff-add  { color: var(--success); background: color-mix(in srgb, var(--success) 8%, transparent); display: block; }
-.diff-del  { color: var(--error);   background: color-mix(in srgb, var(--error)   8%, transparent); display: block; }
-.diff-hunk { color: var(--accent);  opacity: 0.75; display: block; }
-.diff-ctx  { color: var(--text-dim); display: block; }
-
-/* ── composer ────────────────────────────────────────────────────────────── */
-.composer { border-top: 1px solid var(--border); background: var(--bg-raised); padding: 12px 20px; position: relative; }
-.composer.is-readonly { opacity: 0.6; }
-
-/* Slash-command menu. Anchored to the composer and floated ABOVE it so opening
-   it never reflows the transcript or shifts the textarea under the cursor. */
-.slash-menu {
-  position: absolute; bottom: 100%; left: 20px; right: 20px; z-index: 20;
-  max-height: 40vh; overflow-y: auto; margin-bottom: 6px;
-  background: var(--bg-raised); border: 1px solid var(--border);
-  border-radius: var(--radius); box-shadow: 0 8px 24px rgb(0 0 0 / 45%);
-}
-/* [hidden] handled by global rule — no per-element override needed. */
-.slash-status {
-  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
-  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
-}
-.slash-row {
-  display: flex; align-items: baseline; gap: 8px;
-  padding: 6px 12px; cursor: pointer; font-size: 13px;
-  border-left: 2px solid transparent;
-}
-.slash-row.is-selected { background: var(--bg-sunken); border-left-color: var(--accent); }
-.slash-name { font-family: var(--mono); color: var(--accent); white-space: nowrap; }
-.slash-row.is-selected .slash-name { font-weight: 600; }
-.slash-summary {
-  color: var(--text-dim); overflow: hidden;
-  text-overflow: ellipsis; white-space: nowrap;
-}
-.slash-badge {
-  font-size: 11px; color: var(--text-faint); border: 1px solid var(--border);
-  border-radius: 4px; padding: 0 5px; white-space: nowrap; flex: none;
-}
-.composer-row { display: flex; gap: 10px; align-items: flex-end; }
-.prompt-wrap { flex: 1; position: relative; display: flex; }
-
-/* Invariant: #prompt and .prompt-mirror paint the SAME string on top of each
-   other, so every metric that affects text layout must be declared once, here,
-   for both. Changing font, size, line-height, padding, or border width on one
-   alone makes the highlight ghost behind the caret. */
-#prompt, .prompt-mirror {
-  border: 1px solid var(--border); border-radius: var(--radius);
-  padding: 10px 12px; font-family: var(--sans); font-size: 14px; line-height: 1.5;
-  white-space: pre-wrap; overflow-wrap: break-word;
-}
-#prompt {
-  flex: 1; resize: vertical; background: transparent; position: relative; z-index: 1;
-}
-#prompt.slash-highlight-active {
-  /* Text is transparent so the mirror shows through; the caret is not. */
-  color: transparent; caret-color: var(--text);
-}
-#prompt::placeholder { color: var(--text-faint); }
-.prompt-mirror {
-  position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
-  background: var(--bg-sunken); color: var(--text); border-color: transparent;
-}
-.prompt-mirror .tok-known { color: var(--accent); }
-.prompt-mirror .tok-slash { color: var(--text-faint); }
-#prompt:focus { outline: none; border-color: var(--accent); }
-#prompt:disabled { cursor: not-allowed; }
-.send {
-  background: var(--accent); color: #1a0d05; border: none; border-radius: var(--radius);
-  padding: 10px 18px; font-weight: 600; cursor: pointer;
-  transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease, filter 0.15s ease;
-}
-.send:hover:not(:disabled) { filter: brightness(1.06); }
-.send:disabled { background: var(--border); color: var(--text-faint); cursor: not-allowed; }
-.queue { display: flex; flex-direction: column; gap: 5px; margin-bottom: 8px; }
-.queue-row {
-  display: flex; align-items: center; gap: 8px; padding: 5px 10px;
-  background: var(--bg-sunken); border: 1px dashed var(--border); border-radius: 6px;
-  font-size: 12px; color: var(--text-dim);
-}
-.queue-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.queue-btn {
-  background: none; border: none; color: var(--text-faint);
-  cursor: pointer; padding: 0 4px; font-size: 12px;
-}
-.queue-btn:hover { color: var(--accent); }
-.queue-edit-input {
-  flex: 1; background: var(--bg-sunken); border: 1px solid var(--accent);
-  border-radius: 4px; color: var(--text); font: inherit; font-size: 12px;
-  padding: 1px 5px; min-width: 0;
-}
-
-/* ── sidebar backdrop (mobile close-on-outside-click) ────────────────────── */
-.sidebar-backdrop {
-  display: none;
-  position: fixed; inset: 0; z-index: 8;
-  background: rgba(0,0,0,0.5);
-}
-@media (max-width: 720px) {
-  .sidebar.is-open ~ .sidebar-backdrop { display: block; }
-}
-
-/* ── mobile ──────────────────────────────────────────────────────────────── */
-@media (max-width: 720px) {
-  .menu-toggle { display: block; }
-  .meter { display: none; }
-  .sidebar {
-    position: fixed; top: 48px; bottom: 0; left: 0; z-index: 9;
-    transform: translateX(-100%); transition: transform 0.18s ease;
-  }
-  .sidebar.is-open { transform: translateX(0); }
-  .transcript { padding: 14px; }
-  .composer { padding: 10px 14px; }
-}
-
-.stop {
-  font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap;
-  color: var(--error); background: transparent;
-  border: 1px solid var(--error); border-radius: 6px; padding: 0 14px;
-}
-.stop:hover { background: rgba(248, 113, 113, 0.12); }
-
-/* ── toast ───────────────────────────────────────────────────────────────── */
-.toast {
-  position: fixed; top: 56px; right: 16px; z-index: 100;
-  max-width: 360px; padding: 10px 14px;
-  background: var(--bg-raised); border: 1px solid var(--error);
-  color: var(--error); border-radius: var(--radius);
-  font-size: 13px; line-height: 1.4;
-  opacity: 0; transition: opacity 0.2s ease;
-  pointer-events: none;
-}
-.toast.is-visible { opacity: 1; pointer-events: auto; }
-
-/* ── new-session form ────────────────────────────────────────────────────── */
-.new-session-form {
-  display: flex; flex-direction: column; gap: 6px;
-  padding: 10px 14px 12px; border-bottom: 1px solid var(--border);
-  background: var(--bg-raised);
-}
-.nsf-select, .nsf-input {
-  width: 100%; padding: 5px 8px;
-  background: var(--bg-sunken); border: 1px solid var(--border);
-  border-radius: 6px; color: var(--text); font: inherit; font-size: 12px;
-}
-.nsf-select:focus, .nsf-input:focus { outline: none; border-color: var(--accent); }
-.nsf-btn {
-  align-self: flex-start; padding: 4px 14px;
-  background: var(--accent); color: #1a0d05;
-  border: none; border-radius: 6px; font: inherit; font-size: 12px;
-  font-weight: 600; cursor: pointer;
-}
-.nsf-btn:hover { opacity: 0.88; }
-
-/* ── thinking panel (thinking-panel.ts) ──────────────────────────────────── */
-/*
- * Invariant: expand/collapse is driven by the `.thinking-block--open` modifier
- * class toggled in JS — NOT by `<details>` open attribute. This keeps the panel
- * compatible with the incremental renderer, which keys change-detection off
- * `.className` and would fight with native `<details>` state.
- */
-.thinking-host { max-width: 900px; width: 100%; margin-bottom: 14px; }
-
-.thinking-block {
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  background: var(--bg-raised);
-  overflow: hidden;
-}
-
-/* Summary row — always visible, acts as the click target. */
-.thinking-summary {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 6px 12px;
-  cursor: pointer;
-  user-select: none;
-  font-family: var(--mono);
-  font-size: 11px;
-  color: var(--text-faint);
-  /* No border-bottom by default; appears only when open (see below). */
-}
-.thinking-summary:hover { color: var(--text-dim); }
-
-/* Rotated chevron mirrors the tool-summary::before convention. */
-.thinking-chevron {
-  font-size: 14px;
-  color: var(--text-faint);
-  transition: transform 0.15s ease;
-  flex: 0 0 auto;
-  line-height: 1;
-}
-.thinking-block--open .thinking-chevron { transform: rotate(90deg); }
-
-.thinking-label { letter-spacing: 0.03em; }
-
-/* Body — hidden until the block is open. */
-.thinking-body {
-  display: none;
-  border-top: 1px solid var(--border);
-  padding: 10px 12px;
-}
-.thinking-block--open .thinking-body { display: block; }
-
-/* Verbatim thinking text — monospace, slightly dimmed, scrollable. */
-.thinking-pre {
-  margin: 0;
-  font-family: var(--mono);
-  font-size: 12px;
-  line-height: 1.55;
-  color: var(--text-dim);
-  white-space: pre-wrap;
-  word-break: break-word;
-  overflow-x: auto;
-  max-height: 480px;
-  overflow-y: auto;
-}
-
-/* Focus ring for keyboard navigation (role=button on .thinking-summary). */
-.thinking-summary:focus-visible {
-  outline: 2px solid var(--accent);
-  outline-offset: -2px;
-}
-
-/* ── subagent tree panel (Wave 2-E) ──────────────────────────────────────── */
-.sat-tree {
-  font-family: var(--mono);
-  font-size: 12px;
-  color: var(--text-dim);
-  padding: 6px 0;
-  user-select: none;
-}
-.sat-node { display: flex; flex-direction: column; }
-.sat-row {
-  display: flex;
-  align-items: baseline;
-  gap: 4px;
-  padding: 2px 8px;
-  border-radius: 4px;
-  white-space: nowrap;
-  overflow: hidden;
-}
-.sat-row-expandable { cursor: pointer; }
-.sat-row-expandable:hover { background: var(--bg-raised); }
-
-/* toggle arrow */
-.sat-toggle {
-  flex-shrink: 0;
-  font-size: 9px;
-  color: var(--text-faint);
-  width: 12px;
-  display: inline-block;
-}
-
-/* tree connector (monospace spine) */
-.sat-indent {
-  flex-shrink: 0;
-  color: var(--text-faint);
-  white-space: pre;
-}
-
-/* status icons */
-.sat-icon { flex-shrink: 0; font-size: 11px; width: 14px; text-align: center; }
-.sat-icon-started  { color: var(--accent); animation: sat-spin 1.2s linear infinite; }
-.sat-icon-succeeded { color: var(--success); }
-.sat-icon-failed   { color: var(--error); }
-.sat-icon-cancelled { color: var(--text-faint); }
-
-@keyframes sat-spin {
-  0%   { opacity: 1; }
-  50%  { opacity: 0.35; }
-  100% { opacity: 1; }
-}
-
-/* label parts */
-.sat-label { display: flex; align-items: baseline; gap: 0; min-width: 0; overflow: hidden; }
-.sat-type  { color: var(--text); font-weight: 500; flex-shrink: 0; }
-.sat-model { color: var(--text-faint); flex-shrink: 0; }
-.sat-head  {
-  color: var(--text-dim);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  min-width: 0;
-}
-
-/* right-aligned meta (duration + cost) */
-.sat-meta {
-  margin-left: auto;
-  display: flex;
-  gap: 8px;
-  flex-shrink: 0;
-  color: var(--text-faint);
-  font-size: 11px;
-}
-.sat-duration { color: var(--text-faint); }
-.sat-cost     { color: var(--text-faint); }
-
-/* children indent container */
-.sat-children { padding-left: 0; }
-
-/* ── tool-trace-panel (Wave 2-A) ──────────────────────────────────────────── */
-/*
- * tc-* classes belong to tool-trace-panel.ts. They reuse existing brand
- * tokens and the diff-* / tool-* classes already defined above so the
- * panel stays visually coherent with the existing tool rows in render.ts.
- */
-
-.tc-card {
-  border: 1px solid var(--border); border-radius: var(--radius);
-  margin-bottom: 8px; background: var(--bg-raised); overflow: hidden;
-  max-width: 900px; width: 100%;
-}
-
-.tc-header {
-  display: flex; align-items: center; gap: 8px; padding: 8px 12px;
-  cursor: pointer; font-family: var(--mono); font-size: 12px;
-  list-style: none; user-select: none;
-}
-.tc-header::-webkit-details-marker { display: none; }
-.tc-header::before {
-  content: '›';
-  display: inline-block; font-size: 14px; color: var(--text-faint);
-  transition: transform 0.15s ease; margin-right: 4px; flex: 0 0 auto;
-}
-details[open] > .tc-header::before { transform: rotate(90deg); }
-
-/* Status badge: dot + short label */
-.tc-status { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
-/* tc-dot reuses the .tool-dot sizing; the colour variant classes (tool-dot-ok
-   / tool-dot-running / tool-dot-error) come from the existing tool-calls block. */
-.tc-dot {
-  width: 6px; height: 6px; border-radius: 50%; flex: 0 0 6px;
-}
-.tc-status-label {
-  font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em;
-}
-.tc-status-running { color: var(--warning); }
-.tc-status-ok      { color: var(--success); }
-.tc-status-error   { color: var(--error); }
-
-.tc-name { color: var(--accent); font-weight: 600; flex: 0 0 auto; }
-.tc-input-preview {
-  color: var(--text-dim); overflow: hidden; text-overflow: ellipsis;
-  white-space: nowrap; flex: 1 1 0; min-width: 0;
-}
-.tc-header-duration {
-  color: var(--text-faint); font-size: 11px; flex: 0 0 auto; margin-left: auto;
-}
-
-/* Body (visible when <details> is open) */
-.tc-body {
-  padding: 0 12px 12px; border-top: 1px solid var(--border);
-}
-.tc-section { margin-top: 10px; }
-.tc-pre-wrap { display: flex; flex-direction: column; gap: 6px; }
-
-/* Duration metadata row */
-.tc-meta-row {
-  display: flex; align-items: center; gap: 8px;
-  padding: 8px 0 0; font-family: var(--mono); font-size: 11px;
-}
-.tc-meta-label {
-  font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
-  color: var(--text-dim);
-}
-.tc-meta-value { color: var(--text-faint); }
-
-/* "output not available" note — dim, not alarming */
-.tc-unavailable {
-  margin-top: 10px; font-size: 12px; font-style: italic;
-  color: var(--text-faint);
-}
-
-/* ---- subagent / bg-job lifecycle cards ---- */
-.sa-card {
-  display: flex; flex-direction: column; gap: 4px;
-  padding: 8px 12px; margin: 8px 0; border-radius: var(--radius);
-  border-left: 3px solid var(--border); background: var(--bg-sunken);
-  font-family: var(--mono); font-size: 12px;
-}
-.sa-card--started  { border-left-color: var(--accent); }
-.sa-card--succeeded, .sa-card--completed { border-left-color: var(--success); }
-.sa-card--failed   { border-left-color: var(--error); }
-.sa-card--cancelled { border-left-color: var(--text-dim); }
-.sa-header {
-  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
-}
-.sa-icon {
-  font-size: 13px; width: 18px; text-align: center; flex-shrink: 0;
-}
-.sa-card--started .sa-icon  { color: var(--accent); }
-.sa-card--succeeded .sa-icon, .sa-card--completed .sa-icon { color: var(--success); }
-.sa-card--failed .sa-icon   { color: var(--error); }
-.sa-card--cancelled .sa-icon { color: var(--text-dim); }
-.sa-label {
-  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
-  white-space: nowrap; color: var(--text);
-}
-.sa-model { color: var(--text-dim); font-size: 11px; }
-.sa-dur   { color: var(--text-faint); font-size: 11px; }
-.sa-prompt {
-  color: var(--text-faint); font-size: 11px; line-height: 1.4;
-  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
-}