/* ═══════════════════════════════════════════════════════════════════════════
   assistente.css — a bolha de dúvidas e o painel de conversa.

   POR QUE É UM ARQUIVO SEPARADO, E NÃO UM BLOCO NO home-new.css
     home-new.css é carregado por duas telas só (index.php e guia.php), e o
     assistente precisa aparecer também na busca, no detalhe do imóvel e na
     página de dúvidas — telas que ainda usam o CSS antigo. Arquivo próprio é
     o que permite `include _assistente.php` em qualquer página sem arrastar
     22 KB de estilo de home junto.

   PREFIXO `asst-`
     Mesma regra que o `hn-` estabeleceu: o CSS antigo do portal tem nomes
     genéricos (.card, .btn, .chat), e um seletor solto aqui colidiria com
     eles em alguma tela que ninguém pensou em testar.

   AS CORES
     Herdam a paleta da home quando ela está carregada (var(--hn-azul, ...)) e
     caem no valor literal quando não está. É o que faz o widget parecer parte
     do site tanto na home nova quanto nas telas legadas, sem duas folhas de
     estilo.

   EMPILHAMENTO (z-index), que aqui é decisão de produto e não de estilo
     10000  banner de cookies      — consentimento vem antes de tudo
      9200  painel do assistente
      9100  bolha do assistente
        90  barra fixa de ação da home (.hn-barra-fixa)
     A bolha fica ACIMA da barra fixa, e no celular sobe 68px para não cobrir
     os botões dela. Abaixo do banner de cookies de propósito: enquanto a
     pessoa não decidiu sobre cookies, ela não deve estar conversando.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── [hidden] TEM QUE VENCER ──────────────────────────────────────────────
   O atributo `hidden` do HTML vale `display: none` na folha do navegador — e
   QUALQUER regra de autor com `display` ganha dela. Como os elementos que
   nascem escondidos aqui são `.hn-btn` (display: inline-flex) e
   `.hn-dv-chamada` (display: flex), sem este bloco o [hidden] deles seria
   simplesmente ignorado e o botão apareceria mesmo sem JavaScript — o oposto
   do que se quis.

   O !important é restrito a estes três seletores, que só existem no
   assistente. Não há como isto atropelar outra coisa do site. */
[data-asst-abrir][hidden],
[data-asst-so-js][hidden],
.asst [hidden] { display: none !important; }

