/* ==========================================================================
   TRAILERS — a tela de vídeo longo

   O formato é o de app de vídeo em telefone, e isso é uma decisão e não uma
   cópia: a pessoa já sabe onde ficam o título, o canal, o botão de curtir e os
   comentários. Inventar outra arrumação para o mesmo conteúdo custaria
   aprendizado sem entregar nada.

   O que É nosso: a marca no topo, o dourado nas ações e o dinheiro em verde.
   Nenhuma cor, nenhum ícone e nenhum nome de outro app aparece aqui.
   ========================================================================== */

.tela-tube {
  padding: 0;
}

.tube {
  display: flex;
  flex-direction: column;
  padding-bottom: var(--e-6);
}

/* --------------------------------------------------------------- o avatar do canal

   Inicial sobre a cor da casa, e não um retrato: canal de estúdio se apresenta
   por marca. O tamanho vem por `--px` porque a mesma marca aparece em dois
   tamanhos — menor na lista, maior ao lado do botão de inscrever. */

.tube-canal-marca {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--px, 36px);
  height: var(--px, 36px);
  border-radius: 50%;
  background: var(--tom, var(--marca-2));
  color: var(--sobre-marca);
  font-size: calc(var(--px, 36px) * .42);
  font-weight: var(--peso-extra);
  line-height: 1;
}

/* ------------------------------------------------------------------ ícones */

.tube-icone {
  display: grid;
  place-items: center;
  width: var(--toque-min-compacto);
  height: var(--toque-min-compacto);
  border: 0;
  background: none;
  color: var(--texto);
  cursor: pointer;
  border-radius: 50%;
}

.tube-icone:active { background: var(--superficie-2); }

/* ----------------------------------------------------------- os filtros */

/* A fila do topo: a saída à esquerda, os filtros correndo à direita dela. */
.tube-topo-fila {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 4px;
  padding-left: 6px;
  background: var(--fundo);
  border-bottom: 1px solid var(--borda);
}

.tube-voltar-lista { flex: none; }

.tube-topo-fila .tube-chips {
  position: static;
  border-bottom: 0;
  padding-left: 2px;
  min-width: 0;
}

.tube-chips {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 10px var(--e-4);
  background: var(--fundo);
  border-bottom: 1px solid var(--borda);
}

.tube-chips::-webkit-scrollbar { display: none; }

.tube-chip {
  flex: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--txt-mini);
  font-weight: var(--peso-forte);
  padding: 7px 13px;
  border-radius: var(--raio-p);
  background: var(--superficie-2);
  color: var(--texto);
  min-height: var(--toque-min-compacto);
}

.tube-chip.ativo {
  background: var(--marca);
  color: var(--sobre-marca);
}

/* ------------------------------------------------------------- a lista */

.tube-lista {
  display: flex;
  flex-direction: column;
  gap: var(--e-5);
}

.tube-item {
  display: block;
  width: 100%;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: inherit;
}

/* A capa é o PRÓPRIO vídeo parado no segundo 2, e não uma imagem à parte.
   Um trailer sem miniatura preparada mostraria o primeiro quadro, que quase
   sempre é preto — e uma fileira de retângulos pretos não ajuda a escolher.
   `#t=2` faz o navegador buscar só o pedaço necessário para desenhar o quadro. */
.tube-capa {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
}

.tube-capa-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tube-dur {
  position: absolute;
  right: 8px;
  bottom: 8px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(0, 0, 0, .8);
  color: #fff;
  font-size: var(--txt-micro);
  font-weight: var(--peso-forte);
  font-variant-numeric: tabular-nums;
}

/* O que o trailer paga, na capa. É a única coisa desta tela que o app de vídeo
   comum não tem — e é a razão de a pessoa estar aqui. */
.tube-premio {
  position: absolute;
  left: 8px;
  bottom: 8px;
  padding: 3px 8px;
  border-radius: var(--raio-pill);
  background: var(--verde-cheio);
  color: var(--sobre-verde);
  font-size: var(--txt-micro);
  font-weight: var(--peso-extra);
  font-variant-numeric: tabular-nums;
}

.tube-info {
  display: flex;
  gap: 12px;
  padding: 12px var(--e-4) 0;
}

