/* ==========================================================================
   APP CSS — فقط جایی که Tailwind معادل ندارد (بند ۳ بخش ۵٫۴)
   هیچ رنگ، شعاع یا سایه‌ای اینجا تعریف نمی‌شود؛ همه از توکن‌های کیت می‌آیند.
   ناحیه‌های امن دستگاه با مقادیر دلخواه Tailwind (مثل pb-[calc(...env())]) در
   خود مارک‌آپ حل شده‌اند و اینجا تکرار نمی‌شوند.
   ========================================================================== */

/* --------------------------------------------------------------------------
   هدف لمسی حداقل ۴۴×۴۴ — الزام بخش ۵٫۷
   کنترل‌های کوچک کیت (۳۶ و ۴۰ پیکسل) از نظر دیداری تغییر نمی‌کنند؛ فقط ناحیه‌ی
   لمس‌شان با یک شبه‌المان نامرئی گسترده می‌شود. Tailwind برای گسترش ناحیه‌ی لمس
   بدون تغییر چیدمان معادلی ندارد.
   -------------------------------------------------------------------------- */
.icon-btn-sm,
.fab-sm,
.chip {
  position: relative;
}

.icon-btn-sm::after,
.fab-sm::after,
.chip::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 44px;
  min-height: 44px;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
}

/* نوار کشیدنی فقط ۶ پیکسل ارتفاع دارد؛ ناحیه‌ی لمسش تا ۴۴ پیکسل باز می‌شود بی‌آنکه
   ظاهر یا چیدمانش عوض شود. گسترش فقط عمودی است، پس هیچ کنترل هم‌ردیفی را نمی‌پوشاند. */
.slider::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 50%;
  height: 44px;
  transform: translateY(-50%);
}

/* --------------------------------------------------------------------------
   کشیدن نوارها (امتیاز، پیشرفت، صدا): جلوگیری از اسکرول و انتخاب متن حین درگ
   -------------------------------------------------------------------------- */
.dragging,
.dragging * {
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

/* نوارهای کشیدنی همیشه باید حرکت افقی را بگیرند، نه اسکرول صفحه */
[role="slider"] {
  touch-action: none;
}

/* --------------------------------------------------------------------------
   احترام به prefers-reduced-motion — الزام بخش ۵٫۷
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}