/* assets/css/chat-style.css - نسخه ۲.۰ */
/* =================================================================
   ==   بهینه‌سازی شده، زیباشده و شامل استایل‌های اعلان پیام‌های نخوانده
   ================================================================= */

/* === متغیرهای پایه (برای همخوانی و امکان تم‌بندی) === */
:root {
    --color-primary: #007bff; /* آبی اصلی */
    --color-primary-dark: #0056b3; /* آبی تیره‌تر برای hover */
    --color-secondary: #6c757d; /* خاکستری برای متون ثانویه */
    --color-success: #28a745; /* سبز برای موفقیت */
    --color-error: #dc3545; /* قرمز برای خطا */
    --color-warning: #ffc107; /* زرد برای هشدار */
    --color-info: #17a2b8; /* آبی روشن برای اطلاعات */

    --color-background-light: #f8f9fa; /* پس‌زمینه روشن */
    --color-background-medium: #e9ecef; /* پس‌زمینه متوسط */
    --color-background-dark: #343a40; /* پس‌زمینه تیره */
    --color-text-dark: #212529; /* متن تیره */
    --color-text-light: #f8f9fa; /* متن روشن */
    --color-border-light: #dee2e6; /* بوردر روشن */
    --color-border-dark: #ced4da; /* بوردر متوسط */
    --color-white: #ffffff;

    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 12px;
    --box-shadow-sm: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    --box-shadow-md: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    --box-shadow-lg: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
    --transition-ease: all 0.3s ease;
}

/* === ریست و تنظیمات پایه === */
.chat-page {
    background-color: var(--color-background-light);
    font-family: 'Vazirmatn', sans-serif;
    color: var(--color-text-dark);
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh; /* برای پوشش کامل ارتفاع viewport */
}

/* === ساختار اصلی کانتینر چت === */
.chat-layout-container {
    display: flex;
    width: 95%; /* پهنای منعطف */
    max-width: 1300px; /* حداکثر پهنا */
    height: 90vh; /* ارتفاع ثابت برای صفحه چت */
    margin: 20px auto;
    border: 1px solid var(--color-border-light);
    border-radius: var(--border-radius-lg);
    overflow: hidden; /* برای جلوگیری از سرریز محتوا */
    background-color: var(--color-white);
    box-shadow: var(--box-shadow-md);
}

/* === ستون سایدبار (لیست گفتگوها) === */
.chat-sidebar {
    width: 350px; /* کمی پهن‌تر برای خوانایی بهتر */
    min-width: 280px; /* حداقل پهنا برای موبایل */
    background-color: var(--color-background-light);
    border-left: 1px solid var(--color-border-light);
    display: flex;
    flex-direction: column;
    padding: 15px;
    overflow-y: auto; /* برای اسکرول لیست گفتگوها */
}

.sidebar-header {
    margin-bottom: 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.sidebar-header h2 {
    font-size: 1.3rem;
    color: var(--color-text-dark);
    margin: 0;
}

.btn-toggle-request {
    width: 100%;
    background-color: var(--color-success);
    color: var(--color-white);
    border: none;
    padding: 12px 15px;
    border-radius: var(--border-radius-md);
    cursor: pointer;
    font-size: 1rem;
    font-weight: bold;
    transition: var(--transition-ease);
}

.btn-toggle-request:hover {
    background-color: var(--color-success);
    opacity: 0.9;
}

/* === استایل دکمه بازگشت === */
.btn-back-to-list {
    width: 100%;
    background-color: transparent;
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
    padding: 10px;
    border-radius: var(--border-radius-md);
    cursor: pointer;
    font-size: 1rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: var(--transition-ease);
    margin-bottom: 15px;
}

.btn-back-to-list:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
}

/* === لیست گفتگوها و درخواست‌ها === */
.chat-threads-list, .predictive-requests-list {
    flex-grow: 1;
    margin-bottom: 15px;
}

.chat-threads-list h3, .predictive-requests-list h3 {
    font-size: 1.1rem;
    color: var(--color-primary-dark);
    border-bottom: 1px solid var(--color-border-light);
    padding-bottom: 5px;
    margin-bottom: 10px;
}

.thread-item, .request-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    margin-bottom: 8px;
    border-radius: var(--border-radius-md);
    cursor: pointer;
    background-color: var(--color-white);
    border-left: 4px solid transparent; /* برای نوار کنار آیتم فعال */
    transition: var(--transition-ease);
    font-size: 0.95rem;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05); /* سایه ظریف */
}

.thread-item:hover, .request-item:hover {
    background-color: var(--color-background-medium);
}

.thread-item.active {
    background-color: #e2f0ff; /* آبی روشن‌تر برای فعال */
    border-left-color: var(--color-primary);
}

