/* ===========================================================================
   The Claw 2.0 — execution console
   ---------------------------------------------------------------------------
   A console CW lives in all day, not a page he visits. Three standing columns:
   what is waiting, the whole conversation, and the controls that act on it.
   Nothing important is more than one glance away, and nothing sends unless the
   mode says it may.

   Brass on cold graphite. Brass is the only accent and means exactly one
   thing: a decision is yours. Semantic colour (sent / held / blocked) is
   separate and never borrowed for decoration.
   =========================================================================== */

:root {
  color-scheme: dark;

  --ground: #0a0d13;
  --panel: #10151e;
  --raised: #161d29;
  --sunken: #070a0f;
  --line: #212a38;
  --line-soft: #19212c;

  --ink: #e8ecf3;
  --ink-dim: #97a2b6;
  --ink-faint: #667189;

  --brass: #e4435f;
  --brass-ink: #ffffff;
  --brass-soft: rgb(228 67 95 / 14%);
  --brass-line: rgb(228 67 95 / 40%);

  --sent: #45b685;
  --sent-soft: rgb(69 182 133 / 14%);
  --held: #e8b04b;
  --held-soft: rgb(232 176 75 / 14%);
  --block: #e0575f;
  --block-soft: rgb(224 87 95 / 14%);

  --slack: #8b7ae0;
  --imessage: #45b685;
  --email: #5b9be0;

  --shadow: 0 18px 48px rgb(0 0 0 / 55%);
  --sans: "OpenDyslexic", ui-sans-serif, -apple-system, "Segoe UI", sans-serif;
  --mono: "OpenDyslexic", ui-monospace, SFMono-Regular, Menlo, monospace;

  --rail: 288px;
  --actions: 312px;
}

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --ground: #eef0f4;
    --panel: #ffffff;
    --raised: #f7f8fa;
    --sunken: #e7eaf0;
    --line: #dde2ea;
    --line-soft: #e8ecf1;
    --ink: #131822;
    --ink-dim: #5a6577;
    --ink-faint: #7d8698;
    --brass: #c92f4a;
    --brass-ink: #ffffff;
    --brass-soft: rgb(201 47 74 / 10%);
    --brass-line: rgb(201 47 74 / 34%);
    --sent: #1d8a5e;
    --sent-soft: rgb(29 138 94 / 10%);
    --held: #9a6a10;
    --held-soft: rgb(154 106 16 / 10%);
    --block: #c22b33;
    --block-soft: rgb(194 43 51 / 10%);
    --slack: #5b47c4;
    --imessage: #1d8a5e;
    --email: #2f6fb5;
    --shadow: 0 16px 40px rgb(16 22 34 / 14%);
  }
}

/* The viewer's explicit choice outranks the OS, in both directions. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --ground: #0a0d13; --panel: #10151e; --raised: #161d29; --sunken: #070a0f;
  --line: #212a38; --line-soft: #19212c;
  --ink: #e8ecf3; --ink-dim: #97a2b6; --ink-faint: #667189;
  --brass: #e4435f; --brass-ink: #ffffff; --brass-soft: rgb(228 67 95 / 14%); --brass-line: rgb(228 67 95 / 40%);
  --sent: #45b685; --sent-soft: rgb(69 182 133 / 14%);
  --held: #e8b04b; --held-soft: rgb(232 176 75 / 14%);
  --block: #e0575f; --block-soft: rgb(224 87 95 / 14%);
  --slack: #8b7ae0; --imessage: #45b685; --email: #5b9be0;
  --shadow: 0 18px 48px rgb(0 0 0 / 55%);
}

:root[data-theme="light"] {
  color-scheme: light;
  --ground: #eef0f4; --panel: #ffffff; --raised: #f7f8fa; --sunken: #e7eaf0;
  --line: #dde2ea; --line-soft: #e8ecf1;
  --ink: #131822; --ink-dim: #5a6577; --ink-faint: #7d8698;
  --brass: #c92f4a; --brass-ink: #ffffff; --brass-soft: rgb(201 47 74 / 10%); --brass-line: rgb(201 47 74 / 34%);
  --sent: #1d8a5e; --sent-soft: rgb(29 138 94 / 10%);
  --held: #9a6a10; --held-soft: rgb(154 106 16 / 10%);
  --block: #c22b33; --block-soft: rgb(194 43 51 / 10%);
  --slack: #5b47c4; --imessage: #1d8a5e; --email: #2f6fb5;
  --shadow: 0 16px 40px rgb(16 22 34 / 14%);
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 14px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

button, input, textarea { font: inherit; color: inherit; }

:where(button, [tabindex], input, textarea):focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 2px;
  border-radius: 4px;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line); border: 3px solid transparent; background-clip: content-box; border-radius: 6px; }
::-webkit-scrollbar-track { background: transparent; }

/* ── shell ───────────────────────────────────────────────────────────────── */

