/* ============================================================
   auraHub Custom Theme — inspired by auraPress Dashboard Design
   Targeted selectors based on actual Tailwind/Vite build output
   ============================================================ */

/* === CSS CUSTOM PROPERTIES === */
:root {
  --ah-primary: #4BB5B1;
  --ah-primary-light: #5EC4C0;
  --ah-primary-dark: #3A9E9A;
  --ah-accent: #F27F5E;
  --ah-bg: #F5F7F8;
  --ah-bg-light: #FAFBFC;
  --ah-card-bg: #FFFFFF;
  --ah-card-border: #E2E8F0;
  --ah-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  --ah-card-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.12);
  --ah-text-primary: #1A202C;
  --ah-text-secondary: #64748B;
  --ah-header-bg: #1E293B;
  --ah-chip-inactive-bg: #F1F5F9;
  --ah-transition: all 0.2s ease;
}


/* ================================================================
   1. TYPOGRAFIE
   ================================================================ */
body,
html {
  font-family: 'Inter var', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif !important;
  color: var(--ah-text-primary) !important;
  line-height: 1.6 !important;
  font-weight: 400 !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700 !important;
  color: var(--ah-text-primary) !important;
  line-height: 1.3 !important;
}

h3, h4, h5, h6 {
  font-weight: 600 !important;
}


/* ================================================================
   2. HINTERGRUND
   ================================================================ */
body {
  background-color: var(--ah-bg) !important;
}

#root {
  background-color: var(--ah-bg) !important;
}

main {
  background-color: var(--ah-bg) !important;
}


/* ================================================================
   3. APP-GRID KARTEN
   Struktur: a.block.h-full > div.flex.flex-row.sm:flex-col.h-full
     > div[style="background-color:..."] (farbiger Header)
     > div.px-4.py-2 (Text-Bereich)
   ================================================================ */

/* 3a. Karten-Wrapper — transparent mit Teal-Rahmen */
a.block.h-full {
  background: transparent !important;
  border: 1px solid var(--ah-primary) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  transition: var(--ah-transition) !important;
  overflow: hidden !important;
  display: block !important;
  text-decoration: none !important;
}

a.block.h-full:hover {
  background: rgba(75, 181, 177, 0.05) !important;
  border-color: var(--ah-primary-dark) !important;
  box-shadow: 0 2px 8px rgba(75, 181, 177, 0.15) !important;
  transform: translateY(-1px) !important;
}

/* 3b. Farbigen Header → kompakter Icon-Streifen
   Statt den ganzen Header zu verstecken, wird er auf eine schmale
   Spalte (Mobile) bzw. schmale Zeile (Desktop) reduziert, sodass
   nur der Icon-Kreis sichtbar bleibt.
   Struktur:
     div.flex.items-center.justify-center.w-20.flex-shrink-0.rounded-l-lg
       .sm:rounded-t-lg.sm:w-full.sm:h-24 [style=backgroundColor]
       → div.w-12.h-12.bg-white/30.rounded-full (Icon-Kreis)
       → div.absolute.bottom-2 (Type-Badge) */

/* Mobile (< sm): linker Streifen → schmale Icon-Spalte */
a.block.h-full > div > div.flex-shrink-0[style*="background-color"] {
  background: transparent !important;
  width: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;
  height: auto !important;
  padding: 10px 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
  border-right: 1px solid rgba(75, 181, 177, 0.2) !important;
  border-radius: 12px 0 0 12px !important;
}

/* Desktop (>= sm): oberer Streifen → schmale Icon-Zeile */
@media (min-width: 640px) {
  a.block.h-full > div > div.flex-shrink-0[style*="background-color"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    padding: 0 !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(75, 181, 177, 0.2) !important;
    border-radius: 12px 12px 0 0 !important;
  }
}

