/* ═══════════════════════════════════════════════════════════════════════
   Nexoria Akte — Oberfläche
   Tokens verbindlich aus Nexoria_Akte_UI_Spec_2026-08-10.md § 1
   und Brand/Nexoria_Visual_Style_2026-05.md
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* — Farbe: dunkel (Leitmodus) — */
  --bg-deep:     #0a0a0b;   /* Seitenspalte, App-Rahmen */
  --bg-surface:  #131417;   /* Chatbereich, Karten */
  --bg-raised:   #1a1c20;   /* Eingabeleiste, Menüs */
  --bg-hover:    #1f2126;
  --line:        #24262b;
  --line-soft:   #1c1e22;
  --text:        #e8eaee;
  --text-2:      #9aa1ad;
  --text-3:      #6b7280;
  --accent:      #3b82f6;
  --accent-hi:   #60a5fa;
  --accent-mute: #1a2740;
  --amber:       #f7a524;
  --amber-mute:  #2a2011;
  --amber-line:  #4d3a15;
  --ok:          #3f9d6d;

  --shadow-pop: 0 1px 2px rgba(0,0,0,.5), 0 12px 32px -8px rgba(0,0,0,.65);
  --shadow-panel: 0 0 0 1px var(--line), 0 24px 60px -20px rgba(0,0,0,.8);

  /* — Maß — */
  --rail-w: 260px;
  --rail-w-collapsed: 56px;
  --read: 760px;          /* max. Textbreite im Chat */
  --preview-w: 440px;

  --r-sm: 8px;
  --r:    10px;
  --r-lg: 14px;

  --sans: 'Inter', 'Inter Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* — Farbe: hell. Gleiche Tokens, invertiert; Blau und Amber neu geprüft,
     weil sie auf Weiß nicht dieselbe Wirkung tragen (§ 1). — */
:root[data-theme="light"] {
  --bg-deep:     #f6f7f9;
  --bg-surface:  #ffffff;
  --bg-raised:   #ffffff;
  --bg-hover:    #eef0f4;
  --line:        #dfe3e9;
  --line-soft:   #e9ecf1;
  --text:        #14171c;
  --text-2:      #596171;
  --text-3:      #8b93a1;
  --accent:      #2563eb;   /* dunkler als #3b82f6 — 4.5:1 auf Weiß */
  --accent-hi:   #1d4ed8;
  --accent-mute: #e8effd;
  --amber:       #a15c00;   /* Amber trägt auf Weiß nur abgedunkelt */
  --amber-mute:  #fdf5e7;
  --amber-line:  #e6c894;
  --ok:          #1d6b47;

  --shadow-pop: 0 1px 2px rgba(16,20,28,.06), 0 12px 28px -10px rgba(16,20,28,.18);
  --shadow-panel: 0 0 0 1px var(--line), 0 20px 50px -22px rgba(16,20,28,.28);
}

/* ── Grundlage ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg-deep);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv05' 1, 'ss03' 1;
  overflow: hidden;
}
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; padding: 0; text-align: inherit; }
[hidden] { display: none !important; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p { margin: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mono { font-family: var(--mono); font-variant-ligatures: none; }
.i { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6;
     stroke-linecap: round; stroke-linejoin: round; }
.i--sm { width: 15px; height: 15px; stroke-width: 1.7; }
.i--xs { width: 11px; height: 11px; stroke-width: 2.4; }
.kbd {
  font-family: var(--mono); font-size: 10.5px; color: var(--text-3);
  border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; line-height: 1.5;
  background: color-mix(in srgb, var(--text) 4%, transparent);
}
.eyebrow { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }

/* ── Grundriss ──────────────────────────────────────────────────────── */
.app {
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr) 0;
  /* Zeile ausdrücklich begrenzen: sonst wächst die Spalte mit dem Verlauf
     über den Bildschirm hinaus und der Chatbereich bekommt nie eine Höhe,
     an der sein overflow greifen könnte. */
  grid-template-rows: minmax(0, 1fr);
  height: 100dvh;
  transition: grid-template-columns .26s var(--ease);
}
.app.is-collapsed { grid-template-columns: var(--rail-w-collapsed) minmax(0, 1fr) 0; }
.app.has-preview  { grid-template-columns: var(--rail-w) minmax(0, 1fr) var(--preview-w); }
.app.is-collapsed.has-preview { grid-template-columns: var(--rail-w-collapsed) minmax(0, 1fr) var(--preview-w); }
/* Ausdrücklich platzieren: sobald Seitenspalte oder Schleier fixiert sind,
   fallen sie aus dem Raster und die automatische Platzierung würde rutschen. */
.rail    { grid-area: 1 / 1; }
.scrim   { grid-area: 1 / 1; }
.main    { grid-area: 1 / 2; }
.preview { grid-area: 1 / 3; }

