/* Farben, Farbmodi, Grundgerüst und Dialog unverändert aus SeKoRAG (seko_rag/static/app.css),
   dort wiederum aus dem SeKo-Mailer. Änderungen an der Palette in allen dreien gleich machen. */

/* Farben: Corporate Design der RWTH Aachen, Originalwerte der Hausfarben.
 *
 * Zwei Hausfarben sind als Textfarbe unbrauchbar: Grün 100 kommt auf Weiß nur auf
 * 2,9:1, Orange 100 auf 2,0:1 – beide weit unter den 4,5:1, die lesbarer Text braucht.
 * Statt sie abzudunkeln und damit die Palette zu verlassen, dienen sie hier als Fläche
 * und werden mit einer dunklen Hausfarbe gepaart: Petrol auf Grün für Erfolg, Schwarz
 * auf Orange für Warnungen.
 *
 * Die Regeln weiter unten benutzen nur die Bedeutungsfarben (--card, --accent, --err-soft …),
 * nie eine Hausfarbe oder #fff direkt. Die vier Farbmodi setzen dann nur diese Variablen:
 * data-mode="dark" am <html> für dunkel, data-accent="pink" für RWTH Magenta statt Blau.
 * Gesetzt werden beide von theme.js, bevor die Seite gezeichnet wird.
 */
:root {
  --rwth-blau-100:#00549F; --rwth-blau-25:#C7DDF2; --rwth-blau-10:#E8F1FA;
  --rwth-schwarz-100:#000000; --rwth-schwarz-75:#646567; --rwth-schwarz-25:#CFD1D2; --rwth-schwarz-10:#ECEDED;
  --rwth-petrol-100:#006165;
  --rwth-gruen-25:#DDEBCE; --rwth-gruen-10:#F2F7EC;
  --rwth-orange-100:#F6A800; --rwth-orange-25:#FEEAC9; --rwth-orange-10:#FFF7EA;
  --rwth-rot-100:#CC071E; --rwth-rot-10:#FAEBE3;
  --rwth-magenta-100:#E30066;

  /* Flächen und Text */
  --bg:var(--rwth-schwarz-10);       /* Seite */
  --card:#fff;                       /* Karten, Kopfzeile, Eingabefelder */
  --sunken:var(--rwth-schwarz-10);   /* vertieft in einer Karte: Vorschau, Zitat, Codeblock */
  --text:var(--rwth-schwarz-100);
  --muted:var(--rwth-schwarz-75);
  --line:var(--rwth-schwarz-25);
  /* Akzent: --accent als Fläche (Knöpfe), --accent-text für Links und Schrift */
  --accent:var(--rwth-blau-100);
  --accent-text:var(--rwth-blau-100);
  --on-accent:#fff;
  --accent-soft:var(--rwth-blau-10);
  --accent-soft-2:var(--rwth-blau-25);
  --accent-shadow:rgba(0,84,159,.15);
  /* Bedeutungsfarben: bleiben in jedem Akzent dieselben, Fehler ist nie pink */
  --ok:var(--rwth-petrol-100);
  --ok-soft:var(--rwth-gruen-10);
  --ok-badge:var(--rwth-gruen-25);
  --err:var(--rwth-rot-100);
  --err-soft:var(--rwth-rot-10);
  --err-solid:var(--rwth-rot-100);
  --on-err:#fff;
  --warn-soft:var(--rwth-orange-10);
  --warn-badge:var(--rwth-orange-25);
  --neutral-badge:var(--rwth-schwarz-25);
  --backdrop:rgba(0,0,0,.35);
}
/* Pink: RWTH Magenta als Akzent. Weiß auf Magenta 4,6:1; als Schrift das etwas dunklere
   #C4005A (5,8:1 auf Weiß), weil Magenta 100 für kleine Schrift knapp wäre. */
:root[data-accent="pink"] {
  --bg:#FCEEF4; --sunken:#FCEEF4; --text:#2A0F1C; --muted:#8A5570; --line:#F2CFDF;
  --accent:var(--rwth-magenta-100); --accent-text:#C4005A;
  --accent-soft:#FDE3EE; --accent-soft-2:#F7B9D3; --accent-shadow:rgba(227,0,102,.15);
}
/* Dunkel. Das RWTH-Blau 100 wäre auf dunklem Grund kaum zu sehen: als Fläche ein helleres
   Blau (#3372B0, Weiß darauf 5,0:1), als Schrift Blau 50 (#8EBAE5). Die Bedeutungsfarben
   bekommen eigene Stufen, damit Grün, Rot und Orange auch im Dunkeln lesbar bleiben. */
