/*
         * AureLIA (estudo-aurelia). Protótipo aprovado em 2026-11-11.
         * Destaque só com a cor do tema da UF (bg-grid-sub-header, btn template). Resto em cinzas neutros.
         */
        .aurelia {
            --texto: #2f353b; --texto-suave: #6b7a8c; --linha: #e1e6ee; --fundo-conversa: #f2f4f7; --fundo-item: #f7f9fb;
            display: flex; background: #fff; border: 1px solid var(--linha);
            height: calc(100vh - 205px); min-height: 460px; color: var(--texto);
        }

        /* ---------- Coluna de conversas ---------- */
        .aurelia-lateral { width: 290px; flex: 0 0 290px; border-right: 1px solid var(--linha); display: flex; flex-direction: column; min-height: 0; position: relative; }
        .aurelia-lateral-topo { display: flex; gap: 8px; padding: 14px; border-bottom: 1px solid var(--linha); }
        .aurelia-lateral-topo .btn.template { flex: 1; }
        .aurelia-lista { flex: 1; overflow-y: auto; }
        .aurelia-dia { padding: 14px 14px 6px; font-size: 12px; font-weight: 600; color: var(--texto-suave); }
        .aurelia-conversa-item { display: block; position: relative; padding: 10px 14px 10px 17px; border-bottom: 1px solid var(--linha); color: var(--texto); text-decoration: none !important; }
        .aurelia-conversa-item:hover, .aurelia-conversa-item:focus { background: var(--fundo-item); color: var(--texto); }
        .aurelia-conversa-item .titulo { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 600; }
        .aurelia-conversa-item .titulo time { font-weight: 400; font-size: 12px; color: var(--texto-suave); white-space: nowrap; }
        .aurelia-conversa-item .previa { display: block; margin-top: 2px; font-size: 12px; color: var(--texto-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .aurelia-conversa-item.ativo { background: var(--fundo-item); }
        .aurelia-conversa-item .aurelia-marca { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; display: none; }
        .aurelia-conversa-item.ativo .aurelia-marca { display: block; }
        .aurelia .aurelia-marca { padding: 0 !important; margin: 0 !important; min-height: 0; font-size: 0; }

        /* ---------- Painel de perguntas prontas ---------- */
        .aurelia-prontas { display: none; position: absolute; top: 62px; left: 14px; width: 340px; max-height: calc(100% - 76px); overflow-y: auto; z-index: 20;
            background: #fff; border: 1px solid var(--linha); box-shadow: 0 6px 18px rgba(47, 53, 59, .18); padding: 12px 14px 14px; }
        .aurelia-prontas.aberto { display: block; }
        .aurelia-prontas-topo { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
        .aurelia-prontas-topo strong { font-size: 14px; }
        .aurelia-prontas-topo button { background: none; border: 0; color: var(--texto-suave); font-size: 16px; line-height: 1; padding: 4px; }
        .aurelia-prontas h4 { font-size: 12px; font-weight: 600; color: var(--texto-suave); margin: 12px 0 6px; }
        .aurelia-baloes { display: flex; flex-wrap: wrap; gap: 6px; }
        .aurelia-balao-sugestao { background: #fff; border: 1px solid #c9d1dc; border-radius: 16px !important; padding: 6px 12px; font-size: 13px; color: var(--texto); text-align: left; line-height: 1.35; }
        .aurelia-balao-sugestao:hover, .aurelia-balao-sugestao:focus { border-color: #8896a8; background: var(--fundo-item); outline: none; }

        /* ---------- Conversa ---------- */
        .aurelia-conversa { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--fundo-conversa); }
        .aurelia-conversa-topo { background: #fff; border-bottom: 1px solid var(--linha); padding: 12px 24px; }
        .aurelia-conversa-topo h2 { margin: 0; font-size: 15px; font-weight: 600; }
        .aurelia-conversa-topo small { color: var(--texto-suave); font-size: 12px; }
        .aurelia-rolagem { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 8px 24px 20px; }
        .aurelia-mensagens { max-width: 940px; margin: 0 auto; }
        .aurelia-separador-dia { text-align: center; margin: 14px 0; font-size: 12px; color: var(--texto-suave); }
        .aurelia-separador-dia span { background: var(--fundo-conversa); padding: 0 10px; position: relative; }
        .aurelia-separador-dia:before { content: ""; display: block; border-top: 1px solid var(--linha); position: relative; top: 9px; }

        /* Mensagem do usuário: à direita, na cor da UF */
        .aurelia-usuario { display: flex; flex-direction: column; align-items: flex-end; margin: 18px 0; }
        .aurelia-usuario .quem { font-size: 12px; color: var(--texto-suave); margin-bottom: 4px; }
        .aurelia-usuario .balao { max-width: 72%; padding: 10px 14px; font-size: 14px; line-height: 1.5; border-radius: 12px 12px 2px 12px !important; }

        /* Resposta da AureLIA: à esquerda, com foto, em blocos rotulados */
        .aurelia-ia { display: flex; gap: 12px; margin: 18px 0; align-items: flex-start; }
        .aurelia-foto { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50% !important; object-fit: cover; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--linha); }
        .aurelia-ia-corpo { flex: 1; min-width: 0; }
        .aurelia-ia .quem { font-size: 12px; color: var(--texto-suave); margin-bottom: 4px; }
        .aurelia-ia .quem strong { color: var(--texto); font-size: 13px; margin-right: 4px; }
        .aurelia-cartao { background: #fff; border: 1px solid var(--linha); border-radius: 2px 12px 12px 12px !important; }
        .aurelia-bloco { padding: 12px 16px; }
        .aurelia-bloco + .aurelia-bloco { border-top: 1px solid var(--linha); }
        .aurelia-rotulo { display: block; font-size: 12px; font-weight: 600; color: var(--texto-suave); margin-bottom: 6px; }
        .aurelia-entendi { font-size: 13px; line-height: 1.5; margin: 0; color: #4b5c72; }
        .aurelia-numeros { display: flex; flex-wrap: wrap; margin: 2px 0 14px; }
        .aurelia-numero { padding-right: 22px; margin-right: 22px; border-right: 1px solid var(--linha); }
        .aurelia-numero:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
        .aurelia-numero strong { display: block; font-size: 21px; font-weight: 600; line-height: 1.25; }
        .aurelia-numero span { font-size: 12px; color: var(--texto-suave); }
        .aurelia-texto { font-size: 14px; line-height: 1.6; margin: 0; max-width: 70ch; }
        .aurelia-bloco .table-scrollable { margin: 0 !important; border-color: var(--linha); }
        .aurelia-bloco .table { margin-bottom: 0; }
        .aurelia-bloco .table > thead > tr > th { background: var(--fundo-item); font-weight: 600; font-size: 12px; color: var(--texto-suave); border-bottom-width: 1px; }
        .aurelia-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; background: var(--fundo-item); border-radius: 0 0 12px 12px !important; }
        .aurelia-acoes .aurelia-contagem { margin-left: auto; font-size: 12px; color: var(--texto-suave); }
        .aurelia-sql { display: none; margin: 10px 0 0; font-size: 12px; white-space: pre-wrap; word-break: break-word; background: #fff; border-color: var(--linha); width: 100%; }
        .aurelia-pensando { color: var(--texto-suave); font-size: 13px; }

        /* Conversa vazia */
        .aurelia-vazio { text-align: center; max-width: 560px; margin: 40px auto 0; }
        .aurelia-vazio img { width: 88px; height: 88px; border-radius: 50% !important; object-fit: cover; box-shadow: 0 0 0 1px var(--linha); }
        .aurelia-vazio h3 { font-size: 18px; font-weight: 600; margin: 14px 0 6px; }
        .aurelia-vazio p { color: var(--texto-suave); margin-bottom: 16px; }
        .aurelia-vazio .aurelia-baloes { justify-content: center; }

        /* ---------- Caixa de pergunta ---------- */
        .aurelia-composicao { background: #fff; border-top: 1px solid var(--linha); padding: 12px 24px 12px; }
        .aurelia-caixa { max-width: 940px; margin: 0 auto; display: flex; align-items: flex-end; gap: 8px; border: 1px solid #c2cad8; background: #fff; padding: 6px 6px 6px 12px; }
        .aurelia-caixa:focus-within { border-color: #6b7a8c; }
        .aurelia-caixa textarea { flex: 1; border: 0; outline: none; resize: none; background: transparent; color: var(--texto); font-size: 14px; line-height: 1.45; height: 44px; padding: 5px 0; }
        .aurelia-caixa textarea::placeholder { color: #94a0b2; }
        .aurelia-dica { max-width: 940px; margin: 6px auto 0; font-size: 12px; color: var(--texto-suave); }

        @media (max-width: 991px) {
            .aurelia-lateral { display: none; }
            .aurelia-rolagem, .aurelia-composicao, .aurelia-conversa-topo { padding-left: 14px; padding-right: 14px; }
            .aurelia-usuario .balao { max-width: 88%; }
        }
        @media (prefers-reduced-motion: reduce) { .fa-spin { animation: none; } }

/* Estados que só existem no produto */
.aurelia-erro { color: #a94442; }
.aurelia-mais-linhas { font-size: 12px; color: var(--texto-suave); margin-top: 6px; }
.aurelia-modelos { display: none; }
.aurelia-acoes .btn.ativo { box-shadow: inset 0 0 0 2px #8896a8; }

/* Tabela da resposta: mais largura e quebra de linha (o Metronic põe nowrap no cabeçalho de .table-scrollable) */
.aurelia-mensagens { max-width: 1100px; }
.aurelia .table-scrollable > .aurelia-tabela > thead > tr > th { white-space: normal; vertical-align: bottom; }
.aurelia .aurelia-tabela > tbody > tr > td { white-space: normal; }
/* números não quebram; cabeçalho quebra para a coluna ficar só da largura do número */
.aurelia .aurelia-tabela > tbody > tr > td.text-right { white-space: nowrap; }

/* Quando nem assim cabe: cada linha vira um cartão com rótulo e valor (sem rolagem horizontal) */
.aurelia-tabela.aurelia-tabela-empilhada > thead { display: none; }
.aurelia-tabela.aurelia-tabela-empilhada,
.aurelia-tabela.aurelia-tabela-empilhada > tbody,
.aurelia-tabela.aurelia-tabela-empilhada > tbody > tr { display: block; width: 100%; }
.aurelia-tabela.aurelia-tabela-empilhada > tbody > tr { border-bottom: 1px solid var(--linha); padding: 8px 12px; }
.aurelia-tabela.aurelia-tabela-empilhada > tbody > tr:nth-child(odd) { background: var(--fundo-item); }
.aurelia .aurelia-tabela.aurelia-tabela-empilhada > tbody > tr > td {
    display: flex; justify-content: space-between; gap: 16px; border: 0; padding: 3px 0; text-align: right; white-space: normal;
}
.aurelia-tabela.aurelia-tabela-empilhada > tbody > tr > td::before {
    content: attr(data-rotulo); font-weight: 600; color: var(--texto-suave); text-align: left; flex: 0 0 45%;
}

/* Tabela compacta: cabe mais coluna antes de precisar virar cartão */
.aurelia .aurelia-tabela > thead > tr > th,
.aurelia .aurelia-tabela > tbody > tr > td { font-size: 12px; padding: 6px 8px; line-height: 1.35; }
.aurelia-rolagem { padding-left: 16px; padding-right: 16px; }

/* Telas médias: histórico mais estreito para sobrar espaço para a resposta */
@media (max-width: 1365px) and (min-width: 992px) {
    .aurelia-lateral { width: 230px; flex-basis: 230px; }
    .aurelia-prontas { width: 300px; }
}