/* Padrão visual único. Sem alterar overflow, gestos, posição ou rolagem automática. */
@layer base {
    :root {
        --gti-scroll-thumb: #cbd5e1;
        --gti-scroll-hover: #94a3b8;
    }

    html.dark,
    html[data-theme="dark"] {
        --gti-scroll-thumb: #475569;
        --gti-scroll-hover: #64748b;
    }

    /* Baixa prioridade permite manter scrollbar-none e o viewport nativo do Radix. */
    :where(html, body, body *) {
        scrollbar-width: thin;
        scrollbar-color: var(--gti-scroll-thumb) transparent;
    }

    :where(html, body, body *)::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }

    :where(html, body, body *)::-webkit-scrollbar-track {
        background: transparent;
    }

    :where(html, body, body *)::-webkit-scrollbar-thumb {
        background: var(--gti-scroll-thumb);
        background-clip: content-box;
        border: 2px solid transparent;
        border-radius: 999px;
    }

    :where(html, body, body *)::-webkit-scrollbar-thumb:hover {
        background-color: var(--gti-scroll-hover);
    }
}

/* Compatibilidade com estilos locais e bundles anteriores, inclusive modais/portais.
   A especificidade é limitada aos componentes que já personalizavam suas barras. */
html:root :is(.sidebar-scroll, .historico-scroll, .gti-editor-scroll, .custom-scrollbar,
    .ciw-list, .ciw-messages, .messages, .cleanScroller, .scroller, .rv-modal-body,
    [class*="[scrollbar-color:"], [class*="scrollbar-thumb-"]):not(.scrollbar-none) {
    scrollbar-width: thin;
    scrollbar-color: var(--gti-scroll-thumb) transparent;
}

html:root :is(.sidebar-scroll, .historico-scroll, .gti-editor-scroll, .custom-scrollbar,
    .ciw-list, .ciw-messages, .messages, .cleanScroller, .scroller, .rv-modal-body,
    [class*="[scrollbar-color:"], [class*="scrollbar-thumb-"])::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

html:root :is(.sidebar-scroll, .historico-scroll, .gti-editor-scroll, .custom-scrollbar,
    .ciw-list, .ciw-messages, .messages, .cleanScroller, .scroller, .rv-modal-body,
    [class*="[scrollbar-color:"], [class*="scrollbar-thumb-"])::-webkit-scrollbar-track {
    background: transparent;
}

html:root :is(.sidebar-scroll, .historico-scroll, .gti-editor-scroll, .custom-scrollbar,
    .ciw-list, .ciw-messages, .messages, .cleanScroller, .scroller, .rv-modal-body,
    [class*="[scrollbar-color:"], [class*="scrollbar-thumb-"])::-webkit-scrollbar-thumb {
    background: var(--gti-scroll-thumb);
    background-clip: content-box;
    border: 2px solid transparent;
    border-radius: 999px;
}

html:root :is(.sidebar-scroll, .historico-scroll, .gti-editor-scroll, .custom-scrollbar,
    .ciw-list, .ciw-messages, .messages, .cleanScroller, .scroller, .rv-modal-body,
    [class*="[scrollbar-color:"], [class*="scrollbar-thumb-"])::-webkit-scrollbar-thumb:hover {
    background-color: var(--gti-scroll-hover);
}

/* O ScrollArea desenha uma barra própria: não expor também a barra nativa. */
[data-slot="scroll-area-thumb"] {
    background-color: var(--gti-scroll-thumb);
}

[data-slot="scroll-area-scrollbar"]:hover [data-slot="scroll-area-thumb"] {
    background-color: var(--gti-scroll-hover);
}

@media (forced-colors: active) {
    /* Sobrepõe somente cores locais; o contraste fica sob controle do navegador. */
    :where(html, body, body *) {
        scrollbar-color: auto !important;
    }

    [data-slot="scroll-area-thumb"] {
        background: CanvasText !important;
    }
}