/* ============================================================
   بريد tn.sa — طبقة الحركة (آخر ملفّ في ترتيب التحميل)
   حركة فقط: توقيت، تدرّج، انتقال. لا ألوان ولا قياسات جديدة.
   القاعدة: كل حركة تخدم الفهم — من أين جاء العنصر وإلى أين ذهب.
   الوضع المخفَّف (prefers-reduced-motion) معطَّل أصلًا في tn-tokens.css.
   ============================================================ */

/* ============ ١. دخول الصفحة: تدرّج زمنيّ بين الطبقات ============ */
/* الشبكة نفسها تتلاشى (معرَّف في tn-shell)، ونضيف هنا انتقال عرض العمود
   حتى يتحرّك طيّ الشريط الجانبي بدل أن يقفز. */
body.tn-ready #layout {
  transition: opacity var(--tn-d-4) var(--tn-ease),
              grid-template-columns var(--tn-d-4) var(--tn-ease),
              background-color 200ms var(--tn-ease);
}

@keyframes tn-m-rise {
  from { opacity: 0; transform: translateY(8px); }
}

/* backwards لا forwards: ينتهي التحويل تمامًا بعد الحركة فلا يبقى
   على العنصر transform يُنشئ كتلة احتواء تُربك العناصر الثابتة. */
body.tn-ready #tn-topbar { animation: tn-m-rise var(--tn-d-4) var(--tn-ease-out) 0ms backwards; }
body.tn-ready #tn-main   { animation: tn-m-rise var(--tn-d-4) var(--tn-ease-out) 120ms backwards; }

@media (min-width: 901px) {
  /* على الضيّق يكون الشريط درجًا منزلقًا بـ transform — لا نزاحمه */
  body.tn-ready #layout-sidebar { animation: tn-m-rise var(--tn-d-4) var(--tn-ease-out) 60ms backwards; }
}

/* ============ ٢. الشريط الجانبي: الطيّ والفتح ============ */
/* نُعيد للشريط انتقالًا يشمل transform (الدرج على الشاشات الضيّقة)
   مع تدرّج لون ناعم عند تبديل الوضع الداكن. */
#layout-sidebar {
  transition: transform var(--tn-d-4) var(--tn-ease-out),
              background-color 200ms var(--tn-ease),
              color 200ms var(--tn-ease);
}

/* التسميات تظهر بعد أن يتّسع العمود لا معه، فلا تُرى وهي مقصوصة */
body:not(.tn-mini) .tn-compose-label { transition-delay: 120ms; }

@keyframes tn-m-label-in { from { opacity: 0; transform: translateX(6px); } }
body:not(.tn-mini) #mailboxlist li > a > span:not(.tn-i) {
  animation: tn-m-label-in var(--tn-d-3) var(--tn-ease-out) 120ms backwards;
}

/* ظهور متدرّج للمجلّدات — يعمل مرّة واحدة لأن العناصر تُبنى مرّة واحدة */
@keyframes tn-m-folder-in { from { opacity: 0; transform: translateY(6px); } }
#mailboxlist li { animation: tn-m-folder-in var(--tn-d-3) var(--tn-ease-out) backwards; }
#mailboxlist li:nth-child(1)  { animation-delay: 140ms; }
#mailboxlist li:nth-child(2)  { animation-delay: 160ms; }
#mailboxlist li:nth-child(3)  { animation-delay: 180ms; }
#mailboxlist li:nth-child(4)  { animation-delay: 200ms; }
#mailboxlist li:nth-child(5)  { animation-delay: 220ms; }
#mailboxlist li:nth-child(6)  { animation-delay: 240ms; }
#mailboxlist li:nth-child(7)  { animation-delay: 260ms; }
#mailboxlist li:nth-child(8)  { animation-delay: 280ms; }
#mailboxlist li:nth-child(9)  { animation-delay: 300ms; }
#mailboxlist li:nth-child(n+10) { animation-delay: 320ms; }

/* ============ ٣. زرّ الإنشاء ============ */
a.tn-compose {
  transition: box-shadow var(--tn-d-3) var(--tn-ease),
              background-color var(--tn-d-2) var(--tn-ease),
              transform var(--tn-d-2) var(--tn-ease-out),
              min-inline-size var(--tn-d-4) var(--tn-ease),
              padding var(--tn-d-4) var(--tn-ease);
}
a.tn-compose:hover  { transform: translateY(-1px); }
a.tn-compose:active { transform: translateY(0) scale(.985); transition-duration: var(--tn-d-1); }
/* القلم يميل كأنّه استُلّ للكتابة */
a.tn-compose:hover .tn-compose-ico  { transform: rotate(-14deg) translateY(-1px) scale(1.06); }
a.tn-compose:active .tn-compose-ico { transform: rotate(-6deg) scale(1); }