.console { display: grid; grid-template-rows: auto 1fr auto; height: 100dvh; }

.deck {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr) var(--actions);
  min-height: 0;
  border-block: 1px solid var(--line);
}

.deck > * { min-width: 0; min-height: 0; }

/* ── top bar ─────────────────────────────────────────────────────────────── */

.topbar { display: flex; align-items: center; gap: 18px; padding: 0 16px; height: 54px; background: var(--panel); }

.wordmark { display: flex; align-items: center; gap: 10px; }
.wordmark img { display: block; width: 26px; height: 26px; }
.wordmark b { font-size: 13px; font-weight: 650; letter-spacing: 0.14em; text-transform: uppercase; }

.wordmark small {
  font: 500 10px/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding-left: 10px;
  border-left: 1px solid var(--line);
}

.topbar-spacer { flex: 1; }

/* The mode switch is the most consequential control on the screen, so it is
   the only place in the chrome that carries the accent. */
.modes { display: flex; gap: 2px; padding: 3px; background: var(--sunken); border: 1px solid var(--line); border-radius: 8px; }

.modes button {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  background: none;
  border: 0;
  border-radius: 6px;
  color: var(--ink-dim);
  font-size: 12.5px;
  font-weight: 550;
  cursor: pointer;
  white-space: nowrap;
  transition: background 120ms ease, color 120ms ease;
}

.modes button:hover:not([aria-pressed="true"]) { background: var(--raised); color: var(--ink); }
.modes button[aria-pressed="true"] { background: var(--brass); color: var(--brass-ink); font-weight: 650; }
.modes button .dot { width: 6px; height: 6px; border-radius: 50%; background: currentcolor; opacity: 0.45; }
.modes button[aria-pressed="true"] .dot { opacity: 1; }
.modes[data-busy="true"] { opacity: 0.55; pointer-events: none; }
.topbar > .modes:not(.from-status) { display: none; }
.modes.from-status {
  position: fixed;
  left: 14px;
  bottom: 36px;
  z-index: 90;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.icon-btn {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  background: none;
  border: 1px solid transparent;
  border-radius: 7px;
  color: var(--ink-dim);
  cursor: pointer;
}

.icon-btn:hover { background: var(--raised); color: var(--ink); border-color: var(--line); }
.icon-btn i { font-size: 16px; }

/* ── queue rail ──────────────────────────────────────────────────────────── */

.queue { display: flex; flex-direction: column; background: var(--panel); border-right: 1px solid var(--line); }

.queue-head { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-bottom: 1px solid var(--line-soft); }

.queue-bulk {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
}

.queue-bulk .btn {
  min-height: 30px;
  padding: 5px 8px;
  font-size: 11px;
}

.queue-bulk .btn:last-child { width: auto; min-width: 76px; }

.search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: var(--sunken);
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--ink-faint);
}

.search input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: var(--ink); font-size: 13px; }
.search input::placeholder { color: var(--ink-faint); }

