/* Elite Battery Bot Frontend Styles */

/* Widget Container */
.elitebatterybot-widget {
    position: fixed !important;
    z-index: 999999 !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    --elitebatterybot-color: #FFD700;
    /* Ensure widget never goes completely off-screen */
    min-width: 80px !important;
    min-height: 80px !important;
}

/* Positioning Classes */
.elitebatterybot-position-bottom-right {
    bottom: 20px !important;
    right: 20px !important;
}

.elitebatterybot-position-bottom-left {
    bottom: 20px !important;
    left: 20px !important;
}

.elitebatterybot-position-top-right {
    top: 20px !important;
    right: 20px !important;
}

.elitebatterybot-position-top-left {
    top: 20px !important;
    left: 20px !important;
}

/* Toggle Button */
.elitebatterybot-toggle {
    position: relative !important;
    cursor: pointer !important;
    z-index: 1000001 !important;
}

/* Battery Specialist Character */
.elitebatterybot-battery-specialist {
    background: white !important;
    border-radius: 50% !important;
    width: 80px !important;
    height: 80px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 20px rgba(255, 215, 0, 0.3) !important;
    border: 3px solid var(--elitebatterybot-color) !important;
    animation: elitebatterybot-character-float 6s ease-in-out infinite !important;
    transition: transform 0.3s ease !important;
}

.elitebatterybot-toggle:hover .elitebatterybot-battery-specialist {
    transform: scale(1.1) !important;
    animation: elitebatterybot-character-excited 0.5s ease-in-out !important;
}

.elitebatterybot-specialist-svg {
    width: 60px !important;
    height: 60px !important;
}

/* Character Animations */
@keyframes elitebatterybot-character-float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-3px) rotate(1deg); }
}

@keyframes elitebatterybot-character-excited {
    0%, 100% { transform: scale(1.1) rotate(0deg); }
    25% { transform: scale(1.15) rotate(-2deg); }
    75% { transform: scale(1.15) rotate(2deg); }
}

/* Hand Waving Animation */
.elitebatterybot-hand-wave {
    animation: elitebatterybot-wave 8s ease-in-out infinite !important;
    transform-origin: 18px 38px !important;
}

@keyframes elitebatterybot-wave {
    0%, 85%, 100% { transform: rotate(0deg); }
    10%, 15% { transform: rotate(15deg); }
    12% { transform: rotate(-10deg); }
    17%, 20% { transform: rotate(10deg); }
}

/* Jumper Cables Animation */
.elitebatterybot-cables-spark {
    animation: elitebatterybot-cables-dangle 5s ease-in-out infinite !important;
}

@keyframes elitebatterybot-cables-dangle {
    0%, 80%, 100% { transform: translateY(0px) rotate(0deg); }
    20% { transform: translateY(2px) rotate(1deg); }
    40% { transform: translateY(-1px) rotate(-0.5deg); }
    60% { transform: translateY(1px) rotate(0.5deg); }
}

/* Sparks Animation */
.elitebatterybot-sparks {
    animation: elitebatterybot-spark-flash 5s ease-in-out infinite !important;
}

@keyframes elitebatterybot-spark-flash {
    0%, 70%, 100% { opacity: 0; }
    75%, 85% { opacity: 1; }
    80% { opacity: 0.5; }
    87%, 90% { opacity: 0.8; }
}

/* Speech Bubble */
.elitebatterybot-speech-bubble {
    position: absolute !important;
    bottom: 85px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: white !important;
    color: #333 !important;
    padding: 12px 16px !important;
    border-radius: 18px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    white-space: normal !important;
    text-align: center !important;
    line-height: 1.3 !important;
    max-width: 200px !important;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.15) !important;
    border: 2px solid var(--elitebatterybot-color) !important;
    opacity: 1 !important;
    visibility: visible !important;
    transition: all 0.3s ease !important;
    z-index: 1000002 !important;
}

/* Speech Bubble HTML Elements */
.elitebatterybot-speech-bubble b,
.elitebatterybot-speech-bubble strong {
    font-weight: 700 !important;
    color: inherit !important;
}

.elitebatterybot-speech-bubble small {
    font-size: 11px !important;
    opacity: 0.9 !important;
    color: inherit !important;
    display: block !important;
    margin-top: 2px !important;
}

.elitebatterybot-speech-bubble em {
    font-style: italic !important;
    color: inherit !important;
}

.elitebatterybot-speech-bubble br {
    line-height: 1.2 !important;
}

