/* MeshUp Desktop — Aufbau wie WhatsApp am Computer, Farben wie die App (3DNS-Blau). */

:root {
  --app-bg: #e9edef;
  --panel: #ffffff;
  --panel-head: #f0f2f5;
  --border: #e9edef;
  --text: #111b21;
  --text-2: #667781;
  --accent: #0078d4;
  --accent-soft: #e6f2ff;
  --on-accent: #ffffff;
  --wallpaper: #efeae2;
  --doodle: rgba(156, 142, 122, 0.08);
  --bubble-in: #ffffff;
  --bubble-out: #d9ebff;
  --quote-in: #f5f6f6;
  --quote-out: #c6def8;
  --chip: #ffffff;
  --chip-text: #54656f;
  --system: #ffeecd;
  --system-text: #54656f;
  --tick: #8696a0;
  --tick-read: #0078d4;
  /* Unterlage für Schrift auf Fotos und Videos (Zeit, Häkchen, Dauer) – in beiden Designs gleich. */
  --on-media: rgba(0, 0, 0, 0.55);
  --hover: #f5f6f6;
  --selected: #f0f2f5;
  --badge: #0078d4;
  --on-badge: #ffffff;
  --input: #ffffff;
  --composer: #f0f2f5;
  --danger: #ea0038;
  --shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13);
  --menu-shadow: 0 2px 5px rgba(11, 20, 26, 0.26), 0 2px 10px rgba(11, 20, 26, 0.16);
  --names: #1f7aec, #d62976, #00a884, #e26a00, #8e44ad, #009de2, #c0392b, #2e8b57;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --app-bg: #0c1317;
    --panel: #111b21;
    --panel-head: #202c33;
    --border: #222d34;
    --text: #e9edef;
    --text-2: #8696a0;
    --accent: #4da6ff;
    --accent-soft: #0f2b44;
    --on-accent: #0b141a;
    --wallpaper: #0b141a;
    --doodle: rgba(255, 255, 255, 0.025);
    --bubble-in: #202c33;
    --bubble-out: #0e3a60;
    --quote-in: #1b2023;
    --quote-out: #0a2c4a;
    --chip: #1c2226;
    --chip-text: #8696a0;
    --system: #1c2226;
    --system-text: #ffd279;
    --tick: rgba(233, 237, 239, 0.6);
    --tick-read: #4da6ff;
    --hover: #202c33;
    --selected: #2a3942;
    --badge: #4da6ff;
    --on-badge: #0b141a;
    --input: #2a3942;
    --composer: #202c33;
    --danger: #f15c6d;
    --shadow: 0 1px 0.5px rgba(0, 0, 0, 0.3);
    --menu-shadow: 0 2px 5px rgba(0, 0, 0, 0.4), 0 2px 10px rgba(0, 0, 0, 0.3);
    color-scheme: dark;
  }
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--app-bg);
  color: var(--text);
  font: 14.2px/1.4 "Segoe UI", "Helvetica Neue", Helvetica, Ubuntu, Cantarell, "Noto Sans", Arial, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
  -webkit-font-smoothing: antialiased;
}

button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  cursor: pointer;
}

#root {
  height: 100%;
}

.icon {
  width: 24px;
  height: 24px;
  fill: currentColor;
  flex: none;
}

.icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--text-2);
}

.icon-btn:hover {
  background: var(--hover);
}

/* ------------------------------------------------------------ Bewegung (motion.js) */

/*
 * Wie WhatsApp Web: kurz und dezent, nur transform und opacity. Hereinkommendes animiert hier per CSS (nur ohne
 * .no-motion an <html> – die setzt motion.js bei „weniger Bewegung“ im System oder „Animationen: Aus“ im Menü ⋮),
 * Weggehendes blendet motion.js (leave, hide) aus, bevor es verschwindet. Dauern wie MeshMotion.DUR.
 */
:root {
  --motion-fast: 120ms;
  --motion: 180ms;
  --motion-slow: 240ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --ease-in: cubic-bezier(0.3, 0, 1, 1);
}

@keyframes mu-fade-in {
  from {
    opacity: 0;
  }
}

@keyframes mu-pop-in {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
}

@keyframes mu-dialog-in {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
}

@keyframes mu-panel-in {
  from {
    opacity: 0;
    transform: translateX(24px);
  }
}

@keyframes mu-up-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

/* Menüs, Reaktionen, Emoji-Auswahl und Formatleiste wachsen aus ihrem Anker (transform-origin setzt placeNear). */
:root:not(.no-motion) .menu,
:root:not(.no-motion) .popover,
:root:not(.no-motion) .emoji-panel,
:root:not(.no-motion) .format-bar {
  animation: mu-pop-in var(--motion) var(--ease);
}

/*
 * Dialoge (Modals): Abdunkeln blendet weich ein, der Inhalt wächst kurz von 0,96 auf 1 (beim Schließen umgekehrt,
 * motion.js). Rückfragen, Auswahl, Vollbild, Status, Senden-Vorschau, Ziehen & Ablegen.
 */
:root:not(.no-motion) .overlay,
:root:not(.no-motion) .viewer,
:root:not(.no-motion) .story-viewer,
:root:not(.no-motion) .drop-hint {
  animation: mu-fade-in var(--motion) var(--ease);
}

:root:not(.no-motion) .overlay > .dialog,
:root:not(.no-motion) .story-viewer > .sv-frame,
:root:not(.no-motion) .viewer > .v-body,
:root:not(.no-motion) .send-dialog {
  animation: mu-dialog-in var(--motion) var(--ease);
}

/* Leiste rechts (Info, Suche, Medien …) gleitet von rechts herein. */
:root:not(.no-motion) .panel {
  animation: mu-panel-in var(--motion-slow) var(--ease);
}

/* Geht gerade (motion.js leave): nimmt keine Klicks mehr an. */
.leaving {
  pointer-events: none;
}

/* ------------------------------------------------------------ Kopplung */

.pair {
  height: 100%;
  display: grid;
  place-items: center;
  padding: 32px;
  background: var(--app-bg);
}

.pair-card {
  width: min(1000px, 100%);
  background: var(--panel);
  border-radius: 24px;
  padding: 56px 64px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 56px;
  align-items: center;
  box-shadow: var(--shadow);
}

.pair-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--accent);
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 28px;
}

.pair-brand img {
  width: 34px;
  height: 34px;
}

.pair h1 {
  font-size: 30px;
  font-weight: 400;
  margin: 0 0 28px;
  letter-spacing: -0.2px;
}

.pair ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
  display: grid;
  gap: 18px;
  font-size: 17px;
}

.pair li {
  counter-increment: step;
  display: flex;
  gap: 14px;
  align-items: baseline;
}

.pair li::before {
  content: counter(step);
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid var(--text-2);
  color: var(--text-2);
  display: grid;
  place-items: center;
  font-size: 13px;
  transform: translateY(-2px);
}

.pair .kbd {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
}

.pair .kbd .icon {
  width: 18px;
  height: 18px;
  padding: 2px;
  border-radius: 4px;
  background: var(--panel-head);
}

.pair-note {
  margin-top: 32px;
  display: flex;
  gap: 10px;
  color: var(--text-2);
  font-size: 13.5px;
  max-width: 520px;
}

.pair-note .icon {
  width: 18px;
  height: 18px;
  margin-top: 1px;
}

.qr-box {
  display: grid;
  justify-items: center;
  gap: 14px;
}

.qr {
  width: 276px;
  height: 276px;
  padding: 10px;
  background: #fff;
  border-radius: 16px;
  border: 1px solid var(--border);
  position: relative;
}

.qr img {
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}

.qr .logo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 54px;
  height: 54px;
  transform: translate(-50%, -50%);
  border-radius: 14px;
  background: #fff;
  padding: 5px;
}

.qr-meta {
  color: var(--text-2);
  font-size: 13px;
  text-align: center;
}

.link-btn {
  color: var(--accent);
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 18px;
}

.link-btn:hover {
  background: var(--accent-soft);
}

.addresses {
  font-size: 12px;
  color: var(--text-2);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  text-align: center;
  max-width: 280px;
  word-break: break-all;
}

.paired-wait {
  display: grid;
  justify-items: center;
  gap: 16px;
  text-align: center;
  color: var(--text-2);
}

/* ------------------------------------------------------------ Hauptansicht */

.app {
  display: grid;
  grid-template-columns: minmax(320px, 30%) 1fr;
  /*
   * Genau eine Zeile in Fensterhöhe. Ohne sie wüchse die Zeile mit dem längsten Inhalt (Gruppeninfo mit vielen
   * Mitgliedern, lange Chatliste) über das Fenster hinaus: Nichts scrollte, der Rest – samt Eingabefeld – läge
   * unerreichbar unter dem Fensterrand (html/body schneiden ab).
   */
  grid-template-rows: minmax(0, 1fr);
  height: 100%;
  max-width: 1700px;
  margin: 0 auto;
  background: var(--panel);
}

.sidebar {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  border-right: 1px solid var(--border);
  background: var(--panel);
}

.side-head {
  height: 64px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 12px 0 16px;
}

.side-head h2 {
  flex: 1;
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: var(--accent);
}

.offline {
  margin: 0 12px 8px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--accent-soft);
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.offline strong {
  display: block;
}

.offline span {
  display: block;
  color: var(--text-2);
  font-size: 13px;
}

.offline .wake-note {
  margin-top: 4px;
}

.offline .link-btn {
  margin: 4px 0 0 -12px;
  font-size: 13px;
}

/* MeshUp auf dem Handy veraltet (app.js: outdatedBanner) */
.phone-banner {
  margin: 0 12px 8px;
  padding: 10px 12px 6px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--danger) 9%, var(--panel));
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.phone-banner .pb-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--danger);
  color: #fff;
  display: grid;
  place-items: center;
  flex: none;
}

.phone-banner .pb-icon .icon {
  width: 18px;
  height: 18px;
}

.phone-banner .pb-text {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 2px;
  justify-items: start;
}

.phone-banner .pb-text strong {
  font-weight: 600;
  font-size: 13.5px;
}

.phone-banner .pb-text span {
  color: var(--text-2);
  font-size: 12.5px;
}

.phone-banner .link-btn {
  margin-left: -12px;
  font-size: 13px;
}

/* Ein anderes Handy versucht sich zu verbinden (app.js: otherPhoneNote) */
.other-phone {
  margin: 0 12px 8px;
  padding: 4px 4px 4px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  color: var(--text-2);
  font-size: 12.5px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.other-phone span {
  flex: 1;
  min-width: 0;
}

.other-phone .link-btn {
  flex: none;
  font-size: 12.5px;
}

.other-phone .other-phone-close {
  flex: none;
  width: 28px;
  height: 28px;
}

.other-phone .other-phone-close .icon {
  width: 16px;
  height: 16px;
}

.pair-other {
  max-width: 300px;
  display: flex;
  gap: 8px;
  align-items: flex-start;
  color: var(--text-2);
  font-size: 13px;
}

.pair-other .icon {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 1px;
}

.relink-dialog .qr {
  margin: 0 auto 10px;
}

.relink-dialog .qr-meta {
  margin-bottom: 10px;
}

.spinner {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2.5px solid var(--accent);
  border-right-color: transparent;
  animation: spin 0.9s linear infinite;
  flex: none;
  margin-top: 2px;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.search {
  margin: 0 12px;
  height: 40px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border-radius: 20px;
  background: var(--panel-head);
  color: var(--text-2);
}

.search .icon {
  width: 20px;
  height: 20px;
}

.search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 15px;
}

.filters {
  display: flex;
  gap: 8px;
  padding: 10px 12px 6px;
}

.filters button {
  padding: 5px 13px;
  border-radius: 16px;
  background: var(--panel-head);
  color: var(--text-2);
  font-size: 14px;
}

.filters button.on {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}

.chat-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0 12px;
}

.chat-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 12px 0 14px;
  height: 72px;
  cursor: pointer;
  margin: 0 6px;
  border-radius: 10px;
}

.chat-row:hover {
  background: var(--hover);
}

.chat-row.active {
  background: var(--selected);
}

.chat-row .body {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 2px;
}

.chat-row .line {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.chat-row .title {
  flex: 1;
  font-size: 16.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Netze über eine Bridge: Plakette „über …“ neben dem Namen. */
.net-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex: none;
  padding: 0 7px;
  border-radius: 10px;
  background: var(--panel-head);
  color: var(--text-2);
  font-size: 11.5px;
  line-height: 18px;
}

.net-badge .icon {
  width: 12px;
  height: 12px;
}

.chat-row .time {
  font-size: 12px;
  color: var(--text-2);
  flex: none;
}

.chat-row.unread .time {
  color: var(--accent);
  font-weight: 600;
}

.chat-row .preview {
  flex: 1;
  color: var(--text-2);
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 3px;
}

.chat-row .preview .typing {
  color: var(--accent);
}

/* Häkchen der eigenen letzten Nachricht – gelesen blau wie in der App. */
.chat-row .preview .tick {
  width: 18px;
  height: 18px;
  color: var(--tick);
}

.chat-row .preview .tick.read {
  color: var(--tick-read);
}

.chat-row .preview .tick.failed {
  color: var(--danger);
}

.chat-row .badge {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--badge);
  color: var(--on-badge);
  font-size: 12px;
  font-weight: 700;
  display: grid;
  place-items: center;
  flex: none;
}

.chat-row .muted-icon {
  width: 18px;
  height: 18px;
  color: var(--text-2);
}

/*
 * Menü zum Chat (chatmenu.js): Pfeil ⌄ ganz rechts in der zweiten Zeile – erscheint beim Überfahren, bei Tastaturfokus
 * und solange das Menü offen ist (wie bei WhatsApp Web); ohne Maus (Touchscreen) immer. Die Zeile bleibt so lange
 * hervorgehoben.
 */
.chat-row .row-menu {
  flex: none;
  display: grid;
  place-items: center;
  width: 0;
  height: 22px;
  padding: 0;
  margin-left: -6px;
  overflow: hidden;
  opacity: 0;
  border-radius: 50%;
  color: var(--text-2);
  transition:
    width var(--motion-fast) var(--ease),
    margin var(--motion-fast) var(--ease),
    opacity var(--motion-fast) linear,
    color var(--motion-fast) linear;
}

.chat-row .row-menu .icon {
  flex: none;
  width: 22px;
  height: 22px;
}

.chat-row:hover .row-menu,
.chat-row:focus-visible .row-menu,
.chat-row.menu-open .row-menu {
  width: 22px;
  margin-left: 0;
  opacity: 1;
}

.chat-row .row-menu:hover {
  color: var(--text);
}

.chat-row.menu-open:not(.active) {
  background: var(--hover);
}

:root.no-motion .chat-row .row-menu {
  transition: none;
}

@media (hover: none) {
  .chat-row .row-menu {
    width: 22px;
    margin-left: 0;
    opacity: 1;
  }
}

/* Einträge des Menüs: abgesetzter unterer Teil (blockieren, verlassen, leeren, löschen), Hinweis unter gesperrten. */
.menu.chat-list-menu {
  max-width: min(340px, calc(100vw - 16px));
  max-height: calc(100vh - 16px);
  overflow-y: auto;
}

.menu .menu-sep {
  height: 1px;
  margin: 6px 0;
  background: var(--border);
}

