/* Kreativkarussell KI – Oberfläche */

/* ================================================================ Schrift */
/* TT Norms als Standardschrift.
   1. `local(...)` greift die Schrift ab, falls sie auf dem Gerät installiert ist.
   2. `url(...)` lädt die Dateien aus static/fonts/ (siehe static/fonts/README.md).
   3. Fehlen beide, greift automatisch Arial als Fallback (siehe --font).

   Ohne `format()`-Angabe: die abgelegten Dateien tragen die Endung .woff2,
   enthalten aber WOFF1-Daten. Browser erkennen den Container am Dateiinhalt,
   ein `format()`-Hinweis wäre hier also in beiden Fällen unkritisch. Ohne die
   Angabe bleibt die Deklaration aber korrekt, falls die Dateien später gegen
   echtes WOFF2 getauscht werden.

   Es sind nur Regular (400) und Bold (700) vorhanden. Gewicht 500 leitet der
   Browser aus Regular ab, 600 aus Bold – beides ohne künstliche Verzerrung. */
@font-face {
  font-family: "TT Norms";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("TT Norms Pro Regular"), local("TT Norms Regular"),
       url("../fonts/TTNorms-Regular.woff2"),
       url("../fonts/TTNorms-Regular.woff");
}
@font-face {
  font-family: "TT Norms";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local("TT Norms Pro Bold"), local("TT Norms Bold"),
       url("../fonts/TTNorms-Bold.woff2"),
       url("../fonts/TTNorms-Bold.woff");
}

:root {
  --bg: #0f1115;
  --bg-soft: #161923;
  --bg-elev: #1c2030;
  --border: #2a2f42;
  --text: #e8eaf2;
  --text-dim: #9aa1b8;

  /* Markenfarben ------------------------------------------------------ */
  /* Ruhezustand: Buttons und interaktive Elemente, die nicht aktiv sind. */
  --brand: #670229;
  --brand-tint: rgba(103, 2, 41, .45);
  --brand-strong: #7d0332;
  /* Aktiv: ausgewählte Elemente, Hover- und Fokuszustände. */
  --active: #288614;
  --active-tint: rgba(40, 134, 20, .40);
  /* Text auf beiden Markenfarben ist immer weiß. */
  --on-brand: #ffffff;

  /* Alias für Rückwärtskompatibilität innerhalb dieser Datei. */
  --accent: var(--brand);
  --accent-soft: var(--active);
  --accent-ink: var(--on-brand);

  /* Fokus: neutrales Weiß, damit der Rahmen auf dunklem Grund UND auf
     beiden Markenfarben sicher erkennbar bleibt (Kontrast deutlich > 3:1). */
  --focus: #ffffff;
  --focus-halo: 0 0 0 5px var(--active-tint);

  --user-bubble: #263047;
  --danger: #ef4444;
  --ok: #288614;
  --radius: 14px;
  --font: "TT Norms", Arial, Helvetica, "Helvetica Neue", sans-serif;
  --mono: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

/* Das hidden-Attribut muss sich gegen eigene display-Regeln durchsetzen
   (z. B. .btn--send/.btn--stop mit `display: grid`). Ohne diese Zeile
   waren Senden- und Abbrechen-Knopf gleichzeitig sichtbar. */
[hidden] { display: none !important; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

button, input, textarea, select, optgroup {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

::placeholder { color: var(--text-dim); opacity: 1; }
::selection { background: var(--active); color: var(--on-brand); }

.muted { color: var(--text-dim); }

/* ---------------------------------------------------------------- Fokus */
/* Ein einheitlicher, deutlich sichtbarer Fokusrahmen für alles, was per
   Tastatur erreichbar ist. `:focus-visible` zeigt ihn nur bei Tastatur-
   bedienung, nicht bei Mausklick. */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  box-shadow: var(--focus-halo);
}
/* Fallback für Browser ohne :focus-visible */
@supports not selector(:focus-visible) {
  a:focus, button:focus, summary:focus {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
  }
}
summary:focus { outline: none; }
summary:focus-visible { outline: 3px solid var(--focus); }

/* ---------------------------------------------------------------- Links */
a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--active);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  border-radius: 4px;
  transition: background-color .15s, color .15s;
}
a:hover,
a:focus-visible {
  background: var(--active);
  color: var(--on-brand);
  text-decoration-color: var(--on-brand);
}
/* Buttons, die als Link gestylt sind, behalten ihr Button-Aussehen. */
a.btn { text-decoration: none; }

