/* ==========================================================================
   O FEED — a tela principal
   Uma campanha por tela, deslizando na vertical. O conteúdo é a interface:
   nada de cartão em cima de fundo, nada de moldura. O vídeo ocupa tudo e as
   informações vivem por cima dele.

   A gramática é a de app de vídeo vertical: seções no topo, lateral de ações
   com o perfil em cima, rodapé com quem publicou e a conversa numa folha que
   sobe. A ESTRUTURA é da categoria; a cara é do PlayCash — vermelho da marca,
   escuro por padrão, verde só no dinheiro.
   ========================================================================== */

.feed {
  position: fixed;
  /* `inset: 0` sozinho não serve, e o motivo aparece só no telefone de verdade.
     No iOS, um elemento fixo com `inset: 0` é medido contra o viewport GRANDE —
     o que existe quando a barra de endereço está recolhida. Com a barra à vista,
     o topo do elemento fica ATRÁS dela, e o que some é a primeira linha do
     feed: o saldo e o botão de sacar. A tela continua funcionando e a pessoa
     simplesmente não vê mais quanto tem.
     Fixando o lado de baixo em auto e a altura em `dvh`, a caixa passa a medir
     o viewport VISÍVEL e acompanha a barra aparecendo e sumindo. */
  inset: 0 0 auto 0;
  height: 100dvh;
  background: #000;
  overflow: hidden;
}

/* Navegador sem `dvh` cai no viewport fixo, que é o comportamento antigo —
   pior no iOS com a barra à vista, mas nunca uma tela quebrada. */
@supports not (height: 100dvh) {
  .feed { inset: 0; height: auto; }
}

/* A trilha é quem rola, e o encaixe é o que faz um item por vez. */
.feed-trilha {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}
.feed-trilha::-webkit-scrollbar { display: none; }

.feed-item {
  position: relative;
  height: 100dvh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  overflow: hidden;
  display: block;
  background: #000;
}

/* ------------------------------------------------------------- O palco */

/* O hospedeiro do palco. Vale para os três: arquivo de vídeo, peça animada e
   a reserva colorida. Quem entrar aqui ocupa a tela inteira — inclusive a peça
   de criativos.js, para o feed não depender da folha de estilo dela ter
   chegado antes. */
.feed-palco-hosp {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #000;
}

.feed-palco-hosp > * {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.feed-video {
  object-fit: cover;
  background: #000;
}

/* Sem arquivo e sem peça, a cor da campanha é o palco: um degradê fundo que
   ainda deixa o texto branco legível por cima. */
.feed-palco {
  background:
    radial-gradient(120% 80% at 50% 28%, var(--cor-campanha) 0%, transparent 72%),
    linear-gradient(180deg, #101018 0%, #05050a 100%);
  display: grid;
  place-items: center;
}

.feed-palco-marca {
  font-size: 132px;
  font-weight: 800;
  line-height: 1;
  color: #fff;
  opacity: .13;
  letter-spacing: -.05em;
  user-select: none;
}

/* Sombra que garante contraste do texto por cima de qualquer imagem. */
.feed-sombra {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0,0,0,.62) 0%, transparent 26%),
    linear-gradient(0deg, rgba(0,0,0,.84) 0%, transparent 46%);
}

/* --------------------------------------------------------- Tocar/pausar */

/* A área de toque é a tela inteira — como a pessoa já espera. É por ela que
   passa o toque duplo que curte. */
.feed-toque {
  position: absolute;
  inset: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
}

.feed-play {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .42);
  backdrop-filter: blur(6px);
  display: grid;
  place-items: center;
  color: #fff;
  transition: opacity 200ms ease, transform 200ms ease;
}

/* Tocando, o botão sai da frente. Pausado ou concluído, ele volta. */
.feed-item.tocando .feed-play { opacity: 0; transform: scale(.8); }
.feed-item.concluido .feed-play { opacity: 0; pointer-events: none; }

