/* ─── P2.4.1 — AGENT PAGE ─────────────────────────────────────────────────────
   Three fixed-height columns inside the standard cream .view-page panel:
     chat list (200px) | chat (1fr) | plan (320px)
   Every box is sized by the grid and scrolls internally, so switching provider,
   sending a message, or approving a plan never changes the height of anything
   around it (invariant #20). Under 900px the columns stack.
   Colours come from styles/tokens.css; the chat bubbles deliberately echo the
   Assistant chat (styles/assistant.css) so the two read as the same family. */

.view-page.agent-view {
  /* .view-page scrolls its own content; this page owns its scrolling per column. */
  overflow: hidden;
  color: var(--ink);
  min-height: 0;
}

/* ── page header ── */
.agent-head {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 2px 4px 10px;
  border-bottom: 1px solid var(--card-border);
}
.agent-head-l { min-width: 0; }
.agent-title {
  font-family: var(--font-display);
  font-size: var(--fs-30);
  letter-spacing: var(--track-02);
  margin: 0;
  color: var(--ink);
  line-height: 1.1;
}
.agent-sub {
  margin: 4px 0 0;
  font-size: var(--fs-12-5);
  color: var(--ink-muted);
  line-height: 1.45;
}
.agent-newchat { flex: 0 0 auto; }

/* ── the three columns ── */
.agent-body {
  flex: 1 1 auto;
  min-height: 420px;   /* never collapses, even where --app-vh resolves to 0 */
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
}

/* ── chat list ── */
.agent-chatlist {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border: 1px solid var(--card-border);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--cream-2) 55%, transparent);
  overflow: hidden;
}
.agent-chatlist-head {
  flex: 0 0 auto;
  height: 34px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  font-size: var(--fs-10-5);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-08);
  text-transform: uppercase;
  color: var(--ink-muted);
  background: color-mix(in srgb, var(--card-border) 16%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--card-border) 34%, transparent);
}
.agent-chatlist-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--tan-deep) 35%, transparent) transparent;
}
.agent-chatlist-empty {
  padding: 16px 10px;
  font-size: var(--fs-12);
  line-height: 1.5;
  color: var(--ink-muted);
}
.agent-chatrow {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: transparent;
  padding: 7px 9px;
  cursor: pointer;
  color: var(--ink);
  transition: background var(--dur-1) ease, border-color var(--dur-1) ease;
}
.agent-chatrow:hover { background: color-mix(in srgb, var(--ivory) 55%, transparent); }
.agent-chatrow.is-on {
  background: color-mix(in srgb, var(--leaf) 16%, transparent);
  border-color: color-mix(in srgb, var(--leaf) 45%, transparent);
}
.agent-chatrow-t {
  display: block;
  font-size: var(--fs-12-5);
  font-weight: var(--fw-semi);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.agent-chatrow-m {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  min-height: 14px;   /* the kind chip is optional — reserve its row either way */
}
.agent-chatrow-kind {
  font-size: var(--fs-9-5);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-05);
  text-transform: uppercase;
  color: color-mix(in srgb, var(--teal) 70%, var(--ink));
  background: var(--tint-teal);
  border-radius: var(--r-pill);
  padding: 1px 6px;
}
.agent-chatrow-when { font-size: var(--fs-11); color: var(--ink-muted); }
.agent-chatlist-status {
  flex: 0 0 auto;
  min-height: 30px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  font-size: var(--fs-11);
  line-height: 1.35;
  color: var(--ink-muted);
  border-top: 1px solid color-mix(in srgb, var(--card-border) 34%, transparent);
  white-space: pre-wrap;
}
.agent-chatlist-status.is-err { color: var(--danger); }

/* ── chat + plan (the reusable AgentChat body) ── */
.agent-chat {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 14px;
  align-items: stretch;
}

.agent-main {
  position: relative;          /* v6 — the drop veil sits on top of the whole column */
  display: flex;
  flex-direction: column;
  min-height: 0;
  border: 1px solid var(--card-border);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--cream-2) 55%, transparent);
  overflow: hidden;
}