.tube-texto {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.tube-titulo {
  font-size: var(--txt-corpo);
  font-weight: var(--peso-forte);
  line-height: var(--altura-apertada);
  color: var(--texto);
  /* Duas linhas e corta: título de filme é longo e três linhas empurram o
     próximo item para fora da tela. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tube-meta {
  font-size: var(--txt-mini);
  color: var(--texto-fraco);
}

/* ------------------------------------------------------------ o player */

.tube-voltar-faixa {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: calc(env(safe-area-inset-top, 0px) + 8px) var(--e-3) 8px;
  background: var(--fundo);
}

.tube-voltar-txt {
  font-size: var(--txt-nota);
  font-weight: var(--peso-forte);
  color: var(--texto-fraco);
}

.tube-palco {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}

.tube-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: #000;
}

/* A camada de toque: cobre o vídeo inteiro e fica ABAIXO dos controles na
   pilha, para o botão de velocidade continuar sendo botão de velocidade. */
.tube-toque {
  position: absolute;
  inset: 0;
  z-index: 1;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.tube-controles {
  position: absolute;
  inset: auto 0 34px 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  background: linear-gradient(0deg, rgba(0, 0, 0, .55), transparent);
  transition: opacity var(--tempo-medio) var(--curva);
}

/* A barra e a velocidade ficam SEMPRE. São as duas coisas que respondem "onde
   estou" e "quero mais rápido", e as duas perguntas continuam existindo com o
   filme correndo. */
.tube-barra-fixa {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: linear-gradient(0deg, rgba(0, 0, 0, .62), transparent);
}

/* Com o filme correndo e a mão parada, some tudo que não é barra nem
   velocidade. `visibility` junto com a opacidade: sem ela, os controles
   invisíveis continuariam recebendo toque por cima da camada de pausa. */
.tube-palco.tube-limpo .tube-controles {
  opacity: 0;
  visibility: hidden;
}

.tube-play {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, .45);
  color: #fff;
  cursor: pointer;
  flex: none;
}

/* Tocando, o botão vira pausa por rotação do próprio ícone de play — dois
   ícones para o mesmo botão exigiriam trocar o nó a cada toque. */
.tube-palco.tocando .tube-play { opacity: .55; }

.tube-barra {
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .28);
  overflow: hidden;
}

.tube-barra-fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--marca);
  border-radius: inherit;
}

.tube-tempo {
  font-size: var(--txt-micro);
  color: #fff;
  font-variant-numeric: tabular-nums;
  flex: none;
}

.tube-vel {
  flex: none;
  border: 0;
  background: rgba(0, 0, 0, .45);
  color: #fff;
  font-family: inherit;
  font-size: var(--txt-mini);
  font-weight: var(--peso-extra);
  padding: 5px 9px;
  border-radius: var(--raio-pill);
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}

.tube-vel-viva { background: var(--marca); color: var(--sobre-marca); }

/* -------------------------------------------------------------- o corpo */

.tube-corpo {
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
  padding: var(--e-4);
}

.tube-h1 {
  margin: 0;
  font-size: var(--txt-forte);
  font-weight: var(--peso-extra);
  line-height: var(--altura-apertada);
  color: var(--texto);
  text-wrap: balance;
}

.tube-numeros {
  margin: 0;
  font-size: var(--txt-mini);
  color: var(--texto-fraco);
}

/* As ações, numa fileira que rola. */
.tube-acoes {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  margin-inline: calc(var(--e-4) * -1);
  padding-inline: var(--e-4);
}

.tube-acoes::-webkit-scrollbar { display: none; }

.tube-acao {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--txt-mini);
  font-weight: var(--peso-forte);
  padding: 9px 14px;
  border-radius: var(--raio-pill);
  background: var(--superficie-2);
  color: var(--texto);
  min-height: var(--toque-min-compacto);
}

.tube-acao-viva {
  background: color-mix(in oklab, var(--marca) 20%, transparent);
  color: var(--marca-texto);
}

/* O CORAÇÃO ACESO, E SÓ ELE.
   A curtida acendia o chip inteiro de dourado, e um chip aceso puxa a atenção
   da fileira toda para uma ação que já foi feita. Quem precisa mudar de cor é o
   coração — é ele que responde "curti ou não". */
.tube-acao-icone {
  display: inline-grid;
  place-items: center;
  transition: color var(--tempo-curto) var(--curva), transform var(--tempo-curto) var(--curva-mola);
}

.tube-acao-curtido {
  color: var(--vermelho-cheio);
  animation: tube-curtiu var(--tempo-medio) var(--curva-mola);
}

