/* 🔴 رفعِ باگِ «مودالِ شفاف» (۶ سپتامبر ۲۰۲۶) — دقیقاً همان مشکلی که در school-admin-module.css
   پیدا و رفع شد: مودالِ «گفت‌وگویِ جدید» و Lightboxِ عکس در ChatPage.razor عمداً به‌عنوانِ
   عنصرِ هم‌سطحِ *بعد* از `</div class="chat-module">` نوشته شده‌اند (نه داخلش) — پس متغیرهایِ
   `--chat-c-*` که فقط داخلِ `.chat-module` تعریف شده بودند، به این دو مودال نمی‌رسیدند. مثلِ
   رفعِ همان باگ در sam-*، اینجا هم مقادیر یک‌بارِ دیگر رویِ `:root` تعریف شدند (برایِ کارِ
   درستِ هر عنصری در هر جایِ DOM)، و کلاس‌هایِ مستقیماً استفاده‌شده در این دو مودال
   (`.chat-contact-item`, `.chat-avatar`, `.chat-role-tag`) هم fallbackِ صریح گرفتند — تا
   حتی اگر به هر دلیلِ پیش‌بینی‌نشده‌ای Cascade هم درست کار نکند، رنگ درست نمایش داده شود. */
:root {
    --chat-c-bg: #f5f6fa;
    --chat-c-surface: #ffffff;
    --chat-c-border: rgba(0,0,0,0.08);
    --chat-c-border-strong: rgba(0,0,0,0.14);
    --chat-c-text: #1a1a2e;
    --chat-c-text-2: #5a5a6e;
    --chat-c-text-3: #9a9aac;
    --chat-c-accent: #2563eb;
    --chat-c-accent-bg: #eff6ff;
    --chat-c-bubble-mine: #2563eb;
    --chat-c-bubble-mine-text: #ffffff;
    --chat-c-bubble-other: #ffffff;
    --chat-c-success: #16a34a;
    --chat-c-warning: #d97706;
    --chat-c-warning-bg: #fffbeb;
    --chat-c-danger: #dc2626;
    --chat-c-danger-bg: #fef2f2;
}

