/* Crewinside-Schicht über LibreChat v0.8.8
   Regel: Variablen zuerst. Was LibreChat über Variablen steuert, übersteht Updates.
   Gezielte Eingriffe stehen gesammelt in Teil 2 und jeder davon in selektoren.md.
   Farben kommen aus designsystem/tokens.css. LibreChat-Farben sind RGB-Tripel,
   weil LibreChat sie als rgb(var(--x) / alpha) nutzt.
   Keine externen Adressen: Schrift, Bilder und Skript liegen unter /crewinside/. */

@import url("/crewinside/system/tokens.css?v=20261027-aurora-scan");
@import url("/crewinside/system/motion.css?v=20261027-aurora-scan");
@import url("/crewinside/system/komponenten.css?v=20261027-dokumente");
@import url("/crewinside/system/bausteine.css?v=20261027-aurora-scan");
@import url("/crewinside/system/auswahl.css?v=20261027-dokumente");
@import url("/crewinside/system/atmosphaere.css?v=20261027-hauptbrain");
@import url("/crewinside/shell.css?v=20261027-dokumente");
@import url("/crewinside/testansicht.css?v=20261028-admin-abstand");

/* Erst nach dem Einstieg: im Inhaltsfluss, ohne Chat oder Navigation zu überdecken. */
.ci-toolhinweis { display: flex; align-items: center; gap: var(--ci-abstand-4); position: relative; flex: 0 0 auto; margin: var(--ci-abstand-4); padding: var(--ci-abstand-4); border-radius: var(--ci-radius-flaeche); background: var(--ci-feld); color: var(--ci-text); font-family: var(--ci-schrift); }
.ci-toolhinweis p { flex: 1; min-width: 0; margin: 0; line-height: 1.5; }
.ci-toolhinweis strong { display: block; font-size: var(--ci-text-m); font-weight: var(--ci-gewicht-mittel); }
.ci-toolhinweis p span { display: block; color: var(--ci-text-leise); font-size: var(--ci-text-s); }
.ci-toolhinweis > .ci-knopf { flex-shrink: 0; min-height: 44px; }
@media (max-width: 640px) {
  .ci-toolhinweis { flex-wrap: wrap; gap: var(--ci-abstand-3); padding-right: calc(var(--ci-abstand-4) + 44px); }
  .ci-toolhinweis p { flex-basis: 100%; }
  .ci-toolhinweis > button { position: absolute; top: var(--ci-abstand-2); right: var(--ci-abstand-2); }
}

/* ---------- 0. Schrift: Urbanist, selbst gehostet (SIL OFL, siehe schrift/OFL.txt) ---------- */
@font-face { font-family: "Urbanist"; font-style: normal; font-weight: 400; font-display: swap; src: url("/crewinside/schrift/urbanist-latin-400.woff2") format("woff2"); }
@font-face { font-family: "Urbanist"; font-style: normal; font-weight: 500; font-display: swap; src: url("/crewinside/schrift/urbanist-latin-500.woff2") format("woff2"); }
@font-face { font-family: "Urbanist"; font-style: normal; font-weight: 600; font-display: swap; src: url("/crewinside/schrift/urbanist-latin-600.woff2") format("woff2"); }
@font-face { font-family: "Urbanist"; font-style: normal; font-weight: 700; font-display: swap; src: url("/crewinside/schrift/urbanist-latin-700.woff2") format("woff2"); }
@font-face { font-family: "Urbanist"; font-style: normal; font-weight: 800; font-display: swap; src: url("/crewinside/schrift/urbanist-latin-800.woff2") format("woff2"); }

/* ================= Teil 1: Variablen ================= */
/* Jede LibreChat-Farbe ist ein RGB-Tripel eines --ci-*-Tokens aus system/tokens.css.
   werkzeuge/tests/librechat-variablen.test.mjs hält beide Seiten gleich. */

/* ---------- 1. Grauskala hell: kühles Nachtblau-Grau ---------- */
:root {
  --gray-20: 244 246 250;
  --gray-50: 244 246 250;
  --gray-100: 238 242 247;
  --gray-200: 221 227 236;
  --gray-300: 195 206 220;
  --gray-400: 127 140 162;
  --gray-500: 93 107 128;
  --gray-600: 74 90 114;
  --gray-650: 58 72 94;
  --gray-700: 38 52 74;
  --gray-800: 16 27 47;
  --gray-850: 11 20 36;
  --gray-900: 5 8 15;
  --gray-875: 8 14 26;
  --gizmo-gray-500: 93 107 128;
}

