/* ADR 0009 phase 9.4 — Session Theatre.
 *
 * A dark instrument panel. This surface got its palette first, and it was
 * right — so ADR 0010 P1 promoted it to the global scale in tokens.css and
 * the rest of the shell followed it here, rather than the other way round.
 *
 * The --th-* names are kept as ALIASES onto the global tokens. They stay
 * because ~840 lines of this file reference them and the rename is churn
 * with no payoff; what matters is that they no longer shadow :root. Before
 * P1 this block declared its own hex values, so Theatre rendered dark
 * inside a white rail and topbar (ADR 0010 F8).
 *
 * Direction is the chart recorder — a plotter drum, a seismograph trace.
 * A session IS a time series of events, so the instrument vernacular is
 * load-bearing rather than decorative: the rail down the left of the stage
 * places each event at its real elapsed time. A tool storm packs tight; a
 * long think leaves a visible gap. "Is it stuck?" is the first question you
 * ask about a running agent, and the trace answers it before you read a word.
 *
 * Colour discipline: exactly one accent (signal amber, the recorder's pen)
 * and it means LIVE. Green and red appear only inside diffs, where they
 * already mean add and remove.
 *
 * A light variant is deliberately not built. One look executed properly
 * beats two done halfway; revisit if anyone actually works in light mode.
 */

.th-view {
  --th-ground: var(--bg);
  --th-panel: var(--bg-card);
  --th-raise: var(--bg-subtle);
  --th-line: var(--border);
  --th-line-soft: var(--border-soft);

  --th-ink: var(--text);
  --th-dim: var(--text-muted);
  --th-faint: var(--text-subtle);

  --th-signal: var(--sig-warn);
  --th-add: var(--sig-ok);
  --th-del: var(--sig-bad);

  --th-mono: var(--font-mono);
  --th-sans: var(--font-sans);

  --th-rail-w: 132px;

  background: var(--th-ground);
  color: var(--th-ink);
  font-family: var(--th-sans);
  border-radius: var(--radius, 8px);

  /* Fixed-height flex column, not a growing block.
   *
   * The composer and the resume controls have to be visible at all times —
   * you are watching a session work, and the moment you most need to type or
   * approve something is the moment the transcript is longest. A sticky
   * bottom on a last child does not achieve that (it only pins while its
   * container is in view, and as the final element it never really is), so
   * the whole stage becomes a column: header fixed, transcript scrolling in
   * its own right, dock pinned below it.
   *
   * The shell already provides a definite height — .app-main is 100dvh with
   * overflow hidden and section[data-route] is height:100% — so this resolves
   * without inventing a viewport unit here. */
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Chrome: never scrolls, never shrinks. */
.th-view .th-bar,
.th-view .th-launch,
.th-view .th-stage-head,
.th-view .th-dock { flex: 0 0 auto; }

/* The one scrolling region. min-height:0 is required — without it a flex item
   refuses to shrink below its content and the dock gets pushed off-screen,
   which is the exact bug this layout exists to fix. */
.th-view .th-wall,
.th-view .th-log {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Panel silkscreen: the mono face doing display duty. Everything in this
   subject's world is monospaced, so making the data face the display face
   is truer than importing a serif that belongs to some other project. */
.th-view .th-eyebrow {
  font-family: var(--th-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--th-faint);
}

.th-view .th-bar {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--th-line);
  flex-wrap: wrap;
}

.th-view .th-bar h2 {
  font-family: var(--th-mono);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.04em;
  margin: 0;
  color: var(--th-ink);
}

.th-view .th-spacer { flex: 1 1 auto; }

/* ---------- the wall ---------- */

.th-view .th-wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 12px;
  padding: 16px 20px 24px;
}

.th-view .th-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 14px 12px 17px;
  background: var(--th-panel);
  border: 1px solid var(--th-line);
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: border-color 120ms ease, background 120ms ease;
}

.th-view .th-card:hover,
.th-view .th-card:focus-visible {
  border-color: #333d4f;
  background: var(--th-raise);
  outline: none;
}
.th-view .th-card:focus-visible { box-shadow: 0 0 0 2px var(--th-signal); }

/* The pen mark. Amber edge = this session is live. */
.th-view .th-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--th-line);
  border-radius: 6px 0 0 6px;
}
.th-view .th-card.is-live::before { background: var(--th-signal); }