/* ---- o fim do vídeo -----------------------------------------------------
   O vídeo acabou e a decisão é de quem está assistindo: recomeçar ou não.
   Ele recomeçava sozinho, e dar voltas sem parar foi pior que o quadro
   congelado que isso veio substituir — quem estava olhando não tinha como sair
   daquilo a não ser rolando a tela.

   No MEIO da tela, e não num canto: é a única coisa que o cartão está pedindo
   neste instante, e é sobre um vídeo parado que ele aparece. */
.feed-refazer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  display: grid;
  place-items: center;
  gap: var(--e-2);
  padding: var(--e-4) var(--e-5);
  border: 0;
  border-radius: var(--raio-g);
  background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  font-family: inherit;
  font-size: var(--txt-nota);
  font-weight: var(--peso-forte);
  cursor: pointer;
  animation: feed-refazer-entra 260ms var(--curva, ease) both;
}

.feed-refazer-anel {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--marca);
  color: var(--marca-texto);
}

.feed-refazer:active { transform: translate(-50%, -50%) scale(.94); }

@keyframes feed-refazer-entra {
  from { opacity: 0; transform: translate(-50%, -50%) scale(.88); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .feed-refazer { animation: none; }
}

/* O coração do toque duplo nasce onde o dedo tocou. */
.feed-coracao-salto {
  position: absolute;
  z-index: 4;
  margin: -52px 0 0 -52px;
  color: var(--marca);
  pointer-events: none;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .55));
  animation: coracao-salta 1s cubic-bezier(.2, .9, .3, 1) forwards;
}

@keyframes coracao-salta {
  0%   { opacity: 0; transform: scale(.2) rotate(-14deg); }
  22%  { opacity: 1; transform: scale(1.16) rotate(6deg); }
  40%  { transform: scale(.98) rotate(-3deg); }
  70%  { opacity: .95; transform: scale(1.02) translateY(-14px); }
  100% { opacity: 0; transform: scale(.9) translateY(-70px); }
}

/* ------------------------------------------------------------- O topo */

.feed-topo {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: calc(env(safe-area-inset-top, 0px) + 12px) 14px 12px;
  pointer-events: none;
}

/* O RESPIRO DE QUEM ABRE NO NAVEGADOR, e não como app instalado.
   `env(safe-area-inset-top)` cobre entalhe e ilha dinâmica, mas não cobre a
   barra de endereço: para o navegador, ela não é área insegura — é interface
   dele. Instalado na tela inicial não existe barra nenhuma e o inset basta; no
   navegador, a primeira linha do feed encosta nela, e foi assim que o saldo e o
   botão de sacar saíram da vista num iPhone. Vinte pixels a mais só neste caso. */
@media (display-mode: browser) {
  .feed-topo { padding-top: calc(env(safe-area-inset-top, 0px) + 20px); }
}

/* Linha 1: o dinheiro. Fica acima das seções de propósito — a decisão desta
   tela é quanto já deu e quanto falta, não qual aba está aberta. */
.feed-topo-saldo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.feed-saldo,
.feed-sacar {
  pointer-events: auto;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  border-radius: 999px;
  backdrop-filter: blur(10px);
}

.feed-saldo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: 7px 14px;
  background: rgba(0, 0, 0, .46);
  color: #fff;
  text-align: left;
}

.feed-saldo strong {
  font-size: 17px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.feed-falta {
  font-size: 11.5px;
  color: rgba(255, 255, 255, .74);
}

.feed-liberado { color: var(--verde); font-weight: 600; }

.feed-sacar {
  margin-left: auto;
  padding: 10px 18px;
  background: var(--marca);
  color: var(--sobre-marca);
  font-weight: 700;
  font-size: 14px;
  min-height: 44px;
}

/* ----------------------------------------------------------- As seções */

.feed-abas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.feed-aba {
  pointer-events: auto;
  position: relative;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: rgba(255, 255, 255, .62);
  display: inline-flex;
  align-items: center;
  padding: 6px 12px 9px;
  /* 44px, e não os 40 que estavam aqui: trocar de seção é um gesto feito com o
     polegar em movimento, no pior alvo possível. O respiro continua o mesmo —
     só o piso subiu. */
  min-height: 44px;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .8);
  transition: color 160ms ease;
}

