/* static/css/confi.css — A Confia, a assistente flutuante do sistema.
   Especificação: design_handoff_assistente_confi/README.md (hi-fi, valores finais).
   Cores só pelas variáveis de marca.css e do Bootstrap (que o alto contraste troca sozinho):
   texto branco só sobre teal escuro ou petróleo; o teal claro fica para fundo, ícone e enfeite. */

#confi-widget {
    font-family: var(--font-main);
    /* Acima do conteúdo e das barras fixas (1030), abaixo dos fundos das janelas do Bootstrap
       (offcanvas 1040, janela 1050): uma janela aberta cobre a Confia, nunca o contrário. */
    --confi-camada: 1035;
}
/* Com um menu da barra do topo aberto (sininho, avatar, menus), a Confia passa para baixo da
   barra (sticky-top, 1020) e o menu fica por cima do painel. O confi.js põe e tira a classe. */
#confi-widget.confi-sob-a-barra { --confi-camada: 1015; }

/* --- Animações --- */
@keyframes confiPulse {
    0% { transform: scale(1); opacity: .55; }
    70%, 100% { transform: scale(1.9); opacity: 0; }
}
@keyframes confiIn {
    from { opacity: 0; transform: translateY(14px) scale(.97); }
    to { opacity: 1; transform: none; }
}
@keyframes confiDot {
    0%, 60%, 100% { opacity: .25; }
    30% { opacity: 1; }
}

/* --- Bolha (estado fechado) --- */
.confi-bolha {
    position: fixed;
    right: 26px;
    bottom: 26px;
    z-index: var(--confi-camada);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 0;
    padding: 0;
    background: var(--marca-teal-escuro);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .28);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.confi-bolha:hover { background: var(--marca-petroleo); }
/* Pulso de chamada: só com a classe que o confi.js põe na primeira tela da sessão, e três
   vezes (não pulsa sem parar). Fora da animação o anel fica transparente. */
.confi-bolha::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--marca-teal);
    opacity: 0;
    pointer-events: none;
}
.confi-bolha--chamando::before { animation: confiPulse 2.6s ease-out 3; }
.confi-bolha-logo { height: 26px; position: relative; }
.confi-bolha-x { color: #fff; font-size: 22px; position: relative; }

/* --- Balão de sugestão proativa (nudge) --- */
.confi-nudge {
    position: fixed;
    right: 26px;
    bottom: 104px;
    z-index: var(--confi-camada);
    width: 296px;
    max-width: calc(100vw - 32px);
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    border: 1px solid var(--bs-border-color);
    border-radius: 14px 14px 4px 14px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .16);
    padding: 15px 16px;
    animation: confiIn .3s ease both;
}
.confi-nudge-fechar {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--bs-secondary-color);
    cursor: pointer;
    font-size: 13px;
    padding: 0;
}
.confi-nudge-fechar:hover { color: var(--bs-body-color); background: var(--bs-tertiary-bg); }
.confi-nudge-rotulo {
    font-weight: 600;
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--marca-teal-link);
    margin-bottom: 7px;
    padding-right: 24px;
}
.confi-nudge-texto {
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--bs-body-color);
    padding-right: 10px;
}
.confi-nudge-ver {
    margin-top: 11px;
    border: 0;
    background: var(--marca-teal-escuro);
    color: #fff;
    border-radius: 8px;
    padding: 8px 13px;
    font-weight: 500;
    font-size: 12.5px;
    cursor: pointer;
}
.confi-nudge-ver:hover { background: var(--marca-petroleo); }

/* --- Painel (estado aberto) --- */
.confi-painel {
    position: fixed;
    right: 26px;
    bottom: 100px;
    z-index: var(--confi-camada);
    width: 404px;
    max-width: calc(100vw - 32px);
    height: 520px;
    /* O topo do painel fica sempre abaixo da barra do topo (até ~70 px): 100 px de baixo + 80.
       Vale também para o painel alto, que é a mesma caixa. */
    max-height: calc(100vh - 180px);
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    border-radius: 16px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .26);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: confiIn .26s ease both;
}
.confi-painel--alto { height: 660px; }

