/* Make body the only vertical scroller */
html, body {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;       /* kill accidental horizontal scroll */
  scrollbar-gutter: stable; /* prevents layout shift when bar appears */
}

/* Any layout wrappers should NOT scroll */
#wrapper, #content, .site-content, .container, .app-body, .main-wrap {
  overflow: visible !important;
}

/* If you purposely need a scrollable panel, confine it explicitly */
.scroll-area, .sidebar-scroll, .playlist-scroll {
  overflow-y: auto;
  overscroll-behavior: contain; /* stops scroll chaining / bounce */
  -webkit-overflow-scrolling: touch;
  max-height: 100vh;
}
/* Media should never overflow */
img, video, iframe, embed {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Long code/links shouldn’t blow the width */
pre, code, .long-text, .description {
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

/* Tables can overflow on narrow screens */
.table, table {
  width: 100%;
  display: block;
  overflow-x: auto;
}
/* Avoid 100vh traps; use dynamic calc if you have a fixed header/footer */
:root {
  --header-h: 64px;   /* adjust to your header height */
  --footer-h: 0px;    /* set to player/footer height if fixed */
}
.main-content, .app-body {
  min-height: calc(100vh - var(--header-h) - var(--footer-h));
  height: auto;         /* don’t force 100vh with fixed elements present */
  overflow: visible;
}
/* Only on the elements that need it */
.scroll-area, .sidebar-scroll {
  -webkit-overflow-scrolling: touch;
}
/* Chromium/Edge/Safari */
*::-webkit-scrollbar { width: 10px; }
*::-webkit-scrollbar-thumb { background: rgba(0,0,0,.25); border-radius: 8px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,.35); }
/* Firefox */
* { scrollbar-width: thin; scrollbar-color: rgba(0,0,0,.35) transparent; }