/* ================================================
   ilanvan.com Van Kedisi Chatbot CSS
================================================ */

:root {
    --chatbot-color: #ff6b35;
    --chatbot-radius: 16px;
    --chatbot-shadow: 0 8px 32px rgba(0,0,0,0.18);
    --chatbot-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.ilanvan-chatbot {
    position: fixed;
    z-index: 999999;
    font-family: var(--chatbot-font);
    display: inline-flex;
    flex-direction: column;
    align-items: center;
}

/* ── 9 Pozisyon ── */
.ilanvan-chatbot.position-top-left      { top: 24px;    left: 24px;  }
.ilanvan-chatbot.position-top-center    { top: 24px;    left: 50%;   transform: translateX(-50%); }
.ilanvan-chatbot.position-top-right     { top: 24px;    right: 24px; }
.ilanvan-chatbot.position-left-center   { top: 50%;     left: 24px;  transform: translateY(-50%); }
.ilanvan-chatbot.position-center        { top: 50%;     left: 50%;   transform: translate(-50%,-50%); }
.ilanvan-chatbot.position-right-center  { top: 50%;     right: 24px; transform: translateY(-50%); }
.ilanvan-chatbot.position-bottom-left   { bottom: 24px; left: 24px;  }
.ilanvan-chatbot.position-bottom-center { bottom: 24px; left: 50%;   transform: translateX(-50%); }
.ilanvan-chatbot.position-bottom-right  { bottom: 24px; right: 24px; }
/* Sürüklenmiş konumdaysa CSS transform'u sıfırla */
.ilanvan-chatbot.is-dragged             { transform: none !important; }

/* Toggle Butonu */
.chatbot-toggle {
    width: var(--toggle-size, 64px);
    height: var(--toggle-size, 64px);
    border-radius: 50%;
    background: var(--chatbot-color);
    border: none;
    cursor: grab;
    box-shadow: var(--chatbot-shadow);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: width 0.2s, height 0.2s, transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    padding: 4px;
    flex-shrink: 0;
}

.chatbot-toggle:hover {
    transform: scale(1.08);
    box-shadow: 0 12px 40px rgba(0,0,0,0.25);
}

.chatbot-toggle.active {
    transform: scale(0.9);
}

.chatbot-avatar-icon {
    width: 80%;
    height: 80%;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.cat-svg-large {
    width: 80%;
    height: 80%;
}

.chatbot-notification-dot {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 12px;
    height: 12px;
    background: #ff3b3b;
    border-radius: 50%;
    border: 2px solid white;
    animation: pulse-dot 2s infinite;
}

.chatbot-notification-dot.hidden {
    display: none;
}

@keyframes pulse-dot {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

/* Chat Penceresi */
.chatbot-window {
    position: absolute;
    width: 360px;
    height: 520px;
    background: #fff;
    border-radius: var(--chatbot-radius);
    box-shadow: var(--chatbot-shadow);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform-origin: bottom right;
}

.chatbot-window.hidden {
    opacity: 0;
    transform: scale(0.8) translateY(20px);
    pointer-events: none;
}

.chatbot-window.visible {
    opacity: 1;
    transform: scale(1) translateY(0);
}

/* Pozisyona göre pencere konumu */
/* ── Alt pozisyonlar: pencere yukarı açılır ── */
.position-bottom-right  .chatbot-window,
.position-bottom-center .chatbot-window,
.position-bottom-left   .chatbot-window { bottom: 76px; transform-origin: bottom center; }
.position-bottom-right  .chatbot-window { right: 0;  left: auto; transform-origin: bottom right; }
.position-bottom-left   .chatbot-window { left: 0;   right: auto; transform-origin: bottom left; }
.position-bottom-center .chatbot-window { left: 50%; transform: translateX(-50%); transform-origin: bottom center; }

/* ── Üst pozisyonlar: pencere aşağı açılır ── */
.position-top-right  .chatbot-window,
.position-top-center .chatbot-window,
.position-top-left   .chatbot-window { top: 76px; transform-origin: top center; }
.position-top-right  .chatbot-window { right: 0;  left: auto; transform-origin: top right; }
.position-top-left   .chatbot-window { left: 0;   right: auto; transform-origin: top left; }
.position-top-center .chatbot-window { left: 50%; transform: translateX(-50%); transform-origin: top center; }

/* ── Orta-kenar pozisyonlar ── */
.position-left-center  .chatbot-window { left: 76px;  top: 50%; transform: translateY(-50%); transform-origin: left center; }
.position-right-center .chatbot-window { right: 76px; top: 50%; left: auto; transform: translateY(-50%); transform-origin: right center; }
.position-center       .chatbot-window { left: 50%;   top: 50%; transform: translate(-50%,-50%); transform-origin: center; }

/* Kapalı/açık animasyon override'ları */
.position-bottom-center .chatbot-window.hidden { transform: translateX(-50%) scale(0.85) translateY(16px); }
.position-bottom-center .chatbot-window.visible{ transform: translateX(-50%) scale(1) translateY(0); }
.position-top-center    .chatbot-window.hidden { transform: translateX(-50%) scale(0.85) translateY(-16px); }
.position-top-center    .chatbot-window.visible{ transform: translateX(-50%) scale(1) translateY(0); }
.position-left-center   .chatbot-window.hidden { transform: translateY(-50%) scale(0.85); }
.position-left-center   .chatbot-window.visible{ transform: translateY(-50%) scale(1); }
.position-right-center  .chatbot-window.hidden { transform: translateY(-50%) scale(0.85); }
.position-right-center  .chatbot-window.visible{ transform: translateY(-50%) scale(1); }
.position-center        .chatbot-window.hidden { transform: translate(-50%,-50%) scale(0.85); }
.position-center        .chatbot-window.visible{ transform: translate(-50%,-50%) scale(1); }

/* Sürüklenmiş durumdaki widget için pencere konumu (toggle altında açılır) */
.ilanvan-chatbot.is-dragged .chatbot-window { bottom: 76px; top: auto; left: 0; right: auto; transform-origin: bottom left; }

/* Header */
.chatbot-header {
    background: var(--chatbot-color);
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.chatbot-header-avatar {
    width: 40px;
    height: 40px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.cat-svg-small {
    width: 34px;
    height: 34px;
}

.chatbot-header-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.chatbot-header-name {
    color: white;
    font-weight: 700;
    font-size: 15px;
}

.chatbot-header-status {
    color: rgba(255,255,255,0.85);
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.status-dot {
    width: 7px;
    height: 7px;
    background: #4cff91;
    border-radius: 50%;
    display: inline-block;
    animation: status-blink 2s infinite;
}

@keyframes status-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.chatbot-close {
    background: rgba(255,255,255,0.2);
    border: none;
    color: white;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    flex-shrink: 0;
}

.chatbot-close:hover {
    background: rgba(255,255,255,0.35);
}

/* Mesajlar */
.chatbot-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: #f8f9fa;
    scroll-behavior: smooth;
}

.chatbot-messages::-webkit-scrollbar { width: 4px; }
.chatbot-messages::-webkit-scrollbar-track { background: transparent; }
.chatbot-messages::-webkit-scrollbar-thumb { background: #ddd; border-radius: 4px; }

.chatbot-message {
    display: flex;
    flex-direction: column;
    max-width: 85%;
    animation: fadeInUp 0.25s ease;
}

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

.chatbot-message.bot { align-self: flex-start; }
.chatbot-message.user { align-self: flex-end; }

.chatbot-message-bubble {
    padding: 10px 14px;
    border-radius: 18px;
    font-size: 14px;
    line-height: 1.5;
    word-wrap: break-word;
}

.chatbot-message.bot .chatbot-message-bubble {
    background: white;
    color: #333;
    border-radius: 4px 18px 18px 18px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

.chatbot-message.user .chatbot-message-bubble {
    background: var(--chatbot-color);
    color: white;
    border-radius: 18px 18px 4px 18px;
}

.chatbot-message-time {
    font-size: 11px;
    color: #aaa;
    margin-top: 3px;
    padding: 0 4px;
}

.chatbot-message.user .chatbot-message-time {
    text-align: right;
}

/* Yazıyor animasyonu */
.chatbot-typing {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 12px 14px;
    background: white;
    border-radius: 4px 18px 18px 18px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    width: fit-content;
    align-self: flex-start;
}

.chatbot-typing span {
    width: 7px;
    height: 7px;
    background: #ccc;
    border-radius: 50%;
    animation: typing-bounce 1.2s infinite;
}

.chatbot-typing span:nth-child(2) { animation-delay: 0.2s; }
.chatbot-typing span:nth-child(3) { animation-delay: 0.4s; }

@keyframes typing-bounce {
    0%, 80%, 100% { transform: translateY(0); background: #ccc; }
    40% { transform: translateY(-6px); background: var(--chatbot-color); }
}

/* Input Alanı */
.chatbot-input-area {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    background: white;
    border-top: 1px solid #eee;
    flex-shrink: 0;
}

#ilanvan-chatbot-input {
    flex: 1;
    border: 1px solid #e0e0e0;
    border-radius: 24px;
    padding: 10px 16px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s;
    font-family: var(--chatbot-font);
    background: #f8f9fa;
    color: #333;
}

#ilanvan-chatbot-input:focus {
    border-color: var(--chatbot-color);
    background: white;
}

.chatbot-send-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--chatbot-color);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s, background 0.2s;
    flex-shrink: 0;
}

.chatbot-send-btn:hover {
    transform: scale(1.08);
    filter: brightness(1.1);
}

.chatbot-send-btn svg {
    width: 18px;
    height: 18px;
    stroke: white;
}

.chatbot-voice-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: transparent;
    border: 1.5px solid #e0e0e0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

.chatbot-voice-btn:hover,
.chatbot-voice-btn.recording {
    background: #ff3b3b;
    border-color: #ff3b3b;
}

.chatbot-voice-btn svg {
    width: 16px;
    height: 16px;
    stroke: #666;
}

.chatbot-voice-btn:hover svg,
.chatbot-voice-btn.recording svg {
    stroke: white;
}

/* Mobil */
/* ═══════════════════════════════════════════════
   TABLET (768px ve altı)
═══════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* Pencereyi parent'tan kopar, ekrana göre sabitle */
    .ilanvan-chatbot[class*="position-"] .chatbot-window {
        position: fixed !important;
        left: 50% !important;
        top: 50% !important;
        bottom: auto !important;
        right: auto !important;
        transform: translate(-50%, -50%) !important;
        width: var(--chatbot-tablet-width, calc(100vw - 32px)) !important;
        height: var(--chatbot-tablet-height, 65vh) !important;
        max-height: var(--chatbot-tablet-maxheight, 600px) !important;
        margin: 0 !important;
    }

    /* Kapalıyken */
    .ilanvan-chatbot[class*="position-"] .chatbot-window.hidden {
        opacity: 0 !important;
        transform: translate(-50%, -50%) scale(0.93) !important;
        pointer-events: none !important;
    }

    /* Açıkken */
    .ilanvan-chatbot[class*="position-"] .chatbot-window.visible {
        opacity: 1 !important;
        transform: translate(-50%, -50%) scale(1) !important;
    }
}

/* ═══════════════════════════════════════════════
   MOBİL (480px ve altı)
═══════════════════════════════════════════════ */
@media (max-width: 480px) {

    /* Tüm pozisyon overridelarını sıfırla - toggle sol altta sabit, nav bar'ın üzerinde */
    .ilanvan-chatbot[class*="position-"] {
        position: fixed !important;
        bottom: 75px !important;
        left: 20px !important;
        top: auto !important;
        right: auto !important;
        transform: none !important;
    }

    /* Sürüklenmiş pozisyonu mobilde yoksay */
    .ilanvan-chatbot.is-dragged {
        bottom: 75px !important;
        left: 20px !important;
        top: auto !important;
        right: auto !important;
    }

    /* Pencereyi parent'tan kopar, tam ekranın ortasına sabitle */
    .ilanvan-chatbot[class*="position-"] .chatbot-window {
        position: fixed !important;
        left: 50% !important;
        top: 50% !important;
        bottom: auto !important;
        right: auto !important;
        transform: translate(-50%, -50%) !important;
        width: calc(100vw - 24px) !important;
        height: var(--chatbot-mobile-height, 82vh) !important;
        max-height: var(--chatbot-mobile-maxheight, none) !important;
        border-radius: var(--chatbot-mobile-radius, 16px) !important;
        margin: 0 !important;
    }

    /* Kapalıyken */
    .ilanvan-chatbot[class*="position-"] .chatbot-window.hidden {
        opacity: 0 !important;
        transform: translate(-50%, -50%) scale(0.93) !important;
        pointer-events: none !important;
    }

    /* Açıkken */
    .ilanvan-chatbot[class*="position-"] .chatbot-window.visible {
        opacity: 1 !important;
        transform: translate(-50%, -50%) scale(1) !important;
    }

    /* Klavye açıkken yüksekliği küçült */
    .ilanvan-chatbot.keyboard-open .chatbot-window {
        height: var(--chatbot-keyboard-height, 55vh) !important;
    }

    /* Yazı ve input daha büyük - parmakla kolay kullanım */
    #ilanvan-chatbot-input {
        font-size: max(var(--chatbot-msg-font, 15px), 16px) !important;
        padding: 12px 16px !important;
    }
    .chatbot-send-btn,
    .chatbot-voice-btn {
        width: 44px !important;
        height: 44px !important;
    }
    .chatbot-header {
        padding: 12px 14px !important;
    }
    .chatbot-messages {
        padding: 12px !important;
    }
}

/* ================================================
   Vaniş v2.0 - Ek Stiller
================================================ */

/* Header actions (ses + kapat buton grubu) */
.chatbot-header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

/* Ses butonu */
.chatbot-sound-btn {
    background: rgba(255,255,255,0.2);
    border: none;
    color: white;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    flex-shrink: 0;
}
.chatbot-sound-btn:hover { background: rgba(255,255,255,0.35); }
.chatbot-sound-btn.muted  { background: rgba(255,59,59,0.4); }
.chatbot-sound-btn svg    { width: 14px; height: 14px; stroke: white; }

/* Mesaj limiti bar */
.chatbot-limit-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    background: #fff8f5;
    border-top: 1px solid #ffe5d8;
    flex-shrink: 0;
}
.chatbot-limit-bar.limit-empty {
    background: #fff0f0;
    border-top-color: #ffc0c0;
}
.limit-label {
    font-size: 11px;
    color: #ff6b35;
    font-weight: 500;
    white-space: nowrap;
}
.limit-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #ddd;
    transition: background 0.3s, transform 0.3s;
    display: inline-block;
}
.limit-dot.active {
    background: var(--chatbot-color);
    transform: scale(1.1);
}

