/* ==========================================================================
   BKM-Palette. Nur diese Volltöne sind erlaubt; alles Weitere wird als
   semantische Variable daraus abgeleitet – keine verstreuten Hex-Werte.
   ========================================================================== */
:root {
  --creme: #f1eadc;
  --creme-2: #f6f2eb;
  --aubergine: #4c2147;
  --rot: #c3023b;
  --sand: #ddd3bc;
  --tuerkis: #1eab9e;
  --maigruen: #ccd500;
  --petrol: #00414c;
  --weiss: #ffffff;

  /* Semantik: Petrol als Grundfläche, Aubergine für die Bedienflächen,
     Türkis als Akzent, Creme als Schrift. */
  --grund: var(--petrol);
  --flaeche: var(--aubergine);
  --glas: rgba(0, 65, 76, 0.62);
  --glas-stark: rgba(0, 65, 76, 0.84);
  --schleier: rgba(76, 33, 71, 0.94);
  --linie: rgba(221, 211, 188, 0.26);
  --text: var(--creme);
  --text-leise: rgba(241, 234, 220, 0.68);
  --akzent: var(--tuerkis);
  --akzent-ink: var(--petrol);
  --signal: var(--rot);
  --gut: var(--maigruen);

  --font: "Inter", "Calibri", Arial, sans-serif;
  --r-card: 16px;
  --r-pill: 999px;
  --shadow: 0 6px 18px rgba(76, 33, 71, 0.14);

  font-size: clamp(15px, 0.55vw + 13px, 19px);
}

* { box-sizing: border-box; }
/* wichtig: .stage/.overlay setzen display, sonst bliebe [hidden] wirkungslos
   und ein unsichtbares Element würde weiter Klicks abfangen */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--grund);
  color: var(--text);
  font-family: var(--font);
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
  overflow: hidden;
}

button { font: inherit; cursor: pointer; touch-action: manipulation; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Bühne: der Avatar füllt sie, alles andere liegt darüber ---------- */
.stage {
  position: relative;
  height: 100dvh;
  width: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  background: var(--grund);
}

.still, .video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.still {
  display: grid;
  place-items: center;
  /* Ohne Bild sitzt der Name im oberen Drittel – dort, wo sonst das Gesicht ist,
     und nicht unter der Antwort-Einblendung. */
  padding-bottom: 26dvh;
  background: radial-gradient(circle at 50% 34%, rgba(30, 171, 158, 0.18), var(--grund) 62%);
}
.still[data-mode="bild"] { padding-bottom: 0; }
.still-image { width: 100%; height: 100%; object-fit: cover; }
.still-name {
  margin: 0;
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--text-leise);
  text-align: center;
  padding: 0 1rem;
}
/* Ohne Standbild kein leerer Rahmen und kein kaputtes Bild-Symbol */
.still[data-mode="leer"] .still-image { display: none; }
.still[data-mode="bild"] .still-name { display: none; }

/* Das Video bleibt im Layout, wird aber erst sichtbar, wenn die Spur anliegt.
   Darunter liegt das Standbild weiter – so ruckelt der Wechsel nicht. */
.video {
  object-fit: cover;
  opacity: 0;
  transition: opacity 500ms ease;
  background: transparent;
}
.video.is-live { opacity: 1; }
/* Rückweg zum Standbild kürzer halten, damit kein schwarzes Bild stehen bleibt */
.video:not(.is-live) { transition: opacity 220ms ease; }

/* ---------- Kopfzeile ---------- */
.topbar {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: clamp(0.6rem, 2vw, 1rem) clamp(0.7rem, 2.5vw, 1.4rem);
}

.status {
  display: inline-flex; align-items: center; gap: 0.45rem;
  background: var(--glas); border: 1px solid var(--linie); border-radius: var(--r-pill);
  padding: 0.35rem 0.85rem; font-size: 0.72rem; color: var(--text);
  backdrop-filter: blur(6px);
}
.status::before { content: ""; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--gut); }
.status[data-state="thinking"]::before, .status[data-state="connecting"]::before { background: var(--sand); animation: blink 1s infinite; }
.status[data-state="listening"]::before { background: var(--maigruen); animation: blink 0.9s infinite; }
.status[data-state="speaking"]::before { background: var(--akzent); animation: blink 0.8s infinite; }
.status[data-state="error"]::before { background: var(--signal); }
@keyframes blink { 50% { opacity: 0.25; } }

.timer {
  font-variant-numeric: tabular-nums; font-size: 0.72rem; color: var(--text-leise);
  background: var(--glas); border-radius: var(--r-pill); padding: 0.35rem 0.7rem;
}
.timer[data-low="true"] { color: var(--creme); background: rgba(195, 2, 59, 0.55); }

