/* =========================================================================
   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 {
  /* base palette — Dusk / Night */
  --bg: #1a1320;
  --bg-deep: #110a17;
  --bg-elev: #251c2d;
  --bg-elev-2: #2f2438;
  --surface-soft: rgba(255, 235, 210, 0.04);
  --surface-glass: rgba(255, 235, 210, 0.06);

  --text: #f4ecdf;
  --text-soft: #d8cdbb;
  --text-dim: #9b8d7d;
  --text-mute: #6e6478;

  --hairline: rgba(244, 236, 223, 0.08);
  --hairline-strong: rgba(244, 236, 223, 0.16);

  /* accent palette — Ember & Sage */
  --ember: #e87b4a; /* warm terracotta — Mic-Anchor */
  --ember-soft: #f0a47e;
  --ember-deep: #b85831;
  --amber: #f4c673; /* honey accent */
  --sage: #7fa896; /* calm secondary */
  --plum: #6b4d7a; /* user-bubble dark */
  --rose: #d97a82; /* sparingly */

  --accent: var(--ember); /* compatibility — bestehende Refs */
  --warn: var(--amber);
  --error: #d9626c;

  /* bubbles */
  --user-bg: linear-gradient(135deg, #6b4d7a 0%, #4f3a60 100%);
  --user-text: #f7eee0;
  --bot-bg: linear-gradient(
    180deg,
    rgba(255, 235, 210, 0.07) 0%,
    rgba(255, 235, 210, 0.03) 100%
  );
  --bot-text: var(--text);

  /* radii — organisch, kein Rect */
  --radius-s: 10px;
  --radius-m: 16px;
  --radius-l: 22px;
  --radius-xl: 28px;
  --radius-pebble: 26px 26px 26px 8px; /* user-bubble */
  --radius-pebble-bot: 26px 26px 8px 26px;

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

  /* shadows — warm, nie schwarz */
  --shadow-soft:
    0 1px 2px rgba(0, 0, 0, 0.25), 0 8px 24px rgba(184, 88, 49, 0.08);
  --shadow-mic:
    0 6px 24px rgba(232, 123, 74, 0.35), 0 2px 6px rgba(232, 123, 74, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  --shadow-card:
    0 1px 0 rgba(255, 235, 210, 0.04) inset, 0 8px 28px rgba(0, 0, 0, 0.32);

  /* atmospheric gradients */
  --aurora:
    radial-gradient(
      ellipse 60% 40% at 80% -10%,
      rgba(232, 123, 74, 0.16),
      transparent 60%
    ),
    radial-gradient(
      ellipse 50% 35% at 10% 110%,
      rgba(127, 168, 150, 0.1),
      transparent 65%
    ),
    radial-gradient(
      ellipse 70% 50% at 50% 50%,
      rgba(244, 198, 115, 0.04),
      transparent 70%
    );

  --grain-opacity: 0.035;

  /* type */
  --font-display:
    "Iowan Old Style", "Cochin", "Hoefler Text", ui-serif, "New York",
    "Charter", Georgia, serif;
  --font-body:
    ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN", -apple-system,
    BlinkMacSystemFont, "Segoe UI Variable", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Menlo", monospace;

  /* motion */
  --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 */
@media (prefers-color-scheme: light) {
  :root {
    --bg: #f9f1e3;
    --bg-deep: #f3e8d2;
    --bg-elev: #ffffff;
    --bg-elev-2: #fbf3e2;
    --surface-soft: rgba(140, 90, 50, 0.04);
    --surface-glass: rgba(255, 255, 255, 0.55);

    --text: #2c1f17;
    --text-soft: #4a3829;
    --text-dim: #7a6553;
    --text-mute: #b09b85;

    --hairline: rgba(60, 40, 25, 0.1);
    --hairline-strong: rgba(60, 40, 25, 0.18);

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

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

    --user-bg: linear-gradient(135deg, #7a5a8a 0%, #5e4470 100%);
    --user-text: #fbf3e8;
    --bot-bg: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.9) 0%,
      rgba(251, 243, 226, 0.85) 100%
    );
    --bot-text: var(--text);

    --shadow-soft:
      0 1px 2px rgba(80, 50, 30, 0.08), 0 8px 22px rgba(194, 90, 44, 0.1);
    --shadow-mic:
      0 6px 22px rgba(194, 90, 44, 0.3), 0 2px 6px rgba(194, 90, 44, 0.2),
      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(80, 50, 30, 0.08);

    --aurora:
      radial-gradient(
        ellipse 60% 40% at 80% -10%,
        rgba(232, 123, 74, 0.2),
        transparent 60%
      ),
      radial-gradient(
        ellipse 50% 35% at 10% 110%,
        rgba(127, 168, 150, 0.14),
        transparent 65%
      ),
      radial-gradient(
        ellipse 70% 50% at 50% 50%,
        rgba(244, 198, 115, 0.08),
        transparent 70%
      );

    --grain-opacity: 0.025;

    color-scheme: light;
  }
}

/* explizit data-mode override — App kann spaeter setzen */
[data-mode="dark"] {
  color-scheme: dark;
}
[data-mode="light"] {
  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;
}

.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 (nicht max), damit auf iPhone
     mit Notch der App-Header UNTER der iOS-Statusbar sitzt. Padding
     reduziert auf space-2 (kompakter Header — User-Wunsch). */
  padding-top: 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(--bg-deep);
}

