/* ==========================================================================
   AG Component Library — reusable CSS classes built on design tokens
   Source of truth: engine/docs/design_note_dashboard_restyle.md
   Depends: engine/ingress/design/tokens.css (must be imported before this file)
   All values use var(--ag-*) tokens — zero raw hex/hardcoded colours.
   ========================================================================== */

/* ── Header ─────────────────────────────────────────────────────────────── */
.ag-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ag-space-md) var(--ag-space-lg);
  background: var(--ag-bg-2);
  border-bottom: 1px solid var(--ag-border);
  min-height: 56px;
}

.ag-header__title {
  font-size: var(--ag-fs-xl);
  font-weight: var(--ag-fw-semibold);
  color: var(--ag-text-1);
  margin: 0;
  line-height: var(--ag-lh);
}

/* ── Navigation ─────────────────────────────────────────────────────────── */
.ag-nav {
  display: flex;
  align-items: center;
  gap: var(--ag-space-sm);
  padding: var(--ag-space-sm) var(--ag-space-lg);
  background: var(--ag-bg-1);
  border-bottom: 1px solid var(--ag-border);
  flex-wrap: wrap;
}

.ag-nav__item {
  display: inline-flex;
  align-items: center;
  gap: var(--ag-space-xs);
  padding: var(--ag-space-xs) var(--ag-space-sm);
  color: var(--ag-text-2);
  font-size: var(--ag-fs-sm);
  font-weight: var(--ag-fw-medium);
  text-decoration: none;
  border-radius: var(--ag-radius-md);
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}

.ag-nav__item:hover {
  color: var(--ag-text-1);
  background: var(--ag-bg-3);
}

.ag-nav__item--active {
  color: var(--ag-accent);
  background: var(--ag-bg-3);
}

/* ── Section ────────────────────────────────────────────────────────────── */
.ag-section {
  padding: var(--ag-space-lg);
}

.ag-section__title {
  font-size: var(--ag-fs-lg);
  font-weight: var(--ag-fw-semibold);
  color: var(--ag-text-1);
  margin: 0 0 var(--ag-space-md) 0;
  line-height: var(--ag-lh);
}

/* ── Card ───────────────────────────────────────────────────────────────── */
.ag-card {
  background: var(--ag-bg-2);
  border: 1px solid var(--ag-border);
  border-radius: var(--ag-radius-lg);
  box-shadow: var(--ag-shadow-md);
  overflow: hidden;
}

.ag-card__header {
  padding: var(--ag-space-md);
  border-bottom: 1px solid var(--ag-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ag-space-sm);
}

.ag-card__header-title {
  font-size: var(--ag-fs-md);
  font-weight: var(--ag-fw-semibold);
  color: var(--ag-text-1);
  margin: 0;
}

.ag-card__body {
  padding: var(--ag-space-md);
}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.ag-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ag-space-xs);
  padding: var(--ag-space-sm) var(--ag-space-md);
  font-family: var(--ag-font);
  font-size: var(--ag-fs-sm);
  font-weight: var(--ag-fw-medium);
  line-height: 1;
  border-radius: var(--ag-radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
  user-select: none;
  white-space: nowrap;
}

.ag-btn:focus-visible {
  outline: 2px solid var(--ag-accent);
  outline-offset: 2px;
}

.ag-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.ag-btn--primary {
  background: var(--ag-accent);
  color: var(--ag-text-1);
  border-color: var(--ag-accent);
}

.ag-btn--primary:hover {
  background: var(--ag-accent-hover);
  border-color: var(--ag-accent-hover);
}

.ag-btn--secondary {
  background: transparent;
  color: var(--ag-text-1);
  border-color: var(--ag-border-light);
}

.ag-btn--secondary:hover {
  background: var(--ag-bg-3);
  border-color: var(--ag-text-3);
}

.ag-btn--danger {
  background: var(--ag-status-failed);
  color: var(--ag-text-1);
  border-color: var(--ag-status-failed);
}

.ag-btn--danger:hover {
  background: var(--ag-status-failed);
  border-color: var(--ag-status-failed);
}

.ag-btn--sm {
  padding: var(--ag-space-xs) var(--ag-space-sm);
  font-size: var(--ag-fs-xs);
}

.ag-btn--lg {
  padding: var(--ag-space-md) var(--ag-space-lg);
  font-size: var(--ag-fs-md);
}

/* ── Badges / Status chips ──────────────────────────────────────────────── */
.ag-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--ag-space-xs);
  padding: 2px var(--ag-space-sm);
  font-size: var(--ag-fs-xs);
  font-weight: var(--ag-fw-medium);
  border-radius: var(--ag-radius-full);
  border: 1px solid transparent;
  white-space: nowrap;
  line-height: var(--ag-lh);
}

.ag-badge--running {
  background: color-mix(in srgb, var(--ag-status-running) 15%, transparent);
  color: var(--ag-status-running);
  border-color: color-mix(in srgb, var(--ag-status-running) 30%, transparent);
}

.ag-badge--done {
  background: color-mix(in srgb, var(--ag-status-done) 15%, transparent);
  color: var(--ag-status-done);
  border-color: color-mix(in srgb, var(--ag-status-done) 30%, transparent);
}

.ag-badge--waiting {
  background: color-mix(in srgb, var(--ag-status-waiting) 15%, transparent);
  color: var(--ag-status-waiting);
  border-color: color-mix(in srgb, var(--ag-status-waiting) 30%, transparent);
}

.ag-badge--failed {
  background: color-mix(in srgb, var(--ag-status-failed) 15%, transparent);
  color: var(--ag-status-failed);
  border-color: color-mix(in srgb, var(--ag-status-failed) 30%, transparent);
}

/* ── Tables ─────────────────────────────────────────────────────────────── */
.ag-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--ag-fs-sm);
}

.ag-table th,
.ag-table td {
  padding: var(--ag-space-sm) var(--ag-space-md);
  text-align: left;
  border-bottom: 1px solid var(--ag-border);
  color: var(--ag-text-1);
  vertical-align: middle;
}

.ag-table th {
  font-weight: var(--ag-fw-semibold);
  color: var(--ag-text-2);
  font-size: var(--ag-fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--ag-bg-2);
}

