﻿@keyframes lightsaber-glow {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 0 5px #fff) drop-shadow(0 0 10px #00aaff);
    }

    50% {
        transform: scale(1.05);
        filter: drop-shadow(0 0 15px #fff) drop-shadow(0 0 30px #00aaff);
    }
}

.pomi-toggler img {
    animation: lightsaber-glow 3s ease-in-out infinite;
    transition: transform 0.2s ease;
}

/* --- Enerji Dalgası Efekti --- */

/* --- Nöral Enerji ve Bilgi Aurası Efekti --- */

/* Toggler yine konumlandırma merkezimiz */
.pomi-toggler {
    position: relative;
    /* Efektlerin buton sınırlarının dışına taşabilmesi için */
    overflow: visible;
}

    /* 
  Katman 1: "Bilgi Aurası" (::before)
  Pomi'nin etrafında yayılan yumuşak ve geniş ışık halkası.
*/
    .pomi-toggler::before {
        content: '';
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
        /* Yumuşak bir aura için radyal gradient kullanıyoruz */
        width: 150px;
        height: 150px;
        background: radial-gradient(circle, rgba(0, 170, 255, 0.4) 0%, rgba(0, 170, 255, 0) 60% );
        border-radius: 50%;
        /* Geçişi çok yumuşak ve yavaş yapıyoruz ki ufuk açılsın */
        transition: all 1s ease-out;
    }

    /* 
  Katman 2: "Nöral Parçacıklar" (::after)
  box-shadow hilesiyle oluşturulan çok sayıda küçük parçacık.
*/
    .pomi-toggler::after {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        /* Parçacıkları oluşturacak olan minicik, görünmez bir temel */
        width: 2px;
        height: 2px;
        background: transparent;
        opacity: 0; /* Animasyon başlayınca görünür olacak */
        /* İŞTE SİHİR BURADA: Her bir virgül yeni bir parçacık demek! */
        box-shadow: 5vw 5vh 2px rgba(0, 200, 255, 0.8), 1vw -5vh 1px rgba(200, 255, 255, 0.9), -3vw 8vh 2px rgba(0, 170, 255, 0.7), -6vw -2vh 1px rgba(255, 255, 255, 1), 8vw -1vh 2px rgba(0, 170, 255, 0.8), -2vw -8vh 2px rgba(0, 200, 255, 0.9), 4vw 9vh 1px rgba(200, 255, 255, 0.8), -8vw 3vh 2px rgba(0, 170, 255, 0.7), 2vw -3vh 2px rgba(255, 255, 255, 1), 7vw 1vh 1px rgba(0, 200, 255, 0.9), -5vw -6vh 2px rgba(0, 170, 255, 0.8);
    }


    /* --- HOVER (FARE ÜZERİNDEYKEN) DURUMLARI --- */

    /* Fare üzerine gelince hem Aura hem de Parçacıklar tetiklensin */
    .pomi-toggler:hover::before {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.5);
    }

    .pomi-toggler:hover::after {
        /* "neuralFlow" animasyonunu başlatıyoruz */
        animation: neuralFlow 4s ease-in-out infinite;
    }


/* --- ANİMASYON TANIMI --- */
/* Nöral parçacıkların yukarı süzülme animasyonu */
@keyframes neuralFlow {
    0% {
        opacity: 0;
        transform: translateY(0);
    }

    20% {
        opacity: 1; /* Yavaşça belirsinler */
    }

    80% {
        opacity: 1; /* Yolun çoğunda görünür kalsınlar */
    }

    100% {
        opacity: 0;
        /* Yavaşça yukarı süzülüp kaybolsunlar */
        transform: translateY(-15vh);
    }
}


/* --- Sohbet İçi Pomi Canlandırma --- */

/* 
  Aşama 1: Bot mesajının tamamının yumuşak bir şekilde belirmesi için.
  Bu, bütün mesaj balonuna uygulanır.
*/
@keyframes message-entry {
    from {
        opacity: 0;
        transform: translateY(15px); /* Aşağıdan yukarı hafifçe süzülsün */
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animasyonu botun her yeni mesajına uygula */
.pomi-chatbox .chat.bot {
    /* Animasyon: adı, süresi, zamanlama fonksiyonu */
    animation: message-entry 0.5s ease-out;
}


/* 
  Aşama 2: "Gariban" Pomi ikonuna sürekli ve zarif bir canlılık katmak.
*/
@keyframes pomi-subtle-glow {
    0%, 100% {
        /* Çok daha hafif bir parlama */
        filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 6px rgba(0, 170, 255, 0.7));
    }

    50% {
        /* Parıltının en canlı anı (yine de abartısız) */
        filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 10px rgba(0, 170, 255, 0.8));
    }
}

/* Sohbetin İÇİNDEKİ Pomi ikonunu seç ve sürekli parlamayı uygula */
.pomi-chatbox .chat.bot .pomi-icon {
    /* Animasyon: adı, süresi (daha yavaş), zamanlama ve tekrar */
    animation: pomi-subtle-glow 4s ease-in-out infinite;
}