/* ═══════════════════════════════════════════════════════
   generation-i Chat · chat.css
   generation-i.de Farbschema (Teal/Blau) · Mobile-optimiert
   ═══════════════════════════════════════════════════════ */

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

:root {
  --bg:           #ffffff;
  --bg-app:       #f5f6f8;
  --surface:      #ffffff;
  --border:       #e3e6ea;
  --border2:      #d0d4da;

  --own-bg:       #3fbfb5;
  --own-text:     #ffffff;
  --other-bg:     #eef0f3;
  --other-text:   #1a2030;

  --accent:       #3fbfb5;
  --accent-dark:  #2fa39a;
  --accent-soft:  #e3f6f4;
  --link:         #2e6fe0;

  --text:         #1a2030;
  --text2:        #45505e;
  --text3:        #848e9c;
  --text4:        #b3bac4;

  --online:       #34c759;
  --danger:       #e0473a;

  --font:         -apple-system, 'SF Pro Text', 'Helvetica Neue', sans-serif;
  --font-round:   'Figtree', var(--font);
  --mono:         'SF Mono', 'Fira Code', monospace;

  --radius-bubble: 20px;
  --sidebar-w:    280px;
  --header-h:     56px;
  --shadow-card:  0 1px 0 rgba(0,0,0,.08), 0 2px 12px rgba(0,0,0,.06);

  /* iOS Safe-Area Insets */
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

html, body {
  height: 100%; font-family: var(--font-round);
  background: var(--bg-app); color: var(--text);
  overflow: hidden; -webkit-font-smoothing: antialiased;
}

/* ─── Boot-Screen (verhindert Safari-Passwort-Popup) ──── */
#boot-screen {
  position: fixed; inset: 0; z-index: 101;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-app);
}
.boot-spinner {
  width: 32px; height: 32px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: bootSpin .7s linear infinite;
}
@keyframes bootSpin { to { transform: rotate(360deg); } }

/* ─── Login ──────────────────────────────────────────── */
#login-screen {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-app);
  transition: opacity .3s, transform .3s;
  padding: var(--safe-top) 16px var(--safe-bottom);
}
#login-screen::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, #d6f3f0 0%, transparent 70%);
  pointer-events: none;
}
#login-screen.hidden { opacity: 0; transform: scale(.97); pointer-events: none; }

.login-card {
  position: relative; z-index: 1;
  width: 100%; max-width: 380px;
  background: var(--surface); border-radius: 24px;
  padding: 40px 36px;
  box-shadow: 0 4px 40px rgba(0,0,0,.12);
  animation: cardIn .45s cubic-bezier(.16,1,.3,1) both;
}
@keyframes cardIn {
  from { opacity:0; transform:translateY(20px); }
  to   { opacity:1; transform:translateY(0); }
}
.login-icon-wrap {
  width: 220px; height: 70px; border-radius: 16px;
  background: #fff;
  border: 1px solid var(--border);
  color: #fff; font-size: 26px; font-weight: 800; letter-spacing: -1px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 24px; box-shadow: 0 4px 16px rgba(0,0,0,.08);
  overflow: hidden; padding: 14px 20px;
  position: relative; flex-shrink: 0; isolation: isolate;
}
.login-icon-wrap img {
  width: 100%; height: 100%; object-fit: contain; display: block;
}
.login-icon-wrap.logo-fallback {
  background: linear-gradient(135deg, #3fbfb5, #2e6fe0);
  border: none; box-shadow: 0 4px 16px rgba(63,191,181,.35);
  padding: 0;
}
.login-card h2 {
  text-align: center; font-size: 22px; font-weight: 700;
  letter-spacing: -.5px; margin-bottom: 6px;
}
.login-card .sub {
  text-align: center; font-size: 14px; color: var(--text3);
  margin-bottom: 30px; line-height: 1.4;
}
.field { margin-bottom: 13px; }
.field label {
  display: block; font-size: 12px; font-weight: 600;
  color: var(--text3); margin-bottom: 5px; letter-spacing: .03em;
}
.field input {
  width: 100%; padding: 13px 15px;
  background: var(--bg-app); border: 1.5px solid var(--border);
  border-radius: 10px; color: var(--text);
  font-family: var(--font-round); font-size: 16px;
  outline: none; transition: border-color .15s, background .15s;
  -webkit-appearance: none;
}
.field input:focus {
  border-color: var(--accent); background: #fff;
  box-shadow: 0 0 0 4px rgba(63,191,181,.12);
}
.btn-login {
  width: 100%; padding: 14px; margin-top: 6px;
  background: var(--accent); color: #fff;
  border: none; border-radius: 10px;
  font-family: var(--font-round); font-size: 16px; font-weight: 600;
  cursor: pointer; transition: background .15s, transform .1s;
  box-shadow: 0 2px 10px rgba(63,191,181,.35);
}
.btn-login:hover  { background: var(--accent-dark); }
.btn-login:active { transform: scale(.98); }
.btn-login:disabled { background: var(--text4); box-shadow: none; cursor: not-allowed; }
.login-error {
  margin-top: 12px; text-align: center;
  font-size: 13px; color: var(--danger); min-height: 18px;
}

/* ─── App ─────────────────────────────────────────────── */
#app {
  display: flex; height: 100vh; height: 100dvh;
  opacity: 0; transition: opacity .3s; pointer-events: none;
}
#app.visible { opacity: 1; pointer-events: all; }