/* ---------------------------------------------------------------- Logo */
/* Passt sich in ein Feld von maximal 40x40 px ein: nie verzerrt, nie
   beschnitten, transparenter PNG-Hintergrund bleibt erhalten. */
.logo {
  display: block;
  width: auto;
  height: auto;
  max-width: 40px;
  max-height: 40px;
  object-fit: contain;
  background: none;
}

/* ---------------------------------------------------------------- Buttons */
/* Ruhezustand = --brand (#670229), Hover/Aktiv = --active (#288614),
   Text in beiden Fällen weiß. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 9px 14px;
  min-height: 40px;
  cursor: pointer;
  background: var(--brand);
  color: var(--on-brand);
  font-weight: 500;
  text-decoration: none;
  transition: background-color .15s, border-color .15s, color .15s, opacity .15s;
}
.btn:hover:not(:disabled),
.btn:active:not(:disabled),
.btn.is-active {
  background: var(--active);
  color: var(--on-brand);
  border-color: transparent;
}
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn--primary {
  background: var(--brand);
  color: var(--on-brand);
  font-weight: 600;
}
.btn--primary:hover:not(:disabled),
.btn--primary:active:not(:disabled) { background: var(--active); }

/* Sekundäre Aktionen: gleiche Farbwelt, nur zurückhaltender gefüllt. */
.btn--ghost {
  background: var(--brand-tint);
  border-color: var(--border);
  color: var(--text);
  font-weight: 400;
}
.btn--ghost:hover:not(:disabled),
.btn--ghost:active:not(:disabled) {
  background: var(--active);
  border-color: var(--active);
  color: var(--on-brand);
}

.btn--block { display: flex; width: 100%; }
.btn--sm { padding: 6px 10px; min-height: 32px; font-size: 13px; border-radius: 8px; }

/* Der Login-Button wird von WTForms als <input type="submit"> ausgegeben.
   Auf Eingabeelementen ist `display: flex` nicht zuverlässig, daher hier
   Block-Darstellung mit zentriertem Text. */
input.btn,
input.btn--block {
  display: block;
  text-align: center;
  -webkit-appearance: none;
  appearance: none;
}

