/* Shared design-system scrollbar primitive: app, embedded MCP and public guides. */
:root {
  --scrollbar-size: 6px;
  --scrollbar-thumb: #6c8175;
  --scrollbar-thumb-hover: #3e6d50;
  --scrollbar-dark-thumb: #9fb9a8;
  --scrollbar-dark-thumb-hover: #bfd5c6;
}

.dark {
  --scrollbar-thumb: var(--scrollbar-dark-thumb);
  --scrollbar-thumb-hover: var(--scrollbar-dark-thumb-hover);
}

/* Public documents follow system appearance; the app retains its theme owner. */
@media (prefers-color-scheme: dark) {
  html[data-scrollbar-theme='system'] {
    --scrollbar-thumb: var(--scrollbar-dark-thumb);
    --scrollbar-thumb-hover: var(--scrollbar-dark-thumb-hover);
  }
}

/* Native scrolling, dragging and keyboard handling remain browser-owned. */
@media (hover: hover) and (pointer: fine) {
  :root, :where(*) {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) transparent;
  }

  @supports selector(::-webkit-scrollbar) {
    /* Standard non-auto values override WebKit geometry in modern Chromium. */
    :root, :where(*) {
      scrollbar-width: auto;
      scrollbar-color: auto;
    }
    :where(*)::-webkit-scrollbar {
      width: var(--scrollbar-size);
      height: var(--scrollbar-size);
    }
    :where(*)::-webkit-scrollbar-track,
    :where(*)::-webkit-scrollbar-corner {
      background: transparent;
    }
    :where(*)::-webkit-scrollbar-thumb {
      background: var(--scrollbar-thumb);
      border-radius: 999px;
    }
    :where(*)::-webkit-scrollbar-thumb:hover,
    :where(*)::-webkit-scrollbar-thumb:active {
      background: var(--scrollbar-thumb-hover);
    }
    :where(*)::-webkit-scrollbar-button {
      display: none;
    }
  }
}

/* High-contrast users retain native system geometry and colours. */
@media (forced-colors: active) {
  :root, :where(*) {
    scrollbar-width: auto;
    scrollbar-color: auto;
  }
  :where(*)::-webkit-scrollbar {
    width: auto;
    height: auto;
  }
  :where(*)::-webkit-scrollbar-thumb {
    background: ButtonText;
  }
  :where(*)::-webkit-scrollbar-track,
  :where(*)::-webkit-scrollbar-corner {
    background: Canvas;
  }
  :where(*)::-webkit-scrollbar-button {
    display: revert;
  }
}