/* ===== ANIMATIONS ===== */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

/* ── AI typing indicator — shimmer skeleton ── */
/* ── Typing indicator: ECG heartbeat pulse ── */
.typing-bubble {
    padding: 9px 12px !important;
    width: auto !important;
    min-width: unset !important;
    max-width: unset !important;
    display: inline-flex !important;
    align-items: center;
}

.typing-ecg {
    display: block;
    overflow: hidden;
}

.typing-ecg__scroll {
    animation: ecgScroll 1.6s linear infinite;
}

.typing-ecg__line {
    fill: none;
    stroke: var(--primary, #000585);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 3px rgba(0, 5, 133, 0.55));
}

@keyframes ecgScroll {
    from { transform: translateX(0px); }
    to   { transform: translateX(-90px); }
}

/* Avatar pulse ring while loading */
.typing-icon-pulse {
    position: relative;
}

.typing-icon-pulse::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 2px solid var(--primary);
    opacity: 0;
    animation: avatarRing 1.6s ease-in-out infinite;
}

@keyframes avatarRing {
    0%, 100% { opacity: 0;    transform: scale(1);   }
    50%       { opacity: 0.3; transform: scale(1.12); }
}

/* Dark mode */
.dark-mode .typing-ecg__line {
    stroke: rgba(147, 168, 255, 0.95);
    filter: drop-shadow(0 0 4px rgba(147, 168, 255, 0.6));
}

.dark-mode .typing-icon-pulse::after {
    border-color: rgba(168, 188, 255, 0.6);
}