/* ═══════════════════════════════════════════════════════════════════════
   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:        #2f323a;
  --line-soft:   #232529;
  --text:        #e8eaee;
  --text-2:      #9aa1ad;
  --text-3:      #828894;   /* 4.5:1 auch auf --bg-hover (Belegzeile beim Überfahren) */
  --accent:      #3b82f6;
  --accent-hi:   #60a5fa;
  --accent-mute: #1a2740;
  --amber:       #f7a524;
  --amber-mute:  #2a2011;
  --amber-line:  #4d3a15;
  --ok:          #3f9d6d;
  --bubble-bg:   #3574da;   /* Nutzerblase, Nexoria-Blau, 4.5:1 mit weißem Text */
  --bubble-fg:   #ffffff;

  --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;

  /*, Schriftskala. rem, damit vergrößerte Browserschrift wirklich greift.
       Sieben Stufen statt vierzehn Beinahe-Gleicher., */
  --t-micro:   0.6875rem;  /* 11 px, Mono-Etiketten, Seitenzahlen */
  --t-meta:    0.78125rem; /* 12.5 px, Metadaten, Nebenangaben */
  --t-ui:      0.84375rem; /* 13.5 px, Bedienelemente, Listen */
  --t-body:    0.9375rem;  /* 15 px, Fließtext, Eingabe */
  --t-lead:    1.0625rem;  /* 17 px, Vorspann */
  --t-title:   1.3125rem;  /* 21 px, Seitentitel */
  --t-display: 1.75rem;    /* 28 px, Leerzustand */

  --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:        #d7dce4;
  --line-soft:   #e6eaf0;
  --text:        #14171c;
  --text-2:      #596171;
  --text-3:      #656b76;   /* 4.5:1 auch auf --bg-hover */
  --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;
  --bubble-bg:   #2563eb;   /* Nexoria-Blau, hell: 5.2:1 mit weißem Text */
  --bubble-fg:   #ffffff;

  --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: var(--t-body);
  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; }
/* Der Zeichenvorrat darf keine Zeile erzeugen. Als inline-Element mit Höhe 0
   baut er sonst eine Zeilenbox von rund 23 px auf, schiebt die App nach unten
   und schneidet unten die Fußzeile ab. */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.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: var(--t-micro); 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: var(--t-micro); 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-surface);
  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;
}
/* Die Wortmarke im Seitenkopf ist entfallen (14.08.2026), sie stand doppelt,
   weil die Fensterleiste des Launchers dieselbe Marke bereits trägt. Vorher
   schob .brand mit flex:1 den Knopf nach rechts, das übernimmt jetzt er selbst. */
.rail__collapse { margin-left: auto; }
.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;
}
/* Das Monogramm steht auf einer blauen Platte, in beiden Modi dasselbe Bild,
   damit die Marke nicht je nach Helligkeit die Farbe wechselt. */
.brand__mark { width: 22px; height: 22px; flex: none; }
.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: var(--t-body); font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
/* Der Knopf muss im eingeklappten Zustand sichtbar bleiben, sonst sperrt
   er sich selbst aus und die Seitenspalte lässt sich nicht mehr öffnen. */
.rail__collapse { opacity: .7; 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; min-height: 0; 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-surface); }

/* Wissensquelle als Reiter: entweder der eigene Bestand oder das Web.
   Die Stellung gilt für den ganzen Chat und steht dort, wo man sie sucht. */
.modes {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 3px; margin-bottom: 10px;
  background: var(--bg-surface); border: 1px solid var(--line); border-radius: var(--r-sm);
}
.modes.is-single { grid-template-columns: 1fr; }
.mode {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 6px 4px; border-radius: 6px; min-width: 0;
  color: var(--text-3); font-size: var(--t-meta); white-space: nowrap;
  transition: background .14s, color .14s;
}
.mode span { overflow: hidden; text-overflow: ellipsis; }
.mode:hover { color: var(--text-2); }
.mode.is-on { background: var(--bg-raised); color: var(--text); font-weight: 500;
  box-shadow: 0 1px 2px rgba(0,0,0,.35); }
:root[data-theme="light"] .mode.is-on { background: #fff; box-shadow: 0 1px 2px rgba(16,20,28,.1); }
.mode.is-on .i { color: var(--accent); }

/* 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: #3a3d45; background: var(--bg-raised); }
:root[data-theme="light"] .railsearch:hover { border-color: #c9cfd8; }
.railsearch__label { flex: 1; text-align: left; font-size: var(--t-ui); }
.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: var(--t-ui); 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: var(--t-micro); 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: var(--t-ui); 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: 26px; height: 26px; border-radius: 6px; 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: var(--t-meta); 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; }
/* Gefüllter Teil in Nexoria-Blau, der offene Rest schwarz, der Balken soll
   ablesbar sein, nicht dekorativ. */
.usage__bar { flex: 1; height: 6px; border-radius: 3px; background: #000; overflow: hidden;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 12%, transparent); }
.usage__fill { display: block; height: 100%; border-radius: 2px; background: var(--accent);
  transition: background .2s, width .3s var(--ease); }
.usage.is-warn .usage__fill { background: var(--amber); }
.usage__num { font-size: var(--t-micro); color: var(--text-3); letter-spacing: -.02em; }
.who { display: flex; align-items: center; gap: 9px; padding: 4px; }
.who__name { font-size: var(--t-ui); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Rund, weil hier ein Profilbild steht, bei Personen ist der Kreis die
   erwartete Form, das abgerundete Quadrat liest sich als App oder Datei. */
.ava {
  width: 24px; height: 24px; border-radius: 50%; overflow: hidden; flex: none; display: grid; place-items: center;
  background: var(--accent-mute); color: var(--accent-hi);
  font-family: var(--mono); font-size: var(--t-micro); 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__top { flex-direction: column; gap: 6px; padding: 12px 8px 6px; }
.app.is-collapsed .brand { flex: none; justify-content: center; padding: 0; }
.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-deep); }
.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: var(--t-ui); 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); }