.ag-table tbody tr:hover {
  background: var(--ag-bg-3);
}

.ag-table tbody tr:last-child td {
  border-bottom: none;
}

/* ── Input ──────────────────────────────────────────────────────────────── */
.ag-input {
  width: 100%;
  padding: var(--ag-space-sm) var(--ag-space-md);
  font-family: var(--ag-font);
  font-size: var(--ag-fs-sm);
  color: var(--ag-text-1);
  background: var(--ag-bg-1);
  border: 1px solid var(--ag-border);
  border-radius: var(--ag-radius-md);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  line-height: var(--ag-lh);
}

.ag-input::placeholder {
  color: var(--ag-text-3);
}

.ag-input:focus {
  border-color: var(--ag-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ag-accent) 20%, transparent);
}

.ag-input:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ── Chip / Tag ─────────────────────────────────────────────────────────── */
.ag-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--ag-space-xs);
  padding: var(--ag-space-xs) var(--ag-space-sm);
  font-size: var(--ag-fs-xs);
  font-weight: var(--ag-fw-medium);
  color: var(--ag-text-2);
  background: var(--ag-bg-3);
  border: 1px solid var(--ag-border-light);
  border-radius: var(--ag-radius-sm);
  white-space: nowrap;
  line-height: var(--ag-lh);
}

/* ── Progress bar ───────────────────────────────────────────────────────── */
.ag-progress {
  width: 100%;
  height: 6px;
  background: var(--ag-bg-3);
  border-radius: var(--ag-radius-full);
  overflow: hidden;
}

.ag-progress--mini {
  width: 60px;
}

/* Compact "chip" row used inside status cards (disk/parts/inbox rows). */
.ag-chip-row {
  padding: 6px 10px;
  border-radius: var(--ag-radius-md);
  display: flex;
  align-items: center;
  gap: var(--ag-space-sm);
  font-size: var(--ag-fs-mono-lg);
}

.ag-progress__bar {
  height: 100%;
  background: var(--ag-accent);
  border-radius: var(--ag-radius-full);
  transition: width 0.3s ease;
}

/* Run-specific progress variant (running = blue) */
.ag-progress--run {
  height: 4px;
}

.ag-progress--run .ag-progress__bar {
  background: var(--ag-status-running);
}

/* ── DAG node ───────────────────────────────────────────────────────────── */
.ag-dag-node {
  display: inline-flex;
  align-items: center;
  gap: var(--ag-space-xs);
  padding: var(--ag-space-xs) var(--ag-space-sm);
  background: var(--ag-bg-2);
  border: 1px solid var(--ag-border);
  border-radius: var(--ag-radius-sm);
  font-size: var(--ag-fs-xs);
  font-family: var(--ag-font-mono);
  color: var(--ag-text-2);
  cursor: default;
}

.ag-dag-node--active {
  border-color: var(--ag-accent);
  color: var(--ag-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ag-accent) 20%, transparent);
}

.ag-dag-node--done {
  border-color: var(--ag-status-done);
  color: var(--ag-status-done);
}

.ag-dag-node--failed {
  border-color: var(--ag-status-failed);
  color: var(--ag-status-failed);
}

/* ── Log line ───────────────────────────────────────────────────────────── */
.ag-log-line {
  display: block;
  font-family: var(--ag-font-mono);
  font-size: var(--ag-fs-xs);
  color: var(--ag-text-2);
  line-height: var(--ag-lh);
  white-space: pre-wrap;
  word-break: break-all;
}

.ag-log-line--error {
  color: var(--ag-status-failed);
}

.ag-log-line--warn {
  color: var(--ag-status-waiting);
}

.ag-log-line--info {
  color: var(--ag-status-running);
}

.ag-log-line--success {
  color: var(--ag-status-done);
}

/* ── Modal ──────────────────────────────────────────────────────────────── */
.ag-modal {
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--ag-bg-1) 60%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: var(--ag-space-lg);
}

.ag-modal__content {
  background: var(--ag-bg-2);
  border: 1px solid var(--ag-border);
  border-radius: var(--ag-radius-lg);
  box-shadow: var(--ag-shadow-lg);
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
}

.ag-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ag-space-md);
  border-bottom: 1px solid var(--ag-border);
}

.ag-modal__title {
  font-size: var(--ag-fs-lg);
  font-weight: var(--ag-fw-semibold);
  color: var(--ag-text-1);
  margin: 0;
}

.ag-modal__close {
  background: none;
  border: none;
  color: var(--ag-text-3);
  cursor: pointer;
  font-size: var(--ag-fs-lg);
  line-height: 1;
  padding: var(--ag-space-xs);
  border-radius: var(--ag-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s ease;
}

.ag-modal__close:hover {
  color: var(--ag-text-1);
}

.ag-modal__body {
  padding: var(--ag-space-md);
}

.ag-modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--ag-space-sm);
  padding: var(--ag-space-md);
  border-top: 1px solid var(--ag-border);
}

/* ── Utility helpers ────────────────────────────────────────────────────── */
.ag-text-xs   { font-size: var(--ag-fs-xs); }
.ag-text-sm   { font-size: var(--ag-fs-sm); }
.ag-text-md   { font-size: var(--ag-fs-md); }
.ag-text-lg   { font-size: var(--ag-fs-lg); }
.ag-text-muted { color: var(--ag-text-3); }
.ag-text-dim   { color: var(--ag-text-2); }
.ag-mt-sm  { margin-top: var(--ag-space-sm); }
.ag-mt-md  { margin-top: var(--ag-space-md); }
.ag-mt-lg  { margin-top: var(--ag-space-lg); }
.ag-mb-sm  { margin-bottom: var(--ag-space-sm); }
.ag-mb-md  { margin-bottom: var(--ag-space-md); }
.ag-mb-lg  { margin-bottom: var(--ag-space-lg); }
.ag-mb-xs  { margin-bottom: var(--ag-space-xs); }
.ag-mt-xs  { margin-top: var(--ag-space-xs); }
.ag-ml-sm  { margin-left: var(--ag-space-sm); }
.ag-ml-md  { margin-left: var(--ag-space-md); }
.ag-ml-auto { margin-left: auto; }
.ag-flex   { display: flex; }
.ag-gap-sm { gap: var(--ag-space-sm); }
.ag-gap-md { gap: var(--ag-space-md); }
.ag-items-center { align-items: center; }
.ag-justify-between { justify-content: space-between; }
.ag-stack { display: flex; flex-direction: column; gap: var(--ag-space-sm); }
.ag-stack__row { display: flex; align-items: center; justify-content: space-between; gap: var(--ag-space-sm); }

