/* Custom Styles for Estética Souza (COMPLETO e atualizado) */
/* ✅ Objetivo: transições mais lisas, menos “tranco”, e sem bugs de fixed/blur */
:root{
  --sombra-forte: 0 18px 40px rgba(0,0,0,.12);
  --sombra-media: 0 10px 26px rgba(0,0,0,.10);
  --borda-suave: rgba(122, 90, 70, .12);
  --fundo-contraste: rgba(239, 228, 216, .55);
  --fundo-contraste-2: rgba(216, 193, 174, .22);

  /* ✅ ajustes pra suavidade */
  --dur-curta: 160ms;
  --dur-media: 260ms;
  --dur-longa: 520ms;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-soft: cubic-bezier(.2, .8, .2, 1);

  /* ✅ blur/vidro */
  --vidro: rgba(255,255,255,.88);
  --vidro-mais: rgba(255,255,255,.94);

  /* ✅ foco acessível */
  --foco: 0 0 0 4px rgba(122, 90, 70, .12);
}

/* ====== RESET/BASE (seguro) ====== */
html, body{ height:100%; }
body{
  overflow-x:hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
}

/* ✅ Se o navbar estiver criando um botão de chat no topo com esses IDs, esconde */
#chat-botao, #chat-painel{
  display: none !important;
}