.th-view .th-card-top {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.th-view .th-card-proj {
  font-family: var(--th-mono);
  font-size: 12.5px;
  color: var(--th-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.th-view .th-card-when {
  margin-left: auto;
  font-family: var(--th-mono);
  font-size: 10.5px;
  color: var(--th-faint);
  white-space: nowrap;
}

.th-view .th-card-line {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--th-dim);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.9em;
}

.th-view .th-card-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--th-mono);
  font-size: 10.5px;
  color: var(--th-faint);
}

/* Sparkline: the same trace as the stage rail, laid flat. Bars are activity
   per time bucket, so an idle session reads as a flat line at a glance. */
.th-view .th-spark {
  display: flex;
  align-items: flex-end;
  gap: 1px;
  height: 22px;
}
.th-view .th-spark i {
  flex: 1 1 0;
  min-width: 2px;
  background: #2c3444;
  border-radius: 1px 1px 0 0;
}
.th-view .th-card.is-live .th-spark i.hot { background: var(--th-signal); }

/* ---------- the stage ---------- */

.th-view .th-stage-head {
  padding: 16px 20px 14px;
  border-bottom: 1px solid var(--th-line);
}

.th-view .th-title {
  font-family: var(--th-mono);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.02em;
  margin: 6px 0 10px;
  color: var(--th-ink);
}

.th-view .th-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.th-view .th-chip {
  font-family: var(--th-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border: 1px solid var(--th-line);
  border-radius: 3px;
  color: var(--th-dim);
  white-space: nowrap;
}
.th-view .th-chip.live {
  color: var(--th-signal);
  border-color: color-mix(in srgb, var(--th-signal) 45%, transparent);
}
.th-view .th-chip.live::before {
  content: "";
  display: inline-block;
  width: 5px; height: 5px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--th-signal);
  vertical-align: middle;
  animation: th-pulse 2.4s ease-in-out infinite;
}
@keyframes th-pulse { 0%,100% { opacity: 1 } 50% { opacity: .28 } }

.th-view .th-back {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--th-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--th-faint);
}
.th-view .th-back:hover { color: var(--th-ink); }

.th-view .th-log { padding: 4px 20px 20px; }

/* One event. The rail column carries time; the body carries content. */
.th-view .th-row {
  display: grid;
  grid-template-columns: var(--th-rail-w) 1fr;
  gap: 0;
  align-items: start;
}

.th-view .th-rail {
  position: relative;
  align-self: stretch;
  padding: 0 16px 0 0;
  text-align: right;
  font-family: var(--th-mono);
  font-size: 10.5px;
  color: var(--th-faint);
  min-height: 22px;
}

/* The continuous paper edge. */
.th-view .th-rail::after {
  content: "";
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 1px;
  background: var(--th-line-soft);
}

/* The tick. Sits on the rail at this event's moment. */
.th-view .th-rail::before {
  content: "";
  position: absolute;
  right: -2px;
  top: 7px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #313a4b;
  z-index: 1;
}
.th-view .th-row.is-human .th-rail::before { background: var(--th-ink); }
.th-view .th-row.is-error .th-rail::before { background: var(--th-del); }

/* Elapsed-time gap. Height is set inline from the real interval, capped, so
   a stall is legible as empty paper instead of hiding between two lines. */
.th-view .th-gap {
  grid-column: 1 / -1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: var(--th-rail-w);
}
.th-view .th-gap::before {
  content: "";
  position: absolute;
  left: calc(var(--th-rail-w) - 1px);
  top: 0; bottom: 0;
  width: 1px;
  background: repeating-linear-gradient(
    to bottom, var(--th-line-soft) 0 3px, transparent 3px 7px);
}
.th-view .th-gap span {
  margin-left: 16px;
  font-family: var(--th-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--th-faint);
}

.th-view .th-body {
  padding: 2px 0 10px 16px;
  min-width: 0;
}

.th-view .th-who {
  font-family: var(--th-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--th-faint);
  margin-bottom: 4px;
}

.th-view .th-text {
  font-size: 13.5px;
  line-height: 1.62;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 0;
}

