/*
 * Estilo compartilhado por TODAS as extensoes da plataforma.
 *
 * Mora em /shared/ porque e byte-identico entre extensoes. O que for
 * especifico de uma extensao vai no CSS dela, nunca aqui: este arquivo e
 * carregado por todas, entao uma regra "so para a export-contact" escrita
 * aqui vaza para as outras e o sintoma aparece na extensao errada.
 *
 * Sem build, sem npm, sem framework — a casa inteira e assim.
 */

:root {
  /* Tom CLARO. A extensao abre dentro do AmberChat, que e claro: um painel
     escuro por cima de uma tela clara le como "outro sistema", nao como parte
     do mesmo. */

  /* Marca. O ambar so aparece como FUNDO ou como filete — nunca como texto:
     #f0a92b sobre branco da 2.0:1 de contraste, metade do minimo para texto.
     Quando a cor da marca precisar virar palavra, use --amber-texto. */
  --amber:        #f0a92b;
  --amber-claro:  #ffce6a;
  --amber-escuro: #966012;
  --amber-texto:  #8a5a06;   /* 5.9:1 sobre branco */

  --fundo:            #eef0f4;
  --superficie:       #ffffff;
  --superficie-funda: #eef1f5;   /* painel afundado: <pre>, cartao, controles */
  --borda:            #dfe3e8;
  --borda-forte:      #c6ccd5;

  /* Medidos sobre --superficie e sobre --superficie-funda; o pior caso de cada
     um passa de 4.5:1, o minimo do WCAG para texto normal. */
  --texto:        #1c2128;   /* 16.2:1 */
  --texto-fraco:  #5a6472;   /*  6.0:1 */

  --ok:           #177334;   /*  5.9:1 sobre branco, 5.2:1 sobre o painel */
  --erro:         #b42318;   /*  6.6:1 */

  --sombra:       0 6px 20px rgba(16, 24, 40, .14);

  /* Texto sobre o ambar da marca (botao primario): 9.2:1. */
  --sobre-amber:  #1a1204;

  --raio:         10px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 32px 20px;
  background: var(--fundo);
  color: var(--texto);
  font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
}

/* Em tema claro o cartao branco quase nao contrasta com o fundo cinza-claro
   (1,1:1 — e assim em toda UI clara). Quem separa os dois e a borda mais a
   sombra, nao o preenchimento. Sem a sombra, o cartao "derrete" no fundo em
   monitor de brilho baixo. */
.card {
  max-width: 720px;
  margin: 0 auto;
  padding: 28px 30px 24px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: 0 1px 3px rgba(16, 24, 40, .07);
}

/*
 * Pagina que PREENCHE o contêiner que a hospeda — use em extensao aberta como
 * modal (`REGISTRO.abertura: "modal"`).
 *
 * O modal do AmberChat ja e uma caixa com titulo, moldura e sombra. Repetir
 * cartao, borda e max-width la dentro e moldura sobre moldura: sobra faixa
 * cinza dos dois lados enquanto o conteudo se espreme numa coluna no meio, e a
 * tela parece pequena dentro de um modal grande.
 *
 * Os 99% (e nao 100%) deixam um fio de respiro nas bordas: conteudo colado na
 * moldura do modal le como corte, nao como preenchimento.
 */
body.preenche {
  padding: 0;
  /* O modal vira uma folha unica e branca. Os blocos afundados
     (--superficie-funda) continuam separando as secoes. */
  background: var(--superficie);
}

