/* A barra de rolagem do app inteiro — um desenho só, para todo elemento que
   rola: a página, os modais, as gavetas, as colunas do funil, a fila de
   miniaturas. Antes cada tela desenhava a sua (4, 5, 6, 11 px, cores
   diferentes), e a do modal de usuário era o modelo: trilho transparente e um
   pino arredondado. Ele fica, bem mais largo, para dar para pegar.

   O pino é o miolo de 8 px dentro dos 14 px do trilho: a borda transparente
   (com `background-clip: padding-box`) é o respiro que o separa do conteúdo, e
   é clicável do mesmo jeito. No hover ele engorda para dizer que é dele.

   O cinza do claro é o zinc-400: o fundo do app é zinc-200 e os painéis são
   brancos, e o zinc-300 do modal original sumia nos dois — barra que não se
   vê não se pega.

   Quem quer esconder a barra de propósito (aba que rola de lado, galeria)
   continua com o `display: none` da própria tela — isso é escolha da tela,
   não do desenho. */

* {
    scrollbar-width: auto;
    scrollbar-color: #a1a1aa transparent;
}
.dark, .dark * {
    scrollbar-color: #52525b transparent;
}

::-webkit-scrollbar { width: 14px; height: 14px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb {
    background: #a1a1aa;
    background-clip: padding-box;
    border: 3px solid transparent;
    border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover {
    background: #71717a;
    background-clip: padding-box;
    border-width: 2px;
}
.dark ::-webkit-scrollbar-thumb { background: #52525b; background-clip: padding-box; }
.dark ::-webkit-scrollbar-thumb:hover { background: #71717a; background-clip: padding-box; }