/* ═══════════════════════════════════
   CHAT WIDGET — Evo · Urbanas
   Tema: amarelo #ffd400 sobre escuro
═══════════════════════════════════ */

:root{
  --evo-accent:#ffd400;
  --evo-dark:#141414;
  --evo-card:#1f1f1f;
  --evo-text:#f1f1f1;
  --evo-dim:#9a9a9a;
  --evo-shadow:rgba(0,0,0,.5);
}

/* ── FABs (botões flutuantes) ── */
.fabs{
  position:fixed;
  right:18px;
  bottom:20px;
  z-index:998;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:12px;
}

.fab{
  width:58px;
  height:58px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  border:none;
  cursor:pointer;
  text-decoration:none;
  position:relative;
  box-shadow:0 8px 22px rgba(0,0,0,.4);
  transition:transform .22s,box-shadow .22s;
}
.fab:active{transform:scale(.9);}

.fab-ai{
  background:radial-gradient(circle at 50% 38%, #1e5293, #0b2545); /* azul Evolvify (escuro p/ contraste) */
  padding:0;
  overflow:hidden;
}
.fab-ai img{
  width:54px;height:54px;
  object-fit:contain;
  display:block;
  margin:auto;
  top: 15px;
  animation:evo-bob 2.8s ease-in-out 1s infinite;
}

.fab-wa{background:#25d366;}
.fab-wa svg{
  width:28px;height:28px;
  fill:#fff;
  display:block;
  margin:auto;
  position:relative;
  top:14px;
  animation:evo-swing 2.5s ease-in-out 2s infinite;
  transform-origin:50% 50%;
}

/* Anel pulsante ao redor dos botões */
.fab::before{
  content:'';
  position:absolute;
  inset:-5px;
  border-radius:50%;
  border:2px solid;
  opacity:.18;
  animation:evo-fp 2.8s infinite;
}
.fab-ai::before{border-color:#3066ae;}
.fab-wa::before{border-color:#25d366;}

/* Animações de atenção */
@keyframes evo-fp{0%,100%{transform:scale(1);opacity:.18}50%{transform:scale(1.25);opacity:.05}}
@keyframes evo-swing{0%,100%{transform:rotate(0)}15%{transform:rotate(16deg)}30%{transform:rotate(-12deg)}45%{transform:rotate(9deg)}60%{transform:rotate(-5deg)}75%{transform:rotate(2deg)}}
@keyframes evo-bob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-3px) rotate(-4deg)}}

@media(hover:hover){
  .fab-ai:hover{transform:scale(1.1);}
  .fab-wa:hover{transform:scale(1.1);}
}

/* Etiqueta "Tire dúvidas com a Evo" à esquerda do botão */
.fab-ai-wrap{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:flex-end;
}
.fab-ai-label{
  position:absolute;
  right:66px;
  top:50%;
  transform:translateY(-50%);
  background:#fff;
  color:#111;
  font-family:'Poppins',sans-serif;
  font-size:12px;
  font-weight:600;
  white-space:nowrap;
  padding:7px 12px;
  border-radius:20px;
  box-shadow:0 4px 14px rgba(0,0,0,.3);
  pointer-events:none;
}
.fab-ai-label::after{
  content:'';
  position:absolute;
  right:-6px;
  top:50%;
  transform:translateY(-50%);
  border:6px solid transparent;
  border-right:none;
  border-left-color:#fff;
}
@media(max-width:480px){.fab-ai-label{display:none;}}

/* ── Overlay + painel ── */
.chat-overlay{
  position:fixed;
  inset:0;
  z-index:1000;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(2px);
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s;
}
.chat-overlay.open{opacity:1;pointer-events:all;}

.chat-panel{
  width:380px;
  max-width:100%;
  height:min(640px,88vh);
  margin:0 20px 20px 0;
  background:var(--evo-dark);
  border-radius:20px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  box-shadow:0 20px 60px var(--evo-shadow);
  transform:translateY(24px);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1);
  font-family:'Poppins',sans-serif;
}
.chat-overlay.open .chat-panel{transform:translateY(0);}

@media(max-width:480px){
  .chat-overlay{align-items:stretch;justify-content:stretch;}
  .chat-panel{width:100%;height:100%;margin:0;border-radius:0;}
}