/* ── Row helpers for the status page (disk/parts/inbox tabular rows) ───── */
.ag-row { display: flex; align-items: center; gap: var(--ag-space-sm); margin-bottom: var(--ag-space-xs); }
.ag-row--top { display: flex; gap: var(--ag-space-sm); margin-bottom: var(--ag-space-xs); }

/* Fixed column widths (character units) for tabular status rows. */
.ag-col-6ch  { width: 6ch; }
.ag-col-7ch  { width: 7ch; }
.ag-col-9ch  { width: 9ch; }
.ag-col-10ch { width: 10ch; }
.ag-col-14ch { width: 14ch; }
.ag-col-18ch { width: 18ch; }
.ag-col-right { text-align: right; }

/* Truncate long text with ellipsis (single-line). */
.ag-truncate { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Inline-block for fills that live inside inline-flex cells. */
.ag-fill-block { display: block; height: 100%; }

/* Monospace font for tabular metric values (numbers, ids, paths). */
.ag-mono { font-family: var(--ag-font-mono); }

/* Wider progress bar for the disk-usage column (lighter track). */
.ag-progress--disk { width: 120px; background: var(--ag-bg-2); }

/* Progress bar fill colours mapped to disk-usage states. */
.ag-progress__bar--ok   { background: var(--ag-status-done); }
.ag-progress__bar--warn { background: var(--ag-status-waiting); }
.ag-progress__bar--alert { background: var(--ag-status-failed); }

/* ==========================================================================
   AG UI-kit components — dashboard set (added 2026-07-10, kit-only conversion)
   Every rule references the AG UI-kit token pool in tokens.css (--ink-*,
   --text-*, --t-*, --icon-*, --space-*, semantic --ok/--warn/--info/--accent/
   --muted). Zero raw hex/px, radius 0 everywhere. These are the components the
   engine dashboard links + the kit gallery (ui-kit.html) documents.
   Class names are dashboard-unique to avoid collisions with other consumers
   (engine-frontend.html, preview.html) that also link this file.
   ========================================================================== */

/* ── 09 TABLE (kit §09) — used by the model-stats grid ──────────────────── */
.tbl { width: 100%; border-collapse: collapse; }
.tbl th, .tbl td { border: var(--bw-hair) solid var(--line); padding: var(--space-3) var(--space-4); text-align: left; }
.tbl th { background: var(--ink-1); font-family: var(--font-mono); font-size: var(--t-eyebrow-size); font-weight: 600; letter-spacing: var(--t-chip-ls); text-transform: uppercase; color: var(--text-lo); }
.tbl td { background: var(--ink-2); font-size: var(--t-bodyxs-size); color: var(--text-mid); }
.tbl td.num { font-family: var(--font-mono); font-size: var(--t-monosm-size); color: var(--text-hi); text-align: right; }
.tbl td.num--ok { color: var(--ok); }
.tbl td.num--accent { color: var(--accent); }
.tbl tr:hover td { background: var(--ink-1); }

/* ── GAP 01 — Alert / banner (accent surface, square) ───────────────────── */
.banner { background: var(--accent); color: var(--text-on-accent); text-align: center; padding: var(--space-2); font-family: var(--font-sans); font-weight: 600; border-radius: var(--radius-0); margin-bottom: var(--space-3); }
/* [FIX9b] warning-banner variant — partial data (s7c_partial / unknown warning) */
.banner.warn { background: var(--warn-wash, #fff7e6); color: var(--warn, #b25e00); border: var(--bw-hair, 1px) solid var(--warn, #b25e00); border-left: var(--bw-stripe, 4px) solid var(--warn, #b25e00); text-align: center; padding: var(--space-2); font-family: var(--font-sans); font-weight: 600; border-radius: var(--radius-0); margin-bottom: var(--space-3); }
/* run-level failed callout — accent left-stripe + tint (inside run-details) */
.run-fail { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-3); padding: var(--space-2) var(--space-3); background: var(--accent-dim); border: var(--bw-hair) solid var(--accent); border-left: var(--bw-stripe) solid var(--accent); color: var(--accent); font-family: var(--font-sans); font-size: var(--t-caption-size); font-weight: 600; letter-spacing: 0.04em; }
.run-fail svg { width: var(--icon-xs); height: var(--icon-xs); stroke: currentColor; fill: none; stroke-width: var(--icon-stroke); stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.run-fail .rf-reason { font-weight: 400; color: var(--text-mid); letter-spacing: 0; }

/* ── GAP 02 — Vertical bar chart / success-trend histogram ──────────────── */
#successTrendPanel, #sec-trend { min-height: 120px; }
#successTrendChart { display: flex; align-items: flex-end; gap: var(--space-3); height: 120px; padding: var(--space-2) 0; }
.trend-bar-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--space-1); height: 100%; }
.trend-bar-track { flex: 1; width: 100%; display: flex; flex-direction: column; justify-content: flex-end; }
.trend-bar { width: 100%; border-radius: var(--radius-0); min-height: 2px; transition: height var(--dur-slow) var(--ease-standard); }
.trend-bar.ok { background: var(--ok); }
.trend-bar.warn { background: var(--warn); }
.trend-bar.err { background: var(--accent); }
.trend-bar.muted { background: var(--muted); }
.trend-pct { font-size: var(--t-monoxs-size); color: var(--text-mid); font-variant-numeric: tabular-nums; }
.trend-date { font-size: var(--t-monoxs-size); color: var(--text-lo); }
.trend-empty { color: var(--text-lo); font-size: var(--t-bodyxs-size); padding: var(--space-2) 0; }
.trend-skeleton .trend-bar { background: var(--muted); opacity: 0.4; animation: agpulse 1.2s var(--ease-standard) infinite; }
@keyframes agpulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

/* ── GAP 03 — Agent card, live full-feature superset of kit §06 .agc ─────── *
 * Namespaced .agc3* — the production dashboard agent card. State is carried by
 * form (3px top stripe + ~10% wash + status dot + mono label), never colour
 * alone. Adds over §06: icon tile, type chip, level+area badge, QA & SKIPPED
 * states, model-type/params chip, «планируется» marker, attempt ×N, and a
 * hover tooltip (prompt / files / full detail).                              */
.agent-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 384px), 1fr)); gap: var(--space-4); margin-top: var(--space-2);
  --v3run: var(--info); --v3ok: var(--ok); --v3fail: var(--accent); --v3wait: var(--wait); --v3warn: var(--warn);
  --v3run-dim: var(--info-wash); --v3ok-dim: var(--ok-wash); --v3fail-dim: var(--accent-wash);
  --v3wait-dim: var(--muted-wash); --v3warn-dim: var(--warn-wash);
  --v3skip: var(--skip); --v3skip-dim: var(--skip-wash);
  --v3ink2: var(--ink-2); --v3ink3: var(--ink-3); --v3ink4: var(--line);
  --v3hi: var(--text-hi); --v3mid: var(--text-mid); --v3lo: var(--text-lo); --v3accent: var(--accent);
  --v3fbody: var(--font-sans); --v3fmono: var(--font-mono); }