/* Nur der Ausnahmefall meldet sich. Ein Abzeichen für „alles in Ordnung"
   verbraucht Aufmerksamkeit, die der Ausnahmefall dann nicht mehr bekommt. */
.freshwarn {
  display: flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: var(--r-sm);
  color: var(--amber); font-size: var(--t-meta);
  border: 1px solid var(--amber-line); background: var(--amber-mute);
}
.freshwarn:hover { border-color: var(--amber); }

.srcbtn {
  display: flex; align-items: center; gap: 7px; padding: 5px 9px; border-radius: var(--r-sm);
  color: var(--text-2); font-size: var(--t-meta);
  transition: background .12s, color .12s;
}
.srcbtn:hover { background: var(--bg-hover); color: var(--text); }
.srcbtn[aria-pressed="true"] { background: var(--bg-hover); color: var(--text); }
.srcbtn__n { font-size: var(--t-micro); color: var(--text-3);
  border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; line-height: 1.5; }

.fresh { position: relative; display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: var(--r-sm); }
/* Nicht aktuell wird durch die Form angezeigt, nicht nur durch die Farbe 
   auf schmalen Fenstern ist die Beschriftung ausgeblendet (HIG Zugänglichkeit). */
.fresh__ind { display: flex; }
.fresh__ind .i { color: var(--amber); }
.fresh__text { font-size: var(--t-meta); 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: 5px 9px;
  border: 1px solid var(--line); border-radius: 20px;
  color: var(--text-3); font-size: var(--t-micro); 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: var(--t-meta); 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; }


.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-deep); }

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

/* Ruhige Marke: einmal einblenden, dann stillstehen. Kein Pulsieren, kein
   Lichtschein, beides liest sich als KI-Effekt, und genau das soll es nicht. */
.mark { position: relative; width: 96px; height: 88px; margin: 0 auto 28px; }
.mark__bubble { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--accent); }
.mark__logo {
  position: absolute; left: 50%; top: 38px; transform: translate(-50%, -50%);
  width: 40px; height: 40px; background: none; border-radius: 0;
  opacity: 0; animation: logoin .45s var(--ease) .1s forwards;
}
.mark, .mark__bubble { opacity: 0; animation: logoin .45s var(--ease) forwards; }
@keyframes logoin { to { opacity: 1; } }

.empty__title { font-size: var(--t-display); font-weight: 500; letter-spacing: -.03em; margin-bottom: 8px;
  opacity: 0; animation: risein .4s var(--ease) forwards; }
.empty__sub { color: var(--text-3); font-size: var(--t-ui); max-width: 60ch; margin: 0 auto;
  opacity: 0; animation: risein .4s var(--ease) .08s 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; } }
/* Einstiege als ruhige Zeilen unter der Eingabe */
.suggests { max-width: var(--read); margin: 18px auto 0; display: flex; flex-direction: column; }
.suggest {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  padding: 11px 12px; border-radius: var(--r); color: var(--text-2); font-size: var(--t-ui);
  transition: background .12s, color .12s;
}
.suggest:hover { background: var(--bg-surface); color: var(--text); }
.suggest .i { color: var(--text-3); }


/* 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: var(--t-meta); color: var(--text-2);
}
.threadnote .i { color: var(--amber); }

.stamp { max-width: var(--read); margin: 6px auto 14px; text-align: center;
  font-size: var(--t-micro); color: var(--text-3); }

/* Solange nichts gefragt wurde, steht die Eingabe in der Mitte 
   erst mit der ersten Antwort wandert sie an den unteren Rand. */
.view--chat.is-empty { justify-content: center; }
.view--chat.is-empty .thread { flex: 0 0 auto; overflow: visible; }
/* Die Zeile stand im Leerzustand auf display:none. Sie ist aber gerade dort
   wichtig, weil man vor der ersten Frage noch nicht weiss, woran man ist.
   Sie steht jetzt immer, wie im Vorbild. */
.view--chat:not(.is-empty) .suggests { display: none; }