.elitebatterybot-speech-tail {
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 0 !important;
    height: 0 !important;
    border-left: 8px solid transparent !important;
    border-right: 8px solid transparent !important;
    border-top: 8px solid white !important;
}

.elitebatterybot-toggle:hover .elitebatterybot-speech-tail {
    border-top-color: var(--elitebatterybot-color) !important;
}

.elitebatterybot-toggle:hover .elitebatterybot-speech-bubble {
    background: var(--elitebatterybot-color) !important;
    color: white !important;
    transform: translateX(-50%) scale(1.05) translateY(-10px) !important;
}

/* Chat Window */
.elitebatterybot-chat-window {
    position: absolute !important;
    bottom: 100px !important;
    right: 0 !important;
    width: 350px !important;
    height: 625px !important;
    background: white !important;
    border-radius: 15px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2) !important;
    display: none !important;
    flex-direction: column !important;
    overflow: hidden !important;
    z-index: 1000000 !important;
    border: 2px solid var(--elitebatterybot-color) !important;
}

.elitebatterybot-chat-window.open {
    display: flex !important;
}

/* Chat Header */
.elitebatterybot-chat-header {
    background: var(--elitebatterybot-color) !important;
    color: #000 !important;
    padding: 15px 20px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
}

.elitebatterybot-header-content h3 {
    margin: 0 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #000 !important;
}

.elitebatterybot-header-content p {
    margin: 2px 0 0 0 !important;
    font-size: 12px !important;
    opacity: 0.8 !important;
    color: #333 !important;
}

.elitebatterybot-close-btn {
    background: none !important;
    border: none !important;
    font-size: 24px !important;
    font-weight: bold !important;
    color: #000 !important;
    cursor: pointer !important;
    width: 30px !important;
    height: 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    transition: background-color 0.2s ease !important;
}

.elitebatterybot-close-btn:hover {
    background-color: rgba(0, 0, 0, 0.1) !important;
}

/* Messages Area */
.elitebatterybot-messages {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    background: #fafbfc !important;
    scroll-behavior: smooth !important;
}

.elitebatterybot-message {
    display: flex !important;
    flex-direction: column !important;
    max-width: 85% !important;
}

.elitebatterybot-bot-message {
    align-self: flex-start !important;
}

.elitebatterybot-user-message {
    align-self: flex-end !important;
}

.elitebatterybot-message-content {
    padding: 12px 16px !important;
    border-radius: 16px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    word-wrap: break-word !important;
    background: white !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
    border: 1px solid #e1e5e9 !important;
    color: #333 !important;
}

.elitebatterybot-bot-message .elitebatterybot-message-content {
    background: white !important;
    color: #333 !important;
    border: 1px solid #e0e0e0 !important;
    margin-right: 20px !important;
}

.elitebatterybot-user-message .elitebatterybot-message-content {
    background: var(--elitebatterybot-color) !important;
    color: #000 !important;
    margin-left: 20px !important;
}

.elitebatterybot-message-time {
    font-size: 11px !important;
    color: #666 !important;
    margin-top: 4px !important;
    align-self: flex-start !important;
}

.elitebatterybot-user-message .elitebatterybot-message-time {
    align-self: flex-end !important;
}

/* Loading Indicator */
.elitebatterybot-loading {
    padding: 15px 20px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: #f8f9fa !important;
    border-top: 1px solid #e0e0e0 !important;
}

.elitebatterybot-typing-indicator {
    display: flex !important;
    gap: 3px !important;
}

.elitebatterybot-typing-indicator span {
    width: 6px !important;
    height: 6px !important;
    background: var(--elitebatterybot-color) !important;
    border-radius: 50% !important;
    animation: elitebatterybot-typing 1.4s ease-in-out infinite !important;
}

.elitebatterybot-typing-indicator span:nth-child(2) {
    animation-delay: 0.2s !important;
}

.elitebatterybot-typing-indicator span:nth-child(3) {
    animation-delay: 0.4s !important;
}

@keyframes elitebatterybot-typing {
    0%, 60%, 100% { transform: scale(1); opacity: 0.5; }
    30% { transform: scale(1.2); opacity: 1; }
}

.elitebatterybot-loading-text {
    font-size: 13px !important;
    color: #666 !important;
    font-style: italic !important;
}

/* Input Area */
.elitebatterybot-input-area {
    border-top: 1px solid #e0e0e0 !important;
    background: white !important;
    padding: 15px 20px 20px 20px !important;
}

