/* ============================================================
   BONESCORD  –  PREMIUM STYLESHEET  v3.0
   Ultra-modern glassmorphism + aurora design system
   ============================================================ */

/* ── Design Tokens ─────────────────────────────────────────── */
:root {
    /* Core palette */
    --bs-bg-deepest:     #07080a;
    --bs-bg-deep:        #0c0d10;
    --bs-bg-base:        #101114;
    --bs-bg-raised:      #16171b;
    --bs-bg-surface:     #1a1b20;
    --bs-bg-overlay:     #1e1f25;
    --bs-bg-elevated:    #23242b;
    --bs-bg-float:       #282932;

    /* Accent system */
    --bs-accent:         #6c5ce7;
    --bs-accent-bright:  #a29bfe;
    --bs-accent-dim:     #4834d4;
    --bs-accent-glow:    rgba(108, 92, 231, .35);
    --bs-accent-surface: rgba(108, 92, 231, .08);
    --bs-accent2:        #00cec9;
    --bs-accent2-glow:   rgba(0, 206, 201, .3);
    --bs-accent3:        #fd79a8;
    --bs-accent3-glow:   rgba(253, 121, 168, .3);

    /* Semantic */
    --bs-success:        #00b894;
    --bs-success-glow:   rgba(0, 184, 148, .35);
    --bs-danger:         #ff6b6b;
    --bs-danger-glow:    rgba(255, 107, 107, .35);
    --bs-warning:        #feca57;
    --bs-info:           #54a0ff;

    /* Text */
    --bs-text-primary:   #edf0f5;
    --bs-text-secondary: #8b8fa3;
    --bs-text-muted:     #555770;
    --bs-text-ghost:     #3a3c4e;

    /* Borders */
    --bs-border:         rgba(255, 255, 255, .06);
    --bs-border-hover:   rgba(255, 255, 255, .12);
    --bs-border-active:  rgba(108, 92, 231, .4);

    /* Glass */
    --bs-glass-bg:       rgba(22, 23, 27, .72);
    --bs-glass-border:   rgba(255, 255, 255, .08);
    --bs-glass-blur:     16px;
    --bs-glass-bg-hover: rgba(30, 31, 37, .82);

    /* Shadows */
    --bs-shadow-sm:      0 2px 8px rgba(0, 0, 0, .3);
    --bs-shadow-md:      0 8px 32px rgba(0, 0, 0, .4);
    --bs-shadow-lg:      0 16px 64px rgba(0, 0, 0, .5);
    --bs-shadow-glow:    0 0 40px var(--bs-accent-glow);
    --bs-shadow-inset:   inset 0 1px 0 rgba(255,255,255,.04);

    /* Radius */
    --bs-radius-xs:  4px;
    --bs-radius-sm:  8px;
    --bs-radius-md:  12px;
    --bs-radius-lg:  16px;
    --bs-radius-xl:  24px;
    --bs-radius-full: 9999px;

    /* Transitions */
    --bs-ease-spring:  cubic-bezier(.34, 1.56, .64, 1);
    --bs-ease-smooth:  cubic-bezier(.16, 1, .3, 1);
    --bs-ease-bounce:  cubic-bezier(.68, -.55, .27, 1.55);
    --bs-duration-fast: .15s;
    --bs-duration-mid:  .25s;
    --bs-duration-slow: .4s;

    /* Font */
    --bs-font: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --bs-font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
}

/* ── Global Reset ────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
    font-family: var(--bs-font);
    background: var(--bs-bg-deepest);
    color: var(--bs-text-primary);
    font-size: 15px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow: hidden;
}
input, button, textarea, select { font-family: inherit; font-size: inherit; }
a { color: var(--bs-accent-bright); text-decoration: none; transition: color var(--bs-duration-fast); }
a:hover { color: var(--bs-accent); }

/* Text selection */
::selection { background: rgba(108, 92, 231, .35); color: #fff; }
::-moz-selection { background: rgba(108, 92, 231, .35); color: #fff; }

/* Focus ring */
:focus-visible {
    outline: 2px solid var(--bs-accent);
    outline-offset: 2px;
    border-radius: var(--bs-radius-xs);
}

/* ── Custom Scrollbar ──────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--bs-accent-dim) 0%, rgba(108,92,231,.3) 100%);
    border-radius: var(--bs-radius-full);
    border: 1px solid rgba(108,92,231,.15);
}
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--bs-accent) 0%, var(--bs-accent-dim) 100%);
    box-shadow: 0 0 8px var(--bs-accent-glow);
}
::-webkit-scrollbar-corner { background: transparent; }
* { scrollbar-width: thin; scrollbar-color: rgba(108,92,231,.3) transparent; }

/* ── AUTH PAGES (login / register) ────────────────────────── */

.auth-bg {
    min-height: 100vh;
    background: var(--bs-bg-deepest);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 20px;
    position: relative;
    overflow: hidden;
}
/* Animated aurora background */
.auth-bg::before {
    content: ''; position: fixed; top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: conic-gradient(
        from 0deg at 50% 50%,
        var(--bs-bg-deepest) 0deg,
        rgba(108, 92, 231, .12) 60deg,
        var(--bs-bg-deepest) 120deg,
        rgba(0, 206, 201, .08) 180deg,
        var(--bs-bg-deepest) 240deg,
        rgba(253, 121, 168, .08) 300deg,
        var(--bs-bg-deepest) 360deg
    );
    animation: auroraRotate 20s linear infinite;
    z-index: 0;
}
@keyframes auroraRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
/* Radial glow overlay */
.auth-bg::after {
    content: ''; position: fixed; inset: 0;
    background: radial-gradient(ellipse at 50% 30%, rgba(108, 92, 231, .15) 0%, transparent 60%);
    z-index: 0; pointer-events: none;
}

.auth-card {
    position: relative; z-index: 1;
    background: var(--bs-glass-bg);
    backdrop-filter: blur(24px) saturate(1.6);
    -webkit-backdrop-filter: blur(24px) saturate(1.6);
    border: 1px solid var(--bs-glass-border);
    border-radius: var(--bs-radius-xl);
    padding: 48px 44px 40px;
    width: 100%; max-width: 440px;
    box-shadow:
        var(--bs-shadow-lg),
        inset 0 1px 0 rgba(255,255,255,.06),
        0 0 80px rgba(108, 92, 231, .08);
    text-align: center;
    animation: authCardIn .6s var(--bs-ease-smooth) both;
}
@keyframes authCardIn {
    from { opacity: 0; transform: translateY(30px) scale(.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.auth-logo {
    width: 72px; height: 72px; border-radius: var(--bs-radius-lg);
    background: linear-gradient(135deg, var(--bs-accent) 0%, var(--bs-accent3) 100%);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 28px; font-weight: 800; margin-bottom: 24px;
    user-select: none; letter-spacing: -1px;
    box-shadow: 0 8px 32px var(--bs-accent-glow);
    animation: logoPulse 3s ease infinite;
}
@keyframes logoPulse {
    0%, 100% { box-shadow: 0 8px 32px var(--bs-accent-glow); }
    50% { box-shadow: 0 8px 48px rgba(108, 92, 231, .5); }
}

.auth-card h1 {
    font-size: 26px; font-weight: 800; color: var(--bs-text-primary);
    margin-bottom: 8px; letter-spacing: -.5px;
}
.auth-card .auth-subtitle {
    font-size: 14px; color: var(--bs-text-secondary);
    margin-bottom: 32px; line-height: 1.5;
}

.auth-form-group { text-align: left; margin-bottom: 16px; }
.auth-form-group label {
    display: block; font-size: 11px; color: var(--bs-text-secondary);
    margin-bottom: 8px; letter-spacing: .8px; text-transform: uppercase;
    font-weight: 700;
}
.auth-form-group input {
    width: 100%; padding: 12px 16px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--bs-border);
    border-radius: var(--bs-radius-md);
    color: var(--bs-text-primary); font-size: 15px;
    outline: none;
    transition: all var(--bs-duration-mid) var(--bs-ease-smooth);
}
.auth-form-group input:hover { border-color: var(--bs-border-hover); }
.auth-form-group input:focus {
    border-color: var(--bs-accent);
    box-shadow: 0 0 0 3px var(--bs-accent-glow), var(--bs-shadow-inset);
    background: rgba(255, 255, 255, .06);
}

.auth-btn {
    display: block; width: 100%; padding: 14px;
    background: linear-gradient(135deg, var(--bs-accent) 0%, var(--bs-accent-dim) 100%);
    color: #fff; border: none;
    border-radius: var(--bs-radius-full); font-size: 15px; font-weight: 700;
    cursor: pointer; margin-top: 12px;
    letter-spacing: .4px;
    transition: all var(--bs-duration-mid) var(--bs-ease-smooth);
    position: relative; overflow: hidden;
}
.auth-btn::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, transparent 0%, rgba(255,255,255,.15) 50%, transparent 100%);
    transform: translateX(-100%);
    transition: transform .5s;
}
.auth-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px var(--bs-accent-glow);
}
.auth-btn:hover::before { transform: translateX(100%); }
.auth-btn:active { transform: translateY(0) scale(.98); }

.auth-status { min-height: 22px; margin-top: 14px; font-size: 13px; border-radius: var(--bs-radius-sm); padding: 4px 0; font-weight: 500; }
.auth-status.success { color: var(--bs-success); }
.auth-status.error   { color: var(--bs-danger); }

.auth-links { display: flex; gap: 10px; justify-content: center; margin-top: 24px; flex-wrap: wrap; }
.auth-link-btn {
    padding: 10px 20px; background: rgba(255, 255, 255, .04);
    color: var(--bs-text-secondary); border: 1px solid var(--bs-border);
    border-radius: var(--bs-radius-full); font-size: 13px; font-weight: 600;
    cursor: pointer; text-decoration: none; display: inline-block;
    transition: all var(--bs-duration-mid) var(--bs-ease-smooth);
}
.auth-link-btn:hover {
    background: var(--bs-accent-surface);
    border-color: var(--bs-accent);
    color: var(--bs-accent-bright);
    transform: translateY(-1px);
}

/* ── APP SHELL (WhatsApp DM layout) ───────────────────────── */

.wa-app {
    display: grid; grid-template-columns: 380px 1fr;
    height: 100vh; overflow: hidden;
    background: var(--bs-bg-deepest);
}

/* ── SIDEBAR ─────────────────────────────────────────── */

.wa-sidebar {
    display: flex; flex-direction: column;
    background: var(--bs-bg-base);
    border-right: 1px solid var(--bs-border);
    height: 100vh; overflow: hidden;
    position: relative;
}

.wa-sidebar-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 16px;
    background: var(--bs-glass-bg);
    backdrop-filter: blur(var(--bs-glass-blur));
    border-bottom: 1px solid var(--bs-border);
    height: 60px; flex-shrink: 0;
}
.wa-sidebar-header-left { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.wa-sidebar-user-name {
    font-size: 16px; font-weight: 700; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; max-width: 140px;
    letter-spacing: -.3px;
}
.wa-sidebar-header-icons { display: flex; align-items: center; gap: 4px; }

.wa-search-wrap { padding: 10px 12px; background: var(--bs-bg-base); flex-shrink: 0; }
.wa-search-inner {
    display: flex; align-items: center;
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--bs-border);
    border-radius: var(--bs-radius-md);
    padding: 0 12px; gap: 8px; height: 40px;
    transition: all var(--bs-duration-mid) var(--bs-ease-smooth);
}
.wa-search-inner:focus-within {
    border-color: var(--bs-accent);
    box-shadow: 0 0 0 3px var(--bs-accent-glow);
    background: rgba(255, 255, 255, .06);
}
.wa-search-icon { color: var(--bs-text-muted); font-size: 15px; flex-shrink: 0; display: flex; align-items: center; transition: color var(--bs-duration-fast); }
.wa-search-inner:focus-within .wa-search-icon { color: var(--bs-accent); }
.wa-search-icon svg { width: 15px; height: 15px; fill: currentColor; }
.wa-search-inner input {
    flex: 1; background: transparent; border: none;
    outline: none; color: var(--bs-text-primary); font-size: 14px;
    -moz-appearance: textfield;
}
.wa-search-inner input::-webkit-outer-spin-button,
.wa-search-inner input::-webkit-inner-spin-button { -webkit-appearance: none; }
.wa-search-inner input::placeholder { color: var(--bs-text-muted); }

.wa-search-add-btn {
    background: none; border: none; color: var(--bs-text-muted); cursor: pointer;
    font-size: 20px; line-height: 1; padding: 0 2px; flex-shrink: 0;
    display: flex; align-items: center;
    transition: all var(--bs-duration-mid) var(--bs-ease-smooth);
}
.wa-search-add-btn:hover { color: var(--bs-accent); transform: rotate(90deg) scale(1.2); }

.wa-search-status { padding: 4px 16px; font-size: 12px; min-height: 22px; font-weight: 500; }
.wa-search-status.success { color: var(--bs-success); }
.wa-search-status.error   { color: var(--bs-danger); }

