/* ---------- base tokens (theme "klassisch", light) ---------- */
:root {
  --bg: #f6f2ec;
  --surface: #fffdfa;
  --surface-2: #efe9e0;
  --text: #241d1a;
  --muted: #6f655e;
  --line: #e2d9cd;
  --accent: #7a1f2b;
  --accent-ink: #ffffff;
  --accent-soft: #f3e3e5;
  --user-bg: #7a1f2b;
  --user-ink: #ffffff;
  --assistant-bg: #fffdfa;
  --assistant-ink: #241d1a;
  --side-bg: #2a1a1c;
  --side-ink: #f3ebe6;
  --side-muted: #b9a7a3;
  --side-line: rgba(255, 255, 255, 0.08);
  --danger: #b4232c;
  --radius: 18px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(36, 29, 26, 0.06), 0 8px 24px rgba(36, 29, 26, 0.06);
  --font: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-head: Georgia, "Times New Roman", "Source Serif Pro", serif;
  --font-mono: ui-monospace, "Cascadia Code", Consolas, Menlo, monospace;
  --col-max: 820px;
}

/* klassisch, dark */
@media (prefers-color-scheme: dark) {
  :root:not([data-mode="light"]) {
    --bg: #1b1715;
    --surface: #26201d;
    --surface-2: #2f2824;
    --text: #efe8e1;
    --muted: #a3978e;
    --line: #3a312c;
    --accent: #c9636f;
    --accent-ink: #1b1715;
    --accent-soft: #3b262a;
    --user-bg: #8d2a38;
    --user-ink: #ffffff;
    --assistant-bg: #26201d;
    --assistant-ink: #efe8e1;
    --side-bg: #15110f;
    --side-ink: #f3ebe6;
    --side-muted: #a3978e;
    --danger: #ff7b84;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.3);
  }
}
:root[data-mode="dark"] {
  --bg: #1b1715;
  --surface: #26201d;
  --surface-2: #2f2824;
  --text: #efe8e1;
  --muted: #a3978e;
  --line: #3a312c;
  --accent: #c9636f;
  --accent-ink: #1b1715;
  --accent-soft: #3b262a;
  --user-bg: #8d2a38;
  --user-ink: #ffffff;
  --assistant-bg: #26201d;
  --assistant-ink: #efe8e1;
  --side-bg: #15110f;
  --side-ink: #f3ebe6;
  --side-muted: #a3978e;
  --danger: #ff7b84;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.3);
}

/* ---------- theme "minimal" ---------- */
:root[data-theme="minimal"] {
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f3f4f6;
  --text: #111827;
  --muted: #6b7280;
  --line: #e5e7eb;
  --accent: #111827;
  --accent-ink: #ffffff;
  --accent-soft: #f3f4f6;
  --user-bg: #f3f4f6;
  --user-ink: #111827;
  --assistant-bg: transparent;
  --assistant-ink: #111827;
  --side-bg: #f7f7f8;
  --side-ink: #111827;
  --side-muted: #6b7280;
  --side-line: #e5e7eb;
  --radius: 14px;
  --radius-sm: 8px;
  --shadow: none;
  --font-head: var(--font);
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="minimal"]:not([data-mode="light"]) {
    --bg: #0f1115;
    --surface: #0f1115;
    --surface-2: #1b1f27;
    --text: #e5e7eb;
    --muted: #9ca3af;
    --line: #262b35;
    --accent: #e5e7eb;
    --accent-ink: #0f1115;
    --accent-soft: #1b1f27;
    --user-bg: #1b1f27;
    --user-ink: #e5e7eb;
    --assistant-bg: transparent;
    --assistant-ink: #e5e7eb;
    --side-bg: #0a0c10;
    --side-ink: #e5e7eb;
    --side-muted: #9ca3af;
    --side-line: #262b35;
    --danger: #ff7b84;
  }
}
:root[data-theme="minimal"][data-mode="dark"] {
  --bg: #0f1115;
  --surface: #0f1115;
  --surface-2: #1b1f27;
  --text: #e5e7eb;
  --muted: #9ca3af;
  --line: #262b35;
  --accent: #e5e7eb;
  --accent-ink: #0f1115;
  --accent-soft: #1b1f27;
  --user-bg: #1b1f27;
  --user-ink: #e5e7eb;
  --assistant-bg: transparent;
  --assistant-ink: #e5e7eb;
  --side-bg: #0a0c10;
  --side-ink: #e5e7eb;
  --side-muted: #9ca3af;
  --side-line: #262b35;
  --danger: #ff7b84;
}

