/* Custom App-wide Scrollbar (Desktop Only) */
@media (pointer: fine) {
  /* Firefox */
  * {
    scrollbar-width: thin;
    scrollbar-color: rgb(var(--c-line-strong)) transparent;
  }

  /* Webkit (Chrome, Safari, Edge) */
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background-color: transparent;
  }

  ::-webkit-scrollbar-track {
    background-color: transparent;
  }

  ::-webkit-scrollbar-thumb {
    background-color: rgb(var(--c-line-strong));
    border-radius: 4px;
    border: 2px solid transparent; /* padding effect */
    background-clip: padding-box;
  }

  ::-webkit-scrollbar-thumb:hover {
    background-color: rgb(var(--c-subtle));
  }

  /* Specific class for explicitly styled areas, just in case */
  .custom-scrollbar::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  .custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
  }

  .custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgb(var(--c-line-strong));
    border-radius: 4px;
    border: 2px solid transparent;
    background-clip: padding-box;
  }

  .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: rgb(var(--c-subtle));
  }
}

/* Ensure mobile scrollbars work natively (coarse pointer like touch) */
@media (pointer: coarse) {
  /* No custom scrollbar forcing, as iOS/Android overlay scrollbars are superior for touch */
}

/* Respect the user's reduced-motion preference: near-instant animations and
   transitions, no smooth scrolling. Honors prefers-reduced-motion globally. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}