:root[data-mode="dark"] {
  color-scheme:dark;  /* Bildlaufleisten, Datumsauswahl usw. ebenfalls dunkel */
  --bg:#0E1117; --card:#161B22; --sunken:#0E1117; --text:#E6EDF3; --muted:#8B949E; --line:#2A313C;
  --accent:#3372B0; --accent-text:#8EBAE5;
  --accent-soft:#16304D; --accent-soft-2:#24476E; --accent-shadow:rgba(0,0,0,.4);
  --ok:#7FD1B9; --ok-soft:#10302A; --ok-badge:#12352F;
  --err:#F28B82; --err-soft:#3A1518; --err-solid:var(--rwth-rot-100);
  --warn-soft:#33260F; --warn-badge:#4A3510;
  --neutral-badge:#2A313C;
}
:root[data-mode="dark"][data-accent="pink"] {
  --bg:#170C12; --card:#221119; --sunken:#170C12; --text:#F5E6EE; --muted:#B8909F; --line:#3D2331;
  --accent:var(--rwth-magenta-100); --accent-text:#FF5FA2;
  --accent-soft:#3F1128; --accent-soft-2:#5E1A3C;
}

/* --- Grundgerüst, wie im SeKo-Mailer ------------------------------------------------------- */
* { box-sizing:border-box; }
/* hidden gewinnt immer – sonst hebt jede Klasse mit display:flex es auf (so bei der leeren
   Bildvorschau über dem Eingabefeld, 28.09.2026) */
[hidden] { display:none !important; }
body { margin:0; font:15px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif; background:var(--bg); color:var(--text); }
header { background:var(--card); border-bottom:1px solid var(--line); padding:10px 24px; display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
header h1 { font-size:18px; margin:0; line-height:0; }
header h1 a { text-decoration:none; color:inherit; }
/* Orange nur als Linie des Symbols, nie als Textfarbe: Orange 100 kommt auf Weiß nur auf 2,0:1 */
header h1 a.brand { display:flex; align-items:center; gap:8px; line-height:1; }
.brand-mark { width:30px; height:30px; stroke:var(--rwth-orange-100); flex:none; }
.brand span { font-size:20px; font-weight:700; letter-spacing:-.01em; color:var(--text); }
header nav { display:flex; gap:4px; }
header nav a { padding:6px 10px; border-radius:6px; text-decoration:none; color:var(--muted); font-weight:600; white-space:nowrap; }
header nav a:hover { color:var(--text); background:var(--sunken); }
header nav a.active { color:var(--accent-text); background:var(--accent-soft); }
header nav a.logout { margin-left:8px; font-weight:500; }
header .spacer { flex:1; }
header .status { font-size:13px; color:var(--muted); }
main { max-width:960px; margin:24px auto; padding:0 24px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:20px; margin-bottom:20px; }
h2 { margin:0 0 12px; font-size:17px; }
label { display:block; font-size:13px; color:var(--muted); margin:10px 0 4px; }
input[type=text], input[type=password], input[type=search], input[type=url], input[type=number], select, textarea { width:100%; padding:8px 10px; border:1px solid var(--line); border-radius:6px; font:inherit; background:var(--card); color:var(--text); }
button { padding:8px 14px; border:1px solid var(--accent); background:var(--accent); color:var(--on-accent); border-radius:6px; font:inherit; cursor:pointer; }
button.secondary { background:var(--card); color:var(--accent-text); }
button:disabled { opacity:.5; cursor:default; }
.actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; align-items:center; }
.msg { padding:10px 14px; border-radius:6px; margin:10px 0; font-size:14px; }
.msg.err { background:var(--err-soft); color:var(--err); }
.msg.ok { background:var(--ok-soft); color:var(--ok); }
.msg.warn { background:var(--warn-soft); color:var(--text); }
.hint { font-size:13px; color:var(--muted); }
a { color:var(--accent-text); }
.card-login { max-width:420px; margin:60px auto; }
.card-login p.hint { margin:0 0 6px; }

/* Farbmodi: zwei unabhängige Schalter oben rechts. Aus: Fläche der Karte, Symbol in der
   Akzentfarbe. An: ganz in der Akzentfarbe, Symbol weiß. */
