@property --dash-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

.alert-dot,
.reason-alert-dot,
.review-alert-dot {
    position: relative;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    background: #ef4444;
    border-radius: 50%;
    box-shadow: 0 0 0 rgba(239, 68, 68, 0.45);
    animation: alertPulse 1.5s infinite;
}

.alert-dot::before,
.reason-alert-dot::before,
.review-alert-dot::before {
    content: "";
    position: absolute;
    inset: -9px;
    border-radius: 50%;
    border: 2px solid rgba(239, 68, 68, 0.35);
    animation: alertRing 1.5s infinite;
}

@keyframes alertPulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.45);
    }

    70% {
        transform: scale(1.08);
        box-shadow: 0 0 0 14px rgba(239, 68, 68, 0);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
    }
}

@keyframes alertRing {
    0% {
        transform: scale(0.7);
        opacity: 0.8;
    }

    100% {
        transform: scale(1.8);
        opacity: 0;
    }
}