.thread-name {
    font-weight: bold;
    color: var(--color-text-dark);
    flex-grow: 1;
    margin-left: 10px;
}

.thread-last-message {
    font-size: 0.85rem;
    color: var(--color-secondary);
    text-overflow: ellipsis; /* سه نقطه در صورت طولانی بودن */
    white-space: nowrap;
    overflow: hidden;
    max-width: 60%; /* برای جلوگیری از پوشش unread-count */
}

/* === نشانگر پیام‌های نخوانده در لیست سایدبار === */
.unread-count {
    background-color: var(--color-error);
    color: var(--color-white);
    border-radius: 12px; /* بیضی‌شکل */
    padding: 3px 8px;
    font-size: 0.8em;
    min-width: 20px; /* حداقل پهنا برای یک رقم */
    text-align: center;
    margin-right: 5px;
    font-weight: bold;
}

/* === ستون اصلی گفتگو === */
.chat-main-panel {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    padding: 0;
    position: relative;
    background-color: var(--color-background-light); /* پس‌زمینه برای کل پنل */
}

.main-panel-header {
    padding: 15px 20px;
    border-bottom: 1px solid var(--color-border-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--color-white);
    box-shadow: var(--box-shadow-sm);
    flex-shrink: 0; /* جلوگیری از کوچک شدن هدر */
}

.main-panel-header h3 {
    margin: 0;
    font-size: 1.15rem;
    color: var(--color-text-dark);
}

/* === وضعیت اتصال چت === */
.chat-status {
    font-size: 0.8em;
    padding: 5px 10px;
    border-radius: var(--border-radius-md);
    font-weight: bold;
}

.chat-status.connected { background-color: #e6ffed; color: var(--color-success); }
.chat-status.error { background-color: #ffe6e6; color: var(--color-error); }
.chat-status.reconnecting { background-color: #fff3cd; color: var(--color-warning); } /* جدید */
.chat-status.new_message { background-color: #d1ecf1; color: var(--color-info); } /* تغییر رنگ برای پیام جدید */
.chat-status.initial { background-color: var(--color-background-medium); color: var(--color-secondary); }


/* === لیست پیام‌ها === */
.message-list-container {
    flex-grow: 1;
    overflow-y: auto;
    padding: 20px;
    background-color: var(--color-background-light);
    display: flex;
    flex-direction: column-reverse; /* پیام‌های جدید در پایین */
    gap: 10px; /* فاصله بین آیتم‌های پیام */
}

.message-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column; /* این را به column تغییر دادم تا flex-direction: column-reverse روی آیتم‌ها کار کند */
}

.message-item {
    max-width: 75%; /* کمی بیشتر شد */
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* پیش‌فرض */
}

.message-item.sent {
    align-self: flex-end;
    align-items: flex-end;
}

.message-item.received {
    align-self: flex-start;
    align-items: flex-start;
}

.message-bubble {
    padding: 10px 15px;
    border-radius: var(--border-radius-lg); /* گردتر */
    font-size: 0.95rem;
    line-height: 1.4;
    word-wrap: break-word;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08); /* سایه ظریف‌تر */
}

.message-item.sent .message-bubble {
    background-color: var(--color-primary);
    color: var(--color-white);
    border-bottom-right-radius: var(--border-radius-sm); /* گوشه تیزتر برای حباب ارسالی */
}

.message-item.received .message-bubble {
    background-color: var(--color-background-medium);
    color: var(--color-text-dark);
    border-bottom-left-radius: var(--border-radius-sm); /* گوشه تیزتر برای حباب دریافتی */
}

.message-meta {
    font-size: 0.75rem;
    color: var(--color-secondary);
    margin-top: 4px; /* کمی بیشتر */
}

/* === استایل‌دهی ایموجی‌های تنها در پیام‌ها === */
.message-item.emoji-only-message .message-bubble {
    background: none;
    box-shadow: none;
    padding: 0;
    font-size: 3.5em; /* بزرگتر و واضح‌تر */
    line-height: 1;
    display: inline-block;
    margin: 0; /* حذف margin داخلی حباب */
}

.message-item.emoji-only-message {
    margin-bottom: 10px; /* بازگشت به مقدار پیش‌فرض */
    padding: 0; /* حذف پدینگ آیتم کلی پیام */
}

.message-item.emoji-only-message .message-meta {
    margin-top: 0; /* حذف فاصله بین ایموجی و متا */
}

/* === ناحیه ارسال پیام === */
.message-input-area {
    padding: 15px;
    border-top: 1px solid var(--color-border-light);
    background-color: var(--color-white);
    display: flex;
    align-items: flex-end; /* هم‌ترازی آیتم‌ها در پایین */
    gap: 10px;
    flex-shrink: 0; /* جلوگیری از کوچک شدن */
}

#message-input {
    flex-grow: 1;
    padding: 12px 15px;
    border: 1px solid var(--color-border-dark);
    border-radius: var(--border-radius-md);
    resize: none;
    font-size: 1rem;
    line-height: 1.5;
    transition: var(--transition-ease);
}

#message-input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
    outline: none;
}