.run-details .agent-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: var(--space-3); }
.agc3 { background-color: var(--v3ink2); background-image: linear-gradient(var(--v3tint, transparent), var(--v3tint, transparent));
  border: var(--bw-hair) solid var(--v3ink4); border-top: var(--bw-stripe) solid var(--v3stripe, var(--v3ink4)); border-radius: var(--radius-0);
  height: 216px; display: flex; flex-direction: column; padding: var(--card-pad-x) var(--space-4); position: relative; box-sizing: border-box;
  transition: border-color var(--dur-fast) var(--ease-standard); }
.agc3 * { box-sizing: border-box; }
.agc3:hover { border-color: var(--v3lo); }
.agc3.running { --v3stripe: var(--v3run); --v3tint: var(--v3run-dim); }
.agc3.done { --v3stripe: var(--v3ok); --v3tint: var(--v3ok-dim); }
.agc3.failed { --v3stripe: var(--v3fail); --v3tint: var(--v3fail-dim); }
.agc3.waiting { --v3stripe: var(--v3wait); --v3tint: var(--v3wait-dim); }
.agc3.qa { --v3stripe: var(--v3warn); --v3tint: var(--v3warn-dim); }
.agc3.skipped { --v3stripe: var(--v3skip); --v3tint: var(--v3skip-dim); border-top-style: dashed; }
.agc3.skipped .agc3-icon, .agc3.skipped .agc3-stl { color: var(--v3skip); }
.agc3.skipped .agc3-dot { background: var(--v3skip); }
.agc3.skipped .agc3-name, .agc3.skipped .agc3-dt { color: var(--v3lo); }
.agc3-hd { display: grid; grid-template-columns: var(--icon-lg) minmax(0, 1fr) auto; grid-template-rows: var(--h-level) var(--h-level); column-gap: var(--space-3); align-items: center; flex: none; }
/* [3.1] Bare left-aligned role glyph — its left edge sits at the card content edge, in line
   with the L1/L2/L3 chip and the text blocks below. (A centered glyph inside a 44px avatar
   box read as shifted-right because centering inset it ~12px.) */
.agc3-icon { grid-column: 1; grid-row: 1 / span 2; width: var(--icon-lg); height: var(--icon-lg); align-self: center; justify-self: start; background: none; border: none;
  display: inline-flex; align-items: center; justify-content: center; color: var(--v3mid); }