/* 3c. Icon-Kreis — kleiner (28x28), Teal-Gradient statt App-Farbe */
a.block.h-full .bg-white\/30.rounded-full {
  display: flex !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  background: linear-gradient(135deg, #4BB5B1 0%, #3A9E9A 100%) !important;
  border-radius: 8px !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 1px 3px rgba(75, 181, 177, 0.3) !important;
}

/* Icon-SVG im Kreis — passend skaliert */
a.block.h-full .bg-white\/30.rounded-full svg,
a.block.h-full .bg-white\/30 svg {
  display: block !important;
  width: 16px !important;
  height: 16px !important;
  color: #FFFFFF !important;
}

/* 3d. Type-Badge (redirect/window) — im kleinen Header verstecken */
a.block.h-full > div > div.flex-shrink-0[style*="background-color"] > .absolute {
  display: none !important;
}

/* 3e. Text-Bereich innerhalb der Karten */
a.block.h-full .px-4.py-2 h3 {
  color: var(--ah-text-primary) !important;
  font-weight: 600 !important;
  font-size: 1.05rem !important;
}

a.block.h-full .px-4.py-2 p {
  color: var(--ah-text-secondary) !important;
}

/* 3f. App-Typ-Badge (falls anderswo sichtbar) */
a.block.h-full .bg-white\/90.rounded-full {
  background: rgba(255, 255, 255, 0.95) !important;
  color: var(--ah-text-secondary) !important;
  font-size: 11px !important;
}


/* ================================================================
   4. KATEGORIE-FILTER-CHIPS
   Struktur: button mit px-4 py-2 rounded-full text-sm font-medium
   Aktive Chips bekommen inline style={backgroundColor: P.color}
   ================================================================ */

/* 4a. Alle Chips (die Kategorie-Buttons über dem App-Grid) */
button.rounded-full.text-sm.font-medium {
  border-radius: 20px !important;
  padding: 6px 16px !important;
  font-weight: 500 !important;
  border: 1px solid transparent !important;
  transition: var(--ah-transition) !important;
  cursor: pointer !important;
}

/* 4b. Inaktive Chips (ohne inline backgroundColor) */
button.rounded-full.text-sm.font-medium:not([style*="background-color"]) {
  background-color: var(--ah-chip-inactive-bg) !important;
  color: var(--ah-text-secondary) !important;
}

button.rounded-full.text-sm.font-medium:not([style*="background-color"]):hover {
  background-color: rgba(75, 181, 177, 0.12) !important;
  color: var(--ah-primary-dark) !important;
}

/* 4c. Aktive Chips (mit inline backgroundColor) — Teal erzwingen */
button.rounded-full.text-sm.font-medium[style*="background-color"] {
  background-color: var(--ah-primary) !important;
  color: #FFFFFF !important;
  border-color: var(--ah-primary) !important;
  box-shadow: 0 2px 6px rgba(75, 181, 177, 0.3) !important;
}


/* ================================================================
   5. CHAT-OBERFLÄCHE
   Struktur: div.flex.flex-col.h-[calc(100vh-4rem)]
     > div.bg-white.border-b.border-gray-200.px-4.py-3 (Header)
     > div (Nachrichten-Bereich)
     > div (Eingabe-Bereich)
   ================================================================ */

/* 5a. Chat-Container Hintergrund */
.h-\[calc\(100vh-4rem\)\] {
  background-color: var(--ah-bg-light) !important;
}

/* 5a2. Chat-Bereich BREITER — ALLE max-width Container überschreiben */
.max-w-3xl {
  max-width: 1000px !important;
}

.max-w-4xl {
  max-width: 1100px !important;
}

/* Äußerer Chat-Container */
.max-w-6xl.mx-auto.w-full {
  max-width: 1400px !important;
}

/* 5a3. Footer global klein halten — CSS kann den Footer nicht
   kontextabhängig (nur im Chat) verstecken, da <footer> ein
   Geschwister von <main> ist, nicht Kind des Chat-Containers.
   Lösung: Footer überall auf minimale Höhe reduzieren. */
footer {
  padding: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* 5b. Chat-App-Header — KOMPAKTER: weniger Padding, kleinere Beschreibung */
.bg-white.border-b.border-gray-200.px-4.py-3 {
  background: var(--ah-card-bg) !important;
  border-bottom: 1px solid var(--ah-card-border) !important;
  color: var(--ah-text-primary) !important;
  padding: 8px 16px !important;
}

/* App-Name im Chat-Header — etwas kleiner */
.bg-white.border-b.border-gray-200 h1.text-lg {
  font-size: 0.95rem !important;
  line-height: 1.3 !important;
  margin: 0 !important;
}

/* Beschreibung im Chat-Header — deutlich kompakter */
.bg-white.border-b.border-gray-200 p.text-sm.text-gray-500 {
  font-size: 0.75rem !important;
  line-height: 1.2 !important;
  margin: 0 !important;
  max-width: 500px !important;
}

/* Icon im Chat-Header kleiner */
.bg-white.border-b.border-gray-200 .w-10.h-10 {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
}

/* Spacing im Header komprimieren */
.bg-white.border-b.border-gray-200 .space-x-3 {
  gap: 8px !important;
}

/* Action-Buttons im Header kompakter */
.bg-white.border-b.border-gray-200 .space-x-2 button {
  padding: 4px !important;
}

/* 5b2. Nachrichten-Scroll-Bereich — maximaler vertikaler Platz */
.flex-1.overflow-hidden {
  flex: 1 1 0% !important;
  min-height: 0 !important;
}

/* Messages-Liste weniger Rand oben/unten */
.flex-1.mb-4.p-4.overflow-y-auto.space-y-4 {
  margin-bottom: 8px !important;
  padding: 12px 16px !important;
}

/* Input-Container weniger Padding */
.flex-shrink-0.px-4.pt-2 {
  padding: 4px 12px 8px !important;
}

/* 5c. Icon-Kreise mit inline backgroundColor — einheitlich Teal */
/* Chat-Header Icon */
.bg-white.border-b .w-10.h-10.rounded-full[style*="background-color"] {
  background: linear-gradient(135deg, #4BB5B1 0%, #3A9E9A 100%) !important;
}

/* Begrüßungs-Icon auf leerer Chat-Seite */
.w-20.h-20.rounded-full[style*="background-color"] {
  background: linear-gradient(135deg, #4BB5B1 0%, #3A9E9A 100%) !important;
}

/* Alle kleinen runden Icons mit App-Farbe */
.w-10.h-10.rounded-full[style*="background-color"] {
  background: linear-gradient(135deg, #4BB5B1 0%, #3A9E9A 100%) !important;
}

/* 5c2. Chat-Header mit inline background-color (olivgrün etc.) überschreiben */
div[style*="background-color"].px-4.py-3,
div[style*="background-color"].px-4.py-2 {
  background-color: var(--ah-card-bg) !important;
  border-bottom: 1px solid var(--ah-card-border) !important;
  color: var(--ah-text-primary) !important;
}

/* 5d. Chat-Eingabefeld (textarea) — via Container-Selektor */
.h-\[calc\(100vh-4rem\)\] textarea {
  border-radius: 24px !important;
  border: 1px solid var(--ah-card-border) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06) !important;
  font-size: 15px !important;
  background: var(--ah-card-bg) !important;
  transition: var(--ah-transition) !important;
  line-height: 1.5 !important;
}

.h-\[calc\(100vh-4rem\)\] textarea:focus {
  border-color: var(--ah-primary) !important;
  box-shadow: 0 0 0 3px rgba(75, 181, 177, 0.15) !important;
  outline: none !important;
}

/* Chat-Input spezifisch: der textarea mit focus:ring-indigo-500 */
textarea.focus\:ring-indigo-500 {
  border-radius: 24px !important;
  border: 1px solid var(--ah-card-border) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06) !important;
  font-size: 15px !important;
  background: var(--ah-card-bg) !important;
}

textarea.focus\:ring-indigo-500:focus {
  border-color: var(--ah-primary) !important;
  box-shadow: 0 0 0 3px rgba(75, 181, 177, 0.15) !important;
  outline: none !important;
  --tw-ring-color: transparent !important;
}

/* 5e. Senden-Button im Chat — type="button" mit bg-indigo-600 */
/* Normal: Teal statt Indigo */
form.items-center > .bg-indigo-600,
form.items-center > button.bg-indigo-600,
.flex.space-x-2.items-center > .bg-indigo-600 {
  background-color: var(--ah-primary) !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 20px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: var(--ah-transition) !important;
}

form.items-center > .bg-indigo-600:hover,
form.items-center > button.bg-indigo-600:hover,
.flex.space-x-2.items-center > .bg-indigo-600:hover {
  background-color: var(--ah-primary-dark) !important;
  box-shadow: 0 2px 8px rgba(75, 181, 177, 0.3) !important;
}

/* Disabled state */
form.items-center > .bg-gray-300,
.flex.space-x-2.items-center > .bg-gray-300 {
  border-radius: 20px !important;
}

/* 5e-fix. Runder Senden-Button — der Kreis rechts unten im Chat-Input */
form button.rounded-full,
form button[class*="rounded-full"],
div[class*="items-center"] button.rounded-full {
  background-color: #4BB5B1 !important;
  color: white !important;
}

form button.rounded-full:hover {
  background-color: #3A9E9A !important;
}

/* Noch breiter: Jeder runde Button in der Chat-Eingabe-Area */
button.rounded-full.bg-gray-200,
button.rounded-full.bg-gray-300,
button.rounded-full.bg-gray-100,
button.bg-gray-200.rounded-full,
button.bg-gray-300.rounded-full {
  background-color: #4BB5B1 !important;
  color: white !important;
}

/* 5e2. Chat-Eingabe — der textarea im Chat-Formular */
form.items-center textarea,
.flex.space-x-2.items-center textarea {
  border-radius: 24px !important;
  border: 1px solid var(--ah-card-border) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06) !important;
  padding: 12px 20px !important;
  font-size: 15px !important;
  background: var(--ah-card-bg) !important;
  transition: var(--ah-transition) !important;
}

form.items-center textarea:focus,
.flex.space-x-2.items-center textarea:focus {
  border-color: var(--ah-primary) !important;
  box-shadow: 0 0 0 3px rgba(75, 181, 177, 0.15) !important;
  outline: none !important;
}

/* 5f. Chat-Widget Bubbles und Content */
.chat-widget-content {
  background-color: var(--ah-bg-light) !important;
}

.chat-widget-message {
  transition: var(--ah-transition) !important;
}

.chat-widget-message-content {
  border-radius: 16px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06) !important;
}

/* 5g. Markdown-Content in Chat-Antworten */
.markdown-content {
  line-height: 1.7 !important;
}

.markdown-content code {
  background-color: #F1F5F9 !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  font-size: 0.875em !important;
}

.code-block-container {
  border: 1px solid var(--ah-card-border) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}

.code-block-toolbar {
  background-color: var(--ah-bg) !important;
  border-bottom: 1px solid var(--ah-card-border) !important;
}


/* ================================================================
   6. PRIMÄRE BUTTONS (Tailwind bg-blue-600, bg-indigo-600 etc.)
   ================================================================ */

/* Login/Submit-Buttons — Teal statt Blau */
.bg-blue-600 {
  background-color: var(--ah-primary) !important;
}

.bg-blue-600:hover,
.hover\:bg-blue-700:hover {
  background-color: var(--ah-primary-dark) !important;
}

.bg-indigo-600 {
  background-color: var(--ah-primary) !important;
}

.bg-indigo-600:hover,
.hover\:bg-indigo-700:hover {
  background-color: var(--ah-primary-dark) !important;
}

/* Focus-Ring — Teal statt Blau */
.focus\:ring-blue-500:focus {
  --tw-ring-color: rgba(75, 181, 177, 0.5) !important;
}

.focus\:ring-indigo-500:focus {
  --tw-ring-color: rgba(75, 181, 177, 0.5) !important;
}

/* Icon-Buttons mit blauem Hintergrund */
.bg-blue-600.rounded-lg {
  background-color: var(--ah-primary) !important;
}

/* Indigo-Header (mobile Sidebar) */
.bg-indigo-800 {
  background-color: var(--ah-header-bg) !important;
}


/* ================================================================
   7. HEADER / NAVIGATION / SIDEBAR
   Struktur: <header class="text-white sticky top-0 z-10"
             style="background-color: {headerColor}">
   headerColor wird per-App gesetzt (z.B. #61765b für Bilanzanalyst)
   — hier einheitlich auf Teal erzwingen
   ================================================================ */

/* 7a. Navigation Header — IMMER Teal, egal welche App-Farbe */
header.sticky.top-0[style*="background-color"] {
  background-color: var(--ah-primary) !important;
}

/* Fallback: alle header mit inline background-color */
header[style*="background-color"] {
  background-color: var(--ah-primary) !important;
}

/* Header ohne inline style — auch Teal */
header.text-white.sticky {
  background-color: var(--ah-primary) !important;
}

header,
nav {
  transition: var(--ah-transition) !important;
}

/* 7b. Natives Hamburger-Icon (rechts) verstecken — wir haben unsere eigene Sidebar
   Struktur: header > div.flex.items-stretch > div.flex.items-center.space-x-4
     > button.md:hidden.text-white [aria-label*="toggleMenu"] (letztes Kind)
   Auch: die native mobile Sidebar (div.md:hidden.bg-indigo-800) */
header button.md\:hidden.text-white,
header button[aria-label*="oggle"],
header .flex.items-center.space-x-4 > button.md\:hidden {
  display: none !important;
}

/* Native mobile Sidebar/Dropdown auch verstecken */
header ~ div.md\:hidden.bg-indigo-800,
div.md\:hidden.bg-indigo-800 {
  display: none !important;
}

/* Sidebar Links */
aside a {
  transition: var(--ah-transition) !important;
}

aside a:hover {
  background-color: rgba(75, 181, 177, 0.15) !important;
}


/* ================================================================
   8. FORMULARE (allgemein)
   ================================================================ */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="number"],