/* Wraps: the channel set is data-driven, so this row must survive however
   many methods the bridge reports. */
.filters { display: flex; flex-wrap: wrap; gap: 4px; }

.filters button {
  flex: 1 1 auto;
  min-width: 62px;
  padding: 5px 6px;
  background: none;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--ink-faint);
  font: 550 10.5px/1.4 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}

.filters button:hover { color: var(--ink); background: var(--raised); }
.filters button[aria-pressed="true"] { color: var(--ink); background: var(--raised); border-color: var(--line); }
.filters button b { font-family: var(--mono); font-variant-numeric: tabular-nums; margin-left: 4px; color: var(--ink-faint); }

/* Channel navigation now lives in the clickable bottom command strip. */
.queue-head .search,
.queue-head .filters { display: none; }

.queue-list { flex: 1; overflow-y: auto; padding: 6px; }

.queue-empty { display: grid; gap: 6px; padding: 40px 20px; text-align: center; color: var(--ink-faint); }
.queue-empty strong { color: var(--ink-dim); font-size: 13px; }
.queue-empty span { font-size: 12px; line-height: 1.55; }

.item {
  display: grid;
  grid-template-columns: 3px 1fr;
  gap: 10px;
  width: 100%;
  padding: 0;
  margin-bottom: 4px;
  background: none;
  border: 1px solid transparent;
  border-radius: 8px;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
}

.item:hover { background: var(--raised); }
.item[aria-selected="true"] { background: var(--raised); border-color: var(--line); }

.item .stripe { background: var(--line); }
.item[data-source="slack"] .stripe { background: var(--slack); }
.item[data-source="imessage"] .stripe { background: var(--imessage); }
.item[data-source="email"] .stripe { background: var(--email); }

.item-body { display: grid; gap: 3px; padding: 9px 10px 10px 0; }
.item-top { display: flex; align-items: baseline; gap: 8px; }

.item-top strong {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item-top time { font: 500 10.5px/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--ink-faint); white-space: nowrap; }

.item p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-dim);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.item-meta { display: flex; align-items: center; gap: 6px; margin-top: 2px; flex-wrap: wrap; }

/* ── state chips: form as well as colour, so state reads at a glance ────── */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border: 1px solid var(--line);
  border-radius: 4px;
  font: 600 9.5px/1.5 var(--mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
}

.chip.ready { color: var(--brass); border-color: var(--brass-line); background: var(--brass-soft); }
.chip.sent { color: var(--sent); border-color: color-mix(in srgb, var(--sent) 40%, transparent); background: var(--sent-soft); }
.chip.held { color: var(--held); border-color: color-mix(in srgb, var(--held) 40%, transparent); background: var(--held-soft); }
.chip.blocked { color: var(--block); border-color: color-mix(in srgb, var(--block) 45%, transparent); background: var(--block-soft); }

/* ── thread ──────────────────────────────────────────────────────────────── */

.thread { display: flex; flex-direction: column; background: var(--ground); }

.thread-head { display: flex; align-items: center; gap: 12px; padding: 13px 18px; background: var(--panel); border-bottom: 1px solid var(--line); }
.thread-head .who { display: grid; gap: 2px; flex: 1; min-width: 0; }

.thread-head h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 620;
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.thread-head .sub { font: 500 11px/1.3 var(--mono); color: var(--ink-faint); letter-spacing: 0.04em; }

.timeline { flex: 1; overflow-y: auto; padding: 20px 18px 24px; display: flex; flex-direction: column; gap: 14px; }

.turn { display: grid; gap: 5px; max-width: 74ch; }
.turn.mine { margin-left: auto; justify-items: end; }

