/*
 * VoiClz v1.1 – vcz-style.css
 * Discord-style dark + Zocker-Loge Avatar-Frames + Chat + Kontext-Menü
 */

/* ── TOKENS ── */
.vcz-wrapper {
    --bg-0:      #111214;
    --bg-1:      #1e1f22;
    --bg-2:      #2b2d31;
    --bg-3:      #313338;
    --border:    rgba(255,255,255,0.07);
    --accent:    #5865f2;
    --accent-h:  #4752c4;
    --accent-dim:#1e2054;
    --green:     #23a55a;
    --green-dim: rgba(35,165,90,0.15);
    --green-glow:rgba(35,165,90,0.55);
    --red:       #f23f43;
    --red-dim:   rgba(242,63,67,0.15);
    --yellow:    #f0b132;
    --txt-0:     #f2f3f5;
    --txt-1:     #b5bac1;
    --txt-2:     #80848e;
    --shadow:    0 12px 48px rgba(0,0,0,0.6);
    --r:         10px;
    --r-sm:      6px;
    --sidebar-w: 230px;
}

/* ── BASE ── */
.vcz-wrapper {
    display: flex;
    width: 100%;
    height: 640px;
    min-height: 500px;
    background: var(--bg-1);
    border-radius: 14px;
    overflow: hidden;
    font-family: 'Segoe UI', system-ui, sans-serif;
    font-size: 14px;
    color: var(--txt-0);
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
    position: relative;
}
.vcz-wrapper *, .vcz-wrapper *::before, .vcz-wrapper *::after { box-sizing: border-box; }

/* ══════════════════════════════
   AVATAR FRAMES (Zocker-Loge)
══════════════════════════════ */
.vcz-frame-blue img, .vcz-frame-blue .vcz-vu-avatar {
    border: 2px solid #4facfe !important;
    box-shadow: 0 0 8px rgba(79,172,254,0.5);
}
.vcz-frame-gold img, .vcz-frame-gold .vcz-vu-avatar {
    border: 2px solid #f0b132 !important;
    box-shadow: 0 0 10px rgba(240,177,50,0.55);
}
.vcz-frame-animated img, .vcz-frame-animated .vcz-vu-avatar {
    border: 2px solid transparent !important;
    background: linear-gradient(#1e1f22,#1e1f22) padding-box,
                linear-gradient(135deg,#5865f2,#23a55a,#f0b132,#f23f43,#5865f2) border-box;
    animation: vcz-frame-spin 3s linear infinite;
}
@keyframes vcz-frame-spin {
    from { filter: hue-rotate(0deg); }
    to   { filter: hue-rotate(360deg); }
}

/* ══════════════════════════════
   NOTIFICATIONS
══════════════════════════════ */
#vcz-notifications {
    position: absolute; top: 14px; right: 14px; z-index: 9999;
    display: flex; flex-direction: column; gap: 8px; max-width: 280px; pointer-events: none;
}
.vcz-notif {
    padding: 10px 14px; border-radius: var(--r); font-size: 13px; font-weight: 500;
    pointer-events: auto; backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.12);
    animation: vcz-notif-in .25s ease;
}
.vcz-notif-info  { background: rgba(88,101,242,0.9); }
.vcz-notif-warn  { background: rgba(240,177,50,0.9);  color: #1a1200; }
.vcz-notif-error { background: rgba(242,63,67,0.9); }
.vcz-notif.is-hiding { animation: vcz-notif-out .35s ease forwards; }
@keyframes vcz-notif-in  { from { opacity:0; transform:translateX(12px); } to { opacity:1; transform:none; } }
@keyframes vcz-notif-out { from { opacity:1; } to { opacity:0; transform:translateX(16px); } }

/* ══════════════════════════════
   CONTEXT MENU
══════════════════════════════ */
#vcz-ctx-menu {
    position: fixed; z-index: 99999;
    background: var(--bg-0);
    border: 1px solid var(--border);
    border-radius: var(--r);
    width: 220px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.7);
    padding: 8px;
    animation: vcz-ctx-pop .15s ease;
}
@keyframes vcz-ctx-pop { from { opacity:0; transform:scale(0.93); } to { opacity:1; transform:scale(1); } }

.vcz-ctx-header {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 6px 12px;
}
.vcz-ctx-avatar { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--accent); flex-shrink:0; }
.vcz-ctx-name   { font-size: 13px; font-weight: 700; }
.vcz-ctx-tag    { font-size: 11px; color: var(--txt-2); }

.vcz-ctx-sep {
    height: 1px; background: var(--border); margin: 4px 0;
}

