/* =========================================
   1. CORE VARIABLES & RESET
   ========================================= */
:root {
    --bg-color: #020202;
    --text-main: #e0e0e0;
    --vox-cyan: #00f3ff;
    --vox-cyan-dim: rgba(0, 243, 255, 0.1);
    --vox-blue: #0044ff;
    --alert-red: #ff003c;
    --alastor-red: #8a0000;
    --panel-bg: rgba(5, 8, 12, 0.95);
    --font-tech: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-code: 'Courier New', monospace;
    --scan-line-color: rgba(0, 243, 255, 0.03);
    --grid-glow: 0px; /* Будем менять это через JS */
    --grid-opacity: 0.03;
}

html { scroll-behavior: smooth; }

/* Отключаем анимации для тех, кто их не любит в настройках ОС */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { 
        animation-duration: 0.01ms !important; 
        transition-duration: 0.01ms !important; 
        scroll-behavior: auto !important; 
    }
    .crt-overlay,
    .vignette,
    .hypno-spiral,
    .glitch-bar {
        display: none !important;
    }

    body {
        background-image: none;
    }
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: var(--font-tech); }

button, a, input, .sq, .tech-card, .logo-container, input[type="range"] { cursor: pointer; }
input[type="text"] { cursor: text; }

body { 
    background-color: var(--bg-color); 
    color: var(--text-main); 
    overflow-x: hidden; width: 100vw; min-height: 100vh;
    background-image: 
        linear-gradient(var(--scan-line-color) 1px, transparent 1px),
        linear-gradient(90deg, var(--scan-line-color) 1px, transparent 1px);
    background-size: 30px 30px;
    scrollbar-width: thin;
    scrollbar-color: var(--vox-cyan) #000;
    transition: all 0.5s ease;
    -webkit-user-select: none; user-select: none;
    position: relative;
    overscroll-behavior-y: none;
}

/* =========================================
   2. THEMES & DEFCON STATES
   ========================================= */

/* Valentino Theme */
body.theme-val {
    --vox-cyan: #ff00ff;
    --vox-cyan-dim: rgba(255, 0, 255, 0.1);
    --vox-blue: #aa00aa;
    --scan-line-color: rgba(255, 0, 255, 0.03);
}

/* Alastor / Radio Demon Theme */
body.theme-radio {
    --vox-cyan: #ff0000;
    --vox-cyan-dim: rgba(255, 0, 0, 0.4);
    --vox-blue: #330000;
    --bg-color: #1a0000;
    filter: contrast(1.5) sepia(1) hue-rotate(-50deg) saturate(3);
    animation: none;
    overflow: hidden !important;
}

body.theme-radio.alert {
    animation: worldShake 0.1s infinite;
}

/* Частицы курсора (0 и 1) для theme-radio */
.cursor-particle {
    position: fixed; top: 0; left: 0; font-family: var(--font-code); font-size: 10px; color: var(--vox-cyan);
    pointer-events: none; z-index: 9999; opacity: 1; animation: particleFade 1s forwards;
}
body.theme-radio .cursor-particle { color: red; font-family: 'Courier New', serif; }

@keyframes worldShake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
}
@keyframes particleFade { 0% { transform: translateY(0) scale(1); opacity: 0.8; } 100% { transform: translateY(20px) scale(0.5); opacity: 0; } }

/* DEFCON 2: CAUTION */
body.defcon-caution {
    --vox-cyan: #ffbb00;
    --vox-cyan-dim: rgba(255, 187, 0, 0.15);
    --scan-line-color: rgba(255, 187, 0, 0.05);
}
body.defcon-caution .news-ticker { background: #ffbb00; color: black; }

/* DEFCON 3: CRITICAL */
body.defcon-critical {
    --vox-cyan: #ff0000;
    --vox-cyan-dim: rgba(255, 0, 0, 0.2);
    --scan-line-color: rgba(255, 0, 0, 0.1);
    animation: redAlert 1s infinite alternate;
}
@keyframes redAlert {
    0% { box-shadow: inset 0 0 0 black; }
    100% { box-shadow: inset 0 0 50px red; }
}

/* =========================================
   ИСПРАВЛЕННЫЙ LOCKDOWN (Админка закреплена)
   ========================================= */
body.defcon-lockdown {
    --vox-cyan: #444;
    /* ❌ УБИРАЕМ filter отсюда, чтобы не ломать position: fixed */
    
    pointer-events: none; /* Блокируем клики по сайту */
    overflow: hidden;     /* 🔥 Блокируем прокрутку, чтобы сайт замер */
}

/* ✅ Применяем эффект "смерти" ко всем элементам, КРОМЕ Админки и Кнопок */
body.defcon-lockdown > *:not(#adminPanel):not(#adminToggleBtn):not(.crt-overlay):not(#notification-area) {
    filter: grayscale(100%) contrast(1.2);
}

/* Настройки для Админки в режиме Lockdown */
body.defcon-lockdown #adminPanel,
body.defcon-lockdown #adminToggleBtn { 
    pointer-events: auto !important; /* Разрешаем клики */
    filter: none; /* Админка остается цветной (чтобы выделяться как "спасательный круг") */
    z-index: 20002; /* Поверх всего */
}

/* Шум остается (если ты использовал мой прошлый код для шума) */
body.defcon-lockdown::after {
    content: "";
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    /* Твой SVG шум */
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.4'/%3E%3C/svg%3E");
    opacity: 0.15; 
    pointer-events: none; 
    z-index: 9999;
    animation: staticNoise 0.5s steps(5) infinite;
}

@keyframes staticNoise {
    0% { background-position: 0 0; }
    20% { background-position: -20px -20px; }
    40% { background-position: 40px -40px; }
    60% { background-position: -30px 10px; }
    80% { background-position: 20px 30px; }
    100% { background-position: 0 0; }
}

/* --- ИСПРАВЛЕННАЯ КНОПКА АДМИНА --- */
#adminToggleBtn {
    position: fixed;
    bottom: 20px;
    z-index: 20001;
    display: none; 
    
    /* Надежное центрирование */
    left: 50%;
    transform: translateX(-50%);
    margin: 0; 
    
    background: black;
    color: var(--vox-cyan);
    border-color: var(--alert-blue);
    font-size: 10px;
    padding: 5px 15px;
    box-shadow: 0 0 20px rgba(255,0,0,0.2);
    white-space: nowrap;
}

/* Специальная анимация для центрированной кнопки */
/* Она сохраняет translateX(-50%) во время глитча */
#adminToggleBtn:hover {
    animation: glitch-skew-center 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
    background: var(--vox-blue);
    color: black;
}

@keyframes glitch-skew-center {
    0% { transform: translateX(-50%) skew(0deg); }
    20% { transform: translateX(-50%) skew(-10deg); }
    40% { transform: translateX(-50%) skew(10deg); }
    60% { transform: translateX(-50%) skew(-5deg); }
    80% { transform: translateX(-50%) skew(5deg); }
    100% { transform: translateX(-50%) skew(0deg); }
}

/* =========================================
   3. SCROLLBAR & SELECTION
   ========================================= */
