.vc-overlay {
    position: fixed; inset: 0; z-index: 10000;
    background: rgba(10, 12, 20, 0.92);
    backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.3s ease;
}
.vc-overlay.vc-visible { opacity: 1; }
.vc-close {
    position: absolute; top: 20px; right: 24px;
    background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12);
    color: #94a3b8; font-size: 20px; width: 40px; height: 40px;
    border-radius: 50%; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s;
}
.vc-close:hover { background: rgba(255,255,255,0.15); color: #fff; }
.vc-content {
    display: flex; flex-direction: column; align-items: center;
    padding: 8vh 40px 6vh; max-width: 500px; width: 100%; height: 100%;
    box-sizing: border-box; gap: 12px;
}
.vc-avatar {
    width: 100px; height: 100px; border-radius: 50%;
    background: linear-gradient(135deg, #1a3a32, #2A6659);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 0 0 rgba(42, 102, 89, 0);
    transition: box-shadow 0.4s;
    flex-shrink: 0;
}
.vc-avatar .material-symbols-outlined { font-size: 48px; color: #5ee6c4; }
.vc-pulse-red { animation: vc-pulse-anim 1.2s ease-in-out infinite; }
.vc-pulse-blue { animation: vc-pulse-blue-anim 1.5s ease-in-out infinite; }
.vc-pulse-green { animation: vc-pulse-green-anim 1s ease-in-out infinite; }
@keyframes vc-pulse-anim {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
    50% { box-shadow: 0 0 0 20px rgba(239, 68, 68, 0); }
}
@keyframes vc-pulse-blue-anim {
    0%, 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.3); }
    50% { box-shadow: 0 0 0 16px rgba(59, 130, 246, 0); }
}
@keyframes vc-pulse-green-anim {
    0%, 100% { box-shadow: 0 0 0 0 rgba(42, 102, 89, 0.4); }
    50% { box-shadow: 0 0 0 18px rgba(42, 102, 89, 0); }
}
.vc-status {
    font-size: 16px; color: #94a3b8; font-weight: 500;
    height: 24px; line-height: 24px; text-align: center;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 100%; flex-shrink: 0; margin-bottom: 8px;
}
.vc-stream-wrap {
    width: 100%; max-height: 0; overflow: hidden;
    transition: max-height 0.3s ease;
    position: relative;
    flex-grow: 1;
    display: flex; flex-direction: column;
}
.vc-stream-wrap.vc-stream-active {
    max-height: 50vh;
}
.vc-stream-wrap::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0;
    height: 20px; z-index: 1; pointer-events: none;
    background: linear-gradient(to bottom, rgba(10,12,20,0.92), transparent);
}
.vc-stream-text {
    width: 100%; max-height: 50vh; overflow-y: auto;
    font-size: 16px; color: #cbd5e1; line-height: 1.6;
    text-align: left; padding: 4px 0;
    scrollbar-width: none; -ms-overflow-style: none;
    flex-grow: 1;
}
.vc-stream-text::-webkit-scrollbar { display: none; }
.vc-error {
    display: none; color: #ef4444; font-size: 14px;
    background: rgba(239, 68, 68, 0.1); padding: 8px 16px;
    border-radius: 8px; text-align: center;
    margin-bottom: 12px;
}
.vc-wave {
    opacity: 0; transition: opacity 0.3s;
    border-radius: 12px; background: rgba(255,255,255,0.03);
    margin-bottom: 20px; flex-shrink: 0;
}
.vc-mic-btn {
    width: 72px; height: 72px; border-radius: 50%;
    background: linear-gradient(135deg, #2A6659, #3d8b7a);
    border: none; color: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.25s; box-shadow: 0 4px 20px rgba(42, 102, 89, 0.3);
    flex-shrink: 0; margin-top: auto;
}
.vc-mic-btn:hover { transform: scale(1.08); box-shadow: 0 6px 28px rgba(42, 102, 89, 0.5); }
.vc-mic-btn.vc-active {
    background: linear-gradient(135deg, #dc2626, #ef4444);
    box-shadow: 0 4px 24px rgba(239, 68, 68, 0.4);
    animation: vc-mic-pulse 1s ease-in-out infinite;
}
@keyframes vc-mic-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}
.vc-mic-btn.vc-stop-mode {
    background: linear-gradient(135deg, #c2410c, #ea580c);
    box-shadow: 0 4px 24px rgba(234, 88, 12, 0.4);
}

/* Кнопка в Hero */
.hdb-hero-btn.voice-chat-btn .material-symbols-outlined {
    color: #5ee6c4;
}
.hdb-hero-btn.voice-chat-btn:hover {
    border-color: rgba(42, 102, 89, 0.5);
    background: rgba(42, 102, 89, 0.15);
}

@media (max-width: 480px) {
    .vc-content { padding: 24px 16px; }
    .vc-avatar { width: 80px; height: 80px; }
    .vc-avatar .material-symbols-outlined { font-size: 38px; }
    .vc-mic-btn { width: 64px; height: 64px; }
}