/*, 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; justify-content: flex-end; margin-bottom: 22px; }
.ask > div { max-width: 78%; }
.ask__text {
  font-size: var(--t-body); letter-spacing: -.005em;
  background: var(--bubble-bg); color: var(--bubble-fg);
  border-radius: 20px; padding: 10px 17px;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.ask__attach { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; justify-content: flex-end; }

.reply { display: block; }
.reply__main { min-width: 0; }
.reply__text { font-size: var(--t-body); 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 { color: var(--text); font-size: var(--t-body); padding: 2px 0;
  animation: atmen 1.6s ease-in-out infinite; }
@keyframes atmen { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
.working__steps { margin-top: 10px; display: flex; flex-direction: column; gap: 5px; }
.wstep { display: flex; align-items: center; gap: 8px; font-size: var(--t-meta); 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: var(--t-meta); 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: var(--t-micro); 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-surface); }
.src {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 10px 12px; font-size: var(--t-ui); 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: var(--t-meta); letter-spacing: -.01em; }
.src__m { font-family: var(--mono); font-size: var(--t-micro); color: var(--text-3); white-space: nowrap; }
.src__n { font-family: var(--mono); font-size: var(--t-micro); 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: var(--t-micro); 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: var(--t-ui); }
.src__dom { font-family: var(--mono); font-size: var(--t-micro); 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: var(--t-micro); letter-spacing: .14em; text-transform: uppercase;
  color: var(--amber); display: flex; align-items: center; gap: 7px; margin-bottom: 7px;
}
.abstain__t { font-size: var(--t-body); line-height: 1.6; }
.abstain__hint { margin-top: 10px; font-size: var(--t-ui); color: var(--text-2); }
.abstain__hint .mono { color: var(--text); font-size: var(--t-meta); }

/*, Am Ende jeder Antwort (§ 6.6), */
.actions { display: flex; align-items: center; gap: 2px; margin-top: 14px; margin-left: -7px; }
.act {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px;
  color: var(--text-3); transition: color .12s, background .12s;
}
.act--wide { width: auto; padding: 0 9px; gap: 6px; display: flex; align-items: center;
  font-size: var(--t-meta); }
.act:hover { color: var(--text); background: var(--bg-hover); }
.act.is-on { color: var(--accent); }
.act--sep { margin-left: 6px; }

/* 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: var(--t-meta);
}
:root[data-theme="light"] .att { background: var(--bg-hover); }
.att__t { font-family: var(--mono); font-size: var(--t-micro); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.att__x { width: 24px; height: 24px; margin: -4px 0; border-radius: 6px; 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: var(--t-micro); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }

/* ═══ EINGABELEISTE (§ 5) ═══════════════════════════════════════════ */
.composer-wrap { flex: none; padding: 0 24px 16px; }
.composer {
  max-width: var(--read); margin: 0 auto;
  background: #212328; border: 1px solid transparent;
  border-radius: 30px; padding: 5px 8px;
  transition: border-color .15s;
}
:root[data-theme="light"] .composer { background: var(--bg-hover); }
.composer:focus-within { border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.composer__pre { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px 12px 2px; }

.composer__row { display: flex; align-items: center; gap: 4px; padding: 2px; }
.cplus, .cmic {
  width: 38px; height: 38px; flex: none; border-radius: 50%; display: grid; place-items: center;
  color: var(--text-2); transition: background .12s, color .12s;
}
.cplus .i { width: 21px; height: 21px; }
.cplus:hover, .cmic:hover { background: color-mix(in srgb, var(--text) 9%, transparent); color: var(--text); }

/* Ruhige Textbedienelemente rechts im Feld, wie im Vorbild */
.cctl {
  flex: none; display: flex; align-items: center; gap: 5px;
  padding: 8px 12px; border-radius: 20px;
  color: var(--text-2); font-size: var(--t-ui); white-space: nowrap;
  transition: background .12s, color .12s;
}
.cctl:hover, .cctl.is-open { background: color-mix(in srgb, var(--text) 9%, transparent); color: var(--text); }
.cctl__chev { color: var(--text-3); }
.cctl.is-deep { color: var(--accent); }

.composer__input {
  flex: 1; min-width: 0; display: block; border: 0; background: none; resize: none;
  padding: 11px 6px; font-size: var(--t-body); line-height: 1.5; max-height: 190px;
  outline: none; overflow-y: auto;
}
.composer__input::placeholder { color: var(--text-3); }

/* Textfeld oben, Schalter darunter, nicht daneben (§ 5) */
/* Ein Knopf, zwei Aufgaben: leeres Feld → Sprachmodus, getippter Text → senden */
.send {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: grid; place-items: center; color: #fff; background: var(--accent);
  transition: filter .12s, background .12s;
}
.send > .i { grid-area: 1 / 1; stroke-width: 2.1; }
.send__arrow { display: none; }
.composer.has-text .send__mic  { display: none; }
.composer.has-text .send__arrow { display: block; }
.send:hover { filter: brightness(1.12); }
.send:disabled { background: var(--bg-hover); color: var(--text-3); cursor: not-allowed; filter: none; }

.composer__hint {
  padding: 0 14px 10px; font-size: var(--t-meta); color: var(--amber);
  display: flex; align-items: center; gap: 7px;
}
.composer__foot {
  max-width: var(--read); margin: 0 auto 9px; text-align: center;
  font-size: var(--t-micro); 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: var(--t-micro); 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: 24px; height: 24px; border-radius: 6px; }
.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: var(--t-meta);
  padding: 4px 8px 4px 4px; border-radius: 7px; margin-bottom: 14px; }
