/* TV Coiote Play — Comentários
 * Release: 2026.09.19-comentarios.1
 * ATENCAO: esta e a FONTE. plugin/build-comentarios.ps1 copia este arquivo para o Web/ do plugin.
 *
 * Estetica DA PLATAFORMA (dono: "a estetica do formulario e da exposicao deve ser baseada no padrao estetico da
 * plataforma * n confundir com a estetica dos radares"): as mesmas variaveis do tema (tvc-branding/branding.css) -
 * branco com transparencia sobre o fundo #101010, raio 16 nos controles e 8 na janela, tipografia herdada. Nada do
 * amarelo, das pilulas nem dos cartoes dos radares. Cada valor tem reserva, para o arquivo funcionar mesmo se o
 * tema nao tiver carregado.
 *
 * Nada aqui alcanca elemento nativo: todas as regras comecam por .tvcc-* (ou #tvccFolha).
 */

/* ---------------- botao na linha de acoes da ficha ----------------
   Mesmas medidas e cores dos botoes secundarios da ficha no tema (visto/favorito): altura 44, raio 16, borda
   branco-34, fundo branco-07, texto branco-62. Ele entra no fim da linha; no celular a linha ja e centralizada e
   quebra sozinha, entao o botao acompanha sem empurrar nada. */
.tvcc-botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  min-width: 46px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--coiote-white-34, rgba(255, 255, 255, 0.34));
  border-radius: var(--coiote-control-radius, 16px);
  background: var(--coiote-white-07, rgba(255, 255, 255, 0.07));
  color: var(--coiote-white-62, rgba(255, 255, 255, 0.62));
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 140ms ease, background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

/* entrada suave: a ficha do celular monta em etapas e o botao aparecia num piscar seco */
@keyframes tvcc-entra {
  from { opacity: 0; transform: translateY(2px); }
}

.tvcc-botao {
  animation: tvcc-entra 160ms ease-out;
}

.tvcc-botao:hover {
  border-color: var(--coiote-white-72, rgba(255, 255, 255, 0.72));
  background: var(--coiote-white-16, rgba(255, 255, 255, 0.16));
  color: var(--coiote-white-88, rgba(255, 255, 255, 0.88));
  transform: translateY(-1px);
}

.tvcc-botao:active {
  transform: scale(0.95);
}

.tvcc-botao svg {
  flex: none;
}

.tvcc-botao .tvcc-n {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--coiote-white-48, rgba(255, 255, 255, 0.48));
}

.tvcc-botao:hover .tvcc-n {
  color: inherit;
}

/* celular: so o balao e o numero (a linha de acoes e estreita; o nome volta no tablet/computador) */
@media (max-width: 599px) {
  .tvcc-botao {
    padding: 0 12px;
  }

  .tvcc-botao .tvcc-rotulo {
    display: none;
  }
}

/* ---------------- folha dos comentarios ----------------
   Celular: sobe de baixo, ocupando a largura toda. Computador: janela centrada. Em nenhum caso a ficha se mexe. */
.tvcc-fundo {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0, 0, 0, 0.62);
  animation: tvcc-surge 160ms ease-out;
}

.tvcc-janela {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 100%;
  max-height: 88vh;
  overflow: hidden;
  background: var(--tvc-menu-surface, #222);
  border: 1px solid var(--tvc-menu-border, rgba(255, 255, 255, 0.1));
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
  color: var(--coiote-white-88, rgba(255, 255, 255, 0.88));
  animation: tvcc-sobe 180ms ease-out;
}

@keyframes tvcc-surge {
  from { opacity: 0; }
}

@keyframes tvcc-sobe {
  from { transform: translateY(18px); }
}

@media (min-width: 700px) {
  .tvcc-fundo {
    align-items: center;
  }

  .tvcc-janela {
    width: min(700px, 92vw);
    max-height: 82vh;
    border: 1px solid var(--tvc-menu-border, rgba(255, 255, 255, 0.1));
    border-radius: var(--tvc-menu-radius, 8px);
  }
}

body.tvcc-travado {
  overflow: hidden;
}

/* cabecalho */
.tvcc-cab {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--coiote-white-10, rgba(255, 255, 255, 0.1));
}

