:root {
  --deep: #0e1017; --panel: #151824; --panel-2: #1b1f2e; --raised: #232838;
  --ink: #eef0f6; --soft: #c3c7d4; --muted: #868b9c; --faint: #5b6072;
  --line: rgba(255, 255, 255, .08); --line-2: rgba(255, 255, 255, .14);
  --claude: #c7f36b; --codex: #a89cff; --kimi: #7fd7e8; --hosted: #ffab91;
  --run: #f5c451; --good: #7fd7a0; --bad: #ff7a7a;
  /* Sidebar group bands — a light blue wash that breaks the list into workspaces. */
  --group-band: rgba(126, 162, 255, .13); --group-band-hover: rgba(126, 162, 255, .2);
  --r: 14px;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--deep); color: var(--ink); font-family: var(--sans);
  font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow: hidden;
}
button { font-family: inherit; color: inherit; cursor: pointer; }
code { font-family: var(--mono); font-size: .92em; }
.eyebrow {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted);
}

/* ---------- app shell ---------- */
.app { display: grid; grid-template-columns: 296px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); height: 100dvh; }
.app-notices { grid-column: 1 / -1; grid-row: 1; display: flex; flex-direction: column; gap: 6px; max-height: 35dvh; overflow-y: auto; }
.app-notices:has(> :not([hidden])) { padding: 8px 12px; border-bottom: 1px solid var(--line); }
.app > .sidebar, .app > .main, .app > .sidebar-tab { grid-row: 2; }
.app > .sidebar { grid-column: 1; }
/* Collapse the left sidebar to a thin reopen rail to reclaim width. The rail is
   reserved in the grid (not zero-width) so its tab never floats over the room
   header — the earlier absolute tab overlapped the title/roster on a narrow
   pane. Mirrors the usage panel's collapse-to-tab pattern on the right. */
.app.sidebar-collapsed { grid-template-columns: 26px 1fr; }
.app.sidebar-collapsed .sidebar { display: none; }
.sidebar-collapse {
  margin-left: auto; background: none; border: none; color: var(--faint);
  cursor: pointer; font-size: 15px; line-height: 1; padding: 2px 4px;
}
.sidebar-collapse:hover { color: var(--text); }
.sidebar-tab {
  grid-column: 1; position: relative; width: 26px; z-index: 5;
  display: flex; align-items: center; justify-content: center;
  writing-mode: vertical-rl;
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  background: var(--panel); color: var(--muted); border: none; border-right: 1px solid var(--line); cursor: pointer;
}
.sidebar-tab[hidden] { display: none; }
.sidebar-tab:hover { color: var(--text); background: var(--raised); }
.controller-banner {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
  padding: 9px 10px 9px 14px; border: 1px solid rgba(245, 196, 81, .45);
  border-radius: 12px; background: #2b2518; color: #f7dfa2; box-shadow: 0 8px 30px rgba(0, 0, 0, .35);
  font-size: 12px;
}
.controller-banner[hidden] { display: none; }
.controller-banner .btn { padding: 6px 10px; white-space: nowrap; }

/* ---------- sidebar ---------- */
.sidebar {
  background: var(--panel); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; min-height: 0;
}
.brand { display: flex; align-items: center; gap: 10px; padding: 18px 18px 14px; }
.logo {
  width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center;
  background: linear-gradient(140deg, var(--claude), var(--codex)); color: #12131a;
  font-weight: 800; font-size: 15px;
}
.brand b { font-size: 14.5px; letter-spacing: -.01em; }
.brand small { display: block; font-family: var(--mono); font-size: 10px; color: var(--muted); letter-spacing: .04em; }
.server-version {
  display: inline-block; margin-left: 4px; color: var(--faint); font: 9px var(--mono); letter-spacing: .02em;
  vertical-align: middle;
}
.server-version.loading { color: var(--faint); }
.server-version.unknown { color: var(--hosted); }
.newbtn {
  margin: 4px 14px 12px; padding: 11px 14px; border: 1px solid var(--line-2);
  border-radius: 11px; background: var(--raised); display: flex; align-items: center;
  justify-content: space-between; gap: 8px; font-weight: 600; font-size: 13px; transition: .15s;
}
.newbtn:hover { border-color: var(--claude); background: #262c3c; }
.newbtn span:last-child { color: var(--muted); font-size: 16px; line-height: 1; }
.list-label { padding: 6px 20px; display: flex; justify-content: space-between; align-items: center; }
.conv-search-wrap {
  margin: 2px 14px 9px; display: flex; align-items: center; gap: 7px; padding: 7px 9px;
  border: 1px solid var(--line); border-radius: 9px; background: var(--panel-2); color: var(--faint);
}
.conv-search-wrap:focus-within { border-color: var(--line-2); }
.conv-search-wrap input { min-width: 0; width: 100%; border: 0; outline: 0; padding: 0; background: transparent; color: var(--ink); font: 11.5px var(--sans); }
.conv-search-wrap input::placeholder { color: var(--faint); }
.conv-search-wrap input::-webkit-search-cancel-button { display: none; }
.conv-search-wrap button { border: 0; background: none; color: var(--faint); padding: 0 2px; line-height: 1; }
.conv-search-wrap button:hover { color: var(--soft); }
.conv-list { overflow-y: auto; padding: 0 10px 12px; min-height: 0; }
.conv-group { margin-bottom: 5px; }
.conv-group-toggle {
  width: 100%; display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; align-items: center; gap: 5px;
  border: 0; border-radius: 8px; background: var(--group-band); padding: 6px 10px; margin-bottom: 3px;
  color: var(--soft); text-align: left;
  font: 9.5px var(--mono); letter-spacing: .07em; text-transform: uppercase;
}
.conv-group-toggle:hover { color: var(--ink); background: var(--group-band-hover); }
.conv-group-toggle .caret { font-size: 9px; transition: transform .12s; }
.conv-group-toggle[aria-expanded="true"] .caret { transform: rotate(90deg); }
.conv-group-toggle .group-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.conv-group-toggle .group-count { color: var(--faint); }
.conv-group-items { display: flex; flex-direction: column; gap: 2px; }
.conv-group-items[hidden] { display: none; }
.conv-group.archived { margin-top: 8px; padding-top: 7px; border-top: 1px solid var(--line); }
.conv {
  text-align: left; border: 1px solid transparent; background: none; border-radius: 10px;
  padding: 10px 12px; display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; transition: .12s; width: 100%;
}
.conv:hover { background: var(--panel-2); }
.conv.active { background: var(--panel-2); border-color: var(--line-2); }
.dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; }
.dot.run { background: var(--run); box-shadow: 0 0 0 0 rgba(245, 196, 81, .5); animation: pulse 1.8s infinite; }
.dot.good { background: var(--good); }
.dot.bad { background: var(--bad); }
.dot.off { background: var(--faint); }
.dot.idle { background: var(--codex); }
/* A room with messages you have not read yet: green and pulsing, whatever the
   run status dot would otherwise say. Status stays legible from the meta row.
   This MUST outrank every .dot.<status> rule above — same specificity, so it
   wins on source order alone and nothing below may set a dot background.
   .dot.idle used to sit 700 lines further down and silently won: every idle
   room kept its purple dot however much you had not read. Pinned by
   test/stylecascade.test.ts. */
.dot.unseen { background: var(--good); box-shadow: 0 0 0 0 rgba(127, 215, 160, .55); animation: pulse-unseen 1.8s infinite; }
.conv.unseen .t { font-weight: 700; color: var(--ink); }
@keyframes pulse-unseen { 70% { box-shadow: 0 0 0 6px rgba(127, 215, 160, 0); } 100% { box-shadow: 0 0 0 0 rgba(127, 215, 160, 0); } }
@media (prefers-reduced-motion: reduce) { .dot.run, .dot.unseen { animation: none; } }
@keyframes pulse { 70% { box-shadow: 0 0 0 6px rgba(245, 196, 81, 0); } 100% { box-shadow: 0 0 0 0 rgba(245, 196, 81, 0); } }
.conv .t {
  font-size: 13px; font-weight: 550; line-height: 1.35; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.conv .m { font-family: var(--mono); font-size: 10.5px; color: var(--muted); margin-top: 4px; letter-spacing: .02em; }
.minted-token { border: 1px solid var(--good); border-radius: 10px; padding: 12px 14px; margin: 10px 0; display: grid; gap: 8px; }
.minted-token code { word-break: break-all; user-select: all; }
.conv .needs-input {
  font-family: var(--mono); font-size: 9.5px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase;
  color: var(--run); border: 1px solid var(--run); border-radius: 6px; padding: 1px 5px; margin-left: 6px; vertical-align: 1px; white-space: nowrap;
}
.conv-empty { padding: 18px 20px; color: var(--faint); font-size: 12px; line-height: 1.6; }
.sidebar-foot {
  margin-top: auto; padding: 12px 18px; border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted);
}
.sidebar-foot .dot { margin: 0; }

/* ---------- main ---------- */
.main {
  /* Pin to the second grid track. When the sidebar collapses it is set to
     display:none and leaves the grid entirely; without this, `.main` — the
     only remaining in-flow grid item — would auto-place into the FIRST (thin
     rail) track and collapse to its min-content width instead of filling. */
  grid-column: 2;
  min-width: 0; min-height: 0; display: flex; flex-direction: column;
  background: radial-gradient(120% 80% at 100% 0, rgba(168, 156, 255, .06), transparent 60%), var(--deep);
}
.view { display: none; flex-direction: column; min-height: 0; height: 100%; position: relative; }
.view.show { display: flex; }

/* conversation header */
/* The header wraps: once the title + action group can no longer share a row —
   a narrow window, or the sidebar collapsed leaving the room pane too tight —
   the action group drops to its own line below the title/roster instead of
   overlapping them. `.chead-main`'s flex-basis keeps the title/roster readable
   and forces `.status` (never the title) to be the part that wraps. */
.chead { padding: 20px 30px 16px; border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 16px; }
/* One line, truncated at whatever room the action buttons leave. A room title
   is the first line of the opening request, so it is routinely long enough to
   wrap — and a wrapped title pushed the roster and tabs down the page on every
   room whose title ran past 52ch. */
.chead h1 { margin: 0; font-size: 19px; letter-spacing: -.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chead .sub { margin-top: 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.chip {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .03em; padding: 3px 9px;
  border-radius: 999px; border: 1px solid var(--line-2); color: var(--soft); background: var(--panel);
}
/* A member chip carries its whole control panel — model, spend, MCP inventory,
   tool policy, both context axes. Collapsed it says only who the member is;
   the detail unfolds on click. */
.chip:has(.chiptoggle) { display: inline-flex; align-items: center; }
.chiptoggle {
  border: 0; background: none; padding: 0; cursor: pointer;
  font: inherit; letter-spacing: inherit; color: inherit;
  display: inline-flex; align-items: center; gap: 4px;
}
.chiptoggle:hover { color: var(--ink); }
.chipcaret { font-size: 8px; opacity: .6; }
.chip:not(.open) .chip-detail { display: none; }
.chip.claude { color: var(--claude); border-color: rgba(199, 243, 107, .35); }
.chip.codex { color: var(--codex); border-color: rgba(168, 156, 255, .35); }
.chip.kimi { color: var(--kimi); border-color: rgba(127, 215, 232, .35); }
.chip.hosted { color: var(--hosted); border-color: rgba(255, 171, 145, .35); }
/* .chead-main is flex: 1 (basis 0), so the action group is never the thing that
   shrinks while there is room — the title absorbs it and ellipsizes. Below the
   group's own width the buttons wrap rather than overflow the header. */
.status { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.statuslbl { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--soft); white-space: nowrap; }
.btn { border: 1px solid var(--line-2); background: var(--raised); padding: 9px 15px; border-radius: 10px; font-weight: 600; font-size: 13px; transition: .15s; }
.btn:hover { border-color: var(--line-2); background: #2a3042; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.go { background: var(--claude); color: #141a08; border-color: transparent; padding: 12px 20px; }
.btn.go:hover { filter: brightness(1.05); }
.btn.go:disabled { filter: none; }

/* Conversation and graph deliberately occupy separate workspaces: the graph
   can stay expansive without displacing the transcript and composer. */
/* The git bar shares this row (see #gitpanel below), so the row must wrap on
   narrow widths and must NOT clip: the git detail dropdown escapes it.
   Deliberately no transform/filter/opacity/contain here — any of those would
   make .room-tabs a stacking context and trap the dropdown behind the feed. */
.room-tabs { position: relative; display: flex; align-items: end; flex-wrap: wrap; gap: 4px; padding: 0 30px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--panel) 78%, transparent); overflow: visible; }
.room-tab { position: relative; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--muted); padding: 10px 12px 9px; font: 600 11px var(--mono); letter-spacing: .03em; cursor: pointer; }
.room-tab:hover:not(:disabled) { color: var(--soft); background: color-mix(in srgb, var(--panel-2) 72%, transparent); }
.room-tab.on { color: var(--claude); border-bottom-color: var(--claude); }
.room-tab:disabled { cursor: not-allowed; opacity: .45; }
#conversation-pane { display: flex; flex: 1; flex-direction: column; min-height: 0; }
#conversation-pane[hidden] { display: none; }
.room-plan-pane { flex: 1; min-height: 0; overflow: auto; padding: clamp(12px, 3vw, 30px); }
.room-plan-pane[hidden] { display: none; }
.room-plan-pane > article { max-width: 860px; margin-left: auto; margin-right: auto; }
.terminal-panel { flex: 1; min-height: 0; padding: 24px 30px; overflow: hidden; }
.terminal-panel[hidden] { display: none; }
.terminal-intro { max-width: 650px; padding: 22px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); }
.terminal-intro h2 { margin: 0 0 8px; font-size: 17px; }
.terminal-intro p { color: var(--muted); margin: 0 0 18px; }
.terminal-live { height: 100%; min-height: 0; display: grid; grid-template-rows: auto 1fr auto; border: 1px solid var(--line); border-radius: var(--r); background: #090b10; overflow: hidden; }
.terminal-live[hidden] { display: none; }
.terminal-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px 8px 14px; border-bottom: 1px solid var(--line); color: var(--muted); font: 11px var(--mono); }
#terminal-output { min-height: 0; overflow: auto; margin: 0; padding: 16px; color: #d7e2d5; white-space: pre-wrap; overflow-wrap: anywhere; font: 12px/1.55 var(--mono); }
#terminal-form { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; padding: 10px; border-top: 1px solid var(--line); color: var(--good); font-family: var(--mono); }
#terminal-input { min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font: 12px var(--mono); }

