/* crie-bot.css — ramo "Chatbot de WhatsApp" do crie.html (js/crie-bot.js).
 * O resumo usa os tokens do chat (--ax-*). O celular de teste imita o WhatsApp
 * no tema escuro (as cores --wa-* são as do app). As animações continuam com
 * movimento reduzido (são curtas e sem deslocamento grande). */

.chat {
    --wa-fundo: #0b141a; --wa-painel: #111b21; --wa-topo: #202c33; --wa-sai: #005c4b; --wa-entra: #202c33;
    --wa-campo: #2a3942; --wa-texto: #e9edef; --wa-suave: #aebac1; --wa-meta: #8696a0; --wa-verde: #00a884;
    --wa-verde-vivo: #25d366; --wa-azul: #53bdeb; --wa-amarelo: #ffd279; --wa-aviso: #182229;
}

/* ================= conversa ================= */
.bot-sugestoes .chat-chip { max-width: 100%; text-align: left; line-height: 1.3; }
/* pergunta aberta: o chip só escreve no campo (o "+" diz isso) */
.bot-sugestoes .bot-preenche { border-style: dashed; color: var(--ax-suave); }
.bot-sugestoes .bot-preenche svg { width: 14px; height: 14px; color: var(--ax-marca-clara); }
.bot-sugestoes .bot-preenche.usado { opacity: 1; border-style: solid; border-color: color-mix(in srgb, var(--ax-marca-clara) 45%, transparent); background: var(--ax-marca-fundo); color: var(--ax-texto); }

/* retomar a entrevista: o que já foi respondido, recolhido */
.bot-ja-contou { width: 100%; max-width: 560px; border: 1px solid var(--ax-linha-forte); border-radius: 16px; background: var(--ax-superficie); animation: ax-entra .46s var(--ax-curva) both; }
.bot-ja-contou summary { cursor: pointer; padding: 12px 16px; font-size: 14px; font-weight: 500; color: var(--ax-suave); list-style-position: inside; }
.bot-ja-contou[open] summary { border-bottom: 1px solid var(--ax-linha); }
.bot-ja-contou dl { margin: 0; padding: 10px 16px 14px; display: grid; gap: 4px; max-height: 320px; overflow-y: auto; }
.bot-ja-contou dt { font-size: 12.5px; color: var(--ax-apagado); margin-top: 8px; }
.bot-ja-contou dt:first-child { margin-top: 0; }
.bot-ja-contou dd { margin: 0; font-size: 14px; line-height: 1.45; color: var(--ax-texto); white-space: pre-line; overflow-wrap: anywhere; }

/* onde o atendente fica: o painel e com que número entrar */
.bot-painel { width: 100%; max-width: 560px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 12px 12px 14px; border-radius: 18px; border: 1px solid var(--ax-linha-forte); background: var(--ax-superficie); animation: ax-entra .46s var(--ax-curva) both; }
.bot-painel-ico { flex: none; width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--ax-marca-fundo); color: var(--ax-marca-clara); }
.bot-painel-ico svg { width: 18px; height: 18px; }
/* cabe ao lado do texto quando sobra espaço; senão desce e ocupa a linha toda */
.bot-painel-txt { flex: 999 1 190px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bot-painel-txt b { font-size: 14.5px; font-weight: 600; color: var(--ax-texto); overflow-wrap: break-word; }
.bot-painel-txt small { font-size: 13px; line-height: 1.4; color: var(--ax-suave); }
.bot-painel-abrir { flex: 1 0 auto; justify-content: center; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border-radius: 99px; background: var(--ax-marca); color: var(--ax-marca-texto) !important; font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background-color .2s, transform .15s; }
.bot-painel-abrir svg { width: 16px; height: 16px; }
@media (hover: hover) { .bot-painel-abrir:hover { background: var(--ax-marca-hover); } }
.bot-painel-abrir:active { transform: scale(.97); }

.bot-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; width: 100%; max-width: 600px; }
.bot-acoes > * { animation: ax-entra .46s var(--ax-curva) both; animation-delay: var(--atraso, 0ms); }
.bot-acoes .btn-marca { height: 48px; padding: 0 22px; font-size: 15.5px !important; }
.bot-acoes svg { width: 18px; height: 18px; flex: none; }
.bot-acoes .chat-chip svg { width: 16px; height: 16px; }
@media (max-width: 639px) { .bot-acoes .btn-marca { width: 100%; } .bot-acoes .chat-chip { flex: 1 1 auto; justify-content: center; } }
.chat.com-bot .bot-acoes .btn-marca { width: 100%; }
.chat.com-bot .bot-acoes .chat-chip { flex: 1 1 auto; justify-content: center; }

