/* =============================================================================
   web/conversation.css: a pane's Chat view (web/conversation.mjs).

   Every value comes from the room's tokens in styles.css, so the view follows
   all three themes and both looks without a rule of its own for any of them.
   Three rules decide most of what is here. The words are the page: a person's
   message and the agent's reply are set in the reading face at the reading
   size, and everything about how the work was done is smaller, quieter and
   folded. Brightness is recency: the agent's latest words are the one thing
   at full strength, and what came before them is folded or dimmed until it
   is pointed at (focus on now, below). And nothing moves that does not have
   to: a turn off screen is skipped by layout (content-visibility), only
   colour, opacity and transform animate, and the live line's shimmer is one
   gradient on one line of text.

   Colour is meaning, never decoration: teal is what is live, red what
   failed, amber what needs the person, green what changed. Everything else
   is ink at one of three strengths.
   ============================================================================= */

/* ---- placement in a pane -------------------------------------------------- */

.pane-chat {
  grid-row: 3;
  position: relative;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--rack-2);
}

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

.pane[data-view='chat'] .pane-term { display: none; }

/* The pane's actions float over the top of the pane when it is pointed at,
   which over a terminal is out of the way and over a conversation is not: its
   first line, "Show earlier" and a brief's "Show all" are just where the bar
   lands. So in the Chat view the bar comes with the head (the pointer on it,
   or the keyboard in it), and crossing from the head to the bar is bridged.
   The terminal's two selection copies have nothing to copy here; they stay
   with the Terminal view, and text in the conversation copies as text does. */
.pane[data-view='chat'] .pane-acts {
  opacity: 0;
  translate: 0 -4px;
  pointer-events: none;
}

.pane[data-view='chat'] .pane-head:is(:hover, :focus-within) .pane-acts {
  opacity: 1;
  translate: 0 0;
  pointer-events: auto;
}

.pane[data-view='chat'] .pane-acts::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 100%;
  height: var(--sp-2);
}

.pane[data-view='chat'] .pane-acts :is([data-act='copy'], [data-act='copy-verbatim'], [data-act='copy-link']) { display: none; }

/* With no pointer the bar is always there, as it is over a terminal, so the
   conversation starts below it. */
@media (hover: none) {
  .pane[data-view='chat'] .pane-acts { opacity: 1; translate: 0 0; pointer-events: auto; }
  .pane[data-view='chat'] .chat-log { padding-top: calc(var(--pill-h) + var(--sp-5)); }
}

/* The view switch: two words in one track, the room's segmented control. */
.pane-views {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-h);
  padding: var(--sp-h);
  border: 1px solid var(--edge);
  border-radius: var(--radius-sm);
  background: var(--surface-chip);
}

.pane-views[hidden] { display: none; }

.pane-views button {
  height: calc(var(--pill-h) - 4px);
  padding: 0 var(--sp-2);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink-dim);
  font-family: var(--ui);
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}

.pane-views button:hover { color: var(--ink); background: var(--wash-2); }

.pane-views button[aria-pressed='true'] {
  color: var(--ink);
  background: var(--rack-3);
  box-shadow: var(--shadow-1), inset 0 0 0 1px var(--edge);
}

/* ---- the view ------------------------------------------------------------- */

.chat {
  --chat-measure: 46rem;
  --chat-gutter: var(--sp-4);
  /* How strong the past is drawn. Ink at this strength still clears 4.5:1 on
     the panel in every theme (daylight needs more of it). */
  --chat-past: 0.56;
  --chat-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  color: var(--ink);
  font-family: var(--ui);
}

html[data-theme='light'] .chat { --chat-past: 0.66; }

.chat-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--edge) transparent;
  outline: none;
}

.chat-scroll:focus-visible { box-shadow: inset 0 0 0 2px var(--accent-line); }

.chat-log {
  max-width: var(--chat-measure);
  margin: 0 auto;
  padding: var(--sp-4) var(--chat-gutter) var(--sp-3);
}

.chat-turns { display: flex; flex-direction: column; gap: var(--sp-5); }

/* A turn off screen costs nothing to lay out. The estimate keeps the
   scrollbar honest until it is measured. */
