/* Agent Run Panel — the live run surface every AI product hand-rolls.
   Step timeline, tool calls with args/results/duration, a token + cost meter,
   and stop/retry that is honest about what it can and cannot halt.
   Zero deps, CSP-safe. Theme via custom props on .ar-root;
   flip [data-ar-theme="dark"] for Studio dark.
   ENOK Foundry · https://enok.com */

.ar-root{
  /* Light — Santorini white / earth adobe (low glow, earthy, no gradients).
     Same values as the Thread Shell / InChat / ChatBar / Skim Chips palette:
     one theme skins the whole chat-native family. */
  --ar-bg:#FBF8F1; --ar-panel:#FFFFFF; --ar-line:#E5DECF; --ar-line2:#D8CFBB;
  --ar-ink:#2A2622; --ar-ink2:#7A7266;
  --ar-accent:#46708C; --ar-accent-bg:#E9EEF2;
  --ar-run:#3E6B4A;  --ar-run-bg:#E8EFE5;   /* landed / positive */
  --ar-wait:#8A6A2A; --ar-wait-bg:#F3EBD8;  /* in flight / waiting */
  --ar-err:#A24B37;  --ar-err-bg:#F4E3DC;   /* failed / needs a hand */
  --ar-r-panel:16px; --ar-r-row:12px; --ar-r-ctl:8px;
  --ar-shadow:0 1px 2px rgba(42,38,34,.05);
  --ar-mono:'SF Mono',ui-monospace,Menlo,Consolas,monospace;
  --ar-rail:22px;          /* timeline gutter: tick column + the thread it hangs on */
  --ar-steps-h:none;       /* set a px height to make the timeline its own scroll region */
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--ar-ink); line-height:1.55;
}
.ar-root[data-ar-theme="dark"]{
  --ar-bg:#191713; --ar-panel:#221F1A; --ar-line:#3A352C; --ar-line2:#4A4438;
  --ar-ink:#F2EDE2; --ar-ink2:#A79D8C;
  --ar-accent:#7FA6C2; --ar-accent-bg:#25303A;
  --ar-run:#8FB98A;  --ar-run-bg:#232C22;
  --ar-wait:#CBA55E; --ar-wait-bg:#2E2818;
  --ar-err:#D08A6E;  --ar-err-bg:#2E211B;
  --ar-shadow:0 1px 2px rgba(0,0,0,.28);
}

/* ── Panel ────────────────────────────────────────────────────────────── */
.ar-panel{background:var(--ar-bg);border:1px solid var(--ar-line);
  border-radius:var(--ar-r-panel);overflow:hidden;}

/* ── Top bar ──────────────────────────────────────────────────────────── */
.ar-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:12px 16px;border-bottom:1px solid var(--ar-line);}
.ar-tt{min-width:0;}
.ar-title{font-size:14px;font-weight:700;letter-spacing:.01em;margin:0;}
.ar-sub{font-size:11.5px;color:var(--ar-ink2);}
.ar-top-right{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}

/* The state chip is the run's one word. Colour never carries it alone —
   the word is always spelled out. */
.ar-state{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;
  font-weight:700;letter-spacing:.03em;text-transform:uppercase;
  color:var(--ar-ink2);background:var(--ar-panel);
  border:1px solid var(--ar-line);border-radius:999px;padding:4px 11px;}
.ar-state .ar-sdot{width:6px;height:6px;border-radius:50%;background:currentColor;}
.ar-panel[data-ar-run="running"] .ar-state{color:var(--ar-accent);background:var(--ar-accent-bg);}
.ar-panel[data-ar-run="running"] .ar-sdot{animation:ar-pulse 1.4s infinite;}
.ar-panel[data-ar-run="stopping"] .ar-state{color:var(--ar-wait);background:var(--ar-wait-bg);}
.ar-panel[data-ar-run="stopping"] .ar-sdot{animation:ar-pulse 1s infinite;}
.ar-panel[data-ar-run="done"] .ar-state{color:var(--ar-run);background:var(--ar-run-bg);}
.ar-panel[data-ar-run="stopped"] .ar-state{color:var(--ar-ink2);background:var(--ar-panel);
  border-color:var(--ar-line2);}
.ar-panel[data-ar-run="failed"] .ar-state{color:var(--ar-err);background:var(--ar-err-bg);}

.ar-elapsed{font-family:var(--ar-mono);font-size:12px;color:var(--ar-ink2);
  font-variant-numeric:tabular-nums;}

