/* SIMPLE AI RESPONSE STYLING - ONE UNIFIED APPROACH */
/* This file overrides all other AI response styles with maximum specificity */

/* ===== RESET BOT MESSAGE STYLES (EXCEPT TYPING INDICATOR & ANIMATIONS) ===== */
/* More targeted reset that preserves animations and critical display properties */
html body .chat-message.bot:not(.typing-indicator),
html body .bot-message:not(.typing-indicator),
html body .chat-message.bot.enhanced:not(.typing-indicator) {
    /* Reset layout properties but preserve animations */
    position: relative !important;
    display: block !important;
    box-sizing: border-box !important;
    
    /* Reset typography */
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    color: inherit !important;
    
    /* Reset spacing */
    margin: 0 !important;
    padding: 0 !important;
    
    /* Reset borders and backgrounds */
    border: none !important;
    background: none !important;
    
    /* Reset transformations but keep transitions */
    transform: none !important;
    /* Keep transition and animation properties intact */
}

/* Target specific child elements more carefully */
html body .chat-message.bot:not(.typing-indicator) > *,
html body .bot-message:not(.typing-indicator) > *,
html body .chat-message.bot.enhanced:not(.typing-indicator) > * {
    /* Reset only layout and typography, preserve animations */
    position: static !important;
    display: block !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    /* Keep animation and transition properties */
}

/* ===== RESTORE ANIMATIONS FOR TYPING INDICATOR ===== */
/* Force restore all animation properties that were stripped by the reset above */

/* SIMPLIFIED: Clean loading animation styles */
html body .chat-message.bot.typing-indicator,
html body .typing-indicator {
    background: transparent !important;
    border: none !important;
    animation: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 8px auto !important;
    border-radius: 0 !important;
    backdrop-filter: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
}

html body .chat-message.bot.typing-indicator .loading-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    padding: 0 !important;
    width: 100% !important;
    text-align: center !important;
}

html body .chat-message.bot.typing-indicator .thinking-dots {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    width: 100% !important;
}

html body .chat-message.bot.typing-indicator .thinking-dots span {
    display: block !important;
    width: 8px !important;
    height: 8px !important;
    background: #6f42c1 !important;
    border-radius: 50% !important;
    animation: thinking-bounce 1.2s ease-in-out infinite !important;
    opacity: 0.8 !important;
}

html body .chat-message.bot.typing-indicator .thinking-dots span:nth-child(1) {
    animation-delay: 0s !important;
}

html body .chat-message.bot.typing-indicator .thinking-dots span:nth-child(2) {
    animation-delay: 0.1s !important;
}

html body .chat-message.bot.typing-indicator .thinking-dots span:nth-child(3) {
    animation-delay: 0.2s !important;
}

html body .chat-message.bot.typing-indicator .thinking-dots span:nth-child(4) {
    animation-delay: 0.3s !important;
}

html body .chat-message.bot.typing-indicator .thinking-dots span:nth-child(5) {
    animation-delay: 0.4s !important;
}

html body .chat-message.bot.typing-indicator .thinking-dots span:nth-child(6) {
    animation-delay: 0.5s !important;
}

html body .chat-message.bot.typing-indicator .thinking-dots span:nth-child(7) {
    animation-delay: 0.6s !important;
}

html body .chat-message.bot.typing-indicator .thinking-dots span:nth-child(8) {
    animation-delay: 0.7s !important;
}

html body .chat-message.bot.typing-indicator .thinking-dots span:nth-child(9) {
    animation-delay: 0.8s !important;
}

html body .chat-message.bot.typing-indicator .loading-text {
    color: #6c757d !important;
    font-size: 0.9rem !important;
    text-align: center !important;
    font-style: italic !important;
    width: 100% !important;
    display: block !important;
    margin: 0 auto !important;
}

html body .chat-message.bot.typing-indicator .loading-animation {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
}

