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

/* ① «اقرأ المزيد» لنصّ الرسالة الطويل (مع تلاشٍ أنيق) */
.vp-clip { max-height: 420px; overflow: hidden; position: relative; }
.vp-clip::after {
  content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 90px;
  background: linear-gradient(180deg, rgba(255,255,255,0), #fff 80%);
  pointer-events: none;
}
body.theme-dark .vp-clip::after { background: linear-gradient(180deg, rgba(15,31,44,0), #0f1f2c 80%); }
#vp-read-more {
  margin: 6px 0 10px; border: 1px solid #dbe7f2; background: #fff; color: #14567f;
  border-radius: 999px; padding: 5px 14px; font-size: 12px; font-weight: 800; cursor: pointer;
}
#vp-read-more:hover { background: #eef5fb; }

/* ② طيّ الاقتباس الطويل داخل نصّ الرسالة */
.vp-quote-clip { border-inline-start: 3px solid #bcd8ec; padding-inline-start: 10px; margin: 8px 0; }
.vp-quote-clip.vp-collapsed { max-height: 90px; overflow: hidden; }

/* ③ زمن قراءة الرسالة التقديري */
#vp-reading-time { font-variant-numeric: tabular-nums; }

/* ④ عدّاد كلمات/أحرف لنصّ الإرسال */
#vp-compose-count {
  display: inline-block; margin-inline-start: 8px; font-size: 11.5px; font-weight: 800; color: #5d7386;
}
#vp-compose-count.vp-warn { color: #925b00; }

/* ⑤ شريحة لغة الرسالة في نافذة الإرسال */
#vp-lang-chip { font-weight: 900; letter-spacing: .3px; }
#vp-lang-chip[data-lang="en"] { background: #e8f0fe !important; color: #1d4ed8 !important; }
#vp-lang-chip[data-lang="ar"] { background: #e7f7ee !important; color: #0f7b3f !important; }

/* ⑥ منطقة سحب وإفلات المرفقات */
#vp-drop-zone {
  border: 2px dashed #bcd8ec; border-radius: 14px; padding: 12px; text-align: center;
  font-size: 12.5px; font-weight: 800; color: #41637d; background: #f8fbfe; margin-block: 8px;
  transition: background .15s ease, border-color .15s ease;
}
#vp-drop-zone.vp-over { background: #eaf4ff; border-color: #1a8bd6; color: #14567f; }

/* ⑦ مرفقات الإرسال كرقائق */
#c-files-list { display: flex; flex-wrap: wrap; gap: 6px; }
#c-files-list:not([hidden]) { background: transparent !important; }

/* ⑧ حالة «جارٍ الإرسال» بزر الإرسال */
.vp-sending { position: relative; opacity: .85; pointer-events: none; }
.vp-sending::after {
  content: ""; width: 13px; height: 13px; margin-inline-start: 8px; display: inline-block; vertical-align: -2px;
  border: 2px solid rgba(255,255,255,.45); border-top-color: #fff; border-radius: 50%;
  animation: vp-spin .7s linear infinite;
}
@keyframes vp-spin { to { transform: rotate(360deg); } }

/* ⑨ حقول غير صحيحة: تنبيه بصري فوري */
:where(input:invalid:not(:placeholder-shown), textarea:invalid:not(:placeholder-shown)) {
  border-color: #e79c9c !important; background: #fffafa !important;
}

/* ⑩ «تلقائي» في السمات (يتبع نظام المستخدم) */
body.theme-auto { color-scheme: light dark; }
@media (prefers-color-scheme: dark) {
  body.theme-auto { background: linear-gradient(180deg, #0d1b26 0%, #12212e 240px) !important; color: #dbe8f2 !important; }
  body.theme-auto :where(#viewer, .modal-box, .hub-btn, #account-list li button, #folder-list button, .panel) { background: #16293a !important; color: #dbe8f2 !important; border-color: #24435c !important; }
}

/* ⑪ ألوان هوية اختيارية (accent) — تُحفظ للمستخدم */
body[data-accent="sky"] { --vp-unread-accent: #1a8bd6; }
body[data-accent="emerald"] { --vp-unread-accent: #0f7b3f; }
body[data-accent="amber"] { --vp-unread-accent: #b45309; }
body[data-accent="violet"] { --vp-unread-accent: #7c3aed; }
body[data-accent] :where(.btn-primary) { background: linear-gradient(180deg, var(--vp-unread-accent), rgba(0,0,0,.22)) !important; }

/* ⑫ نقاط اختيار اللون في شريط الإعدادات */
.vp-swatch { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #fff; cursor: pointer; padding: 0 !important; }
.vp-swatch[data-color="sky"] { background: #1a8bd6; }
.vp-swatch[data-color="emerald"] { background: #0f7b3f; }
.vp-swatch[data-color="amber"] { background: #b45309; }
.vp-swatch[data-color="violet"] { background: #7c3aed; }
.vp-swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(255,255,255,.35); }

/* ⑬ شريط «آخر الإجراءات» في أسفل الشاشة */
#vp-recent { display: inline-flex; gap: 6px; align-items: center; }
#vp-recent:empty { display: none; }
.vp-recent-chip {
  background: rgba(255,255,255,.16); border-radius: 999px; padding: 1px 8px; font-size: 10.5px; font-weight: 800;
}

/* ⑭ طيّ أقسام العمود الجانبي */
.folders h4 { cursor: pointer; display: flex; align-items: center; gap: 6px; user-select: none; }
.folders h4::before { content: "▾"; font-size: 10px; color: #5d7386; }
.folders.vp-collapsed h4::before { content: "▸"; }
.folders.vp-collapsed ul { display: none; }

/* ⑮ كثافة أعلى للجداول داخل النوافذ */
.modal-box table td, .modal-box table th { padding: 6px 8px !important; font-size: 12.5px; }

/* ⑯ معاينة المرفق: هامش وحشوة أنيقان */
#attach-preview-body { padding: 10px !important; }

/* ⑰ زر الإرسال: تمييز عند الجهوزية */
#compose-modal form:valid button[type="submit"] { box-shadow: 0 6px 18px rgba(29,111,165,.28); }

/* ⑱ تنبيه مع زر إجراء */
.vp-toast button.vp-toast-action {
  margin-inline-start: 10px; border: 1px solid rgba(255,255,255,.5); background: transparent; color: inherit;
  border-radius: 999px; padding: 2px 10px; font-size: 11.5px; font-weight: 800; cursor: pointer;
}
.vp-toast button.vp-toast-action:hover { background: rgba(255,255,255,.16); }

/* ⑲ الجوال: لوحة الأوامر بعرض كامل تقريبًا */
@media (max-width: 720px) {
  #vp-palette-box { width: 96vw; }
  #vp-drop-zone { padding: 10px; font-size: 11.5px; }
}

/* ⑳ الطباعة: إخفاء عناصر التحسين غير الضرورية */
@media print {
  #vp-read-more, #vp-compose-count, #vp-drop-zone, #vp-recent, #vp-bottom-nav { display: none !important; }
  .vp-clip { max-height: none !important; }
  .vp-clip::after { display: none !important; }
}