.chat-module {
    --chat-c-bg: #f5f6fa;
    --chat-c-surface: #ffffff;
    --chat-c-border: rgba(0,0,0,0.08);
    --chat-c-border-strong: rgba(0,0,0,0.14);
    --chat-c-text: #1a1a2e;
    --chat-c-text-2: #5a5a6e;
    --chat-c-text-3: #9a9aac;
    --chat-c-accent: #2563eb;
    --chat-c-accent-bg: #eff6ff;
    --chat-c-bubble-mine: #2563eb;
    --chat-c-bubble-mine-text: #ffffff;
    --chat-c-bubble-other: #ffffff;
    --chat-c-success: #16a34a;
    --chat-c-warning: #d97706;
    --chat-c-warning-bg: #fffbeb;
    --chat-c-danger: #dc2626;
    --chat-c-danger-bg: #fef2f2;
    --chat-transition: 150ms ease;

    direction: rtl;
    color: var(--chat-c-text, #1a1a2e);
    height: calc(100vh - 90px);
    display: flex;
    background: var(--chat-c-surface, #ffffff);
    border: 1px solid var(--chat-c-border, rgba(0,0,0,0.08));
    border-radius: 14px;
    overflow: hidden;
}

/* ---------- ستونِ فهرستِ مکالمات ---------- */
.chat-sidebar {
    width: 320px; flex-shrink: 0; border-left: 1px solid var(--chat-c-border);
    display: flex; flex-direction: column; background: var(--chat-c-bg);
}
.chat-sidebar-hdr {
    padding: 16px; border-bottom: 1px solid var(--chat-c-border); display: flex;
    align-items: center; justify-content: space-between; gap: 10px; background: var(--chat-c-surface);
}
.chat-sidebar-title { font-size: 16px; font-weight: 800; }
.chat-new-btn {
    width: 34px; height: 34px; border-radius: 50%; border: none; background: var(--chat-c-accent);
    color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer;
    font-size: 16px; transition: var(--chat-transition);
}
.chat-new-btn:hover { filter: brightness(1.1); }

.chat-search-box { padding: 10px 14px; }
.chat-search-input {
    width: 100%; border: 1px solid var(--chat-c-border); border-radius: 20px; padding: 8px 14px;
    font-size: 13px; background: var(--chat-c-surface); outline: none;
}
.chat-search-input:focus { border-color: var(--chat-c-accent); }

.chat-contact-list { flex: 1; overflow-y: auto; }
.chat-contact-item {
    display: flex; align-items: center; gap: 10px; padding: 12px 16px; cursor: pointer;
    border-bottom: 1px solid var(--chat-c-border, rgba(0,0,0,0.08)); transition: var(--chat-transition, 150ms ease);
    text-decoration: none; color: inherit;
}
.chat-contact-item:hover { background: var(--chat-c-accent-bg, #eff6ff); }
.chat-contact-item.active { background: var(--chat-c-accent-bg, #eff6ff); border-right: 3px solid var(--chat-c-accent, #2563eb); }
.chat-avatar {
    width: 42px; height: 42px; border-radius: 50%; background: var(--chat-c-accent, #2563eb);
    color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700;
    font-size: 15px; flex-shrink: 0; overflow: hidden;
}
/* 🆕 (۶ سپتامبر ۲۰۲۶، طبقِ درخواستِ صریحِ کاربر) — وقتی کاربر عکسِ پروفایل دارد، به‌جایِ
   آواتارِ حرفی، خودِ عکس را (کاملاً گرد، بدونِ کِش‌آمدن) نشان می‌دهد. */
.chat-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.chat-avatar.teacher { background: var(--chat-c-success, #16a34a); }
/* 🆕 (۶ سپتامبر ۲۰۲۶، بندهایِ ۳ و ۴) — رنگ‌هایِ متمایز برایِ مدیرِ مدرسه/ادمینِ پلتفرم
   (بنفش) و مشاورِ مدرسه (نارنجی)، تا در فهرستِ مکالمات با یک نگاه از دانش‌آموز/معلمِ عادی
   متمایز باشند. */
.chat-avatar.staff { background: #7c3aed; }
.chat-avatar.provider { background: #ea580c; }
.chat-avatar.counselor { background: var(--chat-c-warning, #d97706); }
.chat-contact-body { flex: 1; min-width: 0; }
.chat-contact-name-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.chat-contact-name { font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--chat-c-text, #1a1a2e); }
.chat-contact-time { font-size: 10.5px; color: var(--chat-c-text-3, #9a9aac); flex-shrink: 0; }
.chat-contact-preview {
    font-size: 12px; color: var(--chat-c-text-2, #5a5a6e); white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis; margin-top: 2px;
}
.chat-unread-badge {
    background: var(--chat-c-accent, #2563eb); color: #fff; font-size: 10.5px; font-weight: 700;
    border-radius: 20px; min-width: 18px; height: 18px; display: flex; align-items: center;
    justify-content: center; padding: 0 5px; flex-shrink: 0;
}
.chat-role-tag {
    font-size: 9.5px; color: var(--chat-c-text-3, #9a9aac); background: var(--chat-c-bg, #f5f6fa); border-radius: 6px;
    padding: 1px 6px; margin-inline-start: 6px;
}
.chat-disabled-tag { color: var(--chat-c-danger); font-size: 10.5px; }

/* ---------- ستونِ گفت‌وگویِ فعال ---------- */
.chat-thread { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.chat-thread-hdr {
    padding: 14px 18px; border-bottom: 1px solid var(--chat-c-border); display: flex;
    align-items: center; gap: 12px; background: var(--chat-c-surface); flex-shrink: 0;
}
.chat-back-btn {
    display: none; border: none; background: none; font-size: 20px; cursor: pointer; color: var(--chat-c-text-2);
}
.chat-thread-title { font-weight: 700; font-size: 14.5px; }
.chat-thread-sub { font-size: 11.5px; color: var(--chat-c-text-3); }
.chat-thread-actions { margin-inline-start: auto; display: flex; gap: 6px; }
.chat-icon-btn {
    width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--chat-c-border); background: var(--chat-c-surface);
    display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--chat-c-text-2);
    transition: var(--chat-transition);
}
.chat-icon-btn:hover { background: var(--chat-c-bg); }

.chat-messages {
    flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 6px;
    background: var(--chat-c-bg);
}
.chat-load-more {
    align-self: center; font-size: 12px; color: var(--chat-c-accent); cursor: pointer; padding: 6px 14px;
    border-radius: 20px; background: var(--chat-c-accent-bg); margin-bottom: 8px;
}
.chat-bubble-row { display: flex; }
.chat-bubble-row.mine { justify-content: flex-start; }
.chat-bubble-row.theirs { justify-content: flex-end; }
.chat-bubble {
    max-width: 68%; padding: 9px 13px; border-radius: 14px; font-size: 13.5px; line-height: 1.7;
    position: relative; word-break: break-word; box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.chat-bubble.mine { background: var(--chat-c-bubble-mine); color: var(--chat-c-bubble-mine-text); border-bottom-left-radius: 4px; }
.chat-bubble.theirs { background: var(--chat-c-bubble-other); color: var(--chat-c-text); border-bottom-right-radius: 4px; border: 1px solid var(--chat-c-border); }
.chat-bubble.deleted { font-style: italic; opacity: 0.6; }
.chat-bubble-meta {
    display: flex; align-items: center; gap: 4px; justify-content: flex-end; margin-top: 4px;
    font-size: 9.5px; opacity: 0.75;
}
.chat-bubble-attachment-img { max-width: 220px; max-height: 220px; border-radius: 10px; display: block; margin-bottom: 4px; cursor: pointer; }
.chat-bubble-attachment-file {
    display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 8px;
    background: rgba(0,0,0,0.06); font-size: 12px; margin-bottom: 4px;
}
.chat-bubble-report-btn { cursor: pointer; opacity: 0.5; }
.chat-bubble-report-btn:hover { opacity: 1; }

.chat-composer {
    display: flex; align-items: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--chat-c-border);
    background: var(--chat-c-surface); flex-shrink: 0;
}
.chat-composer-input {
    flex: 1; border: 1px solid var(--chat-c-border); border-radius: 20px; padding: 10px 16px;
    font-size: 13.5px; resize: none; max-height: 120px; outline: none; font-family: inherit;
}
.chat-composer-input:focus { border-color: var(--chat-c-accent); }
.chat-composer-btn {
    width: 40px; height: 40px; border-radius: 50%; border: none; background: var(--chat-c-accent); color: #fff;
    display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 17px; flex-shrink: 0;
    transition: var(--chat-transition);
}
.chat-composer-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.chat-composer-attach-btn { background: none; color: var(--chat-c-text-2); border: 1px solid var(--chat-c-border); }
.chat-composer-preview {
    display: flex; align-items: center; gap: 8px; padding: 8px 16px; background: var(--chat-c-accent-bg);
    font-size: 12px; border-top: 1px solid var(--chat-c-border);
}

.chat-empty-state {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    color: var(--chat-c-text-3); gap: 10px;
}
.chat-empty-state i { font-size: 46px; }

.chat-disabled-banner {
    background: var(--chat-c-danger-bg); color: var(--chat-c-danger); padding: 10px 16px; font-size: 12.5px;
    display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--chat-c-border);
}

/* ---------- مودالِ شروعِ گفت‌وگویِ جدید ---------- */
.chat-contact-picker-list { max-height: 360px; overflow-y: auto; }

/* ---------- بجِ سراسریِ خوانده‌نشده (MainLayout) ---------- */
.chat-global-badge {
    position: fixed; bottom: 20px; left: 20px; z-index: 999;
    background: var(--chat-c-accent, #2563eb); color: #fff; border-radius: 50%;
    width: 52px; height: 52px; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 14px rgba(37,99,235,0.4); text-decoration: none; font-size: 22px;
}
.chat-global-badge .count {
    position: absolute; top: -4px; right: -4px; background: #dc2626; color: #fff; font-size: 10.5px;
    font-weight: 700; border-radius: 20px; min-width: 18px; height: 18px; display: flex;
    align-items: center; justify-content: center; padding: 0 4px; border: 2px solid #fff;
}

/* ---------- موبایل ---------- */
@media (max-width: 860px) {
    .chat-module { height: calc(100vh - 70px); border-radius: 0; border: none; }
    .chat-sidebar { width: 100%; border-left: none; }
    .chat-sidebar.hide-mobile { display: none; }
    .chat-thread.hide-mobile { display: none; }
    .chat-back-btn { display: flex; align-items: center; justify-content: center; }
    .chat-bubble { max-width: 82%; }
}

/* ---------- نظارتِ ادمین ---------- */
.chat-admin-msg-row { display: flex; flex-direction: column; padding: 6px 0; border-bottom: 1px dashed var(--chat-c-border); }
.chat-admin-msg-meta { font-size: 10.5px; color: var(--chat-c-text-3); }
.chat-admin-msg-flagged { background: var(--chat-c-warning-bg); }