.th-view .th-row.is-human .th-text {
  color: var(--th-ink);
  font-weight: 500;
}
.th-view .th-row.is-reply .th-text { color: #cdd3de; }

/* Thinking: present but recessive. Collapsed by default — it is the least
   urgent thing on the page and the easiest to drown in. */
.th-view details.th-think > summary {
  list-style: none;
  cursor: pointer;
  font-family: var(--th-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--th-faint);
}
.th-view details.th-think > summary::-webkit-details-marker { display: none; }
.th-view details.th-think > summary:hover { color: var(--th-dim); }
.th-view details.th-think[open] > summary { margin-bottom: 6px; }
.th-view details.th-think .th-text {
  color: var(--th-dim);
  font-size: 13px;
  font-style: italic;
  border-left: 1px solid var(--th-line);
  padding-left: 12px;
}

/* Tool call: one dense line you can skim a hundred of. */
.th-view .th-tool {
  display: flex;
  align-items: baseline;
  gap: 9px;
  font-family: var(--th-mono);
  font-size: 12.5px;
  color: var(--th-dim);
  flex-wrap: wrap;
}
.th-view .th-tool b {
  color: var(--th-ink);
  font-weight: 500;
}
.th-view .th-tool .arg {
  color: var(--th-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.th-view .th-tool .delta { margin-left: auto; white-space: nowrap; }
.th-view .th-tool .delta .a { color: var(--th-add); }
.th-view .th-tool .delta .d { color: var(--th-del); }

.th-view .th-out {
  margin: 6px 0 0;
  padding: 9px 11px;
  background: #0d1016;
  border: 1px solid var(--th-line-soft);
  border-radius: 4px;
  font-family: var(--th-mono);
  font-size: 12px;
  line-height: 1.5;
  color: #b9c0cd;
  white-space: pre;
  overflow-x: auto;
  max-height: 320px;
  overflow-y: auto;
}
.th-view .th-out.err {
  color: #f0a8b6;
  border-color: color-mix(in srgb, var(--th-del) 32%, transparent);
}

/* Diff. structuredPatch arrives pre-hunked, so this renders what the
   transcript already knows rather than re-deriving anything. */
.th-view .th-diff {
  margin: 6px 0 0;
  border: 1px solid var(--th-line-soft);
  border-radius: 4px;
  overflow: hidden;
  font-family: var(--th-mono);
  font-size: 12px;
  line-height: 1.5;
}
.th-view .th-hunk-head {
  padding: 3px 11px;
  background: #10141b;
  color: var(--th-faint);
  border-bottom: 1px solid var(--th-line-soft);
}
.th-view .th-diff .ln {
  display: block;
  padding: 0 11px;
  white-space: pre;
  overflow-x: auto;
  color: #99a1b0;
}
.th-view .th-diff .ln.add { background: color-mix(in srgb, var(--th-add) 11%, transparent); color: #b7e8cd; }
.th-view .th-diff .ln.del { background: color-mix(in srgb, var(--th-del) 11%, transparent); color: #f2b9c5; }

.th-view .th-trunc {
  margin-top: 5px;
  font-family: var(--th-mono);
  font-size: 10.5px;
  color: var(--th-faint);
}

/* Subagent work is nested one step in, with its own edge, so a long
   delegation reads as a branch rather than as more of the same trunk. */
.th-view .th-row.is-sub .th-body {
  margin-left: 10px;
  padding-left: 14px;
  border-left: 1px solid var(--th-line);
}
.th-view .th-agent {
  font-family: var(--th-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: #9a8bd0;
}

.th-view .th-note {
  padding: 34px 20px;
  text-align: center;
  color: var(--th-dim);
  font-size: 13px;
  line-height: 1.6;
}
.th-view .th-note code {
  font-family: var(--th-mono);
  font-size: 12px;
  color: var(--th-ink);
  background: var(--th-raise);
  padding: 1px 5px;
  border-radius: 3px;
}

@media (max-width: 640px) {
  .th-view { --th-rail-w: 68px; }
  .th-view .th-rail { padding-right: 10px; font-size: 9.5px; }
  .th-view .th-body { padding-left: 10px; }
  .th-view .th-wall { grid-template-columns: 1fr; padding: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .th-view .th-chip.live::before { animation: none; }
  .th-view .th-card { transition: none; }
}

/* ---------- ADR 0009 phase 9.5 — the write path ---------- */

/* The launcher is the only way into an interactive session, so it gets the
   one solid affordance on the page. Everything else here stays quiet. */
.th-view .th-start {
  font-family: var(--th-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 7px 13px;
  border: 1px solid var(--th-signal);
  border-radius: 4px;
  background: transparent;
  color: var(--th-signal);
  cursor: pointer;
  white-space: nowrap;
}
.th-view .th-start:hover { background: color-mix(in srgb, var(--th-signal) 13%, transparent); }
.th-view .th-start:disabled { opacity: .5; cursor: default; }
.th-view .th-start:focus-visible { outline: 2px solid var(--th-signal); outline-offset: 2px; }

.th-view .th-launch {
  padding: 14px 20px 16px;
  border-bottom: 1px solid var(--th-line);
  background: var(--th-panel);
}
.th-view .th-launch-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
}
.th-view .th-launch label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-family: var(--th-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--th-faint);
}
.th-view .th-launch input,
.th-view .th-launch select {
  font-family: var(--th-mono);
  font-size: 12.5px;
  text-transform: none;
  letter-spacing: 0;
  padding: 7px 9px;
  min-width: 168px;
  background: var(--th-ground);
  border: 1px solid var(--th-line);
  border-radius: 4px;
  color: var(--th-ink);
}
.th-view .th-launch input:focus,
.th-view .th-launch select:focus {
  outline: none;
  border-color: var(--th-signal);
}
.th-view .th-launch-note {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--th-dim);
}
.th-view .th-launch-note strong { color: var(--th-signal); font-weight: 500; }

/* The dock is a frame, not an overlay: it sits below the transcript and is
   always on screen, because the moment you need it is the moment the
   transcript is longest. Solid rather than a fade — a gradient reads as
   "content continues underneath", which is exactly wrong for a fixed frame. */
.th-view .th-dock {
  padding: 12px 20px 16px;
  background: var(--th-panel);
  border-top: 1px solid var(--th-line);
}

.th-view .th-composer {
  display: flex;
  gap: 10px;
  align-items: flex-end;
}
.th-view .th-composer textarea {
  flex: 1 1 auto;
  resize: none;
  min-height: 40px;
  max-height: 200px;
  padding: 10px 12px;
  font-family: var(--th-sans);
  font-size: 13.5px;
  line-height: 1.5;
  background: var(--th-panel);
  border: 1px solid var(--th-line);
  border-radius: 6px;
  color: var(--th-ink);
}
.th-view .th-composer textarea:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--th-signal) 55%, var(--th-line));
}
.th-view .th-composer textarea::placeholder { color: var(--th-faint); }

.th-view .th-send {
  font-family: var(--th-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 11px 15px;
  border: 1px solid var(--th-line);
  border-radius: 6px;
  background: var(--th-raise);
  color: var(--th-ink);
  cursor: pointer;
}
.th-view .th-send:hover { border-color: var(--th-signal); color: var(--th-signal); }
.th-view .th-send:disabled { opacity: .5; cursor: default; }

.th-view .th-dock-note {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--th-dim);
  padding: 4px 2px;
}
.th-view .th-dock-status {
  min-height: 16px;
  margin-top: 6px;
  font-family: var(--th-mono);
  font-size: 10.5px;
  color: var(--th-faint);
}

@media (max-width: 640px) {
  .th-view .th-launch-row { flex-direction: column; align-items: stretch; }
  .th-view .th-launch input,
  .th-view .th-launch select { min-width: 0; width: 100%; }
  .th-view .th-dock { padding: 10px 12px 14px; }
}

.th-view .th-dock-foot {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.th-view .th-dock-foot .th-dock-status { margin-top: 0; }

/* Answer keys for an interactive permission prompt. Quiet by default — this
   is a fallback for a state the structured view cannot yet detect, not a
   primary control. */
.th-view .th-keys {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--th-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--th-faint);
}
.th-view .th-keys button {
  font: inherit;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 8px;
  border: 1px solid var(--th-line);
  border-radius: 3px;
  background: transparent;
  color: var(--th-dim);
  cursor: pointer;
}
.th-view .th-keys button:hover { border-color: var(--th-signal); color: var(--th-signal); }
.th-view .th-keys button:focus-visible { outline: 2px solid var(--th-signal); outline-offset: 1px; }

@media (max-width: 640px) {
  .th-view .th-keys { margin-left: 0; }
}

/* Resume is the way out of watch-only, so it gets the same solid affordance
   as the launcher — it is the same operation seen from the other side. */
.th-view .th-resume-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
}
.th-view .th-resume-row .th-dock-status { margin-top: 0; }

/* Blocked on a permission prompt. This is the one moment the page has to
   shout: the session has stopped and is waiting on a human, and from a phone
   there is nothing else on screen that would tell you. Amber because that is
   already the "this needs your attention" colour here. */
.th-view .th-attention {
  margin-bottom: 10px;
  padding: 11px 13px;
  border: 1px solid color-mix(in srgb, var(--th-signal) 55%, transparent);
  border-left-width: 3px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--th-signal) 9%, var(--th-panel));
}
.th-view .th-attention[hidden] { display: none; }