/* Limit aşımı mesajı */
.chatbot-message.bot.limit-msg .chatbot-message-bubble {
    background: #fff3cd;
    color: #856404;
    border: 1px solid #ffc107;
    border-radius: 4px 18px 18px 18px;
}

/* Sesli giriş butonu — her zaman görünür */
.chatbot-voice-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: transparent;
    border: 1.5px solid #e0e0e0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}
.chatbot-voice-btn:hover,
.chatbot-voice-btn.recording {
    background: #ff3b3b;
    border-color: #ff3b3b;
}
.chatbot-voice-btn svg { width: 16px; height: 16px; stroke: #666; }
.chatbot-voice-btn:hover svg,
.chatbot-voice-btn.recording svg { stroke: white; }

.chatbot-toggle:active { cursor: grabbing; }

/* ═══════════════════════════════════════════════
   VANİŞ ANİMASYONLARI
═══════════════════════════════════════════════ */

/* Neon halka animasyonları artık .chatbot-toggle-ring üzerinde */

/* Zıplama animasyonu - wrapper'a taşındı, yazı da birlikte hareket eder */
.chatbot-toggle {
    animation: none;
}

@keyframes icon-float {
    0%   { transform: translateY(0px) rotate(0deg); }
    15%  { transform: translateY(-9px) rotate(-3deg); }
    30%  { transform: translateY(0px) rotate(0deg); }
    45%  { transform: translateY(-5px) rotate(2deg); }
    60%  { transform: translateY(0px) rotate(0deg); }
    100% { transform: translateY(0px) rotate(0deg); }
}

/* Göz kırpma - SVG elementlerine */
.cat-svg-large .eye-left,
.cat-svg-large .eye-right {
    animation: eye-blink 4s ease-in-out infinite;
    transform-box: fill-box;
    transform-origin: center 50%;
}
.cat-svg-large .eye-right {
    animation-delay: 0.08s;
}

@keyframes eye-blink {
    0%, 42%, 58%, 100% { transform: scaleY(1); }
    50%                 { transform: scaleY(0.05); }
}

/* Kulak titreme */
.cat-svg-large .ear-left {
    transform-origin: 25px 30px;
    animation: ear-twitch 5s ease-in-out infinite;
}
.cat-svg-large .ear-right {
    transform-origin: 75px 30px;
    animation: ear-twitch 5s ease-in-out infinite;
    animation-delay: 0.3s;
}

@keyframes ear-twitch {
    0%, 85%, 100% { transform: rotate(0deg); }
    88%           { transform: rotate(-8deg); }
    92%           { transform: rotate(5deg); }
    96%           { transform: rotate(-3deg); }
}

/* Bıyık titreme */
.cat-svg-large .whisker {
    animation: whisker-move 6s ease-in-out infinite;
    transform-origin: center;
}

@keyframes whisker-move {
    0%, 90%, 100% { transform: scaleX(1); }
    95%           { transform: scaleX(1.08); }
}

/* Header'daki küçük kedi de hafif pulse yapsın */
.cat-svg-small {
    animation: small-pulse 3s ease-in-out infinite;
}

@keyframes small-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.08); }
}