html body .chat-message.bot.typing-indicator .loading-bar {
    width: 200px !important;
    height: 4px !important;
    background: #e9ecef !important;
    border-radius: 2px !important;
    overflow: hidden !important;
    position: relative !important;
}

html body .chat-message.bot.typing-indicator .loading-progress {
    width: 40px !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, #4f8cff, transparent) !important;
    border-radius: 2px !important;
    animation: loading-slide 2s ease-in-out infinite !important;
    position: absolute !important;
    top: 0 !important;
    left: -40px !important;
}

html body .chat-message.bot.typing-indicator .loading-dots {
    display: flex !important;
    justify-content: center !important;
    gap: 4px !important;
    margin-top: 8px !important;
}

html body .chat-message.bot.typing-indicator .loading-dot {
    width: 6px !important;
    height: 6px !important;
    background: #4f8cff !important;
    border-radius: 50% !important;
    animation: loading-pulse 1.5s ease-in-out infinite !important;
}

html body .chat-message.bot.typing-indicator .loading-dot:nth-child(1) { animation-delay: 0s !important; }
html body .chat-message.bot.typing-indicator .loading-dot:nth-child(2) { animation-delay: 0.1s !important; }
html body .chat-message.bot.typing-indicator .loading-dot:nth-child(3) { animation-delay: 0.2s !important; }
html body .chat-message.bot.typing-indicator .loading-dot:nth-child(4) { animation-delay: 0.3s !important; }
html body .chat-message.bot.typing-indicator .loading-dot:nth-child(5) { animation-delay: 0.4s !important; }

/* ===== RESTORE KEYFRAME ANIMATIONS ===== */
/* CRITICAL: These animations must be defined AFTER the all: unset rule */
@keyframes thinking-bounce {
    0%, 80%, 100% {
        transform: scale(1) translateY(0) !important;
        opacity: 0.3 !important;
    }
    40% {
        transform: scale(1.2) translateY(-4px) !important;
        opacity: 1 !important;
    }
}

@keyframes thinking-bounce-enhanced {
    0% {
        transform: translateY(0px) scale(1) !important;
        opacity: 0.7 !important;
        filter: brightness(1) !important;
        box-shadow: 0 2px 8px rgba(79, 140, 255, 0.4) !important;
    }
    100% {
        transform: translateY(-12px) scale(1.1) !important;
        opacity: 1 !important;
        filter: brightness(1.3) drop-shadow(0 0 4px rgba(79, 140, 255, 0.6)) !important;
        box-shadow: 0 4px 12px rgba(79, 140, 255, 0.6) !important;
    }
}

@keyframes thinking-container-pulse {
    0%, 100% {
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
        border-color: rgba(111, 66, 193, 0.15) !important;
    }
    50% {
        background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%) !important;
        box-shadow: 0 4px 16px rgba(111, 66, 193, 0.15) !important;
        border-color: rgba(111, 66, 193, 0.25) !important;
    }
}

@keyframes gentle-pulse {
    0%, 100% {
        box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
        transform: scale(1) !important;
    }
    50% {
        box-shadow: 0 6px 20px rgba(111, 66, 193, 0.2) !important;
        transform: scale(1.01) !important;
    }
}

@keyframes status-glow {
    0%, 100% {
        box-shadow: 0 0 8px rgba(79, 140, 255, 0.4) !important;
        opacity: 0.9 !important;
    }
    50% {
        box-shadow: 0 0 16px rgba(79, 140, 255, 0.7) !important;
        opacity: 1 !important;
    }
}

@keyframes loading-slide {
    0% {
        left: -40px !important;
        transform: translateX(0) !important;
    }
    100% {
        left: 200px !important;
        transform: translateX(0) !important;
    }
}

@keyframes loading-pulse {
    0% {
        opacity: 0.3 !important;
        transform: scale(1) !important;
    }
    50% {
        opacity: 1 !important;
        transform: scale(1.2) !important;
    }
    100% {
        opacity: 0.3 !important;
        transform: scale(1) !important;
    }
}

