/* Prevent Chrome autofill from changing the dark input background */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px #071a31 inset !important;
    -webkit-text-fill-color: #ffffff !important;
    caret-color: #ffffff;
    transition: background-color 9999s ease-in-out 0s;
}

.background-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    z-index: 0;
    pointer-events: none;
}

/* =========================================================
   ASTRA VOICE AI
   MIC + WAVEFORM ANIMATION ONLY
========================================================= */


/* ---------------------------------------------------------
   1. CONTINUOUS WAVEFORM
   Energy travels from center → outer edge
--------------------------------------------------------- */

.voice-wave-bar {
    transform-origin: center;
    animation:
        astraWaveFlow 1.15s ease-in-out infinite,
        astraWaveGlow 1.15s ease-in-out infinite;

    animation-delay:
        calc(var(--wave-order) * 42ms);
}


@keyframes astraWaveFlow {

    0%,
    100% {
        transform: scaleY(0.42);
        opacity: 0.45;
    }

    25% {
        transform: scaleY(0.72);
        opacity: 0.72;
    }

    50% {
        transform: scaleY(1.18);
        opacity: 1;
    }

    75% {
        transform: scaleY(0.68);
        opacity: 0.7;
    }
}


@keyframes astraWaveGlow {

    0%,
    100% {
        filter:
            brightness(0.8)
            drop-shadow(0 0 2px rgba(15, 135, 255, 0.5));
    }

    50% {
        filter:
            brightness(1.6)
            drop-shadow(0 0 8px rgba(0, 218, 255, 0.95));
    }
}



/* ---------------------------------------------------------
   NORMAL ORB TRANSITIONS
--------------------------------------------------------- */

.voice-main-orb,
.voice-aura,
.voice-orb-inner,
.voice-orb-border,
.voice-orb-core,
.voice-mic {
    transition:
        box-shadow 0.4s ease,
        filter 0.4s ease,
        background 0.4s ease,
        border-color 0.4s ease,
        transform 0.4s ease;
}



/* ---------------------------------------------------------
   SPEAKER RINGS
   Hidden while microphone is inactive
--------------------------------------------------------- */

.voice-speaker-ring {
    position: absolute;

    width: 212px;
    height: 212px;

    border-radius: 9999px;

    border: 1px solid rgba(0, 221, 255, 0.5);

    opacity: 0;
    pointer-events: none;

    transform: scale(1);
}



/* ---------------------------------------------------------
   2. ACTIVE MIC
   Pink / purple energy mode
--------------------------------------------------------- */

.voice-vibe.is-active .voice-main-orb {
    animation:
        astraSpeakerBass 0.82s ease-in-out infinite,
        astraActiveGlow 1.4s ease-in-out infinite;

    box-shadow:
        0 0 24px rgba(255, 63, 221, 0.9),
        0 0 48px rgba(149, 55, 255, 0.75),
        0 0 85px rgba(91, 46, 255, 0.42);
}


.voice-vibe.is-active .voice-aura {
    background:
        radial-gradient(
            circle,
            rgba(255, 57, 211, 0.34) 0%,
            rgba(145, 54, 255, 0.26) 35%,
            rgba(66, 51, 255, 0.13) 60%,
            transparent 75%
        );

    animation: astraAuraPulse 1.15s ease-in-out infinite;

    filter: blur(23px);
}



/* Inner neon ring */

.voice-vibe.is-active .voice-orb-border {
    border-color: rgba(226, 100, 255, 0.95);

    box-shadow:
        0 0 16px rgba(255, 73, 229, 0.9),
        0 0 32px rgba(148, 76, 255, 0.5),
        inset 0 0 22px rgba(154, 67, 255, 0.35);

    animation: astraInnerRingPulse 0.95s ease-in-out infinite;
}



/* Dark center gets subtle purple energy */

.voice-vibe.is-active .voice-orb-core {
    background:
        radial-gradient(
            circle at 50% 42%,
            rgba(196, 65, 255, 0.35),
            rgba(60, 40, 157, 0.2) 36%,
            rgba(1, 15, 35, 0.94) 68%
        );
}



/* Mic glow */

.voice-vibe.is-active .voice-mic {
    animation: astraMicPulse 0.82s ease-in-out infinite;

    box-shadow:
        0 0 20px rgba(255, 78, 224, 0.45),
        0 0 42px rgba(111, 77, 255, 0.45);
}



/* ---------------------------------------------------------
   3. SPEAKER-LIKE BASS MOVEMENT
--------------------------------------------------------- */

