:root{
  /* Default-Theme = die MARKEN-Honig-Palette der Landing (aus paletteFrom("#F2A93B","dark")
     abgeleitet → warm-dunkler Canvas + Gold-Akzente, statt des früheren kühlen Grau/Blau).
     Nutzer-Schemata (Farben-Menü) + Box-Farben überschreiben das wie gehabt. */
  --bg:#15120f; --panel:#1e1a15; --panel2:#23201a; --line:#342f27; --ink:#f6f5f4;
  --muted:#afaaa1; --me:#F2A93B; --them:#2c2720; --accent:#F2A93B;
  --me-ink:#18181b; /* Textfarbe IN der eigenen Blase (Honig ist hell → dunkler Text); folgt Custom-Basisfarbe */
  --ruf:#4ade80;   /* Anruf-Rahmen: bewusst NICHT der Honigton. Mit --accent sah der Rahmen aus wie die eigene Blase. */
  --del-hover:#fca5a5; /* Lösch-Icon-Hover (auf dunklen Blasen lesbar) */
  /* Honig-Gold: FIX für alles AI- + Pro-mäßige — NICHT in SCHEME_TOKENS, ändert sich
     also nie mit dem Custom-Theme. Gradient = goldener, honigartiger Schimmer. */
  /* Marken-Honig = EXAKT die Landing-Palette (#F2A93B), damit App + Landing dieselbe Farbe tragen. */
  --honey:#F2A93B; --honey2:#FFD46B; --ember:#C87A1E; --honey-ink:#20160a;
  --honey-grad:linear-gradient(135deg,#FFD46B 0%,#F2A93B 55%,#C87A1E 100%);
  --honey-glow:0 2px 14px rgba(242,169,59,.38);
  --scale:1; /* Darstellungsgröße (Einstellungen) — skaliert die GANZE rem-basierte UI */
}
*{box-sizing:border-box}
/* Root-Schriftgröße = Basis × Nutzer-Skalierung → alles in rem (Buttons, Player, Bubbles)
   wächst proportional mit. Desktop hat eine größere Basis (s. Media-Query weiter unten). */
html{font-size:calc(16px * var(--scale))}
/* Die Seite selbst scrollt NICHT. Alles, was scrollt, ist ein Kasten
   darin.
   Warum das wichtig ist: html/body mit height:100% meinen auf einem iPhone
   den GROSSEN Bildbereich (mit eingeblendeter Leiste), #app dagegen 100dvh,
   also den gerade sichtbaren. Body war damit hoeher als das Fenster, die
   Seite liess sich schieben, und darunter kam ein leeres Stueck zum Vorschein
   — genau Hennys "sehr grosser Abstand unten, der beim Hochscrollen
   verschwindet und wiederkommt" (24.09.). Mit derselben Einheit und ohne
   Ueberlauf gibt es nichts mehr zu schieben. */
html,body{margin:0;height:100dvh;overflow:hidden;overscroll-behavior:none}
body{background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,sans-serif;
  font-size:.94rem;line-height:1.45;overscroll-behavior:none}
button{font:inherit;cursor:pointer}
#app{height:100dvh;display:flex;flex-direction:column}

/* Login-Gate */
.gate{height:100dvh;display:grid;place-items:center;text-align:center;padding:2rem}
.gate .box{width:100%;max-width:20rem}
.gate h1{font-size:3rem;letter-spacing:.2em;margin:0 0 .3rem;font-weight:800}
.gate-logo{width:5rem;height:5rem;border-radius:1.15rem;margin:0 auto .25rem;display:block}
.gate h1{margin:.1rem 0 .2rem}
.gate p{color:var(--muted);margin:0 auto 1.4rem}
.gate-legal{font-size:.72rem;color:var(--muted);line-height:1.5;margin:1rem auto 0;max-width:22rem}
.gate-legal a{color:var(--muted);text-decoration:underline}
.gate-legal a:hover{color:var(--ink)}
.gate form{display:flex;flex-direction:column;gap:.55rem;text-align:left}
.gate input{width:100%;background:var(--panel2);border:1px solid var(--line);color:var(--ink);
  border-radius:.6rem;padding:.7rem .9rem;font:inherit}
.gate input:focus{outline:none;border-color:var(--me)}
.gate .btn{display:inline-block;background:var(--ink);color:var(--bg);text-decoration:none;border:0;
  border-radius:999px;padding:.75rem 1.7rem;font:inherit;font-weight:700;cursor:pointer}
.gate .btn[disabled]{opacity:.6;cursor:default}
.gate .err{color:#f87171;font-size:.85rem;min-height:1.1em;margin:.1rem 0 0;text-align:center}
.gate .alt{color:var(--muted);font-size:.8rem;margin:1.1rem 0 0}
.gate .alt a,.gate .linkbtn{color:var(--ink);background:none;border:0;padding:0;font:inherit;
  text-decoration:underline;cursor:pointer}

/* App-Layout */
.app{display:grid;grid-template-columns:1fr;grid-template-rows:minmax(0,1fr);height:100dvh;min-height:0}
/* Die Breite der linken Spalte gehoert dem Menschen, nicht mir. Sie haengt
   an einer Variablen, laesst sich am Trennstrich ziehen und ueberlebt das
   Neuladen (pro Geraet). */
@media(min-width:760px){.app{grid-template-columns:var(--seite,320px) 1fr}}
/* Der Griff liegt AUF dem Trennstrich: sechs Punkte breit, damit man ihn mit
   der Maus trifft, ohne dass er sichtbar Platz einnimmt. */
.col-griff{display:none}
@media(min-width:760px){
  .col-griff{display:block;position:absolute;top:0;bottom:0;right:-3px;width:6px;z-index:6;cursor:col-resize}
  .col-griff:hover,.col-griff.zieht{background:color-mix(in srgb,var(--me) 55%,transparent)}
}
body.spalte-zieht{cursor:col-resize;user-select:none}
.col{min-height:0;min-width:0;display:flex;flex-direction:column;border-right:1px solid var(--line);position:relative}
.pane{min-height:0;min-width:0;display:flex;flex-direction:column;position:relative}
/* Zum-Ende-springen-Button: erscheint, wenn man im Chat nach oben gescrollt ist. */
.msg-jump{position:absolute;right:1rem;bottom:calc(4.5rem + env(safe-area-inset-bottom));z-index:6;width:2.6rem;height:2.6rem;
  border-radius:50%;border:1px solid var(--line);background:var(--panel2);color:var(--ink);display:grid;place-items:center;
  cursor:pointer;box-shadow:0 4px 16px rgba(0,0,0,.28);opacity:0;pointer-events:none;transform:translateY(8px);transition:opacity .16s ease,transform .16s ease}
.msg-jump.show{opacity:1;pointer-events:auto;transform:none}
.msg-jump .ic{width:1.45rem;height:1.45rem}
.msg-jump:hover{border-color:var(--me)}

/* Mobile-Toggle Liste <-> Chat */
@media(max-width:759px){
  .app[data-view="chat"] .col{display:none}
  .app[data-view="list"] .pane{display:none}
}

/* Sidebar */
.side-head{display:flex;align-items:center;gap:.55rem;padding:.6rem .7rem;border-bottom:1px solid var(--line);position:relative;box-sizing:border-box;min-height:3.6rem}
.side-head .apps-menu{left:auto;right:0}/* Apps-Dropdown oben rechts → nach unten, rechtsbündig (bleibt in der Sidebar) */
.side-head .brand{font-weight:800;letter-spacing:.18em;font-size:1rem;margin-right:auto}
.side-head a,.side-head button{color:var(--muted);background:none;border:0;text-decoration:none;font-size:.8rem;cursor:pointer}
.side-head a:hover,.side-head button:hover{color:var(--ink)}
.side-head .icon-btn{display:grid;place-items:center;width:2.1rem;height:2.1rem;border-radius:.55rem;color:var(--ink)}
.side-head .icon-btn:hover{background:var(--panel2)}
.side-head .icon-btn svg{width:1.3rem;height:1.3rem;display:block} /* Archiv + Zahnrad identisch groß */
.side-head .me-av{flex:0 0 auto}
/* Hive-Logo oben links (App-/Favicon-Icon + Wortmarke „HIVE"). */
.hive-logo{display:flex;align-items:center;gap:.5rem;color:var(--ink)}
.side-head .hive-logo{margin-right:auto}
.hive-logo .hl-mark{flex:0 0 auto;width:1.7rem;height:1.7rem;border-radius:.35rem;display:block}
.hive-logo .hl-word{font-weight:800;letter-spacing:.06em;font-size:1.35rem}
/* Guthaben-Box oben links: Zahl + Hive-Logo (Credit-Symbol) → öffnet Pläne. Cleane klickbare Box. */
.credit-pill{display:inline-flex;align-items:center;gap:.4rem;margin-right:auto;background:color-mix(in srgb,var(--honey) 12%,var(--panel2));border:1px solid color-mix(in srgb,var(--honey) 45%,var(--line));border-radius:.6rem;padding:.3rem .5rem;cursor:pointer;color:var(--ink);transition:border-color .15s,background .15s,transform .08s}
.credit-pill:hover{border-color:var(--honey);background:color-mix(in srgb,var(--honey) 18%,var(--panel2))}
.credit-pill:active{transform:scale(.97)}
.credit-pill .cp-n{font-weight:800;font-size:.95rem;font-variant-numeric:tabular-nums}
.credit-pill .cp-mark{flex:0 0 auto;width:1.15rem;height:1.15rem;color:var(--honey);display:block}
/* Footer-Apps-Switcher (Henny OS) links → Menü klappt nach OBEN auf. */
.side-foot .apps-wrap{position:relative}
.side-foot .apps-menu{top:auto;bottom:calc(100% + .4rem);left:0;right:auto}
.side-head .foot-prof{flex:0 0 auto}
/* Tabs: Chats | Kontakte (Startseite = Chats). */
.side-tabs{display:flex;gap:.3rem;padding:.35rem .6rem 0;border-bottom:1px solid var(--line)}
.side-tab{flex:1;display:flex;align-items:center;justify-content:center;gap:.35rem;background:none;border:0;color:var(--muted);font:inherit;font-weight:600;font-size:.92rem;padding:.5rem .3rem;cursor:pointer;border-bottom:2px solid transparent}
.side-tab .st-tx{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-tab:hover{color:var(--ink)}
.side-tab.on{color:var(--ink);border-bottom-color:var(--me)}
.tab-pane[hidden]{display:none}
/* Apps-Menü-Fuß unten links; Menü klappt nach OBEN auf. */
/* Fuß: Aktions-Icons (Farben · Archiv · Glocke · Einstellungen) + Profil, full-width verteilt. */
/* Die Linie ueber den vier Zeichen soll auf DERSELBEN Hoehe liegen wie die
   Linie ueber dem Schreibfeld daneben (Henny 24.09.). Die Hoehe des
   Schreibfelds steht in --fusshoehe und wird gemessen, nicht geraten — es
   waechst ja mit, wenn man mehrere Zeilen tippt. */
.side-foot{padding:.5rem .7rem;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-evenly;gap:.2rem;box-sizing:border-box;min-height:3.7rem}
@media(min-width:760px){.side-foot{min-height:var(--fusshoehe,3.7rem)}}
.side-foot .icon-btn{background:none;border:0;cursor:pointer;display:grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:.6rem;color:var(--ink)}
.side-foot .icon-btn:hover{background:var(--panel2)}
.side-foot .icon-btn svg{width:1.4rem;height:1.4rem;display:block}
@media(max-width:759px){.side-foot{padding-bottom:calc(.5rem + min(env(safe-area-inset-bottom), 2.2rem))}}

/* App-Switcher (zurück zu Henny + andere Apps). */
.apps-wrap{position:relative;display:flex}
.apps-menu{position:absolute;left:0;top:calc(100% + .4rem);z-index:30;min-width:14rem;background:var(--panel2);border:1px solid var(--line);border-radius:.7rem;padding:.4rem;box-shadow:0 14px 36px rgba(0,0,0,.55)}
.apps-menu[hidden]{display:none}
.apps-menu .head{font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:.35rem .55rem .45rem}
.apps-menu a{display:flex;align-items:center;gap:.65rem;padding:.5rem .55rem;border-radius:.5rem;color:var(--ink);text-decoration:none;font-size:.9rem}
.apps-menu a:hover{background:var(--panel)}
.apps-menu .ai{box-sizing:border-box;width:1.9rem;height:1.9rem;flex:0 0 auto;border-radius:.45rem;display:grid;place-items:center;background:var(--bg);line-height:1;color:var(--accent);border:1px solid var(--line);overflow:hidden}
.apps-menu .ai img{width:100%;height:100%;object-fit:cover;display:block}
.apps-menu .at{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.apps-menu .an{font-weight:600}
.apps-menu .ad{font-size:.76rem;color:var(--muted)}
.apps-menu a.cur{opacity:.6;pointer-events:none}
.apps-menu a.cur .an::after{content:" ·";color:var(--accent)}

/* Profil-Nudge (kein Name/Handle gesetzt → andere sehen „Mitglied"). */
.nudge{margin:.5rem .7rem;padding:.6rem .7rem;background:var(--panel2);border:1px solid var(--line);border-radius:.6rem;font-size:.82rem;color:var(--muted);line-height:1.4}
.nudge a{color:var(--accent);text-decoration:none;font-weight:600}
.nudge a:hover{text-decoration:underline}
.side-scroll{overflow-y:auto;overflow-x:hidden;flex:1;min-height:0;padding-bottom:.4rem}/* Nav-Pill sitzt jetzt im Fuß-Band (nicht mehr über der Liste) */
.sect{padding:.5rem .8rem .2rem;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:.5rem}
.add-row{padding:.4rem .7rem}
.add-row form{display:flex;gap:.4rem}
.add-sub{padding:.5rem .8rem .1rem;font-size:.74rem;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.src-pill{flex:0 0 auto;font-size:.68rem;font-weight:600;color:var(--accent);border:1px solid var(--line);border-radius:.5rem;padding:.02rem .35rem;white-space:nowrap}
.add-row input{flex:1;min-width:0;background:var(--panel2);border:1px solid var(--line);color:var(--ink);border-radius:.5rem;padding:.5rem .7rem;font:inherit}
.add-row button{background:var(--ink);color:var(--bg);border:0;border-radius:.5rem;padding:.5rem .8rem;font-weight:700}
.add-hint{padding:.1rem .8rem .4rem;font-size:.78rem;color:var(--muted)}
.add-hint.err{color:#ffa39e}

.row{display:flex;align-items:center;gap:.65rem;padding:.55rem .8rem;cursor:pointer;border:0;background:none;width:100%;text-align:left;color:var(--ink)}
.row:hover{background:var(--panel)}
.row.active{background:var(--panel2)}
.row .meta{min-width:0;flex:1}
.row .name{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .sub{font-size:.82rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:.3rem}
/* Die Vorschau der letzten Nachricht: ein Zeichen, ein Text, eine Zeile. */
.row-vor{display:flex;align-items:center;gap:.28rem;min-width:0;flex:1}
.row-vor-wer{flex:0 0 auto;opacity:.75}
.row-vor-ic{width:.9rem;height:.9rem;flex:0 0 auto;opacity:.8}
.row-vor-tx{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
/* Ein verpasster Anruf ist die eine Zeile, die auffallen darf. */
.row-vor-tx.warn{color:#f87171}
.row-vor-tx.warn + .row-vor-ic,.row-vor:has(.warn) .row-vor-ic{color:#f87171;opacity:1}
.row .right{display:flex;flex-direction:row;align-items:center;gap:.4rem;flex:0 0 auto}
/* Zeitstempel der letzten Nachricht rechts in der Listenzeile (heute → Uhrzeit, gestern →
   „Gestern", älter → kurzes Datum). Keine Nachrichten-Vorschau (bewusst offen gelassen). */
.row-time{font-size:.72rem;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;flex:0 0 auto}
.box-line .row-time{font-size:.68rem}
.badge{background:var(--me);color:var(--me-ink);font-size:.7rem;font-weight:700;border-radius:999px;min-width:1.2rem;height:1.2rem;display:grid;place-items:center;padding:0 .35rem}
/* Pro-Chat-Zahnrad in der Zeile (öffnet Chat + Einstellungen). */
.row-cog{display:grid;place-items:center;width:1.95rem;height:1.95rem;border-radius:.5rem;color:var(--muted);cursor:pointer;flex:0 0 auto}
.row-cog:hover{color:var(--ink);background:var(--panel2)}
.row-cog.on{color:var(--ink);background:var(--panel2)}
.row-cog .ic{width:1.15rem;height:1.15rem;display:block}

/* Avatar */
.av{flex:0 0 auto;position:relative;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:var(--panel2);color:var(--muted);font-weight:700;border:1px solid var(--line)}
.av img{width:100%;height:100%;object-fit:cover;display:block}
/* Ein Buchstabe, mittig, ohne Gitter dahinter. Etwas groesser als frueher —
   er hat jetzt das ganze Feld fuer sich. */
.av .av-kurz{position:relative;z-index:1;font-weight:700;letter-spacing:0;font-size:1.05em;line-height:1;color:var(--honey)}
/* Präsenz-Punkt (Wrapper nötig, weil .av overflow:hidden den Eck-Punkt sonst wegschneidet). */
.av-wrap{position:relative;display:inline-flex;flex:0 0 auto}
.pdot{position:absolute;right:-1px;bottom:-1px;width:.72rem;height:.72rem;border-radius:50%;border:2px solid var(--bg);box-sizing:border-box}
.pdot.online{background:#22c55e}
.pdot.busy{background:#f59e0b}
.pdot.offline{background:#71717a}
/* Präsenz-Zeile im Peer-Profil. */
.pa-presence{display:inline-flex;align-items:center;gap:.4rem;font-size:.85rem;color:var(--muted);margin:.1rem 0 .3rem}
.pa-presence .pdot{position:static;border-color:transparent}

/* Chat-Pane */
.chat-head{display:flex;align-items:center;gap:.6rem;padding:.6rem .8rem;border-bottom:1px solid var(--line);box-sizing:border-box;min-height:3.6rem}
.chat-head .back{display:none;background:none;border:0;color:var(--ink);font-size:1.3rem;padding:0 .2rem}
@media(max-width:759px){.chat-head .back{display:block}}
.chat-head .name{font-weight:700;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ttl-wrap{position:relative}
.ttl-btn{background:none;border:0;color:var(--muted);padding:.3rem;border-radius:.4rem;display:grid;place-items:center;cursor:pointer}
.ttl-btn.on{color:var(--accent)}
.ttl-btn .ic{display:block;width:1.25rem;height:1.25rem}
.ttl-menu{position:absolute;right:0;top:calc(100% + .3rem);background:var(--panel2);border:1px solid var(--line);border-radius:.6rem;padding:.3rem;z-index:5;min-width:8rem;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.ttl-menu[hidden]{display:none}
.ttl-menu button{display:block;width:100%;text-align:left;background:none;border:0;color:var(--ink);padding:.45rem .6rem;border-radius:.4rem;font-size:.85rem}
.ttl-menu button:hover{background:var(--panel)}
.ttl-menu button.sel{color:var(--accent);font-weight:700}

.msgs{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:1rem .8rem;display:flex;flex-direction:column;gap:.35rem}
.bubble>*{max-width:100%;min-width:0}
.more-top{align-self:center;background:var(--panel2);border:1px solid var(--line);color:var(--muted);border-radius:999px;padding:.25rem .8rem;font-size:.78rem;margin-bottom:.4rem}
/* Tagestrenner: zentriertes Label ueber der ERSTEN Nachricht eines Tages (Heute · Gestern ·
   Wochentag, Datum). Ersetzt das Datum, das frueher in JEDER Blase stand. Die Linie laeuft
   durch, das Label liegt mit Hintergrund --bg darueber. */
.day-sep{align-self:stretch;display:flex;align-items:center;justify-content:center;position:relative;margin:.8rem 0 .5rem;pointer-events:none}
.day-sep::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--line)}
.day-sep span{position:relative;background:var(--bg);padding:0 .7rem;font-size:.7rem;font-weight:600;letter-spacing:.04em;color:var(--muted);text-transform:uppercase}
/* Bubble = transparenter WRAPPER (Inhalt + Meta-Reihe + Reaktionen). Die farbige
   „Blase" ist NUR die .bubble-body — so sitzen Datum/Kopieren/Reagieren AUSSERHALB der
   Blase darunter (Hennys Wunsch). Der Wrapper trägt data-id, Ausrichtung + die Gesten. */
.bubble{max-width:78%;align-self:flex-start;display:flex;flex-direction:column;align-items:flex-start;
  position:relative;gap:.06rem}
.bubble.mine{align-self:flex-end;align-items:flex-end}
.bubble.sending{opacity:.55}
/* Farbige Blase: nur LEICHT gerundet + asymmetrische Sprechblasen-Ecke. Empfangen (links):
   linke Unterkante flach. Gesendet (rechts): rechte Unterkante flach → wirkt wie Blase. */
/* Form: Schwänzchen-Eck (oben, Sender-Seite) = scharf; gegenüberliegendes Top-Eck rund;
   UNTERE Ecken fast eckig (minimaler Radius) → Datum/Uhrzeit sitzen symmetrisch (Hennys Wunsch). */
.bubble-body{--bubble-pad-r:.75rem;max-width:100%;min-width:0;padding:.5rem .75rem;background:var(--them);white-space:pre-wrap;
  overflow-wrap:anywhere;position:relative;display:flex;flex-direction:column;border-radius:0 .95rem .1rem .1rem}
.bubble.mine .bubble-body{background:var(--me);color:var(--me-ink);border-radius:.95rem 0 .1rem .1rem}
/* Sprechblasen-Schwänzchen (WhatsApp-Stil): kleines Dreieck am OBEREN Eck zur Sender-Seite
   (Hennys Mockup). Nur die Form — Farbe = die Blasenfarbe. */
.bubble-body::before{content:"";position:absolute;top:0;width:.5rem;height:.5rem}
.bubble:not(.mine) .bubble-body::before{left:-.45rem;background:var(--them);clip-path:polygon(100% 0,100% 100%,0 0)}
.bubble.mine .bubble-body::before{right:-.45rem;background:var(--me);clip-path:polygon(0 0,0 100%,100% 0)}
.bubble-body>*{max-width:100%;min-width:0}
/* Blasen-Fußzeile: NUR noch die Uhrzeit (+ Lese-Haken), unten rechts IN der Blase.
   Das Datum steht seit 14.09.2026 im Tagestrenner (.day-sep) über der ersten Nachricht
   eines Tages — nicht mehr in jeder Blase. Links bleibt nur der optionale Vorlese-Knopf. */
.bubble-body .bfoot{display:flex;align-items:baseline;justify-content:flex-end;gap:.7rem;margin-top:.25rem}
.bf-left{display:inline-flex;align-items:baseline;gap:.1rem;min-width:0;margin-inline-end:auto}
.bf-left:empty{display:none}
.bubble-body .t{font-size:.64rem;color:var(--muted);display:flex;gap:.3rem;align-items:center;white-space:nowrap;flex:0 0 auto}
.bubble.mine .bubble-body .t{color:color-mix(in srgb,var(--me-ink) 84%,transparent)}
/* Lese-Haken pro eigener Nachricht: ✓ gesendet (gedämpft) · ✓✓ gelesen (Accent). */
.bubble .tick{font-size:.7rem;line-height:1;letter-spacing:-.04em;opacity:.85}
.bubble.mine .tick.read{color:var(--accent);opacity:1}
/* Aktionsknöpfe (Kopieren · Weiterleiten · Antworten · Reagieren · Löschen) = SCHWEBENDE
   Leiste über der Blase. Sie liegt absolut (position:absolute im .bubble-Wrapper) → sie
   belegt KEINEN Platz im Verlauf, nichts springt beim Ein-/Ausblenden.
   Desktop: bei :hover / :focus-within. Touch (hover:none): nur nach Long-Press (.acting).
   Die Reaktions-Chips (.rx-zone) sind INHALT und liegen deshalb NICHT hier drin — sie
   hängen direkt am .bubble-Wrapper und bleiben immer sichtbar. */
/* width:max-content ist PFLICHT: ohne sie begrenzt der absolut positionierte Kasten seine
   Shrink-to-fit-Breite auf die Breite des .bubble-Wrappers — bei einer kurzen Nachricht
   ragen die Knöpfe dann rechts aus der Leiste heraus (gemessen 14.09.2026, 57 px). */
.bubble-actions{position:absolute;bottom:100%;margin-bottom:.2rem;z-index:5;width:max-content;
  display:flex;flex-wrap:nowrap;gap:.25rem;align-items:center;padding:.22rem;
  border-radius:.8rem;background:var(--panel);border:1px solid var(--line);box-shadow:0 6px 18px rgba(0,0,0,.35);
  opacity:0;visibility:hidden;transform:translateY(.25rem);pointer-events:none;
  transition:opacity .12s ease,transform .12s ease,visibility .12s}
.bubble:not(.mine)>.bubble-actions{left:0}
.bubble.mine>.bubble-actions{right:0}
/* Muss die generische Regel .bubble>* (max-width:100%) schlagen: 100% wäre hier die Breite
   des Wrappers (= der Blase) und würde die Leiste bei kurzen Nachrichten stauchen. */
.bubble>.bubble-actions{max-width:none}
.bubble:hover>.bubble-actions,.bubble:focus-within>.bubble-actions,.bubble.acting>.bubble-actions{
  opacity:1;visibility:visible;transform:none;pointer-events:auto}
.bubble:hover,.bubble:focus-within,.bubble.acting{z-index:4}
@media(hover:none){
  .bubble:hover>.bubble-actions{opacity:0;visibility:hidden;transform:translateY(.25rem);pointer-events:none}
  .bubble.acting>.bubble-actions{opacity:1;visibility:visible;transform:none;pointer-events:auto}
}
.meta-icons{display:flex;flex-wrap:nowrap;gap:.25rem;align-items:center;flex:0 0 auto}
/* Reaktions-Chips: eigener Knoten am Wrapper, direkt unter der Blase, auf der Sender-Seite. */
.bubble>.rx-zone{margin-top:.15rem}
/* Einheitlicher Icon-Knopf der Aktionsleiste (Kopieren · Weiterleiten · Antworten · Reaktion
   · Löschen). Etwas kompakter als früher, weil sie jetzt als Leiste zusammenstehen. */
.meta-btn{width:1.95rem;height:1.95rem;padding:0;border-radius:.55rem;border:1px solid var(--line);background:var(--panel2);
  color:var(--muted);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto;
  transition:color .12s,border-color .12s,background .12s}
.meta-btn:hover{color:var(--ink)}
.meta-btn .ic{width:1.2rem;height:1.2rem;display:block}
.meta-btn.react-btn .ic{width:1.35rem;height:1.35rem}
.meta-btn.copy-btn.done{color:var(--me)}
/* Die Leiste schwebt jetzt AN der Blase (Position + Ausrichtung zeigen die Zugehörigkeit),
   deshalb tragen die Knöpfe den neutralen Linien-Rahmen — der Honig bleibt der Akzentfarbe
   (Senden, aktiver Tab, Badge, Haken) vorbehalten. AI-Button behält seine Gold-Identität. */
.bubble .meta-btn:not(.ai-btn){border-color:var(--line)}
/* Löschen: der frühere Papierkorb aus der Blasen-Fußzeile, jetzt hier in der Leiste. */
.bubble .meta-btn.del-btn:hover{color:var(--del-hover);border-color:var(--del-hover)}
/* AI-Button = FIXES Honig-Gold mit goldenem Gradient (unabhängig vom Theme). */
.meta-btn.ai-btn{background:var(--honey-grad);color:var(--honey-ink);border:0;box-shadow:var(--honey-glow)}
.meta-btn.ai-btn .ic{width:1.4rem;height:1.4rem}
.meta-btn.ai-btn:hover{filter:brightness(1.06)}
.meta-btn.ai-btn.on{box-shadow:var(--honey-glow),0 0 0 2px color-mix(in srgb,var(--honey) 60%,transparent)}
/* AI-/Transkript-Panel in der Bubble-FARBE (gehört optisch zur Nachricht), so breit wie nötig. */
.ai-panel{margin-top:.3rem;display:flex;flex-direction:column;gap:.35rem;align-self:flex-start;max-width:100%;
  background:var(--them);color:var(--ink);border-radius:.7rem;padding:.55rem .65rem}
.bubble.mine .ai-panel{align-self:flex-end;background:var(--me);color:var(--me-ink)}
.ai-transcript,.ai-summary{font-size:.85rem;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere}
.ai-summary{border-top:1px solid rgba(127,127,127,.3);padding-top:.35rem;margin-top:.05rem}
.bubble.mine .ai-summary{border-top-color:color-mix(in srgb,var(--me-ink) 30%,transparent)}
.ai-note,.ai-stats{font-size:.76rem;opacity:.72}
.ai-model{font-size:.7rem;opacity:.6;font-weight:600;white-space:nowrap}
.ai-tts-slot{margin-top:.15rem}
.tts-speeds{display:flex;gap:.35rem;flex:0 0 auto}
.ai-acts{display:flex;flex-wrap:wrap;gap:.4rem}
.ai-act{display:inline-flex;align-items:center;gap:.3rem;border:1px solid rgba(127,127,127,.4);background:rgba(127,127,127,.14);color:inherit;border-radius:.5rem;padding:.32rem .55rem;font:inherit;font-size:.8rem;font-weight:600;cursor:pointer}
.bubble.mine .ai-act{border-color:color-mix(in srgb,var(--me-ink) 35%,transparent);background:color-mix(in srgb,var(--me-ink) 14%,transparent)}
.ai-act:hover{border-color:currentColor}
.ai-translation{font-size:.85rem;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere;border-top:1px solid rgba(127,127,127,.3);padding-top:.35rem}
.bubble.mine .ai-translation{border-top-color:color-mix(in srgb,var(--me-ink) 30%,transparent)}
.ai-lang{font:inherit;font-size:.8rem;padding:.3rem .4rem;border:1px solid rgba(127,127,127,.4);background:rgba(127,127,127,.14);color:inherit;border-radius:.5rem;cursor:pointer;max-width:100%}
.bubble.mine .ai-lang{border-color:color-mix(in srgb,var(--me-ink) 35%,transparent);background:color-mix(in srgb,var(--me-ink) 14%,transparent)}
.ai-lang option{color:initial}
.ai-act:disabled{opacity:.6;cursor:default}
.empty{margin:auto;color:var(--muted);text-align:center;padding:2rem}

/* ── Reaktions-Chips (in der Meta-Reihe, neben dem Reaktions-Icon) ────────────── */
.rx-zone{display:inline-flex;flex-wrap:nowrap;gap:.25rem;align-items:center;min-width:0;flex:0 0 auto}
.rx-zone:empty{display:none}
/* Reaktions-Chip = gleiches Button-Format wie die Meta-Buttons (2rem hoch, gleiche Rundung +
   Border), nur die FARBE bleibt die des Reacters (.mine = eigen). Mit Zahl wird er breiter. */
.rx-chip{display:inline-flex;align-items:center;justify-content:center;gap:.2rem;min-width:2rem;height:2rem;
  border:1px solid var(--line);background:var(--panel2);color:var(--ink);border-radius:.55rem;padding:0 .3rem;
  font-size:1rem;line-height:1;cursor:pointer;flex:0 0 auto;transition:border-color .12s,background .12s}
.rx-chip .rx-n{font-size:.72rem;color:var(--muted);font-weight:600}
.rx-chip.mine{border-color:var(--me);background:color-mix(in srgb,var(--me) 18%,transparent)}
.rx-chip.mine .rx-n{color:var(--me)}
.rx-chip:hover{border-color:var(--ink)}

/* Reaktions-Picker (Popup über/unter der Bubble). Liquid-Glass-artig, fixed positioniert. */
.rx-pop{position:fixed;z-index:60;background:var(--panel);border:1px solid var(--line);border-radius:1rem;
  box-shadow:0 10px 34px rgba(0,0,0,.45);padding:.4rem;display:flex;flex-direction:column;gap:.3rem;max-width:min(92vw,22rem)}
.rx-quick{display:flex;gap:.15rem;align-items:center}
.rx-quick button{background:none;border:0;font-size:1.5rem;line-height:1;padding:.25rem .3rem;border-radius:.6rem;cursor:pointer}
.rx-quick button:hover{background:var(--panel2)}
.rx-quick button.sel{background:color-mix(in srgb,var(--me) 24%,transparent)}
.rx-quick .rx-more{font-size:1.1rem;color:var(--muted)}
.rx-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:.1rem;border-top:1px solid var(--line);padding-top:.35rem;margin-top:.1rem}
.rx-grid button{background:none;border:0;font-size:1.35rem;line-height:1;padding:.2rem;border-radius:.5rem;cursor:pointer}
.rx-grid button:hover{background:var(--panel2)}
/* Bearbeiten-Modus: das gerade geklickte eigene Emoji deutlich hervorheben. */
.rx-quick button.editing,.rx-grid button.editing{box-shadow:0 0 0 2px var(--accent);background:color-mix(in srgb,var(--accent) 22%,transparent)}
/* „Löschen" im Bearbeiten-Modus (ersetzt den früheren Antworten-Knopf im Picker). */
.rx-pop .rx-del{border-top:1px solid var(--line);margin-top:.1rem;background:none;border-left:0;border-right:0;border-bottom:0;
  color:#ef4444;text-align:left;font:inherit;font-size:.86rem;font-weight:600;padding:.45rem .35rem;border-radius:.5rem;cursor:pointer;display:flex;gap:.45rem;align-items:center}
.rx-pop .rx-del:hover{background:color-mix(in srgb,#ef4444 12%,transparent)}
.rx-pop .rx-del .rx-del-emoji{font-size:1.1rem}

/* ── Antworten: Vorschau ÜBER dem Inhalt einer Bubble (Zitat) ─────────────────── */
.reply-quote{display:flex;flex-direction:column;gap:.05rem;border-left:3px solid var(--me);
  background:color-mix(in srgb,var(--me) 10%,transparent);border-radius:.4rem;padding:.28rem .5rem;margin-bottom:.35rem;
  cursor:pointer;max-width:100%}
.bubble.mine .reply-quote{border-left-color:color-mix(in srgb,var(--me-ink) 80%,transparent);background:color-mix(in srgb,var(--me-ink) 14%,transparent)}
.reply-quote .rq-who{font-size:.72rem;font-weight:700;color:var(--me);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bubble.mine .reply-quote .rq-who{color:var(--me-ink)}
.reply-quote .rq-snip{font-size:.78rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bubble.mine .reply-quote .rq-snip{color:color-mix(in srgb,var(--me-ink) 78%,transparent)}
.reply-quote.gone{cursor:default}
/* Kurzes Hervorheben der angesprungenen Originalnachricht. */
.bubble.flash .bubble-body{animation:bubbleFlash 1.3s ease}
@keyframes bubbleFlash{0%,100%{box-shadow:0 0 0 0 transparent}18%{box-shadow:0 0 0 3px var(--accent)}}

/* ── Antworten: Reply-Leiste im Composer ─────────────────────────────────────── */
.reply-bar{display:flex;align-items:center;gap:.55rem;padding:.45rem .8rem;border-top:1px solid var(--line);
  background:var(--panel2)}
.reply-bar .rb-stripe{width:3px;align-self:stretch;background:var(--me);border-radius:2px;flex:0 0 auto}
.reply-bar .rb-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:.05rem}
.reply-bar .rb-who{font-size:.74rem;font-weight:700;color:var(--me)}
.reply-bar .rb-snip{font-size:.8rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reply-bar .rb-x{flex:0 0 auto;width:1.8rem;height:1.8rem;border-radius:.5rem;border:1px solid var(--line);
  background:var(--panel);color:var(--muted);font-size:1.05rem;line-height:1;display:grid;place-items:center;cursor:pointer}
.reply-bar .rb-x:hover{color:var(--ink);border-color:var(--ink)}
/* Swipe-Affordance: kleines Pfeil-Echo beim seitlichen Wischen einer Bubble. */
.bubble{touch-action:pan-y}
.bubble.swiping{transition:none}

/* ── Desktop deutlich größer + luftiger (Hennys Wunsch: Mobile bleibt klein/kompakt,
   Desktop war zu winzig + leer). Greift ab 760px. ────────────────────────────── */
@media(min-width:760px){
  /* GRÖSSERE Desktop-Basis → die GANZE rem-basierte UI (Bubbles, Sprachmemo-Player, Buttons,
     Composer, Header) skaliert UNIFORM mit; zusätzlich greift die Nutzer-Skalierung (--scale)
     aus den Einstellungen. So ist Desktop „viel größer" + alles proportional (Hennys Wunsch). */
  html{font-size:calc(20px * var(--scale))}
  .bubble{max-width:62%}
  .msgs{padding:1.4rem 2rem;gap:.55rem}
}

/* ── Weiterleiten-Modal: Kontext-Schalter + Chat-Auswahl ─────────────────────── */
.fwd{display:flex;flex-direction:column;gap:.7rem}
.fwd-ctx{display:flex;align-items:center;gap:.5rem;font-size:.9rem;color:var(--ink);cursor:pointer}
.fwd-ctx input{width:1.1rem;height:1.1rem;accent-color:var(--me)}
.fwd-hint{font-size:.78rem;color:var(--muted)}
.fwd-list{display:flex;flex-direction:column;gap:.35rem;max-height:50vh;overflow-y:auto}
.fwd-row{display:flex;align-items:center;gap:.6rem;width:100%;text-align:left;background:var(--panel2);border:1px solid var(--line);
  border-radius:.6rem;padding:.45rem .6rem;color:var(--ink);cursor:pointer}
.fwd-row:hover{border-color:var(--me)}
.fwd-meta{min-width:0;flex:1}
.fwd-name{font-weight:600;font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fwd-sub{font-size:.76rem;color:var(--muted)}
.fwd-warn{color:var(--accent);opacity:.85}
.fwd-row.fwd-disabled{opacity:.5;cursor:not-allowed}
.fwd-empty{color:var(--muted);font-size:.88rem;padding:.5rem 0}

/* ── Archiv: Chat-Header-Button + Dialog + Verwaltungs-Modal ──────────────────── */
.head-icon-btn{background:none;border:0;color:var(--muted);cursor:pointer;padding:.2rem .45rem;display:grid;place-items:center;line-height:1}
.head-icon-btn:hover{color:var(--ink)}
.head-icon-btn .ic{width:1.3rem;height:1.3rem;display:block}
@media(min-width:760px){.chat-head .head-icon-btn .ic{width:1.55rem;height:1.55rem}}
/* Aktions-Icons (Phase 0b): Desktop rechts im Header; Mobile als zentrierte Leiste
   über dem Composer (eigene Sektion). Der Name im Header bekommt so wieder die volle Breite. */
.chat-actions{display:flex;align-items:center;gap:.35rem;flex:0 0 auto}
/* Header-Aktionen rechts im Chat-Header (Anrufen · Video · ⚙) — kein Sticky-Sub-Bar mehr. */
.head-actions{display:flex;align-items:center;gap:.1rem;flex:0 0 auto;margin-left:auto}
/* Aktions-Leiste als linksbündige Sub-Leiste direkt unter dem Chat-Header (Mobile + Desktop). */
.chat-actions.subbar{justify-content:flex-start;gap:.5rem;padding:.4rem .8rem;border-bottom:1px solid var(--line);overflow-x:auto;background:var(--bg)}
.chat-actions.subbar .ttl-menu{top:calc(100% + .3rem);bottom:auto}/* aus der oberen Leiste nach UNTEN aufklappen */
@media(max-width:759px){
  .chat-actions.subbar{padding-left:calc(.8rem + env(safe-area-inset-left));padding-right:calc(.8rem + env(safe-area-inset-right))}
}
.arch-dialog{display:flex;flex-direction:column;gap:.8rem}
.arch-note{font-size:.88rem;color:var(--muted);line-height:1.45;margin:0}
/* Nachrichten-Vorschau-Karte im Lösch-/Anfrage-Dialog (welche Nachricht genau?). */
.del-preview{background:var(--panel);border:1px solid var(--line);border-radius:.6rem;padding:.6rem .7rem;display:flex;flex-direction:column;gap:.3rem}
.del-preview .dp-head{display:flex;justify-content:space-between;gap:.6rem;align-items:baseline}
.del-preview .dp-who{font-weight:700;font-size:.9rem;color:var(--ink)}
.del-preview .dp-time{font-size:.72rem;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.del-preview .dp-status{font-size:.72rem;color:var(--muted)}
.del-preview .dp-status.read{color:var(--accent)}
.del-preview .dp-body{font-size:.86rem;color:var(--ink);line-height:1.4;overflow-wrap:anywhere;max-height:5.4rem;overflow:hidden}
.arch-opt{display:flex;align-items:center;gap:.5rem;font-size:.9rem;color:var(--ink);cursor:pointer}
.arch-opt input{width:1.1rem;height:1.1rem;accent-color:var(--me)}
.arch-actions{display:flex;gap:.6rem;margin-top:.2rem}
.arch-go{flex:1;background:var(--me);color:var(--me-ink);border:0;border-radius:.6rem;padding:.6rem;font:inherit;font-weight:700;cursor:pointer}
.arch-go.danger{background:#ef4444}
/* Box-Menü-Gefahrenknopf (alle eigenen Nachrichten löschen). */
.box-menu .box-danger{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;margin-top:.3rem;background:none;border:1px solid #ef4444;color:#ef4444;border-radius:.6rem;padding:.6rem .7rem;font:inherit;font-weight:600;cursor:pointer}
.box-menu .box-danger:hover{background:color-mix(in srgb,#ef4444 12%,transparent)}
.box-menu .box-danger .ic{width:1.1rem;height:1.1rem;flex:0 0 auto}
.arch-cancel{flex:0 0 auto;background:var(--panel2);border:1px solid var(--line);color:var(--ink);border-radius:.6rem;padding:.6rem 1rem;font:inherit;font-weight:600;cursor:pointer}
.del-opt{display:flex;align-items:flex-start;gap:.6rem;padding:.65rem .7rem;border:1px solid var(--line);border-radius:.6rem;cursor:pointer;color:var(--ink)}
.del-opt.on{border-color:#ef4444}
.del-opt input{flex:0 0 auto;width:1.1rem;height:1.1rem;margin-top:.15rem;accent-color:#ef4444}
.del-opt b{display:block;font-size:.92rem;margin-bottom:.15rem}
.del-opt small{display:block;font-size:.82rem;color:var(--muted);line-height:1.4}
.arch-go:disabled{opacity:.45;cursor:default}
.arch-modal{display:flex;flex-direction:column;gap:1rem}
.arch-sect h4{margin:0 0 .4rem;font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600}
.arch-empty{color:var(--muted);font-size:.86rem;padding:.2rem 0}
.arch-row{display:flex;align-items:center;gap:.6rem;padding:.45rem 0;border-top:1px solid var(--line)}
.arch-meta{flex:1;min-width:0}
.arch-name{font-weight:600;font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.arch-sub{font-size:.76rem;color:var(--muted)}
.arch-act{flex:0 0 auto;background:var(--panel2);border:1px solid var(--line);color:var(--ink);border-radius:.5rem;padding:.35rem .6rem;font:inherit;font-size:.8rem;font-weight:600;cursor:pointer}
.arch-act:hover{border-color:var(--me)}
.arch-act:disabled{opacity:.6;cursor:default}

/* Composer = EINE Reihe (Umbau 14.09.2026): [+] · Eingabefeld · EIN rechter Knopf, der
   Mikrofon zeigt solange das Feld leer ist und Senden, sobald Text drinsteht.
   Das [+] klappt die Werkzeug-Leiste (Anhang · Kamera · Standort · KI) darunter auf, die
   Format-Leiste (B/I/U) nur auf Anforderung (Plus-Menü oder Strg/Cmd+Shift+F). Im
   Ruhezustand ist also genau eine Reihe sichtbar. */
.composer{display:flex;flex-direction:column;gap:.45rem;padding:.6rem .8rem;border-top:1px solid var(--line);box-sizing:border-box}
.composer.recording{flex-direction:row;align-items:center}
.comp-input-row{display:flex;gap:.5rem;align-items:flex-end}
/* Plus-Knopf links: öffnet/schließt die Werkzeug-Leiste, dreht dabei zum ✕. */
.comp-plus{flex:0 0 auto;width:2.5rem;height:2.5rem;border-radius:50%;border:1px solid var(--line);background:var(--panel2);color:var(--ink);display:grid;place-items:center;transition:transform .16s ease,border-color .12s}
.comp-plus .ic{width:1.35rem;height:1.35rem;display:block}
.comp-plus:hover{border-color:var(--me)}
.comp-plus.open{transform:rotate(45deg);border-color:var(--me)}
/* Format-Leiste (fett · kursiv · unterstrichen) — versteckt, bis sie angefordert wird. */
.comp-fmt{display:flex;gap:.35rem}
.comp-fmt[hidden]{display:none}
.comp-fmt-b{width:2rem;height:1.9rem;display:grid;place-items:center;background:var(--panel2);border:1px solid var(--line);color:var(--ink);border-radius:.5rem;cursor:pointer;font-size:.95rem;line-height:1}
.comp-fmt-b:hover{border-color:var(--me)}
.comp-fmt-b.f-b{font-weight:800}
.comp-fmt-b.f-i{font-style:italic;font-family:Georgia,"Times New Roman",serif}
.comp-fmt-b.f-u{text-decoration:underline}
.composer textarea{flex:1;resize:none;background:var(--panel2);border:1px solid var(--line);color:var(--ink);border-radius:1rem;padding:.55rem .8rem;font:inherit;max-height:8rem;min-height:2.5rem}
/* Fokus in der MARKENFARBE (Honig) statt im blauen System-Akzent — wie beim Login-Feld. */
.composer textarea:focus{outline:none;border-color:var(--me);box-shadow:0 0 0 2px color-mix(in srgb,var(--me) 30%,transparent)}
/* EIN rechter Knopf, zwei Zustände: .mic (Feld leer, neutral) · Senden (Text da, Honig). */
.composer .comp-send{background:var(--me);color:var(--me-ink);border:0;border-radius:50%;width:2.5rem;height:2.5rem;flex:0 0 auto;display:grid;place-items:center}
.composer .comp-send.mic{background:var(--panel2);color:var(--ink);border:1px solid var(--line)}
.composer .comp-send.mic:hover{border-color:var(--me)}
.composer .comp-send:disabled{opacity:.4}
.composer .comp-send .ic{width:1.4rem;height:1.4rem;display:block}
/* Werkzeug-Leiste aus dem Plus-Menü (Anhang · Kamera · Standort · KI · Format). */
.comp-sheet{display:flex;gap:.4rem;flex-wrap:wrap}
.comp-sheet[hidden]{display:none}
.comp-tools-row{display:flex;gap:.4rem}
.comp-tool{flex:1;height:2.5rem;display:grid;place-items:center;border-radius:.85rem;background:var(--panel2);border:1px solid var(--line);color:var(--ink);cursor:pointer}
/* Alle Composer-Logos gleich hoch (Anhängen · Kamera · Standort · Sprachmemo). KI-Wabe + Senden s.u. */
.comp-tool .ic{width:1.4rem;height:1.4rem;display:block}
.comp-tool:hover{border-color:var(--me)}
.comp-tool:disabled{opacity:.4}
/* Textlabel statt Icon im Werkzeug-Knopf (Formatierung „B / I / U"). */
.comp-fmt-lbl{font-size:.8rem;font-weight:700;letter-spacing:.02em;white-space:nowrap}
/* KI-Generatoren (Bild/Video) = die „Geld-Buttons": IDENTISCHER Honig-Gold-Gradient wie der
   AI-Button unter den Bubbles (.ai-btn), schwarz-braunes minimales Icon → stechen klar heraus. */
.comp-tool.gen{background:var(--honey-grad);border:0;color:var(--honey-ink);box-shadow:var(--honey-glow)}
.comp-tool.gen:hover{filter:brightness(1.06)}
.comp-tool.gen .ic{width:1.55rem;height:1.55rem}/* Wabe füllt den viewBox weniger → leicht größer, damit VISUELL gleich hoch */
/* Vereinheitlichtes KI-Menü (Tabs Bild · Video) */
.gen-menu{display:flex;flex-direction:column;gap:.7rem}
.gen-tabs{display:flex;gap:.4rem;background:var(--panel2);border:1px solid var(--line);border-radius:99px;padding:.3rem}
.gen-tab{flex:1;border:0;background:none;color:var(--muted);font:inherit;font-weight:700;font-size:.9rem;padding:.55rem;border-radius:99px;cursor:pointer}
.gen-tab.on{background:var(--honey-grad);color:var(--honey-ink);box-shadow:var(--honey-glow)}
.gen-pane[hidden]{display:none}
/* KI-Fenster mit fester Eingabeleiste unten (Hennys Ansage 24.09.). Das Fenster
   selbst scrollt nicht mehr; es scrollt nur der obere Teil, die Leiste steht. */
.modal.gen{display:flex;flex-direction:column;overflow:hidden;padding-bottom:0}
.modal.gen>.modal-head{flex:0 0 auto}
.modal.gen .gen-menu,.modal.gen>.ig-split{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.modal.gen .gen-content{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.modal.gen .gen-pane{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.modal.gen .gen-pane[hidden]{display:none}
.modal.gen .ig-split{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:0}
.ig-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;padding-bottom:.8rem;display:flex;flex-direction:column;gap:.8rem}
.ig-dock{flex:0 0 auto;border-top:1px solid var(--line);background:var(--panel);padding:.6rem 0 max(.75rem,env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:.5rem}
.ig-dock .ig-field{margin:0}
/* In der Leiste erklaeren Platzhalter und Symbole sich selbst; die
   Ueberschriften kosteten auf dem Handy ein Viertel der Hoehe. */
.ig-dock .ig-field>.igl{display:none}
.ig-dock .ig-prompt{min-height:2.9rem;max-height:6.5rem;padding-right:5.4rem}
/* Nur das Mikrofon im Feld (Bild): halber Rand, sonst bricht der Platzhalter um */
.ig-dock .ig-field:not(:has(.ig-dice)) .ig-prompt{padding-right:2.9rem}
.ig-dock .ig-mic{top:.4rem;right:.4rem}
.ig-dock .ig-dice{position:absolute;top:.4rem;right:2.75rem;margin:0;width:2rem;height:2rem;padding:0;display:grid;place-items:center;font-size:.95rem}
.ig-dock .ig-dice-lbl{display:none}
.ig-dice-ic+.ig-dice-lbl{margin-left:.3rem}
.ig-dock .ig-hist{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-top:.35rem}
.ig-dock .ig-hist::-webkit-scrollbar{display:none}
.ig-dock-row{display:flex;flex-direction:column;gap:.5rem}
.ig-dock-chips{display:flex;align-items:center;gap:.8rem;overflow-x:auto;scrollbar-width:none}
.ig-dock-chips::-webkit-scrollbar{display:none}
.ig-dock-chips>.ig-field{flex:0 0 auto}
.ig-dock-chips>.ig-field+.ig-field{border-left:1px solid var(--line);padding-left:.8rem}
.ig-dock .ig-ratios,.ig-dock .ig-counts{flex-wrap:nowrap}
.ig-dock .ig-go{margin-top:0;width:100%}
.ig-dock .ig-status{padding:.1rem 0 0}
.ig-dock .ig-status[hidden],.ig-dock .ig-note[hidden]{display:none}
@media(min-width:760px){
  .ig-dock-row{flex-direction:row;align-items:center;gap:1rem}
  .ig-dock-chips{flex:0 1 auto;min-width:0}
  .ig-dock-row .ig-go{flex:1 1 14rem;width:auto}
}
/* Im geteilten Fenster fliessen die Modelle im oberen Teil mit, statt eine
   eigene kleine Scrollbox zu haben (zwei Scrollbalken uebereinander). */
.modal.gen .ig-models{max-height:none;overflow:visible;margin:0;padding:0}
@media(min-width:760px){
  .modal.gen{height:min(88dvh,58rem)}
  .modal.gen .ig-mgrid,.modal.gen .ig-grid{grid-template-columns:repeat(4,1fr)}
}
/* Kamera-Aufnahme-Vorschau (vor dem Senden) */
.cap-prev{display:flex;flex-direction:column;gap:.7rem}
.cap-img{width:100%;max-height:56vh;object-fit:contain;border-radius:.8rem;background:#000}
.cap-msg{background:var(--panel2);border:1px solid var(--line);color:var(--ink);border-radius:.7rem;padding:.6rem .8rem;font:inherit;resize:none}
.cap-acts{display:flex;gap:.5rem;flex-wrap:wrap}
.cap-btn{flex:1;min-width:6rem;background:var(--panel2);border:1px solid var(--line);color:var(--ink);border-radius:.6rem;padding:.65rem;font:inherit;font-weight:700;cursor:pointer}
.cap-btn:hover{border-color:var(--me)}
.cap-btn.cap-send{background:var(--me);color:var(--me-ink);border:0}
.cap-btn:disabled{opacity:.6}
.no-chat{margin:auto;color:var(--muted)}

#toast{position:fixed;left:50%;bottom:1.2rem;transform:translateX(-50%) translateY(1rem);
  background:var(--panel2);border:1px solid var(--line);color:var(--ink);padding:.55rem 1rem;border-radius:999px;
  opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;z-index:130;font-size:.85rem}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
/* Breite nach Inhalt (sonst begrenzt left:50% sie auf die halbe Breite und der Text bricht
   schmal um); bei offenem Dialog oben, damit er nicht die Knoepfe des Blatts verdeckt. */
#toast{width:max-content;max-width:calc(100vw - 2rem);box-sizing:border-box;text-align:center}
body:has(.modal-ov) #toast{bottom:auto;top:calc(1rem + env(safe-area-inset-top,0px));transform:translateX(-50%) translateY(-1rem)}
body:has(.modal-ov) #toast.show{transform:translateX(-50%) translateY(0)}

/* Light-Theme (opt-in; Default ist dunkel = Hive-Identität). */
:root.light{
  /* Heller Modus = dieselbe Honig-Marke, aus paletteFrom("#F2A93B","light"). */
  --bg:#f9f8f6;--panel:#fdfdfc;--panel2:#f4f3f0;--line:#e5e1dc;--ink:#28251f;
  --muted:#7b7265;--me:#F2A93B;--them:#edebe8;--accent:#F2A93B;
  --me-ink:#18181b; /* eigene Blase ist Honig (hell) → dunkler Text */
  --ruf:#15803d;
  --del-hover:#dc2626; /* Hellmodus: kräftiges Rot (auf hellen Blasen lesbar) */
}
:root.light body{background:var(--bg);color:var(--ink)}

/* Such-Ergebnisse beim Kontakt-Hinzufügen. */
.search-res{margin:0 .7rem;display:flex;flex-direction:column;gap:.25rem}
.search-res button{display:flex;align-items:center;gap:.6rem;width:100%;text-align:left;background:var(--panel2);border:1px solid var(--line);border-radius:.55rem;padding:.45rem .6rem;color:var(--ink)}
.search-res button:hover{border-color:var(--me)}
.search-res .sn{font-weight:600;font-size:.9rem}
.search-res .sh{font-size:.78rem;color:var(--muted)}

/* Sektion-Label im Sidebar (Anfragen). */
.req-badge[hidden]{display:none}
.req-badge{display:inline-flex;align-items:center;justify-content:center;min-width:1.15rem;height:1.15rem;box-sizing:border-box;padding:0 .35rem;background:var(--accent);color:#1a1a1a;font-size:.68rem;font-weight:800;border-radius:999px;line-height:1;flex:0 0 auto}

/* Annehmen/Ablehnen-Leiste statt Composer bei einer Anfrage. */
.accept-bar{display:flex;flex-direction:column;gap:.5rem;padding:.7rem .8rem;border-top:1px solid var(--line);background:var(--panel)}
.accept-bar .at{font-size:.85rem;color:var(--muted)}
.accept-bar .ab{display:flex;gap:.6rem}
.accept-bar button{flex:1;border:0;border-radius:.6rem;padding:.6rem;font-weight:700;cursor:pointer}
.accept-bar .acc{background:var(--me);color:var(--me-ink)}
.accept-bar .dec{background:var(--panel2);color:var(--ink);border:1px solid var(--line)}

/* Nachrichten-Mehrfachauswahl: Kopf-Leiste (Anzahl+Abbrechen) ersetzt den Chat-Header,
   Aktionsleiste unten ersetzt den Composer; markierte Blasen bekommen einen Honig-Ring + ✓. */
.sel-head{display:flex;align-items:center;gap:.55rem;padding:calc(.65rem + env(safe-area-inset-top)) calc(.9rem + env(safe-area-inset-right)) .65rem calc(.9rem + env(safe-area-inset-left));background:var(--panel);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:7}
.sel-x{background:none;border:0;color:var(--ink);width:2.2rem;height:2.2rem;display:grid;place-items:center;border-radius:.6rem;cursor:pointer;flex:none}
.sel-x .ic{width:1.35rem;height:1.35rem}
.sel-count{font-weight:600;color:var(--ink)}
.selecting .chat-head,.selecting .composer,.selecting .accept-bar,.selecting .msg-jump,.selecting .secret-banner,.selecting .e2e-nudge{display:none}
.selecting .bubble{cursor:pointer}
.selecting .bubble-actions{display:none}
.selecting .bubble.sel .bubble-body{box-shadow:0 0 0 2px var(--honey)}
.selecting .bubble.sel .bubble-body::after{content:"✓";position:absolute;top:-.55rem;inset-inline-end:-.55rem;width:1.25rem;height:1.25rem;border-radius:50%;background:var(--honey);color:var(--honey-ink);display:grid;place-items:center;font-size:.8rem;font-weight:800;box-shadow:0 1px 4px rgba(0,0,0,.35);z-index:3}
.sel-bar{display:flex;gap:.5rem;padding:.6rem calc(.7rem + env(safe-area-inset-right)) calc(.6rem + env(safe-area-inset-bottom)) calc(.7rem + env(safe-area-inset-left));background:var(--panel);border-top:1px solid var(--line)}
.sel-act{flex:1;display:flex;flex-direction:column;align-items:center;gap:.22rem;background:var(--panel2);border:1px solid var(--line);border-radius:.7rem;color:var(--ink);padding:.5rem .3rem;font-size:.72rem;font-weight:600;cursor:pointer}
.sel-act .ic{width:1.25rem;height:1.25rem}
.sel-act .sel-spark{font-size:1.2rem;line-height:1}
.sel-act:disabled{opacity:.4;cursor:default}
.sel-act.loading{opacity:.6}
.sel-act .sel-preis{font-size:.6rem;font-weight:500;opacity:.75;white-space:nowrap}
.sel-act .sel-preis:empty{display:none}

/* Bulk-Chat-Auswahl (Dashboard): „Auswählen"-Leiste · Kopfzeile (Anzahl/Alle/Fertig) ·
   untere Aktionsleiste (Für mich löschen · Archivieren). Tabs+Fuß werden dabei ausgeblendet. */
.chatsel-tools{display:flex;justify-content:flex-end;padding:.3rem .7rem .1rem}
.chatsel-tools button{background:none;border:0;color:var(--muted);font:inherit;font-size:.82rem;font-weight:600;cursor:pointer;padding:.2rem .35rem;border-radius:.4rem}
.chatsel-tools button:hover{color:var(--ink)}
.chat-sel-head{display:flex;align-items:center;gap:.5rem;padding:.55rem .7rem;border-bottom:1px solid var(--line);background:var(--panel)}
.chat-sel-head .csh-count{font-weight:700;color:var(--ink);flex:1}
.chat-sel-head button{background:none;border:0;color:var(--muted);font:inherit;font-size:.85rem;font-weight:600;cursor:pointer;padding:.25rem .45rem;border-radius:.5rem}
.chat-sel-head button:hover{color:var(--ink)}
.chat-selecting .side-tabs,.chat-selecting .side-foot{display:none}
.chat-sel-bar{display:flex;gap:.5rem;padding:.6rem calc(.7rem + env(safe-area-inset-right)) calc(.6rem + env(safe-area-inset-bottom)) calc(.7rem + env(safe-area-inset-left));background:var(--panel);border-top:1px solid var(--line)}
.row.selrow{cursor:pointer}
.selbox{flex:0 0 auto;width:1.3rem;height:1.3rem;border-radius:.35rem;border:2px solid var(--line);display:grid;place-items:center;color:transparent}
.row.selrow.on .selbox{background:var(--honey);border-color:var(--honey);color:var(--honey-ink)}
.selbox svg{width:.9rem;height:.9rem;display:block}

/* Modal (Settings + Profil). */
/* z-index 90: ueber dem Anruf-Bildschirm (80) und der Mini-Pille (83). Vorher
   lag die Lightbox mit 60 DARUNTER — wer im Anruf auf das Schloss tippte, sah
   nichts, und der Text erschien erst nach dem Auflegen (Henny 19.09.). */
.modal-ov{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.55);display:grid;place-items:end center}
/* Eigene Ebene ueber einem offenen Modal (ebene()): KI-Zustimmung, Melden. */
.modal-ov.ebene-ov{z-index:110}
.ki-melden{display:block;margin-top:.45rem;font-size:.75rem}
.ai-panel .ki-melden{color:inherit;border-top-color:color-mix(in srgb,currentColor 30%,transparent)}
.ai-panel .ki-melden:hover{color:inherit;text-decoration:underline}
@media(min-width:600px){.modal-ov{place-items:center}}
/* Farb-Modal: fast transparenter Backdrop → die App-Live-Vorschau bleibt sichtbar (mobil
   verdeckte der dunkle Backdrop sonst alles). Sheet kompakter + abgesetzt. */
.modal-ov.cs-ov{background:rgba(0,0,0,.04)}
.modal-ov.cs-ov .modal{max-height:72dvh;box-shadow:0 -10px 40px rgba(0,0,0,.5)}
.modal{background:var(--panel);border:1px solid var(--line);border-radius:1rem 1rem 0 0;width:100%;max-width:30rem;max-height:88dvh;overflow-y:auto;padding:1rem}
@media(min-width:600px){.modal{border-radius:1rem}}
.modal-head{display:flex;align-items:center;gap:.6rem;margin-bottom:1rem}
.modal-head .mt{font-weight:700;font-size:1.05rem;flex:1}
.modal-head .x{background:none;border:0;color:var(--muted);font-size:1.4rem;cursor:pointer;line-height:1}
.modal-head .x:hover{color:var(--ink)}
/* AI-Bild-Generator (Foto-Button → Lightbox) */
.ig-field{margin-bottom:.85rem;position:relative}
.ig-field > .igl{display:block;font-size:.78rem;color:var(--muted);margin-bottom:.4rem}
/* Diktier-Button oben rechts im Prompt-Feld (Aufnahme = rot). */
.ig-mic{position:absolute;top:0;right:0;width:2rem;height:2rem;display:grid;place-items:center;background:var(--panel2);border:1px solid var(--line);border-radius:.5rem;color:var(--ink);cursor:pointer}
.ig-mic:hover{border-color:var(--me)}
.ig-mic.rec{background:#ef4444;color:#fff;border-color:#ef4444;box-shadow:0 0 0 3px rgba(239,68,68,.25)}
.ig-mic .ic{width:1.05rem;height:1.05rem;display:block}
.ig-mic:disabled{opacity:.6}
.ig-mic-preis{position:absolute;top:.35rem;right:2.5rem;font-size:.7rem;font-weight:600;color:#ef4444;background:var(--panel);border:1px solid var(--line);border-radius:.4rem;padding:.05rem .35rem;white-space:nowrap;pointer-events:none}
.ig-mic-preis:empty{display:none}
.ig-dock .ig-mic-preis{top:.75rem;right:2.9rem}
.ig-prompt{width:100%;box-sizing:border-box;background:var(--panel2);border:1px solid var(--line);color:var(--ink);border-radius:.7rem;padding:.6rem .7rem;font:inherit;resize:none;min-height:3.2rem;max-height:10rem}
.ig-provs,.ig-ratios,.ig-counts{display:flex;flex-wrap:wrap;gap:.4rem}
.ig-chip{background:var(--panel2);border:1px solid var(--line);color:var(--ink);border-radius:.6rem;padding:.42rem .7rem;font-size:.85rem;cursor:pointer;display:inline-flex;align-items:center;gap:.4rem;line-height:1}
.ig-chip.on{border-color:var(--me);box-shadow:inset 0 0 0 1px var(--me)}
.ig-chip-cr{opacity:.55;font-size:.78rem;margin-left:.28rem}
.ig-chip:disabled{opacity:.4;cursor:default}
.ig-cat{font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:.6rem 0 .32rem;font-weight:600}
.ig-cat:first-child{margin-top:0}
.ig-model-desc{font-size:.78rem;color:var(--muted);margin:.5rem 0 0;line-height:1.35;min-height:1.05rem}
.ig-preview-note{font-size:.68rem;color:var(--muted);opacity:.8;margin:.25rem 0 0}
.ig-dice{margin-top:.4rem;background:var(--panel2);border:1px solid var(--line);color:var(--ink);border-radius:.6rem;padding:.4rem .7rem;font-size:.8rem;cursor:pointer}
.ig-dice:hover{border-color:var(--me)}
.ig-mgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem;margin-bottom:.15rem}
.ig-mcard{border:1px solid var(--line);border-radius:.7rem;overflow:hidden;background:var(--panel2);cursor:pointer;text-align:left;padding:0;font:inherit;color:inherit;display:flex;flex-direction:column}
.ig-mcard.on{border-color:var(--me);box-shadow:inset 0 0 0 2px var(--me)}
.ig-mcard-img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;background:var(--line)}
.ig-mcard.mcard-vid .ig-mcard-img{aspect-ratio:16/9}
.ig-mcard-body{padding:.4rem .55rem .5rem;display:flex;flex-direction:column;gap:.05rem}
.ig-mcard-lbl{font-size:.82rem;font-weight:600;line-height:1.2}
.ig-mcard-cr{font-size:.72rem;color:var(--muted)}
.md-p{margin:.2rem 0}
.md-ul{margin:.2rem 0;padding-left:1.1rem}
.md-ul li{margin:.12rem 0}
.md-p code,.md-ul code{background:var(--panel2);border:1px solid var(--line);border-radius:.3rem;padding:0 .25rem;font-size:.9em}
.msg-link{color:inherit;text-decoration:underline;text-underline-offset:2px;word-break:break-word}
.bubble.mine .msg-link{text-decoration-color:color-mix(in srgb,var(--me-ink) 55%,transparent)}
.tts-play{display:inline-flex;align-items:center;gap:.18rem;background:none;border:0;color:inherit;opacity:.72;cursor:pointer;font:inherit;font-size:.68rem;padding:0;margin-right:.4rem;line-height:1;flex:0 0 auto}
.tts-play:hover{opacity:1}
.tts-ic{font-size:.6rem;display:inline-flex;align-items:center}
.tts-ic .ic{width:.82rem;height:.82rem;display:block}
.tts-cost{font-size:.6rem;opacity:.85}
.ig-chip.has-thumb{padding-left:.3rem}
.ig-chip-thumb{width:2.5rem;height:2.5rem;border-radius:.4rem;object-fit:cover;background:var(--line);flex:0 0 auto}
.igl-row{display:flex;justify-content:space-between;align-items:center;gap:.5rem}
.ig-paste{background:var(--panel2);border:1px solid var(--line);color:var(--ink);border-radius:.5rem;padding:.2rem .55rem;font-size:.72rem;cursor:pointer;flex:0 0 auto}
.ig-hist{display:flex;flex-wrap:wrap;gap:.3rem;align-items:center;margin-top:.45rem}
.ig-hist-lbl{font-size:.7rem;color:var(--muted)}
.ig-hist-pill{background:var(--panel2);border:1px solid var(--line);color:var(--muted);border-radius:.5rem;padding:.22rem .5rem;font-size:.75rem;cursor:pointer;max-width:14rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ig-hist-pill:hover{color:var(--ink);border-color:var(--me)}
.av-ref-img{display:block;width:6rem;height:6rem;object-fit:cover;border-radius:.7rem;border:1px solid var(--line);margin-bottom:.5rem}
.av-out{margin-top:.7rem}
.av-out-img{display:block;width:100%;max-width:18rem;margin:0 auto .6rem;border-radius:.8rem;border:1px solid var(--line)}
.av-out-row{display:flex;gap:.5rem;align-items:center;justify-content:center;flex-wrap:wrap}
.av-out-row .ig-go{width:auto;flex:1 1 12rem;margin-top:0}
.ig-models{max-height:min(24rem,48vh);overflow-y:auto;margin:-.1rem -.2rem 0;padding:.1rem .2rem 0}
.ig-models .ig-provs{margin-bottom:.15rem}
.ig-ratio-ic{display:inline-block;border:1.5px solid currentColor;border-radius:2px;opacity:.7;flex:0 0 auto}
.ig-go{width:100%;background:var(--me);color:var(--me-ink);border:0;border-radius:.7rem;padding:.72rem;font:inherit;font-weight:600;cursor:pointer;margin-top:.15rem}
.ig-go:disabled{opacity:.5;cursor:default}
.ig-status{font-size:.85rem;color:var(--muted);text-align:center;padding:.55rem 0}
.ig-bar{height:3px;border-radius:999px;background:var(--line);overflow:hidden;margin:.45rem auto 0;max-width:15rem}
.ig-bar i{display:block;height:100%;width:0;border-radius:999px;background:var(--honey);transition:width .6s linear}
.ig-eta{font-size:.72rem;color:var(--muted);text-align:center;margin-top:.25rem;font-variant-numeric:tabular-nums}
.ig-chip-eta,.ig-mcard-eta{font-size:.68rem;color:var(--muted);font-variant-numeric:tabular-nums}
.ig-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem;margin-top:.3rem}
.ig-card{position:relative;border-radius:.6rem;overflow:hidden;background:var(--panel2);border:1px solid var(--line)}
.ig-card img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;cursor:zoom-in;background:var(--panel2)}
.ig-acts{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:.3rem;padding:.35rem}
.ig-acts-icons{display:flex;gap:.3rem;justify-content:flex-end}
.ig-acts button{background:rgba(0,0,0,.5);color:#fff;border:0;border-radius:.45rem;padding:.35rem;font-size:.85rem;cursor:pointer;backdrop-filter:blur(3px)}
.ig-acts button.send{width:100%;background:var(--honey-grad);color:var(--honey-ink);font-weight:800;box-shadow:var(--honey-glow);backdrop-filter:none;padding:.5rem}
.ig-acts button.del,.ig-acts button.cpy,.ig-acts button.dl{flex:0 0 auto;width:2.1rem}
.ig-acts .ic{width:1.15rem;height:1.15rem;display:block}
.ig-acts button:disabled{opacity:.5;cursor:default}
.ig-sendopt{display:flex;align-items:center;gap:.5rem;font-size:.85rem;color:var(--ink);margin:.8rem 0 .3rem}
.ig-sub{font-size:.78rem;color:var(--muted);margin:1.1rem 0 .1rem;border-top:1px solid var(--line);padding-top:.9rem}
.ig-empty{font-size:.83rem;color:var(--muted);text-align:center;padding:.8rem 0}
.ig-badge{position:absolute;top:.3rem;left:.3rem;background:rgba(0,0,0,.6);color:#fff;font-size:.62rem;font-weight:600;padding:.12rem .42rem;border-radius:.4rem;backdrop-filter:blur(3px);letter-spacing:.02em;pointer-events:none}
/* Prompt-Zeile unter dem Bild/Video (2 Zeilen, Klick übernimmt den Prompt). */
.ig-cap{padding:.4rem .55rem;font-size:.72rem;color:var(--muted);line-height:1.3;cursor:pointer;border-top:1px solid var(--line);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ig-cap:hover{color:var(--ink)}
.ig-skel{aspect-ratio:1/1;background:linear-gradient(100deg,var(--panel2) 30%,var(--line) 50%,var(--panel2) 70%);background-size:200% 100%;animation:hv-shimmer 1.2s linear infinite}
@keyframes hv-shimmer{to{background-position:-200% 0}}
/* Video-Generator */
.ig-bal{font-size:.82rem;color:var(--muted);margin-bottom:.6rem;font-weight:600}
.ig-note{font-size:.76rem;color:var(--muted);margin:.15rem 0 .5rem;line-height:1.5}
.ig-grid.vid{grid-template-columns:1fr}
@media(min-width:520px){.ig-grid.vid{grid-template-columns:1fr 1fr}}
.ig-grid.vid .ig-card{border:1px solid var(--line);background:var(--panel2)}
.ig-video{display:block;width:100%;aspect-ratio:16/9;object-fit:contain;background:#000}
.ig-grid.vid .ig-acts{position:static;background:none;padding:.35rem;gap:.35rem}
.ig-vpend,.ig-vfail{aspect-ratio:16/9;display:grid;place-items:center;background:var(--panel2)}
.ig-vpend-in{display:flex;flex-direction:column;align-items:center;gap:.5rem;color:var(--muted);font-size:.8rem;text-align:center;padding:.5rem}
.ig-vfail{color:var(--muted);font-size:.8rem;text-align:center;padding:.5rem}
/* Video im Chat */
.msg-video{display:block;width:280px;max-width:100%;max-height:60vh;border-radius:.6rem;background:#000;object-fit:contain}
@media(max-width:520px){.msg-video{width:100%}}
/* Profilbild-Upload + Zuschneiden */
.prof-av{display:flex;flex-direction:column}
.avc{display:flex;flex-direction:column;align-items:center;gap:.9rem}
.avc-stage{position:relative;width:256px;height:256px;border-radius:.6rem;overflow:hidden;background:var(--panel2);touch-action:none}
.avc-canvas{display:block;width:256px;height:256px;cursor:grab}
.avc-canvas:active{cursor:grabbing}
.avc-ring{position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 9999px rgba(0,0,0,.45);pointer-events:none}
.avc-zoom{display:flex;align-items:center;gap:.6rem;width:100%}
.avc-zoom input[type=range]{flex:1}
.avc-zl{font-size:.8rem;color:var(--muted)}
.prof-top{display:flex;flex-direction:column;align-items:center;gap:.5rem;text-align:center;padding:.5rem 0 1rem}
.prof-name{font-weight:700;font-size:1.2rem}
.prof-handle{color:var(--muted);font-size:.9rem}
.prof-invite{display:flex;flex-direction:column;gap:.4rem;padding:.7rem;margin:0 0 .3rem;background:var(--panel2);border:1px solid var(--line);border-radius:.7rem}
.pi-label{font-weight:600;font-size:.8rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.pi-row{display:flex;align-items:center;gap:.5rem}
.pi-code{flex:1;min-width:0;font-family:ui-monospace,monospace;font-size:1.15rem;font-weight:700;letter-spacing:.12em;color:var(--ink);-webkit-user-select:all;user-select:all;overflow:hidden;text-overflow:ellipsis}
.pi-copy,.pi-qr{flex:0 0 auto;display:grid;place-items:center;min-width:2.2rem;height:2.2rem;padding:0 .5rem;background:var(--panel);border:1px solid var(--line);border-radius:.5rem;color:var(--ink);font:inherit;font-weight:600;cursor:pointer}
.pi-copy .ic{width:1.1rem;height:1.1rem}
.pi-copy:hover,.pi-qr:hover,.pi-qr.on{border-color:var(--me);color:var(--me)}
.pi-hint{color:var(--muted);font-size:.78rem}
.pi-qrwrap{align-self:center;width:min(240px,60vw);padding:.5rem;background:#fff;border-radius:.6rem;margin-top:.2rem}
.pi-qrwrap svg{display:block;width:100%;height:auto}
.prof-disc{display:flex;align-items:center;gap:.5rem;padding:.7rem 0 .1rem;border-top:1px solid var(--line);margin-top:.6rem;cursor:pointer;font-size:.92rem}
.prof-disc input{width:1.1rem;height:1.1rem;flex:0 0 auto}
.prof-field{padding:.55rem 0;border-top:1px solid var(--line)}
.prof-field .pl{font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.prof-field .pv{margin-top:.15rem;white-space:pre-wrap;overflow-wrap:anywhere}
.prof-field .pv a{color:var(--me);text-decoration:none}
.prof-actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem;padding-top:.8rem;border-top:1px solid var(--line)}
.pa-btn{flex:1 1 auto;min-width:8rem;background:var(--panel2);border:1px solid var(--line);color:var(--ink);border-radius:.6rem;padding:.55rem .9rem;cursor:pointer;font:inherit;font-weight:600}
.pa-btn:hover{background:var(--panel)}
.pa-btn.danger{color:#ef4444;border-color:#ef4444}
.pa-btn:disabled{opacity:.5;cursor:default}
.report-ta{width:100%;box-sizing:border-box;margin:.4rem 0 0;resize:vertical;background:var(--panel2);border:1px solid var(--line);color:var(--ink);border-radius:.6rem;padding:.55rem .7rem;font:inherit}
.report-ta:focus{outline:none;border-color:var(--me)}
.set-row{display:flex;align-items:center;gap:.6rem;padding:.7rem 0;border-top:1px solid var(--line)}
.set-row .sl{flex:1}
.set-row .sl small{display:block;color:var(--muted);font-size:.8rem}
.set-row .sw{background:var(--panel2);border:1px solid var(--line);color:var(--ink);border-radius:999px;padding:.4rem .9rem;cursor:pointer;font-weight:600}
/* Darstellungsgröße-Auswahl (S·M·L·XL·XXL) in den Einstellungen. */
.size-opts{display:flex;gap:.3rem;flex-wrap:wrap}
.size-opts button{flex:0 0 auto;min-width:2.2rem;height:2rem;border:1px solid var(--line);background:var(--panel2);color:var(--muted);border-radius:.5rem;cursor:pointer;font:inherit;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.size-opts button.on{color:var(--ink);border-color:var(--me);background:color-mix(in srgb,var(--me) 16%,var(--panel2))}
.set-link{display:block;width:100%;box-sizing:border-box;text-align:left;background:none;cursor:pointer;padding:.7rem 0;border:0;border-top:1px solid var(--line);color:var(--ink);text-decoration:none;font:inherit;font-weight:600}
.set-link:hover{color:var(--me)}
.set-logout{width:100%;margin-top:.8rem;background:var(--panel2);border:1px solid var(--line);color:#ff6b6b;border-radius:.6rem;padding:.65rem;font-weight:700;cursor:pointer}
.set-legal{text-align:center;margin-top:1rem;padding-top:.9rem;border-top:1px solid var(--line);font-size:.8rem;color:var(--muted)}
.set-legal a{color:var(--muted);text-decoration:underline}.set-legal a:hover{color:var(--ink)}
/* ── Farb-Einstellungen-Modal ───────────────────────────────────────────────── */
.cs-h{margin:1rem 0 .5rem;font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:700}
.cs-h:first-child{margin-top:.2rem}
.cs-hint{font-size:.82rem;color:var(--muted);line-height:1.45;margin:.2rem 0 .6rem}
.cs-seg{display:flex;gap:.4rem}
.cs-seg-b{flex:1;background:var(--panel2);border:1px solid var(--line);color:var(--ink);border-radius:.6rem;padding:.55rem;font-weight:600;cursor:pointer}
.cs-seg-b.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 16%,var(--panel2))}
.cs-chips{display:flex;flex-wrap:wrap;gap:.5rem}
.cs-chip{display:inline-flex;align-items:center;gap:.4rem;background:var(--panel2);border:1px solid var(--line);border-radius:999px;padding:.3rem .5rem .3rem .6rem;font-size:.85rem;color:var(--ink)}
button.cs-chip{cursor:pointer;font:inherit}
.cs-chip.on{border-color:var(--accent)}
.cs-chip-sw{width:1rem;height:1rem;border-radius:50%;flex:0 0 auto;border:1px solid var(--line)}
.cs-chip-name{background:none;border:0;color:inherit;font:inherit;cursor:pointer;padding:0}
.cs-chip-x{background:none;border:0;color:var(--muted);font-size:1.1rem;line-height:1;cursor:pointer;padding:0 .1rem}
.cs-chip-x:hover{color:#ef4444}
.cs-pick{display:flex;align-items:center;justify-content:space-between;gap:.7rem;padding:.5rem 0;border-top:1px solid var(--line)}
.cs-pick-l{font-weight:600}
.cs-pick input[type=color]{width:3rem;height:2rem;border:1px solid var(--line);border-radius:.5rem;background:none;cursor:pointer;padding:0}
.cs-acts{display:flex;gap:.6rem;margin-top:.9rem}
.cs-save{flex:1;background:var(--me);border:0;color:var(--me-ink);border-radius:.6rem;padding:.65rem;font-weight:700;cursor:pointer}
.cs-cancel{flex:1;background:var(--panel2);border:1px solid var(--line);color:var(--ink);border-radius:.6rem;padding:.65rem;font-weight:600;cursor:pointer}
/* ── Profil-Editor (mein Profil) ────────────────────────────────────────────── */
.prof-edit{display:flex;flex-direction:column;gap:.7rem;margin-top:.6rem}
.pe-field{display:flex;flex-direction:column;gap:.3rem}
.pe-l{font-size:.78rem;color:var(--muted);font-weight:600}
.pe-field input,.pe-field textarea{background:var(--panel2);border:1px solid var(--line);color:var(--ink);border-radius:.55rem;padding:.6rem .7rem;font:inherit;width:100%}
.pe-field textarea{min-height:4.5rem;resize:vertical}
.pe-hint{font-size:.72rem;color:var(--muted)}
/* Profil-Ausbau (Batch 05.07): Identitaet-Inline-Edit · Sichtbarkeits-Toggles · Socials · Billing · Sticky-Footer. */
.prof-id{display:flex;flex-direction:column;gap:.6rem;margin:.2rem 0 .4rem}
.pe-id .pe-l{display:flex;align-items:center;gap:.35rem}
.pe-id .pe-l .ic{width:.85rem;height:.85rem;color:var(--muted)}
.pe-prefixed{display:flex;align-items:center;background:var(--panel2);border:1px solid var(--line);border-radius:.55rem;overflow:hidden}
.pe-prefixed .pe-prefix{padding:0 .1rem 0 .7rem;color:var(--muted);font-weight:700}
.pe-prefixed input{background:none;border:0;border-radius:0}
.pe-l-row{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.vis-toggle{background:none;border:0;cursor:pointer;color:var(--me);display:grid;place-items:center;width:1.7rem;height:1.7rem;border-radius:.4rem;padding:0}
.vis-toggle:hover{background:var(--panel2)}
.vis-toggle.off{color:var(--muted)}
.vis-toggle .ic{width:1.15rem;height:1.15rem}
.prof-socials{display:flex;flex-direction:column;gap:.45rem;margin-top:.7rem;padding-top:.7rem;border-top:1px solid var(--line)}
.soc-list{display:flex;flex-direction:column;gap:.4rem}
.soc-row{display:flex;gap:.4rem;align-items:center}
.soc-row .soc-title{flex:0 0 38%;min-width:0}
.soc-row .soc-url{flex:1;min-width:0}
.soc-row input{background:var(--panel2);border:1px solid var(--line);color:var(--ink);border-radius:.5rem;padding:.5rem .6rem;font:inherit}
.soc-rm{flex:0 0 auto;background:none;border:0;color:var(--muted);cursor:pointer;display:grid;place-items:center;width:2rem;height:2rem;border-radius:.4rem}
.soc-rm:hover{color:#ff6b6b;background:var(--panel2)}
.soc-rm .ic{width:1.05rem;height:1.05rem}
.soc-add{display:inline-flex;align-items:center;gap:.15rem;align-self:flex-start}
.soc-add .ic{width:.95rem;height:.95rem}
.prof-foot{position:sticky;bottom:-1rem;z-index:2;display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin:.9rem -1rem -1rem;padding:.8rem 1rem calc(.8rem + env(safe-area-inset-bottom));background:var(--panel);border-top:1px solid var(--line)}
.prof-foot .cs-save{flex:1 1 8rem;margin:0}
.prof-foot .set-logout{flex:0 0 auto;width:auto;margin:0;padding:.65rem 1rem}
.prof-soc-list{display:flex;flex-direction:column;gap:.35rem}
.prof-soc-link{display:inline-flex;align-items:center;gap:.25rem;color:var(--me);text-decoration:none}
.prof-soc-link .ic{width:.9rem;height:.9rem;flex:0 0 auto}
/* ── Profil-Button unten rechts (gespiegelt zum Apps-Menü) ──────────────────── */
.foot-prof{background:none;border:0;padding:0;cursor:pointer;border-radius:50%;display:flex;line-height:0}
.foot-prof:hover{outline:2px solid var(--line);outline-offset:1px}
/* ── Gruppen ─────────────────────────────────────────────────────────────────── */
.grp-av{display:grid;place-items:center;background:var(--panel2);color:var(--muted);border-radius:50%;flex:0 0 auto}
.selbst-av{display:grid;place-items:center;background:var(--panel2);color:var(--honey);border-radius:50%;flex:0 0 auto}
.grp-sender{font-size:.72rem;font-weight:700;color:var(--accent);margin-bottom:.12rem}
.bubble.mine .grp-sender{color:color-mix(in srgb,var(--me-ink) 88%,transparent)}
.new-group-btn{display:block;width:calc(100% - 1.4rem);margin:.5rem .7rem;background:var(--panel2);border:1px solid var(--line);color:var(--ink);border-radius:.6rem;padding:.6rem;font:inherit;font-weight:700;cursor:pointer}
.new-group-btn:hover{border-color:var(--me)}
.grp-title-in{width:100%;background:var(--panel2);border:1px solid var(--line);color:var(--ink);border-radius:.55rem;padding:.6rem .7rem;font:inherit;margin-bottom:.3rem}
.grp-pick-list{display:flex;flex-direction:column;gap:.2rem;max-height:18rem;overflow-y:auto}
.grp-pick,.grp-pick-btn{display:flex;align-items:center;gap:.6rem;width:100%;padding:.45rem .3rem;border-radius:.5rem;cursor:pointer;background:none;border:0;color:var(--ink);text-align:left;font:inherit}
.grp-pick:hover,.grp-pick-btn:hover{background:var(--panel2)}
.grp-pick input[type=checkbox]{width:1.1rem;height:1.1rem;accent-color:var(--me);flex:0 0 auto}
.gp-meta{min-width:0;flex:1}
.gp-name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gp-sub{font-size:.78rem;color:var(--muted)}
.gp-owner{font-size:.72rem;color:var(--muted);font-weight:600}
.grp-members{display:flex;flex-direction:column;gap:.1rem;margin:.5rem 0}
.grp-mrow{display:flex;align-items:center;gap:.6rem;padding:.4rem .2rem}
.gp-remove{margin-left:auto;background:none;border:1px solid var(--line);color:#ff6b6b;border-radius:.5rem;padding:.3rem .6rem;font:inherit;font-size:.8rem;cursor:pointer;flex:0 0 auto}
.gp-remove:hover{border-color:#ff6b6b}
/* ── Calls (WebRTC Slice 1) ──────────────────────────────────────────────────── */
.head-call svg{color:#22c55e} /* Anruf-Button grün */
.call-ov{position:fixed;inset:0;z-index:80;background:rgba(8,8,12,.92);backdrop-filter:blur(8px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;color:#f4f4f5;
  padding:calc(2rem + env(safe-area-inset-top)) 0 0}
/* Die Karte nimmt den Platz oberhalb der Leiste und bleibt darin mittig. */
.call-ov > .call-card{margin:auto;padding:0 1.2rem}
/* Video verbunden: Overlay durchsichtig (das Remote-Video liegt darunter), Inhalt oben/unten. */
/* Im Videoanruf liegen Kopf und Leiste AUSSERHALB des Overlays (sie muessen
   ueber dem kleinen Bild liegen). Hier bleibt nur der Hintergrund. */
.call-ov.video{background:none;backdrop-filter:none;justify-content:center;pointer-events:none}
.call-ov.video > *{pointer-events:auto}
/* Persistente Video-Elemente (außerhalb des Overlays → kein Wiedergabe-Abriss beim Re-Render). */
/* Remote-Video: DEFAULT object-fit:contain → immer echte Aspect-Ratio (schwarze Balken statt
   Quetschen/Zoomen bei ungleichem Seitenverhältnis, z. B. Hochkant-Handy-Call auf dem Laptop).
   Der „Vollbild/Füllen"-Button (cur.fit='cover') + Drehen setzen inline über applyRemoteVideo(). */
#call-remote{position:fixed;inset:0;width:100%;height:100%;object-fit:contain;background:#000;z-index:79;display:none}
/* Lage und Groesse des kleinen Bildes stehen im Code (es laesst sich schieben). */
#call-local{position:fixed;z-index:81;display:none;background:#111}
/* Der Kopf ist EINE Zeile: links Minimieren, Mitte Name und Dauer, rechts
   Auflegen. Weil es eine echte Zeile ist, sitzt der Name von selbst vertikal
   mittig zwischen den Knoepfen — ohne dass irgendwo eine Zahl geraten wird.
   Er haengt am Dokument (nicht im Overlay) und liegt damit ueber dem kleinen
   Bild; anfassen laesst er sich aber nur dort, wo wirklich ein Knopf ist. */
.call-kopf{position:fixed;left:0;right:0;top:0;z-index:84;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;
  padding:calc(.55rem + env(safe-area-inset-top)) .7rem .5rem;box-sizing:border-box;
  background:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.22) 62%,transparent);
  text-shadow:0 1px 3px rgba(0,0,0,.7)}
.call-kopf-pille{display:flex;justify-content:center;pointer-events:auto;margin-bottom:.15rem}
.call-kopf-reihe{display:flex;align-items:center;width:100%;gap:.5rem}
/* Feste Breite links und rechts, damit die Mitte wirklich die Mitte ist —
   auch wenn ein Knopf gerade fehlt (beim Klingeln). */
.call-kopf-seite{flex:0 0 2.6rem;display:flex;align-items:center;justify-content:center;pointer-events:auto}
.call-kopf-mitte{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:.05rem}
.call-kopf-hinweise{display:flex;flex-direction:column;align-items:center;gap:.25rem;margin-top:.35rem}
.call-vname{font-size:1.1rem;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.call-vtimer{font-size:.85rem;color:#e5e5ea;font-variant-numeric:tabular-nums}
/* Gegenseite-stumm-Indikator (Video: kleine Pille neben Name · Audio: Zeile unter Name). */
.call-schloss-zeile{display:flex;flex-direction:column;align-items:center;gap:.35rem;width:100%;padding:0 1rem;box-sizing:border-box}
.call-quali{min-height:1.05rem}
/* Der Bedien-Block sitzt UNTEN und nur unten. Mit einem dunklen Verlauf dahinter,
   damit die Symbole auch auf hellem Bild lesbar bleiben. */
/* Die untere Leiste haengt am Dokument und klebt am unteren Rand: der Pfeil
   soll nur ein paar Punkte ueber der Kante stehen (Hennys Mass, 21.09.), und
   zwar zugeklappt an genau derselben Stelle wie aufgeklappt. */
.call-unten{position:fixed;left:0;right:0;bottom:0;z-index:84;
  display:flex;flex-direction:column;align-items:center;gap:.5rem;
  padding:1rem .5rem calc(.3rem + env(safe-area-inset-bottom));box-sizing:border-box}
/* Nur wenn der Block ueber einem Bild liegt, braucht er den dunklen Verlauf. */
.call-unten.ueberBild{padding-top:1.6rem;background:linear-gradient(transparent,rgba(0,0,0,.5) 38%,rgba(0,0,0,.76))}
/* ZWEI feste Reihen, fuenf und vier. Jede fuer sich mittig, jeder Knopf mit
   fester Groesse — damit steht jeder Knopf in jedem Zustand auf demselben
   Punkt. Verschoben hat sich frueher nichts wegen der Anzahl, sondern weil
   sich die Anzahl AENDERTE; das tut sie jetzt nicht mehr.
   Kleiner als vorher, dafuer groessere Zeichen darin (Hennys Wunsch 21.09.). */
.call-acts{display:flex;flex-direction:column;align-items:center;gap:clamp(.4rem,2.2vw,.7rem);width:100%}
.call-reihe{display:flex;justify-content:center;align-items:center;gap:clamp(.45rem,3.4vw,.9rem)}
.call-acts .call-fab{width:clamp(2.3rem,11.6vw,3.1rem);height:clamp(2.3rem,11.6vw,3.1rem);flex:0 0 auto}
.call-acts .call-fab svg{display:block;width:clamp(1.3rem,6.7vw,1.78rem);height:clamp(1.3rem,6.7vw,1.78rem)}
/* Blass heisst "geht gerade nicht" — anfassen darf man ihn trotzdem, er sagt
   dann, warum. Deshalb KEIN cursor:default und kein disabled. */
.call-acts .call-fab.aus{opacity:.3}
/* Annehmen/Ablehnen beim Klingeln bleiben gross. */
.call-acts.klingelt{flex-direction:row;gap:2.4rem}
.call-acts.klingelt .call-fab{width:4rem;height:4rem}
.call-acts.klingelt .call-fab svg{width:1.7rem;height:1.7rem}
/* Zugeklappt: kein dunkler Verlauf mehr, es soll ja nichts mehr da sein. */
.call-unten.zu{background:none;padding-top:.4rem;gap:0}
/* Die beiden Knoepfe auf dem kleinen Bild. Der Rahmen selbst faengt nichts ab,
   sonst koennte man das Bild nicht mehr schieben; nur die Knoepfe tun es. */
.pip-ui{display:none}
.pip-knopf{position:absolute;width:1.75rem;height:1.75rem;border-radius:50%;border:0;padding:0;
  display:grid;place-items:center;cursor:pointer;pointer-events:auto;
  background:rgba(0,0,0,.52);color:#fff;backdrop-filter:blur(3px)}
.pip-knopf svg{width:1rem;height:1rem}
.pip-knopf:active{transform:scale(.92)}
/* Wegschieben: mittig an der Aussenkante, der Pfeil zeigt dorthin, wo das Bild
   gleich hinwandert. */
.pip-weg{left:-.55rem;top:50%;margin-top:-.875rem}
.pip-weg.nachRechts{left:auto;right:-.55rem}
.pip-weg.nachRechts svg{transform:rotate(180deg)}
/* Groesse ziehen: obere rechte Ecke, halb daneben, damit der Finger Platz hat. */
.pip-griff{right:-.55rem;top:-.55rem;cursor:nwse-resize;touch-action:none}
/* Die Lasche am Bildschirmrand, wenn das kleine Bild weggeschoben ist. */
.pip-tab{align-items:center;justify-content:center;width:1.6rem;height:2.75rem;border:0;padding:0;
  background:rgba(0,0,0,.55);color:#fff;cursor:pointer;backdrop-filter:blur(3px);
  border:1px solid rgba(255,255,255,.2)}
.pip-tab svg{width:1.05rem;height:1.05rem}
.pip-tab.nachRechts svg{transform:rotate(180deg)}
.pip-tab:active{transform:scale(.94)}
/* Der Pfeil, der die ganze Leiste wegklappt. */
.call-pfeil{width:3.2rem;height:1.5rem;border-radius:.75rem;border:0;padding:0;margin-top:.1rem;
  background:rgba(255,255,255,.16);color:#fff;display:grid;place-items:center;cursor:pointer}
.call-pfeil svg{width:1.25rem;height:1.25rem}
.call-pfeil:active{transform:scale(.94)}
/* Quer (Landschaft): noch kompakter, sonst frisst die Leiste das halbe Bild. */
@media (max-height:520px){
  .call-acts .call-fab{width:clamp(2.1rem,7vh,2.7rem);height:clamp(2.1rem,7vh,2.7rem)}
  .call-acts .call-fab svg{width:clamp(1.2rem,4vh,1.55rem);height:clamp(1.2rem,4vh,1.55rem)}
  .call-acts{gap:.3rem}
  .call-unten{padding-top:.9rem;gap:.3rem}
  .call-unten.ueberBild{padding-top:.9rem}
  .call-ov.video .call-vtop{gap:.05rem}
  .call-ov.video .call-vname{font-size:1rem}
  .call-schloss{font-size:.72rem;padding:.14rem .55rem}
}
.call-schloss{display:inline-flex;max-width:100%;align-items:center;gap:.4rem;background:rgba(34,197,94,.14);border:1px solid rgba(34,197,94,.42);color:#86efac;
  border-radius:999px;padding:.2rem .7rem;font-size:.76rem;font-weight:400;cursor:pointer;line-height:1.3}
.call-schloss:hover{background:rgba(34,197,94,.22)}
.cs-mehr{text-decoration:underline;opacity:.85;font-weight:400;flex:0 0 auto}
.cs-ic{display:inline-flex;flex:0 0 auto}
.cs-ic .ic{width:.9rem;height:.9rem}
.cs-tx{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.erkl{display:flex;flex-direction:column;gap:.1rem}
.erkl-kurz{margin:0 0 .6rem;font-size:1rem;line-height:1.6;color:var(--ink)}
.erkl-h{font-weight:700;font-size:.9rem;color:var(--ink);margin-top:.8rem}
.erkl-t{margin:.2rem 0 0;font-size:.88rem;line-height:1.6;color:var(--muted)}
.erkl-btn{margin-top:1.1rem;background:var(--panel2);border:1px solid var(--line);color:var(--ink);border-radius:.7rem;padding:.6rem 1rem;font-weight:600;cursor:pointer}
.erkl-btn:hover{border-color:var(--me)}
.sl-mehr{background:none;border:0;padding:0;color:var(--me);font:inherit;font-weight:600;text-decoration:underline;cursor:pointer}
.sl-kopf{display:block}
.call-quali{font-size:.78rem;color:#fbbf24;background:rgba(0,0,0,.42);border-radius:999px;padding:.1rem .6rem;margin-top:.25rem}
.call-mutei[hidden]{display:none}
.call-mutei{display:inline-flex;align-items:center;gap:.3rem;font-size:.82rem;font-weight:600;color:#f4f4f5;background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:.15rem .6rem}
/* Der Aufnahme-Hinweis ist ein Knopf: antippen haelt an, setzt fort, beendet. */
button.ruf-hinweis{font:inherit;font-weight:600;cursor:pointer;pointer-events:auto;
  border-color:rgba(248,113,113,.5);background:rgba(127,29,29,.45)}
button.ruf-hinweis:active{transform:scale(.96)}
/* Anruf-Einstellungs-Sheet (Pre-Call-Consent) + Bedingungen auf dem Klingel-Screen. */
.callset-head{display:flex;align-items:center;gap:.7rem;padding:.1rem 0 .5rem}
.callset-name{font-weight:700;font-size:1.05rem}
.callset-sub{font-size:.82rem;color:var(--muted)}
.callset-enc{border-top:0}
.callset-enc-fest{border:1px solid color-mix(in srgb,#22c55e 40%,transparent);background:color-mix(in srgb,#22c55e 8%,transparent);border-radius:.7rem;padding:.7rem .85rem;margin:.2rem 0 .9rem}
.cef-t{font-weight:700;font-size:.95rem;color:#22c55e}
.cef-s{font-size:.82rem;color:var(--muted);line-height:1.5;margin-top:.25rem}
.sicher-box{display:flex;flex-direction:column;gap:.7rem}
.sicher-txt{margin:0;font-size:.9rem;line-height:1.55;color:var(--muted)}
.sicher-code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:1.25rem;font-weight:700;letter-spacing:.06em;color:var(--ink);background:var(--panel2);border:1px solid var(--line);border-radius:.6rem;padding:.7rem;text-align:center;word-spacing:.5rem}
.netztest-btn{margin-top:.9rem;background:var(--panel2);border:1px solid var(--line);color:var(--ink);border-radius:.7rem;padding:.55rem .9rem;font-weight:600;cursor:pointer;font-size:.9rem}
.netztest-btn:hover{border-color:var(--me)}
.netztest-btn:disabled{opacity:.6;cursor:default}
.netztest{font-size:.84rem;color:var(--muted);margin-top:.45rem;min-height:1.1rem;line-height:1.45}
.netztest.gut{color:#22c55e}
.netztest.mittel{color:#fbbf24}
.netztest.schlecht{color:#f87171}
/* Vorlagen: zwei Karten nebeneinander. Eine Vorlage stellt nur die Schalter
   darunter — man sieht sofort, was sie getan hat. */
.callset-vorlagen{display:flex;gap:.5rem;margin:.2rem 0 .9rem}
.cv{flex:1;min-width:0;display:flex;flex-direction:column;gap:.15rem;text-align:left;background:var(--panel2);border:1px solid var(--line);border-radius:.7rem;padding:.6rem .7rem;cursor:pointer;color:var(--ink);font:inherit}
.cv:hover{border-color:var(--me)}
.cv.on{border-color:var(--me);background:color-mix(in srgb,var(--me) 14%,transparent)}
.cv-n{font-weight:700;font-size:.95rem}
.cv-u{font-size:.76rem;color:var(--muted);line-height:1.25}
/* Podcast: Blatt, Fortschritt, Knopf im Anruf-Rahmen. */
.pod-formate{display:flex;gap:.4rem;margin:.3rem 0 .9rem;flex-wrap:wrap}
.pod-formate .cv{flex:1 1 6rem}
/* Die Buehne haelt das Bild in Form: die Leinwand hat je nach Vorlage ein
   anderes Seitenverhaeltnis, also darf sie nur in der Hoehe begrenzt werden. */
.pod-buehne{display:flex;justify-content:center;background:#0b0b0f;border-radius:.6rem;overflow:hidden}
.pod-vorschau{max-width:100%;max-height:48vh;width:auto;height:auto;display:block;background:#0b0b0f;cursor:grab}
.pod-vorschau:active{cursor:grabbing}
.podlauf .pod-vorschau{cursor:default}
.pod-zeit{display:flex;align-items:center;gap:.6rem;margin:.6rem 0 .2rem}
.pod-zeit input[type=range]{flex:1}
.pod-zt{font-size:.78rem;color:var(--muted);font-variant-numeric:tabular-nums;flex:0 0 auto}
.pod-schnitt{display:flex;flex-direction:column;gap:.3rem;margin:.2rem 0 .9rem}
.pod-griff{display:flex;align-items:center;gap:.6rem}
.pod-griff input[type=range]{flex:1}
.pod-gl{font-size:.75rem;color:var(--muted);width:2rem;flex:0 0 auto}
.cv-mb{font-size:.72rem;color:var(--me);font-weight:600}
.pod-regler{display:flex;flex-direction:column;gap:.5rem;margin:.2rem 0 .8rem}
.pod-person{background:var(--panel2);border:1px solid var(--line);border-radius:.7rem;padding:.55rem .7rem;display:flex;flex-direction:column;gap:.4rem}
.pp-kopf{display:flex;align-items:baseline;gap:.5rem}
.pp-n{font-weight:600;font-size:.9rem;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pp-p{font-size:.75rem;color:var(--muted);margin-right:auto}
.pp-knoepfe{display:flex;gap:.4rem}
.pp-b{display:grid;place-items:center;width:2rem;height:2rem;border-radius:.5rem;background:var(--panel);border:1px solid var(--line);color:var(--ink);cursor:pointer}
.pp-b:hover{border-color:var(--me)}
.pp-b .ic{width:1.05rem;height:1.05rem}
.pod-balken{height:.4rem;border-radius:.3rem;background:var(--panel2);margin:.7rem 0 .4rem;overflow:hidden}
.pod-balken-in{height:100%;width:0;background:var(--me);transition:width .2s linear}
.podset .set-row .tgl.fest,.podstudio .set-row .tgl.fest{opacity:.55}
@media(min-width:760px){.modal.modal-breit{max-width:46rem}}
.ruf-pod{display:inline-flex;align-items:center;gap:.45rem;background:var(--panel2);border:1px solid var(--line);color:var(--ink);border-radius:.6rem;padding:.45rem .7rem;font:inherit;font-size:.86rem;font-weight:600;cursor:pointer}
.ruf-pod:hover{border-color:var(--me)}
.ruf-pod .ic{width:1.05rem;height:1.05rem}
.callset-acts{display:flex;gap:.6rem;margin-top:1rem}
.callset-back{flex:0 0 auto;background:var(--panel2);border:1px solid var(--line);color:var(--ink);border-radius:.7rem;padding:.7rem 1.1rem;font-weight:600;cursor:pointer}
.callset-go{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;background:var(--me);color:var(--me-ink);border:0;border-radius:.7rem;padding:.7rem;font-weight:700;cursor:pointer}
.callset-go .ic{width:1.15rem;height:1.15rem}
.call-conds{display:flex;flex-direction:column;gap:.35rem;margin-top:.5rem;max-width:20rem}
.call-cond{display:flex;align-items:center;gap:.5rem;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.14);border-radius:.6rem;padding:.4rem .6rem;font-size:.82rem;color:#f4f4f5}
.call-cond .cc-ic{flex:0 0 auto}
.call-cond .cc-tx{text-align:left}
/* Call-Historie-Liste (Phase B). */
.callhist-row{display:flex;align-items:center;gap:.6rem;width:100%;background:none;border:0;border-top:1px solid var(--line);padding:.6rem .1rem;cursor:pointer;text-align:left;color:var(--ink)}
.callhist-row:first-child{border-top:0}
.callhist-row:hover{background:var(--panel2)}
.chr-meta{flex:1;min-width:0}
.chr-name{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chr-sub{display:flex;align-items:center;gap:.35rem;font-size:.82rem;color:var(--muted)}
.chr-sub.missed{color:#ef4444}
.chr-time{font-size:.78rem;color:var(--muted);flex:0 0 auto}
.call-ov.video.camoff{background:#0b0b0f}
.call-vcamoff{display:flex;flex-direction:column;align-items:center;gap:.8rem;text-align:center;color:#e5e5ea}

/* Podcast-Ansicht: der "Kamera aus"-Deckel gehoert nur ueber die Haelfte der
   Gegenseite, nicht ueber den ganzen Schirm. Oben liegt immer, wer angerufen
   hat: beim Anrufer selbst also unten, beim Angerufenen oben. */
.call-ov.pod .call-vcamoff{position:absolute;left:0;right:0;justify-content:center;background:#0b0b0f}
.call-ov.pod.pod-oben .call-vcamoff{top:0;height:50%}
.call-ov.pod.pod-unten .call-vcamoff{top:50%;height:50%}
.call-ov.pod.camoff{background:none}
.call-camoff-txt{font-size:1rem;color:#b9b9c2;max-width:18rem}
.call-card{display:flex;flex-direction:column;align-items:center;gap:.9rem;text-align:center;color:#f4f4f5}
.call-card .avatar{width:6rem;height:6rem;font-size:2rem}
.call-name{font-size:1.5rem;font-weight:700}
.call-sub{color:#b9b9c2;font-size:1rem;min-height:1.4rem;font-variant-numeric:tabular-nums}
/* Auflegen liegt OBEN RECHTS, gespiegelt zum Minimieren oben links (Hennys
   Anordnung 21.09.). Es ist damit klein — und vor allem weit weg von den
   Knoepfen, die man im Gespraech dauernd drueckt. Genau das war der Fehlgriff
   vom 19.09.: Auflegen stand direkt neben der Kamera. */
/* Auflegen sitzt in der Kopfzeile rechts. Fuenfzehn Prozent kleiner als
   zuvor (Hennys Mass, 21.09.). */
.call-fab.hangup.oben{width:2.2rem;height:2.2rem;flex:0 0 auto}
.call-fab.hangup.oben svg{width:1.2rem;height:1.2rem}

.call-fab.cam{background:rgba(255,255,255,.16)}
.call-fab.cam.on{background:#fbbf24;color:#1a1200}
.call-fab{width:4rem;height:4rem;border-radius:50%;border:0;display:grid;place-items:center;cursor:pointer;color:#fff;font-size:1.4rem}
.call-fab svg{width:1.7rem;height:1.7rem}
.call-fab.accept{background:#22c55e}
.call-fab.decline,.call-fab.hangup{background:#ef4444}
.call-fab.hangup svg{transform:rotate(135deg)} /* aufgelegter Hörer */
.call-fab.mute{background:rgba(255,255,255,.16)}
.call-fab.mute.on{background:#fbbf24;color:#1a1200}
.call-fab.fit,.call-fab.rot,.call-fab.spk,.call-fab.kamera,.call-fab.dreh,.call-fab.foto,.call-fab.teilen{background:rgba(255,255,255,.16)}
.call-fab.teilen.on{background:#fbbf24;color:#1a1200}
.call-fab.schloss{background:rgba(34,197,94,.2);color:#86efac}
.ton-wahl{display:flex;flex-direction:column;gap:.4rem}
.ton-opt{display:flex;align-items:center;gap:.7rem;width:100%;text-align:left;background:var(--panel2);border:1px solid var(--line);
  color:var(--ink);border-radius:.7rem;padding:.7rem .8rem;font:inherit;cursor:pointer}
.ton-opt.on{border-color:var(--accent)}
.ton-opt.aus{opacity:.45;cursor:default}
.ton-opt .ic{width:1.2rem;height:1.2rem;flex:0 0 auto;opacity:.8}
.ton-tx{flex:1;min-width:0}
.ton-n{font-weight:600;font-size:.95rem}
.ton-u{font-size:.8rem;color:var(--muted);margin-top:.1rem}
.ton-hk{color:var(--accent);font-weight:700;flex:0 0 auto}
.call-fab.cam{background:rgba(255,255,255,.16)}
.call-fab:active{transform:scale(.94)}
/* Minimieren-Button oben links im Vollbild (wie ein Zurück-Button). */
.call-back{width:2.6rem;height:2.6rem;border-radius:50%;border:0;display:grid;place-items:center;cursor:pointer;
  background:rgba(0,0,0,.38);color:#fff;backdrop-filter:blur(4px);flex:0 0 auto}
.call-back svg{width:1.5rem;height:1.5rem}
.call-back:active{transform:scale(.94)}
/* Minimierter Call = verschiebbare Mini-Karte (Position via inline left/top). Bei Video liegt das
   #call-remote-Bild oben, diese Leiste nahtlos darunter (gleiche Breite). Ton läuft weiter. */
.call-min{position:fixed;z-index:83;display:flex;align-items:center;gap:.5rem;
  background:rgba(18,18,24,.96);backdrop-filter:blur(10px);color:#f4f4f5;
  border-radius:999px;padding:.32rem .4rem .32rem .5rem;box-shadow:0 8px 26px rgba(0,0,0,.5);
  border:1px solid rgba(255,255,255,.12);cursor:grab;touch-action:none;user-select:none}
.call-min.has-vid{border-radius:0 0 .85rem .85rem;box-sizing:border-box;padding:.28rem .3rem;gap:.25rem;
  justify-content:space-between;border-top:0;box-shadow:0 12px 30px rgba(0,0,0,.5)}
.call-min.has-vid .call-min-fab{width:1.9rem;height:1.9rem}
.call-min.has-vid .call-min-name{max-width:none;font-size:.76rem}
.call-min:active{filter:brightness(1.06)}
.call-min-txt{display:flex;flex-direction:column;line-height:1.08;min-width:0;flex:1}
.call-min-name{font-size:.82rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:9rem}
.call-min-timer{font-size:.72rem;color:#7ee59a;font-variant-numeric:tabular-nums}
.call-min-fab{width:2.15rem;height:2.15rem;border-radius:50%;border:0;display:grid;place-items:center;cursor:pointer;color:#fff;flex:0 0 auto}
.call-min-fab svg{width:1.15rem;height:1.15rem}
.call-min-fab.expand{background:rgba(255,255,255,.18)}
.call-min-fab.hangup{background:#ef4444}
.call-min-fab.hangup svg{transform:rotate(135deg)}
.call-min-fab:active{transform:scale(.92)}
/* Call-Event-Pille im Chat-Verlauf (zentriert, klickbar = zurückrufen). */
.call-event{align-self:center;margin:.2rem 0;display:flex;align-items:center;justify-content:center}
.ce-pill{display:inline-flex;align-items:center;gap:.45rem;background:var(--panel2);border:1px solid var(--line);color:var(--muted);
  border-radius:999px;padding:.3rem .8rem;font:inherit;font-size:.8rem;cursor:pointer}
.ce-pill:hover{border-color:#22c55e;color:var(--ink)}
.ce-pill svg{width:.95rem;height:.95rem;color:#22c55e}
.ce-pill.missed svg{color:#ef4444}
.ce-time{font-size:.7rem;opacity:.7}
/* ── Gruppenanrufe (25.09.2026): Kachelraster, Kostenzeile, Einladen ── */
.head-gruppenruf{display:flex;align-items:center}
.head-gruppenruf[hidden]{display:none}
.head-join{display:inline-flex;align-items:center;gap:.35rem;background:#16a34a;color:#fff;border:0;border-radius:999px;padding:.3rem .75rem;font:inherit;font-size:.82rem;font-weight:600;cursor:pointer}
.head-join .ic{width:1rem;height:1rem}
.gr-ov{position:fixed;inset:0;z-index:80;background:#0b0b0e;color:#f4f4f5;display:flex;flex-direction:column;
  padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}
.gr-ov[hidden]{display:none}
.gr-kopf{display:flex;align-items:center;gap:.6rem;padding:.6rem .8rem .3rem;flex:0 0 auto}
.gr-titel{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.gr-titel b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gr-titel small{color:#a1a1aa;font-variant-numeric:tabular-nums}
.gr-knopf{width:2.4rem;height:2.4rem;border-radius:50%;border:0;background:rgba(255,255,255,.1);color:#fff;display:grid;place-items:center;cursor:pointer;flex:0 0 auto;padding:0}
.gr-knopf .ic{width:1.3rem;height:1.3rem}
.gr-knopf.aus{background:#f4f4f5;color:#18181b}
.gr-knopf.rot{background:#ef4444}
.gr-knopf.rot .ic{transform:rotate(135deg)}
.gr-knopf.gold{color:#F2A93B}
.gr-knopf.gold.an{background:#F2A93B;color:#18181b}
.gr-raster{flex:1;min-height:0;display:grid;gap:6px;padding:4px;overflow-y:auto;align-content:center;justify-content:center}
.gr-kachel{position:relative;background:#18181b;border-radius:.7rem;overflow:hidden;aspect-ratio:16/9;display:grid;place-items:center;outline:2px solid transparent;outline-offset:-2px;transition:outline-color .2s}
.gr-kachel.spricht{outline-color:#22c55e}
.gr-raster.hoch .gr-kachel{aspect-ratio:3/4}
.gr-av{display:grid;place-items:center}
.gr-kachel video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.gr-kachel video[hidden]{display:none}
.gr-kachel.ich video{transform:scaleX(-1)}
.gr-name{position:absolute;left:.4rem;bottom:.35rem;font-size:.76rem;background:rgba(0,0,0,.58);padding:.12rem .5rem;border-radius:999px;display:flex;align-items:center;gap:.25rem;max-width:calc(100% - .8rem);white-space:nowrap;overflow:hidden}
.gr-name .ic{width:.85rem;height:.85rem;flex:0 0 auto;color:#f87171}
.gr-name .ic.gr-krone{color:#F2A93B}
.gr-kosten{display:flex;align-items:center;justify-content:center;gap:.55rem;flex-wrap:wrap;padding:.25rem .8rem;font-size:.85rem;color:#d4d4d8;min-height:2rem;font-variant-numeric:tabular-nums}
.gr-kosten button{font:inherit;font-size:.8rem;border-radius:999px;border:1px solid rgba(255,255,255,.28);background:none;color:#fff;padding:.22rem .75rem;cursor:pointer}
.gr-kosten button.voll{background:#F2A93B;border-color:#F2A93B;color:#18181b;font-weight:600}
.gr-einlader{display:inline-flex;align-items:center;gap:.3rem;color:#F2A93B;font-weight:600}
.gr-einlader .ic{width:1rem;height:1rem}
.gr-unten{display:flex;justify-content:center;gap:1rem;padding:.5rem .8rem 1rem;flex:0 0 auto}
.gr-unten .gr-knopf{width:3.1rem;height:3.1rem}
.gr-unten .gr-knopf .ic{width:1.5rem;height:1.5rem}
.gr-pille{position:fixed;right:1rem;bottom:calc(5rem + env(safe-area-inset-bottom));z-index:79;display:flex;align-items:center;gap:.5rem;background:#16a34a;color:#fff;border:0;border-radius:999px;padding:.55rem 1rem;font:inherit;font-weight:600;cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.35);font-variant-numeric:tabular-nums}
.gr-pille[hidden]{display:none}
.gr-pille .ic{width:1.1rem;height:1.1rem}
.gr-ruf{position:fixed;left:50%;top:calc(1rem + env(safe-area-inset-top));transform:translateX(-50%);z-index:90;background:#18181b;color:#f4f4f5;border:1px solid rgba(255,255,255,.12);border-radius:1rem;padding:.75rem .9rem;display:flex;align-items:center;gap:.75rem;box-shadow:0 10px 30px rgba(0,0,0,.45);width:min(27rem,calc(100% - 2rem));box-sizing:border-box}
.gr-ruf-text{flex:1;min-width:0;font-size:.88rem;display:flex;flex-direction:column}
.gr-ruf-text b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gr-ruf button{font:inherit;font-size:.85rem;border:0;border-radius:999px;padding:.45rem .85rem;cursor:pointer;font-weight:600;flex:0 0 auto}
.gr-ruf .ja{background:#22c55e;color:#fff}
.gr-ruf .nein{background:rgba(255,255,255,.1);color:#fff}
.gr-modal p{margin:.45rem 0;line-height:1.45}
/* Feedback-Dialog (30.09.2026); Feld mit 16 px, sonst zoomt iOS beim Tippen. */
.fb-wahl{display:flex;gap:.4rem;flex-wrap:wrap;margin:.2rem 0 .6rem}
.fb-art{font:inherit;font-size:.85rem;border:1px solid var(--line);background:var(--panel2);color:var(--ink);border-radius:999px;padding:.32rem .85rem;cursor:pointer}
.fb-art.an{border-color:var(--accent);color:var(--accent);font-weight:600}
.ki-zust-liste{margin:.4rem 0 .6rem 1.1rem;padding:0;line-height:1.5}
.ki-zust-link{display:inline-block;font-size:.82rem;color:var(--muted);margin:.2rem 0 .6rem}
.melde-mit{display:flex;gap:.4rem;align-items:flex-start;font-size:.82rem;color:var(--muted);margin:.4rem 0}
.accept-melden{display:block;margin:.5rem auto 0;font-size:.82rem;color:var(--muted)}
.gate-ab16{display:flex;gap:.5rem;align-items:flex-start;text-align:left;font-size:.85rem;color:var(--muted);margin:.2rem 0 .6rem;cursor:pointer}
.gate-ab16 input{width:auto;margin:.15rem 0 0;flex:none}
.mod-kopf{display:flex;justify-content:flex-end}
.mod-karte{border:1px solid var(--line);border-radius:.8rem;padding:.7rem .8rem;margin:.6rem 0;display:flex;flex-direction:column;gap:.35rem}
.mod-titel{font-weight:700;font-size:.9rem}
.mod-zeile{font-size:.85rem;white-space:pre-wrap;overflow-wrap:anywhere}
.mod-medium{max-width:100%;max-height:50vh;border-radius:.6rem}
.fb-text{width:100%;box-sizing:border-box;font:inherit;font-size:16px;line-height:1.45;background:var(--panel2);color:var(--ink);border:1px solid var(--line);border-radius:.7rem;padding:.6rem .7rem;resize:vertical;min-height:7.5rem}
.fb-text:focus{outline:2px solid var(--accent);outline-offset:-1px}
.fb-hinweis{display:block;color:var(--muted);font-size:.8rem;margin:.45rem 0 .2rem;line-height:1.4}
.fb-akt{display:flex;justify-content:flex-end;margin-top:.6rem}
.gr-modal .gr-preis{font-size:1.2rem;font-weight:700;color:var(--ink)}
.gr-modal .gr-klein{font-size:.86rem;color:var(--muted)}
.gr-wahl{display:flex;gap:.4rem;flex-wrap:wrap;margin:.3rem 0 .5rem}
.gr-wahl button{font:inherit;font-size:.85rem;border:1px solid var(--line);background:var(--panel2);color:var(--ink);border-radius:999px;padding:.3rem .8rem;cursor:pointer}
.gr-wahl button.an{border-color:var(--accent);color:var(--accent);font-weight:600}
.gr-aktionen{display:flex;gap:.5rem;justify-content:flex-end;margin-top:.9rem}
.gr-aktionen button{font:inherit;border-radius:.6rem;padding:.55rem 1rem;cursor:pointer;border:1px solid var(--line);background:none;color:var(--ink)}
.gr-aktionen .gr-ja{background:var(--accent);border-color:var(--accent);color:#18181b;font-weight:600}
.gr-aktionen .gr-ja:disabled{opacity:.6}
.ruf-ki{margin-top:.45rem;display:inline-flex;align-items:center;gap:.4rem;background:var(--panel2);border:1px solid color-mix(in srgb,var(--ruf) 40%,transparent);color:var(--ink);border-radius:.6rem;padding:.42rem .8rem;font:inherit;font-size:.82rem;font-weight:600;cursor:pointer}
.ruf-ki:hover{border-color:var(--me)}
.ruf-ki.on{border-color:var(--me);color:var(--me)}
.ruf-panel[hidden]{display:none}
.ruf-panel{margin-top:.5rem;border-top:1px solid var(--line);padding-top:.5rem;display:flex;flex-direction:column;gap:.45rem}
.ruf-roh{margin-top:.6rem;font-size:.82rem;color:var(--muted)}
.ruf-roh summary{cursor:pointer;font-weight:600}
.ruf-zeile{margin:.35rem 0 0;line-height:1.5}
/* Beide Aufnahmen EINES Anrufs stehen im selben Rahmen — links die eine Stimme,
   rechts die andere, jede in ihrer Farbe. Unten drunter der eine Knopf fuer das
   ganze Gespraech (Hennys Wunsch 20.09.). */
.ruf-box{align-self:stretch;display:flex;flex-direction:column;gap:.35rem;margin:.6rem 0;padding:.5rem .6rem .55rem;
  border:1.5px solid color-mix(in srgb,var(--ruf) 50%,transparent);border-radius:1rem;
  background:color-mix(in srgb,var(--ruf) 9%,transparent)}
.ruf-kopf{align-self:center;font-size:.7rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:color-mix(in srgb,var(--ruf) 78%,var(--ink))}
/* Name ueber der Aufnahme: klein, ruhig, eine Zeile. */
.memo-kopf{font-size:.74rem;font-weight:700;opacity:.75;margin-bottom:.3rem;letter-spacing:.01em}
/* Datum in der Anruf-Zeile (die Ueberschrift des Rahmens). */
.ce-date{font-size:.7rem;opacity:.65;font-variant-numeric:tabular-nums}
/* Beschriftung neben der Hive-Wabe. */
.kx{min-width:0}
.ruf-box>.bubble{max-width:88%}
.ruf-fuss{width:100%;display:flex;justify-content:center;margin-top:.2rem;padding-top:.45rem;
  border-top:1px solid color-mix(in srgb,var(--ruf) 30%,transparent)}
.ruf-fuss .ruf-ki{margin-top:0}
.ruf-box .ruf-panel{border-top:0;padding-top:0}
/* Knopf je Aufnahme: steht IN der Blase, also in der Farbe des Sprechers. */
.ruf-txt{margin-top:.45rem;display:inline-flex;align-items:center;gap:.38rem;border:1px solid rgba(127,127,127,.4);
  background:rgba(127,127,127,.14);color:inherit;border-radius:.5rem;padding:.3rem .6rem;font:inherit;font-size:.78rem;font-weight:600;cursor:pointer;text-align:left}
.ruf-txt .ic,.ruf-ki .ic,.ai-act .ic{width:.95rem;height:.95rem;flex:0 0 auto}
.ruf-txt:hover{border-color:currentColor}
.ruf-txt:disabled{opacity:.6;cursor:default}
.bubble.mine .ruf-txt{border-color:color-mix(in srgb,var(--me-ink) 35%,transparent);background:color-mix(in srgb,var(--me-ink) 14%,transparent)}
.ruf-text{margin-top:.4rem;padding-top:.4rem;border-top:1px solid rgba(127,127,127,.3);font-size:.85rem;line-height:1.5;white-space:pre-wrap}
.bubble.mine .ruf-text{border-top-color:color-mix(in srgb,var(--me-ink) 30%,transparent)}
/* Das X sitzt neben der Pille und wird erst beim Darueberfahren deutlich —
   auf dem Handy ist es immer sichtbar, dort gibt es kein Darueberfahren. */
.ce-x{margin-left:.35rem;background:none;border:0;color:var(--muted);cursor:pointer;font-size:.9rem;line-height:1;padding:.25rem;border-radius:.4rem;opacity:.45}
.ce-x:hover{opacity:1;color:#ef4444;background:var(--panel2)}
@media (hover:none){.ce-x{opacity:.8}}
/* Henny OS Pro — Abschnitt im Einstellungen-Modal (token-basiert → hell+dunkel). */
.pro-sec{margin-top:.9rem;border-top:1px solid var(--line);padding-top:.9rem}
.pro-sec .pro-head{display:flex;align-items:center;gap:.5rem;font-weight:700;font-size:1rem}
.pro-sec .pro-head .pro-ok{color:var(--honey);font-size:.8rem;font-weight:800}
.pro-sec .pro-desc{margin:.45rem 0 .7rem;color:var(--muted);font-size:.85rem;line-height:1.45}
.pro-sec .pro-btn{width:100%;background:var(--honey-grad);border:0;color:var(--honey-ink);box-shadow:var(--honey-glow);border-radius:.6rem;padding:.65rem;font:inherit;font-weight:800;cursor:pointer}
.pro-sec .pro-btn:disabled{opacity:.7;cursor:default}
.pro-sec .pro-manage{width:100%;margin-top:.2rem;background:var(--panel2);border:1px solid var(--line);color:var(--ink);border-radius:.6rem;padding:.6rem;font:inherit;font-weight:600;cursor:pointer}
.pro-sec .pro-manage:disabled{opacity:.7;cursor:default}
/* Pläne & Preise — Karten: mobil untereinander, Desktop nebeneinander. */
.plans-icon .ic{color:var(--honey)}
.plans{display:flex;flex-direction:column;gap:.7rem}
.plans-lead{font-size:.86rem;line-height:1.5;color:var(--muted);margin:0}
/* Credit-Symbol (Wabe + Punkt) inline neben Zahlen. */
.cr-sym{width:.95em;height:.95em;color:var(--honey);vertical-align:-.12em;margin-left:.1em}
/* Guthaben-Zeile: Betrag + Symbol + „?"-Tooltip + „Credits aufladen". */
.plans-bal{display:flex;align-items:center;gap:.5rem;background:var(--panel2);border:1px solid var(--line);border-radius:.8rem;padding:.6rem .8rem}
.pb-amt{display:flex;flex-direction:column;line-height:1.15}
.pb-lblrow{display:flex;align-items:center;gap:.3rem}
.pb-lbl{font-size:.68rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.pb-lblrow .info-dot{width:1rem;height:1rem;font-size:.62rem}
.pb-val{font-size:1.15rem;font-weight:800;color:var(--ink);display:flex;align-items:center}.pb-val b{color:var(--ink)}
.pb-val .cr-sym{margin-left:.15rem}
/* Quick-Buy: Credit-Packs (echter Stripe-Checkout, sofort gutgeschrieben). */
.plans-topup{margin:.7rem 0 .2rem}
.plans-topup .pt-h{font-size:.72rem;font-weight:700;color:var(--muted);margin-bottom:.4rem}
.pt-packs{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
.pt-pack{display:flex;flex-direction:column;align-items:center;gap:.15rem;background:color-mix(in srgb,var(--honey) 10%,var(--panel2));border:1px solid color-mix(in srgb,var(--honey) 40%,var(--line));border-radius:.7rem;padding:.6rem .3rem;font:inherit;color:var(--ink);cursor:pointer;transition:border-color .15s,transform .08s}
.pt-pack:hover{border-color:var(--honey)}
.pt-pack:active{transform:scale(.97)}
.pt-pack:disabled{opacity:.6;cursor:default}
.pt-pack .pt-n{font-weight:800;font-size:.9rem;display:inline-flex;align-items:center}
.pt-pack .pt-n .cr-sym{color:var(--honey)}
.pt-pack .pt-p{font-size:.78rem;color:var(--muted);font-weight:700}
/* „?"-Info-Punkt + Popover. */
.info-dot{flex:0 0 auto;width:1.15rem;height:1.15rem;border-radius:50%;border:1px solid var(--line2, var(--line));background:var(--panel);color:var(--muted);font:inherit;font-size:.72rem;font-weight:800;cursor:pointer;line-height:1;padding:0;display:inline-grid;place-items:center;vertical-align:middle}
.info-dot:hover{color:var(--honey);border-color:var(--honey)}
.info-ov{position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.55);display:grid;place-items:center;padding:1.3rem}
.info-box{background:var(--panel);border:1px solid var(--line);border-radius:.9rem;max-width:23rem;width:100%;padding:.9rem 1rem;box-shadow:0 20px 50px rgba(0,0,0,.5)}
.info-head{display:flex;align-items:center;gap:.5rem;margin-bottom:.35rem}
.info-title{font-weight:800;color:var(--ink);flex:1}
.info-x{background:none;border:0;color:var(--muted);font-size:1.3rem;line-height:1;cursor:pointer;padding:0 .1rem}
.info-text{font-size:.85rem;line-height:1.55;color:var(--muted);margin:0}
.pcards{display:flex;flex-direction:column;gap:.8rem;margin:.2rem 0}
@media(min-width:760px){.pcards.pcards-4{display:grid;grid-template-columns:repeat(4,1fr)}}
/* Knoepfe aller Karten auf einer Linie, auch wenn eine Karte weniger Zeilen hat */
.pcards-4 .pcard-cta{margin-top:auto}
.pb-teile{font-size:.72rem;color:var(--muted);margin-top:.15rem}
.plans-abo{font-size:.82rem;color:var(--ink);margin:0}
.pb-link{background:none;border:0;padding:0;margin-top:.1rem;min-height:2.75rem;display:inline-flex;align-items:center;align-self:flex-start;color:var(--me);font:inherit;font-size:.82rem;font-weight:600;cursor:pointer;text-align:left}
.pb-link:hover{text-decoration:underline}
:root.light .pb-link{color:#7a4f0a}
.gv{display:flex;flex-direction:column;gap:.5rem}
.gv-naechst{font-size:.8rem;color:var(--muted);line-height:1.45;margin:0}
.gv-liste{display:flex;flex-direction:column}
.gv-tag{font-size:.68rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;padding:.8rem 0 .3rem;border-bottom:1px solid var(--line)}
.gv-z{display:flex;justify-content:space-between;align-items:flex-start;gap:.8rem;padding:.55rem 0;border-bottom:1px solid var(--line)}
.gv-l{min-width:0}
.gv-t{font-size:.9rem;color:var(--ink);overflow-wrap:anywhere}
.gv-r{text-align:right;flex-shrink:0}
.gv-b{font-size:.95rem;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.gv-b.plus{color:var(--ruf)}
.gv-s{font-size:.72rem;color:var(--muted);margin-top:.1rem;font-variant-numeric:tabular-nums}
.gv-mehr{margin:.6rem auto 0;min-height:2.75rem;padding:0 1.2rem;border-radius:.7rem;border:1px solid var(--line);background:var(--panel2);color:var(--ink);font:inherit;font-weight:600;cursor:pointer}
.gv-mehr[hidden]{display:none}
.gv-mehr:disabled{opacity:.6;cursor:default}
.plans-int{display:flex;gap:.3rem;background:var(--panel2);border:1px solid var(--line);border-radius:99px;padding:.25rem;align-self:flex-start}
.plans-int-b{border:0;background:none;color:var(--muted);font:inherit;font-weight:700;font-size:.82rem;padding:.45rem .8rem;border-radius:99px;cursor:pointer}
.plans-int-b.on{background:var(--honey-grad);color:var(--honey-ink)}
.pcard-lines li.bald{color:var(--muted)}
.pcard-lines li.bald .ic{color:var(--muted)}
.pl-bald{font-size:.62rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;border:1px solid var(--line);border-radius:.3rem;padding:.05rem .3rem;margin-left:.3rem;color:var(--muted);white-space:nowrap}
@media(min-width:760px){.pcards{flex-direction:row;align-items:stretch}}
.pcard{position:relative;flex:1;min-width:0;background:var(--panel2);border:1px solid var(--line);border-radius:1rem;padding:1rem .95rem;display:flex;flex-direction:column;gap:.5rem}
.pcard.feat{border-color:var(--honey);box-shadow:var(--honey-glow)}
.pcard-badge{position:absolute;top:-.65rem;left:.9rem;font-size:.58rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;background:var(--honey-grad);color:var(--honey-ink);border-radius:.35rem;padding:.15rem .45rem}
.pcard-name{font-weight:800;font-size:1.1rem;color:var(--ink)}
.pcard-price{font-weight:800;font-size:1.6rem;color:var(--honey);line-height:1}
.pcard-price span{font-size:.8rem;font-weight:600;color:var(--muted)}
.pcard-store{font-size:.68rem;color:var(--muted);margin-top:-.2rem}
/* Ersparnis-Zeile: durchgestrichener Einzelpreis + „du sparst …". */
.pcard-save{display:flex;flex-wrap:wrap;align-items:baseline;gap:.3rem .5rem;font-size:.74rem;margin-top:.1rem}
.pcard-save .ps-strike{color:var(--muted);text-decoration:line-through}
.pcard-save .ps-save{color:#22c55e;font-weight:800}
/* „Damit machst du z. B." — Leitpunkte + Use-Case. */
.pcard-guide{background:var(--panel);border:1px solid var(--line);border-radius:.6rem;padding:.5rem .6rem;display:flex;flex-direction:column;gap:.2rem}
.pcard-guide .pg-h{font-size:.6rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:800}
.pcard-guide .pg-l{font-size:.82rem;font-weight:700;color:var(--ink)}
.pcard-guide .pg-ex{font-size:.75rem;line-height:1.4;color:var(--muted);font-style:italic}
.pcard-lines{list-style:none;margin:.3rem 0;padding:0;display:flex;flex-direction:column;gap:.35rem}
.pcard-lines li{display:flex;align-items:flex-start;gap:.4rem;font-size:.85rem;line-height:1.35;color:var(--ink)}
.pcard-lines li .ic{width:1rem;height:1rem;flex:0 0 auto;color:#22c55e;margin-top:.12rem}
.pcard-models{font-size:.78rem;border-top:1px solid var(--line);padding-top:.5rem;margin-top:auto}
.pcard-models summary{cursor:pointer;color:var(--honey);font-weight:700;list-style:none}
.pcard-models summary::-webkit-details-marker{display:none}
.pl-t{flex:1}
.pcm-grp{font-family:var(--fmono,ui-monospace);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--honey);margin:.5rem 0 .2rem}
.pcm-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.28rem}
.pcm-list li{display:flex;align-items:center;gap:.4rem;color:var(--ink);font-size:.8rem}
.pcm-n{flex:1;min-width:0}
.pcm-c{color:var(--muted);font-variant-numeric:tabular-nums;display:inline-flex;align-items:center;white-space:nowrap}
.pcard-cta{margin-top:.5rem;width:100%;border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:.65rem;padding:.6rem;font:inherit;font-weight:800;cursor:pointer}
.pcard-cta.gold{background:var(--honey-grad);color:var(--honey-ink);border:0;box-shadow:var(--honey-glow)}
.pcard-cta.cur{opacity:.7;cursor:default;font-weight:600}
.plans-vision{border-top:1px solid var(--line);padding-top:.7rem;margin-top:.3rem}
.plans-vision h4{margin:0 0 .5rem;font-size:.95rem;color:var(--ink)}
.pv-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.35rem}
.pv-list li{display:flex;align-items:flex-start;gap:.45rem;font-size:.85rem;line-height:1.4;color:var(--ink)}
.pv-list li .ic{width:1rem;height:1rem;flex:0 0 auto;color:var(--honey);margin-top:.12rem}
.pv-note{font-size:.8rem;color:var(--muted);line-height:1.5;margin:.6rem 0 0}
.plans-foot{font-size:.76rem;color:var(--muted);line-height:1.5;margin-top:.3rem}
/* Desktop: breite Modals (Pläne/Farben etc.) füllen mehr vom Chat statt Mobile-Schmalheit. */
@media(min-width:760px){
  .modal{max-width:42rem}
  .modal.wide{max-width:min(64rem,94vw)}
}
.chat-head .name{cursor:pointer}
.chat-head .name:hover{text-decoration:underline}

/* Medien-Versand: Anhängen-Button + Bild-/Datei-Bubbles + Lightbox + PDF-Preview. */
.bubble.media .bubble-body{--bubble-pad-r:.25rem;padding:.25rem}
.bubble.media .cap{padding:.35rem .5rem .1rem;white-space:pre-wrap;overflow-wrap:anywhere}
/* Bild und Video geben die Breite vor, der Text darunter folgt ihr.
   "width:0" zusammen mit "min-width:100%" ist der Kniff: so zaehlt der Text beim Ausmessen der
   Blase gar nicht mit, bekommt danach aber genau deren Breite. Ohne ihn macht
   eine lange Bildunterschrift die Blase breit und das Bild klebt links. */
.bubble.media.mrat .bubble-body{width:max-content;max-width:100%}
.bubble.media.mrat .bubble-body>*{width:0;min-width:100%;box-sizing:border-box}
.bubble.media.mrat .bubble-body>img,.bubble.media.mrat .bubble-body>video{min-width:0}
.msg-img{max-width:100%;width:auto;height:auto;border-radius:.7rem;display:block;cursor:zoom-in;background:var(--panel2)}
.file-card{display:flex;align-items:center;gap:.6rem;padding:.5rem .55rem;min-width:11rem;max-width:17rem;cursor:pointer;border-radius:.6rem}
.file-card:hover{background:rgba(255,255,255,.06)}
.file-card .fc-ic{font-size:1.6rem;flex:0 0 auto;line-height:1}
.file-card .fc-meta{min-width:0}
.file-card .fc-name{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.file-card .fc-sub{font-size:.78rem;color:var(--muted)}
.bubble.mine .file-card .fc-name{color:var(--me-ink)}
.bubble.mine .file-card .fc-sub{color:color-mix(in srgb,var(--me-ink) 78%,transparent)}
/* Geteilter Waveform-Player (Aufnahme-Vorschau UND empfangene/gesendete Chat-Bubbles):
   Play/Pause + klickbare Waveform + Dauer + Speed-Buttons-Reihe. Token-/dark-tauglich. */
/* Player = ZWEI saubere Zeilen: oben [▶ · Waveform · Zeit], unten die Speed-Reihe auf
   voller Breite (kein gequetschtes time|speed-Nebeneinander mehr → kein Umbruch-Chaos). */
.wf-player{display:flex;flex-direction:column;gap:.4rem;min-width:0;width:100%}
.wf-player audio:not(.wf-fallback){display:none}
.wf-row{display:flex;align-items:center;gap:.55rem;min-width:0;width:100%}
.wf-play{flex:0 0 auto;width:2.1rem;height:2.1rem;border-radius:50%;border:0;cursor:pointer;background:var(--panel2);color:var(--ink);font-size:.95rem;display:grid;place-items:center;line-height:1}
.bubble.mine .wf-play{background:color-mix(in srgb,var(--me-ink) 22%,transparent);color:var(--me-ink)}
.wf-wave{flex:1;position:relative;height:2rem;display:flex;align-items:center;gap:2px;cursor:pointer;overflow:hidden;min-width:0}
.wf-wave .wbar{flex:1 1 0;min-width:1px;border-radius:999px;background:rgba(127,127,127,.4);transition:background .05s linear}
.wf-wave .wbar.on{background:var(--me)}
.bubble.mine .wf-wave .wbar{background:color-mix(in srgb,var(--me-ink) 35%,transparent)}
.bubble.mine .wf-wave .wbar.on{background:var(--me-ink)}
.wf-fallback{width:100%}
.wf-time{font-size:.7rem;color:var(--muted);font-variant-numeric:tabular-nums;flex:0 0 auto}
.bubble.mine .wf-time{color:color-mix(in srgb,var(--me-ink) 78%,transparent)}
/* In der Chat-Bubble ist der Player kompakter (sitzt in der schmalen Audio-Bubble).
   KEIN harter min-width mehr: die alte min-width:13rem floorte die Bubble-Breite
   → auf schmalen Phones sprengte die eigene (rechte) Audio-Bubble den 78%-Cap, der
   Player lief raus UND das ganze Chat-Fenster wurde horizontal swipebar. Stattdessen
   eine bevorzugte Breite via clamp, die unter dem Bubble-Cap nachgeben darf. */
.audio-msg{display:block;width:clamp(12.5rem,62vw,18rem);min-width:0;max-width:100%;padding:.4rem .5rem}
.audio-msg .wf-player{min-width:0;max-width:100%}
/* Abspiel-Geschwindigkeit: mehrere Buttons NEBENEINANDER (1×…4×), aktiver hervorgehoben.
   Geteilt für Chat-Bubble + Vorschau. Token-basiert, gut tappbar. */
.speed-row{display:flex;flex-wrap:wrap;gap:.25rem;width:100%;min-width:0}
.speed-btn{flex:0 0 auto;min-width:2.1rem;height:1.6rem;padding:0 .4rem;border-radius:999px;border:1px solid var(--line);
  background:var(--panel2);color:var(--muted);font:inherit;font-size:.7rem;font-weight:700;font-variant-numeric:tabular-nums;
  cursor:pointer;line-height:1;display:inline-flex;align-items:center;justify-content:center}
.speed-btn.on{color:var(--ink);border-color:var(--me);background:color-mix(in srgb,var(--me) 14%,var(--panel2))}
.au-speed .speed-btn{height:1.5rem;min-width:1.9rem;font-size:.66rem}
.bubble.mine .speed-btn{background:color-mix(in srgb,var(--me-ink) 16%,transparent);border-color:color-mix(in srgb,var(--me-ink) 32%,transparent);color:color-mix(in srgb,var(--me-ink) 78%,transparent)}
.bubble.mine .speed-btn.on{color:var(--me-ink);border-color:var(--me-ink);background:color-mix(in srgb,var(--me-ink) 32%,transparent)}
/* Download-Icon-Knopf in der Speed-Reihe (rechts neben 4×). */
.speed-btn.dl-btn{padding:0 .45rem;margin-inline-start:.15rem}
.speed-btn.dl-btn .ic{width:1rem;height:1rem;display:block}
/* Standort-Bubble: Pin im Titel + Maps-Buttons + benannte Koordinaten. Kein großes
   Mini-Karten-Icon mehr (redundant) → kompakter, kein Overflow auf Mobile. */
.bubble.loc .bubble-body{--bubble-pad-r:.55rem;padding:.4rem .55rem}
.loc-card{display:flex;min-width:12rem;max-width:20rem}
.loc-meta{min-width:0;flex:1;display:flex;flex-direction:column;gap:.4rem}
.loc-title{font-weight:600}
/* Maps-Buttons: 2er-Grid, kompakt + gut antippbar, kein Überlaufen. Icon + Label. */
.loc-links{display:grid;grid-template-columns:1fr 1fr;gap:.35rem;margin-top:.1rem}
.loc-link{display:flex;align-items:center;justify-content:center;gap:.25rem;min-height:2.1rem;min-width:0;
  padding:.35rem .4rem;border-radius:.5rem;background:var(--panel2);border:1px solid var(--line);
  color:var(--ink);text-decoration:none;font-size:.76rem;font-weight:600;line-height:1.1;text-align:center;cursor:pointer}
.loc-link:hover{border-color:var(--me)}
.loc-link .loc-link-ic{flex:0 0 auto;font-size:.85rem;line-height:1}
.loc-link .loc-link-tx{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bubble.mine .loc-link{background:color-mix(in srgb,var(--me-ink) 16%,transparent);border-color:color-mix(in srgb,var(--me-ink) 28%,transparent);color:var(--me-ink)}
.bubble.mine .loc-link:hover{border-color:var(--me-ink)}
.loc-coords{font-size:.72rem;color:var(--muted);font-variant-numeric:tabular-nums;display:flex;align-items:center;flex-wrap:wrap;gap:.2rem .3rem}
.loc-coords-lbl{font-variant-numeric:normal;font-weight:600}
.loc-coords .tip{width:1rem;height:1rem;font-size:.62rem}
.bubble.mine .loc-coords{color:color-mix(in srgb,var(--me-ink) 78%,transparent)}
.bubble.mine .loc-coords .tip{border-color:color-mix(in srgb,var(--me-ink) 50%,transparent);color:color-mix(in srgb,var(--me-ink) 78%,transparent)}
.bubble.mine .loc-coords .tip:hover{color:var(--me-ink);border-color:var(--me-ink)}
/* Aufnahme-Leiste im Composer (ersetzt optisch Texteingabe/Buttons beim Aufnehmen). */
.composer.recording > .comp-input-row,.composer.recording > .comp-tools-row,.composer.recording > .comp-fmt,.composer.recording > .comp-sheet{display:none}
.rec-bar{flex:1;display:flex;align-items:center;gap:.55rem;background:var(--panel2);border:1px solid var(--line);border-radius:1rem;padding:.45rem .6rem;min-height:2.5rem;min-width:0}
.rec-dot{width:.7rem;height:.7rem;border-radius:50%;background:#ef4444;flex:0 0 auto;animation:recpulse 1.1s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.rec-dot{animation:none}}
@keyframes recpulse{0%,100%{opacity:1}50%{opacity:.3}}
.rec-timer{font-variant-numeric:tabular-nums;color:var(--ink);font-size:.85rem;flex:0 0 auto}
/* Live-Waveform während der Aufnahme: Balken laufen nach links durch. */
.rec-live{flex:1;min-width:0;height:1.6rem;display:flex;align-items:center;justify-content:flex-end;gap:2px;overflow:hidden}
.rec-live .lbar{width:3px;flex:0 0 auto;border-radius:999px;background:var(--me);min-height:2px;opacity:.85}
/* Aufnahme-Buttons: alle gleich groß + gut tappbar. Pause blau (Icon), ✕ rot, ✓ grün.
   WICHTIG: unter .rec-bar qualifiziert — sonst gewinnt die generischere Regel
   .composer button (background:var(--me), höhere Spezifität) und färbt ✕/✓ blau
   statt rot/grün. So sind die Selektoren stärker als .composer button. */
.rec-bar .rec-cancel,.rec-bar .rec-stop,.rec-bar .rec-pause{flex:0 0 auto;width:2.4rem;height:2.4rem;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;font-size:1.05rem;line-height:1;color:#fff}
.rec-bar .rec-cancel{background:#ef4444}
.rec-bar .rec-stop{background:#22c55e}
.rec-bar .rec-pause{background:#3b82f6}
/* Pause-Icon (‖) + Resume-Icon (▶) sauber als SVG/CSS statt OS-Emoji (iOS-Smiley-Bug). */
.rec-pause .ic{display:block;width:1rem;height:1rem}
.rec-bar.paused .rec-dot{animation:none;opacity:.45}
.rec-bar.paused .rec-live{opacity:.4}
/* Sprachmemo-Vorschau (vor dem Senden) — lebt im geteilten modal(). Nutzt denselben
   .wf-player wie die Chat-Bubbles; hier in eine Karte gefasst + etwas größer. */
.amp{display:flex;flex-direction:column;gap:.9rem}
.amp .wf-player{background:var(--panel2);border:1px solid var(--line);border-radius:.8rem;padding:.6rem .7rem;gap:.7rem}
.amp .wf-play{width:2.5rem;height:2.5rem;background:var(--me);color:var(--me-ink);font-size:1.05rem}
.amp .wf-wave{height:2.4rem}
.amp .wf-time{font-size:.74rem}
.amp-actions{display:flex;flex-wrap:wrap;gap:.5rem}
.amp-actions button{flex:1 1 auto;border:1px solid var(--line);border-radius:.6rem;padding:.55rem .7rem;font:inherit;cursor:pointer;background:var(--panel2);color:var(--ink);font-weight:600}
.amp-actions .amp-send{background:var(--me);color:var(--me-ink);border-color:transparent;flex:1 1 100%}
.amp-actions .amp-discard{color:#ef4444}
/* Inline-Abfrage „Aktuelle Memo speichern?" (ersetzt temporär die Aktionen). */
.amp-ask{display:flex;flex-direction:column;gap:.55rem;background:var(--panel2);border:1px solid var(--line);border-radius:.7rem;padding:.7rem .75rem}
.amp-ask-q{font-size:.88rem;font-weight:600}
.amp-ask-row{display:flex;flex-wrap:wrap;gap:.5rem}
.amp-ask-row button{flex:1 1 auto;border:1px solid var(--line);border-radius:.6rem;padding:.55rem .7rem;font:inherit;cursor:pointer;background:var(--panel);color:var(--ink);font-weight:600}
.amp-ask-row .amp-ask-yes{background:var(--me);color:var(--me-ink);border-color:transparent}
.amp-ask-row .amp-ask-back{flex:0 0 auto;color:var(--muted)}
/* Bild-Lightbox (eigenes Overlay, dunkel, über allem). */
.lb-ov{position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.93);display:grid;place-items:center;padding:1rem}
.lb-img{max-width:96vw;max-height:84vh;object-fit:contain;border-radius:.3rem}
.lb-x{position:absolute;top:.6rem;right:1rem;background:none;border:0;color:#fff;font-size:2.2rem;line-height:1;cursor:pointer}
.lb-dl{position:absolute;bottom:1.2rem;left:50%;transform:translateX(-50%);background:rgba(255,255,255,.16);color:#fff;text-decoration:none;border:0;cursor:pointer;font:inherit;padding:.5rem 1.1rem;border-radius:999px;font-size:.85rem;backdrop-filter:blur(6px)}
.lb-stage{display:grid;place-items:center;width:100%;height:100%;touch-action:pan-y}
.lb-count{position:absolute;top:1rem;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.85);font-size:.85rem;font-variant-numeric:tabular-nums;pointer-events:none}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:2.9rem;height:2.9rem;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(6px);z-index:2}
.lb-nav:hover{background:rgba(255,255,255,.24)}
.lb-nav .ic{width:1.5rem;height:1.5rem}
.lb-prev{left:.8rem}
.lb-next{right:.8rem}
.lb-next .ic{transform:rotate(180deg)}
@media(max-width:600px){.lb-nav{width:2.5rem;height:2.5rem}.lb-prev{left:.35rem}.lb-next{right:.35rem}}
/* Medien-Kompositions-Ablage (Vorschau vor dem Senden: Karussell · Bildunterschrift · weitere). */
.mc-ov{position:fixed;left:0;top:0;width:100%;height:100%;overflow:hidden;z-index:75;background:var(--bg);display:flex;flex-direction:column;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
.mc-head{display:flex;align-items:center;gap:.6rem;padding:.7rem .9rem;border-bottom:1px solid var(--line)}
.mc-x{background:none;border:0;color:var(--ink);width:2.2rem;height:2.2rem;display:grid;place-items:center;border-radius:.6rem;cursor:pointer;flex:none}
.mc-x .ic{width:1.35rem;height:1.35rem}
.mc-title{font-weight:600;color:var(--ink);font-size:.9rem}
.mc-body{flex:1 1 0;position:relative;min-height:0;overflow:hidden}
/* Bühne füllt die (flex-begrenzte) Body-Höhe ABSOLUT → das Bild ist immer gedeckelt, egal welches
   Seitenverhältnis; kein Aufblähen mehr, das die Bildunterschrift/Leiste wegdrückt. */
.mc-stage{position:absolute;inset:.6rem;display:flex;align-items:center;justify-content:center;touch-action:pan-y}
.mc-img{max-width:100%;max-height:100%;object-fit:contain;border-radius:.5rem}
.mc-file{display:flex;flex-direction:column;align-items:center;gap:.6rem;color:var(--muted)}
.mc-file .ic{width:3rem;height:3rem}
.mc-fn{font-size:.9rem;color:var(--ink);word-break:break-word;max-width:80vw;text-align:center}
.mc-nav{position:absolute;top:50%;transform:translateY(-50%);width:2.7rem;height:2.7rem;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(6px);z-index:2}
.mc-nav:hover{background:rgba(255,255,255,.24)}
.mc-nav .ic{width:1.4rem;height:1.4rem}
.mc-prev{left:.5rem}.mc-next{right:.5rem}.mc-next .ic{transform:rotate(180deg)}
.mc-cap{margin:.5rem .9rem 0;background:var(--panel2);border:1px solid var(--line);border-radius:.9rem;color:var(--ink);padding:.55rem .8rem;resize:none;font:inherit;font-size:.92rem;line-height:1.4;box-sizing:border-box;min-height:2.5rem;flex:0 0 auto;display:block;width:calc(100% - 1.8rem)}
.mc-strip{display:flex;gap:.5rem;overflow-x:auto;padding:.5rem .9rem .1rem;scrollbar-width:none}
.mc-strip::-webkit-scrollbar{display:none}
.mc-thumb{position:relative;flex:0 0 auto;width:3.4rem;height:3.4rem;border-radius:.6rem;overflow:visible;border:2px solid transparent;background:var(--panel2);cursor:pointer;padding:0}
.mc-thumb.on{border-color:var(--honey)}
.mc-thumb img{width:100%;height:100%;object-fit:cover;border-radius:.45rem}
.mc-fx{display:grid;place-items:center;width:100%;height:100%;font-size:1.3rem}
.mc-vbadge{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:#fff;font-size:.75rem;text-shadow:0 1px 3px rgba(0,0,0,.7);pointer-events:none}
.mc-rm{position:absolute;top:-.35rem;right:-.35rem;width:1.2rem;height:1.2rem;border-radius:50%;background:rgba(0,0,0,.72);color:#fff;display:grid;place-items:center;font-size:.85rem;line-height:1}
.mc-foot{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;padding:.6rem .9rem}
.mc-more{display:inline-flex;align-items:center;gap:.35rem;background:var(--panel2);border:1px solid var(--line);color:var(--ink);border-radius:.7rem;padding:.55rem .85rem;font:inherit;font-weight:600;font-size:.85rem;cursor:pointer}
.mc-more .ic{width:1.1rem;height:1.1rem}
.mc-send{margin-left:auto;display:inline-flex;align-items:center;gap:.4rem;background:var(--honey-grad);color:var(--honey-ink);border:0;border-radius:.7rem;padding:.62rem 1.25rem;font:inherit;font-weight:800;font-size:.9rem;cursor:pointer;box-shadow:var(--honey-glow)}
.mc-send .ic{width:1.2rem;height:1.2rem}
.mc-send:disabled{opacity:.5}
/* Icon-Tooltips (Desktop-Hover) — invertierter Chip, erklärt was ein Icon tut. */
.hive-tip{position:fixed;z-index:200;transform:translate(-50%,-100%);background:var(--ink);color:var(--bg);font-size:.74rem;font-weight:600;letter-spacing:.01em;padding:.3rem .55rem;border-radius:.45rem;white-space:nowrap;max-width:60vw;overflow:hidden;text-overflow:ellipsis;pointer-events:none;opacity:0;transition:opacity .12s ease;box-shadow:0 6px 20px rgba(0,0,0,.4)}
.hive-tip.below{transform:translate(-50%,0)}
.hive-tip.show{opacity:.97}
.lb-dl:hover{background:rgba(255,255,255,.28)}
/* PDF-Preview im Modal. */
.pdf-wrap{display:flex;flex-direction:column;gap:.6rem}
.pdf-frame{width:100%;height:68vh;border:1px solid var(--line);border-radius:.5rem;background:#fff}

/* Multi-Box: Kontakt aufklappen, mehrere benannte Chats je Person */
.contact-wrap{display:block}
.conv-wrap{display:block}
.contact-boxes{display:flex;flex-direction:column;gap:.1rem;padding:.1rem 0 .4rem 3rem}
.box-line{display:flex;align-items:center;gap:.5rem;background:none;border:0;color:var(--muted);text-align:left;padding:.35rem .55rem;border-radius:.5rem;font:inherit;width:100%}
.box-line:hover{background:var(--panel2);color:var(--ink)}
.box-line.active{background:var(--panel2);color:var(--ink)}
.box-line .bt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.box-line .badge{flex:0 0 auto}
.box-line .row-cog{flex:0 0 auto;width:1.7rem;height:1.7rem}
.box-line .grip{flex:0 0 auto;display:grid;place-items:center;width:1.4rem;height:1.7rem;margin-inline-start:-.2rem;color:var(--muted);cursor:grab;touch-action:none;opacity:.5}
.box-line .grip:active{cursor:grabbing}
.box-line .grip:hover{opacity:.85}
.box-line .grip .ic{width:1rem;height:1rem;display:block}
.box-line.dragging{opacity:.55;background:var(--panel2)}
.row .chev{color:var(--muted);font-size:1.05rem;line-height:1;flex:0 0 auto;margin-left:.15rem}
.chat-tags{display:inline-flex;align-items:center;gap:.25rem;flex:0 0 auto}
.ctag{display:inline-grid;place-items:center;color:var(--muted)}
.ctag .ic{width:.85rem;height:.85rem;display:block}
.newbox{display:flex;gap:.4rem;padding:.25rem .55rem}
.newbox input{flex:1;min-width:0;background:var(--panel2);border:1px solid var(--line);color:var(--ink);border-radius:.5rem;padding:.4rem .6rem;font:inherit;font-size:.85rem}
.newbox button{background:var(--panel2);border:1px solid var(--line);color:var(--ink);border-radius:.5rem;padding:.4rem .7rem;display:flex;align-items:center;gap:.25rem}
.row .name .bt{color:var(--muted);font-weight:400}
.pro-pill{display:inline-flex;align-items:center;font-size:.6rem;font-weight:800;letter-spacing:.04em;background:var(--honey-grad);color:var(--honey-ink);box-shadow:var(--honey-glow);border-radius:.35rem;padding:.05rem .3rem;vertical-align:middle}
.c-amber{background:#fbbf24}.c-blue{background:#3b82f6}.c-green{background:#22c55e}.c-violet{background:#8b5cf6}.c-rose{background:#f43f5e}.c-cyan{background:#06b6d4}.c-slate{background:#94a3b8}

/* Chat-Header: Box-Titel unter dem Namen + Einstellungs-Menü */
.chat-head .htitle{display:flex;flex-direction:column;min-width:0;flex:1;line-height:1.15}
.chat-head .htitle .name-row{display:flex;align-items:center;gap:.35rem;min-width:0}
.chat-head .htitle .name-row .name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-head .htitle .lock-chip{flex:0 0 auto;font-size:.8rem;line-height:1}
.chat-head .htitle .bt{font-size:.72rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Secret Chat: Banner · verschlüsselte Bubbles */
.secret-banner{display:flex;align-items:center;gap:.5rem;width:100%;border:0;border-bottom:1px solid var(--line);
  background:var(--panel2);color:var(--muted);font-size:.78rem;padding:.5rem .9rem;text-align:left;cursor:pointer}
.secret-banner:hover{color:var(--ink)}
.secret-banner > span:first-child{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.secret-banner .sb-more{flex:0 0 auto;color:var(--accent);font-weight:600}
/* Backup-Nudge in Secret-Chats ohne gesichertes Schlüssel-Backup (verhindert Nachrichtenverlust
   bei Geräteverlust — der ursprüngliche Henny+Kollege-Fall). Wegklickbar; weg, sobald Backup da. */
.e2e-nudge{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .8rem;padding:.6rem .8rem;margin:.45rem .6rem 0;background:rgba(242,169,59,.12);border:1px solid rgba(242,169,59,.4);border-radius:.7rem}
.e2e-nudge .en-txt{display:flex;flex-direction:column;gap:.12rem;flex:1;min-width:11rem}
.e2e-nudge .en-txt strong{color:var(--honey);font-size:.86rem}
.e2e-nudge .en-txt span{color:var(--muted);font-size:.76rem;line-height:1.35}
.e2e-nudge .en-acts{display:flex;gap:.35rem;margin-left:auto}
.e2e-nudge .en-go{background:var(--honey);color:var(--honey-ink);border:0;border-radius:.5rem;padding:.42rem .7rem;font-weight:700;font-size:.79rem;cursor:pointer}
.e2e-nudge .en-later{background:none;border:0;color:var(--muted);font-size:.79rem;cursor:pointer;padding:.42rem .5rem}
/* Lösch-Anfrage-Banner im Chat (vom Peer) — Annehmen/Ablehnen. */
.dr-bar:empty{display:none}
.dr-req{display:flex;flex-direction:column;gap:.5rem;padding:.6rem .8rem;border-bottom:1px solid var(--line);background:color-mix(in srgb,#ef4444 10%,var(--panel2))}
.dr-txt{font-size:.85rem;color:var(--ink);line-height:1.4}
.dr-acts{display:flex;gap:.5rem}
.dr-yes{background:#ef4444;color:#fff;border:0;border-radius:.5rem;padding:.4rem .8rem;font:inherit;font-weight:700;cursor:pointer}
.dr-no{background:var(--panel);border:1px solid var(--line);color:var(--ink);border-radius:.5rem;padding:.4rem .8rem;font:inherit;font-weight:600;cursor:pointer}
.dr-yes:disabled,.dr-no:disabled{opacity:.6;cursor:default}
/* Selbstzerstörung: Box-Menü-Eintrag · Banner (amber, ≠ rotes Lösch-Banner) · Zeit-Input. */
.box-menu .sd-menu{display:flex;align-items:center;width:100%;background:none;border:0;border-top:1px solid var(--line);color:var(--ink);padding:.6rem .1rem;font:inherit;font-weight:600;cursor:pointer;text-align:left}
.box-menu .sd-menu:hover{color:var(--me)}
.sd-banner{display:flex;flex-direction:column;gap:.5rem;padding:.6rem .8rem;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--accent) 16%,var(--panel2))}
.sd-txt{font-size:.85rem;color:var(--ink);line-height:1.4}
.sd-time{width:100%;box-sizing:border-box;background:var(--panel2);border:1px solid var(--line);color:var(--ink);border-radius:.5rem;padding:.5rem .6rem;font:inherit}
.bubble.enc .body.enc-fail{opacity:.7;font-style:italic}
.bubble .t .enc-ic{font-size:.6rem}
.secret-intro p{margin:.5rem 0;line-height:1.5}
.secret-more{margin-top:.6rem;border-top:1px solid var(--line);padding-top:.5rem}
.secret-more summary{cursor:pointer;color:var(--accent);font-weight:600;font-size:.85rem}
.secret-more p{font-size:.85rem;color:var(--muted);margin:.55rem 0}
/* Secret-Chat-Backup-Dialog (Key-Recovery). Token-basiert → hell + dunkel. */
.e2e-bk{display:flex;flex-direction:column;gap:.7rem}
.e2e-lead{font-size:.86rem;line-height:1.5;color:var(--muted);margin:0}
.e2e-status{display:flex;flex-direction:column;gap:.35rem}
.e2e-status small{color:var(--muted);font-size:.8rem;line-height:1.45}
.e2e-muted{color:var(--muted);font-size:.85rem}
.e2e-pill{align-self:flex-start;font-size:.74rem;font-weight:700;border-radius:999px;padding:.2rem .6rem}
.e2e-pill.ok{background:rgba(34,197,94,.16);color:#16a34a}
.e2e-pill.warn{background:rgba(245,158,11,.16);color:#b45309}
:root.light .e2e-pill.ok{color:#15803d}
.e2e-actions{display:flex;flex-direction:column;gap:.5rem;margin-top:.2rem}
.e2e-warn{background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.4);color:var(--ink);border-radius:.6rem;padding:.6rem .7rem;font-size:.82rem;line-height:1.45}
.e2e-field{display:flex;flex-direction:column;gap:.3rem}
.e2e-field label{font-size:.8rem;color:var(--muted)}
.e2e-input{width:100%;box-sizing:border-box;background:var(--panel2);border:1px solid var(--line);color:var(--ink);border-radius:.5rem;padding:.6rem .7rem;font:inherit}
.e2e-code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:1.15rem;font-weight:700;letter-spacing:.06em;text-align:center;
  background:var(--panel2);border:1px dashed var(--accent);color:var(--ink);border-radius:.6rem;padding:.9rem .6rem;user-select:all;word-break:break-all}
.e2e-note{color:var(--muted);font-size:.76rem;line-height:1.4}
.e2e-danger{color:#ef4444}
.e2e-danger-btn{background:#ef4444}
.set-wrap{position:relative}
.set-btn{background:none;border:0;color:var(--muted);cursor:pointer;padding:.2rem .45rem;line-height:1;display:grid;place-items:center}
.set-btn:hover{color:var(--ink)}
.set-btn .ic{width:1.3rem;height:1.3rem;display:block}
/* Alle drei Chat-Header-Icon-Buttons (Zahnrad · Archiv · Glocke) exakt gleich groß. */
.chat-head .set-btn,.chat-head .head-icon-btn,.chat-head .ttl-btn{padding:.2rem .45rem}
.chat-head .set-btn .ic,.chat-head .head-icon-btn .ic,.chat-head .ttl-btn .ic{width:1.3rem;height:1.3rem}
@media(min-width:760px){
  .chat-head .set-btn .ic,.chat-head .head-icon-btn .ic,.chat-head .ttl-btn .ic{width:1.55rem;height:1.55rem}
}
.box-menu{position:absolute;right:0;top:calc(100% + .4rem);z-index:30;width:min(24rem,calc(100vw - 1rem));max-height:min(80vh,34rem);overflow-y:auto;background:var(--panel2);border:1px solid var(--line);border-radius:.8rem;padding:.7rem .85rem;box-shadow:0 16px 40px rgba(0,0,0,.55)}
/* Verschwindende Nachrichten (TTL) im ⚙-Box-Menü / Gruppen-Modal — Optionen als Pillen. */
.grp-sec{font-size:.8rem;color:var(--muted);font-weight:700;margin:1.1rem 0 .4rem}
.box-ttl{display:flex;gap:.35rem;flex-wrap:wrap;margin:.15rem 0 .3rem}
.box-ttl-opt{background:var(--panel);border:1px solid var(--line);color:var(--ink);border-radius:.5rem;padding:.35rem .6rem;font:inherit;font-size:.82rem;cursor:pointer}
.box-ttl-opt:hover{border-color:var(--me)}
.box-ttl-opt.sel{background:var(--honey-grad);color:var(--honey-ink);border-color:transparent;box-shadow:var(--honey-glow);font-weight:700}
.box-menu[hidden]{display:none}
@media(max-width:759px){.box-menu{position:fixed;left:.5rem;right:.5rem;top:calc(env(safe-area-inset-top) + 3.7rem);width:auto;max-height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 5rem)}}
/* Inline-Variante in der Chat-Liste: im Fluss unter der Zeile (kein Popover, kein fixed). */
.box-menu.inline{position:static;width:auto;max-width:none;max-height:none;overflow:visible;box-shadow:none;border-radius:.6rem;margin:.1rem .2rem .5rem;background:var(--panel)}
.box-menu h4{margin:.6rem 0 .4rem;font-size:.66rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:600}
.box-menu h4:first-child{margin-top:.1rem}
.box-menu .rename{display:flex;gap:.5rem}
.box-menu .rename input{flex:1;min-width:0;background:var(--panel);border:1px solid var(--line);color:var(--ink);border-radius:.5rem;padding:.6rem .7rem;font:inherit}
.box-menu .rename button{background:var(--me);border:0;color:var(--me-ink);border-radius:.5rem;padding:0 1rem;font:inherit;font-weight:600;min-width:3.2rem}
.box-menu .rename button[disabled]{opacity:.7}
.swatches{display:flex;gap:.5rem;flex-wrap:wrap;padding:.1rem 0 .2rem}
.swatches button{width:1.7rem;height:1.7rem;border-radius:50%;border:2px solid var(--line);cursor:pointer;display:grid;place-items:center;padding:0}
.swatches button.sel{border-color:var(--ink);box-shadow:0 0 0 2px var(--panel2),0 0 0 4px var(--ink)}
.swatches .sw-none{background:var(--panel);color:var(--muted);font-size:.75rem}
.swatches .sw-pick{width:1.7rem;height:1.7rem;border-radius:50%;border:2px solid var(--line);padding:0;cursor:pointer;background:conic-gradient(red,#ff0,#0f0,#0ff,#00f,#f0f,red)}
.swatches .sw-pick::-webkit-color-swatch-wrapper{padding:0}
.swatches .sw-pick::-webkit-color-swatch{border:none;border-radius:50%}
.swatches .sw-pick::-moz-color-swatch{border:none;border-radius:50%}
.swatches .sw-pick.sel{border-color:var(--ink);box-shadow:0 0 0 2px var(--panel2),0 0 0 4px var(--ink)}
.opt-row{display:flex;align-items:center;justify-content:space-between;gap:.7rem;padding:.5rem 0}
.opt-l{display:flex;align-items:center;gap:.4rem;min-width:0;color:var(--ink)}
.opt-l .pro-pill{margin-left:.1rem}
.tip{flex:0 0 auto;width:1.1rem;height:1.1rem;border-radius:50%;border:1px solid var(--line);background:none;color:var(--muted);font-size:.68rem;line-height:1;cursor:pointer;display:grid;place-items:center;padding:0}
.tip:hover{color:var(--ink);border-color:var(--ink)}
.tgl{flex:0 0 auto;width:2.7rem;height:1.55rem;border-radius:999px;border:0;background:var(--line);position:relative;cursor:pointer;transition:background .15s;padding:0}
.tgl .knob{position:absolute;top:.18rem;left:.18rem;width:1.19rem;height:1.19rem;border-radius:50%;background:#fff;transition:left .15s}
.tgl.on{background:var(--me)}
.tgl.on .knob{left:1.33rem}
.tgl.locked{opacity:.5}
.box-menu .ai-btn{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;margin-top:.3rem;background:var(--honey-grad);color:var(--honey-ink);border:0;box-shadow:var(--honey-glow);border-radius:.6rem;padding:.65rem;font:inherit;font-weight:700;cursor:pointer}
.box-menu .ai-btn:hover{filter:brightness(1.06)}
.box-menu .ai-btn:active{opacity:.9}
.box-menu .ai-btn .ai-badge{font-weight:800;letter-spacing:.03em;font-size:.72rem;line-height:1.2;border:1px solid color-mix(in srgb,var(--honey-ink) 55%,transparent);border-radius:.3rem;padding:.02rem .26rem}
.ai-summary p{margin:.35rem 0;line-height:1.5;color:var(--ink)}
/* Eckiges, NUR vom User schließbares Tooltip-Overlay (Basis für In-Context-Doku).
   Rechteckig (leicht abgerundet), dunkel-transluzent, zentriert, mit Titel + X.
   KEIN Auto-Schließen — bleibt bis Klick auf X oder Backdrop. */
.tip-ov{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.5);display:grid;place-items:center;padding:1.5rem}
.tip-card{background:var(--panel);border:1px solid var(--line);border-radius:.7rem;max-width:24rem;width:100%;padding:1rem 1.1rem 1.1rem;box-shadow:0 18px 50px rgba(0,0,0,.55)}
.tip-card .tip-head{display:flex;align-items:flex-start;gap:.7rem;margin-bottom:.55rem}
.tip-card .tip-title{font-weight:700;font-size:.98rem;flex:1;color:var(--ink);line-height:1.25}
.tip-card .tip-x{background:none;border:0;color:var(--muted);font-size:1.35rem;line-height:1;cursor:pointer;padding:0;margin:-.1rem -.1rem 0 0}
.tip-card .tip-x:hover{color:var(--ink)}
.tip-card .tip-body{color:var(--ink);font-size:.9rem;line-height:1.5}
/* Lade-Spinner (Chat zusammenfassen). */
.spin{display:inline-block;width:1.05rem;height:1.05rem;border-radius:50%;border:2px solid var(--line);border-top-color:var(--accent);animation:hv-spin .7s linear infinite;vertical-align:-.18rem}
@keyframes hv-spin{to{transform:rotate(360deg)}}
.ai-loading{display:flex;align-items:center;gap:.6rem;color:var(--muted);font-size:.92rem;padding:.4rem 0}
/* Gespeicherte Zusammenfassungen (datierte Liste unter dem Button). */
.sum-hist{margin-top:.6rem;border-top:1px solid var(--line);padding-top:.5rem}
.sum-hist .sh-lbl{font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 .3rem}
.sum-hist .sh-item{display:flex;align-items:center;gap:.5rem;width:100%;text-align:left;background:var(--panel2);border:1px solid var(--line);border-radius:.5rem;padding:.45rem .6rem;color:var(--ink);font:inherit;cursor:pointer;margin-bottom:.3rem}
.sum-hist .sh-item:hover{border-color:var(--me)}
.sum-hist .sh-item .sh-when{flex:1;min-width:0;font-size:.84rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sum-hist .sh-item .sh-del{background:none;border:0;color:var(--muted);font-size:.95rem;line-height:1;padding:.1rem .25rem;cursor:pointer;flex:0 0 auto}
.sum-hist .sh-item .sh-del:hover{color:#ef4444}

/* iOS-PWA Safe-Area: viewport-fit=cover + black-translucent → der Inhalt rendert
   UNTER Statusleiste/Notch (oben) und Home-Indicator (unten). Die Leisten müssen
   in die sichere Zone gepolstert werden, sonst ist der Header unerreichbar und der
   Composer läuft über. env(...) ist 0 ohne Notch → keine Regression sonstwo.
   Längs: oben/unten relevant; quer (Notch links/rechts): auch seitlich. */
.side-head{padding-top:calc(.6rem + env(safe-area-inset-top));padding-left:calc(.7rem + env(safe-area-inset-left));padding-right:calc(.7rem + env(safe-area-inset-right))}
.chat-head{padding-top:calc(.6rem + env(safe-area-inset-top));padding-left:calc(.8rem + env(safe-area-inset-left));padding-right:calc(.8rem + env(safe-area-inset-right))}
/* Der Streifen fuer den Home-Balken ist auf jedem iPhone hoechstens 34 Punkte
   hoch. Meldet der Browser mehr, gehoert der Rest ihm selbst (Werkzeugleiste)
   und nicht uns — wir wuerden ihn doppelt reservieren und unten bliebe ein
   leeres Band stehen (Hennys Bild vom 25.09.). Deshalb gedeckelt. */
.composer{padding-bottom:calc(.6rem + min(env(safe-area-inset-bottom), 2.2rem));padding-left:calc(.8rem + env(safe-area-inset-left));padding-right:calc(.8rem + env(safe-area-inset-right))}
.accept-bar{padding-bottom:calc(.7rem + min(env(safe-area-inset-bottom), 2.2rem));padding-left:calc(.8rem + env(safe-area-inset-left));padding-right:calc(.8rem + env(safe-area-inset-right))}
.gate{padding:calc(2rem + env(safe-area-inset-top)) calc(2rem + env(safe-area-inset-right)) calc(2rem + env(safe-area-inset-bottom)) calc(2rem + env(safe-area-inset-left))}

/* iOS zoomt beim Fokus automatisch rein, wenn ein Feld font-size < 16px hat. Auf
   Mobile alle Felder auf 16px → kein Auto-Zoom, Pinch-Zoom bleibt erlaubt (besser
   für Barrierefreiheit als user-scalable=no). !important schlägt die per-Element-
   font:inherit/.85rem-Regeln. Desktop unberührt. */
@media(max-width:759px){input,textarea,select{font-size:16px!important}}

/* Fokusring GLOBAL in der Markenfarbe statt im blauen System-Akzent. :where() hat
   Spezifität 0 → überschreibt keine bestehende Regel, schließt die Lücke aber überall,
   wo (wie früher beim Composer) keine eigene :focus-Regel existiert. */
:where(input,textarea,select,button,a,[tabindex]):focus-visible{outline:2px solid var(--me);outline-offset:2px}
:where(input,textarea,select,button,a,[tabindex]):focus:not(:focus-visible){outline:none}