web/src/styles.css

@font-face { font-family: 'Geist'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/fonts/Geist.woff2') format('woff2'); }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/fonts/GeistMono.woff2') format('woff2'); }

:root {
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', SFMono-Regular, Menlo, 'Cascadia Code', monospace;
  /* radius scale: soft, not bubbly */
  --r-sm: 4px;   /* mini buttons, chips, inline inputs */
  --r-md: 6px;   /* buttons, inputs, rows */
  --r-lg: 8px;   /* widgets, cards */
  --r-xl: 10px;  /* panes, tiles */
  --accent: #0e7c86;
  --accent-fg: #ffffff;
  --go: #1c8c57;
  --danger: #c2433a;

  --bg: #eef1f3;
  --panel: #ffffff;
  --panel-2: #f5f8f9;
  --border: #d7dee3;
  --border-strong: #c4ced4;
  --text: #10161b;
  --muted: #6a757d;
  --term-bg: #ffffff;
  --drop: #0e7c8618;
  --tile: #ffffff;
}

[data-theme='dark'] {
  --accent: #2bb3bd;
  --accent-fg: #04181a;
  --go: #43c98a;
  --danger: #e0726a;

  --bg: #0b0f13;
  --panel: #11181e;
  --panel-2: #0e141a;
  --border: #222b34;
  --border-strong: #2c3742;
  --text: #e7eef1;
  --muted: #8b97a0;
  --term-bg: #0e1217;
  --drop: #2bb3bd22;
  --tile: #f2f4f6;
}

* { box-sizing: border-box; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; }
*::-webkit-scrollbar-track { background: transparent; }
html, body, #root { height: 100%; margin: 0; }

/* keyboard focus, one style everywhere */
button:focus-visible, a:focus-visible, label:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 1px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}
.mono { font-family: var(--font-mono); }

.app { display: flex; height: 100%; }
.app.app-suspended { display: none; }
.sidebar { width: 282px; flex: none; background: var(--panel); border-right: 1px solid var(--border); display: flex; flex-direction: column; overflow: hidden; }
.main { flex: 1; min-width: 0; padding: 12px; overflow: hidden; display: flex; flex-direction: column; }
.stage { flex: 1; min-height: 0; }
/* Backup failure strip: one line above whatever view you are on. Loud enough to
   not be mistaken for chrome, quiet enough to live there until it is fixed. */
.bkfail { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; padding: 7px 10px; border: 1px solid color-mix(in srgb, var(--danger) 45%, var(--border)); background: color-mix(in srgb, var(--danger) 10%, transparent); border-radius: var(--r-md); font-size: 12.5px; line-height: 1.35; }
.bkfail-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--danger); }
.bkfail-txt { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bkfail-why { color: var(--muted); }
.bkfail-link { flex: none; border: none; background: transparent; padding: 0; font: inherit; font-size: 12px; color: inherit; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 2px; cursor: pointer; }
.bkfail-link:hover { color: var(--danger); text-decoration-style: solid; }
.zoombar { display: flex; align-items: center; gap: 4px; padding: 4px 8px; margin-top: 8px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg); flex: none; }
.zoombar .spacer { flex: 1; }
/* overview bottom bar: filter + view segments, centered */
.zoombar.ov-bar { justify-content: center; gap: 8px; }
.ov-viewseg button { display: inline-flex; align-items: center; padding: 4.5px 9px; }
.ov-viewseg svg { width: 13px; height: 13px; }

/* transparent CLI logos; invert the mostly-black ones in dark mode */
.cli-logo { flex: none; display: inline-flex; align-items: center; justify-content: center; }
.cli-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.cli-logo svg { width: 100%; height: 100%; display: block; }
.cli-logo.files-glyph { color: color-mix(in srgb, var(--accent) 65%, var(--muted)); }
[data-theme='dark'] .cli-logo.inv-dark img { filter: invert(1); }
[data-theme='light'] .cli-logo.inv-light img { filter: invert(1); }

/* header */
.brand { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 13px 14px; border-bottom: 1px solid var(--border); }
.brand .logo { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; }
.brand h1 { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 14px; margin: 0; letter-spacing: -0.01em; white-space: nowrap; }
.brand .brand-actions { display: flex; gap: 4px; flex: none; }
/* AM monogram — the brand mark */
.am-mark { width: 16px; height: 13.7px; color: var(--accent); flex: none; display: block; }
.icon-btn.add-btn { color: var(--accent); }
.icon-btn.add-btn:hover, .icon-btn.add-btn.on { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); color: var(--accent); }
.icon-btn { background: transparent; border: 1px solid var(--border); color: var(--muted); border-radius: var(--r-md); width: 32px; height: 30px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.icon-btn:hover { color: var(--text); border-color: var(--border-strong); }

/* stroke glyph sizing inside the shared button boxes */
.icon-btn svg { width: 15px; height: 15px; }
.mini-btn svg { width: 13px; height: 13px; }
.btn-ghost svg, .btn-primary svg, .btn-danger svg { width: 14px; height: 14px; }

@keyframes breathe { 50% { opacity: 0.55; } }
@keyframes rise-in { from { opacity: 0; transform: translateY(-3px); } }

/* controls (the create panel, opened from the brand's +) */
.controls { padding: 9px 10px; display: flex; flex-direction: column; gap: 6px; border-bottom: 1px solid var(--border); animation: rise-in 0.14s ease-out; }
.create-seg { align-self: stretch; display: flex; }
.create-seg button { flex: 1; }
.create-hint { font-size: 10.5px; color: var(--accent); padding: 0 2px; }
/* one shared button box so every button lines up (same height/padding/font) */
.btn-ghost, .btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 12px; font-size: 13px; font-weight: 600; line-height: 1.25; border: 1px solid transparent; border-radius: var(--r-md); cursor: pointer; }
.btn-ghost { background: var(--panel-2); color: var(--text); border-color: var(--border); }
.btn-ghost:hover { border-color: var(--border-strong); }
.btn-ghost:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-ghost:disabled:hover { border-color: var(--border); }
.btn-ghost.on { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.btn-primary { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
/* hovers ease instead of snapping */
.btn-ghost, .btn-primary, .icon-btn, .agent-pick, .mini-btn, .fp-current, .settings-navitem, .skill-item, .row {
  transition: border-color 0.12s ease-out, background 0.12s ease-out, color 0.12s ease-out;
}

.widget { display: flex; flex-direction: column; gap: 8px; background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 10px; animation: rise-in 0.14s ease-out; }
.widget input, .widget select { width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--panel); color: var(--text); font-size: 13px; font-family: inherit; }
.widget input:focus, .widget select:focus { outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); border-color: var(--accent); }
.widget select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 28px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2.5 4.5l3.5 3.5 3.5-3.5' fill='none' stroke='%238a93a0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat; background-position: right 10px center; }
.widget-actions { display: flex; gap: 8px; }
.widget-actions .btn-primary { flex: 1; }

/* quickstart: one row of harnesses (+ the group tile), one prompt, go */
/* Sized so every tile fits on ONE row at the sidebar's width; wrap stays as a
   fallback for a narrower viewport rather than overflowing. */
.quick-clis { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.quick-cli { width: 25px; height: 25px; flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-md); cursor: pointer; padding: 0; opacity: 0.65; }
.quick-cli:hover:not(:disabled) { opacity: 1; border-color: var(--border-strong); }
.quick-cli.on { opacity: 1; border-width: 1.5px; box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent); }
.quick-cli.off { opacity: 0.25; cursor: default; }
/* group tile: a miniature 2x2 of agents — same visual weight as the logos */
.grp-mini { display: grid; grid-template-columns: repeat(2, auto); gap: 2px; }
.grp-mini .cli-logo { width: 8px; height: 8px; }
.quick-prompt { width: 100%; resize: none; overflow: hidden; min-height: 34px; max-height: 160px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--panel); color: var(--text); font: inherit; font-size: 13px; line-height: 1.45; }
.quick-prompt:focus { outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); border-color: var(--accent); }
.quick-hint { font-size: 10.5px; color: var(--muted); }
/* the group tile sits apart from the harnesses behind a hairline */
.quick-sep { width: 1px; align-self: stretch; background: var(--border); margin: 3px 2px; }
.quick-grp { color: var(--muted); }
.quick-grp.on { color: var(--accent); border-color: var(--accent) !important; }
.quick-foot { display: flex; align-items: center; gap: 8px; }
.quick-foot .quick-hint { margin-left: auto; white-space: nowrap; }
.quick-more { background: none; border: none; padding: 0; font: inherit; font-size: 10.5px; font-weight: 600; color: var(--accent); cursor: pointer; white-space: nowrap; }
.quick-more:hover { text-decoration: underline; }
.cart-row.off { opacity: 0.45; }

/* new-agent: logo buttons */
.agent-picks { display: flex; flex-direction: column; gap: 4px; }
.agent-pick { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-md); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; text-align: left; }
.agent-pick:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--panel)); }
.agent-pick.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--panel)); font-weight: 600; }

/* detected secrets/variables: overview-style cards — name on top, hairline,
   description written directly below (borderless growing textarea) */
.secret-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.secret-row { display: flex; flex-direction: column; gap: 8px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 10px 13px 9px; }
.secret-name { font-size: 12.5px; font-weight: 600; color: var(--accent); padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.secret-desc { display: block; width: 100%; resize: none; overflow: hidden; padding: 0; border: none; background: transparent; color: var(--text); font: inherit; font-size: 13px; line-height: 1.45; }
.secret-desc:focus { outline: none; }
.secret-desc::placeholder { font-style: italic; }

/* new-group: per-agent quantity cart */
.widget-sep { height: 1px; background: var(--border); margin: 1px 0; flex: none; }

/* labelled widget fields, uniform control sizing */
.w-field { display: flex; flex-direction: column; gap: 4px; }
.w-label { font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); padding-left: 1px; }
.agent-pick, .widget input, .fp-current { min-height: 32px; font-size: 13px; }

