/* Chat conversation list — entrance, add, remove animations */

.chat-list-anim-item {
    opacity: 0;
    transform: translateY(0.5rem);
    will-change: opacity, transform;
}

.chat-list-anim-item.chat-list-anim-enter-active {
    animation: chat-list-enter 320ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: var(--chat-list-delay, 0ms);
}

.chat-list-anim-item.chat-list-anim-add-active {
    animation: chat-list-add 360ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.chat-list-anim-item.chat-list-anim-remove-active {
    animation: chat-list-remove 280ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
    pointer-events: none;
}

@keyframes chat-list-enter {
    from {
        opacity: 0;
        transform: translateY(0.5rem);
    }

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

@keyframes chat-list-add {
    0% {
        opacity: 0;
        transform: translateY(0.75rem) scale(0.98);
    }

    60% {
        opacity: 1;
        transform: translateY(-0.125rem) scale(1);
    }

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

@keyframes chat-list-remove {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    to {
        opacity: 0;
        transform: translateY(-0.375rem) scale(0.98);
    }
}

@media (prefers-reduced-motion: reduce) {
    .chat-list-anim-item,
    .chat-list-anim-item.chat-list-anim-enter-active,
    .chat-list-anim-item.chat-list-anim-add-active,
    .chat-list-anim-item.chat-list-anim-remove-active {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
        transition: none !important;
    }
}