.page-body {
  position: absolute;
  top: var(--header-height);
  left: 0;             /* full width for scrollbar */
  right: 0;            /* full width for scrollbar */
  bottom: 0;
  overflow-y: auto;    /* scrollbar at window edge */
}

.page-content {
  margin: 0 10%;       /* keep your visual margins */
}

/* WebKit browsers (Chrome, Edge, Safari) */
.page-body::-webkit-scrollbar {
  width: 12px;                       /* scrollbar width */
}

.page-body::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);     /* track (background) */
}

.page-body::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.5); /* scrollbar handle */
  border-radius: 6px;
  border: 2px solid transparent;        /* creates a subtle gap effect */
  background-clip: content-box;
}

.page-body::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.7);
}

/* Firefox */
.page-body {
  scrollbar-width: thin;                /* “auto” or “thin” */
  scrollbar-color: rgba(0, 0, 0, 0.5) rgba(0, 0, 0, 0.1);
}