/* ====== PERFORMANCE/SUAVIDADE ======
   - Evita "will-change" global (gasta memória e pode piorar)
   - Usa transform/opacity (GPU-friendly)
*/
*{
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce){
  *{
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

/* ====== ANIMAÇÕES (mais lisas) ====== */
@keyframes fadeUp{
  from{ opacity:0; transform: translate3d(0,14px,0); }
  to{ opacity:1; transform: translate3d(0,0,0); }
}
@keyframes fadeIn{
  from{ opacity:0; }
  to{ opacity:1; }
}
@keyframes bounceSlow{
  0%,100%{ transform: translate3d(0,0,0); }
  50%{ transform: translate3d(0,8px,0); }
}

/* ✅ classes utilitárias */
.animate-fade-up{ animation: fadeUp .8s var(--ease-out) both; }
.animate-fade-in{ animation: fadeIn .9s var(--ease-out) both; }
.animate-bounce-slow{ animation: bounceSlow 2.2s var(--ease-soft) infinite; }
.delay-100{ animation-delay: .10s; }
.delay-200{ animation-delay: .20s; }
.delay-300{ animation-delay: .30s; }

/* ====== CONTRASTE ENTRE SEÇÕES ====== */
.section-divider{
  position:absolute;
  left:0; right:0; top:0;
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(122,90,70,.18), transparent);
  pointer-events:none;
}

/* ====== BLOCO FOTO (hero) ====== */
.cartao-foto{
  position: relative;
  width: min(520px, 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 18px;
  transform: translateZ(0);
}
.cartao-foto-fundo{
  position:absolute;
  inset: 0;
  border-radius: 3rem;
  background: rgba(216, 193, 174, .25);
  transform: rotate(3deg);
  transition: transform var(--dur-longa) var(--ease-out);
}
.cartao-foto-corpo{
  position:relative;
  background: #fff;
  border-radius: 2.5rem;
  padding: 12px;
  box-shadow: var(--sombra-forte);
  transform: rotate(-2deg) translateZ(0);
  transition: transform var(--dur-longa) var(--ease-out);
}
.cartao-foto:hover .cartao-foto-fundo{ transform: rotate(2deg) translate3d(0,-2px,0); }
.cartao-foto-corpo:hover{ transform: rotate(0deg) translate3d(0,-2px,0); }

/* Badge fixo */
.badge-especialista{
  position:absolute;
  right: -8px;
  bottom: -18px;
  background: rgba(255,255,255,.95);
  border: 1px solid var(--borda-suave);
  border-radius: 18px;
  padding: 14px 16px;
  box-shadow: var(--sombra-media);
  z-index: 20;
  transform: none !important;
  pointer-events: none;
}

/* ====== CHAT FLUTUANTE (CANTO INFERIOR DIREITO SEMPRE) ====== */
.chat-flutuante{
  position: fixed !important;
  right: 22px !important;
  bottom: 22px !important;
  top: auto !important;
  left: auto !important;

  z-index: 999999 !important;

  display:flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  justify-content: flex-end !important;

  gap: 12px;

  transform: translateZ(0) !important;
  filter: none !important;
  -webkit-tap-highlight-color: transparent;
}

/* Botão */
.chat-botao{
  width: 56px;
  height: 56px;
  border-radius: 999px;
  border: 1px solid rgba(122, 90, 70, .18);
  background: var(--vidro);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--sombra-media);

  display:flex;
  align-items:center;
  justify-content:center;

  cursor:pointer;
  position: relative;

  /* ✅ transições mais lisas */
  transform: translateZ(0);
  transition:
    transform var(--dur-media) var(--ease-out),
    box-shadow var(--dur-media) var(--ease-out),
    background var(--dur-media) var(--ease-out),
    border-color var(--dur-media) var(--ease-out);
}
.chat-botao:hover{
  transform: translate3d(0,-2px,0);
  box-shadow: var(--sombra-forte);
  background: var(--vidro-mais);
  border-color: rgba(122, 90, 70, .24);
}
.chat-botao:active{
  transform: translate3d(0,-1px,0) scale(.98);
}
.chat-botao:focus-visible{
  outline: none;
  box-shadow: var(--sombra-forte), var(--foco);
}

/* Pulse (mais suave e leve) */
.chat-pulse{
  position:absolute;
  inset: -6px;
  border-radius: 999px;
  background: rgba(122, 90, 70, .14);
  animation: chatPulse 2.4s var(--ease-soft) infinite;
  z-index: -1;
}
@keyframes chatPulse{
  0%{ transform: scale(1); opacity: .45; }
  65%{ transform: scale(1.22); opacity: 0; }
  100%{ transform: scale(1.22); opacity: 0; }
}

/* ====== PAINEL DO CHAT (abertura/fechamento mais “liso”) ====== */
.chat-painel{
  width: min(360px, calc(100vw - 44px));
  background: rgba(255,255,255,.90);
  border: 1px solid rgba(122, 90, 70, .18);
  border-radius: 22px;
  box-shadow: var(--sombra-forte);
  overflow: hidden;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  transform-origin: bottom right;

  /* ✅ estado fechado (sem tranco) */
  opacity: 0;
  transform: translate3d(0,8px,0) scale(.96);
  pointer-events: none;
  visibility: hidden;

  /* ✅ transições boas */
  transition:
    opacity var(--dur-media) var(--ease-out),
    transform var(--dur-media) var(--ease-out),
    visibility 0s linear var(--dur-media);
}

/* ✅ estado aberto */
.chat-painel.aberto{
  opacity: 1;
  transform: translate3d(0,0,0) scale(1);
  pointer-events: auto;
  visibility: visible;

  transition:
    opacity var(--dur-media) var(--ease-out),
    transform var(--dur-media) var(--ease-out),
    visibility 0s linear 0s;
}

/* Topo */
.chat-topo{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 14px;
  background: linear-gradient(180deg, rgba(239,228,216,.70), rgba(255,255,255,.70));
  border-bottom: 1px solid rgba(122, 90, 70, .12);
}
.chat-avatar{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(122, 90, 70, .10);
  border: 1px solid rgba(122, 90, 70, .12);
  transform: translateZ(0);
}
.chat-fechar{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(122, 90, 70, .12);
  background: rgba(255,255,255,.82);

  display:flex;
  align-items:center;
  justify-content:center;

  cursor:pointer;
  transform: translateZ(0);

  transition:
    background var(--dur-media) var(--ease-out),
    transform var(--dur-media) var(--ease-out),
    box-shadow var(--dur-media) var(--ease-out);
}
.chat-fechar:hover{
  background: rgba(255,255,255,.98);
  transform: translate3d(0,-1px,0);
  box-shadow: 0 10px 18px rgba(0,0,0,.08);
}
.chat-fechar:active{
  transform: translate3d(0,0,0) scale(.98);
}
.chat-fechar:focus-visible{
  outline: none;
  box-shadow: 0 10px 18px rgba(0,0,0,.08), var(--foco);
}

/* Corpo (scroll mais agradável) */
.chat-corpo{
  padding: 14px;
  display:flex;
  flex-direction: column;
  gap: 10px;

  max-height: 320px;
  overflow: auto;

  scroll-behavior: smooth;
  overscroll-behavior: contain;

  /* ✅ scrollbar mais discreta */
  scrollbar-width: thin;
  scrollbar-color: rgba(122,90,70,.22) transparent;
}
.chat-corpo::-webkit-scrollbar{ width: 10px; }
.chat-corpo::-webkit-scrollbar-track{ background: transparent; }
.chat-corpo::-webkit-scrollbar-thumb{
  background: rgba(122,90,70,.18);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.chat-corpo::-webkit-scrollbar-thumb:hover{
  background: rgba(122,90,70,.26);
  border: 2px solid transparent;
  background-clip: padding-box;
}

.chat-msg{ display:flex; }
.chat-msg-bot{ justify-content: flex-start; }
.chat-msg-user{ justify-content: flex-end; }

/* Bolhas (mais “soft” e com micro interação) */
.chat-bolha{
  max-width: 78%;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(122, 90, 70, .12);
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
  font-size: 14px;
  line-height: 1.35;

  transform: translateZ(0);
  transition: transform var(--dur-curta) var(--ease-out), box-shadow var(--dur-curta) var(--ease-out);
}
.chat-msg-bot .chat-bolha{ background: rgba(239,228,216,.65); }
.chat-msg-user .chat-bolha{ background: rgba(122, 90, 70, .12); }

.chat-msg-user .chat-bolha:hover,
.chat-msg-bot .chat-bolha:hover{
  transform: translate3d(0,-1px,0);
  box-shadow: 0 10px 22px rgba(0,0,0,.07);
}

.chat-meta{
  margin-top: 6px;
  font-size: 11px;
  opacity: .7;
}

/* Rodapé */
.chat-rodape{
  display:flex;
  gap: 10px;
  padding: 12px 14px 14px;
  border-top: 1px solid rgba(122, 90, 70, .10);
  background: rgba(255,255,255,.75);
}
.chat-input{
  flex: 1;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(122, 90, 70, .18);
  padding: 0 14px;
  outline: none;
  background: rgba(255,255,255,.92);

  transition:
    box-shadow var(--dur-media) var(--ease-out),
    border-color var(--dur-media) var(--ease-out),
    background var(--dur-media) var(--ease-out);
}
.chat-input:focus{
  box-shadow: var(--foco);
  border-color: rgba(122, 90, 70, .28);
  background: rgba(255,255,255,.98);
}

.chat-enviar{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(122, 90, 70, .18);
  background: rgba(255,255,255,.92);

  display:flex;
  align-items:center;
  justify-content:center;

  cursor:pointer;
  transform: translateZ(0);

  transition:
    transform var(--dur-media) var(--ease-out),
    box-shadow var(--dur-media) var(--ease-out),
    background var(--dur-media) var(--ease-out),
    border-color var(--dur-media) var(--ease-out);
}
.chat-enviar:hover{
  transform: translate3d(0,-1px,0);
  box-shadow: 0 10px 20px rgba(0,0,0,.08);
  background: rgba(255,255,255,.98);
  border-color: rgba(122, 90, 70, .24);
}
.chat-enviar:active{
  transform: translate3d(0,0,0) scale(.98);
}
.chat-enviar:focus-visible{
  outline: none;
  box-shadow: 0 10px 20px rgba(0,0,0,.08), var(--foco);
}

.chat-aviso{
  padding: 0 14px 14px;
  font-size: 12px;
  color: rgba(107, 92, 84, .85);
}

/* ✅ Micro melhoria: “safe area” (iPhone) sem quebrar desktop */
@supports (padding: max(0px)){
  .chat-flutuante{
    right: max(22px, env(safe-area-inset-right)) !important;
    bottom: max(22px, env(safe-area-inset-bottom)) !important;
  }
}

/* Mobile */
@media (max-width: 420px){
  .chat-flutuante{
    right: 14px !important;
    bottom: 14px !important;
  }
  .chat-painel{
    width: min(360px, calc(100vw - 28px));
  }
}

/* ✅ Opcional (mas recomendado): reduz blur em dispositivos que sofrem com isso */
@media (max-width: 520px){
  .chat-painel{
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
}

/* ✅ Extra: melhora cliques no mobile */
.chat-botao, .chat-fechar, .chat-enviar{
  touch-action: manipulation;
}