.backbtn:hover { color: var(--text); background: var(--bg-hover); }
.page__title { font-size: var(--t-title); font-weight: 600; letter-spacing: -.02em; margin-bottom: 6px; }
.page__sub { color: var(--text-2); font-size: var(--t-body); 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: var(--t-ui); }
.conn__m { font-size: var(--t-meta); 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: var(--t-meta); 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: var(--t-body); font-weight: 550; letter-spacing: -.01em; }
.tpl__d { color: var(--text-2); font-size: var(--t-ui); margin-top: 3px; }
.tpl__meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.tag {
  font-family: var(--mono); font-size: var(--t-micro); 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: var(--t-micro); 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: var(--t-ui); 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: var(--t-meta); }

/* ═══ 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: center; gap: 8px; padding: 11px 12px 11px 16px;
  border-bottom: 1px solid var(--line-soft); flex: none; }
.preview__head .iconbtn { margin-top: 0; }

/* Quellenliste im rechten Container */
.pvlist { display: flex; flex-direction: column; gap: 2px; }
.pvgroup { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-3); padding: 10px 8px 6px; }
.pvgroup:first-child { padding-top: 0; }
.pvitem {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 9px 10px; border-radius: var(--r-sm); color: var(--text);
  border: 1px solid transparent; transition: background .12s, border-color .12s;
}
.pvitem:hover { background: var(--bg-surface); border-color: var(--line); }
.pvitem__ico { color: var(--text-3); }
.pvitem__main { flex: 1; min-width: 0; }
.pvitem__t { font-family: var(--mono); font-size: var(--t-meta); letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pvitem__m { font-size: var(--t-micro); color: var(--text-3); margin-top: 2px; }
.pvitem__go { color: var(--text-3); opacity: 0; transition: opacity .12s; }
.pvitem:hover .pvitem__go { opacity: 1; }
.pvempty { padding: 28px 12px; text-align: center; color: var(--text-3); font-size: var(--t-meta); line-height: 1.6; }
.preview__meta { flex: 1; min-width: 0; }
.preview__title { font-size: var(--t-meta); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.preview__sub { font-size: var(--t-micro); color: var(--text-3); margin-top: 3px; }
.preview__body { flex: 1; min-height: 0; overflow-y: auto; padding: 20px 16px 40px; }
.preview__foot { flex: none; padding: 9px 16px; border-top: 1px solid var(--line-soft);
  font-size: var(--t-micro); color: var(--text-3); }

/* Dokumentseite */
.docpage {
  background: var(--bg-surface); border: 1px solid var(--line); border-radius: 6px;
  padding: 26px 24px; font-size: var(--t-meta); line-height: 1.75; color: var(--text-2);
}
:root[data-theme="light"] .docpage { background: #fff; }
.docpage__h { font-family: var(--mono); font-size: var(--t-micro); 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: var(--t-body); }
.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: var(--t-micro); 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: var(--t-micro); 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: var(--t-ui);
}
.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: var(--t-micro); 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: var(--t-ui); }

.modal__title { font-size: var(--t-lead); font-weight: 600; letter-spacing: -.02em; margin-bottom: 8px; }
.modal__text { font-size: var(--t-ui); color: var(--text-2); line-height: 1.6; }
.modal__text .mono { font-size: var(--t-meta); color: var(--text); }
.modal__h3 { font-size: var(--t-meta); 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: var(--t-ui); font-weight: 500; }
.askopt__d { font-size: var(--t-meta); color: var(--text-2); }

.probelist { display: flex; flex-direction: column; gap: 8px; }
.probelist li { display: flex; align-items: baseline; gap: 10px; font-size: var(--t-meta); color: var(--text-2); }
.probe { flex: none; width: 190px; text-align: left; color: var(--accent); font-size: var(--t-meta);
  font-weight: 500; padding: 5px 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: var(--t-ui); }
.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: var(--t-meta); display: block; margin-top: 2px; }
.opt select { background: var(--bg-surface); border: 1px solid var(--line); border-radius: 7px;
  padding: 6px 9px; font-size: var(--t-ui); outline: none; }
.miniopt { display: flex; align-items: center; gap: 8px; font-size: var(--t-meta); 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: var(--t-ui);
}
.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: var(--t-meta); color: var(--text-3); margin-top: 1px; }
.menu__item--slim { align-items: center; padding: 7px 10px; font-size: var(--t-ui); }
/* Mehrfachauswahl der Wissensquellen: der Haken sitzt hinten und trägt den
   Zustand. Farbe allein würde ihn nicht tragen, der Haken ist da oder nicht. */
.menu__item[role="menuitemcheckbox"] span { flex: 1; min-width: 0; }
.menu__tick { margin-top: 2px; opacity: 0; color: var(--accent); }
.menu__item[aria-checked="true"] .menu__tick { opacity: 1; }
.menu__sep { height: 1px; background: var(--line); margin: 5px 8px; }
.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: var(--t-micro); letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-3); }
.menu__item .mono { font-size: var(--t-micro); color: var(--text-3); margin-left: auto; white-space: nowrap; }
.menu__item.is-sel { background: var(--accent-mute); }

