/* ==========================================================================
   G-Micro — design tokens
   ==========================================================================
   Apple-as-precision-instrument, per UI-SPEC.md. Dark only. Zero colour in
   the interface — greyscale + white, one exception: a muted red for errors,
   because if white means "activation", any other colour must mean something
   equally load-bearing. Colour is an alarm, never decoration.
*/

:root {
  --black:  #000000;
  --panel:  rgba(255,255,255,0.03);
  --glass:  rgba(255,255,255,0.06);
  --glass-strong: rgba(255,255,255,0.10);
  --line:   rgba(255,255,255,0.08);
  --line-strong: rgba(255,255,255,0.16);

  --ink-dim:    rgba(255,255,255,0.38);   /* user's own messages, chrome labels */
  --ink-mid:    rgba(255,255,255,0.62);
  --ink:        rgba(255,255,255,0.92);   /* model text, primary content */
  --ink-full:   #ffffff;                  /* neuron glow, token flash peak */

  --error: #c96257;      /* muted red — the ONLY colour in the app */
  --error-glow: rgba(201,98,87,0.35);

  --font-ui:   -apple-system, "Inter", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;

  --radius-s: 8px;
  --radius-m: 14px;
  --radius-l: 20px;

  --titlebar-h: 40px;
}

@media (prefers-contrast: more) {
  :root {
    --ink-dim: rgba(255,255,255,0.62);
    --line: rgba(255,255,255,0.28);
    --glass: rgba(255,255,255,0.14);
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  width: 100%; height: 100%;
  background: var(--black);
  color: var(--ink);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  user-select: none;
}

body { font-size: 14px; line-height: 1.5; letter-spacing: 0; }

::selection { background: rgba(255,255,255,0.22); }

button {
  font-family: inherit; color: inherit; background: none; border: none;
  cursor: pointer; -webkit-app-region: no-drag;
}
button:focus-visible, [tabindex]:focus-visible, textarea:focus-visible {
  outline: 1px solid var(--ink-mid);
  outline-offset: 2px;
  border-radius: var(--radius-s);
}

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ---- window chrome --------------------------------------------------- */

#titlebar {
  position: fixed; top: 0; left: 0; right: 0; height: var(--titlebar-h);
  -webkit-app-region: drag;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 12px 0 78px; /* left clears the native traffic lights */
  background: rgba(10,10,10,0.55);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  z-index: 100;
}
@media (prefers-reduced-transparency: reduce) {
  #titlebar { background: #0c0c0c; backdrop-filter: none; -webkit-backdrop-filter: none; }
}
#titlebar .brand {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.02em;
  color: var(--ink-dim); display: flex; gap: 10px; align-items: baseline;
}
#titlebar .brand b { color: var(--ink-mid); font-weight: 500; }

.chrome-btn {
  width: 26px; height: 26px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-dim); -webkit-app-region: no-drag; flex-shrink: 0;
}
.chrome-btn:hover { background: var(--glass); color: var(--ink-mid); }
.chrome-btn:active { transform: scale(0.92); }

/* ---- layout ------------------------------------------------------------ */

/* The conversation owns the whole window. The instrument panel returns as a
   second column only when ⌥⌘D asks for it — a chat should look like a chat,
   not like a chat docked to an oscilloscope. */
/* minmax(0, 1fr) rather than the implicit auto row: an auto row is sized by
   its content, so a long conversation made the pane taller than the window
   instead of scrolling inside it, and the composer rode off the bottom edge. */
#shell {
  position: fixed; inset: 0; top: var(--titlebar-h);
  display: grid; grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr);
}
body.show-panel #shell { grid-template-columns: 42% 58%; }

#conversation-pane {
  position: relative;
  display: flex; flex-direction: column;
  min-width: 0; min-height: 0;
}
body.show-panel #conversation-pane { border-right: 1px solid var(--line); }

#panel-pane {
  position: relative;
  display: none; flex-direction: column;
  min-width: 0;
}
body.show-panel #panel-pane { display: flex; }