.chat-turn {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2h);
  content-visibility: auto;
  contain-intrinsic-size: auto 240px;
}

.chat-turn-body { display: flex; flex-direction: column; gap: var(--sp-1h); }

/* ---- focus on now -----------------------------------------------------------
   Where the eye should land is the agent's latest words, just above the box
   the person types in. So they are the one thing at full strength:
     - a turn still running folds everything before its latest words into one
       line (.chat-work.is-progress, "6 earlier updates · 41 steps"), with
       anything that failed still on that line;
     - the words of every turn before the last are dimmed, and come back to
       full strength under the pointer or the keyboard, so scrolling up reads
       as a spotlight passing over the history;
     - what an opened fold shows is the past too, its words dimmed the same
       way, one block at a time;
     - new words in the running turn rise into place, so a change is noticed
       without anything blinking.
   Only words are dimmed: at --chat-past they sit at about the strength of
   the quiet lines (folds, steps), which are left as they are, so the past
   settles on one level that still clears 4.5:1, and the colours that mean
   something (a red failed count, a green diff) keep meaning it there.
   Nothing is hidden that a hover or a click does not bring back. */

.chat-turn:not(:last-child) :is(.chat-user, .chat-text),
.chat-work-body > .chat-text,
.chat-older-body > .chat-text {
  opacity: var(--chat-past);
  transition: opacity 180ms var(--chat-ease);
}

.chat-turn:not(:last-child):is(:hover, :focus-within) :is(.chat-user, .chat-text),
.chat-work-body > .chat-text:is(:hover, :focus-within),
.chat-older-body > .chat-text:is(:hover, :focus-within) { opacity: 1; }

.chat-turn:last-child > .chat-turn-body > .chat-text {
  animation: chat-arrive 260ms var(--chat-ease) both;
}

@keyframes chat-arrive {
  from { opacity: 0; transform: translateY(var(--sp-1)); }
}

@media (prefers-reduced-motion: reduce) {
  .chat-turn:last-child > .chat-turn-body > .chat-text { animation: none; }
}

.chat-earlier,
.chat-more,
.chat-full,
.chat-empty-act,
.chat-ask-act,
.chat-live-act {
  align-self: center;
  height: var(--ctl-h-sm);
  padding: 0 var(--sp-3);
  border: 1px solid var(--edge);
  border-radius: var(--radius-sm);
  background: var(--surface-chip);
  color: var(--ink-dim);
  font: 500 var(--fs-sm) var(--ui);
  cursor: pointer;
  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;
}

.chat-earlier:hover,
.chat-more:hover,
.chat-full:hover,
.chat-empty-act:hover,
.chat-ask-act:hover,
.chat-live-act:hover { color: var(--ink); border-color: var(--edge-hot); background: var(--wash-2); }

.chat-earlier { display: block; margin: 0 auto var(--sp-4); }
.chat-earlier[hidden] { display: none; }

.chat-empty {
  margin: var(--sp-5) auto;
  max-width: 28rem;
  color: var(--ink-faint);
  font-size: var(--fs-base);
  line-height: 1.5;
  text-align: center;
}

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

.chat-empty-act { display: block; margin: var(--sp-3) auto 0; }

/* ---- what the person said -------------------------------------------------- */

.chat-user {
  align-self: flex-end;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--sp-1);
  max-width: min(85%, 38rem);
}

.chat-user-text {
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-lg);
  border-end-end-radius: var(--sp-1);
  background: var(--accent-tint);
  color: var(--ink);
  font-size: var(--fs-base);
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.chat-user-words { display: block; }

.chat-user.is-long:not(.is-open) .chat-user-words {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

.chat-user.is-sending .chat-user-text { opacity: 0.6; }

.chat-pending { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-2h); }
.chat-pending:empty { display: none; }

.chat-more { height: var(--pill-h); padding: 0 var(--sp-2); font-size: var(--fs-xs); }

/* ---- what the agent said --------------------------------------------------- */

.chat-text {
  color: var(--ink);
  font-size: var(--fs-lg);
  line-height: 1.62;
  overflow-wrap: anywhere;
}