@keyframes astraSpeakerBass {

    0%,
    100% {
        transform: scale(1);
    }

    12% {
        transform: scale(1.018);
    }

    24% {
        transform: scale(0.992);
    }

    38% {
        transform: scale(1.032);
    }

    52% {
        transform: scale(0.995);
    }

    70% {
        transform: scale(1.018);
    }
}



/* Active neon breathing */

@keyframes astraActiveGlow {

    0%,
    100% {
        box-shadow:
            0 0 20px rgba(255, 63, 221, 0.6),
            0 0 42px rgba(149, 55, 255, 0.5),
            0 0 70px rgba(91, 46, 255, 0.25);
    }

    50% {
        box-shadow:
            0 0 31px rgba(255, 73, 226, 1),
            0 0 68px rgba(159, 70, 255, 0.9),
            0 0 110px rgba(91, 46, 255, 0.55);
    }
}



/* Aura breathing */

@keyframes astraAuraPulse {

    0%,
    100% {
        transform: scale(0.9);
        opacity: 0.55;
    }

    50% {
        transform: scale(1.27);
        opacity: 1;
    }
}



/* Inner ring vibration */

@keyframes astraInnerRingPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.035);
    }
}



/* Mic itself moves slightly like audio vibration */

@keyframes astraMicPulse {

    0%,
    100% {
        transform: scale(1);
    }

    25% {
        transform: scale(1.04);
    }

    45% {
        transform: scale(0.98);
    }

    70% {
        transform: scale(1.055);
    }
}



/* ---------------------------------------------------------
   EXPANDING SPEAKER / SOUND RINGS
--------------------------------------------------------- */

.voice-vibe.is-active .voice-speaker-ring {
    animation: astraSpeakerRing 2.1s ease-out infinite;
}


.voice-vibe.is-active .voice-speaker-ring-one {
    animation-delay: 0s;
}


.voice-vibe.is-active .voice-speaker-ring-two {
    animation-delay: 0.7s;
}


.voice-vibe.is-active .voice-speaker-ring-three {
    animation-delay: 1.4s;
}


@keyframes astraSpeakerRing {

    0% {
        transform: scale(0.94);
        opacity: 0;
        border-color: rgba(0, 226, 255, 0.7);
    }

    12% {
        opacity: 0.75;
    }

    45% {
        border-color: rgba(183, 74, 255, 0.55);
    }

    75% {
        border-color: rgba(255, 72, 218, 0.25);
    }

    100% {
        transform: scale(1.52);
        opacity: 0;
        border-color: rgba(255, 72, 218, 0);
    }
}



/* ---------------------------------------------------------
   ACTIVE WAVEFORM GETS MORE ENERGY
--------------------------------------------------------- */

.voice-vibe.is-active .voice-wave-bar {
    animation:
        astraActiveWave 0.72s ease-in-out infinite,
        astraActiveWaveGlow 0.72s ease-in-out infinite;

    animation-delay:
        calc(var(--wave-order) * 32ms);
}


@keyframes astraActiveWave {

    0%,
    100% {
        transform: scaleY(0.38);
    }

    22% {
        transform: scaleY(0.92);
    }

    42% {
        transform: scaleY(1.38);
    }

    62% {
        transform: scaleY(0.72);
    }

    80% {
        transform: scaleY(1.08);
    }
}


@keyframes astraActiveWaveGlow {

    0%,
    100% {
        background-color: #147fff;

        box-shadow:
            0 0 5px rgba(22, 121, 255, 0.8);
    }

    45% {
        background-color: #12e7ff;

        box-shadow:
            0 0 11px rgba(18, 231, 255, 1);
    }

    70% {
        background-color: #a14cff;

        box-shadow:
            0 0 10px rgba(161, 76, 255, 0.95);
    }
}



/* ---------------------------------------------------------
   ACCESSIBILITY
--------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    .voice-wave-bar,
    .voice-main-orb,
    .voice-aura,
    .voice-orb-border,
    .voice-mic,
    .voice-speaker-ring {
        animation: none !important;
    }

}

/* =========================================================
   ASTRAI-IDLE-VOICE-ANIMATION-R2H
   Keep the voice visual still while disconnected/inactive.
   Active orb + waveform animation remains controlled by
   .voice-vibe.is-active rules above.
========================================================= */
.voice-wave-bar {
    animation: none;
    transform: scaleY(0.42);
    opacity: 0.45;
    filter: brightness(0.8) drop-shadow(0 0 2px rgba(15, 135, 255, 0.5));
}


