/* SmartTable (Alex 2026-07-15) — table with a Tabelle/Karten view toggle. */
.smart-table { margin: 10px 0; }

.st-toolbar {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
  margin-bottom: 4px;
}
.st-mode {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 22px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 0;
}
.st-mode.active {
  color: var(--text-primary);
  border-color: var(--border-strong);
  background: var(--chip-active-bg);
}
.st-mode:hover { color: var(--text-primary); }

/* Table mode — horizontal scroll container so a wide table never breaks the
   page layout (it scrolls inside its own box). */
.st-scroll { overflow-x: auto; }
.smart-table .md-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 13px;
}
.smart-table .md-table th,
.smart-table .md-table td {
  border: 1px solid var(--border);
  padding: 6px 10px;
  text-align: left;
  vertical-align: top;
}
.smart-table .md-table th {
  background: var(--bg-light);
  font-weight: 600;
  color: var(--text-primary);
}

/* Cards / ticker mode — one row at a time, columns stacked vertically. */
.st-cards {
  border: 1px solid var(--border);
  background: var(--surface);
}
.st-card { padding: 4px 12px; }
.st-pair {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
}
.st-pair:last-child { border-bottom: none; }
.st-key {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  font-weight: 600;
}
.st-val { font-size: 14px; color: var(--text-primary); line-height: 1.45; }
.st-val > :first-child { margin-top: 0; }
.st-val > :last-child { margin-bottom: 0; }
.st-empty { color: var(--text-muted); }

/* Ticker dots — small carousel-style indicators; tap to jump or swipe the card.
   The card is swipeable left/right (touch), so no slider/arrows needed. */
.st-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex-wrap: wrap;
  padding: 9px 12px;
  border-top: 1px solid var(--border);
  background: var(--bg-light);
}
.st-dot {
  width: 6px;
  height: 6px;
  padding: 0;
  border-radius: 50%;
  border: none;
  background: var(--border-strong);
  opacity: 0.55;
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.15s ease, background 0.15s ease;
}
.st-dot:hover { opacity: 0.85; }
.st-dot.active {
  background: var(--accent);
  opacity: 1;
  transform: scale(1.35);
}
/* ── Agent Detail Container ───────────────────────────────────── */
.agent-detail-container {
  position: relative; /* anchors the glass header/footer overlays */
  flex: 1;
  display: flex;
  flex-direction: column;
  /* Use the JS-synced --vh from main.tsx (visualViewport.height) as the
     single source of truth — works pre-dvh and avoids iOS Safari's
     unreliable 100dvh which sometimes resolves to 100lvh (Large) even
     when the URL bar is visible, leaving a fat gap below the input. */
  height: calc(var(--vh, 1vh) * 100);
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.agent-detail-container.drag-over {
  outline: 2px dashed var(--color-info);
  outline-offset: -2px;
}

/* ── Agent Header Bar ─────────────────────────────────────────── */
.agent-header {
  display: flex;
  align-items: center;
  gap: 12px;
  /* Oben und unten gleich (Alex 13.09.: „zwischen Header und Dropdown ein Gap von 10–15 px").
     Unten standen 16 px, oben 8 px: unter der Knopfzeile blieb ein Streifen Glas, bevor das
     Aufklappfeld begann — das las sich als Lücke. Die Höhe fließt über --agent-hdr-h in
     Verlauf und Aufklappfelder, nichts muss nachgezogen werden. */
  padding: 8px 32px;
  padding-top: calc(env(safe-area-inset-top, 0px) + 8px);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  /* Glassmorphism overlay (Alex 2026-07-03): translucent blur, theme-aware via
     --surface; the transcript scrolls beneath. */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 95;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  backdrop-filter: blur(14px) saturate(1.5);
}
/* No blur support → opaque surface (content still scrolls under, just hidden). */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .agent-header { background: var(--surface); }
}

/* Header-attached dropdown panels (issues, tags, group-chats) are SIBLINGS of the
   now-absolute header — in flow they'd start at container top, hidden behind the
   glass header ("fährt nur ein wenig raus", Alex 2026-07-03). Anchor them as glass
   overlays directly BELOW the header instead. */
.agent-detail-container > .agent-issues,
.agent-detail-container > .tagp,
.agent-detail-container > .agent-header-expand {
  position: absolute;
  top: var(--agent-hdr-h, 72px);
  left: 0;
  right: 0;
  z-index: 94;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  backdrop-filter: blur(14px) saturate(1.5);
  border-bottom: 1px solid var(--border);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .agent-detail-container > .agent-issues,
  .agent-detail-container > .tagp,
  .agent-detail-container > .agent-header-expand { background: var(--surface); }
}

/* Footer overlay wrapper (hosts InputBar) — the glass itself is painted by
   .input-bar-wrap / its rows (see InputBar.css). */
.agent-footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
}

.agent-header .status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.agent-header .agent-name {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  /* Allow the name to shrink in the flex header so it never pushes the action
     buttons off-screen — esp. on mobile (Alex 2026-06-24). */
  min-width: 0;
}
/* The name text truncates with an ellipsis; the caret (flex-shrink:0) stays. */
.agent-header .agent-name-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.agent-header .agent-name-clickable {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  user-select: none;
  border-bottom: 1px dotted transparent;
  transition: border-color 0.15s ease;
}

.agent-header .agent-name-clickable:hover {
  border-bottom-color: var(--text-muted);
}
.agent-header .agent-name-caret {
  opacity: 0.5;
  flex-shrink: 0;
  margin-top: 1px;
}
/* Tiny running-model tag beside the agent name (Alex 2026-07-14). */
/* DER NAME HAT VORRANG VOR DEM MODELL (Alex, 28.08., Bild 120945):
   „anstatt von GPT 5.6 … wenn es sich textuell nicht ausgeht, ist mir lieber,
   du zeigst nicht an welches LLM im Betrieb ist, sondern dass ich den Namen
   eher sehen kann, also der Name hat mehr Priorität."

   Warum es vorher genau andersherum war — und zwar nicht aus Absicht: Der
   Chip trug `flex-shrink: 0`, schrumpfte also NIE. Der Name daneben hat
   `min-width: 0` und eine Ellipse, gibt unter Druck also immer nach. Im
   schmalen Kopf blieb `gpt-5.6-sol` in voller Breite stehen und der Name
   verschwand vollstaendig — man sah, WELCHES Modell laeuft, aber nicht mehr,
   WER da spricht.

   Zwei Aenderungen: Der Chip darf jetzt schrumpfen und selbst ellipsieren,
   und unterhalb von 560px verschwindet er ganz. Das Modell bleibt im
   `title` und in den Einstellungen — es ist eine Zusatzangabe, kein Name. */
.agent-header .agent-name-model {
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.4;
  color: var(--text-muted);
  padding: 1px 5px;
  border: 1px solid var(--border);
  border-radius: 0;
  white-space: nowrap;
  text-transform: none;
}

/* Login-Chip neben dem Modell (Alex 11.09., Bild 124885). Gleiche Form wie der
   Modell-Chip; die Stufe (aktiv/konfiguriert/unbekannt) steht im Wort, nicht nur
   in der Farbe. Warnung = Bot-Datei weicht vom Master ab. */
.agent-header .agent-name-login {
  flex-shrink: 1;
  min-width: 0;
  max-width: 12ch;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.4;
  color: var(--text-muted);
  padding: 1px 5px;
  border: 1px solid var(--border);
  border-radius: 0;
  white-space: nowrap;
  text-transform: none;
}
.agent-header .agent-name-login.login-aktiv { color: var(--text-secondary); border-color: var(--border-strong); }
.agent-header .agent-name-login.login-unbekannt { border-style: dashed; }
.agent-header .agent-name-login.login-warnung { color: var(--color-warning); border-color: var(--color-warning); }

.header-action-status {
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  margin-left: 8px;
}

.agent-header .agent-role {
  font-size: 13px;
  color: var(--text-muted);
  margin-left: 4px;
}

.agent-header .agent-meta {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 20px;
}

/* Explicit header action buttons — group-chats dropdown + new-groupchat.
   Sit at the far right (after the auto-margin meta block). Flat AgentOS
   square buttons (Alex 2026-06-22). */
.agent-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 14px;
  flex-shrink: 0;
}
.ahx-btn {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-primary);
  cursor: pointer;
  border-radius: 0;
}
.ahx-btn:hover { background: var(--bg-light); }
.ahx-btn.on {
  background: var(--chip-active-bg);
  border-color: var(--text-primary);
  color: var(--white);
}
.ahx-btn-caret { transition: transform 0.15s ease; opacity: 0.7; }
.ahx-btn-caret.open { transform: rotate(180deg); }
/* Bookmark button: count badge + "agent is rewound" accent highlight. */
.ahx-btn-count {
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1;
  margin-left: 2px;
  color: var(--text-secondary);
}
.ahx-btn.pinned {
  border-color: var(--accent);
  color: var(--accent);
}
.ahx-btn.pinned .ahx-btn-count { color: var(--accent); }
/* Unprocessed (open) issues for this agent (#177) — blue so it stands out at a glance. */
.ahx-btn.has-issues {
  border-color: var(--color-info);
  color: var(--color-info);
  background: var(--color-info-bg, var(--surface));
}
.ahx-btn.has-issues .ahx-btn-count { color: var(--color-info); }
/* When the panel is open, the active (dark) state still wins — higher specificity. */
.ahx-btn.has-issues.on { color: var(--white); border-color: var(--text-primary); background: var(--chip-active-bg); }
.ahx-btn.has-issues.on .ahx-btn-count { color: var(--white); }

.meta-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
}

.meta-tag .label {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-family: var(--font-body);
  font-weight: 500;
}

/* Back-pressure queue depth (#1257 Phase B) — issues waiting for this agent. */
.meta-tag.meta-queued {
  color: var(--color-info);
  border: 1px solid var(--color-info);
  padding: 0 6px;
}
.meta-tag.meta-queued .label { color: var(--color-info); }

.badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 2px 8px;
}

.badge-success { background: var(--color-success-bg); color: var(--color-success); }
.badge-warning { background: var(--color-warning-bg); color: var(--color-warning); }
.badge-working { background: var(--accent-bg); color: var(--accent); }
.badge-error { background: var(--color-error-bg); color: var(--color-error); }
.badge-info { background: var(--color-info-bg); color: var(--color-info); }

/* Rate-limit badge: text + countdown sit above a thin progress strip
 * that grows from 0 → 100% over the watchdog's retry window (default
 * 180 s). Cloud-API commit 31a2735 emits stamped_at + retry_after on
 * the agent-state row so the strip is driven by absolute time, not
 * a local guess. */
.badge-rate-limited {
  position: relative;
  overflow: hidden;
  padding-bottom: 4px;
}

.badge-countdown {
  margin-left: 4px;
  opacity: 0.85;
  font-size: 10px;
}

.badge-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  background: var(--color-warning);
  opacity: 0.7;
  transition: width 0.5s linear;
  pointer-events: none;
}

/* ── Content Stream ───────────────────────────────────────────── */
.content-stream {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 24px 32px;
  min-width: 0;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.stream-entry {
  margin-bottom: 24px;
  min-width: 0;
  overflow: hidden;
}

.stream-entry:last-child {
  margin-bottom: 0;
}

/* ── User Input ───────────────────────────────────────────────── */
.entry-user {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.entry-user .entry-marker {
  width: 3px;
  min-height: 100%;
  background: var(--color-info);
  flex-shrink: 0;
  align-self: stretch;
}

.entry-user.source-queue .entry-marker { background: var(--color-warning); }
.entry-user.source-iacp .entry-marker { background: var(--accent); }
.entry-user.source-system .entry-marker { background: var(--border-strong); }

.entry-user .entry-content {
  padding: 8px 0;
  font-size: 14px;
  line-height: 1.6;
}

/* Direct user input: a glass bubble (Alex 2026-07-15 — the old dark/near-black
 * block read too harsh in light mode). Theme-aware via --surface: white frosted
 * glass in light, dark glass in dark; text stays --text-primary either way. Still
 * clearly a "human typed this" bubble (border + tint) vs. the bare agent prose,
 * without the heavy black slab. */
/* Eigene Eingabe: dieselbe Form wie ein Issue-Zug — ein flächiger heller Ton
   in der Farbe des Balkens, ohne Rahmen (Alex, 12.08.: „das helle Farbe im
   Seitenton gefällt mir gut bei Issue, mach User Input auch so mit hellgrau
   bei Schwarz, aber ohne den Rahmen rund um den Input").

   Vorher war es eine Glasblase mit Rand — die Blase hob den Text vom Rest ab,
   aber sie hob ihn nicht HERVOR, und genau das war die Beschwerde: „die geht
   fast unter". Der Ton nimmt den Balken auf, statt eine zweite Formsprache
   danebenzustellen.

   `--text-primary` als Tonquelle, damit es dem Balken folgt: hellgrau bei
   schwarzer Schrift, und in dunklem Thema ein heller Schleier statt eines
   schwarzen Flecks. 7% wie beim Issue-Zug — dieselbe Stärke, also dieselbe
   Familie. */
.entry-user.source-direct .entry-content {
  background: color-mix(in srgb, var(--text-primary) 7%, transparent);
  color: var(--text-primary);
  padding: 6px 10px;
}

/* Eigene Eingabe: kräftiger Balken links (Alex, 12.08.: „ich brauch da
   irgendwie noch einen schwarzen Balken links, damit ich meine Nachricht
   besser sehen kann, die geht fast unter").

   Er war seit 15.07. ausgeschaltet — damals ging es aber um den dunklen
   BLOCK hinter dem Text, der in hellem Thema zu hart wirkte. Die Glasblase
   bleibt; nur die Kante kommt zurück. Ein 4px-Streifen ist nicht dieselbe
   Sache wie eine schwarze Fläche.

   `--text-primary` statt echtem Schwarz, weil „schwarz" hier maximalen
   Kontrast meint, nicht den Farbwert: In dunklem Thema wäre ein schwarzer
   Balken unsichtbar — das Token ist dort hell und trägt dieselbe Absicht.

   GLEICHE BREITE wie die anderen Quellen (Alex, 12.08.: „der schwarze Balken
   ist dicker als die anderen, das passt ästhetisch nicht"). Ich hatte ihn
   verbreitert, um ihn auffälliger zu machen — das war eine Zutat zu viel:
   Der Kontrast allein trägt schon, und eine Reihe von Streifen in derselben
   Breite liest sich als System, eine mit einem dickeren als Ausnahme. */
.entry-user.source-direct .entry-marker {
  display: block;
  background: var(--text-primary);
}

.entry-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.user-media-row {
  display: flex;
  gap: 6px;
  margin-top: 6px;
  flex-wrap: wrap;
}

/* Gleich große Kacheln, Umbruch, Klick aufs Original (David #48, Steward 13.09.). */
.user-media-row > a { display: block; line-height: 0; }
.user-media-thumb {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border: 1px solid var(--border);
  border-radius: 0;
  background: var(--surface);
}

/* Abgelaufener Anhang: Portal-Uploads werden nach 24 h gelöscht, die
   Nachricht behält die Adresse. Benannter Zustand statt Browser-Bruchsymbol. */
.user-media-file,
.user-media-gone {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 56px;
  padding: 0 10px;
  border: 1px dashed var(--border);
  border-radius: 4px;
  color: var(--text-secondary);
  font-size: 11px;
  white-space: nowrap;
}

.entry-label-clickable {
  cursor: pointer;
}

.entry-label-clickable:hover {
  color: var(--text-primary);
}

.entry-source-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 1px 6px;
  margin-left: 8px;
  letter-spacing: 0;
  text-transform: none;
}

.entry-source-tag.queue {
  background: var(--color-warning-bg);
  color: var(--color-warning);
}

.entry-source-tag.iacp {
  background: var(--accent-bg-strong);
  color: var(--accent);
}

/* Small monochrome toggle to the right of the IACP/Queue tag — only
 * shown when the payload sniffer says XML or JSON. Click flips the
 * entry-content into a <pre> pretty-printed block. */
.format-toggle {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 1px 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  background: var(--bg-light);
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.format-toggle:hover {
  background: var(--bg-inset);
  color: var(--text-primary);
}

.format-toggle.active {
  background: var(--chip-active-bg);
  color: var(--white);
  border-color: var(--text-primary);
}

.payload-pretty {
  margin: 0;
  padding: 10px 12px;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-primary);
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
}

/* ── Agent Response ───────────────────────────────────────────── */
.entry-agent {
  padding-left: 15px;
  min-width: 0;
  overflow: hidden;
}

.entry-agent .entry-content {
  padding: 8px 0;
  font-size: 14px;
  line-height: 1.7;
  overflow-wrap: break-word;
  word-break: break-word;
  min-width: 0;
}

/* DIE MARKDOWN-TYPOGRAFIE GEHOERT DEM RENDERER, NICHT DER ANSICHT.
 *
 * ANLASS (Alex, 28.08.): „Wir haben ja ein spezielles Format-Styling fuer
 * Markdown, wie der Content dargestellt wird — und bei Codex2 schaut das
 * anders aus."
 *
 * Er hat recht, und die Ursache ist nicht der Renderer: Klassische Ansicht,
 * Kollab und Zeitlinie rendern Markdown mit DENSELBEN Bausteinen. Verschieden
 * war nur, WO das Ergebnis landet — und damit, welche Regeln greifen:
 *
 *     .entry-agent .entry-content   15 Regeln
 *     .collab-rich                   8
 *     .conversation-timeline         1
 *
 * Deshalb wurden Ueberschriften in der Zeitlinie riesig (Browser-Vorgabe),
 * Absaetze verloren ihren Abstand, `code` bekam keinen Rahmen.
 *
 * WARUM ERWEITERT UND NICHT UMGEZOGEN: In einer Selektorliste behaelt jeder
 * Selektor seine eigene Spezifitaet. `.entry-agent .entry-content p` bleibt
 * also (0,2,1) und die klassische Ansicht bit-genau, wie sie war; `.rich-md p`
 * kommt mit (0,1,1) daneben. Haette ich umgezogen, waere die Spezifitaet
 * gesunken und andere Regeln haetten stellenweise gewonnen — eine unsichtbare
 * Aenderung an einer Ansicht, die niemand angefragt hat.
 *
 * `rich-md` vergibt `RichMessage` selbst. Jede kuenftige Ansicht, die den
 * Renderer benutzt, bekommt die Typografie damit ohne eigenes Zutun.
 *
 * NACHTRAG 29.08. — DIE ZUSAGE GALT NUR FUER DIE HALBE RENDERSTRECKE.
 *
 * Alex: „Die H1 hat er viel zu gross gerendert. Bei der klassischen Ansicht
 * funktioniert das perfekt." Er hat recht, und Codex2 trifft keine Schuld:
 * Gewoehnlicher Agententext laeuft NICHT durch `RichMessage`, sondern durch
 * `SectionContent`, und die gab `<div class="entry-content">` aus — OHNE
 * `rich-md`.
 *
 * In der klassischen Ansicht steht dieses div unter `.entry-agent`, also
 * greift `.entry-agent .entry-content h1`. In Zeitlinie und Raumzeit gibt es
 * diesen Vorfahren nicht — dort griff GAR KEINE Regel, und der Browser setzt
 * H1 in Standardgroesse. Es war also kein abweichender Stil, sondern gar
 * keiner.
 *
 * Deshalb vergibt jetzt auch `SectionContent` (und die Werkzeug-/Diff-Koerper)
 * `rich-md`. Die klassische Ansicht aendert sich dabei nicht: Beide Selektoren
 * stehen in DERSELBEN Regel mit denselben Deklarationen, und wo sie
 * auseinandergingen, gewinnt der spezifischere klassische weiterhin. */
.entry-agent .entry-content p,
.rich-md p {
  margin: 0 0 8px;
}

.entry-agent .entry-content p:last-child,
.rich-md p:last-child {
  margin-bottom: 0;
}

.entry-agent .entry-content code,
.rich-md code {
  font-family: var(--font-mono);
  font-size: 12px;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  padding: 1px 5px;
}

/* Nur NACKTE pre. Das pre im Codeblock (.v2-codeblock) trägt dessen Rahmen
   selbst — mit dieser spezifischeren Regel bekam es Rand + Abstand zurück
   und stand als Box in der Box (Issue #2090). */
.entry-agent .entry-content pre:not(.v2-codeblock > pre),
.rich-md pre:not(.v2-codeblock > pre) {
  background: var(--bg-inset);
  border: 1px solid var(--border);
  padding: 12px 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  overflow-x: auto;
  margin: 8px 0;
}

.entry-agent .entry-content pre code,
.rich-md pre code {
  background: none;
  border: none;
  padding: 0;
}

.entry-agent .entry-content ul,
.entry-agent .entry-content ol,
.rich-md ul,
.rich-md ol {
  padding-left: 20px;
  margin: 4px 0;
}

.entry-agent .entry-content a,
.rich-md a {
  color: var(--color-info);
  text-decoration: none;
}

.entry-agent .entry-content a:hover,
.rich-md a:hover {
  text-decoration: underline;
}

/* ── Pretty JSON ───────────────────────────────────────────────
 * Generic polished JSON view (Layer 1, Alex feedback 2026-06-04 on
 * screenshot 110171). Goals: read like a document, not like a debug
 * dump. Currency values pop, ISO dates auto-format, single-item arrays
 * lose their `0:` wrapper, empty objects/arrays skip rendering. No
 * domain-smart cards yet (Alex said not now). */
.json-pretty {
  padding: 6px 0;
  font-size: 13px;
  line-height: 1.55;
}

.json-pretty .json-pretty {
  padding: 0 0 0 14px;
  border-left: 1px solid var(--border);
  margin: 4px 0 4px 2px;
}

/* Semantic agent-card — rendering surface for persona-JSON output
   (Cloud IACP 57850f3a). Replaces the raw key-value dump with labelled
   sub-blocks for the well-known top-level fields: tts_summary,
   ergebnis, empfehlungen, memory_notes, _apus_chunk_. */
.agent-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.agent-card-summary {
  font-style: italic;
  color: var(--text-muted);
  border-left: 3px solid var(--border-strong);
  padding: 4px 0 4px 10px;
  font-size: 13px;
  line-height: 1.5;
}
.agent-card-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.agent-card-h {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin: 0;
}
.agent-card-list {
  list-style: disc;
  padding-left: 22px;
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
}
.agent-card-list li {
  margin: 2px 0;
}

/* Memory-notes get an info-callout tint so they read distinctly from
   the action-oriented ergebnis/empfehlungen lists. */
.agent-card-memory {
  background: var(--bg-inset);
  border-left: 3px solid var(--accent, var(--text-primary));
  padding: 6px 10px;
  border-radius: 0 4px 4px 0;
}
.agent-card-memory .agent-card-list {
  list-style: none;
  padding-left: 0;
}
.agent-card-memory .agent-card-list li::before {
  content: '✎ ';
  color: var(--text-muted);
  margin-right: 4px;
}

/* Apus chunk-committed embed — content-api push payload re-emitted by
   the agent. Shows a compact post-link + section meta + preview text
   instead of a raw nested JSON. */
.agent-card-apus {
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 8px 10px;
}
.agent-card-apus-meta {
  font-size: 11px;
  color: var(--text-muted);
  margin: 2px 0 6px;
  font-family: var(--font-mono);
}
.agent-card-apus-meta a {
  color: var(--text-primary);
  text-decoration: underline;
  font-weight: 600;
}
.agent-card-apus-text {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-primary);
  white-space: pre-wrap;
}

/* Collapsed "Raw fields" — back-compat surface for keys the semantic
   renderer doesn't recognise. Hidden by default so the card stays
   scannable; users who care about debug fields can expand. */
.agent-card-debug {
  font-size: 12px;
}
.agent-card-debug summary {
  cursor: pointer;
  color: var(--text-muted);
  font-family: var(--font-mono);
  padding: 4px 0;
}
.agent-card-debug summary:hover {
  color: var(--text-primary);
}

.json-field {
  padding: 3px 0;
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

.json-key {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.02em;
  flex-shrink: 0;
  min-width: 88px;
  white-space: nowrap;
}

.json-key::after {
  content: ':';
  margin-left: 1px;
  color: var(--border-strong);
  font-weight: 400;
}

/* Internal/metadata keys (those starting with `_`) get de-emphasised
 * so the eye lands on the actual payload first. */
.json-key-meta {
  opacity: 0.6;
  font-style: italic;
}

/* Array item indices: numeric, slightly highlighted with the accent
 * colour so a list still reads as a list even without the `0:`-style
 * wrapper for single-item arrays. */
.json-key-index {
  min-width: 24px;
  color: var(--accent);
  font-weight: 600;
}

.json-key-index::after {
  content: '.';
}

.json-value {
  font-size: 13px;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

/* Currency: bold + monospace so subtotals visually align across a
 * column of rows (positions, expenses, …). */
.json-value-money {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.json-value-money.is-negative,
.json-value-num.is-negative {
  color: var(--color-error);
}

.json-value-num {
  font-family: var(--font-mono);
}

.json-value-date {
  color: var(--text-primary);
}

.json-value-long {
  display: block;
  flex-basis: 100%;
  margin-top: 2px;
  margin-left: 100px;
  line-height: 1.5;
  color: var(--text-primary);
  word-break: break-word;
}

.json-value-bool {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 12px;
}
.json-value-bool.is-true { color: var(--color-success); }
.json-value-bool.is-false { color: var(--color-error); }

.json-value-null {
  color: var(--text-muted);
  font-style: italic;
}

/* Mobile: drop the fixed key min-width so very narrow viewports don't
 * force the value onto its own line just because the key column took
 * 88px (Alex tests on iPhone portrait — visualViewport ~390px wide). */
@media (max-width: 480px) {
  .json-key { min-width: 0; }
  .json-value-long { margin-left: 0; }
}

.inline-media-img {
  max-width: 100%;
  max-height: 300px;
  margin: 8px 0;
  display: block;
  border: 1px solid var(--border);
  /* High-quality downscale: avoids the moiré bands Alex saw on helmet
     photos (fine parallel vents interacting with retina sub-pixel
     resampling). -webkit-optimize-contrast asks Safari/Chrome for the
     better bicubic-ish resampler instead of the cheap bilinear default. */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: high-quality;
}

/* ── Content Post Embed ──────────────────────────────────────── */
.content-post-embed {
  position: relative;
  /* Volle verfügbare Breite statt 480px-Deckel (Alex #1573, Bild 123017:
     der Beitrag nutzte die halbe Fläche, rechts blieb Leere). Die Spalte
     des Gastgebers begrenzt weiterhin — der Beitrag füllt sie nur aus. */
  max-width: 100%;
  margin: 8px 0;
  /* Rahmen (Alex #1885, Bild 125210): Seit der iframe weg ist (28.08.), trug nur
     noch dessen Regel einen Rand — der eingebettete Beitrag selbst hatte keinen
     und war im hellen Theme vom Fließtext nicht zu unterscheiden. Eckig, flach,
     die kräftige Rahmenfarbe (--border ist auf Weiß kaum sichtbar). */
  border: 1px solid var(--border-strong);
  background: var(--surface);
}

/* Der iframe ist weg — der Beitrag wird jetzt selbst geholt und gerendert
   (28.08.). Die Regel bleibt als Rueckfall stehen, falls irgendwo noch eine
   Einbettung alter Art auftaucht; neu erzeugt wird sie nicht mehr. */
.content-post-iframe {
  width: 100%;
  height: 320px;
  border: 1px solid var(--border);
  background: var(--surface);
  display: block;
}

.content-post-title {
  font-family: var(--font-heading);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  padding: 8px 10px 0;
}

/* Der Beitragstext erbt die Markdown-Typografie ueber `rich-md`, das
   `RichMessage` selbst vergibt — hier nur Rand und Hoehe. */
.content-post-body {
  padding: 4px 10px 10px;
  max-height: 420px;
  overflow-y: auto;
}

/* Ein Satz statt einer leeren Flaeche: „laedt", „kein Zugriff", „gibt es
   nicht", „ging nicht". Alle vier sind Auskuenfte; die leere Flaeche war
   keine. */
.content-post-note {
  display: block;
  padding: 10px;
  font-size: 12px;
  color: var(--text-muted);
}

.content-post-open {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
  text-decoration: none;
  font-size: 12px;
  line-height: 1;
  opacity: 0.85;
  transition: opacity 0.15s ease;
}

.content-post-open:hover {
  opacity: 1;
  background: var(--bg-light);
}

/* ── Generic trusted-URL embed (standalone link → iframe) ───── */
.v2-content-embed {
  margin: 8px 0 8px 16px;
  max-width: 720px;
}

.v2-content-embed-iframe {
  width: 100%;
  height: 560px;
  border: 1px solid var(--border);
  background: var(--surface);
  display: block;
}

.v2-content-embed-caption {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
  padding-left: 4px;
}

.v2-content-embed-caption a {
  color: var(--text-muted);
  word-break: break-all;
}

.inline-media-audio {
  width: 100%;
  margin: 8px 0;
  display: block;
}

/* Audio player + explicit download button (Alex 2026-07-06 — native <audio>
   controls hide/omit download). Row: player grows, button sits at the end. */
.audio-block {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
}
.audio-block .inline-media-audio { margin: 0; flex: 1; min-width: 0; }
.audio-dl {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 0;               /* flat/square house style */
  background: var(--surface);
  cursor: pointer;
  text-decoration: none;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.audio-dl:hover {
  color: var(--text-primary);
  border-color: var(--border-strong);
}

.inline-media-video {
  max-width: 100%;
  max-height: 300px;
  margin: 8px 0;
  display: block;
  border: 1px solid var(--border);
}

.entry-agent .entry-content h1,
.rich-md h1 {
  font-size: 16px;
  font-weight: 600;
  margin: 12px 0 6px;
  line-height: 1.4;
}

.entry-agent .entry-content h2,
.rich-md h2 {
  font-size: 15px;
  font-weight: 600;
  margin: 10px 0 4px;
  line-height: 1.4;
}

.entry-agent .entry-content h3,
.rich-md h3 {
  font-size: 14px;
  font-weight: 600;
  margin: 8px 0 4px;
  line-height: 1.4;
}

.entry-agent .entry-content h4,
.entry-agent .entry-content h5,
.entry-agent .entry-content h6,
.rich-md h4,
.rich-md h5,
.rich-md h6 {
  font-size: 13px;
  font-weight: 600;
  margin: 6px 0 4px;
  line-height: 1.4;
}

/* ── Tool Call (collapsible) ──────────────────────────────────── */
.tool-call {
  margin: 12px 0;
  border-left: 1px solid var(--border);
  margin-left: 15px;
}

/* AUFEINANDERFOLGENDE Werkzeug-Aufrufe ruecken zusammen (Alex #1371,
   Screenshot 120814: "da muss nicht so viel Abstand zwischen diesen
   gerappten Dropdowns liegen").

   Zwischen zwei zugeklappten Zeilen lagen 12 px Abstand plus je 8 px
   Innenrand — 40 px Rahmen um 16 px Text. Eine Folge von zehn Aufrufen
   fuellte damit einen halben Bildschirm, ohne mehr zu sagen.

   Der Abstand bleibt, wo er etwas trennt: vor dem ersten Aufruf, nach dem
   letzten, und um einen AUFGEKLAPPTEN, dessen Rumpf ein eigener Block
   ist. Nur die Luecke zwischen zwei geschlossenen Nachbarn faellt weg —
   sie trennt zwei Zeilen, die ohnehin zusammengehoeren. */
.tool-call + .tool-call { margin-top: 2px; }
.tool-call:has(> .tool-call-body:not(.collapsed)) { margin: 12px 0; }
.tool-call:has(> .tool-call-body:not(.collapsed)) + .tool-call { margin-top: 12px; }

.tool-call-header {
  display: flex;
  align-items: center;
  gap: 8px;
  /* 8 -> 5: der Innenrand traegt hier keine Information, er verdoppelte nur
     die Zeilenhoehe. Bei 12 px Schrift bleiben 5 px oben und unten gut
     antippbar (22 px Gesamthoehe, ueber der 44-px-Regel liegt die Zeile
     durch den Rand des Elternteils). */
  padding: 5px 12px;
  cursor: pointer;
  transition: background-color 0.15s ease;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
}

.tool-call-header:hover {
  background: var(--bg-light);
}

.tool-call-chevron {
  font-size: 10px;
  transition: transform 0.15s ease;
  color: var(--text-muted);
}

.tool-call-chevron.open {
  transform: rotate(90deg);
}

.tool-call-name {
  font-weight: 500;
  color: var(--text-primary);
}

.tool-call-status {
  margin-left: auto;
}

.tool-call-body {
  padding: 0 12px 12px;
}

.tool-call-body.collapsed {
  display: none;
}

/* ── IACP Federation Tool Calls ─────────────────────────────────── */
.iacp-tool-call {
  border-left-color: var(--accent);
  border-left-width: 2px;
}

.iacp-tool-call .tool-call-header {
  color: var(--text-primary);
}

.iacp-icon {
  color: var(--accent);
  flex-shrink: 0;
}

.iacp-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

.iacp-target {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
}

.iacp-target-unknown {
  color: var(--text-muted);
  font-weight: 400;
}

/* Clickable federation target — opens that agent's conversation. Styled as a
   bare button so it inherits .iacp-target and stays visually a name, not a
   control; the underline on hover is the only affordance it needs. */
button.iacp-target-link {
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
}

button.iacp-target-link:hover,
button.iacp-target-link:focus-visible {
  text-decoration: underline;
}

.iacp-msgid {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  background: var(--bg-light);
  padding: 1px 6px;
  border-radius: 8px;
  letter-spacing: 0.02em;
}

.iacp-preview {
  font-style: italic;
  color: var(--text-muted);
  font-size: 12px;
  padding: 6px 0 8px;
  line-height: 1.5;
  border-bottom: 1px dashed var(--border);
  margin-bottom: 8px;
}

/* ── Code Block ───────────────────────────────────────────────── */
.code-block {
  background: var(--bg-inset);
  border: 1px solid var(--border);
  padding: 12px 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  overflow-x: auto;
  white-space: pre;
  color: var(--text-primary);
  max-width: 100%;
}

/* Bounded raw-blob fallback (#4231): a huge unparseable dump collapses behind a
   disclosure so it never floods the transcript; body is scroll-capped when open. */
.raw-fallback { margin: 6px 0; }
.raw-fallback-sum {
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-muted);
  padding: 4px 0;
  user-select: none;
}
.raw-fallback-sum:hover { color: var(--text-primary); }
.raw-fallback-pre { max-height: 320px; overflow: auto; margin-top: 6px; }

/* ── Mermaid Diagram ──────────────────────────────────────────── */
.v2-mermaid {
  /* No frame, no background — diagram sits naked in chat flow. */
  background: transparent;
  border: none;
  padding: 0;
  margin: 8px 0 8px 16px;
  text-align: center;
  overflow-x: auto;
  max-width: 100%;
  /* Use containment so the browser doesn't have to re-flow surrounding
     content while the SVG's embedded <style> block is being parsed. */
  contain: layout style;
}

.v2-mermaid svg {
  max-width: 100%;
  height: auto;
}

/* FOUC defense: beautiful-mermaid emits SVG with an embedded <style>
   block, which the browser parses asynchronously. For a frame or two
   the SVG renders with the SVG default fills (#000000 — that's the
   black flash Alex sees). Force the safe defaults at the SVG element
   level so even the unstyled paint already looks right. */
.v2-mermaid svg rect,
.v2-mermaid svg polygon,
.v2-mermaid svg ellipse {
  fill: #ffffff;
}

.v2-mermaid svg path:not([fill]),
.v2-mermaid svg line:not([stroke]) {
  stroke: #6b7280;
}

.v2-mermaid svg text {
  fill: #1f2937;
}

.mermaid-fallback {
  /* Inherits .code-block styles; flag the failure with a subtle border */
  border-color: var(--color-warning, #B45309);
}

/* ── Diff Block ───────────────────────────────────────────────── */
.diff-block {
  background: var(--bg-inset);
  border: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  overflow-x: auto;
}

.diff-line {
  padding: 1px 16px;
  white-space: pre;
}

.diff-line.add {
  background: var(--color-success-bg);
  color: var(--color-success);
}

.diff-line.remove {
  background: var(--color-error-bg);
  color: var(--color-error);
}

.diff-line.context {
  color: var(--text-muted);
}

.diff-line.header {
  color: var(--color-info);
  font-weight: 500;
}

/* ── Inline Table ─────────────────────────────────────────────── */
.inline-table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0;
}

.inline-table th {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--text-muted);
  text-align: left;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
}

.inline-table td {
  padding: 8px 12px;
  font-size: 13px;
  border-bottom: 1px solid var(--border);
}

.inline-table td.mono {
  font-family: var(--font-mono);
  font-size: 12px;
}

.inline-table tbody tr {
  transition: background-color 0.15s ease;
}

.inline-table tbody tr:hover {
  background: var(--bg-light);
}

/* ── V2 Table (Markdown-rendered) ─────────────────────────────── */
.v2-table {
  margin: 8px 0 8px 15px;
  overflow-x: auto;
}

.v2-tasklist {
  margin: 6px 0 6px 15px;
  font-size: 12px;
}

.v2-tasklist-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px 3px 4px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 11px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.v2-tasklist-toggle:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.v2-tasklist-chevron {
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

.v2-tasklist-chevron.is-open {
  transform: rotate(90deg);
}

.v2-tasklist-label {
  white-space: nowrap;
}

.v2-tasklist-body {
  margin-top: 6px;
  padding: 10px 14px;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-left: 2px solid var(--accent);
  border-radius: 4px;
  font-size: 13px;
}

.v2-tasklist-body p {
  margin: 0 0 6px 0;
}

.v2-tasklist-body ul {
  list-style: none;
  padding: 0;
  margin: 4px 0;
}

.v2-tasklist-body li {
  padding: 2px 0;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.v2-tasklist-body input[type="checkbox"] {
  margin-top: 4px;
  accent-color: var(--accent);
  cursor: default;
}

.v2-tasklist-body em {
  color: var(--text-muted);
  font-size: 12px;
}

.v2-tasklist-footer {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px dashed var(--border);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}

.v2-tasklist-body li strong {
  font-weight: 600;
  color: var(--accent);
}

.v2-tree {
  margin: 8px 0 8px 15px;
  padding: 12px 14px;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-left: 2px solid var(--accent);
  border-radius: 4px;
  overflow-x: auto;
}

.v2-tree-row {
  display: flex;
  font-family: var(--font-mono);
  font-size: 12px;
  white-space: pre;
  line-height: 1.6;
}

.v2-tree-prefix {
  color: var(--text-light);
  flex-shrink: 0;
}

.v2-tree-name {
  color: var(--text-primary);
}

.v2-tree-name.folder {
  color: var(--accent);
  font-weight: 600;
}

.v2-tree-annotation {
  color: var(--text-muted);
  margin-left: auto;
  padding-left: 16px;
  font-style: italic;
  font-size: 11px;
}

/* Einzeilige Tabelle = ein Datensatz, gestapelt statt als Gitter. Label und
   Wert stehen nebeneinander, solange Platz ist, und untereinander sobald es
   eng wird — auf dem Handy ist die zweispaltige Variante sonst genau das
   Problem, das wir hier abstellen wollten. */
.v2-record {
  border: 1px solid var(--border);
  margin: 8px 0;
}

.v2-record-row {
  display: grid;
  grid-template-columns: minmax(120px, 22%) 1fr;
  gap: 12px;
  padding: 7px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}

.v2-record-row:last-child {
  border-bottom: 0;
}

.v2-record-label {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  padding-top: 1px;
}

.v2-record-value > * {
  margin: 0;
}

@media (max-width: 560px) {
  /* Unter 560px reicht die Breite fuer beides nicht — dann faellt das Modell,
     nicht der Name (Alex, 28.08.). Es steht weiterhin im `title` des Namens
     und in den Einstellungen; im Kopf ist es die verzichtbare Haelfte. */
  .agent-header .agent-name-model { display: none; }
  /* Das Login bleibt am Telefon sichtbar — es ist die Aussage, die am 11.09. gefehlt hat. */

  .v2-record-row {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}

.v2-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  font-family: inherit;
}

.v2-table th,
.v2-table td {
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  white-space: normal;
  word-break: break-word;
}

.v2-table th {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--text-muted);
}

.v2-table td {
  font-family: var(--font-mono);
  font-size: 12px;
}

.v2-table tbody tr {
  transition: background-color 0.15s ease;
}

.v2-table tbody tr:hover {
  background: var(--bg-light);
}

/* ── Input Bar ────────────────────────────────────────────────── */
.input-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 32px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--surface);
}

.input-field {
  flex: 1;
  padding: 10px 0;
  background: transparent;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 14px;
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  outline: none;
  transition: border-color 0.2s ease;
}

.input-field:focus {
  border-bottom-color: var(--text-primary);
}

.input-field::placeholder {
  color: var(--text-muted);
}

.input-action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: none;
  border: 1px solid var(--border);
  border-radius: 0;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 14px;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.input-action:hover {
  border-color: var(--text-primary);
  color: var(--text-primary);
}

.input-action.primary {
  background: var(--chip-active-bg);
  border-color: var(--text-primary);
  color: var(--white);
}

.input-action.primary:hover {
  background: var(--black);
}

/* ── Empty State ─────────────────────────────────────────────── */
.main-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 13px;
  letter-spacing: 0.05em;
}

