.recordPulse {
		width: 30px;
    height: 30px; 
    border-radius: 50%; 
    background: transparent; 
    border: 2px solid transparent; 
    position: relative; 
    cursor: pointer; 
    display: inline-grid;
    place-items: center; 
    padding: 0; 
    box-sizing: border-box;
    transition: background 0.2s;
}


.recordPulse::before {
    content: '';
    width: 30px;
    height: 30px;
    background-size: 30px 30px;
    background-repeat: no-repeat;
    grid-area: 1 / 1; 
    pointer-events: none; 
}

.recordPulse .dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #dc3545;
    display: inline-block;
    margin: 0 2px 2px 0;
    grid-area: 1 / 1; 
}

/* Pulsating animation definition */
@keyframes recordPulseAnimation {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.2;
        transform: scale(0.75);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Apply animation ONLY when recording is active */
.recordPulse.is-recording .dot {
    animation: recordPulseAnimation 1.2s infinite ease-in-out;
}

/* Outward explosion animation definition */
@keyframes recordStopAnimation {
    0% {
        background: #dc3545; /* Starts red */
        transform: scale(1);
        opacity: 1;
    }
    50% {
        background: #ffffff; /* Turns white at peak expansion */
        transform: scale(1.6); /* Expands past the border size slightly */
        opacity: 0.8;
    }
    100% {
        background: #dc3545; /* Snaps cleanly back to the original red */
        transform: scale(1);
        opacity: 1;
    }
}

/* Apply the quick stop flash animation */
.recordPulse.is-stopping .dot {
    animation: recordStopAnimation 0.4s ease-out forwards;
}