/* Demo extra: custom-styled native scrollbars (progressive enhancement).
   Real, draggable, keyboard/screen-reader friendly scrollbars — only their colours and size change.
   Firefox: scrollbar-width/scrollbar-color. Chromium/Safari: ::-webkit-scrollbar. Touch devices
   with overlay scrollbars keep their native behaviour. */
:root {
  --sb-size: 12px;
  --sb-track: #EEF3F6;
  --sb-thumb: #5D7C93;        /* 3.9:1 against the track */
  --sb-thumb-hover: #0E3B5C;
  --sb-thumb-active: #2C7A7B;
}
html {
  scrollbar-gutter: stable;   /* no layout shift when scroll is locked (menu/chat open) */
  scrollbar-width: thin;
  scrollbar-color: var(--sb-thumb) var(--sb-track);
}
/* inner scroll areas: chatbot messages, dropdown lists, mobile menu, custom select */
.chat__messages, .nav__dropdown, .select__list, .mobile-menu__panel, .chat__chips {
  scrollbar-width: thin;
  scrollbar-color: var(--sb-thumb) transparent;
}
/* dark variant (footer areas or dark panels if they ever overflow) */
.bg-dark, .site-footer { --sb-track: #0A2A42; --sb-thumb: #7FA3BD; --sb-thumb-hover: #F4B43C; }

@media (hover: hover) and (pointer: fine) {
  ::-webkit-scrollbar { width: var(--sb-size); height: var(--sb-size); }
  ::-webkit-scrollbar-track { background: var(--sb-track); }
  ::-webkit-scrollbar-thumb {
    min-height: 40px; min-width: 40px;
    background: var(--sb-thumb);
    border-radius: 999px;
    border: 3px solid var(--sb-track);
  }
  ::-webkit-scrollbar-thumb:hover { background: var(--sb-thumb-hover); }
  ::-webkit-scrollbar-thumb:active { background: var(--sb-thumb-active); }
  ::-webkit-scrollbar-corner { background: var(--sb-track); }
  .chat__messages::-webkit-scrollbar, .nav__dropdown::-webkit-scrollbar, .select__list::-webkit-scrollbar,
  .mobile-menu__panel::-webkit-scrollbar { width: 8px; }
  .chat__messages::-webkit-scrollbar-track, .nav__dropdown::-webkit-scrollbar-track, .select__list::-webkit-scrollbar-track,
  .mobile-menu__panel::-webkit-scrollbar-track { background: transparent; }
  .chat__messages::-webkit-scrollbar-thumb, .nav__dropdown::-webkit-scrollbar-thumb, .select__list::-webkit-scrollbar-thumb,
  .mobile-menu__panel::-webkit-scrollbar-thumb { border-width: 2px; border-color: transparent; background-clip: padding-box; }
  .chat__chips::-webkit-scrollbar { height: 6px; }
}