/* ── Sending Indicator ────────────────────────────────────────── */
/* In-flow, left aligned. Sits as the last child inside .content-stream
 * after the turns, so it scrolls with the conversation. Alex prefers
 * this over the floating pill variant (Commit 8d2b0c0, Issue #19). */
.sending-indicator {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 15px;
}

/* Wraps the three bouncing dots so the nth-child stagger stays scoped to
 * the dot group when an inline live-status label sits beside it. */
/* Stop button beside the working wave (Alex 2026-06-20) — moved out of the
 * input row to where you actually see the agent working. */
.sending-stop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  /* Follows the user's accent / active main color, matching the mic (Alex 2026-06-22). */
  border: 1px solid var(--accent);
  border-radius: 4px;
  background: var(--accent-bg);
  color: var(--accent);
  cursor: pointer;
}
/* Hover = subtle red tint (stop is destructive) — ONE coherent rule. The old two
   overlapping rules (solid accent fill + red icon/border) clashed into a heavy
   pink-filled button with a red square (Alex 2026-07-02). */
.sending-stop:hover {
  background: var(--color-error-bg);
  border-color: var(--color-error);
  color: var(--color-error);
}

/* Sound-wave thinking indicator (Alex 2026-06-20) — same flowing motion
 * as the transcribe state, replaces the old three bouncing dots. */
.sending-wave {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 18px;
  flex-shrink: 0;
}

/* Inline live activity beside the dots (Alex 2026-06-18). Mirrors the
 * Now/Next card's tone but compact + single-line-friendly so it reads as
 * an extension of the "agent working" indicator, not a second card. */
.sending-live {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  font-size: 13px;
  color: var(--text-secondary, var(--text-muted));
}
.sending-live-act {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60ch;
}
.sending-live-elapsed {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent);
  flex-shrink: 0;
}
.sending-live-next {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.sending-wave-bar {
  width: 3px;
  height: 100%;
  border-radius: 2px;
  /* Working/sending wave follows the accent (Alex 2026-06-22). */
  background: var(--accent);
  transform-origin: center;
  animation: sending-wave 1s ease-in-out infinite;
}

@keyframes sending-wave {
  0%, 100% { transform: scaleY(0.28); opacity: 0.5; }
  50%      { transform: scaleY(1);    opacity: 1; }
}

/* Reduced motion: static wave silhouette instead of the pulse — same treatment
   AgentOsWave already had, which this indicator was missing. The bars still
   read as "wave", and the accompanying live-status text carries the actual
   "agent is working" information, so nothing is lost by holding them still. */
@media (prefers-reduced-motion: reduce) {
  .sending-wave-bar { animation: none; }
  .sending-wave-bar:nth-child(1) { transform: scaleY(0.45); opacity: 0.6; }
  .sending-wave-bar:nth-child(2) { transform: scaleY(0.75); opacity: 0.8; }
  .sending-wave-bar:nth-child(3) { transform: scaleY(1);    opacity: 1;   }
  .sending-wave-bar:nth-child(4) { transform: scaleY(0.75); opacity: 0.8; }
  .sending-wave-bar:nth-child(5) { transform: scaleY(0.45); opacity: 0.6; }
}

/* ── Back Button ──────────────────────────────────────────────── */
.back-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: none;
  border: 1px solid var(--border);
  border-radius: 0;
  color: var(--text-primary);
  cursor: pointer;
  font-size: 16px;
  flex-shrink: 0;
  transition: all 0.15s ease;
}

.back-button:hover {
  border-color: var(--text-primary);
  background: var(--bg-light);
}

/* ── Mobile ───────────────────────────────────────────────────── */
/* Phone landscape's innerWidth is >768px (iPhone 14 Pro: 844px), so
 * a pure max-width:768px never fired there. Adding the height clause
 * catches landscape too so InputBar pad + meta-hide kick in. */
@media (max-width: 768px), (max-height: 500px) {
  .agent-header {
    padding: 12px 16px;
  }

  .agent-header .agent-meta {
    display: none;
  }
  /* With .agent-meta (the margin-left:auto spacer) hidden on mobile, pin the
     action buttons to the right so a long agent name truncates instead of
     pushing them off-screen — they're the important part (Alex 2026-06-24). */
  .agent-header-actions {
    margin-left: auto;
  }
  .conversation-view-toggle span {
    display: none;
  }
  /* Keep the short role label from squeezing; the name absorbs the shrink. */
  .agent-header .agent-role {
    flex-shrink: 0;
  }

  .content-stream {
    padding: 16px;
  }

  .input-bar {
    padding: 12px 16px;
  }
}

/* Neutral badge for SUSPENDED — paused, not warning. */
.badge-neutral {
  background: var(--surface-elevated, rgba(255, 255, 255, 0.04));
  color: var(--text-muted);
}

/* Suspended-state empty body: replaces the blank conversation area when
 * the agent is paused. Click triggers /sessions/<name>/resume via the
 * same runHeaderAction path the lifecycle menu uses. */
/* Live-view-missing banner (Alex 2026-07-02): sticky at the top of the transcript so
   it stays visible; warning-colored. The stale history below is dimmed so it's clearly
   not the current state. */
.live-missing {
  position: sticky;
  top: var(--agent-hdr-h, 0px);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 14px;
  margin-bottom: 8px;
  /* OPAQUE warm tint (mixed with --surface, not transparent): the banner is
     position:sticky and the stale transcript scrolls BEHIND it — a translucent
     background let that text bleed through and collide with the banner text
     (Alex 2026-07-05 "komische Ansicht"). */
  background: color-mix(in srgb, var(--color-warning) 18%, var(--surface));
  border-left: 4px solid var(--color-warning);
  box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.4);
}
.live-missing-text { font-size: 13.5px; color: var(--text-primary); line-height: 1.45; }
/* Die Hervorhebung war orange AUF orangem Grund und damit kaum lesbar (Alex
   2026-08-06: „das kann ich nicht lesen im orangen Bereich"). Betonung jetzt
   über Gewicht und Unterstreichung statt über eine Farbe, die mit dem
   Hintergrund konkurriert. */
.live-missing-text strong {
  color: var(--text-primary);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
  text-decoration-color: var(--color-warning);
}
.live-missing-btn {
  /* Vorher `margin-left: auto` — auf einem breiten Bildschirm landete der Knopf
     zwei Meter neben dem Satz, auf den er sich bezieht. Jetzt direkt daneben. */
  margin-left: 4px;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600;
  padding: 6px 14px;
  background: var(--chip-active-bg); color: var(--white);
  border: none; border-radius: 0; cursor: pointer;
  white-space: nowrap;
}
.live-missing-btn:hover { background: var(--black); }
/* Dim the stale history (everything except the sticky banner). */
.content-stream-stale .cs-inner > *:not(.live-missing) { opacity: 0.5; }

/* Blocking-state banner — needs_login / out_of_credits / error (Cloud IACP
   fb6dd9b2). Sticky at the top like live-missing, red-tinted (hard block, needs
   action). Opaque tint for the same scroll-behind reason. */
.agent-block-banner {
  position: sticky;
  top: var(--agent-hdr-h, 0px);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 14px;
  margin-bottom: 8px;
  background: color-mix(in srgb, var(--color-error) 13%, var(--surface));
  border-left: 3px solid var(--color-error);
  box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.4);
}
.agent-block-icon { display: inline-flex; color: var(--color-error); flex-shrink: 0; }
.agent-block-text { font-size: 13px; color: var(--text-primary); line-height: 1.4; flex: 1 1 220px; }
.agent-block-text strong { color: var(--color-error); }
.agent-block-btn {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600;
  padding: 6px 14px;
  background: var(--chip-active-bg); color: var(--white);
  border: none; border-radius: 0; cursor: pointer;
  white-space: nowrap;
}
.agent-block-btn:hover { background: var(--black); }
/* Inner pin-observer wrapper — layout-neutral. */
.cs-inner { min-height: 100%; }

/* Never-blank transcript placeholder (Alex 2026-07-02: "weißer Screen, F5 3×"). */
.empty-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 64px 24px;
  color: var(--text-muted);
  text-align: center;
}
.empty-view-text { font-size: 14px; }
.zugriff-entzogen { color: var(--text-secondary); }
.zugriff-entzogen-hinweis { font-size: 12px; color: var(--text-muted); max-width: 42ch; text-align: center; }
.empty-view-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600;
  padding: 7px 16px;
  background: transparent; color: var(--text-primary);
  border: 1px solid var(--border); border-radius: 0; cursor: pointer;
}
.empty-view-btn:hover { border-color: var(--text-primary); }

.suspended-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 64px auto;
  padding: 32px 40px;
  max-width: 360px;
  text-align: center;
  background: var(--surface-elevated, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
  border-radius: 10px;
  color: var(--text-muted);
}

.suspended-icon {
  opacity: 0.6;
}

.suspended-title {
  font-family: var(--font-heading);
  font-size: 16px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-primary);   /* war `var(--text)` — dieses Token gibt es nicht */
}

.suspended-detail {
  font-size: 13px;
  line-height: 1.5;
}

.suspended-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  padding: 8px 16px;
  background: var(--color-success, #16A34A);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.suspended-action:hover:not(:disabled) {
  opacity: 0.9;
}

.suspended-action:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* MCP-Server panel opened from the header menu — the shared <McpPanel>
   renders as an inline block (its native form in the sidebar), so here
   we float it as a centered card over a backdrop. Reuses .ctx-backdrop
   (z-index 9998) for the dimmer. */
.mcp-modal-wrap {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  width: min(520px, 92vw);
  max-height: 80vh;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}
.mcp-modal-wrap .mcp-panel {
  border-bottom: none;
}

/* Recap card — the CLI's "* recap:" turn-summary (Cloud IACP d3e3c1fa),
   rendered as a distinct meta-block set apart from the agent prose. */
.recap-card {
  margin: 8px 0;
  padding: 10px 12px;
  background: var(--bg-inset);
  border-left: 3px solid var(--accent, var(--text-primary));
  border-radius: 0 6px 6px 0;
}
.recap-head {
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.recap-icon { font-size: 12px; }
.recap-summary {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-primary);
}
.recap-next {
  margin-top: 8px;
  font-size: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
}
.recap-next-label {
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 10px;
}
.recap-next-text { color: var(--text-muted); line-height: 1.5; }
.recap-chips { display: inline-flex; flex-wrap: wrap; gap: 5px; }
.recap-chip {
  font-family: var(--font-body);
  font-size: 12px;
  padding: 3px 9px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  color: var(--text-primary);
  cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}
.recap-chip:hover {
  background: var(--chip-active-bg);
  color: var(--white);
  border-color: var(--text-primary);
}

/* Live Now/Next card (Cloud IACP 308c9a3b) — top of the conversation
   during an active turn. Warning accent = the orange "working" state
   made concrete. Vanishes on turn-end; the recap card then summarizes. */
.nownext-card {
  margin: 0 0 16px;
  padding: 10px 12px;
  /* Active "now/next" card follows the accent (Alex 2026-06-22). */
  background: var(--accent-bg);
  border-left: 3px solid var(--accent);
  border-radius: 0 6px 6px 0;
}
.nownext-now {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-primary);
}
.nownext-spinner {
  width: 12px;
  height: 12px;
  border: 2px solid var(--accent);
  border-top-color: transparent;
  border-radius: 50%;
  flex-shrink: 0;
  animation: nownext-spin 0.7s linear infinite;
}
@keyframes nownext-spin { to { transform: rotate(360deg); } }
.nownext-act { flex: 1; min-width: 0; }
.nownext-elapsed {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent);
  flex-shrink: 0;
}
.nownext-next {
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
}
.nownext-next-label {
  font-family: var(--font-heading);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-right: 4px;
}

/* Per-reply action row (Alex 2026-06-21): speak + copy buttons bottom-left
   after each agent answer, like Claude/ChatGPT. Replaces the global composer
   speaker (which was removed to free input-bar space). Flat AgentOS style. */
.reply-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
}
/* Durable message timing from the transcript. Quiet by design — orientation
   metadata while scrolling, not primary conversation content. */
.message-time,
.turn-duration {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  white-space: nowrap;
  cursor: default;
}
.entry-user .message-time {
  display: block;
  margin-top: 2px;
}
.reply-actions .message-time { margin-left: 2px; }
.turn-duration { margin-left: 0; }
.reply-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.12s ease, background 0.12s ease, color 0.12s ease;
}
.reply-action:hover { opacity: 1; background: var(--bg-light); color: var(--text-primary); }
.reply-action.active { opacity: 1; color: var(--accent); }
/* TTS transport seek buttons carry a small "15" next to the arrow (Alex #206). */
.reply-tts-seek { width: auto; gap: 1px; padding: 0 5px; }
.reply-tts-sec { font-family: var(--font-mono); font-size: 8.5px; font-weight: 600; }
/* Spinner while the TTS audio is still being fetched (no controls yet, #206). */
.reply-spin { animation: reply-tts-spin 0.9s linear infinite; }
@keyframes reply-tts-spin { to { transform: rotate(360deg); } }

/* Elapsed-seconds pill next to the speaker while a (prose) synthesis runs — the
   wait is legitimately 30-50s, so show the clock instead of a silent spinner. */
.reply-tts-elapsed {
  font-size: 10px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  margin-left: 4px;
  align-self: center;
}

/* Long-press TTS-mode menu on the per-reply speaker (Alex 2026-06-21). */
.reply-tts-anchor { position: relative; display: inline-flex; }
.reply-tts-backdrop { position: fixed; inset: 0; z-index: 40; }
.reply-tts-menu {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 0;
  z-index: 96; /* above the glass header/footer overlays */
  min-width: 168px;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  backdrop-filter: blur(14px) saturate(1.5);
  border: 1px solid var(--border);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}
.reply-tts-head {
  padding: 8px 12px 6px;
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}
.reply-tts-item {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 9px 12px;
  border: none;
  background: var(--surface);
  font-size: 13px;
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
}
.reply-tts-item:hover { background: var(--bg-light); }
.reply-tts-check { display: inline-flex; width: 14px; color: var(--accent); flex-shrink: 0; }

/* Group-chats section in the agent header dropdown (Alex 2026-06-22). */
.ctx-section-label {
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  padding: 9px 14px 4px;
}
.ctx-filter {
  display: block;
  width: calc(100% - 20px);
  margin: 0 10px 6px;
  padding: 6px 9px;
  border: 1px solid var(--border);
  border-radius: 0;
  font-family: inherit;
  font-size: 13px;
  color: var(--text-primary);
  background: var(--surface);
}
.ctx-filter:focus { outline: none; border-color: var(--border-strong); }
.ctx-gc-list { max-height: 220px; overflow-y: auto; }
.ctx-gc-title {
  max-width: 210px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ctx-gc-empty { padding: 6px 14px; font-size: 12px; color: var(--text-muted); }

/* Expandable header — click the header background to reveal the agent's group
   chats (Alex 2026-06-22). Styled as a continuation of the header. */
.agent-header { cursor: default; }
.agent-header-expand {
  flex-shrink: 0;
  /* Sits INSIDE the glass header — transparent so the header's blur shows through
     instead of an opaque slab over it (Alex 2026-07-03, dropdown glassmorphism). */
  background: transparent;
  border-bottom: 1px solid var(--border);
  padding: 8px 16px 12px;
  animation: ahx-down 0.15s ease;
}
@keyframes ahx-down { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.ahx-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.ahx-label {
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
.ahx-new {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px; border: 1px solid var(--border); border-radius: 0;
  background: var(--surface); font-size: 12px; font-weight: 500;
  color: var(--text-primary); cursor: pointer;
}
.ahx-new:hover { border-color: var(--border-strong); color: var(--accent); }
.ahx-filter {
  width: 100%; margin-bottom: 8px; padding: 7px 10px;
  border: 1px solid var(--border); border-radius: 0;
  font-family: inherit; font-size: 13px; color: var(--text-primary); background: var(--surface);
}
.ahx-filter:focus { outline: none; border-color: var(--border-strong); }
.ahx-list { display: flex; flex-direction: column; max-height: 280px; overflow-y: auto; }
.ahx-item {
  display: flex; align-items: center; gap: 9px;
  width: 100%; padding: 9px 8px; border: none; background: transparent;
  font-family: var(--font-body); font-size: 13px; color: var(--text-primary);
  text-align: left; cursor: pointer; border-bottom: 1px solid var(--border);
}
.ahx-item:last-child { border-bottom: none; }
.ahx-item:hover { background: var(--bg-light); }
.ahx-item-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ahx-empty { padding: 8px; font-size: 12px; color: var(--text-muted); }

/* Scroll-up affordance for older transcript history (#1204, Alex 2026-06-23).
   The live /v2 view stays primary; this loads older turns ABOVE it. */
.history-top {
  display: flex;
  justify-content: center;
  padding: 8px 0 16px;
}
.history-top-hinweis {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-secondary);
  text-align: center;
  padding-inline: 16px;
}
.history-top-more {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 0;
  padding: 5px 14px;
  cursor: pointer;
}
.history-top-more:hover { color: var(--text-primary); background: var(--bg-light); }
.history-top-loading {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
}

/* Wrap around the scroll area so the "jump to latest" button can anchor to
   the content bottom (above the input bar) regardless of input height. */
.content-stream-wrap {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.content-stream-wrap .content-stream { flex: 1; }
/* Full-height transcript under the glass overlays: overlay heights (JS-measured
   CSS vars) become scroll padding, so first/last content clears header/footer. */
.agent-detail-container .content-stream {
  padding-top: calc(var(--agent-hdr-h, 72px) + 16px);
  padding-bottom: calc(var(--agent-ftr-h, 76px) + 16px);
}
/* Banners that sit ABOVE the stream inside the wrap (voice bar, resume pin)
   must start below the glass header — and then the stream needs only its
   normal top padding. */
.content-stream-wrap > .voice-bar:first-child,
.content-stream-wrap > .resume-pin-banner:first-child { margin-top: var(--agent-hdr-h, 72px); }
.content-stream-wrap:has(> .voice-bar) .content-stream,
.content-stream-wrap:has(> .resume-pin-banner) .content-stream { padding-top: 16px; }
/* Überblick-Aufklappfeld (Alex 15.09., Bild 125183: „schließt nicht am Header an"):
   Die 16 px Luft oben sind für die erste Nachricht gedacht. Ein klebendes Feld hielt
   sie als Lücke offen — sticky achtet das Innenpolster des Scrollers, auch beim
   Blättern —, und durch die Lücke schaute der Verlauf. Mit Feld: Polster = Kopfhöhe,
   das Feld liegt bündig unter der Kopflinie; hinter einer Leiste (Stimme, Wiederauf-
   nahme) braucht es gar keins mehr. */
.agent-detail-container .content-stream:has(.ueberblick-oben) { padding-top: var(--agent-hdr-h, 72px); }
.content-stream-wrap:has(> .voice-bar) .content-stream:has(.ueberblick-oben),
.content-stream-wrap:has(> .resume-pin-banner) .content-stream:has(.ueberblick-oben) { padding-top: 0; }

/* Floating "scroll to bottom / latest" button (Alex 2026-06-23) — appears
   when scrolled up far into the history. */
.scroll-down-btn {
  position: absolute;
  /* --sprung-knopf-hub: Sichten mit eigener Leiste ueber dem Eingabefeld
     (Zeitansicht) heben den Knopf darueber, ohne ihn nachzubauen. */
  bottom: calc(var(--agent-ftr-h, 76px) + 16px + var(--sprung-knopf-hub, 0px));
  left: 50%;
  transform: translateX(-50%);
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  color: var(--text-primary);
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  z-index: 5;
  transition: background 0.12s ease, transform 0.06s ease;
}
.scroll-down-btn:hover { background: var(--bg-light); }
.scroll-down-btn:active { transform: translateX(-50%) scale(0.9); }

/* Orphan cold-start states (Alex 2026-06-23) — same card shell as the
   suspended card; the spinner is the accent-coloured cmd-spinner. */
.wake-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 64px auto;
  padding: 32px 40px;
  max-width: 360px;
  text-align: center;
  background: var(--bg-light);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-muted);
}
.wake-card .cmd-spinner { width: 22px; height: 22px; border-width: 3px; }
.wake-title {
  font-family: var(--font-heading);
  font-size: 16px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-primary);
}
.wake-detail { font-size: 13px; line-height: 1.5; }

/* Realtime voice narrator (Step 1) — toggle button + live status bar (#1215). */
.voice-btn.voice-live {
  border-color: var(--accent);
  color: var(--accent);
}
.voice-pulse { animation: voice-pulse 1.4s ease-in-out infinite; }
@keyframes voice-pulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}
.voice-bar {
  /* Zwei FESTE Zeilen statt freiem Umbruch (Alex 2026-08-11, Screenshot 118938):
     Mit `flex-wrap` ergaben sich je nach Breite drei zerfranste Reihen, der
     Stopp-Knopf landete allein unten rechts, und der Geräte-Auswähler drängte
     alles auseinander. Jetzt ist die Aufteilung eine Entscheidung, keine Folge
     der Fensterbreite: Zeile 1 = Zustand + Handeln, Zeile 2 = Einstellen. */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 7px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--accent-bg);
  color: var(--accent);
  font-size: 12.5px;
  flex-shrink: 0;
}
/* Keep the Stop button last but always visible: push it to the row end and never
   let it shrink — wrapping puts it on its own line before it would ever clip. */
.voice-bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.voice-bar-orb {
  position: relative;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  overflow: hidden;
  border-radius: 50%;
  box-shadow: 0 0 15px color-mix(in srgb, var(--accent) 28%, transparent);
}
/* Halten-zum-Sprechen und Stopp sitzen immer rechts — auch wenn die letzte
   Äußerung kurz ist und den Platz nicht füllt. */
.voice-bar-row.primary .voice-bar-mic.ptt { margin-left: auto; }
.voice-bar-row.primary .voice-bar-last ~ .voice-bar-mic.ptt { margin-left: 0; }
/* Der Geräte-Auswähler nimmt den Rest der zweiten Zeile, statt die anderen
   Bedienelemente zu verdrängen. */
.voice-bar-row.secondary .audio-input-picker { flex: 1; min-width: 0; }
.voice-bar-row.secondary .voice-bar-log { margin-left: auto; }

