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

/* ① لوحة الأوامر (Ctrl+K) */
#vp-palette {
  position: fixed; inset: 0; z-index: 10001; display: none;
  background: rgba(9, 33, 51, .45); align-items: flex-start; justify-content: center; padding-top: 12vh;
}
#vp-palette.vp-open { display: flex; }
#vp-palette-box {
  width: min(560px, 92vw); background: #fff; border-radius: 16px; box-shadow: 0 24px 60px rgba(9,33,51,.32);
  overflow: hidden; animation: vp-pop .16s ease-out both;
}
#vp-palette-input { width: 100%; border: 0 !important; border-bottom: 1px solid #e6eef5 !important; border-radius: 0 !important; padding: 14px 16px !important; font-size: 14px !important; }
#vp-palette-list { list-style: none; margin: 0; padding: 6px; max-height: 46vh; overflow: auto; }
#vp-palette-list li { padding: 10px 12px; border-radius: 10px; font-size: 13.5px; font-weight: 700; color: #24435c; cursor: pointer; display: flex; gap: 8px; align-items: center; }
#vp-palette-list li:hover, #vp-palette-list li.vp-active { background: #eef5fb; }
#vp-palette-hint { padding: 8px 14px; font-size: 11px; color: #7188a0; background: #f7fafd; border-top: 1px solid #eef4f9; }

/* ② ورقة الاختصارات */
#vp-shortcuts {
  position: fixed; inset: 0; z-index: 10002; display: none; background: rgba(9,33,51,.45);
  align-items: center; justify-content: center;
}
#vp-shortcuts.vp-open { display: flex; }
#vp-shortcuts .vp-sheet { background: #fff; border-radius: 16px; padding: 18px 20px; width: min(520px, 92vw); box-shadow: 0 24px 60px rgba(9,33,51,.32); }
#vp-shortcuts table { width: 100%; border-collapse: collapse; font-size: 13px; }
#vp-shortcuts td { padding: 6px 4px; border-bottom: 1px solid #eef4f9; }
#vp-shortcuts kbd {
  background: #0b3a5b; color: #fff; border-radius: 6px; padding: 2px 7px; font-size: 11.5px; font-weight: 800; direction: ltr;
}

/* ③ شريحة اليوم/الأمس داخل صف الرسالة */
.vp-day-chip {
  background: #eef5fb; color: #33566f; border-radius: 999px; padding: 1px 8px; font-size: 10.5px; font-weight: 800; margin-inline-start: 6px;
}
body.theme-dark .vp-day-chip { background: #1d3446; color: #a9c1d4; }

/* ④ مرشّحات سريعة في رأس القائمة */
#vp-quick-filters { display: inline-flex; gap: 6px; margin-inline-start: 8px; flex-wrap: wrap; }
#vp-quick-filters button {
  border: 1px solid #dbe7f2; background: #fff; color: #33566f; border-radius: 999px;
  padding: 4px 10px; font-size: 11.5px; font-weight: 800; cursor: pointer;
}
#vp-quick-filters button[aria-pressed="true"] { background: #14567f; color: #fff; border-color: #10527a; }
#message-list li.vp-filtered-out, #sent-list li.vp-filtered-out { display: none !important; }

/* ⑤ مؤشّر النجمة للرسائل المعلَّمة */
.vp-star { color: #d99a00; font-size: 13px; margin-inline-start: 4px; }

/* ⑥ شريحة «آخر تحديث» الحيّة */
#vp-sync-pill { font-variant-numeric: tabular-nums; }

/* ⑦ حصر التنبيهات بثلاثة (الباقي يتلاشى) */
#vp-toasts .vp-toast:nth-child(n + 4) { opacity: .45; transform: scale(.97); }

/* ⑧ هياكل تحميل للصادر ومركز المرفقات */
.vp-loading-row, #sent-list .vp-loading-row, #attach-rows .vp-loading-row { background: #eef3f8; }

/* ⑨ تغذية راجعة عند الضغط على الصف */
#message-list li:active, #sent-list li:active { transform: scale(.997); }

/* ⑩ وميض لطيف عند تغيّر العدّاد */
.vp-flash { animation: vp-flash .6s ease-out; }
@keyframes vp-flash { 0% { background: #fff2a8; } 100% { background: transparent; } }

/* ⑪ تلميحات لأزرار عرض الرسالة */
.viewer-actions .btn[data-vp-tip] { position: relative; }

/* ⑫ شريط تنقّل سفلي للجوال */
#vp-bottom-nav {
  position: fixed; inset-block-end: 0; inset-inline: 0; z-index: 9994; display: none;
  background: #0b3a5b; padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
  box-shadow: 0 -8px 22px rgba(11,58,91,.22);
}
#vp-bottom-nav button {
  flex: 1 1 0; border: 0; background: transparent; color: #cfe0ee; font-size: 11px; font-weight: 800;
  padding: 6px 2px; border-radius: 12px; display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer;
}
#vp-bottom-nav button b { font-size: 17px; font-weight: 400; }
#vp-bottom-nav button[aria-pressed="true"] { background: rgba(255,255,255,.14); color: #fff; }
@media (max-width: 720px) {
  #vp-bottom-nav { display: flex; }
  body { padding-bottom: 62px; }
  #vp-status-bar { inset-block-end: 58px; }
}

/* ⑬ تباين الوضع الداكن: جداول ورقائق */
body.theme-dark table td, body.theme-dark table th { border-color: #24435c !important; color: #cfe0ee !important; }
body.theme-dark .vp-file-icon { background: #1d3446 !important; color: #cfe0ee !important; }
body.theme-dark .chip-muted { border-color: #2a4a66 !important; }

/* ⑭ ترويسة الطباعة (اسم الصندوق والموضوع والتاريخ) */
#vp-print-head { display: none; }
@media print {
  #vp-print-head { display: block; border-bottom: 1px solid #ccc; margin-bottom: 10px; padding-bottom: 6px; font-size: 12px; }
}

/* ⑮ منطقة تنبيهات لقارئ الشاشة */
.vp-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ⑯ حدود متدرّجة للعنصر النشط (حركة هادئة) */
#account-list li button.active, #folder-list button.active {
  background-image: linear-gradient(120deg, #14567f, #1d6fa5 60%, #2f8bc8), linear-gradient(180deg, #1d6fa5, #14567f) !important;
  background-blend-mode: normal;
}

/* ⑰ شريط أدوات مصغّر على الشاشات المتوسطة */
@media (max-width: 1180px) and (min-width: 721px) {
  .topbar-right .btn { padding: 6px 9px !important; }
  #vp-display-bar button { padding: 5px 8px; font-size: 11px; }
}

/* ⑱ رأس مصغّر ثابت داخل عرض الرسالة عند التمرير */
#viewer .viewer-head { transition: box-shadow .2s ease, background .2s ease; }
#viewer.vp-scrolled .viewer-head { position: sticky; top: 0; z-index: 12; background: inherit; box-shadow: 0 6px 16px rgba(11,58,91,.08); }

/* ⑲ تظليل صفوف مركز المرفقات والجداول الداخلية */
#attach-files-rows tr:nth-child(even), #msg-info-body tr:nth-child(even) { background: rgba(11,58,91,.035); }

/* ⑳ شريحة فرق غير المقروء في شريط الحالة */
#vp-unread-delta { background: rgba(255,255,255,.16); border-radius: 999px; padding: 1px 8px; }