:root {
  --premium-scrollbar-size: 12px;
  --premium-scrollbar-radius: 999px;
  --premium-scrollbar-thumb-solid: #10b981;
  --premium-scrollbar-thumb: linear-gradient(180deg, rgba(16, 185, 129, 0.96) 0%, rgba(5, 150, 105, 0.94) 100%);
  --premium-scrollbar-thumb-hover: linear-gradient(180deg, rgba(5, 150, 105, 0.98) 0%, rgba(4, 120, 87, 0.96) 100%);
  --premium-scrollbar-thumb-active: linear-gradient(180deg, rgba(4, 120, 87, 1) 0%, rgba(6, 95, 70, 0.98) 100%);
  --premium-scrollbar-track-solid: rgba(148, 163, 184, 0.24);
  --premium-scrollbar-track: linear-gradient(180deg, rgba(241, 245, 249, 0.96) 0%, rgba(226, 232, 240, 0.9) 100%);
  --premium-scrollbar-track-border: rgba(148, 163, 184, 0.28);
  --premium-scrollbar-thumb-shadow: 0 10px 18px rgba(5, 150, 105, 0.18);
  --premium-scrollbar-track-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
}

html.dark,
.dark {
  --premium-scrollbar-thumb-solid: #34d399;
  --premium-scrollbar-thumb: linear-gradient(180deg, rgba(52, 211, 153, 0.98) 0%, rgba(16, 185, 129, 0.94) 100%);
  --premium-scrollbar-thumb-hover: linear-gradient(180deg, rgba(110, 231, 183, 0.99) 0%, rgba(52, 211, 153, 0.96) 100%);
  --premium-scrollbar-thumb-active: linear-gradient(180deg, rgba(16, 185, 129, 1) 0%, rgba(5, 150, 105, 0.98) 100%);
  --premium-scrollbar-track-solid: rgba(30, 41, 59, 0.88);
  --premium-scrollbar-track: linear-gradient(180deg, rgba(15, 23, 42, 0.88) 0%, rgba(15, 23, 42, 0.96) 100%);
  --premium-scrollbar-track-border: rgba(71, 85, 105, 0.54);
  --premium-scrollbar-thumb-shadow: 0 12px 22px rgba(16, 185, 129, 0.2);
  --premium-scrollbar-track-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

html,
body,
main,
aside,
section,
.custom-scrollbar,
.page-shell-scroll,
#messagesArea,
#sidebarConversations,
#sidebarSearchContainer,
#sourceDetailsContent,
#cockpitPanel,
#checklistStepsContainer {
  color-scheme: normal !important;
  scrollbar-width: thin !important;
  scrollbar-color: var(--premium-scrollbar-thumb-solid) var(--premium-scrollbar-track-solid) !important;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
main::-webkit-scrollbar,
aside::-webkit-scrollbar,
section::-webkit-scrollbar,
.custom-scrollbar::-webkit-scrollbar,
.page-shell-scroll::-webkit-scrollbar,
#messagesArea::-webkit-scrollbar,
#sidebarConversations::-webkit-scrollbar,
#sidebarSearchContainer::-webkit-scrollbar,
#sourceDetailsContent::-webkit-scrollbar,
#cockpitPanel::-webkit-scrollbar,
#checklistStepsContainer::-webkit-scrollbar {
  width: var(--premium-scrollbar-size) !important;
  height: var(--premium-scrollbar-size) !important;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
main::-webkit-scrollbar-track,
aside::-webkit-scrollbar-track,
section::-webkit-scrollbar-track,
.custom-scrollbar::-webkit-scrollbar-track,
.page-shell-scroll::-webkit-scrollbar-track,
#messagesArea::-webkit-scrollbar-track,
#sidebarConversations::-webkit-scrollbar-track,
#sidebarSearchContainer::-webkit-scrollbar-track,
#sourceDetailsContent::-webkit-scrollbar-track,
#cockpitPanel::-webkit-scrollbar-track,
#checklistStepsContainer::-webkit-scrollbar-track {
  background: var(--premium-scrollbar-track) !important;
  border: 1px solid var(--premium-scrollbar-track-border) !important;
  border-radius: var(--premium-scrollbar-radius) !important;
  box-shadow: var(--premium-scrollbar-track-shadow) !important;
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
main::-webkit-scrollbar-thumb,
aside::-webkit-scrollbar-thumb,
section::-webkit-scrollbar-thumb,
.custom-scrollbar::-webkit-scrollbar-thumb,
.page-shell-scroll::-webkit-scrollbar-thumb,
#messagesArea::-webkit-scrollbar-thumb,
#sidebarConversations::-webkit-scrollbar-thumb,
#sidebarSearchContainer::-webkit-scrollbar-thumb,
#sourceDetailsContent::-webkit-scrollbar-thumb,
#cockpitPanel::-webkit-scrollbar-thumb,
#checklistStepsContainer::-webkit-scrollbar-thumb {
  background: var(--premium-scrollbar-thumb) !important;
  border-radius: var(--premium-scrollbar-radius) !important;
  border: 2px solid transparent !important;
  background-clip: padding-box !important;
  min-height: 44px !important;
  box-shadow: var(--premium-scrollbar-thumb-shadow) !important;
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover,
main::-webkit-scrollbar-thumb:hover,
aside::-webkit-scrollbar-thumb:hover,
section::-webkit-scrollbar-thumb:hover,
.custom-scrollbar::-webkit-scrollbar-thumb:hover,
.page-shell-scroll::-webkit-scrollbar-thumb:hover,
#messagesArea::-webkit-scrollbar-thumb:hover,
#sidebarConversations::-webkit-scrollbar-thumb:hover,
#sidebarSearchContainer::-webkit-scrollbar-thumb:hover,
#sourceDetailsContent::-webkit-scrollbar-thumb:hover,
#cockpitPanel::-webkit-scrollbar-thumb:hover,
#checklistStepsContainer::-webkit-scrollbar-thumb:hover {
  background: var(--premium-scrollbar-thumb-hover) !important;
}

