/**
 * Support Chat - Responsive Styles
 * سبک‌های ریسپانسیو چت پشتیبانی
 */

/* موبایل - تا 640px */
@media (max-width: 640px) {
    #chat-popup {
        width: 100vw !important;
        height: 100vh !important;
        bottom: 0 !important;
        right: 0 !important;
        left: 0 !important;
        top: 0 !important;
        border-radius: 0 !important;
        border: none !important;
        max-width: none !important;
        max-height: none !important;
    }
    
    #chatbot {
        width: 56px !important;
        height: 56px !important;
        bottom: 16px !important;
        right: 16px !important;
    }
}

/* تبلت - 641px تا 1024px */
@media (min-width: 641px) and (max-width: 1024px) {
    #chat-popup {
        width: 380px !important;
        height: 600px !important;
        bottom: 80px !important;
        right: 16px !important;
    }
    
    #chatbot {
        bottom: 20px !important;
        right: 20px !important;
    }
}

/* دسکتاپ - بالای 1024px */
@media (min-width: 1025px) {
    #chat-popup {
        width: 384px !important;
        height: 575px !important;
        bottom: 96px !important;
        right: 24px !important;
    }
    
    /* اطمینان از اینکه messages container ارتفاع صحیح دارد */
    #messages-container {
        max-height: none !important;
    }
}

/* اطمینان از flex container صحیح برای chat-popup */
#chat-popup {
    display: flex !important;
    flex-direction: column !important;
}

/* وقتی چت بسته است، pointer events را غیرفعال کن */
#chat-popup.hidden {
    pointer-events: none !important;
}

/* وقتی چت باز است، pointer events را فعال کن */
#chat-popup:not(.hidden) {
    pointer-events: auto !important;
}

/* اطمینان از flex container صحیح برای chat-interface */
#chat-interface {
    min-height: 0 !important;
    overflow: hidden !important;
}

/* رفع مشکل overflow */
#messages-container {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: 100% !important;
    scroll-behavior: smooth !important;
}

/* اطمینان از ثابت ماندن input area در پایین */
#chat-interface > div:last-child {
    flex-shrink: 0 !important;
}

/* اطمینان از ثابت ماندن header در بالا */
#chat-popup > div:first-child {
    flex-shrink: 0 !important;
}

/* فرم شماره تماس - ثابت در بالا (بیرون از scroll container) */
#phone-form-section {
    flex-shrink: 0 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
}

/* welcome-form باید فضای موجود را پر کند */
#welcome-form {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
}

/* contact-request باید بین messages و input باشد */
#contact-request {
    flex-shrink: 0 !important;
}

/* اطمینان از اینکه hidden class به درستی کار می‌کند */
.hidden {
    display: none !important;
}

/* Smooth transition برای chat-interface */
#chat-interface {
    transition: opacity 0.3s ease-in-out;
}

/* اطمینان از اینکه chat-interface وقتی hidden نیست، flex باشد */
#chat-interface:not(.hidden) {
    display: flex !important;
}

/* رفع مشکل overflow در موبایل */
@media (max-width: 640px) {
    #messages-container {
        max-height: calc(100vh - 200px) !important;
        padding: 16px !important;
    }
    
    /* فرم welcome در موبایل */
    #welcome-form {
        padding: 12px !important;
    }
    
    /* phone form section در موبایل */
    #phone-form-section {
        padding: 6px !important;
    }
    
    /* header در موبایل */
    #chat-popup > div:first-child {
        padding: 12px !important;
        border-radius: 0 !important;
    }
    
    /* input area در موبایل */
    #message-form {
        padding: 8px !important;
    }
}

/* اطمینان از اینکه popup بالای همه چیز باشد */
#chat-popup {
    z-index: 9999 !important;
}

#chatbot {
    z-index: 9998 !important;
}

/* رفع مشکل scroll در iOS */
@supports (-webkit-touch-callout: none) {
    #chat-popup {
        -webkit-overflow-scrolling: touch;
    }
    
    #messages-container {
        -webkit-overflow-scrolling: touch;
    }
}