/* ---------------------------------------------------------------- Flash */
.flash-stack {
  position: fixed;
  top: 16px; left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  display: grid;
  gap: 8px;
  width: min(520px, calc(100% - 32px));
}
.flash {
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-elev);
  font-size: 14px;
}
.flash--error { border-color: #7f1d1d; background: #2a1414; }
.flash--info { border-color: #1e3a5f; background: #131e2c; }

/* ---------------------------------------------------------------- Login */
.page-login, .page-error { display: grid; place-items: center; }
.login-wrap, .error-wrap { width: min(420px, calc(100% - 32px)); padding: 32px 0; }

.login-card, .error-card {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 32px 28px;
}
/* Feine Markenkante am oberen Rand der Login-Karte. */
.login-card { border-top: 3px solid var(--brand); }
.login-brand { text-align: center; margin-bottom: 24px; }
.login-brand__logo { margin: 0 auto; }
.login-brand h1 { font-size: 21px; font-weight: 600; margin: 8px 0 2px; }
.login-sub { margin: 0; color: var(--text-dim); font-size: 14px; }

.login-card label { display: block; margin: 14px 0 6px; font-size: 13px; color: var(--text-dim); }
.field {
  width: 100%;
  padding: 11px 13px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  transition: border-color .15s, box-shadow .15s;
}
.field:hover:not(:focus) { border-color: var(--brand-strong); }
/* Eingabefeld im Fokus: grüner Rahmen plus weißer Fokusring. */
.field:focus,
.field:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-color: var(--active);
  box-shadow: var(--focus-halo);
}
.checkbox { display: flex !important; align-items: center; gap: 8px; margin: 16px 0 20px !important; }
.checkbox input { accent-color: var(--active); width: 18px; height: 18px; }
.login-foot { margin: 18px 0 0; text-align: center; font-size: 12px; color: var(--text-dim); }

.error-card { text-align: center; }
.error-code { font-size: 52px; margin: 0; color: var(--text); font-weight: 700; }
.error-card h1 { font-size: 18px; font-weight: 500; margin: 4px 0 22px; }

/* ---------------------------------------------------------------- Layout */
.layout { display: grid; grid-template-columns: 280px 1fr; height: 100vh; }

.sidebar {
  display: flex;
  flex-direction: column;
  background: var(--bg-soft);
  border-right: 1px solid var(--border);
  min-height: 0;
}
.sidebar__top { padding: 16px; border-bottom: 1px solid var(--border); }
.brand { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; }
.brand__logo { flex: 0 0 auto; }
.brand__name { font-weight: 600; font-size: 14px; }
.brand__customer { font-size: 12px; color: var(--text-dim); }

.conv-list { flex: 1; overflow-y: auto; padding: 10px; min-height: 0; }
.conv {
  display: flex;
  align-items: center;
  border-radius: 10px;
  margin-bottom: 2px;
  transition: background-color .15s;
}
/* Chat im Ruhezustand: dezente Markenfläche erst beim Hover, ausgewählter
   Chat dauerhaft grün mit weißem Text. */
.conv:hover { background: var(--active); }
.conv:hover .conv__open { color: var(--on-brand); }
.conv.is-active { background: var(--active); }
.conv.is-active .conv__open { color: var(--on-brand); font-weight: 500; }
.conv__open {
  flex: 1;
  text-align: left;
  background: none;
  border: 0;
  color: var(--text-dim);
  padding: 9px 10px;
  min-height: 38px;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 10px;
  transition: color .15s;
}
.conv__del {
  background: none; border: 0; color: var(--text-dim);
  cursor: pointer; padding: 6px 9px; opacity: 0; border-radius: 8px;
  transition: opacity .15s, background-color .15s, color .15s;
}
.conv:hover .conv__del,
.conv.is-active .conv__del { opacity: 1; color: var(--on-brand); }
.conv__del:focus-visible { opacity: 1; }
.conv__del:hover { background: rgba(0, 0, 0, .3); color: var(--on-brand); }

.sidebar__bottom { border-top: 1px solid var(--border); padding: 12px 16px 16px; }
.ctx summary {
  cursor: pointer; font-size: 13px; color: var(--text-dim);
  padding: 4px 0; border-radius: 6px;
  transition: color .15s;
}
.ctx summary:hover { color: var(--text); }
.ctx[open] summary { color: var(--text); }
.ctx__list { margin: 6px 0 10px; padding-left: 18px; font-size: 12px; color: var(--text-dim); }
.ctx__list li { font-family: var(--mono); word-break: break-all; }
.user-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.user-row__name { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------------------------------------------------------------- Main */
.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }

.topbar {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  background: rgba(15, 17, 21, .85);
}
.topbar__title {
  font-size: 15px; font-weight: 500; margin: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sidebar-toggle { display: none; }

.messages { flex: 1; overflow-y: auto; padding: 24px 20px 8px; scroll-behavior: smooth; }

.empty { max-width: 640px; margin: 8vh auto 0; text-align: center; }
.empty__logo { margin: 0 auto; }
.empty h2 { font-size: 20px; font-weight: 600; margin: 10px 0 6px; }
.empty p { color: var(--text-dim); margin: 0 0 20px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.chip {
  border: 1px solid transparent;
  background: var(--brand);
  color: var(--on-brand);
  border-radius: 999px;
  padding: 9px 16px;
  min-height: 38px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: background-color .15s, border-color .15s;
}
.chip:hover,
.chip:active { background: var(--active); border-color: var(--active); color: var(--on-brand); }

.msg { max-width: 780px; margin: 0 auto 22px; display: flex; gap: 12px; }
.msg__avatar {
  flex: 0 0 40px; height: 40px; width: 40px; border-radius: 8px;
  display: grid; place-items: center; font-size: 18px; margin-top: 2px;
}
.msg--user .msg__avatar { background: var(--user-bubble); }
/* Das Logo bringt seinen eigenen (transparenten) Hintergrund mit. */
.msg--assistant .msg__avatar { background: none; }
.msg__body { min-width: 0; flex: 1; }
.msg__content { overflow-wrap: anywhere; }
.msg__content p { margin: 0 0 10px; }
.msg__content p:last-child { margin-bottom: 0; }
.msg__content ul, .msg__content ol { margin: 0 0 10px; padding-left: 22px; }
.msg__content h1, .msg__content h2, .msg__content h3 { margin: 14px 0 8px; font-size: 16px; font-weight: 600; }
.msg__content code {
  font-family: var(--mono); font-size: 13px;
  background: var(--bg-elev); padding: 1px 5px; border-radius: 5px;
}
.msg__content pre {
  background: var(--bg-elev); border: 1px solid var(--border);
  padding: 12px 14px; border-radius: 10px; overflow-x: auto;
}
.msg__content pre code { background: none; padding: 0; }
.msg__content hr { border: 0; border-top: 1px solid var(--border); margin: 14px 0; }
.msg--user .msg__content {
  background: var(--user-bubble); padding: 10px 14px; border-radius: 12px;
  white-space: pre-wrap;
}
.msg__actions { margin-top: 8px; display: flex; gap: 6px; }
.msg--error .msg__content { color: #fca5a5; border: 1px solid #7f1d1d; padding: 10px 14px; border-radius: 10px; }

/* Schreibmarke während der Antwort: aktiver Zustand, daher grün. */
.cursor {
  display: inline-block; width: 8px; height: 15px;
  background: var(--active); vertical-align: text-bottom;
  animation: blink 1s steps(2, start) infinite;
}
@keyframes blink { to { visibility: hidden; } }

/* ---------------------------------------------------------------- Composer */
.composer { padding: 10px 20px 18px; border-top: 1px solid var(--border); }
.composer__inner {
  max-width: 780px; margin: 0 auto;
  display: flex; align-items: flex-end; gap: 8px;
  background: var(--bg-soft); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 8px 8px 8px 14px;
  transition: border-color .15s, box-shadow .15s;
}
/* Eingabefeld im Fokus: grüne Kante plus weißer Ring am Container. */
.composer__inner:focus-within {
  border-color: var(--active);
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  box-shadow: var(--focus-halo);
}
.composer__input {
  flex: 1; resize: none; border: 0; outline: none; background: none;
  color: var(--text); padding: 8px 0; max-height: 200px; line-height: 1.5;
}
/* Der Ring sitzt am Container, nicht zusätzlich am Textfeld. */
.composer__input:focus-visible { outline: none; box-shadow: none; }
.btn--send, .btn--stop {
  flex: 0 0 auto; width: 38px; height: 38px; min-height: 38px; border-radius: 10px;
  display: grid; place-items: center; padding: 0;
  background: var(--brand); color: var(--on-brand); font-weight: 700;
}
/* Senden und Abbrechen folgen beide der Markenfarbe. Sie sind nie
   gleichzeitig sichtbar (das JavaScript tauscht sie über `hidden`), daher
   unterscheiden die Symbole ➤ und ■ die beiden Zustände. */
.btn--send:hover:not(:disabled),
.btn--send:active:not(:disabled),
.btn--stop:hover:not(:disabled),
.btn--stop:active:not(:disabled) { background: var(--active); }
.composer__hint {
  max-width: 780px; margin: 6px auto 0;
  display: flex; justify-content: space-between; gap: 12px;
  font-size: 11px; color: var(--text-dim);
}

/* ---------------------------------------------------------------- Toast */
.toast {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
  background: var(--bg-elev); border: 1px solid var(--border);
  padding: 10px 16px; border-radius: 10px; z-index: 60; font-size: 14px;
  max-width: calc(100% - 32px);
}
.toast--ok { border-color: var(--ok); }
.toast--error { border-color: var(--danger); }

/* ---------------------------------------------------------------- Mobile */
@media (max-width: 820px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed; inset: 0 auto 0 0; width: min(280px, 85vw); z-index: 40;
    transform: translateX(-100%); transition: transform .2s;
  }
  .sidebar.is-open { transform: translateX(0); box-shadow: 0 0 0 100vw rgba(0,0,0,.5); }
  .sidebar-toggle { display: inline-grid; }

  .messages { padding: 18px 14px 8px; }
  .composer { padding: 8px 14px calc(14px + env(safe-area-inset-bottom)); }
  .composer__hint { font-size: 10px; }
  .empty { margin-top: 4vh; }
  .chips { gap: 6px; }

  /* 16px verhindert das automatische Zoomen von iOS beim Fokus. */
  .field, .composer__input { font-size: 16px; }
  /* Der Platzhaltertext bricht auf schmalen Displays auf zwei Zeilen um.
     Ohne diese Mindesthöhe würde die zweite Zeile angeschnitten. */
  .composer__input { min-height: 64px; }
}

/* Auf Touch-Geräten gibt es kein Hover: Löschsymbol dauerhaft zeigen. */
@media (hover: none) {
  .conv__del { opacity: 1; }
  .conv:hover { background: none; }
  .conv:hover .conv__open { color: var(--text-dim); }
  .conv.is-active { background: var(--active); }
  .conv.is-active .conv__open { color: var(--on-brand); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .messages { scroll-behavior: auto; }
}

/* Erhöhter Kontrast: Fokusrahmen zusätzlich verstärken. */
@media (prefers-contrast: more) {
  :focus-visible { outline-width: 4px; }
  .btn { border-color: var(--on-brand); }
}