.asst {
    --asst-azul:   var(--hn-azul,     #1c6bd0);
    --asst-navy:   var(--hn-navy,     #16243c);
    --asst-tinta:  var(--hn-tinta,    #16202f);
    --asst-tinta2: var(--hn-tinta-2,  #55637a);
    --asst-linha:  var(--hn-linha,    #e3e8ef);
    --asst-fundo:  var(--hn-fundo,    #f6f8fb);
    --asst-corpo:  var(--hn-corpo, 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif);
    --asst-raio:   14px;
    --asst-transic: var(--hn-transic, .22s cubic-bezier(.4, 0, .2, 1));

    font-family: var(--asst-corpo);
}

/* box-sizing próprio, e não herdado: o home-new.css declara `* { box-sizing:
   border-box }`, mas o CSS antigo das telas legadas (imoveis.php,
   ver_anuncio.php) não declara — e lá o painel teria 380px MAIS a borda e o
   padding, estourando a largura no celular. O widget precisa se sustentar em
   qualquer página do portal. */
.asst, .asst *, .asst *::before, .asst *::after { box-sizing: border-box; }

/* ── A BOLHA ──────────────────────────────────────────────────────────────
   Rótulo escrito, e não só um ícone de balão: ícone sozinho é adivinhação, e
   "Dúvidas?" diz o que acontece no clique. No celular o rótulo sai (o espaço
   é do conteúdo) e sobra o ícone com aria-label.

   NASCE ESCONDIDA. `data-js="1"` é posto por js/assistente.js quando ele
   carrega; sem JS a bolha nunca aparece. O widget é 100% dependente de
   JavaScript, e um botão que não faz nada é pior do que botão nenhum — quem
   está sem JS tem a página duvidas.php, que funciona inteira sem ele. É a
   mesma lógica do `.hn-reveal` em home-new.css, ao contrário: aqui o
   elemento só existe se o JS confirmar que sabe operá-lo. */
.asst-bolha {
    display: none;
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 9100;
    align-items: center;
    gap: 9px;
    padding: 13px 18px;
    border: 0;
    border-radius: 999px;
    background: var(--asst-azul);
    color: #fff;
    font-family: inherit;
    font-size: .93rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 8px 26px rgba(16, 32, 56, .26);
    transition: transform var(--asst-transic), background var(--asst-transic),
                opacity var(--asst-transic);
}
.asst[data-js="1"] .asst-bolha { display: inline-flex; }
.asst-bolha:hover  { background: var(--hn-azul-esc, #14539f); transform: translateY(-2px); }
.asst-bolha:active { transform: translateY(0); }
.asst-bolha svg    { display: block; flex: none; }

/* Com o painel aberto a bolha sai de cena: no celular ela ficaria por cima do
   próprio painel, e no desktop repetiria um botão que já tem o X do topo. */
.asst[data-aberto="1"] .asst-bolha { opacity: 0; pointer-events: none; }

/* ── O PAINEL ─────────────────────────────────────────────────────────────
   Altura em `min()` e não em vh puro: no iOS o 100vh é maior que a área
   visível e o campo de digitar acaba embaixo da barra do Safari. */
.asst-painel {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 9200;
    display: none;
    flex-direction: column;
    width: min(380px, calc(100vw - 36px));
    height: min(560px, calc(100vh - 120px));
    background: #fff;
    border: 1px solid var(--asst-linha);
    border-radius: var(--asst-raio);
    box-shadow: 0 18px 48px rgba(16, 32, 56, .22);
    overflow: hidden;
}
.asst[data-aberto="1"] .asst-painel { display: flex; }

.asst-topo {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 14px 16px;
    background: var(--asst-navy);
    color: #fff;
}
.asst-topo-txt   { flex: 1; min-width: 0; }
.asst-topo-txt b { display: block; font-size: .93rem; font-weight: 700; letter-spacing: -.01em; }
.asst-topo-txt span {
    display: block;
    font-size: .74rem;
    color: rgba(255, 255, 255, .72);
    line-height: 1.35;
    margin-top: 1px;
}
.asst-fechar {
    flex: none;
    width: 30px; height: 30px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 8px;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    cursor: pointer;
    transition: background var(--asst-transic);
}
.asst-fechar:hover { background: rgba(255, 255, 255, .24); }

/* ── A CONVERSA ───────────────────────────────────────────────────────────
   `overscroll-behavior: contain` para o scroll da conversa não continuar na
   página atrás quando chega no fim — no celular isso é o que impede o site
   de "escapar" por baixo do painel. */
.asst-corpo {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 16px;
    background: var(--asst-fundo);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.asst-msg {
    max-width: 88%;
    padding: 11px 14px;
    border-radius: 13px;
    font-size: .875rem;
    line-height: 1.6;
    white-space: pre-line;   /* respeita o parágrafo escrito na resposta */
}
.asst-msg-bot {
    align-self: flex-start;
    background: #fff;
    color: var(--asst-tinta);
    border: 1px solid var(--asst-linha);
    border-bottom-left-radius: 5px;
}
.asst-msg-eu {
    align-self: flex-end;
    background: var(--asst-azul);
    color: #fff;
    border-bottom-right-radius: 5px;
}
/* O aviso de erro e o de limite: mesma bolha do bot, tom de atenção. */
.asst-msg-aviso {
    align-self: flex-start;
    background: #fff8ec;
    border: 1px solid #f0d9ad;
    color: #6b4d17;
}

/* Link da resposta: é um botão-linha dentro da bolha, e não um link no meio
   do texto — dentro de texto justificado ele desaparece. */
.asst-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 8px 13px;
    border-radius: 8px;
    background: var(--hn-azul-cl, #eaf1fc);
    color: var(--asst-azul);
    font-size: .82rem;
    font-weight: 700;
    text-decoration: none;
    transition: background var(--asst-transic);
}
.asst-link:hover { background: #dbe8fa; }

/* ── SUGESTÕES ────────────────────────────────────────────────────────────
   São perguntas, não respostas: o clique manda a pergunta como se a pessoa
   tivesse digitado. É o caminho mais curto para quem não sabe o que dá para
   perguntar — e o que salva a resposta "não entendi". */
.asst-sugs {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 2px;
}
.asst-sug {
    padding: 8px 12px;
    border: 1px solid var(--asst-linha);
    border-radius: 999px;
    background: #fff;
    color: var(--asst-tinta2);
    font-family: inherit;
    font-size: .8rem;
    line-height: 1.35;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--asst-transic), color var(--asst-transic),
                background var(--asst-transic);
}
.asst-sug:hover {
    border-color: var(--asst-azul);
    color: var(--asst-azul);
    background: var(--hn-azul-cl, #eaf1fc);
}

/* Três pontinhos enquanto o servidor responde. Não é enfeite: sem ele, uma
   resposta que leva 300ms parece que o botão não funcionou. */
.asst-pensando {
    align-self: flex-start;
    display: inline-flex;
    gap: 4px;
    padding: 13px 15px;
    background: #fff;
    border: 1px solid var(--asst-linha);
    border-radius: 13px;
    border-bottom-left-radius: 5px;
}
.asst-pensando i {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--hn-tinta-3, #8593a8);
    animation: asst-pulo 1.1s infinite ease-in-out;
}
.asst-pensando i:nth-child(2) { animation-delay: .16s; }
.asst-pensando i:nth-child(3) { animation-delay: .32s; }
@keyframes asst-pulo {
    0%, 60%, 100% { transform: translateY(0);     opacity: .45; }
    30%           { transform: translateY(-4px);  opacity: 1;   }
}

/* ── ONDE SE DIGITA ───────────────────────────────────────────────────────
   16px no input não é escolha estética: abaixo disso o Safari do iPhone dá
   zoom na página ao focar o campo, e a pessoa perde o painel de vista. */
.asst-pe {
    display: flex;
    gap: 8px;
    padding: 12px;
    background: #fff;
    border-top: 1px solid var(--asst-linha);
}
.asst-campo {
    flex: 1;
    min-width: 0;
    padding: 11px 13px;
    border: 1px solid var(--asst-linha);
    border-radius: 9px;
    background: #fff;
    color: var(--asst-tinta);
    font-family: inherit;
    font-size: 16px;
    line-height: 1.4;
    resize: none;
    max-height: 96px;
}
.asst-campo:focus  { outline: 2px solid var(--asst-azul); outline-offset: -1px; border-color: var(--asst-azul); }
.asst-campo::placeholder { color: var(--hn-tinta-3, #8593a8); }

.asst-enviar {
    flex: none;
    width: 42px;
    border: 0;
    border-radius: 9px;
    background: var(--asst-azul);
    color: #fff;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background var(--asst-transic), opacity var(--asst-transic);
}
.asst-enviar:hover:not(:disabled) { background: var(--hn-azul-esc, #14539f); }
.asst-enviar:disabled { opacity: .45; cursor: default; }

/* Rodapé honesto: a pessoa tem direito de saber com o que está falando, e
   onde encontrar gente. */
.asst-nota {
    padding: 0 12px 11px;
    background: #fff;
    font-size: .69rem;
    line-height: 1.45;
    color: var(--hn-tinta-3, #8593a8);
    text-align: center;
}
.asst-nota a { color: var(--asst-tinta2); text-decoration: underline; }

/* Foco visível — o painel inteiro tem que ser navegável por teclado. */
.asst button:focus-visible,
.asst a:focus-visible {
    outline: 3px solid var(--asst-azul);
    outline-offset: 2px;
}
.asst-topo button:focus-visible { outline-color: #fff; }

/* Só para leitor de tela. */
.asst-sr {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ── CELULAR ──────────────────────────────────────────────────────────────
   620px é o mesmo ponto em que a home mostra a .hn-barra-fixa (64px de
   altura). A bolha sobe para não cobrir os botões dela, e o painel passa a
   ocupar a tela: num aparelho de 375px, um cartão flutuante de 380px com
   margem não existe — ou é tela cheia, ou é ilegível. */
@media (max-width: 620px) {
    .asst-bolha {
        right: 14px;
        bottom: 82px;
        padding: 12px;
    }
    .asst-bolha .asst-bolha-txt { display: none; }

    .asst-painel {
        right: 0; left: 0; bottom: 0;
        width: 100%;
        height: min(86vh, calc(100vh - 44px));
        border: 0;
        border-radius: var(--asst-raio) var(--asst-raio) 0 0;
    }
    .asst-msg { max-width: 92%; }
}

@media (prefers-reduced-motion: reduce) {
    .asst-bolha, .asst-fechar, .asst-sug, .asst-link, .asst-enviar { transition: none; }
    .asst-pensando i { animation: none; opacity: .6; }
}