/* ---------- 2. Rollen hell ---------- */
html {
  --presentation: 238 242 247;          /* --ci-raum */
  --surface-primary: 238 242 247;       /* --ci-raum */
  --surface-primary-alt: 227 233 241;   /* --ci-raum-tief */
  --surface-secondary: 247 249 252;
  --surface-tertiary: 221 227 236;
  --surface-tertiary-alt: 255 255 255;  /* --ci-flaeche */
  --surface-chat: 247 249 252;          /* --ci-flaeche-erhoben */
  --surface-dialog: 255 255 255;        /* --ci-flaeche */
  --surface-hover: 227 233 241;
  --surface-active: 255 255 255;
  --surface-active-alt: 221 227 236;
  --surface-submit: 61 111 194;         /* --ci-akzent */
  --surface-submit-hover: 45 88 160;
  --surface-destructive: 179 38 30;
  --border-light: 221 227 236;          /* --ci-linie */
  --border-medium: 195 206 220;         /* --ci-linie-stark */
  --border-medium-alt: 195 206 220;
  --border-heavy: 127 140 162;
  --border-xheavy: 93 107 128;
  --text-primary: 14 26 43;             /* --ci-text */
  --text-secondary: 74 90 114;          /* --ci-text-leise */
  --text-tertiary: 93 107 128;          /* --ci-text-still */
  --accent-primary: 61 111 194;         /* --ci-akzent */
  --accent-primary-hover: 45 88 160;
  --link: 61 111 194;
  --status-info: 61 111 194;
  --status-info-subtle: 221 232 248;
  --status-error: 179 38 30;            /* --ci-fehler */
  --status-error-subtle: 248 226 225;
  --status-error-border: 179 38 30;
  --text-destructive: 179 38 30;
  --status-success: 31 138 91;          /* --ci-erfolg */
  --status-success-subtle: 222 242 233;
  /* LibreChats Grün gibt es bei uns nicht */
  --green-500: 31 138 91;
  --green-600: 31 138 91;
  --brand-purple: 61 111 194;

  --radius: calc(var(--ci-radius-flaeche) - var(--ci-abstand-5)); /* 12 px: LibreChats Grundradius, konzentrisch zur Fläche */
  --theme-control-radius: var(--ci-radius-bedienung);
  --theme-round-control-radius: var(--ci-radius-bedienung);
  --theme-surface-radius: var(--ci-radius-flaeche);
  --theme-large-surface-radius: var(--ci-radius-flaeche);
  --theme-font-family: var(--ci-schrift);
  --theme-elevation-surface: var(--ci-schatten-2);
  --theme-motion-normal: var(--ci-dauer-mittel);
}

/* ---------- 3. Dunkel: Nachtstudio ---------- */
.dark {
  --gray-20: 238 242 248;
  --gray-50: 238 242 248;
  --gray-100: 238 242 248;
  --gray-200: 205 214 228;
  --gray-300: 166 178 198;
  --gray-400: 127 140 162;
  --gray-500: 92 106 130;
  --gray-600: 50 66 96;
  --gray-650: 38 55 90;
  --gray-700: 26 39 63;
  --gray-800: 16 27 47;
  --gray-850: 11 20 36;
  --gray-875: 8 14 26;
  --gray-900: 5 8 15;
  --gizmo-gray-500: 127 140 162;

  --presentation: 5 8 15;
  --surface-primary: 5 8 15;
  --surface-primary-alt: 3 5 10;
  --surface-secondary: 11 20 36;
  --surface-tertiary: 16 27 47;
  --surface-tertiary-alt: 11 20 36;
  --surface-chat: 16 27 47;
  --surface-dialog: 11 20 36;
  --surface-hover: 16 27 47;
  --surface-active: 26 39 63;
  --surface-active-alt: 26 39 63;
  --surface-submit: 127 168 236;
  --surface-submit-hover: 169 198 244;
  --surface-destructive: 242 139 130;
  --border-light: 24 36 58;
  --border-medium: 38 55 90;
  --border-medium-alt: 38 55 90;
  --border-heavy: 50 66 96;
  --border-xheavy: 92 106 130;
  --text-primary: 238 242 248;
  --text-secondary: 166 178 198;
  --text-tertiary: 127 140 162;
  --accent-primary: 127 168 236;
  --accent-primary-hover: 176 202 245;
  --link: 127 168 236;
  --status-info: 127 168 236;
  --status-info-subtle: 20 36 64;
  --status-error: 242 139 130;
  --status-error-subtle: 52 20 22;
  --status-error-border: 242 139 130;
  --text-destructive: 242 139 130;
  --status-success: 95 207 155;
  --status-success-subtle: 14 44 34;
  --green-500: 95 207 155;
  --green-600: 95 207 155;
  --brand-purple: 127 168 236;
}

/* ================= Teil 2: Gezielte Eingriffe (stehen in selektoren.md, bei Updates prüfen) ================= */

/* Schrift und Raum: LibreChat setzt Inter fest auf body (Felder und Knöpfe erben über Tailwinds Preflight) */
body { font-family: var(--ci-schrift) !important; color: var(--ci-text); }
/* LibreChat färbt .dark body/html fest mit #212121 */
html, html body, html.dark, html.dark body { background: var(--ci-raum); }
.bg-presentation { background-color: transparent !important; }
/* Menüs, Dialoge und Popover laufen in Portalen außerhalb von body-Kindern mit eigener Schrift */
[role="menu"], [role="dialog"], [role="listbox"], [data-radix-popper-content-wrapper] { font-family: var(--ci-schrift) !important; }