/* ---------- theme "erzbistum": Erzbistum Köln palette (#004133 / #002920 green, #947200 gold).
   Light by default; `data-mode="dark"` gives the dark variant. Same quiet structure as "minimal". */
:root[data-theme="erzbistum"] {
  --bg: #f3f7f5;
  --surface: #ffffff;
  --surface-2: #eaf1ee;
  --text: #002920;
  --muted: #5e7a70;
  --line: #d6e2dd;
  --accent: #004133;
  --accent-ink: #ffffff;
  --accent-soft: #e0ece7;
  --user-bg: #004133;
  --user-ink: #ffffff;
  --assistant-bg: transparent;
  --assistant-ink: #002920;
  --side-bg: #002920;
  --side-ink: #ffffff;
  --side-muted: #8fb3a6;
  --gold: #947200;
  --danger: #b31b34;
  --shadow: 0 1px 2px rgba(0, 41, 32, 0.06), 0 8px 24px rgba(0, 41, 32, 0.08);
  --radius: 14px;
  --radius-sm: 8px;
  --font-head: var(--font);
}
:root[data-theme="erzbistum"][data-mode="dark"] {
  --bg: #07211b;
  --surface: #0a2b23;
  --surface-2: #10392e;
  --text: #eef5f1;
  --muted: #9dbbb0;
  --line: #1b4a3c;
  --accent: #2bb186;
  --accent-ink: #002920;
  --accent-soft: #123f33;
  --user-bg: #0f5a44;
  --user-ink: #ffffff;
  --assistant-bg: transparent;
  --assistant-ink: #eef5f1;
  --side-bg: #002920;
  --side-ink: #ffffff;
  --side-muted: #8fb3a6;
  --side-line: rgba(255, 255, 255, 0.08);
  --gold: #d1a93c;
  --danger: #ff8b94;
  --radius: 14px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.3);
  --font-head: var(--font);
}
:root[data-theme="erzbistum"] .brand-sub::before,
:root[data-theme="erzbistum-rot"] .brand-sub::before { background: var(--gold); }
:root[data-theme="erzbistum"] .brand-sub.busy::before,
:root[data-theme="erzbistum-rot"] .brand-sub.busy::before { background: var(--accent); }

/* ---------- theme "erzbistum-rot": same structure, built on the red #b31b34 ---------- */
:root[data-theme="erzbistum-rot"] {
  --bg: #f8f4f5;
  --surface: #ffffff;
  --surface-2: #f1e8ea;
  --text: #2a0b12;
  --muted: #7a5b62;
  --line: #e4d4d8;
  --accent: #b31b34;
  --accent-ink: #ffffff;
  --accent-soft: #f3dfe3;
  --user-bg: #b31b34;
  --user-ink: #ffffff;
  --assistant-bg: transparent;
  --assistant-ink: #2a0b12;
  --side-bg: #2a0b12;
  --side-ink: #ffffff;
  --side-muted: #c39aa2;
  --gold: #947200;
  --danger: #b31b34;
  --shadow: 0 1px 2px rgba(42, 11, 18, 0.06), 0 8px 24px rgba(42, 11, 18, 0.08);
  --radius: 14px;
  --radius-sm: 8px;
  --font-head: var(--font);
}
:root[data-theme="erzbistum-rot"][data-mode="dark"] {
  --bg: #1c0b0f;
  --surface: #251014;
  --surface-2: #33171d;
  --text: #f6eef0;
  --muted: #bda1a7;
  --line: #4a242c;
  --accent: #e0455c;
  --accent-ink: #ffffff;
  --accent-soft: #3d1a21;
  --user-bg: #8f1529;
  --user-ink: #ffffff;
  --assistant-bg: transparent;
  --assistant-ink: #f6eef0;
  --side-bg: #2a0b12;
  --side-ink: #ffffff;
  --side-muted: #c39aa2;
  --side-line: rgba(255, 255, 255, 0.08);
  --gold: #d1a93c;
  --danger: #ff8b94;
  --radius: 14px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.3);
  --font-head: var(--font);
}

