/* Native scrollbars retain wheel, keyboard, touch, and drag behavior. */
:root {
  --scroll-track: #eaf0ff;
  --scroll-thumb: #394754;
  --scroll-hover: #236bea;
  --scroll-grip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='30' viewBox='0 0 12 30'%3E%3Cpath d='M3 6h6M3 12h6M3 18h6M3 24h6' stroke='%23edf3ff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
:root[data-ui-theme="dark"] {
  --scroll-track: var(--background-color, #07101f);
  --scroll-thumb: color-mix(in srgb, var(--muted-color, #9aa8bf) 55%, var(--surface-raised, #16243d));
  --scroll-hover: var(--primary-color, #2588f8);
}
:root[data-ui-theme="light"] {
  --scroll-track: color-mix(in srgb, var(--primary-color, #2588f8) 8%, var(--surface-color, #fff));
  --scroll-thumb: color-mix(in srgb, var(--text-color, #151927) 75%, var(--primary-color, #2588f8));
  --scroll-hover: var(--primary-color, #2588f8);
}
* { scrollbar-width: auto; scrollbar-color: var(--scroll-thumb) var(--scroll-track); }
@supports selector(::-webkit-scrollbar) {
  * { scrollbar-color: auto; }
  ::-webkit-scrollbar { width: 15px; height: 15px; }
  ::-webkit-scrollbar-track { background: var(--scroll-track); border-radius: 10px; }
  ::-webkit-scrollbar-thumb {
    min-height: 48px;
    min-width: 48px;
    border: 2px solid var(--scroll-track);
    border-radius: 12px;
    background-color: var(--scroll-thumb);
    background-image: var(--scroll-grip);
    background-position: center;
    background-repeat: no-repeat;
  }
  ::-webkit-scrollbar-thumb:hover, ::-webkit-scrollbar-thumb:active { background-color: var(--scroll-hover); }
  ::-webkit-scrollbar-thumb:horizontal { background-image: none; }
  ::-webkit-scrollbar-button { display: none; }
  ::-webkit-scrollbar-button:single-button { display: block; width: 15px; height: 18px; background-color: var(--scroll-thumb); background-position: center; background-repeat: no-repeat; border-radius: 7px; }
  ::-webkit-scrollbar-button:single-button:hover { background-color: var(--scroll-hover); }
  ::-webkit-scrollbar-button:single-button:vertical:decrement { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Cpath d='M5 2L9 8H1Z' fill='%23edf3ff'/%3E%3C/svg%3E"); }
  ::-webkit-scrollbar-button:single-button:vertical:increment { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Cpath d='M1 2H9L5 8Z' fill='%23edf3ff'/%3E%3C/svg%3E"); }
  ::-webkit-scrollbar-button:single-button:horizontal:decrement { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Cpath d='M2 5L8 1V9Z' fill='%23edf3ff'/%3E%3C/svg%3E"); }
  ::-webkit-scrollbar-button:single-button:horizontal:increment { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Cpath d='M2 1L8 5L2 9Z' fill='%23edf3ff'/%3E%3C/svg%3E"); }
  ::-webkit-scrollbar-corner { background: var(--scroll-track); }
}
@media (forced-colors: active) {
  * { scrollbar-color: auto; }
  ::-webkit-scrollbar-thumb, ::-webkit-scrollbar-button:single-button { background-color: ButtonText; }
  ::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: Canvas; }
}