/* Agent choreography (frontend/agents.js, docs/motion.md "Agents"). Each agent has a tone:
   --agent-<tone> paints its arrow and outlines, -wash its pill and fills, -ink the pill's
   text (at least 4.5:1 on the wash in both themes). Only transform and opacity animate. */
:root {
  --agent-data: #0E8A6A; --agent-data-wash: #DDF3EC; --agent-data-ink: #075240;
  --agent-model: #2547E0; --agent-model-wash: #E3E8FD; --agent-model-ink: #1A2F99;
  --agent-calib: #B45309; --agent-calib-wash: #FBEBD9; --agent-calib-ink: #713405;
  --agent-test: #7C3AED; --agent-test-wash: #EEE6FE; --agent-test-ink: #4C1D95;
  --agent-search: #0B7FA8; --agent-search-wash: #DCF0F7; --agent-search-ink: #064E68;
  --agent-analyst: #C0306A; --agent-analyst-wash: #FBE3EC; --agent-analyst-ink: #7C1240;
  --agent-c1: #D97706; --agent-c1-wash: #FDF0D9; --agent-c1-ink: #713F04;
  --agent-c2: #059669; --agent-c2-wash: #DAF3EA; --agent-c2-ink: #064E3B;
  --agent-c3: #DB2777; --agent-c3-wash: #FCE4EF; --agent-c3-ink: #831843;
  --agent-c4: #7C3AED; --agent-c4-wash: #EEE6FE; --agent-c4-ink: #4C1D95;
  --agent-c5: #0891B2; --agent-c5-wash: #DBF1F7; --agent-c5-ink: #164E63;
  --agent-c6: #65A30D; --agent-c6-wash: #ECF5DA; --agent-c6-ink: #365314;
  --agent-stop: var(--neg); --agent-stop-wash: #FBE5E7; --agent-stop-ink: #7F1D27;
  --agent-lift: rgba(8, 10, 19, 0.24);
}
[data-theme="dark"] {
  --agent-data: #34D1A4; --agent-data-wash: #0F2E27; --agent-data-ink: #A8F0DA;
  --agent-model: #7D97FF; --agent-model-wash: #182048; --agent-model-ink: #C9D4FF;
  --agent-calib: #F59E4B; --agent-calib-wash: #33210F; --agent-calib-ink: #FCD7AE;
  --agent-test: #B08CFF; --agent-test-wash: #26183F; --agent-test-ink: #E0D2FF;
  --agent-search: #38BDE8; --agent-search-wash: #0E2733; --agent-search-ink: #B5E6F6;
  --agent-analyst: #F06C9F; --agent-analyst-wash: #351423; --agent-analyst-ink: #FBC6DA;
  --agent-c1: #F5B04B; --agent-c1-wash: #33240E; --agent-c1-ink: #FCDDA9;
  --agent-c2: #34D399; --agent-c2-wash: #0F2C22; --agent-c2-ink: #A7F0D2;
  --agent-c3: #F472B6; --agent-c3-wash: #36142A; --agent-c3-ink: #FBC8E3;
  --agent-c4: #B08CFF; --agent-c4-wash: #26183F; --agent-c4-ink: #E0D2FF;
  --agent-c5: #38C5E8; --agent-c5-wash: #0E2933; --agent-c5-ink: #B5EAF6;
  --agent-c6: #A3D95B; --agent-c6-wash: #1E2A0E; --agent-c6-ink: #D9F2B5;
  --agent-stop-wash: #3A1419; --agent-stop-ink: #FBC5CB;
  --agent-lift: rgba(0, 0, 0, 0.6);
}
[data-tone="data"] { --tone: var(--agent-data); --tone-wash: var(--agent-data-wash); --tone-ink: var(--agent-data-ink); }
[data-tone="model"] { --tone: var(--agent-model); --tone-wash: var(--agent-model-wash); --tone-ink: var(--agent-model-ink); }
[data-tone="calib"] { --tone: var(--agent-calib); --tone-wash: var(--agent-calib-wash); --tone-ink: var(--agent-calib-ink); }
[data-tone="test"] { --tone: var(--agent-test); --tone-wash: var(--agent-test-wash); --tone-ink: var(--agent-test-ink); }
[data-tone="search"] { --tone: var(--agent-search); --tone-wash: var(--agent-search-wash); --tone-ink: var(--agent-search-ink); }
[data-tone="analyst"] { --tone: var(--agent-analyst); --tone-wash: var(--agent-analyst-wash); --tone-ink: var(--agent-analyst-ink); }
[data-tone="c1"] { --tone: var(--agent-c1); --tone-wash: var(--agent-c1-wash); --tone-ink: var(--agent-c1-ink); }
[data-tone="c2"] { --tone: var(--agent-c2); --tone-wash: var(--agent-c2-wash); --tone-ink: var(--agent-c2-ink); }
[data-tone="c3"] { --tone: var(--agent-c3); --tone-wash: var(--agent-c3-wash); --tone-ink: var(--agent-c3-ink); }
[data-tone="c4"] { --tone: var(--agent-c4); --tone-wash: var(--agent-c4-wash); --tone-ink: var(--agent-c4-ink); }
[data-tone="c5"] { --tone: var(--agent-c5); --tone-wash: var(--agent-c5-wash); --tone-ink: var(--agent-c5-ink); }
[data-tone="c6"] { --tone: var(--agent-c6); --tone-wash: var(--agent-c6-wash); --tone-ink: var(--agent-c6-ink); }