.voice-bar-stop { margin-left: auto; }
.voice-bar-error { background: rgba(220, 38, 38, 0.1); color: #dc2626; }
.voice-bar-label { font-weight: 600; white-space: nowrap; }
.voice-bar-last {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0.85;
  font-style: italic;
}
.voice-bar-stop {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  cursor: pointer;
  border-radius: 0;
}
.voice-bar-stop:hover { background: var(--accent); color: var(--white); }
/* Der Mikro-Pegel (.voice-vu) wohnt jetzt in MicLevelMeter.css, direkt bei
   seiner Komponente — sonst haengt er am Bundle der Ansicht, die ihn zufaellig
   zuerst benutzt hat. */

/* Global voice mini-pill (app-level, GlobalVoiceLayer): persistent AgentOS
   narrator indicator shown when AgentDetail's own bar is off screen (#1215). */
.voice-minibar {
  position: fixed;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: 1px solid var(--border);
  background: var(--accent-bg);
  color: var(--accent);
  font-size: 12.5px;
  font-weight: 600;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}
.voice-minibar-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  animation: voice-pulse 1.4s ease-in-out infinite;
  flex-shrink: 0;
}
.voice-minibar-orb {
  position: relative;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  overflow: hidden;
  border-radius: 50%;
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 24%, transparent);
}
.voice-minibar.voice-bar-connecting .voice-minibar-dot { opacity: 0.5; }
.voice-minibar-label { white-space: nowrap; }
.voice-minibar-context {
  flex-shrink: 0;
  padding: 2px 6px;
  border: 1px solid currentColor;
  background: transparent;
  cursor: pointer;
  font: inherit;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0.7;
}
.voice-minibar-context.on { color: var(--success, #16a34a); opacity: 1; }
/* Sprechtaste. In der Multi-Ansicht, im Dashboard und in Collab gibt es kein
   Avatar-Video — die Pille ist dort die EINZIGE Stelle, an der die Leertaste
   ueberhaupt entdeckt werden kann. Deshalb steht der Hinweis dauerhaft da und
   nicht nur beim Halten. */
.voice-minibar-ptt {
  flex-shrink: 0;
  padding: 2px 6px;
  border: 1px solid currentColor;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0.55;
}
/* Waehrend der Aufnahme kein dezenter Hinweis mehr, sondern eine Aussage:
   gefuellte Flaeche statt Umriss, damit im Augenwinkel erkennbar bleibt, dass
   das Mikrofon gerade offen ist. */
.voice-minibar-ptt.on {
  opacity: 1;
  background: currentColor;
  color: var(--surface);
}

/* Am Handy gibt es keine Leertaste — der Hinweis ist dort nicht nur nutzlos,
   er nimmt der Pille die Breite, die sie für Modus und Ziel braucht (Alex
   2026-08-11: „am Handy bringt mir die Information Leertaste nichts").
   Gesprochen wird dort über das Avatar-Video, das ohnehin sichtbar ist. */
@media (pointer: coarse) {
  .voice-minibar-ptt { display: none; }
}

/* Ist das Avatar-Feld sichtbar, zeigt es Modus, Ziel, Zustand und Stopp bereits
   selbst. Die Pille wiederholte das ein zweites Mal — auf dem Handy stand
   „UPDATES AUS" gleichzeitig oben in der Pille und unten in der Leiste, und die
   Pille legte sich zusätzlich über die Kopfzeile (Screenshot 118939). Sie
   verschwindet dort, statt nach oben auszuweichen. */
@media (max-width: 768px) {
  body:has(.arc-wrap) .voice-minibar { display: none; }
}
.voice-minibar-stop {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  cursor: pointer;
  border-radius: 0;
}
.voice-minibar-stop:hover { background: var(--accent); color: var(--white); }

@media (max-width: 520px) {
  .voice-minibar {
    flex-wrap: wrap;
    justify-content: center;
    width: max-content;
    max-width: calc(100vw - 20px);
  }
}

/* Voice verify-log (Alex 2026-06-23) — feed ↔ narration trail. */
.voice-bar-log {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  height: 24px;
  padding: 0 8px;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  font-size: 11px;
  cursor: pointer;
  border-radius: 0;
}
.voice-bar-log.on { background: var(--accent); color: var(--white); }
/* Mic mute toggle — same square button language; red when muted. */
.voice-bar-mic {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  cursor: pointer;
  border-radius: 0;
}
.voice-bar-mic:hover { background: var(--accent); color: var(--white); }
.voice-bar-mic.muted { background: #dc2626; border-color: #dc2626; color: #fff; }
.voice-bar-mic:disabled { opacity: 0.45; cursor: not-allowed; }
/* Push-to-talk button (transparent mode, Alex 2026-06-25): bigger + thumb-reachable
   with a label, and NO iOS text-selection / callout / tap-highlight while held. */
.voice-bar-mic.ptt {
  width: auto;
  height: 34px;
  padding: 0 16px;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
}
.voice-bar-mic.ptt.talking { background: var(--accent); border-color: var(--accent); color: var(--white); }
.voice-log {
  flex-shrink: 0;
  max-height: 38vh;
  overflow-y: auto;
  border-bottom: 1px solid var(--border);
  background: var(--bg-light);
  padding: 8px 12px;
  font-size: 12px;
}
.voice-log-empty { color: var(--text-muted); font-style: italic; }
/* Wrap so the TEXT gets its own full-width line below the compact tag+attr meta,
   instead of being squeezed into a thin right column on mobile (Alex 2026-06-26). */
.voice-log-line { display: flex; flex-wrap: wrap; gap: 3px 8px; padding: 4px 0; border-bottom: 1px solid var(--border); }
.voice-log-tag {
  flex-shrink: 0;
  width: 86px;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  opacity: 0.75;
}
.voice-log-fed .voice-log-tag { color: var(--text-muted); }
.voice-log-voice .voice-log-tag { color: var(--accent); }
.voice-log-attr {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  opacity: 0.7;
  white-space: nowrap;
  align-self: flex-start;
  padding-top: 1px;
}
.voice-log-text { flex: 1 1 100%; min-width: 0; white-space: pre-wrap; word-break: break-word; color: var(--text-primary); }
.voice-log-voice .voice-log-text { font-weight: 500; }
.voice-log-meta { margin-top: 6px; font-size: 11px; color: var(--text-muted); }

/* Voice session-metrics report (Codex 2026-06-24) — the exact Ist-Werte after a test. */
.voice-report {
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
  background: var(--bg-light);
  padding: 8px 12px;
  font-size: 12px;
}
.voice-report-head {
  display: flex; align-items: center; justify-content: space-between;
  font-weight: 600; margin-bottom: 6px;
}
.voice-report-head button {
  border: none; background: transparent; color: var(--text-muted); cursor: pointer;
  display: inline-flex; padding: 2px;
}
.voice-report-grid {
  display: grid; grid-template-columns: auto 1fr; gap: 2px 12px;
}
.voice-report-grid span { color: var(--text-muted); font-family: var(--font-mono); font-size: 11px; }
.voice-report-grid b { font-family: var(--font-mono); font-size: 11px; color: var(--text-primary); word-break: break-all; }
.voice-log-you .voice-log-tag { color: var(--accent); font-weight: 600; }
.voice-log-you .voice-log-text { font-style: italic; }

/* Talkback confirm-chip (Step 2, #1220) — propose → confirm before send. */
/* Talkback-Bestätigung als zentrierte Karte (Alex, 14.08.). Vorher klemmte
   die Frage klein unter der Sprachleiste — für eine Entscheidung, die alles
   andere pausiert, die falsche Bühne. Formsprache des Portals: flach, eckig,
   dunkle Primärtaste (Stilvorgabe: radius 0, --text-primary als Knopf-Grund).
   Der Schleier dahinter führt den Blick, fängt aber bewusst KEINE Klicks auf
   Verlauf oder Sprech-Taste ab — pointer-events nur auf der Karte. */
.voice-proposal-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: color-mix(in srgb, var(--text-primary) 12%, transparent);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  pointer-events: none;
}
.voice-proposal {
  pointer-events: auto;
  width: min(440px, 100%);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  box-shadow: 0 18px 50px color-mix(in srgb, var(--text-primary) 22%, transparent);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.voice-proposal.risky { border-color: #dc2626; }
.voice-proposal-kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
}
.voice-proposal-question {
  font-size: 18px;
  line-height: 1.35;
  color: var(--text-primary);
}
.voice-proposal-question b { font-weight: 700; }
.voice-proposal-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 1px 5px;
  border: 1px solid currentColor;
}
.voice-proposal-tag.cross { color: #b45309; }
.voice-proposal-tag.danger { color: #dc2626; }
.voice-proposal-text {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-primary);
  white-space: pre-wrap;
  word-break: break-word;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--text-primary) 6%, transparent);
  border-left: 3px solid var(--border-strong);
  max-height: 40vh;
  overflow-y: auto;
}
.voice-proposal-actions { display: flex; gap: 10px; margin-top: 4px; }
.voice-proposal-ok, .voice-proposal-no {
  flex: 1;
  height: 40px;
  padding: 0 16px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-primary);
  cursor: pointer;
  border-radius: 0;
  font-size: 13.5px;
  font-weight: 600;
}
.voice-proposal-ok { background: var(--chip-active-bg); border-color: var(--text-primary); color: var(--white); }
.voice-proposal.risky .voice-proposal-ok { background: #dc2626; border-color: #dc2626; }
.voice-proposal-no:hover { background: var(--bg-light); }

/* Focus-lock toggle active state (Alex 2026-06-24) — accent-filled when locked. */
.voice-bar-mic.on { background: var(--accent); border-color: var(--accent); color: var(--white); }

/* Glass fallback (no backdrop-filter support) → opaque surface. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .reply-tts-menu { background: var(--surface); }
}

/* Issue-dispatch turns — blue identity, distinct from pink IACP peer messages
   (Alex 2026-07-04). Marker, tag and a subtle info-tinted content wash. */
.entry-user.source-iacp.source-issue .entry-marker { background: var(--color-info); }
.entry-user.source-issue .entry-source-tag { background: var(--color-info); color: var(--white); }
.entry-user.source-issue .entry-content {
  background: color-mix(in srgb, var(--color-info) 7%, transparent);
}

/* „war 4 h 27 min angemeldet" am Blockier-Banner. Gedämpft — es ist eine
   Zusatzangabe zur Einordnung, nicht die Meldung selbst. */
.agent-block-age {
  flex: none;
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.03em;
  opacity: 0.75;
  white-space: nowrap;
}


/* Treffer des Sprungs zur eigenen Nachricht (Alex 12.08.2026). Kurz und
   deutlich: Der Sprung landet sonst „irgendwo", und man sucht von Hand, was
   gemeint war. Kein Dauerzustand — die Markierung verblasst von selbst. */
.stream-entry.own-jump-hit {
  animation: own-jump-flash 1.4s ease-out;
}
@keyframes own-jump-flash {
  0%   { background: var(--accent-bg, rgba(120, 120, 255, 0.18)); }
  100% { background: transparent; }
}


/* Hinweis auf den aktiven Sichtfilter (Alex 12.08.). Ein Filter, den man nicht
   sieht, wirkt wie ein verlorener Verlauf — deshalb steht die Stufe und die
   Taste, die weiterschaltet, ausdruecklich dort. */
.stream-filter-note {
  padding: 6px 12px;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

/* Steht anstelle der Eingabezeile, wenn `sessions:send` fehlt.
   Sie nimmt bewusst deren Platz ein statt spurlos zu fehlen: Die Eingabezeile
   ist die zentrale Handhabe dieser Ansicht, ihr wortloses Verschwinden saehe
   nach einem Fehler aus. Ein Satz beantwortet die Frage, die sonst entsteht. */
.nur-lesen-hinweis {
  padding: 12px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-secondary);
  background: var(--surface);
  border-top: 1px solid var(--border);
}

/* Beitrags-Erwähnung im Fließtext (Alex 17.08.): kompakter Chip statt
   Einbettung — die Einbettung bleibt der nackten URL vorbehalten. */
.post-ref-link {
  color: var(--accent, #d81b16);
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
  white-space: nowrap;
}
.post-ref-link:hover { opacity: 0.8; }

/* ── Terminal-Auszeichnung (Cloud b361f2c) ────────────────────────
   Über die ROLLE eingefärbt, nicht über die rohe Terminalfarbe: Ein hartes
   Terminal-Rot ist im hellen Thema unlesbar und im dunklen zu grell. So
   stimmen beide Themen, und die Bedeutung (Fehler, Zugabe, Wegnahme, Pfad)
   bleibt erhalten — sie ist bei Codex nicht dekorativ. */
.code-block .sp-error, .entry-plain .sp-error   { color: var(--color-error); }
.code-block .sp-success, .entry-plain .sp-success { color: var(--color-success); }
.code-block .sp-warning, .entry-plain .sp-warning { color: var(--color-warning); }
.code-block .sp-path, .entry-plain .sp-path    { color: var(--color-info); }
.code-block .sp-command, .entry-plain .sp-command { color: var(--accent); }
.code-block .sp-muted, .entry-plain .sp-muted   { opacity: 0.6; }
.code-block .sp-bold, .entry-plain .sp-bold    { font-weight: 600; }

/* Diff-Zeilen zusätzlich flächig hinterlegen — im Terminal trägt die Position
   die Bedeutung mit; im Fließtext des Portals geht sie sonst unter. */
.code-block .sp-add, .entry-plain .sp-add {
  color: var(--color-success);
  background: var(--color-success-bg);
}

.code-block .sp-del, .entry-plain .sp-del {
  color: var(--color-error);
  background: var(--color-error-bg);
}

/* Markdown-freie Prosa mit Terminal-Auszeichnung: Zeilenumbrüche erhalten,
   aber in der normalen Textschrift — es ist Fließtext, kein Code-Block. */
.entry-plain {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Warten ≠ Störung (Issue #1199): Ein erreichtes Kontingent-Limit ist keine
   Fehlfunktion — der Agent ist heil, er darf gerade nur nicht, und es löst sich
   von selbst. Deshalb dieselbe Bauform wie der Fehlerbalken, aber in der
   Warn-Farbe und ohne Alarmton. Rot bleibt dem vorbehalten, wo jemand
   eingreifen MUSS. */
.agent-block-banner.agent-block-wait {
  background: color-mix(in srgb, var(--color-warning) 13%, var(--surface));
  border-left-color: var(--color-warning);
}

.agent-block-banner.agent-block-wait .agent-block-icon,
.agent-block-banner.agent-block-wait .agent-block-text strong {
  color: var(--color-warning);
}

/* Erste Inhaltszeile im zugeklappten Werkzeug-Kopf (#1249). Sie trägt die
   Farbe des Terminals — deshalb steht sie hier ohne eigene Farbangabe: Die
   Spannen-Klassen aus ColoredPre färben sie, alles Ungefärbte bleibt gedämpft.
   `min-width: 0` + `ellipsis`, damit ein langer Dateipfad die Kopfzeile nicht
   sprengt; der Pfeil und das Abzeichen behalten ihren Platz. */
.tool-call-peek {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  opacity: 0.85;
}

/* ── Codeblock: Kopfzeile mit Sprache + Kopieren, Rumpf scrollt ────────────
   Vorbild ist die Darstellung, die Alex am 21.08. gezeigt hat: ruhige Flaeche,
   Sprache links, Kopier-Symbol rechts, Farben nach Wortart. Die Farben stehen
   hier als Marken (--hl-*) und nicht als fertiges highlight.js-Thema, weil das
   Portal hell UND dunkel kann — ein mitgeliefertes Thema kennt nur einen Fall. */
.v2-codeblock {
  margin: 10px 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-inset);
}
.v2-codeblock-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-inset);
}
.v2-codeblock-lang {
  font: 600 12px/1.4 var(--font-sans, inherit);
  letter-spacing: 0.01em;
  opacity: 0.75;
}
.v2-codeblock-copy {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  font: 500 12px/1.4 var(--font-sans, inherit);
  color: inherit;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 120ms ease, border-color 120ms ease;
}
.v2-codeblock-copy:hover,
.v2-codeblock-copy:focus-visible {
  opacity: 1;
  border-color: var(--border);
}
@media (hover: none) { .v2-codeblock-copy { opacity: 0.85; } }

/* Waagrecht scrollen statt umbrechen: ein umgebrochener Befehl ist ein
   falscher Befehl, und beim Kopieren wandert der Umbruch mit. */
.v2-codeblock > pre {
  margin: 0;
  padding: 10px 12px;
  border: none;
  border-radius: 0;
  background: transparent;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.v2-codeblock > pre code {
  display: block;
  white-space: pre;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.55;
}

/* Wortarten. Hell zuerst, Dunkel ueberschreibt nur die Marken. */
:root {
  --hl-comment: #5F8C4E;
  --hl-string:  #C0392B;
  --hl-keyword: #8E44AD;
  --hl-name:    #148F9F;
  --hl-number:  #B36B00;
  --hl-meta:    #7A7A85;
}
[data-theme="dark"] {
  --hl-comment: #7FB069;
  --hl-string:  #E8836F;
  --hl-keyword: #C792EA;
  --hl-name:    #56C7D6;
  --hl-number:  #F2A65A;
  --hl-meta:    #9A9AA5;
}
.hljs-comment, .hljs-quote { color: var(--hl-comment); font-style: italic; }
.hljs-string, .hljs-regexp, .hljs-addition { color: var(--hl-string); }
.hljs-keyword, .hljs-selector-tag, .hljs-literal, .hljs-built_in,
.hljs-doctag, .hljs-type { color: var(--hl-keyword); }
.hljs-variable, .hljs-template-variable, .hljs-attr, .hljs-attribute,
.hljs-title, .hljs-title.function_, .hljs-title.class_,
.hljs-section, .hljs-name, .hljs-selector-id, .hljs-selector-class {
  color: var(--hl-name);
}
.hljs-number, .hljs-symbol, .hljs-bullet, .hljs-link { color: var(--hl-number); }
.hljs-meta, .hljs-params, .hljs-deletion { color: var(--hl-meta); }
.hljs-emphasis { font-style: italic; }
.hljs-strong { font-weight: 600; }

/* ── Aufruf-Argumente im aufgeklappten Werkzeug-Abschnitt ──────────────────
   Cloud 44a69d7. Anlass: Codex bricht bei langen Argumenten nach dem Verb um,
   das Label ist bei 80 Zeichen abgeschnitten — man sah, DASS etwas gerufen
   wurde, nicht WOMIT (Alex, Screenshot 120459).

   Höhenbegrenzt: Ein `send_message` mit langem Text würde sonst das Ergebnis
   nach unten aus dem Blick drängen. Der Block scrollt in sich, die Seite
   nicht — dieselbe Regel wie bei breiten Tabellen. */
.tool-call-args {
  margin-bottom: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
}

.tool-call-args-label {
  display: block;
  padding: 4px 8px;
  border-bottom: 1px solid var(--border);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-secondary);
}

.tool-call-args pre {
  margin: 0;
  padding: 8px;
  max-height: 220px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--text-primary);
}

/* Denkstand-Zeile (Cloud 25.08.): die „(summarized)"-Auskunft der CLI.
   RUHIGER gesetzt als `activity` — und das ist kein Geschmack: `activity`
   stammt aus der Aufgabenliste des Agenten (strukturiert, abgelesen), diese
   Zeile ist seine Prosa über sich selbst. Gleiche Auszeichnung liesse eine
   Selbstauskunft wie eine Messung aussehen. Kursiv und gedämpft sagt „das
   erzählt er, das haben wir nicht gemessen". */
.nownext-thinking {
  margin-top: 4px;
  padding-left: 2px;
  color: var(--text-muted);
  font-size: 12px;
  font-style: italic;
  line-height: 1.4;
}

/* Die Dauer neben dem Gedanken — noch leiser als er selbst. */
.nownext-thinking-age { opacity: 0.6; font-style: normal; }


/* „(summarized)"-Zusammenfassungen — im Rand, nicht im Fluss.
   Alex: sie standen wie gleichrangige Antworten und drueckten das Gespraech
   auseinander. Gedaempft, einzeilig, aufklappbar; flach und eckig wie der
   Rest des Portals. */
.entry-summary {
  margin: 2px 0;
}
.entry-summary-toggle {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  padding: 4px 8px;
  border: 0;
  border-left: 2px solid var(--border);
  border-radius: 0;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 12px;
  font-style: italic;
  text-align: left;
  cursor: pointer;
}
.entry-summary-toggle:disabled { cursor: default; }
.entry-summary-toggle:not(:disabled):hover {
  background: var(--hover-bg);
  border-left-color: var(--text-muted);
}
.entry-summary-tag {
  flex: 0 0 auto;
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  opacity: 0.75;
}
.entry-summary-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}
/* Zugeklappt bleibt es strikt einzeilig — sonst ist der Gewinn dahin. */
.entry-summary:not(.is-open) .entry-summary-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Präsenz-Eingabe (Variante A, Post 4909): Wahrnehmungs-Block als Ebene 4 —
   einklappbar, zurückgenommen; die Frage bleibt der prominente Text. */
.presence-kontext {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 2px 0 6px;
}

.presence-kontext-schalter {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px dashed var(--border);
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  cursor: pointer;
}

.presence-kontext-herkunft {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.03em;
}

.presence-kontext-text {
  flex-basis: 100%;
  margin: 0;
  padding: 6px 10px;
  border-left: 2px solid var(--border);
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-x: auto;
}

.entry-source-tag.gesprochen {
  border: 1px dashed var(--border);
  color: var(--text-muted);
}

/* Präsenz-Knopf in der Kopfzeile (Variante A): Eingang dort, wo man gerade ist. */
.ahx-btn.ahx-praesenz {
  gap: 5px;
  border-style: dashed;
}