/* O sublinhado curto embaixo da ativa é o que o formato consagrou, e é o que
   diz onde a pessoa está sem precisar de caixa nem de fundo. */
.feed-aba-viva {
  color: #fff;
  font-weight: 800;
}

.feed-aba-viva::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 24px;
  height: 3px;
  border-radius: 999px;
  background: var(--marca);
  transform: translateX(-50%);
}

/* ---------------------------------------------------------- As ações */

.feed-acoes {
  position: absolute;
  right: 8px;
  bottom: calc(var(--nav-h, 64px) + 128px);
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: center;
}

.feed-extras {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: center;
}

.feed-acao {
  border: 0;
  background: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 0;
  min-width: 52px;
  min-height: 52px;
  color: #fff;
  font-family: inherit;
  transition: transform 140ms ease;
}

.feed-acao:active { transform: scale(.88); }

.feed-acao-icone {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .44);
  backdrop-filter: blur(8px);
  display: grid;
  place-items: center;
  font-size: 24px;
  line-height: 1;
}

/* Coração e balão são desenho, não emoji: vão sem a bolha atrás, com sombra
   própria, como o formato faz. */
.feed-acao-nua {
  width: auto;
  height: auto;
  background: none;
  backdrop-filter: none;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .65));
}

.feed-acao-txt {
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .7);
}

.feed-acao-feita { opacity: .72; }

/* Curtido: o coração enche e veste o vermelho da marca. */
.feed-curtir { color: #fff; }
.feed-curtido { color: var(--marca); }
.feed-curtir-pulou .feed-acao-nua { animation: coracao-enche 420ms cubic-bezier(.2, .9, .3, 1); }

@keyframes coracao-enche {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.34); }
  60%  { transform: scale(.92); }
  100% { transform: scale(1); }
}

/* Dobrar é a única ação que chama atenção — é dinheiro em cima de dinheiro. */
.feed-acao-dobro .feed-acao-icone {
  background: var(--marca);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .16);
  animation: dobro-chama 2.2s ease-in-out infinite;
}

@keyframes dobro-chama {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.09); }
}

/* ------------------------------------------------------- O perfil da marca */

/* O botão de seguir grudado na base do avatar: é assim que a categoria inteira
   desenha, e é o que faz "seguir" ser óbvio sem rótulo. */
.feed-perfil {
  position: relative;
  margin-bottom: 6px;
}

.feed-avatar {
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--cor-marca, var(--marca));
  color: #fff;
  font-weight: 800;
  line-height: 1;
  border: 2px solid rgba(255, 255, 255, .9);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .5);
  user-select: none;
}

.feed-avatar-m { width: 48px; height: 48px; font-size: 20px; }
.feed-avatar-g { width: 60px; height: 60px; font-size: 25px; }

/* O DISTINTIVO DE SEGUIR: 24px de desenho, 44px de alvo.
   O botão em si tem 44px e é transparente — quem pinta o disco vermelho de
   24px é o ::before. Antes o botão inteiro media 24px, metade do alvo mínimo,
   e errar o toque aqui custa seguir um perfil que não era o pretendido.
   Estender a área com um pseudo-elemento sobreposto resolveria para o dedo mas
   não para a caixa do elemento — que é o que a auditoria mede, e com razão:
   alvo é o que o navegador considera clicável, não o que parece grande. */
.feed-seguir {
  position: absolute;
  left: 50%;
  bottom: -22px;
  transform: translateX(-50%);
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--sobre-marca);
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
  transition: transform 180ms ease;
}

/* O disco que se vê. A sombra vem para cá junto com o fundo: no botão de 44px
   transparente ela viraria um halo solto em volta de nada. */
.feed-seguir::before {
  content: '';
  position: absolute;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--marca);
  box-shadow: 0 1px 6px rgba(0, 0, 0, .5);
  transition: background 180ms ease;
}

/* O ícone fica acima do disco. */
.feed-seguir > * { position: relative; }

.feed-seguir:active { transform: translateX(-50%) scale(.86); }

/* Seguindo: o distintivo perde a cor de chamada e vira confirmação. Continua
   existindo porque é por ele que se deixa de seguir.
   Quem muda de cor é o disco, não o botão — o botão é a área de toque e segue
   transparente. */
