/* ====================================================
   NitroChat — Complete Discord CSS (Full Rewrite)
   ==================================================== */

/* ── THEME TOKENS ── */
:root {
  --accent:#5865f2; --accent-h:#4752c4;
  --neon:#00f2fe; --neon2:#bf24ff; --neon3:#39ff14;
  --neon-glow:rgba(0,242,254,.22); --neon2-glow:rgba(191,36,255,.18);
  --nebula1:rgba(88,101,242,.18); --nebula2:rgba(255,0,85,.12);
  --nebula3:rgba(0,242,254,.09); --nebula4:rgba(161,140,209,.1);
  --bg-0:#0c0d12; --bg-1:#111216; --bg-2:#17181e;
  --bg-3:#1e2027; --bg-4:#252830; --bg-5:#2e3038; --bg-6:#36393f;
  --t1:#ffffff; --t2:#dcddde; --t3:#b9bbbe; --t4:#72767d; --t5:#4f545c;
  --ch-text:var(--t3); --ch-hover:rgba(255,255,255,.06);
  --ch-active:rgba(255,255,255,.1); --ch-active-t:var(--t1);
  --msg-hover:rgba(255,255,255,.016);
  --border:rgba(255,255,255,.06); --border-neon:rgba(0,242,254,.3);
  --r1:4px; --r2:8px; --r3:12px; --r4:16px; --r5:24px;
  --ease:cubic-bezier(.25,.8,.25,1); --bounce:cubic-bezier(.175,.885,.32,1.275);
  --shadow:0 8px 32px rgba(0,0,0,.5); --glow:0 0 20px var(--neon-glow);
  --srv-w:72px; --ch-w:240px; --mp-w:240px;
}
/* ── ADVANCED NITRO THEMES (Fully consistent colors & contrast) ── */
[data-theme="sunset"] {
  --accent: #ff6b35; --accent-h: #e0531f;
  --neon: #ff6b35; --neon2: #ff00a0; --neon3: #ffb700;
  --neon-glow: rgba(255, 107, 53, 0.25); --neon2-glow: rgba(255, 0, 160, 0.2);
  --nebula1: rgba(255, 107, 53, 0.16); --nebula2: rgba(255, 0, 160, 0.14);
  --bg-0: #140905; --bg-1: #1c0e08; --bg-2: #24140c;
  --bg-3: #2d1a10; --bg-4: #372115; --bg-5: #42281a;
  --border: rgba(255, 107, 53, 0.12); --border-neon: rgba(255, 107, 53, 0.35);
  --t1: #ffffff; --t2: #ffd2c2; --t3: #fca78d; --t4: #a87262;
}
[data-theme="forest"] {
  --accent: #10b981; --accent-h: #059669;
  --neon: #39ff14; --neon2: #00cc66; --neon3: #88ff00;
  --neon-glow: rgba(57, 255, 20, 0.25); --neon2-glow: rgba(0, 204, 102, 0.2);
  --nebula1: rgba(57, 255, 20, 0.14); --nebula2: rgba(0, 204, 102, 0.12);
  --bg-0: #040d06; --bg-1: #07150a; --bg-2: #0c1d10;
  --bg-3: #112615; --bg-4: #18311c; --bg-5: #1e3d23;
  --border: rgba(57, 255, 20, 0.12); --border-neon: rgba(57, 255, 20, 0.35);
  --t1: #ffffff; --t2: #d2ffd6; --t3: #a3f7ab; --t4: #6a9c71;
}
[data-theme="ocean"] {
  --accent: #0099ff; --accent-h: #007ecc;
  --neon: #0099ff; --neon2: #00ccff; --neon3: #6633ff;
  --neon-glow: rgba(0, 153, 255, 0.25); --neon2-glow: rgba(0, 204, 255, 0.2);
  --nebula1: rgba(0, 153, 255, 0.16); --nebula2: rgba(0, 204, 255, 0.14);
  --bg-0: #030a16; --bg-1: #051122; --bg-2: #081930;
  --bg-3: #0c213d; --bg-4: #112a4b; --bg-5: #163459;
  --border: rgba(0, 153, 255, 0.12); --border-neon: rgba(0, 153, 255, 0.35);
  --t1: #ffffff; --t2: #d2e9ff; --t3: #9ecbff; --t4: #6b8ea8;
}
[data-theme="sakura"] {
  --accent: #ec4899; --accent-h: #db2777;
  --neon: #ec4899; --neon2: #f43f5e; --neon3: #d946ef;
  --neon-glow: rgba(236, 72, 153, 0.25); --neon2-glow: rgba(244, 63, 94, 0.2);
  --nebula1: rgba(236, 72, 153, 0.16); --nebula2: rgba(244, 63, 94, 0.14);
  --bg-0: #16040c; --bg-1: #220713; --bg-2: #2e091b;
  --bg-3: #3c0c23; --bg-4: #4a102b; --bg-5: #591434;
  --border: rgba(236, 72, 153, 0.15); --border-neon: rgba(236, 72, 153, 0.35);
  --t1: #ffffff; --t2: #ffd3e8; --t3: #fca5d3; --t4: #ab718e;
}
[data-theme="amethyst"] {
  --accent: #9d4edd; --accent-h: #7b2cbf;
  --neon: #e0aaff; --neon2: #c77dff; --neon3: #ff007f;
  --neon-glow: rgba(157, 78, 221, 0.25); --neon2-glow: rgba(199, 125, 255, 0.2);
  --nebula1: rgba(157, 78, 221, 0.16); --nebula2: rgba(199, 125, 255, 0.14);
  --bg-0: #0a0512; --bg-1: #0f091a; --bg-2: #140d22;
  --bg-3: #1a122c; --bg-4: #221838; --bg-5: #2c2045;
  --border: rgba(157, 78, 221, 0.15); --border-neon: rgba(157, 78, 221, 0.35);
  --t1: #ffffff; --t2: #e8dbff; --t3: #d1b3ff; --t4: #8a6cba;
}
[data-theme="midnight-gold"] {
  --accent: #d4af37; --accent-h: #aa8c2c;
  --neon: #ffd700; --neon2: #ffea70; --neon3: #ffffff;
  --neon-glow: rgba(212, 175, 55, 0.25); --neon2-glow: rgba(255, 234, 112, 0.2);
  --nebula1: rgba(212, 175, 55, 0.15); --nebula2: rgba(255, 255, 255, 0.08);
  --bg-0: #0d0c0a; --bg-1: #14120e; --bg-2: #1c1914;
  --bg-3: #25221b; --bg-4: #2f2b23; --bg-5: #3b362c;
  --border: rgba(212, 175, 55, 0.15); --border-neon: rgba(212, 175, 55, 0.35);
  --t1: #ffffff; --t2: #f2e6cf; --t3: #dfcba5; --t4: #9d8e72;
}
[data-theme="toxic"] {
  --accent: #39ff14; --accent-h: #2ecc12;
  --neon: #39ff14; --neon2: #00ff66; --neon3: #00ff00;
  --neon-glow: rgba(57, 255, 20, 0.3); --neon2-glow: rgba(0, 255, 102, 0.2);
  --nebula1: rgba(57, 255, 20, 0.18); --nebula2: rgba(0, 255, 102, 0.12);
  --bg-0: #050805; --bg-1: #080d08; --bg-2: #0d140d;
  --bg-3: #121c12; --bg-4: #192619; --bg-5: #203320;
  --border: rgba(57, 255, 20, 0.16); --border-neon: rgba(57, 255, 20, 0.4);
  --t1: #ffffff; --t2: #d8ffd8; --t3: #aeffae; --t4: #6ea16e;
}
[data-theme="vampire"] {
  --accent: #e50914; --accent-h: #b20710;
  --neon: #ff003c; --neon2: #990000; --neon3: #ff4d4d;
  --neon-glow: rgba(255, 0, 60, 0.25); --neon2-glow: rgba(153, 0, 0, 0.2);
  --nebula1: rgba(255, 0, 60, 0.16); --nebula2: rgba(153, 0, 0, 0.14);
  --bg-0: #0a0202; --bg-1: #100303; --bg-2: #180505;
  --bg-3: #220909; --bg-4: #2b0e0e; --bg-5: #371414;
  --border: rgba(255, 0, 60, 0.15); --border-neon: rgba(255, 0, 60, 0.35);
  --t1: #ffffff; --t2: #ffcccc; --t3: #ff9999; --t4: #a66363;
}
[data-theme="nord"] {
  --accent: #88c0d0; --accent-h: #81a1c1;
  --neon: #88c0d0; --neon2: #8fbcbb; --neon3: #b48ead;
  --neon-glow: rgba(136, 192, 208, 0.2); --neon2-glow: rgba(143, 188, 187, 0.15);
  --nebula1: rgba(136, 192, 208, 0.12); --nebula2: rgba(180, 142, 173, 0.1);
  --bg-0: #20242c; --bg-1: #2e3440; --bg-2: #3b4252;
  --bg-3: #434c5e; --bg-4: #4c566a; --bg-5: #5e6b86;
  --border: rgba(136, 192, 208, 0.1); --border-neon: rgba(136, 192, 208, 0.25);
  --t1: #eceff4; --t2: #e5e9f0; --t3: #d8dee9; --t4: #7f8fa4;
}
[data-theme="terracotta"] {
  --accent: #e76f51; --accent-h: #f4a261;
  --neon: #e76f51; --neon2: #e9c46a; --neon3: #f4a261;
  --neon-glow: rgba(231, 111, 81, 0.22); --neon2-glow: rgba(233, 196, 106, 0.18);
  --nebula1: rgba(231, 111, 81, 0.15); --nebula2: rgba(233, 196, 106, 0.12);
  --bg-0: #140f0d; --bg-1: #1c1512; --bg-2: #251d19;
  --bg-3: #2e2520; --bg-4: #3b2f29; --bg-5: #493b33;
  --border: rgba(231, 111, 81, 0.12); --border-neon: rgba(231, 111, 81, 0.3);
  --t1: #fefae0; --t2: #f5ebe6; --t3: #e3d5ca; --t4: #a38f85;
}
[data-theme="light"] {
  /* Paleta profesional AriVPN: blancos + azul corporativo, cian solo para marca */
  --accent:#2563eb; --accent-h:#1d4ed8;
  --neon:#2563eb; --neon2:#06b6d4; --neon3:#06b6d4;
  --neon-glow:rgba(37,99,235,.14); --neon2-glow:rgba(6,182,212,.12);
  --nebula1:rgba(37,99,235,.05); --nebula2:rgba(6,182,212,.04);
  --nebula3:rgba(37,99,235,.03); --nebula4:rgba(148,163,184,.05);
  --bg-0:#ffffff; --bg-1:#f6f8fb; --bg-2:#ffffff;
  --bg-3:#eef2f7; --bg-4:#e9edf3; --bg-5:#e2e8f0; --bg-6:#dbe2ec;
  --t1:#1e293b; --t2:#334155; --t3:#475569; --t4:#64748b; --t5:#94a3b8;
  --ch-text:var(--t3); --ch-hover:rgba(37,99,235,.06);
  --ch-active:#e8effe; --ch-active-t:#1d4ed8;
  --msg-hover:rgba(15,23,42,.03);
  --border:#e2e8f0; --border-neon:rgba(37,99,235,.3);
  --shadow:0 8px 30px rgba(15,23,42,.12); --glow:0 0 20px rgba(37,99,235,.12);
}
/* Cyberpunk base theme — same as :root, explicit for applyTheme() compatibility */
[data-theme="cyberpunk"], [data-theme="default"] {
  --accent:#5865f2; --accent-h:#4752c4;
  --neon:#00f2fe; --neon2:#bf24ff; --neon3:#39ff14;
  --neon-glow:rgba(0,242,254,.22); --neon2-glow:rgba(191,36,255,.18);
  --bg-0:#0c0d12; --bg-1:#111216; --bg-2:#17181e;
  --bg-3:#1e2027; --bg-4:#252830; --bg-5:#2e3038; --bg-6:#36393f;
  --t1:#ffffff; --t2:#dcddde; --t3:#b9bbbe; --t4:#72767d; --t5:#4f545c;
  --border:rgba(255,255,255,.06); --border-neon:rgba(0,242,254,.3);
  --ch-hover:rgba(255,255,255,.06); --ch-active:rgba(255,255,255,.1);
  --msg-hover:rgba(255,255,255,.016);
}

/* ── RESET ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px}
body{font-family:'Inter',sans-serif;background:var(--bg-0);color:var(--t2);overflow:hidden;height:100vh;width:100vw;-webkit-font-smoothing:antialiased}
button{font-family:inherit;border:none;background:none;cursor:pointer;color:inherit;outline:none}
input,textarea,[contenteditable]{font-family:inherit;outline:none}
img{object-fit:cover;display:block}
a{color:var(--neon);text-decoration:none}
a:hover{text-decoration:underline}
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.16)}
.hidden{display:none!important}

/* ══════════════════════════════════════════════
   BODY NEBULA BACKGROUND
══════════════════════════════════════════════ */
body::before{
  content:'';position:fixed;inset:-50%;width:200%;height:200%;z-index:-1;
  background:radial-gradient(circle at 20% 20%,var(--nebula1) 0%,transparent 45%),
             radial-gradient(circle at 80% 80%,var(--nebula2) 0%,transparent 45%),
             radial-gradient(circle at 50% 50%,var(--nebula3) 0%,transparent 60%),
             radial-gradient(circle at 70% 10%,var(--nebula4) 0%,transparent 40%),
             var(--bg-0);
  animation:nebulaShift 40s infinite alternate;
}
@keyframes nebulaShift{0%{transform:translate(0,0)}100%{transform:translate(30px,20px)}}