/* messages */
.agent-msgs {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--tan-deep) 35%, transparent) transparent;
}
.agent-empty { color: var(--ink-muted); padding: 6px 2px; }
.agent-empty-title { font-size: var(--fs-13-5); font-weight: var(--fw-bold); color: var(--ink); margin-bottom: 6px; }
.agent-empty-body { font-size: var(--fs-12-5); line-height: 1.55; max-width: 52ch; }

.agent-msg { display: flex; }
.agent-msg--user { justify-content: flex-end; }
.agent-msg--assistant,
.agent-msg--tool { justify-content: flex-start; }
.agent-bub {
  max-width: 86%;
  padding: 9px 12px;
  border-radius: 13px;
  font-size: var(--fs-13);
  line-height: 1.5;
  word-break: break-word;
}
.agent-msg--user .agent-bub {
  background: linear-gradient(150deg, color-mix(in srgb, var(--gold-2) 94%, var(--mix-dark)), var(--gold) 70%);
  color: var(--white);
  border-bottom-right-radius: 5px;
}
.agent-msg--assistant .agent-bub {
  background: color-mix(in srgb, var(--mix-light) 62%, transparent);
  color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--card-border) 40%, transparent);
  border-bottom-left-radius: 5px;
}
.agent-bub-text { display: block; white-space: pre-wrap; }

/* v3 — Markdown in the assistant's bubbles (Hugo: "formating is not working, i
   dont like seeing all these signs"). Built by src/agentMarkdown.js as React
   elements, never innerHTML. Tight spacing, so a bubble stays a bubble. */
.agent-md { white-space: normal; }
.agent-md > * + * { margin-top: 6px; }
.agent-md-h {
  font-size: var(--fs-11);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-14);
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: 10px;
}
.agent-md-h:first-child { margin-top: 0; }
.agent-md-p { margin: 0; }
.agent-md-ul, .agent-md-ol { margin: 0; padding-left: 20px; }
.agent-md-ul li + li, .agent-md-ol li + li { margin-top: 3px; }
.agent-md-ul li::marker, .agent-md-ol li::marker { color: var(--ink-muted); }
.agent-md strong { font-weight: var(--fw-bold); }
.agent-md em { font-style: italic; }
.agent-md code {
  font-family: var(--font-mono);
  font-size: var(--fs-11-5);
  background: color-mix(in srgb, var(--tan-deep) 10%, transparent);
  border-radius: 4px;
  padding: 1px 4px;
}
.agent-md-pre {
  margin: 0;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--tan-deep) 10%, transparent);
  font-family: var(--font-mono);
  font-size: var(--fs-11-5);
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-x: auto;
}
.agent-md-pre code { background: none; padding: 0; }
.agent-md-quote {
  margin: 0;
  padding-left: 10px;
  border-left: 2px solid color-mix(in srgb, var(--tan-deep) 35%, transparent);
  color: var(--ink-muted);
}
.agent-md-hr { border: 0; border-top: 1px solid color-mix(in srgb, var(--tan-deep) 25%, transparent); margin: 8px 0; }
.agent-md a { color: inherit; text-decoration: underline; }

/* v4 — photos in the chat (Hugo: "i cant seem to be able to add photos to the chat
   here. this is needed."). The strip is ALWAYS rendered at one height (inv. #20):
   the button, then the thumbs of the photos waiting to go with the next message. */