.wa-sidebar-filter { display: flex; align-items: center; padding: 8px 16px 6px; gap: 6px; flex-shrink: 0; }
.wa-filter-chip {
    padding: 4px 14px;
    background: var(--bs-accent-surface);
    border-radius: var(--bs-radius-full);
    font-size: 12px; color: var(--bs-accent-bright); font-weight: 700;
    cursor: default;
    border: 1px solid rgba(108, 92, 231, .2);
    transition: all var(--bs-duration-fast);
}
.wa-filter-chip:hover { background: rgba(108, 92, 231, .15); }

.wa-contacts-list { flex: 1; list-style: none; overflow-y: auto; }

.wa-contact-item {
    display: flex; align-items: center; gap: 12px; padding: 10px 16px;
    cursor: pointer; border-bottom: 1px solid var(--bs-border);
    position: relative;
    transition: all var(--bs-duration-mid) var(--bs-ease-smooth);
    user-select: none;
}
.wa-contact-item::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0;
    width: 3px; background: var(--bs-accent);
    transform: scaleY(0); transition: transform var(--bs-duration-mid) var(--bs-ease-smooth);
    border-radius: 0 2px 2px 0;
}
.wa-contact-item:hover { background: rgba(255, 255, 255, .03); }
.wa-contact-item.active {
    background: var(--bs-accent-surface);
    border-bottom-color: rgba(108, 92, 231, .15);
}
.wa-contact-item.active::before { transform: scaleY(1); }

.wa-contact-info { flex: 1; overflow: hidden; }
.wa-contact-name {
    font-size: 15px; font-weight: 600; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; color: var(--bs-text-primary);
}
.wa-contact-preview {
    font-size: 13px; color: var(--bs-text-secondary); white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; margin-top: 2px;
}
.wa-contact-time { font-size: 11px; color: var(--bs-text-muted); flex-shrink: 0; align-self: flex-start; padding-top: 2px; }
.wa-contacts-empty {
    padding: 32px 16px; text-align: center; color: var(--bs-text-secondary);
    font-size: 14px; line-height: 1.6;
}

