/* The Trace: agent activity as one row primitive (trace.js), the shadcn/ui
 * Trace composition adapted to this design system (see trace.js's header for
 * the source and license). A line is a decorative icon, a truncating title
 * and a description that does not; status is color and motion on the line:
 * running shimmers (motion off when the reader prefers it), error is danger
 * ink, pending is quiet. A row with detail opens under a button trigger with
 * a turning chevron; its content is muted. Linked right after transcript.css. */

/* ---- the line: icon, title, description ---- */
[data-slot="trace-line"] {
  display: flex;
  align-items: center;
  gap: var(--sv-space-2);
  min-width: 0;
  max-width: 100%;
  width: fit-content;
  color: var(--sv-ink-secondary);
  font-size: var(--ui-text);
}
[data-slot="trace-line"][data-status="error"] { color: var(--sv-danger); }
[data-slot="trace-line"][data-status="pending"] { opacity: 0.6; }
[data-slot="trace-line"] .t-glyph { flex: none; width: 1em; display: inline-flex; align-items: center; justify-content: center; color: var(--sv-ink-tertiary); font-size: var(--ui-meta); }
[data-slot="trace-line"] .t-glyph .icon { width: 14px; height: 14px; }
[data-slot="trace-line"][data-status="error"] .t-glyph { color: var(--sv-danger); }
.tr-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-desc { flex: none; color: var(--sv-ink-tertiary); font-size: var(--ui-meta); font-variant-numeric: tabular-nums; }

/* ---- the running title shimmers: ink sweeps through the muted words ---- */
@keyframes tr-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
[data-slot="trace-line"][data-status="running"] > .tr-title {
  background: linear-gradient(90deg, var(--sv-ink-secondary) 0 38%, var(--sv-ink) 50%, var(--sv-ink-secondary) 62% 100%) 100% 0 / 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: tr-shimmer 1.6s linear infinite;
}
@media (prefers-reduced-motion: reduce), (forced-colors: active) {
  [data-slot="trace-line"][data-status="running"] > .tr-title {
    background: none;
    -webkit-text-fill-color: currentColor;
    animation: none;
  }
}

/* ---- row chrome: what the reader can point at ---- */
.tr-row {
  display: flex;
  align-items: center;
  gap: var(--sv-space-2);
  min-width: 0;
  max-width: 100%;
  width: fit-content;
  min-height: 28px;
  padding: 2px var(--sv-space-2);
  margin: 0 calc(-1 * var(--sv-space-2));
  border-radius: var(--sv-radius);
  font-size: var(--ui-text);
  color: var(--sv-ink-secondary);
}
button.tr-row { background: none; border: 0; font: inherit; text-align: left; cursor: pointer; }
/* The trigger and the link row lift their line's ink; a failed step stays in danger ink. */
.tr-trigger:hover, .tr-link:hover { background: var(--ws-hover); }
.tr-trigger:hover [data-slot="trace-line"]:not([data-status="error"]),
.tr-link:hover [data-slot="trace-line"]:not([data-status="error"]) { color: var(--sv-ink); }
button.tr-row:focus-visible { outline: 2px solid var(--sv-ink); outline-offset: 2px; }
/* A plain line in a list (no detail to open, nowhere to jump) is text: the
 * row's height, no hover, no click it cannot deliver. */
.tr-list > [data-slot="trace-line"] { min-height: 28px; padding: 2px 0; }

/* ---- the chevron: the indicator turns when the row is open ---- */
.tr-chevron { color: var(--sv-ink-tertiary); transition: transform var(--sv-dur-fast) var(--sv-ease-out), color var(--sv-dur-fast) var(--sv-ease-out); }
[data-slot="trace-collapsible"][data-open] .tr-chevron { transform: rotate(90deg); color: var(--sv-ink-secondary); }
@media (prefers-reduced-motion: reduce) { .tr-chevron { transition: none; } }

/* ---- the content: muted, and it opens by growing ---- */
.tr-content {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  min-width: 0;
  transition: grid-template-rows var(--sv-dur-fast) var(--sv-ease-out), visibility var(--sv-dur-fast);
}
/* inherit, not visible: an open row inside a closed one stays hidden with it */
[data-slot="trace-collapsible"][data-open] > .tr-content { grid-template-rows: 1fr; visibility: inherit; }
.tr-inner { min-height: 0; overflow: hidden; color: var(--sv-ink-secondary); min-width: 0; overflow-wrap: break-word; }
@media (prefers-reduced-motion: reduce) { .tr-content { transition: none; } }

