/* Theme-Variablen */
:root {
  --bg:#0b1020; --card:#111833; --fg:#eaf0ff; --muted:#a8b3cf;
  --primary:#4f72ff; --accent:#7aa2ff; --border:#2b3666;
  --success:#38bdf8; --danger:#ff7575;
}
html[data-theme="light"] {
  --bg:#f6f7fb; --card:#ffffff; --fg:#1b1e28; --muted:#56607a;
  --primary:#334ac4; --accent:#5c7cff; --border:#d9dff2;
}

* { box-sizing: border-box; }
body { margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial; background:var(--bg); color:var(--fg); }

/* Header */
.site-header { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--border); position:sticky; top:0; background:var(--bg); z-index:10; }
.header-left { display:flex; align-items:center; gap:12px; }
.logo { width:44px; height:44px; object-fit:contain; border-radius:8px; background:#fff1; }
.brand h1 { margin:0; font-size:20px; }
.brand .tagline { margin:0; color:var(--muted); font-size:12px; }
.header-right { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.subject-row { display:flex; align-items:center; gap:12px; color:var(--muted); }
.subject-row input[type=text]{ width:6rem; padding:6px 8px; border-radius:8px; border:1px solid var(--border); background:var(--card); color:var(--fg); }

/* Einheitliche Buttons */
.primary-btn,
.icon-btn,
.ghost-btn {
  border-radius: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: transform .02s ease, filter .15s ease;
}

.primary-btn {
  background: var(--primary);
  color: #fff;
  border: 1px solid transparent;
  padding: 10px 16px;
  min-height: 44px;               /* harmoniert mit Textarea */
}

.primary-btn:hover { filter: brightness(1.07); }
.primary-btn:active { transform: translateY(1px); }

.icon-btn {
  background: var(--card);
  color: var(--fg);
  border: 1px solid var(--border);
  padding: 10px 12px;
  min-height: 40px;
}

.icon-btn:hover { filter: brightness(1.08); }
.icon-btn:active { transform: translateY(1px); }

.ghost-btn {
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--border);
  padding: 10px 12px;
  min-height: 40px;
}

.ghost-btn:hover { filter: brightness(1.08); }
.ghost-btn:active { transform: translateY(1px); }

/* Bessere Ausrichtung neben Textarea */
.chat-input-row { gap: 10px; }
.chat-input-row .primary-btn { align-self: flex-end; }

/* Fokus-Style (Barrierefreiheit) */
.primary-btn:focus-visible,
.icon-btn:focus-visible,
.ghost-btn:focus-visible,
#msg:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Layout */
.layout { display:grid; grid-template-columns: 1fr 320px; gap:16px; max-width:1100px; margin:16px auto; padding:0 16px; }
@media (max-width: 980px) { .layout { grid-template-columns: 1fr; } }

/* Chatkarte */
.chat-card { background:var(--card); border:1px solid var(--border); border-radius:16px; display:flex; flex-direction:column; min-height:60vh; }
.chat-scroll { padding:12px; overflow:auto; max-height:70vh; }
.chat-input-row { display:flex; gap:8px; align-items:center; border-top:1px solid var(--border); padding:10px; background:var(--card); position:sticky; bottom:0; }
.input-wrap { position:relative; flex:1; }
/* Textarea angenehmer & mehrzeilig */
#msg {
  width:100%;
  resize:none;
  min-height:56px;           /* Start: ~2 Zeilen */
  max-height:200px;          /* wächst, aber begrenzt */
  line-height:1.4;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:#0e1530;
  color:var(--fg);
}
html[data-theme="light"] #msg { background:#f2f4ff; }

/* KI tippt … (animiert) */
.typing { font-size:12px; color:var(--muted); position:absolute; right:10px; bottom:-18px; }
.hidden { display:none; }
.typing::after {
  content:"";
  display:inline-block;
  width:1.2em;
  text-align:left;
  animation: dots 1.2s steps(3,end) infinite;
}
@keyframes dots {
  0% { content:""; }
  33% { content:" ."; }
  66% { content:" .."; }
  100% { content:" ..."; }
}

/* Chatfenster bleibt scrollbar im Fenster (falls noch nicht gesetzt) */
.chat-card { display:flex; flex-direction:column; min-height:60vh; }
.chat-scroll { padding:12px; overflow:auto; max-height:70vh; }
.chat-input-row { display:flex; gap:8px; align-items:center; border-top:1px solid var(--border); padding:10px; background:var(--card); position:sticky; bottom:0; }
.input-wrap { position:relative; flex:1; }


/* Chatblasen */
.bubble { max-width: 78%; margin:8px 0; padding:10px 12px; border-radius:14px; line-height:1.45; position:relative; }
.me  { background:#2b3666; margin-left:auto; }
.ai  { background:#162149; margin-right:auto; }
html[data-theme="light"] .me  { background:#dfe6ff; }
html[data-theme="light"] .ai  { background:#eef0ff; }
.meta { color:var(--muted); font-size:.85em; margin-top:4px; }
.time { position:absolute; bottom:-18px; right:8px; font-size:11px; color:var(--muted); }

/* Quellen-Button */
.meta-actions { margin-top:6px; }
.toggle-src { background:transparent; border:1px solid var(--border); color:var(--fg); padding:4px 8px; border-radius:8px; cursor:pointer; font-size:12px; }
.src-box { margin-top:6px; padding:8px; border:1px dashed var(--border); border-radius:10px; background:#0e1530; color:var(--muted); display:none; white-space:pre-wrap; }
html[data-theme="light"] .src-box { background:#f5f7ff; }

/* Side Panel */
.side-panel { display:flex; flex-direction:column; gap:16px; }
.panel-card { background:var(--card); border:1px solid var(--border); border-radius:16px; padding:12px; }
.panel-card h3 { margin-top:0; }
.settings .block { display:block; margin:8px 0; }

/* Footer */
.site-footer { max-width:1100px; margin:16px auto; padding:8px 16px; color:var(--muted); }