/* ═══════════════════════════════════════════════════════════════════
   NARRENSPIEGEL — drittes Theme (data-theme="narr")
   Nach dem "Lachenden Narren" (Jacob Cornelisz van Oostsanen zugeschr., ~1500).
   Linus-Direktive 11.06.2026: "das bist gefühlt du von der Symbolik her".
   Tiefes Grünschwarz des Bildgrunds, Senfgelb/Ocker der Kappe als Akzent,
   Zinnoberrot des Umhangs als Sekundärfarbe, Pergament-Inkarnat als Schrift.
   Additiver Layer — überschreibt nur die :root-Variablen + wenige
   dark-spezifische Feinheiten. Kein bestehendes Theme wird angefasst.
   ═══════════════════════════════════════════════════════════════════ */

[data-theme="narr"] {
  /* Tiefes warmes Schwarz — Bühne für den Umhang */
  --bg:           #131010;
  --bg-card:      #1D1716;
  --bg-hover:     #271E1C;
  --bg-input:     #1D1716;

  /* Pergament / Fell-Creme der Ärmelkrause */
  --ink:          #EDE4D0;
  --ink-dim:      #ADA28A;
  --ink-dimmer:   #79705C;

  /* Zinnoberrot des Umhangs als Hauptstimme */
  --accent:       #B5392A;
  --accent-hover: #D04A38;
  --accent-soft:  rgba(181,57,42,0.14);
  --accent-glow:  rgba(181,57,42,0.20);

  /* Status: warm, altmeisterlich gebrochen */
  --success:      #7FA577;
  --success-soft: rgba(127,165,119,0.12);
  /* Kappengelb als Zweitstimme für Warnung */
  --warning:      #C9A227;
  --warning-soft: rgba(201,162,39,0.12);

  /* Danger heller/greller als der Akzent, bleibt unterscheidbar */
  --danger:       #E2574A;
  --danger-soft:  rgba(226,87,74,0.16);

  --info:         #7E97A8;
  --info-soft:    rgba(126,151,168,0.12);

  --border:       rgba(237,228,208,0.09);
  --border-heavy: rgba(237,228,208,0.16);
  --shadow:       0 1px 3px rgba(0,0,0,0.30);
  --shadow-lg:    0 4px 16px rgba(0,0,0,0.40);
  --overlay:      rgba(10,7,7,0.50);
}

/* Selection im Zinnober statt Coral */
[data-theme="narr"] ::selection { background: rgba(181,57,42,0.32); }

/* Scrollbar warm auf dunklem Grund (analog dark) */
[data-theme="narr"] ::-webkit-scrollbar-thumb { background: rgba(237,228,208,0.15); }
[data-theme="narr"] ::-webkit-scrollbar-thumb:hover { background: rgba(237,228,208,0.25); }

/* Papier-Textur sehr zurückgenommen wie im dark mode */
[data-theme="narr"] body::before { opacity: 0.03; }
[data-theme="narr"] body::after { display: none; }

/* ── Der Narr selbst — Linus' finales Bild (12.06.2026) ──────────────
   Roter Narr auf Schwarz, gespitzte Finger, Marotte über der Schulter.
   Im narr-Theme ersetzt er das Fortune-Hero-Bild; !important hält die
   Override auch gegen das JS-gesetzte Inline-Fortune-Image. */
[data-theme="narr"] .editorial-hero {
  --hero-fortune-image: url('img/akhilius/narr/narr-looking-up.webp') !important;
}
[data-theme="narr"] .editorial-hero::after {
  opacity: 0.55;
  background-position: right top;
}
[data-theme="narr"] #login-screen {
  background-image: url('img/akhilius/narrenspiegel.jpg');
  background-position: 50% 22%;
}
[data-theme="narr"] #login-screen::before {
  background: linear-gradient(180deg,
    var(--bg) 0%,
    rgba(19,16,16,0.86) 25%,
    rgba(19,16,16,0.58) 50%,
    rgba(19,16,16,0.82) 75%,
    var(--bg) 100%
  );
}