/* git visibility panel */
/* #gitpanel lives INSIDE .room-tabs and is the positioning context for
   #git-detail: position:relative + z-index makes it a stacking context, so the
   dropdown's own z-index only competes inside it, and the panel as a whole sits
   above the feed and the usage tab (z 5) while staying below the login overlay
   (20) and toasts (30/80). */
/* align-self: stretch (NOT center) so the panel is exactly as tall as the tab
   row: #git-detail is anchored with top:100%, which must resolve to the row's
   bottom border. Centering it left the dropdown overlapping the tabs by ~2.5px. */
.gitpanel { position: relative; z-index: 12; display: flex; align-items: center; align-self: stretch; margin-left: auto; min-width: 0; }
.gitpanel[hidden] { display: none; }
.git-bar { display: flex; align-items: center; gap: 12px; padding: 6px 0; min-width: 0; }
.git-toggle { display: flex; align-items: center; gap: 8px; border: 0; background: none; padding: 0; font-size: 12.5px; }
.git-caret { color: var(--muted); font-size: 10px; width: 10px; transition: transform .12s; }
.git-caret.open { transform: rotate(90deg); }
.git-branch { font-family: var(--mono); font-size: 12px; color: var(--soft); }
.git-branch::before { content: "⎇ "; color: var(--muted); }
.git-stat { font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
.git-prs { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.git-pr { font-family: var(--mono); font-size: 10.5px; color: var(--good); border: 1px solid rgba(127, 215, 160, .35); border-radius: 999px; padding: 2px 9px; text-decoration: none; }
.git-pr:hover { background: rgba(127, 215, 160, .1); }
/* Parallel-blindness guard: PR merge-health from GitHub. */
.git-pr.behind { color: var(--run); border-color: rgba(245, 196, 81, .4); }
.git-pr.conflict { color: var(--bad); border-color: rgba(255, 122, 122, .45); }
.pr-health { font-family: var(--mono); font-size: 10px; border-radius: 5px; padding: 1px 6px; flex: 0 0 auto; }
.pr-health.behind { color: var(--run); border: 1px solid rgba(245, 196, 81, .4); }
.pr-health.conflict { color: var(--bad); border: 1px solid rgba(255, 122, 122, .45); }
.git-refresh { border: 0; background: none; color: var(--muted); font-size: 15px; line-height: 1; padding: 2px 4px; }
.git-refresh:hover { color: var(--soft); }
.git-refresh.spin { animation: gspin .7s linear infinite; }
@keyframes gspin { to { transform: rotate(360deg); } }
/* Dropdown, anchored to #gitpanel: opens left-aligned under the branch button
   and grows rightward over the room body. `.flip` (set from app.js when the
   panel would overhang the viewport) pins it to the right edge instead.
   min-width is clamped so a narrow window never forces a horizontal scrollbar. */
.git-detail {
  position: absolute; top: 100%; left: 0; right: auto; z-index: 1;
  min-width: min(420px, calc(100vw - 32px));
  max-width: min(760px, calc(100vw - 32px));
  max-height: 60vh; overflow: auto;
  padding: 12px 16px 16px;
  border: 1px solid var(--line); border-radius: 0 0 10px 10px;
  background: var(--raised); box-shadow: 0 12px 28px #0008;
}
.git-detail.flip { left: auto; right: 0; }
.git-detail[hidden] { display: none; }
.git-issuecount { font-family: var(--mono); font-size: 10.5px; color: var(--faint); }
.git-issues { display: grid; gap: 4px; margin-bottom: 10px; }
.issues-label { color: var(--muted); font: 10px var(--mono); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 2px; }
.git-issue { display: flex; align-items: center; gap: 8px; font-size: 12.5px; min-width: 0; }
.git-issue a { color: var(--claude); text-decoration: none; font-family: var(--mono); font-size: 11px; }
.git-issue .issue-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--soft); }
.issue-assign-ui { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.issue-assign-ui select { background: var(--panel-2); border: 1px solid var(--line); color: var(--ink); border-radius: 7px; font-size: 11px; padding: 2px 6px; }
.git-prlist { display: grid; gap: 4px; margin-bottom: 10px; }
.git-prrow { display: flex; align-items: center; gap: 8px; font-size: 12.5px; min-width: 0; }
.git-prrow a { color: var(--good); text-decoration: none; font-family: var(--mono); font-size: 11px; }
.git-prrow .issue-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--soft); }
.git-prrow .pr-draft { font: 10px var(--mono); color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 1px 6px; flex: 0 0 auto; }
.git-changes { display: flex; flex-direction: column; gap: 3px; margin-bottom: 12px; }
.git-change { font-family: var(--mono); font-size: 11.5px; color: var(--soft); }
.git-change .gc { display: inline-block; width: 20px; color: var(--run); }
.git-change .gc.a { color: var(--good); } .git-change .gc.d { color: var(--bad); } .git-change .gc.u { color: var(--muted); }
.git-clean { font-size: 12px; color: var(--muted); }
.git-diff { margin: 0; font-family: var(--mono); font-size: 11px; line-height: 1.5; color: var(--soft); white-space: pre; overflow-x: auto; }
.git-diff:empty { display: none; }
.git-diff .add { color: var(--good); }
.git-diff .del { color: var(--bad); }
.git-diff .hunk { color: var(--codex); }
.git-diff .meta { color: var(--faint); }

/* feed — the full-height conversation */
.convbody { flex: 1; display: flex; min-height: 0; }
/* The feed is a fixed frame now: the columns inside it scroll, not the frame,
   so the column controls and the thinking/activity strip stay pinned. */
.feed { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }

/* ---- column controls + side-by-side chat columns ---- */
/* Lives in .room-tabs right of the Terminal tab (index.html); align-self
   centre keeps it clear of the tabs' bottom border. */
.col-controls { display: flex; align-items: center; align-self: center; gap: 8px; padding: 0 0 2px 10px; }
.col-controls[hidden] { display: none; }
.col-controls-label { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); }
.col-count { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.col-count button { background: none; border: none; border-left: 1px solid var(--line); color: var(--muted); font-size: 12px; padding: 3px 10px; cursor: pointer; }
.col-count button:first-child { border-left: none; }
.col-count button.on { background: var(--raised); color: var(--text); }
.col-count button:hover { color: var(--text); }

.feed-columns { flex: 1; min-height: 0; display: flex; gap: 0; }
.feed-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; border-left: 1px solid var(--line); }
.feed-col:first-child { border-left: none; }
.feed-col-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 14px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--panel) 78%, transparent); min-height: 20px; }
.feed-columns.cols-1 .feed-col-head { display: none; }
.feed-col-title { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); }
.feed-col-head.dragover { background: color-mix(in srgb, var(--good) 22%, var(--panel)); }
.feed-col-head .col-hint { font-size: 11px; color: var(--faint); font-style: italic; }
.feed-col-agent { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; padding: 1px 4px 1px 7px; border: 1px solid var(--line); border-radius: 999px; color: var(--soft); }
.feed-col-agent button { background: none; border: none; color: var(--faint); cursor: pointer; font-size: 12px; line-height: 1; padding: 0 2px; }
.feed-col-agent button:hover { color: var(--text); }
.feed-col-inner { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 16px 34px; display: flex; flex-direction: column; gap: 18px; }
.feed-columns.cols-1 .feed-col-inner { padding: 18px 22px 34px; }
/* A readability ceiling only in one-column mode, where the column is the whole
   window. At 2-3 columns the column itself IS the measure, so no cap. */
.feed-columns.cols-1 .feed-col-inner > * { max-width: 1100px; width: 100%; margin-left: auto; margin-right: auto; }

/* ---- column mode toggle (Agents / Doc) ---- */
.col-mode { display: inline-flex; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; }
.col-mode button { background: none; border: none; border-left: 1px solid var(--line); color: var(--muted); font-size: 11px; padding: 2px 8px; cursor: pointer; }
.col-mode button:first-child { border-left: none; }
.col-mode button.on { background: var(--raised); color: var(--text); }
.col-mode button:hover { color: var(--text); }

