/* ══ CRYSTAL — a concierge da Garre no site. Um par de flutuantes: o avatar em
   cima ("dá para conversar"), o WhatsApp embaixo ("quero falar com gente"),
   mesma coluna, mesma medida. Paleta da casa: preto profundo, filete de ouro,
   Inter. O botão só aparece quando o serviço responde (crystal.js). ═══════ */
.crystal-botao{position:relative;z-index:1;
  /* Fernando 05/09: avatar 73px sem fundo, anel dourado sutil. O rótulo "Posso ajudar?" que ficava embaixo virou
     balão ao lado (16/09, mais abaixo). */
  display:grid;justify-items:center;gap:.4rem;width:auto;height:auto;padding:0;border:0;
  background:none;box-shadow:none;cursor:pointer;
  transition:transform .25s,opacity .25s,visibility .25s}
.crystal-botao:hover{transform:translateY(-2px)}
.crystal-botao:hover picture{border-color:#D4AF37}
.crystal-botao picture{display:block;width:73px;height:73px;border-radius:999px;overflow:hidden;
  border:1.5px solid rgba(212,175,55,.45);transition:border-color .25s}
.crystal-botao img{width:100%;height:100%;object-fit:cover;display:block}
/* 16/09 (Fernando): "um balãozinho ao lado do avatar, que aparece quando a tela abre, some sozinho depois de alguns
   segundos (ou no toque), e não fica insistindo" — igual ao do Otto no Financial House. O rótulo sai de baixo do avatar
   e vira balão à esquerda, fora do fluxo (a pilha não muda de largura), canto inferior direito reto apontando para o
   avatar, fundo claro da casa, texto 14px, no máximo 220px. Só aparece com .crystal-botao--fala, que o crystal.js põe
   uma vez por sessão do navegador (e no mouse sobre o avatar, no desktop) e tira em 8 s ou no toque. Faz parte do
   botão: tocar nele abre o painel. Alvo de toque ≥ 44px. Desde 16/09 é o único convite: o painel não abre sozinho. */
.crystal-botao__rotulo{position:absolute;right:calc(100% + .6rem);bottom:.4rem;
  display:flex;align-items:center;min-height:44px;width:max-content;max-width:220px;text-align:left;
  font:500 .875rem/1.35 var(--font-family,'Inter',-apple-system,sans-serif);color:#0A0A0A;
  background:#F5F3EE;border:1px solid rgba(212,175,55,.55);border-radius:16px 16px 4px 16px;padding:.55rem .9rem;
  box-shadow:0 6px 18px rgba(10,10,10,.16);
  opacity:0;visibility:hidden;transform:translateX(6px);
  transition:opacity .3s,transform .3s,visibility .3s}
.crystal-botao--fala .crystal-botao__rotulo{opacity:1;visibility:visible;transform:none}
@media (prefers-reduced-motion:reduce){.crystal-botao__rotulo{transition:opacity .2s,visibility .2s;transform:none}}
.crystal-botao[hidden]{display:none}
/* Fernando 05/09: sem a bolinha dourada ("tem uma bola amarela na cabeça") */

.crystal{position:fixed;right:calc(1.5rem + env(safe-area-inset-right,0px));bottom:calc(1.5rem + env(safe-area-inset-bottom,0px));z-index:2147483647;
  width:min(24rem,calc(100vw - 3rem));max-height:min(36rem,calc(var(--crystal-vvh,100vh) * .78));   /* --crystal-vvh: viewport visual (teclado) */
  display:flex;flex-direction:column;overflow:hidden;
  background:linear-gradient(160deg,#1A1A1A 0%,#0A0A0A 100%);
  border:1px solid rgba(212,175,55,.45);border-radius:14px;
  box-shadow:0 26px 60px -20px rgba(0,0,0,.75);
  font-family:var(--font-family,'Inter',-apple-system,BlinkMacSystemFont,sans-serif);color:#F5F3EE}
.crystal[hidden]{display:none}
.crystal__topo{display:flex;align-items:center;gap:.75rem;padding:.9rem 1rem;
  border-bottom:1px solid rgba(212,175,55,.22);background:rgba(212,175,55,.04)}
.crystal__avatar{width:40px;height:40px;border-radius:999px;object-fit:cover;flex:none;
  border:1.5px solid rgba(212,175,55,.5)}
.crystal__nome{font-size:.95rem;font-weight:600;color:#F5F3EE;margin:0;line-height:1.2;letter-spacing:.01em}
.crystal__papel{font-size:.8rem;letter-spacing:.01em;color:#D4AF37;margin:.15rem 0 0;opacity:.9}   /* 08/09: "Assistente virtual" como está escrito, sem caixa alta */
.crystal__fechar{margin-left:auto;width:44px;height:44px;   /* 08/09: 44px — com o painel abrindo sozinho, fechar é o toque mais importante */display:inline-flex;align-items:center;justify-content:center;
  background:none;border:0;cursor:pointer;color:rgba(245,243,238,.6);border-radius:999px}
.crystal__fechar:hover{color:#D4AF37;background:rgba(212,175,55,.08)}
.crystal__fechar svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.7}

.crystal__conversa{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:1rem;display:grid;gap:.7rem;align-content:start;
  scrollbar-width:thin;scrollbar-color:rgba(212,175,55,.35) transparent}
.crystal__msg{margin:0;padding:.7rem .9rem;border-radius:12px;font-size:.9rem;line-height:1.5;max-width:90%;
  overflow-wrap:anywhere}
.crystal__msg--dela{background:rgba(212,175,55,.09);border:1px solid rgba(212,175,55,.18);color:#F5F3EE;
  justify-self:start;border-bottom-left-radius:4px}
.crystal__msg--voce{background:rgba(245,243,238,.12);color:#F5F3EE;justify-self:end;border-bottom-right-radius:4px}
.crystal__msg--pensando{color:#D4AF37;letter-spacing:.2em}
.crystal__msg--nota{background:none;border:0;color:rgba(245,243,238,.55);font-size:.75rem;padding:.2rem .9rem;justify-self:center}
.crystal__links{display:grid;gap:.3rem;justify-self:start;margin:0}
.crystal__links a{font-size:.74rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#D4AF37;
  display:inline-flex;align-items:center;min-height:44px;gap:.35rem;text-decoration:none}
.crystal__links a:hover{color:#F5F3EE}
.crystal__nota{margin:0;justify-self:start;font-size:.74rem;color:#D4AF37;letter-spacing:.02em;display:inline-flex;gap:.35rem;align-items:center}

.crystal__forma{display:flex;gap:.5rem;padding:.75rem 1rem .9rem;border-top:1px solid rgba(212,175,55,.22)}
.crystal__forma input{flex:1;min-width:0;background:rgba(245,243,238,.06);border:1px solid rgba(212,175,55,.28);
  border-radius:10px;padding:.65rem .8rem;color:#F5F3EE;font:inherit;font-size:.9rem}
.crystal__forma input::placeholder{color:rgba(245,243,238,.45)}
.crystal__forma input:focus{outline:none;border-color:#D4AF37;background:rgba(245,243,238,.1);box-shadow:0 0 0 3px rgba(212,175,55,.12)}
.crystal__forma button{width:44px;height:44px;flex:none;background:linear-gradient(135deg,#D4AF37,#B8941F);border:0;border-radius:10px;
  cursor:pointer;color:#0A0A0A;display:inline-flex;align-items:center;justify-content:center;transition:transform .2s,filter .2s}
.crystal__forma button:hover{filter:brightness(1.08);transform:translateY(-1px)}
.crystal__forma button svg{width:19px;height:19px;stroke:currentColor;stroke-width:2}
.crystal__forma button:disabled{opacity:.5;cursor:default;transform:none}

.crystal__pe{margin:0;padding:.55rem 1rem 0;display:flex;justify-content:space-between;align-items:center;gap:.5rem}
.crystal__zap{display:inline-flex;align-items:center;gap:.45rem;min-height:32px;font-size:.74rem;font-weight:600;
  letter-spacing:.06em;color:#D4AF37;text-decoration:none;transition:color .2s}
.crystal__zap:hover{color:#F5F3EE}
.crystal__zap svg{width:16px;height:16px;fill:#25D366;flex:none}
.crystal__aviso{margin:0;padding:.5rem 1rem .85rem;font-size:.7rem;line-height:1.45;color:rgba(245,243,238,.62)}
.crystal__aviso[hidden]{display:none}

@media (max-width:640px){
  .crystal-botao picture{width:64px;height:64px}
  .crystal{right:calc(1rem + env(safe-area-inset-right,0px));left:calc(1rem + env(safe-area-inset-left,0px));bottom:calc(1rem + env(safe-area-inset-bottom,0px));width:auto;max-height:calc(var(--crystal-vvh,100vh) * .72);border-radius:12px}
  /* painel aberto no celular: o WhatsApp (canto esquerdo) cobria o rodapé do painel — some enquanto ele está aberto */
  body.crystal-aberto #whatsapp-flutuante{opacity:0;visibility:hidden;pointer-events:none}
}
.crystal .sr-only,.crystal-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Pedido pronto (nome + empresa + contato): os dois botões de confirmação —
   e-mail pelo enviar.php do site, ou WhatsApp com o contexto da conversa. */
.crystal__acoes{display:grid;gap:.45rem;justify-self:stretch;margin:.1rem 0 0}
.crystal__acoes button,.crystal__acoes a{font:600 .85rem/1 var(--font-family,'Inter',-apple-system,sans-serif);min-height:42px;border-radius:10px;
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;text-decoration:none;cursor:pointer;padding:0 1rem;transition:transform .2s,background .2s,filter .2s}
.crystal__acoes .crystal__ouro{background:linear-gradient(135deg,#D4AF37,#B8941F);color:#0A0A0A;border:0}
.crystal__acoes .crystal__ouro:hover{transform:translateY(-1px);filter:brightness(1.08)}
.crystal__acoes .crystal__ouro:disabled{opacity:.55;cursor:default;transform:none}
.crystal__acoes .crystal__contorno{background:transparent;color:#F5F3EE;border:1.5px solid rgba(212,175,55,.55)}
.crystal__acoes .crystal__contorno:hover{border-color:#D4AF37;background:rgba(212,175,55,.1)}
.crystal__acoes svg{width:18px;height:18px;fill:#25D366;flex:none}

/* ══ PILHA À DIREITA (Fernando 05/09): avatar em cima, o logo do WhatsApp que ele
   mandou embaixo, sem rótulo. A coluna é fixa; os filhos são estáticos. Some inteira com o painel aberto
   (o WhatsApp já está dentro do painel). Os !important espelham os do estilo embutido do site. ════════ */
.crystal-pilha{position:fixed;right:calc(1.5rem + env(safe-area-inset-right,0px));bottom:calc(1.5rem + env(safe-area-inset-bottom,0px));z-index:2147483646;display:grid;justify-items:center;gap:.7rem}
body.crystal-aberto .crystal-pilha{opacity:0;visibility:hidden;pointer-events:none}
body #whatsapp-flutuante.zap-pill{position:static !important;display:block !important;width:52px;height:52px;
  padding:0 !important;border:0 !important;border-radius:999px;background:url(whatsapp-96.png) center/contain no-repeat !important;
  box-shadow:none !important;animation:none !important;transition:transform .25s}
@media (min-resolution:1.5dppx){body #whatsapp-flutuante.zap-pill{background-image:url(whatsapp-144.png) !important}}
body #whatsapp-flutuante.zap-pill:hover{transform:translateY(-2px) !important}
body #whatsapp-flutuante.zap-pill svg,body #whatsapp-flutuante.zap-pill span{display:none !important}
@media (max-width:640px){
  .crystal-pilha{right:calc(1rem + env(safe-area-inset-right,0px));bottom:calc(1rem + env(safe-area-inset-bottom,0px));gap:.5rem}
  body #whatsapp-flutuante.zap-pill{width:48px;height:48px}
}

/* 07/09 (Fernando: 'tirar a chamada pro WhatsApp no chat'): o papel do painel é captação (nome + telefone); o WhatsApp
   continua no botão flutuante fora do painel e no botão de adiantar depois do lead pronto. */
.crystal .crystal__pe{display:none}

/* ícone de WhatsApp no cabeçalho do painel (08/09) — discreto, à esquerda do X */
.crystal__zap-topo{margin-left:auto;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:999px;color:#25D366;transition:background .2s}
.crystal__zap-topo svg{width:22px;height:22px;fill:#25D366}
.crystal__zap-topo:hover{background:rgba(37,211,102,.12)}
.crystal__fechar{margin-left:0}

/* ══ CONVITE (Fernando 08/09): o painel que abre sozinho ocupa "um espaço muito calculado" — saudação e dois botões,
   sem campo. "Quero conversar" abre o campo e o painel passa a crescer com a conversa; "Agora não" fecha e não reabre
   sozinho nesta sessão do navegador. O X continua para recolher. ═══════════════════════════════════════════════════ */
.crystal--convite .crystal__forma,.crystal--convite .crystal__aviso{display:none}
.crystal__convite{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;padding:.15rem 1rem 1rem}
.crystal__convite button{font:600 .9rem/1 var(--font-family,'Inter',-apple-system,sans-serif);min-height:44px;border-radius:10px;
  cursor:pointer;padding:0 .8rem;transition:transform .2s,filter .2s,background .2s}
.crystal__convite-sim{background:linear-gradient(135deg,#D4AF37,#B8941F);color:#0A0A0A;border:0}
.crystal__convite-sim:hover{transform:translateY(-1px);filter:brightness(1.08)}
.crystal__convite-nao{background:transparent;color:#F5F3EE;border:1.5px solid rgba(212,175,55,.55)}
.crystal__convite-nao:hover{border-color:#D4AF37;background:rgba(212,175,55,.1)}
/* Sem zoom no iOS em QUALQUER tela de toque (antes só até 640px: iPhone deitado e iPad davam zoom ao focar) */
@media (hover:none),(max-width:640px){.crystal__forma input{font-size:16px}}   /* largura também: o emulador prova o que o aparelho faz */
/* convite compacto: o espaço "muito calculado" — cabeçalho e bolha com menos respiro, botões de 42px */
.crystal--convite .crystal__topo{padding:.65rem 1rem}
.crystal--convite .crystal__conversa{padding:.7rem 1rem .5rem}
.crystal--convite .crystal__msg{padding:.55rem .8rem;max-width:100%}
.crystal--convite .crystal__convite{padding:.1rem 1rem .8rem}
.crystal--convite .crystal__convite button{min-height:42px}

/* 13/09 (auditoria): dois toques rápidos não viram zoom */
.crystal button,.crystal a,.crystal-botao,.crystal-pilha a{touch-action:manipulation}