body.preenche > .card {
  width: 99%;
  max-width: none;
  margin: 0 auto;
  padding: 18px 20px 24px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* 99% do topo: o fio de respiro de cima e a primeira coisa que se ve. */
body.preenche { padding-top: .5vh; }

.eyebrow {
  margin: 0 0 6px;
  color: var(--amber-texto);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

h1 {
  margin: 0 0 12px;
  font-size: 24px;
  font-weight: 600;
}

.lead {
  margin: 0 0 22px;
  color: var(--texto-fraco);
}

.lead strong { color: var(--texto); font-weight: 600; }

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

.status-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.label {
  color: var(--texto-fraco);
  font-size: 13px;
  font-weight: 600;
}

.badge {
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.badge--loading { background: var(--superficie-funda); color: var(--texto-fraco); }
.badge--ok      { background: rgba(26,127,55,.12);   color: var(--ok);    }
.badge--err     { background: rgba(180,35,24,.10);   color: var(--erro);  }

/* O <pre> guarda diagnostico: precisa quebrar linha, porque URL e JSON
   estouram a largura e rolagem horizontal esconde justamente a ponta do
   texto que interessa. */
.output {
  margin: 0;
  max-height: 320px;
  overflow-y: auto;
  color: var(--texto-fraco);
  font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre-wrap;
  word-break: break-word;
}

.foot {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--borda);
  color: var(--texto-fraco);
  font-size: 12px;
}

.lista { margin: 0; padding: 0; list-style: none; }

.lista a {
  display: block;
  padding: 12px 14px;
  margin-bottom: 8px;
  background: var(--superficie-funda);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  color: var(--texto);
  text-decoration: none;
}

.lista a:hover { border-color: var(--amber); }
.lista .sub { display: block; color: var(--texto-fraco); font-size: 12px; }

/* ------------------------------------------------------------------ *
 * Vocabulario que o shared/ui.js emite.
 *
 * Mora aqui, e nao no CSS de uma extensao, porque quem gera estas classes e
 * o ui.js — que toda extensao carrega. Deixa-las no estilo.css da
 * export-contact faria o toast e o modal da SEGUNDA extensao nascerem sem
 * estilo nenhum, e o sintoma (botao invisivel, modal transparente) nao
 * apontaria para a causa.
 * ------------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 16px;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio);
  background: var(--superficie);
  color: var(--texto);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}

.btn:hover:not(:disabled) { border-color: var(--amber); }

.btn:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}

/* Botao desabilitado continua legivel: aqui ele aparece quando o limite de 10
   exportacoes foi atingido, e o usuario precisa LER por que nao pode clicar.
   Opacidade baixa demais transforma o motivo em enfeite. */
.btn:disabled {
  opacity: .55;
  cursor: not-allowed;
}

.btn--primary {
  background: var(--amber);
  border-color: var(--amber);
  color: var(--sobre-amber);
}

.btn--primary:hover:not(:disabled) { background: var(--amber-claro); border-color: var(--amber-claro); }

.btn--ghost {
  background: transparent;
  color: var(--texto-fraco);
}

.btn--ghost:hover:not(:disabled) { color: var(--texto); }

.btn--sm { padding: 5px 10px; font-size: 12px; }

/* Contador "7 de 10": numero que o usuario confere antes de clicar. */
.contador {
  color: var(--texto-fraco);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

/* ---- toasts ---- */

#ac-toasts {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* Nao intercepta clique: o toast e aviso, nao obstaculo. */
  pointer-events: none;
}

.toast {
  max-width: 340px;
  padding: 10px 14px;
  border: 1px solid var(--borda);
  border-left-width: 3px;
  border-radius: var(--raio);
  background: var(--superficie);
  color: var(--texto);
  font-size: 13px;
  box-shadow: var(--sombra);
  pointer-events: auto;
}

.toast--success { border-left-color: var(--ok); }
.toast--error   { border-left-color: var(--erro); }
.toast--warning { border-left-color: var(--amber); }

/* ---- modal ---- */

.modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(16, 24, 40, .45);
}

.modal__box {
  width: 100%;
  max-width: 480px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--superficie);
  box-shadow: var(--sombra);
}

.modal__box--perigo { border-color: var(--erro); }

.modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--borda);
}

.modal__head h2 { margin: 0; font-size: 17px; font-weight: 600; }

/* O corpo rola, o cabecalho e o rodape nao: com a lista de confirmacao longa,
   o botao Confirmar continua visivel sem rolar ate o fim. */
.modal__body {
  padding: 16px 18px;
  overflow-y: auto;
  color: var(--texto-fraco);
}

.modal__body p { margin: 0; }

.modal__foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 18px;
  border-top: 1px solid var(--borda);
}

/* ------------------------------------------------------------------ *
 * Campos de formulario.
 *
 * Moraram na export-contact enquanto ela era a UNICA tela da plataforma com
 * formulario, e o comentario de la dizia isso. A iniciar-atendimento tem
 * canal, busca e lista: manter duas copias e garantir que o campo de uma
 * extensao mude de altura no dia em que alguem ajustar a outra.
 *
 * Os seletores sao escopados em `.campo` de proposito. Uma regra solta em
 * `select`, carregada por TODAS as extensoes, e exatamente o vazamento que
 * este arquivo avisa para nao fazer.
 * ------------------------------------------------------------------ */

.campo { display: block; margin: 0 0 12px; }

.campo__rotulo {
  display: block;
  margin-bottom: 6px;
  color: var(--texto-fraco);
  font-size: 13px;
  font-weight: 600;
}

.campo select,
.campo input[type="date"],
.campo input[type="search"],
.campo input[type="text"],
.campo input[type="tel"] {
  width: 100%;
  padding: 8px 10px;
  background: var(--superficie-funda);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  color: var(--texto);
  font: inherit;
}

.campo select:focus,
.campo input[type="date"]:focus,
.campo input[type="search"]:focus,
.campo input[type="text"]:focus,
.campo input[type="tel"]:focus {
  border-color: var(--amber);
  outline: none;
}

/* Sem `filter: invert(1)` no icone do seletor de data, de proposito: o icone
   nativo do Chrome ja e escuro, o que e o certo sobre fundo claro. A regra
   existia quando a paleta era escura — mantida agora, ela deixaria o icone
   branco sobre branco. */

.campo__dica {
  margin: 6px 0 0;
  color: var(--texto-fraco);
  font-size: 12px;
}

/* Caixa de busca: mesma forma de um campo, sem o rotulo por cima. */
.busca {
  width: 100%;
  padding: 9px 10px;
  background: var(--superficie-funda);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio);
  color: var(--texto);
  font: inherit;
  font-size: 14px;
}

.busca:focus { outline: 2px solid var(--amber); outline-offset: 1px; }

/* Campos lado a lado, quebrando para baixo quando nao couberem. */
.linha-campos {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px;
}

.linha-campos > .campo { flex: 1 1 220px; min-width: 0; }

/* A linha de acao: o que se faz depois de preencher os campos. */
.linha-acao {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  margin-top: 14px;
}