/* ---------- theme "messenger" ---------- */
:root[data-theme="messenger"] {
  --bg: #e9eef3;
  --surface: #ffffff;
  --surface-2: #f1f4f8;
  --text: #15202b;
  --muted: #5b6b7b;
  --line: #dde4ec;
  --accent: #0f6e73;
  --accent-ink: #ffffff;
  --accent-soft: #dff2f2;
  --user-bg: #0f6e73;
  --user-ink: #ffffff;
  --assistant-bg: #f1f4f8;
  --assistant-ink: #15202b;
  --side-bg: #0f3f42;
  --side-ink: #e8f4f4;
  --side-muted: #9cc3c4;
  --side-line: rgba(255, 255, 255, 0.1);
  --radius: 20px;
  --radius-sm: 12px;
  --shadow: 0 2px 4px rgba(21, 32, 43, 0.06), 0 16px 40px rgba(21, 32, 43, 0.10);
  --font-head: var(--font);
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="messenger"]:not([data-mode="light"]) {
    --bg: #0c1218;
    --surface: #151d26;
    --surface-2: #1d2733;
    --text: #e6edf3;
    --muted: #93a4b5;
    --line: #273340;
    --accent: #3cb8bd;
    --accent-ink: #0c1218;
    --accent-soft: #15353a;
    --user-bg: #137a80;
    --user-ink: #ffffff;
    --assistant-bg: #1d2733;
    --assistant-ink: #e6edf3;
    --side-bg: #08141a;
    --side-ink: #e8f4f4;
    --side-muted: #93a4b5;
    --danger: #ff7b84;
    --shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 16px 40px rgba(0, 0, 0, 0.35);
  }
}
:root[data-theme="messenger"][data-mode="dark"] {
  --bg: #0c1218;
  --surface: #151d26;
  --surface-2: #1d2733;
  --text: #e6edf3;
  --muted: #93a4b5;
  --line: #273340;
  --accent: #3cb8bd;
  --accent-ink: #0c1218;
  --accent-soft: #15353a;
  --user-bg: #137a80;
  --user-ink: #ffffff;
  --assistant-bg: #1d2733;
  --assistant-ink: #e6edf3;
  --side-bg: #08141a;
  --side-ink: #e8f4f4;
  --side-muted: #93a4b5;
  --danger: #ff7b84;
  --shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 16px 40px rgba(0, 0, 0, 0.35);
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ---------- app grid: the layouts only move these four blocks around ---------- */
.app {
  height: 100%;
  display: grid;
  grid-template-areas: "top" "chat";
  grid-template-rows: auto 1fr;
  grid-template-columns: 1fr;
  background: var(--surface);
  overflow: hidden;
}
.topbar { grid-area: top; }
.chat-col { grid-area: chat; display: flex; flex-direction: column; min-height: 0; }
.sidebar { grid-area: side; display: none; }
.infopanel { grid-area: info; display: none; }

/* Kompakt: centred column, the embedded-widget look */
:root[data-layout="kompakt"] .app { max-width: 920px; margin: 0 auto; }
@media (min-width: 960px) {
  :root[data-layout="kompakt"][data-theme="messenger"] body { padding: 24px; }
  :root[data-layout="kompakt"][data-theme="messenger"] .app { height: calc(100% - 48px); border-radius: 24px; box-shadow: var(--shadow); }
  :root[data-layout="kompakt"][data-theme="klassisch"] .app { border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
}

/* Seitenleiste: desktop assistant with a left navigation panel */
@media (min-width: 900px) {
  :root[data-layout="seitenleiste"] .app {
    grid-template-areas: "side top" "side chat";
    grid-template-columns: 280px 1fr;
  }
  :root[data-layout="seitenleiste"] .sidebar { display: flex; }
  :root[data-layout="seitenleiste"] .topbar .brand { visibility: hidden; }
  :root[data-layout="seitenleiste"] .topbar { border-bottom-color: transparent; background: transparent; }
  :root[data-layout="seitenleiste"] .topbar .btn.ghost { display: none; }
  :root[data-layout="seitenleiste"][data-theme="klassisch"] .messages { background: var(--surface); }
}

/* Portal: full-width brand banner, chat left, information right */
@media (min-width: 900px) {
  :root[data-layout="portal"] .app {
    grid-template-areas: "top top" "chat info";
    grid-template-columns: 1fr 340px;
    background: var(--bg);
  }
  :root[data-layout="portal"] .infopanel { display: flex; }
  :root[data-layout="portal"] .topbar {
    background: var(--accent);
    color: var(--accent-ink);
    border-bottom: 0;
    padding: 22px 32px;
  }
  :root[data-layout="portal"] .topbar .mark { background: var(--accent-ink); color: var(--accent); width: 48px; height: 48px; font-size: 22px; }
  :root[data-layout="portal"] .topbar .brand-title { font-size: 24px; }
  :root[data-layout="portal"] .topbar .brand-sub { display: none; }
  :root[data-layout="portal"] .topbar .brand-tagline { display: block; }
  :root[data-layout="portal"] .topbar .btn, :root[data-layout="portal"] .topbar .icon-btn {
    background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.35); color: var(--accent-ink);
  }
  :root[data-layout="portal"] .topbar .menu-list { color: var(--text); }
  :root[data-layout="portal"] .chat-col { background: var(--surface); margin: 24px 0 24px 32px; border-radius: 20px; border: 1px solid var(--line); box-shadow: var(--shadow); overflow: hidden; }
  :root[data-layout="portal"] .messages { background: var(--surface); }
  :root[data-layout="portal"] .composer { border-top-color: var(--line); }
  :root[data-layout="portal"] .empty { margin-top: 48px; }
}

/* Fokus: no chrome, wide quiet reading column, floating composer */
:root[data-layout="fokus"] { --col-max: 760px; }
:root[data-layout="fokus"] .app { background: var(--bg); }
:root[data-layout="fokus"] .topbar { background: transparent; border-bottom: 0; padding: 18px 28px; }
:root[data-layout="fokus"] .topbar .brand-sub { display: none; }
:root[data-layout="fokus"] .messages { background: transparent; padding-top: 8px; }
:root[data-layout="fokus"] .msg.assistant .bubble {
  background: transparent; border: 0; border-left: 3px solid var(--accent);
  border-radius: 0; padding: 2px 0 2px 18px; max-width: 100%; box-shadow: none;
}
:root[data-layout="fokus"] .msg.assistant .avatar { display: none; }
:root[data-layout="fokus"] .msg.user .bubble { font-size: 14.5px; box-shadow: var(--shadow); }
:root[data-layout="fokus"] .composer { background: transparent; border-top: 0; padding-bottom: 20px; }
:root[data-layout="fokus"] .composer-box { background: var(--surface); box-shadow: var(--shadow); border-radius: 28px; padding: 10px 10px 10px 20px; }
:root[data-layout="fokus"] .empty { margin-top: 10vh; }
:root[data-layout="fokus"] .welcome { font-size: 30px; }

/* ---------- sidebar ---------- */
.sidebar {
  flex-direction: column;
  gap: 18px;
  padding: 20px 18px;
  background: var(--side-bg);
  color: var(--side-ink);
  border-right: 1px solid var(--side-line, transparent);
  min-height: 0;
}
.side-brand { display: flex; align-items: center; gap: 12px; }
.sidebar .brand-sub { color: var(--side-muted); }
.sidebar .mark { background: var(--side-ink); color: var(--side-bg); }
:root[data-theme="minimal"] .sidebar .mark { background: var(--accent); color: var(--accent-ink); }
:root[data-theme="erzbistum"] .sidebar .mark, :root[data-theme="erzbistum-rot"] .sidebar .mark { background: var(--side-ink); color: var(--side-bg); }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); justify-content: center; }
.sidebar .btn.primary { background: var(--side-ink); color: var(--side-bg); border-color: transparent; padding: 10px 14px; }
:root[data-theme="minimal"] .sidebar .btn.primary { background: var(--accent); color: var(--accent-ink); }
.sidebar .btn.primary:hover { filter: brightness(0.94); }
.side-section { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.side-label { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--side-muted); margin: 6px 6px 8px; }
.side-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.side-list button {
  width: 100%; text-align: left;
  background: transparent; border: 0; color: var(--side-ink);
  padding: 9px 10px; border-radius: 10px;
  font: inherit; font-size: 14px; line-height: 1.35; cursor: pointer;
}
.side-list button:hover { background: var(--side-line, rgba(0, 0, 0, 0.05)); }
.side-foot { font-size: 12px; color: var(--side-muted); border-top: 1px solid var(--side-line, rgba(0, 0, 0, 0.08)); padding-top: 12px; }
.side-foot p { margin: 0 0 6px; }

