/* Responsividade das telas custom do admin — evita itens vazando a borda no celular.
   (As páginas padrão do Unfold já são responsivas; aqui tratamos o CSS próprio.) */

@media (max-width: 820px) {
  /* ---- Cadastro de cliente/sessão: larguras fixas (rem) viram fluidas ----
     !important para vencer o cadastro.css (mesma especificidade, carrega depois). */
  .cad-tel { flex-wrap: wrap; }
  .cad-tel > div,
  .cad-tel > div:nth-child(1),
  .cad-tel > div:nth-child(2) { width: 100% !important; max-width: 100% !important; }

  .cad-end__row { flex-direction: column; align-items: stretch; }
  .cad-end__lbl, .cad-end__lbl--first { width: auto !important; margin-left: 0 !important; }
  .cad-end__fld > div,
  .cad-fld--cep > div, .cad-fld--rua > div, .cad-fld--num > div,
  .cad-fld--comp > div, .cad-fld--bai > div, .cad-fld--cid > div,
  .cad-fld--est > div { width: 100% !important; max-width: 100% !important; }

  .change-form.model-cliente .field-nome .max-w-2xl.relative,
  .change-form.model-cliente .field-nome,
  .field-cpf .max-w-2xl.relative { width: 100% !important; max-width: 100% !important; }

  .change-form.model-cliente #content-main > form,
  .change-form.model-sessao #content-main > form,
  .change-form.model-cliente #submit-row .container,
  .change-form.model-sessao #submit-row .container { max-width: 100% !important; }

  /* Colunas (boxes/chat) empilham e não forçam largura mínima */
  .cli-side, .conv-side, .conv-main {
    flex-basis: 100% !important; min-width: 0 !important; max-width: 100% !important;
  }

  /* Linhas de inputs lado a lado (validar contrato, painel) empilham */
  .vc-row { flex-direction: column; align-items: stretch; }
  .vc-field, .vc-field input { width: 100% !important; min-width: 0 !important; }
}

/* ---- Geral: conteúdos longos quebram em vez de estourar a borda ---- */
.vc-hash, .conv-msg, .conv-chat, .sessao-li { overflow-wrap: anywhere; }
img, pre { max-width: 100%; }