/* ═══ SPRACHMODUS ═══════════════════════════════════════════════════ */
.overlay--voice { place-items: center; padding: 20px; }
.voice {
  width: 100%; max-width: 420px; text-align: center; padding: 40px 28px 28px;
  background: var(--bg-raised); border: 1px solid var(--line); border-radius: 20px;
  box-shadow: var(--shadow-panel); animation: rise .18s var(--ease);
}
.voice__orb {
  width: 92px; height: 92px; margin: 0 auto 22px; border-radius: 50%;
  display: grid; place-items: center; color: #fff; background: var(--accent);
  position: relative;
}
.voice__orb .i { width: 34px; height: 34px; stroke-width: 1.5; }
/* Ein einzelner, langsamer Ring zeigt „hört zu", Zustandsanzeige, keine Zierde */
.voice__orb::after {
  content: ''; position: absolute; inset: -10px; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--accent) 50%, transparent);
  animation: hoert 2.4s var(--ease) infinite;
}
@keyframes hoert {
  0%   { transform: scale(.92); opacity: .8; }
  70%  { transform: scale(1.16); opacity: 0; }
  100% { transform: scale(1.16); opacity: 0; }
}
.voice__title { font-size: var(--t-title); font-weight: 500; letter-spacing: -.02em; }
.voice__sub { color: var(--text-2); font-size: var(--t-ui); margin-top: 6px; }
.voice__note { color: var(--text-3); font-size: var(--t-micro); letter-spacing: .1em;
  text-transform: uppercase; margin-top: 16px; }
.voice__actions { margin-top: 22px; display: flex; justify-content: center; }

.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: var(--t-ui); 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: var(--t-title); }
  .composer__foot { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  /* Bewegung abschalten, nicht beschleunigen: eine unendliche Animation mit
     0,01 ms Dauer flackert, statt zu ruhen, und Flackern ist genau das,
     wovor die Einstellung schützen soll. */
  *, *::before, *::after {
    animation: none !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  /* Endzustände nachreichen, sonst bleibt der Leerzustand leer. */
  .mark, .mark__bubble, .mark__logo, .empty__title, .empty__sub { opacity: 1; transform: none; }
  .voice__orb::after { display: none; }
  .caret { opacity: 1; }
  .working__pulse { opacity: .9; }
}


/* ═══ NACHTRAG 14.08.2026 ═══════════════════════════════════════════
   Sammelte sich aus einer Durchsicht: Symbolstil, eingeklappte
   Seitenspalte, Hinweisfläche, neue Elemente.                        */

/* ── Symbole: dünner und ruhiger, mit kurzer Rückmeldung beim Zeigen.
   Die Bewegung ist bewusst klein, sie soll bestätigen, dass etwas
   anfassbar ist, nicht auf sich aufmerksam machen. */
/* Auf das freigegebene Muster gebracht: dort tragen die Zeichen auf einem
   24er Raster die Staerke 2. Kleinere Groessen bekommen relativ etwas mehr,
   sonst wirken sie neben den grossen duenn. */
.i { stroke-width: 1.9; }
.i--sm { stroke-width: 2; }
.i--xs { stroke-width: 2.5; }
/* Gemessen an der Vorlage: Dort bewegt sich das Symbol selbst gar nicht.
   Die Rueckmeldung liegt allein auf der Zeile, 150 ms auf Farbe und Flaeche.
   Ein mitwachsendes Symbol wirkt daneben unruhig, also faellt es weg. */
.act, .iconbtn, .railitem, .menu__item, .mode, .railsearch, .chatitem, .scopeline__btn, .cctl {
  transition: color .15s cubic-bezier(.4, 0, .2, 1), background-color .15s cubic-bezier(.4, 0, .2, 1);
}
.act:active .i, .iconbtn:active .i { transform: none; }

/* ── Hinweis auf reine Websuche.
   Gestrichelt liest sich überall sonst als „unfertig" oder „Platzhalter";
   für eine gültige Statusaussage ist das die falsche Ansage. Und das
   Symbol saß mittig, was bei zweizeiligem Text neben der Lücke hängt. */
.threadnote {
  align-items: flex-start;
  border: 1px solid color-mix(in srgb, var(--amber) 24%, transparent);
  padding: 10px 13px; line-height: 1.5;
}
.threadnote .i { margin-top: 1px; }

/* ── Modellname unter der Seitenumschaltung */
.modelname { font-size: var(--t-micro); color: var(--text-3); letter-spacing: .04em;
  margin: -6px 0 12px; padding: 0 3px; }

/* ── Leere Chatliste */
.listempty { font-size: var(--t-meta); color: var(--text-3); line-height: 1.5;
  padding: 6px 9px 10px; margin: 0; }

/* ── Eingeklappte Seitenspalte: ein Raster statt einer Sammlung.
   Vorher trug die Suche als einziges Element Rahmen und Fläche, die
   Umschaltung blieb ein zweigeteiltes Kästchen mit zwei gequetschten
   Symbolen, und die Trefferflächen liefen auseinander. Unter 900 px wird
   die Spalte zur Schublade, dort gilt nichts davon. */
@media (min-width: 901px) {
  .app.is-collapsed .rail__body { padding: 8px 8px; }

  .app.is-collapsed .railsearch,
  .app.is-collapsed .railitem,
  .app.is-collapsed .mode {
    width: 40px; height: 34px; margin: 0 auto 2px; padding: 0; gap: 0;
    display: flex; align-items: center; justify-content: center;
    border: 0; background: none; border-radius: var(--r-sm);
  }
  .app.is-collapsed .railsearch:hover,
  .app.is-collapsed .mode:hover { background: var(--bg-hover); color: var(--text); }

  /* Die Umschaltung verliert ihr Gehäuse und wird zu zwei Symbolen
     untereinander. Der aktive trägt eine gefüllte Fläche, nicht nur Farbe,
     damit der Zustand auch ohne Farbunterscheidung ablesbar bleibt. */
  .app.is-collapsed .modes {
    display: flex; flex-direction: column; gap: 2px;
    background: none; border: 0; padding: 0; margin-bottom: 6px;
  }
  .app.is-collapsed .mode.is-on { background: var(--bg-hover); box-shadow: none; }
  /* Die Beschriftung fiel im schmalen Streifen auf „Fi…“ zusammen 
     ein abgeschnittenes Wort sagt weniger als gar keins. */
  .app.is-collapsed .mode span { display: none; }
  .app.is-collapsed .modelname { display: none; }

  /* Gruppen durch eine Haarlinie trennen statt durch Zwischenräume, die
     im schmalen Streifen nicht mehr als Gruppierung lesbar wären. */
  .app.is-collapsed .railnav { margin-bottom: 8px; padding-bottom: 8px;
    border-bottom: 1px solid var(--line); gap: 2px; }

  /* Der Verbrauchsbalken ohne seine Zahl ist eine Dekoration. Er tritt im
     eingeklappten Zustand ab; ausgeklappt steht er samt Wert wieder da. */
  .app.is-collapsed .usage { display: none; }
  .app.is-collapsed .rail__foot { padding: 8px; border-top: 1px solid var(--line); }

  .app.is-collapsed .i { width: 17px; height: 17px; }
}

/* ── Fehlermeldung: Freitextfeld im Dialog */
.bugtext {
  width: 100%; margin-top: 14px; padding: 10px 12px; resize: vertical;
  background: var(--bg-surface); border: 1px solid var(--line); border-radius: var(--r-sm);
  color: var(--text); font-size: var(--t-ui); line-height: 1.5;
}
.bugtext::placeholder { color: var(--text-3); }
.bugtext:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }

/* ── Übersichtsbalken am rechten Rand des Verlaufs.
   Ein Strich je Beitrag, der gerade gelesene hebt sich ab. Bei langen
   Verläufen sieht man dadurch, wie viel noch kommt, und springt gezielt. */
.minimap {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  z-index: 5; display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
  max-height: 70%; overflow: hidden; padding: 4px 2px;
}
.minimap[hidden] { display: none; }
.mapdash {
  width: 14px; height: 2px; border-radius: 1px; flex: none;
  background: var(--text-3); opacity: .38;
  transition: width .16s var(--ease), opacity .16s, background .16s;
}
.mapdash:hover { opacity: .8; width: 18px; }
.mapdash.is-on { background: var(--text); opacity: 1; width: 20px; height: 2px; }
.mapdash:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (max-width: 900px) { .minimap { display: none; } }

/* ── Käfer neben dem Namen in der Fußzeile der Seitenspalte */
.who__bug { margin-left: auto; opacity: .65; }
.who__bug:hover { opacity: 1; }
@media (min-width: 901px) {
  .app.is-collapsed .who { flex-direction: column; gap: 4px; }
  .app.is-collapsed .who__bug { margin-left: 0; }
}

/* ── Eingabeleiste enger fassen (14.08.2026).
   Sie stand mit 61 px Höhe und einem 40-px-Knopf deutlich über dem, was
   die Vorlage zeigt, und zog dadurch mehr Aufmerksamkeit auf sich als der
   Verlauf darüber. Alle Maße rücken um rund ein Fünftel zusammen; die
   Trefferflächen bleiben mit 32 px über dem Mindestmaß für Zeigegeräte. */
.composer { border-radius: 24px; padding: 3px 6px; }
.composer__row { gap: 3px; padding: 1px; }
.cplus, .cmic { width: 32px; height: 32px; }
.cplus .i { width: 19px; height: 19px; }
.cmic .i { width: 17px; height: 17px; }
.cctl { padding: 6px 10px; border-radius: 16px; font-size: var(--t-meta); }
.composer__input { padding: 8px 6px; font-size: var(--t-ui); max-height: 168px; }
.send { width: 32px; height: 32px; }
.send > .i { width: 17px; height: 17px; }

/* ── Nutzungsbalken: der offene Rest stand hart auf #000. Im hellen Modus
   ist ein schwarzer Balken auf weißem Grund ein Fremdkörper und liest sich
   als gefüllt statt als offen. */