.panel-readout {
  margin-left: auto; align-self: center; padding-right: 4px;
  font-size: 10.5px; color: var(--ink-dim); letter-spacing: 0.02em;
  display: flex; gap: 8px;
}

/* ---- tabs ---------------------------------------------------------- */

#tabs {
  display: flex; gap: 2px; padding: 10px 14px 0;
  flex-shrink: 0;
}
.tab {
  padding: 7px 14px; font-size: 12.5px; color: var(--ink-dim);
  border-radius: var(--radius-s) var(--radius-s) 0 0;
  position: relative;
}
.tab[aria-selected="true"] { color: var(--ink); }
.tab .indicator {
  position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px;
  background: var(--ink-full); border-radius: 2px;
  transform-origin: left;
}

.panel-body { flex: 1; position: relative; min-height: 0; }
.panel-view { position: absolute; inset: 0; display: none; }
.panel-view.active { display: block; }

/* ---- neurons canvas -------------------------------------------------- */

#neurons-wrap { position: relative; width: 100%; height: 100%; }
#neurons-canvas { display: block; width: 100%; height: 100%; }
#neuron-tooltip {
  position: absolute; pointer-events: none;
  font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-mid);
  background: rgba(20,20,20,0.85); backdrop-filter: blur(12px);
  border: 1px solid var(--line-strong);
  padding: 4px 8px; border-radius: 6px;
  transform: translate(-50%, -130%);
  opacity: 0; transition: opacity 120ms ease-out;
  white-space: nowrap; z-index: 5;
}
#neuron-tooltip.show { opacity: 1; }

#pinned-chart {
  position: absolute; left: 14px; right: 14px; bottom: 14px; height: 64px;
  background: rgba(255,255,255,0.04); backdrop-filter: blur(16px);
  border: 1px solid var(--line); border-radius: var(--radius-m);
  padding: 8px 10px;
  opacity: 0; transform: translateY(8px);
  transition: none; /* driven by JS spring */
  pointer-events: none;
}
#pinned-chart.visible { pointer-events: auto; }
#pinned-chart .label {
  font-family: var(--font-mono); font-size: 10px; color: var(--ink-dim);
  display: flex; justify-content: space-between; margin-bottom: 4px;
}
#pinned-chart canvas { width: 100%; height: 34px; display: block; }

/* ---- probabilities ---------------------------------------------------- */

#probabilities-view { padding: 22px 24px; overflow-y: auto; }
#prob-bars { position: relative; height: 300px; }
.prob-row {
  position: absolute; left: 0; right: 0; height: 26px;
  display: flex; align-items: center; gap: 10px;
}
.prob-row .rank {
  font-family: var(--font-mono); font-size: 10px; color: var(--ink-dim);
  width: 16px; text-align: right; flex-shrink: 0;
}
.prob-row .token {
  font-size: 12.5px; color: var(--ink-mid); width: 108px; flex-shrink: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: pre;
}
.prob-row .track {
  flex: 1; height: 5px; background: rgba(255,255,255,0.06);
  border-radius: 3px; overflow: hidden;
}
.prob-row .fill { height: 100%; background: var(--ink-full); border-radius: 3px; }
.prob-row .pct {
  font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-dim);
  width: 44px; text-align: right; flex-shrink: 0;
}

#confidence {
  margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line);
}
#confidence .row {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 8px;
}
#confidence .label {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-dim);
}
#confidence .state { font-family: var(--font-mono); font-size: 12px; color: var(--ink-mid); }
#confidence .track {
  height: 4px; background: rgba(255,255,255,0.06); border-radius: 2px; overflow: hidden;
}
#confidence .fill { height: 100%; background: var(--ink-mid); border-radius: 2px; }

/* ---- conversation ------------------------------------------------------ */

/* A reading column rather than a full-width sheet: text set across a whole
   16-inch window is hard to track line to line. Centred, capped, and roomier
   than the old 40%-pane sizing now that there is space to be generous. */
