/* claude-remote — Oberfläche im Stil „Liquid Glass".
   Dunkler Grund, milchig-durchscheinende Flächen mit Rückblendung, feine
   Lichtkanten, große Rundungen. Der Verlauf scrollt unter Kopf- und Fußzeile
   hindurch; nur dort, wo wirklich etwas dahinter liegt, wird geblurrt.
   Der Zustand der Eingabe hängt allein an body[data-modus]. */

:root {
  color-scheme: dark;

  --bg: #0e1014;
  --bg-hoch: #1c2028;
  --text: #e9ecf1;
  --dim: #98a1b0;
  --leise: #6b7482;
  --line: rgba(255, 255, 255, .10);
  --line-hell: rgba(255, 255, 255, .18);

  --akzent: #8fb8ff;          /* Senden, aktive Kante */
  --warm: #e8956f;            /* Cursor, Sitzung läuft */
  --ok: #5fc493;
  --err: #ff6b62;
  --gold: #e6b85c;            /* Punktzeile: fertig, wartet auf dich */
  --gold-kanal: 230, 184, 92;
  --rec: #6fd2e8;             /* Aufnahme — kühl, damit sie nicht wie Stoppen wirkt */
  --rec-kanal: 111, 210, 232;  /* dieselbe Farbe als Kanal, für Schein und Kanten */
  --orbit-kanal: 200, 182, 255; /* Orbit-Gespräch: das Lila des dritten Fadens */

  /* die drei Fäden im Aufnahme-Zustand (faeden.js liest sie aus) */
  --faden-1: #9cc4ff;
  --faden-2: #7fe3e0;
  --faden-3: #c8b6ff;

  --glas: linear-gradient(155deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .045));
  --glas-hell: linear-gradient(155deg, rgba(255, 255, 255, .19), rgba(255, 255, 255, .07));
  --glas-kante: rgba(255, 255, 255, .16);
  --glas-schatten: 0 14px 34px rgba(0, 0, 0, .38), inset 0 1px 1px rgba(255, 255, 255, .20), inset 0 -1px 2px rgba(255, 255, 255, .05);
  --glas-schatten-flach: 0 6px 18px rgba(0, 0, 0, .25), inset 0 1px 1px rgba(255, 255, 255, .14);

  --r: 18px;
  /* EIN Eckenradius für die ganze Fußzeile: die Auslastungsleiste ist ~30px hoch,
     15px macht sie zur vollen Pille — und dieselben 15px geben den beiden großen
     Knöpfen darunter ihre Ecke. Beide Kanten passen so rechnerisch zusammen. */
  --r-fuss: 15px;
  --slot-h: 68px;
  /* Aufnahmefläche: links der Aufnahmepunkt, rechts die Laufzeit, dazwischen die
     Fäden. Beide Reserven kommen aus derselben Rechnung, damit die Zeichenfläche
     links zum Punkt genau so viel Luft hat wie rechts zur Zahl. */
  --rec-kante: 12px;         /* Abstand von Punkt bzw. Zahl zur Außenkante */
  --rec-punkt: 8px;          /* Durchmesser des Aufnahmepunkts */
  --rec-zeit: 40px;          /* Blickmaß der Laufzeit „MM:SS" bei 13px */
  --rec-luft: 3px;           /* die GLEICHE Luft auf beiden Seiten der Fäden — bewusst
                                knapp: die Fäden sollen bis kurz vor Punkt und Zahl
                                laufen. Weniger als 3px und die Leuchtkanten der
                                Bäuche (halbe Strichbreite 4.5px, an den Enden durch
                                die Hüllkurve auf null gezogen) berühren die Zahl. */
  --punkt-b: calc(var(--rec-kante) + var(--rec-punkt) + var(--rec-luft));   /* 23px */
  --zeit-b: calc(var(--rec-kante) + var(--rec-zeit) + var(--rec-luft));     /* 55px */
  --hinweis-b: 146px;        /* „wird übertragen …" ist länger als die Uhr */
  --top-h: 52px;
  /* Der obere Abstand wird an EINER Stelle gerechnet und überall von hier
     genommen. Vorher stand `env(safe-area-inset-top)` an vier Stellen einzeln
     — dieselbe Konstruktion, die beim Fussabstand schon einmal auseinander
     gelaufen ist. `--kopf-luft` ist die zusätzliche Luft darüber. */
  /* Luft über der Kopfzeile, zusätzlich zum sicheren Rand des Geräts.
     Gilt überall: In Safari auf dem iPhone sitzt die Adressleiste UNTEN, oben
     steht also auch dort nur die Uhr — und die Kopfzeile klebte in beiden
     Fällen gleich dicht darunter. Eine Erkennung des App-Modus braucht es
     dafür nicht; sie wäre nur eine weitere Stelle, die still danebengehen
     kann. */
  --kopf-luft: 14px;
  --oben: calc(env(safe-area-inset-top) + var(--kopf-luft));
  --fuss-h: 132px;           /* Höhe der Fußzeile in Ruhe ohne sichere Ränder */
  --maxw: 760px;
  --rand: max(12px, env(safe-area-inset-left), env(safe-area-inset-right));
  /* Höhe der Bildschirmtastatur. app.js rechnet sie aus dem Unterschied
     zwischen Layout-Fenster und sichtbarem Fenster (window.visualViewport)
     und schreibt sie hierher; ohne Tastatur ist sie 0. Daran hängen die
     Fußzeile und der untere Rand des Verlaufs — nur diese beiden bewegen
     sich, alles andere bleibt stehen. */
  --tastatur: 0px;
  --fuss-zusatz: 0px;        /* Zuschlag für Agenten-Zeile, Anhänge, Vorschläge */
  --fussrand: max(12px, env(safe-area-inset-bottom));
  --zu-b: 40px;              /* Endbreite des Abbrechen-Knopfs (app.js rechnet damit) */

  --feder: cubic-bezier(.32, 1.3, .35, 1);
  --weich: cubic-bezier(.2, .9, .25, 1);
  --schnell: cubic-bezier(.3, 1.6, .4, 1);
}

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  /* Die Seite ist am Fenster FESTGENAGELT und selbst nirgends scrollbar.
     iOS-Safari verkleinert beim Aufgehen der Tastatur nur das sichtbare
     Fenster; das Layout-Fenster bleibt hoch. Ein früherer Versuch hat die
     Seite auf die sichtbare Höhe geschrumpft — dadurch war sie KLEINER als
     das Layout-Fenster, und genau in diesen Überschuss hat Safari beim
     Fokussieren hineingeschoben: die Seite schoss nach oben weg, beim
     zweiten Mal schlimmer als beim ersten. Mit position:fixed am Körper
     gibt es keinen Überschuss und nichts zu scrollen; der Verlauf hat seinen
     eigenen Bereich, und allein die Fußzeile hebt sich um --tastatur an. */
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: radial-gradient(120% 90% at 50% 0%, var(--bg-hoch) 0%, var(--bg) 62%) fixed;
  color: var(--text);
  font: 15px/1.5 -apple-system, "SF Pro Text", BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}
body {
  margin: 0;
  /* fixed + inset:0 heißt: der Körper IST das Fenster. Safari kann ihn weder
     verschieben noch mitziehen — das ist der eigentliche Schutz, nicht eine
     gerechnete Höhe. */
  position: fixed;
  inset: 0;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: pan-y;
  isolation: isolate;
  background: transparent;
}
/* Vier sehr langsam treibende Farbnebel hinter allem — Licht, das durchs Glas
   fällt. Jeder Nebel ist ein eigenes Element mit eigener Bahn, damit sie sich
   unabhängig bewegen. Ziel: 2–5 cm je Minute auf dem Handy, also grob 90–230
   CSS-Pixel je Minute. Bahnlänge / Dauer × 60 ergibt je Nebel:
     blau   737px / 293s → ~151 px/min
     warm   580px / 311s → ~112 px/min
     lila   840px / 251s → ~201 px/min
     teal   506px / 317s → ~96 px/min
   Die Dauern sind Primzahlen (kein gemeinsames Vielfaches), die Startzeiten
   versetzt — so entsteht kein Takt, sondern zufälliges Wabern. */
html::before, html::after, body::before, body::after {
  content: "";
  position: fixed;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
  will-change: transform;
}
html::before {
  left: -18vw; top: -14vh; width: 64vw; height: 44vh;
  background: radial-gradient(closest-side, rgba(110, 150, 230, .20), transparent);
  animation: nebel-blau 293s ease-in-out -97s infinite;
}
html::after {
  left: 57vw; top: -3vh; width: 70vw; height: 50vh;
  background: radial-gradient(closest-side, rgba(232, 149, 111, .13), transparent);
  animation: nebel-warm 311s ease-in-out -181s infinite;
}
body::before {
  left: -3vw; top: 68vh; width: 82vw; height: 56vh;
  background: radial-gradient(closest-side, rgba(150, 120, 220, .16), transparent);
  animation: nebel-lila 251s ease-in-out -43s infinite;
}
body::after {
  left: 60vw; top: 63vh; width: 52vw; height: 34vh;
  background: radial-gradient(closest-side, rgba(90, 170, 200, .10), transparent);
  animation: nebel-teal 317s ease-in-out -229s infinite;
}

button, select, textarea, input { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; margin: 0; -webkit-user-select: none; user-select: none; }
button:disabled { opacity: .45; cursor: default; }
code, pre { font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; }
::selection { background: rgba(143, 184, 255, .35); }

/* ---------- gemeinsame Glas-Bausteine ---------- */
.glas, .top, .slot, .sheet, .toast, .status, .agenten, .login-box {
  background: var(--glas);
  border: 1px solid var(--glas-kante);
  box-shadow: var(--glas-schatten);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  backdrop-filter: blur(22px) saturate(170%);
}

/* runde Symbolknöpfe: +, ×, Anhängen */
.icon {
  flex: none;
  width: 38px; height: 38px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(155deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .06));
  border: 1px solid var(--line-hell);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .18);
  color: var(--text);
  font-size: 22px; line-height: 1; font-weight: 300;
  transition: transform .2s var(--schnell), background .2s;
}
.icon:active { transform: scale(.92); background: rgba(255, 255, 255, .22); }

