/* Ember Code — Codex-web skeleton, Ember skin.
   Ported verbatim from mockups/code-shell.html (the design of record) — see docs/port-plan.md.
   #app / .workspace-loader / #blazor-error-ui are app-hosting rules with no mock equivalent. */

:root {
  --tray: #dee4ea;
  --surface: rgba(251, 251, 251, 0.9);
  --surface-strong: #fbfbfb;
  --surface-soft: #f9fcff;
  --line: #d5d5d5;
  --line-strong: #c8c3ca;
  --text: #292929;
  --muted: #625b65;
  --faint: #918995;

  --ember: #d460a0;
  --ember-deep: #77338c;
  --ember-soft: #f5dfed;
  --ember-glow: rgba(161, 64, 144, 0.24);

  --green: #1f9d55;
  --green-soft: #e7f6ec;
  --amber: #b45309;
  --amber-soft: #fdf3df;
  --red: #b42318;
  --red-soft: #fdeceb;

  /* Engine rails — who is doing the work */
  --claude: #d97757;
  --claude-soft: #faeee8;
  --codex: #10a37f;
  --codex-soft: #e6f5f0;

  --mono: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  --ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }

#app { display: contents; }

body {
  font-family: var(--ui);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(1050px 520px at 88% -8%, rgba(212,96,160,0.13), transparent 62%),
    radial-gradient(760px 420px at -8% 108%, rgba(119,51,140,0.08), transparent 68%),
    var(--tray);
  height: 100vh;
  overflow: hidden;
  display: grid;
  grid-template-columns: 288px 1fr;
  gap: 10px;
  padding: 10px;
}

.workspace-loader {
  grid-column: 1 / -1;
  display: grid;
  place-content: center;
  min-height: calc(100vh - 20px);
  border-radius: 18px;
  color: #fbfbfb;
  background:
    radial-gradient(520px 360px at 50% 42%, rgba(161,64,144,0.2), transparent 70%),
    #141414;
}

