/* ---- Design tokens -------------------------------------------------
   Farben: Navy #0B1120 (bg), Panel #131C2E, Accent Amber #FF4D8D,
   Text #E4E9F0, Muted #6B7A99, Success/On-Air #34D399, Fehler #F87171
   Type: 'JetBrains Mono' fürs "Funkgerät"-Feeling (Header, Callsigns,
   Log-Zeitstempel), 'Inter' für Fließtext/Nachrichten.
------------------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Inter:wght@400;500;600&display=swap');

:root {
  /* Neue Farbwelt: dunkles Violett statt Marineblau, Pink-zu-Lila-Verlauf als Akzent statt
     schlichtem Amber — deutlich lebendiger/moderner, spricht eher junges Publikum an. */
  --bg: #0B0F1A;
  --panel: #161320;
  --panel-2: #120F1A;
  --border: #2A2438;
  --accent: #FF4D8D;
  --accent-2: #8B5CF6;
  --accent-dim: #7a2d4f;
  --gradient: linear-gradient(135deg, #FF4D8D 0%, #C24DFF 55%, #8B5CF6 100%);
  --text: #F1EAFB;
  --muted: #8C82A8;
  --success: #34D399;
  --error: #F87171;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --sans: 'Inter', system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
}
body {
  display: flex;
  flex-direction: column;
  /* Verhindert zuverlässig, dass mobile Browser (v.a. iOS) beim Fokussieren des
     Eingabefelds die GESAMTE Seite nach oben scrollen, um die Tastatur Platz zu
     machen — dadurch verschwand der Header aus dem sichtbaren Bereich. Mit
     position:fixed gibt es rein gar nichts mehr, das auf Body-Ebene scrollen
     könnte; nur die dafür vorgesehenen inneren Bereiche (.log, .sidebar, ...)
     scrollen noch, der Header bleibt garantiert stehen. */
  position: fixed;
  inset: 0;
  width: 100%;
}

.hidden { display: none !important; }

/* ---- Login ---- */
.overlay {
  position: fixed;
  inset: 0;
  overflow-y: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 50% 0%, #16213a 0%, var(--bg) 60%);
}

.login-stage {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 20px;
}

.login-card {
  width: min(360px, 90vw);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 32px 28px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  position: relative;
  overflow: hidden;
}
/* Dezenter, animierter Glow-Rand — modern, ohne aufdringlich zu sein. */
.login-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 6px;
  padding: 1px;
  background: linear-gradient(120deg, transparent, rgba(255,77,141,0.4), transparent);
  background-size: 200% 200%;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: cardGlow 4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes cardGlow { 0%, 100% { background-position: 0% 0%; } 50% { background-position: 100% 100%; } }

.login-title {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: 6px;
  color: var(--accent);
}

.login-sub {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-top: 4px;
  margin-bottom: 24px;
}

.login-slogan {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  background: linear-gradient(90deg, #8B5CF6, #FF4D8D, #C24DFF);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-top: 6px;
  margin-bottom: 22px;
}

.login-side-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: min(320px, 90vw);
}

.login-card input {
  width: 100%;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 11px 12px;
  color: var(--text);
  font-family: var(--sans);
  font-size: 14px;
  margin-bottom: 10px;
  outline: none;
}
.login-card input:focus { border-color: var(--accent); }

.login-card button:not(.tab-btn) {
  width: 100%;
  background: var(--gradient);
  color: #ffffff;
  border: none;
  border-radius: 4px;
  padding: 12px;
  font-family: var(--mono);
  font-weight: 700;
  letter-spacing: 2px;
  font-size: 13px;
  cursor: pointer;
  margin-top: 8px;
}
.login-card button:hover { filter: brightness(1.08); }
.login-card button:active { transform: scale(0.98); }

.login-forgot-link {
  display: block;
  margin-top: 10px;
  font-size: 12px;
  color: var(--muted);
  text-decoration: none;
}
.login-forgot-link:hover { color: var(--accent); text-decoration: underline; }

.login-hint {
  margin-top: 16px;
  font-size: 11px;
  color: var(--muted);
}
.login-hint code {
  background: var(--panel-2);
  padding: 1px 5px;
  border-radius: 3px;
  color: var(--accent);
}

.tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  background: var(--panel-2);
  border-radius: 4px;
  padding: 3px;
}
.tab-btn {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 8px;
  border-radius: 3px;
  cursor: pointer;
}
.tab-btn.active { background: var(--panel); color: var(--accent); }

.tab-pane { display: none; }
.tab-pane.active { display: block; }

.login-error {
  color: var(--error);
  font-size: 12px;
  margin-top: 10px;
  min-height: 14px;
}

/* ---- App layout ---- */
.app {
  display: grid;
  grid-template-columns: 240px 1fr;
  flex: 1;
  min-height: 0;
}

/* Ticker liegt jetzt außerhalb von .app, über die volle Bildschirmbreite */
.news-ticker { flex-shrink: 0; width: 100%; }

.sidebar {
  background: var(--panel-2);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--accent-dim) transparent;
}
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-thumb { background: var(--accent-dim); border-radius: 3px; }

.sidebar-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px;
  border-bottom: 1px solid var(--border);
}

.brand {
  font-family: var(--mono);
  font-weight: 700;
  letter-spacing: 3px;
  font-size: 13px;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--muted);
}
.dot.on-air {
  background: var(--success);
  box-shadow: 0 0 0 0 rgba(52,211,153,0.6);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(52,211,153,0.5); }
  70% { box-shadow: 0 0 0 6px rgba(52,211,153,0); }
  100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); }
}

.sidebar-section {
  padding: 12px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.sidebar-label {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
  padding: 0 6px;
}

.room-list, .presence-list { display: flex; flex-direction: column; gap: 2px; }

/* ---- Kanalliste im Discord-Stil: dezent, mit Akzentbalken bei aktivem Raum ---- */
.room-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 13.5px;
  cursor: pointer;
  color: var(--muted);
  position: relative;
  transition: background 0.12s ease, color 0.12s ease;
}
.room-item-label { display: flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-hash { color: var(--muted); font-weight: 700; opacity: 0.7; }
.room-item:hover { background: rgba(255,255,255,0.05); color: var(--text); }
.room-item.active {
  background: rgba(255,77,141,0.14);
  color: var(--accent);
  font-weight: 600;
}
.room-item.active .room-hash { color: var(--accent); opacity: 1; }
.room-item.active::before {
  content: '';
  position: absolute;
  left: -10px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  background: var(--accent);
  border-radius: 0 3px 3px 0;
}
.room-item .count {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--muted);
  background: rgba(255,255,255,0.06);
  padding: 1px 6px;
  border-radius: 8px;
  flex-shrink: 0;
}
.room-item.active .count { background: rgba(255,77,141,0.18); color: var(--accent); }

/* ---- Mini-Avatare (Initialen-Kreise) — Presence, Freunde ---- */
.mini-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-weight: 700;
  border: 1px solid;
  border-radius: 50%;
  flex-shrink: 0;
}
.mini-avatar-sm { width: 22px; height: 22px; font-size: 9px; }

.presence-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.12s ease;
}
.presence-item:hover { background: rgba(255,77,141,0.1); }
.presence-item .away-tag {
  font-size: 10px;
  color: var(--muted);
  font-family: var(--mono);
}

