/* Message highlight animation when navigating to a message from a reply */
@keyframes highlight-pulse {
    0% {
        box-shadow: 0 0 0 2px rgba(34, 197, 94, 0);
        /* green-500 with 0 opacity */
    }

    20% {
        box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.7);
        /* green-500 with 0.7 opacity */
    }

    40% {
        box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.3);
        /* green-500 with 0.3 opacity */
    }

    60% {
        box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.7);
        /* green-500 with 0.7 opacity */
    }

    80% {
        box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.3);
        /* green-500 with 0.3 opacity */
    }

    100% {
        box-shadow: 0 0 0 2px rgba(34, 197, 94, 0);
        /* green-500 with 0 opacity */
    }
}

.message-highlight {
    animation: highlight-pulse 3s ease-in-out;
    position: relative;
    z-index: 1;
    border-radius: 0.375rem;
    /* Match the border-radius of the message bubbles */
}

/* Dark mode version */
.dark .message-highlight {
    animation-name: highlight-pulse-dark;
}

@keyframes highlight-pulse-dark {
    0% {
        box-shadow: 0 0 0 2px rgba(74, 222, 128, 0);
        /* green-400 with 0 opacity - slightly lighter for dark mode */
    }

    20% {
        box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.8);
        /* green-400 with 0.8 opacity */
    }

    40% {
        box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.4);
        /* green-400 with 0.4 opacity */
    }

    60% {
        box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.8);
        /* green-400 with 0.8 opacity */
    }

    80% {
        box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.4);
        /* green-400 with 0.4 opacity */
    }

    100% {
        box-shadow: 0 0 0 2px rgba(74, 222, 128, 0);
        /* green-400 with 0 opacity */
    }
}