/*
 * Como uma mensagem de chat se parece.
 *
 * Este arquivo é dos DOIS lugares que mostram chat: a tela do painel e a fonte
 * do OBS. Está separado de styles.css pelo mesmo motivo que render.js está
 * separado da view — quem modera pelo painel decide sobre o que o público lê no
 * overlay, e uma mensagem que parece diferente nos dois é uma decisão tomada
 * sobre a tela errada.
 *
 * O que é específico de cada lado (a caixa rolável e os botões do painel; o
 * fundo transparente e o sumiço das linhas no overlay) mora na folha de lá.
 */

/*
 * Fluxo INLINE, não flex.
 *
 * Com flex, uma mensagem que não cabe numa linha empurra o texto inteiro para
 * a linha de baixo, e o chat vira uma escada de apelidos com o texto sempre
 * embaixo. Inline é como todo chat se comporta: o texto começa ao lado do
 * apelido e escorre para a linha seguinte quando acaba o espaço.
 */
.chat-msg {
  display: block;
  padding: 3px 8px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.chat-hora {
  font-variant-numeric: tabular-nums;
  font-size: 0.82em;
  opacity: 0.5;
  margin-right: 5px;
}

/* A marca de origem: uma letra, não um logotipo. Numa lista de trezentas linhas
   o que importa é distinguir de relance, e um ícone colorido por linha vira
   ruído — a cor do apelido já é o elemento que salta. */
.chat-plat {
  display: inline-flex; align-items: center; justify-content: center;
  margin-right: 5px; vertical-align: -0.15em; opacity: 0.85;
}
/* Cores oficiais de cada marca — o SVG usa fill:currentColor, então herda daqui. */
.chat-plat.twitch { color: #9146ff; }
.chat-plat.kick { color: #53fc18; }
.chat-plat.youtube { color: #ff0000; }

.chat-plat-svg { width: 1em; height: 1em; display: block; }
/* O favicon da Cinefy é quadrado com cantos retos; arredondar aqui é só
   estética — combina com o círculo dos selos ao lado. */
.chat-plat-img { width: 1em; height: 1em; border-radius: 3px; display: block; }

.chat-selos {
  display: inline-flex; align-items: center; gap: 3px;
  vertical-align: -0.15em; margin-right: 4px;
}
.chat-selo { height: 1.15em; width: auto; vertical-align: middle; }

/* Selo capturado: o círculo é nosso (a Cinefy não revelou a forma exata do
   chip, só o ícone e a cor de dentro dele); o ícone e a cor de fundo são os
   dela, copiados byte a byte do devtools — ver src/services/chat/mensagem.js. */
.chat-selo-fundo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.15em; height: 1.15em; border-radius: 50%; vertical-align: middle;
  flex: none; color: #fff;
}
.chat-selo-icone { width: 62%; height: 62%; display: block; }

.chat-selo-txt {
  font-size: 0.7em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
  padding: 1px 5px; border-radius: 4px;
  background: #ffffff1f;
}

.chat-nick {
  font-weight: 700;
  /* No painel o apelido é um <button>; aqui ele deixa de parecer um. */
  background: none; border: none; padding: 0; font-size: inherit; font-family: inherit;
}
button.chat-nick { cursor: pointer; }
button.chat-nick:hover { text-decoration: underline; }

.chat-sep { opacity: 0.45; margin-right: 5px; }

.chat-emote {
  height: 1.7em; width: auto; vertical-align: middle; margin: -0.2em 1px;
}

/* Emote de largura zero empilha sobre o anterior: o "chapéu" fica na cabeça do
   emote de antes, e não do lado dele. */
.chat-pilha { position: relative; display: inline-block; }
.chat-pilha .chat-emote.zero {
  position: absolute; left: 0; top: 0; margin: -0.2em 0;
}

/* Apagada não some da tela de quem modera: some da de quem assiste. Ver a
   mensagem riscada é metade do trabalho de decidir o que fazer com a pessoa. */
.chat-msg.apagada .chat-texto { text-decoration: line-through; opacity: 0.45; }
.chat-msg.apagada .chat-emote { filter: grayscale(1); opacity: 0.5; }