/* ===========================================================
   E-commerce Explosivo — Chat qualificador estilo WhatsApp
   Tela cheia · wallpaper WhatsApp · avatar Mari · captura de lead
   =========================================================== */

.ee-chat-scrim{ position:fixed; inset:0; z-index:1000; display:none; background:rgba(4,8,11,.6);
  opacity:0; transition:opacity .3s ease; }
.ee-chat-scrim.open{ display:block; opacity:1; }

/* painel = tela cheia em todos os dispositivos */
.ee-chat{
  position:fixed; inset:0; z-index:1001; display:flex; flex-direction:column; overflow:hidden;
  background:#0b141a; opacity:0; pointer-events:none; transform:scale(1.01);
  transition:opacity .3s ease, transform .3s cubic-bezier(.16,1,.3,1);
  font-family:'Manrope', system-ui, sans-serif;
}
.ee-chat.open{ opacity:1; pointer-events:auto; transform:none; }
/* wallpaper */
.ee-chat::before{ content:""; position:absolute; inset:0; z-index:0;
  background:url('assets/img/chat/wpp-bg.webp') center/cover no-repeat;
  opacity:.10; }
.ee-chat::after{ content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(180deg, rgba(11,20,26,.6), rgba(11,20,26,.82)); }

/* ---- header ---- */
.ee-chat-head{ position:relative; z-index:3; display:flex; align-items:center; gap:12px;
  padding:12px 16px; background:#202c33; border-bottom:1px solid #2a3942; flex-shrink:0; }
.ee-chat-head .bk{ background:none; border:0; color:#aebac1; cursor:pointer; padding:4px;
  display:none; }
.ee-chat-head .av{ width:42px; height:42px; border-radius:50%; flex-shrink:0; position:relative;
  overflow:visible; }
.ee-chat-head .av img{ width:100%; height:100%; border-radius:50%; object-fit:cover; display:block; }
.ee-chat-head .av::after{ content:""; position:absolute; right:0; bottom:0; width:11px; height:11px;
  border-radius:50%; background:#00d95f; border:2px solid #202c33; }
.ee-chat-head .who{ flex:1; min-width:0; }
.ee-chat-head .who .nm{ color:#e9edef; font-weight:700; font-size:16px; line-height:1.2; }
.ee-chat-head .who .st{ color:#8696a0; font-size:12.5px; line-height:1.3; }
.ee-chat-head .who .st b{ color:#34e076; font-weight:600; }
.ee-chat-head .x{ background:none; border:0; color:#aebac1; cursor:pointer; padding:8px; border-radius:8px;
  display:grid; place-items:center; transition:background .18s; }
.ee-chat-head .x:hover{ background:rgba(255,255,255,.08); }

/* ---- body ---- */
.ee-chat-body{ position:relative; z-index:2; flex:1; overflow-y:auto; padding:18px 16px 10px;
  display:flex; flex-direction:column; gap:8px; scrollbar-width:thin; scrollbar-color:#2a3942 transparent; }
.ee-chat-body::-webkit-scrollbar{ width:6px; }
.ee-chat-body::-webkit-scrollbar-thumb{ background:#2a3942; border-radius:3px; }
/* coluna central no desktop (estilo WhatsApp Web) */
.ee-chat-inner{ width:100%; max-width:600px; margin:0 auto; display:flex; flex-direction:column; gap:8px; }

.ee-day{ align-self:center; background:#182229; color:#8696a0; font-size:11.5px; padding:5px 13px;
  border-radius:8px; margin:2px 0 8px; box-shadow:0 1px 1px rgba(0,0,0,.2); }

.ee-msg{ max-width:80%; padding:8px 11px 7px; border-radius:9px; position:relative;
  font-size:14.6px; line-height:1.46; color:#e9edef; word-wrap:break-word; box-shadow:0 1px .6px rgba(0,0,0,.2); }
.ee-msg.bot{ align-self:flex-start; background:#202c33; border-top-left-radius:3px; }
.ee-msg.me{ align-self:flex-end; background:#005c4b; border-top-right-radius:3px; }
.ee-msg strong{ font-weight:700; color:#fff; }
.ee-msg .tm{ display:inline-block; float:right; margin:7px 0 -2px 12px; font-size:10.5px; color:#8696a0; line-height:1; }
.ee-msg.me .tm{ color:#9fd8c8; }
.ee-msg.me .tm.read::after{ content:" ✓✓"; color:#53bdeb; letter-spacing:-1px; }
.ee-msg.me .tm.sent::after{ content:" ✓✓"; color:#8696a0; letter-spacing:-1px; }
.ee-anim{ animation:eePop .28s cubic-bezier(.16,1,.3,1); }
@keyframes eePop{ from{ opacity:.2; transform:translateY(7px) scale(.97); } }

.ee-typing{ align-self:flex-start; background:#202c33; padding:12px 14px; border-radius:9px;
  border-top-left-radius:3px; display:none; gap:4px; align-items:center; box-shadow:0 1px .6px rgba(0,0,0,.2); }
.ee-typing.show{ display:flex; }
.ee-typing span{ width:7px; height:7px; border-radius:50%; background:#8696a0; opacity:.5; animation:eeBlink 1.1s infinite; }
.ee-typing span:nth-child(2){ animation-delay:.18s; } .ee-typing span:nth-child(3){ animation-delay:.36s; }
@keyframes eeBlink{ 0%,60%,100%{ opacity:.3; transform:translateY(0);} 30%{ opacity:.95; transform:translateY(-3px);} }

/* ---- quick replies / actions ---- */
.ee-quick-wrap{ position:relative; z-index:3; flex-shrink:0; background:rgba(11,20,26,.6); }
.ee-quick{ width:100%; max-width:600px; margin:0 auto; display:flex; flex-direction:column; gap:8px;
  padding:8px 16px 12px; }
.ee-quick:empty{ display:none; }
.ee-opt{ width:100%; text-align:center; padding:13px 15px; border-radius:11px; cursor:pointer;
  background:#202c33; border:1px solid #2a3942; color:#34e076; font-family:'Manrope',sans-serif;
  font-weight:700; font-size:14.3px; line-height:1.3; transition:transform .16s ease, background .18s, border-color .18s;
  display:flex; align-items:center; justify-content:center; gap:8px; }
.ee-opt:hover{ background:#28363f; border-color:#34e076; transform:translateY(-1px); }
.ee-opt.primary{ background:#34e076; color:#06210f; border-color:transparent; }
.ee-opt.primary:hover{ background:#2bd06b; }
.ee-opt.ghost{ color:#aebac1; font-weight:600; }

/* ---- form de captura ---- */
.ee-form{ width:100%; max-width:600px; margin:0 auto; padding:6px 16px 14px; display:flex; flex-direction:column; gap:10px; }
.ee-form label{ font-size:12px; color:#8696a0; font-weight:600; margin-bottom:-4px; }
.ee-form input{ width:100%; background:#202c33; border:1px solid #2a3942; border-radius:11px; padding:13px 15px;
  color:#e9edef; font-family:'Manrope',sans-serif; font-size:14.6px; outline:none; transition:border-color .18s; }
.ee-form input:focus{ border-color:#34e076; }
.ee-form input.err{ border-color:#f0506e; }
.ee-form .send{ width:100%; padding:14px; border-radius:11px; border:0; cursor:pointer; background:#34e076;
  color:#06210f; font-family:'Oxanium',sans-serif; font-weight:800; font-size:15px; transition:background .18s, transform .16s; }
.ee-form .send:hover{ background:#2bd06b; transform:translateY(-1px); }
.ee-form .priv{ font-size:11px; color:#6b7d89; text-align:center; line-height:1.4; }

/* ---- input bar (texto livre) ---- */
.ee-inputbar{ position:relative; z-index:3; display:flex; align-items:center; gap:10px; padding:10px 16px;
  background:#202c33; flex-shrink:0; }
.ee-inputbar .wrp{ width:100%; max-width:600px; margin:0 auto; display:flex; gap:10px; align-items:center; }
.ee-inputbar input{ flex:1; background:#2a3942; border:0; border-radius:20px; padding:12px 16px; color:#e9edef;
  font-family:'Manrope',sans-serif; font-size:14.6px; outline:none; }
.ee-inputbar input::placeholder{ color:#8696a0; }
.ee-inputbar .snd{ width:44px; height:44px; border-radius:50%; flex-shrink:0; border:0; cursor:pointer;
  background:#00a884; color:#06210f; display:grid; place-items:center; transition:transform .16s, background .18s; }
.ee-inputbar .snd:hover{ background:#06cf9c; transform:scale(1.05); }
.ee-inputbar.hidden{ display:none; }

/* ---- launcher (bolinha com foto da Mari) ---- */
.ee-launcher{ position:fixed; right:22px; bottom:22px; z-index:90; display:flex; align-items:center; gap:12px;
  cursor:pointer; border:0; background:none; padding:0; font-family:'Manrope',sans-serif; }
.ee-launcher .bubble{ position:relative; background:#fff; color:#0b141a; border-radius:14px; padding:10px 14px;
  font-size:13.5px; font-weight:600; max-width:190px; line-height:1.3; box-shadow:0 12px 30px -10px rgba(0,0,0,.5);
  display:none; }
.ee-launcher .bubble::after{ content:""; position:absolute; right:-6px; top:50%; transform:translateY(-50%);
  border:7px solid transparent; border-left-color:#fff; }
@media(min-width:900px){ .ee-launcher .bubble{ display:block; } }
.ee-launcher .ava{ width:62px; height:62px; border-radius:50%; flex-shrink:0; position:relative;
  box-shadow:0 12px 30px -8px rgba(0,0,0,.55); }
.ee-launcher .ava img{ width:100%; height:100%; border-radius:50%; object-fit:cover; display:block;
  border:2.5px solid #fff; }
.ee-launcher .ava .on{ position:absolute; right:2px; bottom:2px; width:14px; height:14px; border-radius:50%;
  background:#00d95f; border:2.5px solid #0c0717; }
.ee-launcher .ava .on::after{ content:""; position:absolute; inset:-4px; border-radius:50%;
  box-shadow:0 0 0 0 rgba(0,217,95,.55); animation:eePulse 2.4s infinite; }
@keyframes eePulse{ 70%{ box-shadow:0 0 0 11px rgba(0,217,95,0);} 100%{ box-shadow:0 0 0 0 rgba(0,217,95,0);} }
.ee-launcher:hover .ava{ transform:translateY(-2px); transition:transform .2s; }

/* esconde o antigo wa-float quando o chat está ativo */
.wa-float.ee-hidden{ display:none !important; }

@media (max-width:560px){
  .ee-chat-head .bk{ display:grid; place-items:center; }
  .ee-launcher{ right:16px; bottom:16px; }
  .ee-launcher .ava{ width:58px; height:58px; }
}
@media (prefers-reduced-motion: reduce){
  .ee-chat, .ee-anim, .ee-typing span, .ee-launcher .ava .on::after{ animation:none !important; }
}