/*
 * Modern scrollbar layer
 * Remove this stylesheet from the shared layouts to restore browser defaults.
 */

body.modern-ui,
body.modern-ui * {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--accent, #00ff00) 48%, var(--line-strong, #94a3b8)) transparent;
}

body.modern-ui::-webkit-scrollbar,
body.modern-ui *::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

body.modern-ui::-webkit-scrollbar-track,
body.modern-ui *::-webkit-scrollbar-track {
  background: transparent;
}

body.modern-ui::-webkit-scrollbar-thumb,
body.modern-ui *::-webkit-scrollbar-thumb {
  min-width: 34px;
  min-height: 34px;
  border: 2px solid transparent;
  border-radius: 999px;
  background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--accent, #00ff00) 56%, var(--text-muted, #64748b)),
      color-mix(in srgb, var(--accent, #00ff00) 34%, var(--text-muted, #64748b))
    ) padding-box;
}

body.modern-ui::-webkit-scrollbar-thumb:hover,
body.modern-ui *::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--accent, #00ff00) 86%, white),
      var(--accent, #00ff00)
    ) padding-box;
}

body.modern-ui::-webkit-scrollbar-thumb:active,
body.modern-ui *::-webkit-scrollbar-thumb:active {
  background: var(--accent, #00ff00) padding-box;
}

body.modern-ui::-webkit-scrollbar-corner,
body.modern-ui *::-webkit-scrollbar-corner {
  background: transparent;
}

/* The navigation gets a quieter, narrower rail so it never competes with links. */
body.modern-ui .sidebar {
  scrollbar-color: rgba(0, 255, 0, 0.42) transparent;
}

body.modern-ui .sidebar::-webkit-scrollbar {
  width: 7px;
}

body.modern-ui .sidebar::-webkit-scrollbar-thumb {
  border-width: 2px;
  background: rgba(0, 255, 0, 0.34) padding-box;
}

body.modern-ui .sidebar::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 255, 0, 0.72) padding-box;
}

/* Compact horizontal rails for dense, scrollable content. */
body.modern-ui :is(.table-wrap, .tabs, pre, code, .workflow-progress-overlay)::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

html[data-theme="dark"] body.modern-ui,
html[data-theme="dark"] body.modern-ui * {
  scrollbar-color: color-mix(in srgb, var(--accent, #00ff00) 58%, #334155) rgba(2, 8, 18, 0.22);
}

html[data-theme="dark"] body.modern-ui::-webkit-scrollbar-track,
html[data-theme="dark"] body.modern-ui *::-webkit-scrollbar-track {
  background: rgba(2, 8, 18, 0.18);
}

html[data-theme="dark"] body.modern-ui::-webkit-scrollbar-thumb,
html[data-theme="dark"] body.modern-ui *::-webkit-scrollbar-thumb {
  background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--accent, #00ff00) 62%, #475569),
      color-mix(in srgb, var(--accent, #00ff00) 40%, #1e293b)
    ) padding-box;
}

html[data-theme="dark"] body.modern-ui::-webkit-scrollbar-thumb:hover,
html[data-theme="dark"] body.modern-ui *::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #7dff7d, var(--accent, #00ff00)) padding-box;
}

html[data-theme="dark"] body.modern-ui .sidebar::-webkit-scrollbar-track {
  background: transparent;
}

@media (pointer: coarse) {
  body.modern-ui::-webkit-scrollbar,
  body.modern-ui *::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
}