/* ---------- Menü: „Neue Frage“ und „Beenden“ unauffällig am Rand ---------- */
.menu { position: relative; margin-left: auto; }
.icon-button {
  width: 2.3rem; height: 2.3rem; display: grid; place-items: center;
  background: var(--glas); border: 1px solid var(--linie); color: var(--text);
  border-radius: 50%; font-size: 1rem; line-height: 1; padding: 0;
}
.icon-button[aria-expanded="true"] { background: var(--flaeche); border-color: var(--akzent); }

.menu-panel {
  position: absolute; top: calc(100% + 0.4rem); right: 0; z-index: 4;
  display: grid; min-width: 11rem;
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--r-card); box-shadow: var(--shadow); overflow: hidden;
}
.menu-item {
  background: transparent; border: 0; color: var(--text); text-align: left;
  padding: 0.75rem 1rem; font-size: 0.82rem; min-height: 2.6rem;
}
.menu-item + .menu-item { border-top: 1px solid var(--linie); }
.menu-item:hover, .menu-item:focus-visible { background: rgba(30, 171, 158, 0.22); outline: none; }

/* ---------- Antwort: Einblendung, die dem Avatar keinen Platz wegnimmt ---------- */
.readout {
  position: relative;
  z-index: 2;
  align-self: end;
  max-height: min(46dvh, 100%);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  /* Unten etwas Luft: Ohne Abstand stößt die Quellenzeile bündig an die
     Eingabeleiste und wirkt angeschnitten. */
  padding: 0 clamp(0.7rem, 2.5vw, 1.4rem) 0.5rem;
  /* Klicks gehen auf die Bühne durch; nur die Textblöcke selbst fangen sie */
  pointer-events: none;
  scrollbar-width: thin;
}
/* margin-top:auto statt justify-content:flex-end – sonst wird der obere Rand
   langer Antworten beim Scrollen abgeschnitten */
.readout-inner { margin-top: auto; display: grid; gap: 0.5rem; }
.readout-inner > * { pointer-events: auto; }

.notice {
  margin: 0; border-radius: var(--r-card); padding: 0.6rem 0.9rem; font-size: 0.76rem;
  background: rgba(30, 171, 158, 0.22); border: 1px solid var(--akzent); color: var(--text);
  backdrop-filter: blur(6px);
}
.notice[data-kind="warn"] { background: rgba(204, 213, 0, 0.18); border-color: var(--maigruen); }

.question { margin: 0; font-size: 0.82rem; color: var(--text-leise); }
.question:not(:empty) {
  background: var(--glas); border-radius: var(--r-pill); padding: 0.4rem 0.9rem;
  justify-self: start; max-width: 100%; backdrop-filter: blur(6px);
}
.question:not(:empty)::before { content: "Frage: "; color: var(--akzent); }

.answer { font-size: 1rem; line-height: 1.55; white-space: pre-wrap; }
.answer:not(:empty) {
  background: var(--glas-stark); border: 1px solid var(--linie); border-radius: var(--r-card);
  padding: 0.8rem 1rem; backdrop-filter: blur(8px); box-shadow: var(--shadow);
}

.sources:not(:empty) { display: grid; gap: 0.4rem; }
.sources h2 {
  font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--text-leise); margin: 0.2rem 0 0;
}
.sources ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.source {
  display: flex; gap: 0.5rem; align-items: center; text-align: left;
  background: var(--glas); border: 1px solid var(--linie); border-radius: var(--r-pill);
  padding: 0.4rem 0.8rem 0.4rem 0.4rem; color: var(--text); max-width: 100%;
  backdrop-filter: blur(6px);
}
.source-index {
  width: 1.4rem; height: 1.4rem; flex: none; border-radius: 50%;
  background: var(--akzent); color: var(--akzent-ink);
  display: grid; place-items: center; font-size: 0.68rem; font-weight: 700;
}
.source-text { display: grid; min-width: 0; }
.source-title { font-size: 0.76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.source-domain { font-size: 0.66rem; color: var(--text-leise); }
.sources-empty { color: var(--text-leise); font-size: 0.72rem; margin: 0; }

/* ---------- Eingabe unten: nur Feld, Mikrofon, Senden ---------- */
.dock {
  position: relative;
  z-index: 3;
  display: grid;
  gap: 0.5rem;
  padding: 0.8rem clamp(0.7rem, 2.5vw, 1.4rem) max(0.7rem, env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--schleier) 42%, rgba(76, 33, 71, 0));
}