/* ═══════════════════════════════════════════════
   YENİ ÖZELLİKLER: Font, Logo, Arka Plan, Kenarlık
═══════════════════════════════════════════════ */

/* Yazı büyüklüğü - CSS değişkeni ile */
.chatbot-message-bubble {
    font-size: var(--chatbot-msg-font, 15px) !important;
}
#ilanvan-chatbot-input {
    font-size: var(--chatbot-msg-font, 15px) !important;
}
.chatbot-message-time {
    font-size: calc(var(--chatbot-msg-font, 15px) - 4px) !important;
}

/* Sohbet kutusu köşe yuvarlaklığı */
.chatbot-window {
    border-radius: var(--chatbot-radius, 16px) !important;
}

/* Arka plan video */
.chatbot-bg-video {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: 0;
    border-radius: inherit;
}

/* Arka plan overlay */
.chatbot-bg-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 1;
    border-radius: inherit;
    pointer-events: none;
}

/* İçerik video/overlay'in üstünde kalmalı */
.chatbot-window > *:not(.chatbot-bg-video):not(.chatbot-bg-overlay) {
    position: relative;
    z-index: 2;
}

/* Video/resim arka planlarda mesaj alanı şeffaf */
.chatbot-window[style*="background-image"] .chatbot-messages,
.chatbot-window[style*="background: transparent"] .chatbot-messages {
    background: transparent;
}

