/* tool-call widget. Every font size in the widget is at least 13px (0.8125rem); shared classes are scoped up under .tc. */
.tc .w-sub { font-size: .85rem; }
.tc .badge { font-size: .8125rem; }
.tc .w-counter { font-size: .85rem; }
.tc code { font-size: 1em; }
.tc-user { margin: 0 0 .8rem; font-size: 1rem; }
.tc-tag { margin: 0 0 .9rem; padding: .5rem .75rem; font-size: .9rem; line-height: 1.5; color: var(--text-2); border-left: 3px solid var(--mid); border-radius: 4px; background: color-mix(in srgb, var(--mid) 9%, transparent); }

/* The main picture: six stages of one call, colored by who acts */
.tc-pipe { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .5rem; }
.tc-stage { margin: 0; padding: .6rem .65rem; border: 1.5px solid var(--border); border-radius: 12px; background: var(--bg-sunk); transition: background .2s, box-shadow .2s; }
.tc-stage:not(.is-done):not(.is-active) .tc-stage-who { color: var(--text-3); }
.tc-stage:not(.is-done):not(.is-active) .tc-stage-what { color: var(--text-2); }
.tc-stage-who { display: block; font-size: .8125rem; font-weight: 750; letter-spacing: .03em; text-transform: uppercase; color: var(--c); }
.tc-stage-what { display: block; margin-top: .15rem; font-size: .95rem; font-weight: 650; line-height: 1.3; color: var(--text); }
.tc-stage.is-done { border-color: var(--c-bd); background: var(--c-bg); }
.tc-stage.is-active { border-color: var(--c-bd); background: var(--c-bg); box-shadow: 0 0 0 2px var(--bg-elev), 0 0 0 4px var(--c); }
.tc-stage.is-skipped { border-style: dashed; }
.tc-stage.is-skipped .tc-stage-what { text-decoration: line-through; }
.tc-stage.is-skipped::after { content: "Skipped"; display: block; margin-top: .2rem; font-size: .8125rem; font-weight: 700; color: var(--text-2); }
@media (max-width: 900px) { .tc-pipe { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 520px) { .tc-pipe { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* The narration comes first and is large */
.tc .w-narration { font-size: 1.05rem; line-height: 1.55; padding: .85rem 1rem; }
.tc-say { margin: 0; }

/* Two counts, labeled in words */
.tc-stats { display: flex; flex-wrap: wrap; gap: .5rem; margin: .9rem 0; }
.tc-stat { display: flex; align-items: baseline; gap: .4rem; padding: .35rem .75rem; border: 1px solid var(--border); border-radius: 999px; background: var(--bg); }
.tc-stat-num { font-size: 1rem; font-weight: 750; }
.tc-stat-label { font-size: .875rem; color: var(--text-2); }

/* Detail panels: secondary and calm */
.tc-grid { align-items: start; }
.tc .w-panel-title { font-size: .875rem; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--text-2); }
.tc .w-kv { font-size: .85rem; }
.tc .w-note { font-size: .875rem; color: var(--text-2); }
.tc .w-status { font-size: .8125rem; padding: 0 .4rem; }
.tc .w-pill { font-size: .8125rem; }
.tc-wide { grid-column: 1 / -1; }
.tc-json { font-size: .85rem; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 20rem; }
.tc-line { display: block; text-indent: -2ch; }
.tc-json .tc-bad { color: inherit; background: color-mix(in srgb, var(--bad) 20%, transparent); outline: 1px solid var(--bad); border-radius: 3px; }
.tc-quiet { margin: 0 0 .5rem; font-size: .9rem; color: var(--text-2); }
.tc-call { padding: .1rem 0 .6rem; }
.tc-call + .tc-call { padding-top: .6rem; border-top: 1px dashed var(--border); }
.tc-call-head { margin: 0 0 .35rem; font-size: .9rem; font-weight: 650; }
.tc-bars { margin-top: .7rem; padding-top: .6rem; border-top: 1px dashed var(--border); }
.tc-bar-row { display: grid; grid-template-columns: 3.8rem minmax(2.5rem, 1fr) auto; gap: .5rem; align-items: center; margin: .3rem 0; font-size: .85rem; }
.tc-bar-track { height: .7rem; border-radius: 3px; background: var(--bg-sunk); border: 1px solid var(--border); overflow: hidden; }
.tc-bar { display: block; height: 100%; background: color-mix(in srgb, var(--c) 45%, transparent); border-right: 2px solid var(--c); }
.tc-bar.is-failed { background: color-mix(in srgb, var(--bad) 45%, transparent); border-right-color: var(--bad); }
.tc-bar-label { color: var(--text-2); }
.tc-points { margin: 0; padding-left: 1.2rem; font-size: .95rem; }
.tc-results { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); gap: .7rem; }
.tc-result { min-width: 0; }
.tc-content { margin: .45rem 0 0; padding: .55rem .7rem; max-height: 15rem; overflow: auto; font: .85rem/1.5 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; background: var(--bg-code); border: 1px solid var(--border); border-radius: 8px; }
.tc-idle { margin: 0; font-size: .95rem; color: var(--text-2); }
.tc-hist-title { margin-top: .9rem; }
.tc-hist { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.tc-hist li { margin: 0; }
.tc-note { font-size: .9rem; }
@media (max-width: 640px) { .tc-stage { padding: .5rem .55rem; } .tc-stage-what { font-size: .9rem; } }