/* ==========================================================================
   Runs (debug mode) — the Inbox's two surfaces: the list on the page, the open run the one panel.
   Left: the runs as rows (agent · title over who, where, when · time and tokens); a running one breathes, a failed
   or cancelled one says so in an outline chip; the open one sits on the fill.
   Right: the run's head (Title), four figures, a line for each subscription that served its calls, the cycle it
   belongs to, then the chain: a time line of steps, each a row that opens to what it recorded, in monospace blocks
   (Code) with Copy, and folds for the long parts. While the run goes on, what it does now closes the time line, its
   dot breathing: the model's thinking on the fill behind an ink rule, its reply as body text, a tool's arguments in
   a monospace block, each growing as it streams.
   Every word ink; the text styles are the contract's (meta 12 · body/strong 14 · title 20 · figure 32 · code).
   ========================================================================== */
.view-runs { overflow: hidden; }
.rn {
  height: 100%; min-height: 560px;
  display: grid; grid-template-columns: 392px minmax(0, 1fr); column-gap: 20px;
  padding: 4px 20px 0;
}

/* ==========================================================================
   Left: the runs, on the page
   ========================================================================== */
.rn-side { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.rn-side-head { flex: none; display: flex; flex-direction: column; gap: 12px; padding: 12px 10px 12px; }
.rn-side-top { display: flex; align-items: center; gap: 10px; min-height: 28px; padding: 0 2px; }
.rn-side-title { margin: 0; font-size: var(--fs-heading); font-weight: 500; line-height: 1.4; }
.rn-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.rn-filters .select { background-color: var(--surface); }
.rn-status { grid-column: 1 / -1; display: grid; width: 100%; }

.rn-list {
  --av-bg: var(--surface); /* avatars on the page are white */
  flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 2px; padding: 0 10px 24px;
}
.rn-list .empty { padding: 40px 16px; }
.rn-wait { margin: 0; padding: 16px 12px; }
.rn-row {
  display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: start; column-gap: 12px;
  padding: 10px 12px; border-radius: var(--r-2); color: var(--ink); text-decoration: none;
  transition: background var(--dur-1) var(--ease);
}
.rn-row:hover { background: var(--hover); }
.rn-row.is-active { background: var(--fill); }
.rn-row > .av { margin-top: 1px; }
.rn-row-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.rn-row-title { font-weight: 500; line-height: 1.45; overflow-wrap: anywhere; }
.rn-row-meta { font-size: var(--fs-meta); line-height: 1.4; }
.rn-row-end { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; padding-top: 2px; font-size: var(--fs-meta); line-height: 1.4; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rn-row-end .chip { height: 22px; }
.rn-live { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-meta); }
.rn-live .dot { width: 6px; height: 6px; }
.rn-more { align-self: center; margin-top: 10px; }

/* ==========================================================================
   Right: the open run, the one panel
   ========================================================================== */
.rn-main {
  position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden;
  margin-bottom: 20px; background: var(--surface); border-radius: var(--r-4); box-shadow: var(--ring);
}
.rn-main > .empty { flex: 1 1 auto; }
.rn-main > .rn-wait { padding: 24px 28px; }
.rn-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 22px 28px 40px; }

.rn-head { display: flex; align-items: flex-start; gap: 16px; }
.rn-head-main { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-width: 0; }
.rn-title { margin: 0; font-size: var(--fs-title); font-weight: 500; line-height: 1.3; overflow-wrap: anywhere; }
.rn-head-meta { line-height: 1.5; }
.rn-head-meta b { font-weight: 500; }
.rn-on { margin: 0 2px; }
.rn-link { font-weight: 400; white-space: normal; text-decoration: underline; text-decoration-color: var(--stroke); }
.rn-ids { font-size: var(--fs-meta); line-height: 1.6; }
.rn-ids code { user-select: all; }
.rn-head-end { flex: none; padding-top: 4px; }

