/* Custom-styled NATIVE scroll bars (progressive enhancement; never hidden or 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: #e9eef2;
  --sb-thumb: #6b7f91;        /* >= 3:1 against the track */
  --sb-thumb-hover: #12324a;
  --sb-thumb-active: #c2410c;
  --sb-size: 12px;
}
html { scrollbar-gutter: stable; }

@supports not selector(::-webkit-scrollbar) {
  html, .chat__messages, .dropdown, .cselect__list, .mobile-menu__panel, .chat__chips {
    scrollbar-width: thin;
    scrollbar-color: var(--sb-thumb) var(--sb-track);
  }
}

::-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); }

/* Inner scroll areas: slimmer, light variant */
.chat__messages, .dropdown, .cselect__list, .mobile-menu__panel, .chat__chips { --sb-size: 8px; --sb-track: #f4f6f8; }
.chat__messages::-webkit-scrollbar, .dropdown::-webkit-scrollbar, .cselect__list::-webkit-scrollbar, .mobile-menu__panel::-webkit-scrollbar, .chat__chips::-webkit-scrollbar { width: 8px; height: 8px; }
.chat__messages::-webkit-scrollbar-thumb, .dropdown::-webkit-scrollbar-thumb, .cselect__list::-webkit-scrollbar-thumb, .mobile-menu__panel::-webkit-scrollbar-thumb, .chat__chips::-webkit-scrollbar-thumb { border-width: 2px; border-color: #f4f6f8; }
.chat__messages::-webkit-scrollbar-track, .dropdown::-webkit-scrollbar-track, .cselect__list::-webkit-scrollbar-track, .mobile-menu__panel::-webkit-scrollbar-track, .chat__chips::-webkit-scrollbar-track { background: #f4f6f8; }

/* Dark variant (footer-coloured areas) */
.bg-dark, .site-footer { --sb-track: #0e2638; --sb-thumb: #8ea0b1; --sb-thumb-hover: #ffffff; }