/* ===== Theme tokens (light = default, per redesign spec) ===== */
:root{
 --bg:#f8fafc; --surface:#ffffff; --surface2:#f1f5f9; --border:#e2e8f0;
 --text:#0f172a; --text2:#64748b; --accent:#3b82f6; --accent-text:#fff;
 --danger:#ef4444; --danger-soft:#fee2e2; --danger-text:#991b1b;
 --success:#10b981; --warn:#f59e0b;
 --r-sm:8px; --r-md:12px; --r-lg:16px; --r-pill:999px;
 --shadow-sm:0 1px 2px rgba(15,23,42,.06),0 1px 1px rgba(15,23,42,.04);
 --shadow-md:0 6px 20px rgba(15,23,42,.10);
 --bubble-a:#e2e8f0; --bubble-a-text:#0f172a;
 --bubble-b:#3b82f6; --bubble-b-text:#fff;
 /* --- Chat-Marke: eigenes Blau->Petrol aus dem App-Akzent. Bewusst KEINE fremden
        Messenger-Farbwelten (kein 25D366/075E54/128C7E/06C755), kein fremdes Muster.
        Kontrast (Text auf eigener Blase) gerechnet: #fff auf #2563eb = 5,17:1,
        auf #0e7490 = 5,36:1, Verlauf-Mitte ~5,34:1 -> WCAG AA (>=4,5:1). --- */
 --c-brand:#2563eb; --c-brand-2:#0e7490;          /* eigene Blase: Verlauf blau -> petrol */
 --c-on-brand:#fff;                                /* Haupttext auf eigener Blase */
 --c-on-brand-2:rgba(255,255,255,.92);             /* Sekundaerzeile darauf, >=4,6:1 */
 --c-canvas:#eef2f8;                               /* Verlaufsflaeche (ruhiger als --bg) */
 --c-bub-them:#ffffff; --c-bub-them-bd:#dbe3ec;    /* fremde Blase: neutrale Flaeche */
 --c-muted:#475569;                                /* Sekundaertext, 6,75:1 auf --c-canvas */
 --c-badge:#dc2626;                                /* Zaehler-Punkt, #fff darauf = 4,83:1 */
 --c-tick:#7dd3fc;                                 /* Zustellhaken (Symbol, >=3:1) */
 --c-brand-ink:#1d4ed8;                            /* Marke als TEXT auf heller Flaeche, 6,4:1 */
 --c-focus:rgba(37,99,235,.22);
}
:root[data-theme="dark"]{
 --bg:#0f172a; --surface:#1e293b; --surface2:#334155; --border:#334155;
 --text:#e2e8f0; --text2:#94a3b8; --accent:#3b82f6; --accent-text:#fff;
 --danger:#ef4444; --danger-soft:#450a0a; --danger-text:#fca5a5;
 --success:#10b981; --warn:#f59e0b;
 --shadow-sm:0 1px 2px rgba(0,0,0,.3); --shadow-md:0 6px 20px rgba(0,0,0,.45);
 --bubble-a:#334155; --bubble-a-text:#e2e8f0;
 --bubble-b:#0e7490; --bubble-b-text:#fff;
 /* Dunkel: dieselbe Marke, nur tiefer angesetzt. #fff auf #1150a8 = 7,78:1,
    auf #0e7490 = 5,36:1; fremde Blase #e2e8f0 auf #1e293b = 11,9:1. */
 --c-brand:#1150a8; --c-brand-2:#0e7490;
 --c-on-brand:#fff; --c-on-brand-2:rgba(255,255,255,.92);
 --c-canvas:#0b1220;
 --c-bub-them:#1e293b; --c-bub-them-bd:#334155;
 --c-muted:#94a3b8;                                /* 7,3:1 auf --c-canvas */
 --c-badge:#dc2626; --c-tick:#7dd3fc;
 --c-brand-ink:#7dd3fc;                            /* Marke als Text: hell, 6,2:1 auf --surface2 */
 --c-focus:rgba(56,189,248,.28);
}

