/**
 * Assistente de Ajuda no padrão WhatsApp (site/ajuda-chat), com a paleta do SIGGE / Transalvador.
 * Todo o estilo fica dentro de .wa para não interferir no restante do sistema.
 */

.wa {
    /* Paleta do sistema (menu lateral, Meu Imóvel e Central de Ajuda) */
    --wa-marinho: #0B3D6B;
    --wa-marinho-esc: #08294A;
    --wa-azul: #2563EB;
    --wa-azul-esc: #1D4ED8;
    --wa-azul-cl: #EAF1FB;
    --wa-amarelo: #F2B705;
    --wa-fundo: #E9EFF7;
    --wa-entrada: #FFFFFF;
    --wa-saida: #DCE8FB;
    --wa-texto: #0F1E33;
    --wa-texto2: #5B6B80;
    --wa-check: #2563EB;
    --wa-barra: #EEF3F9;
    --wa-borda: #D9E2EE;
    --wa-sombra: 0 1px .5px rgba(11, 30, 51, .13);
    --wa-whatsapp: #25D366;

    font-family: "Segoe UI", "Helvetica Neue", Helvetica, "Lucida Grande", Arial, Ubuntu, Cantarell, "Fira Sans", sans-serif;
    font-size: 14.2px;
    line-height: 19px;
    color: var(--wa-texto);
    position: relative;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 150px);
    min-height: 560px;
    max-width: 1040px;
    margin: -10px auto;
    border-radius: 10px;
    overflow: hidden;
    background: var(--wa-fundo);
    box-shadow: 0 6px 18px rgba(11, 30, 51, .12);
}
.wa *, .wa *::before, .wa *::after { box-sizing: border-box; }
.wa [hidden] { display: none !important; }
.wa p { margin: 0; }
.wa a { color: var(--wa-azul); }
.wa button { font-family: inherit; }
.wa :focus-visible { outline: 2px solid var(--wa-amarelo); outline-offset: 2px; border-radius: 6px; }
.wa-sr {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ===================== CABEÇALHO ===================== */
.wa-cab {
    flex: 0 0 auto; display: flex; align-items: center; gap: 12px;
    height: 60px; padding: 0 12px 0 16px; color: #fff; z-index: 3;
    background: linear-gradient(90deg, var(--wa-marinho-esc), var(--wa-marinho));
}
.wa-avatar {
    width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 21px;
    background: var(--wa-amarelo); color: var(--wa-marinho);
}
.wa-avatar-mascote { overflow: hidden; background: var(--wa-azul-cl); border: 2px solid var(--wa-amarelo); }
.wa-avatar-mascote img { display: block; width: 100%; height: 100%; }
.wa-cab-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wa-cab-info strong { font-size: 16px; font-weight: 600; line-height: 21px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-verificado { color: var(--wa-amarelo); font-size: 14px; margin-left: 2px; }
.wa-cab-status { font-size: 13px; line-height: 18px; color: rgba(255, 255, 255, .8); }
.wa-cab-acoes { display: flex; gap: 4px; }
.wa-cab-acoes button {
    width: 40px; height: 40px; border-radius: 50%; border: 0; background: transparent; color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 18px; cursor: pointer;
}
.wa-cab-acoes button:hover { background: rgba(255, 255, 255, .15); }

/* ===================== CONVERSA ===================== */
.wa-conversa {
    flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; position: relative;
    background-color: var(--wa-fundo);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%230B3D6B' stroke-opacity='.07' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 30h22l5 7v8H13v-8z'/%3E%3Ccircle cx='20' cy='46' r='3'/%3E%3Ccircle cx='38' cy='46' r='3'/%3E%3Cpath d='M98 14l12 10v14H86V24z'/%3E%3Cpath d='M95 38v-8h6v8'/%3E%3Cpath d='M128 70l3 7 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z'/%3E%3Crect x='30' y='92' width='26' height='18' rx='4'/%3E%3Cpath d='M36 101h14'/%3E%3Cpath d='M106 108c0-8 14-8 14 0v10h-14z'/%3E%3Ccircle cx='113' cy='99' r='5'/%3E%3Cpath d='M64 52c6-6 16-6 22 0M68 57c4-4 10-4 14 0'/%3E%3Ccircle cx='75' cy='62' r='1.5'/%3E%3Cpath d='M20 132l8-8 8 8-8 8z'/%3E%3Cpath d='M136 132h14M143 125v14'/%3E%3Cpath d='M70 140c0-6 10-6 10-12'/%3E%3C/g%3E%3C/svg%3E");
}
.wa-fluxo { display: flex; flex-direction: column; padding: 14px 7% 18px; min-height: 100%; justify-content: flex-end; }

.wa-chip {
    align-self: center; margin: 10px 0; padding: 5px 12px 6px; border-radius: 7.5px; font-size: 12.5px;
    background: #fff; color: var(--wa-texto2); box-shadow: var(--wa-sombra); text-transform: uppercase; text-align: center;
}
.wa-chip.aviso { text-transform: none; background: #FFF5D6; color: #5B4A12; max-width: 460px; line-height: 18px; padding: 6px 12px 7px; }
.wa-chip.aviso .fa { margin-right: 4px; }

/* ---------- Mensagens ---------- */
.wa-msg { display: flex; flex-direction: column; max-width: 65%; margin-top: 2px; position: relative; animation: wa-entra .22s ease-out both; }
.wa-msg.primeira { margin-top: 12px; }
.wa-msg.bot { align-self: flex-start; }
.wa-msg.eu { align-self: flex-end; align-items: flex-end; }
.wa-msg.com-opcoes { min-width: min(340px, 100%); }
@keyframes wa-entra {
    from { opacity: 0; transform: translateY(6px) scale(.98); }
    to { opacity: 1; transform: none; }
}

.wa-balao {
    position: relative; padding: 6px 7px 8px 9px; border-radius: 7.5px; box-shadow: var(--wa-sombra);
    background: var(--wa-entrada); overflow-wrap: anywhere; min-width: 90px;
}
.wa-msg.eu .wa-balao { background: var(--wa-saida); }
.wa-msg.primeira.bot .wa-balao { border-top-left-radius: 0; }
.wa-msg.primeira.eu .wa-balao { border-top-right-radius: 0; }
.wa-msg.primeira .wa-balao::before { content: ""; position: absolute; top: 0; width: 8px; height: 13px; }
.wa-msg.primeira.bot .wa-balao::before { left: -8px; background: var(--wa-entrada); clip-path: polygon(100% 0, 0 0, 100% 100%); }
.wa-msg.primeira.eu .wa-balao::before { right: -8px; background: var(--wa-saida); clip-path: polygon(0 0, 100% 0, 0 100%); }

.wa-texto strong { font-weight: 600; }
.wa-texto a { word-break: break-all; }
.wa-hora {
    float: right; margin: 6px 0 -6px 12px; font-size: 11px; line-height: 15px; color: var(--wa-texto2);
    display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; position: relative; top: 4px;
}
.wa-checks { font-size: 12px; color: #8696A0; letter-spacing: -6px; padding-right: 6px; }
.wa-checks.lido { color: var(--wa-check); }
.wa-limpa { clear: both; }
.wa-correcao { display: block; font-style: italic; color: var(--wa-texto2); margin-bottom: 4px; font-size: 13px; }

/* ---------- Respostas formatadas: títulos, passos e documentos ---------- */
.wa-bloco + .wa-bloco, .wa-docs + .wa-bloco, .wa-bloco + .wa-docs { margin-top: 9px; }
.wa-linha { display: block; }
.wa-cabecalho {
    display: block; font-size: 16px; line-height: 22px; font-weight: 700; color: var(--wa-marinho);
    margin: 2px 0 4px; letter-spacing: .1px;
}
.wa-cabecalho.principal { font-size: 17.5px; line-height: 24px; margin-bottom: 6px; }
.wa-cabecalho .fa { color: var(--wa-azul); margin-right: 8px; font-size: .95em; }
.wa-cabecalho.atencao { font-size: 15px; color: #9A6B00; }
.wa-cabecalho.atencao .fa { color: #D99A00; }

.wa .wa-passos, .wa .wa-docs { list-style: none; margin: 4px 0 2px; padding: 0; }
.wa-passos li, .wa-docs li { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 9px; }
.wa-passos li:last-child, .wa-docs li:last-child { margin-bottom: 0; }
.wa-passos li > span:last-child, .wa-docs li > span:last-child { padding-top: 5px; }
.wa-item-icone {
    position: relative; flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 14px;
    background: var(--wa-azul-cl); color: var(--wa-azul);
}
.wa-passo-num {
    position: absolute; right: -4px; bottom: -3px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
    background: var(--wa-marinho); color: #fff; font-size: 10px; line-height: 16px; text-align: center; font-weight: 700;
    box-shadow: 0 0 0 2px #fff;
}
.wa-docs .wa-item-icone { border-radius: 8px; background: #FFF5D6; color: #9A6B00; }
.wa-opcao-icone { width: 18px; text-align: center; color: var(--wa-marinho); font-size: 15px; flex-shrink: 0; opacity: .85; }

/* ---------- Opções dentro da mensagem ---------- */
.wa-opcoes { margin: 8px -7px 0 -9px; border-top: 1px solid var(--wa-borda); }
.wa-opcao, .wa .wa-opcao {
    display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 12px 8px 10px;
    border: 0; border-bottom: 1px solid var(--wa-borda); background: none; cursor: pointer;
    text-align: left; color: var(--wa-texto); text-decoration: none; transition: background .12s;
}
.wa-opcao:last-child { border-bottom: 0; }
.wa-opcao:hover, .wa .wa-opcao:hover { background: var(--wa-azul-cl); color: var(--wa-texto); }
.wa-opcao-num {
    flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; font-size: 12px; font-weight: 700;
    display: flex; align-items: center; justify-content: center; background: var(--wa-azul-cl); color: var(--wa-azul);
}
.wa-opcao:hover .wa-opcao-num { background: var(--wa-azul); color: #fff; }
.wa-opcao-texto { flex: 1; min-width: 0; }
.wa-opcao-texto strong { display: block; font-weight: 600; color: var(--wa-azul-esc); font-size: 14px; }
.wa-opcao-texto span { display: block; font-size: 12.5px; color: var(--wa-texto2); line-height: 16px; }
.wa-opcao-seta { color: #9AA8B8; font-size: 13px; }
.wa-opcao[disabled] { cursor: default; opacity: .5; }
.wa-opcao[disabled]:hover { background: none; }
.wa-opcao[disabled]:hover .wa-opcao-num { background: var(--wa-azul-cl); color: var(--wa-azul); }
.wa-opcao.escolhida, .wa-opcao.escolhida[disabled] { opacity: 1; background: var(--wa-azul-cl); }
.wa-opcao.escolhida .wa-opcao-num, .wa-opcao.escolhida[disabled]:hover .wa-opcao-num { background: var(--wa-azul); color: #fff; }
.wa-opcao.escolhida .wa-opcao-seta { color: var(--wa-azul); font-size: 16px; }
.wa-opcao.contato .wa-opcao-num { background: transparent; font-size: 20px; width: 24px; }
.wa-opcao.contato.whatsapp .wa-opcao-num { color: var(--wa-whatsapp); }
.wa-opcao.contato.email .wa-opcao-num { color: var(--wa-azul); }
.wa-opcao.contato strong { color: var(--wa-texto); }
.wa-opcoes-dica { display: block; font-size: 12px; color: var(--wa-texto2); padding: 6px 10px 0; }
.wa-opcoes + .wa-hora { margin-top: 4px; }

/* ---------- Digitando… ---------- */
.wa-digitando .wa-balao { padding: 12px 14px; min-width: 0; }
.wa-pontos { display: inline-flex; gap: 4px; }
.wa-pontos i { width: 7px; height: 7px; border-radius: 50%; background: #8FA0B5; animation: wa-ponto 1.2s infinite ease-in-out; }
.wa-pontos i:nth-child(2) { animation-delay: .15s; }
.wa-pontos i:nth-child(3) { animation-delay: .3s; }
@keyframes wa-ponto {
    0%, 60%, 100% { transform: translateY(0); opacity: .45; }
    30% { transform: translateY(-4px); opacity: 1; }
}

/* ---------- Botão "descer" ---------- */
.wa-descer {
    position: absolute; right: 18px; bottom: 82px; z-index: 4; width: 42px; height: 42px; border-radius: 50%;
    border: 0; background: #fff; color: var(--wa-texto2); font-size: 22px; cursor: pointer;
    box-shadow: 0 1px 3px rgba(11, 30, 51, .3); display: flex; align-items: center; justify-content: center;
}
.wa-descer-badge {
    position: absolute; top: -6px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
    background: var(--wa-azul); color: #fff; font-size: 11px; font-weight: 700; line-height: 20px;
}

/* ===================== SUGESTÕES E COMPOSITOR ===================== */
.wa-sugestoes {
    flex: 0 0 auto; display: flex; gap: 8px; overflow-x: auto; padding: 8px 12px 2px;
    background: var(--wa-barra); scrollbar-width: none;
}
.wa-sugestoes::-webkit-scrollbar { display: none; }
.wa-sugestoes-rotulo { font-size: 12px; color: var(--wa-texto2); align-self: center; flex-shrink: 0; }
.wa-sugestao {
    flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; max-width: 320px;
    padding: 6px 12px; border-radius: 18px; border: 1px solid var(--wa-borda); background: #fff;
    color: var(--wa-texto); font-size: 13px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    animation: wa-entra .18s ease-out both;
}
.wa-sugestao .fa { color: var(--wa-azul); }
.wa-sugestao:hover { border-color: var(--wa-azul); }

.wa-compositor {
    flex: 0 0 auto; display: flex; align-items: flex-end; gap: 8px; padding: 8px 12px 10px;
    background: var(--wa-barra); margin: 0; border-top: 1px solid var(--wa-borda);
}
.wa-campo { flex: 1; background: #fff; border-radius: 8px; padding: 9px 14px; display: flex; align-items: center; min-height: 44px; border: 1px solid var(--wa-borda); }
.wa-campo:focus-within { border-color: var(--wa-azul); }
.wa-campo textarea {
    width: 100%; border: 0; outline: none; resize: none; background: transparent; font: inherit; font-size: 15px;
    line-height: 20px; max-height: 100px; color: var(--wa-texto); padding: 0; margin: 0;
}
.wa-campo textarea::placeholder { color: #8A99AD; }
.wa-campo textarea:focus-visible { outline: none; }
.wa-botao-redondo {
    width: 44px; height: 44px; border-radius: 50%; border: 0; flex-shrink: 0; cursor: pointer;
    background: var(--wa-azul); color: #fff; font-size: 18px; display: flex; align-items: center; justify-content: center;
    transition: transform .15s, background .15s;
}
.wa-botao-redondo:hover { background: var(--wa-marinho); }
.wa-botao-redondo:active { transform: scale(.92); }
.wa-voz.ouvindo { background: #DC2626; animation: wa-ouvindo 1.2s infinite; }
@keyframes wa-ouvindo {
    0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, .5); }
    100% { box-shadow: 0 0 0 14px rgba(220, 38, 38, 0); }
}

/* ===================== RESPONSIVO ===================== */
@media (max-width: 767px) {
    .wa { margin: -10px; border-radius: 0; height: calc(100vh - 120px); min-height: 480px; }
    .wa-fluxo { padding: 10px 12px 14px; }
    .wa-msg { max-width: 88%; }
    .wa-msg.com-opcoes { min-width: 88%; }
    .wa-campo { border-radius: 22px; }
    .wa-descer { bottom: 76px; right: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    .wa *, .wa *::before, .wa *::after { animation: none !important; transition: none !important; }
}