@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
body {
    font-family: 'Inter', sans-serif;
    @apply bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white;
}
.animate-fade-in {
    animation: fadeIn 0.3s ease-in;
}
.animate-slide-in {
    animation: slideIn 0.3s ease-in;
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes slideIn {
    from { transform: translateY(10px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
.card {
    @apply bg-white dark:bg-gray-700 rounded-lg shadow-md p-4 mb-4 hover:shadow-lg hover:scale-105 transition-all;
}
.progress-bar {
    @apply bg-blue-500 h-4 rounded transition-all duration-300;
}
.toast {
    @apply fixed bottom-4 right-4 p-4 rounded shadow-lg text-white animate-fade-in;
}
.context-menu {
    @apply absolute bg-white dark:bg-gray-800 shadow-lg rounded p-2 z-50;
    transform: scale(0);
    opacity: 0;
    transform-origin: top left;
    transition: transform 0.2s ease-out, opacity 0.2s ease-out;
}
.context-menu.show {
    transform: scale(1);
    opacity: 1;
}
.deleted-message {
    @apply text-gray-500 italic animate-fade-in;
}
.message-deleting {
    @apply opacity-0 translate-y-[-10px] transition-all duration-300;
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes slideUp {
    from { transform: translateY(0); opacity: 1; }
    to { transform: translateY(-10px); opacity: 0; }
}
@keyframes scaleIn {
    from { transform: scale(0); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
@keyframes scaleOut {
    from { transform: scale(1); opacity: 1; }
    to { transform: scale(0); opacity: 0; }
}
.image-preview {
    @apply max-w-xs my-2 cursor-pointer;
}
.image-modal {
    @apply fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50;
}
.blur-sm {
    filter: blur(5px);
}
.audio-player {
    @apply w-full max-w-xs my-2;
}
.recording {
    @apply animate-pulse text-red-600;
}