.turn .meta {
  display: flex;
  gap: 8px;
  align-items: baseline;
  font: 500 10.5px/1 var(--mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.bubble {
  padding: 11px 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 13.5px;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.turn.mine .bubble { background: var(--raised); }

.thread-empty {
  flex: 1;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 8px;
  color: var(--ink-faint);
  text-align: center;
  padding: 40px;
}

.thread-empty i { font-size: 26px; opacity: 0.55; }
.thread-empty h2 { margin: 0; font-size: 15px; font-weight: 600; color: var(--ink-dim); }
.thread-empty p { margin: 0; font-size: 12.5px; max-width: 46ch; line-height: 1.6; }

/* The draft sits inline at the foot of the thread, where the reply belongs. */
.draft-block {
  display: grid;
  gap: 8px;
  margin: 4px 18px 18px;
  padding: 13px 14px;
  background: var(--panel);
  border: 1px solid var(--brass-line);
  border-radius: 10px;
}

.draft-block.is-blocked { border-color: color-mix(in srgb, var(--block) 45%, transparent); }

.draft-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 600 10px/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brass);
}

.draft-block.is-blocked .draft-head { color: var(--block); }
.draft-head .grow { flex: 1; }

.draft-block textarea {
  width: 100%;
  min-height: 88px;
  padding: 10px 12px;
  background: #ffffff;
  border: 1px solid color-mix(in srgb, var(--brass) 22%, var(--line));
  border-radius: 8px;
  color: #131822;
  font-size: 13.5px;
  line-height: 1.6;
  resize: vertical;
  outline: none;
}
.draft-block textarea::placeholder { color: #7d8698; }

.draft-block textarea:focus { border-color: var(--brass-line); }
.draft-note { font-size: 11.5px; line-height: 1.5; color: var(--ink-faint); }

/* ── action rail ─────────────────────────────────────────────────────────── */

.actions { position: relative; display: flex; flex-direction: column; background: var(--panel); border-left: 1px solid var(--line); overflow: hidden; }

.actions-resizer {
  position: absolute;
  inset: 0 auto 0 -7px;
  z-index: 20;
  width: 14px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  cursor: col-resize;
  touch-action: none;
}

.actions-resizer:hover,
.actions-resizer:focus-visible,
body.is-resizing-actions .actions-resizer {
  background: color-mix(in srgb, var(--brass) 18%, transparent);
  outline: 0;
}

body.is-resizing-actions { cursor: col-resize; user-select: none; }

.rail-section { padding: 14px; border-bottom: 1px solid var(--line-soft); display: grid; gap: 10px; }

.rail-title { font: 600 10px/1 var(--mono); letter-spacing: 0.11em; text-transform: uppercase; color: var(--ink-faint); }

/* Review controls stay attached to the selected conversation without taking
   The Claw's column away from chat. The dock scrolls horizontally on compact
   windows instead of growing upward over the thread. */
.workflow-dock {
  flex: none;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(440px, 1fr);
  align-items: stretch;
  max-height: 178px;
  overflow-x: auto;
  overflow-y: hidden;
  background: var(--panel);
  border-top: 1px solid var(--line);
}

.workflow-dock .rail-section {
  min-width: 0;
  padding: 12px;
  border-right: 1px solid var(--line-soft);
  border-bottom: 0;
  align-content: start;
}

.workflow-dock .btn { padding-block: 8px; }
.workflow-dock .mode-explainer { height: 100%; }
.workflow-dock .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.workflow-dock .fact { padding-block: 6px; }
.workflow-dock .conversation-compose { min-width: 440px; }
.workflow-dock #draft-mount { min-width: 0; }

.workflow-dock .draft-block {
  gap: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.workflow-dock .draft-head,
.workflow-dock .draft-note { display: none; }

.workflow-dock .draft-block textarea {
  min-height: 54px;
  max-height: 54px;
  padding: 9px 11px;
  resize: none;
}

.workflow-dock .draft-block.is-empty textarea {
  color: var(--ink-faint);
  cursor: default;
  opacity: 0.8;
}

.reply-actions {
  display: grid;
  grid-template-columns: minmax(150px, 1.4fr) minmax(110px, 1fr) minmax(95px, 0.8fr);
  gap: 7px;
}

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 550;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}

.btn:hover:not(:disabled) { background: var(--sunken); border-color: var(--ink-faint); }
.btn:disabled { opacity: 0.42; cursor: not-allowed; }

.btn.primary { background: var(--brass); border-color: var(--brass); color: var(--brass-ink); font-weight: 650; }
.btn.primary:hover:not(:disabled) { filter: brightness(1.08); background: var(--brass); border-color: var(--brass); }

.btn.danger { color: var(--block); }
.btn.danger:hover:not(:disabled) { border-color: color-mix(in srgb, var(--block) 50%, transparent); background: var(--block-soft); }

.btn i { font-size: 15px; }

.mode-explainer {
  padding: 10px 12px;
  background: var(--sunken);
  border: 1px solid var(--line);
  border-left: 2px solid var(--brass);
  border-radius: 7px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink-dim);
}

.mode-explainer b { display: block; color: var(--ink); font-size: 12.5px; margin-bottom: 2px; }

.facts { display: grid; gap: 1px; background: var(--line-soft); border: 1px solid var(--line); border-radius: 7px; overflow: hidden; }

.fact { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 8px 11px; background: var(--panel); font-size: 12px; }
.fact span { color: var(--ink-faint); }

.fact strong { font: 600 11.5px/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); text-align: right; }
.fact strong.good { color: var(--sent); }
.fact strong.warn { color: var(--held); }
.fact strong.bad { color: var(--block); }

