/* Shared scrollbar appearance, based on the CRM profile panel.
 * Each scroll container reveals its own thumb on hover without changing layout.
 * Product styles retain scroll ownership, hidden native bars, and drag areas. */
:root {
    --aeyloo-scrollbar-size: 4px;
    --aeyloo-scrollbar-width: thin;
    --aeyloo-scrollbar-thumb: rgba(143, 143, 140, 0.16);
    --aeyloo-scrollbar-thumb-hover: rgba(143, 143, 140, 0.78);
}

:root[data-aeyloo-color-mode="dark"],
:root.quote-public-dark-mode,
:root[data-widget-theme="dark"] {
    --aeyloo-scrollbar-thumb: rgba(244, 244, 239, 0.08);
    --aeyloo-scrollbar-thumb-hover: rgba(244, 244, 239, 0.42);
}

/* Zero specificity lets intentional scrollbar-width: none rules keep working. */
:where(.aeyloo-ui-scrollbars, .aeyloo-ui-scrollbars *) {
    scrollbar-width: var(--aeyloo-scrollbar-width, thin);
}

:where(.aeyloo-ui-scrollbars, .aeyloo-ui-scrollbars *)::-webkit-scrollbar {
    width: var(--aeyloo-scrollbar-size, 4px);
    height: var(--aeyloo-scrollbar-size, 4px);
}

/* Appearance alone takes precedence over legacy product color overrides. */
@layer aeyloo-scrollbars {
    :where(.aeyloo-ui-scrollbars, .aeyloo-ui-scrollbars *) {
        scrollbar-color: var(--aeyloo-scrollbar-native-color, transparent transparent) !important;
    }

    :where(.aeyloo-ui-scrollbars, .aeyloo-ui-scrollbars *):hover {
        scrollbar-color: var(--aeyloo-scrollbar-native-color, var(--aeyloo-scrollbar-thumb-hover) transparent) !important;
    }

    :where(.aeyloo-ui-scrollbars, .aeyloo-ui-scrollbars *)::-webkit-scrollbar,
    :where(.aeyloo-ui-scrollbars, .aeyloo-ui-scrollbars *)::-webkit-scrollbar-track,
    :where(.aeyloo-ui-scrollbars, .aeyloo-ui-scrollbars *)::-webkit-scrollbar-track-piece,
    :where(.aeyloo-ui-scrollbars, .aeyloo-ui-scrollbars *)::-webkit-scrollbar-corner {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    :where(.aeyloo-ui-scrollbars, .aeyloo-ui-scrollbars *)::-webkit-scrollbar-thumb {
        background: transparent !important;
        background-clip: padding-box !important;
        border: 0 !important;
        border-radius: 999px !important;
        box-shadow: none !important;
    }

    :where(.aeyloo-ui-scrollbars, .aeyloo-ui-scrollbars *):hover::-webkit-scrollbar-thumb {
        background: var(--aeyloo-scrollbar-thumb) !important;
    }

    :where(.aeyloo-ui-scrollbars, .aeyloo-ui-scrollbars *)::-webkit-scrollbar-thumb:hover,
    :where(.aeyloo-ui-scrollbars, .aeyloo-ui-scrollbars *)::-webkit-scrollbar-thumb:active {
        background: var(--aeyloo-scrollbar-thumb-hover) !important;
    }

    :where(.aeyloo-ui-scrollbars, .aeyloo-ui-scrollbars *)::-webkit-scrollbar-button {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }

    /* Touch devices have no hover; retain their existing scroll indicators. */
    @media (hover: none) {
        :where(.aeyloo-ui-scrollbars, .aeyloo-ui-scrollbars *) {
            scrollbar-color: var(--aeyloo-scrollbar-native-color, var(--aeyloo-scrollbar-thumb) transparent) !important;
        }

        :where(.aeyloo-ui-scrollbars, .aeyloo-ui-scrollbars *)::-webkit-scrollbar-thumb {
            background: var(--aeyloo-scrollbar-thumb) !important;
        }
    }
}

/* Use exact 4px sizing where scrollbar pseudo-elements are supported;
 * other browsers use their native thin scrollbar. */
@supports selector(::-webkit-scrollbar) {
    :root {
        --aeyloo-scrollbar-width: auto;
        --aeyloo-scrollbar-native-color: auto;
    }
}

@media (forced-colors: active) {
    :root,
    :root[data-aeyloo-color-mode="dark"],
    :root.quote-public-dark-mode,
    :root[data-widget-theme="dark"] {
        --aeyloo-scrollbar-thumb: ButtonText;
        --aeyloo-scrollbar-thumb-hover: Highlight;
    }
}