/* The layer: fixed over the viewport, clipping what leaves it, never in the way of a
   pointer; its plane moves with the scroll so cursors are placed in page coordinates. */
.agents-layer { position: fixed; inset: 0; z-index: 70; pointer-events: none; overflow: hidden; }
.agents-plane, .agents-stage { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.agents-stage > * { position: absolute; left: 0; top: 0; transform: translate(-400px, -400px); will-change: transform, opacity; }
.agent-pending { opacity: 0 !important; }

/* A cursor: the arrow's tip is the element's origin, its name pill trails the tip. */
.agent { width: 0; height: 0; }
.agent-arrow { position: absolute; left: 0; top: 0; width: 16px; height: 20px; overflow: visible; filter: drop-shadow(0 1px 1.5px var(--agent-lift)); }
.agent-arrow path { fill: var(--tone); stroke: var(--surface); stroke-width: 1.4; stroke-linejoin: round; }
.agent-pill {
  position: absolute; left: 13px; top: 16px; white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis;
  font: 600 11px/1 var(--sans); letter-spacing: 0.01em; padding: 4px 7px 4px; border-radius: 5px;
  background: var(--tone-wash); color: var(--tone-ink); border: 1px solid var(--tone);
  box-shadow: 0 1px 2px var(--agent-lift);
}
.agent.is-left .agent-pill { left: auto; right: 4px; }
.agent.is-stopped { --tone: var(--agent-stop); --tone-wash: var(--agent-stop-wash); --tone-ink: var(--agent-stop-ink); }

.agent-ripple { width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; border: 2px solid var(--tone); }
.agent-marquee { transform-origin: 0 0; border: 1.5px dashed var(--tone); border-radius: 3px; }
.agent-marquee::before { content: ''; position: absolute; inset: 0; background: var(--tone-wash); opacity: 0.35; }
.agent-cover { transform-origin: 100% 50%; }
.agent-bracket { border: 1.5px solid var(--tone); border-top-width: 3px; border-radius: 3px; }
.agent-bracket::before { content: ''; position: absolute; inset: 0; background: var(--tone-wash); opacity: 0.4; }
.agent-handle { width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--tone); border: 2px solid var(--surface); box-shadow: 0 1px 3px var(--agent-lift); }
.agent-caret { background: var(--tone); border-radius: 1px; }
.agent-pin, .agent-chip {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font: 600 11px/1.2 var(--sans); padding: 3px 7px; border-radius: 5px;
  background: var(--tone-wash); color: var(--tone-ink); border: 1px solid var(--tone);
}
.agent-pin .num, .agent-chip .num { font-family: var(--mono); font-weight: 600; }
.agents-stage > .agent-strip {
  width: max-content; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 7px 9px;
  background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; box-shadow: var(--shadow);
}
.agent-strip-head { width: 100%; font: 600 10px/1.2 var(--sans); letter-spacing: var(--label); text-transform: uppercase; color: var(--muted); }
.agent-strip .agent-chip { position: relative; transform: none; }
.agent-chip.is-chosen { box-shadow: 0 0 0 2px var(--tone); }
.agent-chip.is-chosen::after { content: 'Chosen'; font: 700 9px/1 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 4px; border-radius: 3px; background: var(--tone); color: var(--surface); }
.agent-ghost { margin: 0; list-style: none; pointer-events: none; background: var(--surface); border-radius: 6px; box-shadow: var(--shadow); opacity: 0.94; transform-origin: 0 0; }
.agents-stage > .agent-card {
  display: grid; gap: 2px; padding: 7px 9px; background: var(--surface); color: var(--ink);
  border: 1px solid var(--rule); border-left: 3px solid var(--tone); border-radius: 8px; box-shadow: var(--shadow);
}
.agent-card b { font: 600 11px/1.2 var(--sans); color: var(--tone-ink); }
.agent-card span { font: 400 11px/1.3 var(--sans); color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* The rail: who is doing what, in step with the cursors. */
.agents-rails { position: fixed; right: 16px; bottom: 56px; z-index: 75; width: min(300px, calc(100vw - 32px)); display: grid; gap: 8px; pointer-events: none; }
.agents-rail {
  pointer-events: auto;
  background: var(--surface); color: var(--ink); border: 1px solid var(--rule); border-radius: 10px;
  box-shadow: var(--shadow); padding: 8px 10px 9px; font: 12px/1.35 var(--sans);
}
.agents-rail-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.agents-rail-head b { font-weight: 600; font-size: 12px; }
.agents-rail-skip { font: 600 11px/1 var(--sans); color: var(--muted); background: transparent; border: 1px solid var(--rule); border-radius: 6px; padding: 4px 8px; cursor: pointer; }
.agents-rail-skip:hover { color: var(--ink); border-color: var(--rule-strong); }
.agents-rail-skip:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.agents-rail-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.agents-rail-line { display: grid; grid-template-columns: 8px auto 1fr; align-items: baseline; gap: 6px; min-width: 0; }
.agents-rail-line b { font-weight: 600; color: var(--tone-ink); white-space: nowrap; max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.agents-rail-say { color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agents-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--tone); align-self: center; }
.agents-rail-line[data-state="working"] .agents-dot { animation: agents-beat 1.1s ease-in-out infinite alternate; }
.agents-rail-line[data-state="done"] .agents-rail-say { color: var(--muted); }
.agents-rail-line[data-state="done"] .agents-dot { opacity: 0.45; }
.agents-rail-line[data-state="stopped"] { --tone: var(--agent-stop); --tone-ink: var(--agent-stop-ink); }
.agents-rail-line[data-state="stopped"] .agents-rail-say { color: var(--neg); white-space: normal; }
.agents-rail.is-done .agents-rail-head b { color: var(--muted); }
.agents-rail.is-failed .agents-rail-head b { color: var(--neg); }
@keyframes agents-beat { from { opacity: 0.35; } to { opacity: 1; } }
/* On a phone the rail keeps to what is happening now: finished lines fold away (the
   reduced-motion step list, .is-static, keeps every line). */
@media (max-width: 600px) {
  .agents-rails { bottom: 16px; }
  .agents-rail:not(.is-static) .agents-rail-line[data-state="done"] { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .agents-layer { display: none; }
  .agents-rail-line[data-state="working"] .agents-dot { animation: none; }
}