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

/* ① وضع داكن كامل (يتبع نظام المستخدم أو يُفعَّل يدويًا بجسم `theme-dark`) */
@media (prefers-color-scheme: dark) {
  :root { color-scheme: dark; }
}
body.theme-dark {
  --navy: #e8f1f8; --muted: #9db3c4; --line: #24435c;
  background: linear-gradient(180deg, #0d1b26 0%, #12212e 240px, #12212e 100%) !important;
  color: #dbe8f2 !important;
}
body.theme-dark :where(#viewer, .modal-box, #list-pane, .hub-btn, #account-list li button, #folder-list button,
  .panel, #v-attachments-list li, #msg-info-modal .modal-box, #compose-modal .modal-box) {
  background: #16293a !important; color: #dbe8f2 !important; border-color: #24435c !important;
}
body.theme-dark :where(#message-list li) { background: #132434 !important; }
body.theme-dark :where(#message-list li.unseen) { background: #14304a !important; }
body.theme-dark :where(#message-list li:hover, #sent-list li:hover) { background: #1a3348 !important; }
body.theme-dark :where(input, select, textarea) { background: #132434 !important; color: #e8f1f8 !important; border-color: #2a4a66 !important; }
body.theme-dark :where(.topbar) { background: linear-gradient(180deg, #0a2739, #081d2b) !important; }
body.theme-dark :where(#v-html) { background: #0f1f2c !important; }
body.theme-dark :where(.chip-muted) { background: #1d3446 !important; color: #a9c1d4 !important; }

/* ② كثافة عرض: مكثفة (تهيئة) ومريحة — تُحفظ للمستخدم */
body.density-compact :where(#message-list li, #sent-list li) { min-height: 48px !important; padding: 5px 9px !important; }
body.density-compact :where(#message-list li .m-subject) { font-size: 13px; }
body.density-comfy :where(#message-list li, #sent-list li) { min-height: 76px !important; padding: 12px 12px !important; }

/* ③ تظليل صفوف متبادل (يسهّل التتبّع البصري في القوائم الطويلة) */
:where(#message-list li:nth-child(even), #sent-list li:nth-child(even), #attach-rows tr:nth-child(even)) {
  background: rgba(11, 58, 91, .022);
}

/* ④ قصّ النصوص الطويلة بثلاث نقاط بدل كسر التخطيط */
:where(#message-list li .m-subject, #sent-list li .m-subject, .m-meta span) {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}

/* ⑤ تلميحات CSS للأزرار ذات `title` (بلا عناصر مضافة) */
:where([data-vp-tip]) { position: relative; }
:where([data-vp-tip]:hover)::after {
  content: attr(data-vp-tip); position: absolute; inset-block-end: 120%; inset-inline-start: 50%; transform: translateX(50%);
  background: #0b3a5b; color: #fff; font-size: 11px; font-weight: 700; padding: 4px 8px; border-radius: 8px;
  white-space: nowrap; pointer-events: none; z-index: 60; box-shadow: 0 6px 18px rgba(11, 58, 91, .22);
}

/* ⑥ أيقونات المجلّدات في العمود الجانبي (أوضح وأسرع في التمييز) */
#folder-list li:nth-child(1) button::before { content: "📥"; }
#folder-list li:nth-child(2) button::before { content: "📤"; }
#folder-list li:nth-child(3) button::before { content: "📝"; }
#folder-list li:nth-child(4) button::before { content: "⚠️"; }
#folder-list li:nth-child(5) button::before { content: "🗑️"; }

/* ⑦ حلقة تقدّم حول بادج غير المقروء (نسبة بصرية سريعة) */
.acct-badge { position: relative; }
.acct-badge::after {
  content: ""; position: absolute; inset: -3px; border-radius: 50%;
  background: conic-gradient(currentColor 0 calc(var(--vp-ratio, 0) * 1%), transparent 0);
  opacity: .35; z-index: -1;
}

/* ⑧ مؤشّر حالة اتصال نابض (يُضاف إلى شرائح الحالة) */
.vp-live-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: #17a34a; margin-inline-end: 6px; box-shadow: 0 0 0 0 rgba(23, 163, 74, .55);
  animation: vp-pulse 2.2s infinite;
}
.vp-live-dot.vp-live-off { background: #b91c1c; animation: none; }
@keyframes vp-pulse { 0% { box-shadow: 0 0 0 0 rgba(23, 163, 74, .5); } 70% { box-shadow: 0 0 0 8px rgba(23, 163, 74, 0); } 100% { box-shadow: 0 0 0 0 rgba(23, 163, 74, 0); } }

/* ⑨ نبضة البادج عند زيادة غير المقروء (تنبيه بصري بلا صوت) */
.vp-bump { animation: vp-bump .5s ease-out; }
@keyframes vp-bump { 0% { transform: scale(1); } 40% { transform: scale(1.22); } 100% { transform: scale(1); } }

/* ⑩ همسة عند الأزرار الأساسية (تغذية راجعة لمسية/بصرية) */
:where(.btn-primary:active) { transform: translateY(1px) scale(.995); }

/* ⑪ شريط إعدادات العرض (مكثف · مريح · داكن · تباين · حركة) */
#vp-display-bar {
  position: fixed; inset-block-end: 14px; inset-inline-end: 14px; z-index: 9997;
  display: flex; gap: 6px; background: rgba(11, 58, 91, .92); padding: 6px; border-radius: 999px;
  box-shadow: 0 8px 22px rgba(11, 58, 91, .28);
}
#vp-display-bar button {
  border: 0; background: transparent; color: #dbe8f2; font-size: 12px; font-weight: 800;
  padding: 6px 10px; border-radius: 999px; cursor: pointer;
}
#vp-display-bar button:hover { background: rgba(255, 255, 255, .14); }
#vp-display-bar button[aria-pressed="true"] { background: #fff; color: #0b3a5b; }

/* ⑫ زر الطباعة/حفظ PDF في عرض الرسالة */
#vp-print-btn { order: 9; }

/* ⑬ طبقة «تباين عالٍ» اختيارية (AA+/AAA للنصوص الحرجة) */
body.high-contrast { --muted: #33475a !important; }
body.high-contrast :where(.muted, small, .auth-hint, .vp-ago) { color: #24384a !important; }
body.high-contrast :where(.chip-muted) { background: #dfe8f0 !important; color: #17324a !important; }
body.high-contrast :where(#message-list li .m-meta) { color: #2b4459 !important; }

/* ⑭ رابط «تخطَّ إلى المحتوى» لأجهزة القارئ والكيبورد */
#vp-skip {
  position: fixed; top: -60px; inset-inline-start: 12px; z-index: 10000;
  background: #0b3a5b; color: #fff; padding: 8px 14px; border-radius: 0 0 10px 10px;
  font-weight: 800; text-decoration: none; transition: top .18s ease;
}
#vp-skip:focus { top: 0; }

/* ⑮ تحسين شكل القوائم المنسدلة (سهم واضح وخلفية نظيفة) */
:where(select) {
  appearance: none; background-image: linear-gradient(45deg, transparent 50%, #5d7386 50%), linear-gradient(135deg, #5d7386 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% + 1px), calc(100% - 13px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-inline-end: 30px !important;
}

/* ⑯ عناوين الأقسام في اللوحات: حجم أوضح وتباعد أنسب */
:where(.panel > strong, #attach-center-summary, #list-count) { letter-spacing: .2px; }

/* ⑰ شرائح الصور في الرسالة: حدود وظل خفيف حتى لا تبدو معلّقة */
:where(#v-html img) { border-radius: 8px; }

/* ⑱ النافذة المنبثقة: شكل بطاقة موحّد مع رأس ثابت */
:where(.modal-box) { max-height: 88vh; overflow: auto; }
:where(.modal-box > h3:first-child) { position: sticky; top: 0; background: inherit; z-index: 2; }

/* ⑲ الجوال: شريط الإعدادات يصغر ولا يعيق المحتوى */
@media (max-width: 720px) {
  #vp-display-bar { inset-block-end: 8px; inset-inline-end: 8px; padding: 4px; }
  #vp-display-bar button { padding: 5px 8px; font-size: 11px; }
}

/* ⑳ تقليل الحركة: يحترم اختيار المستخدم الصريح ويُوقف كل الحركات */
body.motion-off *, body.motion-off *::before, body.motion-off *::after {
  animation: none !important; transition: none !important;
}

/* 🔒 تصحيحات قياس (أولوية معرّفات لا :where) */
body.density-compact #message-list li, body.density-compact #sent-list li { min-height: 48px !important; padding: 5px 9px !important; }
body.density-comfy #message-list li, body.density-comfy #sent-list li { min-height: 76px !important; padding: 12px 12px !important; }
body.density-compact #message-list li .m-subject { font-size: 13px !important; }
#message-list li:nth-child(even), #sent-list li:nth-child(even), #attach-rows tr:nth-child(even) { background: rgba(11, 58, 91, .045) !important; }
body.theme-dark #message-list li:nth-child(even) { background: #16293a !important; }

/* ⑧ مؤشّر الاتصال: زخرفة CSS على شريحة الصلاحيات (لا يُمسح بإعادة الكتابة) */
#perm-chip::before {
  content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: #4ade80; margin-inline-end: 6px; vertical-align: middle;
  box-shadow: 0 0 0 0 rgba(74, 222, 128, .6); animation: vp-pulse 2.2s infinite;
}
#perm-chip.vp-offline::before { background: #f87171; animation: none; }