/* ---- Freunde-Widget ---- */
.friend-widget-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.12s ease;
}
.friend-widget-row:hover { background: rgba(255,255,255,0.05); }
.friend-widget-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.friend-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.friend-dot-on { background: var(--success); box-shadow: 0 0 6px rgba(52,211,153,0.6); }
.friend-dot-off { background: var(--muted); opacity: 0.5; }

/* ---- Discord-artiger "Self"-Footer, unten in der Sidebar fixiert ---- */
.sidebar-self-footer {
  margin-top: auto;
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--panel);
  border-top: 1px solid var(--border);
}
.sidebar-self-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 11px;
  flex-shrink: 0;
}
.sidebar-self-info { flex: 1; min-width: 0; }
.sidebar-self-name {
  font-size: 13px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-self-role {
  font-size: 10px;
  color: var(--muted);
  font-family: var(--mono);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-self-icon-btn {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  cursor: pointer;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sidebar-self-icon-btn:hover { background: rgba(255,255,255,0.08); color: var(--text); }
.sidebar-self-icon-btn.danger:hover { background: rgba(248,113,113,0.15); color: var(--error); }

.role-tag {
  font-family: Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.5px;
}

.line.whois-card {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 10px 14px;
  margin: 6px 0;
  display: block;
}
.line.whois-card .whois-body { font-size: 13px; line-height: 1.7; color: var(--text); }
/* Alle Detail-Zeilen (egal ob online/offline) garantiert exakt gleich eingerückt/bündig,
   statt sich auf Standard-Div-Abstände zu verlassen. */
.line.whois-card .whois-body > div { margin: 0; padding: 0; }
.line.whois-card .whois-title {
  font-family: var(--mono);
  color: #ffffff;
  font-size: 14px;
  margin-bottom: 4px;
}
.line.whois-card .whois-name { font-weight: 700; }
/* "online seit / derzeit nicht online" bewusst OHNE eigene Formatierung — reiner
   Fließtext wie der Rest der Karte (kein Weiß-Override, keine Fettung mehr). */
/* Rang in der /w-Karte: gelb wie überall (.role-tag-Grundfarbe), aber ohne den
   Schriftart-Bruch (Arial) der Grundregel — soll wie normaler Fließtext wirken, nur
   fett + gelb, kein abgesetztes Badge. */
/* Rang-Badge (Admin/SuperUser/...) an /w-Karte und Raumliste angleichen: dieselbe
   Schriftart/-größe/-abstand wie der Rest des Textes, nur fett + gelb — kein Arial-Bruch,
   keine abweichende Größe mehr (vorher 12px vs. 13px Umgebungstext = "verrutscht"). */
.line.whois-card .role-tag,
.line.room-overview .role-tag {
  font-family: inherit;
  font-size: inherit;
  letter-spacing: normal;
}

.line.room-overview {
  display: block;
  color: var(--text);
  padding: 4px 0;
}
.line.room-overview > div { margin: 2px 0; }

.sidebar-footer {
  margin-top: auto;
  padding: 14px 16px;
  border-top: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 11px;
}
.self-name { display: block; color: var(--accent); font-weight: 700; }
.self-room { color: var(--muted); }

.community-buttons { display: flex; flex-direction: column; gap: 6px; }
.community-btn {
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--sans);
  font-size: 12px;
  text-align: left;
  padding: 8px 10px;
  border-radius: 4px;
  cursor: pointer;
}
.community-btn:hover { border-color: var(--accent); color: var(--accent); }

.logout-btn {
  margin-top: 10px;
  width: 100%;
  background: rgba(248,113,113,0.12);
  border: 1px solid var(--error);
  color: var(--error);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 6px;
  border-radius: 4px;
  cursor: pointer;
}
.logout-btn:hover { background: rgba(248,113,113,0.22); }

/* ---- Modal ---- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
.modal-card {
  width: min(480px, 92vw);
  max-height: 80vh;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  font-family: var(--mono);
  font-weight: 700;
  color: var(--accent);
}
.modal-header button {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 14px;
}
.modal-header button:hover { color: var(--text); }
.modal-body { padding: 16px 18px; overflow-y: auto; font-size: 13px; }

.member-list, .gb-list { display: flex; flex-direction: column; gap: 8px; }

/* ---- Team-Übersicht: nach Rang gruppiert mit Aufgabenbeschreibung ---- */
.team-group { margin-bottom: 20px; }
.team-group:last-child { margin-bottom: 0; }
.team-group-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 4px;
}
.team-group-desc {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: 10px;
}
.member-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: 4px;
  cursor: pointer;
  background: var(--panel-2);
}
.member-row:hover { outline: 1px solid var(--accent); }
.member-name { flex: 1; }
.member-meta { font-family: var(--mono); font-size: 11px; color: var(--muted); }

.swatch.big { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; }

.profile-header { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.profile-name { font-weight: 700; font-size: 15px; }
.profile-meta { font-size: 11px; color: var(--muted); margin-top: 2px; }
.profile-bio { margin-bottom: 16px; color: var(--text); }

.profile-edit { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.profile-edit textarea {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  padding: 8px;
  font-family: var(--sans);
  font-size: 13px;
  resize: vertical;
  min-height: 60px;
}
.profile-edit input, .gb-form input, .pin-form input {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  padding: 8px;
  font-family: var(--sans);
  font-size: 13px;
}
.profile-edit button, .gb-form button {
  background: var(--gradient);
  color: #ffffff;
  border: none;
  border-radius: 4px;
  padding: 8px;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 11px;
  cursor: pointer;
}

.gb-header { font-family: var(--mono); font-size: 11px; letter-spacing: 1px; color: var(--muted); margin: 6px 0 8px; text-transform: uppercase; }
.gb-entry { background: var(--panel-2); border-radius: 4px; padding: 8px 10px; position: relative; }
.gb-author { font-weight: 700; margin-right: 8px; }
.gb-date { font-size: 10px; color: var(--muted); font-family: var(--mono); }
.gb-entry .pin-delete-btn, .gb-entry .gb-delete-btn {
  float: right; padding: 2px 8px; font-size: 12px; line-height: 1.4;
}
.forum-row-mod-actions { display: flex; gap: 6px; align-items: center; margin-left: 8px; }
.forum-row-mod-actions .admin-btn { padding: 3px 8px; font-size: 12px; }
.forum-post-meta .post-delete-btn { margin-left: 10px; padding: 1px 8px; font-size: 11px; vertical-align: middle; }
.gb-text { margin-top: 4px; }
.gb-form { display: flex; gap: 8px; margin-top: 12px; }
.gb-form input { flex: 1; }

.empty { color: var(--muted); font-style: italic; font-size: 12px; }

/* ---- Main ---- */
.main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  height: 100%;
}

.topbar {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-shrink: 0;
}
.topbar-room {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 15px;
}
.topbar-room .hash { color: var(--accent); margin-right: 2px; }
.topbar-topic { color: var(--muted); font-size: 13px; }

.log {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  /* Scrollbar unsichtbar, aber Scrollen/Wischen bleibt normal möglich */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* alte Edge/IE */
}
.log::-webkit-scrollbar { display: none; } /* Chrome, Safari, WebView */

.line {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 5px 8px;
  margin: 0 -8px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.5;
  animation: fadeIn 0.15s ease-out;
  transition: background 0.1s ease;
}
.line:hover { background: rgba(255,255,255,0.025); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: translateY(0); } }