.vcz-ctx-item {
    display: flex; align-items: center; gap: 8px;
    width: 100%; padding: 8px 10px;
    background: transparent; border: none; border-radius: var(--r-sm);
    color: var(--txt-1); font-size: 13px; cursor: pointer;
    text-align: left; transition: background .12s, color .12s;
}
.vcz-ctx-item:hover { background: rgba(255,255,255,0.07); color: var(--txt-0); }
.vcz-ctx-icon { font-size: 15px; width: 20px; text-align: center; flex-shrink:0; }

.vcz-ctx-vol-row {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 10px;
    font-size: 12px; color: var(--txt-2);
}
.vcz-ctx-vol-slider {
    flex: 1; -webkit-appearance: none; height: 4px;
    background: rgba(255,255,255,0.12); border-radius: 2px;
}
.vcz-ctx-vol-slider::-webkit-slider-thumb {
    -webkit-appearance: none; width: 12px; height: 12px;
    border-radius: 50%; background: var(--accent); cursor: pointer;
}
#vcz-ctx-vol-label { font-size: 11px; min-width: 36px; text-align: right; }

/* ══════════════════════════════
   OWN SETTINGS OVERLAY
══════════════════════════════ */
#vcz-own-settings {
    position: fixed; z-index: 9990;
    background: var(--bg-0); border: 1px solid var(--border);
    border-radius: var(--r); padding: 16px; width: 240px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6);
    animation: vcz-ctx-pop .15s ease;
}
.vcz-os-title {
    font-size: 13px; font-weight: 700; margin-bottom: 14px; color: var(--txt-0);
}
.vcz-os-row {
    margin-bottom: 14px;
}
.vcz-os-row label {
    display: block; font-size: 12px; color: var(--txt-1); margin-bottom: 6px;
}
.vcz-os-ctrl {
    display: flex; align-items: center; gap: 8px;
}
.vcz-os-ctrl input[type=range] {
    flex: 1; -webkit-appearance: none; height: 4px;
    background: rgba(255,255,255,0.12); border-radius: 2px;
}
.vcz-os-ctrl input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none; width: 13px; height: 13px;
    border-radius: 50%; background: var(--accent); cursor: pointer;
}
.vcz-os-ctrl span { font-size: 11px; min-width: 36px; color: var(--txt-1); }
.vcz-os-row small { font-size: 10px; color: var(--txt-2); margin-top: 4px; display: block; }
.vcz-os-close {
    width: 100%; padding: 7px; background: rgba(255,255,255,0.06);
    border: 1px solid var(--border); border-radius: var(--r-sm);
    color: var(--txt-1); cursor: pointer; font-size: 12px;
    transition: background .15s;
}
.vcz-os-close:hover { background: rgba(255,255,255,0.12); color: var(--txt-0); }

