/* ================= VARIANT 1: CLEAN MINIMAL (Light) ================= */
.variant-clean {
  --bg: #fafaf9;
  --bg-2: #f4f4f2;
  --bg-3: #ffffff;
  --fg: #0a0a0f;
  --fg-muted: #737380;
  --line: rgba(10,10,15,0.08);
  --accent: #4F46E5;
  --accent-fg: #ffffff;
  background: var(--bg);
  color: var(--fg);
  font-family: 'Inter', system-ui, sans-serif;
}
.variant-clean .nav-brand { font-family: 'Outfit', 'Inter', sans-serif; font-weight: 700; letter-spacing: -0.02em; }

/* Dark mode for Clean */
.variant-clean.dark {
  --bg: #050507;
  --bg-2: #111118;
  --bg-3: #0A0A0F;
  --fg: #f4f4f5;
  --fg-muted: #8a8a99;
  --line: rgba(255,255,255,0.07);
  --accent: #6D73FF;
  --accent-fg: #ffffff;
}
.variant-clean.dark .app-window { background: var(--bg-3); box-shadow: 0 30px 80px rgba(0,0,0,0.5), 0 0 0 1px var(--line); }
.variant-clean.dark .avatar { background: #1A1A24; color: #DDE0FF; }
.variant-clean.dark .avatar[data-color="violet"] { background: #312E81; color: #C4B5FD; }
.variant-clean.dark .avatar[data-color="amber"] { background: #422e05; color: #fde68a; }
.variant-clean.dark .avatar[data-color="rose"] { background: #4a1d29; color: #fecdd3; }
.variant-clean.dark .avatar[data-color="teal"] { background: #134e4a; color: #99f6e4; }
.variant-clean.dark .bubble.them { border-color: rgba(255,255,255,0.1); }
.variant-clean.dark .bubble.me { background: var(--accent); color: #fff; }
.variant-clean.dark .nav-tab.active { background: var(--accent); }
.variant-clean.dark .reaction.mine { background: var(--accent); }
.variant-clean.dark .composer-btn { background: var(--accent); }
.variant-clean .app-window { background: var(--bg-3); box-shadow: 0 30px 80px rgba(0,0,0,0.08), 0 0 0 1px var(--line); }
.variant-clean .window-bar { background: var(--bg-2); border-bottom: 1px solid var(--line); }
.variant-clean .window-bar .title { color: var(--fg-muted); font-weight: 500; }
.variant-clean .top-nav { border-bottom: 1px solid var(--line); background: var(--bg-3); }
.variant-clean .nav-brand svg { color: #0a0a0a; }
.variant-clean .nav-tab { color: var(--fg-muted); }
.variant-clean .nav-tab:hover { background: var(--bg-2); color: var(--fg); }
.variant-clean .nav-tab.active { background: var(--accent); color: var(--accent-fg); }
.variant-clean .nav-user { border: 1px solid var(--line); }
.variant-clean .chat-list { border-right: 1px solid var(--line); background: var(--bg-3); }
.variant-clean .chat-list-header { border-bottom: 1px solid var(--line); }
.variant-clean .chat-search { background: var(--bg-2); color: var(--fg); }
.variant-clean .chat-item:hover { background: var(--bg-2); }
.variant-clean .chat-item.active { background: var(--bg-2); }
.variant-clean .avatar { background: #e5e5e5; color: #0a0a0a; }
.variant-clean .avatar[data-color="violet"] { background: #ddd6fe; color: #5b21b6; }
.variant-clean .avatar[data-color="amber"] { background: #fde68a; color: #78350f; }
.variant-clean .avatar[data-color="rose"] { background: #fecdd3; color: #881337; }
.variant-clean .avatar[data-color="teal"] { background: #99f6e4; color: #134e4a; }
.variant-clean .chat-header { border-bottom: 1px solid var(--line); }
.variant-clean .icon-btn { color: var(--fg-muted); }
.variant-clean .icon-btn:hover { background: var(--bg-2); color: var(--fg); }
.variant-clean .bubble.me { background: var(--accent); color: var(--accent-fg); border-radius: 18px 18px 4px 18px; }
.variant-clean .bubble.them { background: transparent; color: var(--fg); border: 1px solid var(--line); border-radius: 18px 18px 18px 4px; }
.variant-clean .reaction { background: var(--bg-2); border: 1px solid var(--line); }
.variant-clean .reaction.mine { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.variant-clean .event-pill { background: var(--bg-2); color: var(--fg-muted); }
.variant-clean .composer { border-top: 1px solid var(--line); }
.variant-clean .composer-box { background: var(--bg-2); }
.variant-clean .composer-btn { background: var(--accent); color: var(--accent-fg); }
.variant-clean .presence { border-color: var(--bg-3); }


/* ================= VARIANT 2: PLAYFUL DISCORD-VIBES ================= */
.variant-playful {
  --bg: #1a1625;
  --bg-2: #2a2338;
  --bg-3: #221b30;
  --fg: #f5f3ff;
  --fg-muted: #9691b3;
  --accent: #a78bfa;
  --accent-2: #f472b6;
  --accent-3: #60a5fa;
  background: radial-gradient(ellipse at top left, #3d1a54 0%, #1a1625 50%);
  color: var(--fg);
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
}
.variant-playful .app-window { background: var(--bg-3); }
.variant-playful .window-bar { background: rgba(0,0,0,0.25); }
.variant-playful .window-bar .title { color: #fff; font-weight: 700; font-size: 13px; }
.variant-playful .top-nav { background: linear-gradient(90deg, #2a1a48 0%, #1a1625 100%); border-bottom: 1px solid rgba(255,255,255,0.05); }
.variant-playful .nav-brand { font-size: 18px; background: linear-gradient(135deg, #f472b6, #a78bfa); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.variant-playful .nav-tab { color: var(--fg-muted); font-weight: 600; }
.variant-playful .nav-tab:hover { background: rgba(255,255,255,0.06); color: #fff; }
.variant-playful .nav-tab.active { background: linear-gradient(135deg, #a78bfa, #f472b6); color: #fff; box-shadow: 0 4px 14px rgba(167,139,250,0.4); }
.variant-playful .nav-user { background: rgba(255,255,255,0.05); }
.variant-playful .chat-list { background: rgba(0,0,0,0.15); border-right: 1px solid rgba(255,255,255,0.04); }
.variant-playful .chat-search { background: rgba(0,0,0,0.3); color: #fff; }
.variant-playful .chat-item:hover { background: rgba(255,255,255,0.04); }
.variant-playful .chat-item.active { background: linear-gradient(90deg, rgba(167,139,250,0.2), rgba(244,114,182,0.1)); }
.variant-playful .avatar { background: linear-gradient(135deg, #a78bfa, #f472b6); color: #fff; font-weight: 800; }
.variant-playful .avatar[data-color="teal"] { background: linear-gradient(135deg, #34d399, #60a5fa); }
.variant-playful .avatar[data-color="amber"] { background: linear-gradient(135deg, #fbbf24, #f472b6); }
.variant-playful .avatar[data-color="rose"] { background: linear-gradient(135deg, #fb7185, #a78bfa); }
.variant-playful .avatar[data-color="violet"] { background: linear-gradient(135deg, #a78bfa, #60a5fa); }
.variant-playful .chat-header { background: rgba(0,0,0,0.2); border-bottom: 1px solid rgba(255,255,255,0.05); }
.variant-playful .icon-btn:hover { background: rgba(255,255,255,0.08); }
.variant-playful .messages { background: radial-gradient(ellipse at bottom right, rgba(244,114,182,0.06), transparent 50%); }
.variant-playful .bubble.me { background: linear-gradient(135deg, #a78bfa, #8b5cf6); color: #fff; border-radius: 20px 20px 4px 20px; box-shadow: 0 4px 14px rgba(167,139,250,0.25); }
.variant-playful .bubble.them { background: rgba(255,255,255,0.06); color: #fff; border-radius: 20px 20px 20px 4px; backdrop-filter: blur(10px); }
.variant-playful .reaction { background: rgba(255,255,255,0.08); }
.variant-playful .reaction.mine { background: rgba(167,139,250,0.3); border: 1px solid #a78bfa; }
.variant-playful .event-pill { background: rgba(52,211,153,0.15); color: #34d399; }
.variant-playful .event-pill.rejected { background: rgba(251,113,133,0.15); color: #fb7185; }
.variant-playful .composer { background: rgba(0,0,0,0.2); }
.variant-playful .composer-box { background: rgba(255,255,255,0.06); }
.variant-playful .composer-btn { background: linear-gradient(135deg, #a78bfa, #f472b6); color: #fff; box-shadow: 0 4px 14px rgba(167,139,250,0.4); }
.variant-playful .presence { border-color: var(--bg-3); }


/* ================= VARIANT 3: Y2K GLASSMORPHISM ================= */
.variant-y2k {
  --bg: #0a0a1f;
  --fg: #f8fafc;
  --fg-muted: rgba(248,250,252,0.6);
  --accent: #c7d2fe;
  color: var(--fg);
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  background:
    radial-gradient(ellipse 80% 50% at 20% 20%, rgba(168,85,247,0.4), transparent),
    radial-gradient(ellipse 60% 40% at 80% 80%, rgba(59,130,246,0.35), transparent),
    radial-gradient(ellipse 70% 60% at 50% 50%, rgba(236,72,153,0.2), transparent),
    #0a0a1f;
}
.variant-y2k .app-window {
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 30px 80px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.15);
}
.variant-y2k .window-bar { background: rgba(255,255,255,0.04); border-bottom: 1px solid rgba(255,255,255,0.08); }
.variant-y2k .window-bar .title { color: rgba(255,255,255,0.7); font-weight: 500; letter-spacing: 0.08em; font-size: 11px; text-transform: uppercase; }
.variant-y2k .top-nav { background: rgba(255,255,255,0.02); border-bottom: 1px solid rgba(255,255,255,0.08); }
.variant-y2k .nav-brand { font-weight: 700; letter-spacing: -0.03em; font-size: 18px; }
.variant-y2k .nav-tab {
  color: var(--fg-muted);
  font-weight: 500;
  border: 1px solid transparent;
}
.variant-y2k .nav-tab:hover { background: rgba(255,255,255,0.06); color: #fff; border-color: rgba(255,255,255,0.1); }
.variant-y2k .nav-tab.active {
  background: rgba(255,255,255,0.15);
  color: #fff;
  border-color: rgba(255,255,255,0.25);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
}
.variant-y2k .nav-user { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); }
.variant-y2k .chat-list { background: rgba(255,255,255,0.02); border-right: 1px solid rgba(255,255,255,0.08); }
.variant-y2k .chat-search { background: rgba(255,255,255,0.06); color: #fff; border: 1px solid rgba(255,255,255,0.08); }
.variant-y2k .chat-item:hover { background: rgba(255,255,255,0.05); }
.variant-y2k .chat-item.active {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.variant-y2k .avatar {
  background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
  color: #312e81;
  border: 1px solid rgba(255,255,255,0.3);
}
.variant-y2k .avatar[data-color="violet"] { background: linear-gradient(135deg, #e9d5ff, #c4b5fd); color: #4c1d95; }
.variant-y2k .avatar[data-color="rose"] { background: linear-gradient(135deg, #fecdd3, #f9a8d4); color: #831843; }
.variant-y2k .avatar[data-color="teal"] { background: linear-gradient(135deg, #a7f3d0, #7dd3fc); color: #064e3b; }
.variant-y2k .avatar[data-color="amber"] { background: linear-gradient(135deg, #fde68a, #fdba74); color: #7c2d12; }
.variant-y2k .chat-header { background: rgba(255,255,255,0.02); border-bottom: 1px solid rgba(255,255,255,0.08); }
.variant-y2k .icon-btn:hover { background: rgba(255,255,255,0.08); }
.variant-y2k .bubble.me {
  background: linear-gradient(135deg, rgba(199,210,254,0.9), rgba(196,181,253,0.8));
  color: #1e1b4b;
  border-radius: 20px 20px 6px 20px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 4px 14px rgba(124,58,237,0.2);
}
.variant-y2k .bubble.them {
  background: rgba(255,255,255,0.08);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 20px 20px 20px 6px;
  backdrop-filter: blur(20px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.variant-y2k .reaction { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.1); backdrop-filter: blur(10px); }
.variant-y2k .reaction.mine { background: rgba(199,210,254,0.25); border-color: rgba(199,210,254,0.5); }
.variant-y2k .event-pill { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.8); border: 1px solid rgba(255,255,255,0.1); backdrop-filter: blur(10px); }
.variant-y2k .event-pill.rejected { background: rgba(251,113,133,0.15); color: #fda4af; border-color: rgba(251,113,133,0.3); }
.variant-y2k .composer { background: rgba(255,255,255,0.02); border-top: 1px solid rgba(255,255,255,0.08); }
.variant-y2k .composer-box { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); backdrop-filter: blur(10px); }
.variant-y2k .composer-btn { background: linear-gradient(135deg, #e0e7ff, #c4b5fd); color: #312e81; border: 1px solid rgba(255,255,255,0.3); box-shadow: inset 0 1px 0 rgba(255,255,255,0.4); }
.variant-y2k .presence { border-color: #0a0a1f; }


/* ================= VARIANT 4: CYBERPUNK NEON ================= */
.variant-cyber {
  --bg: #05050a;
  --fg: #e0e0e8;
  --fg-muted: #6b7280;
  --neon-cyan: #00f0ff;
  --neon-magenta: #ff00aa;
  --neon-lime: #b6ff3d;
  color: var(--fg);
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  background:
    repeating-linear-gradient(0deg, transparent 0, transparent 2px, rgba(0,240,255,0.015) 2px, rgba(0,240,255,0.015) 4px),
    radial-gradient(ellipse at center, #0c0c18 0%, #05050a 70%);
}
.variant-cyber .app-window {
  background: #08080f;
  border: 1px solid rgba(0,240,255,0.2);
  box-shadow: 0 0 40px rgba(255,0,170,0.15), 0 0 80px rgba(0,240,255,0.08);
}
.variant-cyber .window-bar { background: #05050a; border-bottom: 1px solid rgba(0,240,255,0.15); }
.variant-cyber .window-bar .title { color: var(--neon-cyan); font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; }
.variant-cyber .window-bar .title::before { content: "// "; opacity: 0.5; }
.variant-cyber .top-nav { background: #05050a; border-bottom: 1px solid rgba(0,240,255,0.15); }
.variant-cyber .nav-brand { color: var(--neon-cyan); text-transform: uppercase; letter-spacing: 0.1em; font-size: 13px; text-shadow: 0 0 10px rgba(0,240,255,0.5); }
.variant-cyber .nav-tab { color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.1em; font-size: 11px; font-weight: 500; border: 1px solid transparent; }
.variant-cyber .nav-tab:hover { color: var(--neon-cyan); border-color: rgba(0,240,255,0.2); }
.variant-cyber .nav-tab.active { color: var(--neon-lime); border-color: var(--neon-lime); background: rgba(182,255,61,0.05); box-shadow: 0 0 10px rgba(182,255,61,0.2); }
.variant-cyber .nav-tab.active::before { content: "> "; }
.variant-cyber .nav-user { border: 1px solid rgba(0,240,255,0.15); }
.variant-cyber .chat-list { background: #05050a; border-right: 1px solid rgba(0,240,255,0.15); }
.variant-cyber .chat-list-title { color: var(--neon-cyan); text-transform: uppercase; letter-spacing: 0.15em; font-size: 11px; }
.variant-cyber .chat-list-title::before { content: "[ "; opacity: 0.5; }
.variant-cyber .chat-list-title::after { content: " ]"; opacity: 0.5; }
.variant-cyber .chat-search { background: #0c0c18; border: 1px solid rgba(0,240,255,0.15); color: var(--fg); }
.variant-cyber .chat-item:hover { background: rgba(0,240,255,0.04); }
.variant-cyber .chat-item.active { background: rgba(0,240,255,0.06); border-left: 2px solid var(--neon-cyan); padding-left: 10px; }
.variant-cyber .chat-item-name { color: var(--fg); }
.variant-cyber .avatar {
  background: #0c0c18;
  border: 1px solid var(--neon-cyan);
  color: var(--neon-cyan);
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
  text-shadow: 0 0 8px rgba(0,240,255,0.5);
}
.variant-cyber .avatar[data-color="violet"] { border-color: var(--neon-magenta); color: var(--neon-magenta); text-shadow: 0 0 8px rgba(255,0,170,0.5); }
.variant-cyber .avatar[data-color="amber"] { border-color: var(--neon-lime); color: var(--neon-lime); text-shadow: 0 0 8px rgba(182,255,61,0.5); }
.variant-cyber .avatar[data-color="rose"] { border-color: #ff5500; color: #ff5500; text-shadow: 0 0 8px rgba(255,85,0,0.5); }
.variant-cyber .avatar[data-color="teal"] { border-color: var(--neon-cyan); color: var(--neon-cyan); }
.variant-cyber .chat-header { background: #05050a; border-bottom: 1px solid rgba(0,240,255,0.15); }
.variant-cyber .chat-header-name { color: var(--neon-cyan); font-family: 'JetBrains Mono', monospace; }
.variant-cyber .chat-header-name::before { content: "@"; opacity: 0.5; }
.variant-cyber .icon-btn { color: var(--neon-cyan); }
.variant-cyber .icon-btn:hover { background: rgba(0,240,255,0.1); }
.variant-cyber .bubble.me {
  background: transparent;
  color: var(--neon-magenta);
  border: 1px solid var(--neon-magenta);
  border-radius: 4px;
  box-shadow: 0 0 15px rgba(255,0,170,0.15), inset 0 0 15px rgba(255,0,170,0.05);
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
}
.variant-cyber .bubble.them {
  background: transparent;
  color: var(--neon-cyan);
  border: 1px solid var(--neon-cyan);
  border-radius: 4px;
  box-shadow: 0 0 15px rgba(0,240,255,0.15), inset 0 0 15px rgba(0,240,255,0.05);
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
}
.variant-cyber .bubble .ts { color: rgba(255,255,255,0.4); font-size: 9px; letter-spacing: 0.1em; }
.variant-cyber .reaction { background: #0c0c18; border: 1px solid rgba(0,240,255,0.2); border-radius: 2px; color: var(--neon-lime); }
.variant-cyber .reaction.mine { border-color: var(--neon-lime); box-shadow: 0 0 10px rgba(182,255,61,0.2); }
.variant-cyber .event-pill { background: transparent; border: 1px dashed var(--neon-lime); color: var(--neon-lime); border-radius: 2px; text-transform: uppercase; letter-spacing: 0.1em; font-size: 10px; }
.variant-cyber .event-pill.rejected { border-color: var(--neon-magenta); color: var(--neon-magenta); }
.variant-cyber .composer { background: #05050a; border-top: 1px solid rgba(0,240,255,0.15); }
.variant-cyber .composer-box { background: #0c0c18; border: 1px solid rgba(0,240,255,0.2); border-radius: 4px; }
.variant-cyber .composer-box::before { content: ">"; color: var(--neon-lime); margin-right: 6px; font-weight: bold; }
.variant-cyber .composer-btn { background: var(--neon-lime); color: #05050a; border-radius: 4px; box-shadow: 0 0 15px rgba(182,255,61,0.3); }
.variant-cyber .presence { border-color: #08080f; }


/* ================= VARIANT 5: WARM SOFT ================= */
.variant-warm {
  --bg: #f7f2e9;
  --bg-2: #efe6d4;
  --bg-3: #fdfaf3;
  --fg: #3d2e1f;
  --fg-muted: #8a7560;
  --accent: #c75d3a;
  --accent-2: #e8a87c;
  --line: rgba(61,46,31,0.1);
  background: var(--bg);
  color: var(--fg);
  font-family: 'Inter', sans-serif;
}
.variant-warm .nav-brand { font-family: 'Fraunces', 'Playfair Display', serif; font-weight: 700; font-size: 20px; letter-spacing: -0.02em; }
.variant-warm .chat-header-name { font-family: 'Fraunces', 'Playfair Display', serif; font-size: 17px; }
.variant-warm .chat-list-title { font-family: 'Fraunces', serif; font-size: 16px; font-weight: 600; }
.variant-warm .app-window { background: var(--bg-3); box-shadow: 0 20px 60px rgba(61,46,31,0.12); border: 1px solid var(--line); }
.variant-warm .window-bar { background: var(--bg-2); border-bottom: 1px solid var(--line); }
.variant-warm .window-bar .title { color: var(--fg-muted); font-weight: 500; }
.variant-warm .top-nav { background: var(--bg-3); border-bottom: 1px solid var(--line); }
.variant-warm .nav-tab { color: var(--fg-muted); font-weight: 500; border-radius: 999px; }
.variant-warm .nav-tab:hover { background: var(--bg-2); color: var(--fg); }
.variant-warm .nav-tab.active { background: var(--accent); color: #fff; }
.variant-warm .nav-user { background: var(--bg-2); border-radius: 999px; }
.variant-warm .chat-list { background: var(--bg-2); }
.variant-warm .chat-search { background: var(--bg-3); border: 1px solid var(--line); color: var(--fg); border-radius: 999px; }
.variant-warm .chat-item { border-radius: 14px; }
.variant-warm .chat-item:hover { background: rgba(255,255,255,0.5); }
.variant-warm .chat-item.active { background: var(--bg-3); box-shadow: 0 2px 8px rgba(61,46,31,0.06); }
.variant-warm .avatar { background: #e8a87c; color: #7c3a1e; font-family: 'Fraunces', serif; font-weight: 700; }
.variant-warm .avatar[data-color="violet"] { background: #bfa4c9; color: #4a2a5c; }
.variant-warm .avatar[data-color="amber"] { background: #e8c87c; color: #5c3e1a; }
.variant-warm .avatar[data-color="rose"] { background: #e8a4a4; color: #5c1e1e; }
.variant-warm .avatar[data-color="teal"] { background: #a4c9bf; color: #1e4a3e; }
.variant-warm .chat-header { background: var(--bg-3); border-bottom: 1px solid var(--line); }
.variant-warm .icon-btn:hover { background: var(--bg-2); }
.variant-warm .messages { background: var(--bg-3); }
.variant-warm .bubble.me { background: var(--accent); color: #fff; border-radius: 20px 20px 6px 20px; }
.variant-warm .bubble.them { background: var(--bg-2); color: var(--fg); border-radius: 20px 20px 20px 6px; }
.variant-warm .reaction { background: var(--bg-2); border: 1px solid var(--line); }
.variant-warm .reaction.mine { background: var(--accent); color: #fff; }
.variant-warm .event-pill { background: var(--bg-2); color: var(--fg-muted); border: 1px solid var(--line); }
.variant-warm .event-pill.rejected { background: rgba(199,93,58,0.1); color: var(--accent); }
.variant-warm .composer { background: var(--bg-3); border-top: 1px solid var(--line); }
.variant-warm .composer-box { background: var(--bg-2); border-radius: 999px; padding-left: 16px; }
.variant-warm .composer-btn { background: var(--accent); color: #fff; border-radius: 50%; }
.variant-warm .presence { border-color: var(--bg-3); }


/* ================= VARIANT 6: BRUTAL GAMING ================= */
.variant-brutal {
  --bg: #0d0d0d;
  --bg-2: #161616;
  --bg-3: #1a1a1a;
  --fg: #ffffff;
  --fg-muted: #808080;
  --lime: #d4ff3d;
  --line: #2a2a2a;
  background: var(--bg);
  color: var(--fg);
  font-family: 'Inter', sans-serif;
}
.variant-brutal .nav-brand {
  font-family: 'Archivo Black', 'Inter', sans-serif;
  font-weight: 900;
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: -0.03em;
}
.variant-brutal .chat-header-name { font-weight: 800; font-size: 16px; text-transform: uppercase; letter-spacing: -0.01em; }
.variant-brutal .chat-list-title { font-weight: 900; font-size: 18px; text-transform: uppercase; letter-spacing: -0.02em; }
.variant-brutal .app-window { background: var(--bg); border: 2px solid var(--lime); border-radius: 0; box-shadow: 12px 12px 0 var(--lime); }
.variant-brutal .window-bar { background: var(--bg); border-bottom: 2px solid var(--lime); }
.variant-brutal .window-bar .title { color: var(--lime); font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; font-size: 11px; }
.variant-brutal .top-nav { background: var(--bg); border-bottom: 2px solid var(--line); }
.variant-brutal .nav-tab { color: var(--fg-muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; font-size: 12px; border-radius: 0; border: 2px solid transparent; }
.variant-brutal .nav-tab:hover { color: var(--fg); background: var(--bg-2); }
.variant-brutal .nav-tab.active { background: var(--lime); color: #000; }
.variant-brutal .nav-user { background: var(--bg-2); border: 2px solid var(--line); border-radius: 0; }
.variant-brutal .chat-list { background: var(--bg); border-right: 2px solid var(--line); }
.variant-brutal .chat-search { background: var(--bg-2); border: 2px solid var(--line); color: var(--fg); border-radius: 0; font-weight: 500; }
.variant-brutal .chat-item { border-radius: 0; border-left: 4px solid transparent; }
.variant-brutal .chat-item:hover { background: var(--bg-2); }
.variant-brutal .chat-item.active { background: var(--bg-2); border-left-color: var(--lime); }
.variant-brutal .chat-item-name { font-weight: 800; text-transform: uppercase; font-size: 13px; letter-spacing: -0.01em; }
.variant-brutal .avatar { background: var(--lime); color: #000; border-radius: 0; font-weight: 900; font-family: 'Archivo Black', sans-serif; }
.variant-brutal .avatar[data-color="violet"] { background: #a78bfa; }
.variant-brutal .avatar[data-color="amber"] { background: #fbbf24; }
.variant-brutal .avatar[data-color="rose"] { background: #fb7185; }
.variant-brutal .avatar[data-color="teal"] { background: #2dd4bf; }
.variant-brutal .chat-header { background: var(--bg); border-bottom: 2px solid var(--line); }
.variant-brutal .icon-btn { border-radius: 0; border: 2px solid var(--line); }
.variant-brutal .icon-btn:hover { background: var(--lime); color: #000; border-color: var(--lime); }
.variant-brutal .bubble.me { background: var(--lime); color: #000; border-radius: 0; font-weight: 600; border: 2px solid #000; box-shadow: 4px 4px 0 #fff; }
.variant-brutal .bubble.them { background: var(--fg); color: #000; border-radius: 0; font-weight: 600; border: 2px solid var(--fg); box-shadow: 4px 4px 0 var(--lime); }
.variant-brutal .bubble .ts { color: rgba(0,0,0,0.6); font-weight: 700; font-size: 10px; text-transform: uppercase; }
.variant-brutal .reaction { background: var(--bg-2); border: 2px solid var(--line); border-radius: 0; font-weight: 700; }
.variant-brutal .reaction.mine { background: var(--lime); color: #000; border-color: var(--lime); }
.variant-brutal .event-pill { background: var(--bg-2); border: 2px solid var(--line); border-radius: 0; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 800; font-size: 11px; }
.variant-brutal .event-pill.rejected { border-color: #fb7185; color: #fb7185; }
.variant-brutal .composer { background: var(--bg); border-top: 2px solid var(--line); }
.variant-brutal .composer-box { background: var(--bg-2); border: 2px solid var(--line); border-radius: 0; }
.variant-brutal .composer-btn { background: var(--lime); color: #000; border-radius: 0; font-weight: 900; }
.variant-brutal .presence { border-color: var(--bg); border-width: 3px; }

/* Profile card & call overlay — inherit from variant */
.variant-clean .profile-card { background: #fff; border: 1px solid var(--line); }
.variant-clean .profile-card-banner { background: linear-gradient(135deg, #e5e5e5, #d4d4d4); }
.variant-clean .profile-card-avatar { border-color: #fff; }
.variant-clean .profile-card-meta { border-top-color: var(--line); color: var(--fg-muted); }
.variant-clean .call-overlay { background: #fff; border: 1px solid var(--line); color: var(--fg); }

.variant-playful .profile-card { background: linear-gradient(180deg, #2a1a48, #1a1625); border: 1px solid rgba(255,255,255,0.08); }
.variant-playful .profile-card-banner { background: linear-gradient(135deg, #a78bfa, #f472b6); }
.variant-playful .profile-card-avatar { border-color: #2a1a48; }
.variant-playful .call-overlay { background: linear-gradient(135deg, #2a1a48, #1a1625); border: 1px solid rgba(167,139,250,0.3); }

.variant-y2k .profile-card { background: rgba(255,255,255,0.08); backdrop-filter: blur(30px); border: 1px solid rgba(255,255,255,0.15); }
.variant-y2k .profile-card-banner { background: linear-gradient(135deg, #c4b5fd, #f9a8d4); }
.variant-y2k .profile-card-avatar { border-color: #1a1a2e; }
.variant-y2k .call-overlay { background: rgba(255,255,255,0.08); backdrop-filter: blur(30px); border: 1px solid rgba(255,255,255,0.15); }

.variant-cyber .profile-card { background: #0c0c18; border: 1px solid var(--neon-cyan); box-shadow: 0 0 30px rgba(0,240,255,0.2); }
.variant-cyber .profile-card-banner { background: repeating-linear-gradient(90deg, #00f0ff, #00f0ff 2px, transparent 2px, transparent 8px), linear-gradient(135deg, #ff00aa 0%, #00f0ff 100%); }
.variant-cyber .profile-card-avatar { border-color: #0c0c18; border-radius: 4px; }
.variant-cyber .call-overlay { background: #0c0c18; border: 1px solid var(--neon-lime); box-shadow: 0 0 30px rgba(182,255,61,0.2); }

.variant-warm .profile-card { background: var(--bg-3); border: 1px solid var(--line); color: var(--fg); }
.variant-warm .profile-card-banner { background: linear-gradient(135deg, #e8a87c, #c75d3a); }
.variant-warm .profile-card-avatar { border-color: var(--bg-3); }
.variant-warm .profile-card-meta { border-top-color: var(--line); }
.variant-warm .call-overlay { background: var(--bg-3); border: 1px solid var(--line); color: var(--fg); }

.variant-brutal .profile-card { background: var(--bg); border: 2px solid var(--lime); border-radius: 0; box-shadow: 8px 8px 0 var(--lime); }
.variant-brutal .profile-card-banner { background: var(--lime); }
.variant-brutal .profile-card-avatar { border-color: var(--bg); border-radius: 0; border-width: 3px; }
.variant-brutal .profile-card-meta { border-top-color: var(--line); }
.variant-brutal .call-overlay { background: var(--bg); border: 2px solid var(--lime); border-radius: 0; box-shadow: 6px 6px 0 var(--lime); }


/* Typing indicator */
.typing { display: inline-flex; gap: 3px; padding: 4px 2px; }
.typing span { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.4; animation: typingDot 1.3s infinite; }
.typing span:nth-child(2) { animation-delay: 0.15s; }
.typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes typingDot {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* Tweaks panel */
.tweaks-panel {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 280px;
  background: rgba(20,20,24,0.95);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  padding: 16px;
  z-index: 200;
  color: #fff;
  font-family: 'Inter', system-ui, sans-serif;
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
  display: none;
}
.tweaks-panel.open { display: block; }
.tweaks-panel h3 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.7; margin-bottom: 14px; font-weight: 600; }
.tweaks-row { margin-bottom: 12px; }
.tweaks-row label { display: block; font-size: 11px; opacity: 0.6; margin-bottom: 6px; }
.tweaks-row input[type="color"] { width: 100%; height: 34px; border-radius: 8px; background: transparent; border: 1px solid rgba(255,255,255,0.1); cursor: pointer; }
.tweaks-row input[type="range"] { width: 100%; }
.tweaks-row select { width: 100%; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: #fff; padding: 8px; border-radius: 8px; font-size: 12px; }