.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. */
body.text-focus .dock,
body.text-focus .status-bar {
  display: none;
}

/* 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 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  /* Pre.110: padding-left/right erhöht für sauberen Abstand zum Rand. */
  padding: 0 var(--space-4);
}

/* Hamburger sitzt jetzt LINKS (pre.95) — passend zur linken Sidebar. */
.topbar .menu-btn {
  order: 0;
}
.topbar .brand {
  order: 1;
  flex: 1;
}
.topbar .topbar-meta {
  order: 2;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Pre.154: Subheader-Bar UNTER der Topbar — prominent, immer sichtbar wenn
 * ein Projekt aktiv ist. Wie v7. Klick öffnet Projekte-Tab. */
.active-project-bar {
  display: flex;
  align-items: stretch;
  width: 100%;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--sage) 35%, var(--bg-elev)),
    color-mix(in srgb, var(--sage) 18%, var(--bg-elev))
  );
  border-bottom: 2px solid color-mix(in srgb, var(--sage) 55%, var(--hairline));
  color: var(--text);
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 500;
  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 */
.active-project-bar-close {
  flex-shrink: 0;
  width: 36px;
  border: 0;
  border-left: 1px solid color-mix(in srgb, var(--sage) 35%, var(--hairline));
  background: transparent;
  color: var(--text);
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  transition: background 180ms var(--ease-soft);
}

.active-project-bar-close:hover {
  background: color-mix(in srgb, var(--ember) 22%, transparent);
}

/* 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.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;
}

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

.state {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  text-transform: lowercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  padding: 6px 12px 6px 22px;
  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: 9px;
  top: 50%;
  transform: translateY(-50%);
  width: 7px;
  height: 7px;
  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;
    box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 25%, transparent);
  }
}

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

.banner {
  margin: var(--space-3) var(--space-4) 0;
  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);
}

.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);
}

@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;
  overflow-y: auto;
  /* Pre.147: padding-bottom nochmal erhöht damit die letzte Bubble auch
     bei großen Bot-Antworten + Tool-Cards komplett über dem text-input-
     pill landet (Live-Bug Martin pre.146 PTT-Screenshot). 80px reicht
     für ~2 Zeilen Markdown-Wachstum nach Initial-Render. */
  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;
}

/* 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: center;
  gap: 4px;
  padding: 4px 4px 4px 6px;
  background: var(--bg-elev);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  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;
  min-height: 32px;
  max-height: 140px;
  resize: none;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.4;
  padding: 6px 8px;
  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;
  width: 34px;
  height: 34px;
  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: 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);
}

.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));
}

/* Send-Button: kompakter ember Kreis im Pill; verschwindet sanft wenn
   disabled (kein voller Opacity-Sprung). */
.text-input-send {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--ember-soft) 0%, var(--ember) 100%);
  color: #fff8ee;
  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 {
  max-width: 78%;
  padding: 12px 18px;
  font-size: 15.5px;
  line-height: 1.55;
  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-wave-bar {
  display: inline-block;
  width: 3px;
  border-radius: 2px;
  background: currentColor;
  opacity: 0.55;
  /* Höhe: Basis 5px + Pegel * 18px + idle-Atmen via animation.
     Jeder Bar hat einen kleinen Phase-Offset für die Wellen-Optik. */
  height: calc(5px + var(--wave-level, 0) * 18px);
  animation: waveIdle 1.4s var(--ease-quiet) infinite;
  animation-delay: calc(var(--bar-i, 0) * 80ms);
  transition: height 90ms linear;
}

.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))
  );
}

.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);
}

.bubble.user.is-recording .bubble-wave-bar {
  color: color-mix(in srgb, var(--user-text) 80%, var(--ember-soft));
}

.bubble.bot.is-recording .bubble-wave-bar {
  color: var(--ember-soft);
}

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