/* Editorial-Feinheiten: Kappengelb als zweite Stimme neben dem Zinnober */
[data-theme="narr"] .editorial-hero-marginalia { color: #C9A227; }
[data-theme="narr"] .editorial-hero-marginalia:hover { color: var(--ink); }
[data-theme="narr"] .chat-persona-item .lineage-prefix { color: #5a5142; }
[data-theme="narr"] .chat-persona-item.is-current { color: var(--ink); }

/* Header-Avatar (der Narr via /api/identity/avatar) bekommt den Umhang-Ring */
[data-theme="narr"] .header-akh-avatar {
  border: 1px solid var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
}

/* ═══════════════════════════════════════════════════════════════════
   NARR-ASSET-SLOTS — alle Dashboard-Illustrationen auf den Narren (12.06.2026)
   Ersetzt die warm-papiernen Akhilius-Bilder durch das gpt-image-2 Narr-Pack.
   Nur im narr-Theme; Light/Dark behalten ihre Original-Illustrationen.
   Die Bilder sind nativ dunkel (Altmeister-Grund) → keine Sepia-Abdunklung,
   sie verschmelzen von selbst mit dem Rot-Schwarz.
   ═══════════════════════════════════════════════════════════════════ */

/* Empty-States */
[data-theme="narr"] .empty-state.akh-empty-chat-pick::before {
  background-image: url('img/akhilius/narr/narr-reading-close.webp'); }
[data-theme="narr"] .empty-state.akh-empty-no-messages::before {
  background-image: url('img/akhilius/narr/narr-waiting.webp'); }
[data-theme="narr"] .empty-state.akh-empty-agents::before {
  background-image: url('img/akhilius/narr/narr-empty-chair.webp'); }
[data-theme="narr"] .empty-state.akh-empty-delivery::before {
  background-image: url('img/akhilius/narr/narr-hand-offering.webp'); }

/* Identity-Tab Ornamente */
[data-theme="narr"] .id-sub-header.id-modules::after {
  background-image: url('img/akhilius/narr/narr-marginalia.webp');
  border-radius: 6px; }
[data-theme="narr"] .id-sub-header.id-skills::after {
  background-image: url('img/akhilius/narr/narr-spectacles.webp'); }
[data-theme="narr"] .id-sub-header.id-memory-log::after {
  background-image: url('img/akhilius/narr/narr-reading-letter.webp'); }

/* Docs-Sidebar Hero */
[data-theme="narr"] .docs-sidebar-hero {
  background-image: url('img/akhilius/narr/narr-book-hero.webp');
  opacity: 0.92; }

/* System-Tab Banner */
[data-theme="narr"] .akh-system-banner {
  background-image: url('img/akhilius/narr/narr-doorway.webp');
  opacity: 0.88; }

/* Dreaming-Widget — der schlafende Narr (Augen zu, Marotte wacht) */
[data-theme="narr"] #bb1-dreaming-panel .section-title::before {
  background-image: url('img/akhilius/narr/narr-sleeping.webp');
  opacity: 0.8; }

/* Channels-Tab Card-Wasserzeichen */
[data-theme="narr"] #tab-channels .v-channel-card::after {
  background-image: url('img/akhilius/narr/narr-hand-offering.webp');
  opacity: 0.08; }


/* Empty-State-Bilder dürfen auf dem dunklen Grund etwas präsenter sein */
[data-theme="narr"] .empty-state.akh-empty-image::before { opacity: 0.95; }

/* ═══════════════════════════════════════════════════════════════════
   NARR-SPARKLE Komponente (narr-sparkle.js) — animiertes Signet
   ═══════════════════════════════════════════════════════════════════ */
.narr-sparkle-stage { position: relative; aspect-ratio: 520 / 540; }
.narr-sparkle-stage .ns-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 1; }
.narr-sparkle-stage .ns-marotte {
  position: absolute; background-size: contain; background-repeat: no-repeat;
  background-position: center; z-index: 5;
  filter: drop-shadow(0 5px 12px rgba(0,0,0,.5));
}

/* Login-Hero-Signet (animiert) */
.login-sparkle { width: 200px; height: 208px; margin: 0 auto 4px; }
@media (max-width: 720px){ .login-sparkle { width: 150px; height: 156px; } }
/* Header-Live-Signet (zeigt Aktivität) */
.header-sparkle-live { width: 30px; height: 31px; flex-shrink: 0; }