.agc3-icon svg { width: var(--icon-lg); height: var(--icon-lg); stroke-width: var(--icon-stroke); display: block; fill: none; stroke: currentColor; }
.agc3.running .agc3-icon { color: var(--v3run); } .agc3.done .agc3-icon { color: var(--v3ok); }
.agc3.failed .agc3-icon { color: var(--v3fail); } .agc3.waiting .agc3-icon { color: var(--v3wait); } .agc3.qa .agc3-icon { color: var(--v3warn); }
.agc3-name { grid-column: 2; grid-row: 1; align-self: end; font-family: var(--v3fbody); font-size: var(--t-title-size); font-weight: 600; letter-spacing: -0.01em;
  color: var(--v3hi); line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agc3-type { grid-column: 2; grid-row: 2; align-self: center; justify-self: start; display: inline-flex; align-items: center; height: var(--h-mtype-chip); line-height: 1;
  font-family: var(--v3fmono); font-size: var(--t-chip-size); font-weight: 600; letter-spacing: var(--t-chip-ls); text-transform: uppercase; color: var(--v3mid);
  background: var(--v3ink3); border: var(--bw-hair) solid var(--v3ink4); padding: 0 var(--pad-chip); }
.agc3-status { grid-column: 3; grid-row: 1; justify-self: end; align-self: end; display: inline-flex; align-items: center; gap: var(--pad-chip); line-height: 1; white-space: nowrap; }
.agc3-dot { width: var(--dot); height: var(--dot); flex: none; }
.agc3.running .agc3-dot { background: var(--v3run); } .agc3.done .agc3-dot { background: var(--v3ok); }
.agc3.failed .agc3-dot { background: var(--v3fail); } .agc3.waiting .agc3-dot { background: var(--v3wait); } .agc3.qa .agc3-dot { background: var(--v3warn); }
.agc3-stl { font-family: var(--v3fmono); font-size: var(--t-chip-size); font-weight: 600; letter-spacing: var(--t-chip-ls); text-transform: uppercase; line-height: 1; }
.agc3.running .agc3-stl { color: var(--v3run); } .agc3.done .agc3-stl { color: var(--v3ok); }
.agc3.failed .agc3-stl { color: var(--v3fail); } .agc3.waiting .agc3-stl { color: var(--v3wait); } .agc3.qa .agc3-stl { color: var(--v3warn); }
.agc3.running .agc3-dot { animation: agc3pulse 1.6s var(--ease-standard) infinite; }
@keyframes agc3pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.agc3-time { grid-column: 3; grid-row: 2; justify-self: end; align-self: center; display: inline-flex; align-items: baseline; gap: var(--pad-chip-sm);
  font-family: var(--v3fmono); font-size: var(--t-mono-size); font-weight: 500; color: var(--v3mid); white-space: nowrap; }
.agc3-sig { color: var(--v3lo); }
.agc3-att { color: var(--v3lo); font-size: var(--t-chip-size); }
.agc3-task { height: var(--card-row-task); flex: none; display: flex; align-items: center; gap: var(--space-2); margin-top: var(--card-pad-x); position: relative; cursor: default; }
.agc3-lvlwrap { display: inline-flex; align-items: stretch; height: var(--h-mtype-chip); flex: none; border: var(--bw-hair) solid var(--v3ink4); }
.agc3-lvl { display: inline-flex; align-items: center; justify-content: center; height: 100%; font-family: var(--v3fmono); font-size: var(--t-chip-size);
  font-weight: 700; letter-spacing: 0.02em; color: var(--text-on-light); padding: 0 var(--pad-chip-sm); }
.agc3-lvl.l1 { background: var(--v3run); } .agc3-lvl.l2 { background: var(--v3warn); } .agc3-lvl.l3 { background: var(--v3accent); color: var(--v3hi); }
.agc3-area { display: inline-flex; align-items: center; height: 100%; padding: 0 var(--pad-chip); background: var(--v3ink3); font-family: var(--v3fmono);
  font-size: var(--t-chip-size); font-weight: 500; letter-spacing: 0.04em; text-transform: lowercase; color: var(--v3mid); white-space: nowrap;
  max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
.agc3-tn { font-family: var(--v3fbody); font-size: var(--t-bodyxs-size); font-weight: 500; color: var(--v3hi); line-height: var(--card-row-task); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
/* [3.2] Meta trail (node id + action count) hugs the RIGHT edge, in line with the header
   status + Σ-time column. margin-left:auto pushes the first trailing atom (and any after it)
   right; when a goal/tn still fills the row via flex:1 this is a no-op. */
.agc3-meta { display: inline-flex; align-items: center; height: var(--card-row-task); font-family: var(--v3fmono); font-size: var(--t-meta-size); color: var(--v3lo);
  letter-spacing: 0.03em; white-space: nowrap; flex: none; margin-left: auto; }
.agc3-meta ~ .agc3-meta { margin-left: 0; }
.agc3-sep { display: inline-flex; align-items: center; height: var(--card-row-task); font-size: var(--t-caption-size); color: var(--v3ink4); flex: none; }
.agc3-det { flex: 1; margin-top: var(--card-row-gap); position: relative; min-height: 0; }
/* [5.2] Step answer = up to 3 lines in-card, clamp beyond that; full text on hover (agc3-tip). */
.agc3-dt { font-family: var(--v3fbody); font-size: var(--t-bodyxs-size); line-height: 1.4; color: var(--v3mid);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; cursor: default; }
/* [0_review special] review card may carry a multi-verdict detail string (joined by ' | ');
   drop the 3-line clamp so all verdicts stay visible inline (tooltip still works as fallback). */
.agc3-det--review .agc3-dt { display: block; -webkit-line-clamp: unset; overflow: visible; }
.agc3.waiting .agc3-dt { color: var(--v3lo); }
.agc3-model { height: var(--card-row-foot); flex: none; display: flex; align-items: center; gap: var(--pad-chip); margin-top: var(--card-row-gap); padding-top: var(--card-row-gap); border-top: var(--bw-hair) solid var(--v3ink4); }
.agc3-model, .agc3-model * { font-family: var(--v3fmono); }
/* [0_review special] when the review card carries a review_label (no model was used — e.g.,
   a single-node plan approved without a model call), we render the label here in place of
   the model + tokens row. Same height/stack as the model row so the card outline stays put. */
.agc3-review-label { display: inline-flex; align-items: center; height: var(--card-row-foot); font-size: var(--t-monoxs-size); font-weight: 600; color: var(--v3mid); letter-spacing: 0.02em; font-style: italic; }
/* [could_not_parse 2026-07-25] when the reviewer (auto_reviewer / qa_mechanical) could not
   parse the model's answer, the dashboard must surface it as a warning — not as a quiet
   italic line that the operator might mistake for an approval. Approved/rejected verdicts
   keep the muted italic style above; only the --warn modifier flips to a token-driven amber
   colour (var(--ag-warn)) on a soft amber wash (var(--warn-soft)), drops the italic so the
   warning glyph reads as an icon, and pads the chip so it reads as a chip, not a label. */
.agc3-review-label--warn { color: var(--ag-warn); background: var(--warn-soft); font-style: normal; padding: 0 6px; border-radius: 4px; }
/* [5.1] Shade ladder inside the model id: the provider prefix (first segment before the
   first dash) is highlighted brightest (--v3hi via .agc3-mp), the rest of the model name is
   medium (--v3mid), the thinking chip dimmest (--v3lo) — so they read as a hierarchy, not a blob. */
.agc3-prov { display: inline-flex; align-items: center; height: var(--card-row-foot); font-size: var(--t-monoxs-size); font-weight: 600; color: var(--v3hi); letter-spacing: 0.02em; }
.agc3-mdl { display: inline-flex; align-items: center; height: var(--card-row-foot); font-size: var(--t-monoxs-size); font-weight: 600; color: var(--v3mid); letter-spacing: 0.02em; }
.agc3-mp { color: var(--v3hi); }
.agc3-mt { display: inline-flex; align-items: center; height: var(--card-row-foot); line-height: 1; font-size: var(--t-mtype-size); font-weight: 600; letter-spacing: var(--t-chip-ls);
  text-transform: uppercase; color: var(--v3lo); border: var(--bw-hair) solid var(--v3ink4); padding: 0 var(--pad-chip-sm); }
.agc3-planned { color: var(--v3lo); font-size: var(--t-mtype-size); letter-spacing: 0.08em; text-transform: uppercase; }
.agc3-tok { display: inline-flex; align-items: center; gap: var(--space-2); height: var(--card-row-foot); font-size: var(--t-monoxs-size); color: var(--v3lo); white-space: nowrap; margin-left: auto; }
.agc3-tok b { color: var(--v3mid); font-weight: 600; } .agc3-tok .agc3-in { color: var(--v3mid); }
.agc3-tip { position: absolute; z-index: var(--z-tooltip); left: 0; top: calc(100% + var(--pad-chip)); width: 360px; max-width: 94vw; background: var(--ink-1);
  border: var(--bw-hair) solid var(--v3ink4); box-shadow: var(--shadow-pop); padding: var(--space-3);
  opacity: 0; visibility: hidden; transform: translateY(-3px); transition: opacity var(--dur-fast), transform var(--dur-fast); pointer-events: none; }
.agc3-task:hover .agc3-tip, .agc3-det:hover .agc3-tip { opacity: 1; visibility: visible; transform: translateY(0); }
/* [4.5/4.6] Generic hover-tooltip trigger — any .has-tip element shows a child .agc3-tip on
   hover (the kit tooltip, replacing the native browser title). --right anchors the popover to
   the parent's right edge, for chips that sit at a row's right (e.g. DIFF). */
.has-tip { position: relative; }
.has-tip:hover > .agc3-tip { opacity: 1; visibility: visible; transform: translateY(0); }
.agc3-tip--right { left: auto; right: 0; }
.agc3-det .agc3-tip { top: auto; bottom: calc(100% + var(--pad-chip)); }
.agc3-tl { font-family: var(--v3fmono); font-size: var(--t-chip-size); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--v3lo); margin-bottom: var(--pad-chip); }
.agc3-tp { font-family: var(--v3fbody); font-size: var(--t-bodyxs-size); line-height: 1.45; color: var(--v3hi); margin-bottom: var(--space-3); }
.agc3-tf { list-style: none; display: flex; flex-direction: column; gap: 3px; margin: 0; padding: 0; max-height: none; overflow: visible; white-space: pre-line; /* [fix 2026-07-25] "Вход модели": файлы видны полностью, без вертикальной прокрутки; pre-line — строки из сервера (\n) сохраняются при рендере */ }
.agc3-tf li { font-family: var(--v3fmono); font-size: var(--t-monosm-size); color: var(--v3mid); display: flex; gap: var(--pad-chip); align-items: baseline; }
.agc3-tf li::before { content: '\203A'; color: var(--v3accent); }
/* [7.4] filename = bigger + muted, pushed left; +/- counts colored green/red, pinned right. */
.agc3-tf .tf-name { flex: 1 1 auto; min-width: 0; color: var(--v3lo); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agc3-tf .tf-add { color: var(--ok); font-weight: 600; }
.agc3-tf .tf-del { color: var(--err); font-weight: 600; }
.agc3-tfull { font-family: var(--v3fbody); font-size: var(--t-bodyxs-size); line-height: 1.5; color: var(--v3hi); }
@media (prefers-reduced-motion: reduce) { .agc3 * { animation: none !important; transition: none !important; } }

/* ── GAP 04 — Compact 18px icon-toggle button (outline ↔ filled) ─────────── */
.i-btn { display: inline-flex; align-items: center; justify-content: center; background: transparent; color: var(--info); border: var(--bw-hair) solid var(--info); border-radius: var(--radius-0); padding: 0; height: var(--h-mtype-chip); width: var(--h-mtype-chip); cursor: pointer; margin-left: 0; vertical-align: middle; flex: 0 0 auto; }
.i-btn svg { display: block; width: var(--icon-2xs); height: var(--icon-2xs); stroke: currentColor; fill: none; stroke-width: var(--icon-stroke); stroke-linecap: round; stroke-linejoin: round; }
.i-btn:hover { color: var(--info); border-color: var(--info); background: var(--info-soft); }
.i-btn[aria-expanded="true"] { color: var(--text-on-accent); border-color: var(--info); background: var(--info); }
.i-btn[aria-expanded="true"]:hover { color: var(--text-on-accent); background: var(--info); }
.i-btn.loading { opacity: 0.6; cursor: wait; }
.i-btn.error { color: var(--accent); border-color: var(--accent); }

/* ── GAP 05 — Inline stat-chip (number + label; nav-link vs readonly) ────── */
.stat { display: inline-flex; align-items: baseline; gap: var(--pad-chip); padding: var(--pad-chip) var(--space-3); background: var(--ink-2); border: var(--bw-hair) solid var(--line); border-radius: var(--radius-0); font-family: var(--font-sans); font-size: var(--t-bodyxs-size); color: var(--text-mid); transition: border-color var(--dur-base) var(--ease-standard); }
.stat:hover { border-color: var(--muted); }
.stat b { font-family: var(--font-mono); font-weight: 600; font-size: var(--t-monolg-size); color: var(--text-hi); font-variant-numeric: tabular-nums; }
.stat.err { border-color: var(--accent); background: var(--accent-dim); }
.stat.err b, .stat.err { color: var(--accent); }
.stat.readonly { cursor: default; }
.stat.readonly:hover { border-color: var(--line); }
.stat.err.readonly:hover { border-color: var(--accent); }

/* ── GAP 06 — Dashboard readout badge + section head + period toggle ─────── */
.active-badge { display: inline-flex; align-items: baseline; gap: var(--pad-chip); margin-left: var(--space-3); padding: var(--pad-chip-sm) var(--space-3); background: var(--ink-2); border: var(--bw-hair) solid var(--line); border-radius: var(--radius-0); font-family: var(--font-sans); font-size: var(--t-caption-size); font-weight: 500; letter-spacing: 0.02em; color: var(--text-mid); }
/* [5.7] Section header with an inline control (period seg) — ONE full-width underline that
   matches every other h2 (--bw-bold / --line-strong). The h2 itself carries no border (its
   own short underline used to double up with this one). */
.sec-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); border-bottom: var(--bw-bold) solid var(--line-strong); padding-bottom: var(--space-2); margin-bottom: var(--space-3); }
.sec-head h2 { border: 0; padding: 0; margin: 0; }
.period-seg { display: inline-flex; border: var(--bw-hair) solid var(--line); border-radius: var(--radius-0); flex: 0 0 auto; }
.period-btn { appearance: none; -webkit-appearance: none; background: transparent; color: var(--text-mid); border: 0; border-left: var(--bw-hair) solid var(--line); padding: var(--space-1) var(--space-3); font-family: var(--font-sans); font-size: var(--t-caption-size); line-height: 1.4; cursor: pointer; transition: background var(--dur-fast), color var(--dur-fast); }
.period-btn:first-child { border-left: 0; }
.period-btn:hover { color: var(--text-hi); }
.period-btn.active { background: var(--info); color: var(--text-on-accent); }
.period-btn:focus-visible { outline: var(--bw-bold) solid var(--info); outline-offset: var(--bw-bold); }

/* ── GAP 07 — Paginator (result-count + pages + ellipsis + page-size) ────── */
.paginator { display: flex; align-items: center; gap: var(--pad-chip); margin-top: var(--card-row-gap); padding: var(--pad-chip) 0; font-family: var(--font-mono); font-size: var(--t-monoxs-size); color: var(--text-lo); flex-wrap: wrap; }
.paginator .counter { margin-right: auto; }
.paginator .pages { display: flex; gap: var(--space-1); align-items: center; }
.paginator button { background: transparent; color: var(--text-lo); border: var(--bw-hair) solid var(--line); border-radius: var(--radius-0); padding: var(--space-1) var(--space-2); cursor: pointer; font-family: var(--font-mono); font-size: var(--t-monoxs-size); }
.paginator button:hover:not(:disabled) { color: var(--text-hi); border-color: var(--accent); }
.paginator button.active { color: var(--accent); border-color: var(--accent); }
.paginator button:disabled { opacity: 0.4; cursor: not-allowed; }
.paginator .ellipsis { padding: 0 var(--space-1); color: var(--text-lo); }
.paginator .limit-sel { background: transparent; color: var(--text-lo); border: var(--bw-hair) solid var(--line); border-radius: var(--radius-0); padding: var(--space-1); font-family: var(--font-mono); font-size: var(--t-monoxs-size); }
.paginator .state-loading { color: var(--text-lo); font-style: italic; }
.paginator .state-error { color: var(--accent); }

/* ── GAP 09 — Callout row (approval, semantic left-stripe) ───────────────── */
.approval { border-left: var(--bw-stripe) solid var(--warn); padding-left: var(--space-3); }

/* ── Run-details panel (expanded done-row) ──────────────────────────────── */
.run-details { margin: var(--pad-chip) 0 var(--space-3); padding: var(--space-3); background: var(--ink-2); border: var(--bw-hair) solid var(--line); border-radius: var(--radius-0); font-size: var(--t-caption-size); }
.run-details .meta { display: flex; flex-direction: column; gap: var(--space-1) 0; margin-bottom: var(--space-2); }
.run-details .meta .row-line { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); align-items: baseline; }
.run-details .meta .row-line > div { display: inline-flex; align-items: baseline; gap: var(--pad-chip); font-family: var(--font-mono); font-size: var(--t-monoxs-size); }
.run-details .meta b { color: var(--text-lo); font-weight: normal; margin-right: var(--pad-chip); text-transform: uppercase; letter-spacing: 0.04em; }
.run-details .meta .diff { display: flex; gap: var(--space-2); padding: var(--space-1) 0; margin-top: 2px; border-top: var(--bw-hair) solid var(--line); }
.run-details .meta .diff .add { color: var(--ok); font-weight: 600; }
.run-details .meta .diff .del { color: var(--accent); font-weight: 600; }
.run-details .meta .diff .lbl { color: var(--text-lo); margin-right: var(--space-1); }
.run-details .meta .err { color: var(--accent); }
/* [7.5] synthesis answer = fixed 4 whole lines, clamp beyond (no mid-line cut / no scroll). */
.run-details .synth { margin-top: var(--pad-chip); padding: var(--pad-chip) var(--space-2); background: var(--ink-3); border-left: var(--bw-bold) solid var(--accent); font-family: var(--font-mono); font-size: var(--t-monosm-size); line-height: 1.45; white-space: pre-wrap; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.run-details .agents { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); margin-top: var(--space-2); }
.run-details .agents.empty, .run-details .synth.empty { color: var(--text-lo); font-style: italic; padding: var(--pad-chip) var(--space-2); }
.run-details .agents.error { color: var(--accent); padding: var(--pad-chip) var(--space-2); }