/* ---------- Menüs und Popover: Glas mit 32 px, Einträge als Pillen, Trennlinien werden Luft ---------- */
:is([role="menu"], .popover-ui, [role="dialog"].animate-popover) {
  padding: var(--ci-abstand-2) !important;
  border: 0 !important;
  border-radius: var(--ci-radius-flaeche) !important;
  background: var(--ci-flaeche-glas) !important;
  -webkit-backdrop-filter: blur(var(--ci-unschaerfe-glas)) saturate(1.2); backdrop-filter: blur(var(--ci-unschaerfe-glas)) saturate(1.2);
  box-shadow: var(--ci-schatten-glas), var(--ci-schatten-2) !important;
}
:is([role="menu"], .popover-ui, [role="dialog"].animate-popover) :is([role="menuitem"], [role="option"], [role="menuitemradio"], [role="menuitemcheckbox"]) { border-radius: var(--ci-radius-bedienung) !important; }
:is([role="menu"], .popover-ui, [role="dialog"].animate-popover) [role="option"]::before { display: none; }
:is([role="menu"], .popover-ui) [role="separator"] { background: transparent !important; }

/* ---------- Dialoge: Glasfläche mit 32 px über einem ruhigen Schleier, Reiter als Pillen ---------- */
[role="dialog"] > .fixed.inset-0.bg-black {
  opacity: 1 !important;
  background: color-mix(in srgb, var(--ci-raum-tief) 70%, transparent) !important;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
:is([role="dialog"], [role="alertdialog"]) .bg-surface-dialog, .bg-surface-dialog:is([role="dialog"], [role="alertdialog"]) {
  border-radius: var(--ci-radius-flaeche) !important;
  background: var(--ci-flaeche-glas) !important;
  -webkit-backdrop-filter: blur(var(--ci-unschaerfe-glas)) saturate(1.2); backdrop-filter: blur(var(--ci-unschaerfe-glas)) saturate(1.2);
  box-shadow: var(--ci-schatten-glas), var(--ci-schatten-3) !important;
}
[role="dialog"] [role="tab"] { border-radius: var(--ci-radius-bedienung) !important; }
/* Innen ohne Linien: Kopf durch Luft getrennt, Zeilen als gefüllte Felder mit konzentrischer Rundung, Bedienelemente als Pillen */
:is([role="dialog"], [role="alertdialog"]) .bg-surface-dialog * { border-width: 0 !important; }
:is([role="dialog"], [role="alertdialog"]) .bg-surface-dialog .divide-y { display: grid; gap: var(--ci-abstand-1); overflow: visible !important; border-radius: 0 !important; background: none !important; }
:is([role="dialog"], [role="alertdialog"]) .bg-surface-dialog .divide-y > * { border-radius: calc(var(--ci-radius-flaeche) - var(--ci-abstand-2)) !important; background: var(--ci-feld) !important; }
:is([role="dialog"], [role="alertdialog"]) .bg-surface-dialog :is(button:not([role="tab"]), input:not([type="checkbox"], [type="radio"], [type="range"], [type="hidden"]), select, [role="combobox"]) { border-radius: var(--ci-radius-bedienung) !important; }
:is([role="dialog"], [role="alertdialog"]) .bg-surface-dialog input:not([type="checkbox"], [type="radio"], [type="range"], [type="hidden"]) { background: var(--ci-feld) !important; }
:is([role="dialog"], [role="alertdialog"]) .bg-surface-dialog [role="combobox"] { background: var(--ci-kreis) !important; }
/* Schalter: Luft statt durchsichtigem Rand, an in Akzent */
:is([role="dialog"], [role="alertdialog"]) .bg-surface-dialog [role="switch"] { padding: 2px; }
:is([role="dialog"], [role="alertdialog"]) .bg-surface-dialog [role="switch"][data-state="checked"] { background: var(--ci-akzent) !important; }
[role="dialog"] [role="tab"][data-state="active"] { background: var(--ci-akzent-weich) !important; color: var(--ci-akzent-text) !important; }
/* Häkchen und Optionen (Radix) verlieren mit den Linien ihren Rand: als runde Mulde wie .ci-haekchen, gewählt in Akzent */
:is([role="dialog"], [role="alertdialog"]) .bg-surface-dialog :is([role="checkbox"], [role="radio"]) { border-radius: var(--ci-radius-portraet) !important; background: var(--ci-feld-hover) !important; }
:is([role="dialog"], [role="alertdialog"]) .bg-surface-dialog :is([role="checkbox"], [role="radio"]):is([data-state="checked"], [aria-checked="true"]) { color: var(--ci-auf-akzent) !important; background: var(--ci-akzent) !important; }

/* ---------- Kopfzeile des Chats: Agentenwahl, Seitenleiste, „…“, temporärer Chat, Neuer Chat (Link), Lesezeichen, Export als gefüllte Pillen ---------- */
main div.absolute.top-0:has(> div > #header-menu-button) :is(button, a) { border: 0 !important; border-radius: var(--ci-radius-bedienung) !important; background: var(--ci-feld) !important; box-shadow: none !important; }
main div.absolute.top-0:has(> div > #header-menu-button) :is(button, a):hover { background: var(--ci-feld-hover) !important; }
main div.absolute.top-0:has(> div > #header-menu-button) :is(button, a):is([aria-pressed="true"], [aria-expanded="true"]) { color: var(--ci-akzent-text) !important; background: var(--ci-akzent-weich) !important; }

/* ---------- Chat-Start: die Bühne des Crewmitglieds (buehne.js) ----------
   Auftrag: sofort sehen, mit wem man spricht und was die Person kann, und loslegen.
   Rangfolge: Porträt, Name, Rolle (Antwort), Satz und Startkarten (Aktion), Gruß (Kontext, leise). */
.ci-begruessung { display: grid; justify-items: center; gap: var(--ci-abstand-6); margin-bottom: var(--ci-abstand-7); text-align: center; }
.ci-gruss { margin: 0; max-width: 36rem; font: var(--ci-gewicht-normal) var(--ci-text-l)/1.4 var(--ci-schrift); color: var(--ci-text-leise); text-wrap: balance; }
.ci-buehne { display: grid; justify-items: center; gap: var(--ci-abstand-3); width: 100%; max-width: 40rem; }
.ci-buehne-bild { margin-bottom: var(--ci-abstand-2); }
/* Porträt 128 px (kleiner auf schmalen und niedrigen Fenstern), Ring in der Hauptfarbe: Identität. */
.ci-buehne .ci-portraet { --groesse: 128px !important; --ring: var(--ci-raum); box-shadow: 0 0 0 4px var(--ci-raum), 0 0 0 6px var(--crew, var(--ci-text-still)); }
@media (max-width: 1023px) { .ci-buehne .ci-portraet { --groesse: 112px !important; } }
@media (max-width: 599px) { .ci-buehne .ci-portraet { --groesse: 96px !important; } }
@media (max-height: 560px) { .ci-buehne .ci-portraet { --groesse: 72px !important; } }
.ci-buehne-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--ci-abstand-2) var(--ci-abstand-3); max-width: 100%; }
.ci-buehne-name { margin: 0; font-size: var(--ci-text-buehne); font-weight: var(--ci-gewicht-titel); letter-spacing: var(--ci-laufweite-titel); line-height: var(--ci-zeile-titel); color: var(--ci-text); overflow-wrap: anywhere; }
.ci-buehne-name--lang { font-size: var(--ci-text-l); }
.ci-buehne-rolle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ci-buehne-satz { margin: 0; max-width: 32rem; font-size: var(--ci-text-m); line-height: var(--ci-zeile-text); color: var(--ci-text-leise); text-wrap: balance; }
.ci-buehne-karten { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ci-abstand-2); max-width: 100%; margin-top: var(--ci-abstand-2); }
.ci-buehne-karte {
  min-height: 44px; max-width: 100%; padding: 0 var(--ci-abstand-5); border: 0; border-radius: var(--ci-radius-bedienung);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: var(--ci-gewicht-mittel) var(--ci-text-m)/1.3 var(--ci-schrift); color: var(--ci-text); background: var(--ci-feld); cursor: pointer;
}
.ci-buehne-karte[data-zustand] { color: var(--ci-text-leise); display: grid; gap: var(--ci-abstand-1); }
.ci-buehne-karte small { font-size: var(--ci-text-s); font-weight: var(--ci-gewicht-normal); }
.ci-buehne-karte:hover { background: var(--ci-feld-hover); }
.ci-buehne-karte:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ci-akzent-weich), 0 0 0 1px var(--ci-akzent); }
/* Bühne, Gruß und Eingabe gehören zusammen: der Block ist von unten gestapelt und endet 12 px über der Eingabe.
   Ab 640 px hat LibreChats Behälter keine Höhe (sm:max-h-0), sein Inhalt liefe sonst mittig in die Eingabe hinein;
   darunter ist er so hoch wie der freie Raum und stünde sonst mittig darin. */