.th-view .th-attention-q {
  font-size: 13px;
  line-height: 1.5;
  color: var(--th-ink);
  margin-bottom: 9px;
  overflow-wrap: anywhere;
}

.th-view .th-attention-keys { display: flex; gap: 7px; flex-wrap: wrap; }
.th-view .th-attention-keys button {
  font-family: var(--th-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 12px;
  border: 1px solid var(--th-signal);
  border-radius: 4px;
  background: transparent;
  color: var(--th-signal);
  cursor: pointer;
}
.th-view .th-attention-keys button:hover {
  background: color-mix(in srgb, var(--th-signal) 16%, transparent);
}
.th-view .th-attention-keys button:focus-visible {
  outline: 2px solid var(--th-signal);
  outline-offset: 2px;
}

/* The card equivalent on the wall — you should be able to see which of five
   sessions is stuck without opening any of them. */
.th-view .th-card.is-waiting::before { background: var(--th-signal); }
.th-view .th-card-waiting {
  font-family: var(--th-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--th-signal);
}

/* ---------- wall grouping + honest session state ---------- */

.th-view .th-group { padding: 4px 20px 6px; }
.th-view .th-group:first-child { padding-top: 16px; }
.th-view .th-group-head {
  font-family: var(--th-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--th-faint);
  padding: 10px 0 8px;
}
.th-view .th-group-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 12px;
}