/* Auswahlfelder als Glaspillen mit eigenem Pfeil */
select {
  -webkit-appearance: none; appearance: none;
  background: linear-gradient(155deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .05))
    , url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2398a1b0' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 11px center;
  border: 1px solid var(--line-hell);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .14);
  border-radius: 999px;
  padding: 7px 30px 7px 13px;
  font-size: 16px; /* unter 16px zoomt iOS beim Öffnen hinein */
  min-width: 0;
  color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: background-color .2s, border-color .2s;
}
select:focus { outline: none; border-color: rgba(143, 184, 255, .45); }
select option { background: #171a21; color: var(--text); }

/* ---------- Kopfzeile ---------- */
.top {
  position: absolute; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; gap: 8px; align-items: center;
  height: calc(var(--top-h) + var(--oben));
  padding: var(--oben) var(--rand) 0;
  border: 0; border-bottom: 1px solid var(--line);
  border-radius: 0;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 10px 30px rgba(0, 0, 0, .25);
  background: linear-gradient(180deg, rgba(20, 23, 30, .72), rgba(20, 23, 30, .48));
}
/* Das Modell muss immer lesbar bleiben, darf also nie schmaler werden.
   Feste Breite, bemessen am längsten vorkommenden Namen „Sonnet" (6 Zeichen):
   6ch für den Text + 13px linke und 30px rechte Innenkante (Platz für den
   Pfeil) + 2×1px Rahmen = calc(6ch + 45px). Bei 16px Systemschrift ist
   1ch ≈ 8.8px, das Feld also ≈ 98px breit. Nur der Sitzungsknopf daneben
   passt sich der Bildschirmbreite an und kürzt seinen Text. */
.top #model { flex: none; width: calc(6ch + 45px); color: var(--dim); font-size: 16px; padding-block: 6px; }

/* ---------- Punktzeile: die aktiven Sitzungen ----------
   Ein Punkt je aktiver Sitzung, zwischen Sitzungsknopf und Modell. Der Punkt
   selbst ist klein (14px, der geöffnete 16px), die Trefferfläche aber 30 × 44
   px — die ganze Höhe der Kopfzeile; bei 34px Breite blieb für den Namen
   schon bei fünf Punkten nur „Alte …" übrig. Passen nicht alle hinein, scrollt die
   Zeile waagerecht; eine blasse Kante zeigt, auf welcher Seite noch welche
   liegen. Das Modell bleibt fest (siehe oben), der Sitzungsknopf behält
   mindestens 104px für den Namen. */
.punkte {
  flex: 0 1 auto; min-width: 0;
  display: flex; align-items: center;
  height: 44px; margin: 0 -4px;
  overflow-x: auto; overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  touch-action: pan-x;
}
.punkte::-webkit-scrollbar { display: none; }
.punkte.mehr-links { -webkit-mask: linear-gradient(90deg, transparent, #000 34px); mask: linear-gradient(90deg, transparent, #000 34px); }
.punkte.mehr-rechts { -webkit-mask: linear-gradient(270deg, transparent, #000 34px); mask: linear-gradient(270deg, transparent, #000 34px); }
.punkte.mehr-links.mehr-rechts {
  -webkit-mask: linear-gradient(90deg, transparent, #000 34px, #000 calc(100% - 34px), transparent);
  mask: linear-gradient(90deg, transparent, #000 34px, #000 calc(100% - 34px), transparent);
}

.punkt {
  flex: none; position: relative;
  width: 30px; height: 44px;
  display: grid; place-items: center;
  border-radius: 12px;
}
.punkt:focus-visible { outline: 2px solid rgba(143, 184, 255, .6); outline-offset: -6px; }

/* Ruhig: ein neutraler Glastropfen. */
.punkt-kern {
  position: relative;
  width: 14px; height: 14px; border-radius: 50%;
  background: linear-gradient(155deg, rgba(255, 255, 255, .30), rgba(255, 255, 255, .12));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .20), inset 0 1px 1px rgba(255, 255, 255, .25);
  transition: transform .25s var(--schnell), width .25s var(--weich), height .25s var(--weich), background .3s, box-shadow .3s;
}
.punkt:active .punkt-kern { transform: scale(.82); }

/* Arbeitet: ein dünner Bogen mit auslaufendem Schweif, eine Umdrehung in
   2,8 s. Die Phase setzt app.js im Takt der Uhr (--phase-dreh), damit ein
   neu gezeichneter Punkt nicht von vorn anfängt. */
.punkt::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 35%, rgba(233, 236, 241, .95) 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 1.8px), #000 calc(100% - 1.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 1.8px), #000 calc(100% - 1.5px));
  opacity: 0; transition: opacity .5s var(--weich);
  pointer-events: none;
}
.punkt.arbeitet::before { opacity: 1; animation: punktDreh 2.8s linear infinite; animation-delay: var(--phase-dreh, 0s); }
@keyframes punktDreh { to { transform: rotate(360deg); } }

/* Wartet auf ihn: warmes Gold, das sanft atmet. */
.punkt.wartet .punkt-kern {
  background: radial-gradient(circle at 35% 30%, #fff0c8 0%, var(--gold) 55%, #b98a35 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 230, 170, .45), 0 0 5px rgba(var(--gold-kanal), .30);
  animation: punktGlanz 3.2s ease-in-out infinite; animation-delay: var(--phase-glanz, 0s);
}
@keyframes punktGlanz {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(255, 230, 170, .40), 0 0 3px rgba(var(--gold-kanal), .20); filter: brightness(.94); }
  50% { box-shadow: inset 0 0 0 1px rgba(255, 236, 190, .60), 0 0 10px 1px rgba(var(--gold-kanal), .50); filter: brightness(1.10); }
}

/* Geöffnet: rot, etwas größer. Arbeitet sie, dreht sich der Bogen in hellem
   Rot und ein kleines Quadrat im Punkt sagt „antippen stoppt". */
.punkt.aktuell .punkt-kern {
  width: 16px; height: 16px;
  background: linear-gradient(155deg, rgb(255, 138, 115), rgb(214, 78, 66));
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .40), 0 0 0 1px rgba(255, 170, 150, .35), 0 2px 8px rgba(214, 78, 66, .45);
  animation: none;
}
.punkt.aktuell::before { background: conic-gradient(from 0deg, transparent 0 40%, rgba(255, 160, 140, .95) 100%); }
.punkt.aktuell.arbeitet .punkt-kern::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 1.5px;
  background: rgba(58, 12, 6, .70);
}

/* Aus den älteren hergewischt und noch nicht gelesen: ein roter Ring ohne
   Füllung — man ist da, aber die Sitzung gehört (noch) nicht in die Zeile. */
.punkt.aktuell.vorlaeufig .punkt-kern {
  width: 14px; height: 14px;
  background: transparent;
  box-shadow: inset 0 0 0 1.5px rgba(255, 138, 115, .90);
}

/* Nach dem ersten Tipp: ein kleines ×. Ein zweiter Tipp schließt. */
.punkt.kreuz .punkt-kern {
  width: 20px; height: 20px;
  background: rgba(255, 107, 98, .16);
  box-shadow: inset 0 0 0 1.5px rgba(255, 138, 115, .95);
}
.punkt.kreuz .punkt-kern::before, .punkt.kreuz .punkt-kern::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 10px; height: 1.8px; margin: -.9px 0 0 -5px; border-radius: 1px;
  background: rgb(255, 150, 130);
  transform: rotate(45deg);
}
.punkt.kreuz .punkt-kern::after { transform: rotate(-45deg); }

/* Bewegung reduziert: kein Drehen, kein Atmen. Arbeitet = ruhiger voller
   Ring, wartet = goldener Rand. */
@media (prefers-reduced-motion: reduce) {
  .punkt.arbeitet::before {
    animation: none;
    background: rgba(233, 236, 241, .55);
  }
  .punkt.aktuell.arbeitet::before { background: rgba(255, 160, 140, .80); }
  .punkt.wartet .punkt-kern {
    animation: none; filter: none;
    box-shadow: 0 0 0 2px rgba(var(--gold-kanal), .95), inset 0 0 0 1px rgba(255, 236, 190, .5);
  }
  .punkt-kern { transition: none; }
}

/* Sitzungsknopf: eine Glaspille wie das Auswahlfeld, mit Name und Pfeil.
   Nimmt alle Breite, die Punktzeile und Modell übrig lassen, aber nie
   weniger als 104px — lieber scrollen die Punkte. */
.sitzungsknopf {
  flex: 1 1 104px; min-width: 104px;
  display: flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 11px 0 13px; border-radius: 999px;
  background: linear-gradient(155deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .05));
  border: 1px solid var(--line-hell);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .14);
  color: var(--text); text-align: left;
  transition: background-color .2s, border-color .2s, transform .2s var(--schnell);
}
.sitzungsknopf:active { transform: scale(.97); }
.sk-name { flex: 1 1 auto; min-width: 0; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* derselbe Pfeil wie im Auswahlfeld, hier als Maske über der Textfarbe, damit er sich drehen kann */
.sk-pfeil {
  flex: none; width: 12px; height: 8px; background: var(--dim);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .22s var(--weich), background-color .2s;
}
/* offen: Knopf leuchtet leicht auf, der Pfeil zeigt nach oben */
.sitzungsknopf.offen { background: rgba(255, 255, 255, .20); border-color: rgba(255, 255, 255, .30); }
.sitzungsknopf.offen .sk-pfeil { transform: rotate(180deg); background: var(--text); }

/* ---------- Menüs unter der Kopfzeile ---------- */
/* Beide hängen 8px unter der Kopfzeile. Sie sind dichter als die übrigen
   Glasflächen und kommen OHNE Rückblendung aus: der Verlauf dahinter wird
   durch die Abdeckung (siehe body.menue-offen) ohnehin abgedunkelt — eine
   weitere Unschärfe würde auf dem iPhone nur kosten, nicht mehr zeigen.
   Höhe: Das Menü endet über der Fußzeile, dazwischen bleibt Verlauf sichtbar;
   die scrollbare Liste bekommt nur den Rest. */
.menue {
  --menue-oben: calc(var(--top-h) + var(--oben) + 8px);
  position: absolute; top: var(--menue-oben); z-index: 30;
  display: flex; flex-direction: column;
  max-height: calc(100dvh - var(--menue-oben) - var(--fuss-h) - max(12px, env(safe-area-inset-bottom)) - 16px);
  padding: 6px; border-radius: var(--r);
  background: linear-gradient(155deg, rgba(44, 48, 58, .96), rgba(28, 31, 38, .96));
  border: 1px solid var(--glas-kante);
  box-shadow: var(--glas-schatten);
  overflow: hidden;
  animation: menueAuf .22s var(--weich) both;
  transform-origin: top left;
}
#sitzungsmenue { left: var(--rand); width: min(360px, calc(100vw - 2 * var(--rand))); }

/* Einträge: Name über Nebeninfo, mindestens 44px hoch, nie umbrechen */
.menue-eintrag {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px;
  width: 100%; min-height: 46px; padding: 6px 12px; border-radius: 12px;
  color: var(--text); text-align: left;
  transition: background-color .15s, transform .15s var(--schnell);
}
.menue-eintrag:active { background: rgba(255, 255, 255, .10); transform: scale(.985); }
.menue-eintrag b, .menue-eintrag small { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menue-eintrag b { font-weight: 600; letter-spacing: -.01em; font-size: 15px; line-height: 1.3; }
.menue-eintrag small { color: var(--dim); font-size: 12px; line-height: 1.3; }

/* die laufende Sitzung: „hier bin ich" — eine getönte Blase wie die eigene
   Nachricht, mit leuchtendem Punkt vor dem Namen */
.menue-aktuell {
  background: linear-gradient(155deg, rgba(143, 184, 255, .22), rgba(143, 184, 255, .09));
  border: 1px solid rgba(160, 195, 255, .26);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .14);
  padding-left: 26px; position: relative;
}
.menue-aktuell::before {
  content: ""; position: absolute; left: 11px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%;
  background: var(--akzent); box-shadow: 0 0 0 3px rgba(143, 184, 255, .22);
}
.menue-aktuell:active { background: linear-gradient(155deg, rgba(143, 184, 255, .30), rgba(143, 184, 255, .14)); }

/* „+ Neue Sitzung": eine Handlung, kein Eintrag — Akzentfarbe, eine Zeile,
   darunter die Trennlinie zur Liste */
.menue-neu {
  margin-top: 4px; min-height: 44px; color: var(--akzent); font-weight: 600; font-size: 15px;
  justify-content: center;
}
.menue-neu:active { background: rgba(143, 184, 255, .12); }

/* die Liste scrollt, wenn sie nicht mehr in den Rest passt */
.menue-liste {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  scrollbar-width: none;
  margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--line);
}
.menue-liste::-webkit-scrollbar { display: none; }
/* Suchfeld: erst bei vielen Sitzungen da. 16px Schrift, sonst zoomt iOS
   beim Antippen in die Seite hinein. */
