/* O atendimento do site (atendimento.js): o formulário de contato e o bot. */
:root {
  --va-roxo: #21152b;
  --va-azul: #2d5bd8;
  --va-verde: #1f8a5b;
  --va-fundo: #ffffff;
  --va-texto: #1d1724;
  --va-suave: #5d5566;
  --va-linha: #ddd6e3;
  --va-bolha: #f3eff6;
  --va-erro: #b3261e;
}
/* ---- o formulário de contato */
#contato-visya { display: grid; gap: .875rem; min-width: 0; }
#contato-visya label { display: grid; gap: .375rem; font-weight: 600; }
/* os campos herdam as cores da página: o site tem o próprio modo escuro e o alto contraste */
#contato-visya input, #contato-visya select, #contato-visya textarea { width: 100%; box-sizing: border-box;
  font: inherit; padding: .75rem .875rem; border: 1px solid currentColor; border-radius: .625rem;
  background: transparent; color: inherit; }
#contato-visya select option { color: #1d1724; background: #fff; }
#contato-visya .va-dupla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .875rem; }
#contato-visya label.va-aceite { display: flex; gap: .625rem; align-items: flex-start; font-weight: 400;
  font-size: .9375rem; line-height: 1.45; }
#contato-visya label.va-aceite input { width: 1.125rem; height: 1.125rem; margin: .1875rem 0 0; flex: none; }
#contato-visya .va-isca { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
#contato-visya .va-nota { margin: 0; font-size: .875rem; opacity: .8; line-height: 1.5; }
.va-status { margin: 0; padding: .75rem .875rem; border-radius: .625rem; background: rgba(127, 110, 140, .14);
  color: inherit; line-height: 1.5; overflow-wrap: anywhere; }
.va-painel .va-status { background: var(--va-bolha); color: var(--va-texto); }
.va-status.va-erro { color: var(--va-erro); }
.va-status.va-ok { border-left: 4px solid var(--va-verde); }
@media (max-width: 560px) { #contato-visya .va-dupla { grid-template-columns: minmax(0, 1fr); } }

/* ---- o bot */
.va-botao { position: fixed; right: 1rem; bottom: 5.25rem; z-index: 60; border: 0; border-radius: 999px;
  padding: .8125rem 1.125rem; font: inherit; font-weight: 700; color: #fff; background: var(--va-roxo);
  outline: 2px solid #fff; outline-offset: 0;
  box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .25); cursor: pointer; }
.va-botao:focus-visible, .va-painel button:focus-visible, .va-painel input:focus-visible { outline: 3px solid var(--va-azul);
  outline-offset: 2px; }
.va-painel { position: fixed; right: 1rem; bottom: 9rem; z-index: 61; width: min(24rem, calc(100vw - 2rem));
  height: min(34rem, calc(100vh - 11rem)); display: flex; flex-direction: column; background: var(--va-fundo);
  color: var(--va-texto); border: 1px solid var(--va-linha); border-radius: 1rem;
  box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, .3); overflow: hidden; }
.va-painel[hidden] { display: none; }
.va-topo { display: flex; gap: .75rem; align-items: flex-start; justify-content: space-between; padding: .875rem 1rem;
  background: var(--va-roxo); color: #fff; }
.va-topo div { display: grid; gap: .125rem; min-width: 0; }
.va-topo span { font-size: .8125rem; opacity: .85; line-height: 1.35; }
.va-fechar { flex: none; border: 0; background: transparent; color: #fff; font-size: 1.5rem; line-height: 1;
  cursor: pointer; padding: 0 .25rem; }
.va-lista { flex: 1; overflow-y: auto; padding: .875rem; display: flex; flex-direction: column; gap: .625rem; }
.va-msg { max-width: 88%; padding: .625rem .8125rem; border-radius: .875rem; line-height: 1.45; font-size: .9375rem;
  overflow-wrap: anywhere; }
.va-msg a { color: inherit; text-decoration: underline; }
.va-bot { align-self: flex-start; background: var(--va-bolha); border-bottom-left-radius: .25rem; }
.va-pessoa { align-self: flex-end; background: var(--va-azul); color: #fff; border-bottom-right-radius: .25rem; }
.va-digitando { color: var(--va-suave); font-style: italic; }
.va-opcoes { display: flex; flex-wrap: wrap; gap: .5rem; }
.va-opcao { border: 1px solid var(--va-azul); background: transparent; color: var(--va-texto); border-radius: 999px;
  padding: .4375rem .75rem; font: inherit; font-size: .875rem; cursor: pointer; }
.va-opcao:hover { background: var(--va-bolha); }
.va-contato { display: grid; gap: .5rem; padding: .75rem; border: 1px solid var(--va-linha); border-radius: .75rem; }
.va-contato input:not([type=checkbox]) { font: inherit; padding: .625rem .75rem; border: 1px solid var(--va-linha);
  border-radius: .5rem; background: var(--va-fundo); color: var(--va-texto); min-width: 0; }
.va-aceite { display: flex; gap: .5rem; align-items: flex-start; font-size: .8125rem; line-height: 1.4; }
.va-aceite input { margin-top: .1875rem; flex: none; }
.va-enviar-contato, .va-mandar { border: 0; border-radius: .5rem; padding: .625rem .875rem; font: inherit;
  font-weight: 700; color: #fff; background: var(--va-verde); cursor: pointer; }
.va-enviar-contato:disabled, .va-mandar:disabled { opacity: .6; cursor: default; }
.va-escrever { display: flex; gap: .5rem; padding: .75rem; border-top: 1px solid var(--va-linha); }
.va-campo { flex: 1; min-width: 0; font: inherit; padding: .625rem .75rem; border: 1px solid var(--va-linha);
  border-radius: .5rem; background: var(--va-fundo); color: var(--va-texto); }
@media (max-width: 480px) {
  .va-painel { right: .5rem; left: .5rem; width: auto; bottom: 8.5rem; height: calc(100vh - 10rem); }
  .va-botao { right: .75rem; bottom: 4.75rem; }
}
@media (prefers-reduced-motion: no-preference) { .va-painel { animation: va-sobe .18s ease-out; } }
@keyframes va-sobe { from { transform: translateY(.5rem); opacity: 0; } to { transform: none; opacity: 1; } }