/* Style existing scrollbars; visibility remains a per-component choice. */
:root {
    --scrollbar-size: 0.375rem;
    --scrollbar-thumb: color-mix(in srgb, var(--text-muted, #9ca3af) 45%, transparent);
    --scrollbar-thumb-hover: color-mix(in srgb, var(--text-muted, #9ca3af) 70%, transparent);
    --scrollbar-track: transparent;
    --scrollbar-radius: var(--radius-pill, 999px);
}
* { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); }
::-webkit-scrollbar { width: var(--scrollbar-size); height: var(--scrollbar-size); }
::-webkit-scrollbar-track { background: var(--scrollbar-track); }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: var(--scrollbar-radius); }
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
::-webkit-scrollbar-corner { background: transparent; }

/* Mobile content uses the full shell width. A classic desktop scrollbar in an
   emulated mobile viewport must not make the right gutter wider than the left. */
@media (max-width: 767.98px) {
    .app-root .chat-page > #chat-container { scrollbar-gutter: auto; }
    .app-root :is(.app-with-overlay-header, [data-shell-scroll], .home-discover,
        .transcribe-sidebar__list, .support-list, .sidebar-history-fade) {
        scrollbar-width: none;
        scrollbar-gutter: auto;
    }
    .app-root :is(.app-with-overlay-header, [data-shell-scroll], .home-discover,
        .transcribe-sidebar__list, .support-list, .sidebar-history-fade)::-webkit-scrollbar {
        display: none;
    }
}

/* Chromium's standard `thin` scrollbar ignores the WebKit button rules on
   Windows. Use the custom track there so only the thumb is painted. */
@supports selector(::-webkit-scrollbar) {
    * { scrollbar-width: auto; scrollbar-color: auto; }
}

/* These surfaces intentionally had no visible scrollbar. Keep their wheel,
   touch and keyboard scrolling, without adding chrome to every nested panel. */
:is(.custom-scrollbar, .hide-scrollbar, .dropdown-menu,
    .media-composer-scroll-region, .music-chips, .composer-plus-sheet,
    .composer-plus-sheet--flyout, .composer-plus-sheet__list, .composer-toolbar__rail,
    .shell-rail-history-list, .tg-panel-list, .chat-input-assistants-strip,
    .chat-input-params-row, .chat-media-gallery, .media-viewer__tools,
    .media-viewer__prompt-scroll, .composer-plus-sheet__library-tabs, .gallery-tool-options, .gallery-tool-popover__body,
    .media-empty-state, .profile-tabs, .shell-tabs, .group-header__people,
    .home-featured__track, .home-inspiration__filters) { scrollbar-width: none; }
:is(.custom-scrollbar, .hide-scrollbar, .dropdown-menu,
    .media-composer-scroll-region, .music-chips, .composer-plus-sheet,
    .composer-plus-sheet--flyout, .composer-plus-sheet__list, .composer-toolbar__rail,
    .shell-rail-history-list, .tg-panel-list, .chat-input-assistants-strip,
    .chat-input-params-row, .chat-media-gallery, .media-viewer__tools,
    .media-viewer__prompt-scroll, .composer-plus-sheet__library-tabs, .gallery-tool-options, .gallery-tool-popover__body,
    .media-empty-state, .profile-tabs, .shell-tabs, .group-header__people,
    .home-featured__track, .home-inspiration__filters)::-webkit-scrollbar { display: none; }

/* Vertical content viewports opt in explicitly: never mask a whole dialog,
   its fixed actions, horizontal rails, or document/media previews. Alpha masks
   reveal the actual surface in either theme, including artwork underneath.
   The mask is stationary and needs no scroll listeners, observers or frames.
   Compact text editors already have an 8px inset; plain lists use --padded.
   Existing components can reserve a larger inset without changing the recipe. */
:root {
    --scroll-edge-size: calc(var(--gap-sm) * 2);
    --scroll-edge-opacity: .12;
}
.scroll-edge-fade,
.chat-input-docked.is-composer-capped .media-composer-scroll-region {
    --scroll-edge-mask: linear-gradient(to bottom,
        rgb(0 0 0 / var(--scroll-edge-opacity)) 0,
        #000 min(var(--scroll-edge-size), 25%),
        #000 calc(100% - min(var(--scroll-edge-size), 25%)),
        rgb(0 0 0 / var(--scroll-edge-opacity)) 100%);
    -webkit-mask-image: var(--scroll-edge-mask);
    mask-image: var(--scroll-edge-mask);
    mask-mode: alpha;
    scroll-padding-block: var(--scroll-edge-size);
}
.scroll-edge-fade--compact { --scroll-edge-size: var(--gap-sm); }
/* Native textareas clip text inside their padding. The fade must reach beyond
   that inset into a line of text; disable each edge at its scroll boundary. */
.scroll-edge-fade[x-scroll-edges] {
    --scroll-edge-size: calc(var(--gap-sm) * 4);
    --scroll-edge-start: 0px;
    --scroll-edge-end: 0px;
    --scroll-edge-mask: linear-gradient(to bottom,
        transparent 0, #000 var(--scroll-edge-start),
        #000 calc(100% - var(--scroll-edge-end)), transparent 100%);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}
.scroll-edge-fade[data-scroll-edges="top"],
.scroll-edge-fade[data-scroll-edges="both"] { --scroll-edge-start: min(var(--scroll-edge-size), 25%); }
.scroll-edge-fade[data-scroll-edges="bottom"],
.scroll-edge-fade[data-scroll-edges="both"] { --scroll-edge-end: min(var(--scroll-edge-size), 25%); }
/* Start fading half a button-height above the floating action; the text is
   fully hidden at its bottom. Controls stay outside the text mask. */
.music-editor-body:has(.lyrics-prompt-tools) > :is(.music-lyrics__area, .music-style__area):is([data-scroll-edges="bottom"], [data-scroll-edges="both"]) {
    --scroll-edge-mask: linear-gradient(to bottom,
        transparent 0, #000 var(--scroll-edge-start),
        #000 calc(100% - var(--music-editor-action-inset) - var(--composer-control-size) * 1.5),
        transparent calc(100% - var(--music-editor-action-inset)));
}
.scroll-edge-fade--padded {
    padding-block-start: max(var(--scroll-edge-space-start, 0px), var(--scroll-edge-size));
    padding-block-end: max(var(--scroll-edge-space-end, 0px), var(--scroll-edge-size));
}
@media (forced-colors: active) {
    .scroll-edge-fade,
    .chat-input-docked.is-composer-capped .media-composer-scroll-region { -webkit-mask-image: none; mask-image: none; }
}

/* Explicitly requested: the message list and document/HTML previews. */
.chat-page > #chat-container { scrollbar-width: thin; }
.chat-page > #chat-container::-webkit-scrollbar { display: block; }
@supports selector(::-webkit-scrollbar) {
    .chat-page > #chat-container { scrollbar-width: auto; }
}
@media (max-width: 767.98px) {
    :is(.landing-directions, .landing-features, .landing-plans, .landing-steps,
        .landing-video-wall, .landing-masonry) { scrollbar-width: none; }
    :is(.landing-directions, .landing-features, .landing-plans, .landing-steps,
        .landing-video-wall, .landing-masonry)::-webkit-scrollbar { display: none; }
}