/* ---------- info panel ---------- */
.infopanel {
  flex-direction: column;
  gap: 16px;
  padding: 24px 32px 24px 24px;
  overflow-y: auto;
  min-height: 0;
}
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; }
.card h2 { font-family: var(--font-head); font-size: 15px; margin: 0 0 10px; }
.card p { margin: 0 0 8px; font-size: 14px; color: var(--muted); }
.card p:last-child { margin-bottom: 0; }
.chips.stack { flex-direction: column; align-items: stretch; }
.chips.stack .chip { text-align: left; border-radius: 10px; }

/* ---------- header ---------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.mark, .avatar, .empty-mark {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  display: grid; place-items: center;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 16px;
  flex: 0 0 auto;
}
.brand-title {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 17px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.brand-sub { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.brand-sub::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: #2fa36b; display: inline-block;
}
.brand-sub.busy::before { background: #e0a100; }
.brand-tagline { display: none; margin: 2px 0 0; font-size: 14px; opacity: .85; }
.actions { display: flex; align-items: center; gap: 6px; }

.btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  border-radius: 999px;
  padding: 7px 12px;
  font: inherit; font-size: 14px;
  cursor: pointer;
}
.btn:hover { background: var(--surface-2); }
.btn.ghost span { display: none; }
@media (min-width: 420px) { .btn.ghost span { display: inline; } }
.icon-btn {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  border-radius: 50%;
  cursor: pointer;
}
.icon-btn:hover { background: var(--surface-2); }

.menu { position: relative; }
.menu-list {
  position: absolute; right: 0; top: calc(100% + 6px);
  display: flex; gap: 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow, 0 8px 24px rgba(0,0,0,.12));
  padding: 6px;
  z-index: 10;
}
.menu-col { min-width: 150px; }
.menu-label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 8px 10px 4px; }
.menu-list button {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; text-align: left;
  border: 0; background: transparent; color: var(--text);
  border-radius: 8px; padding: 8px 10px;
  font: inherit; font-size: 14px; cursor: pointer;
}
.menu-list button:hover { background: var(--surface-2); }
.menu-list button[aria-checked="true"]::after { content: "✓"; color: var(--accent); font-weight: 700; }

/* ---------- messages ---------- */
.messages {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 20px 16px 8px;
  scroll-behavior: smooth;
}
.messages-inner {
  max-width: var(--col-max);
  margin: 0 auto;
  min-height: 100%;
  display: flex; flex-direction: column; gap: 14px;
}
:root[data-theme="klassisch"] .messages { background: var(--bg); }
:root[data-theme="messenger"] .messages { background: var(--surface); }