.line .mini-avatar-sm { margin-top: 1px; }

.line .ts {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  flex-shrink: 0;
  padding-top: 2px;
  width: 40px;
}
.line .name { font-weight: 600; flex-shrink: 0; }
.line .text { flex: 1; word-break: break-word; }
.chat-image-link { display: block; margin-top: 4px; }
.chat-image-preview {
  max-width: 240px;
  max-height: 240px;
  border-radius: 10px;
  border: 1px solid var(--border);
  display: block;
  cursor: pointer;
  transition: filter 0.1s ease;
}
.chat-image-preview:hover { filter: brightness(1.05); }
/* Systemzeilen (Beitritt/Verlassen etc.) haben keinen Avatar — Zeitstempel-Spalte etwas
   einrücken, damit der Text trotzdem in derselben Spalte wie normale Nachrichten startet. */
.line.system .ts, .line.system-italic .ts, .line.system-roomchange .ts, .line.system-error .ts { margin-left: 32px; }

/* Allgemeine Systemnachrichten (Mod-Aktionen wie "X knebelt Y", Ernennungen etc.):
   fett, NICHT kursiv — kursiv bleibt exklusiv Raum-/Chatwechsel vorbehalten. */
.line.system { font-family: Arial, sans-serif; color: #ffffff; font-size: 12px; font-style: italic; font-weight: 700; }
.line.system .ts { visibility: hidden; }

/* Chat betreten/verlassen: nur kursiv, nicht fett. */
.line.system-italic { font-family: Arial, sans-serif; color: #ffffff; font-size: 12px; font-style: italic; font-weight: 400; }
.line.system-italic .ts { visibility: hidden; }

/* Raumwechsel: nur kursiv, Raumname darin fett (siehe appendLine). */
.line.system-roomchange { font-family: Arial, sans-serif; color: #ffffff; font-size: 12px; font-style: italic; font-weight: 400; }
.line.system-roomchange .ts { visibility: hidden; }
.line.system-roomchange b { font-weight: 700; }

/* Fehlermeldungen ("Sorry, aber ...") — rein clientseitig, nie gespeichert. Deutlich
   abgehoben: größer, eigene Akzentfarbe, damit man sie nicht mit normalen Systemmeldungen
   verwechselt. */
.line.system-error {
  font-family: Arial, sans-serif;
  color: #ff6b6b;
  font-size: 13px;
  font-style: italic;
  font-weight: 700;
  background: rgba(248,113,113,0.08);
  border-left: 3px solid var(--error);
  padding: 6px 10px;
  border-radius: 4px;
  margin: 2px 0;
}
.line.system-error .ts { visibility: hidden; }

.line.action .text { font-style: italic; font-weight: 700; }
.line.action .name { display: none; }

.line.shout .text { font-weight: 700; letter-spacing: 0.5px; }

.line.whisper { background: rgba(255,77,141,0.06); border-left: 2px solid var(--accent); padding-left: 10px; border-radius: 2px; }
.line.whisper .text { color: var(--accent); }

.typing-indicator {
  height: 20px;
  padding: 0 20px;
  font-size: 12px;
  color: var(--muted);
  font-family: var(--mono);
  flex-shrink: 0;
}

.composer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--panel-2);
}
.composer-input-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 10px 16px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.composer-input-wrap:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255,77,141,0.12);
}
.composer-prompt {
  font-family: var(--mono);
  color: var(--accent);
  font-weight: 700;
}
.composer input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 15px;
  outline: none;
  font-family: var(--sans);
}
.composer input::placeholder { color: var(--muted); }
.composer-send-btn {
  background: var(--gradient);
  color: #ffffff;
  border: none;
  border-radius: 50%;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.1s ease, filter 0.1s ease;
  box-shadow: 0 2px 10px rgba(255,77,141,0.3);
}
.composer-send-btn:hover { filter: brightness(1.08); }
.composer-send-btn:active { transform: scale(0.92); }

/* Scrollbars */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

/* ---- Responsive ---- */
.mobile-menu-btn {
  display: none;
  background: var(--gradient);
  border: none;
  color: #ffffff;
  font-size: 18px;
  font-weight: 700;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 2px 10px rgba(255,77,141,0.35);
}
.mobile-menu-btn:hover { filter: brightness(1.08); }
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 299;
}

@media (max-width: 720px) {
  .app { grid-template-columns: 1fr; }
  .mobile-menu-btn { display: inline-flex; align-items: center; justify-content: center; }

  /* ---- Login-Screen: mobile-first, "sofort anmelden" statt erst scrollen müssen ----
     Der Feature-/Vorschau-Block (Was wir bieten, Gerade los im Chat, Aktivität, Team)
     kam vorher VOR dem eigentlichen Formular in den Blick bzw. machte die Gesamthöhe so
     groß, dass zentriertes Layout + overflow-auto das Formular aus dem sichtbaren Bereich
     schob. Auf dem Handy zählt: Formular sofort sichtbar, kein Scrollen nötig. Der Block
     bleibt erreichbar (unten, wer neugierig ist), drängt sich aber nicht mehr auf. */
  .overlay { align-items: flex-start; padding-top: 24px; padding-bottom: 24px; }
  .login-stage { flex-direction: column; align-items: center; }
  .login-card { padding: 22px 20px; width: min(340px, 92vw); }
  .login-logo { max-width: 90px; }
  .login-slogan { font-size: 12px; margin-bottom: 16px; }
  .tabs { margin-bottom: 14px; }
  .login-card input { padding: 12px; margin-bottom: 8px; font-size: 16px; } /* 16px verhindert Zoom beim Fokus auf iOS */
  .login-side-col { order: 2; opacity: 0.85; }
  .login-side-col .features-card { display: none; } /* Feature-Liste: erst nach dem Formular relevant, nicht davor */

  /* Sidebar wird auf dem Handy zur ausklappbaren Schublade statt komplett zu verschwinden —
     Räume, Chatter und Freunde müssen erreichbar bleiben. */
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 82vw;
    max-width: 300px;
    z-index: 300;
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    box-shadow: 8px 0 30px rgba(0,0,0,0.5);
  }
  .sidebar.sidebar-open { transform: translateX(0); }
  .sidebar-backdrop.visible { display: block; }

  /* Navbar-Dropdowns: auf schmalen Screens volle Breite, damit Text nicht abgeschnitten wird */
  .chat-navbar { padding: 5px 10px; gap: 8px; min-height: 0; }
  .mobile-menu-btn { width: 32px; height: 32px; font-size: 15px; }
  .brand { font-size: 11px; }
  .chat-navbar-links { gap: 10px; }
  .chat-navbar .nav-dropdown-menu { min-width: 220px; left: 0; right: auto; }
  .chat-navbar-right { gap: 6px; }
  .chat-navbar-right .self-room { display: none; } /* spart Platz, Name reicht auf schmalen Screens */
  .logout-btn { padding: 5px 8px; font-size: 10px; }

  .composer { padding: 10px 12px; }
  .topbar { padding: 10px 12px; flex-wrap: wrap; gap: 4px; }
  .log { padding: 10px 12px; }
}