.chat-text.is-err { color: var(--red); }

.chat-text > :first-child { margin-top: 0; }
.chat-text > :last-child { margin-bottom: 0; }
.chat-text p { margin: 0 0 var(--sp-2h); }
.chat-text .md-h { margin: var(--sp-4) 0 var(--sp-1h); font-size: var(--fs-lg); font-weight: 650; line-height: 1.35; }
.chat-text h3.md-h { font-size: var(--fs-xl); }
.chat-text ul,
.chat-text ol { margin: 0 0 var(--sp-2h); padding-inline-start: var(--sp-5); }
.chat-text li { margin: var(--sp-h) 0; }
.chat-text li::marker { color: var(--ink-faint); }
.chat-text .md-task { list-style: none; margin-inline-start: calc(-1 * var(--sp-4)); }
.chat-text .md-task::before { content: '\2610\00a0'; color: var(--ink-faint); }
.chat-text .md-task[data-done='true']::before { content: '\2611\00a0'; color: var(--green); }
.chat-text strong { font-weight: 650; }
.chat-text a { color: var(--teal); text-decoration: underline; text-decoration-color: var(--accent-line); text-underline-offset: 2px; }
.chat-text a:hover { text-decoration-color: currentColor; }
.chat-text blockquote { margin: 0 0 var(--sp-2h); padding: var(--sp-1) var(--sp-3); border-inline-start: 2px solid var(--edge); color: var(--ink-dim); }
.chat-text hr { margin: var(--sp-4) 0; border: 0; border-top: 1px solid var(--rule); }

.chat-text code {
  padding: 0.1em 0.35em;
  border-radius: var(--sp-1);
  background: var(--wash-2);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.86em;
}

.chat-text .md-code {
  margin: 0 0 var(--sp-2h);
  padding: var(--sp-2h) var(--sp-3);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--well-bg);
  overflow-x: auto;
  font-size: var(--fs-md);
  line-height: 1.55;
}

.chat-text .md-code code { padding: 0; background: none; font-size: inherit; }

.chat-text .md-table { margin: 0 0 var(--sp-2h); overflow-x: auto; }
.chat-text table { border-collapse: collapse; font-size: var(--fs-base); }
.chat-text th,
.chat-text td { padding: var(--sp-1) var(--sp-2h); border-bottom: 1px solid var(--rule); text-align: start; vertical-align: top; }
.chat-text th { color: var(--ink-dim); font-weight: 600; }
.chat-text .md-image,
.chat-text .md-ref { color: var(--ink-dim); text-decoration: underline dotted; text-underline-offset: 2px; }

/* ---- the work: a run of steps in one line --------------------------------- */

.chat-group,
.chat-work,
.chat-changes,
.chat-step-detail { min-width: 0; }

.chat-group > summary,
.chat-work > summary,
.chat-changes > summary,
.chat-step-detail > summary,
.chat-plan > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
}

.chat-group > summary::-webkit-details-marker,
.chat-work > summary::-webkit-details-marker,
.chat-changes > summary::-webkit-details-marker,
.chat-step-detail > summary::-webkit-details-marker,
.chat-plan > summary::-webkit-details-marker { display: none; }

.chat-icon {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chat-group-summary,
.chat-work-summary {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--ctl-h);
  margin-inline: calc(-1 * var(--sp-2));
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--radius);
  color: var(--ink-dim);
  font-size: var(--fs-base);
  transition: background 140ms ease, color 140ms ease;
}

.chat-group-summary:hover,
.chat-work-summary:hover { background: var(--wash-2); color: var(--ink); }

/* The work is the quieter layer, a step of ink below the words, so a turn
   reads as what was said with the doing tucked between it. */
.chat-group-summary { color: var(--ink-faint); }

.chat-group-summary > .chat-icon:first-child,
.chat-work-summary > .chat-icon:first-child,
.chat-step-summary > .chat-icon:first-child { width: 12px; height: 12px; color: var(--ink-faint); transition: transform 160ms ease; }

.chat-group[open] > .chat-group-summary > .chat-icon:first-child,
.chat-work[open] > .chat-work-summary > .chat-icon:first-child { transform: rotate(90deg); }