@media (prefers-reduced-motion: reduce) {
  .bubble-wave-bar {
    animation: none !important;
  }
}

.bubble.user {
  align-self: flex-end;
  background: var(--user-bg);
  color: var(--user-text);
  border-radius: var(--radius-pebble);
  box-shadow: var(--shadow-soft);
  font-weight: 450;
}

.bubble.bot {
  align-self: flex-start;
  background: var(--bot-bg);
  color: var(--bot-text);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pebble-bot);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  position: relative;
}

/* 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);
  font-size: 12.5px;
  font-style: italic;
  color: var(--text-mute);
  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;
}

@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-3);
}

.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;
  text-transform: lowercase;
  letter-spacing: 0.04em;
}

.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.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: #fff8ee;
  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;
}

/* 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;
}

/* 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;
  max-height: 360px;
}

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

/* 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: #cdd5dd;
}
.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;
}

.tool-card-raw {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-mute);
  margin: 0;
  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;
}

.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.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.163: PWA-Update-Banner — fixed top-center, ember-Akzent. Klick
 * auf Aktualisieren → SW skipWaiting → reload. */
.update-banner {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  z-index: 1100;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 8px 8px 16px;
  background: linear-gradient(180deg, var(--ember-soft) 0%, var(--ember) 100%);
  color: #fff8ee;
  border-radius: 999px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  animation: bubbleIn 280ms var(--ease-soft) both;
}

.update-banner-text {
  white-space: nowrap;
}

.update-banner-btn {
  background: rgba(255, 255, 255, 0.22);
  border: 0;
  color: #fff;
  padding: 6px 14px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: background 180ms var(--ease-soft);
}

.update-banner-btn:hover {
  background: rgba(255, 255, 255, 0.32);
}

.update-banner-btn:disabled {
  opacity: 0.6;
  cursor: progress;
}

.update-banner-dismiss {
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, 0.85);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.update-banner-dismiss:hover {
  background: rgba(255, 255, 255, 0.18);
}

@media (max-width: 480px) {
  .update-banner {
    font-size: 12.5px;
    max-width: calc(100vw - 24px);
    padding: 6px 6px 6px 14px;
  }
  .update-banner-text {
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* 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;
  z-index: 1000;
  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;
}

/* -------------------------------------------------------------------------
   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, #888);
  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, #a0a0a8);
  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, #888);
}

.stt-reject-hint-body {
  color: var(--text, #ddd);
  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: #fff8ee;
  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: #fff8ee;
  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.110: padding-top reduziert auf 0 — Header (sticky) macht eigenes
     padding-top, sonst entsteht ein Hohlraum zwischen Topbar und Settings-
     Header. Plus mehr horizontaler Abstand für Tabs (User-Wunsch). */
  padding: 0 var(--space-3) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 640px;
  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);
  z-index: 2;
  /* Margin negativ damit Header full-width auch wenn Container Padding hat. */
  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;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 4px;
  background: var(--bg-elev);
  border: 1px solid var(--hairline);
  border-radius: 999px;
}

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

.settings-tab {
  flex-shrink: 0;
  padding: 8px 14px;
  font-family: var(--font-body);
  font-size: 12.5px;
  letter-spacing: 0.02em;
  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: #fff8ee;
  box-shadow: 0 1px 4px color-mix(in srgb, var(--ember) 30%, transparent);
}

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

@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);
}

.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);
}

.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"] {
  font: inherit;
  /* Pre.110: 16px verhindert iOS-Auto-Zoom beim Focus auf select. */
  font-size: 16px;
  font-family: var(--font-body);
  background: transparent;
  color: var(--text);
  border: none;
  padding: 4px 0;
  outline: none;
  cursor: pointer;
  -webkit-text-size-adjust: 100%;
}

.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;
  border: none;
  padding: 0;
  margin: 4px 0;
}

.settings-field select:focus,
.settings-field input:focus {
  outline: none;
}

/* 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);
}

.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: #fff8ee;
  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;
}

.connector-connect {
  background: linear-gradient(180deg, var(--ember-soft) 0%, var(--ember) 100%);
  color: #fff8ee;
  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: 6px;
}

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

.voice-card {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px 12px;
  background: var(--bg-elev-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-m);
  cursor: pointer;
  transition:
    border-color 200ms var(--ease-soft),
    background 200ms var(--ease-soft),
    box-shadow 200ms 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: 14px;
  font-weight: 500;
  color: var(--text);
}

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

.voice-card-desc {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.35;
}

.voice-card-play {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--ember) 35%, var(--hairline-strong));
  background: color-mix(in srgb, var(--ember) 8%, var(--bg-elev));
  color: var(--ember);
  cursor: pointer;
  transition:
    background 180ms var(--ease-soft),
    transform 120ms var(--ease-soft),
    border-color 180ms 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: #fff8ee;
  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: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--hairline);
}

.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;
}

/* -------------------------------------------------------------------------
   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;
  right: var(--space-4);
  bottom: 92px; /* über dem composer */
  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;
}