/* ─── Sidebar (Desktop) ─────────────────────────────────── */
#sidebar {
  width: var(--sidebar-w); min-width: var(--sidebar-w);
  background: var(--surface); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; overflow: hidden;
}
.s-header {
  height: 76px;
  display: flex; align-items: center; justify-content: center; padding: 0 18px; gap: 12px;
  border-bottom: 1px solid var(--border);
}
.s-logo {
  width: 180px; height: 56px; border-radius: 12px;
  background: #fff; border: 1px solid var(--border); color: #fff;
  font-size: 18px; font-weight: 800; letter-spacing: -.5px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  overflow: hidden; padding: 10px 16px;
  position: relative; isolation: isolate;
}
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.s-logo img {
  width: 100%; height: 100%; object-fit: contain; display: block;
}
.s-logo.logo-fallback {
  background: linear-gradient(135deg, #3fbfb5, #2e6fe0);
  border: none; padding: 0;
}
.s-title { font-size: 15px; font-weight: 700; letter-spacing: -.3px; }
.s-section {
  padding: 16px 18px 6px;
  font-size: 11px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text3);
}
.online-scroll { flex: 1; overflow-y: auto; }
.online-scroll::-webkit-scrollbar { width: 0; }
.u-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 18px; cursor: pointer; transition: background .1s;
}
.u-row:hover { background: var(--bg-app); }
.u-row.active { background: var(--accent-soft); }
.avatar {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: #fff;
  flex-shrink: 0; overflow: hidden; position: relative;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar .pip {
  position: absolute; bottom: 0; right: 0;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--online); border: 2px solid var(--surface);
}
.av-sm { width: 30px; height: 30px; font-size: 11px; }
.u-name { font-size: 14px; font-weight: 500; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.u-row.active .u-name { color: var(--accent-dark); font-weight: 600; }

/* Ungelesene Privatnachricht */
.unread-dot {
  display: none;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--danger); flex-shrink: 0;
  box-shadow: 0 0 0 2px var(--surface);
}
.u-row.has-unread .unread-dot { display: block; }
.u-row.has-unread .u-name { font-weight: 700; color: var(--text); }
.u-row.has-unread { background: rgba(224,71,58,.06); }
.me-bar {
  padding: 10px 14px; border-top: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px; background: var(--bg-app);
}
.me-name { font-size: 13px; font-weight: 600; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me-role { font-size: 11px; color: var(--text3); }
.btn-logout {
  width: 28px; height: 28px; border-radius: 7px; border: none;
  background: none; color: var(--text3); font-size: 15px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .1s, color .1s;
}
.btn-logout:hover { background: #fbe4e2; color: var(--danger); }

/* ─── Main ─────────────────────────────────────────────── */
#main { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }

.topbar {
  height: var(--header-h); min-height: var(--header-h);
  display: flex; align-items: center; gap: 12px; padding: 0 20px;
  padding-top: var(--safe-top);
  height: calc(var(--header-h) + var(--safe-top));
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 20;
  flex-shrink: 0;
}
.topbar-av { flex-shrink: 0; }
.topbar-name { font-size: 16px; font-weight: 700; letter-spacing: -.3px; }
.topbar-sub  { font-size: 12px; color: var(--text3); }
.online-pill {
  margin-left: auto;
  display: flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600; color: var(--text3);
  background: none; border: none; font-family: var(--font-round);
  cursor: pointer; padding: 6px 10px; border-radius: 20px;
  transition: background .12s;
}
.online-pill:hover { background: var(--bg-app); }
.online-pill::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: var(--online); display: block; flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(52,199,89,.2);
}

/* ─── Mobile: Online-Button & Panel ─────────────────────── */
.mobile-online-btn { display: none; }

#mobile-online-overlay {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(0,0,0,.35);
  opacity: 0; pointer-events: none;
  transition: opacity .25s;
}
#mobile-online-overlay.open { opacity: 1; pointer-events: all; }

