/* CASA OXXY — casa_suporte.css (LANE EXPERIÊNCIA-2, 28/08)
   Estilo do popover de motivos do "fale conosco" (casa_falefale.js).
   Pedido do Founder: "tudo fino, nada gritante" — mesma paleta discreta
   do próprio botão flutuante de WhatsApp (var(--oxxy-panel-strong) etc.,
   ver .casa-wa-fab em casa.css), sem introduzir cor nova.
   Ligar em casa.html (fora do escopo desta lane, ver relatório):
   <link rel="stylesheet" href="casa_suporte.css?v=1"> — depois de casa.css,
   antes ou depois de casa_wa_fab.js tanto faz (é CSS, sem ordem de execução);
   <script src="casa_falefale.js?v=1" defer></script> — depois de
   casa_wa_fab.js na lista de scripts. */

.casa-falefale-menu{
  position:fixed;left:14px;z-index:26;
  bottom:calc(var(--oxxy-composer-real-h, var(--oxxy-composer-h)) + env(safe-area-inset-bottom) + 58px);
  display:flex;flex-direction:column;gap:4px;
  min-width:200px;max-width:min(280px,calc(100vw - 28px));
  background:var(--oxxy-panel-strong);border:1px solid var(--oxxy-border-soft);
  border-radius:var(--oxxy-radius-md);padding:10px;
  backdrop-filter:blur(10px);
  box-shadow:0 8px 28px rgba(0,0,0,.28);
  animation:casa-falefale-entra .18s ease both;
}
@keyframes casa-falefale-entra{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:translateY(0)}
}
@media (prefers-reduced-motion:reduce){
  .casa-falefale-menu{animation:none}
}
.casa-falefale-titulo{
  font-size:11px;font-weight:700;letter-spacing:.02em;color:var(--oxxy-ink-dim);
  margin:2px 22px 6px 4px;text-transform:uppercase;
}
.casa-falefale-item{
  appearance:none;border:none;background:transparent;color:var(--oxxy-ink);
  text-align:left;font:inherit;font-size:13.5px;font-weight:600;
  padding:9px 10px;border-radius:var(--oxxy-radius-sm);cursor:pointer;
  min-height:40px;
}
.casa-falefale-item:hover,.casa-falefale-item:focus-visible{
  background:var(--oxxy-panel);outline:none;
}
.casa-falefale-fechar{
  position:absolute;top:8px;right:8px;appearance:none;border:none;background:transparent;
  color:var(--oxxy-ink-dim);cursor:pointer;padding:8px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
}
.casa-falefale-fechar:hover,.casa-falefale-fechar:focus-visible{
  background:var(--oxxy-panel);color:var(--oxxy-ink);outline:none;
}
@media (max-width:640px){
  .casa-falefale-menu{left:10px;bottom:calc(var(--oxxy-composer-real-h, var(--oxxy-composer-h)) + env(safe-area-inset-bottom) + 52px)}
}