/* ============================================================
   Coyote — scrollbar
   Cole este arquivo no projeto e importe uma vez.
   Aplique a classe no ELEMENTO QUE ROLA (o que tem overflow),
   não no filho.

     <div class="cy-rail" style="overflow:auto"> ... </div>

   Variantes:
     .cy-rail        padrão do app
     .cy-ruler       rolagem longa e homogênea

   Tema único escuro (identidade v2): as variantes claras saíram.

   Notas:
   - Todo o desenho vive em camadas de `background`: o pseudo-elemento
     ::-webkit-scrollbar-thumb não aceita ::before/::after.
   - Ao trocar a cor no :hover é obrigatório repetir
     `background-clip: content-box`, porque o shorthand `background`
     reseta essa propriedade.
   - Firefox só suporta scrollbar-width/scrollbar-color: lá as barras
     caem numa faixa fina de cor sólida (fallback declarado).
     O desenho completo aparece em Chromium e Safari.
   - Nenhuma variante usa o acento âmbar (var(--accent)): a barra aparece
     dezenas de vezes por sessão e diluiria o acento, que é reservado a
     seleção, playhead e ação primária.
   ============================================================ */


/* ============================================================
   A — TRILHO-GUIA  (.cy-rail)
   Trilho = hairline de 1px, como o eixo de um fader.
   Polegar = bloco de 8px com duas ranhuras de pegada no centro,
   mesma linguagem das alças dos sliders do painel.
   Em repouso a barra praticamente desaparece.
   ============================================================ */

.cy-rail {
  scrollbar-width: thin;
  scrollbar-color: #45454C transparent;
}

.cy-rail::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}

.cy-rail::-webkit-scrollbar-track:vertical {
  background: linear-gradient(90deg,
    transparent calc(50% - .5px),
    var(--line)   calc(50% - .5px),
    var(--line)   calc(50% + .5px),
    transparent calc(50% + .5px));
}

.cy-rail::-webkit-scrollbar-track:horizontal {
  background: linear-gradient(180deg,
    transparent calc(50% - .5px),
    var(--line)   calc(50% - .5px),
    var(--line)   calc(50% + .5px),
    transparent calc(50% + .5px));
}

.cy-rail::-webkit-scrollbar-thumb:vertical {
  background:
    linear-gradient(var(--ink-soft), var(--ink-soft)) 50% calc(50% - 3px) / 8px 1px no-repeat,
    linear-gradient(var(--ink-soft), var(--ink-soft)) 50% calc(50% + 3px) / 8px 1px no-repeat,
    var(--line-strong);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: 2px;
}

.cy-rail::-webkit-scrollbar-thumb:horizontal {
  background:
    linear-gradient(var(--ink-soft), var(--ink-soft)) calc(50% - 3px) 50% / 1px 8px no-repeat,
    linear-gradient(var(--ink-soft), var(--ink-soft)) calc(50% + 3px) 50% / 1px 8px no-repeat,
    var(--line-strong);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: 2px;
}

.cy-rail::-webkit-scrollbar-thumb:vertical:hover {
  background:
    linear-gradient(var(--ink), var(--ink)) 50% calc(50% - 3px) / 8px 1px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 50% calc(50% + 3px) / 8px 1px no-repeat,
    #55555C;
  background-clip: content-box;
}

.cy-rail::-webkit-scrollbar-thumb:horizontal:hover {
  background:
    linear-gradient(var(--ink), var(--ink)) calc(50% - 3px) 50% / 1px 8px no-repeat,
    linear-gradient(var(--ink), var(--ink)) calc(50% + 3px) 50% / 1px 8px no-repeat,
    #55555C;
  background-clip: content-box;
}

.cy-rail::-webkit-scrollbar-corner { background: transparent; }




/* ============================================================
   B — RÉGUA  (.cy-ruler)
   Trilho = escala de traços a cada 9px, igual à régua da timeline:
   dá noção de distância percorrida, não só de proporção.
   Polegar = bloco reto com cabeças de trim de 1px nas pontas,
   a forma dos clipes da trilha Saída. Cantos de 1px.
   Use só onde a rolagem é longa e homogênea.
   ============================================================ */

.cy-ruler {
  scrollbar-width: thin;
  scrollbar-color: #45454C var(--bg-panel);
}

.cy-ruler::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}

.cy-ruler::-webkit-scrollbar-track:vertical {
  background: repeating-linear-gradient(180deg, var(--e2) 0 1px, transparent 1px 9px);
  border-left: 1px solid var(--e1);
}

.cy-ruler::-webkit-scrollbar-track:horizontal {
  background: repeating-linear-gradient(90deg, var(--e2) 0 1px, transparent 1px 9px);
  border-top: 1px solid var(--e1);
}

.cy-ruler::-webkit-scrollbar-thumb:vertical {
  background:
    linear-gradient(var(--ink-soft), var(--ink-soft)) 50% 0    / 100% 1px no-repeat,
    linear-gradient(var(--ink-soft), var(--ink-soft)) 50% 100% / 100% 1px no-repeat,
    var(--line);
  border: 2px solid transparent;
  background-clip: content-box;
  border-radius: 1px;
}

.cy-ruler::-webkit-scrollbar-thumb:horizontal {
  background:
    linear-gradient(var(--ink-soft), var(--ink-soft)) 0    50% / 1px 100% no-repeat,
    linear-gradient(var(--ink-soft), var(--ink-soft)) 100% 50% / 1px 100% no-repeat,
    var(--line);
  border: 2px solid transparent;
  background-clip: content-box;
  border-radius: 1px;
}

.cy-ruler::-webkit-scrollbar-thumb:vertical:hover {
  background:
    linear-gradient(var(--ink-body), var(--ink-body)) 50% 0    / 100% 1px no-repeat,
    linear-gradient(var(--ink-body), var(--ink-body)) 50% 100% / 100% 1px no-repeat,
    var(--line-strong);
  background-clip: content-box;
}

.cy-ruler::-webkit-scrollbar-thumb:horizontal:hover {
  background:
    linear-gradient(var(--ink-body), var(--ink-body)) 0    50% / 1px 100% no-repeat,
    linear-gradient(var(--ink-body), var(--ink-body)) 100% 50% / 1px 100% no-repeat,
    var(--line-strong);
  background-clip: content-box;
}



/* ============================================================
   Onde aplicar

   .cy-rail        painel lateral do editor, lista de trechos,
                   popover de emoji, grade de cartões do lote
   .cy-ruler       banco de hooks, trilha Saída com muitos clipes
                   (rolagem longa e homogênea)

   Onde NÃO aplicar

   - corpo da página: o wizard e o editor não rolam, cabem em 1080px
   - régua da timeline: rola em sincronia com as trilhas por script,
     sem barra própria
   ============================================================ */