/* ============================================================================
   TGV DESIGN-FUNDAMENT — BAUSTEIN-SCHICHT (vertikaler Schnitt, DESIGN#01)
   ----------------------------------------------------------------------------
   Promotion-Kandidat für PLAT#06 components.css. Diese Klassen (Hero/KPI/
   Pipeline/Chat-Bubble/Scope-Frame/Kontext-Wahl) leben HEUTE lokal in
   06_DASHBOARD/core_app_mockup.html (Zeilen ~160-237) — genau die „Gebastel"-
   Drift, die das Fundament beendet: Hero-Markup pro Seite dupliziert.

   Hier stehen sie EINMAL, token-only (nur --*-Tokens aus tokens.css), damit der
   kanonische Renderer (engine.js) sie erzeugt und „einmal ändern = überall" gilt.
   Nach JC-Freeze wandert diese Datei 1:1 in components.css (SSOT bleibt Code).

   G1-G9 (Konzept §4) sind hier STRUKTURELL eingebaut — nicht als Prosa-Regel:
     G1 Dialog volle Breite      → .zone-chat .msg { max-width:none }
     G2 Sprecher-Code L/R        → .msg.kai (ava links) · .msg.user (ava rechts, order)
     G3 Scope = globaler Chip     → .zone-hero__scope (KEINE „Kai sagt"-Hero-Bubble)
     G4 Zahlen SIND die KPIs      → .kpi-block direkt im Hero, keine Zweitreihe
     G5 Werkzeuge unter KPIs      → .tile-nav folgt .kpi-block, nichts dazwischen
     G6 Kai-Rat = Chat-Bubble     → Rat rendert als .msg.kai, nie Extra-Panel
     G7 „zurück zu" global         → .zone-hero beginnt mit Hero-Standard (kein Back im Body)
     G8 Weiß nur hinter User-Chat → .msg.user .bubble weiß · Fläche = --surface/ctx-tint
     G9 Werkzeug+Lens im Hero      → .zone-hero__tools sitzt im Hero, nicht unter Bubble
   ============================================================================ */

/* ───────────────────────── ZONE 1 — HERO (4-Zonen) ─────────────────────────
   Identität · Lage · Wohin (Regelwerk R-03). Reduzierbar beim Chatten (R-02). */
.zone-hero{
  position:relative; background:var(--bg-card); border:1px solid var(--border);   /* R-127: Card-Schicht (2) über der Zone/App */
  border-radius:var(--radius-lg); padding:var(--sp-3) var(--sp-4); margin-bottom:var(--gap-zone);   /* R-128: Zonen-Trennung */
}
/* R-126 (JC 2026-07-09, „zum letzten Mal"): Scope-Indikator UND Collapse-Toggle sitzen
   in EINER gemeinsamen, rechtsbündigen Kopfzeile auf GLEICHER Höhe (vertikale Mitte).
   .zone-hero__headrow ist der EINE Wurzel-Baustein — absolut oben rechts, Flex-Row,
   Scope links vom Toggle. Kein per-Screen-Nachbau, kein margin-top-Drop mehr. */
.zone-hero__headrow{
  position:absolute; top:var(--sp-2); right:var(--sp-3);
  display:flex; align-items:center; gap:var(--sp-2); z-index:1;
}
.zone-hero__toggle{
  background:none; border:1px solid var(--border-strong); border-radius:var(--radius-md);
  width:30px; height:30px; cursor:pointer; color:var(--text-muted); font-size:var(--fs-small);
  flex:none;
}
.zone-hero__toggle:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; }
/* R-02: eingeklappt → nur Identität (Icon+Titel+Scope) bleibt. Der kollabierbare Bereich
   (.zone-hero__body = KPIs+Pipeline+Werkzeuge) klappt SANFT ein/aus (Motion, JC-Pflicht 4),
   statt hart display:none. */
.zone-hero__body{ overflow:hidden; max-height:600px; opacity:1;
  transition:max-height .30s ease, opacity .22s ease, margin-top .30s ease; }
.zone-hero[data-collapsed="true"] .zone-hero__body{ max-height:0; opacity:0; margin-top:0; }

/* padding-right = Freiraum für die absolute Kopfzeile (.zone-hero__headrow: Scope + Toggle
   rechts oben, R-126), damit Titel / Untertitel NIE unter die Kopfzeile laufen (JC-Fix).
   Scope liegt seit R-126 NICHT mehr im __head, sondern in der gemeinsamen __headrow. */
.zone-hero__head{ display:flex; align-items:flex-start; gap:var(--sp-3); flex-wrap:wrap; padding-right:var(--sp-6, 44px); }
/* Hero-Icon-Fläche: Emoji/Icon-Fläche im Default; sobald --hero-media gesetzt ist
   (url/image-set, Asset-Token-Schicht JC-Export 4), überlagert das Bild die Fläche —
   die Bildwelt ist so ZENTRAL austauschbar, ohne Markup pro Seite. --hero-icon-scale
   justiert die Emoji-Größe. */
.zone-hero__icon{
  width:42px; height:42px; border-radius:var(--radius-lg); flex:none;
  background:var(--c-action-bg); color:var(--c-action);
  display:flex; align-items:center; justify-content:center;
  font-size:calc(22px * var(--hero-icon-scale, 1));
  background-image:var(--hero-media, none); background-size:cover; background-position:center;
}
/* Ist ein Hero-Bild gesetzt, trägt das Bild die Aussage → Emoji-Glyph ausblenden.
   Opt-in per .zone-hero__icon--media (Renderer/Instanz setzt es, wenn --hero-media greift). */
.zone-hero__icon--media{ color:transparent; text-shadow:none; }
.zone-hero__titles{ min-width:0; }
.zone-hero__title{ margin:0; font:var(--fw-bold) var(--fs-h2)/1.3 var(--font-sans); color:var(--text); }
.zone-hero__sub{ margin:2px 0 0; font-size:var(--fs-small); color:var(--text-muted); }
/* ══ HERO v2 — UMGEZOGEN nach PLAT_06_DESIGN_SYSTEM/components.css (DESIGN#01 28.07.,
   gleiche Wurzel wie .ds-axis/#1227: core_shell laedt NUR tokens+components — die row1/
   scope-k11-Regeln waren auf der Live-Shell TOT (JC-Befund A: Overlap bei 375px). ══ */
/* G3: Scope = globaler Selektor-Chip (Entität+Zeitraum), NICHT „Kai schaut auf …"-Bubble.
   R-126: Scope sitzt in .zone-hero__headrow auf gleicher Höhe wie der Toggle (kein margin-left:auto,
   kein margin-top-Drop mehr — die Kopfzeile richtet beide zentriert aus). */
.zone-hero__scope{
  white-space:nowrap; cursor:pointer; flex:none;
  font-size:var(--fs-small); background:var(--c-action-bg); color:var(--c-action);
  border:1px solid var(--border); border-radius:999px; padding:3px 11px;
}
.zone-hero__scope:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; }