@media (max-width: 480px) {
  .chat-navbar-right .self-name { display: none; } /* auf sehr schmalen Screens auch den Namen ausblenden */
  .line .ts { width: 38px; font-size: 10px; }
}


/* ---- Community-Vorschau (Login-Screen) ---- */
.community-preview {
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 20px;
  position: relative;
}
.community-preview::after,
.home-stat-card::after,
.sidebar-widget::after {
  content: '';
  position: absolute;
  top: 10px;
  right: 12px;
  width: 16px;
  height: 16px;
  background-image: url('assets/icon.png');
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.12;
  pointer-events: none;
}
.home-stat-card, .sidebar-widget { position: relative; }
.cp-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.cp-title {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
}
.cp-summary {
  font-size: 13px;
  color: var(--text);
  margin-bottom: 14px;
}
.cp-summary b { color: var(--accent); }
.cp-rooms { display: flex; flex-direction: column; gap: 6px; }

.cp-activity { display: flex; flex-direction: column; gap: 8px; }
.cp-activity-item { font-size: 12px; color: var(--text); padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.cp-activity-item:last-child { border-bottom: none; padding-bottom: 0; }
.cp-activity-item .muted { color: var(--muted); }

.cp-team { display: flex; flex-direction: column; gap: 8px; }
.cp-team-item { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.cp-team-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); flex-shrink: 0; }
.cp-team-dot.online { background: var(--success); box-shadow: 0 0 6px var(--success); }
.cp-team-name { font-weight: 600; }
.cp-team-meta { color: var(--muted); font-size: 11px; margin-left: auto; }
.cp-room-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--panel-2);
  border-radius: 4px;
  padding: 7px 10px;
  font-size: 12px;
}
.cp-room-row .cp-room-name { font-family: var(--mono); }
.cp-room-row .cp-room-count { font-family: var(--mono); color: var(--muted); }
.cp-empty { color: var(--muted); font-size: 12px; font-style: italic; }

@media (max-width: 720px) {
  .login-stage { flex-direction: column; align-items: center; }
}

/* ---- Forum ---- */
.forum-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 200;
  display: flex;
  flex-direction: column;
}
.forum-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.forum-breadcrumb {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--muted);
}
.forum-breadcrumb .crumb {
  color: var(--accent);
  cursor: pointer;
}
.forum-breadcrumb .crumb:hover { text-decoration: underline; }
.forum-breadcrumb .sep { margin: 0 6px; color: var(--border); }
#forum-close {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
}
#forum-close:hover { color: var(--error); border-color: var(--error); }

.forum-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  max-width: 900px;
  margin: 0 auto;
  width: 100%;
}

.forum-category { margin-bottom: 24px; }
.forum-category-title {
  font-family: var(--mono);
  font-weight: 700;
  color: var(--accent);
  font-size: 14px;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

.forum-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 14px 16px;
  margin-bottom: 8px;
  cursor: pointer;
}
.forum-row:hover { border-color: var(--accent); }
.forum-row-main { flex: 1; min-width: 0; }
.forum-row-title { font-weight: 600; font-size: 14px; }
.forum-row-desc { color: var(--muted); font-size: 12px; margin-top: 2px; }
.forum-row-stats {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  text-align: right;
  flex-shrink: 0;
  min-width: 90px;
}
.forum-row-lastpost {
  font-size: 11px;
  color: var(--muted);
  text-align: right;
  flex-shrink: 0;
  min-width: 160px;
  display: none;
}
@media (min-width: 640px) { .forum-row-lastpost { display: block; } }

.topic-row { align-items: flex-start; }
.topic-row .pin-tag {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  color: var(--accent);
  background: rgba(255,77,141,0.15);
  padding: 1px 5px;
  border-radius: 3px;
  margin-right: 6px;
}
.topic-row .lock-tag { margin-right: 4px; }

.forum-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.forum-new-btn {
  background: var(--gradient);
  color: #ffffff;
  border: none;
  border-radius: 4px;
  padding: 8px 14px;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 11px;
  cursor: pointer;
}

.forum-pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
  font-family: var(--mono);
  font-size: 12px;
}
.forum-pagination button {
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
}
.forum-pagination button:disabled { opacity: 0.4; cursor: default; }
.forum-pagination .page-info { color: var(--muted); padding: 5px 0; }

.forum-post {
  display: flex;
  gap: 14px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 16px;
  margin-bottom: 10px;
}
.forum-post-author {
  width: 100px;
  flex-shrink: 0;
  text-align: center;
}
.forum-post-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  margin: 0 auto 6px;
  display: block;
  object-fit: cover;
  background: var(--panel-2);
}
.forum-post-name { font-weight: 700; font-size: 12px; word-break: break-word; }
.forum-post-body {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}
.forum-post-meta {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted);
  margin-bottom: 8px;
}

.forum-reply-form {
  margin-top: 16px;
}
.forum-reply-form textarea {
  width: 100%;
  min-height: 100px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  padding: 12px;
  font-family: var(--sans);
  font-size: 14px;
  resize: vertical;
  box-sizing: border-box;
}
.forum-reply-form button {
  margin-top: 8px;
  background: var(--gradient);
  color: #ffffff;
  border: none;
  border-radius: 4px;
  padding: 10px 18px;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
}
.forum-locked-notice {
  color: var(--error);
  font-size: 12px;
  font-family: var(--mono);
  margin-top: 12px;
}

.forum-newtopic-form input, .forum-newtopic-form textarea {
  width: 100%;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  padding: 10px 12px;
  font-family: var(--sans);
  font-size: 14px;
  box-sizing: border-box;
  margin-bottom: 10px;
}
.forum-newtopic-form textarea { min-height: 140px; resize: vertical; }

/* ---- Admin-Panel ---- */
.admin-tabs {
  display: flex;
  gap: 4px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.admin-tab-btn {
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 8px 14px;
  border-radius: 4px;
  cursor: pointer;
}
.admin-tab-btn.active { background: var(--accent); color: #ffffff; border-color: var(--accent); }

.admin-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.admin-stat-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 16px;
  text-align: center;
}
.admin-stat-value { font-family: var(--mono); font-size: 28px; font-weight: 700; color: var(--accent); }
.admin-stat-label { font-size: 11px; color: var(--muted); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.5px; }

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.admin-table th {
  text-align: left;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--muted);
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
}
.admin-table td {
  padding: 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.admin-table tr:hover td { background: var(--panel-2); }
.admin-online-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--muted);
  margin-right: 6px;
}
.admin-online-dot.on { background: var(--success); }

.admin-table select, .admin-inline-form input {
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 4px;
  padding: 5px 8px;
  font-family: var(--sans);
  font-size: 12px;
}
.admin-btn {
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 4px;
  padding: 5px 10px;
  font-family: var(--mono);
  font-size: 11px;
  cursor: pointer;
  margin-left: 4px;
}
.admin-btn:hover { border-color: var(--accent); color: var(--accent); }
.admin-btn.danger:hover { border-color: var(--error); color: var(--error); }

.admin-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.admin-section-title {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 14px;
  color: var(--accent);
}

.admin-inline-form {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 14px;
  margin-bottom: 20px;
}
.admin-inline-form label {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted);
  display: block;
  margin-bottom: 3px;
}
.admin-inline-form .field { display: flex; flex-direction: column; }
.admin-checkbox-field { flex-direction: row; align-items: center; gap: 6px; }