/* ============ ٤. موجة اللمس والضغط ============ */
/* الموجة الأصلية تتوسّع وتتلاشى بخطّية واحدة؛ نفصل المرحلتين:
   انتشار سريع ثم تلاشٍ متأخّر — هكذا تبدو الموجة مادّية لا مجرّد شفافية. */
.tn-ripple-wave {
  opacity: 0;
  animation: tn-m-ripple 560ms var(--tn-ease-out) forwards;
}
@keyframes tn-m-ripple {
  0%   { transform: scale(0);   opacity: .22; }
  55%  { transform: scale(.85); opacity: .16; }
  100% { transform: scale(1);   opacity: 0; }
}

/* ضغطة محسوسة على الأزرار الحبّة */
.tn-pill-btn, .tn-tab, .tn-app-tile, .tn-panel-item, .btn {
  transition: background-color var(--tn-d-2) var(--tn-ease),
              color var(--tn-d-2) var(--tn-ease),
              border-color var(--tn-d-2) var(--tn-ease),
              transform var(--tn-d-1) var(--tn-ease-out);
}
.tn-pill-btn:active, .tn-tab:active, .tn-app-tile:active,
.tn-panel-item:active, .btn:active { transform: scale(.97); }
.tn-iconbtn:active { transform: scale(.94); }
.tn-iconbtn { transition: background-color var(--tn-d-2) var(--tn-ease),
                          color var(--tn-d-2) var(--tn-ease),
                          transform var(--tn-d-1) var(--tn-ease-out); }

/* مؤشّر التبويب ينزلق بين التبويبات بدل أن يقفز.
   نستثني القاعدة المنطقية هنا: tn.js يكتب style.width فيجب أن يكون
   اسم الخاصّية المنتقِلة هو نفسه الذي يكتبه. */
.tn-tab-ink {
  transition: transform var(--tn-d-3) var(--tn-ease-out),
              width var(--tn-d-3) var(--tn-ease-out);
}

/* ============ ٥. صفوف الرسائل ============ */
@keyframes tn-m-row-in { from { opacity: 0; transform: translateY(6px); } }
#messagelist tbody > tr.tn-row-in {
  animation: tn-m-row-in var(--tn-d-3) var(--tn-ease-out) backwards;
}
#messagelist tbody > tr {
  transition: background-color var(--tn-d-1) var(--tn-ease),
              box-shadow var(--tn-d-1) var(--tn-ease);
}

/* الخروج: ينزلق نحو بداية السطر (يمينًا في RTL) ثم يتلاشى.
   المتغيّر يجعل الاتجاه منطقيًّا لأن transform لا يعرف اتّجاه الكتابة. */
:root { --tn-row-out-x: -32px; }
html[dir='rtl'] { --tn-row-out-x: 32px; }
@keyframes tn-row-out {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(var(--tn-row-out-x)); }
}
#messagelist tbody > tr.tn-row-out,
.tn-row-out {
  animation: tn-row-out var(--tn-d-3) var(--tn-ease) forwards;
  pointer-events: none;
}

/* ============ ٦. التبديل بين المجلّدات ============ */
/* لا يضيف Roundcube صنف انشغال على body — الإشارة الحقيقية الوحيدة هي
   رسالة التحميل داخل #messagestack، فنقرأها بـ :has. */
#messagelist-content { transition: opacity var(--tn-d-3) var(--tn-ease); }
body.busy #messagelist-content,
body.tn-busy #messagelist-content,
body:has(#messagestack > div.loading) #messagelist-content {
  opacity: .55;
  /* تأخير الخفوت وحده: العمليات السريعة تنتهي قبله فلا يومض شيء */
  transition-delay: 220ms;
}

/* ============ ٧. لوحة القراءة ============ */
@keyframes tn-m-fade { from { opacity: 0; } }
@keyframes tn-m-fade-rise { from { opacity: 0; transform: translateY(8px); } }

