/*
 * Estilo SO da pagina /debug/ (o mesmo da antiga tela de JSON da
 * /atendimento/). Quase tudo vem do plataforma.css (.card, .status-row,
 * .badge, .output). Nenhuma cor e escrita aqui.
 */

.consulta {
  margin-bottom: 16px;
  padding: 14px 16px;
  background: var(--superficie-funda);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
}

/* O label do plataforma.css vira titulo de secao: o h2 so da a estrutura
   para leitor de tela, o tamanho continua o do rotulo. */
.consulta .label { margin: 0; }

.consulta .status-row {
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 10px;
}

/* O JSON do atendimento traz as mensagens embutidas e passa facil de mil
   linhas. Os 320px do plataforma.css sao para diagnostico curto; aqui o JSON
   E o conteudo. */
.consulta .output {
  max-height: 70vh;
  color: var(--texto);
}

.consulta .output:empty { display: none; }

/* No celular, a margem do body mais o padding do cartao comem um terco da
   largura — justo numa tela que mostra JSON, que ja quebra linha demais. */
@media (max-width: 560px) {
  body { padding: 12px 8px; }
  .card { padding: 18px 14px 16px; }
}

/* O link da sala e a razao da pagina: vem antes de tudo, grande o bastante
   para o polegar, e quebra linha — a URL tem um segredo longo no fragmento, e
   cortada ela nao abre. */
.sala__link {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 600;
  word-break: break-all;
}

.sala__link a { color: var(--amber-texto); }

.sala__expira {
  display: block;
  margin-top: 4px;
  color: var(--texto-fraco);
  font-size: 13px;
  font-weight: 400;
}