.chat-group-label {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The line that is happening now: the one shimmer in the view. A band of the
   panel's own ground sweeps over the words, moved by transform alone, so the
   compositor draws it and the main thread does nothing per frame. (A gradient
   clipped to the text and moved by background-position cost a style pass and
   a repaint per frame per pane: 433ms of every 12s with five panes live.) */
.chat-group-label.is-live {
  position: relative;
  color: var(--ink);
}

.chat-group-label.is-live::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--rack-2) 78%, transparent) 50%, transparent 100%);
  transform: translateX(-100%);
  animation: chat-sweep 2.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  pointer-events: none;
}

@keyframes chat-sweep {
  to { transform: translateX(100%); }
}

.chat-group-count,
.chat-group-time,
.chat-step-meta {
  flex: 0 0 auto;
  color: var(--ink-faint);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.chat-group-count { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.chat-badge {
  flex: 0 0 auto;
  padding: 0 var(--sp-1h);
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.6;
}

.chat-badge.is-err { color: var(--red); background: color-mix(in srgb, var(--red) 14%, transparent); }

/* The running group's last steps, under its line: the same rows, quieter, and
   the oldest the faintest, so the eye lands on the newest. */
.chat-group-live { display: flex; flex-direction: column; }

.chat-group-tail {
  margin: 0 0 0 var(--sp-1h);
  padding: var(--sp-h) 0 0 var(--sp-3);
  border-inline-start: 1px solid var(--rule);
  list-style: none;
  pointer-events: none;
}

.chat-group-tail .chat-step { opacity: 0.55; transition: opacity 200ms ease; }
.chat-group-tail .chat-step:nth-last-child(2) { opacity: 0.75; }
.chat-group-tail .chat-step:last-child { opacity: 1; }
.chat-group-tail .chat-step-summary { min-height: var(--ctl-h-sm); }

.chat-steps,
.chat-older-body,
.chat-work-body {
  margin: var(--sp-1) 0 var(--sp-1) var(--sp-1h);
  padding: 0 0 0 var(--sp-3);
  border-inline-start: 1px solid var(--rule);
  list-style: none;
}

.chat-work-body { display: flex; flex-direction: column; gap: var(--sp-1h); padding-block: var(--sp-1); }

.chat-step { min-width: 0; }

.chat-step.is-think,
.chat-step.is-note {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--ctl-h-sm);
  color: var(--ink-faint);
  font-size: var(--fs-sm);
}

.chat-step-summary {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--ctl-h-sm);
  margin-inline: calc(-1 * var(--sp-1h));
  padding: var(--sp-h) var(--sp-1h);
  border-radius: var(--sp-1h);
  color: var(--ink-dim);
  font-size: var(--fs-md);
}

.chat-step-summary:hover { background: var(--wash-2); color: var(--ink); }

.chat-step-summary > .chat-icon + .chat-icon { color: var(--ink-faint); }

.chat-step-title {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-step-title.is-code { font-family: var(--mono); font-size: var(--fs-sm); }

.chat-step-state { flex: 0 0 auto; display: inline-flex; margin-inline-start: auto; }
.chat-step-state[data-state='err'] { color: var(--red); }
.chat-step-state[data-state='run']::before {
  content: '';
  width: 10px;
  height: 10px;
  border: 1.5px solid var(--accent-line);
  border-top-color: var(--teal);
  border-radius: 50%;
  animation: chat-spin 0.9s linear infinite;
}

@keyframes chat-spin { to { transform: rotate(360deg); } }

/* A failed step is marked, not shouted: the cross and the group's count say
   it, and a non-zero exit from a search with no match is not an alarm. */
.chat-step[data-state='err'] .chat-step-summary > .chat-icon + .chat-icon { color: var(--red); }

.chat-step-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1h);
  margin: var(--sp-1) 0 var(--sp-2) var(--sp-4);
}

.chat-target {
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: var(--fs-sm);
  overflow-wrap: anywhere;
}

.chat-quiet { color: var(--ink-faint); font-size: var(--fs-sm); }