.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.126b: margin-top:auto aus pre.125 entfernt. Es konkurrierte mit
     .view { flex: 1 } und der Browser hat manchmal margin-auto den
     Vorrang gegeben — Resultat: Whitespace zwischen Chat und Dock
     auf Desktop, plus Chat scrollte nicht bis ganz unten (Live-Bug
     Martin). flex:1 auf .view ist autoritativ; .dock nimmt natürliche
     Höhe direkt am Ende. */
  /* Pre.108-followup: kein safe-area-inset-bottom hier — status-bar
     darunter macht das. Sonst Doppel-Padding-Stack. */
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--hairline);
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  align-items: center;
  background: var(--bg-deep);
  background: linear-gradient(
    180deg,
    transparent,
    color-mix(in srgb, var(--bg-deep) 70%, transparent) 100%
  );
  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);
}

@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, rgba(255, 255, 255, 0.55));
  cursor: pointer;
  transition:
    color 150ms var(--ease-soft, ease),
    background 150ms var(--ease-soft, ease);
}
.login-pw-eye:hover {
  color: var(--text, #fff);
  background: var(--bg-elev-2, rgba(255, 255, 255, 0.06));
}
.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: #fff8ee;
  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 {
  gap: 14px;
}

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

.dock-btn {
  --size: 60px;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  border: 1px solid var(--hairline-strong);
  background: var(--bg-elev);
  color: 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;
}

.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 */
.dock-btn--call {
  --size: 68px;
  background: linear-gradient(180deg, var(--ember-soft) 0%, var(--ember) 100%);
  border-color: color-mix(in srgb, var(--ember) 60%, var(--ember-deep));
  color: #fff8ee;
  box-shadow:
    0 8px 22px color-mix(in srgb, var(--ember) 35%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  animation: callPulse 2.4s var(--ease-quiet) infinite;
}

.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.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 {
  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);
}

.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;
}

.nav-drawer-close {
  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: color 180ms var(--ease-soft);
}

.nav-drawer-close:hover {
  color: var(--ember);
}

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

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

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

.nav-item[aria-selected="true"] {
  background: color-mix(in srgb, var(--ember) 14%, var(--bg-elev-2));
  color: var(--ember-soft);
}

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

.nav-item[aria-selected="true"] svg {
  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: 240px;
    border-right: 1px solid var(--hairline);
    box-shadow: 1px 0 0 0 transparent;
    animation: none;
  }
  /* Wenn die Desktop-Sidebar offen ist (drawer-open + min-width), shiften
     wir das App-Innere damit Content nicht überdeckt wird. */
  body.drawer-open #app {
    padding-left: 240px;
  }
  /* Im Desktop ist das Hamburger-Symbol redundant — Sidebar ist eh sichtbar.
     Wir lassen ihn drin (für Toggle), aber dezenter (siehe app.ts). */
}

/* --- 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);
  }
}

.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));
}

.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);
}

.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;
  z-index: 960;
  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. */
  max-width: min(96vw, 1400px);
  max-height: 92vh;
  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-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  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: 3;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background 200ms var(--ease-soft);
}

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

.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. */
  max-width: 100%;
  max-height: 80vh;
  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;
}

.lightbox-card img.is-zoomed {
  transform: scale(2);
  cursor: zoom-out;
  max-height: none;
  max-width: none;
}

.lightbox-actions {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
}

.lightbox-btn {
  background: linear-gradient(180deg, var(--ember-soft) 0%, var(--ember) 100%);
  color: #fff8ee;
  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 {
  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-share:focus-visible {
  opacity: 0.95;
}

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

@media (hover: none) {
  /* Touch-Geräte: dauerhaft sichtbar */
  .library-tile-share {
    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-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);
}

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

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

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

.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);
}

.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, #d97e3a);
  color: #fff;
  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: #fff;
}