/* The wall is a plain block now that groups own the grid. */
.th-view .th-wall { display: block; padding: 0 0 24px; }

/* Ended and stopped-reporting sessions are history — present, findable, and
   visibly not the thing that is happening. Only genuinely live cards keep the
   amber pen mark. */
.th-view .th-card.is-ended,
.th-view .th-card.is-stale { opacity: .62; }
.th-view .th-card.is-ended:hover,
.th-view .th-card.is-stale:hover { opacity: 1; }
.th-view .th-card.is-stale .th-card-when { color: #b08a52; }

/* Waiting outranks everything: it is the only state that needs you right now. */
.th-view .th-card.is-waiting { opacity: 1; }
.th-view .th-card.is-waiting::before { background: var(--th-signal); }

.th-view .th-chip.stale { color: #b08a52; border-color: #4a3d2a; }

.th-view .th-wall-foot {
  padding: 14px 20px 4px;
  font-family: var(--th-mono);
  font-size: 10.5px;
  color: var(--th-faint);
}
.th-view .th-link {
  font: inherit;
  background: none;
  border: none;
  padding: 0;
  color: var(--th-signal);
  cursor: pointer;
  text-decoration: underline;
}
.th-view .th-link:focus-visible { outline: 2px solid var(--th-signal); outline-offset: 2px; }

/* Group headers carry a plain-language hint, because "Interactive" alone does
   not tell you what it buys — and the difference between these groups is the
   entire reason the wall is grouped at all. */
.th-view .th-group-hint {
  margin-left: 10px;
  text-transform: none;
  letter-spacing: 0;
  font-size: 11px;
  color: #4c545f;
}

/* A drivable session is never dimmed, even when it has been quiet — an idle
   one sitting at its prompt is still yours to type into, and dimming it would
   say the opposite. Keyed off the state itself rather than group position, so
   reordering the groups cannot break it. */
.th-view .th-card.is-drivable { opacity: 1; }
.th-view .th-card.is-drivable::before { background: var(--th-signal); }

/* Loaded context — CLAUDE.md, memory files, hook-injected output. Same
   collapsed treatment as thinking, but marked so you can tell orientation
   from reasoning at a glance. */
.th-view details.th-context > summary { color: #6f7d95; }
.th-view details.th-context > summary::before { content: "▤ "; opacity: .7; }
.th-view details.th-context .th-text { font-style: normal; border-left-color: #2c3444; }