@import "tailwindcss";

@custom-variant dark (&:where(.dark, .dark *));

@layer components {
    .msg {
        @apply rounded-lg mb-5 px-3 py-2 dark:bg-gray-800 max-w-[75%];
    }

    .msg-model {
        @apply self-start bg-blue-200 dark:bg-slate-800;
    }

    .msg-user {
        @apply self-end bg-slate-200 dark:bg-zinc-800;
    }

    .primary-button {
        @apply bg-blue-300 dark:bg-gray-800 rounded-lg p-3;
    }
}

body {
    background-color: transparent !important;
    margin: 0;
}

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