/* The indicator lives outside the artwork so it never cuts a line across the ring. */
.assistant-voice-ring .assistant-voice-mic-badge {
    position: absolute !important;
    right: -4px;
    bottom: -2px;
    z-index: 3 !important;
    display: grid !important;
    width: 35px;
    height: 35px;
    place-items: center;
    border: 2px solid rgba(255, 255, 255, .92);
    border-radius: 50%;
    background: linear-gradient(135deg, #235ed8, #c53dd1);
    box-shadow: 0 7px 18px rgba(67, 35, 145, .34);
    color: #fff;
}

.assistant-voice-ring .assistant-voice-mic-badge svg { width: 17px; height: 17px; }

/* A radial audio spectrum follows the outside of the neon ring. */
.assistant-voice-ring .assistant-voice-spikes {
    position: absolute !important;
    inset: -18px !important;
    display: block !important;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
}

.assistant-voice-ring .assistant-voice-spikes i {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 3px;
    height: calc(8px + var(--voice-level, .08) * 30px);
    margin: calc(-74px - var(--voice-level, .08) * 15px) 0 0 -1px;
    border-radius: 99px;
    background: linear-gradient(#9cf4ff, #d76cff);
    box-shadow: 0 0 9px rgba(128, 207, 255, .8);
    transform-origin: 1px calc(74px + var(--voice-level, .08) * 15px);
}

.assistant-voice-ring .assistant-voice-spikes i:nth-child(1) { transform: rotate(0deg); }
.assistant-voice-ring .assistant-voice-spikes i:nth-child(2) { transform: rotate(22.5deg); }
.assistant-voice-ring .assistant-voice-spikes i:nth-child(3) { transform: rotate(45deg); }
.assistant-voice-ring .assistant-voice-spikes i:nth-child(4) { transform: rotate(67.5deg); }
.assistant-voice-ring .assistant-voice-spikes i:nth-child(5) { transform: rotate(90deg); }
.assistant-voice-ring .assistant-voice-spikes i:nth-child(6) { transform: rotate(112.5deg); }
.assistant-voice-ring .assistant-voice-spikes i:nth-child(7) { transform: rotate(135deg); }
.assistant-voice-ring .assistant-voice-spikes i:nth-child(8) { transform: rotate(157.5deg); }
.assistant-voice-ring .assistant-voice-spikes i:nth-child(9) { transform: rotate(180deg); }
.assistant-voice-ring .assistant-voice-spikes i:nth-child(10) { transform: rotate(202.5deg); }
.assistant-voice-ring .assistant-voice-spikes i:nth-child(11) { transform: rotate(225deg); }
.assistant-voice-ring .assistant-voice-spikes i:nth-child(12) { transform: rotate(247.5deg); }
.assistant-voice-ring .assistant-voice-spikes i:nth-child(13) { transform: rotate(270deg); }
.assistant-voice-ring .assistant-voice-spikes i:nth-child(14) { transform: rotate(292.5deg); }
.assistant-voice-ring .assistant-voice-spikes i:nth-child(15) { transform: rotate(315deg); }
.assistant-voice-ring .assistant-voice-spikes i:nth-child(16) { transform: rotate(337.5deg); }

.assistant-voice-mode.is-listening .assistant-voice-spikes,
.assistant-voice-mode.is-thinking .assistant-voice-spikes,
.assistant-voice-mode.is-speaking .assistant-voice-spikes { opacity: 1; }
.assistant-voice-mode.is-listening .assistant-voice-spikes i { animation: athesus-radial-listening .58s ease-in-out infinite alternate; }
.assistant-voice-mode.is-listening .assistant-voice-spikes i:nth-child(3n) { animation-delay: .17s; }
.assistant-voice-mode.is-speaking .assistant-voice-spikes i { animation: athesus-radial-speaking .38s ease-in-out infinite alternate; }
.assistant-voice-mode.is-speaking .assistant-voice-spikes i:nth-child(2n) { animation-delay: .12s; }
@keyframes athesus-radial-listening { to { height: 34px; } }
@keyframes athesus-radial-speaking { to { height: calc(18px + var(--voice-level, .08) * 46px); opacity: .55; } }