/* ══════════════════════════════
   PM MODAL
══════════════════════════════ */
#vcz-pm-modal {
    position: fixed; inset: 0; z-index: 99998;
    background: rgba(0,0,0,0.65); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
}
.vcz-pm-box {
    background: var(--bg-2); border: 1px solid var(--border);
    border-radius: var(--r); padding: 20px; width: 340px;
    box-shadow: 0 12px 48px rgba(0,0,0,0.7);
    animation: vcz-ctx-pop .2s ease;
}
.vcz-pm-title { font-size: 14px; font-weight: 700; margin-bottom: 12px; }
.vcz-pm-body  {
    width: 100%; background: var(--bg-0); color: var(--txt-0);
    border: 1px solid var(--border); border-radius: var(--r-sm);
    padding: 10px 12px; font-size: 13px; resize: vertical;
    font-family: inherit; outline: none;
}
.vcz-pm-body:focus { border-color: var(--accent); }
.vcz-pm-foot { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.vcz-pm-btn-send {
    padding: 7px 18px; background: var(--accent); color: #fff;
    border: none; border-radius: var(--r-sm); cursor: pointer; font-weight: 600; font-size: 13px;
    transition: background .15s;
}
.vcz-pm-btn-send:hover  { background: var(--accent-h); }
.vcz-pm-btn-cancel {
    padding: 7px 14px; background: transparent; color: var(--txt-1);
    border: 1px solid var(--border); border-radius: var(--r-sm); cursor: pointer; font-size: 13px;
}
.vcz-pm-btn-cancel:hover { background: rgba(255,255,255,0.06); }
#vcz-pm-status { font-size: 12px; margin-left: auto; }

/* ══════════════════════════════
   SIDEBAR
══════════════════════════════ */
.vcz-sidebar {
    width: var(--sidebar-w); min-width: var(--sidebar-w);
    background: var(--bg-2);
    display: flex; flex-direction: column;
    border-right: 1px solid var(--border);
}
.vcz-sidebar-header {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 14px; border-bottom: 1px solid var(--border);
    background: rgba(0,0,0,0.18); flex-shrink: 0;
}
.vcz-server-logo {
    width: 36px; height: 36px; flex-shrink: 0;
    background: linear-gradient(135deg, var(--accent), #7289da);
    border-radius: 10px; display: flex; align-items: center; justify-content: center;
    font-size: 17px; box-shadow: 0 2px 8px rgba(88,101,242,0.4);
}
.vcz-server-name { font-size: 14px; font-weight: 700; }
.vcz-server-sub  { font-size: 11px; color: var(--txt-2); }
.vcz-server-status { flex-shrink:0; margin-left: auto; }
.vcz-status-pulse {
    display: block; width: 7px; height: 7px; border-radius: 50%;
    background: var(--green); box-shadow: 0 0 5px var(--green);
    animation: vcz-pulse 2s ease-in-out infinite;
}
@keyframes vcz-pulse { 0%,100%{opacity:1;} 50%{opacity:.5;} }

.vcz-sidebar-body { flex:1; overflow-y:auto; padding: 6px 0; }
.vcz-sidebar-body::-webkit-scrollbar { width: 3px; }
.vcz-sidebar-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius:2px; }

.vcz-section-label {
    display:flex; align-items:center; justify-content:space-between;
    padding: 10px 14px 4px;
    font-size: 11px; font-weight: 700; color: var(--txt-2);
    letter-spacing: .07em; text-transform: uppercase;
}
.vcz-manage-link { color:var(--txt-2); text-decoration:none; font-size:13px; transition:color .15s; }
.vcz-manage-link:hover { color:var(--txt-0); }

/* Channel Items */
.vcz-channel-list { padding: 2px 6px; }
.vcz-channel-item {
    border-radius: var(--r-sm); margin-bottom: 2px;
    cursor: pointer; color: var(--txt-1);
    transition: background .12s; position: relative;
    overflow: hidden;
}
.vcz-channel-item:hover { background: rgba(255,255,255,0.06); }
.vcz-channel-item.is-active { background: rgba(88,101,242,0.2); color: var(--txt-0); }
.vcz-channel-item.is-active::before {
    content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
    background: var(--accent); border-radius:0 2px 2px 0;
}

.vcz-ch-main-row {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 10px;
}
.vcz-ch-icon { font-size:15px; width:18px; text-align:center; flex-shrink:0; }
.vcz-ch-body { flex:1; overflow:hidden; }
.vcz-ch-name { font-size:13px; font-weight:500; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vcz-ch-bar-wrap { height:2px; background:rgba(255,255,255,0.08); border-radius:1px; margin-top:3px; overflow:hidden; }
.vcz-ch-bar { height:100%; background:var(--green); border-radius:1px; transition:width .4s; }
.vcz-ch-badge {
    font-size:11px; background:rgba(255,255,255,0.1); padding:2px 6px;
    border-radius:10px; flex-shrink:0;
}
.vcz-channel-item.is-active .vcz-ch-badge { background:var(--accent); color:#fff; }

/* Users unter Channel */
.vcz-ch-users {
    padding: 4px 10px 8px 36px;
    display: flex; flex-direction: column; gap: 4px;
}
.vcz-ch-user-entry {
    display: flex; align-items: center; gap: 7px;
    border-radius: 4px; padding: 2px 4px;
}
.vcz-ch-u-avatar {
    width: 22px; height: 22px; border-radius: 50%; position: relative; flex-shrink:0;
}
.vcz-ch-u-avatar img { width:20px; height:20px; border-radius:50%; display:block; object-fit:cover; }
.vcz-ch-u-mute { position:absolute; bottom:-3px; right:-3px; font-size:9px; }
.vcz-ch-u-name { font-size: 12px; color: var(--txt-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Skeleton */
.vcz-skeleton { padding: 0 6px; }
.vcz-sk-row {
    height:32px; background:rgba(255,255,255,0.04); border-radius:var(--r-sm);
    margin-bottom:3px; animation:vcz-shimmer 1.5s ease infinite;
}
.vcz-sk-row:nth-child(2) { opacity:.7; animation-delay:.2s; }
.vcz-sk-row:nth-child(3) { opacity:.5; animation-delay:.4s; }
.vcz-sk-row:nth-child(4) { opacity:.3; animation-delay:.6s; }
@keyframes vcz-shimmer { 0%,100%{opacity:.3;} 50%{opacity:.6;} }

.vcz-empty-channels { padding:20px; font-size:12px; color:var(--txt-2); text-align:center; }

/* Sidebar Footer */
.vcz-sidebar-footer {
    display:flex; align-items:center; gap:8px; padding:9px 10px;
    background:rgba(0,0,0,0.22); border-top:1px solid var(--border); flex-shrink:0;
}
.vcz-own-avatar-wrap {
    position:relative; width:34px; height:34px; border-radius:50%; flex-shrink:0;
}
.vcz-own-avatar { width:32px; height:32px; border-radius:50%; display:block; object-fit:cover; }
.vcz-own-status-dot {
    position:absolute; bottom:-1px; right:-1px; width:10px; height:10px;
    border-radius:50%; border:2px solid var(--bg-2);
}
.online { background:var(--green); } .offline { background:var(--txt-2); }

.vcz-own-meta { flex:1; overflow:hidden; min-width:0; }
.vcz-own-meta:hover .vcz-own-name { color:var(--txt-0); }
.vcz-own-name { font-size:12px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:color .15s; }
.vcz-own-tag  { font-size:10px; color:var(--txt-2); }
.vcz-own-icons { display:flex; gap:2px; }
.vcz-icon-btn {
    width:26px; height:26px; border:none; background:transparent; border-radius:4px;
    cursor:pointer; color:var(--txt-1); display:flex; align-items:center; justify-content:center;
    transition:all .15s;
}
.vcz-icon-btn:hover { background:rgba(255,255,255,0.08); color:var(--txt-0); }
.vcz-icon-btn.is-active { color:var(--red); background:var(--red-dim); }

/* ══════════════════════════════
   MAIN
══════════════════════════════ */
.vcz-main { flex:1; display:flex; flex-direction:column; overflow:hidden; min-width:0; }

.vcz-topbar {
    display:flex; align-items:center; justify-content:space-between;
    padding:0 18px; height:48px; background:var(--bg-3);
    border-bottom:1px solid var(--border); flex-shrink:0;
}
.vcz-topbar-left { display:flex; align-items:center; gap:8px; }
.vcz-topbar-icon { font-size:17px; }
.vcz-topbar-channel { font-size:15px; font-weight:700; }
.vcz-vc-badge { display:flex; align-items:center; gap:5px; font-size:12px; font-weight:600; color:var(--green); }
.vcz-vc-dot { width:7px; height:7px; border-radius:50%; background:var(--green); animation:vcz-pulse 2s ease-in-out infinite; }

.vcz-content { flex:1; overflow:hidden; display:flex; flex-direction:column; }

/* ══════════════════════════════
   WELCOME
══════════════════════════════ */
.vcz-welcome {
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    flex:1; text-align:center; gap:10px; padding:24px;
}
.vcz-welcome-visual { position:relative; width:100px; height:100px; margin-bottom:8px; }
.vcz-wave-ring {
    position:absolute; border-radius:50%; border:2px solid var(--accent);
    top:50%; left:50%; transform:translate(-50%,-50%);
    animation:vcz-ring 3s ease-in-out infinite; opacity:0;
}
.r1{width:60px;height:60px;} .r2{width:80px;height:80px;animation-delay:.6s;} .r3{width:100px;height:100px;animation-delay:1.2s;}
@keyframes vcz-ring {
    0%{transform:translate(-50%,-50%) scale(.7);opacity:0;}
    50%{opacity:.3;}
    100%{transform:translate(-50%,-50%) scale(1.1);opacity:0;}
}
.vcz-mic-icon { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:40px; }
.vcz-welcome-title { margin:0; font-size:22px; font-weight:800; }
.vcz-welcome-sub { margin:0; color:var(--txt-1); font-size:13px; line-height:1.6; }
.vcz-auth-box {
    margin-top:14px; padding:14px 20px; background:rgba(240,177,50,.08);
    border:1px solid rgba(240,177,50,.25); border-radius:var(--r);
    display:flex; flex-direction:column; align-items:center; gap:8px;
}
.vcz-auth-icon { font-size:26px; }
.vcz-auth-box p { margin:0; font-size:12px; color:var(--yellow); }
.vcz-btn-login {
    display:inline-block; padding:7px 18px; background:var(--accent); color:#fff !important;
    border-radius:var(--r-sm); text-decoration:none; font-weight:700; font-size:13px;
    transition:background .2s;
}
.vcz-btn-login:hover { background:var(--accent-h); }
.vcz-features { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:14px; }
.vcz-feat {
    display:flex; align-items:center; gap:5px; font-size:12px; color:var(--txt-2);
    background:rgba(255,255,255,0.04); padding:4px 10px; border-radius:20px; border:1px solid var(--border);
}

/* ══════════════════════════════
   ACTIVE AREA (Voice + Chat)
══════════════════════════════ */
.vcz-active-area {
    display: flex;
    flex: 1;
    overflow: hidden;
    gap: 0;
}

/* Voice Column */
.vcz-voice-col {
    width: 260px;
    min-width: 200px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border);
    overflow: hidden;
}

.vcz-vp-header {
    display:flex; align-items:center; justify-content:space-between;
    padding: 14px 14px 10px; border-bottom:1px solid var(--border); flex-shrink:0;
}
.vcz-vp-info { display:flex; align-items:center; gap:10px; }
.vcz-vp-icon { font-size:20px; }
.vcz-vp-title { font-size:14px; font-weight:700; }
.vcz-vp-sub   { font-size:11px; color:var(--green); }
.vcz-leave-btn {
    display:flex; align-items:center; gap:5px; padding:5px 10px;
    background:var(--red-dim); color:var(--red); border:1px solid rgba(242,63,67,.25);
    border-radius:var(--r-sm); cursor:pointer; font-size:12px; font-weight:600;
    transition:all .15s;
}
.vcz-leave-btn:hover { background:rgba(242,63,67,.28); }

.vcz-voice-users { flex:1; overflow-y:auto; padding:10px; display:flex; flex-direction:column; gap:8px; }
.vcz-voice-users::-webkit-scrollbar { width:3px; }
.vcz-voice-users::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.08); border-radius:2px; }

.vcz-voice-empty { text-align:center; padding:30px 16px; color:var(--txt-2); }
.vcz-voice-empty span { font-size:28px; display:block; margin-bottom:8px; }
.vcz-voice-empty p    { margin:0; font-size:12px; }

/* Voice User Card */
.vcz-vu-card {
    display:flex; align-items:center; gap:10px; padding:10px 12px;
    background:rgba(255,255,255,0.03); border:1px solid var(--border);
    border-radius:var(--r); transition:all .25s ease; position:relative; overflow:hidden;
}
.vcz-vu-card::before {
    content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
    background:transparent; transition:background .2s, box-shadow .2s;
}
.vcz-vu-card.is-speaking {
    border-color: rgba(35,165,90,.5) !important;
    background: var(--green-dim) !important;
    box-shadow: 0 0 18px rgba(35,165,90,.18);
}
.vcz-vu-card.is-speaking::before {
    background: var(--green);
    box-shadow: 0 0 8px var(--green-glow);
}
.vcz-vu-card.is-local-muted { opacity:.6; }

/* Avatar Ring – THE SPEAKING GLOW */
.vcz-vu-ring {
    position:relative; width:46px; height:46px; border-radius:50%;
    border: 2px solid transparent; flex-shrink:0;
    transition: border-color .2s, box-shadow .2s;
}
.vcz-vu-ring.is-speaking {
    border-color: var(--green) !important;
    box-shadow:
        0 0 0  4px rgba(35,165,90,0.25),
        0 0 0  8px rgba(35,165,90,0.12),
        0 0 18px rgba(35,165,90,0.5);
    animation: vcz-speak-pulse .6s ease-in-out infinite alternate;
}
@keyframes vcz-speak-pulse {
    from { box-shadow: 0 0 0 3px rgba(35,165,90,.25), 0 0 12px rgba(35,165,90,.4); }
    to   { box-shadow: 0 0 0 6px rgba(35,165,90,.35), 0 0 22px rgba(35,165,90,.65); }
}

.vcz-vu-avatar {
    width: 42px; height: 42px; border-radius: 50%;
    display:block; object-fit:cover;
}
.vcz-vu-status-dot {
    position:absolute; bottom:0; right:0; width:10px; height:10px;
    border-radius:50%; background:var(--green); border:2px solid var(--bg-1);
}
.vcz-vu-badge-mute, .vcz-vu-badge-deaf, .vcz-vu-badge-lmute {
    position:absolute; top:-3px; right:-3px; font-size:11px;
    background:var(--bg-2); border-radius:50%; width:18px; height:18px;
    display:flex; align-items:center; justify-content:center;
}
.vcz-vu-badge-lmute { background: var(--red-dim); }

.vcz-vu-info { flex:1; min-width:0; }
.vcz-vu-name {
    display:block; font-size:13px; font-weight:600;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    transition:color .15s;
}
.vcz-vu-name:hover { color:var(--accent); }
.vcz-vu-name em { font-style:normal; color:var(--txt-2); font-size:11px; font-weight:400; }
.vcz-vu-status { font-size:11px; display:block; margin-top:2px; }
.is-connected  { color:var(--green); }
.is-connecting { color:var(--yellow); }
.is-error      { color:var(--red); }



/* ══════════════════════════════
   CHAT COLUMN
══════════════════════════════ */
.vcz-chat-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}

.vcz-chat-header {
    display: flex; align-items: center; gap: 6px;
    padding: 12px 16px; border-bottom: 1px solid var(--border);
    font-size: 13px; font-weight: 700; color: var(--txt-1); flex-shrink:0;
}

.vcz-chat-messages {
    flex: 1; overflow-y: auto; padding: 12px 14px;
    display: flex; flex-direction: column; gap: 4px;
    scroll-behavior: smooth;
}
.vcz-chat-messages::-webkit-scrollbar { width: 4px; }
.vcz-chat-messages::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius:2px; }