.menue-kopf { flex: 0 0 auto; }
.menue-suche {
  flex: 0 0 auto; margin: 8px 2px 0; padding: 9px 12px; border-radius: 12px;
  font: inherit; font-size: 16px; color: var(--text);
  background: rgba(255, 255, 255, .06); border: 1px solid var(--line);
  -webkit-appearance: none; appearance: none;
}
.menue-suche::placeholder { color: var(--leise); }
.menue-suche:focus { outline: none; border-color: rgba(160, 195, 255, .45); background: rgba(255, 255, 255, .09); }
.menue-suche[hidden] { display: none; }
/* Beim Suchen ist die Tastatur offen und liegt über dem unteren Teil: das
   Menü endet dann über ihr, damit die Treffer sichtbar bleiben. */
body.tastatur-offen #sitzungsmenue { max-height: calc(100dvh - var(--menue-oben) - var(--tastatur, 0px) - 12px); }
.menue-liste .menue-eintrag { min-height: 48px; }
/* andere offene Sitzungen: Ring vor dem Namen — „liegt auf, läuft aber nicht hier".
   Heißt bewusst NICHT menue-offen: diesen Namen trägt der <body>, solange ein
   Menü offen ist (siehe Abdeckung unten). Ein ungebundener Selektor mit dem
   Körper-Namen hat dem Körper einmal position:fixed und den Farbnebel
   genommen und die ganze Seite zerlegt. */
.menue-andere { padding-left: 26px; position: relative; }
.menue-andere::before {
  content: ""; position: absolute; left: 11px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%;
  border: 1.5px solid var(--dim); box-sizing: border-box;
}
/* frühere Sitzungen: zurückhaltend, normale Schriftstärke, gedämpft */
.menue-frueher b { font-weight: 500; color: var(--dim); }
.menue-frueher small { color: var(--leise); }
.menue-frueher:active b { color: var(--text); }

