/* ==========================================================================
   SMOKYAI MOBILE RESPONSIVE STYLES
   Full Mobile Compatibility & Responsive Design
   ========================================================================== */

/* ==========================================================================
   MOBILE VIEWPORT & BASE STYLES
   ========================================================================== */

/* Mobile-first approach */
.smokyai-chat-widget {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    touch-action: manipulation;
}

/* Fix for iOS viewport units */
@supports (-webkit-touch-callout: none) {
    @media (max-width: 768px) {
        .smokyai-chat-window {
            height: -webkit-fill-available !important;
        }
    }
}

/* Improve touch performance */
.smokyai-chat-toggle,
.smokyai-starter-button,
.smokyai-suggestion-btn,
.smokyai-send-btn,
.smokyai-product-btn,
.minimize-btn {
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
}

/* Prevent scroll blocking on chat messages */
.smokyai-chat-messages {
    touch-action: pan-y !important;
}

/* ==========================================================================
   CHAT TOGGLE BUTTON - MOBILE OPTIMIZED
   ========================================================================== */

/* Mobile chat toggle */
@media (max-width: 768px) {
    .smokyai-chat-toggle {
        width: 56px !important;
        height: 56px !important;
        border-radius: 50% !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
        backdrop-filter: blur(10px) !important;
        border: 2px solid rgba(255, 255, 255, 0.2) !important;
        z-index: 999998 !important;
        cursor: pointer !important;
        pointer-events: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .smokyai-chat-toggle .chat-icon {
        width: 24px !important;
        height: 24px !important;
        pointer-events: none !important;
    }
    
    .smokyai-chat-toggle .chat-icon svg {
        width: 24px !important;
        height: 24px !important;
        pointer-events: none !important;
    }
}

/* Small mobile devices */
@media (max-width: 480px) {
    .smokyai-chat-toggle {
        width: 50px !important;
        height: 50px !important;
    }
    
    .smokyai-chat-toggle .chat-icon {
        width: 20px !important;
        height: 20px !important;
    }
}

/* ==========================================================================
   CHAT WINDOW - MOBILE LAYOUT
   ========================================================================== */

/* Mobile chat window */
@media (max-width: 768px) {
    .smokyai-chat-window {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important; /* Dynamic viewport height for mobile browsers */
        max-width: none !important;
        max-height: none !important;
        border-radius: 0 !important;
        z-index: 999999 !important;
        transform: translateY(100%) !important;
        transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }
    
    .smokyai-chat-widget.smokyai-chat-open .smokyai-chat-window,
    .smokyai-chat-window.open {
        transform: translateY(0) !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    .smokyai-chat-header {
        padding: 16px !important;
        background: var(--smokyai-luxury-gradient, linear-gradient(135deg, #D4AF37 0%, #F7E98E 50%, #B8860B 100%)) !important;
        border-bottom: 2px solid rgba(0, 0, 0, 0.1) !important;
        flex-shrink: 0 !important;
        min-height: 60px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }
    
    .smokyai-chat-messages {
        flex: 1 !important;
        padding: 16px !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        min-height: 0 !important;
        max-height: none !important;
    }
    
    .smokyai-chat-input-area {
        padding: 16px !important;
        background: var(--smokyai-luxury-card, #1a1a2e) !important;
        border-top: 2px solid var(--smokyai-luxury-border, rgba(212, 175, 55, 0.3)) !important;
        flex-shrink: 0 !important;
        min-height: 80px !important;
    }
}

/* ==========================================================================
   CHAT MESSAGES - MOBILE LAYOUT
   ========================================================================== */

@media (max-width: 768px) {
    .smokyai-message {
        margin-bottom: 16px !important;
        max-width: 90% !important;
    }
    
    .smokyai-message-content {
        padding: 12px 16px !important;
        font-size: 15px !important;
        line-height: 1.5 !important;
        border-radius: 18px !important;
    }
    
    .smokyai-message.user {
        align-self: flex-end !important;
        margin-left: 10% !important;
    }
    
    .smokyai-message.bot,
    .smokyai-message.assistant {
        align-self: flex-start !important;
        margin-right: 10% !important;
    }
}

/* Small mobile adjustments */
@media (max-width: 480px) {
    .smokyai-chat-header {
        padding: 12px !important;
        min-height: 56px !important;
    }
    
    .smokyai-chat-messages {
        padding: 12px !important;
    }
    
    .smokyai-chat-input-area {
        padding: 12px !important;
        min-height: 70px !important;
    }
    
    .smokyai-message {
        max-width: 95% !important;
    }
    
    .smokyai-message-content {
        padding: 10px 14px !important;
        font-size: 14px !important;
    }
}

/* ==========================================================================
   INPUT AREA - MOBILE OPTIMIZED
   ========================================================================== */

@media (max-width: 768px) {
    .smokyai-chat-input-area {
        gap: 12px !important;
        align-items: flex-end !important;
    }
    
    .smokyai-message-input {
        min-height: 44px !important;
        max-height: 120px !important;
        font-size: 16px !important; /* Prevent zoom on iOS */
        padding: 12px 16px !important;
        border-radius: 22px !important;
        resize: none !important;
    }
    
    .smokyai-send-btn {
        width: 44px !important;
        height: 44px !important;
        border-radius: 22px !important;
        font-size: 18px !important;
        flex-shrink: 0 !important;
        min-width: 44px !important;
    }
}

@media (max-width: 480px) {
    .smokyai-message-input {
        font-size: 16px !important;
        padding: 10px 14px !important;
        min-height: 40px !important;
    }
    
    .smokyai-send-btn {
        width: 40px !important;
        height: 40px !important;
        font-size: 16px !important;
    }
}

/* ==========================================================================
   BUTTONS & SUGGESTIONS - MOBILE
   ========================================================================== */

@media (max-width: 768px) {
    .smokyai-starter-button,
    .smokyai-suggestion-btn {
        padding: 12px 16px !important;
        font-size: 14px !important;
        margin-bottom: 8px !important;
        min-height: 44px !important;
        border-radius: 22px !important;
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: transparent !important;
    }
    
    .smokyai-suggestions {
        padding: 16px !important;
        gap: 8px !important;
    }
}

@media (max-width: 480px) {
    .smokyai-starter-button,
    .smokyai-suggestion-btn {
        padding: 10px 14px !important;
        font-size: 13px !important;
        min-height: 40px !important;
    }
    
    .smokyai-suggestions {
        padding: 12px !important;
    }
}

/* ==========================================================================
   WELCOME MESSAGE - MOBILE
   ========================================================================== */

@media (max-width: 768px) {
    .smokyai-welcome-message-inline {
        margin: 16px !important;
        padding: 16px 20px !important;
        font-size: 14px !important;
        border-radius: 20px !important;
        touch-action: manipulation !important;
    }
    
    .smokyai-welcome-message-inline .welcome-content {
        gap: 10px !important;
    }
    
    .smokyai-welcome-message-inline .welcome-icon {
        font-size: 18px !important;
    }
}

@media (max-width: 480px) {
    .smokyai-welcome-message-inline {
        margin: 12px !important;
        padding: 14px 18px !important;
        font-size: 13px !important;
    }
}

/* ==========================================================================
   PRODUCT CARDS - MOBILE RESPONSIVE
   ========================================================================== */

@media (max-width: 768px) {
    .smokyai-products-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        padding: 16px !important;
    }
    
    .smokyai-product-card {
        padding: 16px !important;
        border-radius: 16px !important;
        margin-bottom: 12px !important;
    }
    
    .smokyai-product-title {
        font-size: 16px !important;
        margin-bottom: 8px !important;
    }
    
    .smokyai-product-price {
        font-size: 18px !important;
        margin-bottom: 12px !important;
    }
    
    .smokyai-product-btn {
        padding: 12px 20px !important;
        font-size: 14px !important;
        min-height: 44px !important;
        border-radius: 22px !important;
        width: 100% !important;
    }
}

/* ==========================================================================
   HEADER & LOGO - MOBILE
   ========================================================================== */

@media (max-width: 768px) {
    .smokyai-chat-header {
        min-height: 60px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }
    
    .smokyai-chat-logo {
        flex: 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }
    
    .smokyai-logo-image {
        max-height: 36px !important;
        max-width: 120px !important;
    }
    
    .smokyai-logo-placeholder {
        font-size: 16px !important;
        gap: 8px !important;
    }
    
    .smokyai-logo-placeholder .ai-brain {
        font-size: 20px !important;
    }
    
    .minimize-btn {
        width: 36px !important;
        height: 36px !important;
        font-size: 16px !important;
        border-radius: 50% !important;
        flex-shrink: 0 !important;
    }
}

@media (max-width: 480px) {
    .smokyai-chat-header {
        padding: 16px 12px 12px !important;
        min-height: 56px !important;
    }
    
    .smokyai-logo-image {
        max-height: 32px !important;
        max-width: 100px !important;
    }
    
    .smokyai-logo-placeholder {
        font-size: 14px !important;
        gap: 6px !important;
    }
    
    .minimize-btn {
        width: 32px !important;
        height: 32px !important;
        font-size: 14px !important;
    }
}

/* ==========================================================================
   POSITION CLASSES - MOBILE OVERRIDE
   ========================================================================== */

@media (max-width: 768px) {
    /* Override all position classes on mobile */
    .smokyai-position-bottom-right,
    .smokyai-position-bottom-left,
    .smokyai-position-top-right,
    .smokyai-position-top-left,
    .smokyai-position-center-right,
    .smokyai-position-center-left {
        position: fixed !important;
    }
    
    /* Chat toggle positions on mobile */
    .smokyai-position-bottom-right .smokyai-chat-toggle {
        bottom: 20px !important;
        right: 20px !important;
    }
    
    .smokyai-position-bottom-left .smokyai-chat-toggle {
        bottom: 20px !important;
        left: 20px !important;
    }
    
    .smokyai-position-top-right .smokyai-chat-toggle {
        top: 20px !important;
        right: 20px !important;
    }
    
    .smokyai-position-top-left .smokyai-chat-toggle {
        top: 20px !important;
        left: 20px !important;
    }
    
    .smokyai-position-center-right .smokyai-chat-toggle {
        top: 50% !important;
        right: 20px !important;
        transform: translateY(-50%) !important;
    }
    
    .smokyai-position-center-left .smokyai-chat-toggle {
        top: 50% !important;
        left: 20px !important;
        transform: translateY(-50%) !important;
    }
}

@media (max-width: 480px) {
    .smokyai-position-bottom-right .smokyai-chat-toggle,
    .smokyai-position-bottom-left .smokyai-chat-toggle {
        bottom: 16px !important;
    }
    
    .smokyai-position-bottom-right .smokyai-chat-toggle {
        right: 16px !important;
    }
    
    .smokyai-position-bottom-left .smokyai-chat-toggle {
        left: 16px !important;
    }
    
    .smokyai-position-top-right .smokyai-chat-toggle,
    .smokyai-position-top-left .smokyai-chat-toggle {
        top: 16px !important;
    }
    
    .smokyai-position-top-right .smokyai-chat-toggle {
        right: 16px !important;
    }
    
    .smokyai-position-top-left .smokyai-chat-toggle {
        left: 16px !important;
    }
    
    .smokyai-position-center-right .smokyai-chat-toggle {
        right: 16px !important;
    }
    
    .smokyai-position-center-left .smokyai-chat-toggle {
        left: 16px !important;
    }
}

/* ==========================================================================
   SCROLLING & TOUCH IMPROVEMENTS
   ========================================================================== */

@media (max-width: 768px) {
    .smokyai-chat-messages {
        /* Smooth scrolling on mobile */
        scroll-behavior: smooth !important;
        -webkit-overflow-scrolling: touch !important;
        
        /* Hide scrollbar completely */
        scrollbar-width: none !important; /* Firefox */
        -ms-overflow-style: none !important; /* IE and Edge */
    }
    
    /* Hide scrollbar for webkit browsers */
    .smokyai-chat-messages::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        background: transparent !important;
    }
}

/* ==========================================================================
   KEYBOARD & INPUT IMPROVEMENTS
   ========================================================================== */

@media (max-width: 768px) {
    /* Prevent zoom when focusing input on iOS */
    .smokyai-message-input {
        font-size: 16px !important;
        transform: scale(1) !important;
    }
    
    /* Adjust layout when keyboard is open */
    .smokyai-chat-widget.keyboard-open .smokyai-chat-window {
        height: calc(100vh - 60px) !important;
        height: calc(100dvh - 60px) !important;
    }
    
    /* Better touch targets */
    .smokyai-starter-button,
    .smokyai-suggestion-btn,
    .smokyai-send-btn,
    .smokyai-product-btn {
        min-height: 44px !important;
        min-width: 44px !important;
        touch-action: manipulation !important;
    }
}

/* ==========================================================================
   LANDSCAPE ORIENTATION
   ========================================================================== */

@media (max-width: 768px) and (orientation: landscape) {
    .smokyai-chat-header {
        padding: 12px 16px !important;
        min-height: 50px !important;
    }
    
    .smokyai-chat-input-area {
        padding: 12px 16px !important;
        min-height: 70px !important;
    }
    
    .smokyai-chat-messages {
        padding: 12px 16px !important;
    }
}

/* ==========================================================================
   ACCESSIBILITY IMPROVEMENTS
   ========================================================================== */

@media (max-width: 768px) {
    /* High contrast mode support */
    @media (prefers-contrast: high) {
        .smokyai-chat-toggle,
        .smokyai-starter-button,
        .smokyai-suggestion-btn,
        .smokyai-send-btn {
            border-width: 3px !important;
        }
    }
    
    /* Reduced motion support */
    @media (prefers-reduced-motion: reduce) {
        .smokyai-chat-window {
            transition: none !important;
        }
        
        * {
            animation: none !important;
            transition: none !important;
        }
    }
    
    /* Focus indicators */
    .smokyai-message-input:focus,
    .smokyai-starter-button:focus,
    .smokyai-suggestion-btn:focus,
    .smokyai-send-btn:focus {
        outline: 3px solid var(--smokyai-gold-primary, #D4AF37) !important;
        outline-offset: 2px !important;
    }
}

/* ==========================================================================
   LOADING STATES - MOBILE
   ========================================================================== */

@media (max-width: 768px) {
    .smokyai-typing-indicator {
        padding: 12px 16px !important;
        margin: 8px 16px !important;
        border-radius: 18px !important;
    }
    
    .smokyai-typing-indicator .dot {
        width: 8px !important;
        height: 8px !important;
        margin: 0 3px !important;
    }
}

/* ==========================================================================
   SAFE AREA INSETS (iPhone X+)
   ========================================================================== */

@supports (padding: max(0px)) {
    @media (max-width: 768px) {
        .smokyai-chat-window {
            padding-top: env(safe-area-inset-top, 0) !important;
            padding-bottom: env(safe-area-inset-bottom, 0) !important;
        }
        
        .smokyai-chat-header {
            padding-top: max(16px, env(safe-area-inset-top)) !important;
        }
        
        .smokyai-chat-input-area {
            padding-bottom: max(16px, env(safe-area-inset-bottom)) !important;
        }
        
        .smokyai-chat-toggle {
            bottom: max(20px, env(safe-area-inset-bottom)) !important;
        }
    }
}