/* ============================================================
   Look „Neon Soft“ (31.10.2026): helle, klare Karten mit großen
   Radien, schwebende Seitenleiste, sparsames Licht (Lichtkante am
   aktiven Punkt, am Eingabefeld und um die Chat-Blasen), Hintergrund
   aus Verläufen. Abgenommene Vorlage: plans/2026-10-31-design-upgrade/
   v-h.css (Form, Licht) und v-j.css (Farbmodell aus 2 Farben).

   Aktiv nur mit <html data-look="neon">; das setzt look-neon.js, und
   nur dort, wo main.py data-neon stempelt (AIOS_CHAT_LOOK_NEON=1).
   Ohne data-look="neon" ändert diese Datei nichts.

   Farben: alles aus 2 Farben, die look-neon.js an <html> setzt:
   --marke-1 (Hauptfarbe: Knöpfe, Links, Auswahl), --marke-2 (Akzent:
   Licht, Zähler) und daraus gemischte RGB-Werte (--rgb-*) für Licht
   und Schatten. Startwerte sind die Markenfarben der Instanz.
   Textfarben klemmen die Helligkeit (oklch), damit jede Farbe auf Hell
   und Dunkel lesbar bleibt. Fest sind nur neutrale Flächen und die
   Status-Farben (ok, warn, fehler, info), Werte wie in index.html.

   Aufbau:
   1. Farbtöne aus den 2 Farben (gelten in beiden Themes)
   2. Kontext Hell und Kontext Dunkel. Hoher Kontrast (data-kontrast
      an <html>): die Kästen bekommen den Kontext des anderen Themes,
      Seite und Seitenleiste behalten ihren.
   3. Regeln (ab hier keine Farbe mehr direkt, nur Variablen; Ausnahme
      Weiß und Schwarz mit Deckkraft als neutrales Licht und Schatten)
   ============================================================ */

/* Bereiche in eigenen Dateien (Kennzahlen, Support, übrige Module) */
@import url("look-neon-kennzahlen.css?v=7");
@import url("look-neon-support.css?v=5");
@import url("look-neon-support-app.css?v=3");
@import url("look-neon-videoreview.css?v=1");
@import url("look-neon-module.css?v=10");
@import url("look-neon-tasks.css?v=1");
@import url("look-neon-tickets.css?v=7");
@import url("look-neon-review.css?v=2");
@import url("look-neon-content.css?v=8");
@import url("look-neon-baukasten.css?v=5");
@import url("look-neon-crm.css?v=5");
@import url("look-neon-automationen.css?v=1");
@import url("look-neon-ads.css?v=1");
@import url("look-neon-aicontent.css?v=1");
@import url("look-neon-wettbewerber.css?v=1");
@import url("look-neon-fenster.css?v=1");
@import url("look-neon-dateien.css?v=1");
@import url("look-neon-bestandsplanung.css?v=1");
@import url("look-neon-projektstatus.css?v=1");
@import url("look-neon-shop.css?v=1");
@import url("look-neon-meetings.css?v=1");
@import url("look-neon-newsletter.css?v=1");
@import url("look-neon-influencer.css?v=1");
@import url("look-neon-seo.css?v=1");
@import url("look-neon-finanzen.css?v=2");
@import url("look-neon-kontext.css?v=6");
@import url("look-neon-universe.css?v=1");

