/* AccelMemory — Design-Sprache (Steckbrief: dunkel, Neuronen-Violett).
   Grund #0B0718 · Violett #8B5CF6 (Brand) · Helllila #C4B5FD (weicher Akzent)
   · Text #E9E6F5. Diese Variablen sind die EINE Design-Quelle für App,
   Berichte und spätere Webseite — Farben nie direkt in Regeln schreiben. */

:root {
  --bg: #0b0718;
  --accent: #8b5cf6;
  /* Dunklere Stufe für Flächen mit weißem Text: #8b5cf6 schafft nur 4,23:1
     (WCAG AA verlangt 4,5:1) — Buttons/Chat-Blasen nehmen deshalb diese. */
  --accent-strong: #7c3aed;
  --accent-soft: #c4b5fd;
  --text: #e9e6f5;
  --surface: #150e2b;
  --surface-2: #1e1540;
  --text-muted: #9b93b8;
  --border: #2c2150;
  --ok: #34d399;
  --warn: #fbbf24;
  --danger: #f87171;
  --radius: 12px;
  --shadow: 0 2px 16px rgba(0, 0, 0, 0.5);
  --font: "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }

/* Muss NACH/über den display-Regeln stehen: eigene `display: flex`-Regeln
   (z. B. .row) schlagen sonst das UA-Verhalten von [hidden] und zeigen
   ausgeblendete Zeilen trotzdem an. */
[hidden] { display: none !important; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
}

/* ------------------------------------------------------------------ Kopf */

header.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 24px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 600;
}

.logo img { width: 32px; height: 32px; }

.logo .tagline {
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 400;
}

.spacer { flex: 1; }

/* Sprachumschalter: aktive Sprache trägt .active (setzt app.js). */
.lang-switch { display: flex; gap: 4px; }

.lang-switch button {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 5px 10px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.lang-switch button:hover { color: var(--text); border-color: var(--accent); }

.lang-switch button.active {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
  color: #fff;
}

/* --------------------------------------------------------------- Inhalt */

main {
  max-width: 880px;
  margin: 0 auto;
  padding: 28px 24px 48px;
}

h1 { font-size: 24px; margin: 0 0 4px; }
h2.card-title { font-size: 16px; margin: 0 0 12px; }
p.muted { color: var(--text-muted); margin: 0 0 24px; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 20px;
  margin-bottom: 18px;
}

.row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
}

.row:last-child { border-bottom: 0; }
.row .label { color: var(--text-muted); font-size: 14px; }
.row .value { font-variant-numeric: tabular-nums; }

/* Statuspunkt: Farbe kommt über den Zustands-Modifier. */
.dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 7px;
  background: var(--text-muted);
}

.dot.ok { background: var(--ok); }
.dot.warn { background: var(--warn); }
.dot.bad { background: var(--danger); }

/* -------------------------------------------------------------- Lizenz */

/* flex-wrap: Pflicht für Handy-Breiten — ohne Umbruch schieben die
   Eingabefelder (intrinsische Mindestbreite ~200px) die Karte auf >800px. */
.key-form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

.key-form input {
  flex: 1;
  min-width: 160px;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 12px;
  font: inherit;
  letter-spacing: 0.06em;
}

.key-form input:focus {
  outline: none;
  border-color: var(--accent);
}

/* ------------------------------------------------------------- Buttons */

/* Basis-Stil für JEDEN Button (Sekundär-Stil: dunkle Fläche + Rahmen).
   Fängt auch Buttons ohne Klasse ab — nie wieder das weiße Browser-
   Standard-Grau im dunklen Design. .primary, .link-btn und .lang-switch
   übersteuern gezielt per höherer Spezifität. */