.empty {
  margin: auto;
  text-align: center;
  max-width: 560px;
  padding: 24px 8px;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.empty-mark { width: 56px; height: 56px; font-size: 24px; }
.welcome { font-family: var(--font-head); font-weight: 600; font-size: 22px; margin: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.chip {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  border-radius: 999px;
  padding: 8px 14px;
  font: inherit; font-size: 14px;
  cursor: pointer;
}
.chip:hover { background: var(--accent-soft); border-color: var(--accent); }

.msg { display: flex; gap: 10px; align-items: flex-end; max-width: 100%; }
.msg .avatar { display: none; width: 30px; height: 30px; font-size: 13px; }
:root[data-theme="messenger"] .msg.assistant .avatar { display: grid; }
.msg.user { justify-content: flex-end; }
.bubble {
  max-width: min(78%, 640px);
  padding: 10px 14px;
  border-radius: var(--radius);
  background: var(--assistant-bg);
  color: var(--assistant-ink);
  border: 1px solid var(--line);
  overflow-wrap: anywhere;
}
:root[data-theme="klassisch"] .msg.assistant .bubble { border-bottom-left-radius: 6px; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
:root[data-theme="messenger"] .msg.assistant .bubble { border: 0; border-bottom-left-radius: 6px; }
:root[data-theme="minimal"] .msg.assistant .bubble,
:root[data-theme="erzbistum"] .msg.assistant .bubble,
:root[data-theme="erzbistum-rot"] .msg.assistant .bubble { border: 0; padding: 4px 0; max-width: 100%; }
.msg.user .bubble {
  background: var(--user-bg);
  color: var(--user-ink);
  border-color: transparent;
  border-bottom-right-radius: 6px;
  white-space: pre-wrap;
}
:root[data-theme="minimal"] .msg.user .bubble,
:root[data-theme="erzbistum"] .msg.user .bubble,
:root[data-theme="erzbistum-rot"] .msg.user .bubble { border-radius: var(--radius); }

.msg.system .bubble {
  max-width: 100%;
  background: var(--accent-soft);
  border-color: transparent;
  color: var(--text);
  font-size: 14px;
}
.msg.error .bubble { background: transparent; border-color: var(--danger); color: var(--danger); }
.bubble .retry { margin-left: 8px; }
.bubble .countdown { color: var(--muted); font-size: 13px; white-space: nowrap; }

.bubble p { margin: 0 0 .6em; }
.bubble p:last-child { margin-bottom: 0; }
.bubble ul, .bubble ol { margin: 0 0 .6em; padding-left: 1.3em; }
.bubble h1, .bubble h2, .bubble h3 { font-size: 1.05em; margin: .6em 0 .3em; font-family: var(--font-head); }
.bubble a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.msg.assistant .bubble a { color: var(--accent); }
.bubble code { font-family: var(--font-mono); font-size: .9em; background: var(--surface-2); padding: 1px 5px; border-radius: 5px; }
.bubble pre { background: var(--surface-2); padding: 10px 12px; border-radius: var(--radius-sm); overflow-x: auto; margin: .4em 0 .6em; }
.bubble pre code { background: transparent; padding: 0; }
.bubble blockquote { margin: .4em 0; padding-left: .8em; border-left: 3px solid var(--line); color: var(--muted); }
.bubble table { border-collapse: collapse; margin: .4em 0 .6em; font-size: .95em; }
.bubble th, .bubble td { border: 1px solid var(--line); padding: 4px 8px; text-align: left; }

.typing { display: inline-flex; gap: 4px; align-items: center; height: 1.3em; }
.progress { color: var(--muted); font-size: 13px; margin-left: 4px; }
.typing i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--muted);
  animation: blink 1.2s infinite ease-in-out;
}
.typing i:nth-child(2) { animation-delay: .2s; }
.typing i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-2px); } }