@keyframes fadeInOut {
    0% {
        opacity: 0.8 !important;
    }
    50% {
        opacity: 1 !important;
    }
    100% {
        opacity: 0.8 !important;
    }
}

/* ===== DISABLED - REPLACED BY UNIFIED-CHAT.CSS ===== */
/* This file has been replaced by unified-chat.css for cleaner styling */
/* Keeping for reference - all styles commented out */

/*
/* ===== COMPREHENSIVE LOADING ANIMATION SYSTEM ===== */
/* Maximum specificity selectors with comprehensive animation support */

/* Simplified Typing Indicator - Dots Only */
html body .chat-message.bot.typing-indicator,
html body .typing-indicator,
html body .chat-message.typing-indicator {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 10px 0 !important;
    margin: 10px 0 !important;
    box-shadow: none !important;
    animation: none !important;
    backdrop-filter: none !important;
    position: relative !important;
    overflow: visible !important;
}

/* Hide Message Header - Dots Only */
html body .typing-indicator .message-header,
html body .chat-message.bot.typing-indicator .message-header {
    display: none !important;
}

/* Hide Assistant Label */
html body .typing-indicator .assistant-label,
html body .chat-message.bot.typing-indicator .assistant-label,
html body .typing-indicator #progress-message {
    display: none !important;
}

/* Hide Progress Stage Indicator */
html body .typing-indicator .progress-stage,
html body .chat-message.bot.typing-indicator .progress-stage,
html body .typing-indicator #progress-stage {
    display: none !important;
}

/* Hide Progress Container */
html body .typing-indicator .progress-container,
html body .chat-message.bot.typing-indicator .progress-container {
    display: none !important;
}

/* Hide All Progress Elements */
html body .typing-indicator .progress-bar-container,
html body .chat-message.bot.typing-indicator .progress-bar-container,
html body .typing-indicator .progress-bar,
html body .chat-message.bot.typing-indicator .progress-bar,
html body .typing-indicator .progress-fill,
html body .chat-message.bot.typing-indicator .progress-fill,
html body .typing-indicator #progress-fill,
html body .typing-indicator .progress-percentage,
html body .chat-message.bot.typing-indicator .progress-percentage,
html body .typing-indicator #progress-percentage,
html body .typing-indicator .progress-description,
html body .chat-message.bot.typing-indicator .progress-description {
    display: none !important;
}

/* Simplified Thinking Dots - No Container */
html body div.chat-message.bot.typing-indicator div.thinking-dots,
html body .chat-message.bot.typing-indicator .thinking-dots,
html body .typing-indicator .thinking-dots {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    animation: none !important;
    backdrop-filter: none !important;
    position: relative !important;
}

/* Simple Bouncing Dots */
html body div.chat-message.bot.typing-indicator div.thinking-dots span,
html body .chat-message.bot.typing-indicator .thinking-dots span,
html body .typing-indicator .thinking-dots span {
    display: block !important;
    width: 8px !important;
    height: 8px !important;
    background: #6f42c1 !important;
    border-radius: 50% !important;
    position: relative !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
    animation: simple-bounce 1.4s ease-in-out infinite !important;
    animation-fill-mode: both !important;
    animation-play-state: running !important;
    will-change: transform !important;
}

/* Simple bounce animation */
@keyframes simple-bounce {
    0%, 80%, 100% {
        transform: translateY(0);
        opacity: 0.5;
    }
    40% {
        transform: translateY(-10px);
        opacity: 1;
    }
}

html body div.chat-message.bot.typing-indicator div.loading-progress,
html body .chat-message.bot.typing-indicator .loading-progress[class],
html body .typing-indicator .loading-progress {
    width: 40px !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, #4f8cff, transparent) !important;
    border-radius: 2px !important;
    position: absolute !important;
    top: 0 !important;
    left: -40px !important;
    margin: 0 !important;
    padding: 0 !important;
    animation: loading-slide 2s ease-in-out infinite !important;
    animation-fill-mode: both !important;
    animation-play-state: running !important;
    will-change: left, transform !important;
}

