/* crie-zap.css — versão em avaliação do crie (crie-zap.html).
 * body.simples: os ajustes de simplificação (valem com ou sem a cara de WhatsApp):
 *   sem texto de apoio embaixo dos botões, cor num toque, montagem do site/loja só pra ver
 *   (nada clicável), edição sem cores e o "Publicar site" grande e brilhando.
 * body.zap: a conversa com cara de WhatsApp (só a conversa; montagem e edição continuam iguais).
 * Carrega depois do <style> do crie.html, então só sobrescreve. */

/* ================= simplificada ================= */
/* sem subtítulo nem texto apagado de explicação */
.simples .tipo small, .simples .chat-dica, .simples .lj-estilo-textos small, .simples .chat-previa small,
.simples .sis-dica:not(.sis-dica-marcadas), .simples .sis-nota, .simples .bot-resumo-dica, .simples .lj-prog-depois,
.simples .chat-espiada .textos small, .simples .logo-textos span:not(.problema) { display: none !important; }

/* o que criar: ícone + nome */
.simples .tipo { gap: 14px; padding: 12px 14px; }
.simples .tipo b { font-size: 16px; }
.simples .tipo-ico { flex: none; width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--ax-marca-fundo); color: var(--ax-marca-clara); }
.simples .tipo .tipo-ico svg { width: 22px; height: 22px; color: inherit; transform: none !important; }