.feed-seguir-feito { color: #fff; }

.feed-seguir-feito::before {
  background: rgba(0, 0, 0, .58);
  backdrop-filter: blur(6px);
}

/* ------------------------------------------------------------ O rodapé */

.feed-rodape {
  position: absolute;
  left: 0;
  right: 76px;
  bottom: calc(var(--nav-h, 64px) + 18px);
  z-index: 2;
  padding: 0 14px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  color: #fff;
  pointer-events: none;
}

.feed-quem {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.feed-anunciante {
  font-size: 15px;
  font-weight: 800;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .8);
}

.feed-arroba {
  margin: 0;
  font-size: 12px;
  color: rgba(255, 255, 255, .72);
  text-shadow: 0 1px 4px rgba(0, 0, 0, .8);
}

.feed-titulo {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
  text-wrap: balance;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .85);
}

.feed-linha {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.feed-premio {
  font-size: 22px;
  font-weight: 800;
  color: var(--verde);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .9);
}

.feed-premio-caiu { animation: premio-pulsa 600ms ease-out; }

@keyframes premio-pulsa {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.22); }
  100% { transform: scale(1); }
}

.feed-restante {
  font-size: 13px;
  color: rgba(255, 255, 255, .78);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------- O progresso */

.feed-progresso {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--nav-h, 64px);
  height: 3px;
  background: rgba(255, 255, 255, .18);
  z-index: 3;
}

.feed-progresso-fill {
  height: 100%;
  width: 0;
  background: var(--marca);
  transition: width 200ms linear;
}

/* ------------------------------------------------------- A bolha de ganho */

.feed-bolha {
  position: absolute;
  left: 50%;
  bottom: 34%;
  z-index: 4;
  transform: translateX(-50%);
  font-size: 30px;
  font-weight: 800;
  color: var(--verde);
  text-shadow: 0 2px 10px rgba(0, 0, 0, .9);
  pointer-events: none;
  animation: bolha-sobe 1.4s cubic-bezier(.22, .8, .3, 1) forwards;
}

@keyframes bolha-sobe {
  0%   { opacity: 0; transform: translate(-50%, 20px) scale(.7); }
  18%  { opacity: 1; transform: translate(-50%, 0) scale(1.1); }
  40%  { transform: translate(-50%, -10px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -120px) scale(.95); }
}

/* ------------------------------------------------------------- Vazio */

.feed-vazio {
  height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: #fff;
  padding: 24px;
  text-align: center;
}

/* -------------------------------------------- Seguindo, ainda sem ninguém */

/* Não é tela de erro nem de vazio: é a tela que ensina que dá para seguir.
   Por isso ela mostra quem seguir, e não um desenho triste com uma frase. */
.feed-convite {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: #fff;
  text-align: center;
  padding: calc(env(safe-area-inset-top, 0px) + 128px) 18px calc(var(--nav-h, 64px) + 28px);
}

.feed-convite-titulo {
  margin: 0;
  font-size: 21px;
  font-weight: 800;
}

.feed-convite-apoio {
  margin: 0 0 14px;
  font-size: 14px;
  color: rgba(255, 255, 255, .7);
  max-width: 30ch;
}

.feed-convite-grade {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  max-width: 420px;
}

.feed-convite-cartao {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 14px 8px 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .1);
}