/* ═══ SEITENSPALTE ══════════════════════════════════════════════════ */
.rail {
  background: var(--bg-deep);
  border-right: 1px solid var(--line-soft);
  display: flex; flex-direction: column;
  min-width: 0; overflow: hidden;
}
.rail__top {
  display: flex; align-items: center; gap: 6px;
  padding: 14px 12px 6px; min-height: 52px;
}
.brand {
  display: flex; align-items: center; gap: 10px; text-decoration: none;
  color: var(--text); padding: 4px 4px; border-radius: var(--r-sm); min-width: 0; flex: 1;
}
.brand__mark { width: 22px; height: 22px; flex: none; position: relative; }
.nxlogo { display: block; width: 100%; height: 100%; object-fit: contain; }
.nxlogo--dark { display: none; }
:root[data-theme="light"] .nxlogo--light { display: none; }
:root[data-theme="light"] .nxlogo--dark  { display: block; }
.brand__name { font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
.rail__collapse { opacity: 0; transition: opacity .15s; }
.rail:hover .rail__collapse, .rail__collapse:focus-visible { opacity: 1; }

.iconbtn {
  width: 30px; height: 30px; display: grid; place-items: center; flex: none;
  border-radius: 7px; color: var(--text-2);
  transition: background .12s, color .12s;
}
.iconbtn:hover { background: var(--bg-hover); color: var(--text); }

.rail__body { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 6px 12px 12px; }
.rail__body::-webkit-scrollbar { width: 8px; }
.rail__body::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; border: 2px solid var(--bg-deep); }

