/* Self-hosted extras + light circular theme transition (mobile + desktop) */

/* Custom scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
.dark ::-webkit-scrollbar-track { background: #18181b; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
.dark ::-webkit-scrollbar-thumb { background: #3f3f46; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

body {
  font-family: 'Vazirmatn', system-ui, sans-serif;
}

html, body {
  height: 100%;
  height: 100dvh;
  max-height: 100dvh;
  overscroll-behavior: none;
}

/* Fallback soft color transition (when no View Transition API) */
html.cs-theme-soft body,
html.cs-theme-soft .bg-white,
html.cs-theme-soft .bg-zinc-50,
html.cs-theme-soft .bg-zinc-100 {
  transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease !important;
}

/* Circular reveal — short & light on ALL devices */
@supports (view-transition-name: none) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
  }

  ::view-transition-image-pair(root) {
    isolation: auto;
  }

  ::view-transition-old(root) {
    z-index: 1;
  }

  ::view-transition-new(root) {
    z-index: 9999;
    /* duration از JS با --cs-vt-ms ست می‌شود؛ پیش‌فرض خیلی کوتاه */
    animation: cs-theme-circle var(--cs-vt-ms, 280ms) cubic-bezier(0.25, 0.1, 0.25, 1) both;
  }

  @keyframes cs-theme-circle {
    from {
      clip-path: circle(0px at var(--cs-vt-x, 50%) var(--cs-vt-y, 50%));
    }
    to {
      clip-path: circle(var(--cs-vt-r, 100vmax) at var(--cs-vt-x, 50%) var(--cs-vt-y, 50%));
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  html.cs-theme-soft body { transition: none !important; }
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none !important;
  }
}

/* Mobile safe areas */
@supports (padding: env(safe-area-inset-bottom)) {
  .pb-safe {
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
  }
}

@media screen and (max-width: 640px) {
  input, textarea, select {
    font-size: 16px !important;
  }
}