.pill {
  min-height: 0;
  background: var(--surface);
  border: 0.5px solid rgba(255,255,255,0.9);
  border-radius: 16px;
  box-shadow: 0 8px 28px rgba(41,41,41,0.07);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ============ NAV PILL ============ */

.context { padding: 16px 14px 10px; }
.id-block {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 12px; cursor: pointer;
}
.id-block:hover { background: rgba(41,41,41,0.045); }
.id-mark {
  width: 38px; height: 38px; border-radius: 11px;
  display: grid; place-content: center;
  color: #fff; font-weight: 750; font-size: 16px; letter-spacing: -0.3px;
  background: linear-gradient(135deg, var(--ember-deep), var(--ember));
  box-shadow: 0 4px 14px var(--ember-glow);
}
.id-mark.badge-cobalt { background: linear-gradient(135deg, #2b5d8f, #4a90d9); box-shadow: 0 4px 14px rgba(74,144,217,0.24); }
.id-mark.badge-slate { background: linear-gradient(135deg, #3f4652, #6b7484); box-shadow: 0 4px 14px rgba(63,70,82,0.24); }
.id-names { flex: 1; min-width: 0; }
.id-org {
  font-size: 10.5px; font-weight: 640; letter-spacing: 0.4px;
  text-transform: uppercase; color: var(--faint);
}
.id-proj {
  font-size: 15.5px; font-weight: 700; letter-spacing: -0.2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chev { color: var(--faint); font-size: 11px; }

/* Context switcher menu */
.context { position: relative; }
.ctx-backdrop { position: fixed; inset: 0; z-index: 40; }
.ctx-menu {
  position: absolute; z-index: 50;
  top: calc(100% - 4px); left: 14px; right: -40px;
  background: var(--surface-strong);
  border: 0.5px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(41,41,41,0.18);
  padding: 8px;
  display: none;
}
.ctx-menu.open { display: block; }
.ctx-org {
  padding: 10px 10px 5px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.5px;
  text-transform: uppercase; color: var(--faint);
}
.ctx-row {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 10px; border-radius: 10px;
  font-size: 13px; font-weight: 560; cursor: pointer;
}
.ctx-row:hover { background: rgba(41,41,41,0.045); }
.ctx-mark {
  width: 26px; height: 26px; border-radius: 8px;
  display: grid; place-content: center;
  color: #fff; font-weight: 720; font-size: 12px;
  background: linear-gradient(135deg, var(--ember-deep), var(--ember));
}
.ctx-mark.badge-cobalt { background: linear-gradient(135deg, #2b5d8f, #4a90d9); }
.ctx-mark.badge-slate { background: linear-gradient(135deg, #3f4652, #6b7484); }
.ctx-sub { font-size: 10.5px; color: var(--faint); font-weight: 500; }
.ctx-row .tick { margin-left: auto; color: var(--ember); font-weight: 700; }
.ctx-divider { height: 0.5px; background: var(--line); margin: 7px 6px; }
.ctx-row.inert { color: var(--muted); }
.ctx-row .end { margin-left: auto; color: var(--faint); font-size: 12px; }

/* Honest-empty lines in the rail — the switcher with no orgs to list, a nav group with nothing in
   it. Deliberately quieter than a real row: an empty state should read as an absence, not as an
   item. */
.ctx-empty { padding: 8px 10px; font-size: 12.5px; color: var(--faint); }
.nav-empty { padding: 4px 10px 2px; font-size: 12.5px; color: var(--faint); }

.nav-scroll { flex: 1; overflow-y: auto; padding: 4px 14px; }
.nav-group {
  padding: 20px 10px 6px;
  font-size: 10.5px; font-weight: 680; letter-spacing: 0.5px;
  text-transform: uppercase; color: var(--faint);
  display: flex; align-items: center;
}
.nav-group .add { margin-left: auto; cursor: pointer; font-size: 12px; }
.nav-item {
  display: flex; align-items: center; gap: 9px;
  padding: 7.5px 10px; border-radius: 10px;
  font-size: 13.5px; font-weight: 520; color: var(--text);
  text-decoration: none; cursor: pointer;
}
.nav-item:hover { background: rgba(41,41,41,0.045); }
.nav-item.active {
  background: linear-gradient(135deg, rgba(119,51,140,0.10), rgba(212,96,160,0.12));
  font-weight: 650;
}
.nav-glyph { width: 18px; text-align: center; font-size: 14px; }
.nav-badge {
  margin-left: auto;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  display: grid; place-content: center;
  background: linear-gradient(135deg, var(--ember-deep), var(--ember));
  color: #fff; font-size: 10.5px; font-weight: 700;
}
.live-dot {
  margin-left: auto; display: flex; align-items: center; gap: 5px;
  font-size: 11px; color: var(--muted); font-weight: 600;
}
.live-dot i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green); animation: blink 1.6s ease-in-out infinite;
}
@keyframes blink { 50% { opacity: 0.25; } }
.more { margin-left: auto; font-size: 11.5px; color: var(--faint); }
.repo-glyph { font-family: var(--mono); font-size: 11px; color: var(--faint); width: 18px; text-align: center; }

/* Nav thread rows — the jump list, Claude Code style */
.nav-thread {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: 9px;
  font-size: 12.5px; color: var(--text); cursor: pointer;
  text-decoration: none;
}
.nav-thread:hover { background: rgba(41,41,41,0.045); }
.nav-thread .edot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.nav-thread .t {
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nav-thread .live {
  width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: var(--green); animation: blink 1.6s ease-in-out infinite;
}
.nav-thread .needs {
  width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: linear-gradient(135deg, var(--ember-deep), var(--ember));
}
.nav-thread.quiet { color: var(--muted); }

/* View switching */
.view { display: none; }
.view.on { display: block; }

/* Threads screen — stolen from Workspace */
.screen-date {
  font-size: 11px; font-weight: 680; letter-spacing: 0.6px;
  text-transform: uppercase; color: var(--faint);
  margin: 34px 0 6px;
}
.screen-title { font-size: 25px; font-weight: 760; letter-spacing: -0.5px; margin-bottom: 8px; }
.screen-head { display: flex; align-items: baseline; gap: 12px; }
.screen-head .search {
  margin-left: auto; color: var(--faint); font-size: 17px; cursor: pointer;
}
.screen-lede { font-size: 13.5px; color: var(--muted); margin-bottom: 22px; }

.thread-card {
  position: relative;
  background: var(--surface-strong);
  border: 0.5px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px 12px;
  margin-bottom: 10px;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(41,41,41,0.04);
}
.thread-card:hover { border-color: var(--line-strong); }
.thread-card:hover .tc-arrow { opacity: 1; }
.tc-arrow {
  position: absolute; top: 13px; right: 15px;
  color: var(--faint); opacity: 0; transition: opacity 120ms;
}
.tc-title-row { display: flex; align-items: center; gap: 9px; }
.tc-eavatar {
  width: 26px; height: 26px; border-radius: 8px; flex: none;
  display: grid; place-content: center;
  color: #fff; font-size: 11px; font-weight: 720;
}
.tc-eavatar.claude { background: var(--claude); }
.tc-eavatar.codex { background: var(--codex); }
.tc-eavatar.ember { background: linear-gradient(135deg, var(--ember-deep), var(--ember)); }
.tc-title { font-size: 13.5px; font-weight: 650; }
.live-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 680; color: var(--green);
  background: var(--green-soft);
  padding: 2.5px 9px; border-radius: 999px;
}
.live-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); animation: blink 1.6s ease-in-out infinite; }
.needs-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 680; color: var(--ember-deep);
  background: var(--ember-soft);
  padding: 2.5px 9px; border-radius: 999px;
}
.tc-preview {
  font-size: 12.5px; color: var(--muted); line-height: 1.5;
  margin: 7px 0 0 35px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tc-receipts { margin: 7px 0 0 35px; display: flex; gap: 6px; flex-wrap: wrap; }
.tc-meta {
  margin: 8px 0 0 35px;
  font-size: 11px; color: var(--faint);
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.tc-meta .diff { font-size: 10.5px; }

/* Metal card — your machine, present in the shell */
.metal-card {
  margin: 8px 14px; padding: 10px 12px;
  border-radius: 12px;
  background: var(--surface-strong);
  border: 0.5px solid var(--line);
  display: flex; align-items: center; gap: 9px;
  font-size: 12px;
}
.metal-icon { font-size: 15px; }
.metal-name { font-weight: 650; }
.metal-sub { color: var(--faint); font-size: 10.5px; display: flex; align-items: center; gap: 5px; }
.metal-sub .on {
  width: 6px; height: 6px; border-radius: 50%; background: var(--green);
  display: inline-block;
}
.metal-chip {
  margin-left: auto; font-family: var(--mono); font-size: 9.5px;
  color: var(--muted); background: rgba(41,41,41,0.05);
  padding: 2.5px 7px; border-radius: 7px;
}

.nav-footer {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-top: 0.5px solid var(--line);
  cursor: pointer;
}
.nav-footer:hover { background: rgba(41,41,41,0.03); }
.avatar {
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-content: center;
  background: linear-gradient(135deg, #4a7dbd, #6aa5e0);
  color: #fff; font-size: 13px; font-weight: 700;
}
.who .nm { font-size: 13px; font-weight: 650; }
.who .em { font-size: 11px; color: var(--faint); }
.cog { margin-left: auto; color: var(--faint); }

/* ============ MAIN PILL — the Codex-web skeleton ============ */

.main-scroll { flex: 1; overflow-y: auto; padding: 0 40px 60px; }
.home { max-width: 720px; margin: 0 auto; }

/* Hero — composer front and centre */
.hero { padding-top: 11vh; text-align: center; }
.hero-title {
  font-size: 28px; font-weight: 760; letter-spacing: -0.6px;
  margin-bottom: 10px;
}
.hero-sitrep {
  font-size: 13.5px; color: var(--muted); margin-bottom: 26px;
}
.hero-sitrep b { color: var(--text); font-weight: 640; }
.hero-sitrep .sep { color: var(--line-strong); margin: 0 7px; }

.composer-card {
  text-align: left;
  background: var(--surface-strong);
  border: 0.5px solid var(--line-strong);
  border-radius: 18px;
  box-shadow: 0 14px 40px rgba(41,41,41,0.10);
  padding: 16px 16px 12px;
}
.composer-card textarea {
  width: 100%; border: none; outline: none; resize: none;
  background: transparent; font-family: var(--ui);
  font-size: 14.5px; color: var(--text); line-height: 1.5;
  min-height: 52px;
}
.composer-card textarea::placeholder { color: var(--faint); }
.composer-row {
  display: flex; align-items: center; gap: 7px; margin-top: 8px;
}
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: var(--muted);
  background: rgba(41,41,41,0.045);
  border: 0.5px solid transparent;
  padding: 5.5px 11px; border-radius: 999px; cursor: pointer;
}
.chip:hover { border-color: var(--line-strong); }
.chip .g { font-family: var(--mono); font-size: 10.5px; color: var(--faint); }
.chip .v { color: var(--text); }
.chip.engine .dot { width: 7px; height: 7px; border-radius: 50%; background: linear-gradient(135deg, var(--ember-deep), var(--ember)); }
.composer-row .spacer { flex: 1; }

/* P3: the composer's chips became real inputs — chip-input/chip-select strip native chrome so a
   text input or a select sits inside a .chip and reads the same as the static spans they replaced. */
.chip-input, .chip-select {
  border: none; outline: none; background: transparent;
  font: inherit; font-size: 12px; font-weight: 600; color: var(--text);
  max-width: 130px; padding: 0;
}
.chip-input { cursor: text; }
.chip-input::placeholder { color: var(--faint); font-weight: 600; }
.chip-select { cursor: pointer; }

.composer-error {
  margin-top: 8px; font-size: 12px; color: var(--amber);
  background: var(--amber-soft); border-radius: 8px; padding: 6px 10px;
}

/* Terminal-dependency slice: Room.razor's provisioning banner — a StartDispatch thread's honest
   "why hasn't anything happened yet" while the Host finds or starts a container for it. Same shape
   as .composer-error (an amber note above the thread) since it is the same kind of thing: an honest
   status line, not a decoration. */
.provision-banner {
  margin: 0 0 14px; font-size: 12px; color: var(--amber);
  background: var(--amber-soft); border-radius: 8px; padding: 6px 10px;
  display: flex; align-items: center; gap: 7px;
}
.provision-banner .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--amber); flex: none;
  animation: blink 1.6s ease-in-out infinite;
}

/* There was a .tag-sample chip here — the house pattern for marking seeded data rendered alongside
   real data. Nothing in this app renders seeded data any more, so the chip has nothing to mark and
   the rule is gone with it. (Connect.App still carries its own copy for its own sample world.) */
.btn {
  font-size: 12.5px; font-weight: 650; padding: 7px 16px;
  border-radius: 999px; border: 0.5px solid var(--line-strong);
  background: var(--surface-strong); cursor: pointer; font-family: var(--ui);
  color: var(--text);
}
.btn:hover { background: rgba(41,41,41,0.03); }
.btn.primary {
  background: linear-gradient(135deg, var(--ember-deep), var(--ember));
  color: #fff; border: none;
  box-shadow: 0 3px 12px var(--ember-glow);
}

/* Task list */
.tasks { margin-top: 38px; }
.tabs {
  display: flex; align-items: center; gap: 4px; margin-bottom: 12px;
}
.tab {
  font-size: 12.5px; font-weight: 620; color: var(--muted);
  padding: 6px 13px; border-radius: 999px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.tab:hover { background: rgba(41,41,41,0.045); }
.tab.active {
  background: linear-gradient(135deg, rgba(119,51,140,0.10), rgba(212,96,160,0.12));
  color: var(--text); font-weight: 680;
}
.tab .n {
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
  display: grid; place-content: center;
  background: linear-gradient(135deg, var(--ember-deep), var(--ember));
  color: #fff; font-size: 9.5px; font-weight: 700;
}
.tabs .archive { margin-left: auto; font-size: 12px; color: var(--faint); cursor: pointer; }

.task {
  background: var(--surface-strong);
  border: 0.5px solid var(--line);
  border-radius: 14px;
  padding: 13px 16px;
  margin-bottom: 9px;
  display: flex; align-items: center; gap: 13px;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(41,41,41,0.04);
}
.task:hover { border-color: var(--line-strong); }
.task .rail { width: 3.5px; align-self: stretch; border-radius: 2px; }
.rail.claude { background: var(--claude); }
.rail.codex { background: var(--codex); }
.rail.ember { background: linear-gradient(180deg, var(--ember-deep), var(--ember)); }
.task-body { flex: 1; min-width: 0; }
.task-title { font-size: 13.5px; font-weight: 650; margin-bottom: 3.5px; }
.task-sub {
  font-size: 11.5px; color: var(--muted);
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
}
.engine-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--mono); font-size: 10px;
  padding: 2px 8px; border-radius: 8px;
  background: rgba(41,41,41,0.05); color: var(--muted);
}
.engine-chip .dot { width: 6px; height: 6px; border-radius: 50%; }
.dot.claude { background: var(--claude); }
.dot.codex { background: var(--codex); }
.dot.ember { background: linear-gradient(135deg, var(--ember-deep), var(--ember)); }
.receipt {
  font-family: var(--mono); font-size: 10px;
  background: rgba(41,41,41,0.05); color: var(--muted);
  padding: 2px 7px; border-radius: 7px;
}
.task-right {
  display: flex; flex-direction: column; align-items: flex-end; gap: 5px;
  white-space: nowrap;
}
.diff { font-family: var(--mono); font-size: 11px; font-weight: 600; }
.diff .a { color: var(--green); }
.diff .d { color: var(--red); margin-left: 5px; }
.task-state { font-size: 11px; font-weight: 650; }
.state-live { color: var(--green); display: inline-flex; align-items: center; gap: 5px; }
.state-live .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); animation: blink 1.6s ease-in-out infinite; }
.state-needs {
  color: var(--ember-deep);
  background: var(--ember-soft);
  padding: 2.5px 9px; border-radius: 999px;
}
.state-done { color: var(--faint); }

#blazor-error-ui {
  background: var(--amber-soft);
  bottom: 0; left: 0; right: 0;
  padding: 10px 16px;
  position: fixed;
  z-index: 100;
}

/* F2 — room */

.room-back {
  display: inline-block; margin: 8px 0 16px;
  cursor: pointer; text-decoration: none;
  color: var(--muted); font-size: 12.5px; font-weight: 620;
}
.room-back:hover { color: var(--text); }

.msg { display: flex; gap: 12px; margin: 18px 0 4px; }
.msg > .avatar { width: 31px; height: 31px; font-size: 12.5px; margin-top: 2px; flex: none; }
.msg-body { min-width: 0; flex: 1; }
.msg-head { display: flex; align-items: baseline; gap: 8px; }
.msg-author { font-size: 13px; font-weight: 670; letter-spacing: -0.1px; }
.msg-time { font-size: 10.5px; color: var(--faint); }
.msg-text { font-size: 13.5px; line-height: 1.55; margin-top: 2.5px; color: var(--text); }

/* Threads — the hero element of the room. Colored rail = which engine owns the work. */
.thread {
  margin: 18px 0 24px;
  background: var(--surface-strong);
  border: 0.5px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 1px 3px rgba(40,30,20,0.04);
}
.thread::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
}
.thread.by-claude::before { background: var(--claude); }
.thread.by-codex::before { background: var(--codex); }
/* Ember's rail is a gradient everywhere else in the app (border-image/pseudo tricks don't do
   gradients cleanly on a 3px absolute bar) — solid --ember stands in for it here. */