textarea,
select {
  border: 1px solid var(--ah-card-border) !important;
  border-radius: 8px !important;
  font-family: inherit !important;
  transition: var(--ah-transition) !important;
  background: var(--ah-card-bg) !important;
  color: var(--ah-text-primary) !important;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--ah-primary) !important;
  box-shadow: 0 0 0 3px rgba(75, 181, 177, 0.15) !important;
  outline: none !important;
}


/* ================================================================
   9. FOKUS-STATES
   ================================================================ */
*:focus-visible {
  outline: 2px solid var(--ah-primary) !important;
  outline-offset: 2px !important;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--ah-primary) !important;
  outline-offset: 2px !important;
}


/* ================================================================
   10. LINKS
   ================================================================ */
a {
  transition: var(--ah-transition) !important;
  text-decoration: none !important;
}

/* Nur Links im Inhaltsbereich einfärben, nicht in Nav/Header */
main a,
.markdown-content a {
  color: var(--ah-primary) !important;
}

main a:hover,
.markdown-content a:hover {
  color: var(--ah-primary-dark) !important;
}


/* ================================================================
   11. FOOTER
   ================================================================ */
footer {
  font-size: 12px !important;
  color: var(--ah-text-secondary) !important;
}


/* ================================================================
   12. SCROLLBAR
   ================================================================ */
::-webkit-scrollbar {
  width: 6px !important;
  height: 6px !important;
}

::-webkit-scrollbar-track {
  background: var(--ah-bg) !important;
  border-radius: 3px !important;
}

::-webkit-scrollbar-thumb {
  background: var(--ah-primary) !important;
  border-radius: 3px !important;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--ah-primary-dark) !important;
}

/* Firefox scrollbar */
* {
  scrollbar-width: thin !important;
  scrollbar-color: var(--ah-primary) var(--ah-bg) !important;
}


/* ================================================================
   13. MODALS / DROPDOWNS / POPUPS
   ================================================================ */

/* Modal-Container */
.bg-white.rounded-lg.shadow-lg,
.bg-white.rounded-lg.shadow-xl {
  border: 1px solid var(--ah-card-border) !important;
  border-radius: 12px !important;
}

/* Dropdown-Menüs */
.bg-white.rounded-lg.shadow-lg.border.border-gray-200 {
  border-color: var(--ah-card-border) !important;
  border-radius: 10px !important;
}


/* ================================================================
   14. TABELLEN
   ================================================================ */
table {
  border-collapse: collapse !important;
  width: 100% !important;
}

th {
  background-color: var(--ah-bg) !important;
  color: var(--ah-text-primary) !important;
  font-weight: 600 !important;
  border-bottom: 2px solid var(--ah-card-border) !important;
}

td {
  border-bottom: 1px solid var(--ah-card-border) !important;
  color: var(--ah-text-primary) !important;
}

tr:hover {
  background-color: rgba(75, 181, 177, 0.04) !important;
}


/* ================================================================
   15. LOADING / SPINNER
   ================================================================ */
.animate-spin {
  border-color: rgba(75, 181, 177, 0.2) !important;
  border-top-color: var(--ah-primary) !important;
}


/* ================================================================
   16. SELECTION
   ================================================================ */
::selection {
  background-color: rgba(75, 181, 177, 0.25) !important;
  color: var(--ah-text-primary) !important;
}


/* ================================================================
   17. AKZENTFARBE (Alerts, Notifications)
   ================================================================ */
.bg-red-50,
.bg-red-100 {
  border-left: 3px solid var(--ah-accent) !important;
}

.bg-blue-50 {
  border-left: 3px solid var(--ah-primary) !important;
}


/* ================================================================
   18. SMOOTH TRANSITIONS
   ================================================================ */
button,
a,
input,
textarea,
select {
  transition: var(--ah-transition) !important;
}


/* ================================================================
   19. LOGIN-SEITE
   Struktur: div.bg-white.rounded-lg.shadow-lg.p-8
   ================================================================ */
.bg-white.rounded-lg.shadow-lg.p-8 {
  border: 1px solid var(--ah-card-border) !important;
  border-radius: 16px !important;
}