#mobile-online-panel {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(82vw, 320px);
  background: var(--surface);
  z-index: 91;
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(.16,1,.3,1);
  display: flex; flex-direction: column;
  padding-top: var(--safe-top);
  padding-bottom: var(--safe-bottom);
  box-shadow: -4px 0 24px rgba(0,0,0,.15);
}
#mobile-online-overlay.open #mobile-online-panel { transform: translateX(0); }

.mop-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; border-bottom: 1px solid var(--border);
}
.mop-title { font-size: 15px; font-weight: 700; }
.mop-close {
  width: 30px; height: 30px; border-radius: 50%; border: none;
  background: var(--bg-app); color: var(--text2); font-size: 16px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.mop-list { flex: 1; overflow-y: auto; padding: 6px 0; }

/* ─── Nachrichten ──────────────────────────────────────── */
#messages {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  padding: 16px 16px 8px;
  display: flex; flex-direction: column;
  background: var(--bg);
  -webkit-overflow-scrolling: touch;
}
#messages::-webkit-scrollbar { width: 0; }

.day-sep {
  text-align: center; margin: 16px 0 10px;
  font-size: 12px; font-weight: 600; color: var(--text3);
  letter-spacing: .01em;
}

.msg-group { display: flex; flex-direction: column; margin-bottom: 4px; }
.msg-group.own   { align-items: flex-end; }
.msg-group.other { align-items: flex-start; }

.group-author {
  font-size: 12px; font-weight: 600; color: var(--text3);
  margin-bottom: 4px; padding-left: 46px;
}

.msg-row {
  display: flex; align-items: flex-end; gap: 8px;
  max-width: 80%; width: 100%;
}
.msg-group.own .msg-row { flex-direction: row-reverse; max-width: 75%; }

.row-av { flex-shrink: 0; width: 32px; }
.msg-group.own .row-av { display: none; }

.bubble {
  padding: 10px 14px;
  font-size: 16px; line-height: 1.4;
  word-break: break-word; position: relative;
  display: inline-block; max-width: 100%;
  cursor: pointer; transition: filter .1s;
}
.bubble:active { filter: brightness(.93); }