/* Zwischenzeilen und Hinweise („nichts gefunden", „wird geladen") */
.menue-meta { margin: 0; padding: 12px 12px 8px; font-size: 12.5px; color: var(--leise); letter-spacing: .01em; }
/* Sitzungsabgleich: Abschnitt „Zuletzt am Mac", Sitzungen, die gerade am Mac laufen */
.menue-abschnitt { padding-top: 18px; font-weight: 600; color: var(--dim); text-transform: uppercase; font-size: 11.5px; letter-spacing: .06em; }
.menue-frueher.am-mac small { color: #e0a84a; }
.menue-frueher.fragt { background: rgba(224, 168, 74, .14); }
.menue-frueher.fragt small { white-space: normal; color: #e0a84a; }
.menue-warnung { color: #e0a84a; }

/* Befehle: der Befehl selbst in Schreibmaschinenschrift wie in der Leerfläche */

/* Abdeckung: solange ein Menü offen ist, tritt der Verlauf zurück — nur
   abgedunkelt, keine Unschärfe (die Kopfzeile blurrt sie ohnehin mit). Die
   Fläche hängt am Verlauf, damit sie unter Kopf- und Fußzeile bleibt; Verlauf
   und Fußzeile nehmen keine Berührung mehr an, ein Tipp daneben landet auf dem
   Körper und schließt (siehe app.js). */
.log::after {
  content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: rgba(14, 16, 20, .58); opacity: 0;
  transition: opacity .22s var(--weich);
}
body.menue-offen .log::after { opacity: 1; }
body.menue-offen .log { pointer-events: none; }
body.menue-offen .bottom > * { pointer-events: none; }
body.menue-offen .bottom { opacity: .55; }
.bottom { transition: opacity .22s var(--weich); }

/* ---------- Verlauf ---------- */
.log {
  position: absolute; inset: 0;
  overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-width: none;
  /* Unten so viel Platz, dass die Fußzeile nichts verdeckt: ihre Grundhöhe,
     der sichere Rand, die Höhe der Tastatur und ein Zuschlag für das, was
     gerade zusätzlich in der Fußzeile steht.
     WICHTIG: Der untere Abstand wird NUR HIER berechnet. Vorher haben vier
     Zustandsregeln ihn neu gesetzt und dabei die Tastaturhöhe verloren —
     ausgerechnet die für den Tipp-Zustand, also genau dann, wenn die Tastatur
     offen ist. Das Ende des Gesprächs verschwand dahinter. Die Zustände
     ändern deshalb nur noch den Zuschlag, nicht die Rechnung. */
  padding: calc(var(--top-h) + var(--oben) + 14px) var(--rand)
    calc(var(--fuss-h) + env(safe-area-inset-bottom) + 12px + var(--tastatur) + var(--fuss-zusatz));
}
.log::-webkit-scrollbar { display: none; }
/* Steht unten mehr, braucht der Verlauf mehr Luft. Der größte Wert gehört
   zuletzt: bei mehreren zutreffenden Regeln gewinnt die letzte. */
body:has(#agenten:not([hidden])) { --fuss-zusatz: 34px; }
body:has(#pending:not(:empty)) { --fuss-zusatz: 44px; }
body:has(#chips:not(:empty)) { --fuss-zusatz: 44px; }
body[data-modus="tippen"] { --fuss-zusatz: 48px; }
body[data-modus="anruf"]:has(#mitschrift:not([hidden])) { --fuss-zusatz: 64px; }

.row { margin: 0 auto 14px; max-width: var(--maxw); }
.row:last-child { margin-bottom: 0; }

.empty {
  color: var(--dim); text-align: center;
  min-height: 60vh; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px;
}
.empty p { margin: 0; }
.empty p:first-child { color: var(--text); font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.empty b { color: var(--akzent); font-family: ui-monospace, Menlo, monospace; }
/* Eine schlafende Sitzung wird geöffnet: ihr Verlauf ist unterwegs. Der
   Hinweis blendet erst nach 180 ms ein — meist ist der Verlauf bis dahin da,
   und es blitzt nichts auf. Erst danach beginnt das ruhige Pulsieren. */
.empty.laedt .laedt-text {
  font-size: 14px; opacity: 0;
  animation: laedtEin .2s ease-out 180ms forwards, laedtPuls 1.2s ease-in-out 380ms infinite;
}
@keyframes laedtEin { from { opacity: 0; } to { opacity: .45; } }
@keyframes laedtPuls { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .empty.laedt .laedt-text { animation: laedtEin 0s linear 180ms forwards; } }

/* Nutzer: rechts, eine leicht getönte Glasblase */
.msg.user { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.bubble {
  max-width: 86%;
  padding: 9px 14px;
  border-radius: 20px 20px 6px 20px;
  background: linear-gradient(155deg, rgba(143, 184, 255, .22), rgba(143, 184, 255, .09));
  border: 1px solid rgba(160, 195, 255, .22);
  box-shadow: var(--glas-schatten-flach);
  white-space: pre-wrap; overflow-wrap: anywhere;
  font-size: 15.5px;
}
.tag { font-size: 11px; color: var(--leise); padding-right: 6px; letter-spacing: .02em; }
.tag::before { content: "◦ "; }
/* Eingereiht, aber von der CLI noch nicht aufgenommen: die Blase bleibt voll
   lesbar, tritt aber zurück und bekommt eine gestrichelte Kante — man sieht,
   dass sie schon da ist und noch aussteht. Kein Blinken; das ruhige Atmen
   hört auf, sobald die Quittung kommt. Bei „Bewegung reduzieren" steht es still. */
.msg.user.wartet .bubble {
  background: rgba(143, 184, 255, .10);
  border-style: dashed;
  border-color: rgba(143, 184, 255, .38);
  animation: wartetAtmen 2.6s var(--weich) infinite;
}
.msg.user.wartet .tag { color: var(--akzent); }
/* Von /stop erwischt, bevor die CLI sie aufgenommen hat: sie bleibt stehen
   und ist als abgebrochen zu erkennen — verworfen wird nichts stillschweigend. */
.msg.user.abgebrochen .bubble { opacity: .55; border-style: dashed; text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, .25); }
@keyframes wartetAtmen {
  0%, 100% { border-color: rgba(143, 184, 255, .22); }
  50% { border-color: rgba(143, 184, 255, .52); }
}
@media (prefers-reduced-motion: reduce) {
  .msg.user.wartet .bubble { animation: none; }
}

.msg.system { text-align: center; font-size: 12px; color: var(--leise); padding: 4px 0; }
.msg.assistant { max-width: 100%; padding: 2px 2px 0; }
.meta { color: var(--leise); font-size: 12px; }

/* Markdown */
.md { overflow-wrap: anywhere; font-size: 15.5px; line-height: 1.55; }
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md p { margin: 7px 0; }
.md h1, .md h2, .md h3, .md h4, .md h5 { margin: 16px 0 6px; line-height: 1.3; letter-spacing: -.01em; }
.md h1 { font-size: 1.2em; } .md h2 { font-size: 1.12em; } .md h3, .md h4, .md h5 { font-size: 1.03em; }
.md ul, .md ol { margin: 6px 0; padding-left: 22px; }
.md li { margin: 3px 0; }
.md li::marker { color: var(--dim); }
.md a { color: var(--akzent); text-decoration: none; border-bottom: 1px solid rgba(143, 184, 255, .35); }
.md strong { font-weight: 600; }
.md code { background: rgba(255, 255, 255, .09); border: 1px solid var(--line); padding: 1px 6px; border-radius: 7px; font-size: .88em; }
.md blockquote { margin: 8px 0; padding: 2px 0 2px 12px; border-left: 2px solid rgba(143, 184, 255, .5); color: var(--dim); }
.md hr { border: 0; border-top: 1px solid var(--line); margin: 14px 0; }
.table { overflow-x: auto; margin: 8px 0; border-radius: 12px; border: 1px solid var(--line); }
.md table { border-collapse: collapse; font-size: 13px; min-width: 100%; }
.md th, .md td { border-bottom: 1px solid var(--line); padding: 6px 10px; text-align: left; vertical-align: top; }
.md th { background: rgba(255, 255, 255, .06); font-weight: 600; }
.md tr:last-child td { border-bottom: 0; }

.code { position: relative; margin: 10px 0; }
.code pre {
  margin: 0; padding: 12px 12px;
  background: rgba(0, 0, 0, .34);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
  overflow-x: auto; line-height: 1.5;
}
.code pre code { background: none; border: 0; padding: 0; font-size: 12.5px; }
.copy {
  /* z-index: der Kasten darunter scrollt waagerecht; ohne eigene Ebene kann
     der Knopf vom Inhalt überdeckt werden und der Tipp landet daneben.
     touch-action: manipulation nimmt die Doppeltipp-Verzögerung. */
  position: absolute; top: 7px; right: 7px; z-index: 2; touch-action: manipulation;
  font-size: 11px; padding: 4px 9px; border-radius: 999px;
  background: rgba(255, 255, 255, .10); border: 1px solid var(--line-hell); color: var(--dim);
  transition: background .2s, color .2s;
}
.copy:active { background: rgba(255, 255, 255, .2); color: var(--text); }
/* Kurze Bestätigung direkt am Knopf, zusätzlich zur Einblendung. */
.copy.kopiert { background: rgba(126, 232, 255, .22); border-color: rgba(126, 232, 255, .5); color: var(--text); }
.live::after { content: "▍"; color: var(--warm); margin-left: 1px; animation: blinzeln 1s steps(2) infinite; }

/* Werkzeugaufrufe: zusammenklappbare Glaszeilen */
.tool {
  margin: 8px 0; font-size: 13px;
  border: 1px solid var(--line); border-radius: 14px;
  background: linear-gradient(155deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .025));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
  overflow: hidden;
}
.tool summary {
  padding: 8px 12px; list-style: none; cursor: pointer;
  display: flex; gap: 8px; align-items: center; white-space: nowrap; overflow: hidden;
}
.tool summary::-webkit-details-marker { display: none; }
.tool summary b { font-weight: 600; flex: none; }
.tool .sum { color: var(--dim); overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; font-family: ui-monospace, Menlo, monospace; font-size: 12px; }
.tool .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--leise); box-shadow: 0 0 0 3px rgba(255, 255, 255, .05); }
.tool.run .dot { background: var(--warm); box-shadow: 0 0 0 3px rgba(232, 149, 111, .18); animation: pulsen 1.2s ease-in-out infinite; }
.tool.ok .dot { background: var(--ok); box-shadow: 0 0 0 3px rgba(95, 196, 147, .14); }
.tool.err .dot { background: var(--err); box-shadow: 0 0 0 3px rgba(255, 107, 98, .16); }
.tool pre { margin: 0; padding: 9px 12px; border-top: 1px solid var(--line); overflow-x: auto; max-height: 300px; white-space: pre-wrap; overflow-wrap: anywhere; background: rgba(0, 0, 0, .22); font-size: 12px; }
.tool pre.res { color: var(--dim); }

/* Dateien */
.files { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; justify-content: inherit; }
.msg.user .files { justify-content: flex-end; }
.files img { max-width: min(260px, 70vw); max-height: 260px; border-radius: 16px; border: 1px solid var(--line-hell); display: block; box-shadow: var(--glas-schatten-flach); }
.filechip {
  display: inline-flex; gap: 6px; align-items: center; padding: 7px 12px; border-radius: 999px;
  background: var(--glas); border: 1px solid var(--line-hell); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .12);
  color: var(--text); text-decoration: none; font-size: 13px;
}
.filechip::before { content: "⎘"; color: var(--dim); }
.filechip small { color: var(--dim); }

/* Von Claude geschickte Dateien: Bilder als Vorschau, der Rest als Karte.
   Beides mit einem Knopf „Sichern", der auf dem iPhone das Teilen-Menü öffnet. */
.gesendet { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; align-items: flex-start; }
.gesendet-text { color: var(--dim); font-size: 13px; }
.gesendet-bild { margin: 0; display: flex; flex-direction: column; gap: 6px; max-width: min(300px, 78vw); }
.gesendet-bild .bild-auf { padding: 0; border: 0; background: none; display: block; border-radius: 16px; touch-action: manipulation; }
.gesendet-bild img {
  display: block; max-width: 100%; max-height: 360px; border-radius: 16px;
  border: 1px solid var(--line-hell); box-shadow: var(--glas-schatten-flach); background: var(--bg-hoch);
}
.gesendet-bild figcaption { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--dim); }
.gesendet-bild figcaption span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gesendet-karte {
  display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 12px;
  width: min(340px, 100%); border-radius: 16px;
  background: var(--glas); border: 1px solid var(--line-hell); box-shadow: var(--glas-schatten-flach);
}
.karte-art {
  flex: none; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center;
  font-size: 10px; font-weight: 700; letter-spacing: .04em; color: var(--akzent);
  background: rgba(143, 184, 255, .12); border: 1px solid rgba(143, 184, 255, .25);
  overflow: hidden;
}
.karte-name { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.karte-name b { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.karte-name small { color: var(--dim); font-size: 12px; }
.sichern {
  flex: none; min-height: 36px; padding: 0 14px; border-radius: 999px; touch-action: manipulation;
  font-size: 13px; font-weight: 600; color: var(--akzent);
  background: rgba(143, 184, 255, .10); border: 1px solid rgba(143, 184, 255, .30);
}
.sichern:active { background: rgba(143, 184, 255, .22); }

/* Großansicht: das ganze Bild in voller Breite. Lange Bildschirmfotos einer
   ganzen Seite scrollen senkrecht — so liest man sie am Handy ohnehin. */
.grossbild {
  position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column;
  /* Deckend: die gläserne Kopfzeile darunter schien sonst durch die Leiste. */
  background: var(--bg);
  animation: frageNebel .18s var(--weich) both;
}
.grossbild-leiste {
  flex: none; display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; padding-top: max(10px, env(safe-area-inset-top));
  border-bottom: 1px solid var(--line);
}
.grossbild-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; color: var(--dim); }
.grossbild-zu { flex: none; width: 40px; height: 40px; border-radius: 50%; font-size: 26px; line-height: 1; color: var(--text); }
.grossbild-zu:active { background: rgba(255, 255, 255, .12); }
.grossbild-flaeche {
  flex: 1; overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  display: flex; justify-content: center; align-items: flex-start;
  padding: 12px 12px max(12px, env(safe-area-inset-bottom));
}
.grossbild-flaeche img { display: block; max-width: 100%; height: auto; border-radius: 8px; }
body.grossbild-offen { overflow: hidden; }

.error {
  background: rgba(255, 107, 98, .10); border: 1px solid rgba(255, 107, 98, .35); color: #ffc0ba;
  padding: 9px 12px; border-radius: 14px; margin: 8px 0; white-space: pre-wrap; font-size: 13px;
}

/* drei pulsende Punkte, solange geantwortet wird */
.working { display: flex; gap: 5px; padding: 8px 2px; }
.working span { width: 7px; height: 7px; border-radius: 50%; background: var(--dim); animation: wogen 1.3s ease-in-out infinite; }
.working span:nth-child(2) { animation-delay: .18s; }
.working span:nth-child(3) { animation-delay: .36s; }

body.drop .log { outline: 2px dashed rgba(143, 184, 255, .6); outline-offset: -10px; }

/* ---------- Fußbereich ---------- */
.bottom {
  position: absolute; left: 0; right: 0; bottom: var(--tastatur); z-index: 20;
  transition: bottom .22s var(--weich);
  display: flex; flex-direction: column; gap: 8px;
  padding: 10px var(--rand) var(--fussrand);
  pointer-events: none; /* nur die Bausteine selbst fangen Berührungen */
}
.bottom > * { pointer-events: auto; }
/* Bei offener Tastatur deckt die Tastatur den Home-Balken ab; der sichere Rand
   unten würde die Eingabe nur grundlos von der Tastatur abheben. */
body.tastatur-offen { --fussrand: 12px; }
/* leichte Verdichtung nach unten, damit Text unter den Glasflächen nicht flimmert */
.bottom::before {
  content: ""; position: absolute; inset: -40px 0 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(14, 16, 20, 0), rgba(14, 16, 20, .72) 45%, rgba(14, 16, 20, .9));
}
.bottom > .sheet, .bottom > .agenten, .bottom > .chips, .bottom > .pending, .bottom > .status, .bottom > .mitschrift, .bottom > .composer {
  width: 100%; max-width: var(--maxw); margin-inline: auto;
}

/* Auslastung: drei kleine ruhige Balken */
.status {
  display: flex; gap: 10px; align-items: center;
  padding: 6px 12px; border-radius: var(--r-fuss); /* bei ~30px Höhe die volle Pille */
  box-shadow: var(--glas-schatten-flach);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
}
.status:empty { display: none; }
.bar { flex: 1 1 0; min-width: 0; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 6px; font-size: 10.5px; color: var(--leise); letter-spacing: .01em; }
.bar-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-wert { font-variant-numeric: tabular-nums; color: var(--dim); }

/* Ohne Messwert: blasser Strich statt einer Zahl, die nichts belegt. */
.bar.unbekannt .bar-name, .bar.unbekannt .bar-wert { opacity: .45; }
.bar.unbekannt .bar-spur { opacity: .5; }
.bar-spur { display: block; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .10); overflow: hidden; }
.bar-fuellung { display: block; height: 100%; width: 0; border-radius: 3px; background: linear-gradient(90deg, rgba(143, 184, 255, .55), rgba(143, 184, 255, .9)); transition: width .6s var(--weich), background .3s; }
.bar.hoch .bar-fuellung { background: linear-gradient(90deg, rgba(232, 149, 111, .6), var(--warm)); }
.bar.hoch .bar-wert { color: var(--warm); }
.bar.kritisch .bar-fuellung { background: linear-gradient(90deg, rgba(255, 107, 98, .7), var(--err)); box-shadow: 0 0 8px rgba(255, 107, 98, .5); }
.bar.kritisch .bar-name, .bar.kritisch .bar-wert { color: var(--err); font-weight: 600; }
.bar.kritisch .bar-spur { background: rgba(255, 107, 98, .2); }

/* Unteragenten: eine schmale Zeile */
.agenten {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: var(--r-fuss); font-size: 12px; color: var(--dim);
  box-shadow: var(--glas-schatten-flach);
  animation: warpIn .4s var(--weich) both;
}
.agenten b { color: var(--text); font-weight: 600; white-space: nowrap; }
.agent-liste { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Rückmeldung eines Unteragenten über der Antwort, die sie ausgelöst hat */
.agent-ende { display: flex; gap: 8px; align-items: flex-start; margin: 2px 0 8px; padding: 6px 10px; border-radius: 10px; font-size: 12px; color: var(--dim); background: rgba(143, 184, 255, .07); border: 1px solid rgba(143, 184, 255, .18); }
.agent-ende .dot { width: 7px; height: 7px; margin-top: 5px; border-radius: 50%; flex: none; background: var(--akzent); }
.agent-ende.err .dot { background: var(--err); }
.agent-ende b { display: block; color: var(--text); font-weight: 600; }
.agent-ende span:not(.dot) { display: block; white-space: pre-wrap; overflow-wrap: anywhere; }
.puls { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--akzent); box-shadow: 0 0 0 3px rgba(143, 184, 255, .18); animation: pulsen 1.4s ease-in-out infinite; }

/* Befehlsvorschläge und angehängte Dateien */
.chips, .pending { display: flex; gap: 6px; }
.chips:empty, .pending:empty { display: none; }
.chips { overflow-x: auto; scrollbar-width: none; padding: 2px 2px; }
.chips::-webkit-scrollbar { display: none; }
.pending { flex-wrap: wrap; padding: 2px 2px; }
.chip, .pchip {
  flex: none; display: inline-flex; align-items: center; gap: 4px;
  border-radius: 999px; font-size: 13px;
  background: var(--glas-hell); border: 1px solid var(--line-hell);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .16), 0 4px 12px rgba(0, 0, 0, .2);
  animation: warpIn .3s var(--weich) both;
}
.chip { padding: 6px 12px; color: var(--text); font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; transition: transform .2s var(--schnell); }
.chip:active { transform: scale(.94); }
.chip b { color: var(--text); }
.pchip { padding: 4px 4px 4px 12px; max-width: 100%; overflow: hidden; }
.pchip.up { opacity: .55; }
.pchip button { color: var(--dim); padding: 0 7px; font-size: 16px; line-height: 1; }

/* ---------- die Eingabe: zwei Glasflächen, die ihre Form ändern ---------- */
.composer {
  display: flex; gap: 8px; align-items: flex-end;
  min-width: 0;
}
.slot {
  position: relative; min-width: 0; overflow: hidden;
  flex: 1 1 0%;
  min-height: var(--slot-h);
  border-radius: var(--r-fuss); /* dieselbe Ecke wie die Leiste darüber */
  background: var(--glas-hell);
  border: 1px solid rgba(255, 255, 255, .20);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .42), inset 0 1.5px 2px rgba(255, 255, 255, .26), inset 0 -2px 3px rgba(255, 255, 255, .06);
  -webkit-backdrop-filter: blur(26px) saturate(190%);
  backdrop-filter: blur(26px) saturate(190%);
  transform-origin: left center;
  transition:
    flex-grow .44s var(--feder), flex-basis .44s var(--feder),
    margin .44s var(--feder), opacity .28s var(--weich),
    transform .22s var(--schnell), background-color .3s, border-color .3s, box-shadow .4s;
}
.slot-rechts { transform-origin: right center; }
/* lichtbrechender Rand: ein zweiter Blur nur an der Kante */
.slot::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0;
  -webkit-backdrop-filter: blur(7px) brightness(1.3);
  backdrop-filter: blur(7px) brightness(1.3);
  -webkit-mask-image: radial-gradient(120% 130% at 50% 50%, transparent 52%, #000 100%);
  mask-image: radial-gradient(120% 130% at 50% 50%, transparent 52%, #000 100%);
}
.slot > * { z-index: 1; }
/* Antippen: die Fläche wächst kurz, bevor sie in ihre neue Form geht */
.slot:has(.gross:active) { transform: scale(1.055); }
/* ohne Sprachfunktion gibt es die rechte Fläche nicht */
.slot-rechts:has(#mic[hidden]) { display: none; }

/* die großen Knöpfe: Symbol über Beschriftung, füllen ihre Fläche */
/* Die beiden großen Knöpfe tragen nur ihr Symbol, mittig. Die Beschriftung ist
   auf Wunsch entfallen — was sie tun, sagt das Symbol; für Vorleseprogramme
   steht es im aria-label. Ohne Text darf das Symbol deutlich größer werden. */
.gross {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--text);
  transition: opacity .22s var(--weich), transform .3s var(--weich), filter .3s var(--weich);
}
/* Symbole: eingebettete SVG als Maske über der Textfarbe (keine externe Quelle,
   also im Rahmen der Sicherheitsregel). Beide sitzen in derselben 52×44-Box,
   damit sie gleich groß wirken; eine Beschriftung tragen die Knöpfe nicht. */
.gross .sym {
  display: block; position: relative; width: 52px; height: 44px;
  background: currentColor; color: var(--text);
  -webkit-mask: var(--sym) center / contain no-repeat;
  mask: var(--sym) center / contain no-repeat;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .25));
  transition: opacity .22s var(--weich), transform .3s var(--weich), filter .3s var(--weich);
}
.slot:has(.gross:active) .sym { transform: scale(1.06); }

