/**
 * Modern thick scrollbars for all Learn dock panels.
 * Add class `lms-dock-scroll` on new scroll regions inside #lms-hw-root.
 */
#lms-hw-root {
    --lms-dock-scroll-size: 14px;
    --lms-dock-scroll-thumb: color-mix(in srgb, var(--brand-primary, #7c3aed) 78%, #64748b);
    --lms-dock-scroll-thumb-hover: color-mix(in srgb, var(--brand-primary, #7c3aed) 92%, #475569);
    --lms-dock-scroll-track: color-mix(in srgb, var(--brand-border, #e2e8f0) 55%, transparent);
}

#lms-hw-root :is(
    .lms-dock-scroll,
    .lms-rewards-scroll,
    .lms-rewards__panel-scroll,
    .lms-hw__gallery-grid,
    .lms-hw__stage-wrap,
    .lms-hw__pop-panel,
    .lms-tools__body,
    .myedu__grid,
    .myedu__quotes-stack,
    .myedu-coach-pop__quotes,
    .myedu-coach-pop__main,
    .lms-rewards__shop-grid,
    .lms-rewards__topics,
    .lms-rewards__cert-list,
    .lms-dock-preview__stage,
    .lms-avatar-studio__ai-grid
) {
    scrollbar-width: auto;
    scrollbar-color: var(--lms-dock-scroll-thumb) var(--lms-dock-scroll-track);
}

#lms-hw-root :is(
    .lms-dock-scroll,
    .lms-rewards-scroll,
    .lms-rewards__panel-scroll,
    .lms-hw__gallery-grid,
    .lms-hw__stage-wrap,
    .lms-hw__pop-panel,
    .lms-tools__body,
    .lms-tools__livewire,
    .myedu__grid,
    .myedu__quotes-stack,
    .myedu-coach-pop__quotes,
    .myedu-coach-pop__main,
    .lms-rewards__shop-grid,
    .lms-rewards__topics,
    .lms-rewards__cert-list,
    .lms-dock-preview__stage,
    .lms-avatar-studio__ai-grid
)::-webkit-scrollbar {
    width: var(--lms-dock-scroll-size);
    height: var(--lms-dock-scroll-size);
}

#lms-hw-root :is(
    .lms-dock-scroll,
    .lms-rewards-scroll,
    .lms-rewards__panel-scroll,
    .lms-hw__gallery-grid,
    .lms-hw__stage-wrap,
    .lms-hw__pop-panel,
    .lms-tools__body,
    .lms-tools__livewire,
    .myedu__grid,
    .myedu__quotes-stack,
    .myedu-coach-pop__quotes,
    .myedu-coach-pop__main,
    .lms-rewards__shop-grid,
    .lms-rewards__topics,
    .lms-rewards__cert-list,
    .lms-dock-preview__stage,
    .lms-avatar-studio__ai-grid
)::-webkit-scrollbar-track {
    background: var(--lms-dock-scroll-track);
    border-radius: 999px;
    margin: 6px;
}

#lms-hw-root :is(
    .lms-dock-scroll,
    .lms-rewards-scroll,
    .lms-rewards__panel-scroll,
    .lms-hw__gallery-grid,
    .lms-hw__stage-wrap,
    .lms-hw__pop-panel,
    .lms-tools__body,
    .lms-tools__livewire,
    .myedu__grid,
    .myedu__quotes-stack,
    .myedu-coach-pop__quotes,
    .myedu-coach-pop__main,
    .lms-rewards__shop-grid,
    .lms-rewards__topics,
    .lms-rewards__cert-list,
    .lms-dock-preview__stage,
    .lms-avatar-studio__ai-grid
)::-webkit-scrollbar-thumb {
    background: var(--lms-dock-scroll-thumb);
    border-radius: 999px;
    border: 3px solid transparent;
    background-clip: padding-box;
    min-height: 48px;
}

#lms-hw-root :is(
    .lms-dock-scroll,
    .lms-rewards-scroll,
    .lms-rewards__panel-scroll,
    .lms-hw__gallery-grid,
    .lms-hw__stage-wrap,
    .lms-hw__pop-panel,
    .lms-tools__body,
    .lms-tools__livewire,
    .myedu__grid,
    .myedu__quotes-stack,
    .myedu-coach-pop__quotes,
    .myedu-coach-pop__main,
    .lms-rewards__shop-grid,
    .lms-rewards__topics,
    .lms-rewards__cert-list,
    .lms-dock-preview__stage,
    .lms-avatar-studio__ai-grid
)::-webkit-scrollbar-thumb:hover {
    background: var(--lms-dock-scroll-thumb-hover);
    background-clip: padding-box;
}

#lms-hw-root :is(
    .lms-dock-scroll,
    .lms-rewards-scroll,
    .lms-rewards__panel-scroll,
    .lms-hw__gallery-grid,
    .lms-hw__stage-wrap,
    .lms-hw__pop-panel,
    .lms-tools__body,
    .lms-tools__livewire,
    .myedu__grid,
    .myedu__quotes-stack,
    .myedu-coach-pop__quotes,
    .myedu-coach-pop__main,
    .lms-rewards__shop-grid,
    .lms-rewards__topics,
    .lms-rewards__cert-list,
    .lms-dock-preview__stage,
    .lms-avatar-studio__ai-grid
)::-webkit-scrollbar-corner {
    background: transparent;
}

/* Notes / non–My Edu livewire panels scroll inside the shell */
#lms-hw-root .lms-tools__panel:not(.lms-tools__panel--myedu) > .lms-tools__livewire {
    scrollbar-width: auto;
    scrollbar-color: var(--lms-dock-scroll-thumb) var(--lms-dock-scroll-track);
}

#lms-hw-root .lms-hw__pop-panel {
    max-height: min(52vh, 26rem);
    overflow: auto;
}