@import "tailwindcss";
@import "./theme-vars.css";

@layer components {
    /* Base Immersive Layout */
    .immersive-bg {
        @apply min-h-screen bg-rpg-bg text-slate-200 selection:bg-rpg-accent selection:text-black;
        background-image: 
            radial-gradient(circle at 50% 50%, rgba(245, 158, 11, 0.05) 0%, transparent 50%),
            linear-gradient(to bottom, #050507, #0a0a0f);
    }

    /* Cards & Containers */
    .rpg-card {
        @apply bg-white/5 backdrop-blur-md border border-white/10 rounded-2xl overflow-hidden transition-all duration-300;
    }

    .rpg-card-hover {
        @apply hover:bg-white/10 hover:border-white/20 hover:shadow-[0_0_30px_rgba(245,158,11,0.1)];
    }

    /* Typography */
    .text-glow {
        text-shadow: 0 0 15px rgba(245, 158, 11, 0.5);
    }

    /* Buttons */
    .btn-rpg-primary {
        @apply px-8 py-4 bg-rpg-accent hover:bg-amber-400 text-black font-bold uppercase tracking-[0.2em] rounded-full 
               transition-all transform hover:scale-105 active:scale-95 shadow-[0_0_20px_rgba(245,158,11,0.3)];
    }

    .btn-rpg-secondary {
        @apply px-8 py-4 bg-white/5 hover:bg-white/10 text-white font-bold uppercase tracking-[0.2em] rounded-full 
               border border-white/10 transition-all;
    }

    /* Voice Wave Animation */
    .voice-wave-container {
        @apply flex items-center justify-center gap-1 h-12;
    }

    .voice-bar {
        @apply w-1 bg-rpg-accent rounded-full animate-pulse;
    }

    .voice-bar:nth-child(1) { height: 40%; animation-delay: 0.1s; }
    .voice-bar:nth-child(2) { height: 80%; animation-delay: 0.2s; }
    .voice-bar:nth-child(3) { height: 60%; animation-delay: 0.3s; }
    .voice-bar:nth-child(4) { height: 100%; animation-delay: 0.4s; }
    .voice-bar:nth-child(5) { height: 70%; animation-delay: 0.5s; }

    /* Genre Tags */
    .tag-cyberpunk { @apply bg-cyan-500/20 text-cyan-400 border border-cyan-500/30 px-3 py-1 rounded-full text-xs font-bold uppercase; }
    .tag-fantasy { @apply bg-emerald-500/20 text-emerald-400 border border-emerald-500/30 px-3 py-1 rounded-full text-xs font-bold uppercase; }
    .tag-horror { @apply bg-red-500/20 text-red-400 border border-red-500/30 px-3 py-1 rounded-full text-xs font-bold uppercase; }

    /* Original Cyberpunk styles kept for compatibility but prefixed */
    .cyber-card { @apply bg-slate-900 border border-cyan-500/30 shadow-[0_0_15px_rgba(34,211,238,0.1)] rounded-xl overflow-hidden; }
    .message-mj { @apply p-4 rounded-2xl rounded-tl-none text-sm leading-relaxed border bg-slate-950/80 border-cyber-cyan/30 text-cyan-50 shadow-[0_0_20px_rgba(34,211,238,0.05)] relative; }
    .message-player { @apply p-4 rounded-2xl rounded-tr-none text-sm leading-relaxed border bg-slate-950/80 border-cyber-pink/30 text-pink-50 shadow-[0_0_20px_rgba(217,70,239,0.05)] text-right; }
    .cyber-label { @apply text-[10px] font-black uppercase tracking-[0.2em] mb-1; }
    .mj-thinking { @apply self-start flex items-center gap-2 mb-6 px-4 py-3 rounded-2xl rounded-tl-none border border-cyber-cyan/20 bg-slate-950/60 text-cyber-cyan text-xs italic animate-pulse; }

    /* Custom Scrollbar */
    .custom-scrollbar::-webkit-scrollbar {
        width: 4px;
    }
    .custom-scrollbar::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.05);
        border-radius: 10px;
    }
    .custom-scrollbar::-webkit-scrollbar-thumb {
        background: rgba(34, 211, 238, 0.3);
        border-radius: 10px;
    }
    .custom-scrollbar::-webkit-scrollbar-thumb:hover {
        background: rgba(34, 211, 238, 0.5);
    }
}

/* Ajout des styles pour limiter la hauteur du conteneur de chat et permettre le défilement */
#chat-container {
    /* max-height: 600px;  Exemple : définir une hauteur maximale fixe */
    /* Ou, pour s'adapter à la fenêtre, en laissant de la place pour le header et le footer */
    max-height: calc(100vh - 200px); /* Ajustez 200px si nécessaire pour laisser de la place au header et footer */
    overflow-y: auto; /* Ajoute une barre de défilement verticale si le contenu dépasse max-height */
    scroll-behavior: smooth; /* Pour un défilement fluide lors des mises à jour */
}