/* CASA OXXY — casa_chatoculto.css (LANE CHAT-OCULTO, 28/08)
   Ordem literal do Founder: "Deixar o chat ocultável: aparece se pôr o
   mouse em cima, senão ele oculta — ganhando assim mais imersão na
   página."

   Arquivo PRÓPRIO desta lane (regra de arquivo das lanes em paralelo) —
   NÃO edita casa.css. casa_chatoculto.js aplica as classes abaixo sozinho,
   sem precisar de nenhuma edição no HTML/CSS existentes. Variáveis
   --oxxy-* herdadas de casa.css com fallback embutido (caso este arquivo
   algum dia rode sem casa.css carregado antes, nada quebra/fica ilegível).

   Onde ligar: <link rel="stylesheet" href="casa_chatoculto.css?v=1"> —
   pode entrar em qualquer ordem, depois de casa.css. */

/* ---------------- composer: some por transform, nunca por display/height ----------------
   transform não mexe em offsetHeight, então --oxxy-composer-real-h (medido
   por casa_core.js via ResizeObserver em .casa-composer) continua correto,
   e quem depende dela pra se posicionar (WA fab, CTA flutuante, cartão de
   contato) não pula de lugar quando o composer recolhe. */
.casa-composer{
  transition:transform .38s cubic-bezier(.4,0,.2,1);
}
.oxxy-chatoculto-collapsed{
  transform:translateY(calc(100% + 16px));
  pointer-events:none;
}
/* trava de segurança redundante: mesmo se o JS tivesse algum bug, o
   navegador nunca deixa um campo FOCADO de verdade ficar fora da tela. */
.casa-composer:focus-within{
  transform:translateY(0) !important;
  pointer-events:auto !important;
}

/* ---------------- dica discreta (pílula) ----------------
   Visível só quando o composer está recolhido. Fixa embaixo, centralizada,
   na mesma faixa que o composer ocupava (nunca sobrepõe outro elemento). */
.oxxy-chatoculto-dica{
  position:fixed;
  left:50%;
  bottom:calc(env(safe-area-inset-bottom, 0px) + 14px);
  transform:translate(-50%,10px);
  z-index:31;
  display:flex;
  align-items:center;
  gap:8px;
  min-height:44px;
  padding:0 18px;
  margin:0;
  border-radius:999px;
  background:var(--oxxy-panel-strong,rgba(14,12,24,.9));
  border:1px solid var(--oxxy-border,rgba(140,120,190,.35));
  color:var(--oxxy-ink,#f4f2fb);
  font:600 13px/1 var(--oxxy-font,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif);
  cursor:pointer;
  box-shadow:0 10px 28px rgba(0,0,0,.35);
  opacity:0;
  visibility:hidden;
  transition:opacity .3s ease, transform .3s ease, visibility 0s linear .3s;
}
html[data-tema="claro"] .oxxy-chatoculto-dica{
  background:rgba(255,255,255,.92);
  color:#241f36;
  border-color:rgba(140,120,190,.28);
}
.oxxy-chatoculto-dica.oxxy-chatoculto-dica-visivel{
  opacity:1;
  visibility:visible;
  transform:translate(-50%,0);
  transition:opacity .3s ease, transform .3s ease, visibility 0s linear 0s;
}
.oxxy-chatoculto-dica:focus-visible{
  outline:2px solid var(--oxxy-focus,#8fe8ff);
  outline-offset:2px;
}
.oxxy-chatoculto-dica-ponto{
  width:9px;height:9px;border-radius:50%;flex:0 0 auto;
  background:var(--oxxy-grad,linear-gradient(135deg,#e23791,#9b5de5,#42c9e8));
}
.oxxy-chatoculto-dica-visivel .oxxy-chatoculto-dica-ponto{
  animation:oxxy-chatoculto-pulso 2.4s ease-in-out infinite;
}
@keyframes oxxy-chatoculto-pulso{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.55;transform:scale(.78)}
}

/* ---------------- prefers-reduced-motion: obrigatório (mesma régua do resto do site) ----------------
   "sem animação, só troca de estado" — zera as transições e o pulso; a
   troca de classe ainda muda o estado (visível/invisível, dentro/fora da
   tela), só não anima o meio do caminho. */
@media (prefers-reduced-motion:reduce){
  .casa-composer{transition:none}
  .oxxy-chatoculto-dica{transition:none}
  .oxxy-chatoculto-dica-visivel .oxxy-chatoculto-dica-ponto{animation:none}
}

/* mobile: alvo de toque confortável (mesma régua ≥44px já usada no site) */
@media (max-width:640px){
  .oxxy-chatoculto-dica{padding:0 16px;font-size:12.5px}
}