.agent-attach {
  display: flex; align-items: center; gap: 8px;
  height: 56px; padding: 0 2px;
  border-radius: var(--r-panel);
}
.agent-attach.is-over { outline: var(--ring-w) dashed color-mix(in srgb, var(--teal) 60%, transparent); outline-offset: -2px; background: color-mix(in srgb, var(--teal) 8%, transparent); }
.agent-attach-btn {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 11px; border-radius: 15px;
  border: 1px solid color-mix(in srgb, var(--tan-deep) 22%, transparent);
  background: color-mix(in srgb, var(--tan-deep) 10%, transparent);
  color: var(--ink); font-size: var(--fs-12); font-weight: var(--fw-med);
  cursor: pointer;
  transition: background var(--dur-1) ease;
}
.agent-attach-btn:hover { background: color-mix(in srgb, var(--tan-deep) 20%, transparent); }
.agent-attach-btn:disabled { opacity: 0.5; cursor: default; }
.agent-attach-list { flex: 1; min-width: 0; height: 100%; display: flex; align-items: center; gap: 6px; overflow-x: auto; }
.agent-attach-hint { font-size: var(--fs-11-5); color: var(--ink-muted); white-space: nowrap; }
.agent-attach-thumb {
  position: relative; flex: none;
  width: 44px; height: 44px; border-radius: var(--r-sm); overflow: hidden;
  background: color-mix(in srgb, var(--tan-deep) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--tan-deep) 22%, transparent);
  display: grid; place-items: center;
}
.agent-attach-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.agent-attach-x {
  position: absolute; top: 1px; right: 1px;
  width: 16px; height: 16px; border-radius: 50%; border: 0; padding: 0;
  background: rgba(0, 0, 0, 0.55); color: var(--white);
  font-size: var(--fs-12); line-height: 16px; cursor: pointer;
}
.agent-bub-imgs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.agent-bub-img {
  width: 132px; height: 132px; object-fit: cover; display: block;
  border-radius: var(--r-sm); border: 1px solid var(--line-soft);
  cursor: zoom-in;
}
.agent-attach-img.is-broken, .agent-bub-img.is-broken { display: grid; place-items: center; color: var(--ink-muted); }

/* a tool / plan turn — a compact card, never a bubble */
.agent-toolcard {
  max-width: 86%;
  border: 1px solid color-mix(in srgb, var(--teal) 38%, transparent);
  background: var(--tint-teal);
  border-radius: var(--r-sm);
  padding: 7px 10px;
}
.agent-toolcard--inline { max-width: none; margin-top: 8px; }
.agent-toolcard-head {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  font-weight: var(--fw-semi);
  color: color-mix(in srgb, var(--teal) 70%, var(--ink));
  letter-spacing: var(--track-01);
}
.agent-toolcard-body {
  margin-top: 2px;
  font-size: var(--fs-11-5);
  line-height: 1.45;
  color: var(--ink-muted);
  word-break: break-word;
}

/* "thinking…" — the slot is ALWAYS here so the composer never moves (inv. #20) */
.agent-thinking {
  flex: 0 0 auto;
  min-height: 26px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
}
.agent-thinking-t { font-size: var(--fs-11-5); color: var(--ink-muted); }
.agent-dots { display: inline-flex; gap: 4px; align-items: center; }
.agent-dots span {
  width: 6px; height: 6px; border-radius: 50%;
  background: color-mix(in srgb, var(--ink-muted) 55%, transparent);
  animation: agentBlink 1.2s infinite ease-in-out;
}
.agent-dots span:nth-child(2) { animation-delay: 0.18s; }
.agent-dots span:nth-child(3) { animation-delay: 0.36s; }
@keyframes agentBlink {
  0%, 80%, 100% { opacity: 0.3; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) { .agent-dots span { animation: none; } }

/* composer */
.agent-composer {
  flex: 0 0 auto;
  padding: 8px 12px 6px;
  border-top: 1px solid color-mix(in srgb, var(--card-border) 40%, transparent);
  background: color-mix(in srgb, var(--mix-light) 28%, transparent);
}
.agent-seg {
  display: inline-flex;
  background: color-mix(in srgb, var(--ink-muted) 12%, transparent);
  border-radius: var(--r-9);
  padding: 2px;
  margin-bottom: 7px;
}
.agent-seg-btn {
  font: inherit;
  font-size: var(--fs-11-5);
  font-weight: var(--fw-bold);
  border: 0;
  background: transparent;
  color: var(--ink-muted);
  padding: 4px 10px;
  border-radius: var(--r-7);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur-1) ease, color var(--dur-1) ease;
}
.agent-seg-btn:hover { color: var(--ink); }
.agent-seg-btn.is-on { background: var(--mix-light); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }

.agent-composer-row { display: flex; align-items: flex-end; gap: 8px; }
.agent-input {
  flex: 1 1 auto;
  resize: none;
  font: inherit;
  font-size: var(--fs-13);
  line-height: 1.45;
  height: 72px;              /* fixed — growing would shove the list (inv. #20) */
  padding: 8px 11px;
  border: 1px solid var(--card-border);
  border-radius: 11px;
  background: color-mix(in srgb, var(--mix-light) 72%, transparent);
  color: var(--ink);
  outline: none;
  overflow-y: auto;
}
.agent-input:focus { border-color: color-mix(in srgb, var(--gold) 75%, transparent); }
.agent-input:disabled { opacity: 0.6; cursor: default; }
.agent-send {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  border-radius: 11px;
  border: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
  color: var(--white);
  background: linear-gradient(150deg, color-mix(in srgb, var(--gold-10) 75%, var(--mix-light)), var(--gold) 70%);
  transition: filter var(--dur-1) ease, opacity var(--dur-1) ease;
}
.agent-send:hover:not(:disabled) { filter: brightness(1.06); }
.agent-send:disabled { opacity: 0.45; cursor: default; }

/* errors live here, never in a browser alert (invariant #22). Clamped to one
   line — pre-wrap would let a long error wrap to a second line and grow the
   row, nudging the composer above it (inv. #20); the full text is still on
   the element's title tooltip. */
.agent-statusline {
  min-height: 20px;
  padding: 3px 2px 0;
  font-size: var(--fs-11-5);
  line-height: 1.4;
  color: var(--ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.agent-statusline.is-err { color: var(--danger); }

/* ── plan panel ── identical box in every state ── */
.agent-plan {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border: 1px solid var(--card-border);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--cream-2) 55%, transparent);
  overflow: hidden;
}
.agent-plan-head {
  flex: 0 0 auto;
  height: 38px;                /* fixed — the status pill can't grow the header */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 12px;
  background: color-mix(in srgb, var(--card-border) 16%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--card-border) 34%, transparent);
}
.agent-plan-title {
  font-size: var(--fs-11);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-08);
  text-transform: uppercase;
  color: var(--ink-muted);
}
.agent-plan-pill {
  font-size: var(--fs-10);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-04);
  text-transform: uppercase;
  border-radius: var(--r-pill);
  padding: 2px 9px;
  background: var(--tint-archive);
  color: var(--ink-muted);
  white-space: nowrap;
}
.agent-plan-pill.is-open { background: var(--tint-amber); color: var(--ink-tan-deep); }
.agent-plan-pill.is-done { background: var(--tint-leaf); color: var(--olive-9); }
.agent-plan-pill.is-warn { background: color-mix(in srgb, var(--danger-2) 14%, transparent); color: var(--danger); }

.agent-plan-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--tan-deep) 35%, transparent) transparent;
}
.agent-plan-empty {
  padding: 18px 10px;
  font-size: var(--fs-12);
  line-height: 1.55;
  color: var(--ink-muted);
}