/* Input Loading Indicator */
.elitebatterybot-input-loading {
    position: relative !important;
    text-align: center !important;
    margin-bottom: 10px !important;
    padding: 8px 12px !important;
    background: rgba(255, 215, 0, 0.1) !important;
    border-radius: 15px !important;
    border: 1px solid rgba(255, 215, 0, 0.3) !important;
    overflow: hidden !important;
    min-height: 50px !important;
}

.elitebatterybot-input-loading .elitebatterybot-loading-text {
    font-size: 13px !important;
    color: #666 !important;
    font-weight: 600 !important;
    animation: elitebatterybot-loading-flash 1.5s ease-in-out infinite !important;
    display: block !important;
}

.elitebatterybot-input-loading .elitebatterybot-loading-text-secondary {
    font-size: 12px !important;
    color: #888 !important;
    font-weight: 500 !important;
    margin-top: 4px !important;
    animation: elitebatterybot-loading-flash 1.8s ease-in-out infinite !important;
}

.elitebatterybot-input-loading .elitebatterybot-loading-text-tertiary {
    font-size: 11px !important;
    color: #d9534f !important;
    font-weight: 600 !important;
    margin-top: 4px !important;
    animation: elitebatterybot-loading-flash 2.0s ease-in-out infinite !important;
}

@keyframes elitebatterybot-loading-flash {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

.elitebatterybot-input-wrapper {
    display: flex !important;
    align-items: flex-end !important;
    gap: 10px !important;
    background: #f8f9fa !important;
    border: 2px solid #e0e0e0 !important;
    border-radius: 20px !important;
    padding: 8px 12px !important;
    transition: border-color 0.2s ease !important;
}

.elitebatterybot-input-wrapper:focus-within {
    border-color: var(--elitebatterybot-color) !important;
}

#elitebatterybot-input {
    flex: 1 !important;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    resize: none !important;
    min-height: 20px !important;
    max-height: 100px !important;
    font-family: inherit !important;
    color: #333 !important;
}

#elitebatterybot-input::placeholder {
    color: #999 !important;
}

.elitebatterybot-send-btn {
    background: var(--elitebatterybot-color) !important;
    border: none !important;
    padding: 8px 16px !important;
    border-radius: 18px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #000 !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    transition: all 0.2s ease !important;
    flex-shrink: 0 !important;
    min-width: 70px !important;
}

.elitebatterybot-send-btn:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 2px 8px rgba(255, 215, 0, 0.3) !important;
}

.elitebatterybot-send-btn:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

.elitebatterybot-input-hint {
    margin-top: 8px !important;
    font-size: 11px !important;
    color: #666 !important;
    text-align: center !important;
}

/* Connection Status Indicator */
.elitebatterybot-connection-status {
    margin-top: 8px !important;
    text-align: center !important;
    font-size: 9px !important;
    line-height: 1.3 !important;
    max-width: 100% !important;
}

.elitebatterybot-status-text {
    font-weight: 400 !important;
    transition: color 0.3s ease !important;
    display: block !important;
}

.elitebatterybot-status-text small {
    display: block !important;
    margin-top: 4px !important;
    font-size: 8px !important;
    line-height: 1.2 !important;
    opacity: 0.9 !important;
}

.elitebatterybot-status-good {
    color: #28a745 !important; /* Green */
}

.elitebatterybot-status-bad {
    color: #dc3545 !important; /* Red */
}

.elitebatterybot-status-testing {
    color: #666 !important; /* Gray */
}

.elitebatterybot-status-ready {
    color: #6c757d !important; /* Light gray */
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .elitebatterybot-chat-window {
        width: 300px !important;
        height: 450px !important;
        bottom: 90px !important;
    }
    
    .elitebatterybot-position-bottom-left .elitebatterybot-chat-window,
    .elitebatterybot-position-top-left .elitebatterybot-chat-window {
        right: 0 !important;
        left: auto !important;
    }
    
    .elitebatterybot-widget {
        --elitebatterybot-color: #FFD700;
    }
    
    .elitebatterybot-battery-specialist {
        width: 70px !important;
        height: 70px !important;
    }
    
    .elitebatterybot-specialist-svg {
        width: 50px !important;
        height: 50px !important;
    }
    
    .elitebatterybot-speech-bubble {
        bottom: 75px !important;
        font-size: 12px !important;
        max-width: 160px !important;
        line-height: 1.2 !important;
        padding: 10px 12px !important;
    }
}