/* ---- Memo-Badge ---- */
.memo-badge {
  background: var(--error);
  color: #fff;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 10px;
  margin-left: 6px;
}

/* ---- User-Kontextmenü ---- */
.presence-name { cursor: pointer; }
.presence-name:hover { color: var(--accent); text-decoration: underline; }

.user-menu {
  position: fixed;
  z-index: 300;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.5);
  min-width: 200px;
  overflow: hidden;
}
.user-menu-header {
  padding: 10px 14px;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 12px;
  color: var(--accent);
  border-bottom: 1px solid var(--border);
}
.user-menu-item {
  padding: 9px 14px;
  font-size: 13px;
  cursor: pointer;
  color: var(--text);
}
.user-menu-item:hover { background: var(--panel-2); color: var(--accent); }
.user-menu-item.danger:hover { color: var(--error); }
.user-menu-empty { padding: 10px 14px; font-size: 12px; color: var(--muted); font-style: italic; }

/* ---- @Erwähnung ---- */
.line.mention {
  background: rgba(255,77,141,0.08);
  border-left: 2px solid var(--accent);
  padding-left: 8px;
  border-radius: 2px;
}

/* ---- Ungelesen-Punkt bei Räumen ---- */
.unread-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 6px;
}

/* ---- Slash-Befehl-Autovervollständigung ---- */
.cmd-autocomplete {
  border-top: 1px solid var(--border);
  background: var(--panel-2);
  max-height: 180px;
  overflow-y: auto;
}
.cmd-autocomplete-item {
  padding: 8px 20px;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  gap: 10px;
}
.cmd-autocomplete-item:hover, .cmd-autocomplete-item.active { background: var(--panel); }
.cmd-autocomplete-item .cmd-name { font-family: var(--mono); color: var(--accent); font-weight: 700; flex-shrink: 0; }
.cmd-autocomplete-item .cmd-desc { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Live-Umfragen (/poll) ---- */
.line.poll-card {
  display: block;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 14px 16px;
  margin: 8px 0;
}
.poll-question { font-weight: 700; font-size: 14px; margin-bottom: 2px; }
.poll-meta { font-size: 11px; color: var(--muted); font-family: var(--mono); margin-bottom: 10px; }
.poll-options { display: flex; flex-direction: column; gap: 6px; }
.poll-option {
  position: relative;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 8px 10px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  overflow: hidden;
}
.poll-option:hover { border-color: var(--accent); }
.poll-option.chosen { border-color: var(--accent); }
.poll-option-bar {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: rgba(255,77,141,0.12);
  transition: width 0.3s ease;
}
.poll-option-label { position: relative; z-index: 1; font-size: 13px; }
.poll-option-count { position: relative; z-index: 1; font-family: var(--mono); font-size: 11px; color: var(--muted); }

/* ============================================================
   GLASSMORPHISM-REDESIGN — abgerundete, transluzente Karten
   mit dezentem Blur, angelehnt an Smart-Home-Dashboard-Optik
   ============================================================ */

:root {
  --glass-bg: rgba(24, 33, 54, 0.6);
  --glass-bg-strong: rgba(24, 33, 54, 0.78);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-highlight: rgba(255, 255, 255, 0.04);
  --radius-lg: 22px;
  --radius-md: 16px;
  --radius-sm: 12px;
}

html, body {
  background:
    radial-gradient(ellipse 900px 500px at 15% -5%, rgba(255,77,141, 0.07) 0%, transparent 60%),
    radial-gradient(ellipse 900px 600px at 90% 10%, rgba(96, 165, 250, 0.06) 0%, transparent 55%),
    radial-gradient(ellipse 1000px 700px at 50% 110%, rgba(167, 139, 250, 0.05) 0%, transparent 55%),
    var(--bg);
  background-attachment: fixed;
}

/* ---- Karten: Login, Community-Vorschau ---- */
.login-card, .community-preview {
  background: var(--glass-bg-strong);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px rgba(0,0,0,0.45), inset 0 1px 0 var(--glass-highlight);
}

/* ---- Sidebar-Elemente ---- */
/* .room-item/.presence-item bewusst NICHT hier drin — die haben ihren eigenen, flachen
   Discord-artigen Stil weiter oben (kein Glass-Card-Look, nur Hover-Highlight). */
.community-btn {
  background: var(--glass-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  margin-bottom: 4px;
}

/* ---- Modals & Overlays ---- */
.modal-card {
  background: var(--glass-bg-strong);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 70px rgba(0,0,0,0.5), inset 0 1px 0 var(--glass-highlight);
}
.modal-header { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }

/* ---- Karten-Reihen überall: Mitglieder, Foren, Gästebuch, Rangliste, Räume ---- */
.member-row, .forum-row, .gb-entry, .admin-stat-card, .poll-card,
.line.whois-card, .line.room-overview, .cp-room-row {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-md) !important;
}
.member-row:hover { outline: none; border-color: rgba(255,77,141,0.35) !important; }
.forum-row:hover { border-color: rgba(255,77,141,0.35); }

/* ---- Buttons durchgängig abgerundet ---- */
.login-card button, .community-btn, .admin-btn, .forum-new-btn, .gb-form button,
.profile-edit button, .admin-inline-form button, #forum-close, #admin-close,
#login-btn, #register-btn, .composer button:not(.composer-send-btn), .tab-btn {
  border-radius: var(--radius-sm) !important;
}
.tabs { border-radius: var(--radius-sm); }

/* ---- Composer & Topbar leicht transparent ---- */
.composer, .topbar, .sidebar-header, .sidebar-footer, .admin-tabs, .forum-header {
  background: var(--glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.sidebar { background: rgba(19,28,46,0.7); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.app { background: transparent; }

/* ---- Forum & Admin: eigener, klar abgehobener Bereich ----
   Vorher war .forum-overlay transparent, wodurch der Chat durchschien und das Forum
   optisch nicht als eigener Bereich erkennbar war. Jetzt: deckender, anders getönter
   Hintergrund mit farbigem Rand oben, damit sofort klar ist "ich bin woanders". */
.forum-overlay {
  background:
    radial-gradient(ellipse 1000px 600px at 15% -10%, rgba(96,165,250,0.10) 0%, transparent 60%),
    radial-gradient(ellipse 900px 500px at 90% 5%, rgba(167,139,250,0.08) 0%, transparent 55%),
    #0E1728;
  border-top: 3px solid var(--accent);
}
#admin-overlay {
  background:
    radial-gradient(ellipse 1000px 600px at 15% -10%, rgba(248,113,113,0.10) 0%, transparent 60%),
    #14101A;
  border-top: 3px solid var(--error);
}

/* Bildschirmweiter Hintergrund unter der App, damit die Transparenz was zum Zeigen hat */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 700px 500px at 10% 0%, rgba(255,77,141,0.05), transparent 60%),
    radial-gradient(ellipse 800px 600px at 100% 100%, rgba(96,165,250,0.05), transparent 60%);
}

