/* Story na logo do grupo, no estilo do WhatsApp.
   Antes esse CSS existia em dois lugares ao mesmo tempo: um <style> no <head> do
   index.html e uma string concatenada dentro do proprio story.js, que injetava
   uma segunda copia identica em tempo de execucao. Agora mora so aqui.

   A ordem das regras foi preservada exatamente como estava. */

.st-anel{
  padding:4px;
  border-radius:50%;
  background:#25D366;
  display:inline-flex;
  /* O halo da volta sai suave em vez de apagar de uma vez. */
  cursor:pointer;
  position:relative;
  transition:transform .15s, box-shadow .4s;
}

.st-anel:active{transform:scale(.94)}

.st-anel.visto{background:#c9ccd1}

.st-anel::after{
  content:"";
  position:absolute;
  inset:-3px;
  border-radius:50%;
  border:2px solid rgba(37,211,102,.45);
  animation:stPulso 2s ease-out infinite;
}

.st-anel.visto::after{display:none}

/* Ao surgir, um brilho da uma volta completa no anel antes de comecar a
   pulsar. O angulo precisa ser declarado como propriedade tipada, senao o
   navegador troca o valor de uma vez em vez de percorrer os 360 graus. */
@property --stAng{syntax:"<angle>";initial-value:0deg;inherits:false}

@keyframes stVolta{from{--stAng:0deg}to{--stAng:360deg}}

.st-anel.girando{
  animation:stVolta 1.2s linear;
  box-shadow:0 0 10px rgba(37,211,102,.75);
  background:conic-gradient(from var(--stAng),
    #25D366 0deg,#fff 18deg,#c8ffdd 40deg,#25D366 85deg,#25D366 360deg);
}

/* Enquanto da a volta, o pulso fica parado - as duas animacoes juntas
   embolavam a leitura. Ele entra assim que a volta termina. */
.st-anel.girando::after{animation:none;opacity:0}

/* A logo do topo vem com borda branca e sombra proprias do site. Dentro do
   anel isso virava uma folga que sumia com o verde e deixava o anel fino e
   descolado - diferente da logo do modal, que nao tem borda. Zerar aqui faz
   o verde encostar na logo nas duas telas. */
.st-anel > *{border-width:0 !important;box-shadow:none !important}

/* Precisa ser mais especifico que a regra .st-topo img, senao o selo
   herda os 36px da logo do cabecalho. */
.st-topo .st-selo{width:15px;height:15px;border-radius:0;background:none;flex-shrink:0}

@keyframes stPulso{
  0%{transform:scale(1);opacity:.8}
  70%{transform:scale(1.14);opacity:0}
  100%{opacity:0}
}

.st-tela{
  position:fixed;
  inset:0;
  background:#000;
  z-index:99999;
  display:flex;
  flex-direction:column;
  animation:stEntra .18s ease-out;
}

@keyframes stEntra{from{opacity:0}to{opacity:1}}

.st-barra{height:3px;background:rgba(255,255,255,.35);margin:10px 12px 0;border-radius:2px;overflow:hidden}
.st-barra i{display:block;height:100%;width:0;background:#fff;border-radius:2px}

.st-topo{display:flex;align-items:center;gap:10px;padding:10px 14px;color:#fff}
.st-topo img{width:36px;height:36px;border-radius:50%;object-fit:contain;background:#000;flex-shrink:0}

.st-nome{
  font-family:Roboto,Helvetica,Arial,sans-serif;
  font-size:14px;
  font-weight:600;
  line-height:1.2;
  display:flex;
  align-items:center;
  gap:5px;
}

.st-quando{font-family:Roboto,Helvetica,Arial,sans-serif;font-size:12px;opacity:.75}

.st-fechar{
  margin-left:auto;
  background:none;
  border:none;
  color:#fff;
  font-size:28px;
  line-height:1;
  cursor:pointer;
  padding:0 4px;
}

.st-video{flex:1;width:100%;object-fit:contain;background:#000;min-height:0}

.st-pausado{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:56px;
  pointer-events:none;
  opacity:0;
  transition:opacity .15s;
}

.st-pausado.on{opacity:.9}
