/* 🔴 رفعِ باگِ «مودالِ شفاف» (۶ سپتامبر ۲۰۲۶) — دقیقاً همان مشکلی که در 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.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; }
/* 🆕 (Update 78) حذفِ نرمِ پیام توسطِ مالک/ادمین */
.chat-bubble-delete-btn { all: unset; cursor: pointer; opacity: 0.5; display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; min-height: 24px; border-radius: 6px; transition: opacity .15s, background-color .15s; }
.chat-bubble-delete-btn:hover, .chat-bubble-delete-btn:focus-visible { opacity: 1; background: rgba(220, 38, 38, .12); color: #dc2626; }
.chat-bubble-delete-btn:focus-visible { outline: 2px solid #dc2626; outline-offset: 1px; }
.chat-bubble-delete-btn[disabled] { cursor: progress; opacity: .7; }
.chat-bubble-delete-btn .ti-loader-2 { animation: chat-spin 1s linear infinite; }
@keyframes chat-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .chat-bubble-delete-btn .ti-loader-2 { animation: none; } }

.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); }

/* 🆕 (Update 31) بجِ پیام‌هایِ خوانده‌نشده — بالاتر از منویِ فوتر، خوانا و قابلِ لمس */
.chat-global-badge { bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important; left: 16px !important; width: auto !important; height: 48px !important;
    border-radius: 999px !important; padding: 0 16px 0 14px; gap: 8px; font-family: 'Vazirmatn', system-ui, sans-serif; font-size: 13px !important; font-weight: 700;
    background: linear-gradient(135deg, #4f46e5, #2563eb) !important; box-shadow: 0 10px 26px rgba(37,99,235,.38) !important; transition: transform .15s; }
.chat-global-badge .ti { font-size: 22px; }
.chat-global-badge:hover { transform: translateY(-2px); color: #fff; }
.chat-global-badge .count { position: static !important; border: none !important; background: #fff !important; color: #1d4ed8 !important; min-width: 22px !important; height: 22px !important; font-size: 11.5px !important; }
.chat-global-badge.pulse { animation: cgb-pulse .9s ease 2; }
@keyframes cgb-pulse { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.12); } }
@media (max-width: 640px) {
    .chat-global-badge { width: 52px !important; height: 52px !important; padding: 0 !important; justify-content: center; }
    .chat-global-badge .cgb-text { display: none; }
    .chat-global-badge .count { position: absolute !important; top: -4px; right: -4px; background: #dc2626 !important; color: #fff !important; border: 2px solid #fff !important; }
}
@media (prefers-reduced-motion: reduce) { .chat-global-badge.pulse { animation: none; } }

/* ══ 🆕 Update 33 — فراچت: بدونِ فوتر (تمام‌ارتفاع)، بازگشت به داشبورد، پیش‌نمایشِ تصویر ══ */
.chat-home-link { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; color: var(--chat-c-text-2, #5a5a6e);
  font-size: 12px; font-weight: 600; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--chat-c-border, rgba(0,0,0,.08));
  background: var(--chat-c-bg, #f5f6fa); margin-inline-end: 8px; white-space: nowrap; }
.chat-home-link:hover { color: var(--chat-c-accent, #2563eb); border-color: var(--chat-c-accent, #2563eb); }
.chat-sidebar-hdr .chat-sidebar-title { flex: 1; }
.chat-img-btn { position: relative; display: block; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 10px; overflow: hidden; max-width: 100%; }
.chat-img-btn:focus-visible { outline: 3px solid rgba(37,99,235,.45); outline-offset: 2px; }
.chat-img-btn .chat-bubble-attachment-img { display: block; }
.chat-img-zoom { position: absolute; bottom: 6px; left: 6px; width: 28px; height: 28px; border-radius: 50%; background: rgba(0,0,0,.5); color: #fff;
  display: grid; place-items: center; font-size: 15px; opacity: .85; }
.chat-module { height: calc(100dvh - 90px); }
@media (max-width: 860px) {
    .chat-module { height: calc(100dvh - 60px); }
}