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

/* ===== 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 ist auf Desktop flex-row (Avatar links, Text rechts) -> auf Spalte
   zwingen (Avatar oben, Text darunter) und den Avatar deutlich vergroessern.
   :has() scoped exakt auf die Landing-Greeting mit dem DINspektor-Avatar. */
.gap-2.items-center.justify-center:has(.size-10 img[src*="dinspektor-avatar"]) {
  flex-direction: column !important;
  gap: 0.75rem !important;
}
.size-10.justify-center:has(img[src*="dinspektor-avatar"]) {
  width: 8rem !important;
  height: 8rem !important;
}
.size-10.justify-center:has(img[src*="dinspektor-avatar"]) > *,
.size-10.justify-center:has(img[src*="dinspektor-avatar"]) 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; }