.rn-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 22px; }
.rn-stat { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rn-stat-l, .rn-stat-s { font-size: var(--fs-meta); line-height: 1.4; }
.rn-stat-s { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rn-stat-v { font-size: var(--fs-figure); font-weight: 300; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rn-error { margin-top: 20px; }
.rn-error .callout-body { gap: 6px; }
.rn-final { margin-top: 20px; }
/* The subscriptions that served the run: a line each in body text, under the figures */
.rn-subs { display: flex; flex-direction: column; gap: 2px; margin-top: 18px; }
.rn-sub { margin: 0; line-height: 1.5; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

/* The cycle: the chain's runs in order, this one on the fill */
.rn-cycle { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; margin-top: 20px; padding: 10px 12px; border-radius: var(--r-3); box-shadow: inset 0 0 0 1px var(--line); }
.rn-cycle-l { margin-right: 6px; font-size: var(--fs-meta); }
.rn-cycle-sep { width: 14px; height: 14px; color: var(--stroke); }
.rn-cyc { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px 0 6px; border-radius: var(--r-pill); color: var(--ink); text-decoration: none; transition: background var(--dur-1) var(--ease); }
.rn-cyc:hover { background: var(--hover); }
.rn-cyc.is-active { background: var(--fill); font-weight: 500; }

/* ---------- The chain: a time line of steps ---------- */
.rn-trace-bar { display: flex; align-items: center; gap: 8px; margin: 24px 0 6px; }
.rn-trace-title { font-weight: 500; }
.rn-steps { position: relative; margin: 0; padding: 0; list-style: none; }
.rn-steps::before { content: ""; position: absolute; left: 75.25px; top: 18px; bottom: 18px; width: 1.5px; border-radius: 2px; background: var(--line-strong); }
.rn-step { display: grid; grid-template-columns: 52px 28px minmax(0, 1fr); column-gap: 10px; align-items: start; }
.rn-step-t { padding-top: 8px; font: 400 var(--fs-meta)/1.5 var(--mono); text-align: right; font-variant-numeric: tabular-nums; }
.rn-step-dot { position: relative; z-index: 1; justify-self: center; width: 7px; height: 7px; margin-top: 14px; border-radius: 50%; background: var(--stroke); box-shadow: 0 0 0 3px var(--surface); }
.rn-step.k-llm > .rn-step-dot, .rn-step.k-trigger > .rn-step-dot, .rn-step.k-check > .rn-step-dot,
.rn-step.k-handoff > .rn-step-dot, .rn-step.k-queued > .rn-step-dot, .rn-step.k-sent > .rn-step-dot { background: var(--ink); }
.rn-step.k-review > .rn-step-dot, .rn-step.k-memory > .rn-step-dot, .rn-step.k-reminder > .rn-step-dot {
  width: 9px; height: 9px; margin-top: 13px; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--ink), 0 0 0 3px var(--surface);
}
.rn-step-main { min-width: 0; padding: 0 0 6px; }
.rn-step-head {
  display: flex; align-items: center; gap: 10px; width: calc(100% + 10px); min-height: 34px; margin-left: -10px; padding: 4px 8px 4px 10px;
  border: 0; border-radius: var(--r-2); background: none; color: var(--ink); text-align: left; cursor: pointer;
  transition: background var(--dur-1) var(--ease);
}
.rn-step-head:hover { background: var(--hover); }
.rn-step.is-open > .rn-step-main > .rn-step-head { background: var(--fill); }
.rn-kind { flex: none; display: inline-flex; align-items: center; gap: 6px; width: 104px; font-size: var(--fs-meta); }
.rn-kind .ic { width: 14px; height: 14px; flex: none; }
.rn-what { display: flex; align-items: baseline; gap: 6px; min-width: 0; flex: 0 1 auto; overflow: hidden; }
.rn-step-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.rn-tool { flex: none; font-family: var(--mono); font-size: var(--fs-meta); }
.rn-args { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); font-size: var(--fs-meta); }
.rn-step-meta { flex: none; margin-left: auto; display: flex; align-items: center; gap: 14px; font-size: var(--fs-meta); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rn-chev { flex: none; width: 16px; height: 16px; transition: transform var(--dur-2) var(--ease); }
.rn-step-head[aria-expanded="true"] .rn-chev { transform: rotate(180deg); }
.rn-peek { margin: -2px 0 0 104px; padding: 0 26px 0 16px; line-height: 1.45; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A model call's figures: tokens in and out, the prompt cache's share, the cost, the subscription's windows — in the
   meta size, under the head; the parts wrap whole */
.rn-figs { margin: -2px 0 2px 104px; padding: 0 26px 0 16px; font-size: var(--fs-meta); line-height: 1.45; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rn-step-body { display: flex; flex-direction: column; gap: 14px; padding: 12px 0 16px; }

/* ---------- What a step recorded ---------- */
.rn-kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px 20px; margin: 0; }
.rn-kv > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rn-kv dt { font-size: var(--fs-meta); line-height: 1.4; }
.rn-kv dd { margin: 0; font-weight: 500; line-height: 1.45; overflow-wrap: anywhere; }
.rn-note { margin: 0; line-height: 1.5; }
.rn-desc { margin: 0; line-height: 1.5; white-space: pre-wrap; }

.rn-block { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rn-block-head { display: flex; align-items: center; gap: 8px; min-height: 28px; }
.rn-block-l { font-size: var(--fs-meta); }
.rn-block-head > .rn-copy { margin-left: auto; }
.rn-pre {
  margin: 0; padding: 12px 14px; border-radius: var(--r-2); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line);
  font: 400 var(--fs-meta)/1.65 var(--mono); color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere;
  max-height: 440px; overflow: auto; tab-size: 2;
}
.rn-pre.is-bare { padding: 0; box-shadow: none; max-height: 240px; }
.rn-block.is-error .rn-pre { box-shadow: inset 0 0 0 1px var(--ink); }

.rn-sec { display: flex; flex-direction: column; gap: 10px; }
.rn-sec-h { margin: 0; font-size: var(--fs-body); font-weight: 500; line-height: 1.45; }
.rn-calls { display: flex; flex-direction: column; gap: 10px; }
.rn-call { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding-left: 14px; box-shadow: inset 1.5px 0 0 var(--line-strong); }
.rn-call.is-error { box-shadow: inset 1.5px 0 0 var(--ink); }
.rn-call-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-height: 24px; }
.rn-call-head .ic { width: 14px; height: 14px; }
.rn-call-head .chip { height: 22px; }
.rn-call-id { font-family: var(--mono); font-size: var(--fs-meta); }

/* Folds: the long parts of a model call (system prompt, messages, tools), opened when wanted */
.rn-fold { border-radius: var(--r-2); box-shadow: inset 0 0 0 1px var(--line); }
.rn-fold > summary {
  display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 8px 12px; border-radius: var(--r-2);
  list-style: none; cursor: pointer; transition: background var(--dur-1) var(--ease);
}
.rn-fold > summary::-webkit-details-marker { display: none; }
.rn-fold > summary:hover { background: var(--hover); }
.rn-fold > summary > .rn-chev { margin-left: auto; }
.rn-fold[open] > summary > .rn-chev { transform: rotate(180deg); }
.rn-fold-t { font-weight: 500; white-space: nowrap; }
.rn-fold-n { font-size: var(--fs-meta); white-space: nowrap; }
.rn-fold-body { display: flex; flex-direction: column; gap: 12px; padding: 4px 12px 14px; }
.rn-tool-fold > summary { min-height: 36px; }
.rn-tool-desc { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rn-fold-body > .rn-tool-fold { box-shadow: none; border-top: 1px solid var(--line); border-radius: 0; }

.rn-msg { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rn-msg + .rn-msg { padding-top: 12px; border-top: 1px solid var(--line); }
.rn-msg-head { display: flex; align-items: center; gap: 10px; min-height: 24px; }
.rn-msg-head b { font-weight: 500; }
.rn-msg-n { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--r-pill); background: var(--fill); font-size: var(--fs-meta); font-variant-numeric: tabular-nums; }
.rn-msg-meta { font-size: var(--fs-meta); }

.rn-web { display: flex; flex-direction: column; gap: 10px; }
.rn-web-item { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rn-web-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.rn-web-head .ic { width: 14px; height: 14px; }
.rn-web-head b { font-weight: 500; }
.rn-web-q { font-family: var(--mono); font-size: var(--fs-meta); overflow-wrap: anywhere; }
.rn-web-results { display: flex; flex-direction: column; gap: 6px; margin: 0; padding-left: 22px; }
.rn-web-results li { line-height: 1.45; }
.rn-web-results a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--stroke); text-underline-offset: 3px; }
.rn-url { display: block; font-size: var(--fs-meta); overflow-wrap: anywhere; }

.rn-mems { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.rn-mem { display: flex; flex-direction: column; gap: 4px; padding-left: 14px; box-shadow: inset 1.5px 0 0 var(--line-strong); }
.rn-mem p { margin: 0; line-height: 1.5; }
.rn-mem-meta { font-size: var(--fs-meta); }

/* ---------- The chain, live: what the run does now, under its last step (a step's row, not a button) ---------- */
.rn-now { display: grid; grid-template-columns: 52px 28px minmax(0, 1fr); column-gap: 10px; align-items: start; }
.rn-now > .rn-step-dot { background: var(--ink); animation: breathe-dot var(--breath) var(--ease-io) infinite; }
.rn-now-head { cursor: default; }
.rn-now-head:hover { background: none; }
.rn-now-body { display: flex; flex-direction: column; gap: 10px; padding: 4px 0 16px; }
.rn-think { display: flex; flex-direction: column; gap: 4px; padding: 10px 14px; border-radius: var(--r-2); background: var(--fill); box-shadow: inset 1.5px 0 0 var(--ink); }
.rn-think-l { font-size: var(--fs-meta); line-height: 1.4; }
.rn-think-t, .rn-say { line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; overflow: auto; overscroll-behavior: contain; }
.rn-think-t { max-height: 320px; }
.rn-say { max-height: 440px; }
.rn-now-args:empty { display: none; }

/* ---------- Smaller screens (1280×800): the same rhythm, a step tighter ---------- */
@media (max-width: 1360px) {
  .rn { grid-template-columns: 344px minmax(0, 1fr); }
  .rn-scroll { padding: 18px 22px 32px; }
  .rn-kind { width: 92px; }
  .rn-peek, .rn-figs { margin-left: 92px; }
}