/* Suchfeld — sucht in Chats UND im Aktenbestand (§ 3.1) */
.railsearch {
  width: 100%; display: flex; align-items: center; gap: 8px;
  padding: 7px 9px; margin-bottom: 12px;
  background: var(--bg-surface); border: 1px solid var(--line);
  border-radius: var(--r-sm); color: var(--text-3);
  transition: border-color .12s, background .12s;
}
.railsearch:hover { border-color: #313439; background: var(--bg-raised); }
:root[data-theme="light"] .railsearch:hover { border-color: #c9cfd8; }
.railsearch__label { flex: 1; text-align: left; font-size: 13.5px; }
.railsearch .kbd { margin-right: -1px; }

.railnav { display: flex; flex-direction: column; gap: 1px; margin-bottom: 18px; }
.railitem {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 9px; border-radius: var(--r-sm);
  color: var(--text-2); font-size: 13.5px; text-align: left; width: 100%;
  transition: background .12s, color .12s;
}
.railitem > span:not(.dot) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.railitem:hover { background: var(--bg-hover); color: var(--text); }
.railitem.is-active { background: var(--bg-hover); color: var(--text); }
/* Einzige Stelle in der Seitenspalte mit Akzentfarbe (§ 3.2) */
.railitem--primary { color: var(--accent); font-weight: 500; }
.railitem--primary:hover { background: var(--accent-mute); color: var(--accent-hi); }
:root[data-theme="light"] .railitem--primary:hover { color: var(--accent); }

.railgroup { margin-bottom: 16px; }
.railgroup__label {
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-3); padding: 4px 9px 6px;
  border-top: 1px solid var(--line-soft); margin-top: 4px; padding-top: 12px;
}
.chatlist { display: flex; flex-direction: column; gap: 1px; }
.chatitem {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 4px 6px 9px; border-radius: var(--r-sm);
  color: var(--text-2); font-size: 13.5px; cursor: pointer;
  transition: background .12s, color .12s;
}
.chatitem:hover { background: var(--bg-hover); color: var(--text); }
.chatitem.is-active { background: var(--accent-mute); color: var(--text); }
:root[data-theme="light"] .chatitem.is-active { background: var(--accent-mute); }
.chatitem__t { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chatitem__more {
  width: 22px; height: 22px; border-radius: 5px; display: grid; place-items: center;
  color: var(--text-3); opacity: 0; flex: none; transition: opacity .12s, background .12s;
}
.chatitem:hover .chatitem__more { opacity: 1; }
.chatitem__more:hover { background: color-mix(in srgb, var(--text) 10%, transparent); color: var(--text); }
.railmore {
  font-size: 12.5px; color: var(--text-3); padding: 6px 9px; border-radius: var(--r-sm);
  width: 100%; text-align: left;
}
.railmore:hover { color: var(--text-2); background: var(--bg-hover); }

/* Verbrauchsanzeige (§ 3.6) — Unternehmensebene, nie je Nutzer */
.rail__foot { padding: 12px; border-top: 1px solid var(--line-soft); }
.usage { position: relative; display: flex; align-items: center; gap: 9px; padding: 4px 4px 10px; cursor: default; }
.usage__bar { flex: 1; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.usage__fill { display: block; height: 100%; background: var(--text-3); border-radius: 2px; }
.usage.is-warn .usage__fill { background: var(--amber); }
.usage__num { font-size: 11px; color: var(--text-3); letter-spacing: -.02em; }
.who { display: flex; align-items: center; gap: 9px; padding: 4px; }
.who__name { font-size: 13px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ava {
  width: 24px; height: 24px; border-radius: 6px; flex: none; display: grid; place-items: center;
  background: var(--accent-mute); color: var(--accent-hi);
  font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: .02em;
}
:root[data-theme="light"] .ava { color: var(--accent); }

/* Eingeklappt: nur Symbole (§ 2) */
.app.is-collapsed .brand__name,
.app.is-collapsed .railsearch__label,
.app.is-collapsed .railsearch .kbd,
.app.is-collapsed .railitem > span:not(.dot),
.app.is-collapsed .railgroup,
.app.is-collapsed .railmore,
.app.is-collapsed .usage__num,
.app.is-collapsed .who__name { display: none; }
.app.is-collapsed .rail__top { padding: 14px 8px 6px; }
.app.is-collapsed .rail__body { padding: 6px 8px; }
.app.is-collapsed .rail__foot { padding: 10px 8px; }
.app.is-collapsed .railsearch { justify-content: center; padding: 7px 0; }
.app.is-collapsed .railitem { justify-content: center; padding: 7px 0; }
.app.is-collapsed .rail__collapse { display: none; }
.app.is-collapsed .usage { padding: 4px 0 10px; }
.app.is-collapsed .who { justify-content: center; }

/* Zustandspunkte */
.dot { width: 6px; height: 6px; border-radius: 50%; flex: none; background: var(--text-3); }
.dot--ok    { background: var(--ok); }
.dot--stale { background: var(--amber); }
.dot--off   { background: transparent; box-shadow: inset 0 0 0 1.5px var(--text-3); }

/* ═══ KOPFZEILE ═════════════════════════════════════════════════════ */
.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--bg-surface); }
.topbar {
  display: flex; align-items: center; gap: 10px;
  padding: 0 16px; height: 52px; flex: none;
  border-bottom: 1px solid var(--line-soft);
}
.topbar__menu { display: none; }
.topbar__right { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* Welchen Ausschnitt des Bestands befrage ich gerade (§ 4) */
.scope { position: relative; min-width: 0; }
.scope__btn {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 8px 5px 10px; border-radius: var(--r-sm);
  color: var(--text); font-size: 13.5px; font-weight: 500; max-width: 46vw;
  transition: background .12s;
}
.scope__btn:hover { background: var(--bg-hover); }
.scope__btn[aria-expanded="true"] { background: var(--bg-hover); }
.scope__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scope__btn .i { color: var(--text-3); }

.fresh { position: relative; display: flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: var(--r-sm); }
.fresh__text { font-size: 12.5px; color: var(--text-2); }
.fresh.is-stale .fresh__text { color: var(--amber); }
.fresh:hover { background: var(--bg-hover); }

.chip {
  display: flex; align-items: center; gap: 5px; padding: 3px 8px;
  border: 1px solid var(--line); border-radius: 20px;
  color: var(--text-3); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  transition: color .12s, border-color .12s;
}
.chip:hover { color: var(--text-2); border-color: var(--text-3); }
.chip--proto .i { stroke-width: 1.9; }

.ava--top { width: 26px; height: 26px; }

/* Zeigefenster (Tooltip) */
.tip {
  position: absolute; z-index: 60; width: 250px;
  background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--r);
  padding: 10px 12px; font-size: 12.5px; line-height: 1.5; color: var(--text-2);
  box-shadow: var(--shadow-pop);
  opacity: 0; visibility: hidden; transform: translateY(3px);
  transition: opacity .14s, transform .14s, visibility .14s;
  pointer-events: none;
}
.tip b { color: var(--text); font-weight: 600; }
.tip--up   { bottom: calc(100% + 6px); left: 0; }
.tip--down { top: calc(100% + 6px); right: 0; width: 230px; }
.usage:hover .tip, .usage:focus-visible .tip,
.fresh:hover .tip, .fresh:focus-visible .tip { opacity: 1; visibility: visible; transform: translateY(0); }

/* ═══ CHATBEREICH ═══════════════════════════════════════════════════ */
.view { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }
.view[hidden] { display: none; }
/* Ein einziger, sehr dezenter Lichtschein — Atmosphäre, kein Verlauf (Style-Guide) */
.view--chat::before {
  content: ''; position: absolute; top: -110px; left: 50%; width: 760px; height: 460px;
  transform: translateX(-50%); pointer-events: none; z-index: 0;
  background: radial-gradient(circle, rgba(59,130,246,.055) 0%, transparent 70%);
}
:root[data-theme="light"] .view--chat::before { background: radial-gradient(circle, rgba(37,99,235,.045) 0%, transparent 70%); }
.view--chat > * { position: relative; z-index: 1; }

.thread { flex: 1; overflow-y: auto; padding: 8px 24px 8px; scroll-behavior: smooth; }
.thread::-webkit-scrollbar { width: 10px; }
.thread::-webkit-scrollbar-thumb { background: var(--line); border-radius: 5px; border: 3px solid var(--bg-surface); }

/* — Leerer Zustand: die Marke zeichnet sich selbst — */
.empty { min-height: 100%; display: grid; place-items: center; padding: 24px 0 48px; }
.empty__inner { width: 100%; max-width: var(--read); margin: 0 auto; text-align: center; }

.mark { position: relative; width: 104px; height: 104px; margin: 0 auto 30px; display: grid; place-items: center; }
.mark__glow {
  position: absolute; width: 300px; height: 300px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(59,130,246,.15) 0%, transparent 70%);
  animation: glowbreath 6s ease-in-out infinite;
}
:root[data-theme="light"] .mark__glow { background: radial-gradient(circle, rgba(37,99,235,.10) 0%, transparent 70%); }
@keyframes glowbreath { 0%,100% { opacity: .5; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.06); } }