/* Login-Icon-Kreis */
.bg-white.rounded-lg.shadow-lg.p-8 .w-20.h-20.rounded-full[style*="background-color"] {
  background: linear-gradient(135deg, #4BB5B1 0%, #3A9E9A 100%) !important;
}

/* Login-Button */
.bg-white.rounded-lg.shadow-lg.p-8 button[type="submit"] {
  background-color: var(--ah-primary) !important;
  border-radius: 8px !important;
}

.bg-white.rounded-lg.shadow-lg.p-8 button[type="submit"]:hover {
  background-color: var(--ah-primary-dark) !important;
}


/* ================================================================
   20. SUCHLEISTE — GRÖßER & PROMINENTER
   Apps-Seite:
     Container: div.flex.flex-col.sm:flex-row.items-stretch.gap-4.mb-4.mx-auto
               mit Breite w-full sm:w-2/3 lg:w-1/3
       > div.relative
         > div.absolute.inset-y-0.left-0.pl-3 (Lupe-Icon)
         > input.block.w-full.pl-10.pr-10.py-2.border.border-gray-300.rounded-lg.text-sm
   Smart-Search (Cmd+K):
     Container: div.rounded-lg.w-full.max-w-xl.mt-20
       > input.w-full.pl-12.pr-12.py-3
   ================================================================ */

/* 20a. Apps-Seiten Such-Container breiter machen */
/* Überschreibt das konfigurierte lg:w-1/3 auf etwas Breiteres */
div.mx-auto.sm\:w-2\/3.lg\:w-1\/3,
div.mx-auto[class*="lg:w-1/3"] {
  width: 100% !important;
  max-width: 600px !important;
}

@media (min-width: 1024px) {
  div.mx-auto.sm\:w-2\/3.lg\:w-1\/3,
  div.mx-auto[class*="lg:w-1/3"] {
    max-width: 700px !important;
  }
}

/* 20b. Apps-Seiten Such-Input — größer, prominenter */
input.pl-10.pr-10.py-2.border-gray-300.rounded-lg.text-sm,
input.block.w-full.pl-10.pr-10.py-2 {
  padding: 14px 44px !important;
  font-size: 16px !important;
  border-radius: 14px !important;
  border: 2px solid var(--ah-card-border) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important;
  background: var(--ah-card-bg) !important;
  transition: var(--ah-transition) !important;
}

input.pl-10.pr-10.py-2.border-gray-300.rounded-lg.text-sm:focus,
input.block.w-full.pl-10.pr-10.py-2:focus {
  border-color: var(--ah-primary) !important;
  box-shadow: 0 4px 20px rgba(75, 181, 177, 0.15), 0 0 0 3px rgba(75, 181, 177, 0.1) !important;
  outline: none !important;
}

/* 20c. Such-Icon neben dem Input — etwas größer */
div.relative > .absolute.inset-y-0.left-0 svg {
  width: 20px !important;
  height: 20px !important;
  color: var(--ah-text-secondary) !important;
}

/* 20d. Smart-Search Modal (Cmd+K) — auch stylen */
.rounded-lg.w-full.max-w-xl {
  max-width: 48rem !important;
}

input.pl-12.pr-12.py-3 {
  padding: 16px 52px !important;
  font-size: 17px !important;
  border-radius: 16px !important;
  border: 2px solid var(--ah-card-border) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
  background: var(--ah-card-bg) !important;
}

input.pl-12.pr-12.py-3:focus {
  border-color: var(--ah-primary) !important;
  box-shadow: 0 4px 20px rgba(75, 181, 177, 0.2), 0 0 0 3px rgba(75, 181, 177, 0.1) !important;
  outline: none !important;
}

/* 20e. Smart-Search Overlay Dropdown */
.rounded-lg.w-full.max-w-xl .absolute.w-full.bg-white {
  border-radius: 12px !important;
  border: 1px solid var(--ah-card-border) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12) !important;
  margin-top: 4px !important;
}


/* ================================================================
   21. CHATGPT-STYLE CHAT-EINGABE
   Struktur: form.flex.space-x-2.items-center
     > textarea.w-full.p-3.border.rounded-lg
     > button type="button" (Senden)
   — Floating Card-Look, zentriert, rund, modern
   ================================================================ */

/* 21a. Chat-Formular als schwebende Karte */
form.flex.space-x-2.items-center {
  background: var(--ah-card-bg) !important;
  border: 1px solid var(--ah-card-border) !important;
  border-radius: 28px !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.02) !important;
  padding: 6px 8px 6px 6px !important;
  margin: 0 auto !important;
  max-width: 800px !important;
  gap: 4px !important;
  transition: var(--ah-transition) !important;
  align-items: flex-end !important;
}

form.flex.space-x-2.items-center:focus-within {
  border-color: var(--ah-primary) !important;
  box-shadow: 0 2px 16px rgba(75, 181, 177, 0.15), 0 0 0 2px rgba(75, 181, 177, 0.1) !important;
}

/* 21b. Textarea im ChatGPT-Stil — randlos, innerhalb der Karte */
form.flex.space-x-2.items-center textarea {
  border: none !important;
  box-shadow: none !important;
  border-radius: 20px !important;
  padding: 12px 16px !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  background: transparent !important;
  resize: none !important;
  min-height: 24px !important;
  max-height: 150px !important;
  overflow-y: auto !important;
}

form.flex.space-x-2.items-center textarea:focus {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  --tw-ring-color: transparent !important;
}

/* 21c. Senden-Button — runder, kompakter, rechts innerhalb der Karte */
form.flex.space-x-2.items-center button[type="button"] {
  border-radius: 50% !important;
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  font-size: 0 !important; /* Text ausblenden */
  transition: var(--ah-transition) !important;
}

/* Icon im Send-Button sichtbar halten */
form.flex.space-x-2.items-center button[type="button"] svg {
  width: 18px !important;
  height: 18px !important;
}

/* Aktiver Send-Button */
form.flex.space-x-2.items-center button.bg-indigo-600,
form.flex.space-x-2.items-center button.bg-red-600 {
  background-color: var(--ah-primary) !important;
  color: white !important;
}

form.flex.space-x-2.items-center button.bg-indigo-600:hover {
  background-color: var(--ah-primary-dark) !important;
  transform: scale(1.05) !important;
}

/* Stop/Cancel-Button rot lassen */
form.flex.space-x-2.items-center button.bg-red-600 {
  background-color: #dc2626 !important;
}

/* Disabled Send-Button */
form.flex.space-x-2.items-center button.bg-gray-300 {
  border-radius: 50% !important;
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  opacity: 0.5 !important;
  font-size: 0 !important;
}

/* 21d. File-Upload Button vor dem Formular — auch rund */
form.flex.space-x-2.items-center ~ button,
form.flex.space-x-2.items-center > button:first-child {
  flex-shrink: 0 !important;
}

/* 21e. Chat-Eingabe Container — etwas Abstand zum Rand */
.h-\[calc\(100vh-4rem\)\] > div:last-child {
  padding: 12px 16px 16px !important;
  background: var(--ah-bg-light) !important;
}


/* ================================================================
   22. MODERNE CHAT-BUBBLES
   Struktur:
     div.chat-widget-message.user (flex-col items-end)
       div.chat-widget-message-content
     div.chat-widget-message.assistant (flex-col items-start)
       div.chat-widget-message-content
   Nachrichten-Container:
     div.flex.gap-3.flex-row-reverse (User)
     div.flex.gap-3.flex-row (Assistant)
       div.max-w-[80%] > div.chat-widget-message
   ================================================================ */

/* 22a. Nachrichten-Container Spacing */
.flex-1.mb-4.p-4.overflow-y-auto.space-y-4 {
  padding: 20px 24px !important;
}

/* 22b. User-Nachricht-Bubble */
.chat-widget-message.user .chat-widget-message-content {
  background: linear-gradient(135deg, var(--ah-primary) 0%, var(--ah-primary-dark) 100%) !important;
  color: #FFFFFF !important;
  border-radius: 20px 20px 4px 20px !important;
  padding: 12px 18px !important;
  box-shadow: 0 2px 8px rgba(75, 181, 177, 0.25) !important;
  border: none !important;
}

.chat-widget-message.user .chat-widget-message-content * {
  color: #FFFFFF !important;
}

/* 22c. Assistant-Nachricht-Bubble */
.chat-widget-message.assistant .chat-widget-message-content {
  background: var(--ah-card-bg) !important;
  color: var(--ah-text-primary) !important;
  border-radius: 20px 20px 20px 4px !important;
  padding: 14px 18px !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06) !important;
  border: 1px solid var(--ah-card-border) !important;
}

/* 22d. Error-Nachrichten */
.chat-widget-message-content.error {
  background: #FEF2F2 !important;
  border: 1px solid #FECACA !important;
  border-radius: 20px 20px 20px 4px !important;
  color: #991B1B !important;
}

/* 22e. Avatar-Icons im Chat abgerundet und konsistent */
.flex.gap-3 > .flex-shrink-0 {
  margin-top: 2px !important;
}

/* 22f. Max-Breite der Bubbles — Assistant-Antworten volle Breite */
/* Assistant-Bubble: kein max-width Limit */
.chat-widget-message.assistant {
  max-width: 100% !important;
}

.flex.gap-3.flex-row > .max-w-\[80\%\] {
  max-width: 100% !important;
}

/* User-Bubble: weiterhin begrenzt (rechts ausgerichtet) */
.flex.gap-3.flex-row-reverse > .max-w-\[80\%\] {
  max-width: 80% !important;
}