/* folder location picker (in the create widgets) */
.fp { display: flex; flex-direction: column; gap: 4px; }
.fp-current { display: flex; align-items: center; gap: 7px; width: 100%; padding: 7px 10px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-md); color: var(--text); font: inherit; font-size: 12.5px; cursor: pointer; text-align: left; }
.fp-current:hover { border-color: var(--border-strong); }
.fp-ico { flex: none; width: 14px; height: 14px; color: var(--muted); }
.fp-row .fp-ico { width: 13px; height: 13px; margin-right: 4px; }
.fp-path { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.fp-toggle { flex: none; color: var(--muted); font-size: 10px; }
.fp-tree { max-height: 180px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--panel); padding: 3px 0; display: flex; flex-direction: column; animation: rise-in 0.14s ease-out; }
.fp-row { display: flex; align-items: center; gap: 2px; padding: 2px 8px; font-size: 12.5px; color: var(--text); background: transparent; border: none; cursor: pointer; text-align: left; width: 100%; font-family: inherit; }
.fp-row.picked { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
.fp-row:hover:not(.picked) { background: var(--panel-2); }
.fp-caret { flex: none; width: 18px; background: transparent; border: none; color: var(--muted); font-size: 9px; cursor: pointer; padding: 2px 0; }
.fp-name { flex: 1; background: transparent; border: none; color: inherit; font: inherit; cursor: pointer; text-align: left; padding: 3px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp-root { padding: 3px 8px; color: var(--text); }
.fp-root.picked { color: var(--accent); }
.fp-new { color: var(--muted); font-size: 12px; padding-top: 3px; padding-bottom: 3px; }
.fp-new:hover { color: var(--accent); }
.fp-msg { color: var(--muted); cursor: default; }
.fp-input { flex: 1; padding: 3px 8px !important; font-size: 12px !important; }

.cart { display: flex; flex-direction: column; gap: 4px; }
.cart-row { display: flex; align-items: center; gap: 8px; padding: 3px 4px; border-radius: var(--r-md); font-size: 13px; }
.cart-row.has { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.cart-name { color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; flex: none; background: var(--panel); }
.stepper button { width: 24px; height: 24px; border: none; background: transparent; color: var(--muted); font-size: 15px; line-height: 1; cursor: pointer; }
.stepper button:hover:not(:disabled) { color: var(--text); background: var(--panel-2); }
.stepper button:disabled { opacity: 0.35; cursor: not-allowed; }
.stepper-n { min-width: 20px; text-align: center; font-size: 12px; font-variant-numeric: tabular-nums; }

/* overview: pinned sidebar row (session-row anatomy) + cards view */
.ov-fixed { padding: 5px 8px 6px; border-bottom: 1px solid var(--border); }
.ov-row { cursor: pointer; padding-top: 6px; padding-bottom: 6px; }
.ov-row .status.ov-spacer { visibility: hidden; }
.ov-tile { flex: none; box-sizing: content-box; width: 12px; height: 12px; padding: 3px; border-radius: 4px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; }
.ov-tile svg { width: 100%; height: 100%; display: block; }
.ov-row .name { color: var(--text); }
.ov-wait { flex: none; font-family: var(--font-mono); font-size: 10px; color: var(--accent); }
/* ---- Overview: one reading column of capsules (design mock v4.12) ---- */
.ov-wrap { height: 100%; overflow-y: auto; }
.ov-feed { max-width: 680px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; padding: 2px 2px 40px; }
.ov-seg button { padding: 3px 11px; }

.ov-panel { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-xl); }

/* group capsule: header bar / spaced flat slabs / footer strip that merges away */
.ov-sec { display: flex; flex-direction: column; }
.ov-sechead { display: flex; align-items: center; gap: 7px; width: 100%; background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--r-xl) var(--r-xl) 0 0; padding: 8px 14px; font: inherit; color: var(--text); cursor: pointer; text-align: left; transition: border-radius var(--dur, 0.36s) ease; }
.ov-sec.closed .ov-sechead { border-radius: var(--r-xl); }
.ov-caret { width: 10px; height: 10px; flex: none; color: var(--muted); transition: transform var(--dur, 0.36s) ease; transform-origin: 50% 50%; display: block; }
.ov-sec.closed .ov-caret { transform: rotate(-90deg); }
.ov-sectitle { font-size: 13px; font-weight: 600; }
.ov-secn { font-size: 11px; color: var(--muted); }
.ov-peek { margin-left: auto; display: inline-flex; gap: 5px; align-items: center; }
.ov-drawer { display: grid; grid-template-rows: 1fr; transition: grid-template-rows var(--dur, 0.36s) ease; }
.ov-drawer-in { overflow: hidden; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; }
.ov-sec.closed .ov-drawer { grid-template-rows: 0fr; }
.ov-secbody { display: flex; flex-direction: column; gap: 6px; padding: 6px 0; }
.ov-secbody .ov-panel { border-radius: 0; }
.ov-foot { height: 9px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 0 0 var(--r-xl) var(--r-xl); transition: height var(--dur, 0.36s) ease, border-top-width var(--dur, 0.36s) ease, border-bottom-width var(--dur, 0.36s) ease, opacity calc(var(--dur, 0.36s) * 0.8) ease; }
.ov-sec.closed .ov-foot { height: 0; border-top-width: 0; border-bottom-width: 0; opacity: 0; }

/* card content */
.ov-card { padding: 11px 14px 10px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ov-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ov-id { display: flex; align-items: center; gap: 8px; cursor: pointer; min-width: 0; }
.ov-id .spacer { flex: 1; }
.ov-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov-ago { font-size: 11px; color: var(--muted); flex: none; }
.ov-go { color: var(--muted); font-size: 12px; opacity: 0; transition: opacity 0.12s ease-out; flex: none; }
.ov-card:hover .ov-go, .ov-id:focus-visible .ov-go { opacity: 1; }

/* full prompt, wrapped — the card body scrolls, so no inner scroll here */
.ov-prompt { font-size: 13px; font-weight: 550; color: var(--text); white-space: pre-wrap; overflow-wrap: break-word; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
/* nothing between prompt and reply → one hairline, not two */
.ov-prompt + .ov-live { border-top: none; }
.ov-prompt::before { content: '❯ '; font-family: var(--font-mono); color: var(--accent); font-weight: 700; }
.ov-prompt-none { font-style: italic; font-weight: 400; color: var(--muted); }
.ov-prompt-none::before { color: var(--border-strong); }
.ov-meta { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; margin-top: -2px; display: flex; align-items: center; gap: 6px; }
.ov-meta .spacer { flex: 1; }
.ov-meta-bits { overflow: hidden; text-overflow: ellipsis; }
/* turn history: step back through earlier exchanges */
.ov-nav { display: inline-flex; align-items: center; gap: 3px; flex: none; }
.ov-nav-pos { color: var(--accent); margin-right: 3px; }
.ov-nav-btn { background: none; border: 1px solid var(--border); border-radius: 5px; width: 20px; height: 17px; padding: 0; font: inherit; font-size: 10.5px; line-height: 1; color: var(--muted); cursor: pointer; }
.ov-nav-btn:hover:not(:disabled) { color: var(--text); border-color: var(--border-strong); }
.ov-nav-btn:disabled { opacity: 0.35; cursor: default; }

.ov-answer-wrap { min-width: 0; }
.ov-answer { font-size: 13px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
/* live progress while running: present but clearly not the final word */
.ov-answer-dim { color: var(--muted); margin-bottom: 5px; -webkit-line-clamp: 2; }
/* answer flows in the card at natural height — the window body is the single
   scroll region, so no inner scrollbar here */
.markdown.ov-md { border: none; background: none; padding: 0; font-size: 12.5px; }
.ov-md pre { font-size: 11px; }

/* braille spinner: unmistakably a process, never an input line */
.ov-busy { font-size: 12.5px; color: var(--muted); }
.ov-busy::before { content: '⠋'; display: inline-block; width: 1.2em; color: var(--accent); animation: ov-spin 0.9s steps(1) infinite; }
@keyframes ov-spin {
  0% { content: '⠋'; } 12.5% { content: '⠙'; } 25% { content: '⠹'; } 37.5% { content: '⠸'; }
  50% { content: '⠼'; } 62.5% { content: '⠴'; } 75% { content: '⠦'; } 87.5% { content: '⠧'; }
}

/* shimmer placeholder while a session's digest loads */
.skel { display: block; height: 9px; border-radius: 5px; background: linear-gradient(90deg, var(--panel-2) 25%, color-mix(in srgb, var(--border) 70%, var(--panel-2)) 50%, var(--panel-2) 75%); background-size: 200% 100%; animation: skel 1.2s ease-in-out infinite; }
@keyframes skel { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.ovt-tile .skel { margin: 5px 0 2px; }
.ov-prompt-skel { padding: 5px 0 12px; border-bottom: 1px solid var(--border); }

/* ---- overview tile view: compact grid, groups outlined fieldset-style ---- */
/* tiles use the full stage width — the grid decides how many columns fit */
.ovt-feed { max-width: none; gap: 16px; }
.ovt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(225px, 1fr)); gap: 10px; }
.ovt-tile { background: var(--panel); border: 1px solid var(--border); border-radius: 11px; padding: 10px 12px 9px; cursor: pointer; display: flex; flex-direction: column; gap: 6px; min-width: 0; transition: border-color 0.12s, transform 0.12s; }
.ovt-tile:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.ovt-tile.attn { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent); }
.ovt-head { display: flex; align-items: center; gap: 7px; min-width: 0; }
.ovt-name { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ovt-ago { color: var(--muted); font-size: 11px; flex: none; margin-left: auto; }
.ovt-prompt { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ovt-prompt::before { content: '❯ '; font-family: var(--font-mono); color: var(--accent); font-weight: 700; }
.ovt-prompt.none { color: var(--muted); font-style: italic; }
.ovt-prompt.none::before { color: var(--border-strong); }
.ovt-state { font-size: 10.5px; color: var(--muted); }
.ovt-state.running { color: var(--accent); }
.ovt-state.running::before { content: '⠋ '; display: inline-block; animation: ov-spin 0.9s steps(1) infinite; }
.ovt-state.stopped { opacity: 0.7; }
.ovt-group { position: relative; border: 1px solid var(--border); border-radius: 13px; padding: 12px 10px 10px; margin-top: 6px; }
/* loose tiles align with tiles INSIDE group boxes (1px border + 10px padding),
   not with the box edge */
.ovt-feed > .ovt-grid { margin: 0 11px; }
.ovt-glabel { position: absolute; top: -8px; left: 14px; background: var(--bg); padding: 0 7px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; color: var(--muted); }
.ovt-gn { color: var(--border-strong); }
/* conversation window: the full card, centered over the grid */
.ovw-backdrop { position: fixed; inset: 0; z-index: 120; display: flex; align-items: flex-start; justify-content: center; padding: 7vh 20px 20px; background: color-mix(in srgb, #000 52%, transparent); backdrop-filter: blur(3px); animation: rise-in 0.15s ease-out; }
/* window is a flex column: header + scrolling body + fixed input. Only the
   body scrolls (one scrollbar), the reply input stays put at the bottom. */
.ovw-win { width: 100%; max-width: 640px; max-height: 85vh; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--border); border-radius: 13px; box-shadow: 0 24px 60px rgb(0 0 0 / 0.4); overflow: hidden; }
.ovw-win .ov-card { flex: 1; min-height: 0; padding: 14px 17px 12px; }
.ovw-win .ov-body { flex: 1; min-height: 0; overflow-y: auto; }
.ovw-win .ov-live { flex: none; }
.ov-x { background: none; border: none; color: var(--muted); font-size: 13px; cursor: pointer; padding: 0 2px 0 8px; flex: none; }
.ov-x:hover { color: var(--text); }

/* reply: a quiet, always-there input line — its ❯ mirrors the prompt's */
.ov-live { display: flex; gap: 8px; align-items: center; border-top: 1px solid var(--border); padding-top: 7px; font-size: 13px; }
.ov-live .ov-p { color: var(--accent); font-weight: 700; font-size: 13px; }
.ov-live textarea { flex: 1; min-width: 0; border: none; background: none; font: inherit; font-size: 13px; line-height: 1.45; color: var(--text); outline: none; padding: 2px 0; resize: none; overflow: hidden; max-height: 140px; }
.ov-live textarea::placeholder { color: var(--muted); opacity: 0.7; }
.ov-hint { font-size: 10.5px; color: var(--muted); flex: none; }
/* send button — essential on mobile (no Shift+Enter), handy on desktop */
/* A square key, not a bubble: it sits at the end of a line of type, and the
   rounded pill read as a chat app rather than as a prompt. */
.ov-send { flex: none; width: 26px; height: 26px; padding: 0; border: none; border-radius: 7px; background: var(--accent); color: var(--accent-fg); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.ov-send svg { width: 15px; height: 15px; }
.ov-send:disabled { opacity: 0.5; cursor: default; }
.ov-note { font-size: 11px; color: var(--danger); }

/* tree */
.tree { flex: 1; overflow-y: auto; padding: 6px 8px 10px; display: flex; flex-direction: column; }
.tree > * { flex: none; } /* rows keep their natural height; the arch-note's margin-top:auto sinks it */
.empty-hint { color: var(--muted); font-size: 12px; padding: 12px 10px; line-height: 1.5; }
.empty-hint.nested { padding: 6px 10px 8px 38px; font-size: 11.5px; }

.gap { height: 8px; }
.gap.over { position: relative; }
.gap.over::after { content: ''; position: absolute; left: 8px; right: 8px; top: 3px; height: 2px; border-radius: 2px; background: var(--accent); }

.row { position: relative; display: flex; align-items: center; gap: 7px; padding: 3.5px 8px; border-radius: var(--r-sm); cursor: pointer; border: 1px solid transparent; }
.row.session { cursor: grab; }
.row:hover { background: var(--panel-2); }
.row.active { background: color-mix(in srgb, var(--accent) 10%, transparent); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.row.dragging { opacity: 0.4; }
.row.drop-before::after, .row.drop-after::after { content: ''; position: absolute; left: 6px; right: 6px; height: 2px; background: var(--accent); border-radius: 2px; }
.row.drop-before::after { top: -1px; }
.row.drop-after::after { bottom: -1px; }
.row.drop-on { background: var(--drop); outline: 1px solid var(--accent); outline-offset: -1px; }
/* the dot column is a size down from the app-wide 8px dots */
.row .status { width: 6px; height: 6px; }
/* mono for THINGS (session names, counts), sans for commentary. Member names
   speak in the muted voice — state (dot) and place (frame) carry the color. */
.row .name { flex: 1; font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row.active .name, .row:hover .name { color: var(--text); }
.row .rename { flex: 1; font: inherit; font-family: var(--font-mono); font-size: 11.5px; padding: 1px 6px; border: 1px solid var(--accent); border-radius: var(--r-sm); background: var(--panel-2); color: var(--text); min-width: 0; }
.row .age { flex: none; font-family: var(--font-mono); font-size: 10px; color: var(--muted); transition: opacity 0.12s ease-out; }
.row .count { font-family: var(--font-mono); font-size: 10.5px; color: var(--muted); }
.caret { background: transparent; border: none; color: var(--muted); cursor: pointer; font-size: 10px; line-height: 1; width: 13px; padding: 0; flex: none; }
/* Actions overlay the row's right edge on hover (swapping in over the age)
   instead of reserving flow space. */
.row .row-actions { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); display: flex; gap: 2px; opacity: 0; pointer-events: none; transition: opacity 0.12s ease-out; background: var(--panel-2); border-radius: var(--r-sm); }
.row:hover .row-actions, .row:focus-within .row-actions { opacity: 1; pointer-events: auto; }
.row:hover .age { opacity: 0; }
.mini-btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; border: none; background: transparent; color: var(--muted); cursor: pointer; font-size: 12px; padding: 3px 6px; border-radius: var(--r-sm); }
.mini-btn:hover { color: var(--text); background: var(--border); }

/* groups: a labeled frame — the name rides the top border */
.group { position: relative; margin: 13px 1px 5px; border: 1px solid var(--border); border-radius: var(--r-sm); padding: 7px 3px 3px; }
.group.closed { padding: 6px 3px; }
.group.active { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.group.drop-into { background: var(--drop); outline: 1px dashed var(--accent); }
.row.group-head { position: absolute; top: -10px; left: 8px; max-width: calc(100% - 52px); padding: 0 6px 0 3px; gap: 4px; background: var(--panel); border: none; border-radius: 0; cursor: pointer; z-index: 1; }
.row.group-head:hover, .group.active .row.group-head { background: var(--panel); }
.row.group-head .name { flex: initial; font-size: 11.5px; font-weight: 400; color: var(--text); }
.row.group-head:hover .name { color: var(--accent); }
.row.group-head .rename { width: 130px; flex: none; }
/* actions must not reserve space when hidden — an invisible-but-present span
   would stretch the label's frame punch-out and leave a gap in the border */
.row.group-head .row-actions { position: static; transform: none; background: var(--panel); display: none; opacity: 1; pointer-events: auto; }
.row.group-head:hover .row-actions, .row.group-head:focus-within .row-actions { display: flex; }
.row.group-head:hover .count { display: none; }
/* per-group + on the frame line, revealed on hover */
.g-add { position: absolute; top: -9px; right: 8px; background: var(--panel); border: none; color: var(--muted); padding: 0 4px; cursor: pointer; opacity: 0; transition: opacity 0.12s; z-index: 1; }
.group:hover .g-add { opacity: 1; }
.g-add:hover { color: var(--accent); }
.g-add svg { width: 11px; height: 11px; display: block; }
.row.nested { margin-left: 0; padding-left: 8px; }

/* status dots */
.status { width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block; transition: background 0.2s, box-shadow 0.2s, opacity 0.2s; }
.status.working { background: var(--accent); animation: breathe 2.2s ease-in-out infinite; }
/* your turn: hollow ring in the primary color — "paused, waiting on you" */
.status.waiting { background: transparent; border: 1.5px solid var(--accent); }
.status.idle { background: var(--muted); opacity: 0.5; }
.status.stopped { background: transparent; border: 1.5px solid var(--muted); opacity: 0.5; }

/* quick-add utilities (shell / files) pinned above the legend */
.quick-add { display: flex; gap: 6px; padding: 10px 10px; border-top: 1px solid var(--border); }
.quick-add .btn-ghost { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 5.5px 8px; font-family: var(--font-mono); font-size: 12px; font-weight: 500; border-radius: var(--r-sm); }
/* the create panel speaks the same dense mono voice as the rows */
.controls .widget { gap: 6px; padding: 8px; border-radius: var(--r-md); }
.controls .w-field { gap: 3px; }
.controls .w-label { font-size: 9.5px; letter-spacing: 0.055em; }
.controls .agent-picks, .controls .cart { gap: 3px; }
.controls .agent-pick { min-height: 27px; gap: 7px; padding: 4px 7px; border-radius: var(--r-sm); }
.controls .cart-row { gap: 7px; padding: 2px 3px; font-size: 12px; }
.controls .stepper button { width: 22px; height: 22px; font-size: 14px; }
.controls .stepper-n { min-width: 18px; font-size: 11.5px; }
.controls .btn-primary, .controls .btn-ghost { font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; padding: 5px 8px; border-radius: var(--r-sm); }
.controls .widget input, .controls .widget select, .controls .agent-pick, .controls .fp-current { min-height: 28px; font-size: 12px; }
.controls .fp-current { padding: 5px 8px; }
.controls .fp-path { font-size: 12px; }
.controls .seg button { font-family: var(--font-mono); font-size: 11.5px; padding: 4px 8px; }

.legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 10px 16px; border-top: 1px solid var(--border); font-size: 10.5px; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 5px; }
/* archived toggle: a quiet custom checkbox speaking the app's language */
.legend-arch { position: relative; display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.legend-arch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.legend-arch .lbox { width: 11px; height: 11px; flex: none; border: 1px solid var(--border-strong); border-radius: 3.5px; background: var(--panel-2); display: inline-flex; align-items: center; justify-content: center; transition: background 0.12s, border-color 0.12s; }
.legend-arch:hover .lbox { border-color: var(--muted); }
.legend-arch input:checked ~ .lbox { background: var(--accent); border-color: var(--accent); }
.legend-arch input:checked ~ .lbox::after { content: ''; width: 5px; height: 2.5px; border-left: 1.5px solid var(--accent-fg); border-bottom: 1.5px solid var(--accent-fg); transform: rotate(-45deg) translateY(-1px); }
/* archived rows/tiles: present but visibly parked */
.row.archived .name, .row.archived .cli-logo { opacity: 0.45; }
.ovt-tile.archived .ovt-head { opacity: 0.55; }
.arch-note { font-size: 10.5px; color: var(--muted); font-style: italic; text-align: center; padding: 14px 12px 4px; margin-top: auto; }

/* main: tiles */
.tiles { height: 100%; display: grid; gap: 12px; }
.pane-deck.deck-hidden, .tile.tile-cached { display: none; }
.tiles.drop-over { outline: 2px dashed var(--accent); outline-offset: -6px; border-radius: var(--r-xl); }
.tile { display: flex; min-width: 0; min-height: 0; border-radius: var(--r-xl); }
.tile > .slot { flex: 1; min-width: 0; min-height: 0; }
/* empty cells surface as drop targets while a pane (rearrange) or a sidebar
   session (join the group) is being dragged */
.tile-empty { border: 1px dashed transparent; transition: border-color 0.12s ease-out; }
.tiles.pane-dragging .tile-empty, .tiles.session-dragging .tile-empty { border-color: var(--border-strong); }
.tile.tile-over { outline: 2px dashed var(--accent); outline-offset: -2px; }
/* append target when the grid has no free cell */
.tile-ghost { grid-column: 1 / -1; min-height: 54px; border: 1px dashed var(--border-strong); display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 12.5px; animation: rise-in 0.14s ease-out; }
.pane-head.draggable { cursor: grab; }
.pane-head.draggable:active { cursor: grabbing; }
.slot { position: relative; min-width: 0; min-height: 0; border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--border); background: var(--term-bg); display: flex; flex-direction: column; }

/* public-space locked screen: app shell with a frozen sidebar + install guide */
.locked-app .mock-side { pointer-events: none; user-select: none; opacity: 0.75; }
.locked-main { overflow-y: auto; }
.install { max-width: 620px; margin: 0 auto; padding: 26px 6px 60px; display: flex; flex-direction: column; gap: 18px; }
.install-head { display: flex; gap: 14px; align-items: flex-start; }
.install-lock { flex: none; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--accent) 10%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border)); border-radius: var(--r-lg); margin-top: 2px; }
.install-lock svg { width: 20px; height: 20px; color: var(--accent); }
.install h1 { margin: 0 0 6px; font-size: 19px; letter-spacing: -0.01em; text-wrap: balance; }
.locked-lead { color: var(--text); font-size: 13.5px; line-height: 1.55; margin: 0; }
.locked-sub { color: var(--muted); font-size: 13px; line-height: 1.55; margin: 0; }
.locked-sub b { color: var(--text); }
.step { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.step-head { display: flex; align-items: center; gap: 10px; }
.step-head h3 { margin: 0; font-size: 14px; }
.step-n { flex: none; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border)); color: var(--accent); border-radius: 50%; font-size: 11.5px; font-weight: 600; }
.step img { width: 100%; max-width: 480px; border: 1px solid var(--border); border-radius: var(--r-lg); display: block; }
.install-done { margin: 2px 0 0; font-size: 13px; line-height: 1.5; color: var(--go); font-weight: 500; }
/* the code path: same panel as the steps, collapsed to its title row */
.install-code summary { cursor: pointer; list-style: none; }
.install-code summary::-webkit-details-marker { display: none; }
.install-code summary .step-n { border-radius: var(--r-sm); font-size: 9px; letter-spacing: 0.02em; }
.install-code .install-code-caret { margin-left: auto; width: 12px; height: 12px; color: var(--muted); transition: transform 0.15s ease-out; transform: rotate(-90deg); transform-origin: 50% 50%; flex: none; }
.install-code[open] .install-code-caret { transform: rotate(0deg); }
.install-code summary:hover .install-code-caret { color: var(--text); }
.install-code[open] summary { margin-bottom: 4px; }
.install-relock { border-bottom: 1px solid var(--border); padding-bottom: 16px; }
.locked-cmd { position: relative; margin-top: 8px; }
.locked-cmd pre { margin: 0; overflow-x: hidden; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 42px 14px 14px; font-size: 12px; line-height: 1.5; }
.locked-copy { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--panel); color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.locked-copy:hover { color: var(--text); border-color: var(--border-strong); }
.locked-copy svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }

/* terminal boot cover ("connecting… / starting claude…") */
.term-boot { position: absolute; inset: 0; top: 34px; display: flex; align-items: center; justify-content: center; background: var(--term-bg); color: var(--muted); font-size: 12.5px; z-index: 4; pointer-events: none; }
.term-boot .et-cursor { height: 13px; width: 7px; margin-left: 7px; }
.term-preview { position: absolute; inset: 34px 0 0; z-index: 4; overflow: hidden; background: var(--term-bg); color: var(--text); pointer-events: none; }
.term-preview pre { height: 100%; margin: 0; padding: 10px 8px 8px 12px; overflow: hidden; font: inherit; line-height: 1.15; white-space: pre; }
.term-preview > span { position: absolute; right: 9px; bottom: 7px; padding: 3px 6px; border: 1px solid var(--border); border-radius: var(--r-sm); background: color-mix(in srgb, var(--term-bg) 88%, transparent); color: var(--muted); font-size: 10px; }
/* terminal "process exited" overlay */
/* Non-blocking banner so the agent's last output (e.g. a login error) stays readable. */
/* stopped state: quiet line centered in the pane, in the boot-cover's voice */
.term-exit { position: absolute; inset: 34px 0 0 0; display: flex; align-items: center; justify-content: center; z-index: 5; pointer-events: none; }
.term-exit .tx-row { display: flex; align-items: center; gap: 14px; padding: 9px 16px; border-radius: var(--r-lg); background: color-mix(in srgb, var(--term-bg) 82%, transparent); backdrop-filter: blur(3px); color: var(--muted); font-size: 12.5px; }
.term-exit .tx-btn { pointer-events: auto; display: inline-flex; align-items: center; gap: 6px; background: none; border: none; padding: 2px 4px; color: var(--accent); font: inherit; font-weight: 600; cursor: pointer; }
.term-exit .tx-btn svg { width: 13px; height: 13px; }
.term-exit .tx-btn:hover { text-decoration: underline; }

/* settings inline warning (e.g. unverifiable bucket) */
.s-warn { margin: 6px 0 2px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--danger) 45%, var(--border)); background: color-mix(in srgb, var(--danger) 10%, transparent); border-radius: var(--r-md); font-size: 12px; line-height: 1.5; color: var(--text); }