html::-webkit-scrollbar-thumb:active,
body::-webkit-scrollbar-thumb:active,
main::-webkit-scrollbar-thumb:active,
aside::-webkit-scrollbar-thumb:active,
section::-webkit-scrollbar-thumb:active,
.custom-scrollbar::-webkit-scrollbar-thumb:active,
.page-shell-scroll::-webkit-scrollbar-thumb:active,
#messagesArea::-webkit-scrollbar-thumb:active,
#sidebarConversations::-webkit-scrollbar-thumb:active,
#sidebarSearchContainer::-webkit-scrollbar-thumb:active,
#sourceDetailsContent::-webkit-scrollbar-thumb:active,
#cockpitPanel::-webkit-scrollbar-thumb:active,
#checklistStepsContainer::-webkit-scrollbar-thumb:active {
  background: var(--premium-scrollbar-thumb-active) !important;
}

html::-webkit-scrollbar-corner,
body::-webkit-scrollbar-corner,
main::-webkit-scrollbar-corner,
aside::-webkit-scrollbar-corner,
section::-webkit-scrollbar-corner,
.custom-scrollbar::-webkit-scrollbar-corner,
.page-shell-scroll::-webkit-scrollbar-corner,
#messagesArea::-webkit-scrollbar-corner,
#sidebarConversations::-webkit-scrollbar-corner,
#sidebarSearchContainer::-webkit-scrollbar-corner,
#sourceDetailsContent::-webkit-scrollbar-corner,
#cockpitPanel::-webkit-scrollbar-corner,
#checklistStepsContainer::-webkit-scrollbar-corner {
  background: var(--premium-scrollbar-track-solid) !important;
}

@media (max-width: 768px) {
  :root {
    --premium-scrollbar-size: 10px;
  }
}