/* G4: die angezeigten Zahlen SIND die KPIs — eine Reihe, keine Redundanz. */
.kpi-block{ display:flex; gap:var(--sp-2); flex-wrap:wrap; margin:var(--sp-3) 0 var(--sp-2); }
.kpi-tile{
  flex:1; min-width:120px; background:var(--bg-inset);   /* R-127: Inset-Schicht (3), eingelassen in die Card */
  border:1px solid var(--border);                        /* R-127: trennende Grenze zur Card (Inset ≈ Card möglich → Rahmen sichert Kontrast) */
  border-radius:var(--radius-md); padding:8px 11px; display:flex; flex-direction:column; gap:2px;
}
.kpi-tile__val{
  font:700 var(--fs-h3)/1.2 var(--font-sans); font-variant-numeric:tabular-nums;
  color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* Bedeutungs-Töne = Anker-Farben (marken-unabhängig, Regelwerk R-31). */
.kpi-tile__val--warn { color:var(--c-warn); }
.kpi-tile__val--alert{ color:var(--c-danger); }
.kpi-tile__val--ok   { color:var(--c-confirm); }
.kpi-tile__label{ font-size:var(--fs-micro); color:var(--text-muted); }

/* Pipeline/Stepper im Hero (wo eine Sektion eine Pipeline hat, z.B. Finanzen).
   Sitzt UNTER den Werkzeug-Chips (G5: Werkzeuge direkt unter KPIs — die Pipeline ist
   Prozess-Lage, keine Aktion; JC 2026-07-02). */
.pipeline-steps{ list-style:none; margin:var(--sp-2) 0 0; padding:0; display:flex; gap:var(--sp-2); flex-wrap:wrap; }
.pipeline-step{ display:flex; align-items:center; gap:5px; font-size:var(--fs-small); color:var(--text-muted); }
/* E-8/GB-6: der Anker rendert eine GEZEICHNETE scharfe Nummer (engine.numGlyph → .ds-num,
   SVG-Kreis+Zahl in currentColor), NIE eine Unicode-Kreisziffer. Der Wrapper trägt nur die
   Farbe; done/active färben den SVG-Strich über currentColor. */
.pipeline-step__num{ flex:none; width:20px; height:20px; display:inline-flex; color:var(--text-muted); }
.pipeline-step--done .pipeline-step__num{ color:var(--c-confirm); }
.pipeline-step--active{ font-weight:var(--fw-bold); color:var(--c-action); }
.pipeline-step--active .pipeline-step__num{ color:var(--c-action); }

/* ══ SCHARFE NUMMER (E-8 / R2-18) ══ EIN gezeichneter Kreis+Zahl-Baustein (engine.numGlyph)
   für ALLE Prozess-Anker ①–⑥ — Unicode-Kreisziffern rendern blurry und sind daher verboten.
   currentColor erbt von der Umgebung (Anker/Pipeline-Step); die Größe kommt vom SVG. */
.ds-num{ display:inline-flex; align-items:center; justify-content:center; line-height:0; }
.ds-num svg{ display:block; }
.pipeline-step__num .ds-num svg{ width:20px; height:20px; }

/* Taxonomie-Affordanz (JC R2, Promotion aus dem Katalog-Kanon-Layer): der Scope-Chip
   ist ein KLICKBARER Info-Träger → Chevron zeigt es („Alles Klickbare zeigt Affordanz"). */
.zone-hero__scope::after{ content:" ▾"; font-size:var(--fs-micro); opacity:.75; }

/* G9 + G5: Werkzeug-Wahl / Etappe-Lens gehören in den Hero, direkt unter die KPIs.
   Label „Werkzeuge:" (JC R4) rendert die Engine — Konsistenz zu „Prozess:" (Pipeline). */
.zone-hero__tools{ display:flex; gap:var(--sp-2); flex-wrap:wrap; align-items:center; }
.zone-hero__tool{
  font:var(--fw-medium) var(--fs-small)/1.2 var(--font-sans);
  padding:6px 12px; border:1px solid var(--border); border-radius:var(--radius-md);
  color:var(--text); background:var(--surface); cursor:pointer; text-decoration:none;
}
.zone-hero__tool:hover{ border-color:var(--c-action); }
.zone-hero__tool--primary{ background:var(--c-action); color:var(--surface); border-color:var(--c-action); }
.zone-hero__tool:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; }

/* ═══════════ ZONE 3 — MAIN INTERAKTIVE ANSICHT (JC-ENTSCHIEDEN R2, 04.07.) ═══════════
   Eigene Zone UNTER dem Hero: weiße Karte WIE das Hero, mit Titel, KLAPPBAR.
   Rendert die Engine (renderSection → zoneMain); Muster = .zone-hero. Promotion aus
   dem Katalog-Kanon-Layer (P1) in die SSOT (P2). */
.zone-main{ position:relative; background:var(--bg-card); border:1px solid var(--border);   /* R-127: Card-Schicht (2) */
  border-radius:var(--radius-lg); padding:var(--sp-3) var(--sp-4); margin-bottom:var(--gap-zone); }   /* R-128: Zonen-Trennung */
.zone-main__toggle{ position:absolute; top:var(--sp-2); right:var(--sp-3);
  background:none; border:1px solid var(--border-strong); border-radius:var(--radius-md);
  width:30px; height:30px; cursor:pointer; color:var(--text-muted); font-size:var(--fs-small); }
.zone-main__toggle:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; }
.zone-main__title{ margin:0; padding-right:44px; font:var(--fw-bold) var(--fs-h3)/1.35 var(--font-sans); color:var(--text); }
/* max-height-Cap = Collapse-Animation; 1600px deckt auch volle Tabellen-Seiten (25 Zeilen). */
.zone-main__body{ overflow:hidden; max-height:1600px; opacity:1; margin-top:var(--sp-2);
  transition:max-height .30s ease, opacity .22s ease, margin-top .30s ease; }
.zone-main[data-collapsed="true"] .zone-main__body{ max-height:0; opacity:0; margin-top:0; }

/* ───────────────────────── ZONE 2 — KONVERSATION ───────────────────────────
   G1 volle Breite · G2 Sprecher-Code · G6 Kai-Rat als Bubble · G8 Weiß nur User. */
/* --msg-gutter = die EINE Luft-Größe um den Avatar. B (Icon↔Bubble) UND A (Konversations-
   Rand↔Icon) referenzieren sie → A=B strukturell garantiert (R-87). B=18px war JC zu subtil
   bei 12px, weil Kaï-Bubbles transparent sind (G8); 18px liest klar. (JC 2026-07-02) */