/* Header */
.confi-header {
    background: var(--marca-petroleo);
    padding: 13px 15px;
    display: flex;
    align-items: center;
    gap: 11px;
    flex: none;
}
/* No petróleo, o foco em água (como na barra do topo): o teal escuro sumiria no fundo. */
.confi-header :focus-visible { outline-color: var(--marca-agua); }
.confi-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--marca-teal-escuro);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}
.confi-avatar img { height: 17px; display: block; }
.confi-header-textos { flex: 1; min-width: 0; }
.confi-titulo {
    font-weight: 600;
    font-size: 15.5px;
    line-height: 1.15;
    color: #fff;
}
.confi-subtitulo {
    font-size: 11.5px;
    line-height: 1.3;
    color: var(--marca-agua);
}
.confi-btn-icone {
    width: 32px;
    height: 32px;
    flex: none;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--marca-agua);
    cursor: pointer;
    padding: 0;
    font-size: 13px;
}
.confi-btn-icone:hover,
.confi-btn-icone[aria-pressed="true"] { color: #fff; background: var(--marca-petroleo-suave); }
#confi-fechar { font-size: 15px; }

/* Faixa de contexto */
.confi-contexto {
    background: var(--marca-nevoa);
    border-bottom: 1px solid var(--marca-agua);
    padding: 8px 15px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex: none;
}
.confi-contexto > i { color: var(--marca-teal-link); font-size: 11px; }
#confi-contexto-label {
    font-size: 11.5px;
    line-height: 1.35;
    color: var(--marca-petroleo-suave);
    flex: 1;
}

/* Área de mensagens (também a da página do assistente, com altura própria) */
.confi-mensagens {
    flex: 1;
    overflow-y: auto;
    background: var(--bs-tertiary-bg);
    padding: 16px 15px;
    display: flex;
    flex-direction: column;
    gap: 13px;
}
.confi-mensagens--pagina { height: 55vh; flex: none; }
.confi-msg { display: flex; }
.confi-msg--usuario { justify-content: flex-end; }
.confi-balao {
    max-width: 88%;
    padding: 12px 14px;
    font-size: 13.5px;
    line-height: 1.55;
    overflow-wrap: anywhere;
}
.confi-balao--assistente {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 14px 14px 14px 4px;
    color: var(--bs-body-color);
}
/* Erro: borda, fundo e ícone de perigo (nunca só a cor) */
.confi-balao--erro {
    background: var(--cg-perigo-fundo);
    border-color: var(--cg-perigo-borda);
    color: var(--cg-perigo-texto);
}
.confi-balao--erro > .fa-triangle-exclamation { margin-right: 6px; }
.confi-balao--usuario {
    background: var(--marca-teal-escuro);
    color: #fff;
    border-radius: 14px 14px 4px 14px;
}

/* Indicador "escrevendo" */
.confi-digitando {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 14px;
    padding: 13px 15px;
    display: flex;
    gap: 5px;
}
.confi-digitando span[aria-hidden] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--marca-teal);
    animation: confiDot 1.2s infinite;
}
.confi-digitando span[aria-hidden]:nth-of-type(2) { animation-delay: .18s; }
.confi-digitando span[aria-hidden]:nth-of-type(3) { animation-delay: .36s; }

/* Tabela da resposta (dentro do balão da assistente): uma <table>, com as colunas alinhadas entre
   as linhas; quando não cabe no balão, rola para os lados dentro dele, sem quebrar os números. */
.confi-tabela {
    margin-top: 10px;
    border: 1px solid var(--bs-border-color);
    border-radius: 9px;
    overflow-x: auto;
    overflow-wrap: normal;
    font-size: 12.5px;
}
.confi-tabela table { width: 100%; border-collapse: collapse; }
.confi-tabela th,
.confi-tabela td {
    padding: 7px 10px;
    text-align: left;
    vertical-align: top;
    border-top: 1px solid var(--bs-border-color);
}
.confi-tabela th {
    background: var(--bs-tertiary-bg);
    font-weight: 600;
    color: var(--bs-secondary-color);
    border-top: 0;
}
/* Coluna só de números (valor, percentual, quantidade): à direita e sem quebra. */
.confi-tabela .confi-tabela-num { text-align: right; white-space: nowrap; }