/* Ein einzelner Ring zieht sich einmal auf und verklingt */
.mark__ring {
  position: absolute; width: 104px; height: 104px; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  opacity: 0; animation: ringout 3.6s var(--ease) .35s infinite;
}
@keyframes ringout {
  0%   { opacity: 0;   transform: scale(.55); }
  22%  { opacity: .75; }
  60%  { opacity: 0;   transform: scale(1.35); }
  100% { opacity: 0;   transform: scale(1.35); }
}

.mark__logo {
  position: relative; width: 60px; height: 60px;
  opacity: 0; transform: scale(.82);
  animation: logoin .8s var(--ease) .12s forwards, breath 6s ease-in-out 1.6s infinite;
  filter: drop-shadow(0 2px 14px color-mix(in srgb, var(--accent) 26%, transparent));
}
@keyframes logoin { to { opacity: 1; transform: scale(1); } }
@keyframes breath { 0%,100% { transform: scale(1); } 50% { transform: scale(1.035); } }

.empty__title { font-size: 28px; font-weight: 600; letter-spacing: -.028em; margin-bottom: 10px;
  opacity: 0; animation: risein .6s var(--ease) 1.15s forwards; }
.empty__sub { color: var(--text-2); font-size: 14.5px; max-width: 58ch; margin: 0 auto 28px;
  opacity: 0; animation: risein .6s var(--ease) 1.3s forwards; }
.empty__sub span { color: var(--text); }
#emptyGreet { color: var(--text-2); }
@keyframes risein { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
.suggests { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; text-align: left; }
.suggest {
  padding: 13px 15px; text-align: left; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--bg-deep); color: var(--text-2); font-size: 13.5px; line-height: 1.45;
  transition: border-color .14s, color .14s, background .14s, transform .14s;
}
:root[data-theme="light"] .suggest { background: var(--bg-deep); }
.suggest:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); color: var(--text); transform: translateY(-1px); }

/* Reine Websuche: Kennzeichnung im Kopf des Verlaufs (§ 5.2) */
.threadnote {
  flex: none; display: flex; align-items: center; gap: 9px;
  max-width: var(--read); width: calc(100% - 48px); margin: 12px auto 0;
  border: 1px dashed var(--amber-line); background: var(--amber-mute);
  border-radius: var(--r); padding: 8px 12px; font-size: 12.5px; color: var(--text-2);
}
.threadnote .i { color: var(--amber); }

/* — Frage und Antwort (§ 6.2) — */
.turn { max-width: var(--read); margin: 0 auto; padding: 20px 0; }
.turn + .turn { border-top: 1px solid var(--line-soft); }

.ask { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 22px; }
.ask__ava { width: 26px; height: 26px; border-radius: 6px; flex: none; display: grid; place-items: center;
  background: var(--bg-hover); color: var(--text-2); font-family: var(--mono); font-size: 10px; }
.ask__text { font-size: 15.5px; font-weight: 500; letter-spacing: -.005em; padding-top: 1px; }
.ask__attach { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

.reply { display: flex; gap: 12px; align-items: flex-start; }
.reply__ava {
  width: 26px; height: 26px; border-radius: 7px; flex: none; display: grid; place-items: center;
  background: var(--accent-mute); color: var(--accent-hi);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent);
}
:root[data-theme="light"] .reply__ava { color: var(--accent); }
.reply__ava { padding: 5.5px; }
.reply__ava .nxlogo { width: 100%; height: 100%; }
.reply__main { flex: 1; min-width: 0; padding-top: 1px; }
.reply__text { font-size: 15.5px; line-height: 1.68; }
.reply__text p { margin: 0; }
.reply__text p + p { margin-top: 12px; }
.reply__text ul { margin: 10px 0 0; display: flex; flex-direction: column; gap: 6px; }
.reply__text li { padding-left: 16px; position: relative; }
.reply__text li::before { content: ''; position: absolute; left: 2px; top: .68em; width: 4px; height: 4px;
  border-radius: 50%; background: var(--text-3); }

/* Zahlen aus einem Beleg: dezent unterstrichen, Überfahren hebt den Beleg hervor (§ 6.3) */
.cite {
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  cursor: default;
  transition: text-decoration-color .12s, background .12s;
  border-radius: 3px;
}
.cite:hover { text-decoration-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }

/* — Arbeitszustand (§ 6.5) — */
.working { display: flex; align-items: center; gap: 9px; color: var(--text-2); font-size: 13.5px; padding: 2px 0; }
.working__pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none;
  animation: pulse 1.25s var(--ease) infinite; }
@keyframes pulse { 0%,100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1); } }
.working__steps { margin-top: 10px; display: flex; flex-direction: column; gap: 5px; }
.wstep { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-3); font-family: var(--mono); }
.wstep .i { color: var(--ok); }
.wstep.is-now { color: var(--text-2); }
.caret { display: inline-block; width: 2px; height: 1.05em; vertical-align: -.18em; margin-left: 1px;
  background: var(--accent); animation: blink .9s steps(2,start) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.deepbar { margin-top: 12px; height: 3px; border-radius: 2px; background: var(--line); overflow: hidden; max-width: 320px; }
.deepbar span { display: block; height: 100%; background: var(--accent); width: 0; transition: width .5s var(--ease); }
.cancel { margin-top: 12px; font-size: 12.5px; color: var(--text-3); display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line); border-radius: 7px; padding: 4px 9px; }
.cancel:hover { color: var(--text); border-color: var(--text-3); }

