@import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@400;700&display=swap');
/* KI_ana – Chat-Interface CSS (Modern Apple/WhatsApp Style) */
/* chat.css – cozy, Apple/WhatsApp-inspiriert (v2) */
:root{
  --bg:#f6f7fb;
  --card:#ffffff;
  --ink:#1f2937;
  --soft:#6b7280;
  --muted:#9aa3b2;
  --brand1:#7F5AF0; /* lila-blau */
  --brand2:#00d2ff; /* gradient */
  --danger:#ef4444;
  --ok:#16a34a;
  --navH:56px; /* Höhe der globalen Navigationsleiste (für Layout-Berechnung) */
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);
  font:16px/1.45 "Comic Neue", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol";
  color:var(--ink);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

/* Layout: Sidebar + Chat */
.chat-layout{
  width:min(1200px, 96vw);
  margin:var(--navH) auto 8px;
  display:block; /* Sidebar ist ausgeklappt ein Overlay; Standard ist nur die Chat-Spalte mittig */
  height:calc(100vh - var(--navH) - 8px);
}
.sidebar{
  display:none; /* standardmäßig versteckt, wird bei show-sidebar eingeblendet */
  flex-direction:column; gap:10px;
  background:var(--card); border-radius:16px; box-shadow:0 10px 30px rgba(0,0,0,.06);
  overflow:hidden;
}
.sidebar-header{ display:flex; align-items:center; gap:8px; padding:10px; border-bottom:1px solid #f0f1f5 }
.sidebar-header .title{ font-weight:600 }
.sidebar-header #closeSidebar{ display:none }
.sidebar .btn-create{ width:100%; padding:10px 12px; border-radius:10px; border:1px dashed #d9dbe3; background:#fafbff; cursor:pointer }
.conv-list{ list-style:none; margin:0; padding:6px; overflow:auto }
.conv-item{ display:flex; align-items:center; gap:8px; padding:10px; border-radius:10px; cursor:pointer }
.conv-item:hover{ background:#f6f7fb }
.conv-item.active{ background:#eef2ff }
.conv-item .name{ flex:1; min-width:0; white-space:nowrap; text-overflow:ellipsis; overflow:hidden }
.conv-item .actions{ display:flex; gap:6px }
.conv-item .icon{ width:26px; height:26px; display:grid; place-items:center; border-radius:8px; background:#f2f4ff; color:#3b3b7a; font-size:14px }

/* Container (chat main) */
.chat-wrap{
  display:grid; grid-template-rows:auto 1fr auto; gap:18px;
  height:100%; max-width:880px; margin:0 auto; padding:0; /* mittig, angenehmere Lesebreite */
}

/* Header (Avatar + Titel + Settings) */
.chat-header{
  position: sticky; /* bleibt beim Scrollen sichtbar */
  top: 0; 
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:16px; padding:12px 16px;
  background:var(--card); border-radius:16px;
  box-shadow:0 10px 28px rgba(0,0,0,.06);
  z-index:5;
  backdrop-filter:saturate(120%) blur(6px);
  row-gap: 8px; /* Abstand zwischen Top-Bar und Tabs */
}
.brand{display:flex; align-items:center; gap:10px}
.brand .avatar{
  width:36px;height:36px;border-radius:50%;
  object-fit:cover; display:block;
  box-shadow:0 2px 6px rgba(0,0,0,.12)
}
.brand .title{
  display:flex; flex-direction:column;
}
.brand .title b{font-size:16px}
.brand .title span{font-size:12px; color:var(--soft)}
.actions{display:flex; align-items:center; gap:8px}
.btn{
  appearance:none; border:0; cursor:pointer;
  padding:10px 14px; border-radius:12px; font-weight:600; font-size:14px;
  background:#eef2ff; color:#3b3b7a;
}
.btn.primary{
  color:#fff; background:linear-gradient(135deg, var(--brand1), var(--brand2));
  box-shadow:0 6px 16px rgba(108,92,231,.35);
}
.icon-btn{
  width:40px; height:40px; border-radius:12px; display:grid; place-items:center;
  background:#eef2ff; color:#3b3b7a; font-size:18px; font-weight:700;
}
.icon-btn:hover{filter:brightness(1.05)}
.icon-btn:active{transform:translateY(1px)}

/* Chat area */
.chat-area{
  background:var(--card);
  border-radius:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.06);
  padding:22px;
  min-height:0;              /* wichtig damit Flex den Overflow korrekt berechnet */
  overflow:auto;             /* nur der Chat scrollt */
  display:flex;
  flex-direction:column;
  gap:16px;
  scroll-behavior:smooth;
}

/* Bubbles */
/* Bubbles: WhatsApp-like offset + tails, with customizable colors */
.msg{ position:relative; max-width:85%; word-wrap:break-word; white-space:pre-wrap; line-height:1.6; }
.msg .bubble{ padding:.8rem 1.1rem; border-radius:14px; box-shadow:0 1px 3px rgba(0,0,0,.06); }
/* Support legacy 'content' wrapper (pre-bubble) */
.msg .content{ padding:.8rem 1.1rem; border-radius:14px; box-shadow:0 1px 3px rgba(0,0,0,.06); }
.msg.me{ align-self:flex-end; margin-left:22%; }
.msg.ai{ align-self:flex-start; margin-right:22%; }
.msg.system{ align-self:center; }

/* Text formatting inside messages */
.chat-paragraph{ margin: 0.75em 0; line-height:1.65; }
.chat-paragraph:first-child{ margin-top:0; }
.chat-paragraph:last-child{ margin-bottom:0; }
.chat-list{ margin: 0.75em 0; padding-left: 1.5em; line-height:1.8; }
.chat-list li{ margin: 0.4em 0; }
.code-block{ 
  background:#f5f5f7; 
  padding:0.75em; 
  border-radius:8px; 
  margin:0.75em 0; 
  overflow-x:auto;
  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
  font-size:0.9em;
  line-height:1.5;
}
.inline-code{
  background:#f5f5f7;
  padding:0.15em 0.4em;
  border-radius:4px;
  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
  font-size:0.9em;
}
strong{ font-weight:600; }
.chat-link{ color:#007aff; text-decoration:none; }
.chat-link:hover{ text-decoration:underline; }

/* Make user bubble a bit narrower and slightly larger font for elegant centering */
.msg.me{ max-width: 78%; }
.msg.me .bubble, .msg.me .content{ font-size: 1.03rem; }

/* Colors via CSS variables (overridable) */
:root{
  --bubble-user-bg:#e6f7ff; --bubble-user-fg:#111827;
  --bubble-ai-bg:#efeaff;   --bubble-ai-fg:#111827;
}
.msg.me .bubble, .msg.me .content{ background: var(--bubble-user-bg); color: var(--bubble-user-fg); border-bottom-right-radius:6px; text-align:left; }
.msg.ai .bubble, .msg.ai .content{ background: var(--bubble-ai-bg);   color: var(--bubble-ai-fg);   border-bottom-left-radius:6px; text-align:left; }
.msg.system .bubble, .msg.system .content{ background:#f3f4f6; color:#374151 }

/* Tails */
.msg.me::after{
  content:""; position:absolute; right:-6px; bottom:6px;
  width:12px; height:12px; background: var(--bubble-user-bg);
  clip-path: polygon(0 0, 100% 100%, 100% 0);
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.08));
}
.msg.ai::before{
  content:""; position:absolute; left:-6px; bottom:6px;
  width:12px; height:12px; background: var(--bubble-ai-bg);
  clip-path: polygon(0 0, 0 100%, 100% 0);
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.08));
}

/* Inline meta (time, source) */
.meta{margin-top:4px;font-size:12px;color:var(--muted)}
.msg .badge{display:inline-block; padding:2px 8px; border-radius:999px; font-size:11px; background:#eef2ff; color:#3b3b7a}
.meta.badges{display:flex; gap:6px; align-items:center; margin-top:4px}
.badge.fallback{background:#ffe8a1; color:#7a5a00; border:1px solid #ffd56a}
.badge.origin-web{background:#e6f4ff; color:#0b5394; border:1px solid #b3dbff}
.badge.origin-memory{background:#ebffe6; color:#145a32; border:1px solid #c7f3bd}
.badge.origin-mixed{background:#f1e6ff; color:#4a1d96; border:1px solid #d9c6ff}
.meta.delta-note{margin-top:2px; font-size:12px; color:#6b7280}

/* Source badge and viewer link inside bubbles */
.source-badge{
  margin-left:8px; font-size:.9em; cursor:pointer; opacity:.9;
  display:inline-block; padding:2px 8px; border-radius:999px; border:1px solid rgba(0,0,0,.06);
}
.source-badge.memory{ color:#0b5fff; background:#e7f0ff; border-color:#c7dcff } /* Blue */
.source-badge.web{ color:#0f7a3b; background:#e6f7ee; border-color:#bde8cf }    /* Green */
.source-badge.mixed{ color:#4a1d96; background:#f1e6ff; border-color:#d9c6ff }  /* Violet */
.source-badge.unknown{ color:#374151; background:#f5f5f5; border-color:#e5e7eb } /* Gray */
.viewer-link{ display:block; margin-top:4px; font-size:.85em; color:#007bff; text-decoration:none }
.viewer-link:hover{ text-decoration:underline }

/* Highlight row in viewer */
.highlight{ background: #fff8a6 !important; animation: hlFlash 1.6s ease-out 1 }
@keyframes hlFlash { from { box-shadow: 0 0 0px 0 rgba(255,215,0,.8); } to { box-shadow: 0 0 0px 0 rgba(255,215,0,0); } }

/* Quick Replies (Speichern / Vergleichen / Details) */
.qr-row{
  margin-top: 6px;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.qr-row .btn{
  background: #f5f5f7;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: .85rem;
  cursor: pointer;
  transition: background .2s ease;
}
.qr-row .btn:hover{ background:#ececf1; }

/* Delta Viewer (comparison) */
.delta-viewer{ margin-top:10px; padding:10px; border:1px solid #ececf1; border-radius:10px; background:#fafaff }
.delta-viewer .dv-sec{ margin-bottom:8px }
.delta-viewer .dv-title{ font-weight:600; font-size:.9rem; margin-bottom:4px }
.delta-viewer .dv-sec.neu .dv-title{ color:#145a32 }
.delta-viewer .dv-sec.diff .dv-title{ color:#7a5a00 }
.delta-viewer .dv-sec.contra .dv-title{ color:#7a1d1d }
.delta-viewer ul{ margin:0; padding-left:18px }
.delta-viewer li{ margin:2px 0 }

/* Typing indicator */
.msg.typing{display:flex; gap:6px; align-items:center; background:#efeaff; align-self:flex-start}
.dot{width:6px;height:6px;border-radius:50%;background:var(--muted); display:inline-block; animation:blink 1.2s infinite alternate}
.dot:nth-child(2){animation-delay:.2s}.dot:nth-child(3){animation-delay:.4s}
@keyframes blink{from{opacity:.4} to{opacity:1}}

/* Input area */
#input-area{
  display:flex; flex-direction:column; gap:12px; align-items:stretch;
  position:relative; z-index:4;
  background:var(--card);
  padding:12px;
  border-radius:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.06);
}
#msg{
  flex:1; min-height:96px; max-height:220px; resize:vertical;
  padding:14px 16px; border:1px solid #e5e7eb; border-radius:12px; outline:none;
  background:#fff; 
  width:100%;
  font-size:16px; line-height:1.5;
}
#msg:focus{border-color:#c7c9d2; box-shadow:0 0 0 4px rgba(108,92,231,.12)}
#send{
  padding:12px 18px; border:0; border-radius:12px; font-weight:600; font-size:15px; cursor:pointer;
  color:#fff; background:linear-gradient(135deg, var(--brand1), var(--brand2));
  box-shadow:0 6px 16px rgba(108,92,231,.35);
}
#send:hover{filter:brightness(1.05)}
#send:active{transform:translateY(1px)}

/* Buttons & Tools unter dem Textfeld, nicht gequetscht */
.composer-actions{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.composer-actions > * {flex:0 0 auto}
.left-tools{display:flex; align-items:center; gap:12px}
.send-right{display:flex; align-items:center; gap:10px}

/* Toggle Chips (hübschere Schalter) */
.toggle-chips{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.chip{display:inline-flex; align-items:center; gap:8px; padding:8px 10px; border-radius:999px; border:1px solid #e5e7eb; background:#fff; color:#374151; cursor:pointer; user-select:none}
.chip input{appearance:none; width:18px; height:18px; border-radius:6px; border:1px solid #d1d5db; display:inline-block; position:relative}
.chip input:checked{border-color:transparent; background:linear-gradient(135deg, var(--brand1), var(--brand2))}
.chip input:checked::after{content:"✓"; position:absolute; inset:0; display:grid; place-items:center; color:#fff; font-size:12px}
.chip:hover{filter:brightness(1.02)}

/* Collapsible Options */
.chips-collapsible{border:1px solid #eef0f5; border-radius:12px; padding:6px 10px; background:#fff}
.chips-collapsible > summary{cursor:pointer; list-style:none; font-weight:600; color:#3b3b7a; outline:none}
.chips-collapsible[open] > summary{margin-bottom:6px}


.icon-circle{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:#eef2ff;color:#3b3b7a;font-size:18px;box-shadow:0 2px 6px rgba(0,0,0,.06);cursor:pointer}
.icon-circle:active{transform:translateY(1px)}

/* TTS toggle & switches */
.switch{display:inline-flex; align-items:center; gap:8px; font-size:14px; color:var(--soft)}
.switch input{appearance:none; width:42px; height:24px; border-radius:999px; background:#e5e7eb; position:relative; outline:0; cursor:pointer; transition:.2s}
.switch input:after{content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.2); transition:.2s}
.switch input:checked{background:linear-gradient(135deg, var(--brand1), var(--brand2))}
.switch input:checked:after{left:21px}

/* Settings modal */
#settingsModal{position:fixed; inset:0; display:none; place-items:center; z-index:2000}
#settingsModal.open{display:grid}
.modal-backdrop{position:absolute; inset:0; background:rgba(0,0,0,.35); backdrop-filter:saturate(120%) blur(1.5px)}
.modal{
  position:relative; z-index:1; width:min(560px, 92vw);
  background:var(--card); border-radius:16px; padding:18px;
  box-shadow:0 20px 60px rgba(0,0,0,.25);
}
.modal h3{margin:0 0 12px 0}
.modal .row{display:flex; gap:12px; margin:10px 0}
.modal label{font-size:14px; color:var(--soft); display:block; margin-bottom:4px}
.modal select, .modal input[type="text"]{
  width:100%; padding:10px 12px; border:1px solid #e5e7eb; border-radius:10px; font-size:15px; background:#fff
}
.modal .grid{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.modal .actions{display:flex; justify-content:flex-end; gap:8px; margin-top:12px}
.btn.ghost{background:#f3f4f6; color:#374151}
.btn.danger{background:#fee2e2; color:#b91c1c}
.small{font-size:12px; color:var(--muted)}

/* Toast (z.B. Fehler beim Senden) */
.toast{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%);
  background:#111827; color:#fff; padding:10px 14px; border-radius:12px; font-size:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.4); opacity:0; z-index:60;
  transition: opacity .25s ease, transform .25s ease;
}
.toast.show{opacity:1; transform:translate(-50%, -4px)}

/* Navbar small icon button */
.navbar .icon-btn{ 
  background: transparent; border: 0; color: #fff; cursor: pointer; font-size: 16px; 
}

/* Jump-to-bottom floating button */
.jump-bottom{
  position: fixed;
  right: 18px;
  bottom: 96px; /* über dem Composer */
  z-index: 50;
  width: 42px; height: 42px; border-radius: 999px;
  display: grid; place-items: center;
  border: 1px solid rgba(0,0,0,.08);
  color: #fff;
  background: linear-gradient(135deg, var(--brand1), var(--brand2));
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
  cursor: pointer;
  opacity: 0; transform: translateY(12px);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}
.jump-bottom.show{ opacity: 1; transform: translateY(0); pointer-events: auto; }
.jump-bottom:hover{ filter: brightness(1.05); }
.jump-bottom:active{ transform: translateY(1px); }

/* Bottom shadow hint when not at end */
.chat-area{ position: relative; }
.chat-area.not-at-bottom::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 22px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(0,0,0, var(--bottomShade, 0.06)));
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
}

/* Modal subtle animation */
#settingsModal .modal{
  opacity: 0; transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease;
}
#settingsModal.open .modal{ opacity: 1; transform: translateY(0); }

/* Backdrop fade */
#settingsModal .modal-backdrop{
  opacity: 0; transition: opacity .18s ease;
}
#settingsModal.open .modal-backdrop{ opacity: 1; }

/* Scrollbar (dezent) */
.chat-area::-webkit-scrollbar{width:10px}
.chat-area::-webkit-scrollbar-track{background:transparent}
.chat-area::-webkit-scrollbar-thumb{background:#e5e7eb; border-radius:999px}
.chat-area::-webkit-scrollbar-thumb:hover{background:#d1d5db}

/* Responsive */
@media (max-width:820px){
  .chat-wrap{ margin-top:0; height:auto; }
  .brand .title b{font-size:15px}
}

/* Sidebar overlay (auch Desktop) */
body.show-sidebar .sidebar{
  display:block; position:fixed; left:8px; right:auto; width:min(86vw, 340px);
  top: calc(var(--navH) + 8px); bottom: 8px; z-index: 1200;
}
/* Close-Button sichtbar, wenn Sidebar offen */
body.show-sidebar .sidebar-header #closeSidebar{ display:grid }
/* Backdrop deckt den Rest ab */
.sidebar-backdrop{ display:none }
body.show-sidebar .sidebar-backdrop{
  display:block; position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:1100;
}
@media (max-width:560px){
  .chat-wrap{
    padding:0 12px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
    margin-top:56px;
    height:calc(100vh - 56px);
  }
  .brand .title span{display:none}
  #msg{font-size:17px; min-height:100px}
  #send{padding:14px 18px; font-size:16px}
  #input-area{padding:12px}
  .composer-actions{gap:10px}
  .icon-circle{width:52px;height:52px; font-size:20px}
  .chat-area{padding-bottom: 140px}
}

/* iOS momentum scroll safety */
.chat-area{ -webkit-overflow-scrolling: touch; overscroll-behavior: contain }

/* === KI_ana chat.css – Fix: Composer immer sichtbar, keine doppelte Höhe === */

/* Nav-Höhe wie im iframe (60px) */
:root { --navH: 60px; }

/* Vollflächiges Layout: Header (nav) oben, Chatbereich darunter */
body.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Chat-Container füllt den Raum unter der Navi */
.chat-wrap {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  max-width: 960px;
  margin: var(--navH) auto 8px;
  height: calc(100vh - var(--navH));
  padding: 0 16px;
  gap: 12px;
}

/* Nur der Nachrichtenbereich soll scrollen */
.chat-area {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;     /* wichtig für korrektes flex-scroll-Verhalten */
  padding-bottom: 96px !important; /* genug Platz, damit letzte Bubble nicht vom Composer verdeckt wird */
}

/* Composer unten „ankleben“ */
#input-area {
  position: sticky;
  bottom: 0;
  z-index: 10;
  background: var(--card);
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid #eaeaea;
  /* leichte Transparenz/Blur optional hübsch am Handy: */
  /* backdrop-filter: saturate(120%) blur(6px); */
}

/* Header bleibt sichtbar, kollidiert aber nicht mit sticky-Composer */
.chat-header {
  position: sticky;
  top: 0;
  z-index: 5;
}

/* Mobile Tuning */
@media (max-width: 820px) {
  .chat-wrap {
    padding: 0 12px;
    margin-top: var(--navH);
    height: calc(100vh - var(--navH));
  }
  #msg { min-height: 80px; }
}
@media (max-width: 560px) {
  .chat-area { padding-bottom: 120px !important; }
  #send { padding: 14px 18px; font-size: 16px; }
}

/* Ende von chat.css – bei Bedarf modular in Komponenten aufteilen */

/* === Global Theme Support === */
/* Theme Base */
body.theme-light { background: #f9f9f9; color: #222; }
body.theme-dark  { background: #1e1e1e; color: #eee; }

/* Cards / Settings / Chat Bubbles */
body.theme-dark .chat-area { background:#222; color:#eee; }
body.theme-dark .msg.me .bubble, body.theme-dark .msg.me .content { background:#2f3b44; color:#eee; }
body.theme-dark .msg.ai .bubble, body.theme-dark .msg.ai .content { background:#333944; color:#eee; }
body.theme-dark .settings { background: #2a2a2a; color: #ddd; }
body.theme-dark .toast { background: #555; color: #fff; }

/* Warning for missing web sources */
.no-source-warning{
  margin-top:6px;
  padding:6px 10px;
  border-radius:8px;
  background:#fff4cc;
  color:#111827;
  border:1px solid #ffe08a;
  font-size:.85rem;
}
body.theme-dark .no-source-warning{
  background:#4b3f1a;
  color:#fff8e1;
  border-color:#806f2b;
}

/* Navbar container background override if needed */
body.theme-dark #navbar { background: #2b2b2b; }
body.theme-light #navbar { background: #fff; }

/* === KI_ana Navbar (family-friendly) === */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background: linear-gradient(90deg,#fdfbfb,#ebedee);
  border-bottom: 2px solid #ddd;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* Body padding for fixed navbar - ensure content isn't hidden behind navbar */
body:has(#navbar) {
  padding-top: 56px;
}

/* For pages with .container class, use margin instead */
body:has(#navbar) .container {
  margin-top: 56px;
}

.nav-item {
  margin: 0 8px;
  padding: 10px 15px;
  text-decoration: none;
  color: #333;
  font-weight: 600;
  border-radius: 6px;
  transition: all .2s ease;
}
.nav-item:hover {
  color: #000;
  text-decoration: underline;
  background: rgba(255, 235, 205, 0.5);
}
.nav-right { display:flex; align-items:center; }
.dropdown { position: relative; display: inline-block; }
.dropbtn { background: none; border: none; font-weight: 600; cursor: pointer; padding: 10px 12px; border-radius: 8px; }
.dropbtn:hover { background: rgba(255, 235, 205, 0.5); }
.dropdown-content {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 220px;
  background: #ffffff;
  border: 1px solid #ececf1;
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
  padding: 6px;
  z-index: 1000;
}
.dropdown-content a {
  display: block;
  padding: 10px 12px;
  text-decoration: none;
  color: #333;
  border-radius: 8px;
}
.dropdown-content a:hover {
  background: #fff7ea;
}
.dropdown:hover .dropdown-content { display: block; animation: ddFade .18s ease-out; }
#status-dot { margin: 0 8px; font-size: 1.2em; }
#status-dot { margin: 0 8px; font-size: 1.2em; }
#user-badge { margin: 0 8px; font-weight: bold; font-size: 1em; }
#logout-btn { border: none; background: none; cursor: pointer; font-weight: bold; color: #c00; font-size: .9em; margin-left: 8px; }
#logout-btn:hover { color: #f33; }

/* Dark theme adjustments */
body.theme-dark .navbar { background: linear-gradient(90deg,#1e1e1e,#2a2a2a); }
body.theme-dark .nav-item { color: #f0f0f0; }

/* Details button for knowledge link */
.details-button {
  display: inline-block;
  margin-top: 8px;
  padding: 6px 12px;
  font-size: 0.9em;
  border-radius: 8px;
  background: #f0f0f0;
  color: #333;
  text-decoration: none;
  transition: all 0.2s ease;
}
.details-button:hover {
  background: #e0e0e0;
  transform: scale(1.03);
}
html[data-theme="dark"] .details-button {
  background: #333;
  color: #f0f0f0;
}
html[data-theme="dark"] .details-button:hover {
  background: #444;
}

/* Begrüßungsanimation */
.welcome-msg { animation: fadeIn .6s ease-in; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Playful hover: slight scale and shadow */
.nav-item:hover { transform: scale(1.02); text-decoration: underline; }
.navbar .nav-item { transition: transform .12s ease, text-decoration-color .12s ease; }

/* Dropdown fade/slide animation */
@keyframes ddFade {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Nicer typing indicator for AI */
.msg.ai.typing .dots { display:inline-block; margin-left:4px; }
.msg.ai.typing .dots span { animation: blink 1.2s infinite; opacity:0.3; margin:0 1px; }
.msg.ai.typing .dots span:nth-child(1){ animation-delay:0s; }
.msg.ai.typing .dots span:nth-child(2){ animation-delay:.2s; }
.msg.ai.typing .dots span:nth-child(3){ animation-delay:.4s; }
@keyframes blink { 50% { opacity: 1; } }

/* Mobile burger menu */
@media (max-width: 768px){
  .nav-left{
    position: fixed;
    top: 56px; /* below navbar */
    left: 0; right: 0;
    background: rgba(255,255,255,0.98);
    backdrop-filter: blur(4px);
    padding: 12px;
    display: grid; gap: 10px;
    transform: translateY(-120%);
    transition: transform .2s ease;
    border-bottom: 1px solid #eee;
    z-index: 1200;
  }
  body.theme-dark .nav-left{ background: rgba(34,34,34,0.98); border-color:#333; }
  body.nav-open .nav-left{ transform: translateY(0); }
}

/* 🌈 Navbar Dropdown Animations */
.dropdown-content { opacity: 0; transform: translateY(-10px); transition: opacity 0.25s ease, transform 0.25s ease; }
.dropdown:hover .dropdown-content,
.dropdown.open .dropdown-content { opacity: 1; transform: translateY(0); }

/* 📱 Mobile slide-down for Papa/Admin dropdowns */
body.nav-open .dropdown-content { display: block; animation: ddSlide 0.3s ease forwards; }
@keyframes ddSlide { from { opacity:0; transform:translateY(-5px); } to { opacity:1; transform:translateY(0); } }

/* 🧠 Chat source badge tooltips */
.source-badge { position: relative; cursor: help; }
.source-badge[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute; bottom: 125%; left: 50%; transform: translateX(-50%);
  background: var(--bg-tooltip, #333); color: #fff; padding: 4px 8px; border-radius: 6px; font-size: 12px; white-space: nowrap; z-index: 100;
}

/* ⭐ Smoothscroll anchor */
html { scroll-behavior: smooth; }