/* O coração preenchido, e não só contornado: o contorno vermelho num ícone de
   traço fino quase não muda nada a dois palmos de distância. */
.tube-acao-curtido .icone { fill: currentColor; }

@keyframes tube-curtiu {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.32); }
  100% { transform: scale(1); }
}

.tube-acao-salvo .icone { fill: currentColor; }

.tube-acao-conta { font-variant-numeric: tabular-nums; }

/* O "não curti" é só o ícone: sem legenda, ele fica quadrado como o par dele. */
.tube-acao-nao { padding-inline: 12px; }

/* O "não curti" é o mesmo coração de cabeça para baixo. Um ícone próprio para
   isso não existe no conjunto, e inventar um custaria legenda. */
/* O polegar de cabeça para baixo. É o MESMO desenho do "legal", girado meia
   volta — um segundo ícone de polegar para baixo seria a mesma forma duas vezes
   no arquivo, e as duas teriam que ser corrigidas juntas para sempre. */
.tube-acao-virado {
  display: inline-grid;
  transform: rotate(180deg);
}

/* -------------------------------------------------------------- o canal */

.tube-canal {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-block: var(--e-2);
  border-block: 1px solid var(--borda);
}

.tube-canal-txt {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
}

.tube-inscrito {
  background: var(--superficie-2) !important;
  color: var(--texto-fraco) !important;
}

.tube-descricao {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--e-3);
  border-radius: var(--raio-g);
  background: var(--superficie-2);
  font-size: var(--txt-nota);
  color: var(--texto-fraco);
  line-height: var(--altura-normal);
}

.tube-descricao p { margin: 0; }

.tube-estreia {
  font-weight: var(--peso-forte);
  color: var(--texto);
}

/* -------------------------------------------------- os comentários fechados */

.tube-comentarios {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  padding: var(--e-3);
  border-radius: var(--raio-g);
  background: var(--superficie-2);
  color: var(--texto);
}

.tube-comentarios > .icone { color: var(--texto-fraco); }

.tube-comentarios-topo {
  grid-column: 1;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.tube-comentarios-conta {
  font-size: var(--txt-mini);
  color: var(--texto-fraco);
  font-variant-numeric: tabular-nums;
}

.tube-comentarios-amostra {
  grid-column: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

/* --------------------------------------------------------- a seguir */

.tube-aseguir {
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
  margin-top: var(--e-2);
}

.tube-aseguir .tube-info { padding-inline: 0; }
.tube-aseguir .tube-capa { border-radius: var(--raio-p); }

/* ---------------------------------------------------- a folha de comentários */

.tube-cmt {
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
}

.tube-cmt-linha { display: flex; gap: 10px; }

.tube-cmt-corpo {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.tube-cmt-topo {
  display: flex;
  align-items: baseline;
  gap: 7px;
  font-size: var(--txt-mini);
}

.tube-cmt-txt {
  margin: 0;
  font-size: var(--txt-nota);
  color: var(--texto);
  line-height: var(--altura-normal);
}

.tube-cmt-acoes {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--texto-fraco);
  margin-top: 2px;
}

.tube-carregando { padding: var(--e-7) var(--e-4); }

/* O coração de um comentário: botão, com a área de toque que um dedo pede e o
   desenho do tamanho que era. Aceso, muda só o coração — dois vermelhos numa
   lista de dez comentários viram mancha. */
.tube-cmt-curtir {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
  padding: 6px 8px 6px 0;
  min-height: var(--toque-min-compacto);
  border: 0;
  background: none;
  cursor: pointer;
  font-family: inherit;
  color: var(--texto-fraco);
  font-variant-numeric: tabular-nums;
  -webkit-tap-highlight-color: transparent;
}

.tube-cmt-coracao {
  display: grid;
  place-items: center;
  transition: transform var(--tempo-curto) var(--curva-mola);
}

.tube-cmt-curtido { color: var(--vermelho-cheio); }
.tube-cmt-curtido .icone { fill: currentColor; }
.tube-cmt-curtido .nota-fraca { color: inherit; font-weight: var(--peso-forte); }

.tube-cmt-curtido .tube-cmt-coracao {
  animation: tube-cmt-curtiu var(--tempo-medio) var(--curva-mola);
}

@keyframes tube-cmt-curtiu {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.35); }
  100% { transform: scale(1); }
}