/* DINspektor-Branding fuer LibreChat — Surface-Theming aus standby.design (FinTwin).
   Quelle der Farben: librechat/branding/standby-tokens.css (OKLCH, Seed brand #001F54).
   LibreChat konsumiert Farben in ZWEI Formaten, daher hier beide:
     1) --gray-*/--green-* werden als Direktwerte benutzt  -> hex
     2) shadcn-Tokens werden als hsl(var(--x)) eingesetzt   -> "H S% L%"-Tripel
   Alle Werte aus den OKLCH-Primitives nach sRGB konvertiert (Kommentar = standby-Step).
   Wird via gepatchte index.html nach dem Haupt-CSS geladen. Schrift: DM Sans (Projektwahl). */

/* ---- DM Sans (self-hosted, kein Google-Call zur Laufzeit; DSGVO) ---- */
@font-face {
  font-family: "DM Sans";
  src: url("/assets/dmsans.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ===== 1) Grau-Skala -> standby Surface (navy-getoent) ======================
   Treibt ALLE Flaechen: --surface-*, --text-*, --border-* zeigen auf --gray-*.
   Eine globale Skala (light+dark teilen sie; der Modus waehlt nur andere Steps). */
:root,
.dark {
  --gray-50:  #e9f1fe; /* surface-25  */
  --gray-100: #dde9fe; /* surface-50  */
  --gray-200: #d0e2fe; /* surface-75  */
  --gray-300: #c4dafd; /* surface-100 */
  --gray-400: #719ce3; /* surface-300 */
  --gray-500: #214b8e; /* surface-600 */
  --gray-600: #1b3764; /* surface-700 */
  --gray-700: #14243e; /* surface-800 */
  --gray-800: #0f1b2d; /* surface-850 */
  --gray-850: #0d1625; /* surface-875  (Dialog/dunkle Flaeche) */
  --gray-900: #0b121d; /* surface-900  (dunkelster Hintergrund) */
  --gray-20:  #dde9fe; /* selten genutzt */
}

/* Body-Hintergrund: LibreChat setzt ihn hartkodiert auf #212121 (Neutralgrau, NICHT
   ueber die Token). Das scheint beim Oeffnen der Sidebar durch das per-opacity
   einblendende Panel durch -> grauer Flacker. Auf den Surface-Token ziehen
   (theme-aware: dark navy / light hell). */
body {
  background-color: var(--surface-primary) !important;
}

/* Light-Mode-Flaechenhierarchie: LibreChat haengt die Chat-Hauptflaeche im Light
   Mode an --white (an der Grau-Skala VORBEI) -> reines Weiss statt Navy-Tuenchung.
   Auf das semantische Set ziehen: Chatflaeche = card (surface-25), Sidebar =
   background (surface-50), Composer noch eine Stufe heller ("surface-10" —
   existiert im standby-Set nicht, daher eigener Wert mit gleichem Blaustich).
   Nur Light; im Dark Mode kommt die Hierarchie schon aus der Grau-Skala.
   (:root:not(.dark) gewinnt gegen LibreChats .dark-Regeln nichts — es matcht
   dort schlicht nicht, Dark bleibt unberuehrt.) */
:root:not(.dark) {
  --surface-primary: hsl(var(--card));       /* surface-25  #e9f1fe */
  --surface-secondary: hsl(var(--background));/* surface-50 #dde9fe */
  --surface-chat: #f5f9ff;                   /* "surface-10", heller als card */
  /* Die Chat-Hauptflaeche selbst haengt an einem EIGENEN Token (.bg-presentation
     -> --presentation), Light: var(--white), Dark: var(--gray-800). Ohne diesen
     Override bleibt sie im Light Mode weiss — und damit heller als der Composer. */
  --presentation: hsl(var(--card));          /* surface-25  #e9f1fe */
  /* Die Sidebar wiederum haengt an --surface-primary-alt (Light: --gray-50 =
     unser surface-25 = Card-Farbe -> Sidebar und Chatflaeche waeren identisch;
     Dark: --gray-850, dort stimmt die Hierarchie von allein). Auf background
     ziehen, damit links eine Stufe dunkler als die Chatflaeche bleibt. */
  --surface-primary-alt: hsl(var(--background)); /* surface-50 #dde9fe */
}

/* ===== 2) shadcn-Tokens (hsl(var(--x)) -> H S% L%) =========================
   Werden von neueren shadcn/radix-Komponenten (Dialoge, Dropdowns, Buttons) genutzt.
   Mapping wie im standby-Export: background=surface, primary/accent=brand. */
:root {
  --background: 216.9 94.2% 93.1%;        /* surface-50 */
  --foreground: 220.6 42.2% 2.7%;         /* surface-975 */
  --card: 216.9 94.5% 95.5%;              /* surface-25 */
  --popover: 216.9 94.5% 95.5%;           /* surface-25 */
  --primary: 215.5 94.7% 33.0%;           /* brand-600 */
  --primary-foreground: 216.9 94.2% 93.1%;/* brand-50 */
  --secondary: 217.0 94.2% 78.2%;         /* brand-200 */
  --secondary-foreground: 228.6 100.0% 11.3%; /* brand-900 */
  --muted: 216.9 94.3% 90.6%;             /* surface-75 */
  --muted-foreground: 217.2 57.2% 24.9%;  /* surface-700 */
  --accent: 216.9 94.1% 88.1%;            /* brand-100 */
  --accent-foreground: 228.6 100.0% 11.3%;/* brand-900 */
  --border: 217.1 66.7% 66.6%;            /* surface-300 */
  --input: 217.1 66.7% 66.6%;             /* surface-300 */
  --ring: 217.2 54.6% 55.3%;              /* surface-400 */
  --destructive: 354.2 85.8% 30.8%;       /* error-600 */
}
.dark {
  --background: 217.1 47.5% 9.8%;         /* surface-875 */
  --foreground: 216.9 94.5% 95.5%;        /* surface-25 */
  --card: 217.1 49.8% 13.9%;              /* surface-825 */
  --popover: 217.2 51.2% 16.0%;           /* surface-800 */
  --primary: 217.2 75.7% 56.1%;           /* brand-400 */
  --primary-foreground: 237.0 100.0% 6.7%;/* brand-975 */
  --secondary: 218.8 100.0% 17.1%;        /* brand-800 */
  --secondary-foreground: 216.9 94.1% 88.1%; /* brand-100 */
  --muted: 217.1 48.5% 11.8%;             /* surface-850 */
  --muted-foreground: 217.1 66.7% 66.6%;  /* surface-300 */
  --accent: 218.8 100.0% 17.1%;           /* brand-800 */
  --accent-foreground: 216.9 94.2% 93.1%; /* brand-50 */
  --border: 217.2 61.9% 34.3%;            /* surface-600 */
  --input: 217.2 57.2% 24.9%;             /* surface-700 */
  --ring: 217.2 56.0% 43.9%;              /* surface-500 */
  --destructive: 1.1 60.8% 55.2%;         /* error-400 */
}

/* ===== 3) Akzent/Submit -> Brand (statt LibreChat-Gruen) ===================
   --green-* ist LibreChats Akzent-Palette; auf Brand-Blau ziehen. Buttons brauchen
   einen HELLEN Brand-Step, sonst verschwinden sie auf dunklem Navy. */
:root,
.dark {
  --green-50:  #dde9fe; /* brand-50  */
  --green-100: #c4dafd; /* brand-100 */
  --green-200: #93bbfc; /* brand-200 */
  --green-300: #619bf9; /* brand-300 */
  --green-400: #3b7be4; /* brand-400 */
  --green-500: #185cc7; /* brand-500 */
  --green-600: #0446a4; /* brand-600 */
  --green-700: #01327c; /* brand-700 */
  --green-800: #001f57; /* brand-800 (== Seed #001F54) */
  --green-900: #000b3a; /* brand-900 */
}
/* Submit-Flaeche modusabhaengig: hell genug zum Erkennen. */
:root { --surface-submit: #0446a4; --surface-submit-hover: #01327c; } /* brand-600/700 */
.dark { --surface-submit: #3b7be4; --surface-submit-hover: #185cc7; } /* brand-400/500 */

/* Hartkodierte Tailwind-Gruen-Klassen (eigener Hex, nicht ueber die Variable)
   explizit auf Brand-Blau ziehen. */
.bg-green-400, .bg-green-500, .bg-green-600, .bg-green-700, .bg-green-800,
.bg-surface-submit {
  background-color: #185cc7 !important;
}
.hover\:bg-green-500:hover, .hover\:bg-green-600:hover,
.hover\:bg-green-700:hover, .hover\:bg-green-800:hover {
  background-color: #0446a4 !important;
}
.text-green-400, .text-green-500, .text-green-600, .text-green-700,
.text-surface-submit {
  color: #3b7be4 !important;
}
.border-green-400, .border-green-500, .border-green-600, .border-green-700 {
  border-color: #185cc7 !important;
}
.ring-green-500, .ring-green-600 {
  --tw-ring-color: #185cc7 !important;
}

/* ===== 4) Schrift: DM Sans ueberall ausser Monospace ===== */
body, button, input, textarea, select,
h1, h2, h3, h4, h5, h6, .font-sans {
  font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
}

/* ===== 5) Startbildschirm: Avatar gross, OBEN, mittig ueber dem Begruessungstext ==
   Greeting-Reihe auf Spalte zwingen (Avatar oben, Text darunter) + Avatar vergroessern.
   Anker: der Begruessungs-Avatar ist der einzige .icon-xl. WICHTIG src-UNABHAENGIG
   (NICHT an die Bildquelle koppeln): sonst greift die Vergroesserung erst, nachdem das
   Foto per Skript eingesetzt ist -> das bereits platzierte Greeting reflowt nicht mehr
   und der Text landet hinter dem Eingabefeld. So ist das Layout ab dem ersten Render
   stabil (Avatar gross, Text darunter), egal ob kurz das Favicon oder schon das Foto. */
.gap-2.items-center.justify-center:has(.size-10 .icon-xl) {
  flex-direction: column !important;
  gap: 0.75rem !important;
}
.size-10.justify-center:has(.icon-xl) {
  width: 8rem !important;
  height: 8rem !important;
}
.size-10.justify-center:has(.icon-xl) > *,
.size-10.justify-center:has(.icon-xl) img {
  width: 100% !important;
  height: 100% !important;
}

/* ===== 6) Begruessung: schneller Fade statt langsamem Buchstaben-Reveal ==========
   LibreChats Greeting ("Willkommen beim DINspektor…") rollt buchstabenweise ein
   (react-spring, delay 50ms/Buchstabe -> bei ~60 Zeichen ~3 s). Die Geschwindigkeit
   ist im App-Bundle hartkodiert (per CSS nicht aenderbar). Daher: per-Buchstabe-
   Opacity fix auf 1 (CSS !important schlaegt react-springs Inline-Style) und den
   ganzen Satz EINMAL schnell einblenden. */
.split-parent span {
  opacity: 1 !important;
  transform: none !important;
}
.split-parent {
  animation: dinGreetingFade 0.45s ease-out both;
}
@keyframes dinGreetingFade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ===== 7) Footer sanfter (gedaempfter Ton) =======================================
   CUSTOM_FOOTER ("DINspektor — SmartChange GmbH · KI kann Fehler machen…") nutzt
   text-text-primary (hell). Auf einen weicheren, gedaempften Ton ziehen. Greift fuer
   Desktop- und Mobile-Footer (beide: absolute bottom-0 … text-text-primary). */
.absolute.bottom-0.left-0.right-0.text-text-primary {
  color: rgba(221, 233, 254, 0.5) !important;
}

/* ===== 8) Berater-Menue: "Meine Dateien" ausblenden ============================
   Upload ist aus -> die Dateiliste ist leer/sinnlos. Kein Config-Flag dafuer, daher
   ueber das eindeutige Icon des Eintrags treffen (lucide-file-text). "Hilfe & FAQ"
   wird separat ueber HELP_AND_FAQ_URL=/ ausgeblendet (kein distinktes Icon). */
.select-item:has(svg.lucide-file-text) { display: none !important; }

/* ===== 9) Username-Feld in der Registrierung ausblenden (lokal/Demo) ===== */
input[name="username"],
input#username { display: none !important; }
form div:has(> input[name="username"]) { display: none !important; }

/* ===== 10) Sidebar: "Chats"-Accordion-Header (Label + Chevron) ausblenden =======
   Es gibt nur die eine Konversationsliste -> der aufklappbare Gruppen-Header
   ("Chats" + Chevron) ist ueberfluessig. Der Header ist ein <button> (Label-Span
   + Chevron-SVG) in einem eigenen .px-3-Wrapper; die Liste ("Heute" + Eintraege)
   liegt in separaten Geschwistern und bleibt sichtbar. Selektor verifiziert: trifft
   genau diesen einen Wrapper. */
.px-3:has(> button > span.select-none) { display: none !important; }

/* ===== 11) Message-Toolbar: Audio aus + Edit auf Assistenten-Antworten aus ======
   - "Vorlesen" (TTS) global aus: aktuell ist kein Sprachmodell konfiguriert, der
     Button hat keine Funktion (Wiedereinbau als Backlog-Issue erfasst).
   - "Bearbeiten" NUR auf Assistenten-Nachrichten aus: editierbare DINspektor-
     Antworten koennten faktisch verfaelscht werden. User-Nachrichten behalten
     Bearbeiten.
   2026-07-01: LibreChat-Image-Update hat die Tooltip-Texte dieser Toolbar von
   aria-label auf title umgestellt (alter Sibling-Selektor griff dadurch nicht
   mehr, beide Buttons wieder sichtbar). Neuer Selektor nutzt title + die vom
   selben Update mitgelieferten stabilen Struktur-Marker .user-turn/.agent-turn
   (kein Sibling-Hack mehr noetig). HINWEIS: title-Text ist sprachabhaengig
   (UI-Default DE). ZUSATZ: das Tooltip-Script (Sektion 17) verschiebt title
   nach data-dinspektor-tip und entfernt title -> beide Attribut-Varianten
   selektieren, sonst greift die Regel nicht mehr sobald das Script gelaufen ist. */
button[title="Vorlesen"],
button[data-dinspektor-tip="Vorlesen"] { display: none !important; }
.agent-turn button[title="Bearbeiten"],
.agent-turn button[data-dinspektor-tip="Bearbeiten"] { display: none !important; }

/* ===== 12) Dateien-Panel + Mikrofon (STT) ausblenden ===========================
   - Dateien-Nav (Bueroklammer in der Rail): Upload ist aus (Voll-Kontext, kein
     RAG) -> das Datei-Panel ist immer leer und ohne Nutzen.
   - Mikrofon im Eingabefeld (Spracheingabe/STT): aktuell kein Sprachmodell
     konfiguriert -> ohne Funktion (vgl. Audio/TTS, Backlog #32).
   HINWEIS: aria-labels sind sprachabhaengig (UI-Default DE). */
button[aria-label="Dateien anhängen"] { display: none !important; }
button[aria-label="Mikrofon verwenden"] { display: none !important; }

/* ===== 13) Icebreaker-Karten (Startbildschirm) ===============================
   Injizierte Beispiel-Fragen (index.html-Script). Nur auf /c/new sichtbar,
   ueber dem Eingabefeld. Klick fuellt das Feld und sendet ab. Card-Layout mit
   Fragezeichen-Icon links, Navy-Surface-Theming ueber LibreChat-Standard-Tokens.
   Background = muted, Text + Icon = muted-foreground (shadcn-Tokens). Icon-Farbe
   ueber --dinspektor-starter-icon umstellbar. Breite wird per Script an die
   Eingabefeld-Form angeglichen (max-width gesetzt); 56rem nur Fallback. */
:root { --dinspektor-starter-icon: hsl(var(--muted-foreground)); }
#dinspektor-starters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
  width: 100%;
  max-width: 56rem;
  margin: 0 auto 28px;
  padding: 0 8px;
  box-sizing: border-box;
}
.dinspektor-starter-chip {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  text-align: left;
  color: hsl(var(--muted-foreground));
  background-color: hsl(var(--card));
  border: 1px solid var(--border-medium);
  border-radius: 0.75rem;
  padding: 0.75rem 0.875rem;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.dinspektor-starter-chip:hover {
  background-color: hsl(var(--accent));
  border-color: var(--surface-submit);
}
.dinspektor-starter-ico {
  flex: 0 0 auto;
  margin-top: 1px;
  line-height: 0;
  color: var(--dinspektor-starter-icon);
}
.dinspektor-starter-ico svg {
  width: 18px;
  height: 18px;
  display: block;
}
.dinspektor-starter-txt {
  flex: 1 1 auto;
  font-size: 0.875rem;
  line-height: 1.3;
}

/* ===== 14) Kundenkontext: in die Eingabebox integriert =======================
   Injiziert (index.html-Script). Zwei Teile, beide in den LibreChat-Composer
   eingehaengt: (a) eine Checkbox "Kundenkontext" links in der Bottom-Toolbar (auf
   Hoehe des Senden-Buttons); (b) eine Felder-Zeile (Geburtsdatum, Beziehungsstatus,
   Berufsgruppe, Jahresnettoeinkommen) ALS Bestandteil der Box, ueber der Toolbar,
   nur sichtbar wenn die Checkbox an ist. Bei aktiver Checkbox wird daraus ein
   Textbaustein an die User-Nachricht gehaengt (unsichtbar im Verlauf, per
   fetch-Interception). Theming ueber die LibreChat-Standard-Tokens. */

/* (a) Toggle in der Toolbar: eigene Checkbox (native accent-color rendert auf Navy
   unsauber), Label normal (kein Caps-Lock), vertikal zentriert zum Senden-Button. */
#dinspektor-kontext-toggle {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 7px;
  /* 20px = Textarea-padding-left -> Checkbox buendig mit Platzhaltertext + Feldern. */
  margin-left: 20px;
  font-size: 0.8125rem;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: color .15s ease;
}
#dinspektor-kontext-toggle:hover { color: hsl(var(--foreground)); }
#dinspektor-kontext-toggle input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  margin: 0;
  flex: 0 0 auto;
  border: 1.5px solid var(--border-medium);
  border-radius: 5px;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-content: center;
  transition: background-color .15s ease, border-color .15s ease;
}
#dinspektor-kontext-toggle input[type="checkbox"]::before {
  content: "";
  width: 10px;
  height: 10px;
  transform: scale(0);
  transition: transform .12s ease;
  background-color: #fff;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
#dinspektor-kontext-toggle input[type="checkbox"]:checked {
  background-color: var(--surface-submit);
  border-color: var(--surface-submit);
}
#dinspektor-kontext-toggle input[type="checkbox"]:checked::before { transform: scale(1); }
#dinspektor-kontext-toggle input[type="checkbox"]:focus-visible {
  outline: 2px solid hsl(var(--ring) / 0.6);
  outline-offset: 2px;
}