/* ══════════════════════════════════════════════
   AUTH VIEW
══════════════════════════════════════════════ */
.auth-view{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;background:var(--bg-1);overflow:hidden}
.auth-bg-anim{position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(0,242,254,0.1) 0%,transparent 60%),radial-gradient(circle at 80% 20%,rgba(191,36,255,0.1) 0%,transparent 50%);animation:bgAuthAnim 20s infinite alternate}
@keyframes bgAuthAnim{0%{transform:scale(1)}100%{transform:scale(1.2) translate(-30px,15px)}}
.auth-card{position:relative;z-index:1;background:rgba(18,19,26,0.78);backdrop-filter:blur(30px) saturate(180%);-webkit-backdrop-filter:blur(30px) saturate(180%);border-radius:24px;padding:26px 28px;width:100%;max-width:390px;box-shadow:0 20px 60px rgba(0,0,0,0.7), inset 0 1px 1px rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.12);animation:modalIn .4s cubic-bezier(0.16,1,0.3,1)}
@keyframes modalIn{from{opacity:0;transform:translateY(20px) scale(0.96)}to{opacity:1;transform:translateY(0) scale(1)}}
.auth-logo{font-family:'Outfit',sans-serif;font-weight:900;font-size:22px;text-align:center;color:var(--neon);margin-bottom:10px;letter-spacing:1.5px;text-transform:uppercase;text-shadow:0 0 15px var(--neon-glow)}
.auth-title{font-family:'Outfit',sans-serif;font-weight:800;font-size:20px;text-align:center;color:#fff;margin-bottom:4px;letter-spacing:-0.5px}
.auth-subtitle{text-align:center;color:rgba(255,255,255,0.6);font-size:13px;margin-bottom:18px}
.auth-card .stg-field{margin-bottom:12px}
.auth-card .pm-label{font-size:10.5px;color:rgba(255,255,255,0.55);letter-spacing:0.5px;margin-bottom:6px;font-weight:700}
.auth-card .stg-input{background:rgba(0,0,0,0.3);border:1px solid rgba(255,255,255,0.08);border-radius:12px;padding:10px 14px;font-size:14px;color:#fff;box-shadow:inset 0 2px 4px rgba(0,0,0,0.2);transition:all 0.2s}
.auth-card .stg-input:focus{background:rgba(0,0,0,0.45);border-color:var(--neon);box-shadow:0 0 0 3px rgba(0,255,170,0.15), inset 0 2px 4px rgba(0,0,0,0.2);outline:none;}
.auth-main-btn{width:100%;margin-top:10px;padding:12px;font-size:14px;border-radius:12px;background:var(--neon);color:#000;font-weight:800;letter-spacing:0.5px;box-shadow:0 6px 16px rgba(0,255,170,0.25);transition:all 0.3s cubic-bezier(0.16,1,0.3,1);border:none;cursor:pointer;}
.auth-main-btn:hover{transform:translateY(-2px);box-shadow:0 10px 20px rgba(0,255,170,0.35);background:#00e699}
.auth-links{margin-top:14px;font-size:12.5px;text-align:center;color:rgba(255,255,255,0.5)}
.auth-links a{color:var(--neon);font-weight:600;text-decoration:none}
.auth-links a:hover{text-decoration:underline}
.auth-error{color:#ff453a;font-size:12.5px;margin-top:10px;padding:10px;background:rgba(255,69,58,0.1);border-radius:10px;border:1px solid rgba(255,69,58,0.3);text-align:center}
.auth-divider{display:flex;align-items:center;text-align:center;margin:16px 0;color:rgba(255,255,255,0.35);font-size:10px;font-weight:700}
.auth-divider::before,.auth-divider::after{content:'';flex:1;border-bottom:1px solid rgba(255,255,255,0.1)}
.auth-divider span{padding:0 10px}
.auth-owner-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;padding:10px 14px;border-radius:12px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);color:#fff;font-family:'Outfit',sans-serif;font-weight:700;font-size:13px;cursor:pointer;transition:all 0.25s cubic-bezier(0.16,1,0.3,1)}
.auth-owner-btn:hover{background:rgba(255,255,255,0.12);transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,0.3)}
.owner-icon{font-size:18px}

/* ══════════════════════════════════════════════
   MAIN LAYOUT
══════════════════════════════════════════════ */
#app{display:flex;height:100vh;width:100vw;overflow:hidden;position:relative}
.layout{display:flex;flex:1;overflow:hidden;height:100vh}

/* ══════════════════════════════════════════════
   SERVER SIDEBAR
══════════════════════════════════════════════ */
.srv-sidebar{
  width:var(--srv-w);min-width:var(--srv-w);
  background:var(--bg-0);
  display:flex;flex-direction:column;align-items:center;
  padding:12px 0;gap:8px;overflow-y:auto;overflow-x:hidden;
  border-right:1px solid var(--border);
}
.srv-icon{
  width:48px;height:48px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;position:relative;color:var(--t3);
  transition:border-radius .2s var(--bounce),background .15s,color .15s;
  background:var(--bg-2);flex-shrink:0;
}
.srv-icon::before{
  content:'';position:absolute;left:-4px;top:50%;transform:translateY(-50%) scaleY(0);
  width:4px;height:10px;background:var(--t1);border-radius:0 3px 3px 0;
  transition:all .2s var(--bounce);
}
.srv-icon:hover{border-radius:var(--r3);background:var(--neon);color:#fff}
.srv-icon:hover::before{transform:translateY(-50%) scaleY(1)}
.srv-icon.active{border-radius:var(--r3);background:var(--neon);color:#fff}
.srv-icon.active::before{transform:translateY(-50%) scaleY(1);height:40px}
.srv-icon img{width:100%;height:100%;border-radius:inherit;object-fit:cover}
.srv-initials{font-family:'Outfit',sans-serif;font-weight:800;font-size:16px}
.srv-unread{position:absolute;bottom:-2px;right:-2px;width:14px;height:14px;border-radius:50%;background:#ed4245;border:2px solid var(--bg-0);font-size:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700}
.home-icon{background:var(--neon);color:#fff}
.home-icon svg{fill:#fff}
.add-srv-icon,.explore-srv-icon{background:var(--bg-3);color:var(--neon)}
.add-srv-icon:hover,.explore-srv-icon:hover{background:var(--neon);color:#fff}
.srv-separator{width:32px;height:1px;background:var(--border);margin:4px 0;flex-shrink:0}
.srv-list{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%}
/* Tooltip */
.srv-icon[data-tip]::after{content:attr(data-tip);position:absolute;left:calc(100% + 16px);top:50%;transform:translateY(-50%);background:#18191c;color:#fff;padding:6px 10px;border-radius:var(--r1);font-size:13px;font-weight:700;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .15s;z-index:999}
.srv-icon[data-tip]:hover::after{opacity:1}

/* ══════════════════════════════════════════════
   CHANNEL SIDEBAR
══════════════════════════════════════════════ */
.ch-sidebar{
  width:var(--ch-w);min-width:var(--ch-w);
  background:var(--bg-1);
  display:flex;flex-direction:column;
  border-right:1px solid var(--border);
  position:relative;
}
.ch-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 12px;height:48px;min-height:48px;
  border-bottom:1px solid var(--border);
  cursor:pointer;font-weight:700;color:var(--t1);
  transition:background .15s;flex-shrink:0;
  position:relative;z-index:10;
}
.ch-header:hover{background:var(--ch-hover)}
.ch-server-name{font-size:15px;font-family:'Outfit',sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.ch-header-btn{color:var(--t4);padding:4px;transition:color .15s;flex-shrink:0}
.ch-header-btn:hover{color:var(--t1)}

/* Server dropdown */
.srv-dropdown{
  position:absolute;top:48px;left:8px;right:8px;z-index:10005;
  background:var(--bg-4);border-radius:var(--r2);padding:6px;
  box-shadow:var(--shadow);border:1px solid var(--border);
  animation:dropdownIn .15s var(--ease);
}
@keyframes dropdownIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.sd-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:var(--r1);font-size:14px;font-weight:500;color:var(--t2);cursor:pointer;transition:background .1s,color .1s}
.sd-item:hover{background:var(--accent);color:#fff}
.sd-item.danger{color:#ed4245}
.sd-item.danger:hover{background:#ed4245;color:#fff}
.sd-sep{height:1px;background:var(--border);margin:4px 0}

/* Channel list */
.ch-list{flex:1;overflow-y:auto;padding:8px 0}
.ch-category{margin-bottom:4px}
.ch-cat-header{
  display:flex;align-items:center;gap:4px;
  padding:14px 8px 4px;
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;
  color:var(--t4);cursor:pointer;transition:color .15s;
  user-select:none;
}
.ch-cat-header:hover{color:var(--t2)}
.ch-cat-arrow{font-size:10px;transition:transform .2s}
.ch-cat-header.collapsed .ch-cat-arrow{transform:rotate(-90deg)}
.ch-cat-plus{margin-left:auto;font-size:16px;padding:0 4px;opacity:0;transition:opacity .15s}
.ch-cat-header:hover .ch-cat-plus{opacity:1}
.ch-cat-plus:hover{color:var(--t1)}

.ch-item{
  display:flex;align-items:center;gap:6px;
  padding:2px 8px;height:34px;border-radius:var(--r1);
  margin:0 8px;cursor:pointer;color:var(--ch-text);
  transition:background .1s,color .1s;position:relative;
  user-select:none;
}
.ch-item:hover{background:var(--ch-hover);color:var(--t2)}
.ch-item.active{background:var(--ch-active);color:var(--ch-active-t)}
.ch-item.unread{color:var(--t1);font-weight:600}
.ch-item-icon{font-size:16px;color:var(--t4);font-weight:700;flex-shrink:0;width:16px;text-align:center}
.ch-item.active .ch-item-icon{color:var(--t1)}
.ch-item-name{flex:1;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ch-item-badge{background:#ed4245;color:#fff;font-size:10px;font-weight:700;padding:1px 5px;border-radius:8px;flex-shrink:0}
.ch-item-private{font-size:11px;color:var(--t5);flex-shrink:0}
.ch-gear-icon{opacity:0;font-size:13px;color:var(--t4);cursor:pointer;transition:all .15s;padding:3px;flex-shrink:0}
.ch-item:hover .ch-gear-icon{opacity:1}
.ch-gear-icon:hover{color:var(--t1);transform:rotate(30deg)}
.ch-item-announce{font-size:11px;background:rgba(88,101,242,.2);color:var(--accent);padding:1px 5px;border-radius:4px;flex-shrink:0}

/* Voice subusers */
.vc-sub-users{padding:0 8px 4px 28px}
.vc-sub-user{display:flex;align-items:center;gap:6px;padding:2px 6px;border-radius:var(--r1);font-size:13px;color:var(--t4);cursor:pointer}
.vc-sub-user:hover{background:var(--ch-hover);color:var(--t2)}
.vc-sub-avatar{width:20px;height:20px;border-radius:50%}
.vc-sub-user.speaking{color:var(--neon3)}

/* DM List */
.dm-list{flex:1;overflow-y:auto;padding:8px 0}
.dm-search-wrap{padding:8px;flex-shrink:0}
.dm-search{width:100%;background:var(--bg-0);border:none;border-radius:var(--r1);padding:6px 8px;font-size:13px;color:var(--t2);cursor:pointer}
.dm-search:focus{background:var(--bg-0);cursor:text}
.dm-section-title{padding:14px 8px 4px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--t4)}
.dm-item{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:var(--r1);margin:0 8px;cursor:pointer;transition:background .1s}
.dm-item:hover{background:var(--ch-hover)}
.dm-item.active{background:var(--ch-active)}
.dm-avatar-wrap{position:relative;flex-shrink:0}
.dm-avatar{width:32px;height:32px;border-radius:50%}
.dm-status-dot{position:absolute;bottom:-1px;right:-1px;width:10px;height:10px;border-radius:50%;border:2px solid var(--bg-1)}
.dm-info{flex:1;min-width:0}
.dm-name{font-size:15px;font-weight:600;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dm-preview{font-size:13px;color:var(--t4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dm-time{font-size:12px;color:var(--t5);flex-shrink:0}

/* Lofi strip */
.lofi-strip{display:flex;align-items:center;gap:8px;padding:8px;background:var(--bg-0);border-top:1px solid var(--border);flex-shrink:0}
.lofi-vinyl{font-size:20px;flex-shrink:0;transition:transform 5s linear}
.lofi-strip:not(.paused) .lofi-vinyl{animation:spin 5s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.lofi-info{flex:1;min-width:0}
.lofi-track-name{font-size:11px;color:var(--neon);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:4px}
.lofi-controls{display:flex;align-items:center;gap:6px}
.lofi-btn{font-size:12px;color:var(--t4);transition:color .15s;padding:2px}
.lofi-btn:hover{color:var(--t1)}
.lf-play-btn{color:var(--neon) !important}
.lf-vol{width:60px;-webkit-appearance:none;appearance:none;height:3px;background:rgba(255,255,255,.2);border-radius:3px;outline:none;cursor:pointer}
.lf-vol::-webkit-slider-thumb{-webkit-appearance:none;width:10px;height:10px;border-radius:50%;background:var(--neon);cursor:pointer}

/* User panel */
.user-panel{display:flex;align-items:center;gap:8px;padding:8px;background:var(--bg-0);border-top:1px solid var(--border);min-height:52px;flex-shrink:0}
.up-avatar-wrap{position:relative;cursor:pointer;flex-shrink:0}
.up-avatar{width:32px;height:32px;border-radius:50%;transition:opacity .15s}
.up-avatar:hover{opacity:.85}
.up-status-ring{position:absolute;bottom:-2px;right:-2px;width:12px;height:12px;border-radius:50%;border:2px solid var(--bg-0)}
.up-meta{flex:1;min-width:0;cursor:pointer}
.up-name{font-size:14px;font-weight:700;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.up-tag{font-size:12px;color:var(--t4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.up-controls{display:flex;gap:2px}
.up-ctrl-btn{width:32px;height:32px;border-radius:var(--r1);display:flex;align-items:center;justify-content:center;color:var(--t3);transition:background .1s,color .1s}
.up-ctrl-btn:hover{background:var(--ch-hover);color:var(--t1)}
.up-ctrl-btn svg{pointer-events:none}

/* Status dot colors */
.online,.up-status-ring.online,.dm-status-dot.online,.upp-status-dot.online{background:#57f287}
.idle,.up-status-ring.idle,.dm-status-dot.idle,.upp-status-dot.idle{background:#faa61a}
.dnd,.up-status-ring.dnd,.dm-status-dot.dnd,.upp-status-dot.dnd{background:#ed4245}
.invisible,.offline,.up-status-ring.invisible,.up-status-ring.offline,.dm-status-dot.invisible,.upp-status-dot.offline{background:#747f8d}

/* ══════════════════════════════════════════════
   MAIN CONTENT
══════════════════════════════════════════════ */
.main-content{flex:1;display:flex;flex-direction:column;overflow:hidden;position:relative}

/* ── Chat Header ── */
.chat-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 16px;height:48px;min-height:48px;
  background:var(--bg-2);border-bottom:1px solid var(--border);
  flex-shrink:0;gap:8px;
  position:relative;z-index:10;
}
.ch-header-left{display:flex;align-items:center;gap:8px;overflow:hidden}
.ch-icon{font-size:18px;font-weight:700;color:var(--t4);flex-shrink:0}
.ch-name{font-size:16px;font-weight:700;color:var(--t1)}
.ch-header-sep{width:1px;height:20px;background:var(--border);flex-shrink:0}
.ch-desc{font-size:14px;color:var(--t4);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ch-header-right{display:flex;align-items:center;gap:4px;flex-shrink:0}
.ch-hdr-btn{width:24px;height:24px;color:var(--t4);transition:color .15s;display:flex;align-items:center;justify-content:center;border-radius:var(--r1);padding:4px}
.ch-hdr-btn:hover{color:var(--t1)}

/* Theme picker */
.theme-picker{position:absolute;top:52px;right:12px;z-index:10005;background:var(--bg-4);border-radius:var(--r2);padding:6px;box-shadow:var(--shadow);border:1px solid var(--border);min-width:190px}
.theme-opt{display:flex;align-items:center;padding:8px 12px;border-radius:var(--r1);font-size:14px;cursor:pointer;color:var(--t1) !important;background:transparent !important;transition:background .15s}
.theme-opt:hover{background:var(--accent) !important;color:#fff !important}
.theme-preview-dot{width:12px;height:12px;border-radius:50%;display:inline-block;margin-right:10px;border:1.2px solid rgba(255,255,255,0.18);box-shadow:0 1px 3px rgba(0,0,0,0.25);flex-shrink:0}
[data-theme="light"] .theme-preview-dot{border-color:rgba(0,0,0,0.18)}

/* ── Search Bar ── */
.search-bar{display:flex;align-items:center;gap:8px;padding:8px 16px;background:var(--bg-3);border-bottom:1px solid var(--border);flex-shrink:0}
.search-inp{flex:1;background:var(--bg-0);border:1px solid var(--border);border-radius:var(--r1);padding:6px 10px;font-size:14px;color:var(--t1)}
.search-inp:focus{border-color:var(--accent)}
.search-clear{color:var(--t4);font-size:16px;transition:color .15s}
.search-clear:hover{color:var(--t1)}

/* ── Pinned Dropdown ── */
.pinned-dropdown{position:absolute;top:52px;right:0;z-index:10005;background:var(--bg-4);border-radius:var(--r2);width:420px;max-height:400px;overflow-y:auto;box-shadow:var(--shadow);border:1px solid var(--border)}
.pinned-header{padding:12px 16px;font-size:14px;font-weight:700;color:var(--t1);border-bottom:1px solid var(--border)}
.pinned-list{padding:8px}
.pinned-item{padding:10px;border-radius:var(--r1);margin-bottom:4px;background:var(--bg-5);font-size:13px;color:var(--t2)}
.pinned-item-meta{font-size:11px;color:var(--t4);margin-bottom:4px}
.pinned-empty{padding:16px;text-align:center;color:var(--t4);font-size:13px}

/* ── Chat Feed ── */
.chat-feed{flex:1;overflow-y:auto;padding:16px 0;display:flex;flex-direction:column;gap:0}
.text-view{display:flex;flex-direction:column;height:100%;overflow:hidden;position:relative}
.feed-start{padding:16px 16px 32px;text-align:left}
.feed-start h2{font-family:'Outfit',sans-serif;font-size:32px;font-weight:900;color:var(--t1);margin-bottom:4px}
.feed-start p{color:var(--t4);font-size:15px}

/* Message group */
.msg-group{display:flex;gap:12px;padding:2px 16px;border-radius:var(--r1);transition:background .1s;position:relative}
.msg-group:hover{background:var(--msg-hover)}
.msg-group.first-in-group{margin-top:16px}
.msg-avatar-col{width:40px;flex-shrink:0}
.msg-avatar{width:40px;height:40px;border-radius:50%;cursor:pointer;transition:opacity .15s}
.msg-avatar:hover{opacity:.85}
.msg-avatar-placeholder{width:40px;height:40px;flex-shrink:0;display:flex;align-items:flex-start;justify-content:center;padding-top:4px}
.msg-timestamp-small{font-size:11px;color:var(--t5);white-space:nowrap}
.msg-content-col{flex:1;min-width:0}
.msg-header{display:flex;align-items:baseline;gap:8px;margin-bottom:2px}
.msg-author{font-size:15px;font-weight:600;color:var(--t1);cursor:pointer;transition:text-decoration .1s}
.msg-author:hover{text-decoration:underline}
.msg-role-badge{font-size:10px;font-weight:700;padding:1px 5px;border-radius:3px;color:#fff}
.msg-timestamp{font-size:12px;color:var(--t5)}
.msg-text{font-size:15px;line-height:1.5;color:var(--t2);word-break:break-word;white-space:pre-wrap}
.msg-text a{color:var(--neon)}
.msg-text code{background:var(--bg-5);border-radius:3px;padding:1px 5px;font-size:13px;font-family:'Consolas',monospace}
.msg-text .spoiler{background:var(--t5);color:transparent;border-radius:3px;padding:0 4px;cursor:pointer;transition:all .2s}
.msg-text .spoiler.revealed{background:var(--bg-5);color:var(--t2)}
.msg-image{max-width:400px;max-height:300px;border-radius:var(--r2);margin-top:4px;cursor:pointer;transition:opacity .15s}
.msg-image:hover{opacity:.9}
.msg-embed{margin-top:4px;background:var(--bg-3);border-left:4px solid var(--accent);border-radius:0 var(--r1) var(--r1) 0;padding:10px 12px;max-width:520px}
.msg-file{display:flex;align-items:center;gap:8px;background:var(--bg-3);border-radius:var(--r1);padding:10px 12px;margin-top:4px;border:1px solid var(--border);max-width:400px}
.msg-file-icon{font-size:24px}
.msg-file-info{flex:1;min-width:0}
.msg-file-name{font-size:14px;font-weight:600;color:var(--neon);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msg-file-size{font-size:12px;color:var(--t4)}
.msg-edited{font-size:11px;color:var(--t5);margin-left:4px}
.msg-system{padding:4px 16px;font-size:13px;color:var(--t4);font-style:italic;display:flex;align-items:center;gap:8px}
.msg-replied{display:flex;align-items:center;gap:6px;margin-bottom:2px;font-size:13px;color:var(--t4);cursor:pointer;transition:color .15s}
.msg-replied:hover{color:var(--t2)}
.msg-replied-avatar{width:16px;height:16px;border-radius:50%}
.msg-reply-ref{max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Reactions */
.msg-reactions{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.reaction{display:flex;align-items:center;gap:4px;padding:3px 8px;border-radius:8px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);cursor:pointer;transition:all .15s;font-size:13px}
.reaction:hover{background:rgba(88,101,242,.2);border-color:rgba(88,101,242,.4)}
.reaction.me{background:rgba(88,101,242,.2);border-color:rgba(88,101,242,.6)}
.reaction-count{font-size:12px;font-weight:600;color:var(--t2)}

/* Hover actions */
.msg-actions{position:absolute;top:-16px;right:16px;background:var(--bg-4);border:1px solid var(--border);border-radius:var(--r2);display:none;gap:2px;padding:4px;z-index:10;box-shadow:var(--shadow)}
.msg-group:hover .msg-actions{display:flex}
.msg-action-btn{width:28px;height:28px;border-radius:var(--r1);color:var(--t4);font-size:14px;transition:background .1s,color .1s;display:flex;align-items:center;justify-content:center}
.msg-action-btn:hover{background:var(--ch-hover);color:var(--t1)}
.msg-action-btn.danger:hover{background:rgba(237,66,69,.2);color:#ed4245}

/* Typing bar - floating overlay alignment with messages */
.typing-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px 4px 68px;
  font-size: 12px;
  color: var(--t4);
  background: transparent;
  border: none;
  flex-shrink: 0;
  height: 20px;
  box-sizing: border-box;
  margin-top: -20px;
  position: relative;
  z-index: 2;
  pointer-events: none;
}
.typing-bar.hidden{display:none !important}
.typing-dots{display:flex;gap:4px;align-items:center}
.typing-dots span{width:6px;height:6px;border-radius:50%;background:var(--t4);animation:typingBounce 1.2s infinite ease}
.typing-dots span:nth-child(2){animation-delay:.2s}
.typing-dots span:nth-child(3){animation-delay:.4s}
@keyframes typingBounce{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-4px)}}

/* Jump to bottom */
.jump-bottom{position:absolute;bottom:130px;left:50%;transform:translateX(-50%);background:var(--bg-4);border:1px solid var(--border);border-radius:20px;padding:6px 16px;font-size:13px;color:var(--t2);box-shadow:var(--shadow);transition:all .15s;z-index:10}
.jump-bottom:hover{background:var(--bg-5);color:var(--t1)}

/* Reply/edit bar */
.reply-bar,.edit-bar{position:relative;padding:6px 16px;background:var(--bg-3);border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;font-size:13px;color:var(--t3);flex-shrink:0}
.reply-cancel,.edit-cancel{color:var(--t4);font-size:14px;transition:color .15s;cursor:pointer}
.reply-cancel:hover,.edit-cancel:hover{color:var(--t1)}

/* Input area */
/* Apple iPhone 17 Dynamic Island Action Sheet */
@keyframes iosSpringIn {
  0% { opacity: 0; transform: translateY(16px) scale(0.9); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.ios-action-tile {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 10px 14px;
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", sans-serif;
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: -0.2px;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.ios-action-tile:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.22);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

.ios-action-tile:active {
  transform: scale(0.95);
  background: rgba(255, 255, 255, 0.18);
}

.ios-icon-badge {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  flex-shrink: 0;
}

/* ── APPLE iMESSAGE / iOS 18 CAPSULE CHAT INPUT BAR ── */
.input-area {
  background: rgba(18, 18, 24, 0.85);
  backdrop-filter: blur(40px) saturate(200%);
  -webkit-backdrop-filter: blur(40px) saturate(200%);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
  position: relative;
}

.input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.inp-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.85);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
  font-size: 13px;
  font-weight: 700;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
}
.inp-btn:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.22);
  color: #fff;
  transform: scale(1.05);
}
.inp-btn:active {
  transform: scale(0.94);
}

.inp-wrap {
  flex: 1;
  position: relative;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 22px;
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 0 12px;
  transition: all 0.25s ease;
}
.inp-wrap:focus-within {
  border-color: rgba(0, 122, 255, 0.6);
  box-shadow: 0 0 16px rgba(0, 122, 255, 0.25);
  background: rgba(255, 255, 255, 0.09);
}

.inp-area {
  flex: 1;
  padding: 8px 0;
  max-height: 180px;
  overflow-y: auto;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
  font-size: 14.5px;
  color: #fff;
  line-height: 1.4;
  outline: none;
  word-break: break-word;
  align-self: center;
}
.inp-area:empty::before {
  content: attr(data-ph);
  color: rgba(255, 255, 255, 0.35);
  pointer-events: none;
}

.inp-right-btns {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.inp-fmt-bar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
}

.fmt-btn {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
  background: transparent;
  border: none;
  transition: all 0.15s ease;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fmt-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

.send-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #007aff;
  border: none;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  flex-shrink: 0;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 122, 255, 0.4);
}
.send-btn:hover {
  background: #0062cc;
  transform: scale(1.08);
}
.send-btn:active {
  transform: scale(0.94);
}

/* Float dictate button */
.float-dictate{position:absolute;bottom:80px;right:20px;z-index:5}
.dictate-btn{width:40px;height:40px;border-radius:50%;background:var(--bg-4);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:16px;transition:all .2s;box-shadow:var(--shadow)}
.dictate-btn:hover{background:var(--neon);border-color:var(--neon)}
.dictate-btn.dictating{background:var(--neon);border-color:var(--neon);animation:pulse 1s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 var(--neon-glow)}50%{box-shadow:0 0 0 8px transparent}}
.dictate-waves{display:flex;align-items:center;gap:2px;height:16px}
.dictate-waves span{width:3px;border-radius:3px;background:currentColor;animation:wave .8s infinite ease}
.dictate-waves span:nth-child(2){animation-delay:.1s;height:10px}
.dictate-waves span:nth-child(3){animation-delay:.2s;height:14px}
.dictate-waves span:nth-child(4){animation-delay:.3s;height:8px}
.dictate-waves span:nth-child(5){animation-delay:.4s;height:12px}
@keyframes wave{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.5)}}

/* Float subtitle */
.float-sub{position:absolute;bottom:90px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.8);backdrop-filter:blur(10px);border-radius:20px;padding:6px 16px;font-size:13px;color:#fff;white-space:nowrap;max-width:80%;overflow:hidden;text-overflow:ellipsis;z-index:5;border:1px solid rgba(255,255,255,.1)}
.float-sub-speaker{font-weight:700;color:var(--neon);margin-right:6px}

/* ── VOICE VIEW ── */
/* ── VOICE VIEW ── */
.voice-view {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  transition: background 0.8s ease;
}

/* Voice Channel Header – matches text-channel style */
.vc-channel-header {
  flex-shrink: 0;
  z-index: 10;
}

/* Minimized state: collapse to header bar only */
.voice-view.vc-minimized .vc-grid,
.voice-view.vc-minimized .vc-bottom-panels,
.voice-view.vc-minimized #vc-3d-visualizer {
  display: none !important;
}
.voice-view.vc-minimized {
  height: auto !important;
  flex: 0 0 auto !important;
  min-height: 0 !important;
}

/* Voice Background Themes */
.voice-view.theme-default {
  background: radial-gradient(circle at 50% 50%, var(--bg-1), var(--bg-0));
}
.voice-view.theme-space {
  background: radial-gradient(circle at 15% 20%, rgba(124, 58, 237, 0.25), transparent 45%), 
              radial-gradient(circle at 80% 80%, rgba(219, 39, 119, 0.2), transparent 45%), 
              #070710;
  animation: spaceGlow 20s infinite alternate ease-in-out;
}
@keyframes spaceGlow {
  0% { background-position: 0% 0%; }
  100% { background-position: 100% 100%; }
}
.voice-view.theme-cyber {
  background: linear-gradient(rgba(0, 0, 0, 0.4) 0px, transparent 1px), 
              linear-gradient(90deg, rgba(0, 242, 254, 0.04) 1px, transparent 1px), 
              #09090e;
  background-size: 30px 30px;
  animation: gridScroll 30s infinite linear;
}
@keyframes gridScroll {
  from { background-position: 0 0; }
  to { background-position: 0 1000px; }
}
.voice-view.theme-lofi {
  background: linear-gradient(135deg, #1b0a24, #36112d, #521c2c, #1f0b17);
  background-size: 400% 400%;
  animation: lofiSunset 12s infinite alternate ease-in-out;
}
@keyframes lofiSunset {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.voice-view.theme-ocean {
  background: radial-gradient(circle at 50% 0%, rgba(0, 153, 255, 0.15), transparent 60%),
              radial-gradient(circle at 20% 100%, rgba(0, 242, 254, 0.05), transparent 50%),
              #030914;
}

.vc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: rgba(23, 24, 30, 0.7);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  z-index: 10;
}
.vc-header-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--t1);
}
.vc-header-status-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(57, 255, 20, 0.08);
  border: 1px solid rgba(57, 255, 20, 0.15);
  color: var(--neon3);
  font-size: 10px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 12px;
  font-family: 'Outfit', sans-serif;
  letter-spacing: 0.2px;
}
.vc-icon {
  font-size: 20px;
}
.vc-header-btns {
  display: flex;
  align-items: center;
  gap: 8px;
}
.vc-hdr-btn {
  padding: 6px 12px;
  border-radius: var(--r2);
  background: var(--bg-4);
  color: var(--t2);
  font-size: 13px;
  font-weight: 600;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.vc-hdr-btn:hover {
  background: var(--bg-5);
  color: var(--t1);
  transform: translateY(-1px);
}
.vc-hdr-btn.active {
  background: var(--accent);
  color: #fff;
}
.vc-hdr-btn.danger {
  background: rgba(237, 66, 69, 0.15);
  color: #ed4245;
  border: 1px solid rgba(237, 66, 69, 0.1);
}
.vc-hdr-btn.danger:hover {
  background: #ed4245;
  color: #fff;
}
.vc-theme-select-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-right: 8px;
}
.vc-theme-select {
  background: var(--bg-4);
  border: 1px solid var(--border);
  color: var(--t2);
  border-radius: var(--r2);
  font-size: 12px;
  padding: 4px 8px;
  outline: none;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.15s;
}
.vc-theme-select:hover {
  background: var(--bg-5);
  color: var(--t1);
}

.vc-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
  padding: 20px;
  overflow-y: auto;
  align-content: start;
  z-index: 1;
}

/* Glassmorphic voice participant card */
.vc-card {
  background: rgba(23, 24, 30, 0.4);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--r3);
  overflow: hidden;
  aspect-ratio: 16/10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  transform: translateZ(0);
}
.vc-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--r3);
  padding: 2px;
  background: linear-gradient(135deg, rgba(255,255,255,0.1), transparent);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.vc-card.speaking {
  border-color: transparent;
  box-shadow: 0 0 25px rgba(0, 242, 254, 0.25), inset 0 0 15px rgba(0, 242, 254, 0.1);
  transform: translateY(-2px) scale(1.01);
}
.vc-card.speaking::before {
  background: linear-gradient(135deg, var(--neon), var(--neon2));
}
.vc-card-banner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 35%;
  background: linear-gradient(135deg, var(--accent), rgba(0,0,0,0.5));
  z-index: 1;
  opacity: 0.65;
  transition: opacity 0.3s;
}
.vc-card-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 2;
}
.vc-card-video.active {
  opacity: 1;
}
.vc-card-avatar-container {
  position: relative;
  z-index: 3;
  margin-top: 10px;
  transition: transform 0.3s var(--bounce);
}
.vc-card.speaking .vc-card-avatar-container {
  transform: scale(1.05);
}
.vc-card-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 3px solid rgba(23, 24, 30, 0.8);
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
.vc-card-mic-icon {
  position: absolute;
  bottom: -2px;
  right: -2px;
  font-size: 13px;
  background: rgba(0, 0, 0, 0.75);
  border: 1.5px solid var(--border);
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.vc-card-badges {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 4px;
  z-index: 3;
}
.vc-badge-icon {
  font-size: 11px;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(4px);
  padding: 3px 6px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.06);
  color: #fff;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 2px;
}
.vc-badge-icon.muted {
  background: rgba(237, 66, 69, 0.85);
  border-color: rgba(237, 66, 69, 0.2);
}
.vc-badge-icon.muted-local {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  border-color: rgba(245, 158, 11, 0.3);
}
.vc-badge-live {
  font-size: 9px;
  font-weight: 900;
  color: #fff;
  background: #ed4245;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.5px;
  animation: livePulse 1.5s infinite;
  box-shadow: 0 0 10px rgba(237,66,69,0.4);
}
@keyframes livePulse {
  0%, 100% { opacity: 0.9; }
  50% { opacity: 0.65; }
}
.vc-card-name {
  position: absolute;
  bottom: 8px;
  left: 8px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  padding: 3px 8px;
  border-radius: var(--r1);
  border: 1px solid rgba(255,255,255,0.05);
  z-index: 3;
}
.vc-bubble {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border-neon);
  color: var(--neon);
  padding: 6px 12px;
  border-radius: 12px;
  font-size: 11px;
  white-space: nowrap;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
  pointer-events: none;
  z-index: 8;
  box-shadow: 0 4px 15px rgba(0, 242, 254, 0.15);
}
.vc-bubble.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* CSS Bouncing Audio Wave Visualizer */
.vc-audio-wave {
  display: flex;
  align-items: center;
  gap: 3px;
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  padding: 5px 8px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.2s;
  z-index: 3;
}
.vc-card.speaking .vc-audio-wave {
  opacity: 1;
  transform: scale(1);
}
.vc-audio-wave span {
  width: 3px;
  height: 3px;
  background-color: var(--neon);
  border-radius: 2px;
}
.vc-card.speaking .vc-audio-wave span:nth-child(1) { animation: voiceWaveBar 0.7s infinite alternate ease-in-out; }
.vc-card.speaking .vc-audio-wave span:nth-child(2) { animation: voiceWaveBar 0.5s infinite alternate ease-in-out 0.1s; }
.vc-card.speaking .vc-audio-wave span:nth-child(3) { animation: voiceWaveBar 0.8s infinite alternate ease-in-out 0.2s; }
.vc-card.speaking .vc-audio-wave span:nth-child(4) { animation: voiceWaveBar 0.6s infinite alternate ease-in-out 0.3s; }
@keyframes voiceWaveBar {
  0% { height: 3px; }
  100% { height: 16px; }
}

/* Hover Quick Actions Layer */
.vc-card-actions {
  position: absolute;
  inset: 0;
  background: rgba(12, 13, 18, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 10;
}
.vc-card:hover .vc-card-actions {
  opacity: 1;
  pointer-events: auto;
}
.vca-btn {
  padding: 6px 14px;
  border-radius: var(--r2);
  background: var(--bg-4);
  border: 1px solid var(--border);
  color: var(--t1);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  gap: 6px;
}
.vca-btn:hover {
  background: var(--accent);
  border-color: var(--accent-h);
  transform: translateY(-1px);
}
.vca-btn.muted-local {
  background: rgba(245, 158, 11, 0.15);
  border-color: #f59e0b;
  color: #f59e0b;
}
.vca-btn.muted-local:hover {
  background: #f59e0b;
  color: #fff;
}
.vca-vol-container {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 80%;
  background: var(--bg-3);
  padding: 6px 12px;
  border-radius: var(--r2);
  border: 1px solid var(--border);
}
.vca-vol-label {
  font-size: 11px;
  color: var(--t3);
  font-weight: 700;
  white-space: nowrap;
}
.vca-vol-slider {
  flex: 1;
  height: 4px;
  accent-color: var(--accent);
  background: var(--bg-5);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}

/* VTP panel & Soundboard Redesigns */
.vc-bottom-panels {
  display: flex;
  gap: 16px;
  height: 220px;
  min-height: 220px;
  background: var(--bg-0);
  border-top: 1px solid var(--border);
  padding: 12px 16px;
  flex-shrink: 0;
  transition: all 0.3s ease;
  z-index: 5;
}
.vc-bottom-panels.collapsed-all {
  height: 0;
  min-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-top: none;
  overflow: hidden;
}
.vc-bottom-panels .vtp-panel.collapsed-panel,
.vc-bottom-panels .vc-soundboard.collapsed-panel {
  display: none;
}
.vtp-panel {
  height: 180px;
  background: var(--bg-0);
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}
.vtp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  font-weight: 700;
  color: var(--t3);
  flex-shrink: 0;
}
.vtp-log {
  flex: 1;
  overflow-y: auto;
  padding: 10px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Beautiful transcription speech bubble layout */
.vtp-item {
  display: flex;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--r2);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.03);
  align-items: flex-start;
  transition: background 0.15s;
}
.vtp-item:hover {
  background: rgba(255, 255, 255, 0.04);
}
.vtp-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.vtp-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.vtp-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
}
.vtp-user {
  font-size: 12px;
  font-weight: 700;
  color: var(--neon);
}
.vtp-time {
  font-size: 10px;
  color: var(--t5);
}
.vtp-text {
  font-size: 13px;
  color: var(--t2);
  word-break: break-word;
  line-height: 1.4;
}
.vtp-empty {
  color: var(--t5);
  font-size: 13px;
  font-style: italic;
  text-align: center;
  margin-top: 20px;
}

/* Voice active bar */
.voice-active-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  background: rgba(35, 134, 54, 0.1);
  border-top: 1px solid rgba(57, 255, 20, 0.15);
  flex-shrink: 0;
}
.vab-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.vab-status {
  font-size: 12px;
  font-weight: 700;
  color: var(--neon3);
}
.vab-channel {
  font-size: 12px;
  color: var(--t4);
}
.vab-disconnect {
  width: 28px;
  height: 28px;
  border-radius: var(--r1);
  background: rgba(237, 66, 69, 0.2);
  color: #ed4245;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.vab-disconnect:hover {
  background: #ed4245;
  color: #fff;
}

/* ══════════════════════════════════════════════
   MEMBERS PANEL
══════════════════════════════════════════════ */
.members-panel{width:var(--mp-w);min-width:var(--mp-w);background:var(--bg-1);border-left:1px solid var(--border);overflow-y:auto;transition:width .2s,min-width .2s}
.members-panel.hidden-panel{width:0;min-width:0;border:none;overflow:hidden}
.mp-header{padding:14px 12px 6px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--t4)}
.mp-content{padding:0 8px 16px}
.mp-role-header{padding:12px 8px 4px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--t4)}
.mp-member{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:var(--r1);cursor:pointer;transition:background .1s}
.mp-member:hover{background:var(--ch-hover)}
.mp-member-avatar-wrap{position:relative;flex-shrink:0}
.mp-member-avatar{width:32px;height:32px;border-radius:50%}
.mp-member-status{position:absolute;bottom:-2px;right:-2px;width:10px;height:10px;border-radius:50%;border:2px solid var(--bg-1)}
.mp-member-info{flex:1;min-width:0}
.mp-member-name{font-size:14px;font-weight:500;color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mp-member-role{font-size:11px;color:var(--t5)}
.mp-count{color:var(--t1)}

/* ══════════════════════════════════════════════
   EMOJI PICKER
══════════════════════════════════════════════ */
.emoji-picker{position:fixed;z-index:10005;background:var(--bg-4);border-radius:var(--r3);width:340px;height:400px;box-shadow:var(--shadow);border:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden}
.ep-search-wrap{padding:10px 10px 6px;flex-shrink:0}
.ep-search{width:100%;background:var(--bg-0);border:1px solid var(--border);border-radius:var(--r1);padding:6px 10px;font-size:13px;color:var(--t1)}
.ep-search:focus{border-color:var(--accent)}
.ep-cats{display:flex;gap:2px;padding:4px 10px;border-bottom:1px solid var(--border);flex-shrink:0;overflow-x:auto}
.ep-cat-btn{padding:6px;border-radius:var(--r1);font-size:16px;color:var(--t4);transition:all .15s;flex-shrink:0}
.ep-cat-btn:hover{background:var(--ch-hover);color:var(--t1)}
.ep-cat-btn.active{color:var(--neon)}
.ep-grid{flex:1;overflow-y:auto;padding:8px 10px;display:grid;grid-template-columns:repeat(8,1fr);gap:2px}
.ep-emoji{font-size:22px;padding:4px;border-radius:var(--r1);cursor:pointer;text-align:center;transition:background .1s;line-height:1}
.ep-emoji:hover{background:var(--ch-hover)}
.ep-section-title{grid-column:1/-1;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--t4);padding:8px 2px 4px}

/* ══════════════════════════════════════════════
   GIF PICKER
══════════════════════════════════════════════ */
.gif-picker{position:fixed;z-index:10005;background:var(--bg-4);border-radius:var(--r3);width:330px;height:380px;box-shadow:var(--shadow);border:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden}
.gif-header{padding:10px 14px;font-size:14px;font-weight:700;color:var(--t1);border-bottom:1px solid var(--border)}
.gif-grid{flex:1;overflow-y:auto;padding:8px;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.gif-item{border-radius:var(--r2);overflow:hidden;cursor:pointer;background:var(--bg-5);height:90px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);transition:transform .15s,border-color .15s;box-sizing:border-box}
.gif-item img{width:100%;height:100%;object-fit:cover;pointer-events:none}
.gif-item:hover{transform:scale(1.02);border-color:var(--accent)}

/* ══════════════════════════════════════════════
   CONTEXT MENU
══════════════════════════════════════════════ */
.ctx-menu{position:fixed;z-index:10005;background:var(--bg-4);border-radius:var(--r2);padding:6px;box-shadow:var(--shadow);border:1px solid var(--border);min-width:188px;animation:dropdownIn .1s var(--ease)}
.ctx-item{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:var(--r1);font-size:14px;color:var(--t2);cursor:pointer;transition:background .1s,color .1s;user-select:none}
.ctx-item:hover{background:var(--accent);color:#fff}
.ctx-item.danger{color:#ed4245}
.ctx-item.danger:hover{background:#ed4245;color:#fff}
.ctx-sep{height:1px;background:var(--border);margin:4px 0}
.ctx-header{padding:6px 8px;font-size:11px;font-weight:700;text-transform:uppercase;color:var(--t5);cursor:default}

/* ══════════════════════════════════════════════
   USER PROFILE POPUP
══════════════════════════════════════════════ */
.upp{position:fixed;z-index:800;background:var(--bg-3);border-radius:var(--r3);width:340px;box-shadow:0 8px 48px rgba(0,0,0,.8);border:1px solid rgba(255,255,255,.08);overflow:hidden;animation:modalIn .2s var(--bounce)}
.upp-banner{height:90px;background:linear-gradient(135deg,var(--neon),var(--neon2))}
.upp-body{padding:12px 16px 16px}
.upp-avatar-wrap{position:relative;margin-top:-46px;margin-bottom:10px;width:80px}
.upp-avatar-wrap img{width:80px;height:80px;border-radius:50%;border:4px solid var(--bg-3)}
.upp-status-dot{position:absolute;bottom:2px;right:2px;width:18px;height:18px;border-radius:50%;border:3px solid var(--bg-3)}
.upp-badges{display:flex;gap:6px;margin-bottom:8px;flex-wrap:wrap}
.upp-badge{font-size:12px;padding:2px 8px;border-radius:4px;font-weight:700}
.upp-name{font-size:18px;font-weight:800;font-family:'Outfit',sans-serif;color:var(--t1);margin-bottom:2px}
.upp-tag{font-size:13px;color:var(--t4);margin-bottom:10px}
.upp-divider{height:1px;background:var(--border);margin:10px 0}
.upp-section{margin-bottom:12px}
.upp-section-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--t4);margin-bottom:4px}
.upp-bio{font-size:14px;color:var(--t2);line-height:1.5}
.upp-status-text{font-size:14px;color:var(--t3)}
.upp-actions{display:flex;gap:8px;margin-top:12px}

/* ══════════════════════════════════════════════
   TOAST NOTIFICATIONS (iOS card style)
══════════════════════════════════════════════ */
.toasts {
  position: fixed;
  top: 56px;
  right: 16px;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
  max-width: 360px;
  width: 360px;
}
.toast {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  background: rgba(18, 18, 22, 0.88) !important;
  backdrop-filter: blur(24px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(200%) !important;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.10) !important;
  padding: 14px 16px 18px 16px !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255,255,255,0.05) !important;
  pointer-events: all;
  transition: all 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  transform: translateY(-20px) scale(0.92);
  opacity: 0;
  box-sizing: border-box;
  overflow: hidden;
  cursor: pointer;
}
.toast:hover { filter: brightness(1.08); }
.toast.info    { border-left: 4px solid #5865f2 !important; }
.toast.success { border-left: 4px solid #22c55e !important; }
.toast.warn    { border-left: 4px solid #eab308 !important; }
.toast.error   { border-left: 4px solid #ef4848 !important; }
/* iOS card header row */
.ios-toast-header { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-bottom: 6px; padding-right: 28px; box-sizing: border-box; }
.ios-toast-app { display: flex; align-items: center; gap: 8px; }
.ios-toast-app-icon { width: 22px; height: 22px; border-radius: 6px; object-fit: cover; box-shadow: 0 2px 8px rgba(0,0,0,0.4); }
.ios-toast-app-name { font-size: 11px; font-weight: 800; letter-spacing: 0.8px; color: rgba(255,255,255,0.65); text-transform: uppercase; }
.ios-toast-time { font-size: 11px; color: rgba(255,255,255,0.35); font-weight: 600; }
/* iOS card body */
.ios-toast-body { display: flex; flex-direction: column; gap: 4px; width: 100%; padding-right: 22px; }
.ios-toast-title-row { display: flex; align-items: center; gap: 8px; }
.ios-badge-svg { width: 16px; height: 16px; flex-shrink: 0; }
.ios-toast-title { font-size: 14px; font-weight: 800; color: #ffffff; }
.ios-toast-msg { font-size: 13px; line-height: 1.45; color: rgba(255,255,255,0.82); margin-left: 24px; }
/* Close button */
.ios-toast-close {
  position: absolute; top: 14px; right: 14px;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.45);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; cursor: pointer; transition: all 0.2s;
}
.ios-toast-close:hover { background: rgba(255,255,255,0.2); color: #fff; transform: scale(1.1); }
/* Progress bar */
.toast-progress-bar {
  position: absolute; bottom: 0; left: 0;
  height: 3px; width: 100%; transform-origin: left;
  transition: transform linear; z-index: 3;
}
.toast.info    .toast-progress-bar { background: linear-gradient(90deg, #5865f2, #854eee); box-shadow: 0 0 8px #5865f2; }
.toast.success .toast-progress-bar { background: linear-gradient(90deg, #22c55e, #10b981); box-shadow: 0 0 8px #22c55e; }
.toast.warn    .toast-progress-bar { background: linear-gradient(90deg, #eab308, #f59e0b); box-shadow: 0 0 8px #eab308; }
.toast.error   .toast-progress-bar { background: linear-gradient(90deg, #ef4848, #f43f5e); box-shadow: 0 0 8px #ef4848; }

/* ══════════════════════════════════════════════
   IMAGE LIGHTBOX
══════════════════════════════════════════════ */
.lightbox{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center}
.lightbox-bg{position:absolute;inset:0;background:rgba(0,0,0,.85);backdrop-filter:blur(4px);cursor:pointer}
.lightbox-close{position:absolute;top:20px;right:20px;z-index:1;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;font-size:18px}
.lightbox-close:hover{background:rgba(255,255,255,.2)}
.lightbox img{position:relative;z-index:1;max-width:90vw;max-height:90vh;border-radius:var(--r2);box-shadow:var(--shadow)}

/* ══════════════════════════════════════════════
   MODALS (CREATE SERVER, CHANNEL, ROLE, INVITE)
══════════════════════════════════════════════ */
.modal-overlay{position:fixed;inset:0;z-index:800;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.7);backdrop-filter:blur(4px)}
.modal-card{background:var(--bg-2);border-radius:var(--r4);padding:24px;width:100%;max-width:480px;position:relative;box-shadow:var(--shadow);border:1px solid rgba(255,255,255,.08);animation:modalIn .3s var(--bounce)}
.modal-x-btn{position:absolute;top:16px;right:16px;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.06);color:var(--t3);font-size:14px;display:flex;align-items:center;justify-content:center;transition:all .15s}
.modal-x-btn:hover{background:rgba(255,255,255,.12);color:var(--t1)}
.role-modal-card{background:var(--bg-2);border-radius:var(--r4);padding:24px;width:100%;max-width:520px;position:relative;box-shadow:var(--shadow);border:1px solid rgba(255,255,255,.08)}
.role-colors{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.role-color-swatch{width:28px;height:28px;border-radius:50%;cursor:pointer;transition:transform .15s;border:2px solid transparent}
.role-color-swatch:hover{transform:scale(1.2)}
.role-color-swatch.selected{border-color:#fff}
.role-perms{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.role-perm-item{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--t2);cursor:pointer}
.role-perm-item input{accent-color:var(--accent);width:16px;height:16px;cursor:pointer}
/* Channel type buttons */
.ch-type-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:10px;border-radius:var(--r1);background:var(--bg-3);color:var(--t3);font-size:14px;font-weight:600;border:2px solid transparent;transition:all .15s;cursor:pointer}
.ch-type-btn:hover{background:var(--bg-4);color:var(--t2)}
.ch-type-btn.active{background:rgba(88,101,242,.2);border-color:var(--accent);color:var(--t1)}
/* Toggle switch */
.toggle-switch{display:flex;align-items:center;gap:10px;cursor:pointer;user-select:none}
.toggle-track{width:44px;height:24px;border-radius:12px;background:var(--bg-5);position:relative;transition:background .2s;flex-shrink:0}
.toggle-switch input:checked ~ .toggle-track{background:var(--accent)}
.toggle-thumb{position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;transition:left .2s;box-shadow:0 1px 4px rgba(0,0,0,.4)}
.toggle-switch input:checked ~ .toggle-track .toggle-thumb{left:22px}
.toggle-switch input{display:none}
.toggle-label{font-size:14px;color:var(--t2)}

/* ══════════════════════════════════════════════
   SHARED FORM ELEMENTS
══════════════════════════════════════════════ */
.stg-heading{font-family:'Outfit',sans-serif;font-weight:800;font-size:20px;color:var(--t1);margin-bottom:20px}
.stg-field{margin-bottom:16px}
.pm-label{display:block;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--t4);margin-bottom:8px}
.stg-input{width:100%;background:var(--bg-0);border:1px solid var(--border);border-radius:var(--r1);padding:10px 12px;font-size:14px;color:var(--t1);transition:border-color .15s}
.stg-input:focus{border-color:var(--accent)}
.stg-textarea{width:100%;background:var(--bg-0);border:1px solid var(--border);border-radius:var(--r1);padding:10px 12px;font-size:14px;color:var(--t1);resize:vertical;min-height:80px;transition:border-color .15s;line-height:1.5}
.stg-textarea:focus{border-color:var(--accent)}
.stg-desc{font-size:14px;color:var(--t4);line-height:1.5;margin-bottom:16px}
.pm-actions{display:flex;align-items:center;gap:8px;justify-content:flex-end}
.pm-btn{padding:8px 20px;border-radius:var(--r2);font-size:14px;font-weight:600;transition:all .15s;cursor:pointer}
.pm-btn.primary{background:var(--accent);color:#fff}
.pm-btn.primary:hover{background:var(--accent-h);transform:translateY(-1px)}
.pm-btn.ghost{background:transparent;color:var(--t2);border:1px solid var(--border)}
.pm-btn.ghost:hover{background:var(--ch-hover);color:var(--t1)}
.pm-btn:active{transform:scale(.97)}

/* ══════════════════════════════════════════════
   FULL SETTINGS VIEW (Discord-style)
══════════════════════════════════════════════ */
.fs-view{position:fixed;inset:0;z-index:9500;display:flex;background:var(--bg-2);animation:fsIn .2s ease-out}
@keyframes fsIn{from{opacity:0;transform:scale(1.03)}to{opacity:1;transform:scale(1)}}
.fs-sidebar{width:35%;min-width:250px;max-width:340px;background:var(--bg-1);border-right:1px solid var(--border);display:flex;justify-content:flex-end}
.fs-sidebar-content{width:240px;padding:60px 8px 60px 8px;display:flex;flex-direction:column;gap:2px;overflow-y:auto}
.fs-nav-header{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--t4);padding:8px 10px;margin-top:10px}
.fs-nav-item{padding:8px 10px;border-radius:var(--r1);font-size:15px;font-weight:500;color:var(--t3);cursor:pointer;transition:all .1s;display:flex;align-items:center;justify-content:space-between}
.fs-nav-item:hover{background:var(--ch-hover);color:var(--t2)}
.fs-nav-item.active{background:var(--ch-active);color:var(--t1)}
.fs-nav-item.danger{color:#ed4245}
.fs-nav-item.danger:hover{background:rgba(237,66,69,.15)}
.fs-nav-divider{height:1px;background:var(--border);margin:8px 10px}
.fs-content-area{flex:1;position:relative;display:flex;justify-content:flex-start;padding:60px 40px;overflow-y:auto;background:var(--bg-2)}
.fs-content-inner{width:100%;max-width:740px}
.fs-close-wrap{position:fixed;top:60px;right:40px;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;color:var(--t4);transition:all .2s}
.fs-close-wrap:hover{color:var(--t1)}
.fs-close-icon{width:36px;height:36px;border-radius:50%;border:2px solid currentColor;display:flex;align-items:center;justify-content:center;font-size:16px}
.fs-close-text{font-size:12px;font-weight:700}
.fs-section{margin-bottom:30px;padding-bottom:30px;border-bottom:1px solid var(--border)}
.fs-section:last-child{border-bottom:none}
/* Settings tables */
.fs-table{width:100%;border-collapse:collapse;margin-top:12px}
.fs-table th{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--t4);padding:8px;border-bottom:1px solid var(--border);text-align:left}
.fs-table td{padding:12px 8px;border-bottom:1px solid var(--border);font-size:14px;color:var(--t2)}
.fs-table tr:last-child td{border:none}
.fs-table tr:hover td{background:var(--ch-hover)}
/* Role row */
.role-row{display:flex;align-items:center;gap:10px;padding:10px;border-radius:var(--r1);cursor:pointer;margin-bottom:4px;transition:background .1s}
.role-row:hover{background:var(--ch-hover)}
.role-dot{width:14px;height:14px;border-radius:50%;flex-shrink:0}
.role-row-name{flex:1;font-size:15px;font-weight:600}
.role-row-count{font-size:13px;color:var(--t4)}
/* Member row in settings */
.stg-member-row{display:flex;align-items:center;gap:10px;padding:8px;border-radius:var(--r1);cursor:default;transition:background .1s}
.stg-member-row:hover{background:var(--ch-hover)}
.stg-member-avatar{width:36px;height:36px;border-radius:50%}
.stg-member-info{flex:1;min-width:0}
.stg-member-name{font-size:14px;font-weight:600;color:var(--t1)}
.stg-member-tag{font-size:12px;color:var(--t4)}
.stg-member-roles{display:flex;gap:4px;flex-wrap:wrap;margin-top:4px}
.stg-member-role-tag{font-size:11px;padding:1px 6px;border-radius:4px;font-weight:700;color:#fff}
.stg-member-actions{display:flex;gap:6px}
/* Permissions grid */
.perms-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.perm-item{display:flex;align-items:flex-start;gap:8px;padding:10px;background:var(--bg-3);border-radius:var(--r1);border:1px solid var(--border)}
.perm-item label{flex:1;cursor:pointer}
.perm-name{font-size:14px;font-weight:600;color:var(--t1);display:block}
.perm-desc{font-size:12px;color:var(--t4);margin-top:2px;display:block}

/* ══════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════ */
@media(max-width:1100px){
  .members-panel{width:0;min-width:0;border:none;overflow:hidden}
}
@media(max-width:768px){
  :root{--ch-w:200px;--srv-w:60px}
  .ch-header-sep,.ch-desc{display:none}
}

/* ====================================================
   NitroChat — Premium Enhancements Additions
   ==================================================== */

/* 1. Explore Public Servers */
.explore-modal-card {
  max-width: 760px !important;
  width: 90%;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.explore-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 16px;
  overflow-y: auto;
  padding: 8px 4px;
  margin-top: 12px;
}
.explore-card {
  background: var(--bg-3);
  border-radius: var(--r3);
  overflow: hidden;
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  transition: transform .2s var(--bounce), border-color .15s, box-shadow .15s;
  cursor: default;
}
.explore-card:hover {
  transform: translateY(-4px);
  border-color: var(--neon);
  box-shadow: 0 8px 24px rgba(0, 242, 254, 0.15);
}
.explore-card-banner {
  height: 64px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  background: linear-gradient(135deg, var(--bg-4), var(--border));
}
.explore-card-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--r2);
  background: var(--bg-2);
  border: 2px solid var(--bg-3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  position: absolute;
  bottom: -18px;
  left: 16px;
  box-shadow: var(--shadow);
}
.explore-card-body {
  padding: 24px 16px 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.explore-card-title {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 15px;
  color: var(--t1);
  margin-bottom: 6px;
}
.explore-card-desc {
  font-size: 12px;
  color: var(--t4);
  line-height: 1.4;
  margin-bottom: 16px;
  flex: 1;
}
.explore-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.explore-card-members {
  font-size: 11px;
  color: var(--neon3);
  font-weight: 700;
}
.explore-card-tag {
  font-size: 10px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--t3);
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  font-weight: 700;
}

/* 2. Quick Status Menu */
.quick-status-popup {
  position: fixed;
  z-index: 10005;
  background: var(--bg-4);
  border-radius: var(--r3);
  padding: 8px;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  width: 230px;
  animation: dropdownIn .15s var(--ease);
}
.qs-header {
  padding: 6px 8px 4px;
  font-size: 10px;
  font-weight: 700;
  color: var(--t4);
  text-transform: uppercase;
  letter-spacing: .8px;
}
.qs-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--r1);
  font-size: 13px;
  font-weight: 500;
  color: var(--t2);
  cursor: pointer;
  transition: background .1s, color .1s;
}
.qs-item:hover {
  background: var(--accent);
  color: #fff;
}
.qs-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.qs-divider {
  height: 1px;
  background: var(--border);
  margin: 6px 0;
}
.qs-status-input-wrap {
  padding: 4px 8px;
}
.qs-input {
  width: 100%;
  background: var(--bg-0);
  border: 1px solid var(--border);
  border-radius: var(--r1);
  padding: 6px 8px;
  font-size: 12px;
  color: var(--t1);
  margin-bottom: 6px;
}
.qs-input:focus {
  border-color: var(--neon);
}

/* 3. Soundboard Panels & Grid */
.vc-bottom-panels {
  display: flex;
  gap: 16px;
  height: 220px;
  min-height: 220px;
  background: var(--bg-0);
  border-top: 1px solid var(--border);
  padding: 12px 16px;
  flex-shrink: 0;
}
.vc-bottom-panels .vtp-panel,
.vc-bottom-panels .vc-soundboard {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--bg-2);
  border-radius: var(--r3);
  border: 1px solid var(--border);
  overflow: hidden;
}
.vsb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 6px;
  padding: 8px;
  overflow-y: auto;
  flex: 1;
}
.vsb-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: var(--r2);
  padding: 6px;
  cursor: pointer;
  transition: all .15s var(--bounce);
  font-size: 11px;
  color: var(--t2);
  height: 58px;
  text-align: center;
}
.vsb-btn:hover {
  background: rgba(0, 242, 254, 0.08);
  border-color: var(--neon);
  color: var(--t1);
  transform: scale(1.04);
}
.vsb-btn:active {
  transform: scale(0.96);
}
.vsb-btn-icon {
  font-size: 20px;
}

/* 4. Advanced Markdown in Chat Feed */
.msg-text h1 { font-family: 'Outfit', sans-serif; font-size: 1.6em; font-weight: 800; color: var(--t1); margin: 10px 0 6px; border-bottom: 1px solid var(--border); padding-bottom: 2px; }
.msg-text h2 { font-family: 'Outfit', sans-serif; font-size: 1.3em; font-weight: 700; color: var(--t1); margin: 8px 0 4px; }
.msg-text h3 { font-family: 'Outfit', sans-serif; font-size: 1.1em; font-weight: 700; color: var(--t1); margin: 6px 0 2px; }
.msg-text blockquote {
  border-left: 4px solid var(--accent);
  background: rgba(88, 101, 242, 0.06);
  padding: 6px 12px;
  margin: 8px 0;
  border-radius: 0 var(--r1) var(--r1) 0;
  color: var(--t3);
  font-style: italic;
}
.msg-text ul {
  margin: 6px 0;
  padding-left: 20px;
}
.msg-text li {
  margin-bottom: 4px;
  font-size: 15px;
  list-style-type: disc;
}
.msg-code-block {
  background: var(--bg-5);
  border: 1px solid var(--border);
  border-radius: var(--r2);
  padding: 10px 14px;
  margin: 8px 0;
  font-family: 'Consolas', monospace;
  font-size: 13px;
  color: var(--t2);
  overflow-x: auto;
  white-space: pre;
  display: block;
  line-height: 1.4;
}

/* 5. Voice Participant State Badges */
.vc-card-badges {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 6px;
  z-index: 5;
}
.vc-badge-icon {
  background: rgba(0, 0, 0, 0.7);
  border-radius: 50%;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: #fff;
}
.vc-badge-icon.muted {
  color: #ed4245;
}
.vc-badge-live {
  background: #ed4245;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  padding: 4px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: .5px;
  box-shadow: 0 0 10px rgba(237, 66, 69, 0.5);
  animation: pulse 1s infinite alternate;
}
.vc-sub-badge {
  font-size: 10px;
  margin-left: 4px;
  opacity: 0.7;
}

/* DM Active styling */
.dm-item.unread .dm-name {
  color: var(--neon) !important;
  font-weight: 700;
}
.dm-header-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}
.dm-header-status {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.dm-header-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
}

/* ====================================================
   NitroChat — Advanced Bots & Channel Settings Styles
   ==================================================== */

/* 1. Private Channel Roles Checklist inside Modal */
.ch-private-role-item {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  color:var(--t2);
  cursor:pointer;
  padding:4px 6px;
  border-radius:var(--r1);
  transition:background .1s;
}
.ch-private-role-item:hover {
  background:var(--ch-hover);
}
.ch-private-role-item input {
  accent-color:var(--accent);
  width:16px;
  height:16px;
  cursor:pointer;
}

/* 2. Logger Embeds inside Chat Feed */
.msg-embed.logger-embed {
  margin-top:6px;
  background:var(--bg-3);
  border-left:4px solid var(--accent);
  border-radius:0 var(--r2) var(--r2) 0;
  padding:12px 16px;
  max-width:520px;
  box-shadow:0 4px 12px rgba(0,0,0,0.15);
}
.logger-embed-header {
  font-family:'Outfit',sans-serif;
  font-weight:700;
  font-size:14px;
  color:var(--t1);
  margin-bottom:8px;
  display:flex;
  align-items:center;
  gap:6px;
}
.logger-embed-fields {
  display:flex;
  flex-direction:column;
  gap:6px;
}
.logger-embed-field {
  font-size:12.5px;
  line-height:1.4;
}
.logger-embed-label {
  font-weight:700;
  color:var(--t4);
  text-transform:uppercase;
  margin-right:6px;
  font-size:11px;
}
.logger-embed-val {
  color:var(--t2);
  word-break:break-word;
}
.logger-embed-time {
  font-size:11px;
  color:var(--t5);
  margin-top:8px;
  text-align:right;
}

/* 3. Integrations Bot Dashboard Settings */
.bot-settings-card {
  background:var(--bg-3);
  border:1px solid var(--border);
  border-radius:var(--r3);
  padding:16px;
  margin-bottom:16px;
  display:flex;
  flex-direction:column;
  gap:12px;
  box-shadow:0 4px 12px rgba(0,0,0,0.1);
}
.bot-settings-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--border);
  padding-bottom:10px;
}
.bot-settings-title {
  font-family:'Outfit',sans-serif;
  font-weight:800;
  font-size:15px;
  color:var(--t1);
  display:flex;
  align-items:center;
  gap:8px;
}
.bot-settings-badge {
  font-size:10px;
  background:var(--accent);
  color:#fff;
  padding:2px 6px;
  border-radius:4px;
  font-weight:700;
  text-transform:uppercase;
}
.bot-settings-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.bot-settings-col {
  display:flex;
  flex-direction:column;
  gap:4px;
}
.bot-settings-input, .bot-settings-select {
  background:var(--bg-0);
  border:1px solid var(--border);
  border-radius:var(--r1);
  padding:8px 10px;
  font-size:13px;
  color:var(--t1);
  transition:border-color .15s;
}
.bot-settings-input:focus, .bot-settings-select:focus {
  border-color:var(--neon);
}
.bot-settings-desc {
  font-size:12px;
  color:var(--t4);
  line-height:1.4;
}
.bot-add-section {
  background:rgba(88,101,242,0.03);
  border:2px dashed var(--border);
  border-radius:var(--r3);
  padding:20px;
  text-align:center;
  cursor:pointer;
  transition:border-color .15s, background .15s;
  margin-top:16px;
}
.bot-add-section:hover {
  border-color:var(--neon);
  background:rgba(0,242,254,0.03);
}
.bot-add-title {
  font-family:'Outfit',sans-serif;
  font-weight:700;
  font-size:15px;
  color:var(--t1);
  margin-bottom:4px;
}
.bot-add-desc {
  font-size:12px;
  color:var(--t4);
}

/* ══════════════════════════════════════════════
   BANNERS (SERVER & USER)
   ══════════════════════════════════════════════ */
.ch-banner {
  width: 100%;
  height: 135px;
  background-size: cover;
  background-position: center;
  position: relative;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
  transition: background-image 0.2s ease;
}
.ch-banner::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 45px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent);
  pointer-events: none;
}
.banner-sample-card {
  width: 110px;
  height: 58px;
  flex-shrink: 0;
  border-radius: var(--r2);
  background-size: cover;
  background-position: center;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.15s, transform 0.15s;
  display: flex;
  align-items: flex-end;
  padding: 6px;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
  box-sizing: border-box;
}
.banner-sample-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

/* Discord Style Mentions */
.mention {
  background-color: rgba(88, 101, 242, 0.3);
  color: #dee0fc;
  font-weight: 600;
  padding: 0 4px;
  border-radius: 3px;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
  display: inline-block;
}
.mention:hover {
  background-color: rgba(88, 101, 242, 0.6);
  color: #fff;
}



/* ═══════════════════════════════════════════════════════════
   RANDOMCHAT — OmeTV Style
═══════════════════════════════════════════════════════════ */

/* Server sidebar button */
.randomchat-icon {
  background: linear-gradient(135deg, #1a8f4a 0%, #27d46a 100%);
  color: #fff;
  animation: rc-pulse 3s ease-in-out infinite;
}
.randomchat-icon:hover { background: linear-gradient(135deg, #27d46a 0%, #43ef8b 100%) !important; }
.randomchat-icon.active { outline: 3px solid #27d46a; outline-offset: 2px; }
@keyframes rc-pulse {
  0%,100%{ box-shadow: 0 0 0 0 rgba(39,212,106,.4); }
  50%{ box-shadow: 0 0 0 8px rgba(39,212,106,0); }
}

/* Full randomchat view */
.randomchat-view {
  position: absolute;
  inset: 0;
  background: var(--bg-0);
  display: flex;
  flex-direction: column;
  z-index: 50;
  font-family: var(--font-primary), 'Outfit', sans-serif;
  overflow: hidden;
}

/* Header */
.rc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  background: var(--bg-1);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.rc-header-left { display: flex; align-items: center; gap: 20px; }
.rc-logo { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 800; color: var(--accent); text-shadow: 0 0 10px var(--neon-glow); }
.rc-online-count { font-size: 13px; color: var(--t3); display: flex; align-items: center; gap: 6px; }
.rc-online-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
  animation: rc-pulse 2s infinite;
}
.rc-close-btn {
  background: rgba(237,66,69,.15); border: 1px solid rgba(237,66,69,.4);
  color: #ed4245; padding: 6px 14px; border-radius: 8px; cursor: pointer;
  font-size: 14px; font-weight: 700; transition: all .15s;
}
.rc-close-btn:hover { background: rgba(237,66,69,.35); }

/* Video area – stranger video takes up the center */
.rc-body {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background: var(--bg-0);
}
.rc-workspace {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 16px 24px 24px;
  min-height: 0;
}
.rc-screen-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  flex: 1;
  min-height: 0;
}
.rc-grid-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
}

/* Video Boxes */
.rc-video-box {
  position: relative;
  background: var(--bg-2);
  border-radius: 16px;
  border: 1.5px solid var(--border);
  aspect-ratio: 4 / 3 !important;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  box-shadow: var(--shadow);
  transition: border-color 0.3s;
}
.rc-video-box.active-connected {
  border-color: var(--accent);
  box-shadow: 0 0 16px var(--neon-glow);
}

/* TV Static Noise Background */
.rc-video-noise {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.22'/%3E%3C/svg%3E");
  background-size: 250px 250px;
  pointer-events: none;
  z-index: 1;
  animation: static-flicker 0.15s steps(4) infinite;
  opacity: 1;
}

@keyframes static-flicker {
  0% { background-position: 0px 0px; }
  25% { background-position: -30px 40px; }
  50% { background-position: 60px -20px; }
  75% { background-position: -10px 10px; }
  100% { background-position: 0px 0px; }
}

/* Default Screen (Logo + badge + users online) */
.rc-default-screen {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--bg-1);
  padding: 20px;
}

/* OmeTV Retro TV Brand styling */
.rc-tv-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 12px;
}
.rc-tv-antenna {
  display: flex;
  gap: 16px;
  width: 60px;
  height: 20px;
  position: relative;
}
.rc-tv-antenna span {
  width: 2px;
  height: 24px;
  background: var(--accent);
  display: block;
}
.rc-tv-antenna .ant-left {
  transform: rotate(-30deg);
  position: absolute;
  left: 12px;
}
.rc-tv-antenna .ant-right {
  transform: rotate(30deg);
  position: absolute;
  right: 12px;
}
.rc-tv-container {
  width: 190px;
  height: 130px;
  background: var(--accent);
  border-radius: 28px;
  padding: 10px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  position: relative;
  box-shadow: 0 4px 0px rgba(0, 0, 0, 0.3);
}
.rc-tv-inner-screen {
  flex: 1;
  height: 100%;
  background: var(--bg-0);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.rc-tv-brand-title {
  font-family: 'Outfit', 'Inter', sans-serif;
  font-size: 38px;
  font-weight: 800;
  color: var(--accent);
  line-height: 1.1;
}
.rc-tv-brand-subtitle {
  font-family: 'Outfit', 'Inter', sans-serif;
  font-size: 22px;
  font-weight: 900;
  color: var(--neon3);
  letter-spacing: 1px;
}
.rc-tv-knobs {
  width: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  margin-left: 8px;
}
.rc-tv-knobs span {
  width: 10px;
  height: 10px;
  background: var(--t1);
  border-radius: 50%;
}

/* Online Counter */
.rc-brand-online {
  font-size: 13px;
  color: var(--t3);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 24px;
}
.rc-brand-online-dot {
  width: 8px;
  height: 8px;
  background: var(--neon3);
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 8px var(--neon3);
}

/* App Download Badges */
.rc-badges-row {
  display: flex;
  gap: 12px;
}
.rc-app-badge {
  background: var(--bg-0);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 14px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 120px;
  cursor: pointer;
  transition: all 0.2s;
}
.rc-app-badge:hover {
  border-color: var(--accent);
  box-shadow: 0 0 10px var(--neon-glow);
}
.rc-app-badge .badge-sub {
  font-size: 8px;
  color: var(--t4);
  font-weight: 700;
}
.rc-app-badge .badge-main {
  font-size: 13px;
  color: var(--t1);
  font-weight: 800;
}

/* Volume bar */
.rc-volume-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 28px;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 10px;
  z-index: 4;
}
.rc-vol-icon {
  font-size: 14px;
  color: #fff;
  cursor: pointer;
}
.rc-vol-slider-track {
  flex: 1;
  height: 4px;
  background: #3e424c;
  border-radius: 2px;
  position: relative;
}
.rc-vol-slider-fill {
  width: 75%;
  height: 100%;
  background: var(--neon3);
  border-radius: 2px;
}

/* Stranger Info Overlay */
.rc-stranger-info {
  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(6px);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 5;
}

/* Action Controls (Iniciar, Parar, País, Soy) */
.rc-action-controls {
  display: grid;
  grid-template-columns: 1.2fr 1.2fr 1fr 1fr;
  gap: 12px;
  width: 100%;
}
.rc-big-btn {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  height: 86px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--t1);
  font-family: inherit;
  cursor: pointer;
  position: relative;
  transition: all 0.2s;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  text-align: center;
  box-sizing: border-box;
}
.rc-big-btn:hover:not(:disabled) {
  border-color: var(--accent);
  box-shadow: 0 0 12px var(--neon-glow);
}
.rc-big-btn:active:not(:disabled) {
  transform: translateY(2px);
}
.rc-big-btn.rc-btn-start {
  background: linear-gradient(135deg, #10b981, #059669);
  border: none;
  color: #fff;
  font-size: 20px;
  font-weight: 800;
  box-shadow: 0 0 14px rgba(16, 185, 129, 0.3);
}
.rc-big-btn.rc-btn-start:hover:not(:disabled) {
  background: linear-gradient(135deg, #13cc8f, #06a877);
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.45);
}
.rc-big-btn.rc-btn-stop {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  border: none;
  color: #fff;
  font-size: 20px;
  font-weight: 800;
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.3);
}
.rc-big-btn.rc-btn-stop:hover:not(:disabled) {
  background: linear-gradient(135deg, #f87171, #ef4444);
  box-shadow: 0 0 20px rgba(239, 68, 68, 0.45);
}
.rc-big-btn.rc-btn-stop:disabled,
.rc-big-btn.rc-btn-start:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
  background: var(--bg-4) !important;
  border: 1px solid var(--border) !important;
  color: var(--t4) !important;
}

.rc-big-btn.dropdown-btn {
  padding: 10px 4px;
}
.btn-top-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--t3);
  display: flex;
  align-items: center;
  gap: 4px;
  line-height: 1.2;
}
.btn-sub-label {
  font-size: 15px;
  font-weight: 800;
  color: var(--t1);
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* User Placeholder Blocked */
.rc-my-placeholder {
  position: absolute;
  inset: 0;
  background: var(--bg-0);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  text-align: center;
  z-index: 2;
}
.rc-my-placeholder.hidden {
  display: none !important;
}
.rc-my-placeholder p {
  color: var(--t1);
  font-size: 16px;
  line-height: 1.5;
  max-width: 320px;
}

/* User Lobby (Screen with two grey buttons before starting) */
.rc-user-lobby {
  position: absolute;
  inset: 0;
  background: var(--bg-1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  z-index: 2;
}
.rc-user-lobby.hidden {
  display: none !important;
}
.rc-lobby-btn {
  background: var(--bg-3);
  border: 1px solid var(--border);
  color: var(--t1);
  font-size: 16px;
  font-weight: 700;
  border-radius: 12px;
  width: 260px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  box-shadow: 0 4px 0px rgba(0, 0, 0, 0.25);
  box-sizing: border-box;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.1s, box-shadow 0.1s, background 0.1s;
}
.rc-video-box.user:hover .rc-lobby-btn {
  opacity: 1;
  pointer-events: auto;
}
.rc-lobby-btn:hover {
  background: var(--ch-hover);
  border-color: var(--accent);
}
.rc-lobby-btn:active {
  transform: translateY(3px);
  box-shadow: none;
}
.rc-lobby-icon {
  font-size: 18px;
}

/* Stranger Camera Off Overlay */
.rc-no-webcam-overlay {
  position: absolute;
  inset: 0;
  background: var(--bg-0);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  z-index: 2;
}
.rc-no-webcam-overlay.hidden {
  display: none !important;
}
.rc-no-webcam-icon {
  font-size: 40px;
  opacity: 0.5;
  color: var(--accent);
}
.rc-no-webcam-overlay p {
  color: var(--t3);
  font-size: 14px;
  font-weight: 600;
  opacity: 0.8;
}

/* OmeTV Chat Feed in Right Panel (under user video) */
.rc-chat-feed {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--bg-1);
}
.rc-chat-feed.hidden {
  display: none !important;
}

/* Chat bubble rows */
.rc-chat-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  width: 100%;
  box-sizing: border-box;
}
.rc-chat-row.stranger {
  justify-content: flex-start;
}
.rc-chat-row.me {
  justify-content: flex-end;
}

.rc-chat-flag {
  font-size: 16px;
  flex-shrink: 0;
  margin-top: 1px;
}

.rc-chat-bubble {
  position: relative;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 13.5px;
  color: var(--t2);
  max-width: 75%;
  word-break: break-word;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  font-family: inherit;
  line-height: 1.4;
  box-sizing: border-box;
}

/* Speech bubble left tail (for Stranger) */
.rc-chat-row.stranger .rc-chat-bubble::before {
  content: '';
  position: absolute;
  left: -6px;
  top: 14px;
  width: 10px;
  height: 10px;
  background: var(--bg-2);
  border-left: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  transform: rotate(45deg);
}

/* Speech bubble right tail (for User/Me) */
.rc-chat-row.me .rc-chat-bubble {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 4px 12px var(--neon-glow);
}
.rc-chat-row.me .rc-chat-bubble::before {
  content: '';
  position: absolute;
  right: -6px;
  top: 14px;
  width: 10px;
  height: 10px;
  background: var(--accent);
  border-right: 1px solid var(--accent);
  border-top: 1px solid var(--accent);
  transform: rotate(45deg);
}

/* Connection / System established bubble */
.rc-system-bubble {
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 13px;
  color: var(--t2);
  display: flex;
  gap: 12px;
  align-items: flex-start;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  box-sizing: border-box;
}
.rc-system-tv-icon {
  width: 24px;
  height: 18px;
  background: var(--accent);
  border-radius: 4px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.rc-system-tv-icon::before {
  content: '';
  position: absolute;
  top: -3px;
  width: 8px;
  height: 3px;
  background: var(--accent);
  border-radius: 1px;
}
.rc-system-tv-icon::after {
  content: '';
  width: 4px;
  height: 4px;
  background: #fff;
  border-radius: 50%;
}
.rc-system-text {
  display: flex;
  flex-direction: column;
  text-align: left;
}
.rc-system-flag {
  font-size: 16px;
}
.rc-system-country {
  font-weight: 700;
  color: var(--t1);
}
.rc-report-link {
  color: var(--neon3) !important;
  text-decoration: underline;
  font-weight: 700;
  cursor: pointer;
}

/* Chat Controls Box (Right Column Bottom) */
.rc-chat-controls {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 124px !important;
  box-sizing: border-box;
  box-shadow: var(--shadow);
}

.rc-chat-feed::-webkit-scrollbar {
  width: 4px;
}
.rc-chat-feed::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 2px;
}

/* Rules Alert Box */
.rc-rules-alert {
  display: flex;
  gap: 12px;
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--border);
}
.rc-rules-logo {
  flex-shrink: 0;
}
.rc-rules-tv-mini {
  width: 32px;
  height: 24px;
  background: var(--accent);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.rc-rules-tv-mini::before {
  content: '';
  position: absolute;
  top: -4px;
  width: 12px;
  height: 4px;
  background: var(--accent);
  border-radius: 2px;
}
.mini-tv-title {
  color: #fff;
  font-size: 9px;
  font-weight: 900;
}
.rc-rules-text-container {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}
.rc-rules-text-container p {
  font-size: 11px;
  color: var(--t3);
  line-height: 1.35;
}
.rc-rules-text-container p .rc-link {
  color: var(--neon3);
  text-decoration: underline;
  font-weight: 700;
}
.rc-security-reminder {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--neon3);
  text-decoration: underline;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 1px;
}

/* Message Input Area */
.rc-message-input-area {
  background: var(--bg-0);
  border: 1px solid var(--border);
  border-radius: 12px;
  height: 40px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  box-shadow: none;
  box-sizing: border-box;
}
.rc-msg-input-field {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--t1);
  font-size: 13.5px;
  outline: none;
  height: 100%;
}
.rc-msg-input-field::placeholder {
  color: var(--t4);
}
.rc-input-right-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.rc-add-friend-btn {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 10px;
  cursor: pointer;
  transition: all 0.15s;
  box-shadow: 0 4px 10px var(--neon-glow);
}
.rc-add-friend-btn:hover:not(:disabled) {
  opacity: 0.9;
}
.rc-add-friend-btn:disabled {
  background: var(--bg-4);
  color: var(--t4);
  cursor: not-allowed;
  box-shadow: none;
}
.rc-emoji-picker-trigger {
  background: transparent;
  border: none;
  font-size: 18px;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.15s;
  padding: 2px;
}
.rc-emoji-picker-trigger:hover {
  opacity: 1;
}

/* Dropdown Menu Overlay */
.rc-select-dropdown {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  width: 180px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  z-index: 100;
  box-shadow: var(--shadow);
  overflow-y: auto;
  max-height: 200px;
  text-align: left;
}
.rc-sdd-item {
  padding: 10px 14px;
  font-size: 13.5px;
  cursor: pointer;
  transition: all 0.1s;
  color: var(--t2);
  font-weight: 600;
}
.rc-sdd-item:hover {
  background: var(--ch-hover);
  color: var(--t1);
}
.rc-status {
  text-align: center;
  padding: 6px;
  font-size: 12px;
  color: var(--t4);
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════
   DM CALL OVERLAY
═══════════════════════════════════════════════════════════ */

.dm-call-overlay {
  position: absolute;
  inset: 0;
  background: var(--bg-1, #1e1f22);
  z-index: 50;
  display: flex;
  flex-direction: column;
}
.dm-call-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #000;
  width: 100%;
  height: 100%;
}
.dm-call-videos {
  flex: 1;
  display: flex;
  position: relative;
  background: #000;
  align-items: center;
  justify-content: center;
}
.dm-call-remote {
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 16px;
}
.dm-call-avatar-big {
  width: 120px; height: 120px; border-radius: 50%;
  border: 4px solid var(--bg-3, #2b2d31);
}
.dm-call-name {
  font-size: 24px; font-weight: 700; color: #fff;
}
.dm-call-wave { display: none; } /* hide wave for discord look */

.dm-call-local {
  position: absolute; bottom: 20px; right: 20px;
  width: 240px; height: 135px; /* 16:9 ratio */
  border-radius: 8px; background: #111;
  overflow: hidden; display: flex;
  align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}
.dm-call-local-video { width: 100%; height: 100%; object-fit: cover; }
.dm-call-local-placeholder { font-size: 28px; color: #555; }

.dm-call-bottom {
  height: 80px;
  background: var(--bg-2, #2b2d31);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding-bottom: 16px;
}

.dm-call-status {
  text-align: center; padding: 0;
  font-size: 14px; color: #aaa; font-weight: 600;
  display: none; /* hide text status in discord usually */
}
.dm-call-timer {
  text-align: center; padding: 4px 0 8px;
  font-size: 14px; color: #fff; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.dm-call-actions {
  display: flex; align-items: center; justify-content: center;
  gap: 16px;
}
.dm-call-action-btn {
  width: 56px; height: 56px; border-radius: 50%;
  border: none; cursor: pointer; transition: all .15s;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-3, #313338); color: #dbdee1;
}
.dm-call-action-btn:hover { background: var(--bg-4, #404249); color: #fff; }
.dm-call-end {
  width: 56px; height: 56px;
  background: #da373c !important; color: #fff !important;
  box-shadow: none;
}
.dm-call-end:hover {
  background: #a12828 !important;
}

/* DM header call buttons */
.dm-call-voice-btn, .dm-call-video-btn { color: #27d46a !important; }
.dm-call-voice-btn:hover, .dm-call-video-btn:hover { color: #43ef8b !important; }

/* Video Element Cover Size */
.rc-video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Symmetrical lack of online overlay styles */
.rc-no-online-overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 16, 20, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  border-radius: 12px;
  backdrop-filter: blur(4px);
}
.rc-no-online-overlay.hidden {
  display: none !important;
}
.rc-no-online-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 32px 24px;
  width: 90%;
  max-width: 400px;
  text-align: center;
  color: #111;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  box-sizing: border-box;
}
.rc-no-online-icon {
  font-size: 48px;
}
.rc-no-online-card h3 {
  font-family: 'Outfit', 'Inter', sans-serif;
  font-size: 22px;
  font-weight: 800;
  margin: 0;
  color: #ff5c2b;
}
.rc-no-online-card p {
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  line-height: 1.5;
  color: #4f5660;
  margin: 0;
}
.rc-coin-reward-info {
  font-weight: 700;
  color: #48a479 !important;
}
.rc-invite-btn {
  background: #50be8d;
  color: #fff;
  border: none;
  border-radius: 12px;
  height: 48px;
  width: 100%;
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 0px #327e5d;
  transition: transform 0.1s, box-shadow 0.1s;
}
.rc-invite-btn:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0px #327e5d;
}
.rc-invite-btn:hover:not(:disabled) {
  background: #5dc999;
}

.rc-no-online-banner {
  width: 100%;
  height: 140px;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}




/* =====================================================================
   TIKTOK LIVE GIFTS — Professional Styles
   ===================================================================== */

/* ── Camera filters bar ─────────────────────────────────────────────── */
.rc-camera-filters-bar{
  position:absolute;top:8px;right:8px;
  display:flex;gap:4px;
  background:rgba(8,9,12,.84);backdrop-filter:blur(12px);
  padding:4px 7px;border-radius:20px;
  border:1px solid rgba(255,255,255,.07);
  z-index:12;opacity:0;transition:opacity .25s;
}
.rc-video-box.user:hover .rc-camera-filters-bar,
.rc-video-box.user:focus-within .rc-camera-filters-bar { opacity:1; }
.rc-filter-btn{
  background:transparent;border:none;color:#9ea3ac;
  font-size:9.5px;font-weight:700;padding:3px 8px;
  border-radius:12px;cursor:pointer;white-space:nowrap;
  transition:color .15s,background .15s;
}
.rc-filter-btn:hover { color:#fff;background:rgba(255,255,255,.09); }
.rc-filter-btn.active { color:#fff;background:#5865f2; }

/* ── Gift trigger ────────────────────────────────────────────────────── */
.rc-gift-trigger{
  background:transparent;border:none;font-size:17px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  padding:4px 5px;border-radius:8px;
  transition:transform .15s,background .15s;
}
.rc-gift-trigger:hover { transform:scale(1.22);background:rgba(255,215,0,.13); }

/* ── Gift popover ────────────────────────────────────────────────────── */
.rc-gift-popover{
  /* Now body-level fixed element - all layout via inline style */
  position:fixed !important;
  z-index:99998 !important;
  display:flex;flex-direction:column;gap:8px;
  box-sizing:border-box;
}
.rc-gift-popover.hidden { display:none!important; }

.rc-gp-header{
  display:flex;justify-content:space-between;align-items:center;
  font-size:11px;font-weight:800;color:#c4c7d0;letter-spacing:.3px;
  border-bottom:1px solid #22242b;padding-bottom:8px;
}
.rc-gp-balance{ color:#ffd700;display:inline-flex;align-items:center;gap:4px;font-size:12px; }

/* Grid — 4 columns like TikTok */
.rc-gp-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:6px;
  max-height:240px;overflow-y:auto;
}
.rc-gp-grid::-webkit-scrollbar{width:3px;}
.rc-gp-grid::-webkit-scrollbar-track{background:transparent;}
.rc-gp-grid::-webkit-scrollbar-thumb{background:#3a3f47;border-radius:3px;}

.rc-gp-item{
  background:#1c1d24;
  border:1.5px solid var(--tier-color,#333);
  border-radius:11px;padding:6px 4px;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  cursor:pointer;
  transition:transform .12s,border-color .15s,box-shadow .15s,background .15s;
}
.rc-gp-item:hover:not(.rc-gp-item--locked){
  transform:translateY(-3px) scale(1.06);
  border-color:#ffd70099;
  background:#252831;
  box-shadow:0 5px 16px rgba(255,215,0,.2);
}
.rc-gp-item--locked { opacity:.38;cursor:not-allowed; }

.rc-gpi-img-wrap{
  width:42px;height:42px;border-radius:10px;
  overflow:hidden;background:#111;
  display:flex;align-items:center;justify-content:center;
  position:relative;
}
.rc-gpi-img { width:100%;height:100%;object-fit:cover; }
.rc-gpi-emoji { font-size:24px;line-height:1; }
.rc-gpi-tier {
  position:absolute;top:1px;right:2px;
  font-size:9px;line-height:1;
}
.rc-gpi-lock-mask{
  position:absolute;inset:0;background:rgba(0,0,0,.55);
  display:flex;align-items:center;justify-content:center;
  font-size:14px;
}
.rc-gpi-name{
  font-size:7.5px;font-weight:700;color:#c4c7d0;
  text-align:center;line-height:1.2;
}
.rc-gpi-price{
  font-size:8px;font-weight:800;
  display:inline-flex;align-items:center;gap:2px;
}

/* ── Animation overlay container ─────────────────────────────────────── */
.rc-gift-anim-overlay{
  position:absolute;inset:0;pointer-events:none;
  z-index:20;overflow:hidden;border-radius:inherit;
}

/* ── TikTok-style sender badge + combo counter ───────────────────────── */
.rc-gift-badge{
  position:absolute;bottom:10px;left:8px;
  display:flex;align-items:center;gap:6px;
  background:rgba(0,0,0,.62);backdrop-filter:blur(8px);
  border-radius:20px;padding:5px 10px 5px 8px;
  animation:rc-kf-badge 3.9s ease forwards;
  z-index:25;max-width:85%;
}
.rc-gb-icon { font-size:18px;line-height:1; }
.rc-gb-text { display:flex;flex-direction:column;gap:0; }
.rc-gb-sender{
  font-size:9.5px;font-weight:700;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:90px;
}
.rc-gb-name{
  font-size:8px;font-weight:600;
  color:var(--gc,#ffd700);white-space:nowrap;
}
.rc-gb-combo{
  font-family:'Outfit',sans-serif;font-size:16px;font-weight:900;
  color:#fe2c55;letter-spacing:-0.5px;
  animation:rc-kf-combo .3s cubic-bezier(.34,1.56,.64,1) forwards;
  text-shadow:0 0 10px #fe2c55aa;
}

/* =====================================================================
   OWNER PANEL STYLES
   ===================================================================== */

/* Sidebar item highlight */
.owner-nav-item {
  background: linear-gradient(135deg, rgba(250,166,26,.12), rgba(255,215,0,.08)) !important;
  border-left: 3px solid #faa61a !important;
  color: #faa61a !important;
  font-weight: 800 !important;
}
.owner-nav-item:hover { background: linear-gradient(135deg,rgba(250,166,26,.22),rgba(255,215,0,.14)) !important; }
.owner-nav-item.active { background: linear-gradient(135deg,rgba(250,166,26,.3),rgba(255,215,0,.2)) !important; }

/* Coin balance card */
.owner-coin-card {
  position: relative;
  background: linear-gradient(135deg, #1c1a0a, #1a1500);
  border: 1.5px solid #ffd70044;
  border-radius: 14px;
  padding: 18px 20px;
  overflow: hidden;
  margin-bottom: 4px;
}
.owner-coin-glow {
  position: absolute;
  top: -30px; right: -30px;
  width: 120px; height: 120px;
  background: radial-gradient(circle, rgba(255,215,0,.25) 0%, transparent 70%);
  pointer-events: none;
}
.owner-coin-icon {
  background: rgba(255,215,0,.12);
  border: 1.5px solid rgba(255,215,0,.3);
  border-radius: 50%;
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* Add buttons */
.owner-add-btn {
  background: linear-gradient(135deg, #2a2510, #1a1800);
  border: 1.5px solid #ffd70055;
  color: #ffd700;
  font-size: 12px; font-weight: 800;
  padding: 8px 14px;
  border-radius: 10px;
  cursor: pointer;
  transition: all .15s ease;
  white-space: nowrap;
  letter-spacing: .2px;
}
.owner-add-btn:hover {
  background: linear-gradient(135deg, #ffd700, #f59e0b);
  color: #000;
  border-color: #ffd700;
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(255,215,0,.35);
}
.owner-add-btn:active { transform: translateY(0); }
.owner-add-btn.gold {
  background: linear-gradient(135deg, #ffd700, #f59e0b);
  color: #000;
  border-color: #ffd700;
  padding: 10px 20px;
}
.owner-add-btn.gold:hover {
  background: linear-gradient(135deg, #ffe540, #fbbf24);
  box-shadow: 0 4px 20px rgba(255,215,0,.5);
}
.owner-add-btn.danger {
  background: linear-gradient(135deg, #3a1010, #200a0a);
  border-color: #ef444455;
  color: #ef4444;
}
.owner-add-btn.danger:hover {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #fff;
  border-color: #ef4444;
  box-shadow: 0 4px 16px rgba(239,68,68,.35);
}

@keyframes ometv-pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 30px rgba(255,92,43,0.4);
  }
  50% {
    transform: scale(1.04);
    box-shadow: 0 0 45px rgba(255,92,43,0.65);
  }
}

@keyframes rc-scanline {
  0% {
    top: -5%;
  }
  50% {
    top: 105%;
  }
  100% {
    top: -5%;
  }
}

@keyframes ometv-cam-zoom {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.08) translate(1px, -2px);
  }
}

/* ── MLM REFERRALS & ROLE MUTE STYLES ── */
.mlm-auto-switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(0, 242, 254, 0.05);
  border: 1px solid rgba(0, 242, 254, 0.15);
  padding: 14px;
  border-radius: var(--r3);
  margin-bottom: 20px;
}
.mlm-stats {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
}
.mlm-card {
  flex: 1;
  background: var(--bg-3);
  border: 1px solid var(--border);
  padding: 16px;
  border-radius: var(--r3);
  text-align: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  transition: transform 0.2s;
}
.mlm-card:hover {
  transform: translateY(-2px);
}
.mlm-card-val {
  font-size: 28px;
  font-weight: 900;
  color: #ffd700;
  margin-top: 4px;
  font-family: 'Outfit', sans-serif;
  text-shadow: 0 2px 8px rgba(255,215,0,0.2);
}
.mlm-tree {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--bg-1);
  padding: 16px;
  border-radius: var(--r3);
  border: 1px solid var(--border);
}
.mlm-level {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-radius: var(--r2);
  padding: 12px;
}
.mlm-level-hd {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--t4);
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  letter-spacing: 0.5px;
}
.mlm-level-hd span.pct {
  color: var(--neon);
}
.mlm-nodes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.mlm-node {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-4);
  border: 1px solid var(--border);
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  color: var(--t1);
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  animation: nodeFadeIn 0.3s ease-out;
}
@keyframes nodeFadeIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}
.mlm-node-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,0.1);
}
.mlm-node-parent {
  font-size: 10px;
  color: var(--t5);
  font-style: italic;
  margin-left: 2px;
}

/* Speaker Badge for Role Muted User */
.vc-badge-icon.muted-role {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.4);
  color: #ef4444;
}

/* ══════════════════════════════════════════════
   PREMIUM 3D & GLASSMORPHISM OVERHAUL STYLES
   ══════════════════════════════════════════════ */

/* Premium Card 3D Dynamic Glare */
.premium-card-3d {
  position: relative;
  transition: transform 0.15s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.15s ease;
  transform-style: preserve-3d;
  overflow: hidden;
}
.premium-card-3d::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--glare-x, 50%) var(--glare-y, 50%), rgba(255, 255, 255, 0.12) 0%, transparent 60%);
  pointer-events: none;
  z-index: 10;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.premium-card-3d:hover::after {
  opacity: 1;
}

/* Glassmorphism Refraction Panels */
.glass-refract {
  background: rgba(20, 21, 26, 0.65) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4) !important;
}

/* Liquid Distortion hover effect on avatars */
.avatar-liquid-hover {
  position: relative;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.avatar-liquid-hover:hover {
  transform: scale(1.12);
  filter: url('#liquid-distort-filter');
}

/* CRT Screen simulation overlay */
.crt-overlay {
  position: relative;
  overflow: hidden;
}
.crt-overlay::before {
  content: " ";
  display: block;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  z-index: 5;
  background-size: 100% 4px, 6px 100%;
  pointer-events: none;
}
.crt-overlay::after {
  content: " ";
  display: block;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  background: rgba(18, 16, 16, 0.1);
  opacity: 0;
  z-index: 5;
  pointer-events: none;
  animation: crtFlicker 0.15s infinite;
}
@keyframes crtFlicker {
  0% { opacity: 0.27; }
  50% { opacity: 0.22; }
  100% { opacity: 0.25; }
}

/* Dynamic Interactive 3D Glow Trail */
.cursor-glow-trail {
  width: 15px;
  height: 15px;
  background: radial-gradient(circle, var(--neon) 0%, transparent 80%);
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: screen;
  z-index: 99999;
  transform: translate(-50%, -50%);
  opacity: 0.75;
  transition: width 0.2s, height 0.2s, opacity 0.2s;
}

/* High-tech Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.15);
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--neon) 0%, var(--neon2) 100%);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--neon);
}

/* Discord Nitro Avatar Border Decoration */
.nitro-avatar-border {
  position: relative;
  border-radius: 50%;
  padding: 3px;
  background: linear-gradient(45deg, #ff00a0, #bf24ff, #00f2fe, #39ff14, #ffd700, #ff00a0);
  background-size: 400% 400%;
  animation: nitroGlowGradient 6s linear infinite;
  box-shadow: 0 0 12px rgba(255, 0, 160, 0.4);
}
@keyframes nitroGlowGradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Discord Nitro Badges */
.nitro-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #ff00a0 0%, #7c3aed 100%);
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  padding: 1px 5px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 0 8px rgba(255, 0, 160, 0.3);
  margin-left: 5px;
  vertical-align: middle;
}
.nitro-boost-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #ff55b7 0%, #ff007f 100%);
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  padding: 1px 5px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 0 8px rgba(255, 85, 183, 0.3);
  margin-left: 5px;
  vertical-align: middle;
}

/* Theme Previews in Settings */
.nitro-theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 12px;
  margin-top: 15px;
}
.nitro-theme-card {
  border-radius: 8px;
  padding: 14px;
  text-align: center;
  font-weight: bold;
  font-size: 12px;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: transform 0.2s var(--bounce), border-color 0.2s;
}
.nitro-theme-card:hover {
  transform: translateY(-3px);
  border-color: var(--neon);
  box-shadow: 0 4px 15px rgba(0, 242, 254, 0.15);
}
.nitro-theme-card.active {
  border-color: var(--neon);
  box-shadow: 0 0 10px var(--neon-glow);
}

@keyframes popIn {
  0% { transform: scale(0.8); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}


/* ========================================================= */
/* PREMIUM APPLE/DISCORD VOICE CHANNEL REDESIGN (SKILLS)     */
/* ========================================================= */

/* Main Grid adjustments */
.vc-grid {
  gap: 20px !important;
  padding: 24px !important;
}

/* Glassmorphic voice participant card */
.vc-card {
  background: rgba(20, 22, 28, 0.45) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 20px !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255,255,255,0.1) !important;
  transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.vc-card::before {
  border-radius: 20px !important;
}

.vc-card.speaking {
  border-color: rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 0 40px rgba(0, 242, 254, 0.25), inset 0 0 20px rgba(0, 242, 254, 0.1), 0 15px 45px rgba(0,0,0,0.5) !important;
  transform: translateY(-4px) scale(1.02) !important;
}

/* Softer Banner Gradient */
.vc-card-banner {
  height: 60% !important;
  background: linear-gradient(to bottom, var(--accent) 0%, transparent 100%) !important;
  opacity: 0.15 !important;
  transition: opacity 0.4s !important;
  mix-blend-mode: screen;
}

.vc-card.speaking .vc-card-banner {
  opacity: 0.35 !important;
}

/* Larger, premium avatar */
.vc-card-avatar {
  width: 84px !important;
  height: 84px !important;
  border: 3px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5) !important;
  transition: border-color 0.4s, transform 0.4s !important;
}

.vc-card.speaking .vc-card-avatar {
  border-color: rgba(255, 255, 255, 0.3) !important;
}

.vc-card-avatar-container {
  margin-top: 0 !important;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.vc-card.speaking .vc-card-avatar-container {
  transform: scale(1.08) !important;
}

/* Crisp Nameplate */
.vc-card-name {
  background: rgba(0, 0, 0, 0.4) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 12px !important;
  padding: 6px 12px !important;
  bottom: 12px !important;
  left: 12px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
}

/* Bottom Panels Redesign (Soundboard & Transcription) */
.vc-bottom-panels .vtp-panel,
.vc-bottom-panels .vc-soundboard {
  background: rgba(20, 22, 28, 0.45) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  border-radius: 20px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255,255,255,0.05) !important;
}

.vtp-header {
  background: rgba(255, 255, 255, 0.03) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  padding: 12px 20px !important;
}

/* Update vsb-btn (Soundboard Buttons) to look premium */
.vsb-btn {
  background: rgba(0, 0, 0, 0.3) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 14px !important;
  transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.vsb-btn:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 6px 16px rgba(0,0,0,0.3) !important;
}

.vsb-btn:active {
  transform: translateY(0) scale(0.96) !important;
}

/* Neutral sleek top buttons */
.vc-hdr-btn {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: var(--t2) !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 12px !important;
  box-shadow: none !important;
}

.vc-hdr-btn svg {
  color: var(--t2) !important;
  transition: color 0.2s !important;
}

.vc-hdr-btn:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

.vc-hdr-btn:hover svg {
  color: #fff !important;
}

.vc-hdr-btn.active {
  background: rgba(255, 255, 255, 0.15) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
}

.vc-hdr-btn.danger {
  background: rgba(237, 66, 69, 0.1) !important;
  color: #ed4245 !important;
  border-color: rgba(237, 66, 69, 0.2) !important;
}

.vc-hdr-btn.danger:hover {
  background: #ed4245 !important;
  color: #fff !important;
}

.vc-hdr-btn.danger:hover svg {
  color: #fff !important;
}

/* Discord style speaker border, removing neon glow */
.vc-card.speaking {
  box-shadow: 0 12px 40px rgba(0,0,0,0.5) !important;
  border-color: rgba(255,255,255,0.1) !important;
  transform: translateY(-2px) !important;
}

.vc-card.speaking::before {
  background: transparent !important;
}

.vc-card.speaking .vc-card-avatar {
  border-color: #23a559 !important; /* Discord green */
  box-shadow: 0 0 0 2px rgba(35, 165, 89, 0.3) !important;
}

/* Voice Active Bar in Sidebar */
.voice-active-bar {
  background: rgba(12, 13, 18, 0.9) !important;
  border-top: 1px solid rgba(255,255,255,0.05) !important;
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
  padding: 8px 12px !important;
  margin: 0 !important;
}
.vab-status {
  color: #23a559 !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.vab-channel {
  color: #aaa !important;
  font-size: 11px !important;
  margin-left: 20px !important;
}
.vab-disconnect {
  color: var(--t3) !important;
  background: transparent !important;
  transition: color 0.2s, transform 0.2s !important;
}
.vab-disconnect:hover {
  color: #ed4245 !important;
  transform: scale(1.1) !important;
}


.up-actions { display: flex; align-items: center; gap: 4px; }
.up-btn { background: transparent; border: none; color: #b5bac1; width: 32px; height: 32px; border-radius: 4px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.15s ease; }
.up-btn:hover { background: rgba(255,255,255,0.08); color: #dbdee1; }

/* AUDIO MESSAGES */
.audio-msg {
  max-width: 300px;
  width: 100%;
  margin-top: 8px;
  border-radius: 20px;
  outline: none;
}
.audio-msg::-webkit-media-controls-panel {
  background-color: var(--bg-3, #2b2d31);
}
.audio-msg::-webkit-media-controls-play-button,
.audio-msg::-webkit-media-controls-mute-button,
.audio-msg::-webkit-media-controls-timeline,
.audio-msg::-webkit-media-controls-current-time-display,
.audio-msg::-webkit-media-controls-time-remaining-display {
  filter: invert(1);
}

.audio-record-overlay {
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}
@keyframes pulse {
  0% { opacity: 1; }
  50% { opacity: 0.5; }
  100% { opacity: 1; }
}


/* DYNAMIC GRID CALLS */
.dm-call-videos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 16px;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  overflow-y: auto;
  align-content: center;
}
.dm-call-videos.focus-mode {
  flex-direction: column;
  justify-content: flex-start;
  align-content: flex-start;
  padding: 16px;
}

.call-participant {
  background: var(--bg-1, #1e1f22);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
  cursor: grab;
  transition: all 0.2s ease;
  aspect-ratio: 16 / 9;
  flex: 1 1 calc(50% - 16px);
  max-width: calc(50% - 16px);
  min-width: 300px;
  max-height: 100%;
}
.call-participant:active {
  cursor: grabbing;
}
.call-participant.dragging {
  opacity: 0.5;
  transform: scale(0.95);
}

/* 1 Participant */
.dm-call-videos[data-count="1"] .call-participant {
  flex: 1 1 100%;
  max-width: 80%;
  max-height: 80%;
}

/* Focus Mode adjustments */
.dm-call-videos.focus-mode .call-participant {
  flex: 0 0 120px;
  max-width: 200px;
  min-width: 150px;
  order: 2;
}
.dm-call-videos.focus-mode .call-participant.focused {
  flex: 1 1 100%;
  max-width: 100%;
  min-width: 100%;
  max-height: calc(100% - 150px);
  order: 1;
  margin-bottom: 16px;
  cursor: default;
}

.participant-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}
.participant-avatar-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-1, #1e1f22);
}
.participant-avatar-wrap img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
}
.participant-name-tag {
  position: absolute;
  bottom: 8px;
  left: 8px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 500;
  pointer-events: none;
}


/* CALL RINGING EFFECT */
@keyframes pulse-ring {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(88, 101, 242, 0.7); }
  70% { transform: scale(1.05); box-shadow: 0 0 0 20px rgba(88, 101, 242, 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(88, 101, 242, 0); }
}
.dm-call-remote.ringing img.dm-call-avatar-big {
  animation: pulse-ring 1.5s infinite ease-in-out;
  border-color: #5865f2;
}

/* Hide Members Panel under home */
body.in-home #members-panel {
  display: none !important;
}


/* ====================================================
   APPLE 2026 3D GLASSMORPHISM SYSTEM (DISCORD ESSENCE)
   ==================================================== */

/* Glass sidebar & panels */
.ch-sidebar, .members-panel, .chat-header, .voice-active-bar, .user-panel {
  background: rgba(20, 21, 26, 0.45) !important;
  backdrop-filter: blur(25px) saturate(180%) !important;
  border-color: rgba(255, 255, 255, 0.05) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.text-view {
  background: rgba(12, 13, 18, 0.6) !important;
  backdrop-filter: blur(15px);
}

/* Call Overlay - Floating 3D frosted plate */
.dm-call-overlay {
  background: rgba(0, 0, 0, 0.65) !important;
  backdrop-filter: blur(35px) saturate(200%) !important;
}

.dm-call-box {
  background: rgba(20, 21, 26, 0.5) !important;
  backdrop-filter: blur(30px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 24px !important;
  box-shadow: 
    0 30px 70px rgba(0, 0, 0, 0.5), 
    inset 0 1px 1px rgba(255, 255, 255, 0.1) !important;
  transform: translateZ(0);
}

.dm-call-videos {
  background: transparent !important;
}

/* 3D Glass Tiles for Participants */
.call-participant {
  background: rgba(255, 255, 255, 0.04) !important;
  backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 20px !important;
  box-shadow: 
    0 12px 30px rgba(0, 0, 0, 0.4), 
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  transform: perspective(1000px) rotateX(0deg) rotateY(0deg) translateZ(0);
}

.call-participant:hover {
  transform: perspective(1000px) rotateX(1deg) rotateY(0.5deg) translateZ(8px) translateY(-4px) !important;
  box-shadow: 
    0 24px 48px rgba(0, 0, 0, 0.6), 
    0 0 20px rgba(255, 255, 255, 0.03),
    inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

/* Controls Panel - Floating 3D Pill */
.dm-call-bottom {
  background: rgba(30, 31, 37, 0.4) !important;
  backdrop-filter: blur(20px) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.dm-call-action-btn {
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 
    0 4px 10px rgba(0, 0, 0, 0.25), 
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.dm-call-action-btn:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  transform: translateY(-3px) scale(1.08) !important;
  box-shadow: 
    0 8px 18px rgba(0, 0, 0, 0.35), 
    0 0 10px rgba(255, 255, 255, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  color: #fff !important;
}

.dm-call-end {
  background: #ff3b30 !important; /* Apple Red */
  box-shadow: 0 4px 12px rgba(255, 59, 48, 0.3) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.dm-call-end:hover {
  background: #e02e24 !important;
  box-shadow: 0 8px 20px rgba(255, 59, 48, 0.45) !important;
}

/* Chat Input Bar - Sleek Glass Field */
.inp-wrap {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.2) !important;
  backdrop-filter: blur(10px);
  border-radius: 12px;
}

/* Server List neon glow items */
.srv-icon {
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}
.srv-icon:hover {
  transform: scale(1.06) translateZ(5px) !important;
  box-shadow: 0 0 15px rgba(88, 101, 242, 0.3) !important;
}


/* Premium Apple 2026 Header Buttons */
.ch-hdr-btn {
  width: 32px !important;
  height: 32px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 8px !important;
  color: #b5bac1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  padding: 0 !important;
}
.ch-hdr-btn:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

/* Float VAB like Apple Capsule */
.voice-active-bar {
  background: rgba(20, 21, 26, 0.55) !important;
  backdrop-filter: blur(25px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  margin: 10px !important;
  box-shadow: 
    0 8px 24px rgba(0, 0, 0, 0.3), 
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  padding: 10px 14px !important;
  box-sizing: border-box !important;
  transition: all 0.3s ease !important;
}
.voice-active-bar:hover {
  border-color: rgba(255, 255, 255, 0.15) !important;
  box-shadow: 
    0 12px 30px rgba(0, 0, 0, 0.4), 
    0 0 15px rgba(35, 165, 89, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}
.vab-status {
  font-size: 12px !important;
  letter-spacing: 0.2px !important;
}
.vab-channel {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #fff !important;
  margin-left: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}
.vab-disconnect {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #f23f43 !important;
  transition: all 0.2s !important;
}
.vab-disconnect:hover {
  background: #ff3b30 !important;
  color: #fff !important;
  transform: scale(1.05) !important;
  box-shadow: 0 4px 12px rgba(255, 59, 48, 0.35) !important;
}

/* Call chat open adjustments */
.dm-call-box.chat-open {
  max-width: 90%;
  width: 90%;
}


/* SPEAKING GLOW INDICATOR (Discord Style) */
.call-participant.speaking {
  box-shadow: 
    inset 0 0 0 3px #23a559, 
    0 12px 30px rgba(0, 0, 0, 0.6) !important;
  border-color: #23a559 !important;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.call-participant.speaking .participant-avatar-wrap img {
  border: 3px solid #23a559 !important;
  padding: 3px;
  background: var(--bg-1, #1e1f22) !important;
  box-shadow: 0 0 15px rgba(35, 165, 89, 0.6) !important;
  transform: scale(1.05);
  transition: all 0.15s ease;
}

/* APPLE iPHONE 17 DYNAMIC ISLAND AUDIO WAVEFORM */
@keyframes liveWavePulse {
  0%, 100% { height: 4px; opacity: 0.5; }
  50% { height: 16px; opacity: 1; }
}

.ios-live-wave-bar {
  width: 2.5px;
  background: #ef4444;
  border-radius: 999px;
  box-shadow: 0 0 6px rgba(239, 68, 68, 0.6);
}


/* ════════════════════════════════════════════════════════════
   ARIVPN — TEMA CLARO PROFESIONAL (overrides específicos)
   Neutraliza fondos oscuros hardcodeados y define la paleta SaaS
════════════════════════════════════════════════════════════ */

/* Fondo global limpio: sin nebulosa animada, velo azul apenas perceptible */
[data-theme="light"] body::before{
  animation:none;
  background:
    radial-gradient(circle at 15% 8%, rgba(37,99,235,.05) 0%, transparent 42%),
    radial-gradient(circle at 85% 90%, rgba(6,182,212,.045) 0%, transparent 42%),
    #ffffff;
}
[data-theme="light"] ::-webkit-scrollbar-thumb{background:rgba(15,23,42,.16)}
[data-theme="light"] ::-webkit-scrollbar-thumb:hover{background:rgba(15,23,42,.28)}

/* ── Login / Auth ── */
[data-theme="light"] .auth-view{background:#f6f8fb}
[data-theme="light"] .auth-bg-anim{background:radial-gradient(circle at 50% 30%,rgba(37,99,235,.08) 0%,transparent 55%),radial-gradient(circle at 80% 20%,rgba(6,182,212,.07) 0%,transparent 50%)}
[data-theme="light"] .auth-card{background:#ffffff;border:1px solid #e2e8f0;box-shadow:0 20px 50px rgba(15,23,42,.12);backdrop-filter:none;-webkit-backdrop-filter:none}
[data-theme="light"] .auth-logo{color:#06b6d4;text-shadow:none}
[data-theme="light"] .auth-title{color:#1e293b}
[data-theme="light"] .auth-subtitle{color:#64748b}
[data-theme="light"] .auth-card .pm-label{color:#64748b}
[data-theme="light"] .auth-card .stg-input{background:#f6f8fb;border:1px solid #e2e8f0;color:#1e293b;box-shadow:none}
[data-theme="light"] .auth-card .stg-input:focus{background:#ffffff;border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.15)}
[data-theme="light"] .auth-main-btn{background:#2563eb;color:#ffffff;box-shadow:0 6px 16px rgba(37,99,235,.25)}
[data-theme="light"] .auth-main-btn:hover{background:#1d4ed8;box-shadow:0 10px 20px rgba(37,99,235,.3)}
[data-theme="light"] .auth-links{color:#64748b}
[data-theme="light"] .auth-links a{color:#2563eb}
[data-theme="light"] .auth-divider{color:#94a3b8}
[data-theme="light"] .auth-divider::before,[data-theme="light"] .auth-divider::after{border-color:#e2e8f0}
[data-theme="light"] .auth-owner-btn{background:#f6f8fb;border:1px solid #e2e8f0;color:#1e293b}
[data-theme="light"] .auth-owner-btn:hover{background:#eef2f7;border-color:#cbd5e1}
[data-theme="light"] .auth-error{background:rgba(239,68,68,.08);border-color:rgba(239,68,68,.25);color:#dc2626}

/* ── Modales, menús contextuales, toasts ── */
[data-theme="light"] .modal-overlay{background:rgba(15,23,42,.45)}
[data-theme="light"] .modal-card{border:1px solid #e2e8f0;box-shadow:0 20px 50px rgba(15,23,42,.16)}
[data-theme="light"] .modal-x-btn{background:#eef2f7;color:#64748b}
[data-theme="light"] .modal-x-btn:hover{background:#e2e8f0;color:#1e293b}
[data-theme="light"] .ctx-menu{background:#ffffff;border:1px solid #e2e8f0;box-shadow:0 10px 30px rgba(15,23,42,.14)}
[data-theme="light"] .toast{background:#ffffff;color:#1e293b;border:1px solid #e2e8f0;box-shadow:0 10px 30px rgba(15,23,42,.14)}

/* ── Textos blancos hardcodeados del chrome → slate ── */
[data-theme="light"] .msg-role-badge{color:#1e293b;background:#eef2f7;border:1px solid #e2e8f0;text-shadow:none}
[data-theme="light"] .reaction{background:#f6f8fb;border:1px solid #e2e8f0;color:#475569}
[data-theme="light"] .reaction:hover{border-color:#2563eb}
[data-theme="light"] .sd-item{color:#334155}
[data-theme="light"] .sd-item:hover{background:#eef2f7;color:#1e293b}

/* ── Canal activo: pill azul suave ── */
[data-theme="light"] .ch-item.active{background:#e8effe;color:#1d4ed8}
[data-theme="light"] .ch-item.active .ch-item-icon{color:#2563eb}

/* ── Dashboards de guías (iu-*) en claro ── */
[data-theme="light"] .iu-tab:hover{color:#1e293b !important}
[data-theme="light"] .iu-card:hover{transform:translateY(-6px);border-color:#cbd5e1 !important;box-shadow:0 14px 32px rgba(15,23,42,.12)}

/* ── Elementos flotantes con texto blanco ── */
[data-theme="light"] .float-sub{color:#64748b;text-shadow:none}

/* ── Neutralizar el sistema GLASS oscuro (sidebar, miembros, header, panel usuario) ── */
[data-theme="light"] .ch-sidebar,
[data-theme="light"] .members-panel,
[data-theme="light"] .chat-header,
[data-theme="light"] .voice-active-bar,
[data-theme="light"] .user-panel {
  background: rgba(255, 255, 255, 0.78) !important;
  backdrop-filter: blur(22px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(160%) !important;
  border-color: #e2e8f0 !important;
  box-shadow: none !important;
}
[data-theme="light"] .ch-sidebar,
[data-theme="light"] .members-panel {
  background: rgba(246, 248, 251, 0.85) !important;
}
[data-theme="light"] .text-view {
  background: rgba(255, 255, 255, 0.55) !important;
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
}
[data-theme="light"] .dm-call-box {
  background: rgba(255, 255, 255, 0.85) !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 30px 70px rgba(15, 23, 42, 0.18) !important;
}

/* ── Barra de entrada de mensajes en claro ── */
[data-theme="light"] .input-area{
  background:#ffffff !important;
  border-top:1px solid #e2e8f0 !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
[data-theme="light"] .inp-wrap{
  background:#f6f8fb !important;
  border:1px solid #e2e8f0 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
}
[data-theme="light"] .inp-wrap:focus-within{
  background:#ffffff !important;
  border-color:#2563eb !important;
  box-shadow:0 0 0 3px rgba(37,99,235,.14) !important;
}
[data-theme="light"] .inp-area{color:#1e293b !important;background:transparent !important}
[data-theme="light"] .inp-area:empty::before{color:#94a3b8 !important}
[data-theme="light"] .inp-btn{
  background:#eef2f7 !important;
  border:1px solid #e2e8f0 !important;
  color:#64748b !important;
}
[data-theme="light"] .inp-btn:hover{
  background:#e8effe !important;
  border-color:#cbd5e1 !important;
  color:#2563eb !important;
}
[data-theme="light"] .inp-fmt-bar{
  background:#eef2f7 !important;
  border:1px solid #e2e8f0 !important;
}
[data-theme="light"] .fmt-btn{color:#64748b !important}
[data-theme="light"] .fmt-btn:hover{background:#e2e8f0 !important;color:#1e293b !important}
[data-theme="light"] .send-btn{
  background:#2563eb !important;
  box-shadow:0 4px 14px rgba(37,99,235,.3) !important;
}
[data-theme="light"] .send-btn:hover{background:#1d4ed8 !important}
[data-theme="light"] .inp-right-btns button,
[data-theme="light"] .inp-right-btns .inp-ico-btn{color:#64748b !important}
[data-theme="light"] .inp-right-btns button:hover{color:#2563eb !important}

/* ── Barra de voz activa y glass oscuro residual en claro ── */
[data-theme="light"] .voice-active-bar{
  background:rgba(255,255,255,.9) !important;
  border:1px solid #e2e8f0 !important;
  box-shadow:0 8px 24px rgba(15,23,42,.10) !important;
}
[data-theme="light"] .voice-active-bar:hover{border-color:#cbd5e1 !important}
[data-theme="light"] .vab-channel{color:#475569 !important}
[data-theme="light"] .glass-refract{
  background:rgba(255,255,255,.85) !important;
  border:1px solid #e2e8f0 !important;
  box-shadow:0 10px 30px rgba(15,23,42,.10) !important;
}
[data-theme="light"] .float-sub{background:rgba(255,255,255,.92);color:#1e293b;border:1px solid #e2e8f0}