/* ══ KAÏ-KANTE ÜBER ALLE CONTAINER (D-5 / GB-5, JC „10× korrigiert") ══ die Avatar-
   Gutter-Variablen liegen KANONISCH auf JEDER .msg (nicht mehr nur auf .zone-chat) →
   eine Kaï-Karte AUSSERHALB der .zone-chat (z. B. eine Quittung in einer rka-mode-Sektion)
   erbt DENSELBEN linken Rand (--msg-gutter) statt ihn zu verlieren. So ist die linke Kaï-
   Kante über ALLE Container konsistent (R-98 prüfte bislang nur A=B INNERHALB einer msg). */
.msg{ --msg-gutter:18px; --avatar-col:calc(28px + var(--msg-gutter));
  display:flex; gap:var(--msg-gutter); align-items:flex-start; max-width:none; }   /* B = Icon↔Bubble */
.zone-chat{ display:flex; flex-direction:column; gap:var(--gap-separate);   /* R-128: Du↔Kai = getrennte Einheiten, nicht angeklebt */
  --msg-gutter:18px;                                   /* A=B Luft um den Avatar (R-87) */
  --avatar-col:calc(28px + var(--msg-gutter)); }       /* Icon-Spalte (R-89): Breite Gegen-Icon + Gutter */
/* A = Konversations-Rand↔Icon: gespiegelt für Kaï (links) und User (rechts). A = B = --msg-gutter. */
.msg.kai > .kai-ava{ margin-left:var(--msg-gutter); }
/* generischer Avatar-Rahmen — der USER nutzt ihn; KAÏ nutzt das kanonische .kai-ava (unten).
   JC R4 (04.07., aus dem Katalog-Kanon-Layer gehoben): „Du" SICHTBARER — Rahmen
   (border-strong) + Tinte statt nur muted. */
.msg .ava{
  width:28px; height:28px; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center;
  font:var(--fw-bold) var(--fs-micro)/1 var(--font-sans);
  background:var(--surface); border:1.5px solid var(--border-strong); color:var(--text);
}
/* img-Slot vorbereitet (JC R4): künftiges Avatar-Bild füllt die Kachel, erbt die Rundung. */
.kai-ava img, .msg .ava img{ width:100%; height:100%; object-fit:cover; border-radius:inherit; display:block; }
/* ══ KANONISCHES KAÏ-AVATAR (R-85) ══ EIN Avatar überall, wo Kaï spricht: Chat-Bubble,
   Scope-Frame, Quittungen — identisch. Gefüllter Akzent-Kreis, Tinte = --surface
   (theme-sicher: dreht in dark automatisch mit; AA hoch). Ersetzt die 2 alten Varianten. */
.kai-ava{
  width:28px; height:28px; border-radius:var(--radius-md); flex:none;   /* gerundetes Quadrat (Landkarte-Kanon kai-head) */
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--c-action); color:var(--surface);
  font:var(--fw-bold) var(--fs-small)/1 var(--font-sans);
}
.kai-ava--sm{ width:22px; height:22px; font-size:var(--fs-micro); }   /* kompakt für die Scope-Zeile */
.msg .bubble{
  font-size:var(--fs-body); line-height:var(--lh-body); color:var(--text);
  border-radius:4px 14px 14px 14px; padding:var(--sp-3) var(--sp-4);
  border:1px solid var(--border); background:transparent;   /* Kai: keine weiße Insel (G8) */
}
.msg .bubble p{ margin:0 0 var(--sp-2); } .msg .bubble p:last-child{ margin:0; }
/* JC-WAHL 04.07. — Variante B GEWÄHLT (löst surface-2/„das Grau" ab, emr6pe6qporpg):
   Kai-Bubble = leichte Tönung in KAIS AKZENTFARBE. Kanon: „Kai spricht = HEBT SICH AB".
   Der Thread selbst trägt --c-action-bg (.ds-ctx-surface) → die Kai-Bubble hebt sich über
   die KRÄFTIGERE Akzent-Tönung ab (color-mix: --c-action in --surface, stärker als der Thread).
   JC-FEINSCHLIFF 04.07. (nach visuellem Blick): die Sonder-Akzent-KANTE RAUS — der RAHMEN ist
   jetzt IDENTISCH zur „Du"-Bubble (--border-strong). Kai hebt sich also NUR noch über die
   blau-graue FLÄCHE ab, nicht über eine eigene Kante. Theme-fest (hell/dunkel).
   G8 bleibt: WEISS (--surface + Schatten) gehört allein dem User; bare-Bubbles unberührt.
   Gegenstück (Kanon): die SYSTEM-Meldung fügt sich EIN (nah Thread-BG, s. .statusline--system). */
.msg.kai > .bubble:not(.bubble--bare){
  background:color-mix(in srgb, var(--c-action) 12%, var(--surface));
  border-color:var(--border-strong);   /* = „Du"-Bubble-Rahmen (JC-Feinschliff: keine Sonderkante) */
}
/* R-89 · ruhiger Abschluss (klassischer Chat): Blase endet VOR der Gegen-Icon-Spalte.
   Zone bleibt volle Breite (G1) — nur die einzelne Blase bekommt am Gegen-Ufer den Rand frei. */
.msg.kai .bubble{ margin-right:var(--avatar-col); }
.msg.user .bubble{ margin-left:var(--avatar-col); }
/* Breite Inhalte (Liste/Tabelle/Approval) in einer Kai-Bubble: NIE width:100% (läuft
   neben dem Avatar über) → flex:1 + min-width:0 → schrumpft mobil sauber (375px-Fix). */
.msg .bubble--wide{ flex:1 1 auto; min-width:0; }
.msg .bubble--bare{ flex:1 1 auto; min-width:0; padding:0; border:none; background:none; border-radius:0; }
/* G2: User RECHTS — ava wandert per order nach rechts; Bubble ist die einzige weiße Fläche (G8) */
.msg.user{ justify-content:flex-end; }
.msg.user .ava{ order:2; margin-right:var(--msg-gutter); }   /* A gespiegelt (User rechts); Optik = .msg .ava (JC R4: sichtbar) */
.msg.user .bubble{
  border-radius:14px 4px 14px 14px; background:var(--surface); border-color:var(--border-strong);
  box-shadow:var(--shadow-card);
}
/* Vorlesen-Icon an Kai-Bubbles (R-16) */
.msg .readicon{ border:none; background:none; cursor:pointer; color:var(--text-hint); font-size:14px; margin-left:6px; }
.msg .readicon:hover{ color:var(--c-action); }

/* ══ „AB HIER"-ZUSTANDSZEILE (R-88 → GENERISCH R-90) ══ EIN Baustein für ALLE konversations-
   weiten Zustände (Scope · Rolle · Mandant · Etappe · Vertraulichkeit · Sprache · Skill ·
   Persona · Grounding · Autonomie · Frist — Katalog: engine.js STATE_DIMS). Kaï-Zustand mit
   EIGENER Dauer-Marker-Fläche. Icon = kanonisches kai-ava, Abstände A=B (symmetrisch wie
   Chat, R-87), Text = Kaï-Chat-Größe (body). Erscheint bei JEDER Änderung neu → fade-in.
   UNTERE 2 ECKEN ECKIG (JC R-90): der Marker „hängt" über dem Folgenden — gilt ab hier
   abwärts (oben rund = Beginn, unten eckig = offen nach unten). */