.tvcc-cabTxt {
  min-width: 0;
  flex: 1;
}

.tvcc-cabTxt b {
  display: block;
  font-size: 1.05rem;
  font-weight: 600;
  color: #fff;
}

.tvcc-cabTxt small {
  display: block;
  margin-top: 2px;
  font-size: 0.78rem;
  color: var(--coiote-white-48, rgba(255, 255, 255, 0.48));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tvcc-fechar {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin: -2px -4px 0 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--coiote-white-58, rgba(255, 255, 255, 0.58));
  cursor: pointer;
}

.tvcc-fechar:hover {
  background: var(--coiote-white-10, rgba(255, 255, 255, 0.1));
  color: #fff;
}

/* lista */
.tvcc-corpo {
  flex: 1;
  min-height: 90px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 4px 16px 10px;
}

/* uma conversa termina onde a outra comeca: risco discreto e folga, para ninguem confundir o fim de um comentario
   com o comeco do proximo */
.tvcc-item + .tvcc-item {
  margin-top: 6px;
  padding-top: 4px;
  border-top: 1px solid var(--coiote-white-10, rgba(255, 255, 255, 0.1));
}

.tvcc-c {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 0 10px;
}

.tvcc-dentro {
  flex: 1;
  min-width: 0;
}

/* totem: a foto da conta num circulo (sem foto, a inicial). So identifica quem falou - nao e clicavel, nao abre
   perfil nenhum (dono: "nao deve existir uma aba de perfil como rede social"). */
.tvcc-totem {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-top: 1px;
  overflow: hidden;
  border-radius: 50%;
  background: var(--coiote-white-10, rgba(255, 255, 255, 0.1));
  color: var(--coiote-white-62, rgba(255, 255, 255, 0.62));
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  user-select: none;
}

.tvcc-totem img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tvcc-totem.vazio {
  background: var(--coiote-white-07, rgba(255, 255, 255, 0.07));
}

.tvcc-c.resp .tvcc-totem {
  width: 28px;
  height: 28px;
  font-size: 0.78rem;
}