.feed-convite-nome {
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.feed-convite-arroba {
  font-size: 10.5px;
  color: rgba(255, 255, 255, .58);
  margin-bottom: 4px;
}

.feed-convite-btn {
  margin-top: auto;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  padding: 8px 14px;
  min-height: 36px;
  width: 100%;
  background: var(--marca);
  color: var(--sobre-marca);
  transition: transform 140ms ease;
}

.feed-convite-btn:active { transform: scale(.94); }

.feed-convite-btn-feito {
  background: rgba(255, 255, 255, .14);
  color: #fff;
}

.feed-convite-pe {
  margin-top: 20px;
  width: 100%;
  max-width: 420px;
}

.feed-convite-pe .btn { width: 100%; }

/* ==========================================================================
   A FOLHA DE COMENTÁRIOS
   Sobe de baixo, cobre a maior parte da tela e deixa o vídeo aparecendo em
   cima. A contagem fica grudada no alto da lista, e o campo de escrever fica
   grudado embaixo — as duas coisas que a pessoa procura sem rolar.
   ========================================================================== */

/* Altura fixa para a folha abrir sempre do mesmo tamanho, e não pular conforme
   o vídeo tenha oito ou três comentários.

   `min-height: 0` no corpo é obrigatório junto com isso, e não é preciosismo:
   sem ele o corpo se dimensiona pelo CONTEÚDO dentro de um pai de altura
   travada, a lista transborda a folha inteira e vai parar por cima da cabeça —
   aí o toque no × cai num comentário e a folha não fecha. */
.folha-comentarios { height: 76dvh; }
.folha-comentarios .folha-corpo { flex: 1; min-height: 0; }

/* A cabeça que lib/fx.js desenha sai de cena aqui: o × dela não fecha nada,
   porque o arrasto da folha captura o ponteiro na própria cabeça e o clique
   nunca chega ao botão de dentro. Botão que não faz nada é pior que botão
   nenhum, então esta folha esconde aquele e traz o dela, na barra da contagem.
   A alça continua fechando por arrasto, e o Esc e o fundo continuam valendo. */
.folha-comentarios .folha-cabeca { display: none; }

.folha-comentarios .folha-corpo { padding: 0; gap: 0; }

.cmt { display: flex; flex-direction: column; }

/* A barra da contagem: número no meio, × na direita, grudada no alto da lista
   enquanto a conversa rola por baixo. */
.cmt-cabeca {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--superficie);
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  align-items: center;
  padding: 0 var(--e-3) 10px;
  border-bottom: 1px solid var(--borda);
  margin-bottom: 4px;
}

.cmt-conta {
  grid-column: 2;
  text-align: center;
  font-size: var(--txt-nota);
  font-weight: 700;
  color: var(--texto-fraco);
  font-variant-numeric: tabular-nums;
}

.cmt-fechar {
  grid-column: 3;
  justify-self: end;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--texto-fraco);
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
}

.cmt-fechar:active { background: var(--fundo); }

.cmt-lista {
  display: flex;
  flex-direction: column;
  padding: 0 var(--e-5) var(--e-4);
}

.cmt-linha {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
}

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

.cmt-topo {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cmt-nome {
  font-size: var(--txt-mini);
  font-weight: 600;
  color: var(--texto-fraco);
}

.cmt-selo {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--marca-suave);
  color: var(--marca-texto);
}

.cmt-texto {
  margin: 0;
  font-size: var(--txt-corpo);
  line-height: 1.35;
  color: var(--texto);
  overflow-wrap: anywhere;
}

.cmt-tempo {
  font-size: var(--txt-mini);
  color: var(--texto-3);
}

/* O coração de um comentário. Virou BOTÃO, e por isso precisa de área de toque:
   o alvo tem os 44px que um dedo pede, e o desenho continua do tamanho que era. */
.cmt-curtidas {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: var(--toque-min-compacto);
  min-height: var(--toque-min-compacto);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 11px;
  color: var(--texto-3);
  font-variant-numeric: tabular-nums;
  -webkit-tap-highlight-color: transparent;
}

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

/* Curtido: só o coração muda de cor, como no player de trailer. O número
   acompanha em peso, não em cor — dois vermelhos lado a lado numa lista de oito
   comentários viram mancha. */
.cmt-curtidas-viva { color: var(--vermelho-cheio); }
.cmt-curtidas-viva .cmt-curtidas-n { font-weight: var(--peso-forte); }

.cmt-curtidas-viva .cmt-curtidas-icone {
  animation: cmt-curtiu var(--tempo-medio) var(--curva-mola);
}

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

.cmt-curtidas:active .cmt-curtidas-icone { transform: scale(.85); }

/* A resposta encadeada, com o fio à esquerda que a categoria usa. */
.cmt-fio {
  margin-top: 6px;
  padding-left: 12px;
  border-left: 2px solid var(--borda);
}