/* ---- resumo do bot ---- */
.bot-resumo {
    width: 100%; max-width: 600px; display: flex; flex-direction: column; gap: 14px; padding: 20px; border-radius: 22px;
    border: 1px solid var(--ax-linha-forte);
    background: linear-gradient(180deg, color-mix(in srgb, var(--ax-superficie-2) 100%, transparent), var(--ax-superficie));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 30px 70px -40px var(--ax-marca-sombra), 0 2px 6px -2px rgba(0,0,0,.4);
    animation: ax-entra .46s var(--ax-curva) both;
}
@media (min-width: 640px) { .bot-resumo { padding: 24px; } }
/* celular: o resumo usa a largura da conversa toda (sai de baixo do avatar) */
@media (max-width: 639px) {
    .fala-corpo > .bot-resumo { width: calc(100% + 44px); max-width: none; margin-left: -44px; padding: 18px 16px; }
    .bot-avatar { width: 44px; height: 44px; font-size: 19px; }
    .bot-resumo-nome .bot-valor { font-size: 18px; }
    .bot-bloco { gap: 10px; }
}
.bot-resumo-topo { display: flex; align-items: center; gap: 14px; padding: 4px; margin: -4px; border-radius: 16px; }
.bot-avatar {
    position: relative; flex: none; width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: radial-gradient(120% 120% at 30% 20%, color-mix(in srgb, var(--cor) 70%, white), var(--cor) 60%);
    color: #fff; font: 600 22px/1 "DM Sans", sans-serif;
    box-shadow: 0 0 0 3px var(--ax-superficie), 0 0 0 5px color-mix(in srgb, var(--cor) 45%, transparent), 0 14px 30px -14px var(--cor);
}
.bot-avatar.ligado::after { content: ""; position: absolute; right: 0; bottom: 1px; width: 13px; height: 13px; border-radius: 50%; background: var(--wa-verde-vivo); box-shadow: 0 0 0 3px var(--ax-superficie); animation: ax-pop .42s var(--ax-curva) both; }
.bot-resumo-nome { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.bot-resumo-nome .bot-valor { font: 600 20px/1.25 "DM Sans", sans-serif; letter-spacing: -.015em; }
.bot-selos { display: flex; flex-wrap: wrap; gap: 6px; }
.bot-selo { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 99px; border: 1px solid var(--ax-linha-forte); font-size: 12px; font-weight: 500; color: var(--ax-suave); white-space: nowrap; }
.bot-selo i { width: 7px; height: 7px; border-radius: 50%; background: var(--ax-apagado); }
.bot-selo svg { width: 12px; height: 12px; }
.bot-selo.ligado { border-color: color-mix(in srgb, var(--wa-verde-vivo) 40%, transparent); color: #bff5d3; background: color-mix(in srgb, var(--wa-verde-vivo) 10%, transparent); }
.bot-selo.ligado i { background: var(--wa-verde-vivo); animation: bot-pulso 1.8s ease-out infinite; }
.bot-selo.teste { border-color: color-mix(in srgb, var(--wa-amarelo) 35%, transparent); color: var(--wa-amarelo); background: color-mix(in srgb, var(--wa-amarelo) 8%, transparent); }
.bot-selo.aberto { border-color: color-mix(in srgb, var(--wa-verde-vivo) 40%, transparent); color: #bff5d3; }

.bot-saldo { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ax-suave); }
.bot-saldo b { color: var(--ax-texto); font-weight: 600; font-variant-numeric: tabular-nums; }
.bot-saldo-barra { width: 96px; height: 6px; border-radius: 99px; background: var(--ax-superficie-3); overflow: hidden; }
.bot-saldo-barra i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #1faa59, var(--wa-verde-vivo)); transition: width .6s var(--ax-curva); }
.bot-saldo.zerado .bot-saldo-barra i { background: var(--ax-erro); }
.bot-saldo.zerado b { color: var(--ax-erro); }

.bot-blocos { display: flex; flex-direction: column; }
.bot-bloco { position: relative; isolation: isolate; display: flex; gap: 12px; padding: 14px 0; border-top: 1px solid var(--ax-linha); animation: ax-entra .46s var(--ax-curva) both; animation-delay: var(--atraso, 0ms); }
.bot-bloco > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.bot-bloco h4 { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--ax-suave); }
.bot-bloco-icone { flex: none; width: 28px; height: 28px; margin-top: 1px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: var(--ax-marca-fundo); color: var(--ax-marca-clara); }
.bot-bloco-icone svg { width: 16px; height: 16px; }
.bot-bloco.mudou::before, .bot-resumo-topo.mudou { animation: bot-mudou 1.8s ease both; }
.bot-bloco.mudou::before { content: ""; position: absolute; inset: 4px -10px; border-radius: 14px; pointer-events: none; z-index: -1; }

.bot-campo { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; column-gap: 6px; row-gap: 4px; }
.bot-campo > .bot-valor { grid-column: 1; grid-row: 1; min-width: 0; }
.bot-campo > .bot-lapis { grid-column: 2; grid-row: 1; }
.bot-campo > .bot-mais { grid-column: 1; grid-row: 2; }
.bot-campo > .bot-edita { grid-column: 1 / -1; }
.bot-valor { font-size: 14.5px; line-height: 1.55; color: var(--ax-texto); white-space: pre-line; overflow-wrap: anywhere; }
.bot-valor.longo { display: -webkit-box; -webkit-line-clamp: 5; line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.bot-valor.vazio { color: var(--ax-apagado); font-style: italic; }
.bot-valor.balao {
    justify-self: start; position: relative; max-width: 100%; margin-left: 8px; padding: 7px 12px 8px; border-radius: 0 12px 12px 12px;
    background: var(--wa-entra); color: var(--wa-texto); font-size: 14px; line-height: 1.45; white-space: pre-wrap; box-shadow: 0 1px .5px rgba(11,20,26,.4);
}
.bot-valor.balao::before { content: ""; position: absolute; top: 0; left: -8px; width: 8px; height: 13px; background: inherit; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.bot-valor.balao.vazio { background: transparent; box-shadow: none; margin-left: 0; padding: 0; }
.bot-valor.balao.vazio::before { display: none; }
.bot-lapis { flex: none; width: 32px; height: 32px; margin: -5px -6px 0 0; border: 0; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: transparent; color: var(--ax-apagado); cursor: pointer; transition: background-color .2s, color .2s, transform .15s; }
.bot-lapis svg { width: 15px; height: 15px; }
@media (hover: hover) { .bot-lapis:hover { background: var(--ax-superficie-3); color: var(--ax-texto); } }
.bot-lapis:active { transform: scale(.92); }
.bot-mais { justify-self: start; padding: 0; border: 0; background: none; color: var(--ax-marca-clara); font-size: 13.5px; font-weight: 500; cursor: pointer; }
.bot-mais:hover { text-decoration: underline; }

.bot-edita { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; animation: ax-surge .25s ease both; }
.bot-entrada {
    width: 100%; padding: 10px 12px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--ax-marca-clara) 55%, transparent);
    background: var(--ax-fundo-2); color: var(--ax-texto); font: 400 15px/1.5 "DM Sans", system-ui, sans-serif; outline: none; resize: vertical;
    box-shadow: 0 0 0 4px var(--ax-marca-fundo);
}
.bot-edita-botoes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bot-edita-botoes .btn-marca { height: 38px; padding: 0 16px; font-size: 14px !important; }
.bot-edita-botoes .chat-chip { min-height: 38px; }
.bot-edita-erro { font-size: 13px; color: var(--ax-erro); }
.bot-edita-erro:empty { display: none; }

.bot-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.bot-lista li { position: relative; padding-left: 16px; font-size: 14.5px; line-height: 1.5; color: var(--ax-texto); }
.bot-lista li::before { content: ""; position: absolute; left: 2px; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--ax-marca-clara); }
.bot-regras { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.bot-regras li { display: flex; gap: 10px; font-size: 14.5px; line-height: 1.5; color: var(--ax-texto); }
.bot-regra-ico { flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.bot-regra-ico svg { width: 11px; height: 11px; }
.bot-regras li.sim .bot-regra-ico { background: color-mix(in srgb, var(--ax-verde) 16%, transparent); color: var(--ax-verde); }
.bot-regras li.nao .bot-regra-ico { background: color-mix(in srgb, var(--ax-erro) 14%, transparent); color: var(--ax-erro); }
.bot-ver-detalhes { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; margin: 2px 0 0; padding: 8px 14px; border-radius: 99px; border: 1px solid var(--ax-linha-forte); background: transparent; color: var(--ax-suave); font-size: 13.5px; font-weight: 500; text-align: left; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.bot-ver-detalhes svg { width: 15px; height: 15px; flex: none; transform: rotate(90deg); transition: transform .25s var(--ax-curva); }
.bot-ver-detalhes.aberto svg { transform: rotate(-90deg); }
.bot-ver-detalhes[hidden] { display: none; }
@media (hover: hover) { .bot-ver-detalhes:hover { color: var(--ax-texto); border-color: var(--ax-marca-clara); background: var(--ax-marca-fundo); } }
.bot-detalhes[hidden] { display: none; }
.bot-detalhes { animation: ax-surge .3s ease both; }
.bot-combinados { display: flex; flex-direction: column; gap: 12px; }
.bot-combinado { display: flex; flex-direction: column; gap: 6px; }
.bot-combinado small { font-size: 12.5px; font-weight: 600; color: var(--ax-apagado); }
.bot-resumo-dica { display: flex; align-items: center; gap: 8px; margin: 0; padding-top: 14px; border-top: 1px solid var(--ax-linha); font-size: 13px; color: var(--ax-apagado); }
.bot-resumo-dica svg { width: 14px; height: 14px; flex: none; }

.bot-mudancas { list-style: none; margin: 0; padding: 0; width: 100%; max-width: 520px; display: flex; flex-direction: column; gap: 8px; }
.bot-mudancas li { display: flex; flex-direction: column; gap: 3px; padding: 10px 14px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--ax-marca-clara) 30%, transparent); background: var(--ax-marca-fundo); animation: ax-entra .46s var(--ax-curva) both; animation-delay: var(--atraso, 0ms); }
.bot-mudancas b { font-size: 12.5px; font-weight: 600; color: var(--ax-marca-clara); }
.bot-mudancas span { font-size: 14px; line-height: 1.5; color: var(--ax-suave); white-space: pre-line; }
.bot-mudancas del { color: var(--ax-apagado); text-decoration-color: color-mix(in srgb, var(--ax-erro) 70%, transparent); }
.bot-mudancas mark { padding: 1px 3px; border-radius: 4px; background: color-mix(in srgb, var(--wa-verde-vivo) 22%, transparent); color: var(--ax-texto); font-weight: 500; }

/* ================= palco: o celular de teste ================= */
.bot-palco { display: none; }
.bot-palco[hidden] { display: none !important; }
.chat.com-bot .bot-palco { display: flex; flex-direction: column; }
.bot-palco-cena { display: contents; }
.bot-palco-lado { display: none; }
.bot-palco-x { display: none; }
.bot-fone { position: relative; }
.bot-fone-tela { position: relative; display: flex; flex-direction: column; overflow: hidden; background: var(--wa-fundo); color: var(--wa-texto); font-family: "DM Sans", "Segoe UI", Helvetica, Arial, sans-serif; container: fone / inline-size; }
.bot-fone-status { flex: none; display: none; }

/* PC: a conversa numa coluna; ao lado, o painel do teste e o celular juntos */
@media (min-width: 1024px) {
    .chat.com-bot { --bot-col: clamp(360px, 32vw, 440px); }
    .chat.com-bot .chat-topo { border-bottom: 1px solid var(--ax-linha); }
    .chat.com-bot .chat-corpo { width: var(--bot-col); border-right: 1px solid var(--ax-linha); }
    .chat.com-bot .chat-capa { display: none; }
    .chat.com-bot .chat-coluna, .chat.com-bot .chat-baixo { max-width: none; }
    .chat.com-bot .chat-dica { display: none; }
    .chat.com-bot .bot-palco {
        position: absolute; top: 56px; right: 0; bottom: 0; left: var(--bot-col); z-index: 2; padding: 20px 28px;
        container: palco / size;
        background: radial-gradient(50% 60% at 62% 50%, color-mix(in srgb, var(--wa-verde) 12%, transparent), transparent 72%), var(--ax-fundo-2);
        animation: palco-entra .6s var(--ax-curva) both;
    }
    .bot-palco-x {
        display: flex; position: absolute; top: 16px; right: 16px; z-index: 3; width: 40px; height: 40px; border-radius: 50%;
        border: 1px solid var(--ax-linha-forte); background: var(--ax-superficie); color: var(--ax-suave);
        align-items: center; justify-content: center; cursor: pointer; transition: background-color .2s, color .2s, transform .15s;
    }
    .bot-palco-x svg { width: 18px; height: 18px; }
    .bot-palco-cena { display: flex; align-items: center; justify-content: center; gap: clamp(28px, 5cqw, 72px); width: 100%; height: 100%; }
    .bot-palco-lado { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; flex: 0 1 330px; min-width: 250px; animation: ax-entra .5s var(--ax-curva) .08s both; }
    .bot-palco-titulo { margin: 0; font: 600 26px/1.18 "DM Sans", sans-serif; letter-spacing: -.02em; color: var(--ax-texto); text-wrap: balance; }
    .bot-palco-titulo b { font-weight: 600; color: var(--wa-verde-vivo); }
    .bot-palco-texto { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ax-suave); }
    .bot-palco-saldo .bot-saldo-barra { width: 120px; }
    .bot-palco-ideias[hidden] { display: none; }
    .bot-palco-ideias { display: flex; flex-direction: column; gap: 10px; width: 100%; padding-top: 16px; border-top: 1px solid var(--ax-linha); }
    .bot-palco-ideias small { font-size: 12.5px; font-weight: 600; letter-spacing: .02em; color: var(--ax-apagado); }
    .bot-palco-chips { display: flex; flex-wrap: wrap; gap: 8px; }
    .bot-palco-chips .chat-chip { min-height: 36px; padding: 6px 14px; font-size: 13.5px; animation: ax-entra .46s var(--ax-curva) both; animation-delay: var(--atraso, 0ms); }
    .bot-palco-botoes { display: flex; flex-direction: column; align-items: stretch; gap: 10px; width: 100%; padding-top: 16px; border-top: 1px solid var(--ax-linha); }
    .bot-palco-botoes .chat-chip { justify-content: center; min-height: 44px; }
    .bot-palco-botoes svg { width: 17px; height: 17px; flex: none; }
    .bot-palco-conectar {
        display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 48px; padding: 0 20px; border: 0; border-radius: 14px;
        background: var(--wa-verde); color: #06140f; font-size: 15px; font-weight: 600; cursor: pointer;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 16px 34px -16px color-mix(in srgb, var(--wa-verde) 85%, transparent);
        transition: background-color .2s, transform .15s;
    }
    .bot-palco-conectar:active { transform: scale(.98); }
    .bot-palco .wa-sugestoes, .bot-palco .wa-faixa button { display: none; }
    .bot-palco-gostou { margin: 0; font-size: 14.5px; font-weight: 600; color: var(--wa-verde-vivo); animation: ax-entra .46s var(--ax-curva) both; }
    .bot-palco-gostou[hidden] { display: none; }
    .bot-palco-saldo[hidden] { display: none; }
    /* conectar: o passo a passo e o "Esperando a conexão…" ficam aqui; o celular mostra o QR grande */
    .bot-palco-conexao[hidden] { display: none; }
    .bot-palco-conexao { display: flex; flex-direction: column; gap: 14px; width: 100%; padding-top: 16px; border-top: 1px solid var(--ax-linha); animation: ax-entra .46s var(--ax-curva) both; }
    .bot-palco-conexao .wa-nota { color: var(--ax-suave); }
    .bot-palco-conexao .wa-nota b { color: var(--ax-texto); }
    .bot-palco-passos li { color: var(--ax-suave); font-size: 14px; }
    .bot-palco-passos b { color: var(--ax-texto); }
    .bot-palco-passos li::before { background: var(--ax-superficie-3); }
    .bot-palco-esperando { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13.5px; color: var(--ax-suave); }

    /* o celular nunca fica estreito: se falta altura, ele fica mais baixo, não mais fino */
    .bot-fone {
        flex: none; height: min(100cqh, 840px); width: clamp(340px, min(100cqh, 840px) * .47, 392px); padding: 10px; border-radius: 52px;
        background: linear-gradient(150deg, #34343c, #101014 32%, #07070a 60%, #26262e);
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 0 0 2px #040406, 0 50px 100px -40px rgba(0,0,0,.95), 0 30px 140px -50px color-mix(in srgb, var(--wa-verde) 55%, transparent);
        animation: palco-entra .6s var(--ax-curva) both;
    }
    .bot-fone::before, .bot-fone::after { content: ""; position: absolute; width: 3px; border-radius: 2px; background: linear-gradient(90deg, #1b1b20, #3a3a42); }
    .bot-fone::before { left: -3px; top: 22%; height: 9%; }
    .bot-fone::after { right: -3px; top: 28%; height: 13%; }
    .bot-fone-tela { height: 100%; border-radius: 43px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }
    .bot-fone-status { display: flex; align-items: center; justify-content: space-between; height: 38px; padding: 4px 30px 0 32px; background: var(--wa-topo); font: 600 14px/1 "DM Sans", sans-serif; color: #fff; }
    .bot-fone-ilha { width: 88px; height: 25px; border-radius: 99px; background: #000; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
    .bot-fone-sinais { display: flex; align-items: flex-end; gap: 2px; height: 11px; }
    .bot-fone-sinais i { display: block; width: 3px; border-radius: 1px; background: #fff; }
    .bot-fone-sinais i:nth-child(1) { height: 5px; } .bot-fone-sinais i:nth-child(2) { height: 8px; } .bot-fone-sinais i:nth-child(3) { height: 11px; }
    .bot-fone-sinais b { width: 22px; height: 11px; margin-left: 6px; border-radius: 3px; border: 1.5px solid rgba(255,255,255,.9); position: relative; }
    .bot-fone-sinais b::after { content: ""; position: absolute; inset: 1.5px 5px 1.5px 1.5px; border-radius: 1px; background: #fff; }

    /* palco largo: o que foi pro painel ao lado some do celular, e o QR cresce */
    @container palco (min-width: 721px) {
        .bot-palco .wa-so-fone, .bot-palco .wa-aviso.gostou { display: none; }
        .bot-palco.na-conexao .wa-pagina-corpo { justify-content: center; gap: 18px; }
        .bot-palco.na-conexao .wa-qr-img { width: 264px; height: 264px; }
    }
    /* palco estreito (tela de 1024 a ~1200): o painel some e o celular mostra os atalhos dele */
    @container palco (max-width: 720px) {
        .bot-palco-lado { display: none; }
        .bot-palco .wa-sugestoes { display: flex; }
        .bot-palco .wa-sugestoes[hidden] { display: none; }
        .bot-palco .wa-faixa button { display: inline-block; }
    }
    /* palco estreito, mas na tela de conectar: o painel volta (mais fino) com o passo a passo, pra o celular mostrar só o QR */
    @container palco (min-width: 600px) and (max-width: 720px) {
        .bot-palco.na-conexao .bot-palco-lado { display: flex; flex: 0 1 240px; min-width: 196px; gap: 12px; }
        .bot-palco.na-conexao .bot-palco-titulo { font-size: 21px; }
        /* sobra à direita pro X de fechar não ficar em cima do celular */
        .bot-palco.na-conexao .bot-palco-cena { gap: 20px; width: calc(100% - 36px); margin-right: 36px; }
        .bot-palco.na-conexao .wa-so-fone { display: none; }
        .bot-palco.na-conexao .wa-pagina-corpo { justify-content: center; }
    }
    /* palco baixo: celular sem a barra de status */
    @container palco (max-height: 640px) { .bot-fone-status { display: none; } }
}
@media (hover: hover) and (min-width: 1024px) {
    .bot-palco-x:hover { background: var(--ax-superficie-3); color: var(--ax-texto); }
    .bot-palco-conectar:hover { background: #06cf9c; }
}

/* celular: o WhatsApp ocupa a tela toda (sai pela seta, como no app) */
@media (max-width: 1023px) {
    .chat.com-bot .bot-palco { position: absolute; inset: 0; z-index: 40; background: var(--wa-fundo); animation: bot-sobe .42s var(--ax-curva) both; }
    .bot-fone { flex: 1; min-height: 0; display: flex; flex-direction: column; }
    .bot-fone-tela { flex: 1; min-height: 0; }
    .wa-topo, .wa-pagina-topo { padding-top: env(safe-area-inset-top, 0px); height: calc(60px + env(safe-area-inset-top, 0px)) !important; }
    .wa-campo textarea, .wa-numero input { font-size: 16px !important; }
    .bot-entrada { font-size: 16px; }
}

/* dentro do celular: estreito, o topo do WhatsApp guarda só o essencial */
@container fone (max-width: 360px) {
    .wa-topo .wa-icone.enfeite { display: none; }
    .wa-faixa { font-size: 12px; }
}

/* ---- telas do WhatsApp ---- */
.wa-tela { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--wa-fundo); }
.wa-tela[hidden] { display: none; }
.wa-tela.entrando { animation: wa-entra .34s var(--ax-curva) both; }
.wa-icone { flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: transparent; color: var(--wa-suave); cursor: pointer; transition: background-color .2s, color .2s; }
.wa-icone svg { width: 22px; height: 22px; }
.wa-icone.enfeite { cursor: default; }
@media (hover: hover) { button.wa-icone:hover { background: rgba(255,255,255,.06); color: var(--wa-texto); } }
button.wa-icone:active { background: rgba(255,255,255,.1); }

.wa-topo { position: relative; flex: none; display: flex; align-items: center; gap: 4px; height: 60px; padding: 0 6px 0 2px; background: var(--wa-topo); }
.wa-topo .wa-icone.enfeite { width: 36px; }
.wa-topo .wa-icone.enfeite svg { width: 20px; height: 20px; }
.wa-avatar { flex: none; width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: radial-gradient(120% 120% at 30% 20%, color-mix(in srgb, var(--cor, #00a884) 70%, white), var(--cor, #00a884) 60%); color: #fff; font: 600 16px/1 "DM Sans", sans-serif; }
.wa-quem { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; padding-left: 8px; line-height: 1.25; }
.wa-quem b { font-size: 16px; font-weight: 500; color: var(--wa-texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-estado { font-size: 12.5px; color: var(--wa-meta); transition: color .2s; }
.wa-estado.wa-digitando { color: var(--wa-verde); }
.wa-menu { position: absolute; top: 54px; right: 8px; z-index: 6; min-width: 210px; padding: 8px 0; border-radius: 12px; background: #233138; box-shadow: 0 2px 5px rgba(11,20,26,.26), 0 16px 40px rgba(0,0,0,.45); transform-origin: top right; animation: wa-menu .18s ease-out both; }
.wa-menu[hidden] { display: none; }
.wa-menu button { display: block; width: 100%; padding: 11px 20px; border: 0; background: none; color: var(--wa-texto); font-size: 14.5px; text-align: left; cursor: pointer; }
.wa-menu button:hover, .wa-menu button:focus-visible { background: #182229; }

.wa-faixa { flex: none; display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 14px; background: var(--wa-aviso); border-bottom: 1px solid rgba(255,255,255,.04); font-size: 12.5px; color: var(--wa-amarelo); }
.wa-faixa svg { width: 13px; height: 13px; flex: none; }
.wa-faixa span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-faixa b { font-weight: 600; font-variant-numeric: tabular-nums; }
.wa-faixa button { flex: none; height: 26px; padding: 0 12px; border: 0; border-radius: 99px; background: color-mix(in srgb, var(--wa-verde) 18%, transparent); color: var(--wa-verde); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: background-color .2s; }
.wa-faixa button:hover { background: color-mix(in srgb, var(--wa-verde) 28%, transparent); }
.wa-faixa.conectado { color: #bff5d3; }

.wa-conversa {
    flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 8px 14px 10px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.14) transparent;
    background-color: var(--wa-fundo);
    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='%23ffffff' stroke-opacity='.045' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 20h26a6 6 0 0 1 6 6v12a6 6 0 0 1-6 6H30l-9 7v-7h-3a6 6 0 0 1-6-6V26a6 6 0 0 1 6-6z'/%3E%3Cpath d='M118 26a8 8 0 0 1 13-6 8 8 0 0 1 13 6c0 9-13 16-13 16s-13-7-13-16z'/%3E%3Ccircle cx='40' cy='118' r='12'/%3E%3Cpath d='M35 116h.01M45 116h.01M35 123s2 3 5 3 5-3 5-3'/%3E%3Cpath d='m126 104 4 9 10 1-7 7 2 10-9-5-9 5 2-10-7-7 10-1z'/%3E%3Cpath d='M78 70v-14l16-3v14'/%3E%3Ccircle cx='74' cy='70' r='4'/%3E%3Ccircle cx='90' cy='67' r='4'/%3E%3Crect x='76' y='146' width='22' height='16' rx='3'/%3E%3Ccircle cx='87' cy='154' r='4'/%3E%3Cpath d='M82 146l2-3h6l2 3'/%3E%3Cpath d='M150 158c6-3 10-9 8-15-2-5-8-6-11-2-3-4-9-3-11 2-2 6 2 12 8 15'/%3E%3Cpath d='M10 76l6 6 12-12'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 180px 180px;
}
.wa-mensagens { display: flex; flex-direction: column; }
.wa-dia { align-self: center; margin: 4px 0 10px; padding: 5px 12px; border-radius: 8px; background: var(--wa-aviso); color: var(--wa-meta); font-size: 12px; font-weight: 500; letter-spacing: .03em; box-shadow: 0 1px .5px rgba(11,20,26,.13); }
.wa-aviso { align-self: center; max-width: 90%; margin: 4px 0 12px; padding: 8px 12px; border-radius: 8px; display: flex; align-items: flex-start; gap: 8px; background: var(--wa-aviso); color: var(--wa-amarelo); font-size: 12.5px; line-height: 1.45; text-align: center; box-shadow: 0 1px .5px rgba(11,20,26,.13); animation: wa-surge .3s var(--ax-curva) both; }
.wa-aviso > svg { width: 13px; height: 13px; flex: none; margin-top: 2px; }
.wa-aviso b { font-weight: 600; }
.wa-aviso.transbordo { margin-top: 10px; color: var(--wa-texto); background: #1b2a31; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wa-verde) 40%, transparent); text-align: left; }
.wa-aviso.transbordo > svg { color: var(--wa-verde); }
.wa-aviso.erro, .wa-aviso.sem-saldo, .wa-aviso.gostou { flex-direction: column; align-items: center; gap: 10px; color: var(--wa-texto); }
.wa-aviso.gostou { margin-top: 12px; padding: 12px 14px; font-size: 13.5px; font-weight: 500; background: #1b2a31; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wa-verde) 40%, transparent); }
.wa-aviso.gostou button { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border: 0; border-radius: 99px; background: var(--wa-verde); color: #06140f; font-size: 14px; font-weight: 600; cursor: pointer; }
.wa-aviso.gostou button svg { width: 16px; height: 16px; }

.wa-aviso.erro { color: #ffc1c1; }
.wa-aviso.erro button { height: 32px; padding: 0 14px; border: 0; border-radius: 99px; background: var(--wa-verde); color: #06140f; font-size: 13px; font-weight: 600; cursor: pointer; }
.wa-aviso-botao { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px; border-radius: 99px; background: var(--wa-verde); color: #06140f !important; font-size: 13.5px; font-weight: 600; text-decoration: none; }
.wa-aviso-botao svg { width: 16px; height: 16px; }

.wa-msg { display: flex; margin-top: 2px; animation: wa-surge .28s var(--ax-curva) both; }
.wa-msg.cauda { margin-top: 8px; }
.wa-msg.sai { justify-content: flex-end; }
.wa-msg.entra { justify-content: flex-start; }
.wa-balao { position: relative; max-width: min(82%, 480px); display: flex; flex-wrap: wrap; align-items: flex-end; column-gap: 10px; padding: 6px 8px 7px 9px; border-radius: 8px; font-size: 14.2px; line-height: 19px; color: var(--wa-texto); box-shadow: 0 1px .5px rgba(11,20,26,.4); overflow-wrap: anywhere; }
.wa-msg.sai .wa-balao { background: var(--wa-sai); }
.wa-msg.entra .wa-balao { background: var(--wa-entra); }
.wa-msg.cauda.sai .wa-balao { border-top-right-radius: 0; }
.wa-msg.cauda.entra .wa-balao { border-top-left-radius: 0; }
.wa-msg.cauda .wa-balao::before { content: ""; position: absolute; top: 0; width: 8px; height: 13px; background: inherit; }
.wa-msg.cauda.sai .wa-balao::before { right: -8px; clip-path: polygon(0 0, 100% 0, 0 100%); }
.wa-msg.cauda.entra .wa-balao::before { left: -8px; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.wa-texto { flex: 1 1 auto; min-width: 0; white-space: pre-wrap; }
.wa-texto a { color: var(--wa-azul); text-decoration: none; }
.wa-texto a:hover { text-decoration: underline; }
.wa-texto b { font-weight: 600; }
.wa-meta { flex: none; margin-left: auto; display: inline-flex; align-items: center; gap: 3px; position: relative; bottom: -3px; font-size: 11px; line-height: 15px; color: rgba(233,237,239,.6); }
.wa-tique { width: 16px; height: 11px; color: rgba(233,237,239,.6); transition: color .3s; }
.wa-msg.lida .wa-tique { color: var(--wa-azul); }
.wa-msg.falhou .wa-balao { opacity: .72; }
.wa-msg.falhou .wa-tique { color: #ff9b9b; }
.wa-pontinhos { display: inline-flex; gap: 4px; padding: 5px 4px 3px; }
.wa-pontinhos i { width: 7px; height: 7px; border-radius: 50%; background: var(--wa-meta); animation: wa-ponto 1.2s ease-in-out infinite; }
.wa-pontinhos i:nth-child(2) { animation-delay: .15s; } .wa-pontinhos i:nth-child(3) { animation-delay: .3s; }

.wa-sugestoes { flex: none; display: flex; gap: 8px; overflow-x: auto; padding: 8px 10px 2px; background: var(--wa-fundo); scrollbar-width: none; }
.wa-sugestoes::-webkit-scrollbar { display: none; }
.wa-sugestoes[hidden] { display: none; }
.wa-sugestao { flex: none; height: 34px; padding: 0 14px; border-radius: 99px; border: 1px solid color-mix(in srgb, var(--wa-verde) 45%, transparent); background: color-mix(in srgb, var(--wa-verde) 10%, transparent); color: var(--wa-texto); font-size: 13.5px; white-space: nowrap; cursor: pointer; animation: wa-surge .35s var(--ax-curva) both; animation-delay: var(--atraso, 0ms); transition: background-color .2s, transform .15s; }
@media (hover: hover) { .wa-sugestao:hover { background: color-mix(in srgb, var(--wa-verde) 22%, transparent); } }
.wa-sugestao:active { transform: scale(.96); }

.wa-rodape { flex: none; display: flex; align-items: flex-end; gap: 6px; padding: 6px 8px 8px; background: var(--wa-fundo); }
@media (max-width: 1023px) { .wa-rodape { padding-bottom: max(8px, env(safe-area-inset-bottom, 0px)); } }
.wa-campo { flex: 1; min-width: 0; display: flex; align-items: flex-end; gap: 0; min-height: 46px; padding: 3px 6px; border-radius: 24px; background: var(--wa-topo); }
.wa-campo .wa-icone { width: 36px; height: 40px; }
.wa-campo .wa-icone svg { width: 21px; height: 21px; }
.wa-campo textarea { flex: 1; min-width: 0; min-height: 40px; max-height: 120px; padding: 10px 4px; border: 0; background: transparent; color: var(--wa-texto); font: 400 15px/20px "DM Sans", "Segoe UI", sans-serif; resize: none; outline: none; }
.wa-campo textarea::placeholder { color: var(--wa-meta); }
.wa-enviar { flex: none; width: 46px; height: 46px; border: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--wa-verde); color: #06140f; cursor: pointer; transition: background-color .2s, transform .15s, opacity .2s; }
.wa-enviar svg { width: 22px; height: 22px; }
.wa-enviar.pronto svg { transform: translateX(1px); animation: ax-pop .3s var(--ax-curva) both; }
.wa-enviar:disabled { cursor: default; opacity: .6; }
.wa-enviar:not(:disabled):active { transform: scale(.93); }
@media (hover: hover) { .wa-enviar:not(:disabled):hover { background: #06cf9c; } }

/* ---- conectar / conectado ---- */
.wa-pagina { background: var(--wa-painel); }
.wa-pagina-topo { flex: none; display: flex; align-items: center; gap: 8px; height: 60px; padding: 0 12px 0 4px; background: var(--wa-topo); }
.wa-pagina-topo b { font-size: 17px; font-weight: 500; color: var(--wa-texto); }
.wa-pagina-corpo { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 14px; padding: 18px 18px 22px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.14) transparent; }
.wa-pagina-corpo > * { animation: wa-surge .35s var(--ax-curva) both; }
.wa-pagina-corpo > *:nth-child(2) { animation-delay: 60ms; } .wa-pagina-corpo > *:nth-child(3) { animation-delay: 120ms; } .wa-pagina-corpo > *:nth-child(4) { animation-delay: 180ms; } .wa-pagina-corpo > *:nth-child(n+5) { animation-delay: 240ms; }
.wa-pagina-lead { margin: 0; font-size: 15px; line-height: 1.5; color: var(--wa-texto); }
.wa-pagina-lead b { font-weight: 600; }
.wa-nota { display: flex; gap: 10px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--wa-verde) 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wa-verde) 30%, transparent); font-size: 13px; line-height: 1.45; color: #d1d7db; }
.wa-nota svg { width: 17px; height: 17px; flex: none; color: var(--wa-verde); }
.wa-nota b { color: var(--wa-texto); font-weight: 600; }
.wa-link { padding: 0; border: 0; background: none; color: var(--wa-verde); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.bot-palco-conexao .wa-link { color: var(--ax-marca-clara); }
.wa-abas { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--wa-topo); }
.wa-abas button { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; height: 36px; border: 0; border-radius: 9px; background: transparent; color: var(--wa-suave); font-size: 13px; font-weight: 500; cursor: pointer; transition: background-color .2s, color .2s; }
.wa-abas button svg { width: 15px; height: 15px; }
.wa-abas button[aria-selected="true"] { background: var(--wa-campo); color: var(--wa-texto); box-shadow: 0 1px 3px rgba(0,0,0,.35); }
.wa-modo { display: flex; flex-direction: column; gap: 14px; }
.wa-modo[hidden] { display: none; }
.wa-qr { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.wa-qr-img { position: relative; width: 224px; height: 224px; padding: 10px; border-radius: 16px; display: flex; align-items: center; justify-content: center; background: #fff; box-shadow: 0 24px 50px -24px rgba(0,0,0,.85); }
.wa-qr-img img { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.wa-qr-img.entrou img { animation: wa-qr .45s var(--ax-curva) both; }
.wa-qr-carregando { display: flex; flex-direction: column; align-items: center; gap: 12px; color: #54656f; font-size: 13px; }
.wa-qr-carregando i { width: 30px; height: 30px; border-radius: 50%; border: 3px solid #d1d7db; border-top-color: var(--wa-verde); animation: spin 1s linear infinite; }
.wa-qr-erro { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 0 8px; text-align: center; color: #3b4a54; font-size: 13px; line-height: 1.4; }
.wa-qr-erro button { height: 34px; padding: 0 14px; border: 0; border-radius: 99px; background: var(--wa-verde); color: #fff; font-size: 13px; font-weight: 600; cursor: pointer; }
.wa-qr-tempo { margin: 0; min-height: 17px; font-size: 12.5px; color: var(--wa-meta); font-variant-numeric: tabular-nums; }
.wa-passos { list-style: none; counter-reset: passo; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.wa-passos li { counter-increment: passo; display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 10px; align-items: start; font-size: 13.5px; line-height: 1.45; color: #d1d7db; }
.wa-passos li::before { content: counter(passo); flex: none; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--wa-topo); color: var(--wa-verde); font-size: 12px; font-weight: 700; }
.wa-passos b { color: var(--wa-texto); font-weight: 600; }
.wa-rotulo { font-size: 13px; color: var(--wa-meta); margin-bottom: -6px; }
.wa-numero { display: flex; align-items: center; gap: 8px; padding: 4px 4px 4px 12px; border-radius: 12px; background: var(--wa-topo); box-shadow: inset 0 0 0 1px transparent; transition: box-shadow .2s; }
.wa-numero:focus-within { box-shadow: inset 0 0 0 1px var(--wa-verde); }
.wa-numero > span { font-size: 14px; color: var(--wa-meta); }
.wa-numero input { flex: 1; min-width: 0; height: 38px; border: 0; background: transparent; color: var(--wa-texto); font-size: 15px; outline: none; font-variant-numeric: tabular-nums; }
.wa-numero input::placeholder { color: var(--wa-meta); }
.wa-numero button { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border: 0; border-radius: 9px; background: var(--wa-verde); color: #06140f; font-size: 13px; font-weight: 600; cursor: pointer; transition: opacity .2s, transform .15s; }
.wa-numero button svg { width: 15px; height: 15px; }
.wa-numero button:disabled { opacity: .6; cursor: progress; }
.wa-numero button:not(:disabled):active { transform: scale(.96); }
.wa-erro-campo { margin: -6px 0 0; font-size: 12.5px; line-height: 1.4; color: #ff9b9b; }
.wa-erro-campo:empty { display: none; }
.wa-codigo { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 14px; background: var(--wa-topo); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wa-verde) 45%, transparent); animation: ax-pop .42s var(--ax-curva) both; }
.wa-codigo[hidden] { display: none; }
.wa-codigo-txt { font: 600 26px/1 "DM Sans", ui-monospace, monospace; letter-spacing: .12em; color: var(--wa-texto); }
.wa-copiar { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border: 0; border-radius: 99px; background: color-mix(in srgb, var(--wa-verde) 18%, transparent); color: var(--wa-verde); font-size: 13px; font-weight: 600; cursor: pointer; }
.wa-copiar svg { width: 15px; height: 15px; }
.wa-pagina-rodape { margin: auto 0 0; padding-top: 6px; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 12.5px; color: var(--wa-meta); text-align: center; }
.wa-pulso { width: 8px; height: 8px; border-radius: 50%; background: var(--wa-verde); animation: bot-pulso 1.6s ease-out infinite; }

.wa-ok { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 16px; background: linear-gradient(135deg, color-mix(in srgb, var(--wa-verde) 24%, transparent), color-mix(in srgb, var(--wa-verde) 6%, transparent)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wa-verde) 38%, transparent); }
.wa-ok-ico { flex: none; width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--wa-verde); color: #06140f; box-shadow: 0 10px 24px -8px color-mix(in srgb, var(--wa-verde) 80%, transparent); animation: wa-check .6s var(--ax-curva) both; }
.wa-ok-ico svg { width: 22px; height: 22px; }
.wa-ok div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wa-ok b { font-size: 16px; font-weight: 600; color: var(--wa-texto); }
.wa-ok span { font-size: 13.5px; line-height: 1.4; color: #d1d7db; }
.wa-cartao { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 16px; background: var(--wa-topo); }
.wa-cartao h4 { margin: 0; font-size: 14.5px; font-weight: 600; color: var(--wa-texto); }
.wa-cartao p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--wa-suave); }
.wa-cartao .bot-saldo { color: var(--wa-suave); }
.wa-cartao .bot-saldo b { color: var(--wa-texto); }
.wa-cartao .bot-saldo-barra { flex: 1; width: auto; background: var(--wa-campo); }
.wa-cartao .wa-numero { background: var(--wa-campo); }
.wa-numeros { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.wa-numeros li { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 4px 0 12px; border-radius: 99px; background: var(--wa-campo); color: var(--wa-texto); font-size: 13.5px; font-variant-numeric: tabular-nums; animation: ax-pop .35s var(--ax-curva) both; }
.wa-numeros li.vazio { padding: 0 12px; color: var(--wa-meta); }
.wa-numeros button { width: 26px; height: 26px; border: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: transparent; color: var(--wa-meta); cursor: pointer; transition: color .2s, background-color .2s; }
.wa-numeros button svg { width: 14px; height: 14px; }
.wa-numeros button:hover { color: #ff9b9b; background: rgba(255,155,155,.1); }
.wa-cartao .wa-dica { color: var(--wa-amarelo); }
.wa-liberar { height: 42px; border: 0; border-radius: 12px; background: transparent; box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); color: var(--wa-texto); font-size: 14px; font-weight: 600; cursor: pointer; transition: background-color .2s, box-shadow .2s, color .2s; }
@media (hover: hover) { .wa-liberar:hover { background: rgba(255,255,255,.05); } }
.wa-liberar.confirmar { background: #c0392b; box-shadow: none; color: #fff; animation: ax-pop .3s var(--ax-curva) both; }
.wa-liberar:disabled { opacity: .6; cursor: progress; }
.wa-fim { display: flex; flex-direction: column; gap: 8px; }
.wa-painel, .wa-equipe { display: flex; align-items: center; justify-content: center; gap: 8px; height: 46px; border-radius: 12px; font-size: 15px; font-weight: 600; text-decoration: none; transition: background-color .2s, transform .15s; }
.wa-painel { background: var(--wa-verde); color: #06140f !important; box-shadow: 0 14px 30px -14px color-mix(in srgb, var(--wa-verde) 80%, transparent); }
.wa-equipe { box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); color: var(--wa-texto) !important; }
.wa-painel svg, .wa-equipe svg { width: 18px; height: 18px; }
@media (hover: hover) { .wa-painel:hover { background: #06cf9c; } .wa-equipe:hover { background: rgba(255,255,255,.05); } }
.wa-painel:active, .wa-equipe:active { transform: scale(.98); }

/* ---- animações ---- */
@keyframes wa-surge { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes wa-entra { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@keyframes wa-menu { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
@keyframes wa-ponto { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
@keyframes wa-qr { from { opacity: 0; transform: scale(.92); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes wa-check { 0% { transform: scale(0) rotate(-25deg); } 60% { transform: scale(1.12) rotate(4deg); } 100% { transform: none; } }
@keyframes bot-sobe { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes bot-pulso { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--wa-verde-vivo) 70%, transparent); } 100% { box-shadow: 0 0 0 7px transparent; } }
@keyframes bot-mudou { 0% { background: color-mix(in srgb, var(--ax-marca) 30%, transparent); } 100% { background: transparent; } }