.btn-send-message {
    background-color: var(--color-primary);
    color: var(--color-white);
    border: none;
    padding: 12px 18px;
    border-radius: var(--border-radius-md);
    cursor: pointer;
    font-size: 1.15rem;
    transition: var(--transition-ease);
    flex-shrink: 0; /* جلوگیری از کوچک شدن */
}

.btn-send-message:hover:not(:disabled) {
    background-color: var(--color-primary-dark);
}

.btn-send-message:disabled {
    background-color: var(--color-secondary);
    cursor: not-allowed;
    opacity: 0.6;
}

/* === ناحیه پیام‌های متداول (Quick Replies) === */
.quick-replies-area {
    padding: 10px 15px;
    background-color: var(--color-background-light);
    border-top: 1px solid var(--color-border-light);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start;
    align-items: center;
    flex-shrink: 0; /* جلوگیری از کوچک شدن */
}

.quick-reply-btn {
    background-color: var(--color-background-medium);
    color: var(--color-text-dark);
    border: 1px solid var(--color-border-dark);
    border-radius: 25px; /* کاملاً گرد */
    padding: 8px 15px;
    font-size: 0.9em;
    cursor: pointer;
    transition: var(--transition-ease);
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

.quick-reply-btn:hover {
    background-color: #d8d8d8;
    border-color: #b0b0b0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.12);
}

/* === دکمه انتخاب‌گر اموجی و کانتینر آن === */
.btn-emoji-picker {
    background-color: transparent;
    color: var(--color-secondary);
    border: none;
    padding: 8px 10px;
    font-size: 1.5em;
    cursor: pointer;
    transition: var(--transition-ease);
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    flex-shrink: 0;
}

.btn-emoji-picker:hover {
    color: var(--color-primary);
    transform: scale(1.1);
}

.btn-emoji-picker:disabled {
    color: var(--color-secondary);
    opacity: 0.5;
    cursor: not-allowed;
}

.emoji-picker-container {
    position: absolute;
    bottom: 80px; /* بالای کادر پیام و دکمه اموجی */
    right: 15px; /* کمی به داخل */
    width: 300px; /* کمی پهن‌تر */
    background-color: var(--color-white);
    border: 1px solid var(--color-border-dark);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--box-shadow-lg);
    padding: 10px;
    display: none;
    flex-wrap: wrap;
    gap: 10px; /* فاصله بیشتر بین اموجی‌ها */
    z-index: 1000;
    max-height: 250px; /* ارتفاع بیشتر */
    overflow-y: auto;
}

.emoji-picker-container.is-open {
    display: flex;
}

.emoji-item {
    font-size: 1.8em; /* اندازه بزرگتر */
    cursor: pointer;
    padding: 5px;
    border-radius: var(--border-radius-sm);
    transition: var(--transition-ease);
}

.emoji-item:hover {
    background-color: var(--color-background-medium);
    transform: scale(1.1);
}

/* === Modal ثبت درخواست تطبیق === */
.request-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* پس‌زمینه تیره‌تر */
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 10000; /* بالاترین z-index */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.request-modal-overlay.is-open {
    display: flex;
    opacity: 1;
    visibility: visible;
}

.request-modal-content {
    background-color: var(--color-white);
    padding: 30px;
    border-radius: var(--border-radius-lg);
    width: 90%;
    max-width: 550px; /* کمی پهن‌تر */
    position: relative;
    box-shadow: var(--box-shadow-lg);
    transform: translateY(-20px); /* انیمیشن ورود */
    transition: transform 0.3s ease;
}

.request-modal-overlay.is-open .request-modal-content {
    transform: translateY(0);
}

.request-modal-content h3 {
    margin-top: 0;
    color: var(--color-primary);
    display: flex;
    align-items: center;
    gap: 10px;
}
.request-modal-content h3 i {
    font-size: 1.3em;
}

.close-modal-btn {
    position: absolute;
    top: 15px;
    left: 15px;
    background: none;
    border: none;
    font-size: 1.8rem;
    cursor: pointer;
    color: var(--color-secondary);
    transition: var(--transition-ease);
}
.close-modal-btn:hover {
    color: var(--color-error);
}

#predictive-request-form .form-group {
    margin-bottom: 18px; /* فاصله بیشتر */
}