.ahx-praesenz-label {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

@media (max-width: 480px) {
  .ahx-praesenz-label { display: none; }
}

/* Kleinhirn-Karte in der klassischen Konversation: am Turn-Ende, eingerückt wie die Antwort. */
.stream-derivat {
  margin: 0 0 16px 44px;
}

.stream-linse-label {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}


.stream-derivat-original { margin-top: 10px; }
.stream-derivat-fehlt { display: inline-block; margin: 0 0 14px 44px; }

/* Kleinhirn-Spanne (#4914): Prosa der Spanne, live wachsend. Sie sieht aus wie
   die Antwort selbst — kein Strich, kein Kasten (Alex 02.09.: „der Strich ist
   unpassend, das ist ja der Agenten-Output, nur verschönert"). Die Absätze
   laufen durch `.entry-agent .entry-content`, also durch dieselben Regeln wie
   jede Agenten-Antwort. */
.spanne-prosa {
  margin: 0 0 12px;
  padding: 0;
  border: 0;
  background: transparent;
}

.spanne-prosa-absatz {
  margin: 0 0 4px;
  /* Tönung statt Weiß, damit Prosa als Prosa erkennbar ist (Alex 03.09.);
     Tint-Token, kein Strich, kein color-mix — Theme-tauglich hell wie dunkel. */
  background: var(--color-info-bg);
  padding: 6px 12px;
}

.spanne-prosa-etikett {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  padding: 4px 12px 0;
  background: var(--color-info-bg);
}

.spanne-prosa-stand {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.spanne-original {
  margin: 0 0 10px 44px;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  background: transparent;
  border: 1px dashed var(--border);
  padding: 2px 8px;
  cursor: pointer;
}

/* Strang-Leiste (#4914): Zustand des Agenten in der Gehirn-Sicht — flach,
   Mono-Uppercase wie die Segmentschalter; Fokus als dunkle Pille. */
.strang-leiste {
  /* Nicht mehr sticky: Karten statt Chips (Alex 03.09. 12:0x) brauchen Höhe;
     der Gehirn-Banner darüber trägt die Zahlen. */
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 12px 10px;
  margin: 0 0 8px;
  /* Voller Kontrast (Alex 03.09. 00:0x: „graues Teil, kann nichts lesen"):
     deckende Fläche, Ink-Text, kein Ausblassen. */
  background: var(--surface);
  color: var(--text-primary);
  border-bottom: 1px solid var(--text-primary);
}

.strang-leiste-titel {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-primary);
}

.strang-leiste-liste {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.strang-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 2px 8px;
  border: 1px solid var(--text-primary);
  font-size: 13px;
  line-height: 1.5;
  background: transparent;
  color: var(--text-primary);
}

.strang-chip-titel { font-weight: 600; }

.strang-chip-detail {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.03em;
  color: var(--text-primary);
}

.strang-chip.zustand-aktiv { border-color: var(--text-primary); }
.strang-chip.zustand-wartet { border-style: dashed; }
/* Erledigt: kein Ausblassen (unleserlich), sondern Haken im Titel. */
.strang-chip.zustand-erledigt .strang-chip-titel::before { content: '✓ '; }
.strang-chip.zustand-verdraengt { border-style: dotted; }

.strang-chip-epistemik {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  color: var(--text-primary);
  opacity: 0.85;
}

.strang-chip.is-fokus {
  background: var(--chip-active-bg);
  color: var(--chip-active-fg, var(--surface));
  border-color: transparent;
}

.strang-chip.is-fokus .strang-chip-detail { color: inherit; opacity: 0.8; }

.strang-chip-fokus {
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.8;
}

/* B-light-Rollover (#4914): die Kurzfassung ist sichtbar als solche etikettiert —
   eine von uns gesetzte, belegte Verdichtung, nie ein stiller Endstand. */
.spanne-kurzfassung {
  border-top: 1px dashed var(--border);
  padding-top: 6px;
}

.spanne-kurzfassung-etikett {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.stream-derivat-fehlt.is-fehlgeschlagen { color: var(--error, #b91c1c); }

@media (max-width: 700px) {
    /* Sicherheitszone: Mikrofon-Knopf und Pfeil liegen ueber der letzten
     Textkante (Business 07.09., Bild 123704). */
  .agent-detail-container .content-stream { padding-bottom: calc(var(--agent-ftr-h, 76px) + 72px); }
}
/* Verlaufs-Linse in der Kopfzeile (Alex 10.09., Bild 123936): Segmentpaar
   Original | Prosa statt eines Balkens über dem Verlauf. Mono-Versalien wie
   die übrigen Segmentwahlen; am Telefon steht das Paar in der Kopfgruppe. */
.gehirn-linse { display: inline-flex; }
.gehirn-linse .gehirn-linse-knopf + .gehirn-linse-knopf { margin-left: -1px; }
.gehirn-linse-knopf.on { position: relative; z-index: 1; }
/* Der Gehirn-Knopf trägt die Zahl „brauchen dich" — die Farbe der Warnung,
   wie das Braucht-dich-Feld im Überblick. */
.ahx-btn.stream-linse.braucht { border-color: var(--color-warning); }
.ahx-btn.stream-linse.braucht .ahx-btn-count { color: var(--color-warning); }
.ahx-btn.stream-linse.on .ahx-btn-count { color: var(--white); }
@media (max-width: 1199px) {
  .kopf-gruppe-inhalt .gehirn-linse .gehirn-linse-knopf { flex: 1; justify-content: center; }
}

.strang-chip.is-klickbar { cursor: pointer; }
.strang-chip.is-klickbar:hover, .strang-chip.is-klickbar:focus-visible { background: var(--hover-bg); outline: none; }
.spanne-prosa-absatz:target, .spanne-prosa-absatz.is-ziel { outline: 2px solid var(--text-primary); }


/* „Braucht dich" — Stränge, die auf den Menschen warten, mit dem worauf als Satz. */
.braucht-dich { border: 2px solid var(--text-primary); padding: 8px 10px; background: var(--color-warning-bg, var(--surface)); }
.braucht-dich-liste { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.braucht-dich-eintrag { display: grid; grid-template-columns: 1fr auto; grid-template-areas: 'worauf knopf' 'meta knopf'; gap: 2px 12px; align-items: center; }
.braucht-dich-worauf { grid-area: worauf; font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--text-primary); }
.braucht-dich-meta { grid-area: meta; font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary); }
.braucht-dich-sprung { grid-area: knopf; border: 1px solid var(--text-primary); background: var(--text-primary); color: var(--surface); font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; padding: 6px 10px; cursor: pointer; border-radius: 0; }
.braucht-dich-sprung:hover, .braucht-dich-sprung:focus-visible { opacity: 0.85; outline: none; }

/* Strang-Karten: Titel, Zustand, mit wem, seit wann, die letzten Absätze, Referenzen. */
.strang-karten { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 8px; }
.strang-karte { border: 1px solid var(--text-primary); background: var(--surface); color: var(--text-primary); padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.strang-karte.zustand-wartet { border-style: dashed; }
.strang-karte.zustand-verdraengt { border-style: dotted; }
.strang-karte.is-fokus { box-shadow: inset 3px 0 0 var(--text-primary); }
.strang-karte.is-klickbar { cursor: pointer; }
.strang-karte.is-klickbar:hover, .strang-karte.is-klickbar:focus-visible { background: var(--hover-bg); outline: none; }
.strang-karte-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.strang-karte-titel { font-weight: 600; font-size: 14px; }
.strang-karte-zustand { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary); }
.strang-karte-zustand.zustand-aktiv { color: var(--text-primary); }
.strang-karte-meta { font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary); }
.strang-karte-absaetze { display: flex; flex-direction: column; gap: 4px; }
.strang-karte-absatz { margin: 0; font-size: 13px; line-height: 1.45; color: var(--text-primary); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.strang-karte-refs { display: flex; flex-wrap: wrap; gap: 4px; }
.strang-karte-ref { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; border: 1px solid var(--text-secondary); color: var(--text-secondary); padding: 0 5px; }
.strang-erledigt summary { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary); cursor: pointer; }
.strang-erledigt .strang-leiste-liste { margin-top: 6px; }

/* EINSTIEG — der erste Blick beim Öffnen eines Agenten (Alex 03.09. 18:5x). */
.einstieg { margin: 0 0 8px; border: 2px solid var(--text-primary); background: var(--surface); color: var(--text-primary); }
.einstieg-kopf { display: flex; align-items: baseline; gap: 10px; padding: 6px 12px; border-bottom: 1px solid var(--text-primary); }
.einstieg.is-zu .einstieg-kopf { border-bottom: 0; }
.einstieg-titel { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
.einstieg-zaehler { font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary); flex: 1; }
.einstieg-toggle, .einstieg-eingabe { background: none; border: 1px solid var(--text-primary); color: var(--text-primary); font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; padding: 2px 8px; cursor: pointer; border-radius: 0; }
.einstieg-koerper { display: flex; flex-direction: column; gap: 10px; padding: 8px 12px 10px; }
.einstieg-block-titel { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary); margin-bottom: 4px; }
.einstieg-braucht .einstieg-block-titel { color: var(--text-primary); font-weight: 600; }
.einstieg-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
/* Einspaltig: Satz, Meta, Zusammenhang, darunter die Antwortzeile — auf dem
   Telefon gehoeren die Bedienelemente UNTER die Frage, nicht daneben
   (Business/Alex 07.09., Bild 123704: Frage auf sechs Zeilen umgebrochen,
   Platzhalter abgeschnitten). */
.einstieg-zeile { display: grid; grid-template-columns: 1fr; grid-template-areas: 'satz' 'meta'; gap: 2px; align-items: start; }
.einstieg-antwort { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.einstieg-antwort-feld { flex: 1 1 180px; min-width: 0; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-primary); padding: 6px 8px; font: inherit; font-size: 13px; border-radius: 0; }
.einstieg-antwort-feld::placeholder { color: var(--text-secondary); }
.einstieg-schnell { border: 1px solid var(--text-primary); background: var(--text-primary); color: var(--surface); font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; padding: 7px 10px; border-radius: 0; cursor: pointer; }
.einstieg-schnell[type='submit'] { background: transparent; color: var(--text-primary); }
.einstieg-schnell:disabled { opacity: 0.45; cursor: default; }
.einstieg-antwort-unklar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; text-transform: none; letter-spacing: 0; font-size: 12px; }
.einstieg-antwort-fehler { flex-basis: 100%; font-size: 12px; color: var(--error, #dc2626); }
.einstieg-antwort-fertig { grid-column: 1 / -1; font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary); margin-top: 4px; }
.einstieg-satz { grid-area: satz; font-size: 15px; font-weight: 600; line-height: 1.4; }
.einstieg-zielkarte { display: grid; grid-template-columns: 1fr; gap: 3px; border-left: 3px solid var(--text-primary); padding-left: 8px; }
.einstieg-zielstraenge { font-size: 12px; color: var(--text-secondary); }
.einstieg-schnell-leise { background: transparent; color: var(--text-primary); }
.einstieg-mehr { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 3px; margin-top: 2px; }
.einstieg-beleg { font-size: 12px; line-height: 1.35; color: var(--text-secondary); }
.einstieg-ziel, .strang-karte-ziel { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; border: 1px solid var(--text-primary); padding: 1px 6px; align-self: flex-start; }
.einstieg-meta { grid-area: meta; font-family: var(--font-mono); font-size: 10px; color: var(--text-secondary); }
.einstieg-sprung { grid-area: knopf; border: 1px solid var(--text-primary); background: var(--text-primary); color: var(--surface); font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; padding: 6px 10px; cursor: pointer; border-radius: 0; }
.einstieg-karte { display: flex; flex-direction: column; gap: 2px; }
.einstieg-karte .einstieg-satz { font-size: 14px; }
.einstieg-punkt { font-size: 13px; line-height: 1.45; }
.einstieg-art { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; border: 1px solid var(--text-secondary); color: var(--text-secondary); padding: 0 4px; margin-right: 4px; }
.einstieg-straenge { display: flex; flex-wrap: wrap; gap: 6px; }
.einstieg-strang { background: transparent; border: 1px solid var(--text-primary); color: var(--text-primary); font-size: 13px; padding: 2px 8px; cursor: pointer; border-radius: 0; }
.einstieg-strang.zustand-wartet { border-style: dashed; }
.einstieg-strang.is-fokus { box-shadow: inset 3px 0 0 var(--text-primary); }
.einstieg-eingabe { align-self: flex-start; }

/* „In den Hintergrund" (Ctrl+B) neben dem Stopp-Knopf, nur bei laufendem Werkzeug (#4926). */
.sending-hintergrund { margin-left: 6px; border: 1px solid var(--text-primary); background: transparent; color: var(--text-primary); font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; padding: 2px 8px; cursor: pointer; border-radius: 0; }
.sending-hintergrund:disabled { opacity: 0.5; cursor: wait; }
/* Liste laufender Hintergrundaufgaben aus dem Verlauf. */
.hintergrund-leiste { margin: 0 0 8px; padding: 6px 12px; border: 1px dashed var(--text-primary); background: var(--surface); color: var(--text-primary); display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.hintergrund-titel { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; }
.hintergrund-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.hintergrund-eintrag { background: transparent; border: 1px solid var(--text-secondary); color: var(--text-primary); padding: 2px 8px; cursor: pointer; border-radius: 0; display: inline-flex; gap: 8px; align-items: baseline; font-size: 12px; }
.hintergrund-id { font-family: var(--font-mono); font-size: 11px; }
.hintergrund-text { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hintergrund-meta { font-family: var(--font-mono); font-size: 10px; color: var(--text-secondary); }

/* ÜBERBLICK — Variante B (#4950). Normales Scrollen, flach, eckig. */
.ueberblick { padding: 10px 12px 24px; display: flex; flex-direction: column; gap: 14px; }
/* Geteilte Sicht (Alex 10.09.): der Überblick ist die obere Hälfte und scrollt in
   sich; darunter läuft der Verlauf weiter. Klebend, damit die Hälfte bleibt,
   während man unten liest. */
.ueberblick-oben { position: sticky; top: 0; z-index: 4; max-height: 50vh; overflow: auto; overscroll-behavior: contain; background: color-mix(in srgb, var(--surface) 72%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5); margin: 0 0 10px; border-bottom: 1px solid var(--border); box-shadow: 0 14px 24px -18px rgba(0, 0, 0, 0.45); }
/* Untere Kante (Alex 15.09.): eine helle Linie wie unter dem Kopf plus ein kurzer, weicher
   Schatten, damit sich das Feld vom Verlauf abhebt — kein Balken (Bild 125019). */
/* Glas wie Kopf und Fußleiste (Alex 13.09., Bild 125019): der schwebende Überblick ist ein
   Overlay über dem Verlauf, kein zweiter Hintergrund — und ohne den dicken Balken unten;
   Balken kennzeichnen bei uns vertikal, ein Overlay braucht keinen. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .ueberblick-oben { background: var(--surface); } }
.ueberblick-oben .ueberblick { padding-bottom: 12px; }
@media (max-width: 700px) { .ueberblick-oben { max-height: 45vh; } }
.ub-kopf { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary); }
/* Die eine menschliche Kopfzeile (Alex über ChatGPT 13.09.): kein Zählwerk, ein Satz. */
.ub-kopf-mensch { font-size: 16px; font-weight: 700; line-height: 1.3; }
.ub-weitere > summary { cursor: pointer; list-style: none; }
.ub-weitere > summary::-webkit-details-marker { display: none; }
.ub-weitere > summary::before { content: '▸ '; }
.ub-weitere[open] > summary::before { content: '▾ '; }
.ub-weitere[open] { gap: 14px; }
.ub-block { display: flex; flex-direction: column; gap: 6px; }
.ub-offen { border: 2px solid var(--text-primary); background: var(--surface); padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.ub-offen-leise { border-width: 1px; border-color: var(--border-strong); margin-top: 4px; }
.ub-frage { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.35; }
.ub-zusammenhang { display: flex; flex-direction: column; gap: 4px; }
.ub-meta { font-family: var(--font-mono); font-size: 10px; color: var(--text-secondary); }
.ub-beleg { margin: 0; font-size: 13px; line-height: 1.4; color: var(--text-secondary); }
.ub-fehlt { margin: 0; font-size: 13px; line-height: 1.4; color: var(--text-secondary); font-style: italic; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ub-link { align-self: flex-start; background: transparent; border: 0; padding: 0; font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary); text-decoration: underline; cursor: pointer; }
.ub-zeilen { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ub-zeile { width: 100%; text-align: left; display: grid; grid-template-columns: 1fr auto; grid-template-areas: 'titel seit' 'text seit'; gap: 1px 10px; align-items: center; background: transparent; border: 1px solid var(--border-strong); color: var(--text-primary); padding: 7px 10px; border-radius: 0; cursor: pointer; font: inherit; }
.ub-zeile.is-offen { border-color: var(--text-primary); }
.ub-zeile-still { cursor: default; opacity: 0.75; }
.ub-zeile-titel { grid-area: titel; font-weight: 600; font-size: 14px; }
.ub-zeile-text { grid-area: text; font-size: 12px; color: var(--text-secondary); }
.ub-zeile .ub-meta { grid-area: seit; }
.ub-hinweis, .ub-leer { margin: 0; font-size: 13px; color: var(--text-secondary); }
.ub-aeltere summary { cursor: pointer; }
.ub-fuss { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 6px; border-top: 1px solid var(--border-strong); }

/* Datei-Chip (kein Bild): klickbar, mit Name und Typ — Alex 09.09. (Bild 123878).
   Symbol nach Sorte, Name + „Typ · Grösse" in zwei Zeilen (Alex 25.09., Bild
   126251). `.user-media-row > a` (Bildkacheln: block, line-height 0) war
   spezifischer und stauchte den Chip — hier ausdrücklich zurückgesetzt. */
.user-media-row > a.user-media-file,
.user-media-file {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: auto;
  min-height: 44px;
  max-width: 260px;
  padding: 7px 12px 7px 10px;
  line-height: 1.25;
  text-decoration: none;
  cursor: pointer;
  border-style: solid;
  border-radius: 0;
  white-space: normal;
}
.user-media-file:hover { border-color: var(--text-secondary); }
.user-media-file-text { display: flex; flex-direction: column; min-width: 0; }
.user-media-file-name {
  font-size: 12px;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-media-file-meta { font-size: 11px; color: var(--text-secondary); }


/* ── Prosa-Vergleich (Debug, Alex 15.09., Bild 125206) ───────────────────────
   Neben jedem Prosa-Absatz die Abschnitte ⟨n⟩, aus denen Luna ihn erzählt hat:
   links die Prosa, rechts die Basis in Mono. Der Schalter sitzt am Behälter,
   die Absatz-Kästen bleiben unverändert (Wächter kleinhirnLinse.test.ts). */
.prosa-vergleich .spanne-prosa-absatz { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 14px; align-items: start; }
.prosa-vergleich .spanne-kurzfassung .spanne-kurzfassung-etikett { grid-column: 1 / -1; }
.prosa-basis { font-family: var(--font-mono); font-size: 11px; line-height: 1.45; color: var(--text-secondary); border-left: 1px solid var(--border); padding-left: 10px; max-height: 44vh; overflow: auto; overscroll-behavior: contain; min-width: 0; }
.prosa-basis-kopf { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 4px; }
.prosa-basis-zeile { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0 0 6px; }
.prosa-basis-n { color: var(--text-muted); }
.prosa-basis-hinweis { font-style: italic; color: var(--text-muted); }
@media (max-width: 700px) {
  .prosa-vergleich .spanne-prosa-absatz { grid-template-columns: minmax(0, 1fr); }
  .prosa-basis { border-left: none; border-top: 1px solid var(--border); padding: 6px 0 0; max-height: 30vh; }
}

/* Codex-Rückfrage (Alex, Bilder 125211/125212; Cloud 15.09.): Leiste am Agenten
   statt Text im Verlauf. Eckig, flach, Mono — wie die Hintergrund-Leiste. */
/* „FRAGEN" (Alex 21.09.): die Rückfrage liegt eingeklappt hinter diesem Knopf.
   Eckig, Mono-Großbuchstaben wie die übrigen kleinen Schalter. Wartet Codex
   wirklich (Turn zu Ende), trägt der Knopf den Warnton — eingeklappt heißt nicht
   übersehen. */
.codex-fragen-knopf { display: inline-flex; align-items: center; margin: 0 32px 6px; padding: 4px 12px; min-height: 30px; border: 1px solid var(--text-primary); border-radius: 0; background: var(--surface); color: var(--text-primary); font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; cursor: pointer; }
.codex-fragen-knopf:hover, .codex-fragen-knopf.offen { background: var(--chip-active-bg); color: var(--white); }
.codex-fragen-knopf.wartet { border-color: var(--color-warning); color: var(--color-warning); background: var(--color-warning-bg, var(--surface)); }
.codex-fragen-knopf.wartet:hover, .codex-fragen-knopf.wartet.offen { background: var(--color-warning); color: var(--white); }
@media (max-width: 768px), (max-height: 500px) { .codex-fragen-knopf { margin: 0 16px 6px; min-height: 36px; } }
.codex-rueckfrage { margin: 0 32px 6px; padding: 6px 12px; border: 1px solid var(--text-primary); background: var(--surface); color: var(--text-primary); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; }
@media (max-width: 768px), (max-height: 500px) { .codex-rueckfrage { margin: 0 16px 6px; } }
/* Die Frage selbst in Leseschrift, nicht als Etikett; Optionen als dunkle Knöpfe
   (Codex' Vorschläge, wörtlich), das Textfeld für „Other". Alles eckig. */
.codex-rueckfrage-titel { flex-basis: 100%; font-family: var(--font-body); font-size: 13px; line-height: 1.4; text-transform: none; letter-spacing: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.codex-rueckfrage-antwort { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.codex-rueckfrage-option { border: 1px solid var(--text-primary); background: var(--text-primary); color: var(--surface); font-family: var(--font-mono); font-size: 11px; text-transform: none; letter-spacing: 0.02em; padding: 3px 10px; cursor: pointer; border-radius: 0; max-width: 100%; overflow-wrap: anywhere; text-align: left; }
.codex-rueckfrage-option:disabled { opacity: 0.5; cursor: wait; }
.codex-rueckfrage-frei { display: flex; flex: 1 1 220px; min-width: 0; align-items: center; gap: 0; }
.codex-rueckfrage-frei input { flex: 1 1 auto; min-width: 0; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-primary); font-family: var(--font-mono); font-size: 11px; padding: 3px 8px; border-radius: 0; text-transform: none; letter-spacing: 0; }
.codex-rueckfrage-frei input:focus { outline: none; border-color: var(--text-primary); }
.codex-rueckfrage-frei .sending-hintergrund { margin-left: 0; border-left: 0; padding: 3px 10px; font-size: 11px; }

/* CLI-eigene Meldungen (Monitor, Hintergrund-Job …) — eine leise Zeile statt
   eines Eingabe-Blocks (Alex/CAD 23.09., Cloud 3408636/03cb2bd). */
.system-zeile {
  margin: 4px 0;
  padding: 2px 0 2px 10px;
  border-left: 2px solid var(--border);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.5;
}
.system-zeile > summary { cursor: pointer; list-style: none; }
.system-zeile > summary::-webkit-details-marker { display: none; }
.system-zeile[open] > summary { color: var(--text-primary); }
.system-zeile-roh {
  margin: 4px 0 0;
  padding: 6px 8px;
  max-height: 240px;
  overflow: auto;
  background: var(--bg-inset);
  font-size: 10.5px;
  white-space: pre-wrap;
  word-break: break-word;
}
/* Datei-Symbol nach Sorte (Alex 25.09.). Farbe aus den --datei-*-Tokens;
   ohne Sorte bleibt das Blatt in der Textfarbe. */
.datei-symbol {
  --sorte-farbe: var(--text-secondary);
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  color: var(--sorte-farbe);
  line-height: 1;
}
.datei-symbol.sorte-word { --sorte-farbe: var(--datei-word); }
.datei-symbol.sorte-excel { --sorte-farbe: var(--datei-excel); }
.datei-symbol.sorte-powerpoint { --sorte-farbe: var(--datei-powerpoint); }
.datei-symbol.sorte-pdf { --sorte-farbe: var(--datei-pdf); }

/* Der Buchstabe sitzt als kleine Marke unten rechts am Blatt: weiss auf der
   Sortenfarbe, wie man die Programme kennt. */
.datei-symbol-marke {
  position: absolute;
  right: -5px;
  bottom: -3px;
  padding: 0 2px;
  font-family: var(--font-body);
  font-size: 8px;
  font-weight: 700;
  line-height: 10px;
  letter-spacing: 0;
  color: var(--white);
  background: var(--sorte-farbe);
  border-radius: 1px;
}
.iacp-event-card {
  position: relative;
  margin: 6px 0;
  padding: 10px 14px;
  background: var(--bg-light);
  border-left: 3px solid var(--accent);
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-primary);
}

.iacp-event-card.requires-response {
  border-top: 2px solid var(--color-error);
}

.iacp-event-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.iacp-event-icon {
  display: inline-flex;
  color: var(--accent);
}

.iacp-event-sender {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11px;
}

.iacp-event-badge {
  font-family: var(--font-mono);
  font-size: 9px;
  padding: 1px 6px;
  background: var(--accent);
  color: var(--white);
  border-radius: 3px;
  letter-spacing: 0.08em;
}

.iacp-event-spacer { flex: 1; }

.iacp-event-needs-response {
  font-family: var(--font-mono);
  font-size: 9px;
  padding: 2px 6px;
  background: var(--color-error);
  color: var(--white);
  border-radius: 3px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.iacp-event-time {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
}

.iacp-event-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.iacp-author-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
}

.iacp-author-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-muted);
}

.iacp-author-chip.prefix-agent .iacp-author-dot { background: var(--color-info); }
.iacp-author-chip.prefix-user .iacp-author-dot { background: var(--color-success); }
.iacp-author-chip.prefix-system .iacp-author-dot { background: var(--border-strong); }
.iacp-author-chip.prefix-human .iacp-author-dot { background: var(--color-warning); }

.iacp-trigger-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--bg-inset);
  color: var(--text-muted);
  border: 1px solid var(--border);
}

.iacp-trigger-badge.trigger-agent_write { background: rgba(255, 158, 100, 0.12); color: #c25a1d; border-color: rgba(255, 158, 100, 0.4); }
.iacp-trigger-badge.trigger-user_write  { background: rgba(122, 162, 247, 0.14); color: #2c5ab8; border-color: rgba(122, 162, 247, 0.4); }
.iacp-trigger-badge.trigger-newline_pause { background: rgba(245, 211, 110, 0.18); color: #8c6d10; border-color: rgba(245, 211, 110, 0.5); }

.iacp-event-body {
  color: var(--text-primary);
  white-space: pre-wrap;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.iacp-event-body.expanded {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}

.iacp-event-more {
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 11px;
  padding: 2px 0 0;
  text-decoration: underline;
}

.iacp-event-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
}

.iacp-event-open {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}

.iacp-event-open:hover { text-decoration: underline; }

/* ── Section-aware extensions (Content IACP f8203b07) ──────────────
 * IacpEventCard now routes its body render by section_role:
 *   start  → SectionOpener with type-badge + attrs chips
 *   content→ plain markdown
 *   reply  → ReplyBlock with author+timestamp from XML attrs
 *   end    → collapsed boundary line (no body)
 * Header decoration adds a small section-type chip + the role tag. */

/* Type chips — share style, differentiate by colour */
.iacp-section-type {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 3px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: var(--bg-inset);
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
}
.iacp-section-type.type-product    { background: rgba(22,163,74,0.10);  color: var(--color-success); border-color: rgba(22,163,74,0.3); }
.iacp-section-type.type-question   { background: rgba(37,99,235,0.10);  color: var(--color-info);    border-color: rgba(37,99,235,0.3); }
.iacp-section-type.type-task       { background: rgba(217,119,6,0.10);  color: var(--color-warning); border-color: rgba(217,119,6,0.3); }
.iacp-section-type.type-annotation { background: rgba(107,33,168,0.10); color: #6b21a8;              border-color: rgba(107,33,168,0.3); }
.iacp-section-type.type-vote       { background: rgba(196,30,58,0.10);  color: var(--accent);        border-color: rgba(196,30,58,0.3); }

.iacp-section-role {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  padding: 1px 5px;
  border-radius: 2px;
  text-transform: lowercase;
  background: var(--bg-inset);
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.iacp-section-role.role-start  { color: var(--color-success); border-color: rgba(22,163,74,0.3); }
.iacp-section-role.role-reply  { color: #6b21a8; border-color: rgba(107,33,168,0.3); }
.iacp-section-role.role-end    { color: var(--text-muted); }

.iacp-your-role {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 2px;
  background: var(--accent-bg);
  color: var(--accent);
  border: 1px solid var(--accent-bg-strong);
  text-transform: lowercase;
}

/* targets / primary_recipient row */
.iacp-targets-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: 10px;
}
.iacp-target-chip {
  padding: 1px 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 2px;
  color: var(--text-muted);
}
.iacp-target-chip.primary {
  background: var(--accent-bg);
  border-color: var(--accent-bg-strong);
  color: var(--accent);
  font-weight: 600;
}

/* Reply block — visually distinct via background + the lila ↩ icon
 * in the head. NO inner left-border because the outer card already
 * has one and two parallel vertical lines read as visual noise
 * (Alex feedback screenshot 110113). */
.iacp-reply-block {
  margin: 4px 0 6px;
  padding: 6px 10px;
  background: var(--surface);
  border-radius: 3px;
}

.iacp-reply-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
}
.iacp-reply-icon { color: var(--accent); }
.iacp-reply-by   { font-weight: 600; color: var(--text-primary); }
.iacp-reply-at   { color: var(--text-muted); }

.iacp-reply-body {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-primary);
  /* Collapsed: 4-line clamp via plain-block render; markdown-aware
   * clamp uses max-height to avoid breaking nested block layout. */
  max-height: 6.2em;
  overflow: hidden;
}
.iacp-reply-body.expanded { max-height: none; overflow: visible; }

/* Section opener — shows the attrs of a <section …> opener at start
 * of a new section. */
.iacp-section-opener {
  margin: 4px 0 6px;
}
.iacp-section-opener-head {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-bottom: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
}
.iacp-section-id {
  background: var(--bg-inset);
  border: 1px solid var(--border);
  padding: 1px 5px;
  border-radius: 2px;
  font-size: 10px;
}
.iacp-section-status {
  padding: 1px 5px;
  border-radius: 2px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  background: var(--bg-inset);
  border: 1px solid var(--border);
}
.iacp-section-status.status-open       { color: var(--color-info); border-color: rgba(37,99,235,0.3); }
.iacp-section-status.status-in_progress{ color: var(--color-warning); border-color: rgba(217,119,6,0.3); }
.iacp-section-status.status-done       { color: var(--color-success); border-color: rgba(22,163,74,0.3); }
.iacp-section-status.status-blocked    { color: var(--color-error); border-color: rgba(220,38,38,0.3); }

.iacp-section-initiator {
  font-style: italic;
}

/* Markdown body inside the card — same prose styles as PromptInspector
 * but at a slightly smaller scale because the card is constrained. */
.iacp-event-body-md {
  /* Override the plain-text clamp; markdown gets max-height instead so
   * block formatting (lists, headings, code) doesn't break mid-line. */
  display: block;
  max-height: 6.2em;
  -webkit-line-clamp: unset;
  overflow: hidden;
  white-space: normal;
}
.iacp-event-body-md.expanded { max-height: none; overflow: visible; }

.iacp-event-body-md > :first-child { margin-top: 0; }
.iacp-event-body-md > :last-child  { margin-bottom: 0; }

.iacp-event-body-md h1,
.iacp-event-body-md h2,
.iacp-event-body-md h3,
.iacp-event-body-md h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  margin: 10px 0 4px;
  line-height: 1.25;
  color: var(--text-primary);
}
.iacp-event-body-md h1 { font-size: 15px; }
.iacp-event-body-md h2 { font-size: 14px; }
.iacp-event-body-md h3 { font-size: 13px; }
.iacp-event-body-md h4 { font-size: 12px; color: var(--text-muted); }

.iacp-event-body-md p { margin: 0 0 6px; }
.iacp-event-body-md ul,
.iacp-event-body-md ol { margin: 0 0 6px; padding-left: 18px; }
.iacp-event-body-md li { margin: 1px 0; }
.iacp-event-body-md code {
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  padding: 0 4px;
  border-radius: 2px;
}
.iacp-event-body-md pre {
  margin: 6px 0;
  padding: 8px 10px;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 11px;
}
.iacp-event-body-md pre code { background: none; border: none; padding: 0; }
.iacp-event-body-md a { color: var(--accent); text-decoration: none; }
.iacp-event-body-md a:hover { text-decoration: underline; }

/* Reply body mirrors the markdown prose so its nested replies look the
 * same as the parent card's body. */
.iacp-reply-body > :first-child { margin-top: 0; }
.iacp-reply-body > :last-child  { margin-bottom: 0; }
.iacp-reply-body p              { margin: 0 0 4px; }
.iacp-reply-body h1,
.iacp-reply-body h2,
.iacp-reply-body h3,
.iacp-reply-body h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  margin: 8px 0 4px;
  font-size: 13px;
  color: var(--text-primary);
}
.iacp-reply-body code {
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  padding: 0 4px;
  border-radius: 2px;
}

/* End-marker — minimal, full-width separator */
.iacp-event-card-end {
  padding: 4px 14px;
  background: transparent;
  border-left: 3px solid var(--border);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  text-align: center;
}
.iacp-section-end {
  display: inline-block;
}

/* Kopf-Änderung ohne Fliesstext (Status, Freigaben, Eigentum). Vorher blieb
   die Karte hier leer — sichtbar war nur, DASS etwas passiert ist. */
.iacp-attr-change {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 6px 0 2px;
  font-size: 11px;
}

.iacp-attr-change-lead {
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.iacp-attr-chip {
  padding: 1px 6px;
  border: 1px solid var(--border);
  color: var(--text-muted);
}

.iacp-attr-chip strong { color: var(--text-primary); font-weight: 600; }
/* Arcturian-Zustellung. Eigene Kontur, damit sie sich von normalem IACP
   unterscheidet — sie kommt im Auftrag eines Menschen, nicht von einem Agenten
   aus eigenem Antrieb. Flach und eckig wie der Rest der Oberfläche. */

.arcmsg {
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent, #3b82f6);
  margin: 8px 0;
  background: var(--surface);
}

.arcmsg-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.arcmsg-persona { color: var(--accent, #3b82f6); font-weight: 600; }

.arcmsg-behalf {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-muted);
  text-transform: none;
  letter-spacing: 0;
  font-size: 11px;
}

.arcmsg-channel {
  margin-left: auto;
  padding: 1px 5px;
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 9px;
}

/* Lesegrösse und Fliesstext — das ist der Teil, für den die Nachricht da ist. */
.arcmsg-body {
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

.arcmsg-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  padding: 5px 12px;
  border: 0;
  border-top: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  text-align: left;
}

.arcmsg-toggle:hover { color: var(--text-primary); }
.arcmsg-toggle svg { transition: transform 120ms linear; }
.arcmsg-toggle.open svg { transform: rotate(90deg); }

.arcmsg-fields {
  margin: 0;
  padding: 6px 12px 10px;
  border-top: 1px solid var(--border);
  display: grid;
  grid-template-columns: minmax(90px, auto) 1fr;
  gap: 3px 10px;
  font-family: var(--font-mono);
  font-size: 10px;
}

.arcmsg-field { display: contents; }
.arcmsg-field dt { color: var(--text-muted); }
.arcmsg-field dd { margin: 0; word-break: break-all; }

/* Der Antwortweg ist lang und für Menschen uninteressant — gedämpft. */
.arcmsg-field-wide dd { color: var(--text-muted); font-size: 9px; }

@media (max-width: 560px) {
  .arcmsg-fields { grid-template-columns: 1fr; gap: 1px; }
  .arcmsg-field dt { margin-top: 4px; }
}
.conversation-timeline-event-icon {
  position: relative;
  width: 1em;
  height: 1em;
  display: inline-grid;
  place-items: center;
  line-height: 1;
}

.conversation-timeline-event-icon > svg {
  width: 100%;
  height: 100%;
}

.conversation-timeline-event-direction {
  position: absolute;
  z-index: 2;
  top: 50%;
  width: 1.25em;
  height: .82em;
  display: grid;
  place-items: center;
  color: var(--accent);
  filter: drop-shadow(0 0 2px color-mix(in srgb, var(--accent) 55%, transparent));
  pointer-events: none;
}

.conversation-timeline-event-direction > svg {
  width: 100%;
  height: 100%;
  stroke-width: 2.4;
}

/* In the vertical timeline the content lives to the right of the rail:
 * incoming transport points into that block, outgoing transport away from it. */
.conversation-timeline-event-direction.frame-rail-content.is-in {
  right: -1.42em;
  left: auto;
  transform: translateY(-50%);
}

.conversation-timeline-event-direction.frame-rail-content.is-out {
  right: auto;
  left: -1.42em;
  transform: translateY(-50%);
}

/* In horizontal Raumzeit the card is above its rail anchor. Incoming traffic
 * therefore points upward into the card; outgoing traffic points down and
 * away. This is presentation geometry only — transport semantics still come
 * exclusively from the canonical link direction. */
.conversation-timeline-event-direction.frame-rail-content-above.is-in {
  top: -1.28em;
  left: 50%;
  transform: translateX(-50%);
}

.conversation-timeline-event-direction.frame-rail-content-above.is-out {
  top: auto;
  bottom: -1.28em;
  left: 50%;
  transform: translateX(-50%);
}

.conversation-timeline-event-direction.frame-transport.is-in {
  right: auto;
  left: -1.42em;
  transform: translateY(-50%);
}

.conversation-timeline-event-direction.frame-transport.is-out {
  right: -1.42em;
  left: auto;
  transform: translateY(-50%);
}

/* An opened multi-lane bridge has real from/to coordinates. Its badge sits
 * in front of the endpoint icon and follows that exact vector, so stacked
 * horizontal lanes use up/down while side-by-side vertical lanes use
 * left/right. The transport parser still decides whether a badge exists. */
.conversation-timeline-event-direction.frame-bridge-vector {
  top: 50%;
  left: 50%;
  transform:
    translate(-50%, -50%)
    rotate(var(--timeline-direction-angle, 0deg))
    translateX(1.42em);
}

/* Zeitansicht (David #47, Bild 125000): der Knoten ist ein 36-px-Rahmen mit Rand, das
 * Symbol darin 16 px. Relativ zum Symbol gesetzt (−1,42 em) landete der Pfeil genau auf
 * dem rechten Rand. Im Knoten sitzt er deshalb außerhalb des Rahmens, mit Abstand —
 * links wie rechts. Der Knoten hat overflow: visible, nichts wird beschnitten. */
.conversation-timeline-node .conversation-timeline-event-direction.frame-rail-content.is-in { right: auto; left: calc(100% + 1em); }
.conversation-timeline-node .conversation-timeline-event-direction.frame-rail-content.is-out { left: auto; right: calc(100% + 1em); }
.conversation-timeline {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  color: var(--text-primary);
  background: var(--surface);
}

.conversation-timeline-viewport {
  position: absolute;
  top: calc(var(--agent-hdr-h, 72px) + 4px);
  right: 0;
  bottom: var(--agent-ftr-h, 76px);
  left: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* `auto` in JS must really snap; smooth is requested only for live growth
     or an explicit Aktuell click, never inherited during initialization. */
  scroll-behavior: auto;
  scrollbar-width: thin;
}

.conversation-timeline-toolbar {
  position: absolute;
  right: 12px;
  bottom: calc(var(--agent-ftr-h, 76px) + 12px);
  z-index: 12;
  display: flex;
  align-items: stretch;
  max-width: calc(100% - 24px);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  box-shadow: 0 12px 38px color-mix(in srgb, var(--text-primary) 12%, transparent);
}

.conversation-timeline-toolbar button {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 5px 11px;
  border: 0;
  border-left: 1px solid var(--border);
  border-radius: 0;
  color: var(--text-muted);
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .05em;
  cursor: pointer;
}

.conversation-timeline-toolbar button:hover {
  color: var(--text-primary);
  background: var(--hover-bg);
}

.conversation-timeline-toolbar button.active {
  color: var(--white);
  background: var(--chip-active-bg);
}

.conversation-timeline-toolbar button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.conversation-timeline-stream {
  width: 100%;
  min-height: 100%;
  padding: 26px 22px 74px;
}

/* All inputs stay on the selected agent's chronological rail. Received
   collaboration must not reserve empty columns beside the main dialog. */
.conversation-timeline-main-track {
  min-width: 0;
}

.conversation-timeline-response-context {
  display: block;
  padding: 4px 0;
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.conversation-timeline .iacp-event-header {
  flex-wrap: wrap;
}

.conversation-timeline .iacp-event-postref {
  min-width: 0;
  overflow-wrap: anywhere;
}

.conversation-timeline-toolbar {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.conversation-timeline-episode + .conversation-timeline-episode {
  margin-top: 34px;
}

.conversation-timeline-episode-head {
  margin-bottom: 14px;
  padding-left: 48px;
}

.conversation-timeline-episode-head span {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
}

.conversation-timeline-events {
  --timeline-development-icon-size: calc(36px * .65);
  --timeline-development-gap: 3px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--timeline-block-gap, 6px);
  padding-left: 48px;
}

.conversation-timeline-events::before {
  content: '';
  position: absolute;
  top: 17px;
  bottom: -34px;
  left: 17px;
  width: 2px;
  background: var(--border-strong);
}

/* Alex 22.09.: „der Abstand zwischen den Absätzen ist mir zu groß — das ist so
   wie drei- oder vierfacher Zeilenabstand." Gemessen: 47–66px zwischen den
   Textzeilen bei 22px Zeilenhöhe. Er entsteht aus drei Teilen — Lücke zwischen
   den Blöcken plus Innenabstand oben und unten. Der OBERE bleibt bei 12px: Die
   Symbole der Zeitleiste sind daran ausgerichtet (feste Werte in der TSX). */
.conversation-timeline-block {
  position: relative;
  min-width: 0;
  padding: 12px 14px var(--timeline-block-pad-bottom, 6px);
  border: 0;
  border-radius: 0;
  background: var(--bg-light);
}

/* Innerhalb eines Blocks zählt dasselbe: Der letzte Absatz braucht keinen Rand
   nach unten, und ein Codeblock muss nicht auf beiden Seiten 10px Luft haben —
   der Block hat schon seinen eigenen Innenabstand. */
.conversation-timeline-block > *:last-child,
.conversation-timeline-block .entry-content > *:last-child,
.conversation-timeline-block .rich-md > *:last-child { margin-bottom: 0; }

.conversation-timeline-block .v2-codeblock { margin: 6px 0; }

.conversation-timeline-event-cluster {
  /* 50 + 5: die Schrittzahl am ersten Symbol ragt 5px nach oben (top: -5px)
     und lag sonst auf der Uhrzeit des Knotens darüber (Alex 23.09.). */
  --timeline-development-top: 55px;
  position: relative;
  min-width: 0;
}

.conversation-timeline-event-cluster.has-development-run {
  min-height: var(--timeline-development-min-height, 0);
}

.conversation-timeline-display-cluster {
  position: relative;
  min-width: 0;
}

.conversation-timeline-display-cluster.live-arrival::before {
  content: '';
  position: absolute;
  z-index: 3;
  top: calc(-14px - var(--timeline-elapsed-gap, 0px));
  bottom: calc(100% - 18px);
  left: -31px;
  width: 2px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: 50% 0;
  animation: conversation-timeline-rail-grow .3s ease-out forwards;
}

.conversation-timeline-display-cluster.live-arrival > .conversation-timeline-event-cluster,
.conversation-timeline-display-cluster.live-arrival > [class~="conversation-timeline-development-run"] {
  opacity: 0;
  animation: conversation-timeline-live-reveal .32s .28s ease-out forwards;
}

.conversation-timeline-scale {
  min-width: 190px;
  display: grid;
  align-content: center;
  gap: 2px;
  padding: 4px 8px;
  border-left: 1px solid var(--border);
  color: var(--text-muted);
  background: var(--surface);
  font: 700 8px/1 var(--font-mono);
  text-align: center;
  white-space: nowrap;
}

.conversation-timeline-scale input { width: 174px; accent-color: var(--accent); }

.conversation-timeline-events-absolute {
  position: relative;
  display: block;
  min-height: 80px;
}

.conversation-timeline-display-cluster.spacing-elapsed-absolute {
  position: absolute;
  right: 0;
  left: 48px;
  margin: 0;
}

/* Absolute cards use the content start, not the rail's outside padding edge.
   Otherwise their negative-offset node/time would be clipped at the viewport. */
@media (max-width: 700px) {
  .conversation-timeline-display-cluster.spacing-elapsed-absolute { left: 38px; }
}

.conversation-timeline-display-cluster.spacing-elapsed-absolute .conversation-timeline-node,
.conversation-timeline-display-cluster.spacing-elapsed-absolute .conversation-timeline-node-time,
.conversation-timeline-display-cluster.spacing-elapsed-absolute > .conversation-timeline-development-run,
.conversation-timeline-display-cluster.spacing-elapsed-absolute .conversation-timeline-development-run.attached-to-event {
  transform: translateY(var(--timeline-absolute-anchor-shift, 0));
}

.conversation-timeline-display-cluster.spacing-elapsed-absolute.collision-displaced::after {
  content: '';
  position: absolute;
  z-index: 1;
  top: var(--timeline-absolute-anchor-shift, 0);
  left: -31px;
  width: 31px;
  height: var(--timeline-absolute-connector, 0);
  border-left: 1px solid var(--border-strong);
  border-bottom: 1px solid var(--border-strong);
  pointer-events: none;
}

.conversation-timeline-absolute-episode {
  position: absolute;
  z-index: 2;
  left: 8px;
  color: var(--text-muted);
  font: 700 7px/1 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  pointer-events: none;
}

.conversation-timeline-elapsed-label {
  position: absolute;
  z-index: 4;
  top: var(--timeline-elapsed-label-top, -14px);
  left: -48px;
  width: 36px;
  padding: 2px 1px;
  color: var(--text-muted);
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: 7px;
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
}

.conversation-timeline-elapsed-label.capped {
  border-top: 1px solid var(--accent);
  border-bottom: 1px solid var(--accent);
}

.conversation-timeline-elapsed-label.unknown {
  color: var(--color-warning);
}

.conversation-timeline-block.kind-user { background: color-mix(in srgb, var(--text-primary) 7%, transparent); }
.conversation-timeline-block.kind-agent { background: var(--surface); }
.conversation-timeline-block.kind-thinking { background: var(--color-warning-bg); }
.conversation-timeline-block.kind-iacp,
.conversation-timeline-block.has-iacp-event {
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}
.conversation-timeline-block.has-iacp-event .iacp-event-card {
  margin: 0;
  background: transparent;
}
.conversation-timeline-block.kind-issue {
  background: color-mix(in srgb, var(--color-info) 7%, transparent);
}

.conversation-timeline-node {
  position: absolute;
  top: 0;
  left: -48px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border-strong);
  border-radius: 0;
  color: var(--text-primary);
  background: var(--surface);
}

button.conversation-timeline-node-link {
  padding: 0;
  overflow: visible;
  font: inherit;
  cursor: pointer;
}

button.conversation-timeline-node-link:hover,
button.conversation-timeline-node-link:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.conversation-timeline-node img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.conversation-timeline-block.kind-user .conversation-timeline-node { color: var(--text-primary); border-color: var(--text-primary); }
.conversation-timeline-block.kind-thinking .conversation-timeline-node,
.conversation-timeline-block.kind-code .conversation-timeline-node { color: var(--color-warning); }
.conversation-timeline-block.kind-artifact .conversation-timeline-node { color: var(--color-success); }
.conversation-timeline-block.kind-iacp .conversation-timeline-node { color: var(--accent); border-color: var(--accent); }
.conversation-timeline-block.kind-issue .conversation-timeline-node { color: var(--color-info); border-color: var(--color-info); }
.conversation-timeline-block.kind-content .conversation-timeline-node { color: var(--color-success); border-color: var(--color-success); }
.conversation-timeline-block.has-iacp-event .conversation-timeline-node { color: var(--accent); border-color: var(--accent); }

.conversation-timeline-node-time {
  position: absolute;
  top: 39px;
  left: -52px;
  z-index: 1;
  width: 44px;
  padding: 2px 0;
  color: var(--text-muted);
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: 8px;
  line-height: 1;
  text-align: center;
}

.conversation-timeline-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: var(--timeline-block-head-gap, 5px);
}

.conversation-timeline-block-head strong {
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.conversation-timeline-block-head time {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 9px;
}

.conversation-timeline-block-title {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.conversation-timeline-block-title small {
  flex: 0 0 auto;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.conversation-timeline-block-title strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conversation-timeline-development-run {
  position: relative;
  z-index: 3;
  height: 0;
  min-width: 0;
  min-height: 0;
  margin-block: -7px;
}

.conversation-timeline-development-icons {
  --timeline-development-glyph-size: calc(16px * .65);
  position: absolute;
  top: auto;
  bottom: 0;
  left: -48px;
  z-index: 2;
  width: 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--timeline-development-gap);
  transform-origin: 50% 100%;
}

.conversation-timeline-event-cluster > .conversation-timeline-development-run.attached-to-event {
  position: absolute;
  inset: 0;
  margin: 0;
  pointer-events: none;
}

.conversation-timeline-event-cluster > .conversation-timeline-development-run.attached-to-event
  .conversation-timeline-development-icons {
  top: var(--timeline-development-top);
  bottom: auto;
  transform-origin: 50% 0;
  pointer-events: auto;
}

/* FAELLT DAS BOT-ZEICHEN WEG, RUECKT DIE SCHIENE NACH.
   Sonst klafft dort ein 36px-Loch, wo vorher der Knoten sass — und ein Loch
   sieht aus wie ein fehlendes Zeichen, nicht wie ein weggelassenes.
   Tetris-Logik aus derselben Ansicht: die Zeichen steigen, bis sie anstehen;
   ohne Knoten stehen sie oben an. */
.conversation-timeline-event-cluster.node-implied .conversation-timeline-node-time {
  top: 0;
}

.conversation-timeline-event-cluster.node-implied {
  --timeline-development-top: 13px;
}

.conversation-timeline-event-cluster.node-implied > .conversation-timeline-development-run.attached-to-event
  .conversation-timeline-development-icons {
  top: var(--timeline-development-top);
}

.conversation-timeline-development-icons.tetris-arrival {
  animation: conversation-timeline-tetris-rise .52s cubic-bezier(.22, .72, .24, 1) both;
}

.conversation-timeline-development-icon {
  position: relative;
  width: var(--timeline-development-icon-size);
  height: var(--timeline-development-icon-size);
  flex: 0 0 var(--timeline-development-icon-size);
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 0;
  color: var(--text-primary);
  background: var(--surface);
  cursor: pointer;
}

.conversation-timeline-development-count {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 12px;
  height: 12px;
  padding: 0 2px;
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: 7px;
  font-weight: 700;
  line-height: 10px;
  text-align: center;
}

.conversation-timeline-development-icon-item {
  width: var(--timeline-development-icon-size);
  flex: 0 0 var(--timeline-development-icon-size);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.conversation-timeline-development-icon svg {
  width: var(--timeline-development-glyph-size);
  height: var(--timeline-development-glyph-size);
}

.conversation-timeline-development-icon-item time {
  width: 44px;
  padding: 2px 0;
  color: var(--text-muted);
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: 8px;
  line-height: 1;
  text-align: center;
}

.conversation-timeline-development-icon:hover,
.conversation-timeline-development-icon.active {
  color: var(--accent);
  background: var(--hover-bg);
}

.conversation-timeline-development-icon:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* Three geometries stay readable without text: execution = weighted square,
   change = diamond, structure = double frame. */
.conversation-timeline-development-icon.development-execution {
  border-bottom-width: 4px;
}

.conversation-timeline-development-icon.development-change {
  border-color: var(--color-warning);
  color: var(--color-warning);
  transform: rotate(45deg) scale(.78);
}

.conversation-timeline-development-icon.development-change > span {
  transform: rotate(-45deg) scale(1.2);
}

.conversation-timeline-development-icon.development-change
  .conversation-timeline-development-count {
  transform: rotate(-45deg) scale(1.28);
}

.conversation-timeline-development-icon.development-structure {
  border-width: 3px;
  border-style: double;
  color: var(--color-success);
}

.conversation-timeline-development-detail {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 5;
  min-width: 0;
  max-height: min(64vh, 560px);
  margin: 0;
  padding: 10px 11px 12px;
  overflow: auto;
  border: 1px solid var(--border);
  border-left: 0;
  border-radius: 0;
  background: var(--bg-light);
}

.conversation-timeline-event-cluster > .conversation-timeline-development-run.attached-to-event
  .conversation-timeline-development-detail {
  pointer-events: auto;
}

.conversation-timeline-development-detail-item + .conversation-timeline-development-detail-item {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.conversation-timeline-development-detail-item > strong {
  display: block;
  margin-bottom: 6px;
  font-size: 11px;
}

.conversation-timeline-development-close {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 0;
  color: var(--text-secondary);
  background: var(--surface);
  cursor: pointer;
}

.conversation-timeline-development-close:hover,
.conversation-timeline-development-close:focus-visible {
  color: var(--accent);
  border-color: var(--accent);
}

.conversation-timeline-block-text {
  margin: 0;
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.conversation-timeline-block-text > :first-child {
  margin-top: 0;
}

.conversation-timeline-block-text > :last-child {
  margin-bottom: 0;
}

.conversation-timeline-action-target.is-actionable {
  cursor: pointer;
}

.conversation-timeline-action-target.is-actionable:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 4px;
}

.conversation-timeline-block.actions-selected > .conversation-timeline-action-target {
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}

.conversation-timeline-selected-actions {
  margin-top: 8px;
}

.conversation-timeline-selected-actions .reply-actions {
  margin-top: 0;
}

.conversation-timeline-iacp-meta {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
  margin: 0 0 8px;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.conversation-timeline-iacp-relationship {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 5px;
  text-transform: none;
}

.conversation-timeline-iacp-meta code {
  overflow: hidden;
  color: var(--text-muted);
  font: inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conversation-timeline-block-code {
  max-height: 18rem;
  margin: 0;
  padding: 10px 11px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 0;
  color: var(--text-secondary);
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.conversation-timeline-empty {
  padding: 64px 18px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.conversation-timeline-now {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 22px 0 0 8px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.conversation-timeline-now-node {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border: 3px solid var(--surface);
  outline: 1px solid currentColor;
  border-radius: 0;
  color: var(--text-muted);
  background: var(--surface-elevated, var(--surface));
}

.conversation-timeline-now-copy {
  display: grid;
  gap: 2px;
  padding-top: 1px;
}

.conversation-timeline-now-copy strong,
.conversation-timeline-now-copy small {
  font: inherit;
}

.conversation-timeline-now-copy small {
  color: currentColor;
  opacity: .78;
}

.conversation-timeline-now.state-working,
.conversation-timeline-now.state-restarting { color: var(--accent); }

/* „JETZT · ARBEITET" IST DER STOPP (Alex 21.09.): das unterste Symbol mit der
   Animation soll man klicken koennen. Als Knopf soll es genauso aussehen wie
   vorher — nur die Knopf-Grundformen des Browsers weg. Beim Zeigen faerbt sich
   das Symbol in den Fehlerton: dort wird abgebrochen, nicht geblaettert. */
.conversation-timeline-now.is-stoppbar {
  position: relative;
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  cursor: pointer;
}
/* Trefferflaeche groesser als das 22-px-Symbol — am Telefon sonst kaum zu treffen. */
.conversation-timeline-now.is-stoppbar::before {
  content: '';
  position: absolute;
  inset: -11px -8px;
}
.conversation-timeline-now.is-stoppbar:hover .conversation-timeline-now-node,
.conversation-timeline-now.is-stoppbar:focus-visible .conversation-timeline-now-node {
  color: var(--color-error);
  outline-color: var(--color-error);
  background: var(--color-error-bg);
}
.conversation-timeline-now.is-stoppbar:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.conversation-timeline-now.is-stoppbar:active .conversation-timeline-now-node { transform: scale(0.9); }
.conversation-timeline-now.state-ready { color: var(--color-success); }
.conversation-timeline-now.state-waiting { color: var(--color-warning); }
.conversation-timeline-now.state-blocked,
.conversation-timeline-now.state-error { color: var(--color-error); }
.conversation-timeline-now.state-paused,
.conversation-timeline-now.state-offline,
.conversation-timeline-now.state-stopped,
.conversation-timeline-now.state-unknown { color: var(--text-muted); }

.conversation-timeline-now.state-working .conversation-timeline-now-node,
.conversation-timeline-now.state-restarting .conversation-timeline-now-node {
  animation: conversation-timeline-agent-active 1.4s ease-in-out infinite;
}

@keyframes conversation-timeline-arrive {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes conversation-timeline-agent-active {
  50% { transform: scale(1.12); }
}

@keyframes conversation-timeline-tetris-rise {
  from {
    opacity: 0;
    transform: translateY(min(46vh, 360px));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes conversation-timeline-rail-grow {
  to { transform: scaleY(1); }
}

@keyframes conversation-timeline-live-reveal {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Der Sprung-Knopf (geerbt aus AgentDetail.css, hier nicht nachgebaut)
   teilt sich die Hoehe mit der Werkzeugleiste (Aelter · Kompakt · Aktuell).
   Am Handy fuellt die Leiste fast die Breite und verdeckte ihn (Alex 07.09.,
   Bild 123670). Die Zeitansicht hebt ihn ueber die Leiste — allein ueber
   diese Variable, die die Grundregel einrechnet: Leisten-Hoehe (38px + Rand)
   + Luft. */
.conversation-timeline {
  --sprung-knopf-hub: 48px;
}

@media (max-width: 700px) {
  .conversation-timeline-viewport {
    top: calc(var(--agent-hdr-h, 72px) + 2px);
  }

  .conversation-timeline-toolbar {
    right: 6px;
    bottom: calc(var(--agent-ftr-h, 76px) + 6px);
    min-height: 36px;
  }

  .conversation-timeline-toolbar button {
    min-height: 34px;
    padding: 4px 9px;
  }

  .conversation-timeline {
    --sprung-knopf-hub: 42px;
  }

  .conversation-timeline-stream {
    padding: 18px 8px 70px;
  }

  .conversation-timeline-episode + .conversation-timeline-episode {
    margin-top: 26px;
  }

  .conversation-timeline-episode-head {
    margin-bottom: 10px;
    padding-left: 38px;
  }

  .conversation-timeline-events {
    --timeline-development-icon-size: calc(28px * .65);
    --timeline-development-gap: 2px;
    gap: 10px;
    padding-left: 38px;
  }

  .conversation-timeline-events::before {
    top: 14px;
    bottom: -26px;
    left: 13px;
    width: 1px;
  }

  .conversation-timeline-block {
    padding: 10px 10px 11px;
  }

  .conversation-timeline-node {
    left: -38px;
    width: 28px;
    height: 28px;
  }

  .conversation-timeline-elapsed-label {
    left: -38px;
    width: 28px;
    font-size: 6px;
  }

  .conversation-timeline-display-cluster.live-arrival::before {
    left: -25px;
    width: 1px;
  }

  .conversation-timeline-scale { min-width: 164px; padding-inline: 6px; }
  .conversation-timeline-scale input { width: 150px; }

  .conversation-timeline-node svg {
    width: 13px;
    height: 13px;
  }

  .conversation-timeline-node-time {
    top: 31px;
    left: -43px;
    width: 38px;
    font-size: 7px;
  }

  .conversation-timeline-block-head {
    margin-bottom: 6px;
  }

  .conversation-timeline-block-title {
    gap: 6px;
  }

  .conversation-timeline-block-title small {
    font-size: 7px;
  }

  .conversation-timeline-block-text {
    font-size: 13px;
    line-height: 1.48;
  }

  .conversation-timeline-block-code {
    max-height: 13rem;
    padding: 8px;
    font-size: 10px;
  }

  .conversation-timeline-development-icons {
    --timeline-development-glyph-size: calc(13px * .65);
    left: -38px;
    width: 28px;
    gap: var(--timeline-development-gap);
  }

  .conversation-timeline-development-run { margin-block: -5px; }

  .conversation-timeline-event-cluster > .conversation-timeline-development-run.attached-to-event
    .conversation-timeline-development-icons {
    top: var(--timeline-development-top);
  }

  .conversation-timeline-event-cluster {
    --timeline-development-top: 47px;
  }

  .conversation-timeline-event-cluster.has-development-run {
    min-height: var(--timeline-development-min-height-compact, 0);
  }

  .conversation-timeline-event-cluster.node-implied {
    --timeline-development-top: 11px;
  }

  .conversation-timeline-event-cluster.node-implied > .conversation-timeline-development-run.attached-to-event
    .conversation-timeline-development-icons {
    top: var(--timeline-development-top);
  }

  .conversation-timeline-development-icon {
    width: var(--timeline-development-icon-size);
    height: var(--timeline-development-icon-size);
    flex-basis: var(--timeline-development-icon-size);
  }

  .conversation-timeline-development-icon-item {
    width: var(--timeline-development-icon-size);
    flex-basis: var(--timeline-development-icon-size);
  }

  .conversation-timeline-development-icon-item time {
    width: 38px;
    font-size: 7px;
  }

  .conversation-timeline-development-icon svg {
    width: var(--timeline-development-glyph-size);
    height: var(--timeline-development-glyph-size);
  }

  .conversation-timeline-development-detail {
    padding: 8px;
  }

}

@media (prefers-reduced-motion: reduce) {
  .conversation-timeline-viewport { scroll-behavior: auto; }
  .conversation-timeline-block,
  .conversation-timeline-display-cluster.live-arrival::before,
  .conversation-timeline-display-cluster.live-arrival > .conversation-timeline-event-cluster,
  .conversation-timeline-display-cluster.live-arrival > [class~="conversation-timeline-development-run"],
  .conversation-timeline-development-icons.tetris-arrival,
  .conversation-timeline-now.state-working .conversation-timeline-now-node,
  .conversation-timeline-now.state-restarting .conversation-timeline-now-node { animation: none; }
  .conversation-timeline-display-cluster.live-arrival::before { transform: scaleY(1); }
  .conversation-timeline-display-cluster.live-arrival > .conversation-timeline-event-cluster,
  .conversation-timeline-display-cluster.live-arrival > [class~="conversation-timeline-development-run"] {
    opacity: 1;
    transform: none;
  }
}

/* ── Kleinhirn-Derivat (B2, Post 4907 p-d63443b5bce3) ─────────────────────
   Die Karte ersetzt in der Kleinhirn-Linse die Agenten-Cluster eines Turns;
   das Original bleibt über den Kopf-Knopf einen Tipp entfernt. „kein
   Derivat" ist ein ehrlicher Chip am Original, nie eine leere Karte. */
.derivat-karte {
  margin: 6px 0;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  padding: 10px 12px;
}

.derivat-karte-kopf {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.derivat-karte-marke {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--accent);
  font: 700 10px/1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.derivat-karte-kopf > small {
  color: var(--text-muted);
  font: 10px/1 var(--font-mono);
}

.derivat-karte-original {
  margin-left: auto;
  background: none;
  border: 1px solid var(--border);
  padding: 3px 8px;
  color: var(--text-muted);
  font: 11px/1 var(--font-body);
  cursor: pointer;
}

.derivat-karte-original:hover { color: var(--text-primary); border-color: var(--border-strong); }

/* An dich (owner_note, Post 4909): die Ebene, die zuerst gelesen wird —
   Ich→Du, nur Belegtes; darunter wird die neutrale Zusammenfassung leiser. */
.derivat-karte-an-dich {
  margin: 0 0 8px;
  padding-left: 10px;
  border-left: 2px solid var(--accent);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-primary);
}

.derivat-karte-an-dich + .derivat-karte-zusammenfassung {
  color: var(--text-secondary);
  font-size: 12.5px;
}

.derivat-karte-zusammenfassung {
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-primary);
}

/* Vorläufige Ableitung (settled:false, Post 4909): gestrichelt, mit
   Fortschritt — sie weiß, dass sie ein Zwischenstand ist. */
.derivat-karte.is-vorlaeufig {
  border-style: dashed;
}

.derivat-karte-vorlaeufig {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-warning);
}

/* Interne Selbst-Spur (self_note, Post 4909): einklappbar wie Reasoning,
   optisch zurückgenommen — sie ist die Denk-Schicht, nicht die Stimme. */
.derivat-selbstnotiz {
  margin: 0 0 8px;
}

.derivat-selbstnotiz-schalter {
  border: 1px dashed var(--border);
  background: transparent;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  cursor: pointer;
}

.derivat-selbstnotiz-text {
  margin: 6px 0 0;
  padding-left: 10px;
  border-left: 2px solid var(--border);
  font-size: 12.5px;
  line-height: 1.5;
  font-style: italic;
  color: var(--text-secondary);
}

.derivat-karte-items {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 5px;
}

.derivat-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-primary);
}

.derivat-item-chip {
  flex: 0 0 auto;
  padding: 1px 6px;
  border: 1px solid currentColor;
  font: 700 9px/1.5 var(--font-mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.derivat-item.kind-goal .derivat-item-chip { color: var(--color-success); }
.derivat-item.kind-problem .derivat-item-chip,
.derivat-item.kind-risk .derivat-item-chip { color: var(--color-error); }
.derivat-item.kind-decision .derivat-item-chip,
.derivat-item.kind-commitment .derivat-item-chip { color: var(--accent); }
.derivat-item.kind-question .derivat-item-chip { color: var(--color-info); }
.derivat-item.kind-action .derivat-item-chip,
.derivat-item.kind-result .derivat-item-chip { color: var(--color-warning); }

.derivat-item-epistemik {
  flex: 0 0 auto;
  color: var(--text-muted);
  font: 9px/1 var(--font-mono);
}

.derivat-fehlt-hinweis {
  display: inline-block;
  margin: 2px 0 4px;
  padding: 1px 6px;
  border: 1px dashed var(--border-strong);
  color: var(--text-muted);
  font: 10px/1.5 var(--font-mono);
}

/* ── QUERSTAPEL (Alex 16.09., Bild 125445) ───────────────────────────────────
   Der angehaengte Werkzeug-Stapel liegt senkrecht auf der Schiene und haelt die
   naechste Nachricht unter sich (min-height oben). Ist die Nachricht viel kuerzer
   als der Stapel, entstand rechts ein grosser leerer Raum. Dann kippt der Stapel
   in EINE Zeile unter die Nachricht, und die naechste folgt direkt darunter.
   Ob er kippt, misst ConversationTimelineViewport (data-stapel); die Stapelhoehe
   fuer die aktuelle Breite steht in einer eigenen Variablen, damit die Messung
   dieselbe Zahl liest, die das Stylesheet anwendet — keine doppelte Media-Query
   im Code. */
.conversation-timeline-stream .conversation-timeline-event-cluster.has-development-run {
  --timeline-development-stapelhoehe: var(--timeline-development-min-height, 0px);
}

@media (max-width: 700px) {
  .conversation-timeline-stream .conversation-timeline-event-cluster.has-development-run {
    --timeline-development-stapelhoehe: var(--timeline-development-min-height-compact, 0px);
  }
}

.conversation-timeline-event-cluster.has-development-run[data-stapel="quer"] {
  min-height: 0;
}

.conversation-timeline-event-cluster[data-stapel="quer"] > .conversation-timeline-development-run.attached-to-event {
  position: static;
  inset: auto;
  /* Der Lauf ist sonst 0 px hoch (height: 0, negative Ränder) — senkrecht hängt
     der Stapel ja absolut daneben. Quer liegt er im Fluss und braucht seine Höhe,
     sonst schiebt sich die nächste Nachricht über die Zeichenreihe (gemessen). */
  height: auto;
  margin: 6px 0 4px;
  pointer-events: auto;
}

.conversation-timeline-event-cluster[data-stapel="quer"] > .conversation-timeline-development-run.attached-to-event
  .conversation-timeline-development-icons {
  position: static;
  top: auto;
  bottom: auto;
  width: auto;
  margin-left: -48px;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  transform-origin: 0 50%;
}

/* Quer nebeneinander nur die Zeit beim Minutenwechsel — sonst verdeckt die
   undurchsichtige Zeit des Nachbarn die eigene. Unsichtbar statt entfernt,
   damit die Reihe gleich hoch bleibt. */
.conversation-timeline-event-cluster[data-stapel="quer"] .conversation-timeline-development-icon-item[data-gleiche-minute] time {
  visibility: hidden;
}

/* Telefon: die Schiene sitzt dort 10 px weiter innen (Zeichenspalte left: -38px),
   sonst ragt das erste Zeichen über den Bildrand (gemessen 390 px). */
@media (max-width: 700px) {
  .conversation-timeline-event-cluster[data-stapel="quer"] > .conversation-timeline-development-run.attached-to-event
    .conversation-timeline-development-icons {
    margin-left: -38px;
  }
}
.three-camera-settings { position: relative; font-size: 12px; }
.three-camera-settings > summary { display: flex; align-items: center; gap: 5px; padding: 6px 8px; cursor: pointer; list-style: none; }
.three-camera-settings-panel { position: fixed; z-index: 1200; box-sizing: border-box; width: min(320px, calc(100vw - 24px)); overflow: auto; overscroll-behavior: contain; padding: 14px; border: 1px solid #52525b; border-radius: 10px; background: #18181b; color: #fafafa; box-shadow: 0 8px 30px #0008; display: grid; gap: 12px; }
.three-camera-settings-panel label { display: grid; gap: 4px; }
.three-camera-settings-panel select, .three-camera-settings-panel input { width: 100%; min-width: 0; box-sizing: border-box; color: inherit; background: #27272a; border: 1px solid #52525b; border-radius: 5px; padding: 7px; }
.three-camera-settings-panel p { margin: 0; color: #d4d4d8; line-height: 1.5; }
.three-camera-settings-panel { white-space: normal; text-align: left; font: 12px/1.4 system-ui, sans-serif; }
.canvas-media-reader {
  box-sizing: border-box;
  width: calc(100vw - 24px);
  height: calc(100dvh - 24px);
  max-width: none;
  max-height: none;
  margin: auto;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  color: var(--text-primary);
  background: var(--surface);
  overflow: hidden;
}
.canvas-media-reader[open] { display: flex; flex-direction: column; }
.canvas-media-reader::backdrop { background: rgb(0 0 0 / 75%); }
.canvas-media-reader header, .canvas-media-reader nav, .canvas-media-reader footer {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
}
.canvas-media-reader header strong { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.canvas-media-reader nav { flex-wrap: wrap; border-block: 1px solid var(--border); }
.canvas-media-reader button, .canvas-media-reader nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 6px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  background: var(--surface);
  color: var(--text-primary);
  font: inherit;
  cursor: pointer;
}
.canvas-media-reader button:disabled { opacity: .4; cursor: default; }
.canvas-media-reader button:focus-visible, .canvas-media-reader a:focus-visible, .canvas-media-reader-viewport:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.canvas-media-reader output { min-width: 55px; text-align: center; }
.canvas-media-reader-viewport {
  flex: 1 1 auto;
  min-height: 0;
  padding: 16px;
  overflow: auto;
  overscroll-behavior: contain;
  touch-action: pan-x pan-y;
}
.canvas-media-reader-content { margin: 0 auto; flex: none; }
.canvas-media-reader-content > img { display: block; width: 100%; height: 100%; max-width: none; object-fit: contain; }
.canvas-media-reader-content .v2-mermaid { box-sizing: border-box; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: transparent; }
.canvas-media-reader-content .v2-mermaid svg { display: block; width: 100%; height: 100%; max-width: none; }
.canvas-media-reader footer { flex-wrap: wrap; font-size: 12px; border-top: 1px solid var(--border); }
.canvas-media-reader footer span { color: var(--text-muted); }
.canvas-media-reader-error { display: grid; justify-items: start; gap: 12px; padding: 16px; }
.conversation-timecanvas {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  color: var(--text-primary);
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  backdrop-filter: blur(18px) saturate(120%);
  border: 1px solid color-mix(in srgb, var(--text-primary) 10%, transparent);
}

.conversation-timecanvas-viewport {
  position: absolute;
  top: calc(var(--agent-hdr-h, 72px) + 4px);
  right: 0;
  bottom: var(--agent-ftr-h, 76px);
  left: 0;
  overflow: hidden;
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  cursor: grab;
  background:
    radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--accent) 5%, transparent), transparent 52%),
    color-mix(in srgb, var(--surface) 60%, transparent);
  -webkit-backdrop-filter: blur(12px) saturate(115%);
  backdrop-filter: blur(12px) saturate(115%);
}

@supports not ((backdrop-filter: blur(1px))) {
  .conversation-timecanvas,
  .conversation-timecanvas-viewport { background: var(--surface); }
}

.conversation-timecanvas-viewport:active { cursor: grabbing; }

.conversation-timecanvas-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Separate experimental geometry lens: Waves LinesAA renders axes and
   causal curves in one WebGL layer. The existing world remains DOM so every
   rich card and control preserves its canonical renderer and hit testing. */
.conversation-timecanvas-three-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

.conversation-timecanvas-three-webgl,
.conversation-timecanvas-three-css3d {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.conversation-timecanvas-three-webgl {
  z-index: 0;
  display: block;
}

.conversation-timecanvas-three-css3d {
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  transform-style: preserve-3d;
}

/* CSS3DObject owns only the world transform. The mounted child is the exact
   React card used by the flat timeline, so Markdown, IACP, Issue, media and
   every existing interaction keep one canonical implementation. */
.conversation-timecanvas-css3d-card {
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid var(--three-active-color, #718397);
  border-radius: 9px;
  background: var(--surface, #111925);
  pointer-events: auto;
  transform-style: preserve-3d;
  user-select: text;
  -webkit-user-select: text;
}

.conversation-timecanvas-css3d-media {
  position: relative;
  overflow: visible;
  pointer-events: auto;
  transform-style: preserve-3d;
  user-select: text;
  -webkit-user-select: text;
}

.conversation-timecanvas-image-status {
  position: absolute;
  box-sizing: border-box;
  padding: 18px;
  background: #141b26;
  color: #e2e8f0;
  pointer-events: auto;
  font-size: 14px;
}

.conversation-timecanvas-image-status a,
.conversation-timecanvas-image-status button {
  margin-inline-end: 12px;
}

/* Keyboard alternatives for raycast images; visible only while navigating
   these actions, never a permanent DOM rectangle over the depth-tested image. */
.conversation-timecanvas-image-actions {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.conversation-timecanvas-image-actions:focus-within {
  bottom: 12px;
  left: 12px;
  z-index: 3;
  width: auto;
  height: auto;
  padding: 10px;
  clip-path: none;
  background: #141b26;
  pointer-events: auto;
}

.conversation-timecanvas-css3d-card .three-reading-content,
.conversation-timecanvas-css3d-media .three-reading-content {
  box-sizing: border-box;
  min-width: 0;
  position: relative;
  width: 100%;
  height: auto;
}

.conversation-timecanvas-css3d-card .three-reading-content {
  height: auto;
}

/* Content owns the panel; no duplicate identity/time header or navigation bar. */
.three-reading-access {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 28px;
  padding: 0 8px 4px;
  background: var(--surface, #111925);
}

.three-reading-access button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 4px;
  color: var(--text-secondary, #aab8ca);
  background: transparent;
  border: 0;
  border-radius: 0;
  min-height: 24px;
  font: 500 11px/1.3 var(--font-body, system-ui);
  cursor: pointer;
}

.three-reading-access button:hover,
.three-reading-access button:focus-visible {
  color: var(--text-primary, #f1f5f9);
  text-decoration: underline;
}

.three-reading-access button:focus-visible {
  outline: 2px solid #7dd3fc;
  outline-offset: -3px;
}

.conversation-timecanvas-css3d-card .three-reading-content > .conversation-timecanvas-card {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  position: relative;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: auto !important;
  content-visibility: visible;
  contain-intrinsic-size: none;
  box-shadow: none;
}

.conversation-timecanvas-css3d-card.is-three-active .three-reading-content > .conversation-timecanvas-card {
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--three-active-color, var(--accent)) 86%, white 14%),
    0 18px 54px color-mix(in srgb, #000 42%, transparent),
    0 0 34px color-mix(in srgb, var(--three-active-color, var(--accent)) 24%, transparent);
}

.conversation-timecanvas-css3d-card a.is-three-reference-focused {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* Complete canonical reading bodies; this scope never changes flat cards. */
.conversation-timecanvas-css3d-card .conversation-timecanvas-card-body,
.conversation-timecanvas-css3d-card .conversation-timecanvas-card-text,
.conversation-timecanvas-css3d-card .iacp-event-card,
.conversation-timecanvas-css3d-media .kind-content-post,
.conversation-timecanvas-css3d-media .kind-content-post .conversation-timecanvas-media-body {
  height: auto !important;
  max-height: none !important;
  overflow: visible;
  flex: none;
}

.conversation-timecanvas-css3d-media .three-reading-content > .conversation-timecanvas-media-object {
  position: relative;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  content-visibility: visible;
  contain-intrinsic-size: none;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 68%, transparent),
    0 22px 62px color-mix(in srgb, #000 42%, transparent),
    0 0 28px color-mix(in srgb, var(--accent) 12%, transparent);
}

.conversation-timecanvas-css3d-media[data-full-reading="true"] .three-reading-content > .conversation-timecanvas-media-object {
  height: auto !important;
}

.conversation-timecanvas-css3d-media[data-full-reading="false"] .three-reading-content {
  height: calc(100% - 28px);
}

.conversation-timecanvas-css3d-card .conversation-timecanvas-port,
.conversation-timecanvas-css3d-card .conversation-timecanvas-bridge-port {
  display: none;
}

/* Canonical cards stay mounted before requestSession so WebXR can capture the
   exact React rendering after the user gesture has opened the XR session.
   Keep them laid out and paintable, but far outside the visual viewport. */
.conversation-timecanvas-ar-card-capture {
  position: fixed;
  top: 0;
  left: -100000px;
  z-index: -1;
  width: max-content;
  pointer-events: none;
  contain: layout style;
}

.conversation-timecanvas.geometry-three .conversation-timecanvas-world {
  z-index: 2;
}

/* Desktop-Perspektive und WebXR teilen dieselbe Three-Szene. Nur die Kamera
   wechselt: hier gehoert die Eingabe den OrbitControls, waehrend die flache
   DOM-Projektion ausgeblendet wird, damit nichts doppelt erscheint. */
.conversation-timecanvas.geometry-three-perspective .conversation-timecanvas-three-layer {
  z-index: 3;
  pointer-events: auto;
  touch-action: none;
  cursor: grab;
}

.conversation-timecanvas.geometry-three-perspective .conversation-timecanvas-three-layer:active {
  cursor: grabbing;
}

.conversation-timecanvas.geometry-three-perspective
  .conversation-timecanvas-three-layer[data-desktop-controls='spectator'] {
  cursor: crosshair;
}

.conversation-timecanvas.geometry-three-perspective .conversation-timecanvas-three-layer[data-spectator-locked='true'] {
  cursor: none;
}

.conversation-timecanvas-spectator-hint {
  position: absolute;
  top: 14px;
  left: 50%;
  z-index: 4;
  padding: 7px 10px;
  border: 1px solid color-mix(in srgb, var(--border) 68%, transparent);
  border-radius: 999px;
  color: color-mix(in srgb, var(--text-primary) 82%, transparent);
  background: color-mix(in srgb, var(--surface) 76%, transparent);
  font: 650 9px/1.2 var(--font-mono);
  white-space: nowrap;
  transform: translateX(-50%);
  pointer-events: none;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.conversation-timecanvas-three-layer[data-spectator-locked='true'] .conversation-timecanvas-spectator-hint {
  opacity: 0.42;
}

.conversation-timecanvas.geometry-three-perspective .conversation-timecanvas-grid,
.conversation-timecanvas.geometry-three-perspective .conversation-timecanvas-world,
.conversation-timecanvas.geometry-three-perspective .conversation-timecanvas-overview-layer,
.conversation-timecanvas.geometry-three-perspective .conversation-timecanvas-lane-anchors {
  visibility: hidden;
}

.conversation-timecanvas.geometry-three-active .conversation-timecanvas-axis {
  background: transparent;
  box-shadow: none;
}

.conversation-timecanvas.geometry-three-active .conversation-timecanvas-axis.spacing-elapsed::before,
.conversation-timecanvas.geometry-three-active .conversation-timecanvas-segments {
  display: none;
}

/* The curve itself comes from WebGL. The lightweight SVG remains only as the
   path-following carrier for the already established live transport dot. */
.conversation-timecanvas.geometry-three-active .conversation-timecanvas-branch-lines .message-bridge-link,
.conversation-timecanvas.geometry-three-active .conversation-timecanvas-branch-lines .content-link,
.conversation-timecanvas.geometry-three-active .conversation-timecanvas-bridge-motion-path {
  stroke: transparent;
  marker-end: none;
}

/* In immersive AR the WebXR compositor owns the spatial picture. Only the
   small placement controls and canonical selected-event dialog remain as a
   DOM overlay; the flat world must not be painted a second time. */
.conversation-timecanvas.is-ar-active,
.conversation-timecanvas.is-ar-active .conversation-timecanvas-viewport {
  background: transparent;
}

.conversation-timecanvas.is-ar-active .conversation-timecanvas-grid,
.conversation-timecanvas.is-ar-active .conversation-timecanvas-world,
.conversation-timecanvas.is-ar-active .conversation-timecanvas-overview-layer,
.conversation-timecanvas.is-ar-active .conversation-timecanvas-agent-picker {
  visibility: hidden;
}

.conversation-timecanvas-ar-guide {
  position: absolute;
  top: calc(var(--agent-hdr-h, 72px) + 18px);
  left: 50%;
  z-index: 28;
  max-width: min(420px, calc(100% - 28px));
  padding: 8px 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 58%, transparent);
  color: var(--text-primary);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  box-shadow: 0 12px 34px color-mix(in srgb, #000 24%, transparent);
  font: 700 10px/1.35 var(--font-mono);
  text-align: center;
  transform: translateX(-50%);
  pointer-events: none;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.conversation-timecanvas-ar-guide.is-error {
  border-color: color-mix(in srgb, var(--color-error) 64%, transparent);
  color: var(--color-error);
}

.conversation-timecanvas-world {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  transform-origin: 0 0;
  /* Promoted only during zoom by canvasZoomRaster; idle text/SVG must reraster. */
  will-change: auto;
  contain: layout style;
}

/* Far zoom is a screen-space symbol layer, not a second conversation
   renderer. Exact event anchors remain as tiny pins; only the semantic glyph
   is grouped and displaced in viewport pixels, with a connector back to the
   group's canonical representative anchor. */
.conversation-timecanvas-overview-layer {
  position: absolute;
  inset: 0;
  z-index: 7;
  overflow: hidden;
  pointer-events: none;
}

.conversation-timecanvas-overview-connectors {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.conversation-timecanvas-overview-connectors line {
  stroke: color-mix(in srgb, var(--timeline-lane-color, var(--text-muted)) 60%, transparent);
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
}

.conversation-timecanvas-overview-pin {
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 4px;
  border: 1px solid var(--timeline-lane-color, var(--text-muted));
  background: var(--surface);
  pointer-events: none;
  will-change: transform;
}

.conversation-timecanvas-overview-marker {
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  padding: 3px;
  border: 1px solid currentColor;
  border-radius: 0;
  color: var(--text-secondary);
  background: var(--surface);
  box-shadow: 0 0 0 1px color-mix(in srgb, currentColor 14%, transparent);
  cursor: pointer;
  pointer-events: auto;
  will-change: transform;
}

.conversation-timecanvas-overview-marker:hover,
.conversation-timecanvas-overview-marker:focus-visible {
  z-index: 2;
  color: var(--accent);
  outline: 1px solid currentColor;
  outline-offset: 2px;
}

.conversation-timecanvas-overview-marker > small {
  position: absolute;
  right: -7px;
  bottom: -7px;
  min-width: 15px;
  height: 15px;
  display: grid;
  place-items: center;
  padding-inline: 3px;
  border: 1px solid currentColor;
  color: inherit;
  background: var(--surface);
  font: 8px/1 var(--font-mono);
}

.conversation-timecanvas-overview-marker.is-overflow {
  color: var(--timeline-lane-color, var(--text-secondary));
}

.conversation-timecanvas-overview-overflow-count {
  font: 9px/1 var(--font-mono);
  letter-spacing: -0.04em;
}

.conversation-timecanvas-overview-marker.kind-agent {
  color: var(--timeline-lane-color, var(--accent));
}

/* Identity is not the app accent, including hovered/focused Bot markers. */
.conversation-timecanvas-overview-marker.kind-agent:not(.has-iacp-event):hover,
.conversation-timecanvas-overview-marker.kind-agent:not(.has-iacp-event):focus-visible {
  color: var(--timeline-lane-color, var(--accent));
}

.conversation-timecanvas-overview-marker.kind-user { color: var(--text-primary); }
.conversation-timecanvas-overview-marker.kind-thinking,
.conversation-timecanvas-overview-marker.kind-tool,
.conversation-timecanvas-overview-marker.kind-code { color: var(--color-warning); }
.conversation-timecanvas-overview-marker.kind-artifact,
.conversation-timecanvas-overview-marker.kind-content { color: var(--color-success); }
.conversation-timecanvas-overview-marker.kind-iacp,
.conversation-timecanvas-overview-marker.has-iacp-event { color: var(--accent); }
.conversation-timecanvas-overview-marker.kind-issue { color: var(--color-info); }

.conversation-timecanvas-overview-bridge-marker {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent),
    0 0 12px color-mix(in srgb, var(--accent) 18%, transparent);
}

.conversation-timecanvas-axis {
  position: absolute;
  height: 3px;
  background: var(--timeline-lane-color, var(--border-strong));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--timeline-lane-color, var(--border-strong)) 18%, transparent);
  pointer-events: none;
}

/* Kompakt ist eine reine Ereignisachse. Echtzeit zeigt zusaetzlich den
   gewaehlt linearen Minutentakt; auch bei lokal kollisionsentzerrten Karten
   bleibt dadurch sichtbar, welcher Modus aktiv ist. */
.conversation-timecanvas-axis.spacing-elapsed::before {
  content: '';
  position: absolute;
  opacity: .52;
  pointer-events: none;
}

.conversation-timecanvas-axis.spacing-elapsed.orientation-horizontal::before {
  top: -5px;
  left: 0;
  width: 100%;
  height: 13px;
  background-image: repeating-linear-gradient(
    to right,
    color-mix(in srgb, var(--timeline-lane-color, var(--accent)) 72%, transparent) 0 1px,
    transparent 1px var(--timecanvas-minute-step, 100px)
  );
  background-position-x: var(--timecanvas-ruler-offset, 0);
}

.conversation-timecanvas-axis.spacing-elapsed.orientation-vertical::before {
  top: 0;
  left: -5px;
  width: 13px;
  height: 100%;
  background-image: repeating-linear-gradient(
    to bottom,
    color-mix(in srgb, var(--timeline-lane-color, var(--accent)) 72%, transparent) 0 1px,
    transparent 1px var(--timecanvas-minute-step, 100px)
  );
  background-position-y: var(--timecanvas-ruler-offset, 0);
}

/* Nur ein wirklich arbeitender/neustartender Agent traegt einen laufenden
   Lichtimpuls. Die Farbe bleibt die kanonische Lane-Farbe; die Bewegung ist
   Status, nicht eine zweite Identitaetsfarbe. */
.conversation-timecanvas-axis.state-working::after,
.conversation-timecanvas-axis.state-restarting::after {
  content: '';
  position: absolute;
  border-radius: 999px;
  box-shadow:
    0 0 12px color-mix(in srgb, var(--timeline-lane-color, var(--accent)) 88%, transparent),
    0 0 24px color-mix(in srgb, var(--timeline-lane-color, var(--accent)) 42%, transparent);
  pointer-events: none;
}

.conversation-timecanvas-axis.orientation-horizontal.state-working::after,
.conversation-timecanvas-axis.orientation-horizontal.state-restarting::after {
  top: -1px;
  left: 0;
  width: 68px;
  height: 5px;
  background: linear-gradient(
    to right,
    transparent 0%,
    color-mix(in srgb, var(--timeline-lane-color, var(--accent)) 48%, transparent) 34%,
    var(--timeline-lane-color, var(--accent)) 76%,
    transparent 100%
  );
  animation: conversation-timecanvas-agent-flow-x 1.7s linear infinite;
}

.conversation-timecanvas-axis.orientation-vertical.state-working::after,
.conversation-timecanvas-axis.orientation-vertical.state-restarting::after {
  top: 0;
  left: -1px;
  width: 5px;
  height: 68px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    color-mix(in srgb, var(--timeline-lane-color, var(--accent)) 48%, transparent) 34%,
    var(--timeline-lane-color, var(--accent)) 76%,
    transparent 100%
  );
  animation: conversation-timecanvas-agent-flow-y 1.7s linear infinite;
}

.conversation-timecanvas-empty {
  position: absolute;
  top: 220px;
  left: 96px;
  z-index: 2;
  width: min(420px, calc(100% - 192px));
  padding: 18px;
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
  background: var(--surface);
  font: 11px/1.45 var(--font-mono);
  text-align: center;
}

.conversation-timecanvas-segments {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  overflow: visible;
  pointer-events: none;
}

.conversation-timecanvas-segments line {
  stroke: var(--border-strong);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.conversation-timecanvas-segments line.live-arrival {
  stroke: var(--accent);
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: conversation-timecanvas-segment-grow .68s cubic-bezier(.2, .72, .25, 1) forwards;
}

/* Dialog spines belong to the same agent as their Bot markers. Keep the
 * identity during arrival animation too; no global accent-colour flash. */
.dialog-columns .conversation-timecanvas-segments line {
  stroke: var(--timeline-lane-color, var(--border-strong));
}

.conversation-timecanvas-node-anchor.live-arrival,
.conversation-timecanvas-dev.live-arrival,
.conversation-timecanvas-card.live-arrival {
  opacity: 0;
  animation: conversation-timecanvas-event-reveal .46s .58s cubic-bezier(.2, .72, .25, 1) forwards;
}

.conversation-timecanvas-segments text {
  fill: var(--text-muted);
  font: 600 9px/1 var(--font-mono);
  letter-spacing: .05em;
}

.conversation-timecanvas-segments text.unknown { fill: var(--color-warning); }
.conversation-timecanvas-segments text.capped { text-decoration: underline dotted; }

.conversation-timecanvas-episode {
  position: absolute;
  display: grid;
  max-width: 260px;
  gap: 3px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  pointer-events: none;
}

.conversation-timecanvas-world.orientation-horizontal .conversation-timecanvas-episode {
  transform: translate(-50%, calc(-100% - 42px));
}

.conversation-timecanvas-world.orientation-vertical .conversation-timecanvas-episode {
  width: 46px;
  transform: translate(-100%, -50%);
}

.conversation-timecanvas-episode::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  width: 1px;
  height: 35px;
  background: var(--accent);
}

.conversation-timecanvas-world.orientation-vertical .conversation-timecanvas-episode::before {
  top: 50%;
  left: 100%;
  width: 28px;
  height: 1px;
}

.conversation-timecanvas-episode span {
  color: var(--accent);
  font-size: 8px;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .1em;
}

.conversation-timecanvas-episode strong {
  overflow: hidden;
  font-size: 10px;
  font-weight: 500;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conversation-timecanvas-world.orientation-vertical .conversation-timecanvas-episode strong {
  display: none;
}

.conversation-timecanvas-card {
  position: absolute;
  z-index: 2;
  display: flex;
  flex-direction: column;
  border: 0;
  border-radius: 0;
  background: var(--surface);
  box-shadow: none;
  contain: layout paint style;
  content-visibility: auto;
  contain-intrinsic-size: 320px 246px;
}

.conversation-timecanvas-card.semantic-overview {
  height: 92px !important;
  box-shadow: none;
}

/* Detailed cards own their intrinsic block height. They are already bounded
 * by the explicit Canvas view-window virtualization, so forcing an inner
 * scroller or `content-visibility` placeholder here would make the geometry
 * lie about images, Markdown and long Collaboration letters. */
.conversation-timecanvas-card.intrinsic-height {
  content-visibility: visible;
  contain-intrinsic-size: none;
}

.conversation-timecanvas-card.intrinsic-height > .conversation-timecanvas-card-body {
  flex: 0 0 auto;
  overflow: visible;
}

.conversation-timecanvas-card.canonical-iacp-event.intrinsic-height .iacp-event-card {
  min-height: 0;
}

.conversation-timecanvas-overview-label {
  min-height: 0;
  padding: 9px;
  overflow: hidden;
  color: var(--text-muted);
  font: 10px/1.35 var(--font-mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conversation-timecanvas-card.kind-user {
  background: color-mix(in srgb, var(--text-primary) 7%, var(--surface));
}

.conversation-timecanvas-card.kind-iacp {
  border-color: color-mix(in srgb, var(--accent) 62%, var(--border-strong));
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
}

.conversation-timecanvas-card.kind-issue {
  border-color: color-mix(in srgb, var(--color-info) 62%, var(--border-strong));
  background: color-mix(in srgb, var(--color-info) 7%, var(--surface));
}

.conversation-timecanvas-card.kind-issue.compact-issue {
  /* Beide Tokens setzt TimelineCanvasNode inline aus der Layout-Geometrie.
     Die Rückfallwerte spiegeln CONVERSATION_TIMELINE_CANVAS_ISSUE_CARD_* —
     sie greifen nie im Normalbetrieb, aber der statische Token-Wächter
     (tokenVollstaendig) kann Inline-Definitionen nicht sehen und verlangt
     zu Recht, dass kein var() ins Leere zeigen kann. */
  contain-intrinsic-size:
    var(--timecanvas-issue-card-width, 248px)
    var(--timecanvas-issue-card-height, 76px);
}

.conversation-timecanvas-card.kind-issue.semantic-overview.compact-issue {
  height: var(--timecanvas-issue-card-height, 76px) !important;
}

.conversation-timecanvas-issue-link {
  display: grid;
  align-content: center;
  gap: 5px;
  width: 100%;
  height: 100%;
  min-width: 0;
  padding: 10px 12px;
  color: var(--color-info);
  background: color-mix(in srgb, var(--color-info) 9%, transparent);
  font-family: var(--font-mono);
  text-decoration: none;
}

.conversation-timecanvas-issue-link span {
  color: inherit;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .04em;
}

.conversation-timecanvas-issue-link strong {
  display: -webkit-box;
  min-width: 0;
  overflow: hidden;
  color: var(--text-primary);
  font-size: 13px;
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.conversation-timecanvas-issue-link:hover strong,
.conversation-timecanvas-issue-link:focus-visible strong {
  text-decoration: underline;
}

.conversation-timecanvas-issue-link:focus-visible {
  outline: 1px solid var(--color-info);
  outline-offset: -3px;
}

.conversation-timecanvas-card.kind-content {
  border-color: color-mix(in srgb, var(--color-success) 62%, var(--border-strong));
  background: color-mix(in srgb, var(--color-success) 7%, var(--surface));
}

/* A structured Collaboration push is the same letter in every lens. The
 * absolute article owns only Canvas geometry; `IacpEventCard` keeps the exact
 * classic header, recipients, response state, Markdown body and footer. */
.conversation-timecanvas-card.canonical-iacp-event {
  border: 0;
  background: transparent;
  box-shadow: none;
  contain: layout style;
}

.conversation-timecanvas-card.canonical-iacp-event > .conversation-timecanvas-card-body {
  flex: 1 1 auto;
  padding: 0;
  overflow: auto;
}

.conversation-timecanvas-card.canonical-iacp-event .iacp-event-card {
  min-height: 100%;
  margin: 0;
}

.conversation-timecanvas-card.canonical-iacp-event > .canonical-iacp-branch-action {
  position: absolute;
  top: 10px;
  right: -30px;
  z-index: 3;
  width: 28px;
  min-height: 28px;
  justify-content: center;
  margin: 0;
  padding: 0;
}

.conversation-timecanvas-card.canonical-iacp-event > .canonical-iacp-branch-action span {
  display: none;
}

.conversation-timecanvas-card.branch-available {
  cursor: pointer;
}

.conversation-timecanvas-card.branch-available:hover,
.conversation-timecanvas-card.branch-available:focus-visible,
.conversation-timecanvas-card.branch-open {
  border-color: var(--accent);
  outline: 1px solid var(--accent);
  outline-offset: 2px;
}

.conversation-timecanvas-card.branch-open .conversation-timecanvas-port {
  background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
}

.conversation-timecanvas-branch-action {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  margin: 7px 9px 0;
  padding: 4px 7px;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--border));
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  font: 700 8px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .05em;
  cursor: pointer;
}

.conversation-timecanvas-branch-action:hover,
.conversation-timecanvas-branch-action:focus-visible {
  border-color: var(--accent);
  outline: 1px solid var(--accent);
}

.conversation-timecanvas-card.semantic-overview .conversation-timecanvas-branch-action {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 28px;
  margin: 0;
  padding: 0;
  justify-content: center;
}

.conversation-timecanvas-card.semantic-overview .conversation-timecanvas-branch-action span {
  display: none;
}

.conversation-timecanvas-port {
  position: absolute;
  width: 9px;
  height: 9px;
  border: 2px solid var(--surface);
  border-radius: 50%;
  background: var(--text-muted);
}

.conversation-timecanvas-boundary {
  position: absolute;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--text-muted);
  font: 700 8px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .06em;
  pointer-events: none;
}

.conversation-timecanvas-boundary span {
  width: 10px;
  height: 10px;
  border: 2px solid var(--surface);
  border-radius: 50%;
  background: var(--text-muted);
  box-shadow: 0 0 0 1px var(--border-strong);
}

.conversation-timecanvas-boundary.is-now {
  color: var(--timeline-lane-color, var(--accent));
}

.conversation-timecanvas-world.orientation-horizontal .conversation-timecanvas-boundary {
  width: 10px;
  height: 10px;
  transform: translate(-5px, -5px);
}

.conversation-timecanvas-world.orientation-vertical .conversation-timecanvas-boundary {
  width: 10px;
  height: 10px;
  transform: translate(-5px, -5px);
}

.conversation-timecanvas-world.orientation-horizontal .conversation-timecanvas-boundary small {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

.conversation-timecanvas-world.orientation-vertical .conversation-timecanvas-boundary small {
  position: absolute;
  top: 1px;
  right: 18px;
  white-space: nowrap;
}

.conversation-timecanvas-world.orientation-horizontal .conversation-timecanvas-card.side-before .conversation-timecanvas-port {
  bottom: -39px;
  left: 50%;
  transform: translateX(-50%);
}

.conversation-timecanvas-world.orientation-horizontal .conversation-timecanvas-card.side-after .conversation-timecanvas-port {
  top: -39px;
  left: 50%;
  transform: translateX(-50%);
}

.conversation-timecanvas-world.orientation-vertical .conversation-timecanvas-card .conversation-timecanvas-port {
  top: 19px;
  left: -40px;
}

.conversation-timecanvas-card.kind-iacp .conversation-timecanvas-port { background: var(--accent); }
.conversation-timecanvas-card.kind-issue .conversation-timecanvas-port { background: var(--color-info); }
.conversation-timecanvas-card.kind-content .conversation-timecanvas-port { background: var(--color-success); }

.conversation-timecanvas-node-anchor {
  position: absolute;
  z-index: 6;
  width: 36px;
  height: 36px;
  color: var(--text-secondary);
  transform: translate(-50%, -50%);
}

/* The card is paint-contained for pan/zoom performance, so a connector owned
 * by the card is clipped at its edge. The uncontained axis marker owns the
 * complete connection. Horizontal elapsed cards may advance along the time
 * direction, hence their connector uses a measured length and angle. */
.conversation-timecanvas-node-anchor::before {
  content: '';
  position: absolute;
  z-index: 0;
  background: currentColor;
  opacity: .62;
  pointer-events: none;
}

.conversation-timecanvas-world.orientation-horizontal .conversation-timecanvas-node-anchor::before {
  top: 18px;
  left: 18px;
  width: var(--timecanvas-node-connector-length, var(--timecanvas-axis-card-gap, 34px));
  height: 1px;
  transform: rotate(var(--timecanvas-node-connector-angle, -90deg));
  transform-origin: 0 50%;
}

.conversation-timecanvas-world.orientation-horizontal
  .conversation-timecanvas-card.longitudinally-displaced .conversation-timecanvas-port {
  bottom: -5px;
}

.conversation-timecanvas-world.orientation-vertical .conversation-timecanvas-node-anchor::before {
  top: 50%;
  left: 18px;
  width: calc(var(--timecanvas-node-connector, var(--timecanvas-axis-card-gap, 34px)) - 18px);
  height: 1px;
  transform: translateY(-50%);
}

.conversation-timecanvas-node-anchor > button,
.conversation-timecanvas-node-anchor > span {
  position: relative;
  z-index: 1;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  border: 1px solid var(--border-strong);
  border-radius: 0;
  color: var(--text-secondary);
  background: var(--surface);
}

.conversation-timecanvas-node-anchor.kind-user > button,
.conversation-timecanvas-node-anchor.kind-user > span {
  color: var(--text-primary);
  border-color: var(--text-primary);
}
.conversation-timecanvas-node-anchor.kind-user { color: var(--text-primary); }

/* A plain Bot glyph identifies the owner of this lane, so it uses the same
   canonical identity color as the axis and its live endpoint. Semantic event
   kinds below deliberately keep their own issue/IACP/tool/content language. */
.conversation-timecanvas-node-anchor.kind-agent > button,
.conversation-timecanvas-node-anchor.kind-agent > span {
  color: var(--timeline-lane-color, var(--accent));
  border-color: var(--timeline-lane-color, var(--accent));
}
.conversation-timecanvas-node-anchor.kind-agent {
  color: var(--timeline-lane-color, var(--accent));
}

/* Gleiche Farbe, gleiches Gewicht (Alex 26.09.: „warum ist das Icon heller
   als die Linie"). Der Farbwert war identisch; die Schiene zeichnet aber mit
   non-scaling-stroke immer 2 Bildschirmpixel, die Lucide-Striche (2 in 24er
   viewBox bei 16 px ≈ 1,3 px) schrumpfen zusätzlich mit dem Zoom und werden
   beim Glätten mit dem Hintergrund gemischt — sie wirkten blasser. Dieselbe
   Regel wie die Schiene: fester Bildschirm-Strich. */
.conversation-timecanvas-node-anchor > button svg :is(path, rect, circle, line, polyline, ellipse),
.conversation-timecanvas-node-anchor > span svg :is(path, rect, circle, line, polyline, ellipse) {
  vector-effect: non-scaling-stroke;
  stroke-width: 2px;
}

/* Das letzte semantische Zeichen IST zugleich der Jetzt-Punkt. Es bleibt das
   Ereignis-Icon, nimmt am Live-Ende aber Identitaet und Zustand seiner Lane
   an, statt als neutrales graues Bot-Zeichen ueber der farbigen Schiene zu
   stehen. */
.conversation-timecanvas-node-anchor.is-live-end.state-working > button,
.conversation-timecanvas-node-anchor.is-live-end.state-working > span,
.conversation-timecanvas-node-anchor.is-live-end.state-restarting > button,
.conversation-timecanvas-node-anchor.is-live-end.state-restarting > span {
  animation: conversation-timecanvas-agent-active 1.4s ease-in-out infinite;
}

.conversation-timecanvas-node-anchor.is-live-end.state-waiting > button,
.conversation-timecanvas-node-anchor.is-live-end.state-waiting > span {
  border-style: dashed;
}

.conversation-timecanvas-node-anchor.is-live-end.state-blocked > button,
.conversation-timecanvas-node-anchor.is-live-end.state-blocked > span,
.conversation-timecanvas-node-anchor.is-live-end.state-error > button,
.conversation-timecanvas-node-anchor.is-live-end.state-error > span {
  outline: 2px double currentColor;
  outline-offset: 2px;
}

.conversation-timecanvas-node-anchor.is-live-end.state-paused,
.conversation-timecanvas-node-anchor.is-live-end.state-offline,
.conversation-timecanvas-node-anchor.is-live-end.state-stopped { opacity: .58; }

.conversation-timecanvas-node-anchor.kind-thinking > button,
.conversation-timecanvas-node-anchor.kind-thinking > span,
.conversation-timecanvas-node-anchor.kind-code > button,
.conversation-timecanvas-node-anchor.kind-code > span { color: var(--color-warning); }
.conversation-timecanvas-node-anchor.kind-thinking,
.conversation-timecanvas-node-anchor.kind-code { color: var(--color-warning); }

.conversation-timecanvas-node-anchor.kind-artifact > button,
.conversation-timecanvas-node-anchor.kind-artifact > span,
.conversation-timecanvas-node-anchor.kind-content > button,
.conversation-timecanvas-node-anchor.kind-content > span {
  color: var(--color-success);
  border-color: var(--color-success);
}
.conversation-timecanvas-node-anchor.kind-artifact,
.conversation-timecanvas-node-anchor.kind-content { color: var(--color-success); }

.conversation-timecanvas-node-anchor.kind-iacp > button,
.conversation-timecanvas-node-anchor.kind-iacp > span,
.conversation-timecanvas-node-anchor.has-iacp-event > button,
.conversation-timecanvas-node-anchor.has-iacp-event > span {
  color: var(--accent);
  border-color: var(--accent);
}
.conversation-timecanvas-node-anchor.kind-iacp,
.conversation-timecanvas-node-anchor.has-iacp-event { color: var(--accent); }

.conversation-timecanvas-node-anchor.kind-issue > button,
.conversation-timecanvas-node-anchor.kind-issue > span {
  color: var(--color-info);
  border-color: var(--color-info);
}
.conversation-timecanvas-node-anchor.kind-issue { color: var(--color-info); }

.conversation-timecanvas-node-anchor > button { padding: 0; cursor: pointer; }
.conversation-timecanvas-node-anchor > button:hover,
.conversation-timecanvas-node-anchor > button:focus-visible {
  color: var(--accent);
  border-color: var(--accent);
}
.conversation-timecanvas-node-anchor.kind-agent:not(.has-iacp-event) > button:hover,
.conversation-timecanvas-node-anchor.kind-agent:not(.has-iacp-event) > button:focus-visible {
  color: var(--timeline-lane-color, var(--accent));
  border-color: var(--timeline-lane-color, var(--accent));
}
.conversation-timecanvas-node-anchor.is-live-end > button,
.conversation-timecanvas-node-anchor.is-live-end > span {
  color: var(--timeline-lane-color, var(--accent));
  border-color: var(--timeline-lane-color, var(--accent));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--timeline-lane-color, var(--accent)) 34%, transparent);
}
.conversation-timecanvas-node-anchor img { width: 100%; height: 100%; object-fit: cover; }

.conversation-timecanvas-node-anchor > time {
  position: absolute;
  top: 40px;
  left: 50%;
  width: 44px;
  transform: translateX(-50%);
  color: var(--text-muted);
  background: var(--surface);
  font: 8px/1 var(--font-mono);
  text-align: center;
  pointer-events: none;
}

.conversation-timecanvas-card-title {
  display: block;
  margin: 0 0 8px;
  color: var(--text-secondary);
  font: 700 11px/1.15 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.conversation-timecanvas-card-body {
  --timecanvas-content-font-size: 12px;
  --timecanvas-content-line-height: 1.48;
  min-height: 0;
  flex: 1 1 auto;
  padding: 10px 12px;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  cursor: auto;
  -webkit-touch-callout: default;
  -webkit-user-select: text;
  user-select: text;
}

.conversation-timecanvas-card-body .entry-content {
  padding: 0;
  color: var(--text-primary);
  font-size: var(--timecanvas-content-font-size);
  line-height: var(--timecanvas-content-line-height);
}

/* User-Fallback (`RichMessage`) und kanonischer Bot-Renderer
 * (`SectionContent > .entry-content`) lesen dieselbe Basis. Markdown darf
 * seine Hierarchie darueber weiter auspraegen, aber nicht mehr je nach
 * Herkunft in einer anderen Grundgroesse beginnen. */
.conversation-timecanvas-card-text {
  color: var(--text-primary);
  font-size: var(--timecanvas-content-font-size);
  line-height: var(--timecanvas-content-line-height);
}

.conversation-timecanvas-card-body a[href^="#timecanvas-media-"],
.conversation-timecanvas-media-body a[href^="#timecanvas-media-"],
.conversation-timecanvas-media-reference {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 22px;
  margin: 2px 1px;
  padding: 3px 7px;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--border));
  border-radius: 999px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  font: 700 9px/1.2 var(--font-mono);
  letter-spacing: .03em;
  text-decoration: none;
  white-space: nowrap;
  cursor: default;
}

.conversation-timecanvas-card-body a[href^="#timecanvas-media-"]::before,
.conversation-timecanvas-media-body a[href^="#timecanvas-media-"]::before,
.conversation-timecanvas-media-reference::before {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px color-mix(in srgb, currentColor 64%, transparent);
  content: "";
}

.conversation-timecanvas-iacp-meta {
  min-height: 27px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border-bottom: 1px solid var(--border);
  color: var(--accent);
  font: 9px/1 var(--font-mono);
}

.conversation-timecanvas-iacp-meta code {
  margin-left: auto;
  color: var(--text-muted);
  font-size: 8px;
}

.conversation-timecanvas-iacp-relationship {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.conversation-timecanvas-iacp-meta .conversation-timecanvas-branch-action.is-in-header {
  min-height: 21px;
  margin: 0 0 0 auto;
  padding: 3px 5px;
  font-size: 8px;
}

.conversation-timecanvas-iacp-meta .conversation-timecanvas-branch-action.is-in-header + code {
  margin-left: 2px;
}

.conversation-timecanvas-dev {
  position: absolute;
  z-index: 3;
  display: grid;
  place-items: center;
  padding: 4px;
  border: 1px solid var(--surface);
  border-radius: 0;
  color: var(--text-primary);
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--border-strong);
  cursor: pointer;
}

.conversation-timecanvas-dev .conversation-timeline-event-icon {
  width: 11px;
  height: 11px;
}

.conversation-timecanvas-dev-count {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 14px;
  height: 14px;
  display: grid;
  place-items: center;
  padding-inline: 2px;
  border: 1px solid currentColor;
  color: inherit;
  background: var(--surface);
  font: 700 8px/1 var(--font-mono);
}

.conversation-timecanvas-dev:hover,
.conversation-timecanvas-dev:focus-visible {
  color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent);
  outline: none;
}

.conversation-timecanvas-dev.development-execution {
  border-bottom-width: 4px;
}

.conversation-timecanvas-dev.development-change {
  border-color: var(--color-warning);
  color: var(--color-warning);
  transform: rotate(45deg) scale(.78);
}

.conversation-timecanvas-dev.development-change > .conversation-timeline-event-icon {
  transform: rotate(-45deg) scale(1.2);
}

.conversation-timecanvas-dev.development-change .conversation-timecanvas-dev-count {
  transform: rotate(-45deg) scale(1.28);
}

.conversation-timecanvas-dev.development-structure {
  border-width: 3px;
  border-style: double;
  color: var(--color-success);
}

.conversation-timecanvas-branch-lines {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: visible;
  pointer-events: none;
}

.conversation-timecanvas-branch-lines > path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-dasharray: 7 5;
  vector-effect: non-scaling-stroke;
  animation: conversation-timecanvas-branch-flow .42s ease-out both;
}

.conversation-timecanvas-branch-lines > path.content-link {
  stroke: var(--color-success);
}

.conversation-timecanvas-branch-lines > path.media-object-link {
  stroke: color-mix(in srgb, var(--accent) 74%, var(--text-secondary));
  stroke-width: 1.5;
  stroke-dasharray: none;
}

.conversation-timecanvas-branch-lines > path.media-object-link.kind-mermaid {
  stroke: color-mix(in srgb, var(--color-info) 72%, var(--accent));
}

.conversation-timecanvas-branch-lines > path.content-update-hit {
  pointer-events: stroke;
  stroke: transparent;
  stroke-width: 16;
  stroke-dasharray: none;
  cursor: pointer;
  animation: none;
  outline: none;
}

.conversation-timecanvas-branch-lines > path.content-update-hit:focus-visible,
.conversation-timecanvas-branch-lines > path.content-update-link[data-change-active] {
  stroke: var(--accent);
  stroke-width: 3;
  outline: none;
}

.conversation-timecanvas-content-artifact .content-change-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-block: 10px;
}

.conversation-timecanvas-content-artifact select {
  max-width: 100%;
  color: var(--text-primary);
  background: var(--surface);
}

.conversation-timecanvas-content-artifact .content-change-controls :is(select, button) {
  font: inherit;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 0;
  padding: 4px 6px;
}

.conversation-timecanvas-content-artifact .content-change-status {
  /* Changing hover must not resize/re-dock the very connector being hovered. */
  box-sizing: border-box;
  height: 60px;
  overflow: auto;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-secondary);
  border-inline-start: 2px solid var(--accent);
  padding-inline-start: 8px;
}

.conversation-timecanvas-content-artifact mark.content-update-highlight {
  color: var(--text-primary);
  background: color-mix(in srgb, var(--accent) 28%, var(--surface));
  box-shadow: 0 1px 0 var(--accent);
  font-style: inherit;
}

.conversation-timecanvas-branch-lines marker path {
  fill: var(--accent);
  stroke: none;
}

.conversation-timecanvas-bridge-motion-path {
  fill: none;
  stroke: none !important;
  animation: none !important;
}

.conversation-timecanvas-bridge-motion-dot {
  fill: var(--white);
  stroke: var(--accent);
  stroke-width: 2;
  filter: drop-shadow(0 0 5px var(--accent));
  pointer-events: none;
}

.conversation-timecanvas-card.message-bridge {
  z-index: 4;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 72%, var(--border-strong));
}

.conversation-timecanvas-media-object {
  box-sizing: border-box;
  position: absolute;
  z-index: 4;
  display: flex;
  flex-direction: column;
  margin: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 52%, var(--border-strong));
  border-radius: 2px;
  color: var(--text-primary);
  background: color-mix(in srgb, var(--surface) 95%, var(--accent));
  box-shadow: 0 18px 48px color-mix(in srgb, #000 25%, transparent);
  contain: layout paint style;
  content-visibility: auto;
  contain-intrinsic-size: 544px 337px;
}

.conversation-timecanvas-media-object figcaption > button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.conversation-timecanvas-media-object figcaption {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 var(--timecanvas-media-header-height, 38px);
  height: var(--timecanvas-media-header-height, 38px);
  min-height: 0;
  padding: 7px 10px 6px;
  overflow: hidden;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border));
  color: var(--text-muted);
  font: 700 9px/1.35 var(--font-mono);
  letter-spacing: .08em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.conversation-timecanvas-media-object figcaption > span {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Even a native 100px image keeps all three header actions reachable. */
.conversation-timecanvas-media-object.is-narrow figcaption { padding-inline: 4px; gap: 3px; }
/* Bildvorschau auf ein Zehntel (26.09.): Der Titel passt nicht mehr und stand
   als abgeschnittenes „E" da — schmal zählen nur die Knöpfe (Vergrößern,
   Fokus); der Name steht im Tooltip und in der großen Ansicht. */
.conversation-timecanvas-media-object.is-narrow figcaption > span { display: none; }

.conversation-timecanvas-media-object [data-media-drag-handle] {
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.conversation-timecanvas-media-object [data-media-drag-handle]:active { cursor: grabbing; }

.conversation-timecanvas-media-object.kind-content-post .conversation-timecanvas-media-body {
  position: relative;
  display: block;
  padding: 12px;
  font-size: 12px;
  line-height: 1.48;
}

/* The window owns scrolling; avoid a second, nested 420px scroll pane. */
.conversation-timecanvas-media-object.kind-content-post .content-post-body {
  max-height: none;
  overflow: visible;
}

.conversation-timecanvas-content-artifact {
  overflow-wrap: anywhere;
}

/* Measure the document, not the scroll window; include collapsed margins. */
.conversation-timecanvas-document-measure { display: flow-root; }

/* The reference belongs inside the finite CSS3D card, before its scrollable
 * update body. The old 100%-tall IACP child pushed this port below the surface. */
.conversation-timecanvas-card.canonical-iacp-event .conversation-timecanvas-content-update .iacp-event-card {
  min-height: 0;
}

.conversation-timecanvas-content-artifact > small {
  display: block;
  opacity: 0.7;
  margin: 6px 0 12px;
}

.conversation-timecanvas-media-file {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px;
  font-size: 13px;
  text-align: center;
}

.conversation-timecanvas-media-file > span { color: var(--text-muted); }

.conversation-timecanvas-media-object figcaption > button {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  cursor: pointer;
}

.conversation-timecanvas-media-body img,
.conversation-timecanvas-media-body svg {
  cursor: pointer;
}

.conversation-timecanvas-media-body {
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  display: grid;
  place-items: center;
  overflow: auto;
  overscroll-behavior: contain;
  touch-action: pan-x pan-y;
  user-select: text;
  -webkit-user-select: text;
}

.conversation-timecanvas-media-body > a {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}

.conversation-timecanvas-media-body img,
.conversation-timecanvas-media-body video,
.conversation-timecanvas-media-body .inline-media-img,
.conversation-timecanvas-media-body .inline-media-video {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
  object-fit: contain;
}

.conversation-timecanvas-media-body .v2-mermaid {
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 14px;
}

.conversation-timecanvas-media-body .v2-mermaid svg {
  width: 100%;
  height: auto;
  max-height: 100%;
}

.conversation-timecanvas-bridge-endpoint {
  position: absolute;
  z-index: 5;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  color: var(--accent);
  background: var(--surface);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.conversation-timecanvas-bridge-port {
  position: absolute;
  width: 9px;
  height: 9px;
  z-index: 5;
  border: 2px solid var(--surface);
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.conversation-timecanvas-world.orientation-horizontal .conversation-timecanvas-bridge-port {
  left: 50%;
  transform: translateX(-50%);
}

.conversation-timecanvas-world.orientation-horizontal .conversation-timecanvas-bridge-port.is-entry {
  top: -5px;
}

.conversation-timecanvas-world.orientation-horizontal .conversation-timecanvas-bridge-port.is-exit {
  bottom: -5px;
}

.conversation-timecanvas-world.orientation-vertical .conversation-timecanvas-bridge-port {
  top: 50%;
  transform: translateY(-50%);
}

.conversation-timecanvas-world.orientation-vertical .conversation-timecanvas-bridge-port.is-entry {
  left: -5px;
}

.conversation-timecanvas-world.orientation-vertical .conversation-timecanvas-bridge-port.is-exit {
  right: -5px;
}

.conversation-timecanvas-related-lane {
  position: absolute;
  z-index: 1;
}

.conversation-timecanvas-related-lane > .conversation-timecanvas-axis {
  background: var(--timeline-lane-color, var(--accent));
  transform-origin: 0 50%;
  animation: conversation-timecanvas-lane-grow .68s .18s cubic-bezier(.2, .72, .25, 1) both;
}

.conversation-timecanvas-related-lane.orientation-vertical > .conversation-timecanvas-axis {
  transform-origin: 50% 0;
  animation-name: conversation-timecanvas-lane-grow-vertical;
}

.conversation-timecanvas-related-lane > :not(.conversation-timecanvas-axis) {
  opacity: 0;
  animation: conversation-timecanvas-lane-content-reveal .46s .78s cubic-bezier(.2, .72, .25, 1) forwards;
}

.conversation-timecanvas-content-branch > header {
  position: absolute;
  top: 10px;
  left: 12px;
  z-index: 6;
  min-height: 32px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 7px;
  border: 1px solid var(--border-strong);
  color: var(--accent);
  background: var(--surface);
  font: 700 9px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.conversation-timecanvas-content-branch > header button,
.conversation-timecanvas-branch-state button {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  color: var(--text-muted);
  background: transparent;
  cursor: pointer;
}

.conversation-timecanvas-content-branch > header button:hover,
.conversation-timecanvas-content-branch > header button:focus-visible,
.conversation-timecanvas-branch-state button:hover,
.conversation-timecanvas-branch-state button:focus-visible {
  color: var(--accent);
  outline: 1px solid var(--accent);
}

.conversation-timecanvas-lane-anchors {
  position: absolute;
  inset: 0;
  z-index: 9;
  overflow: hidden;
  pointer-events: none;
}

.conversation-timecanvas-lane-anchor {
  position: absolute;
  top: 0;
  left: 0;
  max-width: min(160px, calc(100% - 16px));
  height: 22px;
  display: inline-flex;
  align-items: center;
  padding: 0 7px;
  border: 1px solid var(--timeline-lane-color, var(--border-strong));
  overflow: hidden;
  color: var(--timeline-lane-color, var(--text-primary));
  background: var(--surface);
  font: 700 9px/1 var(--font-mono);
  text-overflow: ellipsis;
  white-space: nowrap;
  will-change: transform;
}

.conversation-timecanvas-lane-anchor[hidden] { display: none; }

.conversation-timecanvas-lane-anchor.orientation-vertical {
  top: 8px;
  left: 0;
}

.conversation-timecanvas-lane-anchor strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conversation-timecanvas-content-branch {
  position: absolute;
  z-index: 4;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--color-success);
  background: var(--surface);
  box-shadow: 0 18px 54px color-mix(in srgb, var(--text-primary) 10%, transparent);
  animation: conversation-timecanvas-lane-arrive .28s ease-out both;
}

.conversation-timecanvas-content-branch > header {
  position: relative;
  inset: auto;
  flex: 0 0 auto;
  border: 0;
  border-bottom: 1px solid var(--border);
  color: var(--color-success);
}

.conversation-timecanvas-content-branch > header strong {
  flex: 1 1 auto;
}

.conversation-timecanvas-content-branch > header small {
  color: var(--text-muted);
}

.conversation-timecanvas-content-body {
  min-height: 0;
  flex: 1 1 auto;
  padding: 10px;
  overflow: auto;
  overscroll-behavior: contain;
  cursor: auto;
  -webkit-touch-callout: default;
  -webkit-user-select: text;
  user-select: text;
}

.conversation-timecanvas-content-body .content-post-embed {
  margin: 0;
}

.conversation-timecanvas-branch-state {
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 11px;
  border: 1px solid var(--accent);
  color: var(--text-secondary);
  background: var(--surface);
  font: 10px/1.4 var(--font-mono);
  animation: conversation-timecanvas-lane-arrive .28s ease-out both;
}

.conversation-timecanvas-branch-state.failed {
  border-color: var(--color-warning);
}

.conversation-timecanvas-branch-state.missing {
  border-color: var(--border-strong);
  color: var(--text-muted);
}

.conversation-timecanvas-branch-state span {
  min-width: 0;
  flex: 1 1 auto;
}

.conversation-timecanvas-branch-state strong {
  color: var(--text-primary);
}

@keyframes conversation-timecanvas-lane-arrive {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes conversation-timecanvas-agent-active {
  50% { transform: scale(1.1); }
}

@keyframes conversation-timecanvas-agent-flow-x {
  from { left: 0; opacity: .46; }
  50% { opacity: 1; }
  to { left: calc(100% - 68px); opacity: .46; }
}

@keyframes conversation-timecanvas-agent-flow-y {
  from { top: 0; opacity: .46; }
  50% { opacity: 1; }
  to { top: calc(100% - 68px); opacity: .46; }
}

@keyframes conversation-timecanvas-segment-grow { to { stroke-dashoffset: 0; } }

@keyframes conversation-timecanvas-event-reveal {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes conversation-timecanvas-lane-grow {
  from { opacity: 0; transform: scaleX(0); }
  to { opacity: 1; transform: scaleX(1); }
}

@keyframes conversation-timecanvas-lane-grow-vertical {
  from { opacity: 0; transform: scaleY(0); }
  to { opacity: 1; transform: scaleY(1); }
}

@keyframes conversation-timecanvas-lane-content-reveal {
  /* Child types own different geometry transforms (axis icons are centred
     with translate(-50%, -50%), change icons rotate, episodes offset). A
     shared transform animation would replace those transforms permanently. */
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes conversation-timecanvas-branch-flow {
  from { opacity: 0; stroke-dashoffset: 24; }
  to { opacity: 1; stroke-dashoffset: 0; }
}

.conversation-timecanvas-controls {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 10;
  display: flex;
  align-items: stretch;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  box-shadow: 0 12px 38px color-mix(in srgb, var(--text-primary) 12%, transparent);
}

/* Spatial controls may exceed even a desktop viewport. Keep the mode switch
   reachable instead of letting the left buttons fall outside the canvas.
   Camera settings already render their popover in a body portal. */
.geometry-three-perspective .conversation-timecanvas-controls {
  max-width: calc(100% - 24px);
  overflow-x: auto;
  scrollbar-width: thin;
}
.geometry-three-perspective .conversation-timecanvas-controls > * {
  flex-shrink: 0;
}

.conversation-timecanvas.is-ar-active .conversation-timecanvas-controls > :not(.conversation-timecanvas-ar-control) {
  display: none;
}
.conversation-timecanvas.is-ar-active .conversation-timecanvas-controls > .conversation-timecanvas-three-scale {
  display: inline-flex;
}

.conversation-timecanvas-three-scale {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 9px;
  border-left: 1px solid var(--border);
  color: var(--text-muted);
  font: 600 9px/1 var(--font-mono);
  text-transform: uppercase;
}
.conversation-timecanvas-three-scale input { width: 88px; accent-color: var(--accent); }
.conversation-timecanvas-three-scale output { min-width: 30px; color: var(--text-primary); }

.conversation-timecanvas-controls .conversation-timecanvas-ar-control {
  color: var(--accent);
}

.conversation-timecanvas-marker-navigation {
  display: inline-flex;
  align-items: stretch;
  min-width: 148px;
  border-left: 1px solid var(--border);
  background: var(--surface);
}

.conversation-timecanvas-marker-navigation > button {
  border-left: 0;
}

.conversation-timecanvas-marker-navigation-label {
  min-width: 82px;
  max-width: 148px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 5px 7px;
  border-inline: 1px solid var(--border);
  color: var(--text-primary);
  font: 700 9px/1 var(--font-mono);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.conversation-timecanvas-scale {
  min-width: 192px;
  display: grid;
  align-content: center;
  gap: 2px;
  padding: 4px 8px;
  border-left: 1px solid var(--border);
  color: var(--text-muted);
  background: var(--surface);
  font: 700 8px/1 var(--font-mono);
  text-align: center;
  white-space: nowrap;
}

.conversation-timecanvas-scale input { width: 176px; accent-color: var(--accent); }

.conversation-timecanvas-agent-picker {
  position: absolute;
  right: 12px;
  bottom: 58px;
  z-index: 12;
  width: min(360px, calc(100% - 24px));
  max-height: min(560px, calc(100% - 82px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  box-shadow: 0 18px 54px color-mix(in srgb, var(--text-primary) 16%, transparent);
}

.conversation-timecanvas-agent-picker > header {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border-bottom: 1px solid var(--border);
  color: var(--accent);
}

.conversation-timecanvas-agent-picker > header strong {
  flex: 1 1 auto;
  font: 700 10px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.conversation-timecanvas-agent-picker > header button {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  color: var(--text-muted);
  background: transparent;
}

.conversation-timecanvas-agent-picker-modes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--border);
}

.conversation-timecanvas-agent-picker-modes button {
  min-height: 38px;
  border: 0;
  border-right: 1px solid var(--border);
  color: var(--text-muted);
  background: transparent;
  font: 700 9px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.conversation-timecanvas-agent-picker-modes button:last-child { border-right: 0; }
.conversation-timecanvas-agent-picker-modes button.active {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 9%, var(--surface));
}

.conversation-timecanvas-agent-picker-info {
  display: grid;
  gap: 6px;
  padding: 14px;
  color: var(--text-secondary);
  font: 10px/1.4 var(--font-mono);
}

.conversation-timecanvas-agent-picker-info strong { color: var(--text-primary); }
.conversation-timecanvas-agent-picker-info small { color: var(--text-muted); }

.conversation-timecanvas-agent-search {
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 9px;
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
}

.conversation-timecanvas-agent-search input {
  min-width: 0;
  flex: 1 1 auto;
  border: 0;
  outline: 0;
  color: var(--text-primary);
  background: transparent;
  font: 11px/1.2 var(--font-mono);
}

.conversation-timecanvas-agent-list {
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
}

.conversation-timecanvas-agent-list > button {
  width: 100%;
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 9px;
  border: 0;
  border-bottom: 1px solid var(--border);
  color: var(--text-secondary);
  background: transparent;
  text-align: left;
}

.conversation-timecanvas-agent-list > button.selected {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}

.conversation-timecanvas-agent-list .conversation-timecanvas-identity {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
}

.conversation-timecanvas-agent-list .conversation-timecanvas-identity img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.conversation-timecanvas-agent-list > button > span:not(.conversation-timecanvas-identity) {
  min-width: 0;
  display: grid;
  flex: 1 1 auto;
  gap: 3px;
}

.conversation-timecanvas-agent-list strong,
.conversation-timecanvas-agent-list small {
  overflow: hidden;
  font-family: var(--font-mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conversation-timecanvas-agent-list strong { font-size: 10px; }
.conversation-timecanvas-agent-list small { color: var(--text-muted); font-size: 8px; }
.conversation-timecanvas-agent-list b { font: 700 13px/1 var(--font-mono); }

.conversation-timecanvas-agent-picker > footer {
  padding: 8px 10px;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font: 9px/1 var(--font-mono);
}

.conversation-timecanvas-controls button,
.conversation-timecanvas-zoom {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 5px 9px;
  border: 0;
  border-left: 1px solid var(--border);
  border-radius: 0;
  color: var(--text-muted);
  background: var(--surface);
  font: 600 9px/1 var(--font-mono);
  text-transform: uppercase;
  cursor: pointer;
}

.conversation-timecanvas-controls button:first-child { border-left: 0; }
.conversation-timecanvas-controls button:hover { color: var(--text-primary); background: var(--hover-bg); }
.conversation-timecanvas-controls button.active { color: var(--white); background: var(--chip-active-bg); }
.conversation-timecanvas-controls button:disabled { opacity: .5; cursor: default; }

/* A dialog is an ordinal column, not the former time rail with displaced cards.
   The SVG/WebGL segments, icons and ownership routes share its world points. */
.conversation-timecanvas-world.dialog-columns .conversation-timecanvas-axis { display: none; }
.conversation-timecanvas-world.dialog-columns .conversation-timecanvas-episode {
  transform: none;
  padding: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.conversation-timecanvas-world.dialog-columns .conversation-timecanvas-episode::before { display: none; }
.conversation-timecanvas-world.dialog-columns .conversation-timecanvas-episode strong { max-width: none; }
.conversation-timecanvas-world.dialog-columns .conversation-timecanvas-node-anchor:not([data-collab-track='collab'])::before {
  top: 18px;
  left: 18px;
  width: var(--timecanvas-node-connector);
  height: 1px;
  transform: none;
}
.conversation-timecanvas-world.dialog-columns .conversation-timecanvas-card.side-after .conversation-timecanvas-port {
  left: -5px;
  top: 19px;
  bottom: auto;
  transform: none;
}
/* Keine runden Ecken: auch der Dialogstapel-Schalter ist eckig wie jeder Knopf (Alex 25.09.). */
.conversation-timecanvas-collab-heading {
  position: absolute;
  display: grid;
  gap: 3px;
  max-width: 300px;
  font-size: 11px;
  color: var(--text-secondary);
  pointer-events: none;
}
.conversation-timecanvas-collab-heading strong {
  font-size: 12px;
  font-weight: 500;
  overflow-wrap: anywhere;
}
.conversation-timecanvas-context-label {
  padding: 5px 12px;
  font-size: 10px;
  line-height: 1.4;
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}
.conversation-timecanvas-dialog-hint {
  align-self: center;
  padding: 0 8px;
  color: var(--text-muted);
  font-size: 10px;
  white-space: nowrap;
}
.conversation-timecanvas-zoom { min-width: 50px; }

.conversation-timecanvas-detail-backdrop {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: calc(var(--agent-hdr-h, 72px) + 18px) 18px calc(var(--agent-ftr-h, 76px) + 18px);
  background: color-mix(in srgb, var(--bg) 58%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.conversation-timecanvas-detail {
  width: min(760px, 100%);
  max-height: min(72vh, 680px);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-strong);
  border-radius: 0;
  background: var(--surface);
  box-shadow: 0 28px 90px color-mix(in srgb, var(--text-primary) 20%, transparent);
}

.conversation-timecanvas-detail > header {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border-bottom: 1px solid var(--border);
}

.conversation-timecanvas-detail > header strong { flex: 1 1 auto; font: 700 11px/1 var(--font-mono); }
.conversation-timecanvas-detail > header time { color: var(--text-muted); font: 9px/1 var(--font-mono); }
.conversation-timecanvas-detail > header button {
  width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: 0;
  color: var(--text-muted);
  background: transparent;
  cursor: pointer;
}

.conversation-timecanvas-detail-body {
  min-height: 0;
  padding: 14px;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-touch-callout: default;
  -webkit-user-select: text;
  user-select: text;
}

.conversation-timecanvas-detail-body .entry-content { padding: 0; }

.conversation-timecanvas-detail-event + .conversation-timecanvas-detail-event {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.conversation-timecanvas-detail-event > h3 {
  margin: 0 0 8px;
  color: var(--text-muted);
  font: 700 10px/1.3 var(--font-mono);
}

@media (max-width: 700px) {
  .conversation-timecanvas-controls {
    right: 6px;
    bottom: 6px;
    left: 6px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .conversation-timecanvas-controls::-webkit-scrollbar { display: none; }
  .conversation-timecanvas-controls button,
  .conversation-timecanvas-zoom { flex: 0 0 auto; min-height: 34px; padding-inline: 8px; }
  .conversation-timecanvas-marker-navigation { flex: 0 0 auto; min-width: 132px; }
  .conversation-timecanvas-scale { flex: 0 0 164px; padding-inline: 6px; }
  .conversation-timecanvas-scale input { width: 150px; }
  .conversation-timecanvas-detail-backdrop { padding-inline: 8px; }
  .conversation-timecanvas-lane-anchor { max-width: 42vw; }
}

@media (prefers-reduced-motion: reduce) {
  .conversation-timecanvas-world { will-change: auto; }
  .conversation-timecanvas-related-lane,
  .conversation-timecanvas-related-lane > .conversation-timecanvas-axis,
  .conversation-timecanvas-related-lane > :not(.conversation-timecanvas-axis),
  .conversation-timecanvas-branch-lines > path,
  .conversation-timecanvas-segments line.live-arrival,
  .conversation-timecanvas-node-anchor.live-arrival,
  .conversation-timecanvas-dev.live-arrival,
  .conversation-timecanvas-card.live-arrival,
  .conversation-timecanvas-content-branch,
  .conversation-timecanvas-branch-state { animation: none; }
  .conversation-timecanvas-bridge-motion-dot { display: none; }
  .conversation-timecanvas-axis.state-working::after,
  .conversation-timecanvas-axis.state-restarting::after { display: none; }
  .conversation-timecanvas-node-anchor.is-live-end.state-working > button,
  .conversation-timecanvas-node-anchor.is-live-end.state-working > span,
  .conversation-timecanvas-node-anchor.is-live-end.state-restarting > button,
  .conversation-timecanvas-node-anchor.is-live-end.state-restarting > span { animation: none; }
  .conversation-timecanvas-related-lane > :not(.conversation-timecanvas-axis) { opacity: 1; }
  .conversation-timecanvas-node-anchor.live-arrival,
  .conversation-timecanvas-dev.live-arrival,
  .conversation-timecanvas-card.live-arrival { opacity: 1; transform: none; }
}
.conversation-timecanvas-reading-notice {
  position: absolute;
  bottom: 64px;
  left: 12px;
  max-width: calc(100% - 24px);
  padding: 5px 9px;
  border-radius: 8px;
  background: rgba(16, 27, 40, .9);
  color: #d6e1ed;
  font: 12px/1.4 system-ui, sans-serif;
  pointer-events: none;
}

/* Denkstand: der Gedanke des Agenten, leiser als seine Antwort (26.09.). */
.conversation-timecanvas-card-text.is-denkstand {
  color: var(--text-secondary);
  font-style: italic;
}

/* Dauer der Dialogrunde (#2083): leiser als Datum/Uhrzeit, gleiche Schrift. */
.conversation-timecanvas-episode-spanne {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  white-space: nowrap;
}
.conversation-timecanvas-episode-spanne::before { content: '· '; }
:root {
  /* `--white` is the ALWAYS-white "on-accent / on-dark" ink (white icon on
     an orange button) — it does NOT flip in dark mode. `--surface` is the
     theme-aware page/card background (was conflated into --white before the
     dark-mode split, Alex 2026-06-22). `--chip-active-bg` is the dark pill
     behind active segmented tabs / primary buttons — stays dark in BOTH
     themes (white ink on it reads fine on light or dark surfaces). */
  --white: #FFFFFF;
  --black: #000000;
  --surface: #FFFFFF;
  --chip-active-bg: #333333;
  --text-primary: #333333;
  --text-body: #000000;
  --text-muted: #999999;
  /* ZWEI TOKEN, DIE ES NIE GAB — nachgetragen 27.08.
     `--text-secondary` wurde an 35 Stellen benutzt und war NIRGENDS definiert:
     nicht in dieser Datei, nicht zur Laufzeit (kein setProperty), nicht im
     gebauten Bundle. Dreifach nachgemessen.

     Das ist kein Schoenheitsfehler. Ein undefiniertes Token macht die ganze
     Deklaration zur Rechenzeit ungueltig; bei `color` erbt der Text dann die
     Farbe des Elternteils. Sekundaertext war also ueberall genauso dunkel wie
     Haupttext — die Abstufung, die er ausdruecken soll, existierte nicht.

     Der Wert liegt bewusst ZWISCHEN primary (#333) und muted (#999): Er ist
     leiser als die Hauptaussage, aber noch nicht Beiwerk. `--hover-bg` (2
     Verwendungen) fehlte ebenso. */
  --text-secondary: #666666;
  --hover-bg: #F2F2F2;
  --text-light: #999999;
  --border: #E5E5E5;
  --border-strong: #D0D0D0;
  --bg-light: #F8F8F8;
  --bg-inset: #FAFAFA;
  /* Brand accent = orange (was red #C41E3A). Replaces the AgentOS red
     everywhere --accent is used, incl. the selected left-stripe (Alex 2026-06-22). */
  --accent: #D97706;
  --accent-hover: #B45309;
  --accent-bg: rgba(217, 119, 6, 0.08);
  --accent-bg-strong: rgba(217, 119, 6, 0.15);
  --color-success: #16A34A;
  --color-success-bg: rgba(22, 163, 74, 0.10);
  --color-warning: #D97706;
  --color-warning-bg: rgba(217, 119, 6, 0.10);
  --color-error: #DC2626;
  --color-error-bg: rgba(220, 38, 38, 0.10);
  --color-info: #2563EB;
  --color-info-bg: rgba(37, 99, 235, 0.10);
  /* Dateisorten der Anhänge (Alex 25.09.: „richtige Icons für Word und Excel"):
     die vertrauten Programmfarben, keine Logos. */
  --datei-word: #2B579A;
  --datei-excel: #217346;
  --datei-powerpoint: #C43E1C;
  --datei-pdf: #D93025;
  --font-body: 'Roboto', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-heading: 'Roboto Flex', 'Roboto', sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
  --sidebar-width: 280px;
}

/* ── Dark theme (Stage 1, Alex 2026-06-22) ──────────────────────────
   Toggled via [data-theme="dark"] on <html> (lib/accent.ts). Only the
   surface/text/border tokens flip — `--white`/`--chip-active-bg` stay so
   on-accent ink + dark pills keep contrast. `--accent`/`--color-success`
   are user-set at runtime and inherit unchanged. Semantic status hues
   (error/warning/info) keep their colour; their *-bg tints read fine as
   low-alpha overlays on the dark surface. */

[data-theme="dark"] {
  --datei-word: #6FA0E8;
  --datei-excel: #4CB782;
  --datei-powerpoint: #F08A6C;
  --datei-pdf: #F2766B;
  --surface: #1A1A1C;
  --bg-light: #232327;
  --bg-inset: #1E1E21;
  --black: #3A3A42;          /* "black" fills become a visible dark pill */
  --chip-active-bg: #3A3A42; /* dark pill, slightly above the surface */
  --text-primary: #E9E9EC;
  --text-body: #F4F4F6;
  --text-muted: #9A9AA3;
  --text-secondary: #B4B4BD;   /* zwischen primary #E9E9EC und muted #9A9AA3 */
  --hover-bg: #26262B;         /* knapp ueber der dunklen Flaeche */
  --text-light: #9A9AA3;
  --border: #34343B;
  --border-strong: #46464F;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  overflow: hidden;
  height: 100%;
  max-width: 100vw;
}

body {
  overflow: hidden;
  height: 100%;
  max-width: 100vw;
}

body {
  background: var(--surface);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--chip-active-bg);
  color: var(--white);
}

::-webkit-scrollbar { width: 4px; height: 4px; }

::-webkit-scrollbar-track { background: transparent; }

::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); border-radius: 2px; }

::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.25); }

/* position: fixed anchors #root to the visual viewport so iOS Safari
 * can't auto-scroll the whole window upward to "reveal" a focused input
 * when the soft keyboard appears. Without this, overflow: hidden on
 * html/body is not enough — the layout viewport stays full-height while
 * the visual viewport collapses, and the system scrolls everything up.
 * Fixed positioning pins the app to the visible area; the visualViewport
 * resize listener in main.tsx keeps --vh in sync. */

#root {
  position: fixed;
  inset: 0;
  display: flex;
  height: calc(var(--vh, 1vh) * 100);
  overflow: hidden;
  width: 100%;
}

/* Suspense fallback while a lazy view-chunk downloads (code-splitting).
   Centered, quiet — chunks are small and cached, so this flashes at
   most once per view per deploy. */

.view-loading {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 13px;
}

/* Collab FAB (S2) — mobile floating "ask a question" button. Square-ish
 * (4px) to match the AgentOS angular style; clears the bottom safe-area. */

.collab-fab {
  position: fixed;
  right: 18px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 18px);
  z-index: 8000;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border: none;
  border-radius: 4px;
  background: var(--accent);
  color: var(--white);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.24);
  cursor: pointer;
}

.collab-fab:active { transform: scale(0.95); }
@font-face{font-display:block;font-family:KaTeX_AMS;font-style:normal;font-weight:400;src:url(/assets/KaTeX_AMS-Regular-BQhdFMY1.woff2) format("woff2"),url(/assets/KaTeX_AMS-Regular-DMm9YOAa.woff) format("woff"),url(/assets/KaTeX_AMS-Regular-DRggAlZN.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Caligraphic;font-style:normal;font-weight:700;src:url(/assets/KaTeX_Caligraphic-Bold-Dq_IR9rO.woff2) format("woff2"),url(/assets/KaTeX_Caligraphic-Bold-BEiXGLvX.woff) format("woff"),url(/assets/KaTeX_Caligraphic-Bold-ATXxdsX0.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Caligraphic;font-style:normal;font-weight:400;src:url(/assets/KaTeX_Caligraphic-Regular-Di6jR-x-.woff2) format("woff2"),url(/assets/KaTeX_Caligraphic-Regular-CTRA-rTL.woff) format("woff"),url(/assets/KaTeX_Caligraphic-Regular-wX97UBjC.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Fraktur;font-style:normal;font-weight:700;src:url(/assets/KaTeX_Fraktur-Bold-CL6g_b3V.woff2) format("woff2"),url(/assets/KaTeX_Fraktur-Bold-BsDP51OF.woff) format("woff"),url(/assets/KaTeX_Fraktur-Bold-BdnERNNW.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Fraktur;font-style:normal;font-weight:400;src:url(/assets/KaTeX_Fraktur-Regular-CTYiF6lA.woff2) format("woff2"),url(/assets/KaTeX_Fraktur-Regular-Dxdc4cR9.woff) format("woff"),url(/assets/KaTeX_Fraktur-Regular-CB_wures.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Main;font-style:normal;font-weight:700;src:url(/assets/KaTeX_Main-Bold-Cx986IdX.woff2) format("woff2"),url(/assets/KaTeX_Main-Bold-Jm3AIy58.woff) format("woff"),url(/assets/KaTeX_Main-Bold-waoOVXN0.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Main;font-style:italic;font-weight:700;src:url(/assets/KaTeX_Main-BoldItalic-DxDJ3AOS.woff2) format("woff2"),url(/assets/KaTeX_Main-BoldItalic-SpSLRI95.woff) format("woff"),url(/assets/KaTeX_Main-BoldItalic-DzxPMmG6.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Main;font-style:italic;font-weight:400;src:url(/assets/KaTeX_Main-Italic-NWA7e6Wa.woff2) format("woff2"),url(/assets/KaTeX_Main-Italic-BMLOBm91.woff) format("woff"),url(/assets/KaTeX_Main-Italic-3WenGoN9.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Main;font-style:normal;font-weight:400;src:url(/assets/KaTeX_Main-Regular-B22Nviop.woff2) format("woff2"),url(/assets/KaTeX_Main-Regular-Dr94JaBh.woff) format("woff"),url(/assets/KaTeX_Main-Regular-ypZvNtVU.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Math;font-style:italic;font-weight:700;src:url(/assets/KaTeX_Math-BoldItalic-CZnvNsCZ.woff2) format("woff2"),url(/assets/KaTeX_Math-BoldItalic-iY-2wyZ7.woff) format("woff"),url(/assets/KaTeX_Math-BoldItalic-B3XSjfu4.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Math;font-style:italic;font-weight:400;src:url(/assets/KaTeX_Math-Italic-t53AETM-.woff2) format("woff2"),url(/assets/KaTeX_Math-Italic-DA0__PXp.woff) format("woff"),url(/assets/KaTeX_Math-Italic-flOr_0UB.ttf) format("truetype")}@font-face{font-display:block;font-family:"KaTeX_SansSerif";font-style:normal;font-weight:700;src:url(/assets/KaTeX_SansSerif-Bold-D1sUS0GD.woff2) format("woff2"),url(/assets/KaTeX_SansSerif-Bold-DbIhKOiC.woff) format("woff"),url(/assets/KaTeX_SansSerif-Bold-CFMepnvq.ttf) format("truetype")}@font-face{font-display:block;font-family:"KaTeX_SansSerif";font-style:italic;font-weight:400;src:url(/assets/KaTeX_SansSerif-Italic-C3H0VqGB.woff2) format("woff2"),url(/assets/KaTeX_SansSerif-Italic-DN2j7dab.woff) format("woff"),url(/assets/KaTeX_SansSerif-Italic-YYjJ1zSn.ttf) format("truetype")}@font-face{font-display:block;font-family:"KaTeX_SansSerif";font-style:normal;font-weight:400;src:url(/assets/KaTeX_SansSerif-Regular-DDBCnlJ7.woff2) format("woff2"),url(/assets/KaTeX_SansSerif-Regular-CS6fqUqJ.woff) format("woff"),url(/assets/KaTeX_SansSerif-Regular-BNo7hRIc.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Script;font-style:normal;font-weight:400;src:url(/assets/KaTeX_Script-Regular-D3wIWfF6.woff2) format("woff2"),url(/assets/KaTeX_Script-Regular-D5yQViql.woff) format("woff"),url(/assets/KaTeX_Script-Regular-C5JkGWo-.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Size1;font-style:normal;font-weight:400;src:url(/assets/KaTeX_Size1-Regular-mCD8mA8B.woff2) format("woff2"),url(/assets/KaTeX_Size1-Regular-C195tn64.woff) format("woff"),url(/assets/KaTeX_Size1-Regular-Dbsnue_I.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Size2;font-style:normal;font-weight:400;src:url(/assets/KaTeX_Size2-Regular-Dy4dx90m.woff2) format("woff2"),url(/assets/KaTeX_Size2-Regular-oD1tc_U0.woff) format("woff"),url(/assets/KaTeX_Size2-Regular-B7gKUWhC.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Size3;font-style:normal;font-weight:400;src:url(data:font/woff2;base64,d09GMgABAAAAAA4oAA4AAAAAHbQAAA3TAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAABmAAgRQIDgmcDBEICo1oijYBNgIkA14LMgAEIAWJAAeBHAyBHBvbGiMRdnO0IkRRkiYDgr9KsJ1NUAf2kILNxgUmgqIgq1P89vcbIcmsQbRps3vCcXdYOKSWEPEKgZgQkprQQsxIXUgq0DqpGKmIvrgkeVGtEQD9DzAO29fM9jYhxZEsL2FeURH2JN4MIcTdO049NCVdxQ/w9NrSYFEBKTDKpLKfNkCGDc1RwjZLQcm3vqJ2UW9Xfa3tgAHz6ivp6vgC2yD4/6352ndnN0X0TL7seypkjZlMsjmZnf0Mm5Q+JykRWQBKCVCVPbARPXWyQtb5VgLB6Biq7/Uixcj2WGqdI8tGSgkuRG+t910GKP2D7AQH0DB9FMDW/obJZ8giFI3Wg8Cvevz0M+5m0rTh7XDBlvo9Y4vm13EXmfttwI4mBo1EG15fxJhUiCLbiiyCf/ZA6MFAhg3pGIZGdGIVjtPn6UcMk9A/UUr9PhoNsCENw1APAq0gpH73e+M+0ueyHbabc3vkbcdtzcf/fiy+NxQEjf9ud/ELBHAXJ0nk4z+MXH2Ev/kWyV4k7SkvpPc9Qr38F6RPWnM9cN6DJ0AdD1BhtgABtmoRoFCvPsBAumNm6soZG2Gk5GyVTo2sJncSyp0jQTYoR6WDvTwaaEcHsxHfvuWhHA3a6bN7twRKtcGok6NsCi7jYRrM2jExsUFMxMQYuJbMhuWNOumEJy9hi29Dmg5zMp/A5+hhPG19j1vBrq8JTLr8ki5VLPmG/PynJHVul440bxg5xuymHUFPBshC+nA9I1FmwbRBTNHAcik3Oae0cxKoI3MOriM42UrPe51nsaGxJ+WfXubAsP84aabUlQSJ1IiE0iPETLUU4CATgfXSCSpuRFRmCGbO+wSpAnzaeaCYW1VNEysRtuXCEL1kUFUbbtMv3Tilt/1c11jt3Q5bbMa84cpWipp8Elw3MZhOHsOlwwVUQM3lAR35JiFQbaYCRnMF2lxAWoOg2gyoIV4PouX8HytNIfLhqpJtXB4vjiViUI8IJ7bkC4ikkQvKksnOTKICwnqWSZ9YS5f0WCxmpgjbIq7EJcM4aI2nmhLNY2JIUgOjXZFWBHb+x5oh6cwb0Tv1ackHdKi0I9OO2wE9aogIOn540CCCziyhN+IaejtgAONKznHlHyutPrHGwCx9S6B8kfS4Mfi4Eyv7OU730bT1SCBjt834cXsf43zVjPUqqJjgrjeGnBxSG4aYAKFuVbeCfkDIjAqMb6yLNIbCuvXhMH2/+k2vkNpkORhR59N1CkzoOENvneIosjYmuTxlhUzaGEJQ/iWqx4dmwpmKjrwTiTGTCVozNAYqk/zXOndWxuWSmJkQpJw3pK5KX6QrLt5LATMqpmPAQhkhK6PUjzHUn7E0gHE0kPE0iKkolgkUx9SZmVAdDgpffdyJKg3k7VmzYGCwVXGz/tXmkOIp+vcWs+EMuhhvN0h9uhfzWJziBQmCREGSIFmQIkgVpAnSBRmC//6hkLZwaVhwxlrJSOdqlFtOYxlau9F2QN5Y98xmIAsiM1HVp2VFX+DHHGg6Ecjh3vmqtidX3qHI2qycTk/iwxSt5UzTmEP92ZBnEWTk4Mx8Mpl78ZDokxg/KWb+Q0QkvdKVmq3TMW+RXEgrsziSAfNXFMhDc60N5N9jQzjfO0kBKpUZl0ZmwJ41j/B9Hz6wmRaJB84niNmQrzp9eSlQCDDzazGDdVi3P36VZQ+Jy4f9UBNp+3zTjqI4abaFAm+GShVaXlsGdF3FYzZcDI6cori4kMxUECl9IjJZpzkvitAoxKue+90pDMvcKRxLl53TmOKCmV/xRolNKSqqUxc6LStOETmFOiLZZptlZepcKiAzteG8PEdpnQpbOMNcMsR4RR2Bs0cKFEvSmIjAFcnarqwUL4lDhHmnVkwu1IwshbiCcgvOheZuYyOteufZZwlcTlLgnZ3o/WcYdzZHW/WGaqaVfmTZ1aWCceJjkbZqsfbkOtcFlUZM/jy+hXHDbaUobWqqXaeWobbLO99yG5N3U4wxco0rQGGcOLASFMXeJoham8M+/x6O2WywK2l4HGbq1CoUyC/IZikQhdq3SiuNrvAEj0AVu9x2x3lp/xWzahaxidezFVtdcb5uEnzyl0ZmYiuKI0exvCd4Xc9CV1KB0db00z92wDPde0kukbvZIWN6jUWFTmPIC/Y4UPCm8UfDTFZpZNon1qLFTkBhxzB+FjQRA2Q/YRJT8pQigslMaUpFyAG8TMlXigiqmAZX4xgijKjRlGpLE0GdplRfCaJo0JQaSxNBk6ZmMzcya0FmrcisDdn0Q3HI2sWSppYigmlM1XT/kLQZSNpMJG0WkjYbSZuDpM1F0uYhFc1HxU4m1QJjDK6iL0S5uSj5rgXc3RejEigtcRBtqYPQsiTskmO5vosV+q4VGIKbOkDg0jtRrq+Em1YloaTFar3EGr1EUC8R0kus1Uus00usL97ABr2BjXoDm/QGNhuWtMVBKOwg/i78lT7hBsAvDmwHc/ao3vmUbBmhjeYySZNWvGkfZAgISDSaDo1SVpzGDsAEkF8B+gEapViUoZgUWXcRIGFZNm6gWbAKk0bp0k1MHG9fLYtV4iS2SmLEQFARzRcnf9PUS0LVn05/J9MiRRBU3v2IrvW974v4N00L7ZMk0wXP1409CHo/an8zTRHD3eSJ6m8D4YMkZNl3M79sqeuAsr/m3f+8/yl7A50aiAEJgeBeMWzu7ui9UfUBCe2TIqZIoOd/3/udRBOQidQZUERzb2/VwZN1H/Sju82ew2H2Wfr6qvfVf3hqwDvAIpkQVFy4B9Pe9e4/XvPeceu7h3dvO56iJPf0+A6cqA2ip18ER+iFgggiuOkvj24bby0N9j2UHIkgqIt+sVgfodC4YghLSMjSZbH0VR/6dMDrYJeKHilKTemt6v6kvzvn3/RrdWtr0GoN/xL+Sex/cPYLUpepx9cz/D46UPU5KXgAQa+NDps1v6J3xP1i2HtaDB0M9aX2deA7SYff//+gUCovMmIK/qfsFcOk+4Y5ZN97XlG6zebqtMbKgeRFi51vnxTQYBUik2rS/Cn6PC8ADR8FGxsRPB82dzfND90gIcshOcYUkfjherBz53odpm6TP8txlwOZ71xmfHHOvq053qFF/MRlS3jP0ELudrf2OeN8DHvp6ZceLe8qKYvWz/7yp0u4dKPfli3CYq0O13Ih71mylJ80tOi10On8wi+F4+LWgDPeJ30msSQt9/vkmHq9/Lvo2b461mP801v3W4xTcs6CbvF9UDdrSt+A8OUbpSh55qAUFXWznBBfdeJ8a4d7ugT5tvxUza3h9m4H7ptTqiG4z0g5dc0X29OcGlhpGFMpQo9ytTS+NViZpNdvU4kWx+LKxNY10kQ1yqGXrhe4/1nvP7E+nd5A92TtaRplbHSqoIdOqtRWti+fkB5/n1+/VvCmz12pG1kpQWsfi1ftlBobm0bpngs16CHkbIwdLnParxtTV3QYRlfJ0KFskH7pdN/YDn+yRuSd7sNH3aO0DYPggk6uWuXrfOc+fa3VTxFVvKaNxHsiHmsXyCLIE5yuOeN3/Jdf8HBL/5M6shjyhxHx9BjB1O0+4NLOnjLLSxwO7ukN4jMbOIcD879KLSi6Pk61Oqm2377n8079PXEEQ7cy7OKEC9nbpet118fxweTafpt69x/Bt8UqGzNQt7aelpc44dn5cqhwf71+qKp/Zf/+a0zcizOUWpl/iBcSXip0pplkatCchoH5c5aUM8I7/dWxAej8WicPL1URFZ9BDJelUwEwTkGqUhgSlydVes95YdXvhh9Gfz/aeFWvgVb4tuLbcv4+wLdutVZv/cUonwBD/6eDlE0aSiKK/uoH3+J1wDE/jMVqY2ysGufN84oIXB0sPzy8ollX/LegY74DgJXJR57sn+VGza0x3DnuIgABFM15LmajjjsNlYj+JEZGbuRYcAMOWxFkPN2w6Wd46xo4gVWQR/X4lyI/R6K/YK0110GzudPRW7Y+UOBGTfNNzHeYT0fiH0taunBpq9HEW8OKSaBGj21L0MqenEmNRWBAWDWAk4CpNoEZJ2tTaPFgbQYj8HxtFilErs3BTRwT8uO1NXQaWfIotchmPkAF5mMBAliEmZiOGVgCG9LgRzpscMAOOwowlT3JhusdazXGSC/hxR3UlmWVwWHpOIKheqONvjyhSiTHIkVUco5bnji8m//zL7PKaT1Vl5I6UE609f+gkr6MZKVyKc7zJRmCahLsdlyA5fdQkRSan9LgnnLEyGSkaKJCJog0wAgvepWBt80+1yKln1bMVtCljfNWDueKLsWwaEbBSfSPTEmVRsUcYYMnEjcjeyCZzBXK9E9BYBXLKjOSpUDR+nEV3TFSUdQaz+ot98QxgXwx0GQ+EEUAKB2qZPkQQ0GqFD8UPFMqyaCHM24BZmSGic9EYMagKizOw9Hz50DMrDLrqqLkTAhplMictiCAx5S3BIUQdeJeLnBy2CNtMfz6cV4u8XKoFZQesbf9YZiIERiHjaNodDW6LgcirX/mPnJIkBGDUpTBhSa0EIr38D5hCIszhCM8URGBqImoWjpvpt1ebu/v3Gl3qJfMnNM+9V+kiRFyROTPHQWOcs1dNW94/ukKMPZBvDi55i5CttdeJz84DLngLqjcdwEZ87bFFR8CIG35OAkDVN6VRDZ7aq67NteYqZ2lpT8oYB2CytoBd6VuAx4WgiAsnuj3WohG+LugzXiQRDeM3XYXlULv4dp5VFYC) format("woff2"),url(/assets/KaTeX_Size3-Regular-CTq5MqoE.woff) format("woff"),url(/assets/KaTeX_Size3-Regular-DgpXs0kz.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Size4;font-style:normal;font-weight:400;src:url(/assets/KaTeX_Size4-Regular-Dl5lxZxV.woff2) format("woff2"),url(/assets/KaTeX_Size4-Regular-BF-4gkZK.woff) format("woff"),url(/assets/KaTeX_Size4-Regular-DWFBv043.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Typewriter;font-style:normal;font-weight:400;src:url(/assets/KaTeX_Typewriter-Regular-CO6r4hn1.woff2) format("woff2"),url(/assets/KaTeX_Typewriter-Regular-C0xS9mPB.woff) format("woff"),url(/assets/KaTeX_Typewriter-Regular-D3Ib7_Hf.ttf) format("truetype")}.katex{font:normal 1.21em KaTeX_Main,Times New Roman,serif;line-height:1.2;position:relative;text-indent:0;text-rendering:auto}.katex *{-ms-high-contrast-adjust:none!important;border-color:currentColor}.katex .katex-version:after{content:"0.17.0"}.katex .katex-mathml{border:0;-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;overflow:hidden;padding:0;position:absolute;width:1px}.katex .katex-html>.newline{display:block}.katex .base{position:relative;white-space:nowrap;width:-webkit-min-content;width:-moz-min-content;width:min-content}.katex .base,.katex .strut{display:inline-block}.katex .textbf{font-weight:700}.katex .textit{font-style:italic}.katex .textrm{font-family:KaTeX_Main}.katex .textsf{font-family:KaTeX_SansSerif}.katex .texttt{font-family:KaTeX_Typewriter}.katex .mathnormal{font-family:KaTeX_Math;font-style:italic}.katex .mathit{font-family:KaTeX_Main;font-style:italic}.katex .mathrm{font-style:normal}.katex .mathbf{font-family:KaTeX_Main;font-weight:700}.katex .boldsymbol{font-family:KaTeX_Math;font-style:italic;font-weight:700}.katex .amsrm,.katex .mathbb,.katex .textbb{font-family:KaTeX_AMS}.katex .mathcal{font-family:KaTeX_Caligraphic}.katex .mathfrak,.katex .textfrak{font-family:KaTeX_Fraktur}.katex .mathboldfrak,.katex .textboldfrak{font-family:KaTeX_Fraktur;font-weight:700}.katex .mathtt{font-family:KaTeX_Typewriter}.katex .mathscr,.katex .textscr{font-family:KaTeX_Script}.katex .mathsf,.katex .textsf{font-family:KaTeX_SansSerif}.katex .mathboldsf,.katex .textboldsf{font-family:KaTeX_SansSerif;font-weight:700}.katex .mathitsf,.katex .mathsfit,.katex .textitsf{font-family:KaTeX_SansSerif;font-style:italic}.katex .mainrm{font-family:KaTeX_Main;font-style:normal}.katex .vlist-t{border-collapse:collapse;display:inline-table;table-layout:fixed}.katex .vlist-r{display:table-row}.katex .vlist{display:table-cell;position:relative;vertical-align:bottom}.katex .vlist>span{display:block;height:0;position:relative}.katex .vlist>span>span{display:inline-block}.katex .vlist>span>.pstrut{overflow:hidden;width:0}.katex .vlist-t2{margin-right:-2px}.katex .vlist-s{display:table-cell;font-size:1px;min-width:2px;vertical-align:bottom;width:2px}.katex .vbox{align-items:baseline;display:inline-flex;flex-direction:column}.katex .hbox{width:100%}.katex .hbox,.katex .thinbox{display:inline-flex;flex-direction:row}.katex .thinbox{max-width:0;width:0}.katex .msupsub{text-align:left}.katex .mfrac>span>span{text-align:center}.katex .mfrac .frac-line{border-bottom-style:solid;display:inline-block;width:100%}.katex .hdashline,.katex .hline,.katex .mfrac .frac-line,.katex .overline .overline-line,.katex .rule,.katex .underline .underline-line{min-height:1px}.katex .mspace{display:inline-block}.katex .smash{display:inline;line-height:0}.katex .clap,.katex .llap,.katex .rlap{position:relative;width:0}.katex .clap>.inner,.katex .llap>.inner,.katex .rlap>.inner{position:absolute}.katex .clap>.fix,.katex .llap>.fix,.katex .rlap>.fix{display:inline-block}.katex .llap>.inner{right:0}.katex .clap>.inner,.katex .rlap>.inner{left:0}.katex .clap>.inner>span{margin-left:-50%;margin-right:50%}.katex .rule{border:0 solid;display:inline-block;position:relative}.katex .hline,.katex .overline .overline-line,.katex .underline .underline-line{border-bottom-style:solid;display:inline-block;width:100%}.katex .hdashline{border-bottom-style:dashed;display:inline-block;width:100%}.katex .sqrt>.root{margin-left:.2777777778em;margin-right:-.5555555556em}.katex .fontsize-ensurer.reset-size1.size1,.katex .sizing.reset-size1.size1{font-size:1em}.katex .fontsize-ensurer.reset-size1.size2,.katex .sizing.reset-size1.size2{font-size:1.2em}.katex .fontsize-ensurer.reset-size1.size3,.katex .sizing.reset-size1.size3{font-size:1.4em}.katex .fontsize-ensurer.reset-size1.size4,.katex .sizing.reset-size1.size4{font-size:1.6em}.katex .fontsize-ensurer.reset-size1.size5,.katex .sizing.reset-size1.size5{font-size:1.8em}.katex .fontsize-ensurer.reset-size1.size6,.katex .sizing.reset-size1.size6{font-size:2em}.katex .fontsize-ensurer.reset-size1.size7,.katex .sizing.reset-size1.size7{font-size:2.4em}.katex .fontsize-ensurer.reset-size1.size8,.katex .sizing.reset-size1.size8{font-size:2.88em}.katex .fontsize-ensurer.reset-size1.size9,.katex .sizing.reset-size1.size9{font-size:3.456em}.katex .fontsize-ensurer.reset-size1.size10,.katex .sizing.reset-size1.size10{font-size:4.148em}.katex .fontsize-ensurer.reset-size1.size11,.katex .sizing.reset-size1.size11{font-size:4.976em}.katex .fontsize-ensurer.reset-size2.size1,.katex .sizing.reset-size2.size1{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size2.size2,.katex .sizing.reset-size2.size2{font-size:1em}.katex .fontsize-ensurer.reset-size2.size3,.katex .sizing.reset-size2.size3{font-size:1.1666666667em}.katex .fontsize-ensurer.reset-size2.size4,.katex .sizing.reset-size2.size4{font-size:1.3333333333em}.katex .fontsize-ensurer.reset-size2.size5,.katex .sizing.reset-size2.size5{font-size:1.5em}.katex .fontsize-ensurer.reset-size2.size6,.katex .sizing.reset-size2.size6{font-size:1.6666666667em}.katex .fontsize-ensurer.reset-size2.size7,.katex .sizing.reset-size2.size7{font-size:2em}.katex .fontsize-ensurer.reset-size2.size8,.katex .sizing.reset-size2.size8{font-size:2.4em}.katex .fontsize-ensurer.reset-size2.size9,.katex .sizing.reset-size2.size9{font-size:2.88em}.katex .fontsize-ensurer.reset-size2.size10,.katex .sizing.reset-size2.size10{font-size:3.4566666667em}.katex .fontsize-ensurer.reset-size2.size11,.katex .sizing.reset-size2.size11{font-size:4.1466666667em}.katex .fontsize-ensurer.reset-size3.size1,.katex .sizing.reset-size3.size1{font-size:.7142857143em}.katex .fontsize-ensurer.reset-size3.size2,.katex .sizing.reset-size3.size2{font-size:.8571428571em}.katex .fontsize-ensurer.reset-size3.size3,.katex .sizing.reset-size3.size3{font-size:1em}.katex .fontsize-ensurer.reset-size3.size4,.katex .sizing.reset-size3.size4{font-size:1.1428571429em}.katex .fontsize-ensurer.reset-size3.size5,.katex .sizing.reset-size3.size5{font-size:1.2857142857em}.katex .fontsize-ensurer.reset-size3.size6,.katex .sizing.reset-size3.size6{font-size:1.4285714286em}.katex .fontsize-ensurer.reset-size3.size7,.katex .sizing.reset-size3.size7{font-size:1.7142857143em}.katex .fontsize-ensurer.reset-size3.size8,.katex .sizing.reset-size3.size8{font-size:2.0571428571em}.katex .fontsize-ensurer.reset-size3.size9,.katex .sizing.reset-size3.size9{font-size:2.4685714286em}.katex .fontsize-ensurer.reset-size3.size10,.katex .sizing.reset-size3.size10{font-size:2.9628571429em}.katex .fontsize-ensurer.reset-size3.size11,.katex .sizing.reset-size3.size11{font-size:3.5542857143em}.katex .fontsize-ensurer.reset-size4.size1,.katex .sizing.reset-size4.size1{font-size:.625em}.katex .fontsize-ensurer.reset-size4.size2,.katex .sizing.reset-size4.size2{font-size:.75em}.katex .fontsize-ensurer.reset-size4.size3,.katex .sizing.reset-size4.size3{font-size:.875em}.katex .fontsize-ensurer.reset-size4.size4,.katex .sizing.reset-size4.size4{font-size:1em}.katex .fontsize-ensurer.reset-size4.size5,.katex .sizing.reset-size4.size5{font-size:1.125em}.katex .fontsize-ensurer.reset-size4.size6,.katex .sizing.reset-size4.size6{font-size:1.25em}.katex .fontsize-ensurer.reset-size4.size7,.katex .sizing.reset-size4.size7{font-size:1.5em}.katex .fontsize-ensurer.reset-size4.size8,.katex .sizing.reset-size4.size8{font-size:1.8em}.katex .fontsize-ensurer.reset-size4.size9,.katex .sizing.reset-size4.size9{font-size:2.16em}.katex .fontsize-ensurer.reset-size4.size10,.katex .sizing.reset-size4.size10{font-size:2.5925em}.katex .fontsize-ensurer.reset-size4.size11,.katex .sizing.reset-size4.size11{font-size:3.11em}.katex .fontsize-ensurer.reset-size5.size1,.katex .sizing.reset-size5.size1{font-size:.5555555556em}.katex .fontsize-ensurer.reset-size5.size2,.katex .sizing.reset-size5.size2{font-size:.6666666667em}.katex .fontsize-ensurer.reset-size5.size3,.katex .sizing.reset-size5.size3{font-size:.7777777778em}.katex .fontsize-ensurer.reset-size5.size4,.katex .sizing.reset-size5.size4{font-size:.8888888889em}.katex .fontsize-ensurer.reset-size5.size5,.katex .sizing.reset-size5.size5{font-size:1em}.katex .fontsize-ensurer.reset-size5.size6,.katex .sizing.reset-size5.size6{font-size:1.1111111111em}.katex .fontsize-ensurer.reset-size5.size7,.katex .sizing.reset-size5.size7{font-size:1.3333333333em}.katex .fontsize-ensurer.reset-size5.size8,.katex .sizing.reset-size5.size8{font-size:1.6em}.katex .fontsize-ensurer.reset-size5.size9,.katex .sizing.reset-size5.size9{font-size:1.92em}.katex .fontsize-ensurer.reset-size5.size10,.katex .sizing.reset-size5.size10{font-size:2.3044444444em}.katex .fontsize-ensurer.reset-size5.size11,.katex .sizing.reset-size5.size11{font-size:2.7644444444em}.katex .fontsize-ensurer.reset-size6.size1,.katex .sizing.reset-size6.size1{font-size:.5em}.katex .fontsize-ensurer.reset-size6.size2,.katex .sizing.reset-size6.size2{font-size:.6em}.katex .fontsize-ensurer.reset-size6.size3,.katex .sizing.reset-size6.size3{font-size:.7em}.katex .fontsize-ensurer.reset-size6.size4,.katex .sizing.reset-size6.size4{font-size:.8em}.katex .fontsize-ensurer.reset-size6.size5,.katex .sizing.reset-size6.size5{font-size:.9em}.katex .fontsize-ensurer.reset-size6.size6,.katex .sizing.reset-size6.size6{font-size:1em}.katex .fontsize-ensurer.reset-size6.size7,.katex .sizing.reset-size6.size7{font-size:1.2em}.katex .fontsize-ensurer.reset-size6.size8,.katex .sizing.reset-size6.size8{font-size:1.44em}.katex .fontsize-ensurer.reset-size6.size9,.katex .sizing.reset-size6.size9{font-size:1.728em}.katex .fontsize-ensurer.reset-size6.size10,.katex .sizing.reset-size6.size10{font-size:2.074em}.katex .fontsize-ensurer.reset-size6.size11,.katex .sizing.reset-size6.size11{font-size:2.488em}.katex .fontsize-ensurer.reset-size7.size1,.katex .sizing.reset-size7.size1{font-size:.4166666667em}.katex .fontsize-ensurer.reset-size7.size2,.katex .sizing.reset-size7.size2{font-size:.5em}.katex .fontsize-ensurer.reset-size7.size3,.katex .sizing.reset-size7.size3{font-size:.5833333333em}.katex .fontsize-ensurer.reset-size7.size4,.katex .sizing.reset-size7.size4{font-size:.6666666667em}.katex .fontsize-ensurer.reset-size7.size5,.katex .sizing.reset-size7.size5{font-size:.75em}.katex .fontsize-ensurer.reset-size7.size6,.katex .sizing.reset-size7.size6{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size7.size7,.katex .sizing.reset-size7.size7{font-size:1em}.katex .fontsize-ensurer.reset-size7.size8,.katex .sizing.reset-size7.size8{font-size:1.2em}.katex .fontsize-ensurer.reset-size7.size9,.katex .sizing.reset-size7.size9{font-size:1.44em}.katex .fontsize-ensurer.reset-size7.size10,.katex .sizing.reset-size7.size10{font-size:1.7283333333em}.katex .fontsize-ensurer.reset-size7.size11,.katex .sizing.reset-size7.size11{font-size:2.0733333333em}.katex .fontsize-ensurer.reset-size8.size1,.katex .sizing.reset-size8.size1{font-size:.3472222222em}.katex .fontsize-ensurer.reset-size8.size2,.katex .sizing.reset-size8.size2{font-size:.4166666667em}.katex .fontsize-ensurer.reset-size8.size3,.katex .sizing.reset-size8.size3{font-size:.4861111111em}.katex .fontsize-ensurer.reset-size8.size4,.katex .sizing.reset-size8.size4{font-size:.5555555556em}.katex .fontsize-ensurer.reset-size8.size5,.katex .sizing.reset-size8.size5{font-size:.625em}.katex .fontsize-ensurer.reset-size8.size6,.katex .sizing.reset-size8.size6{font-size:.6944444444em}.katex .fontsize-ensurer.reset-size8.size7,.katex .sizing.reset-size8.size7{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size8.size8,.katex .sizing.reset-size8.size8{font-size:1em}.katex .fontsize-ensurer.reset-size8.size9,.katex .sizing.reset-size8.size9{font-size:1.2em}.katex .fontsize-ensurer.reset-size8.size10,.katex .sizing.reset-size8.size10{font-size:1.4402777778em}.katex .fontsize-ensurer.reset-size8.size11,.katex .sizing.reset-size8.size11{font-size:1.7277777778em}.katex .fontsize-ensurer.reset-size9.size1,.katex .sizing.reset-size9.size1{font-size:.2893518519em}.katex .fontsize-ensurer.reset-size9.size2,.katex .sizing.reset-size9.size2{font-size:.3472222222em}.katex .fontsize-ensurer.reset-size9.size3,.katex .sizing.reset-size9.size3{font-size:.4050925926em}.katex .fontsize-ensurer.reset-size9.size4,.katex .sizing.reset-size9.size4{font-size:.462962963em}.katex .fontsize-ensurer.reset-size9.size5,.katex .sizing.reset-size9.size5{font-size:.5208333333em}.katex .fontsize-ensurer.reset-size9.size6,.katex .sizing.reset-size9.size6{font-size:.5787037037em}.katex .fontsize-ensurer.reset-size9.size7,.katex .sizing.reset-size9.size7{font-size:.6944444444em}.katex .fontsize-ensurer.reset-size9.size8,.katex .sizing.reset-size9.size8{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size9.size9,.katex .sizing.reset-size9.size9{font-size:1em}.katex .fontsize-ensurer.reset-size9.size10,.katex .sizing.reset-size9.size10{font-size:1.2002314815em}.katex .fontsize-ensurer.reset-size9.size11,.katex .sizing.reset-size9.size11{font-size:1.4398148148em}.katex .fontsize-ensurer.reset-size10.size1,.katex .sizing.reset-size10.size1{font-size:.2410800386em}.katex .fontsize-ensurer.reset-size10.size2,.katex .sizing.reset-size10.size2{font-size:.2892960463em}.katex .fontsize-ensurer.reset-size10.size3,.katex .sizing.reset-size10.size3{font-size:.337512054em}.katex .fontsize-ensurer.reset-size10.size4,.katex .sizing.reset-size10.size4{font-size:.3857280617em}.katex .fontsize-ensurer.reset-size10.size5,.katex .sizing.reset-size10.size5{font-size:.4339440694em}.katex .fontsize-ensurer.reset-size10.size6,.katex .sizing.reset-size10.size6{font-size:.4821600771em}.katex .fontsize-ensurer.reset-size10.size7,.katex .sizing.reset-size10.size7{font-size:.5785920926em}.katex .fontsize-ensurer.reset-size10.size8,.katex .sizing.reset-size10.size8{font-size:.6943105111em}.katex .fontsize-ensurer.reset-size10.size9,.katex .sizing.reset-size10.size9{font-size:.8331726133em}.katex .fontsize-ensurer.reset-size10.size10,.katex .sizing.reset-size10.size10{font-size:1em}.katex .fontsize-ensurer.reset-size10.size11,.katex .sizing.reset-size10.size11{font-size:1.1996142719em}.katex .fontsize-ensurer.reset-size11.size1,.katex .sizing.reset-size11.size1{font-size:.2009646302em}.katex .fontsize-ensurer.reset-size11.size2,.katex .sizing.reset-size11.size2{font-size:.2411575563em}.katex .fontsize-ensurer.reset-size11.size3,.katex .sizing.reset-size11.size3{font-size:.2813504823em}.katex .fontsize-ensurer.reset-size11.size4,.katex .sizing.reset-size11.size4{font-size:.3215434084em}.katex .fontsize-ensurer.reset-size11.size5,.katex .sizing.reset-size11.size5{font-size:.3617363344em}.katex .fontsize-ensurer.reset-size11.size6,.katex .sizing.reset-size11.size6{font-size:.4019292605em}.katex .fontsize-ensurer.reset-size11.size7,.katex .sizing.reset-size11.size7{font-size:.4823151125em}.katex .fontsize-ensurer.reset-size11.size8,.katex .sizing.reset-size11.size8{font-size:.578778135em}.katex .fontsize-ensurer.reset-size11.size9,.katex .sizing.reset-size11.size9{font-size:.6945337621em}.katex .fontsize-ensurer.reset-size11.size10,.katex .sizing.reset-size11.size10{font-size:.8336012862em}.katex .fontsize-ensurer.reset-size11.size11,.katex .sizing.reset-size11.size11{font-size:1em}.katex .delimsizing.size1{font-family:KaTeX_Size1}.katex .delimsizing.size2{font-family:KaTeX_Size2}.katex .delimsizing.size3{font-family:KaTeX_Size3}.katex .delimsizing.size4{font-family:KaTeX_Size4}.katex .delimsizing.mult .delim-size1>span{font-family:KaTeX_Size1}.katex .delimsizing.mult .delim-size4>span{font-family:KaTeX_Size4}.katex .nulldelimiter{display:inline-block;width:.12em}.katex .delimcenter,.katex .op-symbol{position:relative}.katex .op-symbol.small-op{font-family:KaTeX_Size1}.katex .op-symbol.large-op{font-family:KaTeX_Size2}.katex .accent>.vlist-t,.katex .op-limits>.vlist-t{text-align:center}.katex .accent .accent-body{position:relative}.katex .accent .accent-body:not(.accent-full){width:0}.katex .overlay{display:block}.katex .mtable .vertical-separator{display:inline-block;min-width:1px}.katex .mtable .arraycolsep{display:inline-block}.katex .mtable .col-align-c>.vlist-t{text-align:center}.katex .mtable .col-align-l>.vlist-t{text-align:left}.katex .mtable .col-align-r>.vlist-t{text-align:right}.katex .svg-align{text-align:left}.katex svg{fill:currentColor;stroke:currentColor;display:block;height:inherit;position:absolute;width:100%}.katex svg path{stroke:none}.katex svg{fill-rule:nonzero;fill-opacity:1;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1}.katex img{border-style:none;max-height:none;max-width:none;min-height:0;min-width:0}.katex .stretchy{display:block;overflow:hidden;position:relative;width:100%}.katex .stretchy:after,.katex .stretchy:before{content:""}.katex .hide-tail{overflow:hidden;position:relative;width:100%}.katex .halfarrow-left{left:0;overflow:hidden;position:absolute;width:50.2%}.katex .halfarrow-right{overflow:hidden;position:absolute;right:0;width:50.2%}.katex .brace-left{left:0;overflow:hidden;position:absolute;width:25.1%}.katex .brace-center{left:25%;overflow:hidden;position:absolute;width:50%}.katex .brace-right{overflow:hidden;position:absolute;right:0;width:25.1%}.katex .x-arrow-pad{padding:0 .5em}.katex .cd-arrow-pad{padding:0 .55556em 0 .27778em}.katex .mover,.katex .munder,.katex .x-arrow{text-align:center}.katex .boxpad{padding:0 .3em}.katex .fbox,.katex .fcolorbox{border:.04em solid;box-sizing:border-box}.katex .cancel-pad{padding:0 .2em}.katex .cancel-lap{margin-left:-.2em;margin-right:-.2em}.katex .sout{border-bottom-style:solid;border-bottom-width:.08em}.katex .angl{border-right:.049em solid;border-top:.049em solid;box-sizing:border-box;margin-right:.03889em}.katex .anglpad{padding:0 .03889em}.katex .eqn-num:before{content:"(" counter(katexEqnNo) ")";counter-increment:katexEqnNo}.katex .mml-eqn-num:before{content:"(" counter(mmlEqnNo) ")";counter-increment:mmlEqnNo}.katex .mtr-glue{width:50%}.katex .cd-vert-arrow{display:inline-block;position:relative}.katex .cd-label-left{display:inline-block;position:absolute;right:calc(50% + .3em);text-align:left}.katex .cd-label-right{display:inline-block;left:calc(50% + .3em);position:absolute;text-align:right}.katex-display{display:block;margin:1em 0;text-align:center}.katex-display>.katex{display:block;text-align:center;white-space:nowrap}.katex-display>.katex>.katex-html{display:block;position:relative}.katex-display>.katex>.katex-html>.tag{position:absolute;right:0}.katex-display.leqno>.katex>.katex-html>.tag{left:0;right:auto}.katex-display.fleqn>.katex{padding-left:2em;text-align:left}body{counter-reset:katexEqnNo mmlEqnNo}