/* على الواسعة لا يضيف Roundcube أي صنف عند فتح رسالة (تحقّقنا: صنف
   layout-content يبقى فارغًا)، لكن إطار الرسالة يُعاد تحميله في كل مرّة —
   وهذا الملفّ يُحمَّل داخل الإطار أيضًا، فنُعلّق التلاشي على جسد الإطار. */
html.iframe body { animation: tn-m-fade-rise var(--tn-d-3) var(--tn-ease-out) backwards; }

#layout-content {
  transition: transform var(--tn-d-4) var(--tn-ease-out),
              background-color 200ms var(--tn-ease);
}
/* الضيّقة: اللوحة تنزلق فوق القائمة (الانتقال في tn-shell) ونضيف التلاشي */
@media (max-width: 1200px) {
  #layout-content.selected { animation: tn-m-fade var(--tn-d-4) var(--tn-ease-out) backwards; }
}

/* ============ ٨. اللوحات والقوائم المنبثقة ============ */
/* تخرج من زاوية الزرّ الذي فتحها: تصغير طفيف مع صعود.
   (الانتقال نفسه معرَّف في القسم ١٠ ليجمع الحركة وتدرّج اللون معًا) */
.tn-panel {
  transform: translateY(-6px) scale(.96);
  transform-origin: top right;
}
html[dir='rtl'] .tn-panel { transform-origin: top left; }

/* قوائم Roundcube تُوضَع بـ transform من Popper — لذلك نحرّك خاصية scale
   المستقلّة، فهي تُركَّب فوق transform ولا تمحو موضع القائمة. */
@keyframes tn-m-pop-in { from { opacity: 0; scale: .96; } }
.popover, .ui-dialog, #rcmKSearchpane, .ui-autocomplete {
  animation: tn-m-pop-in var(--tn-d-3) var(--tn-ease-out) backwards;
  transform-origin: top center;
}

/* ============ ٩. مؤشّر الانشغال العامّ ============ */
body.busy::after,
body.tn-busy::after,
body:has(#messagestack > div.loading)::after {
  content: '';
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 3px;
  z-index: 200;
  pointer-events: none;
  background: linear-gradient(to right, transparent, var(--tn-primary) 40%, var(--tn-primary) 60%, transparent);
  background-size: 45% 100%;
  background-repeat: no-repeat;
  /* حركتان: الموضع يعمل فورًا، والظهور متأخّر ١٨٠ms حتى لا يومض الشريط
     في العمليات الخاطفة كالتحديث الدوريّ في الخلفية */
  animation: tn-m-bar 1.5s var(--tn-ease) infinite,
             tn-m-bar-in var(--tn-d-2) var(--tn-ease) 180ms backwards;
}
@keyframes tn-m-bar-in { from { opacity: 0; } }
/* ذهابًا وإيابًا بموضع الخلفية: متماثل فلا يحتاج قلبًا في RTL */
@keyframes tn-m-bar {
  0%, 100% { background-position: -55% 0; }
  50%      { background-position: 155% 0; }
}

/* ============ ١٠. تبديل الوضع الداكن ============ */
/* على الأسطح الكبرى فقط — تعميمه على كل عنصر يُثقل التمرير */
html, body, #layout, #tn-topbar, #tn-main, #layout-list, .tn-tabs {
  transition: background-color 200ms var(--tn-ease),
              color 200ms var(--tn-ease),
              border-color 200ms var(--tn-ease);
}
/* اللوحة المنبثقة تحتفظ بحركتها الخاصّة فوق تدرّج اللون */
.tn-panel {
  transition: opacity var(--tn-d-2) var(--tn-ease),
              transform var(--tn-d-3) var(--tn-ease-out),
              visibility 0s linear var(--tn-d-3),
              background-color 200ms var(--tn-ease),
              color 200ms var(--tn-ease);
}
.tn-panel.open {
  transform: none;
  transition: opacity var(--tn-d-2) var(--tn-ease),
              transform var(--tn-d-3) var(--tn-ease-out),
              visibility 0s,
              background-color 200ms var(--tn-ease),
              color 200ms var(--tn-ease);
}

/* ============ احترام تقليل الحركة ============ */
@media (prefers-reduced-motion: reduce) {
  /* الرموز تُصفّر المدد؛ يبقى إيقاف الشريط اللانهائي حتى لا يدور بلا نهاية */
  body.busy::after, body.tn-busy::after,
  body:has(#messagestack > div.loading)::after { animation: none; background-position: 50% 0; }
}