/* ── AVATAR ──────────────────────────────────────────── */
.wa-avatar {
    width: 49px; height: 49px; border-radius: 50%;
    background: linear-gradient(135deg, var(--bs-accent-dim) 0%, var(--bs-accent) 100%);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 20px; font-weight: 700; flex-shrink: 0;
    text-transform: uppercase; user-select: none;
    box-shadow: 0 2px 12px rgba(108, 92, 231, .2);
    transition: transform var(--bs-duration-mid) var(--bs-ease-spring);
}
.wa-avatar:hover { transform: scale(1.08); }
.wa-avatar-sm  { width: 40px; height: 40px; font-size: 16px; }
.wa-avatar[data-color="0"] { background: linear-gradient(135deg, #e17055, #d63031); }
.wa-avatar[data-color="1"] { background: linear-gradient(135deg, #00cec9, #0984e3); }
.wa-avatar[data-color="2"] { background: linear-gradient(135deg, #00b894, #00cec9); }
.wa-avatar[data-color="3"] { background: linear-gradient(135deg, #a29bfe, #6c5ce7); }
.wa-avatar[data-color="4"] { background: linear-gradient(135deg, #fd79a8, #e84393); }
.wa-avatar[data-color="5"] { background: linear-gradient(135deg, #74b9ff, #0984e3); }
.wa-avatar[data-color="6"] { background: linear-gradient(135deg, #55efc4, #00b894); }
.wa-avatar[data-color="7"] { background: linear-gradient(135deg, #ffeaa7, #fdcb6e); }

/* ── ICON BUTTON ─────────────────────────────────────── */
.wa-icon-btn {
    background: none; border: none; color: var(--bs-text-secondary); cursor: pointer;
    padding: 8px; border-radius: var(--bs-radius-sm); display: inline-flex;
    align-items: center; justify-content: center;
    transition: all var(--bs-duration-mid) var(--bs-ease-smooth);
}
.wa-icon-btn:hover {
    background: var(--bs-accent-surface);
    color: var(--bs-accent-bright);
    transform: scale(1.1);
}
.wa-icon-btn:active { transform: scale(.9); }
.wa-icon-btn svg { width: 22px; height: 22px; fill: currentColor; }

/* ── MAIN CHAT AREA ──────────────────────────────────── */
.wa-main {
    display: flex; flex-direction: column; height: 100vh;
    background: var(--bs-bg-deep);
    position: relative; overflow: hidden;
}

.wa-empty-state {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 14px; color: var(--bs-text-muted);
    position: relative;
}
/* Subtle grid pattern background */
.wa-empty-state::before {
    content: ''; position: absolute; inset: 0;
    background-image:
        radial-gradient(rgba(108, 92, 231, .04) 1px, transparent 1px);
    background-size: 32px 32px;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
}
.wa-empty-icon { font-size: 96px; opacity: .08; line-height: 1; position: relative; z-index: 1; }
.wa-empty-title {
    font-size: 32px; font-weight: 300; color: var(--bs-text-secondary);
    position: relative; z-index: 1; letter-spacing: -.5px;
}
.wa-empty-sub {
    font-size: 14px; text-align: center; max-width: 340px;
    line-height: 1.6; position: relative; z-index: 1;
    color: var(--bs-text-muted);
}
.wa-empty-divider { width: 100%; border: none; border-top: 1px solid var(--bs-border); position: absolute; bottom: 0; }

.wa-chat { display: flex; flex-direction: column; height: 100%; overflow: hidden; }

/* Chat header */
.wa-chat-header {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 16px;
    background: var(--bs-glass-bg);
    backdrop-filter: blur(var(--bs-glass-blur));
    border-bottom: 1px solid var(--bs-border);
    height: 60px; flex-shrink: 0;
}
.wa-chat-header-info  { flex: 1; overflow: hidden; }
.wa-chat-header-name  { font-size: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.3px; }
.wa-chat-header-sub   { font-size: 12px; color: var(--bs-text-secondary); margin-top: 1px; }
.wa-chat-header-actions { display: flex; align-items: center; gap: 4px; }

/* Messages area */
.wa-messages {
    flex: 1; overflow-y: auto; padding: 16px 7%;
    display: flex; flex-direction: column; gap: 2px;
    background-color: var(--bs-bg-deep);
    background-image:
        radial-gradient(rgba(108, 92, 231, .02) 1px, transparent 1px);
    background-size: 24px 24px;
}
.wa-date-sep {
    align-self: center;
    background: var(--bs-glass-bg);
    backdrop-filter: blur(8px);
    border: 1px solid var(--bs-border);
    border-radius: var(--bs-radius-full);
    padding: 4px 14px; font-size: 12px;
    color: var(--bs-text-secondary); margin: 12px 0;
    user-select: none; font-weight: 500;
}
.wa-msg-wrap { display: flex; flex-direction: column; max-width: 65%; margin-bottom: 3px; }
.wa-msg-wrap.out { align-self: flex-end; align-items: flex-end; }
.wa-msg-wrap.in  { align-self: flex-start; align-items: flex-start; }

.wa-bubble {
    position: relative; padding: 8px 12px 24px 12px;
    border-radius: var(--bs-radius-md); font-size: 14.2px; line-height: 1.5;
    word-break: break-word;
    box-shadow: var(--bs-shadow-sm);
    transition: transform var(--bs-duration-fast);
}
.wa-bubble:hover { transform: scale(1.01); }
.wa-bubble.out {
    background: linear-gradient(135deg, var(--bs-accent-dim) 0%, rgba(108, 92, 231, .6) 100%);
    border-radius: var(--bs-radius-md) 2px var(--bs-radius-md) var(--bs-radius-md);
}
.wa-bubble.in {
    background: var(--bs-bg-elevated);
    border: 1px solid var(--bs-border);
    border-radius: 2px var(--bs-radius-md) var(--bs-radius-md) var(--bs-radius-md);
}

.wa-bubble.out::before {
    content: ''; position: absolute; top: 0; right: -8px;
    width: 0; height: 0;
    border-left: 8px solid var(--bs-accent-dim);
    border-top: 8px solid transparent;
}
.wa-bubble.in::before {
    content: ''; position: absolute; top: 0; left: -8px;
    width: 0; height: 0;
    border-right: 8px solid var(--bs-bg-elevated);
    border-top: 8px solid transparent;
}

.wa-bubble-time {
    position: absolute; bottom: 5px; right: 10px;
    font-size: 11px; color: rgba(255,255,255,.4);
    white-space: nowrap; display: flex; align-items: center; gap: 3px;
}
.wa-bubble.out .wa-bubble-time { color: rgba(162, 155, 254, .7); }
.wa-tick svg { width: 16px; height: 11px; fill: rgba(162, 155, 254, .7); }

.wa-msg-placeholder {
    align-self: center;
    background: var(--bs-glass-bg);
    border: 1px solid var(--bs-border);
    border-radius: var(--bs-radius-sm);
    padding: 6px 14px; font-size: 13px;
    color: var(--bs-text-secondary); margin: auto 0;
}

/* Input area */
.wa-input-area {
    display: flex; align-items: center; gap: 8px;
    padding: 12px 16px;
    background: var(--bs-glass-bg);
    backdrop-filter: blur(var(--bs-glass-blur));
    border-top: 1px solid var(--bs-border);
    flex-shrink: 0;
}
.wa-input-box {
    flex: 1; display: flex; align-items: center;
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--bs-border);
    border-radius: var(--bs-radius-md);
    padding: 9px 14px; gap: 10px; min-height: 44px;
    transition: all var(--bs-duration-mid) var(--bs-ease-smooth);
}
.wa-input-box:focus-within {
    border-color: var(--bs-accent);
    box-shadow: 0 0 0 3px var(--bs-accent-glow);
}
.wa-input-box input {
    flex: 1; background: transparent; border: none;
    outline: none; color: var(--bs-text-primary); font-size: 15px;
}
.wa-input-box input::placeholder { color: var(--bs-text-muted); }

.wa-send-btn {
    background: linear-gradient(135deg, var(--bs-accent) 0%, var(--bs-accent-dim) 100%);
    border: none; color: #fff;
    width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
    font-size: 18px; display: inline-flex; align-items: center;
    justify-content: center; flex-shrink: 0;
    transition: all var(--bs-duration-mid) var(--bs-ease-smooth);
    box-shadow: 0 4px 16px var(--bs-accent-glow);
    position: relative; overflow: hidden;
}
.wa-send-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 8px 32px var(--bs-accent-glow);
}
.wa-send-btn:active { transform: scale(.9); }
.wa-send-btn svg { width: 22px; height: 22px; fill: #fff; }

/* ── RESPONSIVE ──────────────────────────────────────── */
@media (max-width: 800px) {
    body { overflow: auto; }
    .wa-app { grid-template-columns: 1fr; height: auto; }
    .wa-sidebar { height: auto; border-right: none; border-bottom: 1px solid var(--bs-border); }
    .wa-contacts-list { max-height: 45vh; }
    .wa-main { height: 80vh; }
    .wa-messages { padding: 12px 4%; }
    .wa-msg-wrap { max-width: 82%; }
}

/* ── TABS ────────────────────────────────────────────── */
.wa-tabs {
    display: flex;
    border-bottom: 1px solid var(--bs-border);
    background: var(--bs-bg-base);
    flex-shrink: 0;
}
.wa-tab {
    flex: 1; background: none; border: none;
    color: var(--bs-text-muted); font-size: 11px;
    font-weight: 700; letter-spacing: 1px;
    padding: 12px 0; cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: all var(--bs-duration-mid) var(--bs-ease-smooth);
    position: relative;
}
.wa-tab:hover { color: var(--bs-text-secondary); }
.wa-tab.active {
    color: var(--bs-accent-bright);
    border-bottom-color: var(--bs-accent);
}
/* Glow effect on active tab */
.wa-tab.active::after {
    content: ''; position: absolute; bottom: -1px; left: 20%; right: 20%;
    height: 3px; background: var(--bs-accent);
    filter: blur(6px); opacity: .6;
}
.wa-tab-panel { display: none; flex: 1; overflow-y: auto; flex-direction: column; }
.wa-tab-panel.active { display: flex; flex-direction: column; flex: 1; }

/* ── PROFILE PANEL ───────────────────────────────────── */
.wa-profile-panel {
    position: absolute; top: 0; left: 0;
    width: 380px; height: 100vh;
    background: var(--bs-bg-base);
    z-index: 100;
    display: flex; flex-direction: column;
    transform: translateX(-100%);
    transition: transform var(--bs-duration-slow) var(--bs-ease-smooth);
    box-shadow: 8px 0 40px rgba(0,0,0,.5);
    border-right: 1px solid var(--bs-border);
}
.wa-profile-panel.open { transform: translateX(0); }

.wa-profile-panel-header {
    display: flex; align-items: center; gap: 18px;
    padding: 14px 20px;
    background: var(--bs-glass-bg);
    backdrop-filter: blur(var(--bs-glass-blur));
    height: 60px; flex-shrink: 0;
    font-size: 17px; font-weight: 700;
    border-bottom: 1px solid var(--bs-border);
}
.wa-profile-panel-body { flex: 1; overflow-y: auto; padding: 0 0 20px 0; }
.wa-profile-avatar-wrap {
    display: flex; justify-content: center; align-items: center;
    background: linear-gradient(135deg, var(--bs-bg-surface) 0%, var(--bs-bg-elevated) 100%);
    padding: 36px 0; margin-bottom: 8px;
    position: relative;
}
/* Decorative gradient line under avatar area */
.wa-profile-avatar-wrap::after {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--bs-accent), var(--bs-accent3), transparent);
    opacity: .4;
}
.wa-avatar-xl {
    width: 120px; height: 120px; border-radius: 50%;
    font-size: 48px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
    text-transform: uppercase;
    background: linear-gradient(135deg, var(--bs-accent) 0%, var(--bs-accent3) 100%);
    color: #fff;
    box-shadow: 0 8px 40px var(--bs-accent-glow);
}
.wa-profile-field {
    padding: 14px 24px;
    border-bottom: 1px solid var(--bs-border);
}
.wa-profile-field-label {
    font-size: 11px; color: var(--bs-accent-bright);
    margin-bottom: 4px; font-weight: 700;
    letter-spacing: .5px; text-transform: uppercase;
}
.wa-profile-field-value {
    font-size: 15px; color: var(--bs-text-primary); min-height: 22px;
}
.wa-profile-field-value.editable {
    border-bottom: 1px solid var(--bs-text-ghost);
    padding-bottom: 4px; outline: none;
    transition: border-color var(--bs-duration-mid);
}
.wa-profile-field-value.editable:focus { border-color: var(--bs-accent); }
.wa-profile-field-value.editable:empty::before {
    content: attr(data-placeholder);
    color: var(--bs-text-muted);
}
.wa-profile-section-title {
    padding: 16px 24px 4px;
    font-size: 11px; color: var(--bs-accent-bright);
    font-weight: 700; letter-spacing: .8px; text-transform: uppercase;
}
.wa-profile-input {
    width: 100%; padding: 10px 14px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--bs-border);
    border-radius: var(--bs-radius-sm);
    color: var(--bs-text-primary); font-size: 14px;
    outline: none;
    transition: all var(--bs-duration-mid) var(--bs-ease-smooth);
}
.wa-profile-input:focus {
    border-color: var(--bs-accent);
    box-shadow: 0 0 0 3px var(--bs-accent-glow);
}
.wa-color-picker { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.wa-color-chip {
    border-radius: 50%; cursor: pointer;
    border: 2px solid transparent; padding: 2px;
    transition: all var(--bs-duration-mid) var(--bs-ease-spring);
}
.wa-color-chip:hover { transform: scale(1.15); }
.wa-color-chip.active { border-color: var(--bs-accent); box-shadow: 0 0 12px var(--bs-accent-glow); }

/* ── MODAL ───────────────────────────────────────────── */
.wa-modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.7);
    backdrop-filter: blur(8px);
    z-index: 200;
    display: flex; align-items: center; justify-content: center;
    animation: bsOverlayIn .2s ease;
}
@keyframes bsOverlayIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.wa-modal {
    background: var(--bs-bg-elevated);
    border: 1px solid var(--bs-border);
    border-radius: var(--bs-radius-lg);
    width: 90%; max-width: 440px; max-height: 85vh;
    display: flex; flex-direction: column; overflow: hidden;
    box-shadow: var(--bs-shadow-lg), 0 0 60px rgba(108, 92, 231, .08);
    animation: bsModalIn .3s var(--bs-ease-smooth) both;
}
@keyframes bsModalIn {
    from { opacity: 0; transform: scale(.9) translateY(20px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}
.wa-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px;
    background: var(--bs-bg-surface);
    border-bottom: 1px solid var(--bs-border);
    font-size: 17px; font-weight: 700; flex-shrink: 0;
}
.wa-modal-body {
    flex: 1; overflow-y: auto;
    padding: 20px 20px 10px;
}
.wa-modal-body .auth-form-group label {
    font-size: 11px; color: var(--bs-accent-bright); font-weight: 700;
    letter-spacing: .8px; display: block; margin-bottom: 6px;
}
.wa-modal-footer {
    padding: 12px 20px;
    background: var(--bs-bg-surface);
    border-top: 1px solid var(--bs-border);
    flex-shrink: 0;
}

/* Member picker */
.wa-member-picker {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 2px;
    max-height: 200px; overflow-y: auto;
}
.wa-member-pick-item label {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 8px; cursor: pointer;
    border-radius: var(--bs-radius-sm);
    transition: all var(--bs-duration-fast);
    font-size: 14px; color: var(--bs-text-primary);
}
.wa-member-pick-item label:hover { background: var(--bs-accent-surface); }
.wa-member-pick-item input[type=checkbox] {
    accent-color: var(--bs-accent);
    width: 16px; height: 16px;
}

/* ── CALL OVERLAY ─────────────────────────────────────── */

/* Incoming call banner */
.dc-incoming-banner {
    position: fixed; top: 16px; right: 16px;
    width: 360px;
    background: var(--bs-glass-bg);
    backdrop-filter: blur(24px) saturate(1.5);
    border: 1px solid var(--bs-glass-border);
    border-radius: var(--bs-radius-lg);
    padding: 16px 18px;
    display: flex; align-items: center; gap: 14px;
    z-index: 9000;
    box-shadow: var(--bs-shadow-lg), 0 0 40px rgba(0,0,0,.3);
    animation: slideInBanner .35s var(--bs-ease-smooth);
}
@keyframes slideInBanner {
    from { transform: translateX(120%) scale(.9); opacity: 0; }
    to   { transform: translateX(0) scale(1);    opacity: 1; }
}
/* Pulsing border on incoming */
.dc-incoming-banner::before {
    content: ''; position: absolute; inset: -1px;
    border-radius: var(--bs-radius-lg);
    background: linear-gradient(135deg, var(--bs-success) 0%, var(--bs-accent) 100%);
    z-index: -1; animation: incomingPulse 2s ease infinite;
    opacity: .5;
}
@keyframes incomingPulse {
    0%, 100% { opacity: .3; }
    50% { opacity: .7; }
}
.dc-incoming-info   { flex: 1; }
.dc-incoming-name   { font-size: 15px; font-weight: 700; color: var(--bs-text-primary); }
.dc-incoming-sub    { font-size: 12px; color: var(--bs-text-secondary); margin-top: 2px; }
.dc-incoming-actions { display: flex; gap: 10px; }
.dc-call-btn {
    width: 46px; height: 46px; border-radius: 50%; border: none;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: all var(--bs-duration-mid) var(--bs-ease-spring);
    flex-shrink: 0;
}
.dc-call-btn:hover  { transform: scale(1.12); }
.dc-call-btn:active { transform: scale(.9); }
.dc-call-accept {
    background: linear-gradient(135deg, var(--bs-success) 0%, #00cec9 100%);
    color: #fff;
    box-shadow: 0 4px 20px var(--bs-success-glow);
}
.dc-call-decline {
    background: linear-gradient(135deg, var(--bs-danger) 0%, #e84393 100%);
    color: #fff;
    box-shadow: 0 4px 20px var(--bs-danger-glow);
}

/* Full-screen call overlay */
.dc-call-overlay {
    position: fixed; inset: 0; z-index: 8000;
    background: var(--bs-bg-deepest);
    display: flex; flex-direction: column;
}
/* Aurora background for call */
.dc-call-overlay::before {
    content: ''; position: absolute; inset: 0;
    background:
        radial-gradient(ellipse at 20% 20%, rgba(108, 92, 231, .15) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 80%, rgba(0, 206, 201, .1) 0%, transparent 50%);
    pointer-events: none;
}
.dc-remote-video {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; background: var(--bs-bg-deep);
}
.dc-local-video {
    position: absolute; bottom: 100px; right: 20px;
    width: 200px; height: 140px; object-fit: cover;
    border-radius: var(--bs-radius-lg);
    border: 2px solid rgba(108, 92, 231, .4);
    background: var(--bs-bg-elevated);
    z-index: 8010; cursor: grab;
    box-shadow: var(--bs-shadow-md);
    transition: box-shadow var(--bs-duration-mid);
}
.dc-local-video:hover { box-shadow: var(--bs-shadow-lg), 0 0 20px var(--bs-accent-glow); }

.dc-call-topbar {
    position: relative; z-index: 8020;
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px 24px;
    background: linear-gradient(to bottom, rgba(0,0,0,.7) 0%, transparent 100%);
    pointer-events: none;
}
.dc-call-topbar-info { display: flex; align-items: center; gap: 12px; }
.dc-call-name   { font-size: 18px; font-weight: 800; color: var(--bs-text-primary); letter-spacing: -.3px; }
.dc-call-status { font-size: 13px; color: var(--bs-text-secondary); margin-top: 2px; }
.dc-call-timer  {
    font-size: 18px; font-family: var(--bs-font-mono);
    color: var(--bs-success); font-weight: 700;
    text-shadow: 0 0 20px var(--bs-success-glow);
}
.dc-call-avatar-center {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 12px; position: relative; z-index: 8015;
}
.dc-call-name-center   { font-size: 28px; font-weight: 800; color: var(--bs-text-primary); letter-spacing: -.5px; }
.dc-call-status-center { font-size: 14px; color: var(--bs-text-secondary); }

.dc-call-controls {
    position: relative; z-index: 8020;
    display: flex; justify-content: center; gap: 20px;
    padding: 20px 0 36px;
    background: linear-gradient(to top, rgba(0,0,0,.8) 0%, transparent 100%);
}
.dc-call-ctrl-btn {
    width: 64px; height: 64px; border-radius: 50%; border: none;
    background: rgba(255, 255, 255, .08);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, .1);
    color: #fff; display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: all var(--bs-duration-mid) var(--bs-ease-spring);
}
.dc-call-ctrl-btn:hover {
    background: rgba(255, 255, 255, .15);
    transform: scale(1.1);
    box-shadow: 0 4px 24px rgba(0,0,0,.3);
}
.dc-call-ctrl-btn.active {
    background: linear-gradient(135deg, var(--bs-accent) 0%, var(--bs-accent-dim) 100%);
    border-color: var(--bs-accent);
    box-shadow: 0 0 24px var(--bs-accent-glow);
}
.dc-call-ctrl-btn.muted {
    background: linear-gradient(135deg, var(--bs-danger) 0%, #e84393 100%);
    border-color: var(--bs-danger);
    box-shadow: 0 0 24px var(--bs-danger-glow);
}
.dc-call-end-btn {
    background: linear-gradient(135deg, var(--bs-danger) 0%, #e84393 100%) !important;
    border-color: var(--bs-danger) !important;
    box-shadow: 0 0 24px var(--bs-danger-glow);
}
.dc-call-end-btn:hover {
    background: linear-gradient(135deg, #c0392b 0%, #e84393 100%) !important;
    box-shadow: 0 0 40px rgba(255, 107, 107, .5);
}

/* Call log in chat */
.wa-call-log-msg {
    align-self: center;
    background: var(--bs-glass-bg);
    border: 1px solid var(--bs-border);
    color: var(--bs-text-secondary);
    border-radius: var(--bs-radius-full);
    padding: 6px 16px; font-size: 13px;
    margin: 4px 0; cursor: default;
    font-weight: 500;
}

/* ── SPECIAL MESSAGES ────────────────────────────────── */
.wa-system-msg {
    align-self: center;
    background: var(--bs-accent-surface);
    color: var(--bs-text-secondary);
    border-radius: var(--bs-radius-full);
    padding: 4px 14px; font-size: 12px;
    margin: 4px 0; text-align: center;
    font-weight: 500;
    border: 1px solid rgba(108, 92, 231, .1);
}
.wa-bubble-sender {
    font-size: 12px; color: var(--bs-accent-bright);
    font-weight: 700; margin-bottom: 2px;
}
.wa-call-missed { color: var(--bs-danger); }

/* ── RESPONSIVE (panels) ────────────────────────────── */
@media (max-width: 800px) {
    .wa-profile-panel { width: 100%; }
    .wa-tabs .wa-tab { font-size: 10px; padding: 10px 0; letter-spacing: .4px; }
}

/* ── DISCORD HYBRID LAYOUT ────────────────────────────── */

/* Sidebar panel helpers */
#dmPanel { display: flex; flex-direction: column; flex: 1; overflow: hidden; min-height: 0; }
#serverPanel { flex: 1; overflow: hidden; min-height: 0; }

/* Root layout */
.dc-app {
    display: grid;
    grid-template-columns: 72px 240px 1fr;
    grid-template-rows: 100vh;
    height: 100vh; overflow: hidden;
    background: var(--bs-bg-base);
    position: relative;
}
.dc-app.members-open { grid-template-columns: 72px 240px 1fr 240px; }

/* ── Server Rail (72px) ──────────────────────────────── */
.dc-rail {
    grid-column: 1;
    display: flex; flex-direction: column; align-items: center;
    padding: 12px 0; gap: 8px;
    background: var(--bs-bg-deepest);
    overflow-y: auto; overflow-x: hidden;
    position: relative;
}
/* Ambient glow at bottom of rail */
.dc-rail::after {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0;
    height: 60px;
    background: linear-gradient(to top, rgba(108, 92, 231, .06) 0%, transparent 100%);
    pointer-events: none;
}
.dc-rail::-webkit-scrollbar { width: 0; }

.dc-rail-icon {
    width: 48px; height: 48px; border-radius: 50%;
    background: var(--bs-bg-elevated);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: var(--bs-text-secondary);
    flex-shrink: 0; position: relative;
    transition: all .25s var(--bs-ease-smooth);
    border: 1px solid transparent;
}
.dc-rail-icon:hover {
    border-radius: 30%;
    background: var(--bs-accent);
    color: #fff;
    box-shadow: 0 4px 20px var(--bs-accent-glow);
    border-color: rgba(108, 92, 231, .3);
}
.dc-rail-icon.active {
    border-radius: 30%;
    background: linear-gradient(135deg, var(--bs-accent) 0%, var(--bs-accent-dim) 100%);
    color: #fff;
    box-shadow: 0 4px 20px var(--bs-accent-glow);
}
.dc-rail-icon.active::before {
    content: ''; position: absolute;
    left: -12px; top: 50%; transform: translateY(-50%);
    width: 4px; height: 60%;
    background: linear-gradient(180deg, var(--bs-accent-bright), var(--bs-accent));
    border-radius: 0 4px 4px 0;
    box-shadow: 0 0 12px var(--bs-accent-glow);
}
.dc-rail-icon:active { transform: scale(.88); }

.dc-rail-home {
    background: var(--bs-bg-surface);
    color: var(--bs-accent);
    font-size: 20px; font-weight: 800;
}
.dc-rail-home:hover, .dc-rail-home.active {
    background: linear-gradient(135deg, var(--bs-accent) 0%, var(--bs-accent3) 100%);
    color: #fff;
}
.dc-rail-add {
    background: var(--bs-bg-surface);
    color: var(--bs-success);
    border: 1px dashed rgba(0, 184, 148, .3);
}
.dc-rail-add:hover {
    background: var(--bs-success);
    color: #fff;
    border-style: solid;
    border-color: var(--bs-success);
    box-shadow: 0 4px 20px var(--bs-success-glow);
}
.dc-rail-server-abbr {
    font-size: 13px; font-weight: 700;
    color: var(--bs-text-secondary);
    text-align: center; line-height: 1.1;
    padding: 0 4px; user-select: none;
}
.dc-rail-separator {
    width: 32px; height: 2px;
    background: linear-gradient(90deg, transparent, var(--bs-border-hover), transparent);
    border-radius: 1px; flex-shrink: 0;
}

/* ── Sidebar (240px) ─────────────────────────────────── */
.dc-sidebar {
    grid-column: 2;
    display: flex; flex-direction: column;
    background: var(--bs-bg-raised);
    overflow: hidden;
    border-right: 1px solid var(--bs-border);
}

/* DM mode header */
.dc-dm-header {
    display: flex; align-items: center; gap: 8px;
    padding: 12px 12px 8px; cursor: pointer;
    border-bottom: 1px solid var(--bs-border);
    transition: background var(--bs-duration-fast);
}
.dc-dm-header:hover { background: rgba(255, 255, 255, .03); }
.dc-dm-header-name {
    flex: 1; font-size: 13px; font-weight: 700;
    color: var(--bs-text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dc-dm-header-icons { display: flex; gap: 4px; }

/* Server mode header */
.dc-server-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 12px;
    font-size: 14px; font-weight: 800; color: var(--bs-text-primary);
    border-bottom: 1px solid var(--bs-border);
    cursor: pointer;
    transition: background var(--bs-duration-fast);
    letter-spacing: -.3px;
}
.dc-server-header:hover { background: rgba(255, 255, 255, .03); }

/* Channels scroll area */
.dc-channel-scroll { flex: 1; overflow-y: auto; padding: 8px 0; }
.dc-channel-scroll::-webkit-scrollbar { width: 3px; }
.dc-channel-scroll::-webkit-scrollbar-thumb { background: rgba(108,92,231,.2); border-radius: 2px; }

/* Channel category */
.dc-channel-category {
    padding: 18px 8px 4px 16px;
    font-size: 10px; font-weight: 800;
    color: var(--bs-text-muted);
    text-transform: uppercase; letter-spacing: 1px;
    display: flex; align-items: center; gap: 4px;
}

/* Channel item */
.dc-channel-item {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 8px 6px 16px;
    border-radius: var(--bs-radius-sm);
    margin: 1px 8px; cursor: pointer;
    color: var(--bs-text-muted);
    font-size: 15px; font-weight: 500;
    transition: all var(--bs-duration-mid) var(--bs-ease-smooth);
    position: relative;
}
.dc-channel-item:hover {
    background: rgba(255, 255, 255, .04);
    color: var(--bs-text-primary);
    padding-left: 20px;
}
.dc-channel-item.active {
    background: var(--bs-accent-surface);
    color: var(--bs-text-primary);
    border-left: 2px solid var(--bs-accent);
    padding-left: 14px;
}
.dc-channel-icon {
    font-size: 18px; width: 20px; text-align: center;
    color: var(--bs-text-ghost); flex-shrink: 0;
    transition: color var(--bs-duration-fast);
}
.dc-channel-item:hover .dc-channel-icon { color: var(--bs-text-secondary); }
.dc-channel-item.active .dc-channel-icon { color: var(--bs-accent-bright); }

/* Add channel button */
.dc-add-channel-btn {
    width: calc(100% - 16px); margin: 4px 8px;
    padding: 6px 12px; background: none;
    border: 1px dashed var(--bs-text-ghost);
    border-radius: var(--bs-radius-sm);
    color: var(--bs-text-muted); font-size: 12px;
    cursor: pointer; text-align: left;
    transition: all var(--bs-duration-mid) var(--bs-ease-smooth);
}
.dc-add-channel-btn:hover {
    border-color: var(--bs-accent); color: var(--bs-accent-bright);
    background: var(--bs-accent-surface);
}

/* User footer area in sidebar */
.dc-user-area {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 12px;
    background: var(--bs-bg-deepest);
    border-top: 1px solid var(--bs-border);
    margin-top: auto;
}
.dc-user-area-name {
    flex: 1; font-size: 13px; font-weight: 700;
    color: var(--bs-text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Main area ───────────────────────────────────────── */
.dc-main {
    grid-column: 3;
    display: flex; flex-direction: column;
    background: var(--bs-bg-surface);
    overflow: hidden;
}

/* ── Channel view ────────────────────────────────────── */
.dc-channel-view {
    display: flex; flex-direction: column;
    height: 100%; overflow: hidden;
}

/* Channel header */
.dc-channel-header {
    display: flex; align-items: center; gap: 8px;
    padding: 0 16px; height: 48px;
    background: var(--bs-glass-bg);
    backdrop-filter: blur(var(--bs-glass-blur));
    border-bottom: 1px solid var(--bs-border);
    flex-shrink: 0;
    box-shadow: 0 1px 0 rgba(0,0,0,.2);
}
.dc-channel-hash {
    font-size: 20px; font-weight: 800;
    color: var(--bs-text-ghost); user-select: none;
}
.dc-channel-header span[id="dcChannelName"] {
    font-size: 15px; font-weight: 700;
    color: var(--bs-text-primary);
}
.dc-channel-header-sep {
    flex: 0 0 1px; height: 20px;
    background: var(--bs-border); margin: 0 4px;
}
.dc-channel-topic {
    font-size: 13px; color: var(--bs-text-muted);
    flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dc-members-toggle-btn { margin-left: auto; }

/* ── Channel messages (Discord style) ────────────────── */
.dc-messages {
    flex: 1; overflow-y: auto; padding: 16px 0;
    position: relative;
}
/* Subtle gradient scanlines for depth */
.dc-messages::before {
    content: ''; position: absolute; inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent 0px,
        transparent 1px,
        rgba(108, 92, 231, .005) 1px,
        rgba(108, 92, 231, .005) 2px
    );
    pointer-events: none; z-index: 0;
}
.dc-messages::-webkit-scrollbar { width: 6px; }
.dc-messages::-webkit-scrollbar-thumb { background: rgba(108,92,231,.2); border-radius: 4px; }

.dc-msg {
    display: flex; gap: 16px; padding: 4px 16px;
    transition: background var(--bs-duration-fast);
    position: relative; z-index: 1;
}
.dc-msg:hover { background: rgba(255, 255, 255, .02); }
.dc-msg-avatar {
    width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; font-weight: 700; color: #fff; margin-top: 2px;
}
.dc-msg-body { flex: 1; min-width: 0; }
.dc-msg-meta { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; }
.dc-msg-author { font-size: 15px; font-weight: 700; color: var(--bs-text-primary); }
.dc-msg-time { font-size: 11px; color: var(--bs-text-muted); }
.dc-msg-text { font-size: 15px; color: var(--bs-text-secondary); word-break: break-word; line-height: 1.45; }
.dc-msg-own .dc-msg-author { color: var(--bs-accent-bright); }
.dc-msg-deleted .dc-msg-text { color: var(--bs-text-ghost); font-style: italic; }

/* Compact continuation */
.dc-msg-continue { padding-left: 72px; }
.dc-msg-continue .dc-msg-avatar { display: none; }

/* ── Channel input ───────────────────────────────────── */
.dc-input-area {
    display: flex; align-items: center;
    padding: 0 16px 16px; gap: 8px; flex-shrink: 0;
}
.dc-input-box {
    flex: 1;
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--bs-border);
    border-radius: var(--bs-radius-sm);
    padding: 0 14px;
    transition: all var(--bs-duration-mid) var(--bs-ease-smooth);
}
.dc-input-box:focus-within {
    border-color: var(--bs-accent);
    box-shadow: 0 0 0 3px var(--bs-accent-glow);
    background: rgba(255, 255, 255, .06);
}
.dc-input-box input {
    width: 100%; border: none; background: transparent;
    color: var(--bs-text-primary); font-size: 15px;
    padding: 12px 0; outline: none;
}
.dc-input-box input::placeholder { color: var(--bs-text-muted); }

/* ── Members panel (240px) ───────────────────────────── */
.dc-members-panel {
    grid-column: 4;
    background: var(--bs-bg-raised);
    overflow-y: auto; padding: 16px 0;
    flex-shrink: 0; width: 240px;
    border-left: 1px solid var(--bs-border);
}
.dc-members-panel::-webkit-scrollbar { width: 3px; }
.dc-members-panel::-webkit-scrollbar-thumb { background: rgba(108,92,231,.2); border-radius: 2px; }

.dc-members-header {
    padding: 8px 16px 4px;
    font-size: 10px; font-weight: 800;
    color: var(--bs-text-muted);
    text-transform: uppercase; letter-spacing: 1px;
}
.dc-member-item {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 16px; border-radius: var(--bs-radius-sm);
    margin: 1px 8px; cursor: pointer;
    color: var(--bs-text-muted); font-size: 14px;
    transition: all var(--bs-duration-fast);
}
.dc-member-item:hover {
    background: rgba(255, 255, 255, .04);
    color: var(--bs-text-primary);
}
.dc-member-name { flex: 1; font-size: 14px; }
.dc-member-role {
    font-size: 10px; padding: 2px 6px;
    border-radius: var(--bs-radius-full);
    background: rgba(255, 255, 255, .06);
    color: var(--bs-text-secondary);
    text-transform: uppercase; letter-spacing: .5px;
    font-weight: 700;
}
.dc-member-role.owner {
    background: linear-gradient(135deg, #feca57 0%, #f0932b 100%);
    color: #000;
    box-shadow: 0 2px 8px rgba(254, 202, 87, .3);
}
.dc-member-role.admin {
    background: linear-gradient(135deg, var(--bs-accent) 0%, var(--bs-accent-dim) 100%);
    color: #fff;
    box-shadow: 0 2px 8px var(--bs-accent-glow);
}

/* ── Context menu ────────────────────────────────────── */
.dc-context-menu {
    position: fixed;
    background: var(--bs-bg-deep);
    backdrop-filter: blur(20px);
    border: 1px solid var(--bs-border);
    border-radius: var(--bs-radius-md);
    padding: 6px 0; z-index: 9999; min-width: 190px;
    box-shadow: var(--bs-shadow-lg), 0 0 40px rgba(0,0,0,.3);
    animation: bsCtxIn .18s var(--bs-ease-smooth);
}
.dc-context-item {
    padding: 8px 16px; font-size: 14px;
    color: var(--bs-text-secondary); cursor: pointer;
    transition: all .12s var(--bs-ease-smooth);
    border-radius: var(--bs-radius-xs);
    margin: 0 4px;
}
.dc-context-item:hover {
    background: linear-gradient(135deg, var(--bs-accent) 0%, var(--bs-accent-dim) 100%);
    color: #fff;
    transform: translateX(2px);
}
.dc-context-danger { color: var(--bs-danger); }
.dc-context-danger:hover {
    background: linear-gradient(135deg, var(--bs-danger) 0%, #e84393 100%);
    color: #fff;
}

/* ── Server modal tabs ───────────────────────────────── */
.dc-server-modal-tabs {
    display: flex; gap: 4px;
    border-bottom: 1px solid var(--bs-border);
    padding-bottom: 4px;
}
.dc-server-modal-tab {
    flex: 1; padding: 10px;
    background: none; border: none;
    border-radius: var(--bs-radius-sm) var(--bs-radius-sm) 0 0;
    color: var(--bs-text-muted); font-size: 14px; font-weight: 700;
    cursor: pointer;
    transition: all var(--bs-duration-fast);
}
.dc-server-modal-tab.active {
    color: var(--bs-accent-bright);
    border-bottom: 2px solid var(--bs-accent);
}
.dc-server-modal-tab:hover:not(.active) { color: var(--bs-text-secondary); }

/* ── VOICE CHANNEL SYSTEM ────────────────────────────── */

/* Voice status bar */
.dc-voice-status-bar {
    display: flex; align-items: center; justify-content: space-between;
    background: linear-gradient(135deg, rgba(0, 184, 148, .08) 0%, var(--bs-bg-deepest) 100%);
    border-top: 1px solid rgba(0, 184, 148, .2);
    padding: 8px 10px; flex-shrink: 0;
    position: relative; overflow: hidden;
    animation: bsVoiceBarIn .3s var(--bs-ease-smooth);
}
.dc-voice-status-bar::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 184, 148, .6), var(--bs-accent-glow), transparent);
    animation: bsVoiceBarShine 4s ease infinite;
}
@keyframes bsVoiceBarIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes bsVoiceBarShine {
    0%,100% { opacity: .2; } 50% { opacity: .8; }
}
.dc-voice-status-info { display: flex; align-items: center; gap: 6px; overflow: hidden; flex: 1; min-width: 0; }
.dc-voice-status-channel {
    font-size: 12px; font-weight: 800;
    color: var(--bs-success); letter-spacing: .3px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dc-voice-status-sub { font-size: 11px; color: var(--bs-text-secondary); }
.dc-voice-status-actions { display: flex; gap: 2px; flex-shrink: 0; }
.dc-voice-ctrl {
    background: none; border: none;
    border-radius: var(--bs-radius-xs);
    color: var(--bs-text-secondary); cursor: pointer;
    padding: 5px 7px; display: flex; align-items: center;
    transition: all .2s var(--bs-ease-smooth);
}
.dc-voice-ctrl:hover { background: rgba(255,255,255,.06); color: #fff; transform: scale(1.15); }
.dc-voice-ctrl:active { transform: scale(.9); }
.dc-voice-ctrl.muted, .dc-voice-ctrl.deafened { color: var(--bs-danger); }
.dc-voice-ctrl-red:hover { background: var(--bs-danger) !important; color: #fff !important; }

/* Voice participants */
.dc-voice-participants { padding: 2px 8px 6px 28px; }
.dc-voice-participant {
    display: flex; align-items: center; gap: 6px;
    padding: 3px 8px; border-radius: var(--bs-radius-sm);
    cursor: default;
    transition: all .2s var(--bs-ease-smooth);
    position: relative;
}
.dc-voice-participant:hover { background: rgba(255,255,255,.03); transform: translateX(2px); }
.dc-voice-participant.dc-voice-speaking {
    background: rgba(0, 184, 148, .08);
    border-left: 2px solid var(--bs-success);
    padding-left: 6px;
}
.dc-voice-participant-name {
    font-size: 12.5px; color: var(--bs-text-muted);
    flex: 1; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; transition: color .2s;
}
.dc-voice-participant-name.me { color: var(--bs-text-primary); }
.dc-voice-participant.dc-voice-speaking .dc-voice-participant-name { color: var(--bs-success); }

@keyframes voiceRingPulse {
    0%   { box-shadow: 0 0 0 0   rgba(0,184,148,.75); }
    70%  { box-shadow: 0 0 0 5px rgba(0,184,148,0);   }
    100% { box-shadow: 0 0 0 0   rgba(0,184,148,0);   }
}
.dc-voice-participant .wa-avatar {
    transition: outline-color .2s, box-shadow .2s;
    outline: 2px solid transparent; outline-offset: 1px;
}
.dc-voice-participant.dc-voice-speaking .wa-avatar {
    outline-color: var(--bs-success);
    animation: voiceRingPulse 1.4s ease infinite;
    box-shadow: 0 0 12px var(--bs-success-glow);
}

@keyframes selfSpeakBorder {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0,184,148,.6); }
    50%       { box-shadow: 0 0 0 4px rgba(0,184,148,0); }
}
#selfMuteBtn.dc-voice-self-speaking {
    animation: selfSpeakBorder 1.2s ease infinite;
    color: var(--bs-success);
}

@keyframes liveDotPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: .4; transform: scale(.8); }
}
.dc-voice-live-dot { animation: liveDotPulse 2s ease infinite; flex-shrink: 0; margin-right: 4px; }

.dc-voice-muted-icon { display: flex; align-items: center; color: var(--bs-danger); flex-shrink: 0; }
.dc-voice-listener-icon { display: flex; align-items: center; color: var(--bs-text-muted); opacity: .65; flex-shrink: 0; }

.dc-voice-participant-actions {
    display: none; gap: 2px; flex-shrink: 0;
    position: absolute; right: 4px;
}
.dc-voice-participant:hover .dc-voice-participant-actions { display: flex; }
.dc-voice-participant-actions button {
    background: none; border: none; border-radius: 3px;
    color: var(--bs-text-muted); cursor: pointer;
    padding: 2px 4px; font-size: 11px;
    display: flex; align-items: center;
    transition: all .15s var(--bs-ease-smooth);
}
.dc-voice-participant-actions button:hover { background: var(--bs-accent); color: #fff; }

.dc-voice-limit-badge {
    margin-left: auto; font-size: 11px;
    color: var(--bs-text-muted); flex-shrink: 0; font-weight: 700;
}
.dc-voice-limit-badge.full { color: var(--bs-danger); }
.dc-voice-channel-locked { opacity: .5; }

/* ── Roles modal ─────────────────────────────────────── */
.wa-modal-lg { max-width: 680px; width: 90vw; }
.roles-modal-body {
    display: flex; gap: 0; height: 420px;
    overflow: hidden; padding: 0;
}
.roles-sidebar {
    width: 180px; flex-shrink: 0;
    border-right: 1px solid var(--bs-border);
    display: flex; flex-direction: column; overflow: hidden;
}
.roles-list { flex: 1; overflow-y: auto; padding: 8px 4px; }
.roles-list-item {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 10px; border-radius: var(--bs-radius-sm);
    cursor: pointer; font-size: 13px;
    color: var(--bs-text-secondary);
    transition: all var(--bs-duration-fast);
}
.roles-list-item:hover  { background: rgba(255,255,255,.04); }
.roles-list-item.active {
    background: var(--bs-accent-surface);
    color: var(--bs-text-primary);
}
.roles-list-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.roles-editor { flex: 1; overflow-y: auto; padding: 16px; }
.roles-placeholder { flex: 1; display: flex; align-items: center; justify-content: center; }
.roles-editor-section { margin-bottom: 16px; }
.roles-editor-label {
    font-size: 10px; font-weight: 800;
    color: var(--bs-text-muted);
    text-transform: uppercase; letter-spacing: .8px;
    margin-bottom: 6px;
}
.roles-perms-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
}
.roles-perm-row {
    display: flex; align-items: center; gap: 6px;
    font-size: 13px; color: var(--bs-text-secondary); cursor: pointer;
}
.roles-perm-row input[type=checkbox] { accent-color: var(--bs-accent); }
.dc-role-colors { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.dc-role-color-swatch {
    width: 22px; height: 22px; border-radius: 50%;
    cursor: pointer; border: 2px solid transparent;
    transition: all .15s var(--bs-ease-spring);
}
.dc-role-color-swatch:hover, .dc-role-color-swatch.selected {
    border-color: #fff; transform: scale(1.2);
    box-shadow: 0 0 12px rgba(255,255,255,.2);
}
.roles-members-list {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-bottom: 8px; min-height: 28px;
}
.roles-member-chip {
    display: flex; align-items: center; gap: 4px;
    background: var(--bs-bg-float);
    border-radius: var(--bs-radius-full);
    padding: 2px 8px 2px 4px; font-size: 12px;
    color: var(--bs-text-secondary);
}
.roles-member-chip button {
    background: none; border: none;
    color: var(--bs-text-muted); cursor: pointer;
    font-size: 14px; line-height: 1; padding: 0 2px;
    transition: color var(--bs-duration-fast);
}
.roles-member-chip button:hover { color: var(--bs-danger); }
.roles-assign-wrap { display: flex; gap: 6px; align-items: center; }

/* Active voice channel indicator */
.dc-channel-item.dc-voice-active {
    background: rgba(0, 184, 148, .1) !important;
    color: var(--bs-success) !important;
    border-left: 2px solid var(--bs-success);
}
.dc-channel-item.dc-voice-active .dc-channel-icon { color: var(--bs-success); }

/* Voice status actions */
.dc-voice-status-actions button {
    transition: all .2s var(--bs-ease-smooth) !important;
}
.dc-voice-status-actions button:hover { transform: scale(1.15) !important; }
.dc-voice-status-actions button:active { transform: scale(.9) !important; }
.dc-voice-status-actions button.muted,
.dc-voice-status-actions button.deafened {
    animation: bsMuteFlash .3s ease;
}
@keyframes bsMuteFlash {
    0% { box-shadow: 0 0 0 0 rgba(255,107,107,.4); }
    50% { box-shadow: 0 0 12px 4px rgba(255,107,107,.3); }
    100% { box-shadow: 0 0 0 0 rgba(255,107,107,0); }
}/* ── RESPONSIVE (Discord layout) ─────────────────────── */
@media (max-width: 900px) {
    .dc-app { grid-template-columns: 72px 200px 1fr; }
    .dc-app.members-open { grid-template-columns: 72px 200px 1fr; }
    .dc-members-panel { display: none !important; }
}
@media (max-width: 600px) {
    .dc-rail { width: 60px; }
    .dc-app { grid-template-columns: 60px 1fr; }
    .dc-sidebar { display: none; }
    .dc-app.sidebar-open .dc-sidebar {
        display: flex; position: absolute; z-index: 100;
        top: 0; left: 60px; height: 100%;
    }
}

/* ── TOAST NOTIFICATIONS ─────────────────────────────── */
.dc-toast {
    position: fixed; bottom: 80px; left: 50%;
    transform: translateX(-50%);
    z-index: 9999; color: #fff;
    padding: 14px 28px;
    border-radius: var(--bs-radius-full);
    font-size: 14px; font-weight: 700;
    box-shadow: var(--bs-shadow-lg);
    backdrop-filter: blur(16px);
    pointer-events: none;
    animation: bsToastIn .4s var(--bs-ease-smooth) both;
    letter-spacing: .3px;
    border: 1px solid rgba(255,255,255,.1);
}
@keyframes bsToastIn {
    from { opacity: 0; transform: translateX(-50%) translateY(20px) scale(.9); }
    to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
.dc-toast-error {
    background: linear-gradient(135deg, var(--bs-danger) 0%, #e84393 100%);
    box-shadow: var(--bs-shadow-lg), 0 0 40px var(--bs-danger-glow);
}
.dc-toast-success {
    background: linear-gradient(135deg, var(--bs-success) 0%, #00cec9 100%);
    box-shadow: var(--bs-shadow-lg), 0 0 40px var(--bs-success-glow);
}
.dc-toast-info {
    background: linear-gradient(135deg, var(--bs-accent) 0%, var(--bs-accent-dim) 100%);
    box-shadow: var(--bs-shadow-lg), 0 0 40px var(--bs-accent-glow);
}

/* ── MESSAGE ANIMATIONS ──────────────────────────────── */
@keyframes msgFadeUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0);   }
}
.dc-msg-new  { animation: msgFadeUp .25s var(--bs-ease-smooth) both; }
.wa-msg-new  { animation: msgFadeUp .25s var(--bs-ease-smooth) both; }

/* ── Smooth modal appear ─────────────────────────────── */
.wa-modal-overlay { animation: bsOverlayIn .2s ease; }
.wa-modal { animation: bsModalIn .3s var(--bs-ease-smooth) both; }

/* ── Send button & call button effects ───────────────── */
.wa-send-btn, .dc-call-ctrl-btn { overflow: hidden; }


/* ============================================================
   BONESCORD – LANDING PAGE (index.php)
   ============================================================ */

.landing-body {
    background: var(--bs-bg-deepest); color: var(--bs-text-primary);
    min-height: 100vh; display: flex; flex-direction: column; height: auto;
    overflow-x: hidden;
}

/* ── Navigation ──────────────────────────────────────── */
.landing-nav {
    position: sticky; top: 0; z-index: 100;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 32px; height: 64px;
    background: rgba(7, 8, 10, .85);
    backdrop-filter: blur(20px) saturate(1.5);
    border-bottom: 1px solid var(--bs-border);
}
.landing-nav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.landing-logo-mark {
    width: 38px; height: 38px; border-radius: var(--bs-radius-md);
    background: linear-gradient(135deg, var(--bs-accent) 0%, var(--bs-accent3) 100%);
    color: #fff; font-weight: 900; font-size: 18px;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    box-shadow: 0 4px 16px var(--bs-accent-glow);
}
.landing-logo-text { font-size: 18px; font-weight: 800; color: var(--bs-text-primary); letter-spacing: -.5px; }
.landing-nav-links { display: flex; align-items: center; gap: 14px; }
.landing-nav-link {
    color: var(--bs-text-secondary); font-size: 14px; font-weight: 500;
    background: none; border: none; padding: 6px 2px;
    text-decoration: none;
    transition: color var(--bs-duration-fast);
}
.landing-nav-link:hover { color: var(--bs-text-primary); }
.landing-nav-cta {
    background: linear-gradient(135deg, var(--bs-accent) 0%, var(--bs-accent-dim) 100%);
    color: #fff; border: none;
    padding: 10px 22px; border-radius: var(--bs-radius-full);
    font-size: 14px; font-weight: 700;
    cursor: pointer; text-decoration: none;
    transition: all var(--bs-duration-mid) var(--bs-ease-smooth);
    box-shadow: 0 4px 16px var(--bs-accent-glow);
}
.landing-nav-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px var(--bs-accent-glow);
    color: #fff;
}
.landing-nav-user { color: var(--bs-text-secondary); font-size: 14px; }

/* ── Hero ────────────────────────────────────────────── */
.landing-hero {
    position: relative; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    padding: 120px 32px 140px; text-align: center; flex-shrink: 0;
    background: var(--bs-bg-deepest);
}
/* Animated aurora overlay */
.landing-hero::before {
    content: ''; position: absolute; top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: conic-gradient(
        from 180deg at 50% 50%,
        transparent 0deg,
        rgba(108, 92, 231, .1) 60deg,
        transparent 120deg,
        rgba(0, 206, 201, .06) 180deg,
        transparent 240deg,
        rgba(253, 121, 168, .06) 300deg,
        transparent 360deg
    );
    animation: auroraRotate 25s linear infinite;
    z-index: 0;
}
.landing-hero-inner { position: relative; z-index: 2; max-width: 760px; }
.landing-hero-badge {
    display: inline-block;
    background: var(--bs-accent-surface);
    border: 1px solid rgba(108, 92, 231, .3);
    color: var(--bs-accent-bright);
    border-radius: var(--bs-radius-full);
    padding: 6px 18px;
    font-size: 12px; font-weight: 700;
    letter-spacing: .8px; text-transform: uppercase;
    margin-bottom: 32px;
    backdrop-filter: blur(8px);
}
.landing-hero-title {
    font-size: clamp(2.2rem, 5.5vw, 3.6rem);
    font-weight: 900; line-height: 1.12;
    color: var(--bs-text-primary);
    margin-bottom: 24px; letter-spacing: -1px;
}
/* Gradient text effect on hero title */
.landing-hero-title span,
.landing-hero-title strong {
    background: linear-gradient(135deg, var(--bs-accent-bright) 0%, var(--bs-accent2) 50%, var(--bs-accent3) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.landing-hero-sub {
    font-size: 17px; color: var(--bs-text-secondary);
    line-height: 1.7; max-width: 580px; margin: 0 auto 48px;
}
.landing-hero-cta { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.landing-btn-primary {
    background: linear-gradient(135deg, var(--bs-accent) 0%, var(--bs-accent-dim) 100%);
    color: #fff; border: none;
    padding: 16px 36px; border-radius: var(--bs-radius-full);
    font-size: 16px; font-weight: 800;
    cursor: pointer; text-decoration: none;
    transition: all var(--bs-duration-mid) var(--bs-ease-smooth);
    display: inline-block;
    box-shadow: 0 8px 32px var(--bs-accent-glow);
    position: relative; overflow: hidden;
}
.landing-btn-primary::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, transparent, rgba(255,255,255,.15), transparent);
    transform: translateX(-100%); transition: transform .5s;
}
.landing-btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 48px var(--bs-accent-glow);
    color: #fff;
}
.landing-btn-primary:hover::before { transform: translateX(100%); }

.landing-btn-ghost {
    background: transparent; color: var(--bs-text-primary);
    border: 1.5px solid rgba(255,255,255,.12);
    padding: 15px 30px; border-radius: var(--bs-radius-full);
    font-size: 16px; font-weight: 700;
    cursor: pointer; text-decoration: none;
    transition: all var(--bs-duration-mid) var(--bs-ease-smooth);
    display: inline-block;
    backdrop-filter: blur(4px);
}
.landing-btn-ghost:hover {
    border-color: var(--bs-accent);
    color: var(--bs-accent-bright);
    background: var(--bs-accent-surface);
    transform: translateY(-2px);
}

/* Decorative circles */
.landing-hero-deco { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.deco-circle {
    position: absolute; border-radius: 50%;
    background: radial-gradient(circle, rgba(108,92,231,.18) 0%, transparent 70%);
    animation: decoFloat 8s ease-in-out infinite;
}
@keyframes decoFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}
.deco-c1 { width: 600px; height: 600px; top: -160px; right: -120px; animation-delay: 0s; }
.deco-c2 {
    width: 400px; height: 400px; bottom: -100px; left: -80px;
    background: radial-gradient(circle, rgba(0,206,201,.12) 0%, transparent 70%);
    animation-delay: 2s;
}
.deco-c3 {
    width: 250px; height: 250px; top: 60px; left: 30%;
    background: radial-gradient(circle, rgba(253,121,168,.1) 0%, transparent 70%);
    animation-delay: 4s;
}

/* ── Features ────────────────────────────────────────── */
.landing-features {
    padding: 80px 32px 100px;
    background: var(--bs-bg-deep); flex: 1;
    position: relative;
}
/* Top gradient line */
.landing-features::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--bs-accent-glow), var(--bs-accent2-glow), transparent);
}
.landing-features-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px; max-width: 1100px; margin: 0 auto;
}
.landing-feature-card {
    background: var(--bs-glass-bg);
    backdrop-filter: blur(12px);
    border: 1px solid var(--bs-border);
    border-radius: var(--bs-radius-lg);
    padding: 32px 28px;
    transition: all var(--bs-duration-mid) var(--bs-ease-smooth);
    position: relative; overflow: hidden;
}
/* Hover glow effect */
.landing-feature-card::before {
    content: ''; position: absolute; top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: radial-gradient(circle at center, var(--bs-accent-glow), transparent 50%);
    opacity: 0; transition: opacity .4s;
    pointer-events: none;
}
.landing-feature-card:hover {
    border-color: var(--bs-border-hover);
    transform: translateY(-4px);
    box-shadow: var(--bs-shadow-md);
}
.landing-feature-card:hover::before { opacity: .3; }

.landing-feature-icon {
    width: 56px; height: 56px; border-radius: var(--bs-radius-lg);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 20px; color: #fff;
    box-shadow: 0 4px 20px rgba(0,0,0,.3);
}
.landing-feature-card h3 {
    font-size: 17px; font-weight: 800; margin-bottom: 10px;
    letter-spacing: -.3px;
}
.landing-feature-card p {
    font-size: 14px; color: var(--bs-text-secondary); line-height: 1.7;
}

/* ── Footer ──────────────────────────────────────────── */
.landing-footer {
    background: var(--bs-bg-deepest);
    border-top: 1px solid var(--bs-border);
    padding: 28px 32px;
    display: flex; align-items: center;
    justify-content: space-between; flex-wrap: wrap; gap: 12px;
}
.landing-footer-logo { display: flex; align-items: center; gap: 10px; }
.landing-footer-copy { font-size: 12px; color: var(--bs-text-muted); }

/* Auth logo letter */
.auth-logo { font-size: 22px; font-weight: 900; letter-spacing: -1px; }

/* ============================================================
   BONESCORD – AUDIO SETTINGS SYSTEM
============================================================ */

/* Context menu separator */
.dc-context-separator {
    height: 1px;
    background: rgba(255,255,255,.08);
    margin: 4px 8px;
}

/* Toggle switch */
.bs-toggle {
    width: 44px; height: 24px; border-radius: 12px;
    background: var(--bs-bg-float); position: relative; cursor: pointer;
    flex-shrink: 0; transition: background var(--bs-duration-mid) var(--bs-ease-smooth), box-shadow var(--bs-duration-mid);
    border: none; outline: none; display: inline-block;
}
.bs-toggle.on { background: var(--bs-accent); box-shadow: 0 0 14px var(--bs-accent-glow); }
.bs-toggle:hover { filter: brightness(1.15); }
.bs-toggle::after {
    content: ''; position: absolute;
    width: 18px; height: 18px; border-radius: 9px;
    background: #fff; top: 3px; left: 3px;
    transition: transform .25s cubic-bezier(.34,1.56,.64,1);
    box-shadow: 0 2px 8px rgba(0,0,0,.35);
}
.bs-toggle.on::after { transform: translateX(20px); }

/* ============================================================
   BONESCORD – AUDIO SETTINGS MODAL
   ============================================================ */
.bs-audio-modal {
    position: fixed; inset: 0; z-index: 9001;
    display: none; align-items: center; justify-content: center;
    background: rgba(0,0,0,.65); backdrop-filter: blur(16px) saturate(1.3);
}
.bs-audio-modal-box {
    background: var(--bs-bg-elevated);
    border: 1px solid var(--bs-border);
    border-radius: var(--bs-radius-xl);
    width: 440px; max-width: calc(100vw - 32px);
    box-shadow: var(--bs-shadow-lg);
    overflow: hidden; display: flex; flex-direction: column;
    animation: modalAppear .35s var(--bs-ease-spring);
}
.bs-audio-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 22px 24px 18px;
    border-bottom: 1px solid var(--bs-border);
    background: var(--bs-glass-bg);
}
.bs-audio-modal-header h2 {
    font-size: 17px; font-weight: 800; color: var(--bs-text-primary);
    margin: 0; display: flex; align-items: center; gap: 8px;
    letter-spacing: -.3px;
}
.bs-audio-close {
    background: none; border: none; color: var(--bs-text-muted);
    cursor: pointer; padding: 6px; border-radius: var(--bs-radius-md);
    display: flex; align-items: center; justify-content: center;
    transition: all var(--bs-duration-fast);
}
.bs-audio-close:hover {
    color: var(--bs-text-primary);
    background: rgba(255,255,255,.08);
    transform: rotate(90deg);
}

.bs-audio-modal-body {
    padding: 20px 24px; display: flex; flex-direction: column; gap: 12px;
    overflow-y: auto; max-height: 70vh;
}

.bs-audio-section {
    font-size: 11px; font-weight: 800; letter-spacing: .8px;
    text-transform: uppercase; color: var(--bs-text-muted); margin-top: 8px;
}

.bs-audio-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px; border-radius: var(--bs-radius-lg);
    background: var(--bs-glass-bg); gap: 12px;
    border: 1px solid transparent;
    transition: all var(--bs-duration-fast);
}
.bs-audio-row:hover {
    background: rgba(255,255,255,.06);
    border-color: var(--bs-border);
}
.bs-audio-row-label { display: flex; flex-direction: column; gap: 2px; }
.bs-audio-row-label span:first-child { font-size: 14px; font-weight: 600; color: var(--bs-text-primary); }
.bs-audio-row-label span:last-child { font-size: 12px; color: var(--bs-text-muted); }

.bs-audio-slider-row {
    display: flex; flex-direction: column; gap: 6px;
    padding: 12px 16px; border-radius: var(--bs-radius-lg);
    background: var(--bs-glass-bg);
    border: 1px solid transparent;
    transition: border-color var(--bs-duration-fast);
}
.bs-audio-slider-row:hover { border-color: var(--bs-border); }
.bs-audio-slider-header { display: flex; align-items: center; justify-content: space-between; }
.bs-audio-slider-header span:first-child { font-size: 14px; font-weight: 600; color: var(--bs-text-primary); }
.bs-audio-slider-val { font-size: 13px; font-weight: 800; color: var(--bs-accent-bright); min-width: 38px; text-align: right; }
.bs-audio-slider-sub { font-size: 12px; color: var(--bs-text-muted); margin-bottom: 2px; }

input[type=range].bs-slider {
    -webkit-appearance: none; appearance: none;
    width: 100%; height: 4px; border-radius: 2px;
    background: var(--bs-bg-deepest); outline: none; cursor: pointer;
}
input[type=range].bs-slider::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 16px; height: 16px; border-radius: 8px;
    background: var(--bs-accent); box-shadow: 0 0 0 3px var(--bs-accent-glow);
    cursor: pointer; transition: all .2s var(--bs-ease-smooth);
}
input[type=range].bs-slider:hover::-webkit-slider-thumb {
    box-shadow: 0 0 0 6px var(--bs-accent-glow); transform: scale(1.15);
}
input[type=range].bs-slider:active::-webkit-slider-thumb {
    box-shadow: 0 0 0 8px var(--bs-accent-glow); transform: scale(1.2);
}
input[type=range].bs-slider::-moz-range-thumb {
    width: 16px; height: 16px; border-radius: 8px; border: none;
    background: var(--bs-accent); cursor: pointer;
}

/* Level meter */
.bs-level-meter-wrap {
    display: flex; flex-direction: column; gap: 6px;
    padding: 12px 16px; border-radius: var(--bs-radius-lg);
    background: var(--bs-glass-bg);
}
.bs-level-meter-label { font-size: 12px; color: var(--bs-text-muted); }
.bs-level-meter-bar {
    height: 8px; border-radius: 4px;
    background: var(--bs-bg-deepest); overflow: hidden;
}
.bs-level-meter-fill {
    height: 100%; width: 0%; border-radius: 4px;
    background: linear-gradient(90deg, var(--bs-success) 0%, var(--bs-warning) 75%, var(--bs-danger) 100%);
    transition: width .08s linear;
}

.bs-audio-modal-footer {
    padding: 18px 24px; border-top: 1px solid var(--bs-border);
    display: flex; justify-content: flex-end; gap: 10px;
    background: var(--bs-glass-bg);
}
.bs-btn-secondary {
    background: transparent; border: 1px solid var(--bs-border);
    color: var(--bs-text-secondary);
    padding: 10px 20px; border-radius: var(--bs-radius-md); font-size: 14px; font-weight: 600;
    cursor: pointer; transition: all var(--bs-duration-fast);
}
.bs-btn-secondary:hover { border-color: var(--bs-text-secondary); color: var(--bs-text-primary); }
.bs-btn-primary {
    background: linear-gradient(135deg, var(--bs-accent) 0%, var(--bs-accent-dim) 100%);
    border: none; color: #fff;
    padding: 10px 22px; border-radius: var(--bs-radius-md); font-size: 14px; font-weight: 700;
    cursor: pointer; transition: all var(--bs-duration-fast);
    box-shadow: 0 4px 16px var(--bs-accent-glow);
}
.bs-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 24px var(--bs-accent-glow);
}

/* ============================================================
   BONESCORD – FULL-SCREEN SETTINGS
   ============================================================ */
.bs-settings-overlay {
    position: fixed; inset: 0; z-index: 8000;
    display: none; background: var(--bs-bg-deep);
    animation: bsSettingsSlideIn .4s var(--bs-ease-spring);
}
@keyframes bsSettingsSlideIn {
    from { opacity: 0; transform: translateX(30px); }
    to { opacity: 1; transform: translateX(0); }
}
.bs-settings-layout {
    display: flex; height: 100vh; width: 100%;
}
.bs-settings-nav {
    width: 232px; min-width: 232px; background: var(--bs-bg-base);
    display: flex; flex-direction: column; padding: 60px 8px 20px 20px;
    overflow-y: auto;
    border-right: 1px solid var(--bs-border);
}
.bs-settings-nav-heading {
    font-size: 11px; font-weight: 800; letter-spacing: .8px;
    text-transform: uppercase; color: var(--bs-text-muted);
    padding: 6px 10px 4px; margin-top: 8px;
}
.bs-settings-nav-heading:first-child { margin-top: 0; }
.bs-settings-nav-item {
    padding: 8px 12px; border-radius: var(--bs-radius-md); cursor: pointer;
    font-size: 14px; font-weight: 500; color: var(--bs-text-secondary);
    transition: all var(--bs-duration-fast) var(--bs-ease-smooth); margin: 1px 0;
    position: relative;
}
.bs-settings-nav-item:hover {
    background: rgba(255,255,255,.06); color: var(--bs-text-primary);
    transform: translateX(2px);
}
.bs-settings-nav-item.active {
    background: var(--bs-accent-surface); color: #fff;
    box-shadow: inset 3px 0 0 var(--bs-accent);
}
.bs-settings-nav-sep {
    height: 1px; background: var(--bs-border); margin: 8px 10px;
}
.bs-settings-nav-danger { color: var(--bs-danger); }
.bs-settings-nav-danger:hover { background: rgba(237,66,69,.12); color: var(--bs-danger); }

.bs-settings-content {
    flex: 1; overflow-y: auto; padding: 60px 40px 40px 40px;
    max-width: 740px;
}
.bs-settings-close-col {
    width: 60px; min-width: 60px; padding-top: 60px; display: flex;
    flex-direction: column; align-items: center;
}
.bs-settings-close-btn {
    width: 40px; height: 40px; border-radius: 50%;
    border: 2px solid var(--bs-text-muted); background: none; color: var(--bs-text-muted);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: all .3s var(--bs-ease-spring); position: sticky; top: 60px;
}
.bs-settings-close-btn:hover {
    border-color: var(--bs-text-primary); color: var(--bs-text-primary);
    transform: rotate(90deg) scale(1.1);
    box-shadow: 0 0 16px var(--bs-accent-glow);
}
.bs-settings-close-hint {
    font-size: 11px; color: var(--bs-text-muted); margin-top: 4px;
    font-weight: 700; position: sticky; top: 104px;
}
.bs-settings-page { display: none; }
.bs-settings-page.active { display: block; }
.bs-settings-page h2 {
    font-size: 22px; font-weight: 800; color: var(--bs-text-primary);
    margin-bottom: 20px; display: flex; align-items: center; gap: 8px;
    letter-spacing: -.5px;
}
.bs-settings-page h3 {
    font-size: 12px; font-weight: 800; letter-spacing: .8px;
    text-transform: uppercase; color: var(--bs-text-secondary); margin: 24px 0 8px;
}

.bs-settings-card {
    background: var(--bs-bg-elevated); border-radius: var(--bs-radius-lg); padding: 18px;
    margin-bottom: 16px; border: 1px solid var(--bs-border);
    transition: border-color var(--bs-duration-fast);
}
.bs-settings-card:hover { border-color: var(--bs-border-hover); }
.bs-settings-card-row {
    display: flex; align-items: center; gap: 16px; padding: 12px 0;
    border-bottom: 1px solid var(--bs-border);
}
.bs-settings-card-row:last-child { border-bottom: none; }
.bs-settings-card-label { flex: 1; }
.bs-settings-card-label span:first-child {
    display: block; font-size: 14px; font-weight: 600; color: var(--bs-text-primary);
}
.bs-settings-card-label span:last-child {
    display: block; font-size: 12px; color: var(--bs-text-muted); margin-top: 2px;
}

.bs-profile-banner {
    background: linear-gradient(135deg, var(--bs-accent) 0%, var(--bs-accent3) 100%);
    border-radius: var(--bs-radius-lg) var(--bs-radius-lg) 0 0;
    height: 100px; position: relative;
}
.bs-profile-info {
    background: var(--bs-bg-elevated);
    border-radius: 0 0 var(--bs-radius-lg) var(--bs-radius-lg);
    padding: 48px 16px 16px; position: relative;
}
.bs-profile-avatar-abs {
    position: absolute; top: -40px; left: 16px;
    width: 80px; height: 80px; border-radius: 50%;
    border: 6px solid var(--bs-bg-elevated); display: flex;
    align-items: center; justify-content: center;
    font-size: 28px; font-weight: 800; color: #fff;
    text-transform: uppercase;
    box-shadow: 0 4px 20px rgba(0,0,0,.4);
}
.bs-profile-username {
    font-size: 20px; font-weight: 800; color: var(--bs-text-primary);
    letter-spacing: -.3px;
}
.bs-profile-tag {
    font-size: 14px; color: var(--bs-text-muted); margin-top: 2px;
}

.bs-settings-input {
    width: 100%; padding: 12px 14px; background: var(--bs-bg-deepest);
    border: 1px solid var(--bs-border); border-radius: var(--bs-radius-md);
    color: var(--bs-text-primary); font-size: 14px; outline: none;
    transition: all var(--bs-duration-fast);
}
.bs-settings-input:focus {
    border-color: var(--bs-accent);
    box-shadow: 0 0 0 3px var(--bs-accent-glow);
}
.bs-settings-input-group { margin-bottom: 16px; }
.bs-settings-input-group label {
    display: block; font-size: 12px; font-weight: 800;
    letter-spacing: .5px; text-transform: uppercase;
    color: var(--bs-text-secondary); margin-bottom: 8px;
}

/* ============================================================
   BONESCORD – GLOBAL CONTEXT MENU
   ============================================================ */
.bs-ctx-menu {
    position: fixed; z-index: 9500;
    background: var(--bs-bg-deepest);
    border: 1px solid var(--bs-border);
    border-radius: var(--bs-radius-lg);
    padding: 6px 0; min-width: 210px; max-width: 320px;
    box-shadow: var(--bs-shadow-lg);
    backdrop-filter: blur(20px) saturate(1.4);
    animation: bsCtxIn .2s var(--bs-ease-spring);
    display: none;
}
@keyframes bsCtxIn {
    from { opacity: 0; transform: scale(.92) translateY(-4px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}
.bs-ctx-item {
    padding: 8px 12px; font-size: 14px; color: var(--bs-text-secondary);
    cursor: pointer; display: flex; align-items: center; gap: 10px;
    border-radius: var(--bs-radius-sm); margin: 0 4px;
    transition: all .12s var(--bs-ease-smooth);
}
.bs-ctx-item:hover {
    background: var(--bs-accent); color: #fff;
    transform: translateX(2px);
    box-shadow: 0 2px 8px var(--bs-accent-glow);
}
.bs-ctx-item svg { width: 18px; height: 18px; fill: currentColor; flex-shrink: 0; }
.bs-ctx-item-danger { color: var(--bs-danger); }
.bs-ctx-item-danger:hover { background: var(--bs-danger); color: #fff; box-shadow: 0 2px 8px rgba(237,66,69,.4); }
.bs-ctx-sep {
    height: 1px; background: var(--bs-border); margin: 4px 8px;
}
.bs-ctx-label {
    padding: 6px 12px 4px; font-size: 11px; font-weight: 800;
    letter-spacing: .6px; text-transform: uppercase;
    color: var(--bs-text-muted); pointer-events: none;
}

.bs-ctx-volume-row {
    padding: 6px 12px; display: flex; align-items: center; gap: 8px;
}
.bs-ctx-volume-row svg { width: 16px; height: 16px; fill: var(--bs-text-secondary); flex-shrink: 0; }
.bs-ctx-volume-row input[type=range] {
    -webkit-appearance: none; appearance: none;
    flex: 1; height: 4px; border-radius: 2px;
    background: var(--bs-bg-float); outline: none; cursor: pointer;
}
.bs-ctx-volume-row input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none; width: 14px; height: 14px;
    border-radius: 7px; background: var(--bs-accent); cursor: pointer;
}
.bs-ctx-volume-val {
    font-size: 12px; font-weight: 800; color: var(--bs-accent-bright);
    min-width: 30px; text-align: right;
}

/* ============================================================
   BONESCORD – EXPANDED VOICE VIEW (Fullscreen Grid)
   ============================================================ */
.bs-voice-expanded {
    position: fixed; inset: 0; z-index: 7500;
    background: var(--bs-bg-deepest);
    display: flex; flex-direction: column;
    animation: bsExpandIn .4s var(--bs-ease-spring);
}
/* Aurora overlay for expanded voice */
.bs-voice-expanded::before {
    content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: conic-gradient(
        from 180deg at 50% 50%,
        transparent 0deg,
        rgba(108, 92, 231, .06) 60deg,
        transparent 120deg,
        rgba(0, 206, 201, .04) 200deg,
        transparent 300deg
    );
    animation: auroraRotate 30s linear infinite;
}
@keyframes bsExpandIn {
    from { opacity: 0; transform: scale(.95); }
    to { opacity: 1; transform: scale(1); }
}
.bs-voice-expanded-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 24px; background: var(--bs-glass-bg);
    border-bottom: 1px solid var(--bs-border);
    backdrop-filter: blur(16px) saturate(1.4);
    position: relative; z-index: 1;
}
.bs-voice-expanded-title {
    font-size: 18px; font-weight: 900; color: var(--bs-text-primary);
    letter-spacing: -.3px;
    display: flex; align-items: center; gap: 10px;
}
.bs-voice-expanded-title::before {
    content: ''; display: inline-block; width: 10px; height: 10px;
    border-radius: 50%; background: var(--bs-success);
    box-shadow: 0 0 10px rgba(0, 206, 201, .7);
    animation: bsPulseGreen 2s infinite;
}
@keyframes bsPulseGreen {
    0%,100% { box-shadow: 0 0 6px rgba(0, 206, 201, .4); }
    50% { box-shadow: 0 0 20px rgba(0, 206, 201, .8); }
}
.bs-voice-expanded-actions {
    display: flex; gap: 10px; align-items: center;
}
.bs-voice-expanded-actions button {
    display: flex; align-items: center; gap: 6px;
    border-radius: var(--bs-radius-md); padding: 10px 16px; font-weight: 700;
    transition: all var(--bs-duration-fast) var(--bs-ease-smooth);
}
.bs-voice-expanded-actions button:hover {
    transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.4);
}
.bs-voice-expanded-actions button:active { transform: scale(.96); }
.bs-voice-expanded-close {
    background: var(--bs-glass-bg); border: 1px solid var(--bs-border);
    color: var(--bs-text-secondary); cursor: pointer;
    width: 42px; height: 42px; display: flex; align-items: center; justify-content: center;
    border-radius: 50%; transition: all .25s var(--bs-ease-spring);
}
.bs-voice-expanded-close:hover {
    background: rgba(255,255,255,.1); color: var(--bs-text-primary);
    transform: rotate(90deg);
    box-shadow: 0 0 16px var(--bs-accent-glow);
}
.bs-voice-expanded-grid {
    flex: 1; display: grid; gap: 14px; padding: 18px 22px;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    grid-auto-rows: minmax(180px, 1fr); overflow: auto;
    scrollbar-width: thin; scrollbar-color: var(--bs-bg-float) transparent;
    position: relative; z-index: 1;
}
.bs-voice-tile {
    background: var(--bs-glass-bg);
    backdrop-filter: blur(12px);
    border: 1px solid var(--bs-border);
    border-radius: var(--bs-radius-xl);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    position: relative; overflow: hidden; padding: 24px 16px;
    transition: all .3s var(--bs-ease-spring);
    box-shadow: 0 2px 12px rgba(0,0,0,.2);
}
.bs-voice-tile::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse at 50% -20%, var(--bs-accent-glow), transparent 70%);
    pointer-events: none; opacity: .4;
}
.bs-voice-tile:hover {
    transform: translateY(-3px);
    box-shadow: var(--bs-shadow-md);
    border-color: var(--bs-border-hover);
}
.bs-voice-tile.speaking {
    border-color: var(--bs-success);
    box-shadow: 0 0 24px rgba(0, 206, 201, .3), 0 4px 20px rgba(0,0,0,.3);
    animation: bsSpeakPulse 1.5s infinite;
}
@keyframes bsSpeakPulse {
    0%,100% { box-shadow: 0 0 14px rgba(0, 206, 201, .2), 0 4px 16px rgba(0,0,0,.3); }
    50% { box-shadow: 0 0 32px rgba(0, 206, 201, .45), 0 4px 16px rgba(0,0,0,.3); }
}

.bs-voice-tile.is-muted::after {
    content: ''; position: absolute; inset: 0; z-index: 2;
    background: repeating-linear-gradient(
        -45deg,
        rgba(237,66,69,.05),
        rgba(237,66,69,.05) 4px,
        transparent 4px,
        transparent 12px
    );
    border-radius: calc(var(--bs-radius-xl) - 1px); pointer-events: none;
}
.bs-voice-tile.is-muted { border-color: rgba(237,66,69,.4); }
.bs-voice-tile.is-muted .bs-voice-tile-avatar { opacity: .5; filter: grayscale(.4); }
.bs-voice-tile.is-deafened::after {
    content: ''; position: absolute; inset: 0; z-index: 2;
    background: repeating-linear-gradient(
        -45deg,
        rgba(237,66,69,.08),
        rgba(237,66,69,.08) 4px,
        transparent 4px,
        transparent 12px
    );
    border-radius: calc(var(--bs-radius-xl) - 1px); pointer-events: none;
}
.bs-voice-tile.is-deafened { border-color: rgba(237,66,69,.6); }
.bs-voice-tile.is-deafened .bs-voice-tile-avatar { opacity: .35; filter: grayscale(.7); }

.bs-voice-tile.screen-share { padding: 0; }
.bs-voice-tile.screen-share video {
    width: 100%; height: 100%; object-fit: contain;
    border-radius: calc(var(--bs-radius-xl) - 1px);
}
.bs-voice-tile-avatar {
    width: 92px; height: 92px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 36px; font-weight: 800; color: #fff;
    position: relative; z-index: 1;
    transition: all .3s;
    box-shadow: 0 6px 24px rgba(0,0,0,.4);
}
.bs-voice-tile-name {
    margin-top: 14px; font-size: 15px; color: var(--bs-text-primary); font-weight: 700;
    position: relative; z-index: 1;
    max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bs-voice-tile-badges {
    display: flex; gap: 6px; margin-top: 8px; z-index: 3;
    flex-wrap: wrap; justify-content: center;
}
.bs-voice-tile-badge {
    padding: 3px 10px; border-radius: var(--bs-radius-full); font-size: 11px; font-weight: 800;
    letter-spacing: .3px; text-transform: uppercase;
    backdrop-filter: blur(8px); animation: bsBadgeIn .3s var(--bs-ease-spring);
}
@keyframes bsBadgeIn {
    from { opacity: 0; transform: scale(.7) translateY(4px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}
.bs-voice-tile-badge.muted {
    background: rgba(237,66,69,.2); color: var(--bs-danger);
    border: 1px solid rgba(237,66,69,.3);
}
.bs-voice-tile-badge.deafened {
    background: rgba(237,66,69,.3); color: #ff6b6b;
    border: 1px solid rgba(237,66,69,.4);
}
.bs-voice-tile-badge.streaming {
    background: var(--bs-accent-surface); color: var(--bs-accent-bright);
    border: 1px solid rgba(108,92,231,.3);
}

.bs-voice-mute-icon {
    position: absolute; bottom: -2px; right: -2px; z-index: 5;
    width: 28px; height: 28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    animation: bsBadgeIn .3s var(--bs-ease-spring);
    box-shadow: 0 2px 8px rgba(0,0,0,.4);
}
.bs-voice-mute-icon.muted { background: var(--bs-danger); }
.bs-voice-mute-icon.deafened { background: #b52e2e; }
.bs-voice-mute-icon svg { width: 16px; height: 16px; fill: #fff; }

.bs-voice-tile-vol {
    position: absolute; bottom: 12px; left: 12px; right: 12px;
    display: flex; align-items: center; gap: 6px;
    background: rgba(0,0,0,.75); border-radius: var(--bs-radius-lg);
    padding: 8px 12px;
    backdrop-filter: blur(12px); opacity: 0;
    transition: opacity .25s; z-index: 4;
    border: 1px solid rgba(255,255,255,.06);
}
.bs-voice-tile:hover .bs-voice-tile-vol { opacity: 1; }
.bs-voice-tile-vol input[type=range] {
    -webkit-appearance: none; appearance: none;
    flex: 1; height: 4px; border-radius: 2px;
    background: var(--bs-bg-float); outline: none; cursor: pointer;
}
.bs-voice-tile-vol input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none; width: 14px; height: 14px;
    border-radius: 7px; background: var(--bs-accent); cursor: pointer;
    box-shadow: 0 0 8px var(--bs-accent-glow);
}
.bs-voice-tile-vol span {
    font-size: 12px; color: var(--bs-accent-bright); font-weight: 800;
    min-width: 32px; text-align: right;
}
.bs-voice-expanded-bar {
    padding: 12px 24px; background: var(--bs-glass-bg);
    border-top: 1px solid var(--bs-border);
    display: flex; align-items: center; gap: 14px;
    font-size: 13px; color: var(--bs-text-secondary); font-weight: 500;
    backdrop-filter: blur(16px);
    position: relative; z-index: 1;
}
.bs-voice-expanded-bar span { display: flex; align-items: center; gap: 4px; }

/* ============================================================
   BONESCORD – SCREEN SHARE VIEWER (Floating PiP)
   ============================================================ */
.bs-screen-viewer {
    position: fixed; z-index: 7800;
    width: 520px; min-height: 320px;
    right: 20px; bottom: 80px;
    background: var(--bs-bg-deepest);
    border: 1px solid var(--bs-border);
    border-radius: var(--bs-radius-xl);
    box-shadow: var(--bs-shadow-lg);
    display: flex; flex-direction: column;
    resize: both; overflow: hidden;
    animation: bsViewerIn .35s var(--bs-ease-spring);
    transition: box-shadow var(--bs-duration-mid);
}
@keyframes bsViewerIn {
    from { opacity: 0; transform: scale(.9) translateY(20px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}
.bs-screen-viewer:hover {
    box-shadow: 0 20px 64px rgba(0,0,0,.9), 0 0 0 1px rgba(108,92,231,.25);
}
.bs-screen-viewer.fullscreen {
    inset: 0; width: 100% !important; height: 100% !important;
    border-radius: 0; resize: none;
}
.bs-screen-viewer-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px; background: var(--bs-glass-bg);
    border-bottom: 1px solid var(--bs-border);
    cursor: move; backdrop-filter: blur(8px);
}
.bs-screen-viewer-title {
    font-size: 13px; font-weight: 800; color: var(--bs-text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    display: flex; align-items: center; gap: 8px;
}
.bs-screen-viewer-title::before {
    content: '📺'; font-size: 14px;
}
.bs-screen-viewer-ctrls {
    display: flex; gap: 4px; flex-shrink: 0;
}
.bs-screen-viewer-ctrls button {
    background: none; border: none; color: var(--bs-text-secondary); cursor: pointer;
    width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
    border-radius: var(--bs-radius-md); transition: all var(--bs-duration-fast);
}
.bs-screen-viewer-ctrls button:hover {
    background: rgba(255,255,255,.1); color: var(--bs-text-primary);
    transform: scale(1.1);
}
.bs-screen-viewer-body {
    flex: 1; display: flex; flex-direction: column; background: #000;
    position: relative; min-height: 200px;
}
.bs-screen-viewer-body video {
    width: 100%; height: 100%; object-fit: contain;
}
.bs-screen-viewer-vol-row {
    position: absolute; bottom: 12px; left: 14px; right: 14px;
    display: flex; align-items: center; gap: 8px;
    background: rgba(0,0,0,.85); border-radius: var(--bs-radius-lg);
    padding: 10px 14px; border: 1px solid rgba(255,255,255,.06);
    backdrop-filter: blur(12px); opacity: 0; transition: opacity .25s;
}
.bs-screen-viewer-body:hover .bs-screen-viewer-vol-row { opacity: 1; }
.bs-screen-viewer-vol-row svg { flex-shrink: 0; }
.bs-screen-viewer-vol-row input[type=range] {
    -webkit-appearance: none; appearance: none;
    flex: 1; height: 4px; border-radius: 2px;
    background: var(--bs-bg-float); outline: none; cursor: pointer;
}
.bs-screen-viewer-vol-row input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none; width: 14px; height: 14px;
    border-radius: 7px; background: var(--bs-accent); cursor: pointer;
    box-shadow: 0 0 8px var(--bs-accent-glow);
}
.bs-screen-viewer-vol-row span {
    font-size: 12px; font-weight: 800; color: var(--bs-accent-bright);
    min-width: 32px; text-align: right;
}

/* ============================================================
   BONESCORD – UTILITIES & MISC
   ============================================================ */

/* Noise profile status */
.bs-noise-profile-status {
    margin-top: 6px; font-size: 12px; color: var(--bs-text-muted);
    min-height: 18px; transition: color .3s;
}
.bs-noise-profile-status.learning { color: var(--bs-warning); animation: bsPulseText 1s infinite; }
.bs-noise-profile-status.done { color: var(--bs-success); }
@keyframes bsPulseText {
    0%,100% { opacity: 1; }
    50% { opacity: .5; }
}

/* Hotkey rebind */
.bs-hk-row { gap: 10px; }
.bs-hk-label {
    color: var(--bs-text-primary); font-size: 13px; font-weight: 700;
    font-family: var(--bs-font-mono);
    background: var(--bs-accent-surface); border: 1px solid rgba(108,92,231,.25);
    padding: 4px 14px; border-radius: var(--bs-radius-md);
    min-width: 100px; text-align: center;
    transition: all .2s;
}
.bs-hk-rebind {
    padding: 5px 12px !important; font-size: 12px !important;
    border-radius: var(--bs-radius-md) !important;
    transition: all .2s !important;
}
.bs-hk-rebind.recording {
    background: var(--bs-danger) !important; color: #fff !important;
    animation: bsPulseText 1s infinite;
    box-shadow: 0 0 12px rgba(237,66,69,.4);
}

/* Compact mode */
body.bs-compact .wa-msg-wrap,
body.bs-compact .dc-msg-wrap { margin-bottom: 1px; }
body.bs-compact .wa-bubble { padding: 4px 10px; }
body.bs-compact .wa-msg-time { font-size: 10px; }

/* No msg animation override */
body.bs-no-msg-anim .wa-msg-wrap,
body.bs-no-msg-anim .dc-msg-wrap { animation: none !important; }

/* Btn danger variant */
.bs-btn-danger {
    background: linear-gradient(135deg, var(--bs-danger), #c03030) !important;
    color: #fff !important;
    box-shadow: 0 4px 16px rgba(237,66,69,.3);
}
.bs-btn-danger:hover {
    background: linear-gradient(135deg, #c03030, #a02828) !important;
    transform: translateY(-1px);
}

/* Btn active state (toggled on) */
.bs-btn-active {
    background: var(--bs-danger) !important;
    color: #fff !important;
    box-shadow: 0 0 12px rgba(237,66,69,.5);
}
.bs-btn-active:hover { background: #c03537 !important; }

@keyframes bsFadeIn { from { opacity: 0; } to { opacity: 1; } }