/* ═══════════════════════════════════════════════
   Voice Mentor — Animated Orb & UI Styles
   ═══════════════════════════════════════════════ */

/* Base Orb */
.vm-orb {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Connecting State — Pulsing gradient */
.vm-orb-connecting {
    background: radial-gradient(circle at 40% 40%, #a78bfa, #6d28d9);
    animation: vm-orb-pulse 1.5s ease-in-out infinite;
    box-shadow: 0 0 40px rgba(124, 92, 252, 0.3);
}

.vm-orb-connecting::after {
    content: '🎤';
    font-size: 36px;
    animation: vm-orb-mic-bounce 1.5s ease-in-out infinite;
}

/* Active Call State — Vibrant animated rings */
.vm-orb-active {
    background: radial-gradient(circle at 35% 35%, #c4b5fd, #7c3aed, #4c1d95);
    animation: vm-orb-glow 2s ease-in-out infinite;
    box-shadow:
        0 0 30px rgba(124, 92, 252, 0.4),
        0 0 60px rgba(124, 92, 252, 0.2),
        0 0 90px rgba(124, 92, 252, 0.1);
}

.vm-orb-active::before,
.vm-orb-active::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    border: 2px solid rgba(167, 139, 250, 0.3);
    animation: vm-ring-expand 2s ease-out infinite;
}

.vm-orb-active::before {
    width: 140%;
    height: 140%;
    animation-delay: 0s;
}

.vm-orb-active::after {
    width: 170%;
    height: 170%;
    animation-delay: 0.6s;
}

/* Idle / End State */
.vm-orb-idle {
    background: radial-gradient(circle at 40% 40%, #d4d4d8, #a1a1aa);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

.vm-orb-idle::after {
    content: '✓';
    font-size: 28px;
    color: white;
    font-weight: 800;
}

/* ═══════════════════════════════════════════════
   Animations
   ═══════════════════════════════════════════════ */

@keyframes vm-orb-pulse {
    0%, 100% { transform: scale(1); opacity: 0.9; }
    50% { transform: scale(1.08); opacity: 1; }
}

@keyframes vm-orb-mic-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

@keyframes vm-orb-glow {
    0%, 100% {
        transform: scale(1);
        box-shadow:
            0 0 30px rgba(124, 92, 252, 0.4),
            0 0 60px rgba(124, 92, 252, 0.2);
    }
    50% {
        transform: scale(1.04);
        box-shadow:
            0 0 40px rgba(124, 92, 252, 0.6),
            0 0 80px rgba(124, 92, 252, 0.3),
            0 0 120px rgba(124, 92, 252, 0.15);
    }
}

@keyframes vm-ring-expand {
    0% { transform: scale(0.8); opacity: 0.6; }
    100% { transform: scale(1.2); opacity: 0; }
}

@keyframes vm-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* ═══════════════════════════════════════════════
   Phone-Call Connecting State
   ═══════════════════════════════════════════════ */

/* Calling Orb — green phone gradient */
.vm-orb-calling {
    background: radial-gradient(circle at 40% 40%, #6ee7b7, #059669, #047857);
    animation: vm-calling-pulse 1.8s ease-in-out infinite;
    box-shadow: 0 0 40px rgba(5, 150, 105, 0.35);
}

.vm-orb-calling::after {
    content: '📞';
    font-size: 36px;
    animation: vm-orb-mic-bounce 1.8s ease-in-out infinite;
}

@keyframes vm-calling-pulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 30px rgba(5, 150, 105, 0.3); }
    50% { transform: scale(1.06); box-shadow: 0 0 50px rgba(5, 150, 105, 0.5), 0 0 80px rgba(5, 150, 105, 0.2); }
}

/* Ring Waves — concentric expanding circles */
.vm-ring-waves {
    position: relative;
    width: 120px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vm-ring-wave {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(5, 150, 105, 0.4);
    animation: vm-wave-expand 1.8s ease-out infinite;
}

@keyframes vm-wave-expand {
    0% { transform: scale(1); opacity: 0.7; }
    100% { transform: scale(6); opacity: 0; }
}