:root[data-theme="light"] .usage__bar { background: #fff; }

/* ── Bildanhang in der Fehlermeldung.
   Die Vorschau kommt als data:-URI ins Bild, die CSP der Seite erlaubt
   img-src 'self' data:, ein blob: würde stumm verworfen. */
.bugshot { position: relative; margin: 12px 0 0; border-radius: var(--r-sm);
  overflow: hidden; border: 1px solid var(--line); background: var(--bg-surface); }
.bugshot[hidden] { display: none; }
.bugshot img { display: block; width: 100%; max-height: 190px; object-fit: contain; }
.bugshot__x { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px;
  border-radius: 50%; display: grid; place-items: center;
  background: color-mix(in srgb, var(--bg-deep) 82%, transparent); color: var(--text); }
.bugshot__x:hover { background: var(--bg-deep); }
.bugrow { display: flex; gap: 8px; }
.bughint { margin-top: 10px; font-size: var(--t-meta); color: var(--text-3); }
#bugPick { display: flex; align-items: center; gap: 7px; }

/* Bezugszeile an der Antwort. Ersetzt den Objekt-Waehler aus der Kopfzeile:
   Der Bezug steht dort, wo er gewirkt hat, und laesst sich von dort aus
   korrigieren. Sie liest sich als Fussnote, nicht als Bedienelement, damit
   sie die Antwort nicht ueberstrahlt. */
.scopeline {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  max-width: var(--read); margin: 14px 0 2px;
  font-size: var(--t-meta); color: var(--text-3);
}
.scopeline .i { color: var(--text-3); }
.scopeline__t b { font-weight: 500; color: var(--text-2); }
.scopeline__btn {
  padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line);
  color: var(--text-2); font-size: var(--t-meta); line-height: 1.5;
  transition: background .16s, color .16s, border-color .16s;
}
.scopeline__btn:hover { background: var(--bg-hover); color: var(--text); border-color: var(--text-3); }
.scopeline__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Gruppen der Seitenspalte auf- und zuklappen. Der Pfeil sitzt vor dem Wort
   und dreht sich, damit der Zustand auch ohne Farbe ablesbar ist. */
.railgroup__label { display: flex; align-items: center; gap: 6px; width: 100%; text-align: left; }
.railgroup__label:hover { color: var(--text-2); }
.railgroup__label:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.railgroup__chev { transition: transform .18s var(--ease); flex: none; }
.railgroup__label[aria-expanded="false"] .railgroup__chev { transform: rotate(-90deg); }
.railgroup__label[aria-expanded="false"] + .chatlist,
.railgroup__label[aria-expanded="false"] + #recentBody { display: none; }

/* ═══ Bewegung der Seitenspalten-Zeichen ════════════════════════════
   Nur hier, nirgends sonst in der Oberflaeche. Ausgeloest wird nach
   750 ms Verweilen mit dem Zeiger, nicht beim Klick: Beim Klick schaut
   man auf das Ziel, nicht auf das Symbol. Jede Bewegung laeuft genau
   einmal und endet, wo sie begonnen hat. Werte wie in der Musterseite. */

.anim-nex .bubble { animation: nx-bubble 1.1s cubic-bezier(.4, 0, .3, 1); transform-origin: 12px 12px; }
.anim-nex .plus   { animation: nx-plus 1.1s cubic-bezier(.35, 0, .25, 1); transform-origin: 12px 10.5px; }
@keyframes nx-bubble { 0%, 100% { transform: scale(1); } 34% { transform: scale(1.06); } 58% { transform: scale(1.06); } 82% { transform: scale(.985); } }
@keyframes nx-plus { from { transform: rotate(0deg); } to { transform: rotate(90deg); } }

.anim-wissen .ln1  { animation: nx-ziehen 1.15s cubic-bezier(.3, .8, .3, 1); }
.anim-wissen .ln2  { animation: nx-ziehen 1.15s cubic-bezier(.3, .8, .3, 1) .16s; }
.anim-wissen .fold { animation: nx-falz 1.15s cubic-bezier(.4, 0, .3, 1); }
.ln1, .ln2 { stroke-dasharray: 1; stroke-dashoffset: 0; }
@keyframes nx-ziehen { 0% { stroke-dashoffset: 1; } 55%, 100% { stroke-dashoffset: 0; } }
@keyframes nx-falz { 0%, 100% { opacity: 1; } 30%, 55% { opacity: .35; } }

.anim-web .meridian { animation: nx-dreh 1.25s cubic-bezier(.35, .1, .25, 1); transform-origin: 12px 12px; }
.anim-web .aequator { animation: nx-aeq 1.25s cubic-bezier(.4, 0, .3, 1); }
@keyframes nx-dreh { 0% { transform: scaleX(1); } 30% { transform: scaleX(.08); } 31% { transform: scaleX(-.08); } 70% { transform: scaleX(-1); } 71% { transform: scaleX(-1); } 100% { transform: scaleX(1); } }
@keyframes nx-aeq { 0%, 100% { opacity: 1; } 30%, 70% { opacity: .55; } }

.anim-suche .lupe  { animation: nx-abtasten 1.15s cubic-bezier(.3, .8, .3, 1); }
.anim-suche .griff { animation: nx-griff 1.15s cubic-bezier(.4, 0, .3, 1); transform-origin: 15.2px 15.2px; }
.lupe { stroke-dasharray: 1; stroke-dashoffset: 0; }
@keyframes nx-abtasten { 0% { stroke-dashoffset: 1; } 60%, 100% { stroke-dashoffset: 0; } }
@keyframes nx-griff { 0%, 100% { transform: scale(1); } 46% { transform: scale(1.18); } 64% { transform: scale(1.18); } }