.menu .cm-text {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.menu .cm-hint {
  font-size: 12px;
  line-height: 1.3;
  color: var(--text-2);
}

.empty-list {
  padding: 40px 24px;
  text-align: center;
  color: var(--text-2);
}

.avatar {
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  overflow: hidden;
  position: relative;
  font-weight: 600;
  user-select: none;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar .online-dot {
  position: absolute;
  right: 1px;
  bottom: 1px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--panel);
}

.avatar-wrap {
  position: relative;
  flex: none;
}

.avatar-wrap .online-dot {
  position: absolute;
  right: 0;
  bottom: 1px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  border: 2.5px solid var(--panel);
}

/* ------------------------------------------------------------ Gespräch */

.conversation {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  /*
   * Bleibt in seiner Spalte: Bei offener Leiste rechts und schmalem Fenster ragten Kopfzeile und Eingabefeld sonst
   * über die Leiste (das Gespräch liegt als positioniertes Element darüber) – deren Ende und Schließen-Knopf wären
   * verdeckt, Klicks und Mausrad dort landeten im Gespräch. clip statt hidden: kein eigener Scrollbereich.
   */
  overflow-x: clip;
  background: var(--wallpaper);
  position: relative;
}

.welcome {
  flex: 1;
  display: grid;
  place-items: center;
  background: var(--panel-head);
  text-align: center;
  padding: 40px;
}

.welcome h1 {
  font-size: 30px;
  font-weight: 300;
  margin: 28px 0 12px;
}

.welcome p {
  color: var(--text-2);
  max-width: 480px;
  margin: 0 auto;
}

.welcome .lock {
  margin-top: 40px;
  display: inline-flex;
  gap: 6px;
  align-items: center;
  color: var(--text-2);
  font-size: 13px;
}

.welcome .lock .icon {
  width: 14px;
  height: 14px;
}

.conv-head {
  height: 64px;
  flex: none;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 16px;
  background: var(--panel-head);
  border-left: 1px solid var(--border);
}

.conv-head .who {
  flex: 1;
  min-width: 0;
}

.conv-head .name {
  font-size: 16px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.conv-head .status {
  font-size: 13px;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.conv-head .status.typing {
  color: var(--accent);
}

/* Liste samt „Nach unten“-Knopf: Er sitzt unten rechts in der Liste, nicht über dem, was darunter liegt. */
.messages-wrap {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  /* Hintergrund hier statt an der Liste: Beim Chatwechsel blendet nur der Verlauf ein, das Muster bleibt stehen. */
  background-color: var(--wallpaper);
  background-image: radial-gradient(var(--doodle) 1.4px, transparent 1.5px);
  background-size: 22px 22px;
}

.messages {
  flex: 1;
  overflow-y: auto;
  /* Nie seitlich scrollen – ragt doch einmal etwas heraus, keine Bildlaufleiste unter dem Verlauf. */
  overflow-x: hidden;
  padding: 12px 6% 8px;
}

/* Oben im Verlauf, solange es Älteres gibt: feste Höhe, beim Nachladen ein kleiner Ladekreis – nichts verschiebt sich. */
.load-more {
  height: 36px;
  display: grid;
  place-items: center;
  color: var(--text-2);
}

.spinner.small {
  width: 18px;
  height: 18px;
  border-width: 2px;
  margin: 0;
}

.day {
  display: flex;
  justify-content: center;
  margin: 10px 0 8px;
}

/*
 * Schwebendes Datum beim Scrollen (dayfloat.js): an der Stelle eines Trenners ganz oben in der Liste, blendet gut
 * eine Sekunde nach dem Scrollen aus. Früher klebten die Trenner selbst oben (sticky) – übereinander gestapelt,
 * ein breiterer schaute hinter einem schmaleren hervor, und sie verdeckten dauerhaft die oberste Nachricht.
 */
.day-float {
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.4s, transform 0.4s var(--ease);
}

.day-float.show {
  opacity: 1;
  transform: none;
  transition-duration: 0.15s;
}

.day-float.fast {
  transition-duration: 0.12s;
}

.day span,
.day-float span,
.system span {
  background: var(--chip);
  color: var(--chip-text);
  padding: 5px 12px;
  border-radius: 8px;
  font-size: 12.5px;
  box-shadow: var(--shadow);
}

.system {
  display: flex;
  justify-content: center;
  margin: 8px 0;
  text-align: center;
}

.system span {
  background: var(--system);
  color: var(--system-text);
  max-width: 80%;
}

.msg {
  display: flex;
  margin: 1px 0;
  position: relative;
}

.msg.first {
  margin-top: 8px;
}

.msg.out {
  justify-content: flex-end;
}

.msg .gutter {
  width: 36px;
  flex: none;
}

.bubble {
  position: relative;
  max-width: min(65%, 560px);
  padding: 6px 8px 7px 9px;
  border-radius: 8px;
  background: var(--bubble-in);
  box-shadow: var(--shadow);
  user-select: text;
  overflow-wrap: anywhere;
}

.msg.out .bubble {
  background: var(--bubble-out);
}

.msg.first.in .bubble {
  border-top-left-radius: 0;
}

.msg.first.out .bubble {
  border-top-right-radius: 0;
}

.msg.first.in .bubble::before,
.msg.first.out .bubble::before {
  content: "";
  position: absolute;
  top: 0;
  width: 8px;
  height: 13px;
  background: inherit;
}

.msg.first.in .bubble::before {
  left: -8px;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}

.msg.first.out .bubble::before {
  right: -8px;
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

.sender {
  font-size: 12.8px;
  font-weight: 600;
  margin-bottom: 2px;
}

.forwarded {
  font-size: 12.5px;
  font-style: italic;
  color: var(--text-2);
  display: flex;
  gap: 4px;
  align-items: center;
  margin-bottom: 2px;
}

.forwarded .icon {
  width: 15px;
  height: 15px;
}

.text {
  white-space: pre-wrap;
  font-size: 14.6px;
}

.text a {
  color: var(--accent);
}

/* Formatierung wie bei WhatsApp (textformat.js): Monospace, Code, Zitat- und Listenzeilen. */
.fmt-code,
.fmt-mono {
  font-family: ui-monospace, 'Cascadia Mono', 'DejaVu Sans Mono', Menlo, Consolas, monospace;
  font-size: 0.92em;
}

.fmt-code {
  background: color-mix(in srgb, currentColor 10%, transparent);
  border-radius: 4px;
  padding: 0 3px;
}

.fmt-line {
  display: block;
}

.fmt-quote {
  border-inline-start: 3px solid color-mix(in srgb, currentColor 35%, transparent);
  padding-inline-start: 8px;
  margin: 2px 0;
}

/* Hängender Einzug: umgebrochene Zeilen stehen unter dem Text, nicht unter „• “ bzw. „1. “. */
.fmt-bullet,
.fmt-numbered {
  padding-inline-start: 1.1em;
  text-indent: -1.1em;
}

.deleted {
  font-style: italic;
  color: var(--text-2);
}

/* Zeit und Häkchen unten rechts; der Abstandhalter reserviert Platz in der letzten Zeile. */
.meta-space {
  display: inline-block;
  width: 64px;
  height: 1px;
}

.msg.out .meta-space {
  width: 82px;
}

.msg.edited .meta-space {
  width: 132px;
}

.meta {
  position: absolute;
  right: 8px;
  bottom: 4px;
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  color: var(--text-2);
  white-space: nowrap;
}

.meta .tick {
  width: 16px;
  height: 16px;
  color: var(--tick);
}

.meta .tick.read {
  color: var(--tick-read);
}

.meta .tick.failed {
  color: var(--danger);
}

/*
 * Zeit und Häkchen auf Foto, Video und Album: weiß auf einer kleinen dunklen Pille wie in der App (MediaPill) – so dunkel,
 * dass Weiß auch auf einem weißen Foto lesbar bleibt (≈ 4,7 : 1; vorher 0,35 und auf hellen Bildern schwach).
 */
/*
 * Lage wie in der App: 6 px vom rechten, 5 px vom unteren Rand des Bildes (das Bild endet 14 px vor dem rechten und
 * 10 px vor dem unteren Rand der Blase) – vorher klebte die Pille unten am Rand und ragte rechts 2 px hinaus.
 */
.meta.on-image {
  color: #fff;
  padding: 2px 6px;
  border-radius: 10px;
  background: var(--on-media);
  right: 20px;
  bottom: 15px;
}

/* Album: das Raster endet 3 px vor dem rechten und 5 px vor dem unteren Rand der Blase. */
.bubble.album > .meta.on-image {
  right: 8px;
  bottom: 10px;
}

.meta.on-image .tick {
  color: #fff;
}

/* Gelesen in hellem Blau (wie Azure A200 in der App), fehlgeschlagen hellrot – die dunklen Töne gingen auf der Pille unter. */
.meta.on-image .tick.read {
  color: #80bfff;
}

.meta.on-image .tick.failed {
  color: #ff8a80;
}

.quote {
  border-radius: 6px;
  background: var(--quote-in);
  border-left: 4px solid var(--accent);
  padding: 5px 8px;
  margin: 0 0 4px;
  font-size: 13px;
  cursor: default;
}

.msg.out .quote {
  background: var(--quote-out);
}

.quote .q-name {
  font-weight: 600;
  color: var(--accent);
  font-size: 12.8px;
}

.quote .q-text {
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 420px;
}

.image {
  margin: -3px -5px 3px -6px;
  border-radius: 6px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.08);
  position: relative;
  cursor: zoom-in;
}

.image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.link-card {
  display: flex;
  gap: 0;
  border-radius: 6px;
  overflow: hidden;
  background: var(--quote-in);
  margin: -2px -4px 6px -5px;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

.msg.out .link-card {
  background: var(--quote-out);
}

.link-card img {
  width: 84px;
  height: 84px;
  object-fit: cover;
  flex: none;
}

.link-card .lc-body {
  padding: 8px 10px;
  min-width: 0;
}

.link-card .lc-title {
  font-weight: 600;
  font-size: 13.5px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.link-card .lc-desc {
  font-size: 12.5px;
  color: var(--text-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.link-card .lc-host {
  font-size: 12px;
  color: var(--text-2);
}

.attachment {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 240px;
  padding: 6px 4px 18px;
}

.attachment .file-icon {
  width: 40px;
  height: 46px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  background: var(--accent);
  flex: none;
}

.attachment .a-name {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 300px;
}

.attachment .a-sub {
  font-size: 12.5px;
  color: var(--text-2);
}

/* Funkspruch vom Funkgerät des Handys. */
.voice .radio-badge {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
}

.location {
  display: grid;
  gap: 4px;
  min-width: 240px;
  padding-bottom: 16px;
}

.location .map {
  height: 120px;
  border-radius: 6px;
  margin: -2px -4px 0 -5px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--accent-soft), var(--quote-in));
  color: var(--accent);
  cursor: pointer;
}

.location .map .icon {
  width: 44px;
  height: 44px;
}

.location .live {
  color: var(--accent);
  font-weight: 600;
  font-size: 13px;
}

/* Bitte um den Live-Standort (locreq.js): Symbol, Titel und Stand; eingehend offen mit Ablehnen/Teilen. */
.locreq {
  display: grid;
  gap: 10px;
  width: 280px;
  max-width: 100%;
  padding: 4px 2px 18px;
}

.locreq-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.locreq-icon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  flex: none;
  background: color-mix(in srgb, var(--text-2) 16%, transparent);
  color: var(--text-2);
}

.locreq.open .locreq-icon {
  background: var(--accent-soft);
  color: var(--accent);
}

.locreq-title {
  font-weight: 600;
  line-height: 1.3;
}

.locreq-status {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--text-2);
}

.locreq-status .icon {
  width: 15px;
  height: 15px;
}

.locreq.shared .locreq-status {
  color: var(--accent);
}

.locreq-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.locreq-actions button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  border-radius: 18px;
  font-weight: 600;
}

.locreq-actions .icon {
  width: 18px;
  height: 18px;
}

.locreq-decline {
  border: 1px solid color-mix(in srgb, var(--text-2) 55%, transparent);
  color: var(--accent);
}

.locreq-share {
  background: var(--accent);
  color: var(--on-accent);
}

.locreq-actions button:hover:not(:disabled) {
  filter: brightness(1.06);
}

.locreq-decline:hover:not(:disabled) {
  background: var(--accent-soft);
}

.locreq-actions button:disabled {
  opacity: 0.45;
  cursor: default;
}

.locreq-confirm {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
  font-size: 13px;
}

.locreq-confirm .icon {
  width: 20px;
  height: 20px;
}

.call {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 2px 16px;
  min-width: 200px;
}

.call .icon {
  color: var(--accent);
}

.big-emoji {
  font-size: 46px;
  line-height: 1.2;
  padding: 0 4px;
  user-select: text;
}

.big-emoji.n2 {
  font-size: 40px;
}

.big-emoji.n3 {
  font-size: 34px;
}

.emoji-meta {
  display: inline-flex;
  gap: 3px;
  align-items: center;
  font-size: 11px;
  color: var(--text-2);
  background: var(--bubble-in);
  padding: 2px 6px;
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.msg.out .emoji-meta {
  background: var(--bubble-out);
}

.emoji-meta .tick {
  width: 16px;
  height: 16px;
  color: var(--tick);
}

.emoji-meta .tick.read {
  color: var(--tick-read);
}

.emoji-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  max-width: 65%;
}

.msg.out .emoji-col {
  align-items: flex-end;
}

.emoji-col .sender {
  background: var(--bubble-in);
  padding: 3px 8px;
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.reactions {
  position: absolute;
  bottom: -14px;
  left: 10px;
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--bubble-in);
  border: 2px solid var(--wallpaper);
  border-radius: 14px;
  padding: 1px 6px;
  font-size: 13px;
  cursor: pointer;
  z-index: 1;
}

.reactions .count {
  color: var(--text-2);
  font-size: 11.5px;
  margin-left: 2px;
}

.msg.has-reactions {
  margin-bottom: 16px;
}

/* Nicht gesendet: rotes Ausrufezeichen links neben der eigenen Blase (Klick: erneut senden, löschen) */
.failed-mark {
  flex: none;
  align-self: center;
  width: 32px;
  height: 32px;
  margin-right: 4px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--danger);
}

.failed-mark:hover {
  background: var(--chip);
  box-shadow: var(--shadow);
}

.failed-mark .icon {
  width: 24px;
  height: 24px;
}

/* Aktionen beim Überfahren: Antworten, Reagieren */
.actions {
  display: none;
  align-self: center;
  gap: 2px;
  padding: 0 6px;
}

.msg:hover .actions,
.msg.menu-open .actions {
  display: flex;
}

.actions button {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--text-2);
  background: var(--chip);
  box-shadow: var(--shadow);
}

.actions button:hover {
  color: var(--text);
}

.actions .icon {
  width: 18px;
  height: 18px;
}

.popover {
  position: fixed;
  z-index: 50;
  background: var(--panel);
  border-radius: 24px;
  box-shadow: var(--menu-shadow);
  padding: 6px;
  display: flex;
  gap: 2px;
}

.popover button {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  font-size: 24px;
  line-height: 1;
}

.popover button:hover {
  background: var(--hover);
}

.popover button.mine {
  background: var(--selected);
}

/* ------------------------------------------------------------ Emoji-Auswahl (emojipicker.js) */

.popover button.more {
  display: grid;
  place-items: center;
  color: var(--text-2);
}

/* Über dem Eingabefeld (bottom setzt toggleEmojiPanel); für Reaktionen fest neben der Nachricht (.floating). */
.emoji-panel {
  position: absolute;
  left: 12px;
  bottom: 70px;
  z-index: 20;
  width: 362px;
  height: min(440px, calc(100% - 140px));
  min-height: 260px;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border-radius: 16px;
  box-shadow: var(--menu-shadow);
  overflow: hidden;
}

.emoji-panel.floating {
  position: fixed;
  z-index: 60;
  height: min(440px, calc(100vh - 16px));
}

.ep-top {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 10px 6px;
}

.ep-search {
  flex: 1;
  min-width: 0;
  height: 34px;
  border: 0;
  outline: 0;
  border-radius: 17px;
  background: var(--panel-head);
  color: var(--text);
  font: inherit;
  padding: 0 14px;
}

.ep-search:focus-visible {
  box-shadow: inset 0 0 0 2px var(--accent);
}

.ep-skin-btn,
.ep-skin {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 20px;
  line-height: 1;
  padding: 0;
  flex: none;
}

.ep-skin-btn:hover,
.ep-skin-btn[aria-expanded="true"],
.ep-skin:hover {
  background: var(--hover);
}

.ep-skins {
  flex: none;
  display: flex;
  justify-content: flex-end;
  gap: 2px;
  padding: 0 10px 6px;
}

.ep-skin[aria-checked="true"] {
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 2px var(--accent);
}

/* Kategorien: grau, der Abschnitt im Bild farbig und unterstrichen. */
.ep-tabs {
  flex: none;
  display: flex;
  padding: 0 8px;
  border-bottom: 1px solid var(--border);
}

.ep-tab {
  flex: 1;
  height: 36px;
  padding: 0;
  font-size: 18px;
  line-height: 1;
  border-bottom: 2px solid transparent;
  filter: grayscale(1);
  opacity: 0.6;
}

.ep-tab:hover,
.ep-tab:focus-visible {
  filter: none;
  opacity: 1;
  outline: none;
  background: var(--hover);
}

.ep-tab.active {
  filter: none;
  opacity: 1;
  border-bottom-color: var(--accent);
}

.ep-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  position: relative;
  padding: 0 8px 8px 10px;
}

.ep-title {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--panel);
  color: var(--text-2);
  font-size: 12.5px;
  font-weight: 600;
  padding: 8px 4px 4px;
}

/* 9 Spalten zu 36 px – EMOJI_COLS/EMOJI_CELL in emojipicker.js rechnen damit die Höhe noch leerer Gruppen. */
.ep-grid {
  display: grid;
  grid-template-columns: repeat(9, 36px);
  grid-auto-rows: 36px;
}

.ep-cell {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 8px;
  font-size: 24px;
  line-height: 1;
  display: grid;
  place-items: center;
}

.ep-cell:hover {
  background: var(--hover);
}

.ep-cell:focus-visible {
  outline: none;
  background: var(--hover);
  box-shadow: inset 0 0 0 2px var(--accent);
}

.ep-cell.mine {
  background: var(--selected);
}

.ep-empty {
  padding: 40px 12px;
  text-align: center;
  color: var(--text-2);
}

.ep-preview {
  flex: none;
  height: 52px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border-top: 1px solid var(--border);
  background: var(--panel-head);
}

.ep-big {
  font-size: 30px;
  line-height: 1;
}