/* min-height: 0 is load-bearing. A flex item defaults to min-height: auto,
   which refuses to shrink below its own content — so overflow-y: auto never
   engaged and the conversation pushed the composer off-screen instead of
   scrolling. */
#messages {
  flex: 1; min-height: 0; overflow-y: auto; padding: 34px 24px;
  /* The composer floats over the transcript, so the last message has to clear
     it. Its height is measured rather than assumed — it grows by a whole row
     when a photo is attached, and a fixed constant is wrong in one state or
     the other. */
  padding-bottom: calc(var(--composer-h, 150px) + 28px);
  display: flex; flex-direction: column; gap: 26px;
  width: 100%; max-width: 720px; margin: 0 auto;
}
body.show-panel #messages { padding: 20px 22px; gap: 22px; }

/* The user's own turn as a quiet bubble on the right — the one place a colour
   block is worth it, because "who said this" should be readable at a glance
   without reading a word. */
.msg-user {
  align-self: flex-end; max-width: 82%;
  color: var(--ink); font-size: 15px; line-height: 1.55;
  background: var(--glass); border: 1px solid var(--line);
  padding: 10px 14px; border-radius: 16px 16px 4px 16px;
  white-space: pre-wrap; word-wrap: break-word;
}
body.show-panel .msg-user { font-size: 13.5px; }
.msg-assistant {
  align-self: flex-start; max-width: 100%;
  color: var(--ink); font-size: 16px; line-height: 1.7;
  white-space: pre-wrap; word-wrap: break-word;
}
body.show-panel .msg-assistant { font-size: 14.5px; line-height: 1.65; }
/* Names the retrieved document above the answer built from it. Quiet on
   purpose — it is provenance, not content — but present, because retrieval
   being invisible is what made one bad hit look like a broken model. */
.msg-context-source {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.02em;
  color: var(--ink-dim);
  margin-bottom: 6px; white-space: normal;
}
.msg-assistant .tok { transition: none; } /* driven by JS spring per-token */
.msg-assistant .cursor {
  display: inline-block; width: 7px; height: 15px; margin-left: 1px;
  background: var(--ink-full); vertical-align: text-bottom;
  animation: blink 1s step-end infinite;
}
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cursor { animation: none; } }

.msg-error {
  font-size: 12px; color: var(--error); display: flex; align-items: center; gap: 10px;
}
.msg-error button {
  font-family: var(--font-mono); font-size: 11px; color: var(--error);
  border: 1px solid var(--error); border-radius: 5px; padding: 3px 9px;
}
.msg-error button:hover { background: var(--error-glow); }

/* ---- input -------------------------------------------------------------- */

/* The composer is centred on the same column as the messages, so the caret
   lines up with the text it produces instead of running the window's width. */
#input-composer {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 0 24px 18px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: linear-gradient(to top, var(--black) 55%, transparent);
}
#input-composer > * { width: 100%; max-width: 720px; }
body.show-panel #input-composer { padding: 0 16px 16px; }

#composer-hint {
  text-align: center; font-size: 11.5px; color: var(--ink-dim);
  letter-spacing: 0.01em;
}

#input-bar {
  position: relative;
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-l);
  padding: 11px 14px;
  display: flex; align-items: flex-end; gap: 8px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.4);
}
@media (prefers-reduced-transparency: reduce) {
  #input-bar { background: #141414; backdrop-filter: none; -webkit-backdrop-filter: none; }
}
#input-field {
  flex: 1; resize: none; border: none; background: none; color: var(--ink);
  font-family: var(--font-ui); font-size: 14px; line-height: 1.5;
  max-height: 160px; padding: 3px 2px;
  -webkit-app-region: no-drag;
}
#input-field::placeholder { color: var(--ink-dim); }
#input-field:focus { outline: none; }