*{box-sizing:border-box}
html,body{height:100%}
body{font-family:"Inter",system-ui,-apple-system,sans-serif;margin:0;background:var(--bg);color:var(--text);display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden;transition:background .2s,color .2s}
header{padding:12px 14px;background:var(--surface);border-bottom:1px solid var(--border);font-weight:600;display:flex;align-items:center;gap:8px}
header .t{flex:1;min-width:0;font-size:1.05rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.iconbtn{padding:0;width:40px;height:40px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;font-size:1.15rem;border-radius:var(--r-md);background:var(--surface2);color:var(--text);font-weight:600;border:1px solid transparent}
.iconbtn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.iconbtn.act{background:var(--accent);color:var(--accent-text)}
/* Prominente Sprachzeile direkt unter dem Kopf */
#langbar{display:flex;align-items:center;gap:10px;padding:12px 14px;background:var(--bg);border-bottom:1px solid var(--border)}
#langbar select{flex:1;min-width:0;padding:12px 10px;border-radius:var(--r-md);border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:1rem;font-weight:600;text-align:center}
#swap{flex:0 0 auto;width:44px;height:44px;padding:0;display:flex;align-items:center;justify-content:center;font-size:1.25rem;border-radius:50%;background:var(--accent);color:var(--accent-text);font-weight:700;border:0}
#swap svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* Einstellungen-Panel: rechtsseitiges Drawer mit abgedunkeltem Hintergrund */
#settings{position:fixed;inset:0;z-index:30;display:none;background:rgba(2,6,23,.5);-webkit-overflow-scrolling:touch}
#settings.on{display:block}
#settingsPanel{position:absolute;top:0;right:0;bottom:0;width:440px;max-width:92vw;background:var(--surface);color:var(--text);display:flex;flex-direction:column;gap:12px;padding:14px;overflow-y:auto;-webkit-overflow-scrolling:touch;box-shadow:var(--shadow-md);transform:translateX(100%);transition:transform .25s ease}
#settings.on #settingsPanel{transform:translateX(0)}
#settings .field{display:flex;align-items:center;justify-content:space-between;gap:12px}
#settings label{font-size:.92rem;color:var(--text2);font-weight:600}
#settings select{padding:10px;border-radius:var(--r-sm);border:1px solid var(--border);background:var(--surface2);color:var(--text);font-size:.95rem;min-width:170px}
#settingsHead{display:flex;align-items:center;justify-content:space-between;padding-bottom:12px;border-bottom:1px solid var(--border)}
#settingsHead h2{margin:0;font-size:1.15rem}
#settingsHead button{background:transparent;color:var(--text2);width:36px;height:36px;padding:0;border-radius:50%}
#settingsHead button svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* Segmentierte Tab-Leiste (Zusatz-Infobereiche: Funktionen/Anleitung/…) */
#settings .tabbar{display:flex;gap:6px;flex-wrap:wrap;overflow-x:auto}
.segbtn{padding:6px 12px;border-radius:var(--r-pill);font-weight:700;font-size:.82rem;background:var(--surface2);color:var(--text);border:1px solid var(--border);white-space:nowrap}
.segbtn.on{background:var(--accent);color:var(--accent-text);border-color:var(--accent)}
/* Segmentierte Auswahl-Buttons (Ersatz für <select> bei wenigen Optionen) */
.seg{display:flex;gap:8px;flex-wrap:wrap}
.seg-btn{flex:1;min-width:0;padding:10px 12px;border-radius:var(--r-sm);border:1px solid var(--border);background:var(--surface2);color:var(--text);font-weight:600;font-size:.9rem;white-space:nowrap}
.seg-btn.on{background:var(--accent);color:var(--accent-text);border-color:var(--accent)}
/* Plain-Row (Konto/Verlauf am Ende des Drawers) */
.rowlink{display:flex;align-items:center;gap:10px;padding:12px 4px;background:transparent;color:var(--text2);font-weight:600;text-align:left;border-top:1px solid var(--border)}
.rowlink svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
/* Accordion-Gruppen in den Haupt-Einstellungen */
.acc{border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;background:var(--surface)}
.acc+.acc{margin-top:10px}
.acc-h{display:flex;align-items:center;gap:10px;width:100%;padding:13px 14px;background:transparent;border:0;color:var(--text);font-weight:700;font-size:.95rem;text-align:left;cursor:pointer}
.acc-h .ic{width:20px;height:20px;flex:0 0 auto;stroke:var(--accent);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.acc-h .chev{margin-left:auto;width:18px;height:18px;flex:0 0 auto;stroke:var(--text2);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.acc.open .acc-h .chev{transform:rotate(180deg)}
.acc-b{max-height:0;opacity:0;overflow:hidden;transition:max-height .25s ease,opacity .2s ease}
.acc.open .acc-b{max-height:2000px;opacity:1}
.acc-b-in{padding:4px 14px 14px;display:flex;flex-direction:column;gap:14px}
/* Pill-Toggle (Ersatz-Optik für Checkboxen, Funktion bleibt <input type=checkbox>) */
.pill-toggle{position:relative;display:inline-block;width:38px;height:22px;flex:0 0 auto;accent-color:var(--accent)}
/* Leerer Zustand */
#hint{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;color:var(--text2);padding:24px;user-select:none}
#hint .emoji{font-size:3.4rem;opacity:.85}
#hint .txt{font-size:1.05rem;max-width:260px;line-height:1.4}
#log:not(:empty) ~ #hint{display:none}
#banner{display:none;align-items:center;justify-content:center;gap:12px;background:var(--danger);color:#fff;padding:14px;font-weight:700;font-size:1.15rem}
#banner.on{display:flex}
.dot{width:14px;height:14px;border-radius:50%;background:#fca5a5;animation:pulse 1.6s infinite}
/* sehr dezentes Pulsieren – ~90% schwächer als zuvor (kein Größen-Zoom mehr) */
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.92}}
#log{padding:12px;display:flex;flex-direction:column;gap:10px;flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;background:var(--bg)}
#log:empty{flex:0;padding:0}
.b{padding:12px 14px;border-radius:var(--r-lg);max-width:88%;word-wrap:break-word;box-shadow:var(--shadow-sm)}
.de{background:var(--bubble-a);color:var(--bubble-a-text);align-self:flex-start}.th{background:var(--bubble-b);color:var(--bubble-b-text);align-self:flex-end}
.b.tap{cursor:pointer;position:relative;padding-right:40px}
.cpy{position:absolute;top:6px;right:6px;background:rgba(127,127,127,.22);border:none;border-radius:8px;font-size:14px;line-height:1;padding:6px 7px;opacity:.85;cursor:pointer;color:inherit}
.cpy:active{background:rgba(127,127,127,.4)}
/* Entwurf: Übersetzung streamt noch, wird gleich korrigiert/finalisiert */
.b.pend{opacity:.78;border:1.5px dashed rgba(127,127,127,.55)}
.b.pend .tr::after{content:"▌";margin-left:2px;animation:pblink 1s steps(1) infinite}
@keyframes pblink{50%{opacity:0}}
.tr{font-size:1.35rem;line-height:1.35}.ro{opacity:.8;font-size:.9rem;margin-top:4px}
.nt{opacity:.75;font-size:.82rem;font-style:italic;margin-top:5px}.nt.thn{font-style:normal}
.tm{color:var(--accent);opacity:.85;font-size:.72rem;margin-top:4px;font-variant-numeric:tabular-nums}
/* padding-bottom passt sich an die Android-/iOS-Bedienleiste an (0 wenn keine da) */
footer{background:var(--surface);border-top:1px solid var(--border);padding:10px;padding-bottom:calc(10px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:10px}
.row{display:flex;gap:8px}
button{padding:16px;border:0;border-radius:var(--r-md);font-size:1.05rem;background:var(--accent);color:var(--accent-text);font-weight:700;cursor:pointer}
/* Mic-Reihe: runde Mic-Buttons links/rechts, kompakte Live-Modus-Pille mittig */
.row:has(.mic){align-items:center;gap:14px}
.mic{flex:0 0 auto;width:52px;height:52px;padding:0;border-radius:50%;font-size:1.3rem;touch-action:manipulation;background:var(--accent);color:var(--accent-text);display:flex;align-items:center;justify-content:center}
.mic.rec{background:var(--danger);color:#fff;animation:pulse 1.6s infinite}
#liveBtn{flex:1;min-width:0;background:var(--surface2);color:var(--text2);font-weight:600;font-size:.85rem;padding:10px 12px;border-radius:var(--r-pill);border:1px solid var(--border)}
#liveBtn.on{background:var(--danger);color:#fff;border-color:var(--danger);animation:pulse 1.6s infinite}
.smic.rec{background:var(--danger);animation:smicpulse 1s infinite}
@keyframes listen{0%,100%{opacity:1}50%{opacity:.5}}
@keyframes smicpulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(239,68,68,.75)}50%{opacity:.8;box-shadow:0 0 0 16px rgba(239,68,68,0)}}
.sres.editing{outline:2px dashed var(--accent);outline-offset:6px;border-radius:8px;min-width:60%;padding:6px}
.sok{font-size:1.05rem;padding:14px 22px;border-radius:var(--r-md);width:90%;max-width:360px;background:var(--success)}
@keyframes work{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.lst{animation:listen .9s infinite}
.wrk{display:inline-block;animation:work .7s infinite;font-size:1.3em}
#tin{flex:1;min-width:0;padding:14px;border-radius:var(--r-sm);border:1px solid var(--border);font-size:1rem;background:var(--surface2);color:var(--text);font-family:inherit;line-height:1.4;resize:none;max-height:35vh;overflow-y:auto}
.row select{padding:0 10px;border-radius:var(--r-sm);border:1px solid var(--border);background:var(--surface2);color:var(--text);font-size:.95rem;max-width:130px;flex:0 0 auto}
#sendBtn{flex:0 0 auto}
#modal{position:fixed;inset:0;background:rgba(2,6,23,.97);display:none;flex-direction:column;justify-content:safe center;align-items:center;padding:22px;padding-top:56px;z-index:40;text-align:center;overflow-y:auto;-webkit-overflow-scrolling:touch;color:#e2e8f0}
/* Verlauf-Overlay (über Split z15 + Settings z30; Modal z40 liegt darüber zum Vorlesen) */
#history{position:fixed;inset:0;z-index:31;display:none;flex-direction:column;background:var(--bg);color:var(--text)}
#history.on{display:flex}
#history .hhead{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:14px;border-bottom:1px solid var(--border)}
#hlist{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:12px;display:flex;flex-direction:column;gap:10px}
.hitem{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:12px;cursor:pointer}
.hitem .hs{font-size:.85rem;color:var(--text2);margin-bottom:4px}
.hitem .ht{font-size:1.1rem;line-height:1.3}
.hitem .hr{font-size:.8rem;opacity:.7;margin-top:4px}
.hempty{opacity:.6;text-align:center;margin-top:50px}
.b.th.warn{border:1px solid var(--warn)}
/* ---------- 💬 Chat (Overlay über der App, z zwischen Verlauf und Modal) ---------- */
#chatBadge{position:absolute;top:-3px;right:-3px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--c-badge);color:#fff;font-size:11px;font-weight:700;line-height:17px;text-align:center;display:none;box-shadow:0 0 0 2px var(--surface)}
#chatBadge.on{display:block}
#chat{position:fixed;inset:0;z-index:32;display:none;flex-direction:column;background:var(--c-canvas);color:var(--text)}
#chat.on{display:flex}
/* Kopfzeile: klar abgesetzte Ebene ueber dem Verlauf (eigene Flaeche + feine Kante) */
.chead{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:10px 14px;padding-top:calc(10px + env(safe-area-inset-top));padding-left:calc(14px + env(safe-area-inset-left));padding-right:calc(14px + env(safe-area-inset-right));border-bottom:1px solid var(--border);background:var(--surface);position:relative;z-index:2;box-shadow:0 8px 20px -18px rgba(15,23,42,.9)}
/* Zwei Schalter in der Kopfzeile: Original mitanzeigen / Kontextbemerkungen anzeigen */
.copts{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.copts label{display:flex;align-items:center;gap:6px;padding:5px 10px;border-radius:var(--r-pill);border:1px solid var(--border);background:var(--surface2);color:var(--c-muted);font-size:.78rem;font-weight:600;white-space:nowrap;cursor:pointer;user-select:none;transition:border-color .15s,color .15s}
.copts label:has(input:checked){border-color:var(--c-brand-ink);color:var(--c-brand-ink)}
.copts input{width:15px;height:15px;flex:0 0 auto;margin:0;accent-color:var(--c-brand);cursor:pointer}
/* Auf schmalen Geräten in eine eigene Zeile unter den Kopf, damit Titel und Sprache bleiben */
@media(max-width:700px){.copts{flex-basis:100%;order:9}}
.chead .ctitle{flex:1;min-width:0;font-size:1.1rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chead select{padding:6px;border-radius:var(--r-sm);border:1px solid var(--border);background:var(--surface2);color:var(--text);font-size:13px;max-width:120px}
.chead button{padding:0;width:38px;height:38px;flex:0 0 auto;border-radius:50%;background:var(--surface2);color:var(--text);display:flex;align-items:center;justify-content:center}
.chead button svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.chead button.cclear{background:transparent;color:var(--danger)}
#chatList{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:14px 12px 18px;padding-left:calc(12px + env(safe-area-inset-left));padding-right:calc(12px + env(safe-area-inset-right));display:flex;flex-direction:column;gap:12px;background:var(--c-canvas)}
.cinvite{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:14px;box-shadow:var(--shadow-sm)}
/* Abschnitts-Ueberschrift: klein, gesperrt — trennt die Karten ohne Trennlinien-Laerm */
.clab{font-size:.72rem;letter-spacing:.07em;text-transform:uppercase;color:var(--c-muted);font-weight:700;margin-bottom:10px;line-height:1.35}
.crow{display:flex;gap:8px}
.crow input{flex:1;min-width:0;padding:12px;border-radius:var(--r-md);border:1px solid var(--border);background:var(--surface2);color:var(--text);font-size:15px}
.crow input:focus{outline:none;border-color:var(--c-brand-ink);box-shadow:0 0 0 3px var(--c-focus)}
.crow button{flex:0 0 auto;padding:12px 16px;font-size:.95rem;border-radius:var(--r-md);background:linear-gradient(135deg,var(--c-brand),var(--c-brand-2));color:var(--c-on-brand)}
.cmsg{font-size:.85rem;line-height:1.4;margin-top:8px;min-height:1em;color:var(--c-muted)}
.cmsg.ok{color:var(--success)}
.cmsg.err{color:var(--danger)}
.citem{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:12px 12px 12px 14px;cursor:pointer;text-align:left;width:100%;color:var(--text);font-weight:400;box-shadow:var(--shadow-sm);transition:border-color .15s,transform .1s}
.citem:hover{border-color:var(--c-brand-ink)}
.citem:active{transform:scale(.995)}
.citem:focus-visible{outline:2px solid var(--c-brand-ink);outline-offset:2px}
/* Löschen je Chat: dezent, bis man die Zeile berührt — sonst schreit die Liste nach Gefahr */
.cdel{flex:0 0 auto;width:36px;height:36px;padding:0;border-radius:50%;background:transparent;color:var(--text2);opacity:.55;display:flex;align-items:center;justify-content:center;transition:opacity .15s,color .15s,background .15s}
.cdel svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.citem:hover .cdel,.cdel:focus-visible{opacity:1;color:var(--danger)}
.cdel:hover{background:var(--danger-soft);color:var(--danger);opacity:1}
/* Auf Touch-Geräten gibt es kein Hover — dort dauerhaft sichtbar */
@media(hover:none){.cdel{opacity:.8}}
/* Initialen-Kreis in der Markenfarbe (weisse Initiale = 5,2:1 auf #2563eb) */
.cav{flex:0 0 auto;width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--c-brand),var(--c-brand-2));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.05rem;letter-spacing:.01em}
.cmeta{flex:1;min-width:0}
.cname{font-weight:700;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.csub{font-size:.8rem;line-height:1.4;margin-top:1px;color:var(--c-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cbadge{flex:0 0 auto;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:var(--c-badge);color:#fff;font-size:12px;font-weight:700;line-height:22px;text-align:center}
.cpend{background:var(--surface);border:1px solid var(--c-brand-ink);border-radius:var(--r-lg);padding:14px;display:flex;flex-direction:column;gap:10px;box-shadow:var(--shadow-sm);line-height:1.45}
.cpend .cbtns{display:flex;gap:8px}
.cpend .cbtns button{flex:1;padding:11px;font-size:.9rem;border-radius:var(--r-md);background:linear-gradient(135deg,var(--c-brand),var(--c-brand-2));color:var(--c-on-brand)}
.cempty{text-align:center;color:var(--c-muted);padding:30px 12px;line-height:1.55;max-width:34em;margin:0 auto}
#chatThread{flex:1;display:flex;flex-direction:column;min-height:0}
#chatMsgs{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:14px 12px 18px;padding-left:calc(12px + env(safe-area-inset-left));padding-right:calc(12px + env(safe-area-inset-right));display:flex;flex-direction:column;gap:4px;background:var(--c-canvas)}
/* Blasen: eigene = Markenverlauf mit weisser Schrift, fremde = neutrale Flaeche mit Kante.
   Aufeinanderfolgende Nachrichten derselben Seite ruecken zusammen, der Sprecherwechsel
   bekommt Luft — das ergibt lesbare Bloecke ohne zusaetzliches Markup. */
.cm.me+.cm.them,.cm.them+.cm.me{margin-top:12px}
.cm{max-width:78%;padding:9px 14px 7px;border-radius:18px;word-wrap:break-word;overflow-wrap:anywhere;box-shadow:var(--shadow-sm);position:relative}
.cm.them{background:var(--c-bub-them);color:var(--text);align-self:flex-start;border:1px solid var(--c-bub-them-bd)}
.cm.me{background:linear-gradient(135deg,var(--c-brand),var(--c-brand-2));color:var(--c-on-brand);align-self:flex-end;border:1px solid transparent}
/* „Schwanz"-Ecke nur an der jeweils letzten Blase einer Folge (:has, sonst rundum rund) */
.cm.me:not(:has(+.cm.me)){border-bottom-right-radius:6px}
.cm.them:not(:has(+.cm.them)){border-bottom-left-radius:6px}
.cm .ct{font-size:1.05rem;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
/* Sekundaerzeilen (Lautschrift/Hinweis/Original): eigene Deckkraft statt opacity,
   damit der Kontrast rechenbar bleibt — auf der Markenblase >=4,6:1, auf der
   fremden Blase --c-muted mit >=6,7:1. */
.cm .cro{font-size:.84rem;line-height:1.45;opacity:1;margin-top:3px}
.cm .cnt{font-size:.8rem;line-height:1.45;opacity:1;font-style:italic;margin-top:5px}
.cm .corig{font-size:.82rem;line-height:1.45;opacity:1;margin-top:7px;padding-top:6px;border-top:1px dashed currentColor;display:none;white-space:pre-wrap}
.cm.me .cro,.cm.me .cnt,.cm.me .corig,.cm.me .cfoot2{color:var(--c-on-brand-2)}
.cm.me .corig{border-top-color:rgba(255,255,255,.45)}
.cm.them .cro,.cm.them .cnt,.cm.them .corig,.cm.them .cfoot2{color:var(--c-muted)}
.cm.them .corig{border-top-color:var(--c-bub-them-bd)}
.cm.showorig .corig{display:block}
/* Schalter "Original": gilt für ALLE Nachrichten – der Knopf je Blase wird dann überflüssig */
#chat.origall .cm .corig{display:block}
#chat.origall .cm .origbtn{display:none}
#chat.nonotes .cm .cnt{display:none}
.cm .cfoot2{display:flex;gap:10px;align-items:center;margin-top:6px;font-size:.72rem;line-height:1.2;opacity:1}
/* Zustellmarke: ein Haken = abgeschickt, zwei helle Haken = vom Gegenüber gelesen.
   Die Farbe muss auf der blauen (hell) wie der petrolfarbenen (dunkel) eigenen Blase
   sitzen — daher ein helles Cyan statt des Akzentblaus. */
.cm .ctick{margin-left:auto;flex:0 0 auto;display:flex;align-items:center;line-height:0;opacity:.85}
.cm .ctick svg{width:17px;height:12px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.cm .ctick.seen{color:var(--c-tick);opacity:1}
.cm .ctick .t2{display:none}
.cm .ctick.seen .t2{display:inline}
.cm .cfoot2 button{background:transparent;color:inherit;padding:2px 0;font-size:.72rem;font-weight:600;border-radius:0;text-decoration:underline;text-underline-offset:2px}
/* Geloeschte Nachricht: „Geister-Blase" (gestrichelte Kontur) statt blasser Deckkraft —
   bleibt als Platzhalter erkennbar UND lesbar (opacity .55 lag unter 4,5:1). */
.cm.gone{opacity:1;font-style:italic;box-shadow:none;background:none;border-style:dashed}
.cm.them.gone{background-color:transparent;border-color:var(--c-bub-them-bd);color:var(--c-muted)}
.cm.me.gone{background-color:transparent;border-color:var(--c-brand-ink);color:var(--c-brand-ink)}
.cm.wait{opacity:.85}
.cm.wait .ct::after{content:" …";opacity:.6}
/* Eingabeleiste: eigene Ebene unten, Safe-Area unten/seitlich.
   ⚠️ ZWEI ZEILEN, NICHT EINE — und das ist die Lehre aus einem echten Fehlerbild:
   Mit `flex:1;min-width:0` am Textfeld bekamen die Knoepfe IMMER ihre volle Breite und der
   Rest blieb dem Feld. Bei sechs Bedienelementen (📎 📍 🎤 ⏹ ? ➤) blieben auf einem 360px-
   Handy rechnerisch ~90px uebrig: der getippte Satz stand ein Wort pro Zeile und das Feld
   wuchs bis in die halbe Bildschirmhoehe. `min-width:0` heisst „schrumpf bis auf null" —
   genau das war die Ursache, nicht die Zahl der Knoepfe.
   Deshalb: `flex-wrap` + `flex-basis:100%` am Feld. Das Feld belegt IMMER eine ganze Zeile,
   die Knoepfe fliessen darunter und brechen untereinander weiter um, wenn es eng wird.
   Damit ist die Breite des Feldes von der ANZAHL und der BESCHRIFTUNG der Knoepfe
   entkoppelt — ein siebter Knopf oder eine laengere Beschriftung in einer der 11 Sprachen
   kann das Feld nicht mehr zusammendruecken. `min-width:60%` bleibt als Untergrenze
   stehen: sie faengt den Fall ab, dass jemand den Umbruch spaeter wieder herausnimmt. */
.cfoot{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:10px 12px;padding-bottom:calc(10px + env(safe-area-inset-bottom));padding-left:calc(12px + env(safe-area-inset-left));padding-right:calc(12px + env(safe-area-inset-right));border-top:1px solid var(--border);background:var(--surface);box-shadow:0 -8px 20px -18px rgba(15,23,42,.9)}
#chatIn{flex:1 1 100%;min-width:60%;padding:13px 15px;border-radius:20px;border:1px solid var(--border);background:var(--surface2);color:var(--text);font-family:inherit;font-size:1rem;line-height:1.4;resize:none;max-height:30vh;overflow-y:auto}
#chatIn:focus{outline:none;border-color:var(--c-brand-ink);box-shadow:0 0 0 3px var(--c-focus)}
/* ➤ Senden sitzt am rechten Ende der Knopfzeile (`margin-left:auto`), damit die
   Haupt-Handlung immer an derselben Stelle steht — egal wie viele Nebenknoepfe links
   davon gerade sichtbar sind. */
#chatSendBtn{flex:0 0 auto;margin-left:auto;width:48px;height:48px;padding:0;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--c-brand),var(--c-brand-2));color:var(--c-on-brand);box-shadow:var(--shadow-sm);transition:transform .1s}
#chatSendBtn:active{transform:scale(.93)}
#chatMic{flex:0 0 auto;width:48px;height:48px;padding:0;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--surface2);color:var(--text);border:1px solid var(--border)}
/* 🎤 Sprechtaste: HALTEN, hochziehen, wegwischen.
   ⚠️ `touch-action:none` ist Pflicht, nicht Kosmetik — ohne das deutet der Browser den
   Wisch nach oben/links als Scrollen, nimmt uns den Zeiger weg (pointercancel) und die
   Gesten „einrasten"/„verwerfen" kommen nie an. `user-select`/`-webkit-touch-callout` aus,
   damit langes Halten kein Textmarkieren und kein Kontextmenue ausloest. */
#chatMic{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#chatMic.rec{background:var(--danger);color:#fff;border-color:var(--danger);animation:pulse 1.6s infinite}
/* Eingerastet (freihaendig): ruhiger Dauerzustand statt Puls — der Puls gehoert dem
   „ich halte gerade", und beides gleich aussehen zu lassen waere genau die Verwechslung,
   die den Nutzer die Taste weiter druecken laesst. */
#chatMic.lock{background:var(--danger);color:#fff;border-color:var(--danger);animation:none}
/* ⏹ Stopp: gleiche Groesse und gleiche ruhige Flaeche wie die uebrigen Knoepfe, nur die
   Kontur und das Zeichen in Rot. Vorher war er vollflaechig rot — zusammen mit dem
   ebenfalls roten Mikrofon standen dann ZWEI Signalflaechen nebeneinander, und der Blick
   fand die laufende Aufnahme nicht mehr. Rot bleibt dem Mikrofon vorbehalten (es zeigt
   „hier laeuft etwas"), der Stopp ist nur der Ausgang dazu. */
#chatMicStop{flex:0 0 auto;width:48px;height:48px;padding:0;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--surface2);color:var(--danger);border:1px solid var(--danger);font-size:18px;line-height:1}
/* Das „?" ist bewusst klein: es ist eine Nachschlagehilfe, kein Bedienelement der Leiste. */
#chatMicHelpBtn{flex:0 0 auto;width:22px;height:22px;padding:0;align-self:center;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--surface2);color:var(--muted,var(--text));border:1px solid var(--border);font-size:12px;font-weight:700;line-height:1;opacity:.75}
/* … und waehrend einer laufenden Aufnahme ist es sogar falsch am Platz: das Hilfefenster
   legt sich ueber alles und wuerde die Geste unterbrechen, die es gerade erklaert. Also
   verschwindet es, solange das Mikrofon laeuft (`rec`) oder eingerastet ist (`lock`) —
   uebrig bleibt genau das, was dann zu tun ist: ⏹. Rein ueber Geschwister-Selektoren,
   damit kein JS-Zustand dafuer gepflegt werden muss (das „?" steht im HTML hinter 🎤). */
#chatMic.rec ~ #chatMicHelpBtn,#chatMic.lock ~ #chatMicHelpBtn{display:none}
/* Hinweiszeile ueber der Eingabeleiste (laeuft gerade eine Aufnahme?). */
#chatMicHint{padding:6px 12px;font-size:.82rem;line-height:1.35;color:var(--text);background:var(--surface2);border-top:1px solid var(--border)}
/* Erklaerung der drei Gesten — ueber allem, damit sie beim ersten Mal nicht uebersehen wird. */
#chatMicHelp{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;background:rgba(15,23,42,.55);padding:18px}
#chatMicHelpBox{max-width:340px;width:100%;background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:14px;padding:16px;box-shadow:var(--shadow-sm)}
#chatMicHelpBox b{display:block;margin-bottom:8px;font-size:1.05rem}
#chatMicHelpList{margin:0 0 12px;padding-left:18px;font-size:.92rem;line-height:1.5}
#chatMicHelpList li{margin:5px 0}
#chatMicHelpOk{width:100%;padding:11px;border:none;border-radius:10px;font-weight:700;color:#fff;background:var(--accent)}
/* 📍 Standort-Knopf: gleiche Form wie das Mikro. */
#chatLoc{flex:0 0 auto;width:48px;height:48px;padding:0;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--surface2);color:var(--text);border:1px solid var(--border);font-size:20px;line-height:1}
/* Die Groesse fuer schmale Geraete steht als EINE gemeinsame Regel weiter unten (bei 📎),
   und zwar bewusst NACH allen Grundregeln der Leisten-Knoepfe — s. Kommentar dort. */
/* Koordinaten in der Blase: Ziffern gleich breit, damit zwei Standorte untereinander
   nicht wackeln; umbrechen duerfen sie nicht (eine halbe Koordinate ist wertlos). */
.cm .cloc{font-size:.9rem;line-height:1.45;margin-top:2px;font-variant-numeric:tabular-nums;white-space:nowrap;overflow-x:auto}
/* Genauigkeit: eigene Klasse statt .cro mitzubenutzen — die gehoert der Lautschrift, und
   eine Stiländerung dort duerfte den Standort nicht mitreissen. */
.cm .cacc{font-size:.84rem;line-height:1.45;margin-top:3px}
.cm.me .cloc,.cm.me .cacc{color:var(--c-on-brand-2)}
.cm.them .cloc,.cm.them .cacc{color:var(--c-muted)}
/* Karten-Knopf: bewusst NICHT .origbtn — die Klasse blendet #chat.origall global aus. */
.cm .cfoot2 button.mapbtn{white-space:nowrap}
/* Gast-Modus: nur der eingeladene Chat, sonst nichts. Der Rest der App (Übersetzer,
   Sprachleiste, Verlauf, Einstellungen, geteilter Modus) bleibt für Gäste verborgen —
   serverseitig sind die Endpunkte zusätzlich gesperrt. */
body.guestonly > header,
body.guestonly > #langbar,
body.guestonly > #log,
body.guestonly > #hint,
body.guestonly > footer,
body.guestonly > #livetx,
body.guestonly > #banner,
body.guestonly > #settings,
body.guestonly > #history,
body.guestonly > #split{display:none !important}
body.guestonly #chat{display:flex !important}          /* Chat ist die ganze App */
body.guestonly #chat .cx,                              /* kein Schließen … */
body.guestonly #chat .cback{display:none !important}   /* … und kein Zurück zur Liste */
/* Beitritts-Bildschirm (QR-Link ?guest=…): der Besucher ist noch KEIN Gast, er tritt erst
   bei — er hat also noch gar keinen Chat. Der Server stanzt dafür `guestonly guestjoin`
   ins <body>; `guestjoin` nimmt zusaetzlich den Chat weg, damit bis zum Erscheinen der
   Beitritts-Karte (#guestgate) nichts von der App durchscheint. Muss NACH der Zeile
   darueber stehen: gleiche Spezifitaet, beide !important -> die spaetere gewinnt. */
body.guestjoin #chat{display:none !important}
/* QR-Einladung (Chat ohne Konto) */
.cqr{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap}
.cqr img{flex:0 0 auto;width:180px;height:180px;background:#fff;border:1px solid var(--border);border-radius:var(--r-sm);padding:6px}
.cqrtxt{flex:1;min-width:200px;display:flex;flex-direction:column;gap:8px;color:var(--c-muted)}
.cqrtxt input{width:100%;padding:10px;border-radius:var(--r-md);border:1px solid var(--border);background:var(--surface2);color:var(--text);font-size:12px;overflow-wrap:anywhere}
.cqrtxt .crow button{padding:9px 12px;font-size:.85rem}
/* Nutzeranzahl je QR-Code */
.cqrmax{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.85rem;line-height:1.35}
.cqrmax label{flex:1;min-width:150px}
.cqrmax select{flex:0 0 auto;padding:8px 10px;border-radius:var(--r-sm);border:1px solid var(--border);background:var(--surface2);color:var(--text);font-size:.9rem}
/* Teilen-Knöpfe: neutrale Textlabels + generisches Symbol, KEINE fremden Marken-Logos */
.cshare{flex-wrap:wrap;gap:8px}
.cshare button{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--border)}
.cshareico{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
/* Gast-Hinweis: Markenverlauf, weisse Schrift (>=5,1:1) — nicht das helle Akzentblau */
#chatGuestBanner{display:flex;align-items:center;gap:10px;padding:10px 14px;padding-left:calc(14px + env(safe-area-inset-left));padding-right:calc(14px + env(safe-area-inset-right));background:linear-gradient(135deg,var(--c-brand),var(--c-brand-2));color:#fff;font-size:.88rem;line-height:1.4}
#chatGuestBanner button{margin-left:auto;flex:0 0 auto;padding:8px 13px;font-size:.82rem;font-weight:700;border-radius:var(--r-pill);background:rgba(255,255,255,.22);color:#fff;border:1px solid rgba(255,255,255,.35)}
/* ===== Gruppenchat ===== */
/* Gruppen-Avatar in der Liste: Personen-SVG statt Anfangsbuchstabe */
.cav.grp svg{width:24px;height:24px;stroke:#fff;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.cav.sm{width:34px;height:34px;font-size:.9rem}
/* "+ Gruppe": Erklaertext links, Knopf rechts — bricht auf schmalen Geraeten um */
.crow.cgrprow{align-items:center;flex-wrap:wrap}
.crow.cgrprow span{flex:1;min-width:160px;font-size:.85rem;line-height:1.45;color:var(--c-muted)}
/* Mitglieder-Knopf in der Kopfzeile: breiter als die runden Knoepfe (Symbol + Zahl) */
.chead button.cgrp{width:auto;min-width:38px;padding:0 11px;gap:6px;border-radius:var(--r-pill);font-size:.85rem;font-weight:700}
.chead button.cgrp svg{width:17px;height:17px}
/* Gruppentitel ist beim Eigentümer ein Bedienelement (umbenennen) */
.chead .ctitle.ren{cursor:pointer;text-decoration:underline dotted;text-underline-offset:3px}
/* Sprechername ueber fremden Blasen — nur beim Sprecherwechsel. JS liefert nur den Farbton
   (--who-h), die Helligkeit kommt von hier: sonst waere die Farbe im dunklen Thema zu dunkel. */
.cm .cwho{font-size:.78rem;font-weight:700;line-height:1.3;margin-bottom:2px;overflow-wrap:anywhere;color:hsl(var(--who-h,215),62%,36%)}
:root[data-theme="dark"] .cm .cwho{color:hsl(var(--who-h,215),72%,72%)}
/* "Gelesen von X/N" statt Doppelhaken in Gruppen */
.cm .cfoot2 button.cread{margin-left:auto;text-decoration:none;opacity:.9;white-space:nowrap}
/* Mitglieder- und Gelesen-Liste in den Overlays */
.mlist{display:flex;flex-direction:column;gap:8px;max-height:46vh;overflow-y:auto;-webkit-overflow-scrolling:touch}
.mrow{display:flex;align-items:center;gap:10px;padding:8px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface2)}
.mrow .cdel svg{width:16px;height:16px}
.mname{font-size:.92rem;line-height:1.5;padding-left:2px}
.mlist .clab{margin:6px 0 0}
body.guestonly #chatGroupBox{display:none !important}   /* Gast hat nur seinen einen Chat */
#toast{position:fixed;top:12px;left:50%;transform:translateX(-50%);max-width:90%;background:#92400e;color:#fff;padding:12px 16px;border-radius:var(--r-md);z-index:50;display:none;box-shadow:var(--shadow-md);font-size:.95rem;text-align:center;line-height:1.35}
#toast.on{display:block}
#stopBtn{position:fixed;left:50%;transform:translateX(-50%);top:56px;background:var(--danger);color:#fff;font-weight:700;padding:12px 24px;border-radius:30px;z-index:45;display:none;box-shadow:var(--shadow-md)}
#stopBtn.on{display:block}
#modal.on{display:flex}
#m-tr{font-size:2.4rem;line-height:1.3;font-weight:700;margin-bottom:14px}
#m-ro{font-size:1.25rem;opacity:.85;margin-bottom:14px}
#m-nt,#m-nt2{font-size:1rem;opacity:.85;margin-bottom:8px;max-width:640px}
#m-nt{font-style:italic}
.speedwrap{margin:18px 0;font-size:1rem;display:flex;align-items:center;gap:10px}
.mbtns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.mbtns button{font-size:1.15rem;padding:16px 22px}
/* Geteilter Modus: zwei Hälften, obere um 180° gedreht fürs Gegenüber */
#split{position:fixed;inset:0;height:100vh;height:100dvh;background:#0f172a;z-index:15;display:none;flex-direction:column;color:#e2e8f0}
#split.on{display:flex}
.half{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:16px 58px;overflow:auto;background:#0f172a}
.half.top{transform:rotate(180deg);border-bottom:2px solid #38bdf8;background:#0d1a30}
.sres{font-size:30px;text-align:center;line-height:1.35;max-width:100%;font-family:"Noto Sans Thai","Sarabun","Leelawadee UI",system-ui,sans-serif;word-break:break-word}
.sres .ro{display:block;font-size:.52em;opacity:.7;margin-top:10px;padding-top:8px;border-top:1px solid rgba(148,163,184,.25)}
.smic{font-size:1.15rem;padding:18px 26px;border-radius:16px;width:90%;max-width:360px}
.stinrow{display:flex;gap:6px;width:90%;max-width:360px}
.stin{flex:1;min-width:0;padding:12px;border-radius:10px;border:0;background:#334155;color:#e2e8f0;font-size:1rem}
.stinrow button{flex:0 0 auto;padding:12px 16px;font-size:1rem}
.szctl{display:flex;gap:10px}
.szctl button{padding:8px 16px;font-size:1rem;background:#475569;font-weight:700}
#splitClose,#splitCog{position:fixed;top:calc(50% - 23px);width:46px;height:46px;padding:0;border-radius:50%;background:#1e293b;border:1px solid #475569;color:#e2e8f0;font-size:1.15rem;z-index:16;box-shadow:0 2px 10px rgba(0,0,0,.5)}
#splitClose{right:8px}
#splitCog{left:8px}

/* Info-Tabs (Funktionen/Anleitung/Vergleich/Auswertung/Statistik/Rundlauf) bleiben als
   in sich geschlossene "dunkle Karte" gestaltet, unabhängig vom App-Theme — ihr Inhalt
   trägt fest kodierte Light-on-Dark-Farben aus dem bestehenden Datenbestand. */
.darkcard{background:#1e293b;color:#e2e8f0;border-radius:var(--r-md);padding:12px;border:1px solid #334155}

/* BENCH_CSS_V1: Blind-Benchmark Uebersetzer-Vergleich */
#benchList{--bncol:4}
.brow{background:#0f172a;border:1px solid #334155;border-radius:12px;padding:10px 12px;margin:10px 0}
.bmeta{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:4px}
.btag{font-size:.7rem;padding:2px 8px;border-radius:20px;border:1px solid #334155;color:#94a3b8}
.btag.lang{color:#38bdf8;border-color:#38bdf8}
.bde{font-weight:600;margin:2px 0 10px;color:#e2e8f0}
.bcells{display:grid;grid-template-columns:repeat(var(--bncol,4),1fr);gap:8px}
@media(max-width:760px){.bcells{grid-template-columns:1fr}}
.bcell{background:#1e293b;border:2px solid #334155;border-radius:9px;padding:9px 10px;cursor:pointer;transition:.12s}
.bcell:hover{border-color:#64748b}
.bcell.best{border-color:#f3c14b;box-shadow:0 0 0 1px #f3c14b inset}
.blab{display:flex;justify-content:space-between;align-items:center;gap:6px;font-size:.7rem;color:#94a3b8;margin-bottom:5px}
.bcrown{color:#f3c14b}
.btx{font-size:1.02rem;color:#e2e8f0;line-height:1.5}
.brev{font-size:.68rem;font-weight:700;padding:1px 6px;border-radius:5px;display:none;white-space:nowrap}
#benchBody.revealed .brev{display:inline-block}
.bClaude{background:#0c3a36;color:#39d3c3}.bGoogle{background:#3a2a0c;color:#f3a14b}.bGemini{background:#2a0c3a;color:#c98bf0}.bMicrosoft{background:#0c2a3a;color:#5db8f0}

/* PUSHLOG_CSS_V1: 🐞 Protokoll-Zeilen (Rohdaten, bewusst monospace + klein) */
.plrow{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.72rem;line-height:1.5;color:var(--text2);border-bottom:1px solid var(--border);padding:3px 0;word-break:break-all}
/* ===== 📎 Fotos und PDF im Chat ===== */
#chatFileBtn{flex:0 0 auto;width:48px;height:48px;padding:0;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--surface2);color:var(--text);border:1px solid var(--border);font-size:20px;line-height:1}
/* EINE Groessenregel fuer ALLE runden Knoepfe der Leiste — bewusst nicht mehr je Knopf
   einzeln. Vorher fehlte ➤ in dieser Liste und war auf dem Handy als einziger 48px gross;
   solche Einzelfaelle waren der Anfang des Breiten-Gerangels.
   ⚠️ Diese Regel steht ganz bewusst HIER, hinter der letzten Grundregel eines Leisten-
   Knopfes (#chatFileBtn): `@media` erhoeht die Spezifitaet NICHT — eine spaeter notierte
   `#id`-Grundregel schlaegt sie. Genau das war der Fall, solange die Regel weiter oben
   stand: 📎 blieb auf dem Handy als einziger 48px gross (im Browser nachgemessen).
   Neue Leisten-Knoepfe gehoeren deshalb VOR diese Regel. */
@media (max-width:400px){#chatFileBtn,#chatLoc,#chatMic,#chatMicStop,#chatSendBtn{width:42px;height:42px}#chatLoc,#chatFileBtn{font-size:18px}}
/* Fortschritt: eigene Zeile ueber der Eingabeleiste, damit die Leiste ihre Hoehe behaelt. */
#chatUp{flex-direction:column;gap:6px;padding:8px 12px;padding-left:calc(12px + env(safe-area-inset-left));padding-right:calc(12px + env(safe-area-inset-right));border-top:1px solid var(--border);background:var(--surface2)}
#chatUp .cuprow{display:flex;align-items:center;gap:8px;font-size:.82rem;color:var(--c-muted);line-height:1.3}
#chatUp .cupname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text)}
#chatUp .cuppct{flex:0 0 auto;font-variant-numeric:tabular-nums}
#chatUp .cupx{flex:0 0 auto;width:28px;height:28px;padding:0;border-radius:50%;background:transparent;color:var(--text);border:1px solid var(--border);font-size:14px;line-height:1}
#chatUp .cuptrack{height:4px;border-radius:2px;background:var(--border);overflow:hidden}
#chatUp .cuptrack i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--c-brand),var(--c-brand-2));transition:width .15s linear}
/* Bild-Vorschau: die Flaeche steht ueber aspect-ratio schon VOR dem Laden fest (w/h aus der
   Nachricht) — ohne das springt der Verlauf, sobald ein Bild fertig geladen ist. */
.cm .cimgbox{position:relative;margin-top:2px;max-height:220px;max-width:100%;border-radius:var(--r-md);overflow:hidden;background:var(--surface2);cursor:zoom-in}
.cm .cimgbox img.cimg{display:block;width:100%;height:100%;max-height:220px;object-fit:cover}
.cm .cimgbox.err{display:flex;align-items:center;justify-content:center;min-height:64px;cursor:default}
.cm .cerr{font-size:.84rem;line-height:1.45;padding:8px;text-align:center}
.cm.me .cerr{color:var(--c-on-brand-2)}
.cm.them .cerr{color:var(--c-muted)}
/* PDF-Blase: Symbol + Name nebeneinander, lange Namen brechen um statt die Blase zu sprengen */
.cm .cfile{display:flex;gap:8px;align-items:flex-start;margin-top:2px}
.cm .cfileic{flex:0 0 auto;font-size:20px;line-height:1.2}
.cm .cfilenm{flex:1;min-width:0;font-size:.95rem;line-height:1.4;overflow-wrap:anywhere;font-weight:600}
.cm .cfilesz{font-size:.8rem;line-height:1.4;margin-top:2px}
.cm.me .cfilesz{color:var(--c-on-brand-2)}
.cm.them .cfilesz{color:var(--c-muted)}
/* Uebersetzter PDF-Text: aufklappbar an der Blase, scrollt in sich (nicht die ganze Seite) */
.cm .cpdftxt{margin-top:8px;padding-top:7px;border-top:1px dashed currentColor;font-size:.86rem;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere;max-height:40vh;overflow-y:auto;-webkit-overflow-scrolling:touch}
.cm.me .cpdftxt{border-top-color:rgba(255,255,255,.45);color:var(--c-on-brand-2)}
.cm.them .cpdftxt{border-top-color:var(--c-bub-them-bd);color:var(--text)}
/* ⚠️ Fremdtext-Hinweis ueber der Uebersetzung. Dezent, aber klar erkennbar — kein Deko-
   Element: die Bridge hat keine Werkzeuge, der schlimmste Fall ist deshalb kein
   Datenabfluss, sondern eine irrefuehrende Uebersetzung (ein Dokument, dessen
   „Uebersetzung" eine andere Bankverbindung nennt als das Original). Dagegen hilft kein
   Prompt, nur dass der Leser weiss, was er vor sich hat. Bewusst NICHT schreiend: ein
   Warnschild, das bei jeder Uebersetzung blinkt, wird nach dem dritten Mal ueberlesen. */
.cm .cpdfwarn{display:none;margin-top:8px;padding:6px 8px;border-radius:var(--r-sm);border:1px solid currentColor;font-size:.78rem;line-height:1.45;opacity:.85;overflow-wrap:anywhere}
.cm.me .cpdfwarn{border-color:rgba(255,255,255,.45);color:var(--c-on-brand-2)}
.cm.them .cpdfwarn{border-color:var(--c-bub-them-bd);color:var(--c-muted)}
/* Warte-Rueckmeldung waehrend der Uebersetzung (Bridge ~3 s je Haeppchen). KEIN Balken und
   KEINE Prozentzahl — den Fortschritt kennen wir nicht, und eine geratene Anzeige, die bei
   90 % stehenbleibt, ist eine Luege, die auffliegt. Nur Text, der die Dauer ausspricht. */
.cm .cpdfwait{display:none;margin-top:8px;font-size:.8rem;line-height:1.45;opacity:.8;overflow-wrap:anywhere}
.cm.me .cpdfwait{color:var(--c-on-brand-2)}
.cm.them .cpdfwait{color:var(--c-muted)}
/* 🔤 Zeilenweise Ansicht: Original UND Uebersetzung, Zeile fuer Zeile gepaart.
   ⚠️ Das Original ist hier NICHT die Nebensache: es ist der Text, den der Nutzer dem
   Kellner hinhaelt oder vorliest. Deshalb steht es oben, groesser und in voller Deckkraft;
   die Uebersetzung darunter ist die Lesehilfe. Klein und grau waere genau verkehrt herum.
   Auf schmalen Geraeten UNTEREINANDER (Grundeinstellung) — nebeneinander erst ab 600 px,
   wo eine Blase breit genug fuer zwei Spalten ist. */
.cm .cpdftxt .cpdfz{display:flex;flex-direction:column;gap:1px;padding:5px 0;border-bottom:1px solid currentColor}
.cm .cpdftxt .cpdfz:last-child{border-bottom:0}
.cm.me .cpdftxt .cpdfz{border-bottom-color:rgba(255,255,255,.22)}
.cm.them .cpdftxt .cpdfz{border-bottom-color:var(--c-bub-them-bd)}
.cm .cpdfzo{font-size:1.02rem;line-height:1.5;font-weight:600;overflow-wrap:anywhere}
.cm .cpdfzu{font-size:.86rem;line-height:1.45;opacity:.82;overflow-wrap:anywhere}
@media (min-width:600px){
 .cm .cpdftxt .cpdfz{flex-direction:row;align-items:baseline;gap:10px}
 .cm .cpdfzo{flex:1 1 50%;min-width:0}
 .cm .cpdfzu{flex:1 1 50%;min-width:0}
}
/* Knopf waehrend des Wartens: sichtbar „beschaeftigt", nicht nur ausgegraut. */
.cm .cfoot2 button.filebtn.wartet{opacity:.7;cursor:progress}
/* Datei-Knoepfe: bewusst NICHT .origbtn — die blendet #chat.origall global aus. */
.cm .cfoot2 button.filebtn{white-space:nowrap}
/* ⬇️ Rueckfrage beim Herunterladen: Original · Uebersetzung · beides.
   Wird von app.js erzeugt und wieder entfernt (kein Markup in app.html) — sie gehoert zu
   genau einer Blase und traegt keinen Zustand. z-index 48 = ueber der Bilderansicht (47),
   sonst verschwindet sie hinter einem gerade offenen Foto. */
.dlwahl{position:fixed;inset:0;background:rgba(2,6,23,.72);z-index:48;display:flex;
        justify-content:center;align-items:flex-end;padding:14px;
        padding-bottom:calc(14px + env(safe-area-inset-bottom))}
/* ⚠️ Farben ueber die Theme-Tokens, NICHT hart: hell ist der VORGABE-Modus dieser App
   (:root oben). Ein hart dunkler Kasten waere im Auslieferzustand ein Fremdkoerper. */
.dlwahlk{width:100%;max-width:420px;display:flex;flex-direction:column;gap:8px;
         background:var(--surface);border:1px solid var(--border);
         border-radius:var(--r-md);padding:14px;box-shadow:var(--shadow-md)}
.dlwahlt{font-size:.95rem;font-weight:700;color:var(--text);margin-bottom:2px}
/* Die Knoepfe sind gross und einzeln antippbar — das ist eine Entscheidung auf dem Handy,
   oft mit einer Hand, im Lokal. Drei winzige Knoepfe nebeneinander waeren eine Fehlerquelle. */
.dlwahlk button.dlwahlb{width:100%;padding:12px 14px;font-size:.95rem;font-weight:600;
                        border-radius:var(--r-sm);background:var(--surface2);color:var(--text);
                        border:1px solid var(--border);white-space:normal;text-align:center}
.dlwahlk button.dlwahlb.dlwahlab{background:transparent;border-color:transparent;color:var(--text2);
                                 font-weight:500;padding-top:8px;padding-bottom:6px}
/* Bild in voller Groesse */
#imgView{position:fixed;inset:0;background:rgba(2,6,23,.96);z-index:47;justify-content:center;align-items:center;padding:12px;padding-top:calc(12px + env(safe-area-inset-top));padding-bottom:calc(12px + env(safe-area-inset-bottom))}
#imgView img{max-width:100%;max-height:100%;object-fit:contain;border-radius:var(--r-sm)}
#imgViewX{position:absolute;top:calc(10px + env(safe-area-inset-top));right:10px;width:42px;height:42px;padding:0;border-radius:50%;background:rgba(15,23,42,.72);color:#fff;border:1px solid rgba(255,255,255,.3);font-size:18px;line-height:1}
/* ===== 📋 Funktions-Testliste ===== */
#featIntro{font-size:.86rem;line-height:1.5;color:#94a3b8;margin-bottom:8px}
#featHead{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
#featCount{flex:1;min-width:120px;font-size:.9rem;font-weight:700;color:#e2e8f0}
#featReset{flex:0 0 auto;padding:7px 11px;font-size:.82rem;font-weight:600;border-radius:var(--r-sm);background:#334155;color:#e2e8f0;border:1px solid #475569}
#featList{display:flex;flex-direction:column;gap:6px}
.featrow{display:flex;gap:10px;align-items:flex-start;padding:8px;border:1px solid #334155;border-radius:var(--r-sm);background:#0f172a}
.featrow.on{border-color:#22c55e;background:#122b1c}
.featrow.locked{opacity:.72}
.feathk{flex:0 0 auto;width:24px;height:24px;padding:0;border-radius:6px;background:#1e293b;color:#22c55e;border:1px solid #475569;font-size:14px;font-weight:800;line-height:1;display:flex;align-items:center;justify-content:center}
.featrow.on .feathk{background:#22c55e;color:#052e16;border-color:#22c55e}
.feattx{flex:1;min-width:0}
.feattit{font-size:.92rem;font-weight:700;color:#e2e8f0;line-height:1.35}
.feattest{font-size:.84rem;line-height:1.5;color:#cbd5e1;margin-top:2px;overflow-wrap:anywhere}
.featlock{font-size:.76rem;line-height:1.4;color:#fbbf24;margin-top:3px}
/* Endpunkte klein und gedaempft: sie sind die Bruecke zum Drift-Waechter im Test, nicht die
   Hauptinformation fuer den Nutzer. */
.featep{font-size:.72rem;line-height:1.45;color:#64748b;margin-top:4px;font-family:ui-monospace,Menlo,Consolas,monospace;overflow-wrap:anywhere}