/* 
 * =============================================
 * متغیرهای اصلی و استایل‌های پایه
 * =============================================
 * تعریف پالت رنگی، فونت و تنظیمات کلی برای
 * یکپارچگی ظاهری در حالت تمام‌صفحه.
*/
:root {
    --primary-color: #006ce0;
    --primary-color-dark: #0056b3;
    --secondary-color: #F0F8FF;
    --background-color-chat: #fbfdff; /* پس‌زمینه جدید برای بخش چت */
    --text-color: #212529;
    --bot-message-bg: #E9F5FF;
    --user-message-bg: #F8F9FA;
    --border-color: #DEE2E6;
    --font-family: 'Vazirmatn', Tahoma, sans-serif; /* اضافه کردن fallback fonts */
    --header-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    --border-radius-message: 20px;
    --content-max-width: 900px; /* حداکثر عرض محتوا برای خوانایی */
}

/* ریست کردن استایل‌های پیش‌فرض و تنظیمات پایه */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    -webkit-tap-highlight-color: transparent;
}

/* 
 * =============================================
 * ساختار اصلی تمام‌صفحه (Body)
 * =============================================
 * بدنه اصلی صفحه حالا به عنوان کانتینر اصلی چت عمل می‌کند.
*/
body {
    font-family: var(--font-family);
    background-color: var(--background-color-chat);
    color: var(--text-color);
    display: flex;
    flex-direction: column;
    height: 100vh; /* ارتفاع کامل صفحه */
    overflow: hidden; /* جلوگیری از اسکرول خود بدنه */
}

/* 
 * =============================================
 * هدر چت
 * =============================================
 * هدر در بالای صفحه ثابت می‌ماند و عرض کامل دارد.
*/
.chat-header {
    background-color: var(--primary-color);
    color: white;
    padding: 20px 25px;
    display: flex;
    align-items: center;
    box-shadow: var(--header-shadow);
    flex-shrink: 0; /* جلوگیری از کوچک شدن هدر */
    z-index: 10; /* قرار گرفتن روی لایه‌های دیگر */
}

.chat-header .icon {
    font-size: 40px;
    margin-left: 18px;
    font-family: 'boxicons', 'Vazirmatn', sans-serif; /* fallback برای آیکون‌ها */
}

.chat-header .title h1 {
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0;
}

.chat-header .title p {
    font-size: 0.85rem;
    opacity: 0.95;
    margin-top: 4px;
}

/* 
 * =============================================
 * بخش اصلی صفحه چت
 * =============================================
 * این بخش شامل پیام‌ها و پاسخ‌های سریع است و فضای
 * باقی‌مانده را پر می‌کند.
*/
.main-chat-area {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto; /* اسکرول فقط در این بخش فعال است */
}

/* اسکرول‌بار سفارشی و زیبا */
.main-chat-area::-webkit-scrollbar {
  width: 8px;
}

.main-chat-area::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.main-chat-area::-webkit-scrollbar-thumb {
  background: #cdd2d6;
  border-radius: 4px;
}

.main-chat-area::-webkit-scrollbar-thumb:hover {
  background: #b5bcc1;
}

/* محدودکننده عرض محتوا برای خوانایی بهتر */
.content-wrapper {
    width: 100%;
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding: 0 25px;
}

/* بخش نمایش پیام‌ها */
.chat-box {
    display: flex;
    flex-direction: column;
    padding-top: 25px;
}

/* استایل کلی هر حباب پیام */
.message {
    display: flex;
    margin-bottom: 18px;
    max-width: 88%;
    animation: fadeIn 0.4s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}

.message .icon {
    font-size: 30px;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    font-family: 'boxicons', 'Vazirmatn', sans-serif; /* fallback برای آیکون‌ها */
}

.message .text {
    padding: 14px 18px;
    border-radius: var(--border-radius-message);
    line-height: 1.7;
    font-size: 0.98rem;
}

.message .text ul, .message .text ol {
    padding-right: 20px;
}

/* پیام‌های ربات */
.bot-message {
    align-self: flex-start;
}
.bot-message .icon {
    background-color: var(--primary-color);
    color: white;
    margin-left: 12px;
}
.bot-message .text {
    background-color: var(--bot-message-bg);
    border-top-right-radius: 0;
}

/* پیام‌های کاربر */
.user-message {
    align-self: flex-end;
    flex-direction: row-reverse;
}
.user-message .icon {
    background-color: #6c757d;
    color: white;
    margin-right: 12px;
}
.user-message .text {
    background-color: var(--user-message-bg);
    border-top-left-radius: 0;
}

/* نشانگر "در حال تایپ" */
.typing-indicator {
    align-self: flex-start;
}
.typing-indicator .icon {
    margin-left: 12px;
}
.typing-indicator .dots span {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: #aaa;
    margin: 0 3px;
    animation: bounce 1.4s infinite ease-in-out both;
}
.typing-indicator .dots span:nth-child(1) { animation-delay: -0.32s; }
.typing-indicator .dots span:nth-child(2) { animation-delay: -0.16s; }

@keyframes bounce {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1.0); }
}

/* دکمه‌های پاسخ سریع */
.quick-replies {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 8px;
    padding-bottom: 15px;
    margin-top: auto; /* چسباندن به بالای بخش ورودی */
}

.quick-reply-btn {
    background-color: #fff;
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
    padding: 9px 18px;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: var(--font-family);
    font-size: 0.88rem;
}

.quick-reply-btn:hover {
    background-color: var(--primary-color);
    color: #fff;
    transform: translateY(-2px);
}

/* 
 * =============================================
 * بخش ورودی کاربر
 * =============================================
 * این بخش در پایین صفحه ثابت است.
*/
.chat-input-area {
    padding: 20px 0; /* پدینگ عمودی */
    border-top: 1px solid var(--border-color);
    background-color: #fdfdfd;
    flex-shrink: 0; /* جلوگیری از کوچک شدن */
}

.chat-input-area .content-wrapper {
    display: flex;
    align-items: center;
    gap: 15px;
}

.chat-input-area input[type="text"] {
    flex-grow: 1;
    border: 1px solid var(--border-color);
    border-radius: 25px;
    padding: 12px 22px;
    font-family: var(--font-family);
    font-size: 1rem;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.chat-input-area input[type="text"]:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.15);
}

.send-btn {
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    font-size: 26px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    font-family: 'boxicons', 'Vazirmatn', sans-serif; /* fallback برای آیکون‌ها */
}

.send-btn:hover {
    background-color: var(--primary-color-dark);
    transform: scale(1.05);
}

.send-btn:disabled {
     background-color: #a0a0a0;
     cursor: not-allowed;
     transform: scale(1);
}

/* پیام خطا */
.error-message {
    color: #D8000C;
    background-color: #FFD2D2;
    border: 1px solid #D8000C;
    padding: 12px;
    margin: 10px 0;
    border-radius: 10px;
    font-size: 0.9rem;
    text-align: center;
}

/* بهبود ریسپانسیو برای نمایشگرهای کوچک */
@media (max-width: 600px) {
    .content-wrapper {
        padding: 0 15px;
    }
    .chat-header {
        padding: 15px;
    }
}

/* استایل‌های fallback برای زمانی که فونت BoxIcons بارگذاری نمی‌شود */
.bx::before {
    font-family: 'boxicons', 'Vazirmatn', sans-serif;
}