/* ── Cabeçalho ── */
.chat-head{
  display:flex;
  align-items:center;
  gap:8px;
  padding:16px 18px;
  background:var(--evo-card);
  color:var(--evo-text);
  font-weight:600;
  font-size:16px;
  border-bottom:1px solid rgba(255,212,0,.12);
}
.chat-close{
  margin-left:auto;
  background:transparent;
  border:none;
  color:var(--evo-dim);
  font-size:20px;
  cursor:pointer;
  line-height:1;
}
.chat-close:hover{color:var(--evo-text);}

.ai-dot{
  width:8px;height:8px;
  background:#39d353;
  border-radius:50%;
  display:inline-block;
  animation:evo-bk 1.8s infinite;
}
@keyframes evo-bk{0%,100%{opacity:1}50%{opacity:.3}}

/* ── Barra de handoff ── */
.handoff-bar{
  padding:9px 16px;
  background:rgba(37,211,102,.06);
  border-bottom:1px solid rgba(37,211,102,.14);
  display:flex;
  align-items:center;
  gap:10px;
}
.handoff-txt{flex:1;font-size:11.5px;color:var(--evo-dim);}
.handoff-btn{
  font-size:11.5px;
  font-weight:600;
  padding:6px 12px;
  border-radius:16px;
  background:rgba(37,211,102,.14);
  color:#25d366;
  text-decoration:none;
  white-space:nowrap;
}

/* ── Área de mensagens ── */
.chat-area{
  flex:1;
  overflow-y:auto;
  padding:14px 16px;
  display:flex;
  flex-direction:column;
  gap:10px;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,212,0,.25) transparent;
}
.chat-area::-webkit-scrollbar{width:3px;}
.chat-area::-webkit-scrollbar-thumb{background:rgba(255,212,0,.25);border-radius:2px;}

/* Mensagens */
.msg{
  max-width:86%;
  padding:11px 14px;
  border-radius:14px;
  font-size:13px;
  line-height:1.55;
  animation:evo-fadeU .28s cubic-bezier(.34,1.56,.64,1) both;
}
.msg.bot{
  background:var(--evo-card);
  color:var(--evo-text);
  border:1px solid rgba(255,212,0,.1);
  border-radius:4px 14px 14px 14px;
  align-self:flex-start;
  box-shadow:0 2px 10px var(--evo-shadow);
}
.msg.bot strong{color:var(--evo-accent);}
.msg.user{
  background:var(--evo-accent);
  color:#111;
  font-weight:500;
  border-radius:14px 4px 14px 14px;
  align-self:flex-end;
}
@keyframes evo-fadeU{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}

/* Labels */
.mlbl{font-size:10px;color:var(--evo-dim);margin-bottom:2px;display:flex;align-items:center;gap:5px;}
.mlbl.u{justify-content:flex-end;}
.mlbl-ava{width:20px;height:20px;object-fit:contain;display:inline-block;vertical-align:middle;}

/* Indicador de digitação */
.typing-dot{
  display:flex;align-items:center;gap:6px;
  padding:10px 14px;
  background:var(--evo-card);
  border:1px solid rgba(255,212,0,.1);
  border-radius:4px 14px 14px 14px;
  align-self:flex-start;
  animation:evo-fadeU .28s ease both;
}
.typing-dot img{width:32px;height:32px;object-fit:contain;animation:evo-bob 1s ease-in-out infinite;}
.typing-dot span{width:6px;height:6px;background:var(--evo-accent);border-radius:50%;animation:evo-td 1.2s infinite;}
.typing-dot span:nth-child(2){animation-delay:.2s;}
.typing-dot span:nth-child(3){animation-delay:.4s;}
@keyframes evo-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes evo-td{0%,60%,100%{transform:translateY(0);opacity:.35}30%{transform:translateY(-5px);opacity:1}}

/* Chips (respostas rápidas) */
.inline-chips{
  display:flex;gap:6px;flex-wrap:wrap;
  padding:8px 0 14px;
  justify-content:flex-end;
  transition:opacity .25s;
}
.qrb{
  font-size:11.5px;
  padding:7px 12px;
  background:var(--evo-card);
  border:1.5px solid rgba(255,212,0,.3);
  border-radius:20px;
  color:var(--evo-accent);
  cursor:pointer;
  font-family:'Poppins',sans-serif;
  transition:all .2s;
  text-decoration:none;
  display:inline-block;
}
.qrb:hover{background:rgba(255,212,0,.1);}
.qrb-wa{background:rgba(37,211,102,.12);border-color:rgba(37,211,102,.5);color:#25d366;}
.qrb-back{opacity:.5;font-size:11px;}