/* Card de navegação */
.confi-navegacao {
    margin-top: 11px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 11px;
    background: var(--marca-nevoa);
    border: 1px dashed var(--marca-teal);
    border-radius: 9px;
}
.confi-navegacao > i { color: var(--marca-teal-link); font-size: 12px; }
.confi-navegacao-texto {
    flex: 1;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--marca-petroleo);
}
.confi-navegacao-ir {
    border: 0;
    background: var(--marca-teal-escuro);
    color: #fff;
    border-radius: 7px;
    padding: 6px 10px;
    font-weight: 500;
    font-size: 11.5px;
    text-decoration: none;
    cursor: pointer;
}
.confi-navegacao-ir:hover { background: var(--marca-petroleo); color: #fff; }

/* Card de ação com confirmação */
.confi-acao {
    margin-top: 11px;
    border: 1px solid var(--bs-border-color);
    border-radius: 10px;
    overflow: hidden;
}
.confi-acao-header {
    background: var(--marca-petroleo);
    color: #fff;
    padding: 8px 11px;
    font-weight: 600;
    font-size: 11.5px;
}
.confi-acao-header i { margin-right: 6px; color: var(--marca-agua); }
.confi-acao-campos {
    padding: 10px 11px;
    display: grid;
    gap: 6px;
    font-size: 12.5px;
    color: var(--bs-body-color);
}
.confi-acao-campo { display: flex; justify-content: space-between; gap: 10px; }
.confi-acao-campo .rotulo { color: var(--bs-secondary-color); }
.confi-acao-campo .positivo { color: var(--cg-sucesso-texto); font-weight: 600; }
.confi-acao-campo .positivo i { margin-right: 4px; }
.confi-acao-botoes {
    display: flex;
    gap: 8px;
    padding: 0 11px 11px;
}
.confi-acao-confirmar {
    flex: 1;
    border: 0;
    background: var(--marca-teal-escuro);
    color: #fff;
    border-radius: 8px;
    padding: 9px;
    font-weight: 500;
    font-size: 12.5px;
    cursor: pointer;
}
.confi-acao-confirmar:hover { background: var(--marca-petroleo); }
.confi-acao-cancelar {
    border: 1px solid var(--bs-border-color);
    background: var(--bs-body-bg);
    color: var(--bs-secondary-color);
    border-radius: 8px;
    padding: 9px 13px;
    font-weight: 500;
    font-size: 12.5px;
    cursor: pointer;
}
.confi-acao-cancelar:hover { color: var(--bs-body-color); border-color: var(--bs-secondary-color); }
.confi-nota {
    margin-top: 9px;
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--bs-secondary-color);
}
.confi-nota i { margin-right: 5px; }

/* Rodapé de entrada */
.confi-rodape {
    border-top: 1px solid var(--bs-border-color);
    background: var(--bs-body-bg);
    padding: 11px 13px 13px;
    flex: none;
}
.confi-sugestoes {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 10px;
}
.confi-chip {
    border: 1px solid var(--bs-border-color);
    background: var(--bs-body-bg);
    color: var(--bs-secondary-color);
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 12px;
    text-align: left;
    cursor: pointer;
}
.confi-chip:hover { border-color: var(--marca-teal-link); color: var(--marca-teal-link); }
.confi-form {
    display: flex;
    gap: 8px;
    align-items: center;
}
.confi-entrada {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--bs-border-color);
    border-radius: 10px;
    padding: 11px 13px;
    font-family: var(--font-main);
    font-size: 13.5px;
    color: var(--bs-body-color);
    background: var(--bs-body-bg);
}
.confi-entrada::placeholder { color: var(--bs-secondary-color); opacity: 1; }
.confi-entrada:focus { border-color: var(--marca-teal-escuro); }
.confi-enviar {
    width: 42px;
    height: 42px;
    flex: none;
    border: 0;
    background: var(--marca-teal-escuro);
    color: #fff;
    border-radius: 10px;
    font-size: 14px;
    cursor: pointer;
}
.confi-enviar:hover { background: var(--marca-petroleo); }
.confi-enviar:disabled { opacity: .6; cursor: default; }
.confi-disclaimer {
    margin-top: 9px;
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--bs-secondary-color);
}
.confi-disclaimer i { margin-right: 4px; }