/* Tastatur: Rahmen, zwei Reihen Tasten, Leertaste (Blickmaß 46×34) */
#tasten .sym {
  --sym: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 34'%3E%3Crect x='1.4' y='1.4' width='43.2' height='31.2' rx='6.5' fill='none' stroke='%23000' stroke-width='2.4'/%3E%3Cg fill='%23000'%3E%3Ccircle cx='9' cy='10.5' r='2'/%3E%3Ccircle cx='16' cy='10.5' r='2'/%3E%3Ccircle cx='23' cy='10.5' r='2'/%3E%3Ccircle cx='30' cy='10.5' r='2'/%3E%3Ccircle cx='37' cy='10.5' r='2'/%3E%3Ccircle cx='9' cy='17.5' r='2'/%3E%3Ccircle cx='16' cy='17.5' r='2'/%3E%3Ccircle cx='23' cy='17.5' r='2'/%3E%3Ccircle cx='30' cy='17.5' r='2'/%3E%3Ccircle cx='37' cy='17.5' r='2'/%3E%3Crect x='12' y='23' width='22' height='4.4' rx='2.2'/%3E%3C/g%3E%3C/svg%3E");
}

/* Mikrofon: Kapsel, Bügel, Stiel und Fuß (Blickmaß 30×42) */
#mic .sym {
  --sym: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 42'%3E%3Crect x='10' y='2' width='10' height='19' rx='5' fill='none' stroke='%23000' stroke-width='2.4'/%3E%3Cpath d='M4 17.5c0 6.1 4.9 11 11 11s11-4.9 11-11M15 28.5V38M9 38h12' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Textfeld: sitzt in derselben Glasfläche wie der Tastatur-Knopf */
.feld {
  position: absolute; inset: 0;
  display: flex; align-items: flex-end; gap: 8px;
  padding: 13px 12px 13px 13px;
  opacity: 0; pointer-events: none; visibility: hidden;
}
.feld textarea {
  flex: 1; min-width: 0; resize: none;
  background: none; border: 0; outline: none;
  padding: 9px 2px; max-height: 200px;
  font-size: 16px; line-height: 1.35; color: var(--text);
  caret-color: var(--akzent);
}
.feld textarea::placeholder { color: var(--leise); }
.feld .icon { width: 40px; height: 40px; }
/* Senden in Neonblau: dieselbe kühle Familie wie die Aufnahmefläche, damit
   beides als „das tut was Gutes" zusammengehört. Der Stopp-Knopf darunter
   bleibt bewusst warm — das ist der einzige Unterschied, auf den es ankommt. */