/* 22g. Markdown-Content in Bubbles — Abstände */
.chat-widget-message-content .markdown-content {
  line-height: 1.7 !important;
}

.chat-widget-message-content .markdown-content p {
  margin-bottom: 0.5em !important;
}

.chat-widget-message-content .markdown-content p:last-child {
  margin-bottom: 0 !important;
}

/* 22h. Code-Blöcke in Bubbles */
.chat-widget-message-content .code-block-container {
  border-radius: 10px !important;
  margin: 8px 0 !important;
  overflow: hidden !important;
}

/* 22i. Action-Buttons (Copy etc.) unter Nachrichten */
.chat-widget-message > .mt-1 {
  padding: 2px 4px !important;
}

.chat-widget-message > .mt-1 button {
  border-radius: 6px !important;
  padding: 3px 6px !important;
  transition: var(--ah-transition) !important;
}

.chat-widget-message > .mt-1 button:hover {
  background-color: rgba(75, 181, 177, 0.1) !important;
  color: var(--ah-primary-dark) !important;
}

/* 22j. Begrüßungs-/Leere-Chat-Seite */
.flex.flex-col.items-center.justify-center.flex-1 {
  padding: 40px 20px !important;
}

.flex.flex-col.items-center.justify-center.flex-1 .w-20.h-20 {
  width: 72px !important;
  height: 72px !important;
  box-shadow: 0 4px 16px rgba(75, 181, 177, 0.3) !important;
}

/* 22k. Typing/Loading-Indikator */
.chat-widget-message.assistant .animate-pulse {
  background: linear-gradient(90deg, var(--ah-bg) 0%, var(--ah-card-border) 50%, var(--ah-bg) 100%) !important;
  border-radius: 12px !important;
}


/* ================================================================
   23. RESPONSIVE FEINHEITEN
   ================================================================ */

/* Auf mobilen Geräten — Chat-Input kompakter */
@media (max-width: 640px) {
  form.flex.space-x-2.items-center {
    border-radius: 22px !important;
    padding: 4px 6px 4px 4px !important;
  }

  form.flex.space-x-2.items-center textarea {
    padding: 10px 12px !important;
    font-size: 14px !important;
  }

  form.flex.space-x-2.items-center button[type="button"] {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
  }

  /* Bubbles etwas schmaler */
  .flex.gap-3 > .max-w-\[80\%\] {
    max-width: 88% !important;
  }

  /* Search bar volle Breite */
  .rounded-lg.w-full.max-w-xl {
    max-width: 100% !important;
  }
}


/* ================================================================
   24. DARK MODE
   Zwei Mechanismen:
   1. @media (prefers-color-scheme: dark) — folgt dem System
      html:not(.light) verhindert Dark wenn User explizit Light wählt
   2. html.dark — manueller Toggle überschreibt System-Preference
   ================================================================ */

/* --- 24a. Dark Mode CSS-Variablen (System-Preference) --- */
@media (prefers-color-scheme: dark) {
  html:not(.light) {
    --ah-bg: #0F172A;
    --ah-bg-light: #1E293B;
    --ah-card-bg: #1E293B;
    --ah-card-border: #334155;
    --ah-card-shadow: 0 1px 3px rgba(0,0,0,0.3);
    --ah-card-shadow-hover: 0 4px 12px rgba(0,0,0,0.4);
    --ah-text-primary: #F1F5F9;
    --ah-text-secondary: #94A3B8;
    --ah-header-bg: #0F172A;
    --ah-chip-inactive-bg: #334155;
  }
}

/* --- 24b. Dark Mode CSS-Variablen (Manueller Toggle) --- */
html.dark {
  --ah-bg: #0F172A;
  --ah-bg-light: #1E293B;
  --ah-card-bg: #1E293B;
  --ah-card-border: #334155;
  --ah-card-shadow: 0 1px 3px rgba(0,0,0,0.3);
  --ah-card-shadow-hover: 0 4px 12px rgba(0,0,0,0.4);
  --ah-text-primary: #F1F5F9;
  --ah-text-secondary: #94A3B8;
  --ah-header-bg: #0F172A;
  --ah-chip-inactive-bg: #334155;
}

/* --- 24c. Element-Overrides für hardcodierte Tailwind-Klassen ---
   Die meisten Elemente nutzen bereits var(--ah-*) und erben
   automatisch das Dark Theme. Hier nur Overrides für Elemente
   mit festen Farbklassen (bg-white, border-gray-*, text-gray-*). */