/* --- Botão "Confia" na barra do topo (fundo petróleo) --- */
.confi-pin {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 11px;
    border: 1px solid var(--marca-teal);
    background: transparent;
    border-radius: 999px;
    font-family: var(--font-main);
    font-weight: 600;
    font-size: 12.5px;
    color: var(--marca-agua);
    cursor: pointer;
}
.confi-pin:hover,
.confi-pin[aria-expanded="true"] { background: var(--marca-teal-escuro); color: #fff; }
.confi-pin img { height: 13px; }

/* --- Celular: painel na largura da tela, com 16 px de margem, e a bolha mais no canto --- */
@media (max-width: 575.98px) {
    .confi-bolha { right: 16px; bottom: 16px; }
    .confi-nudge { right: 16px; bottom: 88px; }
    .confi-painel {
        right: 16px;
        left: 16px;
        bottom: 88px;
        width: auto;
        max-width: none;
        /* Também aqui o topo fica abaixo da barra do topo: 88 px de baixo + 72. */
        max-height: calc(100vh - 160px);
        max-height: calc(100dvh - 160px);
    }
}

/* --- Quem pediu menos movimento: sem pulso e sem a entrada animada; os pontos de "escrevendo"
   ficam parados (o texto escondido já avisa o leitor de tela). --- */
@media (prefers-reduced-motion: reduce) {
    .confi-bolha--chamando::before,
    .confi-nudge,
    .confi-painel,
    .confi-digitando span[aria-hidden] { animation: none; }
    .confi-digitando span[aria-hidden] { opacity: .6; }
}

/* --- Alto contraste (mesma regra dos .card do sistema) --- */
body.high-contrast-mode .confi-painel,
body.high-contrast-mode .confi-nudge,
body.high-contrast-mode .confi-balao--assistente,
body.high-contrast-mode .confi-digitando,
body.high-contrast-mode .confi-rodape,
body.high-contrast-mode .confi-mensagens,
body.high-contrast-mode .confi-contexto,
body.high-contrast-mode .confi-entrada,
body.high-contrast-mode .confi-chip,
body.high-contrast-mode .confi-navegacao,
body.high-contrast-mode .confi-acao,
body.high-contrast-mode .confi-tabela,
body.high-contrast-mode .confi-acao-cancelar {
    background: #000 !important;
    border: 2px solid #FFFF00 !important;
    color: #FFFFFF !important;
}
body.high-contrast-mode .confi-header,
body.high-contrast-mode .confi-acao-header,
body.high-contrast-mode .confi-tabela th {
    background: #000 !important;
    border-bottom: 2px solid #FFFF00 !important;
    color: #FFFFFF !important;
}
body.high-contrast-mode .confi-avatar {
    background: #000;
    border: 1px solid #FFFFFF;
}
body.high-contrast-mode .confi-bolha,
body.high-contrast-mode .confi-pin,
body.high-contrast-mode .confi-balao--usuario,
body.high-contrast-mode .confi-enviar,
body.high-contrast-mode .confi-nudge-ver,
body.high-contrast-mode .confi-acao-confirmar,
body.high-contrast-mode .confi-navegacao-ir {
    background: #000 !important;
    border: 2px solid #FFFF00 !important;
    color: #FFFF00 !important;
}
body.high-contrast-mode .confi-pin:hover,
body.high-contrast-mode .confi-enviar:hover,
body.high-contrast-mode .confi-nudge-ver:hover,
body.high-contrast-mode .confi-acao-confirmar:hover,
body.high-contrast-mode .confi-navegacao-ir:hover {
    background: #FFFF00 !important;
    color: #000 !important;
}
body.high-contrast-mode .confi-nudge-rotulo,
body.high-contrast-mode #confi-contexto-label,
body.high-contrast-mode .confi-nudge-texto,
body.high-contrast-mode .confi-subtitulo,
body.high-contrast-mode .confi-disclaimer,
body.high-contrast-mode .confi-nota,
body.high-contrast-mode .confi-navegacao-texto,
body.high-contrast-mode .confi-acao-campo .rotulo,
body.high-contrast-mode .confi-nudge-fechar,
body.high-contrast-mode .confi-btn-icone,
body.high-contrast-mode .confi-entrada::placeholder {
    color: #FFFFFF !important;
}
body.high-contrast-mode .confi-btn-icone:hover,
body.high-contrast-mode .confi-btn-icone[aria-pressed="true"],
body.high-contrast-mode .confi-nudge-fechar:hover,
body.high-contrast-mode .confi-chip:hover {
    background: #000 !important;
    color: #FFFF00 !important;
}
body.high-contrast-mode .confi-contexto > i,
body.high-contrast-mode .confi-navegacao > i,
body.high-contrast-mode .confi-acao-header i { color: #FFFF00; }
body.high-contrast-mode .confi-digitando span[aria-hidden] { background: #FFFF00; }
/* Verde e vermelho do tema escuro do Bootstrap, que o alto contraste liga (data-bs-theme="dark"). */
body.high-contrast-mode .confi-acao-campo .positivo { color: var(--bs-success-text-emphasis) !important; }
body.high-contrast-mode .confi-tabela td { border-top-color: #FFFFFF; }
/* Erro no alto contraste: borda na cor de perigo do tema (depois da regra geral, que é amarela) */
body.high-contrast-mode .confi-balao--erro { border-color: var(--bs-danger-text-emphasis) !important; }

/* Botão flutuante desligado (menu do avatar): sem a bolha, o painel e a sugestão descem para
   o canto em vez de deixar o vão onde ela ficava. */
.confi-sem-bolha .confi-painel { bottom: 24px; }
.confi-sem-bolha .confi-nudge { bottom: 24px; }