.ep-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ep-name,
.ep-code {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ep-name {
  font-weight: 600;
}

.ep-code,
.ep-hint {
  color: var(--text-2);
  font-size: 12.5px;
}

/* „:“-Vorschläge über dem Feld (left, bottom, width setzt emojipicker.js). */
.emoji-suggest {
  position: fixed;
  z-index: 95;
  background: var(--panel);
  border-radius: 12px;
  box-shadow: var(--menu-shadow);
  padding: 4px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.es-item {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 36px;
  padding: 0 10px;
  border-radius: 8px;
  cursor: pointer;
}

.es-item.selected {
  background: var(--selected);
}

.es-emoji {
  flex: none;
  width: 26px;
  font-size: 22px;
  line-height: 1;
  text-align: center;
}

.es-code {
  flex: none;
  max-width: 60%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.es-name {
  flex: 1;
  min-width: 0;
  text-align: right;
  color: var(--text-2);
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.to-bottom {
  position: absolute;
  right: 22px;
  bottom: 14px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--panel);
  box-shadow: var(--menu-shadow);
  display: grid;
  place-items: center;
  color: var(--text-2);
  z-index: 5;
}

.composer {
  flex: none;
  background: var(--composer);
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-left: 1px solid var(--border);
}

.reply-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--input);
  border-radius: 10px;
  padding: 6px 6px 6px 10px;
}

.reply-bar .quote {
  flex: 1;
  margin: 0;
  min-width: 0;
}

.compose-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  position: relative;
}

/* Formatleiste über dem Feld, solange Text markiert ist (Strg+B/I, Strg+Umschalt+X/M). */
.format-bar {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 56px;
  display: flex;
  gap: 2px;
  padding: 3px;
  background: var(--panel);
  border-radius: 10px;
  box-shadow: var(--menu-shadow);
  z-index: 5;
}

.format-bar[hidden] {
  display: none;
}

.fmt-btn {
  min-width: 34px;
  height: 30px;
  padding: 0 6px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

.fmt-btn:hover {
  background: var(--hover);
}

.fmt-btn.fmt-format_bold {
  font-weight: 700;
}

.fmt-btn.fmt-format_italic {
  font-style: italic;
}

.fmt-btn.fmt-format_strike {
  text-decoration: line-through;
}

.fmt-btn.fmt-format_mono {
  font-family: ui-monospace, 'Cascadia Mono', 'DejaVu Sans Mono', Menlo, Consolas, monospace;
  font-size: 12.5px;
}

.compose-box {
  flex: 1;
  /* Darf schmaler werden als das Textfeld von sich aus wäre – der Senden-Knopf bleibt im schmalen Gespräch sichtbar. */
  min-width: 0;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  background: var(--input);
  border-radius: 24px;
  padding: 4px 6px;
  min-height: 48px;
}

.compose-box textarea {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  resize: none;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 15px;
  line-height: 20px;
  padding: 10px 4px;
  max-height: 140px;
}

.send {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  display: grid;
  place-items: center;
  flex: none;
}

.send:disabled {
  opacity: 0.5;
  cursor: default;
}

.send .icon {
  width: 22px;
  height: 22px;
}

/*
 * Rechts neben dem Eingabefeld wie bei Element X: leer ein schlichtes Mikrofon, sobald Text da ist (oder
 * beim Bearbeiten, .ready) der runde Senden-Knopf, der kurz aufploppt. Beide liegen übereinander in einem
 * festen Platz – nichts verschiebt sich. Ausgeblendet erst am Ende unsichtbar, damit man das Ausblenden sieht.
 */
.compose-action {
  flex: none;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
}

.compose-action > button {
  grid-area: 1 / 1;
  transition:
    transform 0.2s cubic-bezier(0.2, 0, 0, 1),
    opacity 0.15s linear,
    visibility 0s;
}

.compose-action:not(.ready) .send,
.compose-action.ready .mic-btn {
  opacity: 0;
  visibility: hidden;
  transition:
    transform 0.15s cubic-bezier(0.3, 0, 1, 1),
    opacity 0.15s linear,
    visibility 0s 0.15s;
}

.compose-action:not(.ready) .send {
  transform: scale(0.4);
}

.compose-action.ready .mic-btn {
  transform: scale(0.6);
}

@media (prefers-reduced-motion: reduce) {
  /* Ohne Bewegung: nur kurz überblenden. */
  .compose-action > button,
  .compose-action:not(.ready) .send,
  .compose-action.ready .mic-btn {
    transform: none;
  }
}

.compose-hint {
  font-size: 12px;
  color: var(--text-2);
  text-align: center;
}

/* ------------------------------------------------------------ Menüs, Dialoge, Hinweise */

.menu {
  position: fixed;
  z-index: 60;
  min-width: 220px;
  background: var(--panel);
  border-radius: 16px;
  box-shadow: var(--menu-shadow);
  padding: 8px 0;
}

.menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 11px 22px;
  font-size: 14.5px;
}

.menu button:hover {
  background: var(--hover);
}

.menu button.danger {
  color: var(--danger);
}

.menu .menu-info,
.menu .menu-title {
  padding: 8px 22px 10px;
  font-size: 12.5px;
  color: var(--text-2);
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}

.overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(11, 20, 26, 0.55);
  display: grid;
  place-items: center;
}

.dialog {
  width: min(440px, calc(100% - 48px));
  background: var(--panel);
  border-radius: 24px;
  padding: 24px 24px 14px;
  box-shadow: var(--menu-shadow);
}

.dialog h3 {
  margin: 0 0 12px;
  font-size: 19px;
  font-weight: 500;
}

.dialog p {
  margin: 0 0 18px;
  color: var(--text-2);
}

.dialog .buttons {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.dialog .buttons button {
  padding: 9px 16px;
  border-radius: 20px;
  color: var(--accent);
  font-weight: 600;
}

.dialog .buttons button:hover {
  background: var(--accent-soft);
}

.dialog .buttons button.danger {
  color: var(--danger);
}

.viewer {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(0, 0, 0, 0.88);
  display: grid;
  place-items: center;
  cursor: zoom-out;
}

.viewer img {
  max-width: 92vw;
  max-height: 92vh;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  /* Mitte über translate – transform bleibt frei fürs Ein- und Ausblenden (motion.js). */
  translate: -50% 0;
  background: #323739;
  color: #fff;
  padding: 11px 20px;
  border-radius: 10px;
  z-index: 100;
  box-shadow: var(--menu-shadow);
  max-width: 80vw;
  /* Nur Text: Klicks gehen an das, was darunter liegt. */
  pointer-events: none;
}

/* Während der Aufnahme über der Leiste – sonst verdeckte der Hinweis „Noch 15 s …“ Zeit und Löschen. */
body:has(.compose-row.recording) .toast {
  bottom: 88px;
}

/* Notruf (renderer/sos.js): Hinweisfenster über allem, solange er läuft eine rote Pille oben. */
:root {
  --sos: #d32f2f;
  --sos-deep: #b71c1c;
  --on-sos: #ffffff;
}

/* Ohne transform: Sonst wäre die Ebene der Bezugsrahmen für das Hinweisfenster (position: fixed). */
#sos-layer {
  position: fixed;
  top: 10px;
  left: 0;
  right: 0;
  z-index: 95;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  pointer-events: none;
}

#sos-layer > * {
  pointer-events: auto;
}

.sos-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(520px, 90vw);
  padding: 7px 16px 7px 8px;
  border-radius: 999px;
  background: var(--sos);
  color: var(--on-sos);
  font-weight: 600;
  box-shadow: var(--menu-shadow);
  animation: sos-pulse 1.4s ease-in-out infinite;
}

.sos-pill:hover {
  background: var(--sos-deep);
}

.sos-pill-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sos-badge {
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--on-sos);
  color: var(--sos);
  font-weight: 800;
  letter-spacing: 0.04em;
}

@keyframes sos-pulse {
  50% {
    box-shadow: 0 0 0 6px rgba(211, 47, 47, 0.25), var(--menu-shadow);
  }
}

.sos-overlay {
  position: fixed;
  inset: 0;
  z-index: 96;
  background: rgba(11, 20, 26, 0.6);
  display: grid;
  place-items: center;
}

.sos-dialog {
  width: min(480px, calc(100% - 48px));
  background: var(--panel);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: var(--menu-shadow);
}

.sos-head {
  background: var(--sos);
  color: var(--on-sos);
  padding: 18px 24px 16px;
}

.sos-label {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.9;
}

.sos-name {
  font-size: 22px;
  font-weight: 700;
  margin-top: 2px;
}

.sos-meta {
  margin-top: 6px;
  opacity: 0.92;
}

.sos-text {
  padding: 18px 24px 4px;
  font-size: 16px;
}

.sos-text.quoted::before {
  content: '„';
}

.sos-text.quoted::after {
  content: '“';
}

.sos-location,
.sos-answered {
  padding: 6px 24px 0;
  color: var(--text-2);
}

.sos-answered {
  color: var(--sos);
  font-weight: 600;
}

.sos-replies {
  display: flex;
  gap: 12px;
  padding: 18px 24px 0;
}

.sos-replies button {
  flex: 1;
  padding: 12px 16px;
  border-radius: 24px;
  font-weight: 700;
  font-size: 15px;
}

.sos-outline {
  color: var(--sos);
  box-shadow: inset 0 0 0 1.5px var(--sos);
}

.sos-outline:hover:not(:disabled) {
  background: rgba(211, 47, 47, 0.1);
}

.sos-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px 12px;
}

.sos-spacer {
  flex: 1;
}

.sos-actions button {
  padding: 9px 16px;
  border-radius: 20px;
  font-weight: 600;
}

.sos-secondary {
  color: var(--sos);
}

.sos-secondary:hover:not(:disabled) {
  background: rgba(211, 47, 47, 0.1);
}

.sos-primary {
  background: var(--sos);
  color: var(--on-sos);
}

.sos-primary:hover:not(:disabled) {
  background: var(--sos-deep);
}

.sos-dialog button:disabled {
  opacity: 0.45;
  cursor: default;
}

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-thumb {
  background: rgba(134, 150, 160, 0.35);
  border-radius: 4px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

/* ------------------------------------------------------------ Erweiterungen: Anhänge, Menüs, Leiste, Status */

.icon-btn:disabled {
  opacity: 0.4;
  cursor: default;
  background: none;
}

.icon-btn.small {
  width: 32px;
  height: 32px;
}

.icon-btn.small .icon {
  width: 20px;
  height: 20px;
}

.spinner.center {
  margin: 24px auto;
}

.menu.with-icons button {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 20px;
}

.menu.with-icons .icon {
  width: 20px;
  height: 20px;
  color: var(--text-2);
}

.menu.with-icons button.danger .icon {
  color: var(--danger);
}

.attach-menu .icon {
  color: var(--accent) !important;
}

/* Kopf im Gespräch: Bild und Name öffnen die Info */
.conv-who {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  height: 100%;
}

/* Ziehen & Ablegen */
.drop-hint {
  position: absolute;
  inset: 64px 0 0;
  z-index: 30;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--panel-head) 88%, transparent);
  border: 3px dashed var(--accent);
  border-radius: 16px;
  margin: 10px;
  pointer-events: none;
}

.drop-hint div {
  display: grid;
  justify-items: center;
  gap: 12px;
  color: var(--accent);
  font-size: 18px;
  font-weight: 600;
}

.drop-hint .icon {
  width: 48px;
  height: 48px;
}

/* Fortschritt beim Senden (wie die Karte in der App) und wellige Balken */
.sending-card {
  margin: 0 12px 6px;
  padding: 10px 14px 12px;
  background: var(--panel);
  border-radius: 16px;
  box-shadow: var(--shadow);
  display: grid;
  gap: 8px;
  border-left: 1px solid var(--border);
}

.sc-text {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13.5px;
}

.sc-pct {
  color: var(--accent);
  font-weight: 600;
}

.wavy {
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(var(--accent-soft), var(--accent-soft)) center / 100% 4px no-repeat;
  overflow: hidden;
}

.wavy i {
  display: block;
  height: 100%;
  max-width: 100%;
  transition: width 0.25s;
  background-color: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='8' viewBox='0 0 20 8'%3E%3Cpath d='M0 4 Q5 0 10 4 T20 4' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x left center / 20px 8px;
  animation: wave-run 1.2s linear infinite;
}

@keyframes wave-run {
  to {
    -webkit-mask-position: 20px center;
  }
}

.dl-bar {
  height: 4px;
  border-radius: 2px;
  background: var(--accent-soft);
  overflow: hidden;
  margin-top: 6px;
}

.dl-bar i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width 0.25s;
}

.dl-bar.phone i {
  background: var(--tick);
}

/* Vorschau vor dem Senden */
.send-dialog {
  position: fixed;
  inset: 0;
  z-index: 85;
  background: var(--panel-head);
  display: grid;
  grid-template-rows: 64px 1fr auto;
}

.sd-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
}

.sd-title {
  font-size: 16px;
  font-weight: 500;
}

.sd-stage {
  display: grid;
  place-items: center;
  min-height: 0;
  padding: 12px 32px;
}

.sd-stage img,
.sd-stage video {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: var(--menu-shadow);
}

.doc-preview {
  display: grid;
  justify-items: center;
  gap: 10px;
  text-align: center;
}

.file-icon.big {
  width: 96px;
  height: 116px;
  border-radius: 12px;
  font-size: 18px;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 700;
  background: var(--accent);
}

.sd-bottom {
  display: grid;
  gap: 10px;
  padding: 12px 24px 18px;
  justify-items: center;
}

.sd-caption {
  width: min(680px, 100%);
  border: 0;
  outline: 0;
  border-radius: 12px;
  padding: 12px 16px;
  font: inherit;
  font-size: 15px;
  background: var(--input);
  color: var(--text);
}

.sd-quality {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--text-2);
}

.sd-quality span {
  margin-right: 6px;
}

.sd-quality button {
  padding: 6px 14px;
  border-radius: 18px;
  background: var(--panel);
  border: 1px solid var(--border);
}

.sd-quality button.on {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
  font-weight: 600;
}

.sd-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}

.sd-strip {
  flex: 1;
  display: flex;
  gap: 8px;
  justify-content: center;
  overflow-x: auto;
  padding: 4px;
}

.sd-thumb {
  width: 54px;
  height: 54px;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  flex: none;
  border: 2px solid transparent;
  background: var(--panel);
}

.sd-thumb.on {
  border-color: var(--accent);
}

.sd-thumb img,
.sd-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sd-thumb .doc-preview .file-icon {
  width: 100%;
  height: 50px;
  border-radius: 0;
}

.sd-thumb .file-icon.big {
  width: 100%;
  height: 100%;
  border-radius: 0;
  font-size: 11px;
}

.sd-remove {
  position: absolute;
  right: 2px;
  top: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  display: none;
  place-items: center;
}

.sd-remove .icon {
  width: 14px;
  height: 14px;
}

.sd-thumb:hover .sd-remove {
  display: grid;
}

.sd-add {
  width: 54px;
  height: 54px;
  border-radius: 8px;
  border: 1.5px dashed var(--text-2);
  color: var(--text-2);
  display: grid;
  place-items: center;
  flex: none;
}

.sd-send {
  position: relative;
}

.sd-count {
  position: absolute;
  right: -4px;
  top: -6px;
  min-width: 20px;
  height: 20px;
  border-radius: 10px;
  background: var(--panel);
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  display: grid;
  place-items: center;
  box-shadow: var(--shadow);
}

.sd-count:empty {
  display: none;
}

/* Sprachaufnahme */
.compose-row.recording {
  align-items: center;
}

.rec-box {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--input);
  border-radius: 24px;
  padding: 0 18px;
  height: 48px;
  font-variant-numeric: tabular-nums;
}

.rec-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--danger);
  animation: blink 1s ease-in-out infinite;
}

@keyframes blink {
  50% {
    opacity: 0.25;
  }
}

.rec-wave {
  flex: 1;
  min-width: 0;
  height: 28px;
  color: var(--accent);
}

/*
 * Sprachnachricht wie bei WhatsApp (und in der App): Profilbild mit Mikrofon (eigene links, fremde rechts), großes
 * Dreieck ohne Kreis, Wellenform mit Positions-Punkt über die übrige Breite (gespielter Teil fließend über --p, je Bild
 * gesetzt; Rest deckend zwischen Blase und Schrift), darunter Dauer links, Uhrzeit und Haken rechts. Beim Abspielen
 * ersetzt die Tempo-Pille das Bild. Mikrofon und Punkt sind grün, solange eine eingehende ungehört ist; das Mikrofon
 * eigener ist grau, bis alle Empfänger sie abgespielt haben (.heard) – sonst in der Akzentfarbe (bei WhatsApp blau).
 */
.voice {
  --p: 0;
  --voice-new: #1daa61;
  --voice-bubble: var(--bubble-in);
  --wave-played: var(--accent);
  --wave-rest: color-mix(in srgb, var(--text) 30%, var(--voice-bubble));
  --voice-mic: var(--tick-read);
  --voice-control: color-mix(in srgb, var(--text-2) 70%, var(--text));
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 48px;
  grid-template-rows: 36px auto;
  grid-template-areas:
    "play wave side"
    ". foot side";
  column-gap: 6px;
  align-items: center;
  width: 316px;
  max-width: 100%;
  min-width: 240px;
  padding: 3px 0 0;
}

/* Eigene: Bild links. */
.msg.out .voice {
  --voice-bubble: var(--bubble-out);
  --voice-mic: var(--tick);
  grid-template-columns: 48px 36px minmax(0, 1fr);
  grid-template-areas:
    "side play wave"
    "side . foot";
}

.msg.out .voice.heard {
  --voice-mic: var(--tick-read);
}

.voice.unplayed {
  --wave-played: var(--voice-new);
  --voice-mic: var(--voice-new);
}

@media (prefers-color-scheme: dark) {
  .voice {
    --voice-new: #21c063;
  }
}

.voice .v-side {
  grid-area: side;
  position: relative;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
}