.send {
  flex: none; height: 40px; padding: 0 16px; border-radius: 999px;
  background: linear-gradient(155deg, rgba(126, 232, 255, .96), rgba(38, 148, 214, .96));
  color: #05222c; font-weight: 700; font-size: 14px;
  /* Kein Glanzstrich an der Oberkante und kein Schatten unter der Schrift:
     auf 40 Pixel Höhe liegen beide so dicht am Wort, dass sie als zwei
     Striche um „Senden" gelesen werden statt als Wölbung. Das Leuchten
     außen trägt die Form allein — es hat keine harte Kante. */
  box-shadow:
    0 4px 14px rgba(56, 196, 238, .42),
    0 0 22px rgba(56, 196, 238, .28);
  transition: transform .2s var(--schnell), background .3s, box-shadow .3s;
}
.send:active { transform: scale(.94); }
/* „Senden" heißt immer senden — der Knopf verwandelt sich nicht mehr in einen
   Stopp-Knopf. Abgebrochen wird oben mit einem Tipp auf den roten Punkt (.punkt.aktuell). */

/* Aufnahme: die Fäden (Canvas) und ihr Rückfall (fünf Balken) */

/* Die Zeichenfläche läuft bis kurz vor Punkt und Laufzeit — nicht bis zum Rand,
   sonst würde beides überlappt. Beide Reserven kommen aus derselben Rechnung in
   :root, deshalb hat die Fläche links zum Punkt genau so viel Luft wie rechts
   zur Zahl. faeden.js misst die Fläche selbst und zeichnet nur dazwischen.
   Rechnung: Knopfbreite = Bildschirm − 2×12 Rand − 2×1 Kante − 8 Lücke − 40 (×)
     320px → 246 → Fäden 246 − 23 − 55 = 168px (zuvor 158, davor 148)
     393px → 319 → Fäden 319 − 23 − 55 = 241px (zuvor 231, davor 221)
   Die Zahl braucht 40px und steht 12px von der Kante: ihre Tinte beginnt 52px
   vor dem Rand, die Fläche endet bei 55px — 3px Luft. Links endet der Punkt bei
   12+8 = 20px, die Fläche beginnt bei 23px — dieselben 3px Luft.
   Dass die Leuchtkante eines Bauchs (halbe Strichbreite 4.5px) dabei über die
   Fläche hinausragen würde, ist unkritisch: ein Canvas schneidet an seiner
   eigenen Kante ab, und die Hüllkurve zieht die Fäden an beiden Enden ohnehin
   auf die Mittellinie, wo sie dünn und blass sind. */
.faeden-feld { position: absolute; left: var(--punkt-b); right: var(--zeit-b); top: 0; bottom: 0; opacity: 0; pointer-events: none; transition: opacity .3s var(--weich); }
/* EXPLIZITE 100 % sind hier Pflicht, nicht Geschmack: mit width:auto würde der
   Browser die Breite aus dem Seitenverhältnis des Zeichenpuffers ableiten (ein
   Canvas ist ein ersetztes Element) und die Fläche bliebe halb so breit. */
.faeden { display: block; width: 100%; height: 100%; }
/* Ersatzdarstellung, wenn „Bewegung reduzieren" eingeschaltet ist: fünf
   stille Balken statt der gezeichneten Fäden. Eine Regel, nicht drei —
   vorher überschrieben sich drei Definitionen gegenseitig. */
.welle {
  position: absolute; inset: 0; left: var(--punkt-b); right: var(--zeit-b);
  display: none; align-items: center; justify-content: center; gap: 6px;
  opacity: 0; pointer-events: none; transition: opacity .3s var(--weich);
}
.welle i { width: 5px; height: 30px; border-radius: 3px; background: var(--rec); transform: scaleY(.3); animation: welle 1.4s ease-in-out infinite; }
.welle i:nth-child(1) { animation-duration: 1.25s; animation-delay: -.2s; }
.welle i:nth-child(2) { animation-duration: 1.55s; animation-delay: -.6s; }
.welle i:nth-child(3) { animation-duration: 1.15s; animation-delay: -.1s; }
.welle i:nth-child(4) { animation-duration: 1.45s; animation-delay: -.9s; }
.welle i:nth-child(5) { animation-duration: 1.3s; animation-delay: -.4s; }
/* Laufzeit und Hinweis rechts in der Fläche */
#mic::after {
  content: none;
  position: absolute; right: 0; top: 0; bottom: 0; width: var(--zeit-b);
  display: flex; align-items: center; justify-content: flex-end; padding-right: var(--rec-kante);
  white-space: nowrap; overflow: hidden;
  font-size: 13px; font-variant-numeric: tabular-nums; letter-spacing: .04em; color: var(--dim);
  animation: warpIn .4s var(--weich) both;
}

/* Abbrechen: ein kleiner Kreis, der nur bei Bedarf Platz bekommt */
.zu {
  flex: 0 0 0px; width: 0; min-width: 0; height: 40px; margin-left: -8px;
  opacity: 0; overflow: hidden; pointer-events: none;
  align-self: center; padding: 0;
  color: var(--dim); font-size: 22px;
  transition: flex-basis .44s var(--feder), width .44s var(--feder), margin .44s var(--feder), opacity .25s var(--weich), transform .2s var(--schnell);
}

/* --- Zustand: ruhe (Standard) — beide Flächen gleich groß --- */

/* --- Zustand: tippen — links wächst, das Feld erscheint darin --- */
body[data-modus="tippen"] .slot-rechts { flex: 0 0 0px; margin-left: -8px; opacity: 0; transform: scale(.85); pointer-events: none; }
body[data-modus="tippen"] .slot-links { border-color: rgba(143, 184, 255, .30); box-shadow: 0 18px 40px rgba(0, 0, 0, .42), 0 0 0 4px rgba(143, 184, 255, .07), inset 0 1.5px 2px rgba(255, 255, 255, .26); }
body[data-modus="tippen"] #tasten { opacity: 0; pointer-events: none; transform: scale(.9); filter: blur(6px); }
body[data-modus="tippen"] .feld { position: relative; opacity: 1; pointer-events: auto; visibility: visible; animation: warpIn .42s var(--weich) both; }
body[data-modus="tippen"] .zu, body[data-modus="aufnahme"] .zu { flex-basis: var(--zu-b); width: var(--zu-b); margin-left: 0; opacity: 1; pointer-events: auto; }
.zu:active { transform: scale(.9); }

/* --- Zustand: aufnahme — rechts wächst und wird zur Aufnahmefläche --- */
body[data-modus="aufnahme"] .slot-links, body[data-modus="arbeit"] .slot-links { flex: 0 0 0px; margin-right: -8px; opacity: 0; transform: scale(.85); pointer-events: none; }
body[data-modus="aufnahme"] .slot-rechts {
  background: linear-gradient(155deg, rgba(var(--rec-kanal), .17), rgba(255, 255, 255, .06));
  border-color: rgba(var(--rec-kanal), .38);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .42), 0 0 0 4px rgba(var(--rec-kanal), .09), inset 0 1.5px 2px rgba(255, 255, 255, .26);
  animation: atmen 2.8s ease-in-out infinite;
}
body[data-modus="aufnahme"] #mic .sym,
body[data-modus="aufnahme"] .faeden-feld, body[data-modus="arbeit"] .faeden-feld { opacity: 1; animation: warpIn .4s var(--weich) both; }
body[data-modus="aufnahme"] #mic::after { content: attr(data-zeit); color: var(--rec); }
body[data-modus="aufnahme"] #mic::before {
  content: ""; position: absolute; left: var(--rec-kante); top: 50%;
  width: var(--rec-punkt); height: var(--rec-punkt); margin-top: calc(var(--rec-punkt) / -2); border-radius: 50%;
  background: var(--rec); box-shadow: 0 0 0 3px rgba(var(--rec-kanal), .22); animation: pulsen 1.2s ease-in-out infinite;
}

/* --- Zustand: arbeit — die Fläche bleibt, wird still, die Fäden ziehen sich zum Ring --- */
body[data-modus="arbeit"] .slot-rechts { pointer-events: none; border-color: rgba(255, 255, 255, .16); }
body[data-modus="arbeit"] #mic::after { content: "wird übertragen …"; width: var(--hinweis-b); color: var(--dim); animation: warpIn .4s var(--weich) both, pulsen 2.4s ease-in-out .4s infinite; }
/* ohne roten Punkt darf der Ring weiter links stehen; rechts braucht der Hinweis mehr Platz
   (320px-Gerät: 246 − 18 − 146 = 82px Fläche, Ring ≈ 50px samt Leuchten) */
body[data-modus="arbeit"] .faeden-feld, body[data-modus="arbeit"] .welle { left: 18px; right: var(--hinweis-b); }
body[data-modus="arbeit"] .zu { opacity: 0; pointer-events: none; }

/* ---------- Orbit: Gespräch mit dem Sprach-Assistenten ---------- */
/* Dritte Glasfläche neben Tastatur und Mikrofon. Im Gespräch (data-modus
   „anruf") ziehen sich die beiden anderen zurück wie beim Tippen oder
   Sprechen, die Orbit-Fläche wird breit und zeigt den Zustand als Text.
   Rechts daneben geht „Auflegen" auf — dieselbe Mechanik wie beim ×. */
