/* =========================================================
   MOTOR DO CHAT (compartilhado por /pt /es /en)
   ========================================================= */
:root{
  --verde-topo:#075E54;
  --verde-botao:#00A884;
  --verde-claro:#DCF8C6;
  --fundo:#ECE5DD;
  --texto:#111B21;
  --cinza:#667781;
  --azul-tique:#53BDEB;
  --azul-onda:#34B7F1;
  --cta:#25D366;
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overscroll-behavior:none}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:#d1d7db;color:var(--texto);
  display:flex;justify-content:center;overflow:hidden;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
}
input{-webkit-user-select:text;user-select:text}
img{-webkit-user-drag:none;pointer-events:none}

.app{
  width:100%;max-width:420px;
  height:100vh;height:100dvh;height:var(--app-h,100dvh);
  display:flex;flex-direction:column;
  background:var(--fundo);position:relative;
  box-shadow:0 0 30px rgba(0,0,0,.15);
}
@media (min-width:600px) and (min-height:560px){
  body{align-items:center;background:linear-gradient(#00A884 0 130px,#D1D7DB 130px)}
  .app{height:calc(100dvh - 48px);max-height:900px;border-radius:18px;overflow:hidden;box-shadow:0 10px 40px rgba(0,0,0,.25)}
}

/* ---------------- TOPO ---------------- */
.topo{
  background:var(--verde-topo);color:#fff;
  display:flex;align-items:center;gap:6px;
  padding:8px;padding-top:calc(8px + env(safe-area-inset-top));
  min-height:60px;flex-shrink:0;z-index:5;box-shadow:0 1px 3px rgba(0,0,0,.2);
}
.topo button{background:none;border:0;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:50%}
.topo .voltar{width:28px;height:38px}
.topo .foto{width:40px;height:40px;border-radius:50%;object-fit:cover;object-position:center 30%;background:#cfd8dc;flex-shrink:0}
.topo .info{flex:1;min-width:0;padding-left:4px;line-height:1.2}
.topo .nome{font-size:16px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topo .status{font-size:12.5px;opacity:.9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#e2f7ea}
.topo .icones{display:flex;align-items:center}
.topo .icones button{width:34px;height:36px}
.topo svg{fill:#fff}

/* ---------------- CONVERSA ---------------- */
.chat{
  flex:1;overflow-y:auto;overflow-x:hidden;padding:10px 4% 14px;
  background-color:var(--fundo);
  background-image:
    radial-gradient(circle at 15% 25%,rgba(120,100,80,.07) 2px,transparent 2.6px),
    radial-gradient(circle at 65% 70%,rgba(120,100,80,.06) 3px,transparent 3.6px),
    radial-gradient(circle at 85% 15%,rgba(120,100,80,.05) 1.6px,transparent 2.2px),
    radial-gradient(circle at 40% 55%,rgba(120,100,80,.045) 5px,transparent 5.6px),
    repeating-linear-gradient(45deg,rgba(120,100,80,.025) 0 1px,transparent 1px 22px),
    repeating-linear-gradient(-45deg,rgba(120,100,80,.025) 0 1px,transparent 1px 22px);
  background-size:70px 70px,90px 90px,50px 50px,130px 130px,auto,auto;
  -webkit-overflow-scrolling:touch;
}
.aviso{background:#FFEECD;color:#54656F;font-size:12px;line-height:1.35;text-align:center;padding:6px 12px;border-radius:8px;margin:4px auto 10px;max-width:330px;box-shadow:0 1px .5px rgba(0,0,0,.13)}
.data{text-align:center;margin:0 0 10px}
.data span{display:inline-block;background:#E1F2FB;color:#54656F;font-size:12px;padding:4px 12px;border-radius:8px;box-shadow:0 1px .5px rgba(0,0,0,.13);text-transform:uppercase;font-weight:500}

/* ---------------- BALÕES ---------------- */
.linha{display:flex;margin-top:2px;animation:entra .28s ease-out both}
.linha.nova{margin-top:10px}
.linha.bot{justify-content:flex-start}
.linha.user{justify-content:flex-end}
@keyframes entra{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}

.balao{position:relative;max-width:82%;padding:7px 9px 8px 10px;border-radius:8px;font-size:15px;line-height:1.4;box-shadow:0 1px .5px rgba(11,20,26,.13);overflow-wrap:anywhere;white-space:pre-wrap}
.bot .balao{background:#fff}
.user .balao{background:var(--verde-claro)}
.linha.nova.bot .balao{border-top-left-radius:0}
.linha.nova.user .balao{border-top-right-radius:0}
.linha.nova .balao::before{content:"";position:absolute;top:0;width:0;height:0;border-style:solid}
.linha.nova.bot .balao::before{left:-8px;border-width:0 8px 10px 0;border-color:transparent #fff transparent transparent}
.linha.nova.user .balao::before{right:-8px;border-width:0 0 10px 8px;border-color:transparent transparent transparent var(--verde-claro)}

.espaco{display:inline-block;width:46px;height:1px}
.user .espaco{width:66px}
.meta{position:absolute;right:7px;bottom:3px;font-size:11px;color:var(--cinza);display:flex;align-items:center;gap:3px;white-space:nowrap;line-height:1}
.tiques{width:16px;height:15px;fill:#8696a0;transition:fill .4s}
.tiques.lido{fill:var(--azul-tique)}

/* ---------------- ÁUDIO ---------------- */
.balao.audio{width:300px;max-width:86%;padding:7px 8px 7px 7px;white-space:normal}
.audio-box{display:flex;align-items:center;gap:6px;padding-bottom:12px}
.a-foto{position:relative;width:50px;height:50px;flex-shrink:0}
.a-foto img{width:50px;height:50px;border-radius:50%;object-fit:cover;object-position:center 30%;background:#cfd8dc}
.a-foto .mic{position:absolute;right:-3px;bottom:-2px;width:20px;height:20px;display:flex;align-items:center;justify-content:center}
.a-foto .mic svg{width:19px;height:19px;fill:#25D366;filter:drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 1px #fff)}
.play{width:34px;height:34px;flex-shrink:0;border:0;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:50%}
.play svg{width:30px;height:30px;fill:#8696a0}
.play:active{background:rgba(0,0,0,.05)}
.onda-area{flex:1;min-width:0;position:relative}
.onda{height:30px;display:flex;align-items:center;gap:2px;cursor:pointer;position:relative}
.onda i{flex:1;min-width:2px;max-width:3px;border-radius:2px;background:#b4bcc0;transition:background .15s}
.onda i.on{background:var(--azul-onda)}
.bolinha{position:absolute;top:50%;left:0;width:12px;height:12px;border-radius:50%;background:var(--azul-onda);transform:translate(-50%,-50%);pointer-events:none}
.a-dur{position:absolute;left:0;bottom:-15px;font-size:11px;color:var(--cinza)}
.balao.audio .meta{bottom:5px}

/* ---------------- DIGITANDO / GRAVANDO ---------------- */
.indicador{padding:12px 14px 10px}
.pontos{display:flex;gap:4px;align-items:center;height:12px}
.pontos span{width:8px;height:8px;border-radius:50%;background:#9aa5ab;animation:pulo 1.3s infinite ease-in-out}
.pontos span:nth-child(2){animation-delay:.18s}
.pontos span:nth-child(3){animation-delay:.36s}
@keyframes pulo{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-5px);opacity:1}}
.gravando{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--cinza);white-space:nowrap}
.gravando svg{width:20px;height:20px;fill:#25D366;animation:pisca 1s infinite}
.gravando .rec{width:9px;height:9px;border-radius:50%;background:#ea0038;animation:pisca 1s infinite}
@keyframes pisca{0%,100%{opacity:1}50%{opacity:.25}}

/* ---------------- BOTÕES DE RESPOSTA ---------------- */
.respostas{display:flex;flex-direction:column;align-items:flex-end;gap:8px;margin:10px 0 6px;animation:entra .3s ease-out both}
.respostas button{
  background:#fff;color:#008069;border:0;cursor:pointer;font-size:14.5px;font-weight:500;font-family:inherit;
  padding:11px 18px;border-radius:20px;box-shadow:0 1px 3px rgba(11,20,26,.18);
  transition:background .15s,transform .1s;max-width:92%;text-align:right;line-height:1.3;
}
.respostas button:hover{background:#f5f6f6}
.respostas button:active{transform:scale(.97)}

/* ---------------- CARDS (análise, perfil, app, brinde, oferta) ---------------- */
.balao.card{width:310px;max-width:88%;white-space:normal;padding:12px 12px 22px}
.card h4{font-size:15px;font-weight:700;margin-bottom:8px;line-height:1.3}
.card ul{list-style:none;display:flex;flex-direction:column;gap:6px}
.card li{display:flex;gap:7px;font-size:14.5px;line-height:1.35}
.card li::before{content:"✔";color:#00A884;font-weight:700;flex-shrink:0}
.card .rodape{margin-top:10px;font-size:12px;color:var(--cinza);font-style:italic}

/* análise */
.analise .topo-an{display:flex;justify-content:space-between;font-size:13px;color:var(--cinza);margin-bottom:6px}
.analise .trilho{height:8px;border-radius:6px;background:#e9edef;overflow:hidden;margin-bottom:10px}
.analise .enche{height:100%;width:0;border-radius:6px;background:linear-gradient(90deg,#00A884,#25D366)}
.analise li{opacity:0;transform:translateX(-6px);transition:opacity .3s,transform .3s}
.analise li.ok{opacity:1;transform:none}

/* perfil */
.perfil{border-left:4px solid #00A884}
.perfil .rot{font-size:11.5px;font-weight:700;letter-spacing:.6px;color:#008069;text-transform:uppercase}
.perfil .val{font-size:15px;font-weight:600;margin:1px 0 9px}
.perfil .val:last-child{margin-bottom:0}

/* mockup do app */
.celular{
  width:150px;margin:2px auto 12px;padding:7px;border-radius:24px;background:#111;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
}
.celular .tela{border-radius:18px;overflow:hidden;background:linear-gradient(180deg,#0b3d36,#0f172a);color:#fff;padding:10px 9px 12px;font-size:9.5px;line-height:1.3}
.celular .entalhe{width:44px;height:5px;border-radius:4px;background:#000;margin:-4px auto 8px;opacity:.7}
.celular .app-nome{font-weight:800;font-size:12px;letter-spacing:.3px}
.celular .app-sub{opacity:.75;margin-bottom:8px}
.celular .anel{width:58px;height:58px;margin:0 auto 8px;border-radius:50%;
  background:conic-gradient(#25D366 0 68%,rgba(255,255,255,.15) 68% 100%);display:flex;align-items:center;justify-content:center}
.celular .anel span{width:46px;height:46px;border-radius:50%;background:#0d2a2a;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:11px}
.celular .item{display:flex;justify-content:space-between;align-items:center;background:rgba(255,255,255,.09);border-radius:7px;padding:5px 6px;margin-top:4px}
.celular .item b{font-weight:600}
.celular .item i{font-style:normal;opacity:.7}
.celular .cta-app{margin-top:7px;text-align:center;background:#25D366;color:#063;border-radius:8px;padding:5px;font-weight:800}

/* brinde */
.brinde .icone{font-size:34px;text-align:center;line-height:1;margin-bottom:6px}
.brinde h4{text-align:center}

/* oferta */
.oferta{text-align:left}
.oferta .rotulo{font-size:13px;color:var(--cinza);text-align:center}
.oferta .preco{font-size:34px;font-weight:800;text-align:center;color:#008069;line-height:1.1;margin:2px 0 10px}
.oferta .selo{margin-top:10px;display:flex;align-items:center;gap:8px;background:#f0faf6;border:1px dashed #00A884;border-radius:8px;padding:7px 9px;font-size:13px;font-weight:600;color:#075E54}

/* ---------------- BOTÃO FINAL ---------------- */
.linha.cta{justify-content:center;margin:14px 0 6px}
.botao-final{
  display:block;width:100%;max-width:390px;background:var(--cta);color:#fff;text-decoration:none;text-align:center;
  font-size:16.5px;font-weight:800;letter-spacing:.3px;padding:17px 20px;border-radius:30px;
  animation:pulsa 1.8s ease-in-out infinite;box-shadow:0 4px 14px rgba(37,211,102,.45);
}
.botao-final:active{transform:scale(.98)}
@keyframes pulsa{
  0%,100%{transform:scale(1);box-shadow:0 4px 14px rgba(37,211,102,.45),0 0 0 0 rgba(37,211,102,.5)}
  50%{transform:scale(1.025);box-shadow:0 4px 14px rgba(37,211,102,.45),0 0 0 10px rgba(37,211,102,0)}
}

/* ---------------- BARRA DE DIGITAÇÃO ---------------- */
.barra{display:flex;align-items:flex-end;gap:6px;padding:6px;padding-bottom:calc(6px + env(safe-area-inset-bottom));flex-shrink:0}
.campo{flex:1;display:flex;align-items:center;background:#fff;border-radius:24px;min-height:48px;padding:0 6px 0 4px;box-shadow:0 1px .5px rgba(11,20,26,.13);transition:opacity .25s}
.campo .emoji{width:40px;height:40px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.campo .emoji svg{width:24px;height:24px;fill:#8696a0}
.campo input{flex:1;min-width:0;border:0;outline:0;background:transparent;font-size:16px;color:var(--texto);padding:10px 4px;font-family:inherit}
.campo input::placeholder{color:#8696a0}
.enviar{width:48px;height:48px;border-radius:50%;border:0;flex-shrink:0;cursor:pointer;background:var(--verde-botao);display:flex;align-items:center;justify-content:center;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:opacity .25s,transform .1s}
.enviar svg{width:22px;height:22px;fill:#fff;margin-left:3px}
.enviar:active{transform:scale(.93)}
.barra.travada .campo,.barra.travada .enviar{opacity:.55}
.barra.travada .enviar{cursor:default}
.campo.erro{animation:treme .35s}
@keyframes treme{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}

/* ---------------- TELAS PEQUENAS ---------------- */
@media (max-width:360px){
  .balao{font-size:14.5px;max-width:86%}
  .balao.card{max-width:92%}
  .topo .icones button{width:30px}
  .topo .nome{font-size:15px}
  .balao.audio{max-width:92%}
  .a-foto,.a-foto img{width:42px;height:42px}
  .respostas button{font-size:13.5px;padding:9px 13px}
  .botao-final{font-size:15px;padding:15px 12px}
}
@media (max-height:480px) and (orientation:landscape){
  .topo{min-height:48px;padding-top:4px;padding-bottom:4px}
  .topo .foto{width:34px;height:34px}
  .campo,.enviar{min-height:42px}
  .enviar{width:42px;height:42px}
}
@media (prefers-reduced-motion:reduce){
  .botao-final{animation:none}
}

/* ---------------- VÍDEO E IMAGEM ---------------- */
.balao.midia{width:290px;max-width:84%;padding:4px 4px 22px;white-space:normal}
.balao.midia video,.balao.midia img{display:block;width:100%;max-height:380px;object-fit:cover;border-radius:6px;background:#000}
.balao.midia img{background:#e9edef}
.balao.midia .legenda{padding:6px 6px 0;font-size:14.5px;line-height:1.35;white-space:pre-wrap}
.balao.midia video{pointer-events:auto}

/* =========================================================
   GUIA DE INSTALAÇÃO
   ========================================================= */
/* selo "Passo X de 5" */
.etapa{
  display:table;margin:16px auto 8px;padding:6px 14px;border-radius:14px;
  background:#075E54;color:#fff;font-size:12.5px;font-weight:700;letter-spacing:.2px;
  box-shadow:0 1px 3px rgba(0,0,0,.18);animation:entra .28s ease-out both;text-align:center;
}
/* botão "Precisa de ajuda?" fixo */
.ajuda{
  position:absolute;right:10px;top:calc(68px + env(safe-area-inset-top));z-index:6;
  background:#fff;color:#075E54;text-decoration:none;font-size:12px;font-weight:700;
  padding:6px 11px;border-radius:16px;box-shadow:0 2px 6px rgba(0,0,0,.18);
}
.ajuda:active{transform:scale(.96)}
/* botão de link dentro do chat (baixar, gerar licença) */
.linha.link{justify-content:flex-start;margin:8px 0 4px}
.botao-link{
  display:inline-block;max-width:86%;background:#00A884;color:#fff;text-decoration:none;
  font-size:15px;font-weight:700;padding:12px 18px;border-radius:22px;
  box-shadow:0 2px 8px rgba(0,168,132,.35);
}
.botao-link:active{transform:scale(.97)}
/* imagem (print) */
.balao.midia{width:290px;max-width:86%;padding:4px 4px 22px;white-space:normal}
.balao.midia img{display:block;width:100%;border-radius:6px;background:#e9edef}
.balao.midia .legenda{padding:6px 6px 0;font-size:14px;line-height:1.35}
.img-falta{height:150px;display:flex;align-items:center;justify-content:center;color:#667781;font-size:14px;background:#e9edef;border-radius:6px}

.balao.midia video{display:block;width:100%;max-height:380px;border-radius:6px;background:#000}