/* =====================================================================
 * Ajudinha da Sofia — LP full-screen do assistente de recomendação.
 *
 * A arte da Sofia (com o fundo tecnológico já pintado nela — mapa-múndi
 * pontilhado + circuitos) é o plano de fundo full-bleed da página; a UI da
 * conversa flutua como um painel de vidro à esquerda. A imagem aparece
 * inteira, na proporção original, só coberta por um degradê onde o texto
 * precisa ficar por cima.
 *
 * Paleta: toda em azul. Navy de marca (#17479e) para o fundo e estados, e um
 * azul-ciano vivo (#2eb8f5 → #5ad8ff) como cor de ação. O CTA usa fundo claro
 * com TEXTO ESCURO — num fundo azul-escuro, botão azul-escuro com texto branco
 * desaparece; é o mesmo princípio de contraste que o laranja cumpria antes.
 * Tema único e escuro por decisão de produto — é assim que a página
 * aparece, independente do tema do sistema do visitante.
 * ===================================================================== */

:root {
    --asf-navy-deep: #04091d;
    --asf-navy-mid:  #17479e;
    --asf-accent:    #2eb8f5;
    --asf-accent-2:  #5ad8ff;
    --asf-tech:      #3ecbff;
    --asf-ink:       #0c1930;
    --asf-glass:     rgba(255,255,255,.08);
    --asf-glass-brd: rgba(255,255,255,.14);
    --asf-text:      #eef3fb;
    --asf-text-dim:  #a9bbe0;
    --asf-display:   'Sora', 'Open Sans', sans-serif;
}

* { box-sizing: border-box; }
/* Alguns elementos (link do produto, logo) têm display:flex/inline-flex
   próprio, que teria especificidade maior que o [hidden] do UA stylesheet
   e ignoraria o atributo — força a ocultação sempre que hidden estiver presente. */
[hidden] { display: none !important; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--asf-tech); outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; } }

html, body.asf-body {
    margin: 0;
    height: 100%;
    background: var(--asf-navy-deep);
    color: var(--asf-text);
    font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    overflow: hidden;
}

/* ── Foto da Sofia: plano de fundo full-bleed, com zoom lento (Ken Burns) ── */
.asf-photo { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: var(--asf-navy-deep); }
.asf-photo picture { display: contents; }
.asf-photo img {
    width: 102%; height: 102%; object-fit: cover; object-position: 56% 38%;
    transform-origin: 70% 40%;
    animation: asfKen 34s ease-in-out infinite alternate;
}
@keyframes asfKen {
    from { transform: scale(1) translate(0, 0); }
    to   { transform: scale(1.02) translate(-0.5%, -0.5%); }
}

/* ── Telas muito largas (ultrawide) ──
   Com object-fit: cover numa tela 21:9, a imagem (3:2) escala pela largura e
   é cortada na vertical — a Sofia aparece ampliada mais de 2x, em close. Aqui
   a foto passa a ocupar só uma faixa com a proporção original dela (altura ×
   1.5), encostada à direita e dissolvendo na cor de fundo à esquerda: escala
   natural, composição inteira, sem corte. */
@media (min-aspect-ratio: 19/10) {
    .asf-photo {
        left: auto; right: 0;
        width: min(100%, calc(100vh * 1.5));
        width: min(100%, calc(100dvh * 1.5));
        -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 20%);
        mask-image: linear-gradient(to right, transparent 0%, #000 20%);
    }
}

.asf-scrim {
    position: fixed; inset: 0; z-index: 1; pointer-events: none;
    background:
        linear-gradient(100deg, rgba(4,9,29,.96) 0%, rgba(4,9,29,.88) 32%, rgba(4,9,29,.46) 54%, rgba(4,9,29,.05) 74%, transparent 90%),
        linear-gradient(to top, rgba(4,9,29,.55) 0%, transparent 20%);
}

/* ── Energia correndo por trilhas de circuito (canvas) ──
   Traços gerados em ângulos de placa, cada um com um pulso de luz
   percorrendo o caminho. Fica só na faixa direita (onde está a placa
   pintada na arte), em mix-blend screen: apenas clareia, nunca escurece. */
