/* ====================================================
   1. CSS Reset - قطع کامل ارتباط با استایل‌های قالب سایت
==================================================== */
.custom-hmyt-chatbot-container,
.custom-hmyt-chatbot-container div,
.custom-hmyt-chatbot-container span,
.custom-hmyt-chatbot-container h3,
.custom-hmyt-chatbot-container textarea,
.custom-hmyt-chatbot-container button {
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    outline: none !important;
    background: transparent !important; /* ریست کردن بک‌گراندها */
    color: #333 !important;
    text-decoration: none !important;
    list-style: none !important;
    line-height: normal !important;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    box-shadow: none !important;
}

/* ====================================================
   2. Container - استایل گلس‌مورفیسم (Glassmorphism)
==================================================== */
.custom-hmyt-chatbot-container {
    /* پس زمینه نیمه شفاف و هاله تار شیشه‌ای */
    background: rgba(255, 255, 255, 0.35) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    
    /* حاشیه ظریف شیشه‌ای و سایه عمق‌دار */
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    border-radius: 20px !important;
    box-shadow: 0 15px 45px rgba(31, 38, 135, 0.1) !important;
    
    display: flex !important;
    flex-direction: column !important;
    height: 550px !important;
    width: 100% !important;
    direction: rtl !important;
    position: relative !important;
    overflow: hidden !important;
    z-index: 99 !important;
}

/* ====================================================
   3. Header - هدر چت بات
==================================================== */
.custom-hmyt-chat-header {
    background: rgba(255, 255, 255, 0.4) !important;
    padding: 20px !important;
    text-align: center !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5) !important;
    backdrop-filter: blur(10px) !important;
}

.custom-hmyt-chat-header h3 {
    font-size: 17px !important;
    font-weight: 800 !important;
    /* اعمال گرادیانت جمنای روی متن هدر */
    background: linear-gradient(135deg, #1A73E8, #C58AF9, #F28B82) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    letter-spacing: 0.5px !important;
}

/* ====================================================
   4. Messages - محفظه پیام‌ها
==================================================== */
.custom-hmyt-chat-messages {
    flex: 1 !important;
    padding: 20px !important;
    overflow-y: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
    /* حذف بک‌گراند برای دیده شدن افکت شیشه‌ای بدنه */
    background: transparent !important; 
}

.custom-msg-user, 
.custom-msg-bot {
    display: flex !important;
    width: 100% !important;
}

.custom-msg-user { justify-content: flex-start !important; }
.custom-msg-bot { justify-content: flex-end !important; }

/* حباب پیام‌ها */
.custom-msg-user .msg-bubble,
.custom-msg-bot .msg-bubble {
    max-width: 85% !important;
    padding: 14px 18px !important;
    border-radius: 16px !important;
    font-size: 14.5px !important;
    line-height: 1.8 !important;
    word-wrap: break-word !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03) !important;
}

/* حباب کاربر */
.custom-msg-user .msg-bubble {
    background: rgba(255, 255, 255, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.9) !important;
    color: #2c2c2c !important;
    border-bottom-right-radius: 4px !important;
}

/* حباب هوش مصنوعی (تم ملایم بنفش/آبی) */
.custom-msg-bot .msg-bubble {
    background: rgba(239, 230, 255, 0.65) !important;
    border: 1px solid rgba(212, 185, 255, 0.4) !important;
    color: #1a0b2e !important;
    border-bottom-left-radius: 4px !important;
}

/* ====================================================
   5. Input Area - بخش تایپ و دکمه ارسال
==================================================== */
.custom-hmyt-chat-input-area {
    display: flex !important;
    padding: 15px 20px !important;
    background: rgba(255, 255, 255, 0.5) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.6) !important;
    align-items: center !important;
    gap: 12px !important;
    backdrop-filter: blur(10px) !important;
}

/* فیلد ورودی متن */
.custom-hmyt-chat-input-area textarea.custom-hmyt-input {
    flex: 1 !important;
    background: rgba(255, 255, 255, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    border-radius: 12px !important;
    padding: 12px 15px !important;
    resize: none !important;
    height: 48px !important;
    font-size: 14px !important;
    color: #333 !important;
    transition: all 0.3s ease !important;
    overflow-y: auto !important;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.02) !important;
}

.custom-hmyt-chat-input-area textarea.custom-hmyt-input:focus { 
    background: rgba(255, 255, 255, 0.9) !important;
    border-color: #C58AF9 !important;
    box-shadow: 0 0 0 3px rgba(197, 138, 249, 0.2) !important;
}

/* دکمه ارسال با استایل و انیمیشن جمنای */
.custom-hmyt-chat-input-area button.custom-hmyt-send-btn {
    height: 48px !important;
    padding: 0 22px !important;
    border-radius: 12px !important;
    font-weight: 800 !important;
    font-size: 14px !important;
    color: #ffffff !important;
    cursor: pointer !important;
    
    /* گرادیانت رنگ‌های جمنای */
    background: linear-gradient(135deg, #1A73E8, #C58AF9, #F28B82, #1A73E8) !important;
    background-size: 300% 300% !important;
    
    /* انیمیشن حرکت طیف رنگی */
    animation: geminiAI 4s ease infinite !important;
    
    box-shadow: 0 6px 15px rgba(197, 138, 249, 0.3) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.custom-hmyt-chat-input-area button.custom-hmyt-send-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(197, 138, 249, 0.4) !important;
}

.custom-hmyt-chat-input-area button.custom-hmyt-send-btn:disabled {
    background: rgba(200, 200, 200, 0.5) !important;
    color: #888 !important;
    animation: none !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
    transform: none !important;
}

/* انیمیشن برای دکمه ارسال (حالت پردازش هوش مصنوعی) */
@keyframes geminiAI {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* انیمیشن تایپینگ */
.custom-hmyt-chatbot-container .typing-indicator { 
    font-size: 13px !important; 
    color: #C58AF9 !important; 
    text-align: right !important; 
    margin-right: 15px !important;
    font-weight: 600 !important;
    animation: pulse 1.5s infinite !important;
}

@keyframes pulse {
    0% { opacity: 0.5; }
    50% { opacity: 1; }
    100% { opacity: 0.5; }
}