/* Camada comunitária: números no card, painel de saúde, comentários, chat e conta.
   Folha própria porque `app.css` já bate no teto de tamanho do workspace — e porque isto é um
   assunto só, que se liga e desliga inteiro. Cores saem das variáveis do tema (`app.css`): hex
   solto aqui é o que faz o modo escuro quebrar sem ninguém perceber. */

/* ── números e ações no card ─────────────────────────────────────────────────────────────── */

.channel-social {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .2rem;
  margin-top: .2rem;
  padding-top: 0;
  font-size: .72rem;
  color: var(--grade-mute);
}
.channel-cell .channel-social {
  flex-wrap: nowrap;
  min-width: 0;
  margin-top: auto;
  padding-top: .2rem;
}
.channel-cell .social-nome { display: none; }
.watch-ficha .social-nome { display: inline; }
.channel-social .silk { width: 14px; height: 14px; }
.social-chip,
.watch-chat {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .08rem .3rem;
  border: 1px solid var(--grade-rule);
  border-radius: .2rem;
  background: var(--grade-cell);
  color: inherit;
  font: inherit;
  font-size: .7rem;
  line-height: 1.2;
  white-space: nowrap;
}
.channel-cell .social-chip {
  flex: 0 0 auto;
  justify-content: center;
  min-width: 0;
  padding: .08rem .28rem;
}
button.social-chip,
.watch-chat {
  cursor: pointer;
}
.social-chip.social-n,
.social-chip.social-watching { cursor: default; }
.social-nome { font-weight: 600; }
.social-badge {
  font-variant-numeric: tabular-nums;
  font-weight: 650;
}
.social-fav:hover,
.social-com:hover,
.watch-chat:hover,
.social-alerta:hover { background: var(--grade-hover); }
.social-fav:focus-visible,
.social-com:focus-visible,
.watch-chat:focus-visible,
.social-alerta:focus-visible { outline: 2px solid var(--grade-ink); outline-offset: 1px; }
.social-fav.is-on { color: #c62828; font-weight: 650; }
[data-bs-theme="dark"] .social-fav.is-on { color: #ff8a80; }
.social-alerta {
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  border: 0;
  background: transparent;
  color: inherit;
  padding: .15rem .25rem;
  border-radius: .2rem;
  cursor: pointer;
  line-height: 1;
}

/* Alerta: texto + cor + ícone. Só cor não passa (leitor de tela e daltonismo). */
.social-alerta {
  margin-left: auto;
  font-weight: 650;
  white-space: nowrap;
}
.social-alerta.is-seu { color: #b3261e; }
.social-alerta.is-ruim { color: #b3261e; }
.social-alerta.is-atencao { color: #8a6100; }
[data-bs-theme="dark"] .social-alerta.is-seu,
[data-bs-theme="dark"] .social-alerta.is-ruim { color: #ff8a80; }
[data-bs-theme="dark"] .social-alerta.is-atencao { color: #ffcc80; }

/* Dentro do player o fundo é preto: os mesmos chips, contraste próprio. */
.watch-ficha .channel-social {
  margin: 0;
  padding: 0;
  color: #cfcfcf;
}
.watch-ficha .social-chip,
.watch-ficha .watch-chat {
  border-color: #2e2e2e;
  background: #1a1a1a;
  color: #c8c8c8;
}
.watch-ficha .social-fav:hover,
.watch-ficha .social-com:hover,
.watch-ficha .watch-chat:hover,
.watch-ficha .social-alerta:hover { background: #262626; }

/* ── painel de saúde ─────────────────────────────────────────────────────────────────────── */

.saude-eu {
  padding: .6rem .75rem;
  border-left: 3px solid currentColor;
  background: var(--bs-tertiary-bg);
  margin-bottom: .75rem;
}
.saude-eu.is-bom { color: #1b5e20; }
.saude-eu.is-atencao { color: #8a6100; }
.saude-eu.is-ruim { color: #b3261e; }
.saude-eu.is-neutro { color: var(--grade-mute); }
[data-bs-theme="dark"] .saude-eu.is-bom { color: #a5d6a7; }
[data-bs-theme="dark"] .saude-eu.is-atencao { color: #ffcc80; }
[data-bs-theme="dark"] .saude-eu.is-ruim { color: #ff8a80; }

.saude-selos {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: .5rem;
}
.saude-selo {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .2rem .5rem;
  border: 1px solid var(--bs-border-color);
  border-radius: .25rem;
  font-size: .8rem;
}
.saude-selo.is-bom { border-color: #2e7d32; }
.saude-selo.is-atencao { border-color: #b78103; }
.saude-selo.is-ruim { border-color: #b3261e; }

.saude-motivos { list-style: none; padding: 0; margin: 0; }
.saude-motivos li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0 .5rem;
  padding: .4rem 0;
  border-bottom: 1px solid var(--bs-border-color);
}
.saude-motivo { display: inline-flex; align-items: center; gap: .3rem; font-weight: 600; }
.saude-motivo-n { text-align: right; color: var(--grade-mute); }
.saude-dica {
  grid-column: 1 / -1;
  font-size: .82rem;
  color: var(--grade-mute);
}
.saude-tabela tr.is-eu { font-weight: 650; background: var(--bs-tertiary-bg); }

/* ── comentários ─────────────────────────────────────────────────────────────────────────── */

.coment-form { margin-bottom: 1rem; }
.coment-form-baixo {
  display: flex;
  gap: .5rem;
  margin-top: .5rem;
  align-items: center;
}
.coment-apelido { max-width: 14rem; }
.coment-lista { list-style: none; padding: 0; margin: 0; }
.coment-item {
  padding: .6rem 0;
  border-top: 1px solid var(--bs-border-color);
}
.coment-item.is-meu { background: var(--bs-tertiary-bg); padding-inline: .5rem; }
.coment-topo {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .8rem;
  color: var(--grade-mute);
}
.coment-autor { display: inline-flex; align-items: center; gap: .25rem; font-weight: 650; color: var(--bs-body-color); }
.coment-quando { margin-right: auto; }
.coment-del { padding: .05rem .3rem; line-height: 1; }
.coment-corpo { margin: .25rem 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }

/* ── chat ao lado do player ──────────────────────────────────────────────────────────────── */

.player-palco {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
}
.player-palco .player-box { flex: 1 1 auto; min-width: 0; }
.chat-caixa {
  flex: 0 0 20rem;
  max-width: 20rem;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: #111;
  border-left: 1px solid #2a2a2a;
  color: #ddd;
}
.chat-caixa[hidden] { display: none; }
.chat-topo {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem .5rem;
  border-bottom: 1px solid #2a2a2a;
  font-size: .85rem;
}
.chat-titulo { display: inline-flex; align-items: center; gap: .3rem; font-weight: 650; }
.chat-topo .btn { margin-left: auto; padding: .1rem .35rem; line-height: 1; }
.chat-lista {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: .4rem .5rem;
  font-size: .85rem;
  overflow-wrap: anywhere;
}
.chat-linha { padding: .15rem 0; }
.chat-autor { font-weight: 650; color: #9fd0ff; margin-right: .35rem; }
.chat-vazio { color: #8a8a8a; font-size: .85rem; }
.chat-estado {
  margin: 0;
  padding: .2rem .5rem;
  font-size: .72rem;
  color: #9a9a9a;
}
.chat-estado.is-ok { color: #a5d6a7; }
.chat-estado.is-aviso { color: #ffcc80; }
.chat-estado.is-erro { color: #ff8a80; }
.chat-form {
  display: flex;
  gap: .35rem;
  padding: .4rem .5rem;
  border-top: 1px solid #2a2a2a;
}
.chat-form input { flex: 1 1 auto; min-width: 0; }

/* ── conta ───────────────────────────────────────────────────────────────────────────────── */

#conta-btn.is-on { font-weight: 650; }
.conta-recado {
  padding: .5rem .7rem;
  background: var(--bs-tertiary-bg);
  border-left: 3px solid #2e7d32;
}
.conta-numeros { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .75rem; }
.conta-numeros li { display: inline-flex; align-items: center; gap: .3rem; }

/* Mobile: o chat vira faixa embaixo do vídeo — 20rem ao lado num telefone não sobra vídeo.
   Ver AGENTS.md do produto § 17: a régua é `minmax(0, 1fr)`, nunca `1fr` puro. */
@media (max-width: 60rem) {
  .player-palco { flex-direction: column; }
  .chat-caixa {
    flex: 0 0 auto;
    max-width: none;
    width: 100%;
    max-height: 40vh;
    border-left: 0;
    border-top: 1px solid #2a2a2a;
  }
  .coment-form-baixo { flex-wrap: wrap; }
  .coment-apelido { max-width: none; }
}