#send-btn {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--glass-strong);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
#send-btn:active { transform: scale(0.94); }
#send-btn svg { width: 13px; height: 13px; }
#send-btn.disabled { opacity: 0.3; pointer-events: none; }

/* ---- composer tools: attachment + model picker ---------------------- */

/* One row under the bar: the paperclip on the left, the live model directly
   under the send button on the right. Both are quiet until hovered — they are
   settings, not the point of the screen. */
#composer-tools {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 4px;
}

.tool-btn {
  width: 26px; height: 26px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-dim);
}
.tool-btn:hover { background: var(--glass); color: var(--ink-mid); }
.tool-btn:active { transform: scale(0.92); }
.tool-btn svg { width: 16px; height: 16px; }

#model-picker { position: relative; }
#model-btn {
  display: flex; align-items: center; gap: 5px;
  padding: 4px 8px; border-radius: 7px;
  font-size: 11.5px; color: var(--ink-dim); letter-spacing: 0.01em;
}
#model-btn:hover { background: var(--glass); color: var(--ink-mid); }
#model-btn svg { width: 11px; height: 11px; opacity: 0.7; }
#model-btn[aria-expanded="true"] { background: var(--glass); color: var(--ink); }

#model-menu {
  position: absolute; right: 0; bottom: calc(100% + 6px);
  min-width: 190px; padding: 5px;
  background: rgba(20,20,20,0.86);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  border: 1px solid var(--line-strong); border-radius: var(--radius-m);
  box-shadow: 0 14px 44px rgba(0,0,0,0.55);
  z-index: 20;
}
@media (prefers-reduced-transparency: reduce) {
  #model-menu { background: #141414; backdrop-filter: none; -webkit-backdrop-filter: none; }
}
.model-item {
  display: flex; align-items: baseline; gap: 8px; width: 100%;
  padding: 7px 9px; border-radius: var(--radius-s);
  text-align: left; color: var(--ink-mid); font-size: 12.5px;
}
.model-item:hover:not(:disabled) { background: var(--glass); color: var(--ink); }
.model-item.active { color: var(--ink); }
.model-item.active .model-item-name::after {
  content: '·'; margin-left: 6px; color: var(--ink-full);
}
.model-item:disabled { opacity: 0.32; cursor: default; }
.model-item-desc { font-size: 10.5px; color: var(--ink-dim); margin-left: auto; }

/* ---- attached photo -------------------------------------------------- */

#attachment {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 9px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line); border-radius: var(--radius-m);
}
#attachment[hidden] { display: none; }
#attachment-thumb {
  width: 38px; height: 38px; border-radius: var(--radius-s);
  object-fit: cover; flex-shrink: 0;
}
#attachment-meta { display: flex; flex-direction: column; min-width: 0; }
#attachment-name {
  font-size: 12px; color: var(--ink-mid);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#attachment-note { font-size: 10.5px; color: var(--ink-dim); }
#attachment-remove {
  margin-left: auto; width: 24px; height: 24px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-dim); flex-shrink: 0;
}
#attachment-remove:hover { background: var(--glass); color: var(--ink-mid); }
#attachment-remove svg { width: 12px; height: 12px; }

#input-composer.dropping #input-bar { border-color: var(--ink-mid); }

/* ---- photos in the transcript --------------------------------------- */

.msg-photo {
  display: block; width: 132px; border-radius: var(--radius-m);
  margin-bottom: 8px;
}
.msg-figure { margin: 10px 0 0; }
.msg-figure img {
  display: block; width: 264px; max-width: 100%;
  border-radius: var(--radius-m); border: 1px solid var(--line);
  /* The model outputs 128px. Keeping the upscale crisp rather than smoothing
     it avoids implying detail that is not there. */
  image-rendering: pixelated;
}
.msg-figure figcaption {
  margin-top: 6px; font-size: 11px; color: var(--ink-dim);
}