.anim-vorlage .vorne,
.anim-vorlage .zeile  { animation: nx-blatt 1.1s cubic-bezier(.4, 0, .3, 1); transform-origin: 10.6px 19.4px; }
.anim-vorlage .hinten { animation: nx-hinten 1.1s cubic-bezier(.4, 0, .3, 1); }
@keyframes nx-blatt {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  36%      { transform: translate(-1.4px, -1.6px) rotate(-2.6deg); }
  58%      { transform: translate(-1.4px, -1.6px) rotate(-2.6deg); }
  84%      { transform: translate(.3px, .3px) rotate(.5deg); }
}
@keyframes nx-hinten { 0%, 100% { transform: translate(0, 0); } 36%, 58% { transform: translate(1.1px, -.9px); } }

.anim-konnektor .leitung { animation: nx-impuls 1.2s cubic-bezier(.35, .05, .25, 1); }
.anim-konnektor .modA    { animation: nx-modul 1.2s cubic-bezier(.4, 0, .3, 1); transform-origin: 7.1px 7.6px; }
.anim-konnektor .modB    { animation: nx-modul 1.2s cubic-bezier(.4, 0, .3, 1) .28s; transform-origin: 16.9px 16.4px; }
.leitung { stroke-dasharray: .34 .66; stroke-dashoffset: 0; }
@keyframes nx-impuls { 0% { stroke-dashoffset: 1; } 70%, 100% { stroke-dashoffset: -.34; } }
@keyframes nx-modul { 0%, 100% { transform: scale(1); } 24%, 44% { transform: scale(1.09); } }

/* Ohne diesen Bezug rechnet der Browser die Ursprungspunkte im
   Benutzerkoordinatensystem und die Teile springen aus dem Zeichen. */
.bubble, .plus, .sheet, .fold, .ln1, .ln2, .aequator, .meridian,
.lupe, .griff, .hinten, .vorne, .zeile, .modA, .modB, .leitung { transform-box: view-box; }

@media (prefers-reduced-motion: reduce) {
  [class*="anim-"] * { animation: none !important; }
}

/* ── Vorlagen anlegen und bearbeiten.
   Eine Vorlage ist eine gespeicherte Anweisung an Nex. Wer sie nicht
   aendern kann, kann das Verhalten des Assistenten nicht steuern, und
   genau dafuer sind Vorlagen da. */
.tpl__neu { display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; }
.tpl__akt { display: flex; gap: 2px; margin-left: auto; }
.tpl__t { display: flex; align-items: center; gap: 10px; }
.tplfeld { display: block; margin-top: 14px; }
.tplfeld > span { display: block; font-size: var(--t-meta); color: var(--text-2); margin-bottom: 5px; }
.tplfeld input, .tplfeld textarea {
  width: 100%; padding: 9px 11px; resize: vertical;
  background: var(--bg-surface); border: 1px solid var(--line); border-radius: var(--r-sm);
  color: var(--text); font-size: var(--t-ui); line-height: 1.5;
}
.tplfeld textarea { font-family: var(--mono); font-size: var(--t-meta); }
.tplfeld input::placeholder, .tplfeld textarea::placeholder { color: var(--text-3); }
.tplfeld input:focus-visible, .tplfeld textarea:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent;
}

/* ═══ Eingebettet im Launcher ═══════════════════════════════════════
   Nur wenn die Seite in einem Fenster des Launchers laeuft (?embed=1).

   Die Deckkraft des Rahmens zu senken hat die Seite nicht durchsichtig
   gemacht, sondern aufgehellt: Ein undurchsichtiger dunkler Hintergrund
   wird beim Herunterblenden zu Grau, nicht zu Fenster. Echte Transparenz
   entsteht nur, wenn die Flaechen selbst Alpha tragen und der Fensterkitt
   dahinter die Wand durchscheinen laesst.

   Nur Flaechen bekommen Alpha, kein Text und keine Zeichen. Sonst waere
   es wieder ein Lesbarkeitsproblem statt eines Effekts. */
html[data-embed="1"] body,
html[data-embed="1"] .main {
  background: color-mix(in srgb, var(--bg-deep) calc(var(--emb, .78) * 100%), transparent);
}
html[data-embed="1"] .rail {
  background: color-mix(in srgb, var(--bg-surface) calc(var(--emb, .78) * 100%), transparent);
}
html[data-embed="1"] .composer {
  background: color-mix(in srgb, #212328 calc(var(--emb, .78) * 100%), transparent);
}
html[data-embed="1"][data-theme="light"] .composer {
  background: color-mix(in srgb, var(--bg-hover) calc(var(--emb, .78) * 100%), transparent);
}

/* Diktieren: ein kurzer Wechsel, mehr nicht (Caan, 26.08.2026). */
.cmic, .send { transition: background .12s var(--ease), color .12s var(--ease); }
.cmic .i, .send .i { transition: transform .12s var(--ease); }
.cmic[data-laeuft="true"] { color: var(--accent); background: var(--accent-mute); }
.cmic[data-laeuft="true"] .i, .send[data-laeuft="true"] .i { transform: scale(.88); }
@media (prefers-reduced-motion: reduce) {
  .cmic, .cmic .i, .send, .send .i { transition: none; }
}