/**
 * Microsoft Customer Connect Chat Widget - Horsify Custom Styling
 * 
 * This CSS file provides additional styling for the chat widget that complements
 * the JavaScript customization callback. It includes:
 * - Focus states for accessibility (WCAG 2.1 AA)
 * - Hover effects for interactive elements
 * - Mobile-specific adjustments
 * - Dark mode support
 * - Z-index management
 * 
 * Note: Most styling is applied via the JavaScript callback in App.razor.
 * This file only contains styles that can't be applied programmatically.
 */

/* ============================================================================
   Chat Widget Container - Z-Index Management
   ========================================================================= */

/**
 * Ensure chat widget appears above page content but below modals
 * Z-index hierarchy: content (1) < chat (1040) < dropdown (1050) < modal (10000)
 */
#chatbot,
#mcc-iframe,
iframe[id*="chatbot"],
iframe[id*="mcc-"],
[id*="Microsoft_Omnichannel"] {
    z-index: 1040 !important;
}

/* Chat widget minimized button */
#chatbot-minimized,
#mcc-minimized,
[id*="chatbot"][id*="minimized"],
[id*="mcc-"][id*="minimized"] {
    z-index: 1040 !important;
}

/* ============================================================================
   Focus States - Accessibility (WCAG 2.1 AA - 2.4.7 Focus Visible)
   ========================================================================= */

/**
 * Visible focus indicators for keyboard navigation
 * Using Horsify's primary color (#2E4E3F) with sufficient contrast
 */
#chatbot *:focus,
#mcc-iframe *:focus,
iframe[id*="chatbot"] *:focus,
iframe[id*="mcc-"] *:focus {
    outline: 2px solid #2E4E3F !important;
    outline-offset: 2px !important;
}

/* Dark mode focus state - use accent color for better visibility */
[data-theme="dark"] #chatbot *:focus,
[data-theme="dark"] #mcc-iframe *:focus,
[data-theme="dark"] iframe[id*="chatbot"] *:focus,
[data-theme="dark"] iframe[id*="mcc-"] *:focus {
    outline: 2px solid #D3A71A !important;
    outline-offset: 2px !important;
}

/* Focus ring for buttons and interactive elements */
#chatbot button:focus-visible,
#mcc-iframe button:focus-visible,
iframe[id*="chatbot"] button:focus-visible,
iframe[id*="mcc-"] button:focus-visible {
    outline: 2px solid #2E4E3F !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgb(46 78 63 / 10%) !important;
}

[data-theme="dark"] #chatbot button:focus-visible,
[data-theme="dark"] #mcc-iframe button:focus-visible,
[data-theme="dark"] iframe[id*="chatbot"] button:focus-visible,
[data-theme="dark"] iframe[id*="mcc-"] button:focus-visible {
    outline: 2px solid #D3A71A !important;
    box-shadow: 0 0 0 4px rgb(211 167 26 / 20%) !important;
}

/* Focus ring for input fields */
#chatbot input:focus,
#chatbot textarea:focus,
#mcc-iframe input:focus,
#mcc-iframe textarea:focus {
    outline: 2px solid #2E4E3F !important;
    outline-offset: 0 !important;
    border-color: #2E4E3F !important;
    box-shadow: 0 0 0 3px rgb(46 78 63 / 10%) !important;
}

[data-theme="dark"] #chatbot input:focus,
[data-theme="dark"] #chatbot textarea:focus,
[data-theme="dark"] #mcc-iframe input:focus,
[data-theme="dark"] #mcc-iframe textarea:focus {
    outline: 2px solid #D3A71A !important;
    border-color: #D3A71A !important;
    box-shadow: 0 0 0 3px rgb(211 167 26 / 20%) !important;
}

/* ============================================================================
   Hover States - Interactive Feedback
   ========================================================================= */

/**
 * Hover effects for buttons and interactive elements
 * Provides visual feedback for mouse users
 */
#chatbot button:hover,
#mcc-iframe button:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 8px rgb(0 0 0 / 15%) !important;
    transition: transform 150ms ease, box-shadow 150ms ease !important;
}

#chatbot button:active,
#mcc-iframe button:active {
    transform: translateY(0) !important;
    box-shadow: 0 1px 3px rgb(0 0 0 / 10%) !important;
}

/* Send button hover - accent color */
#chatbot [class*="send"],
#chatbot [id*="send"],
#mcc-iframe [class*="send"],
#mcc-iframe [id*="send"] {
    transition: background-color 150ms ease, transform 100ms ease !important;
}