@media (max-width: 480px) {
    .elitebatterybot-chat-window {
        width: 280px !important;
        height: 500px !important;
        bottom: 80px !important;
    }
    
    .elitebatterybot-messages {
        padding: 15px !important;
        gap: 12px !important;
    }
    
    .elitebatterybot-input-area {
        padding: 12px 15px 18px 15px !important;
    }
    
    .elitebatterybot-speech-bubble {
        bottom: 70px !important;
        font-size: 11px !important;
        max-width: 140px !important;
        padding: 8px 10px !important;
        line-height: 1.2 !important;
    }
    
    .elitebatterybot-connection-status {
        font-size: 8px !important;
    }
    
    .elitebatterybot-status-text small {
        font-size: 7px !important;
        line-height: 1.1 !important;
    }
    
    .elitebatterybot-header-content h3 {
        font-size: 16px !important;
    }
    
    .elitebatterybot-header-content p {
        font-size: 11px !important;
    }
}

/* Accessibility - Allow animations on mobile for electricity effects */
@media (prefers-reduced-motion: reduce) and (min-width: 769px) {
    .elitebatterybot-battery-specialist,
    .elitebatterybot-hand-wave,
    .elitebatterybot-cables-spark,
    .elitebatterybot-sparks,
    .elitebatterybot-typing-indicator span,
    .electric-arc,
    .electric-spark,
    .battery-terminal {
        animation: none !important;
    }
    
    /* Show static versions of electricity effects when motion is reduced on desktop */
    .elitebatterybot-input-loading.electric-active .electric-spark,
    .elitebatterybot-input-loading.electric-active .battery-terminal {
        opacity: 0.6 !important;
    }
}

/* Force animations on mobile regardless of motion preference */
@media (max-width: 768px) {
    .electric-arc,
    .electric-spark,
    .battery-terminal {
        animation-play-state: running !important;
    }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    .elitebatterybot-chat-window {
        border: 3px solid #000 !important;
    }
    
    .elitebatterybot-battery-specialist {
        border: 4px solid #000 !important;
    }
}

/* Dark Mode Support - Desktop Only */
@media (prefers-color-scheme: dark) and (min-width: 769px) {
    .elitebatterybot-chat-window {
        background: #2d3748 !important;
        color: white !important;
    }
    
    .elitebatterybot-messages {
        background: #1a202c !important;
    }
    
    .elitebatterybot-bot-message .elitebatterybot-message-content {
        background: #4a5568 !important;
        color: white !important;
        border-color: #2d3748 !important;
    }
    
    .elitebatterybot-input-area {
        background: #2d3748 !important;
        border-color: #4a5568 !important;
    }
    
    .elitebatterybot-input-wrapper {
        background: #1a202c !important;
        border-color: #4a5568 !important;
    }
    
    #elitebatterybot-input {
        color: white !important;
    }
    
    #elitebatterybot-input::placeholder {
        color: #a0aec0 !important;
    }
}

/* Force Light Mode on Mobile - Override Dark Mode */
@media (max-width: 768px) {
    .elitebatterybot-chat-window {
        background: white !important;
        color: #333 !important;
    }
    
    .elitebatterybot-messages {
        background: #fafbfc !important;
    }
    
    .elitebatterybot-bot-message .elitebatterybot-message-content {
        background: white !important;
        color: #333 !important;
        border: 1px solid #e0e0e0 !important;
    }
    
    .elitebatterybot-input-area {
        background: white !important;
        border-color: #e0e0e0 !important;
    }
    
    .elitebatterybot-input-wrapper {
        background: #f8f9fa !important;
        border-color: #e0e0e0 !important;
    }
    
    #elitebatterybot-input {
        color: #333 !important;
    }
    
    #elitebatterybot-input::placeholder {
        color: #999 !important;
    }
}

/* Scrollbar Styling */
.elitebatterybot-messages::-webkit-scrollbar {
    width: 6px !important;
}

.elitebatterybot-messages::-webkit-scrollbar-track {
    background: transparent !important;
}

.elitebatterybot-messages::-webkit-scrollbar-thumb {
    background: rgba(255, 215, 0, 0.3) !important;
    border-radius: 3px !important;
}

.elitebatterybot-messages::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 215, 0, 0.5) !important;
}

/* Animation Delays for Staggered Effects */
.elitebatterybot-message:nth-child(1) { animation-delay: 0s; }
.elitebatterybot-message:nth-child(2) { animation-delay: 0.1s; }
.elitebatterybot-message:nth-child(3) { animation-delay: 0.2s; }