/* Chat Message */
.vcz-msg {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 5px 8px; border-radius: 8px; transition: background .12s;
}
.vcz-msg:hover { background: rgba(255,255,255,0.03); }
.vcz-msg.is-mine { flex-direction: row-reverse; }
.vcz-msg.is-mine .vcz-msg-body { align-items: flex-end; }

.vcz-msg-avatar {
    width: 32px; height: 32px; border-radius: 50%; flex-shrink:0;
    border: 2px solid transparent;
}
.vcz-msg-avatar img { width:28px; height:28px; border-radius:50%; object-fit:cover; display:block; }

.vcz-msg-body { display:flex; flex-direction:column; gap:2px; max-width: calc(100% - 50px); }

.vcz-msg-meta { display:flex; align-items:baseline; gap:6px; }
.vcz-msg-name { font-size:12px; font-weight:700; color:var(--accent); }
.vcz-msg.is-mine .vcz-msg-name { color:var(--green); }
.vcz-msg-time { font-size:10px; color:var(--txt-2); }

.vcz-msg-text {
    font-size:13px; color:var(--txt-0); line-height:1.5;
    word-break:break-word; background:rgba(255,255,255,0.04);
    padding:6px 10px; border-radius:0 8px 8px 8px;
}
.vcz-msg.is-mine .vcz-msg-text {
    background: rgba(88,101,242,0.2);
    border-radius:8px 0 8px 8px;
}

