/* The inspector keeps its authored width. Its native gutter is invisible and
   a viewport-anchored indicator reports overflow without moving any field. */
[data-ui-surface="shell"] .inspector-panel__scroll {
  overflow: hidden auto;
  min-height: 0;
  scrollbar-width: none;
}

[data-ui-surface="shell"] .inspector-panel__scroll::-webkit-scrollbar {
  width: 0;
  height: 0;
}

[data-ui-surface="shell"] .inspector-scroll-indicator {
  position: fixed;
  right: calc(
    var(--arhix-space-edge)
    + var(--arhix-inspector-width)
    + 2 * var(--arhix-border-hairline)
    + var(--arhix-scroll-indicator-gap)
  );
  bottom: var(--arhix-space-edge);
  width: var(--arhix-scroll-indicator-width);
  height: var(--arhix-scroll-indicator-height);
  border-radius: var(--arhix-radius-pill);
  background: var(--arhix-surface-sunken);
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transition: opacity var(--arhix-motion-quick) ease;
}

[data-ui-surface="shell"]
  .inspector-surface:hover
  .inspector-scroll-indicator:not([hidden]) {
  opacity: 1;
}

[data-ui-surface="shell"] .inspector-scroll-indicator__thumb {
  position: absolute;
  top: var(
    --arhix-inspector-scroll-thumb-top,
    var(--arhix-scroll-indicator-inset)
  );
  left: var(--arhix-scroll-indicator-inset);
  width: var(--arhix-scroll-indicator-thumb-width);
  min-height: var(--arhix-scroll-indicator-thumb-min-height);
  height: var(
    --arhix-inspector-scroll-thumb-height,
    var(--arhix-scroll-indicator-thumb-min-height)
  );
  border-radius: var(--arhix-radius-pill);
  background: var(--arhix-ink-faint);
  transition: top var(--arhix-motion-instant) linear;
}