.chat-think-text {
  margin: var(--sp-1) 0 var(--sp-2) var(--sp-4);
  color: var(--ink-dim);
  font-size: var(--fs-md);
  font-style: italic;
  line-height: 1.55;
  white-space: pre-wrap;
}

/* ---- output, input and diffs ---------------------------------------------- */

.chat-pre-wrap {
  position: relative;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--well-bg);
}

.chat-pre-wrap.is-command { background: var(--wash-1); }

.chat-pre {
  max-height: 22rem;
  margin: 0;
  padding: var(--sp-2) var(--sp-3);
  overflow: auto;
  color: var(--ink-dim);
  font-family: var(--mono);
  font-size: var(--fs-sm);
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  scrollbar-width: thin;
}

.chat-pre-wrap.is-command .chat-pre { color: var(--ink); }
.chat-pre-wrap.is-command .chat-pre::before { content: '$ '; color: var(--ink-faint); }

.chat-copy {
  position: absolute;
  inset-block-start: var(--sp-1);
  inset-inline-end: var(--sp-1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ctl-h-sm);
  height: var(--ctl-h-sm);
  border: 1px solid var(--edge);
  border-radius: var(--sp-1h);
  background: var(--surface-float);
  color: var(--ink-dim);
  opacity: 0;
  cursor: pointer;
  transition: opacity 140ms ease, color 140ms ease;
}

.chat-pre-wrap:hover .chat-copy,
.chat-copy:focus-visible { opacity: 1; }
.chat-copy:hover { color: var(--ink); }

.chat-full { align-self: flex-start; }

.chat-diff {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--well-bg);
}

.chat-diff-head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  padding: var(--sp-1h) var(--sp-3);
  border-bottom: 1px solid var(--rule);
  background: var(--wash-1);
  font-size: var(--fs-sm);
}

.chat-diff-name { color: var(--ink); font-weight: 600; }

.chat-diff-path {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: var(--fs-xs);
}

.chat-diff-body {
  max-height: 26rem;
  overflow: auto;
  padding-block: var(--sp-1);
  font-family: var(--mono);
  font-size: var(--fs-sm);
  line-height: 1.5;
  scrollbar-width: thin;
}

.chat-diff-line {
  padding: 0 var(--sp-3) 0 var(--sp-4);
  white-space: pre;
  color: var(--ink-dim);
}

.chat-diff-line.is-add { color: var(--ink); background: color-mix(in srgb, var(--green) 14%, transparent); box-shadow: inset 2px 0 0 var(--green); }
.chat-diff-line.is-del { color: var(--ink); background: color-mix(in srgb, var(--red) 14%, transparent); box-shadow: inset 2px 0 0 var(--red); }
.chat-diff-line.is-hunk { margin-top: var(--sp-1); color: var(--ink-faint); font-size: var(--fs-xs); }
.chat-diff-line.is-hunk:first-child { margin-top: 0; }

.chat-diffstat {
  display: inline-flex;
  gap: var(--sp-1h);
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
}

.chat-diffstat .is-add { color: var(--green); }
.chat-diffstat .is-del { color: var(--red); }

/* ---- a finished turn ------------------------------------------------------- */

.chat-work-summary { font-size: var(--fs-md); color: var(--ink-faint); }
.chat-work[hidden] { display: none; }

.chat-turn-after { display: flex; flex-direction: column; gap: var(--sp-2h); }
.chat-turn-after:empty { display: none; }

.chat-changes {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface-inset);
}

.chat-changes-summary {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--ctl-h-lg);
  padding: var(--sp-1) var(--sp-3);
  color: var(--ink-dim);
  font-size: var(--fs-md);
  border-radius: var(--radius);
}

.chat-changes-summary:hover { color: var(--ink); background: var(--wash-1); }
.chat-changes-label { flex: 1 1 auto; min-width: 0; }

.chat-changes-list {
  margin: 0;
  padding: var(--sp-1) var(--sp-3) var(--sp-2);
  border-top: 1px solid var(--rule);
  list-style: none;
}

.chat-changes-file {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--ctl-h-sm);
  font-size: var(--fs-md);
}

