@font-face {
            font-family: 'Monotype Corsiva';
            src: local('Monotype Corsiva');
        }
        @font-face {
            font-family: 'Futura Bk BT';
            src: local('Futura Bk BT'), local('Futura');
        }
        .font-script { font-family: 'Monotype Corsiva', cursive; }
        .font-futura { font-family: 'Futura Bk BT', 'Futura', sans-serif; }

        /* --- EFECTO DORADO PARA EL MENÚ FULLSCREEN --- */

/* Estilo base para los círculos del menú (opcional si ya los tienes, para asegurar la transición) */
#fullscreen-menu .flex-shrink-0 {
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Efecto HOVER: Cambia el fondo del círculo a dorado y el texto a dorado */
#fullscreen-menu a:hover .flex-shrink-0 {
    background-color: #d4af37 !important; /* Dorado */
    border-color: #d4af37 !important;
    transform: scale(1.05); /* Un pequeño aumento visual */
}

#fullscreen-menu a:hover span {
    color: #d4af37 !important; /* Texto dorado */
}

/* Si usas iconos de Material Symbols, forzar el color dentro del círculo */
#fullscreen-menu a:hover .material-symbols-outlined {
    color: #d4af37 !important; /* El icono se mantiene blanco sobre el fondo dorado */
}

/* Ajuste para Modo Oscuro en el menú de Apps */
html.dark #fullscreen-menu a:hover .flex-shrink-0 {
    background-color: #8f6d32 !important; /* Dorado más oscuro para modo dark */
}

/* Animación suave para cuando aparecen los mensajes */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
    animation: fadeIn 0.4s ease-out forwards;
}

/* (Opcional) Asegura que el scrollbar se vea elegante como en tu diseño */
.scrollbar-thin::-webkit-scrollbar {
    width: 6px;
}
.scrollbar-thin::-webkit-scrollbar-track {
    background: transparent;
}
.scrollbar-thin::-webkit-scrollbar-thumb {
    background-color: rgba(218, 165, 32, 0.5); /* Color dorado aproximado */
    border-radius: 20px;
}

/* Burbujas dinámicas que inyecta el JS */
.animate-fade-in {
    animation: fadeIn 0.4s ease-out forwards;
}

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

/* Scrollbar personalizado para el contenedor de mensajes */
#chat-messages::-webkit-scrollbar {
    width: 5px;
}

#chat-messages::-webkit-scrollbar-thumb {
    background: #d4af37; /* Tu dorado */
    border-radius: 10px;
}

/* Evitar que el textarea crezca infinitamente */
#chat-input {
    max-height: 150px;
    overflow-y: auto !important;
}