.statusline{
  position:relative;                                                            /* Anker für das einheitliche Auswahl-Popover (R-90) */
  display:flex; align-items:center; gap:var(--msg-gutter); flex-wrap:nowrap;   /* Icon↔Inhalt = Gutter (B); padding-left = Gutter (A) → A=B. NOWRAP: Body bleibt neben dem Icon */
  font-size:var(--fs-body); color:var(--text);
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--radius-md) var(--radius-md) 0 0;                          /* R-90: untere Ecken eckig */
  padding:10px var(--msg-gutter); margin:0 0 var(--sp-3);
  animation:ff-fadeIn .32s ease both;
}
/* Offenes Popover: die Zeile hebt sich über die NACHFOLGENDEN Turns (deren fade-in-
   Animation eigene Stacking-Kontexte erzeugt — sonst malen transparente Kaï-Bubbles
   ÜBER das Popover, JC-Bug „transparente Verwischung" 2026-07-02). */
.statusline:has(.scopepop:not([hidden])){ z-index:40; }
/* EINHEITLICHE Anzeige der gewählten Option (R-90): fett + Akzent, im Satz. */
.statusline b{ color:var(--c-action); font-weight:var(--fw-bold); }
/* Inhalt rechts vom Icon: nimmt Restbreite, umbricht INTERN (nicht unter das Icon). */
.statusline__body{ flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; }
/* ══ KANON SPRECHER-TRENNUNG (JC R4, 04.07. — Promotion aus dem Katalog-Kanon-Layer) ══
   Zustands-/Scope-Zeilen sind SYSTEM-Meldungen, NICHT Kai → neutraler ⚙-Glyph
   (gestrichelt, dezent) statt Kai-Avatar. Regel: „Kai-Avatar NUR, wenn Kai spricht."
   Verhaltens-Kanon dazu: die Kontext-/Scope-Zeile erscheint NUR bei Änderung durch
   eine User-Aktion — nie wiederholt, nie standardmäßig bei jeder Antwort. */
.sysglyph{ width:28px; height:28px; border-radius:var(--radius-md); flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:1px dashed var(--border-strong);
  color:var(--text-muted); font-size:var(--fs-small); }
/* JC-KANON 04.07. — „Kai spricht = hebt sich ab · System meldet = fügt sich ein" (emr6...):
   Während die Kai-Bubble sich in Kais Akzentfarbe ABHEBT, soll die ⚙-System-Zustandszeile
   sich UNAUFFÄLLIG in den Thread EINFÜGEN → Hintergrund NAH an der Thread-Surface (--c-action-bg,
   die .ds-ctx-surface-Fläche der Zone). Dezent, ohne eigene Insel; theme-fest (hell/dunkel).
   Kante bleibt dünn/leise. So liest die Zeile als „Systemzustand", nicht als Sprecher. */
.statusline--system{ color:var(--text-muted); background:var(--c-action-bg); border-color:var(--border); }
.statusline--system b{ color:var(--text); }   /* Wert bleibt lesbar, aber ohne Kai-Akzent-Stimme */
/* ══ SYS-01-SEVERITY-MATRIX (E-25-Zusatz, JC 02.08., bindend) ══
   neutral = Zustand („gilt ab hier") · warn = Fähigkeits-Grenze („noch nicht verdrahtet /
   Eingabe NICHT gesendet") · error = Pflicht-Verletzung/Verlust. Meldungen über Grenzen
   sind NIE neutral-blau — mind. WARN (amber), Glyph bleibt TGV-Sysglyph (kein Emoji). */
.statusline--warn{ color:var(--c-warn-ink); background:var(--c-warn-bg); border-color:var(--c-warn); }
.statusline--warn b{ color:var(--c-warn-ink); }
.statusline--warn .sysglyph{ border-color:var(--c-warn); color:var(--c-warn); }
.statusline--error{ color:var(--c-danger-ink); background:var(--c-danger-bg); border-color:var(--c-danger); }
.statusline--error b{ color:var(--c-danger-ink); }
.statusline--error .sysglyph{ border-color:var(--c-danger); color:var(--c-danger); }

/* Scope-Zeile = Instanz #1 der Zustandszeile (Anker liegt jetzt generisch auf .statusline). */
.scopeframe{ position:relative; }
.scopeframe__hint{ margin-left:4px; }
@media (max-width:560px){ .scopeframe__hint{ display:none; } }   /* Platz sparen mobil */

/* Auswahl-Popover (Gold-Baustein scopePop) — R-90 EINHEITLICH für JEDE Dimension der
   Zustandszeile: gleiche Optik (Label + klickbare Chips, gewählt = .is-selected), 1 Klick.
   Scope nutzt es mit 2 Achsen (Entität + Zeitraum), alle anderen Dimensionen mit 1 Liste. */
.scopepop{
  position:absolute; top:calc(100% + 4px); left:0; z-index:30;
  min-width:280px; max-width:96vw;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-md); box-shadow:var(--shadow-pop);
  padding:10px 12px; font-size:var(--fs-small); color:var(--text);
}
.scopepop[hidden]{ display:none; }
.scopepop__label{ font-weight:var(--fw-bold); color:var(--text); margin:8px 0 4px; }
.scopepop__label:first-child{ margin-top:0; }
.scopepop__chips{ display:flex; flex-wrap:wrap; gap:6px; }
/* Chips sind klickbar → Cursor + Hover; ausgewählt = .ds-chip.is-selected (components.css) */
.scopepop__chips .ds-chip{ cursor:pointer; border:1px solid transparent; }
.scopepop__chips .ds-chip:hover{ background:var(--c-action-bg); color:var(--c-action); }
.scopepop__range{ display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin-top:8px; }
.scopepop__date{ width:auto; padding:5px 8px; font-size:var(--fs-small); }

/* ══ 3-ACHSEN-BADGE V4 — UMGEZOGEN nach PLAT_06_DESIGN_SYSTEM/components.css
   (DESIGN#01 25.07., Tower#26-Befund: core_shell laedt NUR tokens+components — der
   .ds-axis-Block hier war auf der Live-Shell TOT, Badges rendern als nackter Text.
   components.css ist die geladene, deployte CSS -> dort lebt der Block jetzt; hier
   KEINE Kopie (Drift-Verbot). Konsumenten dieser Datei laden components.css ohnehin. */

/* ══ AKTIONSTYP = UMRANDUNG ALLEIN (Bibel F-2/F-3, GB-1) ══ additive Modifier auf .ds-btn:
   gestrichelt = Chat/Prompt-senden (.ds-btn--prompt) · durchgezogen = direkte UI-Aktion
   (.ds-btn--ui). KEINE 💬/▤-Aktionstyp-Icons — der Icon-Slot traegt die KI-Richtung
   (⚡/🪄/✨) oder ein Verb. Umrandung ist die EINE Unterscheidung (JC autoritativ 07-07). */