.msg-group.other .msg-row:first-of-type .bubble,
.msg-group.other .msg-row:only-of-type .bubble {
  background: var(--other-bg); color: var(--other-text);
  border-radius: 20px 20px 20px 6px;
}
.msg-group.other .msg-row:not(:first-of-type):not(:last-of-type) .bubble {
  background: var(--other-bg); color: var(--other-text);
  border-radius: 6px 20px 20px 6px;
}
.msg-group.other .msg-row:last-of-type:not(:first-of-type) .bubble {
  background: var(--other-bg); color: var(--other-text);
  border-radius: 6px 20px 20px 20px;
}

.msg-group.own .msg-row:first-of-type .bubble,
.msg-group.own .msg-row:only-of-type .bubble {
  background: var(--own-bg); color: var(--own-text);
  border-radius: 20px 20px 6px 20px;
}
.msg-group.own .msg-row:not(:first-of-type):not(:last-of-type) .bubble {
  background: var(--own-bg); color: var(--own-text);
  border-radius: 20px 6px 6px 20px;
}
.msg-group.own .msg-row:last-of-type:not(:first-of-type) .bubble {
  background: var(--own-bg); color: var(--own-text);
  border-radius: 20px 6px 20px 20px;
}

.msg-time {
  font-size: 11px; color: var(--text3); margin-top: 3px; padding: 0 4px;
}
.msg-group.own .msg-time { text-align: right; }

.bubble .reply-quote {
  background: rgba(0,0,0,.1); border-left: 3px solid rgba(255,255,255,.5);
  border-radius: 6px; padding: 6px 9px; margin-bottom: 7px;
  font-size: 13px; opacity: .85;
}
.msg-group.other .bubble .reply-quote {
  background: rgba(0,0,0,.05); border-left-color: var(--accent);
}
.reply-quote .rq-author { font-size: 11px; font-weight: 700; margin-bottom: 2px; }
.reply-quote .rq-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ─── Reply-Bar ─────────────────────────────────────────── */
.reply-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 16px; background: var(--bg-app);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.reply-bar.hidden { display: none; }
.reply-bar-line {
  width: 3px; align-self: stretch; border-radius: 3px;
  background: var(--accent); flex-shrink: 0;
}
.reply-bar-info { flex: 1; min-width: 0; }
.reply-bar-author { font-size: 12px; font-weight: 700; color: var(--accent-dark); margin-bottom: 1px; }
.reply-bar-text { font-size: 13px; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reply-bar-close {
  width: 22px; height: 22px; border-radius: 50%; border: none;
  background: var(--text4); color: #fff; font-size: 12px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: background .1s;
}
.reply-bar-close:hover { background: var(--danger); }

/* ─── PM-Banner ─────────────────────────────────────────── */
.pm-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 16px; background: var(--accent-soft);
  border-top: 1px solid #c2ece8; font-size: 13px; color: var(--accent-dark); font-weight: 500;
  flex-shrink: 0;
}
.pm-bar.hidden { display: none; }
.pm-bar a { margin-left: auto; color: var(--text3); text-decoration: none; font-size: 15px; line-height: 1; }
.pm-bar a:hover { color: var(--danger); }

/* ─── Chat geschlossen ───────────────────────────────────── */
.closed-bar {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 20px; background: #fff3cd; border-top: 1px solid #ffc107;
  color: #856404; font-size: 14px; font-weight: 600;
  flex-shrink: 0;
}
.closed-bar.hidden { display: none; }