#chatbot [class*="send"]:hover,
#chatbot [id*="send"]:hover,
#mcc-iframe [class*="send"]:hover,
#mcc-iframe [id*="send"]:hover {
    background-color: #B8920E !important;
    transform: scale(1.02) !important;
}

/* Minimize/Close button hover */
#chatbot [class*="minimize"],
#chatbot [class*="close"],
#mcc-iframe [class*="minimize"],
#mcc-iframe [class*="close"] {
    transition: background-color 150ms ease, transform 150ms ease !important;
}

#chatbot [class*="minimize"]:hover,
#chatbot [class*="close"]:hover,
#mcc-iframe [class*="minimize"]:hover,
#mcc-iframe [class*="close"]:hover {
    background-color: #4A6F5C !important;
    transform: scale(1.05) !important;
}

/* ============================================================================
   Mobile Responsiveness - Touch Targets (WCAG 2.5.5 AAA)
   ========================================================================= */

/**
 * Ensure minimum 44x44px touch target size on mobile devices
 * WCAG 2.5.5 Target Size (Enhanced) - AAA compliance
 */
@media (width <= 768px) {
    /* All interactive elements must meet minimum size */
    #chatbot button,
    #chatbot a,
    #chatbot input[type="submit"],
    #chatbot input[type="button"],
    #mcc-iframe button,
    #mcc-iframe a {
        min-width: 44px !important;
        min-height: 44px !important;
        padding: 10px 14px !important;
    }
    
    /* Chat widget takes full screen on mobile */
    #chatbot,
    #mcc-iframe,
    iframe[id*="chatbot"],
    iframe[id*="mcc-"] {
        position: fixed !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        border-radius: 0 !important;
        margin: 0 !important;
    }
    
    /* Minimize button positioning on mobile */
    #chatbot-minimized,
    #mcc-minimized,
    [id*="chatbot"][id*="minimized"],
    [id*="mcc-"][id*="minimized"] {
        position: fixed !important;
        bottom: 16px !important;
        right: 16px !important;
        width: 56px !important;
        height: 56px !important;
        min-width: 56px !important;
        min-height: 56px !important;
    }
    
    /* Increase font size for better readability on mobile */
    #chatbot,
    #mcc-iframe {
        font-size: 16px !important;
    }
    
    /* Increase padding for touch-friendly spacing */
    #chatbot [class*="message"],
    #mcc-iframe [class*="message"] {
        padding: 12px 16px !important;
        margin-bottom: 10px !important;
    }
}

/* ============================================================================
   Tablet Responsiveness (768px - 1024px)
   ========================================================================= */

@media (width >= 768px) and (width <= 1024px) {
    #chatbot,
    #mcc-iframe,
    iframe[id*="chatbot"],
    iframe[id*="mcc-"] {
        width: 360px !important;
        height: 560px !important;
        max-height: 85vh !important;
    }
    
    #chatbot-minimized,
    #mcc-minimized {
        width: 56px !important;
        height: 56px !important;
    }
}

/* ============================================================================
   Desktop Responsiveness (1024px+)
   ========================================================================= */

@media (width >= 1024px) {
    #chatbot,
    #mcc-iframe,
    iframe[id*="chatbot"],
    iframe[id*="mcc-"] {
        position: fixed !important;
        bottom: 20px !important;
        right: 20px !important;
        width: 380px !important;
        height: 600px !important;
        max-height: 85vh !important;
    }
    
    #chatbot-minimized,
    #mcc-minimized {
        position: fixed !important;
        bottom: 20px !important;
        right: 20px !important;
        width: 60px !important;
        height: 60px !important;
    }
}

/* ============================================================================
   Dark Mode Enhancements
   ========================================================================= */

/**
 * Additional dark mode styling for elements that may not be covered
 * by the JavaScript customization callback
 */
[data-theme="dark"] #chatbot,
[data-theme="dark"] #mcc-iframe,
[data-theme="dark"] iframe[id*="chatbot"],
[data-theme="dark"] iframe[id*="mcc-"] {
    border-color: #404040 !important;
    box-shadow: 0 10px 25px rgb(0 0 0 / 50%) !important;
}

[data-theme="dark"] #chatbot *,
[data-theme="dark"] #mcc-iframe * {
    color-scheme: dark;
}

/* Scrollbar styling for dark mode */
[data-theme="dark"] #chatbot ::-webkit-scrollbar,
[data-theme="dark"] #mcc-iframe ::-webkit-scrollbar {
    width: 8px;
    background-color: #2d2d2d;
}

[data-theme="dark"] #chatbot ::-webkit-scrollbar-thumb,
[data-theme="dark"] #mcc-iframe ::-webkit-scrollbar-thumb {
    background-color: #404040;
    border-radius: 4px;
}

