/* ============================================================================
 * ✨ الموجة السابعة من التحسينات البصرية — ٢٠ تحسينًا (2026-10-05)
 * تُحمَّل بعد الموجات ١-٦. تركيز: إجراءات سريعة · تنقّل كيبورد · مشاركة/ZIP · سمات متقدمة.
 * ============================================================================ */

/* ① الوضع الداكن داخل إطار الرسالة (يُبنى في الطبقة الديناميكية) */
body.theme-dark #v-html { background: #0f1f2c !important; }

/* ② إجراءات سريعة تظهر عند مرور المؤشر على الصف */
.vp-row-actions {
  display: inline-flex; gap: 4px; opacity: 0; transition: opacity .15s ease; margin-inline-start: 6px;
}
#message-list li:hover .vp-row-actions, #sent-list li:hover .vp-row-actions, .vp-row-actions:focus-within { opacity: 1; }
.vp-row-actions button {
  border: 1px solid #dbe7f2; background: #fff; color: #33566f; border-radius: 8px;
  padding: 1px 6px; font-size: 11px; font-weight: 800; cursor: pointer;
}
.vp-row-actions button:hover { background: #eef5fb; }
.vp-row-actions button.vp-on { background: #fff2a8; border-color: #f0dfa0; color: #6a5200; }

/* ③ أزرار المشاركة وZIP في شريط عرض الرسالة */
#vp-share-btn, #vp-zip-btn { order: 8; }
#vp-share-btn.vp-busy, #vp-zip-btn.vp-busy { opacity: .7; pointer-events: none; }

/* ④ التنقّل بالكيبورد: تظليل الصف المُوجَّه */
#message-list li.vp-kbd-focus, #sent-list li.vp-kbd-focus {
  box-shadow: inset 0 0 0 2px #1a8bd6, var(--vp-shadow-1, 0 1px 2px rgba(11,58,91,.06)) !important;
  background: #eaf4ff !important;
}

/* ⑤ وميض الرسالة الجديدة */
.vp-new-flash { animation: vp-new 1.4s ease-out 2; }
@keyframes vp-new { 0% { background: #d9f2e2; } 100% { background: transparent; } }

/* ⑥ شريحتان للترتيب وحجم الصفحة بشكل حبّات */
#sort-cycle-btn, #page-size-select {
  border-radius: 999px !important; border: 1px solid #dbe7f2 !important; background: #fff !important;
  color: #33566f !important; font-weight: 800 !important; padding: 5px 12px !important; font-size: 12px !important;
}
#page-size-select { appearance: none; padding-inline-end: 14px !important; }

/* ⑦ حالة فارغة برسم SVG خفيف بدل الرمز التعبيري */
#list-empty.vp-svg-empty, .empty.vp-svg-empty {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 24 24' fill='none' stroke='%23a8bfd2' stroke-width='1.4'><rect x='2.5' y='5' width='19' height='14' rx='2.5'/><path d='M3 7l9 6 9-6'/></svg>");
  background-repeat: no-repeat; background-position: center 14px; background-size: 52px 52px;
  padding-top: 78px !important;
}
#list-empty.vp-svg-empty::before, .empty.vp-svg-empty::before { display: none !important; content: "" !important; }

/* ⑧ حلقة زمنية في التنبيه بدل الشريط */
.vp-toast.vp-ring::after { display: none; }
.vp-toast .vp-ring-svg { position: absolute; inset-inline-end: 8px; bottom: 6px; width: 18px; height: 18px; }
.vp-toast .vp-ring-svg circle { fill: none; stroke-width: 3; }
.vp-toast .vp-ring-svg .vp-ring-bg { stroke: rgba(255,255,255,.3); }
.vp-toast .vp-ring-svg .vp-ring-fg { stroke: #fff; stroke-dasharray: 44; stroke-dashoffset: 0; animation: vp-ring 10s linear forwards; transform-origin: center; transform: rotate(-90deg); }
@keyframes vp-ring { to { stroke-dashoffset: 44; } }

/* ⑨ غطاء تحميل للعمليات الثقيلة */
#vp-busy {
  position: fixed; inset: 0; z-index: 10003; display: none; background: rgba(6, 22, 34, .45);
  align-items: center; justify-content: center; flex-direction: column; gap: 10px; color: #fff; font-weight: 800;
}
#vp-busy.vp-open { display: flex; }
#vp-busy .vp-spinner {
  width: 38px; height: 38px; border: 3px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%;
  animation: vp-spin .8s linear infinite;
}

/* ⑩ هيكل ترويسة عرض الرسالة أثناء التحميل */
#viewer.vp-loading .viewer-head { opacity: .55; }
#viewer.vp-loading .viewer-body { min-height: 220px; background: linear-gradient(90deg, #eef3f8, #f7fafc, #eef3f8); border-radius: 10px; }

/* ⑪ تلميح البحث */
#vp-search-hint { font-size: 11px; color: #7188a0; margin-inline-start: 8px; }

/* ⑫ ورقة الاختصارات: صفوف جديدة أوضح */
#vp-shortcuts kbd { min-width: 22px; display: inline-block; text-align: center; }

/* ⑬ الوضع الداكن: نافذة الإرسال وشريط الإعدادات */
body.theme-dark #compose-modal .modal-box { background: #16293a !important; border-color: #24435c !important; }
body.theme-dark #compose-modal :where(input, textarea, select) { background: #132434 !important; color: #e8f1f8 !important; }
body.theme-dark #vp-drop-zone { background: #1b3242 !important; border-color: #2a4a66 !important; color: #a9c1d4 !important; }

/* ⑭ الطباعة: لا تقطع بطاقات المرفقات بين الصفحات */
@media print {
  #v-attachments-list li, .vp-file-icon, #msg-info-body tr { break-inside: avoid; page-break-inside: avoid; }
}

/* ⑮ الجوال: زر الإرسال ثابت أسفل نافذة الإرسال */
@media (max-width: 720px) {
  #compose-modal form button[type="submit"] {
    position: sticky; bottom: 0; z-index: 3; width: 100%; margin-top: 8px;
  }
}

/* ⑯ قائمة سريعة (⋯) للصف — إيماءة بصرية */
.vp-more { font-size: 14px; line-height: 1; }

/* ⑰ شريحة سياق الصندوق في شريط الحالة */
#vp-context { background: rgba(255,255,255,.16); border-radius: 999px; padding: 1px 8px; }

/* ⑱ إبراز الصف عند تمرير المؤشر بشكل أهدأ في الوضع الداكن */
body.theme-dark #message-list li:hover, body.theme-dark #sent-list li:hover { background: #1a3348 !important; }

/* ⑲ شارة «مُحدَّث الآن» تظهر بعد المزامنة */
.vp-synced { animation: vp-bump .4s ease-out; }

/* ⑳ احترام إيقاف الحركة لكل ما أُضيف في هذه الموجة */
body.motion-off .vp-new-flash, body.motion-off #vp-busy .vp-spinner, body.motion-off .vp-toast .vp-ring-fg { animation: none !important; }