/* اطمینان از خوانایی در dark mode */
@media (prefers-color-scheme: dark) {
    /* Container اصلی */
    #chat-popup {
        background-color: #1f2937 !important;
        border-color: #374151 !important;
    }
    
    /* Header - رنگ‌های روشن‌تر برای خوانایی بهتر */
    #chat-popup > div:first-child {
        background: linear-gradient(to right, #1e40af, #1d4ed8) !important;
    }
    
    /* Phone Form Section - ثابت در بالا با background مناسب */
    #phone-form-section {
        background-color: #1e293b !important;
        border-color: #334155 !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
    }
    
    #phone-form-section label {
        color: #93c5fd !important;
    }
    
    /* Success Message در dark mode */
    #phone-form-section div[style*="background-color: #dcfce7"] {
        background-color: #064e3b !important;
        border-color: #059669 !important;
    }
    
    #phone-form-section div[style*="background-color: #dcfce7"] i,
    #phone-form-section div[style*="background-color: #dcfce7"] span {
        color: #6ee7b7 !important;
    }
    
    #phone-form-section .text-blue-700 {
        color: #93c5fd !important;
    }
    
    #phone-form-section .bg-blue-100 {
        background-color: #1e3a5f !important;
    }
    
    #phone-form-section .border-blue-100 {
        border-color: #334155 !important;
    }
    
    #chat-popup .text-blue-700 {
        color: #93c5fd !important;
    }
    
    #chat-popup .text-blue-800 {
        color: #93c5fd !important;
    }
    
    #chat-popup .text-blue-900 {
        color: #bfdbfe !important;
    }
    
    #chat-popup .bg-blue-50 {
        background-color: #1e293b !important;
    }
    
    #chat-popup .bg-blue-100 {
        background-color: #1e3a5f !important;
    }
    
    #chat-popup .border-blue-100 {
        border-color: #334155 !important;
    }
    
    #chat-popup .border-blue-200 {
        border-color: #475569 !important;
    }
    
    /* Input Fields */
    #chat-popup input[type="tel"],
    #chat-popup input[type="text"] {
        background-color: #374151 !important;
        border-color: #4b5563 !important;
        color: #f9fafb !important;
    }
    
    #chat-popup input[type="tel"]::placeholder,
    #chat-popup input[type="text"]::placeholder {
        color: #9ca3af !important;
    }
    
    #chat-popup input[type="tel"]:focus,
    #chat-popup input[type="text"]:focus {
        background-color: #374151 !important;
        border-color: #3b82f6 !important;
        outline-color: #3b82f6 !important;
    }
    
    /* Welcome Form */
    #welcome-form {
        background-color: #1f2937 !important;
    }
    
    #welcome-form .text-gray-800 {
        color: #f9fafb !important;
    }
    
    #welcome-form .text-gray-600 {
        color: #d1d5db !important;
    }
    
    #welcome-form .text-gray-700 {
        color: #e5e7eb !important;
    }
    
    #welcome-form .border-gray-300 {
        border-color: #4b5563 !important;
    }
    
    /* Messages Container */
    #messages-container {
        background-color: #111827 !important;
    }
    
    /* Contact Request Section */
    #contact-request {
        background-color: #1e293b !important;
        border-color: #334155 !important;
    }
    
    /* Input Area */
    #chat-interface > div:last-child {
        background-color: #1f2937 !important;
        border-color: #374151 !important;
    }
    
    #chat-interface .border-gray-200 {
        border-color: #374151 !important;
    }
    
    #chat-interface .border-gray-300 {
        border-color: #4b5563 !important;
    }
    
    #chat-interface .text-gray-500 {
        color: #9ca3af !important;
    }
    
    #chat-interface .text-gray-700 {
        color: #d1d5db !important;
    }
    
    /* Buttons */
    #chat-popup .bg-blue-600 {
        background-color: #2563eb !important;
    }
    
    #chat-popup .bg-blue-600:hover,
    #chat-popup .hover\:bg-blue-700:hover {
        background-color: #1d4ed8 !important;
    }
    
    #chat-popup .bg-blue-900 {
        background-color: #1e40af !important;
    }
    
    #chat-popup .bg-blue-900:hover,
    #chat-popup .hover\:bg-blue-800:hover {
        background-color: #1e3a8a !important;
    }
    
    /* Icon Colors */
    #chat-popup .text-blue-900:not(.text-xs) {
        color: #60a5fa !important;
    }
    
    /* Skip Button */
    #skip-contact {
        color: #9ca3af !important;
    }
    
    #skip-contact:hover {
        color: #d1d5db !important;
    }
    
    /* Typing Indicator */
    #typing-indicator {
        color: #9ca3af !important;
    }
    
    /* Smooth transition برای dark mode */
    #chat-interface {
        transition: opacity 0.3s ease-in-out !important;
    }
    
    /* Message Bubbles - System Messages */
    #messages-container > div > div[style*="background: #e5e7eb"] {
        background: #374151 !important;
        color: #d1d5db !important;
    }
    
    #messages-container > div > div[style*="background: #e5e7eb"] span {
        color: #9ca3af !important;
    }
    
    /* Message Bubbles - User Messages */
    #messages-container > div > div > div[style*="background: #1e40af"] {
        background: #2563eb !important;
        color: white !important;
    }
    
    /* Message Bubbles - Agent Messages */
    #messages-container > div > div > div[style*="background: white"] {
        background: #374151 !important;
        border-color: #4b5563 !important;
        color: #f9fafb !important;
    }
    
    #messages-container > div > div > div[style*="background: white"] p[style*="color: #1f2937"] {
        color: #f9fafb !important;
    }
    
    #messages-container > div > div > div[style*="background: white"] p[style*="color: #059669"] {
        color: #34d399 !important;
    }
    
    #messages-container > div > div > div[style*="background: white"] span {
        color: #9ca3af !important;
    }
}