/* (b) Felder-Zeile als Teil der Box (subtile Trennlinie zur Textarea darueber). */
#dinspektor-kontext-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  /* Zeile sitzt UNTER der Toolbar (unter Checkbox + Senden-Button); rundum 20px
     (= Textarea-Inset) -> erstes Feld buendig mit Platzhalter/Checkbox, oben/unten
     gleich wie links/rechts. */
  padding: 20px;
  margin: 0;
  border-top: 1px solid hsl(var(--border) / 0.55);
}
#dinspektor-kontext-fields[hidden] { display: none !important; }
.dinspektor-kontext-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 150px;
  min-width: 132px;
}
.dinspektor-kontext-field > label {
  font-size: 0.6875rem;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
}
.dinspektor-kontext-field input,
.dinspektor-kontext-field select {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: 0.8125rem;
  line-height: 1.2;
  color: hsl(var(--foreground));
  background-color: hsl(var(--muted));
  border: 1px solid var(--border-medium);
  border-radius: 8px;
  padding: 7px 9px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.dinspektor-kontext-field input::placeholder {
  color: hsl(var(--muted-foreground));
  opacity: 0.75;
}
.dinspektor-kontext-field input:focus,
.dinspektor-kontext-field select:focus {
  outline: none;
  border-color: var(--surface-submit);
  box-shadow: 0 0 0 2px hsl(var(--ring) / 0.3);
}
/* Eigene Dropdowns (Beziehungsstatus/Berufsgruppe) statt Native-Select: das offene
   OS-Popup eines <select> ist nicht voll theme-bar. Trigger im Feld-Stil + Popup-Liste. */
.dinspektor-selwrap { position: relative; }
.dinspektor-sel-trigger {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font: inherit;
  font-size: 0.8125rem;
  line-height: 1.2;
  text-align: left;
  color: hsl(var(--foreground));
  background-color: hsl(var(--muted));
  border: 1px solid var(--border-medium);
  border-radius: 8px;
  padding: 7px 9px;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.dinspektor-sel-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dinspektor-sel-trigger.is-empty .dinspektor-sel-label {
  color: hsl(var(--muted-foreground));
  opacity: 0.75;
}
.dinspektor-sel-trigger:hover { border-color: var(--surface-submit); }
.dinspektor-sel-trigger:focus-visible {
  outline: none;
  border-color: var(--surface-submit);
  box-shadow: 0 0 0 2px hsl(var(--ring) / 0.3);
}
.dinspektor-sel-chev { flex: 0 0 auto; line-height: 0; color: hsl(var(--muted-foreground)); }
.dinspektor-sel-chev svg { width: 16px; height: 16px; display: block; }

.dinspektor-menu {
  position: fixed;
  z-index: 9999;
  box-sizing: border-box;
  background-color: hsl(var(--popover));
  color: hsl(var(--foreground));
  border: 1px solid hsl(var(--border));
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
  padding: 4px;
  max-height: 244px;
  overflow-y: auto;
}
.dinspektor-menu[hidden] { display: none !important; }
.dinspektor-menu-item {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  font: inherit;
  font-size: 0.8125rem;
  color: hsl(var(--foreground));
  background: transparent;
  border: none;
  border-radius: 7px;
  padding: 8px 10px;
  cursor: pointer;
  white-space: nowrap;
}
.dinspektor-menu-item:hover { background-color: hsl(var(--accent)); }
.dinspektor-menu-item.is-sel { background-color: var(--surface-submit); color: #fff; }

/* ---- Themed Datepicker (Geburtsdatum): Trigger sieht aus wie ein Feld ---- */
.dinspektor-datewrap { position: relative; }
.dinspektor-date-trigger {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font: inherit;
  font-size: 0.8125rem;
  line-height: 1.2;
  text-align: left;
  color: hsl(var(--foreground));
  background-color: hsl(var(--muted));
  border: 1px solid var(--border-medium);
  border-radius: 8px;
  padding: 7px 9px;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.dinspektor-date-trigger.is-empty .dinspektor-date-label {
  color: hsl(var(--muted-foreground));
  opacity: 0.75;
}
.dinspektor-date-trigger:hover { border-color: var(--surface-submit); }
.dinspektor-date-trigger:focus-visible {
  outline: none;
  border-color: var(--surface-submit);
  box-shadow: 0 0 0 2px hsl(var(--ring) / 0.3);
}
.dinspektor-date-ico { flex: 0 0 auto; line-height: 0; color: hsl(var(--muted-foreground)); }
.dinspektor-date-ico svg { width: 16px; height: 16px; display: block; }

/* Kalender-Popup (an document.body geportalt, position:fixed) */
.dinspektor-cal {
  position: fixed;
  z-index: 9999;
  width: 264px;
  box-sizing: border-box;
  background-color: hsl(var(--popover));
  color: hsl(var(--foreground));
  border: 1px solid hsl(var(--border));
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
  padding: 10px;
  font-size: 0.8125rem;
}
.dinspektor-cal[hidden] { display: none !important; }
.dinspektor-cal-head { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
/* Monat + tippbares Jahr mittig zwischen den Monats-Pfeilen (margin-auto schiebt sie zentriert). */
.dinspektor-cal-month { margin-left: auto; font-weight: 600; }
.dinspektor-cal-year {
  margin-right: auto;
  width: 56px;
  box-sizing: border-box;
  text-align: center;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  color: hsl(var(--foreground));
  background-color: hsl(var(--muted));
  border: 1px solid var(--border-medium);
  border-radius: 6px;
  padding: 3px 4px;
}
.dinspektor-cal-year:focus {
  outline: none;
  border-color: var(--surface-submit);
  box-shadow: 0 0 0 2px hsl(var(--ring) / 0.3);
}
.dinspektor-cal-nav {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  display: grid;
  place-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 7px;
  cursor: pointer;
  color: hsl(var(--muted-foreground));
  font-size: 0.95rem;
  line-height: 1;
}
.dinspektor-cal-nav:hover { background-color: hsl(var(--accent)); color: hsl(var(--foreground)); }
.dinspektor-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dinspektor-cal-wd { margin-bottom: 2px; }
.dinspektor-cal-wd span {
  text-align: center;
  font-size: 0.6875rem;
  color: hsl(var(--muted-foreground));
  padding: 2px 0;
}
.dinspektor-cal-day {
  min-height: 30px;
  display: grid;
  place-content: center;
  background: transparent;
  border: none;
  border-radius: 7px;
  cursor: pointer;
  color: hsl(var(--foreground));
  font: inherit;
  font-size: 0.8125rem;
}
.dinspektor-cal-day:hover { background-color: hsl(var(--accent)); }
.dinspektor-cal-day.is-sel { background-color: var(--surface-submit); color: #fff; }
.dinspektor-cal-foot {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid hsl(var(--border) / 0.5);
}
.dinspektor-cal-link {
  background: transparent;
  border: none;
  cursor: pointer;
  /* Neutral (foreground), nicht Brand-Blau -> auf dem dunklen Popover gut lesbar. */
  color: hsl(var(--foreground));
  font: inherit;
  font-size: 0.75rem;
  padding: 2px 6px;
  border-radius: 6px;
}
.dinspektor-cal-link:hover { background-color: hsl(var(--accent)); }

/* ===== 15) Eingabe-Platzhalter schwaecher ====================================
   "Nachricht an DINspektor" (echtes placeholder-Attribut auf #prompt-textarea)
   gedaempft, damit es nicht mit echtem Text konkurriert. */
#prompt-textarea::placeholder {
  color: hsl(var(--muted-foreground)) !important;
  opacity: 0.45 !important;
}

/* ===== 16) Wissensbasis-Selektor: Pin-Button ausblenden =======================
   Im offenen Selektor erscheint beim Hovern ueber dem Eintrag ein Pin-Button
   (LibreChat modelSpec-Pin: heftet einen Spec in die Schnellauswahl). Mit nur
   EINER Wissensbasis und enforce:true ist Anpinnen sinnlos -> ausblenden. Der
   Button ist ein <button> mit aria-label "Anpinnen" (bzw. "Loslösen" wenn schon
   gepinnt; com_ui_pin/com_ui_unpin). Da fuer Berater Presets/Modellwahl/Bookmarks
   alle aus sind, kommen diese aria-labels nur im Wissensbasis-Selektor vor.
   HINWEIS: aria-labels sind sprachabhaengig (UI-Default DE), wie Sektion 11/12. */
button[aria-label="Anpinnen"],
button[aria-label="Loslösen"] { display: none !important; }

/* ===== 17) Eigene Tooltips statt native Browser-Tooltips =====================
   Viele Buttons (Kopieren, Bearbeiten, Daumen hoch/runter, Neu generieren, ...)
   zeigen ihren Hinweistext ueber ein natives title-Attribut -> unstylbarer
   Browser-Tooltip. Injiziertes Script (index.html) faengt title ab, bevor der
   native Tooltip feuert, und zeigt stattdessen dieses eine, wiederverwendete
   Element im Marken-Look. Sichtbarkeit rein per Klasse (Opacity/Transform),
   damit es weich einblendet; position/top/left setzt das Script. */
#dinspektor-tooltip {
  position: fixed;
  top: -9999px;
  left: -9999px;
  z-index: 9999;
  max-width: 240px;
  padding: 5px 9px;
  border-radius: 6px;
  background: hsl(var(--foreground));
  color: hsl(var(--background));
  font-family: inherit;
  font-size: 0.75rem;
  line-height: 1.3;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(2px);
  transition: opacity .12s ease, transform .12s ease, visibility .12s;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
}
#dinspektor-tooltip.dinspektor-tooltip-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* ===== 18) Fork-Menue: Checkboxen im Marken-Look ==============================
   Popover "Waehle eine Abzweigungsoption" (Fork-Menue-Button in der Message-
   Toolbar) hat zwei native Checkboxen ("Abzweigung hier beginnen", "Merken").
   Gleiches Aussehen wie die Kundenkontext-Checkbox (Sektion 14), stabile IDs
   aus dem LibreChat-Bundle (kein Injection-Script noetig). */
#split-target-checkbox,
#remember-checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  margin: 0;
  flex: 0 0 auto;
  border: 1.5px solid var(--border-medium);
  border-radius: 5px;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-content: center;
  transition: background-color .15s ease, border-color .15s ease;
}
#split-target-checkbox::before,
#remember-checkbox::before {
  content: "";
  width: 10px;
  height: 10px;
  transform: scale(0);
  transition: transform .12s ease;
  background-color: #fff;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
#split-target-checkbox:checked,
#remember-checkbox:checked {
  background-color: var(--surface-submit);
  border-color: var(--surface-submit);
}
#split-target-checkbox:checked::before,
#remember-checkbox:checked::before { transform: scale(1); }
#split-target-checkbox:focus-visible,
#remember-checkbox:focus-visible {
  outline: 2px solid hsl(var(--ring) / 0.6);
  outline-offset: 2px;
}

/* ===== 19) Nachricht bearbeiten: Speichern/Abbrechen-Buttons im Marken-Look ====
   Beim Bearbeiten der eigenen Nachricht (Sektion 11) erscheinen "Speichern &
   Absenden" / "Speichern" / "Abbrechen" ueber generische LibreChat-Klassen
   (.btn-primary/.btn-secondary/.btn-neutral), hartkodiert auf OpenAI-Gruen/Teal
   statt der Marken-Tokens. Ersetzt durch --surface-submit (Primary) bzw.
   neutrale Outline-Optik (Secondary/Cancel), analog zu den Checkbox-/Trigger-
   Stilen weiter oben. */
.btn-primary {
  background-color: var(--surface-submit);
  color: #fff;
}
.btn-primary:hover { background-color: var(--surface-submit-hover); }
.btn-primary:focus-visible,
.btn-primary.focus-visible { --tw-ring-color: hsl(var(--ring) / 0.6); }

.btn-secondary,
.dark .btn-secondary {
  background-color: transparent;
  border: 1.5px solid var(--border-medium);
  color: hsl(var(--foreground));
}
.btn-secondary:hover,
.dark .btn-secondary:hover {
  background-color: hsl(var(--accent));
  border-color: var(--surface-submit);
  color: hsl(var(--foreground));
}

.btn-neutral,
.dark .btn-neutral {
  background-color: transparent;
  border-color: var(--border-medium);
  color: hsl(var(--muted-foreground));
}
.btn-neutral:hover,
.dark .btn-neutral:hover {
  background-color: hsl(var(--accent));
  color: hsl(var(--foreground));
}
.btn-neutral:focus,
.dark .btn-neutral:focus { box-shadow: 0 0 0 2px hsl(var(--ring) / 0.6); }

/* ===== 20) Scroll-to-Bottom-Button: Marken-Look statt gebleichtem Kreis =======
   Der schwebende "nach unten scrollen"-Button nutzt LibreChats bg-text-primary/
   dark:text-black-Kontrasttrick (Light-Mode: dunkler Kreis + weisses Icon;
   Dark-Mode gedacht als heller Kreis + schwarzes Icon). Unsere Gray-Skala macht
   --text-primary im Dark-Mode zu einem blassen Hellblau (Sektion 1) -> wirkt wie
   ein gebleichter Fremdkoerper auf der dunklen Navy-Flaeche. Stattdessen dieselbe
   dunkle Oberflaeche wie andere schwebende Bedienelemente.
   AVHTUNG: der "Nachricht senden"-Button im Composer nutzt EXAKT dieselben
   Klassen (bg-text-primary rounded-full) -> per :not([type="submit"]) ausklammern,
   sonst wird der Senden-Button mitgetroffen (im Light-Mode dunkel-auf-dunkel,
   praktisch unsichtbar; im Dev-Test uebersehen, weil nur Dark-Mode gecheckt). */
.bg-text-primary.rounded-full:not([type="submit"]) { background-color: var(--gray-700); }
.bg-text-primary.rounded-full:not([type="submit"]):hover { background-color: var(--gray-600); }
.bg-text-primary.rounded-full:not([type="submit"]) svg { color: hsl(var(--foreground)) !important; }

/* ===== 21) Settings-Dialog: drei Tabs komplett ausblenden ======================
   "Sprache" (TTS/STT-Engine-Einstellungen): funktionslos, Vorlesen + Mikrofon sind
   im Chat selbst schon per CSS aus (Sektion 11/12), kein Sprachmodell konfiguriert.
   "Befehle": enthaelt nur den "@"-Umschalt-Befehl fuer Endpunkte/Modelle/Presets,
   bei DINspektor gibt es nur eine Wissensbasis -> witzlos.
   "About": reine Dev-Diagnose (Version/Commit-Hash/Branch/Build-Zeitstempel,
   "Copy diagnostics"-Button), komplett auf Englisch und fuer Berater ohne
   jeden Nutzen -> faellt neben dem sonst durchgehend deutschen UI negativ auf.
   Radix vergibt bei jedem Laden ein neues Zufalls-Praefix (radix-:rX:-...), der
   Suffix bleibt stabil -> IMMER per $= (Suffix-Match) selektieren, nie exact-id. */
button[role="tab"][id$="-trigger-speech"],
button[role="tab"][id$="-trigger-commands"],
button[role="tab"][id$="-trigger-about"] { display: none !important; }

/* ===== 22) Settings-Dialog, Tab "Chat": Power-User-/Dev-Zeilen ausblenden ======
   Acht Schalter ohne Nutzen fuer Berater (Dev-Settings, tote Schalter zu bereits
   global deaktivierten Features, oder nur bei mehreren Endpunkten/Presets
   relevant -> DINspektor hat genau eine Wissensbasis). Jede Zeile steckt in einem
   eigenen div.pb-3-Wrapper (Label + Switch, sonst nichts) -> den ganzen Wrapper
   ausblenden statt nur den Switch, sonst bleibt eine leere Zeile mit Label stehen.
   NICHT in dieser Liste (bewusst): autoSendPrompts/centerFormOnLanding (Icebreaker-
   Startbildschirm), enterToSend/saveDrafts/showScrollButton/latexParsing. */
div.pb-3:has(#alwaysMakeProd),
div.pb-3:has(#showThinking),
div.pb-3:has(#autoExpandTools),
div.pb-3:has(#showBadges),
div.pb-3:has(#modularChat),
div.pb-3:has(#defaultTemporaryChat),
div.pb-3:has(#rememberDefaultFork),
div.pb-3:has(#splitAtTarget) { display: none !important; }

/* ===== 23) Settings-Dialog: Info-Icons (?) auf muted-foreground ================
   Die Hilfe-Icons (Lucide circle-question-mark) neben mehreren Schaltern nutzen
   LibreChats eigenes --text-tertiary. Das haengt an unserer GETEILTEN Grau-Skala
   (Sektion 1, light+dark identisch) -> im Dark-Mode zu praesent/satt fuer ein
   zurueckhaltendes Hilfe-Icon, wirkt wie ein Link statt wie ein dezenter Hinweis.
   Auf unser theme-bewusstes --muted-foreground (shadcn-Token, Sektion 2) ziehen,
   konsistent mit den eigenen injizierten Elementen (Kundenkontext-Labels etc.). */
svg.lucide-circle-question-mark.text-text-tertiary {
  color: hsl(var(--muted-foreground)) !important;
}

/* ===== 24) Profilbild-Upload-Dialog: generische Tailwind-Grautoene ersetzen ====
   Der "Ein Bild hochladen"-Dialog (Konto-Tab -> Bild aendern) nutzt fuer
   Dropzone-Rahmen und Icon LITERALE Tailwind-Grautoene (border-gray-300/600,
   text-gray-400, LibreChats eigene neutrale Skala) statt unserer Marken-Tokens
   -> wirkt wie ein fremder, unfarbiger Kasten im sonst durchgehend navy-
   getoenten Dialog. Rahmen auf --border-medium (wie ueberall sonst im
   Composer), Icon auf --muted-foreground ziehen; Hover auf --surface-submit. */
.border-dashed.border-gray-300 {
  border-color: var(--border-medium) !important;
}
.border-dashed.border-gray-300:hover {
  border-color: var(--surface-submit) !important;
}
svg.lucide-file-image.text-gray-400 {
  color: hsl(var(--muted-foreground)) !important;
}

/* ===== 24) Settings-Dialog, Tab "Datensteuerung": tote Zeilen ausblenden ======
   Vier Eintraege ohne Funktion/Nutzen fuer Berater:
   - JSON-Import (kein Berater-Workflow; Label wurde zudem vom Button abgeschnitten)
   - Geteilte Links (Sharing ist global deaktiviert, ALLOW_SHARED_LINKS=false)
   - Benutzer-API-Keys widerrufen (Keys kommen zentral aus der Server-Config,
     Berater hinterlegen nie eigene Keys -> Knopf ist funktionslos)
   - TTS-Cache loeschen (Vorlesen/TTS ist deaktiviert)
   "Alle Chats loeschen" bleibt bewusst sichtbar (legitime Datenkontrolle).
   Anker: aria-labelledby-IDs der Buttons -> sprachUNabhaengig (anders als die
   Label-basierten Sektionen 11/12), uebersteht also auch den Sprachwechsel. */
div.pb-3:has(button[aria-labelledby="import-conversation-label"]),
div.pb-3:has(button[aria-labelledby="shared-links-label"]),
div.pb-3:has(button[aria-labelledby="revoke-info-label"]),
div.pb-3:has(button[aria-labelledby="delete-cache-label"]) { display: none !important; }

/* ===== 25) Empty State fuer die Chat-Liste (reines CSS) =======================
   Frische Nutzer (z. B. der Tester) sahen eine leere Seitenleiste ohne Hinweis.
   Ein injiziertes DOM-Element scheitert hier: die Liste ist ein ReactVirtualized-
   Grid, das fremde Kinder laufend wegraeumt (live verifiziert). Darum ::after
   auf dem Grid selbst. Leer-Erkennung: der innerScrollContainer enthaelt dann
   genau EINE Zelle (den "Chats"-Gruppen-Header) -> :first-child:last-child.
   Mit der ersten Unterhaltung kommen weitere Zellen -> :has greift nicht mehr,
   der Hinweis verschwindet von selbst. Sprachunabhaengig, kein DOM-Kampf. */
nav [role="grid"]:has(> div > div:first-child:last-child)::after {
  content: "Noch keine Unterhaltungen. Stelle rechts Deine erste Frage, dann erscheint sie hier.";
  display: block;
  padding: 1.5rem 1.25rem;
  text-align: center;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text-secondary, #9fb0cb);
}

/* ===== 26) Header: Vertrauens-Hinweis "Verschluesselte Verbindung" (#108) =====
   Injiziertes Badge (index.html-Script) oben rechts im Chat-Header: Schloss-
   Icon + Kurztext, Details im eigenen Tooltip (Sektion 17). Pill exakt im
   Look der Icebreaker-Chips (Karstens Wahl nach drei Iterationen): Text/Icon
   --muted-foreground, Rahmen --border-medium, Flaeche --muted - nur die
   Schriftstaerke bleibt normal (400). Hinweis: ein --border-muted existiert
   in LibreChat nicht; standby-tokens.css (wo es definiert ist) laedt nur die
   Auth-App, LibreChat bekommt die standby-Palette ueber das Token-Remap in
   Sektion 1-2. Auf schmalen Viewports bleibt nur das Icon stehen (Text
   ausgeblendet), damit der Header neben dem Wissensbasis-Selektor nicht
   ueberlaeuft. */
#dinspektor-secure-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 6px;
  padding: 6px 11px;
  border-radius: 9999px;
  border: 1px solid var(--border-medium);
  background-color: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  cursor: default;
  user-select: none;
}
.dinspektor-secure-ico { line-height: 0; }
.dinspektor-secure-ico svg { width: 13px; height: 13px; display: block; }
@media (max-width: 640px) {
  #dinspektor-secure-badge { padding: 6px; }
  .dinspektor-secure-txt { display: none; }
}

/* ===== 27) Sidebar: Bildmarke + Status-Punkte in der Chatliste (#107) =========
   (a) Bildmarke: injizierte erste Zeile im Sidebar-Panel (index.html-Script) —
   Avatar-Portrait als runder ~24px-Kreis mit Schatten (Mockup Jens) vor dem
   Schriftzug "DINspektor".
   (b) Chatliste: das pro Zeile wiederholte Avatar-Foto wirkte unruhig ->
   Foto ausblenden und stattdessen einen Status-Punkt zeichnen: neutraler
   Ring als Standard, gefuellter Punkt in der Akzentfarbe (--surface-submit)
   NUR bei ungelesener Antwort (Karstens Vorgabe: der Punkt zeigt bewusst
   NICHT die aktive Konversation). Die Klasse dinspektor-unread setzt das
   Ungelesen-Script in der index.html (XHR-Hook + React-Fiber-Zuordnung).
   Der Punkt haengt als ::before am Icon-Container (einziges Element mit
   direktem <img>-Kind in der Zeile -> :has(> img) trifft genau ihn); der
   Container behaelt eine feste Breite, damit die Titel buendig bleiben. */
#dinspektor-sidebar-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 14px 8px;
  flex: 0 0 auto;
}
#dinspektor-sidebar-brand img {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  flex: 0 0 auto;
}
.dinspektor-brand-name {
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.15;
  color: var(--text-primary);
  white-space: nowrap;
}
[data-testid="convo-item"] div:has(> img) {
  width: 20px;
  flex: 0 0 auto;
}
[data-testid="convo-item"] div:has(> img) > img { display: none; }
[data-testid="convo-item"] div:has(> img)::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  box-sizing: border-box;
  border: 1.5px solid var(--border-heavy);
}
[data-testid="convo-item"].dinspektor-unread div:has(> img)::before {
  border-color: var(--surface-submit);
  background-color: var(--surface-submit);
}
/* (c) Waehrend der Generierung ersetzt LibreChat den Icon-Container der Zeile
   durch einen Lade-Spinner (svg.animate-spin). Statt des Kringels: derselbe
   Punkt, dessen Fuellung sanft im Outline-Grau pulsiert (Karstens Vorgabe).
   Der Spinner wird versteckt; der Punkt haengt als ::before am Flex-Wrapper
   (einziges Element mit direktem Spinner-Kind) und bekommt 6px Seitenrand,
   damit er exakt im 20px-Slot des normalen Icon-Containers sitzt. */
[data-testid="convo-item"] svg.animate-spin { display: none; }
[data-testid="convo-item"] div:has(> svg.animate-spin)::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  margin: 0 6px;
  flex: 0 0 auto;
  border-radius: 50%;
  box-sizing: border-box;
  border: 1.5px solid var(--border-heavy);
  animation: dinspektor-dot-pulse 1.6s ease-in-out infinite;
}
@keyframes dinspektor-dot-pulse {
  0%, 100% { background-color: transparent; }
  50% { background-color: var(--border-heavy); }
}
@media (prefers-reduced-motion: reduce) {
  [data-testid="convo-item"] div:has(> svg.animate-spin)::before {
    animation: none;
    background-color: var(--border-heavy);
  }
}

/* ===== 28) Konto-Popup: Klarname gross, E-Mail klein (#109) ==================
   Kompromiss statt Mockup (dauerhafte Anzeige unten links): das Konto-Popup
   nannte bisher nur die E-Mail; das Injection-Script (index.html) ersetzt den
   Inhalt des role=note-Elements durch Name + E-Mail, sofern das Konto einen
   echten Namen hat. Hier nur die Typo-Hierarchie dazu. */
.dinspektor-account-name {
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-primary);
}
.dinspektor-account-mail {
  font-size: 0.78rem;
  line-height: 1.3;
  margin-top: 1px;
  color: var(--text-secondary);
}