/* — Belege (§ 6.3): nie eingeklappt — */
.sources { margin-top: 18px; }
.sources__label {
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: 7px; display: flex; align-items: center; gap: 7px;
}
.sources__list { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--bg-deep); }
:root[data-theme="light"] .sources__list { background: var(--bg-surface); }
.src {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 10px 12px; font-size: 13.5px; color: var(--text);
  border-bottom: 1px solid var(--line-soft);
  transition: background .12s;
}
.src:last-child { border-bottom: 0; }
.src:hover { background: var(--bg-hover); }
.src.is-lit { background: var(--accent-mute); box-shadow: inset 2px 0 0 var(--accent); }
.src__ico { color: var(--text-3); }
.src.is-lit .src__ico { color: var(--accent-hi); }
:root[data-theme="light"] .src.is-lit .src__ico { color: var(--accent); }
.src__t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-family: var(--mono); font-size: 12.5px; letter-spacing: -.01em; }
.src__m { font-family: var(--mono); font-size: 11.5px; color: var(--text-3); white-space: nowrap; }
.src__n { font-family: var(--mono); font-size: 10px; color: var(--text-3); width: 14px; }

/* Allgemeine Auskunft: sichtbar anders als eine belegte Antwort */
.gennote {
  margin-top: 16px; display: inline-flex; align-items: center; gap: 8px;
  border: 1px dashed var(--line); border-radius: var(--r); padding: 7px 11px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-3);
}
.gennote .i { color: var(--text-3); }

.sources--web { margin-top: 10px; }
.sources--web .sources__list { border-style: dashed; }
.sources--web .src__t { font-family: var(--sans); font-size: 13.5px; }
.src__dom { font-family: var(--mono); font-size: 11.5px; color: var(--text-3); }

/* — Kein Beleg (§ 6.4) — */
.abstain {
  border: 1px solid var(--amber-line); background: var(--amber-mute);
  border-radius: var(--r); padding: 14px 16px;
}
.abstain__k {
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--amber); display: flex; align-items: center; gap: 7px; margin-bottom: 7px;
}
.abstain__t { font-size: 15px; line-height: 1.6; }
.abstain__hint { margin-top: 10px; font-size: 13px; color: var(--text-2); }
.abstain__hint .mono { color: var(--text); font-size: 12.5px; }

/* — Am Ende jeder Antwort (§ 6.6) — */
.actions { display: flex; align-items: center; gap: 2px; margin-top: 14px; margin-left: -7px; }
.act {
  display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 7px;
  color: var(--text-3); font-size: 12.5px; transition: color .12s, background .12s;
}
.act:hover { color: var(--text); background: var(--bg-hover); }
.act.is-on { color: var(--accent); }
.act--sep { margin-left: 8px; }