.slot-orbit:has(#orbit[hidden]) { display: none; }

/* Orbit: Planet mit schräger Bahn und Trabant (Blickmaß 44×44) */
#orbit .sym {
  --sym: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Ccircle cx='22' cy='22' r='7' fill='none' stroke='%23000' stroke-width='2.4'/%3E%3Cellipse cx='22' cy='22' rx='19' ry='8' transform='rotate(-28 22 22)' fill='none' stroke='%23000' stroke-width='2.2'/%3E%3Ccircle cx='38.8' cy='13.1' r='3.2' fill='%23000'/%3E%3C/svg%3E");
}
.orbit-zustand {
  display: none; min-width: 0;
  font-size: 14px; letter-spacing: .01em; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Auflegen: rote Pille, nur im Gespräch mit Platz */
.auflegen {
  flex: 0 0 0px; width: 0; min-width: 0; height: 44px; margin-left: -8px; padding: 0;
  align-self: center; overflow: hidden; white-space: nowrap;
  opacity: 0; pointer-events: none;
  border-radius: 999px; font-size: 14px; font-weight: 700; color: #2c0906;
  background: linear-gradient(155deg, rgba(255, 146, 134, .96), rgba(222, 70, 58, .96));
  box-shadow: 0 4px 14px rgba(255, 107, 98, .36), 0 0 20px rgba(255, 107, 98, .22);
  transition: flex-basis .44s var(--feder), width .44s var(--feder), margin .44s var(--feder), opacity .25s var(--weich), transform .2s var(--schnell);
}
.auflegen:active { transform: scale(.94); }

/* Beim Tippen und Sprechen zieht sich die Orbit-Fläche zurück wie die anderen */
body[data-modus="tippen"] .slot-orbit, body[data-modus="aufnahme"] .slot-orbit, body[data-modus="arbeit"] .slot-orbit { flex: 0 0 0px; margin-left: -8px; opacity: 0; transform: scale(.85); pointer-events: none; }

/* --- Zustand: anruf --- */
body[data-modus="anruf"] .slot-links, body[data-modus="anruf"] .slot-rechts { flex: 0 0 0px; margin-right: -8px; opacity: 0; transform: scale(.85); pointer-events: none; }
body[data-modus="anruf"] .slot-orbit {
  pointer-events: none;
  background: linear-gradient(155deg, rgba(var(--orbit-kanal), .16), rgba(255, 255, 255, .06));
  border-color: rgba(var(--orbit-kanal), .36);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .42), 0 0 0 4px rgba(var(--orbit-kanal), .08), inset 0 1.5px 2px rgba(255, 255, 255, .26);
}
body[data-modus="anruf"] #orbit { justify-content: flex-start; gap: 14px; padding: 0 18px; }
body[data-modus="anruf"] #orbit .sym { flex: none; width: 34px; height: 34px; color: rgb(var(--orbit-kanal)); }
body[data-modus="anruf"] .orbit-zustand { display: block; animation: warpIn .4s var(--weich) both; }
body[data-modus="anruf"] .auflegen { flex: 0 0 auto; width: auto; padding: 0 18px; margin-left: 0; opacity: 1; pointer-events: auto; }
/* verbindet: die Bahn dreht sich; der Text pulsiert */
#orbit[data-phase="verbindet"] .sym, #orbit[data-phase="verbindet-neu"] .sym { animation: punktDreh 2.8s linear infinite; }
#orbit[data-phase="verbindet"] .orbit-zustand, #orbit[data-phase="verbindet-neu"] .orbit-zustand { color: var(--dim); animation: warpIn .4s var(--weich) both, pulsen 2.4s ease-in-out .4s infinite; }
/* hört zu und Silas spricht: die Fläche leuchtet kühl auf */
body[data-modus="anruf"] .slot-orbit:has(#orbit[data-phase="hoert"][data-pegel="hoch"]) {
  border-color: rgba(var(--rec-kanal), .42);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .42), 0 0 0 5px rgba(var(--rec-kanal), .11), 0 0 26px rgba(var(--rec-kanal), .12), inset 0 1.5px 2px rgba(255, 255, 255, .26);
}
/* Orbit spricht: die Fläche atmet im Lila */
body[data-modus="anruf"] .slot-orbit:has(#orbit[data-phase="spricht"]) { animation: orbitAtmen 2.4s ease-in-out infinite; }
#orbit[data-phase="spricht"] .sym { animation: orbitPuls 1.2s ease-in-out infinite; }
/* Claude arbeitet: ein ruhiger warmer Punkt am Ende der Zeile */
#orbit[data-claude="arbeitet"]::after {
  content: ""; flex: none; width: 7px; height: 7px; margin-left: auto; border-radius: 50%;
  background: var(--warm); box-shadow: 0 0 0 3px rgba(232, 149, 111, .18); animation: pulsen 1.6s ease-in-out infinite;
}
body:not([data-modus="anruf"]) #orbit::after { content: none; }

/* Mitschrift: das zuletzt Gesagte, je höchstens zwei Zeilen */
.mitschrift {
  display: flex; flex-direction: column; gap: 3px;
  padding: 8px 13px; border-radius: var(--r-fuss);
  font-size: 13px; line-height: 1.4;
  box-shadow: var(--glas-schatten-flach);
  animation: warpIn .4s var(--weich) both;
}
.mitschrift p { margin: 0; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow-wrap: anywhere; }
.mitschrift p:empty { display: none; }
.mitschrift .ms-silas { color: var(--dim); }
.mitschrift .ms-silas::before { content: "Du: "; color: var(--leise); }
.mitschrift .ms-orbit { color: var(--text); }
.mitschrift .ms-orbit::before { content: "Orbit: "; color: rgb(var(--orbit-kanal)); font-weight: 600; }
body:not([data-modus="anruf"]) .mitschrift { display: none; }

@keyframes orbitAtmen {
  0%, 100% { box-shadow: 0 18px 40px rgba(0, 0, 0, .42), 0 0 0 4px rgba(var(--orbit-kanal), .08), inset 0 1.5px 2px rgba(255, 255, 255, .26); }
  50% { box-shadow: 0 18px 44px rgba(0, 0, 0, .42), 0 0 0 7px rgba(var(--orbit-kanal), .15), 0 0 30px rgba(var(--orbit-kanal), .16), inset 0 1.5px 2px rgba(255, 255, 255, .26); }
}
@keyframes orbitPuls { 50% { transform: scale(1.1); } }

/* ---------- Auswahlfläche, Hinweise ---------- */
.sheet {
  border-radius: 22px; max-height: 45vh; overflow-y: auto; overscroll-behavior: contain;
  animation: aufsteigen .42s var(--feder) both;
}
.sheet-head {
  display: flex; justify-content: space-between; align-items: center; padding: 10px 16px;
  border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 1;
  background: rgba(24, 27, 34, .82);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.sheet-head b { font-size: 14px; }
.sheet-head button { font-size: 22px; color: var(--dim); width: 32px; height: 32px; border-radius: 50%; }
.sheet-head button:active { background: rgba(255, 255, 255, .12); }

/* Die Anleitung hinter /help: Fließtext in derselben Fläche wie die Listen,
   nur luftiger und mit ruhigerem Zeilenabstand — sie wird gelesen, nicht
   angetippt. Die erste Zeile darf nicht am Kopf kleben. */
.hilfe { padding: 14px 16px 18px; }
.hilfe p { margin: 0 0 11px; font-size: 13.5px; line-height: 1.55; color: var(--text); }
.hilfe p:last-child { margin-bottom: 0; }
.hilfe b, .hilfe strong { font-weight: 600; }
.hilfe code, .hilfe kbd {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px;
  padding: 1px 5px; border-radius: 6px; background: rgba(255, 255, 255, .09);
  border: 1px solid var(--line);
}
.hilfe ul { margin: 0 0 11px; padding-left: 18px; }
.hilfe li { font-size: 13.5px; line-height: 1.55; margin-bottom: 5px; }
.hilfe h3 { margin: 14px 0 7px; font-size: 12px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--leise); }
.hilfe h3:first-child { margin-top: 0; }
.sheet .meta { padding: 12px 16px; }

.toast {
  /* absolut, nicht fixiert: fixierte Flächen richten sich nach dem Layout-
     Fenster, das bei offener Tastatur bis hinter die Tastatur reicht — der
     Hinweis wäre dort unsichtbar. Am Körper hängend sitzt er immer im Sichtfeld. */
  position: absolute; left: 50%; bottom: calc(var(--fussrand) + var(--fuss-h) + 24px);
  transform: translateX(-50%);
  padding: 9px 16px; border-radius: 999px; font-size: 14px; max-width: min(90vw, 480px); z-index: 50;
  background: linear-gradient(155deg, rgba(40, 44, 54, .92), rgba(28, 31, 38, .92));
  animation: warpInMitte .35s var(--weich) both;
}