/* ── status bar ──────────────────────────────────────────────────────────── */

.statusbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  height: 30px;
  background: var(--panel);
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.03em;
  color: var(--ink-faint);
  overflow-x: auto;
  scrollbar-width: none;
  white-space: nowrap;
}
.statusbar::-webkit-scrollbar { display: none; }

.status-action {
  display: inline-flex;
  flex: 1 0 auto;
  justify-content: center;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 9px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--ink-faint);
  font: inherit;
  letter-spacing: inherit;
  white-space: nowrap;
  cursor: pointer;
}
.status-action:hover,
.status-action:focus-visible,
.status-action[aria-pressed="true"] {
  border-color: var(--line);
  background: var(--raised);
  color: var(--ink);
  outline: none;
}

.statusbar .sep { width: 1px; height: 13px; background: var(--line); flex: none; }
.statusbar .grow { display: none; }
.statusbar b { color: var(--ink-dim); font-weight: 600; }
.statusbar .live { color: var(--sent); }
.statusbar .stale { color: var(--held); }
.statusbar .bad { color: var(--block); }

/* ── Claw chat: the live lower half of the action sidebar ────────────────── */

/* Bottom-right of the conversation, not of the window: offset by the action
   rail so it stops floating over the guardrails, and dropped to sit just
   above the status bar. */
.chat-launch {
  position: fixed;
  right: calc(var(--actions) + 20px);
  bottom: 38px;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 15px;
  background: var(--brass);
  border: 0;
  border-radius: 999px;
  color: var(--brass-ink);
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
  box-shadow: var(--shadow);
}

.chat-launch img { width: 20px; height: 20px; }
.chat-launch[hidden], .chat-dock[hidden] { display: none; }

.chat-dock {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: var(--panel);
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
}

.chat-head { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-bottom: 1px solid var(--line); }
.chat-head img { display: block; width: 24px; height: 24px; }
.chat-head .who { flex: 1; display: grid; gap: 1px; }
.chat-head strong { font-size: 13px; font-weight: 620; }
.chat-head small { font: 500 10px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); }

.chat-log { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 14px 12px; display: flex; flex-direction: column; gap: 10px; }

