/* Demo-only: styled NATIVE scroll bars (progressive enhancement, never replaced by JS).
   Firefox: scrollbar-width / scrollbar-color. Chrome, Edge, Safari: ::-webkit-scrollbar.
   Touch devices with overlay scroll bars keep their native behaviour. */

:root {
  --sb-track: #eef3f6;
  --sb-thumb: #3d5a73;        /* 5.6:1 against the track */
  --sb-thumb-hover: #12324a;
  --sb-thumb-active: #9a5b00;
  --sb-size: 12px;
}

html {
  scrollbar-gutter: stable; /* no layout shift when the bar appears or scroll is locked */
}

/* Firefox (and Chrome 121+, which then ignores ::-webkit-scrollbar for that element) */
@supports not selector(::-webkit-scrollbar) {
  html,
  .chatbot__messages,
  .dropdown,
  .select__list,
  .mobile-menu__panel {
    scrollbar-width: thin;
    scrollbar-color: var(--sb-thumb) var(--sb-track);
  }
}

/* WebKit / Blink – desktop pointers only; touch devices keep native overlay bars */
@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;
    border: 3px solid var(--sb-track);
    border-radius: 99px;
    background: var(--sb-thumb);
  }
  ::-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);
  }

  /* Inner scroll areas: slimmer bar */
  .chatbot__messages::-webkit-scrollbar,
  .dropdown::-webkit-scrollbar,
  .select__list::-webkit-scrollbar,
  .mobile-menu__panel::-webkit-scrollbar {
    width: 8px;
  }
  .chatbot__messages::-webkit-scrollbar-thumb,
  .dropdown::-webkit-scrollbar-thumb,
  .select__list::-webkit-scrollbar-thumb,
  .mobile-menu__panel::-webkit-scrollbar-thumb {
    border-width: 2px;
    min-height: 40px;
  }
  .chatbot__messages::-webkit-scrollbar-track { background: var(--c-secondary, #f7f4ec); }
  .chatbot__messages::-webkit-scrollbar-thumb { border-color: var(--c-secondary, #f7f4ec); }
  .dropdown::-webkit-scrollbar-track,
  .select__list::-webkit-scrollbar-track,
  .mobile-menu__panel::-webkit-scrollbar-track { background: #fff; }
  .dropdown::-webkit-scrollbar-thumb,
  .select__list::-webkit-scrollbar-thumb,
  .mobile-menu__panel::-webkit-scrollbar-thumb { border-color: #fff; }
}

/* Dark variant (dark surfaces such as the footer or a dark-mode browser chrome) */
.scroll-dark {
  --sb-track: #0b2233;
  --sb-thumb: #8fa6b8;
  --sb-thumb-hover: #f2b127;
}
.scroll-dark::-webkit-scrollbar-track { background: var(--sb-track); }
.scroll-dark::-webkit-scrollbar-thumb { border-color: var(--sb-track); background: var(--sb-thumb); }