/* Freihafen — PUK-Skin für LibreChat · @author Fabian Roser
 * Wird via docker-compose.override.yml nach /app/client/dist/assets/puk.css
 * gemountet; die Einbindung (<link>) erzeugt patch_freihafen_skin.sh.
 * Prinzip: NUR Optik (Typo, Farben, Akzente) — keine Struktur, kein Fork.
 * CS-Gefühl: Jost, tiefdunkle Flächen, PUK-Pink #E30E7D als Akzent,
 * Senden-Button bleibt grün (CS-CTA-Konvention). */

@font-face {
  font-family: 'Jost';
  src: url('/assets/jost.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Alias-Trick: Die App deklariert überall font-family "Inter" (html + .font-sans)
 * und bringt Inter als @font-face mit. Wir definieren "Inter" NACH dem Bundle
 * neu auf die Jost-Datei → jede Inter-Referenz rendert Jost, ohne
 * Spezifitäts-Kampf. Monospace (Code) bleibt unberührt. */
@font-face {
  font-family: 'Inter';
  src: url('/assets/jost.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

html, body, #root, .font-sans,
button, input, textarea, select {
  font-family: 'Jost', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif !important;
}

/* Akzent-Logik wie im Creative Studio: Interaktion = Neon-Grün (#10FC70,
 * verifiziert am CS-Designsystem), Pink bleibt Marken-/Logo-Farbe.
 * Wunsch Fabian 07.07.: Hover- + Aktiv-Zustand der Chats links in Grün. */
:root {
  --puk-pink: #E30E7D;
  --puk-green: #10FC70;
  /* Chat-/Hauptfläche: CS-Canvas-Grau (Token --canvas/#F2F2F2, verifiziert
   * in CS src/styles.css). --surface-chat bewusst NICHT grau → das
   * Eingabefeld bleibt weiß und hebt sich von der grauen Fläche ab. */
  --surface-primary: #F2F2F2;
  --presentation: #F2F2F2;
  /* Fokus-Ringe / primäre Ringe → CS-Grün */
  --ring-primary: var(--puk-green);
  /* aktiver Chat / Auswahl: zartes Grün statt Grau */
  --surface-active: rgba(16, 252, 112, 0.28);
  --surface-active-alt: rgba(16, 252, 112, 0.28);
  /* Hover-Zustände: noch zarteres Grün */
  --surface-hover: rgba(16, 252, 112, 0.14);
  --surface-hover-alt: rgba(16, 252, 112, 0.14);
}

.dark {
  /* CS-nahe, tiefschwarze Flächen (statt LibreChat-Grau) */
  --surface-primary-alt: #0b0b0e;   /* Sidebar */
  --surface-primary: #101013;       /* Hauptfläche */
  --surface-chat: #101013;
  --surface-secondary: #17171b;
  --presentation: #101013;
  /* aktiver Chat: Neon-Grün-Glow */
  --surface-active: rgba(16, 252, 112, 0.20);
  --surface-active-alt: rgba(16, 252, 112, 0.20);
  --surface-hover: rgba(16, 252, 112, 0.10);
  --surface-hover-alt: rgba(16, 252, 112, 0.10);
}

/* ===== Dunkles Side-Panel (auch im hellen Theme) — CS-Muster =====
 * Creative Studio: Icon-Leiste = --surface-rail #000000, dunkle Flächen =
 * --surface-dark #141414 (verifiziert in src/styles.css). Umsetzung über
 * SCOPED Variablen-Redefinition: Alle Tailwind-Klassen im Panel lösen ihre
 * var()-Werte gegen den nächsten Vorfahren auf — kein Struktur-Eingriff. */

/* Chat-Liste (linkes Panel) — CS-Dunkelgrau */
nav[class*="bg-surface-primary-alt"],
/* Icon-Leiste (schmale Spalte links) — CS-Schwarz via eigener Regel unten */
div[class*="border-r"][class*="bg-surface-primary-alt"] {
  --surface-primary-alt: #141414;
  --surface-primary: #1b1b1f;
  --surface-secondary: #202024;
  --surface-tertiary: #202024;
  --text-primary: #f2f2f3;
  --text-secondary: #b6b6bd;
  --text-tertiary: #8e8e96;
  --border-light: #26262b;
  --border-medium: #303036;
  --surface-hover: rgba(16, 252, 112, 0.10);
  --surface-hover-alt: rgba(16, 252, 112, 0.10);
  --surface-active: rgba(16, 252, 112, 0.18);
  --surface-active-alt: rgba(16, 252, 112, 0.18);
}

/* Icon-Leiste: echtes Rail-Schwarz wie im CS */
div[class*="border-r"][class*="bg-surface-primary-alt"] {
  --surface-primary-alt: #000000;
}

/* PUK-Punkteraster im dunklen Panel (CS-Signatur), ganz dezent */
nav[class*="bg-surface-primary-alt"],
div[class*="border-r"][class*="bg-surface-primary-alt"] {
  background-image: radial-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1.6px);
  background-size: 16px 16px;
  background-position: 4px 4px;
}

*:focus-visible {
  outline-color: var(--puk-green);
}

/* Auswahl-Markierung (Text) in CS-Grün */
::selection {
  background: rgba(16, 252, 112, 0.35);
}

/* ===== Nutzer-Nachrichten als Sprechblase (Claude-Desktop-Anmutung) =====
 * Blase NUR um den Nachrichtentext (erstes Kind des Wrappers) — die
 * Zusatzfunktionen (Zeit, Bearbeiten, Kopieren, SubRow) bleiben AUSSERHALB
 * unterhalb sichtbar. Keine Outline, Ton minimal dunkler als die
 * #F2F2F2-Canvas, großzügiger Radius (Referenz-Screenshot Fabian 07.07.). */
.user-turn .flex.flex-col.gap-1 > div:first-child {
  background: #E7E7E4;
  border: none;
  border-radius: 20px;
  padding: 10px 16px;
  width: fit-content;
  max-width: 100%;
}
.dark .user-turn .flex.flex-col.gap-1 > div:first-child {
  background: #232327;
}

/* ===== Die Bühne: Begrüßung als CS-Headline-Balken =====
 * Der Begrüßungstext ist ein INLINE-Element aus Wort-/Buchstaben-Spans →
 * grüner Balken schmiegt sich per box-decoration-break an jede Zeile
 * (CS-Marker-Effekt), große schwarze Typo, einzelne Wörter in Fraunces
 * kursiv (die „Magic-Serife" aus dem CS-Backlog) als editorialer Akzent. */
/* Kalligrafische Kontrast-Serife des PUK-Systems: Cormorant Garamond
 * (Brand-Analyse: „der Kontrast-Moment in Headlines"; Wunsch Fabian:
 * Kursive in Regular-Gewicht). Fraunces bleibt als Reserve gemountet. */
@font-face {
  font-family: 'CormorantGaramond';
  src: url('/assets/garamond-italic.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'CormorantGaramond';
  src: url('/assets/garamond-regular.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Marker-Balken PRO ZEILE: Der p-Container wird im Flex-Layout zwangsweise
 * zum Block (Flex-Items werden blockifiziert!) — deshalb liegt das Grün auf
 * den WORT-Spans: deren Hintergründe verschmelzen zeilenweise zu Balken,
 * die exakt am Text enden (CS-Marker-Effekt). Zeilenränder bekommen die
 * bekannten Zeilenanfangs-/End-Wörter (feste Umbrüche unten). */
div[class*="transform-gpu"] p.split-parent {
  background: transparent;
  color: #000000;
  font-size: clamp(1.35rem, 2.16vw, 1.85rem) !important;
  line-height: 1.45;
  font-weight: 600;
}
div[class*="transform-gpu"] > div {
  max-width: 780px;
}
/* Wort-Spans: inline (überstimmt Inline-Style) + grüner Marker.
 * Balken als GRADIENT-STREIFEN (74 % der Zeilenbox, mittig) → liegt eng an
 * der Typo statt die volle Em-Box zu füllen (Wunsch Fabian). Überlappung
 * schließt Haarspalten. Animation der Buchstaben ist deaktiviert (unten). */
div[class*="transform-gpu"] p.split-parent > span {
  display: inline !important;
  background-image: linear-gradient(var(--puk-green), var(--puk-green));
  background-repeat: no-repeat;
  background-size: 100% 74%;
  background-position: 0 56%;
  padding: 0 0.06em;
  margin: 0 -0.06em;
}
/* Buchstaben-Animation aus: erst Balken, dann Buchstaben wirkte kaputt.
 * !important überstimmt die Inline-Styles der Animation. */
div[class*="transform-gpu"] p.split-parent span {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
/* Zeilenanfänge (Wörter 1, 5, 9) + Zeilenenden (4, 8, 13): seitlicher Rand */
div[class*="transform-gpu"] p.split-parent > span:nth-of-type(1),
div[class*="transform-gpu"] p.split-parent > span:nth-of-type(5),
div[class*="transform-gpu"] p.split-parent > span:nth-of-type(9) {
  padding-left: 0.22em;
}
div[class*="transform-gpu"] p.split-parent > span:nth-of-type(4),
div[class*="transform-gpu"] p.split-parent > span:nth-of-type(8),
div[class*="transform-gpu"] p.split-parent > span:nth-of-type(13) {
  padding-right: 0.22em;
}
/* Feste Umbrüche: nach „KI-Freihafen." (Wort 4) und „an:" (Wort 8) →
 * Zeile 1: Willkommen im PUK KI-Freihafen. / Zeile 2: Hier legt alles an:
 * / Zeile 3: Claude, Gemini und deine Agenten. */
div[class*="transform-gpu"] p.split-parent > span:nth-of-type(4)::after,
div[class*="transform-gpu"] p.split-parent > span:nth-of-type(8)::after {
  content: '\A';
  white-space: pre;
}
/* Typo-Akzente (Vorgabe Fabian): W + e von „Willkommen" = Serife aufrecht;
 * e von „Hier" = kursiv/regular; Wort „deine" = Serife kursiv. */
div[class*="transform-gpu"] p.split-parent > span:nth-of-type(1) > span:nth-of-type(1),
div[class*="transform-gpu"] p.split-parent > span:nth-of-type(1) > span:nth-of-type(9) {
  font-family: 'CormorantGaramond', Georgia, serif;
  font-style: normal;
  font-weight: 700;
}
div[class*="transform-gpu"] p.split-parent > span:nth-of-type(5) > span:nth-of-type(3) {
  font-family: 'CormorantGaramond', Georgia, serif;
  font-style: italic;
  font-weight: 700;
}
/* „KI" (Buchstaben 1+2 von „KI-Freihafen.") in Barlow Thin kursiv */
div[class*="transform-gpu"] p.split-parent > span:nth-of-type(4) > span:nth-of-type(1),
div[class*="transform-gpu"] p.split-parent > span:nth-of-type(4) > span:nth-of-type(2) {
  font-family: 'Barlow', ui-sans-serif, sans-serif;
  font-style: italic;
  font-weight: 100;
}
/* „deine": Garamond auf den BUCHSTABEN (nicht dem Wort-Span) — so behält
 * der grüne Balken die Jost-Metrik und bleibt zeilenweise bündig. */
div[class*="transform-gpu"] p.split-parent > span:nth-of-type(12) > span {
  font-family: 'CormorantGaramond', Georgia, serif;
  font-style: italic;
  font-weight: 700;
  font-size: 1.08em;
}

/* ===== Begrüßungsbildschirm: immer das Freihafen-Zeichen =====
 * Die Modellkarten tragen jetzt Hersteller-Icons (anthropic/google) — auf
 * der Landing soll aber die PLATTFORM grüßen, nicht das aktive Modell.
 * Das Icon-Element der Landing (transform-gpu-Container, size-10) bekommt
 * das Freihafen-SVG als Hintergrund, das Modell-Icon darin wird versteckt. */
div[class*="transform-gpu"] div[class*="size-10"] {
  background: url('/assets/logo.svg') center / contain no-repeat;
  border-radius: 14px;
  /* moderat größer als das Standard-Modell-Icon (76px war Fabian zu groß) */
  width: 52px !important;
  height: 52px !important;
}
div[class*="transform-gpu"] div[class*="size-10"] > * {
  visibility: hidden;
}

/* Barlow Thin Italic (PUK-Accent-Font) — für das „KI" in der Bühne */
@font-face {
  font-family: 'Barlow';
  src: url('/assets/barlow-thin-italic.woff2') format('woff2');
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}

/* ===== Login-Seite: Logo über der Überschrift statt am Seitenrand ===== */
div[class*="mt-6"][class*="h-10"][class*="bg-cover"] {
  display: none;
}
main h1[class*="text-3xl"]::before {
  content: '';
  display: block;
  width: 64px;
  height: 64px;
  margin: 0 auto 18px;
  background: url('/assets/logo.svg') center / contain no-repeat;
}

/* ===== Icon-Leiste: Freihafen-Zeichen oben, PUK-Logo über dem Avatar ===== */
div[class*="border-r"][class*="bg-surface-primary-alt"] {
  position: relative;
}
div[class*="border-r"][class*="bg-surface-primary-alt"]::before {
  content: '';
  display: block;
  width: 30px;
  height: 30px;
  margin: 2px auto 4px;
  background: url('/assets/logo.svg') center / contain no-repeat;
}
div[class*="border-r"][class*="bg-surface-primary-alt"]::after {
  content: '';
  position: absolute;
  bottom: 58px; /* über dem Avatar (der sitzt ganz unten) */
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 28px;
  background: url('/assets/puk-logo.png') center / contain no-repeat;
}

/* ===== Login-Seite im PUK-Gate-Look (wie magic.puk.agency / Corpex-Gates) =====
 * Referenzwerte 1:1 aus build_gate.mjs: Schwarz + Punkteraster 20px,
 * Unterstrich-Inputs, Neongrün-Button mit schwarzer Schrift. Scope = die
 * Auth-Wurzel (min-h-screen + bg-white gibt es nur dort). */
div[class*="min-h-screen"][class*="bg-white"] {
  background: #000000 !important;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.30) 1px, transparent 1px) !important;
  background-size: 20px 20px !important;
}
div[class*="min-h-screen"][class*="bg-white"] [class*="w-authPageWidth"] {
  background: transparent !important;
}
div[class*="min-h-screen"][class*="bg-white"] h1 {
  color: #ffffff !important;
}
div[class*="min-h-screen"][class*="bg-white"] .text-black,
div[class*="min-h-screen"][class*="bg-white"] [class*="text-gray"] {
  color: rgba(255, 255, 255, 0.75) !important;
}
/* Inputs: transparent, nur Unterstrich, Fokus in PUK-Grün */
div[class*="min-h-screen"][class*="bg-white"] input:not([type='checkbox']) {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 0 !important;
  color: #ffffff !important;
  box-shadow: none !important;
}
div[class*="min-h-screen"][class*="bg-white"] input:focus {
  border-bottom-color: var(--puk-green) !important;
  outline: none !important;
}
div[class*="min-h-screen"][class*="bg-white"] input::placeholder {
  color: rgba(255, 255, 255, 0.45) !important;
}
div[class*="min-h-screen"][class*="bg-white"] label {
  color: rgba(255, 255, 255, 0.55) !important;
  background: transparent !important;
}
/* Buttons: PUK-CI-Grün mit schwarzer Schrift (statt LibreChat-Grün) */
div[class*="min-h-screen"][class*="bg-white"] button[type="submit"],
div[class*="min-h-screen"][class*="bg-white"] [class*="bg-green"] {
  background: var(--puk-green) !important;
  color: #000000 !important;
  border-color: var(--puk-green) !important;
}
div[class*="min-h-screen"][class*="bg-white"] button[type="submit"]:hover {
  background: #0be566 !important;
}
/* Links (Registrieren, Passwort vergessen) in PUK-Grün */
div[class*="min-h-screen"][class*="bg-white"] a[class*="text-green"],
div[class*="min-h-screen"][class*="bg-white"] a[class*="font-semibold"] {
  color: var(--puk-green) !important;
}

/* ===== „Die Maschine arbeitet"-Signale (Wunsch Fabian 08.07.) =====
 * Während des Streamings (.result-streaming) pulsiert der Schreib-Cursor,
 * und Artefakt-Karten bekommen einen atmenden Neongrün-Glow + Hinweis-
 * animation — damit „sieht fertig aus" nie wieder täuscht. */
@keyframes puk-puls {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}
/* Schreib-Cursor: Punkt + Tätigkeits-Text, sanft pulsierend. Der Text ist
 * kontextsensitiv: sobald eine Artefakt-Karte in der Antwort steht, wird
 * daraus „schreibt Code ins Artefakt". (Glow-Kasten auf der Karte wieder
 * entfernt — wirkte wie eine Handlungsaufforderung, UX-Feedback Fabian.) */
.result-streaming > :not(ol):not(ul):not(pre):last-child::after,
.result-streaming > ol:last-child > li:last-child::after,
.result-streaming > ul:last-child > li:last-child::after,
.result-streaming > pre:last-child code::after {
  content: '●  arbeitet …';
  font-family: 'Jost', ui-sans-serif, sans-serif;
  font-size: 0.85em;
  font-weight: 500;
  color: #6b6b70;
  margin-left: 4px;
  animation: puk-puls 1.4s ease-in-out infinite;
  /* Immer EINE Zeile — sonst bricht der Text in schmalen Containern
   * buchstabenweise um (UX-Bug 08.07.) */
  display: inline-block;
  white-space: nowrap;
}
.result-streaming:has(div[class*="group"][class*="rounded-xl"]) > :not(ol):not(ul):not(pre):last-child::after {
  content: '●  schreibt Code ins Artefakt …';
}

/* 2FA-Code-Eingabe: das transparente Overlay-Input der input-otp-Bibliothek
 * NICHT als Unterstrich-Feld stylen — sonst erscheinen alle Ziffern in EINEM
 * Feld statt in den 6 Kaestchen (die Ziffern rendern die Slot-Divs). */
div[class*="min-h-screen"][class*="bg-white"] input[data-input-otp] {
  color: transparent !important;
  caret-color: transparent !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* OTP-Ziffern in den Kaestchen hell (dunkler Auth-Hintergrund): die Slot-Divs
 * rendern die Ziffern; das transparente Overlay-Input NICHT einfaerben. */
div[class*="min-h-screen"][class*="bg-white"] [data-input-otp-container] :not(input) {
  color: #ffffff !important;
}