/* Firma Logosu - header'da */
.chatbot-header-logo {
    height: 32px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.chatbot-header-logo img {
    height: 32px;
    width: auto;
    max-width: 80px;
    object-fit: contain;
    border-radius: 4px;
}

/* ═══════════════════════════════════════════════
   TOGGLE WRAPPER & İSİM ETİKETİ
═══════════════════════════════════════════════ */

/* Toggle wrapper - butonu ve etiketi saran kapsayıcı */
.chatbot-toggle-wrapper {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    cursor: grab;
    position: relative;
    animation: icon-float 3s ease-in-out infinite;
}
.chatbot-toggle-wrapper:active { cursor: grabbing; }
.chatbot-toggle-wrapper.active-chat {
    animation: none;
}

/* Wrapper içindeki toggle butonundan eski sürükle imlecini kaldır */
.chatbot-toggle-wrapper .chatbot-toggle {
    cursor: inherit;
    position: relative;
    z-index: 2;
}

/* ── Neon Dönen Halkalar ── */
.chatbot-toggle-ring {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Dış dönen neon halka */
.chatbot-toggle-ring::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        transparent 0%, rgba(0,191,255,0) 3%,
        rgba(0,191,255,1) 14%, rgba(180,240,255,1) 20%,
        rgba(0,191,255,0) 30%, transparent 50%,
        rgba(255,107,53,0) 54%, rgba(255,107,53,1) 66%,
        rgba(255,215,130,1) 72%, rgba(255,107,53,0) 82%,
        transparent 100%
    );
    animation: neon-ring-spin 3.5s linear infinite;
    z-index: 0;
    pointer-events: none;
}