.voice .v-photo {
  position: relative;
  width: 48px;
  height: 48px;
}

/* Mikrofon außen unten am Bild; der Rand in der Blasenfarbe hebt es vom Foto ab. */
.voice .v-mic {
  position: absolute;
  bottom: -3px;
  right: -5px;
  display: grid;
  color: var(--voice-mic);
  filter: drop-shadow(1px 0 0 var(--voice-bubble)) drop-shadow(-1px 0 0 var(--voice-bubble)) drop-shadow(0 1px 0 var(--voice-bubble))
    drop-shadow(0 -1px 0 var(--voice-bubble));
  pointer-events: none;
}

.msg.out .voice .v-mic {
  right: auto;
  left: -5px;
}

.voice .v-mic .icon {
  width: 20px;
  height: 20px;
}

.voice .play {
  grid-area: play;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--voice-control);
  transition: color 0.15s, transform 0.15s;
}

.voice .play:hover {
  color: var(--text);
}

.voice .play:active {
  transform: scale(0.92);
}

.voice .play:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.voice .play .icon {
  width: 36px;
  height: 36px;
}

.voice .wave {
  grid-area: wave;
}

.wave {
  position: relative;
  height: 30px;
  cursor: pointer;
  touch-action: none;
  border-radius: 6px;
}

.wave:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.wave-bars {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2px;
  pointer-events: none;
}

/* Schmale runde Striche; leise Stellen bleiben Punkte wie bei WhatsApp. */
.wave-bars i {
  flex: 1 1 0;
  max-width: 3px;
  /* Im schmalen Gespräch (Leiste rechts offen) dürfen die Striche dünner werden, statt aus der Blase zu ragen. */
  min-width: 1px;
  min-height: 3px;
  border-radius: 99px;
  background: var(--wave-rest);
}

.wave-bars.fill {
  clip-path: inset(0 calc((1 - var(--p)) * 100%) 0 0);
}

.wave-bars.fill i {
  background: var(--wave-played);
}

/* Der Punkt steht wie bei WhatsApp immer da – vor dem Abspielen am Anfang. */
.wave .knob {
  position: absolute;
  top: 50%;
  left: clamp(6.5px, calc(var(--p) * 100%), calc(100% - 6.5px));
  width: 13px;
  height: 13px;
  margin: -6.5px 0 0 -6.5px;
  border-radius: 50%;
  background: var(--wave-played);
  transition: transform 0.15s;
  pointer-events: none;
}

.voice.dragging .wave .knob {
  transform: scale(1.3);
}

.voice .v-foot {
  grid-area: foot;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 16px;
  margin-top: -1px;
}

.voice .dur {
  flex: 0 1 auto;
  min-width: 0;
  font-size: 11.5px;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.voice .v-foot .meta {
  position: static;
  margin-left: auto;
}

/* Tempo-Pille statt des Bilds, solange sie spielt. */
.voice .speed {
  display: none;
  min-width: 40px;
  padding: 0 8px;
  border-radius: 99px;
  font-size: 13px;
  font-weight: 700;
  line-height: 26px;
  color: #fff;
  background: color-mix(in srgb, var(--text) 45%, var(--voice-bubble));
}

.voice.playing .speed {
  display: inline-block;
}

.voice.playing .v-photo {
  display: none;
}

/*
 * Musik und andere Tondateien wie in der App: Cover (sonst eine Note in der Akzentfarbe), Titel und Interpret, runder
 * Tonal-Knopf wie bei Sprachnachrichten, schlanke Leiste (gespielt in der Akzentfarbe über --p, schon geladen heller
 * über --b), Zeit und Geschwindigkeit; darunter Typ und Größe mit Öffnen und Speichern.
 */
.music {
  --p: 0;
  --b: 0;
  --mu-played: var(--accent);
  --mu-rest: color-mix(in srgb, var(--text) 30%, var(--bubble-in));
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 300px;
  max-width: 360px;
  padding: 4px 2px 18px;
}

.msg.out .music {
  --mu-rest: color-mix(in srgb, var(--text) 30%, var(--bubble-out));
}

.music .mu-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.music .mu-cover {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 10px;
  overflow: hidden;
  display: grid;
  place-items: center;
  color: var(--mu-played);
  background: color-mix(in srgb, var(--mu-played) 16%, transparent);
}

.music .mu-cover .icon {
  width: 30px;
  height: 30px;
}

.music .mu-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.music .mu-titles {
  flex: 1;
  min-width: 0;
}

.music .mu-title {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.music .mu-artist {
  font-size: 13px;
  color: var(--text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.music .mu-player {
  display: flex;
  align-items: center;
  gap: 10px;
}

.music .play {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--mu-played);
  background: color-mix(in srgb, var(--mu-played) 14%, transparent);
  transition: background 0.15s, transform 0.15s;
}

.music .play:hover {
  background: color-mix(in srgb, var(--mu-played) 22%, transparent);
}

.music .play:active {
  transform: scale(0.94);
}

.music .play .icon {
  width: 26px;
  height: 26px;
}

/* Wartet auf die ersten Stücke vom Handy. */
.music.loading .play {
  animation: mu-wait 0.9s ease-in-out infinite alternate;
}

@keyframes mu-wait {
  to {
    background: color-mix(in srgb, var(--mu-played) 30%, transparent);
  }
}

.music .mu-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mu-seek {
  position: relative;
  height: 22px;
  cursor: pointer;
  touch-action: none;
  border-radius: 6px;
}

.mu-seek:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.mu-track {
  position: absolute;
  left: 6px;
  right: 6px;
  top: 50%;
  height: 3px;
  margin-top: -1.5px;
  border-radius: 99px;
  background: var(--mu-rest);
  overflow: hidden;
  pointer-events: none;
}

.mu-track i {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 99px;
}

.mu-track .mu-buf {
  width: calc(var(--b) * 100%);
  background: color-mix(in srgb, var(--mu-played) 35%, var(--mu-rest));
}

.mu-track .mu-done {
  width: calc(var(--p) * 100%);
  background: var(--mu-played);
}

.mu-seek .knob {
  position: absolute;
  top: 50%;
  left: calc(6px + var(--p) * (100% - 12px));
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: var(--mu-played);
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.15s, transform 0.15s;
  pointer-events: none;
}

.music.active .mu-seek .knob,
.music.dragging .mu-seek .knob {
  opacity: 1;
  transform: scale(1);
}

.music.dragging .mu-seek .knob {
  transform: scale(1.3);
}

.music .mu-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 16px;
}

.music .dur {
  flex: 1;
  font-size: 12px;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}

.music .speed {
  display: none;
  padding: 0 7px;
  border-radius: 99px;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 17px;
  color: var(--on-accent);
  background: var(--mu-played);
}

.music.active .speed {
  display: inline-block;
}

.music .mu-info {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
}

.music .mu-details {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  color: var(--text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.music .a-actions {
  display: flex;
  gap: 2px;
}

.music .dl-bar {
  margin-top: 0;
}

/* Vorschau einer Tondatei im Sendedialog: abspielbar, mit Dauer. */
.doc-preview .sd-audio {
  width: min(360px, 80vw);
  margin-top: 12px;
}

/* Dateien und Videos */
.attachment .a-main {
  flex: 1;
  min-width: 0;
}

.attachment .a-actions {
  display: flex;
  gap: 2px;
}

.image.video {
  width: 330px;
  max-width: 100%;
  aspect-ratio: var(--ratio, 1.7778);
  cursor: pointer;
}

.play-badge {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 600;
}

.play-badge .icon {
  width: 32px;
  height: 32px;
}

.play-badge.small {
  width: 40px;
  height: 40px;
}

.play-badge.small .icon {
  width: 24px;
  height: 24px;
}

/* Dauer eines Videos unten links: auf derselben Pille wie Zeit und Häkchen (vorher nur ein Schatten, auf hellen Bildern kaum lesbar). */
.video-meta {
  position: absolute;
  left: 6px;
  bottom: 5px;
  display: flex;
  align-items: center;
  gap: 4px;
  color: #fff;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 10px;
  background: var(--on-media);
}

.video-meta .icon {
  width: 16px;
  height: 16px;
}

/* Größe auf einem Foto als Datei: so groß wie die Uhrzeit (auf gleicher Höhe). */
.video-meta.file-image-size {
  font-size: 11px;
}

/*
 * Video in der Blase (video.js): Bild schwarz eingepasst (das Seitenverhältnis der Blase bleibt), in
 * der Mitte Play bzw. Ladekreis mit ✕, unten eine schlanke Leiste (gespielt in der Akzentfarbe),
 * oben links die Ladeanzeige, solange die Datei noch vom Handy kommt.
 */
.vp {
  --vp: 0;
  --vb: 0;
  user-select: none;
  outline: none;
}

.vp:focus-visible {
  box-shadow: inset 0 0 0 2px var(--accent);
}

.vp video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.vp.has-frame {
  background: #000;
}

.vp.has-frame .vp-thumb {
  visibility: hidden;
}

.vp.vp-started .video-meta {
  display: none;
}

/* Zeit und Häkchen auf dem Bild weichen der Leiste. */
.bubble:has(> .vp.vp-started) > .meta.on-image {
  opacity: 0;
  pointer-events: none;
}

.vp-center {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  display: grid;
  place-items: center;
  transition: opacity 0.2s, transform 0.2s, background 0.15s;
}

.vp-center:hover {
  background: rgba(0, 0, 0, 0.62);
}

.vp-center > * {
  grid-area: 1 / 1;
}

.vp-center > .icon {
  width: 32px;
  height: 32px;
}

.vp.vp-loading .vp-center > .icon {
  width: 22px;
  height: 22px;
}

.vp.vp-playing:not(.vp-buffering) .vp-center,
.vp.vp-failed .vp-center {
  opacity: 0;
  transform: scale(0.8);
  pointer-events: none;
}

.vp-center .spinner {
  width: 30px;
  height: 30px;
  margin: 0;
  border-color: #fff;
  border-right-color: transparent;
}

.vp-ring {
  width: 52px;
  height: 52px;
  transform: rotate(-90deg);
}

.vp-ring circle {
  fill: none;
  stroke-width: 3;
}

.vp-ring .track {
  stroke: rgba(255, 255, 255, 0.25);
}

.vp-ring .arc {
  stroke: #fff;
  stroke-linecap: round;
  stroke-dasharray: 131.95;
  transition: stroke-dashoffset 0.3s;
}

.vp-ring.indeterminate {
  animation: vp-spin 1.1s linear infinite;
}

@keyframes vp-spin {
  from {
    transform: rotate(-90deg);
  }
  to {
    transform: rotate(270deg);
  }
}

.vp-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 22px 6px 4px;
  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.62));
  color: #fff;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  cursor: default;
}

.vp.vp-started.vp-ui .vp-bar,
.vp.vp-started:not(.vp-playing) .vp-bar,
.vp.vp-dragging .vp-bar {
  opacity: 1;
  pointer-events: auto;
}

.vp.vp-failed .vp-bar {
  display: none;
}

.vp-btn {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
}

.vp-btn:hover {
  background: rgba(255, 255, 255, 0.16);
}

.vp-btn:disabled {
  opacity: 0.55;
  cursor: default;
  background: none;
}

.vp-btn .icon {
  width: 20px;
  height: 20px;
}

.vp-time {
  flex: none;
  padding: 0 4px 0 2px;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.vp-seek {
  position: relative;
  flex: 1;
  min-width: 36px;
  height: 22px;
  display: flex;
  align-items: center;
  cursor: pointer;
  touch-action: none;
  outline: none;
}

.vp-track {
  position: relative;
  width: 100%;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.28);
  overflow: hidden;
  transition: height 0.15s;
}

.vp-seek:hover .vp-track,
.vp-seek:focus-visible .vp-track,
.vp.vp-dragging .vp-track {
  height: 5px;
}

.vp-buf,
.vp-done {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
}

.vp-buf {
  width: calc(var(--vb) * 100%);
  background: rgba(255, 255, 255, 0.4);
}

.vp-done {
  width: calc(var(--vp) * 100%);
  background: var(--accent);
}

.vp-knob {
  position: absolute;
  top: 50%;
  left: calc(var(--vp) * 100%);
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  transform: scale(0);
  transition: transform 0.15s;
  pointer-events: none;
}

.vp-seek:hover .vp-knob,
.vp-seek:focus-visible .vp-knob,
.vp.vp-dragging .vp-knob {
  transform: scale(1);
}

.vp-gif-label {
  flex: none;
  margin: 0 4px;
  padding: 0 4px;
  border: 1.5px solid currentColor;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 15px;
  letter-spacing: 0.04em;
}

.vp-dl {
  position: absolute;
  left: 8px;
  top: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 3px 3px 7px;
  border-radius: 99px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  cursor: default;
}

.vp-ring.mini {
  width: 14px;
  height: 14px;
}

.vp-ring.mini circle {
  stroke-width: 5;
}

.vp-dl-cancel {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
}

.vp-dl-cancel:hover {
  background: rgba(255, 255, 255, 0.18);
}

.vp-dl-cancel .icon {
  width: 14px;
  height: 14px;
}

.vp-error {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  padding: 12px;
  background: rgba(0, 0, 0, 0.62);
  color: #fff;
  font-size: 13px;
  text-align: center;
  cursor: default;
}

.vp-error-btns {
  display: flex;
  gap: 8px;
}

.vp-error-btns button {
  padding: 5px 14px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.vp-error-btns button:hover {
  background: rgba(255, 255, 255, 0.28);
}

/* In der Vollbildansicht so groß wie möglich im echten Seitenverhältnis; echtes Vollbild füllt alles. */
.vp.vp-viewer {
  width: min(100%, calc((100vh - 110px) * var(--vratio, var(--ratio, 1.7778))));
  max-width: 100%;
  aspect-ratio: var(--vratio, var(--ratio, 1.7778));
  margin: 0;
  border-radius: 4px;
  background: #000;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
  cursor: default;
}

.v-body .vp img,
.v-body .vp video {
  max-width: none;
  max-height: none;
  box-shadow: none;
}

.vp:fullscreen {
  width: 100vw;
  height: 100vh;
  max-width: none;
  aspect-ratio: auto;
  border-radius: 0;
  box-shadow: none;
  background: #000;
}

.vp:fullscreen.vp-playing:not(.vp-ui) {
  cursor: none;
}

/* Dauer auf einer Album-Kachel: auf der Pille wie Zeit und Häkchen (wie in der App). */
.tile-dur {
  position: absolute;
  left: 6px;
  bottom: 5px;
  color: #fff;
  font-size: 11.5px;
  padding: 1px 6px;
  border-radius: 10px;
  background: var(--on-media);
}

/* Zitat mit Foto oder Video: kleines Vorschaubild rechts wie in der App */
.quote.with-thumb {
  display: flex;
  align-items: center;
  gap: 8px;
}

.quote .q-main {
  flex: 1;
  min-width: 0;
}

.q-thumb {
  position: relative;
  flex: none;
  width: 42px;
  height: 42px;
  margin: -2px -4px -2px 0;
  border-radius: 4px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.12);
}

.q-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.q-thumb .icon {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  color: #fff;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
}

/* Standort mit Kartenausschnitt */
.location .map {
  position: relative;
  overflow: hidden;
  text-decoration: none;
}

.location .map.has-image {
  height: 150px;
  background: var(--quote-in);
}

.location .map img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.map-pin {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -100%);
  color: #ea4335;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.35));
}

.map-pin .icon {
  width: 40px;
  height: 40px;
}

.map-pin.live::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 22px;
  height: 22px;
  margin-left: -11px;
  border-radius: 50%;
  border: 2px solid #ea4335;
  animation: pulse 1.6s ease-out infinite;
}

@keyframes pulse {
  from {
    transform: scale(0.4);
    opacity: 0.9;
  }
  to {
    transform: scale(1.8);
    opacity: 0;
  }
}

.map-attr {
  position: absolute;
  right: 4px;
  bottom: 3px;
  font-size: 9.5px;
  color: #333;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 6px;
  padding: 0 5px;
}

.live-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ea4335;
  margin-right: 6px;
  animation: blink 1.2s ease-in-out infinite;
}

.loc-title {
  font-weight: 500;
}

.compose-hint.left {
  text-align: left;
}

/* Anschrift bzw. Hinweis unter einem Standort (Netz-Chats): mehrzeilig. */
.loc-sub {
  white-space: pre-line;
}

/* Umfragen – wie in der App: Auswahlkreis, Profilbilder der Wählenden, dicker Balken (eigene Wahl in der
   Akzentfarbe), Uhrzeit über der Trennlinie, darunter „Stimmen ansehen“. */
.bubble.wide {
  width: min(400px, 65%);
}

.poll {
  display: grid;
}

.poll-q {
  font-weight: 700;
  font-size: 15.5px;
  line-height: 1.35;
  white-space: pre-wrap;
}

.poll-hint {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12.8px;
  color: var(--text-2);
  margin: 2px 0 6px;
}

.poll-hint .icon {
  width: 16px;
  height: 16px;
}

.poll-opt {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 6px 2px 9px;
  border-radius: 8px;
}

.poll-opt:hover:not(:disabled) {
  background: color-mix(in srgb, var(--text) 5%, transparent);
}

.poll-mark {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--text-2);
  display: grid;
  place-items: center;
  flex: none;
}

.poll-opt.mine .poll-mark {
  background: var(--badge);
  border-color: var(--badge);
  color: var(--on-badge);
}

.poll-mark .icon {
  width: 16px;
  height: 16px;
}

.poll-body {
  flex: 1;
  display: grid;
  gap: 7px;
  min-width: 0;
}

.poll-line {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 21px;
}

.poll-text {
  flex: 1;
  min-width: 0;
  font-size: 14.6px;
}

.poll-count {
  font-size: 14.6px;
}

/* Zu Ende: gesperrt, die meisten Stimmen mit Stern wie in den Details. */
.poll-opt:disabled {
  cursor: default;
}

.poll-ends-line {
  margin-top: -4px;
}

.poll-star .icon {
  width: 16px;
  height: 16px;
  color: var(--accent);
  margin-top: 2px;
}

/* Profilbilder leicht übereinander; der Ring ist etwas dunkler bzw. heller als die Blase – er trennt die
   Bilder und lässt auch Initialen in der Farbe der Blase erkennen (wie in der App). */
.poll-voters {
  display: inline-flex;
  flex-direction: row-reverse;
  flex: none;
  margin-top: 0.5px;
}

.poll-voters .avatar {
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--text) 18%, var(--bubble-in));
}

.msg.out .poll-voters .avatar {
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--text) 18%, var(--bubble-out));
}

.poll-voters .avatar + .avatar {
  margin-right: -8px;
}

/* Spur und fremde Stimmen deckend zwischen Blase und Schrift, die eigene Wahl in der Akzentfarbe. */
.poll-bar {
  height: 8px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--text) 10%, var(--bubble-in));
  overflow: hidden;
}

.msg.out .poll-bar {
  background: color-mix(in srgb, var(--text) 10%, var(--bubble-out));
}

.poll-bar i {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: color-mix(in srgb, var(--text) 38%, var(--bubble-in));
  transition: width 0.3s;
}

.msg.out .poll-bar i {
  background: color-mix(in srgb, var(--text) 38%, var(--bubble-out));
}

.poll-opt.mine .poll-bar i {
  background: var(--badge);
}

.poll-foot {
  display: flex;
  justify-content: flex-end;
  margin: -1px -1px 5px 0;
}

.poll-foot .meta {
  position: static;
}

.poll-votes {
  margin: 0 -8px -7px -9px;
  padding: 9px 0 9px;
  color: var(--accent);
  font-weight: 600;
  font-size: 14px;
  border-top: 1px solid color-mix(in srgb, var(--text-2) 30%, transparent);
  border-radius: 0 0 8px 8px;
}

.poll-votes:hover {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

/* Alben */
.bubble.album {
  padding: 3px 3px 5px;
  width: 340px;
  max-width: 65%;
}

.album-grid {
  display: grid;
  gap: 3px;
  grid-template-columns: 1fr 1fr;
  border-radius: 6px;
  overflow: hidden;
}

.album-grid.n2 {
  grid-template-rows: 160px;
}

.album-grid.n3 {
  grid-template-rows: 170px 120px;
}

.album-grid.n3 .tile:first-child {
  grid-column: 1 / 3;
}

.album-grid.n4 {
  grid-template-rows: 140px 140px;
}

.tile {
  position: relative;
  background: rgba(0, 0, 0, 0.08);
  cursor: zoom-in;
  overflow: hidden;
}

.tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tile .more {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 28px;
  display: grid;
  place-items: center;
}

.bubble.album .text {
  padding: 4px 5px 0;
}

.quote.clickable {
  cursor: pointer;
}

/* Status-Zitat, dessen Status abgelaufen oder gelöscht ist */
.quote.gone .q-text {
  font-style: italic;
}

.quote .q-name .icon {
  width: 14px;
  height: 14px;
  vertical-align: -2px;
  margin-right: 4px;
}

.msg.flash .bubble,
.msg.flash .emoji-col {
  animation: flash 1.6s ease-out;
}

@keyframes flash {
  0%,
  40% {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 55%, transparent);
  }
  100% {
    box-shadow: var(--shadow);
  }
}

/* Vollbild mit Blättern */
.viewer {
  grid-template-rows: auto 1fr;
  place-items: stretch;
  cursor: default;
}

.v-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  color: #fff;
}

.v-info {
  display: grid;
  font-size: 13px;
}

.v-info span {
  opacity: 0.75;
}

.v-tools {
  display: flex;
  gap: 4px;
}

.v-tools .icon-btn {
  color: #fff;
}

.v-tools .icon-btn:hover {
  background: rgba(255, 255, 255, 0.12);
}

.v-body {
  display: grid;
  place-items: center;
  min-height: 0;
  padding: 0 72px 24px;
  cursor: zoom-out;
}

.v-body img,
.v-body video {
  max-width: 100%;
  max-height: calc(100vh - 100px);
  cursor: default;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
}

/* Foto als Datei (etwa eine PNG in „Original“): Durchsichtiges auf Schachbrett, nicht auf dem Chat dahinter. */
.v-body img.v-checker {
  background-color: #fff;
  background-image:
    linear-gradient(45deg, #e4e4e4 25%, transparent 25%),
    linear-gradient(-45deg, #e4e4e4 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #e4e4e4 75%),
    linear-gradient(-45deg, transparent 75%, #e4e4e4 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}

.v-nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  display: grid;
  place-items: center;
}

.v-nav:hover {
  background: rgba(255, 255, 255, 0.24);
}

.v-nav.prev {
  left: 16px;
}

.v-nav.next {
  right: 16px;
}

.v-msg {
  display: grid;
  justify-items: center;
  gap: 12px;
  color: #fff;
  min-width: 260px;
}

.v-msg .dl-bar {
  width: 240px;
}

/* Leiste rechts: Info und Suche */
.app.with-panel {
  grid-template-columns: minmax(320px, 30%) 1fr minmax(320px, 26%);
}

.panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--panel);
  border-left: 1px solid var(--border);
}

.panel-head {
  height: 64px;
  flex: none;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 16px;
  background: var(--panel-head);
}

.panel-head h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
}

.panel-body {
  flex: 1;
  overflow-y: auto;
  background: var(--app-bg);
  display: grid;
  align-content: start;
  gap: 10px;
  padding-bottom: 16px;
}

.info-hero {
  background: var(--panel);
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 28px 20px 22px;
  text-align: center;
}

.info-hero h2 {
  margin: 14px 0 0;
  font-size: 22px;
  font-weight: 500;
}

.info-id {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  color: var(--text-2);
  letter-spacing: 0.5px;
  font-size: 13px;
}

.info-badges {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: 12px;
  background: var(--panel-head);
  color: var(--text-2);
  font-size: 12px;
}

.chip.ok {
  background: var(--accent-soft);
  color: var(--accent);
}

.chip .icon {
  width: 14px;
  height: 14px;
}

.info-card {
  background: var(--panel);
  padding: 14px 20px;
  display: grid;
  gap: 6px;
}

.info-label {
  color: var(--text-2);
  font-size: 13.5px;
}

.info-action {
  display: flex;
  align-items: center;
  gap: 18px;
  text-align: left;
  padding: 6px 0;
}

.info-action:disabled {
  opacity: 0.55;
  cursor: default;
}

.info-action .icon {
  color: var(--text-2);
}

.info-action.danger,
.info-action.danger .icon {
  color: var(--danger);
}

.info-value {
  margin-left: auto;
  color: var(--text-2);
  font-size: 13px;
}

.member-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 4px;
  border-radius: 10px;
  text-align: left;
  width: 100%;
}

.member-row.clickable,
button.member-row {
  cursor: pointer;
}

.member-row.clickable:hover,
button.member-row:hover {
  background: var(--hover);
}

.member-body {
  flex: 1;
  min-width: 0;
}

.round-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  display: grid;
  place-items: center;
  flex: none;
}

.round-icon.big {
  width: 49px;
  height: 49px;
}

.info-sub {
  color: var(--text-2);
  font-size: 13px;
}

.info-sub.link {
  color: var(--accent);
  cursor: pointer;
}

.panel-search {
  padding: 10px 0;
  background: var(--panel);
}

.search-results,
.hit-list {
  overflow-y: auto;
}

.search-results {
  flex: 1;
}

.hit {
  display: grid;
  gap: 2px;
  width: 100%;
  text-align: left;
  padding: 10px 18px;
  border-bottom: 1px solid var(--border);
}

.hit:hover {
  background: var(--hover);
}

.hit-line {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.hit-time {
  color: var(--text-2);
  font-size: 12px;
}

.hit-text {
  color: var(--text-2);
  font-size: 13.5px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.hit-text mark {
  background: transparent;
  color: var(--accent);
  font-weight: 600;
}

.list-label {
  color: var(--accent);
  font-size: 14px;
  padding: 16px 20px 8px;
}

/* Auswahl-Dialoge (Weiterleiten, Kontakte) und Listen */
.dialog.pick,
.dialog.list {
  width: min(460px, calc(100% - 48px));
  max-height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
  padding: 16px 0 0;
}

.dialog.list {
  padding-bottom: 16px;
}

.pick-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px 8px 24px;
}

.pick-head h3 {
  margin: 0;
}

/* Hinweis über der Auswahl (neuer Broadcast: wie die Nachrichten ankommen); stärker als „.dialog p“ */
.dialog .pick-hint {
  margin: 0 16px 8px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--hover);
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.4;
}

.dialog .search {
  margin: 0 16px 8px;
}

.pick-list,
.dialog-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 0 8px;
}

.dialog-scroll {
  padding: 0 20px;
}

.pick-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 12px;
  border-radius: 10px;
  cursor: pointer;
}

.pick-row:hover {
  background: var(--hover);
}

.pick-row input {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}

.pick-title {
  display: grid;
  min-width: 0;
}

.pick-title small {
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pick-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px 16px 24px;
  border-top: 1px solid var(--border);
  background: var(--panel-head);
  border-radius: 0 0 24px 24px;
}

.pick-names {
  flex: 1;
  color: var(--text-2);
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Weiterleiten ab Stufe 15: Abschnitte wie in der App, „Kontakte werden geladen …“ und ein drehender Knopf, solange
   fehlende Chats angelegt werden (über die Bridge bis zu 15 s). */
.pick-section {
  padding: 14px 12px 6px;
}

.pick-loading {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  color: var(--text-2);
  font-size: 13px;
}

.send.busy .icon {
  display: none;
}

.send.busy::after {
  content: '';
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2.5px solid currentColor;
  border-right-color: transparent;
  animation: spin 0.9s linear infinite;
}

.send.busy:disabled {
  opacity: 1;
  cursor: progress;
}

.info-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
}

.info-body {
  flex: 1;
  min-width: 0;
}

.info-emoji {
  font-size: 22px;
}

.info-quote {
  margin-bottom: 8px;
}

/* „Abstimmungsdetails“ wie in der App: die Frage groß, je Antwort eine Karte, Stern bei den meisten Stimmen. */
.dialog.votes-dialog {
  width: min(500px, calc(100% - 48px));
}

.votes-dialog .dialog-scroll {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 0 16px;
}

.votes-card {
  background: var(--hover);
  border-radius: 12px;
  padding: 10px 14px 6px;
}

.votes-question {
  font-weight: 600;
  font-size: 19px;
  padding: 0 4px 2px;
  white-space: pre-wrap;
}

.votes-end {
  color: var(--text-2);
  font-size: 13.5px;
  padding: 0 4px 4px;
}

.votes-close-row {
  display: flex;
  justify-content: center;
  padding: 6px 0 2px;
}

.votes-close {
  color: var(--danger);
  font-weight: 600;
  padding: 9px 18px;
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent);
}

.votes-close:hover {
  background: color-mix(in srgb, var(--danger) 8%, transparent);
}

.votes-head {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-bottom: 4px;
}

.votes-head b {
  flex: 1;
  font-weight: 500;
  font-size: 15px;
}

.votes-star .icon {
  width: 18px;
  height: 18px;
  color: var(--accent);
  margin-top: 1px;
}

.votes-count {
  color: var(--text-2);
  font-size: 13px;
  white-space: nowrap;
  margin-top: 1px;
}

.votes-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 0;
}

.dialog .buttons.wrap {
  flex-wrap: wrap;
}

/* Eingabefelder in Dialogen */
.field {
  width: 100%;
  border: 0;
  border-bottom: 2px solid var(--accent);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 15px;
  padding: 8px 2px;
  outline: 0;
  margin-bottom: 14px;
}

.field-label {
  color: var(--text-2);
  font-size: 13px;
  margin: 4px 0 6px;
}

/* „Abstimmung erstellen“: umrandete Felder, Griff zum Umsortieren, runder Senden-Knopf */
.dialog.poll-dialog {
  width: min(480px, calc(100% - 48px));
}

.poll-label {
  font-weight: 600;
  font-size: 14px;
  margin: 14px 2px 8px;
}

.poll-label:first-child {
  margin-top: 4px;
}

.poll-input {
  width: 100%;
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--text-2) 45%, transparent);
  border-radius: 12px;
  background: var(--panel);
  color: var(--text);
  font: inherit;
  font-size: 15px;
  padding: 12px 14px;
  outline: 0;
}

.poll-input:focus {
  border: 2px solid var(--accent);
  padding: 11px 13px;
}

.poll-input::placeholder {
  color: var(--text-2);
}

.poll-fields {
  display: grid;
  gap: 10px;
}

.poll-field {
  position: relative;
  display: flex;
  align-items: center;
}

.poll-field.filled .poll-input {
  padding-right: 84px;
}

.poll-field.filled .poll-input:focus {
  padding-right: 83px;
}

.poll-field .icon-btn {
  position: absolute;
  right: 40px;
  width: 34px;
  height: 34px;
}

.poll-field .icon-btn .icon {
  width: 20px;
  height: 20px;
}

.poll-grip {
  position: absolute;
  right: 8px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 34px;
  color: var(--text-2);
  cursor: grab;
}

.poll-field.dragging {
  opacity: 0.5;
}

.poll-switch {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 2px 4px;
  cursor: pointer;
}

.poll-switch span {
  flex: 1;
}

/* „Endet“: Auswahl rechts, eigener Zeitpunkt darunter. */
.poll-ends {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 2px 4px;
}

.poll-ends span {
  flex: 1;
}

.poll-ends-select {
  font: inherit;
  font-size: 14.5px;
  color: var(--accent);
  background: var(--panel);
  border: 1px solid color-mix(in srgb, var(--text-2) 45%, transparent);
  border-radius: 10px;
  padding: 6px 10px;
}

.poll-ends-custom {
  margin-top: 8px;
}

.poll-ends-error {
  color: var(--danger);
  font-size: 13px;
  padding: 6px 2px 0;
}

/* Schalter wie in der App */
.switch {
  appearance: none;
  position: relative;
  width: 44px;
  height: 26px;
  margin: 0;
  border-radius: 13px;
  border: 2px solid var(--text-2);
  background: transparent;
  cursor: pointer;
  flex: none;
  transition: background 0.15s, border-color 0.15s;
}

.switch::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--text-2);
  transition: transform 0.15s, background 0.15s;
}

.switch:checked {
  background: var(--accent);
  border-color: var(--accent);
}

.switch:checked::after {
  background: var(--on-accent);
  transform: translateX(18px) scale(1.3);
}

.poll-send-row {
  display: flex;
  justify-content: flex-end;
  padding: 10px 20px;
}

.poll-send {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--badge);
  color: var(--on-badge);
  box-shadow: var(--menu-shadow);
}

.poll-send:disabled {
  background: color-mix(in srgb, var(--text) 12%, transparent);
  color: color-mix(in srgb, var(--text) 38%, transparent);
  box-shadow: none;
  cursor: default;
}

.switch-row,
.radio-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  cursor: pointer;
}

.switch-row input,
.radio-row input {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}

.radio-list {
  margin-bottom: 12px;
}

/* Seitenleiste: Unteransichten, Status */
.side-head.sub {
  gap: 8px;
  padding-left: 8px;
}

.side-head.sub h2 {
  font-size: 19px;
  color: var(--text);
}

.story-ring {
  border-radius: 50%;
  padding: 2.5px;
  border: 2.5px solid var(--tick);
  flex: none;
}

.story-ring.unseen,
.story-ring.own {
  border-color: var(--accent);
}

.story-ring.none {
  border-style: dashed;
}

/* Stummgeschaltete Status: eigener, eingeklappter Abschnitt ganz unten, blass */
.muted-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  text-align: left;
  color: var(--text-2);
}

.muted-toggle .icon {
  width: 20px;
  height: 20px;
  transition: transform 0.15s;
}

.muted-toggle.open .icon {
  transform: rotate(180deg);
}

.chat-row.muted-story {
  opacity: 0.55;
}

.status-actions {
  display: flex;
  gap: 8px;
  padding: 4px 20px 8px 82px;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 18px;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
  font-size: 13px;
}

.pill .icon {
  width: 18px;
  height: 18px;
}

.story-dialog {
  width: min(420px, calc(100% - 48px));
}

.story-preview {
  height: 300px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  margin-bottom: 12px;
  padding: 20px;
  background: #0078d4;
  overflow: hidden;
}

.story-preview.photo {
  background: #000;
  padding: 0;
}

/* Durchsichtiges (PNG) auf Weiß wie im fertigen Status (das Handy legt es vor dem JPEG auf Weiß), nicht auf Schwarz. */
.story-preview.photo img {
  max-width: 100%;
  max-height: 300px;
  background: #fff;
}

.story-text-input {
  width: 100%;
  height: 100%;
  resize: none;
  border: 0;
  outline: 0;
  background: transparent;
  color: #fff;
  text-align: center;
  font-size: 24px;
  display: grid;
  place-items: center;
}

.story-text-input::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

.font-1 {
  font-family: Georgia, "Noto Serif", "Times New Roman", serif;
}

.font-2 {
  font-weight: 800;
}

.swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.swatch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--panel);
  box-shadow: 0 0 0 1px var(--border);
}

/* Status ansehen */
.story-viewer {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: #111;
  display: grid;
  place-items: center;
}

/*
 * Wie bei WhatsApp und Instagram füllt das Medium den ganzen Rahmen, Balken, Kopf und Fuß liegen darüber – auf weichen
 * Verläufen oben (::before am Rahmen) und unten (::before am Fuß), Schrift und Symbole mit Schatten. So bleiben sie auf
 * weißen Fotos und hellen Videos lesbar. Textstatus in kräftigen Farben (.sv-on-color) bekommen einen schwächeren
 * Verlauf, helle Textstatus (.sv-on-light, Weiß, Gelb, Hellgrau aus WhatsApp) dunkle Schrift und Symbole ohne Verlauf –
 * wie StoryChrome in der App. Der Betrachter ist in beiden Schemas dunkel; Überfahren und Drücken bleiben deshalb
 * halbdurchsichtig statt der hellen Listenfarben.
 */
.sv-frame {
  --sv-ink: #fff;
  --sv-ink-2: rgba(255, 255, 255, 0.85);
  --sv-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  --sv-icon-shadow: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.65));
  --sv-field: rgba(0, 0, 0, 0.35);
  --sv-field-border: rgba(255, 255, 255, 0.5);
  --sv-hover: rgba(255, 255, 255, 0.16);
  --sv-press: rgba(255, 255, 255, 0.26);
  --sv-scrim: 0.55;
  position: relative;
  height: min(92vh, 900px);
  aspect-ratio: 9 / 16;
  max-width: 96vw;
  background: #000;
  border-radius: 16px;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  grid-template-columns: minmax(0, 1fr);
}

/* Verlauf oben: hinter Balken und Kopf (bis 73 px) fast so dunkel wie am Rand, darunter weich auslaufend. */
.sv-frame::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 144px;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    rgba(0, 0, 0, var(--sv-scrim)),
    rgba(0, 0, 0, calc(var(--sv-scrim) * 0.84)) 72px,
    rgba(0, 0, 0, calc(var(--sv-scrim) * 0.62)) 88px,
    rgba(0, 0, 0, calc(var(--sv-scrim) * 0.4)) 104px,
    rgba(0, 0, 0, calc(var(--sv-scrim) * 0.15)) 124px,
    transparent
  );
}

.sv-frame.sv-on-color {
  --sv-scrim: 0.3;
}

.sv-bars {
  grid-row: 1;
  grid-column: 1;
  display: flex;
  gap: 4px;
  padding: 10px 10px 0;
  z-index: 2;
}

/* Leerer Teil halbdurchsichtig mit dunklem Rand – auf Weiß bleibt er zu sehen. */
.sv-bars span {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.4);
  box-shadow:
    0 0 0 0.5px rgba(0, 0, 0, 0.28),
    0 1px 2px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

.sv-bars span i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--sv-ink);
}

.sv-bars span.done i {
  width: 100%;
}

.sv-head {
  grid-row: 2;
  grid-column: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 8px 10px 14px;
  color: var(--sv-ink);
  text-shadow: var(--sv-shadow);
  z-index: 2;
}

.sv-head .icon-btn,
.sv-reply .icon-btn {
  color: var(--sv-ink);
}

.sv-head .icon-btn .icon,
.sv-reply .icon-btn .icon,
.sv-views .icon {
  filter: var(--sv-icon-shadow);
}

.sv-head .icon-btn:hover,
.sv-reply .icon-btn:hover {
  background: var(--sv-hover);
}

.sv-head .icon-btn:active:not(:disabled),
.sv-reply .icon-btn:active:not(:disabled) {
  background: var(--sv-press);
}

.sv-who {
  flex: 1;
  display: grid;
  font-size: 13px;
}

.sv-who span {
  color: var(--sv-ink-2);
}

/* Eigene Fläche: Profilbild und Plakette „über …“ ohne Schatten. */
.sv-head .avatar,
.sv-who .net-badge {
  text-shadow: none;
}

/* Bühne über den ganzen Rahmen, hinter Balken, Kopf und Fuß. */
.sv-stage {
  grid-row: 1 / -1;
  grid-column: 1;
  position: relative;
  z-index: 0;
  display: grid;
  place-items: center;
  min-height: 0;
  user-select: none;
  cursor: pointer;
}

.sv-stage img,
.sv-stage video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Größe, Zeilenhöhe und Rand setzt fitTextStory (panels.js) wie am Handy; hier nur der Rückfall. */
.sv-text {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 96px 32px;
  color: #fff;
  font-size: 28px;
  text-align: center;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Auf hellem Grund dunkle Schrift – auch im gespeicherten PNG (textStoryImage). */
.sv-text.on-light {
  color: #1c1c1c;
}

.sv-caption {
  padding: 0 4px 10px;
  text-align: center;
  overflow-wrap: anywhere;
}

.sv-foot {
  grid-row: 4;
  grid-column: 1;
  position: relative;
  padding: 10px 12px 14px;
  z-index: 2;
  color: var(--sv-ink);
  text-shadow: var(--sv-shadow);
}

/* Verlauf unten: hinter Bildunterschrift, Aufrufen und Antwortfeld, nach oben über 64 px weich auslaufend. */
.sv-foot::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: -64px;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    transparent,
    rgba(0, 0, 0, calc(var(--sv-scrim) * 0.15)) 20px,
    rgba(0, 0, 0, calc(var(--sv-scrim) * 0.4)) 40px,
    rgba(0, 0, 0, calc(var(--sv-scrim) * 0.62)) 56px,
    rgba(0, 0, 0, calc(var(--sv-scrim) * 0.84)) 64px,
    rgba(0, 0, 0, var(--sv-scrim))
  );
}

.sv-reply {
  display: flex;
  gap: 6px;
  align-items: center;
}

.sv-reply input {
  flex: 1;
  border: 1px solid var(--sv-field-border);
  border-radius: 22px;
  background: var(--sv-field);
  color: var(--sv-ink);
  font: inherit;
  padding: 10px 16px;
  outline: 0;
}

.sv-reply input::placeholder {
  color: var(--sv-ink-2);
  opacity: 0.85;
}

/* Knöpfe erben keinen Textschatten (Vorgabe des Browsers) – hier ausdrücklich. */
.sv-views {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 auto;
  color: var(--sv-ink);
  text-shadow: var(--sv-shadow);
}

.sv-viewers {
  max-height: 260px;
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 12px;
  padding: 0 12px;
  margin-bottom: 8px;
  color: #fff;
  text-shadow: none;
}

.sv-viewers .list-label {
  color: #fff;
  padding-left: 0;
}

/* Heller Textstatus: dunkle Schrift und Symbole, keine Verläufe und Schatten. */
.sv-frame.sv-on-light {
  --sv-ink: #1c1c1c;
  --sv-ink-2: rgba(28, 28, 28, 0.72);
  --sv-shadow: none;
  --sv-icon-shadow: none;
  --sv-field: rgba(0, 0, 0, 0.06);
  --sv-field-border: rgba(0, 0, 0, 0.35);
  --sv-hover: rgba(0, 0, 0, 0.08);
  --sv-press: rgba(0, 0, 0, 0.14);
}

.sv-frame.sv-on-light::before,
.sv-frame.sv-on-light .sv-foot::before {
  background: none;
}

.sv-frame.sv-on-light .sv-bars span {
  background: rgba(0, 0, 0, 0.2);
  box-shadow: none;
}

/* Likes: Herz-Knopf neben dem Antwortfeld, rote Herzen bei den Aufrufen */
.sv-like {
  flex: none;
  color: var(--sv-ink);
  border: 1px solid var(--sv-field-border);
  background: var(--sv-field);
}

.sv-reply .sv-like:hover {
  background: var(--sv-hover);
}

.sv-reply .sv-like.on {
  color: #ff3040;
}

.sv-like.pop .icon {
  animation: sv-like-pop 0.45s ease-out;
}

@keyframes sv-like-pop {
  0% {
    transform: scale(0.5);
  }
  45% {
    transform: scale(1.25);
  }
  70% {
    transform: scale(0.92);
  }
  100% {
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sv-like.pop .icon {
    animation: none;
  }
}

.sv-count {
  display: flex;
  align-items: center;
}

.sv-likes {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 12px;
}

.sv-likes .icon,
.sv-liked .icon {
  width: 18px;
  height: 18px;
  color: #ff3040;
}

.sv-liked {
  display: grid;
}

/* ------------------------------------------------------------ Updates (update.js) */

.update-banner {
  margin: 0 12px 8px;
  padding: 10px 10px 10px 12px;
  border-radius: 12px;
  background: var(--accent-soft);
  display: flex;
  align-items: center;
  gap: 12px;
}

.update-banner.in-pair {
  width: min(1000px, 100%);
  margin: 0;
  padding: 12px 14px 12px 16px;
  border-radius: 16px;
  box-shadow: var(--shadow);
}

.pair:has(> .update-banner) {
  align-content: center;
  gap: 16px;
}

.update-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  display: grid;
  place-items: center;
  flex: none;
}

.update-banner[data-status='failed'] .update-icon {
  background: var(--danger);
}

.update-icon .icon {
  width: 20px;
  height: 20px;
}

.update-text {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 1px;
}

.update-text strong {
  font-weight: 600;
}

.update-text span {
  color: var(--text-2);
  font-size: 13px;
}

.update-banner .update-long,
.update-banner.in-pair .update-short {
  display: none;
}

.update-banner.in-pair .update-long {
  display: inline;
}

.update-progress {
  height: 4px;
  margin-top: 6px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  overflow: hidden;
}

.update-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  transition: width 0.3s ease;
}

.update-action {
  flex: none;
  padding: 7px 14px;
  border-radius: 18px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 13.5px;
  font-weight: 600;
}

.update-action:hover:not(:disabled) {
  filter: brightness(1.08);
}

.update-action:disabled {
  opacity: 0.7;
  cursor: default;
}

.update-icon-btn {
  flex: none;
  width: 30px;
  height: 30px;
  margin-left: -6px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--text-2);
}

.update-icon-btn:hover {
  background: color-mix(in srgb, var(--text-2) 15%, transparent);
}

.update-icon-btn .icon {
  width: 18px;
  height: 18px;
}

.menu .update-version {
  margin-top: 2px;
}

.menu button:disabled {
  color: var(--text-2);
  cursor: default;
}

.menu button:disabled:hover {
  background: none;
}

/* ------------------------------------------------------------ Schalter im ⋮-Menü: App-Menü unter Linux (desktopentry.js), Emoticons (emoticons.js) */

.menu button.desktop-entry-menu,
.menu button.emoticons-menu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.desktop-entry-menu .icon,
.emoticons-menu .icon {
  width: 18px;
  height: 18px;
  color: var(--accent);
  visibility: hidden;
}

.desktop-entry-menu[aria-checked='true'] .icon,
.emoticons-menu[aria-checked='true'] .icon {
  visibility: visible;
}

/* „Ton automatisch“ am Lautsprecher im Status-Betrachter (Rechtsklick, panels.js): über dem Betrachter */
.menu.sv-sound-menu {
  z-index: 95;
}

.menu button.sv-sound-auto {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.sv-sound-auto .icon {
  width: 18px;
  height: 18px;
  color: var(--accent);
  visibility: hidden;
}

.sv-sound-auto[aria-checked='true'] .icon {
  visibility: visible;
}

/* ------------------------------------------------------------ Anrufe (call.js) */

/* Anrufknöpfe im Chatkopf */
.call-btns {
  display: flex;
  gap: 2px;
}

.call-btns:empty {
  display: none;
}

/* Laufender Gruppenanruf: Hinweis im Chat, Symbol in der Chatliste */
.call-join {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 12px 0;
  padding: 8px 8px 8px 10px;
  border-radius: 18px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.call-join-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
  background: var(--accent-soft);
  color: var(--accent);
}

.call-join-icon .icon {
  width: 20px;
  height: 20px;
}

.call-join-text {
  flex: 1;
  min-width: 0;
  display: grid;
}

.call-join-text span {
  color: var(--text-2);
  font-size: 13px;
}

.call-join-btn {
  flex: none;
  padding: 8px 18px;
  border-radius: 20px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
}

.call-join-btn:hover:not(:disabled) {
  filter: brightness(1.08);
}

.call-join-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.chat-row .call-live {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
  background: var(--accent-soft);
  color: var(--accent);
}

.chat-row .call-live .icon {
  width: 14px;
  height: 14px;
}

/* Anrufansicht: immer dunkel wie in der App, über dem ganzen Fenster */
.call-layer {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  color: #fff;
  background: linear-gradient(180deg, #003966 0%, #0b141a 58%, #0b141a 100%);
  user-select: none;
}

.call-layer.enter {
  animation: call-in 0.18s ease-out;
}

@keyframes call-in {
  from {
    opacity: 0;
    transform: scale(0.985);
  }
}

.call-head {
  grid-row: 1;
  position: relative;
  z-index: 2;
  min-height: 60px;
  padding: 14px 72px 0;
  display: flex;
  justify-content: center;
}

.call-lock {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  color: #8696a0;
  font-size: 13px;
}

.call-lock .icon {
  width: 14px;
  height: 14px;
}

.call-icon-btn {
  position: absolute;
  top: 10px;
  right: 14px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #d1d7db;
}

.call-icon-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

.call-icon-btn .icon {
  width: 22px;
  height: 22px;
}

.call-stage {
  grid-row: 2;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 8px 24px;
  overflow: hidden;
}

.call-hero {
  display: grid;
  justify-items: center;
  gap: 6px;
  text-align: center;
}

.call-name {
  margin: 0;
  max-width: 80vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.2px;
}

.call-status {
  color: #d1d7db;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}

.call-sub {
  color: #8696a0;
  font-size: 13px;
}

.call-notice {
  margin-top: 6px;
  padding: 6px 12px;
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  font-size: 13px;
}

/* Profilbild mit Ring: pulsiert beim Klingeln, wird kräftig beim Sprechen */
.call-avatar {
  position: relative;
  margin-top: clamp(16px, 6vh, 56px);
  display: grid;
  place-items: center;
}

.call-avatar::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(77, 166, 255, 0.16);
  transform: scale(0.82);
  transition: transform 0.2s ease, background 0.2s ease;
}

.call-avatar.pulse::before {
  animation: call-pulse 0.9s ease-in-out infinite alternate;
}

.call-avatar.speaking::before {
  transform: scale(1);
  background: rgba(77, 166, 255, 0.3);
}

.call-avatar .avatar {
  position: relative;
}

@keyframes call-pulse {
  from {
    transform: scale(0.89);
  }
  to {
    transform: scale(1);
  }
}

/* Knöpfe: rund mit Beschriftung, im Gespräch in einer Leiste wie in der App */
.call-controls {
  grid-row: 3;
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 56px;
  min-height: 96px;
  padding: 16px 24px 32px;
}

.call-pill {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding: 16px 28px 12px;
  border-radius: 32px;
  background: #1f2c34;
}

.call-ctl {
  min-width: 64px;
  display: grid;
  justify-items: center;
  gap: 6px;
  color: #d1d7db;
  font-size: 12px;
}

.call-ctl button {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #2a3942;
  color: #fff;
  transition: background 0.15s ease, transform 0.1s ease;
}

.call-ctl button:hover:not(:disabled) {
  background: #3b4a54;
}

.call-ctl button:active:not(:disabled) {
  transform: scale(0.95);
}

.call-ctl button:disabled {
  opacity: 0.4;
  cursor: default;
}

.call-ctl .icon {
  width: 26px;
  height: 26px;
}

.call-ctl.on button {
  background: #fff;
  color: #0b141a;
}

.call-ctl.on button:hover:not(:disabled) {
  background: #d1d7db;
}

.call-ctl.end button,
.call-ctl.decline button {
  background: #ea0038;
}

.call-ctl.end button:hover:not(:disabled),
.call-ctl.decline button:hover:not(:disabled) {
  background: #ff2a5c;
}

.call-ctl.accept button {
  background: #25d366;
}

.call-ctl.accept button:hover:not(:disabled) {
  background: #3fe07c;
}

.call-ctl.take button {
  background: #0078d4;
}

.call-ctl.take button:hover:not(:disabled) {
  background: #1a8cff;
}

.call-ctl.decline button,
.call-ctl.accept button,
.call-ctl.audio-only button {
  width: 72px;
  height: 72px;
}

.call-ctl.decline .icon,
.call-ctl.accept .icon,
.call-ctl.audio-only .icon {
  width: 32px;
  height: 32px;
}

.call-ctl.decline span,
.call-ctl.accept span,
.call-ctl.audio-only span,
.call-ctl.take span {
  color: #fff;
  font-size: 14px;
}

/* Videoanruf: Bild der Gegenseite über die ganze Fläche, eigene Vorschau gespiegelt in der Ecke */
.call-layer.video {
  background: #0b141a;
}

/* Absolut im Raster: ohne grid-row läge die Bühne nur in der mittleren Zeile. */
.call-layer.video .call-stage {
  grid-row: 1 / -1;
  position: absolute;
  inset: 0;
  padding: 0;
  display: block;
}

.call-layer.video .call-head {
  background: linear-gradient(rgba(11, 20, 26, 0.7), transparent);
}

.call-layer.video .call-controls {
  background: linear-gradient(transparent, rgba(11, 20, 26, 0.8));
}

.call-layer.video .call-pill {
  background: rgba(31, 44, 52, 0.88);
}

.call-remote {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  background: #0b141a;
}

.call-placeholder {
  position: absolute;
  inset: 0;
  align-content: center;
  background: linear-gradient(180deg, #003966 0%, #0b141a 58%, #0b141a 100%);
}

.call-video-info {
  position: absolute;
  top: 64px;
  left: 24px;
  z-index: 3;
  display: grid;
  gap: 2px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.call-video-info b {
  font-size: 18px;
  font-weight: 600;
}

.call-video-info span {
  color: #d1d7db;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.call-preview {
  position: absolute;
  right: 24px;
  bottom: 140px;
  z-index: 3;
  width: min(240px, 26vw);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 18px;
  transform: scaleX(-1);
  background: #111b21;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
}

/* Gruppenanruf: Kacheln je Teilnehmer mit Zustand und Ring beim Sprechen */
.call-group {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 20px;
}

.call-group-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.call-group-head .call-name {
  font-size: 22px;
}

.call-group-head .call-status {
  font-size: 14px;
}

/* Gleich große Kacheln, unvollständige Reihe mittig; je Reihe 2 · 3 · 2×2 · 3 · 4 nach Anzahl. */
.call-grid {
  align-self: center;
  justify-self: center;
  width: min(1010px, 100%);
  max-height: 100%;
  overflow-y: auto;
  padding: 4px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  gap: 14px;
}

.call-grid.n1,
.call-grid.n2,
.call-grid.n4 {
  width: min(502px, 100%);
}

.call-grid.n3,
.call-grid.n5,
.call-grid.n6 {
  width: min(756px, 100%);
}

.call-tile {
  flex: 0 0 240px;
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 22px 12px 16px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: opacity 0.2s ease;
}

.call-tile.gone {
  opacity: 0.5;
}

.call-tile-avatar {
  padding: 4px;
  border-radius: 50%;
  box-shadow: 0 0 0 0 transparent;
  transition: box-shadow 0.15s ease;
}

.call-tile.speaking .call-tile-avatar {
  box-shadow: 0 0 0 3px #4da6ff;
}

.call-tile-avatar.pulse {
  animation: call-tile-pulse 1.2s ease-in-out infinite;
}

@keyframes call-tile-pulse {
  50% {
    box-shadow: 0 0 0 6px rgba(77, 166, 255, 0.28);
  }
}

.call-tile-name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 600;
}

.call-tile-state {
  min-height: 18px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #8696a0;
  font-size: 12.5px;
}

.call-tile-state .icon {
  width: 14px;
  height: 14px;
}

/* Gruppen-Videoanruf wie GroupVideoScreen in der App: Kachel je Teilnehmer, je zwei pro Reihe */
.call-layer.group-video {
  background: #0b141a;
}

.call-layer.group-video .call-stage {
  padding: 0 24px;
}

.call-layer.group-video .call-controls {
  padding-bottom: 20px;
}

/* Name und Stand oben links in der Kopfzeile, wie in der App */
.call-head-who {
  position: absolute;
  top: 10px;
  left: 20px;
  max-width: calc(50% - 130px);
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.call-head-who > div {
  min-width: 0;
  display: grid;
}

.call-head-who b,
.call-head-who > div > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.call-head-who b {
  font-size: 16px;
  font-weight: 600;
}

.call-head-who > div > span {
  color: #d1d7db;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.call-group.video {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.call-vnotes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.call-vnotes .call-notice {
  margin: 0;
}

/* Kacheln im Seitenverhältnis der Kamerabilder (4:3), so groß, wie die Fläche hergibt. */
.call-vgrid-box {
  flex: 1;
  min-height: 0;
  container-type: size;
  display: grid;
  place-items: center;
}

.call-vgrid {
  --gap: 12px;
  display: grid;
  grid-template-columns: repeat(var(--cols), var(--tile));
  gap: var(--gap);
  justify-content: center;
  align-content: center;
}

.call-vgrid.n1 {
  --cols: 1;
  --tile: min(100cqw, 100cqh * 4 / 3);
}

.call-vgrid.n2 {
  --cols: 2;
  --tile: min((100cqw - var(--gap)) / 2, 100cqh * 4 / 3);
}

.call-vgrid.n3,
.call-vgrid.n4 {
  --cols: 2;
  --tile: min((100cqw - var(--gap)) / 2, (100cqh - var(--gap)) / 2 * 4 / 3);
}

/* Die dritte Kachel mittig unter den ersten beiden. */
.call-vgrid.n3 .call-vtile:last-child {
  grid-column: 1 / -1;
  justify-self: center;
  width: var(--tile);
}

.call-vtile {
  position: relative;
  min-width: 0;
  aspect-ratio: 4 / 3;
  container-type: size;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 18px;
  background: #1f2c34;
}

/* Sprech-Ring als Rahmen über dem Bild */
.call-vtile::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  box-shadow: inset 0 0 0 3px transparent;
  transition: box-shadow 0.15s ease;
  pointer-events: none;
}

.call-vtile.speaking::after {
  box-shadow: inset 0 0 0 3px #4da6ff;
}

.call-vtile-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  background: #1f2c34;
  visibility: hidden;
}

.call-vtile.has-video .call-vtile-video {
  visibility: visible;
}

.call-vtile.has-video .call-vtile-avatar,
.call-vtile.sharing .call-vtile-avatar {
  visibility: hidden;
}

video.call-vtile-video.self {
  object-fit: cover;
  transform: scaleX(-1);
}

/* Profilbild passend zur Kachel – im kleinen Fenster mit vier Kacheln kleiner. */
.call-vtile-avatar .avatar {
  width: min(104px, 42cqh) !important;
  height: min(104px, 42cqh) !important;
  font-size: min(40px, 16cqh) !important;
}

.call-vtile-screen {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #d1d7db;
}

.call-vtile-screen .icon {
  width: min(64px, 30cqh);
  height: min(64px, 30cqh);
}

.call-vtile-label {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 2;
  max-width: calc(100% - 20px);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.45);
  font-size: 12.5px;
}

.call-vtile-label span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.call-vtile-label .icon {
  width: 14px;
  height: 14px;
}

/* Wer noch klingelt oder verbindet: klein unter dem Raster */
.call-waiting {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

.call-waiting-item {
  width: 68px;
  display: grid;
  justify-items: center;
  gap: 4px;
  opacity: 0.75;
  font-size: 11.5px;
}

.call-waiting-item span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.call-waiting-avatar {
  padding: 2px;
  border-radius: 50%;
}

.call-waiting-avatar.pulse {
  animation: call-tile-pulse 1.2s ease-in-out infinite;
}

/* Hinweis beim Teilen, mit „Teilen beenden“ (wie ScreenSharingPill in der App) */
.call-screen-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 6px 6px 14px;
  border-radius: 20px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 14px;
  white-space: nowrap;
}

.call-screen-pill .icon {
  width: 18px;
  height: 18px;
}

.call-screen-pill button {
  padding: 4px 10px;
  border-radius: 14px;
  color: #ff8a80;
  font-weight: 600;
}

.call-screen-pill button:hover {
  background: rgba(255, 255, 255, 0.1);
}

.call-layer.video .call-screen-pill {
  position: absolute;
  top: 64px;
  left: 50%;
  z-index: 3;
  transform: translateX(-50%);
}

/* Bildschirm teilen: Auswahl mit Vorschaubildern (Windows, X11) */
.dialog.screen-pick {
  width: min(720px, calc(100% - 48px));
  max-height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
}

.screen-pick-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  margin: 0 -8px 8px;
  padding: 0 8px;
}

.screen-pick-label {
  margin: 4px 0 8px;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 600;
}

.screen-pick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.screen-src {
  min-width: 0;
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 2px solid transparent;
  border-radius: 14px;
  text-align: left;
}

.screen-src:hover {
  background: var(--hover);
}

.screen-src.on {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.screen-thumb {
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 8px;
  background: var(--panel-head);
  color: var(--text-2);
}

.screen-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.screen-thumb .icon {
  width: 40px;
  height: 40px;
}

.screen-src-name {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}

.screen-src-name img {
  width: 16px;
  height: 16px;
  flex: none;
}

.screen-src-name span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dialog .buttons button:disabled {
  opacity: 0.4;
  cursor: default;
  background: none;
}

/* Gruppenanruf starten: wen anrufen, dann Video- oder Sprachanruf (wie GroupCallDialog in der App) */
.group-call-text {
  display: grid;
  gap: 2px;
  padding: 0 24px 10px;
}

.group-call-text p {
  margin: 0;
}

.group-call-text small {
  color: var(--text-2);
  font-size: 12.5px;
}

.group-call-pick .buttons {
  padding: 12px 16px 14px;
  border-top: 1px solid var(--border);
}

.pick-row.off {
  opacity: 0.5;
  cursor: default;
}

/* Schmale Leiste oben: verkleinerter Anruf, Anruf auf dem Handy, Klingeln */
body.has-call-bar #root {
  height: calc(100% - 44px);
  margin-top: 44px;
}

.call-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 75;
  height: 44px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 8px 0 16px;
  background: var(--accent);
  color: var(--on-accent);
  cursor: pointer;
}

.call-bar-dot {
  width: 10px;
  height: 10px;
  flex: none;
  border-radius: 50%;
  background: currentColor;
  animation: call-dot 1.4s ease-in-out infinite;
}

.call-bar.ringing .call-bar-dot {
  animation-duration: 0.7s;
}

@keyframes call-dot {
  50% {
    opacity: 0.3;
  }
}

.call-bar-text {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
  overflow: hidden;
  white-space: nowrap;
}

.call-bar-text b {
  font-weight: 600;
}

.call-bar-text span {
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.85;
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
}

.call-bar-muted {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.call-bar-muted .icon {
  width: 15px;
  height: 15px;
}

.call-bar-actions {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
}

.call-bar-btn {
  height: 32px;
  padding: 0 14px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: color-mix(in srgb, var(--on-accent) 16%, transparent);
  font-size: 13.5px;
  font-weight: 600;
}

.call-bar-btn:hover {
  background: color-mix(in srgb, var(--on-accent) 26%, transparent);
}

.call-bar-btn .icon,
.call-bar-icon .icon {
  width: 18px;
  height: 18px;
}

.call-bar-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--on-accent) 16%, transparent);
}

.call-bar-icon:hover {
  background: color-mix(in srgb, var(--on-accent) 26%, transparent);
}

.call-bar-icon.on {
  background: var(--on-accent);
  color: var(--accent);
}

.call-bar-btn.danger,
.call-bar-icon.danger {
  background: #ea0038;
  color: #fff;
}

.call-bar-btn.accept {
  background: #25d366;
  color: #fff;
}

.call-bar-btn.danger:hover,
.call-bar-icon.danger:hover {
  background: #ff2a5c;
}

.call-bar-btn.accept:hover {
  background: #3fe07c;
}

.call-bar-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

@media (prefers-reduced-motion: reduce) {
  .call-layer.enter,
  .call-avatar.pulse::before,
  .call-tile-avatar.pulse,
  .call-waiting-avatar.pulse,
  .call-bar-dot {
    animation: none;
  }
}

/* ------------------------------------------------------------ Chat-Extras: markierte Nachrichten */

.meta .star,
.emoji-meta .star {
  display: inline-grid;
}

.meta .star .icon,
.emoji-meta .star .icon {
  width: 12px;
  height: 12px;
}

.msg.starred .meta-space {
  width: 80px;
}

.msg.out.starred .meta-space {
  width: 98px;
}

.msg.edited.starred .meta-space {
  width: 148px;
}

.starred-list {
  background: var(--app-bg);
}

.panel-body.starred-list {
  gap: 0;
  padding: 6px 0 16px;
}

.starred-row {
  display: grid;
  gap: 6px;
  width: 100%;
  text-align: left;
  padding: 10px 18px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
}

.starred-row:hover {
  background: var(--hover);
}

.starred-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 13.5px;
}

.starred-who {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.starred-time {
  color: var(--text-2);
  font-size: 12px;
  flex: none;
}

.starred-bubble {
  justify-self: start;
  max-width: 100%;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 6px 8px 5px 9px;
  border-radius: 8px;
  background: var(--bubble-in);
  box-shadow: var(--shadow);
}

.starred-row.out .starred-bubble {
  justify-self: end;
  background: var(--bubble-out);
}

.starred-text {
  font-size: 14px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.starred-meta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex: none;
  font-size: 11px;
  color: var(--text-2);
}

.starred-meta .icon {
  width: 12px;
  height: 12px;
}

.starred-empty {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 48px 28px;
  text-align: center;
  color: var(--text-2);
}

.starred-empty b {
  color: var(--text);
  font-weight: 500;
  font-size: 16px;
}

.starred-badge {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  color: var(--accent);
  margin-bottom: 6px;
}

.starred-badge .icon {
  width: 44px;
  height: 44px;
}

/* ------------------------------------------------------------ Chat-Extras: angepinnte Nachrichten */

.pin-bar {
  flex: none;
  background: var(--panel);
  border-left: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 2px rgba(11, 20, 26, 0.06);
  position: relative;
  z-index: 1;
}

.pin-bar[hidden] {
  display: none;
}

.pin-bar-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 10px 6px 16px;
  cursor: pointer;
}

.pin-bar-inner:hover {
  background: var(--hover);
}

.pin-segments {
  display: flex;
  flex-direction: column;
  gap: 2px;
  height: 36px;
  width: 3px;
  flex: none;
}

.pin-segments i {
  flex: 1;
  border-radius: 2px;
  background: var(--accent);
  opacity: 0.3;
}

.pin-segments i.on,
.pin-segments i:only-child {
  opacity: 1;
}

.pin-icon {
  display: inline-grid;
  color: var(--accent);
  flex: none;
}

.pin-icon .icon {
  width: 18px;
  height: 18px;
}

.pin-main {
  flex: 1;
  min-width: 0;
}

.pin-label {
  color: var(--accent);
  font-size: 13px;
  font-weight: 500;
}

.pin-text {
  color: var(--text-2);
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radio-list {
  display: grid;
  gap: 2px;
  margin: 4px 0 8px;
}

.radio-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 6px;
  border-radius: 8px;
  cursor: pointer;
}

.radio-row:hover {
  background: var(--hover);
}

.radio-row input {
  accent-color: var(--accent);
  width: 18px;
  height: 18px;
  margin: 0;
}

/* ------------------------------------------------------------ Chat-Extras: Einmal ansehen */

.view-once {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 220px;
  padding: 4px 4px 2px 2px;
}

.view-once .vo-icon {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2.5px solid var(--text-2);
  color: var(--text-2);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
}

.view-once.fresh .vo-icon {
  border-color: var(--accent);
  color: var(--accent);
}

.view-once.opened .vo-icon {
  border-style: dashed;
}

.view-once .vo-main {
  flex: 1;
  min-width: 0;
}

.view-once .vo-label {
  font-weight: 500;
}

.view-once .vo-sub {
  font-size: 12.5px;
  color: var(--text-2);
}

.view-once.fresh .vo-sub {
  color: var(--accent);
}

/* ------------------------------------------------------------ Chat-Extras: geplante Nachrichten */

.sched-bar {
  flex: none;
  display: flex;
  padding: 6px 16px 0;
  background: var(--panel-head);
  border-left: 1px solid var(--border);
}

.sched-bar[hidden] {
  display: none;
}

.sched-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sched-chip .icon {
  width: 16px;
  height: 16px;
  flex: none;
}

.sched-when {
  display: grid;
  gap: 6px;
  margin: 10px 0 4px;
  font-size: 13px;
  color: var(--text-2);
}

.sched-when input,
.sched-text {
  font: inherit;
  font-size: 14px;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
}

.sched-text {
  width: 100%;
  resize: vertical;
  box-sizing: border-box;
}

.sched-preview {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 120px;
  overflow: auto;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--accent-soft);
}

.sched-error {
  color: #d32f2f;
  font-size: 13px;
}

.sched-error[hidden] {
  display: none;
}

.sched-hint,
.sched-offline {
  font-size: 12.5px;
  color: var(--text-2);
  margin: 4px 0;
}

.sched-list .sched-hint,
.sched-list .sched-offline {
  padding: 0 18px;
}

.sched-list .sched-hint {
  margin-top: 12px;
}

.sched-list {
  gap: 0;
}

.sched-row {
  display: grid;
  gap: 4px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
}

.sched-when-label {
  color: var(--accent);
  font-size: 13px;
  font-weight: 500;
}

.sched-row-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sched-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 2px 0 0 -12px;
}

.sched-actions button {
  flex: none;
  white-space: nowrap;
}

.sched-actions .danger {
  color: #d32f2f;
}

/* ------------------------------------------------------------ Nachrichteninfo (Leiste rechts) */

/* Oben die Nachricht wie im Chat, auf dessen Hintergrund. */
.msginfo-preview {
  min-width: 0;
  padding: 18px 22px 20px;
  background-color: var(--wallpaper);
  background-image: radial-gradient(var(--doodle) 1.4px, transparent 1.5px);
  background-size: 22px 22px;
}

.msginfo-preview .msg {
  margin: 0;
}

.msginfo-preview .bubble,
.msginfo-preview .emoji-col {
  max-width: calc(100% - 10px);
}

/* Die Leiste ist schmaler als der Chat: Sprachnachrichten dürfen hier schmaler werden. */
.msginfo-preview .voice {
  min-width: 220px;
}

.msginfo-card {
  gap: 2px;
}

.msginfo-head {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-2);
  font-size: 13.5px;
  padding-bottom: 4px;
}

.msginfo-status {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 8px 0;
}

.msginfo-status + .msginfo-status {
  border-top: 1px solid var(--border);
}

.msginfo-card .tick {
  width: 20px;
  height: 20px;
  color: var(--tick);
}

.msginfo-card .tick.read {
  color: var(--tick-read);
}

/* Zustellweg und Grund (delivery.js): kleines Symbol vor dem Weg, Erklärung unter „Noch nicht zugestellt“. */
.info-route {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.msginfo-card .info-route .icon {
  flex: none;
  width: 14px;
  height: 14px;
  margin-top: 2px;
  color: var(--text-2);
}

.info-details {
  font-size: 12px;
}

.info-explain {
  font-size: 12px;
  padding-top: 4px;
}

/* Uhr an einer noch nicht zugestellten Nachricht: Klick zeigt den Grund. */
.tick-hint {
  display: inline-flex;
  cursor: pointer;
}

.msginfo-card .vo-icon {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--tick-read);
  color: var(--tick-read);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 11px;
  line-height: 1;
}

/* Netz-Chats (über eine Bridge): Plakette „über WhatsApp“ unter der Nachricht, Hinweise, was das Netz nicht meldet. */
.msginfo-net {
  background: var(--panel);
  padding: 10px 20px;
}

.msginfo-card .tick.failed {
  color: var(--danger);
}

.msginfo-hints {
  gap: 8px;
}

.msginfo-hint {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--text-2);
  font-size: 12.5px;
  line-height: 1.4;
}

.msginfo-hint .icon {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 1px;
}

.msginfo-unknown {
  padding: 2px 0 4px;
}

/* Kontakte und Termine (cards.js): Karte in der Blase wie in der App, Uhrzeit darunter. */
.bubble.card-bubble {
  min-width: 300px;
  padding-bottom: 22px;
}

.card {
  display: grid;
  margin: -2px -4px 0 -5px;
}

.card-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  width: 100%;
  padding: 8px 6px 6px;
  border-radius: 6px;
  text-align: start;
  user-select: text;
}

.card-head:hover {
  background: color-mix(in srgb, var(--text-2) 8%, transparent);
}

.card-body {
  display: grid;
  gap: 1px;
  min-width: 0;
  flex: 1;
}

.card-title {
  font-weight: 600;
  font-size: 15.5px;
}

.card-line {
  font-size: 14px;
}

.card-sub {
  font-size: 13px;
  color: var(--text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-desc {
  font-size: 13px;
  color: var(--text-2);
  white-space: pre-wrap;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-stack {
  display: flex;
  flex: none;
}

.card-stack .avatar + .avatar {
  margin-left: -16px;
  box-shadow: 0 0 0 2px var(--bubble-in);
}

.msg.out .card-stack .avatar + .avatar {
  box-shadow: 0 0 0 2px var(--bubble-out);
}

.card-avatar .icon {
  width: 60%;
  height: 60%;
}

.card-actions {
  display: flex;
  margin-top: 4px;
  border-top: 1px solid color-mix(in srgb, var(--text-2) 25%, transparent);
}

.card-actions button {
  flex: 1 1 auto;
  display: inline-flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  padding: 9px 10px 7px;
  color: var(--tick-read);
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
}

.card-actions button + button {
  border-left: 1px solid color-mix(in srgb, var(--text-2) 25%, transparent);
}

.card-actions button:hover {
  background: color-mix(in srgb, var(--tick-read) 8%, transparent);
}

.card-actions .icon {
  width: 18px;
  height: 18px;
}

.event-card .card-actions .card-save {
  flex: none;
  width: 48px;
}

/* Kalenderblatt: Monat im roten Kopf, groß der Tag, darunter der Wochentag. */
.cal-tile {
  width: 54px;
  flex: none;
  display: grid;
  justify-items: center;
  overflow: hidden;
  border-radius: 10px;
  background: var(--panel);
  border: 1px solid color-mix(in srgb, var(--text-2) 25%, transparent);
}

.cal-tile.big {
  width: 66px;
}

.cal-month {
  width: 100%;
  text-align: center;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 0;
}

.cal-day {
  font-size: 22px;
  font-weight: 700;
  line-height: 26px;
}

.cal-tile.big .cal-day {
  font-size: 26px;
  line-height: 32px;
}

.cal-weekday {
  font-size: 11px;
  color: var(--text-2);
  padding-bottom: 4px;
}

.dialog.card-dialog {
  width: min(480px, calc(100% - 48px));
}

.card-dialog .dialog-scroll {
  display: grid;
  align-content: start;
  gap: 2px;
  padding: 0 16px;
}

.card-detail {
  display: grid;
  gap: 2px;
  padding: 6px 0;
}

.card-detail + .card-detail {
  border-top: 1px solid var(--border);
}

.card-detail-head {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 4px 8px 8px;
}

.card-detail-name {
  font-size: 19px;
  font-weight: 500;
}

.card-field {
  display: grid;
  width: 100%;
  padding: 7px 8px;
  border-radius: 10px;
  text-align: start;
}

.card-field:hover {
  background: var(--hover);
}

.card-field-value {
  white-space: pre-wrap;
}

.card-field-label {
  font-size: 12.5px;
  color: var(--text-2);
}

.card-detail-desc {
  padding: 8px;
  white-space: pre-wrap;
  user-select: text;
}

.card-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  padding: 8px 0 12px;
}

.card-detail-actions button {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 9px 16px;
  border-radius: 20px;
  color: var(--accent);
  font-weight: 600;
}

.card-detail-actions button:hover {
  background: var(--accent-soft);
}

.card-detail-actions .icon {
  width: 18px;
  height: 18px;
}

/* Status über eine Bridge (Stufe 12): Schalter „Auch als WhatsApp-Status“ mit Hinweis zur Privatsphäre des Netzes. */
.net-status-toggle { margin: 10px 2px 0; display: flex; flex-direction: column; gap: 4px; }
.net-status-toggle label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.net-status-hint { font-size: 12px; color: var(--text-2); line-height: 1.35; }
.sv-who .net-badge { margin-left: 6px; }

/* ------------------------------------------------------------ Feinschliff: Bilder, Platzhalter, Zustände, Fokus */

/* Bilder blenden nach dem Laden kurz ein (app.js setImageSource) – schon bekannte stehen sofort da. */
.fade-img {
  opacity: 0;
  transition: opacity var(--motion-slow) var(--ease);
}

.fade-img.loaded {
  opacity: 1;
}

/* Profilbild zum ersten Mal geladen: blendet über den Initialen ein. */
.avatar img.over {
  position: absolute;
  inset: 0;
}

/*
 * Platzhalter, solange die erste Chatliste bzw. ein Verlauf zum ersten Mal vom Handy kommt. Sie erscheinen erst nach
 * einem Moment – kommt die Antwort schnell, sieht man sie nie (kein Aufblitzen).
 */
@keyframes mu-delay-show {
  from {
    visibility: hidden;
  }
}

@keyframes mu-shimmer {
  to {
    transform: translateX(100%);
  }
}

:root {
  --skeleton: color-mix(in srgb, var(--text) 8%, transparent);
  --shimmer: rgba(255, 255, 255, 0.55);
}

@media (prefers-color-scheme: dark) {
  :root {
    --shimmer: rgba(255, 255, 255, 0.05);
  }
}

.skeleton-list,
.msg-skeleton {
  animation: mu-delay-show 0s 300ms both;
}

:root:not(.no-motion) .skeleton-list,
:root:not(.no-motion) .msg-skeleton {
  animation: mu-fade-in var(--motion-slow) var(--ease) 300ms both;
}

.chat-skel {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 72px;
  padding: 0 12px 0 14px;
  margin: 0 6px;
}

.sk-avatar,
.sk-line,
.sk-bubble {
  position: relative;
  overflow: hidden;
  background: var(--skeleton);
}

.sk-avatar {
  width: 49px;
  height: 49px;
  border-radius: 50%;
  flex: none;
}

.sk-lines {
  flex: 1;
  display: grid;
  gap: 10px;
}

.sk-line {
  height: 11px;
  border-radius: 6px;
  width: 60%;
}

.sk-line.w2 {
  width: 74%;
}

.sk-line.w3 {
  width: 46%;
}

.sk-line.short {
  width: 86%;
  height: 9px;
  opacity: 0.7;
}

/* Verlauf: ein paar Blasen unten, eigene rechts. */
.msg-skeleton {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  padding-bottom: 6px;
}

.sk-bubble {
  height: 36px;
  width: 200px;
  max-width: 65%;
  border-radius: 8px;
  background: color-mix(in srgb, var(--text) 7%, var(--bubble-in));
  box-shadow: var(--shadow);
}

.sk-bubble.out {
  align-self: flex-end;
  background: color-mix(in srgb, var(--text) 6%, var(--bubble-out));
}

.sk-bubble.w2 {
  width: 280px;
  height: 52px;
}

.sk-bubble.w3 {
  width: 140px;
}

:root:not(.no-motion) .sk-avatar::after,
:root:not(.no-motion) .sk-line::after,
:root:not(.no-motion) .sk-bubble::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, var(--shimmer), transparent);
  transform: translateX(-100%);
  animation: mu-shimmer 1.4s var(--ease) infinite;
}

/* Ladekreis in der Leiste rechts (Info lädt): erst nach einem Moment, sonst blitzt er nur auf. */
.spinner.center {
  animation:
    spin 0.9s linear infinite,
    mu-delay-show 0s 250ms both;
}

/* Weiche Zustände beim Überfahren und Drücken (nur Farben – kein Layout). */
.icon-btn,
.chat-row,
.menu button,
.filters button,
.link-btn,
.hit,
.member-row,
.pick-row,
.actions button,
.popover button,
.dialog .buttons button,
.starred-row,
.pill,
.to-bottom,
.fmt-btn,
.failed-mark,
.ep-cell {
  transition:
    background-color var(--motion-fast) linear,
    color var(--motion-fast) linear;
}

.icon-btn:active:not(:disabled),
.chat-row:active,
.menu button:active:not(:disabled),
.hit:active,
.pick-row:active {
  background: var(--selected);
}

.filters button:not(.on):hover {
  background: var(--selected);
  color: var(--text);
}

.to-bottom:hover {
  color: var(--text);
  background: var(--hover);
}

/* Sichtbarer Tastaturfokus (nur bei Tastatur, nicht beim Klicken). */
:where(button, a[href], [role="button"], [tabindex]:not([tabindex="-1"]), select, input[type="checkbox"], input[type="radio"]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Dialoge, Vollbild und Status bekommen beim Öffnen den Fokus auf die Fläche (motion.js) – ohne Rahmen ums Ganze. */
[tabindex="-1"]:focus {
  outline: none;
}

/* Ganze Zeilen und Menüeinträge: Rahmen innen, sonst schnitte ihn der Rand ab. */
.chat-row:focus-visible,
.menu button:focus-visible,
.hit:focus-visible,
.member-row:focus-visible,
.starred-row:focus-visible,
.info-action:focus-visible {
  outline-offset: -2px;
}

.search:focus-within {
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 60%, transparent);
}

/* Schalter „Animationen“ im Menü ⋮ (motion.js): rechts der Stand. */
.menu button.motion-menu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.motion-state {
  color: var(--text-2);
  font-size: 13px;
}

/* Lange Namen und Titel: eine Zeile mit „…“ statt umzubrechen oder herauszuragen. */
.panel-head h3,
.side-head h2,
.sd-title,
.hit-line b,
.pick-title,
.member-body > div:first-child {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.panel-head h3 {
  flex: 1;
}

.toast {
  max-width: min(80vw, 560px);
  text-align: center;
}

/* Bildlaufleisten dezent: schmaler Daumen, dunkler beim Überfahren. */
::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgba(134, 150, 160, 0.6);
}

@supports not selector(::-webkit-scrollbar) {
  * {
    scrollbar-width: thin;
    scrollbar-color: rgba(134, 150, 160, 0.45) transparent;
  }
}

/* Zurück zur Chatliste: nur im schmalen Fenster (unten). */
.conv-back {
  display: none;
}

/* ------------------------------------------------------------ Schmales Fenster (MeshUp im Browser am Handy) */

/*
 * Unter 720 px Breite passt nur eine Spalte: ohne offenen Chat die Chatliste, sonst das Gespräch (mit Zurück-Pfeil im
 * Kopf); die Leiste rechts liegt dann über dem Gespräch. Am Computer ist das Fenster mindestens 820 px breit.
 */
@media (max-width: 720px) {
  .app,
  .app.with-panel {
    grid-template-columns: 100%;
  }

  .app > .sidebar,
  .app > .conversation,
  .app > .panel {
    grid-area: 1 / 1;
  }

  .app > .sidebar {
    border-right: 0;
  }

  .app.chat-open > .sidebar,
  .app:not(.chat-open) > .conversation {
    display: none;
  }

  .app > .panel {
    position: relative;
    z-index: 3;
    border-left: 0;
  }

  :root:not(.no-motion) .app.chat-open > .conversation {
    animation: mu-panel-in var(--motion-slow) var(--ease);
  }

  :root:not(.no-motion) .app:not(.chat-open) > .sidebar {
    animation: mu-fade-in var(--motion) var(--ease);
  }

  .conv-back {
    display: grid;
    margin-right: -6px;
  }

  .conv-head {
    gap: 8px;
    padding: 0 8px 0 4px;
    border-left: 0;
  }

  .composer {
    border-left: 0;
    padding: 6px 8px;
  }

  .messages {
    padding: 8px 10px 6px;
  }

  .bubble,
  .emoji-col,
  .bubble.album {
    max-width: 85%;
  }

  .bubble.wide {
    width: min(400px, 85%);
  }

  .voice,
  .music,
  .attachment,
  .location,
  .call {
    min-width: 0;
  }

  .pair {
    padding: 12px;
    align-items: start;
  }

  .pair-card {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 28px 22px;
    border-radius: 18px;
  }

  .pair h1 {
    font-size: 24px;
  }

  .qr-box {
    order: -1;
  }

  .emoji-panel {
    width: calc(100vw - 24px);
  }

  .welcome {
    padding: 24px;
  }
}


/* MeshUp im Browser – nur was es am Computer nicht gibt (Hinweise über der Oberfläche); sonst style.css. */

.web-cover {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  background: var(--app-bg);
  padding: 24px;
}

/* Ein- und Ausblenden wie die Dialoge der Oberfläche (style.css, motion.js); ohne Bewegung (.no-motion) sofort. */
:root:not(.no-motion) .web-cover {
  animation: mu-fade-in var(--motion) var(--ease);
}

:root:not(.no-motion) .web-cover-card {
  animation: mu-dialog-in var(--motion) var(--ease);
}

:root:not(.no-motion) .web-notify {
  animation: mu-up-in var(--motion-slow) var(--ease);
}

.web-cover-card {
  max-width: 440px;
  text-align: center;
  background: var(--panel);
  color: var(--text);
  border-radius: 16px;
  padding: 36px 32px 28px;
  box-shadow: var(--menu-shadow);
}

.web-cover-logo {
  width: 64px;
  height: 64px;
  margin: 0 auto 18px;
  background: url("icon.svg") center / contain no-repeat;
}

.web-cover-card h2 {
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: 500;
}

.web-cover-card p {
  margin: 0 0 22px;
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.5;
}

.web-cover-btn {
  border: 0;
  border-radius: 20px;
  padding: 10px 24px;
  background: var(--accent);
  color: var(--on-accent);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}

.web-cover-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.web-notify {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 900;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: min(520px, calc(100vw - 32px));
  padding: 12px 14px 12px 18px;
  background: var(--panel);
  color: var(--text);
  border-radius: 12px;
  box-shadow: var(--menu-shadow);
  font-size: 13.5px;
}

.web-notify span {
  flex: 1;
}

.web-notify button {
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 16px;
  white-space: nowrap;
}

.web-notify .web-notify-on {
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 500;
}

.web-notify .web-notify-later {
  color: var(--text-2);
}

/* Kopplungsseite im Browser: über welchen Mesh-Node, woher der Code kommt, welche App es braucht. */
.pair-web {
  margin-top: 14px;
  display: grid;
  gap: 10px;
  max-width: 520px;
}

.pair-web .pair-note {
  margin-top: 0;
}

.relay-state {
  font-size: 12px;
  color: var(--text-2);
  text-align: center;
  max-width: 280px;
}

.relay-state.offline {
  color: var(--danger);
}

.menu-info .web-origin {
  color: var(--text-2);
  font-size: 12px;
  margin-top: 4px;
}