/* ========================================
   gc-scroll-area — overlay-скроллбар (Radix ScrollArea)
   Вид: overlay у края колонки (не OS-gutter). Thumb — тихий color-mix(--text-primary).
   Полоса скрыта в --pending, пока не измерено наполнение.
   Нативный скролл (колесо / клавиатура / тач). Не webkit-псевдоэлементы.
   ======================================== */

.gc-scroll-area {
    --gc-scroll-thumb: color-mix(in srgb, var(--text-primary) 18%, transparent);
    --gc-scroll-thumb-hover: color-mix(in srgb, var(--text-primary) 32%, transparent);
    /* От края колонки. Margin: Radix пишет top/right/bottom инлайном. */
    --gc-scroll-edge: var(--space-1);
    position: relative;
    overflow: hidden;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.gc-scroll-area__viewport {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    overscroll-behavior: contain;
    scrollbar-width: none;
}

.gc-scroll-area__viewport::-webkit-scrollbar {
    display: none;
}

/* Radix оборачивает children в display:table (ширина для horizontal).
   Vertical-only — block, иначе контент не тянется на ширину viewport. */
.gc-scroll-area--vertical > .gc-scroll-area__viewport > div {
    display: block !important;
    box-sizing: border-box;
    min-width: 100%;
}

.gc-scroll-area__scrollbar {
    position: absolute;
    z-index: 1;
    display: flex;
    user-select: none;
    touch-action: none;
    background: transparent;
    padding: 0;
    transition: opacity var(--transition-fast);
}

.gc-scroll-area__scrollbar[data-state='hidden'] {
    opacity: 0;
    pointer-events: none;
}

.gc-scroll-area__scrollbar[data-state='visible'] {
    opacity: 1;
}

/* До измерения overflow Radix рисует thumb на всю высоту трека — не показывать. */
.gc-scroll-area--pending > .gc-scroll-area__scrollbar {
    opacity: 0 !important;
    pointer-events: none;
}

/* Без inset abspos садится в static-позицию flex-колонки — серый thumb посреди контента. */
.gc-scroll-area__scrollbar[data-orientation='vertical'] {
    top: 0;
    right: 0;
    bottom: 0;
    margin-top: var(--gc-scroll-edge);
    margin-right: var(--gc-scroll-edge);
    width: var(--space-1-5);
    flex-direction: column;
    align-items: stretch;
}

.gc-scroll-area__scrollbar[data-orientation='horizontal'] {
    left: 0;
    right: 0;
    bottom: 0;
    margin-right: var(--gc-scroll-edge);
    flex-direction: column;
    height: var(--space-1-5);
}

/* Размер — только CSS-переменные Radix. flex:1 + невалидный height = thumb на весь трек. */
.gc-scroll-area__thumb {
    flex: none;
    position: relative;
    background: var(--gc-scroll-thumb);
    border-radius: var(--radius-full);
}

.gc-scroll-area__scrollbar:hover .gc-scroll-area__thumb,
.gc-scroll-area__thumb:hover {
    background: var(--gc-scroll-thumb-hover);
}

/* Hit только вдоль трека, к внешнему краю — не 44px-диск в контент */
.gc-scroll-area__scrollbar[data-orientation='vertical'] .gc-scroll-area__thumb::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--space-2);
}

.gc-scroll-area__scrollbar[data-orientation='horizontal'] .gc-scroll-area__thumb::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--space-2);
}

.gc-scroll-area__corner {
    background: transparent;
}

/*
 * Tablet + phone (<992): overlay-thumb выключен.
 * Native OS-бар уже hidden на viewport. Тач / колесо / клавиатура не трогаем.
 */
@media (max-width: 991.98px) {
    .gc-scroll-area__scrollbar,
    .gc-scroll-area__corner {
        display: none;
    }
}