/* =========================================================
   ASTRAI-PAGE-VOICE-GLOW-R2M
   Page-specific orb/glow colors. Animation timing and mic
   functionality are unchanged; only presentation is themed.
========================================================= */
.voice-vibe {
    --voice-primary-rgb: 0, 208, 255;
    --voice-secondary-rgb: 33, 89, 255;
}

.voice-vibe .voice-main-orb {
    box-shadow:
        0 0 20px rgba(var(--voice-primary-rgb), .70),
        0 0 42px rgba(var(--voice-secondary-rgb), .38) !important;
}

.voice-vibe .voice-orb-core {
    background: radial-gradient(
        circle at 50% 42%,
        rgba(var(--voice-primary-rgb), .28),
        rgba(1, 15, 35, .90) 62%
    ) !important;
}

.voice-vibe .voice-mic {
    box-shadow: 0 0 30px rgba(var(--voice-primary-rgb), .24) !important;
}

.voice-vibe .voice-mic svg {
    filter: drop-shadow(0 0 10px rgba(var(--voice-primary-rgb), .85)) !important;
}

.voice-vibe .voice-speaker-ring {
    border-color: rgba(var(--voice-primary-rgb), .50);
}

.voice-vibe.is-active .voice-main-orb {
    animation:
        astraSpeakerBass .82s ease-in-out infinite,
        astraThemeActiveGlow 1.4s ease-in-out infinite !important;
}

.voice-vibe.is-active .voice-aura {
    background: radial-gradient(
        circle,
        rgba(var(--voice-primary-rgb), .34) 0%,
        rgba(var(--voice-secondary-rgb), .26) 35%,
        rgba(var(--voice-secondary-rgb), .13) 60%,
        transparent 75%
    ) !important;
}

.voice-vibe.is-active .voice-orb-border {
    border-color: rgba(var(--voice-primary-rgb), .95) !important;
    box-shadow:
        0 0 16px rgba(var(--voice-primary-rgb), .90),
        0 0 32px rgba(var(--voice-secondary-rgb), .50),
        inset 0 0 22px rgba(var(--voice-primary-rgb), .35) !important;
}

.voice-vibe.is-active .voice-orb-core {
    background: radial-gradient(
        circle at 50% 42%,
        rgba(var(--voice-primary-rgb), .35),
        rgba(var(--voice-secondary-rgb), .20) 36%,
        rgba(1, 15, 35, .94) 68%
    ) !important;
}

.voice-vibe.is-active .voice-mic {
    box-shadow:
        0 0 20px rgba(var(--voice-primary-rgb), .45),
        0 0 42px rgba(var(--voice-secondary-rgb), .45) !important;
}

.voice-vibe.is-active .voice-speaker-ring {
    animation-name: astraThemeSpeakerRing !important;
}

@keyframes astraThemeActiveGlow {
    0%, 100% {
        box-shadow:
            0 0 20px rgba(var(--voice-primary-rgb), .60),
            0 0 42px rgba(var(--voice-secondary-rgb), .50),
            0 0 70px rgba(var(--voice-secondary-rgb), .25);
    }
    50% {
        box-shadow:
            0 0 31px rgba(var(--voice-primary-rgb), 1),
            0 0 68px rgba(var(--voice-secondary-rgb), .90),
            0 0 110px rgba(var(--voice-secondary-rgb), .55);
    }
}

@keyframes astraThemeSpeakerRing {
    0% {
        transform: scale(.94);
        opacity: 0;
        border-color: rgba(var(--voice-primary-rgb), .70);
    }
    12% {
        opacity: .75;
    }
    45% {
        border-color: rgba(var(--voice-secondary-rgb), .55);
    }
    75% {
        border-color: rgba(var(--voice-primary-rgb), .25);
    }
    100% {
        transform: scale(1.52);
        opacity: 0;
        border-color: rgba(var(--voice-primary-rgb), 0);
    }
}

/* ASTRAI-OTO-WAVE-MOTION-PAGE-COLOR-R2R START
   Animation mechanics live here in shared CSS.
   Wave COLOR is intentionally NOT set here.
   The four OTO Blade pages own background/shadow colors on .voice-wave-bar.
   AI Creation is not marked data-wave-color-source="page" and is unchanged. */
.voice-vibe[data-wave-color-source="page"].is-active .voice-wave-bar {
    animation: astraActiveWave .72s ease-in-out infinite !important;
    animation-delay: calc(var(--wave-order) * 32ms) !important;
}
/* ASTRAI-OTO-WAVE-MOTION-PAGE-COLOR-R2R END */