/* 
 * Custom styles that augment Tailwind CSS
 */

/* Custom Scrollbar for Dark Mode */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.scrollbar-thin::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.scrollbar-thin::-webkit-scrollbar-track {
    background: transparent;
}
.scrollbar-thin::-webkit-scrollbar-thumb {
    background-color: #1e293b; /* slate-800 */
    border-radius: 20px;
}
.scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background-color: #334155; /* slate-700 */
}

/* Mic pulse animation for chat */
@keyframes pulse-scale {
    0%, 100% { 
        transform: scale(1); 
        box-shadow: 0 10px 25px -5px rgba(239, 68, 68, 0.4), 0 0 0 0px rgba(239, 68, 68, 0.3);
    }
    50% { 
        transform: scale(1.08); 
        box-shadow: 0 20px 30px -5px rgba(239, 68, 68, 0.6), 0 0 0 10px rgba(239, 68, 68, 0);
    }
}
.mic-button.recording {
    animation: pulse-scale 1.2s infinite ease-in-out;
}

/* Voice pulse rings */
@keyframes pulse-ripple {
    0% {
        box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.3), 0 0 0 10px rgba(139, 92, 246, 0.2), 0 0 0 20px rgba(139, 92, 246, 0.1);
    }
    100% {
        box-shadow: 0 0 0 15px rgba(139, 92, 246, 0), 0 0 0 30px rgba(139, 92, 246, 0), 0 0 0 45px rgba(139, 92, 246, 0);
    }
}
.voice-active-ripple {
    animation: pulse-ripple 1.5s infinite linear;
}

/* Floating background blobs */
@keyframes float-blob {
    0%, 100% {
        transform: translate(0px, 0px) scale(1);
    }
    33% {
        transform: translate(30px, -50px) scale(1.15);
    }
    66% {
        transform: translate(-20px, 20px) scale(0.9);
    }
}
.animate-blob {
    animation: float-blob 12s infinite ease-in-out;
}
.animation-delay-2000 {
    animation-delay: 2s;
}
.animation-delay-4000 {
    animation-delay: 4s;
}

/* Slow panning background image animation */
@keyframes bg-pan {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.animate-bg-pan {
    animation: bg-pan 32s ease infinite;
    background-size: 130% 130%;
}