/* Theme overrides for OverlayScrollbars: loaded after overlayscrollbars default CSS
   so we can enforce our modal border color and a square handle.
   Keep rules concise and specific so they don't leak elsewhere. */
.os-scrollbar.os-theme-dark .os-scrollbar-handle,
.os-scrollbar-handle {
  background-color: var(--border) !important;
  background: var(--border) !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
}

.os-scrollbar.os-theme-dark .os-scrollbar-handle:hover,
.os-scrollbar-handle:hover {
  /* Keep hover visually consistent with the modal border */
  background-color: var(--border) !important;
  background: var(--border) !important;
  transform: none;
}

/* Ensure small handles are square */
.os-scrollbar .os-scrollbar-handle { border-radius: 0 !important; }

/* Native scrollbar styling for palette results and other elements using native scroll
   Uses the same dark theme and square design as OverlayScrollbars */
.palette-results::-webkit-scrollbar {
  width: 8px;
}

.palette-results::-webkit-scrollbar-track {
  background: transparent;
}

.palette-results::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 0;
}

.palette-results::-webkit-scrollbar-thumb:hover {
  background: var(--border);
}

/* Firefox scrollbar styling */
.palette-results {
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}