#messages-view div.transform-gpu.flex-col.items-center.justify-center {
  align-self: stretch; justify-content: flex-end !important; padding-bottom: 0 !important; margin-bottom: var(--ci-abstand-3) !important;
}
/* LibreChats große Agentenzeile über der Eingabe entfällt: Porträt, Name und Rolle stehen auf der Bühne (dort auch für Bildschirmleser).
   Sie bleibt im Baum, nimmt aber keinen Platz und ist unsichtbar: kein display: none und nichts abgeschnitten, denn LibreChat lädt das
   Bild faul und fliegt den Namen erst ein, wenn er im Sichtfeld steht; sonst bliebe beides für immer „nicht fertig“.
   Nur wenn die Bühne wirklich steht: Ohne Crew-Gruppe (Einrichtungs-Hinweis aus der Konfig) oder ohne Crew-Eintrag bleibt LibreChats Block sichtbar. */
#messages-view div.transform-gpu.flex-col.items-center.justify-center:has(> .ci-begruessung) > div:not(.ci-begruessung) { position: absolute; visibility: hidden; pointer-events: none; margin: 0; }

/* Kopfzeile: die Agentenwahl zeigt den Namen mit Chevron, ohne Porträt (Leiste, Bühne und Panel tragen die Person) */
[data-testid="model-selector-button"] > div:first-child:has(img) { position: absolute; width: 0; height: 0; overflow: hidden; opacity: 0; pointer-events: none; } /* 0 × 0 statt display: none: LibreChat lädt das Bild faul */
[data-testid="model-selector-button"]:not(:has(svg))::after {
  content: ""; flex: none; width: 16px; height: 16px; background: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); -webkit-mask-size: contain; -webkit-mask-position: center; -webkit-mask-repeat: no-repeat;
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");         mask-size: contain;         mask-position: center;         mask-repeat: no-repeat;
}