.cmt-resposta { padding: 6px 0; }
.cmt-resposta .cmt-texto { font-size: var(--txt-nota); }

/* O comentário da pessoa fica no topo e marcado — é o único que ela reconhece
   como dela quando reabre o app. */
.cmt-minha .cmt-texto { font-weight: 600; }

.cmt-avatar {
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  font-weight: 700;
  line-height: 1;
  user-select: none;
  background: linear-gradient(158deg,
    hsl(var(--tom, 0), 56%, 48%),
    hsl(var(--tom, 0), 60%, 32%));
}

.cmt-avatar-m { width: 34px; height: 34px; font-size: 14px; }
.cmt-avatar-p { width: 26px; height: 26px; font-size: 11px; }

/* ----------------------------------------------------- Escrever comentário */

.folha-comentarios .folha-acoes { gap: 8px; align-items: center; }

/* A barra é UMA linha: avatar, campo, enviar. Sem isto os três viram três
   blocos empilhados, porque `.folha-acoes` só arruma os filhos diretos dela e
   o filho direto aqui é esta barra. */
.cmt-barra {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

.cmt-campo {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--borda);
  border-radius: 999px;
  background: var(--fundo);
  color: var(--texto);
  font-family: inherit;
  font-size: var(--txt-corpo);
  padding: 11px 16px;
  min-height: 44px;
}

.cmt-campo:focus-visible {
  outline: 2px solid var(--marca);
  outline-offset: 1px;
}

.cmt-enviar {
  flex: none;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--marca);
  color: var(--sobre-marca);
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
  transition: transform 140ms ease;
}

.cmt-enviar:active { transform: scale(.9); }

/* ------------------------------------------------------ Movimento reduzido */

@media (prefers-reduced-motion: reduce) {
  .feed-trilha { scroll-behavior: auto; }
  .feed-acao-dobro .feed-acao-icone,
  .feed-curtir-pulou .feed-acao-nua,
  .feed-premio-caiu { animation: none; }
  .feed-bolha { animation: bolha-parada 1.4s linear forwards; }
  .feed-coracao-salto { animation: coracao-parado 1s linear forwards; }
  @keyframes bolha-parada { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }
  @keyframes coracao-parado { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
}

/* Em tela cheia o conteúdo vai até a borda: a área que o app reserva para a
   barra do topo não existe aqui. */
body.em-tela-cheia .app {
  padding-top: 0;
  padding-bottom: 0;
}

/* Toast no feed sobe acima do rodapé: colado na barra ele cobre justamente o
   título e o valor da campanha, que é o que a pessoa está lendo. */
body.em-tela-cheia .pilha-toast {
  bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 168px);
}

/* Tela baixa: a lateral e o rodapé sobem juntos para o rodapé não encostar na
   barra de navegação. */
@media (max-height: 700px) {
  .feed-acoes { bottom: calc(var(--nav-h, 64px) + 112px); gap: 14px; }
  .feed-extras { gap: 14px; }
  .feed-palco-marca { font-size: 104px; }
}

/* Quando o aviso de conexão está na tela, o topo do feed desce para caber.
   O saldo é a informação mais importante do feed — barra nenhuma passa por
   cima dele, nem a que avisa que a rede caiu. */
body:has(.conexao.visivel) .feed-topo {
  transform: translateY(34px);
  transition: transform 240ms var(--curva-saida, ease);
}

body:has(.conexao.visivel) .feed-faixa {
  transform: translateY(34px);
  transition: transform 240ms var(--curva-saida, ease);
}

/* Navegador sem :has continua legível — o aviso some sozinho em segundos e a
   sobreposição é temporária, não permanente. */
@supports not selector(body:has(.conexao)) {
  .conexao { opacity: .96; }
}

@media (prefers-reduced-motion: reduce) {
  body:has(.conexao.visivel) .feed-topo,
  body:has(.conexao.visivel) .feed-faixa { transition: none; }
}