/* ---- document pane: one message rendered in place as Markdown ---- */
.feed-col.doc { background: color-mix(in srgb, var(--panel) 45%, transparent); }
.feed-col-doc { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: 11px; color: var(--soft); max-width: 100%; }
.feed-col-doc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed-col-doc button { background: none; border: none; color: var(--faint); cursor: pointer; font-size: 12px; line-height: 1; padding: 0 2px; flex: none; }
.feed-col-doc button:hover { color: var(--text); }
.doc-empty { color: var(--faint); font-size: 12.5px; line-height: 1.6; }
.doc-body { color: var(--soft); font-size: 13.5px; line-height: 1.62; word-break: break-word; }
.doc-body .md-h { color: var(--text); line-height: 1.3; margin: 18px 0 8px; }
.doc-body h3.md-h { font-size: 16px; }
.doc-body h4.md-h { font-size: 14px; }
.doc-body h5.md-h { font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.doc-body > :first-child { margin-top: 0; }
.doc-body .md-p { margin: 0 0 10px; }
.doc-body .md-list { margin: 0 0 10px; padding-left: 22px; }
.doc-body .md-list li { margin: 2px 0; }
.doc-body .md-quote { margin: 0 0 10px; padding: 2px 0 2px 12px; border-left: 2px solid var(--line); color: var(--muted); }
.doc-body code { font-family: var(--mono); font-size: .92em; background: var(--raised); border-radius: 4px; padding: 1px 4px; }
.doc-body .md-pre { background: #090b10; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; overflow-x: auto; margin: 0 0 12px; }
.doc-body .md-pre code { background: none; padding: 0; font-size: 12px; }
.doc-body a { color: var(--claude); text-decoration: underline; }

/* Plan pane: the plan artifact with its approval state and verdict buttons. */
.plan-status { display: block; font-size: 11.5px; margin: 0 0 12px; padding: 6px 10px; border-radius: 7px; border: 1px solid var(--line); color: var(--muted); }
.plan-status.approved { color: #7dc98f; border-color: #2c4a34; }
.plan-status.rejected { color: #d98a8a; border-color: #4a2c2c; }
.plan-status.pending { color: #d9c07d; border-color: #4a422c; }
.plan-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.plan-body + .plan-body { margin-top: 24px; border-top: 1px solid var(--line); padding-top: 18px; }
.plan-acceptance { margin: 20px 0; padding-top: 12px; border-top: 1px solid var(--line); }
.plan-acceptance li { margin-bottom: 16px; }
.plan-acceptance .plan-check-result { margin: 6px 0; font-weight: 600; }
.plan-acceptance dl { margin: 6px 0; }
.plan-acceptance dt { font-weight: 600; }
.plan-acceptance dd { margin: 2px 0 8px; white-space: pre-wrap; overflow-wrap: anywhere; }
.plan-evidence-meta { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.plan-file-checks { margin: 20px 0; padding: 14px; border: 1px solid var(--line); border-radius: 8px; }
.plan-file-checks li { margin-bottom: 14px; }
.file-check-row { margin: 10px 0; padding: 8px; border: 1px solid var(--line); border-radius: 6px; }
.plan-file-checks summary { cursor: pointer; }
.plan-file-checks input, .plan-file-checks select { padding: 7px; background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: 6px; }
.file-check-digest { display: block; overflow-wrap: anywhere; font-size: 12px; }
.plan-field { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; font-size: 13px; }
.plan-field textarea { width: 100%; box-sizing: border-box; min-height: 60px; resize: vertical; padding: 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--ink); font: inherit; }
.plan-actions button:disabled { opacity: .5; cursor: default; }
.plan-actions button {
  font-size: 12px; padding: 5px 12px; border-radius: 7px; cursor: pointer;
  border: 1px solid var(--line); background: var(--raised); color: var(--soft);
}
.plan-actions button:hover { color: var(--ink); border-color: var(--muted); }
.plan-actions [data-plan-approve] { border-color: #2c4a34; color: #7dc98f; }
.plan-actions [data-plan-reject] { border-color: #4a2c2c; color: #d98a8a; }

/* Order tag: human turns number (1, 2, 3…); each reply within a turn gets a
   letter (1A, 1B…) so side-by-side columns stay correlated in reading order. */
.order-tag { font: 10px var(--mono); color: var(--faint); background: var(--raised); border-radius: 5px; padding: 1px 5px; letter-spacing: .04em; }

/* ---- usage panel: per-agent spend + provider-account standing ---- */
.usagebar {
  width: 240px; flex: none; overflow-y: auto;
  border-left: 1px solid var(--line); background: var(--panel);
  padding: 14px 16px 24px;
}
.usagebar[hidden] { display: none; }
.usage-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.usage-head > div:first-child { min-width: 0; }
.usage-checked { display: block; margin-top: 2px; color: var(--faint); font: 9px var(--mono); white-space: nowrap; }
.usage-actions { display: flex; align-items: center; gap: 2px; }
.usage-refresh,
.usage-close {
  background: none; border: none; color: var(--faint); cursor: pointer;
  font-size: 15px; line-height: 1; padding: 2px 4px;
}
.usage-refresh:hover, .usage-close:hover { color: var(--muted); }
.usage-refresh.spin { animation: gspin .7s linear infinite; }
.usage-tab {
  position: absolute; right: 0; top: 130px; z-index: 5;
  writing-mode: vertical-rl; padding: 10px 4px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  background: var(--panel); color: var(--muted); border: 1px solid var(--line); border-right: none;
  border-radius: 6px 0 0 6px; cursor: pointer;
}
.usage-tab:hover { color: var(--ink); }
/* Drawers use native dialog modality: Escape, focus containment and return. */
.panel-drawer { padding: 0; border: 1px solid var(--line-2); color: var(--ink); background: var(--panel); width: min(340px, calc(100vw - 36px)); max-width: none; height: 100dvh; max-height: 100dvh; margin: 0 auto 0 0; }
.panel-drawer::backdrop, .task-dialog::backdrop { background: rgba(0, 0, 0, .55); }
.panel-drawer .sidebar { height: 100%; display: flex; }
.usage-drawer { margin: 0 0 0 auto; }
.usage-drawer .usagebar { width: 100%; height: 100%; border: 0; }
.task-dialog { width: min(520px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 24px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--panel); color: var(--ink); }
.file-viewer { width: min(860px, calc(100vw - 32px)); }
.file-viewer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.file-viewer-head h2 { margin: 0; font-size: 1rem; overflow-wrap: anywhere; }
.workspace-file-source { color: var(--muted, var(--ink)); font-size: .85em; }
a.workspace-file > code { text-decoration: underline; text-underline-offset: 2px; }
.task-dialog h2 { font-size: 19px; margin: 0 0 8px; }
.task-dialog p { color: var(--soft); margin: 0 0 18px; }
.task-dialog form > label { display: grid; gap: 6px; margin: 16px 0; }
.task-dialog input:not([type=checkbox]), .task-dialog select { min-width: 0; width: 100%; font: inherit; background: var(--raised); color: var(--ink); border: 1px solid var(--line-2); border-radius: 7px; padding: 10px; }
.task-dialog fieldset { border: 1px solid var(--line-2); border-radius: 7px; margin: 16px 0; }
.dialog-check { display: flex; align-items: center; gap: 10px; padding: 8px 0; overflow-wrap: anywhere; }
.dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.task-dialog .dialog-error { color: var(--bad); }
.room-actions { position: relative; }
.room-actions > summary { list-style: none; }
.room-actions-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 25; min-width: 220px; max-width: calc(100vw - 60px); display: grid; gap: 6px; padding: 10px; background: var(--panel); border: 1px solid var(--line-2); border-radius: 10px; box-shadow: 0 8px 24px #0006; }
.room-actions:not([open]) .room-actions-menu { display: none; }
.room-actions-menu .btn { text-align: left; white-space: normal; }
.step > summary { cursor: pointer; color: var(--ink); font-weight: 600; padding: 2px 0; }
.step[open] > summary { margin-bottom: 20px; }
.disclosure-hint { margin-left: 12px; font-weight: 400; font-size: 12px; color: var(--soft); }
.setup-submit { border-top: 1px solid var(--line); padding-top: 16px; }
.to-chip small { display: block; font: 11px var(--sans); color: var(--soft); }
.agent-options { margin-top: 12px; }
.agent-options summary { color: var(--soft); font-size: 12px; cursor: pointer; }
.agent-options[open] summary { margin-bottom: 12px; }
.agent-options .agent-policy { margin-top: 12px; }
.msg-cost.needs-choice { color: var(--run); }
.convbody, .conversation-pane, .feed, .turn-body { min-width: 0; }
.feed { overflow-x: hidden; }
.bubble.md .md-table { display: block; max-width: 100%; overflow-x: auto; }
.msg-to { flex-wrap: wrap; }
.to-chips { min-width: 0; }
.to-chip { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }

.ucard { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; }
.ucard .uname { font-size: 12.5px; color: var(--soft); display: flex; align-items: center; gap: 6px; }
.ucard .uname .uprov { font-family: var(--mono); font-size: 9.5px; letter-spacing: .05em; color: var(--muted); }
.urow { display: flex; justify-content: space-between; align-items: baseline; margin-top: 7px; font-size: 11px; color: var(--muted); }
.urow .uval { font-family: var(--mono); font-size: 10.5px; color: var(--soft); }
/* Per-member lines inside the room cost card: indented and dimmer, so the
   room's own totals stay the thing you read first. */
.urow.sub { margin-top: 4px; padding-left: 9px; font-size: 10.5px; color: var(--faint); }
.urow .uunit { color: var(--faint); font-size: 9.5px; }
.ubar { height: 3px; border-radius: 2px; background: var(--line-2); margin-top: 4px; overflow: hidden; }
.ubar i { display: block; height: 100%; border-radius: 2px; background: var(--good); }

/* ---- turn/handoff graph: swimlanes per member, node size = weighted cost.
   A wide room scrolls horizontally inside the card rather than growing it. */
.roomgraph { overflow-x: auto; margin-top: 8px; }
.roomgraph svg { display: block; }
.glabel { font: 8.5px var(--mono); fill: var(--faint); }
.glane { stroke: var(--line); stroke-width: 0.5; }
.gthread { fill: none; stroke: var(--line-2); stroke-width: 1; }
.ghand { fill: none; stroke: var(--codex); stroke-width: 1; stroke-dasharray: 3 2; opacity: 0.8; }
.gnode { cursor: pointer; }
.gnode.human { fill: var(--soft); }
.gnode.cold { fill: var(--run); }
.gnode.resumed { fill: var(--good); }
.gnode.failed { fill: var(--bad); }
.gnode.retried { stroke: var(--bad); stroke-width: 1.5; stroke-dasharray: 2 2; }
.gnode:hover { opacity: 0.75; }
.glegend { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; font-size: 9.5px; color: var(--faint); }
.glegend .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 3px; vertical-align: -1px; }
.glegend .dot.cold { background: var(--run); }
.glegend .dot.resumed { background: var(--good); }
.glegend .dot.failed { background: var(--bad); }
.gleg-hand { color: var(--codex); }

/* Click-to-navigate target: a brief highlight so the jump has a landing. */
.turn.flash .bubble { animation: turnflash 1.6s ease-out; }
@keyframes turnflash {
  0% { box-shadow: 0 0 0 2px var(--codex); }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.ubar i.warn { background: var(--run); }
.ubar i.bad { background: var(--bad); }
.ustatus { margin-top: 7px; font-size: 10.5px; line-height: 1.45; }
.ustatus.ok { color: var(--muted); }
.ustatus.warn { color: var(--run); }
.ustatus.bad { color: var(--bad); }
.unote { margin-top: 8px; font-size: 10px; color: var(--faint); line-height: 1.5; }
.feed-inner { max-width: 820px; width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
/* The working indicator + activity log are a pinned status tray at the foot of
   the feed, OUTSIDE the scrolling columns, so "the room is working" stays
   readable no matter how long the transcript grows or where it is scrolled.
   A top border + panel wash separates the tray from the last message. */
.feed > .thinking:not([hidden]) {
  flex: none; box-sizing: border-box; padding: 11px 30px; margin: 0;
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 60%, transparent);
}
.feed > .activity:not([hidden]) {
  flex: none; box-sizing: border-box; margin: 0; padding: 8px 30px 12px 42px;
  border-top: none;
  background: color-mix(in srgb, var(--panel) 60%, transparent);
}
.turn { display: grid; grid-template-columns: 34px 1fr; gap: 14px; }
/* Grid items default to min-width:auto; without this a wide bubble (now that it
   fills the column) can push the track past the column and force a scrollbar. */
.turn > * { min-width: 0; }
.orb { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-weight: 800; font-size: 14px; color: #12131a; }
.orb.claude { background: var(--claude); }
.orb.codex { background: var(--codex); }
.orb.kimi { background: var(--kimi); }
.orb.hosted { background: var(--hosted); }
.orb.user { background: var(--raised); color: var(--soft); }
.turn .meta { display: flex; align-items: baseline; gap: 9px; margin-bottom: 5px; }
.turn .meta b { font-size: 13.5px; }
.role {
  font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); padding: 2px 7px; border-radius: 5px; background: var(--panel);
}
.role.crit { color: var(--hosted); }
.role.appr { color: var(--good); }
.model-ok { font-family: var(--mono); font-size: 10px; color: var(--faint); letter-spacing: .02em; }
.tok { font-family: var(--mono); font-size: 10px; color: var(--faint); letter-spacing: .02em; }
.chip.mem-warn { border-color: var(--run); }
.mem-dot { color: var(--run); font-size: 8px; vertical-align: middle; margin-left: 5px; }
.chipreset { background: none; border: none; color: var(--faint); cursor: pointer; font-size: 12px; padding: 0 0 0 4px; }
.chipreset:hover { color: var(--ink); }
.model-unverified { font-family: var(--mono); font-size: 10px; color: var(--run); letter-spacing: .02em; }
.model-warn {
  font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .02em;
  color: #2a0f08; background: var(--bad); border-radius: 5px; padding: 2px 7px;
}
.turn.mismatch .bubble { border-color: var(--bad); box-shadow: 0 0 0 1px var(--bad) inset; }
.turn.pending .bubble { opacity: .72; }
.workspace-file { color: var(--cyan); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.workspace-file:hover { color: var(--text); }
.fork-msg { border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 10px; padding: 3px 0; cursor: pointer; opacity: .55; }
.fork-msg:hover { color: var(--text); opacity: 1; }
.review-toggle { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 10px; white-space: nowrap; cursor: pointer; }
/* The composer strips native appearance from every .agent input, which left
   this checkbox with NO visible checked state — it toggled fine but looked
   dead. Give it an explicit box + checkmark so its state is always visible. */
.agent .review-toggle input[type="checkbox"] {
  appearance: none; width: 13px; height: 13px; padding: 0; margin: 0; flex: none;
  border: 1px solid var(--line-2); border-radius: 4px; background: var(--raised);
  display: inline-grid; place-content: center; cursor: pointer;
}
.agent .review-toggle input[type="checkbox"]:checked { background: var(--good); border-color: var(--good); }
.agent .review-toggle input[type="checkbox"]:checked::after { content: "✓"; font-size: 10px; line-height: 1; color: #10251a; }
.review-toggle:has(input:checked) { color: var(--good); }
.review-unavailable, .policy-unavailable { color: var(--faint); font-size: 10px; }
.policy-custom { color: var(--good); font-size: 10px; }
.policyclear { border: 0; background: none; color: var(--run); cursor: pointer; font-size: 10px; padding: 0; text-decoration: underline dotted; text-underline-offset: 2px; }
.policyclear:hover { color: var(--ink); }
/* Roster chip button: flip a member's read-only policy from inside the room. */
.chippolicy {
  border: 0; background: none; cursor: pointer; font-size: 10px; padding: 0 2px;
  color: inherit; text-decoration: underline dotted; text-underline-offset: 2px;
}
.chippolicy:hover { color: var(--ink); }
/* Plan-first toggle reads like the tool policy: quiet, underlined state. */
.chipplan {
  border: 0; background: none; cursor: pointer; font-size: 10px; padding: 0 2px;
  color: inherit; text-decoration: underline dotted; text-underline-offset: 2px;
}
.chipplan:hover { color: var(--ink); }
.chipplan.on { color: var(--claude); }
/* Context mode sits beside the tool policy and reads the same way: a quiet,
   underlined statement of what this member currently is. */
.chipcontext {
  border: 0; background: none; cursor: pointer; font-size: 10px; padding: 0 2px;
  color: inherit; text-decoration: underline dotted; text-underline-offset: 2px;
}
.chipcontext:hover { color: var(--ink); }
.policy { font-size: 10px; }
.policy-ok { color: var(--good); }
.policy-warn { color: var(--run); }
/* The four-way handoff gate inside a proposal bubble. */
.handoff-gate { margin-top: 10px; }
.gate-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
/* Fan-out batch gate: one keep/skip + editable-task row per lane. */
.fanout-lanes { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.fanout-lane { display: grid; grid-template-columns: auto 92px 1fr; gap: 7px; align-items: start; font-size: 12px; }
.fanout-lane .lane-keep { margin-top: 4px; }
.fanout-lane .lane-target { font-weight: 600; padding-top: 3px; overflow-wrap: anywhere; }
.fanout-lane .lane-task {
  width: 100%; background: var(--raised); color: inherit;
  border: 1px solid var(--line-2); border-radius: 8px; padding: 5px 8px;
  font-family: var(--sans); font-size: 12px; resize: vertical;
}
.fanout-lane:has(.lane-keep:not(:checked)) .lane-task { opacity: 0.45; text-decoration: line-through; }
/* Leftover lane worktrees in the git panel. */
.git-lane { display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 4px 0; flex-wrap: wrap; }
.git-lane .lane-path { color: var(--dim, #888); font-family: var(--mono, monospace); font-size: 11px; overflow-wrap: anywhere; }
.git-lane .lane-discard { padding: 3px 8px; font-size: 11.5px; margin-left: auto; }
.gate-buttons .btn { padding: 6px 10px; font-size: 12px; }
.gate-form .gate-text {
  width: 100%; margin-bottom: 6px; background: var(--raised); color: inherit;
  border: 1px solid var(--line-2); border-radius: 8px; padding: 6px 9px;
  font-family: var(--sans); font-size: 12.5px; resize: vertical;
}
.bubble {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 13px 15px; font-size: 13.5px; color: var(--soft);
  /* No 70ch cap: the bubble fills its column and the column owns the measure.
     min-width:0 keeps a long unbroken token from widening the flex row. */
  width: 100%; min-width: 0;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
/* Rendered-Markdown bubbles: block spacing comes from the elements, so the
   pre-wrap that plain bubbles rely on is switched off here. */
.bubble.md { white-space: normal; line-height: 1.55; }
.bubble.md > :first-child { margin-top: 0; }
.bubble.md > :last-child { margin-bottom: 0; }
.bubble.md .md-p { margin: 0 0 9px; }
.bubble.md .md-h { color: var(--text); line-height: 1.3; margin: 14px 0 6px; }
.bubble.md h3.md-h { font-size: 15px; }
.bubble.md h4.md-h { font-size: 13.5px; }
.bubble.md h5.md-h { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.bubble.md .md-list { margin: 0 0 9px; padding-left: 22px; }
.bubble.md .md-list li { margin: 2px 0; }
.bubble.md .md-quote { margin: 0 0 9px; padding: 2px 0 2px 12px; border-left: 2px solid var(--line); color: var(--muted); }
.bubble.md code { font-family: var(--mono); font-size: .92em; background: var(--raised); border-radius: 4px; padding: 1px 4px; }
.bubble.md a { color: var(--claude); text-decoration: underline; }
.bubble.md .md-code { position: relative; margin: 0 0 10px; }
.bubble.md .md-pre { background: #090b10; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin: 0; overflow-x: auto; white-space: pre; }
.bubble.md .md-pre code { background: none; padding: 0; font-size: 12px; }
.bubble.md .md-code[data-lang]::before { content: attr(data-lang); position: absolute; top: 5px; right: 52px; font: 9.5px var(--mono); color: var(--faint); letter-spacing: .04em; }
.bubble.md .md-copy {
  position: absolute; top: 4px; right: 6px; font: 10px var(--mono); letter-spacing: .04em;
  background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 5px; color: var(--faint); cursor: pointer; padding: 2px 6px;
  opacity: 0; transition: opacity .12s;
}
.bubble.md .md-code:hover .md-copy, .bubble.md .md-copy:focus-visible { opacity: 1; }
.bubble.md .md-copy:hover { color: var(--text); }
.bubble.md .md-pre .add { color: var(--good); }
.bubble.md .md-pre .del { color: var(--bad); }
.bubble.md .md-pre .hunk { color: var(--codex); }
.bubble.md .md-pre .meta { color: var(--muted); }
.feed-toggles { display: flex; gap: 14px; padding-left: 48px; margin-top: 6px; }
/* Live bubble: the reply being written, visibly provisional. */
.turn.live .bubble { border-style: dashed; border-color: var(--line-2); }
.turn.live .live-text:empty + .live-tools:empty::before { content: 'working…'; color: var(--faint); font-style: italic; }
.live-tag { color: var(--good); }
/* Tool cards: which tools a turn ran, folded under the reply. */
.tool-cards { margin-top: 10px; font-family: var(--mono); font-size: 11px; color: var(--faint); white-space: normal; }
.tool-cards summary { cursor: pointer; user-select: none; color: var(--muted); }
.tool-cards summary:hover { color: var(--text); }
.tool-card { display: flex; gap: 8px; align-items: baseline; padding: 2px 0 2px 6px; overflow-wrap: anywhere; }
.tool-card b { color: var(--soft); font-weight: 600; flex: none; }
.tool-card .tool-arg { color: var(--faint); min-width: 0; }
.tool-mark { flex: none; width: 1em; text-align: center; }
.tool-card.ok .tool-mark { color: var(--good); }
.tool-card.failed .tool-mark { color: var(--bad); }
.tool-card.failed b { color: var(--bad); }
.tool-card.running .tool-mark { color: var(--claude); }
.message-files { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; white-space: normal; }
.message-file {
  display: flex; align-items: center; gap: 8px; min-width: 150px; max-width: 250px; padding: 7px 9px;
  border: 1px solid var(--line-2); border-radius: 9px; background: var(--panel-2); color: var(--soft); text-decoration: none;
}
.message-file:hover { border-color: rgba(127,215,232,.45); }
.message-file.image { display: grid; grid-template-columns: 54px minmax(0, 1fr); padding: 5px; }
.message-file img { width: 54px; height: 44px; object-fit: cover; border-radius: 6px; background: var(--deep); }
.message-file > span:last-child { min-width: 0; }
.message-file b { display: block; font-size: 10.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.message-file small { display: block; color: var(--faint); font: 9.5px var(--mono); }
.file-icon { color: var(--kimi); font-size: 18px; }
.bubble.final { border-color: rgba(127, 215, 160, .3); background: rgba(127, 215, 160, .05); }
.feed-empty { color: var(--faint); font-size: 13px; text-align: center; margin-top: 40px; }
.thinking { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12.5px; padding-left: 48px; }
.thinking[hidden] { display: none; }
.thinking .d { display: inline-flex; gap: 3px; }
.thinking .d i { width: 5px; height: 5px; border-radius: 50%; background: var(--run); animation: blink 1.2s infinite; }
.thinking .d i:nth-child(2) { animation-delay: .2s; }
.thinking .d i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }

/* Live turn narration — deliberately quieter than a real message bubble, so a
   glance can always tell in-progress thinking from what was actually said. */
.actbtn {
  font-family: var(--mono); font-size: 10px; letter-spacing: .04em;
  background: none; border: none; color: var(--faint); cursor: pointer; padding: 0;
  text-decoration: underline; text-underline-offset: 2px;
}
.actbtn:hover { color: var(--muted); }
.activity {
  margin: 6px 0 0 48px; max-height: 190px; overflow-y: auto;
  border-left: 2px solid var(--line); padding: 2px 0 2px 12px;
  font-family: var(--mono); font-size: 11.5px; line-height: 1.55; color: var(--faint);
}
.activity[hidden] { display: none; }
.act { display: flex; gap: 8px; padding: 1px 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.act-who { color: var(--faint); opacity: .65; flex: none; }
.act-thinking .act-text { font-style: italic; }
.act-tool .act-text, .act-tool_result .act-text { color: var(--muted); }
.act-tool_result .act-text { opacity: .7; }
.act-status .act-text { opacity: .6; }
.act-text { min-width: 0; }

.addchip {
  font-family: var(--mono); font-size: 10px; letter-spacing: .04em; padding: 3px 10px; border-radius: 999px;
  border: 1px dashed var(--line-2); color: var(--soft); background: none; line-height: 1.6;
}
.addchip:hover { border-color: var(--claude); color: var(--claude); }
.addchip[hidden] { display: none; }
.sysline {
  align-self: center; font-family: var(--mono); font-size: 10.5px; letter-spacing: .05em; color: var(--muted);
  background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 5px 13px; margin: 2px 0;
}

/* bring-in-agent bar (finished conversations) */
.joinbar {
  border-top: 1px solid var(--line); padding: 14px 30px; display: flex; gap: 12px; align-items: end;
  background: var(--panel); flex-wrap: wrap; flex-shrink: 0;
  max-height: 45vh; overflow-y: auto; box-sizing: border-box;
}
.joinbar[hidden] { display: none; }
.joinbar .jlabel { font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.joinbar .sel select, .joinbar input {
  appearance: none; background: var(--raised); color: var(--ink); border: 1px solid var(--line-2);
  border-radius: 9px; padding: 8px 30px 8px 11px; font-family: var(--sans); font-size: 12.5px; cursor: pointer;
}
.joinbar input { padding: 8px 11px; cursor: text; min-width: 140px; }
.joinbar input::placeholder { color: var(--faint); }
.joinbar .grow { flex: 1; }
.joinbar .join-explain { flex-basis: 100%; }
.join-field { display: flex; flex: 1 1 170px; flex-direction: column; gap: 5px; min-width: 0; }
.join-field > span:first-child { color: var(--muted); font-size: 11px; font-weight: 600; }
.join-field .sel, .join-field select, .join-field input { width: 100%; min-width: 0; box-sizing: border-box; }
.join-field[hidden] { display: none; }
.join-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.conn-load-status { padding: 14px; margin: 16px 0; border: 1px solid var(--line-2); border-radius: 10px; color: var(--muted); font-size: 13px; }
.conn-load-status .btn { margin-left: 8px; }

/* ---------- composer ---------- */
.comp-scroll { flex: 1; overflow-y: auto; padding: 30px; }
.comp { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 26px; }
#v-comp .comp { max-width: 940px; }
.comp h1 { margin: 6px 0 2px; font-size: 26px; letter-spacing: -.02em; }
.comp .lede { color: var(--muted); margin: 0; }
.step { border: 1px solid var(--line); background: var(--panel); border-radius: var(--r); padding: 20px; }
.step-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.step-head h2 { margin: 0; font-size: 15px; letter-spacing: -.01em; }
.step-n { font-family: var(--mono); font-size: 11px; color: var(--faint); }
/* Provider preflight on the room composer: readiness + only the capacity facts
   a CLI actually exposes. Cards are also useful add/fix buttons. */
.capacity-head { align-items: flex-start; }
.capacity-head h2 { margin: 0; }
.capacity-head p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.capacity-refresh { flex: none; padding-top: 2px; }
.capacity-refresh.checking span { display: inline-block; animation: gspin .7s linear infinite; }
.capacity-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.capacity-card {
  min-width: 0; padding: 13px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--panel-2); display: flex; flex-direction: column; gap: 10px;
}
.capacity-card.selected { border-color: rgba(199,243,107,.3); box-shadow: inset 0 0 0 1px rgba(199,243,107,.04); }
.capacity-card-top { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 9px; align-items: center; }
.capacity-card .orb { width: 32px; height: 32px; border-radius: 9px; }
.capacity-name { min-width: 0; }
.capacity-name b { display: block; font-size: 13px; }
.capacity-name small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--faint); font: 9.5px var(--mono); }
.capacity-state { flex: none; border: 1px solid var(--line-2); border-radius: 99px; padding: 2px 7px; color: var(--muted); font: 9px var(--mono); white-space: nowrap; }
.capacity-state.good { color: var(--good); border-color: rgba(127,215,160,.4); }
.capacity-state.warn { color: var(--run); border-color: rgba(245,196,81,.4); }
.capacity-state.bad { color: var(--bad); border-color: rgba(255,122,122,.4); }
.capacity-main { flex: 1; min-height: 68px; }
.capacity-summary { margin: 0; color: var(--soft); font-size: 11.5px; line-height: 1.45; }
.capacity-summary strong { color: var(--ink); }
.capacity-summary.warn, .capacity-summary.warn strong { color: var(--run); }
.capacity-summary.bad, .capacity-summary.bad strong { color: var(--bad); }
.capacity-window { margin-top: 7px; }
.capacity-window-row { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 10px; }
.capacity-window-row b { color: var(--soft); font: 10px var(--mono); }
.capacity-meter { height: 4px; margin-top: 4px; overflow: hidden; border-radius: 4px; background: var(--line-2); }
.capacity-meter i { display: block; height: 100%; border-radius: inherit; background: var(--good); }
.capacity-meter i.warn { background: var(--run); }
.capacity-meter i.bad { background: var(--bad); }
.capacity-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 9px; border-top: 1px solid var(--line); }
.capacity-card-foot span { color: var(--faint); font: 9.5px var(--mono); }
.capacity-card-foot .btn { padding: 6px 9px; font-size: 10.5px; }
.capacity-foot { display: flex; justify-content: space-between; gap: 14px; margin-top: 11px; color: var(--faint); font-size: 10px; }
.capacity-foot span:last-child { text-align: right; }
/* team builder */
.team { display: flex; flex-direction: column; gap: 10px; }
.agent {
  display: flex; flex-direction: column; align-items: stretch; gap: 12px;
  padding: 16px; border: 1px solid var(--line); border-radius: 11px; background: var(--panel-2);
}
.agent-identity { display: flex; align-items: center; gap: 10px; min-width: 0; }
.agent-fields { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; min-width: 0; }
.agent-field { display: flex; flex: 1 1 150px; flex-direction: column; gap: 5px; min-width: 0; }
.agent-field > span { color: var(--muted); font-size: 11px; font-weight: 600; }
.agent-field.agent-model { flex: 2 1 230px; }
.agent-field.agent-effort { flex: 0 1 145px; }
.agent-field.agent-custom { flex: none; }
.agent-field.agent-1m { flex: none; flex-direction: row; align-items: center; gap: 6px; padding-bottom: 8px; }
.agent-field[hidden] { display: none; }
.agent-policy { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; padding-top: 10px; border-top: 1px solid var(--line); }
.agent-policy .review-toggle { font-size: 12px; }
.agent-field select, .agent-field input { width: 100%; min-width: 0; box-sizing: border-box; }
.agent .orb { flex: none; }
.agent .who { flex: 1 1 90px; }
.agent .who b { font-size: 13.5px; }
.agent .who small { display: block; color: var(--muted); font-family: var(--mono); font-size: 10.5px; }
.agent select, .agent input {
  appearance: none; background: var(--raised); color: var(--ink); border: 1px solid var(--line-2);
  border-radius: 8px; padding: 7px 9px; font-family: var(--sans); font-size: 12px;
}
.agent select { padding-right: 28px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m2 2 4 4 4-4' fill='none' stroke='%23848f9b' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; }
.agent .prov-sel { flex: none; }
.agent .model-in { flex: none; min-width: 0; }
.agent .effort-sel { flex: none; }
.agent .name-in { flex: 1 1 110px; min-width: 90px; }
.agent .rm { margin-left: auto; }
.agent .rm { flex: none; min-width: 30px; min-height: 30px; }
.agent .fieldlbl { font-family: var(--mono); font-size: 9px; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); flex: none; }
.sel { position: relative; }
.sel select, .field input, .field select {
  appearance: none; background: var(--raised); color: var(--ink); border: 1px solid var(--line-2);
  border-radius: 9px; padding: 8px 30px 8px 11px; font-family: var(--sans); font-size: 12.5px; cursor: pointer;
}
.sel::after { content: "⌄"; position: absolute; right: 11px; top: 7px; color: var(--muted); pointer-events: none; }
.rm { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line); background: none; color: var(--muted); font-size: 16px; line-height: 1; }
.rm:hover { color: var(--bad); border-color: rgba(255, 122, 122, .4); }
.rm:disabled { opacity: .35; cursor: not-allowed; }
.addagent {
  margin-top: 4px; align-self: flex-start; border: 1px dashed var(--line-2); background: none;
  color: var(--soft); padding: 10px 14px; border-radius: 10px; font-size: 12.5px; font-weight: 600;
}
.addagent:hover { border-color: var(--claude); color: var(--claude); }
.comp-foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.comp-foot .note { color: var(--muted); font-size: 12px; }
.comp-err { color: var(--hosted); font-size: 12px; min-height: 15px; }
.rounds { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--soft); }
.rounds .sel::after { top: 8px; }

::-webkit-scrollbar { width: 9px; }
::-webkit-scrollbar-thumb { background: #2a3042; border-radius: 9px; border: 2px solid var(--panel); }

/* ---------- login overlay ---------- */
.login { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; background: var(--deep); }
.login[hidden] { display: none; }
.login form {
  width: min(360px, calc(100% - 32px)); padding: 30px; border: 1px solid var(--line-2);
  border-radius: 14px; background: var(--panel);
}
.login h1 { font-size: 26px; margin: 8px 0 10px; letter-spacing: -.02em; }
.login p { color: var(--muted); font-size: 12px; line-height: 1.6; margin: 0; }
.login input {
  width: 100%; margin: 14px 0; padding: 12px; border-radius: 8px;
  border: 1px solid var(--line-2); background: var(--panel-2); color: var(--ink);
}
.login-remember { display: flex; align-items: center; gap: 8px; color: var(--soft); font-size: 12px; cursor: pointer; }
.login-remember input { width: auto; margin: 0; accent-color: var(--claude); }
.login .err { min-height: 16px; color: var(--hosted); font-size: 11px; margin: 0; }
.login button { width: 100%; border: 0; border-radius: 8px; background: var(--claude); color: #141a08; padding: 12px; font-weight: 800; }
.login #github-login-button { display: block; width: 100%; padding: 12px; text-align: center; text-decoration: none; }
.login #github-login-button[hidden] { display: none; }

/* One-line footer. NOTHING here reserves height: the row is a flex container
   whose children each collapse when empty, so an all-empty footer (no cost
   label, no counter, no command hint) is zero pixels tall. `gap` never adds
   height because it only applies between in-flow children. */
.msg-foot { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.msg-length { flex: 0 0 auto; margin-left: auto; color: var(--faint); font: 10px var(--mono); text-align: right; }
.msg-foot > :empty { display: none; }
.msg-length.near-limit { color: var(--hosted); }
.msg-command {
  flex: 0 1 auto; min-width: 0; padding: 2px 4px 0; color: var(--claude); font: 10.5px var(--mono); letter-spacing: .01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.msg-command[hidden] { display: none; }
.msg-command.invalid { color: var(--hosted); }
.msg-command-result {
  margin-top: 5px; padding: 7px 9px; border: 1px solid rgba(199, 243, 107, .28); border-radius: 8px;
  background: rgba(199, 243, 107, .06); color: var(--soft); font-size: 11px; line-height: 1.45;
}
.msg-command-result[hidden] { display: none; }
.msg-command-result.invalid { border-color: rgba(255, 184, 108, .42); background: rgba(255, 184, 108, .06); color: var(--hosted); }
#msg-text.command-mode { border-color: rgba(199, 243, 107, .68); box-shadow: 0 0 0 3px rgba(199, 243, 107, .08); }
#msg-text.command-mode.command-invalid { border-color: rgba(255, 184, 108, .78); box-shadow: 0 0 0 3px rgba(255, 184, 108, .08); }

/* ---------- toast ---------- */
.toast {
  position: fixed; bottom: 22px; left: 50%; transform: translate(-50%, 20px);
  background: var(--raised); color: var(--ink); border: 1px solid var(--line-2);
  padding: 11px 18px; border-radius: 11px; font-size: 13px; box-shadow: 0 16px 40px rgba(0, 0, 0, .45);
  opacity: 0; pointer-events: none; transition: .25s; z-index: 30; max-width: min(520px, calc(100% - 32px));
}
.toast.visible { opacity: 1; transform: translate(-50%, 0); }

/* ---------- directed-room additions ---------- */
/* Basis 320: the title/roster keep at least this much before `.status` is
   pushed to its own row, so the roster never gets crushed into a thin column. */
.chead-main { min-width: 0; flex: 1 1 320px; }
#c-title { cursor: text; }
#c-title:hover { color: #fff; }
.title-edit {
  font-size: 19px; letter-spacing: -.015em; font-family: var(--sans); font-weight: 600;
  background: var(--panel-2); color: var(--ink); border: 1px solid var(--line-2);
  border-radius: 8px; padding: 4px 8px; width: min(52ch, 100%);
}
.title-edit[hidden] { display: none; }

/* message bar (direct the room's agents) */
.msgbar { position: relative; border-top: 1px solid var(--line); padding: 12px 30px 16px; background: var(--panel); display: flex; flex-direction: column; gap: 9px; }
.msgbar[hidden] { display: none; }
.msgbar.dragging { box-shadow: inset 0 0 0 2px var(--claude); }
.msg-to { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.to-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.interaction-panel { flex: 1; min-height: 0; margin: 14px 22px 16px; border: 1px solid color-mix(in srgb, var(--claude) 22%, var(--line-2)); border-radius: 14px; background: linear-gradient(145deg, color-mix(in srgb, var(--panel) 94%, var(--claude)), var(--panel)); overflow: hidden; box-shadow: 0 10px 28px #0002; }
.interaction-panel[hidden] { display: none; }
.interaction-panel:not([hidden]) { display: flex; flex-direction: column; }
.interaction-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 14px; border-bottom: 1px solid var(--line); background: linear-gradient(90deg, rgba(153,203,255,.07), transparent 42%); }
.interaction-hint { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }
.interaction-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.interaction-actions .btn { padding: 5px 9px; font-size: 11px; }
.interaction-canvas { position: relative; flex: 1; min-height: 330px; overflow: auto; --graph-w: 760px; --graph-h: 430px; background: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--line-2) 75%, transparent) 1px, transparent 1.5px) 0 0 / 18px 18px, linear-gradient(135deg, rgba(153,203,255,.035), transparent 60%); }
.interaction-canvas.graph-linking { cursor: crosshair; }
/* In flow (not absolute) so the drawing plane is what the canvas scrolls: at
   least the viewport, at least the nodes' extent (app.js sets --graph-w/h).
   No viewBox — one SVG unit is one CSS pixel, like the node cards. */
.interaction-svg { display: block; width: 100%; height: 100%; min-width: var(--graph-w); min-height: var(--graph-h); overflow: visible; pointer-events: none; }
.graph-guide { flex-shrink: 0; margin: 0; padding: 0 14px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--panel) 80%, transparent); font-size: 12px; color: var(--soft); }
.graph-guide > summary { cursor: pointer; padding: 7px 0; color: var(--claude); font-weight: 600; font-size: 11px; letter-spacing: .03em; }
.graph-guide-body { display: grid; gap: 6px; padding: 0 0 10px; max-width: 900px; }
.graph-guide-body p, .graph-guide-body ul { margin: 0; }
.graph-guide-body ul { padding-left: 18px; display: grid; gap: 3px; }
.graph-guide-body .direct { color: var(--claude); } .graph-guide-body .helper { color: var(--codex); } .graph-guide-body .handoff { color: var(--kimi); } .graph-guide-body .observe { color: var(--run); }
/* The composer's graph tab is the same panel as the room's; the tab row is a
   flex-shrink:0 sibling above it (#v-comp is a column flexbox via .view). */
.comp-tabs { flex-shrink: 0; }
#comp-team-pane[hidden] { display: none; }
.setup-graph-panel .interaction-actions .btn.go { padding: 5px 12px; }
.walkthrough > summary { cursor: pointer; font-weight: 600; }
.walkthrough-steps { margin: 0; padding-left: 20px; display: grid; gap: 8px; color: var(--soft); font-size: 13px; }
.walkthrough-foot { margin: 12px 0 0; color: var(--muted); font-size: 12px; }
.menu-help { grid-column: 1 / -1; font-size: 11.5px; color: var(--soft); }
.menu-help > summary { cursor: pointer; color: var(--muted); padding: 2px 0; }
.menu-help p { margin: 6px 0 0; }
.interaction-svg > path { fill: none; stroke: var(--muted); stroke-width: 2.5; stroke-linecap: round; opacity: .94; filter: drop-shadow(0 1px 1px #0006); }
.interaction-svg > path.direct { stroke: var(--claude); }
.interaction-svg > path.group { stroke: var(--good); stroke-dasharray: 6 5; }
.interaction-svg > path.handoff { stroke: var(--kimi); }
.interaction-svg > path.observe { stroke: var(--run); stroke-width: 3; stroke-dasharray: 3 5; }
.interaction-svg > path.preview { stroke: var(--claude); stroke-width: 2.5; stroke-dasharray: 7 5; opacity: .82; }
.interaction-svg marker path.direct { fill: var(--claude); }
.interaction-svg marker path.group { fill: var(--good); }
.interaction-svg marker path.handoff { fill: var(--kimi); }
.interaction-svg marker path.observe { fill: var(--run); }
.interaction-svg text { pointer-events: all; fill: var(--soft); stroke: var(--panel); stroke-width: 4px; paint-order: stroke fill; font: 10px var(--mono); cursor: pointer; letter-spacing: .02em; }
.interaction-svg .graph-route-delete { fill: var(--faint); stroke: var(--panel); cursor: pointer; }
.interaction-svg .graph-route-delete:hover { fill: var(--bad); }
.graph-node { position: absolute; display: flex; flex-direction: row; align-items: center; gap: 7px; width: 164px; min-width: 164px; max-width: 164px; padding: 9px 10px; border: 1px solid var(--line-2); border-radius: 11px; background: linear-gradient(145deg, color-mix(in srgb, var(--panel-2) 90%, white 10%), var(--panel-2)); box-shadow: 0 5px 16px #0005, inset 0 1px #fff1; cursor: grab; user-select: none; transition: border-color .15s, box-shadow .15s, transform .15s; }
.graph-node:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--claude) 48%, var(--line-2)); box-shadow: 0 7px 20px #0006, inset 0 1px #fff2; }
.graph-node:active { cursor: grabbing; }
.graph-node.human { border-color: var(--claude); background: linear-gradient(145deg, rgba(153,203,255,.17), var(--panel-2)); }
.graph-node.watcher { border-color: color-mix(in srgb, var(--run) 72%, var(--line-2)); background: linear-gradient(145deg, color-mix(in srgb, var(--panel-2) 84%, var(--run)), var(--panel-2)); }
.graph-node.selected { box-shadow: 0 0 0 2px var(--claude), 0 7px 20px #0006; }
.graph-node b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.graph-node small { display: block; color: var(--muted); font-size: 10px; }
.graph-port { margin-left: auto; width: 18px; height: 18px; border: 1px solid var(--claude); border-radius: 50%; background: color-mix(in srgb, var(--panel) 72%, var(--claude)); color: var(--ink); line-height: 13px; padding: 0; cursor: crosshair; box-shadow: 0 0 0 3px rgba(153,203,255,.09); }
.graph-port:hover { transform: scale(1.13); box-shadow: 0 0 0 5px rgba(153,203,255,.14); }
.graph-remove-member { border: 0; background: none; color: var(--faint); cursor: pointer; font-size: 14px; padding: 0 0 0 2px; }
.graph-remove-member:hover { color: var(--bad); }
.graph-route-choice { border-color: var(--line-2); background: var(--panel-2); }
.graph-route-choice.on { border-color: var(--claude); color: var(--claude); background: rgba(153, 203, 255, .08); }
.graph-route-picker { position: absolute; z-index: 6; display: grid; gap: 6px; min-width: 218px; padding: 10px; border: 1px solid color-mix(in srgb, var(--claude) 55%, var(--line-2)); border-radius: 10px; background: var(--raised); box-shadow: 0 12px 28px #0008; color: var(--ink); font-size: 11px; }
.graph-route-picker b { font-size: 11px; }
.graph-route-picker label { display: grid; gap: 3px; color: var(--muted); font-size: 10px; }
.graph-route-picker select { width: 100%; border: 1px solid var(--line-2); border-radius: 6px; background: var(--panel-2); color: var(--ink); padding: 5px; font: 10px var(--sans); }
.graph-route-picker span { display: flex; justify-content: flex-end; gap: 5px; }
.graph-route-picker .btn { padding: 4px 7px; font-size: 10px; }
.observer-action { color: var(--run); border-color: color-mix(in srgb, var(--run) 42%, var(--line-2)); }
.observer-action:hover { border-color: var(--run); background: color-mix(in srgb, var(--run) 10%, var(--panel-2)); }
.graph-legend { position: absolute; left: 12px; bottom: 10px; z-index: 4; display: flex; gap: 12px; flex-wrap: wrap; padding: 6px 9px; border: 1px solid var(--line); border-radius: 999px; background: color-mix(in srgb, var(--panel) 96%, transparent); box-shadow: 0 4px 14px #0005; color: var(--muted); font: 9px var(--mono); letter-spacing: .01em; pointer-events: none; will-change: transform; }
.graph-legend .direct { color: var(--claude); }
.graph-legend .handoff { color: var(--kimi); }
.graph-legend .observe { color: var(--run); }
/* Measured 2026-09-22 (test/browser graph-tab check, 1024×700): the tab row
   with the Columns control was 1088px of content in a 964px row, so the git
   bar wrapped onto a second row and cost the height the move was meant to
   save. Below 1100px the "Columns" word goes and the tabs tighten (−129px). */
@media (max-width: 1100px) { .room-tabs .col-controls-label { display: none; } .room-tab { padding-left: 8px; padding-right: 8px; } }
@media (max-width: 850px) { .room-tabs { padding: 0 12px; } .gitpanel { margin-left: 0; flex-basis: 100%; }
  .git-detail, .git-detail.flip { left: 0; right: 0; width: auto; min-width: 0; max-width: none; }
  .interaction-head { align-items: flex-start; flex-direction: column; } .interaction-panel { margin: 12px 12px; } }
.to-chip {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .03em; padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--line-2); color: var(--muted); background: var(--panel-2); transition: .12s;
}
.to-chip.on { color: #141a08; background: var(--claude); border-color: transparent; }
.to-chip.codex.on { background: var(--codex); }
.to-chip.hosted.on { background: var(--hosted); }
.to-chip.ask-toggle, .to-chip.parallel-toggle { border-style: dashed; margin-left: 8px; }
.to-chip.ask-toggle.on, .to-chip.parallel-toggle.on { color: #141a08; background: var(--good); border-color: transparent; border-style: solid; }
.to-chip.parallel-toggle { margin-left: 4px; }
.ask-tag { font-family: var(--mono); font-size: 10px; color: var(--good); letter-spacing: .02em; }
.observer-tag { color: var(--run); }
.msg-cost { display: flex; align-items: center; flex-wrap: wrap; gap: 5px 10px; flex: 1 1 auto; min-width: 0; color: var(--faint); font-size: 10.5px; }
/* `.msg-cost` sets display:flex, which would beat the UA `[hidden]` rule and
   the `:empty` collapse above — both are restated here so a hidden or empty
   cost label really does leave the row. */
.msg-cost[hidden], .msg-cost:empty { display: none; }
.msg-cost strong { color: var(--good); font: 10.5px var(--mono); letter-spacing: .02em; }
.msg-cost.warn strong, .msg-cost.capacity-low strong { color: var(--run); }
.msg-capacity-warn { width: 100%; color: var(--run); }
.msg-row { display: flex; gap: 10px; align-items: flex-end; }
.attach-btn {
  flex: none; width: 40px; height: 40px; border: 1px solid var(--line-2); border-radius: 10px;
  background: var(--panel-2); color: var(--muted); font-size: 20px; line-height: 1;
}
.attach-btn:hover { color: var(--claude); border-color: rgba(199,243,107,.4); }
.attach-btn:disabled { opacity: .4; cursor: not-allowed; }
.plan-btn { width: auto; padding: 0 10px; font-size: 13px; }
.plan-btn[aria-pressed="true"] { color: var(--claude); border-color: rgba(199,243,107,.4); }
#msg-text {
  flex: 1; resize: none; max-height: 160px; background: var(--panel-2); border: 1px solid var(--line-2);
  border-radius: 11px; color: var(--ink); padding: 11px 13px; font-family: var(--sans); font-size: 13.5px; line-height: 1.5;
}
#msg-text::placeholder { color: var(--faint); }
#msg-text:focus { outline: none; border-color: var(--line-2); box-shadow: 0 0 0 3px rgba(199, 243, 107, .08); }
.msg-attachments { display: flex; flex-wrap: wrap; gap: 7px; }
.msg-attachments[hidden] { display: none; }
/* pinned context tray — the messages a scoped member will be pointed at */
.msg-context { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; }
.msg-context[hidden] { display: none; }
.msg-context .jlabel { font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ctx-chip {
  display: inline-flex; align-items: center; gap: 5px; max-width: 300px; overflow: hidden;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .02em; padding: 4px 6px 4px 10px; border-radius: 999px;
  border: 1px dashed var(--line-2); color: var(--soft); background: var(--panel-2); white-space: nowrap; text-overflow: ellipsis;
}
.ctx-remove { border: 0; background: none; color: var(--faint); padding: 0 2px; font-size: 13px; line-height: 1; cursor: pointer; }
.ctx-remove:hover { color: var(--text); }
.ctx-hint { color: var(--faint); font-size: 10.5px; font-style: italic; }
.pin-msg { margin-left: 10px; }
.pin-msg.on { color: var(--claude); opacity: 1; }
.pending-file {
  display: inline-flex; max-width: 280px; align-items: center; gap: 7px; border: 1px solid var(--line-2);
  background: var(--panel-2); padding: 6px 7px; border-radius: 9px; color: var(--soft); font-size: 11px;
}
.pending-file > span:nth-child(2) { min-width: 0; }
.pending-file b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.pending-file small { display: block; color: var(--faint); font: 9.5px var(--mono); }
.pending-file-icon { color: var(--kimi); font-size: 16px; }
.pending-file button { border: 0; background: none; color: var(--faint); padding: 1px 3px; font-size: 15px; }
.pending-file button:hover { color: var(--bad); }
.pending-file.uploading { color: var(--muted); }
.mini-spinner { width: 12px; height: 12px; border: 2px solid var(--line-2); border-top-color: var(--claude); border-radius: 50%; animation: gspin .8s linear infinite; }
.drop-hint {
  position: absolute; inset: 7px; z-index: 4; border: 1px dashed var(--claude); border-radius: 11px;
  background: rgba(14,16,23,.94); display: grid; place-items: center; color: var(--claude); font-weight: 650;
  pointer-events: none;
}
.drop-hint[hidden] { display: none; }

/* composer: presets, project, buttons */
.preset-list { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 13px; }
.preset-list[hidden] { display: none; }
.preset-label { font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.preset-pill { display: inline-flex; align-items: center; border: 1px solid var(--line-2); border-radius: 999px; background: var(--panel-2); overflow: hidden; }
.preset-pill:hover { border-color: var(--claude); }
.preset-pill .pill-apply { border: 0; background: none; color: var(--soft); padding: 5px 4px 5px 12px; font-size: 12px; font-weight: 600; }
.preset-pill .pill-apply:hover { color: var(--claude); }
.preset-pill .pill-rename { border: 0; background: none; color: var(--faint); padding: 5px 4px; font-size: 11px; line-height: 1; }
.preset-pill .pill-rename:hover { color: var(--soft); }
.preset-pill .pill-del { border: 0; background: none; color: var(--faint); padding: 5px 10px 5px 4px; font-size: 13px; line-height: 1; }
.preset-pill .pill-del:hover { color: var(--bad); }
.preset-pill.custom-model { border-color: var(--run); }
.preset-pill .pill-stale { color: var(--run); font-size: 11px; padding: 0 2px; cursor: help; }
.preset-actions { display: flex; align-items: center; gap: 14px; }
.preset-actions .conserve { color: var(--run); }
.capacity-warning { display: flex; gap: 8px; align-items: flex-start; border: 1px solid rgba(245,196,81,.3); background: rgba(245,196,81,.06); color: var(--run); border-radius: 10px; padding: 9px 11px; margin: 0 0 12px; font-size: 11.5px; }
.capacity-warning[hidden] { display: none; }
.capacity-warning strong { flex: none; }
.join-explain { color: var(--run); }
.agent .model-in.off-catalog { border-color: var(--run); color: var(--run); }
.linkbtn { border: 0; background: none; color: var(--claude); font-size: 12px; font-weight: 600; padding: 0; }
.linkbtn:hover { text-decoration: underline; }
.project-field { margin-bottom: 12px; }
.minilabel { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.project-field .sel select { width: 100%; }
.new-repo {
  appearance: none; background: var(--raised); color: var(--ink); border: 1px solid var(--line-2);
  border-radius: 9px; padding: 9px 11px; font-family: var(--sans); font-size: 12.5px; width: 100%; margin-top: 9px;
}
.new-repo[hidden] { display: none; }
.gh-note { font-size: 11px; color: var(--muted); margin: 8px 0 0; }
.gh-note.warn { color: var(--hosted); }
.agent .who input.nameinput {
  appearance: none; background: var(--raised); color: var(--ink); border: 1px solid var(--line-2);
  border-radius: 8px; padding: 6px 9px; font-family: var(--sans); font-size: 12.5px; width: 100%;
}
.btn.stop { background: var(--hosted); color: #3a140b; border-color: transparent; }
.btn.ghost { background: none; }
.btn.ghost:hover { background: var(--panel-2); }

/* ---------- connections (settings) ---------- */
.sidelink { border: 0; background: none; text-align: left; padding: 10px 14px; color: var(--muted); font-size: 13px; font-weight: 600; border-top: 1px solid var(--line); }
.sidelink:hover { color: var(--ink); background: var(--raised); }
.conn-summary { font-family: var(--mono); font-size: 11px; color: var(--faint); margin-left: 6px; }
#v-conn .comp { max-width: 1040px; }
#conn-list { display: flex; flex-direction: column; gap: 22px; }
/* Reuses the room-tab look, minus the room header's inset and backdrop. */
.conn-tabs { padding: 0; background: none; margin-bottom: -6px; }
.conn-section {
  border: 1px solid var(--line); border-radius: 16px; padding: 20px;
  background: linear-gradient(145deg, rgba(255,255,255,.018), transparent 45%), var(--panel);
}
.conn-section-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; margin-bottom: 16px; }
.conn-section-head h2 { margin: 3px 0 2px; font-size: 16px; letter-spacing: -.01em; }
.conn-section-head p { margin: 0; color: var(--muted); font-size: 12.5px; }
.conn-count { flex: none; font-family: var(--mono); font-size: 10px; color: var(--muted); border: 1px solid var(--line-2); background: var(--panel-2); border-radius: 99px; padding: 4px 10px; }
.conn-management-note { border: 1px solid rgba(245,196,81,.3); background: rgba(245,196,81,.06); color: var(--run); border-radius: 11px; padding: 10px 13px; font-size: 12px; }
.conn-provider-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.conn-card { min-width: 0; padding: 16px; border: 1px solid var(--line); background: var(--panel-2); border-radius: 12px; }
.conn-card h2 { display: flex; align-items: center; gap: 10px; }
.conn-card .step-head { margin-bottom: 8px; flex-wrap: wrap; }
.conn-state { font-size: 11px; font-weight: 600; font-family: var(--mono); color: var(--muted); border: 1px solid var(--line-2); border-radius: 20px; padding: 2px 9px; }
.conn-state.good { color: var(--claude); border-color: var(--claude); }
.conn-state.warn { color: var(--hosted); border-color: var(--hosted); }
/* The account a connection card is about — a name, never a credential. */
.conn-account { font-size: 11px; font-weight: 600; font-family: var(--mono); color: var(--fg); background: var(--line-2); border-radius: 20px; padding: 2px 9px; }
.conn-hint { color: var(--muted); font-size: 12px; margin: 0 0 14px; min-height: 36px; }
.conn-standing { color: var(--muted); font-size: 12px; margin: -8px 0 12px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.conn-standing.due { color: var(--soft); }
.cli-update-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 12px; font-size: 12px; color: var(--muted); }
.cli-update-row .cli-policy select { margin-left: 4px; }
.cli-update-row .cli-outcome.good { color: var(--good, var(--soft)); }
.cli-update-row .cli-outcome.warn { color: var(--run); }
.agent .model-gate { flex-basis: 100%; color: var(--muted); font-size: 11px; }
.agent .model-value { flex-basis: 100%; color: var(--muted); font-size: 11px; }
.agent .model-value.best { color: var(--good); }
.agent .model-value.beaten { color: var(--run); }
.model-data-note { margin: 6px 0 0; color: var(--muted); font-size: 11px; }
.model-data-note .model-data-warn { color: var(--run); }
.conn-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.conn-actions .btn { padding: 7px 11px; font-size: 12px; }
.conn-job { border: 1px solid var(--line-2); border-radius: 10px; padding: 14px; margin: 0 0 12px; }
/* A card walking through a live sign-in takes the full row — an OAuth flow
   with a link, a code, and an input does not fit a narrow grid column. */
.conn-card:has(.conn-open), .conn-card:has(.conn-inputrow) { grid-column: 1 / -1; }
.conn-job.err { color: var(--bad, #e66); }
.conn-job.good { color: var(--claude); }
.conn-step { margin: 0 0 10px; font-size: 13px; }
.conn-step.faint { color: var(--faint); font-size: 12px; margin: 10px 0 0; }
.conn-open { display: inline-block; margin: 0 0 12px; text-decoration: none; }
.conn-code { display: inline-block; font-family: var(--mono); font-size: 22px; letter-spacing: .12em; background: var(--raised); border: 1px solid var(--line-2); border-radius: 10px; padding: 8px 16px; margin: 0 0 12px; user-select: all; }
/* Wraps in narrow provider cards: the mono placeholder gives the input a wide
   minimum, which otherwise shoves the Submit button past the card edge. */
.conn-inputrow { display: flex; gap: 8px; flex-wrap: wrap; }
.conn-input { flex: 1 1 140px; min-width: 0; background: var(--raised); border: 1px solid var(--line-2); border-radius: 10px; padding: 9px 12px; color: var(--ink); font-family: var(--mono); }
.resource-add-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.resource-add-grid.single { grid-template-columns: minmax(0, 520px); }
.resource-add-tile {
  border: 1px dashed var(--line-2); background: rgba(255,255,255,.015); border-radius: 12px;
  padding: 15px; display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 12px;
  text-align: left; transition: .15s;
}
.resource-add-tile:hover { border-color: var(--claude); background: rgba(199,243,107,.035); transform: translateY(-1px); }
.resource-add-tile:disabled { opacity: .42; cursor: not-allowed; transform: none; }
.resource-add-icon, .resource-icon, .resource-card-icon {
  width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center;
  background: rgba(168,156,255,.12); color: var(--codex); font-size: 20px;
}
.resource-add-icon.remote, .resource-icon.remote, .resource-card-icon.remote { background: rgba(255,171,145,.1); color: var(--hosted); }
.resource-add-tile:nth-child(2) .resource-add-icon { background: rgba(127,215,232,.1); color: var(--kimi); }
.resource-add-tile b { display: block; font-size: 13px; }
.resource-add-tile small { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; }
.resource-add-tile i { font-style: normal; font-size: 18px; color: var(--muted); }
.storage-summary { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; border: 1px solid var(--line); background: rgba(255,255,255,.012); border-radius: 10px; padding: 8px 11px; margin: -4px 0 14px; color: var(--muted); font-size: 10.5px; }
.storage-summary b { color: var(--soft); font-family: var(--mono); }
.remote-agent-boundary { border: 1px solid rgba(255,171,145,.2); background: rgba(255,171,145,.045); color: var(--muted); border-radius: 10px; padding: 9px 11px; margin: -4px 0 14px; font-size: 11px; }
.remote-agent-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.remote-agent-card { min-width: 0; padding: 15px; border: 1px solid var(--line); background: var(--panel-2); border-radius: 12px; }
.remote-agent-head { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.remote-agent-head h3 { margin: 0; font-size: 13.5px; }
.remote-agent-head small { display: block; color: var(--muted); font: 10px var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.remote-agent-card > code { display: block; margin: 10px 0 0; color: var(--soft); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.remote-agent-card > p { min-height: 34px; margin: 6px 0 10px; color: var(--muted); font-size: 11px; }
.remote-agent-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; border-top: 1px solid var(--line); padding-top: 9px; color: var(--faint); font-size: 10px; }
.remote-agent-foot > span:last-child { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.remote-agent-foot button:disabled { opacity: .35; cursor: not-allowed; text-decoration: none; }
.agent-file-managed { color: var(--faint); font-size: 9.5px; }
.resource-fields .remote-clear { display: flex; align-items: center; gap: 8px; color: var(--muted); font: 11px var(--sans); }
.resource-fields .remote-clear input { width: auto; }
.resource-form { border: 1px solid rgba(199,243,107,.25); background: var(--panel-2); border-radius: 13px; padding: 17px; margin-bottom: 16px; box-shadow: 0 16px 34px rgba(0,0,0,.16); }
.resource-form-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 14px; }
.resource-form-head > div { display: flex; gap: 11px; align-items: center; }
.resource-form-head h2 { margin: 0; font-size: 15px; }
.resource-form-head .eyebrow { letter-spacing: .1em; }
.resource-close { border: 0; background: none; color: var(--muted); font-size: 20px; padding: 2px 5px; }
.resource-close:hover { color: var(--ink); }
.resource-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.resource-fields label { min-width: 0; }
.resource-fields label > span { display: block; font-family: var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-size: 9.5px; margin-bottom: 5px; }
.resource-fields label small { text-transform: none; letter-spacing: 0; color: var(--faint); }
.resource-fields input, .resource-fields select, .resource-fields textarea {
  appearance: none; width: 100%; color: var(--ink); background: var(--raised); border: 1px solid var(--line-2);
  border-radius: 9px; padding: 9px 10px; font: 12.5px var(--sans); resize: vertical;
}
.resource-fields input:focus, .resource-fields select:focus, .resource-fields textarea:focus { outline: none; border-color: rgba(199,243,107,.5); box-shadow: 0 0 0 3px rgba(199,243,107,.06); }
.resource-fields .wide { grid-column: 1 / -1; }
.resource-form-actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-top: 14px; }
.resource-form-actions .btn { padding: 8px 12px; }
.resource-safe { color: var(--faint); font-size: 10.5px; margin-left: auto; }
.resource-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
/* The icon column exists only for cards that actually carry an icon: session
   and device-token cards are body-only, and a fixed 40px first column squeezed
   their whole body into it, wrapping every line to one or two words. */
.resource-card { min-width: 0; display: grid; grid-template-columns: 1fr; gap: 12px; padding: 15px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); }
.resource-card:has(> .resource-card-icon) { grid-template-columns: 40px 1fr; }
.resource-card-icon.api { background: rgba(127,215,232,.1); color: var(--kimi); }
.resource-card-body { min-width: 0; }
.resource-card-title { display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.resource-card-title h3 { margin: 0; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resource-card-title > span { color: var(--faint); font: 9px var(--mono); border: 1px solid var(--line); border-radius: 99px; padding: 2px 6px; }
.resource-card code, .resource-card-body > a { display: block; margin: 5px 0 0; color: var(--soft); font: 11.5px var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; }
.resource-card-body > a:hover { color: var(--kimi); text-decoration: underline; }
/* Sentence case, not title case — `capitalize` turned "Never used" into
   "Never Used" and would do the same to any multi-word detail. */
.resource-detail { color: var(--muted); font-size: 11px; margin: 5px 0 0; }
.resource-detail::first-letter { text-transform: uppercase; }
.resource-notes { color: var(--soft); font-size: 11.5px; margin: 8px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.resource-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); margin-top: 11px; padding-top: 8px; }
/* A session ID is long enough to shove the Revoke button off the card; let it
   ellipsize instead, and keep the button at its natural width. */
.resource-card-foot small { color: var(--faint); font-size: 10px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resource-card-foot .linkbtn { flex: none; }
.resource-card-foot span { display: flex; gap: 10px; }
.linkbtn.danger { color: var(--bad); }
.resource-empty { grid-column: 1 / -1; border: 1px dashed var(--line); border-radius: 12px; text-align: center; padding: 24px; color: var(--muted); }
.resource-empty > span { display: block; color: var(--faint); font-size: 24px; }
.resource-empty b { display: block; color: var(--soft); font-size: 13px; margin-top: 3px; }
.resource-empty p { max-width: 52ch; margin: 4px auto 0; font-size: 11.5px; }
@media (max-width: 900px) {
  .capacity-grid { grid-template-columns: 1fr; }
  .capacity-main { min-height: 0; }
  .conn-provider-grid { grid-template-columns: 1fr; }
  .resource-grid { grid-template-columns: 1fr; }
  .remote-agent-grid { grid-template-columns: 1fr; }
}
@media (max-width: 650px) {
  .capacity-head, .capacity-foot { flex-direction: column; }
  .capacity-foot span:last-child { text-align: left; }
  .resource-add-grid, .resource-fields { grid-template-columns: 1fr; }
  .resource-fields .wide { grid-column: auto; }
  .conn-section { padding: 14px; }
  .conn-section-head { flex-direction: column; gap: 8px; }
}

.connection-banner, .install-banner {
  padding: 9px 12px; border-radius: 10px;
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
}
.install-banner { display: block; background: var(--panel); border: 1px solid var(--line); }
.notice-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding-top: 8px; }
.notice-actions span { flex: 1 1 260px; }
.app-notices summary { cursor: pointer; color: var(--soft); }
.connection-banner { background: #33291c; border: 1px solid rgba(255,171,145,.45); color: #ffd6c9; font-size: 12px; }
.install-banner { background: var(--panel-2); border: 1px solid rgba(199,243,107,.35); color: var(--soft); font-size: 12px; }
.install-banner .btn { margin-left: auto; padding: 6px 10px; }
.install-banner .linkbtn { white-space: nowrap; }
.connection-banner[hidden], .install-banner[hidden] { display: none; }
.audit-list { display: grid; gap: 7px; }
.audit-row { display: grid; grid-template-columns: auto minmax(120px, .8fr) minmax(140px, 1fr) auto; gap: 9px; align-items: center; border-top: 1px solid var(--line); padding: 8px 0; font-size: 11px; }
.audit-row b, .audit-row code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.audit-row code, .audit-row small { color: var(--muted); }
.audit-row:target, .audit-row.deep-linked { background: rgba(199,243,107,.06); outline: 1px solid rgba(199,243,107,.25); border-radius: 7px; padding-inline: 7px; }
@media (max-width: 650px) { .audit-row { grid-template-columns: auto 1fr; } .audit-row code, .audit-row small { grid-column: 2; } }

/* Native provider requests remain visible while the agent waits. */
.native-request-notice { display: flex; flex-shrink: 0; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 16px; border-bottom: 1px solid var(--line); background: var(--raised); }
.native-request-notice[hidden] { display: none; }
.parent-link { display: inline-block; margin: 0 0 4px; border: 0; background: none; padding: 0; color: var(--muted); font: 11px var(--mono); cursor: pointer; }
.parent-link:hover:not(:disabled) { color: var(--claude); text-decoration: underline; }
.parent-link:disabled { cursor: default; opacity: .7; }
.parent-link[hidden] { display: none; }
.status-detail { color: var(--muted); max-width: 32ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: bottom; }
.chip-recovery { color: var(--bad); }
.feed:has(> .native-interactions:not([hidden])) { overflow-y: auto; }
.native-interactions { display: grid; grid-auto-rows: max-content; flex-shrink: 0; gap: 12px; margin: 12px 0; min-height: 0; max-height: min(56vh, 36rem); overflow: auto; }
.native-interactions[hidden] { display: none; }
.native-interaction { border: 1px solid var(--border, #555); border-radius: 10px; padding: 16px; }
.native-interaction strong, .native-interaction label { display: block; margin-bottom: 10px; }
.native-interaction textarea { display: block; width: 100%; box-sizing: border-box; margin-top: 6px; }
.native-interaction button { margin: 4px 6px 4px 0; }
.native-interaction button[aria-pressed="true"] { background: var(--accent, #c7f36b); color: #161a12; }
.native-interaction pre { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 320px; overflow: auto; }
.native-interaction [role="status"] { display: block; margin-top: 6px; }

.local-job-row { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; padding: .7rem 0; border-bottom: 1px solid var(--line); }
.local-job-row small { width: 100%; overflow-wrap: anywhere; }
.local-job-output { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 26rem; overflow: auto; padding: .7rem; background: var(--surface); }

@media (max-width: 900px) {
  .chead { padding: 16px; }
  .chead-main { flex-basis: 100%; }
  .msgbar { padding: 12px 16px; }
}
@media (max-width: 650px) {
  .task-dialog { padding: 18px; }
  .task-dialog input:not([type=checkbox]), .task-dialog select, #msg-text { font-size: 16px; }
  .msg-row { flex-wrap: wrap; }
  .msg-row textarea { flex-basis: calc(100% - 48px); }
  #msg-send { margin-left: auto; }
  .step-head, .preset-actions, .comp-foot { flex-wrap: wrap; }
  .interaction-actions { flex-wrap: wrap; }
}
@media (max-width: 650px) {
  .comp-scroll { padding: 18px 12px; }
  .step { padding: 16px; }
  .msgbar { padding: 12px; }
  .feed-columns.cols-1 .feed-col-inner { padding: 16px 12px; }
}
/* At high zoom or low window height, keep the feed and composer reachable
   through the room's scrollbar instead of squeezing the feed to zero. */
@media (max-height: 650px) {
  .app-notices { max-height: 25dvh; }
  #v-conv { overflow-y: auto; }
  #v-conv > .chead, #v-conv > .room-tabs { flex-shrink: 0; }
  #conversation-pane { flex: 1 0 340px; }
  .msgbar { flex-shrink: 0; }
}

.msg-to[hidden] { display: none; }
#steer-row { font-size: 12px; }
#steer-target { max-width: min(320px, 65vw); padding: 6px 10px; background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 8px; }

.room-actions-menu [role="switch"][aria-checked="true"] { color: var(--claude); border-color: currentColor; }

/* Explicit automatic helper routes remain distinct from approval-gated handoffs. */
.interaction-svg > path.helper { stroke: var(--codex); stroke-width: 3; }
.interaction-svg marker path.helper { fill: var(--codex); }
.graph-legend .helper, .helper-action { color: var(--codex); }

.graph-node > span { min-width: 0; flex: 1; }
.graph-node b { display: block; }
.graph-node > button { flex-shrink: 0; }

/* Reasoning effort as a Faster -> Smarter axis. The <select> stays in the DOM
   as the value's source of truth (every existing handler still reads it); the
   slider drives it and dispatches change. When the level list cannot be placed
   on the axis — an unranked level from discovery, or fewer than two stops —
   .effort-axis is absent and the plain select shows through with a warning. */
.effort-axis { position: relative; height: 34px; display: flex; align-items: center; cursor: pointer; touch-action: none; user-select: none; }
.effort-axis .eff-track { position: absolute; inset: 0; border-radius: 17px; background: var(--panel-2); }
.effort-axis .eff-fill { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 17px; background: var(--raised); transition: width 140ms ease-out; }
.effort-axis .eff-dots { position: absolute; inset: 0; display: flex; justify-content: space-between; align-items: center; padding: 0 16px; }
.effort-axis .eff-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--muted); }
.effort-axis .eff-dot.passed { opacity: 0; }
.effort-axis .eff-thumb { position: absolute; width: 30px; height: 30px; border-radius: 15px; background: var(--raised); border: 1px solid var(--line-2); transition: left 140ms ease-out; }
.effort-axis:hover .eff-thumb { border-color: var(--soft); }
.effort-axis:focus { outline: none; }
.effort-axis:focus-visible .eff-thumb { box-shadow: 0 0 0 2px var(--claude); }
.effort-head { display: flex; align-items: baseline; gap: 8px; }
.effort-head .eff-value { font-weight: 500; text-transform: capitalize; }
.effort-head .eff-flag { margin-left: auto; font-family: var(--mono); opacity: 0.6; font-size: 11px; }
.effort-ends { display: flex; justify-content: space-between; opacity: 0.55; font-size: 11px; margin-top: 4px; }
.agent-field.agent-effort.has-axis, .join-field.has-axis { flex: 1 1 260px; }
.has-axis > .sel, .has-axis > select.effort-sel { display: none; }
.effort-warn { display: block; margin-top: 4px; font-size: 11px; color: var(--run); }
/* Tool cards with captured output: the summary row stays the compact card, the body is a capped excerpt. */
.tool-card summary { display: flex; gap: 8px; align-items: baseline; cursor: pointer; list-style: none; }
.tool-card summary::-webkit-details-marker { display: none; }
.tool-card summary:hover b { color: var(--text); }
.tool-output { max-height: 260px; overflow: auto; white-space: pre-wrap; margin: 4px 0 4px 20px; padding: 6px 8px; background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 6px; color: var(--soft); font-size: 11px; }
.tool-output-omitted { color: var(--faint); font-style: italic; }
.tool-output-link { display: inline-block; margin: 0 0 6px 20px; color: var(--muted); }
.tool-output-link:hover { color: var(--text); }
/* Reasoning summaries: collapsed above the reply, open while live; plain text, never markdown. */
.reasoning { margin: 0 0 8px; font-family: var(--mono); font-size: 11px; color: var(--faint); white-space: normal; }
.reasoning summary { cursor: pointer; user-select: none; color: var(--muted); }
.reasoning summary:hover { color: var(--text); }
.reasoning-text, .live-thinking { white-space: pre-wrap; margin: 4px 0 0; padding: 6px 8px; max-height: 240px; overflow: auto; background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 6px; color: var(--soft); font-style: italic; }
.reasoning-omitted { color: var(--faint); font-style: italic; }
.turn.live .reasoning.live[hidden] { display: none; }

.git-push { font-size: 10.5px; color: var(--run); }
.chipunbind { font-size: 10px; padding: 2px 6px; }
.plan-document { border-left: 3px solid var(--line-2); padding-left: 12px; margin: 8px 0 12px; }
.plan-document-source { color: var(--muted); font-size: .85em; }

/* Guided Conversation */
.guidedbtn { margin-top: 6px; }
.guided-banner { margin-top: 6px; padding: 6px 10px; border: 1px solid var(--line-2); border-radius: 8px; color: var(--soft); font-size: 12px; }
.guided-origin { margin: 2px 0 0; color: var(--muted); font-size: 12px; }
.proposal-card { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; padding: 8px 10px; border: 1px solid var(--line-2); border-radius: 8px; }
.guided-findings { margin: 8px 0; padding: 8px 10px; border: 1px solid var(--line-2); border-radius: 8px; font-size: 12px; color: var(--soft); }
.guided-findings ul { margin: 6px 0 0; padding-left: 0; list-style: none; }
.guided-findings .finding.error { color: var(--bad); }
.guided-findings .finding.warning { color: var(--run); }
.guided-findings .finding.ok { color: var(--good); margin: 6px 0 0; }

/* Shown when new content lands below while the reader is scrolled up (the feed no longer auto-follows). */
.jump-latest { align-self: center; margin: -44px auto 8px; position: relative; z-index: 3; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--raised); color: var(--ink); font-size: 12px; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.35); }
.jump-latest[hidden] { display: none; }