/* Shared scrollbar language for every SocialLinker surface. */
:root {
  --scroll-track: rgba(5, 10, 18, 0.92);
  --scroll-thumb: rgba(59, 130, 246, 0.46);
  --scroll-thumb-hover: rgba(96, 165, 250, 0.72);
  --scroll-thumb-active: rgba(147, 197, 253, 0.82);
  --scroll-size: 8px;
}

html:is([data-theme="light"], [data-theme="blue"]) {
  --scroll-track: #edf1f6;
  --scroll-thumb: #9aadc2;
  --scroll-thumb-hover: #71869e;
  --scroll-thumb-active: #53677f;
}

html[data-theme="blue"] {
  --scroll-track: #e5edf6;
  --scroll-thumb: #68829f;
  --scroll-thumb-hover: #436381;
  --scroll-thumb-active: #234968;
}

html {
  scrollbar-width: thin !important;
  scrollbar-color: var(--scroll-thumb) var(--scroll-track) !important;
  scrollbar-gutter: stable;
}

body,
body * {
  scrollbar-width: thin !important;
  scrollbar-color: var(--scroll-thumb) var(--scroll-track) !important;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
body *::-webkit-scrollbar {
  width: var(--scroll-size) !important;
  height: var(--scroll-size) !important;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
body *::-webkit-scrollbar-track {
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--scroll-track) !important;
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
body *::-webkit-scrollbar-thumb {
  min-height: 32px;
  border: 2px solid var(--scroll-track) !important;
  border-radius: 999px !important;
  background: var(--scroll-thumb) !important;
  background-clip: padding-box !important;
  transition: background-color 160ms ease;
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover,
body *::-webkit-scrollbar-thumb:hover {
  background: var(--scroll-thumb-hover) !important;
}

html::-webkit-scrollbar-thumb:active,
body::-webkit-scrollbar-thumb:active,
body *::-webkit-scrollbar-thumb:active {
  background: var(--scroll-thumb-active) !important;
}

html::-webkit-scrollbar-corner,
body::-webkit-scrollbar-corner,
body *::-webkit-scrollbar-corner {
  background: var(--scroll-track) !important;
}

html::-webkit-scrollbar-button,
body::-webkit-scrollbar-button,
body *::-webkit-scrollbar-button {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
  background: transparent !important;
}

/* Nested data regions keep the same track and thumb as the page itself. */
body.app-shell.app-shell .table-responsive,
body.app-shell.app-shell .review-table-container,
body.app-shell.app-shell .matrix-console,
body.app-shell.app-shell .batch-options,
body.app-shell.app-shell .batch-grid,
body.app-shell.app-shell .dropdown-menu,
body.app-shell.app-shell textarea,
body.app-shell.app-shell pre,
body.app-shell.app-shell [style*="overflow-x"],
body.app-shell.app-shell [style*="overflow-y"] {
  scrollbar-width: thin !important;
  scrollbar-color: var(--scroll-thumb) var(--scroll-track) !important;
}

body.app-shell.app-shell .table-responsive::-webkit-scrollbar,
body.app-shell.app-shell .review-table-container::-webkit-scrollbar,
body.app-shell.app-shell .matrix-console::-webkit-scrollbar,
body.app-shell.app-shell .batch-options::-webkit-scrollbar,
body.app-shell.app-shell .batch-grid::-webkit-scrollbar,
body.app-shell.app-shell .dropdown-menu::-webkit-scrollbar,
body.app-shell.app-shell textarea::-webkit-scrollbar,
body.app-shell.app-shell pre::-webkit-scrollbar,
body.app-shell.app-shell [style*="overflow-x"]::-webkit-scrollbar,
body.app-shell.app-shell [style*="overflow-y"]::-webkit-scrollbar {
  width: var(--scroll-size) !important;
  height: var(--scroll-size) !important;
}

@media (max-width: 768px) {
  :root { --scroll-size: 7px; }
}

@media (prefers-reduced-motion: reduce) {
  html::-webkit-scrollbar-thumb,
  body::-webkit-scrollbar-thumb,
  body *::-webkit-scrollbar-thumb {
    transition: none;
  }
}