.modes { display:flex; gap:8px; }
.mode-toggle { width:38px; height:38px; padding:0; border-radius:9px; border:1px solid var(--line); background:var(--card); color:var(--accent-text); display:inline-flex; align-items:center; justify-content:center; }
.mode-toggle svg { width:18px; height:18px; fill:currentColor; }
.mode-toggle[aria-pressed="true"] { background:var(--accent); border-color:var(--accent); color:var(--on-accent); }

/* Dialog statt confirm() – wie im SeKo-Mailer */
dialog.dlg { border:0; border-radius:10px; padding:24px 28px; width:min(480px, calc(100vw - 32px)); box-shadow:0 12px 40px var(--accent-shadow); background:var(--card); color:var(--text); font:inherit; }
dialog.dlg::backdrop { background:var(--backdrop); }
dialog.dlg h2 { margin:0 0 10px; font-size:17px; }
dialog.dlg p { margin:0 0 8px; font-size:14px; }
.dlg-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:18px; }

/* --- Chat: Aufbau wie RitchyOSS in SeKoRAG ---------------------------------------------------- */
main { max-width:1240px; }
.chat { display:grid; grid-template-columns:250px minmax(0,1fr); gap:20px; align-items:start; }
.chat-side { padding:12px; position:sticky; top:16px; max-height:calc(100vh - 110px); overflow:auto; }
.new-chat { width:100%; margin-bottom:10px; font-weight:600; }
.chat-item { display:flex; align-items:flex-start; gap:4px; border-radius:6px; }
.chat-item:hover, .chat-item.active { background:var(--accent-soft); }
.chat-item a { flex:1; min-width:0; display:block; padding:7px 8px; text-decoration:none; color:var(--text); }
.chat-title { display:block; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chat-item.active .chat-title { color:var(--accent-text); font-weight:600; }
.chat-meta { display:block; font-size:12px; color:var(--muted); }
.chat-delete { background:none; border:0; color:var(--muted); padding:6px 8px; font-size:16px; line-height:1; visibility:hidden; }
.chat-item:hover .chat-delete, .chat-delete:focus { visibility:visible; }
.chat-delete:hover { color:var(--err); }
.side-note { margin:12px 4px 2px; font-size:12px; }

.chat-main { min-width:0; }
.messages { display:flex; flex-direction:column; gap:14px; padding-bottom:10px; min-height:50vh; }
.msg-row { display:flex; gap:10px; align-items:flex-start; }
.msg-row.user { justify-content:flex-end; }
.bubble { border-radius:12px; padding:12px 16px; max-width:100%; }
.bubble.user { background:var(--accent); color:var(--on-accent); max-width:75%; white-space:pre-wrap; overflow-wrap:anywhere; border-bottom-right-radius:4px; }
.bubble.assistant { background:var(--card); border:1px solid var(--line); flex:1; min-width:0; border-top-left-radius:4px; }
.avatar { width:36px; height:36px; flex:none; border-radius:50%; background:var(--card); border:1px solid var(--line); display:inline-flex; align-items:center; justify-content:center; }
.avatar svg { width:20px; height:20px; stroke:var(--rwth-orange-100); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.answer-text { overflow-wrap:anywhere; }
.answer-text > :first-child { margin-top:0; }
.answer-text > :last-child { margin-bottom:0; }
.answer-text p { margin:0 0 10px; }
.answer-text ol, .answer-text ul { margin:0 0 10px; padding-left:24px; }
.answer-text li { margin:3px 0; }
.answer-text li p { margin:4px 0; }
.answer-text hr { border:0; border-top:1px solid var(--line); margin:14px 0; }
.answer-text code { background:var(--sunken); padding:1px 4px; border-radius:3px; font-size:13px; }
/* Links hinter einer Mail: klein, damit sie in Tabellen nicht stören */
.mail-links { display:inline-flex; gap:4px; margin-left:4px; vertical-align:1px; white-space:nowrap; }
.mail-link { font-size:11px; font-weight:600; line-height:1; padding:3px 6px; border-radius:999px; text-decoration:none;
  background:var(--accent-soft); color:var(--accent-text); border:1px solid var(--accent-soft-2); }
.mail-link:hover { background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
.md-table-wrap { overflow-x:auto; margin:0 0 12px; border:1px solid var(--line); border-radius:6px; }
.md-table { width:100%; border-collapse:collapse; font-size:14px; }
.md-table th, .md-table td { text-align:left; padding:6px 10px; border-bottom:1px solid var(--line); vertical-align:top; }
.md-table th { background:var(--sunken); color:var(--muted); font-weight:600; font-size:13px; white-space:nowrap; }
.md-table tr:last-child td { border-bottom:0; }
.md-table td { overflow-wrap:normal; min-width:4em; }
.md-code { background:var(--sunken); padding:12px; border-radius:6px; overflow:auto; font-size:13px; margin:0 0 10px; }
.md-code code { background:none; padding:0; }
.answer-status:empty { display:none; }
.thinking { display:inline-block; font-size:13px; color:var(--muted); margin-bottom:6px; }
.thinking::after { content:""; display:inline-block; width:6px; height:6px; margin-left:8px; border-radius:50%; background:var(--accent); animation:pulse 1s infinite ease-in-out; vertical-align:middle; }
@keyframes pulse { 0%,100% { opacity:.25; } 50% { opacity:1; } }
@media (prefers-reduced-motion: reduce) { .thinking::after, .step.running .step-dot { animation:none; } }

/* Tool-Schritte: was das Modell im Postfach nachgesehen hat, über der Antwort */
.steps { list-style:none; margin:0 0 10px; padding:0; display:flex; flex-direction:column; gap:4px; font-size:13px; }
.steps:empty { display:none; }
.step { display:flex; align-items:baseline; gap:8px; color:var(--muted); }
.step-dot { flex:none; width:8px; height:8px; border-radius:50%; background:var(--ok); transform:translateY(-1px); }
.step.running .step-dot { background:var(--accent); animation:pulse 1s infinite ease-in-out; }
.step.failed .step-dot { background:var(--err); }
.step-label { color:var(--text); font-weight:600; }
.step-detail { overflow-wrap:anywhere; }
.step-result { white-space:nowrap; }
.step.failed .step-result { color:var(--err); white-space:normal; }

/* Entwurf zum Bestätigen: gestrichelt, solange er nur ein Vorschlag ist */
.drafts:empty { display:none; }
.draft { margin:12px 0 0; padding:12px 14px; border:1px dashed var(--accent); border-radius:8px; background:var(--accent-soft); display:flex; flex-direction:column; gap:8px; }
.draft.saved { border-style:solid; border-color:var(--line); background:var(--sunken); }
.draft-head { font-size:14px; }
.draft-row { display:grid; grid-template-columns:70px minmax(0,1fr); align-items:center; gap:8px; margin:0; font-size:13px; color:var(--muted); }
.draft input, .draft textarea { font-size:14px; padding:6px 8px; }
.draft textarea { resize:vertical; min-height:120px; line-height:1.45; }
.draft input:disabled, .draft textarea:disabled { opacity:1; color:var(--text); background:var(--card); }
.draft-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; }
.draft .msg { margin:0; }
.answer-tools { display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin-top:12px; padding-top:10px; border-top:1px solid var(--line); }
.answer-tools:empty { display:none; }
.trace-summary { font-size:12px; color:var(--muted); }
details.more { font-size:14px; flex-basis:100%; }
details.more > summary { cursor:pointer; color:var(--accent-text); font-size:13px; list-style:none; }
details.more > summary::-webkit-details-marker { display:none; }
details.more > summary::before { content:"▸ "; }
details.more[open] > summary::before { content:"▾ "; }
.trace-body { margin-top:8px; font-size:14px; }
.trace-body h4 { margin:14px 0 6px; font-size:13px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.trace-body h4:first-child { margin-top:4px; }
.trace-body .kv { display:grid; grid-template-columns:140px minmax(0,1fr); gap:3px 12px; overflow-wrap:anywhere; }
.trace-body .kv b { color:var(--muted); font-weight:600; }
.fulltext { white-space:pre-wrap; background:var(--sunken); padding:10px 12px; border-radius:6px; font-size:13px; margin:4px 0 0; max-height:320px; overflow:auto; overflow-wrap:anywhere; }
table.calls { width:100%; border-collapse:collapse; font-size:13px; }
table.calls th, table.calls td { text-align:left; padding:5px 6px; border-bottom:1px solid var(--line); vertical-align:top; }
table.calls th { color:var(--muted); font-weight:600; }
table.calls td.num { text-align:right; white-space:nowrap; }
table.calls td code { font-size:12px; overflow-wrap:anywhere; }

.composer { position:sticky; bottom:0; padding:12px 0 12px; background:var(--bg); }
.composer-row { display:flex; gap:8px; align-items:flex-end; }
.composer textarea { flex:1; resize:none; min-height:46px; max-height:240px; padding:11px 14px; border-radius:10px; font-size:15px; line-height:1.4; }
.composer-row > button { height:46px; padding:0 20px; border-radius:10px; font-weight:600; }
.composer-foot { display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; margin-top:8px; font-size:13px; color:var(--muted); }
.composer-foot label { display:inline-flex; align-items:center; gap:6px; margin:0; font-size:13px; }
.composer-foot select { width:auto; max-width:320px; padding:4px 8px; font-size:13px; }

.welcome { text-align:center; padding:40px 10px 20px; color:var(--muted); }
.welcome h2 { color:var(--text); font-size:22px; margin:6px 0 8px; }
.welcome p { margin:6px auto; max-width:560px; }
.welcome-mark { width:64px; height:64px; stroke:var(--rwth-orange-100); fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.examples { margin-top:18px; font-size:14px; display:flex; flex-wrap:wrap; gap:6px; align-items:center; justify-content:center; }
.example { background:var(--sunken); color:var(--text); border:1px solid var(--line); border-radius:999px; padding:3px 10px; font-size:13px; }
.example:hover { border-color:var(--accent); color:var(--accent-text); }
.result-meta { font-size:13px; color:var(--muted); margin:0 2px 10px; }

@media (max-width:800px) {
  .chat { grid-template-columns:1fr; }
  .chat-side { position:static; max-height:220px; }
  .chat-delete { visibility:visible; }
  .bubble.user { max-width:88%; }
  .avatar { display:none; }
  .trace-body .kv { grid-template-columns:1fr; }
}
@media (max-width:640px) {
  /* Logo und Farbschalter oben, die Navigation darunter über die volle Breite – wie SeKoRAG.
     Mit „Chat · Einstellungen · Abmelden“ passt nicht mehr alles in eine Zeile (375 px). */
  header { padding:8px 12px; gap:6px 8px; flex-wrap:wrap; }
  header nav { order:3; flex-basis:100%; gap:2px; flex-wrap:wrap; }
  header nav a { padding:4px 8px; font-size:14px; }
  header nav a.logout { margin-left:auto; }
  .modes { gap:6px; }
  .mode-toggle { width:34px; height:34px; }
  .brand-mark { width:26px; height:26px; }
  .brand span { font-size:17px; }
  main { padding:0 12px; margin-top:16px; }
  /* Die Eingabe klebt unten; der Hinweis kostete dort zwei Zeilen Platz */
  .composer-foot > span { display:none; }
}

/* --- Einstellungen: links die Bereiche, rechts die Karte (aus SeKoRAG) ------------------------- */
.settings { display:grid; grid-template-columns:200px minmax(0,1fr); gap:20px; align-items:start; max-width:960px; margin:0 auto; }
.subnav { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:8px; position:sticky; top:16px; }
.subnav a { display:block; padding:8px 12px; border-radius:6px; color:var(--text); text-decoration:none; font-size:14px; }
.subnav a:hover { background:var(--sunken); }
.subnav a.active { background:var(--accent-soft); color:var(--accent-text); font-weight:600; }
.group-note { margin:-4px 0 4px; max-width:75ch; line-height:1.45; }
.field { padding:14px 0; border-bottom:1px solid var(--line); }
.field:last-of-type { border-bottom:0; }
.field > label { margin:0 0 6px; color:var(--text); font-weight:600; font-size:14px; }
.field .hint { margin:6px 0 0; }
.settings-actions { position:sticky; bottom:0; background:var(--card); padding:14px 0 2px; margin-top:6px; border-top:1px solid var(--line); display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.endpoint { padding:14px 0; border-bottom:1px solid var(--line); }
.endpoint.editing { border-left:3px solid var(--accent); padding-left:12px; }
.endpoint-head { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:6px; font-size:15px; }
.endpoint .kv { display:grid; grid-template-columns:140px minmax(0,1fr); gap:3px 12px; font-size:14px; overflow-wrap:anywhere; }
.endpoint .kv b { color:var(--muted); font-weight:600; }
.endpoint-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.endpoint-form { margin-top:18px; }
.endpoint-form h3 { margin:0; font-size:15px; }
.endpoint-form input[type=text] { max-width:520px; }
.endpoint-form textarea { max-width:640px; resize:vertical; min-height:70px; }
.memory-text { font-size:15px; overflow-wrap:anywhere; }
.endpoint > .hint { margin:4px 0 0; }
@media (max-width:800px) {
  .settings { grid-template-columns:1fr; }
  .subnav { position:static; display:flex; flex-wrap:wrap; gap:4px; }
  .endpoint .kv { grid-template-columns:1fr; }
}