.ds-btn--prompt{ border-style:dashed !important; }
.ds-btn--ui{ border-style:solid !important; }

/* ══ QUELLEN-/BELEG-LINK (R-91 — GOLDENE REGEL + RAG#01-Grounding) ══ jede Zahl/
   Aussage/Kaï-Antwort trägt ihre QUELLE als klickbaren Link: 📄 Beleg (#xxxx → Drive),
   🏦 Buchung, 📚 Wissens-RAG. Zwei Formen, EIN Baustein:
     .srclink            = Chip (an Bubbles, KPIs, Approval-Fuß, Tabellen-Zellen)
     .srclink--inline    = im Fließtext/Titel: die Beleg-ID SELBST ist der Link. */
.srcbar{ display:inline-flex; flex-wrap:wrap; gap:6px; margin-left:6px; vertical-align:baseline; }
.srclink{
  display:inline-flex; align-items:center; gap:4px; white-space:nowrap;
  font-size:var(--fs-micro); line-height:1.6; padding:1px 8px; border-radius:999px;
  color:var(--c-action); background:var(--c-action-bg); border:1px solid var(--border-strong);
  text-decoration:underline; text-underline-offset:2px;
  /* Taxonomie ④ (JC R2, Promotion): sichtbare Link-Affordanz — Rahmen + Unterstreichung
     (JC-Punkt „#4821 nicht als Klickziel erkennbar"). AA-Paar --c-action/--c-action-bg. */
}
.srclink:hover{ border-color:var(--c-action); }
.srclink:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; }
/* Beleg-Chip als BUTTON (öffnet den Steckbrief, R-06 — Drive-Link liegt IM Steckbrief):
   exakt dieselbe Optik wie der Link-Chip. */
button.srclink{ cursor:pointer; font-family:var(--font-sans); }

/* Fall-Blättern im Fall-Fokus (Klärung): ‹ i/n › rechts im Approval-Kopf. */
.ds-approval__pager{ margin-left:auto; display:inline-flex; align-items:center; gap:6px;
  font-size:var(--fs-small); color:var(--text-muted); white-space:nowrap; }
.ds-approval__pager .ds-btn{ padding:2px 9px; }

/* ══ AKTIONS-KARTEN-RASTER (R-94, JC 2026-07-03) ══ universelle Ordnung jeder Aktions-/
   Freigabe-Karte: ① Kategorie-Chip ② zentrale Frage + Kai-Einordnung ③ Detail-Zugänge
   (Steckbrief/Quellen) ④ Quick-Prompts ⑤ Entscheidung rechts ⑥ Quittung „im Kontext".
   Hier nur die Zusatz-Zeilen — Grundkarte bleibt .ds-approval. */
.ds-approval__links{ display:flex; gap:var(--sp-2); flex-wrap:wrap; }
.ds-approval__quicks{ display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap;
  font-size:var(--fs-small); color:var(--text-hint); }

/* ══ DOC-STECKBRIEF (R-06/R-33 — JC-GO 2026-07-03) ══ EIN Steckbrief für JEDES Dokument
   (Beleg · Vertrag · Buchung …): Vorschau + „Was das System weiß" + Verknüpfungen +
   Kai-Empfehlung + Entscheidung. DARREICHUNG statt Popup (Handy-tauglich):
     Desktop = rechtes Slide-over (breiten-verstellbar per Drag, .ds-dock-Basis)
     Mobil   = Sheet von unten (volle Breite, max 86vh) — KEIN schwebendes Modal. */
.steck__scrim{ position:fixed; inset:0; z-index:55; background:var(--scrim); }
.steck{
  position:fixed; top:0; right:0; bottom:0; z-index:60;
  width:var(--steck-w, 440px); max-width:96vw;
  animation:ff-fadeIn .25s ease both;
}
.steck__resize{ position:absolute; top:0; left:-4px; bottom:0; width:9px; cursor:col-resize; }
.steck .ds-dock__body{ gap:var(--sp-4); }
.steck .ds-dock__foot{ display:flex; justify-content:flex-end; gap:var(--sp-2); }
.steck__sect{ margin:0 0 4px; font-size:var(--fs-micro); font-weight:var(--fw-medium);
  color:var(--text-hint); letter-spacing:.02em; }
/* Gold-Zone „Zusammenfassung (KI-geparst)": das Dokument in 1–3 Sätzen Klartext. */
.steck__summary{ margin:0; font-size:var(--fs-small); line-height:1.5; color:var(--text); }
/* REALE Original-Vorschau (Gold openDocPanel): Drive-/preview-iframe. Im Mockup ein
   EHRLICH beschrifteter Platzhalter (Skeleton) — nie Rekonstruktion als Original ausgeben. */
.drivepreview{
  display:block; width:100%; min-height:220px; border:1px solid var(--border-strong);
  border-radius:var(--radius-md); background:var(--surface); box-shadow:var(--shadow-card);
}
iframe.drivepreview{ height:320px; }
.drivepreview--mock{
  position:relative; padding:34px 14px 12px;
  display:flex; flex-direction:column; gap:10px;
}
.drivepreview--mock .ds-skeleton{ height:12px; }
.drivepreview--mock .ds-hint{ margin-top:auto; }
/* „Was das System weiß": Feld-Zeile = Label · Wert · Konfidenz · „ändern" (konversationell) */
.steck__row{ display:flex; align-items:baseline; gap:var(--sp-2); padding:5px 0;
  border-bottom:1px solid var(--border); font-size:var(--fs-small); }
.steck__lbl{ color:var(--text-muted); flex:none; }
.steck__val{ margin-left:auto; text-align:right; color:var(--text); font-weight:var(--fw-medium); min-width:0; }
.steck__conf{ flex:none; font-size:var(--fs-micro); color:var(--text-hint); white-space:nowrap; }
.steck__row .ds-btn--ghost{ flex:none; padding:2px 6px; }
@media (max-width:560px){
  .steck{ top:auto; left:0; right:0; bottom:0; width:100%; max-width:100%; max-height:86vh;
    border-radius:var(--radius-lg) var(--radius-lg) 0 0; border-left:none; border-top:1px solid var(--border); }
  .steck__resize{ display:none; }
}

/* ══ DOKUMENT-VORSCHAU „docpage" (beleg-preview → Foundation-Promotion) ══ echtes
   Dokument-Aussehen aus erkannten FELDERN (kein Screenshot-Stub, R-32). */
.docpage{ position:relative; background:var(--surface); border:1px solid var(--border-strong);
  border-radius:var(--radius-md); padding:14px 14px 10px; box-shadow:var(--shadow-card);
  font-size:var(--fs-small); color:var(--text); }
