/* ============================================================================
 * ✨ الموجة الرابعة من التحسينات البصرية — ٢٠ تحسينًا (2026-10-05)
 * تُحمَّل أخيرًا بعد الموجات ١-٣ — أنماط وحالات، وبلا أي حلقات تعديلات.
 * ============================================================================ */

/* ① شريط تقدّم قراءة الرسالة (أعلى نافذة القراءة) */
#vp-read-progress {
  position: sticky; top: 0; height: 3px; width: 0; z-index: 20;
  background: linear-gradient(90deg, #1a8bd6, #48c6ef); border-radius: 999px; transition: width .12s linear;
}

/* ② وضع القراءة المركَّز: إخفاء الأعمدة الجانبية وإبراز الرسالة */
body.focus-mode #accounts-pane,
body.focus-mode #list-pane,
body.focus-mode .topbar-right > :not(#vp-focus-btn):not(.btn-logout):not(.topbar-logout-sep) { display: none !important; }
body.focus-mode #viewer { max-width: 1000px; margin-inline: auto; box-shadow: var(--vp-shadow-2, 0 4px 14px rgba(11,58,91,.1)); }
body.focus-mode .viewer-body, body.focus-mode #v-html { font-size: 15.5px; line-height: 2.1; }

/* ③ ترويسة الرسالة: حرف أولي كبير للمرسل */
#vp-viewer-avatar {
  width: 46px; height: 46px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 900; font-size: 18px; margin-inline-end: 10px; box-shadow: var(--vp-shadow-1, 0 1px 2px rgba(11,58,91,.06));
}

/* ④ أيقونات نوع الملف في بطاقات المرفقات */
.vp-file-icon {
  display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px;
  border-radius: 10px; font-size: 15px; font-weight: 900; margin-inline-end: 8px;
}
.vp-file-pdf { background: #fdeaea; color: #b91c1c; }
.vp-file-doc { background: #e8f0fe; color: #1d4ed8; }
.vp-file-xls { background: #e7f7ee; color: #0f7b3f; }
.vp-file-img { background: #f3e8ff; color: #7c3aed; }
.vp-file-zip { background: #fef3c7; color: #92400e; }
.vp-file-other { background: #eef2f7; color: #41586c; }

/* ⑤ تمييز كلمة البحث داخل صفوف الرسائل */
#message-list li mark, #sent-list li mark { background: #fff2a8; color: #4a3700; border-radius: 4px; padding: 0 2px; }

/* ⑥ زر العودة إلى الأعلى (يظهر بعد التمرير) */
#vp-top {
  position: fixed; inset-block-end: 74px; inset-inline-end: 18px; z-index: 9996;
  width: 42px; height: 42px; border-radius: 50%; border: 0; cursor: pointer;
  background: #14567f; color: #fff; font-size: 18px; font-weight: 900;
  box-shadow: var(--vp-shadow-3, 0 12px 34px rgba(11,58,91,.16));
  opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease;
}
#vp-top.vp-show { opacity: 1; pointer-events: auto; }
#vp-top:hover { transform: translateY(-2px); }

/* ⑦ شريط الحالة السفلي (مزامنة · اتصال · غير مقروء) */
#vp-status-bar {
  position: fixed; inset-block-end: 0; inset-inline: 0; z-index: 9995;
  background: #0b3a5b; color: #dbe8f2; font-size: 11.5px; font-weight: 700;
  padding: 5px 14px; display: flex; gap: 16px; align-items: center; justify-content: flex-start;
  box-shadow: 0 -6px 18px rgba(11, 58, 91, .18);
}
#vp-status-bar span { display: inline-flex; align-items: center; gap: 6px; }

/* ⑧ تنبيهات لطيفة: أيقونة حسب النوع */
.vp-toast::before { content: "ℹ️"; margin-inline-end: 6px; }
.vp-toast.vp-toast-ok::before { content: "✅"; }
.vp-toast.vp-toast-warn::before { content: "⚠️"; }

/* ⑨ هيكل تحميل داخل نافذة القراءة */
#vp-viewer-skeleton { padding: 12px; }
#vp-viewer-skeleton .vp-line { height: 12px; margin-bottom: 8px; border-radius: 6px; }

/* ⑩ انتقال ناعم عند تبديل الوضع الداكن/الفاتح */
body, body * { transition: background-color .22s ease, color .22s ease, border-color .22s ease; }
body.motion-off, body.motion-off * { transition: none !important; }

/* ⑪ شريط تحديد الرسائل (متعدد) */
#vp-select-bar {
  display: none; align-items: center; gap: 10px; margin: 6px 0; padding: 6px 10px;
  background: #eaf4ff; border: 1px solid #cfe6f8; border-radius: 999px; font-size: 12px; font-weight: 800; color: #14567f;
}
body.vp-select-mode #vp-select-bar { display: inline-flex; }
#message-list li.vp-selected { background: #dcecff !important; box-shadow: inset 3px 0 0 #14567f; }

/* ⑫ صفوف الرسائل: خط جانبي رفيع يوضّح تسلسل القراءة */
#message-list li::after,
#sent-list li::after {
  content: ""; position: absolute; inset-inline-start: 0; top: 12%; bottom: 12%;
  width: 2px; background: transparent; border-radius: 2px;
}
#message-list li { position: relative; }

/* ⑬ بطاقة الرسالة في العرض: مساحة تنفّس أكبر */
#viewer { padding: 16px 18px !important; }

/* ⑭ المرفقات: سطر حالة التحميل */
#attach-preview-status { font-weight: 800; color: #14567f; }

/* ⑮ لوحة الإعدادات: حجم أنسب وأيقونات أوضح */
#vp-display-bar button { letter-spacing: .2px; }

/* ⑯ حقول البحث: مساحة أكبر + حدّ أدنى للارتفاع */
#search-input, #attach-q, #attach-search { min-height: 38px; }

/* ⑰ وسوم الرسائل في العرض: تصغير متناسق */
#viewer .chip { font-size: 11px !important; }

/* ⑱ النافذة المنبثقة على الجوال: عرض شبه كامل */
@media (max-width: 720px) {
  .modal-box { width: min(680px, 96vw) !important; }
  #vp-status-bar { font-size: 10.5px; gap: 10px; padding: 4px 10px; }
}

/* ⑲ طبع نظيف: بلا شريط حالة أو إعدادات */
@media print {
  #vp-status-bar, #vp-display-bar, #vp-top, #vp-read-progress, #vp-skip { display: none !important; }
}

/* ⑳ وضع تباين عالٍ: حدود أوضح للعناصر التفاعلية */
body.high-contrast :where(.btn, .chip, input, select, textarea) { border-width: 2px !important; }

/* 🔒 تصحيح محددات وضع القراءة (المعرّفات الفعلية) */
body.focus-mode .layout > .folders,
body.focus-mode #accounts-pane,
body.focus-mode .list,
body.focus-mode #list-pane { display: none !important; }
body.focus-mode .layout { display: block !important; }
body.focus-mode .viewer { max-width: 1000px; margin-inline: auto; }