/* ---- the list: rows sit in a group, flush, quiet ---- */
.tr-list { display: flex; flex-direction: column; min-width: 0; max-width: 100%; }

/* ---- the transcript's turns: where the rows live (transcript.css places
 * the run groups in the column) ---- */
.trace, .tool, .t-child { max-width: 100%; }
.trace .tr-list > .tool { margin-left: var(--sv-space-4); }

/* A delegate's report and its children: prose in a quiet well. */
.t-child-body {
  margin: var(--sv-space-1) 0 var(--sv-space-2);
  padding: var(--sv-space-2) var(--sv-space-3);
  border: var(--sv-hairline-w) solid var(--sv-hairline);
  border-radius: var(--sv-radius);
  background: var(--sv-surface-sunken);
  max-height: 16rem;
  overflow: auto;
  font-size: var(--ui-text);
}

/* delegate children: each one is a live row of its own */
.t-children {
  margin: var(--sv-space-1) 0 var(--sv-space-2);
  padding-left: var(--sv-space-3);
  border-left: 2px solid var(--sv-hairline);
  display: grid;
  gap: 1px;
  min-width: 0;
}
.t-child .tr-inner > .t-child-body { margin-top: 0; }

/* A long run shows its newest rows (TRACE_SHOWN, rungroup.js); the button before them shows the rest. */
.tr-list[data-capped] > :nth-last-child(n + 41) { display: none; }
.tr-more { margin: var(--sv-space-1) 0 var(--sv-space-1) var(--sv-space-4); font-size: var(--ui-meta); }
/* A run's group with nothing inside yet (it is thinking): its line, no chevron. */
.trace.tr-empty > .tr-trigger .tr-chevron { visibility: hidden; }
/* A link row's note at its edge ("Open"). */
.tr-link-note { flex: none; color: var(--sv-ink-tertiary); font-size: var(--ui-meta); }
/* ---- a run's own line (rungroup.js): one spot, working then settled ----
 * Working: "Working for 12s" shimmers, its clock in tabular digits, the
 * step under way after it. Settled: an outcome icon (a green check, a stop,
 * a danger mark), the words in secondary ink, every motion inside stopped.
 * A run with nothing to open (no steps or words) reads lighter and opens nothing. */
.trace > .tr-trigger .tr-clock { flex: none; margin-left: calc(0.3em - var(--sv-space-2)); font-variant-numeric: tabular-nums; }
.trace > .tr-trigger .tr-clock:empty { display: none; }
.trace > .tr-trigger .tr-desc::before { content: "· "; }
.trace > .tr-trigger .tr-title { flex: none; }
.trace > .tr-trigger .tr-desc { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trace[data-state="done"] > .tr-trigger .t-glyph:not(.tr-chevron) { color: var(--ws-working-ink); }
.trace[data-state="failed"] > .tr-trigger .t-glyph:not(.tr-chevron) { color: var(--sv-danger); }
.trace[data-state="stopped"] > .tr-trigger .t-glyph:not(.tr-chevron) { color: var(--sv-ink-secondary); }
.trace.tr-empty > .tr-trigger { cursor: default; }
/* A plain answer (no steps, no words to open) needs no line once it settles:
 * its working line folds away and the check rides the answer's own time
 * below it (transcript.css). Live, it folds; from history it is simply gone. */
.trace.tr-empty[data-state="done"] {
  max-height: 0;
  margin-top: 0 !important;
  opacity: 0;
  overflow: hidden;
  visibility: hidden;
  animation: tr-fold var(--sv-dur-fast) var(--sv-ease-out);
}
@keyframes tr-fold {
  from { max-height: 3rem; margin-top: var(--sv-space-3); opacity: 1; visibility: visible; }
}
@media (prefers-reduced-motion: reduce) { .trace.tr-empty[data-state="done"] { animation: none; } }
.trace.tr-empty > .tr-trigger:hover { background: none; }
.trace.tr-empty[data-state="done"] > .tr-trigger [data-slot="trace-line"] { color: var(--sv-ink-tertiary); }
.trace:not([data-state="running"]) [data-slot="trace-line"][data-status="running"] > .tr-title {
  background: none;
  -webkit-text-fill-color: currentColor;
  animation: none;
}