/* ---------- Anmeldung (login.html nutzt dieselbe Datei) ---------- */
body.login { display: flex; align-items: center; justify-content: center; padding: 24px; }
.login-box {
  width: min(360px, 92vw); padding: 26px 24px 22px; border-radius: 26px;
  display: flex; flex-direction: column; gap: 10px;
  animation: warpIn .55s var(--weich) both;
}
.login-box h1 { margin: 0 0 8px; font-size: 22px; letter-spacing: -.02em; font-weight: 700; }
.login-box label { font-size: 13px; color: var(--dim); }
.login-box input {
  background: rgba(0, 0, 0, .28); border: 1px solid var(--line-hell); border-radius: 14px;
  padding: 11px 14px; font-size: 16px; outline: none; color: var(--text);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3);
  transition: border-color .2s, box-shadow .2s;
}
.login-box input:focus { border-color: rgba(143, 184, 255, .5); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3), 0 0 0 4px rgba(143, 184, 255, .12); }
.login-box .send { height: 44px; margin-top: 4px; font-size: 15px; }
.login-box .hint { color: var(--leise); font-size: 12px; margin: 6px 0 0; line-height: 1.45; }
.login-box .err { color: #ffc0ba; margin: 0; font-size: 13px; background: rgba(255, 107, 98, .1); border: 1px solid rgba(255, 107, 98, .3); padding: 8px 12px; border-radius: 12px; }

/* ---------- Bewegung ---------- */
@keyframes warpIn {
  0% { opacity: 0; transform: scale(.965) translateY(10px); filter: blur(10px); }
  55% { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
}
@keyframes warpInMitte {
  0% { opacity: 0; transform: translateX(-50%) scale(.95) translateY(8px); filter: blur(8px); }
  100% { opacity: 1; transform: translateX(-50%) scale(1) translateY(0); filter: blur(0); }
}
/* Menüs klappen kurz auf: der Ursprung liegt am Kopfknopf (transform-origin
   steht bei .menue), deshalb wirkt es wie ein Ausklappen und nicht wie ein
   Einblenden. Die Bewegung war benutzt, aber nie definiert. */
@keyframes menueAuf {
  from { opacity: 0; transform: scale(.96) translateY(-6px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes aufsteigen {
  0% { opacity: 0; transform: translateY(24px) scale(.98); filter: blur(6px); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
/* Nebel-Bahnen: Wegpunkte in px, die Prozentmarken sind proportional zur
   Streckenlänge, damit die mittlere Geschwindigkeit auf der ganzen Bahn gleich ist. */
@keyframes nebel-blau {
  0%     { transform: translate3d(0, 0, 0); }
  18.9%  { transform: translate3d(120px, -70px, 0); }
  43.1%  { transform: translate3d(40px, 90px, 0); }
  65.1%  { transform: translate3d(-110px, 30px, 0); }
  85.9%  { transform: translate3d(-30px, -100px, 0); }
  100%   { transform: translate3d(0, 0, 0); }
}
@keyframes nebel-warm {
  0%     { transform: translate3d(0, 0, 0); }
  20.7%  { transform: translate3d(-90px, 80px, 0); }
  41.6%  { transform: translate3d(-140px, -30px, 0); }
  66.4%  { transform: translate3d(-20px, -110px, 0); }
  86%    { transform: translate3d(70px, -40px, 0); }
  100%   { transform: translate3d(0, 0, 0); }
}
@keyframes nebel-lila {
  0%     { transform: translate3d(0, 0, 0); }
  17%    { transform: translate3d(130px, -60px, 0); }
  32%    { transform: translate3d(170px, 60px, 0); }
  50.8%  { transform: translate3d(20px, 110px, 0); }
  69.5%  { transform: translate3d(-120px, 40px, 0); }
  85.7%  { transform: translate3d(-80px, -90px, 0); }
  100%   { transform: translate3d(0, 0, 0); }
}
@keyframes nebel-teal {
  0%     { transform: translate3d(0, 0, 0); }
  18.2%  { transform: translate3d(-70px, -60px, 0); }
  41.3%  { transform: translate3d(-130px, 40px, 0); }
  62.6%  { transform: translate3d(-40px, 100px, 0); }
  86.8%  { transform: translate3d(60px, 30px, 0); }
  100%   { transform: translate3d(0, 0, 0); }
}
@keyframes pulsen { 50% { opacity: .35; } }
/* Sitzungswechsel per Wischen: der neue Verlauf kommt aus der Wischrichtung
   herein. Kurz, ruhig, kein Karussell — bei „Bewegung reduzieren" (unten)
   dreht die Dauer auf null, dann sieht man nichts. */
.log.wisch-l { animation: wischEinL .26s var(--weich) both; }
.log.wisch-r { animation: wischEinR .26s var(--weich) both; }
@keyframes wischEinL {
  from { opacity: .45; transform: translateX(22px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes wischEinR {
  from { opacity: .45; transform: translateX(-22px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes blinzeln { 50% { opacity: 0; } }
@keyframes wogen { 0%, 100% { transform: translateY(0); opacity: .45; } 50% { transform: translateY(-3px); opacity: 1; } }
@keyframes welle { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
@keyframes atmen {
  0%, 100% { box-shadow: 0 18px 40px rgba(0, 0, 0, .42), 0 0 0 4px rgba(var(--rec-kanal), .08), inset 0 1.5px 2px rgba(255, 255, 255, .26); }
  50% { box-shadow: 0 18px 44px rgba(0, 0, 0, .42), 0 0 0 7px rgba(var(--rec-kanal), .14), 0 0 30px rgba(var(--rec-kanal), .14), inset 0 1.5px 2px rgba(255, 255, 255, .26); }
}

/* Wer Bewegung reduziert haben will: Formwechsel sofort, Aufnahme als stille Balken */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  html::before, html::after, body::before, body::after { animation: none; }
  .slot:has(.gross:active) { transform: none; }
  .faeden-feld { display: none; }
  body[data-modus="aufnahme"] .welle, body[data-modus="arbeit"] .welle { display: flex; opacity: 1; }
  .welle i { animation: none; }
  .welle i:nth-child(1) { transform: scaleY(.45); } .welle i:nth-child(2) { transform: scaleY(.8); }
  .welle i:nth-child(3) { transform: scaleY(1); } .welle i:nth-child(4) { transform: scaleY(.7); } .welle i:nth-child(5) { transform: scaleY(.4); }
  .tool.run .dot, .puls, .working span { animation: none; opacity: 1; }
}

/* Am Rechner: alles in der Mitte, nicht zu breit */
@media (min-width: 900px) {
  :root { --rand: max(24px, calc((100vw - var(--maxw)) / 2)); }
  .top { padding-inline: var(--rand); }
}
@media (hover: hover) {
  .slot:hover { border-color: rgba(255, 255, 255, .28); }
}

/* ---------- Auswahlfenster ---------- */
/* Erscheint, wenn Claude eine Entscheidung braucht. Es legt sich über den
   Verlauf, lässt ihn aber durchscheinen: man soll sehen, woraus die Frage
   entstanden ist. Es sitzt unten, in Daumennähe — nicht in der Bildschirmmitte,
   wo man mit einer Hand nicht hinkommt.
   Geht die Tastatur auf, hebt sich das ganze Fenster wie die Fußzeile um
   --tastatur: iOS verkleinert dabei nur das sichtbare Fenster, das
   Layout-Fenster (an dem `fixed` hängt) bleibt hoch — ohne diesen Rand stand
   die Karte samt Textfeld hinter der Tastatur. */
.frage {
  position: fixed; inset: 0 0 var(--tastatur) 0; z-index: 60;
  transition: bottom .22s var(--weich);
  display: flex; align-items: flex-end; justify-content: center;
  padding: 16px;
  padding-top: max(16px, env(safe-area-inset-top));
  padding-bottom: max(16px, env(safe-area-inset-bottom));
  background: rgba(10, 12, 15, .55);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  animation: frageNebel .2s var(--weich) both;
}
.frage[hidden] { display: none; }
/* Bei offener Tastatur deckt sie den Home-Balken ab; der sichere Rand würde
   die Karte nur grundlos von der Tastatur abheben. */
body.tastatur-offen .frage { padding-bottom: 10px; }
@keyframes frageNebel { from { opacity: 0; } to { opacity: 1; } }

.frage-karte {
  width: min(420px, 100%);
  /* Der Platz im Fenster, nicht die Fensterhöhe: 100dvh schrumpft bei
     offener Tastatur nicht mit. Ist die Karte höher als der Rest, wird sie
     oben gekappt und scrollt in sich; app.js hält dann das Textfeld und die
     Knöpfe darunter im Bild (frageFeldZeigen). */
  max-height: 100%;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column; gap: 10px;
  padding: 16px; border-radius: var(--r);
  background: linear-gradient(155deg, rgba(44, 48, 58, .97), rgba(28, 31, 38, .97));
  border: 1px solid var(--glas-kante);
  box-shadow: var(--glas-schatten);
  animation: frageAuf .26s var(--feder) both;
}
@keyframes frageAuf { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }

.frage-zaehler { font-size: 12px; color: var(--dim); }
.frage-kopf {
  align-self: flex-start;
  padding: 3px 9px; border-radius: 999px;
  background: var(--glas); border: 1px solid var(--glas-kante);
  font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--dim);
}
.frage-titel { margin: 0; font-size: 17px; line-height: 1.35; font-weight: 600; }
.frage-hinweis { margin: -4px 0 0; font-size: 12px; color: var(--dim); }

.frage-liste { display: flex; flex-direction: column; gap: 8px; }
.frage-option {
  display: flex; flex-direction: column; gap: 3px;
  padding: 11px 13px; border-radius: 14px; text-align: left;
  background: var(--glas); border: 1px solid var(--glas-kante);
  transition: transform .18s var(--schnell), background .2s, border-color .2s;
}
.frage-option:active { transform: scale(.985); background: var(--glas-hell); }
/* Gewählt: dieselbe kühle Familie wie der Senden-Knopf, damit „das gilt jetzt"
   überall gleich aussieht. Ohne harte Linien — die lesen sich auf kleinen
   Flächen als Striche. */
.frage-option.gewaehlt {
  background: linear-gradient(155deg, rgba(126, 232, 255, .22), rgba(38, 148, 214, .18));
  border-color: rgba(126, 232, 255, .5);
}
.fo-titel { font-size: 15px; font-weight: 600; }
.fo-text { font-size: 12.5px; line-height: 1.4; color: var(--dim); }
.frage-anders { color: var(--dim); font-size: 14px; }

.frage-eigenes {
  width: 100%; padding: 11px 13px; border-radius: 14px;
  background: rgba(0, 0, 0, .28); border: 1px solid var(--glas-kante);
  color: var(--text); font-size: 16px; /* 16px: darunter zoomt iOS beim Fokus */
  outline: none;
}
.frage-eigenes:focus { border-color: rgba(126, 232, 255, .5); }

.frage-fuss { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 2px; }
.frage-weg { color: var(--dim); font-size: 14px; padding: 8px 4px; }
.frage-weiter { flex: none; }

/* Spur im Verlauf */
.frage-spur-text { padding: 9px 12px; font-size: 13px; line-height: 1.45; color: var(--dim); }

/* ---------- Sitzung schliessen ---------- */
/* Eintrag und Löschknopf liegen nebeneinander in einer Zeile. Der Knopf ist
   bewusst zurückhaltend — er soll auffindbar sein, aber nicht einladen. */
.menue-zeile { display: flex; align-items: stretch; gap: 4px; }
.menue-zeile > .menue-eintrag { flex: 1; min-width: 0; }
.menue-loeschen {
  flex: none; width: 38px; border-radius: 12px;
  color: var(--dim); font-size: 19px; line-height: 1;
  transition: background-color .15s, color .15s, width .2s var(--weich);
}
.menue-loeschen:active { background: rgba(255, 255, 255, .10); }
/* Die Rückfrage: jetzt wird es ernst, also warm und mit Wort statt Zeichen. */
.menue-loeschen.fragt {
  width: auto; padding: 0 12px;
  font-size: 13px; font-weight: 600;
  color: rgba(255, 176, 158, .95);
  background: rgba(214, 78, 66, .22);
}

/* ---------- Als App vom Startbildschirm ---------- */
/* Ohne Safaris Adressleiste sitzt die Kopfzeile unmittelbar unter der Uhr und
   dem Empfangsbalken — technisch richtig, optisch gedrängt. Hier bekommt sie
   Luft. Zwei Wege zum selben Ziel: die Abfrage kennt jeder moderne Browser,
   `navigator.standalone` ist der ältere Weg von iOS, den die Seite selbst
   setzt. Doppelt, weil genau dieser Fall sonst still danebengeht. */
/* Als App vom Startbildschirm ist oben etwas mehr Platz, weil die Fläche dort
   ganz der Seite gehört. Die Kennzeichnung MUSS am Wurzelelement hängen:
   `--oben` wird dort gerechnet und `--kopf-luft` genau dort eingesetzt. Ein
   Wert, der erst am Körper gesetzt wird, erreicht diese Rechnung nie. */
@media (display-mode: standalone) { :root { --kopf-luft: 18px; } }
:root.als-app { --kopf-luft: 18px; }