/* ========================================
   تم آبی دودی (Blue Smoky) - نسخه تصحیح شده
   متعادل - نه太多 روشن، نه太多 تیره
   مناسب برای استفاده طولانی مدت بدون خستگی چشم
   ======================================== */

/* پس‌زمینه اصلی صفحه - گرادینت ملایم آبی دودی */
body {
    background: linear-gradient(135deg, #8ba8c0 0%, #6a8aa8 100%);
}

/* رنگ همه متون - خاکستری مایل به آبی با کنتراست خوب */
* {
    color: #e8eef2;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
}

/* نام کاربر و آخرین بازدید - کمی روشن‌تر */
.name, .last {
    color: #f0f4f8;
    opacity: 0.9;
}

/* نوار منو - آبی دودی با شفافیت */
.menu {
    background-color: rgba(50, 70, 95, 0.9);
    backdrop-filter: blur(8px);
}

/* ناحیه نمایش پیام‌ها - خاکستری آبی روشن */
.chat {
    background-color: #c5d5e5;
}

    /* کادر آواتار در کنار پیام‌ها */
    .chat .avatar {
        background-color: #c5d5e5;
    }

        /* تصویر آواتار - با حاشیه نرم */
        .chat .avatar img {
            background-color: #4a6a85;
            border: 2px solid rgba(200, 215, 230, 0.8);
        }

/* ========== اصلاح شده: box-shadow-color به box-shadow تبدیل شد ========== */

/* پیام دریافتی (از دیگران) - آبی دودی متوسط */
.other .msg {
    background-color: rgba(65, 90, 115, 0.92);
    box-shadow: 1px 2px 0px rgba(160, 180, 200, 0.5);
}

/* پیام ارسالی (از خودم) - آبی دودی تیره‌تر */
.self .msg {
    background-color: rgba(40, 60, 80, 0.92);
    box-shadow: 1px 2px 0px rgba(140, 160, 180, 0.4);
}

/* متن پیام‌ها - سفید مایل به خاکستری */
.msg p {
    color: #f0f4f8;
}

/* دکمه‌های گسترده - آبی دودی */
.buttonExtend {
    background: rgba(45, 70, 95, 0.9);
    color: #e8eef2;
    border: 2px solid rgba(180, 200, 220, 0.5);
    box-shadow: 0px -3px 8px rgba(180, 200, 220, 0.15) inset, 0px 3px 8px rgba(180, 200, 220, 0.15) inset, 3px 3px 6px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(4px);
    transition: all 0.2s ease;
}

    /* دکمه‌ها در حالت هاور */
    .buttonExtend:hover {
        border-color: rgba(220, 235, 250, 0.8);
        background: rgba(55, 80, 105, 0.95);
    }

/* فیلدهای فرم */
.field {
    background-color: rgba(100, 125, 150, 0.25);
}

/* ورودی فیلدها */
.field-input {
    background: rgba(45, 70, 95, 0.85);
    color: #e8eef2;
    border-radius: 10px;
    border: none;
    backdrop-filter: blur(4px);
}

/* منوی انتخاب دوست */
.DropDownList {
    background: rgba(55, 80, 110, 0.9);
    color: #e8eef2;
    border: 1px solid rgba(160, 185, 210, 0.5);
    backdrop-filter: blur(4px);
}

    .DropDownList:hover {
        border-color: rgba(200, 220, 240, 0.8);
    }

/* ردیف‌های جداول */
.row {
    background-color: rgba(90, 115, 140, 0.2);
    border-color: rgba(160, 185, 210, 0.4);
}

/* فرم لاگین و پنل‌های مرکزی */
.rowCenterizer {
    background-color: rgba(65, 90, 115, 0.45);
    border: 2px solid rgba(160, 185, 210, 0.6);
    backdrop-filter: blur(10px);
    border-radius: 20px;
}

/* پنل‌های مرکزی (مثل تنظیمات) */
.divAtCenter {
    border-color: rgba(160, 185, 210, 0.6);
    background: rgba(55, 80, 110, 0.92);
    backdrop-filter: blur(10px);
    border-radius: 20px;
}

/* منوی کناری */
.sideMenu {
    background-color: rgba(40, 60, 85, 0.96);
    border-color: rgba(140, 165, 190, 0.5);
    backdrop-filter: blur(8px);
}

    /* آیتم‌های منو در حالت هاور */
    .sideMenu tr:hover {
        background-color: rgba(65, 90, 120, 0.9);
        border-color: rgba(200, 220, 240, 0.8);
    }

/* نوار پایین صفحه (محل نوشتن پیام) */
.rowAtBottom {
    background-color: rgba(35, 55, 80, 0.92);
    backdrop-filter: blur(8px);
}

/* نوار بالای صفحه */
.rowAtTop {
    background-color: rgba(35, 55, 80, 0.92);
    border-bottom-color: rgba(140, 165, 190, 0.5);
    backdrop-filter: blur(8px);
}

/* جعبه نوشتن پیام */
.textToSend {
    background-color: rgba(45, 70, 100, 0.88);
    color: #e8eef2;
    border-radius: 25px;
    border: 1px solid rgba(140, 165, 190, 0.5);
    backdrop-filter: blur(4px);
}

/* دکمه ارسال پیام */
.sendButton {
    background-color: #5a7a9a;
    color: #e8eef2;
    border: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease;
}

    /* دکمه ارسال پیام در حالت هاور */
    .sendButton:hover {
        background-color: #6a8aaa;
    }

/* رنگ خطا - قرمز ملایم */
.errorColor {
    color: #e0a0a0;
}

/* رنگ موفقیت - سبز ملایم */
.okColor {
    color: #a0d0b0;
}

/* آیکون‌ها در حالت هاور */
.iconButton:hover {
    background-color: rgba(160, 185, 210, 0.4);
}

/* برچسب‌ها در کنار فیلدها */
.caption {
    background-color: rgba(65, 90, 115, 0.5);
    color: #e8eef2;
}

/* برچسب‌های تمام عرض */
.captionFull {
    background-color: rgba(75, 100, 125, 0.35);
    color: #e8eef2;
}

/* ورودی فیلدهای ویژه */
.field_input {
    background-color: rgba(45, 70, 100, 0.7);
    color: #e8eef2;
    border-bottom-color: rgba(160, 185, 210, 0.6);
}

/* ورودی فرم‌ها */
.form_input {
    background-color: rgba(35, 55, 80, 0.8);
    color: #e8eef2;
    border-bottom-color: rgba(160, 185, 210, 0.6);
}

/* دکمه ارسال ویژه */
#btnSend {
    background-color: #5a7a9a;
    color: #e8eef2;
    border-color: rgba(160, 185, 210, 0.6);
}

/* پیغام‌های کاربر */
#userMessage {
    background-color: rgba(75, 100, 125, 0.25);
    color: #e8eef2;
}

/* ========================================
   پیغام‌های سیستمی
   ======================================== */

/* پس‌زمینه پیغام سیستمی */
.system-message-overlay {
    background-color: rgba(25, 45, 65, 0.85);
}

/* پنل پیغام سیستمی */
.system-message-panel {
    background: rgba(55, 80, 110, 0.96);
    border: 3px solid rgba(200, 220, 240, 0.8);
    border-radius: 20px;
    backdrop-filter: blur(10px);
}

/* دکمه پیغام سیستمی */
.system-message-button {
    background: #5a7a9a;
    color: #e8eef2;
    border: 2px solid rgba(160, 185, 210, 0.6);
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .system-message-button:hover {
        background: #6a8aaa;
        border-color: rgba(200, 220, 240, 0.9);
    }