/* cor num toque: só as bolinhas (a última abre o seletor do aparelho) e "Escolhe pra mim" */
.simples .cor-simples { display: flex; flex-direction: column; gap: 14px; width: 100%; max-width: 400px; padding: 14px; }
.simples .cor-simples .bolinhas { width: 100%; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.simples .cor-simples .bolinha { width: auto; height: auto; aspect-ratio: 1; max-width: 46px; }
.simples .bolinha.arco { border: 0; background: conic-gradient(#f43f5e, #f59e0b, #22c55e, #06b6d4, #6366f1, #d946ef, #f43f5e); box-shadow: inset 0 0 0 3px rgba(255,255,255,.75); cursor: pointer; overflow: hidden; }
.simples .bolinha.arco input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }
.simples .bolinha.arco[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--ax-superficie), 0 0 0 5px var(--ax-marca-clara); }

/* logo: dois botões */
.simples .logo-simples { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 400px; padding: 0; border: 0; background: none; }
.simples .logo-simples .btn-marca svg { width: 18px; height: 18px; }
.simples .logo-simples .problema { font-size: 13.5px; color: var(--ax-erro); }

/* montagem do site: a prévia é só pra ver (o iframe está em modo apresentação) */
.simples.apresentando .estudio-janela { position: relative; }
.simples.apresentando .estudio-janela::after { content: ""; position: absolute; inset: 0; z-index: 5; }
.simples.apresentando .est-faixa .botao-zero { display: none; }
@media (max-width: 1023px) {
    body.simples.apresentando { overflow: hidden; }
    body.simples.apresentando .estudio-painel { display: none; }
}

/* montagem da loja: idem (sem tocar na loja, sem aba "Conversa", sem "Pular") */
.simples .chat-palco-moldura::after { content: ""; position: absolute; inset: 0; z-index: 3; }
.simples .palco-conversa { display: none !important; }

/* edição: sem as cores; o "Publicar site" no lugar delas, grande e brilhando */
.simples .ed-topo-cores, .simples .ed-topo-titulo span { display: none !important; }
.simples .ed-topo { grid-template-areas: "titulo zero publicar"; }
.simples #ed-publicar { position: relative; overflow: hidden; isolation: isolate; height: 52px; padding: 0 30px; border-radius: 99px; font-size: 16.5px; font-weight: 700; letter-spacing: -.01em; color: #03140c; background: linear-gradient(135deg, #10b981, #34d399 55%, #10b981); animation: pub-pulso 2.2s ease-in-out infinite; }
.simples #ed-publicar svg { width: 20px; height: 20px; flex: none; }
.simples #ed-publicar::after { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: -60%; width: 45%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.8), transparent); transform: skewX(-20deg); animation: pub-brilho 2.8s ease-in-out infinite; }
.simples #ed-publicar:hover { opacity: 1; filter: brightness(1.06); }
@keyframes pub-brilho { 0%, 50% { left: -60%; } 100% { left: 135%; } }
@keyframes pub-pulso {
    0%, 100% { box-shadow: 0 0 0 0 rgba(52,211,153,.6), 0 14px 34px -12px rgba(16,185,129,.9); }
    50% { box-shadow: 0 0 0 9px rgba(52,211,153,0), 0 14px 34px -12px rgba(16,185,129,.9); }
}
@media (max-width: 1023px) {
    body.simples.editando-site .ed-topo { grid-template-columns: minmax(0, 1fr); grid-template-areas: "titulo" "publicar"; gap: 10px; }
    .simples .ed-topo-titulo { flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; }
    .simples .ed-topo-titulo .botao-zero { padding: 0; align-self: center; }
    .simples #ed-publicar { width: 100%; height: 52px; padding: 0 20px; font-size: 17px; }
}

/* ================= cara de WhatsApp (só a conversa) ================= */
.zap-voltar, .zap-avatar, .zap-quem, .zap-sistema { display: none; }

.zap .chat {
    --ax-fundo: #efeae2; --ax-fundo-2: #f0f2f5; --ax-superficie: #ffffff; --ax-superficie-2: #f0f2f5; --ax-superficie-3: #e9edef;
    --ax-linha: rgba(11,20,26,.08); --ax-linha-forte: rgba(11,20,26,.16);
    --ax-texto: #111b21; --ax-suave: #54656f; --ax-apagado: #8696a0;
    --ax-marca: #008069; --ax-marca-texto: #ffffff !important; --ax-marca-hover: #017561; --ax-marca-clara: #008069;
    --ax-marca-fundo: rgba(0,168,132,.12); --ax-marca-sombra: rgba(0,128,105,.3);
    --ax-verde: #00a884; --ax-erro: #d42f2f;
    --zap-cabeca: #008069; --zap-entrada: #ffffff; --zap-saida: #d9fdd3; --zap-hora: #667781; --zap-azul: #53bdeb;
    --zap-botao: #008069; --zap-sombra: 0 1px .5px rgba(11,20,26,.13);
    color-scheme: light;
    background-color: #efeae2;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg fill='none' stroke='%235b4b3a' stroke-opacity='.07' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 20h24a6 6 0 0 1 6 6v11a6 6 0 0 1-6 6H30l-7 6v-6h-5a6 6 0 0 1-6-6V26a6 6 0 0 1 6-6z'/%3E%3Cpath d='M126 28c-4-6-14-4-14 4 0 7 14 14 14 14s14-7 14-14c0-8-10-10-14-4z'/%3E%3Cpath d='M66 92l3.5 7 7.7 1.1-5.6 5.4 1.3 7.7-6.9-3.6-6.9 3.6 1.3-7.7-5.6-5.4 7.7-1.1z'/%3E%3Ccircle cx='146' cy='118' r='9'/%3E%3Cpath d='M24 140v-18l14-3v18'/%3E%3Ccircle cx='20' cy='140' r='4'/%3E%3Ccircle cx='34' cy='137' r='4'/%3E%3Crect x='104' y='66' width='15' height='24' rx='3'/%3E%3Cpath d='M110 85h3'/%3E%3Cpath d='M66 160c4-4 8 4 12 0s8 4 12 0'/%3E%3Cpath d='M78 30h.01M160 70h.01M40 82h.01M112 150h.01M164 164h.01M8 104h.01'/%3E%3Cpath d='M150 148l6 6M156 148l-6 6'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 180px 180px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.zap .chat::before, .zap .chat .chat-capa, .zap .chat .avatar { display: none !important; }
.zap .chat ::selection { background: rgba(0,168,132,.25); color: inherit; }

/* topo: voltar, foto, nome e "online" / "digitando…" */
.zap .chat .chat-topo { position: relative; z-index: 4; height: calc(60px + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) 8px 0 4px; gap: 8px; background: var(--zap-cabeca); color: #fff; box-shadow: 0 1px 3px rgba(11,20,26,.18); }
.zap .chat .chat-marca, .zap .chat .chat-sep, .zap .chat .chat-onde { display: none !important; }
.zap .chat .zap-voltar { display: flex; align-items: center; justify-content: center; flex: none; width: 38px; height: 38px; border-radius: 50%; color: #fff; }
.zap .chat .zap-voltar svg { width: 22px; height: 22px; }
.zap .chat .zap-voltar:hover { background: rgba(255,255,255,.12); }
.zap .chat .zap-avatar { display: flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: #fff; --axo-mark: #7B2FF0; }
.zap .chat .zap-avatar .axo-mark { font-size: 12px; transform: none; }
.zap .chat .zap-quem { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.zap .chat .zap-quem b { font-size: 17px; font-weight: 600; color: #fff; }
.zap .chat .zap-quem small { font-size: 13px; color: rgba(255,255,255,.82); }
.zap .chat .zap-dig { display: none; }
.zap .chat.ia-digitando .zap-dig { display: inline; }
.zap .chat.ia-digitando .zap-on { display: none; }
.zap .chat .chat-recomecar { width: 40px; height: 40px; padding: 0; justify-content: center; border-radius: 50%; color: #fff !important; font-size: 0 !important; }
.zap .chat .chat-recomecar .chat-ico { width: 21px; height: 21px; }
.zap .chat .chat-recomecar:hover { background: rgba(255,255,255,.12); color: #fff !important; }
@media (min-width: 640px) { .zap .chat .chat-topo { padding: 0 16px 0 10px; } }

/* data e o aviso amarelo do começo */
.zap .chat .zap-sistema { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 0 2px; }
.zap .chat .zap-data { padding: 5px 12px; border-radius: 8px; background: #fff; color: #54656f; font-size: 12.5px; font-weight: 500; text-transform: uppercase; letter-spacing: .02em; box-shadow: var(--zap-sombra); }
.zap .chat .zap-aviso { max-width: 320px; padding: 6px 12px; border-radius: 8px; background: #ffeecd; color: #54656f; font-size: 12.5px; line-height: 1.4; text-align: center; box-shadow: var(--zap-sombra); }

/* mensagens */
.zap .chat .chat-coluna { max-width: 860px; padding: 0 12px; }
@media (min-width: 640px) { .zap .chat .chat-coluna { padding: 0 32px; } }
.zap .chat .chat-log { gap: 10px; padding: 10px 0 14px; }
.zap .chat .fala { gap: 0; }
.zap .chat .fala.continua { margin-top: -8px; }
.zap .chat .fala-corpo { gap: 4px; padding-top: 0; align-items: flex-start; }
.zap .chat .fala-corpo > p { position: relative; width: fit-content; max-width: min(88%, 540px); padding: 6px 9px 8px; border-radius: 8px; background: var(--zap-entrada); color: var(--ax-texto); font-size: 15.5px; line-height: 1.4; box-shadow: var(--zap-sombra); }
.zap .chat .fala:not(.continua) .fala-corpo > p:first-child { border-top-left-radius: 0; }
.zap .chat .fala:not(.continua) .fala-corpo > p:first-child::before { content: ""; position: absolute; top: 0; left: -8px; width: 8px; height: 13px; background: var(--zap-entrada); clip-path: polygon(0 0, 100% 0, 100% 100%); }
.zap .chat .escrevendo::after { background: var(--zap-hora); }
.zap .chat .zap-hora { float: right; position: relative; top: 7px; display: inline-flex; align-items: center; gap: 3px; margin-left: 12px; font-size: 11px; line-height: 15px; color: var(--zap-hora); white-space: nowrap; }
.zap .chat .zap-hora svg { width: 16px; height: 11px; color: var(--zap-azul); }
.zap .chat .digitando { padding: 12px 14px; border: 0; border-radius: 0 8px 8px 8px; background: var(--zap-entrada); box-shadow: var(--zap-sombra); }
.zap .chat .digitando i { background: #8696a0; }
.zap .chat .digitando-txt { color: var(--zap-hora); }

.zap .chat .fala-cli { padding-left: 12%; }
.zap .chat .fala-cli p { position: relative; display: block; max-width: min(88%, 540px); padding: 6px 9px 8px; border-radius: 8px 0 8px 8px; background: var(--zap-saida); color: var(--ax-texto); font-size: 15.5px; line-height: 1.4; box-shadow: var(--zap-sombra); }
.zap .chat .fala-cli p::after { content: ""; position: absolute; top: 0; right: -8px; width: 8px; height: 13px; background: var(--zap-saida); clip-path: polygon(0 0, 100% 0, 0 100%); }
.zap .chat .fala-cli .bolinha-cor { display: inline-block; width: 15px; height: 15px; margin-right: 7px; vertical-align: -2px; box-shadow: 0 0 0 2px #fff; }
.zap .chat .fala-cli img { padding: 6px; border-radius: 8px 0 8px 8px; background: var(--zap-saida); box-shadow: var(--zap-sombra); }

/* opções: os botões de resposta do WhatsApp (um embaixo do outro, bem de botão) */
.zap .chat .tipos, .zap .chat .tipos.tres, .zap .chat .tipos.quatro { display: flex; flex-direction: column; gap: 4px; width: 100%; max-width: 400px; }
.zap .chat .tipo { border: 0; border-radius: 8px; background: #fff; box-shadow: var(--zap-sombra); padding: 11px 14px; }
.zap .chat .tipo b { color: var(--ax-texto); font-weight: 600; }
.zap .chat .tipo-ico { border-radius: 50%; background: #e7f8f1; color: var(--zap-botao); }
@media (hover: hover) { .zap .chat .tipo:hover { transform: none; background: #f5f6f6; box-shadow: var(--zap-sombra); } }
.zap .chat .chat-linha { flex-direction: column; align-items: stretch; gap: 4px; width: 100%; max-width: 400px; }
.zap .chat .chat-chip { justify-content: center; min-height: 46px; padding: 10px 16px; border: 0; border-radius: 8px; background: #fff; color: var(--zap-botao); font-size: 15.5px; font-weight: 500; text-align: center; box-shadow: var(--zap-sombra); }
@media (hover: hover) { .zap .chat .chat-chip:hover { border: 0; background: #f5f6f6; } }
.zap .chat .chat-chip svg { color: var(--zap-botao); }
.zap .chat .chat-chip.endereco { justify-content: flex-start; color: var(--ax-suave); }
.zap .chat .btn-marca { height: 46px; border-radius: 8px; box-shadow: var(--zap-sombra); }

/* cor: um cartão branco com as bolinhas; "Escolhe pra mim" no rodapé dele */
.zap .chat .cor-simples { border: 0; border-radius: 8px; background: #fff; box-shadow: var(--zap-sombra); padding: 14px 14px 0; gap: 12px; }
.zap .chat .cor-simples .bolinha { box-shadow: inset 0 0 0 1px rgba(11,20,26,.12); }
.zap .chat .cor-simples .chat-linha { max-width: none; margin: 0 -14px; border-top: 1px solid #e9edef; }
.zap .chat .cor-simples .chat-chip { box-shadow: none; border-radius: 0 0 8px 8px; }

/* logo: os dois botões de resposta */
.zap .chat .logo-simples .btn-marca { background: #fff; color: var(--zap-botao) !important; font-weight: 500; }
.zap .chat .logo-simples .btn-marca svg { color: var(--zap-botao); }
@media (hover: hover) { .zap .chat .logo-simples .btn-marca:hover { background: #f5f6f6 !important; } }

.zap .chat .endereco-final { border: 0; border-radius: 8px; background: #fff; color: var(--ax-suave); box-shadow: var(--zap-sombra); }
.zap .chat .lj-estilo, .zap .chat .sis-resumo, .zap .chat .sis-prazo, .zap .chat .sis-seu, .zap .chat .logo-caixa:not(.logo-simples), .zap .chat .cor-caixa:not(.cor-simples), .zap .chat .lj-montagem { border: 0; border-radius: 8px; box-shadow: var(--zap-sombra); }
.zap .chat .lj-ver { border-radius: 10px; }
.zap .chat .chat-erro { background: #fff; border: 0; border-radius: 8px; box-shadow: var(--zap-sombra); }

/* campo: a pílula branca e o botão redondo verde do lado */
.zap .chat .chat-baixo { max-width: 860px; padding: 6px 8px max(8px, env(safe-area-inset-bottom, 0px)); }
@media (min-width: 640px) { .zap .chat .chat-baixo { padding-left: 32px; padding-right: 32px; } }
.zap .chat .chat-campo { position: relative; align-items: center; min-height: 48px; margin-right: 56px; padding: 2px 8px 2px 18px; border: 0; border-radius: 24px; background: #fff; box-shadow: var(--zap-sombra); }
.zap .chat .chat-campo:focus-within, .zap .chat .chat-campo.destaque, .zap .chat .chat-campo.destaque:focus-within { border: 0; box-shadow: var(--zap-sombra); }
.zap .chat .chat-campo textarea, .zap .chat .chat-campo input { min-height: 44px; padding: 11px 0; color: var(--ax-texto); font-size: 16px; }
.zap .chat .chat-enviar { position: absolute; right: -56px; bottom: 0; width: 48px; height: 48px; background: #00a884; color: #fff !important; box-shadow: 0 1px 2px rgba(11,20,26,.2); }
.zap .chat .chat-enviar:disabled { background: #00a884; color: #fff !important; opacity: .5; }
@media (hover: hover) { .zap .chat .chat-enviar:not(:disabled):hover { background: #06cf9c; } }
.zap .chat .chat-enviar .chat-ico { width: 22px; height: 22px; margin-left: 2px; }
.zap .chat .chat-ddi { color: var(--ax-suave); border-color: var(--ax-linha-forte); }
.zap .chat .chat-previa { margin: 0 64px 0 12px; padding: 6px 10px; border-radius: 8px; background: rgba(255,255,255,.9); }

/* loja montando: o lado da conversa com o mesmo fundo; o palco num cinza claro */
.zap .chat.com-palco .chat-palco { background: #f0f2f5; }
.zap .chat.com-palco .chat-conversa { background-color: #efeae2; background-image: inherit; }
.zap .chat .chat-veu.aberto { background: rgba(11,20,26,.35); }
.zap #mobile-panel { box-shadow: none !important; }

/* ---------- acabamento ---------- */
/* selo azul de conta verificada (o do Meta Verified) ao lado do nome */
.zap .chat .zap-quem b { display: inline-flex; align-items: center; gap: 5px; }
.zap .chat .zap-quem b::after { content: ""; flex: none; width: 16px; height: 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon points='12.00,0.00 14.64,2.15 18.00,1.61 19.21,4.79 22.39,6.00 21.85,9.36 24.00,12.00 21.85,14.64 22.39,18.00 19.21,19.21 18.00,22.39 14.64,21.85 12.00,24.00 9.36,21.85 6.00,22.39 4.79,19.21 1.61,18.00 2.15,14.64 0.00,12.00 2.15,9.36 1.61,6.00 4.79,4.79 6.00,1.61 9.36,2.15' fill='%230866ff' stroke='%230866ff' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M7.4 12.3l3 3 6.2-6.4' fill='none' stroke='white' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.zap .chat .zap-avatar { box-shadow: 0 0 0 2px rgba(255,255,255,.35); }
/* digitando: o balão dos pontinhos com o biquinho também */
.zap .chat .fala:not(.continua) .digitando { position: relative; }
.zap .chat .fala:not(.continua) .digitando::before { content: ""; position: absolute; top: 0; left: -8px; width: 8px; height: 13px; background: var(--zap-entrada); clip-path: polygon(0 0, 100% 0, 100% 100%); }
/* botões de resposta: resposta ao toque */
.zap .chat .tipo, .zap .chat .chat-chip, .zap .chat .logo-simples .btn-marca { transition: background-color .15s ease, transform .12s ease; }
.zap .chat .tipo:active, .zap .chat .chat-chip:active, .zap .chat .logo-simples .btn-marca:active { transform: scale(.985); background: #eef1f2; }
.zap .chat .tipo svg:last-child { color: #8696a0; }
/* balão do cliente entra de baixo, como mensagem enviada */
@keyframes zap-envia { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.zap .chat .fala-cli { animation: zap-envia .28s cubic-bezier(.2,.8,.2,1) both; }
/* endereço do site/loja: como um link de mensagem */
.zap .chat .endereco-final { font: 500 14px/1.35 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: #027eb5; }
.zap .chat .endereco-final b { color: #027eb5; }
.zap .chat .endereco-final svg { color: #00a884; }
/* a bolinha tocada cresce antes de enviar */
.zap .chat .cor-simples .bolinha[aria-pressed="true"] { transform: scale(1.12); box-shadow: 0 0 0 3px #fff, 0 0 0 5px #00a884; }
/* rolagem fina e discreta no fundo claro */
.zap .chat .chat-rolagem { scrollbar-color: rgba(11,20,26,.18) transparent; }

/* foto do perfil: o favicon da Axolutions (roxo com a marca branca) */
.zap .chat .zap-avatar { overflow: hidden; background: #631dbe; }
.zap .chat .zap-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------- guia na prática (edição do site) ---------- */
/* o balão fica embaixo, sem tapar a prévia nem bloquear o toque nela */
.simples .guia { position: fixed; left: 0; right: 0; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 121; display: flex; justify-content: center; padding: 0 12px; pointer-events: none; }
.simples .guia-balao { position: relative; pointer-events: auto; width: min(360px, 100%); }
.simples .guia-balao::before { display: none; }
/* a dica "Toque no texto ou na foto" embaixo do Publicar sai (o guia ensina na prática) */
.simples #ed-dica { display: none !important; }
@media (max-width: 640px) { .simples .janela-url { display: flex !important; } }

/* parceiro sem logo: a inicial do nome no lugar da foto */
.zap .chat .zap-avatar:not(:has(img)) { background: #8f00cc; color: #fff; font: 700 19px/1 -apple-system, "Segoe UI", Roboto, sans-serif; }
/* logo de parceiro (não é o ícone quadrado da Axolutions): inteira, com respiro, no fundo escuro do
   menu do site dele (as logos dos parceiros são feitas pra ele) */
.zap .chat .zap-avatar:has(img:not([src*="apple-touch-icon"])) { background: #111118; }
.zap .chat .zap-avatar img:not([src*="apple-touch-icon"]) { object-fit: contain; padding: 5px; }