/* ---- Profil-Redesign ---- */
.profile-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 28px 20px 20px;
  border-radius: var(--radius-md);
  margin-bottom: 18px;
  border: 1px solid var(--glass-border);
}
.profile-avatar-ring {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.profile-avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.profile-avatar-fallback {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 26px;
}
.profile-name-big {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 20px;
  margin-bottom: 8px;
}
.profile-badges { display: flex; gap: 6px; align-items: center; justify-content: center; flex-wrap: wrap; }
.level-pill {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid;
  text-transform: uppercase;
}

.profile-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}
.profile-stat {
  background: var(--glass-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  padding: 12px 8px;
  text-align: center;
}
.profile-stat-value { font-family: var(--mono); font-weight: 700; font-size: 15px; color: var(--accent); }
.profile-stat-label { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 3px; }

/* ============================================================
   STARTSEITE — eigene Farbpalette: Orange (Überschriften),
   Grün (Akzent/Werte), Weiß (Fließtext)
   ============================================================ */
.home-screen {
  position: fixed;
  inset: 0;
  z-index: 50;
  overflow-y: auto;
  background:
    radial-gradient(ellipse 900px 500px at 15% -5%, rgba(255,77,141,0.10) 0%, transparent 60%),
    radial-gradient(ellipse 900px 600px at 90% 10%, rgba(139,92,246,0.06) 0%, transparent 55%),
    var(--bg);
  animation: homeGlow 12s ease-in-out infinite alternate;
}
@keyframes homeGlow {
  0% {
    background:
      radial-gradient(ellipse 900px 500px at 15% -5%, rgba(255,77,141,0.10) 0%, transparent 60%),
      radial-gradient(ellipse 900px 600px at 90% 10%, rgba(139,92,246,0.06) 0%, transparent 55%),
      var(--bg);
  }
  100% {
    background:
      radial-gradient(ellipse 900px 500px at 25% 5%, rgba(255,77,141,0.14) 0%, transparent 60%),
      radial-gradient(ellipse 900px 600px at 80% 20%, rgba(139,92,246,0.09) 0%, transparent 55%),
      var(--bg);
  }
}
.home-inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 48px 20px 60px;
}
.home-header { text-align: center; margin-bottom: 28px; }
.home-avatar-ring {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 3px #8B5CF6, 0 0 26px 4px rgba(255,77,141,0.4);
  overflow: hidden;
}
.home-avatar-fallback {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,77,141,0.15);
  color: #8B5CF6;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 24px;
}
.home-avatar-ring img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.home-greeting {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 26px;
  color: #8B5CF6;
  letter-spacing: 1px;
}
.home-level-pill {
  display: inline-block;
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 12px;
  border-radius: 20px;
  border: 1px solid rgba(139,92,246,0.4);
  color: #C24DFF;
  background: rgba(139,92,246,0.08);
}
.home-sub { color: #ffffff; font-size: 13px; margin-top: 8px; opacity: 0.85; }

.home-activity-feed {
  background: var(--glass-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  margin-top: 24px;
  margin-bottom: 20px;
}
.home-activity-feed-title { font-family: var(--mono); font-size: 11px; color: #C24DFF; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 10px; }
.home-activity-item { padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 12px; color: #fff; }
.home-activity-item:last-child { border-bottom: none; }
.home-activity-item .muted { color: var(--muted); }

.home-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
  margin-bottom: 28px;
}
.home-stat-card {
  background: var(--glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(139,92,246,0.15);
  border-radius: var(--radius-md);
  padding: 16px;
  text-align: center;
}
.home-stat-value { font-family: var(--mono); font-weight: 700; font-size: 24px; color: #C24DFF; text-shadow: 0 0 12px rgba(139,92,246,0.35); }
.home-stat-label { color: #ffffff; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; margin-top: 4px; opacity: 0.8; }

.home-chat-btn {
  display: block;
  width: 100%;
  background: linear-gradient(135deg, #8B5CF6, #ff8c00);
  color: #1a0d00;
  border: none;
  border-radius: var(--radius-md);
  padding: 18px;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 2px;
  cursor: pointer;
  margin-bottom: 28px;
  box-shadow: 0 8px 28px rgba(255,77,141,0.35);
  transition: transform 0.15s ease;
}
.home-chat-btn:hover { transform: translateY(-2px); }

.home-nav-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 28px;
}
.home-nav-card {
  background: var(--glass-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-md);
  padding: 18px 12px;
  color: #ffffff;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.home-nav-card:hover { border-color: #C24DFF; transform: translateY(-2px); }
.home-nav-icon { font-size: 24px; }

.home-logout {
  display: block;
  margin: 0 auto;
  background: rgba(248,113,113,0.12);
  border: 1px solid var(--error);
  color: var(--error);
  opacity: 1;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 11px;
  padding: 8px 20px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.home-logout:hover { background: rgba(248,113,113,0.22); }

.sidebar-home-btn {
  margin-left: auto;
  background: rgba(255,77,141,0.12);
  border: 1px solid var(--accent);
  color: var(--accent);
  font-size: 16px;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  opacity: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sidebar-home-btn:hover { background: rgba(255,77,141,0.22); }

/* ---- Profil-Tabs & Erfolge ---- */
.profile-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  background: var(--panel-2);
  border-radius: var(--radius-sm);
  padding: 3px;
}
.profile-tab-btn {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  padding: 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.profile-tab-btn.active { background: var(--panel); color: var(--accent); }

.achievement-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px;
}
.achievement-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  padding: 14px 10px;
  text-align: center;
  opacity: 0.35;
  filter: grayscale(1);
}
.achievement-card.unlocked { opacity: 1; filter: none; border-color: rgba(255,77,141,0.3); }
.achievement-icon { font-size: 26px; margin-bottom: 6px; }
.achievement-title { font-weight: 700; font-size: 12px; }
.achievement-desc { font-size: 10px; color: var(--muted); margin-top: 2px; }

/* ---- Logo/Icon ---- */
.login-logo {
  display: block;
  max-width: 280px;
  width: 100%;
  height: auto;
  margin: 0 auto 12px;
}
.sidebar-icon {
  width: 22px;
  height: 22px;
  object-fit: contain;
  vertical-align: middle;
  margin-right: 4px;
}
.home-logo {
  display: block;
  max-width: 220px;
  height: auto;
  margin: 0 auto 16px;
}

/* ---- ChatEngine-Zeile & Copyright ---- */
.topbar-engine {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted);
  opacity: 0.7;
  white-space: nowrap;
  margin-left: auto;
  padding-left: 16px;
}
.page-copyright {
  text-align: center;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted);
  opacity: 0.6;
  margin-top: 24px;
  line-height: 1.6;
}

/* Fixierte Copyright-Ecke unten links — bleibt immer sichtbar, ohne im Hauptinhalt
   Platz wegzunehmen oder erst nach dem Scrollen aufzutauchen. */
.page-copyright-corner {
  position: fixed;
  left: 16px;
  bottom: 12px;
  z-index: 20;
  font-family: var(--mono);
  font-size: 9px;
  color: var(--muted);
  opacity: 0.55;
  line-height: 1.5;
  max-width: 220px;
  pointer-events: auto;
}
.page-copyright-corner a { color: var(--muted); }
.page-copyright-corner:hover { opacity: 0.9; }
@media (max-width: 720px) {
  .page-copyright-corner { position: static; margin: 16px auto 0; text-align: center; max-width: none; }
}

/* ---- Nachrichten-Reaktionen ---- */
.reaction-bar {
  display: flex;
  gap: 4px;
  margin-top: 3px;
  margin-left: 60px;
  flex-wrap: wrap;
}
.reaction-pill {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1px 8px;
  font-size: 12px;
  cursor: pointer;
  line-height: 1.6;
}
.reaction-pill:hover { border-color: var(--accent); }
.reaction-add-btn {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1px 7px;
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.line.chat:hover .reaction-add-btn { opacity: 1; }
.reaction-add-btn:hover { border-color: var(--accent); color: var(--accent); }

.reaction-picker {
  position: fixed;
  z-index: 400;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 6px 10px;
  display: flex;
  gap: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.reaction-picker span { cursor: pointer; font-size: 18px; }
.reaction-picker span:hover { transform: scale(1.2); display: inline-block; }

/* ---- Termine ---- */
.home-next-event {
  background: var(--glass-bg);
  border: 1px solid rgba(139,92,246,0.2);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.home-next-event-label { font-size: 10px; text-transform: uppercase; color: #C24DFF; font-family: var(--mono); letter-spacing: 0.5px; }
.home-next-event-title { color: #fff; font-weight: 600; font-size: 14px; }
.home-next-event-time { color: var(--muted); font-size: 12px; font-family: var(--mono); }

.event-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-bottom: 10px;
}
.event-title { font-weight: 700; font-size: 14px; margin-bottom: 2px; }
.event-time { font-family: var(--mono); font-size: 12px; color: var(--accent); margin-bottom: 6px; }
.event-desc { font-size: 13px; color: var(--text); margin-bottom: 8px; }
.event-footer { display: flex; justify-content: space-between; align-items: center; }
.event-rsvp-btn.going { background: var(--success); color: #06281c; border-color: var(--success); }

/* ---- (Info)-Link bei /w ---- */
.info-link {
  color: var(--accent);
  cursor: pointer;
  font-size: 11px;
  font-weight: 400;
  font-style: normal;
  text-decoration: underline;
}
.info-link:hover { color: #fff; }

/* ---- Uboot-Nickpage-Details: Motto, Besucherzähler ---- */
.profile-motto {
  font-style: italic;
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
  margin-bottom: 8px;
}
.profile-views {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted);
  margin-top: 8px;
}

.profile-visitors {
  font-size: 10px;
  color: var(--muted);
  margin-top: 4px;
  max-width: 280px;
}
.profile-visitors .info-link { text-decoration: none; font-weight: 600; }

/* ---- Skeleton-Loader (Ladezustand statt reinem "Lädt …"-Text) ---- */
.skeleton-line {
  height: 12px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--panel-2) 25%, var(--border) 50%, var(--panel-2) 75%);
  background-size: 200% 100%;
  animation: skeleton-pulse 1.4s ease-in-out infinite;
  margin-bottom: 8px;
}
.skeleton-line:last-child { margin-bottom: 0; }
.skeleton-block { padding: 16px 4px; }

/* ---- Reconnect-Banner ---- */
.reconnect-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(255,77,141,0.15);
  border-bottom: 1px solid var(--accent-dim);
  color: var(--accent);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}
.reconnect-spinner {
  width: 10px;
  height: 10px;
  border: 2px solid var(--accent-dim);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: reconnect-spin 0.7s linear infinite;
}
@keyframes reconnect-spin { to { transform: rotate(360deg); } }
.skeleton-line.w-60 { width: 60%; }
.skeleton-line.w-80 { width: 80%; }
.skeleton-line.w-40 { width: 40%; }
.skeleton-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.skeleton-row:last-child { margin-bottom: 0; }
.skeleton-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--panel-2); flex-shrink: 0; background: linear-gradient(90deg, var(--panel-2) 25%, var(--border) 50%, var(--panel-2) 75%); background-size: 200% 100%; animation: skeleton-pulse 1.4s ease-in-out infinite; }
@keyframes skeleton-pulse {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.sidebar-nav-links { border-bottom: 1px solid var(--border, rgba(255,255,255,0.08)); padding-bottom: 10px; margin-bottom: 6px; }
.sidebar-group { margin-bottom: 4px; }
.sidebar-group summary {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
  padding: 7px 8px;
  border-radius: 6px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background 0.12s ease, color 0.12s ease;
}
.sidebar-group-icon { font-size: 13px; flex-shrink: 0; }
.sidebar-group summary::-webkit-details-marker { display: none; }
.sidebar-group summary::after {
  content: '▸';
  margin-left: auto;
  font-size: 15px;
  font-weight: 700;
  color: var(--accent);
  transition: transform 0.15s ease;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,77,141,0.12);
  border-radius: 5px;
}
.sidebar-group[open] > summary::after { transform: rotate(90deg); }
.sidebar-group summary:hover { background: rgba(255,255,255,0.05); color: var(--accent); }
.sidebar-group summary:hover .sidebar-group-icon { filter: none; }
.sidebar-group[open] > summary { color: var(--accent); }
.sidebar-group .community-btn {
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
  background: transparent;
  border: none;
  border-radius: 6px;
  padding: 6px 10px 6px 20px;
  margin: 1px 0;
  font-size: 13px;
  transition: background 0.12s ease, color 0.12s ease;
}
.sidebar-group .community-btn:hover { background: rgba(255,255,255,0.05); color: var(--accent); }
.sidebar-item-icon { font-size: 13px; opacity: 0.85; flex-shrink: 0; }

/* ---- Moderations-Befehls-Panel ---- */
.mod-cmd-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  flex-wrap: wrap;
}
.mod-cmd-row:last-child { border-bottom: none; }
.mod-cmd {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--accent);
  background: var(--panel-2);
  padding: 2px 7px;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
}
.mod-cmd:hover { background: var(--accent); color: #ffffff; }
.mod-cmd-desc { color: var(--muted); flex: 1; min-width: 160px; }
.mod-cmd-row.locked { opacity: 0.45; }
.mod-cmd-row.locked .mod-cmd { cursor: default; }
.mod-cmd-row.locked .mod-cmd:hover { background: var(--panel-2); color: var(--accent); }
.mod-cmd-tier { font-family: var(--mono); font-size: 10px; color: var(--error); }

/* ---- Rauswurf-Hinweis auf der Startseite ---- */
.home-kick-notice {
  background: rgba(248,113,113,0.12);
  border: 1px solid rgba(248,113,113,0.5);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  margin-bottom: 20px;
  color: #ffb4b4;
  font-size: 13px;
  line-height: 1.6;
}

/* ---- Newsticker (Laufband oben im Chat) ---- */
.news-ticker {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  background: var(--panel-2);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  overflow: hidden;
}
.news-ticker-label {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #ffffff;
  background: var(--accent);
  padding: 2px 6px;
  border-radius: 3px;
  flex-shrink: 0;
}
.news-ticker-viewport { flex: 1; overflow: hidden; min-width: 0; }
.news-ticker-track {
  display: inline-block;
  white-space: nowrap;
  font-size: 12px;
  color: #8B5CF6;
  animation: tickerScroll 45s linear infinite;
  will-change: transform;
}
.news-ticker-track:hover { animation-play-state: paused; }
.news-ticker-track b { color: var(--text); }
.news-ticker-track a { color: #C24DFF; text-decoration: none; }
.news-ticker-track a:hover { text-decoration: underline; }
.news-ticker-sep { color: var(--accent); margin: 0 14px; }
@keyframes tickerScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ---- Theme-Auswahl im Admin-Panel ---- */
.theme-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.theme-option {
  display: block;
  cursor: pointer;
  border: 2px solid var(--border);
  border-radius: 6px;
  padding: 10px;
  transition: border-color 0.15s ease;
}
.theme-option:hover { border-color: var(--accent-dim); }
.theme-option.active { border-color: var(--accent); }
.theme-option input { width: auto; }
.theme-swatch {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  display: inline-block;
  border: 1px solid rgba(255,255,255,0.15);
}

/* ---- Bereichs-Kennzeichnung (Forum / Admin) ---- */
.area-badge {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #ffffff;
  background: var(--accent);
  padding: 4px 10px;
  border-radius: 4px;
  flex-shrink: 0;
}
.area-badge-admin { background: var(--error); color: #2a0a0a; }
.forum-header { gap: 14px; align-items: center; }
.forum-header .forum-breadcrumb { flex: 1; min-width: 0; }

/* ---- Forum-Inhalte deutlicher vom Chat abheben ---- */
.forum-overlay .forum-category-title {
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin-bottom: 12px;
}
.forum-overlay .forum-row {
  background: var(--glass-bg-strong);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border);
  border-left: 3px solid transparent;
  border-radius: var(--radius-sm);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.forum-overlay .forum-row:hover {
  border-left-color: var(--accent);
  border-color: var(--glass-border);
  transform: translateX(2px);
}
.forum-newtopic-form {
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 18px;
}

/* ---- Benachrichtigungs-Glocke ---- */
.notif-bell-wrap { position: relative; margin-left: auto; }
.notif-bell-btn {
  background: transparent;
  border: none;
  font-size: 16px;
  cursor: pointer;
  position: relative;
  padding: 4px;
  line-height: 1;
}
.notif-bell-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  background: var(--error);
  color: #fff;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  min-width: 15px;
  height: 15px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
}
.notif-dropdown {
  position: fixed;
  width: 320px;
  max-height: 420px;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 16px 40px rgba(0,0,0,0.5);
  z-index: 300;
}
.notif-dropdown-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.notif-dropdown-header button {
  background: transparent;
  border: none;
  color: var(--accent);
  font-size: 11px;
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
}
.notif-item {
  display: block;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  color: var(--text);
  text-decoration: none;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--panel-2); }
.notif-item.unread { background: rgba(255,77,141,0.06); border-left: 2px solid var(--accent); }
.notif-item-time { color: var(--muted); font-size: 10px; margin-top: 2px; }

/* ---- Toast-Overlay: taucht kurz oben rechts auf ---- */
.toast-container {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.toast-card {
  pointer-events: auto;
  width: 300px;
  background: var(--glass-bg-strong);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.5);
  cursor: pointer;
  animation: toastIn 0.25s ease-out;
}
.toast-card.toast-out { animation: toastOut 0.25s ease-in forwards; }
@keyframes toastIn {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes toastOut {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(30px); }
}
.toast-title { font-size: 12px; font-weight: 700; margin-bottom: 3px; }
.toast-text { font-size: 12px; color: var(--muted); line-height: 1.4; }

/* ---- Chat-Suchergebnisse ---- */
.search-result-row { padding: 10px 0; border-bottom: 1px solid var(--border); }
.search-result-row:last-child { border-bottom: none; }
.search-result-meta { font-size: 11px; color: var(--muted); margin-bottom: 4px; }
.search-result-text { font-size: 13px; }
.search-result-text mark { background: rgba(255,77,141,0.35); color: var(--text); border-radius: 2px; padding: 0 2px; }

/* ---- Feature-Liste auf dem Login-Screen ---- */
.features-card {
  border: 1px solid var(--accent);
  box-shadow: 0 0 24px rgba(255,77,141,0.08);
}
.features-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.features-list li { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; color: var(--text); line-height: 1.4; }
.features-icon { flex-shrink: 0; }

/* ---- Chat-Top-Navbar (ersetzt die alten Community/Hilfe/Moderation-Gruppen in der Sidebar) ---- */
.chat-navbar {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 6px 20px;
  background: var(--glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  /* Kein position:sticky mehr hier — hat sich mit der Leiste darunter überlappt.
     body ist jetzt komplett fixiert (siehe html,body weiter oben), dadurch kann die
     Seite ohnehin nicht mehr auf Seitenebene scrollen, der Header bleibt so schon
     zuverlässig sichtbar, ganz ohne eigene sticky/z-index-Klimmzüge. */
  flex-shrink: 0;
  flex-wrap: wrap;
}
.chat-navbar-brand { display: flex; align-items: center; gap: 8px; }
.chat-navbar-icon { width: 24px; height: 24px; object-fit: contain; }
.chat-navbar-links {
  /* Community/Hilfe/Moderation stehen jetzt in der linken Seitenleiste (Sidebar) —
     hier ausgeblendet, damit sie nicht doppelt vorkommen. Buttons bleiben im DOM,
     die Sidebar-Buttons lösen bei Klick weiterhin einfach deren Original-Klick aus. */
  display: none;
}
.chat-navbar-right { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.chat-navbar-right .self-name { font-weight: 600; }
.chat-navbar-right .self-room { color: var(--muted); font-size: 12px; }

.chat-navbar .nav-dropdown { position: relative; }
.chat-navbar .nav-dropdown-label {
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
  padding: 6px 0;
  display: inline-block;
}
.chat-navbar .nav-dropdown-label:hover,
.chat-navbar .nav-dropdown-label:focus { color: var(--text); }
.chat-navbar .nav-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0;
  padding: 10px 6px 6px 6px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  min-width: 200px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.5);
  z-index: 250;
  flex-direction: column;
}
.chat-navbar .nav-dropdown:hover .nav-dropdown-menu,
.chat-navbar .nav-dropdown:focus-within .nav-dropdown-menu,
.chat-navbar .nav-dropdown.dropdown-open .nav-dropdown-menu { display: flex; }
.chat-navbar .nav-dropdown-menu .community-btn {
  background: transparent;
  border: none;
  color: var(--text);
  text-align: left;
  padding: 8px 10px;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
  text-decoration: none;
  display: block;
}
.chat-navbar .nav-dropdown-menu .community-btn:hover { background: var(--panel-2); color: var(--accent); }

/* Sidebar jetzt schlank: nur noch Räume + Chatter */
.sidebar { padding-top: 4px; }

/* ---- Freunde-Widget in der Sidebar ---- */
.friend-widget-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
}
.friend-widget-row:hover { background: var(--panel-2); }
.friend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.friend-dot-on { background: var(--success); box-shadow: 0 0 5px rgba(52,211,153,0.6); }
.friend-dot-off { background: #ff4444; opacity: 0.7; }

/* ---- Sprachwahl (Login-Screen + Chat-Navbar) ---- */
.lang-switch {
  display: flex;
  gap: 4px;
  justify-content: center;
  margin: 10px 0;
}
.lang-switch-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 11px;
  font-family: var(--mono);
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  letter-spacing: 0.5px;
}
.lang-switch-btn:hover { color: var(--text); border-color: var(--accent); }
.lang-switch-btn.active { background: var(--accent); border-color: var(--accent); color: #06090f; }
.lang-switch-compact { margin: 0; }