/* İç ters dönen ince halka */
.chatbot-toggle-ring::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: conic-gradient(
        from 120deg,
        transparent 0%, rgba(0,191,255,.4) 10%,
        transparent 25%, transparent 60%,
        rgba(255,107,53,.35) 72%, transparent 87%
    );
    animation: neon-ring-spin 6s linear infinite reverse;
    z-index: 0;
    pointer-events: none;
}

@keyframes neon-ring-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Glow aura */
.chatbot-toggle {
    filter: drop-shadow(0 0 0px rgba(0,191,255,0));
}
.chatbot-toggle-ring .chatbot-toggle {
    box-shadow:
        0 0 16px rgba(0,191,255,0.45),
        0 0 32px rgba(0,191,255,0.2),
        0 0 48px rgba(0,191,255,0.08) !important;
    animation: neon-glow-pulse 3s ease-in-out infinite;
}

@keyframes neon-glow-pulse {
    0%,100% {
        box-shadow:
            0 0 16px rgba(0,191,255,0.45),
            0 0 32px rgba(0,191,255,0.2),
            0 0 48px rgba(0,191,255,0.08);
    }
    50% {
        box-shadow:
            0 0 22px rgba(0,191,255,0.65),
            0 0 44px rgba(0,191,255,0.3),
            0 0 65px rgba(0,191,255,0.14);
    }
}

