/* ---------------------------------------------------------
   1. மைக் பட்டன் அனிமேஷன் (Microphone Pulse Effect)
   மைக் ஆன் ஆகும்போது (listening class சேரும்போது) இது வேலை செய்யும்.
--------------------------------------------------------- */
.listening {
    background-color: #ef4444 !important; /* Red Color (Tailwind red-500) */
    color: white;
    animation: pulse 1.5s infinite;
}

/* வட்ட வடிவில் விரிவடையும் அலை (Ripple) எஃபெக்ட் */
@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
    }
    70% {
        box-shadow: 0 0 0 20px rgba(239, 68, 68, 0); /* 20px தூரம் விரியும் */
    }
    100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
    }
}

/* ---------------------------------------------------------
   2. பில் ஐட்டம் தோன்றும் அனிமேஷன் (Fade In)
   புதிய பொருளைச் சேர்க்கும்போது அது மெதுவாகத் தோன்றும்.
--------------------------------------------------------- */
.animate-fade-in {
    animation: fadeIn 0.4s ease-out forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px); /* கீழே இருந்து மேலே வரும் */
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---------------------------------------------------------
   3. Toast Notification (கீழே/மேலே வரும் செய்தி)
   செய்தி வரும்போது மெதுவாகத் தெரியவும், மறையவும்.
--------------------------------------------------------- */
.custom-toast {
    transition: opacity 0.5s ease-in-out;
    opacity: 1;
    z-index: 9999; /* எல்லாவற்றிற்கும் மேலே தெரிய வேண்டும் */
}

/* ---------------------------------------------------------
   4. Scrollbar Styling (Optional - அழகாக இருக்க)
   மொபைலில் ஸ்க்ரால் பார் மெலிதாகத் தெரிய.
--------------------------------------------------------- */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1; 
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1; 
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8; 
}