/* --- 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;
}

.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: #fff8ee;
  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;
  padding: var(--space-3) var(--space-4);
  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);
}

.side-drawer-close {
  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: color 180ms var(--ease-soft);
}

.side-drawer-close:hover {
  color: var(--ember);
}

/* --- 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: cover;
  cursor: zoom-in;
}

.bubble.image .bubble-caption {
  font-size: 12.5px;
  color: var(--text-dim);
  margin: 8px 6px 4px;
  line-height: 1.4;
}

/* --- 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.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;
    /* Pre.123: nowrap + overflow-hidden. Vorher konnte der Inhalt
       umbrechen ("Version · Modell · Haiku · Anruf aus" → 2 Zeilen),
       was zusammen mit safe-area-inset-bottom einen riesigen Footer-
       Spalt ergab (Live-Bug Martin 2026-05-04 PWA). Ein Status-Pill
       passt in eine Zeile, mehr brauchen wir mobile nicht. */
    flex-wrap: nowrap;
    overflow: hidden;
    white-space: nowrap;
    padding-top: 4px;
    padding-right: max(var(--space-3), env(safe-area-inset-right));
    /* Pre.128: KEIN safe-area-inset-bottom — User will Spalt weg. */
    padding-bottom: 4px;
    padding-left: max(var(--space-3), env(safe-area-inset-left));
  }
  /* Pre.126: Version + Modell wieder sichtbar — Spalt-Bug war pre.125
     mit margin-top:auto behoben, also Inhalt darf voll. Nur das "Modell"-
     Label bleibt aus (redundant mit dem Wert). */
  .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;
  }
}

.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-download-block {
  margin: 12px 0 16px;
  padding: 12px 14px;
  background: var(--bg-elev-1, rgba(0, 0, 0, 0.04));
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ext-download-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  padding: 10px 16px;
  background: var(--ember, #d97e3a);
  color: #fff;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  transition: filter 0.15s ease;
}

.ext-download-btn:hover {
  filter: brightness(1.08);
  text-decoration: none;
  color: #fff;
}

.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 */
}

.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(100vh - 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;
}

.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));
}

.icm-actions {
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
  margin-top: var(--space-2);
}

.icm-btn {
  padding: 10px 20px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  border-radius: var(--radius-l);
  cursor: pointer;
  transition:
    filter 200ms var(--ease-soft),
    background 200ms var(--ease-soft);
}

.icm-btn--ghost {
  background: var(--bg-elev-2);
  color: var(--text-soft);
  border: 1px solid var(--hairline);
}

.icm-btn--ghost:hover {
  background: var(--bg-elev);
  color: var(--text);
}

.icm-btn--primary {
  background: linear-gradient(180deg, var(--ember-soft) 0%, var(--ember) 100%);
  color: #fff8ee;
  border: 1px solid var(--ember);
  box-shadow: 0 4px 14px rgba(232, 123, 74, 0.25);
}

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

.icm-btn--primary:active {
  filter: brightness(0.96);
}

/* === 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(100vh - 32px);
  overflow-y: auto;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--hairline);
}

.project-sheet-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: var(--text-dim);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.project-sheet-close:hover {
  background: var(--surface-soft);
  color: var(--text);
}

.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-sheet-files-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.project-sheet-files-head h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-dim);
}

.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: 4px;
}

.project-file-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--surface-soft);
  border-radius: 8px;
}

.project-file-title {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.project-file-title:hover {
  color: var(--ember);
  text-decoration: underline;
}

.project-file-meta {
  font-size: 11px;
  color: var(--text-dim);
  margin-left: 8px;
  flex-shrink: 0;
}

/* 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);
}

.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-tel:hover {
  color: #7d8c54;
  border-color: color-mix(in srgb, #7d8c54 55%, var(--hairline));
  background: color-mix(in srgb, #7d8c54 14%, 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-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 30px;
  height: 30px;
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
}

.contact-sheet-close:hover {
  background: var(--bg-elev-2);
  color: var(--text);
}

.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;
}

@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(100vh - 32px);
}

.project-sheet-v2-head {
  padding: 24px 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;
}

.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 {
  align-self: flex-start;
}

@media (max-width: 600px) {
  .project-sheet-v2 {
    max-width: 100%;
  }
  .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;
}

/* 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;
}

.dock-btn {
  --size: 48px;
}

.dock-btn--call {
  --size: 56px;
}

/* 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;
  }
  .dock-btn {
    --size: 44px;
  }
  .dock-btn--call {
    --size: 52px;
  }
  .status-bar {
    padding-top: 2px;
    padding-bottom: 2px;
    font-size: 10px;
  }
}

/* Auf sehr kleinen Screens (iPhone SE / Mini) — Buttons noch knapper */
@media (max-height: 700px) {
  .dock {
    padding: 4px var(--space-3) 6px;
    gap: 8px;
  }
  .dock-btn {
    --size: 44px;
  }
  .dock-btn--call {
    --size: 52px;
  }
}