/* ============================================================
   Design-System — eine Datei für alle Seiten
   ============================================================ */

:root {
  /* Farben */
  --brand:        #c0242e;
  --brand-dark:   #9a1c25;
  --brand-soft:   #fbeaec;
  --ink:          #1e2229;
  --ink-soft:     #5b6470;
  --bg:           #f5f6f8;
  --surface:      #ffffff;
  --border:       #e3e6ea;
  --danger:       #c0242e;
  --success-bg:   #e7f5ec;
  --success-ink:  #1e6b3a;
  --error-bg:     #fbeaec;
  --error-ink:    #8f1a22;
  --warn-bg:      #fff8e6;
  --warn-ink:     #7a5b00;
  --warn-border:  #ffe08a;
  --overlay-bg:   rgba(255, 255, 255, .97);
  --tick-read:    #2a7ac4;

  /* Glasflächen: leicht durchscheinend, dahinter wird weichgezeichnet.
     "strong" für Flächen mit viel Text — dort zählt Lesbarkeit mehr. */
  --glass:        rgba(255, 255, 255, .70);
  --glass-strong: rgba(255, 255, 255, .86);
  --glass-edge:   rgba(255, 255, 255, .65);
  --blur:         16px;

  /* Typografie */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Sonstiges */
  --radius:    18px;
  --radius-sm: 11px;
  --shadow:    0 1px 2px rgba(30, 34, 41, .04), 0 8px 24px rgba(30, 34, 41, .08);
  --shadow-lg: 0 2px 8px rgba(30, 34, 41, .06), 0 24px 56px rgba(30, 34, 41, .16);

  /* Farbverlauf der Marke — für Kopfzeilen und Primärflächen */
  --brand-grad: linear-gradient(135deg, var(--brand), var(--brand-dark));
}

/* ---------- Basis ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/*
 * Muss vor allen Komponenten stehen: Autoren-CSS schlägt das
 * Browser-Standard-[hidden]{display:none}. Ohne diese Regel würde z. B.
 * .attach-preview{display:flex} das hidden-Attribut überstimmen und die
 * Leiste dauerhaft anzeigen.
 */
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  min-height: 100vh;
}

/* Zarte Farbschleier im Hintergrund. Sie geben dem Glaseffekt etwas zum
   Weichzeichnen — ohne sie sähe durchscheinendes Glas aus wie eine flache
   graue Fläche. Bewusst sehr dezent, damit Text überall lesbar bleibt. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(58rem 40rem at 12% -8%,  color-mix(in srgb, var(--brand) 13%, transparent), transparent 70%),
    radial-gradient(48rem 38rem at 92% 4%,   color-mix(in srgb, var(--brand) 8%,  transparent), transparent 72%),
    radial-gradient(60rem 45rem at 78% 108%, color-mix(in srgb, var(--brand) 7%,  transparent), transparent 70%);
}

h1, h2, h3 {
  line-height: 1.25;
  letter-spacing: -0.01em;
}

a {
  color: var(--brand);
}

/* ---------- Topbar / Navigation ---------- */

.topbar {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 20px;
  height: 56px;
  background: var(--glass);
  backdrop-filter: blur(var(--blur)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(150%);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 var(--glass-edge) inset, var(--shadow);
  position: sticky;
  top: 0;
  z-index: 20;
}

/* Schmaler Farbstreifen statt des früheren dicken Rands. */
.topbar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--brand);
  opacity: .9;
}

.topbar .brand {
  font-size: 17px;
  font-weight: 700;
  color: var(--brand);
  text-decoration: none;
  white-space: nowrap;
}

.topbar nav {
  display: flex;
  gap: 4px;
  flex: 1;
}

.topbar nav a {
  color: var(--ink-soft);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
}

.topbar nav a:hover {
  background: var(--bg);
  color: var(--ink);
}

.topbar nav a.active {
  background: var(--brand-soft);
  color: var(--brand);
}

.topbar .user {
  font-size: 13px;
  color: var(--ink-soft);
  white-space: nowrap;
}

.topbar .user b {
  color: var(--ink);
}

/* ---------- Layout ---------- */

main.page {
  max-width: 860px;
  margin: 32px auto;
  padding: 0 20px;
}

.card {
  background: var(--glass-strong);
  backdrop-filter: blur(var(--blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(140%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 1px 0 var(--glass-edge) inset, var(--shadow);
  padding: 24px;
}

.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.page-head h2 {
  margin: 0;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 9px 16px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  background: var(--brand-grad);
  color: #fff;
  text-decoration: none;
  transition: filter .15s ease, transform .12s ease, box-shadow .15s ease;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--brand) 30%, transparent);
}

.btn:hover {
  filter: brightness(1.07);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--brand) 34%, transparent);
}

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

.btn.btn-secondary {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--border);
}

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

.btn.btn-danger {
  background: transparent;
  color: var(--danger);
  border-color: currentColor;
}

.btn.btn-danger:hover {
  background: var(--brand-soft);
}

.btn.btn-sm {
  padding: 5px 10px;
  font-size: 13px;
}

/* ---------- Formulare ---------- */

label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 4px;
}

input[type="text"],
input[type="password"],
input[type="email"],
select,
textarea {
  font: inherit;
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  margin-bottom: 16px;
  transition: border-color .15s ease, box-shadow .15s ease;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}

/* ---------- Meldungen ---------- */

.flash {
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  margin-bottom: 16px;
  font-size: 14px;
}

.flash.error {
  background: var(--error-bg);
  color: var(--error-ink);
}

.flash.success {
  background: var(--success-bg);
  color: var(--success-ink);
}

/* ---------- Login ---------- */

.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.login-card {
  width: 100%;
  max-width: 360px;
}

.login-card h2 {
  margin-top: 0;
  text-align: center;
}

.login-card .btn {
  width: 100%;
}

/* Hinweistext auf den Login-Karten (normale Abstände, anders als .field-hint) */
.login-note {
  margin: 0 0 16px;
  font-size: 13px;
  color: var(--ink-soft);
}

/* Link unterhalb des Buttons (z. B. "Passwort vergessen?") */
.login-alt-link {
  margin: 14px 0 0;
  text-align: center;
  font-size: 13px;
}

.login-alt-link a {
  color: var(--ink-soft);
}

/* ---------- Chatraum-Liste ---------- */

.room-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.room-list li {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.room-list .room-info {
  flex: 1;
  min-width: 160px;
}

.room-list .room-info small {
  display: block;
  color: var(--ink-soft);
}

.room-list .room-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ---------- Tabellen ---------- */

table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

table.data th,
table.data td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}

table.data th {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink-soft);
}

table.data tr:hover td {
  background: var(--bg);
}

.role-badge {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  color: var(--ink-soft);
  white-space: nowrap;
}

.role-badge.admin {
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  border-color: color-mix(in srgb, var(--brand) 28%, transparent);
  color: var(--brand);
}

/* ---------- Modal ---------- */

.modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(30, 34, 41, .5);
  padding: 20px;
}

.modal.open {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.modal-content {
  background: var(--glass-strong);
  backdrop-filter: blur(var(--blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(140%);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 24px;
  width: 100%;
  max-width: 380px;
  margin-top: 10vh;
}

.modal-content h2 {
  margin: 0 0 16px;
  font-size: 18px;
}

.modal-close {
  float: right;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: var(--ink-soft);
  background: none;
  border: none;
  padding: 0;
}

.modal-close:hover {
  color: var(--ink);
}

/* ---------- Chat ---------- */

/* Die Chatseite füllt genau das Fenster — gescrollt wird nur im Nachrichten-
   bereich, nicht die Seite selbst. Statt einer festen Rechnung mit 100vh
   (die sich leicht um ein paar Pixel vertut und dann doch eine Bildlaufleiste
   erzeugt) verteilt ein Flex-Layout den Platz. */
body.chat-page {
  height: 100vh;
  height: 100dvh;          /* auf Handys: ohne die ein-/ausblendende Leiste */
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.chat-container {
  width: 100%;
  margin: 16px 0;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.chat-card {
  position: relative;
  background: var(--glass-strong);
  backdrop-filter: blur(var(--blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(140%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.chat-header {
  background: var(--brand-grad);
  color: #fff;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset;
}

.chat-header h1 {
  margin: 0;
  font-size: 16px;
  flex: 1;
}

.chat-header .back {
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  padding: 5px 10px;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.chat-header .back:hover {
  background: rgba(255, 255, 255, .15);
}

.chat-header .who {
  font-size: 13px;
  opacity: .9;
}

.chatbox {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  scroll-behavior: smooth;
  background: var(--bg);
}
/* Eigene Nachrichten rechts ausrichten (die Blase selbst setzt align-self:
   flex-end; das hier ist nur die Absicherung auf Container-Ebene). */
.chatbox > .msg.own {
  align-self: flex-end;
}

.msg {
  position: relative;
  max-width: 78%;
  align-self: flex-start;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px 16px 16px 5px;
  padding: 9px 13px;
  font-size: 14px;
  overflow-wrap: anywhere;
  box-shadow: 0 1px 2px rgba(30, 34, 41, .05);
  transition: box-shadow .15s ease;
}

.msg:hover {
  box-shadow: 0 2px 8px rgba(30, 34, 41, .09);
}

.msg .msg-text {
  /* Zeilenumbrüche aus dem Eingabefeld beibehalten (Shift+Enter), lange Zeilen
     trotzdem normal umbrechen lassen. */
  white-space: pre-wrap;
}

/* Nachrichten, die nur aus Emojis bestehen, werden größer gezeigt. */
.msg .msg-text--jumbo {
  font-size: 40px;
  line-height: 1.15;
}

.msg .msg-text--big {
  font-size: 26px;
  line-height: 1.2;
}

.msg.own {
  align-self: flex-end;
  background: var(--brand-grad);
  color: #fff;
  border-color: transparent;
  border-radius: 16px 16px 5px 16px;
}

/* In eigenen (farbigen) Blasen müssen Sekundärtexte und Haken hell bleiben. */
.msg.own .meta time,
.msg.own .msg-edited {
  color: rgba(255, 255, 255, .8);
}

/* Ungelesen: dezent-transparentes Weiß. Gelesen: heller Blauton, damit der
   vertraute "blaue Haken" auch auf farbigem Grund erkennbar bleibt. */
.msg.own .ticks {
  color: rgba(255, 255, 255, .65);
}

.msg.own .ticks.read {
  color: #9fd0ff;
}

.msg.own a {
  color: #fff;
  text-decoration: underline;
}

.msg.own .msg-quote {
  background: rgba(255, 255, 255, .16);
  border-left-color: rgba(255, 255, 255, .6);
  color: rgba(255, 255, 255, .92);
}

.msg .meta {
  display: flex;
  gap: 8px;
  align-items: baseline;
  margin-bottom: 2px;
}

.msg .meta b {
  font-size: 13px;
}

.msg .meta time {
  font-size: 11px;
  color: var(--ink-soft);
}

.msg img.chat-image {
  display: block;
  /* width/height-Attribute am <img> liefern das Seitenverhältnis, sodass der
     Browser den Platz sofort reserviert (Chat scrollt korrekt ans Ende). Damit
     das Bild trotzdem begrenzt und unverzerrt bleibt, hier die Anzeigegröße
     deckeln — height:auto hält dabei das Seitenverhältnis, object-fit schützt
     bei sehr hohen Bildern (max-height) vor Verzerrung. */
  max-width: min(280px, 100%);
  max-height: 340px;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-sm);
  margin-top: 4px;
}

.chat-form {
  display: flex;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}

.chat-form textarea {
  flex: 1;
  resize: none;
  margin: 0;
  height: 44px;
  max-height: 140px;
  /* Bis zur max-height wächst das Feld ohnehin nicht (feste Höhe), also keine
     Scrollleiste/Pfeile zeigen. Erst wenn Inhalt die max-height übersteigt,
     erlaubt auto das Scrollen. So sind die kleinen Spinner-Pfeile bei leerem
     Feld weg. */
  overflow-y: auto;
  line-height: 1.4;
}

/* Solange das Feld auf Grundhöhe steht, gar kein Overflow — sonst rendern
   Chromium/Windows die winzigen Scrollpfeile schon bei leerem Feld. */
.chat-form textarea:not(.is-grown) {
  overflow-y: hidden;
}

.chat-hint {
  text-align: center;
  font-size: 12px;
  color: var(--ink-soft);
  margin-top: 8px;
}

/* ---------- Fehlerseite ---------- */

.error-card {
  max-width: 480px;
  margin: 40px auto;
  text-align: center;
}

.error-card .code {
  font-size: 56px;
  font-weight: 800;
  line-height: 1;
  color: var(--brand);
  letter-spacing: -0.03em;
}

.error-card h2 {
  margin: 8px 0;
}

.error-card p {
  color: var(--ink-soft);
  margin: 0 0 20px;
}

.error-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ---------- Responsive ---------- */

@media (max-width: 640px) {
  .topbar {
    gap: 12px;
    padding: 0 12px;
  }

  .topbar .user {
    display: none;
  }

  .msg {
    max-width: 90%;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Aktionen in Tabellenzeilen ---------- */

table.data td.row-actions {
  text-align: right;
  white-space: nowrap;
}

table.data td.row-actions form {
  display: inline;
}

table.data td.row-actions > * + * {
  margin-left: 6px;
}

.field-hint {
  margin: -10px 0 16px;
  font-size: 12px;
  color: var(--ink-soft);
}

/* ---------- Raum ohne Zutritt ---------- */

.room-list .no-access {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--bg);
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  padding: 5px 10px;
}

/* ---------- Dateianhänge ---------- */

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

.chat-form .attach-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  width: 44px;
  padding: 0;
  margin: 0;
  font-size: 18px;
  cursor: pointer;
  flex-shrink: 0;
}

/* --- Emoji-Auswahl --- */
.chat-form .emoji-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  width: 44px;
  padding: 0;
  margin: 0;
  font-size: 18px;
  cursor: pointer;
  flex-shrink: 0;
}

.emoji-panel {
  position: absolute;
  bottom: 74px;
  left: 12px;
  z-index: 20;
  width: 320px;
  max-width: calc(100% - 24px);
  background: var(--glass-strong);
  backdrop-filter: blur(var(--blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(140%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.emoji-tabs {
  display: flex;
  gap: 2px;
  padding: 6px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
}

.emoji-tab {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  font-size: 18px;
  line-height: 1;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
}

.emoji-tab:hover {
  background: var(--brand-soft);
}

.emoji-tab.active {
  background: var(--brand-soft);
  box-shadow: inset 0 -2px 0 var(--brand);
}

.emoji-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
  padding: 8px;
  max-height: 220px;
  overflow-y: auto;
}

.emoji-item {
  border: 0;
  background: transparent;
  font-size: 20px;
  line-height: 1;
  padding: 6px 0;
  border-radius: 6px;
  cursor: pointer;
}

.emoji-item:hover {
  background: var(--brand-soft);
}

/* Der "Eigene"-Tab braucht Blocklayout (Bilder-Zeile + Upload-Formular),
   sonst quetscht das 8-Spalten-Grid alles in schmale Zellen. */
.emoji-grid--custom {
  display: block;
}

.emoji-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 12px;
  text-align: center;
  font-size: 13px;
  color: var(--ink-soft);
}

.msg a.file-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  padding: 8px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--ink);
  max-width: 260px;
}

.msg a.file-chip:hover {
  background: var(--bg);
  border-color: var(--brand);
}

.msg a.file-chip .file-icon {
  font-size: 20px;
  flex-shrink: 0;
}

.msg a.file-chip b {
  display: block;
  font-size: 13px;
  overflow-wrap: anywhere;
}

.msg a.file-chip small {
  color: var(--ink-soft);
  font-size: 11px;
}

/* ---------- Zugriffs-Modal: Teilnehmerliste ---------- */

.modal-content .section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  margin: 22px 0 10px;
}

.modal-content .section-title:first-of-type {
  margin-top: 12px;
}

.member-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  max-height: 260px;
  overflow-y: auto;
}

.member-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px 9px 9px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--ink) 3%, transparent);
  font-size: 14px;
  transition: border-color .15s ease, background-color .15s ease;
}

.member-list li:hover {
  border-color: color-mix(in srgb, var(--brand) 35%, var(--border));
  background: color-mix(in srgb, var(--brand) 5%, transparent);
}

/* Anfangsbuchstabe als ruhiger Anker links */
.member-list .member-initial {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--brand) 14%, transparent);
  color: var(--brand);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
}

.member-list .member-name {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
  font-weight: 500;
}

.member-list li.empty {
  color: var(--ink-soft);
  border-style: dashed;
  background: none;
  justify-content: center;
  padding: 14px 10px;
  font-size: 13px;
}

.member-list li.empty:hover {
  border-color: var(--border);
  background: none;
}

.modal-content select:disabled {
  color: var(--ink-soft);
  background: var(--bg);
}

/* ---------- Glocke im Chat-Header ---------- */

.chat-header .bell {
  background: none;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: var(--radius-sm);
  color: #fff;
  font-size: 15px;
  line-height: 1;
  padding: 5px 8px;
  cursor: pointer;
  opacity: .7;
}

.chat-header .bell.on,
.chat-header .bell:hover {
  opacity: 1;
  background: rgba(255, 255, 255, .15);
}

/* ---------- Haken ---------- */

.msg .ticks {
  display: block;
  text-align: right;
  font-size: 12px;
  line-height: 1;
  margin-top: 2px;
  color: var(--ink-soft);
  letter-spacing: -1px;
}

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

/* ---------- Vorschau des Anhangs ---------- */

.attach-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  background: var(--brand-soft);
}

.attach-preview .thumb {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.attach-preview .file-icon {
  font-size: 26px;
  flex-shrink: 0;
}

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

.attach-preview .attach-info b {
  display: block;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attach-preview .attach-info small {
  color: var(--ink-soft);
  font-size: 11px;
}

.attach-preview .attach-hint {
  font-size: 12px;
  color: var(--brand);
  font-weight: 600;
  white-space: nowrap;
}

/* ---------- Drop-Overlay ---------- */

.chat-card {
  position: relative;
}

.drop-overlay {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 10;
  background: rgba(192, 36, 46, .08);
  backdrop-filter: blur(1px);
  border: 3px dashed var(--brand);
  border-radius: var(--radius);
  color: var(--brand);
  font-weight: 700;
  text-align: center;
}

.drop-overlay.active {
  display: flex;
  align-items: center;
  justify-content: center;
}

.drop-overlay .drop-icon {
  font-size: 40px;
  margin-bottom: 6px;
}

@media (max-width: 640px) {
  .attach-preview .attach-hint {
    display: none;
  }
}

/* ---------- Ungelesen-Zähler und Glocke in der Raumliste ---------- */

.room-list .unread-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

.room-list .bell {
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  line-height: 1;
  padding: 6px 8px;
  cursor: pointer;
  opacity: .6;
}

.room-list .bell.on,
.room-list .bell:hover {
  opacity: 1;
  border-color: var(--brand);
}

/* ---------- Bild in voller Größe (Lightbox) ---------- */

.msg a.image-link {
  display: inline-block;
  max-width: 100%;
  cursor: zoom-in;
  border-radius: var(--radius-sm);
}

.msg a.image-link:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(20, 22, 26, .92);
}

.lightbox-figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 100%;
  max-height: 100%;
}

.lightbox img {
  max-width: min(92vw, 1400px);
  max-height: 80vh;
  object-fit: contain;
  border-radius: var(--radius-sm);
  background: #fff;
}

.lightbox figcaption {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  font-size: 14px;
  overflow-wrap: anywhere;
}

.lightbox-close {
  position: absolute;
  top: 10px;
  right: 16px;
  background: none;
  border: none;
  color: #fff;
  font-size: 34px;
  line-height: 1;
  padding: 4px 10px;
  cursor: pointer;
  opacity: .8;
}

.lightbox-close:hover,
.lightbox-close:focus-visible {
  opacity: 1;
}

body.no-scroll {
  overflow: hidden;
}

@media (max-width: 640px) {
  .lightbox {
    padding: 12px;
  }

  .lightbox img {
    max-height: 72vh;
  }
}

/* ---------- Anhang verwerfen ---------- */

.attach-preview .attach-remove {
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  font-size: 22px;
  line-height: 1;
  padding: 2px 8px;
  cursor: pointer;
  flex-shrink: 0;
}

.attach-preview .attach-remove:hover,
.attach-preview .attach-remove:focus-visible {
  color: var(--danger);
  border-color: var(--danger);
}

/* ---------- Ersteller im Zugriffs-Modal ---------- */

.member-list .creator-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1;
  color: var(--ink-soft);
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  padding: 5px 10px;
  white-space: nowrap;
}

/* ---------- Schmale, zentrierte Seite (z. B. Passwort ändern) ---------- */

main.page.page-narrow {
  max-width: 460px;
}

.page-narrow .page-head {
  justify-content: center;
}

/* ---------- Profilbilder ---------- */

.avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--bg);
}

span.avatar-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-soft);
  border: 1px solid var(--border);
}

.avatar-lg {
  width: 56px;
  height: 56px;
  font-size: 22px;
}

table.data td.avatar-cell {
  width: 1%;
  padding-right: 0;
}

.avatar-edit {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.avatar-edit-actions {
  flex: 1;
  min-width: 0;
}

.avatar-edit-actions input[type="file"] {
  font-size: 13px;
  max-width: 100%;
}

.avatar-edit .checkbox {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0 0;
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-soft);
  text-transform: none;
}

.avatar-edit .checkbox input {
  width: auto;
  margin: 0;
}

/* Im Chat sitzt das Bild in der Kopfzeile der Blase */
.msg .meta {
  gap: 6px;
}

.msg .meta .avatar {
  width: 22px;
  height: 22px;
}

/* ---------- Bild-Zuschneider ---------- */

.modal.cropper .modal-content {
  max-width: 340px;
  text-align: center;
}

.cropper-stage {
  position: relative;
  width: 280px;
  height: 280px;
  margin: 0 auto;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--ink);
}

.cropper-stage canvas {
  display: block;
  touch-action: none;
  cursor: grab;
}

.cropper-stage canvas:active {
  cursor: grabbing;
}

/* Runder Ausschnitt: außen abdunkeln, Ring markiert den sichtbaren Bereich */
.cropper-mask {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: var(--radius-sm);
  box-shadow: 0 0 0 9999px rgba(20, 22, 26, .55) inset;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent 0 49%, #000 49.5%);
  mask: radial-gradient(circle at 50% 50%, transparent 0 49%, #000 49.5%);
}

.cropper-zoom {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 4px;
  font-size: 16px;
  color: var(--ink-soft);
}

.cropper-zoom input[type="range"] {
  flex: 1;
  margin: 0;
  padding: 0;
  accent-color: var(--brand);
}

.cropper-hint {
  margin: 0 0 16px;
  font-size: 12px;
  color: var(--ink-soft);
}

.cropper-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
}


/* ==========================================================================
   Farbschemata
   --------------------------------------------------------------------------
   Zwei unabhängige Teile:
     - Basis  -> Attribut data-base am <html>: "hell" oder "dunkel"
     - Akzent -> die Variablen --brand/--brand-dark/--tick-read werden direkt
                 am <html> gesetzt (serverseitig aus der Datenbank oder vom
                 Browser). --brand-soft wird daraus abgeleitet.
   ========================================================================== */

html {
  /* Zarter Ton der Akzentfarbe für eigene Nachrichtenblasen, Markierungen usw.
     color-mix wird von allen aktuellen Browsern unterstützt; sonst greift der
     Rückfallwert aus :root. */
  --brand-soft: color-mix(in srgb, var(--brand) 12%, #ffffff);
}

html[data-base="dunkel"] {
  --ink:         #e6e8ec;
  --ink-soft:    #a2abb8;
  --bg:          #14171c;
  --surface:     #1c2027;
  --border:      #2c323b;
  --success-bg:  #17301f;
  --success-ink: #7ddba0;
  --error-bg:    #3a1f22;
  --error-ink:   #f0868f;
  --warn-bg:     #33290f;
  --warn-ink:    #e8c86a;
  --warn-border: #5a4a1c;
  --overlay-bg:  rgba(20, 22, 26, .97);
  --shadow:      0 1px 2px rgba(0, 0, 0, .4), 0 6px 20px rgba(0, 0, 0, .34);
  --shadow-lg:   0 2px 6px rgba(0, 0, 0, .45), 0 18px 44px rgba(0, 0, 0, .5);
  --glass:        rgba(28, 32, 39, .68);
  --glass-strong: rgba(28, 32, 39, .88);
  --glass-edge:   rgba(255, 255, 255, .07);
  --brand-soft:  color-mix(in srgb, var(--brand) 22%, #1c2027);
}

/* In dunklen Schemata wirken Bilder oft zu grell — leicht abdunkeln. */
html[data-base="dunkel"] .msg img.chat-image {
  filter: brightness(.92);
}

/* Eigene Blasen im Dunkelmodus etwas gedeckter, damit das Rot nicht grell
   leuchtet — Verlauf mit einem Hauch dunkler Grundfläche gemischt. */
html[data-base="dunkel"] .msg.own {
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--brand) 82%, #000),
      color-mix(in srgb, var(--brand-dark) 88%, #000));
}

/* ---------- Einstellungen: Reiter ---------- */

.settings-layout {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.settings-nav {
  flex: 0 0 190px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: sticky;
  top: 16px;
}

.settings-nav button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.settings-nav button:hover {
  background: var(--brand-soft);
}

.settings-nav button.active {
  background: var(--brand-soft);
  border-color: var(--brand);
  font-weight: 600;
}

.settings-nav .nav-icon {
  font-size: 16px;
  line-height: 1;
}

.settings-panels {
  flex: 1;
  min-width: 0;
}

.settings-panel[hidden] {
  display: none;
}

.settings-panel .card + .card {
  margin-top: 16px;
}

@media (max-width: 760px) {
  .settings-layout { flex-direction: column; }
  .settings-nav {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    flex-basis: auto;
    width: 100%;
  }
  .settings-nav button { width: auto; }
}

/* ---------- Einstellungen: Farbauswahl ---------- */

.theme-bases {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 4px 0 18px;
}

.theme-choice {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}

.theme-choice:hover { border-color: var(--brand); }

.theme-choice.active {
  border-color: var(--brand);
  box-shadow: inset 0 0 0 1px var(--brand);
}

.theme-preview {
  position: relative;
  flex: 0 0 auto;
  width: 34px;
  height: 22px;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
}

.theme-preview .tp-bg    { position: absolute; inset: 0; background: #f5f6f8; }
.theme-preview .tp-brand { position: absolute; top: 0; right: 0; bottom: 0; width: 40%;
                           background: var(--brand); }

.theme-preview[data-preview="dunkel"] .tp-bg { background: #1c2027; }
.theme-preview[data-preview="system"] .tp-bg {
  background: linear-gradient(90deg, #f5f6f8 0 50%, #1c2027 50% 100%);
}

.accent-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 4px 0 12px;
}

.accent-dot {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid var(--border);
  cursor: pointer;
  padding: 0;
}

.accent-dot.active {
  border-color: var(--ink);
  box-shadow: 0 0 0 2px var(--surface) inset;
}

.accent-custom {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.accent-custom input[type="color"] {
  width: 48px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: none;
  cursor: pointer;
}

.theme-hint {
  margin-top: 10px;
  font-size: 13px;
  color: var(--ink-soft);
}

/* ---------- Hinweis auf eine neue Fassung ---------- */

.update-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(16, 18, 22, .55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: update-fade .18s ease-out;
}

.update-box {
  position: relative;
  max-width: 400px;
  width: 100%;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .3);
  padding: 28px 26px 22px;
  text-align: center;
  animation: update-rise .22s cubic-bezier(.2, .8, .3, 1);
}

/* Farbiger Streifen als Akzent am oberen Rand */
.update-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 24px;
  right: 24px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--brand);
}

.update-icon {
  width: 56px;
  height: 56px;
  margin: 4px auto 14px;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  line-height: 1;
}

.update-box h2 {
  margin: 0 0 8px;
  font-size: 1.2rem;
}

.update-box p {
  margin: 0 0 18px;
  font-size: .95rem;
  line-height: 1.5;
  color: var(--ink);
}

.update-box .btn {
  width: 100%;
  padding: 11px 16px;
  font-size: 1rem;
}

.update-box .btn[disabled] {
  opacity: .7;
  cursor: default;
}

.update-hint {
  margin: 14px 0 0 !important;
  font-size: .8rem !important;
  color: var(--ink-soft) !important;
  line-height: 1.45;
}

/* Fassungsnummern: technisch, deshalb dezent und klein */
.update-versions {
  margin: 12px 0 0 !important;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: .72rem !important;
  color: var(--ink-soft) !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: -.2px;
}

.update-versions .uv-arrow {
  margin: 0 6px;
  opacity: .6;
}

.update-versions .uv-new {
  color: var(--brand);
}

@keyframes update-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes update-rise {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

/* Wer Bewegung reduziert haben möchte, bekommt sie nicht. */
@media (prefers-reduced-motion: reduce) {
  .update-overlay,
  .update-box {
    animation: none;
  }
}

/* Zwischenüberschrift innerhalb einer Karte */
.sub-title {
  margin: 18px 0 6px;
  font-size: 14px;
  color: var(--ink-soft);
  font-weight: 600;
}

.sub-title:first-of-type {
  margin-top: 12px;
}

/* ==========================================================================
   Glaseffekt: Rückfallebenen
   --------------------------------------------------------------------------
   Drei Fälle, in denen durchscheinende Flächen NICHT sinnvoll sind:
     1. Der Browser kennt backdrop-filter nicht -> es bliebe eine halb
        durchsichtige Fläche ohne Weichzeichnung, also schwer lesbar.
     2. Im System ist "Transparenz reduzieren" eingestellt.
     3. Der Bildschirm ist schmal (Handy): dort kostet die Weichzeichnung
        spürbar Leistung, und Flächen liegen ohnehin fast bildschirmfüllend.
   In allen drei Fällen greifen deckende Flächen — die Gestaltung bleibt
   ansonsten unverändert.
   ========================================================================== */

@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .topbar, .card, .chat-card, .userbar, .emoji-panel, .modal-content {
    background: var(--surface);
  }
}

@media (prefers-reduced-transparency: reduce) {
  .topbar, .card, .chat-card, .userbar, .emoji-panel, .modal-content, .update-overlay {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--surface);
  }
  .update-overlay { background: rgba(16, 18, 22, .8); }
  body::before { display: none; }
}

@media (max-width: 640px) {
  .card, .chat-card, .userbar, .emoji-panel {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--surface);
  }
}

/* Knöpfe: leichtes Anheben beim Überfahren, spürbares Drücken */
.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}

.btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
}

@media (prefers-reduced-motion: reduce) {
  .btn:hover, .btn:active { transform: none; }
}

/* Eingabefelder: ruhiger Rahmen, deutlicher Fokus */
input[type="text"], input[type="password"], input[type="search"],
input[type="email"], textarea, select {
  transition: border-color .15s ease, box-shadow .15s ease;
}

input[type="text"]:focus, input[type="password"]:focus, input[type="search"]:focus,
input[type="email"]:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent);
}

/* Angaben zur Fassung im Update-Hinweis: je Zeile eine Angabe */
.update-versions .uv-line {
  display: block;
  margin-top: 3px;
}

.update-versions .uv-label {
  opacity: .75;
}

/* ---------- Angaben zur Fassung (Einstellungen) ---------- */

.version-info {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 14px;
  margin: 6px 0 0;
  font-size: 13px;
}

.version-info dt {
  color: var(--ink-soft);
}

.version-info dd {
  margin: 0;
}

.version-info code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1px 6px;
}

/* ---------- Eigene Emojis ---------- */

/* Im Nachrichtentext: läuft in der Zeile mit und wächst bei Jumbo-Größe mit */
.custom-emoji {
  height: 1.4em;
  width: auto;
  max-width: 3em;
  vertical-align: -0.3em;
  object-fit: contain;
}

.emoji-grid-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}

.emoji-item-wrap {
  position: relative;
}

.emoji-item--img {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.emoji-item--img .custom-emoji {
  height: 26px;
  max-width: 26px;
  vertical-align: middle;
}

.emoji-delete {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 18px;
  height: 18px;
  line-height: 16px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: 13px;
  cursor: pointer;
}

.emoji-upload {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

input.emoji-upload-name {
  width: 110px;
  margin-bottom: 0;
}

.emoji-upload-file {
  flex: 1;
  min-width: 140px;
  font-size: 12px;
}

.emoji-upload-msg {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--ink-soft);
}

.emoji-custom-foot {
  margin-top: 6px;
  text-align: right;
}

.emoji-manage-toggle {
  border: none;
  background: none;
  color: var(--ink-soft);
  font-size: 12px;
  text-decoration: underline;
  cursor: pointer;
}

/* Emoji-Verwaltung in den Einstellungen */
.emoji-settings-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.emoji-settings-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.emoji-settings-row .custom-emoji {
  height: 26px;
  max-width: 26px;
}

.emoji-settings-row code {
  flex: 1;
}

.emoji-settings-form {
  display: grid;
  grid-template-columns: minmax(120px, 200px) 1fr;
  gap: 12px;
}

@media (max-width: 560px) {
  .emoji-settings-form {
    grid-template-columns: 1fr;
  }
}

.emoji-custom-foot a {
  color: var(--ink-soft);
  font-size: 12px;
}

/* Wiederherstellungsschlüssel im E2E-Overlay und in den Einstellungen */
.e2e-recovery-toggle {
  border: none;
  background: none;
  color: var(--ink-soft);
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
  margin-top: 12px;
}

.recovery-code-box {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 16px;
  letter-spacing: 1px;
  padding: 12px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  background: var(--brand-soft);
  user-select: all;
  word-break: break-all;
  margin: 10px 0;
}

/* ---------- Nachrichten bearbeiten ---------- */


.msg-edited {
  font-size: 11px;
  color: var(--ink-soft);
}

.msg-edit-box .msg-edit-input {
  width: 100%;
  min-height: 60px;
  font: inherit;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  resize: vertical;
  margin-bottom: 6px;
}

.msg-edit-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

/* ---------- Gelöschte Nachrichten ---------- */


.msg-deleted {
  font-style: italic;
  font-size: 13px;
  color: var(--ink-soft);
}

/* ---------- Kontextmenü an Nachrichten ---------- */

.msg-menu {
  position: fixed;
  z-index: 60;
  min-width: 160px;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
}

.msg-menu-item {
  border: none;
  background: none;
  font: inherit;
  font-size: 14px;
  text-align: left;
  padding: 8px 10px;
  border-radius: 6px;
  color: var(--ink);
  cursor: pointer;
}

.msg-menu-item:hover {
  background: var(--brand-soft);
}

.msg-menu-item.danger {
  color: var(--brand);
}

/* Langes Drücken soll das Menü öffnen, nicht die Textauswahl starten */
.msg {
  -webkit-touch-callout: none;
}

/* ---------- Antworten (Zitat + Composer-Leiste) ---------- */

.msg-quote {
  display: flex;
  gap: 6px;
  align-items: baseline;
  font-size: 12px;
  color: var(--ink-soft);
  border-left: 3px solid var(--brand);
  padding: 4px 8px;
  margin: 4px 0 6px;
  background: var(--brand-soft);
  border-radius: 0 6px 6px 0;
  cursor: pointer;
  overflow: hidden;
}

.msg-quote span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.msg-quote-deleted {
  font-style: italic;
}

.msg.flash {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  transition: outline-color 1s ease;
}

.reply-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  margin-bottom: 6px;
  font-size: 13px;
  color: var(--ink-soft);
  background: var(--brand-soft);
  border-radius: var(--radius-sm);
}

.reply-bar-text {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.reply-bar-close {
  border: none;
  background: none;
  cursor: pointer;
  color: var(--ink-soft);
  font-size: 14px;
  padding: 2px 4px;
}

/* ---------- Reaktionen ---------- */

.msg-reactions {
  position: absolute;
  bottom: -12px;
  left: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  z-index: 2;
}

/* Eigene Blasen liegen rechts — Reaktions-Badge dort ebenfalls rechts. */
.msg.own .msg-reactions {
  left: auto;
  right: 8px;
}

.msg-reactions:empty {
  display: none;
}

/* Etwas Luft nach unten, damit das überlappende Badge nicht in die
   nächste Nachricht ragt. */
.msg:has(.msg-reactions:not(:empty)) {
  margin-bottom: 10px;
}

.reaction-chip {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 999px;
  font-size: 12px;
  padding: 2px 9px;
  cursor: pointer;
  line-height: 1.5;
  box-shadow: 0 1px 3px rgba(30, 34, 41, .12);
  transition: transform .1s ease;
}

.reaction-chip:hover {
  transform: translateY(-1px);
}

.reaction-chip.mine {
  border-color: var(--brand);
  background: var(--brand-soft);
  color: var(--ink);
}

.msg-menu-react {
  display: flex;
  gap: 2px;
  padding: 2px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}

.msg-menu-react-btn {
  border: none;
  background: none;
  font-size: 18px;
  padding: 6px;
  border-radius: 6px;
  cursor: pointer;
}

.msg-menu-react-btn:hover {
  background: var(--brand-soft);
}

/* ---------- "tippt gerade …" ---------- */

.typing-line {
  font-size: 12px;
  color: var(--ink-soft);
  font-style: italic;
  padding: 0 4px 4px;
  min-height: 18px;
}

/* ---------- @Erwähnungen ---------- */

.mention {
  color: var(--brand);
  font-weight: 600;
}

.mention-me {
  background: var(--brand-soft);
  border-radius: 4px;
  padding: 0 3px;
}

.msg.mentioned {
  border-left: 3px solid var(--brand);
}

/* ---------- Reaktions-Popover (wer hat reagiert) ---------- */

.reaction-popover {
  position: fixed;
  z-index: 60;
  min-width: 160px;
  max-width: 240px;
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
}

.reaction-popover-head {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  padding: 2px 4px 6px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}

.reaction-popover-list {
  list-style: none;
  margin: 0 0 6px;
  padding: 0;
  max-height: 180px;
  overflow-y: auto;
}

.reaction-popover-list li {
  font-size: 13px;
  color: var(--ink);
  padding: 3px 4px;
}

.reaction-popover-toggle {
  width: 100%;
  border: none;
  background: var(--brand-soft);
  color: var(--ink);
  font-size: 12px;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
}

.reaction-popover-toggle:hover {
  background: color-mix(in srgb, var(--brand) 18%, var(--surface));
}

/* ---------- Update-Hinweis (Adminpanel) ---------- */

.update-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 18px;
  margin-bottom: 18px;
  border: 1px solid color-mix(in srgb, var(--brand) 35%, var(--border));
  border-radius: var(--radius-sm);
  background: var(--brand-soft);
}

.update-banner-text { flex: 1; min-width: 220px; }

.update-banner-current {
  color: var(--ink-soft);
  font-size: 13px;
  margin-left: 4px;
}

.update-banner-notes {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--ink-soft);
}

/* Auto-Update: Button-Reihe im Update-Hinweis */
.update-banner-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.update-banner-actions form { margin: 0; }
.update-banner .btn-secondary {
  background: transparent;
  color: var(--brand);
  border: 1px solid color-mix(in srgb, var(--brand) 45%, transparent);
}

/* Mitglieder-Auswahl beim Raum-Anlegen — klickbare Nutzerkarten */
.member-picker {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px 16px;
  margin: 16px 0;
}
.member-picker legend {
  font-weight: 600;
  padding: 0 8px;
  font-size: 15px;
}
.member-picker-hint {
  color: var(--ink-soft);
  font-size: 13px;
  margin: 0 0 12px;
}
.member-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 300px;
  overflow-y: auto;
  margin: 0 -4px;
  padding: 2px 4px;
}

/* Eine Karte je Nutzer — die ganze Zeile ist klickbar. */
.member-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color .15s, background .15s, box-shadow .15s;
  background: var(--surface);
}
.member-card:hover {
  border-color: color-mix(in srgb, var(--brand) 40%, var(--border));
  background: color-mix(in srgb, var(--brand-soft) 45%, var(--surface));
}
/* Die native Checkbox verschwindet — der Zustand wird über die Karte gezeigt. */
.member-card input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
}
.member-card-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.member-card-avatar--fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-grad);
  color: #fff;
  font-weight: 600;
  font-size: 15px;
}
.member-card-name {
  font-weight: 600;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.member-card-role {
  font-size: 12px;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 999px;
  flex-shrink: 0;
}
.member-card-role--admin {
  background: var(--brand-soft);
  color: var(--brand-dark);
}
.member-card-role--guest {
  background: color-mix(in srgb, var(--ink-soft) 14%, transparent);
  color: var(--ink-soft);
}
/* Runder Haken rechts — leer, bis ausgewählt. */
.member-card-check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--border);
  flex-shrink: 0;
  position: relative;
  transition: border-color .15s, background .15s;
}
.member-card-check::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform .15s;
}

/* Ausgewählter Zustand: Akzentrahmen + gefüllter Haken. */
.member-card:has(input:checked) {
  border-color: var(--brand);
  background: color-mix(in srgb, var(--brand-soft) 70%, var(--surface));
  box-shadow: 0 0 0 1px var(--brand) inset;
}
.member-card:has(input:checked) .member-card-check {
  border-color: var(--brand);
  background: var(--brand);
}
.member-card:has(input:checked) .member-card-check::after {
  transform: rotate(45deg) scale(1);
}
/* Tastatur-Fokus sichtbar machen. */
.member-card:focus-within {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* Fallback für sehr alte Browser ohne :has() — dort bleibt die native
   Checkbox sichtbar, damit die Auswahl auf jeden Fall bedienbar ist. */
@supports not (selector(:has(*))) {
  .member-card input {
    position: static;
    opacity: 1;
    width: auto;
    height: auto;
  }
  .member-card-check { display: none; }
}

/* ---------- Status & Profil-Popup ---------- */
.ub-item { cursor: pointer; }
.ub-item:hover { background: var(--brand-soft); }
.ub-item:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.ub-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ub-status {
  font-size: 12px;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-popup {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.profile-popup-card {
  position: relative;
  background: var(--surface, #fff);
  border-radius: var(--radius);
  padding: 24px 28px;
  min-width: 240px;
  max-width: 340px;
  box-shadow: 0 12px 40px rgba(0,0,0,.2);
}
.profile-popup-card h3 { margin: 0 0 12px; }
.profile-popup-close {
  position: absolute;
  top: 10px; right: 12px;
  border: none; background: none;
  font-size: 22px; line-height: 1;
  cursor: pointer; color: var(--ink-soft);
}
.profile-online { display: flex; align-items: center; gap: 6px; margin: 4px 0; }
.profile-status-state { margin: 4px 0 0; font-weight: 600; }
.profile-status-text { margin: 2px 0 0; color: var(--ink-soft); font-style: italic; }

/* Status-Auswahl in den Einstellungen */
.status-options { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.status-option { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.status-option input { width: auto; margin: 0; }

/* ---------- Chat-Ladezustand ----------
   Der Verlauf wird per Fetch geladen und dann ans Ende gescrollt. Bis das
   fertig ist, bleibt die Chatbox unsichtbar (behält aber ihren Platz), damit
   der Nutzer nicht erst den leeren Zustand und dann den Sprung nach unten
   sieht. Ein zentrierter Spinner überbrückt die kurze Wartezeit. */
.chatbox--loading {
  opacity: 0;
}
.chat-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.chat-loading[hidden] { display: none; }
.chat-loading-spinner {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid var(--border);
  border-top-color: var(--brand);
  animation: chat-spin .8s linear infinite;
}
@keyframes chat-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .chat-loading-spinner { animation-duration: 2s; }
}