/* ── Buttons ──────────────────────────────────────────────────────────── */
.ar-btn{font:inherit;font-size:11.5px;font-weight:700;letter-spacing:.03em;
  text-transform:uppercase;color:var(--ar-ink);background:var(--ar-panel);
  border:1px solid var(--ar-line2);border-radius:var(--ar-r-ctl);
  padding:5px 12px;cursor:pointer;}
.ar-btn:hover{border-color:var(--ar-ink2);}
.ar-btn:focus-visible{outline:2px solid var(--ar-accent);outline-offset:2px;}
.ar-btn[hidden]{display:none;}
.ar-btn[disabled]{cursor:default;opacity:.55;}
.ar-btn[disabled]:hover{border-color:var(--ar-line2);}
.ar-stop{color:var(--ar-err);border-color:var(--ar-line2);}
.ar-stop:hover:not([disabled]){border-color:var(--ar-err);}

/* ── Meter ────────────────────────────────────────────────────────────── */
.ar-meter{display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  padding:10px 16px;border-bottom:1px solid var(--ar-line);
  background:var(--ar-panel);}
.ar-m{display:flex;align-items:baseline;gap:7px;}
.ar-mk{font-size:10.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ar-ink2);}
.ar-mv{font-family:var(--ar-mono);font-size:13px;font-variant-numeric:tabular-nums;}
/* An unpriced run says so in words — it never shows a dash where money goes. */
.ar-m[data-ar-unpriced] .ar-mv{font-family:inherit;font-size:12px;color:var(--ar-ink2);}

/* Two solid segments, no gradient: how the tokens split in : out. */
.ar-split{flex:1 1 120px;min-width:90px;height:6px;border-radius:999px;
  background:var(--ar-line);overflow:hidden;display:flex;}
.ar-split i{display:block;height:100%;}
.ar-split .ar-in{background:var(--ar-ink2);}
.ar-split .ar-out{background:var(--ar-accent);}

/* ── Timeline ─────────────────────────────────────────────────────────── */
.ar-steps{margin:0;padding:8px 16px 12px;list-style:none;
  max-height:var(--ar-steps-h);overflow-y:auto;overscroll-behavior:contain;}
.ar-steps:empty{display:none;}

.ar-step{position:relative;padding:6px 0 6px calc(var(--ar-rail) + 10px);}
/* the rail: one hairline the ticks hang on, stopping at the last step */
.ar-step::before{content:"";position:absolute;left:calc(var(--ar-rail) / 2 - .5px);
  top:0;bottom:0;width:1px;background:var(--ar-line);}
.ar-step:first-child::before{top:14px;}
.ar-step:last-child::before{bottom:auto;height:14px;}
.ar-step:only-child::before{display:none;}

.ar-tick{position:absolute;left:0;top:9px;width:var(--ar-rail);height:var(--ar-rail);
  display:flex;align-items:center;justify-content:center;}
.ar-tick::before{content:"";width:11px;height:11px;border-radius:50%;
  background:var(--ar-bg);border:1.5px solid var(--ar-line2);box-sizing:border-box;}

.ar-step[data-ar-sstate="run"] .ar-tick::before{border-color:var(--ar-accent);
  background:var(--ar-accent);animation:ar-pulse 1.4s infinite;}
.ar-step[data-ar-sstate="done"] .ar-tick::before{border-color:var(--ar-run);
  background:var(--ar-run);}
.ar-step[data-ar-sstate="fail"] .ar-tick::before{border-color:var(--ar-err);
  background:var(--ar-err);}
/* Never-ran reads as hollow and dashed — visibly not the same as done. */
.ar-step[data-ar-sstate="skip"] .ar-tick::before{border-style:dashed;
  border-color:var(--ar-ink2);background:var(--ar-bg);}

.ar-srow{display:flex;align-items:baseline;gap:10px;}
.ar-slabel{font-size:13.5px;font-weight:600;min-width:0;overflow-wrap:anywhere;}
.ar-step[data-ar-sstate="todo"] .ar-slabel{color:var(--ar-ink2);}
.ar-step[data-ar-sstate="skip"] .ar-slabel{color:var(--ar-ink2);}
.ar-step[data-ar-sstate="fail"] .ar-slabel{color:var(--ar-err);}
.ar-sdur{margin-left:auto;font-family:var(--ar-mono);font-size:11.5px;
  color:var(--ar-ink2);font-variant-numeric:tabular-nums;white-space:nowrap;}