/* ------------------------------------------------- o botão de sacar chamando
   Ele só chama quando há dinheiro para sacar (`.feed-sacar-chama`, posta por
   `conteudoDoTopo` a partir de `podeSacar().ok`).

   DUAS COISAS, E CADA UMA FAZ UM TRABALHO. O pulso é visto pelo canto do olho —
   é ele que tira o botão do cenário enquanto a pessoa assiste ao vídeo. A seta
   é vista quando o olho chega ali — é ela que diz para onde ir. Movimento sem
   direção só avisa que algo mudou; direção sem movimento não é notada. */
.feed-sacar-chama {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* Antes do mínimo: um respiro lento, sem urgência. Ele existe para a pessoa
     reparar que o botão está ali, não para mandá-la tocar agora. */
  animation: sacar-respira 3.4s ease-in-out infinite;
}

/* Com o mínimo alcançado, o mesmo botão muda de comportamento: pulso mais
   rápido e mais forte. É o degrau que impede o movimento de virar cenário —
   se os dois estados pulsassem igual, o pulso deixaria de significar algo. */
.feed-sacar-liberado {
  animation: sacar-pulsa 1.9s ease-in-out infinite;
}

@keyframes sacar-respira {
  0%, 100% {
    box-shadow: 0 0 0 0 color-mix(in oklab, var(--marca) 34%, transparent),
                0 6px 18px rgba(0, 0, 0, .38);
  }
  55% {
    box-shadow: 0 0 0 7px color-mix(in oklab, var(--marca) 0%, transparent),
                0 6px 20px rgba(0, 0, 0, .42);
  }
}

/* O pulso é na SOMBRA, e não no tamanho.
   Escalar o botão mexe na área de toque: o dedo mira onde ele estava e erra
   quando a animação está no ponto menor. A sombra cresce e volta sem tirar um
   pixel do alvo. */
@keyframes sacar-pulsa {
  0%, 100% {
    box-shadow: 0 0 0 0 color-mix(in oklab, var(--marca) 62%, transparent),
                0 6px 18px rgba(0, 0, 0, .38);
  }
  55% {
    box-shadow: 0 0 0 10px color-mix(in oklab, var(--marca) 0%, transparent),
                0 6px 22px rgba(0, 0, 0, .44);
  }
}

/* A seta aponta para o botão: ela vem de fora, para a esquerda, e balança na
   direção dele. Por isso o giro de 180° — o ícone `seta` aponta para a direita,
   e aqui ela precisa empurrar o olho para dentro. */
.feed-sacar-seta {
  display: inline-grid;
  place-items: center;
  transform: rotate(180deg);
  animation: sacar-seta 1.9s ease-in-out infinite;
}

@keyframes sacar-seta {
  0%, 100% { transform: rotate(180deg) translateX(0); opacity: .85; }
  55%      { transform: rotate(180deg) translateX(4px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  /* Sem pulso e sem balanço. O que fica é o estado final, que já é o desenho
     completo: a seta apontando e o botão com o realce parado. A informação
     "dá para sacar, é por aqui" continua inteira. */
  .feed-sacar-chama,
  .feed-sacar-liberado,
  .feed-sacar-seta { animation: none; }
  .feed-sacar-chama {
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--marca) 42%, transparent),
                0 6px 18px rgba(0, 0, 0, .38);
  }
}

/* ------------------------------------------------------- a velocidade
   Um botão que cicla 1× → 1,25× → 1,5× → 1,75× e volta. Fica na mesma coluna de
   curtir e comentar porque é a mesma natureza: coisa que se faz NO vídeo, e não
   sobre o dinheiro.

   O número é o ícone. Não existe símbolo universal para velocidade — o
   "2×" de player é o próprio texto —, e um ícone inventado precisaria de
   legenda para significar algo. */
.feed-velocidade-txt {
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: #fff;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, .85);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}

/* Acelerado, o botão acende na cor da marca: é um estado que continua valendo
   enquanto a pessoa desliza pelo feed, e ela precisa lembrar que ligou. */
.feed-velocidade-viva .feed-velocidade-txt {
  color: var(--sobre-marca);
  background: var(--marca);
  border-color: var(--marca);
  box-shadow: 0 0 16px color-mix(in oklab, var(--marca) 55%, transparent);
}