html body div.chat-message.bot.typing-indicator div.loading-dot,
html body .chat-message.bot.typing-indicator .loading-dot[class],
html body .typing-indicator .loading-dot {
    width: 6px !important;
    height: 6px !important;
    background: #4f8cff !important;
    border-radius: 50% !important;
    margin: 0 !important;
    padding: 0 !important;
    animation: loading-pulse 1.5s ease-in-out infinite !important;
    animation-fill-mode: both !important;
    animation-play-state: running !important;
    will-change: opacity, transform !important;
}

/* Animation Delay Variations for Simple Dots */
html body .typing-indicator .thinking-dots span:nth-child(1),
html body .chat-message.bot.typing-indicator .thinking-dots span:nth-child(1) {
    animation-delay: 0s !important;
}

html body .typing-indicator .thinking-dots span:nth-child(2),
html body .chat-message.bot.typing-indicator .thinking-dots span:nth-child(2) {
    animation-delay: 0.2s !important;
}

html body .typing-indicator .thinking-dots span:nth-child(3),
html body .chat-message.bot.typing-indicator .thinking-dots span:nth-child(3) {
    animation-delay: 0.4s !important;
}

/* Loading Animation Container */
html body .typing-indicator .loading-animation,
html body .chat-message.bot.typing-indicator .loading-animation {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
    margin-top: 15px !important;
}

html body .typing-indicator .loading-bar,
html body .chat-message.bot.typing-indicator .loading-bar {
    width: 200px !important;
    height: 4px !important;
    background: #e9ecef !important;
    border-radius: 2px !important;
    overflow: hidden !important;
    position: relative !important;
}

/* Status Indicators */
html body .typing-indicator .status-indicators,
html body .chat-message.bot.typing-indicator .status-indicators {
    display: flex !important;
    justify-content: center !important;
    gap: 8px !important;
    margin-top: 15px !important;
}

html body .typing-indicator .status-dot,
html body .chat-message.bot.typing-indicator .status-dot {
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    background: #e9ecef !important;
    border: 2px solid #dee2e6 !important;
    transition: all 0.3s ease !important;
}