.tvcc-quem {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.tvcc-quem b {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--coiote-white-88, rgba(255, 255, 255, 0.88));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tvcc-quem small {
  flex: none;
  font-size: 0.75rem;
  color: var(--coiote-white-38, rgba(255, 255, 255, 0.38));
}

.tvcc-texto {
  margin: 5px 0 0;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--coiote-white-78, rgba(255, 255, 255, 0.78));
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* lapide: tarja propria, para nao se confundir com o comentario de cima (dono: "ficou meio misturado") */
.tvcc-lapide {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  margin: 3px 0 0;
  padding: 7px 13px;
  border: 1px dashed var(--coiote-white-16, rgba(255, 255, 255, 0.16));
  border-radius: 999px;
  background: var(--coiote-white-07, rgba(255, 255, 255, 0.07));
  font-size: 0.85rem;
  font-style: italic;
  color: var(--coiote-white-38, rgba(255, 255, 255, 0.38));
}

.tvcc-lapide small {
  font-style: normal;
  font-size: 0.74rem;
  color: var(--coiote-white-28, rgba(255, 255, 255, 0.28));
}

.tvcc-acoes {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 7px;
}

.tvcc-link,
.tvcc-curtir {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--coiote-white-48, rgba(255, 255, 255, 0.48));
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.tvcc-link:hover,
.tvcc-curtir:hover {
  color: var(--coiote-white-88, rgba(255, 255, 255, 0.88));
}

.tvcc-curtir.curti {
  color: #fff;
}

.tvcc-curtir.curti svg {
  fill: currentColor;
}

.tvcc-curtir .tvcc-qtd {
  font-size: 0.78rem;
  font-weight: 700;
}

.tvcc-link.apagar:hover {
  color: #ff6b6b;
}

/* respostas: um nivel so, encostadas no comentario de cima */
.tvcc-respostas {
  margin: 0 0 6px 10px;
  padding-left: 12px;
  border-left: 1px solid var(--coiote-white-10, rgba(255, 255, 255, 0.1));
}

.tvcc-c.resp {
  padding: 8px 0 6px;
}

.tvcc-c.resp .tvcc-texto {
  font-size: 0.9rem;
}

.tvcc-vazio {
  padding: 34px 6px 28px;
  text-align: center;
}

.tvcc-vazio b {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: var(--coiote-white-88, rgba(255, 255, 255, 0.88));
}

.tvcc-vazio span {
  display: block;
  margin-top: 4px;
  font-size: 0.86rem;
  color: var(--coiote-white-48, rgba(255, 255, 255, 0.48));
}

.tvcc-carregando {
  padding: 34px 6px;
  text-align: center;
  font-size: 0.86rem;
  color: var(--coiote-white-48, rgba(255, 255, 255, 0.48));
}

/* formulario: o mesmo desenho dos campos da plataforma */
.tvcc-rodape {
  border-top: 1px solid var(--coiote-white-10, rgba(255, 255, 255, 0.1));
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--tvc-menu-surface, #222);
}

.tvcc-form {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.tvcc-form textarea {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  max-height: 180px;
  padding: 11px 12px;
  border: 1px solid var(--coiote-white-16, rgba(255, 255, 255, 0.16));
  border-radius: 12px;
  background: var(--coiote-white-07, rgba(255, 255, 255, 0.07));
  color: var(--coiote-white-88, rgba(255, 255, 255, 0.88));
  font: inherit;
  font-size: 0.95rem;
  line-height: 1.4;
  resize: none;
  overflow-y: auto;
}

.tvcc-form textarea::placeholder {
  color: var(--coiote-white-38, rgba(255, 255, 255, 0.38));
}

.tvcc-form textarea:focus {
  outline: none;
  border-color: var(--coiote-white-48, rgba(255, 255, 255, 0.48));
  background: var(--coiote-white-10, rgba(255, 255, 255, 0.1));
}

.tvcc-formAcoes {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  margin-top: 8px;
}

.tvcc-enviar {
  min-height: 40px;
  padding: 0 20px;
  border: 1px solid var(--coiote-white-92, rgba(255, 255, 255, 0.92));
  border-radius: var(--coiote-control-radius, 16px);
  background: var(--coiote-white-92, rgba(255, 255, 255, 0.92));
  color: #111;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 140ms ease, background-color 140ms ease;
}

.tvcc-enviar:hover {
  background: #fff;
  transform: translateY(-1px);
}

.tvcc-enviar:active {
  transform: scale(0.97);
}

.tvcc-form.enviando .tvcc-enviar,
.tvcc-form.enviando textarea {
  opacity: 0.55;
  pointer-events: none;
}

/* resposta: formulario menor, dentro do bloco */
.tvcc-respostas .tvcc-form {
  margin: 4px 0 10px;
}

.tvcc-respostas .tvcc-form textarea {
  min-height: 40px;
  font-size: 0.9rem;
}

.tvcc-aviso {
  padding: 6px 2px;
  font-size: 0.85rem;
  color: var(--coiote-white-48, rgba(255, 255, 255, 0.48));
}

.tvcc-erro {
  position: absolute;
  left: 50%;
  bottom: 86px;
  transform: translateX(-50%);
  max-width: 86%;
  padding: 10px 14px;
  border-radius: 10px;
  background: #3a2020;
  border: 1px solid rgba(255, 107, 107, 0.45);
  color: #ffdede;
  font-size: 0.85rem;
  text-align: center;
}

.tvcc-janela {
  position: relative;
}