/* Gemeinsamer Dark-Selektor: entweder System-Preference oder manuell */
@media (prefers-color-scheme: dark) {
  /* --- Body & Root --- */
  html:not(.light) body { background-color: #0F172A !important; color: #F1F5F9 !important; }
  html:not(.light) #root { background-color: #0F172A !important; }
  html:not(.light) main { background-color: #0F172A !important; }

  /* --- Texte --- */
  html:not(.light) h1, html:not(.light) h2, html:not(.light) h3,
  html:not(.light) h4, html:not(.light) h5, html:not(.light) h6 { color: #F1F5F9 !important; }
  html:not(.light) .text-gray-500 { color: #94A3B8 !important; }
  html:not(.light) .text-gray-600 { color: #94A3B8 !important; }
  html:not(.light) .text-gray-700 { color: #CBD5E1 !important; }
  html:not(.light) .text-gray-800 { color: #E2E8F0 !important; }
  html:not(.light) .text-gray-900 { color: #F1F5F9 !important; }

  /* --- Karten (a.block.h-full) --- */
  html:not(.light) a.block.h-full { background: transparent !important; border-color: #4BB5B1 !important; }
  html:not(.light) a.block.h-full:hover { border-color: #5EC4C0 !important; background: rgba(75, 181, 177, 0.08) !important; }
  html:not(.light) a.block.h-full .px-4.py-2 p { color: #94A3B8 !important; }

  /* --- Karten-Header Streifen --- */
  html:not(.light) a.block.h-full > div > div.flex-shrink-0[style*="background-color"] {
    background: transparent !important; border-color: rgba(75, 181, 177, 0.2) !important;
  }

  /* --- .bg-white Elemente (Modals, Dropdowns, Chat-Header, Login) --- */
  html:not(.light) .bg-white { background-color: #1E293B !important; }
  html:not(.light) .bg-gray-50 { background-color: #0F172A !important; }
  html:not(.light) .bg-gray-100 { background-color: #1E293B !important; }

  /* --- Borders --- */
  html:not(.light) .border-gray-200 { border-color: #334155 !important; }
  html:not(.light) .border-gray-300 { border-color: #334155 !important; }

  /* --- Header (dunkleres Teal im Dark Mode) --- */
  html:not(.light) header { background-color: #0F172A !important; }
  html:not(.light) header[style*="background-color"] { background-color: #0F172A !important; }
  html:not(.light) header.text-white.sticky { background-color: #0F172A !important; }

  /* --- Formulare --- */
  html:not(.light) textarea { background: #1E293B !important; color: #F1F5F9 !important; border-color: #334155 !important; }
  html:not(.light) input { background: #1E293B !important; color: #F1F5F9 !important; border-color: #334155 !important; }
  html:not(.light) select { background: #1E293B !important; color: #F1F5F9 !important; border-color: #334155 !important; }

  /* --- Chat-Oberfläche --- */
  html:not(.light) .bg-white.border-b.border-gray-200.px-4.py-3 {
    background: #1E293B !important; border-color: #334155 !important;
  }
  html:not(.light) form.flex.space-x-2.items-center {
    background: #1E293B !important; border-color: #334155 !important;
  }
  html:not(.light) form.flex.space-x-2.items-center textarea {
    background: transparent !important; color: #F1F5F9 !important;
  }

  /* --- Chat Bubbles --- */
  html:not(.light) .chat-widget-message.assistant .chat-widget-message-content {
    background: #1E293B !important; border-color: #334155 !important; color: #F1F5F9 !important;
  }
  html:not(.light) .chat-widget-message-content.error {
    background: #451a1e !important; border-color: #7f1d1d !important; color: #fca5a5 !important;
  }

  /* --- Markdown in Chat --- */
  html:not(.light) .markdown-content code {
    background-color: #334155 !important; color: #E2E8F0 !important;
  }
  html:not(.light) .code-block-container { border-color: #334155 !important; }
  html:not(.light) .code-block-toolbar { background-color: #0F172A !important; border-color: #334155 !important; }

  /* --- Tabellen --- */
  html:not(.light) th { background-color: #0F172A !important; color: #F1F5F9 !important; border-color: #334155 !important; }
  html:not(.light) td { color: #CBD5E1 !important; border-color: #334155 !important; }
  html:not(.light) tr:hover { background-color: rgba(75, 181, 177, 0.08) !important; }

  /* --- Scrollbar --- */
  html:not(.light) ::-webkit-scrollbar-track { background: #0F172A !important; }

  /* --- Login-Seite --- */
  html:not(.light) .bg-white.rounded-lg.shadow-lg.p-8 {
    background: #1E293B !important; border-color: #334155 !important;
  }

  /* --- Alerts --- */
  html:not(.light) .bg-red-50, html:not(.light) .bg-red-100 {
    background-color: #451a1e !important; border-left-color: var(--ah-accent) !important;
  }
  html:not(.light) .bg-blue-50 {
    background-color: #0c3547 !important; border-left-color: var(--ah-primary) !important;
  }

  /* --- Selection --- */
  html:not(.light) ::selection {
    background-color: rgba(75, 181, 177, 0.35) !important; color: #F1F5F9 !important;
  }

  /* --- Disclaimer --- */
  html:not(.light) .ah-disclaimer { color: #64748B !important; }

  /* --- Sidebar (custom) — now handled in section 25 --- */

  /* --- Suchfeld Dropdown --- */
  html:not(.light) .rounded-lg.w-full.max-w-xl .absolute.w-full.bg-white {
    background: #1E293B !important; border-color: #334155 !important;
  }

  /* --- Chip inactive (Kategorie-Filter) --- */
  html:not(.light) button.rounded-full.text-sm.font-medium:not([style*="background-color"]) {
    background-color: #334155 !important; color: #94A3B8 !important;
  }
  html:not(.light) button.rounded-full.text-sm.font-medium:not([style*="background-color"]):hover {
    background-color: rgba(75, 181, 177, 0.2) !important; color: #4BB5B1 !important;
  }

  /* --- Placeholder Farbe --- */
  html:not(.light) input::placeholder,
  html:not(.light) textarea::placeholder { color: #64748B !important; }

  /* --- App-Typ-Badge --- */
  html:not(.light) a.block.h-full .bg-white\/90.rounded-full {
    background: rgba(30, 41, 59, 0.95) !important; color: #94A3B8 !important;
  }

  /* --- Begrüßungsseite im Chat --- */
  html:not(.light) .flex.flex-col.items-center.justify-center.flex-1 {
    background: #0F172A !important;
  }
}

/* --- 24d. Manueller Toggle: html.dark — gleiche Regeln --- */
html.dark body { background-color: #0F172A !important; color: #F1F5F9 !important; }
html.dark #root { background-color: #0F172A !important; }
html.dark main { background-color: #0F172A !important; }

html.dark h1, html.dark h2, html.dark h3,
html.dark h4, html.dark h5, html.dark h6 { color: #F1F5F9 !important; }
html.dark .text-gray-500 { color: #94A3B8 !important; }
html.dark .text-gray-600 { color: #94A3B8 !important; }
html.dark .text-gray-700 { color: #CBD5E1 !important; }
html.dark .text-gray-800 { color: #E2E8F0 !important; }
html.dark .text-gray-900 { color: #F1F5F9 !important; }

html.dark a.block.h-full { background: transparent !important; border-color: #4BB5B1 !important; }
html.dark a.block.h-full:hover { border-color: #5EC4C0 !important; background: rgba(75, 181, 177, 0.08) !important; }
html.dark a.block.h-full .px-4.py-2 p { color: #94A3B8 !important; }

html.dark a.block.h-full > div > div.flex-shrink-0[style*="background-color"] {
  background: transparent !important; border-color: rgba(75, 181, 177, 0.2) !important;
}

html.dark .bg-white { background-color: #1E293B !important; }
html.dark .bg-gray-50 { background-color: #0F172A !important; }
html.dark .bg-gray-100 { background-color: #1E293B !important; }

html.dark .border-gray-200 { border-color: #334155 !important; }
html.dark .border-gray-300 { border-color: #334155 !important; }

html.dark header { background-color: #0F172A !important; }
html.dark header[style*="background-color"] { background-color: #0F172A !important; }
html.dark header.text-white.sticky { background-color: #0F172A !important; }

html.dark textarea { background: #1E293B !important; color: #F1F5F9 !important; border-color: #334155 !important; }
html.dark input { background: #1E293B !important; color: #F1F5F9 !important; border-color: #334155 !important; }
html.dark select { background: #1E293B !important; color: #F1F5F9 !important; border-color: #334155 !important; }

html.dark .bg-white.border-b.border-gray-200.px-4.py-3 {
  background: #1E293B !important; border-color: #334155 !important;
}
html.dark form.flex.space-x-2.items-center {
  background: #1E293B !important; border-color: #334155 !important;
}
html.dark form.flex.space-x-2.items-center textarea {
  background: transparent !important; color: #F1F5F9 !important;
}

html.dark .chat-widget-message.assistant .chat-widget-message-content {
  background: #1E293B !important; border-color: #334155 !important; color: #F1F5F9 !important;
}
html.dark .chat-widget-message-content.error {
  background: #451a1e !important; border-color: #7f1d1d !important; color: #fca5a5 !important;
}

html.dark .markdown-content code {
  background-color: #334155 !important; color: #E2E8F0 !important;
}
html.dark .code-block-container { border-color: #334155 !important; }
html.dark .code-block-toolbar { background-color: #0F172A !important; border-color: #334155 !important; }

html.dark th { background-color: #0F172A !important; color: #F1F5F9 !important; border-color: #334155 !important; }
html.dark td { color: #CBD5E1 !important; border-color: #334155 !important; }
html.dark tr:hover { background-color: rgba(75, 181, 177, 0.08) !important; }

html.dark ::-webkit-scrollbar-track { background: #0F172A !important; }

html.dark .bg-white.rounded-lg.shadow-lg.p-8 {
  background: #1E293B !important; border-color: #334155 !important;
}

html.dark .bg-red-50, html.dark .bg-red-100 {
  background-color: #451a1e !important; border-left-color: var(--ah-accent) !important;
}
html.dark .bg-blue-50 {
  background-color: #0c3547 !important; border-left-color: var(--ah-primary) !important;
}

html.dark ::selection {
  background-color: rgba(75, 181, 177, 0.35) !important; color: #F1F5F9 !important;
}

html.dark .ah-disclaimer { color: #64748B !important; }

/* --- Sidebar (custom) — now handled in section 25 --- */

html.dark .rounded-lg.w-full.max-w-xl .absolute.w-full.bg-white {
  background: #1E293B !important; border-color: #334155 !important;
}

html.dark button.rounded-full.text-sm.font-medium:not([style*="background-color"]) {
  background-color: #334155 !important; color: #94A3B8 !important;
}
html.dark button.rounded-full.text-sm.font-medium:not([style*="background-color"]):hover {
  background-color: rgba(75, 181, 177, 0.2) !important; color: #4BB5B1 !important;
}

html.dark input::placeholder,
html.dark textarea::placeholder { color: #64748B !important; }

html.dark a.block.h-full .bg-white\/90.rounded-full {
  background: rgba(30, 41, 59, 0.95) !important; color: #94A3B8 !important;
}

html.dark .flex.flex-col.items-center.justify-center.flex-1 {
  background: #0F172A !important;
}

/* --- 24e. Dark Mode Toggle-Button Styles (legacy, now in sidebar) --- */

/* --- 24f. Model Label (über Disclaimer, unter Chat-Input) --- */
.ah-model-label {
  text-align: center;
  font-size: 11px;
  color: #94A3B8;
  padding: 4px 0 0;
  font-family: Inter, sans-serif;
  letter-spacing: 0.2px;
  line-height: 1.3;
}


/* ================================================================
   25. PERSISTENT SLACK-STYLE SIDEBAR
   60px collapsed / 280px expanded, always visible on desktop.
   Mobile: hidden by default, opens as 280px overlay.
   ================================================================ */

/* --- 25a. Sidebar Base --- */
.ah-sidebar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 60px !important;
  z-index: 1001 !important;
  background: var(--ah-card-bg) !important;
  border-right: 1px solid var(--ah-card-border) !important;
  transition: width 0.2s ease !important;
  display: flex !important;
  flex-direction: column !important;
  font-family: Inter, sans-serif !important;
  transform: none !important;
  box-shadow: none !important;
  max-width: none !important;
  overflow: hidden !important;
}

.ah-sidebar.expanded {
  width: 280px !important;
}

/* --- 25b. Main content margin shift --- */
#root {
  margin-left: 60px !important;
  transition: margin-left 0.2s ease !important;
}

body.ah-sidebar-expanded #root {
  margin-left: 280px !important;
}

/* --- 25c. Sidebar Logo --- */
.ah-sidebar-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 0;
  flex-shrink: 0;
  border-bottom: 1px solid var(--ah-card-border);
  min-height: 52px;
}

.ah-sb-logo-collapsed {
  display: flex;
}

.ah-sb-logo-expanded {
  display: none;
  flex-direction: column;
  align-items: flex-start;
  padding: 0 16px;
  width: 100%;
  color: var(--ah-text-primary);
}

.ah-sidebar.expanded .ah-sb-logo-collapsed { display: none; }
.ah-sidebar.expanded .ah-sb-logo-expanded { display: flex; }

/* --- 25d. New Chat Button --- */
.ah-sb-newchat {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 8px;
  padding: 8px;
  border: 1px dashed var(--ah-card-border);
  border-radius: 10px;
  background: none;
  cursor: pointer;
  color: var(--ah-primary);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.15s ease;
  flex-shrink: 0;
  overflow: hidden;
  white-space: nowrap;
}

.ah-sb-newchat:hover {
  background: rgba(75, 181, 177, 0.08);
  border-color: var(--ah-primary);
}

.ah-sb-newchat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ah-sb-newchat-label {
  display: none;
}

.ah-sidebar.expanded .ah-sb-newchat {
  justify-content: flex-start;
  padding: 8px 12px;
}

.ah-sidebar.expanded .ah-sb-newchat-label {
  display: inline;
}

/* --- 25e. Sidebar Search --- */
.ah-sidebar-search {
  padding: 0 8px 8px;
  flex-shrink: 0;
  display: none;
  border-bottom: none !important;
}

.ah-sidebar.expanded .ah-sidebar-search {
  display: block;
}

.ah-sidebar-search input {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--ah-card-border) !important;
  border-radius: 8px;
  font-size: 12px;
  outline: none;
  font-family: inherit;
  box-sizing: border-box;
  background: var(--ah-bg) !important;
  color: var(--ah-text-primary) !important;
}

.ah-sidebar-search input:focus {
  border-color: var(--ah-primary) !important;
  box-shadow: 0 0 0 2px rgba(75, 181, 177, 0.15);
}

/* --- 25f. Sidebar Scrollable Area --- */
.ah-sidebar-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

.ah-sidebar-body {
  padding: 4px 0;
}

/* --- 25g. Sidebar Category Labels --- */
.ah-sidebar-cat {
  padding: 10px 18px 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ah-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Hide text-only elements when collapsed */
.ah-sidebar.collapsed .ah-sb-text {
  display: none !important;
}

.ah-sidebar.collapsed .ah-sidebar-cat {
  display: none !important;
}

/* --- 25h. Sidebar Items (Apps) --- */
.ah-sidebar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 16px;
  text-decoration: none !important;
  color: var(--ah-text-primary) !important;
  font-size: 13px;
  transition: background 0.15s;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
}

.ah-sidebar-item:hover {
  background: rgba(75, 181, 177, 0.08);
}

.ah-sidebar-item-icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #4BB5B1, #3A9E9A);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}

.ah-sidebar-item-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Collapsed: center icons, hide names */
.ah-sidebar.collapsed .ah-sidebar-item {
  justify-content: center;
  padding: 7px 0;
}

.ah-sidebar.collapsed .ah-sidebar-item-name {
  display: none;
}

/* --- 25i. Sidebar Bottom Section --- */
.ah-sidebar-bottom {
  flex-shrink: 0;
  padding: 4px 0 8px;
}

.ah-sb-bottom-divider {
  height: 1px;
  background: var(--ah-card-border);
  margin: 0 12px 4px;
}

.ah-sb-darkmode,
.ah-sb-settings {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 8px 16px;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--ah-text-secondary);
  font-family: inherit;
  font-size: 13px;
  transition: background 0.15s, color 0.15s;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
}

.ah-sb-darkmode:hover,
.ah-sb-settings:hover {
  background: rgba(75, 181, 177, 0.08);
  color: var(--ah-text-primary);
}

.ah-sb-dm-icon,
.ah-sb-settings-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  min-width: 28px;
}

.ah-sb-dm-label,
.ah-sb-settings-label {
  display: none;
  text-align: left;
}

.ah-sidebar.expanded .ah-sb-darkmode,
.ah-sidebar.expanded .ah-sb-settings {
  justify-content: flex-start;
}

.ah-sidebar.expanded .ah-sb-dm-label,
.ah-sidebar.expanded .ah-sb-settings-label {
  display: inline;
}

/* --- 25j. Sidebar Divider --- */
.ah-sidebar-divider {
  height: 1px;
  background: var(--ah-card-border);
  margin: 6px 12px;
}

.ah-sidebar.collapsed .ah-sidebar-divider {
  margin: 6px 8px;
}

/* --- 25k. Empty state --- */
.ah-sidebar-empty {
  padding: 16px;
  color: var(--ah-text-secondary);
  font-size: 12px;
  text-align: center;
}

/* --- 25l. Hamburger Button (in header) --- */
.ah-hamburger {
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  margin-right: 8px;
  color: white;
  display: flex;
  align-items: center;
  line-height: 0;
  z-index: 5;
}

.ah-hamburger:hover {
  opacity: 0.8;
}

.ah-hamburger svg {
  width: 22px;
  height: 22px;
}

/* --- 25m. Backdrop (mobile only) --- */
.ah-sidebar-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

.ah-sidebar-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

/* --- 25n. Mobile: sidebar hidden, no margin --- */
@media (max-width: 767px) {
  .ah-sidebar {
    width: 0 !important;
    transform: translateX(-100%) !important;
    box-shadow: none !important;
  }

  .ah-sidebar.open {
    width: 280px !important;
    transform: translateX(0) !important;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.12) !important;
  }

  #root {
    margin-left: 0 !important;
  }

  body.ah-sidebar-expanded #root {
    margin-left: 0 !important;
  }
}

/* --- 25o. Chat entry items in collapsed sidebar --- */
.ah-sidebar.collapsed .ah-ch-item {
  justify-content: center;
  padding: 7px 0;
}

.ah-sidebar.collapsed .ah-ch-info {
  display: none;
}

.ah-sidebar.collapsed .ah-ch-menu-btn {
  display: none;
}

/* --- 25p. Folder headers in collapsed sidebar --- */
.ah-sidebar.collapsed .ah-fl-header {
  justify-content: center;
  padding: 7px 0;
}

.ah-sidebar.collapsed .ah-fl-arrow {
  display: none;
}

.ah-sidebar.collapsed .ah-fl-name {
  display: none;
}

.ah-sidebar.collapsed .ah-fl-badge {
  display: none;
}

.ah-sidebar.collapsed .ah-fl-actions {
  display: none !important;
}

.ah-sidebar.collapsed .ah-fl-body {
  display: none;
}

.ah-sidebar.collapsed .ah-fl-add {
  display: none;
}

.ah-sidebar.collapsed .ah-ch-empty {
  display: none;
}

/* --- 25q. Dark Mode for new sidebar elements --- */
/* Manual dark mode */
html.dark .ah-sidebar {
  background: #1E293B !important;
  border-right-color: #334155 !important;
}

html.dark .ah-sidebar-logo {
  border-bottom-color: #334155;
}

html.dark .ah-sb-logo-expanded {
  color: #F1F5F9;
}

html.dark .ah-sb-newchat {
  border-color: #475569;
  color: #4BB5B1;
}

html.dark .ah-sb-newchat:hover {
  background: rgba(75, 181, 177, 0.12);
  border-color: #4BB5B1;
}

html.dark .ah-sidebar-search input {
  background: #0F172A !important;
  color: #F1F5F9 !important;
  border-color: #334155 !important;
}

html.dark .ah-sb-bottom-divider {
  background: #334155;
}

html.dark .ah-sb-darkmode,
html.dark .ah-sb-settings {
  color: #94A3B8;
}

html.dark .ah-sb-darkmode:hover,
html.dark .ah-sb-settings:hover {
  background: rgba(75, 181, 177, 0.12);
  color: #F1F5F9;
}

html.dark .ah-sidebar-item {
  color: #F1F5F9 !important;
}

html.dark .ah-sidebar-item:hover {
  background: rgba(75, 181, 177, 0.12);
}

html.dark .ah-sidebar-cat {
  color: #64748B !important;
}

html.dark .ah-sidebar-divider {
  background: #334155;
}

html.dark .ah-sidebar-backdrop {
  background: rgba(0, 0, 0, 0.55);
}

/* --- 25r. Model Label (über Disclaimer) --- */
html.dark .ah-model-label {
  color: #64748B !important;
}

/* System preference dark mode */
@media (prefers-color-scheme: dark) {
  html:not(.light) .ah-sidebar {
    background: #1E293B !important;
    border-right-color: #334155 !important;
  }

  html:not(.light) .ah-sidebar-logo {
    border-bottom-color: #334155;
  }

  html:not(.light) .ah-sb-logo-expanded {
    color: #F1F5F9;
  }

  html:not(.light) .ah-sb-newchat {
    border-color: #475569;
    color: #4BB5B1;
  }

  html:not(.light) .ah-sb-newchat:hover {
    background: rgba(75, 181, 177, 0.12);
    border-color: #4BB5B1;
  }

  html:not(.light) .ah-sidebar-search input {
    background: #0F172A !important;
    color: #F1F5F9 !important;
    border-color: #334155 !important;
  }

  html:not(.light) .ah-sb-bottom-divider {
    background: #334155;
  }

  html:not(.light) .ah-sb-darkmode,
  html:not(.light) .ah-sb-settings {
    color: #94A3B8;
  }

  html:not(.light) .ah-sb-darkmode:hover,
  html:not(.light) .ah-sb-settings:hover {
    background: rgba(75, 181, 177, 0.12);
    color: #F1F5F9;
  }

  html:not(.light) .ah-sidebar-item {
    color: #F1F5F9 !important;
  }

  html:not(.light) .ah-sidebar-item:hover {
    background: rgba(75, 181, 177, 0.12);
  }

  html:not(.light) .ah-sidebar-cat {
    color: #64748B !important;
  }

  html:not(.light) .ah-sidebar-divider {
    background: #334155;
  }

  html:not(.light) .ah-sidebar-backdrop {
    background: rgba(0, 0, 0, 0.55);
  }

  html:not(.light) .ah-model-label {
    color: #64748B !important;
  }
}

/* =========================================================
   26. WEBSUCHE-INDIKATOR
   ========================================================= */
.ah-websearch-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  margin-bottom: 8px;
  border-radius: 6px;
  background: #F1F5F9;
  font-size: 12px;
  color: #64748B;
  font-family: Inter, -apple-system, sans-serif;
  line-height: 1;
}

.ah-ws-label {
  white-space: nowrap;
  font-weight: 500;
}

.ah-ws-favicon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  transition: background 0.15s;
  flex-shrink: 0;
}

.ah-ws-favicon:hover {
  background: rgba(75, 181, 177, 0.15);
}

.ah-ws-favicon img {
  display: block;
  border-radius: 2px;
}

/* Dark mode */
html.dark .ah-websearch-bar {
  background: #1E293B;
  color: #94A3B8;
}

html.dark .ah-ws-favicon:hover {
  background: rgba(75, 181, 177, 0.2);
}

/* =========================================================
   27. EXPORT-BUTTON
   ========================================================= */
.ah-export-wrap {
  display: flex;
  justify-content: flex-end;
  position: relative;
  margin-top: 8px;
  opacity: 0;
  transition: opacity 0.15s;
}

.chat-widget-message:hover .ah-export-wrap {
  opacity: 1;
}

.ah-export-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid #E2E8F0;
  border-radius: 6px;
  background: #fff;
  color: #94A3B8;
  cursor: pointer;
  transition: all 0.15s;
}

.ah-export-btn:hover {
  border-color: #4BB5B1;
  color: #4BB5B1;
  background: #F0FDFA;
}

.ah-export-menu {
  display: none;
  position: absolute;
  bottom: 32px;
  right: 0;
  min-width: 200px;
  background: #fff;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  z-index: 100;
  padding: 4px;
  font-family: Inter, -apple-system, sans-serif;
}

.ah-export-menu.open {
  display: block;
}

.ah-export-menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  border: none;
  background: none;
  font-size: 13px;
  color: #334155;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
}

.ah-export-menu button:hover {
  background: #F0FDFA;
  color: #0F766E;
}

.ah-export-toast {
  position: absolute;
  bottom: 34px;
  right: 34px;
  background: #0F766E;
  color: #fff;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 4px;
  white-space: nowrap;
  animation: ah-toast-in 0.2s ease;
  font-family: Inter, -apple-system, sans-serif;
}

@keyframes ah-toast-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Dark mode */
html.dark .ah-export-btn {
  background: #1E293B;
  border-color: #334155;
  color: #64748B;
}

html.dark .ah-export-btn:hover {
  border-color: #4BB5B1;
  color: #4BB5B1;
  background: rgba(75, 181, 177, 0.1);
}

html.dark .ah-export-menu {
  background: #1E293B;
  border-color: #334155;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}

html.dark .ah-export-menu button {
  color: #CBD5E1;
}

html.dark .ah-export-menu button:hover {
  background: rgba(75, 181, 177, 0.12);
  color: #4BB5B1;
}

/* System preference dark mode */
@media (prefers-color-scheme: dark) {
  html:not(.light) .ah-websearch-bar {
    background: #1E293B;
    color: #94A3B8;
  }

  html:not(.light) .ah-ws-favicon:hover {
    background: rgba(75, 181, 177, 0.2);
  }

  html:not(.light) .ah-export-btn {
    background: #1E293B;
    border-color: #334155;
    color: #64748B;
  }

  html:not(.light) .ah-export-btn:hover {
    border-color: #4BB5B1;
    color: #4BB5B1;
    background: rgba(75, 181, 177, 0.1);
  }

  html:not(.light) .ah-export-menu {
    background: #1E293B;
    border-color: #334155;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  }

  html:not(.light) .ah-export-menu button {
    color: #CBD5E1;
  }

  html:not(.light) .ah-export-menu button:hover {
    background: rgba(75, 181, 177, 0.12);
    color: #4BB5B1;
  }
}