/* Balão de dúvidas + botão "Dúvidas" (Área do Conhecimento).
   Marcação em conhecimento/templates/conhecimento/_ajuda_widget.html;
   comportamento em js/ajuda_conhecimento.js. Usa os tokens do design-system,
   então acompanha o tema claro/escuro sozinho. */

.ajuda-kb {
    position: fixed; right: 1rem; bottom: 1rem;
    /* Abaixo do backdrop dos modais do Bootstrap (1050) e acima do conteúdo. */
    z-index: 1035;
    display: flex; flex-direction: column; align-items: flex-end; gap: 0.6rem;
    font-size: 0.9rem;
}

/* --- botões ---------------------------------------------------------------- */
.ajuda-kb-botoes { display: flex; align-items: center; gap: 0.5rem; }

.ajuda-kb-duvidas {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.5rem 0.85rem;
    border-radius: var(--ds-radius-pill, 980px);
    background-color: var(--ds-surface); color: var(--ds-text);
    border: 1px solid var(--ds-border);
    box-shadow: var(--ds-shadow);
    text-decoration: none; font-weight: 560; white-space: nowrap;
    transition: color 0.18s ease, border-color 0.18s ease;
}
.ajuda-kb-duvidas:hover { color: var(--ds-accent); border-color: var(--ds-accent); }

.ajuda-kb-balao {
    width: 3rem; height: 3rem; border-radius: 50%; border: 0;
    background-color: var(--ds-accent); color: var(--ds-accent-contrast, #fff);
    box-shadow: var(--ds-shadow-lg);
    font-size: 1.15rem;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background-color 0.18s ease, transform 0.18s ease;
}
.ajuda-kb-balao:hover { background-color: var(--ds-accent-hover, var(--ds-accent)); transform: translateY(-1px); }
.ajuda-kb.aberto .ajuda-kb-balao { transform: none; }

/* --- painel ---------------------------------------------------------------- */
.ajuda-kb-painel {
    width: min(380px, calc(100vw - 2rem));
    max-height: min(70vh, 560px);
    display: flex; flex-direction: column;
    background-color: var(--ds-surface); color: var(--ds-text);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-lg, 18px);
    box-shadow: var(--ds-shadow-lg);
    overflow: hidden;
}
.ajuda-kb-painel[hidden] { display: none; }

.ajuda-kb-cabecalho {
    display: flex; align-items: flex-start; gap: 0.6rem;
    padding: 0.8rem 0.9rem;
    border-bottom: 1px solid var(--ds-border);
}
.ajuda-kb-cabecalho > i { margin-top: 0.15rem; color: var(--ds-accent); }
.ajuda-kb-cabecalho h2 { font-size: 1rem; margin: 0; font-weight: 600; }
.ajuda-kb-cabecalho p { margin: 0.1rem 0 0; font-size: 0.8rem; color: var(--ds-text-secondary, inherit); }
.ajuda-kb-fechar {
    margin-left: auto; border: 0; background: transparent; color: inherit;
    font-size: 1rem; line-height: 1; padding: 0.2rem 0.4rem; cursor: pointer;
    border-radius: 8px;
}
.ajuda-kb-fechar:hover { background-color: var(--ds-bg); }

.ajuda-kb-artigos { display: flex; flex-wrap: wrap; gap: 0.35rem; padding: 0.6rem 0.9rem 0; }
.ajuda-kb-artigos a {
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: 0.78rem; padding: 0.2rem 0.55rem;
    border-radius: var(--ds-radius-pill, 980px);
    border: 1px solid var(--ds-border); background-color: var(--ds-bg);
    color: var(--ds-accent); text-decoration: none;
}
.ajuda-kb-artigos a:hover { border-color: var(--ds-accent); }

.ajuda-kb-mensagens {
    flex: 1 1 auto; overflow-y: auto; min-height: 160px;
    padding: 0.75rem 0.9rem;
    display: flex; flex-direction: column; gap: 0.55rem;
}
.ajuda-kb-msg { max-width: 92%; padding: 0.55rem 0.75rem; border-radius: 14px; line-height: 1.4; }
.ajuda-kb-msg.user {
    align-self: flex-end;
    background-color: var(--ds-accent); color: var(--ds-accent-contrast, #fff);
    border-bottom-right-radius: 4px;
    white-space: pre-wrap; overflow-wrap: anywhere;
}
.ajuda-kb-msg.assistant {
    align-self: flex-start;
    background-color: var(--ds-bg); border: 1px solid var(--ds-border);
    border-bottom-left-radius: 4px;
}
.ajuda-kb-msg.erro {
    align-self: flex-start;
    background-color: rgba(255, 59, 48, 0.12); border: 1px solid rgba(255, 59, 48, 0.35);
}
.ajuda-kb-msg.pensando { opacity: 0.7; font-style: italic; }
.ajuda-kb-msg p { margin: 0 0 0.4rem; }
.ajuda-kb-msg p:last-child { margin-bottom: 0; }
.ajuda-kb-msg ul { margin: 0.2rem 0 0.3rem 1.1rem; padding: 0; }
.ajuda-kb-msg code { font-size: 0.85em; }
.ajuda-kb-fontes {
    margin-top: 0.45rem; padding-top: 0.4rem;
    border-top: 1px dashed var(--ds-border);
    font-size: 0.78rem;
}
.ajuda-kb-fontes a { color: var(--ds-accent); }

.ajuda-kb-form { display: flex; gap: 0.5rem; padding: 0.6rem 0.9rem; border-top: 1px solid var(--ds-border); }
.ajuda-kb-campo {
    flex: 1 1 auto; resize: none;
    border: 1px solid var(--ds-border); border-radius: 12px;
    padding: 0.45rem 0.6rem;
    background-color: var(--ds-bg); color: inherit; font: inherit; line-height: 1.35;
}
.ajuda-kb-campo:focus { outline: 2px solid var(--ds-accent); outline-offset: 1px; }
.ajuda-kb-enviar {
    border: 0; border-radius: 12px; padding: 0 0.85rem; cursor: pointer;
    background-color: var(--ds-accent); color: var(--ds-accent-contrast, #fff);
}
.ajuda-kb-enviar:disabled { opacity: 0.6; cursor: default; }
.ajuda-kb-rodape { margin: 0; padding: 0.35rem 0.9rem 0.6rem; font-size: 0.72rem; color: var(--ds-text-secondary, inherit); }

@media (max-width: 575.98px) {
    .ajuda-kb { right: 0.75rem; bottom: 0.75rem; }
    /* No celular o botão vira só o ícone, para não cobrir as ações da tela. */
    .ajuda-kb-duvidas { padding: 0.55rem 0.7rem; }
    .ajuda-kb-duvidas span { display: none; }
    .ajuda-kb-painel { width: calc(100vw - 1.5rem); max-height: 75vh; }
}

@media print { .ajuda-kb { display: none; } }