.lx-voice-orb-container {
    width: 100%;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 24px;
}

.lx-voice-orb {
    position:
        relative;
    width: 100px;
    height: 100px;
    display: flex;
    cursor: pointer;
    filter:
        drop-shadow(0 0 4px rgba(255, 255, 255)) drop-shadow(0 0 12px rgba(255, 255,
                255)) drop-shadow(0 0 12px rgba(0, 178, 173, 0.3)) drop-shadow(0 0 5px rgba(0,
                178, 173, 0.3));
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.lx-voice-orb:hover {
    transform: scale(1.2);
    filter: drop-shadow(0 0 4px rgba(255, 255, 255)) drop-shadow(0 0 8px rgba(255, 255, 255)) drop-shadow(0 0 12px rgba(255, 255, 255)) drop-shadow(0 0 10px rgba(0, 178, 173, 0.5)) drop-shadow(0 6px 26px rgba(0, 178, 173, 0.4));
}

.lx-voice-orb:active {
    transform: scale(1);
    filter: drop-shadow(0 0 4px rgba(255, 255, 255)) drop-shadow(0 0 8px rgba(255, 255, 255)) drop-shadow(0 0 12px rgba(255, 255,
                255)) drop-shadow(0 0 10px rgba(0, 178, 173, 0.5)) drop-shadow(0 6px 26px rgba(0, 178, 173, 0.4));
}

.lx-voice-orb--idle .lx-voice-orb__ball {
    background-color: #00b2ad;
    animation-duration: 4.2s;
}

.lx-voice-orb--listening {
    transform: scale(1.1);
    filter: drop-shadow(0 0 8px rgba(0, 166, 244, 0.8)) drop-shadow(0 0 16px rgba(0, 166, 244, 0.6)) drop-shadow(0 0 24px rgba(0, 166,
                244, 0.4));
}

.lx-voice-orb--listening .lx-voice-orb__ball {
    background-color:
        #00a6f4;
    animation-duration: 2s;
}

.lx-voice-orb--processing {
    filter:
        drop-shadow(0 0 8px rgba(43, 127, 255, 0.8)) drop-shadow(0 0 16px rgba(43, 127,
                255, 0.6)) drop-shadow(0 0 24px rgba(43, 127, 255, 0.4));
}

.lx-voice-orb--processing .lx-voice-orb__ball {
    background-color: #2b7fff;
    animation-duration: 1.5s;
}

.lx-voice-orb--processing .lx-voice-orb__rings::before,
.lx-voice-orb--processing .lx-voice-orb__rings::after {
    animation-duration: 5s;
}

.lx-voice-orb--replying {
    transform: scale(1.15);
    filter: drop-shadow(0 0 8px rgba(30, 225, 214, 0.8)) drop-shadow(0 0 16px rgba(30, 225, 214, 0.6)) drop-shadow(0 0 24px rgba(30, 225,
                214, 0.4));
}

.lx-voice-orb--replying .lx-voice-orb__ball {
    background-color:
        #1ee1d6;
    animation-duration: 0.8s;
}

.lx-voice-orb__ball {
    display: flex;
    width:
        120px;
    height: 120px;
    flex-shrink: 0;
    border-radius: 60px;
    background-color:
        #00b2ad;
    filter: url(#gooey);
    animation: lx-circle2 4.2s ease-in-out infinite;
    transition: background-color 0.5s ease, animation-duration 0.5s ease;
}

@keyframes lx-circle2 {
    0% {
        transform: scale(1.5);
    }

    15% {
        transform:
            scale(1.53);
    }

    30% {
        transform: scale(1.48);
    }

    45% {
        transform: scale(1.44);
    }

    60% {
        transform: scale(1.47);
    }

    85% {
        transform: scale(1.53);
    }

    100% {
        transform: scale(1.5);
    }
}

.lx-voice-orb__lines {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 180px;
    height: 180px;
    background-image: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.75) 15%, #00b2ad 50%);
    clip-path: polygon(50% 25%, 65% 30%, 75% 42%, 75% 58%, 65% 70%, 50% 75%, 35% 70%, 26% 58%, 25% 42%, 35% 30%);
    animation: lx-animation-ball 15s both ease;
    pointer-events: none;
}

@keyframes lx-animation-ball {
    2% {
        clip-path: polygon(50% 25%, 50% 0, 75% 42%, 75% 58%, 65% 70%, 50% 75%, 35% 70%,
                26% 58%, 25% 42%, 50% 0);
    }

    4% {
        clip-path: polygon(50% 25%, 70% 0, 75% 42%,
                85% 66%, 65% 100%, 50% 75%, 35% 100%, 15% 65%, 25% 42%, 30% 0);
    }

    6% {
        clip-path: polygon(50% 25%, 50% 15%, 75% 42%, 75% 58%, 65% 70%, 50% 75%, 35% 70%, 26% 58%, 25% 42%, 50% 15%);
    }

    7%,
    59% {
        clip-path: polygon(50% 25%, 100% 12%, 75% 42%, 85% 66%, 65% 70%, 50% 75%, 35% 70%, 15% 65%, 25% 42%, 0 12%);
    }

    9%,
    57% {
        clip-path: polygon(50% 25%, 50% 0, 75% 42%, 75% 58%, 65% 70%, 50% 75%, 35% 70%, 26% 58%, 25% 42%, 50% 0);
    }

    12%,
    55%,
    61% {
        clip-path: polygon(50% 25%, 65% 30%, 75% 42%, 75% 58%, 65% 70%, 50% 75%, 35% 70%, 26% 58%, 25% 42%,
                35% 30%);
    }
}

.lx-voice-orb__rings {
    aspect-ratio: 1;
    border-radius: 50%;
    position: absolute;
    inset: 0;
    perspective: 11rem;
}

.lx-voice-orb__rings:before,
.lx-voice-orb__rings:after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 6px solid transparent;
    background:
        linear-gradient(#00b2ad, #00a6f4, #2b7fff, #1ee1d6, #007a7a) border-box;
    mask:
        linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
}

.lx-voice-orb__rings::before {
    animation: lx-ring180 10s linear infinite;
}

.lx-voice-orb__rings::after {
    animation: lx-ring90 10s linear infinite;
}

@keyframes lx-ring180 {
    0% {
        transform: rotateY(180deg) rotateX(180deg) rotateZ(180deg);
    }

    50% {
        transform: rotateY(360deg) rotateX(360deg) rotateZ(360deg) scale(1.1);
    }

    100% {
        transform: rotateY(540deg) rotateX(540deg) rotateZ(540deg);
    }
}

@keyframes lx-ring90 {
    0% {
        transform:
            rotateY(90deg) rotateX(90deg) rotateZ(90deg);
    }

    50% {
        transform: rotateY(270deg) rotateX(270deg) rotateZ(270deg) scale(1.1);
    }

    100% {
        transform: rotateY(450deg) rotateX(450deg) rotateZ(450deg);
    }
}

@media (max-width: 900px) {
    .lx-voice-orb__rings {
        display: none !important;
    }
}