.vcz-chat-input-row {
    display:flex; gap:8px; padding:10px 14px;
    border-top:1px solid var(--border); flex-shrink:0;
    background:rgba(0,0,0,0.12);
}
.vcz-chat-input {
    flex:1; background:var(--bg-0); color:var(--txt-0);
    border:1px solid var(--border); border-radius: 20px;
    padding:8px 14px; font-size:13px; outline:none;
    font-family:inherit; transition:border-color .15s;
}
.vcz-chat-input:focus { border-color:var(--accent); }
.vcz-chat-input::placeholder { color:var(--txt-2); }
.vcz-chat-input:disabled { opacity:.4; }
.vcz-chat-send {
    width:36px; height:36px; background:var(--accent); color:#fff;
    border:none; border-radius:50%; cursor:pointer; display:flex;
    align-items:center; justify-content:center; flex-shrink:0;
    transition:background .15s, transform .1s;
}
.vcz-chat-send:hover   { background:var(--accent-h); }
.vcz-chat-send:active  { transform:scale(.94); }
.vcz-chat-send:disabled { opacity:.4; cursor:default; }

/* ══════════════════════════════
   CONTROLS BAR
══════════════════════════════ */
.vcz-controls {
    display:flex; align-items:center; justify-content:space-between;
    padding:0 14px; height:54px; background:var(--bg-0);
    border-top:1px solid var(--border); flex-shrink:0;
    opacity:.4; transition:opacity .3s;
}
.vcz-controls.is-active { opacity:1; }

