/**
 * 🎞️ طبقة الحركة الموحَّدة — منظومة بريد ديتيلز (Details Motion System) v1.0
 *
 * المبادئ:
 *  ١) الحركة تخدم المعنى: تُوضّح «من أين جاء العنصر» و«ماذا تغيّر» — لا زخرفة.
 *  ٢) لا تحريك لخصائص التخطيط: `transform` و`opacity` فقط (بلا jank ولا إعادة تخطيط).
 *  ٣) قصيرة: 120–280ms · منحنى واحد قياسي + منحنى ارتداد خفيف للشارات فقط.
 *  ٤) **تحترم `prefers-reduced-motion`** بالكامل: من يطلب تقليل الحركة يحصل على ظهور فوري.
 *  ٥) تُوقَف كليًا بـ`?motion=0`.
 */

:root {
  --dm-fast: 120ms;
  --dm-base: 180ms;
  --dm-slow: 260ms;
  --dm-enter: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dm-exit: cubic-bezier(0.4, 0, 1, 1);
  --dm-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dm-stagger: 18ms;
}

/* ═══ الحركات الأساسية ═══════════════════════════════════════════════════ */
@keyframes dm-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes dm-fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes dm-fade-down { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes dm-scale-in { from { opacity: 0; transform: scale(0.97) translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes dm-scale-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(0.98) translateY(4px); } }
@keyframes dm-slide-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@keyframes dm-pop { 0% { transform: scale(0.9); } 60% { transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes dm-ring { 0% { box-shadow: 0 0 0 0 rgba(197, 152, 60, 0.45); } 70% { box-shadow: 0 0 0 10px rgba(197, 152, 60, 0); } 100% { box-shadow: 0 0 0 0 rgba(197, 152, 60, 0); } }
@keyframes dm-shimmer { 0% { background-position: -180% 0; } 100% { background-position: 180% 0; } }
@keyframes dm-spin { to { transform: rotate(360deg); } }
@keyframes dm-progress { from { width: 100%; } to { width: 0%; } }
@keyframes dm-icon-lift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

/* ═══ ١) النوافذ (Modal) ════════════════════════════════════════════════ */
.modal:not([hidden]) { animation: dm-fade-in var(--dm-base) var(--dm-enter) both; }
.modal:not([hidden]) > .modal-box,
.modal:not([hidden]) > .modal-card { animation: dm-scale-in var(--dm-slow) var(--dm-enter) both; }
.modal.dm-leaving { animation: dm-fade-in var(--dm-fast) var(--dm-exit) reverse both; }
.modal.dm-leaving > .modal-box,
.modal.dm-leaving > .modal-card { animation: dm-scale-out var(--dm-fast) var(--dm-exit) both; }

/* ═══ ٢) قائمة الرسائل: ظهور متتابع + تحديد ═══════════════════════════ */
#message-list > li,
#sent-list > li,
#demo-list > li,
.messages > li {
  animation: dm-fade-up var(--dm-base) var(--dm-enter) both;
  animation-delay: calc(var(--dm-i, 0) * var(--dm-stagger));
}
#message-list.dm-loading { opacity: 0.6; transition: opacity var(--dm-base) var(--dm-enter); }
#message-list.dm-loading::before {
  content: "";
  display: block;
  height: 3px;
  margin: 6px 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, #eef2f7 25%, #dbe3ec 37%, #eef2f7 63%);
  background-size: 220% 100%;
  animation: dm-shimmer 1.1s linear infinite;
}
#message-list > li.active { animation: dm-ring 900ms var(--dm-enter) 1; }

/* ═══ ٣) نافذة القراءة: تبديل الرسالة ═════════════════════════════════ */
#viewer.dm-swap { animation: dm-fade-up var(--dm-slow) var(--dm-enter) both; }
#v-body { transition: opacity var(--dm-base) var(--dm-enter); }

/* ═══ ٤) البطاقات (مركز العمل والوحدات) ══════════════════════════════ */
#hub-grid > * { animation: dm-scale-in var(--dm-slow) var(--dm-enter) both; animation-delay: calc(var(--dm-i, 0) * 22ms); }
#hub-grid > *:hover .hub-icon, .details-module-card:hover .details-card-header span:first-child { animation: dm-icon-lift 900ms var(--dm-enter) infinite; }

/* ═══ ٥) الأزرار والشارات ═════════════════════════════════════════════ */
.btn { transition: transform var(--dm-fast) var(--dm-enter), background-color var(--dm-fast) var(--dm-enter), border-color var(--dm-fast) var(--dm-enter), box-shadow var(--dm-fast) var(--dm-enter); }
.btn:active:not([disabled]) { transform: scale(0.97); }
.btn[disabled], .btn[aria-busy="true"] { position: relative; }
.btn[aria-busy="true"]::after {
  content: "";
  width: 12px; height: 12px; margin-inline-start: 6px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  display: inline-block;
  animation: dm-spin 700ms linear infinite;
}
.chip { transition: transform var(--dm-fast) var(--dm-spring), background-color var(--dm-base) var(--dm-enter), color var(--dm-base) var(--dm-enter); }
.chip.dm-pop { animation: dm-pop 320ms var(--dm-spring) both; }
.m-age { transition: transform var(--dm-fast) var(--dm-spring); }
.m-age:hover { transform: scale(1.04); }

/* ═══ ٦) التنبيهات والشريط الزمني ════════════════════════════════════ */
.alert:not([hidden]) { animation: dm-slide-in var(--dm-slow) var(--dm-enter) both; position: relative; overflow: hidden; }
.alert:not([hidden])::after {
  content: "";
  position: absolute; inset-inline-start: 0; bottom: 0; height: 2px;
  background: currentColor; opacity: 0.35;
  animation: dm-progress var(--alert-ttl, 10s) linear forwards;
}
.alert.dm-leaving { animation: dm-fade-in var(--dm-fast) var(--dm-exit) reverse both; }

/* ═══ ٧) الهياكل العظمية والتحميل ════════════════════════════════════ */
.dm-skeleton {
  background: linear-gradient(90deg, #eef2f7 25%, #dbe3ec 37%, #eef2f7 63%);
  background-size: 220% 100%;
  animation: dm-shimmer 1.1s linear infinite;
  border-radius: 10px;
  min-height: 14px;
}

/* ═══ ٨) التبويبات والمجلدات ═════════════════════════════════════════ */
.mail-mode-tab, .folders button, .details-nav-item {
  transition: background-color var(--dm-base) var(--dm-enter), color var(--dm-base) var(--dm-enter), transform var(--dm-fast) var(--dm-enter);
}
.mail-mode-tab:active, .details-nav-item:active { transform: scale(0.98); }

/* ═══ ٩) شريط الحالة والأشرطة العلوية ═══════════════════════════════ */
.topbar { animation: dm-fade-down var(--dm-slow) var(--dm-enter) both; }
.layout, .view-pane { animation: dm-fade-in var(--dm-slow) var(--dm-enter) both; }

/* ═══ ١٠) عناصر مساندة: اهتزاز تنبيهي قصير ═══════════════════════════ */
@keyframes dm-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}
.dm-attention { animation: dm-shake 420ms var(--dm-enter) both; }

/* ═══ ١١) صفحة الدخول الموحّد ════════════════════════════════════════ */
.rail { animation: dm-fade-in var(--dm-slow) var(--dm-enter) both; }
.rail-title, .rail-sub, .rail-list li {
  animation: dm-fade-up var(--dm-base) var(--dm-enter) both;
  animation-delay: calc(var(--dm-i, 0) * 30ms);
}
.card { animation: dm-scale-in var(--dm-slow) var(--dm-enter) both; }
.tabs .tab { transition: background-color var(--dm-base) var(--dm-enter), color var(--dm-base) var(--dm-enter), transform var(--dm-fast) var(--dm-enter); }
.tabs .tab:active { transform: scale(0.98); }
.field input { transition: border-color var(--dm-base) var(--dm-enter), box-shadow var(--dm-base) var(--dm-enter), background-color var(--dm-base) var(--dm-enter); }
.field input:focus { box-shadow: 0 0 0 4px rgba(18, 63, 89, 0.12); }
#code-block:not([hidden]) { animation: dm-fade-up var(--dm-slow) var(--dm-enter) both; }
#otp-person:not([hidden]) { animation: dm-scale-in var(--dm-base) var(--dm-enter) both; }
.code-box {
  transition: transform var(--dm-fast) var(--dm-spring), border-color var(--dm-fast) var(--dm-enter), box-shadow var(--dm-fast) var(--dm-enter), background-color var(--dm-fast) var(--dm-enter);
}
.code-box:focus { transform: scale(1.06); }
.code-boxes .code-box { animation: dm-pop 260ms var(--dm-spring) both; animation-delay: calc(var(--dm-i, 0) * 45ms); }
.primary, .google, .link, .tab, .copy {
  transition: transform var(--dm-fast) var(--dm-enter), filter var(--dm-fast) var(--dm-enter), background-color var(--dm-base) var(--dm-enter), color var(--dm-base) var(--dm-enter);
}
.primary:active:not([disabled]), .google:active, .copy:active, .link:active { transform: scale(0.98); }
.primary[aria-busy="true"]::after {
  content: "";
  width: 12px; height: 12px; margin-inline-start: 6px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  display: inline-block;
  animation: dm-spin 700ms linear infinite;
}
.chip, #otp-timer { transition: transform var(--dm-base) var(--dm-spring), background-color var(--dm-base) var(--dm-enter); }

/* ═══ ١٢) صفحة نسخ الرمز ════════════════════════════════════════════ */
.digits .digit { animation: dm-pop 320ms var(--dm-spring) both; animation-delay: calc(var(--dm-i, 0) * 60ms); }
.copy.dm-ok { animation: dm-pop 320ms var(--dm-spring) both; }
.who { animation: dm-fade-up var(--dm-base) var(--dm-enter) both; }

/* ═══ ١٣) الترقيم وكشف التحليل داخل المنظومة ══════════════════════════ */
#list-pager { animation: dm-fade-up var(--dm-base) var(--dm-enter) both; }
.pager-btn { transition: transform var(--dm-fast) var(--dm-enter), background-color var(--dm-base) var(--dm-enter), color var(--dm-base) var(--dm-enter); }
.pager-btn:active:not([disabled]) { transform: scale(0.95); }
#v-ai:not([hidden]) { animation: dm-fade-up var(--dm-slow) var(--dm-enter) both; }
#v-ai > div {
  animation: dm-fade-up var(--dm-base) var(--dm-enter) both;
  animation-delay: calc(var(--dm-i, 0) * 40ms);
}

/* ═══ ١٤) احترام «تقليل الحركة» — إلزامي ═════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  :root { --dm-fast: 1ms; --dm-base: 1ms; --dm-slow: 1ms; --dm-stagger: 0ms; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}