.docpage__badge{ position:absolute; top:8px; right:8px; font-size:var(--fs-micro);
  background:var(--surface-2); border:1px solid var(--border); border-radius:999px;
  padding:1px 8px; color:var(--text-muted); white-space:nowrap; }
.docpage__head{ display:flex; justify-content:space-between; gap:var(--sp-2);
  font-weight:var(--fw-bold); margin:0 0 2px; padding-right:72px; }
.docpage__meta{ color:var(--text-hint); font-size:var(--fs-micro); margin-bottom:8px; }
.docpage__line{ display:flex; justify-content:space-between; gap:var(--sp-2);
  padding:3px 0; border-bottom:1px dashed var(--border); }
.docpage__tot{ display:flex; justify-content:space-between; gap:var(--sp-2);
  padding-top:6px; font-weight:var(--fw-bold); }

/* ══ PIPELINE KLICKBAR (R-93) ══ Step = Sektions-Sprung (eigener Thread, Stand bleibt). */
.pipeline-label{ font-size:var(--fs-small); color:var(--text-hint); display:flex; align-items:center; }
.pipeline-step--link{ cursor:pointer; }
.pipeline-step--link:hover{ color:var(--c-action); }
.pipeline-step--link:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; border-radius:var(--radius-md); }
.srclink--inline{ display:inline; background:none; border:none; padding:0;
  font-size:inherit; line-height:inherit; white-space:nowrap; text-decoration:underline; text-decoration-color:color-mix(in srgb, currentColor 40%, transparent); }
.srclink--inline:hover{ text-decoration-color:currentColor; }
.kpi-tile .srclink{ align-self:flex-start; margin-top:2px; }

/* ───────────────────────── ZONE 3 — KONTEXT-WAHL ───────────────────────────
   R-42 (Gold-Kanon): modehint + [🧵 Im Kontext: … · Thread verlassen ⟳] / [↺ Neu].
   Liegt IN der zone-foot (tönt mit) → dort ohne eigene weiße Leiste. */
.zone-ctxstrip{
  display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap;
  border:1px solid var(--border); border-radius:var(--radius-md);
  background:var(--surface); padding:7px var(--sp-3); margin:var(--sp-3) 0; font-size:var(--fs-small);
}
.composerWrap .zone-ctxstrip{ border:none; background:none; padding:0; margin:0; }
.zone-ctxstrip .cchip{
  background:var(--c-action-bg); color:var(--c-action); border:1px solid var(--border);
  border-radius:999px; padding:3px 11px; font-weight:var(--fw-bold);
}

/* ───────────────────── AA-GATE / KONFORMITÄTS-FEEDBACK ──────────────────────
   Diagnose-Panels des Fundament-Beweises (nicht Teil der Produkt-Bausteine). */
.diag{ display:flex; flex-direction:column; gap:6px; font-size:var(--fs-small); }
.diag__row{ display:flex; align-items:flex-start; gap:8px; }
.diag__ok  { color:var(--c-confirm); font-weight:var(--fw-bold); }
.diag__bad { color:var(--c-danger);  font-weight:var(--fw-bold); }
.diag__code{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:var(--fs-micro);
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:var(--sp-3); white-space:pre-wrap; color:var(--text); overflow:auto; max-height:340px; }

/* ctx-getönte Sektionsfläche (Wayfinding) erbt aus components.css .ds-ctx-surface. */
.zone-wrap{ display:flex; flex-direction:column; }

/* ════════════════════ MOTION + INTERAKTIONS-ZUSTAND (JC-Pflicht) ════════════════════
   Regelwerk R-80..R-83. Bewegung ist NICHT Deko: sie macht sichtbar, dass eine Aktion
   griff, ein Zustand wechselte, ein Element ging/kam. Alles unter prefers-reduced-motion
   respektierend (Block ganz unten schaltet Motion aus). */

/* R-80 · COMPOSER ERWEITERBAR — UMGEZOGEN nach PLAT_06_DESIGN_SYSTEM/components.css
   (K-16-Kanon E-31.1, 02.08. — gleiche Wurzel wie .ds-axis/#1227: core_shell lädt NUR
   tokens+components, ein Cap/Grabber hier wäre auf der Live-Shell TOT. components.css
   ist die überall deployte CSS = Wirkort. Dort: 40vh-Cap + .ds-cmp-grabber). */

/* R-81 · BUTTON-AKTIONS-FEEDBACK — nach Klick sichtbarer bestätigt-Zustand (gefüllt grün + ✓).
   Additiver Modifier auf .ds-btn (SSOT nicht restyled). */