/* ── Done-row result / meta / trail (was partly unstyled) ────────────────── */
.r-lead { display: inline-flex; align-items: center; gap: var(--pad-chip-sm); margin-right: var(--space-3); flex: 0 0 auto; }
.r-result { display: inline-flex; align-items: center; justify-content: center; width: var(--h-mtype-chip); height: var(--h-mtype-chip); font-family: var(--font-mono); font-size: var(--t-eyebrow-size); border: var(--bw-hair) solid var(--line); border-radius: var(--radius-0); margin-right: 0; flex: 0 0 auto; }
.r-result svg { width: var(--icon-2xs); height: var(--icon-2xs); }
.r-result.ok { color: var(--ok); border-color: var(--ok); }
.r-result.err { color: var(--accent); border-color: var(--accent); }
.r-row { align-items: center; gap: 0; }
.r-label { font-family: var(--font-sans); font-size: var(--t-chip-size); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-lo); }
.r-id { margin-right: var(--card-row-gap); }
.r-meta .mono, .r-trail .mono { font-size: var(--t-chip-size); }
.r-meta { display: inline-flex; align-items: baseline; gap: var(--pad-chip); flex-wrap: wrap; }
/* [4.2] History-row description = its OWN line (new paragraph), ONE line, ellipsis. */
.r-head { color: var(--text-lo); flex: 1 1 100%; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r-head.wrap { display: block; -webkit-line-clamp: 1; }
.r-trail { display: flex; gap: var(--space-4); flex: 1 1 auto; justify-content: flex-end; align-items: baseline; flex-wrap: wrap; }
.r-metric { display: inline-flex; align-items: baseline; gap: var(--pad-chip-sm); flex: 0 0 auto; }
.r-diff { display: inline-flex; align-items: baseline; gap: var(--pad-chip); font-family: var(--font-mono); font-size: var(--t-chip-size); margin-left: var(--space-3); flex: 0 0 auto; }
.r-diff .add { color: var(--ok); }
.r-diff .del { color: var(--accent); }

/* ── Status dot (compact status indicator, e.g. /status traffic-light) ── */
.ag-status-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: var(--ag-radius-full);
  background: var(--ag-text-3);
  flex: 0 0 auto;
}
.ag-status-dot--done    { background: var(--ag-status-done);    box-shadow: 0 0 8px color-mix(in srgb, var(--ag-status-done) 40%, transparent); }
.ag-status-dot--failed  { background: var(--ag-status-failed);  box-shadow: 0 0 8px color-mix(in srgb, var(--ag-status-failed) 40%, transparent); }
.ag-status-dot--waiting { background: var(--ag-status-waiting); }
.ag-status-dot--running { background: var(--ag-status-running); }