.admin-bar {
  display: flex; justify-content: flex-end;
  padding: 6px 14px; background: var(--bg-app);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.admin-bar.hidden { display: none; }
.btn-toggle-chat {
  padding: 6px 14px; border-radius: 8px; border: none;
  font-family: var(--font-round); font-size: 12px; font-weight: 600;
  cursor: pointer; transition: background .12s;
  background: #fbe4e2; color: #c0392b;
}
.btn-toggle-chat:hover { background: #f7cdc9; }

/* ─── Input ─────────────────────────────────────────────── */
.input-area {
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--border);
  padding: 10px 14px calc(14px + var(--safe-bottom));
  flex-shrink: 0;
}
.input-disabled { opacity: .45; pointer-events: none; }
.input-row { display: flex; align-items: flex-end; gap: 10px; }
.input-wrap {
  flex: 1; display: flex; align-items: flex-end;
  background: var(--bg-app); border: 1.5px solid var(--border2);
  border-radius: 22px; padding: 8px 14px;
  transition: border-color .15s; min-height: 42px;
}
.input-wrap:focus-within { border-color: var(--accent); background: #fff; }
#msg-input {
  flex: 1; border: none; background: transparent;
  color: var(--text); font-family: var(--font-round); font-size: 16px;
  resize: none; outline: none; min-height: 24px; max-height: 120px;
  line-height: 1.4; padding: 0;
}
#msg-input::placeholder { color: var(--text4); }
.btn-send {
  width: 34px; height: 34px; border-radius: 50%; border: none;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
  transition: background .12s, transform .1s;
  box-shadow: 0 2px 8px rgba(63,191,181,.35);
}
.btn-send:hover  { background: var(--accent-dark); }
.btn-send:active { transform: scale(.9); }
.btn-send svg { width: 16px; height: 16px; }

/* ─── Reaction-Menu ─────────────────────────────────────── */
.reaction-menu {
  position: fixed; z-index: 200;
  background: var(--surface); border-radius: 14px;
  box-shadow: 0 8px 30px rgba(0,0,0,.15);
  padding: 6px 4px; display: flex; gap: 2px; align-items: center;
  animation: popIn .15s cubic-bezier(.16,1,.3,1);
  width: max-content; max-width: calc(100vw - 20px);
}
@keyframes popIn { from { opacity:0; transform:scale(.8); } to { opacity:1; transform:scale(1); } }
.reaction-menu button {
  background: none; border: none; font-size: 22px; padding: 6px 8px;
  border-radius: 10px; cursor: pointer; line-height: 1;
  transition: background .1s, transform .1s; flex-shrink: 0;
}
.reaction-menu button:hover { background: var(--bg-app); transform: scale(1.2); }
.rm-divider { width: 1px; height: 28px; background: var(--border); margin: 0 4px; flex-shrink: 0; }
.rm-reply {
  font-size: 12px; font-weight: 600; color: var(--accent-dark);
  padding: 6px 10px; background: none; border: none; border-radius: 10px;
  cursor: pointer; transition: background .1s;
  white-space: nowrap; flex-shrink: 0;
}
.rm-reply:hover { background: var(--accent-soft); }

/* ─── Notification-Button ────────────────────────────── */
.btn-notif {
  width: 32px; height: 32px; border-radius: 50%; border: none;
  background: var(--bg-app); color: var(--text3);
  font-size: 16px; cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: background .12s, transform .1s;
  animation: pulse 2s ease-in-out 3;
}
.btn-notif:hover { background: var(--border); transform: scale(1.1); }
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.15); }
}