/* transient error toast */
.toast { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 300; max-width: 90vw; padding: 9px 14px; background: color-mix(in srgb, var(--danger) 92%, #000); color: #fff; border-radius: var(--r-md); font-size: 12.5px; box-shadow: 0 8px 28px rgb(0 0 0 / 0.3); animation: rise-in 0.16s ease-out; }

/* first-run welcome card */
.welcome-backdrop { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; background: color-mix(in srgb, #000 55%, transparent); backdrop-filter: blur(3px); animation: rise-in 0.16s ease-out; }
.welcome-card { width: 100%; max-width: 560px; max-height: 88vh; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 22px; box-shadow: 0 24px 60px rgb(0 0 0 / 0.35); }

/* how-it-connects diagram (hidden on narrow screens where labels get too small) */
.welcome-diagram { width: 100%; margin: 2px 0; }
.welcome-diagram svg { width: 100%; height: auto; display: block; }
.wd-zone { fill: var(--muted); font: 600 9px var(--font-sans); letter-spacing: 0.13em; text-transform: uppercase; }
.wd-lbl { fill: var(--text); font: 600 11px var(--font-sans); }
.wd-lbl-sm { fill: var(--muted); font: 10px var(--font-mono); }
.wd-hlbl { fill: var(--text); font: 600 11px var(--font-sans); }
.wd-node { fill: var(--panel-2); stroke: var(--border-strong); stroke-width: 1; }
.wd-hub { fill: color-mix(in srgb, var(--accent) 12%, var(--panel-2)); stroke: color-mix(in srgb, var(--accent) 55%, var(--border)); stroke-width: 1.5; }
.wd-am { fill: var(--accent); }
.wd-link { fill: none; stroke: color-mix(in srgb, var(--accent) 50%, var(--border-strong)); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.wd-dev { fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-linecap: round; }
.wd-screen { fill: color-mix(in srgb, var(--accent) 16%, var(--panel-2)); stroke: color-mix(in srgb, var(--accent) 32%, var(--border-strong)); }
.wd-glyph { fill: var(--muted); }
[data-theme="dark"] .welcome-diagram image.wd-inv-dark { filter: invert(1); }
[data-theme="light"] .welcome-diagram image.wd-inv-light { filter: invert(1); }
@media (max-width: 560px) { .welcome-diagram { display: none; } }
.welcome-head { display: flex; align-items: flex-start; gap: 13px; }
.welcome-mark { flex: none; width: 34px; height: 34px; border-radius: var(--r-lg); background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; }
.welcome-mark svg { width: 20px; height: auto; }
.welcome-head h2 { margin: 0; font-size: 17px; }
.welcome-head p { margin: 3px 0 0; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.welcome-items { display: flex; flex-direction: column; gap: 14px; }
.welcome-item { display: flex; gap: 12px; }
.welcome-ico { flex: none; width: 22px; height: 22px; border-radius: var(--r-md); background: var(--panel-2); border: 1px solid var(--border); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; }
.welcome-ico svg { width: 14px; height: 14px; }
.welcome-item-title { font-size: 13.5px; font-weight: 600; margin-bottom: 2px; }
.welcome-item-body { font-size: 12.5px; color: var(--muted); line-height: 1.55; }
.welcome-item-body b { color: var(--text); font-weight: 600; }
.welcome-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 2px; }
.welcome-reopen { font-size: 11px; color: var(--muted); }
.welcome-foot .btn-primary { flex: none; padding: 8px 18px; }

.pane-head { container-type: inline-size; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, auto) minmax(0, 1fr); align-items: center; gap: 9px; padding: 7px 11px; background: var(--panel); border-bottom: 1px solid var(--border); font-size: 12px; flex: none; }
.pane-head .ph-left { grid-column: 1; justify-self: start; display: inline-flex; align-items: center; gap: 7px; }
.pane-head .ph-title { grid-column: 2; min-width: 0; max-width: 100%; text-align: center; font-family: var(--font-mono); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: text; }
.pane-head .ph-right { grid-column: 3; min-width: 0; display: inline-flex; align-items: center; justify-self: end; gap: 6px; }
.pane-head .ph-role { flex: none; padding: 2px 6px; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); font-family: var(--font-mono); font-size: 9.5px; line-height: 1.2; }
.pane-head .ph-role.controller { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
.pane-head .ph-path { min-width: 0; max-width: min(24vw, 220px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; }
.pane-head .ph-title-input { width: 100%; text-align: center; font: inherit; font-family: var(--font-mono); font-weight: 600; padding: 1px 6px; border: 1px solid var(--accent); border-radius: var(--r-sm); background: var(--panel-2); color: var(--text); min-width: 0; }
.pane-head .ph-close { justify-self: end; }
@container (max-width: 520px) {
  .pane-head .ph-path { display: none; }
}
.slot { transition: border-color 0.15s ease-out, box-shadow 0.15s ease-out; }
/* fallback focus tint (terminal panes override with their agent's color inline) */
.slot.focused { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); box-shadow: 0 4px 18px -10px rgba(0, 0, 0, 0.35); }
.slot.focused .pane-head { background: color-mix(in srgb, var(--accent) 8%, var(--panel)); }

.term-host { flex: 1; min-height: 0; background: var(--term-bg); overflow: hidden; }
/* The grid is measured against this filler, so it must stay unpadded: FitAddon
   reads the PARENT's computed height and does NOT subtract its padding, so a
   padded parent made the grid count a row that doesn't fit and the bottom line
   rendered sliced (most visible with Codex, which paints its status line on the
   very last row). The padding lives on .xterm, which FitAddon does subtract. */
.term-fill { height: 100%; min-height: 0; }
/* mobile control-key bar: the keys a phone keyboard lacks, pinned below the
   terminal so it rides just above the on-screen keyboard */
/* position+z-index, or the bar stops responding to taps: .xterm-screen is
   position:relative, so whenever the grid is taller than its box it paints AND
   hit-tests over a statically-positioned sibling. Measured at 390px wide: at
   844px tall (iPhone 12/13/14) the screen reaches 69px past the bar's top and
   swallows every tap on it; at 851/860/873/880/896 it doesn't overlap at all.
   Height-dependent, so it looks intermittent rather than broken. Separate from
   the FitAddon padding fix — that one stopped the bottom row rendering sliced,
   it does not stop the grid from covering what sits below it. */
.term-keybar { flex: none; position: relative; z-index: 6; display: flex; gap: 5px; padding: 5px 6px; background: var(--panel); border-top: 1px solid var(--border); overflow-x: auto; }
.tk-btn { flex: 1 0 auto; min-width: 34px; height: 30px; border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--panel-2); color: var(--text); font-size: 13px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.tk-btn:active { background: color-mix(in srgb, var(--accent) 22%, var(--panel-2)); border-color: var(--accent); }
/* wider than the key glyphs (word label) and last in the row, so keep it from
   being squeezed by flex:1 on its siblings */
.tk-paste { flex: 0 0 auto; padding: 0 10px; font-size: 12px; }
/* fallback paste sheet — sits directly above the key-bar, i.e. right on top of
   the on-screen keyboard, so the field is visible while the OS menu is open */
.term-paste { flex: none; position: relative; z-index: 6; display: flex; align-items: center; gap: 8px; padding: 6px; background: var(--panel); border-top: 1px solid var(--border); }
.term-paste .tp-x { flex: none; background: none; border: none; padding: 0 2px; color: var(--accent); font: inherit; font-size: 11px; cursor: pointer; }
.term-paste .tp-input { width: 100%; box-sizing: border-box; resize: none; padding: 6px 8px; border: 1px solid var(--border-strong); border-radius: var(--r-md);
  background: var(--panel-2); color: var(--text); font-size: 13px; line-height: 1.35; }
.term-paste .tp-input:focus { outline: none; border-color: var(--accent); }
.term-host .xterm { width: 100%; height: 100%; padding: 10px 8px 8px 12px; }
.xterm .xterm-viewport { scrollbar-width: none; }
.xterm .xterm-viewport::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* main: empty states */
.empty-group { height: 100%; display: flex; align-items: center; justify-content: center; }
.empty-group.drop-over { outline: 2px dashed var(--accent); outline-offset: -10px; border-radius: var(--r-xl); }
.empty-card { width: min(420px, 90%); background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 26px; text-align: center; display: flex; flex-direction: column; gap: 14px; }
.empty-card .widget { text-align: left; }
.empty-card .empty-term { align-items: center; }
.dropline { margin-top: 2px; padding: 14px; border: 1px dashed var(--border-strong); border-radius: var(--r-lg); color: var(--muted); font-size: 12.5px; }

/* empty states speak the native language: a prompt, waiting */
.empty-term { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.et-prompt { font-size: 15px; letter-spacing: 0.01em; }
.et-user { color: var(--accent); font-weight: 600; }
.et-path { color: var(--go); font-weight: 600; }
.et-dim { color: var(--muted); }
.et-cursor { display: inline-block; width: 8px; height: 15px; margin-left: 8px; vertical-align: -2px; background: var(--accent); animation: blink 1.15s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.et-hint { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.5; }

.brand-actions { display: flex; gap: 6px; }

/* files pane — one compact header bar (logo · nav · upload · close) */
.pane-head.files-head { display: flex; align-items: center; gap: 7px; }
.files-head .spacer { flex: 1; }
.crumbs { display: flex; align-items: center; gap: 1px; overflow: hidden; white-space: nowrap; }
.crumb { background: none; border: none; color: var(--accent); cursor: pointer; font: inherit; font-size: 12px; padding: 1px 4px; border-radius: var(--r-sm); }
.crumb:hover { background: var(--panel-2); }
.crumbs .sep { color: var(--muted); }
/* upload is a <label> styled as a button — inherit size from its paired class
   (btn-ghost in Skills, mini-btn in Files); just lay it out like a button. */
.upload-btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; cursor: pointer; }
.files-body { flex: 1; min-height: 0; overflow-y: auto; padding: 6px; background: var(--term-bg); }
.files-body.drag { outline: 2px dashed var(--accent); outline-offset: -6px; }
.files-empty { color: var(--muted); font-size: 13px; padding: 22px; text-align: center; }

/* info strip under the header: where you are on the left, the facts about it on
   the right — the corner that used to be blank. */
.files-info { flex: none; container-type: inline-size; display: flex; align-items: center; gap: 10px; padding: 4px 11px; background: var(--panel-2); border-bottom: 1px solid var(--border); font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; }
.files-info .spacer { flex: 1; }
.fi-where { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-family: var(--font-mono); font-size: 10.5px; color: var(--text); }
.fi-stat { flex: none; font-variant-numeric: tabular-nums; }
.fi-stat + .fi-stat::before { content: '·'; margin-right: 7px; color: var(--border-strong); }
/* narrow tile: the strip drops its second-tier facts before it clips anything */
@container (max-width: 360px) {
  .files-info .fi-extra { display: none; }
}

/* Header and rows share one font-size (set inline on .files-stack from the
   shared zoom) so their em-based column widths line up at any zoom. */
.files-stack { flex: 1; min-height: 0; container-type: inline-size; display: flex; flex-direction: column; font-size: 13px;
  --files-gutter: 8px; }   /* the inset the rows sit in — the header matches it, see .files-cols */
.files-stack[hidden] { display: none; }           /* a class-set display beats the UA [hidden] rule */
/* column header — labels the row cells and doubles as the sort control */
.files-cols { flex: none; display: flex; align-items: center; gap: 0.4em; background: var(--panel);
  border-bottom: 1px solid var(--border);
  padding: 3px calc(0.5em + var(--files-gutter)) 3px var(--files-gutter); }
.fc-btn { background: none; border: none; padding: 0; margin: 0; font: inherit; font-size: 0.78em; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; gap: 2px; }
.fc-btn:hover { color: var(--text); }
.fc-btn.on { color: var(--accent); }
.fc-btn.tw-name { padding-left: 1.4em; }
.fc-btn.tw-size, .fc-btn.tw-time { justify-content: flex-end; color: var(--muted); }
.fc-btn.on.tw-size, .fc-btn.on.tw-time { color: var(--accent); }
.fc-arrow { width: 0.7em; }

/* tree file viewer — ASCII-style rails (font-size set inline from shared zoom) */
.files-body.tree { padding: 6px var(--files-gutter); font-size: 13px; }
.tree-row { position: relative; display: flex; align-items: center; gap: 0.4em; padding: 0.15em 0.5em 0.15em 0; border-radius: var(--r-sm); cursor: pointer; text-decoration: none; color: var(--text); white-space: nowrap; user-select: none; font-size: 1em; }
.tree-row:hover { background: var(--panel-2); }

/* one fixed-width cell per depth; lines drawn with pseudo-elements */
.rails { position: absolute; left: 0; top: 0; bottom: 0; display: flex; pointer-events: none; }
.rail { position: relative; width: 1.1em; flex: none; }
.rail.v::before,                                   /* ancestor continuation: full-height │ */
.rail.elbow::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; border-left: 1px solid var(--border); }
.rail.elbow.last::before { bottom: 50%; }          /* last child: line stops at the branch (└) */
.rail.elbow::after { content: ''; position: absolute; left: 50%; top: 50%; width: 50%; border-top: 1px solid var(--border); } /* ── branch */

.tw-ico { flex: none; width: 1.1em; height: 1.1em; color: color-mix(in srgb, var(--accent) 45%, var(--muted)); }
.tw-ico.dir { color: color-mix(in srgb, var(--accent) 80%, var(--muted)); }
.tw-name { flex: 1; overflow: hidden; text-overflow: ellipsis; }
/* right-hand columns: fixed em widths so every row (and the header) aligns */
.tw-size { color: var(--muted); font-size: 0.8em; flex: none; width: 5em; padding-left: 0.6em; text-align: right; font-variant-numeric: tabular-nums; }
.tw-time { color: var(--muted); font-size: 0.8em; flex: none; width: 6.2em; padding-left: 0.6em; text-align: right; font-variant-numeric: tabular-nums; }
.tw-act { flex: none; width: 1.6em; height: 1.3em; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: none; border: none; color: var(--muted); cursor: pointer; opacity: 0; transition: opacity 0.1s ease-out; }
.tw-act svg { width: 1em; height: 1em; }
.tree-row:hover .tw-act { opacity: 1; }
.tw-act:hover { color: var(--accent); }
.tw-act.danger:hover { color: var(--danger); }
.tw-act.ghost { pointer-events: none; }
/* One fixed column for the row actions, whatever a row happens to hold: files
   carry download+delete, folders only delete, and the header carries neither.
   Sized to two buttons and right-aligned, so Size and Modified land on the same
   x in every row and under their own headings. */
/* the folder new entries land in, and the one a drag is currently over */
.tree-row.target > .tw-name { text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; }
.tree-row.drop { background: color-mix(in srgb, var(--accent) 20%, transparent);
  outline: 1px solid var(--accent); outline-offset: -1px; }
.tree-row.moving { opacity: 0.5; }
.files-new-where { flex: none; color: var(--muted); font-size: 11px; }
.files-new strong { font-weight: 600; }

.tw-rename { flex: 1; min-width: 0; font: inherit; color: var(--text); background: var(--term-bg);
  border: 1px solid var(--accent); border-radius: var(--r-sm); padding: 0 4px; margin: -1px 0; outline: none; }

/* room for three buttons on a file row (rename, download, delete) */
.tw-acts { flex: none; width: 6.5em; display: inline-flex; align-items: center;
  justify-content: flex-end; gap: 1px; }

/* Create prompt and delete confirm: one row above the listing, where the thing
   they act on is in view. A destructive question gets the danger tint and its
   own verb — never an OK button. */
.files-new { flex: none; display: flex; align-items: center; gap: 6px; padding: 5px 10px;
  border-bottom: 1px solid var(--border); background: var(--panel); font-size: 12px; }
.files-new .tw-ico { width: 1em; height: 1em; color: var(--muted); flex: none; }
.files-new-input { flex: 1; min-width: 0; background: var(--term-bg); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--r-sm); padding: 3px 7px; font: inherit; }
.files-new-input:focus { outline: none; border-color: var(--accent); }
.files-new.danger-row { background: color-mix(in srgb, var(--danger) 8%, var(--panel)); }
.files-new.err { color: var(--danger); }
.tw-confirm { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.tw-warn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-btn.danger { background: var(--danger); color: #fff; border-color: transparent; }
.mini-btn.danger:disabled { opacity: .5; }
/* the one obvious action in a group — Create, Save and close */
.mini-btn.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.mini-btn.primary { background: var(--accent); color: var(--accent-fg); border-color: transparent; }
.mini-btn.primary:disabled { opacity: .45; }
.tree-row.selected { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.tree-row.selected .tw-name { color: var(--accent); font-weight: 600; }
.tree-msg { color: var(--muted); font-size: 0.85em; padding: 0.15em 0; }
/* a quarter-screen tile has no room for three columns — names come first */
@container (max-width: 330px) {
  .tw-time, .fc-btn.tw-time { display: none; }
}
.files-hint { flex: none; padding: 5px 10px; border-top: 1px solid var(--border); background: var(--panel); color: var(--muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- file preview (text · markdown · image · html · pdf) ---- */
.files-view { flex: 1; min-height: 0; display: flex; background: var(--term-bg); }
/* the files pane takes focus while a preview is open, purely so Esc reaches it —
   that isn't a control, so it must not draw a focus ring around the whole tile */
.slot:focus, .slot:focus-visible { outline: none; }
.fv-body { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.fv-title { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.fv-title .tw-ico { width: 13px; height: 13px; }
.fv-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono); font-weight: 600; font-size: 11.5px; }

/* code: a sticky gutter that survives horizontal scrolling of a long line */
.fv-code { flex: 1; min-height: 0; overflow: auto; display: flex; align-items: flex-start; font-family: var(--font-mono); line-height: 1.5; }
.fv-gutter, .fv-text { margin: 0; padding: 8px 0; font: inherit; }
.fv-gutter { position: sticky; left: 0; flex: none; padding-right: 10px; padding-left: 10px; text-align: right; color: color-mix(in srgb, var(--muted) 70%, transparent); background: var(--term-bg); border-right: 1px solid var(--border); user-select: none; }
.fv-text { padding-left: 12px; padding-right: 14px; color: var(--text); white-space: pre; }

/* CodeMirror sits where the <pre> pair was and inherits the same surface; the
   plain pair stays as the pre-load fallback, so the swap is invisible. */
.fv-code-host { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.fv-cm { flex: 1; min-height: 0; overflow: hidden; }
.fv-cm .cm-editor { height: 100%; }
.fv-cm .cm-editor.cm-focused { outline: none; }

/* Syntax palette. Two jobs: stay legible on --term-bg in both themes, and stay
   quiet — comments recede, strings and keywords carry the structure, everything
   else is close to body text. Tuned against WCAG AA on the pane background. */
:root {
  --cm-comment: #7b8794;
  --cm-keyword: #8250df;
  --cm-string:  #0a7c42;
  --cm-number:  #b3541e;
  --cm-fn:      #1f6feb;
  --cm-type:    #953800;
  --cm-prop:    #0550ae;
  --cm-punct:   #57606a;
  --cm-tag:     #116329;
  --cm-def:     #1f6feb;
  --cm-meta:    #6a737d;
  --cm-heading: #0550ae;
  --cm-link:    #0e7c86;
  --cm-invalid: #c2433a;
}
[data-theme='dark'] {
  --cm-comment: #7d8a97;
  --cm-keyword: #c39bff;
  --cm-string:  #6fd39b;
  --cm-number:  #ffab70;
  --cm-fn:      #79b8ff;
  --cm-type:    #ffcb8b;
  --cm-prop:    #9fc6ff;
  --cm-punct:   #9aa7b2;
  --cm-tag:     #7ee2a8;
  --cm-def:     #79b8ff;
  --cm-meta:    #8b97a0;
  --cm-heading: #9fc6ff;
  --cm-link:    #2bb3bd;
  --cm-invalid: #e0726a;
}

/* editing chrome: files are simply editable, so this is a status line rather
   than a set of controls — it says what just happened and then gets out of the
   way. Only a conflict, where the answer is genuinely the user's, has buttons. */
.fv-dirty { color: var(--accent); font-size: 15px; line-height: 1; margin-left: 1px; }
.fv-save { font-size: 11px; color: var(--muted); transition: opacity .2s; }
.fv-save.saved { color: var(--go); }
.fv-conflict { display: inline-flex; gap: 6px; align-items: center; }
.fi-err { color: var(--danger); font-size: 11px; max-width: 22em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* a trace rendered inside the file viewer: the pane's own body scrolls it, and
   the viewer's toolbar bits sit in the info strip with the other toggles */
.fv-trace-tools { display: inline-flex; gap: 6px; align-items: center; min-width: 0; }
.fv-trace-tools .tv-search { height: 20px; font-size: 11px; max-width: 12em; }
.fv-trace-tools .tv-nav .mini-btn { padding: 0 4px; }
.files-view .trace-body { flex: 1; min-height: 0; }

/* Unsaved-changes dialog: over the PANE, not the window — it belongs to the file
   you were editing, and other panes stay usable. */
.fv-modal-back { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center;
  background: color-mix(in srgb, var(--bg) 62%, transparent); backdrop-filter: blur(1.5px); }
.fv-modal { width: min(23rem, calc(100% - 2rem)); background: var(--panel); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--r-lg);
  box-shadow: 0 8px 28px #0000002e; padding: 14px 16px 12px; }
.fv-modal-title { font-weight: 600; font-size: 13px; margin-bottom: 5px; }
.fv-modal-body { font-size: 12px; color: var(--muted); line-height: 1.45; }
.fv-modal-acts { display: flex; justify-content: flex-end; gap: 6px; margin-top: 13px; }

/* pdf: our own pages, stacked on the same neutral stage as images */
.fv-pdf { flex: 1; min-height: 0; overflow: auto; background: var(--bg); }
.fv-pdf .pdf-pages { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 14px; }
.fv-pdf .pdf-page { border-radius: var(--r-sm); box-shadow: 0 1px 4px #0003; background: #fff; max-width: 100%; }

/* the shared .markdown card is defined later in this file — win on specificity */
.markdown.fv-md { flex: 1; min-height: 0; border: none; border-radius: 0; background: none; padding: 14px 18px 26px; }
.markdown.fv-md img { border-radius: var(--r-md); }

/* A light checkerboard in BOTH themes: it says "transparent" without hiding the
   dark ink of a transparent chart, which a dark stage would swallow. */
.fv-image { flex: 1; min-height: 0; overflow: auto; display: grid; place-items: center; padding: 14px;
  --checker: color-mix(in srgb, var(--tile) 90%, #5b6670);
  background-color: var(--tile);
  background-image: linear-gradient(45deg, var(--checker) 25%, transparent 25%, transparent 75%, var(--checker) 75%),
                    linear-gradient(45deg, var(--checker) 25%, transparent 25%, transparent 75%, var(--checker) 75%);
  background-size: 18px 18px; background-position: 0 0, 9px 9px; }
.fv-image img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--r-sm); box-shadow: 0 2px 14px -6px rgba(0, 0, 0, 0.4); }

.fv-frame { flex: 1; min-height: 0; width: 100%; border: none; background: #fff; }
.fv-foot { flex: none; padding: 4px 11px; border-top: 1px solid var(--border); background: var(--panel); color: var(--muted); font-size: 11px; }
.fv-foot a, .link-btn { color: var(--accent); }
.link-btn { background: none; border: none; padding: 0; font: inherit; cursor: pointer; text-decoration: underline; }

.fv-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 24px; color: var(--muted); font-size: 13px; text-align: center; }
.fv-sub { color: var(--muted); font-size: 11.5px; font-family: var(--font-mono); opacity: 0.85; }
.fv-empty .mini-btn { border: 1px solid var(--border); }

.fv-toggles { flex: none; display: inline-flex; align-items: center; gap: 8px; }
.fv-toggles .seg button { padding: 1px 8px; font-size: 10.5px; }
.fv-check { display: inline-flex; align-items: center; gap: 3px; cursor: pointer; font-size: 10.5px; }
.fv-check input { margin: 0; accent-color: var(--accent); width: 12px; height: 12px; }

/* settings */
.settings-nav { padding: 10px; display: flex; flex-direction: column; gap: 4px; }
.settings-navitem { text-align: left; background: none; border: 1px solid transparent; border-radius: var(--r-md); padding: 9px 12px; font: inherit; font-size: 13px; color: var(--text); cursor: pointer; }
.settings-navitem:hover { background: var(--panel-2); }
.settings-navitem.active { background: color-mix(in srgb, var(--accent) 12%, transparent); border-color: color-mix(in srgb, var(--accent) 30%, transparent); color: var(--accent); font-weight: 600; }
.settings-main { overflow-y: auto; }
.settings-page { max-width: 640px; margin: 0 auto; padding: 6px 4px 30px; }
.settings-page h2 { margin: 6px 0 18px; font-size: 22px; }
.settings-page h3 { margin: 24px 0 8px; font-size: 14px; }
/* plain rows, not cards: the bold label is the section header */
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 2px; }
/* right-side controls share one width so the column reads as one rail */
.setting-row > .btn-ghost, .setting-row .confirm-del { flex: none; }
/* operator config (artifacts, jobs): every control sits in the same-width
   right-hand slot so the column lines up */
.cfg-ctl { flex: none; width: 232px; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.cfg-seg { display: flex; width: 100%; }
.cfg-seg button { flex: 1; padding: 6px 0; }
.cfg-input { width: 100%; padding: 7px 10px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--panel); color: var(--text); font-size: 12.5px; }
.cfg-input:focus { outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); border-color: var(--accent); }
/* Token field: chips plus a bare input, sharing one bordered box so it reads as
   a single control rather than a list next to a textbox. */
.tagf { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--panel); }
.tagf:focus-within { border-color: var(--accent); outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); }
.tagf-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 4px 2px 7px; border-radius: var(--r-sm); background: var(--panel-2); border: 1px solid var(--border); font-size: 12px; }
.tagf-x { border: none; background: transparent; color: var(--muted); cursor: pointer; font-size: 13px; line-height: 1; padding: 0 2px; }
.tagf-x:hover { color: var(--danger); }
.tagf-input { flex: 1; min-width: 120px; border: none; background: transparent; color: var(--text); font-size: 12.5px; padding: 3px 2px; }
.tagf-input:focus { outline: none; }
.cfg-usd { color: var(--muted); }
.cfg-num { width: 90px; flex: none; text-align: right; }
/* artifacts sub-settings stay visible when off, just clearly inert */
.cfg-off { opacity: 0.45; pointer-events: none; }
.setting-row > .btn-ghost, .setting-row > a.btn-ghost { min-width: 180px; white-space: nowrap; }
a.btn-ghost { text-decoration: none; }
.s-label { font-weight: 600; font-size: 14px; }
.s-help { color: var(--muted); font-size: 12.5px; line-height: 1.5; margin: 2px 0 0; }
.s-muted { color: var(--muted); }
/* agents: one hairline row per CLI — dot · logo · name · version · state */
/* plain hairline rows — no box (sidebar voice: boundaries only where they mean something) */
.agent-rows { display: flex; flex-direction: column; margin-top: 4px; }
.agent-row { display: flex; align-items: center; gap: 10px; padding: 9px 2px; font-size: 13px; }
.agent-row + .agent-row { border-top: 1px solid var(--border); }
.agent-row .spacer { flex: 1; }
.ar-name { white-space: nowrap; font-weight: 500; }
.ar-ver { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ar-state { flex: none; width: 88px; text-align: right; font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.ar-state.ok { color: var(--go); }
/* reserved (i) slot: same width on every row, snug against the state text */
.ar-info { flex: none; width: 13px; height: 13px; margin-left: -5px; display: inline-flex; align-items: center; }
/* (i) hover hint — a small explainer card (hover or keyboard focus) */
.tip { position: relative; display: inline-flex; color: var(--muted); cursor: help; outline: none; }
.tip-i { width: 13px; height: 13px; }
.tip:hover, .tip:focus-visible { color: var(--text); }
.tip::after {
  content: attr(data-tip);
  position: absolute; right: -6px; top: calc(100% + 8px); z-index: 40;
  width: 300px; padding: 9px 11px;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-md);
  box-shadow: 0 6px 24px rgb(0 0 0 / 0.18);
  color: var(--text); font-size: 12px; line-height: 1.45; font-weight: 400;
  white-space: normal; text-align: left;
  opacity: 0; pointer-events: none; transform: translateY(-2px);
  transition: opacity 0.12s ease, transform 0.12s ease;
}
.tip:hover::after, .tip:focus-visible::after { opacity: 1; transform: none; }
.kv { display: flex; flex-direction: column; margin-top: 4px; }
.kv > div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 2px; border-bottom: 1px solid var(--border); font-size: 13px; }
.kv > div:last-child { border-bottom: none; }
.kv span { color: var(--muted); }
.kv b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 65%; }
/* Links in a kv table read as part of the value, not as web-1.0 blue: same
   restraint as .trace-hint a — inherit the text colour, hint with a dotted rule,
   and only take the accent on hover. */
.kv a { color: inherit; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 2px; }
.kv a:hover { color: var(--accent); text-decoration-style: solid; }
/* A kv used inside a setting's description sits tighter than a section-level one. */
.kv-inline { margin-top: 8px; }
.kv-inline > div { padding: 6px 2px; font-size: 12.5px; }
.placeholder { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 20px; }
.placeholder p { margin: 0 0 8px; }

/* pane layout picker + pager (in the zoombar) */
.lp { position: relative; display: inline-flex; }
.zbtn.lp-btn { width: auto; height: 22px; padding: 0 8px; gap: 6px; }
.lp-ico { width: 13px; height: 13px; display: block; flex: none; }
.lp-lbl { font-size: 11px; white-space: nowrap; }
.lp-pop { position: absolute; bottom: calc(100% + 8px); left: 0; z-index: 30; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 8px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); animation: rise-in 0.14s ease-out; }
.lp-auto { background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 6px 10px; font: inherit; font-size: 12px; color: var(--text); cursor: pointer; white-space: nowrap; }
.lp-auto:hover { border-color: var(--border-strong); }
.lp-auto.on { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.lp-grid { display: grid; grid-template-columns: repeat(3, 36px); gap: 5px; }
.lp-opt { height: 32px; display: inline-flex; align-items: center; justify-content: center; background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--r-md); color: var(--muted); cursor: pointer; }
.lp-opt:hover { border-color: var(--accent); color: var(--text); }
.lp-opt.on { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.lp-opt .lp-ico { width: 16px; height: 16px; }
.pager { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; }
.plbl { font-size: 11px; color: var(--muted); min-width: 28px; text-align: center; font-variant-numeric: tabular-nums; }

/* terminal zoom bar */
.pane-foot { display: flex; align-items: center; gap: 4px; padding: 3px 8px; background: var(--panel); border-top: 1px solid var(--border); flex: none; }
.pane-foot .spacer { flex: 1; }
.zbtn { width: 22px; height: 20px; border: 1px solid var(--border); background: var(--panel-2); color: var(--muted); border-radius: var(--r-sm); cursor: pointer; font-size: 13px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.zbtn:hover { color: var(--text); border-color: var(--border-strong); }
.zlvl { min-width: 44px; background: none; border: none; color: var(--muted); font-size: 11px; cursor: pointer; font-variant-numeric: tabular-nums; }
.zlvl:hover { color: var(--text); }

/* settings: skills editor */
.settings-page.wide { max-width: 980px; }
/* natural height — the settings page scrolls, not the preview */
.skills { display: flex; gap: 14px; margin-top: 12px; align-items: flex-start; }
.skills-list { width: 220px; flex: none; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; border-right: 1px solid var(--border); padding-right: 10px; }
.skills-actions { display: flex; gap: 6px; margin-bottom: 6px; }
.skills-actions .btn-ghost { flex: 1; text-align: center; }
.skill-item { text-align: left; background: none; border: 1px solid transparent; border-radius: var(--r-md); padding: 7px 10px; font: inherit; font-family: var(--font-mono); font-size: 12.5px; color: var(--text); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.skill-item:hover { background: var(--panel-2); }
.skill-item.active { background: color-mix(in srgb, var(--accent) 12%, transparent); border-color: color-mix(in srgb, var(--accent) 30%, transparent); color: var(--accent); }
.skills-editor { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.skills-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.skills-toolbar .spacer { flex: 1; }
.btn-ghost.danger { color: var(--danger); }
.btn-ghost.danger:hover { border-color: var(--danger); }
.btn-danger { background: var(--danger); color: #fff; border: 1px solid var(--danger); border-radius: var(--r-md); padding: 8px 12px; font-size: 13px; font-weight: 600; cursor: pointer; }
.confirm-del { display: inline-flex; align-items: center; gap: 8px; }
.confirm-del .s-muted { font-size: 12px; }
.skill-title { font-size: 13px; font-weight: 600; }
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.seg button { background: var(--panel); border: none; padding: 5px 12px; font: inherit; font-size: 12px; color: var(--muted); cursor: pointer; }
.seg button.on { background: var(--accent); color: var(--accent-fg); }
/* An unavailable option has to LOOK unavailable — `disabled` alone only stops
   the click, so a greyed-out control was still rendering as a live one. */
.seg button:disabled { opacity: 0.4; cursor: not-allowed; }
.seg button:disabled:hover { background: var(--panel); }
.skill-text { height: 62vh; width: 100%; resize: vertical; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--term-bg); color: var(--text); font-family: var(--font-mono); font-size: 13px; padding: 12px; line-height: 1.5; }
.skill-text:focus { outline: 2px solid color-mix(in srgb, var(--accent) 40%, transparent); border-color: var(--accent); }

/* rendered markdown */
.skill-view { display: flex; flex-direction: column; gap: 10px; }
.skill-view .markdown { flex: none; overflow-y: visible; }
.skill-meta { display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--border); border-radius: var(--r-lg); padding: 10px 14px; background: var(--panel-2); }
.skill-meta-row { display: flex; gap: 12px; align-items: baseline; }
.skill-meta-k { flex: none; width: 86px; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.skill-meta-v { font-size: 13.5px; color: var(--text); line-height: 1.45; min-width: 0; }
.markdown { flex: 1; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--r-lg); padding: 16px 20px; background: var(--panel); line-height: 1.6; font-size: 14px; }
.markdown > :first-child { margin-top: 0; }
.markdown h1, .markdown h2, .markdown h3, .markdown h4 { margin: 18px 0 8px; line-height: 1.25; }
.markdown h1 { font-size: 22px; } .markdown h2 { font-size: 18px; } .markdown h3 { font-size: 15px; }
.markdown p { margin: 0 0 12px; }
.markdown ul, .markdown ol { margin: 0 0 12px; padding-left: 22px; }
.markdown li { margin: 3px 0; }
.markdown code { font-family: var(--font-mono); font-size: 0.88em; background: color-mix(in srgb, var(--muted) 18%, transparent); padding: 1px 5px; border-radius: var(--r-sm); }
.markdown pre { background: var(--term-bg); border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px; overflow-x: auto; }
.markdown pre code { background: none; padding: 0; }
.markdown blockquote { margin: 0 0 12px; padding: 2px 14px; border-left: 3px solid var(--border-strong); color: var(--muted); }
.markdown a { color: var(--accent); }
.markdown table { border-collapse: collapse; margin: 0 0 12px; display: block; overflow-x: auto; }
.markdown th, .markdown td { border: 1px solid var(--border); padding: 6px 10px; }
.markdown img { max-width: 100%; }
.markdown hr { border: none; border-top: 1px solid var(--border); margin: 16px 0; }

/* usage page */
.usage { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.usage-msg { color: var(--muted); font-size: 12.5px; padding: 14px 2px; }
.usage-msg .et-cursor { height: 12px; width: 6px; margin-left: 6px; }
.usage h3 { margin: 14px 0 0; font-size: 14px; }

/* trace analytics: hairline rows, mono numbers, no card-cage */
/* wide tables scroll inside their own container, never the page */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.traces-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.traces-table th { text-align: right; font-weight: 500; color: var(--muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; padding: 6px 10px; border-bottom: 1px solid var(--border); }
.traces-table th:first-child { text-align: left; }
.traces-table td { text-align: right; padding: 7px 10px; border-bottom: 1px solid var(--border); font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.traces-table tbody tr:hover { background: var(--panel-2); }
.traces-table .tr-agent { text-align: left; display: flex; align-items: center; gap: 7px; overflow: hidden; }
.traces-table .tr-agent span { overflow: hidden; text-overflow: ellipsis; }
.traces-table .tr-when { color: var(--muted); font-size: 11px; }
.traces-table .tr-total td { font-weight: 600; border-top: 1px solid var(--border-strong); border-bottom: none; }
.usage-top { display: flex; align-items: center; gap: 8px; }
.usage-top .spacer { flex: 1; }
.usage-top .s-muted { font-size: 12px; }
.usage-top .btn-ghost { padding: 5px 10px; font-size: 12px; }
.usage-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 14px 16px; }
.usage-head { display: flex; align-items: center; gap: 9px; font-size: 14px; }
.usage-head .spacer { flex: 1; }
.usage-head .s-muted { font-size: 12px; font-variant-numeric: tabular-nums; }
.usage-stats { display: flex; gap: 28px; margin: 12px 0 4px; }
.usage-stats > div { display: flex; flex-direction: column; gap: 2px; }
.usage-stats .s-muted { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; }
.usage-stats b { font-size: 14px; font-variant-numeric: tabular-nums; }
.usage-quota { display: flex; flex-direction: column; gap: 7px; margin-top: 10px; }
.qrow { display: flex; align-items: center; gap: 10px; font-size: 12px; }
.qlabel { width: 56px; color: var(--muted); flex: none; }
.qbar { flex: 1; height: 7px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
.qfill { height: 100%; background: var(--accent); border-radius: 999px; }
.qpct { width: 130px; text-align: right; flex: none; font-variant-numeric: tabular-nums; }

/* mobile stage top bar (back + agent chips) — rendered only on mobile */
.mbar { display: flex; align-items: center; gap: 8px; padding: 0 0 8px; flex: none; }
.mback { flex: none; font-size: 19px; padding-bottom: 3px; }
/* Reading mode, in the zoom bar: the same weight as the controls beside it. */
.modebar { flex: none; margin-right: 6px; }
.modebar button { padding: 2px 8px; font-size: 10.5px; letter-spacing: 0.02em; }

.mtitle { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mchips { display: flex; gap: 6px; overflow-x: auto; flex: 1; padding: 2px; }
.mchip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-md); cursor: pointer; flex: none; }
.mchip.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }

/* phones: two full-screen views — the sidebar list, or the selected pane */
@media (max-width: 720px) {
  /* Follow the VISUAL viewport rectangle (set from window.visualViewport):
     when the on-screen keyboard opens it shrinks/moves the app so the terminal
     and control bar stay above the keyboard instead of hiding behind it. */
  html, body, #root { overflow: hidden; overscroll-behavior: none; }
  .app {
    position: fixed;
    top: var(--vv-top, 0px);
    left: var(--vv-left, 0px);
    width: var(--vvw, 100%);
    height: var(--vvh, 100dvh);
    overflow: hidden;
  }
  .term-host { touch-action: none; overscroll-behavior: contain; }
  /* Keep xterm's transparent real input at the visible prompt edge. xterm
     normally parks/moves it for desktop IME behavior; on phones this element
     is also the browser's only clue about what must remain above the OSK. */
  .term-host .xterm-helper-textarea {
    left: var(--am-input-left, 50%) !important;
    top: var(--am-input-top, calc(100% - 2px)) !important;
    width: 1px !important;
    height: 1px !important;
  }
  .app.m-home .main { display: none; }
  .app.m-home .sidebar { width: 100%; border-right: none; }
  .app.m-stage .sidebar { display: none; }
  .app.m-stage .main { padding: 8px; }
  /* touch-friendly but not airy */
  .row { padding: 6px 10px; }
  .tree { padding-top: 6px; }
  .group { margin: 13px 0 5px; }
  .row .row-actions { opacity: 1; pointer-events: auto; position: static; transform: none; margin-left: 4px; background: transparent; }
  .row .cli-logo, .row .count { opacity: 1 !important; }
  .row .age { display: none; } /* actions are always visible on touch — no room */
  .g-add { opacity: 1; }
  .caret { width: 22px; font-size: 15px; }
  /* 16px inputs stop iOS zoom-on-focus — touch devices only, so a narrow
     DESKTOP window keeps the reply line at card size */
  @media (pointer: coarse) {
    .widget input, .widget select, .row .rename, .secret-desc, .fp-input, .pane-head .ph-title-input, .ov-live textarea { font-size: 16px; }
  }
  .ov-headrow { flex-wrap: wrap; }
  /* install page: the decorative sidebar makes no sense on a phone */
  .locked-app .mock-side { display: none; }
  /* settings stacks vertically */
  .app.settings { flex-direction: column; }
  .app.settings .sidebar { width: 100%; border-right: none; border-bottom: 1px solid var(--border); }
  .app.settings .settings-nav { flex-direction: row; gap: 6px; padding: 8px 10px; }
  .app.settings .settings-main { flex: 1; }
  .settings-page { padding: 6px 12px 30px; }
  /* wide pages (usage / skills) must never scroll the whole page sideways */
  .settings-page.wide { max-width: 100%; }
  .skills { flex-direction: column; }
  .skills-list { width: 100%; border-right: none; padding-right: 0; }
  .skills-toolbar { flex-wrap: wrap; }
  .setting-row > .btn-ghost, .setting-row > a.btn-ghost { min-width: 0; }
}

/* ---- share dialog (docs/session-sharing.md) ---- */
.share-card { max-width: 480px; gap: 13px; }
.share-sub { margin: 3px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.share-modes { display: flex; gap: 7px; }
.share-modes .btn-ghost { flex: 1; }
.share-field { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; }
.share-field > span { font-weight: 600; }
.share-field input, .share-linkrow input {
  padding: 7px 9px; font-size: 13px; color: var(--text); background: var(--panel-2);
  border: 1px solid var(--border); border-radius: var(--r-md);
}
.share-field input:focus, .share-linkrow input:focus { outline: none; border-color: var(--accent); }
.share-field small, .share-dest { font-size: 11.5px; color: var(--muted); line-height: 1.5; }
.share-note { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.share-warn, .share-blocked {
  margin: 0; padding: 9px 11px; font-size: 12.5px; line-height: 1.5; border-radius: var(--r-md);
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--danger) 38%, transparent);
}
.share-ok { margin: 0; font-size: 13px; font-weight: 600; }
.share-linkrow { display: flex; gap: 7px; }
.share-linkrow input { flex: 1; min-width: 0; font-family: var(--mono, monospace); font-size: 12px; }
.share-facts { margin: 0; padding-left: 17px; font-size: 12px; color: var(--muted); line-height: 1.6; }
.share-actions { display: flex; justify-content: flex-end; gap: 7px; }
.share-actions .btn-primary { text-decoration: none; }


/* ---------- trace pane (docs/trace-panel-spec.md) ---------- */
/* Read-only session view. Laid out like .files-* (the other passive pane) and
   themed with the app's variables, so it follows light/dark like everything else
   rather than assuming a dark background. */
.pane-head.trace-head { display: flex; align-items: center; gap: 7px; }
.trace-head .spacer { flex: 1; }
.trace-head .tv-title { font-weight: 600; white-space: nowrap; }
.trace-head .tv-count, .trace-head .tv-tokens { color: var(--muted); font-size: 11px; white-space: nowrap; }
.tv-search { width: 9rem; min-width: 0; padding: 2px 6px; font: inherit; font-size: 11.5px; background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-sm); }

.trace-body { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 9px; background: var(--term-bg); }
.trace-hint { flex: none; padding: 5px 10px; border-top: 1px solid var(--border); background: var(--panel); color: var(--muted); font-size: 11px; font-family: var(--font-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.tv-msg { color: var(--muted); font-size: 0.85em; padding: 0.3em 0.1em; }

.tv-row { padding: 5px 0; border-bottom: 1px solid var(--border); }
.tv-row.placeholder { opacity: 0.25; }
/* Injected reminders and codex's intermediate (non-final) answers are context,
   not the conversation — present but visibly secondary. */
.tv-row.muted { opacity: 0.6; }

.tv-meta { display: flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--muted); }
.tv-spacer { flex: 1; }
.tv-badge { text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; padding: 0 4px; border-radius: var(--r-sm); color: var(--text); background: var(--border); }
.tv-badge.user { color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); }
.tv-badge.assistant { color: #4a9d7a; background: color-mix(in srgb, #4a9d7a 16%, transparent); }
.tv-badge.system { color: #b08650; background: color-mix(in srgb, #b08650 16%, transparent); }
.tv-chip { padding: 0 4px; border-radius: var(--r-sm); border: 1px solid var(--border); font-family: var(--font-mono); }
.tv-tokens { font-variant-numeric: tabular-nums; }
.tv-ts { font-variant-numeric: tabular-nums; }

.tv-body { margin-top: 3px; font-size: 0.95em; line-height: 1.5; }
/* A prompt or answer is a turn in a conversation, not a document: keep its
   markdown headings close to body size so one '# Heading' can't dominate the
   pane the way it did on the first real trace. */
.tv-md h1, .tv-md h2, .tv-md h3, .tv-md h4, .tv-md h5, .tv-md h6 {
  font-size: 1em; font-weight: 700; margin: 0.5em 0 0.2em;
}
.tv-md h1 { font-size: 1.12em; }
.tv-md h2 { font-size: 1.06em; }
.tv-md p, .tv-md ul, .tv-md ol { margin: 0.35em 0; }
.tv-md ul, .tv-md ol { padding-left: 1.3em; }
.tv-md > :first-child { margin-top: 0; }
.tv-md > :last-child { margin-bottom: 0; }
.tv-md table { border-collapse: collapse; }
.tv-md table td, .tv-md table th { border: 1px solid var(--border); padding: 1px 5px; }
.tv-md pre, .tv-pre { white-space: pre-wrap; word-break: break-word; margin: 3px 0; padding: 5px 7px; background: var(--panel-2); border-radius: var(--r-sm); font-family: var(--font-mono); }
/* Tool arguments and output are reference material: readable, capped, scrollable
   in place so one 20k-char result can't own the whole pane. */
.tv-pre.small { font-size: 0.85em; max-height: 22rem; overflow: auto; }
.tv-img { max-width: 100%; max-height: 20rem; border-radius: var(--r-sm); }

.tv-fold { margin: 2px 0; }
.tv-fold-head { display: flex; align-items: center; gap: 5px; width: 100%; min-width: 0; background: none; border: 0; padding: 1px 3px; font: inherit; font-size: 0.85em; color: var(--muted); cursor: pointer; text-align: left; border-radius: var(--r-sm); }
.tv-fold-head:hover { color: var(--text); background: var(--border); }
.tv-caret { flex: none; width: 0.7em; }
.tv-fold-label { flex: none; font-weight: 600; white-space: nowrap; font-family: var(--font-mono); }
.tv-fold-preview { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tv-fold.think .tv-fold-label { color: #8b73c4; }
.tv-fold.failed .tv-fold-label { color: var(--danger, #c05353); }
.tv-fold-body { padding-left: 1em; margin-left: 3px; border-left: 1px solid var(--border); }

.tv-tool-name { font-size: 0.8em; font-weight: 600; font-family: var(--font-mono); color: var(--muted); }
.tv-tool-res.failed .tv-pre { border-left: 2px solid var(--danger, #c05353); }
.tv-matches .tv-row:first-of-type { border-top: 1px solid var(--border); }

/* "Open a shared trace" — the sidebar widget that pulls a bundle off the Hub. */
.widget.open-trace { margin: 0 8px 8px; }
.open-trace-err { color: var(--danger); font-size: 11.5px; line-height: 1.4; }
.trace-hint a { color: inherit; text-decoration: underline; text-decoration-style: dotted; }
.trace-hint a:hover { color: var(--accent); }

/* Prompt navigator in the trace header. */
.tv-nav { display: inline-flex; gap: 1px; flex: none; }
.tv-nav .mini-btn { padding: 1px 5px; font-size: 10px; line-height: 1.2; }
.tv-nav .mini-btn:disabled { opacity: 0.35; cursor: default; }
.tv-nav .mini-btn:disabled:hover { background: none; color: var(--muted); }

/* The answer to a prompt, as opposed to the agent narrating its way there: an
   accent rule down the left edge, the way the Hub's own viewer marks it. In a
   turn that ran for thirty rows this is the one written for the reader. */
.tv-row.assistant.final {
  border-left: 2px solid color-mix(in srgb, #4a9d7a 70%, transparent);
  background: color-mix(in srgb, #4a9d7a 5%, transparent);
  padding-left: 8px; margin-left: -10px; padding-right: 8px;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.tv-row.user {
  border-left: 2px solid color-mix(in srgb, var(--accent) 70%, transparent);
  background: color-mix(in srgb, var(--accent) 5%, transparent);
  padding-left: 8px; margin-left: -10px; padding-right: 8px;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}

/* ---------- remote agent pane (docs/remote-agents.md §7) ----------
   Wears the terminal's clothes without being one: same mono font and palette,
   `❯` prompts, dim system lines — but it renders markdown messages, so code
   blocks and tables come out properly and there is no emulator to fight on a
   phone. The header is the standard pane grid; per-connection detail lives in
   the status row at the bottom instead, like a CLI's context line. */
.rp-body {
  flex: 1; min-height: 0; overflow-y: auto; background: var(--term-bg);
  font-family: var(--font-mono); line-height: 1.5;
  padding: 10px 12px; display: flex; flex-direction: column; gap: 7px;
}
.rp-sys { color: var(--muted); font-size: 0.92em; opacity: 0.85; }
.rp-err { color: var(--danger, #d9534f); font-size: 0.92em; }

/* The operator's turns are the landmarks when scrolling back, so they get a
   faint accent wash and a rule rather than being just another line of text. */
.rp-user {
  display: flex; gap: 7px; align-items: baseline;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border-left: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: 3px 8px 3px 6px; margin: 1px 0;
}
.rp-caret { color: var(--accent); font-weight: 700; flex: none; }
/* Not flex:1 — the tick sits immediately after the words, not pushed to the
   far edge where it reads as unrelated furniture. */
.rp-user-text { white-space: pre-wrap; word-break: break-word; min-width: 0; }
.rp-ack {
  flex: none; width: 1.15em; height: 1.15em; color: var(--accent);
  align-self: center; margin-left: 1px;
}
/* The other half of the tick: quiet, italic, and out of the way — it marks a
   normal waiting state, not a problem. */
.rp-pending {
  flex: none; font-style: italic; font-size: 0.8em; color: var(--muted);
  opacity: 0.85; margin-left: 2px; white-space: nowrap;
}

.rp-agent { padding-left: 15px; word-break: break-word; }
.rp-agent p { margin: 0 0 0.5em; }
.rp-agent p:last-child { margin-bottom: 0; }
.rp-agent pre {
  white-space: pre-wrap; word-break: break-word; margin: 5px 0;
  padding: 6px 8px; background: var(--panel-2); border-radius: var(--r-sm);
  overflow-x: auto; font-family: var(--font-mono);
}
.rp-agent code { background: var(--panel-2); border-radius: 3px; padding: 0 3px; }
.rp-agent pre code { background: none; padding: 0; }
.rp-agent ul, .rp-agent ol { margin: 0.3em 0; padding-left: 1.4em; }
.rp-agent table { border-collapse: collapse; margin: 0.4em 0; }
.rp-agent th, .rp-agent td { border: 1px solid var(--border); padding: 2px 7px; text-align: left; }

/* Composer: inherits the log's font size (set inline from zoom) so the two
   surfaces match at every zoom level. */
.rp-composer {
  display: flex; gap: 7px; align-items: baseline;
  border-top: 1px solid var(--border); padding: 8px 12px;
  background: var(--term-bg); font-family: var(--font-mono);
}
.rp-input {
  flex: 1; min-width: 0; border: none; background: none; font: inherit;
  color: var(--text); outline: none; resize: none; line-height: 1.5;
  /* height + overflow-y are set from the content (see RemotePane): one row until
     the text needs more, then growth, then scrolling at ten lines. */
  overflow-y: hidden;
}
.rp-input::placeholder { color: var(--muted); opacity: 0.7; }

/* Bottom context row: state, where the agent is, when it last spoke. */
.rp-status {
  display: flex; align-items: center; gap: 5px;
  padding: 4px 12px 5px; border-top: 1px solid var(--border);
  background: var(--panel); font-family: var(--font-mono);
  color: var(--muted); white-space: nowrap; overflow: hidden;
}
.rp-status .spacer { flex: 1; }
.rp-status > span { font-size: 0.82em; }
.rp-state.working, .rp-state.waiting { color: var(--accent); }
.rp-state.stopped { color: var(--muted); }
.rp-dot { opacity: 0.5; }
.rp-cwd { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.rp-seen { opacity: 0.8; }
.rp-hint { opacity: 0.7; padding-left: 9px; margin-left: 3px; border-left: 1px solid var(--border); }

/* Connect prompt: a popover hanging off its button, not a wall of text in the
   log. */
.rp-pop-wrap { position: relative; display: inline-flex; }
.rp-pop {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 40;
  width: min(36rem, 82vw); background: var(--panel);
  border: 1px solid var(--border-strong, var(--border));
  border-radius: var(--r-md); box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.45);
  overflow: hidden; white-space: normal; cursor: default;
}
.rp-pop-head {
  display: flex; align-items: center; gap: 6px; padding: 5px 6px 5px 9px;
  border-bottom: 1px solid var(--border); font-size: 11px; color: var(--muted);
}
.rp-pop-head .spacer { flex: 1; }
.rp-pop-prompt {
  margin: 0; padding: 9px 10px; max-height: 17em; overflow: auto;
  font-family: var(--font-mono); font-size: 11px; line-height: 1.45;
  white-space: pre-wrap; word-break: break-word; color: var(--text);
}
.rp-pop-foot {
  padding: 5px 9px; border-top: 1px solid var(--border);
  font-size: 10.5px; color: var(--muted);
}