/* ── Misc dashboard bits ────────────────────────────────────────────────── */
/* [5.4] First-load overlay so the page doesn't flash an empty «РАБОТАЮТ СЕЙЧАС» before data. */
.page-loader { display: flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 46vh; color: var(--muted); font-family: var(--font-mono); font-size: var(--t-caption-size); letter-spacing: 0.04em; text-transform: uppercase; }
.page-loader .pl-dot { width: var(--dot); height: var(--dot); background: var(--info); animation: agc3pulse 1.2s var(--ease-standard) infinite; }
.sub-header { font-size: var(--t-formlabel-size); font-weight: 600; margin: var(--space-3) 0 var(--space-1); color: var(--warn); }
.model-stats-grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-top: var(--space-3); }
.loading-msg { color: var(--text-lo); font-size: var(--t-bodyxs-size); padding: var(--space-2) 0; }
.loading-msg.error { color: var(--accent); }

/* ── Status-page utilities (promoted from /status) ─────────────────────────── */

/* [6.1] Text-color emphasis levels — three-level scale using kit tokens.
   ag-text-hi   : primary emphasis (page titles, key values)
   ag-text-mid  : secondary emphasis (body, labels)
   ag-text-lo   : tertiary emphasis (placeholders, hints)
   ag-text-muted: lowest emphasis (defined earlier — keep) */
