/* 
 * Agentic Bot Widget CSS 
 * 
 * NOTE: Main styling is now handled via Tailwind CSS utility classes in widget-main.php.
 * Mobile responsiveness is handled via Tailwind's max-sm breakpoint in HTML.
 * This file contains only essential animations and dynamic state changes.
 */

/* SCOPED RESET: Insulate widget from theme styles */
#argbot-chat-widget,
#argbot-chat-widget * {
    box-sizing: border-box !important;
}

#argbot-chat-widget h1,
#argbot-chat-widget h2,
#argbot-chat-widget h3,
#argbot-chat-widget h4,
#argbot-chat-widget h5,
#argbot-chat-widget h6,
#argbot-chat-widget p,
#argbot-chat-widget span,
#argbot-chat-widget div,
#argbot-chat-widget a,
#argbot-chat-widget button,
#argbot-chat-widget input,
#argbot-chat-widget textarea {
    margin: 0;
    padding: 0;
    line-height: 1.5;
    font-family: 'Poppins', sans-serif !important;
}

#argbot-chat-widget ul,
#argbot-chat-widget ol,
#argbot-chat-widget li {
    margin: 0;
    padding: 0;
    list-style: none !important;
}

#argbot-chat-widget button:focus,
#argbot-chat-widget input:focus,
#argbot-chat-widget textarea:focus {
    outline: none !important;
}


/* Toggle Button Animations */
#argbot-toggle.active .fab-icon-message {
    opacity: 0 !important;
    transform: rotate(90deg) scale(0.5) !important;
}

#argbot-toggle.active .fab-icon-close {
    opacity: 1 !important;
    transform: rotate(0deg) scale(1) !important;
}

/* Window Active State */
#argbot-window.active {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) scale(1) !important;
    display: flex !important;
    pointer-events: auto !important;
    z-index: 2147483647 !important;
}

/* Desktop Maximize (min-width: 641px) */
@media (min-width: 641px) {
    #argbot-window.maximized {
        width: 600px !important;
    }
}

/* Navigation Active States (Dynamic Color) */
.nav-item-btn.active i {
    color: var(--arg-primary) !important;
}

.nav-item-btn.active span {
    color: var(--arg-primary) !important;
}

/* ==================== FLOATING ANIMATIONS ==================== */

/* Floating animation for toggle button */
@keyframes argbot-float {

    0%,
    100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-8px) scale(1.02);
    }
}

/* Pulse animation */
@keyframes argbot-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(var(--arg-primary-rgb, 59, 130, 246), 0.7);
    }

    70% {
        box-shadow: 0 0 0 15px rgba(var(--arg-primary-rgb, 59, 130, 246), 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(var(--arg-primary-rgb, 59, 130, 246), 0);
    }
}

/* Fade in animation for tooltip */
@keyframes argbot-fade-in-up {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.95);
    }

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

/* Wiggle animation to attract attention */
@keyframes argbot-wiggle {

    0%,
    100% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(-5deg);
    }

    75% {
        transform: rotate(5deg);
    }
}

/* Apply floating animation to toggle button */
#argbot-toggle {
    animation: argbot-float 3s ease-in-out infinite !important;
}

/* Add pulse effect periodically */
#argbot-toggle.pulse {
    animation: argbot-float 3s ease-in-out infinite, argbot-pulse 2s infinite !important;
}

/* Auto-message tooltip */
#argbot-auto-message {
    animation: argbot-fade-in-up 0.5s ease-out forwards;
}

/* Tooltip visible state */
#argbot-auto-message.visible {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* Tooltip hidden state */
#argbot-auto-message.hidden {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Wiggle tooltip to attract attention */
#argbot-auto-message.wiggle {
    animation: argbot-wiggle 0.5s ease-in-out 3;
}