.vcz-ctrl-group { display:flex; gap:4px; }

.vcz-ctrl-btn {
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    width:56px; height:44px; background:transparent; border:none; border-radius:var(--r-sm);
    cursor:pointer; color:var(--txt-1); transition:all .15s; padding:0;
}
.vcz-ctrl-btn:hover { background:rgba(255,255,255,0.07); color:var(--txt-0); }
.vcz-ctrl-btn.is-active { color:var(--red); background:var(--red-dim); }
.vcz-ctrl-btn.vcz-ctrl-danger { color:var(--red); }
.vcz-ctrl-btn.vcz-ctrl-danger:hover { background:var(--red-dim); }
.vcz-ctrl-icon { display:flex; align-items:center; justify-content:center; }
.vcz-ctrl-label { font-size:10px; font-weight:500; white-space:nowrap; overflow:hidden; max-width:56px; }

/* Speaking bars */
.vcz-ctrl-speaking {
    display:flex; flex-direction:column; align-items:center; gap:4px;
    font-size:11px; color:var(--txt-2);
}
.vcz-speaking-bars { display:flex; align-items:flex-end; gap:2px; height:16px; }
.vcz-bar { width:3px; background:var(--txt-2); border-radius:2px; animation:vcz-idle-bar 2s ease-in-out infinite; }
.vcz-bar.b1{height:5px;} .vcz-bar.b2{height:9px;animation-delay:.2s;} .vcz-bar.b3{height:13px;animation-delay:.1s;}
.vcz-bar.b4{height:9px;animation-delay:.3s;} .vcz-bar.b5{height:5px;animation-delay:.15s;}
@keyframes vcz-idle-bar { 0%,100%{transform:scaleY(.6);} 50%{transform:scaleY(1);} }