.msg-progress {
  display: block; height: 2px; width: 264px; max-width: 100%;
  margin: 10px 0 2px;
  background: var(--glass); border-radius: 2px; overflow: hidden;
}
.msg-progress-fill {
  height: 100%; width: 0; background: var(--ink);
  transition: width 200ms linear;
}

/* ---- sidebar (history) --------------------------------------------- */

#sidebar {
  position: fixed; top: var(--titlebar-h); bottom: 0; left: 0; width: 280px;
  background: rgba(14,14,14,0.75);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  border-right: 1px solid var(--line-strong);
  transform: translateX(-280px);
  z-index: 50;
  display: flex; flex-direction: column;
  box-shadow: 20px 0 60px rgba(0,0,0,0.5);
}
@media (prefers-reduced-transparency: reduce) {
  #sidebar { background: #0f0f0f; backdrop-filter: none; -webkit-backdrop-filter: none; }
}
#sidebar-scrim {
  position: fixed; inset: 0; top: var(--titlebar-h);
  background: rgba(0,0,0,0.35); opacity: 0; pointer-events: none; z-index: 40;
}
#sidebar-scrim.show { pointer-events: auto; }

#sidebar-header {
  padding: 16px 16px 12px; display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid var(--line);
}
#sidebar-header .title {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-dim);
}
#sidebar-list { flex: 1; overflow-y: auto; padding: 8px; }
.conv-item {
  padding: 10px 10px; border-radius: var(--radius-s); font-size: 13px;
  color: var(--ink-mid); cursor: pointer; display: block;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.conv-item:hover { background: var(--glass); }
.conv-item.active { background: var(--glass-strong); color: var(--ink); }
.conv-item .date {
  display: block; font-family: var(--font-mono); font-size: 10px; color: var(--ink-dim); margin-top: 2px;
}
.conv-empty { padding: 24px 12px; font-size: 12px; color: var(--ink-dim); text-align: center; }

/* ---- settings popover ------------------------------------------------ */

/* ---- wake overlay -------------------------------------------------- */

#wake-overlay {
  position: fixed; inset: 0; background: var(--black); z-index: 200;
  display: flex; align-items: center; justify-content: center;
}
#wake-canvas { width: 100%; height: 100%; }
#wake-label {
  position: absolute; bottom: 40px; left: 0; right: 0; text-align: center;
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-dim);
  letter-spacing: 0.04em;
}

/* ---- empty state ------------------------------------------------------- */

/* ---- welcome ------------------------------------------------------------ */
#welcome {
  margin: auto 0; display: flex; flex-direction: column;
  align-items: flex-start; gap: 10px;
  animation: welcome-in 520ms cubic-bezier(.2,.8,.2,1) both;
}
#welcome h1 {
  font-size: 30px; font-weight: 500; letter-spacing: -0.02em;
  color: var(--ink); line-height: 1.2;
}
#welcome p { font-size: 15px; color: var(--ink-mid); line-height: 1.5; }

#suggestions {
  margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px;
}
.suggestion {
  font-family: var(--font-ui); font-size: 14px; color: var(--ink-mid);
  background: var(--glass); border: 1px solid var(--line);
  border-radius: 999px; padding: 9px 15px; cursor: pointer;
  transition: background 180ms ease-out, color 180ms ease-out,
              border-color 180ms ease-out, transform 180ms cubic-bezier(.2,.8,.2,1);
}
.suggestion:hover {
  background: var(--glass-strong); color: var(--ink);
  border-color: var(--line-strong); transform: translateY(-1px);
}
.suggestion:active { transform: translateY(0) scale(0.98); }

/* Each chip enters just after the one before it, so the row assembles rather
   than snapping in as a block. */
.suggestion:nth-child(1) { animation: welcome-in 460ms 60ms cubic-bezier(.2,.8,.2,1) both; }
.suggestion:nth-child(2) { animation: welcome-in 460ms 120ms cubic-bezier(.2,.8,.2,1) both; }
.suggestion:nth-child(3) { animation: welcome-in 460ms 180ms cubic-bezier(.2,.8,.2,1) both; }
.suggestion:nth-child(4) { animation: welcome-in 460ms 240ms cubic-bezier(.2,.8,.2,1) both; }