.ds-btn.is-done{
  background:var(--c-confirm); color:var(--surface); border-color:var(--c-confirm);
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.ds-btn.is-done::before{ content:"✓ "; }
.ds-btn.is-rejected{ opacity:.6; text-decoration:line-through; }
/* Approval-Karte nach Entscheid: sanfter „erledigt"-Übergang (Karten-Flip-Feedback). */
.ds-approval{ transition:background .25s ease, border-color .25s ease, opacity .25s ease; }
.ds-approval.is-resolved{ border-color:var(--c-confirm); border-left-color:var(--c-confirm); background:var(--c-confirm-bg); }
.ds-approval.is-resolved .ds-approval__preview{ opacity:.7; }

/* R-82 · THREAD-ZUSTAND SICHTBAR (JC-Modell 2026-07-02) — der Thread-Hintergrund
   SCHLIESST die User-Bubbles MIT EIN, solange man im Sektions-Thread chattet (Default):
   getönte Fläche (.ds-ctx-surface) hinter ALLEN Turns; die User-Bubble „gehört dazu"
   (eckige obere Ecke, R-89-Zusatz). Wechsel zu „Allgemein-Chat": das User-Chat-Fenster
   geht RAUS aus dem Thread — die Zone wird GESAMT-Hintergrund (--bg, „weiß"), die
   User-Bubble löst sich (volle Rundung). Kein Grau-Streifen. */
.zone-chat{ transition:background .3s ease, box-shadow .3s ease; border-radius:var(--radius-lg); }
/* GOLD-KANON (core_app_mockup body.ctx-on, JC 2026-07-03 „genau was hier eingebaut ist"):
   IM KONTEXT/THREAD = Konversation UND Composer-Zone tragen die Akzent-Fläche
   (--c-action-bg, folgt der Marke) und schließen die User-Bubbles mit ein.
   THREAD VERLASSEN = beide Zonen werden WEISS (--surface) — der User-Chat „geht raus".
   Hero behält den leisen Sektions-Tint (Wayfinding, R-42). */
/* M3c/R-131 (10.07., ersetzt #712-Altmodell „Action-Blau-Tönung"): der Thread trägt IMMER
   das Konversations-GRAU (--bg-zone) — das Zustands-Signal liegt allein an der Composer-Box. */
.zone-chat.ds-ctx-surface{ background:var(--bg-zone); }
/* Fuß-Zone (Modus-Zeile + Kontext-Chip + Composer) — tönt MIT dem Thread (Gold .composerWrap). */
/* M3c (10.07., ersetzt #712-Altmodell „zone-foot tönt mit"): COMPOSER-BOX-KANON aus dem
   JC-abgenommenen V3 — R-131: Wrap = IMMER Screen-BG, die Box (.inner) trägt das Zonen-Grau
   NUR im Kontext (body.ctx-on) · R-142: in-thread-Position transparent in der Zone ·
   R-145: auf Zonen-Grau ist der Composer RAHMENLOS; „armed" (R-139) betont NUR das Feld. */
.composerWrap{
  flex:none; background:var(--bg-app); border-top:1px solid var(--border);
  padding:10px 16px 12px; transition:background .25s ease;
  display:flex; flex-direction:column; gap:var(--sp-2);
}
/* #442c/#417 (COMPOSER#01, 11.08.): Slot-Breite folgt der SPALTE DES SCREENS (--content-col),
   nicht mehr einer harten Zahl. Die 1000px standen HART und deckelten den Composer unter
   jeder breiteren Antwortspalte (rka2: Zonen 1100, Composer 1000 = JCs „full weit"-Klasse;
   abgleich2:64-70 hatte den Befund als „Kandidat fuer --content-col" bereits dokumentiert).
   Fallback 1000px = alter Wert — Screens ohne eigene Spalten-Variable messen unverändert. */
.composerWrap .inner{ max-width:var(--content-col,1000px); margin:0 auto; width:100%; display:flex; flex-direction:column; gap:var(--sp-2); }
body.ctx-on .composerWrap{ border-top-color:transparent; padding-top:2px; }
body.ctx-on .composerWrap .inner{ background:var(--bg-zone); border-radius:0 0 12px 12px; padding:10px 16px 12px; }
body.ctx-on .composerWrap .inner .ds-composer,
.composerWrap.composer--inthread .ds-composer{ border-color:transparent; box-shadow:none; }
body.ctx-on .composerWrap:not(.composer-armed) .inner .ds-composer:focus-within,
.composerWrap.composer--inthread:not(.composer-armed) .ds-composer:focus-within{ border-color:transparent; }
body.ctx-on .composerWrap.composer-armed .inner{ background:transparent; }
.composer-armed .ds-composer{ outline:2px dashed var(--c-action); outline-offset:2px; border-radius:var(--radius-lg); }
.composerWrap.composer--inthread{ background:transparent; border-top:none; padding:6px 0 2px; }
.composerWrap.composer--inthread .inner{ max-width:none; margin:0; }
/* Modus-Zeile über dem Composer (Gold .modehint): sagt, worauf sich die Eingabe bezieht. */
.modehint{ font-size:var(--fs-micro); color:var(--text-hint); }
.modehint b{ color:var(--text-muted); }
/* „Im Kontext:"-Chip (Gold .ctxchip) + „Thread verlassen ⟳" (bleibt in der Historie). */
.ctxchip{
  display:inline-flex; align-items:center; gap:8px; max-width:100%;
  background:var(--c-action-bg); color:var(--c-action);
  border:1px solid var(--c-action); border-radius:999px;
  padding:4px 6px 4px 12px; font-size:var(--fs-micro); font-weight:var(--fw-bold);
}
.ctxchip[hidden]{ display:none; }
.ctxchip button{
  background:none; border:none; color:inherit; cursor:pointer;
  font-size:var(--fs-micro); font-weight:var(--fw-bold); padding:2px 8px; border-radius:999px;
}
.ctxchip button:hover{ background:var(--surface); }
/* (Altmodell-Regel entfernt — Zustands-Signal trägt jetzt allein die Box, R-131) */
/* Im Thread (Default): obere Gegen-Ecke der User-Bubble eckig = „am Thread angeschlossen".
   Allgemein-Chat: Bubble löst sich → volle Rundung. */
.zone-chat.is-thread-off .msg.user .bubble{ border-radius:14px; }
/* aktiver vs. abgewählter Kontext-Chip */
.zone-ctxstrip .cchip[data-thread]{ cursor:pointer; }
.zone-ctxstrip.is-thread-off .cchip{ background:var(--surface-2); color:var(--text-muted); box-shadow:none; }
.zone-ctxstrip .cchip.is-active{ box-shadow:inset 0 0 0 1px var(--c-action); }

/* R-83 · MOTION: Zeile beim Erledigen SICHTBAR ausblenden (Fade + Slide + Höhe → 0).
   Kanon-Tempo 2,4 s (JC-Historie: 0,9 s zu schnell → R4 1,6 s → Export 3 04.07.:
   „das Grüne verschwindet zu schnell" → 2,4 s, GRÜN-PHASE BETONT: die Bestätigungs-
   Färbung steht ~1,3 s, erst DANN beginnt Fade + Slide). */
@keyframes ff-rowLeave{
  0%  { opacity:1; transform:none; }
  10% { background:var(--c-confirm-bg); box-shadow:inset 0 0 0 2px var(--c-confirm); }
  55% { opacity:1; transform:none; background:var(--c-confirm-bg); box-shadow:inset 0 0 0 2px var(--c-confirm); }
  100%{ opacity:0; transform:translateX(40px); max-height:0; margin:0; padding-top:0; padding-bottom:0; border-width:0; }
}
.ds-list-item.is-leaving{ overflow:hidden; pointer-events:none; animation:ff-rowLeave 2.4s ease forwards; }
/* Neue Zeile/Bubble beim Erscheinen sanft einblenden. */
@keyframes ff-fadeIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
.msg{ animation:ff-fadeIn .32s ease both; }
/* Generisches Erscheinen (Gold-Intake .entering — Lücke P1 #7): für Zeilen/Karten
   außerhalb von .msg/.statusline. */
.entering{ animation:ff-fadeIn .32s ease both; }

/* ══ KAI-ARBEITSZUSTAND (JC R4, NEU — Promotion aus dem Katalog-Kanon-Layer) ══
   ⏳-Zeile NUR solange eine Aktion MERKLICH dauert; wird durch die Quittungs-Bubble
   ERSETZT (Kai sagt danach, WAS er erledigt hat). Nie zwei gleichzeitig, nie
   stehenbleibend. Trägt zu Recht das Kai-Avatar: Kai SPRICHT („ich bearbeite …"). */
.kai-work > .bubble{ color:var(--text-muted); border-style:dashed; background:transparent !important; }
.kai-work__dots{ display:inline-flex; gap:3px; margin-left:2px; vertical-align:middle; }
.kai-work__dots i{ width:5px; height:5px; border-radius:50%; background:var(--text-hint);
  animation:ff-workdot 1.2s ease-in-out infinite; }
.kai-work__dots i:nth-child(2){ animation-delay:.2s; }
.kai-work__dots i:nth-child(3){ animation-delay:.4s; }
@keyframes ff-workdot{ 0%,80%,100%{ opacity:.25; transform:none; } 40%{ opacity:1; transform:translateY(-2px); } }

/* Typografie-Ruhe (§0b/R-71, Promotion): der Browser-Monospace-Quirk rendert <code>
   sonst als wilde Zwischengröße — Monospace erbt hier die umgebende Größe. */
code{ font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:1em; }

/* ══ AKTIONSTYP = UMRANDUNG ALLEIN (Kanon F-1/F-2/F-3, K2-Auflösung 2026-07-07) ══
   ZWEI Aktionstypen, UNTERSCHEIDBAR NUR über die Umrandung:
     .ds-btn--prompt = Text an den Chat senden (sendPrompt) → GESTRICHELTE Kante.
     .ds-btn--ui     = öffnet lokal ein Panel/Slide-over    → DURCHGEZOGENE Kante.
   Die 💬/▤-Icons FALLEN WEG (redundant mit der Kante). Der Icon-Slot im Button-TEXT trägt
   stattdessen die BEDEUTUNG (⚡ du→KI · 🪄 KI→Ergebnis · ✨ KI→du · oder ein Verb). Diese
   Klassen leben ab hier KANONISCH im Fundament — Screens definieren sie NIE lokal neu (A-7).
   Guard GB-1 (assertConformance) flaggt jedes ::before mit 💬/▤ auf diesen Klassen. */
.ds-btn--prompt{ border:1.5px dashed var(--c-action); color:var(--c-action); background:var(--c-action-bg); }
.ds-btn--prompt:hover{ background:var(--c-action-bg); border-color:var(--c-action); filter:brightness(.98); }
.ds-btn--ui{ border:1.5px solid var(--border-strong); color:var(--text); background:var(--surface); }
.ds-btn--ui:hover{ background:var(--surface-2); border-color:var(--c-action); }
/* KEIN ::before content:"💬"/"▤" — bewusst entfernt (K2). Aktionstyp = Kante allein. */

/* ══ R-127/Q6 TERTIÄR-AKTION = IMMER SICHTBARE AKTION ══ (JC 2026-07-09, „Später"-Fund)
   Die schwächste Aktions-Stufe (Ghost/Tertiär: ApprovalCard-`decline`, „Später", „Ablehnen")
   MUSS auf JEDER Fläche × jedem Theme × jeder Marke als Aktion erkennbar sein. WURZEL des Q6-
   Bugs: das alte .ds-btn--ghost war `border:none; background:none` → auf --surface-2/--bg-inset
   (Grau-auf-Grau) unsichtbar. FIX: Tertiär trägt IMMER einen sichtbaren Rahmen mit ECHTEM
   Kontrast (--border-strong) — nie dieselbe Fläche wie sein Untergrund. Optisch bleibt es die
   LEISESTE Stufe (transparente Füllung, gedämpfte Tinte), aber die Kante macht die Affordanz.
   Hierarchie: --confirm/--primary (Haupt) > --ui/--secondary (Sekundär) > --tertiary (Tertiär).
   Guard R-127 (Kontrast) prüft: Element-BG ≈ Parent-BG NUR erlaubt, wenn ein sichtbarer Rahmen
   (border-width>0, Farbe ≠ transparent) ODER box-shadow existiert — sonst rot. */
.ds-btn--tertiary,
.ds-btn--ghost{
  border:1px solid var(--border-strong);   /* Q6-KERN: sichtbare Kante statt border:none */
  background:transparent;                    /* leiseste Füllung — aber Kante trägt die Affordanz */
  color:var(--text-muted);
  padding:6px 10px;
}
.ds-btn--tertiary:hover,
.ds-btn--ghost:hover{ background:var(--c-action-bg); color:var(--c-action); border-color:var(--c-action); }
.ds-btn--tertiary:focus-visible,
.ds-btn--ghost:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; }

