/* =================================================================================
   WWDigitalwerk Kundenportal — Messenger (eigenständig, lädt nach app-v2.css)
   Marken-Palette navy/orange, KEIN Grün. Light/Dark via vorhandene CSS-Variablen.
   ================================================================================= */

/* ---- Inbox / Konversationsliste ------------------------------------------------ */
.msgr-list { list-style: none; margin: .35rem 0 0; padding: 0; display: flex; flex-direction: column; }
.msgr-list li { list-style: none; }
.msgr-row {
  display: flex; align-items: center; gap: .8rem; padding: .65rem .55rem;
  text-decoration: none; color: var(--text); border-bottom: 1px solid var(--line);
  transition: background .14s ease, transform .08s ease;
}
.msgr-list li:last-child .msgr-row { border-bottom: 0; }
.msgr-row:hover { background: var(--surface-muted); }
.msgr-row:active { transform: scale(.997); }
.msgr-row-main { flex: 1; min-width: 0; display: grid; gap: .14rem; }
.msgr-row-top { display: flex; align-items: baseline; gap: .5rem; }
.msgr-name { font-size: .96rem; font-weight: 600; color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msgr-when { margin-left: auto; flex: 0 0 auto; font-size: .72rem; color: var(--muted); white-space: nowrap; }
.msgr-row-sub { display: flex; align-items: center; gap: .5rem; }
.msgr-preview { flex: 1; min-width: 0; font-size: .86rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msgr-badge { flex: 0 0 auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--action); color: #fff; font-size: .72rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.msgr-row.is-unread .msgr-name { font-weight: 700; }
.msgr-row.is-unread .msgr-preview { color: var(--text); font-weight: 600; }
.msgr-row.is-unread .msgr-when { color: var(--action); font-weight: 700; }

/* Avatar-Kreis (Initialen, Farbton aus --hue) */
.msgr-ava { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: hsl(var(--hue, 210) 30% 45%); color: #fff; font-weight: 600; font-size: .95rem; flex: 0 0 auto; }
.msgr-ava-sm { width: 32px; height: 32px; font-size: .78rem; }

/* ---- Thread (scroll-lock: nur der Verlauf scrollt) ----------------------------- */
/* .msgr = Rahmen (Zeile: optionale Rail + Hauptspalte), .msgr-main = Kopf/Verlauf/Composer */
.msgr { display: flex; flex-direction: row; align-items: stretch; width: 100%; background: var(--bg); }
.msgr-main { flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; flex-direction: column; position: relative; }
.msgr-head { display: flex; align-items: center; gap: .55rem; padding: .55rem .7rem; background: var(--navy); color: #fff; flex: 0 0 auto; }
.msgr-back, .msgr-head-act { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: #fff; flex: 0 0 auto; text-decoration: none; }
.msgr-back:hover, .msgr-head-act:hover { background: rgba(255,255,255,.12); }
.msgr-head-act { margin-left: auto; }
.msgr-peer { display: grid; line-height: 1.2; min-width: 0; }
.msgr-peer strong { font-size: .98rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msgr-peer small { font-size: .76rem; color: rgba(255,255,255,.62); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msgr-scroll { background: var(--bg); padding: .5rem .7rem .8rem; }
.msgr-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; min-height: 60%; color: var(--muted); text-align: center; padding: 2rem 1rem; }
.msgr-empty .ic { color: var(--muted); opacity: .7; }

/* Sprechblasen (überschreibt app-v2 .chat-*) */
.msgr-scroll .chat { display: flex; flex-direction: column; gap: 2px; max-height: none; }
.msgr-scroll .chat-day { display: flex; justify-content: center; position: sticky; top: 2px; z-index: 1; margin: .55rem 0 .35rem; }
.msgr-scroll .chat-day span { background: var(--surface-muted); color: var(--muted); border: 1px solid var(--line); padding: .24rem .8rem; border-radius: 999px; font-size: .72rem; font-weight: 600; }
.msgr-scroll .chat-author { font-size: .72rem; font-weight: 600; color: var(--muted); margin: .45rem 0 .15rem .35rem; }
.msgr-scroll .chat-msg {
  max-width: 80%; padding: .5rem .72rem .42rem; border-radius: 16px;
  font-size: .95rem; line-height: 1.4; box-shadow: 0 1px 1px rgba(22,40,64,.05);
}
.msgr-scroll .chat-msg.is-first { margin-top: .5rem; }
.msgr-scroll .chat-msg.is-cont { margin-top: 2px; }
.msgr-scroll .chat-in { align-self: flex-start; background: var(--surface); border: 1px solid var(--line); color: var(--text); }
.msgr-scroll .chat-out { align-self: flex-end; background: var(--navy); color: #fff; }
.msgr-scroll .chat-in.is-cont { border-top-left-radius: 6px; }
.msgr-scroll .chat-in.is-last { border-bottom-left-radius: 6px; }
.msgr-scroll .chat-out.is-cont { border-top-right-radius: 6px; }
.msgr-scroll .chat-out.is-last { border-bottom-right-radius: 6px; }
.msgr-scroll .chat-text { white-space: normal; overflow-wrap: anywhere; }
.msgr-scroll .chat-time { float: right; font-size: .64rem; opacity: .6; margin: .4rem 0 -.1rem .55rem; white-space: nowrap; }
.msgr-scroll .chat-out .chat-time { color: rgba(255,255,255,.78); opacity: .95; }
.chat-rcpt { display: inline-block; vertical-align: -1px; margin-left: 3px; color: rgba(255,255,255,.7); }
.chat-rcpt svg { width: 15px; height: 10px; display: inline-block; }
.chat-rcpt.is-read { color: #6cb0f0; }

/* Composer */
/* Einzeilig: Knöpfe mittig zur Eingabe (deren Höhe misst JS dynamisch — ein
   fester margin-Ausgleich wäre zerbrechlich). Mehrzeilig setzt msgr-thread.js
   .is-multiline und die Knöpfe rutschen ans untere Ende. */
.msgr-composer { display: flex; align-items: center; gap: .55rem; padding: .55rem .7rem; background: var(--surface); border-top: 1px solid var(--line); flex: 0 0 auto; }
form.msgr-composer.is-multiline { align-items: flex-end; }
.msgr-field { flex: 1; min-width: 0; margin: 0; display: block; }
/* display:block: als inline-block ließe die Baseline ~4px Luft unterm Feld im
   .msgr-field-Wrapper — die Knopf-Zentrierung (am Wrapper) säße dann schief. */
.msgr-textarea { display: block; width: 100%; resize: none; border: 1px solid var(--line); border-radius: 22px; padding: .6rem 1rem; font: inherit; line-height: 1.4; background: var(--bg); color: var(--text); min-height: 44px; max-height: 120px; overflow-y: auto; }
.msgr-textarea:focus { outline: none; border-color: var(--action); box-shadow: 0 0 0 3px var(--action-soft); }
.msgr-send { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--action); color: #fff; display: grid; place-items: center; cursor: pointer; transition: transform .08s ease, background .14s ease; }
.msgr-send:hover { background: var(--action-hover); }
.msgr-send:active { transform: scale(.93); }
.msgr-send svg { width: 20px; height: 20px; }

/* ---- Scroll-Lock: nur .msgr-scroll scrollt (Mobil) ----------------------------- */
@media (max-width: 900px) {
  body.msgr-thread { position: fixed; inset: 0; width: 100%; overflow: hidden; }
  body.msgr-thread .appbar,
  body.msgr-thread .footer,
  body.msgr-thread .hero-band,
  body.msgr-thread .tabbar,
  /* v60 (A1): das Mehr-Sheet ruht jetzt mit sichtbarem Griffstreifen als
     Leisten-Oberkante — im immersiven Chat (Leiste aus) muss es mit weg. */
  body.msgr-thread .sidebar,
  body.msgr-thread .nav-scrim { display: none !important; }
  /* Chat-Rahmen fix an den SICHTBAREN Viewport gepinnt; msgr-thread.js koppelt Höhe +
     Offset an window.visualViewport → Composer bleibt über der Tastatur (iOS & Android),
     und nur .msgr-scroll scrollt. */
  body.msgr-thread .msgr {
    position: fixed; top: 0; bottom: 0; left: 0; right: 0;
    display: flex;
    z-index: 30; background: var(--bg);
  }
  body.msgr-thread .msgr-head { padding-top: calc(.55rem + env(safe-area-inset-top)); flex: 0 0 auto; }
  body.msgr-thread .msgr-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
  body.msgr-thread .msgr-composer { flex: 0 0 auto; position: relative; padding-bottom: calc(.55rem + env(safe-area-inset-bottom)); }
  body.msgr-thread.kbd-open .msgr-composer { padding-bottom: .5rem; }
  body.msgr-thread .msgr-composer::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 140px; background: var(--surface); pointer-events: none; }
}

/* app-v2 macht .chat zum EIGENEN Mini-Scroller (max-height + overflow-y:auto +
   overscroll-behavior:contain — Altlast vom früheren Inline-Chat auf den Projektseiten).
   Im Messenger ist .msgr-scroll der einzige Scroller. Bleibt .chat ein (leerer)
   Scroll-Container, waehlt Blink ihn als Touch-Scroll-Ziel und `contain` verbietet
   das Weiterreichen nach oben -> Chat war auf Android per Finger unscrollbar
   (WebKit/iOS chained trotzdem, darum fiel es dort nicht auf). */
body.msgr-thread .chat { max-height: none; overflow: visible; overscroll-behavior: auto; }

/* ---- Scroll-Lock (Desktop): Verlauf füllt die Höhe, nur er scrollt -------------- */
@media (min-width: 901px) {
  body.msgr-thread { overflow: hidden; }
  body.msgr-thread .app-main { height: 100vh; min-height: 0; }
  /* .app-main > … nötig: schlägt den Sticky-Footer-Fix `.app-main > .shell{flex:1 0 auto}` aus app-v2 */
  body.msgr-thread .app-main > main.shell { flex: 1 1 auto; min-height: 0; padding: 0 !important; max-width: none !important; display: flex; flex-direction: column; }
  body.msgr-thread .hero-band { display: none; }
  body.msgr-thread .footer { display: none; }
  body.msgr-thread .msgr { flex: 1 1 auto; min-height: 0; }
  body.msgr-thread .msgr-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
  .msgr { border: 1px solid var(--line); border-radius: var(--kp-r-lg, 16px); overflow: hidden; }
  body.msgr-thread .msgr { border-radius: 0; border: 0; }
}

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Dark-Mode: gesendete Bubble heller absetzen */
:root[data-theme="dark"] .msgr-scroll .chat-out { background: #24405f; }
@media (prefers-color-scheme: dark){ :root[data-theme="auto"] .msgr-scroll .chat-out { background: #24405f; } }
/* Avatare einheitlich on-brand (kein zufaelliges Gruen) */
.msgr-ava { background: #2d5a7a; }

/* --- Bereichs-Umschalter: Allgemein + ein Reiter pro Projekt --- */
.msgr-tabs { flex: 0 0 auto; display: flex; gap: .4rem; align-items: center; padding: .5rem .7rem; background: var(--surface); border-bottom: 1px solid var(--line); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.msgr-tabs::-webkit-scrollbar { display: none; }
.msgr-tab { flex: 0 0 auto; position: relative; display: inline-flex; align-items: center; gap: .35rem; max-width: 12rem; padding: .34rem .72rem; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--muted); font-size: .82rem; font-weight: 600; line-height: 1; text-decoration: none; white-space: nowrap; transition: background .14s ease, color .14s ease, border-color .14s ease; }
.msgr-tab span { overflow: hidden; text-overflow: ellipsis; }
.msgr-tab:hover { color: var(--text); border-color: var(--action); }
.msgr-tab.is-active { background: var(--action); border-color: transparent; color: var(--action-ink, #fff); } /* B2: Dark = Navy-Tinte auf Orange */
.msgr-tab-dot { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--action); }
.msgr-tab.is-active .msgr-tab-dot { background: var(--action-ink, #fff); }

/* --- Glocken-Panel: Seitensperre + Einzel-Wisch --- */
html.notif-locked, html.notif-locked body { overflow: hidden; }
.notif-item { touch-action: pan-y; will-change: transform; }
.notif-sheet-grip { touch-action: none; }

/* Push-Benachrichtigungs-Schalter (Konto/Einstellungen) */
.push-toggle { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.push-toggle-text { display: grid; gap: .2rem; min-width: 0; }
.push-toggle-text strong { font-weight: 600; }
.push-toggle .push-status { font-size: .85rem; color: var(--muted); line-height: 1.45; }
.push-toggle[data-state="on"] .push-status { color: var(--action); font-weight: 600; }
.push-toggle .push-btn { flex: 0 0 auto; }

/* =================================================================================
   v44 — Instant-Senden & Live-Eingang (optimistic UI)
   ================================================================================= */

/* Neue Bubble gleitet sanft ein (nur transform/opacity, 60 fps) */
.msgr-scroll .chat-msg.is-new { animation: msgr-in .18s ease-out; }
@keyframes msgr-in {
  from { opacity: 0; transform: translateY(6px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .msgr-scroll .chat-msg.is-new { animation: none; }
}

/* Wird gesendet: Bubble leicht gedimmt, Uhr statt Häkchen */
.msgr-scroll .chat-msg.is-pending { opacity: .72; }
.chat-rcpt.is-pending-ic svg { width: 12px; height: 12px; }

/* Senden fehlgeschlagen: dezenter Alarm + Retry in der Bubble */
.msgr-scroll .chat-msg.is-failed { background: var(--surface); border: 1px solid #c2401f; color: var(--text); }
.chat-retry {
  display: block; width: 100%; margin-top: .3rem; padding: .3rem .2rem 0;
  border: 0; border-top: 1px dashed #c2401f; background: none; cursor: pointer;
  color: #c2401f; font-size: .76rem; font-weight: 600; text-align: left; font-family: inherit;
}

/* „Neue Nachricht"-Pille, wenn man hochgescrollt ist */
.msgr-jump {
  position: absolute; left: 50%; bottom: 84px; transform: translate(-50%, 6px);
  padding: .45rem 1rem; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--navy); color: #fff; font-size: .82rem; font-weight: 600; font-family: inherit;
  box-shadow: 0 6px 18px rgba(11,18,32,.28); opacity: 0; pointer-events: none;
  transition: opacity .16s ease, transform .16s ease; z-index: 5;
}
.msgr-jump.is-on { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.msgr-jump::after { content: " ↓"; }
body.msgr-thread .msgr { position: relative; }
@media (max-width: 900px) { body.msgr-thread .msgr { position: fixed; } }

/* Touch-Geräte: Zurück-Pfeil, Kopf-Aktionen und Bereichs-Reiter fingertauglich */
@media (pointer: coarse), (max-width: 900px) {
  .msgr-back, .msgr-head-act { width: 44px; height: 44px; }
  .msgr-tab { padding: .5rem .9rem; min-height: 42px; align-items: center; }
  .msgr-tabs { padding-top: .45rem; padding-bottom: .45rem; }
}

/* ---- Bilder & Dateien im Chat (WhatsApp-Muster) ---- */
.msgr-attach {
  flex: 0 0 auto; display: inline-grid; place-items: center; width: 44px; height: 44px;
  border-radius: 50%; color: var(--muted); cursor: pointer;
  transition: background .14s ease, color .14s ease, transform .08s ease;
}
.msgr-attach:hover { background: var(--surface-muted); color: var(--text); }
.msgr-attach:active { transform: scale(.92); }
.msgr-attach svg { width: 22px; height: 22px; }
.msgr-attach:focus-within { outline: 2px solid var(--action); outline-offset: 2px; }

/* Bild-Bubble: Bild füllt die Blase, Text/Zeit darunter */
.msgr-scroll .chat-msg.has-img { padding: 4px 4px .42rem; max-width: min(320px, 78%); }
.msgr-scroll .chat-msg.has-img .chat-time { margin-right: .45rem; }
.msgr-scroll .chat-msg.has-img .chat-text { display: block; padding: .3rem .55rem 0; }
.chat-imglink { display: block; line-height: 0; border-radius: 13px; overflow: hidden; }
.chat-img { display: block; width: 100%; max-height: 340px; object-fit: cover; background: var(--surface-muted); min-width: 160px; min-height: 90px; }

/* Datei-Karte in der Bubble */
.chat-file {
  display: flex; align-items: center; gap: .6rem; min-width: 200px; max-width: 100%;
  padding: .45rem .55rem; margin: .1rem 0 .2rem; border-radius: 12px;
  background: rgba(127,140,160,.14); color: inherit; text-decoration: none;
}
.chat-in .chat-file { background: var(--surface-muted); }
.chat-file:hover .chat-file-dl { transform: translateY(1px); }
.chat-file-ic { flex: 0 0 auto; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: rgba(127,140,160,.18); }
.chat-out .chat-file-ic { background: rgba(255,255,255,.14); }
.chat-file-meta { flex: 1; min-width: 0; display: grid; line-height: 1.25; }
.chat-file-meta strong { font-size: .85rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-file-meta small { font-size: .72rem; opacity: .72; }
.chat-file-dl { flex: 0 0 auto; opacity: .75; transition: transform .12s ease; }

/* Upload-Fortschritt in der Bubble */
.chat-progress { display: block; height: 4px; margin: .35rem .45rem .1rem; border-radius: 999px; background: rgba(127,140,160,.25); overflow: hidden; }
.chat-progress-fill { display: block; height: 100%; width: 2%; border-radius: 999px; background: var(--action); transition: width .18s ease; }

/* Projektseiten: letzte Nachricht als Teaser, der Chat selbst lebt im Messenger */
.msgr-teaser { display: flex; align-items: center; gap: .65rem; padding: .6rem .7rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.msgr-teaser-main { flex: 1; min-width: 0; display: grid; line-height: 1.3; }
.msgr-teaser-main strong { font-size: .88rem; }
.msgr-teaser-text { font-size: .85rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msgr-teaser-when { flex: 0 0 auto; font-size: .74rem; color: var(--muted); align-self: flex-start; margin-top: .15rem; }
.msgr-teaser-hint { font-size: .82rem; margin-top: .25rem; }

/* ---- Desktop-Split-View (Team): Konversationsliste links, Chat rechts ---- */
.msgr-rail { display: none; }
@media (min-width: 1100px) {
  .msgr-rail {
    display: flex; flex-direction: column; flex: 0 0 320px; min-width: 0; min-height: 0;
    border-right: 1px solid var(--line); background: var(--surface);
  }
  .msgr-rail-head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .95rem 1rem .65rem; }
  .msgr-rail-head strong { font-size: 1.02rem; font-weight: 650; }
  .msgr-rail-all { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; font-weight: 600; color: var(--muted); text-decoration: none; padding: .3rem .6rem; border: 1px solid var(--line); border-radius: 999px; transition: color .14s ease, border-color .14s ease; }
  .msgr-rail-all:hover { color: var(--text); border-color: var(--action); }
  .msgr-rail-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-bottom: .8rem; scrollbar-width: thin; }
  .msgr-rail-label { margin: .7rem 1rem .25rem; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
  .msgr-rail-row {
    display: flex; align-items: center; gap: .6rem; padding: .55rem 1rem;
    text-decoration: none; color: var(--text);
    transition: background .14s ease;
  }
  .msgr-rail-row:hover { background: var(--surface-muted); }
  .msgr-rail-row.is-active { background: var(--surface-muted); box-shadow: inset 3px 0 0 var(--action); }
  .msgr-rail-main { flex: 1; min-width: 0; display: grid; line-height: 1.3; }
  .msgr-rail-name { font-size: .88rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .msgr-rail-prev { font-size: .76rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .msgr-rail-row.is-unread .msgr-rail-name { font-weight: 700; }
  .msgr-rail-row.is-unread .msgr-rail-prev { color: var(--text); font-weight: 600; }
  .msgr-rail-row .msgr-badge { min-width: 18px; height: 18px; font-size: .68rem; }
}

/* „… schreibt"-Anzeige der Gegenseite. */
.msgr-typing { display: flex; align-items: center; gap: .55rem; margin: .35rem 0; padding: .5rem .8rem; max-width: 86%; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--muted); font-size: .85rem; }
.msgr-typing-dots { display: inline-flex; gap: 3px; }
.msgr-typing-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: msgr-blink 1.2s infinite; }
.msgr-typing-dots i:nth-child(2) { animation-delay: .2s; }
.msgr-typing-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes msgr-blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .msgr-typing-dots i { animation: none; } }

/* ================================================================
   v52 — WhatsApp-Gefühl: Antworten, Reaktionen, Bearbeiten/Löschen,
   Sprachnachrichten, Lightbox, Trenner, schwebendes Datum.
   ================================================================ */

/* Zitat-Block in der Bubble */
.chat-reply { display: grid; gap: .05rem; margin: 0 0 .3rem; padding: .35rem .55rem; border-left: 3px solid var(--action); border-radius: 8px; background: rgba(0,0,0,.05); text-decoration: none; color: inherit; min-width: 0; }
.chat-msg.chat-out .chat-reply { background: rgba(255,255,255,.13); border-left-color: rgba(255,255,255,.75); }
.chat-reply strong { font-size: .72rem; font-weight: 700; opacity: .85; }
.chat-reply span { font-size: .8rem; opacity: .75; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
:root[data-theme="dark"] .chat-msg.chat-in .chat-reply { background: rgba(255,255,255,.06); }
@media (prefers-color-scheme: dark) { :root[data-theme="auto"] .chat-msg.chat-in .chat-reply { background: rgba(255,255,255,.06); } }

/* Reaktions-Chips unter der Bubble */
.chat-reacts { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .25rem; }
.chat-react { display: inline-flex; align-items: center; gap: .15rem; border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: .12rem .5rem; font-size: .85rem; line-height: 1.4; cursor: pointer; transition: transform .18s var(--spring-pop, ease-out), border-color .14s ease; }
.chat-react b { font-size: .72rem; font-weight: 700; color: var(--muted); }
.chat-react.is-mine { border-color: var(--action); background: var(--action-soft, rgba(240,138,75,.12)); }
.chat-react:active { transform: scale(.92); }

/* bearbeitet-Label + gelöschte Nachricht */
.chat-edited { font-size: .68rem; color: inherit; opacity: .7; margin-right: .35rem; font-style: italic; }
.chat-msg.is-deleted { opacity: .72; }
.chat-text-deleted { font-style: italic; opacity: .75; }

/* Kontextmenü: Bottom-Sheet (mobil) / Popover (Desktop).
   v62 (E2): Scrim/Radius aus den gemeinsamen Sheet-Token (app-v2 :root) —
   jede "von unten"-Fläche sieht gleich aus. BEWUSSTE Vereinheitlichung
   (Review-Befund 2): Der Chat-Scrim dunkelt damit von Alpha .32 auf .5 ab
   und entspricht jetzt Mehr-Sheet/Dialog; der Fallback greift nur, falls
   app-v2.css einmal nicht lädt. */
.msgr-ctx { position: fixed; inset: 0; z-index: 120; background: var(--sheet-scrim, rgba(10, 16, 28, .32)); }
.msgr-ctx-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 18px 48px rgba(8, 14, 26, .28); padding: .5rem; min-width: 230px; display: grid; gap: .15rem; }
.msgr-ctx.is-sheet { display: flex; align-items: flex-end; }
.msgr-ctx.is-sheet .msgr-ctx-card { width: 100%; border-radius: var(--sheet-radius, 18px) var(--sheet-radius, 18px) 0 0; padding-bottom: calc(.6rem + env(safe-area-inset-bottom)); animation: msgr-sheet-up .22s var(--spring-settle, ease-out) both; }
@keyframes msgr-sheet-up { from { transform: translateY(46px); opacity: 0; } to { transform: none; opacity: 1; } }
.msgr-ctx-emojis { display: flex; justify-content: space-between; gap: .15rem; padding: .3rem .35rem .45rem; }
.msgr-ctx-emojis button { border: 0; background: none; font-size: 1.5rem; line-height: 1; padding: .35rem; border-radius: 12px; cursor: pointer; transition: transform .18s var(--spring-pop, ease-out), background .14s ease; }
.msgr-ctx-emojis button:hover, .msgr-ctx-emojis button:focus-visible { background: var(--surface-muted); transform: scale(1.18); }
.msgr-ctx-item { border: 0; background: none; text-align: left; font: inherit; color: var(--text); padding: .65rem .75rem; min-height: 44px; border-radius: 10px; cursor: pointer; }
.msgr-ctx-item:hover, .msgr-ctx-item:focus-visible { background: var(--surface-muted); }
body.msgr-ctx-open { overflow: hidden; }

/* Swipe-to-Reply: Bubble folgt dem Finger */
.chat-msg { touch-action: pan-y; }
.chat-msg.is-swiping { transition: none; }
.chat-msg:not(.is-swiping) { transition: transform .22s var(--spring-settle, ease-out); }

/* Zitat-Ziel kurz hervorheben */
.chat-msg.is-flash { animation: msgr-flash 1.2s ease both; }
@keyframes msgr-flash { 0%, 60% { box-shadow: 0 0 0 3px var(--action-soft, rgba(240,138,75,.35)); } 100% { box-shadow: none; } }

/* Composer-Leiste für Antworten/Bearbeiten */
.msgr-cbar { display: flex; align-items: center; gap: .6rem; margin: 0 .75rem; padding: .45rem .65rem; border: 1px solid var(--line); border-bottom: 0; border-radius: 12px 12px 0 0; background: var(--surface-muted); }
.msgr-cbar-meta { display: grid; gap: .05rem; min-width: 0; flex: 1; border-left: 3px solid var(--action); padding-left: .55rem; }
.msgr-cbar-meta strong { font-size: .75rem; font-weight: 700; }
.msgr-cbar-meta span { font-size: .8rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msgr-cbar-x { flex: 0 0 auto; display: inline-grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer; }
.msgr-cbar-x:hover { color: var(--text); background: var(--surface); }
.msgr-cbar-x svg { width: 17px; height: 17px; }

/* Sprachnachricht: Player in der Bubble */
.chat-voice { display: inline-flex; align-items: center; gap: .55rem; min-width: 190px; padding: .15rem 0; }
.chat-voice-btn { flex: 0 0 auto; display: inline-grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 50%; background: var(--action); color: #fff; cursor: pointer; }
.chat-voice-btn svg { width: 18px; height: 18px; }
.chat-voice .cv-pause { display: none; }
.chat-voice.is-playing .cv-pause { display: block; }
.chat-voice.is-playing .cv-play { display: none; }
.chat-voice-track { flex: 1 1 auto; height: 4px; border-radius: 999px; background: rgba(0,0,0,.14); overflow: hidden; min-width: 90px; }
.chat-msg.chat-out .chat-voice-track { background: rgba(255,255,255,.28); }
.chat-voice-fill { display: block; width: 0; height: 100%; background: var(--action); transition: width .15s linear; }
.chat-msg.chat-out .chat-voice-fill { background: #fff; }
.chat-voice-time { flex: 0 0 auto; font-size: .74rem; opacity: .8; font-variant-numeric: tabular-nums; }

/* Mikro-Knopf: ersetzt Senden bei leerem Feld. Alle Regeln über :has(.msgr-mic)
   abgesichert — ohne JS/Recorder existiert kein Mikro und Senden bleibt sichtbar. */
.msgr-composer { position: relative; }
.msgr-mic { display: none; flex: 0 0 auto; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--action); color: #fff; cursor: pointer; place-items: center; }
.msgr-mic svg { width: 20px; height: 20px; }
form.msgr-composer:has(.msgr-mic):not(.has-text) .msgr-mic { display: inline-grid; }
form.msgr-composer:has(.msgr-mic):not(.has-text) .msgr-send { display: none; }
form.msgr-composer.is-recording .msgr-mic, form.msgr-composer.is-recording .msgr-attach, form.msgr-composer.is-recording .msgr-field { visibility: hidden; }

/* Aufnahme-Leiste */
.msgr-rec { position: absolute; inset: 0; display: flex; align-items: center; gap: .8rem; padding: 0 .9rem; background: var(--surface); border-radius: inherit; }
.msgr-rec-dot { width: 12px; height: 12px; border-radius: 50%; background: #d23b2e; animation: msgr-rec-pulse 1.1s ease-in-out infinite; }
@keyframes msgr-rec-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.82); } }
.msgr-rec-time { font-variant-numeric: tabular-nums; font-weight: 650; }
.msgr-rec-cancel { margin-left: auto; border: 0; background: none; color: var(--muted); font: inherit; cursor: pointer; padding: .5rem .6rem; }
.msgr-rec-cancel:hover { color: var(--text); }
.msgr-rec-send { display: inline-grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: 50%; background: var(--action); color: #fff; cursor: pointer; }
.msgr-rec-send svg { width: 18px; height: 18px; }
@media (prefers-reduced-motion: reduce) { .msgr-rec-dot { animation: none; } }

/* Ungelesen-Trenner */
.msgr-unread-sep { display: flex; align-items: center; gap: .8rem; margin: .9rem 0; }
.msgr-unread-sep::before, .msgr-unread-sep::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.msgr-unread-sep span { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--action); }

/* Schwebendes Datum beim Scrollen */
.msgr-daypill { position: absolute; top: calc(64px + env(safe-area-inset-top)); left: 50%; transform: translate(-50%, -6px); z-index: 25; padding: .25rem .8rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 6px 18px rgba(8,14,26,.14); font-size: .76rem; font-weight: 650; color: var(--muted); opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .22s var(--spring-settle, ease-out); }
.msgr-daypill.is-on { opacity: 1; transform: translate(-50%, 0); }
.msgr-main { position: relative; }

/* Lightbox */
.msgr-lb { position: fixed; inset: 0; z-index: 130; background: rgba(6, 10, 18, .92); display: grid; place-items: center; }
.msgr-lb-img { max-width: 94vw; max-height: 86vh; border-radius: 6px; transition: transform .25s var(--spring-settle, ease-out); cursor: zoom-in; }
.msgr-lb-x, .msgr-lb-prev, .msgr-lb-next { position: fixed; z-index: 2; width: 46px; height: 46px; border: 0; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; cursor: pointer; }
.msgr-lb-x { top: calc(.8rem + env(safe-area-inset-top)); right: .8rem; }
.msgr-lb-x::before { content: "✕"; font-size: 1.05rem; }
.msgr-lb-prev { left: .6rem; top: 50%; transform: translateY(-50%); }
.msgr-lb-next { right: .6rem; top: 50%; transform: translateY(-50%); }
.msgr-lb-prev::before { content: "‹"; font-size: 1.6rem; }
.msgr-lb-next::before { content: "›"; font-size: 1.6rem; }
.msgr-lb-x:hover, .msgr-lb-prev:hover, .msgr-lb-next:hover { background: rgba(255,255,255,.22); }
.msgr-lb-cap { position: fixed; bottom: calc(1rem + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.85); font-size: .82rem; max-width: 86vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.msgr-lb-open { overflow: hidden; }

/* Voice-Bubble: Breite begrenzen wie Bild-Bubbles */
.chat-msg.has-voice { min-width: 220px; }

/* ---- v53: Composer wie im Messenger — wächst mit, iOS zoomt nie ----
   (1) 16px auf Fingergeräten: iOS Safari zoomt in JEDES Feld unter 16px —
       das war das "Anzeige passt nicht"-Gefühl beim Fokussieren.
   (2) Höhe wächst IMMER per JS (msgr-thread.js). Die native Feldgrößen-
       Eigenschaft (Chrome) ist bewusst RAUS: sie bemisst auch den Placeholder
       (Feld startete mobil 2-zeilig) und verhielt sich auf iOS Safari
       unberechenbar — Live-Bug 10.06. ("Text verschwindet beim Tippen").
       Das Deploy-Gate wacht darüber, dass sie nicht zurückkommt.
   (3) max-height ~6 Zeilen wie WhatsApp, danach scrollt das Feld innen. */
@media (pointer: coarse), (max-width: 900px) {
  .msgr-textarea { font-size: 16px; }
}
.msgr-textarea { max-height: 150px; }
/* Konter gegen die generische Formular-Regel in app-v2
   (body.shell-client .shell textarea => min-height 120px): DIE machte den
   Chat-Composer 120px hoch ("startet zu hoch", Live-Bug 10.06.).
   Der Composer startet 1-zeilig; wachsen uebernimmt das JS. */
body.shell-client .shell .msgr-textarea,
body.shell-admin .shell .msgr-textarea { min-height: 44px; }
/* Kein Boden-Margin mehr: einzeilig zentriert der Composer die Knöpfe selbst,
   mehrzeilig (is-multiline) stehen sie unterkantenbündig zum Feld. */
.msgr-send, .msgr-mic { margin-bottom: 0; }

/* Kurzmeldung nach dem Umschalten (Erwartungszeile, kein stilles Loch). */
.msgr-toast {
  position: absolute; left: 50%; bottom: 92px; transform: translateX(-50%);
  z-index: 30; max-width: min(86%, 30rem); padding: .55rem .95rem;
  border-radius: 12px; background: var(--navy); color: #fff;
  font-size: .82rem; line-height: 1.4; text-align: center;
  box-shadow: 0 8px 22px rgba(11, 18, 32, .25);
  animation: msgr-toast-in .18s ease;
}
@keyframes msgr-toast-in { from { opacity: 0; transform: translate(-50%, 5px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) { .msgr-toast { animation: none; } }

/* ---- v59: Schnellantworten-Picker ("/" am Feldanfang, nur Staff) ----
   Sitzt im Fluss ÜBER dem Composer (msgr-cbar-Muster, kein Overlay —
   verträgt sich so mit dem iOS-Tastatur-Pinning). Hell/dunkel nur über
   die vorhandenen Variablen. */
.tb-pop {
  margin: 0 .75rem; border: 1px solid var(--line); border-bottom: 0;
  border-radius: 12px 12px 0 0; background: var(--surface);
  max-height: 252px; overflow-y: auto; overscroll-behavior: contain;
  box-shadow: 0 -10px 24px rgba(11, 18, 32, .08);
}
.tb-pop-hinweis { padding: .7rem .85rem; color: var(--muted); font-size: .85rem; }
.tb-item {
  display: grid; gap: .1rem; width: 100%; text-align: left;
  padding: .55rem .85rem; border: 0; border-bottom: 1px solid var(--line);
  background: none; color: var(--text); font: inherit; cursor: pointer;
  min-height: 44px;
}
.tb-item:last-child { border-bottom: 0; }
.tb-item:hover, .tb-item.is-active { background: var(--surface-muted); }
.tb-item-k { font-weight: 700; font-size: .82rem; display: flex; align-items: center; gap: .45rem; }
.tb-item-team {
  font-size: .66rem; font-weight: 700; letter-spacing: .02em;
  padding: .1rem .4rem; border-radius: 999px;
  color: var(--badge-team-fg); background: var(--badge-team-bg);
}
.tb-item-t {
  color: var(--muted); font-size: .82rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}