/* =========================================================================
   voice-v8 — "Twilight Conversation Garden"
   -------------------------------------------------------------------------
   Stilrichtung: Lumi ist eine ruhige Begleiterin, kein tech-Assistent. Die
   Oberflaeche atmet wie ein Daemmerungsgespraech — warmes Licht auf tiefer
   Naechtlichkeit, organische Bubbles wie Flussteine, und ein Mic-Button
   als gluehende Ember-Kohle, die mit der eigenen Stimme atmet.

   Angepasste Areas: globale Tokens (Light + Dark Theme via prefers-color-
   scheme + data-mode), Typografie (System-Serif fuer Brand/Display, Rounded
   fuer Body — keine externen Fonts), Topbar mit subtilem Atmos-Verlauf,
   Tabs als pill-Navigation, Chat-Bubbles mit asymmetrischen Rundungen,
   Mic-Dock mit Ember-Glow und Audio-Level-getriebener Aura, Tools-Cards
   als weiche Karten mit gradient-Frame, Settings/Memory in derselben
   Sprache, Truth-Warning als gediegener Margin-Hinweis.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Tokens — Dusk (default dark) ist die Heimat der App.
   ------------------------------------------------------------------------- */

:root {
  /* Pre.511 Editorial-Redesign — Abend (Dusk). Pflaumen-Dunkel mit
     Plum-Bubbles + leuchtendem Ember-Mic. Token-Set aus 2026-05-28 Spec. */
  --paper: #1f1c26;
  --paper-elev: #2a2733;
  --paper-soft: #1a1820;

  --bg: var(--paper);
  --bg-deep: var(--paper-soft);
  --bg-elev: var(--paper-elev);
  --bg-elev-2: var(--paper-elev);
  --surface-soft: rgba(232, 225, 208, 0.04);
  --surface-glass: rgba(232, 225, 208, 0.06);

  --ink: #e8e1d0;
  --ink-soft: #b8af9c;
  --ink-dim: #807a72;
  --ink-muted: #5a5662;

  --text: var(--ink);
  --text-soft: var(--ink-soft);
  --text-dim: var(--ink-dim);
  --text-mute: var(--ink-muted);

  --hairline: rgba(232, 225, 208, 0.08);
  --hairline-strong: rgba(232, 225, 208, 0.14);

  --bubble-user: #5a4f6e;
  --bubble-user-text: #f4eee0;
  --bubble-bot: var(--paper-elev);
  --bubble-bot-border: rgba(232, 225, 208, 0.08);

  --user-bg: var(--bubble-user);
  --user-text: var(--bubble-user-text);
  --bot-bg: var(--bubble-bot);
  --bot-text: var(--ink);
  /* Heller, warmweißer Vordergrund-Text auf farbiger Fläche (Ember-Buttons,
     Chips, Badges) — bewusst theme-unabhängig (war 16× als #fff8ee hartkodiert). */
  --on-color: #fff8ee;

  --ember: #e87b4a;
  --ember-soft: #f0a47e;
  --ember-deep: #b85831;
  --amber: #f4c673;
  --sage: #7fa896;
  --plum: #5a4f6e;
  --rose: #d97a82;

  --accent: var(--ember);
  --accent-soft: var(--ember-soft);
  --warn: var(--amber);
  --error: #d96b6b;
  /* Pre.654: --danger als theme-awares Alias auf --error (war undefiniert,
     u.a. von .btn--danger genutzt). */
  --danger: var(--error);

  /* radii — straffer als Pebble (Editorial-Style) */
  --radius-s: 10px;
  --radius-m: 16px;
  --radius-l: 22px;
  --radius-xl: 28px;
  --radius-bubble: 18px;
  --radius-bubble-corner: 6px;
  /* Legacy-Pebble bleibt für Card-Komponenten erhalten die's noch nutzen */
  --radius-pebble: 18px;
  --radius-pebble-bot: 18px;

  /* spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.25), 0 8px 24px rgba(0, 0, 0, 0.18);
  --shadow-mic:
    0 4px 14px rgba(232, 123, 74, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  --shadow-card:
    0 1px 0 rgba(232, 225, 208, 0.04) inset, 0 8px 28px rgba(0, 0, 0, 0.32);

  /* Pre.510: Aurora + Grain bewusst raus für Editorial-Ruhe. Variablen
     bleiben als leere/transparente Defaults damit alte Refs nicht crashen. */
  --aurora: transparent;
  --grain-opacity: 0;

  --font-display:
    "Iowan Old Style", "Cochin", "Hoefler Text", ui-serif, "New York",
    "Charter", Georgia, serif;
  --font-body:
    -apple-system, BlinkMacSystemFont, "SF Pro Rounded", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Menlo", monospace;

  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-quiet: cubic-bezier(0.25, 0.46, 0.45, 0.94);

  color-scheme: dark;
}

/* Light mode — Cream Daylight.
 *
 * Pre.326: greift wenn (a) OS-Theme = light UND User hat NICHT explizit dark
 * gewählt. Der explizite User-Override via `[data-mode="light"]` ist als
 * separater Block weiter unten (CSS lässt media-queries nicht mit normalen
 * Selectoren in einer Selector-Liste kombinieren). Vorher setzte das
 * data-mode-Attribut nur color-scheme, nicht die Farb-Variablen — User
 * konnte nicht gegen OS-Theme switchen (siehe feedback_voice_inline_styles).
 */
@media (prefers-color-scheme: light) {
  :root:not([data-mode="dark"]) {
    /* Pre.510: Salbei — gespiegelt zu :root[data-mode="light"] für
       OS-Light-Default. Identische Werte, kein Drift. */
    --paper: #f4f1ea;
    --paper-elev: #ffffff;
    --paper-soft: #fbfbf7;

    --bg: var(--paper);
    --bg-deep: var(--paper);
    --bg-elev: var(--paper-elev);
    --bg-elev-2: var(--paper-soft);
    --surface-soft: rgba(74, 91, 81, 0.04);
    --surface-glass: rgba(255, 255, 255, 0.55);

    --ink: #2c322c;
    --ink-soft: #5a625a;
    --ink-dim: #8fa093;
    --ink-muted: #b8b8a8;

    --text: var(--ink);
    --text-soft: var(--ink-soft);
    --text-dim: var(--ink-dim);
    --text-mute: var(--ink-muted);

    --hairline: #e1ddd0;
    --hairline-strong: #cbc9b8;

    --bubble-user: #4a5b51;
    --bubble-user-text: var(--paper);
    --bubble-bot: var(--paper-elev);
    --bubble-bot-border: #d8dbcb;

    --user-bg: var(--bubble-user);
    --user-text: var(--bubble-user-text);
    --bot-bg: var(--bubble-bot);
    --bot-text: var(--ink);

    --ember: #c25a2c;
    --ember-soft: #e87b4a;
    --ember-deep: #8a3e1c;
    --amber: #d99a3c;
    --sage: #4a5b51;
    --plum: #7a5a8a;
    --rose: #c25a64;

    --accent: var(--ember);
    --accent-soft: var(--ember-soft);
    --warn: var(--amber);
    --error: #b8424c;

    --shadow-soft:
      0 1px 2px rgba(74, 91, 81, 0.08), 0 8px 22px rgba(74, 91, 81, 0.06);
    --shadow-mic:
      0 4px 14px rgba(194, 90, 44, 0.32),
      inset 0 1px 0 rgba(255, 255, 255, 0.55);
    --shadow-card:
      0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 6px 22px rgba(74, 91, 81, 0.08);

    color-scheme: light;
  }
}

/* Expliziter User-Override für Light-Mode (Pre.326).
 *
 * Greift wenn User im Menü "Hell" gewählt hat — auch wenn das OS auf
 * Dark steht. Die Var-Werte hier sind 1:1 identisch zum Block oben in
 * der @media-Query — leider erlaubt CSS keine Kombination von normalen
 * Selektoren mit media-Conditions in EINER Regel.
 *
 * Wenn du oben (Cream Daylight) Werte änderst, MUSS dieser Block
 * synchron mitgepflegt werden. Suche nach "Pre.326 Sync" um die zweite
 * Stelle zu finden.
 *
 * Dark-Mode-Override (`[data-mode="dark"]`) braucht keinen Block: die
 * Default-:root-Vars sind bereits dark, und `:root:not([data-mode="dark"])`
 * im @media-Block schließt sie korrekt aus wenn der User dark erzwingt.
 */
:root[data-mode="light"] {
  /* Pre.510: Salbei — Editorial Hell-Theme. Soft Sage Linen mit warmem
     Ember-Akzent. Token-Set aus 2026-05-28 Redesign-Spec. */
  --paper: #f4f1ea;
  --paper-elev: #ffffff;
  --paper-soft: #fbfbf7;

  --bg: var(--paper);
  --bg-deep: var(--paper);
  --bg-elev: var(--paper-elev);
  --bg-elev-2: var(--paper-soft);
  --surface-soft: rgba(74, 91, 81, 0.04);
  --surface-glass: rgba(255, 255, 255, 0.55);

  --ink: #2c322c;
  --ink-soft: #5a625a;
  --ink-dim: #8fa093;
  --ink-muted: #b8b8a8;

  --text: var(--ink);
  --text-soft: var(--ink-soft);
  --text-dim: var(--ink-dim);
  --text-mute: var(--ink-muted);

  --hairline: #e1ddd0;
  --hairline-strong: #cbc9b8;

  --bubble-user: #4a5b51;
  --bubble-user-text: var(--paper);
  --bubble-bot: var(--paper-elev);
  --bubble-bot-border: #d8dbcb;

  --user-bg: var(--bubble-user);
  --user-text: var(--bubble-user-text);
  --bot-bg: var(--bubble-bot);
  --bot-text: var(--ink);

  --ember: #c25a2c;
  --ember-soft: #e87b4a;
  --ember-deep: #8a3e1c;
  --amber: #d99a3c;
  --sage: #4a5b51;
  --plum: #7a5a8a;
  --rose: #c25a64;

  --accent: var(--ember);
  --accent-soft: var(--ember-soft);
  --warn: var(--amber);
  --error: #b8424c;

  --shadow-soft:
    0 1px 2px rgba(74, 91, 81, 0.08), 0 8px 22px rgba(74, 91, 81, 0.06);
  --shadow-mic:
    0 4px 14px rgba(194, 90, 44, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.55);
  --shadow-card:
    0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 6px 22px rgba(74, 91, 81, 0.08);

  color-scheme: light;
}

/* Dark-Mode-Override: User erzwingt Dark gegen OS-Light.
 * Die Vars sind schon dark im :root-Default — wir setzen hier nur
 * color-scheme explizit damit Form-Elemente (Scrollbars, Inputs)
 * dark gerendert werden. */
:root[data-mode="dark"] {
  color-scheme: dark;
}

/* Wald — Tiefgrün-Dunkel-Theme (3. Modus neben Abend/dunkel + Salbei/hell).
 * Waldboden-Dunkelgrün mit warmem Ember-Akzent. Überschreibt denselben
 * Token-Satz wie der Salbei-Block — nur die Werte sind erdig-grün.
 * Theme-unabhängige Tokens (radii, spacing, fonts) erben aus :root. */
:root[data-mode="wald"] {
  --paper: #14201a;
  --paper-elev: #1d2c24;
  --paper-soft: #0f1813;

  --bg: var(--paper);
  --bg-deep: var(--paper-soft);
  --bg-elev: var(--paper-elev);
  --bg-elev-2: var(--paper-elev);
  --surface-soft: rgba(228, 232, 218, 0.04);
  --surface-glass: rgba(228, 232, 218, 0.06);

  --ink: #e4e8da;
  --ink-soft: #a7b29c;
  --ink-dim: #6a7563;
  --ink-muted: #4f5a4a;

  --text: var(--ink);
  --text-soft: var(--ink-soft);
  --text-dim: var(--ink-dim);
  --text-mute: var(--ink-muted);

  --hairline: rgba(228, 232, 218, 0.08);
  --hairline-strong: rgba(228, 232, 218, 0.14);

  --bubble-user: #2a3d30;
  --bubble-user-text: #eaf0e1;
  --bubble-bot: var(--paper-elev);
  --bubble-bot-border: rgba(228, 232, 218, 0.08);

  --user-bg: var(--bubble-user);
  --user-text: var(--bubble-user-text);
  --bot-bg: var(--bubble-bot);
  --bot-text: var(--ink);

  --ember: #e8843f;
  --ember-soft: #f0a47e;
  --ember-deep: #b85831;
  --amber: #f4c673;
  --sage: #7fa896;
  --plum: #5a4f6e;
  --rose: #d97a82;

  --accent: var(--ember);
  --accent-soft: var(--ember-soft);
  --warn: var(--amber);
  --error: #d96b6b;
  --danger: var(--error);

  --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.28), 0 8px 24px rgba(0, 0, 0, 0.22);
  --shadow-mic:
    0 4px 14px rgba(232, 132, 63, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.16);
  --shadow-card:
    0 1px 0 rgba(228, 232, 218, 0.04) inset, 0 8px 28px rgba(0, 0, 0, 0.36);

  color-scheme: dark;
}

/* Ozean — Tiefblau-Dunkel-Theme (Pre.791, #63). Nachtmeer mit Azur-Akzent.
 * Gleicher Token-Satz wie Wald; MUSS nach dem @media-Light-Block stehen
 * (gleiche Spezifität — nur die Source-Order rettet uns). */
:root[data-mode="ozean"] {
  --paper: #18222e;
  --paper-elev: #22303f;
  --paper-soft: #121a24;

  --bg: var(--paper);
  --bg-deep: var(--paper-soft);
  --bg-elev: var(--paper-elev);
  --bg-elev-2: #2a3a4c;
  --surface-soft: color-mix(in srgb, var(--ink) 6%, transparent);
  --surface-glass: rgba(24, 34, 46, 0.72);

  --ink: #dce6ee;
  --ink-soft: #a3b3c2;
  --ink-dim: #6b7d8d;
  --ink-muted: #4c5a68;

  --text: var(--ink);
  --text-soft: var(--ink-soft);
  --text-dim: var(--ink-dim);
  --text-mute: var(--ink-muted);

  --hairline: color-mix(in srgb, var(--ink) 8%, transparent);
  --hairline-strong: color-mix(in srgb, var(--ink) 14%, transparent);

  --bubble-user: #31495e;
  --bubble-user-text: #eaf2f8;
  --bubble-bot: var(--paper-elev);
  --bubble-bot-border: color-mix(in srgb, var(--ink) 8%, transparent);

  --user-bg: var(--bubble-user);
  --user-text: var(--bubble-user-text);
  --bot-bg: var(--bubble-bot);
  --bot-text: var(--ink);

  --ember: #4d9fd6;
  --ember-soft: #7fc0e8;
  --ember-deep: #2f6f9e;
  --amber: #f4c673;
  --sage: #7fa896;
  --plum: #5a4f6e;
  --rose: #d97a82;

  --accent: var(--ember);
  --accent-soft: var(--ember-soft);
  --warn: var(--amber);
  --error: #d96b6b;
  --danger: var(--error);

  --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.28), 0 8px 24px rgba(0, 0, 0, 0.22);
  --shadow-mic:
    0 4px 14px color-mix(in srgb, var(--ember) 32%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
  --shadow-card:
    0 1px 0 color-mix(in srgb, var(--ink) 4%, transparent) inset,
    0 8px 28px rgba(0, 0, 0, 0.36);

  color-scheme: dark;
}

/* Sand — Warmhelles Duenen-Theme (Pre.791, #63). Creme-Beige mit Bronze-Akzent. */
:root[data-mode="sand"] {
  --paper: #f5efe2;
  --paper-elev: #fffdf7;
  --paper-soft: #faf5ea;

  --bg: var(--paper);
  --bg-deep: var(--paper);
  --bg-elev: var(--paper-elev);
  --bg-elev-2: var(--paper-soft);
  --surface-soft: color-mix(in srgb, var(--ink) 4%, transparent);
  --surface-glass: rgba(255, 255, 255, 0.55);

  --ink: #352e25;
  --ink-soft: #6b6354;
  --ink-dim: #998f7c;
  --ink-muted: #c2b9a4;

  --text: var(--ink);
  --text-soft: var(--ink-soft);
  --text-dim: var(--ink-dim);
  --text-mute: var(--ink-muted);

  --hairline: #e7dfcc;
  --hairline-strong: #d3c8ae;

  --bubble-user: #6d5a3e;
  --bubble-user-text: var(--paper);
  --bubble-bot: var(--paper-elev);
  --bubble-bot-border: #e2d8c2;

  --user-bg: var(--bubble-user);
  --user-text: var(--bubble-user-text);
  --bot-bg: var(--bubble-bot);
  --bot-text: var(--ink);

  --ember: #9a6c20;
  --ember-soft: #c2913c;
  --ember-deep: #6e4c12;
  --amber: #cf8f33;
  --sage: #5d6b54;
  --plum: #7a5a8a;
  --rose: #c25a64;

  --accent: var(--ember);
  --accent-soft: var(--ember-soft);
  --warn: var(--amber);
  --error: #b8424c;
  --danger: var(--error);

  --shadow-soft:
    0 1px 2px rgba(91, 77, 54, 0.08),
    0 8px 22px rgba(91, 77, 54, 0.06);
  --shadow-mic:
    0 4px 14px color-mix(in srgb, var(--ember) 32%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
  --shadow-card:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 6px 22px rgba(91, 77, 54, 0.08);

  color-scheme: light;
}


/* -------------------------------------------------------------------------
   2. Reset & Body
   ------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
html {
  /* Pre.129: explizite 100% Höhen-Kette (html → body → #app). Ersetzt
     die dvh/svh/lvh-Tricks die auf iOS-PWA-Standalone unzuverlässig
     waren — manchmal wurde der Home-Indicator-Bereich aus dem
     Viewport rausgerechnet, manchmal drin gelassen → Footer-Spalt
     je nach Race-Bedingung. 100% ist deterministisch. */
  overflow-x: hidden;
  overscroll-behavior: none;
  height: 100%;
  width: 100%;
  /* Pre.132: html-background = App-Background. Falls iOS-Overscroll
     irgendwo durchblitzt oder ein flex-Race einen Pixel zwischen body
     und #app produziert: gleiche Farbe = optisch weg. */
  background: #f3e8d2;
}

/* Pre.133: GLOBAL Input-Font-Size 16px Minimum gegen iOS-Auto-Zoom.
   iOS-Safari zoomt beim Focus rein wenn font-size < 16px ist —
   user-scalable=no wird in neueren Versionen ignoriert. Diese Regel
   ist defensive und überschreibt einzelne kleinere font-size-Werte
   per !important nur für die computed font-size. Spezifische Felder
   können größer sein, kleinere lehnen wir konsequent ab. */
input,
textarea,
select {
  font-size: max(16px, 1rem);
}

body {
  margin: 0;
  padding: 0;
  /* Pre.129: 100% statt vh/dvh/svh. html hat height:100%, body kriegt
     dieselbe deterministische Höhe ohne iOS-Race-Bug. */
  height: 100%;
  width: 100%;
  background: var(--bg-deep);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0.005em;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  overscroll-behavior: none;
}

/* Atmosphaerischer Hintergrund — Aurora + Grain */
body {
  position: relative;
  background: var(--aurora), var(--bg);
  background-attachment: fixed;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  /* Ultra-subtiles Grain via SVG-noise inline (kein external asset) */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.9  0 0 0 0 0.7  0 0 0 0 0.5  0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: var(--grain-opacity);
  mix-blend-mode: overlay;
}

#app {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  /* Pre.129: 100% (vom body) statt vh/dvh/svh. Deterministisch und
     ohne iOS-PWA-Race. */
  height: 100%;
  width: 100%;
  margin: 0 auto;
  /* Pre.110: status-bar bleibt drin (User-Wunsch) und macht eigene
     safe-area-bottom. #app braucht kein zusätzliches padding sonst
     Triple-Stack. Body-bg = bg-deep matched alle Komponenten. */
  padding: 0;
  background: var(--bg-deep);
  /* Desktop-Sidebar (links) und Module-Speedbar (rechts) shiften das
     App-Innere via padding. Smooth-transition für beide Seiten. */
  transition:
    padding-left 220ms var(--ease-soft),
    padding-right 320ms var(--ease-quiet);
}

/* Inner-Wrapper-Pattern: Topbar/Composer/Dock/Status-Bar nehmen volle
   Viewport-Breite, ihr Inhalt wird aber auf max-width zentriert (Pre.91:
   Header/Footer 100% breit, Content max 800px). */
:root {
  --content-max: 800px;
  /* #132 (Martin): Header & Fußzeile laufen mit vollem Hintergrund über die
     ganze Breite, ihr INHALT wird aber auf diese Breite zentriert — auf
     großen Monitoren steht sonst alles zu weit auseinander. */
  --shell-max: 1200px;
  /* Pre.745: Sidebar-Breiten als Tokens — voll vs. eingeklappte Icon-Rail.
     Vorher hartkodiert (240/320/min(85vw,320px)!important) → Überlappungs-Bug. */
  --sidebar-w: 320px;
  --rail-w: 64px;
}

.view,
.chat,
.text-input,
.dock,
.status-bar,
.topbar > * {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.view {
  max-width: var(--content-max);
}

::selection {
  background: rgba(232, 123, 74, 0.3);
  color: inherit;
}

/* Custom scrollbars — schmal, warm */
.chat,
.tools-view,
.settings-view,
.memory-list {
  scrollbar-width: thin;
  scrollbar-color: var(--hairline-strong) transparent;
}
.chat::-webkit-scrollbar,
.tools-view::-webkit-scrollbar,
.settings-view::-webkit-scrollbar,
.memory-list::-webkit-scrollbar {
  width: 6px;
}
.chat::-webkit-scrollbar-thumb,
.tools-view::-webkit-scrollbar-thumb,
.settings-view::-webkit-scrollbar-thumb,
.memory-list::-webkit-scrollbar-thumb {
  background: var(--hairline-strong);
  border-radius: 999px;
}

/* -------------------------------------------------------------------------
   3. Topbar
   ------------------------------------------------------------------------- */

.topbar {
  position: relative;
  /* Pre.108: safe-area-inset-top ADDIEREN. Pre.522: subtler box-shadow
     für Tiefe statt nur hairline — gibt klare Trennung zur Info-Zeile
     (Active-Project-Bar) unter dem Header ohne harte Linie.
     Pre.992: nativ den Abstand straffen. Pre.994: am echten Gerät klebte der
     Header zu dicht an Uhr/Notch → etwas mehr Luft: env minus space-2 (statt -4).
     Boden = space-2 (Browser/PWA unverändert: env=0 → space-2). */
  padding-top: max(var(--space-2), calc(env(safe-area-inset-top) - var(--space-2)));
  padding-right: env(safe-area-inset-right);
  padding-bottom: var(--space-2);
  padding-left: env(safe-area-inset-left);
  border-bottom: 1px solid var(--hairline);
  background: var(--paper-elev, var(--bg-deep));
  box-shadow:
    0 1px 0 var(--hairline),
    0 4px 16px rgba(0, 0, 0, 0.04);
  z-index: 5;
}

.reload-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--hairline);
  color: var(--text-dim);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    color 180ms var(--ease-soft),
    border-color 180ms var(--ease-soft);
}
.reload-btn:hover {
  color: var(--ember);
  border-color: color-mix(in srgb, var(--ember) 35%, var(--hairline));
}
.reload-btn:active {
  transform: rotate(180deg);
  transition: transform 400ms var(--ease-soft);
}

/* Pre.109/110: bei Text-Input-Focus Dock + Status-Bar ausblenden,
   mehr Platz für Chat während du tippst. Beim Blur wieder einblenden.
   Pre.928: Bottom-Nav ebenfalls — sonst klebt die Tastatur darauf. */
body.text-focus .dock,
body.text-focus .status-bar,
body.text-focus .bottom-nav {
  display: none;
}

/* Pre.928: Bottom-Nav — Daumen-Navigation NUR mobil (body.has-bottom-nav wird
   in app.ts ausschliesslich bei !isDesktop() gesetzt). Letzte Flex-Zeile im
   #app unter Dock + Status-Bar; safe-area-inset NUR hier (Dock/Status-Bar
   tragen sie nicht → keine Doppel-Polsterung). Desktop nutzt die Sidebar. */
.bottom-nav {
  display: none;
}
body.has-bottom-nav .bottom-nav {
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  gap: 2px;
  /* Pre.993: unteren Abstand straffen — der volle Home-Indicator-Reservebereich
     ließ ein Leerband unter den Buttons. env minus space-3, Boden = 6px
     (Browser/PWA unverändert: env=0 → 6px). Footer rutscht runter. */
  padding: 6px 4px max(6px, calc(env(safe-area-inset-bottom) - var(--space-3)));
  background: var(--paper-elev, var(--bg-deep));
  border-top: 1px solid var(--hairline);
}
.bottom-nav-btn {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-height: 46px;
  padding: 4px 2px;
  background: none;
  border: 0;
  border-radius: 10px;
  color: var(--text-soft, var(--text));
  font: inherit;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.bottom-nav-btn.is-active {
  color: var(--ember);
}
.bottom-nav-btn:active {
  background: color-mix(in srgb, var(--ink) 6%, transparent);
}
/* Griff zum Ein-/Ausblenden der Bottom-Nav (nur mobil, mehr Platz auf kleinen
   Geräten). Bleibt sichtbar, wenn die Nav eingeklappt ist → wieder einblendbar. */
.bottom-nav-toggle {
  display: none;
}
body.has-bottom-nav .bottom-nav-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 22px;
  padding: 2px 0;
  background: var(--paper-elev, var(--bg-deep));
  border: 0;
  border-top: 1px solid var(--hairline);
  color: var(--text-soft, var(--text));
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.bottom-nav-toggle svg {
  transition: transform 200ms var(--ease-soft, ease);
}
body.bottom-nav-collapsed .bottom-nav {
  display: none;
}
body.bottom-nav-collapsed .bottom-nav-toggle svg {
  transform: rotate(180deg);
}
/* Eingeklappt trägt der Griff die Safe-Area unten (die Nav tut es sonst). */
body.bottom-nav-collapsed.has-bottom-nav .bottom-nav-toggle {
  padding-bottom: max(2px, calc(env(safe-area-inset-bottom) - var(--space-3)));
}

/* Pre.126b: pre.125 sibling-Margin-Regel entfernt zusammen mit dem
   margin-top:auto auf .dock. Pinning macht jetzt korrekt
   .view { flex: 1; min-height: 0 } — das schiebt die nachfolgenden
   Children (dock + status-bar) zuverlässig ans untere Ende ohne
   Konkurrenz mit margin-auto. */

/* Inner-Wrapper bringt Topbar-Inhalte auf max-content-width
   (passend zur Content-Spalte darunter), während die topbar selbst
   100% Viewport-Breite nutzt (Border + Hintergrund). */
.topbar-inner {
  /* Pre.749: Flex-Layout — links Identität (Logo + BÄRLI + Status), rechts der
     Steuer-Cluster (.topbar-meta via margin-left:auto). Mitte bewusst frei. */
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  /* #132: Inhalt auf --shell-max (1200px) zentriert; der .topbar-Hintergrund
     bleibt voll breit. Vorher max-width:none → auf großen Monitoren zu weit. */
  max-width: var(--shell-max);
  margin: 0 auto;
  padding: 0 var(--space-3);
}

/* Pre.747: Desktop — mehr Luft seitlich + zwischen den Clustern. */
@media (min-width: 768px) {
  .topbar-inner {
    padding-inline: var(--space-5);
    gap: var(--space-3);
  }
}

/* Pre.514+522: Burger + Brand als Left-Cluster, direkt aneinander.
   Auf engen Screens nur Paw-Icon. */
.topbar .menu-btn {
  order: 0;
  /* pre.872: NICHT schrumpfen — sonst quetscht der enge PWA-Header den runden
     38x38-Button horizontal und er sieht oval aus. */
  flex: none;
}
.topbar .brand {
  order: 1;
  flex: none;
  padding-left: 4px;
  padding-right: 4px;
}
.topbar .topbar-meta {
  order: 3;
  /* Pre.749: schiebt den Steuer-Cluster ans rechte Ende (Flex-Layout). */
  margin-left: auto;
  display: flex;
  align-items: center;
  /* pre.943 (Martin): luftiger + OHNE Umrahmung. Die frühere paper-soft-Pille
     + Hairline-Border (Pre.522) ist raus — die Indikatoren (Uhrzeit, Projekt,
     Tasks, Glocke) stehen jetzt frei im Kopf mit mehr Luft dazwischen. Jedes
     Element hat ohnehin seinen eigenen Stil (Projekt = Sage-Chip, Glocke etc.). */
  gap: 14px;
  justify-content: flex-end;
}
/* pre.949 (Ticket #184): Header-Uhr (.topbar-clock) entfernt — Datum+Uhrzeit
   ganz raus, das Gerät zeigt die Zeit ohnehin in der System-Statusleiste. */

/* Pre.514 Editorial-Header: zentrierter Block mit Bot-Name + Live-Meta. */
.topbar-center {
  order: 2;
  /* Pre.749: linker Identitäts-Cluster (Avatar + BÄRLI + Provider-Punkt +
     Voice-Status) — inline-Reihe statt zentrierter Block in der Mitte. */
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
}
.topbar-bot-name {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink, var(--text));
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar-meta-text {
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--ink-dim, var(--text-dim));
  /* Pre.749: inline im Identitäts-Cluster — kein vertikaler Versatz mehr. */
  margin-top: 0;
  text-transform: uppercase;
  font-feature-settings: "tnum";
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Pre.749: Voice-Status als dezenter Text mit „·"-Trenner (statt Chip rechts). */
.topbar-center .state {
  display: inline;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--text-dim);
}
.topbar-center .state::before {
  content: "·";
  margin: 0 6px;
  opacity: 0.5;
}
/* Pre.749: Provider-Status = kleiner farbiger Punkt am Bot-Namen (kein Text-Chip). */
.topbar-center .topbar-provider-health {
  width: 9px;
  height: 9px;
  padding: 0;
  border-radius: 50%;
  font-size: 0;
  border: none;
}
.topbar-center .topbar-provider-health[data-status="ok"] {
  background: var(--sage);
  border: none;
}
.topbar-center .topbar-provider-health[data-status="fail"] {
  background: var(--error);
  border: none;
}
/* Pre.749: „Pawbot"-Wort entfällt — Paw-Logo (Home) + Bot-Name (BÄRLI) sind die
   Identität. Ersetzt die frühere nur-Mobile-Ausblendung (DRY: eine Regel). */
.topbar .brand-text {
  display: none;
}

/* Pre.154: Subheader-Bar UNTER der Topbar — prominent, immer sichtbar wenn
 * ein Projekt aktiv ist. Klick öffnet Projekte-Tab.
 * Pre.522: ruhigerer Background ohne harten Gradient, leichtere bottom-Border.
 * Topbar-Shadow oben liefert bereits die saubere Trennung. */
.active-project-bar {
  display: flex;
  align-items: stretch;
  width: 100%;
  background: color-mix(in srgb, var(--sage) 12%, var(--paper-soft));
  border-bottom: 1px solid var(--hairline);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  text-align: left;
}

/* Web-Optimierung: auf großem Display etwas mehr Innenabstand */
@media (min-width: 720px) {
  .active-project-bar {
    font-size: 14px;
    padding: 0;
  }
}

/* Linker Bereich: klickbar → Projekte-View öffnen */
.active-project-bar-main {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-align: left;
  transition: background 180ms var(--ease-soft);
  min-width: 0;
}

.active-project-bar-main:hover {
  background: color-mix(in srgb, var(--sage) 18%, transparent);
}

/* Rechter × Button: Projekt schließen */
/* Pre.219: Bar permanent versteckt — Topbar-Pill ist der einzige Indikator. */
.active-project-bar--hidden,
.active-project-bar--hidden[hidden],
.active-project-bar.active-project-bar--hidden {
  display: none !important;
}
.active-project-bar[hidden] {
  display: none;
}

.active-project-bar-label {
  font-weight: 600;
  color: color-mix(in srgb, var(--sage) 90%, var(--text));
  flex-shrink: 0;
}

.active-project-bar-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--sage);
  flex-shrink: 0;
}

.active-project-bar-name {
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  flex-shrink: 0;
}

.active-project-bar-desc {
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

/* Pre.156: Bot-Avatar in der Topbar — kleiner Kreis, zeigt das aktuelle
 * Avatar damit User Bezug zur Identität hat. */
.topbar-bot-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--ember) 35%, transparent);
  background: var(--bg-elev-2);
}

.topbar-bot-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.topbar-bot-avatar[hidden] {
  display: none;
}

/* Pre.323: Provider-Health-Status (nur Superadmin sichtbar) */
.topbar-provider-health {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2px;
  cursor: help;
  white-space: pre-wrap;
}
.topbar-provider-health[hidden] {
  display: none;
}
.topbar-provider-health[data-status="ok"] {
  background: color-mix(in srgb, var(--sage) 22%, transparent);
  color: var(--sage);
  border: 1px solid color-mix(in srgb, var(--sage) 40%, transparent);
}
.topbar-provider-health[data-status="fail"] {
  background: color-mix(in srgb, var(--error) 22%, transparent);
  color: var(--error);
  border: 1px solid color-mix(in srgb, var(--error) 50%, transparent);
}

/* Pre.152: Aktives-Projekt-Badge in der Topbar — klickbar, öffnet die
 * Projekte-View. Sage-Akzent damit der State-Pill (ember) optisch
 * dominant bleibt. */
.topbar-project {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--sage) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--sage) 30%, transparent);
  color: var(--text);
  font-size: 12px;
  font-weight: 500;
  font-family: var(--font-body);
  cursor: pointer;
  max-width: 180px;
  transition: background 200ms var(--ease-soft);
}

.topbar-project:hover {
  background: color-mix(in srgb, var(--sage) 22%, transparent);
}

.topbar-project[hidden] {
  display: none;
}

.topbar-project-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--sage);
}

.topbar-project-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 480px) {
  .topbar-project {
    max-width: 110px;
    font-size: 11px;
    padding: 3px 8px 3px 6px;
  }
}

.topbar::after {
  /* sanfte Lichtkante unter der Topbar */
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--ember) 40%, transparent),
    transparent
  );
  opacity: 0.5;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: none;
  padding: 4px 6px;
  margin-left: -6px;
  cursor: pointer;
  border-radius: var(--radius-m);
  transition: background 200ms var(--ease-soft);
}

.brand:hover {
  background: var(--bg-elev-2);
}

.brand:active {
  transform: scale(0.98);
}

.brand-logo {
  width: 30px;
  height: 26px;
  flex-shrink: 0;
  fill: var(--ember);
  filter: drop-shadow(0 1px 2px rgba(184, 88, 49, 0.18));
}

.brand-text {
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  line-height: 1;
}

.brand-paw {
  color: var(--text);
  font-weight: 500;
}

.brand-dot {
  color: var(--ember);
  opacity: 0.6;
  font-size: 16px;
}

.brand-voice {
  color: var(--text-soft);
  font-style: italic;
  font-weight: 400;
}

/* Pre.447: Aggressives Mobile-Cleanup. User-Beschwerde 2026-05-22:
 * "8 Elemente im Header, alles unprofessionell". Mobile zeigt jetzt
 * NUR: [Menü] [🐾] [Projekt-Pill] [Zustands-Dot] [🔔 Glocke]
 * Brand-Text "Pawbot", Bot-Avatar und Provider-Health werden
 * mobile-only versteckt. State zur Dot-only-Pille reduziert. */
@media (max-width: 600px) {
  /* Pfote-Logo etwas kleiner */
  .brand-logo {
    width: 24px;
    height: 22px;
  }
  /* "Pawbot"-Text komplett raus auf Mobile — die Pfote spricht für sich */
  .brand-text {
    display: none;
  }
  /* Bot-Avatar (Bär) auf Mobile raus — auf Voice-Bubble sichtbar */
  #topbar-bot-avatar {
    display: none !important;
  }
  /* Provider-Health (Debug-Indikator) auf Mobile raus */
  #topbar-provider-health {
    display: none !important;
  }
  /* State-Pill auf Mobile komplett raus — der Voice-Bubble-Speaking-Pulse
   * + die Connect/Stop-Button-Animation sagen schon dasselbe. */
  .topbar .state {
    display: none;
  }
  /* Projekt-Pill kürzer, kompakter */
  .topbar-project {
    padding: 4px 8px;
  }
  .topbar-project-name {
    max-width: 10ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
  }
  /* Tasks-Pulse kompakter */
  .topbar-tasks-pulse {
    padding: 3px 7px 3px 6px;
    font-size: 11px;
  }
  /* Tickets-Glocke kompakter */
  .topbar-tickets-bell {
    width: 28px;
    height: 28px;
  }
  .topbar-tickets-bell svg {
    width: 16px;
    height: 16px;
  }
  /* Header-Gap insgesamt enger */
  .topbar-meta {
    gap: 6px;
  }
}

@media (max-width: 380px) {
  .topbar-project-name {
    max-width: 7ch;
  }
  /* Bei extrem schmal: Projekt-Pill nur als Dot */
  .topbar-project-name[data-no-name="true"] {
    display: none;
  }
}

.tabs.is-hidden {
  display: none;
}

/* Pre.781: Proportionen — der Punkt saß bei left:9px (endete 16px), der
 * Text begann bei 22px: nur 6px Luft, und der dotBreathe-Glow (+4px Ring)
 * blutete sichtbar in den Text („bereit"/„ich höre" überblendet). Jetzt:
 * Punkt 8px bei left:11px, Text ab 28px → auch bei vollem Glow ≥6px frei. */
.state {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  text-transform: lowercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  padding: 6px 14px 6px 28px;
  border-radius: 999px;
  background: var(--surface-soft);
  border: 1px solid var(--hairline);
  position: relative;
  transition:
    color 240ms var(--ease-soft),
    border-color 240ms var(--ease-soft),
    background 240ms var(--ease-soft);
}

.state::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.55;
  box-shadow: 0 0 0 0 currentColor;
}

.state[data-state="idle"] {
  color: var(--text-dim);
}

.state[data-state="connecting"] {
  color: var(--amber);
}
.state[data-state="connecting"]::before {
  animation: dotPulse 1.4s var(--ease-quiet) infinite;
}

.state[data-state="listening"] {
  color: var(--sage);
  border-color: color-mix(in srgb, var(--sage) 35%, transparent);
  background: color-mix(in srgb, var(--sage) 8%, transparent);
}
.state[data-state="listening"]::before {
  animation: dotBreathe 2.2s var(--ease-quiet) infinite;
}

.state[data-state="thinking"] {
  color: var(--amber);
  border-color: color-mix(in srgb, var(--amber) 35%, transparent);
}
.state[data-state="thinking"]::before {
  animation: dotPulse 1s var(--ease-quiet) infinite;
}

.state[data-state="speaking"] {
  color: var(--ember);
  border-color: color-mix(in srgb, var(--ember) 40%, transparent);
  background: color-mix(in srgb, var(--ember) 10%, transparent);
}
.state[data-state="speaking"]::before {
  animation: dotBreathe 1.4s var(--ease-quiet) infinite;
}

.state[data-state="error"] {
  color: var(--error);
  border-color: color-mix(in srgb, var(--error) 40%, transparent);
}

@keyframes dotPulse {
  0%,
  100% {
    opacity: 0.4;
  }
  50% {
    opacity: 1;
  }
}

@keyframes dotBreathe {
  0%,
  100% {
    opacity: 0.55;
    box-shadow: 0 0 0 0 currentColor;
  }
  50% {
    opacity: 1;
    /* Pre.781: Ring 4px → 3px + schwächer — bleibt klar vom Text getrennt */
    box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent);
  }
}

/* -------------------------------------------------------------------------
   4. Banner
   ------------------------------------------------------------------------- */

.banner {
  /* Pre.786: Banner war Flex-stretch-Kind von #app ohne max-width ->
     zog sich im Web ueber die GANZE Seitenbreite (Martins 'Update
     verfuegbar'-Befund). Jetzt auf die Inhaltsbreite gedeckelt. */
  margin: var(--space-3) auto 0;
  width: calc(100% - 2 * var(--space-4));
  max-width: var(--content-max);
  padding: var(--space-3) var(--space-4);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  background: var(--surface-glass);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-soft);
  animation: bannerIn 320ms var(--ease-soft);
}

/* Pre.471: Voice-Live-Banner — FLOATING PILL oben rechts.
 * Vorher mittig zentriert ("schrecklich, mitten im Fenster" — User
 * 2026-05-23). Jetzt kompakt, absolut positioniert, stört keinen
 * Content.
 * Ticket #191: top erhoehter auf 100px damit die Pill nicht die
 * View-Headlines ueberdeckt (Topbar ~56px + Headline-Band ~40px). */
.voice-live-banner {
  position: fixed;
  top: 100px;
  right: 12px;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 5px 12px 5px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--sage) 92%, transparent),
    color-mix(in srgb, var(--sage) 70%, transparent)
  );
  border: 1px solid color-mix(in srgb, var(--sage) 80%, transparent);
  border-radius: 999px;
  cursor: pointer;
  box-shadow:
    0 3px 10px color-mix(in srgb, var(--sage) 38%, transparent),
    0 0 0 0 color-mix(in srgb, var(--sage) 60%, transparent);
  animation: voice-live-pulse 2s ease-in-out infinite;
  -webkit-tap-highlight-color: transparent;
  font-family: var(--font-body);
}
.voice-live-banner[hidden] {
  display: none;
}
.voice-live-banner:hover {
  filter: brightness(1.08);
}
.voice-live-banner:active {
  transform: scale(0.97);
}
.voice-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.85);
  /* P1.8 (Audit): Punkt atmet mit dem ECHTEN Mikro-Pegel (--mic-level
     kommt vom Banner). Die Blink-Keyframes dürfen transform deshalb
     nicht mehr anfassen — sonst überschreiben sie die Skalierung. */
  transform: scale(calc(1 + var(--mic-level, 0) * 1.6));
  transition: transform 60ms linear;
  animation: voice-live-dot-blink 1.2s ease-in-out infinite;
}
.voice-live-label {
  font-size: 10px;
}
.voice-live-timer {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  background: rgba(255, 255, 255, 0.22);
  padding: 1px 7px;
  border-radius: 999px;
  min-width: 44px;
  text-align: center;
}
/* Pre.769: ~1 Min vor der geplanten 9-Min-Auffrischung pulsiert der Timer
   dezent in Amber (lautloser Heads-up — bewusst KEIN Rot/Alarm, kein Ton). */
.voice-live-timer.timer-refresh-soon {
  background: color-mix(in srgb, var(--amber) 45%, rgba(255, 255, 255, 0.22));
  animation: timer-amber-pulse 1.6s ease-in-out infinite;
}
@keyframes timer-amber-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--amber) 65%, transparent);
  }
  50% {
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--amber) 0%, transparent);
  }
}
@media (max-width: 380px) {
  .voice-live-banner {
    top: 96px;
    right: 8px;
    padding: 4px 10px 4px 8px;
  }
  .voice-live-label {
    display: none;
  }
}
@keyframes voice-live-pulse {
  0%,
  100% {
    box-shadow:
      0 3px 10px color-mix(in srgb, var(--sage) 38%, transparent),
      0 0 0 0 color-mix(in srgb, var(--sage) 50%, transparent);
  }
  50% {
    box-shadow:
      0 3px 12px color-mix(in srgb, var(--sage) 50%, transparent),
      0 0 0 6px color-mix(in srgb, var(--sage) 0%, transparent);
  }
}
@keyframes voice-live-dot-blink {
  0%,
  100% {
    opacity: 1;
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.85);
  }
  50% {
    opacity: 0.6;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.95);
  }
}

.banner[data-kind="error"] {
  background: color-mix(in srgb, var(--error) 18%, var(--bg-elev));
  border-color: color-mix(in srgb, var(--error) 50%, transparent);
  color: var(--text);
}

.banner[data-kind="info"] {
  background: color-mix(in srgb, var(--ember) 14%, var(--bg-elev));
  border-color: color-mix(in srgb, var(--ember) 35%, transparent);
}
/* Pre.786: warning/success wurden im JS gesetzt, hatten aber NIE eine
   Regel — Warnungen sahen aus wie neutrale Infos. */
.banner[data-kind="warning"] {
  border-color: color-mix(in srgb, var(--amber) 45%, transparent);
  background: color-mix(in srgb, var(--amber) 10%, var(--surface-soft));
}
.banner[data-kind="success"] {
  border-color: color-mix(in srgb, var(--sage) 45%, transparent);
  background: color-mix(in srgb, var(--sage) 10%, var(--surface-soft));
}

/* Banner-Inhalt (buildBannerRow) — vorher inline in showStatusBanner/
   showCrashBanner (Architekt #2). Werte aus den Inline-Styles übernommen
   (Aktions-Button leicht vereinheitlicht: 7px/15px, rgba .12). */
.banner-row {
  /* Pre.839 (Martins „Buttons stehen so verloren drinnen"): EINE ruhige
     Zeile — Icon | Text | Aktion | X, alles mittig zentriert. Die Aktion
     ist ein normaler .btn (btn--primary btn--sm), das X der app-weite
     .close-btn — hier leben NUR noch die Grid-Plätze (DRY). */
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  column-gap: 10px;
  row-gap: 10px;
}
/* Pre.800: SVG-Icon statt Text-Glyph (iOS renderte ⚠/ℹ als Emoji). */
.banner-icon {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: center;
  opacity: 0.85;
}
.banner-text {
  grid-column: 2;
  grid-row: 1;
  font-weight: 600;
}
.banner-action {
  grid-column: 3;
  grid-row: 1;
}
.banner-close.close-btn {
  grid-column: 4;
  grid-row: 1;
  width: 32px;
  height: 32px;
}
/* Schmale Screens: Aktion als volle, gut tippbare Reihe darunter. */
@media (max-width: 520px) {
  .banner-row {
    grid-template-columns: auto 1fr auto;
  }
  .banner-action {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: stretch;
  }
  .banner-close.close-btn {
    grid-column: 3;
  }
}

@keyframes bannerIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* -------------------------------------------------------------------------
   5. Tabs — pill style
   ------------------------------------------------------------------------- */

.tabs {
  display: flex;
  gap: var(--space-1);
  margin: var(--space-3) var(--space-4) 0;
  padding: 4px;
  background: var(--surface-soft);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar {
  display: none;
}

.tab {
  flex: 1 0 auto;
  background: transparent;
  color: var(--text-dim);
  border: none;
  padding: 10px 18px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  border-radius: 999px;
  white-space: nowrap;
  transition:
    color 220ms var(--ease-soft),
    background 260ms var(--ease-soft),
    transform 120ms var(--ease-soft);
}

.tab:hover {
  color: var(--text-soft);
}

.tab:active {
  transform: scale(0.97);
}

.tab[aria-selected="true"] {
  color: var(--text);
  background: var(--bg-elev);
  box-shadow: var(--shadow-soft);
}

.tab:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--ember) 70%, transparent);
  outline-offset: 2px;
}

/* -------------------------------------------------------------------------
   6. Views
   ------------------------------------------------------------------------- */

.view {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

.view[hidden] {
  display: none;
}

/* -------------------------------------------------------------------------
   7. Chat — Bubbles als Flussteine
   ------------------------------------------------------------------------- */

.chat {
  flex: 1;
  /* Pre.126b: min-height:0 ist KRITISCH bei flex-children mit overflow.
     Ohne das nimmt .chat die intrinsic content height und der scroll
     greift nicht — die letzte Bubble landet hinter dem text-input
     (Live-Bug Martin Screenshot pre.126). */
  min-height: 0;
  /* Pre.340: overflow-x:hidden statt nur overflow-y:auto. Vorher trieb
     entweder ein margin-right oder ein Pseudo-Element scrollWidth über
     clientWidth (#chat 437 vs 390 bei 390px viewport — 47px Phantom-
     Overflow). Horizontaler Scroll war NIE gewollt im Chat — alle
     Bubbles/Cards sollen wrappen statt nebeneinander scrollen.
     min-width:0 ergänzt damit Flex-Children mit langem Content
     (Code-Blöcke, URLs) korrekt schrumpfen statt zu expandieren. */
  overflow-y: auto;
  overflow-x: hidden;
  min-width: 0;
  padding: var(--space-5) var(--space-4) 80px;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  scroll-behavior: smooth;
  scroll-padding-bottom: var(--space-5);
  overflow-anchor: auto;
}
/* Tagestrenner: zentriertes Datums-Pill mit Hairlines, vor der ersten Bubble
   jedes Tages (refreshDayDividers). Trägt KEIN data-ts → von insertOrdered
   ignoriert. */
.chat-daysep {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 6px 0 2px;
}
.chat-daysep::before,
.chat-daysep::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--hairline);
}
.chat-daysep-label {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-soft);
  background: color-mix(in srgb, var(--ember) 8%, transparent);
  border-radius: 999px;
  padding: 3px 12px;
}
/* Pre.343: Original .bubble max-width:78% wieder respektieren.
 * Pre.340 hatte .chat > .bubble {max-width:100%} gesetzt — das war
 * zu aggressiv. Bubbles sollen weiter ~78% des Chats füllen, NICHT
 * volle Breite (das wirkt unsympathisch eng am Rand). overflow-wrap
 * + min-width bleiben für lange URLs/Wörter. */
.chat > .bubble {
  min-width: 0;
  overflow-wrap: anywhere;
}
/* System-Bubbles (Tool-Progress, Errors) dürfen voll wirken. */
.chat > .bubble.system {
  max-width: 92%;
}
.chat > .bubble pre,
.chat > .bubble code {
  max-width: 100%;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Initial-Hydration: keine Smooth-Animation, sonst sieht der User die
   History sichtbar nach unten scrollen (wie WhatsApp/Telegram: sofort
   am Ende). Auch im Auth-Pending: solange Auth noch nicht entschieden
   ist, soll sich nichts visuell bewegen. */
.chat.hydrating,
body.auth-pending .chat {
  scroll-behavior: auto;
}

/* Pre.208: Während Hydrate komplett unsichtbar — wie bei WhatsApp/Telegram.
   User sieht erst dann etwas, wenn der Chat schon am unteren Ende ist.
   Kein "scroll von oben nach unten"-Geschmack mehr beim Reload. */
.chat.hydrating {
  visibility: hidden;
}

/* -------------------------------------------------------------------------
   Text-Input — manuelles Tippen wenn Sprache nicht passt
   ------------------------------------------------------------------------- */

/* iMessage-Style: ein einziges schwebendes Pill mit Plus + Textarea +
   Send. Kein harter Block, kein Border-Top — das Eingabefeld lebt direkt
   auf dem Chat-Hintergrund. */
.text-input {
  display: flex;
  align-items: center;
  gap: 6px;
  /* Pre.108-followup: nur normales Padding — safe-area macht die unterste
     Komponente (status-bar). Sonst dreifach gestapeltes Padding (composer
     + dock + status-bar) = riesiger Leer-Streifen. */
  padding: 8px var(--space-3);
  background: transparent;
  position: relative;
}

/* Pre.148: ::before-Gradient entfernt. Sah auf hellem Hintergrund wie
 * eine harte horizontale Linie aus (Live-Bug Martin pre.147 Screenshot).
 * Padding-bottom am .chat reicht jetzt für die Trennung. */

.text-input[hidden] {
  display: none;
}

/* Das Pill: Container für Textarea + interne Buttons. Eine Form, eine
   Rundung, ein dezenter Schatten. */
.text-input-pill {
  flex: 1;
  display: flex;
  align-items: flex-end;
  /* #135: etwas mehr Luft zwischen den Elementen für ein aufgeräumtes Bild. */
  gap: 6px;
  /* Pre.522: padding +2px für die neue 44px-Textarea-Höhe. */
  padding: 6px 6px 6px 8px;
  background: var(--bg-elev);
  border: 1px solid var(--hairline);
  /* Pre.670: war border-radius:999px → wuchs mehrzeilig zu einer riesigen
     ovalen „Tafel". Moderater Radius = professionelle Eingabe (abgerundetes
     Rechteck wenn hoch, weich gerundet wenn einzeilig), wie übliche Chats.
     Buttons unten ausrichten, damit + / Senden bei mehrzeiligem Text nicht
     mittig schweben. */
  border-radius: var(--radius-l);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
  transition:
    border-color 200ms var(--ease-soft),
    box-shadow 200ms var(--ease-soft);
}

.text-input-pill:focus-within {
  border-color: color-mix(in srgb, var(--ember) 45%, var(--hairline-strong));
  box-shadow: 0 4px 14px color-mix(in srgb, var(--ember) 12%, transparent);
}

.text-input textarea {
  flex: 1;
  /* Pre.522: 32→44 — höher damit Pill optisch zu den runden Dock-Buttons
     passt (User-Wunsch: „wohlproportionierter"). */
  min-height: 44px;
  max-height: 140px;
  resize: none;
  overflow-y: auto;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.4;
  padding: 10px 10px;
  background: transparent;
  color: var(--text);
  border: none;
  outline: none;
}

.text-input textarea::placeholder {
  color: var(--text-dim);
}

.text-input textarea:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Plus-Button: unauffällig, ohne harten Hintergrund — sitzt links im
   Pill, wirkt wie ein Sub-Element. */
.plus-btn {
  flex-shrink: 0;
  /* #135: alle drei Pill-Buttons (Plus/Lautsprecher/Senden) einheitlich
     36x36 — vorher 34/32/32 = unruhig. */
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;
  color: var(--text-dim);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    transform 120ms var(--ease-soft),
    background 200ms var(--ease-soft),
    color 200ms var(--ease-soft);
}

.plus-btn:hover {
  background: color-mix(in srgb, var(--ember) 12%, transparent);
  color: var(--ember);
}

.plus-btn:active {
  transform: scale(0.92);
}

/* Pre.147: Footer-Lautsprecher-Toggle im Text-Input-Pill. Sage-grün wenn
 * aktiv, grau wenn aus. Doppelt zum Drawer-Auto-Vorlesen-Button damit der
 * User es ohne Hamburger-Menü findet (Live-Bug Martin: "Wo kann man
 * einstellen, dass er auto vorlesen soll?"). */
.footer-tts-toggle {
  flex-shrink: 0;
  width: 36px; /* #135: einheitlich mit Plus/Senden */
  height: 36px;
  border-radius: 50%;
  background: transparent;
  color: var(--text-dim);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    background 200ms var(--ease-soft),
    color 200ms var(--ease-soft);
}

.footer-tts-toggle:hover {
  background: color-mix(in srgb, var(--sage) 14%, transparent);
}

.footer-tts-toggle[data-active="true"] {
  background: color-mix(in srgb, var(--sage) 22%, transparent);
  color: color-mix(in srgb, var(--sage) 95%, var(--text));
}

/* Pre.459: Composer-Mic — ChatGPT-Web-Stil im Eingabe-Pill. */
.composer-mic {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: transparent;
  color: var(--text-dim);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    background 200ms var(--ease-soft),
    color 200ms var(--ease-soft);
  position: relative;
}
.composer-mic:hover {
  background: color-mix(in srgb, var(--ember) 14%, transparent);
  color: var(--ember);
}
.composer-mic .composer-mic-icon-stop {
  display: none;
}
.composer-mic[data-state="recording"] {
  background: color-mix(in srgb, var(--ember) 22%, transparent);
  color: var(--ember);
  animation: composer-mic-pulse 1.4s ease-in-out infinite;
}
.composer-mic[data-state="recording"] .composer-mic-icon-idle {
  display: none;
}
.composer-mic[data-state="recording"] .composer-mic-icon-stop {
  display: block;
}
.composer-mic[data-state="sending"] {
  opacity: 0.55;
  cursor: progress;
}
@keyframes composer-mic-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--ember) 35%, transparent);
  }
  50% {
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--ember) 0%, transparent);
  }
}

/* Send-Button: kompakter ember Kreis im Pill; verschwindet sanft wenn
   disabled (kein voller Opacity-Sprung). */
.text-input-send {
  flex-shrink: 0;
  width: 36px; /* #135: einheitlich mit Plus/Lautsprecher */
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--ember-soft) 0%, var(--ember) 100%);
  color: var(--on-color);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    transform 120ms var(--ease-soft),
    filter 200ms var(--ease-soft),
    opacity 220ms var(--ease-soft),
    background 220ms var(--ease-soft);
}

.text-input-send:hover:not(:disabled) {
  filter: brightness(1.06);
}

.text-input-send:active:not(:disabled) {
  transform: scale(0.92);
}

.text-input-send:disabled {
  background: var(--bg-elev-2);
  color: var(--text-dim);
  opacity: 0.55;
  cursor: not-allowed;
}

#view-chat {
  display: flex;
  flex-direction: column;
}

/* Eingangs-Welcome wenn leer — leichte Vignette */
.chat:empty::before {
  content: "still hier · sprich, wenn du magst";
  align-self: center;
  margin: auto 0;
  padding: var(--space-4) var(--space-5);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 17px;
  color: var(--text-mute);
  letter-spacing: 0.01em;
  text-align: center;
  max-width: 28ch;
}

.bubble {
  /* Pre.512 Editorial-Bubble. Straffere 18px-Radii mit 6px Sprech-Eck
     (in den .bubble.user/.bot Regeln). Padding ruhiger, font-weight 300
     für editorialen Touch — bleibt auf Retina klar lesbar. */
  max-width: 80%;
  padding: 12px 16px;
  font-size: 13.5px;
  line-height: 1.55;
  font-weight: 300;
  word-wrap: break-word;
  animation: bubbleIn 360ms var(--ease-soft) both;
  letter-spacing: 0.005em;
  --wave-level: 0;
}

/* --- Visualizer: Wave-Bars solange Bubble noch ohne Text ist --------- */

.bubble.is-recording {
  min-height: 44px;
  padding: 14px 22px;
}

.bubble-wave {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 22px;
}

.bubble.user.is-recording {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--plum) 70%, var(--bg-elev)),
    color-mix(in srgb, var(--plum) 50%, var(--bg-elev))
  );
}

/* Pre.461: Truth-Warn-Badge an Bot-Bubble. Klein, unaufdringlich, aber
 * sichtbar. Hover/Tap zeigt im title-Tooltip welche Phrase erkannt wurde. */
.bubble-truth-warn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: help;
}
.bubble-truth-warn.truth-warn {
  background: color-mix(in srgb, var(--error) 14%, transparent);
  color: var(--error);
  border: 1px solid color-mix(in srgb, var(--error) 32%, transparent);
}
.bubble-truth-warn.truth-info {
  background: color-mix(in srgb, var(--amber) 14%, transparent);
  color: var(--amber);
  border: 1px solid color-mix(in srgb, var(--amber) 32%, transparent);
}

.bubble.bot.is-recording {
  background: color-mix(in srgb, var(--ember) 8%, var(--bot-bg));
  border-color: color-mix(in srgb, var(--ember) 35%, transparent);
}

@keyframes waveIdle {
  0%,
  100% {
    transform: scaleY(1);
    opacity: 0.45;
  }
  50% {
    transform: scaleY(1.35);
    opacity: 0.85;
  }
}

@media (prefers-reduced-motion: reduce) {
}

.bubble.user {
  align-self: flex-end;
  background: var(--bubble-user, var(--user-bg));
  color: var(--bubble-user-text, var(--user-text));
  border-radius: var(--radius-bubble, 18px);
  border-bottom-right-radius: var(--radius-bubble-corner, 6px);
  box-shadow: var(--shadow-soft);
}

.bubble.bot {
  align-self: flex-start;
  background: var(--bubble-bot, var(--bot-bg));
  color: var(--bot-text);
  border: 1px solid var(--bubble-bot-border, var(--hairline));
  border-radius: var(--radius-bubble, 18px);
  border-bottom-left-radius: var(--radius-bubble-corner, 6px);
  position: relative;
}

/* Pre.513: Speaker-Label per default versteckt (Bubble-Mode).
   Im Transcript-Mode sichtbar als Kapitälchen-Header. */
.bubble-speaker {
  display: none;
}

#chat[data-chat-style="transcript"] {
  gap: var(--space-5, 22px);
  padding: 22px 26px 100px;
}

#chat[data-chat-style="transcript"] .bubble {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  max-width: 100% !important;
  align-self: stretch !important;
  font-weight: 300;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--ink, var(--text));
  box-shadow: none !important;
  backdrop-filter: none !important;
}

#chat[data-chat-style="transcript"] .bubble-speaker {
  display: block;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim, var(--text-dim));
  margin-bottom: 7px;
  font-family: var(--font-body);
  font-weight: 500;
}

/* Dezente Trenn-Linie alle ~5 Blöcke — Editorial-Rhythmus. */
#chat[data-chat-style="transcript"] .bubble:nth-of-type(5n)::after {
  content: "";
  display: block;
  height: 1px;
  background: var(--hairline);
  width: 50px;
  margin: 16px auto 0;
}
/* Pre.771: Transcript-Politur — Avatar raus (Clutter), Bot-Zeilen linksbündig
   ohne Avatar-Versatz, Sprecher klar unterscheidbar (DU in Akzent, Bot dezent). */
#chat[data-chat-style="transcript"] .bubble-avatar {
  display: none !important;
}
#chat[data-chat-style="transcript"] .bubble.bot {
  margin-left: 0 !important;
}
#chat[data-chat-style="transcript"] .bubble.user .bubble-speaker {
  color: var(--accent, var(--sage));
}
#chat[data-chat-style="transcript"] .bubble.bot .bubble-speaker {
  color: var(--ink-dim, var(--text-dim));
}

/* Pre.156: Avatar links neben jeder Bot-Bubble. Außerhalb der Bubble
 * positioniert (negative left), damit der Bubble-Inhalt nicht weniger
 * Platz hat. Größe = Bubble-Topkante. */
.bubble.bot.has-avatar {
  margin-left: 44px;
}

.bubble.bot .bubble-avatar {
  position: absolute;
  left: -44px;
  top: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg-elev-2);
  border: 1px solid color-mix(in srgb, var(--ember) 25%, var(--hairline));
  display: block;
}

@media (max-width: 480px) {
  .bubble.bot.has-avatar {
    margin-left: 38px;
  }
  .bubble.bot .bubble-avatar {
    left: -38px;
    width: 30px;
    height: 30px;
  }
}

.bubble.bot::before {
  /* sanfte Innenkante als Lichtreflex */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--ember) 8%, transparent),
    transparent 40%
  );
  pointer-events: none;
}

.bubble.system {
  align-self: center;
  font-family: var(--font-display);
  /* Pre.968: lesbarer — Task-Fertig-Meldungen (Ergebnis-Text) gingen in der
     12,5px-Italic-Mute unter. Jetzt etwas größer + kräftigere Farbe. */
  font-size: 13.5px;
  font-style: italic;
  color: var(--text-dim);
  background: transparent;
  padding: 4px 12px;
  letter-spacing: 0.04em;
  position: relative;
  max-width: 90%;
  text-align: center;
}

.bubble.system::before,
.bubble.system::after {
  content: "·";
  margin: 0 8px;
  color: color-mix(in srgb, var(--ember) 50%, transparent);
}

/* Pre.227: Error-System-Bubbles deutlich sichtbar machen.
   Bisher gingen "Fehler: ..." in der grauen Italic unter — User sah nicht
   warum der Bot stumm wurde. Jetzt rot umrandet, Background warm,
   Warnsymbol davor. */
.bubble.system.is-error {
  font-style: normal;
  font-weight: 500;
  color: var(--error);
  background: color-mix(in srgb, var(--error) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--error) 35%, transparent);
  border-radius: 12px;
  padding: 8px 16px;
  max-width: 85%;
}
.bubble.system.is-error::before {
  content: "Fehler";
  display: inline-block;
  color: white;
  background: var(--error);
  margin-right: 10px;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.bubble.system.is-error::after {
  content: "";
  margin: 0;
}

/* pre.851: Selbstverbesserungs-Ergebnis als LESBARE Karte (links, normale
   Schrift/Farbe, Markdown-Körper) statt blasser zentrierter Mini-Zeile. */
.bubble.system.is-notice {
  align-self: stretch;
  max-width: 100%;
  text-align: left;
  font-family: var(--font-body);
  font-style: normal;
  font-size: 14px;
  letter-spacing: 0;
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 7%, var(--bg-elev));
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--hairline));
  border-radius: var(--radius-m);
  padding: 12px 14px;
}
.bubble.system.is-notice::before,
.bubble.system.is-notice::after {
  content: none;
  margin: 0;
}
.bubble-notice-head {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--accent);
  margin-bottom: 6px;
}
.bubble.system.is-notice .bubble-content {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text);
}
.bubble.system.is-notice .bubble-content p {
  margin: 0 0 6px;
}
.bubble.system.is-notice .bubble-content code {
  font-size: 12px;
  word-break: break-word;
}
.bubble.system.is-notice .bubble-content hr {
  border: none;
  border-top: 1px solid var(--hairline);
  margin: 8px 0;
}

@keyframes bubbleIn {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* -------------------------------------------------------------------------
   8. Tool-Cards (Tag 17, im Chat-Stream)
   ------------------------------------------------------------------------- */

.tool-card {
  align-self: stretch;
  max-width: 92%;
  background: var(--bg-elev);
  border-radius: var(--radius-l);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  border: 1px solid var(--hairline-strong);
  box-shadow: var(--shadow-card);
  position: relative;
  /* overflow: visible — Memory-Listen mit vielen Treffern dürfen sich
     in voller Höhe ausbreiten. Die Top-Akzent-Linie (::before) wird
     mit border-radius/clip-path nicht abgeschnitten weil sie selbst
     border-radius geerbt bekommt. */
  overflow: visible;
  animation: bubbleIn 380ms var(--ease-soft) both;
}

.tool-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--ember) 60%, transparent),
    color-mix(in srgb, var(--amber) 50%, transparent),
    transparent
  );
  opacity: 0.7;
  border-top-left-radius: var(--radius-l);
  border-top-right-radius: var(--radius-l);
}

.tool-card-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Optionales Karten-Icon vor dem Tool-Badge (Mail-Cards u.a.). Ember-Akzent
   passend zum Badge, damit Kopfzeile als Einheit liest. */
.tool-card-head-icon {
  flex: 0 0 auto;
  color: var(--ember);
  opacity: 0.9;
}

.tool-card-tool {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ember);
  padding: 3px 9px;
  background: color-mix(in srgb, var(--ember) 12%, transparent);
  border-radius: 6px;
}

.tool-kv {
  display: flex;
  gap: var(--space-3);
  font-size: 13.5px;
  align-items: baseline;
  padding: 3px 0;
}

.tool-kv-key {
  color: var(--text-dim);
  min-width: 84px;
  font-size: 12px;
  /* #133: KEIN erzwungenes lowercase mehr — deutsche Labels („An", „Betreff",
     „Kunde") sahen kleingeschrieben unschön aus (Martins Mail-Card-Beschwerde).
     Die Labels kommen aus dem Code bereits sauber kapitalisiert. */
  letter-spacing: 0.04em;
  font-weight: 500;
}

.tool-kv-val {
  color: var(--text);
  word-break: break-word;
  font-weight: 450;
}

.tool-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-2);
  flex-wrap: wrap;
}

/* Pre.527: Receipt-Analyze-Card — Vendor + Betrag prominent,
   Konto-Vorschläge als klickbare Buttons mit Confidence-Bar.
   Pre.530: + Thumbnail ganz oben. */
.tool-card.receipt {
  padding: var(--space-4);
}
.receipt-card-thumb {
  display: block;
  margin: 0 0 var(--space-3);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--hairline);
  background: var(--paper-soft, var(--bg-elev));
  text-decoration: none;
  max-height: 220px;
}
.receipt-card-thumb img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 220px;
  object-fit: contain;
}
.receipt-card-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--hairline);
  margin-bottom: var(--space-3);
}
.receipt-card-vendor {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink, var(--text));
}
.receipt-card-meta {
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-dim, var(--text-dim));
}
.receipt-card-amount {
  font-size: 22px;
  font-weight: 700;
  font-feature-settings: "tnum";
  color: var(--ink, var(--text));
  margin-top: 4px;
}
.receipt-card-tax {
  font-size: 12px;
  color: var(--ink-soft, var(--text-soft));
  font-feature-settings: "tnum";
}

/* Pre.538: Kompakte „Verbucht"-Card (deterministischer Foto→Konto→Fertig). */
.receipt-booked-thumb {
  max-height: 140px;
}
.receipt-booked-thumb img {
  max-height: 140px;
}
.receipt-booked-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.receipt-booked-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  align-self: flex-start;
  padding: 3px 10px 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  background: var(--ok, #3a7d44);
  margin-bottom: 2px;
}
.receipt-booked-account {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft, var(--text-soft));
  font-feature-settings: "tnum";
}

/* Pre.541: Amazon-Treffer-Karte mit echten klickbaren Produkt-Links. */
.amazon-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: var(--space-2);
}
.amazon-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid var(--hairline);
  background: var(--bg-elev-2);
  text-decoration: none;
  color: var(--text);
  transition: border-color 160ms var(--ease-soft);
}
.amazon-item:hover {
  border-color: color-mix(in srgb, var(--ember) 35%, var(--hairline-strong));
}
.amazon-item-title {
  flex: 1;
  font-size: 13px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.amazon-item-open {
  flex: none;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #fff;
  background: var(--ember);
  padding: 4px 10px;
  border-radius: 999px;
}
.amazon-search-all {
  display: inline-block;
  margin-top: var(--space-2);
  font-size: 12px;
  color: var(--text-soft);
}
.amazon-empty {
  font-size: 13px;
  color: var(--text-soft);
}

/* Pre.538: Transiente Bestätigungskarte (Foto→Konto→[Buchen]). */
.tool-receipt-confirm .receipt-booked-head {
  margin-top: var(--space-2);
}
.qbc-status {
  font-size: 12.5px;
  color: var(--ink-soft, var(--text-soft));
  min-height: 1px;
}
.qbc-status:empty {
  display: none;
}
.qbc-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.qbc-actions .icm-btn {
  flex: 1;
}
.receipt-card-suggestions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.receipt-card-sug-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-dim, var(--text-dim));
  margin-bottom: 4px;
}
.receipt-card-sug-btn {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid var(--hairline-strong);
  background: var(--paper-soft, var(--bg-elev));
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  transition:
    border-color 0.15s var(--ease-soft),
    background 0.15s var(--ease-soft),
    transform 0.1s var(--ease-soft);
}
.receipt-card-sug-btn:hover {
  border-color: var(--accent, var(--ember));
  background: color-mix(in srgb, var(--accent) 6%, var(--paper-soft));
}
.receipt-card-sug-btn:active {
  transform: scale(0.99);
}
.receipt-card-sug-btn:disabled {
  cursor: default;
  opacity: 0.55;
}
.receipt-card-sug-btn.is-chosen {
  opacity: 1;
  border-color: var(--accent, var(--ember));
  background: color-mix(in srgb, var(--accent) 14%, var(--paper-soft));
}
.receipt-card-sug-top {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.receipt-card-sug-num {
  font-feature-settings: "tnum";
  font-weight: 700;
  color: var(--ink, var(--text));
  font-size: 13px;
}
.receipt-card-sug-name {
  flex: 1;
  color: var(--ink, var(--text));
  font-size: 14px;
}
.receipt-card-sug-conf {
  font-feature-settings: "tnum";
  font-size: 11px;
  color: var(--ink-soft, var(--text-soft));
  font-weight: 600;
}
.receipt-card-sug-bar {
  height: 3px;
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  border-radius: 999px;
  overflow: hidden;
}
.receipt-card-sug-bar-fill {
  height: 100%;
  background: var(--accent, var(--ember));
  border-radius: 999px;
  transition: width 0.3s var(--ease-soft);
}
.receipt-card-sug-reason {
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-soft, var(--text-soft));
}
.receipt-card-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.receipt-card-action-btn {
  flex: 1;
  padding: 8px 12px;
  font-size: 12px;
  font-family: var(--font-body);
  border: 1px solid var(--hairline-strong);
  background: transparent;
  color: var(--ink-soft, var(--text-soft));
  border-radius: 10px;
  cursor: pointer;
  transition:
    border-color 0.15s var(--ease-soft),
    color 0.15s var(--ease-soft);
}
.receipt-card-action-btn:hover {
  border-color: var(--accent, var(--ember));
  color: var(--ink, var(--text));
}

/* Pre.528: "Anderes Konto"-Dropdown — Wrapper + native select.
   Wrap nimmt 50% der Action-Reihe (genau wie der Skip-Button rechts).
   Select wird inline gerendert, klappt sich erst beim Klick auf. */
.receipt-card-other-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.receipt-card-other-select {
  width: 100%;
  padding: 8px 10px;
  font-size: 13px;
  font-family: var(--font-body);
  color: var(--ink, var(--text));
  background: var(--paper-soft, var(--bg-elev));
  border: 1px solid var(--hairline-strong);
  border-radius: 10px;
  cursor: pointer;
  /* Native arrow auf iOS/Android übernehmen */
  appearance: auto;
  -webkit-appearance: auto;
}
.receipt-card-other-select:focus {
  outline: none;
  border-color: var(--accent, var(--ember));
}
.receipt-card-other-select:disabled {
  opacity: 0.55;
  cursor: default;
}
.receipt-card-other-select optgroup {
  font-weight: 600;
  color: var(--ink-soft, var(--text-soft));
}
.receipt-card-warnings {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--hairline);
}
.receipt-card-warn-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--warn, var(--amber));
  margin-bottom: 6px;
}
.receipt-card-warn-item {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--ink-soft, var(--text-soft));
  padding-left: 12px;
  position: relative;
}
.receipt-card-warn-item::before {
  content: "·";
  position: absolute;
  left: 4px;
  color: var(--ink-dim);
}
.receipt-card-warn-item + .receipt-card-warn-item {
  margin-top: 3px;
}

/* Pre.150: Kompakter Card-Stil für Action-Confirmations (project_create,
 * project_set_active, etc.) — kleiner als die normale Tool-Card, eine
 * Zeile mit Punkt + Text, kein Badge-Header, kein Top-Akzent. */
.tool-card.compact {
  align-self: flex-start;
  max-width: max-content;
  padding: var(--space-2) var(--space-3);
  border-radius: 14px;
  gap: 0;
  box-shadow: none;
  border: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--bg-elev) 96%, var(--ember));
}

.tool-card.compact::before {
  display: none;
}

.tool-card-inline {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: var(--text);
  line-height: 1.35;
}

.tool-card-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ember);
  flex-shrink: 0;
}

.tool-card-text {
  word-break: break-word;
}

.tool-action-btn {
  display: inline-block;
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--text);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid var(--hairline-strong);
  transition:
    background 200ms var(--ease-soft),
    border-color 200ms var(--ease-soft),
    transform 100ms var(--ease-soft);
}

.tool-action-btn:hover {
  background: var(--bg-elev-2);
  border-color: color-mix(in srgb, var(--ember) 40%, transparent);
}

.tool-action-btn:active {
  transform: scale(0.97);
}

.tool-action-btn.primary {
  background: var(--ember);
  color: var(--on-color);
  border-color: var(--ember);
}

.tool-action-btn.primary:hover {
  background: var(--ember-soft);
}

/* weather */
.tool-weather-now {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}

.tool-weather-temp {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 400;
  color: var(--ember);
  letter-spacing: -0.02em;
  line-height: 1;
}

.tool-weather-desc {
  color: var(--text-soft);
  font-size: 14px;
  font-style: italic;
  font-family: var(--font-display);
}

.tool-weather-forecast {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 13px;
  color: var(--text);
}

.tool-weather-forecast li {
  padding: 8px 0;
  border-top: 1px solid var(--hairline);
  display: flex;
  justify-content: space-between;
  font-variant-numeric: tabular-nums;
}

/* iOS-Display-Wachhalter-Video (Pre.835) — unsichtbar, 1px. */
.nosleep-video {
  position: fixed;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Sicherungs-Aufnahme-Indikator (Pre.825) — kleiner roter Punkt im Header. */
.guard-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rose);
  margin-left: 6px;
  animation: dotBreathe 2s ease-in-out infinite;
}
/* Ticket #182: amber + schnelleres Pulsen = aufgenommen, aber noch nicht vom
   Server bestätigt — ehrliche Sicht-Rückmeldung statt trügerisch grün. */
.guard-dot[data-state="pending"] {
  background: var(--warn);
  animation-duration: 1s;
}

/* Task-Archiv-Filter (Pre.815) — Status-Chips über der Task-Liste. */
.task-filter-chips {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}
.task-filter-chip {
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--hairline-strong);
  background: var(--bg-elev-2);
  color: var(--text-soft);
  cursor: pointer;
}
.task-filter-chip[data-active="true"] {
  border-color: var(--accent);
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--bg-elev-2));
}
/* Pipeline-Abschnitte (#185) — „Läuft jetzt" vs. „Archiv" in der Task-View.
   Reiner Sicht-Trenner; nutzt bestehende Tokens, keine Inline-Styles. */
.task-section-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin: var(--space-3) 0 var(--space-1);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--hairline);
}
.task-section-head:first-child {
  margin-top: 0;
}
.task-section-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.task-section-note {
  font-size: 11px;
  font-style: italic;
  color: var(--text-dim);
}

/* human_design-Card (Ticket #78/#79, Pre.805) — Deutung strukturiert. */
.tool-hd-interp {
  max-height: 320px;
  overflow-y: auto;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
  padding-right: 4px;
}
.tool-hd-interp h1,
.tool-hd-interp h2,
.tool-hd-interp h3 {
  font-size: 14px;
  margin: var(--space-3) 0 var(--space-1);
  color: var(--accent);
}
.tool-hd-meta,
.hd-generated {
  font-size: 12px;
  color: var(--text-dim);
}
.hd-generated {
  margin: 0 0 var(--space-2);
}

/* current_time-Karte (Pre.833, #111) — eine ruhige Zeile. */
.tool-time-line {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* ticket_create-Card (Ticket #68, Pre.793) — Badges reusen .tickets-badge */
.tool-ticket-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
}
.tool-ticket-badges {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* route (Ticket #60, Pre.790) — Kopf mit Karten-Pin, Distanz gross
   (Wetter-Muster), Modus-Pill; Button nutzt das bestehende
   .tool-actions/.tool-action-btn-Muster (null neues Button-CSS). */
.tool-route-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.tool-route-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ember) 18%, var(--bg-elev));
  color: var(--ember);
  display: flex;
  align-items: center;
  justify-content: center;
}
.tool-route-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tool-route-dest {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.tool-route-from {
  font-size: 12px;
  color: var(--text-dim);
}
.tool-route-stats {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.tool-route-km {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 400;
  color: var(--ember);
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.tool-route-dur {
  font-size: 14px;
  color: var(--text-soft);
  font-variant-numeric: tabular-nums;
}
.tool-route-mode {
  align-self: center;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  color: var(--ember);
  background: color-mix(in srgb, var(--ember) 12%, transparent);
}

/* timer */
.tool-timer-display {
  font-family: var(--font-display);
  font-size: 52px;
  font-weight: 400;
  color: var(--ember);
  font-variant-numeric: tabular-nums;
  text-align: center;
  padding: var(--space-3) 0;
  letter-spacing: -0.02em;
}

.tool-timer-done .tool-timer-display {
  color: var(--amber);
  animation: thinking 0.7s ease-in-out 4;
}

/* search */
.tool-search-results {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.tool-search-results li {
  padding: 10px 0;
  border-top: 1px solid var(--hairline);
}
.tool-search-results li:first-child {
  border-top: none;
  padding-top: 0;
}

.tool-search-title {
  color: var(--ember);
  text-decoration: none;
  font-weight: 500;
  display: block;
  margin-bottom: 4px;
  font-size: 14px;
  transition: color 160ms var(--ease-soft);
}
.tool-search-title:hover {
  color: var(--ember-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.tool-search-snippet {
  font-size: 12.5px;
  color: var(--text-dim);
  line-height: 1.5;
}

/* analyze_video — eigene Karte (Thumbnail-Kopf + Summary + Themen-Chips +
   Kernpunkte + Zitate). Nur Design-Tokens, Chips reusen .tickets-badge. */
.tool-video-head {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}
.tool-video-thumb {
  flex-shrink: 0;
  width: 160px;
  height: auto;
  border-radius: var(--radius-s);
  border: 1px solid var(--hairline);
  background: var(--paper-soft, var(--bg-elev));
  object-fit: cover;
}
.tool-video-headtext {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.tool-video-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ember);
  text-decoration: none;
}
a.tool-video-title:hover {
  color: var(--ember-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.tool-video-meta {
  font-size: 12px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.tool-video-summary {
  margin: var(--space-3) 0 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text);
}
.tool-video-points {
  margin: var(--space-2) 0 0;
  padding-left: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
}
.tool-video-quote {
  margin: var(--space-2) 0 0;
  padding: var(--space-2) var(--space-3);
  border-left: 3px solid var(--hairline-strong);
  background: var(--surface-soft);
  border-radius: var(--radius-s);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.tool-video-quote-cite {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.tool-video-quote-text {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
}
.tool-video-saved {
  margin-top: var(--space-2);
  font-size: 12px;
  color: var(--text-dim);
}

/* generated/edited image preview inside tool-card (pre.170) */
.tool-image-wrap {
  margin: 8px 0;
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface-2, rgba(255, 255, 255, 0.04));
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-height: 360px;
}
/* Bild-GALERIE (mehrere Bilder): bewusster Block-Override der geteilten
   .tool-image-wrap (sonst landet „Weitere Bilder" neben dem Grid). Modifier
   steht NACH der Basis → display:block gewinnt. Rest der Galerie + Kachel
   vorher inline (Architekt #2); Werte byte-äquivalent (var-mit-Fallback).
   Hover-Transform der Kachel bleibt dynamisch inline. */
.tool-image-wrap--grid {
  display: block;
  width: 100%;
}
.tool-image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}
.tool-image-more-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}
.tool-image-grid-item {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0;
  border: 1px solid var(--c-border, rgba(0, 0, 0, 0.08));
  border-radius: 10px;
  overflow: hidden;
  background: var(--c-surface, #fff);
  cursor: zoom-in;
  transition:
    transform 120ms ease,
    box-shadow 120ms ease;
  text-align: left;
}
/* Pre.805 (#78): Hover in CSS statt JS-Inline-Styles. */
.tool-image-grid-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
}
/* sourceLink-Hover (Lightbox-Fuss) — ersetzt JS mouseenter/leave. */
.tool-image-lightbox-source:hover {
  background: rgba(255, 255, 255, 0.3);
}
.tool-image-box {
  aspect-ratio: 1 / 1;
  background: var(--c-surface-2, #f4f4f5);
  overflow: hidden;
  position: relative;
}
.tool-image-el {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.tool-image-footer {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  font-size: 0.72em;
  color: var(--c-text-muted, rgba(0, 0, 0, 0.55));
  border-top: 1px solid var(--c-border, rgba(0, 0, 0, 0.06));
  background: var(--c-surface, #fff);
  min-width: 0;
}
.tool-image-footer-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 auto;
  min-width: 0;
}

.tool-image {
  width: 100%;
  max-width: 480px;
  height: auto;
  max-height: 360px;
  object-fit: contain;
  display: block;
  cursor: zoom-in;
  margin: auto;
}

/* memory results inside tool-card */
.tool-memory-results {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tool-memory-results li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: 13.5px;
  padding: 8px 0;
  border-top: 1px solid var(--hairline);
}
.tool-memory-results li:first-child {
  border-top: none;
}

.tool-memory-score {
  color: var(--sage);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  min-width: 44px;
  font-size: 12px;
  font-family: var(--font-mono);
}

.tool-memory-content {
  color: var(--text);
}

/* error */
.tool-error {
  border-color: color-mix(in srgb, var(--error) 50%, transparent);
}
.tool-error::before {
  background: linear-gradient(90deg, transparent, var(--error), transparent);
  opacity: 0.8;
}
.tool-error .tool-card-tool {
  color: var(--error);
  background: color-mix(in srgb, var(--error) 14%, transparent);
}

/* Pre.168.4: shell_exec Card — Terminal-Look mit mono Befehl, Status-
 * Pill (grün/rot) und scrollbarem stdout. Stderr in rosé. */
.tool-card.tool-shell-exec {
  background: #0e1116;
  border-color: #1f2530;
  color: #d8e0e8;
}
.tool-card.tool-shell-exec::before {
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--ember) 70%, transparent),
    transparent
  );
}
.shell-exec-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.shell-exec-badge {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: color-mix(in srgb, var(--ember) 90%, #fff);
  padding: 3px 8px;
  background: color-mix(in srgb, var(--ember) 18%, transparent);
  border-radius: 5px;
}
.shell-exec-cmd {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: #b9c4d0;
  background: rgba(255, 255, 255, 0.04);
  padding: 3px 8px;
  border-radius: 5px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  white-space: nowrap;
}
.shell-exec-status {
  font-family: var(--font-mono);
  font-size: 10.5px;
  padding: 3px 8px;
  border-radius: 5px;
  white-space: nowrap;
}
.shell-exec-status[data-ok="true"] {
  color: #b8e6c1;
  background: rgba(91, 138, 114, 0.22);
}
.shell-exec-status[data-ok="false"] {
  color: #f0b3b3;
  background: rgba(217, 122, 130, 0.22);
}
.shell-exec-stdout,
.shell-exec-stderr {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.45;
  background: #06080a;
  border: 1px solid #161b21;
  border-radius: 6px;
  padding: 10px 12px;
  margin: 0;
  max-height: 320px;
  overflow: auto;
  white-space: pre;
  color: #e8ecf1;
}
.shell-exec-stderr {
  color: #f0b3b3;
  background: rgba(217, 122, 130, 0.06);
  border-color: rgba(217, 122, 130, 0.25);
}

.tool-card-body {
  font-size: 13.5px;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.55;
}
/* Varianten des Tool-Card-Bodys — vorher inline (Architekt #2). Werte
   byte-äquivalent; Modifier stehen NACH .tool-card-body → überschreiben
   font-size/line-height korrekt. */
.tool-card-body--warn {
  color: var(--warn);
  font-size: 13px;
}
.tool-card-body--result {
  font-size: 14px;
  white-space: pre-wrap;
  line-height: 1.5;
  max-height: 240px;
  overflow-y: auto;
  padding: 10px 12px;
  background: var(--surface-soft);
  border-radius: 8px;
}
.tool-card-body--hint {
  font-style: italic;
  font-size: 13px;
}
/* Key-Value-Liste + Rohdaten-Summary — vorher inline (Architekt #2). */
.tool-kv-list {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
}
.tool-kv-list dt {
  font-weight: 600;
  opacity: 0.7;
}
.tool-kv-list dd {
  margin: 0;
}
.tool-card-raw-details > summary {
  cursor: pointer;
  opacity: 0.6;
  font-size: 0.85em;
}
/* Icon+Label-Variante des Tool-Links (vorher inline-flex inline). */
.tool-list-link--icon {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.tool-card-raw {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-mute);
  margin: 0;
  /* Pre.786: vorher inline im JS gesetzt (Architekt: Styles ins CSS) */
  max-height: 300px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--bg-deep);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-s);
  border: 1px solid var(--hairline);
  max-height: 240px;
  overflow-y: auto;
}

/* Pretty Tool-Cards für Drive/Gmail/Calendar/PDF/Project (pre.100) */
.tool-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Pre.969: kompakter Anruf-Knopf am Kontakt-Treffer (nicht volle Breite). */
.contact-call-btn {
  align-self: flex-start;
  margin-top: 4px;
}
.tool-list-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  background: var(--bg-deep);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-s);
  font-size: 13px;
  line-height: 1.4;
}

.tool-list-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  min-width: 0;
}

.tool-list-primary {
  font-weight: 500;
  color: var(--text);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tool-list-secondary {
  font-size: 12px;
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.tool-list-meta {
  font-size: 11px;
  color: var(--text-mute);
  font-family: var(--font-mono);
  flex-shrink: 0;
  white-space: nowrap;
}

.tool-list-link {
  align-self: flex-start;
  font-size: 11px;
  color: var(--ember);
  text-decoration: none;
  margin-top: 4px;
}

.tool-list-link:hover {
  text-decoration: underline;
}

.tool-empty-hint {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--text-dim);
  font-style: italic;
}

/* Pre.786 (#52): Markdown-Tabellen (.md-table vom Renderer gesetzt) —
 * selbsttragende Klassen, funktionieren in JEDER Ansicht (Chat, Mein
 * Leben, Essenz, HD, Changelog). Mobile: Wrapper scrollt horizontal
 * (gleiches Muster wie pre/code in Bubbles); nowrap NUR auf th, Zellen
 * brechen normal um — sonst wird eine 45-Gesetze-Tabelle kilometerbreit. */
.md-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: var(--space-2) 0;
}
.md-table {
  border-collapse: collapse;
  font-size: 13px;
}
.md-table th,
.md-table td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--hairline);
  text-align: left;
  vertical-align: top;
}
.md-table th {
  color: var(--text-dim);
  font-weight: 600;
  border-bottom-color: var(--hairline-strong);
  white-space: nowrap;
}
.md-table td {
  max-width: 42ch;
}
.md-table tbody tr:nth-child(even) td {
  background: color-mix(in srgb, var(--text) 4%, transparent);
}

/* Pre.101: Markdown-Rendering im Bot-Bubble + Play-Button für TTS-Vorlesen */
.bubble.bot {
  position: relative;
}
.bubble.bot .bubble-content > p {
  margin: 0 0 6px;
}
.bubble.bot .bubble-content > p:last-child {
  margin-bottom: 0;
}
.bubble.bot .bubble-content strong {
  font-weight: 600;
  color: inherit;
}
.bubble.bot .bubble-content em {
  font-style: italic;
}
.bubble.bot .bubble-content code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: color-mix(in srgb, var(--ember) 10%, transparent);
  padding: 1px 5px;
  border-radius: 4px;
}
.bubble.bot .bubble-content ul,
.bubble.bot .bubble-content ol {
  margin: 4px 0 6px;
  padding-left: 22px;
}
.bubble.bot .bubble-content li {
  margin-bottom: 2px;
}
.bubble.bot .bubble-content a {
  color: var(--ember);
  text-decoration: underline;
}
.bubble.bot .bubble-content a:hover {
  text-decoration: none;
}

/* Pre.786: .update-banner-Block entfernt — Update-Notiz läuft jetzt über den
   EINEN Banner-Weg (showStatusBanner owner=update). */

}

/* Pre.152: Teilen-Button für Medien-Bubbles. Sitzt unten LINKS damit
 * er nicht mit dem Play-Button (unten rechts) kollidiert. */
.bubble-share {
  position: absolute;
  bottom: 6px;
  left: 6px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--bg-elev) 80%, transparent);
  color: var(--text-dim);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition:
    opacity 200ms var(--ease-soft),
    color 200ms var(--ease-soft),
    border-color 200ms var(--ease-soft);
}

.bubble.image:hover .bubble-share,
.bubble.url-card:hover .bubble-share,
.bubble.has-audio:hover .bubble-share,
.bubble-share:focus-visible {
  opacity: 1;
}

.bubble-share:hover {
  color: var(--sage);
  border-color: var(--sage);
}

/* Bei Image-Bubbles (großes Bild) Button mit klarem Background damit er
 * über dem Bild lesbar bleibt. */
.bubble.image .bubble-share {
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.3);
  opacity: 0.85;
}

.bubble.image .bubble-share:hover {
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  border-color: var(--sage);
}

/* Share-Fallback-Sheet (Modal) */
.share-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Pre.794: 1000 -> 1700 — lag UNTER der Lightbox (1600): Teilen aus der
     Lightbox zeigte das Sheet, aber Klicks (Abbrechen!) trafen die
     Lightbox-Ebene -> "laesst sich nicht schliessen". */
  z-index: 1700;
  animation: bubbleIn 220ms var(--ease-soft) both;
}

.share-sheet {
  background: var(--bg-elev);
  border-radius: var(--radius-l);
  padding: 18px;
  min-width: 240px;
  max-width: 90vw;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}

.share-title {
  font-family: var(--font-display);
  font-size: 16px;
  margin: 0 0 6px 0;
  font-weight: 600;
  color: var(--text);
}

.share-btn {
  background: var(--bg-elev-2);
  border: 1px solid var(--hairline);
  color: var(--text);
  border-radius: var(--radius-m);
  padding: 10px 14px;
  font-family: var(--font-body);
  font-size: 14px;
  cursor: pointer;
  text-align: left;
  transition: background 180ms var(--ease-soft);
}

.share-btn:hover {
  background: color-mix(in srgb, var(--sage) 14%, var(--bg-elev-2));
}

.bubble-play {
  position: absolute;
  bottom: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--bg-elev) 80%, transparent);
  color: var(--text-dim);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition:
    opacity 200ms var(--ease-soft),
    color 200ms var(--ease-soft),
    border-color 200ms var(--ease-soft);
}
.bubble.bot:hover .bubble-play,
.bubble-play[data-state="loading"],
.bubble-play[data-state="playing"] {
  opacity: 1;
}
.bubble-play:hover {
  color: var(--ember);
  border-color: var(--ember);
}
/* Pre.161: Loading rotiert das SVG-Element selbst (kein ::before-Pseudo
 * mehr — das verursachte Layout-Shift, "Spinner sprang nach links").
 * Btn-Position fix, nur das Spinner-SVG dreht sich. */
.bubble-play[data-state="loading"] {
  color: var(--ember);
}
.bubble-play[data-state="loading"] svg {
  animation: bubblePlaySpin 0.9s linear infinite;
}
.bubble-play[data-state="playing"] {
  color: var(--ember);
  border-color: var(--ember);
  background: color-mix(in srgb, var(--ember) 12%, var(--bg-elev));
}
@keyframes bubblePlaySpin {
  to {
    transform: rotate(360deg);
  }
}

.autoplay-toggle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--hairline);
  color: var(--text-dim);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    color 180ms var(--ease-soft),
    background 180ms var(--ease-soft),
    border-color 180ms var(--ease-soft);
}
.autoplay-toggle:hover {
  color: var(--ember);
  border-color: color-mix(in srgb, var(--ember) 35%, var(--hairline));
}
.autoplay-toggle[data-active="true"] {
  color: var(--ember);
  background: color-mix(in srgb, var(--ember) 10%, transparent);
  border-color: var(--ember);
}

/* Pre.103: sichtbarer Timestamp pro Bubble — dezent, hover-tooltip mit
   Vollformat. Sitzt unten in der Bubble, kleiner Text. */
.bubble {
  position: relative;
}
.bubble-ts {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-mute);
  margin-top: 4px;
  letter-spacing: 0.02em;
  opacity: 0.65;
  /* Pre.161: cursor:help + pointer-events:auto entfernt — verursachte
   * Fragezeichen-Cursor wenn Maus über dem Play-Btn schwebte (.bubble-ts
   * sitzt im Stack hinter .bubble-play). Timestamp ist rein visuell. */
  pointer-events: none;
}
.bubble.user .bubble-ts {
  text-align: right;
  color: color-mix(in srgb, white 80%, transparent);
}
.bubble.system .bubble-ts {
  display: none;
}
.bubble.image .bubble-ts,
.bubble.music .bubble-ts,
.bubble.file .bubble-ts {
  padding: 0 4px 2px;
}
.tool-card .bubble-ts {
  margin-top: var(--space-3);
}

/* -------------------------------------------------------------------------
   9. Truth-Warning
   ------------------------------------------------------------------------- */

.truth-warning {
  align-self: stretch;
  max-width: 92%;
  background: color-mix(in srgb, var(--amber) 10%, var(--bg-elev));
  border: 1px solid color-mix(in srgb, var(--amber) 40%, transparent);
  border-left: 3px solid var(--amber);
  border-radius: var(--radius-m);
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13.5px;
  box-shadow: var(--shadow-soft);
  animation: bubbleIn 320ms var(--ease-soft) both;
}

.truth-warning-head {
  color: var(--amber);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  display: flex;
  align-items: center;
  gap: 6px;
}

.truth-warning-head::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--amber);
  border-radius: 50%;
  display: inline-block;
}

.truth-warning-reason {
  color: var(--text);
  line-height: 1.5;
}

.truth-warning-correction {
  color: var(--text-dim);
  font-style: italic;
  font-family: var(--font-display);
  line-height: 1.5;
}

/* === STT-Reject-Hint (Pre.119) ====================================== */

.stt-reject-hint {
  align-self: stretch;
  max-width: 92%;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 3px solid var(--text-dim);
  border-radius: var(--radius-m, 12px);
  padding: var(--space-3, 12px) var(--space-4, 16px);
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: var(--text-dim);
  animation: bubbleIn 320ms var(--ease-soft, ease-out) both;
}

.stt-reject-hint-head {
  font-family: var(--font-mono, ui-monospace);
  font-weight: 600;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-dim);
}

.stt-reject-hint-body {
  color: var(--text);
  font-style: italic;
  line-height: 1.4;
}

/* Pre.163: Re-Try-Hint — klare Action-Prompt für den User. */
.stt-reject-hint-action {
  margin-top: 6px;
  color: color-mix(in srgb, var(--ember) 90%, var(--text));
  font-weight: 500;
  font-size: 13px;
}

.stt-reject-hint-meta {
  font-family: var(--font-mono, ui-monospace);
  font-size: 11px;
  opacity: 0.6;
}

/* -------------------------------------------------------------------------
   10. Memory-View
   ------------------------------------------------------------------------- */

.memory-view {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.memory-controls {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-4);
  border-bottom: 1px solid var(--hairline);
}

.memory-controls input[type="search"],
.memory-controls select {
  background: var(--surface-soft);
  color: var(--text);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-s);
  padding: 10px 14px;
  font: inherit;
  font-size: 14px;
  font-family: var(--font-body);
  transition:
    border-color 200ms var(--ease-soft),
    background 200ms var(--ease-soft);
}

.memory-controls input[type="search"] {
  flex: 1;
}

.memory-controls input[type="search"]::placeholder {
  color: var(--text-mute);
  font-style: italic;
}

.memory-controls input[type="search"]:focus,
.memory-controls select:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--ember) 60%, transparent);
  background: var(--bg-elev);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ember) 14%, transparent);
}

.memory-status {
  padding: var(--space-2) var(--space-4);
  font-size: 12px;
  color: var(--text-dim);
  font-style: italic;
  font-family: var(--font-display);
}

.memory-list {
  flex: 1;
  overflow-y: auto;
  list-style: none;
  margin: 0;
  padding: 0 var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.memory-item {
  background: var(--bg-elev);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-m);
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  box-shadow: var(--shadow-soft);
  transition:
    border-color 200ms var(--ease-soft),
    transform 160ms var(--ease-soft);
}

.memory-item:hover {
  border-color: color-mix(in srgb, var(--ember) 30%, transparent);
}

.memory-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 11px;
  color: var(--text-dim);
  font-family: var(--font-mono);
}

.memory-type {
  background: color-mix(in srgb, var(--sage) 18%, transparent);
  color: var(--sage);
  padding: 3px 10px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.memory-date {
  color: var(--text-mute);
}

.memory-score {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  color: var(--ember);
  font-weight: 500;
  font-size: 11px;
}

.memory-content {
  font-size: 14.5px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-wrap: break-word;
  color: var(--text);
}

.memory-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.memory-tag {
  font-size: 11px;
  color: var(--text-dim);
  background: var(--surface-soft);
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  cursor: pointer;
  font-family: var(--font-body);
  transition:
    color 160ms var(--ease-soft),
    border-color 160ms var(--ease-soft),
    background 160ms var(--ease-soft);
}

.memory-tag:hover {
  color: var(--text);
  border-color: color-mix(in srgb, var(--ember) 50%, transparent);
}

.memory-tag.active {
  background: var(--ember);
  color: var(--on-color);
  border-color: var(--ember);
}

.memory-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  align-items: center;
  border-bottom: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--ember) 5%, transparent);
}

.memory-filter-label {
  font-size: 11px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
  font-family: var(--font-mono);
}

.memory-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-family: inherit;
  background: var(--ember);
  color: var(--on-color);
  border: none;
  border-radius: 999px;
  padding: 3px 4px 3px 12px;
  cursor: pointer;
  transition: background 160ms var(--ease-soft);
}

.memory-filter-pill:hover {
  background: var(--ember-soft);
}

.memory-filter-x {
  display: inline-block;
  width: 18px;
  height: 18px;
  line-height: 16px;
  text-align: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  font-size: 11px;
}

.memory-filter-clear {
  margin-left: auto;
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 12px;
  font-family: var(--font-display);
  font-style: italic;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.memory-filter-clear:hover {
  color: var(--text);
}

/* -------------------------------------------------------------------------
   11. Settings-View
   ------------------------------------------------------------------------- */

.settings-view {
  flex: 1;
  overflow-y: auto;
  /* Pre.417: max-width = content-max (800px) — gleich wie Header/Composer.
     User: "die gleiche Breite wie der Headerbereich, damit es ein schöneres
     Bild wird". Vorher 1100px → wirkte zusammenhanglos zum Header. */
  padding: 0 var(--space-3) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: var(--content-max);
  width: 100%;
  margin: 0 auto;
}

.settings-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  position: sticky;
  top: 0;
  background: var(--bg);
  padding: var(--space-3) 0 var(--space-2);
  /* Pre.429: z-index hoch damit Avatar-Badge "+" beim Scrollen NICHT über
     die Tabs ragt. Vorher beide bei z-index 2 → Avatar gewann (DOM-Order). */
  z-index: 10;
  margin: 0 calc(var(--space-3) * -1);
  padding-left: var(--space-3);
  padding-right: var(--space-3);
}

.settings-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.01em;
  margin: 0;
  color: var(--text);
}

.settings-tabs {
  display: flex;
  /* Pre.760: umbrechen statt seitlich scrollen — alle Tabs immer sichtbar,
     fügen sich kompakt in eine Zeile (oder brechen auf engem Display sauber um). */
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  background: var(--bg-elev);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-m);
}

.settings-tabs::-webkit-scrollbar {
  display: none;
}

.settings-tab {
  /* Pre.760: Tabs teilen sich die Breite (fit-in-1-Zeile), brechen sonst um. */
  flex: 1 1 auto;
  text-align: center;
  padding: 7px 10px;
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.01em;
  background: transparent;
  color: var(--text-soft);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition:
    background 220ms var(--ease-soft),
    color 220ms var(--ease-soft);
  white-space: nowrap;
}

.settings-tab:hover {
  color: var(--text);
}

.settings-tab[data-active="true"] {
  background: linear-gradient(180deg, var(--ember-soft) 0%, var(--ember) 100%);
  color: var(--on-color);
  box-shadow: 0 1px 4px color-mix(in srgb, var(--ember) 30%, transparent);
}

/* Pre.760: Auto-Standort-Schalter (Checkbox + Label) in der Standort-Sektion. */
.settings-auto-loc {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  font-size: 13px;
  color: var(--text-soft);
  cursor: pointer;
}
.settings-auto-loc input {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  flex-shrink: 0;
}

.settings-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  animation: settingsBodyIn 220ms var(--ease-soft);
}

/* Pre.417: Desktop — bisschen mehr Padding, kein 2-Spalten-Grid mehr.
   User-Feedback: Header-Width = Settings-Width. Single-column überall.
   2-Spalten würde aussreißen. */
@media (min-width: 960px) {
  .settings-view {
    padding: 0 var(--space-4) var(--space-8);
  }
  .settings-title {
    font-size: 26px;
  }
  .settings-body {
    gap: var(--space-4);
  }
}

/* Pre.416: Mobile bleibt eng, aber kompaktere Field-Spacing */
@media (max-width: 720px) {
  .settings-field {
    padding: 10px 12px;
  }
  .settings-tab {
    padding: 7px 11px;
    font-size: 12px;
  }
}

@keyframes settingsBodyIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.settings-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Pre.417/420: Google-Style Sections — sanfter Karten-Look mit weniger
   Border, mehr Whitespace. Gilt überall (Mobile + Desktop). */
.settings-body > section,
.settings-body > details {
  border-radius: 16px;
  background: color-mix(in srgb, var(--bg-elev) 45%, transparent);
  padding: var(--space-4);
  border: 1px solid color-mix(in srgb, var(--hairline) 70%, transparent);
}

/* Pre.420/423: Section-Container für Sub-Cards (Sprache/Identity). */
.settings-section--voice,
.settings-section--identity,
.settings-section--bot {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  gap: var(--space-3);
}

/* Pre.423: Profile-Felder im 2-Spalten-Grid auf Desktop. */
@media (min-width: 720px) {
  .settings-subsection--profile {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    column-gap: var(--space-3);
  }
  .settings-subsection--profile > .settings-subsection-title,
  .settings-subsection--profile > .settings-modules-hint,
  .settings-subsection--profile > .settings-wizard-box,
  .settings-subsection--profile > .settings-profile-avatar-row,
  .settings-subsection--profile > input[type="file"],
  .settings-subsection--profile > .settings-status,
  .settings-subsection--profile > .settings-actions {
    grid-column: 1 / -1;
  }
  /* Pre.429: Textarea "Zusätzliche Notizen" volle Breite, eigene Zeile. */
  .settings-subsection--profile > .settings-field-textarea,
  .settings-subsection--profile > label.settings-field:has(textarea) {
    grid-column: 1 / -1;
  }
}

/* Pre.429: Date-Input — eigenes Calendar-Icon-Style, weniger UA-Default. */
.settings-field input[type="date"] {
  appearance: none;
  -webkit-appearance: none;
  /* Calendar-Picker-Indicator dezenter (sage statt schwarz/blau) */
}
.settings-field input[type="date"]::-webkit-calendar-picker-indicator {
  filter: opacity(0.5);
  cursor: pointer;
}

/* Pre.429: Save-Button kleiner + eleganter. */
.settings-section .settings-actions,
.settings-subsection .settings-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: var(--space-3);
}
.settings-save {
  padding: 10px 22px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border-radius: 999px !important;
  background: var(--ember) !important;
  color: #fff !important;
  border: none !important;
  cursor: pointer;
  transition:
    background 200ms var(--ease-soft),
    transform 100ms var(--ease-soft);
  white-space: nowrap;
}
.settings-save:hover:not(:disabled) {
  background: color-mix(in srgb, var(--ember) 85%, black) !important;
}
.settings-save:active:not(:disabled) {
  transform: translateY(1px);
}
.settings-save:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.settings-subsection {
  border-radius: 16px;
  background: color-mix(in srgb, var(--bg-elev) 45%, transparent);
  padding: var(--space-4);
  border: 1px solid color-mix(in srgb, var(--hairline) 70%, transparent);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Pre.517: Settings Erscheinung — Radio-Button-Group für Modus + Chat-Stil. */
.settings-radio-label {
  font-size: 12px;
  color: var(--ink-soft, var(--text-soft));
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 8px 0 6px;
}
.settings-radio-row {
  flex-wrap: wrap; /* Pre.791: 6 Theme-Buttons brechen mobil in 2 Reihen */
  display: flex;
  gap: 8px;
}
.settings-radio-btn {
  flex: 1 1 30%;
  padding: 10px 14px;
  border: 1px solid var(--hairline-strong);
  background: var(--paper-soft, var(--bg-elev));
  color: var(--ink-soft, var(--text-soft));
  font-size: 13px;
  font-family: var(--font-body);
  border-radius: 10px;
  cursor: pointer;
  transition:
    background 0.15s var(--ease-soft),
    border-color 0.15s var(--ease-soft),
    color 0.15s var(--ease-soft);
}
.settings-radio-btn:hover {
  border-color: var(--accent, var(--ember));
  color: var(--ink, var(--text));
}
.settings-radio-btn.is-active {
  background: var(--accent, var(--ember));
  border-color: var(--accent, var(--ember));
  color: var(--paper);
}
.settings-subsection-title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin: 0 0 4px;
  color: var(--sage);
}

/* Pre.420: Interne Field-Labels in Subsections unterdrücken — Card-Title
   sagt schon was es ist. „Stimme" und „Voice-Modus" Doppellung raus. */
.settings-subsection .voice-picker > .settings-label,
.settings-subsection
  > .settings-field[data-suppress-label="true"]
  > .settings-label {
  display: none;
}

.settings-body > section > h3,
.settings-body > section > .settings-extension-head h3 {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.005em;
  margin: 0 0 var(--space-2);
  color: var(--text);
}

/* Pre.417: Sanftere Field-Look — weniger sichtbarer Border, mehr Material-Tinte. */
.settings-field {
  background: transparent !important;
  border: none !important;
  padding: 8px 0 !important;
  border-bottom: 1px solid color-mix(in srgb, var(--hairline) 50%, transparent) !important;
  border-radius: 0 !important;
}
.settings-field:last-child {
  border-bottom: none !important;
}
.settings-field:hover {
  background: transparent !important;
}

/* Segmented Control für Voice-Mode (Pre.417/418) */
/* Pre.414: Collapsible-Block für Premium-Bereich im "Was er kann"-Tab. */
.settings-collapsible {
  margin-top: var(--space-3);
  border: 1px solid color-mix(in srgb, var(--hairline) 70%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, var(--bg-elev) 45%, transparent);
  padding: 0;
}
.settings-collapsible > summary {
  cursor: pointer;
  padding: 14px 18px;
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 16px;
  user-select: none;
  outline: none;
}
.settings-collapsible > summary::-webkit-details-marker {
  display: none;
}
.settings-collapsible > summary:focus-visible {
  background: color-mix(in srgb, var(--ember) 8%, transparent);
}
.settings-collapsible > summary::before {
  content: "▸";
  font-size: 12px;
  color: var(--sage);
  transition: transform 200ms var(--ease-soft);
}
.settings-collapsible[open] > summary::before {
  transform: rotate(90deg);
}
.settings-collapsible[open] > summary {
  border-bottom: 1px solid color-mix(in srgb, var(--hairline) 60%, transparent);
  border-radius: 16px 16px 0 0;
}
/* Felder im Collapsible: sauber EINGERÜCKT (nichts klebt am Rand). Inhalt UND
   Trennlinien sitzen mit gleichem 18px-Abstand — vorher gingen die Linien von
   Kante zu Kante und die Sub-Überschrift klebte links am Rand. */
.settings-collapsible > .settings-field {
  margin: 0 18px !important;
  padding: 14px 0 !important;
  border-bottom: 1px solid color-mix(in srgb, var(--hairline) 50%, transparent) !important;
}
.settings-collapsible > .settings-field:last-child {
  border-bottom: none !important;
  margin-bottom: 14px !important;
  border-radius: 0 !important;
}
/* Sub-Überschrift („Live-Anruf-Provider") auf dieselbe Einrückung wie die Felder. */
.settings-collapsible > .settings-label {
  margin: 14px 18px 2px !important;
  display: block;
}
.settings-collapsible > .settings-field > .settings-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--sage);
  margin-bottom: 8px;
  display: block;
}
.settings-collapsible > .settings-section,
.settings-collapsible > .settings-block {
  padding: 16px;
}

.settings-intro {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 15px;
  color: var(--text-soft);
  margin: 0 0 var(--space-2);
  line-height: 1.55;
  letter-spacing: 0.005em;
}

.settings-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 14px;
  background: var(--bg-elev);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-l);
  transition:
    border-color 220ms var(--ease-soft),
    box-shadow 220ms var(--ease-soft);
}

.settings-field:hover {
  border-color: color-mix(in srgb, var(--ember) 22%, var(--hairline-strong));
}

.settings-field:focus-within {
  border-color: color-mix(in srgb, var(--ember) 55%, var(--hairline-strong));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ember) 12%, transparent);
}

.settings-field-toggle {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

/* Pre.654 (User-Bug): Smart-Router-Block + Beschreibungs-Hint waren UNGESTYLT
   → Titel klebte am Text. Jetzt eine saubere, dezent getönte Karte mit klar
   gestapeltem Titel + Beschreibung. */
.settings-router-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: var(--space-4) 0;
  /* Pre.656: weiche getönte Karte OHNE harten Rahmen (der 1px-Strich saß zu
     knapp am Bildschirmrand). Großzügiges Innen-Padding für Luft. */
  padding: 20px 18px;
  border-radius: var(--radius-l);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}
.settings-router-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.settings-router-header > strong {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}
.settings-field-hint {
  display: block;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-soft);
}
.settings-router-block .settings-field {
  margin-top: 2px;
}

.settings-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.settings-field select,
.settings-field input[type="text"],
.settings-field input[type="tel"],
.settings-field input[type="email"],
.settings-field input[type="number"],
.settings-field input[type="search"],
.settings-field input[type="url"],
.settings-field input[type="date"],
.settings-field input:not([type]),
.settings-field textarea {
  font: inherit;
  /* Pre.110: 16px verhindert iOS-Auto-Zoom beim Focus auf select. */
  font-size: 15px;
  font-family: var(--font-body);
  /* Pre.425: Sichtbarer Input-Look — User hatte beklagt dass Felder
     unsichtbar sind (Pre.417 hatte border + bg auf transparent). */
  background: var(--bg);
  color: var(--text);
  border: 1px solid color-mix(in srgb, var(--hairline-strong) 80%, transparent);
  border-radius: 10px;
  padding: 10px 12px;
  outline: none;
  cursor: text;
  width: 100%;
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  transition:
    border-color 160ms var(--ease-soft),
    background 160ms var(--ease-soft);
}
.settings-field select {
  cursor: pointer;
}
.settings-field select:hover,
.settings-field input[type="text"]:hover,
.settings-field input[type="tel"]:hover,
.settings-field textarea:hover {
  border-color: color-mix(in srgb, var(--ember) 30%, var(--hairline-strong));
}
.settings-field select:focus,
.settings-field input:focus,
.settings-field textarea:focus {
  border-color: var(--ember);
  background: color-mix(in srgb, var(--ember) 3%, var(--bg));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ember) 12%, transparent);
}

.settings-field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23a89683' d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0 center;
  background-size: 18px;
  padding-right: 22px;
}

.settings-field input[type="range"] {
  font: inherit;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 4px 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* Range slider — Ember thumb */
.settings-field input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 28px;
  padding: 0 4px;
  background: transparent;
  border: none;
  cursor: pointer;
}
.settings-field input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  background: var(--hairline-strong);
  border-radius: 999px;
}
.settings-field input[type="range"]::-moz-range-track {
  height: 4px;
  background: var(--hairline-strong);
  border-radius: 999px;
}
.settings-field input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--ember);
  border: 2px solid var(--bg);
  margin-top: -7px;
  box-shadow: 0 2px 6px rgba(232, 123, 74, 0.45);
  transition: transform 120ms var(--ease-soft);
}
.settings-field input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--ember);
  border: 2px solid var(--bg);
  box-shadow: 0 2px 6px rgba(232, 123, 74, 0.45);
}
.settings-field input[type="range"]:hover::-webkit-slider-thumb {
  transform: scale(1.15);
}

.settings-range-value {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ember);
  font-variant-numeric: tabular-nums;
  align-self: flex-end;
  margin-top: -4px;
}

.settings-field input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--ember);
  cursor: pointer;
}

.settings-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-3);
}

.settings-reset {
  background: transparent;
  border: 1px solid var(--hairline-strong);
  color: var(--text-dim);
  border-radius: 999px;
  padding: 9px 18px;
  font: inherit;
  font-size: 13px;
  font-family: var(--font-body);
  cursor: pointer;
  transition:
    color 200ms var(--ease-soft),
    border-color 200ms var(--ease-soft),
    background 200ms var(--ease-soft);
}

.settings-reset:hover {
  color: var(--text);
  border-color: color-mix(in srgb, var(--ember) 60%, transparent);
  background: var(--surface-soft);
}

.settings-status {
  font-size: 12px;
  color: var(--text-dim);
  height: 18px;
  font-family: var(--font-display);
  font-style: italic;
  transition: color 320ms var(--ease-soft);
}
/* Inline-Variante (Coach-Modus-Statuszeile) — vorher inline (Architekt 3).
   Werte aequivalent zu den ehemaligen Inline-Styles; Regel steht NACH der
   Basis -> font-size ueberschreibt korrekt. */
.settings-status--inline {
  margin-left: auto;
  font-size: 0.9em;
  opacity: 0.7;
}

.settings-status[data-flash="1"] {
  color: var(--ember);
}

.settings-persona {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Pre.152: Avatar-Picker-Reihe für Bot-Profile. Klickbarer Kreis mit
 * Initial + Name darunter. Aktives Profil hat einen Border-Ring. */
.settings-avatar-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 4px 0;
}

.settings-avatar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: 0;
  padding: 4px;
  cursor: pointer;
  font: inherit;
  color: var(--text);
  border-radius: 10px;
  transition: background 200ms var(--ease-soft);
}

.settings-avatar:hover {
  background: color-mix(in srgb, var(--text) 4%, transparent);
}

.settings-avatar-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  border: 2px solid transparent;
  overflow: hidden;
  background: var(--bg-elev-2);
  transition:
    border-color 200ms var(--ease-soft),
    transform 200ms var(--ease-soft);
}

.settings-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.settings-avatar[data-active="true"] .settings-avatar-circle {
  border-color: var(--ember);
  transform: scale(1.06);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ember) 18%, transparent);
}

.settings-avatar-name {
  font-size: 11.5px;
  color: var(--text-dim);
}

/* Pre.155: Upload-Tile (gestrichelte Border, Plus-Icon) */
.settings-avatar-upload .settings-avatar-circle {
  background: transparent;
  border: 2px dashed color-mix(in srgb, var(--text) 28%, transparent);
  color: color-mix(in srgb, var(--text) 50%, transparent);
  font-size: 28px;
  font-weight: 300;
}

.settings-avatar-upload:hover .settings-avatar-circle {
  border-color: var(--ember);
  color: var(--ember);
}

.settings-avatar[data-active="true"] .settings-avatar-name {
  color: var(--text);
  font-weight: 500;
}

.settings-persona h3 {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  margin: 0;
  color: var(--text);
  letter-spacing: 0.01em;
}

.settings-persona-name,
.settings-persona-soul {
  font-family: var(--font-body);
  /* Pre.126: 16px MINIMUM auf iOS-PWA. Kleiner triggert Auto-Zoom beim
     Focus, das Layout zoomt rein und der User verliert den Content
     überm Tastatur-Klappen. */
  font-size: 16px;
  padding: 10px 12px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-m);
  outline: none;
  width: 100%;
  transition: border-color 200ms var(--ease-soft);
}

.settings-persona-soul {
  font-family:
    ui-monospace,
    SF Mono,
    Menlo,
    monospace;
  /* Same as oben — 16px für iOS-Auto-Zoom-Schutz. */
  font-size: 16px;
  line-height: 1.5;
  resize: vertical;
  min-height: 200px;
}

.settings-persona-name:focus,
.settings-persona-soul:focus {
  border-color: color-mix(in srgb, var(--ember) 60%, transparent);
  background: var(--bg-elev-2);
}

.settings-persona-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.settings-persona-save {
  background: linear-gradient(180deg, var(--ember-soft) 0%, var(--ember) 100%);
  color: var(--on-color);
  border: 1px solid var(--ember);
  border-radius: var(--radius-l);
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: filter 200ms var(--ease-soft);
}

.settings-persona-save:hover:not(:disabled) {
  filter: brightness(1.06);
}

.settings-persona-save:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--bg-elev-2);
  color: var(--text-dim);
  border-color: var(--hairline);
}

.settings-persona-reset {
  background: var(--bg-elev-2);
  color: var(--text-soft);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-l);
  padding: 9px 16px;
  font-size: 13px;
  cursor: pointer;
  transition: background 200ms var(--ease-soft);
}

.settings-persona-reset:hover {
  background: var(--bg-elev);
  color: var(--text);
}

.settings-persona-status {
  font-size: 12px;
  color: var(--text-dim);
}

.settings-connectors {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.settings-connectors h3 {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  margin: 0;
  color: var(--text);
  letter-spacing: 0.01em;
}

.connector-card {
  background: var(--bg-elev);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-l);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.connector-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.connector-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}

.connector-status {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 3px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text-dim) 12%, transparent);
}

.connector-status[data-kind="ok"] {
  background: color-mix(in srgb, var(--sage) 18%, transparent);
  color: color-mix(in srgb, var(--sage) 90%, var(--text));
}

.connector-status[data-kind="warn"] {
  background: color-mix(in srgb, var(--amber) 18%, transparent);
  color: var(--amber);
}

.connector-sub {
  font-size: 12px;
  color: var(--text-dim);
}

.connector-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: 4px;
}

/* #Audit pre.859: Inline-Styles aus settings-view.ts hierher (Architekt-Regel
   #2 — Design gehört in CSS/Tokens, nicht ins JS). */
.connector-toggle-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  cursor: pointer;
}
.settings-extension-input {
  flex: 1;
  padding: 8px 12px;
  border-radius: var(--radius-l);
  border: 1px solid var(--hairline-strong);
  background: var(--bg-elev-2);
  color: var(--text);
  font-size: 13px;
}
.connector-connect {
  background: linear-gradient(180deg, var(--ember-soft) 0%, var(--ember) 100%);
  color: var(--on-color);
  border: 1px solid var(--ember);
  border-radius: var(--radius-l);
  padding: 8px 16px;
  font-size: 13px;
  cursor: pointer;
  transition: filter 200ms var(--ease-soft);
}

.connector-connect:hover:not(:disabled) {
  filter: brightness(1.06);
}

.connector-connect:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.connector-disconnect {
  background: var(--bg-elev-2);
  color: var(--text-soft);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-l);
  padding: 8px 16px;
  font-size: 13px;
  cursor: pointer;
  transition: background 200ms var(--ease-soft);
}

.connector-disconnect:hover {
  background: color-mix(in srgb, var(--rose) 12%, var(--bg-elev-2));
  border-color: color-mix(in srgb, var(--rose) 35%, var(--hairline));
  color: color-mix(in srgb, var(--rose) 85%, var(--text));
}

/* --- Voice-Picker (pre.97) ----------------------------------------- */

.voice-picker {
  /* Override .settings-field gap — innen brauchen wir mehr Luft. */
  gap: var(--space-3);
}

.voice-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: var(--space-2);
}

.voice-section-title {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sage);
  margin: 6px 0 4px;
}

/* Pre.417: Voice-Cards als kompaktes Grid statt Einzel-Stack.
   Desktop 2-3 Spalten je Section, kleinere Cards, Google-Material-feeling. */
.voice-section {
  display: grid;
  /* width:100% statt shrink-to-fit → das Grid füllt den Container und legt die
     Karten NEBENEINANDER (Desktop mehrspaltig, Mobile via auto-fill 1-spaltig).
     Vorher schrumpfte die Section auf 180px = nur 1 Spalte. */
  width: 100%;
  /* Pre.806 (#80): 150px-Minimum → am Handy ZWEI Spalten statt einem
     langen Einzel-Stapel — halbiert die Höhe der Stimmen-Liste. */
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 6px;
}
.voice-section .voice-section-title {
  grid-column: 1 / -1;
}

/* Pre.663: „Eigene Stimmen"-Verwaltung in den Einstellungen. */
.custom-voice-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 8px 0;
}
.custom-voice-empty {
  font-size: 12.5px;
  color: var(--text-soft);
  opacity: 0.7;
}
.custom-voice-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--bg-elev-2);
}
.custom-voice-label {
  font-weight: 600;
  font-size: 13.5px;
  flex-shrink: 0;
}
.custom-voice-id {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-soft);
  opacity: 0.8;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.custom-voice-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  align-items: center;
}
.custom-voice-input {
  font: inherit;
  font-size: 15px;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  border: 1px solid color-mix(in srgb, var(--hairline-strong) 80%, transparent);
  border-radius: 10px;
  padding: 9px 11px;
  flex: 1 1 150px;
  min-width: 0;
}
.custom-voice-gender {
  flex: 0 0 auto;
  cursor: pointer;
}

.voice-card {
  display: flex;
  align-items: center;
  gap: 6px;
  /* Pre.806 (#80): kompakter — die Karte trägt nur Name + Play. */
  padding: 8px 8px 8px 12px;
  background: var(--bg-elev-2);
  border: 1px solid color-mix(in srgb, var(--hairline-strong) 85%, transparent);
  border-radius: 12px;
  cursor: pointer;
  transition:
    border-color 180ms var(--ease-soft),
    background 180ms var(--ease-soft),
    box-shadow 180ms var(--ease-soft);
}

.voice-card:hover {
  border-color: color-mix(in srgb, var(--ember) 30%, var(--hairline-strong));
  background: color-mix(in srgb, var(--ember) 5%, var(--bg-elev-2));
}

.voice-card:focus-visible {
  outline: none;
  border-color: color-mix(in srgb, var(--ember) 55%, var(--hairline-strong));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ember) 14%, transparent);
}

.voice-card[data-active="true"] {
  border-color: var(--ember);
  background: color-mix(in srgb, var(--ember) 12%, var(--bg-elev-2));
  box-shadow: 0 1px 8px color-mix(in srgb, var(--ember) 18%, transparent);
}

.voice-card-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}

.voice-card-name {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text);
}

.voice-card[data-active="true"] .voice-card-name {
  color: color-mix(in srgb, var(--ember) 30%, var(--text));
}

/* Pre.417: Beschreibung im Grid versteckt — Title reicht für Schnellauswahl. */
.voice-card-desc {
  display: none;
}

.voice-card-play {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: none;
  background: color-mix(in srgb, var(--sage) 12%, transparent);
  color: var(--sage);
  cursor: pointer;
  transition:
    background 180ms var(--ease-soft),
    transform 120ms var(--ease-soft);
}

.voice-card-play:hover:not(:disabled) {
  background: color-mix(in srgb, var(--ember) 18%, var(--bg-elev));
  border-color: var(--ember);
}

.voice-card-play:active:not(:disabled) {
  transform: scale(0.94);
}

.voice-card-play:disabled {
  cursor: progress;
  opacity: 0.85;
}

.voice-card-play[data-state="playing"] {
  background: var(--ember);
  color: var(--on-color);
  border-color: var(--ember);
}

.voice-card-play[data-state="loading"] svg {
  animation: voice-card-spin 900ms linear infinite;
}

@keyframes voice-card-spin {
  to {
    transform: rotate(360deg);
  }
}

.settings-extension {
  margin-top: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.settings-extension h3 {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  margin: 0;
  color: var(--text);
  letter-spacing: 0.01em;
}

.ext-code-box {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--ember) 10%, var(--bg-elev));
  border: 1px solid color-mix(in srgb, var(--ember) 30%, var(--hairline));
  border-radius: var(--radius-m);
  margin-top: 4px;
}

.ext-code-label {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.ext-code-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ext-code-value {
  font-family:
    ui-monospace,
    SF Mono,
    Menlo,
    monospace;
  font-size: 28px;
  letter-spacing: 0.16em;
  color: var(--ember);
  font-weight: 600;
  user-select: all;
  flex: 1;
}

.ext-code-copy {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-elev);
  color: var(--text-dim);
  border: 1px solid var(--hairline);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    color 200ms var(--ease-soft),
    background 200ms var(--ease-soft),
    transform 120ms var(--ease-soft);
}

.ext-code-copy:hover {
  color: var(--ember);
  border-color: color-mix(in srgb, var(--ember) 35%, var(--hairline));
}

.ext-code-copy:active {
  transform: scale(0.92);
}

.ext-code-copy[data-state="done"] {
  background: color-mix(in srgb, var(--sage) 22%, var(--bg-elev));
  color: color-mix(in srgb, var(--sage) 90%, var(--text));
  border-color: color-mix(in srgb, var(--sage) 50%, transparent);
}

.ext-code-hint {
  font-size: 11px;
  color: var(--text-dim);
}

/* --- Extension Install-Hilfe ------------------------------------------ */

.ext-install {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--hairline);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ext-install-title {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.ext-install-download {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 8px 14px;
  background: var(--bg-elev-2);
  color: var(--text);
  text-decoration: none;
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  font-size: 13px;
  transition:
    background 200ms var(--ease-soft),
    border-color 200ms var(--ease-soft),
    color 200ms var(--ease-soft);
}

.ext-install-download:hover {
  background: color-mix(in srgb, var(--ember) 10%, var(--bg-elev-2));
  border-color: color-mix(in srgb, var(--ember) 35%, var(--hairline-strong));
  color: var(--ember);
}

.ext-install-steps {
  margin: 0;
  padding-left: 22px;
  font-size: 12px;
  color: var(--text-soft);
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.settings-push {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.settings-push h3 {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  margin: 0 0 var(--space-2);
  color: var(--text);
  letter-spacing: 0.01em;
}

.settings-push-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: var(--space-3);
}

.settings-push-toggle,
.settings-push-test {
  background: var(--bg-elev-2);
  border: 1px solid var(--hairline-strong);
  color: var(--text);
  border-radius: var(--radius-l);
  padding: 9px 16px;
  font-size: 13px;
  cursor: pointer;
  transition: background 200ms var(--ease-soft);
}

.settings-push-toggle[data-state="on"] {
  background: color-mix(in srgb, var(--ember) 16%, var(--bg-elev-2));
  border-color: color-mix(in srgb, var(--ember) 50%, transparent);
  color: var(--ember-soft);
}

.settings-push-toggle:hover:not(:disabled),
.settings-push-test:hover:not(:disabled) {
  background: var(--bg-elev);
}

.settings-push-toggle:disabled,
.settings-push-test:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.settings-modules {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Pre.432: Module-Tab Redesign — Suchfeld + Kategorien + Counter-Pillen. */
.settings-modules-search {
  position: relative;
}
.settings-modules-search-input {
  width: 100%;
  padding: 10px 14px;
  font-size: 14px;
  border-radius: 10px;
  border: 1px solid var(--hairline-strong);
  background: var(--bg);
  color: var(--text);
  outline: none;
  transition: border-color 160ms var(--ease-soft);
}
.settings-modules-search-input:focus {
  border-color: var(--ember);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ember) 12%, transparent);
}

.settings-modules-counts {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 0;
}
.settings-modules-counts .badge {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.settings-modules-counts .badge-ok {
  background: color-mix(in srgb, var(--sage) 18%, transparent);
  color: var(--sage-deep);
}
.settings-modules-counts .badge-soft {
  background: color-mix(in srgb, var(--hairline-strong) 30%, transparent);
  color: var(--text-dim);
}

.settings-modules-categories {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.settings-modules-cat {
  border: 1px solid color-mix(in srgb, var(--hairline) 60%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg-elev) 40%, transparent);
  padding: 0;
  margin: 0;
}
.settings-modules-cat > summary {
  cursor: pointer;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  list-style: none;
  border-radius: 12px;
  user-select: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.settings-modules-cat > summary::-webkit-details-marker {
  display: none;
}
.settings-modules-cat[open] > summary {
  border-bottom: 1px solid color-mix(in srgb, var(--hairline) 50%, transparent);
  border-radius: 12px 12px 0 0;
}
.settings-modules-cat .cat-icon {
  font-family: var(--font-mono);
  color: var(--sage);
  font-size: 13px;
  transition: transform 200ms var(--ease-soft);
}
.settings-modules-cat[open] > summary .cat-icon {
  transform: rotate(90deg);
}
.settings-modules-cat .cat-name {
  flex: 1;
}
.settings-modules-cat .cat-count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  background: color-mix(in srgb, var(--hairline-strong) 25%, transparent);
  padding: 1px 8px;
  border-radius: 999px;
}
.settings-modules-cat .settings-modules-list {
  padding: 8px 12px 12px;
}
.settings-modules-inactive-block {
  opacity: 0.75;
}

.settings-modules h3,
.settings-modules h4 {
  margin: 0 0 var(--space-2) 0;
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--text);
}

.settings-modules h3 {
  font-size: 17px;
  letter-spacing: -0.005em;
}

.settings-modules h4 {
  margin-top: var(--space-4);
  font-size: 11px;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  font-weight: 600;
  font-style: normal;
}

.settings-modules-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.settings-modules-list li {
  font-family: var(--font-mono);
  font-size: 12.5px;
  padding: 10px 14px;
  background: var(--surface-soft);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-s);
  color: var(--text-soft);
  position: relative;
}

.settings-module-active {
  border-left: 3px solid var(--sage) !important;
  color: var(--text) !important;
}

.settings-modules-inactive li {
  opacity: 0.55;
}

.settings-modules-hint {
  margin: 0;
  font-size: 13px;
  color: var(--text-dim);
  font-family: var(--font-display);
  font-style: italic;
  line-height: 1.55;
}

/* Pre.369: Module-Tab — Intro, Last-Update-Stamp, Rich-Rows mit Desc + Reason. */
.settings-modules-intro {
  margin: 0 0 8px 0;
  font-size: 13px;
  color: var(--text);
  line-height: 1.5;
}
.settings-modules-stamp {
  margin: 0 0 14px 0;
  font-size: 12px;
  color: var(--text-dim);
  font-style: italic;
}
.settings-module-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 14px !important;
}
.settings-module-row .settings-module-name {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text);
  font-weight: 600;
}
.settings-module-row.settings-module-inactive .settings-module-name {
  color: var(--text-soft);
}
.settings-module-row .settings-module-desc {
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--text-soft);
  line-height: 1.4;
}
.settings-module-row .settings-module-reason {
  font-family: var(--font-display);
  font-size: 12px;
  color: var(--text-dim);
  font-style: italic;
}

/* Pre.790 (#59): Such-Filter via Klasse statt Inline-Style + sanftere
   Farbe fuer bewusst-im-Sprachmodus-deaktivierte Module. */
.settings-module-row.hidden,
.settings-modules-cat.hidden {
  display: none;
}
.settings-module-voicelocked .settings-module-reason {
  color: var(--text-soft);
}


/* -------------------------------------------------------------------------
   12. Tools-View — Modul-Karten als Test-Bench
   ------------------------------------------------------------------------- */

.tools-view {
  /* Drawer-Mode: side-drawer setzt position/right/width — wir füllen */
  flex: 1;
  display: flex;
  flex-direction: column;
}

.tools-body {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: 22px;
  overflow-y: auto;
  flex: 1;
}

.tools-intro {
  margin: 0;
  color: var(--text-dim);
  font-size: 13px;
  font-family: var(--font-body);
  line-height: 1.5;
}

.tools-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tools-section-title {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cat-color, var(--text-dim));
  padding: 0 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.tools-section-title::before {
  content: "";
  width: 3px;
  height: 12px;
  border-radius: 2px;
  background: var(--cat-color, var(--text-dim));
  opacity: 0.7;
}

/* Pre.158: Module-Liste appetitlicher — iOS-Settings-Style mit
 * gruppierten Karten in einem Container (eine Spalte, eindeutiger
 * Trennstrich zwischen Items). Kompakter, ruhiger, lesbarer. */
.tools-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--bg-elev-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-l);
  overflow: hidden;
}

/* Pre.158: iOS-Settings-Card — Icon-Tile (rounded-square, kategorie-
 * akzentuiert), Label, Chevron rechts. Karten in einer Gruppe getrennt
 * durch hairline-Linie. */
.tools-card {
  background: transparent;
  color: var(--text);
  border: 0;
  border-bottom: 1px solid var(--hairline);
  border-radius: 0;
  padding: 12px 14px;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  font-family: var(--font-body);
  font-size: 14px;
  position: relative;
  overflow: hidden;
  min-height: 56px;
  transition: background 200ms var(--ease-soft);
}

.tools-card:last-child {
  border-bottom: 0;
}

.tools-card:hover {
  background: color-mix(in srgb, var(--text) 4%, transparent);
}

.tools-card:active {
  background: color-mix(in srgb, var(--text) 8%, transparent);
}

.tools-card::after {
  /* Chevron rechts — dezente Geometrie statt SVG */
  content: "";
  width: 8px;
  height: 8px;
  border-right: 1.5px solid color-mix(in srgb, var(--text) 25%, transparent);
  border-top: 1.5px solid color-mix(in srgb, var(--text) 25%, transparent);
  transform: rotate(45deg);
  flex-shrink: 0;
  margin-left: 4px;
  transition: border-color 200ms var(--ease-soft);
}

.tools-card:hover::after {
  border-color: color-mix(in srgb, var(--ember) 70%, transparent);
}

.tools-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 9px;
  background: var(--cat-color, var(--ember));
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 1px 2px rgba(0, 0, 0, 0.08);
}

.tools-card-label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  color: var(--text);
  line-height: 1.25;
  flex: 1;
  min-width: 0;
}

/* Kategorie-Akzentfarben für die Icon-Tiles (über CSS-Custom-Property
 * --cat-color via parent .tools-section[data-cat=...]). */
.tools-section[data-cat="Allgemein"] {
  --cat-color: #5b8a72; /* sage */
}
.tools-section[data-cat="Erinnerungen"] {
  --cat-color: #c87f4a; /* warm orange */
}
.tools-section[data-cat="Mail & PDF"] {
  --cat-color: #5b6a8a; /* steel blue */
}
.tools-section[data-cat="Kalender & Drive"] {
  --cat-color: #a07ab5; /* plum */
}
.tools-section[data-cat="Mediathek"] {
  --cat-color: #d97a82; /* rose */
}
.tools-section[data-cat="Musik & Web"] {
  --cat-color: #d4a85c; /* amber */
}
.tools-section[data-cat="Browser"] {
  --cat-color: #6a8a8a; /* teal */
}

.tools-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--ember) 0%, transparent),
    color-mix(in srgb, var(--ember) 8%, transparent)
  );
  opacity: 0;
  transition: opacity 320ms var(--ease-soft);
  pointer-events: none;
}

.tools-card:hover {
  border-color: color-mix(in srgb, var(--ember) 45%, transparent);
  transform: translateY(-1px);
  box-shadow: var(--shadow-card);
}

.tools-card:hover::before {
  opacity: 1;
}

.tools-card:active {
  transform: translateY(0) scale(0.99);
}

.tools-card-head {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  color: var(--text);
}

.tools-card-body {
  font-size: 11.5px;
  color: var(--text-dim);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tools-card-tag {
  align-self: flex-start;
  font-size: 10.5px;
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ember);
  background: color-mix(in srgb, var(--ember) 10%, transparent);
  padding: 3px 9px;
  border-radius: 6px;
  margin-top: auto;
}

.tools-status {
  font-size: 13px;
  color: var(--text-dim);
  min-height: 1.4em;
  font-family: var(--font-display);
  font-style: italic;
}

.tools-status[data-kind="error"] {
  color: var(--error);
  font-style: normal;
  font-family: var(--font-body);
}

.tools-status[data-kind="ok"] {
  color: var(--sage);
  font-style: normal;
  font-family: var(--font-body);
}

/* -------------------------------------------------------------------------
   Scroll-to-Bottom Button (pre.95) — wie Telegram. Erscheint sobald der
   User vom Chat-Ende weg-scrollt. Counter zeigt unread messages an.
   ------------------------------------------------------------------------- */

.scroll-to-bottom {
  position: absolute;
  /* Pre.1014: nach LINKS + etwas höher — lag vorher rechts halb auf dem
     Dock-Anruf-Button und störte beim Hochscrollen (Martins Befund). */
  left: var(--space-4);
  bottom: 104px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg-elev);
  color: var(--text);
  border: 1px solid var(--hairline-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 50;
  transition:
    transform 200ms var(--ease-soft),
    background 200ms var(--ease-soft),
    border-color 200ms var(--ease-soft);
  animation: scrollBtnIn 220ms var(--ease-soft);
}

.scroll-to-bottom:hover {
  background: var(--bg-elev-2);
  border-color: var(--ember);
  color: var(--ember);
  transform: translateY(-1px);
}

.scroll-to-bottom:active {
  transform: translateY(0) scale(0.95);
}

@keyframes scrollBtnIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.scroll-to-bottom-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--ember);
  color: white;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  border: 2px solid var(--bg-deep);
}

/* -------------------------------------------------------------------------
   Projekte-View (Phase E3.3)
   ------------------------------------------------------------------------- */

.projects-view {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  overflow-y: auto;
  flex: 1;
}

/* Pre.381: Task-Manager-View */
.tasks-view {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  overflow-y: auto;
  flex: 1;
}
.tasks-view-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--hairline);
}
.tasks-view-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--text);
}
.tasks-view-refresh {
  background: transparent;
  border: 1px solid var(--hairline);
  color: var(--text-soft);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 16px;
  transition: all 200ms var(--ease-soft);
}
.tasks-view-refresh:hover {
  border-color: var(--ember);
  color: var(--ember);
  transform: rotate(180deg);
}
.tasks-view-hint {
  margin: 0;
  color: var(--text-soft);
  font-size: 13px;
  font-style: italic;
  line-height: 1.5;
}
.tasks-view-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  /* pre.851: die Liste ist der Scroll-Container (der .view-Eltern hat
     overflow:hidden). flex:1 + min-height:0 = sie nimmt die Resthöhe und
     scrollt selbst → Kopf/Hinweis bleiben fix, das Ergebnis bleibt lesbar. */
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}
.task-row {
  padding: 12px 14px;
  background: var(--bg-elev);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.task-row--running {
  border-left: 3px solid var(--ember);
}
.task-row--done {
  border-left: 3px solid var(--sage);
}
.task-row--failed {
  border-left: 3px solid var(--warn);
}
.task-row-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}
.task-row-status {
  font-weight: 600;
  font-family: var(--font-mono);
}
.task-row--running .task-row-status {
  color: var(--ember);
}
.task-row--done .task-row-status {
  color: var(--sage);
}
.task-row--failed .task-row-status {
  color: var(--warn);
}
.task-row-project {
  padding: 2px 8px;
  background: color-mix(in srgb, var(--ember) 12%, transparent);
  color: var(--ember);
  border-radius: 999px;
  font-size: 11px;
}
.task-row-model {
  padding: 2px 8px;
  background: var(--surface-soft);
  color: var(--text-soft);
  border-radius: 999px;
  font-size: 11px;
  font-family: var(--font-mono);
}
.task-row-time {
  margin-left: auto;
  color: var(--text-dim);
  font-size: 11px;
  font-family: var(--font-mono);
}
/* Pre.488: Wann-gelaufen (separater Tag neben Dauer) */
.task-row-started {
  color: var(--text-dim);
  font-size: 11px;
  font-family: var(--font-mono);
  opacity: 0.75;
  margin-left: 4px;
}
.task-row-prompt {
  font-size: 13px;
  color: var(--text);
  line-height: 1.4;
}
.task-row-output {
  margin-top: 4px;
  font-size: 12px;
}
.task-row-output summary {
  cursor: pointer;
  color: var(--ember);
  user-select: none;
}
.task-row-output pre {
  margin: 8px 0 0 0;
  padding: 10px;
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: var(--font-mono);
  font-size: 12px;
  max-height: 280px;
  overflow-y: auto;
}
.task-row-error {
  color: var(--warn);
  font-size: 12px;
  font-family: var(--font-mono);
}

/* Pre.388: Live-Status während running */
.task-row-live {
  font-size: 12px;
  color: var(--ember);
  font-family: var(--font-mono);
  background: color-mix(in srgb, var(--ember) 8%, transparent);
  padding: 6px 10px;
  border-radius: 6px;
  font-style: italic;
  border-left: 2px solid var(--ember);
}

/* Pre.445: Prozess-Schritte-Log */
.task-row-steps {
  margin-top: 8px;
  background: color-mix(in srgb, var(--bg-elev) 50%, transparent);
  border: 1px solid color-mix(in srgb, var(--hairline) 60%, transparent);
  border-radius: 10px;
  padding: 0;
}
.task-row-steps > summary {
  cursor: pointer;
  padding: 8px 12px;
  font-size: 12px;
  font-family: var(--font-mono);
  color: var(--text-soft);
  list-style: none;
  user-select: none;
}
.task-row-steps > summary::-webkit-details-marker {
  display: none;
}
.task-row-steps > summary::before {
  content: "▸ ";
  color: var(--sage);
  transition: transform 200ms var(--ease-soft);
  display: inline-block;
}
.task-row-steps[open] > summary::before {
  transform: rotate(90deg);
}
.task-row-steps-list {
  list-style: none;
  padding: 4px 12px 10px;
  margin: 0;
  max-height: 320px;
  overflow-y: auto;
  font-family: var(--font-mono);
  font-size: 11.5px;
}
.task-row-steps-list li {
  padding: 3px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--hairline) 30%, transparent);
  display: flex;
  gap: 10px;
  align-items: baseline;
}
.task-row-step-ts {
  color: var(--sage);
  flex: 0 0 60px;
  font-size: 10.5px;
}
.task-row-step-line {
  color: var(--text-soft);
  flex: 1;
  word-break: break-word;
}

/* Pre.388: Files-Listing nach Done */
.task-row-files {
  margin-top: 4px;
  padding: 10px;
  background: color-mix(in srgb, var(--sage) 8%, var(--bg-elev));
  border-radius: 6px;
  border: 1px solid var(--hairline);
}
.task-row-files-head {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--sage);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.task-row-file {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 2px 0;
  font-size: 12.5px;
}
.task-row-file-name {
  font-family: var(--font-mono);
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.task-row-file-size {
  font-family: var(--font-mono);
  color: var(--text-dim);
  font-size: 11px;
  flex-shrink: 0;
}
.task-row-files-path {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--hairline);
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Pre.392: ▶ Ausführen-Button + Output-Block */
.task-row-file-run {
  margin-left: 6px;
  padding: 2px 8px;
  background: color-mix(in srgb, var(--ember) 18%, transparent);
  color: var(--ember);
  border: 1px solid color-mix(in srgb, var(--ember) 30%, var(--hairline));
  border-radius: 999px;
  font-size: 11px;
  cursor: pointer;
  transition: all 180ms var(--ease-soft);
  flex-shrink: 0;
}
.task-row-file-run:hover {
  background: color-mix(in srgb, var(--ember) 30%, transparent);
  transform: scale(1.05);
}
.task-file-output {
  margin-top: 6px;
  padding: 10px;
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
}
.task-file-output-head {
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
  font-size: 11px;
}
.task-file-output pre {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--text);
  max-height: 280px;
  overflow-y: auto;
}
.task-file-output pre.task-file-output-err {
  color: var(--warn);
  margin-top: 6px;
  border-top: 1px dashed var(--hairline);
  padding-top: 6px;
}

/* Pre.397: task_delegate-Card */
.tool-task-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin: 4px 0;
}
.tool-task-pill {
  padding: 2px 8px;
  background: color-mix(in srgb, var(--ember) 12%, transparent);
  color: var(--ember);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}
.tool-task-model {
  padding: 2px 8px;
  background: var(--surface-soft);
  color: var(--text-soft);
  border-radius: 999px;
  font-size: 11px;
  font-family: var(--font-mono);
}
.tool-task-status {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  color: var(--ember);
  font-family: var(--font-mono);
  animation: tool-task-pulse 1.4s ease-in-out infinite;
}
@keyframes tool-task-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.55;
  }
}
.tool-task-hint {
  margin: 6px 0 0 0;
  font-size: 12px;
  color: var(--text-dim);
  font-style: italic;
  line-height: 1.4;
}

/* Pre.397: task_list-Card */
.tool-task-stats {
  display: flex;
  gap: 10px;
  margin: 4px 0 8px 0;
}
.tool-task-stat {
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  background: var(--surface-soft);
  color: var(--text-soft);
}
.tool-task-stat--running {
  background: color-mix(in srgb, var(--ember) 12%, transparent);
  color: var(--ember);
}
.tool-task-stat--done {
  background: color-mix(in srgb, var(--sage) 18%, transparent);
  color: var(--sage);
}
.tool-task-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tool-task-row {
  padding: 8px 10px;
  background: var(--bg-elev);
  border: 1px solid var(--hairline);
  border-radius: 8px;
}
.tool-task-row--running {
  border-left: 3px solid var(--ember);
}
.tool-task-row--done {
  border-left: 3px solid var(--sage);
}
.tool-task-row-top {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
}
.tool-task-row-status {
  font-weight: 600;
  font-family: var(--font-mono);
}
.tool-task-row--running .tool-task-row-status {
  color: var(--ember);
}
.tool-task-row--done .tool-task-row-status {
  color: var(--sage);
}
.tool-task-row-project {
  padding: 1px 6px;
  background: color-mix(in srgb, var(--ember) 10%, transparent);
  color: var(--ember);
  border-radius: 999px;
}
.tool-task-row-time {
  margin-left: auto;
  font-family: var(--font-mono);
  color: var(--text-dim);
}
.tool-task-row-prompt {
  margin: 4px 0 0 0;
  font-size: 12px;
  color: var(--text);
  line-height: 1.4;
}

/* Pre.397: chat_history_search-Card */
.tool-chat-hits {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tool-chat-hit {
  padding: 8px 10px;
  background: var(--bg-elev);
  border: 1px solid var(--hairline);
  border-radius: 8px;
}
.tool-chat-hit--user {
  border-left: 3px solid var(--sage);
}
.tool-chat-hit--assistant {
  border-left: 3px solid var(--ember);
}
.tool-chat-hit-top {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
}
.tool-chat-hit-role {
  font-weight: 600;
  color: var(--text);
}
.tool-chat-hit-score {
  padding: 1px 6px;
  background: var(--surface-soft);
  color: var(--text-soft);
  border-radius: 999px;
  font-family: var(--font-mono);
}
.tool-chat-hit-when {
  margin-left: auto;
  color: var(--text-dim);
  font-family: var(--font-mono);
}
.tool-chat-hit-body {
  margin: 4px 0 0 0;
  font-size: 12.5px;
  color: var(--text);
  line-height: 1.45;
}

/* Pre.381: Memory-Save-Card mit Content + Meta */
.tool-memory-content {
  margin: 6px 0 4px 0;
  padding: 8px 12px;
  border-left: 3px solid var(--ember);
  background: color-mix(in srgb, var(--ember) 6%, transparent);
  font-size: 14px;
  line-height: 1.45;
  font-style: italic;
  color: var(--text);
}
.tool-memory-meta {
  margin: 4px 0 0 0;
  font-size: 11.5px;
  color: var(--text-dim);
  font-family: var(--font-mono);
}

/* Pre.382: Topbar-Pulse — blinkender Indikator für laufende Tasks.
   Klick öffnet die Tasks-View. */
.topbar-tasks-pulse {
  /* Pre.826 (Martins Header-Wunsch): Umrahmung + Füllung weg — die Pille
     konkurrierte mit der Glocke und erfüllte keinen Zweck. Nur noch
     pulsierender Punkt + Zahl, ruhig und buendig zu den Icons. */
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 6px;
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  color: var(--ember);
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-mono);
  transition: background 200ms var(--ease-soft);
}

/* Pre.445: Tickets-Glocke im Header. Nur für Superuser sichtbar. */
.topbar-tickets-bell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: transparent;
  /* Pre.826: Umrahmung weg — einheitlich ruhige Icon-Reihe im Header. */
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: var(--text-soft);
  transition:
    background 200ms var(--ease-soft),
    color 200ms var(--ease-soft);
}
.topbar-tickets-bell:hover {
  background: color-mix(in srgb, var(--ember) 14%, transparent);
  color: var(--ember);
}
.topbar-tickets-bell[data-has-open="true"] {
  color: var(--ember);
  border-color: color-mix(in srgb, var(--ember) 40%, var(--hairline));
}
.topbar-tickets-bell[data-has-open="true"] svg {
  animation: topbar-bell-shake 2.5s ease-in-out infinite;
}
.topbar-tickets-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  background: var(--ember);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 18px;
  border-radius: 999px;
  text-align: center;
  font-family: var(--font-mono);
  display: none;
}
.topbar-tickets-bell[data-has-open="true"] .topbar-tickets-count {
  display: block;
}
@keyframes topbar-bell-shake {
  0%,
  88%,
  100% {
    transform: rotate(0deg);
  }
  90%,
  94% {
    transform: rotate(-12deg);
  }
  92%,
  96% {
    transform: rotate(12deg);
  }
}

/* Pre.445: Tickets-Modal (Glocke-Click). */
/* #157: Vollseite statt schwebendes Modal — gleiches Muster wie .hd-overlay/
   .hd-sheet (opaker Hintergrund, kein Backdrop/Blur, volle Viewport-Hoehe). */
.tickets-backdrop {
  position: fixed;
  inset: 0;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  z-index: 1300;
  padding: 0;
}
.tickets-modal {
  background: var(--bg);
  border: none;
  border-radius: 0;
  width: 100%;
  height: 100dvh;
  max-height: 100dvh;
  display: flex;
  flex-direction: column;
  box-shadow: none;
}
.tickets-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* Pre.991: oberer Safe-Area-Inset (native Hülle) — sonst Kollision mit Statusleiste. */
  padding: max(16px, env(safe-area-inset-top)) 20px 16px;
  border-bottom: 1px solid var(--hairline);
}
.tickets-modal-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
}
.tickets-modal-tabs {
  display: flex;
  gap: 4px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--hairline);
}
.tickets-modal-tab {
  padding: 6px 14px;
  font-size: 13px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: transparent;
  color: var(--text-soft);
  cursor: pointer;
  font-family: var(--font-body);
}
.tickets-modal-tab[data-active="true"] {
  background: color-mix(in srgb, var(--ember) 14%, transparent);
  color: var(--ember);
  border-color: color-mix(in srgb, var(--ember) 40%, var(--hairline));
}
.tickets-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* Vollseite: lesbare Maximalbreite mittig (wie HD-/Projekt-Detail-Body). */
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
}
.tickets-empty {
  padding: 32px;
  text-align: center;
  color: var(--text-dim);
  font-size: 14px;
}
.tickets-row {
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 12px 14px;
  background: var(--bg-deep);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tickets-row[data-ticket-status="resolved"] {
  opacity: 0.55;
}
.tickets-row-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.tickets-row-id {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-dim);
  font-weight: 600;
}
.tickets-row-time {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-dim);
}
.tickets-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 4px;
  font-family: var(--font-mono);
}
.tickets-badge-high {
  background: color-mix(in srgb, var(--error) 18%, transparent);
  color: var(--error);
}
.tickets-badge-mid {
  background: color-mix(in srgb, var(--ember) 18%, transparent);
  color: var(--ember);
}
.tickets-badge-low {
  background: color-mix(in srgb, var(--text-dim) 14%, transparent);
  color: var(--text-soft);
}
.tickets-badge-status[data-status="open"] {
  background: color-mix(in srgb, var(--text-soft) 14%, transparent);
  color: var(--text-soft);
}
.tickets-badge-status[data-status="in_progress"] {
  background: color-mix(in srgb, #3b82f6 18%, transparent);
  color: #3b82f6;
}
.tickets-badge-status[data-status="resolved"] {
  background: color-mix(in srgb, var(--sage) 18%, transparent);
  color: var(--sage);
}
.tickets-row-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.tickets-row-meta {
  font-size: 11px;
  color: var(--text-dim);
  font-family: var(--font-mono);
}
.tickets-row-desc {
  font-size: 13px;
  color: var(--text-soft);
  line-height: 1.45;
  white-space: pre-wrap;
}
.tickets-row-notes {
  font-size: 12px;
  color: var(--text-dim);
  padding: 8px 10px;
  background: color-mix(in srgb, var(--ember) 6%, transparent);
  border-left: 2px solid var(--ember);
  border-radius: 4px;
  white-space: pre-wrap;
}

/* pre.850: Offene RÜCKFRAGE der KI im Ticket — deutlich hervorgehoben (der
   --accent-Rahmen signalisiert „hier wartet etwas auf dich"), mit Antwortfeld. */
/* pre.856: Changelog-Ansicht — scrollbarer, gut lesbarer Markdown-Körper. */
.changelog-body {
  max-height: 70vh;
  overflow-y: auto;
  overflow-x: hidden;
  overflow-wrap: anywhere;
  padding: 4px 2px 8px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
}
.changelog-body h1 {
  font-size: 18px;
  margin: 0 0 8px;
}
.changelog-body h2 {
  font-size: 15px;
  margin: 16px 0 6px;
  padding-top: 10px;
  border-top: 1px solid var(--hairline);
  color: var(--accent);
}
.changelog-body h2:first-of-type {
  border-top: none;
  padding-top: 0;
}
.changelog-body ul {
  margin: 4px 0 8px;
  padding-left: 20px;
}
.changelog-body li {
  margin: 3px 0;
}
.changelog-body code {
  font-size: 12px;
  word-break: break-word;
}
/* Breite Tabellen scrollen IN sich, nicht das ganze Sheet (kein Seitwärts-Scroll). */
.changelog-body table {
  display: block;
  width: 100%;
  overflow-x: auto;
}

/* pre.855: Abbrechen-Button (Tasks-Liste) + „läuft"-Anzeige im Ticket. */
.task-row-cancel {
  margin-left: auto;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--error) 35%, var(--hairline));
  background: transparent;
  color: var(--error);
  cursor: pointer;
}
.task-row-cancel:hover:not(:disabled) {
  background: color-mix(in srgb, var(--error) 10%, transparent);
}
.task-row-cancel:disabled {
  opacity: 0.55;
  cursor: default;
}
.tickets-btn--golive {
  background: color-mix(in srgb, var(--success, #2e9b5e) 90%, black);
  color: var(--on-color);
  border: 1px solid color-mix(in srgb, var(--success, #2e9b5e) 60%, black);
  font-weight: 700;
}
.tickets-btn--golive:hover:not(:disabled) {
  filter: brightness(1.08);
}
.tickets-task-running {
  display: inline-flex;
  align-items: center;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent);
  margin-right: 8px;
}

.tickets-row-question {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--hairline));
  border-radius: var(--radius-m);
}
.tickets-question-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--accent);
}
.tickets-question-text {
  font-size: 13px;
  line-height: 1.45;
  color: var(--text);
  white-space: pre-wrap;
}
.tickets-answer-input {
  width: 100%;
  font: inherit;
  font-size: 13px;
  padding: 8px 10px;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-s, 8px);
  background: var(--bg-elev, var(--bg));
  color: var(--text);
  resize: vertical;
}
.tickets-answer-input:focus {
  outline: none;
  border-color: var(--accent);
}
.tickets-row-question .tickets-btn {
  align-self: flex-end;
}
/* Wartendes Ticket: dezenter Akzent-Streifen links. */
.tickets-row[data-waiting="1"] {
  border-left: 3px solid var(--accent);
}
.tickets-row-actions {
  display: flex;
  gap: 6px;
  margin-top: 4px;
  flex-wrap: wrap;
}
.tickets-btn {
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  font-family: var(--font-body);
  border: 1px solid var(--hairline);
  background: transparent;
  color: var(--text-soft);
}
.tickets-btn:hover {
  background: var(--hairline);
  color: var(--text);
}
.tickets-btn--primary {
  background: var(--ember);
  border-color: var(--ember);
  color: var(--on-color);
}
.tickets-btn--primary:hover {
  background: color-mix(in srgb, var(--ember) 85%, black);
  color: var(--on-color);
}
.topbar-tasks-pulse:hover {
  background: color-mix(in srgb, var(--ember) 22%, transparent);
}
.topbar-tasks-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ember);
  animation: topbar-tasks-pulse 1.4s ease-in-out infinite;
}
.topbar-tasks-count {
  line-height: 1;
}
@keyframes topbar-tasks-pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.45;
    transform: scale(0.7);
  }
}

/* Pre.381: Nav-Badge — Anzahl laufender Tasks */
.nav-tab-badge {
  margin-left: auto;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--ember);
  color: var(--on-color);
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.projects-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--hairline);
}

.projects-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
}

.projects-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.projects-btn {
  background: var(--bg-elev-2);
  color: var(--text);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-m);
  padding: 8px 14px;
  font-family: var(--font-body);
  font-size: 13px;
  cursor: pointer;
  transition:
    background 200ms var(--ease-soft),
    border-color 200ms var(--ease-soft);
}

.projects-btn-primary {
  background: var(--ember);
  color: var(--user-text);
  border-color: var(--ember);
}

.projects-btn-primary:hover {
  background: color-mix(in srgb, var(--ember) 90%, black);
}

.projects-archived-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-dim);
  cursor: pointer;
  user-select: none;
}

.projects-archived-toggle input {
  cursor: pointer;
}

.projects-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.projects-empty {
  padding: var(--space-5) var(--space-3);
  text-align: center;
  color: var(--text-dim);
  font-style: italic;
  font-family: var(--font-display);
}

.project-card {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px var(--space-3);
  padding: 12px 14px;
  background: var(--bg-elev-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-m);
  transition:
    border-color 200ms var(--ease-soft),
    background 200ms var(--ease-soft);
}

.project-card:hover {
  border-color: color-mix(in srgb, var(--text) 20%, var(--hairline));
}

.project-card.is-active {
  border-color: var(--ember);
  background: color-mix(in srgb, var(--ember) 6%, var(--bg-elev-2));
}

.project-card.is-archived {
  opacity: 0.65;
}

.project-color-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
}

.project-card-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 200px;
  /* button-reset: card-main ist jetzt <button> für Detail-Sheet-Trigger */
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.project-card-main:hover .project-card-name {
  text-decoration: underline;
  text-decoration-color: var(--accent, currentColor);
  text-underline-offset: 3px;
}

.project-card-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-card-desc {
  margin: 0;
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.project-card-badge {
  display: inline-block;
  font-size: 10px;
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
  background: color-mix(in srgb, var(--text-dim) 12%, transparent);
  padding: 2px 7px;
  border-radius: 5px;
  margin-top: 2px;
  align-self: flex-start;
}

.project-card-badge-active {
  color: var(--ember);
  background: color-mix(in srgb, var(--ember) 12%, transparent);
}

.project-card-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  flex-shrink: 0;
}

@media (max-width: 540px) {
  /* Mobile: actions in eigene Zeile unter den Namen, voll-breit */
  .project-card {
    gap: 8px var(--space-2);
  }
  .project-card-actions {
    flex-basis: 100%;
    justify-content: flex-start;
  }
}

.project-action-btn {
  background: transparent;
  color: var(--text-dim);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-s);
  padding: 4px 10px;
  font-family: var(--font-body);
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background 200ms var(--ease-soft),
    color 200ms var(--ease-soft),
    border-color 200ms var(--ease-soft);
}

.project-action-btn:hover {
  background: var(--bg-elev);
  color: var(--text);
  border-color: var(--hairline-strong);
}

.project-action-danger:hover {
  color: var(--rose);
  border-color: color-mix(in srgb, var(--rose) 40%, var(--hairline-strong));
}

.status-bar-project {
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ember);
}

/* -------------------------------------------------------------------------
   13. Dock — Mic als Anker, Mute / Stop als Trabanten
   ------------------------------------------------------------------------- */

.dock {
  position: relative;
  /* Pre.515 Editorial: solider paper-elev statt Gradient — ruhigere Trennung
     zum Chat-Bereich. Border-Top als feine hairline.
     Pre.529: padding-top größer (var(--space-4) statt --space-3) damit
     der Anrufen-Button nicht zu eng am Topbar-Rand sitzt. */
  padding: var(--space-4) var(--space-4) var(--space-3);
  border-top: 1px solid var(--hairline);
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  align-items: center;
  background: var(--paper-elev, var(--bg-deep));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.dock::before {
  /* sanftes Lichtsprudeln vom Mic-Anker nach oben — nur wenn aktiv */
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 200px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--ember) 60%, transparent),
    transparent
  );
  transform: translateX(-50%);
  opacity: 0.6;
}

/* -------------------------------------------------------------------------
   12.5 Login-View (Phase C: Multi-Tenant)
   ------------------------------------------------------------------------- */

#boot-splash {
  position: fixed;
  inset: 0;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  z-index: 9999;
}

.boot-splash-logo {
  width: 96px;
  height: 96px;
  border-radius: 22px;
  box-shadow: var(--shadow-card);
  animation: boot-splash-pulse 1.4s ease-in-out infinite;
}

.boot-splash-name {
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 0.02em;
  color: var(--ember);
}

/* Pre.367: Live-Translate-Card — Original gedimmt, Pfeil, Übersetzung in groß.
   #137: Poliert — Originaltext mit Ember-Akzentlinie links, Übersetzung
   als hervorgehobener Tinted-Block statt reinem Text. */
.tool-translate-source {
  margin: 8px 0 0 0;
  color: var(--text-dim);
  font-size: 13px;
  line-height: 1.5;
  font-style: italic;
  padding: 5px 8px;
  border-left: 2px solid color-mix(in srgb, var(--ember) 45%, var(--hairline));
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
  background: color-mix(in srgb, var(--ember) 5%, var(--bg-elev));
}
.tool-translate-arrow {
  font-size: 12px;
  color: var(--ember);
  opacity: 0.5;
  margin: 4px 0 2px 4px;
}
.tool-translate-target {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text);
  padding: 10px 12px;
  margin: 0 0 4px 0;
  background: color-mix(in srgb, var(--ember) 8%, var(--bg-elev));
  border: 1px solid color-mix(in srgb, var(--ember) 22%, var(--hairline));
  border-radius: var(--radius-s);
}

/* Pre.366: Hydrate-Pille — zeigt während hydrateFromServer "Lade Verlauf…"
   damit User beim Reload weiß dass die App nicht hängt. Unten zentriert
   damit es Topbar/Status nicht überdeckt. */
.hydrate-pill {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 92px);
  transform: translateX(-50%) translateY(8px);
  background: var(--surface-elev, #1f1d1a);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  padding: 8px 14px 8px 32px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-card);
  opacity: 0;
  transition:
    opacity 220ms ease,
    transform 220ms ease;
  pointer-events: none;
  z-index: 9000;
  white-space: nowrap;
}
.hydrate-pill::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  border-radius: 50%;
  border: 2px solid var(--ember);
  border-top-color: transparent;
  animation: hydrate-pill-spin 0.8s linear infinite;
}
.hydrate-pill.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
@keyframes hydrate-pill-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes boot-splash-pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.92;
  }
  50% {
    transform: scale(1.03);
    opacity: 1;
  }
}

.login-view {
  /* Pre.132: padding-bottom MUSS 0 sein. Mit pre.131 display:none auf
     status-bar/dock/topbar im auth-pending füllt login-view jetzt den
     ganzen Screen — und das bestehende padding:space-6 produziert
     einen sichtbaren ~32px Whitespace UNTERHALB der Card bis Display-
     Rand. DAS war Martin's Spalt. */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  padding: var(--space-6) var(--space-6) 0 var(--space-6);
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--bg-deep);
}

.login-card {
  width: 100%;
  max-width: 420px;
  /* Pre.130: doppelte Sicherheit für horizontal-Zentrierung. */
  margin: 0 auto;
  background: var(--bg-elev);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-l);
  padding: var(--space-6) var(--space-5);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: center;
  text-align: center;
  box-sizing: border-box;
}

.login-logo {
  width: 96px;
  height: 96px;
  border-radius: 22px;
  box-shadow: var(--shadow-card);
  display: block;
}

.login-title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: 0.01em;
  margin: 0;
  color: var(--ember);
}

.login-intro {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-soft);
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
  text-align: left;
}

.login-alt {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
  margin-top: var(--space-2);
  align-items: center;
}

.login-alt-toggle {
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 12px;
  text-decoration: underline;
  cursor: pointer;
  padding: 6px 8px;
}

.login-alt-toggle:hover {
  color: var(--ember);
}

.login-magic.hidden {
  display: none;
}

.login-magic {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  align-items: center;
}

.login-magic-submit {
  background: var(--bg-elev-2);
  border: 1px solid var(--hairline-strong);
  color: var(--text);
  border-radius: var(--radius-m);
  padding: 10px 18px;
  font-size: 13px;
  cursor: pointer;
}

.login-magic-status {
  font-size: 12px;
  color: var(--text-dim);
  min-height: 1.4em;
  text-align: center;
}

.login-magic-status[data-kind="ok"] {
  color: color-mix(in srgb, var(--sage) 90%, var(--text));
}

.login-magic-status[data-kind="error"] {
  color: color-mix(in srgb, var(--rose) 90%, var(--text));
}

.login-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: 500;
}

.login-field input {
  font-family: var(--font-body);
  /* Pre.133: 16px MINIMUM gegen iOS-Safari-Auto-Zoom auf Focus.
     Live-Bug Martin: Email-Input wurde beim Tap massiv reingezoomt
     ("PASSWORT" füllte halben Screen). Sub-16px triggert iOS-Auto-
     Zoom auch trotz user-scalable=no. */
  font-size: 16px;
  padding: 14px 16px;
  /* Sichtbar gegen Card-Bg — ein Schritt dunkler/heller je nach Mode */
  background: var(--bg-elev-2);
  color: var(--text);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-m);
  text-transform: none;
  letter-spacing: normal;
  transition:
    border-color 200ms var(--ease-soft),
    background 200ms var(--ease-soft),
    box-shadow 200ms var(--ease-soft);
}

.login-field input:focus {
  outline: none;
  border-color: var(--ember);
  background: var(--bg-elev);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ember) 25%, transparent);
}

/* Pre.270: Password-Feld mit Eye-Toggle. Wrap-Container wegen Inline-Button. */
.login-pw-wrap {
  position: relative;
  display: block;
}
.login-pw-wrap input {
  width: 100%;
  padding-right: 48px; /* Platz für den Eye-Button */
  box-sizing: border-box;
}
.login-pw-eye {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: var(--text-dim);
  cursor: pointer;
  transition:
    color 150ms var(--ease-soft, ease),
    background 150ms var(--ease-soft, ease);
}
.login-pw-eye:hover {
  color: var(--text);
  background: var(--bg-elev-2);
}
.login-pw-eye:active {
  background: var(--bg-elev-3, rgba(255, 255, 255, 0.12));
}
.login-pw-eye svg {
  display: block;
}

.login-submit {
  margin-top: var(--space-2);
  background: linear-gradient(180deg, var(--ember-soft) 0%, var(--ember) 100%);
  color: var(--on-color);
  border: 1px solid var(--ember);
  border-radius: var(--radius-l);
  padding: 13px 22px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: var(--shadow-mic);
  transition:
    transform 120ms var(--ease-soft),
    filter 200ms var(--ease-soft);
}

.login-submit:hover {
  filter: brightness(1.06);
}

.login-submit:active {
  transform: scale(0.97);
}

.login-submit:disabled {
  opacity: 0.6;
  cursor: progress;
}

.login-status {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-dim);
  min-height: 1.5em;
}

.login-status[data-kind="ok"] {
  color: color-mix(in srgb, var(--sage) 90%, var(--text));
}

.login-status[data-kind="error"] {
  color: color-mix(in srgb, var(--rose) 90%, var(--text));
}

/* -------------------------------------------------------------------------
   13. Dock — Mute (sekundär, links) + Primary (groß, rechts)

   Mute: nur sichtbar wenn verbunden. Toggelt das Mikrofon ohne Verbindung
         zu trennen — perfekt um nebenbei mit jemandem zu reden.
   Primary:
     - "connect"    : ruhiger Begin-Knopf (idle / disconnected)
     - "stop"       : rote Variante während Bot redet/denkt → unterbricht
     - "disconnect" : subtiler Beenden-Knopf wenn verbunden + alles ruhig
   ------------------------------------------------------------------------- */

[hidden] {
  display: none !important;
}

.dock {
  /* Pre.522: gap 14 → 17 (+3px Atemraum zwischen Buttons, User-Wunsch). */
  gap: 17px;
  /* #90: Stabile Dock-Geometrie. Anrufen & Auflegen teilen den äußersten
     rechten Slot (gleiche Order, gleiche Größe je Breakpoint) — beim Auflegen
     erscheint der Anrufen-Knopf EXAKT an der Auflegen-Position, und Push
     bleibt ebenfalls ortsfest. Stumm/Fokus wachsen nach links weg. */
  /* Pre.828 (#98/#99): linke Gruppe (Beleg/Stumm/Fokus) sitzt LINKS,
     Sprechen+Anrufen bleiben rechts verankert (margin-auto-Trenner) —
     der #90-Slot von Anrufen/Auflegen ganz rechts bleibt exakt erhalten,
     aber nichts drängt sich mehr zusammen. */
  justify-content: flex-start;
  /* Pre.833 (#105/#108/#109): Hintergrund-Block VOLLE Breite, die Knöpfe
     zentriert auf Inhaltsbreite — die width-Variante schnitt den weißen
     Block ab. */
  padding-inline: max(16px, calc((100% - var(--shell-max, 1200px)) / 2));
}
/* #134: Ab Tablet/Desktop die Fußzeilen-Knöpfe als kompakte, ZENTRIERTE
   Gruppe — vorher spreizte der margin-auto-Trenner sie über die ganze
   (bis 1200px) Breite = „zu weit auseinander". Der Hintergrund bleibt voll
   breit (das ist die .dock selbst). Mobile unverändert: dort hält der
   margin-auto den Anruf-/Auflegen-Knopf am rechten Daumen-Rand. */
/* Pre.829: Anker je Modus — im Chat trennt PTT (sichtbar), im Anruf ist
   PTT versteckt, dann trennt der Stumm-Knopf? NEIN: links bleiben Beleg/
   Stumm/Fokus, rechts verankert AUFLEGEN. So springt beim Moduswechsel
   nichts mehr (Martins Record/Auflegen-Sprung). */
.dock[data-mode="chat"] .dock-btn--ptt {
  margin-left: auto;
}
.dock[data-mode="voice"] .dock-btn--hangup {
  margin-left: auto;
}
/* #134 (pre.854): Ab Tablet/Desktop die Fußzeilen-Knöpfe als kompakte,
   ZENTRIERTE Gruppe — MUSS NACH den margin-auto-Regeln oben stehen, sonst
   gewinnen die per Source-Order (gleiche Spezifität) und die Knöpfe bleiben
   außen (pre.853-Fehler). Hintergrund bleibt voll breit; Mobile unverändert
   (margin-auto = Anruf am Daumen-Rand). */
@media (min-width: 700px) {
  .dock {
    justify-content: center;
    padding-inline: 16px;
  }
  .dock[data-mode="chat"] .dock-btn--ptt,
  .dock[data-mode="voice"] .dock-btn--hangup {
    margin-left: 0;
  }
}
.dock-btn--chat {
  order: 0;
}
.dock-btn--receipt {
  order: 1;
}
.dock-btn--mute {
  order: 2;
}
.dock-btn--focus {
  order: 3;
}
.dock-btn--ptt {
  order: 4;
}
.dock-btn--call,
.dock-btn--hangup {
  order: 5;
}

/* --- Dock-Buttons (iOS-Telefonie-Stil: runde SVG-Icon-Buttons) -------- */

.dock-btn {
  /* Pre.449: 60→72. Pre.450: 72→88. Pre.522: 88→76. Pre.529: 76→68 —
   * einheitliche Größe für PTT/Mute/Focus/Hangup/Beleg (Anrufen behält
   * eine Spur mehr siehe --call-Variante). */
  --size: 68px;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  border: 1px solid var(--hairline-strong);
  /* Pre.515 Editorial: paper-soft für Buttons (etwas tiefer als dock-bg). */
  background: var(--paper-soft, var(--bg-elev));
  color: var(--ink, var(--text));
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    transform 120ms var(--ease-soft),
    background 240ms var(--ease-soft),
    border-color 240ms var(--ease-soft),
    color 240ms var(--ease-soft),
    box-shadow 240ms var(--ease-soft);
  -webkit-tap-highlight-color: transparent;
  position: relative;
  /* Pre.449: extra margin-bottom für Label drunter */
  margin-bottom: 16px;
}
.dock-btn svg {
  /* Pre.453: 36→30. Pre.522: 30→26. Pre.529: 26→24 (passt zu 68px Buttons). */
  width: 24px;
  height: 24px;
}

/* Pre.449: Mini-Label unter jedem Dock-Button. Absolut positioniert,
 * unterhalb des runden Buttons. User-Wunsch 2026-05-22 — Icons waren
 * unklar (Telefon/Mikro/Kopfhörer). */
.dock-btn-label {
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  line-height: 1;
  font-family: var(--font-body);
  white-space: nowrap;
  text-align: center;
  pointer-events: none;
}

.dock-btn:hover {
  border-color: color-mix(in srgb, var(--ember) 35%, var(--hairline-strong));
}

.dock-btn:active {
  transform: scale(0.94);
}

.dock-btn[hidden] {
  display: none;
}

/* Connect — der Hauptknopf, ember Telefonhörer mit sanftem Pulse */
/* Pre.526: Beleg-Erfassung als Plugin (Superuser-only). Pre.529: jetzt
   gleich groß wie PTT (68px) für sauberes Alignment in der Dock-Reihe
   (User-Wunsch: „Push und Beleg gleich groß"). Optisch durch dezenten
   Background als Quick-Plugin erkennbar, nicht durch Größenunterschied. */
.dock-btn--receipt {
  /* Erbt --size: 68px vom Default. Kein Override mehr. */
  background: var(--paper-soft, var(--bg-elev));
  border: 1px solid var(--hairline-strong);
  color: var(--ink-soft, var(--text-dim));
}
.dock-btn--receipt svg {
  width: 24px;
  height: 24px;
}
.dock-btn--receipt:hover {
  color: var(--accent, var(--ember));
  border-color: color-mix(in srgb, var(--accent) 40%, var(--hairline-strong));
}

.dock-btn--call {
  /* Pre.515 Editorial: solider Ember statt gradient (ruhigere Anmutung).
     Innerer Highlight via radial-gradient (subtil).
     Pre.522: 100→86. Pre.529: 86→76 — eine Spur kleiner damit oben
     mehr Atemraum entsteht (User-Wunsch). Bleibt der größte Button
     im Dock (76 vs 68 für die anderen) als visueller Akzent. */
  --size: 76px;
  background: var(--accent, var(--ember));
  border-color: var(--accent, var(--ember));
  color: var(--on-color);
  box-shadow:
    0 4px 14px color-mix(in srgb, var(--ember) 32%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  position: relative;
  animation: callPulse 2.4s var(--ease-quiet) infinite;
}
.dock-btn--call::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 35%,
    rgba(255, 255, 255, 0.18),
    transparent 60%
  );
  pointer-events: none;
}

.dock-btn--call:hover {
  filter: brightness(1.06);
}

@keyframes callPulse {
  0%,
  100% {
    box-shadow:
      0 8px 22px color-mix(in srgb, var(--ember) 35%, transparent),
      0 0 0 0 color-mix(in srgb, var(--ember) 0%, transparent),
      inset 0 1px 0 rgba(255, 255, 255, 0.18);
  }
  50% {
    box-shadow:
      0 8px 22px color-mix(in srgb, var(--ember) 35%, transparent),
      0 0 0 8px color-mix(in srgb, var(--ember) 16%, transparent),
      inset 0 1px 0 rgba(255, 255, 255, 0.18);
  }
}

/* Pre.144: Push-to-Talk — sage-grün, kleiner als Call-Btn. Sichtbar nur
 * wenn KEIN Voice-Call läuft (parallel zum Connect-Btn). Aufnahme-Pulse
 * via .is-recording (re-uses micRecordingPulse weiter unten). */
.dock-btn--ptt {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--sage) 22%, var(--bg-elev)),
    color-mix(in srgb, var(--sage) 12%, var(--bg-elev))
  );
  border-color: color-mix(in srgb, var(--sage) 55%, transparent);
  color: color-mix(in srgb, var(--sage) 90%, var(--text));
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

.dock-btn--ptt:hover {
  filter: brightness(1.06);
}

.dock-btn--ptt:disabled {
  opacity: 0.55;
  cursor: progress;
}

/* Pre.461: Push-to-Hold State während Recording — sage Pulse-Animation
 * + größerer Indikator dass User gerade aufnimmt. */
.dock-btn--ptt.is-recording {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--sage) 60%, transparent),
    color-mix(in srgb, var(--sage) 38%, transparent)
  );
  border-color: var(--sage);
  color: #fff;
  transform: scale(1.08);
  animation: ptt-hold-pulse 1.2s ease-in-out infinite;
}
@keyframes ptt-hold-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--sage) 35%, transparent);
  }
  50% {
    box-shadow: 0 0 0 12px color-mix(in srgb, var(--sage) 0%, transparent);
  }
}

/* Pre.461: Slide-to-Cancel — User hat hochgewischt > 50px → rot blinkend,
 * Loslassen bricht ab statt zu senden. */
.dock-btn--ptt.is-canceling {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--error) 60%, transparent),
    color-mix(in srgb, var(--error) 38%, transparent)
  );
  border-color: var(--error);
  color: #fff;
  animation: ptt-cancel-pulse 0.6s ease-in-out infinite;
}
@keyframes ptt-cancel-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.65;
  }
}

/* Pre.145: Inline-Recording-Bubble (Telegram-Style). Erscheint als
 * spezielle user-Bubble unten im Chat während die Aufnahme läuft. */
.bubble.user.is-recording {
  display: flex;
  padding: 8px 10px;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--sage) 24%, var(--bg-elev)),
    color-mix(in srgb, var(--sage) 14%, var(--bg-elev))
  );
  border: 1px solid color-mix(in srgb, var(--sage) 50%, transparent);
}

.bubble.user.is-recording.is-error {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--rose) 24%, var(--bg-elev)),
    color-mix(in srgb, var(--rose) 14%, var(--bg-elev))
  );
  border-color: color-mix(in srgb, var(--rose) 55%, transparent);
}

.ptt-bubble {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.ptt-bubble-mic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--sage) 35%, var(--bg-elev));
  color: color-mix(in srgb, var(--sage) 95%, var(--text));
  flex-shrink: 0;
}

.ptt-bubble-mic.is-active {
  animation: pttMicPulse 1.2s var(--ease-soft) infinite;
}

@keyframes pttMicPulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--sage) 45%, transparent);
  }
  50% {
    box-shadow: 0 0 0 8px color-mix(in srgb, var(--sage) 0%, transparent);
  }
}

.is-error .ptt-bubble-mic {
  background: color-mix(in srgb, var(--rose) 30%, var(--bg-elev));
  color: color-mix(in srgb, var(--rose) 90%, var(--text));
  animation: none;
}

.ptt-bubble-meta {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ptt-bubble-timer {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text);
}

.ptt-bubble-hint {
  font-size: 0.78rem;
  opacity: 0.78;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ptt-bubble-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.ptt-bubble-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--text) 18%, transparent);
  background: var(--bg-elev);
  color: var(--text);
  cursor: pointer;
  transition: filter 120ms var(--ease-soft);
}

.ptt-bubble-btn:hover {
  filter: brightness(1.1);
}

.ptt-bubble-btn[hidden] {
  display: none;
}

.ptt-bubble-btn--cancel {
  color: color-mix(in srgb, var(--rose) 90%, var(--text));
  border-color: color-mix(in srgb, var(--rose) 40%, transparent);
}

.ptt-bubble-btn--lock {
  color: color-mix(in srgb, var(--text) 70%, transparent);
}

.ptt-bubble-btn--send,
.ptt-bubble-btn--stop {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--sage) 60%, var(--bg-elev)),
    color-mix(in srgb, var(--sage) 40%, var(--bg-elev))
  );
  border-color: color-mix(in srgb, var(--sage) 70%, transparent);
  color: #fff;
}

.ptt-bubble-btn--dismiss {
  width: auto;
  padding: 0 14px;
  font-weight: 600;
  font-size: 0.9rem;
}

.ptt-bubble-spinner {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--sage) 30%, transparent);
  border-top-color: color-mix(in srgb, var(--sage) 95%, var(--text));
  animation: pttSpinner 0.9s linear infinite;
}

.ptt-bubble-spinner[hidden] {
  display: none;
}

@keyframes pttSpinner {
  to {
    transform: rotate(360deg);
  }
}

/* Audio-Player in einer User-Bubble (PTT-Aufnahmen) */
.bubble.user.has-audio {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bubble-audio {
  width: 100%;
  max-width: 320px;
  height: 36px;
}

@media (prefers-reduced-motion: reduce) {
  .ptt-bubble-mic.is-active,
  .ptt-bubble-spinner {
    animation: none !important;
  }
}

/* Hangup — Rosé-Rot, Telefonhörer 135° (im SVG bereits gekippt) */
.dock-btn--hangup {
  /* #90: gleiche Größe wie Anrufen → identischer Kreis am identischen Ort. */
  --size: 76px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--rose) 70%, var(--ember-deep)),
    color-mix(in srgb, var(--rose) 50%, var(--ember-deep))
  );
  border-color: color-mix(in srgb, var(--rose) 65%, var(--ember-deep));
  color: #fff5f5;
  box-shadow: 0 6px 16px rgba(217, 122, 130, 0.28);
}

.dock-btn--hangup:hover {
  filter: brightness(1.08);
}

/* Mute — Mic-Icon, ember-Akzent + Strike-Through wenn aktiv (= stumm) */
.dock-btn--mute[data-active="true"] {
  background: color-mix(in srgb, var(--ember) 14%, var(--bg-elev));
  border-color: color-mix(in srgb, var(--ember) 50%, transparent);
  color: var(--ember-soft);
}

/* Pre.122: Live-Speaking-Indikator. UserStateChanged="speaking" → kurzer
 * sage-Pulse am Mic-Button. Klar als "ich höre dich grade aktiv" lesbar
 * ohne eine Geister-User-Bubble zu erzeugen. */
.dock-btn.is-recording:not([data-active="true"]) {
  border-color: color-mix(in srgb, var(--sage) 80%, transparent);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--sage) 50%, transparent);
  animation: micRecordingPulse 1.4s var(--ease-soft) infinite;
}

@keyframes micRecordingPulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--sage) 35%, transparent);
  }
  50% {
    box-shadow: 0 0 0 10px color-mix(in srgb, var(--sage) 0%, transparent);
  }
}

.dock-icon-mic-strike {
  opacity: 0;
  transition: opacity 160ms var(--ease-soft);
}

.dock-btn--mute[data-active="true"] .dock-icon-mic-strike {
  opacity: 1;
}

/* Focus — sage wenn aktiv, Atem-Animation wenn gerade auto-mutet */
.dock-btn--focus[data-active="true"] {
  background: color-mix(in srgb, var(--sage) 18%, var(--bg-elev));
  border-color: color-mix(in srgb, var(--sage) 55%, transparent);
  color: color-mix(in srgb, var(--sage) 90%, var(--text));
}

.dock-btn--focus[data-muting="true"] {
  animation: focusBreathe 2.6s var(--ease-quiet) infinite;
}

@keyframes focusBreathe {
  0%,
  100% {
    box-shadow: 0 0 0 0 transparent;
  }
  50% {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--sage) 28%, transparent);
  }
}

/* --- Topbar Meta (state + Menu-Button) -------------------------------- */

.topbar-meta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.menu-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: transparent;
  color: var(--text-soft);
  border: 1px solid var(--hairline);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    background 200ms var(--ease-soft),
    color 200ms var(--ease-soft),
    border-color 200ms var(--ease-soft);
}

.menu-btn:hover {
  background: var(--bg-elev);
  color: var(--ember);
  border-color: color-mix(in srgb, var(--ember) 35%, var(--hairline));
}

/* --- Nav-Drawer (Hamburger-Menü, Slide-In von rechts) ---------------- */

.nav-drawer[hidden] {
  display: none;
}

.nav-drawer {
  position: fixed;
  inset: 0;
  z-index: 940;
  display: flex;
  /* Pre.91: Drawer kommt jetzt von LINKS (intuitiver, da Hamburger oben rechts
     ist aber Inhalt links erwartet wird im Web). */
  justify-content: flex-start;
  animation: navDrawerIn 200ms var(--ease-soft);
}

@keyframes navDrawerIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.nav-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--bg-deep) 60%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.nav-drawer-panel {
  position: relative;
  width: min(86vw, 280px);
  background: var(--bg-elev);
  /* Border + Shadow auf der RECHTEN Seite, weil Drawer von links kommt. */
  border-right: 1px solid var(--hairline-strong);
  /* Pre.127: padding-top respektiert safe-area-inset-top damit der
     Drawer-Header (MENU + Close-Btn) NICHT in die iOS-Statusbar (Notch
     + Uhrzeit) reinragt. Live-Bug Martin: "06:46 ⓘ" überlagerte
     "MENU"-Title. */
  padding: calc(var(--space-4) + env(safe-area-inset-top)) var(--space-3)
    calc(var(--space-4) + env(safe-area-inset-bottom)) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  box-shadow: 16px 0 40px rgba(0, 0, 0, 0.18);
  animation: navDrawerSlide 280ms var(--ease-soft);
}

@keyframes navDrawerSlide {
  from {
    transform: translateX(-20%);
  }
  to {
    transform: translateX(0);
  }
}

.nav-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--hairline);
}

/* Pre.746: Menü-Toggle (Hamburger) IN der Sidebar. Mobile: verborgen
   (Topbar-Hamburger übernimmt). Desktop: sichtbar, klappt voll <-> Icon-Rail. */
.nav-drawer-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 10px;
  color: var(--text-dim);
  cursor: pointer;
  flex-shrink: 0;
  transition:
    background 180ms,
    color 180ms;
}
.nav-drawer-toggle:hover {
  background: color-mix(in srgb, var(--text) 8%, transparent);
  color: var(--text);
}

.nav-drawer-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 0;
}

/* Pre.653: nav-drawer-list + nav-item waren DOPPELT definiert (Basis hier +
   Material-3-Pill-Override später mit `!important` auf allem). Zu EINER sauberen
   Definition zusammengeführt, ohne `!important`. */
.nav-drawer-list {
  list-style: none;
  margin: 0;
  padding: 0 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  /* Pre.679: Menü-Liste scrollt jetzt intern, statt den Footer (mit der
     Theme-Auswahl) auf kleinen Handys unten rauszuschieben. Header bleibt oben
     fix, Footer unten fix — die Liste nimmt den Platz dazwischen und scrollt.
     `min-height: 0` ist Pflicht, sonst darf das flex-Child nicht schrumpfen
     und scrollt nie. */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* nav-item: Material-3 Pill-Style — 48px Touch-Target, voller Pill-Radius. */
.nav-item {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-height: 48px;
  padding: 0 16px;
  background: transparent;
  border: none;
  border-radius: 28px;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: 0.005em;
  transition:
    background 220ms cubic-bezier(0.2, 0, 0, 1),
    color 220ms cubic-bezier(0.2, 0, 0, 1);
}

.nav-item:hover {
  background: color-mix(in srgb, var(--text) 6%, transparent);
}

.nav-item[aria-selected="true"] {
  background: color-mix(in srgb, var(--ember) 16%, transparent);
  color: color-mix(in srgb, var(--ember) 80%, var(--text));
  font-weight: 600;
}

.nav-item svg {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  color: currentColor;
  opacity: 0.85;
}

.nav-item[aria-selected="true"] svg {
  color: color-mix(in srgb, var(--ember) 90%, var(--text));
  opacity: 1;
}

/* Pre.648: Menü-Gruppen — kleine, dezente Themen-Überschriften, plus eine
   gedämpfte Variante für selten gebrauchte Punkte (Archiv, Beispiele, Nutzer),
   damit das Menü nach Wichtigkeit sortiert wirkt und nicht überladen. */
.nav-section {
  padding: 13px 14px 3px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-soft);
  opacity: 0.66;
  pointer-events: none;
  user-select: none;
}
.nav-section:first-child {
  padding-top: 2px;
}
.nav-item--muted {
  /* pre.899 (Martin): nicht mehr gedämpft — alle Sidebar-Items gleich
     (schwarz, volle Deckkraft), konsistent mit den übrigen Einträgen. */
  opacity: 1;
}
.nav-item--muted:hover {
  opacity: 1;
}

/* Drawer-Footer mit User-Info + Logout */
.nav-drawer-foot {
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.nav-user {
  padding: 4px 14px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-user-label {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.nav-user-name {
  font-size: 13px;
  color: var(--text-soft);
  word-break: break-all;
}

.nav-item--logout {
  color: color-mix(in srgb, var(--rose) 75%, var(--text));
}

.nav-item--logout:hover {
  background: color-mix(in srgb, var(--rose) 12%, var(--bg-elev-2));
  color: color-mix(in srgb, var(--rose) 90%, var(--text));
}

/* Desktop-Drawer (pre.91): permanent als linke Sidebar. App-Content
   shiftet via padding-left auf #app. Kein Backdrop, kein Overlay-Verhalten,
   keine Animation — die Sidebar gehört zum Layout. */
@media (min-width: 768px) {
  .nav-drawer.is-desktop {
    pointer-events: none;
    background: transparent;
  }
  .nav-drawer.is-desktop .nav-drawer-backdrop {
    display: none;
  }
  .nav-drawer.is-desktop .nav-drawer-panel {
    pointer-events: auto;
    width: var(--sidebar-w);
    border-right: 1px solid var(--hairline);
    box-shadow: 1px 0 0 0 transparent;
    animation: none;
    /* Pre.745: sanftes Ein-/Ausklappen voll <-> Icon-Rail. */
    transition: width 220ms var(--ease-soft);
  }
  /* Pre.348: padding-left auf 320px erhöht — das matched die echte
   * Panel-Breite (Pre.289 setzte .nav-drawer-panel auf min(85vw, 320px)
   * mit !important, aber #app blieb auf 240px → 80px Überlappung). */
  body.drawer-open #app {
    padding-left: var(--sidebar-w);
  }
  /* Pre.745: Eingeklapptes Menü = schmale Icon-Leiste (claude.ai-Stil) — die
     Icons bleiben links, Labels/Gruppen/Kopf/Fuß werden ausgeblendet, der
     Content rückt auf --rail-w. NUR Desktop (Mobile bleibt Off-Canvas). */
  body.nav-rail .nav-drawer-panel {
    width: var(--rail-w) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: hidden;
  }
  body.nav-rail #app {
    padding-left: var(--rail-w);
  }
  body.nav-rail .nav-item {
    justify-content: center;
    gap: 0;
    padding-left: 0;
    padding-right: 0;
  }
  body.nav-rail .nav-item > span,
  body.nav-rail .nav-section,
  body.nav-rail .nav-drawer-title,
  body.nav-rail .nav-drawer-foot {
    display: none;
  }
  /* Kopf bleibt im Rail sichtbar — aber nur der zentrierte Toggle (Titel weg). */
  body.nav-rail .nav-drawer-head {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
  }
  /* Pre.746: Auf Desktop wandert der Hamburger IN die Sidebar (gehört zum Menü).
     Topbar-Hamburger + das mobile Schließen-X entfallen hier. */
  .nav-drawer-toggle {
    display: inline-flex;
  }
  #menu-btn {
    display: none;
  }
  .nav-drawer.is-desktop .nav-drawer-head .close-btn {
    display: none;
  }
  /* Ticket #157: Vollseiten-Module (Human Design, Essenz, Mein Leben,
     Rechnungen — alle tragen .hd-overlay bzw. .book-overlay) sind
     position:fixed;inset:0 und überdeckten im Desktop die permanente
     Sidebar (z-index 940 < 1300) → das Menü ging verloren. Auf Desktop
     rücken die Overlays jetzt um die Sidebar-Breite nach rechts, statt
     sie zu verdecken. Mobile bleibt unberührt (dort ist die Sidebar
     Off-Canvas und body.drawer-open/.nav-rail sind nicht gesetzt). Die
     left-Transition matched die padding-left-Transition auf #app. */
  /* #157: Alle Vollseiten-Module (auch Archiv, Tickets, Nutzer, Material,
     Changelog) ruecken um die Sidebar-Breite, damit das Menue sichtbar
     bleibt. */
  body.drawer-open .hd-overlay,
  body.drawer-open .book-overlay,
  body.drawer-open .archive-overlay,
  body.drawer-open .tickets-backdrop,
  body.drawer-open .usr-overlay,
  body.drawer-open .material-sheet,
  body.drawer-open .changelog-sheet,
  body.drawer-open .project-sheet-overlay--full {
    left: var(--sidebar-w);
    transition: left 220ms var(--ease-soft);
  }
  body.nav-rail .hd-overlay,
  body.nav-rail .book-overlay,
  body.nav-rail .archive-overlay,
  body.nav-rail .tickets-backdrop,
  body.nav-rail .usr-overlay,
  body.nav-rail .material-sheet,
  body.nav-rail .changelog-sheet,
  body.nav-rail .project-sheet-overlay--full {
    left: var(--rail-w);
  }
}

/* --- Bottom-Sheet (Plus-Menü) ----------------------------------------- */

.sheet[hidden] {
  display: none;
}

.sheet {
  position: fixed;
  inset: 0;
  z-index: 950;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  animation: sheetIn 220ms var(--ease-soft);
}

@keyframes sheetIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.sheet-backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--bg-deep) 65%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.sheet-card {
  position: relative;
  background: var(--bg-elev);
  border-top-left-radius: var(--radius-xl);
  border-top-right-radius: var(--radius-xl);
  padding: 14px var(--space-4)
    calc(var(--space-4) + env(safe-area-inset-bottom));
  border: 1px solid var(--hairline-strong);
  border-bottom: none;
  box-shadow: 0 -16px 40px rgba(0, 0, 0, 0.18);
  max-width: 540px;
  margin: 0 auto;
  width: 100%;
  animation: sheetSlideUp 280ms var(--ease-soft);
}

@keyframes sheetSlideUp {
  from {
    transform: translateY(20%);
  }
  to {
    transform: translateY(0);
  }
}

/* Pre.792 (#62): Desktop — Sheet als zentriertes Modal (mobil unverändert
 * Bottom-Sheet). Generischer Fundament-Modifier, Tokens-only. */
@media (min-width: 720px) {
  .sheet--modal {
    justify-content: center;
    padding: var(--space-4);
  }
  .sheet--modal .sheet-card {
    border-radius: var(--radius-xl);
    border-bottom: 1px solid var(--hairline-strong);
    max-width: 720px;
    max-height: calc(100dvh - 64px);
    overflow-y: auto;
  }
  .sheet--modal .sheet-handle {
    display: none;
  }

  /* #157: Material- und Changelog-Sheet werden auf dem Desktop Vollseite
     (wie .hd-overlay/.hd-sheet) statt zentriertes Modal — der mobile
     Bottom-Sheet (.sheet-Basis ausserhalb dieses @media) bleibt unberuehrt.
     Scoped auf die zwei Sheet-Klassen, damit der generische .sheet--modal-
     Modifier fuer kuenftige Sheets unveraendert bleibt. */
  .material-sheet.sheet--modal,
  .changelog-sheet.sheet--modal {
    justify-content: stretch;
    align-items: stretch;
    padding: 0;
    background: var(--bg);
  }
  /* Kein dunkler Backdrop/Blur mehr — die Seite ist „eingehaengt“. */
  .material-sheet.sheet--modal .sheet-backdrop,
  .changelog-sheet.sheet--modal .sheet-backdrop {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .material-sheet.sheet--modal .sheet-card,
  .changelog-sheet.sheet--modal .sheet-card {
    width: 100%;
    height: 100dvh;
    max-width: 100%;
    max-height: 100dvh;
    margin: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
    overflow-y: auto;
    background: var(--bg);
  }
  /* Lesbare Maximalbreite mittig fuer den eigentlichen Inhalt (wie der
     HD-/Projekt-Detail-Body). */
  .material-sheet.sheet--modal .material-card,
  .changelog-sheet.sheet--modal .changelog-body {
    width: 100%;
    max-width: 860px;
    margin: 0 auto;
    max-height: none;
  }
}

.sheet-handle {
  width: 36px;
  height: 4px;
  border-radius: 999px;
  background: var(--hairline-strong);
  margin: 0 auto 10px;
}

.sheet-title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  margin: 0 0 var(--space-3);
  color: var(--text);
}

.sheet-actions {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sheet-action {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 12px 8px;
  background: transparent;
  border: none;
  border-radius: var(--radius-m);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: background 180ms var(--ease-soft);
}

.sheet-action:hover {
  background: var(--bg-elev-2);
}

.sheet-action:active {
  background: color-mix(in srgb, var(--ember) 14%, var(--bg-elev-2));
}

/* Pre.795 (#54): Aktions-Menü (geteiltes Modul lib/action-menu) — liegt
   über dem Projekt-Detail-Sheet (1100); danger in der Projekt-Konvention
   (--rose wie .project-action-danger). */
.sheet--menu {
  z-index: 1600;
}
.sheet--menu .sheet-card {
  max-width: 420px;
}
.sheet-action--danger {
  color: var(--rose);
}

/* Pre.804 (#72a): „Zu Projekt"-Button auf Mediathek-Tiles (neben Share). */
.library-tile-project {
  right: 40px;
}

/* Pre.804: Options-Picker (selectSheet) + Medien-Liste im Projekt. */
.sheet-dialog-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 50vh;
  overflow-y: auto;
}
.sheet-dialog-option {
  justify-content: flex-start;
  text-align: left;
}
.project-media-list {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.project-media-item {
  display: flex;
  align-items: center;
  gap: 12px;
}
.project-media-item img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
}
.project-media-item .project-file-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Task 9: „Überblick"-Tab — lebendes Projekt-Dokument + „Aktualisieren". */
.project-overview-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}
.project-overview-meta {
  font-size: 13px;
  color: var(--text-dim);
}
.project-overview-body {
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.7;
  color: var(--text);
}

/* Task 9: „Medien"-Tab — Galerie der verknüpften Uploads. Grid-Variante des
   geteilten .project-media-item (im Dateien-Tab eine schmale Zeile). */
.project-media-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--space-2);
}
.project-media-grid .project-media-item {
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-1);
}
.project-media-grid .project-media-item img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-s);
  object-fit: cover;
}
.project-media-grid .project-media-item .project-file-title {
  white-space: normal;
}

/* #182 Phase 2: Projekt-„Timeline" — datierte Meilensteine. */
.project-timeline {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.project-timeline-event {
  padding-left: var(--space-3);
  border-left: 2px solid var(--hairline);
}
.project-timeline-date {
  font-size: 12px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.project-timeline-title {
  font-weight: 600;
}
.project-timeline-desc {
  font-size: 13px;
  color: var(--text-soft);
  margin: 2px 0 0;
}

/* Pre.796 (#54 A4): Bestätigungs-/Eingabe-Dialoge (sheet-ui confirmSheet/
   promptSheet) — ersetzen window.confirm/prompt. */
.sheet-dialog-text {
  margin: 0 0 var(--space-3);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-soft);
}
.sheet-dialog-input {
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--radius-m);
  border: 1px solid var(--hairline-strong);
  background: var(--bg-elev-2);
  color: var(--text);
  font-size: 15px;
  margin-bottom: var(--space-3);
}
.sheet-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}

.sheet-action-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-m);
  background: var(--bg-elev-2);
  color: var(--ember);
  display: flex;
  align-items: center;
  justify-content: center;
}

.sheet-action-label {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.sheet-action-label strong {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: 0.005em;
}

.sheet-action-label span {
  font-size: 12px;
  color: var(--text-dim);
}

/* „Material einspeisen"-Sheet (Pre.671) — nutzt das .sheet/.btn-Fundament,
   nur Tokens, keine Hardcode-Farben. */
.material-card {
  max-height: 86vh;
  overflow-y: auto;
}
.material-hint {
  margin: 0 0 var(--space-4);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-soft);
}
.material-source {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: var(--surface-soft);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-l);
  padding: var(--space-4);
}
.material-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.material-attach {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.material-attach-name {
  margin: 0;
  font-size: 13px;
  color: var(--text);
}
.material-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 96px;
  padding: var(--space-3) var(--space-4);
  text-align: center;
  font-family: var(--font-body);
  color: var(--text-soft);
  background: var(--bg-elev);
  border: 1.5px dashed var(--hairline-strong);
  border-radius: var(--radius-m);
  cursor: pointer;
  transition:
    border-color 180ms var(--ease-soft),
    background 180ms var(--ease-soft);
}
.material-drop:hover,
.material-drop:focus-visible,
.material-drop--over {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--hairline-strong));
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-elev));
  outline: none;
}
.material-drop--has-file {
  border-style: solid;
  border-color: color-mix(in srgb, var(--accent) 45%, var(--hairline-strong));
  background: color-mix(in srgb, var(--accent) 6%, var(--bg-elev));
}
.material-drop--busy {
  opacity: 0.6;
  cursor: progress;
}
.material-drop-icon {
  font-size: 26px;
}
.material-drop-text {
  font-size: 14px;
  color: var(--text);
}
.material-drop-hint {
  font-size: 12px;
  color: var(--text-dim);
}
.material-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12.5px;
  color: var(--text-dim);
}
.material-type,
.material-title,
.material-text {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--text);
  background: var(--bg-elev);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-m);
  padding: 10px 12px;
  outline: none;
}
.material-type:focus,
.material-title:focus,
.material-text:focus {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--hairline));
}
.material-text {
  min-height: 120px;
  max-height: 280px;
  resize: vertical;
  overflow-y: auto;
  line-height: 1.5;
}
.material-ai-note,
.material-ref-note {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-soft);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border-radius: var(--radius-s);
  padding: 8px 10px;
}
.material-status {
  margin: var(--space-3) 0 0;
  min-height: 1.2em;
  font-size: 13px;
  color: var(--text-soft);
}
.material-status--error {
  color: var(--danger);
}

/* Alltags-Recorder-Knopf (nur native Hülle, env-gated in alltag-view.ts).
   Nutzt Tokens + bestehende dotPulse-Keyframe (DRY) — keine Hardcode-Farben. */
.alltag-recorder {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
}
.alltag-rec-btn {
  flex: 1 1 auto;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--on-accent, #fff);
  background: var(--accent);
  border: none;
  border-radius: var(--radius-l);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  transition: background 180ms var(--ease-soft);
}
.alltag-rec-btn:disabled {
  opacity: 0.6;
  cursor: progress;
}
.alltag-recorder.is-recording .alltag-rec-btn {
  background: var(--danger);
}
.alltag-rec-pause {
  flex: 0 0 auto;
  font-size: 16px;
  color: var(--text);
  background: var(--bg-elev);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-m);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
}
.alltag-rec-status {
  flex: 0 0 auto;
  font-size: 13px;
  color: var(--text-soft);
}
.alltag-recorder.is-recording .alltag-rec-status {
  color: var(--danger);
  animation: dotPulse 1.4s var(--ease-quiet) infinite;
}
/* Pre.1017: Sofort-Aufnahme-Overlay (vom Widget-Deep-Link) — laufende Uhr +
   Stopp. Tokens-only, dotPulse wiederverwendet (DRY). */
.alltag-rec-overlay-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  text-align: center;
}
.alltag-rec-overlay-status {
  margin: 0;
  font-size: 14px;
  color: var(--text-soft);
}
.alltag-rec-overlay.is-recording .alltag-rec-overlay-status {
  color: var(--danger);
  animation: dotPulse 1.4s var(--ease-quiet) infinite;
}
.alltag-rec-time {
  font-family: var(--font-body);
  font-size: 48px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  letter-spacing: 0.02em;
}
.alltag-rec-stop {
  width: 100%;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  color: var(--on-accent, #fff);
  background: var(--danger);
  border: none;
  border-radius: var(--radius-l);
  padding: var(--space-4);
  cursor: pointer;
  transition: opacity 180ms var(--ease-soft);
}
.alltag-rec-stop:disabled {
  opacity: 0.6;
  cursor: progress;
}
.alltag-rec-openapp {
  width: 100%;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  background: var(--bg-elev);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-l);
  padding: var(--space-3);
  cursor: pointer;
}
/* Pre.1021: Call-bewusster „Neue Version"-Knopf — schwebt oben, erscheint nur
   wenn kein Anruf läuft. Tokens-only. */
.app-update-pill {
  position: fixed;
  top: calc(env(safe-area-inset-top) + var(--space-3));
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--on-accent, #fff);
  background: var(--accent);
  border: none;
  border-radius: 999px;
  padding: var(--space-2) var(--space-4);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  cursor: pointer;
}
.app-update-pill[hidden] {
  display: none;
}
/* „Mein Alltag" — kompakte Liste (pre.1003) */
.alltag-rec-pause {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.alltag-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.alltag-day {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.alltag-day-label {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-soft);
}
.alltag-rollup {
  background: var(--bg-elev);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-m);
  padding: var(--space-2) var(--space-3);
}
.alltag-rollup-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}
.alltag-rollup-heading {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.alltag-rollup-regen {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent, var(--text-soft));
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-s, 8px);
  padding: 3px 8px;
  cursor: pointer;
}
.alltag-rollup-regen:hover {
  background: color-mix(in srgb, var(--accent, var(--text-soft)) 10%, transparent);
}
.alltag-rollup-regen:disabled {
  opacity: 0.6;
  cursor: default;
}
/* „In Verarbeitung"-Karte: Aufnahme hochgeladen, Transkript/Digest läuft noch. */
.alltag-processing {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--bg-elev);
  border: 1px solid color-mix(in srgb, var(--accent, var(--ember)) 35%, var(--hairline));
  border-radius: var(--radius-m);
}
.alltag-processing-dot {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent, var(--ember));
  animation: dotPulse 1.4s var(--ease-quiet) infinite;
}
.alltag-processing-head {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.alltag-processing-sub {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--text-soft);
}
.alltag-rollup-body {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text);
  white-space: pre-wrap;
}
.alltag-entry {
  padding: var(--space-2) 0;
  border-top: 1px solid var(--hairline);
}
.alltag-entry:first-of-type {
  border-top: none;
}
.alltag-entry-head {
  margin-bottom: var(--space-1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.alltag-entry-del {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  color: var(--text-soft);
  background: transparent;
  border: none;
  border-radius: var(--radius-s, 8px);
  cursor: pointer;
}
.alltag-entry-del:hover {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 10%, transparent);
}
.alltag-entry-time {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-soft);
}
.alltag-summary {
  margin: 0 0 var(--space-1);
  font-size: 14px;
  line-height: 1.4;
  color: var(--text);
}
.alltag-todos {
  margin: var(--space-1) 0;
  padding-left: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.alltag-todo-item {
  font-size: 13px;
  line-height: 1.35;
  color: var(--text);
}
.alltag-player {
  margin: var(--space-2) 0;
}
.alltag-transcript-details {
  margin-top: var(--space-1);
}
.alltag-transcript-toggle {
  font-size: 12px;
  color: var(--accent);
  cursor: pointer;
  list-style: none;
}
.alltag-transcript-toggle::-webkit-details-marker {
  display: none;
}
.alltag-transcript-body {
  margin: var(--space-1) 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-soft);
  white-space: pre-wrap;
  max-height: 40vh;
  overflow-y: auto;
}
.material-list-title {
  margin: var(--space-5) 0 var(--space-2);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
}
.material-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.material-empty {
  font-size: 13px;
  color: var(--text-dim);
  padding: var(--space-2) 0;
}
.material-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  background: var(--bg-elev);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-m);
  padding: 10px 12px;
}
.material-item-head {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.material-item-meta {
  font-size: 12px;
  color: var(--text-dim);
}
.material-item-actions {
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
}
.material-item-del {
  color: var(--danger);
}

.sheet-cancel {
  margin-top: var(--space-3);
  width: 100%;
  padding: 12px;
  background: var(--bg-elev-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-l);
  color: var(--text-soft);
  font-size: 13px;
  cursor: pointer;
  transition: background 180ms var(--ease-soft);
}

.sheet-cancel:hover {
  background: var(--bg-elev);
}

/* --- Lightbox (Mediathek-Bilder vergrößert) --------------------------- */

.lightbox[hidden] {
  display: none;
}

.lightbox {
  position: fixed;
  inset: 0;
  /* Pre.579: über den Sheet-Overlays (.hd-/.book-/.usr-overlay = 1300), damit
     der Klick-Zoom (z.B. Human-Design-Chart aus dem Sheet) DAVOR erscheint. */
  z-index: 1600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}

.lightbox-backdrop {
  position: absolute;
  inset: 0;
  /* Pre.158: Hintergrund dunkler/opaker für besseren Bildkontrast.
   * Vorher 88% bg-deep mit blur — Bilder waren auf dunkleren Photos
   * schwer abgrenzbar. */
  background: rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.lightbox-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  /* Pre.158: Größerer Container damit Bilder besser zur Geltung kommen.
     Pre.602: am Laptop mehr Platz nutzen → breiter + höher. */
  max-width: min(98vw, 1700px);
  max-height: 97vh;
  width: 100%;
}

.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--bg-deep) 60%, transparent);
  color: #fff;
  border: 1px solid color-mix(in srgb, #fff 15%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition:
    background 200ms var(--ease-soft),
    transform 200ms var(--ease-soft);
}

.lightbox-nav:hover {
  background: color-mix(in srgb, var(--ember) 50%, var(--bg-deep));
}

.lightbox-nav:active {
  transform: translateY(-50%) scale(0.92);
}

.lightbox-nav--prev {
  left: 16px;
}

.lightbox-nav--next {
  right: 16px;
}

.lightbox-meta {
  color: color-mix(in srgb, #fff 88%, transparent);
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
  max-width: 600px;
  padding: 0 var(--space-3);
}

.lightbox-counter {
  color: color-mix(in srgb, #fff 60%, transparent);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.lightbox-card img {
  /* Pre.158: Bild größer + Cursor zum Zoomen. Klick-Toggle in JS.
     Pre.602: höher (Laptop hat Platz) → Bodygraph größer beim Vergrößern. */
  max-width: 100%;
  /* Pre.794: Platz fuer Meta + Teilen/Anhaengen-Leiste reservieren —
     95vh verdraengte die Buttons aus dem Fenster (kein Scroll). */
  max-height: calc(97vh - 130px);
  border-radius: var(--radius-m);
  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.6);
  object-fit: contain;
  background: #000;
  cursor: zoom-in;
  transition: transform 240ms var(--ease-soft);
  user-select: none;
  -webkit-user-select: none;
  /* Pre.1039: Browser-eigenes Pinch/Scroll abschalten — der Zoom/Pan läuft
     komplett über die JS-Gesten-Engine (sonst zoomt die Seite statt das Bild). */
  touch-action: none;
  transform-origin: center center;
  will-change: transform;
}

/* Pre.1039: Transform steuert jetzt JS (Pinch/Pan) — die Klasse zeigt nur noch
   den Zoom-out-Cursor. Die Layout-Größe (max-width/height) bleibt bewusst
   die kontenierte Box: der scale()-Transform vergrößert NUR visuell (Overflow),
   ändert clientWidth NICHT → die Pan-Grenzen (clampPan) bleiben korrekt. */
.lightbox-card img.is-zoomed {
  cursor: zoom-out;
}

.lightbox-actions {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  flex-wrap: wrap;
  /* Pre.1039: untere Safe-Area, damit die Knöpfe (inkl. Schließen) nicht unter
     dem Home-Indicator kleben — daumengerecht in der nativen App. */
  padding-bottom: env(safe-area-inset-bottom);
}

.lightbox-btn {
  background: linear-gradient(180deg, var(--ember-soft) 0%, var(--ember) 100%);
  color: var(--on-color);
  border: 1px solid var(--ember);
  border-radius: var(--radius-l);
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: filter 200ms var(--ease-soft);
}

.lightbox-btn:hover {
  filter: brightness(1.06);
}

.lightbox-btn--ghost {
  background: var(--bg-elev);
  color: var(--text-soft);
  border-color: var(--hairline-strong);
}

/* Pre.158: Teilen-Button rechts-oben in jedem Library-Tile, hover-only.
 * Auf Touch-Geräten dauerhaft sichtbar damit man ihn finden kann. */
.library-tile-share,
.library-tile-project {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  opacity: 0;
  transition:
    opacity 200ms var(--ease-soft),
    background 200ms var(--ease-soft);
}

.library-tile:hover .library-tile-share,
.library-tile:hover .library-tile-project,
.library-tile-share:focus-visible,
.library-tile-project:focus-visible {
  opacity: 0.95;
}

.library-tile-share:hover,
.library-tile-project:hover {
  background: rgba(0, 0, 0, 0.78);
  border-color: var(--sage);
}

@media (hover: none) {
  /* Touch-Geräte: dauerhaft sichtbar */
  .library-tile-share,
  .library-tile-project {
    opacity: 0.85;
  }
}

/* Bei Non-Image-Tiles (PDF/Audio/Andere) helleres Background damit der
 * Button auf der hellen Karte lesbar bleibt. */
.library-tile[data-type="pdf"] .library-tile-project,
.library-tile[data-type="audio"] .library-tile-project,
.library-tile[data-type="other"] .library-tile-project,
.library-tile[data-type="pdf"] .library-tile-share,
.library-tile[data-type="audio"] .library-tile-share,
.library-tile[data-type="other"] .library-tile-share {
  background: color-mix(in srgb, var(--text) 70%, transparent);
  border-color: color-mix(in srgb, var(--text) 30%, transparent);
}

/* Pre.316: Delete-Button (links oben) — gleicher Look wie Share-Button
 * aber linkseitig + rote Hover-Akzent. */
.library-tile-delete {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  opacity: 0;
  transition:
    opacity 200ms var(--ease-soft),
    background 200ms var(--ease-soft),
    border-color 200ms var(--ease-soft);
}
.library-tile:hover .library-tile-delete,
.library-tile-delete:focus-visible {
  opacity: 0.95;
}
.library-tile-delete:hover {
  background: color-mix(in srgb, var(--error) 80%, black);
  border-color: var(--error);
}
@media (hover: none) {
  .library-tile-delete {
    opacity: 0.85;
  }
}
.library-tile[data-type="pdf"] .library-tile-delete,
.library-tile[data-type="audio"] .library-tile-delete,
.library-tile[data-type="other"] .library-tile-delete {
  background: color-mix(in srgb, var(--text) 70%, transparent);
  border-color: color-mix(in srgb, var(--text) 30%, transparent);
}

/* --- Library-Tab (Mediathek mit Header, Filter, Suche, Datums-Gruppen) - */

.library-view {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  /* Pre.316: Höhe = parent (.view), damit body scrollen kann. Vorher
   * konnte die Mediathek im PWA-Modus nicht scrollen — Liste lief
   * unter den Viewport-Rand. */
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.library-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex-shrink: 0;
}

.library-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.library-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.01em;
  margin: 0;
  color: var(--text);
}

.library-refresh {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;
  color: var(--text-dim);
  border: 1px solid var(--hairline);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 200ms var(--ease-soft);
}

.library-refresh:hover {
  color: var(--ember);
  border-color: color-mix(in srgb, var(--ember) 35%, var(--hairline));
}

.library-search {
  position: relative;
  display: flex;
  align-items: center;
}

.library-search-icon {
  position: absolute;
  left: 12px;
  display: flex;
  color: var(--text-dim);
  pointer-events: none;
}

.library-search-input {
  width: 100%;
  padding: 10px 12px 10px 36px;
  font-family: var(--font-body);
  font-size: 14px;
  background: var(--bg-elev);
  color: var(--text);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  outline: none;
  transition: border-color 200ms var(--ease-soft);
}

.library-search-input::placeholder {
  color: var(--text-dim);
}

.library-search-input:focus {
  border-color: color-mix(in srgb, var(--ember) 50%, var(--hairline-strong));
}

.library-filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.library-filter {
  padding: 6px 12px;
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.02em;
  background: var(--bg-elev);
  color: var(--text-soft);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  cursor: pointer;
  transition: all 180ms var(--ease-soft);
}

.library-filter:hover {
  background: var(--bg-elev-2);
  color: var(--text);
}

.library-filter[data-active="true"] {
  background: color-mix(in srgb, var(--ember) 16%, var(--bg-elev));
  border-color: color-mix(in srgb, var(--ember) 50%, transparent);
  color: var(--ember-soft);
}

.library-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  /* Pre.316: body = scroll-container. Header bleibt fix, body scrollt. */
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  /* Bottom-Padding für iOS Safe-Area + Atemraum */
  padding-bottom: max(var(--space-4), env(safe-area-inset-bottom));
}

.library-section-head {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 0 0 var(--space-2);
}

.library-empty {
  padding: var(--space-6);
  color: var(--text-dim);
  font-size: 14px;
  text-align: center;
  background: var(--bg-elev);
  border: 1px dashed var(--hairline-strong);
  border-radius: var(--radius-l);
}

.library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
}

.library-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-m);
  overflow: hidden;
  background: var(--bg-elev-2);
  border: 1px solid var(--hairline);
  cursor: pointer;
  padding: 0;
  transition:
    transform 200ms var(--ease-soft),
    box-shadow 200ms var(--ease-soft);
}

.library-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Pre.157/162: Non-Image-Tiles (PDF/Audio/Andere) — Icon zentriert,
 * Filename darunter mit Ellipsis. Pre.162: aspect-ratio: 1 / 1 wie
 * Image-Tiles → uniformes Grid. */
.library-tile[data-type="pdf"],
.library-tile[data-type="audio"],
.library-tile[data-type="other"] {
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 10px;
  text-align: center;
}

.library-tile-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: color-mix(in srgb, var(--ember) 75%, var(--text));
  flex-shrink: 0;
}

.library-tile[data-type="pdf"] .library-tile-icon {
  color: color-mix(in srgb, var(--rose) 75%, var(--text));
}

.library-tile[data-type="audio"] .library-tile-icon {
  color: color-mix(in srgb, var(--sage) 80%, var(--text));
}

.library-tile-filename {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

.library-tile:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
}

.library-tile-source {
  position: absolute;
  top: 6px;
  right: 6px;
  background: color-mix(in srgb, var(--bg-deep) 75%, transparent);
  color: #fff;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 999px;
}

.library-tile-source[data-source="generated"] {
  background: color-mix(in srgb, var(--ember) 70%, var(--bg-deep));
}

.library-tile-source[data-source="edited"] {
  background: color-mix(in srgb, var(--plum) 70%, var(--bg-deep));
}

.library-tile-format {
  position: absolute;
  bottom: 6px;
  left: 6px;
  background: color-mix(in srgb, var(--bg-deep) 70%, transparent);
  color: #fff;
  font-size: 9px;
  letter-spacing: 0.08em;
  padding: 2px 6px;
  border-radius: 4px;
}

.library-tile-caption {
  position: absolute;
  inset: auto 0 0 0;
  background: linear-gradient(
    180deg,
    transparent,
    color-mix(in srgb, var(--bg-deep) 88%, transparent)
  );
  color: #fff;
  font-size: 11px;
  line-height: 1.3;
  padding: 18px 8px 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  opacity: 0;
  transition: opacity 200ms var(--ease-soft);
  text-align: left;
}

.library-tile:hover .library-tile-caption,
.library-tile:focus-visible .library-tile-caption {
  opacity: 1;
}

/* --- Image-Skeleton (Pulse während Bild-Tool läuft) ------------------ */

.bubble.image-skeleton {
  padding: 6px;
  background: var(--bg-elev-2);
  border-radius: 18px;
  max-width: 280px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.image-skeleton-shimmer {
  width: 268px;
  height: 200px;
  border-radius: 14px;
  background: linear-gradient(
    100deg,
    color-mix(in srgb, var(--ember) 8%, var(--bg-elev)) 30%,
    color-mix(in srgb, var(--ember) 22%, var(--bg-elev)) 50%,
    color-mix(in srgb, var(--ember) 8%, var(--bg-elev)) 70%
  );
  background-size: 200% 100%;
  animation: imageShimmer 1.6s var(--ease-soft) infinite;
}

@keyframes imageShimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

.image-skeleton-label {
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.35;
  color: var(--text-dim);
  padding: 0 8px 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.image-skeleton-label::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--ember);
  animation: imagePulseDot 1.2s var(--ease-quiet) infinite;
  vertical-align: middle;
}

@keyframes imagePulseDot {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.4);
    opacity: 1;
  }
}

/* --- URL-Card (open_url) --------------------------------------------- */

.bubble.url-card {
  padding: 12px 14px;
  background: var(--bg-elev-2);
  border-radius: 16px;
  max-width: 360px;
}

.url-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.url-card-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ember) 18%, var(--bg-elev));
  color: var(--ember);
  display: flex;
  align-items: center;
  justify-content: center;
}

.url-card-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.url-card-title {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.url-card-url {
  font-size: 11px;
  color: var(--text-dim);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 280px;
}

.url-card-url:hover {
  color: var(--ember);
  text-decoration: underline;
}

/* Pre.177: prominenter Action-Button — vorher war nur die kleine
   url-card-url anklickbar, sah wie Text aus. Maps-URLs bekommen
   "Route in Google Maps öffnen", normale Links "Link öffnen". */
.url-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border, rgba(0, 0, 0, 0.08));
}

.url-card-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 8px 14px;
  border-radius: 10px;
  background: var(--ember);
  color: var(--on-color);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: filter 0.15s ease;
}

.url-card-action-btn:hover,
.url-card-action-btn:active {
  filter: brightness(1.08);
  text-decoration: none;
  color: var(--on-color);
}

/* --- Music-Player-Bubble --------------------------------------------- */

.bubble.music {
  padding: 10px 12px 12px;
  background: var(--bg-elev-2);
  border-radius: 18px;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Pre.450 Ticket #13: phone_play Tap-to-Play-Card.
 * Grosser roter Play-Button, klar als Tap-Aktion erkennbar (iOS braucht
 * User-Gesture für Music-App-Deeplink). */
.bubble.phone-play-card {
  padding: 14px;
  background: var(--bg-elev-2);
  border-radius: 18px;
  max-width: 360px;
  border: 1px solid color-mix(in srgb, var(--ember) 30%, var(--hairline));
}
.phone-play-row {
  display: flex;
  align-items: center;
  gap: 14px;
}
.phone-play-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.phone-play-provider {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.phone-play-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.phone-play-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(180deg, #ff5b5b, #d33b3b);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(211, 59, 59, 0.4);
  transition:
    transform 120ms var(--ease-soft),
    filter 200ms var(--ease-soft);
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.phone-play-btn:hover {
  filter: brightness(1.06);
}
.phone-play-btn:active {
  transform: scale(0.94);
}

.music-head {
  display: flex;
  gap: 12px;
  align-items: center;
}

.music-thumb {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: var(--radius-m);
  flex-shrink: 0;
  background: var(--bg-deep);
}

.music-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.music-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.music-channel {
  font-size: 12px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.music-player {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-m);
  overflow: hidden;
  background: var(--bg-deep);
  display: flex;
  align-items: center;
  justify-content: center;
}

.music-iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.music-play {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: linear-gradient(180deg, var(--ember-soft) 0%, var(--ember) 100%);
  color: var(--on-color);
  border: 1px solid var(--ember);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: filter 200ms var(--ease-soft);
}

.music-play:hover {
  filter: brightness(1.06);
}

.music-links {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 2px;
}

.music-link {
  font-size: 12px;
  color: var(--text-dim);
  text-decoration: none;
  letter-spacing: 0.02em;
  padding: 4px 0;
  transition: color 200ms var(--ease-soft);
}

.music-link:hover {
  color: var(--ember);
  text-decoration: underline;
}

.music-link--primary {
  color: var(--ember);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.music-link--primary::before {
  content: "→";
  display: inline-block;
}

.music-skeleton {
  padding: 14px 16px;
}

.music-skeleton-label {
  font-size: 13px;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 8px;
}

.music-skeleton-label::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ember);
  animation: imagePulseDot 1.2s var(--ease-quiet) infinite;
}

/* --- Side-Drawer (Module overlay'd statt Vollseite) ------------------ */

.side-drawer[hidden] {
  display: none;
}

.side-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(380px, 92vw);
  background: var(--bg-elev);
  border-left: 1px solid var(--hairline);
  /* Über nav-drawer (940) — sonst überdeckt das Hauptmenü das Modul-Sheet
     im Desktop-Mode wo nav-drawer dauerhaft offen ist (siehe pre.90). */
  z-index: 945;
  overflow-y: auto;
  box-shadow: -8px 0 28px rgba(0, 0, 0, 0.1);
  animation: sideDrawerIn 320ms var(--ease-quiet);
  display: flex;
  flex-direction: column;
}

@keyframes sideDrawerIn {
  from {
    transform: translateX(8%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Pre.97-followup: Im Desktop wird der Module-Drawer zur PERSISTENTEN
   Speedbar — Content shiftet via padding-right statt überdeckt zu werden.
   Animation sanfter (320ms quiet ease + opacity). Auto-close raus
   (siehe tools-view.run()). */
@media (min-width: 1024px) {
  .side-drawer--tools {
    width: 320px;
    box-shadow: 0 0 0 1px var(--hairline);
  }
  body.tools-open #app {
    padding-right: 320px;
  }
}

.side-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Pre.991: oberer Safe-Area-Inset (native Hülle). */
  padding: max(var(--space-3), env(safe-area-inset-top)) var(--space-4)
    var(--space-3);
  border-bottom: 1px solid var(--hairline);
  position: sticky;
  top: 0;
  background: var(--bg-elev);
  z-index: 1;
}

.side-drawer-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.02em;
  margin: 0;
  color: var(--text);
}

/* --- Files-View (Datei-Ordner-Tab) ----------------------------------- */

.files-view {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.files-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.files-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.files-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  margin: 0;
  color: var(--text);
}

.files-refresh {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;
  color: var(--text-dim);
  border: 1px solid var(--hairline);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 200ms var(--ease-soft);
}

.files-refresh:hover {
  color: var(--ember);
  border-color: color-mix(in srgb, var(--ember) 35%, var(--hairline));
}

.files-search-input {
  width: 100%;
  padding: 10px 14px;
  font-family: var(--font-body);
  font-size: 14px;
  background: var(--bg-elev);
  color: var(--text);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  outline: none;
  transition: border-color 200ms var(--ease-soft);
}

.files-search-input:focus {
  border-color: color-mix(in srgb, var(--ember) 50%, var(--hairline-strong));
}

.files-filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.files-filter {
  padding: 6px 12px;
  font-size: 12px;
  background: var(--bg-elev);
  color: var(--text-soft);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  cursor: pointer;
  transition: all 180ms var(--ease-soft);
}

.files-filter:hover {
  background: var(--bg-elev-2);
  color: var(--text);
}

.files-filter[data-active="true"] {
  background: color-mix(in srgb, var(--ember) 16%, var(--bg-elev));
  border-color: color-mix(in srgb, var(--ember) 50%, transparent);
  color: var(--ember-soft);
}

.files-empty {
  padding: var(--space-6);
  color: var(--text-dim);
  font-size: 14px;
  text-align: center;
  background: var(--bg-elev);
  border: 1px dashed var(--hairline-strong);
  border-radius: var(--radius-l);
}

.files-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.files-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: var(--bg-elev);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-l);
  transition:
    border-color 200ms var(--ease-soft),
    background 200ms var(--ease-soft);
}

.files-row:hover {
  border-color: color-mix(in srgb, var(--ember) 28%, var(--hairline-strong));
  background: var(--bg-elev-2);
}

.files-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-m);
  background: color-mix(in srgb, var(--ember) 14%, var(--bg-elev-2));
  color: var(--ember);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.files-row[data-kind="audio"] .files-icon {
  background: color-mix(in srgb, var(--plum) 14%, var(--bg-elev-2));
  color: var(--plum);
}

.files-row[data-kind="text"] .files-icon {
  background: color-mix(in srgb, var(--sage) 14%, var(--bg-elev-2));
  color: color-mix(in srgb, var(--sage) 90%, var(--text));
}

.files-meta {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.files-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* Pre.126: jetzt <button> statt <a> — Reset für Default-Button-Styles. */
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  width: 100%;
}

.files-name:hover {
  color: var(--ember);
}

.files-sub {
  font-size: 11px;
  color: var(--text-dim);
}

.files-attach {
  flex-shrink: 0;
  padding: 6px 12px;
  background: transparent;
  color: var(--text-dim);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  font-size: 11px;
  cursor: pointer;
  transition: all 200ms var(--ease-soft);
}

.files-attach:hover {
  color: var(--ember);
  border-color: color-mix(in srgb, var(--ember) 40%, var(--hairline));
}

/* --- File-Card im Chat ------------------------------------------------ */

.bubble.file-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--bg-elev-2);
  border-radius: 16px;
  max-width: 360px;
}

.file-card-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-m);
  background: color-mix(in srgb, var(--ember) 14%, var(--bg-elev));
  color: var(--ember);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
}

.file-card-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.file-card-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.file-card-name:hover {
  color: var(--ember);
}

.file-card-sub {
  font-size: 11px;
  color: var(--text-dim);
}

/* --- Image-Bubble (Bild im Chat) -------------------------------------- */

.bubble.image {
  padding: 6px;
  background: var(--bg-elev-2);
  border-radius: 18px;
  max-width: 280px;
}

.bubble.image img {
  display: block;
  border-radius: 14px;
  width: 100%;
  height: auto;
  max-height: 360px;
  object-fit: contain;
  cursor: zoom-in;
}

.bubble.image .bubble-caption {
  font-size: 12.5px;
  color: var(--text-dim);
  margin: 8px 6px 4px;
  line-height: 1.4;
}

/* Pre.444: Verbindungsqualität-Indikator. SVG-Balken, default verborgen.
   Sichtbar wenn body[data-voice-quality] gesetzt ist (von webrtc.ts via
   onConnectionQuality-Callback). Farbe + Balken-Anzahl je nach Quality. */
.status-bar-quality {
  display: none;
  align-items: center;
  color: var(--text-dim);
}
body[data-voice-quality] .status-bar-quality {
  display: inline-flex;
}
.status-bar-quality svg {
  display: block;
}
.status-bar-quality .bar {
  fill: currentColor;
  opacity: 0.3;
  transition: opacity 0.2s ease;
}
body[data-voice-quality="excellent"] .status-bar-quality {
  color: var(--success, #4ade80);
}
body[data-voice-quality="excellent"] .status-bar-quality .bar {
  opacity: 1;
}
body[data-voice-quality="good"] .status-bar-quality {
  color: var(--success, #4ade80);
}
body[data-voice-quality="good"] .status-bar-quality .bar-1,
body[data-voice-quality="good"] .status-bar-quality .bar-2 {
  opacity: 1;
}
body[data-voice-quality="good"] .status-bar-quality .bar-3 {
  opacity: 0.4;
}
body[data-voice-quality="poor"] .status-bar-quality {
  color: var(--warning, #f59e0b);
}
body[data-voice-quality="poor"] .status-bar-quality .bar-1 {
  opacity: 1;
}
body[data-voice-quality="poor"] .status-bar-quality .bar-2 {
  opacity: 0.5;
}
body[data-voice-quality="lost"] .status-bar-quality {
  color: var(--danger, #ef4444);
}
body[data-voice-quality="lost"] .status-bar-quality .bar-1 {
  opacity: 1;
  animation: voice-quality-blink 0.8s ease-in-out infinite;
}
@keyframes voice-quality-blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}

/* --- Status-Bar (Footer-Meta-Info: Version, LLM, Stimme, State) ------- */

.status-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  /* Pre.134: padding ALLES auf 6px, KEIN safe-area, KEIN border-top.
     Status-Bar klebt direkt am Display-Rand, einheitliche Background-
     Farbe von Dock bis Display-Rand, kein optischer Trenner mehr. */
  padding: 6px max(var(--space-4), env(safe-area-inset-right)) 6px
    max(var(--space-4), env(safe-area-inset-left));
  /* Pre.125: flex-shrink:0 verhindert dass Status-Bar verschwindet wenn
     Children's intrinsic height groß wird. Auto-Pinning ans untere
     #app-Ende macht der vorausgehende dock via margin-top:auto. */
  flex-shrink: 0;
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  background: var(--bg-deep);
  border-top: 1px solid var(--hairline);
  user-select: none;
}

body.auth-pending .status-bar,
body.auth-pending .dock,
body.auth-pending .topbar,
/* Pre.374: gleicher Verstecker auch wenn Login-View aktiv (User hat
   noch keinen gültigen Cookie aber Bootstrap ist durch). */
body.is-login .status-bar,
body.is-login .dock,
body.is-login .topbar {
  /* Pre.131: display:none statt visibility:hidden. Vorher waren
     status-bar + dock visuell unsichtbar aber NAHMEN WEITER PLATZ
     EIN — Login-Card stand mittig OBERHALB des leeren Footer-Stacks,
     darunter heller Spalt bis Display-Rand. Live-Bug Martin trotz
     PWA-Neuinstallation. display:none nimmt das Element komplett
     aus dem Layout-Flow raus — Login-View darf den ganzen Bildschirm
     füllen. */
  display: none;
}

@media (max-width: 480px) {
  .status-bar {
    font-size: 10px;
    gap: 6px;
    flex-wrap: nowrap;
    overflow: hidden;
    white-space: nowrap;
    padding-top: 4px;
    padding-right: max(var(--space-3), env(safe-area-inset-right));
    padding-bottom: 4px;
    padding-left: max(var(--space-3), env(safe-area-inset-left));
  }
  .status-bar-label {
    display: none;
  }
  .status-bar-version,
  .status-bar-value,
  .status-bar-state,
  .status-bar-mode,
  .status-bar-project,
  .status-bar-sep {
    flex-shrink: 0;
  }
  /* Pre.381: User-Feedback 2026-05-18 — Mobile-Footer war zu kahl
     (nur Globe sichtbar), Pre.285-Radikalkur rückgängig. Jetzt
     Version + LLM + Mode + Globe sichtbar wie im Desktop.
     Status-State + Projekt sind ohnehin permanent hidden (Pre.375/376)
     weil sie schon in der Topbar stehen — daher kein Doppel. */
}

@media (max-width: 380px) {
  /* Sehr enge Phones (iPhone SE): Anruf-State weg, nur Modell+Modus+Projekt. */
  .status-bar-state,
  .status-bar-state + .status-bar-sep {
    display: none;
  }
  .status-bar-project {
    max-width: 10ch;
  }
}

.status-bar-brand {
  font-family: var(--font-display);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--ember);
}

.status-bar-sep {
  opacity: 0.4;
}

.status-bar-label {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 9.5px;
  opacity: 0.65;
}

.status-bar-value {
  color: var(--text-soft);
}

/* Pre.206: Extension-Download-Block in Settings/Verbindungen. */

.ext-install-steps summary {
  cursor: pointer;
  font-size: 13px;
  color: var(--text-soft);
  user-select: none;
}

.ext-install-list {
  margin: 8px 0 0 18px;
  padding: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-soft);
}

.ext-install-list li {
  margin-bottom: 4px;
}

/* Pre.202: klickbare Footer-Pills (Modell, Modus). */
.status-bar-link {
  background: transparent;
  border: 0;
  padding: 1px 4px;
  margin: 0;
  color: var(--text-soft);
  font: inherit;
  font-size: inherit;
  cursor: pointer;
  border-radius: 4px;
  transition:
    background 150ms ease,
    color 150ms ease;
}
.status-bar-link:hover {
  background: color-mix(in srgb, var(--ember) 22%, transparent);
  color: var(--text);
}

/* Pre.191: Extension-Status-Globe im Footer. Off = ausgegraut, On = grün. */
.status-bar-ext {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  opacity: 0.35;
  color: var(--text-dim);
  transition:
    opacity 0.2s ease,
    color 0.2s ease;
}
.status-bar-ext[data-state="on"] {
  opacity: 1;
  color: #2e9b5e; /* grün */
}

/* Pre.660: CLI-Heartbeat in der Fußzeile — grüner Punkt = CLI/Tokens laufen. */
.status-bar-cli {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: inherit;
  color: var(--text-dim);
  cursor: default;
}
.status-cli-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-dim);
  flex-shrink: 0;
  transition: background 0.25s ease;
}
.status-bar-cli[data-state="ok"] .status-cli-dot {
  background: #2e9b5e; /* grün — erreichbar */
  box-shadow: 0 0 5px color-mix(in srgb, #2e9b5e 70%, transparent);
}
.status-bar-cli[data-state="down"] .status-cli-dot {
  background: var(--error); /* rot — nicht erreichbar */
}
.status-bar-cli[data-state="unknown"] .status-cli-dot {
  animation: cliPulse 1.2s ease-in-out infinite;
}
@keyframes cliPulse {
  0%,
  100% {
    opacity: 0.35;
  }
  50% {
    opacity: 0.9;
  }
}

.status-bar-state,
.status-bar-mode {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: color-mix(in srgb, var(--text-dim) 12%, transparent);
  color: var(--text-soft);
}

.status-bar-mode[data-mode="voice"] {
  background: color-mix(in srgb, var(--ember) 18%, transparent);
  color: var(--ember-soft);
}

.status-bar-state::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.6;
}

.status-bar-state[data-state="connecting"] {
  background: color-mix(in srgb, var(--amber) 18%, transparent);
  color: var(--amber);
}

.status-bar-state[data-state="listening"],
.status-bar-state[data-state="speaking"],
.status-bar-state[data-state="thinking"] {
  background: color-mix(in srgb, var(--sage) 18%, transparent);
  color: color-mix(in srgb, var(--sage) 90%, var(--text));
}

.status-bar-state[data-state="error"] {
  background: color-mix(in srgb, var(--rose) 18%, transparent);
  color: color-mix(in srgb, var(--rose) 90%, var(--text));
}

@keyframes emberBreathe {
  0%,
  100% {
    transform: scale(1);
    filter: brightness(1);
  }
  50% {
    transform: scale(1.06);
    filter: brightness(1.12);
  }
}

@keyframes thinking {
  0%,
  100% {
    opacity: 0.7;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.04);
  }
}

@keyframes pulse {
  /* Legacy-Name beibehalten — wird von .mic[data-active="true"] .mic-icon
     nicht mehr referenziert, koennte aber von externem Code genutzt werden. */
  0%,
  100% {
    transform: scale(1);
    opacity: 0.85;
  }
  50% {
    transform: scale(1.12);
    opacity: 1;
  }
}

/* -------------------------------------------------------------------------
   15. Reduced motion — Respekt vor Nutzern, die Ruhe wollen
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .dock-stop[data-active="true"] .dock-stop-icon,
  .state[data-state="listening"]::before,
  .state[data-state="speaking"]::before,
  .state[data-state="connecting"]::before,
  .state[data-state="thinking"]::before {
    animation: none !important;
  }
}

/* -------------------------------------------------------------------------
   16. Wider Screens — kleiner Atmer
   ------------------------------------------------------------------------- */

@media (min-width: 720px) {
  .topbar {
    padding-left: var(--space-6);
    padding-right: var(--space-6);
  }
  .chat,
  .tools-view,
  .settings-view,
  .memory-list,
  .memory-controls,
  .memory-filter-bar {
    padding-left: var(--space-6);
    padding-right: var(--space-6);
  }
  .tabs {
    margin-left: var(--space-6);
    margin-right: var(--space-6);
  }
  .dock {
    padding-left: var(--space-6);
    padding-right: var(--space-6);
  }
}

/* -------------------------------------------------------------------------
   17. Image-Caption-Modal — fragt Caption vor Image-Upload
   ------------------------------------------------------------------------- */

.image-caption-modal {
  position: fixed;
  inset: 0;
  z-index: 980;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  animation: imageCaptionFadeIn 200ms var(--ease-soft);
}

@keyframes imageCaptionFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.image-caption-backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--bg-deep) 78%, transparent);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
}

.image-caption-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
  max-width: 480px;
  max-height: calc(100dvh - 2 * var(--space-4));
  overflow-y: auto;
  background: var(--bg-elev);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-xl);
  padding: var(--space-4);
  box-shadow: var(--shadow-card);
  animation: imageCaptionCardIn 220ms var(--ease-soft);
}

@keyframes imageCaptionCardIn {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.image-caption-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-deep);
  border-radius: var(--radius-l);
  border: 1px solid var(--hairline);
  overflow: hidden;
  max-height: 240px;
}

.icm-preview-img {
  display: block;
  max-width: 100%;
  max-height: 240px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.icm-filename {
  margin: 0;
  font-size: 11px;
  color: var(--text-dim);
  text-align: center;
  letter-spacing: 0.02em;
  word-break: break-all;
}

/* Pre.488: File-Caption-Modal Header (Icon + Name + Größe) */
.file-caption-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 0 8px;
}
.file-caption-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--surface-2, rgba(0, 0, 0, 0.06));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--accent);
}
.file-caption-icon svg {
  width: 28px;
  height: 28px;
}
.file-caption-meta {
  flex: 1;
  min-width: 0;
}
.file-caption-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.01em;
}
.file-caption-size {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
[data-mode="dark"] .file-caption-icon {
  background: rgba(255, 255, 255, 0.08);
}

.icm-label {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: 13px;
  color: var(--text-soft);
  font-weight: 500;
}

.icm-textarea {
  width: 100%;
  min-height: 60px;
  padding: 10px 12px;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.45;
  color: var(--text);
  background: var(--bg-elev-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-m);
  resize: none;
  outline: none;
  transition:
    border-color 180ms var(--ease-soft),
    background 180ms var(--ease-soft);
  font-weight: 400;
}

.icm-textarea::placeholder {
  color: var(--text-mute);
}

.icm-textarea:focus {
  border-color: color-mix(in srgb, var(--ember) 50%, var(--hairline-strong));
  background: var(--bg-elev);
}

.icm-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.icm-chip {
  padding: 6px 12px;
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--text-soft);
  background: var(--bg-elev-2);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  cursor: pointer;
  transition:
    background 180ms var(--ease-soft),
    color 180ms var(--ease-soft),
    border-color 180ms var(--ease-soft);
}

.icm-chip:hover {
  background: color-mix(in srgb, var(--ember) 12%, var(--bg-elev-2));
  border-color: color-mix(in srgb, var(--ember) 30%, var(--hairline-strong));
  color: var(--text);
}

.icm-chip:active {
  background: color-mix(in srgb, var(--ember) 20%, var(--bg-elev-2));
}

/* Pre.537: Beleg-Kategorie-Chips — single-select, ausgewählter Chip bleibt
   ember-gefüllt damit klar ist, auf welches Konto verbucht wird. */
.icm-chip--cat {
  font-weight: 500;
}

.icm-chip--active,
.icm-chip--active:hover {
  background: var(--ember);
  border-color: var(--ember);
  color: var(--ember-on, #fff);
}

.icm-actions {
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
  margin-top: var(--space-2);
}

/* ============================================================================
   Pre.651 — EINHEITLICHES BUTTON-SYSTEM (.btn)
   Eine Quelle für alle Buttons. NUR Tokens, keine Hardcodes → theme-wechsel-
   sicher. Schrittweise lösen die `.btn`-Varianten die Alt-Klassen (icm-btn,
   hd-refresh, essence-*, book-*, voice-picker-*) ab.
   Varianten: --primary (gefüllt-getönt) · --ghost (subtil/outline) ·
              --sm (klein) · --icon (quadratisch, nur Icon) · --danger
   ============================================================================ */
/* `.icm-btn` ist ab pre.653 ein ALIAS auf das .btn-System (selbe Regeln) — die
   alte Definition mit hartkodiertem Verlauf/Schatten/#fff8ee ist entfernt. So
   sind alle Buttons EINHEITLICH, ohne hunderte JS-Klassen umzubenennen. */
.btn,
.icm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.1;
  padding: 9px 15px;
  border: 1px solid transparent;
  border-radius: var(--radius-m);
  cursor: pointer;
  white-space: nowrap;
  transition:
    background 160ms var(--ease-soft),
    border-color 160ms var(--ease-soft),
    color 160ms var(--ease-soft),
    opacity 160ms var(--ease-soft);
}
.btn:disabled,
.icm-btn:disabled {
  opacity: 0.55;
  cursor: default;
}
.btn--primary,
.icm-btn--primary {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-color: color-mix(in srgb, var(--accent) 30%, var(--hairline));
}
.btn--primary:hover:not(:disabled),
.icm-btn--primary:hover {
  background: color-mix(in srgb, var(--accent) 20%, transparent);
}
.btn--ghost,
.icm-btn--ghost {
  color: var(--text-soft);
  background: transparent;
  border-color: var(--hairline);
}
.btn--ghost:hover:not(:disabled),
.icm-btn--ghost:hover {
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent) 30%, var(--hairline));
}
.btn--danger {
  color: var(--danger);
  background: transparent;
  border-color: color-mix(in srgb, var(--danger) 30%, var(--hairline));
}
.btn--danger:hover:not(:disabled) {
  background: color-mix(in srgb, var(--danger) 12%, transparent);
}
.btn--sm {
  padding: 7px 11px;
  font-size: 12.5px;
  gap: 6px;
}
.btn--icon {
  padding: 8px;
  gap: 0;
}

/* === EIN Schließen-Knopf für ALLE Sheets/Overlays (pre.665) ============
   Ersetzt die früher ~14 eigenen Close-Klassen (.nav-drawer-close,
   .lightbox-close, .archive-close, …). Klare, runde Trefferfläche mit
   Hover-Hintergrund — liest sich eindeutig als Knopf, „steht nicht verloren".
   Tokens-only, keine Hardcode-Farben. */
.close-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-soft);
  cursor: pointer;
  transition:
    background 160ms var(--ease-soft),
    color 160ms var(--ease-soft);
}
.close-btn:hover {
  background: var(--surface-glass);
  color: var(--text);
}
.close-btn:active {
  background: var(--surface-soft);
}

/* Pre.750: „Zurück"-Pfeil der Vollseiten-Unterseiten (oben links) — derselbe
   ruhige Icon-Button wie der Schließen-Knopf, nur als erstes Element im Kopf.
   EINE Klasse für HD/Buch/Essenz (DRY). */
.back-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-right: 4px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-soft);
  cursor: pointer;
  transition:
    background 160ms var(--ease-soft),
    color 160ms var(--ease-soft);
}
.back-btn:hover {
  background: var(--surface-glass);
  color: var(--text);
}
.back-btn:active {
  background: var(--surface-soft);
}
/* Modal-Panel ohne eigenen Kopf: Knopf in die obere rechte Ecke setzen. */
.close-btn--corner {
  position: absolute;
  /* #194: Safe-Area addieren, sonst überlappt der Knopf in der nativen App
     den Notch/Batterie-Bereich. Ohne Notch (Browser) = 0 → bleibt bei 10px. */
  top: calc(10px + env(safe-area-inset-top));
  right: 10px;
  z-index: 2;
}
/* Lightbox: Knopf liegt auf dunklem Bild → heller Glas-Hintergrund. */
.close-btn--overlay {
  position: absolute;
  /* In der nativen App lag der X über der Statusleiste/Notch → Safe-Area
     addieren (Browser ohne Notch = 0, bleibt bei 16px). Rechts ebenso, damit
     der Knopf im Landscape nicht unter Notch/Kamera rutscht. */
  top: calc(16px + env(safe-area-inset-top));
  right: calc(16px + env(safe-area-inset-right));
  z-index: 3;
  width: 40px;
  height: 40px;
  color: #fff;
  background: color-mix(in srgb, var(--bg-deep) 60%, transparent);
  border: 1px solid color-mix(in srgb, #fff 15%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.close-btn--overlay:hover {
  background: color-mix(in srgb, var(--rose) 50%, var(--bg-deep));
  color: #fff;
}

/* === EIN Sheet-Kopf-Muster (pre.665) ==================================
   Titel links, Schließen-Knopf rechts — gebaut von buildSheetHeader(). */
.sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--hairline);
}
.sheet-head-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
}

/* (Alte .icm-btn-Definition pre.653 entfernt → jetzt Alias auf .btn, siehe oben.) */

/* === Project-Detail-Sheet (E3.4 / pre.114) ============================ */

.project-sheet-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1100;
  padding: 16px;
  /* iOS PWA: Safe-Area respektieren */
  padding-top: max(16px, env(safe-area-inset-top));
  padding-bottom: max(16px, env(safe-area-inset-bottom));
  animation: project-sheet-fade-in 120ms ease-out;
}

@keyframes project-sheet-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.project-sheet {
  position: relative;
  background: var(--bg-elev);
  color: var(--text);
  border-radius: 16px;
  padding: 24px;
  max-width: 520px;
  width: 100%;
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--hairline);
}

.project-sheet-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  padding-right: 32px;
}

.project-sheet-header h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
}

.project-sheet-desc {
  margin: 0 0 16px;
  color: var(--text-dim);
  font-size: 14px;
  line-height: 1.45;
}

.project-color-picker {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.project-color-picker-label {
  font-size: 13px;
  color: var(--text-dim);
  margin-right: 4px;
}

.project-color-swatch {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  transition:
    transform 80ms ease,
    border-color 80ms ease;
}

.project-color-swatch:hover {
  transform: scale(1.08);
}

.project-color-swatch.is-active {
  border-color: var(--text);
  box-shadow: 0 0 0 2px var(--bg-elev) inset;
}

.project-sheet-links h3 {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-dim);
}

/* Pre.214: Memory-Link-Preview statt UUID */
.project-link-preview {
  display: block;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.project-link-meta {
  display: block;
  font-size: 10.5px;
  color: var(--text-mute);
  margin-top: 2px;
}

.project-sheet-links-empty {
  margin: 0;
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.5;
}

/* Pre.193 Sprint B — Project-Files-Section im Detail-Sheet */
.project-sheet-files {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
}

.project-files-group {
  margin-bottom: 14px;
}

.project-files-group h4 {
  margin: 6px 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.project-files-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Pre.363: Komplett neu — alte flex-row mit space-between hat Pre.358
 * Type-Badge + Meta-Row gegen die Wand gedrückt (Badge fließt in Titel,
 * MIME klebt am Titel-Ende). Jetzt klare 2-Zeilen-Struktur:
 *   ┌─ row-top: [Badge] [Titel...]
 *   └─ row-meta: 2.9 kB · erstellt vor 8 Min · text/markdown
 */
.project-file-item,
.project-file-item--rich {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 6px;
  padding: 12px 14px;
  background: var(--bg-elev);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  transition: border-color 180ms var(--ease-soft);
  min-width: 0;
  overflow: hidden;
}
.project-file-item:hover {
  border-color: color-mix(in srgb, var(--ember) 35%, var(--hairline-strong));
}
.project-file-row-top {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  width: 100%;
}
.project-file-title {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  font-size: 14.5px;
  font-weight: 500;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.35;
}
.project-file-title:hover {
  color: var(--ember);
}
.project-file-row-meta {
  font-size: 11.5px;
  color: var(--text-dim);
  letter-spacing: 0.02em;
  word-break: break-word;
}
/* Falls noch alte Markup-Bubbles ohne row-top/row-meta vorkommen:
 * neutralen Fallback (kein flex-row mehr). */
.project-file-meta {
  font-size: 11.5px;
  color: var(--text-dim);
}

/* File-Viewer/Editor-Sheet */
.project-file-sheet {
  max-width: 760px;
}

.project-file-meta-row {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 6px;
}

.project-file-body {
  margin-top: 12px;
}

.project-file-view {
  white-space: pre-wrap;
  word-wrap: break-word;
  background: var(--surface-soft);
  padding: 16px;
  border-radius: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  line-height: 1.55;
  max-height: 60vh;
  overflow-y: auto;
  color: var(--text);
}

/* Pre.980: Metadaten-Bearbeitung (Titel/Autor) im Datei-Viewer. */
.project-file-meta-edit {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}
.project-file-meta-input {
  width: 100%;
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid var(--hairline);
  background: var(--bg-elev-2);
  color: var(--text);
  font-size: 14px;
}
.project-file-editor {
  width: 100%;
  min-height: 50vh;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid var(--hairline);
  background: var(--bg-elev-2);
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  line-height: 1.55;
  resize: vertical;
}

.project-file-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.project-file-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}

.project-file-input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--hairline);
  background: var(--bg-elev-2);
  color: var(--text);
  font: inherit;
}

/* Pre.200 — narrate_to_mp3 Card Audio + Hint */
.tool-narrate-audio {
  width: 100%;
  margin-top: 8px;
}
.tool-narrate-hint {
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-dim);
}

/* Pre.197 Sprint D — Inline-Preview für Binary-Files */
.project-file-binary-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--surface-soft);
  border-radius: 8px;
  padding: 12px;
  min-height: 200px;
}

.project-file-pdf {
  width: 100%;
  height: 60vh;
  min-height: 400px;
  border: 0;
  border-radius: 4px;
  background: #fff;
}

.project-file-image {
  max-width: 100%;
  max-height: 60vh;
  object-fit: contain;
  border-radius: 6px;
}

.project-file-audio {
  width: 100%;
  margin: 12px 0;
}

.project-file-download {
  display: inline-block;
  padding: 12px 18px;
  background: var(--ember);
  color: var(--user-text);
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
}

.project-file-download:hover {
  filter: brightness(1.08);
}

.project-sheet-links-group {
  margin-bottom: 12px;
}

.project-sheet-links-group h4 {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}

.project-sheet-links-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.project-sheet-links-list li {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text);
  padding: 8px 10px;
  background: var(--surface-soft);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* === Create-Project-Sheet ============================================ */

.project-sheet-create-title {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
}

.project-sheet-input,
.project-sheet-textarea {
  display: block;
  width: 100%;
  margin-bottom: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--hairline);
  background: var(--bg-elev-2);
  color: var(--text);
  font: inherit;
  font-size: 15px;
  box-sizing: border-box;
}

.project-sheet-input:focus,
.project-sheet-textarea:focus {
  outline: 0;
  border-color: color-mix(in srgb, var(--accent) 50%, var(--hairline-strong));
  background: color-mix(in srgb, var(--bg-elev-2) 92%, var(--accent));
}

.project-sheet-textarea {
  resize: vertical;
  min-height: 60px;
  line-height: 1.4;
}

.project-sheet-create-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 4px;
}

/* --- Kontakte-View (Phase E5) ------------------------------------------ */

.contacts-view {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  /* Pre.139: scrollbar machen. .view ist flex:1 mit overflow:hidden,
     contacts-view selbst muss als scroll-container fungieren. */
  height: 100%;
  overflow-y: auto;
  min-height: 0;
}

.contacts-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.contacts-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.contacts-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  margin: 0;
  color: var(--text);
}

.contacts-new-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: color-mix(in srgb, var(--ember) 14%, var(--bg-elev));
  color: var(--ember-soft, var(--ember));
  border: 1px solid color-mix(in srgb, var(--ember) 35%, var(--hairline));
  border-radius: 999px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: all 200ms var(--ease-soft);
}

.contacts-new-btn:hover {
  background: color-mix(in srgb, var(--ember) 22%, var(--bg-elev));
  border-color: color-mix(in srgb, var(--ember) 55%, var(--hairline));
}

.contacts-search {
  display: flex;
}

.contacts-search-input {
  width: 100%;
  padding: 10px 14px;
  font-family: var(--font-body);
  font-size: 14px;
  background: var(--bg-elev);
  color: var(--text);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  outline: none;
  transition: border-color 200ms var(--ease-soft);
}

.contacts-search-input:focus {
  border-color: color-mix(in srgb, var(--ember) 50%, var(--hairline-strong));
}

.contacts-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.contacts-category-chip {
  padding: 6px 12px;
  background: var(--bg-elev);
  color: var(--text-dim);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  font-size: 12px;
  cursor: pointer;
  transition: all 180ms var(--ease-soft);
}

.contacts-category-chip:hover {
  color: var(--text);
  border-color: var(--hairline-strong);
}

.contacts-category-chip.is-active {
  background: color-mix(in srgb, var(--ember) 18%, var(--bg-elev));
  color: var(--ember-soft, var(--ember));
  border-color: color-mix(in srgb, var(--ember) 45%, var(--hairline));
}

.contacts-counter {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 2px;
}

.contacts-empty {
  padding: var(--space-6);
  color: var(--text-dim);
  font-size: 14px;
  text-align: center;
  background: var(--bg-elev);
  border: 1px dashed var(--hairline-strong);
  border-radius: var(--radius-l);
  line-height: 1.5;
}

.contacts-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.contacts-more-btn {
  margin-top: 10px;
  width: 100%;
  padding: 10px 14px;
  background: var(--bg-elev);
  color: var(--text-dim);
  border: 1px dashed var(--hairline-strong);
  border-radius: var(--radius-l);
  cursor: pointer;
  font-size: 13px;
  transition: all 180ms var(--ease-soft);
}

.contacts-more-btn:hover {
  color: var(--text);
  border-color: color-mix(in srgb, var(--ember) 35%, var(--hairline-strong));
}

.contact-card {
  /* Pre.142: Card jetzt Column-Layout. Header (.contact-card-header)
     ist die obere Reihe mit Avatar + Main + Tel-Btn. Details-Block
     hängt darunter über die volle Card-Breite. */
  display: flex;
  flex-direction: column;
  padding: 12px 14px;
  background: var(--bg-elev);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-l);
  transition:
    border-color 200ms var(--ease-soft),
    background 200ms var(--ease-soft);
}

.contact-card-header {
  display: flex;
  align-items: center;
  gap: 14px;
}

.contact-card:hover {
  border-color: color-mix(in srgb, var(--ember) 28%, var(--hairline-strong));
  background: var(--bg-elev-2);
}

.contact-avatar {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  color: #fff;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

.contact-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.contact-name {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.25;
  word-break: break-word;
}

.contact-phone {
  font-size: 13px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

.contact-email {
  font-size: 12px;
}

.contact-email a {
  color: var(--text-dim);
  text-decoration: none;
}

.contact-email a:hover {
  color: var(--ember-soft, var(--ember));
  text-decoration: underline;
}

.contact-company {
  font-size: 12px;
  color: var(--text-dim);
  font-style: italic;
}

.contact-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  flex-wrap: wrap;
}

/* Pre.136 / pre.139: Details-Toggle + ausklappbarer Bereich. Card im
   Default kompakt — nur Avatar + Name + Phone + Tel-Btn sichtbar. */
.contact-details-toggle {
  margin-top: 6px;
  background: transparent;
  border: 0;
  padding: 2px 0;
  font-family: inherit;
  font-size: 11.5px;
  color: var(--ember);
  cursor: pointer;
  text-align: left;
  align-self: flex-start;
  letter-spacing: 0.02em;
}

.contact-details-toggle:hover {
  text-decoration: underline;
}

.contact-details {
  /* Pre.142: volle Card-Breite, hängt UNTER dem Header. Margin-top
     trennt vom Header optisch. */
  margin-top: 12px;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.03);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  box-sizing: border-box;
}

.contact-detail-row {
  display: flex;
  gap: 8px;
  font-size: 13px;
  line-height: 1.4;
}

.contact-detail-label {
  flex-shrink: 0;
  font-weight: 600;
  color: var(--text-dim);
  min-width: 100px;
}

.contact-detail-value {
  color: var(--text);
  word-break: break-word;
}

a.contact-detail-value {
  color: var(--ember);
  text-decoration: none;
}

a.contact-detail-value:hover {
  text-decoration: underline;
}

.contact-action {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: all 180ms var(--ease-soft);
}

.contact-action:hover {
  border-color: var(--hairline-strong);
  background: var(--bg-elev-2);
}

.contact-action-tg:hover {
  color: #0088cc;
  border-color: color-mix(in srgb, #0088cc 50%, var(--hairline));
  background: color-mix(in srgb, #0088cc 12%, transparent);
}

.contact-action-wa:hover {
  color: #25d366;
  border-color: color-mix(in srgb, #25d366 50%, var(--hairline));
  background: color-mix(in srgb, #25d366 12%, transparent);
}

.contact-action-edit:hover {
  color: var(--ember);
  border-color: color-mix(in srgb, var(--ember) 40%, var(--hairline));
}

.contact-action-delete:hover {
  color: #b4623f;
  border-color: color-mix(in srgb, #b4623f 50%, var(--hairline));
  background: color-mix(in srgb, #b4623f 12%, transparent);
}

.contact-call-btn {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #7d8c54;
  color: #fff;
  border: 1px solid color-mix(in srgb, #7d8c54 80%, #000);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition:
    transform 160ms var(--ease-soft),
    background 160ms var(--ease-soft);
}

.contact-call-btn:hover {
  background: #8d9c64;
  transform: translateY(-1px);
}

.contact-call-btn:active {
  transform: translateY(0);
  background: #6e7d44;
}

@media (max-width: 540px) {
  .contact-card {
    padding: 10px 12px;
    gap: 10px;
  }
  .contact-avatar {
    width: 42px;
    height: 42px;
    font-size: 18px;
  }
  .contact-call-btn {
    width: 44px;
    height: 44px;
  }
}

/* Contact Sheet (Create/Edit) ------------------------------------------- */

.contact-sheet-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 16px;
}

.contact-sheet {
  background: var(--bg-elev);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-l);
  padding: 24px;
  width: 100%;
  max-width: 460px;
  max-height: 90vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.45);
}

.contact-sheet-title {
  font-family: var(--font-display);
  margin: 0 0 4px;
  font-size: 20px;
  font-weight: 500;
  color: var(--text);
}

.contact-sheet-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.contact-sheet-label {
  font-size: 12px;
  color: var(--text-dim);
  letter-spacing: 0.02em;
}

.contact-sheet-input,
.contact-sheet-select,
.contact-sheet-textarea {
  width: 100%;
  padding: 9px 12px;
  font-family: var(--font-body);
  font-size: 14px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  outline: none;
  transition: border-color 180ms var(--ease-soft);
}

.contact-sheet-input:focus,
.contact-sheet-select:focus,
.contact-sheet-textarea:focus {
  border-color: color-mix(in srgb, var(--ember) 50%, var(--hairline-strong));
}

.contact-sheet-textarea {
  resize: vertical;
  min-height: 60px;
}

.contact-sheet-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 4px;
}

.contact-sheet-btn {
  padding: 9px 16px;
  font-size: 14px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
  transition: all 180ms var(--ease-soft);
}

.contact-sheet-btn:hover {
  border-color: var(--hairline-strong);
  background: var(--bg-elev-2);
}

.contact-sheet-btn-primary {
  background: color-mix(in srgb, var(--ember) 18%, var(--bg-elev));
  color: var(--ember-soft, var(--ember));
  border-color: color-mix(in srgb, var(--ember) 45%, var(--hairline));
}

.contact-sheet-btn-primary:hover {
  background: color-mix(in srgb, var(--ember) 26%, var(--bg-elev));
  border-color: color-mix(in srgb, var(--ember) 65%, var(--hairline));
}

/* === Quick-Access-Sheet (Pre.138) ===================================
   Long-Press auf den zentralen Mic/Call-Button öffnet ein Bottom-Sheet
   mit Schnellzugriff auf Kontakte, Dateien, Bibliothek etc. — ohne
   Drawer-Umweg. Schließen per Tap außerhalb oder erneutem Long-Press. */

/* Pre.139: Long-Press triggerte iOS-Text-Selection-Modus + Kontext-
   menü auf den Dock-Buttons (sichtbar als blaue Selektions-Marker auf
   "Dateien"/"Projekte" im Live-Bug Martin). user-select + touch-callout
   unterbinden das auf Trigger UND Sheet-Children. */
.dock-btn,
.dock-btn *,
.quick-access-overlay,
.quick-access-overlay * {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.quick-access-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 1200;
  animation: quickAccessFadeIn 160ms ease-out;
}

/* Pre.544: Chat-Archiv-Sheet.
   #157: Vollseite statt schwebendes Modal — gleiches Muster wie .hd-overlay/
   .hd-sheet (opaker Hintergrund, kein Backdrop/Blur, volle Viewport-Hoehe). */
.archive-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  z-index: 1300;
  animation: quickAccessFadeIn 160ms ease-out;
  padding: 0;
}
.archive-sheet {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100dvh;
  max-height: 100dvh;
  background: var(--bg);
  border: none;
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
}
.archive-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Pre.991: oberer Safe-Area-Inset (native Hülle). */
  padding: max(14px, env(safe-area-inset-top)) 16px 14px;
  border-bottom: 1px solid var(--hairline);
}
.archive-head strong {
  font-family: var(--font-display);
  font-size: 16px;
}
.archive-toolbar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--hairline);
}
.archive-newconv {
  width: 100%;
}
.archive-back {
  background: none;
  border: none;
  color: var(--ember);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 6px 4px 0;
}
/* Pre.550: Unterhaltungs-Liste — eine Karte pro Unterhaltung. */
.archive-conv {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  text-align: left;
  padding: 11px 13px;
  border-radius: 11px;
  border: 1px solid var(--hairline);
  background: var(--bg-elev-2);
  cursor: pointer;
  transition: border-color 160ms var(--ease-soft);
}
.archive-conv:hover {
  border-color: color-mix(in srgb, var(--ember) 35%, var(--hairline-strong));
}
.archive-conv-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.archive-conv-meta {
  font-size: 11.5px;
  color: var(--text-soft);
  font-feature-settings: "tnum";
}
.archive-search,
.archive-date,
.archive-role {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text);
  background: var(--bg-elev-2);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 7px 10px;
}
.archive-search {
  width: 100%;
}
.archive-search:focus,
.archive-date:focus,
.archive-role:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--ember) 40%, var(--hairline-strong));
}
.archive-dash {
  color: var(--text-soft);
}
.archive-role {
  flex: none;
}
.archive-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* Vollseite: lesbare Maximalbreite mittig (wie HD-/Projekt-Detail-Body). */
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
}
.archive-empty {
  color: var(--text-soft);
  font-size: 14px;
  padding: 24px 0;
  text-align: center;
}
.archive-daysep {
  align-self: center;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-dim, var(--text-soft));
  margin: 8px 0 2px;
}
.archive-msg {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 11px;
  border-radius: 10px;
  background: var(--bg-elev-2);
  border: 1px solid var(--hairline);
  max-width: 92%;
}
.archive-bot {
  align-self: flex-start;
}
.archive-user {
  align-self: flex-end;
  background: color-mix(in srgb, var(--ember) 10%, var(--bg-elev-2));
}
.archive-msgmeta {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.archive-who {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.archive-time {
  font-size: 10.5px;
  color: var(--text-dim, var(--text-soft));
  font-feature-settings: "tnum";
}
.archive-img {
  display: block;
  margin-top: 4px;
  max-width: 220px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--hairline);
}
.archive-img img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 240px;
  object-fit: contain;
}
.archive-card {
  margin-top: 6px;
  max-width: 100%;
}
.archive-text {
  font-size: 13.5px;
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-word;
}
.archive-foot {
  padding: 12px 16px;
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.archive-foot .icm-btn {
  width: 100%;
}

/* === Mein Leben — Biografie-Lese-Sheet (Pre.554) =====================
 * Forked vom Archiv-Sheet (.archive-*), aber als ruhige Lese-Ansicht:
 * breitere Lesespalte (~720px), Serifen-Typografie, großzügige Abstände.
 * Mode-aware über die App-Tokens (--bg-elev, --text, --hairline …),
 * KEIN prefers-color-scheme. */
/* Pre.748: „Mein Leben" ist eine echte VOLLSEITE (wie Human Design) — kein
   abgedunkeltes 720px-Modal mehr.
   Architektur/DRY: Die Container-Optik (.book-overlay/.book-sheet/.book-head/
   .book-head-titles/.book-title/.book-head-actions/.book-body) teilt sich jetzt
   die .hd-Regeln (Human Design = Referenz, Essenz hängt schon dran) — eigene
   standalone Buch-Container-Regeln entfernt. Nur Buch-spezifische Teile
   (book-meta, book-tabs, book-chapter usw.) bleiben hier. */
/* Meta-Zeile: eigene, volle Zeile unter Titel + Aktionen — bricht nicht mehr
   in der schmalen Titel-Spalte um. */
.book-head .book-meta {
  flex: 1 0 100%;
  width: 100%;
  margin-top: 2px;
}
.book-meta {
  font-size: 12px;
  color: var(--text-soft);
  font-feature-settings: "tnum";
}
.book-rebuild-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 12px;
  color: var(--ember);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.book-rebuild-link:hover {
  color: var(--text);
}
.book-meta:empty {
  display: none;
}
/* #91: EIN geteilter Stil für die Kopf-Buttons (Aktualisieren + ⋯-Menü) —
   ersetzt die byte-identischen Doppel-Blöcke .book-refresh/.book-pdf (DRY).
   .book-pdf selbst ist raus: PDF lebt jetzt im ⋯-Menü. */
.book-refresh,
.book-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--ember);
  background: color-mix(in srgb, var(--ember) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--ember) 35%, var(--hairline));
  border-radius: 10px;
  padding: 7px 12px;
  cursor: pointer;
  transition:
    background 160ms var(--ease-soft),
    border-color 160ms var(--ease-soft),
    opacity 160ms var(--ease-soft);
}
.book-refresh:hover,
.book-more:hover {
  background: color-mix(in srgb, var(--ember) 14%, transparent);
}
.book-refresh:disabled,
.book-more:disabled {
  cursor: default;
  opacity: 0.6;
}
.book-refresh.is-busy .book-refresh-icon {
  animation: bookSpin 900ms linear infinite;
}
/* „Mein Leben" nutzt jetzt denselben geteilten Stimm-Picker (`.voice-picker`)
   wie HD/Essenz — eigene .book-voice/.book-voice-preview entfernt (DRY). */

/* --- Geteilte Lib-Icons + Icon-Button (frontend/lib/icons.ts) ---
   Inline-Styles → Klassen (Architekt #2). Werte byte-äquivalent übernommen
   (var-mit-Fallback), damit die Optik unverändert bleibt. */
.lib-icon {
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
}
.icon-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 0.85em;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  background: var(--c-surface-2, rgba(0, 0, 0, 0.05));
  color: var(--c-text, inherit);
  border: 1px solid var(--c-border, rgba(0, 0, 0, 0.08));
  transition: background 120ms ease;
}
.icon-button:hover {
  background: var(--c-surface-3, rgba(0, 0, 0, 0.1));
}

/* --- Geteilter Vorlese-Player (Human Design + Essenz-Spiegel + „Mein Leben") ---
   EINE Optik für alle drei: Stimm-Dropdown + Probe-Knopf + Play/Pause,
   modelliert nach dem „Mein Leben"-Goldstandard (.book-narrate/.book-voice). */
.narration-player {
  display: flex;
  flex-direction: column;
  /* Pre.931 (Martin: „Abstand Tab↔Player"): Player in dieselbe 1200px-Lesespalte
     wie .book-tabs/.hd-body, mit gleichem 32px-Seiten-Padding → die Player-Leiste
     fluchtet LINKS mit Tabs + Titel + Text (vorher mittig zentriert = „verloren/
     zu breit"). Die Leiste selbst (.player-bar) bleibt schmal. Mobil: 16px-Rand. */
  align-items: flex-start;
  /* pre.944 (Martin, mehrfach gefordert): klarer Abstand zwischen der Tab-Leiste
     (.book-tabs, mit Border unten) und dem Player — vorher klebte der Player
     direkt an den Tabs. Einheitlich für alle 3 Lese-Seiten (Buch/HD/Essenz). */
  margin-top: 24px;
  gap: 12px;
  width: 100%;
  max-width: 1200px;
  align-self: center;
  padding: 0 32px;
  box-sizing: border-box;
}
.narration-player .player-bar {
  width: 100%;
  max-width: 680px;
}
@media (max-width: 767px) {
  .narration-player {
    padding: 0 16px;
  }
}
/* Abschnitts-Titel im Blätter-Modus (Human Design): „2/5 · Autorität". */
.narration-section-title {
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
  font-size: 12px;
  font-weight: 600;
  color: var(--ember);
  text-align: center;
  padding: 2px 0;
  letter-spacing: 0.01em;
}
.narration-section-title[hidden] {
  display: none;
}
/* Pre.975: Quelle-Zeile über dem Vorlese-Player (Hörfassung ↔ Original). */
.narration-source-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 6px;
}
.narration-source-row:empty {
  display: none;
}
.narration-source-label {
  font-size: 12.5px;
  color: var(--text-dim, #8a8a8a);
}
.voice-picker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
/* Pre.930 (Martin): Stimmen-Picker aus den Playern entfernen — die Stimme ist
   eine Einmal-Einstellung und lebt nur noch in den Einstellungen (Sub-Tab
   „Sprache & Anruf"). Der Settings-Picker (.settings-field.voice-picker) bleibt;
   nur die Player-Variante wird ausgeblendet → kein „falscher Abstand" mehr. */
.voice-picker:not(.settings-field) {
  display: none;
}
.voice-picker-select {
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--text-soft);
  background: var(--bg-elev-2);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 5px 7px;
  /* Breit genug für die längeren Labels (z.B. „♀ Laura · ElevenLabs (Credits
     nötig)") — auf schmalen Screens schrumpft es und kürzt mit Ellipse. */
  max-width: 280px;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: color 160ms var(--ease-soft);
}
.voice-picker-select:hover {
  color: var(--text);
}
.voice-picker-preview {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  color: var(--ember);
  background: color-mix(in srgb, var(--ember) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--ember) 35%, var(--hairline));
  border-radius: 10px;
  cursor: pointer;
  transition:
    background 160ms var(--ease-soft),
    border-color 160ms var(--ease-soft),
    opacity 160ms var(--ease-soft);
}
.voice-picker-preview:hover {
  background: color-mix(in srgb, var(--ember) 14%, transparent);
}
.voice-picker-preview:disabled {
  cursor: default;
  opacity: 0.6;
}
/* === Geteilte Player-Leiste (Play/Pause + Seek + Zeit + Gesamt) ===
   EINE Optik + EINE Funktion für „Mein Leben", Human Design und Essenz-Spiegel
   (buildPlayerBar). Modelliert nach dem „Mein Leben"-Goldstandard. */
.player-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--ember) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--ember) 18%, var(--hairline));
}
.player-bar-play {
  display: inline-flex;
  /* Pre.811: FESTE Breite — die wechselnden Labels (Vorlesen/Bereitet
     vor/Pause/Erneut versuchen) liessen den Knopf wachsen und die ganze
     Leiste springen; Martin traf dadurch den PTT-Knopf darunter. */
  min-width: 120px;
  justify-content: center;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--ember);
  background: color-mix(in srgb, var(--ember) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--ember) 35%, var(--hairline));
  border-radius: 10px;
  padding: 6px 10px;
  cursor: pointer;
  transition:
    background 160ms var(--ease-soft),
    border-color 160ms var(--ease-soft),
    opacity 160ms var(--ease-soft);
}
.player-bar-play:hover {
  background: color-mix(in srgb, var(--ember) 14%, transparent);
}
.player-bar-play:disabled {
  cursor: default;
  opacity: 0.6;
}
/* Kapitel-Blätter-Buttons (nur „Mein Leben") — rund, flankieren den Play-Knopf. */
.player-bar-skip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  color: var(--ember);
  background: color-mix(in srgb, var(--ember) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--ember) 28%, var(--hairline));
  border-radius: 50%;
  cursor: pointer;
  transition:
    background 160ms var(--ease-soft),
    border-color 160ms var(--ease-soft),
    opacity 160ms var(--ease-soft);
}
.player-bar-skip:hover:not(:disabled) {
  background: color-mix(in srgb, var(--ember) 14%, transparent);
}
.player-bar-skip:disabled {
  cursor: default;
  opacity: 0.35;
}
/* Pre.976: Download-Knopf (ganzes MP3) — gleiche runde Optik wie Skip. */
.player-bar-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  margin-left: 4px;
  color: var(--ember);
  background: color-mix(in srgb, var(--ember) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--ember) 28%, var(--hairline));
  border-radius: 50%;
  cursor: pointer;
  transition:
    background 160ms var(--ease-soft),
    border-color 160ms var(--ease-soft),
    opacity 160ms var(--ease-soft);
}
.player-bar-download:hover:not(:disabled) {
  background: color-mix(in srgb, var(--ember) 14%, transparent);
}
.player-bar-download:disabled {
  cursor: default;
  opacity: 0.35;
}
.player-bar-seek {
  flex: 1;
  min-width: 0;
  height: 22px;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;
}
.player-bar-seek:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--ember) 60%, transparent);
  outline-offset: 4px;
  border-radius: 6px;
}
.player-bar-seek::-webkit-slider-runnable-track {
  height: 5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ember) 26%, var(--hairline));
}
.player-bar-seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  margin-top: -6px;
  border-radius: 50%;
  background: var(--ember);
  border: 2px solid var(--bg-elev);
  box-shadow: 0 1px 4px color-mix(in srgb, var(--ember) 35%, transparent);
}
.player-bar-seek:hover::-webkit-slider-thumb {
  background: var(--ember-soft);
}
.player-bar-seek::-moz-range-track {
  height: 5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ember) 26%, var(--hairline));
}
.player-bar-seek::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--ember);
  border: 2px solid var(--bg-elev);
  box-shadow: 0 1px 4px color-mix(in srgb, var(--ember) 35%, transparent);
}
.player-bar-time {
  flex: 0 0 auto;
  /* Pre.929: App-Schrift statt Monospace (wirkte „technisch/Telefon"); tabular-nums
     hält die Ziffern trotzdem bündig. */
  font-family: var(--font-body);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  color: var(--text-soft);
  white-space: nowrap;
  /* Pre.811: Platz reservieren — leer→0:00/3:24 schob sonst die Zeile. */
  min-width: 86px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Pre.811: Mobil Icon-only — 134px-Knopf wuerde die Seek-Leiste erdruecken;
   48px fix haelt die Position genauso stabil. */
@media (max-width: 480px) {
  .player-bar-play {
    min-width: 48px;
  }
  .player-bar-play .player-bar-play-label {
    display: none;
  }
  .player-bar-time {
    min-width: 72px;
  }
}
.player-bar-total {
  flex: 0 0 auto;
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ember);
  background: color-mix(in srgb, var(--ember) 10%, transparent);
  border-radius: 999px;
  padding: 3px 9px;
  white-space: nowrap;
  font-feature-settings: "tnum";
}
.player-bar-total[hidden] {
  display: none;
}

/* Compound-Selektor: muss die WEITER UNTEN definierte .book-spinner-Basis
   (34px) überstimmen — sonst rendert der Inline-Spinner im Vorlesen-/Probe-
   Button mit 34px+ und der Button wächst riesig. */
.book-spinner.book-spinner--sm {
  width: 14px;
  height: 14px;
  border-width: 2px;
  display: inline-block;
  vertical-align: middle;
}
.book-error {
  margin: 12px 20px 0;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 13px;
  color: var(--error);
  background: color-mix(in srgb, var(--error) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--error) 35%, var(--hairline));
}
/* Tab-Leiste: Buch | Wissen | Zeitleiste */
.book-tabs {
  display: flex;
  gap: 4px;
  /* pre.917 (Martin): Tab-Leiste auf Textbreite — bündig zur 1200px-Lesespalte
     (vorher volle Sheet-Breite, stand über den Text hinaus). align-self/max-width
     wie .hd-head/.hd-body; padding-x = Body-Padding (32px), damit die Tab-Labels
     mit dem Prosa-Text fluchten. */
  padding: 8px 32px 0;
  border-bottom: 1px solid var(--hairline);
  align-self: center;
  width: 100%;
  max-width: 1200px;
}
.book-tab {
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-soft);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 9px 12px 10px;
  cursor: pointer;
  transition:
    color 160ms var(--ease-soft),
    border-color 160ms var(--ease-soft);
}
.book-tab:hover {
  color: var(--text);
}
.book-tab.is-active {
  color: var(--ember);
  border-bottom-color: var(--ember);
}
/* Player-Leiste „Mein Leben": jetzt die GETEILTE `.player-bar` (siehe oben) —
   eigene .book-player/.book-seek/.book-time/.book-total entfernt (DRY). */
/* Hörbuch-Kapitelliste (klappbar, direkt unter dem Player) */
.book-chapters {
  border-bottom: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--ember) 3%, transparent);
}
.book-chapters[hidden] {
  display: none;
}
.book-chapters-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 20px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-soft);
}
.book-chapters-summary::-webkit-details-marker {
  display: none;
}
.book-chapters-summary::after {
  content: "";
  width: 8px;
  height: 8px;
  margin-left: auto;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 160ms var(--ease-soft);
}
.book-chapters[open] > .book-chapters-summary::after {
  transform: rotate(-135deg);
}
.book-chapters-summary-label {
  letter-spacing: 0.02em;
}
.book-chapters-total {
  font-weight: 500;
  color: var(--text-soft);
  font-feature-settings: "tnum";
}
.book-chapters-list {
  display: flex;
  flex-direction: column;
  max-height: 220px;
  overflow-y: auto;
  padding: 0 12px 8px;
}
.book-chap-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
  font-family: var(--font-body);
  color: var(--text);
  transition: background 140ms var(--ease-soft);
}
.book-chap-row:hover {
  background: color-mix(in srgb, var(--ember) 8%, transparent);
}
.book-chap-row.is-active {
  background: color-mix(in srgb, var(--ember) 12%, transparent);
}
.book-chap-row.is-active .book-chap-title {
  color: var(--ember);
  font-weight: 600;
}
.book-chap-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--ember) 45%, var(--hairline));
  background: transparent;
}
.book-chap-dot.is-loaded {
  background: var(--ember);
  border-color: var(--ember);
}
.book-chap-title {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.book-chap-dur {
  flex: 0 0 auto;
  font-size: 11.5px;
  color: var(--text-soft);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.book-loading {
  color: var(--text-soft);
  font-family: var(--font-body);
  font-size: 14px;
  padding: 24px 0;
  text-align: center;
}
.book-chapter--life p {
  margin: 0 0 1.1em;
}
.book-chapter--life h2,
.book-chapter--life h3,
.book-chapter--life h4 {
  font-family: var(--font-display);
  line-height: 1.3;
  margin: 1.5em 0 0.5em;
}
.book-chapter--life h2 {
  font-size: 1.3em;
}
.book-chapter--life h3 {
  font-size: 1.12em;
}
.book-chapter--life ul,
.book-chapter--life ol {
  margin: 0 0 1.1em;
  padding-left: 1.4em;
}
.book-chapter--life li {
  margin: 0.25em 0;
}
.book-chapter--life a {
  color: var(--ember);
}

/* --- Kapitel-Mitlauf (Follow-along beim Vorlesen) ----------------------- */
/* Aktuell vorgelesenes Kapitel: dezenter Ember-Akzent links + zarter Tint.
   Mode-aware über die --ember-Tokens, weicher Übergang. */
.book-chapter--life h2.book-follow-chapter,
.book-chapter--life h3.book-follow-chapter {
  position: relative;
  color: var(--ember);
  padding-left: 12px;
  border-left: 3px solid var(--ember);
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--ember) 12%, transparent) 0%,
    transparent 70%
  );
  border-radius: 0 8px 8px 0;
  transition:
    background 220ms var(--ease-soft),
    color 220ms var(--ease-soft),
    border-color 220ms var(--ease-soft);
}
/* Aktueller Absatz (satzweise Annäherung): weicher Ember-Tint + dünner
   Akzent links. Subtil, in beiden Modi gut lesbar. */
.book-chapter--life p.book-follow-para {
  background: color-mix(in srgb, var(--ember) 9%, transparent);
  box-shadow: inset 3px 0 0 0 color-mix(in srgb, var(--ember) 55%, transparent);
  border-radius: 0 6px 6px 0;
  padding: 0.15em 10px;
  margin-left: -10px;
  transition:
    background 220ms var(--ease-soft),
    box-shadow 220ms var(--ease-soft);
}
@media (prefers-reduced-motion: reduce) {
  .book-chapter--life h2.book-follow-chapter,
  .book-chapter--life h3.book-follow-chapter,
  .book-chapter--life p.book-follow-para {
    transition: none;
  }
}

/* Inhaltsverzeichnis der Schwerpunkte */
.book-toc-head {
  font-family: var(--font-display);
  font-size: 1.05em;
  letter-spacing: 0.02em;
  color: var(--text-soft);
  margin: 1.8em 0 0.6em;
  padding-top: 1.2em;
  border-top: 1px solid var(--hairline);
}
.book-toc {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.book-toc-item {
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--bg-elev-2);
  overflow: hidden;
}
.book-toc-summary {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-body);
}
.book-toc-summary::-webkit-details-marker {
  display: none;
}
.book-toc-item[open] > .book-toc-summary {
  border-bottom: 1px solid var(--hairline);
}
.book-toc-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.book-toc-meta {
  font-size: 11.5px;
  color: var(--text-soft);
  font-feature-settings: "tnum";
}
.book-toc-body {
  padding: 14px 16px 18px;
  font-size: 15.5px;
  line-height: 1.7;
}
.book-toc-body p {
  margin: 0 0 0.9em;
}
.book-toc-body p:last-child {
  margin-bottom: 0;
}
.book-toc-body a {
  color: var(--ember);
}
/* Leerer Zustand */
.book-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 40px 12px;
  text-align: center;
}
.book-empty-lead {
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-soft);
  max-width: 36ch;
  margin: 0;
}
.book-empty-cta {
  min-width: 180px;
}
/* Langläufer-Anzeige während Opus schreibt */
.book-longrun {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 48px 12px;
  text-align: center;
}
.book-spinner {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid color-mix(in srgb, var(--ember) 25%, var(--hairline));
  border-top-color: var(--ember);
  animation: bookSpin 800ms linear infinite;
}
.book-longrun-text {
  font-family: var(--font-body);
  font-size: 14.5px;
  color: var(--text-soft);
  margin: 0;
  max-width: 32ch;
}
@keyframes bookSpin {
  to {
    transform: rotate(360deg);
  }
}
/* Mini-Leerzustand (Wissen / Zeitleiste) */
.book-empty--mini {
  padding: 32px 12px;
}
/* Wissen-Tab: Gruppen-Überschrift + Entitäten-Karten */
.book-group-head {
  font-family: var(--font-display);
  font-size: 1.05em;
  letter-spacing: 0.02em;
  color: var(--text-soft);
  margin: 1.6em 0 0.7em;
}
.book-group-head:first-child {
  margin-top: 0;
}
.book-entity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.book-entity {
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--bg-elev-2);
  padding: 12px 14px;
  font-family: var(--font-body);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.book-entity-name {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}
.book-entity-aliases {
  font-size: 12px;
  color: var(--text-soft);
  font-style: italic;
}
.book-entity-summary {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text);
  margin: 2px 0 0;
}
.book-entity-meta {
  font-size: 11.5px;
  color: var(--text-soft);
  font-feature-settings: "tnum";
  margin-top: 2px;
}
/* Zeitleiste-Tab: Datums-Spalte + Ereignis */
.book-timeline {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.book-event {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 14px;
  align-items: baseline;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--bg-elev-2);
  padding: 12px 14px;
  font-family: var(--font-body);
}
.book-event-date {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ember);
  font-feature-settings: "tnum";
  line-height: 1.4;
}
.book-event-main {
  min-width: 0;
}
.book-event-title {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
}
.book-event-desc {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-soft);
  margin: 4px 0 0;
}
/* Mobile: Vollbreite-Sheet, engere Lesepolster (wie Archiv) */
@media (max-width: 540px) {
  .book-overlay {
    padding: 0;
  }
  .book-sheet {
    width: 100%;
    max-width: 100%;
    max-height: 100dvh;
    max-height: 100dvh;
    height: 100%;
    height: 100dvh;
    border-radius: 0;
    border: none;
  }
  /* Kopf: Titel-Block oben, Aktionsleiste umbricht darunter — kein Overflow. */
  .book-head {
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 8px;
    padding: 12px 14px;
    padding-top: max(12px, env(safe-area-inset-top));
  }
  /* #91: Kopf bleibt EINE Zeile — ← · Titel · ↻ · ⋯. Vorher brachen Titel
     und Aktionen in eigene volle Zeilen um (drei gestapelte Reihen, unruhig). */
  .book-head-titles {
    flex: 1 1 auto;
    min-width: 0;
  }
  .book-title {
    font-size: 17px;
  }
  .book-head-actions {
    flex: 0 0 auto;
    gap: 6px;
    margin-left: auto;
  }
  .book-refresh-label {
    display: none;
  }
  /* Icon-Buttons: kompakt aber tappbar (≥ 32px). */
  .book-refresh,
  .book-more {
    padding: 8px 10px;
    min-height: 34px;
  }
  /* Lese-Body: komfortable Größe, lange Wörter/Links umbrechen. */
  .book-body {
    padding: 18px 16px 32px;
    padding-bottom: max(32px, env(safe-area-inset-bottom));
    font-size: 16px;
    line-height: 1.6;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .book-chapter--life h2 {
    font-size: 1.22em;
  }
  .book-chapter--life h3 {
    font-size: 1.08em;
  }
  .book-chapter--life a,
  .book-toc-body a,
  .book-entity-summary,
  .book-event-desc {
    overflow-wrap: anywhere;
  }
  .book-tabs {
    padding: 6px 12px 0;
  }
  /* Geteilte Player-Leiste: größerer Touch-Slider auf dem Phone (gilt für „Mein
     Leben", Human Design & Essenz gleichermaßen). */
  .player-bar {
    gap: 10px;
  }
  .player-bar-seek {
    height: 28px;
  }
  .player-bar-seek::-webkit-slider-thumb {
    width: 18px;
    height: 18px;
    margin-top: -7px;
  }
  .player-bar-seek::-moz-range-thumb {
    width: 18px;
    height: 18px;
  }
  .player-bar-time {
    font-size: 12px;
  }
  .player-bar-total {
    font-size: 10.5px;
    padding: 2px 7px;
  }
  /* Hörbuch-Kapitelliste: vollbreite, tappbare Zeilen. */
  .book-chapters-summary {
    padding: 10px 14px;
  }
  .book-chapters-list {
    max-height: 46vh;
    padding: 0 8px 8px;
  }
  .book-chap-row {
    padding: 11px 10px;
    min-height: 44px;
  }
  .book-entity-grid {
    grid-template-columns: 1fr;
  }
  .book-event {
    grid-template-columns: 88px 1fr;
    gap: 10px;
  }
}

/* === Human Design — Lese-Sheet (spiegelt .book-*) ====================== */
.hd-overlay,
.book-overlay {
  position: fixed;
  inset: 0;
  /* Pre.733: KEIN dunkler Modal-Hintergrund mehr — die Analyse ist eine echte
     Vollseite (in die Seite „eingehängt"), nicht ein schwebendes Modal. */
  background: var(--bg);
  display: flex;
  flex-direction: column;
  z-index: 1300;
  animation: quickAccessFadeIn 160ms ease-out;
  padding: 0;
}
.hd-sheet,
.book-sheet {
  display: flex;
  flex-direction: column;
  /* Vollseite: füllt den ganzen Viewport, keine Modal-Rahmen/Schatten. */
  width: 100%;
  height: 100dvh;
  max-height: 100dvh;
  background: var(--bg);
  border: none;
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
}
/* Teilen-Dialog (über der Vollseite) — ein Einstieg für Link/Toggle/Widerrufen. */
.hd-share-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1700;
  padding: var(--space-3);
}
.hd-share-card {
  width: min(480px, 94vw);
  background: var(--bg-elev, var(--bg));
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hd-share-title {
  margin: 0;
  font-size: 17px;
  color: var(--text);
}
.hd-share-note {
  margin: 0;
  font-size: 13px;
  color: var(--muted, #6c6c74);
  line-height: 1.5;
}
.hd-share-linkrow {
  display: flex;
  gap: 8px;
}
.hd-share-link {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  font-size: 13px;
  background: var(--bg);
  color: var(--text);
}
.hd-share-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
}
.hd-share-actions {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
}
.hd-head,
.book-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 10px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--hairline);
  /* mit dem zentrierten Body fluchten (gleiche max-Breite, mittig). */
  align-self: center;
  width: 100%;
  max-width: 1200px;
}
/* Pre.993: .book-head („Mein Leben") sitzt bündig am Bildschirmrand → oberer
   Safe-Area-Inset, sonst Kollision mit Statusleiste. Überschreibt die Basis-Regel
   oben (deren padding-Shorthand den Inset der Mobile-Media-Query zurücksetzte).
   Gleiche Straffung wie .topbar (env − space-4); Browser/PWA: env=0 → 12px. */
.hd-head,
.book-head {
  padding-top: calc(12px + env(safe-area-inset-top));
}
.hd-head-titles,
.book-head-titles {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1 1 auto;
}
.hd-title,
.book-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text);
}
.hd-head-actions,
.book-head-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
/* Pre.932 (Martin: HD „einsamer Pfeil über Human Design"): auf schmalen Screens
   den Kopf in ZWEI saubere Zeilen — Zeile 1: Zurück-Pfeil + Titel (zusammen,
   links), Zeile 2: Aktions-Buttons (volle Breite, dürfen umbrechen). Verhindert
   das 3-Zeilen-Stranden bei Seiten mit mehreren Aktionen (HD). Einheitlich für
   alle 3 Lese-Seiten (geteilte .hd-head/.book-head). */
@media (max-width: 767px) {
  /* Pre.933: GRID statt flex-wrap — deterministisch 2 Zeilen. Zeile 1: Pfeil
     (Spalte auto) + Titel (1fr). Zeile 2+: Aktionen / Meta über volle Breite.
     Verhindert das flex-wrap-Stranden (Pfeil allein über dem Titel). */
  .hd-head,
  .book-head {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 10px;
    row-gap: 8px;
  }
  .hd-head-actions,
  .book-head-actions,
  .book-meta {
    grid-column: 1 / -1;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
}
/* „Kunde anlegen"-Modal (aus dem HD-Sheet) — zentriertes Overlay über allem. */
.cust-overlay {
  position: fixed;
  inset: 0;
  z-index: 1700;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.cust-modal {
  width: 100%;
  max-width: 440px;
  max-height: 90vh;
  overflow-y: auto;
}
.cust-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.cust-notice {
  color: var(--error);
  font-size: 13px;
  margin: 6px 0 0;
}
/* Pre.652: HD-Header-Buttons (Auswertung neu · Verbindung · Print) laufen jetzt
   über das einheitliche .btn-System (btn--ghost btn--sm). Eigene Button-CSS hier
   entfernt (abgeschlankt); `.hd-refresh` bleibt nur als Hook für den Busy-Spin
   und die Mobile-Tap-Größe. */
.hd-refresh.is-busy .hd-refresh-icon {
  animation: bookSpin 900ms linear infinite;
}
/* Pre.647: Admin-Nutzerwahl im HD-Sheet (Superuser wechselt Charts). */
.hd-user-select {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  height: 34px; /* konsistente Höhe mit den Aktions-Buttons → bessere Proportion */
  padding: 0 32px 0 12px; /* rechts Platz für den Chevron, links ausgewogen */
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--ember) 30%, var(--hairline));
  background-color: color-mix(in srgb, var(--ember) 6%, var(--bg-elev));
  color: var(--text);
  max-width: 260px;
  cursor: pointer;
  /* Eigener Chevron statt des nativen Pfeils — konsistent über alle Browser. */
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' fill='none' stroke='%23999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 12px;
}
/* Ansichts-Wähler (Beide/Design/Persönlichkeit) im Aktions-Block — gleiche
   Höhe/Optik wie der Nutzer-Picker, nur etwas kompakter in der Breite. */
.hd-view-select {
  font-size: 12.5px;
  max-width: 230px;
}
.hd-body,
.book-body {
  flex: 1;
  overflow-y: auto;
  /* Vollseiten-Modus: Inhalt mittig auf lesbarer Breite (Chart groß, Text nicht
     über die ganze Bildschirmbreite). */
  align-self: center;
  width: 100%;
  max-width: 1200px;
  padding: 24px 32px 36px;
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1.75;
  color: var(--text);
}
/* Pre.929 (Martin: „Essenz schaut mobil scheiße aus"): Blocksatz NUR auf breiten
   Screens — auf dem Handy erzeugt justify hässliche Wort-Lücken/„Flüsse". Mobil:
   linksbündig + weniger Seitenrand + ruhigere Lese-Typo. Gilt für alle 3
   Lese-Seiten (Mein Leben/HD/Essenz), da sie sich .hd-body/.book-body teilen. */
@media (min-width: 768px) {
  .hd-body,
  .book-body {
    text-align: justify;
    hyphens: auto;
  }
}
@media (max-width: 767px) {
  .hd-body,
  .book-body {
    padding: 20px 16px 28px;
    font-size: 16px;
    line-height: 1.7;
  }
}
/* Bodygraph — INLINE-SVG, zentriert. Breiter, weil jetzt Planeten-Spalten
   links/rechts mitlaufen (Chart-Seitenverhältnis ~1.13:1). */
/* Chart-Container mit eigenem „Vergrößern"-Button oben rechts (Klick aufs Chart
   selbst ist für Hover/Tap-Tooltips reserviert). */
.hd-chart-wrap {
  position: relative;
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
}
.hd-chart-wrap[hidden] {
  display: none;
}
.hd-chart-zoom {
  position: absolute;
  top: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-soft);
  background: color-mix(in srgb, var(--bg-elev) 88%, transparent);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 5px 9px;
  cursor: pointer;
  backdrop-filter: blur(3px);
  transition:
    color 160ms var(--ease-soft),
    border-color 160ms var(--ease-soft),
    background 160ms var(--ease-soft);
}
.hd-chart-zoom:hover {
  color: var(--ember);
  border-color: color-mix(in srgb, var(--ember) 35%, var(--hairline));
  background: color-mix(in srgb, var(--ember) 8%, var(--bg-elev));
}

/* === Pan/Zoom-Overlay (svg-zoom.ts) — scharfe Detailansicht des Vektor-SVG === */
.svgzoom-overlay {
  position: fixed;
  inset: 0;
  z-index: 1700;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--bg) 92%, #000);
  backdrop-filter: blur(2px);
  touch-action: none;
  overscroll-behavior: contain;
}
.svgzoom-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
}
.svgzoom-stage.is-grabbing {
  cursor: grabbing;
}
.svgzoom-content {
  position: absolute;
  inset: 4vh 4vw;
  transform-origin: 0 0;
  will-change: transform;
}
.svgzoom-content svg {
  width: 100%;
  height: 100%;
  pointer-events: none; /* Gesten gehen an die Stage, nicht ins SVG */
  user-select: none;
}
.svgzoom-close {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--text);
  background: var(--bg-elev);
  border: 1px solid var(--hairline);
  cursor: pointer;
  z-index: 1;
}
.svgzoom-close:hover {
  color: var(--ember);
  border-color: color-mix(in srgb, var(--ember) 35%, var(--hairline));
}
.svgzoom-hint {
  position: absolute;
  bottom: max(12px, env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  color: var(--text-soft);
  background: var(--bg-elev);
  border: 1px solid var(--hairline);
  white-space: nowrap;
  pointer-events: none;
}
.hd-chart-img {
  display: block;
  width: 100%;
  /* Pre.607: deutlich größer (Sheet ist jetzt breiter) — nutzt den Platz. */
  max-width: 880px;
  height: auto;
  margin: 0 auto;
}
.hd-chart-img > svg {
  display: block;
  width: 100%;
  height: auto;
}
.hd-chart-img[hidden] {
  display: none;
}
/* Zentren reagieren auf Hover (Tooltip). */
.hd-chart-img .hd-center {
  transition: opacity 120ms ease;
}
.hd-chart-img .hd-center:hover {
  opacity: 0.78;
}
/* Schwebendes Zentren-Tooltip (folgt dem Cursor). */
.hd-center-tip {
  position: fixed;
  z-index: 2200;
  max-width: 264px;
  background: rgba(24, 24, 28, 0.97);
  color: #fff;
  padding: 10px 13px;
  border-radius: 12px;
  font-family:
    system-ui,
    -apple-system,
    "Segoe UI",
    sans-serif;
  font-size: 13px;
  line-height: 1.5;
  pointer-events: none;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.42);
}
.hd-center-tip[hidden] {
  display: none;
}
.hd-tip-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.hd-tip-name {
  font-weight: 700;
  font-size: 14px;
}
.hd-tip-badge {
  font-size: 11px;
  padding: 1px 8px;
  border-radius: 999px;
  font-weight: 600;
  white-space: nowrap;
}
.hd-tip-badge--def {
  background: rgba(192, 57, 43, 0.24);
  color: #f1b4ab;
}
.hd-tip-badge--open {
  background: rgba(255, 255, 255, 0.14);
  color: #d8d8de;
}
.hd-tip-fn {
  opacity: 0.82;
  margin-bottom: 5px;
}
.hd-tip-gate {
  font-size: 12.5px;
  margin-bottom: 5px;
  color: #f0d9a8; /* warmes Gold — hebt die „Tor X · Linie Y"-Zeile hervor */
}
.hd-tip-gate strong {
  color: #fff;
}
.hd-tip-state {
  font-size: 12.5px;
}
/* --- Essenz-Spiegel --------------------------------------------------------- */
.essence-sub {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--text-soft);
}
/* Pre.651: „Verlauf"/„Neu spiegeln" laufen jetzt über das einheitliche
   .btn-System (btn--ghost / btn--primary, beide btn--sm) — eigene Button-CSS
   hier entfernt (abgeschlankt). `.essence-verlauf`/`.essence-refresh` bleiben
   nur als Layout-Haken fürs Mobile-Wrapping. */
.essence-play {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.essence-play:disabled {
  opacity: 0.5;
  cursor: default;
}
.essence-voice {
  max-width: 190px;
}
/* Verlauf — Tages-Archiv */
.essence-day-label {
  margin: 10px auto 6px;
  font-weight: 700;
  color: var(--text);
}
.essence-back {
  display: inline-flex;
  margin-bottom: 10px;
}
.essence-history {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 6px auto 0;
}
.essence-history-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: left;
  padding: 12px 14px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--bg-elev);
  cursor: pointer;
  transition:
    background 120ms ease,
    border-color 120ms ease;
}
.essence-history-item:hover {
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}
.essence-history-date {
  font-weight: 700;
  font-size: 13.5px;
  color: var(--text);
}
.essence-history-excerpt {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-soft);
}

/* Pre.758: „Rechnungen"-Vollseite. Karten je Rechnung (Nr · Status · Kunde ·
   Summe) mit PDF-Link + „Jetzt absenden". Tokens-only, am .essence-history-
   Muster orientiert, .btn-System für die Aktionen. */
.invoices-body {
  padding: var(--space-4);
  overflow-y: auto;
}
.invoices-info {
  color: var(--text-soft);
  font-size: 14px;
  text-align: center;
  padding: var(--space-6) var(--space-3);
}
.invoices-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 760px;
  margin: 0 auto;
}
.invoice-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-m);
  background: var(--bg-elev);
}
.invoice-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.invoice-nr {
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
}
.invoice-status {
  font-size: 12px;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--surface-glass);
  color: var(--text-soft);
  white-space: nowrap;
}
.invoice-status--draft {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent);
}
.invoice-status--paid {
  background: color-mix(in srgb, #5b9d6b 18%, transparent);
  color: #5b9d6b;
}
.invoice-status--cancelled {
  background: color-mix(in srgb, var(--error) 14%, transparent);
  color: var(--error);
}
.invoice-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}
.invoice-cust {
  color: var(--text-soft);
  font-size: 14px;
}
.invoice-sum {
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.invoice-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: var(--space-1);
}
.invoice-note {
  font-size: 13px;
  color: var(--text-soft);
  margin: 0;
}

/* Pre.763: Rechnungs-PDF-Karte im Chat (Buttons statt roher Download-URL). */
.bubble.pdf-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.pdf-card-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
}
.pdf-card-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
/* Pre.650 (User-Wunsch): „Roter Faden"-CTA war ein riesiger Verlaufs-Block mit
   hartkodierten Farben (#fff/var(--error)/Schatten) → wirkte fremd. Jetzt schlank &
   token-basiert: dezente Accent-getönte Karte wie die Verlauf-Einträge, nur mit
   Accent-Titel als sanfter Hervorhebung. Theme-wechsel-sicher. */
.essence-synth-cta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
  margin: 4px auto 12px;
  padding: 10px 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--hairline));
  border-radius: 12px;
  cursor: pointer;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  transition:
    background 160ms var(--ease-soft),
    border-color 160ms var(--ease-soft);
}
.essence-synth-cta:hover {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--hairline));
}
.essence-synth-title {
  font-weight: 700;
  font-size: 13.5px;
  color: var(--accent);
}
.essence-synth-sub {
  font-size: 12px;
  color: var(--text-soft);
}
/* Wesenskern-Kurzleiste oben im Spiegel. */
.essence-core {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 4px auto 14px;
  padding: 12px 16px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text);
}
.essence-core b {
  color: var(--text-soft);
  font-weight: 600;
  margin-right: 4px;
}
.essence-foot {
  margin: 16px auto 4px;
  font-size: 12px;
  color: var(--text-soft);
  text-align: center;
}
/* Linksbuendige Variante (Verlauf-Intro) — vorher inline (Architekt 3). */
.essence-foot--left {
  text-align: left;
}
/* Lade-Anzeige (Spinner) während die LLM-Auswertung läuft. */
.hd-longrun {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 40px 12px;
  text-align: center;
}
.hd-longrun-text {
  font-family: var(--font-body);
  font-size: 14.5px;
  color: var(--text-soft);
  margin: 0;
  max-width: 32ch;
}
/* Kompakter Fakten-Block (Typ, Strategie, Autorität …). */
.hd-facts {
  display: flex;
  flex-direction: column;
  gap: 2px;
  /* Pre.609: zentriert + begrenzt — sonst zieht die Tabelle im breiten Sheet
     (1080px) über die volle Breite, während Chart (880) und Text (760) schmal
     sind → wirkte „kaputt"/inkonsistent. */
  margin: 22px auto 4px;
  width: 100%;
  font-family: var(--font-body);
  font-size: 14px;
}
.hd-fact {
  display: flex;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--hairline) 70%, transparent);
}
.hd-fact:last-child {
  border-bottom: none;
}
.hd-fact-label {
  flex: 0 0 40%;
  max-width: 160px;
  color: var(--text-soft);
  font-weight: 600;
}
.hd-fact-value {
  flex: 1 1 auto;
  color: var(--text);
}
/* Vorlesen-Zeile (Button + Stimm-Picker). */
.hd-narrate-row {
  display: flex;
  align-items: center;
  justify-content: center; /* zentriert — vorher klebte der Player links */
  gap: 8px;
  margin: 22px 0 6px;
}
.hd-narrate {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--ember);
  background: color-mix(in srgb, var(--ember) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--ember) 35%, var(--hairline));
  border-radius: 10px;
  padding: 7px 12px;
  cursor: pointer;
  transition:
    background 160ms var(--ease-soft),
    border-color 160ms var(--ease-soft),
    opacity 160ms var(--ease-soft);
}
.hd-narrate:hover {
  background: color-mix(in srgb, var(--ember) 14%, transparent);
}
.hd-narrate:disabled {
  cursor: default;
  opacity: 0.6;
}
/* --- Verbindung (Composite-Chart zweier Nutzer) -------------------------- */
.conn-select {
  max-width: 150px;
}
.conn-x {
  color: var(--text-soft);
  font-weight: 700;
  padding: 0 2px;
}
.conn-chart-img {
  max-width: 560px; /* schmaler — Composite hat keine Spalten */
}
.conn-legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 14px;
  justify-content: center;
  margin: 14px auto 4px;
  font-size: 13px;
  color: var(--text-soft);
}
.conn-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 4px;
  vertical-align: -1px;
}
.conn-dot--a {
  background: #2563eb;
}
.conn-dot--b {
  /* Person B = ORANGE (paart mit Blau/Violett). NICHT Rot — Rot = Design im HD. */
  background: #e8730c;
}
.conn-dot--both {
  /* „beide" = blau-orange gestrichelt (wie die Composite-Kanäle), keine 3. Farbe. */
  background: repeating-linear-gradient(45deg, #2563eb 0 3px, #e8730c 3px 6px);
}
.conn-section-title {
  max-width: 760px;
  margin: 20px auto 6px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}
/* Reihe für „Ausführliche Deutung" — zentriert wie die Deutung darüber. */
.conn-deep-row {
  max-width: 760px;
  margin: 10px auto 4px;
}
.conn-group {
  max-width: 760px;
  margin: 0 auto 14px;
  padding: 12px 14px;
  background: var(--bg-elev);
  border: 1px solid var(--hairline);
  border-radius: 12px;
}
.conn-group-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.conn-badge {
  font-size: 12.5px;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 999px;
}
.conn-badge--electromagnetic {
  background: color-mix(in srgb, #7c3aed 16%, transparent);
  color: #6b21d6;
}
.conn-badge--companionship {
  background: color-mix(in srgb, #2f9e6f 18%, transparent);
  color: #1d7a52;
}
.conn-badge--compromise {
  background: color-mix(in srgb, #d97706 18%, transparent);
  color: #b45309;
}
.conn-badge--dominance {
  background: color-mix(in srgb, var(--text) 12%, transparent);
  color: var(--text-soft);
}
.conn-group-count {
  font-size: 12px;
  color: var(--text-soft);
}
.conn-group-expl {
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-soft);
}
.conn-chan-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.conn-chan {
  font-size: 12.5px;
  padding: 4px 9px;
  background: var(--bg-elev-2);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  color: var(--text);
}

/* Deutung (Markdown-Body) — gleiche Lese-Typografie wie das Buch. */
.hd-interpretation {
  margin-top: 18px;
  /* Lesbare Zeilenlänge behalten, auch wenn das Sheet breit ist (sonst zu lange
     Zeilen). Zentriert unter dem breiten Chart. */
  margin-left: auto;
  margin-right: auto;
  /* Gleiche, lesbare Buch-Typografie (HD/Essenz heben sich auf den
     „Mein Leben"-Lesestandard: Display-Serife, große Schrift, ruhige Höhe). */
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1.75;
  color: var(--text);
}
.hd-interpretation p {
  margin: 0 0 0.7em;
}
.hd-interpretation h2,
.hd-interpretation h3,
.hd-interpretation h4 {
  font-family: inherit;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 1.05em 0 0.3em;
}
.hd-interpretation h2 {
  font-size: 1.05em;
}
.hd-interpretation h3 {
  font-size: 0.98em;
  color: var(--ember);
}
.hd-interpretation ul,
.hd-interpretation ol {
  margin: 0 0 0.7em;
  padding-left: 1.2em;
}
.hd-interpretation li {
  margin: 0.15em 0;
}
.hd-interpretation a {
  color: var(--ember);
}
/* Leer-/Fehler-Zustand (fehlende Geburtsdaten / Retry). */
.hd-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 36px 12px;
  text-align: center;
}
.hd-empty-lead {
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-soft);
  max-width: 38ch;
  margin: 0;
}
.hd-empty-cta {
  min-width: 180px;
}
/* Mobile: Vollbreite-Sheet (wie .book-*). */
@media (max-width: 540px) {
  .hd-overlay {
    padding: 0;
  }
  .hd-sheet {
    width: 100%;
    max-width: 100%;
    max-height: 100dvh;
    max-height: 100dvh;
    height: 100%;
    height: 100dvh;
    border-radius: 0;
    border: none;
  }
  .hd-head {
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 8px;
    padding: 12px 14px;
    padding-top: max(12px, env(safe-area-inset-top));
  }
  .hd-head-titles {
    flex: 1 1 100%;
  }
  .hd-title {
    font-size: 17px;
  }
  /* Pre.647 (User-Wunsch): Header-Aktionen auf Mobile als TEXT-Buttons wie in
     der Web-Ansicht — man soll lesen können, was sie tun. Sie dürfen umbrechen
     statt überzulaufen; der „Print"-Button ist bewusst kurz beschriftet, damit
     „Auswertung neu" + „Verbindung" daneben Platz für ihren Text haben. */
  .hd-head-actions {
    flex: 1 1 100%;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-start;
  }
  /* Pre.652: Größe/Padding kommen jetzt von .btn--sm; hier nur noch die
     Tap-Ziel-Höhe als additiver Hook (kein Konflikt mit .btn). */
  .hd-refresh {
    min-height: 40px;
  }
  .hd-user-select {
    max-width: 100%;
    width: 100%;
    min-height: 38px;
  }
  /* Der Ansichts-Wähler bleibt schmal (kein full-width wie der Nutzer-Picker). */
  .hd-view-select {
    width: auto;
    max-width: 100%;
    min-height: 40px;
  }
  /* Pre.647 (User-Wunsch): Essenz-Spiegel smartphone-tauglich — Kopf bricht
     sauber um, der Vorlese-Player + die Knöpfe „Verlauf"/„Neu spiegeln" laufen
     nicht mehr aus dem Rand, sondern bekommen volle Breite / teilen sich die
     Zeile. */
  .essence-overlay .hd-head {
    position: relative;
  }
  .essence-overlay .hd-head-actions {
    flex-wrap: wrap;
    gap: 8px;
  }
  .essence-player {
    flex: 1 1 100%;
    width: 100%;
  }
  .essence-voice {
    flex: 1 1 auto;
    max-width: none;
  }
  /* Pre.648: Buttons NICHT mehr auf volle Breite ziehen (waren „gewaltig") —
     kompakt, natürliche Breite, links gruppiert unter dem Player. */
  .essence-verlauf,
  .essence-refresh {
    flex: 0 0 auto;
    white-space: nowrap;
  }
  .essence-overlay .close-btn {
    position: absolute;
    top: 14px;
    right: 14px;
  }
  .essence-sub {
    padding-right: 36px;
  }
  .essence-core {
    font-size: 13px;
    gap: 6px 14px;
  }
  .hd-body {
    padding: 18px 16px 32px;
    padding-bottom: max(32px, env(safe-area-inset-bottom));
    font-size: 16px;
    line-height: 1.6;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .hd-fact {
    gap: 10px;
  }
  .hd-fact-label {
    flex-basis: 42%;
  }
  .hd-narrate-row {
    flex-wrap: wrap;
  }
  .hd-narrate {
    padding: 8px 10px;
    min-height: 34px;
  }
  .hd-interpretation h2 {
    font-size: 1.22em;
  }
  .hd-interpretation h3 {
    font-size: 1.08em;
  }
  .hd-interpretation a {
    overflow-wrap: anywhere;
  }
}

/* === Nutzer-Verwaltung (Admin-Tool) — spiegelt .hd-* ===================== */
/* #157: Vollseite statt schwebendes Modal — gleiches Muster wie .hd-overlay/
   .hd-sheet (opaker Hintergrund, kein Backdrop/Blur, volle Viewport-Hoehe).
   Auf Mobil (<=540px) war das schon Vollseite — der @media-Block unten
   bleibt unveraendert gueltig. */
.usr-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  z-index: 1300;
  animation: quickAccessFadeIn 160ms ease-out;
  padding: 0;
}
.usr-sheet {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100dvh;
  max-height: 100dvh;
  background: var(--bg);
  border: none;
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
}
.usr-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 12px;
  /* Pre.991: oberer Safe-Area-Inset (native Hülle). */
  padding: max(16px, env(safe-area-inset-top)) 20px 16px;
  border-bottom: 1px solid var(--hairline);
}
.usr-head-titles {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1 1 auto;
}
.usr-title {
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 1.2;
  color: var(--text);
}
.usr-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.usr-error {
  margin: 12px 20px 0;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 13px;
  color: var(--error);
  background: color-mix(in srgb, var(--error) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--error) 35%, var(--hairline));
}
.usr-error.usr-error--ok {
  color: var(--text);
  background: color-mix(in srgb, var(--ember) 12%, transparent);
  border-color: color-mix(in srgb, var(--ember) 35%, var(--hairline));
}
.usr-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-family: var(--font-body);
  color: var(--text);
  /* Vollseite: lesbare Maximalbreite mittig (wie HD-/Projekt-Detail-Body). */
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
}
/* Card (Formular + jede Nutzer-Zeile). Radius 12, var-getrieben. */
.usr-card {
  background: var(--bg-elev-2, var(--bg-elev));
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 16px;
}
/* Formular-Card (Modifier auf .usr-card) — eigener Block für künftiges Tuning. */
.usr-form {
  display: block;
}
/* Nutzer-Zeile (Modifier auf .usr-card). */
.usr-user {
  display: block;
}
.usr-card-title {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}
.usr-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.usr-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.usr-field-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-soft);
}
.usr-input {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 8px 10px;
  width: 100%;
  box-sizing: border-box;
  min-height: 36px;
}
.usr-input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--ember) 50%, var(--hairline));
}
.usr-hint {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-soft);
}
.usr-check-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 13.5px;
  color: var(--text);
  cursor: pointer;
}
.usr-check-row--inline {
  margin-top: 0;
}
.usr-check {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--ember);
}
.usr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  border-radius: 10px;
  padding: 8px 14px;
  cursor: pointer;
  min-height: 36px;
  transition:
    background 160ms var(--ease-soft),
    border-color 160ms var(--ease-soft),
    opacity 160ms var(--ease-soft);
}
.usr-btn:disabled {
  cursor: default;
  opacity: 0.6;
}
.usr-btn--primary {
  margin-top: 14px;
  color: var(--ember);
  background: color-mix(in srgb, var(--ember) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--ember) 35%, var(--hairline));
}
.usr-btn--primary:hover:not(:disabled) {
  background: color-mix(in srgb, var(--ember) 14%, transparent);
}
.usr-edit-actions .usr-btn--primary,
.usr-confirm .usr-btn,
.usr-user-actions .usr-btn {
  margin-top: 0;
}
.usr-btn--ghost {
  color: var(--text-soft);
  background: none;
  border: 1px solid var(--hairline);
}
.usr-btn--ghost:hover:not(:disabled) {
  color: var(--text);
  background: color-mix(in srgb, var(--text) 6%, transparent);
}
.usr-btn--danger {
  color: var(--error);
  background: color-mix(in srgb, var(--error) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--error) 35%, var(--hairline));
}
.usr-btn--danger:hover:not(:disabled) {
  background: color-mix(in srgb, var(--error) 16%, transparent);
}
.usr-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.usr-list-state {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 24px 4px;
  font-size: 14px;
  color: var(--text-soft);
}
.usr-user-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px 16px;
}
.usr-user-id {
  min-width: 0;
  flex: 1 1 240px;
}
.usr-user-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  overflow-wrap: anywhere;
}
.usr-me-tag {
  font-weight: 400;
  color: var(--text-soft);
  font-size: 13px;
}
.usr-user-email {
  font-size: 13px;
  color: var(--text-soft);
  overflow-wrap: anywhere;
}
/* Pre.778: Geburtsdaten-Zeile in der Nutzer-Karte + „Neuer Nutzer"-Toggle. */
.usr-user-birth {
  font-size: 12.5px;
  color: var(--text-soft);
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.usr-new-toggle {
  align-self: flex-start;
  margin-bottom: 12px;
}
.usr-user-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.usr-badge {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-soft);
  background: color-mix(in srgb, var(--text) 8%, transparent);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  padding: 2px 7px;
}
.usr-user-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  flex: 0 0 auto;
}
.usr-user-seen {
  font-size: 12px;
  color: var(--text-soft);
}
.usr-user-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.usr-edit {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid color-mix(in srgb, var(--hairline) 70%, transparent);
}
.usr-edit-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.usr-confirm {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--error) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--error) 30%, var(--hairline));
}
.usr-confirm-text {
  font-size: 13.5px;
  color: var(--text);
  flex: 1 1 auto;
}
/* Mobile: Vollbreite-Sheet (wie .hd-*/
.book-*). */
@media (max-width: 540px) {
  .usr-overlay {
    padding: 0;
  }
  .usr-sheet {
    width: 100%;
    max-width: 100%;
    max-height: 100dvh;
    max-height: 100dvh;
    height: 100%;
    height: 100dvh;
    border-radius: 0;
    border: none;
  }
  .usr-head {
    padding: 12px 14px;
    padding-top: max(12px, env(safe-area-inset-top));
  }
  .usr-title {
    font-size: 17px;
  }
  .usr-body {
    padding: 14px;
    padding-bottom: max(14px, env(safe-area-inset-bottom));
  }
  .usr-form-grid {
    grid-template-columns: 1fr;
  }
  .usr-user-top {
    flex-direction: column;
  }
  .usr-user-meta {
    align-items: flex-start;
  }
}

@keyframes quickAccessFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.quick-access-sheet {
  width: 100%;
  max-width: 520px;
  background: var(--bg-elev);
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  padding: var(--space-4) var(--space-3) var(--space-5);
  box-shadow: 0 -16px 40px rgba(0, 0, 0, 0.35);
  animation: quickAccessSlideUp 240ms var(--ease-soft, ease-out);
}

@keyframes quickAccessSlideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

.quick-access-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}

.quick-access-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 8px;
  background: var(--bg-deep);
  color: var(--text);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  transition:
    background 160ms ease,
    border-color 160ms ease,
    transform 80ms;
}

.quick-access-btn:hover {
  background: color-mix(in srgb, var(--ember) 8%, var(--bg-deep));
  border-color: color-mix(in srgb, var(--ember) 35%, var(--hairline));
  color: var(--ember);
}

.quick-access-btn:active {
  transform: scale(0.96);
}

.quick-access-btn span {
  font-weight: 500;
  letter-spacing: 0.02em;
}

@media (max-width: 480px) {
  .quick-access-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
  .quick-access-btn {
    padding: 12px 6px;
    font-size: 11px;
  }
}

/* Pre.139: Wenn der User in einem anderen View als chat ist, wird der
   Anruf-Button zum "Zurück zu Voice"-Button. Visuell gleicher Phone-
   Look, aber sage-grün statt orange — klares Signal "tap = zurück". */
body[data-active-view]:not([data-active-view="chat"]) .dock-btn--call {
  background: color-mix(in srgb, var(--sage) 80%, var(--bg-elev));
  border-color: color-mix(in srgb, var(--sage) 60%, var(--hairline));
}

/* Pre.215: Project-Detail-Modal v2 — Tab-Layout (Dateien/Erinnerungen/Mehr).
   Breiter (760px) mit fixiertem Header und scrollendem Tab-Content. */
.project-sheet-v2 {
  max-width: 760px;
  padding: 0;
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 32px);
}

.project-sheet-v2-head {
  /* Pre.991: oberer Safe-Area-Inset (native Hülle). */
  padding: max(24px, env(safe-area-inset-top)) 24px 16px;
  border-bottom: 1px solid var(--hairline);
  flex: 0 0 auto;
}

.project-sheet-v2-titlerow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.project-color-dot-lg {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  flex: 0 0 auto;
}

.project-sheet-v2-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
}

.project-sheet-v2-stats {
  font-size: 13px;
  color: var(--text-dim);
  margin-bottom: 12px;
}

.project-sheet-v2-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.project-sheet-v2-tabs {
  display: flex;
  gap: 4px;
  padding: 0 16px;
  border-bottom: 1px solid var(--hairline);
  flex: 0 0 auto;
  overflow-x: auto;
}

.project-sheet-v2-tab {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--text-dim);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  padding: 12px 14px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition:
    color 120ms,
    border-color 120ms;
  white-space: nowrap;
}

.project-sheet-v2-tab:hover {
  color: var(--text);
}

.project-sheet-v2-tab[data-active="true"] {
  color: var(--text);
  border-bottom-color: var(--ember);
}

.project-sheet-v2-content {
  padding: 20px 24px;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 200px;
}

/* #143: Vollseiten-Variante des Projekt-Details — eingehaengt in die Seite,
   kein schwebendes Modal. Spiegelt das Human-Design-/Essenz-Muster
   (.hd-overlay/.hd-sheet, position:fixed inset:0, opaker Hintergrund,
   volle Viewport-Hoehe, keine Modal-Rahmen/Schatten). */
.project-sheet-overlay--full {
  background: var(--bg);
  backdrop-filter: none;
  align-items: stretch;
  justify-content: stretch;
  padding: 0;
}

.project-sheet-v2--full {
  max-width: 100%;
  width: 100%;
  height: 100dvh;
  max-height: 100dvh;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

/* Inhalt liest sich auf der Vollseite ruhiger, wenn er nicht randlos breit
   laeuft — wie der HD-Body. Kopf/Tabs bleiben volle Breite, der scrollbare
   Inhalt bekommt eine lesbare Maximalbreite mittig. */
.project-sheet-v2--full .project-sheet-v2-content {
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
}

.project-tab-toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.project-tab-search {
  flex: 1 1 200px;
  min-width: 140px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--hairline);
  background: var(--bg-elev-2);
  color: var(--text);
  font: inherit;
  font-size: 13px;
}

.project-tab-search:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--ember) 50%, var(--hairline-strong));
}

.project-tab-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.project-tab-more {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.project-tab-more-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.project-tab-more-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.project-tab-more-group .projects-btn {
  /* Pre.828 (#97): volle Breite + Höhe statt loser Mini-Knöpfe am Rand. */
  align-self: stretch;
  text-align: center;
  padding: 10px 14px;
  font-size: 14px;
}

@media (max-width: 600px) {
  .project-sheet-v2 {
    max-width: 100%;
  }
  /* Pre.804 (#72b): 3 Tabs passen auf 390px — vorher überlief
     „Einstellungen" unsichtbar nach rechts (overflow-x ohne Indikator). */
  .project-sheet-v2-tabs {
    padding: 0 8px;
    gap: 2px;
  }
  .project-sheet-v2-tab {
    font-size: 13px;
    padding: 12px 8px;
  }
  .project-sheet-v2-head,
  .project-sheet-v2-content {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* Pre.229: Tool-Browser-Card mit Fehler — prominente rote Fehlerzeile.
   Vorher: User sah bei "extension-not-connected" nur "leer" und der Bot
   ratete dahin. Jetzt: klare Fehlermeldung im Tool-Card. */
.tool-browser-detail {
  font-size: 13px;
  color: var(--text-soft);
  line-height: 1.4;
  padding: 6px 0;
}
.tool-browser-detail.tool-browser-error {
  color: var(--error);
  font-weight: 500;
  background: color-mix(in srgb, var(--error) 8%, transparent);
  border-left: 3px solid var(--error);
  padding: 8px 12px;
  border-radius: 6px;
  margin-top: 4px;
}

/* Pre.232: Smart-Form-Card Step-Liste mit OK/FAIL Markern.
   Multi-line statt einer langen "·"-Zeile — User sollte einzelne Schritte
   sofort sehen ("Trigger ok, Felder ok, Captcha ok, Server FAIL"). */
.tool-card.tool-browser-form-submit .tool-browser-detail {
  white-space: pre-line;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12px;
  line-height: 1.7;
}

/* Pre.239: Connectors-Tab Vereinheitlichung —
   Alle Sektionen (Google, Extension, PawBot Desktop, Standort, Push)
   bekommen die gleiche Card-Optik. Vorher wirkten sie wegen
   gemischter Klassen (.settings-extension vs .connector-card)
   visuell uneinheitlich. */

.settings-extension {
  background: var(--bg-elev);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-l);
  padding: var(--space-3);
  margin-top: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.settings-extension h3 {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  margin: 0;
  color: var(--text);
  letter-spacing: 0.01em;
}

.settings-extension-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin: 0;
}

.settings-extension-desc {
  font-size: 12.5px;
  color: var(--text-dim);
  margin: 0;
  line-height: 1.5;
}

/* Pre.296: Premium-Lock-Variante (Extension/Daemon ausgegraut für non-superadmin) */
.settings-extension-locked {
  opacity: 0.55;
  filter: grayscale(0.5);
  cursor: not-allowed;
}
.settings-extension-locked .settings-extension-head {
  align-items: center;
}
.settings-premium-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #f4d35e, #ee964b);
  color: #2a1a00;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.settings-premium-hint {
  font-size: 12px;
  color: var(--text-dim);
  margin: 8px 0 0;
  padding: 8px 12px;
  border-left: 3px solid var(--accent);
  background: rgba(238, 150, 75, 0.06);
  border-radius: 4px;
  line-height: 1.5;
}

/* Pre.319: Vorlagen-Buttons im Persona-Block */
.settings-persona-presets {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 4px 0 8px;
}
.settings-persona-presets-label {
  font-size: 12px;
  color: var(--text-dim);
  margin-right: 4px;
}
.settings-persona-preset-btn {
  background: var(--surface-glass);
  border: 1px solid var(--hairline-strong);
  color: var(--text);
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12.5px;
  cursor: pointer;
  transition:
    background 180ms var(--ease-soft),
    border-color 180ms var(--ease-soft);
}
.settings-persona-preset-btn:hover {
  background: color-mix(in srgb, var(--ember) 14%, var(--bg-elev));
  border-color: color-mix(in srgb, var(--ember) 50%, transparent);
}

/* Pre.315: Realtime-Voice Probehören */
.settings-realtime-voice-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.settings-realtime-voice-row select {
  flex: 1;
  min-width: 0;
}
.settings-realtime-voice-play {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--hairline-strong);
  background: var(--surface-glass);
  color: var(--text);
  border-radius: 50%;
  cursor: pointer;
  transition:
    background 180ms var(--ease-soft),
    transform 180ms var(--ease-soft);
}
.settings-realtime-voice-play:hover {
  background: color-mix(in srgb, var(--ember) 14%, var(--bg-elev));
  color: var(--ember);
}
.settings-realtime-voice-play:disabled {
  opacity: 0.5;
  cursor: progress;
}
.settings-realtime-voice-play[data-state="loading"] {
  animation: pulse 1.2s ease-in-out infinite;
}
.settings-realtime-voice-play[data-state="playing"] {
  background: color-mix(in srgb, var(--ember) 28%, var(--bg-elev));
  color: var(--ember);
}
@keyframes pulse {
  0%,
  100% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
}

/* Pre.297: Auto-Save-Hinweis im Persona-Block */
.settings-persona-autosave-hint {
  font-size: 11.5px;
  color: var(--text-dim);
  font-style: italic;
  margin: 4px 0 0;
  letter-spacing: 0.2px;
}

/* Connector-Status mit Status-Dot — einheitlich für alle Cards */
.settings-extension .connector-status,
.settings-extension > .connector-status {
  background: transparent;
  padding: 0;
  border-radius: 0;
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.connector-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--text-mute);
}
.connector-dot.is-ok {
  background: var(--sage);
}
.connector-dot.is-warn {
  background: var(--amber);
}
.connector-dot.is-off {
  background: var(--text-mute);
}

/* Warn-Notiz innerhalb der Status-Box (z.B. Daemon ohne Bedienungshilfen) */
.connector-warn {
  width: 100%;
  font-size: 12px;
  color: var(--error);
  background: color-mix(in srgb, var(--error) 8%, transparent);
  border-left: 3px solid var(--error);
  padding: 8px 10px;
  border-radius: var(--radius-s);
  margin-top: 6px;
}

/* Disconnect-Button (Sekundär-Action) */
.connector-disconnect {
  background: transparent;
  color: var(--text-dim);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-l);
  padding: 8px 16px;
  font-size: 12.5px;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s;
}
.connector-disconnect:hover {
  background: color-mix(in srgb, var(--error) 12%, var(--bg-elev));
  color: var(--error);
  border-color: color-mix(in srgb, var(--error) 40%, var(--hairline-strong));
}
.connector-disconnect.hidden {
  display: none;
}

/* Pre.241: Fußzeile kompakter — User-Feedback "verbraucht zu viel Platz".
   Vorher: composer 8px padding + dock 12px padding + 60-68px Buttons +
   status-bar separat = ~150-170px gesamt. Auf iPhone-SE viel zu viel.
   Jetzt: ~90-100px (40% weniger), im PWA-Mode noch enger. */

.text-input {
  padding: 4px var(--space-3);
}

.text-input-pill {
  padding: 2px 4px 2px 4px;
}

.text-input textarea {
  min-height: 28px;
  font-size: 14px;
}

.dock {
  padding: 6px var(--space-3) 8px;
  gap: 10px;
}

/* Pre.461 final: Anrufen-Button etwas kleiner als andere Dock-Buttons.
 * User-Wunsch 2026-05-23: 'Anrufen-Button doch wieder kleiner'.
 * #90: Auflegen immer gleich groß wie Anrufen (Positions-/Größen-Match). */
.dock-btn {
  --size: 68px;
}

.dock-btn--call,
.dock-btn--hangup {
  --size: 72px;
}

/* PWA-Standalone-Mode (iPhone als Home-Screen-App): noch kompakter,
   safe-area-bottom kommt vom System dazu */
@media (display-mode: standalone) {
  .text-input {
    padding: 2px var(--space-3);
  }
  .text-input textarea {
    min-height: 26px;
    font-size: 13.5px;
  }
  .dock {
    padding: 4px var(--space-3) 6px;
    gap: 8px;
  }
  /* Pre.453: PWA-Mode ein bisschen kleiner als Browser-Mode. */
  .dock-btn {
    --size: 62px;
  }
  .dock-btn--call,
  .dock-btn--hangup {
    --size: 76px;
  }
  .status-bar {
    padding-top: 2px;
    padding-bottom: 2px;
    font-size: 10px;
  }
}

/* Pre.453: Auf sehr kleinen Screens (iPhone SE / Mini) — etwas knapper. */
@media (max-height: 700px) {
  .dock {
    padding: 4px var(--space-3) 6px;
    gap: 8px;
  }
  .dock-btn {
    --size: 56px;
  }
  .dock-btn--call,
  .dock-btn--hangup {
    --size: 68px;
  }
}

/* =====================================================================
   Pre.280 — UX-Cleanup: kalibrierte Lesbarkeit + ChatGPT-ähnlicher Flow
   ===================================================================== */

/* System-Bubbles ("Verbunden. Sprich los." / "Aufgelegt." / Fehlermeldungen)
   waren bisher als Voll-Bubbles gerendert, was visuell zu prominent war.
   Jetzt: subtle, zentriert, klein — wie ChatGPT-System-Hinweise. */
.bubble.system {
  align-self: center;
  background: transparent;
  border: 0;
  box-shadow: none;
  color: var(--text-dim);
  font-size: 12.5px;
  font-style: italic;
  text-align: center;
  padding: 4px 12px;
  margin: 6px 0;
  max-width: 70%;
  letter-spacing: 0.01em;
}

.bubble.system.is-error,
.bubble.system.bot-error {
  color: color-mix(in srgb, #d23 70%, var(--text));
  font-style: normal;
  font-weight: 500;
}

/* Turn-Spacing: mehr Luft bei Sprecherwechsel.
   Aufeinanderfolgende Bubbles vom selben Sprecher: dichter zusammen.
   Sprecherwechsel (user→bot oder umgekehrt): mehr Abstand. */
.bubble.user + .bubble.bot,
.bubble.bot + .bubble.user,
.bubble.user + .tool-card,
.tool-card + .bubble.bot,
.bubble.bot + .tool-card,
.tool-card + .bubble.user {
  margin-top: 14px;
}
.bubble.user + .bubble.user,
.bubble.bot + .bubble.bot {
  margin-top: 4px;
}

/* Tool-Cards: weniger prominent. Vorher zogen sie viel Aufmerksamkeit
   vom eigentlichen Bot-Text. Jetzt subtiler — feinere Border, ruhigere
   Akzent-Linie, kompakteres Padding. */
.tool-card {
  padding: 12px 16px !important;
  border-color: color-mix(in srgb, var(--hairline) 80%, transparent) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}
.tool-card::before {
  height: 1px !important;
  opacity: 0.4 !important;
}
.tool-card-tool {
  font-size: 9.5px !important;
  padding: 2px 7px !important;
  letter-spacing: 0.12em !important;
}

/* Bot-Bubble lesbarer: weniger Backdrop-Blur (langsam auf Phones),
   stärkerer Kontrast für den Text. */
.bubble.bot {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-color: color-mix(in srgb, var(--hairline) 60%, transparent) !important;
}

/* Code-Blocks (Markdown): monospace, dunklerer Background, lesbarer */
.bubble.bot pre,
.bubble.bot code,
.tool-card pre,
.tool-card code {
  font-family: var(--font-mono, "SF Mono", Menlo, monospace);
  font-size: 13px;
}
.bubble.bot pre:not(.shell-exec-stdout):not(.shell-exec-stderr),
.tool-card pre:not(.shell-exec-stdout):not(.shell-exec-stderr) {
  /* Pre.926: Shell-Ausgabe AUSNEHMEN — sie hat ihren eigenen dunklen Stil
     (.shell-exec-stdout, #06080a + heller Text). Diese hellere Markdown-Code-
     Block-Regel ist spezifischer und überschrieb sonst den dunklen Grund →
     heller Text auf hellem Grund = unlesbar (Martins wiederkehrende Beschwerde). */
  background: color-mix(in srgb, #000 8%, var(--bg-elev));
  padding: 10px 14px;
  border-radius: 8px;
  overflow-x: auto;
  margin: 8px 0;
  border: 1px solid color-mix(in srgb, #000 4%, transparent);
}
.bubble.bot code:not(pre code),
.tool-card code:not(pre code) {
  background: color-mix(in srgb, var(--ember) 12%, transparent);
  padding: 1px 5px;
  border-radius: 3px;
}

/* Markdown-Listen mehr Luft */
.bubble.bot ul,
.bubble.bot ol {
  padding-left: 22px;
  margin: 6px 0;
}
.bubble.bot li {
  margin: 3px 0;
}

/* Markdown-Headings: dezenter (Bot-Antworten sind Conversation, nicht Doc) */
.bubble.bot h1,
.bubble.bot h2,
.bubble.bot h3 {
  font-size: 1.05em;
  font-weight: 600;
  margin: 10px 0 4px;
  letter-spacing: 0.005em;
}

/* Bessere Lesbarkeit: max-width breiter auf Desktop, Bubbles laufen
   nicht so eng wie früher */
@media (min-width: 900px) {
  .bubble {
    max-width: 70%;
  }
  .bubble.bot {
    max-width: 78%;
  }
}

/* =====================================================================
   Pre.288 — Tools-View Full-Screen auf Mobile
   ===================================================================== */

@media (max-width: 1023px) {
  /* Auf Phone/Tablet wird view-tools ein normaler View (nicht Drawer-
     Overlay). Vermeidet User-Verwirrung wo "Sprechen" und "Module" sich
     überdecken. */
  .side-drawer--tools {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    height: 100% !important;
    border-left: none !important;
    box-shadow: none !important;
    animation: none !important;
    flex: 1 !important;
    min-height: 0 !important;
  }
}

/* =====================================================================
   Pre.289 — Sidebar Material/Google-Style Refresh
   ===================================================================== */

/* Drawer-Panel: weicher, mehr Atem, Material-3 Elevation */
.nav-drawer-panel {
  width: min(85vw, var(--sidebar-w)) !important;
  border-right: 1px solid transparent !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
  gap: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Header: "Menü" + Close — mehr Padding, kleinere Typo */
.nav-drawer-head {
  padding: 0 16px 16px !important;
  border-bottom: 1px solid color-mix(in srgb, var(--hairline) 70%, transparent) !important;
  margin-bottom: 8px !important;
}
.nav-drawer-title {
  font-size: 18px !important;
  font-weight: 500 !important;
  letter-spacing: 0.005em !important;
  text-transform: none !important;
}

/* Pre.653: Doppelte nav-drawer-list/nav-item-Definitionen (Material-3 + 13×
   `!important`) entfernt — zusammengeführt in die EINE Definition oben. */

/* Section-Header zwischen Tabs und Aktionen */

/* Footer (Auto-Vorlesen, App-Update, Chat-leeren) — als eigene Section,
   etwas dezenter als Haupt-Nav */

/* User-Block: Avatar-Style Kreis + Email darunter */
.nav-user {
  padding: 16px !important;
  display: grid !important;
  grid-template-columns: 36px 1fr !important;
  grid-template-rows: auto auto !important;
  column-gap: 12px !important;
  row-gap: 0 !important;
  align-items: center !important;
  border-top: 1px solid color-mix(in srgb, var(--hairline) 70%, transparent) !important;
  margin-top: 4px !important;
}
.nav-user::before {
  content: "";
  grid-row: 1 / span 2;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--ember) 60%, var(--bg-elev)),
    color-mix(in srgb, var(--ember) 30%, var(--bg-elev))
  );
  display: flex;
  align-items: center;
  justify-content: center;
}
.nav-user-label {
  font-size: 9.5px !important;
  letter-spacing: 0.14em !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
}
.nav-user-name {
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: var(--text) !important;
  grid-column: 2 !important;
  grid-row: 2 !important;
}

/* Logout-Button: subtiler, kein roter Schock-Effekt */
.nav-item--logout {
  margin: 0 8px 16px !important;
  color: var(--text-soft) !important;
  font-weight: 450 !important;
}
.nav-item--logout:hover {
  background: color-mix(in srgb, var(--rose) 8%, transparent) !important;
  color: color-mix(in srgb, var(--rose) 80%, var(--text)) !important;
}

/* Backdrop dunkler für Fokus */
.nav-drawer-backdrop {
  background: rgba(0, 0, 0, 0.4) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

/* Desktop (≥1024): Drawer als feste Sidebar — keine Backdrop, kein Shadow */
@media (min-width: 1024px) {
  .nav-drawer.is-desktop .nav-drawer-panel {
    box-shadow: none !important;
    border-right: 1px solid var(--hairline) !important;
  }
}

/* =====================================================================
   Pre.290 — Sidebar Radikal-Refactor
   Footer aufgeräumt: Aktionen als Icon-Bar, User-Block kompakt
   ===================================================================== */

/* Aktions-Icon-Bar — 3 Icons in einer Reihe, statt 3 Vollzeilen */
.nav-actions {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 12px 8px;
  border-top: 1px solid color-mix(in srgb, var(--hairline) 60%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--hairline) 60%, transparent);
  margin: 0;
}

.nav-action {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  border-radius: 50%;
  color: var(--text-soft);
  cursor: pointer;
  transition:
    background 200ms cubic-bezier(0.2, 0, 0, 1),
    color 200ms cubic-bezier(0.2, 0, 0, 1);
}
.nav-action:hover {
  background: color-mix(in srgb, var(--text) 8%, transparent);
  color: var(--text);
}
.nav-action[data-active="true"] {
  background: color-mix(in srgb, var(--ember) 16%, transparent);
  color: color-mix(in srgb, var(--ember) 85%, var(--text));
}
.nav-action svg {
  width: 22px !important;
  height: 22px !important;
}

/* User-Card kompakt: Avatar + Name+Email + Logout-Icon nebeneinander */
.nav-user-card[hidden] {
  display: none;
}
.nav-user-card {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  column-gap: 12px;
  align-items: center;
  padding: 14px 16px;
}
.nav-user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--ember) 55%, var(--bg-elev)),
    color-mix(in srgb, var(--ember) 25%, var(--bg-elev))
  );
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: uppercase;
  user-select: none;
}
.nav-user-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.nav-user-card .nav-user-name {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--text) !important;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nav-user-email {
  font-size: 11.5px;
  color: var(--text-dim);
  line-height: 1.3;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nav-user-logout {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  border-radius: 50%;
  color: var(--text-dim);
  cursor: pointer;
  transition:
    background 200ms cubic-bezier(0.2, 0, 0, 1),
    color 200ms cubic-bezier(0.2, 0, 0, 1);
}
.nav-user-logout:hover {
  background: color-mix(in srgb, var(--rose) 12%, transparent);
  color: color-mix(in srgb, var(--rose) 80%, var(--text));
}

/* Pre.289 Footer-Overrides zurücknehmen — alte .nav-drawer-foot Styles
   passten zur alten Voll-Zeilen-Aktion. */
.nav-drawer-foot {
  padding: 0 !important;
  gap: 0 !important;
  border-top: 0 !important;
  margin-top: auto !important;
}
.nav-drawer-foot .nav-item {
  /* alte Aktion-Items existieren nicht mehr — falls Cache: einfach hidden */
  display: none !important;
}

/* Pre.290: Pre.289 .nav-user-grid-overlay loswerden */
.nav-user-card::before {
  content: none;
}

/* Pre.329: Versionsnummer-Block im Nav-Drawer-Footer. Dezent (kleiner
 * Text, leicht reduzierte Opacity) aber jederzeit lesbar — User soll
 * mit einem Blick sehen welche Version live ist. */
.nav-version {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 16px 14px;
  font-size: 12px;
  color: var(--text-dim);
  border-top: 1px solid var(--hairline);
  margin-top: 6px;
}
.nav-version-label {
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
}
.nav-version-num {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text-soft);
  user-select: text;
}

/* Pre.337: Mobile-Overflow-Schutz. Verhindert horizontales Scrollen
 * wenn ein neues Element (Modal-Panel, Profile-Input, Wizard-Box)
 * versehentlich breiter als der Viewport rendert. Hat keinen Effekt
 * auf gewollte horizontale Scroller (z.B. .settings-tabs, .tool-cards). */
html,
body,
#app {
  max-width: 100%;
  overflow-x: hidden;
}
/* Profile-Tab Eingabefelder dürfen NICHT über die Container-Breite
 * hinaus wachsen — auf Mobile kommt sonst durch lange Werte (z.B.
 * Email mit "office@waitzendorf-mailservice-ssi.at") horizontales
 * Scrollen rein. */
.settings-field input,
.settings-field textarea,
.settings-field select {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.settings-wizard-box {
  max-width: 100%;
  margin: 8px 0 16px;
  padding: 12px;
  border-radius: 12px;
  background: var(--surface-glass);
  border: 1px solid var(--hairline);
}
.settings-wizard-text {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--text-soft);
  line-height: 1.5;
}
/* Pre.443: Biografie-Foundation — Schwerpunkte-Chips */
.settings-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: var(--space-2) 0;
  min-height: 32px;
}
.settings-chips-empty {
  font-size: 13px;
  color: var(--text-dim);
  font-style: italic;
  padding: 6px 0;
}
.settings-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 4px 6px 12px;
  background: color-mix(in srgb, var(--sage) 18%, var(--bg-elev));
  color: var(--text);
  border: 1px solid color-mix(in srgb, var(--sage) 35%, var(--hairline-strong));
  border-radius: 999px;
  font-size: 13px;
}
.settings-chip-x {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text-soft);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 160ms var(--ease-soft);
}
.settings-chip-x:hover {
  background: color-mix(in srgb, var(--ember) 18%, transparent);
  color: var(--ember);
}
.settings-chip-input-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.settings-chip-input {
  flex: 1;
  padding: 10px 14px;
  font-size: 14px;
  border: 1px solid var(--hairline-strong);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  outline: none;
}
.settings-chip-input:focus {
  border-color: var(--ember);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ember) 12%, transparent);
}

/* Pre.503 (Sprint E): Meine Biografie — Monthly + Daily read-only Cards. */
.settings-biography {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.biography-monthly-list,
.biography-daily-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.biography-daily-head {
  margin: 16px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-secondary, #555);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.biography-empty {
  padding: 16px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--paper) 75%, transparent);
  border: 1px dashed color-mix(in srgb, var(--ink) 15%, transparent);
  color: var(--ink-secondary, #666);
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
}
.biography-month-card,
.biography-day-card {
  background: var(--paper);
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  border-radius: 12px;
  overflow: hidden;
}
.biography-month-card[open],
.biography-day-card[open] {
  border-color: color-mix(in srgb, var(--ember) 35%, transparent);
}
.biography-month-summary,
.biography-day-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  user-select: none;
  font-size: 14px;
  list-style: none;
}
.biography-month-summary::-webkit-details-marker,
.biography-day-summary::-webkit-details-marker {
  display: none;
}
.biography-month-summary::before,
.biography-day-summary::before {
  content: "▸";
  color: color-mix(in srgb, var(--ink) 45%, transparent);
  font-size: 12px;
  transition: transform 0.15s ease;
}
.biography-month-card[open] > .biography-month-summary::before,
.biography-day-card[open] > .biography-day-summary::before {
  transform: rotate(90deg);
}
.biography-month-title {
  font-weight: 600;
  flex: 1;
}
.biography-month-meta,
.biography-day-date {
  font-size: 12px;
  color: var(--ink-secondary, #777);
  white-space: nowrap;
}
.biography-day-date {
  font-weight: 600;
  min-width: 80px;
}
.biography-day-snippet {
  flex: 1;
  color: var(--ink-secondary, #666);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.biography-month-body,
.biography-day-body {
  padding: 4px 20px 16px;
  font-size: 14px;
  line-height: 1.6;
}
.biography-month-body h2,
.biography-month-body h3,
.biography-day-body h2,
.biography-day-body h3 {
  margin: 16px 0 6px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ember);
}
.biography-month-body h4,
.biography-day-body h4 {
  margin: 12px 0 4px;
  font-size: 13px;
  font-weight: 600;
}
.biography-month-body p,
.biography-day-body p {
  margin: 0 0 8px;
}
.biography-month-body ul,
.biography-day-body ul {
  margin: 4px 0 8px;
  padding-left: 20px;
}
.biography-month-body li,
.biography-day-body li {
  margin: 2px 0;
}

/* Pre.444: Persönliche Fakten — Tabelle mit Key/Value/Note + Remove. */
.settings-facts-table {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 8px 0 12px;
}
.settings-facts-row {
  display: grid;
  grid-template-columns: 110px 1fr 1fr 32px;
  gap: 8px;
  align-items: center;
}
.settings-facts-row input {
  padding: 8px 12px;
  font-size: 13px;
  border: 1px solid var(--hairline-strong);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  outline: none;
  min-width: 0;
}
.settings-facts-row input:focus {
  border-color: var(--ember);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ember) 12%, transparent);
}
.settings-facts-remove {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--text-dim);
  font-size: 18px;
  cursor: pointer;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.settings-facts-remove:hover {
  background: var(--hairline);
  color: var(--error);
}

/* Pre.504: Generic Settings-Button (ghost-variant) — wurde von
   personalFactsBlock + Future-Blocks referenziert, hatte aber kein
   Styling. */
.settings-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid var(--hairline-strong);
  background: var(--bg);
  color: var(--text);
  transition:
    background 0.15s ease,
    border-color 0.15s ease;
  min-height: 36px;
}
.settings-btn:hover {
  background: color-mix(in srgb, var(--ember) 8%, var(--bg));
  border-color: color-mix(in srgb, var(--ember) 40%, var(--hairline-strong));
}
.settings-btn:focus-visible {
  outline: none;
  border-color: var(--ember);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ember) 18%, transparent);
}
.settings-btn--ghost {
  background: transparent;
  border-style: dashed;
  color: var(--text-dim, var(--text));
}
.settings-btn--ghost:hover {
  background: color-mix(in srgb, var(--ember) 6%, transparent);
  border-style: solid;
  color: var(--text);
}
@media (max-width: 600px) {
  .settings-facts-row {
    grid-template-columns: 1fr 1fr 32px;
    grid-template-areas:
      "key key remove"
      "value value value"
      "note note note";
  }
  .settings-facts-row .settings-facts-key {
    grid-area: key;
  }
  .settings-facts-row .settings-facts-value {
    grid-area: value;
  }
  .settings-facts-row .settings-facts-note {
    grid-area: note;
  }
  .settings-facts-remove {
    grid-area: remove;
  }
}

.settings-inline-status {
  font-size: 13px;
  margin-top: 8px;
  color: var(--text-soft);
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
.settings-inline-status[data-kind="success"] {
  color: var(--sage);
}
.settings-inline-status[data-kind="error"] {
  color: var(--error);
}

/* Pre.341: Profil-Save-Button — Ember-Gradient, rund, klar als Action
 * erkennbar (vorher ungestylet = hässlich). */
.settings-save {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 16px;
  padding: 12px 22px;
  border-radius: 14px;
  border: 0;
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--on-color);
  background: linear-gradient(180deg, var(--ember-soft) 0%, var(--ember) 100%);
  box-shadow:
    0 6px 18px color-mix(in srgb, var(--ember) 28%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition:
    transform 120ms var(--ease-soft),
    filter 160ms var(--ease-soft),
    box-shadow 200ms var(--ease-soft);
  -webkit-tap-highlight-color: transparent;
  align-self: flex-start;
}
.settings-save:hover {
  filter: brightness(1.06);
  box-shadow:
    0 8px 22px color-mix(in srgb, var(--ember) 38%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.settings-save:active {
  transform: scale(0.96);
}
.settings-save:disabled {
  opacity: 0.6;
  cursor: progress;
  transform: none;
}

/* Pre.341: Profilbild-Picker. Rundes Avatar mit Initial-Fallback,
 * Hover-Lift, Plus-Badge zeigt dass es klickbar ist. */
.settings-profile-avatar-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 4px 0 18px;
}
.settings-profile-avatar-ring {
  position: relative;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--ember) 35%, var(--hairline-strong));
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--ember-soft) 25%, var(--bg-elev)),
    color-mix(in srgb, var(--plum) 20%, var(--bg-elev))
  );
  cursor: pointer;
  /* Pre.372: overflow visible damit das Badge außen sitzen kann.
     Das Foto wird über border-radius:50% am Bild selbst geclippt. */
  overflow: visible;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    transform 160ms var(--ease-soft),
    border-color 200ms var(--ease-soft),
    box-shadow 200ms var(--ease-soft);
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}
.settings-profile-avatar-ring:hover {
  transform: scale(1.03);
  border-color: var(--ember);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--ember) 25%, transparent);
}
.settings-profile-avatar-ring.is-loading {
  opacity: 0.7;
  animation: avatarPulse 1.2s ease-in-out infinite;
}
@keyframes avatarPulse {
  0%,
  100% {
    opacity: 0.7;
  }
  50% {
    opacity: 1;
  }
}
.settings-profile-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Pre.372: Foto rund clippen direkt am Bild statt am Container,
     damit das Badge außen sichtbar bleibt. */
  border-radius: 50%;
}
.settings-profile-avatar-initial {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 500;
  color: var(--text-soft);
  line-height: 1;
}
.settings-profile-avatar-badge {
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--ember);
  color: var(--on-color);
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  /* Pre.372: über dem Foto liegen damit "+" außen am Kreis-Rand sitzt. */
  z-index: 2;
  pointer-events: none;
}
.settings-profile-avatar-hint {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.settings-profile-avatar-label {
  font-size: 14px;
  color: var(--text);
  font-weight: 500;
}
.settings-profile-avatar-sub {
  font-size: 12px;
  color: var(--text-dim);
}

/* Pre.347: Anwendungsbeispiele-View — Redesign mit SVG-Icons,
 * edler Card-Optik, Desktop-Vollbreite. Mobile bleibt 1-spaltig,
 * Desktop nutzt 2-3 Spalten je nach Viewport — keine hard max-width
 * mehr, sondern padding-clamp damit der Container die ganze Fläche
 * füllt aber Inhalte angenehm zentriert bleiben. */
.examples-view {
  padding: clamp(20px, 4vw, 36px) clamp(16px, 4vw, 40px) 80px;
  margin: 0;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}
.examples-header {
  margin-bottom: 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--hairline);
}
.examples-title {
  font-family: var(--font-display);
  font-size: clamp(22px, 3vw, 30px);
  margin: 0 0 8px;
  color: var(--text);
  letter-spacing: -0.005em;
}
.examples-subtitle {
  margin: 0 0 12px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text-soft);
  max-width: 720px;
}
.examples-meta {
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--surface-glass);
  border: 1px solid var(--hairline);
  font-size: 12.5px;
  color: var(--text-dim);
  line-height: 1.5;
  max-width: 720px;
}

.examples-category {
  margin-bottom: 32px;
}
.examples-category-title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 14px;
  color: var(--text-soft);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.examples-category-title svg {
  color: var(--ember);
  flex-shrink: 0;
}
.examples-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
  gap: 12px;
}

.example-card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  text-align: left;
  padding: 14px 14px 12px;
  border-radius: 14px;
  background: linear-gradient(
    180deg,
    var(--bg-elev) 0%,
    color-mix(in srgb, var(--bg-elev) 92%, var(--bg-elev-2)) 100%
  );
  border: 1px solid var(--hairline-strong);
  color: var(--text);
  cursor: pointer;
  font: inherit;
  position: relative;
  transition:
    transform 180ms var(--ease-soft),
    border-color 220ms var(--ease-soft),
    box-shadow 260ms var(--ease-soft),
    filter 200ms var(--ease-soft);
  min-width: 0;
  overflow: hidden;
}
/* Akzent-Linie oben, dezent — nur bei active sichtbar */
.example-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--ember) 50%,
    transparent 100%
  );
  opacity: 0;
  transition: opacity 220ms var(--ease-soft);
}
.example-card:hover {
  border-color: color-mix(in srgb, var(--ember) 35%, var(--hairline-strong));
  box-shadow:
    0 10px 28px color-mix(in srgb, var(--ember) 14%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transform: translateY(-2px);
}
.example-card:hover::before {
  opacity: 0.7;
}
.example-card[data-status="active"]::before {
  opacity: 0.4;
}
.example-card[data-status="inactive"] {
  opacity: 0.55;
  filter: saturate(0.6);
}
.example-card[data-status="inactive"]:hover {
  opacity: 0.75;
}

.example-card-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--ember) 14%, var(--surface-soft));
  color: var(--ember);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid color-mix(in srgb, var(--ember) 20%, transparent);
}
.example-card[data-status="inactive"] .example-card-icon {
  background: var(--surface-soft);
  color: var(--text-dim);
  border-color: var(--hairline);
}

.example-card-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  flex: 1;
}
.example-card-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}
.example-card-desc {
  font-size: 13px;
  color: var(--text-soft);
  line-height: 1.5;
}
.example-card-prompt {
  font-size: 12.5px;
  color: var(--text-dim);
  font-style: italic;
  margin-top: 6px;
  padding: 8px 10px;
  background: var(--surface-soft);
  border-radius: 8px;
  border-left: 2px solid color-mix(in srgb, var(--ember) 50%, transparent);
  overflow-wrap: anywhere;
  line-height: 1.45;
}
.example-card-footer {
  margin-top: 8px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 4px 8px;
  border-radius: 6px;
  align-self: flex-start;
}
.example-card-footer.is-active {
  background: color-mix(in srgb, var(--sage) 18%, transparent);
  color: color-mix(in srgb, var(--sage) 85%, var(--text));
}
.example-card-footer.is-inactive {
  background: color-mix(in srgb, var(--warn) 16%, transparent);
  color: var(--warn);
}
.example-card-footer.is-unknown {
  background: var(--surface-glass);
  color: var(--text-dim);
}
.example-card-requires {
  font-size: 11.5px;
  color: var(--text-dim);
  line-height: 1.5;
  margin-top: 2px;
}

@media (max-width: 600px) {
  .examples-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .example-card {
    padding: 14px;
  }
  .example-card-icon {
    width: 34px;
    height: 34px;
  }
}
@media (min-width: 1100px) {
  .examples-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }
}
@media (min-width: 1400px) {
  .examples-grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }
}

/* Pre.339: Live-Progress-Bubble für lang laufende Tools
 * (claude_task_server u.a.). Dezent — keine eigene Card-Optik,
 * eher wie eine ephemere System-Bubble mit Spinner. */
.bubble.system.tool-progress {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-style: italic;
  opacity: 0.92;
}
.tool-progress-spinner {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--ember) 30%, transparent);
  border-top-color: var(--ember);
  animation: toolProgressSpin 0.9s linear infinite;
  flex-shrink: 0;
}
@keyframes toolProgressSpin {
  to {
    transform: rotate(360deg);
  }
}
.tool-progress-text {
  color: var(--text-soft);
  font-size: 13.5px;
}
.tool-progress-tail {
  width: 100%;
  margin-top: 4px;
  padding: 4px 8px;
  background: var(--surface-glass);
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-dim);
  font-style: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}
@media (prefers-reduced-motion: reduce) {
  .tool-progress-spinner {
    animation: none;
    border-top-color: var(--ember);
    opacity: 0.7;
  }
}

/* Pre.335: Generic Modal-Overlay (Provider-Health, PDF-Preview, etc.).
 * Bewusst eigenständig statt System-Alert/Dialog: zoom-safe, dark-aware,
 * Click-Outside-to-Close, Escape-bindable. */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: modalFadeIn 180ms var(--ease-soft);
}
@keyframes modalFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.modal-panel {
  position: relative;
  background: var(--bg-elev);
  color: var(--text);
  border: 1px solid var(--hairline-strong);
  border-radius: 16px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
  padding: 24px 24px 20px;
  max-width: min(520px, 100%);
  max-height: 80vh;
  overflow-y: auto;
  animation: modalSlideIn 220ms var(--ease-soft);
}
@keyframes modalSlideIn {
  from {
    transform: translateY(14px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.modal-title {
  font-family: var(--font-display);
  font-size: 22px;
  margin: 0 0 14px;
  padding-right: 36px;
}
.modal-text {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-soft);
  margin: 0 0 12px;
}
.modal-text--small {
  font-size: 12.5px;
  color: var(--text-dim);
  margin-top: 16px;
}
.modal-list {
  font-size: 14px;
  line-height: 1.55;
  margin: 0 0 12px;
  padding-left: 20px;
}
.modal-list li {
  margin-bottom: 6px;
}

.modal-panel--pdf {
  max-width: min(900px, 100%);
  max-height: 90vh;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.modal-pdf-frame {
  flex: 1;
  width: 100%;
  min-height: 60vh;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--bg-deep);
  margin: 8px 0 14px;
}
.modal-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.modal-btn {
  display: inline-flex;
  align-items: center;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--ember);
  color: var(--on-color);
  font-size: 14px;
  font-weight: 600;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
}
.modal-btn:hover {
  filter: brightness(1.08);
}
.modal-btn--secondary {
  background: var(--bg-elev-2);
  color: var(--text);
  border: 1px solid var(--hairline-strong);
}

/* Pre.335: Provider-Health-Pille soll als Button erkennbar sein
 * (Cursor + Hover). */
.topbar-provider-health {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.topbar-provider-health:hover {
  filter: brightness(1.15);
}

/* ============================================================
 * Pre.326: Connection-State-Visualisierung
 *
 * Problem (Martin 2026-05-17): "Wenn ich anrufe, soll es sichtbar sein,
 * ab wann eine Verbindung steht, wie bei ChatGPT" + "Wenn es nicht mehr
 * ansprechbar ist, soll das ebenfalls erkennbar sein. Gegenwärtig sucht
 * er etwas, und dann bricht die Verbindung ab, obwohl das Telefonzeichen
 * immer noch ist."
 *
 * Lösung: data-state am dock-btn → CSS rendert Ring/Pulse/Wave-Animationen
 * pro Zustand. User hat in jeder Phase ein klares visuelles Signal:
 *   connecting   blau pulse
 *   reconnecting amber pulse (sichtbarer Unterschied zum 1. Connect!)
 *   listening    sage atmender Ring (= "du kannst sprechen")
 *   thinking     orbit-dots
 *   speaking     ember wave-pulse nach außen
 *   error        rot statisch
 * ============================================================ */

/* Während connecting den ember-callPulse abschalten — er wird durch
 * den state-pulse ersetzt. Ohne dieses Override würden zwei Animationen
 * konkurrieren. */
.dock-btn--call[data-state="connecting"],
.dock-btn--call[data-state="reconnecting"],
.dock-btn--call[data-state="listening"],
.dock-btn--call[data-state="thinking"],
.dock-btn--call[data-state="speaking"],
.dock-btn--call[data-state="error"] {
  animation: none;
}

/* connecting — blau pulse (= erstes Verbinden) */
.dock-btn[data-state="connecting"] {
  box-shadow:
    0 8px 22px color-mix(in srgb, var(--ember) 35%, transparent),
    0 0 0 0 rgba(94, 154, 230, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  animation: stateConnectingPulse 1.4s ease-in-out infinite;
}
@keyframes stateConnectingPulse {
  0%,
  100% {
    box-shadow:
      0 8px 22px color-mix(in srgb, var(--ember) 35%, transparent),
      0 0 0 0 rgba(94, 154, 230, 0.55),
      inset 0 1px 0 rgba(255, 255, 255, 0.18);
  }
  50% {
    box-shadow:
      0 8px 22px color-mix(in srgb, var(--ember) 35%, transparent),
      0 0 0 12px rgba(94, 154, 230, 0),
      inset 0 1px 0 rgba(255, 255, 255, 0.18);
  }
}

/* reconnecting — amber pulse (= "Verbindung war weg, kämpfe nochmal") */
.dock-btn[data-state="reconnecting"] {
  animation: stateReconnectingPulse 0.9s ease-in-out infinite;
}
@keyframes stateReconnectingPulse {
  0%,
  100% {
    box-shadow:
      0 8px 22px color-mix(in srgb, var(--ember) 35%, transparent),
      0 0 0 0 rgba(245, 158, 11, 0.7),
      inset 0 1px 0 rgba(255, 255, 255, 0.18);
  }
  50% {
    box-shadow:
      0 8px 22px color-mix(in srgb, var(--ember) 35%, transparent),
      0 0 0 14px rgba(245, 158, 11, 0),
      inset 0 1px 0 rgba(255, 255, 255, 0.18);
  }
}

/* listening — atmender sage-Ring außenrum
 * Das ist DAS visuelle Signal "Du kannst jetzt sprechen". Bewusst ruhig
 * (4s breathe) damit es nicht ablenkt, aber dauerhaft sichtbar. */
.dock-btn[data-state="listening"] {
  animation: stateListeningBreathe 3.6s ease-in-out infinite;
}
@keyframes stateListeningBreathe {
  0%,
  100% {
    box-shadow:
      0 6px 16px rgba(0, 0, 0, 0.18),
      0 0 0 3px color-mix(in srgb, var(--sage) 35%, transparent),
      inset 0 1px 0 rgba(255, 255, 255, 0.12);
  }
  50% {
    box-shadow:
      0 6px 16px rgba(0, 0, 0, 0.18),
      0 0 0 6px color-mix(in srgb, var(--sage) 18%, transparent),
      inset 0 1px 0 rgba(255, 255, 255, 0.12);
  }
}

/* thinking — orbit-dots aus konzentrischen Ringen */
.dock-btn[data-state="thinking"] {
  position: relative;
  animation: stateThinkingPulse 1.2s ease-in-out infinite;
}
@keyframes stateThinkingPulse {
  0%,
  100% {
    box-shadow:
      0 6px 16px rgba(0, 0, 0, 0.18),
      0 0 0 3px color-mix(in srgb, var(--ember) 30%, transparent),
      0 0 0 8px color-mix(in srgb, var(--ember) 15%, transparent),
      inset 0 1px 0 rgba(255, 255, 255, 0.12);
  }
  50% {
    box-shadow:
      0 6px 16px rgba(0, 0, 0, 0.18),
      0 0 0 5px color-mix(in srgb, var(--ember) 20%, transparent),
      0 0 0 12px color-mix(in srgb, var(--ember) 8%, transparent),
      inset 0 1px 0 rgba(255, 255, 255, 0.12);
  }
}

/* speaking — kräftige Welle nach außen */
.dock-btn[data-state="speaking"] {
  animation: stateSpeakingWave 1.1s ease-out infinite;
}
@keyframes stateSpeakingWave {
  0% {
    box-shadow:
      0 6px 16px rgba(0, 0, 0, 0.18),
      0 0 0 0 color-mix(in srgb, var(--ember) 55%, transparent),
      inset 0 1px 0 rgba(255, 255, 255, 0.12);
  }
  100% {
    box-shadow:
      0 6px 16px rgba(0, 0, 0, 0.18),
      0 0 0 20px color-mix(in srgb, var(--ember) 0%, transparent),
      inset 0 1px 0 rgba(255, 255, 255, 0.12);
  }
}

/* error — rot statisch, kein Pulse (Banner übernimmt) */
.dock-btn[data-state="error"] {
  box-shadow:
    0 6px 16px rgba(0, 0, 0, 0.18),
    0 0 0 3px rgba(229, 72, 77, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

/* Reduced-motion: alle State-Animationen abschalten (Boxshadow bleibt
 * statisch sichtbar — keine Information geht verloren). */
@media (prefers-reduced-motion: reduce) {
  .dock-btn[data-state="connecting"],
  .dock-btn[data-state="reconnecting"],
  .dock-btn[data-state="listening"],
  .dock-btn[data-state="thinking"],
  .dock-btn[data-state="speaking"] {
    animation: none;
  }
}

/* ============================================================
 * Toast-Host für transiente Connection-Events. Position oben-rechts
 * unter der Status-Bar, mobile-friendly (auf schmalen Screens full-width).
 * ============================================================ */
#toast-host {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 56px);
  right: 16px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  max-width: min(360px, calc(100vw - 32px));
}
.toast {
  pointer-events: auto;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.35;
  background: var(--bg-elev);
  color: var(--text);
  border: 1px solid var(--hairline-strong);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
  opacity: 0;
  transform: translateY(-8px);
  transition:
    opacity 220ms var(--ease-soft),
    transform 220ms var(--ease-soft);
}
.toast--in {
  opacity: 1;
  transform: translateY(0);
}
.toast--warning {
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.16), var(--bg-elev));
  border-color: rgba(245, 158, 11, 0.55);
}
.toast--success {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--sage) 20%, var(--bg-elev)),
    var(--bg-elev)
  );
  border-color: color-mix(in srgb, var(--sage) 55%, transparent);
}
.toast--error {
  background: linear-gradient(180deg, rgba(229, 72, 77, 0.16), var(--bg-elev));
  border-color: rgba(229, 72, 77, 0.55);
}
@media (max-width: 520px) {
  #toast-host {
    left: 16px;
    right: 16px;
    max-width: unset;
  }
}

/* Pre.360 / Pre.395: Flight-Search-Card — kompakter */
.tool-flight-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tool-flight-item {
  padding: 8px 12px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--sage) 6%, var(--bg-elev));
  border: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  gap: 2px;
  transition:
    border-color 180ms var(--ease-soft),
    background 180ms var(--ease-soft);
}
/* Pre.382: Klickbar wenn booking_url da ist */
.tool-flight-item--clickable {
  cursor: pointer;
}
.tool-flight-item--clickable:hover,
.tool-flight-item--clickable:focus-visible {
  border-color: var(--ember);
  background: color-mix(in srgb, var(--ember) 8%, var(--bg-elev));
  outline: none;
}
.tool-flight-item--clickable::after {
  content: "↗";
  position: absolute;
  right: 14px;
  bottom: 10px;
  font-size: 12px;
  opacity: 0.5;
  color: var(--ember);
}
.tool-flight-item--clickable {
  position: relative;
  padding-right: 28px;
}
.tool-flight-top {
  display: flex;
  align-items: baseline;
  gap: 10px;
  justify-content: space-between;
}
.tool-flight-price {
  font-size: 18px;
  font-weight: 700;
  color: var(--ember);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.tool-flight-airline {
  font-size: 12px;
  color: var(--text-soft);
}
.tool-flight-slice {
  font-size: 12.5px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

/* Pre.383/395: Flight-Card-Layout — kompakter (User-Wunsch). */
.tool-flight-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 2px;
}
.tool-flight-airline-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 1;
}
.tool-flight-airline-logo {
  width: 16px;
  height: 16px;
  object-fit: contain;
  flex-shrink: 0;
}
.tool-flight-airline-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tool-flight-route {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  padding: 2px 0;
}
.tool-flight-port {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.tool-flight-port--right {
  align-items: flex-end;
  text-align: right;
}
.tool-flight-city {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}
.tool-flight-code {
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--text-dim);
  letter-spacing: 0.04em;
  line-height: 1;
}
.tool-flight-middle {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  min-width: 80px;
}
.tool-flight-arrow {
  font-size: 12px;
  color: var(--ember);
  opacity: 0.75;
  line-height: 1;
}
.tool-flight-duration {
  font-size: 10.5px;
  color: var(--text-soft);
  font-variant-numeric: tabular-nums;
}
.tool-flight-stops {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--warn) 12%, transparent);
  color: var(--warn);
  font-weight: 600;
}
.tool-flight-stops--direct {
  background: color-mix(in srgb, var(--sage) 20%, transparent);
  color: var(--sage);
}
.tool-flight-times {
  font-size: 11px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  text-align: center;
  padding-top: 2px;
  margin-top: 0;
}

/* Pre.481: PTT Bottom-Bar (ChatGPT-Style schlank, kein Modal mehr) */
.ptt-modal-overlay {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 76px);
  transform: translateX(-50%);
  z-index: 90;
  width: min(420px, 94vw);
  pointer-events: none;
  animation: ptt-bar-slide-up 180ms ease-out;
  /* #59: beim Gedrückthalten markierte iOS sonst die Uhr/Texte im Modal
     (Textauswahl-Highlight). Auswahl + Callout im ganzen Modal abstellen. */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.ptt-modal-overlay.is-closing {
  animation: ptt-bar-slide-down 180ms ease-out forwards;
}

@keyframes ptt-bar-slide-up {
  from {
    opacity: 0;
    transform: translate(-50%, 16px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

@keyframes ptt-bar-slide-down {
  from {
    opacity: 1;
    transform: translate(-50%, 0);
  }
  to {
    opacity: 0;
    transform: translate(-50%, 16px);
  }
}

.ptt-modal-card {
  /* Pre.516 Editorial: ruhiger 18px-Radius statt Vollpille (999px). Paper-elev
     Hintergrund + sanfter hairline-strong Border passt zum Editorial-Stil. */
  pointer-events: auto;
  background: var(--paper-elev, var(--surface-1, #fff));
  color: var(--ink);
  border-radius: 18px;
  padding: 12px 18px;
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: 12px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
  border: 1px solid var(--hairline-strong);
}

/* Recording-Indicator: roter LED-Dot + Timer */
.ptt-modal-indicator {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.ptt-modal-dot {
  /* Pre.516 Editorial: nutze --error Token (in beiden Themes warmer Rot-Ton).
     Subtilerer Pulse-Glow (0 0 8px statt 0 0 0). */
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--error);
  box-shadow: 0 0 8px var(--error);
  animation: ptt-dot-pulse 1.2s var(--ease-soft) infinite;
}

@keyframes ptt-dot-pulse {
  0%,
  100% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
}

.ptt-modal-card[data-state="starting"] .ptt-modal-dot,
.ptt-modal-card[data-state="sending"] .ptt-modal-dot {
  background: #888;
  animation: none;
  box-shadow: none;
}

.ptt-modal-status {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-muted);
  letter-spacing: -0.01em;
  white-space: nowrap;
  display: none; /* normalerweise versteckt — Indicator + Wave reichen */
}

.ptt-modal-card[data-state="starting"] .ptt-modal-status,
.ptt-modal-card[data-state="sending"] .ptt-modal-status {
  display: inline;
}

.ptt-modal-card[data-state="starting"] .ptt-modal-wave,
.ptt-modal-card[data-state="sending"] .ptt-modal-wave {
  display: none;
}

.ptt-modal-wave {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 28px;
  min-width: 60px;
}

.ptt-modal-wave span {
  /* Pre.516 Editorial: solider Akzent statt Grün-Gradient. Bleibt mit
     Ember in beiden Themes konsistent zum Mic-Button. */
  display: block;
  width: 2px;
  background: var(--accent);
  border-radius: 2px;
  animation: ptt-wave 0.9s ease-in-out infinite;
  height: 6px;
}

.ptt-modal-wave span:nth-child(1) {
  animation-delay: 0s;
}
.ptt-modal-wave span:nth-child(2) {
  animation-delay: 0.1s;
}
.ptt-modal-wave span:nth-child(3) {
  animation-delay: 0.2s;
}
.ptt-modal-wave span:nth-child(4) {
  animation-delay: 0.3s;
}
.ptt-modal-wave span:nth-child(5) {
  animation-delay: 0.4s;
}

@keyframes ptt-wave {
  0%,
  100% {
    height: 6px;
  }
  50% {
    height: 22px;
  }
}

.ptt-modal-timer {
  /* Pre.516 Editorial: ink-soft statt ink-muted (mehr Kontrast), tnum für
     gleich-breite Ziffern. */
  font-size: 13px;
  font-weight: 500;
  font-feature-settings: "tnum";
  color: var(--ink-soft, var(--ink-muted));
  min-width: 40px;
  text-align: right;
}

.ptt-modal-cancel,
.ptt-modal-stop {
  width: 36px;
  height: 36px;
  min-height: 36px;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition:
    transform 80ms,
    background 120ms;
}

.ptt-modal-cancel {
  background: rgba(0, 0, 0, 0.06);
  color: var(--ink);
}

.ptt-modal-cancel:active {
  background: rgba(0, 0, 0, 0.12);
  transform: scale(0.92);
}

.ptt-modal-cancel svg {
  width: 16px;
  height: 16px;
}

.ptt-modal-stop {
  background: #4a8a5e;
  color: #fff;
  box-shadow: 0 2px 8px rgba(53, 106, 71, 0.35);
}

.ptt-modal-stop:active {
  transform: scale(0.92);
  box-shadow: 0 1px 4px rgba(53, 106, 71, 0.4);
}

.ptt-modal-stop svg {
  width: 18px;
  height: 18px;
}

/* Label-Span im Stop-Button war für die alte große Variante — jetzt nur Icon */
.ptt-modal-stop span {
  display: none;
}

.ptt-modal-card[data-state="sending"] .ptt-modal-stop {
  opacity: 0.5;
  pointer-events: none;
}

/* Dark mode */
[data-mode="dark"] .ptt-modal-card {
  background: var(--surface-2, #1d2a23);
  color: var(--ink);
  border-color: rgba(255, 255, 255, 0.08);
}

[data-mode="dark"] .ptt-modal-cancel {
  background: rgba(255, 255, 255, 0.08);
  color: var(--ink);
}

[data-mode="dark"] .ptt-modal-cancel:active {
  background: rgba(255, 255, 255, 0.14);
}

[data-mode="dark"] .ptt-modal-status,
[data-mode="dark"] .ptt-modal-timer {
  color: var(--ink-muted);
}

/* #122: Offline-Plakette in der Fußzeile — erscheint nur ohne Internet,
   schwebt über dem Dock (kein Layout-Shift). */
.dock-offline {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  padding: 3px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--error) 88%, black);
  color: var(--on-color);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: var(--shadow-soft);
  z-index: 5;
}

/* P3.4 (Audit): Mikro liefert physikalisch nichts (exakt 0 > 5s) — Punkt
   wird grau und steht still. Mathematisches Signal, keine Heuristik. */
.voice-live--micdead .voice-live-dot {
  background: #9aa0a6;
  box-shadow: none;
  animation: none;
  transform: none;
}


/* pre.871 (#145): Serien-Lauf-Steuerleiste in der Ticket-Glocke. */
.tickets-serial-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  background: color-mix(in srgb, var(--ember) 8%, transparent);
  border-bottom: 1px solid var(--hairline);
  font-size: 13px;
}
.tickets-serial-info {
  color: var(--text-soft);
}
.tickets-btn.is-queued {
  color: var(--ember);
  border-color: color-mix(in srgb, var(--ember) 40%, transparent);
}
/* ───────────────────────────────────────────────────────────────────────────
   Mein Alltag — Tage als Akkordeon + beschriftete Player (pre.1045)
   Tage sind <details>; Header klappt auf/zu, Inhalt steckt in .alltag-day-body.
   ─────────────────────────────────────────────────────────────────────────── */
details.alltag-day {
  display: block;
  gap: 0;
  background: var(--bg-elev);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-m);
  overflow: hidden;
}
summary.alltag-day-label {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-3);
  cursor: pointer;
  user-select: none;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  text-transform: none;
  letter-spacing: normal;
}
summary.alltag-day-label::-webkit-details-marker {
  display: none;
}
.alltag-day-label-text {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.alltag-day-label-text::before {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--text-soft);
  border-bottom: 2px solid var(--text-soft);
  transform: rotate(-45deg);
  transition: transform 0.2s var(--ease-quiet, ease);
}
details.alltag-day[open] > summary .alltag-day-label-text::before {
  transform: rotate(45deg);
}
.alltag-day-count {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-soft);
}
.alltag-day-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: 0 var(--space-3) var(--space-3);
}

/* Player mit kleiner Beschriftung (Zusammenfassung anhören vs. Original). */
.alltag-player-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.alltag-player-cap {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-soft);
}

/* Leerer Tages-Rollup (noch keine Zusammenfassung generiert). */
.alltag-rollup-body.is-empty {
  color: var(--text-soft);
  font-style: italic;
}

/* Pre.1047: Puls am „Mein Alltag"-Menüeintrag bei laufender Verarbeitung. */
#open-alltag-btn {
  position: relative;
}
#open-alltag-btn.is-processing::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent, var(--ember));
  animation: dotPulse 1.4s var(--ease-quiet, ease) infinite;
}

/* Pre.1048: Themen-Abschnitte je Aufnahme (aufklappbar, Player pro Abschnitt). */
.alltag-sections {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-top: var(--space-1);
}
details.alltag-section {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-s, 8px);
  background: var(--bg, var(--bg-elev));
  overflow: hidden;
}
summary.alltag-section-head {
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  user-select: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
summary.alltag-section-head::-webkit-details-marker { display: none; }
summary.alltag-section-head::before {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-right: 2px solid var(--text-soft);
  border-bottom: 2px solid var(--text-soft);
  transform: rotate(-45deg);
  transition: transform 0.2s var(--ease-quiet, ease);
}
details.alltag-section[open] > summary.alltag-section-head::before {
  transform: rotate(45deg);
}
.alltag-section-body {
  padding: 0 var(--space-3) var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.alltag-section-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text);
  white-space: pre-wrap;
}

/* ── Pre.1053: Tages-Zeitachse (Timeline) in „Mein Alltag" ── */
.alltag-timeline {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.alltag-tl-group {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.alltag-tl-group-head {
  padding-left: 22px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-soft);
}
/* durchgehende Zeit-Spur je Tagesabschnitt */
.alltag-tl-group::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 22px;
  bottom: 8px;
  width: 2px;
  background: var(--hairline);
}
.alltag-tl-item {
  position: relative;
  padding-left: 22px;
}
/* Knoten-Punkt auf der Spur, auf Höhe der Uhrzeit */
.alltag-tl-item::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 13px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent, var(--ember));
  border: 2px solid var(--bg-elev);
}
/* im Timeline-Kontext keine Trennlinie; Uhrzeit prominent als Knoten-Label */
.alltag-tl-item .alltag-entry {
  border-top: none;
  padding-top: 4px;
}
.alltag-tl-item .alltag-entry-time {
  font-weight: 700;
  color: var(--text);
  font-size: 14px;
}

/* ── Pre.1055: Sprecher-Erkennung — Knopf + beschriftetes Transkript ── */
.alltag-speakers { margin-top: var(--space-2); }
.alltag-speaker-btn {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent, var(--text-soft));
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-s, 8px);
  padding: 4px 10px;
  cursor: pointer;
}
.alltag-speaker-btn:hover {
  background: color-mix(in srgb, var(--accent, var(--text-soft)) 10%, transparent);
}
.alltag-speaker-btn:disabled { opacity: 0.7; cursor: default; }
.alltag-speaker-result {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: var(--space-2);
}
.alltag-speaker-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--space-1);
}
.alltag-speaker-chip {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-soft);
  background: var(--bg, var(--bg-elev));
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 2px 9px;
}
.alltag-speaker-chip.is-me {
  color: var(--accent, var(--ember));
  border-color: color-mix(in srgb, var(--accent, var(--ember)) 45%, transparent);
}
.alltag-speaker-turn { margin: 0; font-size: 13px; line-height: 1.45; color: var(--text); }
.alltag-speaker-label { font-weight: 700; color: var(--text-soft); }
.alltag-speaker-label.is-me { color: var(--accent, var(--ember)); }

/* Pre.1056: Sprecher benennen (anonym → Name). */
.alltag-speaker-name-btn {
  font-size: 10px;
  font-weight: 600;
  color: var(--accent, var(--ember));
  background: transparent;
  border: none;
  padding: 0 2px;
  cursor: pointer;
  text-decoration: underline;
}
.alltag-speaker-input {
  font-size: 11px;
  padding: 1px 7px;
  border: 1px solid var(--accent, var(--hairline));
  border-radius: 999px;
  background: var(--bg, var(--bg-elev));
  color: var(--text);
  width: 92px;
}

/* ── Pre.1060: Material-Items im Timeline-Format (vertikal + randlos wie Mein Alltag) ── */
.alltag-tl-item .material-item {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
}
.alltag-tl-item .material-item-head {
  flex-direction: row;
  align-items: baseline;
  gap: var(--space-2);
  min-width: 0;
}
.alltag-tl-item .material-item .project-file-title {
  flex: 1;
  min-width: 0;
  text-align: left;
  font-size: 14px;
  font-weight: 600;
}
.alltag-tl-item .material-item-actions {
  justify-content: flex-start;
  margin-top: 2px;
}

/* ── Pre.1061: Sheet-Header bleibt beim Scrollen oben (X immer erreichbar),
   randvoll, Safe-Area oben, Abstand zum Inhalt darunter. Gilt für alle Sheets
   mit buildSheetHeader (Material, Mein Alltag, Changelog). ── */
.sheet-head {
  position: sticky;
  top: 0;
  z-index: 6;
  background: var(--bg-elev);
  margin: -14px calc(-1 * var(--space-4)) var(--space-3);
  padding-top: calc(12px + env(safe-area-inset-top));
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

/* ── Pre.1063: Vorlese-/Datei-Viewer auf dem Handy vollflächig (volle Breite,
   100dvh statt 100dvh = keine abgeschnittenen Enden, Safe-Areas, kein
   verschenkter Rand). Desktop bleibt die zentrierte 760px-Karte. ── */
@media (max-width: 720px) {
  .project-sheet-overlay {
    padding: 0;
  }
  .project-sheet,
  .project-file-sheet {
    max-width: 100%;
    width: 100%;
    max-height: 100dvh;
    height: 100dvh;
    border: none;
    border-radius: 0;
    padding: calc(14px + env(safe-area-inset-top)) var(--space-4)
      calc(16px + env(safe-area-inset-bottom));
  }
}
/* Auto-Sprecher-Erkennung: Status-Zeile, solange der Hintergrund-Job läuft. */
.alltag-speaker-status {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--text-soft);
  display: flex;
  align-items: center;
  gap: 7px;
}
.alltag-speaker-status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--accent, var(--ember));
  animation: alltagSpeakerPulse 1.4s ease-in-out infinite;
}
@keyframes alltagSpeakerPulse {
  0%,
  100% {
    opacity: 0.35;
    transform: scale(0.85);
  }
  50% {
    opacity: 1;
    transform: scale(1.15);
  }
}

/* pre.1066: Material + Mein Alltag als echte Vollseite (wie HD/Mein Leben/
   A.R.U.A.) auf ALLEN Breiten — mobil war es bisher ein Bottom-Sheet. Container
   wird vollflaechig, Kopf bekommt den Zurueck-Pfeil (buildPageHeader). */
.page-sheet.sheet {
  justify-content: stretch;
  align-items: stretch;
  padding: 0;
  background: var(--bg);
}
.page-sheet .sheet-backdrop {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.page-sheet .sheet-card {
  width: 100%;
  height: 100dvh;
  max-width: 100%;
  max-height: 100dvh;
  margin: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow-y: auto;
  background: var(--bg);
  animation: none;
  padding-top: 0;
}
/* Kopf bleibt beim Scrollen sichtbar (Zurueck-Pfeil immer erreichbar) und
   spannt voll-buendig ueber die Card-Polsterung. */
.page-sheet .page-head {
  position: sticky;
  top: 0;
  z-index: 6;
  background: var(--bg);
  margin: 0 calc(-1 * var(--space-4));
  padding-top: calc(12px + env(safe-area-inset-top));
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}
/* ===== Willkommens-Onboarding (onboarding-view.ts) ===== */
/* Vollseite über .page-sheet (wie HD/Mein Leben). Warmes Papier + Ember. */
/* X-Header in der Vollseite: kein Notch-Clip durch den sheet-head-Negativrand. */
.onb-overlay .sheet-head {
  margin-top: 0;
}
.onb-intro {
  max-width: 560px;
  margin: 6px auto 2px;
  padding: 0 var(--space-4);
  text-align: center;
}
.onb-hi {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
  color: var(--text);
  margin: 16px 0 6px;
  animation: onbReveal 600ms var(--ease-soft) both;
}
.onb-sub {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-soft);
  margin: 0 auto;
  max-width: 460px;
  animation: onbReveal 700ms 80ms var(--ease-soft) both;
}
.onb-steps {
  max-width: 560px;
  margin: 18px auto 0;
  padding: 0 var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.onb-step {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-l, 16px);
  background: var(--bg-elev);
  padding: 18px;
}
.onb-step.is-active {
  border-color: color-mix(
    in srgb,
    var(--accent, var(--ember)) 45%,
    transparent
  );
  box-shadow: 0 6px 28px color-mix(in srgb, var(--ember) 12%, transparent);
  animation: onbReveal 500ms var(--ease-soft) both;
}
.onb-step.is-done {
  padding: 12px 16px;
  opacity: 0.92;
}
.onb-q {
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.4;
  color: var(--text);
  margin: 0 0 14px;
}
.onb-fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.onb-row {
  display: flex;
  gap: 10px;
}
.onb-row > * {
  flex: 1;
  min-width: 0;
}
.onb-input {
  width: 100%;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-m, 12px);
  padding: 12px 14px;
}
.onb-input:focus {
  outline: none;
  border-color: var(--accent, var(--ember));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ember) 18%, transparent);
}
.onb-textarea {
  min-height: 84px;
  resize: vertical;
  line-height: 1.5;
}
.onb-choice {
  display: flex;
  gap: 10px;
}
.onb-choice-btn {
  flex: 1;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-soft);
  background: var(--bg);
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  padding: 11px 14px;
  cursor: pointer;
  transition:
    background 160ms var(--ease-soft),
    color 160ms var(--ease-soft),
    border-color 160ms var(--ease-soft);
}
.onb-choice-btn.is-active {
  color: #fff;
  background: var(--accent, var(--ember));
  border-color: var(--accent, var(--ember));
}
.onb-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}
.onb-next {
  flex: 1;
}
.onb-done-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.onb-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--accent, var(--ember));
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  animation: onbPop 360ms var(--ease-soft) both;
}
.onb-done-title {
  font-weight: 600;
  color: var(--text);
  font-size: 14px;
}
.onb-done-val {
  margin-left: auto;
  color: var(--text-soft);
  font-size: 13px;
  max-width: 55%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.onb-finish {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 560px;
  margin: 10px auto 0;
  padding: 0 var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom));
}
.onb-rec {
  width: 100%;
}
@keyframes onbReveal {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes onbPop {
  0% {
    transform: scale(0);
  }
  60% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

/* ===== Glocke-Tickets pre.1072 ===== */
/* #199: „fertig"-Status lesbarer (war Sage auf Sage-Tint = zu blass). */
.tool-task-stat--done {
  color: color-mix(in srgb, var(--sage) 55%, var(--text));
  background: color-mix(in srgb, var(--sage) 24%, transparent);
}
/* #198: Flug-Item — ↗-Pfeil korrekt im Item verankern (war absolut ohne
   Bezugselement → Überlappung mit „Direkt"/Texten auf dem Handy). */
.tool-flight-item {
  position: relative;
}
.tool-flight-item--clickable {
  padding-right: 28px;
}

/* Onboarding tastatur-/notch-sicher: Kopf bleibt unter dem Notch sichtbar,
   Eingabefelder scrollen DARUNTER (nicht dahinter). */
.onb-overlay .sheet-head {
  position: sticky;
  top: 0;
  z-index: 30;
  margin-top: 0;
  background: var(--bg);
  padding-top: max(14px, env(safe-area-inset-top));
}
.onb-overlay .sheet-card {
  scroll-padding-top: calc(58px + env(safe-area-inset-top));
}

/* ===== Tastatur / Safe-Area systemweit (visualViewport) ===== */
:root{ --app-vh: 100dvh; --kb: 0px; }
body.keyboard-open .page-sheet,
body.keyboard-open .sheet-card,
body.keyboard-open .onb-overlay .sheet-card{ scroll-padding-bottom: calc(var(--kb) + 24px); }
body.keyboard-open .onb-steps,
body.keyboard-open .onb-finish,
body.keyboard-open .composer,
body.keyboard-open .chat-input-wrap{ padding-bottom: calc(var(--space-4, 16px) + var(--kb) + env(safe-area-inset-bottom)); }

/* ===== Voice-Onboarding: Sprach-Antwort (Mikro) ===== */
.onb-voice { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.onb-mic {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-body); font-size: 15px; font-weight: 600;
  color: #fff; background: var(--accent, var(--ember));
  border: none; border-radius: 999px; padding: 11px 18px; cursor: pointer;
  box-shadow: 0 6px 20px color-mix(in srgb, var(--ember) 28%, transparent);
  transition: transform 140ms var(--ease-soft), background 140ms var(--ease-soft);
}
.onb-mic:hover { transform: translateY(-1px); }
.onb-mic.is-rec { background: #c0392b; animation: onbPulse 1.2s ease-in-out infinite; }
.onb-mic.is-work { opacity: .7; cursor: default; }
.onb-mic svg { flex: 0 0 auto; }
.onb-voice-status { font-size: 13.5px; color: var(--text-soft); line-height: 1.45; }
@keyframes onbPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(192,57,43,.5); } 50% { box-shadow: 0 0 0 9px rgba(192,57,43,0); } }

/* ===== Tier: Upgrade-Sheet + Plan-Auswahl + Admin-Tier ===== */
.upg-overlay{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;background:rgba(20,20,28,.5);backdrop-filter:blur(3px);padding:max(20px,env(safe-area-inset-top)) 18px}
.upg-sheet{background:var(--bg-elev,#fff);border:1px solid var(--hairline,rgba(0,0,0,.08));border-radius:18px;padding:26px 24px;max-width:420px;width:100%;text-align:center;box-shadow:0 24px 60px rgba(0,0,0,.28)}
.upg-title{font-family:var(--font-display,inherit);font-size:20px;margin:0 0 8px;color:var(--text)}
.upg-text{font-size:15px;color:var(--text-soft);margin:0 0 20px;line-height:1.5}
.upg-actions{display:flex;flex-direction:column;gap:10px}
.upg-btn{display:inline-flex;align-items:center;justify-content:center;padding:13px 18px;border-radius:999px;font-weight:600;font-size:15px;text-decoration:none;border:1px solid transparent;cursor:pointer}
.upg-btn--primary{background:var(--accent,var(--ember,#e87b4a));color:#fff}
.upg-btn--ghost{background:transparent;color:var(--text-soft);border-color:var(--hairline-strong,rgba(0,0,0,.14))}
.onb-plans{max-width:560px;margin:6px auto 0;padding:0 var(--space-4,16px)}
.onb-plans-title{font-family:var(--font-display,inherit);font-size:17px;text-align:center;color:var(--text);margin:0 0 12px}
.onb-plan-row{display:flex;gap:10px}
.onb-plan{flex:1;min-width:0;text-align:left;background:var(--bg-elev,#fff);border:1px solid var(--hairline-strong,rgba(0,0,0,.14));border-radius:14px;padding:14px 12px;cursor:pointer;transition:border-color .15s,transform .15s,box-shadow .15s}
.onb-plan:hover{transform:translateY(-2px)}
.onb-plan.is-featured{border-color:color-mix(in srgb,var(--ember,#e87b4a) 55%,transparent)}
.onb-plan.is-picked{border-color:var(--ember,#e87b4a);box-shadow:0 0 0 3px color-mix(in srgb,var(--ember,#e87b4a) 20%,transparent)}
.onb-plan-name{font-weight:700;font-size:15px;color:var(--text)}
.onb-plan-price{font-size:13px;color:var(--ember-deep,#c15a2c);font-weight:600;margin:2px 0 6px}
.onb-plan-desc{font-size:12.5px;color:var(--text-soft);line-height:1.4}
@media (max-width:520px){.onb-plan-row{flex-direction:column}}
.usr-tier-row{gap:8px}
.usr-tier-select{font-family:var(--font-body,inherit);font-size:13px;padding:4px 8px;border-radius:8px;border:1px solid var(--hairline-strong,rgba(0,0,0,.14));background:var(--bg,#fff);color:var(--text)}

/* ===== Onboarding: Stimmen-Wahl + Freihändig-Zuhören ===== */
.onb-voices{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:560px;margin:14px auto 0;padding:0 var(--space-4,16px)}
.onb-voice-card{text-align:left;background:var(--bg-elev,#fff);border:1px solid var(--hairline-strong,rgba(0,0,0,.14));border-radius:14px;padding:14px 16px;cursor:pointer;transition:border-color .15s,transform .15s,box-shadow .15s}
.onb-voice-card:hover{transform:translateY(-2px)}
.onb-voice-card.is-picked{border-color:var(--ember,#e87b4a);box-shadow:0 0 0 3px color-mix(in srgb,var(--ember,#e87b4a) 20%,transparent)}
.onb-voice-name{font-weight:700;font-size:16px;color:var(--text)}
.onb-voice-desc{font-size:13px;color:var(--text-soft);margin-top:2px}
.onb-type-instead{display:block;margin:14px auto 0}
.onb-voice--hands{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:18px}
.onb-listen-pulse{width:54px;height:54px;border-radius:50%;background:color-mix(in srgb,var(--ember,#e87b4a) 16%,transparent);position:relative;flex:0 0 auto}
.onb-listen-pulse::after{content:"";position:absolute;inset:18px;border-radius:50%;background:var(--ember,#e87b4a)}
.onb-listen-pulse.is-listening{animation:onbListen 1.3s ease-in-out infinite}
@keyframes onbListen{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ember,#e87b4a) 45%,transparent)}50%{box-shadow:0 0 0 14px color-mix(in srgb,var(--ember,#e87b4a) 0%,transparent)}}
.onb-type-link{background:none;border:none;color:var(--text-soft);font-size:13px;text-decoration:underline;cursor:pointer;padding:4px}
@media (max-width:520px){.onb-voices{grid-template-columns:1fr}}


/* Vespera: Sign in with Google */
.login-google{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:11px 16px;margin:2px 0 14px;background:#fff;color:#1f2430;border:1px solid #d8cdbb;border-radius:12px;font-weight:600;font-size:15px;line-height:1;text-decoration:none;cursor:pointer;transition:background .15s,border-color .15s}
.login-google:hover{background:#f6f1e8;border-color:#c9bca6}
.login-google svg{flex:0 0 auto}
.login-divider{display:flex;align-items:center;text-align:center;color:#8a8170;font-size:11px;letter-spacing:.12em;text-transform:uppercase;margin:0 0 14px}
.login-divider::before,.login-divider::after{content:"";flex:1;height:1px;background:rgba(216,205,187,.5)}
.login-divider span{padding:0 12px}
.login-error-banner{background:rgba(232,123,74,.12);color:#e87b4a;border:1px solid rgba(232,123,74,.4);border-radius:10px;padding:8px 12px;font-size:13px;text-align:center;margin-bottom:12px}