/* Anhang-Kärtchen */
.att {
  display: inline-flex; align-items: center; gap: 7px; max-width: 260px;
  padding: 4px 6px 4px 8px; border: 1px solid var(--line); border-radius: 7px;
  background: var(--bg-deep); font-size: 12px;
}
:root[data-theme="light"] .att { background: var(--bg-hover); }
.att__t { font-family: var(--mono); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.att__x { width: 16px; height: 16px; border-radius: 4px; display: grid; place-items: center; color: var(--text-3); }
.att__x:hover { background: var(--bg-hover); color: var(--text); }
.att__tag { font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }

/* ═══ EINGABELEISTE (§ 5) ═══════════════════════════════════════════ */
.composer-wrap { flex: none; padding: 0 24px 14px; }
.composer {
  max-width: var(--read); margin: 0 auto;
  background: linear-gradient(180deg, #1d1f24 0%, #17191d 100%);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 8px 24px -14px rgba(0,0,0,.7);
  transition: border-color .15s, box-shadow .15s;
}
:root[data-theme="light"] .composer {
  background: #fff;
  box-shadow: 0 1px 2px rgba(16,20,28,.04), 0 10px 26px -18px rgba(16,20,28,.3);
}
.composer:focus-within { border-color: color-mix(in srgb, var(--accent) 50%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent); }
.composer__pre { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 10px 12px 0; }

.composer__input {
  display: block; width: 100%; border: 0; background: none; resize: none;
  padding: 13px 14px 4px; font-size: 15px; line-height: 1.55; max-height: 200px;
  outline: none; overflow-y: auto;
}
.composer__input::placeholder { color: var(--text-3); }

/* Textfeld oben, Schalter darunter — nicht daneben (§ 5) */
.composer__bar { display: flex; align-items: center; gap: 4px; padding: 6px 8px 8px 10px; flex-wrap: wrap; }
.ctrlgroup { display: flex; align-items: center; gap: 2px; }
.ctrlgroup--sep { padding-left: 6px; margin-left: 2px; border-left: 1px solid var(--line); }
.ctrl {
  display: flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 7px;
  color: var(--text-2); font-size: 12.5px; white-space: nowrap;
  transition: background .12s, color .12s;
}
.ctrl:hover { background: var(--bg-hover); color: var(--text); }
.ctrl.is-open { background: var(--bg-hover); color: var(--text); }
.ctrl--toggle .box {
  width: 13px; height: 13px; border-radius: 3.5px; border: 1.5px solid var(--text-3);
  display: grid; place-items: center; color: transparent; flex: none; transition: all .12s;
}
.ctrl--toggle.is-on { color: var(--text); }
.ctrl--toggle.is-on .box { background: var(--accent); border-color: var(--accent); color: #fff; }
#tglDeep.is-on { color: var(--accent); background: var(--accent-mute); }

.send {
  margin-left: auto; width: 32px; height: 32px; border-radius: 8px; flex: none;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 88%, #fff) 0%, var(--accent) 100%);
  box-shadow: 0 1px 2px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.2);
  transition: filter .12s, background .12s, box-shadow .12s;
}
.send:hover { filter: brightness(1.1); }
:root[data-theme="light"] .send:hover { background: var(--accent-hi); }
.send:disabled { background: var(--bg-hover); color: var(--text-3); cursor: not-allowed;
  box-shadow: none; filter: none; }
.send.is-deep { box-shadow: 0 0 0 3px var(--accent-mute), inset 0 1px 0 rgba(255,255,255,.2); }

.composer__hint {
  padding: 0 14px 10px; font-size: 12.5px; color: var(--amber);
  display: flex; align-items: center; gap: 7px;
}
.composer__foot {
  max-width: var(--read); margin: 8px auto 0; text-align: center;
  font-size: 11.5px; color: var(--text-3);
}

/* Zeile über dem Textfeld: Tiefenrecherche-Restanzeige (§ 5.5) */
.prenote {
  display: flex; align-items: center; gap: 8px; width: 100%;
  font-family: var(--mono); font-size: 11.5px; color: var(--accent);
  padding: 2px 2px 4px;
}
.prenote--tpl { color: var(--text-2); }
.prenote__x { margin-left: auto; color: var(--text-3); display: grid; place-items: center;
  width: 18px; height: 18px; border-radius: 4px; }
.prenote__x:hover { background: var(--bg-hover); color: var(--text); }

/* ═══ SEITEN (Konnektoren, Vorlagen) ════════════════════════════════ */
.view--page { overflow-y: auto; }
.page { max-width: 820px; margin: 0 auto; padding: 28px 24px 64px; width: 100%; }
.page__head { margin-bottom: 22px; }
.backbtn { display: inline-flex; align-items: center; gap: 6px; color: var(--text-3); font-size: 12.5px;
  padding: 4px 8px 4px 4px; border-radius: 7px; margin-bottom: 14px; }
.backbtn:hover { color: var(--text); background: var(--bg-hover); }
.page__title { font-size: 21px; font-weight: 600; letter-spacing: -.02em; margin-bottom: 6px; }
.page__sub { color: var(--text-2); font-size: 14px; max-width: 62ch; }

.connlist { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.conn { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line-soft); }
.conn:last-child { border-bottom: 0; }
.conn__main { flex: 1; min-width: 0; }
.conn__t { font-family: var(--mono); font-size: 13px; }
.conn__m { font-size: 12.5px; color: var(--text-3); margin-top: 2px; }
.conn.is-stale .conn__m { color: var(--amber); }
.conn__act { display: flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--line);
  border-radius: 7px; font-size: 12.5px; color: var(--text-2); }
.conn__act:hover { color: var(--text); border-color: var(--text-3); }
.conn__act:disabled { opacity: .4; cursor: not-allowed; }

.tpllist { display: flex; flex-direction: column; gap: 10px; }
.tpl { border: 1px solid var(--line); border-radius: var(--r); padding: 16px; }
.tpl__t { font-size: 15px; font-weight: 550; letter-spacing: -.01em; }
.tpl__d { color: var(--text-2); font-size: 13.5px; margin-top: 3px; }
.tpl__meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.tag {
  font-family: var(--mono); font-size: 10.5px; color: var(--text-3);
  border: 1px solid var(--line); border-radius: 5px; padding: 2px 7px;
}
.tpl__foot { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--line-soft); }
.tpl__prompt { flex: 1; font-family: var(--mono); font-size: 11.5px; color: var(--text-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.btn {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 8px;
  font-size: 13px; font-weight: 500; transition: background .12s, color .12s, border-color .12s;
}
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-hi); }
.btn--ghost { color: var(--text-2); border: 1px solid var(--line); }
.btn--ghost:hover { color: var(--text); border-color: var(--text-3); }
.btn--sm { padding: 5px 10px; font-size: 12.5px; }

/* ═══ BELEGVORSCHAU ═════════════════════════════════════════════════ */
.preview {
  background: var(--bg-deep); border-left: 1px solid var(--line);
  display: flex; flex-direction: column; min-width: 0; overflow: hidden;
}
.preview[hidden] { display: none; }
.preview__head { display: flex; align-items: flex-start; gap: 10px; padding: 12px 12px 12px 16px;
  border-bottom: 1px solid var(--line-soft); flex: none; }
