/*
 * Cross-browser contained-scroll affordance.
 *
 * Desktop browsers keep their native scrollbar treatment. Touch-first browsers
 * (notably iPadOS Safari) receive one fixed, non-interactive thumb while the
 * user is touching or scrolling a declared panel or the page. The indicator
 * never changes layout, scroll ownership, or application behavior.
 */
.app-scroll-region {
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

.app-scroll-region:is(:hover, :focus, :focus-within, :active) {
  scrollbar-color: color-mix(in srgb, var(--accent, #2563eb) 62%, var(--line, #cbd5e1) 38%) transparent;
}

.app-scroll-region::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

.app-scroll-region::-webkit-scrollbar-track {
  background: transparent;
}

.app-scroll-region::-webkit-scrollbar-thumb {
  border: 0;
  border-radius: 999px;
  background: transparent;
}

.app-scroll-region:is(:hover, :focus, :focus-within, :active)::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--accent, #2563eb) 62%, var(--line, #cbd5e1) 38%);
}

html.app-touch-scroll-mode :is(.app-scroll-region, .app-touch-scroll-surface) {
  -ms-overflow-style: none !important;
  scrollbar-gutter: auto;
  scrollbar-width: none !important;
}

html.app-touch-scroll-mode {
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
}

html.app-touch-scroll-mode::-webkit-scrollbar,
html.app-touch-scroll-mode body::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
}

html.app-touch-scroll-mode :is(.app-scroll-region, .app-touch-scroll-surface)::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
}

.app-touch-scroll-indicator {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2147483000;
  display: block;
  width: 4px;
  height: 0;
  min-height: 0;
  overflow: hidden;
  border-radius: 999px;
  background: transparent;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-9999px, -9999px, 0);
  transition: opacity 120ms ease;
  contain: strict;
  will-change: transform;
}

.app-touch-scroll-indicator::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: var(--app-scroll-thumb-height, 28px);
  border-radius: inherit;
  background: var(--accent, #2563eb);
  background: color-mix(in srgb, var(--accent, #2563eb) 72%, var(--line, #cbd5e1) 28%);
  transform: translate3d(0, var(--app-scroll-thumb-offset, 0px), 0);
  will-change: height, transform;
}

.app-touch-scroll-indicator.is-visible {
  opacity: 0.76;
}

@media (forced-colors: active) {
  .app-touch-scroll-indicator::before {
    background: CanvasText;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-touch-scroll-indicator {
    transition: none;
  }
}