.examples { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.example {
  background: var(--glas); border: 1px solid var(--linie); color: var(--text);
  border-radius: var(--r-pill); padding: 0.45rem 0.85rem; font-size: 0.74rem;
  backdrop-filter: blur(6px);
}
.example:hover { border-color: var(--akzent); }

.input-row { display: flex; gap: 0.5rem; align-items: center; }
textarea {
  flex: 1; min-width: 0; resize: none;
  border-radius: var(--r-pill); border: 1px solid var(--linie);
  background: var(--glas-stark); color: var(--text);
  padding: 0.7rem 1.1rem; font: inherit; font-size: 0.92rem; line-height: 1.35;
  height: 2.9rem; backdrop-filter: blur(8px);
}
textarea::placeholder { color: var(--text-leise); }
textarea:focus { outline: 2px solid var(--akzent); outline-offset: 1px; }
textarea:disabled { opacity: 0.6; }

.primary {
  background: var(--akzent); color: var(--akzent-ink); border: 0;
  border-radius: var(--r-pill); padding: 0 1.2rem; height: 2.9rem;
  font-weight: 650; font-size: 0.86rem; white-space: nowrap;
}
.primary:active { transform: translateY(1px); }
.primary:disabled { opacity: 0.5; }

.mic {
  flex: none; display: grid; place-items: center;
  width: 2.9rem; height: 2.9rem; border-radius: 50%;
  background: var(--glas-stark); border: 1px solid var(--linie); color: var(--text);
  user-select: none; -webkit-user-select: none; touch-action: none;
}
/* Mikrofon: Kapsel mit Bügel – ohne Bilddatei, damit nichts nachgeladen wird */
.mic-icon { position: relative; width: 0.55rem; height: 0.9rem; border-radius: var(--r-pill); background: var(--text); }
.mic-icon::after {
  content: ""; position: absolute; left: 50%; bottom: -0.36rem; transform: translateX(-50%);
  width: 0.95rem; height: 0.42rem; border: 0.09rem solid var(--text); border-top: 0;
  border-radius: 0 0 0.5rem 0.5rem;
}
.mic[data-state="recording"] { border-color: var(--signal); background: rgba(195, 2, 59, 0.45); }
.mic[data-state="recording"] .mic-icon { background: var(--creme); animation: blink 0.9s infinite; }
.mic[data-state="recording"] .mic-icon::after { border-color: var(--creme); }
.mic[data-state="working"] { opacity: 0.6; }
.mic:disabled { opacity: 0.5; }

.dock-foot { display: flex; align-items: flex-end; gap: 0.6rem; }
/* KI-Kennzeichnung: dauerhaft sichtbar, nie im Menü und nie hinter dem Bild */
.ai-label {
  margin: 0; flex: 1; min-width: 0;
  color: var(--text-leise); font-size: 0.62rem; line-height: 1.45;
}
.ai-label .dot {
  display: inline-block; width: 0.4rem; height: 0.4rem; border-radius: 50%;
  background: var(--akzent); vertical-align: 0.05em;
}
.counter { flex: none; color: var(--text-leise); font-size: 0.62rem; font-variant-numeric: tabular-nums; }
.counter[data-warn="true"] { color: var(--maigruen); }

/* ---------- Quellen-Overlay mit QR-Code ---------- */
.overlay {
  position: fixed; inset: 0; z-index: 20;
  background: rgba(0, 65, 76, 0.88);
  display: grid; place-items: center; padding: 1.4rem;
}
.overlay-card {
  background: var(--creme-2); color: var(--aubergine);
  border: 1px solid var(--sand); border-radius: var(--r-card);
  box-shadow: var(--shadow);
  padding: 1.3rem; max-width: 22rem; width: 100%;
  display: grid; gap: 0.8rem; justify-items: center; text-align: center;
}
.overlay-card h3 { margin: 0; font-size: 0.95rem; }
.overlay-card p { margin: 0; font-size: 0.72rem; color: var(--petrol); word-break: break-all; }
.overlay-card .hint { color: var(--aubergine); font-weight: 600; }
.overlay-card canvas { background: var(--weiss); border-radius: 12px; padding: 0.5rem; max-width: 100%; height: auto; }
.overlay-card .primary { background: var(--aubergine); color: var(--creme); }

/* Schmale Fenster: gleiche Anordnung, nur enger – kein waagerechtes Scrollen */
@media (max-width: 460px) {
  .readout { max-height: min(42dvh, 100%); }
  .primary { padding: 0 0.9rem; }
  .ai-label { font-size: 0.58rem; }
  /* Beispiele bleiben eine Zeile und schieben die Eingabe nicht nach oben */
  .examples { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .examples::-webkit-scrollbar { display: none; }
  .example { flex: none; }
}

@media (prefers-reduced-motion: reduce) {
  .video { transition: none; }
  .status::before, .mic[data-state="recording"] .mic-icon { animation: none; }
}