/* ─── Avatar-Farben ─────────────────────────────────────── */
.av-0{background:#3fbfb5} .av-1{background:#2e6fe0} .av-2{background:#e0473a}
.av-3{background:#f5a623} .av-4{background:#34c759} .av-5{background:#00c7be}
.av-6{background:#9b59d0} .av-7{background:#ff6b6b} .av-8{background:#30b0c7}
.av-9{background:#8d6e63}

/* ─── Mobile ─────────────────────────────────────────────── */
@media (max-width: 640px) {
  #sidebar { display: none; }
  .bubble { font-size: 15px; }

  .online-pill { display: none; }
  .mobile-online-btn {
    display: flex; align-items: center; justify-content: center;
    margin-left: auto;
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--bg-app); border: none; color: var(--text2);
    font-size: 15px; cursor: pointer; position: relative; flex-shrink: 0;
  }
  .mobile-online-btn .dot {
    position: absolute; top: 6px; right: 6px;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--online); border: 2px solid var(--surface);
  }

  .topbar { padding: 0 12px; padding-top: var(--safe-top); gap: 8px; }
  .topbar-name { font-size: 15px; }

  .input-area { padding: 8px 10px calc(10px + var(--safe-bottom)); }
}

/* ═══════════════════════════════════════════════════════
   Dark Mode (automatisch via prefers-color-scheme)
   ═══════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:           #14181c;
    --bg-app:       #1c2127;
    --surface:      #1c2127;
    --border:       #2c333b;
    --border2:      #3a424c;

    --own-bg:       #3fbfb5;
    --own-text:     #ffffff;
    --other-bg:     #2a313a;
    --other-text:   #f2f4f6;

    --accent:       #4ad4c9;
    --accent-dark:  #3fbfb5;
    --accent-soft:  #163530;
    --link:         #5b8def;

    --text:         #f2f4f6;
    --text2:        #c2c9d1;
    --text3:        #8a93a0;
    --text4:        #5a626d;

    --online:       #30d158;
    --danger:       #ff6259;
  }
  #login-screen::before {
    background: radial-gradient(ellipse 80% 60% at 50% 0%, #163530 0%, transparent 70%);
  }
  .login-card { background: #1c2127; box-shadow: 0 4px 40px rgba(0,0,0,.6); }
  .login-icon-wrap:not(.logo-fallback) { background: #f5f5f5; }
  .s-logo:not(.logo-fallback) { background: #f5f5f5; }
  .field input { background: #242b33; border-color: #2c333b; color: #fff; }
  .field input:focus { background: #2c333d; }
  #sidebar { background: #1c2127; border-right-color: #2c333b; }
  .s-header { border-bottom-color: #2c333b; }
  .u-row:hover { background: #242b33; }
  .u-row.active { background: #163530; }
  .me-bar { background: #242b33; border-top-color: #2c333b; }
  .btn-logout:hover { background: #3a1c1c; }
  .avatar .pip { border-color: #1c2127; }
  .topbar { background: rgba(28,33,39,.92); border-bottom-color: #2c333b; }
  .online-pill:hover { background: #242b33; }
  .mobile-online-btn { background: #242b33; }
  .mobile-online-btn .dot { border-color: #1c2127; }
  #mobile-online-panel { background: #1c2127; box-shadow: -4px 0 24px rgba(0,0,0,.4); }
  .mop-header { border-bottom-color: #2c333b; }
  .mop-close { background: #242b33; color: var(--text2); }
  .input-area { background: rgba(28,33,39,.95); border-top-color: #2c333b; }
  .input-wrap { background: #242b33; border-color: #3a424c; }
  .input-wrap:focus-within { background: #2c333d; border-color: var(--accent); }
  #msg-input { color: #fff; }
  #messages { background: #14181c; }
  .reply-bar { background: #1c2127; border-top-color: #2c333b; }
  .reply-bar-close { background: #3a424c; }
  .pm-bar { background: #163530; border-top-color: #1c4a42; }
  .reaction-menu { background: #242b33; }
  .reaction-menu button:hover { background: #2c333d; }
  .msg-group.own .bubble .reply-quote {
    background: rgba(255,255,255,.12); border-left-color: rgba(255,255,255,.4);
  }
  .msg-group.other .bubble .reply-quote {
    background: rgba(0,0,0,.2); border-left-color: var(--accent);
  }
  .closed-bar { background: #3a2e00; border-color: #7a5c00; color: #ffd60a; }
  .admin-bar { background: #1c2127; border-top-color: #2c333b; }
  .btn-toggle-chat { background: #3a1c1c; color: #ff6b6b; }
  .btn-toggle-chat:hover { background: #4a2020; }
  .btn-notif { background: #242b33; }
  .btn-notif:hover { background: #2c333d; }
}