@property --ne-winkel { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes ne-drehen { to { --ne-winkel: 360deg; } }

/* ===== 1. Farbtöne ===== */
[data-look="neon"] {
  --c-warm: var(--marke-2);
  --c-kalt: var(--marke-1);
  --c-lila: rgb(var(--rgb-lila));
  --c-rosa: color-mix(in oklch, var(--marke-2) 65%, var(--marke-1));
  --c-warm-hell: rgb(var(--rgb-warm-hell));
  --c-warm-blass: color-mix(in oklab, var(--marke-2) 35%, #fff);
  /* Zähler: Verlauf immer hell genug für die dunkle Ziffer darauf */
  --v-zahl: linear-gradient(120deg, oklch(from var(--marke-2) max(l, .76) c h),
    oklch(from var(--c-rosa) max(l, .74) c h) 50%, oklch(from var(--marke-1) max(l, .74) c h));
  --c-auf-zahl: oklch(from var(--marke-1) .2 min(c, .05) h);
  --n-verlauf: linear-gradient(115deg, var(--c-warm) 0%, var(--c-rosa) 38%, var(--c-lila) 72%, var(--c-kalt) 100%);
  --v-streifen: linear-gradient(180deg, var(--c-warm), var(--c-lila) 60%, var(--c-kalt));
  --ne-blur: blur(18px) saturate(150%);
  color-scheme: light;
  background: var(--bg);
  /* KI-Kugel aus den 2 Farben (wie --bild-orb in v-j.css) */
  --ne-kugel: radial-gradient(circle at 36% 30%, #fff 0, var(--c-warm-blass) 9%, var(--c-warm) 30%, var(--c-rosa) 50%,
    var(--marke-1) 72%, oklch(from var(--marke-1) .28 c h) 100%);
}
/* Schrift der Vorlage: DM Sans, Titel in Geist (selbst gehostet, fonts.css) */
[data-look="neon"]:root { --font: "DM Sans", var(--font-montserrat); --ne-font-titel: "Geist", "DM Sans", system-ui, sans-serif; }
[data-look="neon"][data-theme="dark"] { color-scheme: dark; }

/* Kästen, die im hohen Kontrast das andere Theme bekommen. Die Liste steht
   zweimal unten (Kontext Hell und Dunkel), bei Änderung beide pflegen. */

/* ===== 2a. Kontext Hell ===== */
[data-look="neon"] body,
[data-look="neon"][data-theme="dark"][data-kontrast] :is(body[data-nav="chats"] .main,
  .kz-kachel, .kz-box, .tb-karte, .apps-kachel, .pf-connect-card,
  .ac-karte, .nl-kachel, .uv-karte, .ct-panel, .st-karte, .st-eingabe,
  .ui-karte, .ui-panel, .ui-dialog, .ui-formular, .ui-sheet, .ui-composer, .ui-gespraech, .ui-board-karte, .ui-dock,
  .vr-rahmen .queue, .vr-rahmen aside, .vr-rahmen .row, .vr-rahmen .archivbox) {
  --bg: color-mix(in oklab, var(--marke-1) 6%, color-mix(in oklab, var(--marke-2) 5%, #f5f4f2));
  --bg-elev: #fff;
  --surface: #fff;
  --surface-2: color-mix(in oklab, var(--marke-1) 5%, #fff);
  --border: rgba(var(--rgb-linie), .11);
  --border-strong: rgba(var(--rgb-linie), .2);
  --text: oklch(from var(--marke-1) .22 min(c, .03) h);
  --text-mid: oklch(from var(--marke-1) .4 min(c, .03) h);
  --text-dim: oklch(from var(--marke-1) .5 min(c, .035) h);
  --accent: oklch(from var(--marke-1) min(l, .52) c h);
  --accent-2: oklch(from var(--marke-1) min(l, .45) c h);
  --accent-bright: oklch(from var(--marke-1) min(l, .4) c h);
  --accent-tief: oklch(from var(--marke-1) min(l, .46) c h);
  --accent-soft: oklch(from var(--marke-1) l c h / .1);
  --accent-glow: oklch(from var(--marke-1) l c h / .25);
  --accent-glow-soft: oklch(from var(--marke-1) l c h / .1);
  --on-accent: #fff;
  --overlay: rgba(var(--rgb-linie), .05);
  --overlay-faint: rgba(var(--rgb-linie), .03);
  --overlay-hover: rgba(var(--rgb-linie), .05);
  --overlay-soft: rgba(var(--rgb-linie), .04);
  --overlay-hairline: rgba(var(--rgb-linie), .02);
  --code-bg: oklch(from var(--marke-1) l c h / .08);
  --pre-bg: color-mix(in oklab, var(--marke-1) 4%, #fff);
  --code-text: var(--text);
  --header-bg: transparent;
  /* Status fest, Werte aus index.html (Hell) */
  --ok: #1f8a4a; --warn: #b07d10; --danger: #c0392b; --danger-strong: #c0392b; --info: #2563eb;
  --warn-text: #8a6300; --ton-claude: #B4532F; --ton-gpt: #5B4BC9;
  /* Neon */
  --ne-kante: rgba(255, 255, 255, .95);
  --ne-schatten-1: 0 1px 2px rgba(var(--rgb-schatten-2), .04), 0 12px 32px -10px rgba(var(--rgb-schatten), .16);
  --ne-schatten-2: 0 2px 6px rgba(var(--rgb-schatten-2), .05), 0 26px 60px -14px rgba(var(--rgb-schatten), .28);
  --ne-nav-bg: rgba(255, 255, 255, .7);
  --ne-nav-voll: color-mix(in oklab, var(--marke-1) 3%, #fff);
  --ne-nav-rand: rgba(255, 255, 255, .95);
  --ne-nav-an-bg: linear-gradient(#fff, #fff) padding-box, var(--n-verlauf) border-box;
  --ne-nav-an-text: var(--accent-tief);
  --ne-nav-an-schatten: -6px 4px 16px -8px rgba(var(--rgb-warm), .6), 6px 8px 18px -8px rgba(var(--rgb-kalt), .6);
  --ne-knopf-fl: linear-gradient(180deg, oklch(from var(--marke-1) min(l, .56) c h), oklch(from var(--marke-1) min(l, .47) c h));
  --ne-knopf-text: #fff;
  /* Eigene Nachricht: getönte Fläche statt voller Knopffarbe (Phillip 01.11.: Kontrast zu krass) */
  --ne-ich-fl: linear-gradient(150deg, color-mix(in oklab, var(--marke-1) 16%, #fff), color-mix(in oklab, var(--marke-1) 24%, #fff));
  --ne-ich-text: var(--text);
  --ne-haupt-schatten: 0 8px 20px -6px rgba(var(--rgb-indigo), .55), 0 4px 16px -4px rgba(var(--rgb-warm), .45), inset 0 1px 0 rgba(255, 255, 255, .35);
  --ne-ki-fl: linear-gradient(150deg, color-mix(in oklab, var(--marke-2) 13%, #fff) 0%,
    color-mix(in oklab, var(--marke-1) 5%, #fff) 48%, color-mix(in oklab, var(--marke-1) 12%, #fff) 100%);
  --ne-ki-rand: rgba(var(--rgb-lila), .3);
  --ne-ki-schatten: 0 12px 30px -16px rgba(var(--rgb-schatten), .45);
  --ne-innen-fl: #fff;
  --ne-innen-rand: rgba(var(--rgb-linie), .2);
  --ne-innen-schatten: 0 2px 4px rgba(var(--rgb-schatten-2), .06), 0 14px 34px -8px rgba(var(--rgb-schatten), .3);
  --ne-composer-fl: linear-gradient(#fff, #fff);
  --ne-comp-a: var(--c-lila); --ne-comp-a-rgb: var(--rgb-lila); --ne-comp-b: var(--c-kalt);
  --ne-composer-schatten: -20px -8px 50px -10px rgba(var(--rgb-warm), .42), 20px 12px 54px -10px rgba(var(--rgb-kalt), .45),
    0 24px 50px -20px rgba(var(--rgb-schatten), .35);
  --ne-segment-bg: rgba(var(--rgb-indigo), .08);
  --ne-seg-an-bg: #fff;
  --ne-seg-an-schatten: 0 4px 12px -4px rgba(var(--rgb-indigo), .35);
  --ne-wort: linear-gradient(115deg, oklch(from var(--marke-2) min(l, .6) c h), oklch(from var(--c-rosa) min(l, .52) c h), var(--accent-2));
  --ne-titel: linear-gradient(100deg, var(--text) 15%, var(--accent-2) 55%, oklch(from var(--marke-2) min(l, .46) c h) 92%);
  --p1: color-mix(in oklab, var(--marke-1) 11%, #fff);
  --p2: color-mix(in oklab, var(--marke-2) 16%, #fff);
  --p3: color-mix(in oklab, var(--c-rosa) 15%, #fff);
  --p4: oklch(from var(--marke-1) .96 min(c, .035) calc(h - 35));
  --ne-tabbar-bg: oklch(from var(--marke-1) .2 min(c, .03) h);
  --ne-grund: radial-gradient(60% 55% at 10% 6%, color-mix(in oklab, var(--marke-2) 30%, transparent), transparent 70%),
    radial-gradient(55% 60% at 94% 10%, color-mix(in oklab, var(--marke-1) 26%, transparent), transparent 70%),
    radial-gradient(70% 55% at 65% 100%, color-mix(in oklab, var(--marke-1) 16%, transparent), transparent 72%), var(--bg);
  /* Lichtbogen oben, Karten, Hauptfläche (wie .deko.d1, .ui-nav, .ui-panel, .ui-gespraech in v-h.css) */
  --ne-bogen-deckung: 1;
  --ne-rail-bg: rgba(255, 255, 255, .66);
  --ne-rail-rand: 1px solid rgba(255, 255, 255, .95);
  --ne-rail-schatten: var(--ne-schatten-1);
  --ne-spalte-bg: rgba(255, 255, 255, .84);
  --ne-haupt-fl: linear-gradient(#fff, #fff);
  --ne-n-kante: linear-gradient(135deg, var(--c-warm), rgba(var(--rgb-warm-hell), .55) 18%, rgba(255, 255, 255, .95) 38%,
    rgba(255, 255, 255, .95) 62%, rgba(var(--rgb-kalt-hell), .6) 82%, var(--c-kalt));
  --ne-n-glow: -18px -12px 46px -18px rgba(var(--rgb-warm), .55), 18px 16px 50px -18px rgba(var(--rgb-kalt), .55);
  --ne-schein: .55;
  --ne-fuss-bg: #fff; --ne-fuss-schatten: 0 6px 18px -10px rgba(var(--rgb-schatten), .3);
  --ne-ikon-an: oklch(from var(--c-warm) min(l, .62) max(c, .12) h);
  /* Grund wie .app::before/::after und .deko.d2/.d3 der Vorlage (Hell) */
  --ne-grund-bild: var(--ne-bild-hell) center / cover no-repeat, var(--bg);
  --ne-scrim: linear-gradient(180deg, rgba(255, 255, 255, .46), rgba(255, 255, 255, .24) 40%, rgba(255, 255, 255, .36));
  --ne-licht: radial-gradient(70% 70% at 10% 0%, rgba(var(--rgb-kalt-hell), .3), transparent 75%) left top / 640px 520px no-repeat,
    radial-gradient(70% 65% at 95% 5%, rgba(var(--rgb-warm-hell), .3), transparent 75%) right top / 620px 520px no-repeat;
}

/* ===== 2b. Kontext Dunkel ===== */
[data-look="neon"][data-theme="dark"] body,
[data-look="neon"][data-theme="light"][data-kontrast] :is(body[data-nav="chats"] .main,
  .kz-kachel, .kz-box, .tb-karte, .apps-kachel, .pf-connect-card,
  .ac-karte, .nl-kachel, .uv-karte, .ct-panel, .st-karte, .st-eingabe,
  .ui-karte, .ui-panel, .ui-dialog, .ui-formular, .ui-sheet, .ui-composer, .ui-gespraech, .ui-board-karte, .ui-dock,
  .vr-rahmen .queue, .vr-rahmen aside, .vr-rahmen .row, .vr-rahmen .archivbox) {
  --bg: color-mix(in oklab, var(--marke-1) 3%, #08090b);
  --bg-elev: #15161b;
  --surface: #1b1c22;
  --surface-2: #23242b;
  --border: rgba(255, 255, 255, .09);
  --border-strong: rgba(255, 255, 255, .17);
  --text: #f6f6f8;
  --text-mid: #c6c7cf;
  --text-dim: #a2a4ae;
  --accent: oklch(from var(--marke-1) max(l, .78) c h);
  --accent-2: oklch(from var(--marke-1) max(l, .86) c h);
  --accent-bright: oklch(from var(--marke-1) max(l, .88) c h);
  --accent-tief: oklch(from var(--marke-1) min(l, .46) c h);
  --accent-soft: oklch(from var(--marke-1) max(l, .78) c h / .14);
  --accent-glow: oklch(from var(--marke-1) max(l, .78) c h / .35);
  --accent-glow-soft: oklch(from var(--marke-1) max(l, .78) c h / .14);
  --on-accent: oklch(from var(--marke-1) .2 min(c, .06) h);
  --overlay: rgba(255, 255, 255, .05);
  --overlay-faint: rgba(255, 255, 255, .03);
  --overlay-hover: rgba(255, 255, 255, .06);
  --overlay-soft: rgba(255, 255, 255, .04);
  --overlay-hairline: rgba(255, 255, 255, .02);
  --code-bg: rgba(255, 255, 255, .07);
  --pre-bg: #111216;
  --code-text: #e8e9ee;
  --header-bg: transparent;
  /* Status fest, Werte aus index.html (Dunkel) */
  --ok: #2fa45c; --warn: #ffc850; --danger: #e57373; --danger-strong: #c0506a; --info: #5b9cf6;
  --warn-text: rgba(255, 200, 80, .9); --ton-claude: #E08A6A; --ton-gpt: #9D8FF5;
  /* Neon */
  --ne-kante: rgba(255, 255, 255, .09);
  --ne-schatten-1: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 14px 34px -12px rgba(0, 0, 0, .6);
  --ne-schatten-2: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 28px 64px -16px rgba(0, 0, 0, .75);
  --ne-nav-bg: rgba(15, 16, 20, .8);
  --ne-nav-voll: #121318;
  --ne-nav-rand: rgba(255, 255, 255, .1);
  --ne-nav-an-bg: linear-gradient(90deg, color-mix(in oklab, var(--marke-2) 16%, #17181c), color-mix(in oklab, var(--marke-1) 16%, #17181c)) padding-box,
    var(--n-verlauf) border-box;
  --ne-nav-an-text: #fff;
  --ne-nav-an-schatten: -6px 2px 18px -8px rgba(var(--rgb-warm), .65), 6px 6px 20px -8px rgba(var(--rgb-kalt), .6);
  --ne-knopf-fl: linear-gradient(180deg, var(--accent-2), var(--accent));
  --ne-knopf-text: var(--on-accent);
  --ne-ich-fl: linear-gradient(150deg, color-mix(in oklab, var(--marke-1) 30%, #17181d), color-mix(in oklab, var(--marke-1) 18%, #131418));
  --ne-ich-text: var(--text);
  --ne-haupt-schatten: 0 0 18px oklch(from var(--accent) l c h / .35), 0 4px 18px -2px rgba(var(--rgb-warm), .45), inset 0 1px 0 rgba(255, 255, 255, .5);
  --ne-ki-fl: linear-gradient(150deg, color-mix(in oklab, var(--marke-2) 12%, #141518) 0%,
    color-mix(in oklab, var(--marke-1) 9%, #131417) 55%, color-mix(in oklab, var(--marke-1) 14%, #0f1013) 100%);
  --ne-ki-rand: oklch(from var(--accent) l c h / .3);
  --ne-ki-schatten: 0 14px 34px -14px rgba(0, 0, 0, .8);
  --ne-innen-fl: #24252d;
  --ne-innen-rand: rgba(255, 255, 255, .22);
  --ne-innen-schatten: 0 2px 6px rgba(0, 0, 0, .5), 0 18px 40px -10px rgba(0, 0, 0, .7);
  --ne-composer-fl: linear-gradient(180deg, #14151a, #0d0e11);
  --ne-comp-a: var(--c-kalt); --ne-comp-a-rgb: var(--rgb-kalt); --ne-comp-b: var(--c-lila);
  --ne-composer-schatten: inset 0 1px 0 rgba(255, 255, 255, .08), -18px -6px 46px -8px rgba(var(--rgb-warm), .38),
    18px 10px 50px -8px rgba(var(--rgb-kalt), .42);
  /* Deckend, sonst verschwimmt der Umschalter im warmen Licht (02.11.2026, CRM) */
  --ne-segment-bg: color-mix(in srgb, var(--surface-2) 94%, transparent);
  --ne-seg-an-bg: linear-gradient(#25262c, #1d1e23) padding-box, var(--n-verlauf) border-box;
  --ne-seg-an-schatten: 0 0 14px rgba(var(--rgb-warm), .22);
  --ne-wort: linear-gradient(115deg, oklch(from var(--marke-2) max(l, .8) c h), oklch(from var(--c-rosa) max(l, .78) c h), var(--accent-2));
  --ne-titel: linear-gradient(115deg, #fff 30%, color-mix(in oklab, var(--accent-2) 40%, #fff) 62%, color-mix(in oklab, var(--marke-2) 55%, #fff) 95%);
  --p1: color-mix(in srgb, var(--accent) 13%, var(--surface));
  --p2: color-mix(in srgb, var(--marke-2) 13%, var(--surface));
  --p3: color-mix(in srgb, var(--c-rosa) 12%, var(--surface));
  --p4: color-mix(in srgb, oklch(from var(--marke-1) .75 c calc(h - 35)) 13%, var(--surface));
  --ne-tabbar-bg: #141519;
  --ne-grund: radial-gradient(48% 42% at 0% 0%, rgba(var(--rgb-warm), .3), transparent 72%),
    radial-gradient(46% 44% at 100% 0%, rgba(var(--rgb-kalt), .3), transparent 72%),
    radial-gradient(60% 40% at 30% 100%, rgba(var(--rgb-lila), .1), transparent 72%), var(--bg);
  --ne-bogen-deckung: .55;
  --ne-rail-bg: linear-gradient(rgba(15, 16, 20, .8), rgba(15, 16, 20, .8)) padding-box,
    linear-gradient(160deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .05) 45%, rgba(255, 255, 255, .03)) border-box;
  --ne-rail-rand: 1px solid transparent;
  --ne-rail-schatten: 0 20px 50px rgba(0, 0, 0, .5);
  --ne-spalte-bg: rgba(24, 25, 31, .72);
  --ne-haupt-fl: linear-gradient(180deg, #121318, #0d0e11);
  --ne-n-kante: linear-gradient(135deg, rgba(var(--rgb-warm), .85), rgba(var(--rgb-warm), .22) 24%, rgba(255, 255, 255, .07) 45%,
    rgba(255, 255, 255, .05) 60%, rgba(var(--rgb-kalt), .35) 80%, var(--c-kalt));
  --ne-n-glow: -18px -12px 46px -16px rgba(var(--rgb-warm), .45), 18px 16px 50px -16px rgba(var(--rgb-kalt), .5);
  --ne-schein: .7;
  --ne-fuss-bg: rgba(255, 255, 255, .05); --ne-fuss-schatten: inset 0 0 0 1px var(--border);
  --ne-ikon-an: var(--c-warm);
  /* Grund wie .app::before/::after und .deko.d2/.d3 der Vorlage (Dunkel): das Lichtbild
     liegt oben (gespiegelt gespeichert), darunter wird es schnell schwarz */
  --ne-grund-bild: var(--ne-bild-dunkel) left top / max(1500px, 104vw) auto no-repeat, var(--bg);
  --ne-scrim: linear-gradient(180deg, rgba(8, 9, 11, .38) 0, rgba(8, 9, 11, .76) 270px, var(--bg) 640px);
  --ne-licht: radial-gradient(70% 70% at 100% 0%, rgba(var(--rgb-kalt), .26), transparent 75%) right top / 640px 520px no-repeat,
    radial-gradient(45% 50% at 45% 50%, rgba(var(--rgb-lila), .1), transparent) right 0 top 440px / 70% 420px no-repeat;
}

/* Hoher Kontrast: Kästen mit Verlaufskante und Licht außen, eigene Schrift */
[data-look="neon"][data-kontrast] :is(body[data-nav="chats"] .main,
  .kz-kachel, .kz-box, .tb-karte, .apps-kachel, .pf-connect-card,
  .ac-karte, .nl-kachel, .uv-karte, .ct-panel) {
  color: var(--text);
}
[data-look="neon"][data-kontrast] :is(.kz-kachel, .kz-box, .tb-karte, .apps-kachel, .pf-connect-card,
  .ac-karte, .nl-kachel, .uv-karte, .ct-panel) {
  border-color: transparent;
  background: linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(135deg, var(--c-warm), var(--surface) 30%, var(--surface) 70%, var(--c-kalt)) border-box;
  box-shadow: -12px -10px 38px -18px rgba(var(--rgb-warm), .5), 12px 12px 42px -18px rgba(var(--rgb-kalt), .55),
    0 22px 44px -14px rgba(0, 0, 0, .45);
}

/* ===================== 3. Regeln ===================== */

/* ─── Hintergrund wie in der Vorlage: Grund (Bild der Vorlage oder Verläufe aus den
   2 Farben), Schleier, Eckenlicht, darüber der Lichtbogen oben (.deko.d1) ─── */
[data-look="neon"] body { background: transparent; color: var(--text); }
[data-look="neon"] body::after {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background: var(--ne-licht), var(--ne-scrim), var(--ne-grund);
}
[data-look="neon"][data-ne-bild] body::after { background: var(--ne-licht), var(--ne-scrim), var(--ne-grund-bild); }
[data-look="neon"] body::before {
  content: ""; position: fixed; z-index: -1; pointer-events: none;
  top: -430px; left: 0; right: 0; height: 820px; border-radius: 50%; filter: blur(20px);
  background: radial-gradient(56% 50% at 50% 50%, transparent 76%, rgba(var(--rgb-warm), .75) 85%, rgba(var(--rgb-lila), .6) 91%,
    rgba(var(--rgb-kalt), .25) 95%, transparent 99%);
  opacity: var(--ne-bogen-deckung);
}
@media (max-width: 760px) { [data-look="neon"] body::before { top: -300px; height: 560px; } }
/* Punkteraster der Vorlage, scharf: das Lichtbild hat keine Punkte mehr (sie waren
   2 px groß und unscharf, am großen Bildschirm noch einmal hochgezogen). CSS zeichnet
   sie in Bildschirmauflösung, die Maske aus der Vorlage sagt, wo und wie hell. */
[data-look="neon"][data-theme="dark"][data-ne-bild]::after {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, .74) 0 .75px, rgba(255, 255, 255, 0) 1.25px) 3px 3px / 11px 11px;
  -webkit-mask: var(--ne-punkte) left top / max(1500px, 104vw) auto no-repeat;
  mask: var(--ne-punkte) left top / max(1500px, 104vw) auto no-repeat;
}
[data-look="neon"] :is(.main, .chat, .chat-wrap, .composer) { background: transparent; }
/* Die Orbit-Kugel und ihr Schalter bleiben unter diesem Look aus */
[data-look="neon"] :is(#look-fx, .look-btn),
[data-look="neon"] #header-chips > .hchip-theme.look-btn { display: none !important; }

/* ─── Schwebende Seitenleiste (Rechner) ─── */
@media (min-width: 768px) and (min-height: 501px), (min-width: 768px) and (hover: hover) {
  [data-look="neon"] body .sidebar {
    margin: 12px 0 12px 12px;
    border: 1px solid var(--ne-nav-rand);
    border-radius: 26px;
    background: var(--ne-nav-bg);
    box-shadow: var(--ne-schatten-1);
    backdrop-filter: var(--ne-blur); -webkit-backdrop-filter: var(--ne-blur);
  }
  /* Mit Rail: drei schwebende Karten mit Luft dazwischen, Leiste, Liste und
     (im Chat) die Hauptfläche. Die Hülle .sidebar selbst ist unsichtbar. */
  [data-look="neon"] body.zentrale-an {
    --ne-luft: 16px;
    grid-template-columns: calc(var(--rail-w) + var(--sidebar-w, 260px) + 2 * var(--ne-luft)) 1fr;
  }
  [data-look="neon"] body.zentrale-an:is(.sb-collapsed, .spalte-leer) { grid-template-columns: calc(var(--rail-w) + var(--ne-luft)) 1fr; }
  [data-look="neon"] body.zentrale-an .sidebar {
    margin: var(--ne-luft) 0 var(--ne-luft) var(--ne-luft); gap: var(--ne-luft);
    border: 0; border-radius: 0; background: none; box-shadow: none;
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  [data-look="neon"] body.zentrale-an .sb-rail {
    border: var(--ne-rail-rand); border-radius: 28px;
    background: var(--ne-rail-bg); box-shadow: var(--ne-rail-schatten);
    backdrop-filter: var(--ne-blur); -webkit-backdrop-filter: var(--ne-blur);
  }
  [data-look="neon"] body.zentrale-an .sb-spalte {
    position: relative; border: 1px solid var(--ne-kante); border-radius: 24px;
    background: var(--ne-spalte-bg); box-shadow: var(--ne-schatten-1);
    backdrop-filter: var(--ne-blur); -webkit-backdrop-filter: var(--ne-blur);
  }
  [data-look="neon"] body.zentrale-an .sb-spalte-kopf { height: 56px; padding: 6px 12px 0 18px; justify-content: flex-end; }
  /* Ohne Plus (alles außer Chats) steht dort nur das Einklappen: schmale Zeile statt leerem Streifen */
  [data-look="neon"] body.zentrale-an:not([data-nav="chats"]) .sb-spalte-kopf { height: 38px; padding-top: 4px; }
  [data-look="neon"] body.zentrale-an .sb-spalte-kopf b { font-size: var(--fs-5); font-weight: 600; letter-spacing: -.02em; }
  [data-look="neon"] body.zentrale-an .sb-spalte-plus {
    border-radius: 50% !important; color: var(--ne-knopf-text) !important;
    background: radial-gradient(80% 110% at 50% 135%, rgba(var(--rgb-kern), .95), rgba(var(--rgb-kern), 0) 70%), var(--ne-knopf-fl) !important;
    box-shadow: 0 6px 16px -4px rgba(var(--rgb-indigo), .6), 0 0 14px -2px rgba(var(--rgb-warm), .5);
  }
  [data-look="neon"] .sidebar-footer { background: transparent; border-top-color: var(--border); border-radius: 0 0 24px 24px; }
  [data-look="neon"] .sidebar-resize { border-radius: 0 24px 24px 0; }
  /* Chat: die Hauptfläche schwebt als Karte mit Lichtkante (wie .ui-gespraech) */
  [data-look="neon"] body.zentrale-an[data-nav="chats"] .main {
    margin: var(--ne-luft); min-height: 0;
    border: 1.5px solid transparent; border-radius: 28px;
    background: var(--ne-haupt-fl) padding-box, var(--ne-n-kante) border-box;
    box-shadow: var(--ne-n-glow), var(--ne-schatten-2);
  }
  [data-look="neon"] body.zentrale-an[data-nav="chats"] .main > .header { padding-top: 10px; }
  [data-look="neon"] body.zentrale-an[data-nav="chats"] .main .composer { padding-bottom: 6px; }
  [data-look="neon"] body.zentrale-an[data-nav="chats"] .main .chat-title { font-size: var(--fs-6, 1.35rem); font-weight: 600; letter-spacing: -.02em; }
  /* Rail: aktiver Punkt als Kachel mit Lichtkante, kein Randbalken */
  [data-look="neon"] body.zentrale-an .sb-rail .sb-nav-btn {
    width: calc(100% - 14px); border: 1px solid transparent; border-radius: 18px;
    transition: background .15s, box-shadow .15s;
  }
  [data-look="neon"] body.zentrale-an .sb-rail .sb-nav-btn:hover { background: var(--overlay-hover); }
  [data-look="neon"] body.zentrale-an .sb-rail .sb-nav-btn::before { display: none; }
  [data-look="neon"] body.zentrale-an .sb-rail .sb-nav-btn.active {
    background: var(--ne-nav-an-bg); box-shadow: var(--ne-nav-an-schatten);
  }
  [data-look="neon"] body.zentrale-an .sb-rail .sb-nav-btn.active span { color: var(--ne-nav-an-text); font-weight: 700; }
  [data-look="neon"] body.zentrale-an .sb-rail .sb-nav-btn > .mz {
    --mz: 26px; background: none; box-shadow: none; color: var(--text-mid); padding: 2px;
  }
  [data-look="neon"] body.zentrale-an .sb-rail .sb-nav-btn > .mz .mz-gegen { color: var(--bg); }
  [data-look="neon"] body.zentrale-an .sb-rail .sb-nav-btn:hover > .mz { color: var(--text); }
  [data-look="neon"] body.zentrale-an .sb-rail .sb-nav-btn.active > .mz {
    background: none; box-shadow: none; color: var(--ne-ikon-an);
    filter: drop-shadow(0 0 6px rgba(var(--rgb-warm), .7));
  }
  [data-look="neon"] body.zentrale-an .sb-rail .sb-nav-btn.active > .mz .mz-gegen { color: var(--bg); }
  [data-look="neon"] body.zentrale-an .sb-rail :is(.sb-rail-thema, .sb-rail-auf) { border-radius: 999px; }
}

/* Breiter Bildschirm: die Leiste wie .ui-nav der Vorlage, Kugel mit Namen oben,
   je Bereich Symbol und Name in einer Zeile, unten eine Karte mit Konto,
   Hell/Dunkel und Darstellung. Schmaler bleibt die Symbol-Leiste von oben. */
@media (min-width: 1200px) and (min-height: 501px) {
  [data-look="neon"] body.zentrale-an { --rail-w: var(--ne-rail-w, 236px); }
  [data-look="neon"] body.zentrale-an .sb-rail {
    display: grid; grid-template-columns: 34px 1fr auto auto; grid-template-rows: auto auto minmax(0, 1fr) auto;
    align-items: center; gap: 4px 0; padding: 22px 14px 18px;
    container: ne-leiste / inline-size;
  }
  /* Ziehen ohne Nachlauf, Loslassen (Einrasten) gleitet */
  [data-look="neon"] body.zentrale-an { transition: grid-template-columns .2s ease; }
  [data-look="neon"].ne-zieht body.zentrale-an { transition: none; }
  [data-look="neon"] body.zentrale-an .sb-rail > * { grid-column: 1 / -1; }
  [data-look="neon"] body.zentrale-an .sb-rail .sb-brand-mark {
    grid-row: 1; display: flex; align-items: center; gap: 10px; width: auto; min-width: 0; height: 34px; margin: 0 0 18px;
    padding: 0 0 0 clamp(3px, calc(3px + (100cqi - 40px) * .05), 8px);
    background: none; box-shadow: none; border-radius: 0; font-size: 0; color: var(--text);
  }
  [data-look="neon"] body.zentrale-an .sb-rail .sb-brand-mark::before {
    content: ""; width: 34px; height: 34px; flex: none; border-radius: 50%;
    background: #000 var(--ne-kugel-bild, none) center / 113% no-repeat; filter: var(--ne-kugel-farbe, none);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .16), 0 0 16px rgba(var(--rgb-warm), .45), 0 0 26px rgba(var(--rgb-kalt), .35);
  }
  [data-look="neon"] body.zentrale-an .sb-rail .sb-rail-name {
    display: block; grid-row: 1; grid-column: 2 / -1; align-self: start; min-width: 0; height: 34px; margin: 0 0 18px 18px;
    font: 600 20px/34px var(--ne-font-titel); letter-spacing: -.03em; color: var(--text);
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis; transition: opacity .15s;
  }
  [data-look="neon"] body.zentrale-an .sb-rail .sb-rail-auf { grid-row: 2; width: 100%; justify-content: flex-start; padding: 0 14px; border-radius: 999px; }
  /* Der Mittelteil scrollt und schneidet deshalb alles ab, was über seinen Rand ragt. Mit
     Polster bis an den Rand der Leiste hat das Leuchten des aktiven Punkts Platz (sonst harte Kanten). */
  [data-look="neon"] body.zentrale-an .sb-rail .sb-rail-mitte {
    grid-row: 3; align-self: stretch; align-items: stretch; gap: 4px; width: auto; margin: -12px -14px; padding: 12px 14px 16px;
  }
  [data-look="neon"] body.zentrale-an .sb-rail .sb-nav-btn {
    width: 100%; flex-direction: row; justify-content: flex-start; border-radius: 999px;
    gap: clamp(0px, calc((100cqi - 40px) * .12), 12px); padding: 10px clamp(9px, calc(9px + (100cqi - 40px) * .05), 14px);
  }
  [data-look="neon"] body.zentrale-an .sb-rail .sb-nav-btn > .mz { --mz: 22px; padding: 0; }
  [data-look="neon"] body.zentrale-an .sb-rail .sb-nav-btn > svg { width: 20px; height: 20px; margin: 1px; }
  [data-look="neon"] body.zentrale-an .sb-rail .sb-nav-btn span {
    -webkit-line-clamp: 1; text-align: left; hyphens: manual; overflow-wrap: normal; overflow: hidden; text-overflow: ellipsis;
    font-size: var(--fs-3); font-weight: 500; letter-spacing: 0; color: var(--text-mid);
    white-space: nowrap; transition: opacity .15s;
  }
  [data-look="neon"] body.zentrale-an .sb-rail .sb-nav-btn:hover span { color: var(--text); }
  [data-look="neon"] body.zentrale-an .sb-rail .sb-rail-trenn { width: auto; margin: 10px 14px; background: var(--border); }
  /* Fußkarte: Konto links, Knöpfe rechts; die Karte selbst ist ein Rasterfeld hinter ihnen */
  [data-look="neon"] body.zentrale-an .sb-rail::after {
    content: ""; grid-row: 4; grid-column: 1 / -1; align-self: stretch; margin: -10px -6px; border-radius: 20px;
    background: var(--ne-fuss-bg); box-shadow: var(--ne-fuss-schatten);
  }
  [data-look="neon"] body.zentrale-an .sb-rail :is(.sb-rail-konto, #sb-rail-thema) { grid-row: 4; position: relative; z-index: 1; margin: 0; }
  [data-look="neon"] body.zentrale-an .sb-rail .sb-rail-konto { grid-column: 1; width: 34px; height: 34px; }
  [data-look="neon"] body.zentrale-an .sb-rail #sb-rail-thema { grid-column: 4; }
  @container ne-leiste (max-width: 110px) {
    [data-look="neon"] body.zentrale-an .sb-rail .sb-rail-name,
    [data-look="neon"] body.zentrale-an .sb-rail .sb-nav-btn span { opacity: 0; }
    /* Schmal: der unsichtbare Name nimmt keinen Platz, das Symbol sitzt mittig im Rahmen */
    [data-look="neon"] body.zentrale-an .sb-rail .sb-nav-btn { justify-content: center; gap: 0; }
    [data-look="neon"] body.zentrale-an .sb-rail .sb-nav-btn span { display: none; }
    /* Schmal: auch der Name fällt ganz weg, sonst hält sein Abstand (18 px) die Rasterspalte offen,
       das Raster wird breiter als die Leiste und Symbole wie Fußkarte rutschen nach rechts über den Rand */
    [data-look="neon"] body.zentrale-an .sb-rail .sb-rail-name { display: none; }
    /* Schmal: das Zeichen (Kugel oder Kunden-Logo) sitzt mittig über den Symbolen, bei jeder gezogenen Breite */
    [data-look="neon"] body.zentrale-an .sb-rail .sb-brand-mark { justify-content: center; justify-self: center; gap: 0; padding: 0; }
    /* Schmal: Hell/Dunkel rückt über das Profilbild, beide mittig in der Fußkarte */
    [data-look="neon"] body.zentrale-an .sb-rail :is(.sb-rail-konto, #sb-rail-thema) { grid-column: 1 / -1; justify-self: center; }
    [data-look="neon"] body.zentrale-an .sb-rail #sb-rail-thema { align-self: start; }
    [data-look="neon"] body.zentrale-an #sb-rail .sb-rail-konto { margin-top: 44px; }
  }
  /* Ein Kunden-Logo (img) bleibt rund wie eingeklappt, statt aufgeklappt eckig zu werden */
  [data-look="neon"] body.zentrale-an .sb-rail img.sb-brand-mark {
    width: 34px; padding: 0; border-radius: 50%; object-fit: cover;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .16), 0 0 16px rgba(var(--rgb-warm), .45), 0 0 26px rgba(var(--rgb-kalt), .35);
  }
  /* Griff genau auf dem rechten Rand: breiter und schmaler ziehen, schmal rastet auf Symbole ein */
  [data-look="neon"] body.zentrale-an .sb-rail { position: relative; }
  [data-look="neon"] body.zentrale-an .sb-rail > .ne-griff {
    display: block; position: absolute; grid-area: auto; top: 28px; bottom: 28px; right: -7px; width: 14px; z-index: 5; cursor: col-resize;
  }
  /* Ohne grid-area: auto wäre das Rasterfeld (ohne Polster) der Bezug und die Linie säße innen */
  [data-look="neon"] body.zentrale-an .sb-rail > .ne-griff::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: 5.5px; width: 3px; border-radius: 3px;
    background: var(--accent); opacity: 0; transition: opacity .15s;
  }
  [data-look="neon"] body.zentrale-an .sb-rail > .ne-griff:is(:hover, .zieht)::after { opacity: .45; }
}

/* Der Griff gilt nur, wo die breite Leiste möglich ist (ab 1200 px); in anderen Looks blendet look-neon.js beide aus */
[data-look="neon"] :is(.ne-griff, .ne-liste-auf) { display: none; }
/* Chatliste weggeklappt: der Knopf im Chat-Kopf holt sie zurück. Er ersetzt den Knopf in der Leiste. */
@media (min-width: 768px) and (min-height: 501px), (min-width: 768px) and (hover: hover) {
  [data-look="neon"] body.zentrale-an[data-nav="chats"]:is(.sb-collapsed, .spalte-platz) .main .ne-liste-auf {
    width: 36px; height: 36px; flex: none; display: flex; align-items: center; justify-content: center; padding: 0;
    border: 0; border-radius: 12px; background: transparent; color: var(--text-dim); cursor: pointer;
  }
  [data-look="neon"] body.zentrale-an[data-nav="chats"] .sb-rail .sb-rail-auf { display: none !important; }
}
[data-look="neon"] .ne-liste-auf:hover { background: var(--overlay-hover); color: var(--text); }
[data-look="neon"] .ne-liste-auf:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
[data-look="neon"] .ne-liste-auf svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* Leiste ohne Zentrale (Kunden-Server ohne Rail) */
[data-look="neon"] .sb-nav-btn.active { color: var(--ne-nav-an-text); }

/* Chats in der Spalte: offener Chat als Pille mit Lichtkante */
[data-look="neon"] .session-item { border-radius: 14px; }
[data-look="neon"] .session-item.active {
  border: 1px solid transparent;
  background: var(--ne-nav-an-bg);
  box-shadow: var(--ne-nav-an-schatten);
}
[data-look="neon"] .session-item.active .session-title { color: var(--ne-nav-an-text); }
[data-look="neon"] :is(.sidebar-search, .sb-project) { border-radius: 999px; }

/* Bunte Zähler: Verlauf, dunkle Ziffer */
[data-look="neon"] :is(.sk-rn:not(.ruhig):not(.links), .tab-trigger .tab-trigger-count, .tasks-group-label .tg-count, .td-tab .tab-n) {
  background: var(--v-zahl); color: var(--c-auf-zahl); font-weight: 700;
  box-shadow: -2px 2px 8px -3px rgba(var(--rgb-warm), .7), 2px 3px 9px -3px rgba(var(--rgb-lila), .65);
}

/* ─── Kopf des Chats ─── */
[data-look="neon"] .header { border-bottom-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }

/* Chat-Reiter: Pillen; der offene trägt die Lichtkante wie der aktive Punkt der Leiste */
[data-look="neon"] .chat-tabs { background: transparent; border-bottom: 0; padding: 2px 14px 8px; gap: 6px; }
[data-look="neon"] .chat-tabs-reihe { gap: 6px; padding: 4px 2px; }
[data-look="neon"] .chat-tab {
  border: 1px solid transparent; border-radius: 999px; padding: 7px 10px 7px 16px;
  background: var(--overlay-soft);
}
[data-look="neon"] .chat-tab:hover { background: var(--overlay-hover); }
[data-look="neon"] .chat-tab.active {
  color: var(--ne-nav-an-text); font-weight: 600;
  background: var(--ne-nav-an-bg); box-shadow: var(--ne-nav-an-schatten);
}
[data-look="neon"] .chat-tab.active .chat-tab-title { color: var(--ne-nav-an-text); }
[data-look="neon"] .chat-tab.active :is(.chat-tab-close, .chat-tab-more) { color: var(--text-mid); }
[data-look="neon"] .chat-tab.active :is(.chat-tab-close, .chat-tab-more):hover { background: var(--overlay-hover); color: var(--text); }

[data-look="neon"] .chat-tab-add { border-radius: 50%; background: transparent; border-color: transparent; }
[data-look="neon"] .chat-tab-add:hover { background: var(--overlay-hover); }
[data-look="neon"] :is(.chat-title, .sb-spalte-kopf b, .empty h1) { font-family: var(--ne-font-titel); }
/* Kopf der Nachricht: normale Schrift statt Schreibmaschine, KI mit Kugel */
[data-look="neon"] .msg-meta { font-family: var(--font); letter-spacing: .02em; text-transform: none; font-weight: 600; font-size: var(--fs-2); }
[data-look="neon"] .msg.assistant .msg-meta::before {
  content: ""; width: 30px; height: 30px; flex: none; border-radius: 50%;
  background: #000 var(--ne-kugel-still, none) center/113% no-repeat; filter: var(--ne-kugel-farbe, none);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .16), 0 0 14px rgba(var(--rgb-warm), .45), 0 0 22px rgba(var(--rgb-kalt), .35);
}
/* Meldung von Cursor (Phillip 08.11.2026): Code-Zeichen statt AIOS-Kugel, blauer Streifen */
[data-look="neon"] .msg.von-cursor .msg-meta { color: var(--info); }
[data-look="neon"] .msg.assistant.von-cursor .msg-meta::before {
  content: "</>"; display: grid; place-items: center; background: var(--info); filter: none;
  color: #fff; font: 700 11px/1 var(--mono, ui-monospace, monospace); animation: none;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .16);
}
[data-look="neon"] .msg.von-cursor > .bubble { box-shadow: inset 4px 0 0 var(--info); }
/* Nur die neueste Antwort bewegt sich, sonst wuseln in langen Chats dutzende Kugeln */
[data-look="neon"] .chat-wrap > .msg.assistant:not(:has(~ .msg.assistant)) .msg-meta::before { background-image: var(--ne-kugel-bild, none); }
/* Bei 30 px sieht man den Partikelfluss kaum (Phillip 08.11.2026): die Kugel dreht sich dazu langsam */
@keyframes ne-kugel-kreisen { to { transform: rotate(360deg); } }
[data-look="neon"] .chat-wrap > .msg.assistant:not(:has(~ .msg.assistant)) .msg-meta::before,
[data-look="neon"] body.zentrale-an .sb-rail .sb-brand-mark::before { animation: ne-kugel-kreisen 60s linear infinite; }
@media (prefers-reduced-motion: reduce) {
  [data-look="neon"] .chat-wrap > .msg.assistant .msg-meta::before,
  [data-look="neon"] body.zentrale-an .sb-rail .sb-brand-mark::before { background-image: var(--ne-kugel-still, none) !important; animation: none !important; }
}

/* Eingabefeld: der Rahmen ist die Lichtkante der Karte, kein zweiter Fokusring innen */
[data-look="neon"] .compose-card :is(#input, textarea):is(:focus, :focus-visible) { outline: none; box-shadow: none; }
/* Schmales Feld (Tickets, rechte Spalte): der Platzhalter bricht nicht um und wird nicht abgeschnitten */
[data-look="neon"] .compose-card :is(#input, textarea)::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Verlauf der Werkzeuge: Pille wie „Shopify … abgefragt“ in der Vorlage */
[data-look="neon"] .run-trace { border: 0; background: none; border-radius: 0; overflow: visible; margin: 4px 0 12px; }
[data-look="neon"] .run-trace-head {
  display: inline-flex; width: fit-content; max-width: 100%; gap: 8px; padding: 7px 12px 7px 14px;
  border-radius: 999px; background: var(--accent-soft); color: var(--accent-2);
  font-family: var(--font); font-size: var(--fs-2); font-weight: 600; letter-spacing: 0; text-transform: none;
}
[data-look="neon"] .run-trace-head:hover { color: var(--accent-2); background: var(--accent-glow-soft); filter: brightness(1.08); }
[data-look="neon"] .run-trace-head .rt-count {
  border: 0; padding: 1px 8px; background: var(--v-zahl); color: var(--c-auf-zahl); font-weight: 700; letter-spacing: 0;
}
[data-look="neon"] .run-trace[data-state="open"] .run-trace-body {
  margin-top: 8px; border-radius: 16px; background: var(--ne-innen-fl);
  border: 1px solid var(--ne-innen-rand); box-shadow: var(--ne-innen-schatten);
}

/* ─── Begrüßung im leeren Chat ─── */
[data-look="neon"] .empty h1 {
  background: var(--ne-titel); -webkit-background-clip: text; background-clip: text; color: transparent;
  font-weight: 600; letter-spacing: -.03em;
}
[data-look="neon"] .empty-plain h1 { font-size: clamp(1.8rem, 3.4vw, 3rem); line-height: 1.1; letter-spacing: -.04em; padding-bottom: 4px; }
[data-look="neon"] body .empty h1 em {
  background: var(--ne-wort); -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* Neuer Chat (Phillip 06.11.2026): Lichtband der Startseite oben, Horizont hinter dem Eingabefeld,
   die Frage dazwischen in 2 Zeilen. Beides bewegt sich langsam und nimmt die Farben der Instanz. */
[data-look="neon"] body:not(.tenant-customer) .jarvis { display: none; }
[data-look="neon"] .empty-plain { display: block; text-align: center; }
[data-look="neon"] .empty-plain .empty-label { display: none; }
[data-look="neon"] body .empty-plain h1 em { font-style: normal; padding: 0; margin: 0; }
[data-look="neon"] .ne-umbruch { display: inline; }
/* #empty blendet das Skript per style.display aus, sobald der Chat Nachrichten hat. */
[data-look="neon"] body[data-nav="chats"] .main:not(:has(#empty[style*="none"])) { isolation: isolate; }
[data-look="neon"] body[data-nav="chats"] .main:not(:has(#empty[style*="none"])) .ne-start {
  display: block; position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; border-radius: inherit;
}
[data-look="neon"] .ne-start { --ne-start-bild: var(--ne-bild-hell); }
[data-look="neon"] body[data-nav="chats"] .main:not(:has(#empty[style*="none"])) .chat-title { color: var(--text); }
[data-look="neon"][data-theme="dark"] .ne-start { --ne-start-bild: var(--ne-bild-dunkel); }
[data-look="neon"] .ne-start i { position: absolute; left: -22%; right: -22%; top: -14%; height: 78%;
  background: var(--ne-start-bild) 50% 0 / cover no-repeat;
  -webkit-mask: linear-gradient(180deg, #000 0, #000 30%, transparent 100%); mask: linear-gradient(180deg, #000 0, #000 30%, transparent 100%);
  opacity: .85; will-change: transform; animation: ne-start-band 16s ease-in-out infinite alternate; }
[data-look="neon"] .ne-start i + i { opacity: .5; mix-blend-mode: screen; animation: ne-start-band2 21s ease-in-out infinite alternate; }
[data-look="neon"][data-theme="light"] .ne-start i + i { mix-blend-mode: multiply; opacity: .35; }
[data-look="neon"] .ne-start b { position: absolute; inset: 0;
  background: radial-gradient(circle, rgba(255, 255, 255, .5) 0 .75px, transparent 1.25px) 3px 3px / 11px 11px;
  -webkit-mask: linear-gradient(115deg, #000 0, transparent 42%, transparent 62%, #000 100%), linear-gradient(180deg, #000, transparent 46%); -webkit-mask-composite: source-in;
  mask: linear-gradient(115deg, #000 0, transparent 42%, transparent 62%, #000 100%), linear-gradient(180deg, #000, transparent 46%); mask-composite: intersect; }
[data-look="neon"][data-theme="light"] .ne-start b { background-image: radial-gradient(circle, rgba(var(--rgb-schatten), .32) 0 .75px, transparent 1.25px); }
[data-look="neon"] .ne-start s { position: absolute; left: 0; right: 0; bottom: 0; height: 46%;
  background: radial-gradient(70% 90% at 50% 100%, rgba(var(--rgb-kalt), .34), rgba(var(--rgb-warm), .1) 52%, transparent 74%);
  animation: ne-start-schein 16s ease-in-out infinite; }
[data-look="neon"] .ne-start span, [data-look="neon"] .ne-start u { position: absolute; left: -30%; right: -30%; bottom: -84%; height: 118%; border-radius: 50%; }
[data-look="neon"] .ne-start span { background: radial-gradient(50% 50% at 50% 50%, transparent 88%, rgba(var(--rgb-kalt), .16) 93%, rgba(var(--rgb-kalt), .5) 97.5%, rgba(var(--rgb-warm), .95) 99.2%, transparent 100%);
  animation: ne-start-hoch 16s ease-in-out infinite; }
[data-look="neon"] .ne-start u { background: conic-gradient(from var(--ne-start-w), transparent 0 10%, #fff 17%, transparent 24% 58%, rgb(var(--rgb-warm-hell)) 66%, transparent 74% 100%);
  -webkit-mask: radial-gradient(50% 50% at 50% 50%, transparent 97.6%, #000 99.2%, transparent 100%); mask: radial-gradient(50% 50% at 50% 50%, transparent 97.6%, #000 99.2%, transparent 100%);
  animation: ne-start-lauf 16s linear infinite, ne-start-hoch 16s ease-in-out infinite; }
@property --ne-start-w { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes ne-start-band { from { transform: translate3d(-9%, -2%, 0) scale(1.03); } to { transform: translate3d(9%, 4%, 0) scale(1.18); } }
@keyframes ne-start-band2 { from { transform: scaleX(-1) translate3d(-11%, 3%, 0) scale(1.16); } to { transform: scaleX(-1) translate3d(10%, -3%, 0) scale(1.02); } }
@keyframes ne-start-hoch { 0%, 100% { transform: translateY(3px); opacity: .78; } 50% { transform: translateY(-11px); opacity: 1; } }
@keyframes ne-start-schein { 0%, 100% { opacity: .6; } 50% { opacity: 1; } }
@keyframes ne-start-lauf { to { --ne-start-w: 360deg; } }
@media (prefers-reduced-motion: reduce) { [data-look="neon"] .ne-start * { animation: none !important; } }
/* Horizont: die große KI-Kugel als Video statt des Lichtbogens (look-neon.js setzt
   data-ne-horizont; ein Video in den Vorlagenfarben, die eigenen Farben setzt der Filter). Das Video zeigt die obere Kappe:
   Kugelrand bei 26,17 % seiner Höhe, Mittelpunkt bei 227,56 %, Radius halbe Breite. */
[data-look="neon"] .ne-horizont { display: none; }
[data-look="neon"][data-ne-horizont] .ne-start :is(span, u, s) { display: none; }
[data-look="neon"][data-ne-horizont] .ne-start .ne-horizont { display: block; position: absolute; left: 50%; top: 68%;
  width: 150%; aspect-ratio: 4096 / 900; transform: translate(-50%, -26.17%); object-fit: cover; opacity: .72;
  filter: var(--ne-kugel-farbe, none); }
/* Maske: außerhalb der Kugel durchsichtig (.main ist eine eigene Ebene, ein Mischmodus ließe
   das Schwarz des Videos stehen), unten weich ausgeblendet, wo das Video endet. */
[data-look="neon"][data-ne-horizont] .ne-start .ne-horizont {
  -webkit-mask: radial-gradient(50% 227.56% at 50% 227.56%, #000 84%, transparent 88.5%), linear-gradient(#000 70%, transparent);
  -webkit-mask-composite: source-in;
  mask: radial-gradient(50% 227.56% at 50% 227.56%, #000 84%, transparent 88.5%), linear-gradient(#000 70%, transparent);
  mask-composite: intersect; }
@media (max-width: 760px) { [data-look="neon"][data-ne-horizont] .ne-start .ne-horizont { width: 260%; top: 66%; } }
[data-look="neon"] .jarvis {
  --jv-cyan: var(--accent); --jv-bright: var(--accent-2); --jv-dim: var(--text-dim);
  --jv-blue1: var(--c-warm); --jv-blue2: var(--c-rosa); --jv-name: var(--accent-2); --jv-name-shadow: none;
  --jv-core-glow: radial-gradient(circle at center, rgba(var(--rgb-warm), .22) 0%, rgba(var(--rgb-kalt), .1) 45%, transparent 68%);
}

/* ─── Chat-Blasen: eigene Fläche, langsam wandernde Lichtkante ─── */
[data-look="neon"] .msg.assistant .bubble {
  border: 1.5px solid transparent;
  border-radius: 6px 24px 24px 24px;
  padding: 16px 20px 14px;
  background: var(--ne-ki-fl) padding-box,
    conic-gradient(from var(--ne-winkel), var(--ne-ki-rand), rgba(var(--rgb-warm), .95) 12%, var(--ne-ki-rand) 28%,
      var(--ne-ki-rand) 50%, rgba(var(--rgb-kalt), .9) 64%, var(--ne-ki-rand) 80%) border-box;
  box-shadow: var(--ne-ki-schatten), -16px -10px 36px -20px rgba(var(--rgb-warm), var(--ne-schein)),
    16px 12px 38px -20px rgba(var(--rgb-kalt), var(--ne-schein));
}
[data-look="neon"] .msg.user .bubble {
  color: var(--ne-ich-text);
  border: 1.5px solid transparent;
  border-radius: 22px 22px 6px 22px;
  background: var(--ne-ich-fl) padding-box,
    conic-gradient(from var(--ne-winkel), rgba(255, 255, 255, .25), rgba(var(--rgb-warm), 1) 14%, rgba(255, 255, 255, .25) 32%,
      rgba(255, 255, 255, .25) 52%, rgba(var(--rgb-kalt-hell), 1) 66%, rgba(255, 255, 255, .25) 84%) border-box;
  box-shadow: 0 10px 24px -12px rgba(var(--rgb-indigo), .6), -14px -8px 30px -16px rgba(var(--rgb-warm), var(--ne-schein)),
    14px 10px 32px -16px rgba(var(--rgb-kalt), var(--ne-schein));
}
[data-look="neon"] .msg.user .bubble :is(a, code, strong, em) { color: inherit; }
[data-look="neon"] .msg.user .msg-meta { color: var(--accent-2); }
[data-look="neon"] .bubble li::marker { color: oklch(from var(--marke-2) min(l, .6) c h); }
[data-look="neon"][data-theme="dark"] .bubble li::marker { color: var(--c-warm); }
/* ponytail: nur die letzten 6 Einträge drehen ihre Kante, damit lange Chats
   nicht jede Blase je Bild neu zeichnen; ältere stehen still. */
[data-look="neon"] .msg:nth-last-child(-n+6) .bubble { animation: ne-drehen 11s linear infinite; }
[data-look="neon"] .msg.user:nth-last-child(-n+6) .bubble { animation-direction: reverse; }

/* Box in Box: Entwürfe, Code und farbige Abschnitte heben sich klar ab */
[data-look="neon"] .bubble pre {
  position: relative;
  background: var(--ne-innen-fl);
  border: 1px solid var(--ne-innen-rand);
  border-radius: 16px;
  padding: 14px 16px 14px 20px;
  box-shadow: var(--ne-innen-schatten);
}
[data-look="neon"] .bubble pre::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  border-radius: 16px 0 0 16px; background: var(--v-streifen);
}
/* Slack-Entwurf als Karte wie in der Vorschau: Kopf, Text, Knöpfe in einer .ui-entwurf */
/* Knopfzeile unten wie in der Vorlage (Phillip 02.11.2026): Senden, Bearbeiten, Kopieren unter dem Text */
[data-look="neon"] .bubble .slack-entwurf { margin: 4px 0 14px; }
[data-look="neon"] .bubble .slack-entwurf.ui-entwurf {
  --pl: 22px; --pr: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 8px; padding: 0 var(--pr) 16px var(--pl);
}
[data-look="neon"] .bubble .slack-entwurf.ui-entwurf > :is(.ss-kopf, pre) {
  flex: 0 0 calc(100% + var(--pl) + var(--pr)); margin: 0 calc(-1 * var(--pr)) 0 calc(-1 * var(--pl)); max-width: none;
}
[data-look="neon"] .bubble .slack-entwurf.ui-entwurf > .ss-kopf { margin-bottom: -8px; border-radius: calc(var(--ui-r-m) - 1px) calc(var(--ui-r-m) - 1px) 0 0; }
[data-look="neon"] .bubble .slack-entwurf.editing { overflow: visible; }
[data-look="neon"] .bubble .slack-entwurf > pre {
  margin: 0; padding: 16px 20px 14px 22px; border: 0; border-radius: 0; background: none; box-shadow: none;
}
[data-look="neon"] .bubble .slack-entwurf > pre::before { display: none; }
[data-look="neon"] .bubble .slack-entwurf > pre code { font-family: var(--font); font-size: var(--ui-fs-mittel, var(--fs-4)); line-height: 1.6; color: var(--text); }
[data-look="neon"] .bubble .slack-entwurf > pre .slack-mark::before { font-family: var(--font); font-size: var(--ui-fs-mittel, var(--fs-4)); color: var(--text); border-radius: 6px; padding: 1px 6px; }
/* Kopf wie Variante C (Phillip 02.11.2026): Band in Slack-Lila, Kanal und Thread öffnen Slack */
[data-look="neon"] .bubble .slack-entwurf.ui-entwurf > .ss-kopf {
  display: flex; flex-wrap: nowrap; align-items: center; gap: 12px; padding: 12px 22px; border-bottom: 0;
  color: #fff; font-weight: 400;
  background: linear-gradient(120deg, color-mix(in oklab, var(--slack-lila) 50%, #000), color-mix(in oklab, var(--slack-lila) 66%, #000));
}
[data-look="neon"] .bubble .slack-entwurf > .ss-kopf > svg.i { color: #fff; width: 18px; height: 18px; }
[data-look="neon"] .bubble .ss-wo { flex: 1; display: flex; flex-direction: column; min-width: 0; line-height: 1.35; overflow-wrap: anywhere; }
[data-look="neon"] .bubble .ss-wo > b { font-weight: 700; }
[data-look="neon"] .bubble .ss-wo > span { font-size: var(--fs-2, .85rem); opacity: .85; }
[data-look="neon"] .bubble .ss-kopf a { color: inherit; text-decoration: underline; text-decoration-color: rgba(255,255,255,.45); text-underline-offset: 3px; }
[data-look="neon"] .bubble .ss-kopf a:hover { text-decoration-color: #fff; }
/* Die Fundort-Zeile steht jetzt im Kopf; der Text bleibt für den Sende-Knopf im DOM. */
[data-look="neon"] .bubble .fundort-im-kopf { display: none; }
[data-look="neon"] .bubble .slack-entwurf > .slack-send-bar { display: contents; }
[data-look="neon"] .bubble .slack-entwurf.editing > .slack-send-bar { display: none; }
[data-look="neon"] .bubble .slack-entwurf > .slack-send-bar > * { order: 1; }
[data-look="neon"] .bubble .slack-entwurf .slack-send-bar :is(.knopf, .ss-zurueck) { min-height: 40px; padding: 8px 16px; font-size: var(--fs-3); }
/* Wohin es geht, steht schon im Kopf; nur Hinweise (Kopfzeile zuerst, Anhang) bleiben */
[data-look="neon"] .bubble .slack-entwurf .ss-ziel { display: none; }
[data-look="neon"] .bubble .slack-entwurf .knopf:disabled ~ .ss-ziel,
[data-look="neon"] .bubble .slack-entwurf .ss-ziel[title] { display: block; order: 4; flex: 0 0 100%; font-size: var(--fs-1); }
[data-look="neon"] .bubble .slack-entwurf > :is(.code-copy, .code-edit) {
  position: static; opacity: 1; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; margin: 0;
  padding: 8px 14px; border-radius: 999px; font: 600 var(--fs-3)/1 var(--font); color: var(--text);
  background: transparent; border: 1px solid var(--border-strong);
}
[data-look="neon"] .bubble .slack-entwurf > .code-edit { order: 2; }
[data-look="neon"] .bubble .slack-entwurf > .code-copy { order: 3; border-color: transparent; color: var(--text-mid); }
[data-look="neon"] .bubble .slack-entwurf > :is(.code-copy, .code-edit):hover { color: var(--text); background: var(--surface-2); }
[data-look="neon"] .bubble .slack-entwurf > :is(.code-copy, .code-edit)[data-label]::after { content: attr(data-label); }
[data-look="neon"] .bubble .slack-entwurf > :is(.code-editor, .code-edit-bar) { flex: 0 0 100%; margin: 10px 0 0; width: auto; padding: 0; }
/* Bearbeiten in derselben Schrift wie der Entwurf, Feld rund (Phillip 02.11.2026) */
[data-look="neon"] .bubble .slack-entwurf > .code-editor {
  margin-top: 16px; padding: 14px 16px; border: 1px solid var(--border-strong); border-radius: 14px;
  background: var(--surface-2); color: var(--text); resize: none;
  font-family: var(--font); font-size: var(--ui-fs-mittel, var(--fs-4)); line-height: 1.6;
}
[data-look="neon"] .bubble .slack-entwurf > .code-editor:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
[data-look="neon"] .bubble .slack-entwurf.editing > :is(.code-edit, .code-copy) { display: none; }
@media (max-width: 767px), (hover: none) and (max-height: 500px) {
  [data-look="neon"] .bubble .slack-entwurf.ui-entwurf { --pl: 18px; --pr: 14px; padding-bottom: 14px; }
  [data-look="neon"] .bubble .slack-entwurf.ui-entwurf > .kopf { order: 0; padding: 12px 16px 12px 20px; }
}
[data-look="neon"] .bubble .md-sec.sec-farbe {
  border-radius: 18px; box-shadow: inset 4px 0 0 var(--sec), var(--ne-innen-schatten);
}
[data-look="neon"] .bubble blockquote { border-left: 3px solid var(--c-warm); }
/* Abschnitte je Art (Phillip 02.11.2026, Variante C): Farbband mit Symbol, darunter getönte Fläche,
   die Zusammenfassung schließt als dunkle Karte ab. Die Art setzt der Renderer aus der Überschrift. */
[data-look="neon"] .bubble .md-sec[data-art] { --art-tief: color-mix(in oklab, var(--art) 70%, #000); }
[data-look="neon"] .bubble .md-sec[data-art="todo"] { --art: var(--accent); --sym: "✓"; }
[data-look="neon"] .bubble .md-sec[data-art="frage"] { --art: var(--c-warm); --sym: "?"; }
[data-look="neon"] .bubble .md-sec[data-art="entwurf"] { --art: var(--slack-lila); --sym: "✎"; }
[data-look="neon"] .bubble .md-sec[data-art="pruef"] { --art: var(--info); --sym: "◎"; }
[data-look="neon"] .bubble .md-sec[data-art="erledigt"] { --art: var(--ok); --sym: "✔"; }
[data-look="neon"] .bubble .md-sec[data-art="freigabe"] { --art: var(--warn); --sym: "!"; }
[data-look="neon"] .bubble .md-sec[data-art]:not([data-art="zf"]) {
  margin: 20px 0; padding: 0; border-radius: 20px; overflow: hidden;
  background: color-mix(in srgb, var(--art) 6%, var(--ne-innen-fl)); border: 1px solid color-mix(in srgb, var(--art) 40%, transparent);
  box-shadow: var(--ne-innen-schatten);
}
[data-look="neon"] .bubble .md-sec[data-art]:not([data-art="zf"]) > summary,
[data-look="neon"] .bubble .md-sec[data-art]:not([data-art="zf"]) > summary:hover {
  align-items: center; margin: 0; padding: 10px 18px; border: 0; border-radius: 0;
  background: linear-gradient(120deg, var(--art-tief), color-mix(in oklab, var(--art) 50%, #000));
}
[data-look="neon"] .bubble .md-sec[data-art]:not([data-art="zf"]) > summary::before { border-color: #fff; opacity: .8; }
[data-look="neon"] .bubble .md-sec[data-art]:not([data-art="zf"]) > summary h2 { color: #fff; font-size: 1.15rem; }
[data-look="neon"] .bubble .md-sec[data-art]:not([data-art="zf"]) > summary h2::before {
  content: var(--sym); display: inline-grid; place-items: center; width: 30px; height: 30px; margin-right: 10px; vertical-align: -5px;
  border-radius: 10px; font-size: 1rem; font-weight: 800; color: #fff; background: rgba(255, 255, 255, .2);
}
[data-look="neon"] .bubble .md-sec[data-art]:not([data-art="zf"]) > .md-sec-body { border-left: 0; margin-left: 0; padding: 8px 20px 14px; }
[data-look="neon"] .bubble .md-sec[data-art] ol > li::marker { color: color-mix(in oklab, var(--art) 70%, var(--text)); font-weight: 800; }
[data-look="neon"] .bubble .md-sec[data-art] ul > li::marker { color: var(--art); }
[data-look="neon"] .bubble .md-sec[data-art="zf"] {
  margin: 26px 0 0; padding: 6px 26px 20px; border-radius: 24px; color: #fff;
  background: radial-gradient(90% 120% at 100% 120%, rgba(var(--rgb-warm), .55), transparent 60%),
    linear-gradient(150deg, var(--marke-1), color-mix(in oklab, var(--marke-1) 55%, #000));
  box-shadow: 0 18px 40px -18px rgba(var(--rgb-schatten), .8);
}
[data-look="neon"] .bubble .md-sec[data-art="zf"] * { color: inherit !important; }
[data-look="neon"] .bubble .md-sec[data-art="zf"] > summary { border-bottom: 1px solid rgba(255, 255, 255, .25); }
[data-look="neon"] .bubble .md-sec[data-art="zf"] > summary::before { border-color: rgba(255, 255, 255, .7); }
[data-look="neon"] .bubble .md-sec[data-art="zf"] > .md-sec-body { border-left: 0; margin-left: 0; padding-left: 0; }
[data-look="neon"] .bubble .md-sec[data-art="zf"] li::marker { color: rgba(var(--rgb-warm-hell), 1) !important; }
[data-look="neon"] .bubble .md-sec[data-art="zf"] .md-sec-body > p > strong:only-child { font-size: .78rem; letter-spacing: .05em; text-transform: uppercase; opacity: .8; }
[data-look="neon"] .bubble a { color: var(--accent-2); }
[data-look="neon"] :is(.tool-tag, .file-chip) { border-radius: 999px; }

/* ─── Eingabefeld mit umlaufender Lichtkante ─── */
[data-look="neon"] .compose-card {
  border: 2px solid transparent;
  border-radius: 26px;
  background: var(--ne-composer-fl) padding-box,
    conic-gradient(from var(--ne-winkel), var(--c-warm), var(--c-warm-blass) 12%, var(--ne-comp-a) 30%,
      rgba(var(--ne-comp-a-rgb), .25) 48%, var(--c-warm) 62%, var(--c-warm-hell) 75%, var(--ne-comp-b) 88%, var(--c-warm)) border-box;
  box-shadow: var(--ne-composer-schatten);
  animation: ne-drehen 6s linear infinite;
}
[data-look="neon"] .compose-card:focus-within { border-color: transparent; box-shadow: var(--ne-composer-schatten); }
[data-look="neon"] .compose-config .header-chips { border-bottom-color: var(--border); }
[data-look="neon"] .compose-config .hchip { background: var(--surface-2); border-color: transparent; }
[data-look="neon"] .compose-grip { background: transparent; }
/* Senden: runder Knopf in der Hauptfarbe mit warmem Lichtkern */
[data-look="neon"] body .send-btn { border-radius: 50%; }
/* Senden und Sprechen: ruhige Kante mit einem hellen Lichtpunkt, der umläuft;
   innen fließen ein helles und ein dunkles Licht frei (x und y mit verschiedenem
   Takt), statt sich zu drehen. */
@property --ne-kx { syntax: "<percentage>"; inherits: false; initial-value: 10%; }
@property --ne-ky { syntax: "<percentage>"; inherits: false; initial-value: 95%; }
@keyframes ne-fluss-x { to { --ne-kx: 90%; } }
@keyframes ne-fluss-y { to { --ne-ky: 5%; } }
/* Gilt auch für Nachsenden während einer Antwort (leer: gedämpft) und für
   Senden im Slack-Antwortfeld (Phillip 02.11.2026). */
[data-look="neon"] body :is(.send-btn:not(:disabled), .composer-row:has(> .stop-btn:not([hidden])) > .send-btn, .sk-cbox .sk-ib.send) {
  color: var(--ne-knopf-text);
  border: 2px solid transparent;
  background:
    radial-gradient(55% 55% at var(--ne-kx) var(--ne-ky), rgba(var(--rgb-kern), 1), rgba(var(--rgb-kern), 0) 75%) padding-box,
    radial-gradient(60% 60% at calc(100% - var(--ne-kx)) calc(100% - var(--ne-ky)), rgba(var(--rgb-schatten), .7), rgba(var(--rgb-schatten), 0) 75%) padding-box,
    var(--ne-knopf-fl) padding-box,
    conic-gradient(from var(--ne-winkel), #fff, var(--c-warm-hell) 6%, rgba(var(--rgb-warm), .35) 22%,
      rgba(var(--rgb-warm), .35) 42%, var(--c-kalt) 50%, rgba(var(--rgb-warm), .35) 58%,
      rgba(var(--rgb-warm), .35) 78%, var(--c-warm-hell) 94%, #fff) border-box;
  box-shadow: 0 6px 16px -4px rgba(var(--rgb-indigo), .6), 0 0 16px -2px rgba(var(--rgb-warm), .55);
  animation: ne-drehen 4s linear infinite, ne-fluss-x 2.3s ease-in-out infinite alternate,
    ne-fluss-y 1.7s ease-in-out infinite alternate;
}
[data-look="neon"] body :is(.send-btn, .sk-cbox .sk-ib.send):not(:disabled):hover {
  box-shadow: 0 8px 20px -4px rgba(var(--rgb-indigo), .7), 0 0 22px rgba(var(--rgb-warm), .65);
}
[data-look="neon"] body .send-btn:disabled { opacity: .5; }
/* Stopp: dieselbe Bewegung in Rot */
[data-look="neon"] body .stop-btn {
  border-radius: 50%; color: #fff;
  border: 2px solid transparent;
  background:
    radial-gradient(55% 55% at var(--ne-kx) var(--ne-ky), rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 75%) padding-box,
    radial-gradient(60% 60% at calc(100% - var(--ne-kx)) calc(100% - var(--ne-ky)), rgba(0, 0, 0, .35), rgba(0, 0, 0, 0) 75%) padding-box,
    linear-gradient(180deg, color-mix(in oklab, var(--danger) 88%, #fff), color-mix(in oklab, var(--danger) 82%, #000)) padding-box,
    conic-gradient(from var(--ne-winkel), #fff, color-mix(in oklab, var(--danger) 35%, #fff) 6%,
      color-mix(in oklab, var(--danger) 35%, transparent) 22%, color-mix(in oklab, var(--danger) 35%, transparent) 78%,
      color-mix(in oklab, var(--danger) 35%, #fff) 94%, #fff) border-box;
  box-shadow: 0 6px 16px -4px color-mix(in oklab, var(--danger) 65%, transparent), 0 0 16px -2px color-mix(in oklab, var(--danger) 50%, transparent);
  animation: ne-drehen 4s linear infinite, ne-fluss-x 2.3s ease-in-out infinite alternate,
    ne-fluss-y 1.7s ease-in-out infinite alternate;
}
[data-look="neon"] body .stop-btn:hover { filter: brightness(1.06); box-shadow: 0 8px 20px -4px color-mix(in oklab, var(--danger) 75%, transparent), 0 0 22px var(--danger); }

/* Slack-Antwortfeld mit derselben Lichtkante wie das Eingabefeld */
[data-look="neon"] body .sk-cbox:not(.drop), [data-look="neon"] body .sk-cbox:not(.drop):focus-within {
  border: 2px solid transparent;
  border-radius: 22px;
  background: var(--ne-composer-fl) padding-box,
    conic-gradient(from var(--ne-winkel), var(--c-warm), var(--c-warm-blass) 12%, var(--ne-comp-a) 30%,
      rgba(var(--ne-comp-a-rgb), .25) 48%, var(--c-warm) 62%, var(--c-warm-hell) 75%, var(--ne-comp-b) 88%, var(--c-warm)) border-box;
  box-shadow: 0 10px 30px -14px rgba(var(--rgb-warm), .5), 0 14px 34px -16px rgba(var(--rgb-kalt), .5);
  animation: ne-drehen 6s linear infinite;
}

/* Scrollbalken: ohne graue Spur, Griff nur beim Scrollen (.ne-scrollt setzt
   look-neon.js). scrollbar-color erbt, deshalb reicht body. */
[data-look="neon"] body { scrollbar-color: transparent transparent; }
[data-look="neon"] .ne-scrollt { scrollbar-color: color-mix(in oklab, var(--text) 32%, transparent) transparent; }

/* ─── Knöpfe, Segmente, Felder ─── */
[data-look="neon"] .knopf { border-radius: 999px; font-weight: 600; }
[data-look="neon"] .knopf.haupt {
  color: var(--ne-knopf-text); border-color: rgba(255, 255, 255, .28);
  background: radial-gradient(80% 110% at 50% 135%, rgba(var(--rgb-kern), .95) 0%, rgba(var(--rgb-kern), .35) 40%, rgba(var(--rgb-kern), 0) 72%),
    var(--ne-knopf-fl);
  box-shadow: var(--ne-haupt-schatten);
}
[data-look="neon"] .knopf.haupt:not(.an):hover { color: var(--ne-knopf-text); filter: brightness(1.06); }
[data-look="neon"] .seg button { border-radius: 14px; }
[data-look="neon"] .seg button.active {
  border-color: transparent; color: var(--ne-nav-an-text);
  background: var(--ne-seg-an-bg); box-shadow: var(--ne-seg-an-schatten);
}
[data-look="neon"] :is(.settings-sheet, .tab-sheet) :is(input:not([type="range"]):not([type="color"]):not([type="checkbox"]):not([type="radio"]), textarea, select) {
  border-radius: 14px;
}
[data-look="neon"] :is(.hchip, .kz-chip, .task-tag) { border-radius: 999px; }

/* ─── Karten: weiß oder dunkel, große Radien, weicher Schatten ─── */
[data-look="neon"] :is(.kz-kachel, .kz-box, .tb-karte, .apps-kachel, .pf-connect-card,
  .ac-karte, .nl-kachel, .uv-karte, .ct-panel) {
  background-color: var(--surface);
  border: 1px solid var(--ne-kante);
  border-radius: 22px;
  box-shadow: var(--ne-schatten-1);
}
[data-look="neon"] :is(.kz-kachel, .kz-box) { padding: 14px 16px; }
/* Kennzahl-Kacheln: je Kachel ein Pastell aus den 2 Farben */
[data-look="neon"] .kz-kachel:nth-child(4n+1) { background-color: var(--p1); }
[data-look="neon"] .kz-kachel:nth-child(4n+2) { background-color: var(--p2); }
[data-look="neon"] .kz-kachel:nth-child(4n+3) { background-color: var(--p3); }
[data-look="neon"] .kz-kachel:nth-child(4n+4) { background-color: var(--p4); }
[data-look="neon"][data-kontrast] .kz-kachel { background-color: var(--surface); }
/* Karte in Karte: eigene Fläche, Rand, Schatten, warmer Streifen links */
[data-look="neon"] :is(.ac-spalte .ac-karte, .kz-box .kz-kachel) {
  background: var(--ne-innen-fl);
  border: 1px solid var(--ne-innen-rand);
  border-radius: 16px;
  box-shadow: inset 4px 0 0 var(--c-warm), var(--ne-innen-schatten);
}

/* Blätter und alles, was über dem Inhalt liegt: deckend, große Radien */
[data-look="neon"] :is(.sb-user-popover, .file-add-menu, .project-menu, .row-menu, .topic-assign-menu, dialog) {
  border-radius: 18px; border-color: var(--border-strong); box-shadow: var(--ne-schatten-2);
}
[data-look="neon"] :is(.settings-sheet, .tab-sheet) { border-radius: 28px 28px 0 0; }

/* ─── Handy ─── */
@media (max-width: 767px), (hover: none) and (max-height: 500px) {
  /* Das Blatt mit der Leiste schiebt sich über den Chat: deckend */
  [data-look="neon"] body .sidebar { background: var(--ne-nav-voll); border-radius: 0 26px 26px 0; border-right-color: var(--ne-nav-rand); }
  [data-look="neon"] .msg.assistant .bubble { border-radius: 6px 20px 20px 20px; padding: 13px 14px 12px; }
  [data-look="neon"] .compose-card { border-radius: 24px; }
}
/* Leiste unten (Handy und schmal): dunkle Pille mit Lichtkante */
@media (max-width: 900px), (hover: none) and (max-height: 500px) {
  [data-look="neon"] body.zentrale-an .leiste-unten {
    background: transparent; border-top: 0;
    padding: 8px 12px calc(10px + env(safe-area-inset-bottom));
  }
  [data-look="neon"] body.zentrale-an .leiste-unten::before {
    content: ""; position: absolute; z-index: -1; pointer-events: none;
    inset: 6px 10px calc(8px + env(safe-area-inset-bottom));
    border-radius: 999px; border: 1px solid transparent;
    background: linear-gradient(var(--ne-tabbar-bg), var(--ne-tabbar-bg)) padding-box,
      linear-gradient(135deg, rgba(var(--rgb-warm), .8), rgba(255, 255, 255, .1) 35%, rgba(255, 255, 255, .06) 65%, rgba(var(--rgb-kalt), .8)) border-box;
    box-shadow: -10px 0 30px -12px rgba(var(--rgb-warm), .5), 10px 6px 30px -12px rgba(var(--rgb-kalt), .55), 0 18px 40px -12px rgba(0, 0, 0, .45);
  }
  [data-look="neon"] body.zentrale-an .leiste-unten { isolation: isolate; }
  [data-look="neon"] .leiste-unten :is(button, a) { color: rgba(255, 255, 255, .78); }
  [data-look="neon"] .leiste-unten :is(button, a).active { color: #fff; }
  [data-look="neon"] .leiste-unten :is(button, a).active svg { color: var(--c-warm); }
  [data-look="neon"] .leiste-unten .mz { background: none; box-shadow: none; color: inherit; }
  [data-look="neon"] .leiste-unten .mz .mz-gegen { color: var(--ne-tabbar-bg); }
  [data-look="neon"] .leiste-unten :is(button, a).active .mz {
    background: none; color: var(--ne-ikon-an); filter: drop-shadow(0 0 6px rgba(var(--rgb-warm), .7));
  }
  /* Apps im neuen Tab stehen als Link in der Leiste: wie die Knöpfe daneben */
  [data-look="neon"] .leiste-unten a {
    flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 4px 2px; font-family: var(--font); font-size: var(--fs-1); text-decoration: none;
  }
  [data-look="neon"] .leiste-unten a .beschriftung { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
}

/* ─── Profil, Darstellung: Kontrast und die 2 Farben (look-neon.js) ─── */
[data-look="neon"] .ne-darstellung { display: grid; gap: 14px; margin-top: 16px; font-size: var(--fs-3); }
[data-look="neon"] .ne-darstellung[hidden] { display: none; }
[data-look="neon"] .ne-darstellung .ne-zeile { display: flex; flex-wrap: wrap; gap: 8px; }
[data-look="neon"] .ne-darstellung small { font-size: var(--fs-2); color: var(--text-dim); }
[data-look="neon"] .ne-schalter {
  display: flex; align-items: center; gap: 10px; padding: 2px 0;
  border: 0; background: none; color: var(--text); font: inherit; font-weight: 500; text-align: left; cursor: pointer;
}
[data-look="neon"] .ne-schalter i {
  position: relative; width: 38px; height: 22px; flex: none; border-radius: 999px;
  background: var(--border-strong); transition: background .15s;
}
[data-look="neon"] .ne-schalter i::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .15s;
}
[data-look="neon"] .ne-schalter[aria-checked="true"] i { background: var(--ne-knopf-fl); }
[data-look="neon"] .ne-schalter[aria-checked="true"] i::after { transform: translateX(16px); }
[data-look="neon"] .ne-farbe { display: flex; align-items: center; gap: 12px; min-width: 0; cursor: pointer; }
[data-look="neon"] .ne-farbe b { display: block; font-weight: 600; }
[data-look="neon"] .ne-farbe input {
  width: 42px; height: 42px; flex: none; padding: 0; border: 0; border-radius: 12px;
  background: none; cursor: pointer; box-shadow: inset 0 0 0 1px var(--border-strong);
}
[data-look="neon"] .ne-farbe input::-webkit-color-swatch-wrapper { padding: 0; }
[data-look="neon"] .ne-farbe input::-webkit-color-swatch { border: 0; border-radius: 12px; }
[data-look="neon"] .ne-farbe input::-moz-color-swatch { border: 0; border-radius: 12px; }
[data-look="neon"] .ne-vorlagen { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
[data-look="neon"] .ne-vorlagen button {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 5px;
  border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2);
  color: var(--text); font: inherit; font-size: var(--fs-2); cursor: pointer;
}
[data-look="neon"] .ne-vorlagen button[aria-pressed="true"] { border-color: var(--accent); color: var(--accent-2); font-weight: 600; }
[data-look="neon"] .ne-vorlagen i {
  width: 20px; height: 20px; border-radius: 50%; flex: none;
  background: linear-gradient(135deg, var(--a) 50%, var(--b) 50%); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
}

@media (max-width: 767px), (hover: none) and (max-height: 500px) {
  [data-look="neon"] .header-actions .ne-knopf { display: flex; }
}

/* ─── Weniger Bewegung: Kanten stehen still ─── */
@media (prefers-reduced-motion: reduce) {
  [data-look="neon"] :is(.compose-card, .bubble, .send-btn) { animation: none !important; }
  [data-look="neon"] :is(.stop-btn, .sk-cbox, .sk-ib.send) { animation: none !important; }
  [data-look="neon"] :is(.knopf, .sb-nav-btn, .ne-schalter i, .ne-schalter i::after) { transition: none; }
}