/* public/chat.css */

@keyframes slideInFromLeft {
    from {
        transform: translateX(-15px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInFromRight {
    from {
        transform: translateX(15px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Apply animations to chat messages */
.chat-message {
    animation-duration: 0.4s;
    animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
}

.chat-message.received {
    animation-name: slideInFromLeft;
}

.chat-message.sent {
    animation-name: slideInFromRight;
}