/* app/assets/stylesheets/redes_sociais.css
   Instagram e Facebook (spec 2026-09-29-redes-sociais, secao 7), com a cara
   da inbox do WhatsApp: as telas usam as MESMAS classes de conversas.css
   (.conversas__*, .conversa__*) e herdam os refinamentos de z_refinamento.css.
   Aqui so o que o WhatsApp nao tem -- previa no cartao, selo de janela em
   tres tons, comentario como cartao, anexo de foto, aviso de DM fechada --
   com prefixo `redes__` e so tokens --bc-* (o modo escuro vem de graca).
   Nada daqui toca o Suporte (suporte.css) nem a inbox do WhatsApp: toda
   regra que mexe numa classe compartilhada e escopada por `.redes`. */

/* ── lista ────────────────────────────────────────────────────────────── */

.redes__item-previa {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-width: 0;
  color: var(--bc-ink-soft);
  font-size: .8rem;
}

.redes .conversas__item-atendente { font-size: .72rem; color: var(--bc-ink-faint); }
.painel .redes .conversas__item-corpo { gap: 5px; }
.redes .conversas__busca-campo::-webkit-search-cancel-button { cursor: pointer; }

/* ── selo da janela no cabecalho ──────────────────────────────────────────
   Base: .conversa__janela (livre = verde de z_refinamento; fechada =
   .conversa__janela--fechada, o bege do "Janela fechada" do WhatsApp).
   Humana e atencao: o mesmo tom, so contornado, para nao se confundir com
   a fechada. Especificidade acima da de z_refinamento de proposito. */
.painel .conversa__janela.redes__janela--humana {
  color: var(--bc-warn);
  background: var(--bc-surface);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bc-warn) 45%, transparent);
}

.redes .conversa__topo-telefone { font-family: var(--bc-fonte); }

/* button_to embrulha o botao num <form>; ele nao pode esticar no topo. */
.redes__encerrar-form { display: contents; }

/* ── fio ──────────────────────────────────────────────────────────────── */

/* O `id` que os broadcasts miram embrulha separador + bolha; `contents`
   deixa os dois como filhos do flex de .conversa__mensagens. */
.redes__item { display: contents; }

.redes__bolha-rotulo {
  margin: 0;
  color: color-mix(in oklab, currentColor 70%, transparent);
  font-size: .72rem; font-weight: 700;
}

.redes__bolha-rotulo a { color: inherit; }

.redes__bolha-autor {
  color: color-mix(in oklab, currentColor 65%, transparent);
  font-size: .7rem; font-weight: 600;
}

.redes__aviso {
  margin: .15rem 0 0;
  color: var(--bc-ink-mut);
  font-size: .75rem;
}

.redes__aviso--erro { color: var(--bc-danger); font-weight: 700; }

/* Mensagem que o cliente apagou (secao 4.7 do desenho de 19/10): so o
   aviso, em italico e apagado, no lugar do que ele tinha mandado. */
.redes__apagada {
  color: color-mix(in oklab, currentColor 60%, transparent);
  font-style: italic;
}

/* Comentario de post: cartao dentro do fio, do lado do cliente, com
   contorno tracejado para nao ser lido como mensagem direta. */
.redes__comentario {
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  width: min(100%, 26rem);
  max-width: 87%;
  padding: 12px 14px;
  color: var(--bc-ink);
  background: var(--bc-surface);
  border: 1px dashed var(--bc-line);
  border-radius: 13px;
  border-bottom-left-radius: 3px;
  font-size: .875rem;
  line-height: 1.5;
}

.redes__comentario-topo {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  font-size: .72rem;
}

.redes__comentario-rotulo {
  color: var(--bc-primary);
  font-weight: 700; letter-spacing: .02em;
}

.redes__comentario-link { color: var(--bc-ink-mut); }

.redes__comentario-topo .conversa__bolha-hora { margin-left: auto; }

.redes__comentario-form {
  display: grid;
  gap: .45rem;
  margin-top: .3rem;
  padding-top: .6rem;
  border-top: 1px solid var(--bc-line-soft);
}

.redes__comentario-campo {
  resize: vertical;
  min-height: 2.3rem;
  padding: .45rem .6rem;
  color: var(--bc-ink);
  background: var(--bc-bg);
  border: 1px solid var(--bc-line);
  border-radius: 8px;
  font: inherit;
  font-size: .82rem;
  field-sizing: content;
}

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

.redes__comentario-botoes { display: flex; gap: .4rem; flex-wrap: wrap; }

/* No toque os dois botoes eram de 28 px e ficavam colados (achado de UI/UX, 09/11/2026): responder no post por engano e publico. */
@media (pointer: coarse) {
  .redes__comentario-botoes { gap: .75rem; }
  .redes__botao { min-height: 2.6rem; padding: .5rem 1rem; }
}

.redes__botao {
  padding: .4rem .8rem;
  color: var(--bc-ink);
  background: var(--bc-surface-2);
  border: 1px solid var(--bc-line);
  border-radius: 999px;
  font: inherit;
  font-size: .78rem; font-weight: 600;
  cursor: pointer;
}

.redes__botao:hover { background: var(--bc-line-soft); }

.redes__botao--primario,
.redes__botao--primario:hover {
  color: var(--bc-primary-ink);
  background: var(--bc-primary);
  border-color: var(--bc-primary);
}

/* ── composer ─────────────────────────────────────────────────────────── */