.vcz-ctrl-speaking.is-speaking .vcz-bar {
    background:var(--green);
    animation:vcz-active-bar .35s ease infinite alternate;
}
.vcz-ctrl-speaking.is-speaking .b1{animation-duration:.35s;} .vcz-ctrl-speaking.is-speaking .b2{animation-duration:.28s;animation-delay:.05s;}
.vcz-ctrl-speaking.is-speaking .b3{animation-duration:.22s;animation-delay:.1s;}  .vcz-ctrl-speaking.is-speaking .b4{animation-duration:.3s;animation-delay:.03s;}
.vcz-ctrl-speaking.is-speaking .b5{animation-duration:.38s;animation-delay:.07s;}
.vcz-ctrl-speaking.is-speaking span { color:var(--green); }
@keyframes vcz-active-bar { from{transform:scaleY(.3);} to{transform:scaleY(1);} }

/* ══════════════════════════════
   RESPONSIVE
══════════════════════════════ */
@media (max-width:700px) {
    .vcz-wrapper { flex-direction:column; height:auto; min-height:600px; border-radius:var(--r); }
    .vcz-sidebar { width:100%; min-width:unset; max-height:200px; border-right:none; border-bottom:1px solid var(--border); }
    .vcz-sidebar-footer { display:none; }
    .vcz-active-area { flex-direction:column; }
    .vcz-voice-col { width:100%; max-height:260px; border-right:none; border-bottom:1px solid var(--border); }
    .vcz-vu-vol { display:none; }
}
@media (max-width:480px) {
    .vcz-ctrl-label { display:none; }
    .vcz-ctrl-btn { width:44px; }
}

/* ══════════════════════════════
   MUTE VISIBLE FOR OTHERS
══════════════════════════════ */

/* Gesamte Karte eingrauen wenn stummgeschaltet */
.vcz-vu-card.is-muted {
    opacity: 0.55;
    filter: grayscale(0.4);
}
.vcz-vu-card.is-muted .vcz-vu-ring {
    border-color: var(--txt-2) !important;
    box-shadow: none !important;
}

/* Mikrofon-Icon: normal = grün, stummgeschaltet = rot mit Linie */
.vcz-vu-mic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(35,165,90,0.15);
    color: var(--green);
    transition: all .2s;
    flex-shrink: 0;
}
.vcz-vu-mic.is-muted {
    background: rgba(242,63,67,0.15);
    color: var(--red);
}
.vcz-vu-mic svg line {
    display: none;
}
.vcz-vu-mic.is-muted svg line {
    display: block;
}

/* ── Voice-Card Layout-Update ── */
.vcz-vu-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    width: 100%;
}

.vcz-vu-badges {
    display: flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
}

.vcz-vu-badge-mute, .vcz-vu-badge-deaf, .vcz-vu-badge-lmute {
    font-size: 11px;
    background: var(--bg-2);
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    /* Kein position:absolute mehr – im Flow */
    position: static;
}

/* Channel-Sidebar: stummgeschaltete User eingrauen */
.vcz-ch-user-entry.is-muted .vcz-ch-u-name {
    opacity: 0.5;
    text-decoration: line-through;
}
.vcz-ch-user-entry.is-muted .vcz-ch-u-avatar img {
    filter: grayscale(0.6);
    opacity: 0.7;
}

/* ══════════════════════════════
   PREVIEW WIDGET  [voiclz_preview]
══════════════════════════════ */

.vcz-preview-wrap {
    font-family: 'Segoe UI', system-ui, sans-serif;
    background: #1e1f22;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    overflow: hidden;
    color: #f2f3f5;
}





/* Channels list */
.vcz-pv-channels {
    display: flex;
    flex-direction: column;
}