.hil { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

/* clarification question: options as toggles, optional free text, one submit */
.hil-form { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.hil-form .hil-q p { margin: 0 0 4px; }
.hil-form .hil { margin-top: 4px; }
.hil-opt[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.hil-text {
  width: 100%; box-sizing: border-box; margin-top: 8px; padding: 9px 12px;
  border: 1px solid var(--surface-2); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); font: inherit; font-size: 14px;
}
.hil-text:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.hil-form .btn.primary { align-self: flex-start; }
.hil-form button:disabled, .hil-form input:disabled { opacity: .55; cursor: default; }

/* ---------- composer ---------- */
.composer {
  padding: 12px 16px 16px;
  border-top: 1px solid var(--line);
  background: var(--surface);
}
.composer-box {
  max-width: var(--col-max);
  margin: 0 auto;
  display: flex; align-items: flex-end; gap: 8px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 6px 6px 6px 14px;
}
.composer-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
:root[data-theme="minimal"] .composer-box,
:root[data-theme="erzbistum"] .composer-box,
:root[data-theme="erzbistum-rot"] .composer-box { background: var(--surface); border-radius: 16px; }
textarea {
  flex: 1 1 auto;
  border: 0; outline: 0; background: transparent; color: var(--text);
  font: inherit; line-height: 1.45;
  resize: none;
  max-height: 160px;
  padding: 8px 0;
}
textarea::placeholder { color: var(--muted); }
.send {
  width: 36px; height: 36px; flex: 0 0 auto;
  border: 0; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink);
  display: grid; place-items: center;
  cursor: pointer;
}
.send:disabled { opacity: .4; cursor: default; }
.send.stop { background: var(--text); color: var(--surface); }
.hint { margin: 8px 4px 0; font-size: 11.5px; color: var(--muted); text-align: center; }

@media (max-width: 380px) {
  .bubble { max-width: 88%; }
  .brand-sub { display: none; }
}