.agent-act {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 7px 9px;
  border: 1px solid color-mix(in srgb, var(--card-border) 45%, transparent);
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--mix-light) 50%, transparent);
}
.agent-act.is-failed { border-color: color-mix(in srgb, var(--danger-2) 42%, transparent); background: color-mix(in srgb, var(--danger-2) 7%, transparent); }
.agent-act-ic {
  flex: 0 0 auto;
  width: 18px; height: 18px;
  margin-top: 1px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--ink-muted) 14%, transparent);
  color: var(--ink-muted);
}
.agent-act-ic.is-done { background: var(--tint-leaf); color: var(--olive-9); }
.agent-act-ic.is-failed { background: color-mix(in srgb, var(--danger-2) 16%, transparent); color: var(--danger); }
.agent-act-ic.is-running { background: var(--tint-amber); color: var(--ink-tan-deep); }
.agent-act-main { min-width: 0; flex: 1 1 auto; }
.agent-act-tool {
  font-family: var(--font-mono);
  font-size: var(--fs-11-5);
  font-weight: var(--fw-semi);
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.agent-act-args {
  font-size: var(--fs-11);
  line-height: 1.4;
  color: var(--ink-muted);
  /* one line, always — a long args blob can't push the rows below it */
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
.agent-act-res,
.agent-act-err {
  margin-top: 3px;
  font-size: var(--fs-11);
  line-height: 1.4;
  word-break: break-word;
}
.agent-act-res { color: var(--ok-deep); }
.agent-act-err { color: var(--danger); }
.agent-undo {
  flex: 0 0 auto;
  font: inherit;
  font-size: var(--fs-10-5);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-03);
  border: 1px solid color-mix(in srgb, var(--teal) 45%, transparent);
  background: var(--tint-teal);
  color: color-mix(in srgb, var(--teal) 70%, var(--ink));
  border-radius: var(--r-pill);
  padding: 3px 9px;
  cursor: pointer;
  min-width: 52px;
  text-align: center;
}
.agent-undo:hover:not(:disabled) { background: color-mix(in srgb, var(--teal) 24%, transparent); }
.agent-undo:disabled { opacity: 0.55; cursor: default; }
.agent-undo.is-done { border-color: color-mix(in srgb, var(--archive) 50%, transparent); background: var(--tint-archive); color: var(--ink-muted); }

.agent-plan-foot {
  flex: 0 0 auto;
  min-height: 46px;          /* fixed — Approve/Discard/confirm all share this row */
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border-top: 1px solid color-mix(in srgb, var(--card-border) 34%, transparent);
  background: color-mix(in srgb, var(--mix-light) 28%, transparent);
}
.agent-plan-note {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--fs-11-5);
  color: var(--ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* buttons — same language as .pill-button, sized for these compact rows */
.agent-btn {
  flex: 0 0 auto;
  font: inherit;
  font-size: var(--fs-11-5);
  font-weight: var(--fw-bold);
  height: 28px;
  padding: 0 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--card-border);
  background: color-mix(in srgb, color-mix(in srgb, var(--hi) 71%, var(--mix-light)) 70%, transparent);
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur-1) ease, border-color var(--dur-1) ease, opacity var(--dur-1) ease;
}
.agent-btn:hover:not(:disabled) { background: color-mix(in srgb, var(--ivory) 95%, transparent); }
.agent-btn:disabled { opacity: 0.4; cursor: default; }
.agent-btn--go {
  border-color: color-mix(in srgb, var(--leaf) 60%, transparent);
  background: var(--leaf);
  color: var(--white);
}
.agent-btn--go:hover:not(:disabled) { filter: brightness(1.05); background: var(--leaf); }
.agent-btn--danger {
  border-color: color-mix(in srgb, var(--danger-2) 50%, transparent);
  background: color-mix(in srgb, var(--danger-2) 12%, transparent);
  color: var(--danger);
}
.agent-btn--danger:hover:not(:disabled) { background: color-mix(in srgb, var(--danger-2) 20%, transparent); }

/* ── stacked layout ── */
@media (max-width: 900px) {
  .agent-body { grid-template-columns: minmax(0, 1fr); }
  .agent-chat { grid-template-columns: minmax(0, 1fr); }
  .view-page.agent-view { overflow-y: auto; }
  .agent-chatlist { max-height: 200px; }
  .agent-main { min-height: 380px; }
  .agent-plan { min-height: 260px; }
  .agent-head { flex-wrap: wrap; }
  .agent-title { font-size: var(--fs-26); }
}
body[data-ui-tier="s"] .view-page.agent-view { overflow-y: auto; }
body[data-ui-tier="s"] .agent-body { grid-template-columns: minmax(0, 1fr); }
body[data-ui-tier="s"] .agent-chat { grid-template-columns: minmax(0, 1fr); }
body[data-ui-tier="s"] .agent-chatlist { max-height: 180px; }
body[data-ui-tier="s"] .agent-toolcard,
body[data-ui-tier="s"] .agent-bub { max-width: 94%; }

