/* AI Container AI konusmayi bekleme mesajlarındaki resimlerin durumlara gore efeckleri  START */

/*  Dönme efekti */
@keyframes spin-slow {
    0%

{
    transform: rotate(0deg);
}

100% {
    transform: rotate(360deg);
}

}

/* Nefes (puls) efekti */
@keyframes pulse-smooth {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.07);
    }
}

/* Yukarı aşağı titreşim (yazma efekti) */
@keyframes bounce-soft {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-3px);
    }
}

/* Zoom-in-out (kontrol efekti) */
@keyframes zoom-in-out {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.15);
    }
}

/* Fade-in (done) */
@keyframes fade-in {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Ortak ikon sınıfı */
.ai-icon {
    display: inline-block;
    transition: transform 0.3s ease-in-out;
}

/* Özel animasyon sınıfları */
.ai-thinking {
    animation: spin-slow 2s linear infinite;
}

.ai-analyzing {
    animation: pulse-smooth 1.6s ease-in-out infinite;
}

.ai-writing {
    animation: bounce-soft 1s ease-in-out infinite;
}

.ai-checking {
    animation: zoom-in-out 2s ease-in-out infinite;
}

.ai-done {
    animation: fade-in 0.8s ease-out 1;
}


/* AI Container AI konusmayi bekleme mesajlarındaki resimlerin durumlara gore efeckleri  END */




/* AI Container USER konusurken microfon ve cevresindeki dalga efecti  START */


@keyframes lightning-glow {
    0%

{
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
    transform: scale(1);
}

50% {
    box-shadow: 0 0 30px rgba(255, 255, 255, 1);
    transform: scale(1.05);
}

100% {
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
    transform: scale(1);
}

}

.animate-lightning-glow {
    animation: lightning-glow 1.5s infinite alternate ease-in-out;
}

.transition-opacity {
    transition: opacity 0.5s ease-in-out;
}

.opacity-0 {
    opacity: 0;
    visibility: hidden;
}

.opacity-100 {
    opacity: 1;
    visibility: visible;
}



/* Mikrofon ve dalga efektlerini kapsayan konteyner */
.wave-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 120px;
    height: 120px;
}

/* Mikrofon resmi */
#microfonPicture {
    width: 100px;
    height: 100px;
    position: relative;
    z-index: 2;
}

/* Ses dalgaları */
.wave-container span {
    position: absolute;
    width: 130%;
    height: 130%;
    border-radius: 50%;
    border: 2px solid black;
    opacity: 0;
    animation: ripple 2.5s ease-in-out infinite;
}

    /* ✅ Dalga zamanlamasını eşitleme */
    .wave-container span:nth-child(1),
    .wave-container span:nth-child(4) {
        animation-delay: 0s;
    }

    .wave-container span:nth-child(2),
    .wave-container span:nth-child(5) {
        animation-delay: 0.83s;
    }

    .wave-container span:nth-child(3),
    .wave-container span:nth-child(6) {
        animation-delay: 1.66s;
    }



.wave-paused span {
    animation-play-state: paused !important;
}

/* ✅ Dalga Animasyonu */
@keyframes ripple {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.5);
        opacity: 0.6;
    }

    100% {
        transform: scale(2);
        opacity: 0;
    }
}

/* ✅ Sağ tarafta görünecek dalgalar (30° - 120°) */
.wave-container span.right {
    clip-path: polygon(55% 50%, 100% 20%, 100% 80%, 55% 50%);
}

/* ✅ Sol tarafta görünecek dalgalar (240° - 330°) */
.wave-container span.left {
    clip-path: polygon(45% 50%, 0% 20%, 0% 80%, 45% 50%);
}

/* 🌟 MOBİL UYUM (Ekran küçükse) */
@media (max-width: 768px) {
    .wave-container {
        width: 90px;
        height: 90px;
    }

    #microfonPicture {
        width: 75px;
        height: 75px;
    }

    .wave-container span {
        width: 120%;
        height: 120%;
        border: 1.5px solid black; /* Çizgiler mobilde daha ince */
        animation-duration: 2s; /* Mobilde biraz daha hızlı */
    }
}


#ai-speaking-image.glow {
    box-shadow: 0 0 30px 5px rgba(72, 61, 139, 0.8);
    transform: scale(1.2);
    transition: transform 0.5s ease, box-shadow 0.3s ease;
}

/*.ai-circleV2 {
    width: 128px;
    height: 128px;
    border-radius: 9999px;
    background-image: url('/imgV2/aisec3.gif');
    background-size: 200%;
    background-position: center;
    transition: transform 0.4s ease, background-position 0.4s ease, box-shadow 0.3s ease;
    transform: scale(1);
}

    .ai-circleV2.glow {
        box-shadow: 0 0 30px 6px rgba(72, 61, 139, 0.7);
    }*/

.ai-circleV2 {
    width: 128px;
    height: 128px;
    border-radius: 9999px;
    background-image: url('/imgV2/aisec3.gif');
    background-size: 200%;
    background-position: center;
    transition: transform 0.2s ease, background-position 0.2s ease, box-shadow 0.2s ease;
    transform: scale(1);
}

    .ai-circleV2.glow {
        box-shadow: 0 0 30px 6px rgba(72, 61, 139, 0.7);
    }




@keyframes flip-pulse {
    0% {
        transform: scale(1) rotateX(0deg);
    }

    50% {
        transform: scale(1.1) rotateX(20deg);
    }

    100% {
        transform: scale(1) rotateX(0deg);
    }
}

.animate-flip-pulse {
    animation: flip-pulse 0.6s ease-in-out;
}





#ai-infoModal-description::-webkit-scrollbar {
    width: 6px;
}

#ai-infoModal-description::-webkit-scrollbar-thumb {
    background-color: #9ca3af; /* gri */
    border-radius: 3px;
}