.preview__meta { flex: 1; min-width: 0; }
.preview__title { font-size: 12.5px; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.preview__sub { font-size: 11px; color: var(--text-3); margin-top: 3px; }
.preview__body { flex: 1; overflow-y: auto; padding: 20px 16px 40px; }
.preview__foot { flex: none; padding: 9px 16px; border-top: 1px solid var(--line-soft);
  font-size: 10.5px; color: var(--text-3); }

/* Dokumentseite */
.docpage {
  background: var(--bg-surface); border: 1px solid var(--line); border-radius: 6px;
  padding: 26px 24px; font-size: 12.5px; line-height: 1.75; color: var(--text-2);
}
:root[data-theme="light"] .docpage { background: #fff; }
.docpage__h { font-family: var(--mono); font-size: 11px; color: var(--text-3); letter-spacing: .06em;
  text-transform: uppercase; padding-bottom: 12px; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
.docpage p { margin: 0 0 11px; }
.docpage p:last-child { margin-bottom: 0; }
.docpage .hl {
  display: block; background: var(--accent-mute); color: var(--text);
  border-left: 2px solid var(--accent); border-radius: 0 4px 4px 0;
  padding: 9px 12px; margin: 4px 0 13px -14px;
}
.docpage__redact { display: inline-block; background: var(--line); border-radius: 2px; color: transparent;
  user-select: none; }

/* ═══ ÜBERLAGERUNGEN ════════════════════════════════════════════════ */
.overlay {
  position: fixed; inset: 0; z-index: 200;
  background: color-mix(in srgb, #000 55%, transparent);
  backdrop-filter: blur(3px);
  display: grid; place-items: start center; padding: 12vh 20px 20px;
  animation: fade .14s var(--ease);
}
:root[data-theme="light"] .overlay { background: color-mix(in srgb, #101828 28%, transparent); }
.overlay[hidden] { display: none; }
@keyframes fade { from { opacity: 0; } }

.modal {
  width: 100%; background: var(--bg-raised); border-radius: var(--r-lg);
  box-shadow: var(--shadow-panel); overflow: hidden;
  animation: rise .18s var(--ease);
}
@keyframes rise { from { opacity: 0; transform: translateY(-6px); } }
.modal--search, .modal--pick { max-width: 620px; }
.modal--ask { max-width: 460px; padding: 22px; }
.modal--proto { max-width: 640px; padding: 26px; position: relative; max-height: 76vh; overflow-y: auto; }
.modal__x { position: absolute; top: 14px; right: 14px; }

.modal__search { display: flex; align-items: center; gap: 10px; padding: 13px 15px;
  border-bottom: 1px solid var(--line); color: var(--text-3); }
.modal__search input { flex: 1; border: 0; background: none; outline: none; font-size: 15px; }
.modal__search input::placeholder { color: var(--text-3); }
.modal__results { max-height: 46vh; overflow-y: auto; padding: 6px; }
.modal__foot { padding: 9px 15px; border-top: 1px solid var(--line); font-size: 10.5px; color: var(--text-3);
  letter-spacing: .06em; text-transform: uppercase; }
.modal__foot--actions { display: flex; align-items: center; justify-content: space-between; text-transform: none;
  letter-spacing: 0; padding: 10px 12px; }
.row-gap { display: flex; gap: 8px; }

.resgroup { padding: 8px 9px 4px; font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-3); display: flex; gap: 8px; }
.res {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 8px 9px; border-radius: var(--r-sm); color: var(--text); font-size: 13.5px;
}
.res:hover, .res.is-cursor { background: var(--bg-hover); }
.res__ico { color: var(--text-3); }
.res__t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.res__m { font-family: var(--mono); font-size: 11px; color: var(--text-3); white-space: nowrap; }
.res mark { background: none; color: var(--accent-hi); font-weight: 600; }
:root[data-theme="light"] .res mark { color: var(--accent); }
.res__box { width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid var(--text-3);
  display: grid; place-items: center; color: transparent; flex: none; }
.res.is-sel .res__box { background: var(--accent); border-color: var(--accent); color: #fff; }
.res__empty { padding: 22px 12px; text-align: center; color: var(--text-3); font-size: 13px; }

.modal__title { font-size: 17px; font-weight: 600; letter-spacing: -.02em; margin-bottom: 8px; }
.modal__text { font-size: 13.5px; color: var(--text-2); line-height: 1.6; }
.modal__text .mono { font-size: 12.5px; color: var(--text); }
.modal__h3 { font-size: 12px; font-family: var(--mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-3); margin: 22px 0 10px; }
.modal__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.modal__actions--between { justify-content: space-between; align-items: center; }

.askopts { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.askopt { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; padding: 11px 13px;
  border: 1px solid var(--line); border-radius: var(--r); cursor: pointer; transition: border-color .12s, background .12s; }
.askopt:hover { border-color: var(--text-3); }
.askopt.is-sel { border-color: var(--accent); background: var(--accent-mute); }
.askopt input { grid-row: span 2; margin-top: 3px; accent-color: var(--accent); }
.askopt__t { font-size: 13.5px; font-weight: 500; }
.askopt__d { font-size: 12.5px; color: var(--text-2); }

.probelist { display: flex; flex-direction: column; gap: 8px; }
.probelist li { display: flex; align-items: baseline; gap: 10px; font-size: 12.5px; color: var(--text-2); }
.probe { flex: none; width: 190px; text-align: left; color: var(--accent); font-size: 12.5px;
  font-weight: 500; padding: 2px 0; border-bottom: 1px solid transparent; }
.probe:hover { border-bottom-color: var(--accent); }

.opts { display: flex; flex-direction: column; gap: 10px; }
.opt { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.opt--row { flex-direction: row; align-items: flex-start; gap: 10px; cursor: pointer; }
.opt--row input { margin-top: 3px; accent-color: var(--accent); }
.opt__t { font-weight: 500; display: block; }
.opt__d { color: var(--text-3); font-size: 12.5px; display: block; margin-top: 2px; }
.opt select { background: var(--bg-surface); border: 1px solid var(--line); border-radius: 7px;
  padding: 6px 9px; font-size: 13px; outline: none; }
.miniopt { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-3); cursor: pointer; }
.miniopt input { accent-color: var(--accent); }

/* Schwebende Menüs */
.menu {
  position: fixed; z-index: 300; min-width: 220px; padding: 5px;
  background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow-pop); animation: rise .12s var(--ease);
}
.menu[hidden] { display: none; }
.menu--scope { position: absolute; top: calc(100% + 5px); left: 0; min-width: 300px; }
.menu__item {
  display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left;
  padding: 8px 10px; border-radius: var(--r-sm); color: var(--text); font-size: 13.5px;
}
.menu__item .i { margin-top: 2px; color: var(--text-3); }
.menu__item:hover { background: var(--bg-hover); }
.menu__item b { font-weight: 500; display: block; }
.menu__item em { font-style: normal; display: block; font-size: 12px; color: var(--text-3); margin-top: 1px; }
.menu__item--slim { align-items: center; padding: 7px 10px; font-size: 13px; }
.menu__item--slim .i { margin-top: 0; }
.menu__item--danger:hover { color: #f87171; }
.menu__item--danger:hover .i { color: #f87171; }
.menu__sec { padding: 8px 10px 5px; font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-3); }
.menu__item .mono { font-size: 11px; color: var(--text-3); margin-left: auto; white-space: nowrap; }
.menu__item.is-sel { background: var(--accent-mute); }

.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  z-index: 400; background: var(--bg-raised); border: 1px solid var(--line);
  border-radius: 9px; padding: 9px 14px; font-size: 13px; color: var(--text);
  box-shadow: var(--shadow-pop); animation: rise .16s var(--ease);
}
.toast[hidden] { display: none; }

.scrim { display: none; }

/* ═══ SCHMALE FENSTER ═══════════════════════════════════════════════ */
@media (max-width: 1180px) {
  .app.has-preview { grid-template-columns: var(--rail-w) minmax(0,1fr) 0; }
  .app.is-collapsed.has-preview { grid-template-columns: var(--rail-w-collapsed) minmax(0,1fr) 0; }
  .preview { position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 92vw); z-index: 150;
    box-shadow: -20px 0 60px -20px rgba(0,0,0,.7); animation: slidein .2s var(--ease); }
  @keyframes slidein { from { transform: translateX(20px); opacity: 0; } }
}

/* Unter 900 px: Seitenspalte wird zur Schublade (§ 2) */
@media (max-width: 900px) {
  .app, .app.is-collapsed, .app.has-preview { grid-template-columns: 0 minmax(0,1fr) 0; }
  .rail { position: fixed; top: 0; bottom: 0; left: 0; width: var(--rail-w); z-index: 160;
    transform: translateX(-100%); transition: transform .22s var(--ease); }
  .app.is-drawer .rail { transform: none; box-shadow: 20px 0 60px -20px rgba(0,0,0,.7); }
  .app.is-collapsed .rail { width: var(--rail-w); }
  .app.is-collapsed .brand__name, .app.is-collapsed .railsearch__label,
  .app.is-collapsed .railitem > span:not(.dot), .app.is-collapsed .railgroup,
  .app.is-collapsed .railmore, .app.is-collapsed .usage__num,
  .app.is-collapsed .who__name { display: revert; }
  .app.is-collapsed .railsearch, .app.is-collapsed .railitem { justify-content: flex-start; padding: 7px 9px; }
  .scrim { display: block; position: fixed; inset: 0; z-index: 155; background: rgba(0,0,0,.5);
    opacity: 0; pointer-events: none; transition: opacity .2s; }
  .app.is-drawer .scrim { opacity: 1; pointer-events: auto; }
  .topbar__menu { display: grid; }
  .thread { padding: 8px 16px; }
  .composer-wrap { padding: 0 16px 12px; }
  .scope__btn { max-width: 40vw; }
  .suggests { grid-template-columns: 1fr; }
  .fresh__text { display: none; }
  .chip--proto span:not(.i) { display: none; }
}

@media (max-width: 560px) {
  .composer__bar { gap: 2px; }
  .ctrl:not(.ctrl--toggle) span, #tglDeep span { display: none; }
  .ctrlgroup--sep { padding-left: 4px; margin-left: 0; }
  .empty__title { font-size: 22px; }
  .composer__foot { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .thread { scroll-behavior: auto; }
}