.chat-turn { max-width: 88%; display: grid; gap: 4px; }
.chat-turn.mine { margin-left: auto; justify-items: end; }
.chat-turn .bubble { font-size: 13px; padding: 9px 12px; }
.chat-turn.mine .bubble { background: var(--brass-soft); border-color: var(--brass-line); }
.chat-turn.refusal .bubble { background: var(--block-soft); border-color: color-mix(in srgb, var(--block) 45%, transparent); }
.chat-turn .meta { font: 500 9.5px/1 var(--mono); letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-faint); }

.chat-quick { flex: none; display: flex; flex-wrap: wrap; gap: 5px; padding: 0 12px 10px; }

.chat-quick button {
  padding: 5px 9px;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-dim);
  font-size: 11.5px;
  cursor: pointer;
}

.chat-quick button:hover { color: var(--ink); border-color: var(--ink-faint); }

.chat-form { flex: none; display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); background: var(--panel); }

.chat-form textarea {
  flex: 1;
  min-height: 38px;
  max-height: 120px;
  padding: 9px 11px;
  background: var(--sunken);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.5;
  resize: none;
  outline: none;
}

.chat-form textarea:focus { border-color: var(--brass-line); }

.chat-form button {
  align-self: flex-end;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  background: var(--brass);
  border: 0;
  border-radius: 8px;
  color: var(--brass-ink);
  cursor: pointer;
}

.chat-form button:disabled { opacity: 0.4; cursor: not-allowed; }

.chat-form .chat-policy-button {
  background: var(--raised);
  border: 1px solid var(--line);
  color: var(--ink-dim);
}

.chat-form .chat-policy-button[aria-expanded="true"] {
  color: var(--brass);
  border-color: var(--brass-line);
}

.chat-policy-popover {
  position: absolute;
  z-index: 30;
  right: 12px;
  bottom: 68px;
  width: min(300px, calc(100% - 24px));
  max-height: calc(100% - 90px);
  overflow-y: auto;
  display: grid;
  gap: 10px;
  padding: 12px;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
}

.chat-policy-popover[hidden] { display: none; }

/* ── toast ───────────────────────────────────────────────────────────────── */

.toast {
  position: fixed;
  left: 50%;
  bottom: 46px;
  z-index: 90;
  transform: translate(-50%, 12px);
  max-width: min(560px, calc(100vw - 40px));
  padding: 11px 16px;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 9px;
  box-shadow: var(--shadow);
  font-size: 13px;
  line-height: 1.5;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;
}

.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.bad { border-color: color-mix(in srgb, var(--block) 50%, transparent); color: var(--block); }
.toast.good { border-color: color-mix(in srgb, var(--sent) 45%, transparent); }

/* ── narrow / embedded ───────────────────────────────────────────────────── */

.pane-tabs { display: none; }

@media (max-width: 1180px) { :root { --rail: 250px; --actions: 268px; } }

@media (max-width: 900px) {
  .deck { grid-template-columns: 1fr; }
  .queue, .thread, .actions { display: none; }
  .deck[data-pane="queue"] .queue,
  .deck[data-pane="thread"] .thread,
  .deck[data-pane="actions"] .actions { display: flex; }
  .queue, .actions { border: 0; }
  .actions-resizer { display: none; }

  .pane-tabs {
    display: flex;
    gap: 2px;
    padding: 3px;
    background: var(--sunken);
    border: 1px solid var(--line);
    border-radius: 8px;
  }

  .pane-tabs button {
    padding: 5px 11px;
    background: none;
    border: 0;
    border-radius: 6px;
    color: var(--ink-faint);
    font: 600 10.5px/1.4 var(--mono);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
  }

  .pane-tabs button[aria-pressed="true"] { background: var(--raised); color: var(--ink); }
  .wordmark small { display: none; }
  .modes button span { display: none; }
  .modes button { padding: 6px 10px; }
  /* No rail in one column, so the offset goes away with it. */
  .chat-launch { right: 16px; bottom: 38px; }
  .chat-dock { width: 100%; min-height: 320px; }
  .workflow-dock { display: none; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }