/* ═════════════════════════════════════════════════════════════════════════
   SCHNACK-DESIGN (25.09.2026)

   Liegt über app.css und ändert nur das Aussehen. Klassen und Aufbau, die
   app.js kennt, bleiben. Zum Zurückdrehen reicht es, den <link> auf diese
   Datei aus index.html zu nehmen.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --bg: #0e0d16;
  --rail: #09080f;
  --side: #13121c;
  --panel: #181724;
  --panel-2: #211f31;
  --panel-3: #2b2840;
  --line: rgba(255, 255, 255, 0.07);
  --line-2: rgba(255, 255, 255, 0.12);
  --text: #f2f0fb;
  --muted: #9d98b8;
  --amber: #8d6bff;
  --amber-2: #c9b8ff;
  --pink: #ff7ac6;
  --online: #4ade9a;
  --away: #f5b94f;
  --busy: #f0716b;
  --offline: #6c6886;
  --danger: #f0716b;
  --grad: linear-gradient(135deg, #a48bff 0%, #7a55ff 55%, #6a45f5 100%);
  --grad-soft: linear-gradient(135deg, rgba(164, 139, 255, 0.22), rgba(106, 69, 245, 0.12));
  --glow: 0 0 0 1px rgba(141, 107, 255, 0.45), 0 8px 28px rgba(122, 85, 255, 0.28);
  --shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  --radius: 14px;
}

body {
  background:
    radial-gradient(900px 500px at -10% -20%, rgba(141, 107, 255, 0.18), transparent 60%),
    radial-gradient(700px 500px at 110% 120%, rgba(255, 122, 198, 0.08), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  font-size: 15px;
}

::selection { background: rgba(141, 107, 255, 0.4); }
* { scrollbar-color: #34304c transparent; }
::-webkit-scrollbar-thumb { background: #2e2a45; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #3d3860; background-clip: content-box; }

/* ── Grundbausteine ─────────────────────────────────────────────────────── */

input, textarea, select {
  background: #0b0a12;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: rgba(141, 107, 255, 0.7);
  box-shadow: 0 0 0 3px rgba(141, 107, 255, 0.18);
}
input[type="file"] { padding: 0.5rem; font-size: 0.85rem; color: var(--muted); }
input[type="file"]::file-selector-button {
  border: 0;
  border-radius: 8px;
  padding: 0.4rem 0.8rem;
  margin-right: 0.7rem;
  background: var(--panel-3);
  color: var(--text);
  cursor: pointer;
}

.btn { border-radius: 10px; font-weight: 600; }
.btn:not(.btn--ghost):not(.btn--danger):not(.btn--icon) {
  background: var(--grad);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 8px 22px rgba(122, 85, 255, 0.32);
}
.btn--ghost { background: rgba(255, 255, 255, 0.03); border-color: var(--line-2); }
.btn--ghost:hover { background: rgba(255, 255, 255, 0.07); }
.btn--link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: auto;
  text-decoration: none;
  color: var(--text);
  padding: 0.55rem 0.9rem;
}
.btn--link .ico { width: 1rem; height: 1rem; }
.btn--link[disabled] { opacity: 0.55; cursor: default; }
.hint { color: var(--muted); }
.error { color: var(--danger); }

.avatar {
  background: var(--panel-3);
  color: #fff;
  font-weight: 700;
  box-shadow: none;
}
.avatar--default {
  object-fit: contain;
  object-position: center;
  background: #5b3fd4;
}
.avatar--letter {
  background: linear-gradient(135deg, hsl(var(--hue) 72% 64%), hsl(calc(var(--hue) + 38) 66% 46%));
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

/* ── Anmeldung ──────────────────────────────────────────────────────────── */

/* Spacer oben/unten: Karte zentrieren, ohne den Kopf beim Scrollen abzuschneiden */
.gate {
  justify-content: flex-start;
  min-height: 100%;
  height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: max(1.25rem, env(safe-area-inset-top, 0px)) 1.25rem max(2.5rem, env(safe-area-inset-bottom, 0px));
}
.gate::before,
.gate::after {
  content: "";
  flex: 1 0 0.75rem;
  width: 100%;
  pointer-events: none;
}
.gate > .card {
  position: relative;
  flex: 0 0 auto;
  width: min(420px, 100%);
  margin: 0;
  padding: 2rem 1.75rem 1.5rem;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(33, 31, 49, 0.92), rgba(19, 18, 28, 0.94));
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(12px);
}
.card {
  position: relative;
  width: min(420px, 100%);
  padding: 2rem 1.75rem 1.5rem;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(33, 31, 49, 0.92), rgba(19, 18, 28, 0.94));
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(12px);
}
.card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(160deg, rgba(164, 139, 255, 0.6), transparent 40%, transparent 70%, rgba(255, 122, 198, 0.35));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.card .brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1.8rem;
  letter-spacing: 0.02em;
}
.card .brand::before {
  content: "";
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 14px;
  background: url("icon-192.png") center / cover;
  box-shadow: 0 8px 22px rgba(122, 85, 255, 0.4);
}
.card .claim { margin-top: 0.4rem; }

/* ── Raster ─────────────────────────────────────────────────────────────── */

.rail { background: var(--rail); box-shadow: none; background-image: none; }
.rail__servers { gap: 0.55rem; padding: 0.8rem 0; }
.rail .server {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: var(--panel-2);
  font-family: var(--display);
  box-shadow: none;
}
.rail .server:hover { background: var(--panel-3); border-radius: 14px; transform: none; }
.rail .server.active {
  background: var(--grad);
  color: #fff;
  border-radius: 14px;
  box-shadow: var(--glow);
}
.rail .server.active::before { left: -12px; top: 10px; height: 28px; width: 5px; }
.rail .server-add {
  background: transparent;
  border: 1.5px dashed rgba(74, 222, 154, 0.5);
  color: var(--online);
}
.rail .server-add:hover { background: rgba(74, 222, 154, 0.1); border-style: solid; }
.rail-gap { width: 28px; background: var(--line-2); }

.side, .members {
  background: var(--side);
  background-image: none;
  border-color: var(--line);
  box-shadow: none;
}
.side__head, .members__head {
  min-height: 56px;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--line);
}
.side__head strong, .members__head strong {
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 700;
}
.side__head.has-banner { min-height: 110px; }

.channels { padding: 0.5rem 0.5rem 5.5rem; }
.channels h2, .members h2, .cat {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  color: var(--muted);
  opacity: 1;
}
.cat { padding: 1rem 0.5rem 0.3rem; }
.cat:hover { color: var(--text); }
.channel {
  align-items: center;
  margin: 1px 0;
  padding: 0.42rem 0.6rem;
  border-radius: 8px;
  color: var(--muted);
  font-weight: 500;
}
.channel:hover { background: rgba(255, 255, 255, 0.05); color: var(--text); }
.channel.active {
  background: var(--grad-soft);
  color: #fff;
  box-shadow: inset 3px 0 0 var(--amber);
}
.dot-unread { background: var(--pink); box-shadow: 0 0 10px var(--pink); }
.side-actions { border-top-color: var(--line); gap: 0.3rem; }
.side-actions .icon-btn { border-color: transparent; background: rgba(255, 255, 255, 0.04); border-radius: 10px; }
.side-actions .icon-btn:hover { background: rgba(255, 255, 255, 0.09); }

.dm-row { border-radius: 10px; }
.dm-row.active, .dm-row:hover { background: rgba(255, 255, 255, 0.06); }
.inbox input { background-color: #0b0a12; border-radius: 10px; }
.table-ask {
  margin: 0.2rem 0.2rem 0.5rem;
  padding: 0.75rem 0.8rem;
  background: var(--grad-soft);
  border: 1px solid rgba(141, 107, 255, 0.25);
  border-radius: var(--radius);
}

/* Servername: Klick öffnet das Menü. */
.side__head { position: relative; padding: 0; }
.side__head > strong { padding: 0 1rem; }
.server-name {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  min-height: 56px;
  padding: 0.75rem 1rem;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
}
.server-name strong { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.server-name .ico { width: 1rem; height: 1rem; color: var(--muted); transition: transform 150ms ease; }
.server-name[aria-expanded="true"] .ico { transform: rotate(180deg); }
.server-name:hover { background: rgba(255, 255, 255, 0.04); }
.side__head.has-banner .server-name { min-height: 110px; align-items: flex-end; text-shadow: 0 1px 8px #000; }
.menu-pop {
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  left: 0.5rem;
  right: 0.5rem;
  padding: 0.35rem;
  background: #0c0b13;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
}
.menu-pop[hidden] { display: none; }
.menu-pop button {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.55rem 0.65rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font-size: 0.9rem;
  text-align: left;
}
.menu-pop button .ico { width: 1rem; height: 1rem; color: var(--muted); }
.menu-pop button:hover { background: var(--amber); color: #fff; }
.menu-pop button:hover .ico { color: #fff; }
.menu-gap { display: block; height: 1px; margin: 0.3rem 0.4rem; background: var(--line-2); }

/* Kontextmenü Rechtsklick auf Nachricht */
.msg-ctx {
  position: fixed;
  z-index: 90;
  top: 0;
  left: 0;
  right: auto;
  min-width: 232px;
  max-width: min(300px, calc(100vw - 16px));
  max-height: min(72vh, 560px);
  overflow-y: auto;
  padding: 0.4rem;
  background: #111018;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.65);
}
.msg-ctx__reacts {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.2rem;
  padding: 0.2rem 0.25rem 0.45rem;
}
.msg-ctx__emoji {
  flex: 1;
  width: auto !important;
  min-width: 0;
  height: 2.15rem;
  padding: 0 !important;
  display: grid !important;
  place-items: center;
  font-size: 1.2rem;
  line-height: 1;
  border-radius: 8px;
  background: transparent;
  border: 0;
  color: var(--text);
  cursor: pointer;
}
.msg-ctx__emoji:hover { background: rgba(255, 255, 255, 0.08); }
.msg-ctx button.danger { color: #f87171; }
.msg-ctx button.danger .ico { color: #f87171; }
.msg-ctx button.danger:hover { background: #b91c1c; color: #fff; }
.msg-ctx button.danger:hover .ico { color: #fff; }


/* Kanäle: Symbol vorne, Zahnrad beim Drüberfahren. */
.channel .ch-ico { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.channel .ch-ico .ico { width: 1.05rem; height: 1.05rem; flex: none; opacity: 0.75; }
.ch-edit {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 22px;
  margin-left: auto;
  border-radius: 6px;
  color: var(--muted);
  opacity: 0;
}
.ch-edit .ico { width: 0.95rem; height: 0.95rem; }
.channel:hover .ch-edit, .channel.active .ch-edit, .ch-edit:focus { opacity: 1; }
.ch-edit:hover { color: #fff; background: rgba(255, 255, 255, 0.1); }
@media (hover: none) { .ch-edit { opacity: 0.7; } }

.channel-admin .line { padding: 0.35rem 0.4rem; border-radius: 10px; background: rgba(255, 255, 255, 0.03); }
.channel-admin .line small { color: var(--muted); font-size: 0.75rem; }
.channel-admin .icon-btn { border: 0; background: transparent; color: var(--muted); }
.channel-admin .icon-btn:hover { background: rgba(255, 255, 255, 0.08); color: var(--text); }

/* Profilkarte */
dialog.profile-card {
  width: min(360px, calc(100% - 1.5rem));
  padding: 0;
  overflow: auto;
  border-radius: 20px;
  background: #15141f;
}
.profile-card #cardBody { position: relative; display: block; margin: 0; }
#cardBody .pc-avatar .avatar { width: 92px; height: 92px; margin-top: 0; }
.pc-banner {
  height: 130px;
  background: linear-gradient(135deg, hsl(var(--hue) 62% 48%), hsl(calc(var(--hue) + 55) 58% 30%));
  background-size: cover;
  background-position: center;
}
.pc-close {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  backdrop-filter: blur(6px);
}
.pc-close:hover { background: rgba(0, 0, 0, 0.75); }
.pc-close .ico { width: 1rem; height: 1rem; }
.pc-top { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0 1rem; margin-top: -48px; }
.pc-avatar { position: relative; flex: none; }
.pc-avatar .avatar {
  width: 92px;
  height: 92px;
  font-size: 2rem;
  border: 6px solid #15141f;
  box-shadow: 0 0 0 2px rgba(141, 107, 255, 0.7);
}
.pc-avatar .presence {
  position: absolute;
  right: 4px;
  bottom: 6px;
  width: 22px;
  height: 22px;
  border: 5px solid #15141f;
  box-shadow: none;
}
.pc-bubble {
  position: relative;
  margin-top: 56px;
  padding: 0.5rem 0.75rem;
  border-radius: 14px;
  background: var(--panel-3);
  color: var(--text);
  font-size: 0.82rem;
  font-style: italic;
  line-height: 1.35;
  overflow-wrap: anywhere;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}
.pc-bubble::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 10px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--panel-3);
}
.pc-body { padding: 0.6rem 1rem 1rem; }
.pc-body h3 { margin: 0; font-size: 1.35rem; line-height: 1.2; }
.pc-handle { margin: 0.15rem 0 0.7rem; color: var(--muted); font-size: 0.86rem; }
.pc-handle b { margin: 0 0.2rem; font-weight: 400; }
.pc-section {
  margin: 0 0 0.6rem;
  padding: 0.7rem 0.8rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
}
.pc-section h4 { margin: 0 0 0.4rem; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.pc-section p { margin: 0; font-size: 0.88rem; }
.pc-bio { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.9rem; line-height: 1.45; }
.pc-roles { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.pc-role {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.55rem 0.2rem 0.4rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line-2);
  font-size: 0.8rem;
}
.pc-role i { width: 10px; height: 10px; border-radius: 50%; }
.pc-note summary { cursor: pointer; color: var(--muted); font-size: 0.82rem; }
.pc-note textarea { margin: 0.5rem 0; }
.pc-note .btn { width: auto; padding: 0.4rem 0.8rem; font-size: 0.82rem; }
.pc-main { display: flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; margin-top: 0.3rem; padding: 0.75rem; }
.pc-main .ico { width: 1rem; height: 1rem; }
.msg__meta .avatar, .msg__name { cursor: pointer; }
.msg__name:hover { text-decoration: underline; }
.me-id { cursor: pointer; }

/* Lange Dialoge: Kopf mit X bleibt oben stehen. */
dialog.dialog--scroll { width: min(560px, calc(100% - 1.5rem)); max-height: calc(100vh - 2rem); padding-top: 0; }
.dialog-head {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 -1.3rem 0.6rem;
  padding: 1rem 1.3rem 0.8rem;
  background: rgba(30, 28, 45, 0.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.dialog-head h3 { margin: 0; }
.dialog-head .btn--icon { flex: none; }
dialog .settings-block { background: rgba(255, 255, 255, 0.03); }
.color-row { gap: 0.6rem 1rem; }
.color-row label { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--text); font-size: 0.82rem; }
input[type="color"] {
  flex: none;
  width: 40px;
  height: 32px;
  padding: 3px;
  border-radius: 8px;
  cursor: pointer;
}
input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 5px; }
.inline-form { display: flex; align-items: center; gap: 0.5rem; margin: 0.4rem 0 0.2rem; }
.inline-form input:not([type="color"]) { flex: 1; min-width: 0; }
.inline-form .btn { flex: none; width: auto; padding: 0.6rem 0.9rem; }
.settings-block .saved-list { margin: 0.5rem 0 0; }
#extraError:empty { display: none; }
#roleList [data-drop-role], #emojiList [data-drop-emoji] {
  width: auto;
  margin-left: 0.4rem;
  padding: 0.15rem 0.55rem;
  border: 1px solid rgba(240, 113, 107, 0.5);
  border-radius: 7px;
  background: rgba(240, 113, 107, 0.1);
  color: #ff8a84;
  font-size: 0.78rem;
}
#roleList [data-drop-role]:hover, #emojiList [data-drop-emoji]:hover { background: var(--danger); border-color: var(--danger); color: #fff; }

.dialog-actions { display: flex; align-items: center; gap: 0.5rem; margin-top: 1rem; }
.dialog-actions .spacer { flex: 1; }
.dialog-actions .btn { width: auto; }
.btn--danger { display: inline-flex; align-items: center; gap: 0.4rem; }
.btn--danger .ico { width: 1rem; height: 1rem; }
.btn--danger:hover { background: rgba(240, 113, 107, 0.12); }
[data-text-only][hidden] { display: none; }

/* Ungelesen und Erwähnungen */
.badge {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #f23f43;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
}
.rail .server { overflow: visible; }
.rail .server img { border-radius: inherit; }
.rail .server .badge {
  position: absolute;
  right: -4px;
  bottom: -4px;
  border: 3px solid var(--rail);
  height: 22px;
  min-width: 22px;
}
.rail .server.has-unread:not(.active)::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 19px;
  width: 5px;
  height: 10px;
  border-radius: 0 4px 4px 0;
  background: #fff;
}
.channel.is-unread { color: #fff; font-weight: 700; }
.channel.is-unread::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 50%;
  width: 4px;
  height: 8px;
  margin-top: -4px;
  border-radius: 0 4px 4px 0;
  background: #fff;
}
.channel { position: relative; }
.channel .badge { margin-left: auto; flex: none; }
.channel .badge + .ch-edit { margin-left: 0.25rem; }

/* Sprachkanal: wer drin ist, mit Bild */
.voice-count {
  margin-left: auto;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: rgba(74, 222, 154, 0.15);
  color: var(--online);
  font-size: 0.72rem;
  font-weight: 700;
}
.voice-count + .ch-edit { margin-left: 0.25rem; }
.voice-who {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 1px 0 1px 1.4rem;
  padding: 0.25rem 0.5rem;
  border-radius: 8px;
  color: var(--muted);
  font-size: 0.85rem;
}
.voice-who:hover { background: rgba(255, 255, 255, 0.04); color: var(--text); }
.voice-who .avatar { width: 24px; height: 24px; font-size: 0.7rem; transition: box-shadow 120ms ease; }
.voice-who.talking .avatar { box-shadow: 0 0 0 2px var(--online); }
.voice-who.talking { color: var(--text); }
.voice-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.voice-flags { display: inline-flex; align-items: center; gap: 0.2rem; color: var(--danger); }
.voice-flags .ico { width: 0.9rem; height: 0.9rem; }
.voice-flags .live { padding: 0 0.3rem; border-radius: 4px; background: #f23f43; color: #fff; font-size: 0.6rem; letter-spacing: 0.04em; }

/* Mitglieder: Rollen-Gruppen, Offline blass */
.members h2 { margin-top: 1.1rem; }
.member.is-offline { opacity: 0.45; }
.member.is-offline:hover { opacity: 0.85; }
.member__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.role-pick { border-color: color-mix(in srgb, var(--role) 60%, transparent); }
.role-pick.is-on { background: var(--role); color: #fff; border-color: transparent; }

/* Server-Einstellungen: Rollen */
.role-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.4rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
}
.role-row input[type="color"] { width: 32px; height: 28px; }
.role-row__name { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.role-row__hoist { display: inline-flex; align-items: center; gap: 0.35rem; margin: 0; color: var(--muted); font-size: 0.78rem; cursor: pointer; }
.role-row__hoist .switch { transform: scale(0.8); }
.role-row .icon-btn { min-width: 28px; min-height: 28px; padding: 0.2rem; border: 0; background: transparent; color: var(--muted); }
.role-row .icon-btn:hover { background: rgba(255, 255, 255, 0.08); color: var(--text); }

/* Links oben in der Kanalliste */
.server-links { display: flex; flex-direction: column; gap: 1px; padding: 0.35rem 0 0.5rem; margin-bottom: 0.2rem; border-bottom: 1px solid var(--line); }
.server-link {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.42rem 0.6rem;
  border-radius: 8px;
  color: var(--muted);
  font-weight: 500;
  text-decoration: none;
}
.server-link:hover { background: rgba(255, 255, 255, 0.05); color: var(--text); }
.server-link__icon { display: inline-grid; place-items: center; width: 1.1rem; font-size: 1rem; }
.server-link__icon .ico { width: 1rem; height: 1rem; }
.server-link__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link-rows { display: flex; flex-direction: column; gap: 0.4rem; margin: 0.3rem 0 0.6rem; }
.link-row { display: grid; grid-template-columns: 38px minmax(0, 0.8fr) minmax(0, 1.2fr) 32px; gap: 0.4rem; align-items: center; }
.link-row input { padding: 0.5rem 0.6rem; }
.link-row .icon-btn { border: 0; background: transparent; color: var(--muted); padding: 0.3rem; }
.link-row .icon-btn:hover { color: var(--danger); background: rgba(240, 113, 107, 0.1); }

/* Emoji-Auswahl */
.emoji-btn {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: #0b0a12;
  color: var(--muted);
  font-size: 1.1rem;
}
.emoji-btn:hover { color: var(--text); border-color: rgba(141, 107, 255, 0.6); }
.emoji-btn .ico { width: 1.1rem; height: 1.1rem; }
.input-emoji { display: flex; gap: 0.4rem; align-items: center; }
.input-emoji input { flex: 1; min-width: 0; }
.emoji-picker {
  position: fixed;
  z-index: 100;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #0f0e18;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
}
.ep-head { display: flex; gap: 0.45rem; align-items: center; padding: 0.6rem 0.6rem 0.5rem; border-bottom: 1px solid var(--line); }
.ep-head[hidden], .ep-body[hidden], .ep-foot[hidden], .ep-stickers[hidden] { display: none; }
.ep-add { flex-shrink: 0; min-height: 34px; padding: 0.35rem 0.7rem; font-size: 0.8rem; white-space: nowrap; }
.ep-tabs { display: flex; gap: 0.3rem; padding: 0.55rem 0.6rem 0; }
.ep-tabs button {
  padding: 0.35rem 0.8rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
}
.ep-tabs button:hover { color: var(--text); background: rgba(255, 255, 255, 0.05); }
.ep-tabs button.is-on { background: rgba(141, 107, 255, 0.22); color: #fff; }
.ep-stickers { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.ep-stickers__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.85rem;
}
.sticker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 6px;
  padding: 0.6rem;
  overflow-y: auto;
}
.sticker-grid button {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  padding: 6px;
  border: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
}
.sticker-grid button:hover { background: rgba(141, 107, 255, 0.22); }
.sticker-grid img { max-width: 100%; max-height: 100%; object-fit: contain; }
.msg__sticker {
  display: block;
  width: auto;
  max-width: 160px;
  max-height: 160px;
  margin-top: 0.3rem;
  object-fit: contain;
}
.sticker-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 0.5rem; margin-top: 0.6rem; }
.sticker-tile {
  position: relative;
  margin: 0;
  padding: 0.45rem;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: var(--panel-2);
  text-align: center;
}
.sticker-tile img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.sticker-tile figcaption { overflow: hidden; margin-top: 0.25rem; color: var(--muted); font-size: 0.74rem; white-space: nowrap; text-overflow: ellipsis; }
.sticker-tile button {
  position: absolute;
  top: 4px;
  right: 4px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
}
.sticker-tile button:hover { background: var(--danger); }
.sticker-tile button .ico { width: 0.8rem; height: 0.8rem; }
.ep-search {
  width: 100%;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--line-2);
  border-radius: 9px;
  background: #07060d;
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
}
.ep-search:focus { outline: none; border-color: rgba(141, 107, 255, 0.8); box-shadow: 0 0 0 3px rgba(141, 107, 255, 0.18); }
.ep-body { display: flex; flex: 1; min-height: 0; }
.ep-side {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0.4rem 0.3rem;
  overflow-y: auto;
  scrollbar-width: none;
  background: #0a0912;
  border-right: 1px solid var(--line);
}
.ep-side button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font-size: 1.15rem;
  line-height: 1;
}
.ep-side button:hover { background: rgba(141, 107, 255, 0.2); color: var(--text); }
.ep-side .ico { width: 1.1rem; height: 1.1rem; }
.ep-side__server img, .ep-side__server b {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  object-fit: cover;
  background: var(--grad);
  color: #fff;
  font-size: 0.75rem;
}
.ep-scroll { position: relative; flex: 1; overflow-y: auto; padding: 0 0.5rem 0.5rem; }
.ep-scroll section { padding-top: 0.2rem; }
.ep-scroll h5 {
  position: sticky;
  top: 0;
  z-index: 1;
  margin: 0;
  padding: 0.45rem 0.2rem 0.3rem;
  background: #0f0e18;
  color: var(--muted);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ep-none { margin: 1.5rem 0.5rem; color: var(--muted); text-align: center; }
.ep-foot {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 46px;
  padding: 0.4rem 0.8rem;
  background: #0a0912;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.82rem;
}
.ep-big { font-size: 1.7rem; line-height: 1; }
.ep-big:empty { display: none; }
.ep-big .emoji { height: 1.8rem; }
.ep-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.emoji-picker h5 { color: var(--muted); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; }
.emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; }
.emoji-grid button {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-size: 1.35rem;
  line-height: 1;
  color: var(--text);
}
.emoji-grid button:hover { background: rgba(141, 107, 255, 0.22); }
.emoji-grid .emoji { height: 1.5rem; }
.emoji-picker__tip { margin: 0.4rem 0.2rem 0; color: var(--muted); font-size: 0.72rem; }

/* Bild reinziehen */
.layout.is-dropping .chat { outline: 2px dashed rgba(141, 107, 255, 0.8); outline-offset: -10px; background: rgba(141, 107, 255, 0.06); }

/* Server entdecken */
.rail .server-discover {
  display: grid;
  place-items: center;
  background: transparent;
  border: 1.5px solid rgba(141, 107, 255, 0.45);
  color: var(--amber-2);
}
.rail .server-discover .ico { width: 1.35rem; height: 1.35rem; }
.rail .server-discover:hover { background: var(--grad); border-color: transparent; color: #fff; }
dialog.dialog--wide { width: min(920px, calc(100% - 1.5rem)); padding: 1.4rem 1.5rem 1.5rem; }
.discover-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.discover-head h3 { font-size: 1.35rem; margin-bottom: 0.2rem; }
.discover-head .hint { margin: 0; font-size: 0.88rem; }
.discover-search {
  margin: 1rem 0;
  padding: 0.75rem 1rem 0.75rem 2.6rem;
  border-radius: 12px;
  font-size: 0.95rem;
  background: #0b0a12 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%239d98b8' stroke-width='2' stroke-linecap='round' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 0.9rem center / 1.1rem;
}
.discover-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 0.9rem;
  min-height: 180px;
}
.discover-empty { grid-column: 1 / -1; text-align: center; padding: 2.5rem 1rem; }
.discover-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 16px;
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}
.discover-card:hover { transform: translateY(-2px); border-color: rgba(141, 107, 255, 0.45); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.4); }
.discover-card__banner {
  height: 96px;
  background: linear-gradient(135deg, hsl(var(--hue) 60% 42%), hsl(calc(var(--hue) + 50) 55% 28%));
  background-size: cover;
  background-position: center;
}
.discover-card__icon {
  position: absolute;
  top: 60px;
  left: 1rem;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  overflow: hidden;
  border: 4px solid var(--panel-2);
  background: var(--panel-2);
}
.discover-card__icon img, .discover-card__icon .avatar { width: 100%; height: 100%; border-radius: 12px; object-fit: cover; font-size: 1.3rem; }
.discover-card__body { flex: 1; padding: 2.1rem 1rem 0.6rem; }
.discover-card__body strong { display: block; font-family: var(--display); font-size: 1.02rem; }
.discover-card__body p {
  margin: 0.3rem 0 0.6rem;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.discover-card__meta { display: flex; gap: 0.9rem; color: var(--muted); font-size: 0.78rem; }
.discover-card__meta span { display: inline-flex; align-items: center; gap: 0.35rem; }
.discover-card__meta .presence { width: 8px; height: 8px; box-shadow: none; }
.discover-card .btn { margin: 0 1rem 1rem; width: auto; }

.welcome-box {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0.3rem 0.2rem 0.8rem;
  padding: 1rem;
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(164, 139, 255, 0.28), rgba(255, 122, 198, 0.14));
  border: 1px solid rgba(164, 139, 255, 0.35);
}
.welcome-box p { margin: 0 0 0.3rem; color: var(--muted); font-size: 0.86rem; }
.welcome-box .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; width: 100%; padding: 0.6rem 0.5rem; font-size: 0.86rem; white-space: nowrap; }
.welcome-box .ico { width: 1rem; height: 1rem; }
.settings-block--public { margin: 1rem 0 0.5rem; padding-top: 0.2rem; }
.settings-block--public .switch-row { border-top: 0; }
.settings-block--public textarea { min-height: 64px; }

.gate-switch { margin: 1.1rem 0 0; text-align: center; color: var(--muted); font-size: 0.9rem; }
.link-btn { border: 0; background: none; padding: 0; color: var(--amber-2); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.link-btn:hover { color: #fff; }
.trap { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; }

/* ── Kopfzeile ──────────────────────────────────────────────────────────── */

.topbar {
  min-height: 56px;
  padding: 0.55rem 1rem;
  gap: 0.35rem;
  background: rgba(14, 13, 22, 0.78);
  background-image: none;
  box-shadow: none;
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.topbar__heading {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  overflow: hidden;
}
.topbar__title { min-width: 0; overflow: hidden; }
.topbar__title strong {
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 700;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.topbar__title .dm-peer {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}
.topbar__title .dm-peer > span {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.topic {
  font-size: 0.78rem;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
  min-width: 0;
}
.topic:empty { display: none; }
.searchbox {
  flex: 0 1 240px;
  margin-left: auto;
  border-radius: 999px;
  background-color: #0b0a12;
  padding: 0.42rem 0.8rem 0.42rem 2.1rem;
  font-size: 0.88rem;
}
.topbar .menu-btn {
  border: 0;
  border-radius: 10px;
  color: var(--muted);
  background: transparent;
}
.topbar .menu-btn[hidden] { display: none !important; }
.topbar .menu-btn:hover { background: rgba(255, 255, 255, 0.07); color: var(--text); }
.topbar .menu-btn.is-off { color: var(--danger); }
.topbar .who {
  margin-left: 0.25rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  font-size: 0.88rem;
  cursor: pointer;
}
.topbar .who:hover { background: rgba(255, 255, 255, 0.09); }

/* ── Verlauf ────────────────────────────────────────────────────────────── */

.chat { padding: 1rem 0 0.75rem; gap: 0; }
.chat > * { flex-shrink: 0; }
.day { margin: 1.1rem 1rem 0.5rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; }
.unread-line { margin: 0.5rem 1rem; color: var(--pink); font-weight: 600; }

.msg {
  margin-top: 0.7rem;
  padding: 0.3rem 1.25rem 0.3rem calc(40px + 2rem);
  border: 0;
  border-radius: 0;
  min-height: 48px;
}
.msg:hover { background: rgba(255, 255, 255, 0.025); }
.msg--grouped { margin-top: 0; min-height: 0; padding-top: 0.12rem; padding-bottom: 0.12rem; }
.msg--own { background: transparent; box-shadow: none; padding-left: calc(40px + 2rem); padding-right: 1.25rem; }
.msg--own:hover { background: rgba(255, 255, 255, 0.025); }
.msg--mention {
  background: linear-gradient(90deg, rgba(245, 185, 79, 0.1), rgba(245, 185, 79, 0.03));
  box-shadow: inset 2px 0 0 var(--away);
}
.msg--pinned { box-shadow: inset 2px 0 0 var(--online); }
.msg--join {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 0;
  margin-top: 0.35rem;
  padding: 0.35rem 1.25rem 0.35rem calc(40px + 2rem);
  color: var(--muted);
  font-size: 0.92rem;
}
.msg--join .join-arrow {
  position: absolute;
  left: calc(1rem + 10px);
  display: grid;
  place-items: center;
  color: var(--online);
}
.msg--join .join-arrow .ico { width: 1.15rem; height: 1.15rem; }
.msg--join .msg__name { color: var(--text); font-weight: 650; cursor: pointer; }
.msg--join .msg__time { font-size: 0.72rem; }
@media (max-width: 979px) {
  .msg--join { padding-left: calc(36px + 1.6rem); }
  .msg--join .join-arrow { left: calc(0.8rem + 8px); }
}

.msg--grouped .msg__text,
.msg--grouped .msg__reply,
.msg--grouped .msg__reacts,
.msg--grouped .msg__actions,
.msg--grouped .thread-chip,
.msg--grouped .msg__img { margin-left: 0; }

.msg__meta { gap: 0.5rem; align-items: baseline; }
.msg__meta .avatar {
  position: absolute;
  left: 1rem;
  top: 0.45rem;
  width: 40px;
  height: 40px;
  font-size: 0.95rem;
}
.msg:has(> .msg__reply) .msg__meta .avatar { top: 1.75rem; }
.msg__name { font-weight: 650; font-size: 0.95rem; }
.msg__time, .msg__edited { font-size: 0.72rem; }
.msg__text { line-height: 1.5; color: #e6e3f3; }
.msg__gtime { left: 1rem; width: 40px; top: 0.3rem; font-size: 0.66rem; }
.msg--own .msg__gtime { left: 1rem; }

.msg__reply {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0 0 0.2rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 0.8rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.msg__reply::before {
  content: "";
  flex: none;
  width: 26px;
  height: 10px;
  margin-left: -34px;
  margin-top: 8px;
  border: 2px solid #3a3656;
  border-right: 0;
  border-bottom: 0;
  border-radius: 8px 0 0 0;
}
.msg__reply:hover { color: var(--text); }

.mention { background: rgba(141, 107, 255, 0.2); color: var(--amber-2); font-weight: 600; border-radius: 5px; }
.mention--me { background: rgba(245, 185, 79, 0.22); color: #ffd98a; }
blockquote { border-left: 3px solid #3a3656; border-radius: 2px; padding-left: 0.65rem; }
code, pre.code { background: #0b0a12; border: 1px solid var(--line); }
.msg__img { border-radius: 12px; border: 1px solid var(--line); }
.thread-chip { background: var(--panel-2); border-color: var(--line-2); border-radius: 999px; }

.msg__reacts { gap: 0.3rem; margin-top: 0.3rem; }
.react {
  background: var(--panel-2);
  border: 1px solid var(--line-2);
  border-radius: 8px;
  padding: 0.1rem 0.45rem;
  font-size: 0.82rem;
}
.react:hover { border-color: rgba(141, 107, 255, 0.5); }
.react.mine { background: rgba(141, 107, 255, 0.2); border-color: rgba(141, 107, 255, 0.7); color: #fff; }

.events { background: transparent; margin: 0 1rem 0.3rem; display: grid; gap: 0.55rem; }
.event, .pins { border-radius: var(--radius); background: var(--panel); border-color: var(--line-2); }
.event {
  display: grid;
  gap: 0.35rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line-2);
}
.event__title { display: flex; align-items: center; gap: 0.45rem; font-size: 1.05rem; }
.event__title b { font-weight: 700; }
.event__emoji { font-size: 1.25rem; line-height: 1; }
.event__when { color: var(--muted); font-size: 0.95rem; }
.event__place, .event__desc, .event__names, .event__meta { color: var(--muted); font-size: 0.88rem; }
.event__stats { font-weight: 600; font-size: 0.92rem; letter-spacing: 0.01em; }
.event__actions { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.2rem; }
.event__actions button {
  min-height: 34px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: var(--panel-2);
  color: var(--text);
  padding: 0.25rem 0.7rem;
  font-size: 0.88rem;
}
.event__actions button.mine,
.tisch-dabei__btns .btn.mine { outline: 2px solid var(--accent, #7a55ff); background: rgba(122, 85, 255, 0.18); }
.event__del { opacity: 0.75; }
.events--home { margin: 0; }
.event--compact { padding: 0.7rem 0.85rem; }
.tisch-dabei.event { border: 0; padding: 0; background: transparent; }
@media (max-width: 640px) {
  .event__actions button { flex: 1 1 auto; justify-content: center; }
}
.pins { margin: 0 1rem 0.4rem; backdrop-filter: blur(10px); background: rgba(24, 23, 36, 0.9); }
.jump-latest { background: var(--grad); color: #fff; border: 0; box-shadow: 0 8px 20px rgba(122, 85, 255, 0.35); }

/* Hover-Leiste: schwebt oben rechts, nimmt keinen Platz weg. */
@media (min-width: 980px) {
  .msg__actions {
    position: absolute;
    top: -16px;
    right: 1rem;
    z-index: 3;
    gap: 0;
    margin: 0;
    padding: 2px;
    background: var(--panel-2);
    border: 1px solid var(--line-2);
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
    pointer-events: none;
  }
  .msg:hover .msg__actions, .msg:focus-within .msg__actions, .msg.menu .msg__actions { pointer-events: auto; }
  .msg__actions button {
    min-width: 32px;
    min-height: 30px;
    border-radius: 8px;
    color: var(--muted);
  }
  .msg__actions button:hover { background: rgba(255, 255, 255, 0.08); color: var(--text); }
  .msg__actions .ico { width: 1.05rem; height: 1.05rem; }

  .react--add { opacity: 0; }
  .msg:hover .react--add, .msg:focus-within .react--add { opacity: 1; }
}
.msg__reacts:empty { display: none; }
.react { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 28px; }
.react .emoji { height: 1.15rem; width: auto; }
.react span { font-weight: 600; color: var(--muted); }
.react.mine span { color: #fff; }
.react--add { color: var(--muted); }
.react--add .ico { width: 1rem; height: 1rem; }

/* ── Eingabe ────────────────────────────────────────────────────────────── */

.composer-wrap {
  min-width: 0; /* Grid-Zelle darf schmaler als Content-Min werden */
  padding: 0.35rem 1.25rem calc(1rem + env(safe-area-inset-bottom));
  background: transparent;
  background-image: none;
  border-top: 0;
  box-shadow: none;
}
.composer-wrap { position: relative; }
/* Schwebt über der markierten Stelle, Position setzt paintFormatBar(). */
.formatbar {
  position: absolute;
  z-index: 20;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 1px;
  margin: 0;
  padding: 3px;
  background: #1d1b2b;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
}
.formatbar[hidden] { display: none; }
.formatbar button {
  display: grid;
  place-items: center;
  min-width: 32px;
  min-height: 30px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
}
.formatbar button:hover { background: rgba(141, 107, 255, 0.22); color: #fff; }
.formatbar .ico { width: 1rem; height: 1rem; }
.formatbar__gap { width: 1px; height: 18px; margin: 0 3px; background: var(--line-2); }
.composer {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  gap: 0.25rem;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  padding: 0.35rem 0.4rem;
  background: var(--panel-2);
  border: 1px solid var(--line-2);
  border-radius: 14px;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
/* Rechts-Controls (Emoji/Senden/…) nie abschneiden — Eingabe schrumpft */
.composer-end {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  flex-shrink: 0;
  gap: 0.15rem;
}
.composer:focus-within { border-color: rgba(141, 107, 255, 0.55); box-shadow: 0 10px 30px rgba(122, 85, 255, 0.16); }
.composer-btn {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
}
.composer-btn:hover, .composer-btn[aria-expanded="true"] { background: rgba(255, 255, 255, 0.07); color: var(--text); }
.composer-btn .ico { width: 1.25rem; height: 1.25rem; }
#openPlus .ico { transition: transform 150ms ease; }
#openPlus[aria-expanded="true"] .ico { transform: rotate(45deg); }
.composer-btn[hidden] { display: none; }
.plus-wrap { position: relative; flex-shrink: 0; }
.plus-menu {
  position: absolute;
  bottom: calc(100% + 10px);
  left: -0.4rem;
  z-index: 30;
  display: grid;
  gap: 2px;
  min-width: 220px;
  padding: 6px;
  background: #1a1827;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
}
.plus-menu[hidden], .plus-menu button[hidden] { display: none; }
.plus-menu button {
  display: grid;
  grid-template-columns: 22px 1fr;
  align-items: center;
  column-gap: 0.65rem;
  padding: 0.55rem 0.65rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
  text-align: left;
}
.plus-menu button:hover, .plus-menu button:focus-visible { background: rgba(141, 107, 255, 0.22); outline: none; }
.plus-menu .ico { width: 1.15rem; height: 1.15rem; color: var(--muted); }
.plus-menu small { grid-column: 2; color: var(--muted); font-size: 0.74rem; }
.char-count { flex-shrink: 0; align-self: center; padding: 0 0.35rem; color: var(--muted); font-size: 0.78rem; font-variant-numeric: tabular-nums; }
.char-count.is-low { color: var(--danger); font-weight: 600; }
.char-count[hidden] { display: none; }
.box-mirror .m-strike { text-decoration: line-through; }
.msg__text s { opacity: 0.75; }

.check-row {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin: 0.8rem 0 0.2rem;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.4;
  cursor: pointer;
}
.check-row input { flex-shrink: 0; width: 1.05rem; height: 1.05rem; margin-top: 0.1rem; accent-color: #8d6bff; }
.check-row a { color: #b9a6ff; }
.legal-links { margin: 1.1rem 0 0; color: var(--muted); font-size: 0.78rem; text-align: center; }
.legal-links a { color: var(--muted); text-decoration: none; }
.legal-links a:hover { color: var(--text); text-decoration: underline; }
.settings-block--danger { border-color: rgba(240, 113, 107, 0.35); }
.settings-block--danger h4 { color: #f0716b; }
.btn--ghost.btn--danger { color: #f0716b; border-color: rgba(240, 113, 107, 0.5); }
#deleteAccountDialog, #reportDialog { max-width: 440px; }
#reportDialog select, #reportDialog textarea { width: 100%; }
.pc-report {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0.7rem auto 0;
  color: var(--muted);
  font-size: 0.8rem;
}
.pc-report .ico { width: 0.9rem; height: 0.9rem; }
.pc-report:hover { color: #f0716b; }
.desk-games { margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid var(--line); }
.desk-games h5 { margin: 0 0 0.3rem; font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.game-now { display: inline-block; padding: 0.35rem 0.6rem; border-radius: 8px; background: rgba(255, 255, 255, 0.04); color: var(--muted); font-size: 0.86rem; }
.game-now.is-on { background: rgba(141, 107, 255, 0.16); color: var(--text); }
.game-list { display: grid; gap: 0.35rem; margin: 0.6rem 0; padding: 0; list-style: none; }
.game-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: var(--panel-2);
}
.game-list li span { min-width: 0; }
.game-list b { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.game-list small { color: var(--muted); font-size: 0.76rem; }
.game-list .btn { flex-shrink: 0; min-height: 32px; padding: 0.3rem 0.7rem; font-size: 0.8rem; }
.game-list--pick { max-height: 260px; overflow-y: auto; }

/* Strg+K: schnell wechseln */
.qs-back {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: start center;
  padding-top: 14vh;
  background: rgba(5, 4, 10, 0.6);
  backdrop-filter: blur(3px);
}
.qs {
  width: min(560px, calc(100vw - 24px));
  padding: 0.9rem;
  background: #14131e;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.65);
}
.qs-input {
  width: 100%;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: #07060d;
  color: var(--text);
  font: inherit;
  font-size: 1.05rem;
}
.qs-input:focus { outline: none; border-color: rgba(141, 107, 255, 0.8); box-shadow: 0 0 0 3px rgba(141, 107, 255, 0.18); }
.qs-list { display: grid; gap: 2px; max-height: 50vh; margin-top: 0.6rem; overflow-y: auto; }
.qs-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.7rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
}
.qs-item.is-active, .qs-item:hover { background: rgba(141, 107, 255, 0.22); }
.qs-item__prefix { width: 1.2rem; color: var(--muted); text-align: center; }
.qs-item__label { flex: 1; overflow: hidden; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.qs-item__badge { min-width: 1.2rem; padding: 0 0.35rem; border-radius: 999px; background: var(--danger); color: #fff; font-size: 0.72rem; font-weight: 700; text-align: center; }
.qs-item small { color: var(--muted); font-size: 0.78rem; }
.qs-none { margin: 1rem; color: var(--muted); text-align: center; }
.qs-foot { margin: 0.7rem 0 0; color: var(--muted); font-size: 0.76rem; }
.qs-foot kbd {
  display: inline-block;
  min-width: 1.4em;
  padding: 0 0.3em;
  margin: 0 1px;
  border: 1px solid var(--line-2);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--panel-2);
  color: var(--text);
  font: inherit;
  font-size: 0.72rem;
  text-align: center;
}
.composer textarea {
  background: transparent;
  border: 0;
  padding: 0.45rem 0;
  box-shadow: none;
}
.composer textarea:focus { box-shadow: none; }

/* Eingabe mit Live-Formatierung: dahinter liegt eine Ebene mit gleicher Schrift,
   die den Text formatiert zeigt. Breiten müssen gleich bleiben, sonst sitzt der
   Cursor falsch – deshalb fett per Schatten und kein Monospace für Code. */
.box-wrap { position: relative; flex: 1 1 0%; min-width: 0; display: flex; align-items: stretch; }
.box-wrap textarea#box {
  position: relative;
  z-index: 1;
  flex: 1 1 0%;
  min-width: 0;
  width: 100%;
  min-height: calc(1rem * 1.45 * 2 + 1.4rem);
  color: transparent;
  caret-color: var(--text);
  scrollbar-width: none;
}
.box-wrap textarea#box::-webkit-scrollbar { display: none; }
.box-wrap textarea#box::placeholder {
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.box-wrap textarea#box::selection { background: rgba(141, 107, 255, 0.4); color: transparent; }
.box-mirror {
  position: absolute;
  inset: 0;
  padding: 0.45rem 0;
  overflow: hidden;
  color: var(--text);
  font: inherit;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: normal;
  pointer-events: none;
}
.box-wrap textarea#box, .box-mirror { font-family: var(--font); font-size: 1rem; line-height: 1.45; letter-spacing: normal; }
.box-mirror .mk { font-style: normal; opacity: 0.28; }
.box-mirror .m-bold { font-weight: inherit; text-shadow: 0.35px 0 0 currentColor, -0.35px 0 0 currentColor, 0 0 0.4px currentColor; }
.box-mirror .m-italic { font-style: italic; }
.box-mirror .m-code { background: rgba(255, 255, 255, 0.08); border-radius: 4px; color: #ffd98a; }
.box-mirror .m-spoiler { background: rgba(0, 0, 0, 0.55); border-radius: 4px; color: var(--muted); }
.box-mirror .m-mention { color: var(--amber-2); background: rgba(141, 107, 255, 0.2); border-radius: 4px; }
.box-mirror .m-quote { color: var(--muted); }
.btn.send {
  flex-shrink: 0;
  width: 38px;
  min-width: 38px;
  height: 38px;
  min-height: 38px;
  padding: 0;
  border-radius: 10px;
  box-shadow: none;
}
.btn.send .ico { width: 1.1rem; height: 1.1rem; }
/* Am PC schickt Enter ab: Knopf erst zeigen, wenn etwas drinsteht. Am Handy bleibt er. */
@media (pointer: fine) {
  #composer:not(.has-content) .btn.send { display: none; }
}
.thread-pane .composer { margin: 0.6rem; border-radius: 16px; border-top: 1px solid var(--line-2); }
.thread-pane .composer textarea {
  flex: 1 1 0%;
  min-width: 0;
}
.replybar, .typing { padding: 0 0.3rem; }
.mentions button { background: var(--panel-2); border-color: var(--line-2); }
.voicebar {
  background: linear-gradient(135deg, rgba(74, 222, 154, 0.1), rgba(33, 31, 49, 0.9));
  border-color: rgba(74, 222, 154, 0.3);
  border-radius: 16px;
}
.thread-pane { background: var(--side); border-left-color: var(--line); box-shadow: -20px 0 40px rgba(0, 0, 0, 0.35); }

/* ── Eigene Leiste unten links ──────────────────────────────────────────── */

.me-bar {
  container-type: inline-size;
  container-name: mebar;
  min-width: 0;
  max-width: 100%;
  background: #0c0b13;
  background-image: none;
  border-top: 1px solid var(--line);
  box-shadow: none;
}
.me-bar .avatar { width: 34px; height: 34px; flex-shrink: 0; }
/* Name behält Minimum (~5–6 Zeichen); Status weicht zuerst; Tools/Avatar nie schrumpfen */
.me-id {
  border-radius: 10px;
  padding: 0.2rem 0.3rem;
  margin: -0.2rem -0.3rem;
  flex: 1 1 auto;
  min-width: 5.5rem; /* ~88px: „Henner“ bleibt lesbar */
  overflow: hidden;
}
.me-id:hover { background: rgba(255, 255, 255, 0.06); }
.me-id b { font-size: 0.88rem; }
.me-id > span {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1 1 auto;
  min-width: 4.5rem; /* Name-Boden, Ellipsis erst danach */
  overflow: hidden;
}
.me-id b, .me-bar small, .me-id small {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.me-id small.me-status {
  cursor: pointer;
  color: var(--muted);
  font-size: 0.72rem;
}
.me-id small.me-status:hover { color: var(--text); }
.me-tools { display: flex; flex-wrap: nowrap; flex-shrink: 0; gap: 0.1rem; }
.me-tools .icon-btn {
  flex-shrink: 0;
  min-width: 32px;
  min-height: 32px;
  padding: 0.3rem;
  border: 0;
  border-radius: 8px;
  color: var(--muted);
}
.me-tools .icon-btn:hover { background: rgba(255, 255, 255, 0.08); color: var(--text); }
.me-tools .icon-btn.is-off { color: var(--danger); }
.me-tools .ico { width: 1.1rem; height: 1.1rem; }
/* Sehr schmale Me-Bar: Status-Text weg, Name behält den Raum */
@container mebar (max-width: 200px) {
  .me-id small.me-status { display: none; }
}

/* ── Mitglieder ─────────────────────────────────────────────────────────── */

.members .list { padding: 0.35rem 0.5rem 1rem; }
.members__head { justify-content: space-between; }
.members__count {
  min-width: 1.6rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
  text-align: center;
}
.members__count:empty { display: none; }
.member {
  position: relative;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.4rem 0.5rem;
  border-radius: 10px;
}
.member:hover { background: rgba(255, 255, 255, 0.05); }
.member > .avatar { width: 34px; height: 34px; }
.member > div { min-width: 0; flex: 1; font-weight: 600; font-size: 0.9rem; }
.member small { font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.member small.member__activity { display: block; color: #b9b3d6; }
.member small.member__activity b { font-weight: 600; color: #dcd8f0; }
.pc-game {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.65rem;
  border-radius: 10px;
  background: rgba(141, 107, 255, 0.12);
  border: 1px solid rgba(141, 107, 255, 0.28);
}
.pc-game__icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: rgba(0, 0, 0, 0.28);
  font-size: 1.3rem;
}
.pc-game b { display: block; }
.act-card {
  margin: 0 0.35rem 0.45rem;
  padding: 0.55rem 0.6rem;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(141, 107, 255, 0.16), rgba(141, 107, 255, 0.05));
  border: 1px solid rgba(141, 107, 255, 0.25);
  cursor: pointer;
}
.act-card:hover { border-color: rgba(141, 107, 255, 0.55); }
.act-card__who { display: flex; align-items: center; gap: 0.45rem; font-size: 0.82rem; font-weight: 600; }
.act-card__who .avatar { width: 20px; height: 20px; font-size: 0.6rem; }
.act-card__game { display: flex; align-items: center; gap: 0.55rem; margin-top: 0.4rem; }
.act-card__icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.3);
  font-size: 1.1rem;
}
.act-card__game b { display: block; font-size: 0.86rem; }
.act-card__game small { color: #a9a3c7; font-size: 0.74rem; }
.pc-game small { color: #a9a3c7; font-size: 0.78rem; }
.member .presence {
  position: absolute;
  left: calc(0.5rem + 23px);
  top: calc(0.4rem + 23px);
  width: 12px;
  height: 12px;
  border: 2.5px solid var(--side);
  box-shadow: none;
}
.member:hover .presence { border-color: #1b1a26; }
.presence.online { background: var(--online); box-shadow: none; }
.member select {
  display: inline-block;
  width: auto;
  margin: 0.35rem 0.3rem 0 0;
  padding: 0.2rem 0.5rem;
  font-size: 0.78rem;
  border-radius: 8px;
}
.member .icon-btn {
  min-width: 28px;
  min-height: 28px;
  padding: 0.25rem;
  margin: 0.35rem 0.2rem 0 0;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--muted);
  vertical-align: middle;
}
.member .icon-btn:hover { background: rgba(255, 255, 255, 0.1); color: var(--text); }
.member .icon-btn .ico { width: 0.95rem; height: 0.95rem; }
.bot-tag { background: var(--grad); color: #fff; border-radius: 5px; }
.server-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.18rem;
  margin-left: 0.35rem;
  padding: 0.08rem 0.38rem 0.08rem 0.28rem;
  border-radius: 4px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  vertical-align: middle;
  line-height: 1.25;
  color: #f2f3f5;
  background: #1e1f22;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.server-tag__emoji {
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
}
.server-tag__text { letter-spacing: 0.06em; }
.server-tag-fields {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}
.server-tag-input {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  max-width: 6.5rem;
  font-weight: 700;
}
.server-tag-emoji-input {
  width: 3.4rem;
  text-align: center;
  font-size: 1.05rem;
  padding-left: 0.35rem;
  padding-right: 0.35rem;
}
.pc-body h3 .server-tag { vertical-align: 0.1em; }
.msg__meta .server-tag { margin-left: 0.3rem; }

.role-pick { border-color: var(--line-2); }
.role-pick.is-on { background: var(--grad); color: #fff; }

@media (hover: hover) and (min-width: 980px) {
  .member select, .member .icon-btn, .member .role-picks { display: none; }
  .member:hover select, .member:focus-within select { display: inline-block; }
  .member:hover .icon-btn, .member:focus-within .icon-btn { display: inline-grid; }
  .member:hover .role-picks, .member:focus-within .role-picks { display: flex; }
}

/* ── Dialoge ────────────────────────────────────────────────────────────── */

dialog {
  background: linear-gradient(180deg, #1e1c2d, #171623);
  border: 1px solid var(--line-2);
  border-radius: 20px;
  padding: 1.3rem 1.3rem 1.1rem;
  box-shadow: var(--shadow);
}
dialog::backdrop { background: rgba(5, 4, 10, 0.6); backdrop-filter: blur(4px); }
dialog h3, .sheet h3 { font-family: var(--display); font-size: 1.15rem; font-weight: 700; }
.invite-url { background: #0b0a12; border-color: rgba(141, 107, 255, 0.4); }

/* Profil und Einstellungen: am Handy Vollbild, am PC ein Fenster in der Mitte. */
.sheet { background: var(--bg); }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.9rem; }
.sheet-head h3 { margin: 0; }
.tabs {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: #0b0a12;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.tab {
  border: 0;
  border-radius: 9px;
  padding: 0.42rem 0.85rem;
  background: transparent;
  color: var(--muted);
  font-weight: 600;
  font-size: 0.86rem;
}
.tab:hover { color: var(--text); }
.tab.is-on { background: var(--grad); color: #fff; box-shadow: 0 4px 14px rgba(122, 85, 255, 0.3); }
.tab-pane[hidden] { display: none; }
#closeProfile {
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--line-2);
  color: var(--text);
}
#closeProfile:hover { background: rgba(255, 255, 255, 0.14); }
#logoutProfile {
  background: rgba(240, 113, 107, 0.12);
  border-color: rgba(240, 113, 107, 0.55);
  color: #ff8a84;
}
#logoutProfile:hover { background: var(--danger); border-color: var(--danger); color: #fff; }
.avatar-preview { width: 88px; height: 88px; box-shadow: 0 0 0 3px var(--panel), 0 0 0 5px rgba(141, 107, 255, 0.6); }
.avatar-preview[hidden] { display: none; }

.settings-block {
  margin: 0 0 0.75rem;
  padding: 0.95rem 1rem 1rem;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.settings-block h4 { margin: 0 0 0.3rem; font-family: var(--display); font-size: 0.95rem; }
.settings-block .hint { margin: 0 0 0.7rem; font-size: 0.86rem; }
.settings-block label:first-of-type { margin-top: 0.3rem; }
.settings-block #allowNotify { width: auto; }

.app-version {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.2rem 0 0.4rem;
}
.app-version img { width: 42px; height: 42px; border-radius: 12px; }
.app-version > div { flex: 1; min-width: 0; }
.app-version strong { display: block; }
.app-version small { color: var(--muted); font-size: 0.8rem; }
.update-state { min-height: 1.2em; margin: 0 0 0.4rem !important; }
.update-state.is-good { color: var(--online); }
.update-state.error { color: var(--danger); }

.switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0;
  padding: 0.7rem 0;
  border-top: 1px solid var(--line);
  color: var(--text);
  font-size: 0.92rem;
  cursor: pointer;
}
.switch-row b { display: block; font-weight: 600; }
.switch-row small { display: block; color: var(--muted); font-size: 0.8rem; margin-top: 0.1rem; }
.switch-row.is-locked { opacity: 0.6; cursor: default; }
.switch-row > span { flex: 1; min-width: 0; }
.sound-test {
  flex: none;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 50%;
  font-size: 0.7rem;
  color: var(--amber-2);
}
.sound-volume {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 0.2rem 0 0;
  padding-top: 0.7rem;
  border-top: 1px solid var(--line);
  color: var(--text);
  font-size: 0.92rem;
}
.sound-volume span { font-weight: 600; }
.sound-volume input[type="range"] { flex: 1; padding: 0; border: 0; background: transparent; accent-color: var(--amber); box-shadow: none; }

.settings-device {
  display: grid;
  gap: 0.35rem;
  margin-top: 12px;
}
.settings-device select {
  width: 100%;
  padding: 0.55rem 0.7rem;
  color: var(--text);
  background: #0b0a12;
  border: 1px solid var(--line-2);
  border-radius: 10px;
}
.settings-device__hint {
  margin: 0.55rem 0 0;
  font-size: 0.8rem;
  color: var(--muted);
}
#devicesRefresh {
  margin-top: 12px;
}

.switch {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  position: relative;
  width: 42px;
  height: 24px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #3a3656;
  cursor: pointer;
  transition: background 160ms ease;
}
.switch::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35);
  transition: transform 160ms ease;
}
.switch:checked { background: var(--grad); }
.switch:checked::before { transform: translateX(18px); }
.switch:focus { box-shadow: 0 0 0 3px rgba(141, 107, 255, 0.3); }
.switch:disabled { cursor: default; }

@media (min-width: 720px) {
  .sheet {
    display: grid;
    place-items: center;
    padding: 2rem;
    background: rgba(5, 4, 10, 0.62);
    backdrop-filter: blur(6px);
  }
  .sheet > form {
    width: min(580px, 100%);
    max-height: calc(100vh - 4rem);
    overflow: auto;
    padding: 1.4rem 1.5rem 1.2rem;
    background: linear-gradient(180deg, #1e1c2d, #171623);
    border: 1px solid var(--line-2);
    border-radius: 22px;
    box-shadow: var(--shadow);
  }
  .sheet .settings-block { background: rgba(255, 255, 255, 0.03); }
}

/* ── Breiter Bildschirm ─────────────────────────────────────────────────── */

@media (min-width: 980px) {
  .layout { grid-template-columns: 72px 244px minmax(0, 1fr) 248px; }
  .me-bar {
    left: 80px;
    width: 228px;
    bottom: 8px;
    padding: 0.5rem 0.55rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #0c0b13;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  }
}

@media (max-width: 979px) {
  .layout.in-chat .topbar {
    grid-template-columns: auto minmax(0, 1fr) max-content max-content max-content max-content;
    grid-template-areas:
      "back title saved mentions mute people"
      "topic topic topic topic topic topic"
      "search search search search search read";
    column-gap: 0.15rem;
  }
  .layout.in-chat .topbar.topbar--no-topic {
    grid-template-areas:
      "back title saved mentions mute people"
      "search search search search search read";
  }
  .layout.in-chat .topbar .menu-btn {
    width: 36px;
    min-width: 36px;
    max-width: 36px;
    padding: 0;
    justify-self: center;
  }
  .layout.in-chat .topbar .topbar__heading { display: contents; }
  .layout.in-chat .topbar .topbar__title { grid-area: title; width: 100%; max-width: none; min-width: 0; overflow: hidden; }
  .layout.in-chat .topbar .topic {
    grid-area: topic;
    padding: 0.25rem 0 0.2rem;
    line-height: 1.4;
  }
  .layout.in-chat .topbar #openSaved { grid-area: saved; }
  .layout.in-chat .topbar #openMentions { grid-area: mentions; }
  .layout.in-chat .topbar #markAllRead { grid-area: read; display: inline-flex; }
  .layout.in-chat .topbar #searchBox { grid-area: search; width: 100%; flex: none; margin: 0.3rem 0 0; min-width: 0; }
  .msg { padding-left: calc(36px + 1.6rem); padding-right: 0.9rem; }
  .msg--own { padding-left: calc(36px + 1.6rem); padding-right: 0.9rem; }
  .msg__meta .avatar { left: 0.8rem; width: 36px; height: 36px; }
  .composer-wrap { padding-left: 0.75rem; padding-right: 0.75rem; }
  .me-bar { background: #1a1826; border: 1px solid var(--line-2); }
  /* Placeholder darf 2–3 Zeilen umbrechen, ohne unten abgeschnitten zu werden */
  .box-wrap { align-items: stretch; min-height: calc(1rem * 1.45 * 3 + 1.1rem); }
  .box-wrap textarea#box,
  .composer textarea#box {
    min-height: calc(1rem * 1.45 * 3 + 1.1rem);
    overflow-y: auto;
  }
}

/* Freunde, Anfragen, Leute: Name und @name untereinander, gekürzt statt unter die Knöpfe */
.person-row .dm-row__body { display: flex; flex-direction: column; overflow: hidden; line-height: 1.25; }
.person-row .dm-row__body b,
.person-row .dm-row__body small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.person-row .dm-row__body small { color: var(--muted); font-size: 0.75rem; }
.person-row .icon-btn { width: 32px; min-width: 32px; height: 32px; padding: 0; }

/* Update-Knopf oben rechts (Windows-App) */
.update-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
  height: 32px;
  padding: 0 0.75rem;
  border: 1px solid rgba(35, 165, 90, 0.5);
  border-radius: 999px;
  background: rgba(35, 165, 90, 0.16);
  color: #43d17f;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
.update-pill:hover { background: rgba(35, 165, 90, 0.28); color: #6ee39c; }
.update-pill .ico { width: 1rem; height: 1rem; }
.update-pill.is-loading { border-color: var(--line-2); background: rgba(255, 255, 255, 0.05); color: var(--muted); cursor: default; }
.update-pill[hidden] { display: none; }
@media (max-width: 700px) {
  .update-pill span { display: none; }
  .update-pill { padding: 0 0.5rem; }
}

/* Leute einladen */
.invite-out {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.9rem 0 0.4rem;
  padding: 0.5rem 0.5rem 0.5rem 0.8rem;
  border: 1px solid rgba(141, 107, 255, 0.4);
  border-radius: 12px;
  background: rgba(141, 107, 255, 0.1);
}
.invite-out[hidden] { display: none; }
.invite-out .invite-url {
  flex: 1;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 0.92rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  background: none;
  user-select: all;
}
.invite-out .btn { flex-shrink: 0; min-height: 36px; padding: 0.4rem 0.9rem; }
.invite-head { margin: 1.1rem 0 0.4rem; color: var(--muted); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; }
.invite-line { display: flex; align-items: center; gap: 0.5rem; }
.invite-line span { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.invite-line b { overflow: hidden; font-size: 0.86rem; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.invite-line small { color: var(--muted); font-size: 0.75rem; }
.invite-line button { flex-shrink: 0; }

/* Pauline: offene Ideen */

#channelTitle.channel-title,
.channel-title {
  font-weight: 700;
  font-size: inherit;
  line-height: inherit;
  margin: 0;
}
#channelTitle.is-dm-peer {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}
.dm-peer {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
  text-align: left;
}
.dm-peer__face {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  min-width: 28px;
  max-width: 28px;
  border-radius: 50%;
  overflow: hidden;
  background: #5b3fd4;
  display: block;
}
.dm-peer__face > .avatar,
.dm-peer__face > img.avatar,
.dm-peer__face > .avatar--letter,
.dm-peer__face > .avatar--group {
  width: 28px !important;
  height: 28px !important;
  max-width: 28px !important;
  max-height: 28px !important;
  min-width: 28px !important;
  display: block;
  object-fit: contain;
  object-position: center;
  border-radius: 50%;
}
.dm-peer__name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.dm-peer:hover .dm-peer__name { text-decoration: underline; }
.search-hit {
  display: inline-flex;
  align-self: start;
  margin: 0 0 4px 52px;
  border: 0;
  background: rgba(139, 107, 255, .15);
  color: #c7b8ff;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 999px;
  cursor: pointer;
}
.search-hit:hover { background: rgba(139, 107, 255, .28); }
.msg--search .msg__actions { display: none; }
.danger-zone {
  border: 1px solid rgba(220, 80, 80, .35);
  border-radius: 12px;
  padding: 12px;
  margin-top: 8px;
}
.danger-zone h4 { color: #f0a0a0; margin: 0 0 8px; }

/* Kompakte Nachrichten */
.layout.is-compact .msg { padding-top: 2px; padding-bottom: 2px; }
.layout.is-compact .msg--grouped { margin-top: 0; }
.layout.is-compact .msg__meta { margin-bottom: 0; }
.layout.is-compact .msg__text { line-height: 1.35; }
.layout.is-compact .day { margin: 8px 0; }
.layout.is-compact .msg__actions { top: 0; }
.settings-block .switch-row { margin-top: 10px; }
.whats-new {
  list-style: none;
  margin: 0.35rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}
.whats-new li {
  margin: 0;
  padding: 0.55rem 0.7rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--text);
  font-size: 0.88rem;
  line-height: 1.35;
}
.whats-new li b { font-weight: 600; color: #fff; }


.gate .field-hint { margin: -0.35rem 0 0.85rem; font-size: 0.82rem; color: var(--muted, #9a9086); }


/* Einsteiger-Tour */
.tour-root {
  position: fixed;
  inset: 0;
  z-index: 6003;
  pointer-events: none;
}
.tour-veil {
  position: absolute;
  inset: 0;
  background: transparent;
  pointer-events: auto;
}
.tour-focus {
  position: relative !important;
  z-index: 6001 !important;
  box-shadow: 0 0 0 3px rgba(185, 166, 255, 0.95), 0 0 0 9999px rgba(8, 7, 14, 0.55) !important;
  border-radius: 12px;
  pointer-events: none;
}
.tour-card {
  position: fixed;
  z-index: 6002;
  pointer-events: auto;
  width: min(320px, calc(100vw - 24px));
  padding: 1rem 1.1rem 0.95rem;
  border: 1px solid rgba(185, 166, 255, 0.35);
  border-radius: 14px;
  background: #1a1830;
  color: #f2f0fb;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
}
.tour-card h2 {
  margin: 0.15rem 0 0.4rem;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}
.tour-step {
  margin: 0;
  color: #b9a6ff;
  font-size: 0.75rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.tour-body {
  margin: 0 0 0.95rem;
  color: #cfcbe3;
  font-size: 0.92rem;
  line-height: 1.45;
}
.tour-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.tour-actions .btn {
  min-height: 40px;
  padding: 0.45rem 1rem;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, #a48bff, #7a55ff);
  color: #fff;
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}
.tour-actions .link-btn {
  border: 0;
  background: none;
  color: #a39fbd;
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
@media (max-width: 640px) {
  .tour-card {
    left: 12px !important;
    right: 12px;
    width: auto !important;
    max-width: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tour-focus { transition: none; }
}


/* Passwort-Felder Registrierung */
.pw-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem 0.85rem;
  margin: 0 0 0.15rem;
}
.pw-col { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.pw-field {
  position: relative;
  display: flex;
  align-items: center;
}
.pw-field input {
  width: 100%;
  padding-right: 2.6rem;
}
.pw-toggle {
  position: absolute;
  right: 0.35rem;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted, #a39fbd);
  cursor: pointer;
}
.pw-toggle:hover { color: var(--text, #f2f0fb); background: rgba(255,255,255,0.06); }
.pw-toggle .ico { width: 1.1rem; height: 1.1rem; }
@media (max-width: 560px) {
  .pw-grid { grid-template-columns: 1fr; }
}


/* Registrierungs-Spruch */
.gate .claim-block {
  margin: 0.15rem 0 1.25rem;
  text-align: center;
}
.gate .claim--hero {
  margin: 0;
  font-size: clamp(1.75rem, 6vw, 2.35rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  background: var(--grad, linear-gradient(135deg, #a48bff 0%, #7a55ff 55%, #6a45f5 100%));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.gate .claim-sub {
  margin: 0.55rem 0 0;
  color: var(--muted, #9d98b8);
  font-size: 0.88rem;
  font-weight: 450;
  line-height: 1.4;
}

.voice-status {
  display: block;
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--muted, #a8a096);
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.voice-who.is-me {
  cursor: pointer;
}
.msg--jump {
  outline: 2px solid var(--accent, #e6b15a);
  outline-offset: 2px;
  border-radius: 8px;
  animation: jumpFlash 2.4s ease;
}
@keyframes jumpFlash {
  0%, 35% { background: rgba(230, 177, 90, 0.18); }
  100% { background: transparent; }
}

/* mute-until Menü + Mitglieder-Filter */
.mute-menu {
  position: fixed;
  z-index: 90;
  min-width: 11.5rem;
  padding: 0.35rem;
  border-radius: 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
  display: grid;
  gap: 0.12rem;
}
.mute-menu button {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  color: var(--text);
  border-radius: 8px;
  padding: 0.45rem 0.65rem;
  font: inherit;
  cursor: pointer;
}
.mute-menu button:hover,
.mute-menu button:focus-visible {
  background: rgba(141, 107, 255, 0.22);
  outline: none;
}
.member-filter {
  display: block;
  width: calc(100% - 1rem);
  margin: 0.45rem 0.5rem 0.15rem;
  padding: 0.35rem 0.6rem;
  border-radius: 8px;
  border: 1px solid var(--line-2);
  background: var(--panel-2);
  color: var(--text);
  font: inherit;
  font-size: 0.85rem;
}
.member-filter:focus {
  outline: none;
  border-color: rgba(141, 107, 255, 0.6);
}
.pc-copy {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.35rem 0 0.6rem;
}

/* Profil-Vorschau + Akzent */
.profile-preview {
  margin: 0 0 1rem;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #15141f;
}
.profile-preview .pc-banner { height: 88px; }
.profile-preview .pc-top { margin-top: -36px; padding: 0 0.85rem; }
.profile-preview .pc-avatar .avatar {
  width: 68px;
  height: 68px;
  font-size: 1.5rem;
  border-width: 4px;
}
.profile-preview .pc-bubble { margin-top: 40px; font-size: 0.78rem; }
.profile-preview .pc-body { padding: 0.45rem 0.85rem 0.85rem; }
.profile-preview .pc-body h3 { font-size: 1.1rem; }
.pc-banner.has-accent {
  background: linear-gradient(135deg, var(--accent, #8d6bff), color-mix(in srgb, var(--accent, #8d6bff) 45%, #1a1428));
}
.pc-body h3.has-accent {
  display: inline-block;
  padding-bottom: 0.15rem;
  box-shadow: inset 0 -3px 0 var(--accent, #8d6bff);
}
.accent-row, .media-row, .pc-copy-row, .pc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
  margin: 0.35rem 0 0.55rem;
}
.media-row > div { flex: 1; min-width: 0; }
.banner-preview {
  height: 72px;
  margin: 0.35rem 0 0.7rem;
  border-radius: 10px;
  background-size: cover;
  background-position: center;
  border: 1px solid var(--line-2);
}
.banner-preview[hidden] { display: none; }
.pc-copy-row .pc-copy { margin: 0; }
.pc-actions { margin-top: 0.35rem; }
.pc-actions .btn--ghost { display: inline-flex; flex: 1 1 auto; align-items: center; justify-content: center; gap: 0.45rem; white-space: nowrap; }
.pc-actions .btn--ghost .ico { width: 1rem; height: 1rem; flex: none; }
.pc-actions .hint { color: var(--muted); font-size: 0.82rem; }

/* Stammtisch-Tafel (Home) */
.tisch {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.75rem 1rem 1.5rem;
  max-width: 720px;
}
.tisch-card {
  background: var(--panel);
  border: 1px solid rgba(141, 107, 255, 0.22);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
}
.tisch-card h2 {
  margin: 0 0 0.55rem;
  font-size: 0.95rem;
  color: #cfc6ff;
}
.tisch-dabei-card {
  background: var(--grad-soft);
  border-color: rgba(141, 107, 255, 0.4);
}
.tisch-dabei {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
}
.tisch-dabei b { display: block; font-size: 1.05rem; }
.tisch-dabei small { color: var(--muted); }
.tisch-dabei__btns { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.tisch-dabei-empty { margin: 0; }
.tisch-people { display: flex; flex-direction: column; gap: 0.35rem; }
.tisch-person, .tisch-bday, .tisch-feed__btn, .tisch-bday-list button {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  text-align: left;
  border: 0;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  border-radius: 10px;
  padding: 0.45rem 0.55rem;
  cursor: pointer;
}
.tisch-person:hover, .tisch-bday:hover, .tisch-feed__btn:hover, .tisch-bday-list button:hover {
  background: rgba(141, 107, 255, 0.12);
}
.tisch-person .presence, .tisch-bday .presence { flex: none; }
.tisch-person span, .tisch-bday span { display: flex; flex-direction: column; min-width: 0; }
.tisch-person small, .tisch-bday small, .tisch-feed__btn small { color: var(--muted); }
.tisch-voice { margin-top: 0.65rem; padding-top: 0.55rem; border-top: 1px solid var(--line-2); }
.tisch-voice strong { display: block; font-size: 0.8rem; color: var(--muted); margin-bottom: 0.35rem; }
.tisch-feed, .tisch-bday-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.tisch-bday-today { margin-bottom: 0.4rem; }



/* Sehr schmale Handys: weniger Icons in Zeile 1, Alles-gelesen in Topic-Zeile */
@media (max-width: 420px) {
  .layout.in-chat .topbar {
    /* Icon-Spalten max-content: Suche darf sie nicht aufblasen (Lücke vor Glocke) */
    grid-template-columns: auto minmax(0, 1fr) max-content max-content;
    grid-template-areas:
      "back title mute people"
      "topic topic topic read"
      "saved mentions mentions mentions"
      "search search search search";
  }
  .layout.in-chat .topbar.topbar--no-topic {
    grid-template-areas:
      "back title mute people"
      "saved mentions read read"
      "search search search search";
  }
  .layout.in-chat .topbar .menu-btn {
    width: 36px;
    min-width: 36px;
    max-width: 36px;
    padding: 0;
    justify-self: center;
  }
  .layout.in-chat .topbar #searchBox { margin: 0.25rem 0 0; min-width: 0; }
  .layout.in-chat .topbar #markAllRead { grid-area: read; }
  .layout.in-chat .topbar .topic { padding-right: 0.15rem; }
  .tisch { padding: 0.55rem 0.55rem 1.1rem; gap: 0.55rem; }
  .tisch-card { padding: 0.65rem 0.75rem; }
  .tisch-card h2 { margin-bottom: 0.4rem; font-size: 0.88rem; }
  .tisch-card .hint { margin: 0.1rem 0; font-size: 0.84rem; }
  .composer-wrap { padding-left: 0.55rem; padding-right: 0.55rem; }
  .layout.in-chat .composer-wrap { margin-bottom: 76px; }
  .me-bar { left: 8px; right: 8px; bottom: 8px; }
}

/* Einstellungen: Nav-Listen mit Icons + Chevrons (Konto & Server) */
.settings-shell {
  display: grid;
  gap: 0.85rem;
}
.settings-shell--server { margin-top: 0.35rem; }
.settings-nav { min-width: 0; }
.settings-search {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 0.75rem;
  padding: 0.45rem 0.7rem;
  border-radius: 12px;
  background: #0b0a12;
  border: 1px solid var(--line);
}
.settings-search__ico { color: var(--muted); display: inline-grid; place-items: center; }
.settings-search__ico .ico { width: 1rem; height: 1rem; }
.settings-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  padding: 0.15rem 0;
  box-shadow: none;
}
.settings-group { margin: 0 0 0.85rem; }
.settings-group__title {
  margin: 0 0 0.35rem;
  padding: 0 0.35rem;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.settings-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  margin: 0 0 0.28rem;
  padding: 0.72rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.settings-row:hover { background: rgba(141, 107, 255, 0.1); border-color: rgba(141, 107, 255, 0.28); }
.settings-row.is-on {
  background: rgba(141, 107, 255, 0.16);
  border-color: rgba(141, 107, 255, 0.45);
}
.settings-row--danger { color: #ff8a84; }
.settings-row__ico {
  display: inline-grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--amber-2, #ffb347);
  flex: none;
}
.settings-row__ico .ico { width: 1rem; height: 1rem; }
.settings-row__label { flex: 1; min-width: 0; }
.settings-row__chev { color: var(--muted); display: inline-grid; }
.settings-row__chev .ico { width: 1rem; height: 1rem; }
.settings-panels { min-width: 0; }
.settings-panel-placeholder {
  display: none;
  margin: 1rem 0;
  text-align: center;
}
.settings-back {
  display: none;
  align-items: center;
  gap: 0.35rem;
  margin: 0 0 0.7rem;
  padding: 0.35rem 0.55rem;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.settings-back .ico { width: 1rem; height: 1rem; }
.settings-readonly {
  margin: 0.15rem 0 0.25rem;
  padding: 0.55rem 0.75rem;
  border-radius: 10px;
  background: #0b0a12;
  border: 1px solid var(--line);
  color: var(--muted);
  font-family: ui-monospace, monospace;
}
.sheet-head--settings {
  align-items: flex-start;
}
.sheet-head__titles { display: flex; flex-direction: column; gap: 0.55rem; min-width: 0; }
.server-settings-head {
  align-items: center;
  gap: 0.75rem;
}
.server-settings-head__who {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
  flex: 1;
}
.server-settings-head__text { min-width: 0; }
.server-settings-head__text h3 { margin: 0; }
.server-settings-head__text small {
  display: block;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.server-settings-avatar {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  overflow: hidden;
  background: #12101c;
  border: 1px solid var(--line);
  display: inline-grid;
  place-items: center;
}
.server-settings-avatar img,
.server-settings-avatar .avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 14px;
}
dialog.dialog--settings {
  width: min(920px, calc(100% - 1.2rem));
}
@media (min-width: 720px) {
  .settings-shell {
    grid-template-columns: minmax(200px, 260px) minmax(0, 1fr);
    align-items: start;
    gap: 1rem;
  }
  .settings-panel-placeholder { display: block; }
  .settings-shell.is-detail .settings-panel-placeholder,
  .settings-shell--server .settings-panel-placeholder { display: none; }
  .sheet > form {
    width: min(820px, 100%);
  }
}
@media (max-width: 719px) {
  .settings-shell.is-detail .settings-nav { display: none; }
  .settings-shell:not(.is-detail) .settings-panels { display: none; }
  .settings-shell.is-detail .settings-back { display: inline-flex; }
  .settings-panel-placeholder { display: none; }
}

/* Presence-Picker & Menü */
.presence-picker {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
  margin: 0.35rem 0 0.7rem;
}
.presence-pick {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.65rem;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.03);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  font-size: 0.86rem;
  cursor: pointer;
  text-align: left;
}
.presence-pick:hover { background: rgba(141, 107, 255, 0.1); }
.presence-pick.is-on {
  border-color: rgba(141, 107, 255, 0.55);
  background: rgba(141, 107, 255, 0.16);
}
.presence-pick .presence { width: 10px; height: 10px; }
.presence.offline { background: #6b6780; box-shadow: none; }
.me-id { position: relative; }
.me-id > .presence {
  position: absolute;
  left: 28px;
  bottom: 2px;
  width: 10px;
  height: 10px;
  border: 2px solid #0c0b13;
  border-radius: 50%;
  pointer-events: auto;
  cursor: pointer;
}
/* Alter Status-Knopf in me-tools entfällt — Presence am Avatar + Status-Text öffnen das Menü */
.me-presence-btn {
  position: relative;
}
.me-presence-btn .presence {
  width: 10px;
  height: 10px;
  border: 0;
  box-shadow: none;
}
.presence-menu {
  position: fixed;
  z-index: 80;
  width: min(270px, calc(100vw - 16px));
  padding: 0.55rem;
  border-radius: 14px;
  border: 1px solid var(--line-2);
  background: linear-gradient(180deg, #1e1c2d, #14121f);
  box-shadow: 0 18px 40px rgba(0,0,0,0.55);
}
.presence-menu__list { display: flex; flex-direction: column; gap: 0.25rem; }
.presence-menu__item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  padding: 0.55rem 0.6rem;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.presence-menu__item:hover,
.presence-menu__item.is-on { background: rgba(141, 107, 255, 0.14); }
.presence-menu__item .presence { width: 10px; height: 10px; }
.presence-menu__status {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin: 0.55rem 0 0.4rem;
  font-size: 0.78rem;
  color: var(--muted);
}
.presence-menu__status input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.45rem 0.55rem;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #0b0a12;
  color: var(--text);
  font: inherit;
}
.presence-menu__save { width: 100%; }

/* Freunde-Bereich mit Filtern */
.friends-panel { margin: 0 0 0.75rem; }
.friends-panel__head {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin: 0 0 0.45rem;
}
.friends-panel__head h2 { margin: 0; }
.friends-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}
.friends-chip {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.28rem 0.65rem;
  background: rgba(255,255,255,0.03);
  color: var(--muted);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}
.friends-chip em {
  font-style: normal;
  margin-left: 0.2rem;
  color: var(--text);
  opacity: 0.75;
}
.friends-chip.is-on {
  color: #fff;
  background: var(--grad);
  border-color: transparent;
}
.friends-chip.is-on em { color: #fff; opacity: 0.9; }
.friends-sub {
  margin: 0.65rem 0 0.3rem;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}
.friend-row { position: relative; }
.friend-row > .presence {
  position: absolute;
  left: 2.05rem;
  bottom: 0.55rem;
  width: 9px;
  height: 9px;
  border: 2px solid var(--panel, #12101c);
  border-radius: 50%;
}
.btn--tiny {
  width: auto;
  padding: 0.28rem 0.55rem;
  font-size: 0.75rem;
}
@media (max-width: 560px) {
  .friends-chip { padding: 0.32rem 0.55rem; font-size: 0.74rem; }
  .friend-row .icon-btn { width: 32px; height: 32px; }
}

/* Soft-Toast (z.B. Alles gelesen) */
.soft-toast {
  position: fixed;
  left: 50%;
  bottom: calc(210px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%) translateY(6px);
  z-index: 50;
  max-width: min(90vw, 280px);
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(24, 22, 36, 0.94);
  color: var(--text);
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.soft-toast.is-on {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .soft-toast { transition: none; }
}

/* Umfrage-Dialog */
label.check { display: flex; align-items: center; gap: 0.45rem; margin: 0.35rem 0; font-size: 0.92rem; }
label.check input { width: auto; margin: 0; }
.poll { max-width: min(420px, 100%); }
@media (max-width: 640px) {
  .poll__opt { min-height: 40px; }
}

/* Fäden */
.thread-chip { align-items: flex-start; gap: 0.2rem; padding: 0.4rem 0.7rem; }
.thread-chip__preview { color: var(--muted); }
.layout.show-thread .members { opacity: 0.35; pointer-events: none; }
@media (max-width: 979px) {
  .layout.show-thread .thread-pane {
    border-radius: 16px 16px 0 0;
    top: 8vh;
    border-left: 0;
    border-top: 1px solid var(--line-2);
  }
}

/* Angeheftet */
.pins { border-color: var(--line-2); }
.pins__jump:hover span { color: var(--text); }

.discover-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.7rem 0 0.9rem; }
.discover-chips .chip {
  border: 1px solid var(--line-2);
  background: var(--panel-2);
  color: var(--text);
  border-radius: 999px;
  padding: 0.28rem 0.75rem;
  min-height: 32px;
}
.discover-chips .chip.on { outline: 2px solid var(--accent, #7a55ff); background: rgba(122, 85, 255, 0.18); }
.discover-card__tags { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.35rem 0 0.2rem; }
.discover-tag {
  font-size: 0.72rem;
  border-radius: 999px;
  padding: 0.08rem 0.45rem;
  background: rgba(122, 85, 255, 0.16);
  color: var(--text);
}
.discover-tags-edit { display: flex; flex-wrap: wrap; gap: 0.55rem 1rem; margin: 0.35rem 0 0.2rem; }
@media (max-width: 640px) {
  .discover-chips { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 0.2rem; }
  .discover-chips .chip { flex: 0 0 auto; }
}

.limit-count {
  margin-left: 0.45rem;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--muted);
}


.msg__read {
  margin: 0.15rem 0 0 calc(40px + 0.75rem);
  font-size: 0.72rem;
  color: var(--muted);
}
.msg--own .msg__read {
  margin-left: 0;
  text-align: right;
  padding-right: 0.25rem;
}

.jump-unread {
  top: -4.7rem;
  background: var(--panel-2, var(--panel));
  color: var(--text);
  border: 1px solid var(--line);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}
@media (max-width: 640px) {
  .jump-latest { top: -2.2rem; right: 0.55rem; font-size: 0.82rem; padding: 0.35rem 0.7rem; }
  .jump-unread { top: -4.35rem; }
}

.tisch-bday-row { display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; margin-bottom: 0.45rem; }
.tisch-bday-row .tisch-bday { flex: 1 1 12rem; }
.tisch-bday-wish { flex: none; }
.tisch-bday-list li { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; justify-content: space-between; }

.channel-perms { display: flex; flex-direction: column; gap: 0.75rem; }
.channel-perm-row {
  display: grid;
  gap: 0.35rem 0.75rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255,255,255,0.02);
}
.channel-perm-row__name { display: flex; flex-direction: column; gap: 0.15rem; }
.channel-perm-row__name small { color: var(--muted); }
.channel-perm-row__see { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.9rem; }
.channel-perm-row__note { margin: 0; font-size: 0.75rem; }
@media (min-width: 640px) {
  .channel-perm-row { grid-template-columns: 1fr 1fr; align-items: end; }
  .channel-perm-row__note { grid-column: 1 / -1; }
}

.events-tools { display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; margin: 0 1rem 0.55rem; }
.events--empty { margin-bottom: 0.4rem; }
.tisch-card__head { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; justify-content: space-between; }
.tisch-card__head h2 { margin: 0; }
.tisch-dabei-empty--actions { display: flex; flex-wrap: wrap; gap: 0.55rem; align-items: center; }

/* ── Mobile-Audit Fixes 27.09.2026 (Pauline) ─────────────────────────────── */

/* 1) Topbar/Suche: nicht quetschen */
@media (max-width: 979px) {
  .layout.in-chat .topbar {
    column-gap: 0.25rem;
    row-gap: 0.15rem;
    padding-left: 0.45rem;
    padding-right: 0.45rem;
  }
  .layout.in-chat .topbar #searchBox {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  .layout.in-chat .topbar .topbar__title strong,
  .layout.in-chat .topbar .topbar__title .channel-title:not(.is-dm-peer) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .layout.in-chat .topbar .topbar__title .channel-title.is-dm-peer,
  .layout.in-chat .topbar .topbar__title .dm-peer {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
  }
  .layout.in-chat .topbar .topbar__title .dm-peer__face {
    flex: 0 0 28px;
  }
  .layout.in-chat .topbar .topbar__title .dm-peer__name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
@media (max-width: 420px) {
  .layout.in-chat .topbar {
    grid-template-columns: auto minmax(0, 1fr) max-content max-content;
  }
  .layout.in-chat .topbar #searchBox {
    font-size: 0.9rem;
  }
}

/* 2) Event/Pin-Widget: mobil mitscrollen, Nachrichten nicht dauerhaft verdecken */
@media (max-width: 979px) {
  .chat .events,
  .chat .pins {
    position: static;
    top: auto;
    z-index: auto;
  }
  .chat .events-tools {
    margin-left: 0.55rem;
    margin-right: 0.55rem;
  }
  .chat .events,
  .chat .pins {
    margin-left: 0.55rem;
    margin-right: 0.55rem;
  }
}

/* 3) Mitglieder-Drawer: Schließen + Backdrop nutzbar */
.members__head {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.members__head strong { flex: 1; min-width: 0; }
.members__close {
  flex: none;
  margin-left: auto;
}
@media (max-width: 979px) {
  .backdrop {
    z-index: 5;
  }
  .members {
    z-index: 6;
    width: min(300px, 82vw);
  }
  .layout.show-members .backdrop {
    display: block;
    pointer-events: auto;
  }
}

/* 4) Einstellungen: Speichern/Abbrechen/Abmelden sticky erreichbar */
@media (max-width: 979px) {
  .sheet {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
  }
  .sheet > form#profileForm {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
    width: 100%;
    border-radius: 0;
    border: 0;
    padding: 0;
    background: var(--bg);
  }
  .sheet #profileForm .sheet-head {
    flex: none;
    padding: 0.85rem 1rem 0.5rem;
    margin-bottom: 0;
  }
  .sheet #profileForm .tab-pane[data-pane],
  .sheet #profileForm > .tabs + *,
  .sheet #profileForm .settings-shell,
  .sheet #profileForm #accountSettingsShell,
  .sheet #profileForm .pane-scroll {
    /* fallback: scroll middle */
  }
  .sheet #profileForm {
    /* structure: head, tabs content grows, actions sticky */
  }
  .sheet #profileForm > .sheet-head + .tabs {
    flex: none;
    margin: 0 1rem;
  }
  /* Make everything between head and sheet-actions scroll */
  .sheet #profileForm {
    position: relative;
  }
  .sheet #profileForm .sheet-actions {
    position: sticky;
    bottom: 0;
    z-index: 4;
    flex: none;
    margin: 0;
    padding: 0.65rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgba(18, 17, 15, 0), #12110f 28%);
    border-top: 1px solid var(--line-2);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.35);
  }
  .sheet #profileForm > *:not(.sheet-head):not(.sheet-actions) {
    /* can't easily target middle without wrapper — use overflow on form instead */
  }
}

/* Robust: form scrolls, actions sticky at bottom of scrollport */
@media (max-width: 979px) {
  .sheet > form#profileForm {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0.85rem 1rem calc(0.4rem + env(safe-area-inset-bottom));
    display: block;
    max-height: 100%;
  }
  .sheet #profileForm .sheet-actions {
    position: sticky;
    bottom: -1px;
  }
}

/* 5) Profilkarte: Server-Spitzname volle Breite, Icon+Text in einer Zeile */
.pc-body .pc-wide,
.pc-body #cardNick,
.pc-body #cardTimeout,
.pc-body #cardBlock {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.35rem;
  padding: 0.7rem 0.85rem;
  white-space: nowrap;
}
.pc-body .pc-wide .ico,
.pc-body #cardNick .ico,
.pc-body #cardTimeout .ico {
  width: 1rem;
  height: 1rem;
  flex: none;
}
.pc-body .pc-wide span,
.pc-body #cardNick span {
  display: inline;
}

/* Mitglieder: Nick-Pencil neben dem Namen, nicht allein darunter */
@media (max-width: 979px) {
  .member .icon-btn[data-nick] {
    display: inline-flex;
    margin: 0 0 0 0.25rem;
    vertical-align: middle;
  }
  .member__name {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    max-width: 100%;
  }
}

@media (min-width: 980px) {
  .members__close { display: none !important; }
}

/* Kanal-Lesezeichen */
.ch-star {
  display: none;
  padding: 0.1rem 0.3rem;
  border-radius: 8px;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
  flex: none;
  margin-left: 0.15rem;
}
.channel:hover .ch-star,
.channel.is-starred .ch-star,
.ch-star.is-on {
  display: inline-flex;
  align-items: center;
}
.ch-star.is-on,
.channel.is-starred .ch-star {
  color: #f0c14a;
}
.ch-star:hover { background: rgba(255, 255, 255, 0.08); color: #f0c14a; }
.channel .badge + .ch-star { margin-left: 0.2rem; }
.channel .ch-star + .ch-edit { margin-left: 0.15rem; }
@media (max-width: 979px) {
  .ch-star { display: inline-flex; opacity: 0.55; }
  .channel.is-starred .ch-star,
  .ch-star.is-on { opacity: 1; }
}

/* Würfelrunde im Kanal */
.dice-round {
  margin: 0.45rem 0 0.2rem;
  padding: 0.65rem 0.75rem;
  border-radius: 12px;
  background: rgba(141, 107, 255, 0.12);
  border: 1px solid rgba(141, 107, 255, 0.28);
  max-width: 22rem;
}
.dice-round__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.25rem;
}
.dice-round__row {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.2rem 0.15rem;
  color: var(--text);
}
.dice-round__row.is-win {
  color: #f0c14a;
  font-weight: 600;
}
.dice-round__empty { color: var(--muted); font-size: 0.9rem; }
.dice-round__acts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  margin-top: 0.55rem;
}

/* DM-Header: Name oben, Avatar nur als Hintergrund in Topic */
.dm-peer--text {
  display: block;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: left;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 700;
  padding: 0;
  cursor: pointer;
}
.dm-peer--text:hover { text-decoration: underline; }
.dm-topic-line {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  max-width: 100%;
}
.dm-topic-face {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: #5b3fd4;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
.dm-topic-line > span:last-child {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ── Handy 27.09.2026: Server-Leiste weg in Kanalansicht + kurzer Platzhalter (Pauline) ── */

/* In der Kanalansicht frisst die ~72px-Rail den Titel — ausblenden, volle Breite für Chat */
@media (max-width: 979px) {
  .layout.in-chat {
    grid-template-columns: minmax(0, 1fr);
  }
  .layout.in-chat .rail {
    display: none;
  }
  .layout.in-chat .topbar,
  .layout.in-chat .chat,
  .layout.in-chat .composer-wrap {
    grid-column: 1;
  }
  /* Titel hat Vorrang vor Icons */
  .layout.in-chat .topbar .menu-btn {
    flex-shrink: 0;
  }
  .layout.in-chat .topbar .topbar__title {
    width: 100%;
    max-width: none;
    min-width: 0;
    overflow: hidden;
  }
  .layout.in-chat .topbar .topbar__title strong,
  .layout.in-chat .topbar .topbar__title .channel-title {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Unter ~420 px: Eingabe eine Zeile hoch (langer Platzhalter wird per JS gekürzt).
   Icon-Leiste (Plus/Emoji/Senden) bleibt sichtbar — Input schrumpft, nicht die Controls. */
@media (max-width: 420px) {
  .box-wrap {
    align-items: stretch;
    min-width: 0;
    min-height: calc(1rem * 1.45 + 1.1rem);
  }
  .box-wrap textarea#box,
  .composer textarea#box {
    min-width: 0;
    min-height: calc(1rem * 1.45 + 1.1rem);
    overflow-y: auto;
  }
  .composer { gap: 0.15rem; padding: 0.3rem 0.3rem; }
  .composer-btn, .btn.send { width: 36px; min-width: 36px; height: 36px; min-height: 36px; }
}


/* ── Voice-Sidebar über me-bar ─────────────────────────────────────────── */
.voice-side {
  position: absolute;
  z-index: 5;
  left: 72px;
  bottom: 58px;
  width: 230px;
  padding: 0.45rem 0.5rem 0.5rem;
  background: #0f1a14;
  border: 1px solid rgba(74, 222, 154, 0.35);
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}
.voice-side[hidden] { display: none; }
.voice-side__head {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
  margin-bottom: 0.35rem;
  padding: 0 0.15rem;
}
.voice-side__name {
  font-size: 0.82rem;
  color: #86efac;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.voice-side__status {
  font-size: 0.72rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.voice-side__row {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-wrap: nowrap;
}
.voice-side__row--more { margin-top: 0.25rem; }
.voice-side__row .icon-btn,
.voice-side__row .btn--icon {
  min-width: 32px;
  min-height: 32px;
  padding: 0.3rem;
  border-radius: 8px;
  flex: none;
}
.voice-side {
  overflow: visible;
}
.voice-mode {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 8.2rem;
  z-index: 8;
}
.voice-side__mode {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem;
  width: 100%;
  height: 32px;
  padding: 0 0.55rem 0 0.55rem;
  border-radius: 8px;
  border: 1px solid var(--line-2);
  background: #0c0b13;
  color: var(--text);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: none;
  outline: none;
}
.voice-side__mode::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--muted);
  flex: none;
}
.voice-side__mode:hover {
  border-color: rgba(74, 222, 154, 0.45);
  background: rgba(15, 26, 20, 0.95);
}
.voice-side__mode:focus-visible {
  border-color: rgba(74, 222, 154, 0.7);
  box-shadow: 0 0 0 2px rgba(74, 222, 154, 0.22);
}
.voice-side__mode[aria-expanded="true"] {
  border-color: rgba(74, 222, 154, 0.55);
}
.voice-mode__menu {
  position: absolute;
  z-index: 40;
  top: calc(100% + 6px);
  left: 0;
  min-width: 100%;
  width: max-content;
  min-width: 8.5rem;
  padding: 0.3rem;
  background: #0c0b13;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
}
.voice-mode__menu[hidden] { display: none; }
.voice-mode__menu button {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0.5rem 0.65rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.85rem;
  text-align: left;
  cursor: pointer;
}
.voice-mode__menu button:hover,
.voice-mode__menu button:focus-visible {
  background: var(--amber);
  color: #fff;
  outline: none;
}
.voice-mode__menu button.is-active {
  background: rgba(74, 222, 154, 0.14);
  color: #86efac;
}
.voice-mode__menu button.is-active:hover,
.voice-mode__menu button.is-active:focus-visible {
  background: var(--amber);
  color: #fff;
}
.voicebar--people {
  background: rgba(15, 26, 20, 0.55);
  border-color: rgba(74, 222, 154, 0.2);
  padding: 0.45rem 0.55rem;
  margin-bottom: 0.4rem;
}
.layout.voice-on .channels { padding-bottom: 7.5rem; }

@media (min-width: 980px) {
  .voice-side {
    left: 80px;
    width: 228px;
    bottom: 70px;
  }
}

@media (max-width: 979px) {
  .voice-side {
    left: 8px;
    right: 8px;
    width: auto;
    bottom: 72px;
  }
  /* In reiner Chat-Ansicht: schmale Floating-Leiste über me-bar */
  .layout.in-chat .voice-side {
    left: 8px;
    right: 8px;
    bottom: 72px;
    z-index: 6;
  }
  .layout.in-chat.voice-on .composer-wrap { margin-bottom: 148px; }
}

/* ── Server Bild/Banner Vorschau ───────────────────────────────────────── */
.server-media-preview {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.25rem 0 0.65rem;
}
.server-media-preview input[type="file"] { flex: 1; min-width: 0; }
.server-icon-preview {
  width: 64px;
  height: 64px;
  flex: none;
  border-radius: 16px;
  background: var(--panel-2);
  border: 1px solid var(--line-2);
  background-size: cover;
  background-position: center;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--muted);
  overflow: hidden;
}
.server-icon-preview.has-img { color: transparent; }
.server-banner-preview {
  height: 88px;
  margin: 0.25rem 0 0.55rem;
  border-radius: 12px;
  border: 1px solid var(--line-2);
  background: var(--panel-2);
  background-size: cover;
  background-position: center;
}
.server-banner-preview[hidden] { display: none; }

/* Event-Erstellen-Wizard */
dialog.dialog--wide#eventDialog {
  width: min(760px, calc(100% - 1.5rem));
  max-height: calc(100vh - 1.5rem);
  padding: 0;
  overflow: auto;
}
#eventForm { padding: 1.35rem 1.5rem 1.2rem; }
.event-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.3rem;
  margin: -1.35rem -1.5rem 1.2rem;
  padding: 1.35rem 1.5rem 1rem;
  background: linear-gradient(135deg, rgba(122, 85, 255, 0.14), rgba(230, 177, 90, 0.06));
  border-bottom: 1px solid var(--line);
}
.event-dialog-kicker {
  margin: 0 0 0.25rem;
  color: var(--amber-2);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.event-dialog-head h3 { margin: 0; font-size: 1.35rem; }
.event-dialog-head .hint { margin: 0.3rem 0 0; }
.event-stepper {
  display: flex;
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: 0.74rem;
  white-space: nowrap;
}
.event-stepper li { display: flex; align-items: center; gap: 0.3rem; }
.event-stepper li + li::before { content: '→'; margin-right: 0.25rem; color: var(--line-2); }
.event-stepper li > span {
  display: inline-grid;
  place-items: center;
  width: 1.45rem;
  height: 1.45rem;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  color: var(--muted);
}
.event-stepper li.is-active, .event-stepper li.is-done { color: var(--text); }
.event-stepper li.is-active > span { background: var(--grad); border-color: transparent; color: #fff; }
.event-stepper li.is-done > span { border-color: var(--amber); color: var(--amber-2); }
.event-wizard-page[hidden] { display: none; }
.event-wizard-question { margin: 0 0 0.8rem; font-size: 1.05rem; font-weight: 700; }
.event-location-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; }
.event-location-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.25rem 0.65rem;
  align-items: start;
  min-height: 118px;
  margin: 0;
  padding: 1rem;
  border: 1px solid var(--line-2);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.025);
  color: var(--text);
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}
.event-location-card:hover { border-color: rgba(141, 107, 255, 0.65); transform: translateY(-1px); }
.event-location-card.is-selected { border-color: var(--amber); background: rgba(230, 177, 90, 0.08); box-shadow: 0 0 0 1px rgba(230, 177, 90, 0.18); }
.event-location-card.is-disabled { opacity: 0.55; cursor: not-allowed; }
.event-location-card > input[type="radio"] { width: auto; margin: 0.15rem 0 0; accent-color: var(--amber); }
.event-location-card__icon { font-size: 1.55rem; line-height: 1; }
.event-location-card__copy { display: flex; flex-direction: column; gap: 0.25rem; }
.event-location-card__copy strong { font-size: 1rem; }
.event-location-card__copy small { color: var(--muted); font-size: 0.82rem; line-height: 1.35; }
.event-location-card select { grid-column: 2; margin-top: 0.35rem; padding: 0.5rem 0.6rem; }
#eventLocationHint { margin: 0.7rem 0 0; }
.event-form-section {
  margin: 0 0 0.8rem;
  padding: 0.8rem 0.9rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.02);
}
.event-form-section legend { padding: 0 0.35rem; color: var(--amber-2); font-size: 0.82rem; font-weight: 700; }
.event-fields { display: grid; grid-template-columns: minmax(130px, 0.55fr) minmax(0, 1.45fr); gap: 0.75rem; }
.event-field { display: block; margin: 0; color: var(--muted); font-size: 0.84rem; }
.event-field input, .event-field textarea { margin-top: 0.3rem; color: var(--text); }
.event-field textarea { min-height: 7rem; resize: vertical; }
.event-field--emoji input { font-size: 1.1rem; }
.event-emoji-picks { display: flex; gap: 0.3rem; margin-top: 0.35rem; }
.event-emoji-pick { width: 2rem; height: 2rem; padding: 0; border: 1px solid var(--line-2); border-radius: 8px; background: var(--panel-2); color: var(--text); font-size: 1rem; cursor: pointer; }
.event-emoji-pick:hover { border-color: var(--amber); background: rgba(230, 177, 90, 0.1); }
.event-field-hint { margin: 0.35rem 0 0; font-size: 0.78rem; }
.event-field-optional { color: var(--muted); font-size: 0.75rem; }
.event-place-field[hidden], .event-voice-summary[hidden] { display: none; }
.event-voice-summary { margin: 0.25rem 0 0.45rem; padding: 0.65rem 0.75rem; border: 1px solid rgba(141, 107, 255, 0.35); border-radius: 10px; background: rgba(141, 107, 255, 0.1); color: var(--text); }
.event--preview { margin: 0; min-height: 150px; background: linear-gradient(135deg, rgba(122, 85, 255, 0.12), rgba(255, 255, 255, 0.025)); }
.event--preview .event__title { font-size: 1.15rem; }
.event--preview .event__desc { white-space: pre-wrap; }
.event-preview-note { margin: 0.7rem 0 0; }
.event-wizard-actions { align-items: center; }
.event-wizard-actions .btn { width: auto; flex: 0 0 auto; }
.event-wizard-spacer { flex: 1 !important; }
@media (max-width: 640px) {
  #eventForm { padding: 1rem; }
  .event-dialog-head { margin: -1rem -1rem 1rem; padding: 1rem; flex-direction: column; gap: 0.8rem; }
  .event-stepper { width: 100%; justify-content: space-between; font-size: 0.68rem; }
  .event-stepper li + li::before { margin-right: 0.05rem; }
  .event-location-options, .event-fields { grid-template-columns: 1fr; }
  .event-location-card { min-height: 0; }
  .event-wizard-actions .btn { padding-left: 0.75rem; padding-right: 0.75rem; }
}

.server-context-menu {
  position: fixed;
  top: 0;
  left: 0;
  right: auto;
  z-index: 120;
  min-width: 238px;
  max-width: min(310px, calc(100vw - 16px));
  max-height: min(76vh, 560px);
  overflow-y: auto;
}
.server-context-menu button { min-height: 2.25rem; }
@media (max-width: 480px) {
  .server-context-menu { min-width: 220px; }
}
.channel-context-menu {
  position: fixed;
  top: 0;
  left: 0;
  right: auto;
  z-index: 120;
  min-width: 238px;
  max-width: min(310px, calc(100vw - 16px));
  max-height: min(76vh, 560px);
  overflow-y: auto;
}
.channel-context-menu button { min-height: 2.25rem; }
.channel-context-menu button.danger { color: #f87171; }
.channel-context-menu button.danger .ico { color: #f87171; }
.channel-context-menu button.danger:hover { background: #b91c1c; color: #fff; }
.channel-context-menu button.danger:hover .ico { color: #fff; }
@media (max-width: 480px) {
  .channel-context-menu { min-width: 220px; }
}


/* Kanal-Emoji Auswahl */
.channel-create { display: flex; flex-direction: column; gap: 0.65rem; }
.channel-create__main { display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; }
.channel-emoji-field { display: flex; flex-direction: column; gap: 0.3rem; }
.channel-emoji-field__label { color: var(--muted); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; }
.channel-emoji-row { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
.emoji-btn--lg { width: 2.6rem; height: 2.6rem; font-size: 1.35rem; border-radius: 12px; }
.emoji-btn--lg.has-emoji { color: var(--text); border-color: rgba(141, 107, 255, 0.45); }
.channel-emoji-picks { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.channel-emoji-pick {
  width: 2rem; height: 2rem; padding: 0;
  border: 1px solid var(--line-2); border-radius: 8px;
  background: var(--panel-2); color: var(--text); font-size: 1rem; cursor: pointer;
}
.channel-emoji-pick:hover { border-color: var(--amber); background: rgba(230, 177, 90, 0.1); }
.channel-emoji-clear {
  width: 1.6rem; height: 1.6rem; padding: 0; border: 0; border-radius: 999px;
  background: transparent; color: var(--muted); font-size: 1.1rem; cursor: pointer; line-height: 1;
}
.channel-emoji-clear:hover { color: var(--text); background: rgba(255,255,255,0.06); }
.ch-emoji { display: inline-grid; place-items: center; min-width: 1.1rem; font-size: 1rem; line-height: 1; }
.ep-channel-suggest {
  display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center;
  padding: 0.55rem 0.65rem 0.35rem; border-bottom: 1px solid var(--line-2);
}
.ep-channel-suggest__label {
  color: var(--muted); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; margin-right: 0.2rem;
}
.ep-channel-suggest button {
  width: 2rem; height: 2rem; padding: 0; border: 1px solid var(--line-2); border-radius: 8px;
  background: var(--panel-2); font-size: 1.05rem; cursor: pointer;
}
.ep-channel-suggest button:hover { border-color: var(--amber); background: rgba(230, 177, 90, 0.12); }

/* Kanal erstellen – Dialog + Kategorie-Plus */
.cat-row {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  padding-right: 0.25rem;
}
.cat-row .cat { flex: 1; min-width: 0; }
.cat-add {
  flex: 0 0 auto;
  width: 1.45rem;
  height: 1.45rem;
  margin: 0.55rem 0.15rem 0;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 120ms ease, color 120ms ease, background 120ms ease;
}
.cat-row:hover .cat-add,
.cat-add:focus-visible,
.cat-add:focus { opacity: 1; }
.cat-add:hover { color: var(--text); background: rgba(255, 255, 255, 0.08); }
@media (hover: none) { .cat-add { opacity: 0.75; } }

#channelCreateDialog { width: min(440px, calc(100% - 1.5rem)); }
.channel-create--dialog { gap: 0.75rem; }
.channel-create__label {
  display: block;
  margin: 0.15rem 0 0;
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.channel-create__label small { text-transform: none; letter-spacing: 0; font-size: 0.78rem; opacity: 0.85; }
.channel-kind-cards {
  display: grid;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  border: 0;
}
.channel-kind-cards > legend { margin-bottom: 0.35rem; }
.channel-kind-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.35rem 0.7rem;
  align-items: center;
  margin: 0;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.025);
  color: var(--text);
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease;
}
.channel-kind-card:hover { border-color: rgba(141, 107, 255, 0.55); }
.channel-kind-card.is-selected {
  border-color: var(--amber);
  background: rgba(230, 177, 90, 0.08);
  box-shadow: 0 0 0 1px rgba(230, 177, 90, 0.16);
}
.channel-kind-card > input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.channel-kind-card__icon {
  display: grid;
  place-items: center;
  width: 2rem;
  color: var(--muted);
}
.channel-kind-card.is-selected .channel-kind-card__icon { color: var(--amber); }
.channel-kind-card__icon .ico { width: 1.25rem; height: 1.25rem; }
.channel-kind-card__copy { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.channel-kind-card__copy strong { font-size: 0.95rem; }
.channel-kind-card__copy small { color: var(--muted); font-size: 0.78rem; line-height: 1.35; }

.channel-name-field {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0 0.7rem;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: var(--panel-2);
}
.channel-name-field:focus-within { border-color: rgba(141, 107, 255, 0.55); }
.channel-name-prefix {
  display: grid;
  place-items: center;
  color: var(--muted);
  flex: 0 0 auto;
}
.channel-name-prefix .ico { width: 1.05rem; height: 1.05rem; }
.channel-name-field input {
  flex: 1;
  min-width: 0;
  margin: 0;
  border: 0;
  background: transparent;
  padding: 0.7rem 0;
}

.channel-admin-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.channel-admin-head h3 { margin: 0; }
.channel-admin-head .btn { width: auto; flex: 0 0 auto; }

/* Freunde direkt einladen + Einladungskarte im Chat */
.invite-friends { display: grid; gap: 0.3rem; max-height: 220px; overflow-y: auto; }
.invite-friend { display: flex; align-items: center; gap: 0.6rem; padding: 0.35rem 0.4rem; border-radius: 10px; }
.invite-friend:hover { background: rgba(255, 255, 255, 0.04); }
.invite-friend .avatar { width: 32px; height: 32px; flex-shrink: 0; }
.invite-friend span { display: flex; flex: 1; flex-direction: column; min-width: 0; line-height: 1.25; }
.invite-friend b, .invite-friend small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.invite-friend small { color: var(--muted); font-size: 0.75rem; }
.invite-friend .btn { flex-shrink: 0; min-height: 32px; padding: 0.3rem 0.8rem; font-size: 0.82rem; }
.invite-friend .btn.is-done { border-color: rgba(35, 165, 90, 0.5); color: #43d17f; }
.invite-card {
  max-width: 420px;
  margin-top: 0.45rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: var(--panel-2, #1f1d2e);
}
.invite-card__label { display: block; margin-bottom: 0.45rem; color: var(--muted); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.invite-card__row { display: flex; align-items: center; gap: 0.7rem; }
.invite-card__icon { display: grid; place-items: center; flex-shrink: 0; width: 46px; height: 46px; overflow: hidden; border-radius: 14px; background: rgba(141, 107, 255, 0.15); color: var(--muted); }
.invite-card__icon img, .invite-card__icon .avatar { width: 100%; height: 100%; border-radius: 14px; object-fit: cover; }
.invite-card__icon .ico { width: 1.2rem; height: 1.2rem; }
.invite-card__text { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.invite-card__text b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.invite-card__text small { color: var(--muted); font-size: 0.78rem; }
.invite-card .btn { flex-shrink: 0; min-height: 36px; padding: 0.4rem 1rem; }
.invite-card.is-dead { opacity: 0.7; }
.invite-target-menu { position: fixed; top: 0; left: 0; right: auto; z-index: 130; }
.invite-target-menu__head { margin: 0.2rem 0.5rem 0.4rem; color: var(--muted); font-size: 0.78rem; font-weight: 600; }
.invite-target-menu img, .invite-target-menu__letter { width: 1.5rem; height: 1.5rem; flex-shrink: 0; border-radius: 0.45rem; object-fit: cover; }
.invite-target-menu__letter { display: grid; place-items: center; background: var(--line-2); font-style: normal; font-size: 0.75rem; font-weight: 700; }
.invite-target-menu button span { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: left; }
.invite-target-menu button small { color: var(--muted); font-size: 0.72rem; }
.invite-target-menu button:disabled { opacity: 0.55; cursor: default; }
.invite-target-menu button:disabled:hover { background: none; color: inherit; }
.invite-target-menu .hint { margin: 0.3rem 0.5rem; }

.user-context-menu { min-width: 232px; }
.user-context-menu button span { display: flex; flex: 1; flex-direction: column; min-width: 0; text-align: left; line-height: 1.25; }
.user-context-menu button span small { color: var(--muted); font-size: 0.72rem; font-weight: 400; }
.user-context-menu button:hover span small { color: rgba(255, 255, 255, 0.8); }
.user-context-menu button:disabled { opacity: 0.45; cursor: default; }
.user-context-menu button:disabled:hover { background: none; color: inherit; }
.user-context-menu button:disabled:hover .ico { color: var(--muted); }
.user-context-menu .ico-gap { display: inline-block; width: 1rem; flex-shrink: 0; }
.user-context-menu button { position: relative; }
.user-context-menu button:has(.menu-more) span { padding-right: 1rem; }
.user-context-menu .menu-more { position: absolute; top: 50%; right: 0.7rem; transform: translateY(-50%); color: var(--muted); font-weight: 400; }
.user-context-menu button.is-danger, .user-context-menu button.is-danger .ico { color: #f87171; }
.user-context-menu button.is-danger:hover { background: #b91c1c; color: #fff; }
.user-context-menu button.is-danger:hover .ico { color: #fff; }
.user-ctx-sub { margin: 0.1rem 0 0.2rem 1.4rem; padding-left: 0.3rem; border-left: 1px solid var(--line-2); }
.dm-row.is-muted, .channel.is-muted { opacity: 0.6; }
.dm-row__pin { display: inline-flex; margin-left: auto; margin-right: 0.35rem; color: var(--muted); }
.dm-row__pin .ico { width: 0.8rem; height: 0.8rem; }

.friends-sub--asks { color: #f87171; }


.msg--ignored { display: flex; align-items: center; gap: 0.6rem; padding-top: 0.35rem; padding-bottom: 0.35rem; color: var(--muted); font-size: 0.82rem; font-style: italic; }
.msg--ignored .link-btn { font-style: normal; font-size: 0.8rem; }


@media (min-width: 980px) {
  .layout.is-home { grid-template-columns: 72px 244px minmax(0, 1fr); }
  .layout.is-home .members { display: none; }
}


/* Anruf in Direktnachrichten */
.call-ring {
  position: fixed;
  top: 18px;
  left: 50%;
  z-index: 7000;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  min-width: min(360px, calc(100vw - 24px));
  padding: 0.7rem 0.8rem 0.7rem 0.75rem;
  border: 1px solid rgba(35, 165, 90, 0.45);
  border-radius: 16px;
  background: #17162a;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
  transform: translateX(-50%);
  animation: call-ring-in 0.18s ease-out;
}
.call-ring__face .avatar { width: 44px; height: 44px; animation: call-ring-pulse 1.4s ease-in-out infinite; border-radius: 50%; }
.call-ring__text { display: flex; flex: 1; flex-direction: column; min-width: 0; line-height: 1.25; }
.call-ring__text b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.call-ring__text small { color: var(--muted); font-size: 0.8rem; }
.call-ring__btn { display: grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: 50%; color: #fff; cursor: pointer; }
.call-ring__btn .ico { width: 1.15rem; height: 1.15rem; }
.call-ring__btn--yes { background: #23a55a; }
.call-ring__btn--yes:hover { background: #1f8f4e; }
.call-ring__btn--no { background: #d83a3a; }
.call-ring__btn--no:hover { background: #b92f2f; }
#callDm.is-live { color: #f87171; }
.voice-hangup { color: #f87171; }
@keyframes call-ring-in { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes call-ring-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(35, 165, 90, 0.55); } 50% { box-shadow: 0 0 0 8px rgba(35, 165, 90, 0); } }
@media (prefers-reduced-motion: reduce) {
  .call-ring, .call-ring__face .avatar { animation: none; }
}

.tag-ask { position: fixed; bottom: 96px; left: 50%; z-index: 6500; display: flex; align-items: center; gap: 0.75rem; width: min(560px, calc(100vw - 24px)); padding: 0.8rem 0.9rem; border: 1px solid rgba(185, 166, 255, 0.35); border-radius: 14px; background: #1a1830; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45); transform: translateX(-50%); }
.tag-ask .server-tag { flex: none; font-size: 0.9rem; }
.tag-ask__text { display: flex; flex: 1; flex-direction: column; min-width: 0; line-height: 1.3; }
.tag-ask__text small { color: var(--muted); font-size: 0.78rem; }
.tag-ask .btn { flex: none; white-space: nowrap; }
@media (max-width: 560px) { .tag-ask { flex-wrap: wrap; } .tag-ask__text { flex-basis: calc(100% - 4rem); } }


/* Privater Kanal: Auswahl Rolle + Mitglieder */
.switch-row b .ico { width: 0.95rem; height: 0.95rem; margin-right: 0.2rem; vertical-align: -0.12rem; }
.access-picker { display: flex; flex-direction: column; gap: 0.35rem; margin: 0.2rem 0 0.4rem; padding: 0.7rem; border: 1px solid var(--line-2); border-radius: 12px; background: rgba(255, 255, 255, 0.02); }
.access-picker[hidden] { display: none; }
.access-members { display: flex; flex-direction: column; gap: 0.15rem; max-height: 220px; overflow-y: auto; }
.access-member { display: flex; align-items: center; gap: 0.55rem; padding: 0.3rem 0.4rem; border-radius: 8px; cursor: pointer; }
.access-member:hover { background: rgba(255, 255, 255, 0.05); }
.access-member[hidden] { display: none; }
.access-member .avatar { width: 26px; height: 26px; flex-shrink: 0; }
.access-member span { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.access-member small { color: var(--muted); font-size: 0.74rem; }
.access-member input { flex: none; }

.ch-lock { display: inline-flex; margin-left: 0.3rem; color: var(--muted); vertical-align: -0.1rem; }
.ch-lock .ico { width: 0.75rem; height: 0.75rem; }


/* Fragen der Windows-App im Schnack-Design */
.desk-ask { position: fixed; inset: 0; z-index: 8000; display: grid; place-items: center; padding: 1rem; background: rgba(8, 7, 14, 0.6); animation: desk-ask-fade 0.15s ease-out; }
.desk-ask__card { width: min(420px, 100%); padding: 1.1rem 1.2rem 1rem; border: 1px solid rgba(185, 166, 255, 0.3); border-radius: 16px; background: #1a1830; color: #f2f0fb; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55); }
.desk-ask--warn .desk-ask__card { border-color: rgba(248, 113, 113, 0.45); }
.desk-ask__head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.6rem; color: #b9a6ff; font-size: 0.78rem; font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase; }
.desk-ask__logo { width: 22px; height: 22px; border-radius: 6px; }
.desk-ask h3 { margin: 0 0 0.35rem; font-size: 1.08rem; }
.desk-ask p { margin: 0 0 0.9rem; color: #cfcbe3; font-size: 0.9rem; line-height: 1.45; }
.desk-ask__actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.9rem; }
@keyframes desk-ask-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .desk-ask { animation: none; } }

/* Grundrollen in den Server-Einstellungen */
.roles-sub { margin: 1.1rem 0 0.5rem; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.base-roles { display: flex; flex-direction: column; gap: 0.4rem; }
.base-role {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.6rem;
  border-radius: 10px;
  border: 1px solid transparent;
  border-left: 3px solid var(--role);
  background: rgba(255, 255, 255, 0.03);
}
.base-role.is-join { border-color: rgba(141, 107, 255, 0.35); border-left-color: var(--role); background: rgba(141, 107, 255, 0.07); }
.base-role input[type="color"] { flex: none; width: 32px; height: 28px; }
.base-role__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.base-role__name { width: 100%; max-width: 16rem; padding: 0.25rem 0.45rem; font-weight: 600; color: var(--role); background: transparent; border: 1px solid transparent; border-radius: 6px; }
.base-role__name::placeholder { color: var(--role); opacity: 1; }
.base-role__name:hover, .base-role__name:focus { border-color: var(--line); background: rgba(0, 0, 0, 0.2); }
.base-role__main small { padding-left: 0.45rem; color: var(--muted); font-size: 0.78rem; }
.base-role__count { flex: none; color: var(--muted); font-size: 0.78rem; }
.base-role__join { flex: none; display: inline-flex; align-items: center; gap: 0.35rem; margin: 0; min-width: 7.5rem; font-size: 0.8rem; color: var(--muted); cursor: pointer; }
.base-role.is-join .base-role__join { color: var(--text); font-weight: 600; }
.base-role__join--fixed { cursor: default; font-size: 0.75rem; opacity: 0.7; }
@media (max-width: 640px) {
  .base-role { flex-wrap: wrap; }
  .base-role__count { order: 3; }
  .base-role__join { order: 4; min-width: 0; margin-left: auto; }
}.base-role__join span { white-space: nowrap; }
.role-row { flex-wrap: wrap; }
.role-perms { flex-basis: 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 0.35rem 0.8rem; padding: 0.45rem 0.2rem 0.2rem; border-top: 1px solid var(--line); margin-top: 0.2rem; }
.role-perm { display: flex; align-items: flex-start; gap: 0.5rem; margin: 0; cursor: pointer; }
.role-perm .switch { flex: none; transform: scale(0.8); margin-top: 0.1rem; }
.role-perm span { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.role-perm b { font-size: 0.82rem; }
.role-perm small { color: var(--muted); font-size: 0.74rem; line-height: 1.3; }.role-row__name { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 30px; padding: 0.25rem 0.45rem; text-align: left; background: transparent; border: 1px solid transparent; border-radius: 6px; cursor: pointer; }
.role-row__name:hover { border-color: var(--line); background: rgba(0, 0, 0, 0.2); }
.role-row__name svg { flex: none; width: 13px; height: 13px; opacity: 0.55; }
/* Übersicht: zwei Spalten auf breiten Bildschirmen, Freundesknöpfe erst bei Berührung */
.tisch-col { display: contents; }
.tisch-card--bday { order: 9; }
@media (min-width: 1180px) {
  .tisch {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    box-sizing: border-box;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  .tisch-col { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; }
  .tisch-card--bday { order: 0; }
}
.friend-row__actions { display: flex; flex: none; align-items: center; gap: 0.1rem; }
@media (hover: hover) and (pointer: fine) {
  .friend-row--hover { border-radius: 8px; }
  .friend-row--hover:hover, .friend-row--hover:focus-within { background: rgba(255, 255, 255, 0.04); }
  .friend-row--hover .friend-row__actions {
    position: absolute;
    top: 50%;
    right: 0.15rem;
    transform: translateY(-50%);
    padding-left: 1.4rem;
    background: linear-gradient(to right, transparent, #1a1926 1.2rem);
    opacity: 0;
    pointer-events: none;
    transition: opacity 120ms;
  }
  .friend-row--hover:hover .friend-row__actions,
  .friend-row--hover:focus-within .friend-row__actions { opacity: 1; pointer-events: auto; }
}
.whats-new__when { margin: 0.9rem 0 0.35rem; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }

.mentions[hidden], .switch-row[hidden] { display: none; }