/* NeXify AI — CI v10 fuer LibreChat
 * Werte aus design-system/tokens (Token-Check bestanden).
 * Eingespeist ueber sub_filter im Vorschalt-Proxy: LibreChat bleibt
 * unveraendert und aktualisierbar.
 */
:root,
html.light,
html.dark,
html[data-theme="dark"] {
  /* Grund und Flaechen */
  --nx-grund:        #242826;
  --nx-flaeche-1:    #2A2E2C;
  --nx-flaeche-2:    #303432;
  --nx-linie:        #363A38;
  --nx-linie-stark:  #4A4F4C;

  /* Text */
  --nx-text:         #E3E6E3;
  --nx-text-2:       #BCC1BD;
  --nx-text-gedaempft: #9CA29E;

  /* Akzent */
  --nx-akzent:       #D7FA50;
  --nx-akzent-hell:  #EEFF9A;
  --nx-akzent-kontrast: #111312;

  /* LibreChat-Variablen ueberschreiben */
  --surface-primary:        var(--nx-grund);
  --surface-secondary:      var(--nx-flaeche-1);
  --surface-tertiary:       var(--nx-flaeche-2);
  --surface-submit:         var(--nx-akzent);
  --surface-submit-hover:   var(--nx-akzent-hell);
  --surface-chat:           var(--nx-grund);
  --surface-hover:          var(--nx-flaeche-2);
  --surface-active:         var(--nx-flaeche-2);

  --border-light:           var(--nx-linie);
  --border-medium:          var(--nx-linie);
  --border-heavy:           var(--nx-linie-stark);
  --border-xheavy:          var(--nx-linie-stark);

  --text-primary:           var(--nx-text);
  --text-secondary:         var(--nx-text-2);
  --text-tertiary:          var(--nx-text-gedaempft);

  --header-primary:         var(--nx-grund);
  --header-hover:           var(--nx-flaeche-2);
  --presentation:           var(--nx-grund);

  --ring-primary:           var(--nx-akzent);
}

/* Schrift: Archivo wie Web und PDF. */
html, body,
button, input, select, textarea {
  font-family: "Archivo Variable", Archivo, Helvetica, Arial, sans-serif;
}

/* Absendeknopf im Markenakzent, Text dunkel fuer Kontrast. */
button[data-testid="send-button"]:not(:disabled),
.btn-primary {
  background-color: var(--nx-akzent) !important;
  color: var(--nx-akzent-kontrast) !important;
  border-color: var(--nx-akzent) !important;
}
button[data-testid="send-button"]:not(:disabled):hover,
.btn-primary:hover {
  background-color: var(--nx-akzent-hell) !important;
}

/* Fokus sichtbar halten: Barrierefreiheit vor Ästhetik. */
:focus-visible {
  outline: 2px solid var(--nx-akzent) !important;
  outline-offset: 2px !important;
}

::selection { background: var(--nx-akzent); color: var(--nx-akzent-kontrast); }

/* Grundflaechen direkt, da Tailwind-Utilities die Variablen umgehen. */
html, body { background-color: var(--nx-grund) !important; color: var(--nx-text); }

/* Anmeldemaske und Karten auf die zweite Ebene. */
form, main > div, [role="dialog"] { background-color: transparent; }

/* Eingabefelder im Markenbild. */
input, textarea, select {
  background-color: var(--nx-flaeche-1) !important;
  border-color: var(--nx-linie) !important;
  color: var(--nx-text) !important;
}
input::placeholder, textarea::placeholder { color: var(--nx-text-gedaempft) !important; }

/* Anmeldeknopf im Akzent, dunkler Text fuer Kontrast. */
button[type="submit"] {
  background-color: var(--nx-akzent) !important;
  color: var(--nx-akzent-kontrast) !important;
  border-color: var(--nx-akzent) !important;
}
button[type="submit"]:hover { background-color: var(--nx-akzent-hell) !important; }

/* Verweise im Akzent. */
a { color: var(--nx-akzent); }
a:hover { color: var(--nx-akzent-hell); }

/* ---------------------------------------------------------------------------
 * Grafiksprache (Linien-Art, Rasterflaeche, Glas) — gilt nur auf der
 * Anmeldeseite. Formensprache aus dem Yao-Agents-Bildsystem, Farbwelt NeXify.
 * Nur ergaenzend: ohne :has() bleibt die vorherige Oberflaeche unveraendert.
 * --------------------------------------------------------------------------- */
html:has(form[aria-label="Login form"]) body {
  background-color: #0B0F11 !important;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, .045) 1px, transparent 1px),
    radial-gradient(46rem 26rem at 14% -10%, rgba(215, 250, 80, .18), transparent 70%),
    radial-gradient(40rem 24rem at 90% 8%, rgba(215, 250, 80, .08), transparent 72%);
  background-size: 40px 40px, 40px 40px, auto, auto;
  background-attachment: fixed;
}

/* Die App-Huelle war deckend und haette die Rasterflaeche verdeckt. */
html:has(form[aria-label="Login form"]) #root > div:first-child {
  background-color: transparent !important;
}

/* Diagramm als Wasserzeichen hinter der Anmeldung. */
html:has(form[aria-label="Login form"]) main {
  position: relative;
}
html:has(form[aria-label="Login form"]) main::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/marke/systemdiagramm.svg") center / min(1400px, 130%) auto no-repeat;
  opacity: .32;
  pointer-events: none;
}

/* Anmeldekarte als Glasflaeche mit Verlaufskante. */
html:has(form[aria-label="Login form"]) main .w-authPageWidth {
  position: relative;
  z-index: 1;
  background: rgba(23, 27, 29, .74) !important;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 18px;
  backdrop-filter: blur(16px) saturate(1.15);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .48), 0 0 0 1px rgba(215, 250, 80, .07);
}

/* Titel der Anmeldung in der Verlaufsfarbe der Grafiksprache. */
html:has(form[aria-label="Login form"]) main h1 {
  background: linear-gradient(135deg, #EEFF9A 0%, #D7FA50 52%, #BFE83C 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  html:has(form[aria-label="Login form"]) * { scroll-behavior: auto; }
}