/* ═══════════════════════════════════════════════════════════
   HAVEN — Multi-Theme Stylesheet
   Themes: Haven (default), Discord, Matrix, Tron, HALO, LoTR
   ═══════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=VT323&family=Share+Tech+Mono&display=swap');
@import url('/css/voice.css?v=1');
@import url('/css/music.css?v=1');

/* ─── THEME: Haven (Default) ───────────────────────────── */
:root, [data-theme="haven"] {
  --bg-primary:    #191b28;
  --bg-secondary:  #1e2035;
  --bg-tertiary:   #252840;
  --bg-hover:      #2c2f4a;
  --bg-active:     #333660;
  --bg-input:      #15172a;
  --bg-card:       #1c1e33;

  --accent:        #7c5cfc;
  --accent-hover:  #9478ff;
  --accent-dim:    #5a3fd4;
  --accent-glow:   rgba(124, 92, 252, 0.25);

  --text-primary:  #e2e4f0;
  --text-secondary:#9498b3;
  --text-muted:    #5d6180;
  --text-link:     #82aaff;

  --border:        #2d3050;
  --border-light:  #383b5e;

  --success:       #43b581;
  --danger:        #f04747;
  --warning:       #faa61a;

  --led-on:        #43b581;
  --led-off:       #555;
  --led-glow:      rgba(67, 181, 129, 0.5);

  --font-main:     'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono:     'Consolas', 'Courier New', monospace;
  --font-heading:  'Segoe UI', system-ui, sans-serif;

  --radius:        8px;
  --radius-sm:     4px;
  --transition:    0.15s ease;
  --sidebar-width: 270px;
  --right-width:   260px;

  --theme-logo:    "⬡";
  --msg-glow:      none;
  --scanline:      none;
}

/* ─── THEME: Discord ───────────────────────────────────── */
[data-theme="discord"] {
  --bg-primary:    #313338;
  --bg-secondary:  #2b2d31;
  --bg-tertiary:   #383a40;
  --bg-hover:      #3a3c42;
  --bg-active:     #43454d;
  --bg-input:      #1e1f22;
  --bg-card:       #2b2d31;

  --accent:        #5865f2;
  --accent-hover:  #6d78f5;
  --accent-dim:    #4752c4;
  --accent-glow:   rgba(88, 101, 242, 0.25);

  --text-primary:  #f2f3f5;
  --text-secondary:#b5bac1;
  --text-muted:    #6d6f78;
  --text-link:     #00a8fc;

  --border:        #3f4147;
  --border-light:  #4e5058;

  --success:       #23a55a;
  --danger:        #f23f43;
  --warning:       #f0b232;

  --led-on:        #23a55a;
  --led-glow:      rgba(35, 165, 90, 0.5);

  --theme-logo:    "🎮";
}

/* ─── THEME: Matrix ────────────────────────────────────── */
[data-theme="matrix"] {
  --bg-primary:    #0a0a0a;
  --bg-secondary:  #0d0d0d;
  --bg-tertiary:   #141414;
  --bg-hover:      #1a1a1a;
  --bg-active:     #002200;
  --bg-input:      #050505;
  --bg-card:       #0d0d0d;

  --accent:        #00ff41;
  --accent-hover:  #33ff66;
  --accent-dim:    #00cc33;
  --accent-glow:   rgba(0, 255, 65, 0.3);

  --text-primary:  #00ff41;
  --text-secondary:#00bb30;
  --text-muted:    #006618;
  --text-link:     #00ff99;

  --border:        #003300;
  --border-light:  #004400;

  --success:       #00ff41;
  --danger:        #ff0040;
  --warning:       #ccff00;

  --led-on:        #00ff41;
  --led-glow:      rgba(0, 255, 65, 0.6);

  --font-main:     'Courier New', 'Consolas', monospace;
  --font-heading:  'Courier New', monospace;
  --font-mono:     'Courier New', monospace;

  --theme-logo:    "Ⅿ";
  --msg-glow:      0 0 4px rgba(0, 255, 65, 0.15);
  --scanline:      repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 255, 65, 0.015) 2px,
    rgba(0, 255, 65, 0.015) 4px
  );
}

/* Matrix accent overrides — glitch aesthetic */
[data-theme="matrix"] .brand-text { text-shadow: 0 0 8px rgba(0, 255, 65, 0.4); }
[data-theme="matrix"] .channel-badge { background: #00ff41; color: #000; }
[data-theme="matrix"] .message-avatar, [data-theme="matrix"] .message-avatar-img { border: 1px solid rgba(0, 255, 65, 0.3); }

/* ─── THEME: Tron ──────────────────────────────────────── */
[data-theme="tron"] {
  --bg-primary:    #0c141f;
  --bg-secondary:  #0a1018;
  --bg-tertiary:   #111d2b;
  --bg-hover:      #162536;
  --bg-active:     #0d3a5c;
  --bg-input:      #060d16;
  --bg-card:       #0a1018;

  --accent:        #6fecff;
  --accent-hover:  #9df3ff;
  --accent-dim:    #3ec6df;
  --accent-glow:   rgba(111, 236, 255, 0.3);

  --text-primary:  #d4f6ff;
  --text-secondary:#7ab8cc;
  --text-muted:    #3a6a7a;
  --text-link:     #6fecff;

  --border:        #1a3344;
  --border-light:  #244455;

  --success:       #6fecff;
  --danger:        #ff6f3f;
  --warning:       #ffe76f;

  --led-on:        #6fecff;
  --led-glow:      rgba(111, 236, 255, 0.6);

  --font-main:     'Segoe UI', system-ui, sans-serif;
  --font-heading:  'Segoe UI', system-ui, sans-serif;

  --theme-logo:    "◈";
  --msg-glow:      0 0 4px rgba(111, 236, 255, 0.08);
}

/* Tron accent overrides — identity disc glow */
[data-theme="tron"] .brand-text { text-shadow: 0 0 10px rgba(111, 236, 255, 0.4); color: #6fecff; }
[data-theme="tron"] .server-icon.home { background: transparent; border: 2px solid #6fecff; box-shadow: 0 0 8px rgba(111, 236, 255, 0.4); }
[data-theme="tron"] .channel-item.active::before { background: #6fecff; box-shadow: 0 0 6px rgba(111, 236, 255, 0.5); }
[data-theme="tron"] .btn-send { box-shadow: 0 0 8px rgba(111, 236, 255, 0.3); }
[data-theme="tron"] .message-avatar, [data-theme="tron"] .message-avatar-img { border: 1px solid rgba(111, 236, 255, 0.25); }

/* ─── THEME: HALO ──────────────────────────────────────── */
[data-theme="halo"] {
  --bg-primary:    #0d1a0d;
  --bg-secondary:  #0a150a;
  --bg-tertiary:   #142214;
  --bg-hover:      #1a2e1a;
  --bg-active:     #1f3a1f;
  --bg-input:      #070e07;
  --bg-card:       #0c170c;

  --accent:        #d4a020;
  --accent-hover:  #e8b832;
  --accent-dim:    #b08818;
  --accent-glow:   rgba(212, 160, 32, 0.35);

  --text-primary:  #d4e0c8;
  --text-secondary:#8aaa78;
  --text-muted:    #4a6a3a;
  --text-link:     #4fc3f7;

  --border:        #1a3318;
  --border-light:  #264a22;

  --success:       #4ca64c;
  --danger:        #cc3333;
  --warning:       #d4a020;

  --led-on:        #d4a020;
  --led-glow:      rgba(212, 160, 32, 0.5);

  --font-main:     'Segoe UI', system-ui, sans-serif;
  --font-heading:  'Segoe UI', system-ui, sans-serif;
  --font-mono:     'Consolas', monospace;

  --theme-logo:    "⌁";
  --msg-glow:      0 0 4px rgba(212, 160, 32, 0.06);
}

/* HALO accent overrides — energy sword blue highlights */
[data-theme="halo"] .channel-item.active::before { background: #4fc3f7; }
[data-theme="halo"] .btn-send { background: #4fc3f7; }
[data-theme="halo"] .btn-send:hover { background: #6fd4ff; }
[data-theme="halo"] .mention { background: rgba(79, 195, 247, 0.15); color: #4fc3f7; }
[data-theme="halo"] .reaction-badge.own { background: rgba(79, 195, 247, 0.2); border-color: #4fc3f7; }
[data-theme="halo"] .reaction-badge:hover { background: rgba(79, 195, 247, 0.15); border-color: #4fc3f7; }
[data-theme="halo"] .channel-badge { background: #4fc3f7; }
[data-theme="halo"] .server-icon.home { background: linear-gradient(135deg, #4ca64c, #d4a020); }
[data-theme="halo"] .server-icon:hover { background: #4fc3f7; }
[data-theme="halo"] .brand-text { background: linear-gradient(90deg, #4ca64c, #d4a020, #4fc3f7); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
[data-theme="halo"] .inline-code { color: #4fc3f7; }

/* ─── THEME: LoTR ──────────────────────────────────────── */
[data-theme="lotr"] {
  --bg-primary:    #1a1510;
  --bg-secondary:  #1e1812;
  --bg-tertiary:   #2a221a;
  --bg-hover:      #342a20;
  --bg-active:     #3e3225;
  --bg-input:      #140f0a;
  --bg-card:       #1e1812;

  --accent:        #d4a844;
  --accent-hover:  #e0be66;
  --accent-dim:    #b08830;
  --accent-glow:   rgba(212, 168, 68, 0.3);

  --text-primary:  #e8dcc8;
  --text-secondary:#b0a088;
  --text-muted:    #6e6050;
  --text-link:     #e0c070;

  --border:        #3a3028;
  --border-light:  #4a3e32;

  --success:       #6e9e3a;
  --danger:        #b03030;
  --warning:       #d4a844;

  --led-on:        #d4a844;
  --led-glow:      rgba(212, 168, 68, 0.5);

  --font-main:     'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif;
  --font-heading:  'Palatino Linotype', 'Book Antiqua', Georgia, serif;
  --font-mono:     'Consolas', monospace;

  --theme-logo:    "⚜";

  /* Worn parchment scanlines */
  --scanline:      repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(212, 168, 68, 0.008) 3px,
    rgba(212, 168, 68, 0.008) 6px
  );
}

/* LoTR accent overrides — elvish warmth */
[data-theme="lotr"] .brand-text { font-style: italic; }
[data-theme="lotr"] .welcome-icon { color: #d4a844; }
[data-theme="lotr"] .server-icon.home { background: linear-gradient(135deg, #8a6a20, #d4a844); }

/* ─── THEME: Cyberpunk ─────────────────────────────────── */
[data-theme="cyberpunk"] {
  --bg-primary:    #0a0a12;
  --bg-secondary:  #0e0e1a;
  --bg-tertiary:   #151525;
  --bg-hover:      #1c1c32;
  --bg-active:     #2a1a3a;
  --bg-input:      #06060e;
  --bg-card:       #0e0e1a;

  --accent:        #ff2d6f;
  --accent-hover:  #ff5a90;
  --accent-dim:    #cc1a55;
  --accent-glow:   rgba(255, 45, 111, 0.3);

  --text-primary:  #f0e6ff;
  --text-secondary:#b090d0;
  --text-muted:    #5a4080;
  --text-link:     #00f0ff;

  --border:        #2a1a40;
  --border-light:  #3a2a55;

  --success:       #00ff88;
  --danger:        #ff2d6f;
  --warning:       #ffe14d;

  --led-on:        #00ff88;
  --led-glow:      rgba(0, 255, 136, 0.5);

  --font-main:     'Segoe UI', system-ui, sans-serif;
  --font-heading:  'Segoe UI', system-ui, sans-serif;
  --font-mono:     'Consolas', monospace;

  --theme-logo:    "⚡";
  --msg-glow:      0 0 4px rgba(255, 45, 111, 0.08);
}

/* Cyberpunk accent splashes — neon contrasts */
[data-theme="cyberpunk"] .channel-item.active::before { background: #00f0ff; }
[data-theme="cyberpunk"] .inline-code { color: #00f0ff; }
[data-theme="cyberpunk"] .brand-text { background: linear-gradient(90deg, #ff2d6f, #00f0ff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
[data-theme="cyberpunk"] .server-icon.home { background: linear-gradient(135deg, #ff2d6f, #00f0ff); }

/* ─── THEME: Nord ──────────────────────────────────────── */
[data-theme="nord"] {
  --bg-primary:    #2e3440;
  --bg-secondary:  #3b4252;
  --bg-tertiary:   #434c5e;
  --bg-hover:      #4c566a;
  --bg-active:     #5e6a82;
  --bg-input:      #2a2f3b;
  --bg-card:       #3b4252;

  --accent:        #88c0d0;
  --accent-hover:  #8fbcbb;
  --accent-dim:    #5e81ac;
  --accent-glow:   rgba(136, 192, 208, 0.25);

  --text-primary:  #eceff4;
  --text-secondary:#d8dee9;
  --text-muted:    #7b88a1;
  --text-link:     #88c0d0;

  --border:        #4c566a;
  --border-light:  #5e6a82;

  --success:       #a3be8c;
  --danger:        #bf616a;
  --warning:       #ebcb8b;

  --led-on:        #a3be8c;
  --led-glow:      rgba(163, 190, 140, 0.5);

  --font-main:     'Segoe UI', system-ui, sans-serif;
  --font-heading:  'Segoe UI', system-ui, sans-serif;
  --font-mono:     'Consolas', monospace;

  --theme-logo:    "❄";
}

/* Nord accent splashes — aurora colors */
[data-theme="nord"] .mention { background: rgba(180, 142, 173, 0.2); color: #b48ead; }
[data-theme="nord"] .brand-text { color: #88c0d0; }

/* ─── THEME: Dracula ───────────────────────────────────── */
[data-theme="dracula"] {
  --bg-primary:    #1a1b26;
  --bg-secondary:  #16171f;
  --bg-tertiary:   #22232e;
  --bg-hover:      #2a2c3a;
  --bg-active:     #32344a;
  --bg-input:      #12131a;
  --bg-card:       #16171f;

  --accent:        #bd93f9;
  --accent-hover:  #caa6fc;
  --accent-dim:    #9d73d9;
  --accent-glow:   rgba(189, 147, 249, 0.3);

  --text-primary:  #f8f8f2;
  --text-secondary:#b0b0c0;
  --text-muted:    #565a7a;
  --text-link:     #8be9fd;

  --border:        #2a2c40;
  --border-light:  #383a52;

  --success:       #50fa7b;
  --danger:        #ff5555;
  --warning:       #f1fa8c;

  --led-on:        #50fa7b;
  --led-glow:      rgba(80, 250, 123, 0.5);

  --font-main:     'Segoe UI', system-ui, sans-serif;
  --font-heading:  'Segoe UI', system-ui, sans-serif;
  --font-mono:     'Consolas', monospace;

  --theme-logo:    "🧛";
  --msg-glow:      0 0 4px rgba(189, 147, 249, 0.06);
}

/* Dracula accent splashes */
[data-theme="dracula"] .inline-code { color: #50fa7b; }
[data-theme="dracula"] .mention { background: rgba(255, 121, 198, 0.15); color: #ff79c6; }
[data-theme="dracula"] .brand-text { background: linear-gradient(90deg, #bd93f9, #ff79c6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

/* ─── THEME: Bloodborne (Red & Black) ──────────────────── */
[data-theme="bloodborne"] {
  --bg-primary:    #0a0000;
  --bg-secondary:  #110808;
  --bg-tertiary:   #1a0c0c;
  --bg-hover:      #2a1010;
  --bg-active:     #3a1515;
  --bg-input:      #060000;
  --bg-card:       #110808;

  --accent:        #cc0020;
  --accent-hover:  #ff1a3a;
  --accent-dim:    #990018;
  --accent-glow:   rgba(204, 0, 32, 0.4);

  --text-primary:  #f0d0d0;
  --text-secondary:#b08080;
  --text-muted:    #6a3a3a;
  --text-link:     #ff4060;

  --border:        #2a1515;
  --border-light:  #3a2020;

  --success:       #cc0020;
  --danger:        #ff0030;
  --warning:       #ff6600;

  --led-on:        #ff0030;
  --led-off:       #330000;
  --led-glow:      rgba(255, 0, 48, 0.6);

  --font-main:     'Segoe UI', system-ui, sans-serif;
  --font-heading:  'Segoe UI', system-ui, sans-serif;
  --font-mono:     'Consolas', monospace;

  --theme-logo:    "🩸";
  --msg-glow:      0 0 6px rgba(204, 0, 32, 0.12);
}

/* Bloodborne accent overrides — blood and darkness */
[data-theme="bloodborne"] .brand-text { color: #cc0020; text-shadow: 0 0 12px rgba(204, 0, 32, 0.5); }
[data-theme="bloodborne"] .server-icon.home { background: linear-gradient(135deg, #660010, #cc0020); box-shadow: 0 0 10px rgba(204, 0, 32, 0.4); }
[data-theme="bloodborne"] .channel-item.active::before { background: #ff0030; box-shadow: 0 0 8px rgba(255, 0, 48, 0.6); }
[data-theme="bloodborne"] .btn-send { box-shadow: 0 0 8px rgba(204, 0, 32, 0.4); }
[data-theme="bloodborne"] .message-avatar, [data-theme="bloodborne"] .message-avatar-img { border: 1px solid rgba(204, 0, 32, 0.3); }
[data-theme="bloodborne"] .channel-badge { background: #cc0020; color: #fff; }
[data-theme="bloodborne"] .inline-code { color: #ff4060; }

/* ─── THEME: Ice (Ice Blue) ────────────────────────────── */
[data-theme="ice"] {
  --bg-primary:    #0a1520;
  --bg-secondary:  #0c1a28;
  --bg-tertiary:   #102030;
  --bg-hover:      #142838;
  --bg-active:     #183040;
  --bg-input:      #060e18;
  --bg-card:       #0c1a28;

  --accent:        #00d4ff;
  --accent-hover:  #40e0ff;
  --accent-dim:    #00a8cc;
  --accent-glow:   rgba(0, 212, 255, 0.35);

  --text-primary:  #d8f0ff;
  --text-secondary:#80b8d8;
  --text-muted:    #3a6a88;
  --text-link:     #00d4ff;

  --border:        #1a3048;
  --border-light:  #224058;

  --success:       #00d4ff;
  --danger:        #ff3060;
  --warning:       #ffcc00;

  --led-on:        #00d4ff;
  --led-off:       #0a1a2a;
  --led-glow:      rgba(0, 212, 255, 0.6);

  --font-main:     'Segoe UI', system-ui, sans-serif;
  --font-heading:  'Segoe UI', system-ui, sans-serif;
  --font-mono:     'Consolas', monospace;

  --theme-logo:    "🧊";
  --msg-glow:      0 0 4px rgba(0, 212, 255, 0.08);
}

/* Ice accent overrides — frozen glow */
[data-theme="ice"] .brand-text { color: #00d4ff; text-shadow: 0 0 12px rgba(0, 212, 255, 0.5); }
[data-theme="ice"] .server-icon.home { background: linear-gradient(135deg, #005580, #00d4ff); box-shadow: 0 0 10px rgba(0, 212, 255, 0.3); }
[data-theme="ice"] .channel-item.active::before { background: #00d4ff; box-shadow: 0 0 8px rgba(0, 212, 255, 0.5); }
[data-theme="ice"] .btn-send { box-shadow: 0 0 8px rgba(0, 212, 255, 0.3); }
[data-theme="ice"] .message-avatar, [data-theme="ice"] .message-avatar-img { border: 1px solid rgba(0, 212, 255, 0.25); }
[data-theme="ice"] .channel-badge { background: #00d4ff; color: #0a1520; }
[data-theme="ice"] .inline-code { color: #40e0ff; }

/* ─── THEME: Abyss (Deep Ocean / Navy Blue) ────────────── */
[data-theme="abyss"] {
  --bg-primary:    #040810;
  --bg-secondary:  #060c18;
  --bg-tertiary:   #0a1220;
  --bg-hover:      #0e1830;
  --bg-active:     #122040;
  --bg-input:      #020610;
  --bg-card:       #060c18;

  --accent:        #1a5aff;
  --accent-hover:  #3a70ff;
  --accent-dim:    #0040cc;
  --accent-glow:   rgba(26, 90, 255, 0.35);

  --text-primary:  #c8d8f0;
  --text-secondary:#7088b0;
  --text-muted:    #384868;
  --text-link:     #4488ff;

  --border:        #101830;
  --border-light:  #182240;

  --success:       #00cc88;
  --danger:        #ff2050;
  --warning:       #ff8800;

  --led-on:        #1a5aff;
  --led-off:       #0a0e1a;
  --led-glow:      rgba(26, 90, 255, 0.6);

  --font-main:     'Segoe UI', system-ui, sans-serif;
  --font-heading:  'Segoe UI', system-ui, sans-serif;
  --font-mono:     'Consolas', monospace;

  --theme-logo:    "🌊";
  --msg-glow:      0 0 4px rgba(26, 90, 255, 0.08);
}

/* Abyss accent overrides — deep ocean pressure */
[data-theme="abyss"] .brand-text { color: #4488ff; text-shadow: 0 0 12px rgba(26, 90, 255, 0.5); }
[data-theme="abyss"] .server-icon.home { background: linear-gradient(135deg, #0a2060, #1a5aff); box-shadow: 0 0 10px rgba(26, 90, 255, 0.3); }
[data-theme="abyss"] .channel-item.active::before { background: #1a5aff; box-shadow: 0 0 8px rgba(26, 90, 255, 0.5); }
[data-theme="abyss"] .btn-send { box-shadow: 0 0 8px rgba(26, 90, 255, 0.3); }
[data-theme="abyss"] .message-avatar, [data-theme="abyss"] .message-avatar-img { border: 1px solid rgba(26, 90, 255, 0.25); }
[data-theme="abyss"] .channel-badge { background: #1a5aff; color: #fff; }
[data-theme="abyss"] .inline-code { color: #4488ff; }

/* ─── THEME: Dark Souls ────────────────────────────────── */
[data-theme="darksouls"] {
  --bg-primary:    #0c0a08;
  --bg-secondary:  #110e0b;
  --bg-tertiary:   #1a1510;
  --bg-hover:      #241e16;
  --bg-active:     #2e261c;
  --bg-input:      #080604;
  --bg-card:       #110e0b;

  --accent:        #c8a84e;
  --accent-hover:  #dcc06a;
  --accent-dim:    #a08030;
  --accent-glow:   rgba(200, 168, 78, 0.35);

  --text-primary:  #d8ccb0;
  --text-secondary:#9a8a70;
  --text-muted:    #5a4e3a;
  --text-link:     #d4a844;

  --border:        #2a2218;
  --border-light:  #3a3020;

  --success:       #b0a030;
  --danger:        #a03020;
  --warning:       #c8a84e;

  --led-on:        #c8a84e;
  --led-off:       #1a1208;
  --led-glow:      rgba(200, 168, 78, 0.5);

  --font-main:     'Palatino Linotype', Georgia, serif;
  --font-heading:  'Palatino Linotype', Georgia, serif;
  --font-mono:     'Consolas', monospace;

  --theme-logo:    "🔥";
  --msg-glow:      0 0 6px rgba(200, 168, 78, 0.08);
}

[data-theme="darksouls"] .brand-text { color: #c8a84e; text-shadow: 0 0 10px rgba(200, 168, 78, 0.4); }
[data-theme="darksouls"] .server-icon.home { background: linear-gradient(135deg, #5a4420, #c8a84e); box-shadow: 0 0 8px rgba(200, 168, 78, 0.3); }
[data-theme="darksouls"] .channel-item.active::before { background: #c8a84e; box-shadow: 0 0 6px rgba(200, 168, 78, 0.5); }
[data-theme="darksouls"] .inline-code { color: #dcc06a; }
[data-theme="darksouls"] .message-avatar, [data-theme="darksouls"] .message-avatar-img { border: 1px solid rgba(200, 168, 78, 0.2); }

/* ─── THEME: Elden Ring ────────────────────────────────── */
[data-theme="eldenring"] {
  --bg-primary:    #08080e;
  --bg-secondary:  #0c0c16;
  --bg-tertiary:   #14141e;
  --bg-hover:      #1c1c2a;
  --bg-active:     #242438;
  --bg-input:      #060608;
  --bg-card:       #0c0c16;

  --accent:        #d4a832;
  --accent-hover:  #e8c050;
  --accent-dim:    #b08820;
  --accent-glow:   rgba(212, 168, 50, 0.35);

  --text-primary:  #e0d8c8;
  --text-secondary:#a098a0;
  --text-muted:    #584860;
  --text-link:     #80a0d0;

  --border:        #1e1e30;
  --border-light:  #2a2a40;

  --success:       #60b060;
  --danger:        #c03020;
  --warning:       #d4a832;

  --led-on:        #d4a832;
  --led-off:       #0a0a10;
  --led-glow:      rgba(212, 168, 50, 0.5);

  --font-main:     'Palatino Linotype', Georgia, serif;
  --font-heading:  'Palatino Linotype', Georgia, serif;
  --font-mono:     'Consolas', monospace;

  --theme-logo:    "💍";
  --msg-glow:      0 0 4px rgba(212, 168, 50, 0.06);
}

[data-theme="eldenring"] .brand-text { background: linear-gradient(90deg, #d4a832, #8080c0); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
[data-theme="eldenring"] .server-icon.home { background: linear-gradient(135deg, #3a3060, #d4a832); box-shadow: 0 0 10px rgba(212, 168, 50, 0.3); }
[data-theme="eldenring"] .channel-item.active::before { background: #d4a832; box-shadow: 0 0 8px rgba(212, 168, 50, 0.5); }
[data-theme="eldenring"] .inline-code { color: #80a0d0; }
[data-theme="eldenring"] .message-avatar, [data-theme="eldenring"] .message-avatar-img { border: 1px solid rgba(212, 168, 50, 0.2); }

/* ─── THEME: Minecraft ─────────────────────────────────── */
[data-theme="minecraft"] {
  --bg-primary:    #1a1a1a;
  --bg-secondary:  #222222;
  --bg-tertiary:   #2e2e2e;
  --bg-hover:      #3a3a3a;
  --bg-active:     #444444;
  --bg-input:      #141414;
  --bg-card:       #222222;

  --accent:        #55bb55;
  --accent-hover:  #70d070;
  --accent-dim:    #3a8a3a;
  --accent-glow:   rgba(85, 187, 85, 0.3);

  --text-primary:  #e8e8e8;
  --text-secondary:#aaaaaa;
  --text-muted:    #666666;
  --text-link:     #55bbff;

  --border:        #3a3a3a;
  --border-light:  #4a4a4a;

  --success:       #55bb55;
  --danger:        #cc3333;
  --warning:       #ffaa00;

  --led-on:        #55bb55;
  --led-off:       #1a1a1a;
  --led-glow:      rgba(85, 187, 85, 0.5);

  --font-main:     'Segoe UI', system-ui, sans-serif;
  --font-heading:  'Segoe UI', system-ui, sans-serif;
  --font-mono:     'Consolas', monospace;

  --theme-logo:    "⛏️";
}

[data-theme="minecraft"] .brand-text { color: #55bb55; text-shadow: 2px 2px 0 #2a5a2a; }
[data-theme="minecraft"] .server-icon.home { background: #55bb55; box-shadow: 2px 2px 0 #2a5a2a; border-radius: 4px; }
[data-theme="minecraft"] .server-icon:hover { border-radius: 4px; }
[data-theme="minecraft"] .channel-item.active::before { background: #55bb55; }
[data-theme="minecraft"] .inline-code { color: #55bbff; }
[data-theme="minecraft"] .message-avatar, [data-theme="minecraft"] .message-avatar-img { border: 2px solid #3a3a3a; border-radius: 4px; }
[data-theme="minecraft"] .channel-badge { background: #55bb55; color: #1a1a1a; }

/* ─── THEME: Final Fantasy X ───────────────────────────── */
[data-theme="ffx"] {
  --bg-primary:    #080e1a;
  --bg-secondary:  #0b1325;
  --bg-tertiary:   #101a30;
  --bg-hover:      #16223e;
  --bg-active:     #1c2a4a;
  --bg-input:      #060a14;
  --bg-card:       #0b1325;

  --accent:        #40a8e0;
  --accent-hover:  #60c0f0;
  --accent-dim:    #2080b0;
  --accent-glow:   rgba(64, 168, 224, 0.3);

  --text-primary:  #d0e4f0;
  --text-secondary:#80a0c0;
  --text-muted:    #3a5a78;
  --text-link:     #60c0f0;

  --border:        #1a2a40;
  --border-light:  #223450;

  --success:       #40c8a0;
  --danger:        #e0504a;
  --warning:       #f0c040;

  --led-on:        #40a8e0;
  --led-off:       #0a1020;
  --led-glow:      rgba(64, 168, 224, 0.5);

  --font-main:     'Segoe UI', system-ui, sans-serif;
  --font-heading:  'Segoe UI', system-ui, sans-serif;
  --font-mono:     'Consolas', monospace;

  --theme-logo:    "⚔️";
  --msg-glow:      0 0 4px rgba(64, 168, 224, 0.06);
}

[data-theme="ffx"] .brand-text { background: linear-gradient(90deg, #40a8e0, #c0a040); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
[data-theme="ffx"] .server-icon.home { background: linear-gradient(135deg, #1a4070, #40a8e0); box-shadow: 0 0 10px rgba(64, 168, 224, 0.3); }
[data-theme="ffx"] .channel-item.active::before { background: #40a8e0; box-shadow: 0 0 8px rgba(64, 168, 224, 0.4); }
[data-theme="ffx"] .inline-code { color: #60c0f0; }
[data-theme="ffx"] .message-avatar, [data-theme="ffx"] .message-avatar-img { border: 1px solid rgba(64, 168, 224, 0.25); }

/* ─── THEME: Legend of Zelda ───────────────────────────── */
[data-theme="zelda"] {
  --bg-primary:    #0a120a;
  --bg-secondary:  #0e180e;
  --bg-tertiary:   #142014;
  --bg-hover:      #1c2c1c;
  --bg-active:     #243424;
  --bg-input:      #060e06;
  --bg-card:       #0e180e;

  --accent:        #44bb44;
  --accent-hover:  #60d060;
  --accent-dim:    #2a8a2a;
  --accent-glow:   rgba(68, 187, 68, 0.3);

  --text-primary:  #d8e8d0;
  --text-secondary:#90b088;
  --text-muted:    #4a6a42;
  --text-link:     #70c870;

  --border:        #1c2e1c;
  --border-light:  #283a28;

  --success:       #44bb44;
  --danger:        #cc3030;
  --warning:       #e8c030;

  --led-on:        #44bb44;
  --led-off:       #0a140a;
  --led-glow:      rgba(68, 187, 68, 0.5);

  --font-main:     'Segoe UI', system-ui, sans-serif;
  --font-heading:  'Segoe UI', system-ui, sans-serif;
  --font-mono:     'Consolas', monospace;

  --theme-logo:    "🗡️";
}

[data-theme="zelda"] .brand-text { background: linear-gradient(90deg, #44bb44, #e8c030); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
[data-theme="zelda"] .server-icon.home { background: linear-gradient(135deg, #1a6a1a, #e8c030); box-shadow: 0 0 8px rgba(68, 187, 68, 0.3); }
[data-theme="zelda"] .channel-item.active::before { background: #44bb44; box-shadow: 0 0 6px rgba(68, 187, 68, 0.5); }
[data-theme="zelda"] .inline-code { color: #70c870; }
[data-theme="zelda"] .mention { background: rgba(68, 187, 68, 0.15); color: #60d060; }
[data-theme="zelda"] .message-avatar, [data-theme="zelda"] .message-avatar-img { border: 1px solid rgba(68, 187, 68, 0.25); }
[data-theme="zelda"] .channel-badge { background: #44bb44; color: #0a120a; }

/* ─── THEME: Fallout / PIP-Boy ─────────────────────────── */
[data-theme="fallout"] {
  --bg-primary:    #0a0e08;
  --bg-secondary:  #0e1410;
  --bg-tertiary:   #141c14;
  --bg-hover:      #1a2818;
  --bg-active:     #1e3020;
  --bg-input:      #060a04;
  --bg-card:       #0c1208;

  --accent:        #14fe17;
  --accent-hover:  #44ff44;
  --accent-dim:    #0abc0e;
  --accent-glow:   rgba(20, 254, 23, 0.25);

  --text-primary:  #14fe17;
  --text-secondary:#0ecc12;
  --text-muted:    #0a6e0c;
  --text-link:     #44ff44;

  --border:        #0f5e10;
  --border-light:  #148014;

  --success:       #14fe17;
  --danger:        #ff4444;
  --warning:       #cccc00;

  --led-on:        #14fe17;
  --led-off:       #0a1408;
  --led-glow:      rgba(20, 254, 23, 0.6);

  --font-main:     'Share Tech Mono', 'Courier New', monospace;
  --font-heading:  'Share Tech Mono', 'Courier New', monospace;
  --font-mono:     'Share Tech Mono', 'Courier New', monospace;

  --theme-logo:    "☢️";
  --scanline:      repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(20, 254, 23, 0.03) 2px,
    rgba(20, 254, 23, 0.03) 4px
  );
}
[data-theme="fallout"] .brand-text { color: #14fe17; text-shadow: 0 0 8px rgba(20, 254, 23, 0.6); letter-spacing: 2px; text-transform: uppercase; }
[data-theme="fallout"] .server-icon.home { background: #0a1a08; border: 1px solid #14fe17; box-shadow: 0 0 8px rgba(20, 254, 23, 0.3); color: #14fe17; }
[data-theme="fallout"] .channel-item.active::before { background: #14fe17; box-shadow: 0 0 8px rgba(20, 254, 23, 0.6); }
[data-theme="fallout"] .message-avatar, [data-theme="fallout"] .message-avatar-img { border: 1px solid #14fe17; border-radius: 2px; }
[data-theme="fallout"] .inline-code { color: #14fe17; background: rgba(20, 254, 23, 0.08); border: 1px solid rgba(20, 254, 23, 0.2); }
[data-theme="fallout"] .channel-badge { background: #14fe17; color: #0a0e08; }
[data-theme="fallout"] .sidebar { border-right: 1px solid rgba(20, 254, 23, 0.2); }
[data-theme="fallout"] .channel-header { border-bottom: 1px solid rgba(20, 254, 23, 0.2); }
[data-theme="fallout"] .message-row { text-shadow: 0 0 2px rgba(20, 254, 23, 0.15); }
[data-theme="fallout"] .modal { border: 1px solid rgba(20, 254, 23, 0.3); box-shadow: 0 0 20px rgba(20, 254, 23, 0.15); }
[data-theme="fallout"] input, [data-theme="fallout"] textarea { border: 1px solid rgba(20, 254, 23, 0.15) !important; }
[data-theme="fallout"] .message-input-container { border: 1px solid rgba(20, 254, 23, 0.2); border-radius: 2px; }
[data-theme="fallout"] ::selection { background: #14fe17; color: #0a0e08; }

/* ─── THEME: Scripture (Parchment & Gold) ──────────────── */
[data-theme="scripture"] {
  --bg-primary:    #1a1610;
  --bg-secondary:  #201c14;
  --bg-tertiary:   #2a2418;
  --bg-hover:      #342c20;
  --bg-active:     #3e3428;
  --bg-input:      #14120c;
  --bg-card:       #1e1a12;

  --accent:        #c8a84c;
  --accent-hover:  #dcc06a;
  --accent-dim:    #a08030;
  --accent-glow:   rgba(200, 168, 76, 0.25);

  --text-primary:  #e8dcc8;
  --text-secondary:#b8a888;
  --text-muted:    #6e6048;
  --text-link:     #dcc06a;

  --border:        #302818;
  --border-light:  #3e3422;

  --success:       #6aaa4a;
  --danger:        #b84030;
  --warning:       #d4a030;

  --led-on:        #c8a84c;
  --led-off:       #1a1408;
  --led-glow:      rgba(200, 168, 76, 0.5);

  --font-main:     'Georgia', 'Times New Roman', serif;
  --font-heading:  'Georgia', 'Times New Roman', serif;
  --font-mono:     'Consolas', monospace;

  --theme-logo:    "✝️";
}
[data-theme="scripture"] .brand-text { color: #c8a84c; text-shadow: 0 0 10px rgba(200, 168, 76, 0.3); font-style: italic; }
[data-theme="scripture"] .server-icon.home { background: linear-gradient(135deg, #2a2010, #c8a84c); box-shadow: 0 0 8px rgba(200, 168, 76, 0.2); }
[data-theme="scripture"] .channel-item.active::before { background: #c8a84c; box-shadow: 0 0 6px rgba(200, 168, 76, 0.4); }
[data-theme="scripture"] .inline-code { color: #dcc06a; background: rgba(200, 168, 76, 0.08); }
[data-theme="scripture"] .mention { background: rgba(200, 168, 76, 0.12); color: #dcc06a; }
[data-theme="scripture"] .message-avatar, [data-theme="scripture"] .message-avatar-img { border: 1px solid rgba(200, 168, 76, 0.2); }
[data-theme="scripture"] .channel-badge { background: #c8a84c; color: #1a1610; }
[data-theme="scripture"] .modal { border: 1px solid rgba(200, 168, 76, 0.2); box-shadow: 0 0 20px rgba(200, 168, 76, 0.08); }
[data-theme="scripture"] ::selection { background: #c8a84c; color: #1a1610; }

/* Scripture ambient: sunlight through a crucifix window */
@keyframes scripture-cross-pulse {
  0%, 100% { opacity: 0.03; }
  50%      { opacity: 0.07; }
}
[data-theme="scripture"] .main {
  position: relative;
}
[data-theme="scripture"] .main::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    /* vertical beam */
    linear-gradient(to bottom,
      transparent 10%,
      rgba(200, 168, 76, 0.08) 25%,
      rgba(200, 168, 76, 0.14) 40%,
      rgba(200, 168, 76, 0.08) 55%,
      transparent 75%)
    center / 6% 100% no-repeat,
    /* horizontal beam */
    linear-gradient(to right,
      transparent 25%,
      rgba(200, 168, 76, 0.08) 38%,
      rgba(200, 168, 76, 0.12) 46%,
      rgba(200, 168, 76, 0.12) 54%,
      rgba(200, 168, 76, 0.08) 62%,
      transparent 75%)
    center 30% / 100% 5% no-repeat,
    /* warm radial glow behind the cross */
    radial-gradient(ellipse 30% 50% at 50% 38%,
      rgba(200, 168, 76, 0.06) 0%,
      transparent 70%);
  animation: scripture-cross-pulse 8s ease-in-out infinite;
  mix-blend-mode: screen;
}

/* ─── THEME: Chapel (Stained Glass) ────────────────────── */
[data-theme="chapel"] {
  --bg-primary:    #0e0c18;
  --bg-secondary:  #12101e;
  --bg-tertiary:   #1a1628;
  --bg-hover:      #221e32;
  --bg-active:     #2a263c;
  --bg-input:      #0a0814;
  --bg-card:       #12101e;

  --accent:        #8a5cf0;
  --accent-hover:  #a07af8;
  --accent-dim:    #6a3cc8;
  --accent-glow:   rgba(138, 92, 240, 0.25);

  --text-primary:  #e0d8f0;
  --text-secondary:#a898c8;
  --text-muted:    #5e5078;
  --text-link:     #70b8ff;

  --border:        #201a30;
  --border-light:  #2c2640;

  --success:       #4acc70;
  --danger:        #cc4040;
  --warning:       #e8b840;

  --led-on:        #8a5cf0;
  --led-off:       #0e0a18;
  --led-glow:      rgba(138, 92, 240, 0.5);

  --font-main:     'Georgia', 'Times New Roman', serif;
  --font-heading:  'Georgia', 'Times New Roman', serif;
  --font-mono:     'Consolas', monospace;

  --theme-logo:    "⛪";
}
[data-theme="chapel"] .brand-text { background: linear-gradient(90deg, #8a5cf0, #70b8ff, #e8b840); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
[data-theme="chapel"] .server-icon.home { background: linear-gradient(135deg, #4a2ca0, #8a5cf0); box-shadow: 0 0 10px rgba(138, 92, 240, 0.3); }
[data-theme="chapel"] .channel-item.active::before { background: #8a5cf0; box-shadow: 0 0 6px rgba(138, 92, 240, 0.5); }
[data-theme="chapel"] .inline-code { color: #a07af8; background: rgba(138, 92, 240, 0.08); }
[data-theme="chapel"] .mention { background: rgba(138, 92, 240, 0.12); color: #a07af8; }
[data-theme="chapel"] .message-avatar, [data-theme="chapel"] .message-avatar-img { border: 1px solid rgba(138, 92, 240, 0.2); }
[data-theme="chapel"] .channel-badge { background: #8a5cf0; color: #0e0c18; }
[data-theme="chapel"] .modal { border: 1px solid rgba(138, 92, 240, 0.2); box-shadow: 0 0 20px rgba(138, 92, 240, 0.1); }
[data-theme="chapel"] ::selection { background: #8a5cf0; color: #0e0c18; }

/* Chapel ambient: prismatic stained glass light beams */
@keyframes chapel-glass-shift {
  0%   { opacity: 0.04; filter: hue-rotate(0deg); }
  33%  { opacity: 0.07; filter: hue-rotate(15deg); }
  66%  { opacity: 0.05; filter: hue-rotate(-10deg); }
  100% { opacity: 0.04; filter: hue-rotate(0deg); }
}
[data-theme="chapel"] .main {
  position: relative;
}
[data-theme="chapel"] .main::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    /* left violet beam */
    linear-gradient(155deg,
      transparent 15%,
      rgba(138, 92, 240, 0.06) 25%,
      rgba(102, 51, 204, 0.09) 35%,
      transparent 50%)
    no-repeat,
    /* center rose beam */
    linear-gradient(175deg,
      transparent 20%,
      rgba(200, 80, 140, 0.05) 35%,
      rgba(220, 100, 160, 0.08) 45%,
      transparent 60%)
    no-repeat,
    /* right gold beam */
    linear-gradient(195deg,
      transparent 30%,
      rgba(200, 168, 76, 0.04) 45%,
      rgba(220, 190, 100, 0.07) 55%,
      transparent 70%)
    no-repeat,
    /* warm highlight core */
    radial-gradient(ellipse 40% 35% at 50% 25%,
      rgba(138, 92, 240, 0.04) 0%,
      transparent 70%);
  animation: chapel-glass-shift 12s ease-in-out infinite;
  mix-blend-mode: screen;
}

/* ─── THEME: Gospel (Light Cream & Ruby) ───────────────── */
[data-theme="gospel"] {
  --bg-primary:    #f5f0e8;
  --bg-secondary:  #ebe4d8;
  --bg-tertiary:   #ddd5c8;
  --bg-hover:      #d0c8b8;
  --bg-active:     #c5bca8;
  --bg-input:      #faf7f0;
  --bg-card:       #eee8dc;

  --accent:        #8b2032;
  --accent-hover:  #a83040;
  --accent-dim:    #6e1828;
  --accent-glow:   rgba(139, 32, 50, 0.2);

  --text-primary:  #2a2018;
  --text-secondary:#5a4e40;
  --text-muted:    #8a7e70;
  --text-link:     #8b2032;

  --border:        #d0c4b0;
  --border-light:  #c0b4a0;

  --success:       #3a7a30;
  --danger:        #b83030;
  --warning:       #c08a20;

  --led-on:        #3a7a30;
  --led-off:       #c0b4a0;
  --led-glow:      rgba(58, 122, 48, 0.5);

  --font-main:     'Georgia', 'Times New Roman', serif;
  --font-heading:  'Georgia', 'Times New Roman', serif;
  --font-mono:     'Consolas', monospace;

  --theme-logo:    "🕊️";
}
[data-theme="gospel"] .brand-text { color: #8b2032; font-style: italic; }
[data-theme="gospel"] .server-icon.home { background: linear-gradient(135deg, #8b2032, #c8a84c); color: #fff; }
[data-theme="gospel"] .channel-item.active::before { background: #8b2032; box-shadow: 0 0 4px rgba(139, 32, 50, 0.3); }
[data-theme="gospel"] .inline-code { color: #8b2032; background: rgba(139, 32, 50, 0.06); border: 1px solid rgba(139, 32, 50, 0.12); }
[data-theme="gospel"] .mention { background: rgba(139, 32, 50, 0.08); color: #8b2032; }
[data-theme="gospel"] .message-avatar, [data-theme="gospel"] .message-avatar-img { border: 1px solid rgba(139, 32, 50, 0.15); }
[data-theme="gospel"] .channel-badge { background: #8b2032; color: #f5f0e8; }
[data-theme="gospel"] .sidebar { background: var(--bg-secondary); border-right: 1px solid var(--border); }
[data-theme="gospel"] .modal { border: 1px solid var(--border); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); }
[data-theme="gospel"] ::selection { background: #8b2032; color: #f5f0e8; }

/* Gospel ambient: soft divine radiance descending */
@keyframes gospel-radiance {
  0%, 100% { opacity: 0.04; transform: scale(1); }
  50%      { opacity: 0.08; transform: scale(1.03); }
}
[data-theme="gospel"] .main {
  position: relative;
}
[data-theme="gospel"] .main::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    /* warm descending ray from top center */
    linear-gradient(180deg,
      rgba(200, 168, 76, 0.06) 0%,
      rgba(220, 195, 120, 0.04) 15%,
      transparent 45%)
    no-repeat,
    /* ruby tinted glow */
    radial-gradient(ellipse 50% 40% at 50% 20%,
      rgba(139, 32, 50, 0.04) 0%,
      rgba(200, 168, 76, 0.02) 40%,
      transparent 70%),
    /* soft dove-like light spread */
    radial-gradient(circle at 50% 10%,
      rgba(255, 250, 240, 0.05) 0%,
      transparent 50%);
  animation: gospel-radiance 10s ease-in-out infinite;
}

/* ─── THEME: Midnight Purple ────────────────────────────── */
[data-theme="midnightpurple"] {
  --bg-primary:    #0d0a1a;
  --bg-secondary:  #140f29;
  --bg-tertiary:   #1a1433;
  --bg-card:       #1e1840;
  --bg-input:      #1a1433;
  --bg-hover:      rgba(138, 92, 246, 0.12);
  --text-primary:  #e8e0f0;
  --text-secondary:#a899c4;
  --text-muted:    #6b5a8a;
  --accent:        #8a5cf6;
  --accent-hover:  #7c4deb;
  --border:        rgba(138, 92, 246, 0.15);
  --success:       #4ade80;
  --danger:        #f43f5e;
  --warning:       #fbbf24;
  --radius-sm: 6px;
  --radius-md: 10px;
}
[data-theme="midnightpurple"] .brand-text { color: #8a5cf6; text-shadow: 0 0 12px rgba(138, 92, 246, 0.4); }
[data-theme="midnightpurple"] .server-icon.home { background: linear-gradient(135deg, #4c1d95, #8a5cf6); box-shadow: 0 0 10px rgba(138, 92, 246, 0.3); }
[data-theme="midnightpurple"] .channel-item.active::before { background: #8a5cf6; box-shadow: 0 0 6px rgba(138, 92, 246, 0.5); }
[data-theme="midnightpurple"] .btn-send { box-shadow: 0 0 8px rgba(138, 92, 246, 0.3); }
[data-theme="midnightpurple"] .message-avatar, [data-theme="midnightpurple"] .message-avatar-img { border: 1px solid rgba(138, 92, 246, 0.25); }
[data-theme="midnightpurple"] .channel-badge { background: #8a5cf6; color: #fff; }
[data-theme="midnightpurple"] .inline-code { color: #a78bfa; background: rgba(138, 92, 246, 0.1); }
[data-theme="midnightpurple"] .mention { background: rgba(138, 92, 246, 0.15); color: #a78bfa; }
[data-theme="midnightpurple"] .reaction-badge.own { background: rgba(138, 92, 246, 0.2); border-color: #8a5cf6; }
[data-theme="midnightpurple"] .reaction-badge:hover { background: rgba(138, 92, 246, 0.15); border-color: #8a5cf6; }
[data-theme="midnightpurple"] ::selection { background: rgba(138, 92, 246, 0.3); }
[data-theme="midnightpurple"] ::-webkit-scrollbar-thumb { background: rgba(138, 92, 246, 0.3) !important; }
[data-theme="midnightpurple"] ::-webkit-scrollbar-thumb:hover { background: rgba(138, 92, 246, 0.5) !important; }

/* ─── THEME: CRT ───────────────────────────────────────── */
[data-theme="crt"] {
  --bg-primary:    #080808;
  --bg-secondary:  #0a0a0a;
  --bg-tertiary:   #111111;
  --bg-hover:      #1a1a1a;
  --bg-active:     #222222;
  --bg-input:      #050505;
  --bg-card:       #0a0a0a;

  --accent:        #ffb000;
  --accent-hover:  #ffc844;
  --accent-dim:    #cc8800;
  --accent-glow:   rgba(255, 176, 0, 0.3);

  --text-primary:  #ffb000;
  --text-secondary:#cc8800;
  --text-muted:    #664400;
  --text-link:     #ffc844;

  --border:        #332800;
  --border-light:  #4a3a10;

  --success:       #00cc00;
  --danger:        #ff2222;
  --warning:       #ffcc00;

  --led-on:        #ffb000;
  --led-off:       #221800;
  --led-glow:      rgba(255, 176, 0, 0.5);

  --font-main:     'VT323', 'Courier New', monospace;
  --font-heading:  'VT323', 'Courier New', monospace;
  --font-mono:     'VT323', 'Courier New', monospace;

  --theme-logo:    "📺";
}
[data-theme="crt"] .brand-text { color: #ffb000; text-shadow: 0 0 6px rgba(255, 176, 0, 0.5); letter-spacing: 3px; text-transform: uppercase; }
[data-theme="crt"] .server-icon.home { background: #111; border: 2px solid #ffb000; box-shadow: 0 0 10px rgba(255, 176, 0, 0.2); color: #ffb000; }
[data-theme="crt"] .channel-item.active::before { background: #ffb000; box-shadow: 0 0 6px rgba(255, 176, 0, 0.5); }
[data-theme="crt"] .message-avatar, [data-theme="crt"] .message-avatar-img { border: 1px solid rgba(255, 176, 0, 0.3); border-radius: 0; }
[data-theme="crt"] .inline-code { color: #ffb000; background: rgba(255, 176, 0, 0.08); }
[data-theme="crt"] .channel-badge { background: #ffb000; color: #080808; }
[data-theme="crt"] .sidebar { border-right: 1px solid rgba(255, 176, 0, 0.15); }
[data-theme="crt"] .channel-header { border-bottom: 1px solid rgba(255, 176, 0, 0.15); }
[data-theme="crt"] .message-row { text-shadow: 0 0 1px rgba(255, 176, 0, 0.3); }
[data-theme="crt"] .modal { border: 2px solid #ffb000; box-shadow: 0 0 30px rgba(255, 176, 0, 0.15), inset 0 0 60px rgba(255, 176, 0, 0.03); border-radius: 0; }
[data-theme="crt"] input, [data-theme="crt"] textarea { border: 1px solid rgba(255, 176, 0, 0.2) !important; border-radius: 0 !important; }
[data-theme="crt"] .btn-sm { border-radius: 0; }
[data-theme="crt"] .message-input-container { border: 1px solid rgba(255, 176, 0, 0.2); border-radius: 0; }
[data-theme="crt"] ::selection { background: #ffb000; color: #080808; }

/* ─── THEME: Windows 95 ────────────────────────────────── */
[data-theme="win95"] {
  --bg-primary:    #bfbfbf;
  --bg-secondary:  #bfbfbf;
  --bg-tertiary:   #bfbfbf;
  --bg-hover:      #000080;
  --bg-active:     #000080;
  --bg-input:      #ffffff;
  --bg-card:       #ffffff;

  --accent:        #000080;
  --accent-hover:  #0000aa;
  --accent-dim:    #000066;
  --accent-glow:   rgba(0, 0, 128, 0.2);

  --text-primary:  #000000;
  --text-secondary:#000000;
  --text-muted:    #808080;
  --text-link:     #000080;

  --border:        #808080;
  --border-light:  #dfdfdf;

  --success:       #008000;
  --danger:        #cc0000;
  --warning:       #808000;

  --led-on:        #008000;
  --led-off:       #808080;
  --led-glow:      rgba(0, 128, 0, 0.4);

  --font-main:     'MS Sans Serif', 'Tahoma', 'Arial', sans-serif;
  --font-heading:  'MS Sans Serif', 'Tahoma', 'Arial', sans-serif;
  --font-mono:     'Fixedsys', 'Courier New', monospace;

  --theme-logo:    "🪟";
  --scanline:      none;
}
[data-theme="win95"] .brand-text { color: #fff; font-weight: 700; text-shadow: none; }
[data-theme="win95"] .server-icon.home { background: #bfbfbf; border: 3px outset #fff; color: #000; border-radius: 0; box-shadow: none; }
[data-theme="win95"] .server-icon { border-radius: 0 !important; }
[data-theme="win95"] .channel-item.active::before { background: #000080; }
[data-theme="win95"] .inline-code { color: #000080; background: #fff; border: 1px inset #808080; }
[data-theme="win95"] .channel-badge { background: #000080; color: #fff; border-radius: 0; }
[data-theme="win95"] .sidebar { background: #bfbfbf; border-right: 3px outset #fff; }
[data-theme="win95"] .sidebar-header { background: linear-gradient(90deg, #000080, #1084d0); border-bottom: 3px outset #fff; }
[data-theme="win95"] .sidebar-header .brand-text { color: #fff; }
[data-theme="win95"] .sidebar .section-label,
[data-theme="win95"] .sidebar .panel-title { color: #000; font-weight: 700; }
[data-theme="win95"] .sidebar .channel-item { color: #000; border-radius: 0; }
[data-theme="win95"] .sidebar .channel-item:hover { background: #000080; color: #fff; }
[data-theme="win95"] .sidebar .channel-item.active { background: #000080; color: #fff; }
[data-theme="win95"] .sidebar .user-item-name { color: #000; }
[data-theme="win95"] .sidebar .channel-item.active .user-item-name,
[data-theme="win95"] .sidebar .channel-item:hover .user-item-name { color: #fff; }
[data-theme="win95"] .sidebar .current-user { color: #000; }
[data-theme="win95"] .sidebar .muted-text { color: #808080; }
[data-theme="win95"] .sidebar-bottom-bar { background: #bfbfbf; border-top: 3px outset #fff; }
[data-theme="win95"] .sidebar-bottom-btn { color: #000; background: #bfbfbf; border: 3px outset #fff; border-radius: 0; margin: 2px; }
[data-theme="win95"] .sidebar-bottom-btn:hover { background: #dfdfdf; }
[data-theme="win95"] .sidebar-bottom-btn:active { border: 3px inset #808080; }
[data-theme="win95"] .channel-header { background: linear-gradient(90deg, #000080, #1084d0); border-bottom: 3px outset #fff; color: #fff; }
[data-theme="win95"] .channel-header * { color: #fff; }
[data-theme="win95"] .channel-code-tag { background: #fff; color: #000; border: 1px inset #808080; border-radius: 0; }
[data-theme="win95"] .btn-sm { background: #bfbfbf; color: #000; border: 3px outset #fff; border-radius: 0; }
[data-theme="win95"] .btn-sm:hover { background: #dfdfdf; color: #000; }
[data-theme="win95"] .btn-sm:active { border: 3px inset #808080; }
[data-theme="win95"] .btn-sm.btn-accent { background: #bfbfbf; color: #000; border: 3px outset #fff; }
[data-theme="win95"] .btn-sm.btn-accent:hover { background: #dfdfdf; color: #000; }
[data-theme="win95"] .btn-sm.btn-danger { background: #bfbfbf; color: #cc0000; border: 3px outset #fff; }


/* Win95 icon buttons near username (rename, logout) — beveled */
[data-theme="win95"] .icon-btn {
  background: #bfbfbf; color: #000; border: 2px outset #fff;
  border-radius: 0 !important; padding: 3px 5px;
}
[data-theme="win95"] .icon-btn:hover { background: #dfdfdf; color: #000; }
[data-theme="win95"] .icon-btn:active { border: 2px inset #808080; }

/* Win95 settings button */
[data-theme="win95"] .btn-settings-popout {
  background: #bfbfbf; color: #000; border: 3px outset #fff;
  border-radius: 0 !important;
}
[data-theme="win95"] .btn-settings-popout:hover { background: #dfdfdf; color: #000; }
[data-theme="win95"] .btn-settings-popout:active { border: 3px inset #808080; }
[data-theme="win95"] .btn-settings-popout svg { color: #000; }

/* Win95 status picker dot — beveled */
[data-theme="win95"] .status-picker-dot { border: 2px outset #fff; border-radius: 0 !important; }

/* Win95 generic modal buttons — always black text on gray */
[data-theme="win95"] .modal button,
[data-theme="win95"] .modal-overlay button {
  background: #bfbfbf; color: #000; border: 3px outset #fff; border-radius: 0 !important;
}
[data-theme="win95"] .modal button:hover,
[data-theme="win95"] .modal-overlay button:hover { background: #dfdfdf; color: #000; }
[data-theme="win95"] .modal button:active,
[data-theme="win95"] .modal-overlay button:active { border: 3px inset #808080; }
[data-theme="win95"] .modal .btn-danger,
[data-theme="win95"] .modal-overlay .btn-danger { color: #cc0000; }

/* Win95 message toolbar buttons */
[data-theme="win95"] .msg-toolbar button {
  background: #bfbfbf; color: #000; border: 2px outset #fff; border-radius: 0 !important;
}
[data-theme="win95"] .msg-toolbar button:hover { background: #dfdfdf; }
[data-theme="win95"] .modal { background: #bfbfbf; border: 3px outset #fff; border-radius: 0; box-shadow: 2px 2px 0 #000; }
[data-theme="win95"] .modal h3 { background: linear-gradient(90deg, #000080, #1084d0); color: #fff; margin: -20px -24px 16px -24px; padding: 4px 8px; border-radius: 0; font-weight: 700; font-size: 12px; }
/* Message group separators were attempted twice (per-row, then group-only)
   and both produced visually inconsistent results — sometimes a line, sometimes
   a half-line, sometimes a doubled line depending on whether the previous
   author's last message was a compact follow-up vs a group-leader.  The Win95
   theme already gives enough vertical separation via avatar bevels and the
   author colour change; an extra horizontal line just looks buggy.  Leaving
   the rule out entirely is the cleanest option. */
[data-theme="win95"] .message-row:hover { background: #dfdfdf; }
/* Win95 user-group separator: the global rule paints a 1px line in
   `var(--border)` which on win95 is #808080 — almost black on the
   #bfbfbf surface, reading as a thick line and (paired with the avatar's
   3px outset highlight) often appearing doubled.  Override with the
   lighter palette colour and shrink the spacing so it matches the
   subtler Minecraft / dark-theme look the user expects. */
[data-theme="win95"] .message.message-user-sep {
  border-top-color: #dfdfdf !important;
  margin-top: 4px !important;
  padding-top: 2px !important;
}
/* And explicitly suppress any phantom border that could land on
   .message-row itself — nothing should ever draw one, but if a stray
   inherited rule does, this will neutralise it on win95. */
[data-theme="win95"] .message > .message-row,
[data-theme="win95"] .message-compact > .message-row {
  border: 0 !important;
}
[data-theme="win95"] .message-author { color: #000080; font-weight: 700; }
[data-theme="win95"] .message-input-container { background: #fff; border: 3px inset #808080; border-radius: 0; }
[data-theme="win95"] .input-actions-box { background: #bfbfbf; border: 2px outset #fff; border-radius: 0; }
[data-theme="win95"] .input-actions-divider { background: #808080; }
[data-theme="win95"] .input-actions-box .btn-upload,
[data-theme="win95"] .input-actions-box .btn-emoji,
[data-theme="win95"] .input-actions-box .btn-gif,
[data-theme="win95"] .input-actions-box .btn-poll { color: #000; border-radius: 0; }
[data-theme="win95"] .input-actions-box .btn-upload:hover,
[data-theme="win95"] .input-actions-box .btn-emoji:hover,
[data-theme="win95"] .input-actions-box .btn-gif:hover,
[data-theme="win95"] .input-actions-box .btn-poll:hover { background: #dfdfdf; }
[data-theme="win95"] .input-actions-box .btn-gif { border-color: #808080; }
[data-theme="win95"] input[type="text"], [data-theme="win95"] textarea { background: #fff; border: 3px inset #808080 !important; border-radius: 0 !important; }
[data-theme="win95"] .right-sidebar { background: #bfbfbf; border-left: 3px outset #fff; }
/* Bulletproof win95 backgrounds — explicitly paint every major surface in
   #bfbfbf so a stale inline custom-theme CSS variable on :root (e.g. left
   over from a prior 'custom' / 'rgb' theme session that wasn't cleared by
   the time the user landed on win95) can't leave the main message area or
   members panel rendering with a dark inherited bg. Prior reports showed
   the welcome screen & right panel rendering near-black while the explicitly
   styled sidebar / channel header still looked correct. */
[data-theme="win95"] body,
[data-theme="win95"] .message-area,
[data-theme="win95"] .messages,
[data-theme="win95"] .welcome-screen,
[data-theme="win95"] .right-sidebar-users,
[data-theme="win95"] .channel-list-section,
[data-theme="win95"] .left-sidebar-section { background: #bfbfbf !important; color: #000; }
[data-theme="win95"] .user-item-avatar { border-radius: 0; }
[data-theme="win95"] .message-avatar, [data-theme="win95"] .message-avatar-img { border-radius: 0; border: 3px outset #fff; }
[data-theme="win95"] ::selection { background: #000080; color: #fff; }
/* Win95 scrollbars: use scrollbar-color: auto so Chrome falls through to the
   ::-webkit-scrollbar pseudo-element pipeline (which supports gradients / border-radius).
   Setting explicit scrollbar-color triggers Chrome's flat-colour renderer that ignores
   webkit pseudo-element styling and always draws rounded thumbs. */
[data-theme="win95"] * { scrollbar-width: auto !important; scrollbar-color: auto !important; }
[data-theme="win95"] ::-webkit-scrollbar { width: 18px !important; height: 18px !important; }
[data-theme="win95"] ::-webkit-scrollbar-thumb {
  background:
    linear-gradient(to right,  #ffffff 0, #ffffff 2px, transparent 2px),
    linear-gradient(to bottom, #ffffff 0, #ffffff 2px, transparent 2px),
    linear-gradient(to left,   #404040 0, #404040 2px, transparent 2px),
    linear-gradient(to top,    #404040 0, #404040 2px, transparent 2px),
    linear-gradient(to right,  #dfdfdf 2px, #dfdfdf 3px, transparent 3px),
    linear-gradient(to bottom, #dfdfdf 2px, #dfdfdf 3px, transparent 3px),
    linear-gradient(to left,   #808080 2px, #808080 3px, transparent 3px),
    linear-gradient(to top,    #808080 2px, #808080 3px, transparent 3px),
    #bfbfbf !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  min-height: 32px;
  min-width: 32px;
}
[data-theme="win95"] ::-webkit-scrollbar-thumb:hover {
  background:
    linear-gradient(to right,  #ffffff 0, #ffffff 2px, transparent 2px),
    linear-gradient(to bottom, #ffffff 0, #ffffff 2px, transparent 2px),
    linear-gradient(to left,   #404040 0, #404040 2px, transparent 2px),
    linear-gradient(to top,    #404040 0, #404040 2px, transparent 2px),
    #d4d0c8 !important;
}
[data-theme="win95"] ::-webkit-scrollbar-thumb:active {
  background:
    linear-gradient(to right,  #404040 0, #404040 2px, transparent 2px),
    linear-gradient(to bottom, #404040 0, #404040 2px, transparent 2px),
    linear-gradient(to left,   #ffffff 0, #ffffff 2px, transparent 2px),
    linear-gradient(to top,    #ffffff 0, #ffffff 2px, transparent 2px),
    linear-gradient(to right,  #808080 2px, #808080 3px, transparent 3px),
    linear-gradient(to bottom, #808080 2px, #808080 3px, transparent 3px),
    linear-gradient(to left,   #dfdfdf 2px, #dfdfdf 3px, transparent 3px),
    linear-gradient(to top,    #dfdfdf 2px, #dfdfdf 3px, transparent 3px),
    #bfbfbf !important;
}
[data-theme="win95"] ::-webkit-scrollbar-track {
  background: repeating-conic-gradient(#bfbfbf 0% 25%, #fff 0% 50%) 50%/2px 2px !important;
  border: none !important;
}
[data-theme="win95"] ::-webkit-scrollbar-button {
  background:
    linear-gradient(to right,  #ffffff 0, #ffffff 2px, transparent 2px),
    linear-gradient(to bottom, #ffffff 0, #ffffff 2px, transparent 2px),
    linear-gradient(to left,   #404040 0, #404040 2px, transparent 2px),
    linear-gradient(to top,    #404040 0, #404040 2px, transparent 2px),
    #bfbfbf !important;
  border: none !important;
  box-shadow: none !important;
  display: block;
  height: 18px !important;
  width: 18px !important;
  border-radius: 0 !important;
}
[data-theme="win95"] ::-webkit-scrollbar-button:hover {
  background:
    linear-gradient(to right,  #ffffff 0, #ffffff 2px, transparent 2px),
    linear-gradient(to bottom, #ffffff 0, #ffffff 2px, transparent 2px),
    linear-gradient(to left,   #404040 0, #404040 2px, transparent 2px),
    linear-gradient(to top,    #404040 0, #404040 2px, transparent 2px),
    #d4d0c8 !important;
}
[data-theme="win95"] ::-webkit-scrollbar-button:active {
  background:
    linear-gradient(to right,  #404040 0, #404040 2px, transparent 2px),
    linear-gradient(to bottom, #404040 0, #404040 2px, transparent 2px),
    linear-gradient(to left,   #ffffff 0, #ffffff 2px, transparent 2px),
    linear-gradient(to top,    #ffffff 0, #ffffff 2px, transparent 2px),
    #bfbfbf !important;
}
/* Hide duplicate scrollbar arrows — keep only one button at each end.
   display:none alone is unreliable in some Chromium builds for scrollbar
   pseudo-elements, so also collapse them to zero size. */
[data-theme="win95"] ::-webkit-scrollbar-button:vertical:start:increment,
[data-theme="win95"] ::-webkit-scrollbar-button:vertical:end:decrement,
[data-theme="win95"] ::-webkit-scrollbar-button:horizontal:start:increment,
[data-theme="win95"] ::-webkit-scrollbar-button:horizontal:end:decrement {
  display: none !important;
  height: 0 !important;
  width: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
}
[data-theme="win95"] ::-webkit-scrollbar-corner { background: #bfbfbf !important; }
[data-theme="win95"] .server-bar { background: #bfbfbf; border-right: 3px outset #fff; }
[data-theme="win95"] .server-bar .server-icon { border-radius: 0; }
[data-theme="win95"] .status-bar { background: #bfbfbf; border-top: 3px outset #fff; }
[data-theme="win95"] .status-bar .status-item { border: 1px inset #808080; border-radius: 0; }
[data-theme="win95"] * { border-radius: 0 !important; }

/* Win95 sliders — rectangular gray boxes with proper 3D bevel */
[data-theme="win95"] input[type="range"] {
  -webkit-appearance: none; appearance: none;
  height: 22px; background: transparent;
}
[data-theme="win95"] input[type="range"]::-webkit-slider-runnable-track {
  background: #bfbfbf !important; height: 4px !important;
  border-top: 2px solid #404040 !important;
  border-left: 2px solid #404040 !important;
  border-right: 2px solid #ffffff !important;
  border-bottom: 2px solid #ffffff !important;
  border-radius: 0 !important;
}
[data-theme="win95"] input[type="range"]::-moz-range-track {
  background: #bfbfbf !important; height: 4px !important;
  border-top: 2px solid #404040 !important;
  border-left: 2px solid #404040 !important;
  border-right: 2px solid #ffffff !important;
  border-bottom: 2px solid #ffffff !important;
  border-radius: 0 !important;
}
[data-theme="win95"] input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 12px; height: 22px; margin-top: -10px;
  background: #bfbfbf;
  border-top: 2px solid #ffffff;
  border-left: 2px solid #ffffff;
  border-right: 2px solid #404040;
  border-bottom: 2px solid #404040;
  box-shadow: inset 1px 1px 0 #dfdfdf, inset -1px -1px 0 #808080;
  border-radius: 0 !important; cursor: pointer;
}
[data-theme="win95"] input[type="range"]::-webkit-slider-thumb:active {
  border-top: 2px solid #404040;
  border-left: 2px solid #404040;
  border-right: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #dfdfdf;
}
[data-theme="win95"] input[type="range"]::-moz-range-thumb {
  width: 12px; height: 22px;
  background: #bfbfbf;
  border-top: 2px solid #ffffff;
  border-left: 2px solid #ffffff;
  border-right: 2px solid #404040;
  border-bottom: 2px solid #404040;
  box-shadow: inset 1px 1px 0 #dfdfdf, inset -1px -1px 0 #808080;
  border-radius: 0 !important; cursor: pointer;
}
[data-theme="win95"] input[type="range"]::-moz-range-thumb:active {
  border-top: 2px solid #404040;
  border-left: 2px solid #404040;
  border-right: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #dfdfdf;
}
/* Vertical range sliders (orient=vertical, writing-mode) */
[data-theme="win95"] input[type="range"][orient="vertical"],
[data-theme="win95"] input[type="range"].vertical {
  writing-mode: vertical-lr;
  direction: rtl;
  appearance: none;
  width: 22px; height: auto;
}
[data-theme="win95"] input[type="range"][orient="vertical"]::-webkit-slider-thumb,
[data-theme="win95"] input[type="range"].vertical::-webkit-slider-thumb {
  width: 22px; height: 12px; margin-top: 0; margin-left: -10px;
}

/* Win95 text color — white text on navy backgrounds (hover/active/selected states) */
[data-theme="win95"] .channel-item:hover *,
[data-theme="win95"] .channel-item.active *,
[data-theme="win95"] .user-item:hover .user-item-name,
[data-theme="win95"] .user-item:hover .user-item-status,
[data-theme="win95"] select option:checked,
[data-theme="win95"] .dropdown-menu .dropdown-item:hover,
[data-theme="win95"] .autocomplete-item:hover,
[data-theme="win95"] .autocomplete-item.selected,
[data-theme="win95"] .modal-overlay .btn-accent,
[data-theme="win95"] .organize-item.dragging { color: #fff !important; }

/* Win95 toggle-row / select-row items that sit on navy hover */
[data-theme="win95"] .settings-section .toggle-row:hover,
[data-theme="win95"] .settings-section .select-row:hover { background: transparent; }

/* Win95 checkboxes — square, period-correct */
[data-theme="win95"] input[type="checkbox"] {
  -webkit-appearance: auto; appearance: auto;
  accent-color: #000080;
}

/* Win95 settings modal — full blue title bar like real Win95 */
[data-theme="win95"] .settings-header {
  background: linear-gradient(90deg, #000080, #1084d0);
  padding: 4px 8px;
  border-bottom: none;
  min-height: 24px;
}
[data-theme="win95"] .settings-header h3 {
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  font-family: "MS Sans Serif", "Microsoft Sans Serif", Tahoma, Arial, sans-serif;
  margin: 0;
  padding: 0;
  background: none;
}
[data-theme="win95"] .settings-close-btn {
  width: 18px; height: 18px;
  background: #bfbfbf;
  border: 2px outset #fff;
  color: #000;
  font-size: 12px;
  font-weight: 700;
  padding: 0;
  line-height: 1;
}
[data-theme="win95"] .settings-close-btn:hover { background: #dfdfdf; }

/* Win95 admin save bar — beveled gray box with black text */
[data-theme="win95"] .admin-save-bar {
  background: #bfbfbf;
  border-top: 3px outset #fff;
}
[data-theme="win95"] .btn-admin-save {
  background: #bfbfbf !important;
  color: #000 !important;
  border: 3px outset #fff;
  font-family: "MS Sans Serif", "Microsoft Sans Serif", Tahoma, Arial, sans-serif;
  font-size: 12px;
}
[data-theme="win95"] .btn-admin-save:hover { background: #dfdfdf !important; }
[data-theme="win95"] .btn-admin-save:active { border: 3px inset #808080; }

/* Win95 number inputs — boxy inset, no rounded corners */
[data-theme="win95"] .settings-number-input,
[data-theme="win95"] input[type="number"] {
  background: #fff;
  border: 2px inset #808080 !important;
  border-radius: 0 !important;
  color: #000;
  font-family: "MS Sans Serif", "Microsoft Sans Serif", Tahoma, Arial, sans-serif;
}

/* Win95 text inputs in settings */
[data-theme="win95"] .settings-text-input {
  background: #fff;
  border: 2px inset #808080 !important;
  border-radius: 0 !important;
  color: #000;
}

/* Win95 select dropdowns */
[data-theme="win95"] select {
  background: #fff;
  border: 2px inset #808080 !important;
  border-radius: 0 !important;
  color: #000;
  font-family: "MS Sans Serif", "Microsoft Sans Serif", Tahoma, Arial, sans-serif;
}

/* Win95 settings section titles — black text */
[data-theme="win95"] .settings-section-title,
[data-theme="win95"] .settings-section-subtitle {
  color: #000;
}
[data-theme="win95"] .settings-hint { color: #444; }

/* Win95 context menus — beveled 3D edges like real Win95 menus */
[data-theme="win95"] .channel-ctx-menu {
  background: #bfbfbf;
  border: 3px outset #fff;
  border-radius: 0;
  box-shadow: 2px 2px 0 #000;
  padding: 2px;
}
[data-theme="win95"] .channel-ctx-item {
  color: #000;
  border-radius: 0;
  padding: 4px 12px;
  font-family: "MS Sans Serif", "Microsoft Sans Serif", Tahoma, Arial, sans-serif;
  font-size: 12px;
}
[data-theme="win95"] .channel-ctx-item:hover {
  background: #000080;
  color: #fff !important;
}
[data-theme="win95"] .channel-ctx-item.danger { color: #cc0000; }
[data-theme="win95"] .channel-ctx-item.danger:hover {
  background: #000080;
  color: #fff !important;
}
[data-theme="win95"] .channel-ctx-sep {
  border-top: 1px solid #808080;
  border-bottom: 1px solid #fff;
  margin: 2px 0;
}

/* Win95 emoji picker — beveled box */
[data-theme="win95"] .emoji-picker {
  background: #bfbfbf;
  border: 3px outset #fff;
  border-radius: 0;
  box-shadow: 2px 2px 0 #000;
}

/* Win95 message toolbar — beveled */
[data-theme="win95"] .msg-toolbar {
  background: #bfbfbf;
  border: 2px outset #fff;
  border-radius: 0;
  box-shadow: 1px 1px 0 #000;
}

/* Win95 toasts — beveled */
[data-theme="win95"] .toast {
  background: #bfbfbf;
  border: 3px outset #fff;
  border-radius: 0;
  box-shadow: 2px 2px 0 #000;
  color: #000;
}
[data-theme="win95"] .toast.error { background: #bfbfbf; border-color: #fff; color: #cc0000; }
[data-theme="win95"] .toast.success { background: #bfbfbf; border-color: #fff; color: #008000; }

/* ─── THEME: Daylight (Warm Light) ─────────────────────── */
[data-theme="daylight"] {
  --bg-primary:    #faf8f5;
  --bg-secondary:  #f0ece6;
  --bg-tertiary:   #e8e3da;
  --bg-hover:      #ebe6dc;
  --bg-active:     #ddd7cb;
  --bg-input:      #ffffff;
  --bg-card:       #f5f2ed;

  --accent:        #d47f30;
  --accent-hover:  #e09545;
  --accent-dim:    #b86a22;
  --accent-glow:   rgba(212, 127, 48, 0.18);

  --text-primary:  #2c2418;
  --text-secondary:#6b5d4f;
  --text-muted:    #9c8e7e;
  --text-link:     #2a7ab5;

  --border:        #ddd7cb;
  --border-light:  #e8e3da;

  --success:       #3d8b3d;
  --danger:        #c0392b;
  --warning:       #d4940a;

  --led-on:        #3d8b3d;
  --led-off:       #ccc;
  --led-glow:      rgba(61, 139, 61, 0.4);

  --theme-logo:    "☀";
  --scanline:      none;
}
/* Daylight accent overrides — warm amber tones */
[data-theme="daylight"] .sidebar { background: var(--bg-secondary); }
[data-theme="daylight"] .right-sidebar { background: var(--bg-secondary); }
[data-theme="daylight"] .channel-header { background: var(--bg-secondary); border-bottom: 1px solid var(--border); }
[data-theme="daylight"] .message-row:hover { background: rgba(0,0,0,0.03); }
[data-theme="daylight"] .message-input-container { background: var(--bg-input); border: 1px solid var(--border); }
[data-theme="daylight"] .sidebar-bottom-bar { background: var(--bg-tertiary); }
[data-theme="daylight"] .server-bar { background: var(--bg-tertiary); }
[data-theme="daylight"] .modal { background: var(--bg-primary); border: 1px solid var(--border); }
[data-theme="daylight"] ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15) !important; }
[data-theme="daylight"] ::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.25) !important; }
[data-theme="daylight"] ::selection { background: rgba(212, 127, 48, 0.25); }
[data-theme="daylight"] .inline-code { color: #b35800; background: rgba(212, 127, 48, 0.1); }
[data-theme="daylight"] .code-block { background: #f0ece6; border: 1px solid var(--border); color: var(--text-primary); }
[data-theme="daylight"] .webcam-tile,
[data-theme="daylight"] .screen-share-tile { background: #e0dbd3; }
[data-theme="daylight"] .toast { background: var(--bg-card); border: 1px solid var(--border); color: var(--text-primary); }

/* ─── THEME: Cloudy (Cool Light) ───────────────────────── */
[data-theme="cloudy"] {
  --bg-primary:    #f5f7fa;
  --bg-secondary:  #e9ecf2;
  --bg-tertiary:   #dde1ea;
  --bg-hover:      #e2e6ee;
  --bg-active:     #d3d8e4;
  --bg-input:      #ffffff;
  --bg-card:       #eef1f6;

  --accent:        #5b7fc7;
  --accent-hover:  #7094d8;
  --accent-dim:    #4868a8;
  --accent-glow:   rgba(91, 127, 199, 0.18);

  --text-primary:  #1e2a3a;
  --text-secondary:#5a6a80;
  --text-muted:    #8e9aac;
  --text-link:     #3a7bbd;

  --border:        #d3d8e4;
  --border-light:  #dde1ea;

  --success:       #2f8a5e;
  --danger:        #d04040;
  --warning:       #cc8a15;

  --led-on:        #2f8a5e;
  --led-off:       #c8c8c8;
  --led-glow:      rgba(47, 138, 94, 0.4);

  --theme-logo:    "☁";
  --scanline:      none;
}
/* Cloudy accent overrides — cool blue-gray tones */
[data-theme="cloudy"] .sidebar { background: var(--bg-secondary); }
[data-theme="cloudy"] .right-sidebar { background: var(--bg-secondary); }
[data-theme="cloudy"] .channel-header { background: var(--bg-secondary); border-bottom: 1px solid var(--border); }
[data-theme="cloudy"] .message-row:hover { background: rgba(0,0,0,0.025); }
[data-theme="cloudy"] .message-input-container { background: var(--bg-input); border: 1px solid var(--border); }
[data-theme="cloudy"] .sidebar-bottom-bar { background: var(--bg-tertiary); }
[data-theme="cloudy"] .server-bar { background: var(--bg-tertiary); }
[data-theme="cloudy"] .modal { background: var(--bg-primary); border: 1px solid var(--border); }
[data-theme="cloudy"] ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12) !important; }
[data-theme="cloudy"] ::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.22) !important; }
[data-theme="cloudy"] ::selection { background: rgba(91, 127, 199, 0.25); }
[data-theme="cloudy"] .inline-code { color: #3a6ba8; background: rgba(91, 127, 199, 0.1); }
[data-theme="cloudy"] .code-block { background: #e9ecf2; border: 1px solid var(--border); color: var(--text-primary); }
[data-theme="cloudy"] .webcam-tile,
[data-theme="cloudy"] .screen-share-tile { background: #dde1ea; }
[data-theme="cloudy"] .toast { background: var(--bg-card); border: 1px solid var(--border); color: var(--text-primary); }


/* ═══════════════════════════════════════════════════════════
   RESET
   ═══════════════════════════════════════════════════════════ */

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

/* Lock the document root so the html element itself can never scroll.
   On mobile (Android Chrome especially), body { height: 100vh } makes the
   body taller than the visible layout viewport when the URL bar is shown
   or the on-screen keyboard opens. Without this, html ends up scrolling
   and the entire UI slides up off-screen, leaving a blank gap at the
   bottom (issue #5285). */
html {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: contain;
}

body {
  font-family: var(--font-main);
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.5;
  overflow: hidden;
  height: 100%;
  /* Prefer the dynamic viewport unit when supported so resizes (URL bar
     show/hide, keyboard open/close) don't leave us taller than visible. */
  height: 100dvh;
}

/* Scanline overlay for Matrix theme */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: var(--scanline);
  pointer-events: none;
  z-index: 99999;
}

a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; cursor: pointer; border: none; outline: none; }
input, textarea { font-family: inherit; outline: none; border: none; }
::selection { background: var(--accent); color: white; }

/* ── Range Input Track (slider background) ──────────────── */
/* Slider classes set --track-bg / --track-h / --track-r to override
   the defaults below. Themed tracks use --track-bg for colouring.  */
input[type="range"]:not(.rgb-slider)::-webkit-slider-runnable-track {
  background: var(--track-bg, rgba(255,255,255,0.25));
  height: var(--track-h, 6px);
  border-radius: var(--track-r, 3px);
  border: var(--track-border, 1px solid rgba(255,255,255,0.15));
}
input[type="range"]:not(.rgb-slider)::-moz-range-track {
  background: var(--track-bg, rgba(255,255,255,0.25));
  height: var(--track-h, 6px);
  border-radius: var(--track-r, 3px);
  border: var(--track-border, 1px solid rgba(255,255,255,0.15));
}
/* Range thumb — centered on track */
input[type="range"]:not(.rgb-slider)::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent, #7c5cfc);
  border: 2px solid rgba(255,255,255,0.3);
  cursor: pointer;
  margin-top: calc((var(--track-h, 6px) - 14px) / 2 - 1px);
}
input[type="range"]:not(.rgb-slider)::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent, #7c5cfc);
  border: 2px solid rgba(255,255,255,0.3);
  cursor: pointer;
}

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
* { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }

/* ── RGB-cycling performance guard ──────────────────────────
   When the RGB theme is active, theme.js adds .rgb-cycling to <html>.
   CSS custom-property updates fire 20×/s which would restart every
   transition that references a variable.  Using the universal selector
   guarantees that NEW elements (modals, voice-user lists, expand buttons,
   etc.) are automatically covered without maintaining a selector list.

   CRITICAL: use `transition: none` not `transition-duration: 0s`.
   `transition-duration: 0s` still causes Chromium to evaluate every
   element's transition-property on each var change and create zero-
   duration transition records in Blink's Oilpan heap (invisible to
   performance.memory which only measures V8 heap).  These accumulate
   over ~5 minutes and cause progressive FPS collapse.  `transition: none`
   sets transition-property:none which skips the entire pipeline. */
html.rgb-cycling *,
html.rgb-cycling *::before,
html.rgb-cycling *::after {
  transition: none !important;
  animation: none !important;
}


/* ═══════════════════════════════════════════════════════════
   LED / STATUS INDICATORS
   ═══════════════════════════════════════════════════════════ */

.led {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  transition: all 0.3s ease;
  border: 1px solid rgba(0,0,0,0.3);
}

.led.on {
  background: var(--led-on);
  box-shadow: 0 0 6px var(--led-glow), inset 0 -1px 2px rgba(0,0,0,0.2);
}

.led.off { background: var(--led-off); }

.led.warn {
  background: var(--warning);
  box-shadow: 0 0 6px rgba(250, 166, 26, 0.5);
}

.led.danger {
  background: var(--danger);
  box-shadow: 0 0 6px rgba(240, 71, 71, 0.5);
}

.led.pulse { animation: ledPulse 1.5s ease-in-out infinite; }

@keyframes ledPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* ── Status Bar (bottom of app) ────────────────────────── */

.status-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 5px 16px;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--text-muted);
  flex-shrink: 0;
  min-height: 28px;
  user-select: none;
}

.status-item {
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.status-item .label {
  text-transform: uppercase;
  letter-spacing: 0.3px;
  font-weight: 600;
  font-size: 10px;
}

.status-item .value {
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 11px;
}

.status-bar .spacer { flex: 1; }

#status-version {
  opacity: 0.5;
  font-size: 10px;
}

.status-bar .divider {
  width: 1px;
  height: 14px;
  background: var(--border);
}

/* Desktop app: force status bar visible at all times.
   100dvh can miscompute in Electron BrowserView, pushing the
   status bar below the visible area.  Pin to vh and ensure visible. */
[data-desktop-app] #app {
  height: 100vh !important;
}
[data-desktop-app] .status-bar {
  display: flex !important;
}

/* User preference: hide status bar everywhere */
[data-hide-statusbar] .status-bar,
[data-hide-statusbar] #haven-desktop-footer { display: none !important; }
[data-hide-statusbar] .status-bar-toggle-tab { display: flex; }

/* ── Status bar toggle tab (shows when bar is hidden) ── */
.status-bar-toggle-tab {
  display: none;
  position: fixed;
  bottom: 0;
  right: 12px;
  z-index: 50;
  width: 32px;
  height: 20px;
  align-items: center;
  justify-content: center;
  background: var(--bg-secondary, #1e2035);
  border: 1px solid var(--border, #333);
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.2s;
  padding: 0;
  line-height: 1;
}
.status-bar-toggle-tab:hover { opacity: 1; }
/* Desktop app has its own footer — never show the toggle tab */
[data-desktop-app] .status-bar-toggle-tab { display: none !important; }

/* ── Server URL in status bar ── */
.status-url-text {
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s;
  font-size: 10px;
}
.status-url-text:hover { opacity: 1; }
.status-url-text.url-hidden { letter-spacing: 2px; }
.status-url-toggle {
  cursor: pointer;
  opacity: 0.4;
  transition: opacity 0.2s;
  font-size: 11px;
  background: none;
  border: none;
  color: inherit;
  padding: 0 4px;
  line-height: 1;
}
.status-url-toggle:hover { opacity: 1; }


/* ═══════════════════════════════════════════════════════════
   SIDEBAR BOTTOM BAR & THEME POPUP
   ═══════════════════════════════════════════════════════════ */

.sidebar-bottom {
  margin-top: auto;
  position: relative;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

.sidebar-bottom-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
}

.sidebar-bottom-btn {
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 10px;
  cursor: pointer;
  font-size: 14px;
  color: var(--text-secondary);
  transition: all 0.2s;
  line-height: 1;
}
.sidebar-bottom-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
  border-color: var(--accent);
}

.theme-popup {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 12px;
  z-index: 100;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4);
  max-height: 60vh;
  overflow-y: auto;
}

.theme-popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.theme-popup-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--text-muted);
}

/* ═══════════════════════════════════════════════════════════
   THEME SELECTOR
   ═══════════════════════════════════════════════════════════ */

.theme-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 4px 0;
}

.theme-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--border);
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1;
}

.theme-btn:hover {
  border-color: var(--text-secondary);
  transform: scale(1.15);
}

.theme-btn.active {
  border-color: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
  transform: scale(1.1);
}

.theme-btn[data-theme="haven"]   { background: #191b28; color: #7c5cfc; }
.theme-btn[data-theme="discord"] { background: #313338; color: #5865f2; }
.theme-btn[data-theme="matrix"]  { background: #0a0a0a; color: #00ff41; }
.theme-btn[data-theme="tron"]    { background: #0c141f; color: #6fecff; }
.theme-btn[data-theme="halo"]    { background: #0d1a0d; color: #d4a020; }
.theme-btn[data-theme="lotr"]    { background: #1a1510; color: #d4a844; }
.theme-btn[data-theme="cyberpunk"] { background: #0a0a12; color: #ff2d6f; }
.theme-btn[data-theme="nord"]    { background: #2e3440; color: #88c0d0; }
.theme-btn[data-theme="dracula"] { background: #1a1b26; color: #bd93f9; }
.theme-btn[data-theme="bloodborne"] { background: #0a0000; color: #cc0020; }
.theme-btn[data-theme="darksouls"] { background: #0c0a08; color: #c8a84e; }
.theme-btn[data-theme="eldenring"] { background: #08080e; color: #d4a832; }
.theme-btn[data-theme="ice"]    { background: #0a1520; color: #00d4ff; }
.theme-btn[data-theme="abyss"]  { background: #040810; color: #1a5aff; }
.theme-btn[data-theme="minecraft"] { background: #1a1a1a; color: #55bb55; }
.theme-btn[data-theme="ffx"]    { background: #080e1a; color: #40a8e0; }
.theme-btn[data-theme="zelda"]  { background: #0a120a; color: #44bb44; }
.theme-btn[data-theme="fallout"]{ background: #0a0e08; color: #14fe17; text-shadow: 0 0 4px rgba(20,254,23,0.6); }
.theme-btn[data-theme="scripture"]{ background: #1a1610; color: #c8a84c; }
.theme-btn[data-theme="chapel"] { background: #0e0c18; color: #8a5cf0; }
.theme-btn[data-theme="gospel"] { background: #f5f0e8; color: #8b2032; }
.theme-btn[data-theme="midnightpurple"] { background: #0d0820; color: #8a5cf6; }
.theme-btn[data-theme="crt"]    { background: #080808; color: #ffb000; text-shadow: 0 0 4px rgba(255,176,0,0.5); }
.theme-btn[data-theme="win95"]  { background: #c0c0c0; color: #000; border: 2px outset #fff; }
.theme-btn[data-theme="custom"] { background: linear-gradient(135deg, #ff2d6f, #faa61a, #43b581, #7c5cfc); color: #fff; }
.theme-btn[data-theme="rgb"] {
  background: linear-gradient(90deg, #ff0000, #ff8800, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000);
  background-size: 200% 100%;
  animation: rgb-btn-cycle 3s linear infinite;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.6);
}
@keyframes rgb-btn-cycle {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

.theme-btn .theme-icon { pointer-events: none; }

/* ═══════════════════════════════════════════════════════════
   EFFECT OVERLAY SELECTOR
   ═══════════════════════════════════════════════════════════ */

.effect-overlay-section {
  border-top: 1px solid var(--border);
  margin-top: 8px;
  padding-top: 6px;
}

.effect-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 4px 0;
}

.effect-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--bg-tertiary);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1;
  color: var(--text-secondary);
}

.effect-btn:hover {
  border-color: var(--text-secondary);
  transform: scale(1.15);
}

.effect-btn.active {
  border-color: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
  transform: scale(1.1);
}

/* ─── Theme Creative Effects ─────────────────────────── */

/* ── Fallout: Phosphor glow + vignette burn ────────── */
[data-theme="fallout"] .main {
  position: relative;
  box-shadow: inset 0 0 120px rgba(20, 254, 23, 0.12);
}
[data-theme="fallout"] .main::before {
  content: ''; position: fixed; inset: 0; z-index: 99998; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(0, 10, 0, 0.55) 100%);
}

/* ── CRT: Component styling (theme-appropriate, no effects) ── */
[data-theme="crt"] .main {
  position: relative;
  overflow: hidden;
}
@keyframes crt-flicker {
  0%   { opacity: 0.94; }
  50%  { opacity: 0.98; }
  100% { opacity: 1; }
}

/* ── Win95: No effects — sharp, clean, period-correct ─ */

/* ── FFX: Flowing water overlay ────────────────────── */
[data-theme="ffx"] .sidebar { position: relative; }
[data-theme="ffx"] .sidebar::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(64, 168, 224, 0.25) 15%,
    transparent 30%,
    rgba(64, 168, 224, 0.20) 50%,
    transparent 65%,
    rgba(64, 168, 224, 0.15) 80%,
    transparent 100%
  );
  background-size: 100% 200%;
  animation: ffx-water calc(5s * var(--fx-mult, 1)) ease-in-out infinite;
}
[data-theme="ffx"] .main { position: relative; }
[data-theme="ffx"] .main::after {
  content: ''; position: fixed; bottom: 0; left: 0; right: 0; height: 6px;
  pointer-events: none; z-index: 99998;
  background: linear-gradient(90deg,
    transparent, rgba(64,168,224,0.6), rgba(100,200,255,0.8), rgba(64,168,224,0.6), transparent
  );
  background-size: 200% 100%;
  animation: ffx-wave-bar calc(3s * var(--fx-mult, 1)) ease-in-out infinite;
  filter: blur(1px);
}
@keyframes ffx-water {
  0%, 100% { background-position: 0% 0%; }
  50%      { background-position: 0% 100%; }
}
@keyframes ffx-wave-bar {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 200% 50%; }
}

/* ── Ice: Icicles + frost shimmer ──────────────────── */
[data-theme="ice"] .channel-header { position: relative; overflow: visible !important; }
[data-theme="ice"] .channel-header::after {
  content: '';
  position: absolute; bottom: -12px; left: 0; right: 0; height: 12px;
  pointer-events: none; z-index: 2;
  background:
    linear-gradient(180deg, rgba(180,230,255,0.7), rgba(180,230,255,0.0));
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpolygon points='0,0 8,0 10,10 12,0 20,0 22,7 24,0 32,0 35,12 38,0 46,0 48,8 50,0 58,0 61,11 64,0 72,0 74,6 76,0 84,0 87,12 90,0 98,0 100,9 102,0 110,0 113,11 116,0 124,0 126,7 128,0 136,0 139,12 142,0 150,0 152,8 154,0 162,0 165,10 168,0 176,0 178,6 180,0 188,0 191,12 194,0 200,0 200,0 0,0'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpolygon points='0,0 8,0 10,10 12,0 20,0 22,7 24,0 32,0 35,12 38,0 46,0 48,8 50,0 58,0 61,11 64,0 72,0 74,6 76,0 84,0 87,12 90,0 98,0 100,9 102,0 110,0 113,11 116,0 124,0 126,7 128,0 136,0 139,12 142,0 150,0 152,8 154,0 162,0 165,10 168,0 176,0 178,6 180,0 188,0 191,12 194,0 200,0 200,0 0,0'/%3E%3C/svg%3E");
  -webkit-mask-size: 200px 12px;
  mask-size: 200px 12px;
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
  animation: ice-drip calc(3s * var(--fx-mult, 1)) ease-in-out infinite;
}
[data-theme="ice"] .sidebar-header { position: relative; overflow: visible !important; }
[data-theme="ice"] .sidebar-header::after {
  content: '';
  position: absolute; bottom: -10px; left: 0; right: 0; height: 10px;
  pointer-events: none; z-index: 2;
  background:
    linear-gradient(180deg, rgba(180,230,255,0.6), rgba(180,230,255,0.0));
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpolygon points='0,0 8,0 10,10 12,0 20,0 22,7 24,0 32,0 35,12 38,0 46,0 48,8 50,0 58,0 61,11 64,0 72,0 74,6 76,0 84,0 87,12 90,0 98,0 100,9 102,0 110,0 113,11 116,0 124,0 126,7 128,0 136,0 139,12 142,0 150,0 152,8 154,0 162,0 165,10 168,0 176,0 178,6 180,0 188,0 191,12 194,0 200,0 200,0 0,0'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpolygon points='0,0 8,0 10,10 12,0 20,0 22,7 24,0 32,0 35,12 38,0 46,0 48,8 50,0 58,0 61,11 64,0 72,0 74,6 76,0 84,0 87,12 90,0 98,0 100,9 102,0 110,0 113,11 116,0 124,0 126,7 128,0 136,0 139,12 142,0 150,0 152,8 154,0 162,0 165,10 168,0 176,0 178,6 180,0 188,0 191,12 194,0 200,0 200,0 0,0'/%3E%3C/svg%3E");
  -webkit-mask-size: 200px 10px;
  mask-size: 200px 10px;
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
}
@keyframes ice-drip {
  0%, 100% { transform: scaleY(1); opacity: 0.7; }
  50%      { transform: scaleY(1.3); opacity: 1; }
}
[data-theme="ice"] .main { position: relative; }
[data-theme="ice"] .main::after {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 99998;
  background:
    radial-gradient(3px 3px at 10% 25%, rgba(200,235,255,0.8), transparent),
    radial-gradient(2px 2px at 25% 60%, rgba(200,235,255,0.6), transparent),
    radial-gradient(3px 3px at 45% 15%, rgba(200,235,255,0.7), transparent),
    radial-gradient(2px 2px at 60% 70%, rgba(200,235,255,0.5), transparent),
    radial-gradient(3px 3px at 75% 35%, rgba(200,235,255,0.6), transparent),
    radial-gradient(2px 2px at 90% 80%, rgba(200,235,255,0.7), transparent),
    radial-gradient(3px 3px at 35% 45%, rgba(200,235,255,0.5), transparent),
    radial-gradient(2px 2px at 80% 10%, rgba(200,235,255,0.6), transparent);
  animation: ice-shimmer calc(4s * var(--fx-mult, 1)) ease-in-out infinite;
}
@keyframes ice-shimmer {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 0.9; }
}

/* ── Nord: Snowfall now handled by JS canvas ──────── */
[data-theme="nord"] .main { position: relative; }

/* ── Dark Souls: Campfire glow (muted, sporadic flicker) ── */
[data-theme="darksouls"] .sidebar::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 55vh;
  pointer-events: none; z-index: 1;
  background: linear-gradient(0deg,
    rgba(180, 70, 10, 0.22) 0%,
    rgba(140, 45, 5, 0.12) 25%,
    rgba(100, 30, 0, 0.05) 50%,
    transparent 100%
  );
  animation: ds-ember calc(4s * var(--fx-mult, 1)) ease-in-out infinite;
}
[data-theme="darksouls"] .main { position: relative; }
[data-theme="darksouls"] .main::before {
  content: ''; position: fixed; bottom: 0; left: 0; right: 0; height: 10px;
  pointer-events: none; z-index: 99998;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(180, 60, 5, 0.25) 15%,
    rgba(200, 110, 20, 0.4) 35%,
    rgba(210, 140, 40, 0.5) 50%,
    rgba(200, 110, 20, 0.4) 65%,
    rgba(180, 60, 5, 0.25) 85%,
    transparent 100%
  );
  filter: blur(5px);
  animation: ds-fireline calc(3s * var(--fx-mult, 1)) ease-in-out infinite alternate;
}
[data-theme="darksouls"] .main::after {
  content: ''; position: fixed; bottom: 0; left: 0; right: 0; height: 50vh;
  pointer-events: none; z-index: 99997;
  background: radial-gradient(ellipse 80% 70% at 50% 100%,
    rgba(180, 70, 10, 0.10) 0%,
    rgba(140, 45, 5, 0.05) 40%,
    transparent 100%
  );
  animation: ds-ambient calc(5s * var(--fx-mult, 1)) ease-in-out infinite;
}
@keyframes ds-ember {
  0%       { opacity: 0.5; }
  8%       { opacity: 0.85; }
  15%      { opacity: 0.35; }
  22%      { opacity: 0.7; }
  30%      { opacity: 0.45; }
  45%      { opacity: 0.9; }
  52%      { opacity: 0.30; }
  60%      { opacity: 0.65; }
  70%      { opacity: 0.85; }
  78%      { opacity: 0.40; }
  88%      { opacity: 0.75; }
  100%     { opacity: 0.5; }
}
@keyframes ds-fireline {
  0%   { opacity: 0.3; filter: blur(4px); height: 8px; }
  12%  { opacity: 0.55; filter: blur(6px); height: 12px; }
  28%  { opacity: 0.2; filter: blur(3px); height: 6px; }
  45%  { opacity: 0.5; filter: blur(5px); height: 11px; }
  60%  { opacity: 0.15; filter: blur(3px); height: 7px; }
  75%  { opacity: 0.45; filter: blur(6px); height: 13px; }
  90%  { opacity: 0.25; filter: blur(4px); height: 9px; }
  100% { opacity: 0.35; filter: blur(5px); height: 10px; }
}
@keyframes ds-ambient {
  0%, 100% { opacity: 0.3; }
  15%      { opacity: 0.55; }
  30%      { opacity: 0.2; }
  50%      { opacity: 0.6; }
  65%      { opacity: 0.25; }
  80%      { opacity: 0.5; }
}

/* ── Bloodborne: Blood vignette pulse ──────────────── */
[data-theme="bloodborne"] .main { position: relative; }
[data-theme="bloodborne"] .main::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 99998;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(120, 10, 10, 0.35) 100%);
  animation: bb-vignette calc(4s * var(--fx-mult, 1)) ease-in-out infinite;
}
@keyframes bb-vignette {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1; }
}

/* ── Matrix: Digital rain shimmer ──────────────────── */
[data-theme="matrix"] .sidebar { position: relative; overflow: hidden; }
[data-theme="matrix"] .sidebar::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: repeating-linear-gradient(0deg,
    transparent 0px, transparent 18px,
    rgba(0, 255, 0, 0.15) 18px, rgba(0, 255, 0, 0.15) 20px
  );
  animation: matrix-rain calc(1.5s * var(--fx-mult, 1)) linear infinite;
}
@keyframes matrix-rain {
  0%   { transform: translateY(-20px); }
  100% { transform: translateY(0); }
}

/* ── Cyberpunk: Text-scramble effect on header ─────── */
[data-theme="cyberpunk"] .brand-text {
  text-shadow: 0 0 8px rgba(255,0,100,0.6);
}

/* ── Minecraft: Pixelated border style ─────────────── */
[data-theme="minecraft"] .message-avatar,
[data-theme="minecraft"] .message-avatar-img { image-rendering: pixelated; border-radius: 0 !important; }
[data-theme="minecraft"] .server-icon { border-radius: 2px; image-rendering: pixelated; }
[data-theme="minecraft"] .user-item-avatar { border-radius: 2px; image-rendering: pixelated; }
[data-theme="minecraft"] .sidebar { border-right: 3px solid #3a3a2a; }
[data-theme="minecraft"] .channel-header { border-bottom: 3px solid #3a3a2a; }

/* ── LOTR: Warm candlelight glow ───────────────────── */
[data-theme="lotr"] .sidebar { position: relative; }
[data-theme="lotr"] .sidebar::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse at 50% 100%, rgba(220, 170, 60, 0.2), transparent 60%);
  animation: lotr-candle calc(3s * var(--fx-mult, 1)) ease-in-out infinite;
}
@keyframes lotr-candle {
  0%, 100% { opacity: 0.4; }
  25%      { opacity: 1; }
  50%      { opacity: 0.6; }
  75%      { opacity: 0.9; }
}

/* ── Abyss: Deep ocean pressure vignette ───────────── */
[data-theme="abyss"] .main { position: relative; }
[data-theme="abyss"] .main::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 99998;
  background: radial-gradient(ellipse at center, transparent 30%, rgba(0, 0, 40, 0.35) 100%);
}


/* ═══════════════════════════════════════════════════════════
   STACKABLE EFFECT OVERLAY SYSTEM
   Effects are managed via JS-injected DOM elements so they
   can stack. When [data-fx-custom] is on <html>, theme-native
   pseudo-element effects are stripped and only the JS-managed
   overlay layers render.
   ═══════════════════════════════════════════════════════════ */

/* Strip base theme pseudo-element effects when custom layers are active */
[data-fx-custom] .main::before,
[data-fx-custom] .main::after,
[data-fx-custom] .sidebar::after,
[data-fx-custom] .sidebar-header::after,
[data-fx-custom] .channel-header::after { content: none !important; }
[data-fx-custom] .brand-text { animation: none !important; }
[data-fx-custom] .sidebar,
[data-fx-custom] .main { position: relative; }

/* Full-screen overlay container */
#fx-layers {
  position: fixed; inset: 0; z-index: 99990;
  pointer-events: none; overflow: hidden;
}
#fx-layers > * { pointer-events: none; }

/* Canvas layers (matrix rain, embers) */
.fx-canvas {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0;
  width: 100%; height: 100%;
}

/* Sidebar-injected overlay base */
.fx-sidebar-layer {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 0;
}

/* Main-injected overlay base */
.fx-main-layer {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 0;
}

/* ── CRT class on <html> (scanlines + font) ───────────── */
.fx-crt {
  --scanline: none; /* scanlines moved to dedicated .fx-crt-scanlines overlay */
}

/* ── CRT vignette overlay — parabolic CRT glass tube ──
   Simulates a convex fishbowl CRT: bright center fading
   to dark curved edges, phosphor glow, glass reflection,
   and subtle screen flicker.  Darkness controlled by the
   --crt-vignette-opacity CSS variable (slider in UI).     */
.fx-crt-vignette {
  position: fixed; inset: 0;
  /* Gradient is set dynamically by JS _applyCrtVignette() — this is the
     mid-range default so the effect is visible even before the slider fires. */
  background:
    radial-gradient(ellipse 68% 64% at 50% 50%,
      rgba(0,0,0,0.07) 0%,
      rgba(0,0,0,0.07) 20%,
      rgba(0,0,0,0.16) 45%,
      rgba(0,0,0,0.30) 65%,
      rgba(0,0,0,0.42) 82%,
      rgba(0,0,0,0.50) 100%);
  animation: crt-flicker calc(0.08s * var(--fx-mult, 1)) infinite alternate;
  /* Fishbowl curvature — larger radius simulates convex glass */
  border-radius: 22px / 18px;
  box-shadow:
    inset 0 0 120px rgba(0,0,0,0.65),
    inset 0 0 280px rgba(0,0,0,0.3),
    0 0 12px 2px rgba(0,0,0,0.4);
  z-index: 99998;
  pointer-events: none;
}
/* Glass reflection glint — subtle highlight in upper-left like curved glass */
.fx-crt-vignette::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.035) 0%,
    rgba(255,255,255,0.012) 35%,
    transparent 55%);
  border-radius: inherit;
  pointer-events: none;
}

/* ── CRT scanline overlay — fades toward screen center ── */
.fx-crt-scanlines {
  position: fixed; inset: 0;
  opacity: var(--crt-scanline-opacity, 0.45);
  /* Thin 1px dark lines every 3px — mimics phosphor gaps */
  background: repeating-linear-gradient(
    0deg,
    transparent 0px,
    transparent 2px,
    rgba(0,0,0,0.4) 2px,
    rgba(0,0,0,0.4) 3px);
  /* Radial mask: scanlines fade out at center, visible at edges */
  -webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 50%,
    rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.35) 45%, rgba(0,0,0,1) 100%);
  mask-image: radial-gradient(ellipse 85% 75% at 50% 50%,
    rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.35) 45%, rgba(0,0,0,1) 100%);
  border-radius: 22px / 18px;
  z-index: 99998;
  pointer-events: none;
}

/* ── Matrix sidebar bars overlay ──────────────────────── */
.fx-matrix-bars {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 0;
  background: repeating-linear-gradient(0deg,
    transparent 0px, transparent 18px,
    rgba(0,255,0,0.15) 18px, rgba(0,255,0,0.15) 20px);
  animation: matrix-rain calc(1.5s * var(--fx-mult, 1)) linear infinite;
}

/* ── Fallout vignette overlay ─────────────────────────── */
.fx-fallout-vignette {
  position: fixed; inset: 0;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(0,10,0,0.55) 100%);
}

/* ── FFX water (sidebar) overlay ──────────────────────── */
.fx-ffx-water {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg,
    transparent 0%, rgba(64,168,224,0.25) 15%, transparent 30%,
    rgba(64,168,224,0.20) 50%, transparent 65%,
    rgba(64,168,224,0.15) 80%, transparent 100%);
  background-size: 100% 200%;
  animation: ffx-water calc(5s * var(--fx-mult, 1)) ease-in-out infinite;
}

/* ── FFX wave bar overlay ─────────────────────────────── */
.fx-ffx-wave {
  position: fixed; bottom: 0; left: 0; right: 0; height: 6px;
  background: linear-gradient(90deg,
    transparent, rgba(64,168,224,0.6), rgba(100,200,255,0.8),
    rgba(64,168,224,0.6), transparent);
  background-size: 200% 100%;
  animation: ffx-wave-bar calc(3s * var(--fx-mult, 1)) ease-in-out infinite;
  filter: blur(1px);
}

/* ── Ice shimmer overlay ──────────────────────────────── */
.fx-ice-shimmer {
  position: fixed; inset: 0;
  background:
    radial-gradient(3px 3px at 10% 25%, rgba(200,235,255,0.8), transparent),
    radial-gradient(2px 2px at 25% 60%, rgba(200,235,255,0.6), transparent),
    radial-gradient(3px 3px at 45% 15%, rgba(200,235,255,0.7), transparent),
    radial-gradient(2px 2px at 60% 70%, rgba(200,235,255,0.5), transparent),
    radial-gradient(3px 3px at 75% 35%, rgba(200,235,255,0.6), transparent),
    radial-gradient(2px 2px at 90% 80%, rgba(200,235,255,0.7), transparent),
    radial-gradient(3px 3px at 35% 45%, rgba(200,235,255,0.5), transparent),
    radial-gradient(2px 2px at 80% 10%, rgba(200,235,255,0.6), transparent);
  animation: ice-shimmer calc(4s * var(--fx-mult, 1)) ease-in-out infinite;
}

/* ── Ice icicles overlays ─────────────────────────────── */
.fx-ice-icicle {
  position: absolute; bottom: -12px; left: 0; right: 0; height: 12px;
  pointer-events: none; z-index: 2;
  background: linear-gradient(180deg, rgba(180,230,255,0.7), rgba(180,230,255,0.0));
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpolygon points='0,0 8,0 10,10 12,0 20,0 22,7 24,0 32,0 35,12 38,0 46,0 48,8 50,0 58,0 61,11 64,0 72,0 74,6 76,0 84,0 87,12 90,0 98,0 100,9 102,0 110,0 113,11 116,0 124,0 126,7 128,0 136,0 139,12 142,0 150,0 152,8 154,0 162,0 165,10 168,0 176,0 178,6 180,0 188,0 191,12 194,0 200,0 200,0 0,0'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpolygon points='0,0 8,0 10,10 12,0 20,0 22,7 24,0 32,0 35,12 38,0 46,0 48,8 50,0 58,0 61,11 64,0 72,0 74,6 76,0 84,0 87,12 90,0 98,0 100,9 102,0 110,0 113,11 116,0 124,0 126,7 128,0 136,0 139,12 142,0 150,0 152,8 154,0 162,0 165,10 168,0 176,0 178,6 180,0 188,0 191,12 194,0 200,0 200,0 0,0'/%3E%3C/svg%3E");
  -webkit-mask-size: 200px 12px; mask-size: 200px 12px;
  -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x;
  animation: ice-drip calc(3s * var(--fx-mult, 1)) ease-in-out infinite;
}
.fx-ice-icicle-sb {
  position: absolute; bottom: -10px; left: 0; right: 0; height: 10px;
  pointer-events: none; z-index: 2;
  background: linear-gradient(180deg, rgba(180,230,255,0.6), rgba(180,230,255,0.0));
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpolygon points='0,0 8,0 10,10 12,0 20,0 22,7 24,0 32,0 35,12 38,0 46,0 48,8 50,0 58,0 61,11 64,0 72,0 74,6 76,0 84,0 87,12 90,0 98,0 100,9 102,0 110,0 113,11 116,0 124,0 126,7 128,0 136,0 139,12 142,0 150,0 152,8 154,0 162,0 165,10 168,0 176,0 178,6 180,0 188,0 191,12 194,0 200,0 200,0 0,0'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpolygon points='0,0 8,0 10,10 12,0 20,0 22,7 24,0 32,0 35,12 38,0 46,0 48,8 50,0 58,0 61,11 64,0 72,0 74,6 76,0 84,0 87,12 90,0 98,0 100,9 102,0 110,0 113,11 116,0 124,0 126,7 128,0 136,0 139,12 142,0 150,0 152,8 154,0 162,0 165,10 168,0 176,0 178,6 180,0 188,0 191,12 194,0 200,0 200,0 0,0'/%3E%3C/svg%3E");
  -webkit-mask-size: 200px 10px; mask-size: 200px 10px;
  -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x;
}

/* ── Nord snowfall: now handled by JS canvas ──────────── */

/* ── Dark Souls ember glow (sidebar) overlay ──────────── */
.fx-ds-ember-glow {
  position: absolute; bottom: 0; left: 0; right: 0; height: 100%;
  pointer-events: none; z-index: 1;
  background: radial-gradient(ellipse 60% 80% at 50% 100%,
    rgba(180,70,10,0.28) 0%, rgba(140,45,5,0.15) 20%,
    rgba(100,30,0,0.06) 45%, transparent 80%);
  animation: ds-ember calc(4s * var(--fx-mult, 1)) ease-in-out infinite;
}

/* ── Dark Souls fireline overlay ──────────────────────── */
.fx-ds-fireline {
  position: fixed; bottom: 0; left: 0; right: 0; height: 10px;
  background: linear-gradient(90deg,
    transparent 0%, rgba(180,60,5,0.25) 15%, rgba(200,110,20,0.4) 35%,
    rgba(210,140,40,0.5) 50%, rgba(200,110,20,0.4) 65%,
    rgba(180,60,5,0.25) 85%, transparent 100%);
  filter: blur(5px);
  animation: ds-fireline calc(3s * var(--fx-mult, 1)) ease-in-out infinite alternate;
}

/* ── Dark Souls ambient glow overlay ──────────────────── */
.fx-ds-ambient {
  position: fixed; bottom: 0; left: 0; right: 0; height: 65vh;
  background: radial-gradient(ellipse 50% 80% at 50% 100%,
    rgba(180,70,10,0.14) 0%, rgba(140,45,5,0.07) 35%, transparent 85%);
  animation: ds-ambient calc(5s * var(--fx-mult, 1)) ease-in-out infinite;
}

/* ── Bloodborne blood vignette overlay ────────────────── */
.fx-bb-vignette {
  position: fixed; inset: 0;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(120,10,10,0.35) 100%);
  animation: bb-vignette calc(4s * var(--fx-mult, 1)) ease-in-out infinite;
}

/* ── Cyberpunk class on <html> (text-scramble) ────────── */
.fx-cyberpunk .brand-text {
  font-family: 'Courier New', monospace;
  letter-spacing: 0.15em;
  text-shadow:
    0 0 8px rgba(255,0,100,0.7),
    0 0 20px rgba(0,255,255,0.3);
  transition: text-shadow 0.2s;
}
.fx-cyberpunk .brand-text.scrambling {
  text-shadow:
    -2px 0 #ff0066, 2px 0 #00ffff,
    0 0 12px rgba(255,0,100,0.9),
    0 0 30px rgba(0,255,255,0.5);
}
/* Scramble glow on sidebar / header text */
.fx-cyberpunk .scrambling {
  text-shadow:
    -1px 0 rgba(255,0,102,0.6), 1px 0 rgba(0,255,255,0.6),
    0 0 6px rgba(255,0,102,0.4);
}
.fx-cyberpunk .channel-name,
.fx-cyberpunk .section-label,
.fx-cyberpunk .user-item-name,
.fx-cyberpunk #channel-header-name,
.fx-cyberpunk #current-user {
  transition: text-shadow 0.2s;
}

/* ── LOTR candle (sidebar) overlay ────────────────────── */
.fx-lotr-candle {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse at 50% 100%, rgba(220,170,60,0.2), transparent 60%);
  animation: lotr-candle calc(3s * var(--fx-mult, 1)) ease-in-out infinite;
}

/* ── Abyss ocean vignette overlay ─────────────────────── */
.fx-abyss-vignette {
  position: fixed; inset: 0;
  background: radial-gradient(ellipse at center, transparent 30%, rgba(0,0,40,0.35) 100%);
}

/* ── Scripture cross overlay ──────────────────────────── */
.fx-scripture-cross {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 0;
  background:
    linear-gradient(to bottom, transparent 5%, rgba(200,168,76,0.30) 22%, rgba(200,168,76,0.50) 40%, rgba(200,168,76,0.30) 58%, transparent 80%) center / 8% 100% no-repeat,
    linear-gradient(to right, transparent 20%, rgba(200,168,76,0.28) 35%, rgba(200,168,76,0.42) 46%, rgba(200,168,76,0.42) 54%, rgba(200,168,76,0.28) 65%, transparent 80%) center 30% / 100% 6% no-repeat,
    radial-gradient(ellipse 35% 55% at 50% 38%, rgba(200,168,76,0.22) 0%, transparent 70%);
  animation: scripture-cross-pulse 8s ease-in-out infinite;
  mix-blend-mode: screen;
  filter: brightness(var(--fx-religious-intensity, 1));
}

/* ── Chapel stained glass overlay ─────────────────────── */
.fx-chapel-glass {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 0;
  background:
    linear-gradient(155deg, transparent 10%, rgba(138,92,240,0.24) 22%, rgba(102,51,204,0.36) 35%, transparent 55%) no-repeat,
    linear-gradient(175deg, transparent 15%, rgba(200,80,140,0.22) 30%, rgba(220,100,160,0.30) 45%, transparent 65%) no-repeat,
    linear-gradient(195deg, transparent 25%, rgba(200,168,76,0.20) 40%, rgba(220,190,100,0.28) 55%, transparent 75%) no-repeat,
    radial-gradient(ellipse 45% 40% at 50% 25%, rgba(138,92,240,0.18) 0%, transparent 70%);
  animation: chapel-glass-shift 12s ease-in-out infinite;
  mix-blend-mode: screen;
  filter: brightness(var(--fx-religious-intensity, 1));
}

/* ── Gospel radiance overlay ──────────────────────────── */
.fx-gospel-radiance {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 0;
  background:
    linear-gradient(180deg, rgba(200,168,76,0.26) 0%, rgba(220,195,120,0.18) 15%, transparent 50%) no-repeat,
    radial-gradient(ellipse 55% 45% at 50% 18%, rgba(139,32,50,0.18) 0%, rgba(200,168,76,0.12) 40%, transparent 70%),
    radial-gradient(circle at 50% 8%, rgba(255,250,240,0.22) 0%, transparent 55%);
  animation: gospel-radiance 10s ease-in-out infinite;
  filter: brightness(var(--fx-religious-intensity, 1));
}

/* ── Ice parent helpers ───────────────────────────────── */
.fx-ice-overflow { position: relative !important; overflow: visible !important; }


/* ─── Custom Theme Triangle Picker ───────────────────── */
#custom-theme-editor {
  margin-top: 8px;
  padding: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
#custom-hue-bar {
  width: 100%;
  height: 18px;
  border-radius: var(--radius-sm);
  cursor: crosshair;
  display: block;
  margin-bottom: 6px;
}
#custom-triangle {
  width: 100%;
  height: 180px;
  cursor: crosshair;
  display: block;
  border-radius: var(--radius-sm);
}

/* ─── RGB Theme Editor ───────────────────────── */
.rgb-theme-editor {
  margin-top: 8px;
  padding: 8px 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.rgb-slider-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
  cursor: default;
}
.rgb-slider-row:last-child { margin-bottom: 0; }
.rgb-slider-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  min-width: 50px;
}
.rgb-slider {
  flex: 1;
  height: 4px;
  accent-color: var(--accent);
  cursor: pointer;
}


/* ═══════════════════════════════════════════════════════════
   AUTH PAGE
   ═══════════════════════════════════════════════════════════ */

.auth-page {
  display: flex;
  justify-content: center;
  min-height: 100vh;
  background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 50%, var(--bg-tertiary) 100%);
  overflow-y: auto;
}

.auth-container { width: 100%; max-width: 400px; padding: 20px; margin: auto 0; }

.auth-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 32px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}

.auth-header { text-align: center; margin-bottom: 28px; }

.auth-header .logo { font-size: 48px; color: var(--accent); line-height: 1; }

.auth-header h1 {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 6px;
  color: var(--text-primary);
  margin: 6px 0 0;
  font-family: var(--font-heading);
}

.auth-header .tagline { color: var(--text-secondary); font-size: 12px; margin: 1px 0 0; }

.auth-header .server-title {
  color: var(--text-primary);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 1px;
  margin: 6px 0 0;
  font-family: var(--font-heading);
  word-break: break-word;
}
.auth-header .server-title:empty { display: none; }

.auth-recovery-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-top: 6px;
}
.auth-recovery-links a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.8rem;
}

.auth-tabs {
  display: flex;
  gap: 4px;
  background: var(--bg-primary);
  border-radius: var(--radius);
  padding: 4px;
  margin-bottom: 24px;
}

.auth-tab {
  flex: 1;
  padding: 8px;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
  transition: all var(--transition);
}

.auth-tab:hover { color: var(--text-primary); }
.auth-tab.active { background: var(--accent); color: white; }

.auth-form { display: flex; flex-direction: column; gap: 16px; }

.form-group { display: flex; flex-direction: column; gap: 4px; }

.form-group label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
}

.form-group input {
  padding: 10px 12px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 15px;
  transition: border-color var(--transition);
}

.form-group input:focus { border-color: var(--accent); }
.form-group small { font-size: 11px; color: var(--text-muted); }

.form-select {
  padding: 10px 12px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 14px;
  transition: border-color var(--transition);
  cursor: pointer;
  appearance: auto;
}
.form-select:focus { border-color: var(--accent); outline: none; }

.btn-primary {
  padding: 11px 20px;
  background: var(--accent);
  color: white;
  border-radius: var(--radius);
  font-size: 15px;
  font-weight: 600;
  transition: background var(--transition);
  margin-top: 4px;
}

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

.auth-error {
  margin-top: 16px;
  padding: 10px 14px;
  background: rgba(240,71,71,0.12);
  border: 1px solid var(--danger);
  border-radius: var(--radius-sm);
  color: var(--danger);
  font-size: 13px;
  text-align: center;
}

.auth-theme-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 20px;
  padding: 16px 12px 0;
  border-top: 1px solid var(--border);
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
}

.auth-theme-bar .theme-btn {
  width: 28px;
  height: 28px;
  font-size: 11px;
  flex-shrink: 0;
}

.auth-lang-bar {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

.auth-version {
  text-align: center;
  margin-top: 12px;
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  opacity: 0.7;
}


/* ═══════════════════════════════════════════════════════════
   APP LAYOUT
   ═══════════════════════════════════════════════════════════ */

#app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh; /* dynamic viewport height — accounts for mobile browser chrome */
  width: 100vw;
  overflow: hidden;
}

#app-body {
  display: flex;
  flex: 1;
  min-height: 0;
}

/* ── Left Sidebar ──────────────────────────────────────── */

.sidebar {
  width: var(--sidebar-width);
  min-width: 200px;
  max-width: 400px;
  background: var(--bg-secondary);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

/* Resize handle (right edge of left sidebar) */
.sidebar-resize-handle {
  position: absolute;
  top: 0;
  right: -3px;
  width: 6px;
  height: 100%;
  cursor: col-resize;
  z-index: 10;
  background: transparent;
  transition: background 0.15s;
}
.sidebar[data-panel-pos="right"] .sidebar-resize-handle {
  right: auto;
  left: -3px;
}
.sidebar-resize-handle:hover,
.sidebar-resize-handle.dragging {
  background: var(--accent);
  opacity: 0.5;
}

.sidebar-header { padding: 16px; border-bottom: 1px solid var(--border); }

.brand { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.logo-sm { font-size: 24px; color: var(--accent); }
.brand-icon { width: 28px; height: 28px; border-radius: 6px; object-fit: cover; flex-shrink: 0; }

.brand-text {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 4px;
  color: var(--text-primary);
  font-family: var(--font-heading);
}

.user-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--bg-primary);
  border-radius: var(--radius-sm);
}

.user-names {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  min-width: 0;
}

.current-user {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.login-name {
  font-size: 10px;
  color: var(--text-muted);
  opacity: 0.7;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.icon-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 16px;
  padding: 4px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-btn:hover { color: var(--text-primary); background: var(--bg-hover); }
.icon-btn.active { color: var(--accent); background: rgba(var(--accent-rgb, 124,92,252), 0.15); }
.icon-btn.small { font-size: 13px; }
.icon-btn.danger:hover { color: var(--danger); }

.sidebar-section { padding: 12px 16px; border-bottom: 1px solid var(--border); }
.sidebar-section.channel-section {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding-bottom: 0;
}

.section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.input-row { display: flex; gap: 6px; }

.input-row input {
  flex: 1;
  padding: 7px 10px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 13px;
  min-width: 0;
}

.input-row input:focus { border-color: var(--accent); }

.btn-sm {
  padding: 7px 12px;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  transition: all var(--transition);
  white-space: nowrap;
}

.btn-sm:hover { background: var(--bg-hover); color: var(--text-primary); }
.btn-sm.btn-accent { background: var(--accent); color: white; font-size: 16px; padding: 7px 10px; line-height: 1; }
.btn-sm.btn-accent:hover { background: var(--accent-hover); }
.btn-sm.btn-danger { background: var(--danger, #e74c3c); color: white; font-size: 16px; padding: 7px 10px; line-height: 1; }
.btn-sm.btn-danger:hover { filter: brightness(1.15); }

/* ── Channel List ──────────────────────────────────────── */

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

.channel-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  cursor: pointer;
  transition: background var(--transition);
  position: relative;
}

.channel-item:hover { background: var(--bg-hover); }
.channel-item.active { background: var(--bg-active); }

.temp-channel-create-btn:hover { opacity: 0.8 !important; }

.channel-item.active::before {
  content: '';
  position: absolute;
  left: 0; top: 4px; bottom: 4px;
  width: 3px;
  background: var(--accent);
  border-radius: 0 2px 2px 0;
}

.channel-hash { color: var(--text-muted); font-weight: 700; font-size: 16px; flex-shrink: 0; }

.channel-name {
  font-size: 14px;
  color: var(--text-secondary);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.channel-item.active .channel-name,
.channel-item:hover .channel-name { color: var(--text-primary); }

.channel-badge {
  background: var(--danger);
  color: white;
  font-size: 10px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
}

/* Thread @mention bell badge in sidebar — distinct amber/yellow */
.channel-badge.thread-mention-badge {
  background: #f5a623;
  color: #1a1a1a;
  font-size: 10px;
  margin-left: 4px;
  padding: 0 6px;
}

/* Nested-unread dot — small marker on category labels and parent
   channels to hint that one of their (uncollapsed) children has
   unread messages. Visually distinct from the count bubble so the
   user can tell it's a "look inside" indicator, not the unread count
   itself. (#5302-ish parent-notif request) */
.channel-badge-nested-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent, #5865f2);
  opacity: 0.85;
  margin-left: auto;
  flex-shrink: 0;
  align-self: center;
}
.channel-badge-nested-dot.has-mention {
  background: var(--danger);
}

/* Header pill: "🔔 N" mentions in threads */
.thread-mentions-pill {
  background: rgba(245, 166, 35, 0.18);
  color: #f5a623;
  border: 1px solid rgba(245, 166, 35, 0.6);
  padding: 2px 8px;
  font-weight: 700;
  border-radius: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.thread-mentions-pill:hover {
  background: rgba(245, 166, 35, 0.32);
}

/* ── DM Picture-in-Picture floating panel ──────────
   A draggable/resizable overlay that hosts a full-fidelity DM
   without leaving the user's current channel. Reuses the same
   message DOM (.message / .message-compact) as the main pane,
   with avatars hidden and spacing tightened for the smaller
   footprint. A subtle banner image (server banner) bleeds
   through behind the messages.                        */
.dm-pip-panel {
  position: fixed;
  z-index: 1010;
  display: none;
  flex-direction: column;
  background: var(--bg-primary, #1e1e1e);
  border: 1px solid var(--border, #444);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  resize: both;
  min-width: 320px;
  min-height: 280px;
}
/* Banner background — rendered behind everything else */
.dm-pip-banner {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.18;
  filter: saturate(1.1);
  pointer-events: none;
  z-index: 0;
}
.dm-pip-panel::after {
  /* Soft dark gradient overlay so message text remains readable
     when a banner image is set. */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.55) 100%);
  pointer-events: none;
  z-index: 0;
}
.dm-pip-panel.no-banner::after { background: transparent; }
.dm-pip-header,
.dm-pip-messages,
.dm-pip-reply-bar,
.dm-pip-input-area { position: relative; z-index: 1; }
.dm-pip-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: rgba(20, 20, 20, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--border, #444);
  cursor: move;
  user-select: none;
}
.dm-pip-avatar-wrap {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-secondary, #2a2a2a);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
}
.dm-pip-avatar-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.dm-pip-avatar-wrap.avatar-square { border-radius: 6px; }
.dm-pip-avatar-wrap.avatar-rounded { border-radius: 8px; }
.dm-pip-title { font-weight: 600; font-size: 13px; }
.dm-pip-spacer { flex: 1; }
.dm-pip-messages {
  flex: 1;
  overflow-y: auto;
  padding: 6px 8px 8px;
  font-size: 13px;
  line-height: 1.4;
}
.dm-pip-loading {
  opacity: 0.7;
  font-style: italic;
  text-align: center;
  padding: 12px;
}
/* ── Reuse main message DOM but compact it for PiP ── */
.dm-pip-messages .message,
.dm-pip-messages .message-compact {
  padding: 2px 6px;
  margin: 0;
  font-size: 13px;
}
/* Defeat density-overrides (e.g. [data-density="compact"] .message-compact
   { padding-left: 44px }) that would otherwise recess follow-up messages
   in the PiP, making them look misaligned with the first message in a
   group. PiP always uses a flush left edge for both root and follow-ups. */
.dm-pip-panel .dm-pip-messages .message,
.dm-pip-panel .dm-pip-messages .message-compact {
  padding-left: 6px;
  padding-right: 6px;
}
.dm-pip-messages .message-row {
  gap: 0;
  /* The default .message-row has padding: 4px 8px which would push the
     full-message body 8px further right than the compact-message body,
     making first-in-group messages look indented relative to follow-ups.
     Zero out the horizontal padding so both align at the same left edge
     (controlled by the .message / .message-compact padding-left above). */
  padding-left: 0;
  padding-right: 0;
}
/* Hide per-message avatars — header already shows the partner pfp */
.dm-pip-messages .message-avatar,
.dm-pip-messages .message-avatar-img {
  display: none !important;
}
.dm-pip-messages .message .message-body,
.dm-pip-messages .message-compact .message-body {
  margin-left: 0;
  padding-left: 0;
  min-width: 0;
  flex: 1;
}
.dm-pip-messages .message-header {
  gap: 6px;
  margin-bottom: 1px;
}
.dm-pip-messages .message-author { font-size: 12.5px; font-weight: 600; }
.dm-pip-messages .message-time { font-size: 10.5px; opacity: 0.7; }
.dm-pip-messages .message-content {
  font-size: 13px;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
.dm-pip-messages .message-compact .compact-time {
  font-size: 10px;
  width: 36px;
  text-align: right;
  padding-right: 4px;
  /* Cap the absolute-positioned timestamp to the gutter so it doesn't
     bleed across the message body when the content area is wider than
     the gutter. (#5292) */
  left: 0;
}
/* Reserve gutter space on hover so the absolutely-positioned compact
   timestamp doesn't overlap the message text in the narrow PiP layout. */
@media (hover: hover) {
  .dm-pip-messages .message-compact:hover { padding-left: 44px; }
}
/* Slim reactions, polls, link previews to fit the smaller frame */
.dm-pip-messages .reactions-row { gap: 4px; margin-top: 2px; }
.dm-pip-messages .reaction-badge {
  padding: 1px 6px;
  font-size: 11px;
}
.dm-pip-messages .reply-banner {
  font-size: 11px;
  padding: 2px 6px;
  margin-bottom: 2px;
}
.dm-pip-messages img,
.dm-pip-messages video,
.dm-pip-messages .link-preview {
  max-width: 100%;
}
.dm-pip-messages .link-preview { font-size: 11px; }
/* Toolbar buttons stay clickable but become more compact */
.dm-pip-messages .msg-toolbar { font-size: 11px; }
.dm-pip-messages .msg-toolbar button { padding: 2px 4px; }
.dm-pip-reply-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  background: rgba(20, 20, 20, 0.65);
  border-top: 1px solid var(--border, #444);
  font-size: 11px;
  color: var(--text-secondary, #aaa);
}
.dm-pip-reply-bar > span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-pip-input-area {
  display: flex;
  gap: 6px;
  padding: 8px;
  border-top: 1px solid var(--border, #444);
  background: rgba(20, 20, 20, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.dm-pip-input {
  flex: 1;
  resize: none;
  border-radius: 6px;
  border: 1px solid var(--border, #444);
  background: var(--bg-primary, #1e1e1e);
  color: var(--text-primary, #ddd);
  padding: 6px 8px;
  font-family: inherit;
  font-size: 13px;
  max-height: 120px;
}
.dm-pip-send {
  background: var(--accent, #5865f2);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 0 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dm-pip-send:hover { filter: brightness(1.1); }

/* Emoji picker trigger button shared by DM PiP and thread input areas */
.pip-input-emoji-btn {
  flex-shrink: 0;
  background: none;
  border: none;
  border-radius: 6px;
  font-size: 18px;
  line-height: 1;
  padding: 4px 5px;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.15s, background 0.15s;
  align-self: center;
  color: var(--text-secondary, #ccc);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pip-input-emoji-btn:hover { opacity: 1; background: var(--bg-tertiary); }
.pip-input-emoji-btn .tb-icon { display: inline-flex; align-items: center; justify-content: center; }
.pip-input-emoji-btn .tb-icon-emoji { font-size: 18px; }
.pip-input-emoji-btn svg { width: 20px; height: 20px; display: block; }

/* ── Private channel styling (muted appearance) ─── */
.channel-item.private-channel .channel-name { opacity: 0.6; }
.channel-item.private-channel .channel-hash { opacity: 0.6; }
.channel-item.private-channel:hover .channel-name,
.channel-item.private-channel:hover .channel-hash { opacity: 1; }
.channel-item.private-channel.active .channel-name,
.channel-item.private-channel.active .channel-hash { opacity: 1; }

/* ── Role channel access panel ─── */
.role-channel-access-section {
  margin-top: 16px;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}
.role-channel-access-section h5 { margin: 0 0 8px; }
.role-channel-access-list {
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-secondary);
  padding: 4px 0;
}
.rca-channel-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  font-size: 13px;
}
.rca-channel-row:hover { background: var(--bg-hover); }
.rca-channel-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-secondary);
}
.rca-channel-name.rca-sub { padding-left: 16px; opacity: 0.85; }
.rca-channel-row label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  cursor: pointer;
}
.rca-reapply-btn {
  margin-top: 8px;
  font-size: 12px;
}

/* ── Main Content ──────────────────────────────────────── */

.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--bg-primary);
  position: relative;
}

.channel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  min-height: 52px;
  gap: 12px;
}

.channel-info { display: flex; align-items: center; gap: 10px; min-width: 0; }

/* ── Header actions box (code/settings | search/pin) ── */
.header-actions-box {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border: 1px solid var(--border, rgba(255,255,255,0.1));
  border-radius: 8px;
  background: var(--bg-tertiary, rgba(255,255,255,0.03));
  flex-shrink: 0;
}
.header-actions-box .icon-btn {
  opacity: 0.7;
  transition: opacity 0.15s;
}
.header-actions-box .icon-btn:hover {
  opacity: 1;
}
.header-actions-divider {
  width: 1px;
  height: 18px;
  background: var(--border, rgba(255,255,255,0.12));
  flex-shrink: 0;
  margin: 0 2px;
}

.header-left-actions {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}

/* ── Update Available Banner ── */
.update-banner {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  border-radius: 20px;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
  animation: updateFadeIn 0.4s ease;
  transition: transform 0.15s, box-shadow 0.15s;
}
.update-banner:hover {
  transform: scale(1.05);
  box-shadow: 0 2px 12px rgba(var(--accent-rgb, 88, 101, 242), 0.4);
  color: #fff;
}
.update-pulse {
  width: 8px;
  height: 8px;
  background: #fff;
  border-radius: 50%;
  animation: updatePulse 1.5s ease-in-out infinite;
}
@keyframes updatePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.8); }
}
@keyframes updateFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Desktop App Banner ── */
.desktop-app-banner {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: linear-gradient(135deg, #1abc9c, #16a085);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  border-radius: 20px;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
  animation: updateFadeIn 0.4s ease;
  transition: transform 0.15s, box-shadow 0.15s;
  position: relative;
}
.desktop-app-banner:hover {
  transform: scale(1.05);
  box-shadow: 0 2px 12px rgba(26, 188, 156, 0.4);
  color: #fff;
}
.desktop-app-icon {
  font-size: 13px;
  line-height: 1;
}
.desktop-app-text {
  pointer-events: none;
}
.desktop-app-dismiss {
  background: none;
  border: none;
  color: rgba(255,255,255,0.7);
  font-size: 15px;
  cursor: pointer;
  padding: 0 0 0 4px;
  line-height: 1;
  transition: color 0.15s;
}
.desktop-app-dismiss:hover {
  color: #fff;
}

/* ── Android Beta Banner ── */
.android-beta-banner {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: linear-gradient(135deg, #3ddc84, #2bb55e);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  border-radius: 20px;
  border: none;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
  animation: updateFadeIn 0.4s ease;
  transition: transform 0.15s, box-shadow 0.15s;
  position: relative;
}
.android-beta-banner:hover {
  transform: scale(1.05);
  box-shadow: 0 2px 12px rgba(61, 220, 132, 0.4);
  color: #fff;
}
.android-beta-icon {
  font-size: 13px;
  line-height: 1;
}
.android-beta-text {
  pointer-events: none;
}
.android-beta-dismiss {
  background: none;
  border: none;
  color: rgba(255,255,255,0.7);
  font-size: 15px;
  cursor: pointer;
  padding: 0 0 0 4px;
  line-height: 1;
  transition: color 0.15s;
}
.android-beta-dismiss:hover {
  color: #fff;
}

/* ── Android Beta Promo Popup ── */
.android-beta-promo {
  max-width: 460px;
  text-align: center;
  padding: 36px 32px 28px;
  border: 1px solid var(--border-light);
  border-radius: 16px;
  animation: desktopPromoIn 0.35s ease;
}
.android-beta-promo-icon {
  font-size: 48px;
  width: 80px;
  height: 80px;
  line-height: 80px;
  margin: 0 auto 16px;
  background: linear-gradient(135deg, #3ddc84, #2bb55e);
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.android-beta-promo-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 4px;
  text-align: center;
}
.android-beta-promo-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  background: linear-gradient(135deg, #3ddc84, #2bb55e);
  color: #fff;
  padding: 2px 8px;
  border-radius: 10px;
  margin-bottom: 6px;
}
.android-beta-promo-subtitle {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0 0 16px;
}
.android-beta-promo-features {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  text-align: left;
  display: inline-block;
}
.android-beta-promo-features li {
  font-size: 14px;
  color: var(--text-primary);
  padding: 4px 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.android-beta-promo-note {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0 0 16px;
}
.android-beta-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
}
.android-beta-email-input {
  width: 100%;
  max-width: 320px;
  padding: 10px 14px;
  font-size: 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  color: var(--text-primary);
  outline: none;
  transition: border-color 0.15s;
}
.android-beta-email-input:focus {
  border-color: #3ddc84;
  box-shadow: 0 0 0 2px rgba(61, 220, 132, 0.2);
}
.android-beta-submit {
  padding: 10px 24px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 8px;
  background: linear-gradient(135deg, #3ddc84, #2bb55e);
  color: #fff;
  border: none;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.15s;
}
.android-beta-submit:hover {
  transform: scale(1.03);
  box-shadow: 0 4px 16px rgba(61, 220, 132, 0.3);
}
.android-beta-promo-credit {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0 0 16px;
  font-style: italic;
}
.android-beta-promo-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 0 0 12px;
}
.android-beta-promo-later {
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 8px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.15s;
}
.android-beta-promo-later:hover {
  background: var(--bg-tertiary);
}
.android-beta-promo-dismiss-label {
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
}
.android-beta-promo-dismiss-label input[type="checkbox"] {
  accent-color: #3ddc84;
  cursor: pointer;
}

/* ── Desktop App Promo Popup ── */
.desktop-promo {
  max-width: 440px;
  text-align: center;
  padding: 36px 32px 28px;
  border: 1px solid var(--border-light);
  border-radius: 16px;
  animation: desktopPromoIn 0.35s ease;
}
@keyframes desktopPromoIn {
  from { opacity: 0; transform: scale(0.92) translateY(12px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.desktop-promo-icon {
  font-size: 48px;
  width: 80px;
  height: 80px;
  line-height: 80px;
  margin: 0 auto 16px;
  background: var(--accent);
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.desktop-promo-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.desktop-promo-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  background: var(--accent);
  color: #fff;
  padding: 2px 8px;
  border-radius: 10px;
}
.desktop-promo-subtitle {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0 0 20px;
}
.desktop-promo-features {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  text-align: left;
  display: inline-block;
}
.desktop-promo-features li {
  font-size: 14px;
  color: var(--text-primary);
  padding: 4px 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.promo-check {
  color: var(--accent);
  font-weight: 700;
  font-size: 16px;
  flex-shrink: 0;
}
.desktop-promo-meta {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0 0 20px;
}
.desktop-promo-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 0 0 16px;
}
.desktop-promo-install {
  padding: 10px 24px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 8px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--accent);
  color: #fff;
  border: none;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.desktop-promo-install:hover {
  background: var(--accent-hover);
  color: #fff;
  transform: scale(1.03);
}
.desktop-promo-later {
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 8px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.15s;
}
.desktop-promo-later:hover {
  background: var(--bg-tertiary);
}
.desktop-promo-dismiss-label {
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
}
.desktop-promo-dismiss-label input[type="checkbox"] {
  accent-color: var(--accent);
  cursor: pointer;
}

/* Disabled-feature badge (streams/music not allowed) — red diagonal slash overlay */
.ch-disabled-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  font-size: 0.65rem;
  opacity: 0.75;
  overflow: hidden;
}
.ch-disabled-badge::after {
  content: '';
  position: absolute;
  width: 2px;
  height: 20px;
  background: #e74c3c;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
  pointer-events: none;
}

/* Channel context menu (sidebar "..." hover button) */
.channel-item { position: relative; }

/* ── Drag-and-drop channel reordering ──────────────────── */
.ch-dragging { opacity: 0.4; cursor: grabbing !important; }
.channel-item[draggable="true"],
.category-label[draggable="true"],
.sub-channel-item[draggable="true"] { cursor: grab; }
.ch-drag-indicator {
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
  margin: 1px 8px;
  pointer-events: none;
  flex-shrink: 0;
}
.channel-more-btn {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 16px;
  cursor: pointer;
  padding: 2px 5px;
  border-radius: var(--radius-sm);
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s;
  line-height: 1;
  flex-shrink: 0;
  margin-left: auto;
}
.channel-item:hover .channel-more-btn,
.channel-item .channel-more-btn:focus {
  opacity: 1;
  pointer-events: auto;
}
.channel-more-btn:hover { background: var(--bg-hover); color: var(--text-primary); }

.channel-ctx-menu {
  position: fixed;
  z-index: 9999;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(0,0,0,0.35);
  min-width: 170px;
  padding: 4px;
}
.channel-ctx-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: none;
  border: none;
  color: var(--text-primary);
  font-size: 13px;
  cursor: pointer;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  width: 100%;
  text-align: left;
}
.channel-ctx-item:hover { background: var(--bg-hover); }
.channel-ctx-item.danger { color: var(--danger); }
.channel-ctx-item.danger:hover { background: #3a1515; }
.ctx-indicator {
  margin-left: auto;
  font-size: 0.85em;
  padding-left: 10px;
  white-space: nowrap;
}

/* ── Channel Functions popout panel ── */
.channel-functions-panel {
  position: fixed;
  background: var(--bg-secondary);
  border-radius: 6px;
  padding: 3px 0;
  border: 1px solid var(--border);
  box-shadow: 0 4px 16px rgba(0,0,0,0.35);
  z-index: 10000;
  min-width: 170px;
}
.cfn-divider {
  border-top: 1px solid var(--border);
  margin: 3px 8px;
}
.cfn-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
  user-select: none;
  transition: background 0.1s;
}
.cfn-row:hover { background: var(--bg-hover); }
.cfn-row.cfn-disabled {
  opacity: 0.38;
  cursor: not-allowed;
  pointer-events: none;
}
.cfn-row.cfn-disabled .cfn-label {
  text-decoration: line-through;
  text-decoration-color: rgba(255,255,255,0.45);
}
.cfn-label {
  font-size: 12px;
  color: var(--text-secondary);
}
.cfn-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 3px;
  min-width: 30px;
  text-align: center;
  letter-spacing: 0.3px;
}
.cfn-badge.cfn-on {
  background: rgba(87, 242, 135, 0.15);
  color: #57f287;
}
.cfn-badge.cfn-off {
  background: rgba(255,255,255,0.06);
  color: var(--text-muted);
}
.cfn-input {
  width: 54px;
  background: var(--bg-primary);
  border: 1px solid var(--accent, var(--border));
  border-radius: 3px;
  color: var(--text-primary);
  font-size: 11px;
  padding: 2px 5px;
  text-align: right;
  outline: none;
}
select.cfn-select.cfn-input {
  width: auto;
  max-width: 120px;
  text-align: left;
}
/* Arrow indicator on the Channel Functions button */
.channel-ctx-item [class="cfn-arrow"] {
  margin-left: auto;
  font-size: 9px;
  color: var(--text-muted);
}

.channel-ctx-sep {
  border: none;
  border-top: 1px solid var(--border);
  margin: 3px 6px;
}

.channel-info h3 {
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--font-heading);
}

.channel-code-tag {
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--text-muted);
  background: var(--bg-tertiary);
  padding: 2px 8px;
  border-radius: 10px;
  letter-spacing: 0.5px;
}

.channel-code-tag:empty { display: none; }

/* ── Welcome Screen ────────────────────────────────────── */

.welcome-screen { flex: 1; display: flex; align-items: center; justify-content: center; }

.welcome-content { text-align: center; color: var(--text-secondary); }

.welcome-icon { font-size: 72px; color: var(--accent); opacity: 0.5; margin-bottom: 16px; }

.welcome-content h2 {
  font-size: 24px;
  color: var(--text-primary);
  margin-bottom: 8px;
  font-family: var(--font-heading);
}

.welcome-content p { font-size: 14px; line-height: 1.6; }

/* ── Message Area ──────────────────────────────────────── */

.message-area { flex: 1; display: flex; flex-direction: column; min-height: 0; position: relative; }

/* ── Jump to Bottom button ───────────────────────────── */
.jump-to-bottom {
  position: absolute;
  bottom: 120px;
  right: 24px;
  z-index: 50;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  transition: background 0.15s ease, color 0.15s ease, opacity 0.2s ease, transform 0.2s ease;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}
.jump-to-bottom.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.jump-to-bottom:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.messages {
  flex: 1;
  overflow-y: auto;
  overflow-anchor: none;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: relative; /* for absolutely-positioned children like #msg-more-btn */
}

.message {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.message:hover {
  background: rgba(255,255,255,0.02);
  transition: background var(--transition);
  box-shadow: var(--msg-glow);
}

.message-row {
  display: flex;
  gap: 12px;
  padding: 4px 8px;
}

.message-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  color: white;
  flex-shrink: 0;
  margin-top: 2px;
}

.message-avatar-img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  margin-top: 2px;
}

/* User list avatars */
/* Discord-style avatar wrapper with overlaid status dot */
.user-avatar-wrapper {
  position: relative;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}

.user-status-dot {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--success);
  border: 2px solid var(--bg-secondary);
  box-sizing: border-box;
}

/* Away: half-circle (dome) — visually distinct from full circle */
.user-status-dot.away {
  background: #faa61a;
  border-radius: 2px 2px 50% 50%;
}

/* DND: square — immediately distinguishable */
.user-status-dot.dnd {
  background: var(--danger);
  border-radius: 2px;
}

/* Invisible / Offline: hollow circle outline */
.user-status-dot.invisible {
  background: transparent;
  border: 2px solid var(--text-muted);
}

.user-item.offline .user-status-dot {
  background: transparent;
  border: 2px solid var(--text-muted);
}

.user-item-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 10px;
  color: white;
  flex-shrink: 0;
}

.user-item-avatar-img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

/* Avatar settings */
.avatar-settings { padding: 4px 0; position: relative; z-index: 1; }
.settings-section-subtitle { font-size: 13px; font-weight: 600; color: var(--text-secondary); margin-bottom: 10px; margin-top: 16px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }

/* Avatar Upload Row (Anmire-style) */
.avatar-upload-row { display: flex; align-items: center; gap: 8px; }
.avatar-upload-preview {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid var(--border);
  background: var(--bg-tertiary);
}
.avatar-upload-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* Avatar Shape Picker */
.avatar-shape-picker { display: flex; gap: 8px; flex-wrap: wrap; }
.avatar-shape-btn {
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-tertiary, #2a2a2e); border: 2px solid var(--border);
  border-radius: 6px; cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.avatar-shape-btn:hover { border-color: var(--text-secondary); }
.avatar-shape-btn.active { border-color: var(--accent); box-shadow: 0 0 8px rgba(var(--accent-rgb, 88,101,242), 0.4); }
.shape-preview { width: 20px; height: 20px; background: var(--accent, #5865f2); }
.shape-circle   { border-radius: 50%; }
.shape-rounded  { border-radius: 4px; }
.shape-squircle { border-radius: 28%; }
.shape-hex      { clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); }
.shape-diamond  { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }

/* Avatar Shape Classes — applied to .message-avatar and .message-avatar-img */
.avatar-circle   { border-radius: 50% !important; }
.avatar-rounded  { border-radius: 6px !important; }
.avatar-squircle { border-radius: 28% !important; }
.avatar-hex      { clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); border-radius: 0 !important; }
.avatar-diamond  { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); border-radius: 0 !important; }

/* Size slider */
#avatar-size-slider {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: 3px;
  background: var(--bg-tertiary, #2a2a2e);
  outline: none;
}
#avatar-size-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--accent, #5865f2);
  cursor: pointer;
  border: 2px solid var(--bg-primary, #1e1e22);
}
#avatar-size-slider::-moz-range-thumb {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--accent, #5865f2);
  cursor: pointer;
  border: 2px solid var(--bg-primary, #1e1e22);
}

/* Custom sounds admin */
.custom-sound-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px solid var(--border);
}
.custom-sound-item:last-child { border-bottom: none; }
.custom-sound-name { flex: 1; font-size: 13px; color: var(--text-primary); }
.custom-sound-name-input {
  flex: 1; font-size: 12px; padding: 2px 6px; border-radius: 4px;
  border: 1px solid var(--accent); background: var(--bg-input);
  color: var(--text-primary); outline: none;
}
.btn-xs {
  padding: 2px 8px;
  font-size: 11px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  color: var(--text-primary);
  cursor: pointer;
  transition: background 0.15s;
}
.btn-xs:hover { background: var(--bg-tertiary); }

/* ── Sound Manager Popout ─────────────────────────────────── */
.sound-modal-tabs {
  display: flex; gap: 4px; margin-bottom: 12px;
  border-bottom: 1px solid var(--border); padding-bottom: 8px;
}
.sound-tab {
  padding: 5px 12px; font-size: 12px; border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  border: 1px solid var(--border); border-bottom: none; background: var(--bg-tertiary);
  color: var(--text-secondary); cursor: pointer; transition: background 0.15s, color 0.15s;
}
.sound-tab:hover { background: var(--bg-hover); color: var(--text-primary); }
.sound-tab.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.sound-tab-content { display: none; }
.sound-tab-content.active { display: block; }

/* Soundboard grid */
.soundboard-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 6px; max-height: 280px; overflow-y: auto; padding: 4px 0;
}
.soundboard-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; padding: 10px 6px; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--bg-secondary);
  color: var(--text-primary); cursor: pointer; min-height: 60px;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.soundboard-btn:hover { background: var(--bg-hover); border-color: var(--accent); }
.soundboard-btn:active { transform: scale(0.96); }
.soundboard-btn .sb-name { font-size: 12px; font-weight: 600; text-align: center; word-break: break-word; }
.soundboard-btn .sb-hotkey {
  font-size: 9px; color: var(--text-muted); background: var(--bg-tertiary);
  padding: 1px 6px; border-radius: 3px; font-family: var(--font-mono);
}
.sb-hotkey-row {
  display: inline-flex; align-items: center; gap: 4px;
}
.sb-hotkey-clear {
  font-size: 13px; line-height: 1; color: var(--text-muted); cursor: pointer;
  padding: 0 2px; border-radius: 3px; transition: color 0.15s, background 0.15s;
}
.sb-hotkey-clear:hover { color: var(--danger); background: rgba(240,71,71,0.15); }
.sb-hotkey-set {
  font-size: 9px; color: var(--accent); cursor: pointer; opacity: 0.7;
  transition: opacity 0.15s;
}
.sb-hotkey-set:hover { opacity: 1; text-decoration: underline; }
.sound-search-row { display: flex; gap: 8px; margin-bottom: 8px; }
.sound-assign-list { display: flex; flex-direction: column; gap: 4px; }
.sound-assign-select { min-width: 140px; }

/* Hotkey recording visual */
.hotkey-recording { animation: hotkey-pulse 0.6s ease infinite alternate; }
@keyframes hotkey-pulse { from { box-shadow: 0 0 0 2px var(--accent-glow); } to { box-shadow: 0 0 8px 4px var(--accent-glow); } }


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

.message-header { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; }
.message-author { font-weight: 600; font-size: 14px; }
.message-time { font-size: 11px; color: var(--text-muted); }

.message-content {
  font-size: 14px;
  color: var(--text-primary);
  word-wrap: break-word;
  overflow-wrap: break-word;
  line-height: 1.45;
}

.message-content a { color: var(--text-link); }

.message-compact {
  display: flex;
  position: relative;
  padding: 1px 8px 1px 56px;
  border-radius: var(--radius-sm);
  transition: background var(--transition);
  flex-shrink: 0;
}

.message-compact:hover { background: rgba(255,255,255,0.02); box-shadow: var(--msg-glow); }

/* Thin horizontal separator between different users' message groups */
.message-user-sep {
  margin-top: 8px;
  border-top: 1px solid var(--border);
  padding-top: 4px;
}

.message-compact .compact-time {
  position: absolute;
  left: 8px;
  top: 2px;
  font-size: 10px;
  color: var(--text-muted);
  display: none;
}

/* Only show compact timestamp on real mouse hover */
@media (hover: hover) {
  .message-compact:hover .compact-time { display: block; }
}

.system-message {
  padding: 4px 8px;
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
  text-align: center;
}

.welcome-message {
  padding: 10px 16px;
  margin: 8px auto;
  max-width: 480px;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent, #5865f2);
  text-align: center;
  background: var(--bg-secondary, #2b2d31);
  border: 1px solid var(--border-light, #3a3c42);
  border-radius: 8px;
}

.typing-indicator {
  padding: 0 20px;
  height: 20px;
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
}

/* ── Message Input ─────────────────────────────────────── */

.message-input-area {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 12px 20px 16px;
  position: relative;
}

.message-input-area textarea {
  flex: 1;
  padding: 10px 14px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-size: 14px;
  resize: none;
  max-height: 120px;
  line-height: 1.4;
  transition: border-color var(--transition);
}

.message-input-area textarea:focus { border-color: var(--accent); }
.message-input-area textarea::placeholder { color: var(--text-muted); }

.btn-send {
  width: 42px;
  height: 42px;
  background: var(--accent);
  color: white;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition);
  flex-shrink: 0;
}

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

/* ── Right Sidebar ─────────────────────────────────────── */

.right-sidebar {
  width: var(--right-width);
  min-width: 200px;
  max-width: 400px;
  background: var(--bg-secondary);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  transition: width 0.25s ease, min-width 0.25s ease, border-width 0.25s ease, opacity 0.2s ease;
}

/* Collapsed state */
.right-sidebar.collapsed {
  width: 0 !important;
  min-width: 0 !important;
  border-left-width: 0;
  opacity: 0;
  pointer-events: none;
}

/* Sidebar collapse arrow — fixed to the right edge of the viewport.
   Always accessible regardless of sidebar state or scroll position. */
.sidebar-collapse-btn {
  position: fixed;
  right: 0;
  top: 56px;
  width: 20px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-right: none;
  border-radius: 6px 0 0 6px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
  z-index: 100;
  transition: color 0.15s, background 0.15s;
}
.sidebar-collapse-btn:hover {
  color: var(--text-primary);
  background: var(--bg-tertiary);
}

/* Users section — fills remaining space and scrolls */
.right-sidebar-users {
  flex: 1 1 0;
  overflow-y: auto;
  min-height: 0;
}

/* Resize handle (left edge of right sidebar) */
.right-sidebar-resize-handle {
  position: absolute;
  top: 0;
  left: -3px;
  width: 6px;
  height: 100%;
  cursor: col-resize;
  z-index: 10;
  background: transparent;
  transition: background 0.15s;
}
.right-sidebar-resize-handle:hover,
.right-sidebar-resize-handle.dragging {
  background: var(--accent);
  opacity: 0.5;
}

.panel { padding: 16px; border-bottom: 1px solid var(--border); }

.panel-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.user-list { display: flex; flex-direction: column; gap: 4px; }

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

.user-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  position: relative;
}

.user-item:hover {
  background: var(--bg-hover);
}

.user-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); flex-shrink: 0; }
.user-item-name {
  font-size: 13px;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

/* Role color dot (to the left of the username, inside avatar wrapper) */
.user-role-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid rgba(0,0,0,0.3);
}

/* User tooltip (shown on hover over name) */
.user-item-tooltip {
  display: none;
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  transform: translateX(-50%);
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 8px 12px;
  z-index: 1000;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 6px 20px rgba(0,0,0,0.6);
  font-size: 12px;
  color: var(--text-primary);
  max-width: 220px;
  opacity: 1;
  backdrop-filter: none;
}
.user-item-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--border-light);
}
.user-item:hover .user-item-tooltip {
  display: block;
}
.tooltip-username {
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 2px;
}
.tooltip-role {
  font-size: 11px;
  opacity: 0.8;
}
.tooltip-status {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
  margin-top: 2px;
}

/* ═══════════════════════════════════════════════════════════
   PROFILE POPUP (Discord-style mini profile card)
   ═══════════════════════════════════════════════════════════ */

.profile-popup {
  position: fixed;
  z-index: 10001;
  width: 320px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  box-shadow: 0 8px 32px rgba(0,0,0,0.7);
  overflow: hidden;
  animation: profile-popup-in 0.18s ease-out;
  opacity: 1;
  backdrop-filter: none;
}

/* Hover-over variant: translucent tooltip, non-interactive */
.profile-popup-hover {
  background: color-mix(in srgb, var(--bg-secondary) 65%, transparent);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  border-color: color-mix(in srgb, var(--border-light) 50%, transparent);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  animation: profile-popup-hover-in 0.15s ease-out;
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;  /* can't be interacted with — it's a tooltip */
}
.profile-popup-hover .profile-popup-banner {
  opacity: 0.7;
}
.profile-popup-hover .profile-popup-close {
  display: none;  /* no X button on tooltip */
}
.profile-popup-hover .profile-popup-body {
  background: transparent;
}
.profile-popup-hover .profile-popup-actions {
  display: none;
}

/* Fade-out for hover popups */
.profile-popup-fading {
  opacity: 0 !important;
  transform: translateY(4px) !important;
  pointer-events: none !important;
  transition: opacity 0.2s ease, transform 0.2s ease !important;
}

@keyframes profile-popup-hover-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes profile-popup-in {
  from { opacity: 0; transform: scale(0.95) translateY(6px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.profile-popup-banner {
  height: 60px;
  position: relative;
  background: var(--bg-tertiary);
}

.profile-popup-close {
  position: absolute;
  top: 6px; right: 8px;
  background: none; border: none;
  color: var(--text-muted);
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 4px;
}
.profile-popup-close:hover { background: rgba(255,255,255,0.1); color: var(--text-primary); }

.profile-popup-avatar-wrapper {
  position: relative;
  width: 72px; height: 72px;
  margin: -36px 0 0 16px;
}

.profile-popup-avatar {
  width: 72px; height: 72px;
  border-radius: 50%;
  border: 4px solid var(--bg-primary);
  object-fit: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 700;
  color: #fff;
}
.profile-popup-avatar.avatar-hexagon { border-radius: 0; clip-path: polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%); }
.profile-popup-avatar.avatar-squircle { border-radius: 22%; }
.profile-popup-avatar.avatar-diamond { border-radius: 0; clip-path: polygon(50% 0%,100% 50%,50% 100%,0% 50%); }
.profile-popup-avatar.avatar-shield { border-radius: 0; clip-path: polygon(50% 0%,100% 10%,100% 65%,50% 100%,0% 65%,0% 10%); }

.profile-popup-avatar-fallback {
  background-color: var(--accent);
}

.profile-popup-status-dot {
  position: absolute;
  bottom: 2px; right: 2px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--success);
  border: 3px solid var(--bg-primary);
}
.profile-popup-status-dot.away { background: var(--warning); }
.profile-popup-status-dot.dnd { background: var(--danger); }
.profile-popup-status-dot.invisible { background: var(--text-muted); }

.profile-popup-body {
  padding: 10px 16px 16px;
  background: var(--bg-secondary);
}

.profile-popup-names {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-bottom: 6px;
}

.profile-popup-displayname {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}

.profile-popup-nickname {
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  line-height: 1.2;
  margin-bottom: 2px;
}

.profile-popup-username {
  font-size: 13px;
  color: var(--text-muted);
}

.profile-popup-status-text {
  font-size: 13px;
  color: var(--text-secondary);
  font-style: italic;
  padding: 4px 8px;
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
}

.profile-popup-bio {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.4;
  margin-bottom: 4px;
  word-break: break-word;
}

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

.profile-bio-toggle {
  background: none; border: none;
  color: var(--accent);
  cursor: pointer;
  font-size: 12px;
  padding: 2px 0;
}
.profile-bio-toggle:hover { text-decoration: underline; }

.profile-popup-divider {
  height: 1px;
  background: var(--border);
  margin: 8px 0;
}

.profile-popup-section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
  letter-spacing: 0.03em;
}

.profile-popup-roles {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
}

.profile-popup-role {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-size: 12px;
  border: 1px solid;
  border-radius: 12px;
  background: var(--bg-secondary);
}

.profile-role-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.profile-popup-join-date {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.profile-popup-actions {
  margin-top: 8px;
}

.profile-popup-action-btn {
  width: 100%;
  padding: 8px 12px;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  transition: background var(--transition), transform 0.1s;
}
.profile-popup-action-btn:active { transform: scale(0.98); }

.profile-dm-btn {
  background: var(--accent);
  color: #fff;
}
.profile-dm-btn:hover { background: var(--accent-hover); }

.profile-edit-btn {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid var(--border-light) !important;
}
.profile-edit-btn:hover { background: var(--bg-hover); }

.profile-nick-btn {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  margin-top: 6px;
  border: 1px solid var(--border-light) !important;
}
.profile-nick-btn:hover { background: var(--bg-hover); color: var(--text-primary); }

/* ── Edit Profile Modal ──────────────────────────── */
.edit-profile-modal-box {
  width: 380px;
  max-width: 95vw;
}

.edit-profile-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 12px 0 6px;
  letter-spacing: 0.03em;
}

.edit-profile-textarea {
  width: 100%;
  min-height: 80px;
  padding: 8px 10px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 13px;
  font-family: var(--font-main);
  resize: vertical;
}
.edit-profile-textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.edit-profile-char-count {
  font-size: 11px;
  color: var(--text-muted);
  text-align: right;
  margin-top: 2px;
}

/* Clickable message author and sidebar user items for profile popup */
.message-author { cursor: pointer; }
.message-author:hover { text-decoration: underline; }
.message-avatar, .message-avatar-img { cursor: pointer; }
.user-item { cursor: pointer; }

/* ═══════════════════════════════════════════════════════════
   TOASTS
   ═══════════════════════════════════════════════════════════ */

#toast-container {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200000;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}

.toast {
  padding: 10px 18px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-size: 13px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  animation: toastIn 0.25s ease, toastOut 0.3s ease 3.5s forwards;
  pointer-events: auto;
  max-width: 360px;
  word-break: break-word;
}

.toast.error { border-color: var(--danger); background: rgba(240,71,71,0.15); }
.toast.success { border-color: var(--success); background: rgba(67,181,129,0.15); }

.toast-action-btn {
  flex-shrink: 0;
  padding: 2px 10px;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 4px;
  color: inherit;
  font-size: 12px;
  cursor: pointer;
}
.toast-action-btn:hover { background: rgba(255,255,255,0.28); }

@keyframes toastIn {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes toastOut {
  from { opacity: 1; }
  to   { opacity: 0; transform: translateY(-10px); }
}

/* ═══════════════════════════════════════════════════════════
   SERVER BAR (far left, Discord-style)
   ═══════════════════════════════════════════════════════════ */

.server-bar {
  width: 56px;
  min-width: 56px;
  background: var(--bg-secondary);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 0;
  gap: 4px;
  overflow-y: auto;
  overflow-x: hidden;
}

.server-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  background: var(--bg-tertiary);
  position: relative;
  flex-shrink: 0;
}

.server-icon:hover { border-radius: 12px; background: var(--accent); }
.server-icon.home { border-radius: 12px; background: var(--accent); }

.server-icon.home.bounce {
  animation: serverBounce 0.4s ease;
}

@keyframes serverBounce {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(-6px); }
  60% { transform: translateY(-3px); }
}

.server-icon-text {
  font-size: 18px;
  color: var(--text-primary);
  pointer-events: none;
  font-weight: 700;
}

.server-icon-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  pointer-events: none;
}

.server-icon.add-server {
  background: transparent;
  border: 2px dashed var(--border-light);
}

.server-icon.add-server:hover {
  border-color: var(--accent);
  background: transparent;
  border-radius: 12px;
}

.server-icon.add-server .server-icon-text {
  font-size: 22px;
  color: var(--accent);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.server-status-dot {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--bg-secondary);
}

.server-status-dot.online  { background: var(--success); }
.server-status-dot.offline { background: var(--text-muted); }
.server-status-dot.unknown { background: var(--warning); }

.server-separator {
  width: 24px;
  height: 2px;
  background: var(--border);
  border-radius: 1px;
  margin: 4px 0;
  flex-shrink: 0;
}

.server-remove {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--danger);
  color: white;
  font-size: 12px;
  line-height: 1;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 1px solid var(--bg-secondary);
  padding: 0;
}

.server-icon.remote:hover .server-remove { display: flex; }

/* Server bar drag-and-drop reordering */
.server-icon.remote[draggable="true"] { cursor: grab; }
.server-icon.remote[draggable="true"]:active { cursor: grabbing; }
.server-icon.server-dragging { opacity: 0.4; }
.server-drop-indicator {
  height: 2px;
  background: var(--accent, #7c5cfc);
  margin: 2px 8px;
  border-radius: 2px;
  pointer-events: none;
}

/* Manage Servers gear button */
.server-icon.manage-servers {
  background: transparent;
  border: 2px dashed var(--border-light);
  margin-top: 2px;
}
.server-icon.manage-servers:hover {
  border-color: var(--accent);
  background: transparent;
  border-radius: 12px;
}
.server-icon.manage-servers .server-icon-text {
  font-size: 18px;
  color: var(--text-secondary);
  transition: color 0.15s;
}
.server-icon.manage-servers:hover .server-icon-text {
  color: var(--accent);
}

/* Manage Servers modal list */
.manage-servers-modal-inner {
  width: 480px;
  max-width: 90vw;
}
.manage-servers-list {
  max-height: 360px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 12px 0;
}
.manage-servers-list:empty::before {
  content: 'No servers added yet. Click "+ Add Server" below.';
  color: var(--text-muted);
  text-align: center;
  padding: 24px 0;
  font-size: 13px;
}
.manage-server-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--bg-tertiary);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  transition: background 0.15s;
}
.manage-server-row:hover {
  background: var(--bg-hover);
}
.manage-server-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  overflow: hidden;
}
.manage-server-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.manage-server-info {
  flex: 1;
  min-width: 0;
}
.manage-server-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.manage-server-url {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--font-mono);
}
.manage-server-status {
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 9px;
  flex-shrink: 0;
}
.manage-server-status.online {
  background: rgba(67, 181, 129, 0.15);
  color: var(--success);
}
.manage-server-status.offline {
  background: rgba(240, 71, 71, 0.12);
  color: var(--text-muted);
}
.manage-server-status.unknown {
  background: rgba(250, 166, 26, 0.12);
  color: var(--warning);
}
.manage-server-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.manage-server-actions button {
  background: none;
  border: none;
  font-size: 14px;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  transition: background 0.15s, color 0.15s;
}
.manage-server-actions button:hover {
  background: var(--bg-active);
  color: var(--text-primary);
}
.manage-server-actions button.danger-action:hover {
  background: #3a1515;
  color: var(--danger);
}

/* Sync Servers button in server bar */
.server-icon.sync-servers {
  background: transparent;
  border: 2px dashed var(--border-light);
  margin-top: 2px;
}
.server-icon.sync-servers:hover {
  border-color: var(--accent);
  background: transparent;
  border-radius: 12px;
}
.server-icon.sync-servers .server-icon-text {
  font-size: 20px;
  color: var(--text-secondary);
  transition: color 0.15s;
}
.server-icon.sync-servers:hover .server-icon-text {
  color: var(--accent);
}
.server-icon.sync-servers.spinning .server-icon-text {
  animation: syncSpin 0.8s linear infinite;
  color: var(--accent);
}
@keyframes syncSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Drag handle in Manage Servers list */
.manage-server-drag-handle {
  cursor: grab;
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1;
  user-select: none;
  flex-shrink: 0;
  padding: 0 2px;
  letter-spacing: 1px;
  opacity: 0.5;
  transition: opacity 0.15s, color 0.15s;
}
.manage-server-drag-handle:hover {
  opacity: 1;
  color: var(--text-primary);
}
.manage-server-row.dragging {
  opacity: 0.4;
}
.manage-server-row.drag-over-above {
  box-shadow: 0 -2px 0 0 var(--accent);
}
.manage-server-row.drag-over-below {
  box-shadow: 0 2px 0 0 var(--accent);
}


/* ═══════════════════════════════════════════════════════════
   MODAL
   ═══════════════════════════════════════════════════════════ */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100001;
  backdrop-filter: blur(4px);
}

/* Hidden modal overlays: use content-visibility so Chromium can skip
   style computation / layout on the entire subtree (~30 modals × 20+
   children each) during the RGB cycling tick.  Only visible overlays
   get recalculated. */
.modal-overlay[style*="display:none"],
.modal-overlay[style*="display: none"] {
  content-visibility: hidden;
}

.modal {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 28px;
  width: min(90%, 400px);
  max-width: 90vw;
  max-height: 85vh;
  box-shadow: 0 12px 48px rgba(0,0,0,0.5);
  resize: both;
  overflow: auto;
  min-width: 280px;
  min-height: 180px;
  position: relative;
}

/* Auto-injected expand/close button group — absolutely positioned in
   the top-right of every modal so it works regardless of inner header
   structure (back button, wrapper divs, etc). */
.modal-controls {
  position: absolute;
  top: 10px;
  right: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
  z-index: 5;
}

/* Modals containing an .organize-list, .audit-log-list, or other primary
   scroll region need flex layout so the body fills available space when
   the modal is vertically resized. Without this, dragging the bottom-right
   resize handle leaves wasted blank space below the list. */
.modal:has(> .modal-flex-body),
.modal.modal-flex {
  display: flex;
  flex-direction: column;
}
.modal-flex-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
.modal-flex-body > .organize-list,
.modal-flex-body > .audit-log-list,
.modal-flex-body > .modal-grow {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
}

/* Maximized modal fills the viewport */
.modal.modal-maximized {
  width: 96vw !important;
  height: 92vh !important;
  max-width: 96vw !important;
  max-height: 92vh !important;
  border-radius: 8px;
  transition: none;
}

/* Disable resize handle on small modals (confirmation dialogs, etc.) */
.modal[style*="max-width:380px"] { resize: none; }

/* Expand/restore toggle button in modal headers */
.modal-expand-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  font-size: 14px;
  background: none;
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--text-muted);
  border-radius: 6px;
  cursor: pointer;
  margin-left: 8px;
  padding: 0;
  vertical-align: middle;
  transition: all 0.15s ease;
  flex-shrink: 0;
}
.modal-expand-btn:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border-color: rgba(255,255,255,0.2);
}

/* When the expand button is slotted directly inside a settings-style
   header (next to .settings-close-btn) it needs to match the close
   button's box and lose the floating-group margin so the two stay
   aligned across viewport sizes — including narrow mobile widths
   where the absolute .modal-controls wrap was misaligning with the
   close × in the header. */
.modal-expand-btn.modal-expand-btn-inline {
  width: 32px;
  height: 32px;
  margin-left: 0;
  margin-right: 4px;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 16px;
}

.modal h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
  font-family: var(--font-heading);
}

.modal .modal-desc {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 20px;
}

.modal .form-group { margin-bottom: 14px; }

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 20px;
}

/* ═══════════════════════════════════════════════════════════
   SETUP WIZARD
   ═══════════════════════════════════════════════════════════ */

.modal-wizard {
  max-width: 560px;
  padding: 0;
  overflow: hidden;
}

.wizard-header {
  text-align: center;
  padding: 32px 28px 20px;
  border-bottom: 1px solid var(--border-light);
}

.wizard-hex {
  font-size: 2.5rem;
  display: block;
  margin-bottom: 8px;
  filter: drop-shadow(0 0 12px var(--accent-glow, rgba(124,92,252,0.3)));
}

.wizard-header h2 {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.wizard-subtitle {
  font-size: 13px;
  color: var(--text-secondary);
}

.wizard-steps {
  padding: 24px 28px;
  min-height: 280px;
}

.wizard-step-indicators {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 24px;
}

.wizard-indicator {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg-hover, #2c2f4a);
  border: 2px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-secondary);
  transition: all 0.2s ease;
}

.wizard-indicator.active {
  background: var(--accent, #7c5cfc);
  border-color: var(--accent, #7c5cfc);
  color: #fff;
  box-shadow: 0 0 12px var(--accent-glow, rgba(124,92,252,0.4));
}

.wizard-indicator.done {
  background: var(--green, #43b581);
  border-color: var(--green, #43b581);
  color: #fff;
}

.wizard-indicator-line {
  width: 32px;
  height: 2px;
  background: var(--border-light);
  margin: 0 4px;
}

.wizard-step h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.wizard-step > p {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 16px;
  line-height: 1.6;
}

.wizard-checklist {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.wizard-check {
  font-size: 13px;
  color: var(--text-primary);
  padding: 8px 12px;
  background: var(--bg-hover, rgba(255,255,255,0.03));
  border-radius: 8px;
  border: 1px solid var(--border-light);
}

.wizard-info-box {
  background: var(--bg-hover, rgba(255,255,255,0.03));
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 14px;
  margin-bottom: 12px;
}

.wizard-info-box strong {
  display: block;
  font-size: 12px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}

.wizard-input {
  width: 100%;
  padding: 10px 12px;
  background: var(--bg-input, #15172a);
  border: 1px solid var(--border-light);
  border-radius: 6px;
  color: var(--text-primary);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s ease;
}

.wizard-input:focus {
  border-color: var(--accent, #7c5cfc);
  box-shadow: 0 0 0 2px var(--accent-glow, rgba(124,92,252,0.2));
}

.wizard-hint {
  display: block;
  font-size: 12px;
  color: var(--text-dim, #5d6180);
  margin-top: 6px;
  line-height: 1.5;
}

.wizard-code-display {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-input, #15172a);
  border: 1px solid var(--border-light);
  border-radius: 6px;
  margin-top: 8px;
  margin-bottom: 4px;
}

.wizard-code-display span {
  font-size: 12px;
  color: var(--text-secondary);
}

.wizard-code-display code {
  font-size: 16px;
  font-weight: 700;
  color: var(--accent, #7c5cfc);
  letter-spacing: 0.1em;
  flex: 1;
}

.wizard-btn-small {
  background: var(--bg-hover, #2c2f4a);
  border: 1px solid var(--border-light);
  border-radius: 4px;
  color: var(--text-primary);
  font-size: 11px;
  padding: 4px 10px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.wizard-btn-small:hover {
  background: var(--accent, #7c5cfc);
  color: #fff;
}

.wizard-steps-list {
  margin: 8px 0 0 20px;
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.8;
}

.wizard-steps-list code {
  background: var(--bg-input, #15172a);
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 12px;
}

.wizard-footer {
  display: flex;
  align-items: center;
  padding: 16px 28px;
  border-top: 1px solid var(--border-light);
  gap: 8px;
}

.wizard-btn-primary {
  background: var(--accent, #7c5cfc);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 10px 24px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}

.wizard-btn-primary:hover {
  filter: brightness(1.15);
  transform: translateY(-1px);
}

.wizard-btn-secondary {
  background: var(--bg-hover, #2c2f4a);
  color: var(--text-primary);
  border: 1px solid var(--border-light);
  border-radius: 6px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}

.wizard-btn-secondary:hover {
  background: var(--bg-active, #333660);
}

.wizard-btn-text {
  background: none;
  border: none;
  color: var(--text-dim, #5d6180);
  font-size: 13px;
  cursor: pointer;
  padding: 8px 12px;
  transition: color 0.15s ease;
  font-family: inherit;
}

.wizard-btn-text:hover {
  color: var(--text-primary);
}

.wizard-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--border-light);
  border-top-color: var(--accent, #7c5cfc);
  border-radius: 50%;
  animation: wizard-spin 0.7s linear infinite;
  display: inline-block;
  vertical-align: middle;
  margin-right: 8px;
}

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

.wizard-port-success {
  padding: 12px;
  background: rgba(67, 181, 129, 0.1);
  border: 1px solid rgba(67, 181, 129, 0.3);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 13px;
  line-height: 1.6;
}

.wizard-port-fail {
  padding: 12px;
  background: rgba(240, 71, 71, 0.08);
  border: 1px solid rgba(240, 71, 71, 0.25);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 13px;
  line-height: 1.6;
}

.wizard-port-fail ol {
  margin: 8px 0 0 20px;
  line-height: 1.8;
}

.wizard-port-fail code {
  background: var(--bg-input, #15172a);
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 12px;
}


/* ═══════════════════════════════════════════════════════════
   CHAT IMAGES
   ═══════════════════════════════════════════════════════════ */

/* Default: thumbnail mode */
.chat-image {
  max-width: 180px;
  max-height: 180px;
  border-radius: var(--radius);
  margin-top: 4px;
  cursor: pointer;
  transition: opacity 0.15s ease;
  display: block;
  object-fit: cover;
}

.chat-image:hover { opacity: 0.85; }

/* E2E encrypted image loading states */
.e2e-img-pending,
.e2e-img-loading {
  width: 180px;
  height: 120px;
  background: var(--bg-tertiary, rgba(255,255,255,0.05));
  border: 1px dashed var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
}
.e2e-img-loading { animation: e2eImgPulse 1.2s ease-in-out infinite; }
@keyframes e2eImgPulse { 0%,100% { opacity: 0.5; } 50% { opacity: 1; } }
.e2e-img-failed { opacity: 0.4; border-color: var(--danger, #e74c3c); }

/* Full inline mode (Discord-style, toggled via client setting) */
.image-mode-full .chat-image {
  max-width: min(400px, 70%);
  max-height: 300px;
  object-fit: contain;
}

/* Image lightbox overlay */
.image-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
  animation: lightbox-fade-in 0.15s ease;
}
.lightbox-img {
  max-width: 92vw;
  max-height: 92vh;
  border-radius: 6px;
  box-shadow: 0 12px 48px rgba(0,0,0,0.6);
  object-fit: contain;
  cursor: default;
}
@keyframes lightbox-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Lightbox navigation arrows */
.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10001;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, opacity 0.15s ease;
  opacity: 0.7;
}
.lightbox-nav:hover {
  background: rgba(0, 0, 0, 0.75);
  opacity: 1;
}
.lightbox-nav:disabled {
  opacity: 0.2;
  cursor: default;
  pointer-events: none;
}
.lightbox-prev { left: 16px; }
.lightbox-next { right: 16px; }

/* Image context menu (right-click Save/Copy/Open) */
.image-context-menu {
  position: fixed;
  z-index: 10001;
  background: var(--bg-secondary, #23263a);
  border: 1px solid var(--border, rgba(255,255,255,0.12));
  border-radius: 8px;
  padding: 4px 0;
  min-width: 160px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  animation: lightbox-fade-in 0.1s ease;
}
.image-context-menu button {
  display: block;
  width: 100%;
  padding: 8px 14px;
  background: none;
  border: none;
  color: var(--text-primary, #e2e4f0);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s;
}
.image-context-menu button:hover {
  background: var(--bg-hover, rgba(124,92,252,0.15));
}

/* ── User Context Menu (right-click options) ── */
.user-context-menu {
  position: fixed;
  z-index: 10001;
  background: var(--bg-secondary, #23263a);
  border: 1px solid var(--border, rgba(255,255,255,0.12));
  border-radius: 8px;
  padding: 4px 0;
  min-width: 200px;
  overflow: visible;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  animation: lightbox-fade-in 0.1s ease;
}
.user-ctx-header {
  padding: 8px 14px 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
  margin-bottom: 2px;
}
.user-context-menu > button,
.user-ctx-submenu-trigger {
  display: block;
  width: 100%;
  padding: 7px 14px;
  background: none;
  border: none;
  color: var(--text-primary, #e2e4f0);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-context-menu > button:hover,
.user-ctx-submenu-trigger:hover {
  background: var(--bg-hover, rgba(124,92,252,0.15));
}
.user-ctx-arrow {
  float: right;
  opacity: 0.5;
  font-size: 11px;
}

/* Submenu wrapper for invite-to-channel */
.user-ctx-submenu-wrapper {
  position: relative;
}
.user-ctx-submenu {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
  min-width: 180px;
  max-height: 280px;
  overflow-y: auto;
  background: var(--bg-secondary, #23263a);
  border: 1px solid var(--border, rgba(255,255,255,0.12));
  border-radius: 8px;
  padding: 4px 0;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  z-index: 10002;
}
.user-ctx-submenu-wrapper:hover .user-ctx-submenu {
  display: block;
}
.user-ctx-submenu button {
  display: block;
  width: 100%;
  padding: 6px 14px;
  background: none;
  border: none;
  color: var(--text-primary, #e2e4f0);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-ctx-submenu button:hover {
  background: var(--bg-hover, rgba(124,92,252,0.15));
}


/* ═══════════════════════════════════════════════════════════
   UPLOAD BUTTON + DRAG-DROP
   ═══════════════════════════════════════════════════════════ */

/* ── Input actions box (upload | emoji | gif) ── */
.input-actions-box {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px 6px;
  border: 1px solid var(--border, rgba(255,255,255,0.1));
  border-radius: 8px;
  background: var(--bg-tertiary, rgba(255,255,255,0.03));
  flex-shrink: 0;
  position: relative;
  z-index: 1001;
}
.input-actions-divider {
  width: 1px;
  height: 20px;
  background: var(--border, rgba(255,255,255,0.12));
  flex-shrink: 0;
  margin: 0 1px;
}

/* Clippy icon hidden by default, shown only on Win95 */
.upload-icon-clippy { display: none; }
[data-theme="win95"] .upload-icon-default { display: none; }
[data-theme="win95"] .upload-icon-clippy { display: inline; font-size: 18px; }

.btn-upload {
  width: 34px;
  height: 34px;
  background: transparent;
  color: var(--text-muted);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
  flex-shrink: 0;
}

.btn-upload:hover { color: var(--text-primary); background: var(--bg-tertiary); }

.message-area.drag-over {
  outline: 2px dashed var(--accent);
  outline-offset: -4px;
  background: rgba(124, 92, 252, 0.04);
}


.volume-slider {
  width: 100%;
  height: 14px;
  margin-top: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}

.volume-slider::-webkit-slider-runnable-track {
  background: rgba(255,255,255,0.3);
  height: 6px;
  border-radius: 3px;
  border: 1px solid rgba(255,255,255,0.15);
}

.volume-slider::-moz-range-track {
  background: rgba(255,255,255,0.3);
  height: 6px;
  border-radius: 3px;
  border: 1px solid rgba(255,255,255,0.15);
}

.volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  margin-top: -4px;
}

.volume-slider::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  border: none;
}


/* ═══════════════════════════════════════════════════════════
   NOTIFICATION SETTINGS
   ═══════════════════════════════════════════════════════════ */

.notif-settings { display: flex; flex-direction: column; gap: 10px; }

.toggle-row, .volume-row, .select-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-secondary);
  gap: 8px;
}

.toggle-row input[type="checkbox"] {
  accent-color: var(--accent);
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.slider-sm {
  width: 80px;
  height: 14px;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}

.slider-sm::-webkit-slider-runnable-track {
  background: rgba(255,255,255,0.25);
  height: 6px;
  border-radius: 3px;
  border: 1px solid rgba(255,255,255,0.12);
}

.slider-sm::-moz-range-track {
  background: rgba(255,255,255,0.25);
  height: 6px;
  border-radius: 3px;
  border: 1px solid rgba(255,255,255,0.12);
}

.slider-sm::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  margin-top: -4px;
  box-shadow: 0 0 4px var(--accent-glow, rgba(124,92,252,0.3));
}

.slider-sm::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  border: none;
  box-shadow: 0 0 4px var(--accent-glow, rgba(124,92,252,0.3));
}

.select-row select {
  background: var(--bg-input);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 3px 6px;
  font-size: 11px;
  font-family: inherit;
  cursor: pointer;
  outline: none;
}

.select-row select:focus { border-color: var(--accent); }


/* ═══════════════════════════════════════════════════════════
   EMOJI PICKER
   ═══════════════════════════════════════════════════════════ */

.btn-emoji {
  width: 34px;
  height: 34px;
  background: transparent;
  color: var(--text-muted);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
  flex-shrink: 0;
  font-size: 18px;
}

.btn-emoji:hover { color: var(--text-primary); background: var(--bg-tertiary); }

.emoji-picker {
  position: absolute;
  bottom: 100%;
  left: 0;
  margin-bottom: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  width: 340px;
  max-height: 360px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  z-index: 1000;
}

.emoji-search-row {
  padding: 0 2px 6px;
}

.emoji-search-input {
  width: 100%;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 13px;
  outline: none;
}
.emoji-search-input:focus {
  border-color: var(--accent);
}

.emoji-tab-row {
  display: flex;
  gap: 2px;
  padding: 0 2px 6px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}

.emoji-tab {
  flex: 1;
  padding: 4px 0;
  font-size: 16px;
  text-align: center;
  border-radius: var(--radius-sm);
  cursor: pointer;
  background: none;
  border: none;
  opacity: 0.5;
  transition: opacity var(--transition), background var(--transition);
}
.emoji-tab:hover { opacity: 0.8; background: var(--bg-tertiary); }
.emoji-tab.active { opacity: 1; background: var(--bg-tertiary); }

.emoji-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  overflow-y: scroll;
  max-height: 240px;
  padding: 2px;
}

.emoji-item {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  background: none;
  border: none;
  transition: background var(--transition), transform 0.1s ease;
}

.emoji-item:hover {
  background: var(--bg-tertiary);
  transform: scale(1.2);
}

/* Custom emoji (inline in messages + pickers) */
.custom-emoji {
  width: 1.4em;
  height: 1.4em;
  vertical-align: middle;
  object-fit: contain;
  display: inline;
  margin: 0 1px;
}
/* Jumbo rendering when a message contains only emoji */
.emoji-only-msg {
  font-size: 2em;
  line-height: 1.25;
  /* custom-emoji uses em units so it scales automatically */
}
.reaction-custom-emoji {
  width: 1em;
  height: 1em;
}
.emoji-item .custom-emoji {
  width: 24px;
  height: 24px;
}
.reaction-full-btn .custom-emoji {
  width: 22px;
  height: 22px;
}
.custom-emoji-preview {
  border-radius: 4px;
}


/* ═══════════════════════════════════════════════════════════
   GIF PICKER
   ═══════════════════════════════════════════════════════════ */

.btn-gif {
  width: 34px;
  height: 24px;
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--text-muted);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  align-self: center;
}

.btn-gif:hover {
  color: var(--text-primary);
  border-color: var(--text-primary);
  background: var(--bg-tertiary);
}

.gif-picker {
  position: absolute;
  bottom: 100%;
  left: 88px;
  margin-bottom: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  width: 340px;
  max-height: 420px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  z-index: 1000;
  overflow: hidden;
}

.gif-picker-header {
  padding: 10px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.gif-picker-header input {
  width: 100%;
  padding: 8px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 13px;
  outline: none;
}

.gif-picker-header input:focus {
  border-color: var(--accent);
}

.gif-picker-grid {
  flex: 1;
  overflow-y: auto;
  padding: 6px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  min-height: 200px;
}

.gif-picker-grid img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: transform 0.1s ease, opacity 0.2s;
  display: block;
}

.gif-picker-grid img:hover {
  transform: scale(1.03);
  opacity: 0.85;
}

.gif-picker-footer {
  padding: 4px 10px;
  font-size: 10px;
  color: var(--text-muted);
  text-align: right;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

.gif-picker-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 40px 10px;
  color: var(--text-muted);
  font-size: 13px;
}

/* /gif slash command inline picker */
.gif-slash-picker {
  background: var(--bg-secondary); border: 1px solid var(--border);
  border-radius: 8px; margin: 0 8px 4px; max-height: 240px;
  overflow-y: auto; box-shadow: 0 -4px 12px rgba(0,0,0,0.3);
}
.gif-slash-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 10px; font-size: 12px; color: var(--text-muted);
  border-bottom: 1px solid var(--border); position: sticky; top: 0;
  background: var(--bg-secondary); z-index: 1;
}
.gif-slash-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 4px; padding: 6px;
}
.gif-slash-grid img {
  width: 100%; height: 80px; object-fit: cover;
  border-radius: 4px; cursor: pointer; transition: transform 0.1s;
}
.gif-slash-grid img:hover { transform: scale(1.05); }
.gif-slash-loading {
  padding: 20px; text-align: center; color: var(--text-muted); font-size: 13px;
}

/* GIF setup guide (shown when GIPHY key not configured) */
.gif-setup-guide {
  grid-column: 1 / -1;
  padding: 16px 20px;
  text-align: left;
  color: var(--text-primary);
  font-size: 13px;
  line-height: 1.5;
}
.gif-setup-guide h3 {
  margin: 0 0 8px;
  font-size: 15px;
}
.gif-setup-guide ol {
  margin: 8px 0;
  padding-left: 20px;
}
.gif-setup-guide li {
  margin-bottom: 4px;
}
.gif-setup-guide a {
  color: var(--accent);
}
.gif-setup-input-row {
  display: flex;
  gap: 8px;
  margin: 10px 0;
}
.gif-setup-input-row input {
  flex: 1;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 13px;
  font-family: monospace;
}
.gif-setup-input-row button {
  padding: 6px 16px;
  border: none;
  border-radius: 4px;
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  cursor: pointer;
}
.gif-setup-input-row button:hover {
  opacity: 0.9;
}
.gif-setup-note {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--text-muted);
}


/* ═══════════════════════════════════════════════════════════
   MESSAGE REACTIONS
   ═══════════════════════════════════════════════════════════ */

.reactions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.reaction-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: var(--bg-tertiary);
  border: 1px solid transparent;
  border-radius: 12px;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition);
}

/* Emoji Reaction Size tiers */
[data-emojisize="small"]   .reaction-badge { font-size: 11px; padding: 1px 6px; }
[data-emojisize="large"]   .reaction-badge { font-size: 18px; padding: 3px 10px; }
[data-emojisize="x-large"] .reaction-badge { font-size: 22px; padding: 4px 12px; }

.reaction-badge:hover {
  background: rgba(124, 92, 252, 0.15);
  border-color: var(--accent);
}

.reaction-badge.own {
  background: rgba(124, 92, 252, 0.2);
  border-color: var(--accent);
  color: var(--text-primary);
}

/* ── Reaction popout (who reacted) ────────────────────── */
.reaction-popout {
  position: fixed;
  z-index: 9999;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  min-width: 140px;
  max-width: 240px;
  max-height: 240px;
  overflow-y: auto;
  animation: popout-in 0.12s ease-out;
}
@keyframes popout-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.reaction-popout-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px 4px;
  font-size: 16px;
  border-bottom: 1px solid var(--border-light);
}
.reaction-popout-count {
  font-size: 12px;
  color: var(--text-muted);
}
.reaction-popout-list {
  padding: 4px 0;
}
.reaction-popout-user {
  padding: 4px 12px;
  font-size: 13px;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.reaction-popout-user:hover {
  background: var(--bg-tertiary);
}

.reaction-picker {
  position: absolute;
  top: -44px;
  right: 8px;
  display: flex;
  gap: 2px;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 4px 6px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.35);
  z-index: 100;
}

.reaction-pick-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  background: none;
  border: none;
  transition: background 0.15s, transform 0.1s;
}

.reaction-pick-btn:hover {
  background: var(--bg-tertiary);
  transform: scale(1.15);
}

.reaction-more-btn {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 1px;
}

.reaction-pick-sep {
  color: var(--text-muted);
  font-size: 16px;
  opacity: 0.4;
  user-select: none;
  display: flex;
  align-items: center;
  padding: 0 1px;
}

.reaction-gear-btn {
  font-size: 14px;
  color: var(--text-muted);
  opacity: 0.6;
  transition: opacity 0.15s;
}
.reaction-gear-btn:hover {
  opacity: 1;
}

.quick-emoji-slots {
  display: flex;
  gap: 4px;
  padding: 4px 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.quick-emoji-slot {
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
}
.quick-emoji-slot.active {
  border-color: var(--accent);
  background: var(--accent-glow);
}

/* ── Full Reaction Emoji Picker (opened via "...") ── */
.reaction-full-picker {
  position: absolute;
  bottom: calc(100% + 6px);
  right: 0;
  width: 320px;
  max-height: 340px;
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.45);
  z-index: 101;
  margin-bottom: 4px;
  overflow: hidden;
}

.reaction-full-search {
  padding: 8px 10px 4px;
  flex-shrink: 0;
}

.reaction-full-search-input {
  width: 100%;
  padding: 6px 10px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 13px;
  outline: none;
}
.reaction-full-search-input:focus {
  border-color: var(--accent);
}

.reaction-full-grid {
  flex: 1;
  overflow-y: auto;
  padding: 4px 10px 8px;
}

.reaction-full-category {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 6px 0 2px;
}

.reaction-full-row {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}

.reaction-full-btn {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  background: none;
  border: none;
  transition: background 0.12s, transform 0.1s;
}

.reaction-full-btn:hover {
  background: var(--bg-tertiary);
  transform: scale(1.15);
}


/* ═══════════════════════════════════════════════════════════
   MESSAGE HOVER TOOLBAR
   ═══════════════════════════════════════════════════════════ */

.message, .message-compact { position: relative; }



.msg-toolbar {
  position: absolute;
  top: 2px;
  right: 8px;
  display: none;
  gap: 2px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 2px 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  z-index: 10;
}
.msg-toolbar-group {
  display: flex;
  gap: 2px;
}
.msg-toolbar-more,
.thread-msg-more {
  position: relative;
  display: flex;
}
.msg-toolbar-overflow,
.thread-msg-overflow {
  position: absolute;
  top: auto;
  bottom: 100%;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 36px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
  z-index: 12;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  pointer-events: none;
  transition: opacity 120ms ease, transform 120ms ease, visibility 0s linear 180ms;
}
.msg-toolbar-overflow.flip-below,
.thread-msg-overflow.flip-below {
  bottom: auto;
  top: 100%;
}
.msg-toolbar-more:hover .msg-toolbar-overflow,
.msg-toolbar-more:focus-within .msg-toolbar-overflow,
.thread-msg-more:hover .thread-msg-overflow,
.thread-msg-more:focus-within .thread-msg-overflow {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition-delay: 0s;
}

/* Only show toolbar on real mouse hover — not on touch-triggered :hover.
   Require BOTH hover:hover AND pointer:fine so mobile browsers that
   falsely report hover:hover (common on Android Chrome/Brave) don't
   show the toolbar on tap. */
@media (hover: hover) and (pointer: fine) {
  .message:hover .msg-toolbar,
  .message-compact:hover .msg-toolbar { display: flex; }
}

/* Hide toolbar while in edit mode */
.message.editing .msg-toolbar,
.message-compact.editing .msg-toolbar { display: none !important; }

.msg-toolbar button {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  cursor: pointer;
  background: none;
  border: none;
  color: var(--text-muted);
  transition: background var(--transition);
}

.msg-toolbar button:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.msg-toolbar button svg,
.thread-msg-toolbar button svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
}
.tb-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.tb-icon-emoji {
  font-size: 14px;
}
.tb-icon-mono {
  display: inline-flex;
}
:root[data-toolbaricons="emoji"] .tb-icon-emoji,
html[data-toolbaricons="emoji"] .tb-icon-emoji,
:root[data-toolbaricons="color"] .tb-icon-emoji,
html[data-toolbaricons="color"] .tb-icon-emoji {
  display: inline-flex;
}
:root[data-toolbaricons="emoji"] .tb-icon-mono,
html[data-toolbaricons="emoji"] .tb-icon-mono,
:root[data-toolbaricons="color"] .tb-icon-mono,
html[data-toolbaricons="color"] .tb-icon-mono {
  display: none;
}
:root:not([data-toolbaricons="emoji"]):not([data-toolbaricons="color"]) .tb-icon-emoji,
html:not([data-toolbaricons="emoji"]):not([data-toolbaricons="color"]) .tb-icon-emoji {
  display: none;
}
:root:not([data-toolbaricons="emoji"]):not([data-toolbaricons="color"]) .tb-icon-mono,
html:not([data-toolbaricons="emoji"]):not([data-toolbaricons="color"]) .tb-icon-mono {
  display: inline-flex;
}

/* First message: flip toolbar below so it's not clipped by the scroll
   container's top edge (hidden behind the channel-topic bar). */
.messages > :first-child .msg-toolbar {
  top: auto;
  bottom: 2px;
}
.messages > :first-child .reaction-picker,
.reaction-picker.flip-below {
  top: auto;
  bottom: -44px;
}
.messages > :first-child .reaction-full-picker,
.reaction-full-picker.flip-below {
  bottom: auto;
  top: calc(100% + 6px);
  margin-bottom: 0;
  margin-top: 0;
}


.toolbar-slots-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
  font-size: 12px;
}

.toolbar-slots-row input[type="range"] {
  flex: 1 1 180px;
  min-width: 0;
}

.toolbar-slots-value {
  min-width: 14px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.toolbar-order-wrap {
  margin-top: 8px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-primary);
}

.toolbar-order-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 600;
}

.toolbar-order-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.toolbar-order-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-tertiary);
}

.toolbar-order-item-label {
  font-size: 12px;
  color: var(--text-primary);
}

.toolbar-order-item-controls {
  display: flex;
  gap: 4px;
}

.toolbar-order-move {
  min-width: 26px;
  height: 24px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  cursor: pointer;
}

.toolbar-order-move:disabled {
  opacity: 0.45;
  cursor: default;
}

/* ═══════════════════════════════════════════════════════════
   REPLY BANNER (on messages + input area)
   ═══════════════════════════════════════════════════════════ */

.reply-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  font-size: 0.8em;
  color: var(--text-muted);
  cursor: pointer;
  overflow: hidden;
  background: var(--bg-tertiary);
  border-radius: 6px;
  margin-bottom: 4px;
  max-width: fit-content;
}

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

.reply-line {
  width: 3px;
  height: 16px;
  border-radius: 2px;
  flex-shrink: 0;
}

.reply-author { font-weight: 600; flex-shrink: 0; }

.reply-preview {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Reply bar above input */
.reply-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 20px;
  background: var(--bg-tertiary);
  border-top: 2px solid var(--accent);
  font-size: 13px;
  color: var(--text-secondary);
}

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

.reply-bar-close {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 16px;
  flex-shrink: 0;
  transition: all var(--transition);
}

.reply-bar-close:hover { color: var(--text-primary); background: var(--bg-secondary); }

/* ═══════════════════════════════════════════════════════════
   THREAD PREVIEW (under messages)
   ═══════════════════════════════════════════════════════════ */
.thread-preview {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 4px 10px;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 12px;
  color: var(--accent);
  font-weight: 600;
  transition: background 0.15s;
}
.thread-preview:hover {
  background: var(--bg-tertiary);
}
.thread-participant-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.thread-participant-avatar + .thread-participant-avatar {
  margin-left: -6px;
}
.thread-participant-initial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
}
.thread-preview-count {
  margin-left: 4px;
}
.thread-preview-time {
  color: var(--text-muted);
  font-weight: 400;
  margin-left: 4px;
}
.thread-preview-arrow {
  font-size: 16px;
  opacity: 0;
  transition: opacity 0.15s;
}
.thread-preview:hover .thread-preview-arrow { opacity: 1; }

/* ═══════════════════════════════════════════════════════════
   THREAD PANEL (right side)
   ═══════════════════════════════════════════════════════════ */
.thread-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: var(--thread-footer-offset, 0px);
  width: 380px;
  min-width: 300px;
  max-width: min(78vw, 920px);
  max-width: 100vw;
  background: var(--bg-primary);
  border-left: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
  /* Must sit above .input-actions-box (z:1001) so the docked thread panel
     isn't covered by the channel's message input action buttons. (#5289) */
  z-index: 1010;
  box-shadow: -4px 0 24px rgba(0,0,0,0.25);
  animation: thread-slide-in 0.2s ease-out;
}
.thread-panel-resizer {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 8px;
  cursor: ew-resize;
  z-index: 2;
}
.thread-panel.pip {
  top: auto;
  right: 14px;
  bottom: calc(var(--thread-footer-offset, 0px) + 14px);
  width: min(420px, calc(100vw - 28px));
  height: min(58vh, 520px);
  max-height: calc(100vh - var(--thread-footer-offset, 0px) - 28px);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  resize: both;
  overflow: hidden;
  z-index: 10020;
}
.thread-panel.pip .thread-panel-resizer {
  display: none;
}
@keyframes thread-slide-in {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}
.thread-panel-header {
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--border-light);
  flex-shrink: 0;
}
.thread-panel-header-top {
  display: flex;
  align-items: center;
  gap: 8px;
}
.thread-panel.pip .thread-panel-header-top {
  cursor: move;
}
.thread-panel-icon { font-size: 18px; }
.thread-panel-title {
  flex: 1;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}
.thread-parent-meta {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.thread-parent-avatar-wrap {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.thread-parent-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
}
.thread-parent-avatar.thread-parent-avatar-square {
  border-radius: 6px;
}
.thread-parent-avatar-initial {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
}
.thread-parent-avatar-initial.thread-parent-avatar-square {
  border-radius: 6px;
}
.thread-parent-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.thread-parent-preview {
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.thread-messages {
  flex: 1;
  overflow-y: auto;
  padding: 12px 14px;
}
.thread-message {
  margin-bottom: 10px;
  position: relative;
  border-radius: var(--radius-sm);
  transition: background var(--transition), box-shadow var(--transition);
}
.thread-message:hover {
  background: rgba(255,255,255,0.02);
  box-shadow: var(--msg-glow);
}
.thread-message.thread-highlight {
  background: rgba(255,255,255,0.035);
  box-shadow: var(--msg-glow);
}
.thread-msg-row {
  display: flex;
  gap: 10px;
  padding: 4px 8px;
}
.thread-msg-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
}
.thread-msg-avatar-initial {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
}
.thread-msg-body { flex: 1; min-width: 0; }
.thread-msg-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}
.thread-msg-header-spacer { flex: 1; }
.thread-msg-toolbar {
  position: absolute;
  top: 2px;
  right: 8px;
  display: none;
  gap: 2px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 2px 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  z-index: 10;
}
/* Only show toolbar on real mouse hover so it doesn't appear on touch
   taps and doesn't reflow the message header (matches main message
   toolbar behavior). */
@media (hover: hover) and (pointer: fine) {
  .thread-message:hover .thread-msg-toolbar,
  .thread-message.showing-picker .thread-msg-toolbar {
    display: inline-flex;
  }
}
.thread-message.showing-picker .thread-msg-toolbar {
  display: inline-flex;
}
.thread-message.editing .thread-msg-toolbar {
  display: none !important;
}
.thread-msg-toolbar button {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  background: none;
  border: none;
  color: var(--text-muted);
}
.thread-msg-toolbar button:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}
.thread-action-react-icon {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
}
.thread-msg-author {
  font-size: 13px;
  font-weight: 600;
}
.thread-msg-time {
  font-size: 11px;
  color: var(--text-muted);
}
.thread-msg-content {
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.4;
  word-wrap: break-word;
}
.thread-msg-actions {
  margin-left: auto;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}
.thread-message:hover .thread-msg-actions,
.thread-message.showing-picker .thread-msg-actions {
  opacity: 1;
  pointer-events: auto;
}
.thread-react-btn {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--text-muted);
  border-radius: 6px;
  padding: 0;
  cursor: pointer;
}
.thread-react-btn:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}
.thread-react-btn svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
}
.thread-input-area {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid var(--border-light);
  flex-shrink: 0;
  /* Anchor for autocomplete dropdowns positioned with bottom: 100% (#5296) */
  position: relative;
}
.thread-reply-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 12px;
  border-top: 1px solid var(--border-light);
  background: var(--bg-secondary);
  font-size: 12px;
  color: var(--text-muted);
}
#thread-reply-preview-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
[data-desktop-app] {
  --thread-footer-offset: 35px;
}
[data-desktop-app][data-hide-statusbar] {
  --thread-footer-offset: 0px;
}
.thread-input {
  flex: 1;
  resize: none;
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  background: var(--bg-secondary);
  color: var(--text-primary);
  padding: 8px 12px;
  font-size: 13px;
  font-family: inherit;
  max-height: 120px;
  overflow-y: auto;
}
.thread-input:focus { outline: none; border-color: var(--accent); }
.thread-send-btn {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s;
}
.thread-send-btn:hover { filter: brightness(1.15); }

/* ═══════════════════════════════════════════════════════════
   IMAGE QUEUE BAR (paste/drop preview before sending)
   ═══════════════════════════════════════════════════════════ */

.image-queue-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--bg-tertiary);
  border-top: 1px solid var(--border);
  overflow-x: auto;
  flex-wrap: nowrap;
}

/* ── Upload progress bar ────────────────────────────── */
.upload-progress-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  background: var(--bg-tertiary);
  border-top: 1px solid var(--border);
}
.upload-progress-track {
  flex: 1;
  height: 6px;
  background: var(--bg-secondary);
  border-radius: 3px;
  overflow: hidden;
}
.upload-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--accent);
  border-radius: 3px;
  transition: width 0.15s ease;
}
.upload-progress-text {
  font-size: 0.75rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.image-queue-thumb {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 6px;
  overflow: hidden;
  border: 2px solid var(--border);
  flex-shrink: 0;
  background: var(--bg-secondary);
  transition: border-color 0.15s;
}

.image-queue-thumb:hover {
  border-color: var(--accent);
}

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

.image-queue-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 18px;
  height: 18px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  border: none;
  border-radius: 50%;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s;
}

.image-queue-thumb:hover .image-queue-remove {
  opacity: 1;
}

.image-queue-remove:hover {
  background: var(--danger);
}

.image-queue-clear-all {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 11px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.15s;
}

.image-queue-clear-all:hover {
  color: var(--danger);
  border-color: var(--danger);
}


/* ═══════════════════════════════════════════════════════════
   @MENTION STYLES
   ═══════════════════════════════════════════════════════════ */

.mention {
  background: rgba(124, 92, 252, 0.15);
  color: var(--accent);
  padding: 0 3px;
  border-radius: 4px;
  font-weight: 600;
  cursor: default;
}

.mention.mention-self {
  background: rgba(124, 92, 252, 0.3);
}

.mention.mention-everyone {
  background: rgba(255, 170, 60, 0.18);
  color: #ffb84d;
}

.channel-link {
  background: rgba(124, 92, 252, 0.12);
  color: var(--accent);
  padding: 0 4px;
  border-radius: 4px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s;
}

.channel-link:hover {
  background: rgba(124, 92, 252, 0.24);
  text-decoration: underline;
}

/* Pinned-message indicator dot on the 📌 toggle button when the active
   channel has at least one pinned message. */
#pinned-toggle-btn { position: relative; }
#pinned-toggle-btn.has-pins::after {
  content: '';
  position: absolute;
  top: 4px;
  right: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent, #7c5cfc);
  box-shadow: 0 0 0 2px var(--bg-secondary, #1c1c20);
  pointer-events: none;
}

/* @mention autocomplete dropdown */
.mention-dropdown {
  position: absolute;
  bottom: 100%;
  left: 48px;
  margin-bottom: 4px;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  overflow: hidden;
  min-width: 180px;
  max-width: 260px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  z-index: 1001;
}

.mention-item {
  padding: 8px 14px;
  font-size: 13px;
  color: var(--text-primary);
  cursor: pointer;
  transition: background var(--transition);
}

.mention-item:hover, .mention-item.active {
  background: var(--accent);
  color: white;
}

.mention-item-handle {
  margin-left: 6px;
  opacity: 0.65;
  font-size: 0.85em;
}

/* :emoji autocomplete dropdown */
.emoji-dropdown {
  position: absolute;
  bottom: 100%;
  left: 0;
  margin-bottom: 4px;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  overflow-y: auto;
  max-height: 320px;
  min-width: 260px;
  max-width: 380px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  z-index: 1000;
  padding: 4px 0;
}
.emoji-ac-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px;
  cursor: pointer;
  transition: background var(--transition);
}
.emoji-ac-item:hover, .emoji-ac-item.active {
  background: var(--accent);
  color: white;
}
.emoji-ac-preview {
  flex-shrink: 0;
  width: 22px;
  text-align: center;
}
.emoji-ac-preview-char {
  font-size: 1.25rem;
}
.emoji-ac-name {
  font-size: 0.92rem;
  opacity: 0.85;
}

/* /slash command autocomplete dropdown */
.slash-dropdown {
  position: absolute;
  bottom: 100%;
  left: 48px;
  margin-bottom: 4px;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  overflow-y: auto;
  max-height: 320px;
  min-width: 280px;
  max-width: 400px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  z-index: 1002;
}

.slash-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 14px;
  font-size: 13px;
  color: var(--text-primary);
  cursor: pointer;
  transition: background var(--transition);
  border-bottom: 1px solid var(--border-light);
}

.slash-item:last-child { border-bottom: none; }

.slash-item:hover, .slash-item.active {
  background: var(--accent);
  color: white;
}

.slash-cmd {
  font-weight: 700;
  color: var(--accent);
  min-width: 82px;
  flex-shrink: 0;
}

.slash-item:hover .slash-cmd,
.slash-item.active .slash-cmd {
  color: white;
}

.slash-args {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
  flex-shrink: 0;
}

.slash-item:hover .slash-args,
.slash-item.active .slash-args {
  color: rgba(255,255,255,0.7);
}

.slash-desc {
  font-size: 11px;
  color: var(--text-muted);
  margin-left: auto;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.slash-item:hover .slash-desc,
.slash-item.active .slash-desc {
  color: rgba(255,255,255,0.7);
}


/* ═══════════════════════════════════════════════════════════
   SEARCH
   ═══════════════════════════════════════════════════════════ */

.search-container {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
  border-radius: 6px;
  padding: 2px 6px;
  margin-right: 8px;
}

.search-input {
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-size: 13px;
  width: 260px;
  outline: none;
  padding: 4px 2px;
}

.search-input::placeholder {
  color: var(--text-muted);
  font-size: 11px;
}

.search-filter-tags {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.search-filter-tag {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 600;
}

.search-results-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: 340px;
  max-height: 100%;
  background: var(--bg-card);
  border-left: 1px solid var(--border-light);
  z-index: 100;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: -4px 0 12px rgba(0,0,0,0.2);
}

.search-results-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-light);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  gap: 8px;
}

.search-results-list {
  overflow-y: auto;
  flex: 1;
}

.search-result-item {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-light);
  cursor: pointer;
  transition: background var(--transition);
}

.search-result-item:hover {
  background: var(--bg-hover);
}

.search-result-author {
  font-weight: 600;
  font-size: 12px;
  margin-right: 6px;
}

.search-result-time {
  font-size: 10px;
  color: var(--text-muted);
}

.search-result-content {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 4px;
  word-break: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.search-result-content mark {
  background: rgba(250, 166, 26, 0.35);
  color: inherit;
  padding: 0 2px;
  border-radius: 2px;
}

/* Highlight flash on message when clicking search result */
@keyframes highlightFlash {
  0%, 100% { background: transparent; }
  30% { background: rgba(250, 166, 26, 0.25); }
}

.highlight-flash {
  animation: highlightFlash 2s ease;
}

/* ── NEW MESSAGES divider ── */
.new-messages-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 16px;
  user-select: none;
  pointer-events: none;
}
.new-messages-divider::before,
.new-messages-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--accent, #5865f2);
  opacity: 0.6;
}
.new-messages-divider span {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--accent, #5865f2);
  white-space: nowrap;
}


/* ═══════════════════════════════════════════════════════════
   EDITED MESSAGE TAG
   ═══════════════════════════════════════════════════════════ */

.edited-tag {
  font-size: 10px;
  color: var(--text-muted);
  margin-left: 6px;
  font-style: italic;
  cursor: default;
  user-select: none;
}

.e2e-tag {
  font-size: 10px;
  opacity: 0.4;
  cursor: default;
  user-select: none;
  flex-shrink: 0;
}
/* In the header row (full messages), push the lock to the far right */
.message-header .e2e-tag {
  margin-left: auto;
}
/* In compact messages, position lock absolutely on the far right */
.message-compact > .e2e-tag {
  position: absolute;
  right: 8px;
  top: 2px;
}
.message-header-spacer {
  flex: 1 1 0;
  min-width: 0;
}

/* ── E2E Password Recovery Banner ─── */
#e2e-recovery-banner {
  background: var(--bg-tertiary);
  border-bottom: 2px solid var(--accent);
  padding: 8px 16px;
  z-index: 50;
  flex-shrink: 0;
}
.e2e-recovery-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text-secondary);
  flex-wrap: wrap;
}
#e2e-recovery-pw {
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 13px;
  width: 180px;
}
#e2e-recovery-dismiss {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 14px;
  padding: 2px 6px;
}
#e2e-recovery-dismiss:hover { color: var(--text-primary); }

/* ── E2E Key Reset Confirmation Modal ─── */
.e2e-reset-modal {
  max-width: 460px;
  text-align: center;
}
.e2e-reset-modal h3 {
  color: var(--danger, #f44);
  margin-bottom: 12px;
}
.e2e-reset-warning {
  background: rgba(255, 68, 68, 0.08);
  border: 1px solid rgba(255, 68, 68, 0.25);
  border-radius: var(--radius-md);
  padding: 16px;
  margin: 12px 0;
  font-size: 13px;
  color: var(--text-secondary);
  text-align: left;
  line-height: 1.6;
}
.e2e-reset-warning strong {
  color: var(--danger, #f44);
}
.e2e-reset-warning ul {
  margin: 8px 0 0 16px;
  padding: 0;
}
.e2e-reset-warning ul li {
  margin-bottom: 4px;
}
.e2e-confirm-type {
  margin: 16px 0 12px;
}
.e2e-confirm-type input {
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 13px;
  width: 100%;
  max-width: 260px;
  text-align: center;
}
.e2e-reset-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 16px;
}
.btn-danger {
  background: var(--danger, #f44);
  color: #fff;
  border: none;
  padding: 6px 18px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13px;
  transition: opacity 0.15s;
}
.btn-danger:hover {
  filter: brightness(1.15);
}
/* E2E reset button: starts disabled until user types RESET */
#e2e-reset-confirm-btn {
  opacity: 0.4;
  pointer-events: none;
}
#e2e-reset-confirm-btn.enabled {
  opacity: 1;
  pointer-events: auto;
}
#e2e-reset-confirm-btn.enabled:hover {
  filter: brightness(1.15);
}

/* ── E2E Lock Menu Dropdown ─── */
.e2e-menu-wrapper {
  position: relative;
}
.e2e-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 1000;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  min-width: 210px;
  padding: 6px 0;
  margin-top: 4px;
}
.e2e-dropdown-item {
  display: block;
  width: 100%;
  padding: 8px 14px;
  border: none;
  background: none;
  color: var(--text-primary);
  font-size: 13px;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s;
}
.e2e-dropdown-item:hover {
  background: rgba(255,255,255,0.06);
}
.e2e-dropdown-item.e2e-danger {
  color: var(--danger, #f44);
}
.e2e-dropdown-item.e2e-danger:hover {
  background: rgba(255, 68, 68, 0.10);
}

/* ── E2E Password Prompt Modal ─── */
.e2e-password-modal {
  max-width: 380px;
  text-align: center;
}
.e2e-password-modal h3 {
  margin-bottom: 8px;
}
.e2e-pw-desc {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 16px;
  line-height: 1.5;
}
.e2e-pw-field {
  margin-bottom: 12px;
}
.e2e-pw-field input {
  width: 100%;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 14px;
  text-align: center;
  letter-spacing: 2px;
}
.e2e-pw-field input:focus {
  border-color: var(--accent);
  outline: none;
}
.e2e-pw-error {
  color: var(--danger, #f44);
  font-size: 12px;
  margin-bottom: 10px;
  padding: 6px 10px;
  background: rgba(255, 68, 68, 0.08);
  border-radius: var(--radius-sm);
}
.e2e-pw-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 8px;
}
.e2e-pw-actions .btn-accent:disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* ── E2E key-change system notice ─── */
.system-message.e2e-notice {
  color: var(--text-muted);
  font-style: italic;
  font-size: 12px;
  padding: 4px 16px;
  opacity: 0.7;
  text-align: center;
}


/* ═══════════════════════════════════════════════════════════
   INLINE EDIT TEXTAREA
   ═══════════════════════════════════════════════════════════ */

.edit-textarea {
  width: 100%;
  padding: 6px 10px;
  background: var(--bg-input);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 14px;
  font-family: inherit;
  resize: none;
  max-height: 120px;
  line-height: 1.4;
  outline: none;
}

.edit-actions {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}

.edit-save-btn, .edit-cancel-btn {
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all var(--transition);
}

.edit-save-btn {
  background: var(--accent);
  color: white;
}

.edit-save-btn:hover { background: var(--accent-hover); }

.edit-cancel-btn {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
}

.edit-cancel-btn:hover { background: var(--bg-hover); color: var(--text-primary); }

.edit-emoji-btn {
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  cursor: pointer;
  border: none;
  background: var(--bg-tertiary);
  transition: all var(--transition);
  line-height: 1;
}
.edit-emoji-btn:hover { background: var(--bg-hover); }


/* ═══════════════════════════════════════════════════════════
   SPOILER TEXT
   ═══════════════════════════════════════════════════════════ */

.spoiler {
  background: var(--text-muted);
  color: transparent;
  border-radius: 3px;
  padding: 0 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

.spoiler.revealed {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  user-select: auto;
}


/* ═══════════════════════════════════════════════════════════
   /me ACTION TEXT
   ═══════════════════════════════════════════════════════════ */

.action-text {
  color: var(--text-secondary);
  font-style: italic;
}


/* ═══════════════════════════════════════════════════════════
   MARKDOWN / INLINE CODE
   ═══════════════════════════════════════════════════════════ */

.inline-code {
  background: var(--bg-tertiary);
  color: var(--accent);
  padding: 1px 5px;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 0.9em;
}


/* ═══════════════════════════════════════════════════════════
   ADMIN PANEL / MODERATION
   ═══════════════════════════════════════════════════════════ */

.admin-settings {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Admin save bar — fixed at bottom of settings modal */
.admin-save-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 24px 16px;
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  z-index: 10;
  flex-shrink: 0;
}
.btn-admin-save {
  width: 100%;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 700;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  letter-spacing: 0.3px;
  transition: background 0.15s, transform 0.1s;
  background: var(--accent);
  color: white;
}
.btn-admin-save:hover { filter: brightness(1.15); }
.btn-admin-save:active { transform: scale(0.97); }

.btn-full {
  width: 100%;
  text-align: center;
}

.btn-danger-fill {
  background: var(--danger) !important;
  color: white !important;
}

.btn-danger-fill:hover {
  background: #d93636 !important;
}

.notif-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}

.user-admin-actions {
  display: none;
  gap: 2px;
  margin-left: auto;
  flex-shrink: 0;
}

.user-item:hover .user-admin-actions {
  display: flex;
}

.user-action-btn {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  background: none;
  border: none;
  transition: background var(--transition);
  padding: 0;
}

.user-action-btn:hover {
  background: var(--bg-tertiary);
}

/* ── User gear dropdown menu ─────────────── */
.user-gear-menu {
  position: fixed;
  z-index: 10002;
  min-width: 160px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 6px 24px rgba(0,0,0,0.5);
  padding: 4px;
  display: flex;
  flex-direction: column;
  animation: gear-menu-in 0.12s ease-out;
}
@keyframes gear-menu-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.gear-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  font-size: 13px;
  color: var(--text-secondary);
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.1s, color 0.1s;
  width: 100%;
  text-align: left;
}
.gear-menu-item:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.gear-menu-danger { color: var(--danger); }
.gear-menu-danger:hover { background: rgba(233,69,96,0.12); color: var(--danger); }
.gear-menu-divider { height: 1px; background: var(--border); margin: 4px 2px; }

/* ── Context menu scroll fallback (#5286) ──
   Floating menus (right-click, gear, channel, image, etc.) get capped to the
   viewport with overflow-y: auto so long menus scroll instead of clipping
   or running off-screen. The 16px margin keeps a little breathing room.
   .user-context-menu is omitted because its hover submenu would get clipped
   by overflow:auto; it stays short on its own. */
.user-gear-menu,
.channel-ctx-menu,
.image-context-menu,
.channel-functions-panel {
  max-height: calc(100vh - 16px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* ── Transfer Admin Modal ────────────────── */
.transfer-admin-modal {
  max-width: 420px;
  width: 90vw;
}
.transfer-admin-warning {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  background: rgba(233,69,96,0.08);
  border: 1px solid rgba(233,69,96,0.2);
  border-radius: var(--radius);
  margin-bottom: 16px;
}
.transfer-admin-warning-icon {
  font-size: 24px;
  flex-shrink: 0;
  line-height: 1;
}
.transfer-admin-warning-text {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
}
.transfer-admin-warning-text strong {
  color: var(--text-primary);
}
.transfer-admin-note {
  font-size: 12px;
  color: var(--danger);
  font-weight: 600;
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.transfer-admin-error {
  color: var(--danger);
  font-size: 12px;
  display: none;
  margin-top: 8px;
  padding: 6px 10px;
  background: rgba(233,69,96,0.08);
  border-radius: var(--radius-sm);
}

.user-item.offline { opacity: 0.5; }
.user-dot.away { background: var(--text-muted); border-radius: 2px 2px 50% 50%; }


/* ═══════════════════════════════════════════════════════════
   BANS MODAL
   ═══════════════════════════════════════════════════════════ */

.modal-wide { max-width: 720px; width: 95vw; }

/* ═══════════════════════════════════════════════════════════
   SETTINGS POPOUT MODAL
   ═══════════════════════════════════════════════════════════ */

.settings-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 24px 12px;
  position: sticky;
  top: 0;
  background: var(--bg-card);
  z-index: 10;
  border-bottom: 1px solid var(--border);
}

.settings-tab-bar {
  display: flex;
  gap: 4px;
  margin-left: auto;
  margin-right: 8px;
}
.settings-tab {
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.settings-tab:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}
.settings-tab.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.settings-close-btn { margin-left: 0; }

.settings-header h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  font-family: var(--font-heading);
  margin: 0;
}

.settings-close-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  background: none;
  border: none;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s ease;
}
.settings-close-btn:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

/* ── Settings Layout (Nav + Body) ─────────────────────── */
.settings-layout {
  display: flex;
  min-height: 0;
  flex: 1;
  overflow: hidden;
}

.settings-nav {
  width: 150px;
  min-width: 150px;
  padding: 8px 0 8px 8px;
  overflow-y: auto;
  border-right: 1px solid var(--border);
  flex-shrink: 0;
}

.settings-nav-group {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  padding: 10px 10px 4px;
  user-select: none;
}

.settings-nav-item {
  padding: 5px 10px;
  font-size: 12px;
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  cursor: pointer;
  margin-bottom: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 0.15s, color 0.15s;
}

.settings-nav-item:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.settings-nav-item.active {
  background: var(--accent);
  color: #fff;
}

.settings-nav-group.settings-nav-admin {
  margin-top: 4px;
  padding-top: 8px;
  border-top: 2px solid var(--accent);
  color: var(--accent);
}

.settings-body {
  flex: 1;
  overflow-y: auto;
  padding: 0;
  min-width: 0;
}

.modal-settings {
  width: 90%;
  max-width: 640px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  resize: both;
}

/* ── Activities / Games Launcher ──────────────────────── */
.modal-activities {
  max-width: 520px;
  max-height: 80vh;
  overflow-y: auto;
  padding: 0;
}
.activities-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 12px;
  position: sticky;
  top: 0;
  background: var(--bg-card);
  z-index: 10;
  border-bottom: 1px solid var(--border);
}
.activities-header h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}
.activities-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  padding: 16px 24px 24px;
}
.activity-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 10px;
  border-radius: 8px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: center;
}
.activity-card:hover {
  background: var(--bg-hover);
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.activity-card-icon {
  font-size: 36px;
  line-height: 1;
}
.activity-card-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
.activity-card-desc {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.3;
}
.activity-card-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}
.flash-install-banner {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 13px;
  color: var(--text-secondary);
}
.flash-install-banner .btn-sm { pointer-events: auto; flex-shrink: 0; }

/* ── Iframe Game Overlay ──────────────────────────────── */
.game-iframe-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: var(--bg-primary);
  display: flex;
  flex-direction: column;
}
.game-iframe-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.game-iframe-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}
.game-iframe-actions {
  display: flex;
  gap: 8px;
}
.game-iframe {
  flex: 1;
  width: 100%;
  border: none;
  background: var(--bg-primary);
}

/* Win95 overrides for activities */
[data-theme="win95"] .modal-activities { background: #bfbfbf; border: 3px outset #fff; border-radius: 0; }
[data-theme="win95"] .activities-header { background: linear-gradient(90deg, #000080, #1084d0); padding: 4px 8px; border-bottom: none; }
[data-theme="win95"] .activities-header h3 { color: #fff; font-size: 12px; font-weight: 700; margin: 0; background: none; font-family: "MS Sans Serif","Microsoft Sans Serif",Tahoma,Arial,sans-serif; }
[data-theme="win95"] .activity-card { background: #bfbfbf; border: 3px outset #fff; border-radius: 0; }
[data-theme="win95"] .activity-card:hover { border: 3px inset #808080; transform: none; box-shadow: none; }
[data-theme="win95"] .game-iframe-header { background: linear-gradient(90deg, #000080, #1084d0); border-bottom: 2px solid #808080; }
[data-theme="win95"] .game-iframe-title { color: #fff; font-family: "MS Sans Serif","Microsoft Sans Serif",Tahoma,Arial,sans-serif; font-size: 12px; }

.settings-section {
  padding: 16px 24px;
  border-bottom: 1px solid var(--border);
}
.settings-section:last-child { border-bottom: none; }

/* ── Admin section divider ── */
.admin-section-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 0 16px;
}
.admin-divider-line {
  flex: 1;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}
.admin-divider-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--accent);
  white-space: nowrap;
}
.admin-save-notice {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(var(--accent-rgb, 124,58,237), 0.12);
  border: 1px solid rgba(var(--accent-rgb, 124,58,237), 0.3);
  border-radius: 8px;
  padding: 8px 14px;
  margin-bottom: 16px;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.4;
}

.settings-section-title {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-secondary);
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--border);
}

.settings-section-subtitle {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 10px;
  margin-top: 16px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

/* ── Plugin & Theme Cards ── */
.plugin-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.plugin-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: var(--bg-tertiary, rgba(255,255,255,0.04));
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 8px;
  transition: background 0.15s;
}
.plugin-card:hover { background: var(--bg-hover, rgba(255,255,255,0.06)); }
.plugin-card-info { flex: 1; min-width: 0; }
.plugin-card-name {
  font-weight: 600;
  font-size: 13px;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.plugin-card-desc {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.plugin-card-meta {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 2px;
}
.plugin-empty {
  font-size: 12px;
  color: var(--text-muted);
  padding: 8px 0;
}
.plugin-empty code {
  background: var(--bg-tertiary);
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 11px;
}
/* Toggle switch */
.plugin-toggle {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
  flex-shrink: 0;
  margin-left: 12px;
}
.plugin-toggle input { opacity: 0; width: 0; height: 0; }
.plugin-toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--bg-tertiary, #333);
  border-radius: 11px;
  transition: background 0.2s;
}
.plugin-toggle-slider::before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  left: 3px;
  bottom: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
}
.plugin-toggle input:checked + .plugin-toggle-slider {
  background: var(--accent, #7c5cfc);
}
.plugin-toggle input:checked + .plugin-toggle-slider::before {
  transform: translateX(18px);
}

.settings-number-input {
  width: 70px;
  padding: 4px 6px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-primary);
  font-size: 12px;
}

.settings-hint {
  color: var(--text-muted);
  font-size: 10px;
  display: block;
  margin-top: -2px;
}
.settings-hint.error { color: #e94560; }
.settings-hint.success { color: #43b581; }
.settings-desc {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 14px;
  line-height: 1.45;
}

/* ── Desktop Shortcuts table ──────────────────────────── */
.shortcut-table { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.shortcut-row {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px; border-radius: var(--radius-sm);
  background: var(--bg-tertiary); border: 1px solid var(--border-color);
}
.shortcut-row.recording {
  border-color: var(--accent); background: rgba(107,79,219,.1);
}
.shortcut-label { flex: 1; font-size: 12px; color: var(--text-primary); }
.shortcut-key {
  min-width: 140px; font-size: 11px; font-family: var(--font-mono, monospace);
  background: var(--bg-secondary); border: 1px solid var(--border);
  border-radius: 3px; padding: 2px 8px; color: var(--text-secondary);
  text-align: center;
}
.shortcut-key.recording-label {
  color: var(--accent); border-color: var(--accent); animation: shortcut-pulse 1s ease infinite;
}
@keyframes shortcut-pulse { 0%,100%{opacity:1} 50%{opacity:.5} }
.shortcut-btns { display: flex; gap: 4px; }

/* ── Desktop App preference rows ─── */
.desktop-pref-row { margin-bottom: 12px; }
.desktop-pref-row .toggle-row { justify-content: flex-start; gap: 10px; font-size: 13px; color: var(--text-primary); cursor: pointer; }
.desktop-pref-row .settings-hint { margin: 2px 0 0 26px; font-size: 11px; }

.password-change-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.password-change-form .form-group.compact {
  margin: 0;
}
.password-change-form input {
  width: 100%;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 13px;
  outline: none;
}
.password-change-form input:focus {
  border-color: var(--accent);
}

.sidebar-settings-panel {
  flex-shrink: 0;
  border-top: 1px solid var(--border);
  border-bottom: none;
  padding: 10px 16px;
}

.btn-settings-popout {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.15s ease;
}
.btn-settings-popout:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
  border-color: var(--accent);
}
.btn-settings-popout svg {
  flex-shrink: 0;
  opacity: 0.7;
}
.btn-settings-popout:hover svg { opacity: 1; }

/* ═══════════════════════════════════════════════════════════
   ADMIN MEMBER LIST
   ═══════════════════════════════════════════════════════════ */

.aml-member-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  gap: 10px;
}
.aml-member-row:hover { background: var(--bg-hover); }

.aml-member-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

.aml-avatar-wrap {
  position: relative;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
}

.aml-avatar {
  width: 34px;
  height: 34px;
  object-fit: cover;
}

.aml-avatar-default {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 600;
}

.aml-status-dot {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--bg-tertiary);
}
.aml-status-dot.aml-online { background: var(--success); }
.aml-status-dot.aml-offline { background: var(--text-muted); }

.aml-member-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.aml-member-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

.aml-login-name {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 400;
}

.aml-admin-badge {
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--danger);
  color: #fff;
  font-weight: 600;
}

.aml-banned-badge {
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--text-muted);
  color: #fff;
  font-weight: 500;
  text-decoration: line-through;
}

.aml-new-badge {
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--accent);
  color: #fff;
  font-weight: 500;
}

.aml-member-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--text-muted);
}

.aml-role-badge {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 9px;
  border: 1px solid;
  font-weight: 500;
}

.aml-member-joined {
  font-size: 10px;
  color: var(--text-muted);
}

.aml-member-channels {
  font-size: 10px;
  color: var(--text-muted);
  opacity: 0.7;
}

/* ── Channel Picker (Add/Remove user from channels) ── */
.aml-ch-picker {
  max-width: 420px;
  width: 100%;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  padding: 16px;
  gap: 10px;
}
.aml-ch-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color, rgba(255,255,255,0.06));
}
.aml-ch-picker-title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.aml-ch-picker-selectall {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.aml-ch-picker-selectall input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
}
.aml-ch-picker-subtitle {
  display: flex;
  align-items: center;
  gap: 8px;
}
.aml-ch-picker-count {
  font-size: 11px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.aml-ch-picker-search {
  flex: 1;
  min-width: 0;
  padding: 6px 10px;
  font-size: 12px;
  background: var(--bg-input, rgba(0,0,0,0.25));
  border: 1px solid var(--border-color, rgba(255,255,255,0.08));
  border-radius: var(--radius-sm, 6px);
  color: var(--text);
  outline: none;
}
.aml-ch-picker-search:focus {
  border-color: var(--accent, #5865f2);
}
.aml-channel-list {
  overflow-y: auto;
  flex: 1;
  min-height: 80px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 2px;
  margin: 0 -2px;
}
.aml-channel-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: var(--radius-sm, 6px);
  cursor: pointer;
  transition: background 0.12s ease;
}
.aml-channel-row:hover {
  background: var(--bg-hover, rgba(255,255,255,0.04));
}
.aml-channel-row input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
  flex-shrink: 0;
}
.aml-ch-hash {
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
}
.aml-ch-name {
  font-size: 13px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.aml-channel-row:has(input:checked) {
  background: var(--bg-hover, rgba(88,101,242,0.10));
}
.aml-channel-row:has(input:checked) .aml-ch-name {
  font-weight: 500;
}
.aml-ch-picker-actions {
  margin-top: 4px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* ── Member List Action Buttons ── */
.aml-actions {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.15s;
}
.aml-member-row:hover .aml-actions { opacity: 1; }

.aml-action-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 14px;
  padding: 0;
  transition: background 0.12s;
}
.aml-action-btn:hover { background: var(--bg-hover); }
.aml-btn-ban:hover,
.aml-btn-delete:hover { background: rgba(244, 63, 94, 0.15); }
.aml-btn-unban:hover { background: rgba(74, 222, 128, 0.15); }

/* ── Channel Picker (add/remove) ── */
.aml-channel-row:hover {
  background: var(--bg-hover);
  border-radius: var(--radius-sm);
}

.bans-list {
  max-height: 300px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.ban-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
}

.ban-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.ban-info strong {
  font-size: 13px;
  color: var(--text-primary);
}

.ban-reason {
  font-size: 11px;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ban-date {
  font-size: 10px;
  color: var(--text-muted);
}

.btn-unban {
  flex-shrink: 0;
  background: var(--success) !important;
  color: white !important;
}

.btn-unban:hover { opacity: 0.85; }

.ban-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
  align-items: center;
}

.btn-delete-user {
  flex-shrink: 0;
  background: var(--danger) !important;
  color: white !important;
  font-size: 12px;
  padding: 4px 8px !important;
}

.btn-delete-user:hover { opacity: 0.85; }

.chat-image[src$=".gif"],
.chat-image[src*=".gif?"] {
  border: 1px solid var(--border);
}


/* ═══════════════════════════════════════════════════════════
   COLLAPSIBLE SIDEBAR SECTIONS (Join/Create)
   ═══════════════════════════════════════════════════════════ */

.collapsible-section-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
}

.collapse-toggle-arrow {
  font-size: 10px;
  transition: transform 0.2s ease;
  color: var(--text-muted);
  width: 12px;
  text-align: center;
  flex-shrink: 0;
}

.collapse-toggle-arrow.collapsed {
  transform: rotate(-90deg);
}

.collapsible-section-body {
  overflow: hidden;
  transition: max-height 0.25s ease, opacity 0.2s ease, margin 0.25s ease;
  max-height: 300px;
  opacity: 1;
}

.collapsible-section-body.collapsed {
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  margin-bottom: 0;
}


/* ═══════════════════════════════════════════════════════════
   MOBILE SIDEBAR SERVER BUBBLES
   ═══════════════════════════════════════════════════════════ */

.mobile-servers-section {
  display: none; /* shown only on mobile via media query */
}

.mobile-servers-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
}

.mobile-servers-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 0;
  overflow: hidden;
  transition: max-height 0.25s ease, opacity 0.2s ease;
  max-height: 60px;
}

.mobile-servers-row.collapsed {
  max-height: 0;
  opacity: 0;
  padding: 0;
  margin: 0;
}

.mobile-servers-scroll {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  flex: 1;
  min-width: 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 2px 0;
}

.mobile-servers-scroll::-webkit-scrollbar { display: none; }

.mobile-srv-bubble {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  position: relative;
  transition: border-radius 0.2s ease, background 0.2s ease;
  border: none;
  padding: 0;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.mobile-srv-bubble:hover {
  border-radius: 12px;
  background: var(--accent);
}

.mobile-srv-bubble img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

.mobile-srv-bubble .msrv-status {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--bg-secondary);
}

.mobile-srv-bubble .msrv-status.online { background: var(--success, #43b581); }
.mobile-srv-bubble .msrv-status.offline { background: var(--danger, #f04747); }
.mobile-srv-bubble .msrv-status.unknown { background: var(--text-muted, #666); }

.mobile-srv-add-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--bg-tertiary);
  border: 2px dashed var(--border-light);
  color: var(--accent);
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.mobile-srv-add-btn:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.mobile-servers-empty {
  font-size: 11px;
  color: var(--text-muted);
  padding: 4px 0;
  white-space: nowrap;
}


/* ═══════════════════════════════════════════════════════════
   MOBILE MENU BUTTONS
   ═══════════════════════════════════════════════════════════ */

.mobile-menu-btn,
.mobile-users-btn {
  display: none;  /* hidden on desktop */
  width: 40px;
  height: 40px;
  background: transparent;
  color: var(--text-secondary);
  border: none;
  border-radius: var(--radius-sm);
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all var(--transition);
  -webkit-tap-highlight-color: transparent;
}

/* Ensure mobile buttons are visible immediately on small screens
   (avoids race where media queries in responsive section load late) */
@media (max-width: 768px) {
  .mobile-menu-btn,
  .mobile-users-btn { display: flex !important; }
}

.mobile-menu-btn:hover,
.mobile-users-btn:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}

/* Mobile server dropdown — hidden on desktop, shown at ≤768px */
.mobile-server-dropdown { display: none; position: relative; }
.mobile-server-btn {
  background: transparent; border: none; color: var(--accent, #7c5cfc);
  font-size: 20px; cursor: pointer; padding: 4px 6px; border-radius: 4px;
  line-height: 1; -webkit-tap-highlight-color: transparent;
}
.mobile-server-btn:hover { background: var(--bg-hover); }
.mobile-server-menu {
  display: none; position: absolute; top: 100%; left: 0; z-index: 200;
  background: var(--bg-secondary, #1e1e2e); border: 1px solid var(--border, #444);
  border-radius: 8px; padding: 6px; min-width: 200px; max-height: 60vh; overflow-y: auto;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.mobile-server-menu.open { display: block; }
.mobile-server-menu-header {
  font-size: 11px; font-weight: 600; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.5px;
  padding: 4px 8px 6px; border-bottom: 1px solid var(--border, #444); margin-bottom: 4px;
}
.mobile-server-item {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  border-radius: 6px; cursor: pointer; color: var(--text-primary, #eee); font-size: 13px;
  text-decoration: none; transition: background 0.15s;
}
.mobile-server-item:hover { background: var(--bg-hover, rgba(255,255,255,0.06)); }
.mobile-server-item .msrv-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.mobile-server-item .msrv-dot.online { background: var(--success, #43b581); }
.mobile-server-item .msrv-dot.offline { background: var(--danger, #f04747); }
.mobile-server-item .msrv-dot.unknown { background: var(--text-dim, #666); }
.mobile-server-item .msrv-icon {
  width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
}
.mobile-server-item .msrv-initial {
  width: 24px; height: 24px; border-radius: 50%; background: var(--bg-tertiary, #2a2a3a);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; color: var(--text-muted); flex-shrink: 0;
}
.mobile-server-add {
  display: block; width: 100%; background: none; border: none; cursor: pointer;
  color: var(--accent, #7c5cfc); font-size: 13px; padding: 8px 10px;
  text-align: left; border-radius: 6px; margin-top: 2px;
}
.mobile-server-add:hover { background: rgba(124,92,252,0.1); }

/* Mobile overlay (dim background when sidebar open) */
.mobile-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1090;
  -webkit-tap-highlight-color: transparent;
}

.mobile-overlay.active { display: block; }

/* ── Mobile panel close button (hidden on desktop) ─────── */
.mobile-panel-close {
  display: none;
  z-index: 110;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  color: var(--text-primary, #eee);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}
.mobile-panel-close:hover { background: rgba(255,255,255,0.2); }
/* Left sidebar close: absolute positioned */
.mobile-panel-close:not(.mobile-panel-close-right) {
  position: absolute;
  top: 10px;
  right: 10px;
}
/* Right sidebar close: inline in voice header row (no absolute) */
.mobile-panel-close-right {
  position: static;
  margin-left: auto;
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — Tablet (≤ 900px)
   ═══════════════════════════════════════════════════════════ */

.mobile-settings-btn { display: none; }
@media (max-width: 900px) {
  /* Right sidebar slides in as an overlay on tablet widths so the Members
     button works between 769-900px (was previously display:none and the
     button appeared to do nothing). See #5274. */
  .right-sidebar {
    display: flex !important;
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    width: 260px;
    min-width: 260px;
    z-index: 1100;
    transform: translateX(100%);
    transition: transform 0.25s ease;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.4);
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: max(env(safe-area-inset-bottom, 0px), 16px);
  }
  #app-body.mobile-right-open .right-sidebar { transform: translateX(0); }
  .sidebar-collapse-btn { display: none; }
  .mobile-users-btn { display: flex; }
  .mobile-settings-btn { display: flex; }
  .sidebar-settings-panel { display: none !important; }
}


/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — Small Tablet (≤ 768px)
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* Safe area insets — left/right only on #app; top/bottom applied
     directly to edge elements (channel-header, input area, sidebar)
     so iOS Safari honours them reliably with viewport-fit=cover. */
  #app {
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
  }

  /* Show hamburger and users button */
  .mobile-menu-btn,
  .mobile-users-btn { display: flex !important; }

  /* Show mobile server dropdown */
  .mobile-server-dropdown { display: block; }

  /* Show mobile server bubbles in sidebar */
  .mobile-servers-section { display: block; }

  /* Show mobile close buttons */
  .mobile-panel-close { display: flex; }

  /* Collapse server bar */
  .server-bar { width: 0; min-width: 0; overflow: hidden; border: none; padding: 0; }

  /* Main area takes full width on mobile */
  .main { width: 100%; min-width: 0; isolation: isolate; }

  /* Welcome screen centered properly */
  .welcome-screen { width: 100%; justify-content: center; align-items: center; }
  .welcome-content { max-width: 90vw; padding: 0 16px; }

  /* Left sidebar — slide out as overlay (! overrides theme [data-theme] .sidebar { position: relative }) */
  .sidebar {
    position: fixed !important;
    left: 0;
    top: 0;
    bottom: 0;
    width: 280px;
    min-width: 280px;
    z-index: 1100;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.4);
    /* Safe area for notched phones + Android gesture bar */
    padding-top: constant(safe-area-inset-top); /* iOS 11.0-11.1 */
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: max(env(safe-area-inset-bottom, 0px), 28px);
  }

  #app-body.mobile-sidebar-open .sidebar {
    transform: translateX(0);
  }

  /* The mobile-servers-section bubble row inside the sidebar already shows
     all servers, so we hide the vertical .server-bar entirely on mobile to
     avoid a duplicate server list when the sidebar overlay is open. (#5272) */
  #app-body.mobile-sidebar-open .server-bar {
    display: none;
  }

  /* Right sidebar — slide in from right as overlay */
  .right-sidebar {
    display: flex !important;
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    width: 260px;
    min-width: 260px;
    z-index: 1100;
    transform: translateX(100%);
    transition: transform 0.25s ease;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.4);
    /* iOS status bar + Android nav bar safe areas */
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: max(env(safe-area-inset-bottom, 0px), 16px);
  }

  #app-body.mobile-right-open .right-sidebar {
    transform: translateX(0);
  }

  /* Channel header adjustments — safe-area-inset-top prevents
     underlapping the iOS status bar / Dynamic Island */
  .channel-header {
    padding: calc(8px + constant(safe-area-inset-top)) 12px 8px; /* iOS 11.0-11.1 */
    padding: calc(8px + env(safe-area-inset-top, 0px)) 12px 8px;
    min-height: calc(48px + env(safe-area-inset-top, 0px));
    gap: 8px;
  }

  .channel-info h3 { font-size: 14px; }
  .channel-code-tag { font-size: 10px; padding: 1px 6px; }

  /* Hide header clutter — search/pin/delete tucked into long-press or sidebar */
  #delete-channel-btn,
  #search-toggle-btn,
  #pinned-toggle-btn,
  #copy-code-btn { display: none !important; }
  .header-actions-divider { display: none; }

  /* Hide entire header actions box on mobile to reclaim header space */
  .header-actions-box { display: none !important; }

  /* Toolbar touch overrides are in the (hover: none) query below */

  /* Messages area */
  .messages { padding: 12px; }
  .message-input-area { padding: 8px 12px calc(12px + env(safe-area-inset-bottom, 0px)); gap: 6px; }
  .message-content { word-break: break-word; overflow-wrap: break-word; }
  .message-header { flex-wrap: wrap; }
  .reply-banner { max-width: 100%; flex-wrap: wrap; }
  .reply-preview { white-space: normal; word-break: break-word; }

  /* GIF picker — constrained on tablet */
  .gif-picker { max-width: 360px; }

  /* Screen share — constrained */
  .screen-share-container { max-height: 40vh; }
  /* Webcam — constrained */
  .webcam-container { max-height: 160px; }
  .webcam-tile { width: 120px; height: 90px; }

  /* Status bar — condense on small tablets but keep visible */
  .status-bar .status-item:nth-child(n+5) { display: none; }

  /* Server banner — smaller on mobile */
  .server-banner-display { height: 120px; }
  .server-banner-display::after { height: 50px; }
}


/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — Phone (≤ 480px)
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
  /* Sidebar full width on phones */
  .sidebar { width: 85vw; min-width: 85vw; }

  /* Mobile server dropdown (visible on phones) */
  .mobile-server-dropdown { display: block; }

  .right-sidebar { width: 85vw; min-width: 85vw; }

  /* Channel header — tight, prevent overflow, safe-area top */
  .channel-header {
    padding: calc(6px + env(safe-area-inset-top, 0px)) 8px 6px;
    min-height: calc(44px + env(safe-area-inset-top, 0px));
    gap: 4px;
    overflow: hidden;
  }

  .channel-info {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
  }
  .channel-info h3 { font-size: 13px; max-width: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .channel-code-tag { display: none !important; }

  /* Android beta banner — hide on phone, it eats header space */
  .android-beta-banner { display: none !important; }

  /* Update banner — compact on phone */
  .update-banner { padding: 3px 8px; font-size: 11px; }
  .update-pulse { width: 6px; height: 6px; }

  /* Desktop app banner — hide on mobile (they have Haven-Android) */
  .desktop-app-banner { display: none !important; }

  @keyframes slideUpSheet {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }

  /* Messages */
  .messages { padding: 8px; }
  .message-row { gap: 8px; padding: 4px; }
  .message-avatar { width: 30px; height: 30px; font-size: 12px; }
  .message-avatar-img { width: 30px; height: 30px; }
  .user-item-avatar, .user-item-avatar-img { width: 20px; height: 20px; font-size: 9px; }
  .user-avatar-wrapper { width: 20px; height: 20px; }
  .user-status-dot { width: 8px; height: 8px; bottom: -2px; right: -2px; }
  .message-author { font-size: 13px; }
  .message-content { font-size: 14px; line-height: 1.45; word-break: break-word; overflow-wrap: break-word; }
  .message-time { font-size: 10px; }
  .message-compact { padding-left: 46px; }
  .message-header { flex-wrap: wrap; }

  /* Reply banners — allow wrapping on mobile */
  .reply-banner { max-width: 100%; flex-wrap: wrap; }
  .reply-preview { white-space: normal; word-break: break-word; }

  /* Chat images — scale down for mobile, preserve aspect ratio */
  .chat-image { display: block; max-width: min(80%, 280px); max-height: 300px; object-fit: contain; width: auto; height: auto; }
  .image-mode-full .chat-image { max-width: 100%; max-height: 280px; }
  .message-compact .chat-image { margin-top: 4px; }

  /* Input area — single-row inline layout */
  .message-input-area {
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
    gap: 4px;
    flex-wrap: nowrap;
    align-items: flex-end;
  }

  /* Media buttons — compact inline, not a separate row */
  .input-actions-box {
    border-radius: 16px;
    padding: 2px 2px;
    gap: 1px;
    flex-shrink: 0;
    order: 0;
    border: none;
    background: none;
  }
  /* Hide dividers on phone — too cramped */
  .input-actions-box .input-actions-divider { display: none; }
  .input-actions-box .btn-upload,
  .input-actions-box .btn-emoji,
  .input-actions-box .btn-gif,
  .input-actions-box .btn-poll {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    font-size: 14px;
    border-radius: 50%;
    flex-shrink: 0;
  }
  .input-actions-box .btn-gif {
    width: auto;
    padding: 0 5px;
    border-radius: var(--radius-sm);
    height: 22px;
    min-height: 22px;
    font-size: 11px;
  }

  /* Textarea fills remaining space inline */
  .message-input-area textarea {
    padding: 6px 10px;
    font-size: 16px; /* prevents iOS zoom on focus */
    border-radius: 20px;
    min-height: 34px;
    flex: 1 1 0;
    min-width: 0;
    order: 1;
  }

  .message-input-area .btn-send {
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;
    border-radius: 50%;
    flex-shrink: 0;
    order: 2;
  }

  /* GIF picker — full width on phone */
  .gif-picker {
    left: 4px;
    right: 4px;
    bottom: 56px;
    max-width: none;
    width: auto;
    max-height: 50vh;
  }

  .gif-picker-grid { max-height: 40vh; }

  /* Emoji picker — fixed positioning on phone so it doesn't push layout */
  .emoji-picker {
    position: fixed;
    left: 4px;
    right: 4px;
    bottom: 56px;
    top: auto;
    max-width: none;
    width: auto;
    max-height: 45vh;
    margin-bottom: 0;
  }

  .emoji-grid { max-height: min(200px, 30vh); }
  .emoji-item { width: 40px; height: 40px; font-size: 22px; }

  /* Mention dropdown — wider */
  .mention-dropdown {
    left: 8px;
    right: 8px;
    max-width: none;
    min-width: 0;
  }

  .mention-item { padding: 12px 14px; font-size: 14px; }

  /* Reply bar */
  .reply-bar { padding: 6px 8px; font-size: 12px; }
  .reply-banner { padding: 4px 8px; font-size: 0.75em; max-width: 100%; flex-wrap: wrap; }
  .reply-preview { white-space: normal; word-break: break-word; }

  /* Reaction badges — touch-friendly */
  .reaction-badge { padding: 4px 10px; font-size: 14px; }
  .reaction-picker { gap: 4px; padding: 6px 8px; }
  .reaction-pick-btn { width: 38px; height: 38px; font-size: 20px; }
  .reaction-full-picker { width: calc(100vw - 32px); max-width: 320px; right: 0; }

  /* Toolbar touch overrides are in the (hover: none) query below */

  /* Screen share — smaller on phone */
  .screen-share-container { max-height: 35vh; min-height: 120px; }
  /* Webcam — smaller on phone */
  .webcam-container { max-height: 130px; }
  .webcam-tile { width: 100px; height: 75px; }

  /* Status bar — condense on phones */
  .status-bar .status-item:nth-child(n+3) { display: none; }

  /* Welcome screen */
  .welcome-icon { font-size: 48px; }
  .welcome-content h2 { font-size: 18px; }
  .welcome-content p { font-size: 13px; }

  /* Modal — wider on phone */
  .modal { padding: 20px; width: 95%; max-height: 85vh; overflow-y: auto; }
  .modal h3 { font-size: 18px; }

  /* Settings modal — scrollable on phone, hide nav */
  .modal-settings { max-height: 80vh; }
  .settings-nav { display: none; }
  .settings-body { overflow-y: auto; }

  /* Toasts — full width */
  #toast-container { left: 50%; right: auto; top: calc(8px + env(safe-area-inset-top, 0px)); transform: translateX(-50%); }
  .toast { max-width: none; }

  /* Typing indicator */
  .typing-indicator { padding: 0 8px; font-size: 11px; }

  /* Search container */
  .search-container { flex: 1; }
  .search-input { font-size: 14px; }

  /* Stream audio controls — always visible on touch */
  .stream-audio-controls { opacity: 1; }
  .stream-vol-slider { width: 50px; }
}


/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — Tiny Phone (≤ 360px)
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 360px) {
  .channel-info h3 { font-size: 12px; max-width: 90px; }
  .message-avatar { width: 26px; height: 26px; font-size: 11px; }
  .message-avatar-img { width: 26px; height: 26px; }
  .user-item-avatar, .user-item-avatar-img { width: 18px; height: 18px; font-size: 8px; }
  .user-avatar-wrapper { width: 18px; height: 18px; }
  .user-status-dot { width: 7px; height: 7px; bottom: -2px; right: -2px; }
  .message-compact { padding-left: 40px; }
  .message-row { gap: 6px; }
  .message-content { font-size: 13px; }
  .chat-image { max-width: min(90%, 240px); }

  /* Hide non-critical status items */
  .status-bar .status-item:nth-child(n+3) { display: none; }

  /* Sidebar slightly narrower */
  .sidebar { width: 80vw; min-width: 80vw; }
  .right-sidebar { width: 80vw; min-width: 80vw; }
}


/* ═══════════════════════════════════════════════════════════
   iOS PWA KEYBOARD FIX
   When the virtual keyboard opens on iOS standalone PWA,
   the viewport doesn't shrink.  JS detects this via
   visualViewport and sets #app height directly; this CSS
   removes the safe-area bottom padding so the input sits
   flush above the keyboard.
   ═══════════════════════════════════════════════════════════ */

.ios-keyboard-open .message-input-area {
  padding-bottom: 6px !important;
}

/* When iOS keyboard is open, constrain emoji/gif pickers to the visible area */
.ios-keyboard-open .emoji-picker,
.ios-keyboard-open .gif-picker {
  max-height: 40vh;
}

.ios-keyboard-open .emoji-grid {
  max-height: 25vh;
}


/* ═══════════════════════════════════════════════════════════
   iOS / MOBILE SAFE-AREA HARDENING
   JS probes env(safe-area-inset-*) and sets --safe-top /
   --safe-bottom as CSS custom properties with device-specific
   minimum floors.  These override env() when the browser
   returns 0 despite a notch / Dynamic Island being present.
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* Header: use JS-measured safe-top when available, falling back to env() */
  body.is-ios .channel-header,
  body.is-android .channel-header {
    padding-top: calc(8px + var(--safe-top, env(safe-area-inset-top, 0px))) !important;
    min-height: calc(48px + var(--safe-top, env(safe-area-inset-top, 0px))) !important;
  }

  /* Left sidebar overlay */
  body.is-ios .sidebar,
  body.is-android .sidebar {
    padding-top: var(--safe-top, env(safe-area-inset-top, 0px)) !important;
  }

  /* Right sidebar */
  body.is-ios .right-sidebar,
  body.is-android .right-sidebar {
    padding-top: var(--safe-top, env(safe-area-inset-top, 0px)) !important;
  }

  /* Server bar */
  body.is-ios .server-bar,
  body.is-android .server-bar {
    padding-top: calc(8px + var(--safe-top, env(safe-area-inset-top, 0px))) !important;
  }

  /* Message input — bottom safe area */
  body.is-ios .message-input-area,
  body.is-android .message-input-area {
    padding-bottom: calc(8px + var(--safe-bottom, env(safe-area-inset-bottom, 0px))) !important;
  }

  /* Toasts */
  body.is-ios #toast-container,
  body.is-android #toast-container {
    top: calc(8px + var(--safe-top, env(safe-area-inset-top, 0px)));
  }
}

@media (max-width: 480px) {
  body.is-ios .channel-header,
  body.is-android .channel-header {
    padding-top: calc(6px + var(--safe-top, env(safe-area-inset-top, 0px))) !important;
    min-height: calc(44px + var(--safe-top, env(safe-area-inset-top, 0px))) !important;
  }

  body.is-ios .message-input-area,
  body.is-android .message-input-area {
    padding-bottom: calc(6px + var(--safe-bottom, env(safe-area-inset-bottom, 0px))) !important;
  }
}

/* Remove safe-top padding when iOS keyboard is open (bottom padding already
   handled by .ios-keyboard-open rule above) */
body.is-ios.ios-keyboard-open .message-input-area {
  padding-bottom: 6px !important;
}


/* ═══════════════════════════════════════════════════════════
   TOUCH & ACCESSIBILITY
   ═══════════════════════════════════════════════════════════ */

@media (hover: none) and (pointer: coarse) {
  /* Prevent pull-to-refresh on chat app */
  html, body { overscroll-behavior-y: contain; }

  /* Eliminate iOS double-tap delay on interactive elements */
  .channel-item,
  .user-item,
  .status-option,
  .sidebar-bottom-btn,
  .mobile-server-item,
  .dm-toggle,
  button,
  a {
    touch-action: manipulation;
  }

  /* Disable hover effects on touch — prevents iOS "sticky hover" requiring
     double-tap (first tap activates :hover, second fires click) */
  .channel-item:hover { background: transparent; }
  .channel-item:hover .channel-name { color: var(--text-secondary); }
  .channel-item.active:hover { background: var(--bg-active); }
  .channel-item.active:hover .channel-name { color: var(--text-primary); }
  .status-option:hover { background: transparent; }

  /* Prevent browser text-selection / callout on long-press of messages;
     our JS handles the ⋯ button → toolbar instead. */
  .message, .message-compact {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }
  /* Keep message-content selectable for copy-paste after tap  */
  .msg-selected .message-content {
    -webkit-user-select: text;
    user-select: text;
  }

  /* Touch devices — larger tap targets */
  .channel-item { padding: 12px 16px; min-height: 44px; }
  .btn-sm { min-height: 44px; padding: 10px 14px; }
  .icon-btn { min-width: 40px; min-height: 40px; font-size: 18px; }
  .theme-btn { width: 36px; height: 36px; }
  .toggle-row input[type="checkbox"] { width: 20px; height: 20px; }
  .server-icon { width: 44px; height: 44px; }
  /* Disable hover-only interactions on touch */
  .message:hover, .message-compact:hover { background: transparent; }
  .message-compact:hover .compact-time { display: none !important; }

  /* Kill the hover-triggered toolbar — belt-and-suspenders in case
     the browser still reports (hover: hover) for the base guard. */
  .message:hover .msg-toolbar,
  .message-compact:hover .msg-toolbar { display: none !important; }

  /* Toolbar: hidden by default, shown only via JS ⋯ button (.msg-selected).
     Stays position:absolute from the base rule so it floats over
     content instead of pushing layout around. Anchored to top-right
     of the message, same as desktop hover. */
  .msg-toolbar {
    display: none !important;
    z-index: 50;
  }

  .msg-selected .msg-toolbar {
    display: flex !important;
  }

  .msg-selected {
    background: rgba(255,255,255,0.06);
    border-radius: var(--radius);
  }

  .msg-toolbar button {
    background: var(--bg-tertiary);
    border-radius: var(--radius);
    min-width: 34px;
    min-height: 34px;
    font-size: 16px;
  }

  /* Compact timestamp — always hidden on touch (no real hover exists) */
  .message-compact .compact-time { display: none !important; }

  /* Smoother scrolling on touch */
  .messages, .sidebar, .right-sidebar, .modal {
    -webkit-overflow-scrolling: touch;
  }

  /* Prevent overscroll bounce on chat container (iOS rubber-banding) */
  .messages {
    overscroll-behavior: contain;
  }
}

/* Extra safety: hide hover toolbar on any coarse-pointer device even if
   the browser claims (hover: hover).  Toolbar is shown via .msg-selected
   from the JS ⋯ button handler instead. */
@media (pointer: coarse) {
  .message:hover .msg-toolbar,
  .message-compact:hover .msg-toolbar { display: none !important; }
  .msg-toolbar { display: none !important; }
  .msg-selected .msg-toolbar { display: flex !important; }
}


/* ═══════════════════════════════════════════════════════════
   LANDSCAPE PHONE
   ═══════════════════════════════════════════════════════════ */

@media (max-height: 500px) and (orientation: landscape) {
  .status-bar .status-item:nth-child(n+3) { display: none; }
  .channel-header { min-height: 40px; padding: 4px 8px; }
  .messages { padding: 4px 8px; }
  .message-input-area { padding: 4px 8px 6px; }
  .welcome-icon { font-size: 36px; }
  .welcome-content h2 { font-size: 16px; }
  .server-banner-display { height: 80px; }
  .server-banner-display::after { height: 30px; }
}

/* ═══════════════════════════════════════════════════════════
   USER LIST: Group Labels & Score Badges
   ═══════════════════════════════════════════════════════════ */

.user-group-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
  padding: 8px 6px 4px;
  user-select: none;
}

.user-group-label.offline-label {
  margin-top: 8px;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}

.user-score-badge {
  font-size: 10px;
  color: var(--accent);
  background: var(--bg-tertiary);
  padding: 1px 6px;
  border-radius: 8px;
  margin-left: auto;
  flex-shrink: 0;
  font-weight: 600;
  opacity: 0.8;
}

/* ═══════════════════════════════════════════════════════════
   EULA
   ═══════════════════════════════════════════════════════════ */

.eula-notice {
  margin-top: 16px;
  padding: 12px 14px;
  background: var(--bg-primary);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

.eula-check-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
}

.eula-check-row + .eula-check-row { margin-top: 10px; }

.eula-check-row input[type="checkbox"] {
  margin-top: 2px;
  accent-color: var(--accent);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.eula-check-row a {
  color: var(--accent);
  text-decoration: underline;
}

.eula-check-row a:hover {
  color: var(--accent-hover);
}

.eula-modal {
  max-width: 700px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}

.eula-content {
  overflow-y: auto;
  max-height: 55vh;
  padding: 16px;
  background: var(--bg-primary);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  margin: 12px 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-secondary);
}

.eula-content p { margin: 8px 0; }
.eula-content ol { padding-left: 20px; }
.eula-content ol li { margin: 10px 0; }
.eula-content ul { padding-left: 20px; margin: 6px 0; }
.eula-content ul li { margin: 4px 0; list-style: disc; }
.eula-content h4 {
  margin: 18px 0 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.3px;
}
.eula-content strong { color: var(--text-primary); }
.eula-content em { color: var(--text-muted); }

.eula-footer {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  text-align: center;
  color: var(--danger);
}

/* ═══════════════════════════════════════════════════════════
   GAME BUTTON
   ═══════════════════════════════════════════════════════════ */

.btn-game {
  margin-top: 20px;
  padding: 10px 24px;
  background: var(--bg-hover);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
}

.btn-game:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* ═══════════════════════════════════════════════════════════
   TTS MESSAGE INDICATOR
   ═══════════════════════════════════════════════════════════ */

.tts-tag {
  font-size: 10px;
  color: var(--accent);
  margin-left: 6px;
  opacity: 0.7;
}

/* ═══════════════════════════════════════════════════════════
   WEBCAM GRID
   ═══════════════════════════════════════════════════════════ */
.webcam-container {
  display: none;
  flex-direction: column;
  background: color-mix(in srgb, var(--bg-primary) 90%, #000);
  border-bottom: 2px solid var(--accent);
  max-height: 25vh;
  min-height: 100px;
  position: relative;
}
.webcam-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  background: color-mix(in srgb, var(--bg-secondary) 60%, transparent);
}
.webcam-header-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}
.webcam-header .icon-btn.small {
  font-size: 11px;
  padding: 2px 6px;
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: 4px;
}
.webcam-header .icon-btn.small:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.webcam-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  padding: 4px;
  overflow-y: auto;
  max-height: calc(25vh - 32px);
}
.webcam-tile {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  background: #111;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  cursor: pointer;
  max-width: 25vw;
  min-width: 120px;
  flex-shrink: 0;
}
.webcam-tile:hover {
  box-shadow: 0 4px 14px rgba(0,0,0,0.45);
}
.webcam-tile video {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
  max-height: 21vh;
}
.webcam-tile-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(transparent, rgba(0,0,0,0.7));
  text-align: center;
  pointer-events: none;
}
/* Webcam tile pop-out/minimize/close buttons (mirrors screen share) */
.webcam-tile .stream-popout-btn,
.webcam-tile .stream-fullscreen-btn,
.webcam-tile .stream-minimize-btn,
.webcam-tile .stream-close-btn {
  position: absolute;
  background: rgba(0,0,0,0.6);
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 13px;
  padding: 2px 6px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 3;
}
.webcam-tile:hover .stream-popout-btn,
.webcam-tile:hover .stream-fullscreen-btn,
.webcam-tile:hover .stream-minimize-btn,
.webcam-tile:hover .stream-close-btn {
  opacity: 1;
}
.webcam-tile .stream-popout-btn { top: 4px; left: 4px; }
.webcam-tile .stream-fullscreen-btn { top: 4px; left: 32px; }
.webcam-tile .stream-minimize-btn { top: 4px; right: 28px; }
.webcam-tile .stream-close-btn { top: 4px; right: 4px; }

/* Webcam layout modes (reuse screen-share layout classes) */
.webcam-grid.layout-vertical    { flex-direction: column; align-items: center; }
.webcam-grid.layout-side-by-side .webcam-tile { flex: 0 1 calc(50% - 4px); max-width: calc(50% - 4px); }
.webcam-grid.layout-grid-2x2 .webcam-tile    { flex: 0 1 calc(50% - 4px); max-width: calc(50% - 4px); }

/* Webcam focus mode (double-click to expand) */
.webcam-container.webcam-focus-mode {
  max-height: none !important;
  min-height: 0 !important;
  flex: 1 1 auto !important;
  height: 100%;
}
.webcam-container.webcam-focus-mode .webcam-grid {
  max-height: none !important;
  flex: 1;
  height: 100%;
}
.webcam-container.webcam-focus-mode .webcam-tile:not(.webcam-focused) {
  display: none;
}
.webcam-container.webcam-focus-mode .webcam-tile.webcam-focused {
  flex: 1;
  width: 100%;
  max-width: none !important;
  min-height: 0;
  height: 100%;
}
.webcam-container.webcam-focus-mode .webcam-tile.webcam-focused video {
  width: 100%;
  height: 100%;
  max-height: none !important;
  object-fit: contain;
}

/* Webcam popped-out tile (mirrors screen-share) */
.webcam-tile.webcam-popped-out {
  height: 28px !important; min-height: 0;
  overflow: hidden; opacity: 0.5;
}
.webcam-tile.webcam-popped-out video { display: none; }
.webcam-tile.webcam-popped-out::after {
  content: '⧉ Popped out'; display: flex; align-items: center; justify-content: center;
  height: 100%; font-size: 11px; color: var(--text-muted);
}

/* Webcam PiP overlay */
.webcam-pip-overlay {
  width: 320px; min-height: 240px;
}

/* ═══════════════════════════════════════════════════════════
   SCREEN SHARE
   ═══════════════════════════════════════════════════════════ */

.screen-share-container {
  display: none;
  flex-direction: column;
  background: #000;
  border-bottom: 2px solid var(--accent);
  max-height: 50vh;
  min-height: 180px;
  position: relative;
}

.screen-share-indicator {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  font-size: 11px;
  border-radius: 12px;
  background: var(--accent);
  color: #fff;
  border: none;
  cursor: pointer;
  margin-left: 8px;
  animation: pulse-glow 2s ease-in-out infinite;
  white-space: nowrap;
}
.screen-share-indicator:hover { filter: brightness(1.2); }
@keyframes pulse-glow {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.screen-share-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  background: var(--bg-tertiary);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}

.screen-share-header .icon-btn {
  color: var(--text-muted);
}

.screen-share-header-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.stream-size-slider {
  width: 100px;
  height: 18px;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border-radius: 2px;
  cursor: pointer;
  vertical-align: middle;
  outline: none;
}
.stream-size-slider::-webkit-slider-runnable-track {
  background: rgba(255,255,255,0.3);
  height: 6px;
  border-radius: 3px;
  border: 1px solid rgba(255,255,255,0.2);
}
.stream-size-slider::-moz-range-track {
  background: rgba(255,255,255,0.3);
  height: 6px;
  border-radius: 3px;
  border: 1px solid rgba(255,255,255,0.2);
}
.stream-size-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  margin-top: -4px;
  box-shadow: 0 0 6px var(--accent-glow, rgba(124,92,252,0.4));
}
.stream-size-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  border: none;
}
.stream-size-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-muted);
  user-select: none;
  white-space: nowrap;
}
.screen-share-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2px;
  max-height: calc(50vh - 32px);
  overflow-y: auto;
  background: #000;
}
/* Stream layout modes */
.screen-share-grid.layout-vertical   { grid-template-columns: 1fr; }
.screen-share-grid.layout-side-by-side { grid-template-columns: repeat(2, 1fr); }
.screen-share-grid.layout-grid-2x2   { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); }

/* Stream layout picker */
.stream-layout-picker { position: relative; }
.stream-layout-btn {
  background: none; border: none; color: var(--text-muted, #aaa); cursor: pointer;
  font-size: 16px; padding: 2px 6px; border-radius: 4px; line-height: 1;
}
.stream-layout-btn:hover { background: rgba(255,255,255,0.1); color: #fff; }
.stream-layout-menu {
  display: none; position: absolute; top: 100%; right: 0; z-index: 50;
  background: var(--bg-tertiary, #2a2a3a); border: 1px solid var(--border, #444);
  border-radius: 6px; padding: 4px; min-width: 110px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
.stream-layout-menu.open { display: flex; flex-direction: column; gap: 2px; }
.stream-layout-opt {
  background: none; border: none; color: var(--text-secondary, #bbb); cursor: pointer;
  padding: 5px 10px; border-radius: 4px; text-align: left; font-size: 12px; white-space: nowrap;
}
.stream-layout-opt:hover { background: rgba(255,255,255,0.08); color: #fff; }
.stream-layout-opt.active { background: var(--accent, #7c5cfc); color: #fff; }

.screen-share-tile {
  position: relative;
  background: #111;
}

.screen-share-tile video {
  width: 100%;
  display: block;
  object-fit: contain;
  max-height: 45vh;
  background: #000;
}
/* When a stream/webcam video is fullscreened, override tile constraints */
video:fullscreen,
video:-webkit-full-screen {
  max-height: unset !important;
  max-width: unset !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  background: #000;
}
/* When the file-video wrapper is the fullscreen element, center the video */
.file-video-wrap:fullscreen,
.file-video-wrap:-webkit-full-screen {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #000 !important;
  max-width: unset !important;
  width: 100% !important;
  height: 100% !important;
}
.file-video-wrap:fullscreen .file-video,
.file-video-wrap:-webkit-full-screen .file-video {
  max-width: 100% !important;
  max-height: 100% !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  margin: 0 !important;
}

.screen-share-tile-label {
  position: absolute;
  bottom: 4px;
  left: 6px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 4px;
  pointer-events: none;
}

/* ── Stream Audio Controls (per-tile overlay) ──────────── */

.stream-audio-controls {
  position: absolute;
  bottom: 4px;
  right: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(0, 0, 0, 0.75);
  padding: 3px 8px;
  border-radius: 6px;
  opacity: 0;
  transition: opacity 0.2s;
  z-index: 2;
}
.screen-share-tile:hover .stream-audio-controls { opacity: 1; }

.stream-mute-btn {
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  padding: 2px 4px;
  border-radius: 4px;
  line-height: 1;
}
.stream-mute-btn:hover { background: rgba(255,255,255,0.15); }
.stream-mute-btn.muted { color: var(--danger, #e74c3c); }

.stream-vol-slider {
  --track-bg: rgba(255,255,255,0.2);
  width: 60px;
  height: 14px;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border-radius: 2px;
  cursor: pointer;
  outline: none;
  vertical-align: middle;
}
.stream-vol-slider::-webkit-slider-runnable-track {
  background: rgba(255,255,255,0.3);
  height: 6px;
  border-radius: 3px;
  border: 1px solid rgba(255,255,255,0.15);
}
.stream-vol-slider::-moz-range-track {
  background: rgba(255,255,255,0.3);
  height: 6px;
  border-radius: 3px;
  border: 1px solid rgba(255,255,255,0.15);
}
.stream-vol-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--accent, #7c5cfc);
  cursor: pointer;
  margin-top: -5px;
  box-shadow: 0 0 4px rgba(124,92,252,0.4);
}
.stream-vol-slider::-moz-range-thumb {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--accent, #7c5cfc);
  cursor: pointer;
  border: none;
}
.stream-vol-pct {
  color: rgba(255,255,255,0.7);
  font-size: 10px;
  min-width: 28px;
  text-align: center;
  user-select: none;
}

.stream-audio-badge {
  position: absolute;
  top: 4px;
  right: 6px;
  background: rgba(0,0,0,0.65);
  color: var(--accent, #7c5cfc);
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 3px;
}

.stream-no-audio-badge {
  position: absolute;
  top: 4px;
  right: 6px;
  background: rgba(0,0,0,0.75);
  color: var(--text-muted, #888);
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 4px;
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 3px;
  opacity: 0.85;
}

/* ── Audio-mode variants for the streamer's own tile.
   Subtle color cue so the streamer can tell at a glance which audio path
   their share is using. Only visible on their own tile. ── */
.stream-audio-badge.mode-app          { color: #7cfc7c; }                /* green: clean per-app capture */
.stream-audio-badge.mode-system-clean { color: #7cb8fc; }                /* blue:  system minus Haven */
.stream-audio-badge.mode-fallback     { color: #fcc77c; }                /* amber: fell back from per-app */
.stream-audio-badge.mode-loopback     { color: #fc7c7c; }                /* red:   raw loopback (voice-loop risk) */

/* ── Stream Viewer Badge (eye icon + count on tiles) ── */

.stream-viewer-badge {
  position: absolute;
  bottom: 30px;
  right: 6px;
  background: rgba(0,0,0,0.7);
  color: #fff;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 4px;
  z-index: 5;
  backdrop-filter: blur(4px);
}
.stream-viewer-badge .viewer-eye {
  font-size: 12px;
}

/* ── Stream Focus Mode (double-click to expand) ──────── */

.stream-focus-mode {
  max-height: none !important;
  flex: 999 1 0;
  min-height: 0;
  overflow: hidden;
}

.stream-focus-mode .screen-share-grid {
  max-height: none !important;
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
  height: 100%;
}

.stream-focus-mode .screen-share-tile:not(.stream-focused) {
  display: none;
}

.stream-focus-mode .screen-share-tile.stream-focused {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.stream-focus-mode .screen-share-tile.stream-focused video {
  max-height: 100%;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ── Stream Pop-out Button ──────────────────────────── */

.stream-popout-btn {
  position: absolute;
  top: 4px;
  left: 6px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 16px;
  padding: 2px 6px;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.2s;
  z-index: 3;
  line-height: 1;
}
.screen-share-tile:hover .stream-popout-btn { opacity: 1; }
.stream-popout-btn:hover { background: rgba(255,255,255,0.2); }

/* ── Stream Fullscreen Button (beside pop-out, top-left) ── */

.stream-fullscreen-btn {
  position: absolute;
  top: 4px;
  left: 36px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 16px;
  padding: 2px 6px;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.2s;
  z-index: 3;
  line-height: 1;
}
.screen-share-tile:hover .stream-fullscreen-btn { opacity: 1; }
.stream-fullscreen-btn:hover { background: rgba(255,255,255,0.2); }

/* ── Stream Minimize Button (top-right, keeps audio) ───── */

.stream-minimize-btn {
  position: absolute;
  top: 4px;
  right: 30px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 14px;
  padding: 2px 6px;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.2s;
  z-index: 3;
  line-height: 1;
}
.screen-share-tile:hover .stream-minimize-btn { opacity: 1; }
.stream-minimize-btn:hover { background: rgba(255,255,255,0.2); }

/* ── Stream Close Button (top-right corner, mutes audio) ─ */

.stream-close-btn {
  position: absolute;
  top: 4px;
  right: 6px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 14px;
  padding: 2px 6px;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.2s;
  z-index: 3;
  line-height: 1;
}
.screen-share-tile:hover .stream-close-btn { opacity: 1; }
.stream-close-btn:hover { background: rgba(220,53,69,0.7); }

/* Collapse tile when popped out — free up Haven space */
.screen-share-tile.stream-popped-out {
  height: 28px !important;
  min-height: 0 !important;
  overflow: hidden;
  flex: none !important;
}
.screen-share-tile.stream-popped-out video { display: none; }
.screen-share-tile.stream-popped-out .stream-controls { display: none; }
.screen-share-tile.stream-popped-out::after {
  content: '⧉ Popped out — click to restore';
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 28px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 500;
  background: var(--bg-tertiary);
}

/* When ALL tiles are popped out, collapse the entire container */
.screen-share-container.all-streams-popped {
  min-height: 0 !important;
  max-height: none !important;
  height: auto !important;
}
.screen-share-container.all-streams-popped .screen-share-grid {
  max-height: none !important;
}

/* ── Stream PiP Overlay ─────────────────────────────────── */
.stream-pip-overlay {
  width: 480px;
  min-height: 320px;
}
.stream-pip-overlay .stream-pip-video {
  flex: 1;
  overflow: hidden;
  background: #000;
  min-height: 240px;
}
.stream-pip-overlay video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

@media (max-width: 768px) {
  .stream-pip-overlay {
    width: 280px;
    bottom: 12px;
    right: 12px;
  }
}

/* ── Soundboard PiP Overlay ─────────────────────────────── */
.sb-pip-overlay {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 400px;
  z-index: 10000;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.45);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  resize: both;
  min-width: 260px;
  min-height: 220px;
}
.sb-pip-body {
  flex: 1;
  overflow: hidden;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}
.sb-pip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 6px;
  overflow-y: auto;
  flex: 1;
  min-height: 80px;
}
@media (max-width: 768px) {
  .sb-pip-overlay {
    width: 280px;
    bottom: 12px;
    right: 12px;
  }
}

/* ═══════════════════════════════════════════════════════════
   WHITELIST PANEL
   ═══════════════════════════════════════════════════════════ */

.whitelist-add-row {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}

.whitelist-add-row input {
  flex: 1;
  min-width: 0;
}

.settings-text-input {
  padding: 6px 10px;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 13px;
}

.settings-text-input:focus {
  outline: none;
  border-color: var(--accent);
}

.whitelist-list {
  max-height: 200px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.whitelist-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  background: var(--bg-primary);
  border-radius: var(--radius-sm);
  font-size: 13px;
}

.whitelist-username {
  color: var(--text-primary);
  font-weight: 500;
}

.btn-danger-sm {
  padding: 2px 8px !important;
  font-size: 11px;
  background: var(--danger) !important;
  color: #fff !important;
  border-radius: var(--radius-sm);
  cursor: pointer;
  min-height: 0;
  line-height: 1.4;
}

.btn-danger-sm:hover { opacity: 0.85; }

/* ═══════════════════════════════════════════════════════════
   PINNED MESSAGES
   ═══════════════════════════════════════════════════════════ */

.message.pinned,
.message-compact.pinned {
  border-left: 3px solid var(--accent);
  background: rgba(124, 92, 252, 0.04);
}

.pinned-tag {
  font-size: 11px;
  margin-left: 4px;
  opacity: 0.7;
  cursor: default;
}

/* ═══════════════════════════════════════════════════════════
   ARCHIVED / PROTECTED MESSAGES
   ═══════════════════════════════════════════════════════════ */

.message.archived,
.message-compact.archived {
  border-left: 3px solid #27ae60;
  background: rgba(39, 174, 96, 0.04);
}

.archived-tag {
  font-size: 11px;
  margin-left: 4px;
  opacity: 0.7;
  cursor: default;
}

/* ═══════════════════════════════════════════════════════════
   ANNOUNCEMENT CHANNELS
   ═══════════════════════════════════════════════════════════ */

.message.announcement,
.message-compact.announcement {
  border-left: 3px solid #d4a017;
  background: rgba(212, 160, 23, 0.05);
}

.announcement-badge {
  background: #d4a017 !important;
  color: #fff !important;
}

.pinned-panel {
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  max-height: 300px;
  overflow-y: auto;
}

.pinned-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-color);
  position: sticky;
  top: 0;
  background: var(--bg-secondary);
}

.pinned-list { padding: 4px 0; }

.pinned-item {
  padding: 8px 12px;
  cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,0.03);
  transition: background var(--transition);
}

.pinned-item:hover { background: rgba(255,255,255,0.04); }

.pinned-item-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 2px;
}

.pinned-item-author { font-weight: 600; font-size: 13px; }
.pinned-item-time { font-size: 11px; color: var(--text-muted); }

.pinned-item-content {
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.4;
  max-height: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pinned-item-footer {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 4px;
}

/* ═══════════════════════════════════════════════════════════
   CODE BLOCKS & BLOCKQUOTES
   ═══════════════════════════════════════════════════════════ */

.code-block {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  margin: 6px 0;
  position: relative;
  overflow: hidden;
}

.code-block pre {
  margin: 0;
  padding: 10px 12px;
  overflow-x: auto;
  font-size: 13px;
  line-height: 1.5;
}

.code-block code {
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  color: var(--text-primary);
  background: none;
  padding: 0;
}

.code-block-lang {
  position: absolute;
  top: 4px;
  right: 8px;
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.inline-code {
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  background: var(--bg-tertiary);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 0.9em;
  color: var(--accent);
}

.chat-blockquote {
  border-left: 3px solid var(--text-muted);
  padding: 4px 10px;
  margin: 1px 0;
  color: var(--text-secondary);
  font-style: italic;
  background: var(--bg-tertiary);
  border-radius: 6px;
  max-width: fit-content;
}

/* ── Markdown tables ────────────────────────────────── */
.chat-table-wrap {
  margin: 4px 0;
  overflow-x: auto;
  border-radius: 6px;
  border: 1px solid var(--border-color, rgba(255,255,255,0.08));
  max-width: 100%;
}
.chat-table {
  border-collapse: collapse;
  font-size: 13px;
  width: auto;
  min-width: 200px;
  background: var(--bg-tertiary, rgba(0,0,0,0.15));
}
.chat-table th,
.chat-table td {
  padding: 6px 10px;
  text-align: left;
  border-bottom: 1px solid var(--border-color, rgba(255,255,255,0.06));
  border-right: 1px solid var(--border-color, rgba(255,255,255,0.04));
  vertical-align: middle;
  white-space: nowrap;
}
.chat-table th:last-child,
.chat-table td:last-child { border-right: none; }
.chat-table tr:last-child td { border-bottom: none; }
.chat-table th {
  background: rgba(255,255,255,0.04);
  font-weight: 600;
  color: var(--text);
}
.chat-table tbody tr:hover { background: rgba(255,255,255,0.02); }
.chat-table .custom-emoji { width: 1.1em; height: 1.1em; vertical-align: -0.15em; }
.chat-blockquote-author {
  font-style: normal;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 1px;
}
.chat-blockquote-body {
  line-height: 1.35;
}

/* ── Chat Markdown: Highlight ──────────────────────────── */
.chat-highlight {
  background: rgba(250, 200, 50, 0.25);
  color: inherit;
  padding: 1px 4px;
  border-radius: 3px;
}

/* ── Chat Markdown: Headings ───────────────────────────── */
.chat-heading {
  font-weight: 700;
  margin: 4px 0 2px;
  line-height: 1.3;
  color: var(--text-primary);
}
.chat-h1 { font-size: 1.5em; }
.chat-h2 { font-size: 1.25em; }
.chat-h3 { font-size: 1.1em; }

/* ── Chat Markdown: Horizontal Rules ───────────────────── */
.chat-hr {
  border: none;
  border-top: 1px solid var(--border-color);
  margin: 6px 0;
}

/* ── Chat Markdown: Lists ──────────────────────────────── */
.chat-list {
  margin: 4px 0;
  padding-left: 22px;
}
.chat-list li {
  margin: 1px 0;
  line-height: 1.45;
}
ol.chat-list { list-style-type: decimal; }
ul.chat-list { list-style-type: disc; }

/* ═══════════════════════════════════════════════════════════
   LINK PREVIEWS
   ═══════════════════════════════════════════════════════════ */

.link-preview {
  display: flex;
  gap: 10px;
  margin-top: 6px;
  padding: 10px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: inherit;
  max-width: 480px;
  overflow: hidden;
  transition: background var(--transition);
}

.link-preview:hover {
  background: rgba(255,255,255,0.04);
}

.link-preview-image {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
}

.link-preview-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  overflow: hidden;
}

.link-preview-site {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.link-preview-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-link);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.link-preview-desc {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Multi-image gallery embed (2×2 grid, Discord-style) ─ */
.link-preview--gallery {
  flex-direction: column;
  max-width: 400px;
  gap: 6px;
}

.link-preview-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  border-radius: 4px;
  overflow: hidden;
  width: 100%;
}

.link-preview-gallery-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

/* 3-image: first spans both columns so it isn't stretched tiny */
.link-preview-gallery[data-count="3"] .link-preview-gallery-img:first-child {
  grid-column: 1 / -1;
  aspect-ratio: 2 / 1;
}

/* ── Inline YouTube embed in chat messages ────────────── */
.link-preview-yt {
  margin-top: 6px;
  max-width: 480px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border-color);
  border-left: 3px solid #ff0000;
  background: #000;
  aspect-ratio: 16 / 9;
}
.link-preview-yt iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ═══════════════════════════════════════════════════════════
   Channel Topic Bar
   ═══════════════════════════════════════════════════════════ */

.channel-topic-bar {
  padding: 4px 16px;
  font-size: 12px;
  color: var(--text-secondary);
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 24px;
  line-height: 24px;
}

.channel-topic-bar:hover {
  color: var(--text-primary);
}

/* ═══════════════════════════════════════════════════════════
   User Status Dots
   ═══════════════════════════════════════════════════════════ */

/* DND: square — distinct shape */
.user-dot.dnd {
  background-color: var(--danger) !important;
  box-shadow: 0 0 4px var(--danger);
  border-radius: 2px;
}

/* Away: half-circle dome */
.user-dot.away {
  background-color: #faa61a !important;
  box-shadow: 0 0 4px rgba(250, 166, 26, 0.4);
  border-radius: 2px 2px 50% 50%;
}

/* Invisible: hollow circle */
.user-dot.invisible {
  background-color: transparent !important;
  border: 2px solid var(--text-muted);
  box-shadow: none;
  box-sizing: border-box;
}

.user-status-text {
  font-size: 11px;
  color: var(--text-muted);
  margin-left: 4px;
  max-width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
}

/* ═══════════════════════════════════════════════════════════
   Status Picker
   ═══════════════════════════════════════════════════════════ */

.status-picker-dot {
  cursor: pointer;
  transition: transform 0.15s;
}

.status-picker-dot:hover {
  transform: scale(1.4);
}

.status-picker {
  position: fixed;
  left: 10px;
  right: auto;
  bottom: auto;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 0;
  min-width: 200px;
  width: 220px;
  z-index: 600;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.status-option {
  padding: 6px 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-primary);
}

.status-option:hover {
  background: var(--bg-hover);
}

.status-option .user-dot {
  position: static;
  flex-shrink: 0;
}

.status-text-row {
  padding: 6px 12px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
  padding-top: 8px;
}

.status-text-row input {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 8px;
  color: var(--text-primary);
  font-size: 12px;
  outline: none;
}

.status-text-row input:focus {
  border-color: var(--accent);
}

/* ═══════════════════════════════════════════════════════════
   DM Section in Sidebar
   ═══════════════════════════════════════════════════════════ */

.dm-section-label {
  margin-top: 0 !important;
  padding-top: 4px;
}

.dm-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  user-select: none;
  transition: color 0.15s;
}

.dm-toggle:hover {
  color: var(--text-secondary);
}

.dm-toggle-arrow {
  display: inline-block;
  transition: transform 0.2s ease;
  font-size: 10px;
}

.dm-toggle-arrow.collapsed {
  transform: rotate(-90deg);
}

.dm-unread-count {
  font-size: 9px;
  font-weight: 700;
  background: var(--accent);
  color: #fff;
  padding: 1px 5px;
  border-radius: 8px;
  margin-left: auto;
}

.dm-item .channel-hash {
  color: var(--accent);
}

/* ── DM Category Headers ──────────────────────────────── */
.dm-category-header {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px 2px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted, #888);
  user-select: none;
  cursor: pointer;
  transition: color 0.15s;
}
.dm-category-header:hover {
  color: var(--text-secondary);
}
.dm-category-arrow {
  display: inline-block;
  transition: transform 0.2s ease;
  font-size: 9px;
}
.dm-category-arrow.collapsed {
  transform: rotate(-90deg);
}

.user-dm-btn {
  font-size: 12px !important;
  opacity: 0;
  transition: opacity 0.15s;
}

.user-item:hover .user-dm-btn {
  opacity: 0.7;
}

.user-dm-btn:hover {
  opacity: 1 !important;
}

/* ═══════════════════════════════════════════════════════════
   File Attachments
   ═══════════════════════════════════════════════════════════ */

.file-attachment {
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  max-width: 400px;
  margin: 4px 0;
}

.file-download-link {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--text-primary);
  transition: color 0.15s;
}

.file-download-link:hover {
  color: var(--accent);
}

.file-icon {
  font-size: 24px;
  flex-shrink: 0;
}

.file-name {
  font-weight: 500;
  word-break: break-all;
}

.file-size {
  color: var(--text-muted);
  font-size: 12px;
  flex-shrink: 0;
}

.file-download-arrow {
  margin-left: auto;
  font-size: 16px;
  opacity: 0.5;
}

.file-download-link:hover .file-download-arrow {
  opacity: 1;
}

.file-info {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  font-size: 13px;
}

.file-attachment audio {
  width: 100%;
  height: 32px;
}

.file-video {
  max-width: 100%;
  max-height: 300px;
  border-radius: 4px;
  margin-top: 4px;
  background: #0a0a0a;
  object-fit: contain;
}

.file-video-wrap {
  position: relative;
  display: inline-block;
  max-width: 100%;
}



/* Risky file highlight */
.file-download-link.risky-file .file-name {
  color: var(--error, #e74c3c);
}

/* ── Risky download warning modal ── */
.risky-download-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  animation: fadeIn 0.15s ease;
}
.risky-download-modal {
  background: var(--bg-secondary, #2b2d31);
  border: 1px solid var(--border, #3a3c42);
  border-radius: 12px;
  padding: 28px 32px;
  max-width: 420px;
  width: 90%;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}
.risky-download-icon {
  font-size: 48px;
  margin-bottom: 8px;
}
.risky-download-modal h3 {
  margin: 0 0 12px;
  color: var(--error, #e74c3c);
  font-size: 18px;
}
.risky-download-modal p {
  margin: 0 0 8px;
  color: var(--text-primary, #dbdee1);
  font-size: 14px;
  word-break: break-all;
}
.risky-download-desc {
  color: var(--text-muted, #949ba4) !important;
  font-size: 13px !important;
  line-height: 1.5;
  word-break: normal !important;
}
.risky-download-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 20px;
}
.risky-download-cancel {
  padding: 8px 20px;
  border-radius: 6px;
  border: 1px solid var(--border, #3a3c42);
  background: var(--bg-tertiary, #232428);
  color: var(--text-primary, #dbdee1);
  cursor: pointer;
  font-size: 14px;
  transition: background 0.15s;
}
.risky-download-cancel:hover {
  background: var(--bg-primary, #1e1f22);
}
.risky-download-confirm {
  padding: 8px 20px;
  border-radius: 6px;
  border: none;
  background: var(--error, #e74c3c);
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: filter 0.15s;
}
.risky-download-confirm:hover {
  filter: brightness(1.15);
}

.user-bar {
  position: relative;
}

/* ═══════════════════════════════════════════════════════════
   THEMED SLIDER EFFECTS
   ═══════════════════════════════════════════════════════════ */

/* Bloodborne / Dark Souls — health bar red glow */
[data-theme="bloodborne"] .slider-sm,
[data-theme="bloodborne"] .ns-slider {
  --track-bg: #1a0c0c;
}
[data-theme="bloodborne"] .slider-sm::-webkit-slider-thumb,
[data-theme="bloodborne"] .ns-slider::-webkit-slider-thumb {
  box-shadow: 0 0 8px rgba(204, 0, 32, 0.6);
}

[data-theme="darksouls"] .slider-sm,
[data-theme="darksouls"] .ns-slider {
  --track-bg: #1a1510;
}
[data-theme="darksouls"] .slider-sm::-webkit-slider-thumb,
[data-theme="darksouls"] .ns-slider::-webkit-slider-thumb {
  box-shadow: 0 0 8px rgba(200, 168, 78, 0.5);
}

/* Elden Ring — golden estus glow */
[data-theme="eldenring"] .slider-sm,
[data-theme="eldenring"] .ns-slider {
  --track-bg: #14141e;
}
[data-theme="eldenring"] .slider-sm::-webkit-slider-thumb,
[data-theme="eldenring"] .ns-slider::-webkit-slider-thumb {
  box-shadow: 0 0 10px rgba(212, 168, 50, 0.6);
}

/* Minecraft — blocky green bar */
[data-theme="minecraft"] .slider-sm,
[data-theme="minecraft"] .ns-slider {
  --track-bg: #2e2e2e;
  --track-h: 6px;
  --track-r: 0;
  --track-border: 1px solid #3a3a3a;
  height: 6px;
  border-radius: 0;
  border: 1px solid #3a3a3a;
}
[data-theme="minecraft"] .slider-sm::-webkit-slider-thumb,
[data-theme="minecraft"] .ns-slider::-webkit-slider-thumb {
  border-radius: 2px;
  box-shadow: 2px 2px 0 #2a5a2a;
}
[data-theme="minecraft"] .slider-sm::-moz-range-thumb,
[data-theme="minecraft"] .ns-slider::-moz-range-thumb {
  border-radius: 2px;
}

/* Final Fantasy X — blue mana bar */
[data-theme="ffx"] .slider-sm,
[data-theme="ffx"] .ns-slider {
  --track-bg: #101a30;
  --track-h: 5px;
  height: 5px;
}
[data-theme="ffx"] .slider-sm::-webkit-slider-thumb,
[data-theme="ffx"] .ns-slider::-webkit-slider-thumb {
  box-shadow: 0 0 8px rgba(64, 168, 224, 0.5);
}

/* Zelda — green heart / stamina bar */
[data-theme="zelda"] .slider-sm,
[data-theme="zelda"] .ns-slider {
  --track-bg: #142014;
  --track-h: 5px;
  height: 5px;
}
[data-theme="zelda"] .slider-sm::-webkit-slider-thumb,
[data-theme="zelda"] .ns-slider::-webkit-slider-thumb {
  box-shadow: 0 0 8px rgba(68, 187, 68, 0.5);
}

/* Matrix — green terminal glow */
[data-theme="matrix"] .slider-sm,
[data-theme="matrix"] .ns-slider {
  --track-bg: #0a0a0a;
}
[data-theme="matrix"] .slider-sm::-webkit-slider-thumb,
[data-theme="matrix"] .ns-slider::-webkit-slider-thumb {
  box-shadow: 0 0 8px rgba(0, 255, 65, 0.5);
}

/* Tron — neon blue trail */
[data-theme="tron"] .slider-sm,
[data-theme="tron"] .ns-slider {
  --track-bg: #0c141f;
}
[data-theme="tron"] .slider-sm::-webkit-slider-thumb,
[data-theme="tron"] .ns-slider::-webkit-slider-thumb {
  box-shadow: 0 0 10px rgba(111, 236, 255, 0.6);
}

/* Cyberpunk — neon pink */
[data-theme="cyberpunk"] .slider-sm,
[data-theme="cyberpunk"] .ns-slider {
  --track-bg: #0a0a12;
}
[data-theme="cyberpunk"] .slider-sm::-webkit-slider-thumb,
[data-theme="cyberpunk"] .ns-slider::-webkit-slider-thumb {
  box-shadow: 0 0 8px rgba(255, 45, 111, 0.5);
}

/* Halo — UNSC blue-green */
[data-theme="halo"] .slider-sm,
[data-theme="halo"] .ns-slider {
  --track-bg: #0d1a0d;
}
[data-theme="halo"] .slider-sm::-webkit-slider-thumb,
[data-theme="halo"] .ns-slider::-webkit-slider-thumb {
  box-shadow: 0 0 8px rgba(79, 195, 247, 0.5);
}

/* Ice — frozen blue */
[data-theme="ice"] .slider-sm,
[data-theme="ice"] .ns-slider {
  --track-bg: #102030;
}
[data-theme="ice"] .slider-sm::-webkit-slider-thumb,
[data-theme="ice"] .ns-slider::-webkit-slider-thumb {
  box-shadow: 0 0 10px rgba(0, 212, 255, 0.6);
}

/* LoTR — golden warmth */
[data-theme="lotr"] .slider-sm,
[data-theme="lotr"] .ns-slider {
  --track-bg: #2a221a;
}
[data-theme="lotr"] .slider-sm::-webkit-slider-thumb,
[data-theme="lotr"] .ns-slider::-webkit-slider-thumb {
  box-shadow: 0 0 6px rgba(212, 168, 68, 0.5);
}

/* Dracula — purple accent */
[data-theme="dracula"] .slider-sm,
[data-theme="dracula"] .ns-slider {
  --track-bg: #22232e;
}
[data-theme="dracula"] .slider-sm::-webkit-slider-thumb,
[data-theme="dracula"] .ns-slider::-webkit-slider-thumb {
  box-shadow: 0 0 8px rgba(189, 147, 249, 0.5);
}

/* ── Sub-channel styling ─────────────────────────────── */
.sub-channel-item {
  padding: 3px 16px 3px 38px !important;
}
.sub-channel-item .channel-hash {
  font-size: 12px;
  opacity: 0.55;
}
.sub-channel-item .channel-name {
  font-size: 12px;
  opacity: 0.8;
}

/* ── Private sub-channel styling ─────────────────────── */
.private-channel .channel-name {
  opacity: 0.65;
  font-style: italic;
}
.private-channel .channel-hash {
  font-size: 12px;
}

/* ── Sub-channel Subscriptions Panel ─────────────────── */
.sub-panel-parent-section {
  margin-bottom: 16px;
}
.sub-panel-parent-section:last-child {
  margin-bottom: 0;
}
.sub-panel-parent-header {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.5;
  margin: 0 0 8px;
  font-weight: 600;
}
.sub-panel-group-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.4;
  margin: 8px 0 4px;
  font-weight: 600;
  color: var(--accent, #7289da);
}
.sub-panel-group-label.unsubbed {
  color: var(--text-muted, #72767d);
}
.sub-panel-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.sub-panel-tile {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 6px;
  background: rgba(255,255,255,0.04);
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
  min-width: 0;
  max-width: 100%;
}
.sub-panel-tile:hover {
  background: rgba(255,255,255,0.08);
}
.sub-panel-tile.subbed {
  border-left: 2px solid var(--accent, #7289da);
}
.sub-panel-tile.unsubbed {
  opacity: 0.5;
  border-left: 2px solid transparent;
}
.sub-panel-tile.unsubbed:hover {
  opacity: 0.75;
}
.sub-panel-tile-name {
  font-size: 0.85rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sub-panel-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  flex-shrink: 0;
}
.sub-panel-toggle input[type="checkbox"] {
  display: none;
}
.sub-panel-toggle-label {
  font-size: 0.85rem;
  user-select: none;
}
.sub-panel-badge {
  font-size: 0.65rem;
  font-weight: 700;
  background: var(--accent, #7289da);
  color: #fff;
  padding: 1px 5px;
  border-radius: 8px;
  flex-shrink: 0;
  min-width: 16px;
  text-align: center;
}

/* ── Role badge (user list & messages) ───────────────── */
.user-role-badge {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(255,255,255,0.06);
  margin-left: 4px;
  white-space: nowrap;
  flex-shrink: 0;
  /* Hidden in sidebar user list — role shown via dot + tooltip instead */
  display: none;
}
.msg-role-badge {
  font-size: 9px;
  vertical-align: middle;
  margin-left: 4px;
  /* Always show in messages */
  display: inline;
}

/* ── BOT badge for webhook messages ───────────────── */
.bot-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--accent-color, #5865f2);
  color: #fff;
  vertical-align: middle;
  margin-left: 4px;
}
.webhook-message .message-avatar {
  border: 2px solid var(--accent-color, #5865f2);
}

/* ── Webhook management items ──────────────────────────── */
.webhook-item {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px;
  margin-bottom: 8px;
}
.webhook-item-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.webhook-item-name {
  font-weight: 600;
  font-size: 13px;
  color: var(--text-primary);
}
.webhook-item-channel {
  font-size: 12px;
  color: var(--text-muted);
  background: var(--bg-tertiary);
  padding: 1px 6px;
  border-radius: 4px;
}
.webhook-item-status {
  font-size: 11px;
  font-weight: 600;
  margin-left: auto;
}
.webhook-item-status.status-online { color: #2ecc71; }
.webhook-item-status.status-offline { color: #e74c3c; }
.webhook-item-url {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.webhook-url-text {
  font-size: 10px;
  font-family: monospace;
  color: var(--text-muted);
  background: var(--bg-primary);
  padding: 3px 6px;
  border-radius: 4px;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  user-select: all;
}
.webhook-item-actions {
  display: flex;
  gap: 6px;
}
.btn-xs {
  padding: 2px 8px;
  font-size: 11px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}
.btn-xs:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}
/* Win95 overrides for webhook items */
[data-theme="win95"] .webhook-item { background: #bfbfbf; border: 2px inset #808080; border-radius: 0; }
[data-theme="win95"] .webhook-url-text { background: #fff; border: 2px inset #808080; border-radius: 0; color: #000; }
[data-theme="win95"] .btn-xs { background: #bfbfbf; border: 2px outset #fff; border-radius: 0; color: #000; }
[data-theme="win95"] .btn-xs:hover { background: #dfdfdf; }
[data-theme="win95"] .btn-xs:active { border: 2px inset #808080; }

/* ── Collapsible sub-channel toggle arrow ────────────── */
.channel-collapse-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  font-size: 10px;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
  transition: transform 0.15s ease, color 0.15s;
  position: absolute;
  left: 2px;
  top: 50%;
  transform: translateY(-50%);
}
.channel-collapse-arrow:hover {
  color: var(--accent);
}
.channel-collapse-arrow.collapsed {
  transform: translateY(-50%) rotate(-90deg);
}

/* ── Category collapse arrow ──── */
.cat-collapse-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  font-size: 10px;
  color: inherit;
  transition: transform 0.15s ease;
  flex-shrink: 0;
}
.cat-collapse-arrow.collapsed {
  transform: rotate(-90deg);
}

/* ── Role management modal ───────────────────────────── */
.role-editor-layout {
  display: flex;
  gap: 16px;
  min-height: 280px;
  max-height: 60vh;
  margin: 12px 0;
}
.role-sidebar {
  width: 180px;
  border-right: 1px solid var(--border, #333);
  padding-right: 12px;
  flex-shrink: 0;
  overflow-y: auto;
}
.role-list-sidebar {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 100%;
  overflow-y: auto;
}
.role-sidebar-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  transition: background 0.15s;
}
.role-sidebar-item:hover {
  background: rgba(255,255,255,0.06);
}
.role-sidebar-item.active {
  background: var(--accent, #5865f2);
  color: #fff;
}
.role-color-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.role-detail {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding-right: 14px;
}
.role-detail-form {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.role-detail-form .settings-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-muted, #888);
  margin-top: 4px;
}
.role-detail-form .toggle-row {
  font-size: 13px;
  padding: 5px 8px;
  border-radius: var(--radius-sm, 4px);
  transition: background 0.15s;
}
.role-detail-form .toggle-row:hover {
  background: rgba(255,255,255,0.04);
}
.role-detail-form .toggle-row:has(input[type="checkbox"]:checked) {
  background: color-mix(in srgb, var(--accent, #6b4fdb) 12%, transparent);
}

/* ── Role preview in admin settings ──────────────────── */
.role-preview-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  font-size: 13px;
}

/* ═══════════════════════════════════════════════════════════
   DONATE BUTTON
   ═══════════════════════════════════════════════════════════ */

.donate-btn {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  font-size: inherit;
}
.donate-btn:hover {
  filter: brightness(1.2);
}

/* ═══════════════════════════════════════════════════════════
   DONORS THANK YOU MODAL
   ═══════════════════════════════════════════════════════════ */

.donors-modal-box {
  position: relative;
  max-width: 500px;
  width: 92%;
  max-height: 80vh;
  padding: 36px 32px 28px;
  text-align: center;
  border-radius: 16px;
  background: var(--bg-secondary, #2b2d31);
  box-shadow: 0 8px 32px rgba(0,0,0,.45);
  animation: donorsSlideIn .3s ease;
  overflow-y: auto;
}

@keyframes donorsSlideIn {
  from { opacity: 0; transform: translateY(20px) scale(.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.donors-close-btn {
  position: absolute;
  top: 12px;
  right: 16px;
  background: none;
  border: none;
  color: var(--text-muted, #888);
  font-size: 22px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  line-height: 1;
  transition: color .15s, background .15s;
}
.donors-close-btn:hover {
  color: var(--text-primary, #fff);
  background: rgba(255,255,255,.08);
}

.donors-heart-icon {
  font-size: 48px;
  margin-bottom: 8px;
  animation: donorsPulse 1.5s ease-in-out infinite;
}

@keyframes donorsPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.12); }
}

.donors-title {
  font-size: 26px;
  font-weight: 700;
  color: var(--text-primary, #fff);
  margin: 0 0 8px;
}

.donors-subtitle {
  color: var(--text-muted, #aaa);
  font-size: 13.5px;
  line-height: 1.5;
  margin: 0 0 20px;
  padding: 0 8px;
}

.donors-tiers {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 4px;
}

.donors-tier {
  display: flex;
  flex-direction: column;
  text-align: center;
}

/* Section-divider label: thin rules on each side of the title */
.donors-tier-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  /* Space below title, above the card */
  margin: 0 0 10px;
  /* Never shrink — stays above the scroll box */
  flex-shrink: 0;
}
.donors-tier-title::before,
.donors-tier-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,.1);
}
.donors-sponsor-title { color: #f8c53a; }
.donors-donor-title   { color: #f0a040; }

/* The card lives on the grid, not the tier wrapper.
   max-height triggers a scroll bar once names fill the box;
   the title above is never inside the scroll area so it's always visible. */
.donors-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: flex-start;
  gap: 8px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 10px;
  padding: 14px 14px;
  max-height: 140px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.15) transparent;
}

.donor-chip {
  background: rgba(255,255,255,.06);
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 13px;
  color: var(--text-primary, #ddd);
  border: 1px solid rgba(255,255,255,.08);
  transition: background .15s, border-color .15s;
}
.donor-chip:hover {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.15);
}
.donor-chip.donor-sponsor {
  border-color: rgba(248,197,58,.3);
  background: rgba(248,197,58,.08);
  color: #f8c53a;
  font-weight: 600;
}

.donors-note {
  color: var(--text-muted, #777);
  font-size: 11.5px;
  margin: 14px 0 18px;
  font-style: italic;
}

.donors-sort-toggle {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin: 10px 0 6px;
}
.donors-sort-btn {
  padding: 5px 14px;
  border-radius: 8px;
  border: 1px solid var(--border-color, #444);
  background: transparent;
  color: var(--text-muted, #999);
  font-size: 12px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.donors-sort-btn:hover {
  background: var(--bg-hover, rgba(255,255,255,.06));
}
.donors-sort-btn.active {
  background: var(--accent-color, #5865f2);
  color: #fff;
  border-color: transparent;
}

.donors-kofi-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 24px;
  border-radius: 10px;
  background: linear-gradient(135deg, #ff5e5b 0%, #e24444 100%);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: transform .15s, box-shadow .15s;
  box-shadow: 0 3px 12px rgba(226,68,68,.35);
}
.donors-kofi-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(226,68,68,.45);
}

/* ═══════════════════════════════════════════════════════════
   LAYOUT DENSITY PICKER
   ═══════════════════════════════════════════════════════════ */

.density-picker {
  display: flex;
  gap: 8px;
  padding: 8px 0;
}

.density-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 8px;
  background: var(--bg-primary);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s;
  font-size: 12px;
}
.density-btn:hover {
  background: var(--bg-hover);
  border-color: var(--text-muted);
}
.density-btn.active {
  border-color: var(--accent);
  color: var(--text-primary);
  background: var(--bg-hover);
}
.density-icon { font-size: 18px; }
.density-label { font-weight: 600; }

/* ── Compact density ─────────────────────────────────── */
[data-density="compact"] .message-row {
  padding: 2px 8px;
  gap: 8px;
}
[data-density="compact"] .message-avatar,
[data-density="compact"] .message-avatar-img {
  width: 28px;
  height: 28px;
  font-size: 11px;
}
[data-density="compact"] .message-compact {
  padding-left: 44px;
}
[data-density="compact"] .message-compact .compact-time {
  font-size: 9px;
}
[data-density="compact"] .message-content {
  font-size: 13px;
}
[data-density="compact"] .message-author {
  font-size: 12px;
}
[data-density="compact"] .message-time {
  font-size: 10px;
}

/* ── Spacious density ────────────────────────────────── */
[data-density="spacious"] .message-row {
  padding: 8px 12px;
  gap: 14px;
}
[data-density="spacious"] .message-avatar,
[data-density="spacious"] .message-avatar-img {
  width: 44px;
  height: 44px;
  font-size: 17px;
}
[data-density="spacious"] .message-content {
  font-size: 15px;
  line-height: 1.5;
}
[data-density="spacious"] .message-author {
  font-size: 14px;
}

/* ═══════════════════════════════════════════════════════════
   FONT SIZE SCALING
   ═══════════════════════════════════════════════════════════ */

.font-size-picker {
  display: flex;
  gap: 8px;
  padding: 8px 0;
}

/* Small — 11 px base (noticeably smaller) */
[data-fontsize="small"] .message-content     { font-size: 11px; line-height: 1.35; }
[data-fontsize="small"] .message-author      { font-size: 11px; }
[data-fontsize="small"] .message-time        { font-size: 8.5px; }
[data-fontsize="small"] .message-input       { font-size: 11px; }
[data-fontsize="small"] .channel-item span,
[data-fontsize="small"] .ch-name             { font-size: 11px; }
[data-fontsize="small"] .user-list-item span { font-size: 11px; }
[data-fontsize="small"] .sidebar-title       { font-size: 9px; }
[data-fontsize="small"] .user-item-name      { font-size: 11px; }
[data-fontsize="small"] .section-label        { font-size: 9px; }
[data-fontsize="small"] .panel-title          { font-size: 9px; }
[data-fontsize="small"] .current-user         { font-size: 11px; }
[data-fontsize="small"] .login-name           { font-size: 8.5px; }
[data-fontsize="small"] .settings-section-title { font-size: 11px; }
[data-fontsize="small"] .settings-section-subtitle { font-size: 10.5px; }
[data-fontsize="small"] .muted-text           { font-size: 10px; }
[data-fontsize="small"] .channel-info         { font-size: 11px; }
[data-fontsize="small"] .density-label        { font-size: 10px; }
[data-fontsize="small"] .modal-body,
[data-fontsize="small"] .modal-title          { font-size: 11px; }
[data-fontsize="small"] .toast                { font-size: 11px; }
[data-fontsize="small"] .inline-code,
[data-fontsize="small"] code                  { font-size: 10.5px; }
[data-fontsize="small"] .compact-time         { font-size: 8px; }
/* .message-compact .message-content intentionally not overridden — inherits same size
   as full messages so all message text stays uniform across grouped and root messages. */

/* Normal — 14 px base (default, no overrides needed) */

/* Large — 18 px base (clearly bigger) */
[data-fontsize="large"] .message-content     { font-size: 18px; line-height: 1.55; }
[data-fontsize="large"] .message-author      { font-size: 16px; }
[data-fontsize="large"] .message-time        { font-size: 12.5px; }
[data-fontsize="large"] .message-input       { font-size: 17px; }
[data-fontsize="large"] .channel-item span,
[data-fontsize="large"] .ch-name             { font-size: 16px; }
[data-fontsize="large"] .user-list-item span { font-size: 16px; }
[data-fontsize="large"] .sidebar-title       { font-size: 13px; }
[data-fontsize="large"] .user-item-name      { font-size: 16px; }
[data-fontsize="large"] .section-label        { font-size: 13px; }
[data-fontsize="large"] .panel-title          { font-size: 13px; }
[data-fontsize="large"] .current-user         { font-size: 16px; }
[data-fontsize="large"] .login-name           { font-size: 12px; }
[data-fontsize="large"] .settings-section-title { font-size: 17px; }
[data-fontsize="large"] .settings-section-subtitle { font-size: 15px; }
[data-fontsize="large"] .muted-text           { font-size: 15px; }
[data-fontsize="large"] .channel-info         { font-size: 16px; }
[data-fontsize="large"] .density-label        { font-size: 14px; }
[data-fontsize="large"] .modal-body,
[data-fontsize="large"] .modal-title          { font-size: 17px; }
[data-fontsize="large"] .toast                { font-size: 16px; }
[data-fontsize="large"] .inline-code,
[data-fontsize="large"] code                  { font-size: 16px; }
[data-fontsize="large"] .message-input-area   { min-height: 48px; }
[data-fontsize="large"] .compact-time         { font-size: 11px; }


/* X-Large — 22 px base (very large, high visibility) */
[data-fontsize="x-large"] .message-content     { font-size: 22px; line-height: 1.6; }
[data-fontsize="x-large"] .message-author      { font-size: 19px; }
[data-fontsize="x-large"] .message-time        { font-size: 14px; }
[data-fontsize="x-large"] .message-input       { font-size: 21px; }
[data-fontsize="x-large"] .channel-item span,
[data-fontsize="x-large"] .ch-name             { font-size: 19px; }
[data-fontsize="x-large"] .user-list-item span { font-size: 19px; }
[data-fontsize="x-large"] .sidebar-title       { font-size: 15px; }
[data-fontsize="x-large"] .message-input-area  { min-height: 56px; }
[data-fontsize="x-large"] .user-item-name      { font-size: 19px; }
[data-fontsize="x-large"] .section-label        { font-size: 15px; }
[data-fontsize="x-large"] .panel-title          { font-size: 15px; }
[data-fontsize="x-large"] .current-user         { font-size: 19px; }
[data-fontsize="x-large"] .login-name           { font-size: 14px; }
[data-fontsize="x-large"] .settings-section-title { font-size: 20px; }
[data-fontsize="x-large"] .settings-section-subtitle { font-size: 18px; }
[data-fontsize="x-large"] .muted-text           { font-size: 17px; }
[data-fontsize="x-large"] .channel-info         { font-size: 19px; }
[data-fontsize="x-large"] .density-label        { font-size: 16px; }
[data-fontsize="x-large"] .modal-body,
[data-fontsize="x-large"] .modal-title          { font-size: 21px; }
[data-fontsize="x-large"] .toast                { font-size: 19px; }
[data-fontsize="x-large"] .inline-code,
[data-fontsize="x-large"] code                  { font-size: 19px; }
[data-fontsize="x-large"] .compact-time         { font-size: 12.5px; }


/* ── Font Size: Settings / Sub-menus ─────────────────────── */

/* Small */
[data-fontsize="small"] .settings-hint          { font-size: 8.5px; }
[data-fontsize="small"] .settings-nav-item      { font-size: 10px; }
[data-fontsize="small"] .settings-nav-group     { font-size: 8.5px; }
[data-fontsize="small"] .btn-sm                 { font-size: 10px; }
[data-fontsize="small"] .btn-sm.btn-accent,
[data-fontsize="small"] .btn-sm.btn-danger      { font-size: 13px; }
[data-fontsize="small"] .toggle-row,
[data-fontsize="small"] .volume-row,
[data-fontsize="small"] .select-row             { font-size: 10px; }
[data-fontsize="small"] .select-row select      { font-size: 9.5px; }
[data-fontsize="small"] .settings-text-input    { font-size: 11px; }
[data-fontsize="small"] .settings-number-input  { font-size: 10px; }
[data-fontsize="small"] .custom-sound-name      { font-size: 11px; }
[data-fontsize="small"] .password-change-form input { font-size: 11px; }
[data-fontsize="small"] .status-bar             { font-size: 10px; }
[data-fontsize="small"] .status-bar .label,
[data-fontsize="small"] .status-bar .value      { font-size: 10px; }
[data-fontsize="small"] .context-menu           { font-size: 11px; }
[data-fontsize="small"] .online-overlay-title   { font-size: 9px; }

/* Large */
[data-fontsize="large"] .settings-hint          { font-size: 13px; }
[data-fontsize="large"] .settings-nav-item      { font-size: 15px; }
[data-fontsize="large"] .settings-nav-group     { font-size: 12px; }
[data-fontsize="large"] .btn-sm                 { font-size: 15px; }
[data-fontsize="large"] .btn-sm.btn-accent,
[data-fontsize="large"] .btn-sm.btn-danger      { font-size: 18px; }
[data-fontsize="large"] .toggle-row,
[data-fontsize="large"] .volume-row,
[data-fontsize="large"] .select-row             { font-size: 15px; }
[data-fontsize="large"] .select-row select      { font-size: 14px; }
[data-fontsize="large"] .settings-text-input    { font-size: 16px; }
[data-fontsize="large"] .settings-number-input  { font-size: 15px; }
[data-fontsize="large"] .custom-sound-name      { font-size: 16px; }
[data-fontsize="large"] .password-change-form input { font-size: 16px; }
[data-fontsize="large"] .status-bar             { font-size: 14px; }
[data-fontsize="large"] .status-bar .label,
[data-fontsize="large"] .status-bar .value      { font-size: 14px; }
[data-fontsize="large"] .context-menu           { font-size: 16px; }
[data-fontsize="large"] .online-overlay-title   { font-size: 14px; }

/* X-Large */
[data-fontsize="x-large"] .settings-hint          { font-size: 15px; }
[data-fontsize="x-large"] .settings-nav-item      { font-size: 17px; }
[data-fontsize="x-large"] .settings-nav-group     { font-size: 14px; }
[data-fontsize="x-large"] .btn-sm                 { font-size: 17px; }
[data-fontsize="x-large"] .btn-sm.btn-accent,
[data-fontsize="x-large"] .btn-sm.btn-danger      { font-size: 21px; }
[data-fontsize="x-large"] .toggle-row,
[data-fontsize="x-large"] .volume-row,
[data-fontsize="x-large"] .select-row             { font-size: 17px; }
[data-fontsize="x-large"] .select-row select      { font-size: 16px; }
[data-fontsize="x-large"] .settings-text-input    { font-size: 19px; }
[data-fontsize="x-large"] .settings-number-input  { font-size: 17px; }
[data-fontsize="x-large"] .custom-sound-name      { font-size: 19px; }
[data-fontsize="x-large"] .password-change-form input { font-size: 19px; }
[data-fontsize="x-large"] .status-bar             { font-size: 16px; }
[data-fontsize="x-large"] .status-bar .label,
[data-fontsize="x-large"] .status-bar .value      { font-size: 16px; }
[data-fontsize="x-large"] .context-menu           { font-size: 19px; }
[data-fontsize="x-large"] .online-overlay-title   { font-size: 16px; }

/* ═══════════════════════════════════════════════════════════
   ONLINE OVERLAY
   ═══════════════════════════════════════════════════════════ */

.status-online-trigger {
  cursor: pointer;
  border-radius: 4px;
  padding: 2px 6px;
  margin: -2px -6px;
  transition: background 0.15s;
}
.status-online-trigger:hover {
  background: rgba(255,255,255,0.08);
}

.online-overlay {
  position: fixed;
  z-index: 9999;
  width: 220px;
  max-height: 350px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 -4px 24px rgba(0,0,0,0.4);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.online-overlay-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
}
.online-overlay-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
}

.online-overlay-list {
  overflow-y: auto;
  padding: 6px 0;
  max-height: 300px;
}

.online-overlay-group {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  padding: 6px 12px 4px;
}
.online-overlay-group.offline {
  opacity: 0.6;
}

.online-overlay-user {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  font-size: 13px;
}
.online-overlay-user.offline {
  opacity: 0.45;
}
.online-overlay-user:hover {
  background: rgba(255,255,255,0.04);
}

.online-overlay-avatar,
.online-overlay-avatar-img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
}
.online-overlay-avatar-img {
  object-fit: cover;
}

.online-overlay-username {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
  color: var(--text-primary);
}

.online-overlay-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.online-overlay-status-dot.online { background: #43b581; }
.online-overlay-status-dot.offline { background: #72767d; }

/* ═══════════════════════════════════════════════════════════
   MOD MODE — Layout customisation drag & drop
   ═══════════════════════════════════════════════════════════ */

.sidebar-mod-container {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
}

.mod-mode-active .mod-draggable {
  cursor: move;
  position: relative;
  outline: 1px dashed transparent;
  transition: outline-color 0.15s ease, background-color 0.15s ease;
}

.mod-mode-active .mod-draggable:hover {
  outline-color: var(--accent);
  background: color-mix(in srgb, var(--bg-secondary) 82%, var(--accent) 18%);
}

.mod-mode-active .mod-drag-over {
  outline-color: var(--accent);
}

.mod-mode-active .mod-drop-above::before,
.mod-mode-active .mod-drop-below::after {
  content: '';
  position: absolute;
  left: 10px;
  right: 10px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
}

.mod-mode-active .mod-drop-above::before { top: 2px; }
.mod-mode-active .mod-drop-below::after { bottom: 2px; }

.mod-mode-active .mod-dragging {
  opacity: 0.6;
}

.mod-panel-target {
  position: relative;
}

.mod-panel-handle {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  border: 1px solid var(--border-light);
  background: var(--bg-card);
  color: var(--text-secondary);
  border-radius: 6px;
  cursor: grab;
  z-index: 40;
  font-size: 14px;
  display: none;
}

.mod-mode-on .mod-panel-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mod-panel-handle.dragging {
  cursor: grabbing;
  opacity: 0.8;
}

.mod-snap-zone {
  position: fixed;
  z-index: 9999;
  pointer-events: auto;
  border: 2px dashed var(--accent);
  color: var(--text-primary);
  background: color-mix(in srgb, var(--bg-secondary) 76%, var(--accent) 24%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.mod-snap-zone.active {
  background: color-mix(in srgb, var(--bg-secondary) 56%, var(--accent) 44%);
}

.mod-snap-zone.left { left: 0; top: 0; width: 80px; height: 100vh; }
.mod-snap-zone.right { right: 0; top: 0; width: 80px; height: 100vh; }
.mod-snap-zone.top { left: 0; top: 0; width: 100vw; height: 56px; }
.mod-snap-zone.bottom { left: 0; bottom: 0; width: 100vw; height: 56px; }
.mod-snap-zone.center {
  left: 50%; top: 50%; width: 160px; height: 80px;
  transform: translate(-50%, -50%);
  border-radius: 12px;
}
.mod-snap-zone.right-sidebar {
  right: 0; top: 30%; width: 80px; height: 40vh;
  border-radius: 8px 0 0 8px;
}
.mod-snap-zone.left-sidebar {
  left: 0; top: 30%; width: 80px; height: 40vh;
  border-radius: 0 8px 8px 0;
}

#app[data-status-pos="top"] #status-bar {
  order: -1;
  border-top: none;
  border-bottom: 1px solid var(--border);
}

#app[data-status-pos="bottom"] #status-bar {
  order: 10;
  border-top: 1px solid var(--border);
  border-bottom: none;
}

#app-body .server-bar[data-panel-pos="right"] {
  order: 5;
  border-right: none;
  border-left: 1px solid var(--border);
}

#app-body .sidebar[data-panel-pos="right"] {
  order: 4;
  border-right: none;
  border-left: 1px solid var(--border);
}

#app-body .server-bar[data-panel-pos="left"] { order: 0; }
#app-body .sidebar[data-panel-pos="left"] { order: 1; }
#app-body .main { order: 2; }
#app-body .right-sidebar { order: 3; }

/* Right sidebar — snapped left */
#app-body .right-sidebar[data-panel-pos="left"] {
  order: 1;
  border-left: none;
  border-right: 1px solid var(--border);
}
#app-body .right-sidebar[data-panel-pos="left"] .right-sidebar-resize-handle {
  left: auto; right: -3px;
  cursor: col-resize;
}
#app-body .right-sidebar[data-panel-pos="right"] { order: 3; }

/* Floating panel (center) — any panel */
.mod-float {
  position: fixed !important;
  z-index: 500;
  border-radius: 10px;
  border: 1px solid var(--border-light) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.04);
  resize: both;
  overflow: auto;
}
.right-sidebar.mod-float {
  top: 80px; right: 24px;
  width: 280px; height: 420px;
  max-width: 50vw; max-height: 70vh;
}

.mod-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(12px);
  opacity: 0;
  z-index: 10000;
  background: var(--bg-card);
  color: var(--text-primary);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 12px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.mod-toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

/* ═══════════════════════════════════════════════════════
   SIDEBAR SPLIT — channels + DM panes with drag divider
   ═══════════════════════════════════════════════════════ */

.sidebar-split {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Channels pane (top) */
.sidebar-split .channel-section {
  flex: 1 1 60%;
  min-height: 80px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 8px 16px 0;
  border-bottom: none;
}
.sidebar-split .channel-section .channel-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

/* Collapsible channels header */
.channels-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  transition: color 0.15s;
}
.channels-toggle:hover { color: var(--text-secondary); }
/* Hover on organize buttons inside section headers */
.channels-toggle #organize-channels-btn:hover,
.dm-toggle #organize-dms-btn:hover {
  opacity: 1 !important;
  background: var(--bg-hover);
}
.channels-toggle-arrow {
  display: inline-block;
  transition: transform 0.2s ease;
  font-size: 10px;
}
.channels-toggle-arrow.collapsed {
  transform: rotate(-90deg);
}

/* Drag handle between channels & DMs — blends with natural section border */
.sidebar-split-handle {
  height: 0;
  cursor: row-resize;
  position: relative;
  flex-shrink: 0;
  z-index: 5;
  border-top: 1px solid var(--border);
  margin: 0 12px;
  padding: 4px 0;
  box-sizing: content-box;
  transition: border-color 0.15s;
}

/* ═══════════════════════════════════════════
   POLLS
   ═══════════════════════════════════════════ */

.btn-poll {
  width: 34px;
  height: 34px;
  background: transparent;
  color: var(--text-muted);
  border: none;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
  flex-shrink: 0;
  cursor: pointer;
}
.btn-poll:hover { color: var(--text-primary); background: var(--bg-tertiary); }

/* Poll widget inside messages */
.poll-widget {
  background: var(--bg-secondary, #2b2d31);
  border: 1px solid var(--border, #3f4147);
  border-radius: 8px;
  padding: 12px;
  margin-top: 6px;
  max-width: 400px;
}
.poll-question {
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 8px;
  color: var(--text-primary, #fff);
}
.poll-options {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.poll-option {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-tertiary, #232428);
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 8px 10px;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.15s, background 0.15s;
  color: var(--text-primary, #fff);
  font-size: 0.875rem;
  text-align: left;
  width: 100%;
}
.poll-option:hover {
  border-color: var(--accent, #5865f2);
}
.poll-option.poll-voted {
  border-color: var(--accent, #5865f2);
}
.poll-option-bar {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: var(--accent, #5865f2);
  opacity: 0.15;
  border-radius: 5px;
  transition: width 0.3s ease;
  pointer-events: none;
}
.poll-voted .poll-option-bar {
  opacity: 0.25;
}
.poll-option-text {
  position: relative;
  z-index: 1;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.poll-option-count {
  position: relative;
  z-index: 1;
  margin-left: 8px;
  font-size: 0.8rem;
  color: var(--text-muted, #949ba4);
  white-space: nowrap;
}
.poll-footer {
  margin-top: 8px;
  font-size: 0.75rem;
  color: var(--text-muted, #949ba4);
}
.poll-settings-info {
  display: inline;
  font-size: 0.75rem;
  color: var(--text-muted, #949ba4);
}

/* Poll creation modal */
.poll-options-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.poll-option-row {
  display: flex;
  gap: 6px;
  align-items: center;
}
.poll-option-row .poll-option-input {
  flex: 1;
  padding: 6px 10px;
  background: var(--bg-tertiary, #1e1f22);
  border: 1px solid var(--border, #3f4147);
  border-radius: 4px;
  color: var(--text-primary, #fff);
  font-size: 0.875rem;
}
.poll-option-row .poll-option-input:focus {
  border-color: var(--accent, #5865f2);
  outline: none;
}
.poll-option-remove {
  background: none;
  border: none;
  color: var(--text-muted, #949ba4);
  cursor: pointer;
  font-size: 18px;
  padding: 2px 6px;
  border-radius: 4px;
}
.poll-option-remove:hover {
  color: var(--danger, #ed4245);
  background: rgba(237, 66, 69, 0.1);
}
.poll-settings-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.poll-checkbox-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
  color: var(--text-secondary, #b5bac1);
  cursor: pointer;
}
.poll-checkbox-label input[type="checkbox"] {
  accent-color: var(--accent, #5865f2);
}
.sidebar-split-handle:hover,
.sidebar-split-handle.dragging {
  border-color: var(--accent);
}

/* DM pane (bottom) */
.sidebar-split .dm-section-pane {
  flex: 0 1 40%;
  min-height: 60px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0 16px;
  border-bottom: none;
  transition: flex 0.25s ease, min-height 0.25s ease, opacity 0.2s ease;
}
.dm-list-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 4px 0;
}

/* ─── Collapse arrow positioning override ─────────────── */
/* (moved to main .channel-collapse-arrow block above) */

/* ═══════════════════════════════════════════════════════
   ORGANIZE MODAL — styled
   ═══════════════════════════════════════════════════════ */

.organize-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 8px;
}
.organize-toolbar-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
  flex-shrink: 0;
}
.organize-select {
  padding: 5px 8px;
  border-radius: var(--radius-sm, 6px);
  border: 1px solid var(--border, rgba(255,255,255,0.12));
  background: var(--bg-input, rgba(255,255,255,0.06));
  color: var(--text-primary, #eee);
  font-size: 0.82rem;
  cursor: pointer;
  outline: none;
  min-width: 0;
}
.organize-select:focus { border-color: var(--accent); }
.organize-select option {
  background: var(--bg-secondary, #1e1e2e);
  color: var(--text-primary, #eee);
}

.organize-list {
  border: 1px solid var(--border, rgba(255,255,255,0.1));
  border-radius: 8px;
  max-height: 280px;
  overflow-y: auto;
  margin: 6px 0;
}

.organize-tag-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.5;
  background: rgba(255,255,255,0.02);
  font-weight: 600;
  user-select: none;
}
.organize-tag-header.selected {
  background: rgba(107,79,219,0.22);
  opacity: 1;
  cursor: pointer;
}
.organize-tag-header:hover:not(.selected) {
  background: rgba(255,255,255,0.04);
  opacity: 0.7;
  cursor: pointer;
}
.organize-tag-header .tag-sort-select {
  margin-left: auto;
  padding: 1px 4px;
  font-size: 0.65rem;
  border-radius: 4px;
  border: 1px solid var(--border, rgba(255,255,255,0.1));
  background: var(--bg-input, rgba(255,255,255,0.04));
  color: var(--text-muted);
  cursor: pointer;
  outline: none;
}
.organize-tag-header .tag-sort-select option {
  background: var(--bg-secondary, #1e1e2e);
  color: var(--text-primary, #eee);
}

.organize-item {
  padding: 8px 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: background 0.12s;
}
.organize-item:hover { background: rgba(255,255,255,0.04); }
.organize-item.selected { background: rgba(107,79,219,0.22); }
.organize-item .organize-tag-badge {
  opacity: 0.45;
  font-size: 0.72rem;
  background: rgba(255,255,255,0.07);
  padding: 1px 7px;
  border-radius: 4px;
  flex-shrink: 0;
  white-space: nowrap;
}

.organize-drill-hint {
  font-size: 0.65rem;
  opacity: 0.3;
  flex-shrink: 0;
  margin-left: 2px;
  transition: opacity 0.12s;
}
.organize-has-subs:hover .organize-drill-hint {
  opacity: 0.8;
}
.organize-has-subs {
  cursor: default;
}
.organize-has-subs:hover {
  background: rgba(255,255,255,0.06);
}

.organize-controls {
  display: flex;
  gap: 6px;
  align-items: center;
  margin: 8px 0;
  flex-wrap: wrap;
}
.organize-spacer { flex: 1; min-width: 8px; }
.organize-tag-group {
  display: flex;
  gap: 5px;
  align-items: center;
}
.organize-tag-input {
  width: 110px;
  height: 30px;
  font-size: 0.82rem;
  padding: 4px 10px;
  border-radius: var(--radius-sm, 6px);
  border: 1px solid var(--border, rgba(255,255,255,0.12));
  background: var(--bg-input, rgba(255,255,255,0.06));
  color: var(--text-primary, #eee);
  outline: none;
  transition: border-color 0.15s;
}
.organize-tag-input:focus { border-color: var(--accent); }
.organize-tag-input::placeholder { color: var(--text-muted, #888); opacity: 0.5; }
.organize-tag-btn {
  padding: 5px 8px !important;
  font-size: 0.78rem !important;
}
.organize-tag-btn.danger { color: var(--danger, #ff4444) !important; }

/* Drag handles + drag state for organize modal items and category headers */
.organize-tag-header[draggable="true"],
.organize-item[draggable="true"] {
  cursor: grab;
}
.organize-tag-header[draggable="true"]:active,
.organize-item[draggable="true"]:active { cursor: grabbing; }
.organize-tag-header.org-dragging,
.organize-item.org-dragging {
  opacity: 0.4;
}
.organize-drop-indicator {
  height: 2px;
  background: var(--accent, #7c5cfc);
  margin: 0 6px;
  border-radius: 2px;
  pointer-events: none;
}
.organize-tag-header.org-drop-above {
  box-shadow: inset 0 2px 0 0 var(--accent, #7c5cfc);
}
.organize-tag-header.org-drop-below {
  box-shadow: inset 0 -2px 0 0 var(--accent, #7c5cfc);
}
.organize-tag-drag {
  opacity: 0.45;
  font-size: 0.85rem;
  cursor: grab;
  user-select: none;
  margin-right: 4px;
}

/* ── Audit Log ────────────────────────────────────────── */
.audit-log-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
  flex-wrap: wrap;
}
.audit-log-toolbar select,
.audit-log-toolbar input {
  height: 30px;
  font-size: 0.82rem;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--border, rgba(255,255,255,0.12));
  background: var(--bg-input, rgba(255,255,255,0.06));
  color: var(--text-primary, #eee);
  outline: none;
}
.audit-log-list {
  border: 1px solid var(--border, rgba(255,255,255,0.1));
  border-radius: 8px;
  max-height: 420px;
  overflow-y: auto;
  margin: 6px 0;
  background: var(--bg-secondary, rgba(0,0,0,0.18));
}
.audit-log-row {
  display: flex;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  font-size: 0.85rem;
  align-items: flex-start;
}
.audit-log-row:last-child { border-bottom: none; }
.audit-log-row .audit-icon {
  flex-shrink: 0;
  width: 22px;
  text-align: center;
  opacity: 0.85;
}
.audit-log-row .audit-body {
  flex: 1;
  min-width: 0;
}
.audit-log-row .audit-actor {
  font-weight: 600;
  color: var(--text-primary, #eee);
}
.audit-log-row .audit-action {
  color: var(--text-secondary, #bbb);
}
.audit-log-row .audit-target {
  color: var(--accent, #7c5cfc);
  font-weight: 500;
}
.audit-log-row .audit-meta {
  font-size: 0.72rem;
  color: var(--text-muted, #888);
  margin-top: 2px;
  white-space: nowrap;
}
.audit-log-row .audit-details {
  font-size: 0.75rem;
  color: var(--text-muted, #888);
  margin-top: 3px;
  font-family: var(--font-mono, monospace);
  word-break: break-word;
}
.audit-log-empty {
  padding: 24px;
  text-align: center;
  opacity: 0.5;
  font-size: 0.9rem;
}
.audit-log-load-more {
  display: block;
  margin: 8px auto;
}

/* ── Channel Roles Modal ─────────────────────── */
.channel-roles-layout {
  display: flex;
  gap: 16px;
  max-height: 62vh;
  min-height: 280px;
}
.channel-roles-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  min-height: 0;
}
.channel-roles-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  min-height: 0;
  border-left: 1px solid var(--border, rgba(255,255,255,0.1));
  padding-left: 16px;
}
.channel-roles-section-title {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted, #888);
  margin: 0 0 6px;
  font-weight: 600;
}
.channel-roles-member-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  padding: 2px 0;
}
.channel-roles-member {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm, 6px);
  cursor: pointer;
  transition: background 0.12s;
  user-select: none;
}
.channel-roles-member:hover { background: rgba(255,255,255,0.06); }
.channel-roles-member.selected { background: rgba(var(--accent-rgb, 88,101,242), 0.18); outline: 1px solid var(--accent); }
.channel-roles-member-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg-floating, #333);
  flex-shrink: 0;
  margin-top: 2px;
}
.channel-roles-member-avatar.square { border-radius: 6px; }
.channel-roles-member-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.channel-roles-member-name {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-primary, #eee);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.channel-roles-member-login {
  font-size: 0.72rem;
  color: var(--text-muted, #888);
}
.channel-roles-no-role {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-style: italic;
}
.channel-roles-member-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 3px;
}
.channel-roles-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: 9px;
  background: rgba(255,255,255,0.08);
  color: var(--text-primary, #eee);
  white-space: nowrap;
  position: relative;
}
.channel-roles-badge.badge-admin {
  background: rgba(231,76,60,0.2);
  color: #e74c3c;
}
.channel-roles-badge .badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.channel-roles-badge .badge-scope {
  font-size: 0.6rem;
  opacity: 0.6;
  margin-left: 2px;
}
.channel-roles-badge .revoke-btn {
  cursor: pointer;
  opacity: 0;
  margin-left: 4px;
  font-size: 0.7rem;
  transition: opacity 0.15s;
}
.channel-roles-badge:hover .revoke-btn { opacity: 0.6; }
.channel-roles-badge .revoke-btn:hover { opacity: 1; color: var(--danger, #ff4444); }
.channel-roles-actions {
  border-top: 1px solid var(--border, rgba(255,255,255,0.1));
  padding-top: 10px;
}
.channel-roles-selected-name {
  font-size: 0.88rem;
  margin: 0 0 6px;
  color: var(--text-primary, #eee);
}
.channel-roles-current {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
  min-height: 22px;
}
.channel-roles-assign-row {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}
.channel-roles-assign-row .organize-select { flex: 1; min-width: 120px; }
.channel-roles-no-members {
  text-align: center;
  padding: 24px;
  color: var(--text-muted, #888);
  font-size: 0.88rem;
}

/* ── Channel Roles: Right panel (role config) ─── */
.channel-roles-role-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
  max-height: 150px;
  flex-shrink: 0;
  padding: 2px 0;
}
.channel-roles-role-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: var(--radius-sm, 6px);
  cursor: pointer;
  transition: background 0.12s;
  user-select: none;
  font-size: 0.84rem;
  color: var(--text-primary, #eee);
}
.channel-roles-role-item:hover { background: rgba(255,255,255,0.06); }
.channel-roles-role-item.active {
  background: rgba(var(--accent-rgb, 88,101,242), 0.18);
  outline: 1px solid var(--accent);
}
.channel-roles-role-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.channel-roles-role-level {
  font-size: 0.7rem;
  color: var(--text-muted, #888);
  flex-shrink: 0;
}
.channel-roles-role-detail {
  margin-top: 8px;
  border-top: 1px solid var(--border, rgba(255,255,255,0.1));
  padding-top: 8px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
.cr-role-form {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cr-role-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted, #888);
  font-weight: 600;
  margin-bottom: 2px;
}
.cr-role-inline {
  display: flex;
  gap: 12px;
  align-items: flex-end;
}
.cr-role-inline > div { display: flex; flex-direction: column; gap: 2px; }
.cr-role-perms {
  display: flex;
  flex-direction: column;
  gap: 1px;
  max-height: 180px;
  overflow-y: auto;
  padding: 2px 0;
}
.cr-perm-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 4px;
  font-size: 0.78rem;
  color: var(--text-primary, #eee);
  cursor: pointer;
  border-radius: var(--radius-sm, 4px);
  transition: background 0.1s;
}
.cr-perm-toggle:hover { background: rgba(255,255,255,0.05); }
.cr-perm-toggle input[type="checkbox"] {
  accent-color: var(--accent);
  width: 14px;
  height: 14px;
  cursor: pointer;
}
.cr-role-btns {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

/* ── Channel Roles responsive ─────────────────── */
@media (max-width: 640px) {
  .channel-roles-layout {
    flex-direction: column;
    max-height: 70vh;
  }
  .channel-roles-right {
    border-left: none;
    border-top: 1px solid var(--border, rgba(255,255,255,0.1));
    padding-left: 0;
    padding-top: 12px;
  }
}

/* ── Assign Role Modal ───────────────────────────── */
.assign-role-field-label {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted, #888);
  font-weight: 600;
  margin-bottom: 4px;
}
.assign-role-hint {
  font-size: 0.75rem;
  color: var(--text-muted, #888);
  margin: 0 0 6px;
  opacity: 0.7;
  line-height: 1.3;
}
.assign-role-select {
  width: 100%;
  padding: 8px 10px;
  font-size: 0.88rem;
}
.assign-role-select option {
  padding: 4px 8px;
}

/* ── Settings Group Card ─────────────────────────── */
.settings-group {
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
}
.settings-group-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

/* ── Server Icon Upload (admin settings) ─────────── */
.server-icon-upload-area {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.server-icon-preview {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: var(--bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  border: 2px solid var(--border);
}
.server-icon-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.server-icon-preview .server-icon-text {
  font-size: 22px;
  color: var(--accent);
}
.server-icon-upload-controls {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}
.server-bar .server-icon.home img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

/* ── Server Banner Upload (admin settings) ─────────── */
.server-banner-upload-area {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}
.server-banner-preview {
  width: 200px;
  max-width: 100%;
  height: 60px;
  border-radius: 8px;
  background: var(--bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  border: 2px solid var(--border);
}
.server-banner-upload-controls {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

/* ── Server Banner Display (always behind all content) ─── */
.server-banner-display {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 180px;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.server-banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 0%;
  display: block;
  opacity: 0.8;
}
/* Gradient fade at the bottom */
.server-banner-display::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(to bottom, transparent, var(--bg-primary));
  pointer-events: none;
}

/* Banner visible — base: header & topic above banner */
.main.has-banner .channel-header,
.main.has-banner .channel-topic-bar {
  position: relative;
  z-index: 1;
}

/* ── Full Header (default): opaque backgrounds ─── */
.main.has-banner .channel-header {
  background: var(--bg-primary);
}
.main.has-banner .channel-topic-bar {
  background: var(--bg-secondary);
}

/* ── Shaded Header: translucent dark tint ─── */
.main.banner-mode-shaded .channel-header {
  background: rgba(0,0,0,0.45) !important;
  border-bottom-color: transparent !important;
}
.main.banner-mode-shaded .channel-topic-bar {
  background: rgba(0,0,0,0.35) !important;
  border-bottom-color: transparent !important;
}
.main.banner-mode-shaded .channel-header,
.main.banner-mode-shaded .channel-topic-bar {
  text-shadow: 0 1px 4px rgba(0,0,0,0.7);
}
.main.banner-mode-shaded .header-actions-box {
  background: rgba(0,0,0,0.35);
  border-color: rgba(255,255,255,0.12);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* ── Minimal Header: transparent bar, pill backgrounds on elements ─── */
.main.banner-mode-minimal .channel-header {
  background: transparent !important;
  border-bottom-color: transparent !important;
}
.main.banner-mode-minimal .channel-topic-bar {
  background: transparent !important;
  border-bottom-color: transparent !important;
}
.main.banner-mode-minimal .channel-header,
.main.banner-mode-minimal .channel-topic-bar {
  text-shadow: 0 1px 4px rgba(0,0,0,0.7);
}
.main.banner-mode-minimal .channel-info {
  background: rgba(0,0,0,0.35);
  border-radius: 8px;
  padding: 4px 10px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.main.banner-mode-minimal .header-actions-box {
  background: rgba(0,0,0,0.35);
  border-color: rgba(255,255,255,0.12);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.main.banner-mode-minimal .btn-voice,
.main.banner-mode-minimal .voice-active-indicator {
  background: rgba(0,0,0,0.35);
  border-radius: 8px;
  padding: 4px 10px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  text-shadow: none;
}
.main.banner-mode-minimal .channel-topic-bar {
  margin: 0 12px;
  border-radius: 0 0 8px 8px;
  padding: 3px 12px;
  background: rgba(0,0,0,0.3) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: inline-block;
  width: auto;
}

/* ── Transparent Header: fully clear, no shading ─── */
.main.banner-mode-transparent .channel-header {
  background: transparent !important;
  border-bottom-color: transparent !important;
}
.main.banner-mode-transparent .channel-topic-bar {
  background: transparent !important;
  border-bottom-color: transparent !important;
}
.main.banner-mode-transparent .channel-header,
.main.banner-mode-transparent .channel-topic-bar {
  text-shadow: 0 1px 4px rgba(0,0,0,0.7);
}
.main.banner-mode-transparent .header-actions-box {
  background: transparent;
  border-color: transparent;
}

/* ── Shared overlay-mode overrides (shaded/minimal/transparent) ─── */
.main.banner-mode-shaded .channel-code-tag,
.main.banner-mode-minimal .channel-code-tag,
.main.banner-mode-transparent .channel-code-tag {
  text-shadow: none;
}
.main.banner-mode-shaded .update-banner,
.main.banner-mode-shaded .desktop-app-banner,
.main.banner-mode-shaded .android-beta-banner,
.main.banner-mode-minimal .update-banner,
.main.banner-mode-minimal .desktop-app-banner,
.main.banner-mode-minimal .android-beta-banner,
.main.banner-mode-transparent .update-banner,
.main.banner-mode-transparent .desktop-app-banner,
.main.banner-mode-transparent .android-beta-banner {
  text-shadow: none;
}

/* ── Role Icons ────────────────────────────────────── */
.role-icon {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  object-fit: cover;
  vertical-align: middle;
  margin-right: 2px;
  flex-shrink: 0;
}
.role-icon-preview {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  object-fit: cover;
  border: 1px solid var(--border);
}
.role-icon-upload-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

/* ── Discord Import ────────────────────────────────── */
.import-format-info {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 12px;
  margin-bottom: 12px;
  font-size: 12px;
}
.import-format-row { margin: 3px 0; }
.import-dropzone {
  border: 2px dashed var(--border);
  border-radius: 8px;
  padding: 32px 16px;
  text-align: center;
  cursor: pointer;
  transition: border-color .2s, background .2s;
}
.import-dropzone:hover,
.import-dropzone.drag-over {
  border-color: var(--accent-color, #5865f2);
  background: color-mix(in srgb, var(--accent-color, #5865f2) 8%, transparent);
}
.import-dropzone-content { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.import-dropzone-icon { font-size: 28px; }
.import-dropzone a { color: var(--accent-color, #5865f2); text-decoration: underline; }
.import-progress-bar {
  height: 6px;
  background: var(--bg-secondary);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 10px;
}
.import-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--accent-color, #5865f2);
  border-radius: 3px;
  transition: width .3s;
}
.import-info-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
}
.import-format-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 3px;
  background: #5865f2;
  color: #fff;
  letter-spacing: .3px;
}
.import-format-badge.official { background: #57f287; color: #000; }
.import-channel-list {
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-top: 8px;
}
.import-channel-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.import-channel-row:last-child { border-bottom: none; }
.import-channel-row label { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; cursor: pointer; }
.import-channel-row .import-ch-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.import-channel-row .import-ch-name input[type="text"] {
  width: 100%;
  padding: 2px 6px;
  font-size: 12px;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-primary);
}
.import-channel-row .import-ch-count {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Import modal tabs */
.import-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.import-tab {
  background: none;
  border: none;
  padding: 6px 14px;
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .2s, border-color .2s;
}
.import-tab:hover { color: var(--text-primary); }
.import-tab.active {
  color: var(--accent-color, #5865f2);
  border-bottom-color: var(--accent-color, #5865f2);
}
.import-token-input {
  flex: 1;
  padding: 6px 10px;
  font-size: 12px;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-primary);
  font-family: monospace;
}
.import-token-help { margin-top: 8px; font-size: 12px; }
.import-token-help summary {
  cursor: pointer;
  color: var(--text-muted);
  font-size: 11px;
}
.import-token-help summary:hover { color: var(--text-primary); }
.import-token-steps {
  margin-top: 8px;
  padding: 10px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 11px;
  line-height: 1.5;
}
.import-token-steps ol { padding-left: 18px; margin: 4px 0; }
.import-token-steps kbd {
  padding: 1px 5px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--bg-primary);
  font-size: 10px;
}
.import-token-snippet {
  display: block;
  padding: 6px 8px;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 10px;
  word-break: break-all;
  user-select: all;
  margin-top: 4px;
}
.import-server-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
  max-height: 280px;
  overflow-y: auto;
}
.import-server-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color .2s, background .2s;
  text-align: left;
  color: var(--text-primary);
  font-size: 12px;
}
.import-server-card:hover {
  border-color: var(--accent-color, #5865f2);
  background: color-mix(in srgb, var(--accent-color, #5865f2) 8%, var(--bg-secondary));
}
.import-server-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
}
.import-server-icon-placeholder {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.import-server-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.import-channel-category {
  padding: 6px 10px 3px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}
.import-thread-row {
  padding-left: 28px;
  background: color-mix(in srgb, var(--bg-secondary) 40%, transparent);
}
.import-type-badge {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  opacity: 0.6;
}

/* DISCORD badge for imported messages */
.discord-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 1px 5px;
  border-radius: 3px;
  background: #5865f2;
  color: #fff;
  vertical-align: middle;
  margin-left: 4px;
}
.imported-message .message-avatar {
  border: 2px solid #5865f2;
}

/* ═══════════════════════════════════════════════════════════
   Centralized Role Assignment — 3-Pane Modal (RAC)
   ═══════════════════════════════════════════════════════════ */
.role-assign-center-box {
  max-width: 960px !important;
  width: 94vw;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}
.role-assign-center-subtitle {
  font-size: 0.82rem;
  margin-bottom: 10px;
}

/* Three-pane layout */
.rac-layout {
  display: flex;
  gap: 1px;
  background: var(--border-light, #333);
  border: 1px solid var(--border-light, #333);
  border-radius: 8px;
  overflow: hidden;
  flex: 1;
  min-height: 340px;
  max-height: 55vh;
}
.rac-pane {
  display: flex;
  flex-direction: column;
  background: var(--bg-primary, #1a1a2e);
  overflow: hidden;
}
.rac-users-pane { flex: 0 0 220px; min-width: 180px; }
.rac-channels-pane { flex: 0 0 220px; min-width: 180px; }
.rac-config-pane { flex: 1; min-width: 240px; }

.rac-pane-header {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-light, #333);
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}
.rac-pane-title {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
  color: var(--text-muted, #888);
}
.rac-search {
  width: 100%;
  padding: 5px 8px;
  font-size: 0.82rem;
  border-radius: 4px;
  border: 1px solid var(--border-light, #444);
  background: var(--bg-secondary, #16213e);
  color: var(--text-primary, #e0e0e0);
  outline: none;
}
.rac-search:focus {
  border-color: var(--accent, #6b4fdb);
}
.rac-pane-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
}
.rac-placeholder {
  padding: 20px 12px;
  text-align: center;
  color: var(--text-muted, #888);
  font-size: 0.82rem;
}

/* User items */
.rac-user-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  cursor: pointer;
  transition: background 0.15s;
  font-size: 0.85rem;
}
.rac-user-item:hover { background: rgba(255,255,255,0.04); }
.rac-user-item.active { background: var(--accent, #6b4fdb)22; border-left: 3px solid var(--accent, #6b4fdb); }
.rac-user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}
.rac-user-avatar img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}
.rac-user-info {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.rac-user-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
  color: var(--text-primary, #e0e0e0);
}
.rac-user-level {
  font-size: 0.7rem;
  color: var(--text-muted, #888);
}

/* Channel items */
.rac-channel-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  cursor: pointer;
  transition: background 0.15s;
  font-size: 0.84rem;
  color: var(--text-secondary, #ccc);
}
.rac-channel-item:hover { background: rgba(255,255,255,0.04); }
.rac-channel-item.active { background: var(--accent, #6b4fdb)22; border-left: 3px solid var(--accent, #6b4fdb); }
.rac-channel-item.rac-server-wide {
  font-weight: 600;
  border-bottom: 1px solid var(--border-light, #333);
  padding: 7px 10px;
}
.rac-channel-item.rac-sub {
  padding-left: 26px;
  font-size: 0.8rem;
}
.rac-channel-icon { opacity: 0.5; font-size: 0.8rem; }
.rac-channel-current-role {
  margin-left: auto;
  font-size: 0.68rem;
  padding: 1px 6px;
  border-radius: 3px;
  background: rgba(255,255,255,0.06);
  color: var(--text-muted, #888);
  white-space: nowrap;
}

/* Config pane body */
.rac-config-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
}
.rac-config-section {
  margin-bottom: 14px;
}
.rac-config-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 700;
  color: var(--text-muted, #888);
  margin-bottom: 5px;
}
.rac-config-row {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
}
.rac-level-input {
  width: 70px;
  padding: 5px 8px;
  font-size: 0.88rem;
  border-radius: 4px;
  border: 1px solid var(--border-light, #444);
  background: var(--bg-secondary, #16213e);
  color: var(--text-primary, #e0e0e0);
  text-align: center;
}
.rac-role-select {
  flex: 1;
  padding: 5px 8px;
  font-size: 0.85rem;
  border-radius: 4px;
  border: 1px solid var(--border-light, #444);
  background: var(--bg-secondary, #16213e);
  color: var(--text-primary, #e0e0e0);
}

/* Permissions grid */
.rac-perms-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 12px;
}
.rac-perm-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  padding: 3px 6px;
  color: var(--text-secondary, #ccc);
  border-radius: var(--radius-sm, 4px);
  transition: background 0.15s;
}
.rac-perm-item:hover {
  background: rgba(255,255,255,0.04);
}
.rac-perm-item.checked,
.rac-perm-item:has(input[type="checkbox"]:checked) {
  background: color-mix(in srgb, var(--accent, #6b4fdb) 12%, transparent);
}
.rac-perm-item input[type="checkbox"] {
  accent-color: var(--accent, #6b4fdb);
}
.rac-perm-item.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Current role display in config pane */
.rac-current-role {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 4px;
  background: rgba(255,255,255,0.06);
  font-size: 0.82rem;
  margin-bottom: 10px;
}
.rac-current-role .rac-role-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.rac-changed-badge {
  font-size: 0.68rem;
  padding: 1px 5px;
  border-radius: 3px;
  background: #e67e2244;
  color: #e67e22;
  margin-left: 6px;
  font-weight: 600;
}

/* Footer */
.rac-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.rac-footer-right {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

/* Responsive: stack panes on small screens */
@media (max-width: 700px) {
  .rac-layout {
    flex-direction: column;
    max-height: 60vh;
  }
  .rac-users-pane, .rac-channels-pane {
    flex: 0 0 auto;
    max-height: 150px;
  }
  .rac-config-pane {
    min-height: 200px;
  }
}

/* ═══════════════════════════════════════════════════════════
   MOBILE-SPECIFIC OVERHAUL
   Consolidated fixes for cramped / overflowing mobile UIs
   ═══════════════════════════════════════════════════════════ */

/* ── Fix: Members modal — use horizontal space, not purely vertical ── */
@media (max-width: 600px) {
  /* The modal itself should be near full-width */
  #all-members-modal .modal {
    width: 96vw !important;
    max-width: 96vw !important;
    padding: 14px 10px;
    max-height: 88vh !important;
  }
  #all-members-modal .modal h3 { font-size: 16px; margin-bottom: 2px; }

  /* Member rows: horizontal card, tighter padding */
  .aml-member-row {
    padding: 6px 8px;
    gap: 8px;
    flex-wrap: nowrap;
  }
  .aml-avatar-wrap { width: 30px; height: 30px; }
  .aml-avatar { width: 30px; height: 30px; }
  .aml-avatar-default { font-size: 12px; }
  .aml-status-dot { width: 8px; height: 8px; border-width: 1.5px; }

  .aml-member-name { font-size: 12px; gap: 4px; }
  .aml-login-name { font-size: 10px; }
  .aml-admin-badge, .aml-banned-badge, .aml-new-badge { font-size: 9px; padding: 0px 4px; }

  /* Meta row: keep horizontal flow, don't let it be super vertical */
  .aml-member-meta {
    gap: 4px;
    font-size: 10px;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .aml-role-badge { font-size: 9px; padding: 0px 5px; }
  .aml-member-joined, .aml-member-channels { font-size: 9px; }

  /* Actions: always visible on mobile (no hover), compact */
  .aml-actions {
    opacity: 1;
    gap: 2px;
  }
  .aml-action-btn {
    width: 26px;
    height: 26px;
    font-size: 12px;
  }
}

/* ── Fix: RAC (Role Assignment) modal — less claustrophobic on mobile ── */
@media (max-width: 600px) {
  .role-assign-center-box {
    width: 97vw !important;
    max-width: 97vw !important;
    padding: 12px 8px !important;
    max-height: 90vh !important;
  }
  .role-assign-center-box h3 { font-size: 15px; margin-bottom: 2px; }
  .role-assign-center-subtitle { font-size: 0.72rem; margin-bottom: 6px; }

  .rac-pane-header { padding: 6px 8px; gap: 4px; }
  .rac-pane-title { font-size: 0.65rem; }
  .rac-search { padding: 4px 6px; font-size: 0.78rem; }

  .rac-user-item, .rac-channel-item { padding: 6px 8px; font-size: 0.78rem; }

  /* Perms grid: single column on tiny screens */
  .rac-perms-grid { grid-template-columns: 1fr; gap: 2px 0; }
  .rac-perm-item { font-size: 0.74rem; padding: 2px 0; }

  .rac-footer { flex-wrap: wrap; gap: 6px; }
  .rac-footer .btn-sm { min-height: 36px; font-size: 12px; padding: 6px 10px; }

  /* Config body: more room */
  .rac-config-body { padding: 8px; }
  .rac-level-input { width: 55px; font-size: 0.8rem; }
  .rac-role-select { font-size: 0.78rem; }
}

/* ── Fix: Reaction picker overflow — keep within viewport ── */
@media (max-width: 480px) {
  .reaction-picker {
    position: fixed !important;
    left: 8px !important;
    right: 8px !important;
    top: auto !important;
    bottom: 60px !important;
    width: auto !important;
    max-width: none !important;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px;
    padding: 8px;
    border-radius: 12px;
    z-index: 10001;
  }
  .reaction-pick-btn {
    width: 36px;
    height: 36px;
    font-size: 18px;
  }
  /* Full emoji picker: also fixed to bottom */
  .reaction-full-picker {
    position: fixed !important;
    left: 8px !important;
    right: 8px !important;
    bottom: 60px !important;
    top: auto !important;
    width: auto !important;
    max-width: none !important;
    max-height: 50vh;
    z-index: 10002;
  }
}

/* ── Fix: Wasted space under CHANNELS when collapsed (desktop AND mobile) ── */
.sidebar-section.channel-section {
  transition: padding 0.2s ease;
}

/* When channel-list is hidden (collapsed), shrink the entire section */
.sidebar-section.channel-section:has(.channel-list:empty),
#channels-pane:has(#channel-list[style*="display: none"]),
#channels-pane:has(#channel-list[style*="display:none"]) {
  padding-top: 8px;
  padding-bottom: 0;
}

/* The section-label margin-bottom adds dead space below the toggle */
.channels-toggle {
  margin-bottom: 0 !important;
}

/* When collapsed, the channel-list is display:none — section label no gap */
#channels-pane .section-label {
  margin-bottom: 4px;
}

#channels-pane[style*="flex: 0 0 auto"] .section-label,
#channels-pane[style*="flex:0 0 auto"] .section-label {
  margin-bottom: 0;
}

/* ── Fix: Mobile servers section — compact circular icon instead of dropdown ── */
@media (max-width: 768px) {
  /* Tighten the mobile servers section */
  .mobile-servers-section {
    padding: 4px 16px 4px;
    border-bottom: 1px solid var(--border);
  }
  .mobile-servers-section .section-label {
    margin-bottom: 2px;
    font-size: 10px;
  }
  .mobile-servers-row {
    padding: 3px 0;
    max-height: 44px;
  }
  .mobile-srv-bubble {
    width: 32px;
    height: 32px;
    font-size: 12px;
  }
  .mobile-srv-add-btn {
    width: 32px;
    height: 32px;
    font-size: 16px;
  }

  /* Start servers section collapsed by default on mobile to save space */
  .mobile-servers-section.start-collapsed .mobile-servers-row {
    max-height: 0;
    opacity: 0;
    padding: 0;
  }

  /* Sidebar sections: tighter padding on mobile */
  .sidebar-section { padding: 8px 12px; }
  .sidebar-section.channel-section { padding: 6px 12px 0; }
  .sidebar-split .channel-section { padding: 6px 12px 0; }
  .sidebar-split .dm-section-pane { padding: 0 12px; }

  .section-label { margin-bottom: 4px; font-size: 10px; }

  /* Sidebar header: more compact */
  .sidebar-header { padding: 10px 12px; }
  .brand-text { font-size: 14px; letter-spacing: 2px; }
}


/* ═══════════════════════════════════════════════════════════
   MOBILE ROUND-2 FIXES
   Right sidebar overlap, close-button position, safe-area,
   tap-to-reveal "⋯" toolbar fallback
   ═══════════════════════════════════════════════════════════ */

/* ── Right sidebar: push content below close button on mobile ── */
@media (max-width: 768px) {
  .right-sidebar {
    padding-top: calc(48px + env(safe-area-inset-top, 0px)); /* room for close button + iOS status bar */
  }

  /* Settings panel at bottom needs safe area for Android nav bar */
  .right-sidebar .sidebar-settings-panel {
    padding-bottom: max(env(safe-area-inset-bottom, 0px), 8px);
  }
}

/* ── Modals: safe area padding for Android nav bar ── */
@media (max-width: 600px) {
  .modal {
    padding-bottom: max(env(safe-area-inset-bottom, 0px), 20px) !important;
  }
  #all-members-modal .modal {
    padding-bottom: max(env(safe-area-inset-bottom, 0px), 16px) !important;
  }
}

/* ── Legacy floating "⋯" button (hidden, replaced by per-message .msg-dots-btn) ── */
#msg-more-btn {
  display: none !important;
}

/* ── Per-message "⋯" button (visible on touch devices only) ── */
.msg-dots-btn {
  display: none;            /* hidden on desktop by default */
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 12;
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-card, var(--bg-secondary));
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  -webkit-tap-highlight-color: transparent;
  pointer-events: auto;
  transition: background 0.15s;
  padding: 0;
}
.msg-dots-btn:active {
  background: var(--bg-tertiary);
}
/* Show dots button ONLY on touch/coarse-pointer devices */
@media (pointer: coarse) {
  .message .msg-dots-btn,
  .message-compact .msg-dots-btn {
    display: flex;
  }
  /* Position context: message needs relative */
  .message, .message-compact {
    position: relative;
  }
  /* Ensure compact messages are tall enough that the ⋯ button (28 px)
     doesn't overflow into adjacent rows and cause visual overlap. */
  .message-compact {
    min-height: 32px;
    display: flex;
    align-items: flex-start;
  }
  /* Give message rows right padding so text doesn't flow under the ⋯ button */
  .message .message-row,
  .message-compact {
    padding-right: 38px;
  }
  /* Hide dots button when toolbar is visible (message is selected) */
  .msg-selected .msg-dots-btn {
    display: none !important;
  }
}

/* ── Touch-device selected-message toolbar & timestamp overrides ── */
@media (pointer: coarse) {
  /* ── Selected message: show toolbar inside the message, top-right ──
     Using top: 4px instead of a negative offset keeps the toolbar within
     the .messages scroll container so it is never clipped. */
  .msg-selected .msg-toolbar {
    position: absolute;
    top: 4px;
    right: 4px;
    left: auto;
  }
  .msg-selected {
    position: relative;
  }
  /* Hide the inline compact-time to avoid overlap */
  .msg-selected.message-compact .compact-time {
    display: none !important;
  }
  /* Show timestamp BELOW selected compact messages ONLY
     (regular messages already show time in the header) */
  .msg-selected.message-compact {
    padding-bottom: 22px !important;
  }
  .msg-selected.message-compact::after {
    content: attr(data-time-short);
    display: block;
    position: absolute;
    bottom: 3px;
    left: 8px;
    font-size: 10px;
    color: var(--text-muted);
    opacity: 0.8;
    pointer-events: none;
  }
}

/* ═══════════════════════════════════════════════════════
   Quick Switcher (Ctrl+K)
   ═══════════════════════════════════════════════════════ */

#quick-switcher-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  z-index: 999998;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: min(20vh, 160px);
}
.quick-switcher-box {
  background: var(--bg-secondary, #2b2d31);
  border-radius: var(--radius-lg, 12px);
  width: min(480px, 90vw);
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
  overflow: hidden;
  border: 1px solid var(--border, #3f4147);
}
#quick-switcher-input {
  width: 100%;
  padding: 14px 16px;
  font-size: 15px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border, #3f4147);
  color: var(--text-primary, #dbdee1);
  outline: none;
  box-sizing: border-box;
}
#quick-switcher-input::placeholder { color: var(--text-muted, #949ba4); }
#quick-switcher-results {
  max-height: 340px;
  overflow-y: auto;
  padding: 4px;
}
.quick-switcher-item {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: var(--radius-sm, 6px);
  cursor: pointer;
  color: var(--text-secondary, #b5bac1);
  font-size: 14px;
  gap: 8px;
}
.quick-switcher-item:hover,
.quick-switcher-item.selected {
  background: var(--bg-hover, #35373c);
  color: var(--text-primary, #dbdee1);
}
.qs-badge {
  margin-left: auto;
  background: var(--danger, #ed4245);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 10px;
  min-width: 16px;
  text-align: center;
}

/* ═══════════════════════════════════════════════════════
   Server Notification Dot (Desktop multi-server unreads)
   ═══════════════════════════════════════════════════════ */

.server-icon .server-unread-dot {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 14px;
  height: 14px;
  background: var(--danger, #ed4245);
  border-radius: 50%;
  border: 2px solid var(--bg-secondary, #2b2d31);
  box-shadow: 0 0 0 1px rgba(237, 66, 69, 0.45), 0 0 8px rgba(237, 66, 69, 0.5);
  pointer-events: none;
  display: none;
  z-index: 1;
}
.server-icon .server-unread-dot.active { display: block; }

/* ═══════════════════════════════════════════════════════
   Move Messages (multi-select)
   ═══════════════════════════════════════════════════════ */

/* Selection mode cursor */
.move-selection-mode .messages .message,
.move-selection-mode .messages .message-compact {
  cursor: pointer;
  user-select: none;
}

/* Selected message highlight */
.move-selection-mode .messages .move-selected {
  background: var(--accent-alpha, rgba(88, 101, 242, 0.15));
  border-left: 3px solid var(--accent, #5865f2);
  padding-left: calc(var(--msg-padding-left, 12px) - 3px);
}

/* Dim the toolbar in selection mode (don't need per-message actions) */
.move-selection-mode .msg-toolbar,
.move-selection-mode .msg-dots-btn {
  display: none !important;
}

/* Floating toolbar */
.move-msg-toolbar {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  background: var(--bg-secondary, #2b2d31);
  border: 1px solid var(--border, #3f4147);
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
  z-index: 1000;
  font-size: 14px;
  color: var(--text-primary, #dbdee1);
}
.move-msg-toolbar .btn-sm { min-width: 80px; }
.move-msg-toolbar .btn-sm:disabled { opacity: 0.5; cursor: not-allowed; }

/* Channel picker modal */
.move-msg-channel-list {
  max-height: 300px;
  overflow-y: auto;
  margin: 12px 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.move-msg-channel-item {
  display: block;
  width: 100%;
  padding: 10px 14px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--text-primary, #dbdee1);
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s;
}
.move-msg-channel-item:hover {
  background: var(--bg-hover, #36373d);
}
.move-msg-empty {
  padding: 20px;
  text-align: center;
  color: var(--text-muted, #949ba4);
}