::-webkit-scrollbar { width: 8px; background: #000; }
::-webkit-scrollbar-track { border-left: 1px solid #222; }
::-webkit-scrollbar-thumb { background: var(--vox-cyan); border: 1px solid black; box-shadow: 0 0 10px var(--vox-cyan); }
::-webkit-scrollbar-thumb:hover { background: white; }

/* Тонкий скролл для чатов и списков */
.chat-messages::-webkit-scrollbar, 
.user-list::-webkit-scrollbar,
.admin-user-list::-webkit-scrollbar { width: 4px; }
.chat-messages::-webkit-scrollbar-thumb, 
.user-list::-webkit-scrollbar-thumb { background: #333; border: none; border-radius: 2px; }
.chat-messages:hover::-webkit-scrollbar-thumb, 
.user-list:hover::-webkit-scrollbar-thumb { background: var(--vox-cyan); }

::selection { background: var(--vox-cyan); color: #000; }

/* =========================================
   4. FX LAYERS & OVERLAYS
   ========================================= */
.crt-overlay { 
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), 
                linear-gradient(90deg, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.03)); 
    background-size: 100% 3px, 3px 100%; pointer-events: none; z-index: 9000; 
}
.vignette { 
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
    background: radial-gradient(circle, rgba(0,0,0,0) 60%, rgba(0,20,40,0.8) 100%); 
    pointer-events: none; z-index: 8999; 
}

/* VSOD (Vox Screen of Death) */
#vsod-layer {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: var(--vox-cyan); color: white; font-family: var(--font-code);
    z-index: 2147483647; display: none; flex-direction: column;
    padding: 10% 100px; font-size: 20px; line-height: 1.5;
    cursor: none; user-select: none; pointer-events: auto !important;
}
#vsod-layer.active { display: flex; animation: flashRed 0.2s; }
@keyframes flashRed { 0% { background: #fff; } 100% { background: #00818a; } }
.sad-face { font-size: 150px; margin-bottom: 40px; transform: rotate(90deg); display:inline-block; }
.glitch-bar {
    width: 100%; height: 5px; background: white; position: absolute; top: 50%; left: 0;
    animation: scanKill 2s infinite; opacity: 0.5;
}
@keyframes scanKill { 0% { top: 0%; } 100% { top: 100%; } }

/* Easter Egg */
#easterEggLayer {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: black; z-index: 100000; display: none;
    flex-direction: column; justify-content: center; align-items: center; overflow: hidden;
}
#easterEggLayer.active { display: flex; }
.hypno-spiral {
    width: 100vw; height: 100vw;
    background: repeating-conic-gradient(from 0deg, #000 0deg 10deg, var(--vox-cyan) 10deg 20deg);
    border-radius: 50%; animation: spinHypno 2s infinite linear; opacity: 0.3; position: absolute;
}
.egg-text {
    font-size: 100px; font-weight: 900; color: white; z-index: 2;
    text-shadow: 0 0 20px var(--vox-cyan); text-transform: uppercase;
    animation: textPulse 0.1s infinite; text-align: center; padding: 0 20px;
}
@keyframes spinHypno { to { transform: rotate(360deg); } }
@keyframes textPulse { 0% { transform: scale(1); color: white; } 50% { transform: scale(1.05); color: var(--vox-cyan); } 100% { transform: scale(1); color: white; } }

/* Webcam */
#cam-container {
    position: fixed; bottom: 20px; left: 20px; width: 160px; height: 120px;
    border: 2px solid var(--vox-cyan); background: #000; z-index: 5000;
    display: none; flex-direction: column; box-shadow: 0 0 15px var(--vox-cyan);
}
#cam-container video { width: 100%; height: 100%; object-fit: cover; opacity: 0.7; filter: grayscale(100%) contrast(1.2); }
#cam-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 1px solid rgba(255,255,255,0.2); pointer-events: none; }
.cam-label { background: var(--vox-cyan); color: #000; font-size: 10px; padding: 2px 5px; font-weight: bold; position: absolute; top: 0; left: 0; }
.rec-dot { width: 8px; height: 8px; background: red; border-radius: 50%; position: absolute; top: 5px; right: 5px; animation: blink 1s infinite; }

/* Notifications */
#notification-area { position: fixed; top: 80px; right: 20px; z-index: 10000; display: flex; flex-direction: column; gap: 10px; pointer-events: none; max-width: 90vw; }

.vox-toast {
    background: rgba(0, 0, 0, 0.95); border-left: 4px solid var(--vox-cyan); padding: 15px 25px;
    color: white; font-family: var(--font-code); font-size: 13px; min-width: 300px; max-width: 100%;
    box-shadow: 0 0 20px var(--vox-cyan-dim); 
    
    /* Начальное состояние */
    transform: translateX(100%); 
    opacity: 0; /* Чтобы не мелькало */
    
    animation: slideIn 0.3s forwards; 
    pointer-events: auto; position: relative;
    
    /* Интерактивность */
    cursor: grab; 
    transition: transform 0.1s linear, opacity 0.1s linear; /* Быстрая реакция на перетаскивание */
    touch-action: none; /* Важно для мобильных */
}

.vox-toast.grabbing { cursor: grabbing; transition: none; } /* Когда тянем - отключаем плавность CSS */

.vox-toast.error { border-left-color: var(--alert-red); }

/* Анимации */
@keyframes slideIn { 
    to { transform: translateX(0); opacity: 1; } 
}

@keyframes slideOut {
    0% { transform: translateX(0); opacity: 1; }
    100% { transform: translateX(100%); opacity: 0; }
}

.vox-toast.hiding {
    animation: slideOut 0.4s cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
}

/* =========================================
   5. UI COMPONENTS (Buttons, Inputs, etc)
   ========================================= */
.btn-tech {
    background: transparent; border: 1px solid var(--vox-cyan); color: var(--vox-cyan);
    padding: 15px 40px; font-weight: bold; text-transform: uppercase; letter-spacing: 3px;
    cursor: pointer; position: relative; transition: 0.3s; text-decoration: none; display: inline-block;
    box-shadow: 0 0 10px rgba(0, 243, 255, 0.1);
}
.btn-tech:hover {
    background: var(--vox-cyan-dim);
    text-shadow: 2px 0 var(--alert-red), -2px 0 var(--vox-blue);
    animation: glitch-skew 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
}
@keyframes glitch-skew {
    0% { transform: skew(0deg); }
    20% { transform: skew(-2deg); }
    40% { transform: skew(2deg); }
    60% { transform: skew(-1deg); }
    80% { transform: skew(1deg); }
    100% { transform: skew(0deg); }
}

.form-label { display: block; color: var(--vox-cyan); font-size: 11px; margin-bottom: 8px; font-weight: bold; letter-spacing: 1px; }
.form-input { 
    width: 100%; background: #000; border: 1px solid #333; color: white; 
    padding: 15px; font-family: var(--font-code); outline: none; transition: 0.3s; margin-bottom: 20px; 
}
.form-input:focus {
    background: rgba(0, 243, 255, 0.05); border-color: var(--vox-cyan);
    box-shadow: 0 0 15px var(--vox-cyan-dim), inset 0 0 10px rgba(0, 243, 255, 0.1);
    color: var(--vox-cyan); caret-color: var(--vox-cyan);
}

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* =========================================
   6. HEADER & NAV
   ========================================= */
header { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 15px 50px; 
    
    /* --- 🔥 ИСПРАВЛЕНИЕ КОНФЛИКТА С ТИКЕРОМ 🔥 --- */
    margin-top: 35px;       /* Начальный отступ, чтобы не прятаться под тикером */
    position: -webkit-sticky; /* Для Safari */
    position: sticky;       /* Липкое позиционирование */
    top: 35px;              /* ВАЖНО: Прилипаем ровно под тикером (высота тикера 35px) */
    /* ----------------------------------------------- */

    background: rgba(5, 5, 5, 0.85); 
    border-bottom: 1px solid rgba(0, 243, 255, 0.2); 
    z-index: 100; 
    backdrop-filter: blur(20px); 
    flex-wrap: wrap; 
}

.logo-container { display: flex; align-items: center; text-decoration: none; }
.vox-logo-svg { width: 45px; height: 45px; margin-right: 15px; filter: drop-shadow(0 0 5px var(--vox-cyan)); }
.logo { font-size: 26px; font-weight: 900; letter-spacing: 3px; color: white; text-transform: uppercase; }
.logo span { color: var(--vox-cyan); }
nav ul { display: flex; gap: 30px; list-style: none; flex-wrap: wrap; align-items: center;}
nav a { 
    color: #aaa; text-decoration: none; font-size: 12px; letter-spacing: 1px; 
    text-transform: uppercase; transition: 0.3s; font-weight: 700; position: relative; display: inline-block; padding: 5px; 
}
nav a:hover, nav a:focus { color: var(--vox-cyan); text-shadow: 0 0 10px var(--vox-cyan); outline: none; }
nav a::after { content:''; position:absolute; bottom:-5px; left:0; width:0; height:2px; background:var(--vox-cyan); transition:0.3s; }
nav a:hover::after, nav a:focus::after { width:100%; }

/* =========================================
   7. SECTIONS & HERO
   ========================================= */
.view-section { display: none; width: 100%; min-height: 80vh; padding-top: 40px; }
.view-section.active-view { display: block; animation: fadeIn 0.5s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s ease; }
.reveal.active { opacity: 1; transform: translateY(0); }

.section-header { text-align: center; margin: 120px 0 60px; padding: 0 10px; }
.section-header h2 { 
    font-size: 40px; color: white; text-transform: uppercase; letter-spacing: 5px; 
    display: inline-block; position: relative; word-wrap: break-word; max-width: 100%; transition: text-shadow 0.3s;
}
.section-header h2:hover { text-shadow: 0 0 20px var(--vox-cyan); }
.section-header h2::after { content:''; display:block; width: 50%; height: 3px; background: var(--vox-cyan); margin: 15px auto 0; box-shadow: 0 0 10px var(--vox-cyan); }

.hero { height: 90vh; min-height: 600px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; position: relative; padding: 0 20px; }
.hero h1 { 
    font-size: 8vw; line-height: 0.9; text-transform: uppercase; font-weight: 900; margin-bottom: 20px; 
    color: white; position: relative; display: inline-block; text-shadow: 4px 4px 0px rgba(0, 243, 255, 0.1); 
}
@media (min-width: 1200px) { .hero h1 { font-size: 100px; } }

.glitch-text::before, .glitch-text::after { 
    content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
    background: transparent; opacity: 0.8; pointer-events: none; 
}
.glitch-text::before { color: var(--vox-cyan); z-index: -1; animation: glitch 3s infinite reverse; }
.glitch-text::after { color: #ff00ff; z-index: -2; animation: glitch 2s infinite; }
@keyframes glitch { 0% { clip-path: inset(0 0 0 0); transform: translate(0); } 20% { clip-path: inset(20% 0 10% 0); transform: translate(-2px, 2px); } 100% { clip-path: inset(0 0 0 0); transform: translate(0); } }

.neon-text {
    color: #fff;
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px var(--vox-cyan), 0 0 40px var(--vox-cyan), 0 0 80px var(--vox-cyan);
}

/* Timeline */
.timeline-container { max-width: 800px; margin: 0 auto; position: relative; border-left: 2px solid #333; padding-left: 40px; padding-right: 20px; }
.timeline-item { margin-bottom: 50px; position: relative; }
.timeline-item::before { content:''; position: absolute; left: -46px; top: 0; width: 10px; height: 10px; background: var(--vox-cyan); border-radius: 50%; box-shadow: 0 0 10px var(--vox-cyan); }
.t-date { color: var(--vox-cyan); font-family: var(--font-code); font-weight: bold; font-size: 14px; margin-bottom: 5px; }
.t-title { color: white; font-size: 20px; text-transform: uppercase; margin-bottom: 10px; font-weight: bold; }
.t-desc { color: #888; line-height: 1.6; }

/* Products */
.products-grid { display: flex; justify-content: center; gap: 40px; flex-wrap: wrap; padding: 0 20px; }
.tech-card {
    background: var(--panel-bg); border: 1px solid #333; padding: 40px; width: 350px; max-width: 100%;
    position: relative; transition: border-color 0.3s; clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
}
.tech-card:hover { border-color: var(--vox-cyan); }
.badge { position: absolute; top: 0; right: 0; background: var(--vox-blue); color: white; padding: 5px 15px; font-size: 10px; font-weight: bold; clip-path: polygon(0 0, 100% 0, 100% 100%, 10px 100%); }

/* Reviews */
.reviews-wrapper { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 50px; padding: 0 20px; }
.review-form { background: var(--panel-bg); border: 1px solid var(--vox-cyan); padding: 40px; height: fit-content; }
.rating-squares { display: flex; gap: 5px; cursor: pointer; margin-bottom: 20px; }
.sq { width: 40px; height: 40px; border: 1px solid #555; transition: 0.2s; position: relative; } 
@media (min-width: 769px) { .sq { width: 25px; height: 25px; } }
.sq:focus { outline: 2px solid var(--vox-cyan); }
.sq.active { background: var(--vox-cyan); border-color: var(--vox-cyan); box-shadow: 0 0 10px var(--vox-cyan); }

.review-feed { display: flex; flex-direction: column; gap: 20px; max-height: 600px; overflow-y: auto; padding-right: 10px; }
.review-item { background: rgba(255,255,255,0.03); border-left: 3px solid #333; padding: 20px; animation: slideIn 0.5s; }
.review-item.good { border-left-color: var(--vox-cyan); }
.review-item.bad { border-left-color: var(--alert-red); }
.r-name { font-weight: bold; color: white; font-size: 14px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 5px; }
.r-squares { display: flex; gap: 2px; }
.r-sq { width: 8px; height: 8px; background: #333; }
.r-sq.fill { background: var(--vox-cyan); }
.r-text { color: #aaa; font-style: italic; margin-top: 10px; font-size: 13px; word-break: break-word; }

/* Terminal */
.terminal-wrapper { padding: 80px 0; background: #000; display: flex; justify-content: center; border-top: 1px solid #222; border-bottom: 1px solid #222; }
.terminal-box { 
    width: 900px; 
    max-width: 95vw; 
    
    /* Дорогой фон: почти черный, но с легкой прозрачностью */
    background: rgba(5, 8, 12, 0.95);
    
    /* Размытие фона позади терминала (эффект матового стекла) */
    backdrop-filter: blur(10px); 
    -webkit-backdrop-filter: blur(10px);

    /* Тонкая, изящная рамка */
    border: 1px solid rgba(0, 243, 255, 0.3);
    border-top: 2px solid var(--vox-cyan); /* Акцент сверху */
    
    /* Свечение самого корпуса, а не текста */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8), 0 0 20px rgba(0, 243, 255, 0.05);
    
    font-family: 'JetBrains Mono', monospace; 
    display: flex; 
    flex-direction: column;
    border-radius: 4px; /* Слегка скругленные углы */
}

/* Полоса заголовка терминала */
.term-bar { 
    background: rgba(0, 243, 255, 0.05); /* Еле заметная заливка */
    padding: 10px 15px; 
    color: #666; 
    font-size: 10px; 
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
    display: flex; 
    justify-content: space-between; 
    border-bottom: 1px solid rgba(0, 243, 255, 0.1); 
}
.term-screen { height: 400px; padding: 20px; color: var(--vox-cyan); font-size: 14px; overflow-y: auto; }
.term-input { display: flex; padding: 15px; background: #050505; border-top: 1px solid #333; align-items: center; }
/* Поле ввода */
#cmdInput { 
    background: transparent; 
    border: none; 
    color: white; 
    width: 100%; 
    outline: none; 
    font-family: 'JetBrains Mono', monospace; 
    font-size: 13px; 
    margin-left: 10px; 
    caret-color: var(--vox-cyan); /* Курсор цвета Vox */
}

/* Eye */
.vox-eye-container { position: fixed; bottom: 30px; right: 30px; width: 70px; height: 70px; z-index: 5000; transition: transform 0.2s; pointer-events: auto; cursor: pointer; }
.eye-svg { width: 100%; height: 100%; filter: drop-shadow(0 0 10px var(--vox-cyan)); }
.pupil-group { transition: transform 0.05s; will-change: transform; }
.vox-eye-container.listening .eye-svg { stroke: var(--vox-cyan); stroke-width: 3px; will-change: transform; animation: eyePulse 1.5s infinite alternate; }
.vox-eye-container.listening::after {
    content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 50%;
    box-shadow: 0 0 20px var(--vox-cyan); opacity: 0.5; z-index: -1; animation: glowPulse 1.5s infinite alternate;
}
@keyframes eyePulse { from { transform: scale(1); } to { transform: scale(1.1); } }
@keyframes glowPulse { from { opacity: 0.3; transform: scale(0.8); } to { opacity: 0.6; transform: scale(1.2); } }

/* --- ИСПРАВЛЕННАЯ НОВОСТНАЯ ЛЕНТА --- */
.news-ticker { 
    background: var(--vox-cyan); color: black; font-weight: 900; font-family: var(--font-code); 
    padding: 0 10px; /* Убрал лишние вертикальные отступы */
    height: 35px;    /* Фиксированная высота */
    border-bottom: 2px solid var(--vox-blue); 
    
    position: fixed; 
    top: 0; 
    left: 0; /* Фикс отлета влево/вправо */
    width: 100%; 
    
    z-index: 9000; font-size: 13px; 
    white-space: nowrap; overflow: hidden;
    display: flex !important; 
    align-items: center; 
    justify-content: space-between; 
    gap: 10px;
    box-sizing: border-box; /* Чтобы padding не ломал ширину */
}

/* Добавляем стиль для новой обертки */
.ticker-wrapper {
    flex: 1; /* Занимает всё доступное место между иконками */
    overflow: hidden; /* Скрывает текст, выходящий за границы */
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent); /* Красивое затухание по краям (опционально) */
    -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}

/* Обновляем стиль движущегося блока */
.ticker-move { 
    display: flex; /* Выстраиваем элементы в ряд */
    width: max-content; /* Ширина равна длине всего текста (двух копий) */
    animation: tick 20s linear infinite; /* Время круга (регулируйте скорость здесь) */
    will-change: transform;
    white-space: nowrap;
}

/* 🔥 НОВАЯ АНИМАЦИЯ (БЕСШОВНАЯ) */
/* Мы сдвигаем ленту ровно на 50%, то есть на длину одной копии текста.
   В этот момент Копия 2 встает ровно на место Копии 1, и анимация сбрасывается в 0 незаметно для глаза. */
@keyframes tick { 
    0% { transform: translateX(0); } 
    100% { transform: translateX(-50%); } 
}

.ticker-side-icon {
    flex: 0 0 auto; width: 25px; height: 25px; border-radius: 50%; overflow: hidden;
    border: 1px solid var(--vox-cyan); box-shadow: 0 0 5px var(--vox-cyan); background: #000;
    position: relative; z-index: 2; margin: 0 5px;
}
.ticker-side-icon img { width: 100%; height: 100%; object-fit: cover; }

footer { text-align: center; padding: 60px 20px; color: #888; font-size: 11px; border-top: 1px solid #111; background: #010101; }

/* =========================================
   8. MESSENGER UI (VOX NETWORK)
   ========================================= */
.messenger-container {
    background: rgba(5, 5, 8, 0.85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    max-width: 1000px; margin: 40px auto; border: 1px solid rgba(0, 243, 255, 0.3);
    height: 700px; display: flex; flex-direction: column;
    box-shadow: 0 0 30px rgba(0,243,255,0.1); position: relative;
}

.auth-screen { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 20px; }
.auth-box { width: 300px; text-align: center; }
.auth-tabs { display: flex; margin-bottom: 20px; width: 100%; border-bottom: 1px solid #333; }
.auth-tab { flex: 1; padding: 10px; background: transparent; border: none; color: #666; font-weight: bold; transition: 0.3s; }
.auth-tab.active { color: var(--vox-cyan); border-bottom: 2px solid var(--vox-cyan); }
.auth-form { display: none; }
.auth-form.active { display: block; animation: fadeIn 0.3s; }

.chat-ui { width: 100%; height: 100%; display: none; overflow: hidden; }
.chat-ui.active { display: flex; }

/* Sidebar */
.chat-sidebar { 
    width: 280px; border-right: 1px solid #333; background: #030303; 
    display: flex; flex-direction: column; transition: transform 0.3s ease;
}
.user-list { flex: 1; overflow-y: auto; }
.contact-item { padding: 15px; border-bottom: 1px solid #111; display: flex; align-items: center; gap: 10px; transition: 0.2s; cursor: pointer; position: relative; }
.contact-item:hover { background: #111; }
.contact-item.active { background: rgba(0,243,255,0.1); border-left: 3px solid var(--vox-cyan); }
.c-avatar { 
    width: 40px; height: 40px; background: #222; border-radius: 50%; 
    display:flex; justify-content:center; align-items:center; overflow:hidden; border: 1px solid #444;
}
.c-avatar img { width:100%; height:100%; object-fit:cover; }
.c-info { flex: 1; overflow: hidden; }
.c-name { font-size: 14px; color: white; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-status { font-size: 10px; color: #666; }
.c-status.online { color: var(--vox-cyan); }

.unread-badge {
    background: var(--alert-red); color: black; font-size: 10px; font-weight: 900; 
    border-radius: 50%; width: 20px; height: 20px; display: flex; justify-content: center; align-items: center;
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    box-shadow: 0 0 10px var(--alert-red); border: 1px solid white; animation: pulseBadge 1s infinite; z-index: 10;
}
@keyframes pulseBadge { 0% { transform: translateY(-50%) scale(1); } 50% { transform: translateY(-50%) scale(1.2); } 100% { transform: translateY(-50%) scale(1); } }

/* Main Chat */
.chat-main { flex: 1; display: flex; flex-direction: column; background: #000; position: relative; }
.chat-header { 
    padding: 15px; border-bottom: 1px solid #333; background: #080808; 
    display: flex; justify-content: space-between; align-items: center; height: 60px;
}
.chat-header-info { display:flex; align-items:center; gap:10px; }
.chat-title { color:white; font-weight:bold; font-size: 16px; display: flex; flex-direction: column; }
.typing-indicator { font-size: 9px; color: var(--vox-cyan); font-style: italic; opacity: 0; transition: opacity 0.3s; }
.typing-indicator.active { opacity: 1; animation: pulseType 1s infinite; }
@keyframes pulseType { 0% { opacity: 0.5; } 50% { opacity: 1; } 100% { opacity: 0.5; } }

.chat-messages { flex: 1; padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 15px; scroll-behavior: smooth; }
.msg-wrapper { display: flex; gap: 10px; max-width: 80%; animation: fadeIn 0.3s; }
.msg-wrapper.me { align-self: flex-end; flex-direction: row-reverse; }
.msg-avatar { width: 35px; height: 35px; border-radius: 50%; background: #333; overflow: hidden; flex-shrink: 0; cursor: pointer; }
.msg-avatar img { width: 100%; height: 100%; object-fit: cover; }
.msg-content { display: flex; flex-direction: column; gap: 2px; }
.msg-name { font-size: 10px; color: #888; font-weight: bold; cursor: pointer; }
.msg-name:hover { color: var(--vox-cyan); }
/* Обычное сообщение */
.msg-bubble { 
    padding: 10px 15px; border-radius: 8px; font-size: 14px; line-height: 1.4; word-wrap: break-word;
    
    /* 🔥 НОВЫЙ СТИЛЬ: */
    background: rgba(20, 20, 25, 0.6); /* Полупрозрачный фон */
    backdrop-filter: blur(5px);        /* Размытие того, что сзади */
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.1); /* Тонкая рамка */
    color: #eee;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* Моё сообщение (Справа) */
.msg-wrapper.me .msg-bubble { 
    /* 🔥 НОВЫЙ СТИЛЬ: */
    background: rgba(0, 243, 255, 0.15); /* Vox Cyan с прозрачностью */
    border-color: var(--vox-cyan); 
    color: white;
    text-shadow: 0 0 5px rgba(0, 243, 255, 0.3);
}

/* Image Chat & Tools */
.chat-img-btn { font-size: 20px; padding: 0 10px; background: none; border: none; color: #666; transition: 0.3s; }
.chat-img-btn:hover { color: var(--vox-cyan); transform: scale(1.1); }
.msg-image { max-width: 250px; border-radius: 5px; border: 1px solid var(--vox-cyan); margin-top: 5px; cursor: pointer; transition: 0.3s; }
.msg-image:hover { opacity: 0.8; }
.chat-input-area { padding: 15px; border-top: 1px solid #333; display: flex; gap: 10px; background: #050505; align-items: center; }

/* Empty Chat */
.empty-chat-state { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; opacity: 0; animation: fadeIn 1s forwards; text-align: center; }
.empty-icon-box {
    width: 80px; height: 80px; background: rgba(0, 243, 255, 0.05);
    border: 1px solid var(--vox-cyan); border-radius: 50%; display: flex; align-items: center; justify-content: center;
    margin-bottom: 20px; box-shadow: 0 0 20px rgba(0, 243, 255, 0.1);
}
.empty-icon { font-size: 30px; animation: pulseOp 2s infinite; }
.empty-title { color: white; font-weight: bold; margin-bottom: 5px; letter-spacing: 1px; }
.empty-sub { color: #666; font-size: 12px; max-width: 200px; }
@keyframes pulseOp { 0% { opacity: 0.5; transform: scale(0.9); } 50% { opacity: 1; transform: scale(1.1); } 100% { opacity: 0.5; transform: scale(0.9); } }

/* Profile Modal */
.profile-modal {
    position: absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.95);
    z-index: 10; display:none; flex-direction:column; justify-content:center; align-items:center;
}
.profile-modal.active { display:flex; }
.p-card { 
    width: 400px; /* Чуть шире для красоты */
    max-width: 90vw; 
    padding: 0; /* Убираем паддинг у контейнера, чтобы баннер касался краев */
    border: 1px solid var(--vox-cyan); 
    background: #050505; 
    box-shadow: 0 0 40px rgba(0, 243, 255, 0.15);
    display: flex; flex-direction: column; 
    overflow: hidden; /* Чтобы углы не торчали */
}
.p-card h3 { margin-bottom: 10px; text-align: center; border-bottom: 1px solid #333; padding-bottom: 10px; }
.p-btn-row { display: flex; gap: 10px; margin-top: 10px; width: 100%; }
.p-card .btn-tech { flex: 1; padding: 10px 5px; font-size: 12px; white-space: nowrap; }
.invite-box { margin-top: 15px; border-top: 1px solid #333; padding-top: 15px; display: flex; flex-direction: column; gap: 5px; }
.invite-link-display {
    background: #111; border: 1px solid #333; color: var(--vox-cyan);
    padding: 8px; font-size: 10px; font-family: var(--font-code);
    text-align: center; cursor: pointer; word-break: break-all;
}
.invite-link-display:hover { background: #222; border-color: var(--vox-cyan); }

/* Mobile Menu Button */
.mobile-menu-btn { display: none; background:none; border:none; color:white; font-size:20px; margin-right:10px; }
.sidebar-close-btn {
    display: none; background: none; border: 1px solid #333; color: var(--text-main);
    font-weight: bold; width: 30px; height: 30px; border-radius: 5px;
    align-items: center; justify-content: center; cursor: pointer;
}

/* =========================================
   9. VIDEO PLAYER
   ========================================= */
.video-wrapper {
    max-width: 900px; margin: 40px auto; 
    border: 2px solid #333; background: #000;
    position: relative; box-shadow: 0 0 20px rgba(0,0,0,0.8);
    transition: all 0.3s; cursor: none; 
}
.video-wrapper.user-active { cursor: default; }

.video-screen-container {
    width: 100%; 
    aspect-ratio: 16/9; 
    background: #000; 
    position: relative; 
    overflow: hidden; 
    
    /* 1. Скругление углов (как у старых/дорогих мониторов) */
    border-radius: 12px;
    
    /* 2. Внутренняя тень (эффект глубины экрана) */
    box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.9);
    
    /* 3. Тонкая рамка "стекла" */
    border: 1px solid rgba(0, 243, 255, 0.3);
}

/* Добавляем блик на стекле */
.video-screen-container::after {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle at 50% -20%, rgba(255,255,255,0.05), transparent 60%);
    pointer-events: none;
    z-index: 10;
}
.video-overlay-crt {
    position: absolute; top:0; left:0; width:100%; height:100%; 
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), 
                linear-gradient(90deg, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.03));
    background-size: 100% 3px, 3px 100%; pointer-events: none; z-index: 5;
    animation: scanlineMove 10s linear infinite;
}
@keyframes scanlineMove { 0% { background-position: 0 0; } 100% { background-position: 0 100%; } }

#staticCanvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; opacity: 0.15; mix-blend-mode: screen; }
.video-tag { position: absolute; top: 10px; left: 10px; background: var(--vox-cyan); color: black; font-weight: bold; font-size: 10px; padding: 2px 5px; z-index: 6; font-family: var(--font-code); }
#customVideoPlayer { width: 100%; height: 100%; outline: none; display:block; z-index: 2; position: relative; }

/* --- ВСТАВЬ ЭТО В STYLES.CSS ВМЕСТО СТАРОГО БЛОКА --- */
/* --- ОБНОВЛЕННЫЙ БЛОК ДЛЯ STYLES.CSS --- */

.custom-video-controls {
    position: absolute; 
    bottom: 15px;
    
    /* Центрирование */
    left: 50%;
    transform: translateX(-50%);
    width: 94%;
    
    /* Дизайн */
    background: rgba(10, 15, 20, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 243, 255, 0.2);
    border-radius: 12px;
    padding: 10px 15px;
    z-index: 100;
    
    display: flex; 
    flex-direction: column; 
    gap: 5px;

    /* 🔥 ИЗМЕНЕНИЯ ЗДЕСЬ: */
    opacity: 0; /* По умолчанию скрыта */
    pointer-events: none; /* Чтобы нельзя было нажать, когда невидима */
    transition: opacity 0.3s ease; /* Плавность */
}

/* 1. Показываем, если JS добавил класс user-active (движение мыши) */
.video-wrapper.user-active .custom-video-controls {
    opacity: 1;
    pointer-events: auto;
}

/* 3. Когда пауза — панель видна всегда */
.video-wrapper.paused .custom-video-controls {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%);
}

/* 1. Для ПК: показываем при наведении (сохраняя центрирование!) */
@media (hover: hover) {
    .video-wrapper:hover .custom-video-controls {
        pointer-events: auto;
        transform: translateX(-50%); /* <--- ВАЖНО: Держим центр */
    }
}

/* 2. Для ВСЕХ: показываем, если мышь двигается (сохраняя центрирование!) */
.video-wrapper.user-active .custom-video-controls {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%); /* <--- ВАЖНО: Держим центр */
}

.c-row { display: flex; align-items: center; gap: 10px; width: 100%; }
.c-btn {
    background: transparent; border: 1px solid #444; color: var(--vox-cyan);
    font-family: var(--font-code); font-size: 12px; font-weight: bold;
    padding: 5px 10px; min-width: 30px; text-align: center;
}
.c-btn:hover { background: var(--vox-cyan); color: black; border-color: var(--vox-cyan); }
.c-time { font-family: var(--font-code); font-size: 11px; color: #aaa; min-width: 100px; }
/* Умный ползунок с буферизацией */
.vox-range { 
    -webkit-appearance: none; 
    appearance: none; 
    width: 100%; 
    height: 6px; 
    outline: none; 
    flex: 1; 
    border: 1px solid #333;
    cursor: pointer;
    
    /* Магия градиента (будет управляться через JS) */
    background: linear-gradient(to right, 
        var(--vox-cyan) 0%, 
        var(--vox-cyan) 0%, 
        #555 0%, 
        #555 0%, 
        #111 0%
    );
}

/* Ползунок (кружок) */
.vox-range::-webkit-slider-thumb { 
    -webkit-appearance: none; 
    appearance: none; 
    width: 12px; 
    height: 12px; 
    background: white; /* Белый, как на YouTube */
    border-radius: 50%;
    box-shadow: 0 0 10px var(--vox-cyan);
    transition: transform 0.1s;
    margin-top: -3px; /* Центрирование, если нужно */
}

.vox-range::-webkit-slider-thumb:hover {
    transform: scale(1.3);
    background: var(--vox-cyan);
}

/* Версия для Firefox */
.vox-range::-moz-range-thumb {
    width: 12px;
    height: 12px;
    background: white;
    border: none;
    border-radius: 50%;
    box-shadow: 0 0 10px var(--vox-cyan);
    cursor: pointer;
    transition: transform 0.1s;
}
.vox-range::-moz-range-thumb:hover {
    transform: scale(1.3);
    background: var(--vox-cyan);
}

/* Fullscreen */
.video-wrapper:fullscreen { width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; background: black; border: none; cursor: none; }
.video-wrapper:fullscreen.user-active { cursor: default; }
.video-wrapper:fullscreen .video-screen-container { height: 100%; width: 100%; border: none; display:flex; justify-content:center; align-items:center; }
.video-wrapper:fullscreen video { object-fit: contain; width:100%; height:100%; }
.video-wrapper:fullscreen .video-controls-panel, .video-wrapper:fullscreen .playlist-container { display: none !important; }
.video-wrapper:fullscreen .custom-video-controls { position: fixed; bottom: 0; width: 100%; background: rgba(0,0,0,0.8); padding-bottom: 20px; }

.video-controls-panel { padding: 20px; display: flex; justify-content: center; gap: 20px; align-items: center; background: #080808; }
.file-upload-btn { position: relative; overflow: hidden; display: inline-block; }
.file-upload-btn input[type=file] { font-size: 100px; position: absolute; left: 0; top: 0; opacity: 0; cursor: pointer; }

.playlist-container {
    border: 1px solid #333; background: #050505; padding: 10px;
    max-height: 150px; overflow-y: auto; display: flex; flex-direction: column; gap: 5px; margin-top: 10px;
}
.playlist-item { padding: 5px 10px; background: #111; color: #aaa; font-size: 11px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
.playlist-item:hover { background: #222; color: white; }
.playlist-item {
    transition: all 0.3s ease;
    border-left: 2px solid transparent;
    border-bottom: 1px solid #222;
}

.playlist-item:hover {
    background: rgba(0, 243, 255, 0.05);
    padding-left: 15px; /* Сдвиг при наведении */
}

.playlist-item.active {
    background: linear-gradient(90deg, rgba(0, 243, 255, 0.15), transparent);
    color: var(--vox-cyan);
    border-left: 4px solid var(--vox-cyan);
    text-shadow: 0 0 10px var(--vox-cyan);
    font-weight: bold;
    padding-left: 15px;
    position: relative;
}

/* Добавляем иконку "Sound Wave" перед активным треком */
.playlist-item.active::before {
    content: 'ılıll'; /* Имитация звуковой волны символами */
    font-family: Arial, sans-serif;
    font-size: 10px;
    margin-right: 8px;
    animation: textFlicker 1s infinite;
}

@keyframes textFlicker {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}
.playlist-remove { color: var(--alert-red); font-weight: bold; padding: 0 5px; }
.playlist-remove:hover { color: white; }

/* =========================================
   10. MUSIC MENU & SLIDE-OUT
   ========================================= */
#slide-music-menu {
    position: fixed; top: 80px; right: -320px; width: 300px; height: auto; max-height: 80vh;
    background: rgba(5, 8, 12, 0.98); border: 1px solid var(--vox-cyan); border-right: none;
    z-index: 9500; transition: right 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
    padding: 20px; display: flex; flex-direction: column; gap: 15px;
    box-shadow: -10px 0 30px rgba(0,0,0,0.8); backdrop-filter: blur(10px); overflow-y: auto;
}
#slide-music-menu.open { right: 0; }
.music-header { font-size: 14px; font-weight: bold; color: var(--vox-cyan); border-bottom: 1px solid #333; padding-bottom: 10px; display:flex; justify-content:space-between;}
.visualizer-container { width: 100%; height: 60px; background: #000; border: 1px solid #333; display: flex; align-items: flex-end; justify-content: space-between; padding: 2px; }
#audioCanvas { width: 100%; height: 100%; }
.cover-art-box {
    width: 100%; height: 200px; background: #111; border: 1px solid #333;
    display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative;
}
#coverImg { width: 100%; height: 100%; object-fit: cover; opacity: 0.5; filter: grayscale(100%); transition:0.3s; }
.cover-art-box:hover #coverImg { opacity: 1; filter: grayscale(0%); }

/* Контейнер текста (маска) */
.cover-text { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    background: rgba(0,0,0,0.85); /* Чуть темнее для читаемости */
    color: var(--vox-cyan); 
    padding: 8px 0; 
    font-size: 11px; 
    font-weight: bold;
    font-family: var(--font-code);
    
    /* 🔥 ЭТИ СТРОКИ ВАЖНЫ ДЛЯ ОБРЕЗКИ КРАЕВ */
    overflow: hidden; 
    white-space: nowrap; 
    border-top: 1px solid var(--vox-cyan);
}

/* Сам текст (анимация) */
.cover-text span {
    display: inline-block;
    padding-left: 100%; /* Начинаем справа за экраном */
    animation: marquee 10s linear infinite; /* Едем влево */
}

/* Логика движения */
@keyframes marquee {
    0% { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }
}

/* Общий стиль контейнера для ползунка */
.range-wrap {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 10px;
    font-weight: bold;
    color: var(--vox-cyan);
    font-family: var(--font-code);
    margin-bottom: 5px;
}

/* Сам инпут */
input[type="range"] {
    -webkit-appearance: none;
    width: 100%;
    height: 6px;
    background: #111; /* Темная подложка */
    border: 1px solid #333;
    border-radius: 2px;
    outline: none;
    cursor: pointer;
    box-shadow: inset 0 0 5px rgba(0,0,0,0.8);
}

/* Ползунок (Кружок/Квадрат) */
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    background: var(--vox-cyan);
    border: 2px solid #000; /* Контрастная обводка */
    box-shadow: 0 0 10px var(--vox-cyan), 0 0 20px var(--vox-cyan); /* Свечение */
    cursor: pointer;
    transition: transform 0.1s, background 0.2s;
    margin-top: -4px; /* Центрирование */
    transform: rotate(45deg); /* Делаем ромб для стиля Vox */
}

/* Эффект при наведении */
input[type="range"]::-webkit-slider-thumb:hover {
    background: #fff;
    transform: rotate(45deg) scale(1.3);
    box-shadow: 0 0 15px #fff, 0 0 30px var(--vox-cyan);
}
#toggleMenuBtn {
    position: absolute; left: -40px; top: 0; width: 40px; height: 40px;
    background: var(--vox-cyan); border: none; color: black; font-weight: bold;
    display: flex; justify-content: center; align-items: center; font-size: 20px;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 10px 50%);
}
#playPauseBtn {
    background: transparent;
    border: 1px solid var(--vox-cyan);
    color: var(--vox-cyan);
    font-size: 14px;
    letter-spacing: 2px;
    padding: 12px;
    transition: all 0.3s;
    text-shadow: 0 0 5px var(--vox-cyan);
    box-shadow: inset 0 0 10px rgba(0, 243, 255, 0.1);
    position: relative;
    overflow: hidden;
}

#playPauseBtn:hover {
    background: var(--vox-cyan);
    color: #000;
    box-shadow: 0 0 20px var(--vox-cyan), inset 0 0 20px white;
    font-weight: 900;
}

/* Эффект сканирующей линии внутри кнопки */
#playPauseBtn::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    animation: btnScan 3s infinite;
}

@keyframes btnScan {
    0% { left: -100%; }
    20% { left: 100%; }
    100% { left: 100%; }
}

/* =========================================
   11. UPDATED ADMIN PANEL (CYBER DASHBOARD)
   ========================================= */
#adminPanel {
    display: none; 
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 1100px; max-width: 95vw; height: 85vh;
    
    /* 🔥 Эффект дорогого стекла */
    background: rgba(8, 10, 15, 0.85); 
    backdrop-filter: blur(20px); 
    -webkit-backdrop-filter: blur(20px);
    
    border: 1px solid var(--vox-cyan);
    box-shadow: 0 0 100px rgba(0, 243, 255, 0.1), inset 0 0 50px rgba(0, 0, 0, 0.8);
    z-index: 20000;
    
    /* СЕТКА (GRID LAYOUT) */
    display: grid; /* Скрыто по умолчанию, JS переключит на grid */
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: auto 1fr 1fr auto;
    gap: 15px;
    padding: 25px;
    overflow: hidden; /* Скроллим только списки внутри, а не все окно */
    
    /* Фон-сетка для стиля */
    background-image: 
        linear-gradient(rgba(0, 243, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 243, 255, 0.05) 1px, transparent 1px);
    background-size: 40px 40px;
}

/* Заголовок на всю ширину */
#adminPanel h3 {
    grid-column: 1 / -1;
    text-align: left;
    font-size: 24px;
    color: var(--vox-cyan);
    border-bottom: 2px solid var(--vox-cyan);
    padding-bottom: 10px;
    margin: 0;
    text-shadow: 0 0 15px var(--vox-cyan);
    display: flex; justify-content: space-between; align-items: center;
}
#adminPanel h3::after {
    content: 'SYSTEM ONLINE ●';
    font-size: 12px; color: #0f0; animation: blink 2s infinite;
}

/* Общий стиль блоков */
.admin-section {
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid #333;
    padding: 15px;
    display: flex; flex-direction: column; gap: 10px;
    position: relative;
    transition: 0.3s;
}
.admin-section:hover {
    border-color: rgba(0, 243, 255, 0.5);
    box-shadow: 0 0 20px rgba(0, 243, 255, 0.05);
}

/* Декоративные уголки для блоков */
.admin-section::before {
    content: ''; position: absolute; top: -1px; left: -1px; 
    width: 10px; height: 10px; border-top: 2px solid var(--vox-cyan); border-left: 2px solid var(--vox-cyan);
}
.admin-section::after {
    content: ''; position: absolute; bottom: -1px; right: -1px; 
    width: 10px; height: 10px; border-bottom: 2px solid var(--vox-cyan); border-right: 2px solid var(--vox-cyan);
}

/* --- РАСПОЛОЖЕНИЕ БЛОКОВ (GRID AREAS) --- */

/* 1. Broadcast (Большой блок слева) */
.sec-broadcast { grid-column: 1 / 2; grid-row: 2 / 3; }

/* 2. Reports (Справа сверху) */
.sec-reports { grid-column: 2 / 4; grid-row: 2 / 3; border-color: var(--alert-red); }
.sec-reports::before, .sec-reports::after { border-color: var(--alert-red); }

/* 3. Wiretaps & Forced View (Середина) */
.sec-wiretaps { grid-column: 2 / 3; grid-row: 3 / 4; }
.sec-forced { grid-column: 3 / 4; grid-row: 3 / 4; border-color: var(--alert-red); }

/* 4. Users (Слева снизу, высокий) */
.sec-users { grid-column: 1 / 2; grid-row: 3 / 5; }

/* 5. Matrix & Defcon (Низ право) */
.sec-matrix { grid-column: 2 / 3; grid-row: 4 / 5; padding: 0 !important; overflow: hidden; }
.sec-defcon { grid-column: 3 / 4; grid-row: 4 / 5; }

/* Стилизация списков (Скроллбар внутри блоков) */
.admin-user-list, #adminReportsList, #spyGrid {
    overflow-y: auto; 
    padding-right: 5px;
    background: transparent; border: none;
}
/* Растягиваем списки на всю высоту блока */
.admin-user-list { flex: 1; min-height: 0; } 

/* Кнопки в базе данных */
.admin-row {
    background: linear-gradient(90deg, rgba(255,255,255,0.05), transparent);
    border-left: 2px solid #333; margin-bottom: 5px; padding: 8px 10px;
    transition: 0.2s;
}
.admin-row:hover {
    background: linear-gradient(90deg, var(--vox-cyan-dim), transparent);
    border-left-color: var(--vox-cyan); padding-left: 15px;
}

/* Красивые кнопки DEFCON */
.defcon-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; height: 100%; }
.defcon-btn {
    border: 1px solid #333; background: #050505; color: #666; 
    font-weight: bold; cursor: pointer; transition: 0.2s; font-family: var(--font-code);
}
.defcon-btn:hover { transform: scale(1.05); z-index: 2; }
.d-safe:hover, .d-safe.active { background: #00f3ff; color: black; box-shadow: 0 0 15px #00f3ff; border-color: #00f3ff; }
.d-warn:hover, .d-warn.active { background: #ffbb00; color: black; box-shadow: 0 0 15px #ffbb00; border-color: #ffbb00; }
.d-crit:hover, .d-crit.active { background: #ff0000; color: black; box-shadow: 0 0 15px #ff0000; border-color: #ff0000; }
.d-lock:hover, .d-lock.active { background: #ffffff; color: black; box-shadow: 0 0 15px #ffffff; border-color: #ffffff; }

/* Адаптив для мобильных (в одну колонку) */
@media (max-width: 1000px) {
    #adminPanel { 
        display: none; /* JS включит flex/grid */
        flex-direction: column; 
        height: 90vh; overflow-y: auto; 
        grid-template-columns: 1fr; grid-template-rows: auto;
    }
    .admin-section { grid-column: auto !important; grid-row: auto !important; }
}

/* =========================================
   ИСПРАВЛЕННЫЕ МОДАЛЬНЫЕ ОКНА (Поверх всего)
   ========================================= */
.modal-overlay, 
#customModal, 
#incomingCallModal, 
#contractModal {
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    background: rgba(0,0,0,0.8); 
    
    /* 🔥 ЭТО САМОЕ ГЛАВНОЕ: Максимальный слой поверх админки 🔥 */
    z-index: 2147483647 !important; 
    
    display: none; 
    justify-content: center; 
    align-items: center; 
    backdrop-filter: blur(5px);
}

/* Этот класс добавляется скриптом, чтобы показать окно */
.modal-overlay.active,
#customModal.active,
#incomingCallModal.active,
#contractModal.active { 
    display: flex !important; 
    animation: fadeIn 0.2s; 
}

.vox-modal {
    background: #000 !important; border: 1px solid var(--vox-cyan);
    width: 500px !important; max-width: 96vw; padding: 20px;
    box-shadow: 0 0 50px rgba(0,0,0,0.9); position: relative;
}
.vox-modal h3 { color: var(--vox-cyan); margin-bottom: 15px; font-size: 18px; text-transform: uppercase; }
.vox-modal p { font-size: 14px; color: #ccc; margin-bottom: 25px; line-height: 1.5; }
.vox-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.vox-modal-actions button { flex: 1; margin: 0; padding: 10px 5px !important; font-size: 11px !important; min-width: auto !important; height: auto !important; }

/* Call Interface */
.call-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; z-index: 15000; display: none; flex-direction: column; }
.call-overlay.active { display: flex; }
.call-video-grid { flex: 1; position: relative; display: flex; justify-content: center; align-items: center; overflow: hidden; }
#remoteVideo { width: 100%; height: 100%; object-fit: cover; }
#localVideo { position: absolute; bottom: 20px; right: 20px; width: 150px; height: 100px; background: #222; border: 2px solid var(--vox-cyan); object-fit: cover; z-index: 2; }
.call-controls { height: 80px; background: #111; display: flex; justify-content: center; align-items: center; gap: 20px; border-top: 1px solid #333; }
.btn-call { width: 60px; height: 60px; border-radius: 50%; border: 1px solid #333; font-size: 0; cursor: pointer; display: flex; justify-content: center; align-items: center; transition: 0.3s; background: rgba(0,0,0,0.8); box-shadow: 0 0 15px rgba(0, 243, 255, 0.1); }
.btn-call svg { width: 24px; height: 24px; fill: white; transition: 0.3s; }
.btn-hangup { border-color: var(--alert-red); background: rgba(50, 0, 0, 0.5); }
.btn-hangup svg { fill: var(--alert-red); }
.btn-hangup:hover { background: var(--alert-red); box-shadow: 0 0 20px var(--alert-red); }
.btn-hangup:hover svg { fill: black; }
.btn-mute { border-color: var(--vox-cyan); }
.btn-mute svg { fill: var(--vox-cyan); }
.btn-mute:hover { background: var(--vox-cyan); }
.btn-mute:hover svg { fill: black; }
.btn-mute.off { border-color: #555; background: #222; }
.btn-mute.off svg { fill: #777; }

/* Avatar Overlay in Call */
.avatar-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; background: #050505; z-index: 1; gap: 20px; }
.call-avatar-img { width: 120px; height: 120px; border-radius: 50%; border: 3px solid var(--vox-cyan); box-shadow: 0 0 30px rgba(0, 243, 255, 0.2); object-fit: cover; animation: pulseAvatar 2s infinite; }
.call-avatar-name { font-size: 24px; color: white; font-weight: bold; text-shadow: 0 0 10px var(--vox-cyan); text-transform: uppercase; letter-spacing: 2px; }
.call-status-label { font-size: 12px; color: #666; font-family: var(--font-code); margin-top: 5px; }
@keyframes pulseAvatar { 0% { box-shadow: 0 0 30px rgba(0, 243, 255, 0.2); } 50% { box-shadow: 0 0 50px rgba(0, 243, 255, 0.5); } 100% { box-shadow: 0 0 30px rgba(0, 243, 255, 0.2); } }
.avatar-overlay.hidden { display: none; }

/* Incoming Call */
#incomingCallModal .vox-modal { animation: modalPulse 1.5s infinite alternate; border-width: 2px; display: flex; flex-direction: column; align-items: center; }
@keyframes modalPulse { 0% { box-shadow: 0 0 20px rgba(0, 243, 255, 0.2); border-color: rgba(0, 243, 255, 0.5); } 100% { box-shadow: 0 0 60px rgba(0, 243, 255, 0.8); border-color: #fff; } }
.modal-caller-avatar { width: 80px; height: 80px; border-radius: 50%; border: 2px solid var(--vox-cyan); margin-bottom: 15px; object-fit: cover; box-shadow: 0 0 15px var(--vox-cyan); }

/* Contract Modal */
#contractModal { z-index: 30000; }
.contract-paper { background: #f0f0f0; color: black; font-family: 'Courier New', monospace; padding: 40px; width: 500px; max-width: 90%; box-shadow: 0 0 50px rgba(0,0,0,0.8); position: relative; transform: rotate(-1deg); border: 1px solid #ccc; animation: paperTwitch 3s infinite; }
.contract-title { text-align: center; font-size: 24px; font-weight: bold; margin-bottom: 20px; text-decoration: underline; text-transform: uppercase; }
.contract-text { font-size: 12px; line-height: 1.6; margin-bottom: 30px; }
.signature-box { border-bottom: 2px solid black; margin-top: 40px; font-family: 'Segoe Script', cursive; font-size: 24px; color: #8a0000; min-height: 40px; cursor: pointer; position: relative; }
.signature-box:hover { background: rgba(0,0,0,0.05); }
.signature-box::after { content: 'X _________________________ (CLICK TO SIGN)'; font-size: 10px; color: #555; font-family: sans-serif; position: absolute; bottom: -20px; left: 0; }
@keyframes paperTwitch {
    0%, 95%, 98%, 100% { transform: rotate(-1deg) translate(0,0); filter: none; }
    96% { transform: rotate(1deg) translate(2px,-2px); filter: invert(0.2); }
    97% { transform: rotate(-2deg) translate(-2px,2px); }
}

/* Trust & Spy Elements */
.trust-badge { font-size: 10px; padding: 2px 5px; background: #111; border: 1px solid #333; margin-left: 5px; color: white; font-weight: bold; font-family: var(--font-code); }
.trust-high { color: #0f0; border-color: #0f0; }
.trust-low { color: var(--alert-red); border-color: var(--alert-red); }
.spy-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; max-height: 200px; overflow-y: auto; margin-top: 10px; }
.spy-card { background: #000; border: 1px solid #333; padding: 10px; font-size: 10px; display: flex; flex-direction: column; gap: 5px; }
.spy-card.active { border-color: var(--alert-red); animation: pulseRed 2s infinite; }
@keyframes pulseRed { 0% { box-shadow: 0 0 5px #500; } 50% { box-shadow: 0 0 15px #f00; } 100% { box-shadow: 0 0 5px #500; } }

/* =========================================
   12. GLOBAL MOBILE OPTIMIZATION
   ========================================= */
@media (max-width: 768px) {
    /* Safe Area for Notch */
    body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); padding-bottom: env(safe-area-inset-bottom); font-size: 14px; }
    .modal-overlay, .crt-overlay, .vignette, .news-ticker { padding-top: env(safe-area-inset-top); }

    /* Disable heavy FX */
    .crt-overlay, .vignette, .cursor-particle, .vox-eye-container { display: none !important; }

    /* Layout Tweaks */
    header { flex-direction: column; gap: 20px; padding: 15px; background: rgba(0, 0, 0, 0.95) !important; backdrop-filter: none !important; }
    nav ul { justify-content: center; gap: 5px !important; flex-wrap: wrap; }
    nav a { font-size: 10px !important; letter-spacing: 0px !important; padding: 5px !important; min-height: 28px !important; }
    .logo { font-size: 20px !important; }
    .vox-logo-svg { width: 30px !important; height: 30px !important; }
    
    .hero h1 { font-size: 40px; }
    .section-header h2 { font-size: 28px; }
    
    .timeline-container { padding-left: 25px; }
    .timeline-item::before { left: -29px; }
    
    .btn-tech { padding: 15px; min-height: 50px; font-size: 14px; width: 100%; text-align: center; box-shadow: none !important; }
    .form-input { font-size: 16px; padding: 12px; }

    /* Components */
    #notification-area { top: 60px; left: 10px; right: 10px; width: auto; align-items: center; }
    .vox-toast { min-width: auto; width: 100%; }
    #cam-container { width: 100px; height: 75px; bottom: 10px; left: 10px; }
    #vsod-layer { padding: 50px 20px; }
    .egg-text { font-size: 50px; }
    
    #slide-music-menu { width: 90vw !important; right: -95vw !important; background: rgba(0, 0, 0, 0.95) !important; }
    #slide-music-menu.open { right: 0 !important; }
    
    /* Reviews & Forms */
    .reviews-wrapper { grid-template-columns: 1fr !important; gap: 30px !important; }
    .review-feed { max-height: 300px !important; }
    .review-form { width: 100% !important; box-sizing: border-box; }
    
    /* Chat Mobile */
    .messenger-container { height: calc(100vh - 80px); margin-top: 10px; border: none; width: 100%; }
    .mobile-menu-btn { display: block; }
    .sidebar-close-btn { display: flex; }
    .chat-sidebar { position: absolute; left: 0; top: 0; height: 100%; z-index: 20; transform: translateX(-100%); width: 85%; border-right: 2px solid var(--vox-cyan); background: black; }
    .chat-sidebar.open { transform: translateX(0); }
    .chat-sidebar .btn-tech, .chat-input-area .btn-tech { min-height: 28px !important; padding: 4px 10px !important; font-size: 10px !important; width: auto !important; margin: 0 !important; }
    .chat-input-area .form-input { margin-bottom: 0 !important; height: 40px !important; }
    .msg-wrapper { max-width: 90%; }
    .msg-bubble { font-size: 15px; padding: 12px; }

    /* Video Mobile */
    .video-wrapper { width: 100% !important; margin: 20px 0 !important; border-left: none !important; border-right: none !important; }
    .video-wrapper:fullscreen { background: #000; }
    .custom-video-controls { padding: 10px !important; gap: 5px !important; }
    .custom-video-controls .c-btn { min-height: 32px !important; padding: 0 8px !important; font-size: 10px !important; }
    #vVol, #vPipBtn, #vSpeed { display: none !important; }
    .custom-video-controls span:nth-of-type(2) { display: none !important; }
    .c-time { font-size: 9px !important; min-width: auto !important; margin-left: auto !important; margin-right: 10px !important; }
    .vox-range { height: 10px; }
    .vox-range::-webkit-slider-thumb { width: 20px; height: 20px; }
    .ticker-side-icon { width: 36px; height: 36px; }

    /* Admin Panel Mobile */
    #adminPanel { grid-template-columns: 1fr; width: 95vw; }
    .vox-modal { width: 95%; padding: 15px; }

    /* Поднимаем локальное видео выше кнопок управления */
    #localVideo {
        width: 100px !important;  /* Чуть меньше на телефоне */
        height: 140px !important; /* Вертикальная ориентация для телефона */
        bottom: 100px !important; /* 🔥 Поднимаем над панелью управления (она около 80px) */
        right: 15px !important;
        border-radius: 10px;
        z-index: 200 !important; /* Поверх всего */
    }

    /* Панель управления делаем фиксированной внизу */
    .call-controls {
        bottom: 20px !important;
        width: 90% !important;
        left: 5% !important;
        transform: none !important; /* Убираем центрирование через transform */
        padding: 10px !important;
        justify-content: space-around;
        z-index: 150 !important; /* Ниже видео, если они пересекутся */
    }
}

/* =========================================
   🔥 ФИКС ДЛЯ LOCKDOWN: РАЗБЛОКИРОВКА МОДАЛОК 🔥
   ========================================= */
body.defcon-lockdown .modal-overlay,
body.defcon-lockdown .modal-overlay button,
body.defcon-lockdown .modal-overlay .vox-modal {
    pointer-events: auto !important; /* Разрешаем клики */
    filter: none !important;         /* Убираем серость, чтобы было видно */
    z-index: 2147483647 !important;  /* Убеждаемся, что оно выше шума */
}

/* =========================================
   13. LEADERBOARD & ID CARD STYLES
   ========================================= */

/* Leaderboard Row */
.rank-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px; background: rgba(255, 255, 255, 0.05);
    border-left: 2px solid #333; transition: 0.2s;
}
.rank-row:hover { background: rgba(0, 243, 255, 0.1); border-left-color: var(--vox-cyan); }
.rank-pos { font-size: 18px; font-weight: bold; width: 40px; color: #666; font-family: var(--font-code); }
.rank-1 { color: #ffd700; text-shadow: 0 0 10px #ffd700; } /* Gold */
.rank-2 { color: #c0c0c0; } /* Silver */
.rank-3 { color: #cd7f32; } /* Bronze */

.rank-user { flex: 1; display: flex; align-items: center; gap: 10px; }
.rank-av { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; border: 1px solid #555; }
.rank-score { font-family: var(--font-code); font-weight: bold; color: var(--vox-cyan); }

/* WANTED MODE styling */
.rank-row.wanted { border-left-color: var(--alert-red); }
.rank-row.wanted:hover { background: rgba(255, 0, 0, 0.1); }
.rank-row.wanted .rank-score { color: var(--alert-red); }

/* ID CARD GENERATOR STYLE */
.id-card-wrapper {
    width: 500px; height: 300px;
    background: #050505;
    border: 2px solid var(--vox-cyan);
    position: relative;
    font-family: var(--font-code);
    color: white;
    display: flex; flex-direction: column;
    box-shadow: 0 0 30px rgba(0, 243, 255, 0.2);
    background-image: 
        linear-gradient(rgba(0, 243, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 243, 255, 0.05) 1px, transparent 1px);
    background-size: 20px 20px;
}
.id-header {
    background: var(--vox-cyan); color: black; padding: 10px 20px;
    display: flex; align-items: center; gap: 10px; font-weight: 900; letter-spacing: 2px;
}
/* ОБНОВЛЕННЫЙ СТИЛЬ ДЛЯ ЛОГОТИПА */
.id-logo { 
    width: 30px; 
    height: 30px; 
    object-fit: contain; /* 🔥 ЭТО ИСПРАВЛЯЕТ СПЛЮЩИВАНИЕ */
    filter: brightness(0); /* Делает иконку черной для стиля ID карты */
}
.id-body { flex: 1; display: flex; padding: 20px; gap: 20px; align-items: center; }
.id-photo-box {
    width: 120px; height: 140px; border: 2px solid var(--vox-cyan);
    position: relative; overflow: hidden; background: #000;
}
.id-photo-box img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%) contrast(1.2); }
.id-overlay {
    position: absolute; top:0; left:0; width:100%; height:100%;
    background: linear-gradient(transparent 50%, rgba(0, 243, 255, 0.2) 50%);
    background-size: 100% 4px; pointer-events: none;
}
.id-info { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.id-row { border-bottom: 1px solid #333; padding-bottom: 5px; display: flex; justify-content: space-between; }
.id-label { color: #aaa; font-size: 10px; }
.id-val { font-weight: bold; font-size: 14px; text-transform: uppercase; }
.id-footer {
    background: #111; padding: 5px; text-align: center; font-size: 9px; 
    color: #888; letter-spacing: 3px; border-top: 1px solid #333;
}

.tech-card, .review-item {
    /* Удаляем transition для transform при наведении, 
       иначе будет "желейная" задержка. Оставляем только для других свойств. */
    transition: transform 0.1s ease-out, box-shadow 0.3s, border-color 0.3s;
    will-change: transform; /* Оптимизация производительности */
}

/* --- V-MENU (CONTEXT MENU) --- */
.v-context-menu {
    position: fixed;
    z-index: 100000;
    width: 200px;
    background: rgba(10, 10, 15, 0.95);
    border: 1px solid var(--vox-cyan);
    backdrop-filter: blur(10px);
    box-shadow: 0 0 20px rgba(0, 243, 255, 0.2);
    display: none; /* Скрыто по умолчанию */
    flex-direction: column;
    padding: 5px 0;
    transform-origin: top left;
    animation: menuOpen 0.1s ease-out;
}

@keyframes menuOpen {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

.v-ctx-item {
    padding: 10px 15px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: #ccc;
    cursor: pointer;
    transition: 0.2s;
    display: flex;
    align-items: center;
    gap: 10px;
}

.v-ctx-item:hover {
    background: var(--vox-cyan-dim);
    color: var(--vox-cyan);
    padding-left: 20px; /* Эффект сдвига */
}

.v-ctx-separator {
    height: 1px;
    background: #333;
    margin: 5px 0;
}

/* =========================================
   14. VIP & USER PROFILE CARD
   ========================================= */

/* VIP Badge в чате */
.vip-badge {
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(45deg, #ffd700, #ffaa00);
    color: black; font-weight: 900; font-size: 9px;
    padding: 1px 4px; border-radius: 3px; margin-left: 5px;
    box-shadow: 0 0 5px #ffd700; cursor: help;
    vertical-align: middle; letter-spacing: 1px;
}

/* Карточка просмотра пользователя (Public Profile) */
.user-card-modal {
    width: 350px; overflow: hidden; padding: 0 !important;
    border: 1px solid var(--vox-cyan); background: #050505;
}

.uc-banner {
    width: 100%; height: 120px; background: #222;
    position: relative; overflow: hidden;
}
.uc-banner img { width: 100%; height: 100%; object-fit: cover; }

.uc-avatar-box {
    width: 90px; height: 90px; border-radius: 50%;
    border: 4px solid #050505; background: #000;
    position: absolute; bottom: -45px; left: 20px;
    overflow: hidden; cursor: pointer; z-index: 2;
}
.uc-avatar-box img { width: 100%; height: 100%; object-fit: cover; transition: 0.3s; }
.uc-avatar-box:hover img { transform: scale(1.1); filter: brightness(1.2); }

.uc-info {
    padding: 50px 20px 20px 20px; /* Отступ сверху под аватарку */
    display: flex; flex-direction: column; gap: 5px;
}

.uc-name { font-size: 20px; font-weight: bold; color: white; display: flex; align-items: center; }
.uc-uid { font-size: 10px; color: #666; font-family: var(--font-code); }
.uc-status { 
    background: #111; padding: 10px; border-radius: 5px; margin-top: 10px; 
    border-left: 2px solid var(--vox-cyan); font-size: 12px; color: #ccc; 
}

/* Он держит и баннер, и аватарку вместе */
.profile-header-wrapper {
    position: relative;
    width: 100%;
    /* Нет overflow: hidden, чтобы аватарка могла свисать */
}

/* Область баннера (Верх) */
.profile-banner-edit {
    width: 100%; 
    height: 140px; 
    background: #111; /* Цвет заглушки */
    border-bottom: 1px solid var(--vox-cyan);
    position: relative; 
    display: flex; justify-content: center; align-items: center;
    cursor: pointer;
    overflow: visible;
}

/* 2. Сильнее отодвигаем текст вниз от аватарки */
.profile-body {
    /* 🔥 padding-top: 90px (было 75px). Это спустит имя вниз, чтобы аватарка его не закрывала */
    padding: 90px 25px 30px 25px; 
    
    display: flex; flex-direction: column; 
    
    /* 🔥 gap: 20px (было 15px). Это добавит воздуха между полями */
    display: flex; flex-direction: column; 
    gap: 15px; 
    background: #050505;
}

/* Текст "UPLOAD BANNER" (появляется при наведении) */
.banner-overlay-text {
    position: absolute; z-index: 2; color: white; font-weight: bold; 
    font-size: 10px; background: rgba(0,0,0,0.7); padding: 5px 10px;
    border: 1px solid var(--vox-cyan); opacity: 0; transition: 0.3s;
    pointer-events: none; letter-spacing: 2px;
}
.profile-banner-edit:hover .banner-overlay-text { opacity: 1; }
.profile-banner-edit:hover img { opacity: 0.4; filter: blur(2px); }

/* Аватарка (Центрированная) */
.profile-avatar-container {
    width: 90px; height: 90px;
    position: absolute; 
    bottom: -45px; /* Сдвигаем наполовину вниз */
    left: 50%; transform: translateX(-50%);
    border-radius: 50%;
    border: 3px solid #050505; /* Обводка под цвет фона */
    background: #000;
    overflow: hidden;
    cursor: pointer;
    z-index: 10;
    box-shadow: 0 0 20px rgba(0, 243, 255, 0.2);
    transition: 0.3s;
}
.profile-avatar-container:hover {
    border-color: var(--vox-cyan);
    box-shadow: 0 0 30px var(--vox-cyan);
}
.profile-avatar-container img {
    width: 100%; height: 100%; object-fit: cover;
}

/* Иконка камеры на аватарке (при наведении) */
.avatar-edit-icon {
    position: absolute; top:0; left:0; width:100%; height:100%;
    background: rgba(0,0,0,0.6); display: flex; justify-content: center; align-items: center;
    opacity: 0; transition: 0.2s; font-size: 20px; color: var(--vox-cyan);
}
.profile-avatar-container:hover .avatar-edit-icon { opacity: 1; }

/* Кнопки (Сетка) */
.profile-grid-btns {
    display: grid; 
    grid-template-columns: 1fr 1fr; /* Две колонки */
    gap: 10px;
    margin-top: 10px;
}

.form-label { font-size: 9px; color: #888; margin-bottom: 5px; text-transform: uppercase; letter-spacing: 1px; }

/* Картинка баннера */
.profile-banner-edit img { 
    position: absolute; top:0; left:0; width:100%; height:100%; 
    object-fit: cover; opacity: 0.8; transition: 0.3s;
    /* Скругляем только верхние углы, чтобы не торчали из карточки */
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}
.profile-avatar-edit {
    width: 70px; height: 70px; border-radius: 50%; border: 3px solid #050505;
    position: absolute; bottom: -35px; left: 20px; z-index: 5; background: #000;
}

/* =========================================
   15. VIP VISUAL DOMINANCE (NITRO STYLE)
   ========================================= */

/* 1. АНИМИРОВАННЫЙ НИКНЕЙМ (VIP - ЗОЛОТО) */
.vip-username {
    font-weight: 900 !important;
    /* Симметричный градиент: Золото -> Оранжевый -> Белый -> Оранжевый -> Золото */
    background: linear-gradient(90deg, #ffd700, #ffaa00, #fff, #ffaa00, #ffd700);
    background-size: 200% auto; /* 🔥 Размер 200% для идеального цикла */
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmerText 3s linear infinite;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
    display: inline-block;
}

/* 🔥 ИСПРАВЛЕННАЯ АНИМАЦИЯ (БЕСШОВНАЯ) */
@keyframes shimmerText {
    0% { background-position: 0% center; }
    100% { background-position: 200% center; } /* Двигаем ровно на ширину паттерна */
}

/* 2. АВАТАРКА С ВРАЩАЮЩЕЙСЯ ОБВОДКОЙ */
.vip-avatar-container {
    position: relative;
    display: inline-block;
    padding: 3px; /* Отступ для рамки */
    border-radius: 50%;
    /* Градиентный фон, который будет вращаться */
    background: linear-gradient(45deg, #ffd700, #ff00ff, #00f3ff, #ffd700);
    background-size: 400% 400%;
    animation: rgbBorder 3s ease infinite;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
}

.vip-avatar-container img {
    border-radius: 50%;
    display: block;
    width: 100%;
    height: 100%;
    background: #000; /* Подложка, чтобы аватарка не сливалась */
    position: relative;
    z-index: 2;
}

@keyframes rgbBorder {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Маленький значок короны над аватаркой (опционально) */
.vip-crown {
    position: absolute;
    top: -10px;
    right: -5px;
    font-size: 14px;
    filter: drop-shadow(0 0 5px gold);
    z-index: 5;
    animation: bounceCrown 2s infinite;
}

@keyframes bounceCrown {
    0%, 100% { transform: translateY(0) rotate(10deg); }
    50% { transform: translateY(-3px) rotate(10deg); }
}

/* =========================================
   CALL UI UPGRADES (Timer, Drag, Visualizer)
   ========================================= */

/* 1. ТАЙМЕР */
#callTimer {
    position: absolute; top: 30px; left: 50%; transform: translateX(-50%);
    font-family: var(--font-code); font-weight: bold; font-size: 16px; letter-spacing: 2px;
    color: var(--vox-cyan); background: rgba(0, 0, 0, 0.8);
    padding: 8px 20px; border: 1px solid var(--vox-cyan); border-radius: 20px;
    box-shadow: 0 0 15px rgba(0, 243, 255, 0.2);
    z-index: 10; display: none; /* Скрыт по умолчанию */
}

/* 2. ПЕРЕТАСКИВАЕМОЕ ЛОКАЛЬНОЕ ВИДЕО */
#localVideo {
    /* Добавляем курсор, чтобы было понятно, что можно тащить */
    cursor: grab;
    transition: box-shadow 0.3s, border-color 0.3s; /* Убираем transition для left/top, чтобы не лагало при перетаскивании */
}
#localVideo:active {
    cursor: grabbing;
    border-color: white;
    box-shadow: 0 0 20px white;
}

/* 3. ВИЗУАЛИЗАТОР ГОЛОСА (Эффект на аватарке) */
/* Мы будем менять scale и shadow через JS, но добавим плавность */
.call-avatar-img {
    transition: transform 0.05s ease-out, box-shadow 0.05s ease-out; /* Очень быстрая анимация для реакции на голос */
    will-change: transform, box-shadow;
}

/* Панель управления (как договаривались, делаем капсулой) */
.call-controls {
    position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);
    background: rgba(10, 10, 15, 0.85); backdrop-filter: blur(10px);
    border: 1px solid #333; border-radius: 30px;
    padding: 10px 30px; width: auto; height: auto;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    gap: 15px; transition: 0.3s;
    z-index: 100 !important;
}
.call-controls:hover { border-color: var(--vox-cyan); box-shadow: 0 0 20px rgba(0, 243, 255, 0.15); }

/* Стиль для отображения Био в карточке пользователя */
.uc-bio-display {
    font-size: 11px;
    color: #888;
    font-style: italic;
    text-align: center;
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px solid #333;
    word-wrap: break-word;
    font-family: var(--font-code);
    max-width: 100%;
}

/* 1. Verified Badge (Галочка) */
.verified-badge {
    display: inline-flex;
    color: var(--vox-cyan);
    margin-left: 4px;
    font-size: 12px;
    filter: drop-shadow(0 0 5px var(--vox-cyan));
    vertical-align: middle;
}

/* 2. Admin Badge (В чате) */
.admin-badge {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--alert-red); color: black; 
    font-weight: 900; font-size: 9px; padding: 1px 4px; 
    border-radius: 3px; margin-left: 5px;
    box-shadow: 0 0 8px var(--alert-red); cursor: help;
    letter-spacing: 1px;
}

/* 3. АДМИН НИКНЕЙМ (КРАСНЫЙ) */
.admin-username {
    font-weight: 900 !important;
    /* Симметричный градиент: Красный -> Светло-красный -> Белый -> Светло-красный -> Красный */
    background: linear-gradient(90deg, #ff0000, #ff4444, #fff, #ff4444, #ff0000);
    background-size: 200% auto; /* 🔥 Размер 200% */
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmerText 2s linear infinite; /* Админ мерцает чуть быстрее */
    text-shadow: 0 0 10px rgba(255, 0, 0, 0.5);
    display: inline-block;
}

/* Кнопки в Админ Панели */
.role-btn { font-size:9px; padding:2px 5px; border:1px solid #555; background:black; color:#888; cursor:pointer; }
.role-btn.is-vip { border-color:#ffd700; color:#ffd700; }
.role-btn.is-admin { border-color:var(--alert-red); color:var(--alert-red); background:rgba(50,0,0,0.3); }

.verify-btn { font-size:9px; padding:2px 5px; border:1px solid #333; background:black; color:#444; cursor:pointer; }
.verify-btn.active { border-color:var(--vox-cyan); color:var(--vox-cyan); background:rgba(0,243,255,0.1); }

/* --- СТИЛЬ АВАТАРКИ АДМИНА (КРАСНАЯ УГРОЗА) --- */
.admin-avatar-container {
    position: relative;
    display: inline-block;
    padding: 3px;
    border-radius: 50%;
    /* Красный градиент: Алый -> Темно-красный -> Бордовый */
    background: linear-gradient(45deg, #ff0000, #ff4444, #8a0000, #ff0000);
    background-size: 300% 300%;
    animation: adminBorderPulse 2s infinite linear;
    box-shadow: 0 0 15px rgba(255, 0, 0, 0.6);
}

.admin-avatar-container img {
    border-radius: 50%;
    display: block;
    width: 100%;
    height: 100%;
    background: #000;
    position: relative;
    z-index: 2;
}

/* Вращение красной рамки */
@keyframes adminBorderPulse {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

body.low-effects * {
    animation: none !important;
    transition: none !important;
}
body.low-effects .crt-overlay,
body.low-effects .vignette,
body.low-effects .hypno-spiral {
    display: none !important;
}

.glitch-text,
.tech-card:hover,
.btn-tech:hover {
    will-change: transform;
}

@media (max-width: 480px) {
    .id-card-wrapper {
        width: 90vw;
        height: auto;
        flex-direction: column;
        align-items: center;
        padding: 20px;
    }
    .id-body {
        flex-direction: column;
        align-items: center;
    }
    .id-photo-box {
        margin-bottom: 20px;
    }
    .id-info {
        align-items: center;
    }
}

.glitch-text,
.btn-tech:hover,
.tech-card:hover {
    will-change: transform;
}

/* --- SECRET FOOTER JOKE --- */
.legal-glitch-container {
    position: relative;
    display: inline-block;
    cursor: help; /* Курсор превратится в знак вопроса */
    overflow: hidden;
    min-width: 350px; /* Растягиваем контейнер, чтобы влезла шутка */
    text-align: center; /* Центрируем текст внутри */
}

/* Обычный текст виден по умолчанию */
.legal-text {
    display: inline-block;
    transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

/* Шутка спрятана внизу */
.legal-joke {
    position: absolute;
    top: 100%; /* Спрятано под строкой */
    left: 0;
    width: 100%;
    color: var(--alert-red); /* Красный цвет для дерзости */
    font-weight: bold;
    text-align: center;
    transition: top 0.3s ease;
    opacity: 0;
    font-size: 10px; /* Чуть меньше основного */
    letter-spacing: -0.5px; /* Сплющиваем буквы */
    white-space: nowrap; /* Запрещаем перенос на вторую строку */
}

/* При наведении курсора */
.legal-glitch-container:hover .legal-text {
    transform: translateY(-200%); /* Улетает вверх */
    opacity: 0;
}

.legal-glitch-container:hover .legal-joke {
    top: 0; /* Всплывает на место */
    opacity: 1;
    animation: glitchText 0.3s infinite; /* Трясется как глитч */
}

/* Легкое дрожание текста (эффект VoxTek) */
@keyframes glitchText {
    0% { transform: translate(0, 0); }
    20% { transform: translate(-1px, 1px); }
    40% { transform: translate(1px, -1px); }
    60% { transform: translate(-1px, 0); }
    80% { transform: translate(1px, 1px); }
    100% { transform: translate(0, 0); }
}

/* --- СТИЛЬ ДЛЯ "ЛЕНИВОЙ" ПАСХАЛКИ --- */

.legal-joke-lazy {
    position: absolute;
    top: 100%; /* Спрятано внизу */
    left: 0;
    width: 100%;
    
    /* 🔥 КРУТОЙ ЦВЕТ (ГРАДИЕНТ) */
    background: linear-gradient(90deg, #b000ff, #00f3ff); /* Фиолетовый -> Голубой */
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent; /* Делаем текст прозрачным, чтобы виден был фон */
    
    font-weight: 900;
    font-style: italic; /* Курсив для сарказма */
    text-align: center;
    
    /* Плавное появление без тряски */
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
    opacity: 0;
    font-size: 11px; /* Чуть крупнее, чтобы читалось */
}

/* При наведении на контейнер */
.legal-glitch-container:hover .legal-joke-lazy {
    top: 0; /* Всплывает на место */
    opacity: 1;
    transform: scale(1.05);  /* <-- Можешь раскомментировать, если хочешь легкое увеличение */
}

/* =========================================
   MOBILE MUSIC REACTOR BUTTON (VOXTEK V2)
   ========================================= */

.mobile-only-btn {
    display: none; /* Скрыто на ПК */
    
    /* Позиционирование */
    position: fixed;
    /* Учитываем отступ снизу на iPhone (полоска жестов) */
    bottom: max(30px, env(safe-area-inset-bottom) + 20px);
    right: 20px;
    
    /* Размеры (под SVG кольцо) */
    width: 76px;
    height: 76px;
    padding: 0;
    
    /* СТИЛЬ: Матовое стекло (Glassmorphism) */
    background: rgba(10, 10, 10, 0.6); 
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    
    border-radius: 50%;
    border: none; /* Бордер рисует SVG, здесь он не нужен */
    
    /* Слои и порядок */
    z-index: 10001;
    overflow: visible; /* Чтобы свечение (glow) выходило за рамки */
    
    /* УПРАВЛЕНИЕ И АНИМАЦИИ */
    cursor: pointer;
    touch-action: none; /* ВАЖНО: Отключает скролл страницы при перетаскивании кнопки */
    
    /* Анимируем только тень и масштаб. 
       ВАЖНО: НЕ анимировать left/top, иначе перетаскивание будет "ватным"! */
    transition: transform 0.1s ease, box-shadow 0.3s ease;
    
    /* Тень-свечение */
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.8);
}

/* --- ВНУТРЕННИЙ КОНТЕНТ (ОБЛОЖКА/ИКОНКА) --- */
.btn-inner-content {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    
    /* Центрирование */
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
    background: #050505;
    overflow: hidden; /* Обрезаем картинку по кругу */
    z-index: 2;
    border: 1px solid rgba(0, 243, 255, 0.3);
}

/* Обложка альбома */
#mobileBtnArt {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none; /* Показываем через JS, когда трек играет */
}

/* Иконка и текст (если нет обложки) */
.mobile-only-btn .btn-icon {
    font-size: 24px;
    filter: drop-shadow(0 0 5px var(--vox-cyan));
    z-index: 3;
}

/* --- КРУГОВОЙ ПРОГРЕСС (SVG) --- */
.progress-ring {
    position: absolute;
    top: 0;
    left: 0;
    width: 76px;
    height: 76px;
    transform: rotate(-90deg); /* Начинаем сверху */
    pointer-events: none;
    z-index: 3;
    filter: drop-shadow(0 0 4px var(--vox-cyan));
    
    /* 🔥 ИСПРАВЛЕНИЕ: Скрываем кольцо по умолчанию */
    opacity: 0;
    transition: opacity 0.5s ease; /* Плавное появление */
}

/* 🔥 ПОКАЗЫВАЕМ КОЛЬЦО ТОЛЬКО КОГДА ЕСТЬ КЛАСС .playing */
.mobile-only-btn.playing .progress-ring {
    opacity: 1;
}

.progress-ring__circle {
    /* Длина окружности (2 * pi * 34 ≈ 213) */
    stroke-dasharray: 213;
    stroke-dashoffset: 213;
    transition: stroke-dashoffset 0.1s linear;
    stroke-linecap: round;
}

/* --- ПУЛЬСАЦИЯ (SONAR EFFECT) --- */
.pulse-ring {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 1px solid var(--vox-cyan);
    opacity: 0;
    pointer-events: none;
    z-index: 1;
    
    /* 🔥 ПО УМОЛЧАНИЮ ОТКЛЮЧЕНО */
    animation: none;
}

/* 🔥 ВКЛЮЧАЕМ ТОЛЬКО КОГДА ИГРАЕТ МУЗЫКА */
.mobile-only-btn.playing .pulse-ring {
    animation: sonarWave 2.5s infinite cubic-bezier(0.1, 0, 0.3, 1);
}

@keyframes sonarWave {
    0% {
        width: 100%; height: 100%;
        opacity: 0.8;
        border-width: 2px;
    }
    100% {
        width: 200%; height: 200%;
        opacity: 0;
        border-width: 0px;
    }
}

/* --- МОБИЛЬНАЯ АДАПТАЦИЯ --- */
/* Показываем кнопку только на экранах < 768px */
@media (max-width: 768px) {
    .mobile-only-btn {
        display: block; /* Flex не нужен, так как внутри absolute */
    }
}

/* Эффект нажатия */
.mobile-only-btn:active {
    transform: scale(0.95);
    box-shadow: 0 0 25px var(--vox-cyan-dim);
}

/* =========================================
   CUSTOM CURSOR: TOTAL REPLACEMENT
   ========================================= */

/* 1. Скрываем системный курсор ВЕЗДЕ */
html, body, * {
    cursor: none !important;
}

/* 2. Стили для твоего курсора (Точка) */
.custom-cursor {
    position: fixed;
    top: 0; left: 0;
    width: 6px; height: 6px;
    background: var(--vox-cyan); /* Твой фирменный цвет */
    border-radius: 50%;
    pointer-events: none; /* ВАЖНО: чтобы клики проходили сквозь него */
    z-index: 2147483647; /* Поверх всего, даже поверх модалок */
    transform: translate(-50%, -50%);
    box-shadow: 0 0 10px var(--vox-cyan);
    mix-blend-mode: difference; /* Чтобы был виден на белом фоне */
}

/* 3. Стили для "хвоста" (Круг) */
.custom-cursor-follower {
    position: fixed;
    top: 0; left: 0;
    width: 30px; height: 30px;
    border: 1px solid var(--vox-cyan);
    border-radius: 50%;
    pointer-events: none;
    z-index: 2147483646; /* Чуть ниже точки */
    transform: translate(-50%, -50%);
    transition: width 0.2s, height 0.2s, background 0.2s, opacity 0.2s;
    opacity: 0.6;
}

/* 4. Эффект при наведении на кнопки (HOVER) */
/* Этот класс .hovering мы добавляем через JS */
body.hovering .custom-cursor-follower {
    width: 50px; 
    height: 50px;
    background: rgba(0, 243, 255, 0.1);
    border-color: #fff;
    border-style: dashed;
    animation: rotateCursor 4s infinite linear;
}

/* 5. Эффект при клике (ACTIVE) */
body.clicking .custom-cursor-follower {
    width: 15px; 
    height: 15px;
    background: var(--vox-cyan);
}

/* Анимация вращения */
@keyframes rotateCursor { 
    0% { transform: translate(-50%, -50%) rotate(0deg); } 
    100% { transform: translate(-50%, -50%) rotate(360deg); } 
}

/* --- MESSAGE REACTIONS (styles.css) --- */

/* Контейнер для меню (скрыт по умолчанию) */
.reaction-menu {
    position: absolute;
    top: -35px; /* Появляется СВЕРХУ сообщения */
    right: 10px;
    background: rgba(0, 0, 0, 0.9);
    border: 1px solid var(--vox-cyan);
    padding: 5px;
    border-radius: 20px;
    display: none; /* Скрыто */
    gap: 5px;
    z-index: 100;
    box-shadow: 0 0 10px var(--vox-cyan-dim);
    transition: opacity 0.2s;
}

/* Показываем меню, когда мышка наведена на сообщение */
.message-bubble:hover .reaction-menu {
    display: flex; /* Становится видимым */
    animation: fadeIn 0.2s ease-out;
}

/* Кнопки внутри меню */
.reaction-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 18px;
    transition: transform 0.1s;
}
.reaction-btn:hover {
    transform: scale(1.3);
}

/* Отображение уже поставленных реакций (внизу сообщения) */
.reactions-display {
    display: flex;
    gap: 4px;
    margin-top: 5px;
    font-size: 12px;
    flex-wrap: wrap;
    justify-content: flex-end; /* Сдвигаем вправо */
}

.reaction-pill {
    background: rgba(0, 243, 255, 0.1);
    border: 1px solid var(--vox-cyan-dim);
    border-radius: 10px;
    padding: 2px 6px;
    color: var(--vox-cyan);
    font-family: var(--font-tech);
}