.chat-changes-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
  font-family: var(--mono);
  font-size: var(--fs-sm);
}

/* ---- notes, questions ------------------------------------------------------ */

.chat-note {
  display: flex;
  justify-content: center;
  gap: var(--sp-2);
  color: var(--ink-faint);
  font-size: var(--fs-sm);
}

.chat-note.is-warn { color: var(--amber); }
.chat-note.is-err { color: var(--red); }

.chat-ask {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--sp-2) var(--sp-2h);
  padding: var(--sp-3);
  border: 1px solid color-mix(in srgb, var(--amber) 42%, transparent);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--amber) 8%, transparent);
}

.chat-ask > .chat-icon { width: 16px; height: 16px; color: var(--amber); margin-top: var(--sp-h); }
.chat-ask-q { color: var(--ink); font-size: var(--fs-base); font-weight: 600; line-height: 1.45; }
.chat-ask-options,
.chat-ask-a,
.chat-ask-act { grid-column: 2; }
.chat-ask-act { justify-self: start; }
.chat-ask-options { display: flex; flex-wrap: wrap; gap: var(--sp-1h); }
.chat-ask-a { color: var(--ink-dim); font-size: var(--fs-md); white-space: pre-wrap; }

.chat-chip {
  padding: var(--sp-h) var(--sp-2);
  border: 1px solid var(--edge);
  border-radius: var(--radius-sm);
  color: var(--ink-dim);
  font-size: var(--fs-sm);
}

/* ---- the dock: plan, now, composer ---------------------------------------- */

.chat-jump {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-end: calc(var(--sp-5) * 5);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1h);
  height: var(--ctl-h);
  padding: 0 var(--sp-3);
  border: 1px solid var(--edge);
  border-radius: var(--radius-sm);
  background: var(--surface-float);
  box-shadow: var(--shadow-1);
  color: var(--ink-dim);
  font: 500 var(--fs-sm) var(--ui);
  transform: translateX(-50%);
  cursor: pointer;
}

.chat-jump:hover { color: var(--ink); border-color: var(--edge-hot); }
.chat-jump[hidden] { display: none; }

.chat-dock {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1h);
  width: 100%;
  max-width: calc(var(--chat-measure) + 2 * var(--chat-gutter));
  margin: 0 auto;
  padding: var(--sp-1h) var(--chat-gutter) var(--sp-3);
}

.chat-plan {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface-inset);
}

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

.chat-plan-summary {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--ctl-h);
  padding: var(--sp-1) var(--sp-3);
  color: var(--ink-dim);
  font-size: var(--fs-md);
}

.chat-plan-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.chat-plan-count { color: var(--ink-faint); font-variant-numeric: tabular-nums; }

.chat-plan-bar {
  flex: 0 0 48px;
  height: 3px;
  border-radius: var(--radius-sm);
  background: var(--wash-2);
  overflow: hidden;
}

.chat-plan-bar i { display: block; height: 100%; background: var(--teal); transition: inline-size 240ms ease; }

.chat-plan-list,
.chat-plan-steps {
  margin: 0;
  padding: var(--sp-1) var(--sp-3) var(--sp-2);
  list-style: none;
}

.chat-plan-list { border-top: 1px solid var(--rule); max-height: 12rem; overflow: auto; }

.chat-plan-step {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  padding: var(--sp-h) 0;
  color: var(--ink-dim);
  font-size: var(--fs-md);
  line-height: 1.45;
}

.chat-plan-step[data-status='active'] { color: var(--ink); font-weight: 600; }
.chat-plan-step[data-status='done'] .chat-plan-text { color: var(--ink-faint); text-decoration: line-through; text-decoration-color: var(--edge); }

.chat-plan-mark {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  border: 1.5px solid var(--edge-control);
  border-radius: 50%;
  transform: translateY(2px);
}

.chat-plan-step[data-status='active'] .chat-plan-mark { border-color: var(--teal); box-shadow: inset 0 0 0 2px var(--rack-3), inset 0 0 0 6px var(--teal); }
.chat-plan-step[data-status='done'] .chat-plan-mark { border-color: var(--green); background: var(--green); color: var(--on-accent); }
.chat-plan-mark .chat-icon { width: 8px; height: 8px; stroke-width: 3; }