@keyframes welcome-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  #welcome, .suggestion { animation: none !important; }
}

/* ---- scrollbars: thin, invisible until hovered -------------------------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.10); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.18); }
::-webkit-scrollbar-track { background: transparent; }

/* ---- formatted replies -------------------------------------------------- */
/* Applied once a reply is finished; while streaming the raw tokens carry the
   flash animation and no layout at all. */
.msg-body > p { margin: 0 0 12px; }
.msg-body > p:last-child { margin-bottom: 0; }
.msg-body ol {
  margin: 4px 0 12px; padding-left: 26px;
  display: flex; flex-direction: column; gap: 6px;
}
.msg-body ol:last-child { margin-bottom: 0; }
.msg-body li { padding-left: 2px; }
.msg-body li::marker { color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.msg-body code {
  font-family: var(--font-mono); font-size: 0.88em;
  background: var(--glass); border: 1px solid var(--line);
  border-radius: 5px; padding: 1px 5px;
}
.msg-body strong { font-weight: 600; color: var(--ink-full); }
.msg-body em { font-style: italic; }

/* ---- copy button -------------------------------------------------------- */
/* Hidden until the answer is hovered: present when wanted, absent from the
   reading experience the rest of the time. */
.msg-assistant { position: relative; }
.msg-copy {
  position: absolute; top: -2px; right: -6px;
  width: 30px; height: 30px; border-radius: 8px;
  display: grid; place-items: center;
  color: var(--ink-dim); opacity: 0;
  transition: opacity 160ms ease-out, background 160ms ease-out, color 160ms ease-out;
}
.msg-copy svg { width: 16px; height: 16px; }
.msg-assistant:hover .msg-copy { opacity: 1; }
.msg-copy:hover { background: var(--glass); color: var(--ink); }
.msg-copy.copied { opacity: 1; color: var(--ink-full); }
@media (prefers-reduced-motion: reduce) { .msg-copy { transition: none; } }

/* ---- composer: send becomes stop ---------------------------------------- */
#send-btn.stopping { background: var(--ink-full); color: var(--black); }
#send-btn.stopping:hover { background: var(--ink); }
#send-btn.stopping svg { width: 15px; height: 15px; }

/* ---- history rows ------------------------------------------------------- */
/* Controls stay hidden until the row is hovered: these lists are read far more
   often than they are managed. */
.conv-row {
  display: flex; align-items: stretch; gap: 2px;
  border-radius: var(--radius-s);
}
.conv-row:hover { background: var(--glass); }
.conv-row.active .conv-item { color: var(--ink); }
.conv-row .conv-item { flex: 1; min-width: 0; background: none; }
.conv-row:hover .conv-item { background: none; }
.conv-act {
  width: 28px; flex-shrink: 0; border-radius: var(--radius-s);
  display: grid; place-items: center;
  color: var(--ink-dim); opacity: 0;
  transition: opacity 150ms ease-out, color 150ms ease-out, background 150ms ease-out;
}
.conv-act svg { width: 15px; height: 15px; }
.conv-row:hover .conv-act { opacity: 1; }
.conv-act:hover { background: var(--glass-strong); color: var(--ink); }
.conv-act.danger:hover { color: var(--error); }
/* Armed state: the click after this one deletes. */
.conv-act.danger.confirm {
  opacity: 1; color: var(--error); background: var(--error-glow);
}
.conv-rename {
  flex: 1; min-width: 0;
  background: var(--glass-strong); border: 1px solid var(--line-strong);
  border-radius: var(--radius-s); padding: 9px 11px;
  font-family: var(--font-ui); font-size: 13.5px; color: var(--ink);
}
.conv-rename:focus { outline: none; border-color: var(--ink-dim); }
@media (prefers-reduced-motion: reduce) { .conv-act { transition: none; } }