/* Focus States for Accessibility */
.elitebatterybot-toggle:focus,
.elitebatterybot-close-btn:focus,
.elitebatterybot-send-btn:focus {
    outline: 2px solid var(--elitebatterybot-color) !important;
    outline-offset: 2px !important;
}

#elitebatterybot-input:focus {
    outline: none !important;
}

/* ========================================
   ENHANCED BATTERY/ELECTRICITY EFFECTS
   ======================================== */

/* Electric Overlay Container */
.elitebatterybot-input-loading .elitebatterybot-electric-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    pointer-events: none !important;
    z-index: 10 !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
    width: 100% !important;
    height: 100% !important;
}

.elitebatterybot-input-loading.electric-active .elitebatterybot-electric-overlay {
    opacity: 1 !important;
    /* Debug - add temporary background to verify overlay is visible */
    /* background: rgba(255, 0, 0, 0.1) !important; */
}

/* Force visibility on desktop for debugging */
@media (min-width: 769px) {
    .elitebatterybot-input-loading.electric-active .elitebatterybot-electric-overlay {
        opacity: 1 !important;
        display: block !important;
    }
    
    .elitebatterybot-input-loading.electric-active .electric-spark,
    .elitebatterybot-input-loading.electric-active .electric-arc,
    .elitebatterybot-input-loading.electric-active .battery-terminal {
        opacity: 1 !important;
        display: block !important;
    }
}