.vcz-pv-channel {
    padding: 10px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.vcz-pv-channel:last-child {
    border-bottom: none;
}

/* Channel label */
.vcz-pv-ch-label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}
.vcz-pv-ch-icon { font-size: 13px; }
.vcz-pv-ch-name {
    font-size: 12px;
    font-weight: 700;
    color: #b5bac1;
    text-transform: uppercase;
    letter-spacing: .04em;
    flex: 1;
}
.vcz-pv-ch-count {
    font-size: 11px;
    background: rgba(88,101,242,0.2);
    color: #7289da;
    padding: 1px 7px;
    border-radius: 10px;
    font-weight: 700;
}

/* Users row */
.vcz-pv-users {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

.vcz-pv-user {
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 2px solid #1e1f22;
    position: relative;
    flex-shrink: 0;
    margin-right: -8px;  /* overlapping */
    transition: transform .15s, z-index 0s;
    z-index: 1;
}
.vcz-pv-user:hover { transform: translateY(-4px) scale(1.1); z-index: 10; }
.vcz-pv-user:last-of-type { margin-right: 0; }

.vcz-pv-user img {
    width: 32px; height: 32px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}
.vcz-pv-user.is-muted img {
    filter: grayscale(0.5);
    opacity: 0.65;
}
.vcz-pv-user-badge {
    position: absolute;
    bottom: -2px; right: -2px;
    font-size: 10px;
    background: #1e1f22;
    border-radius: 50%;
    width: 15px; height: 15px;
    display: flex; align-items: center; justify-content: center;
    line-height: 1;
}

/* Avatar frames in preview */
.vcz-pv-user.vcz-frame-blue  img { border: 2px solid #4facfe; box-shadow: 0 0 5px rgba(79,172,254,0.5); }
.vcz-pv-user.vcz-frame-gold  img { border: 2px solid #f0b132; box-shadow: 0 0 5px rgba(240,177,50,0.5); }
.vcz-pv-user.vcz-frame-animated img {
    border: 2px solid transparent;
    background: linear-gradient(#1e1f22,#1e1f22) padding-box,
                linear-gradient(135deg,#5865f2,#23a55a,#f0b132,#f23f43) border-box;
    animation: vcz-frame-spin 3s linear infinite;
}

/* Names text */
.vcz-pv-names {
    font-size: 12px;
    color: #80848e;
    margin-left: 12px;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Footer / Join Button */
.vcz-pv-footer {
    padding: 12px 16px;
    border-top: 1px solid rgba(255,255,255,0.06);
    background: rgba(0,0,0,0.15);
}

.vcz-pv-join-btn {
    display: block;
    width: 100%;
    padding: 9px 16px;
    background: #5865f2;
    color: #fff !important;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    text-align: center;
    text-decoration: none !important;
    transition: background .15s, transform .1s;
    font-family: inherit;
}
.vcz-pv-join-btn:hover  { background: #4752c4; }
.vcz-pv-join-btn:active { transform: scale(.97); }

/* Empty state */
.vcz-preview-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 24px 16px;
    background: #1e1f22;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    font-family: 'Segoe UI', system-ui, sans-serif;
    text-align: center;
}
.vcz-pv-empty-icon { font-size: 28px; }
.vcz-pv-empty-text { font-size: 13px; color: #80848e; }
.vcz-preview-empty-state .vcz-pv-join-btn {
    margin-top: 6px;
    width: auto;
    padding: 8px 20px;
    display: inline-block;
}

/* ── Server Logo (Bild) ── */
.vcz-server-logo-img {
    width: 100%; height: 100%;
    object-fit: cover;
    border-radius: 10px;
    display: block;
}
.vcz-server-logo-emoji {
    font-size: 17px; line-height: 1;
}

/* ── Preview title with logo ── */
.vcz-pv-title {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.vcz-pv-title-logo {
    width: 36px; height: 36px;
    border-radius: 9px;
    background: rgba(88,101,242,0.2);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    font-size: 18px;
}
.vcz-pv-logo-img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.vcz-pv-logo-emoji { font-size: 18px; line-height: 1; }
.vcz-pv-title-meta { flex: 1; min-width: 0; }
.vcz-pv-title-name {
    display: block;
    font-size: 13px; font-weight: 700; color: #f2f3f5;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vcz-pv-title-sub {
    display: block;
    font-size: 11px; color: #80848e;
}

/* ── Empty state with server info ── */
.vcz-pv-empty-logo {
    width: 56px; height: 56px;
    border-radius: 14px;
    background: rgba(88,101,242,0.15);
    display: flex; align-items: center; justify-content: center;
    font-size: 28px; overflow: hidden;
    margin-bottom: 4px;
}
.vcz-pv-empty-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vcz-pv-empty-server-name { font-size: 15px; font-weight: 700; color: #f2f3f5; }
.vcz-pv-empty-sub { font-size: 12px; color: #80848e; margin-bottom: 6px; }