.voice-overlay {
    position: fixed;
    inset: 0;
    z-index: 140;
    display: grid;
    grid-template-rows: auto 1fr auto;
    background: #050505;
    color: #f5f5f5;
    padding: calc(10px + var(--chat-safe-top)) 20px calc(22px + var(--chat-safe-bottom));
}

.voice-overlay[hidden] {
    display: none !important;
}

.voice-overlay__top {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 44px;
}

.voice-overlay__icon-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.72);
}

.voice-overlay__icon-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.voice-overlay__stage {
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 28px;
    transform: translateY(-4vh);
}

.voice-orb {
    position: relative;
    width: min(56vw, 260px);
    height: min(56vw, 260px);
    border-radius: 50%;
    display: grid;
    place-items: center;
    isolation: isolate;
    background: transparent;
    border: 0;
    cursor: pointer;
    --voice-level: 1;
}

.voice-orb__glow {
    position: absolute;
    inset: -18%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(120, 170, 255, 0.28), transparent 68%);
    filter: blur(18px);
    z-index: 0;
    animation: voice-glow 4.8s ease-in-out infinite;
}

.voice-orb__blob {
    position: absolute;
    border-radius: 45% 55% 50% 50%;
    filter: blur(18px);
    opacity: 0.9;
    mix-blend-mode: screen;
    z-index: 1;
}

.voice-orb__blob--a {
    inset: 12% 18% 22% 14%;
    background: radial-gradient(circle at 35% 35%, #e8f1ff, #7aa7ff 45%, #4f6bff 80%);
    animation: voice-blob-a 5.2s ease-in-out infinite;
}

.voice-orb__blob--b {
    inset: 20% 10% 12% 22%;
    background: radial-gradient(circle at 60% 40%, #f7e9ff, #c084fc 40%, #7c3aed 78%);
    animation: voice-blob-b 6.1s ease-in-out infinite;
}

.voice-orb__blob--c {
    inset: 18% 20% 16% 16%;
    background: radial-gradient(circle at 40% 60%, #dffcf8, #5eead4 42%, #22d3ee 75%);
    animation: voice-blob-c 4.4s ease-in-out infinite;
    opacity: 0.75;
}

.voice-orb__core {
    position: relative;
    z-index: 2;
    width: 42%;
    height: 42%;
    border-radius: 50%;
    background:
        radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.2) 38%, transparent 62%),
        radial-gradient(circle at 70% 70%, #93c5fd, #6366f1 55%, #1e1b4b);
    box-shadow:
        0 0 40px rgba(147, 197, 253, 0.35),
        inset 0 0 24px rgba(255, 255, 255, 0.25);
    transform: scale(calc(0.92 + (var(--voice-level) - 1) * 0.2));
    transition: transform 80ms linear;
}

.voice-overlay[data-state="listening"] .voice-orb,
.voice-overlay[data-state="speaking"] .voice-orb {
    animation: voice-breathe 1.8s ease-in-out infinite;
}

.voice-overlay[data-state="speaking"] .voice-orb__blob--a {
    animation-duration: 2.4s;
}

.voice-overlay[data-state="idle"] .voice-orb__blob {
    animation-play-state: paused;
    opacity: 0.55;
}

@keyframes voice-glow {
    0%, 100% { transform: scale(0.96); opacity: 0.7; }
    50% { transform: scale(1.08); opacity: 1; }
}

@keyframes voice-breathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.045); }
}

@keyframes voice-blob-a {
    0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); border-radius: 45% 55% 50% 50%; }
    33% { transform: translate(6%, -4%) rotate(18deg) scale(1.06); border-radius: 52% 48% 44% 56%; }
    66% { transform: translate(-5%, 5%) rotate(-12deg) scale(0.96); border-radius: 42% 58% 55% 45%; }
}

@keyframes voice-blob-b {
    0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
    40% { transform: translate(-7%, 4%) rotate(-22deg) scale(1.08); }
    70% { transform: translate(5%, -6%) rotate(14deg) scale(0.94); }
}

@keyframes voice-blob-c {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(4%, 6%) scale(1.1); }
}

.voice-overlay__status {
    font-size: 17px;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: rgba(255, 255, 255, 0.88);
    text-align: center;
}

.voice-overlay__transcript {
    min-height: 1.35em;
    max-width: 34ch;
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    font-size: 14.5px;
    line-height: 1.45;
}

.voice-overlay__dock {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    padding-bottom: 8px;
}

.voice-overlay__ctrl {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: transform 140ms ease, background 140ms ease;
}

.voice-overlay__ctrl:hover {
    background: rgba(255, 255, 255, 0.16);
}

.voice-overlay__ctrl:active {
    transform: scale(0.96);
}

.voice-overlay__ctrl[aria-pressed="true"] {
    background: rgba(255, 255, 255, 0.22);
}

.voice-overlay__ctrl--end {
    background: #ef4444;
    border-color: transparent;
}

.voice-overlay__ctrl--end:hover {
    background: #f87171;
}

@media (max-width: 640px) {
    .voice-orb {
        width: min(68vw, 220px);
        height: min(68vw, 220px);
    }

    .voice-overlay__ctrl {
        width: 58px;
        height: 58px;
    }
}