/*
 * Kira – Brand CSS
 * Primärfarbe: Cyan #1ab5e0 (193 79% 49%)
 * Dark-Hintergrund: Navy #1a2d3e (209 41% 17%)
 *
 * Hinweis: Chainlit lädt dieses CSS vor dem eigenen Bundle.
 * Deshalb höhere Spezifität (html:root / html.dark) nötig.
 */

/* ── Login-Seite: rechtes Panel ausblenden + Formular zentrieren ── */
/*
 * Stabile Klassen (.kira-login-*) werden via custom.js (MutationObserver)
 * nach React-Hydration gesetzt. Kein fragiles [class*="tailwind-name"] nötig.
 *
 * Falls nach einem Chainlit-Update das JS nicht mehr greift:
 * Browser DevTools → Login-Seite → DOM inspizieren und custom.js anpassen.
 */

/* Rechtes Panel ausblenden (Chainlit-eigenes Logo/Branding) */
.kira-login-wrapper [class*="overflow-hidden"][class*="flex-1"]:not([class*="flex-col"]) {
  display: none !important;
}

/* Äußerer Wrapper: zentrieren */
.kira-login-wrapper {
  justify-content: center !important;
}

/* Linkes Panel (Formular): zentriert und volle Breite */
.kira-login-form {
  align-items: center !important;
  flex: 1 1 100% !important;
  max-width: 480px !important;
}

/* Logo-Element: absolutes Positioning aufheben damit es nicht überlappt */
.kira-login-logo {
  position: static !important;
  display: none !important;
}

/* ── Light Mode ─────────────────────────────────────────────── */
html:root {
  --primary: 193 79% 42%;           /* Cyan, etwas dunkler für Kontrast auf Weiß */
  --primary-foreground: 0 0% 100%;
  --ring: 193 79% 42%;
  --sidebar-primary: 193 79% 42%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-ring: 193 79% 42%;
}

/* ── Dark Mode ──────────────────────────────────────────────── */
html.dark {
  /* Hintergründe – Navy-Blau aus dem Kira-Logo */
  --background: 209 41% 14%;
  --card: 209 41% 14%;  /* gleich wie background → kein Box-Effekt beim Logo */
  --popover: 209 38% 19%;
  --secondary: 209 35% 22%;
  --muted: 209 32% 21%;
  --accent: 209 35% 22%;
  --border: 209 30% 28%;
  --input: 209 38% 20%;

  /* Primärfarbe – Kira-Cyan */
  --primary: 193 79% 49%;
  --primary-foreground: 0 0% 100%;
  --ring: 193 79% 49%;

  /* Sidebar */
  --sidebar-background: 209 45% 11%;
  --sidebar-primary: 193 79% 49%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 209 38% 19%;
  --sidebar-accent-foreground: 0 0% 93%;
  --sidebar-border: 209 30% 20%;
  --sidebar-ring: 193 79% 49%;
}

/* ── Settings-Panel: Nav-Layout ─────────────────────────────── */
/* Volle Breite + Nav via custom.js (MutationObserver) */
#chat-settings-sidebar-content {
  padding: 0 !important;
  height: 100%;
}

/* Flex-Wrapper: Nav links, Inhalt rechts */
.kira-settings-layout {
  display: flex;
  flex: 1 1 0;
  min-height: 0;
}

/* Linke Navigationsleiste */
.kira-settings-nav {
  width: 180px;
  flex-shrink: 0;
  padding: 0.5rem 0.5rem;
  border-right: 1px solid hsl(var(--border));
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.kira-settings-nav-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.5rem 0.75rem;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  color: hsl(var(--foreground));
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.kira-settings-nav-item:hover {
  background: hsl(var(--accent));
}

.kira-settings-nav-item.kira-active {
  background: hsl(var(--accent));
  font-weight: 500;
  color: hsl(var(--primary));
}

/* Rechter Inhaltsbereich */
.kira-settings-pane {
  flex: 1;
  min-width: 0;
  padding: 0 1.5rem;
  overflow-y: auto;
}

/* Auto-resize via custom.js (scrollHeight) – min-height = ~10 Zeilen */
#chat-settings-sidebar-content textarea {
  min-height: 210px !important;
  overflow-y: hidden !important;
  resize: none !important;
}
/* Sheet-Variante (Mobile) */
[role="dialog"] textarea {
  min-height: 210px !important;
  overflow-y: hidden !important;
  resize: none !important;
}

/* ── Message Composer ────────────────────────────────────────── */
/* Chainlit rendert: <div id="message-composer" class="... dark:bg-card ...">
   Im Dark Mode nutzt Chainlit --card für den Composer-Hintergrund.
   --card ist bei uns gleich --background (kein Logo-Box-Effekt).
   Direktes Targeting über die stabile #message-composer ID. */
html.dark #message-composer {
  background-color: hsl(209 38% 20%) !important;
  border: 1px solid hsl(209 30% 28%) !important;
}

/* ── Sidebar Logo ────────────────────────────────────────────── */
/* Wird als erstes Flex-Kind im Content-Bereich eingefügt,
   direkt unterhalb der Icons und oberhalb der Thread-Liste.    */
[data-sidebar="content"]::before {
  content: '';
  display: block;
  flex-shrink: 0;
  background-image: url('/public/logo_text_transparent_whitetext.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  height: 52px;
  margin: 8px 16px 12px;
}