[data-theme="dark"] #chatbot ::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] #mcc-iframe ::-webkit-scrollbar-thumb:hover {
    background-color: #505050;
}

/* ============================================================================
   Animations - Smooth Transitions
   ========================================================================= */

/**
 * Smooth animations for chat widget opening/closing
 * Respects prefers-reduced-motion for accessibility
 */
@media (prefers-reduced-motion: no-preference) {
    #chatbot,
    #mcc-iframe,
    iframe[id*="chatbot"],
    iframe[id*="mcc-"] {
        transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1),
                    opacity 200ms ease,
                    box-shadow 200ms ease !important;
    }
    
    #chatbot-minimized,
    #mcc-minimized {
        transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1),
                    opacity 150ms ease !important;
    }
    
    /* Slide up animation when opening */
    #chatbot[data-state="opening"],
    #mcc-iframe[data-state="opening"] {
        animation: slide-up 300ms cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    /* Fade out animation when closing */
    #chatbot[data-state="closing"],
    #mcc-iframe[data-state="closing"] {
        animation: fade-out 200ms ease;
    }
}

@keyframes slide-up {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

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

@keyframes fade-out {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

/* Users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    #chatbot,
    #chatbot *,
    #mcc-iframe,
    #mcc-iframe * {
        animation: none !important;
        transition: none !important;
    }
}

/* ============================================================================
   Color Contrast Enhancements (WCAG 2.1 AA - 1.4.3 Contrast Minimum)
   ========================================================================= */

/**
 * Ensure sufficient contrast for text readability
 * Normal text: 4.5:1, Large text: 3:1, UI components: 3:1
 */

/* Ensure text on primary color background meets 4.5:1 contrast */
#chatbot [style*="background-color: #2E4E3F"],
#chatbot [style*="background: #2E4E3F"],
#mcc-iframe [style*="background-color: #2E4E3F"],
#mcc-iframe [style*="background: #2E4E3F"] {
    color: #FFF !important;
}

/* Ensure text on accent color background meets 4.5:1 contrast */
#chatbot [style*="background-color: #D3A71A"],
#chatbot [style*="background: #D3A71A"],
#mcc-iframe [style*="background-color: #D3A71A"],
#mcc-iframe [style*="background: #D3A71A"] {
    color: #212529 !important;
    font-weight: 600;
}

/* Secondary text should have sufficient contrast */
#chatbot [class*="secondary"],
#chatbot [class*="muted"],
#mcc-iframe [class*="secondary"],
#mcc-iframe [class*="muted"] {
    color: #495057 !important;
}

[data-theme="dark"] #chatbot [class*="secondary"],
[data-theme="dark"] #chatbot [class*="muted"],
[data-theme="dark"] #mcc-iframe [class*="secondary"],
[data-theme="dark"] #mcc-iframe [class*="muted"] {
    color: #A0A0A0 !important;
}

/* ============================================================================
   Print Styles - Hide Chat Widget When Printing
   ========================================================================= */

@media print {
    #chatbot,
    #chatbot-minimized,
    #mcc-iframe,
    #mcc-minimized,
    iframe[id*="chatbot"],
    iframe[id*="mcc-"],
    [id*="Microsoft_Omnichannel"] {
        display: none !important;
    }
}

/* ============================================================================
   Loading State - Skeleton Screen
   ========================================================================= */

/**
 * Show a subtle loading indicator while chat widget initializes
 */
#chatbot[data-loading="true"],
#mcc-iframe[data-loading="true"] {
    background: linear-gradient(
        90deg,
        #f0f0f0 0%,
        #f8f8f8 50%,
        #f0f0f0 100%
    );
    background-size: 200% 100%;
    animation: loading 1.5s ease-in-out infinite;
}

[data-theme="dark"] #chatbot[data-loading="true"],
[data-theme="dark"] #mcc-iframe[data-loading="true"] {
    background: linear-gradient(
        90deg,
        #1a1a1a 0%,
        #2d2d2d 50%,
        #1a1a1a 100%
    );
    background-size: 200% 100%;
}

@keyframes loading {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* ============================================================================
   High Contrast Mode Support (WCAG 2.1 AA - 1.4.11 Non-text Contrast)
   ========================================================================= */

@media (prefers-contrast: high) {
    #chatbot,
    #mcc-iframe {
        border: 2px solid currentcolor !important;
    }
    
    #chatbot button,
    #mcc-iframe button {
        border: 2px solid currentcolor !important;
    }
    
    #chatbot *:focus,
    #mcc-iframe *:focus {
        outline: 3px solid currentcolor !important;
        outline-offset: 2px !important;
    }
}