.asf-circuito {
    position: fixed; inset: 0; z-index: 1; width: 100%; height: 100%;
    pointer-events: none; mix-blend-mode: screen;
    -webkit-mask-image: radial-gradient(45% 85% at 100% 66%, #000 0%, #000 34%, transparent 80%);
    mask-image: radial-gradient(45% 85% at 100% 66%, #000 0%, #000 34%, transparent 80%);
}

.asf-orb { position: fixed; z-index: 1; border-radius: 50%; filter: blur(64px); opacity: .22; pointer-events: none; }
.asf-orb-1 { width: 360px; height: 360px; background: var(--asf-tech); top: -80px; left: 12%; animation: asfFloat 16s ease-in-out infinite; }
.asf-orb-2 { width: 260px; height: 260px; background: var(--asf-accent); bottom: -60px; left: 28%; opacity: .14; animation: asfFloat 20s ease-in-out infinite reverse; }
@keyframes asfFloat { 0%, 100% { transform: translate(0,0); } 50% { transform: translate(24px, 18px); } }

/* Legenda flutuante sobre a foto (lado direito, desktop) */
.asf-photo-tag {
    position: fixed; z-index: 2; right: clamp(20px, 3vw, 40px); bottom: 28px;
    display: flex; align-items: center; gap: 8px;
    background: rgba(4,9,29,.5); border: 1px solid var(--asf-glass-brd); backdrop-filter: blur(6px);
    padding: 8px 14px; border-radius: 20px; font-size: .78rem; color: var(--asf-text-dim);
}
.asf-photo-tag b { color: #fff; }

/* ── Shell / painel da conversa ── */
.asf-shell { position: relative; z-index: 2; height: 100vh; height: 100dvh; display: flex; }

.asf-main {
    flex: 0 0 clamp(480px, 55vw, 760px);
    max-width: 100vw;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: rgba(6, 13, 32, .4);
    backdrop-filter: blur(20px);
    border-right: 1px solid var(--asf-glass-brd);
    box-shadow: 60px 0 90px -50px rgba(0,0,0,.55);
}

.asf-topbar {
    flex: none; display: flex; align-items: center; justify-content: space-between;
    padding: 24px clamp(18px, 3vw, 36px) 10px;
}
.asf-brand-link { display: inline-flex; opacity: .96; transition: opacity .15s, transform .15s; }
.asf-brand-link:hover { opacity: 1; transform: translateY(-1px); }
.asf-brand-logo { height: 38px; width: auto; display: block; filter: drop-shadow(0 1px 8px rgba(0,0,0,.4)); }
.asf-back {
    display: inline-flex; align-items: center; gap: 6px; color: var(--asf-text-dim); text-decoration: none; font-size: .78rem;
    padding: 7px 13px; border-radius: 20px; background: var(--asf-glass); border: 1px solid var(--asf-glass-brd);
    transition: background .15s, color .15s;
}
.asf-back:hover { background: rgba(255,255,255,.14); color: #fff; }

.asf-hero-copy { flex: none; padding: 10px clamp(18px, 3vw, 36px) 20px; }
.asf-status-pill {
    display: inline-flex; align-items: center; gap: 7px; background: rgba(4,9,29,.55); border: 1px solid var(--asf-glass-brd);
    padding: 5px 12px 5px 9px; border-radius: 20px; font-size: .74rem; color: var(--asf-text-dim); margin-bottom: 12px;
}
.asf-status-pill .live { width: 7px; height: 7px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 8px #4ade80; animation: asfPulse 1.8s ease-in-out infinite; }
@keyframes asfPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.asf-hero-copy h1 {
    font-family: var(--asf-display); font-weight: 800; font-size: clamp(1.4rem, 2.4vw, 1.85rem);
    line-height: 1.1; margin: 0 0 6px; text-wrap: balance;
}
.asf-hero-copy p { margin: 0; color: var(--asf-text-dim); font-size: 1.08rem; font-weight: 500; line-height: 1.5; }

.asf-progress { height: 3px; background: rgba(255,255,255,.07); flex: none; }
.asf-progress-bar { height: 100%; width: 0%; background: linear-gradient(90deg, var(--asf-accent), var(--asf-accent-2)); transition: width .5s ease; }

/* ── Chat ── */
.asf-chat {
    flex: 1; min-height: 0; overflow-y: auto;
    padding: 22px clamp(18px, 3vw, 36px);
    display: flex; flex-direction: column; gap: 16px;
}
/* gap: as opções em texto ficam ao lado da fala da Sofia — sem o respiro
   elas encostam na bolha. */
.asf-msg { display: flex; gap: 12px; align-items: flex-start; }
.asf-msg-assistant { justify-content: flex-start; }
.asf-msg-user { justify-content: flex-end; }
.asf-msg-user .asf-bubble { background: linear-gradient(135deg, var(--asf-accent), var(--asf-accent-2)); color: #04203a; border-radius: 18px 18px 4px 18px; font-weight: 600; }
.asf-bubble {
    max-width: 84%; background: rgba(255,255,255,.1); border: 1px solid var(--asf-glass-brd);
    padding: 14px 18px; border-radius: 18px 18px 18px 4px; font-size: 1rem; line-height: 1.55;
    white-space: pre-line; animation: asfPop .25s ease;
}
/* Sofia usa a largura inteira da coluna */
.asf-msg-assistant .asf-bubble { max-width: 100%; }
.asf-bubble strong { font-weight: 800; color: #fff; }
.asf-msg-user .asf-bubble strong { color: inherit; }
@keyframes asfPop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.asf-typing { display: flex; gap: 4px; align-items: center; padding: 16px 18px; }
.asf-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--asf-text-dim); animation: asfBlink 1.2s infinite ease-in-out; }
.asf-typing span:nth-child(2) { animation-delay: .2s; }
.asf-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes asfBlink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }

.asf-chips {
    display: flex; flex-wrap: wrap; gap: 9px; margin: 2px 0 0; width: auto; max-width: 46%;
    justify-content: flex-start; align-items: flex-start; align-content: flex-start;
}
.asf-chip {
    border: 1px solid var(--asf-glass-brd); background: rgba(255,255,255,.06); color: var(--asf-text);
    padding: 10px 16px; border-radius: 20px; font-size: .9rem; cursor: pointer; font-family: inherit;
    /* botão centraliza o texto por padrão: quando a opção é longa e ocupa a
       linha inteira, ela aparecia centralizada no meio do chip */
    text-align: left;
    transition: background .15s, border-color .15s, transform .1s;
}
.asf-chip:hover:not(:disabled) { background: rgba(46,184,245,.22); border-color: var(--asf-accent); }
.asf-chip:active:not(:disabled) { transform: scale(.97); }
.asf-chip:disabled { opacity: .4; cursor: default; }

/* ── Cards de produto para seleção (formato horizontal) ──
   Logo grande à esquerda (caixa branca, como no menu hero), nome + resumo à
   direita, e seleção MÚLTIPLA: dá pra pedir cotação de mais de um software.
   A classificação Gold/Silver/Bronze vira o contorno — Gold com brilho
   pulsante, Silver e Bronze mais discretos. */
.asf-prod-bloco { width: 100%; margin: 10px 0 0; }
.asf-prod-bloco.is-travado { opacity: .65; }
.asf-prod-cards { display: flex; flex-direction: column; gap: 9px; width: 100%; }
/* O item é a moldura (borda, fundo, classificação); dentro dele o botão de
   selecionar e o link do produto convivem como irmãos. */
.asf-prod-item {
    border-radius: 14px; border: 1.5px solid var(--asf-glass-brd);
    background: rgba(255,255,255,.06); overflow: hidden;
    transition: transform .12s, background .15s, border-color .15s;
}
.asf-prod-item:hover { transform: translateY(-1px); background: rgba(255,255,255,.11); }
.asf-prod-item.is-selected { border-color: var(--asf-accent); background: rgba(46,184,245,.16); }
.asf-prod-card {
    display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
    padding: 12px 14px; border: none; background: none; color: var(--asf-text);
    font-family: inherit; cursor: pointer;
}
.asf-prod-card:disabled { cursor: default; }
/* Link pro produto: rodapé do card, abre em nova aba pra não perder a conversa.

   width: fit-content é o ponto principal — como display:block esticando na
   linha inteira, a faixa toda ficava clicável e roubava o clique de quem
   queria só SELECIONAR o produto (o botão é irmão do link, não pai). A área
   de clique agora para onde o texto para; o respiro vertical do card vem de
   margin, não de padding, para não voltar a engordar o alvo. */
.asf-prod-link {
    display: block;
    width: -moz-fit-content;
    width: fit-content;
    max-width: calc(100% - 28px);
    margin: -6px 14px 9px;
    padding: 2px 0;
    font-size: .76rem; font-weight: 700; line-height: 1.3;
    color: var(--asf-tech); text-decoration: none;
}
.asf-prod-link:hover { text-decoration: underline; }
.asf-prod-link i { font-size: .9rem; vertical-align: -1px; }

.asf-prod-logo {
    flex: none; width: 104px; height: 62px; background: #fff; border: 1.5px solid transparent; border-radius: 10px;
    display: flex; align-items: center; justify-content: center; overflow: hidden;
    font-weight: 800; font-size: 1rem; color: var(--asf-navy-mid); letter-spacing: .4px;
}
.asf-prod-logo img { max-width: 86%; max-height: 80%; object-fit: contain; }

.asf-prod-info { flex: 1; min-width: 0; }
.asf-prod-label { display: block; font-size: .96rem; font-weight: 700; line-height: 1.25; }
/* Produto sem logo cadastrada: o nome ocupa o lugar dela, sem caixa vazia */
.asf-prod-card--sem-logo .asf-prod-label { font-size: 1rem; }
.asf-prod-desc {
    margin: 4px 0 0; font-size: .8rem; line-height: 1.45; color: var(--asf-text-dim);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Indicador de seleção (múltipla) */
.asf-prod-check {
    flex: none; width: 22px; height: 22px; border-radius: 50%;
    border: 1.5px solid var(--asf-glass-brd); position: relative; transition: all .15s;
}
/* is-selected vive no .asf-prod-item (a moldura), não no botão de dentro */
.asf-prod-item.is-selected .asf-prod-check { background: var(--asf-accent); border-color: var(--asf-accent); }
.asf-prod-item.is-selected .asf-prod-check::after {
    content: ''; position: absolute; left: 7px; top: 3px; width: 6px; height: 11px;
    /* escuro: o preenchimento do check agora é azul claro, branco sumiria */
    border: solid #04203a; border-width: 0 2px 2px 0; transform: rotate(45deg);
}

/* Gold/Silver/Bronze é classificação interna: não vira rótulo na tela, só a
   cor da borda (destaque visual sem expor a nomenclatura ao visitante). */
.asf-prod-card--gold { border-color: #e8b74d; animation: asfGoldPulse 2.4s ease-in-out infinite; }
@keyframes asfGoldPulse {
    0%, 100% { box-shadow: 0 0 0 1px rgba(232,183,77,.3), 0 0 10px rgba(232,183,77,.16); }
    50%      { box-shadow: 0 0 0 1.5px rgba(255,214,120,.55), 0 0 20px rgba(255,214,120,.35); }
}
.asf-prod-card--silver { border-color: #c9d3e0; box-shadow: 0 0 10px rgba(201,211,224,.14); }
.asf-prod-card--bronze { border-color: #c98a4b; box-shadow: 0 0 8px rgba(201,138,75,.12); }

/* Ações abaixo da lista: confirmar seleção ou pedir outras opções */
.asf-prod-acoes { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 11px; }
.asf-prod-confirmar {
    padding: 11px 18px; border: none; border-radius: 20px; font-family: inherit; font-size: .88rem; font-weight: 800;
    background: linear-gradient(135deg, var(--asf-accent), var(--asf-accent-2)); color: #04203a; cursor: pointer;
    transition: transform .1s, opacity .15s;
}
.asf-prod-confirmar:disabled { opacity: .4; cursor: not-allowed; }
.asf-prod-confirmar:not(:disabled):hover { transform: translateY(-1px); }
.asf-prod-outras {
    padding: 11px 18px; border-radius: 20px; font-family: inherit; font-size: .88rem;
    border: 1px solid var(--asf-glass-brd); background: rgba(255,255,255,.05); color: var(--asf-text); cursor: pointer;
    transition: background .15s;
}
.asf-prod-outras:hover:not(:disabled) { background: rgba(255,255,255,.12); }
.asf-prod-outras:disabled { opacity: .4; cursor: default; }

/* ── Vitrine do resultado (lado direito, sobre a arte) ──
   A escolha acontece dentro da conversa; o RESULTADO é que vem pra cá, onde
   sobra espaço — cards translúcidos com a logo grande. Fica centralizado na
   vertical pra não cobrir o rosto da Sofia. */
.asf-vitrine {
    flex: 1; min-width: 0; height: 100%; overflow-y: auto;
    display: flex; align-items: center; justify-content: center;
    padding: clamp(20px, 4vh, 44px) clamp(20px, 3vw, 44px);
    background: linear-gradient(to right, rgba(4,9,29,.35), rgba(4,9,29,.12));
}
.asf-vitrine-inner { width: 100%; max-width: 560px; animation: asfPop .3s ease; }
/* Cards dentro da vitrine ficam sobre a arte: precisam de fundo mais sólido */
.asf-vitrine .asf-prod-item { background: rgba(8,18,44,.6); backdrop-filter: blur(10px); }
.asf-vitrine .asf-prod-item:hover { background: rgba(14,28,62,.72); }
.asf-vitrine .asf-prod-item.is-selected { background: rgba(46,184,245,.26); }
.asf-vitrine .asf-prod-bloco { margin-top: 12px; }

/* Dica na conversa apontando pra vitrine: entra deslizando, pisca três vezes
   pra chamar atenção e para — a seta segue num vaivém discreto. */
.asf-dica {
    align-self: flex-start; display: inline-flex; align-items: center; gap: 6px;
    font-size: .78rem; font-weight: 700; color: var(--asf-tech);
    letter-spacing: .3px; margin-top: -6px;
    animation: asfDicaEntra .35s ease both, asfDicaPisca 1.6s ease-in-out 3;
}
@keyframes asfDicaEntra { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@keyframes asfDicaPisca { 0%, 100% { opacity: .7; } 50% { opacity: 1; } }
.asf-dica-seta { display: inline-block; font-size: .95rem; animation: asfSetaLado 1.3s ease-in-out infinite; }
@keyframes asfSetaLado  { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } }
@keyframes asfSetaBaixo { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
.asf-dica--baixo .asf-dica-seta { animation-name: asfSetaBaixo; }

.asf-escolhido {
    display: flex; gap: 16px; align-items: flex-start; margin-top: 12px;
    background: rgba(8,18,44,.55); backdrop-filter: blur(10px);
    border: 1px solid var(--asf-glass-brd); border-radius: 18px; padding: 18px;
    box-shadow: 0 18px 40px rgba(0,0,0,.35);
}
.asf-escolhido .asf-prod-logo { width: 140px; height: 86px; border-radius: 12px; }
.asf-escolhido h2 { margin: 0; font-size: 1.2rem; font-family: var(--asf-display); }
.asf-escolhido .asf-prod-info p { margin: 7px 0 11px; color: var(--asf-text-dim); font-size: .9rem; line-height: 1.5; }
.asf-escolhido .asf-prod-info a {
    display: inline-flex; align-items: center; gap: 6px; color: #fff; text-decoration: none;
    font-weight: 700; font-size: .85rem; border-bottom: 2px solid var(--asf-accent); padding-bottom: 2px;
}
.asf-voltar-conversa {
    margin-top: 16px; padding: 9px 15px; border-radius: 20px; cursor: pointer; font-family: inherit; font-size: .82rem;
    border: 1px solid var(--asf-glass-brd); background: rgba(4,9,29,.5); color: var(--asf-text-dim);
    display: inline-flex; align-items: center; gap: 7px; transition: background .15s, color .15s;
}
.asf-voltar-conversa:hover { background: rgba(255,255,255,.14); color: #fff; }

/* ── Composer: barra de digitação grande, ancorada ── */
.asf-composer {
    flex: none; display: flex; align-items: flex-end; gap: 10px;
    padding: 14px clamp(18px, 3vw, 36px) clamp(16px, 3vh, 24px);
    border-top: 1px solid var(--asf-glass-brd);
}
.asf-composer textarea {
    flex: 1; resize: none; background: rgba(255,255,255,.07); border: 1px solid var(--asf-glass-brd); border-radius: 16px;
    color: #fff; font-size: 1rem; font-family: inherit; padding: 14px 16px; min-height: 52px; max-height: 140px; line-height: 1.4;
    outline: none; transition: border-color .15s, background .15s;
}
.asf-composer textarea:focus { border-color: var(--asf-tech); background: rgba(255,255,255,.1); }
.asf-composer textarea::placeholder { color: var(--asf-text-dim); }
.asf-composer button {
    flex: none; width: 52px; height: 52px; border-radius: 50%; border: none;
    background: linear-gradient(135deg, var(--asf-accent), var(--asf-accent-2)); color: #04203a; font-size: 1.2rem;
    cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform .1s;
}
.asf-composer button:hover { transform: scale(1.06); }

/* Etiqueta do topo da vitrine ("Recomendação da Sofia" / "Produtos escolhidos") */
.asf-card-tag {
    display: inline-flex; align-items: center; gap: 6px; background: rgba(62,203,255,.16); color: #8fdcff;
    border-radius: 20px; padding: 4px 12px; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
}

/* ── Formulário de lead: grid usando a largura do painel ── */
.asf-lead-form {
    margin: 6px clamp(18px, 3vw, 36px) 16px; background: var(--asf-text); color: var(--asf-ink);
    border-radius: 18px; padding: 24px; box-shadow: 0 20px 44px rgba(0,0,0,.4);
    display: grid; grid-template-columns: 1fr 1fr; gap: 13px 15px;
}
.asf-lead-form h3 {
    grid-column: 1 / -1; margin: 0 0 2px; font-size: 1.05rem; font-family: var(--asf-display);
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
/* Saída do formulário sem perder a conversa */
.asf-form-fechar {
    flex: none; display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 13px; border-radius: 20px; cursor: pointer; font-family: inherit;
    font-size: .76rem; font-weight: 700; border: 1px solid #d7dfec; background: #f7f9fc; color: #33415c;
    transition: all .15s;
}
.asf-form-fechar i { font-size: 1rem; }
.asf-form-fechar:hover { background: #eef3fb; border-color: var(--asf-navy-mid); color: var(--asf-navy-mid); }
.asf-field { margin: 0; }
.asf-field.full { grid-column: 1 / -1; }
.asf-field label { display: block; font-size: .78rem; font-weight: 700; margin-bottom: 5px; color: #33415c; }
.asf-field input, .asf-field select {
    width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid #d7dfec;
    font-size: .9rem; font-family: inherit; background: #f7f9fc; color: var(--asf-ink);
}
.asf-field input:focus, .asf-field select:focus { outline: 2px solid var(--asf-navy-mid); background: #fff; }

/* Botões grandes com ícone em destaque — escolher clicando, sem digitar */
.asf-pref-chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.asf-pref-chip {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
    padding: 16px 8px; border-radius: 14px; border: 1.5px solid #d7dfec; background: #f7f9fc;
    color: #33415c; font-size: .8rem; font-weight: 700; cursor: pointer; transition: all .15s; font-family: inherit;
}
.asf-pref-chip:hover { border-color: var(--asf-navy-mid); background: #eef3fb; transform: translateY(-1px); }
.asf-pref-chip i { font-size: 1.5rem; transition: color .15s; }
.asf-pref-chip[data-pref="WhatsApp"] i { color: #25d366; }
.asf-pref-chip[data-pref="E-mail"]   i { color: var(--asf-navy-mid); }
/* No card claro do formulário o ciano do CTA teria pouco contraste: aqui vai um
   azul mais fechado, ainda na mesma família. */
.asf-pref-chip[data-pref="Telefone"] i { color: #0b6ea8; }
.asf-pref-chip.is-active { background: var(--asf-navy-mid); border-color: var(--asf-navy-mid); color: #fff; }
.asf-pref-chip.is-active i { color: #fff; }

.asf-btn-submit {
    grid-column: 1 / -1; margin-top: 2px; padding: 13px; border: none; border-radius: 12px;
    background: linear-gradient(135deg, var(--asf-accent), var(--asf-accent-2)); color: #04203a; font-weight: 800; font-size: .96rem;
    cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: opacity .15s, transform .1s; font-family: inherit;
}
.asf-btn-submit:disabled { opacity: .45; cursor: not-allowed; }
.asf-btn-submit:not(:disabled):hover { transform: translateY(-1px); }
.asf-form-erro { grid-column: 1 / -1; color: #c0392b; font-size: .82rem; margin-top: 4px; text-align: center; }

/* ── Tela final ── */
.asf-obrigado { margin: auto clamp(18px, 3vw, 36px); text-align: center; padding: 30px 10px; }
.asf-obrigado i { font-size: 3.2rem; color: var(--asf-accent-2); }
.asf-obrigado h2 { margin: 14px 0 8px; font-size: 1.45rem; font-family: var(--asf-display); }
.asf-obrigado p { color: var(--asf-text-dim); max-width: 420px; margin: 0 auto 22px; line-height: 1.55; }
.asf-obrigado-acoes { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center; }
.asf-btn-conversar {
    display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border: none; border-radius: 20px;
    background: linear-gradient(135deg, var(--asf-accent), var(--asf-accent-2)); color: #04203a;
    font-family: inherit; font-size: .9rem; font-weight: 800; cursor: pointer; transition: transform .1s;
}
.asf-btn-conversar:hover { transform: translateY(-1px); }
.asf-btn-conversar i { font-size: 1.1rem; }
.asf-btn-ghost { display: inline-block; color: #fff; text-decoration: none; border: 1.5px solid var(--asf-glass-brd); padding: 10px 20px; border-radius: 20px; font-size: .88rem; transition: background .15s; }
.asf-btn-ghost:hover { background: rgba(255,255,255,.1); }

/* ── Responsivo: empilha, foto vira uma faixa no topo ── */
@media (max-width: 900px) {
    :root { --asf-faixa: min(200px, 26vh); }
    /* Quem rola é o DOCUMENTO, não o body. Com height:100% + overflow-y:auto
       (herdados do desktop) o body virava a caixa de rolagem: a barra de
       endereço do celular não recolhia e o scrollIntoView ficava errático.
       overflow-x: clip corta o excesso lateral sem criar caixa de rolagem —
       'hidden' aqui forçaria o eixo Y a virar scroll de novo. */
    html, body.asf-body { height: auto; min-height: 100%; overflow: visible; overflow-x: clip; }

    /* A foto vira uma FAIXA no topo, em vez de uma tela inteira quase toda
       coberta pelo painel: assim enquadra a Sofia e o fundo tecnológico de
       verdade (antes só aparecia o topo da cabeça dela). */
    .asf-photo, .asf-scrim, .asf-circuito { inset: 0 0 auto 0; height: var(--asf-faixa); }
    .asf-photo img {
        width: 100%; height: 100%; object-position: center 34%;
        animation: none;          /* zoom lento não compensa numa faixa curta */
    }
    .asf-scrim { background: linear-gradient(to bottom, rgba(4,9,29,.10) 35%, rgba(4,9,29,.78) 100%); }

    .asf-shell { display: block; height: auto; min-height: 100vh; min-height: 100dvh; }
    .asf-main {
        flex: none; width: 100%; max-width: 100%;
        margin-top: var(--asf-faixa);
        min-height: calc(100dvh - var(--asf-faixa));
        border-right: none; border-top-left-radius: 22px; border-top-right-radius: 22px;
        border: 1px solid var(--asf-glass-brd); border-bottom: none;
        background: rgba(6, 13, 32, .62);
    }

    /* UM scroll só: no celular a página inteira rola como uma coluna contínua
       (conversa → opções → formulário). Antes havia dois eixos de rolagem — o
       da página e o da caixa de conversa — e as opções ficavam escondidas
       abaixo da dobra dentro de um scroll interno. */
    /* flex-column continua (pro chat preencher a tela quando a conversa é
       curta), mas sem scroll interno: min-height auto deixa ele CRESCER e
       empurrar a página em vez de rolar por dentro. */
    .asf-chat { flex: 1 0 auto; overflow: visible; min-height: auto; }
    .asf-composer {
        position: sticky; bottom: 0; z-index: 3;
        background: rgba(6, 13, 32, .94); backdrop-filter: blur(12px);
        padding-bottom: max(14px, env(safe-area-inset-bottom));
    }
    /* Com o formulário aberto a barra sai do modo fixo: ela ficava pairando
       por cima dos campos enquanto a pessoa preenchia. A volta pra conversa
       continua no botão "Voltar a conversar", no topo do formulário. */
    body.asf-form-aberto .asf-composer { position: static; }
    /* A confirmação não é empurrada pro fim do painel (margin:auto do desktop),
       senão nasce abaixo da dobra. */
    .asf-obrigado { margin-top: 8px; margin-bottom: auto; padding: 24px 10px; }

    /* Conversa em andamento: a apresentação recolhe e devolve ~110px de altura
       pro chat. Na primeira tela ela aparece inteira, que é quando convence. */
    body.asf-em-conversa .asf-status-pill,
    body.asf-em-conversa .asf-hero-copy p { display: none; }
    body.asf-em-conversa .asf-hero-copy { padding-top: 2px; padding-bottom: 12px; }
    body.asf-em-conversa .asf-hero-copy h1 { font-size: 1.15rem; }
    .asf-hero-copy p { font-size: .95rem; }
    .asf-photo-tag { display: none; }
    .asf-prod-acoes .asf-prod-confirmar, .asf-prod-acoes .asf-prod-outras { flex: 1; text-align: center; }
    /* Tela estreita: os chips passam pra baixo da fala em vez de espremer */
    .asf-msg { flex-wrap: wrap; }
    .asf-chips { width: 100%; max-width: none; margin-top: 4px; }
    /* Vitrine entra no fluxo do painel (o JS a move pra dentro dele) */
    .asf-vitrine {
        display: block; flex: none; height: auto; overflow: visible; background: none;
        padding: 4px clamp(18px, 3vw, 36px) 2px;
    }
    .asf-vitrine-inner { max-width: none; }
    .asf-escolhido .asf-prod-logo { width: 116px; height: 70px; }
}

/* ── Celular de verdade ──
   Tablet (≈768px) ainda tem largura pra formulário em duas colunas e cards
   horizontais; abaixo disso é que tudo precisa empilhar. */
@media (max-width: 600px) {
    /* Compactação: mesmas funções, ocupando menos altura — em tela pequena
       cada pixel gasto em respiro é um a menos de conversa visível. */
    .asf-chat { padding: 16px 16px 12px; gap: 12px; }
    .asf-bubble { font-size: .94rem; padding: 12px 15px; }
    .asf-chip { padding: 9px 14px; font-size: .86rem; }
    .asf-composer { padding: 10px 16px; gap: 8px; }
    .asf-composer textarea { min-height: 46px; padding: 12px 14px; font-size: .95rem; }
    .asf-composer button { width: 46px; height: 46px; }
    .asf-topbar { padding: 16px 16px 8px; }
    .asf-brand-logo { height: 32px; }
    .asf-hero-copy { padding: 6px 16px 14px; }
    .asf-vitrine { padding: 4px 16px 2px; }
    .asf-lead-form { margin: 6px 16px 14px; padding: 18px; }
    .asf-field label { font-size: .74rem; }
    .asf-escolhido { padding: 14px; }

    .asf-lead-form { grid-template-columns: 1fr; }
    /* Título e botão de fechar empilham pra não espremer o texto */
    .asf-lead-form h3 { flex-direction: column; align-items: flex-start; gap: 10px; }
    .asf-escolhido { flex-direction: column; gap: 12px; padding: 16px; }
    .asf-prod-logo { width: 84px; height: 52px; }
    .asf-prod-label { font-size: .9rem; }
    .asf-prod-card { gap: 11px; padding: 11px 12px; }
}