/* Electric Arcs - Flowing lines */
.elitebatterybot-input-loading .electric-arc {
    position: absolute !important;
    background: linear-gradient(90deg, transparent 0%, #FFD700 50%, transparent 100%) !important;
    height: 2px !important;
    border-radius: 1px !important;
    opacity: 0 !important;
    animation: electric-flow 2s ease-in-out infinite !important;
    display: block !important;
}

.electric-arc.arc-1 {
    top: 20% !important;
    left: 10% !important;
    width: 30% !important;
    animation-delay: 0s !important;
}

.electric-arc.arc-2 {
    top: 50% !important;
    right: 15% !important;
    width: 25% !important;
    animation-delay: 0.7s !important;
}

.electric-arc.arc-3 {
    bottom: 25% !important;
    left: 20% !important;
    width: 35% !important;
    animation-delay: 1.3s !important;
}

/* Electric Sparks - Floating + and - symbols */
.elitebatterybot-input-loading .electric-spark {
    position: absolute !important;
    font-size: 14px !important;
    font-weight: bold !important;
    opacity: 0 !important;
    pointer-events: none !important;
    animation: spark-float 3s ease-in-out infinite !important;
    display: block !important;
    z-index: 15 !important;
}

.electric-spark.positive {
    color: #FFD700 !important; /* Gold for positive */
    text-shadow: 0 0 8px #FFD700, 0 0 12px #FFD700 !important;
}

.electric-spark.negative {
    color: #87CEEB !important; /* Sky blue for negative */
    text-shadow: 0 0 8px #87CEEB, 0 0 12px #87CEEB !important;
}

/* Individual spark positions and delays */
.spark-1 { top: 15%; left: 20%; animation-delay: 0s; }
.spark-2 { top: 25%; right: 25%; animation-delay: 0.3s; }
.spark-3 { top: 65%; left: 15%; animation-delay: 0.6s; }
.spark-4 { top: 45%; right: 20%; animation-delay: 0.9s; }
.spark-5 { top: 75%; left: 40%; animation-delay: 1.2s; }
.spark-6 { top: 35%; right: 35%; animation-delay: 1.5s; }
.spark-7 { top: 55%; left: 60%; animation-delay: 1.8s; }
.spark-8 { top: 85%; right: 45%; animation-delay: 2.1s; }

/* Battery Terminals - Larger + and - at corners */
.elitebatterybot-input-loading .battery-terminal {
    position: absolute !important;
    font-size: 18px !important;
    font-weight: bold !important;
    opacity: 0 !important;
    animation: terminal-pulse 2.5s ease-in-out infinite !important;
    display: block !important;
    z-index: 15 !important;
}

.positive-terminal {
    top: 10% !important;
    left: 10% !important;
    color: #FF6B6B !important; /* Red for positive terminal */
    text-shadow: 0 0 10px #FF6B6B, 0 0 15px #FF6B6B !important;
    animation-delay: 0s !important;
}

.negative-terminal {
    bottom: 10% !important;
    right: 10% !important;
    color: #4ECDC4 !important; /* Teal for negative terminal */
    text-shadow: 0 0 10px #4ECDC4, 0 0 15px #4ECDC4 !important;
    animation-delay: 1.25s !important;
}

/* ========================================
   ELECTRICITY ANIMATIONS
   ======================================== */

@keyframes electric-flow {
    0% { 
        opacity: 0; 
        transform: scaleX(0); 
    }
    20% { 
        opacity: 1; 
        transform: scaleX(0.3); 
    }
    50% { 
        opacity: 0.8; 
        transform: scaleX(1); 
    }
    80% { 
        opacity: 0.4; 
        transform: scaleX(0.7); 
    }
    100% { 
        opacity: 0; 
        transform: scaleX(0); 
    }
}

@keyframes spark-float {
    0% { 
        opacity: 0; 
        transform: translateY(0px) scale(0.8); 
    }
    25% { 
        opacity: 1; 
        transform: translateY(-8px) scale(1.2); 
    }
    50% { 
        opacity: 0.7; 
        transform: translateY(-4px) scale(1); 
    }
    75% { 
        opacity: 0.4; 
        transform: translateY(-12px) scale(0.9); 
    }
    100% { 
        opacity: 0; 
        transform: translateY(-16px) scale(0.6); 
    }
}

@keyframes terminal-pulse {
    0% { 
        opacity: 0; 
        transform: scale(0.8); 
    }
    20% { 
        opacity: 1; 
        transform: scale(1.3); 
    }
    40% { 
        opacity: 0.8; 
        transform: scale(1); 
    }
    60% { 
        opacity: 0.6; 
        transform: scale(1.1); 
    }
    80% { 
        opacity: 0.3; 
        transform: scale(0.9); 
    }
    100% { 
        opacity: 0; 
        transform: scale(0.8); 
    }
}

/* Desktop optimization for electricity effects */
@media (min-width: 769px) {
    .elitebatterybot-input-loading .electric-spark {
        font-size: 16px !important;
    }
    
    .elitebatterybot-input-loading .battery-terminal {
        font-size: 20px !important;
    }
    
    .elitebatterybot-input-loading .electric-arc {
        height: 2px !important;
    }
}

/* Mobile optimization for electricity effects */
@media (max-width: 768px) {
    /* Ensure loading container has proper positioning on mobile */
    .elitebatterybot-input-loading {
        position: relative !important;
        overflow: hidden !important;
        min-height: 40px !important;
    }
    
    /* Force electricity overlay visibility on mobile */
    .elitebatterybot-input-loading.electric-active .elitebatterybot-electric-overlay {
        opacity: 1 !important;
        display: block !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        z-index: 10 !important;
    }
    
    /* Mobile-optimized electricity effects */
    .elitebatterybot-input-loading .electric-spark {
        font-size: 12px !important;
        position: absolute !important;
        display: block !important;
        z-index: 15 !important;
    }
    
    .elitebatterybot-input-loading .battery-terminal {
        font-size: 14px !important;
        position: absolute !important;
        display: block !important;
        z-index: 15 !important;
    }
    
    .elitebatterybot-input-loading .electric-arc {
        height: 1px !important;
        position: absolute !important;
        display: block !important;
        z-index: 10 !important;
    }
    
    /* Force visibility when active on mobile */
    .elitebatterybot-input-loading.electric-active .electric-spark,
    .elitebatterybot-input-loading.electric-active .electric-arc,
    .elitebatterybot-input-loading.electric-active .battery-terminal {
        opacity: 1 !important;
        display: block !important;
    }
    
    /* Debug - temporary visible background for mobile testing */
    .elitebatterybot-input-loading.electric-active .elitebatterybot-electric-overlay {
        /* background: rgba(255, 0, 0, 0.05) !important; */
    }
    
    /* Ensure animations are not being blocked on mobile */
    .elitebatterybot-input-loading.electric-active .electric-spark {
        animation: spark-float 3s ease-in-out infinite !important;
        animation-play-state: running !important;
    }
    
    .elitebatterybot-input-loading.electric-active .electric-arc {
        animation: electric-flow 2s ease-in-out infinite !important;
        animation-play-state: running !important;
    }
    
    .elitebatterybot-input-loading.electric-active .battery-terminal {
        animation: terminal-pulse 2.5s ease-in-out infinite !important;
        animation-play-state: running !important;
    }
}