/* Gesprächsstarter: leise Text-Links mit Pfeil, der beim Hover rückt (wie .ci-knopf--leise) */
div:has(+ form #prompt-textarea) { gap: var(--ci-abstand-1) !important; }
div:has(+ form #prompt-textarea) > button {
  display: inline-flex; align-items: center; gap: var(--ci-abstand-2); max-width: 100%; min-height: 44px;
  padding: 0 6px !important; border: 0 !important; border-radius: var(--ci-radius-bedienung) !important;
  font: var(--ci-gewicht-mittel) var(--ci-text-m)/1.3 var(--ci-schrift); color: var(--ci-akzent-text) !important;
  background: none !important; box-shadow: none !important; text-align: left;
}
div:has(+ form #prompt-textarea) > button::after {
  content: ""; flex: none; width: 20px; height: 20px; background: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  transition: transform var(--ci-dauer-fluss) var(--ci-feder);
}
div:has(+ form #prompt-textarea) > button:hover::after { transform: translateX(4px); }
div:has(+ form #prompt-textarea) > button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ci-akzent-weich), 0 0 0 1px var(--ci-akzent) !important; }

/* ---------- Eingabe: Glasfläche mit 32 px, ohne Linie; Fokus als Ring ---------- */
form textarea { font-size: 1rem; caret-color: var(--ci-akzent); }
form > div:has(textarea) {
  border: 0 !important;
  border-radius: var(--ci-radius-flaeche) !important;
  background: var(--ci-flaeche-glas) !important;
  -webkit-backdrop-filter: blur(var(--ci-unschaerfe-glas)) saturate(1.2); backdrop-filter: blur(var(--ci-unschaerfe-glas)) saturate(1.2);
  box-shadow: var(--ci-schatten-glas), var(--ci-schatten-2) !important;
}
form > div:has(textarea:focus-visible) { box-shadow: 0 0 0 4px var(--ci-akzent-weich), var(--ci-schatten-glas), var(--ci-schatten-2) !important; }
/* LibreChats eigene Fläche darin wird durchsichtig, damit nur eine Form sichtbar ist */
form [data-testid="composer-surface"] { border: 0 !important; border-radius: var(--ci-radius-flaeche) !important; background: transparent !important; box-shadow: none !important; }
/* Modus-Schalter (Websuche, Code …) und „Aktion prüfen“ als Chips mit Symbol */
form [data-testid="composer-surface"] :is(div.relative.flex.flex-wrap.items-center.gap-2 button, [data-testid="pending-tool-approval-button"]) {
  min-height: 32px; padding: 0 14px 0 10px !important; gap: 6px; border: 0 !important; border-radius: var(--ci-radius-bedienung) !important;
  font: var(--ci-gewicht-mittel) var(--ci-text-s)/1.2 var(--ci-schrift) !important; color: var(--ci-text-leise) !important; background: var(--ci-feld) !important; box-shadow: none !important;
}
form [data-testid="composer-surface"] :is(div.relative.flex.flex-wrap.items-center.gap-2 button, [data-testid="pending-tool-approval-button"]):hover { color: var(--ci-text) !important; background: var(--ci-feld-hover) !important; }
form [data-testid="composer-surface"] :is(div.relative.flex.flex-wrap.items-center.gap-2 button, [data-testid="pending-tool-approval-button"]):is([aria-pressed="true"], [aria-checked="true"], [aria-expanded="true"], [data-state="on"]) { color: var(--ci-akzent-text) !important; background: var(--ci-akzent-weich) !important; }
form [data-testid="composer-surface"] :is(div.relative.flex.flex-wrap.items-center.gap-2 button, [data-testid="pending-tool-approval-button"]) svg { width: 16px; height: 16px; }

/* Senden und Stopp: Akzentkreis; ohne Text ruht der Kreis als Feld */
[data-testid="send-button"], [data-testid="stop-generation-button"] { border: 0 !important; border-radius: var(--ci-radius-bedienung) !important; }
[data-testid="send-button"]:not(:disabled), [data-testid="stop-generation-button"] { background: var(--ci-akzent) !important; color: var(--ci-auf-akzent) !important; box-shadow: none; }
[data-testid="send-button"]:disabled { opacity: 1 !important; background: var(--ci-feld) !important; color: var(--ci-text-still) !important; }
[data-testid="send-button"] svg, [data-testid="stop-generation-button"] svg { color: inherit !important; }
/* LibreChat beschriftet die Hauptaktion mit --text-on-status (Weiß), das auch auf Signalfarben liegt.
   Auf dem Akzent steht deshalb gezielt --ci-auf-akzent (hell weiß, dunkel Nachtblau). */
.bg-surface-submit.text-text-on-status, .bg-surface-submit .text-text-on-status { color: var(--ci-auf-akzent) !important; }

/* Crew-Porträts: Personen sind Kreise, überall. Das Zeichen ist nicht eingebrannt; die Marke (.ci-portraet-marke
   aus system/bausteine.css) trägt ein Porträt erst ab 56 px, das 32-px-Porträt über der Antwort bleibt ohne. */
img[src*="/crewinside/avatare/"] { border-radius: var(--ci-radius-portraet) !important; }
.message-render h2 > span.rounded-full { position: relative; width: 32px !important; height: 32px !important; overflow: visible !important; border-radius: var(--ci-radius-portraet) !important; }
.message-render h2 { font-size: var(--ci-text-s); font-weight: var(--ci-gewicht-stark); gap: 10px; margin-bottom: 8px; }

/* Crew-Bild in der Antwort: Grund und Ring aus der Hauptfarbe, das Visier (.ci-visier) sitzt darüber (setzt crewinside.js) */
[data-ci-crew-bild] { position: relative; background: var(--crew-grund, transparent); border-radius: var(--ci-radius-portraet); }

/* „Arbeitet“: umlaufender Ring in der Hauptfarbe (ohne Farbe in Akzent), solange eine Antwort entsteht (Klasse setzt crewinside.js);
   im Visier läuft dazu der Reflex (system/bausteine.css) */
.ci-arbeitet { position: relative; isolation: isolate; }
.ci-arbeitet::before {
  content: ""; position: absolute; inset: -5px; border-radius: var(--ci-radius-portraet); z-index: -1;
  background: conic-gradient(from 0deg, transparent 0 55%, var(--ci-atmosphaere) 72%, var(--crew, var(--ci-akzent)) 88%, transparent 100%);
  -webkit-mask-image: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
          mask-image: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
  animation: ci-drehen 2.2s linear infinite;
}

/* Nachrichten erscheinen weich */
.message-render { animation: ci-einblenden var(--ci-dauer-mittel) var(--ci-kurve-aus) both; }

/* Ich: gefüllte Fläche mit 32 px, ohne Linie und Schatten. Kollegin: keine Blase, Text direkt im Raum. */
.user-turn [data-testid="message-body"] {
  border: 0;
  border-radius: var(--ci-radius-flaeche) !important;
  padding: 12px 20px !important;
  background: var(--ci-feld) !important;
  box-shadow: none;
}
.user-turn [data-testid="message-body"] .markdown { color: var(--ci-text) !important; }
.agent-turn [data-testid="message-body"] { background: transparent; padding: 0; }
.agent-turn [data-testid="message-body"] .markdown { color: var(--ci-text); }
/* Antworten lesen sich bei 45 bis 75 Zeichen: Fließtext höchstens 38 rem; Tabellen und Code dürfen so breit werden wie die Eingabe */
.agent-turn [data-testid="message-body"] .markdown > :is(p, ul, ol, blockquote, h1, h2, h3, h4, h5, h6) { max-width: 38rem; }

/* ---------- Freigabe: Glas mit 32 px und genau einer Hauptaktion ----------
   Karte im Verlauf und Prüffeld über der Eingabe sind Glas; im Prüffeld liegen Argumente und Entscheidung
   als Felder mit konzentrischer Rundung. Solange nichts gewählt ist, ist „Genehmigen“ (Check-Symbol,
   unabhängig von Reihenfolge und Übersetzung) die Hauptaktion; nach der Wahl ist es „Fortfahren“,
   die gewählte Entscheidung zeigt Akzent weich mit Ring. */
[data-testid="tool-approval"]:not(#pending-tool-approval-panel *), #pending-tool-approval-panel > .popover {
  border: 0 !important;
  border-radius: var(--ci-radius-flaeche) !important;
  background: var(--ci-flaeche-glas) !important;
  -webkit-backdrop-filter: blur(var(--ci-unschaerfe-glas)) saturate(1.2); backdrop-filter: blur(var(--ci-unschaerfe-glas)) saturate(1.2);
  box-shadow: var(--ci-schatten-glas), var(--ci-schatten-2) !important;
}
[data-testid="tool-approval"]:not(#pending-tool-approval-panel *) { padding: var(--ci-abstand-4) var(--ci-abstand-5) !important; }
/* Das Prüffeld schwebt über dem Verlauf, liegt aber in LibreChats Eingabe-Hülle (view-transition-name, eigene Unschärfe):
   Die Unschärfe erreicht den Verlauf dahinter nicht. Damit nichts durchscheint, ist seine Glasfläche hier deckend. */
#pending-tool-approval-panel > .popover { background: var(--ci-flaeche) !important; }
#pending-tool-approval-panel > .popover > div { border: 0 !important; }
#pending-tool-approval-panel > .popover > div:first-child, #pending-tool-approval-panel > .popover > div:last-child { padding: var(--ci-abstand-3) var(--ci-abstand-5) !important; }
#pending-tool-approval-panel :is(pre, [data-testid="tool-approval"]) {
  border: 0 !important;
  border-radius: calc(var(--ci-radius-flaeche) - var(--ci-abstand-3)) !important;
  background: var(--ci-feld) !important;
}
#pending-tool-approval-panel [data-testid="tool-approval"] { padding: var(--ci-abstand-4) !important; }
#pending-tool-approval-panel button:not([aria-pressed]) { border-radius: var(--ci-radius-bedienung) !important; }
#pending-tool-approval-panel .bg-surface-submit { min-height: 36px; padding: 0 var(--ci-abstand-5) !important; }
#pending-tool-approval-panel .bg-surface-submit:disabled { opacity: 1 !important; background: var(--ci-feld) !important; color: var(--ci-text-still) !important; }
[data-testid="tool-approval"] button[aria-pressed] {
  border: 0 !important;
  border-radius: var(--ci-radius-bedienung) !important;
  padding: 0 var(--ci-abstand-4) !important;
  color: var(--ci-text) !important;
  background: var(--ci-feld-hover) !important;
  transition: transform var(--ci-dauer-sofort) var(--ci-kurve-aus);
}
[data-testid="tool-approval"] button[aria-pressed]:active { transform: scale(0.97); }
[data-testid="tool-approval"]:not(:has(button[aria-pressed="true"])) button[aria-pressed]:has(svg.lucide-check) { color: var(--ci-auf-akzent) !important; background: var(--ci-akzent) !important; }
[data-testid="tool-approval"] button[aria-pressed="true"] { color: var(--ci-akzent-text) !important; background: var(--ci-akzent-weich) !important; box-shadow: 0 0 0 2px var(--ci-akzent); }
[data-testid="tool-approval"] button[aria-pressed]:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ci-akzent-weich), 0 0 0 1px var(--ci-akzent); }

/* Dunkel: LibreChat zeigt auf der Anmeldung dasselbe Logo wie hell (dunkle Schrift) */
.dark img[src$="assets/logo.svg"] { filter: brightness(0) invert(1); }

/* Nutzer-Kürzel ohne LibreChat-Grün */
[data-testid="nav-user"] img { filter: grayscale(1) brightness(.35) contrast(1.4); }
.dark [data-testid="nav-user"] img { filter: grayscale(1) brightness(1.6); }

/* Mehr Kontrast, weniger Transparenz: die Glasflächen des Chats werden feste Flächen (wie .ci-glas in bausteine.css) */
@media (prefers-contrast: more), (prefers-reduced-transparency: reduce) {
  :is(form > div:has(textarea), [role="menu"], .popover-ui, [role="dialog"].animate-popover, [data-testid="tool-approval"]:not(#pending-tool-approval-panel *), #pending-tool-approval-panel > .popover),
  :is([role="dialog"], [role="alertdialog"]) .bg-surface-dialog {
    -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--ci-flaeche) !important;
  }
}

@keyframes ci-drehen { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .ci-arbeitet::before, .message-render { animation: none !important; }
  div:has(+ form #prompt-textarea) > button::after, [data-testid="tool-approval"] button[aria-pressed] { transition: none !important; }
  div:has(+ form #prompt-textarea) > button:hover::after, [data-testid="tool-approval"] button[aria-pressed]:active { transform: none; }
}


/* Eigener Sidebar-Abschnitt; aktuelle Agenten kommen aus der bestehenden Crew-API. */
/* Eigene Seiten (Crew, Brain, …): dieselbe Porträt-Leiste links, kein Panel */
.ci-eigene-sidebar{position:fixed;left:0;top:0;bottom:0;padding:0!important;margin:0;min-width:0!important;z-index:var(--ci-z-leiste);width:var(--ci-leiste-breite);display:flex}
.ci-eigene-sidebar > details{display:none}
.ci-mit-sidebar{padding-left:var(--ci-leiste-breite)}
/* Mobil: Unterleiste aus Glas. Die Logokachel steht fest, nur die Reihe (Crew, Orte, Werkzeuge) wischt;
   der Kantenverlauf rechts zeigt, dass mehr kommt. Nichts darin schrumpft (Audit 2.3, 2.9). */
@media (max-width: 767px) {
  .ci-mit-sidebar { padding-left: 0; padding-bottom: 76px; }
  .ci-eigene-sidebar { top: auto; right: 0; width: auto; height: 76px; }
  .ci-eigene-sidebar .ci-leiste {
    flex: 1 1 auto; flex-direction: row; align-items: center; gap: var(--ci-abstand-2);
    width: 100%; height: 76px; padding: 0 0 0 var(--ci-abstand-4);
    background: var(--ci-flaeche-glas);
    -webkit-backdrop-filter: blur(var(--ci-unschaerfe-glas)) saturate(1.2); backdrop-filter: blur(var(--ci-unschaerfe-glas)) saturate(1.2);
    box-shadow: var(--ci-schatten-glas);
  }
  .ci-eigene-sidebar .ci-leiste { --ci-leiste-grund: var(--ci-flaeche); }
  .ci-eigene-sidebar .ci-leiste-logo { margin: 0; }
  .ci-eigene-sidebar .ci-leiste-reihe {
    display: flex; align-items: center; gap: var(--ci-abstand-2);
    flex: 1 1 auto; min-width: 0; height: 100%;
    padding: 0 var(--ci-abstand-7) 0 var(--ci-abstand-1);
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 84%, transparent 99%);
            mask-image: linear-gradient(90deg, #000 0, #000 84%, transparent 99%);
  }
  .ci-eigene-sidebar .ci-leiste-reihe::-webkit-scrollbar { display: none; }
  .ci-eigene-sidebar :is(.ci-leiste, .ci-leiste-reihe, .ci-leiste-crew, .ci-leiste-gruppe) > * { flex-shrink: 0; }
  .ci-eigene-sidebar .ci-leiste-crew { flex-direction: row; width: auto; }
  .ci-eigene-sidebar .ci-leiste-raum { flex: 0 0 0; }
  /* Hell/Dunkel steht fest am Ende der Unterleiste; die Reihe davor schrumpft und wischt */
  .ci-eigene-sidebar .ci-leiste > .ci-leiste-reihe { flex-shrink: 1; }
  .ci-eigene-sidebar .ci-leiste-konto:not(:empty) { position: static; flex: none; flex-direction: row; align-items: center; gap: var(--ci-abstand-1); padding: 0 var(--ci-abstand-3) 0 0; }
  .ci-eigene-sidebar .ci-leiste-gruppe { flex-direction: row; padding: 0 0 0 var(--ci-abstand-3); }
  /* Die Reihe wischt: alle Werkzeuge bleiben sichtbar, „Mehr“ entfällt (auch bei wenig Höhe) */
  .ci-eigene-sidebar .ci-leiste .ci-leiste-gruppe[data-gruppe="werkzeuge"] { display: flex; }
  .ci-eigene-sidebar .ci-leiste .ci-leiste-gruppe[data-gruppe="mehr"] { display: none; }
  /* Ohne Zeiger kein Tooltip; den Namen trägt aria-label */
  .ci-eigene-sidebar .ci-tooltip { display: none; }
  /* Aktiv: kurzer Strich unter dem Porträt */
  .ci-eigene-sidebar .ci-leiste-agent[aria-current="page"]::after {
    content: ""; position: absolute; left: 50%; bottom: -5px;
    width: 18px; height: 3px; border-radius: var(--ci-radius-bedienung);
    background: var(--ci-akzent); transform: translateX(-50%);
  }
}
.ci-chat-eingebettet aside,.ci-chat-eingebettet .ci-leiste,.ci-chat-eingebettet [data-testid="header-open-sidebar-button"]{display:none!important}

/* Ein Einstieg pro Aufgabe: Fähigkeiten liegen im Auftragsraum, der freie Chat bleibt ruhig. */
.ci-begruessung--chat { gap: var(--ci-abstand-3); margin: 0 auto var(--ci-abstand-5); padding-inline: var(--ci-abstand-4); max-width: 42rem; }
.ci-begruessung--chat .ci-gruss { font-size: clamp(1.5rem, 1.1rem + 1vw, 2rem); color: var(--ci-text); line-height: 1.2; }
.ci-chatstart-text { max-width: 42ch; margin: 0; color: var(--ci-text-leise); font-size: var(--ci-text-m); line-height: var(--ci-zeile-text); text-wrap: balance; }