.thread.by-ember::before { background: var(--ember); }

.thread-head {
  display: flex; align-items: center; gap: 9px;
  padding: 8.5px 14px 8.5px 16px;
  background: var(--surface-soft);
  border-bottom: 0.5px solid var(--line);
  font-size: 11.5px; color: var(--muted);
}
.thread-head .tname { font-weight: 650; color: var(--text); letter-spacing: -0.1px; }
.thread-head .spacer { flex: 1; }

.env {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 9px; font-weight: 650; letter-spacing: 0.3px;
  padding: 2.5px 8px; border-radius: 999px;
  background: #f3f0f4; color: var(--faint);
}

.resolved {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; color: var(--green); font-weight: 620;
}
.resolved .tick {
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--green); color: #fff;
  display: grid; place-items: center; font-size: 8px;
}

.thread-msgs { padding: 13px 16px 14px; }
.tmsg { font-size: 13px; line-height: 1.55; color: var(--text); margin: 0 0 10px; }
.tmsg-receipt { margin: 0 0 10px; }

.handoff-actions { display: flex; gap: 8px; margin-top: 6px; }

.room-composer { margin: 20px 0 40px; }

/* F3 — needs you */

.handoff {
  background: var(--surface-strong);
  border: 0.5px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 10px;
  display: flex; align-items: flex-start; gap: 12px;
  box-shadow: 0 2px 10px rgba(41,41,41,0.04);
}
.handoff .rail { width: 3.5px; align-self: stretch; border-radius: 2px; }
.handoff-body { flex: 1; min-width: 0; }
.handoff-title { font-size: 13.5px; font-weight: 650; margin-bottom: 3px; }
.handoff-detail { font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.handoff-meta {
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
  font-size: 10.5px; color: var(--faint); white-space: nowrap;
}
.handoff-meta a { color: var(--faint); text-decoration: none; }
.handoff-meta a:hover { color: var(--text); text-decoration: underline; }

/* P4: a real parked action's argsJson, rendered readably — see Domain/PendingActionRender.cs. */
.handoff-detail code {
  font-family: var(--mono); font-size: 11.5px;
  background: rgba(41,41,41,0.06); padding: 1px 5px; border-radius: 5px;
}
.pending-content {
  font-family: var(--mono); font-size: 11.5px; line-height: 1.5; color: var(--text);
  background: var(--surface-soft); border: 0.5px solid var(--line);
  border-radius: 8px; padding: 8px 10px; margin: 4px 0 8px;
  white-space: pre-wrap; word-break: break-word; overflow-x: auto;
}
.pending-arg { font-family: var(--mono); font-size: 11.5px; color: var(--muted); margin: 2px 0; }
.handoff-reason { font-size: 11.5px; color: var(--faint); margin-top: 4px; }
.handoff .composer-error { margin: 6px 0; }
.btn:disabled { opacity: 0.55; cursor: default; }