/* =====================================================================
   CHAT DA CONSULTORA — estilos do widget (usado na landing padrão e
   injetado automaticamente na landing personalizada em HTML)
   Variáveis vindas do painel: --p (cor primária) --p2 (secundária)
   ===================================================================== */
:root{
  --p:#FF6A00; --p2:#111111; --fundo:#F4F4F5; --raio-botao:999px;
  --ch-ink:#20242C; --ch-cinza:#6B7280; --ch-borda:#E5E7EB; --ch-suave:#F4F4F5;
}

.ch-card{
  display:flex; flex-direction:column; width:100%; max-width:430px;
  height:540px; max-height:78vh; background:#fff; border-radius:24px;
  box-shadow:0 24px 60px rgba(17,17,17,.18), 0 2px 0 rgba(255,255,255,.6) inset;
  border:1px solid var(--ch-borda); overflow:hidden;
  font-family:'Barlow',system-ui,'Segoe UI',Arial,sans-serif; color:var(--ch-ink);
}
.ch-topo{
  display:flex; align-items:center; gap:12px; padding:14px 16px;
  background:linear-gradient(135deg, color-mix(in srgb, var(--p) 12%, #fff), #fff 70%);
  border-bottom:1px solid var(--ch-borda);
}
.ch-avatar{width:46px;height:46px;border-radius:50%;object-fit:cover;border:2px solid #fff;box-shadow:0 4px 12px rgba(17,17,17,.22)}
.ch-quem{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.ch-quem strong{font-size:15.5px;color:#1A1A1A}
.ch-quem span{font-size:12px;color:var(--ch-cinza);display:flex;align-items:center;gap:6px}
.ch-on{width:8px;height:8px;border-radius:50%;background:#34B26A;box-shadow:0 0 0 0 rgba(52,178,106,.5);animation:chPulse 1.8s infinite}
@keyframes chPulse{70%{box-shadow:0 0 0 7px rgba(52,178,106,0)}100%{box-shadow:0 0 0 0 rgba(52,178,106,0)}}
.ch-fechar{margin-left:auto;border:0;background:transparent;font-size:24px;color:var(--ch-cinza);cursor:pointer;line-height:1;padding:4px 8px;border-radius:10px}
.ch-fechar:hover{background:var(--ch-suave)}

.ch-corpo{
  flex:1; overflow-y:auto; padding:16px 14px;
  background:
    radial-gradient(420px 220px at 110% -10%, color-mix(in srgb, var(--p2) 10%, transparent), transparent 70%),
    var(--ch-suave);
  scroll-behavior:smooth;
}
.ch-corpo::-webkit-scrollbar{width:6px}
.ch-corpo::-webkit-scrollbar-thumb{background:#E5E7EB;border-radius:99px}

.msg{max-width:88%;margin:0 0 10px;padding:11px 14px;font-size:14.5px;line-height:1.5;
  animation:chSobe .28s ease both; word-wrap:break-word}
@keyframes chSobe{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.msg.bia{background:#fff;border:1px solid var(--ch-borda);border-radius:16px 16px 16px 6px;
  box-shadow:0 3px 10px rgba(17,17,17,.07)}
/* foto da consultora ao lado de cada mensagem dela */
.b-row{display:flex; align-items:flex-end; gap:8px; margin:0 0 10px; max-width:90%}
.b-row .msg{margin:0; max-width:100%}
.b-av{flex:0 0 34px; width:34px; height:34px; border-radius:50%; object-fit:cover;
  border:2px solid #fff; box-shadow:0 3px 10px rgba(17,17,17,.28);
  background:#F3F4F6; align-self:flex-end; animation:chSobe .28s ease both}
.b-row.b-cont{margin-left:42px} /* alinha a frase seguinte sob a foto (34px + 8px de espaço) */
.msg.user{margin-left:auto;color:#fff;border-radius:16px 16px 6px 16px;
  background:linear-gradient(135deg,var(--p), color-mix(in srgb, var(--p) 70%, #8A3D00));
  box-shadow:0 6px 16px color-mix(in srgb, var(--p) 35%, transparent)}
.msg.digitando{display:inline-flex;gap:5px;align-items:center;padding:14px 16px}
.msg.digitando span{width:7px;height:7px;border-radius:50%;background:#9CA3AF;animation:chDots 1.1s infinite}
.msg.digitando span:nth-child(2){animation-delay:.18s}
.msg.digitando span:nth-child(3){animation-delay:.36s}
@keyframes chDots{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-5px);opacity:1}}

/* ---------- cards de produto (FOTO + oferta) ---------- */
.msg.pwrap{background:transparent;border:0;box-shadow:none;padding:0;max-width:96%}
.pcard{display:flex;gap:12px;background:#fff;border:1px solid var(--ch-borda);border-radius:18px;
  padding:12px;margin-bottom:10px;box-shadow:0 8px 22px rgba(17,17,17,.10);
  animation:chSobe .3s ease both}
.pimg{flex:0 0 92px}
.pimg img{width:92px;height:92px;object-fit:cover;border-radius:14px;background:#F3F4F6;cursor:pointer;
  border:1px solid var(--ch-borda);transition:transform .18s ease}
.pimg img:hover{transform:scale(1.04)}
.pinfo{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
.pselo{align-self:flex-start;font-size:10.5px;font-weight:700;letter-spacing:.02em;color:#92400E;
  background:linear-gradient(135deg,#FFEDD5,#FED7AA);border:1px solid #FED7AA;border-radius:99px;padding:3px 9px}
.ptit{font-size:13.5px;line-height:1.3;color:#111111;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pmot{font-size:12px;color:var(--ch-cinza);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ppreco{font-size:16px;font-weight:800;color:var(--p)}
.ppreco s{font-size:12px;color:#9CA3AF;font-weight:500;margin-right:4px}
.pacts{display:flex;gap:8px;margin-top:4px;flex-wrap:wrap}
.pbtn{border:0;cursor:pointer;font-weight:700;font-size:13px;padding:9px 14px;border-radius:var(--raio-botao);
  font-family:inherit;transition:transform .15s ease, filter .15s ease}
.pbtn:active{transform:scale(.97)}
.pbtn.ver{color:#fff;background:linear-gradient(135deg,var(--p),color-mix(in srgb,var(--p) 65%,#8A3D00));
  box-shadow:0 8px 18px color-mix(in srgb,var(--p) 38%,transparent)}
.pbtn.ver:hover{filter:brightness(1.07)}
.pbtn.ghost{background:#fff;color:var(--p);border:1.5px solid color-mix(in srgb,var(--p) 45%,#fff)}
.pbtn.ghost:hover{background:color-mix(in srgb,var(--p) 7%,#fff)}

/* ---------- comparação visual de produtos ---------- */
.cmpwrap{max-width:97%;display:flex;flex-direction:column;gap:10px;background:transparent;border:0;padding:0}
.cmp-item{background:#fff;border:1px solid var(--ch-borda);border-radius:16px;padding:12px 13px;
  display:flex;flex-direction:column;gap:9px;box-shadow:0 4px 14px rgba(17,17,17,.05)}
.cmp-item.is-best{border-color:color-mix(in srgb,var(--p) 55%,#fff);
  box-shadow:0 8px 20px color-mix(in srgb,var(--p) 22%,transparent)}
.cmp-top{display:flex;align-items:center;gap:11px}
.cmp-img{width:52px;height:52px;border-radius:12px;overflow:hidden;flex:none;background:var(--ch-suave);border:1px solid var(--ch-borda)}
.cmp-img img{width:100%;height:100%;object-fit:cover;cursor:pointer}
.cmp-head{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.cmp-best{align-self:flex-start;font-size:10px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;
  color:#fff;background:var(--p);padding:2px 8px;border-radius:999px}
.cmp-tit{font-size:13.5px;line-height:1.25;color:#111;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cmp-score{flex:none;display:flex;align-items:baseline;gap:1px;line-height:1}
.cmp-num{font-size:23px;font-weight:800;color:var(--p)}
.cmp-den{font-size:12px;font-weight:700;color:var(--ch-cinza)}
.cmp-bar{height:7px;border-radius:99px;background:var(--ch-suave);overflow:hidden}
.cmp-bar i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--p) 70%,#8A3D00),var(--p))}
.cmp-dif{font-size:12.5px;line-height:1.5;color:#46505C}
.cmp-ver{align-self:flex-start;padding:8px 14px}

/* ---------- chips de resposta rápida ---------- */
.ch-botoes{display:flex;flex-wrap:wrap;gap:8px;padding:10px 14px 4px;background:#fff;border-top:1px solid var(--ch-borda)}
.ch-botoes:empty{display:none}
.chip{border:1.5px solid color-mix(in srgb,var(--p) 50%,#fff);color:var(--p);background:#fff;
  border-radius:999px;padding:8px 14px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;
  transition:all .15s ease;animation:chSobe .25s ease both}
.chip:hover{background:var(--p);color:#fff;box-shadow:0 6px 14px color-mix(in srgb,var(--p) 35%,transparent)}

/* ---------- formulário de captura (LGPD) ---------- */
.msg.capt{max-width:96%;display:flex;flex-direction:column;gap:8px}
.capt-txt{margin:0;font-size:14px}
.msg.capt input{border:1.5px solid var(--ch-borda);border-radius:12px;padding:10px 12px;font-size:14px;
  font-family:inherit;background:#FFFFFF;width:100%}
.msg.capt input:focus{outline:none;border-color:var(--p)}
.lgpd{color:#9CA3AF;font-size:10.5px;line-height:1.45}
.capt-acts{display:flex;gap:8px;flex-wrap:wrap}

/* ---------- entrada de texto ---------- */
.ch-form{display:flex;gap:8px;padding:10px 12px 12px;background:#fff}
.ch-form input{flex:1;border:1.5px solid var(--ch-borda);border-radius:999px;padding:12px 16px;
  font-size:14.5px;font-family:inherit;background:#FFFFFF;min-width:0}
.ch-form input:focus{outline:none;border-color:var(--p);box-shadow:0 0 0 3px color-mix(in srgb,var(--p) 14%,transparent)}
.ch-form button{flex:0 0 46px;height:46px;border:0;border-radius:50%;color:#fff;font-size:17px;cursor:pointer;
  background:linear-gradient(135deg,var(--p),color-mix(in srgb,var(--p) 65%,#8A3D00));
  box-shadow:0 8px 18px color-mix(in srgb,var(--p) 35%,transparent);transition:transform .15s ease}
.ch-form button:hover{transform:scale(1.06)}
.ch-rodape{font-size:10.5px;color:#9CA3AF;text-align:center;padding:0 12px 10px;background:#fff}
.ch-rodape a{color:inherit}

/* ---------- modo flutuante (landing personalizada sem {{CHAT}}) ---------- */
.ch-launcher{position:fixed;right:18px;bottom:18px;z-index:99990;border:0;cursor:pointer;color:#fff;
  font-family:'Barlow',system-ui,sans-serif;font-weight:700;font-size:15px;padding:15px 22px;border-radius:999px;
  background:linear-gradient(135deg,var(--p),color-mix(in srgb,var(--p) 60%,#8A3D00));
  box-shadow:0 14px 34px color-mix(in srgb,var(--p) 45%,transparent);animation:chPulse 2.4s infinite}
.ch-launcher.escondido{display:none}
.ch-flutuante{position:fixed;right:16px;bottom:18px;z-index:99991;width:min(400px,calc(100vw - 24px))}
.ch-flutuante .ch-card{height:min(580px,80vh);max-width:none}

/* Janela do chat embutido maior no desktop (no celular continua compacta) */
@media (min-width:768px){
  .ch-card{max-width:560px; height:700px; max-height:88vh}
  .ch-corpo{font-size:15px}
  .ch-flutuante .ch-card{height:min(700px,88vh)}
}
@media (min-width:1200px){
  .ch-card{max-width:600px; height:740px}
}

@media (max-width:480px){
  .ch-card{height:500px;border-radius:20px}
  .msg{font-size:14px}
  .pimg{flex-basis:80px}.pimg img{width:80px;height:80px}
  .ch-flutuante{right:8px;bottom:8px;width:calc(100vw - 16px)}
}

/* ---------- bolinha flutuante da consultora ---------- */
.ch-bolha{position:fixed;bottom:20px;z-index:99990;display:flex;align-items:flex-end;gap:12px}
.ch-bolha[hidden]{display:none}
.ch-bolha--direita{right:20px}
.ch-bolha--esquerda{left:20px;flex-direction:row-reverse}
.ch-bolha-btn{position:relative;width:62px;height:62px;border-radius:50%;border:3px solid #fff;cursor:pointer;padding:0;
  background:linear-gradient(135deg,var(--p,#FF6A00),#C24E00);box-shadow:0 14px 32px rgba(40,15,25,.35);
  display:flex;align-items:center;justify-content:center;animation:chBounce 5.5s ease-in-out infinite}
.ch-bolha-btn img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.ch-bolha-ico{font-size:27px;line-height:1;color:#fff}
.ch-bolha-ping{position:absolute;inset:-3px;border-radius:50%;border:3px solid var(--p,#FF6A00);opacity:0;
  animation:chPing 2.6s ease-out infinite;pointer-events:none}
.ch-bolha-balao{position:relative;background:#fff;color:#111111;font-size:13.5px;line-height:1.5;max-width:236px;
  padding:12px 34px 12px 14px;border-radius:16px 16px 4px 16px;box-shadow:0 16px 36px rgba(58,30,40,.22);
  animation:chSurge .35s ease;cursor:pointer}
.ch-bolha--esquerda .ch-bolha-balao{border-radius:16px 16px 16px 4px}
.ch-bolha-balao[hidden]{display:none}
.ch-balao-x{position:absolute;top:5px;right:7px;border:0;background:none;font-size:16px;color:#9CA3AF;cursor:pointer;line-height:1;padding:2px}
.ch-destaque{animation:chGlow 1.1s ease 2}
@keyframes chBounce{0%,78%,100%{transform:translateY(0)}84%{transform:translateY(-11px)}89%{transform:translateY(0)}93%{transform:translateY(-5px)}}
@keyframes chPing{0%{transform:scale(.9);opacity:.7}75%,100%{transform:scale(1.45);opacity:0}}
@keyframes chSurge{from{opacity:0;transform:translateY(8px)}}
@keyframes chGlow{0%,100%{box-shadow:0 18px 50px rgba(17,17,17,.18)}50%{box-shadow:0 0 0 7px rgba(255,106,0,.35)}}
@media (max-width:520px){
  .ch-bolha{bottom:14px}
  .ch-bolha--direita{right:12px}
  .ch-bolha--esquerda{left:12px}
  .ch-bolha-btn{width:56px;height:56px}
  .ch-bolha-balao{max-width:190px;font-size:12.5px}
}

/* ---------- chat em tela cheia (estilo WhatsApp) ---------- */
.ch-fs{position:fixed;top:0;left:0;right:0;height:100vh;height:100dvh;z-index:99996;display:none;
  align-items:center;justify-content:center;background:#0B141A}
.ch-fs.aberto{display:flex;animation:chSurge .22s ease}
.ch-fs .ch-card{width:100%;height:100%;max-height:none;border-radius:0;display:flex;flex-direction:column;box-shadow:none}
.ch-fs .ch-corpo{flex:1 1 auto;max-height:none;min-height:0}
.ch-fs .ch-topo{padding-top:max(12px, env(safe-area-inset-top))}
.ch-fs-fechar{flex:0 0 auto;width:36px;height:36px;margin-right:2px;border:0;border-radius:50%;cursor:pointer;
  background:#F3F4F6;color:#C24E00;font-size:17px;font-weight:800;line-height:1;
  display:inline-flex;align-items:center;justify-content:center}
.ch-fs-fechar:hover{background:#E5E7EB}
@media (min-width:821px){
  .ch-fs{padding:28px;background:rgba(11,20,26,.55)}
  .ch-fs .ch-card{width:min(560px,94vw);height:min(760px,90vh);border-radius:24px;box-shadow:0 30px 90px rgba(30,10,20,.45)}
}
/* painel flutuante em tela cheia (landing HTML sem {{CHAT}}, no celular) */
.ch-flutuante.ch-fs-painel{top:0;left:0;right:0;bottom:auto;width:100vw;height:100vh;height:100dvh}
.ch-flutuante.ch-fs-painel .ch-card{height:100%;max-height:none;border-radius:0;display:flex;flex-direction:column}
.ch-flutuante.ch-fs-painel .ch-corpo{flex:1 1 auto;max-height:none;min-height:0}
.ch-flutuante.ch-fs-painel .ch-fechar{order:-1;margin-left:0;margin-right:6px;width:36px;height:36px;border-radius:50%;
  background:#F3F4F6;color:#C24E00;font-size:18px;display:inline-flex;align-items:center;justify-content:center}
.ch-flutuante.ch-fs-painel .ch-topo{padding-top:max(12px, env(safe-area-inset-top))}

@keyframes chCardIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- fechamento: desconto, parcelas, benefício ---------- */
.ppreco s{color:#9CA3AF;font-weight:600;font-size:13px;margin-right:3px}
.ppreco b{font-weight:800}
.pdesc{display:inline-block;background:#E7F6EC;color:#0a7d3c;font-size:11px;font-weight:800;font-style:normal;padding:1px 7px;border-radius:999px;margin-left:5px;vertical-align:middle}
.pparc{display:block;font-size:12px;color:#374151;margin-top:1px}
.pbenef{display:inline-block;font-size:11.5px;color:#0a7d3c;font-weight:700;margin-top:6px}

/* ---------- depoimentos (prova social) no chat ---------- */
.depo-card{max-width:90%;padding:8px;background:#fff;border:1px solid #E5E7EB;border-radius:14px;box-shadow:0 4px 12px rgba(90,53,68,.06)}
.depo-media{width:100%;border-radius:10px;display:block}
.depo-yt{position:relative;cursor:pointer;border-radius:10px;overflow:hidden}
.depo-yt img{width:100%;display:block}
.depo-play{position:absolute;inset:0;margin:auto;width:54px;height:54px;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.55);color:#fff;border-radius:50%;font-size:20px}
.depo-frame{position:relative;padding-bottom:56.25%;height:0;border-radius:10px;overflow:hidden}
.depo-frame iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}
.depo-txt{font-size:13.5px;color:#4a3a42;font-style:italic;margin-top:7px;line-height:1.5}
.depo-aut{font-size:12px;color:#6B7280;font-weight:700;margin-top:2px}

/* ---------- rabicho (quadrinhos) do balão da bolinha ---------- */
.ch-bolha-balao::after{content:"";position:absolute;right:-7px;bottom:13px;width:0;height:0;
  border-top:7px solid transparent;border-bottom:7px solid transparent;border-left:9px solid #fff}
.ch-bolha--esquerda .ch-bolha-balao::after{right:auto;left:-7px;border-left:0;border-right:9px solid #fff}

/* ============ Tema WhatsApp (visual familiar pro Brasil) — ligável no painel ============ */
.ch-tema-zap.ch-card{background:#EFEAE2}
.ch-tema-zap .ch-topo{background:#075E54;border-bottom:0}
.ch-tema-zap .ch-quem strong{color:#fff}
.ch-tema-zap .ch-quem span{color:rgba(255,255,255,.85)}
.ch-tema-zap .ch-on{background:#7DEA9F;box-shadow:0 0 0 0 rgba(125,234,159,.5)}
.ch-tema-zap .ch-avatar{border-color:rgba(255,255,255,.9)}
.ch-tema-zap .ch-fechar{color:rgba(255,255,255,.92)}
.ch-tema-zap .ch-fechar:hover{background:rgba(255,255,255,.16)}
.ch-tema-zap .ch-corpo{background:#EFEAE2}
.ch-tema-zap .msg.bia{background:#fff;border-color:#fff;color:#111B21;box-shadow:0 1px 1px rgba(11,20,26,.13)}
.ch-tema-zap .msg.user{background:#DCF8C6;color:#111B21;box-shadow:0 1px 1px rgba(11,20,26,.13)}
.ch-tema-zap .ch-botoes{background:#EFEAE2;border-top-color:#E2DAD0}
.ch-tema-zap .chip{border-color:#25A884;color:#0A6B53;background:#fff}
.ch-tema-zap .chip:hover{background:#25A884;color:#fff;box-shadow:none}
.ch-tema-zap .ch-form{background:#F0F0F0}
.ch-tema-zap .ch-form input{background:#fff;border-color:#E2DAD0}
.ch-tema-zap .ch-form input:focus{border-color:#25A884;box-shadow:0 0 0 3px rgba(37,168,132,.18)}
.ch-tema-zap .ch-form button{background:#00A884}
.ch-tema-zap .ch-rodape{background:#F0F0F0;color:#6B7280}
.ch-tema-zap .msg.capt input:focus{border-color:#25A884}
/* launcher + balão no tema WhatsApp */
.ch-bolha.ch-tema-zap .ch-bolha-btn{background:linear-gradient(135deg,#25D366,#128C7E)}
.ch-bolha.ch-tema-zap .ch-bolha-ping{border-color:#25D366}

/* ============ Ajustes de celular (iPhone/Android) ============ */
/* Em aparelhos de toque, campos com 16px pra o Safari do iPhone NÃO dar zoom sozinho ao focar */
@media (pointer:coarse){
  .ch-form input, .msg.capt input{font-size:16px}
}
/* Respiro pra barrinha inferior do iPhone (home indicator) na tela cheia */
.ch-fs .ch-rodape,
.ch-flutuante.ch-fs-painel .ch-rodape{padding-bottom:max(10px, env(safe-area-inset-bottom))}