/* Mobile Responsive Styles for Chat Widget */
:root {
    --corp-red: #E02020;
    --corp-red-bright: #FF3030;
    --corp-red-dim: #AA0033;
    --cyber-black: #0A0A0A;
    --cyber-dark: #111111;
    --cyber-grey: #1A1A1A;
    --pure-white: #FFFFFF;
    --cyber-white: #F0F0F0;
    --grid-red: rgba(224, 32, 32, 0.5);
    --glow-red: rgba(224, 32, 32, 0.25);
}

/* Mobile Responsive Styles */
@media (max-width: 768px) {
    #chat-widget-container {
        width: 100% !important;
        height: 100% !important;
        bottom: 0 !important;
        right: 0 !important;
        left: 0 !important;
        top: 0 !important;
        border-radius: 0 !important;
        position: fixed !important;
        margin: 0 !important;
        z-index: 9999 !important;
    }
    
    #chat-widget-body {
        padding: 15px !important;
        -webkit-overflow-scrolling: touch !important;
        max-height: calc(100% - 110px) !important;
    }
    
    #chat-widget-body p, 
    #chat-widget-body button {
        padding: 15px !important;
        font-size: 14px !important;
    }
    
    #chat-button-container {
        bottom: 15px !important;
        right: 15px !important;
        z-index: 9998 !important;
    }
    
    #chat-widget-button {
        width: 60px !important;
        height: 60px !important;
        box-shadow: 0 4px 15px var(--glow-red) !important;
    }
    
    #chat-widget-button svg {
        width: 30px !important;
        height: 30px !important;
    }
    
    #chat-widget-footer {
        padding: 10px !important;
        position: sticky !important;
        bottom: 0 !important;
        z-index: 10 !important;
    }
    
    #chat-widget-input {
        font-size: 14px !important;
        padding: 10px !important;
    }
    
    #chat-widget-send {
        padding: 10px 15px !important;
        font-size: 14px !important;
    }
    
    #chat-widget-header {
        padding: 12px 15px !important;
        font-size: 16px !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 10 !important;
    }
}

/* Fix for iOS Safari viewport height issues */
@supports (-webkit-touch-callout: none) {
    #chat-widget-container {
        height: -webkit-fill-available !important;
    }
    
    #chat-widget-body {
        max-height: calc(100vh - 110px) !important;
        max-height: calc(-webkit-fill-available - 110px) !important;
    }
}

/* Prevent body scrolling when chat is open on mobile */
body.chat-open {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
}