button {
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 18px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

button:hover { border-color: var(--accent); }
button:disabled { opacity: 0.5; cursor: default; }

/* Hauptaktion (eine je Karte): gefülltes Violett. Rahmen in Flächenfarbe,
   damit Primär- und Sekundär-Buttons nebeneinander gleich hoch sind. */
button.primary {
  background: var(--accent-strong);
  color: #fff;
  border: 1px solid var(--accent-strong);
}

button.primary:hover {
  background: var(--accent-soft);
  border-color: var(--accent-soft);
  color: #1a1030;
}

.hint { font-size: 13px; margin: 10px 0 0; min-height: 19px; }
.hint.ok { color: var(--ok); }
.hint.bad { color: var(--danger); }

/* ------------------------------------------------------- Import (S2) */

.key-form input[type="file"] {
  letter-spacing: normal;
  padding: 7px 12px;
}

/* Der native Unterknopf des Datei-Felds ist ein Browser-Bauteil und erbt
   NICHTS von der button-Regel — ohne eigene Regel bleibt er weiß. */
input[type="file"]::file-selector-button {
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 12px;
  margin-right: 10px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

select {
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 10px;
  font: inherit;
}

select:focus { outline: none; border-color: var(--accent); }

/* Selects in Formularzeilen dürfen mitwachsen und umbrechen — sonst quetscht
   die Zeile sie auf ~20px zusammen. Die Mehrfachauswahl (Sammlungen der
   Suite-API) bekommt eine eigene volle Zeile, damit Einträge lesbar sind. */
.key-form select { flex: 1; min-width: 160px; }
.key-form select[multiple] { flex-basis: 100%; min-height: 84px; }

.job-list, .doc-list { list-style: none; margin: 12px 0 0; padding: 0; }

.job-list li, .doc-list li {
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

.job-list li:last-child, .doc-list li:last-child { border-bottom: 0; }

.job-head, .doc-list li {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.job-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.job-state { color: var(--text-muted); font-size: 13px; }

/* Fortschrittsbalken: Breite setzt app.js über style.width (percent). */
.progress {
  height: 5px;
  margin-top: 7px;
  border-radius: 3px;
  background: var(--surface-2);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
  transition: width 0.4s ease;
}

/* Listen-Aktion als Text-Link (Zeilen in Dokumente/Codes/Quellen …):
   neutral helllila; Rot NUR über .danger für Zerstörendes (Löschen,
   Sperren, Abmelden) — sonst schreit jede Zeile Alarm. */
.link-btn {
  background: transparent;
  border: 0;
  color: var(--accent-soft);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  padding: 0;
}

.link-btn:hover { text-decoration: underline; }
.link-btn.danger { color: var(--danger); }

/* --------------------------------------------------------- Chat (S4) */

h3.card-subtitle {
  font-size: 14px;
  color: var(--text-muted);
  margin: 18px 0 4px;
}

.chat-log {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 420px;
  overflow-y: auto;
  padding: 4px 0;
}

.chat-msg {
  max-width: 85%;
  padding: 9px 13px;
  border-radius: var(--radius);
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

.chat-msg.user {
  align-self: flex-end;
  background: var(--accent-strong);
  color: #fff;
}

.chat-msg.assistant {
  align-self: flex-start;
  background: var(--surface-2);
  border: 1px solid var(--border);
}

.chat-msg.pending { color: var(--text-muted); }

.chat-sources {
  align-self: flex-start;
  max-width: 85%;
  font-size: 13px;
  color: var(--text-muted);
  border-left: 2px solid var(--accent);
  padding-left: 10px;
}

.chat-source { padding: 2px 0; }

/* -------------------------------------------------- KI-Anbieter (S4) */

.llm-provider {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.llm-provider:last-child { border-bottom: 0; }

.llm-head {
  flex-basis: 100%;
  font-weight: 600;
  cursor: pointer;
}

.llm-provider input:not([type="checkbox"]) {
  flex: 1;
  min-width: 160px;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 10px;
  font: inherit;
  font-size: 13px;
}

.llm-provider input:not([type="checkbox"]):focus {
  outline: none;
  border-color: var(--accent);
}

.llm-test-result.ok { color: var(--ok); }
.llm-test-result.bad { color: var(--danger); }

/* ---------------------------------------------------------- LAN (S4) */

.qr-img {
  display: block;
  width: 180px;
  height: 180px;
  margin: 10px 0;
  background: #fff;
  border-radius: 8px;
  padding: 6px;
}

/* --------------------------------------------- Wissens-Pflege (S5) */

textarea {
  width: 100%;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  font: inherit;
  font-size: 13px;
  resize: vertical;
  margin: 8px 0;
  box-sizing: border-box;
}

textarea:focus { outline: none; border-color: var(--accent); }

.dropzone {
  border: 2px dashed var(--border);
  border-radius: 10px;
  padding: 18px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  margin-bottom: 10px;
  transition: border-color .15s, background .15s;
}

.dropzone.dragover {
  border-color: var(--accent);
  background: var(--surface-2);
  color: var(--text);
}

#note-dictate.recording {
  color: var(--danger);
  border-color: var(--danger);
}

/* ------------------------------------------------- Handy-Breiten (≤600px) */

@media (max-width: 600px) {
  header.topbar {
    flex-wrap: wrap;
    padding: 12px 16px;
    row-gap: 8px;
  }

  main { padding: 20px 14px 40px; }

  .card { padding: 14px 14px; }

  /* Formularzeilen stapeln: jedes Feld und jeder Button volle Breite,
     damit nichts aus der Karte läuft und Tippziele groß genug sind. */
  .key-form input,
  .key-form select,
  .key-form button {
    flex-basis: 100%;
  }

  .chat-msg { max-width: 95%; }
}