.redes__composer-dono {
  margin: 0 0 .6rem;
  color: var(--bc-warn);
  font-size: .82rem; font-weight: 700;
}

/* O fieldset so existe para travar tudo com `disabled`; herda o papel de
   linha flex de .conversa__formulario (clipe | campo | Enviar), e a previa
   da foto quebra para uma linha propria em cima. */
.redes__composer-campos {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: .6rem;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.redes__composer-campos[disabled] { opacity: .55; }
.redes__composer-campos .conversa__campo-texto { flex: 1 1 12rem; min-width: 0; }

.redes__anexo {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 38px; height: 38px;
  color: var(--bc-ink-mut);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}

.redes__anexo:hover { color: var(--bc-ink); background: var(--bc-surface-2); }
.redes__anexo:has(input:focus-visible) { outline: 2px solid var(--bc-focus); outline-offset: 1px; }
.redes__composer-campos[disabled] .redes__anexo { cursor: not-allowed; }
.redes__anexo svg { width: 20px; height: 20px; }

.redes__oculto {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.redes__anexo-previa {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex: 1 0 100%;
  min-width: 0;
  padding: .4rem;
  background: var(--bc-surface-2);
  border: 1px solid var(--bc-line-soft);
  border-radius: 10px;
}

.redes__anexo-previa[hidden] { display: none; }

.redes__anexo-rotulo {
  flex: 0 0 auto;
  color: var(--bc-ink-mut);
  font-size: .82rem;
  font-weight: 600;
}

.redes__anexo-nome {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--bc-ink);
  font-size: .82rem;
}

.redes__anexo-remover {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 30px; height: 30px;
  padding: 0;
  color: var(--bc-ink-mut);
  background: none;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}

.redes__anexo-remover:hover { color: var(--bc-ink); background: var(--bc-line-soft); }
.redes__anexo-remover svg { width: 16px; height: 16px; }

/* DM fechada: no lugar do composer, o mesmo bege de alerta do selo. */
.redes__aviso-janela {
  flex: 0 0 auto;
  margin: 14px 18px 18px;
  padding: 12px 14px;
  color: var(--bc-warn);
  background: color-mix(in srgb, var(--bc-warn) 12%, var(--bc-surface));
  border: 1px solid color-mix(in srgb, var(--bc-warn) 30%, transparent);
  border-radius: 10px;
  font-size: .85rem; font-weight: 600;
  line-height: 1.45;
}

/* ── painel de detalhes ───────────────────────────────────────────────── */

.redes__assumir { margin-top: 14px; }

.redes__janela-cartao--humana,
.redes__janela-cartao--fechada {
  color: var(--bc-warn);
  background: color-mix(in srgb, var(--bc-warn) 10%, var(--bc-surface));
  border-color: color-mix(in srgb, var(--bc-warn) 30%, transparent);
}

/* ── conexao com o Facebook (Configuracoes -> Redes sociais) ────────────
   Spec 2026-10-19-redes-sociais-producao-design, secoes 4.13 e 4.14: a tela
   de escolher as Paginas depois do login e o aviso de "precisa reconectar"
   na conversa. */
.redes__conexao-dica { margin: .6rem 0 0; max-width: 46rem; }
/* O endereco de retorno e a ultima linha antes da tabela (ou do "nenhuma
   rede"): sem esta folga, os dois encostavam. */
.redes__conexao-dica--retorno { margin-bottom: 1.5rem; }

/* "Editar" e "Desconectar" na mesma linha da tabela, como as acoes das
   outras tabelas do painel (o `button_to` e um <form> de bloco). */
.redes__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; }
.redes__acoes form { margin: 0; }
.redes__acoes .templates__atualizar { margin-left: 0; }

.redes__paginas { gap: 1.2rem; }

.redes__pagina {
  display: grid; gap: .9rem;
  margin: 0; padding: 1rem 1.1rem;
  border: 1px solid var(--bc-line);
  border-radius: var(--bc-raio);
}

.redes__pagina-titulo { padding: 0 .35rem; font-weight: 700; color: var(--bc-ink); }
.redes__pagina-titulo label { display: inline-flex; gap: .5rem; align-items: center; cursor: pointer; }

/* Mesmo desenho do aviso de janela fechada, no tom de erro: nada sai ate
   um admin reconectar. */
.redes__aviso-reconectar {
  flex: 0 0 auto;
  margin: 14px 18px 0;
  padding: 12px 14px;
  color: var(--bc-danger);
  background: color-mix(in srgb, var(--bc-danger) 10%, var(--bc-surface));
  border: 1px solid color-mix(in srgb, var(--bc-danger) 30%, transparent);
  border-radius: 10px;
  font-size: .85rem; font-weight: 600;
  line-height: 1.45;
}

/* ── celular ──────────────────────────────────────────────────────────────
   A troca lista <-> conversa e a mesma do WhatsApp (conversas.css,
   `.conversas:has(.conversa)`). O que muda: o painel de detalhes vai para
   BAIXO da conversa em vez de sumir -- e onde o admin acha "Assumir". */
@media (max-width: 760px) {
  .redes .conversa__corpo { display: block; overflow-y: auto; }
  .redes .conversa__thread { height: 100%; border-right: 0; }
  .redes .conversa__contato { display: flex; overflow: visible; border-top: 1px solid var(--bc-line); }
  .redes .conversa__topo-identidade { flex-basis: 8rem; }
  .redes__aviso-janela { margin: 12px; }
  .redes__aviso-reconectar { margin: 12px 12px 0; }
}