#predictive-request-form input, #predictive-request-form select, #predictive-request-form textarea {
    width: 100%;
    padding: 12px 15px; /* پدینگ بیشتر */
    border: 1px solid var(--color-border-dark);
    border-radius: var(--border-radius-md);
    box-sizing: border-box;
    font-size: 1rem;
    transition: var(--transition-ease);
}

#predictive-request-form input:focus, #predictive-request-form select:focus, #predictive-request-form textarea:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
    outline: none;
}

.form-row.row-cols-2 {
    display: flex;
    gap: 15px;
}
.form-row.row-cols-2 .form-group {
    flex: 1;
}

.btn-primary {
    background-color: var(--color-primary);
    color: var(--color-white);
    border: none;
    padding: 14px; /* پدینگ بیشتر */
    border-radius: var(--border-radius-md);
    cursor: pointer;
    width: 100%;
    font-weight: bold;
    font-size: 1.1rem;
    transition: var(--transition-ease);
}

.btn-primary:hover {
    background-color: var(--color-primary-dark);
    box-shadow: 0 2px 5px rgba(0, 123, 255, 0.3);
}
.btn-primary:disabled {
    background-color: var(--color-secondary);
    cursor: not-allowed;
    opacity: 0.6;
}

.help-text {
    font-size: 0.85rem;
    color: var(--color-secondary);
    margin-top: 8px;
    display: block;
    line-height: 1.5;
}

/* === استایل‌های رسپانسیو (Responsive) === */
@media (max-width: 768px) {
    .chat-layout-container {
        flex-direction: column;
        height: 100vh; /* در موبایل تمام ارتفاع را بگیرد */
        width: 100%;
        margin: 0;
        border-radius: 0;
    }

    .chat-sidebar {
        width: 100%;
        min-width: unset;
        height: 30vh; /* ارتفاع ثابت برای سایدبار در موبایل */
        border-bottom: 1px solid var(--color-border-light);
        border-left: none; /* حذف بوردر سمت چپ */
        padding: 10px;
    }

    .chat-main-panel {
        height: 70vh; /* باقی ارتفاع برای پنل اصلی */
        padding: 0;
    }

    .message-item {
        max-width: 90%; /* پهنای بیشتر در موبایل */
    }

    .main-panel-header {
        padding: 10px 15px;
    }
    .main-panel-header h3 {
        font-size: 1rem;
    }
    .chat-status {
        font-size: 0.75em;
    }

    .message-input-area {
        flex-wrap: wrap; /* برای شکستن آیتم‌ها */
        padding: 10px;
    }
    #message-input {
        width: calc(100% - 70px); /* برای جای دکمه ارسال و اموجی */
        margin-right: 5px;
        flex-grow: 1;
    }
    .btn-send-message, .btn-emoji-picker {
        padding: 10px 12px;
        font-size: 1rem;
        width: 48px; /* پهنای ثابت */
        height: 48px; /* ارتفاع ثابت */
        border-radius: 50%; /* گرد */
    }
    .btn-emoji-picker {
        margin-left: 0; /* حذف margin */
    }
    
    .emoji-picker-container {
        bottom: 120px; /* تنظیم ارتفاع برای موبایل */
        right: 10px;
        width: calc(100% - 20px); /* پر کردن پهنا */
    }

    .quick-replies-area {
        padding: 8px 10px;
    }
    .quick-reply-btn {
        padding: 6px 10px;
        font-size: 0.8em;
    }
    
    .request-modal-content {
        padding: 20px;
        width: 95%;
    }
    .close-modal-btn {
        top: 10px;
        left: 10px;
        font-size: 1.5rem;
    }
    
    .sidebar-header .btn-back-to-list {
        display: none; /* دکمه بازگشت در سایدبار در موبایل ممکن است اضافی باشد */
    }
}


/* === استایل برای آلارم (Badge) در صفحه نخست/هدر (اصلاح نهایی) === */
.chat-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: var(--color-error);
    color: var(--color-white);
    border-radius: 50%;
    padding: 2px 5px;
    font-size: 0.7em;
    min-width: 18px;
    text-align: center;
    line-height: 1.2;
    box-shadow: 0 0 0 2px var(--color-white);
    font-weight: bold;
    z-index: 10;
    
    /* ⭐️⭐️⭐️ تغییر مهم: پیش‌فرض همیشه 'none' است ⭐️⭐️⭐️ */
    display: none; 
}

/* فقط زمانی که والد دارای کلاس 'has-unread-messages' است، نمایش داده شود */
.has-unread-messages .chat-badge {
    display: block !important; /* اطمینان از نمایش با اولویت بالا */
}