/* Chatbot adı etiketi - toggle'ın üstünde */
.chatbot-toggle-label {
    display: block !important;
    text-align: center;
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
    line-height: 1.2;
    padding: 3px 10px 4px;
    border-radius: 20px;
    margin-bottom: 6px;
    margin-top: 0;
    position: relative;
    letter-spacing: 0.5px;
}

/* Neon border animasyonu - etiket etrafında */
.chatbot-toggle-label.neon-border {
    animation: neon-glow-label 2s ease-in-out infinite alternate;
}

@keyframes neon-glow-label {
    0%   { box-shadow: 0 0 4px currentColor, 0 0 8px currentColor; }
    100% { box-shadow: 0 0 8px currentColor, 0 0 18px currentColor, 0 0 30px currentColor; }
}

/* Avatar icon - toggle boyutuyla oran koruyarak büyüsün */
.chatbot-avatar-icon {
    width: 80%;
    height: 80%;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.cat-svg-large {
    width: 80%;
    height: 80%;
}

/* Kampanya noktası pulse animasyonu */
.chatbot-notification-dot.pulse {
    animation: campaign-pulse 1.5s ease-in-out infinite;
}

@keyframes campaign-pulse {
    0%   { transform: scale(1);   opacity: 1; }
    50%  { transform: scale(1.5); opacity: 0.7; }
    100% { transform: scale(1);   opacity: 1; }
}