.ar-snote{font-size:12.5px;color:var(--ar-ink2);margin-top:2px;overflow-wrap:anywhere;}
.ar-snote:empty{display:none;}
.ar-step[data-ar-sstate="fail"] .ar-snote{color:var(--ar-err);}

/* ── Tool calls ───────────────────────────────────────────────────────── */
.ar-tools{margin:7px 0 2px;display:flex;flex-direction:column;gap:5px;}
.ar-tools:empty{display:none;}

.ar-tool{border:1px solid var(--ar-line);border-radius:var(--ar-r-row);
  background:var(--ar-panel);overflow:hidden;}
.ar-tool[data-ar-tstate="fail"]{border-color:var(--ar-err);}

.ar-trow{display:flex;align-items:center;gap:8px;width:100%;
  font:inherit;text-align:left;color:inherit;background:transparent;
  border:0;padding:7px 11px;cursor:pointer;}
.ar-trow:hover{background:var(--ar-bg);}
.ar-trow:focus-visible{outline:2px solid var(--ar-accent);outline-offset:-2px;}
.ar-caret{flex:none;width:9px;color:var(--ar-ink2);font-size:10px;line-height:1;
  transition:transform .14s ease;}
.ar-trow[aria-expanded="true"] .ar-caret{transform:rotate(90deg);}
.ar-tname{font-family:var(--ar-mono);font-size:12.5px;overflow-wrap:anywhere;}
.ar-tstate{font-size:10.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ar-ink2);}
.ar-tool[data-ar-tstate="run"] .ar-tstate{color:var(--ar-accent);}
.ar-tool[data-ar-tstate="done"] .ar-tstate{color:var(--ar-run);}
.ar-tool[data-ar-tstate="fail"] .ar-tstate{color:var(--ar-err);}
.ar-tdur{margin-left:auto;font-family:var(--ar-mono);font-size:11.5px;
  color:var(--ar-ink2);font-variant-numeric:tabular-nums;white-space:nowrap;}

.ar-tbody{border-top:1px solid var(--ar-line);padding:2px 11px 10px;}
.ar-tbody[hidden]{display:none;}
.ar-blk{margin-top:8px;}
.ar-bk{font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ar-ink2);margin-bottom:4px;}
.ar-pre{margin:0;font-family:var(--ar-mono);font-size:11.5px;line-height:1.5;
  color:var(--ar-ink);background:var(--ar-bg);border:1px solid var(--ar-line);
  border-radius:var(--ar-r-ctl);padding:8px 10px;
  white-space:pre-wrap;overflow-wrap:anywhere;overflow-x:auto;}
.ar-blk[data-ar-err] .ar-pre{color:var(--ar-err);border-color:var(--ar-err);
  background:var(--ar-err-bg);}
/* Nothing is truncated silently — the clamp says how much it is holding back. */
.ar-more{margin-top:5px;font:inherit;font-size:11px;font-weight:700;
  letter-spacing:.03em;color:var(--ar-ink2);background:transparent;
  border:0;border-bottom:1px solid var(--ar-line2);padding:0 0 1px;cursor:pointer;}
.ar-more:hover{color:var(--ar-ink);}
.ar-more:focus-visible{outline:2px solid var(--ar-accent);outline-offset:2px;}

/* ── Ledger line ──────────────────────────────────────────────────────── */
/* What the run actually did, written down after it ends. Stays put — the
   record outlives the spinner. */
.ar-ledger{display:none;align-items:baseline;gap:8px;flex-wrap:wrap;
  padding:10px 16px;border-top:1px solid var(--ar-line);
  background:var(--ar-panel);font-size:12.5px;color:var(--ar-ink2);}
.ar-ledger[data-ar-on]{display:flex;}
.ar-ledger b{color:var(--ar-ink);font-weight:700;}

@keyframes ar-pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* Reduced motion: state is never carried by movement alone — every tick and
   chip keeps its colour and its word, and simply holds still. */
@media (prefers-reduced-motion: reduce){
  .ar-state .ar-sdot,.ar-step[data-ar-sstate="run"] .ar-tick::before{animation:none;}
  .ar-caret{transition:none;}
}

@media (max-width:520px){
  .ar-root{--ar-rail:18px;}
  .ar-top,.ar-meter,.ar-steps,.ar-ledger{padding-left:12px;padding-right:12px;}
  .ar-meter{gap:14px;}
  .ar-sdur{margin-left:0;}
  .ar-srow{flex-wrap:wrap;}
}