/* v6 — paste or drop photos anywhere on the chat column; the strip appears only once
   there is a photo waiting. */
.agent-dropveil {
  position: absolute; inset: 6px; z-index: 3;
  border: 2px dashed color-mix(in srgb, var(--teal) 70%, transparent);
  border-radius: var(--r-panel);
  background: color-mix(in srgb, var(--teal) 10%, transparent);
  display: grid; place-items: center;
  font-size: var(--fs-13); font-weight: var(--fw-semi); color: color-mix(in srgb, var(--teal) 70%, var(--ink));
  pointer-events: none;
}
.agent-attach { height: 56px; padding: 0 2px 6px; }

/* v5 — the reply as it streams in: a soft caret after the last block. */
.agent-msg--live .agent-md > :last-child::after {
  content: "\258D";
  margin-left: 2px;
  color: var(--ink-muted);
  animation: agentCaret 1s steps(2, start) infinite;
}
@keyframes agentCaret { to { visibility: hidden; } }

/* ── rename a conversation in place (15 Sep 2026) ──────────────────────────────
   Hugo: "i cant seem to be able to name or rename a chat. i need to stay organised".
   The pencil is absolutely positioned and the rename field is the exact box of the
   title line (an inset shadow, not a border), so neither showing the pencil nor
   entering edit mode moves a single pixel. */
.agent-chatrow-wrap { position: relative; }
.agent-chatrow-wrap .agent-chatrow { padding-right: 26px; }
.agent-chatrow-edit {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--ink-muted);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--dur-1) ease, background var(--dur-1) ease, color var(--dur-1) ease;
}
.agent-chatrow-wrap:hover .agent-chatrow-edit,
.agent-chatrow-edit:focus-visible { opacity: 1; }
.agent-chatrow-edit:hover {
  background: color-mix(in srgb, var(--leaf) 18%, transparent);
  color: var(--ink);
}
.agent-chatrow-edit svg { width: 12px; height: 12px; }
.agent-rename-input {
  display: block;
  width: 100%;
  font: inherit;
  font-size: var(--fs-12-5);
  font-weight: var(--fw-semi);
  line-height: inherit;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--leaf) 70%, transparent);
}
.agent-rename-input:focus {
  outline: none;
  box-shadow: inset 0 -2px 0 var(--leaf);
}


/* 16 Sep 2026 — the Plan drawer is INTAKE ONLY now, so the project agent's chat takes the

   full width instead of leaving a 320px column showing nothing. */

.agent-chat--project { grid-template-columns: minmax(0, 1fr); }



/* Messages typed while the agent was thinking. They wait in order and go one at a time. */

.agent-msg--queued .agent-bub { opacity: 0.62; }

.agent-queued-tag {

  margin-top: 4px;

  font-size: 10px;

  letter-spacing: 0.14em;

  text-transform: uppercase;

  opacity: 0.7;

}

/* 23 Sep 2026 — the "this spends credits" card in a project chat (src/AgentPage.jsx). Tokens only. */
.agent-spend { border: 1px solid color-mix(in srgb, var(--warn) 55%, transparent); background: color-mix(in srgb, var(--warn) 8%, var(--panel-raised, transparent)); }
.agent-spend-title { font-size: var(--fs-12); font-weight: var(--fw-bold); letter-spacing: var(--track-10); text-transform: uppercase; color: var(--ink); margin-bottom: 6px; }
.agent-spend-line { font-size: var(--fs-13); line-height: 1.45; color: var(--ink); }
.agent-spend-line.is-err { color: var(--danger); }
.agent-spend-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 10px; min-height: 32px; }
.agent-spend-note { margin-right: auto; font-size: var(--fs-12-5); color: var(--ink-muted); }