html body .typing-indicator .status-dot.active,
html body .chat-message.bot.typing-indicator .status-dot.active {
    background: linear-gradient(135deg, #4f8cff 0%, #6c5ce7 100%) !important;
    border-color: #4f8cff !important;
    box-shadow: 0 0 8px rgba(79, 140, 255, 0.4) !important;
    animation: status-glow 2s ease-in-out infinite !important;
}

/* ===== SIMPLE AI RESPONSE CONTAINER (EXCEPT TYPING INDICATOR) ===== */
html body .chat-message.bot:not(.typing-indicator),
html body .chat-message.bot.enhanced:not(.typing-indicator) {
    /* Container styling */
    background: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
    border-left: 4px solid #6f42c1 !important;
    border-radius: 8px !important;
    padding: 20px !important;
    margin: 15px 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    
    /* Text styling */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
    color: #333333 !important;
    
    /* Layout */
    float: none !important;
    clear: both !important;
    position: relative !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
}

/* ===== REMOVE ALL HEADERS (EXCEPT FROM TYPING INDICATOR) ===== */
html body .chat-message.bot:not(.typing-indicator) .message-header,
html body .chat-message.bot:not(.typing-indicator) .bot-message-header,
html body .bot-message:not(.typing-indicator) .message-header,
html body .chat-message.bot:not(.typing-indicator) .assistant-label,
html body .chat-message.bot:not(.typing-indicator) .ai-indicator {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* ===== SIMPLE CONTENT STYLING (EXCEPT TYPING INDICATOR) ===== */
html body .chat-message.bot:not(.typing-indicator) .bot-message,
html body .chat-message.bot:not(.typing-indicator) .message-content,
html body .chat-message.bot:not(.typing-indicator) .bot-message-content,
html body .chat-message.bot:not(.typing-indicator) .message-body {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}

/* ===== TEXT FORMATTING (EXCEPT TYPING INDICATOR) ===== */
html body .chat-message.bot:not(.typing-indicator) h1,
html body .chat-message.bot:not(.typing-indicator) h2,
html body .chat-message.bot:not(.typing-indicator) h3,
html body .chat-message.bot:not(.typing-indicator) h4,
html body .chat-message.bot:not(.typing-indicator) h5,
html body .chat-message.bot:not(.typing-indicator) h6 {
    font-weight: 700 !important;
    color: #6f42c1 !important;
    margin: 20px 0 10px 0 !important;
    line-height: 1.3 !important;
}

html body .chat-message.bot h2 {
    font-size: 20px !important;
    border-bottom: 2px solid #6f42c1 !important;
    padding-bottom: 5px !important;
}

html body .chat-message.bot h3 {
    font-size: 18px !important;
}

html body .chat-message.bot:not(.typing-indicator) p {
    margin: 0 0 15px 0 !important;
    line-height: 1.6 !important;
    color: #333333 !important;
}

/* ===== LISTS (EXCEPT TYPING INDICATOR) ===== */
html body .chat-message.bot:not(.typing-indicator) ul,
html body .chat-message.bot:not(.typing-indicator) ol {
    margin: 15px 0 !important;
    padding-left: 20px !important;
}

html body .chat-message.bot:not(.typing-indicator) li {
    margin: 8px 0 !important;
    line-height: 1.5 !important;
    color: #333333 !important;
}

html body .chat-message.bot:not(.typing-indicator) ul li {
    list-style-type: disc !important;
}

html body .chat-message.bot:not(.typing-indicator) ol li {
    list-style-type: decimal !important;
}

/* ===== EMPHASIS ===== */
html body .chat-message.bot strong {
    font-weight: 700 !important;
    color: #5a32a3 !important;
}

html body .chat-message.bot em {
    font-style: italic !important;
    color: #6f42c1 !important;
}

/* ===== LINKS ===== */
html body .chat-message.bot a {
    color: #007bff !important;
    text-decoration: underline !important;
}

html body .chat-message.bot a:hover {
    color: #0056b3 !important;
}

/* ===== CODE ===== */
html body .chat-message.bot code {
    background: #f8f9fa !important;
    padding: 2px 4px !important;
    border-radius: 3px !important;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace !important;
    font-size: 14px !important;
}

html body .chat-message.bot pre {
    background: #f8f9fa !important;
    padding: 15px !important;
    border-radius: 5px !important;
    overflow-x: auto !important;
    margin: 15px 0 !important;
}

/* ===== MOBILE RESPONSIVE ===== */
@media (max-width: 768px) {
    html body .chat-message.bot,
    html body .chat-message.bot.enhanced {
        padding: 15px !important;
        margin: 10px 0 !important;
        font-size: 15px !important;
    }
    
    html body .chat-message.bot h2 {
        font-size: 18px !important;
    }
    
    html body .chat-message.bot h3 {
        font-size: 16px !important;
    }
}

/* ===== ACCESSIBILITY ===== */
.high-contrast html body .chat-message.bot,
.high-contrast html body .chat-message.bot.enhanced {
    background: #ffffff !important;
    color: #000000 !important;
    border: 3px solid #000080 !important;
}

.large-fonts html body .chat-message.bot,
.large-fonts html body .chat-message.bot.enhanced {
    font-size: 18px !important;
    line-height: 1.8 !important;
}

/* ===== OVERRIDE ANY EXISTING INLINE STYLES ===== */
html body .chat-message.bot[style],
html body .chat-message.bot.enhanced[style] {
    background: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
    border-left: 4px solid #6f42c1 !important;
    padding: 20px !important;
    margin: 15px 0 !important;
}
*/