/* ══ SENDEN-SVG (L-2 / GB-6) ══ der EINE Paper-Plane-Senden-Knopf; das SVG erbt die
   Button-Farbe (currentColor) und zentriert sich. KEIN ➤-Glyph mehr. */
.ds-composer__send .ds-send-svg{ display:block; width:18px; height:18px; }

/* ══ COMPOSER-DROPZONE (L-5 / GB-8) ══ Drag&Drop IMMER in den Composer (Datei/Beleg/Foto).
   Kanonisch im Fundament: der Drag-Over-Zustand (.is-dragover) + die Overlay-Zone. Klick-
   Alternative (＋/🎤) bleibt für WCAG. Screens hängen nur den Handler an, nicht das Styling. */
.ds-composer{ position:relative; }
.ds-composer.is-dragover{ border-color:var(--c-action); border-style:dashed; background:var(--c-action-bg); }
.composer-drop{ position:absolute; inset:0; z-index:3; display:none;
  align-items:center; justify-content:center; gap:8px; border-radius:var(--radius-lg);
  background:color-mix(in srgb, var(--c-action) 10%, var(--surface));
  border:2px dashed var(--c-action); color:var(--c-action);
  font:var(--fw-bold) var(--fs-small)/1.3 var(--font-sans); pointer-events:none; }
.ds-composer.is-dragover .composer-drop{ display:flex; }
.composer-drophint{ display:flex; align-items:center; gap:6px; margin-top:6px;
  font-size:var(--fs-micro); color:var(--text-hint); }

/* prefers-reduced-motion: alle Fundament-Animationen/Transitions abschalten (AA/R-61). */
@media (prefers-reduced-motion: reduce){
  .zone-hero__body, .zone-main__body, .ds-btn.is-done, .ds-approval, .zone-chat, .msg, .entering{ transition:none !important; animation:none !important; }
  .ds-list-item.is-leaving{ animation:none !important; display:none; }
  .kai-work__dots i{ animation:none; }
}

/* ══ ICON-RESOLVER-HÜLLE (Tower#20/JC 11.07., White-Label-Achse) ══ Emoji-Platzhalter
   und künftige SVG-Icons (Serie B, #887) teilen EINE Hülle — der Tausch ändert nur Assets. */
.tgv-ic{ display:inline-block; width:1em; height:1em; vertical-align:-0.125em;
  /* JC 11.07.: Ankerpunkt der Serie-B-Icons folgt der MARKE (CORE blau / gabriel coral) —
     ein Token-Hook, kein Hardcode; Icons ohne diesen Kontext bleiben monochrom (Fallback). */
  --tgv-ic-accent: var(--c-action); }
svg.tgv-ic{ fill:none; stroke:currentColor; }
/* WP5 (SPEC KANON01_ICON_GENERATOR §3): fehlender Slug rendert das neutrale placeholder-Icon —
   dezent (kein Motiv-Anspruch), R-V4-ICON zaehlt den Marker weiter als Luecke. */
.tgv-ic--placeholder{ opacity:.55; color:var(--text-muted); }
.tgv-ic--emoji{ width:auto; height:auto; vertical-align:baseline; }