.ag-text-hi  { color: var(--ag-text-hi); }
.ag-text-mid { color: var(--ag-text-mid); }
.ag-text-lo  { color: var(--ag-text-lo); }

/* [6.2] Semantic colour utilities — inline-text palette.
   Reuses the status token system so coloured text matches badges and dots. */
.ag-ok     { color: var(--ag-ok); }
.ag-warn   { color: var(--ag-warn); }
.ag-accent { color: var(--ag-accent); }
.ag-info   { color: var(--ag-info); }

/* [6.3] Surface utilities — backgrounds and divider.
   Promote ink/line tokens as background utilities for cards and dividers. */
.ag-ink-0 { background: var(--ag-ink-0); }
.ag-ink-1 { background: var(--ag-ink-1); }
.ag-ink-2 { background: var(--ag-ink-2); }
.ag-line  { background: var(--ag-line); }

/* [6.4] Parallel probe — side-by-side live activity panel container.
   Used by /status to render two probe panels in one row.
   Collapses to a single column under 640 px so it stays readable on narrow screens. */
.ag-parallel-probe {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ag-space-md, 12px);
}
@media (max-width: 640px) {
  .ag-parallel-probe { grid-template-columns: 1fr; }
}
.ag-parallel-probe > * { min-width: 0; }   /* let children shrink inside grid cells */

/* ── Subagent dot indicators ───────────────────────────────────────────────
   Tiny square status markers (8×8 px) for subagent rows on the dashboard.
   Colour comes exclusively from existing semantic tokens; sharp corners
   match the «Nata sharp» system (radius 0). Pulse animation is the
   single CSS-only motion allowed for status communication. */
.subagent-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 0;                 /* sharp system */
  vertical-align: middle;
  flex: 0 0 auto;
}
.subagent-dot--active {
  background: var(--ag-info);
  animation: subagent-dot-pulse 1.4s ease-in-out infinite;
}
.subagent-dot--done {
  background: var(--ag-ok);
  animation: none;
}
.subagent-dot--failed {
  background: var(--ag-accent);
  animation: none;
}
@keyframes subagent-dot-pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--ag-info) 60%, transparent);
  }
  50% {
    opacity: 0.55;
    transform: scale(1.35);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ag-info) 0%, transparent);
  }
}

/* ── Subagent tooltip ──────────────────────────────────────────────────────
   Floats next to its dot on hover; monospace because content is a machine
   identifier (agent id / role / model). Sits above the row, sharp corners,
   one hairline border, padded compactly. */
.subagent-tooltip {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  display: none;
  padding: var(--ag-space-xs, 4px) var(--ag-space-sm, 8px);
  font-family: var(--ag-font-mono);
  font-size: var(--ag-fs-caption, 0.75rem);
  font-weight: var(--ag-fw-medium);
  line-height: var(--ag-lh-mono, 1.6);
  color: var(--ag-text-1);
  background: var(--ag-bg-1);
  border: 1px solid var(--ag-line);
  border-radius: 0;                 /* sharp system */
  white-space: nowrap;
  pointer-events: none;
  z-index: 10;
}
.subagent-dot:hover + .subagent-tooltip,
.subagent-dot:focus + .subagent-tooltip {
  display: block;
}

/* ── Subagent row container ───────────────────────────────────────────────
   Holds the dot/tooltip siblings in a horizontal line. `position: relative`
   anchors the absolutely-positioned tooltip; gaps use the existing scale. */
.subagent-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ag-space-xs, 4px);
  position: relative;
  margin-top: var(--ag-space-xs, 4px);
}