/* Shared desktop scrollbars: a quiet rounded thumb with no arrow buttons.
 * Keep overflow ownership and the existing 6px settings gutter unchanged. */
@layer workbench-scrollbars {
  html:not([data-mobile-workbench="true"]):has(.app-layout) {
    --workbench-scroll-thumb: rgba(112, 105, 139, 0.38);
    --workbench-scroll-thumb-hover: rgba(112, 105, 139, 0.62);
  }

  html[data-theme="dark"]:not([data-mobile-workbench="true"]):has(.app-layout) {
    --workbench-scroll-thumb: rgba(161, 156, 178, 0.42);
    --workbench-scroll-thumb-hover: rgba(181, 176, 197, 0.66);
  }

  html:not([data-mobile-workbench="true"]):has(.app-layout),
  html:not([data-mobile-workbench="true"]):has(.app-layout) * {
    scrollbar-width: thin !important;
    scrollbar-color: var(--workbench-scroll-thumb) transparent !important;
  }

  @supports selector(::-webkit-scrollbar) {
    /* Legacy narrow-screen navigation hides the entire scrollbar pseudo-element.
     * Width/color overrides alone do not restore it on desktop windows. */
    html:not([data-mobile-workbench="true"]) .sidebar .side-nav::-webkit-scrollbar {
      display: block !important;
    }
    /* Non-auto standard values would override Chromium's custom thumb shape. */
    html:not([data-mobile-workbench="true"]):has(.app-layout),
    html:not([data-mobile-workbench="true"]):has(.app-layout) * {
      scrollbar-width: auto !important;
      scrollbar-color: auto !important;
    }

    html:not([data-mobile-workbench="true"]):has(.app-layout)::-webkit-scrollbar,
    html:not([data-mobile-workbench="true"]):has(.app-layout) *::-webkit-scrollbar {
      width: 6px !important;
      height: 6px !important;
      background: transparent !important;
    }

    html:not([data-mobile-workbench="true"]):has(.app-layout)::-webkit-scrollbar-thumb,
    html:not([data-mobile-workbench="true"]):has(.app-layout) *::-webkit-scrollbar-thumb {
      min-height: 32px !important;
      min-width: 32px !important;
      border: 1px solid transparent !important;
      border-radius: 999px !important;
      background: var(--workbench-scroll-thumb) !important;
      background-clip: padding-box !important;
      box-shadow: none !important;
    }

    html:not([data-mobile-workbench="true"]):has(.app-layout)::-webkit-scrollbar-thumb:hover,
    html:not([data-mobile-workbench="true"]):has(.app-layout) *::-webkit-scrollbar-thumb:hover {
      background-color: var(--workbench-scroll-thumb-hover) !important;
    }

    html:not([data-mobile-workbench="true"]):has(.app-layout)::-webkit-scrollbar-track,
    html:not([data-mobile-workbench="true"]):has(.app-layout) *::-webkit-scrollbar-track,
    html:not([data-mobile-workbench="true"]):has(.app-layout)::-webkit-scrollbar-corner,
    html:not([data-mobile-workbench="true"]):has(.app-layout) *::-webkit-scrollbar-corner {
      background: transparent !important;
      border: 0 !important;
      box-shadow: none !important;
    }

    html:not([data-mobile-workbench="true"]):has(.app-layout)::-webkit-scrollbar-button,
    html:not([data-mobile-workbench="true"]):has(.app-layout) *::-webkit-scrollbar-button {
      display: none !important;
      width: 0 !important;
      height: 0 !important;
    }
  }
}