.chat-live {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--ctl-h-sm);
  padding: 0 var(--sp-1);
  color: var(--ink-dim);
  font-size: var(--fs-md);
}

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

.chat-live-dot {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--teal);
  animation: chat-breathe 1.6s ease-in-out infinite;
}

.chat-live[data-tone='warn'] { color: var(--amber); }
.chat-live[data-tone='warn'] .chat-live-dot { background: var(--amber); }
.chat-live[data-tone='err'] { color: var(--red); }
.chat-live[data-tone='err'] .chat-live-dot,
.chat-live[data-tone='quiet'] .chat-live-dot { background: currentColor; animation: none; }
.chat-live[data-tone='quiet'] { color: var(--ink-faint); }

@keyframes chat-breathe {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}

.chat-live-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-live-time { flex: 0 0 auto; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.chat-live-act { margin-inline-start: auto; height: var(--pill-h); }

.chat-composer {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-2) var(--sp-2) var(--sp-1h) var(--sp-3);
  /* The room's accented line rather than its grey one (Kevin, 7 November): a
     white ring read as a hole in a green room. Focus is still the full teal
     and its glow. */
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-lg);
  background: var(--field-bg);
  box-shadow: var(--shadow-1);
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

/* The composer is the field: its rounded ring is the focus ring, so the text
   box inside it does not draw the room's square one as well. */
.chat-composer:focus-within { border-color: var(--teal); box-shadow: 0 0 0 3px var(--accent-glow); }
.chat-input:focus,
.chat-input:focus-visible { outline: none; }

.chat-input {
  width: 100%;
  min-height: 22px;
  max-height: 180px;
  padding: var(--sp-1) 0;
  border: 0;
  border-radius: 0;
  outline: none;
  resize: none;
  background: transparent;
  color: var(--ink);
  font-family: var(--ui);
  font-size: var(--fs-base);
  line-height: 1.5;
}

.chat-input::placeholder { color: var(--ink-faint); }
.chat-input:disabled { cursor: not-allowed; }

.chat-composer-row { display: flex; align-items: center; gap: var(--sp-2); }

/* ---- the model and effort picker ------------------------------------------ */

.chat-composer { position: relative; }

.chat-model {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  max-width: 60%;
  height: var(--ctl-h-sm);
  padding: 0 var(--sp-1h) 0 var(--sp-2);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink-dim);
  font: 500 var(--fs-sm) var(--ui);
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}

.chat-model:hover,
.chat-model[aria-expanded='true'] { background: var(--wash-2); color: var(--ink); }
.chat-model[hidden] { display: none; }
.chat-model .chat-icon { width: 11px; height: 11px; transform: rotate(-90deg); transition: transform 160ms ease; }
.chat-model[aria-expanded='true'] .chat-icon { transform: rotate(90deg); }
.chat-model-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Queued for the end of the turn: the label says what it will be, in the accent. */
.chat-model[data-state='queued'] { color: var(--teal); }
.chat-model[data-state='queued']::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: chat-breathe 1.6s ease-in-out infinite;
}

.chat-menu {
  position: absolute;
  inset-block-end: calc(100% + var(--sp-1h));
  inset-inline-start: 0;
  z-index: var(--z-float);
  display: flex;
  flex-direction: column;
  gap: var(--sp-h);
  width: min(320px, 100%);
  max-height: min(60vh, 460px);
  overflow-y: auto;
  padding: var(--sp-2);
  border: 1px solid var(--edge);
  border-radius: var(--radius-lg);
  background: var(--surface-float);
  box-shadow: var(--shadow-3);
  scrollbar-width: thin;
}

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

.chat-menu-title {
  margin: var(--sp-1h) var(--sp-2) var(--sp-1);
  color: var(--ink-faint);
  font-size: var(--fs-sm);
  font-weight: 500;
}

.chat-menu-title:first-child { margin-top: var(--sp-1); }

.chat-menu-model {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  padding: var(--sp-1h) var(--sp-2);
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink);
  text-align: start;
  cursor: pointer;
  transition: background 120ms ease;
}

.chat-menu-model:hover,
.chat-menu-model:focus-visible { background: var(--wash-2); outline: none; }
.chat-menu-model[aria-pressed='true'] { background: var(--accent-wash); }
.chat-menu-model .chat-icon { margin-inline-start: auto; color: var(--teal); }
.chat-menu-words { display: flex; flex-direction: column; min-width: 0; }
.chat-menu-name { font-size: var(--fs-base); font-weight: 600; }
.chat-menu-desc { overflow: hidden; color: var(--ink-faint); font-size: var(--fs-sm); text-overflow: ellipsis; white-space: nowrap; }

.chat-menu-efforts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-h);
  margin: 0 var(--sp-1) var(--sp-1);
  padding: var(--sp-h);
  border-radius: var(--radius-sm);
  background: var(--wash-2);
}

.chat-menu-effort {
  flex: 1 0 auto;
  height: var(--ctl-h-sm);
  padding: 0 var(--sp-2);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink-dim);
  font: 500 var(--fs-sm) var(--ui);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, box-shadow 120ms ease;
}

.chat-menu-effort:hover { color: var(--ink); }
.chat-menu-effort[aria-checked='true'] { background: var(--rack-3); color: var(--ink); box-shadow: var(--shadow-1), inset 0 0 0 1px var(--edge); }

.chat-menu-foot {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-1);
  padding: var(--sp-1h) var(--sp-2) var(--sp-h);
  border-top: 1px solid var(--rule);
}

.chat-menu-note { flex: 1 1 auto; margin: 0; color: var(--ink-faint); font-size: var(--fs-sm); line-height: 1.45; }

.chat-menu-cancel {
  flex: 0 0 auto;
  height: var(--ctl-h-sm);
  padding: 0 var(--sp-2);
  border: 1px solid var(--edge);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink-dim);
  font: 500 var(--fs-sm) var(--ui);
  cursor: pointer;
}

.chat-menu-cancel:hover { color: var(--ink); background: var(--wash-2); }

.chat-facts {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink-faint);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}

.chat-actions { display: flex; align-items: center; gap: var(--sp-1h); }

.chat-send,
.chat-stop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ctl-h);
  height: var(--ctl-h);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background 140ms ease, transform 140ms ease, opacity 140ms ease;
}

.chat-send { background: var(--teal); color: var(--on-accent); }
.chat-send:hover { background: var(--teal-hot); }
.chat-send:active,
.chat-stop:active { transform: scale(0.94); }
.chat-send:disabled { opacity: 0.45; cursor: default; }
.chat-stop { background: var(--wash-2); color: var(--ink); }
.chat-stop:hover { background: color-mix(in srgb, var(--red) 14%, transparent); color: var(--red); }
.chat-stop[hidden] { display: none; }
.chat-send .chat-icon,
.chat-stop .chat-icon { width: 14px; height: 14px; stroke-width: 2.2; }
.chat-stop .chat-icon { fill: currentColor; stroke-width: 0; }

/* A short pane: one row of composer, no facts line, a tighter dock. The facts
   are still the composer's title on hover. */
.chat[data-size='short'] .chat-dock { gap: var(--sp-1); padding-block: var(--sp-1) var(--sp-2); }
.chat[data-size='short'] .chat-composer { flex-direction: row; align-items: flex-end; gap: var(--sp-2); padding-block: var(--sp-1); }
.chat[data-size='short'] .chat-input { flex: 1 1 auto; }
.chat[data-size='short'] .chat-composer-row { flex: 0 0 auto; }
.chat[data-size='short'] .chat-facts { display: none; }
.chat[data-size='short'] .chat-log { padding-top: var(--sp-2); }
.chat[data-size='short'] .chat-plan-list { max-height: 6rem; }

/* A narrow pane: the measure is the pane, and the gutters come in. */
@container (max-width: 520px) {
  .chat { --chat-gutter: var(--sp-2h); }
  .chat-user { max-width: 92%; }
  .chat-text { font-size: var(--fs-base); }
}