/**
 * Branef IA - estilos da tela de configuracao e da aba do chamado.
 *
 * As cores saem das variaveis do Tabler que o GLPI 10 ja expoe, para que o
 * tema escuro continue legivel; os tons proprios so aparecem nos dois botoes
 * de destaque.
 */

/* ------------------------------------------------------ tela de configuracao */

.branefia-config-inner {
    max-width: 62rem;
}

.branefia-config .branefia-section {
    margin: 1.75rem 0 1rem;
    font-size: 1rem;
    font-weight: 600;
}

.branefia-config .branefia-section:first-child {
    margin-top: 0.5rem;
}

.branefia-config .col-form-label {
    color: var(--tblr-secondary, #6c7a91);
}

/* Botao "i" e olho: discretos, do tamanho do campo. */
.branefia-config .branefia-info,
.branefia-config .branefia-eye {
    flex: 0 0 auto;
    padding-left: 0.65rem;
    padding-right: 0.65rem;
}

.branefia-info-inline {
    color: var(--tblr-secondary, #6c7a91);
    cursor: help;
}

/* Bloco recolhivel das diretrizes. */
.branefia-collapsed {
    display: none;
}

/* Botao largo das secoes (Consumo / Preferencias), como na referencia. */
.btn.branefia-wide {
    background-color: #5f6f94;
    border-color: #5f6f94;
    color: #fff;
}

.btn.branefia-wide:hover,
.btn.branefia-wide:focus {
    background-color: #4e5c7d;
    border-color: #4e5c7d;
    color: #fff;
}

/* Botao de salvar, em destaque no rodape. */
.btn.branefia-save {
    background-color: #f0b429;
    border-color: #e0a41f;
    color: #1f2937;
    font-weight: 600;
}

.btn.branefia-save:hover,
.btn.branefia-save:focus {
    background-color: #e0a41f;
    border-color: #c98f14;
    color: #1f2937;
}

.branefia-config textarea[name="base_prompt"] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.85rem;
    line-height: 1.5;
}

/* ----------------------------------------------------------- aba do chamado */

.branefia-panel {
    padding: 0.5rem 0;
}

.branefia-answer {
    line-height: 1.6;
}

.branefia-answer > *:first-child {
    margin-top: 0;
}

.branefia-answer > *:last-child {
    margin-bottom: 0;
}

.branefia-answer h4,
.branefia-answer h5,
.branefia-answer h6 {
    margin-top: 1.1rem;
    margin-bottom: 0.4rem;
    font-size: 1rem;
    font-weight: 600;
}

.branefia-answer ol,
.branefia-answer ul {
    padding-left: 1.4rem;
    margin-bottom: 0.75rem;
}

.branefia-answer li {
    margin-bottom: 0.35rem;
}

.branefia-answer code {
    padding: 0.1rem 0.3rem;
    border-radius: 3px;
    background: var(--tblr-bg-surface-secondary, rgba(127, 127, 127, 0.15));
}

.branefia-answer pre {
    padding: 0.75rem;
    border-radius: 4px;
    overflow-x: auto;
    background: var(--tblr-bg-surface-secondary, rgba(127, 127, 127, 0.15));
}

.branefia-answer blockquote {
    margin: 0.5rem 0;
    padding-left: 0.9rem;
    border-left: 3px solid var(--tblr-border-color, #dbe0e6);
    color: var(--tblr-secondary, #6c7a91);
}

.branefia-sources {
    padding-left: 1.2rem;
    margin-bottom: 0;
    font-size: 0.875rem;
}

.branefia-sources li {
    margin-bottom: 0.15rem;
}

.branefia-trace {
    max-height: 24rem;
    overflow: auto;
    padding: 0.75rem;
    border-radius: 4px;
    font-size: 0.78rem;
    background: var(--tblr-bg-surface-secondary, rgba(127, 127, 127, 0.15));
}

.branefia-feedback.active {
    background-color: var(--tblr-primary, #206bc4);
    border-color: var(--tblr-primary, #206bc4);
    color: #fff;
}

/*
 * Botao "Responder com IA" na barra de acoes do chamado.
 *
 * O GLPI estiliza ul.legacy-timeline-actions para os botoes antigos de plugin:
 * sobe a lista 3px, poe padding no <li> e afasta o icone do texto em 1em. Sem
 * desfazer isso o nosso botao fica maior e desalinhado em relacao ao
 * "Responder", que e um <button> comum fora da lista.
 */
ul.legacy-timeline-actions li.branefia-timeline-action {
    top: 3px;                 /* cancela o top: -3px da lista */
    position: relative;
    margin-left: 8px;
    padding: 0;
}

ul.legacy-timeline-actions li.branefia-timeline-action i {
    padding-right: 0;         /* o espacamento ja vem do me-1 do botao */
}

/*
 * Cor do botao "Responder com IA": azul nativo do tema (--tblr-blue, #206bc4).
 *
 * Duas armadilhas ja encontradas aqui:
 *
 * 1. Nao usar btn-primary. A paleta padrao do GLPI (auror) tem primario ambar
 *    (#fec95c), entao o botao sairia igual ao "Responder" ao lado.
 * 2. Nao usar as variaveis --tblr-btn-*. A versao do Tabler que o GLPI 10.0.18
 *    empacota e anterior a elas: a classe .btn-blue so pinta o texto de branco
 *    e o fundo no :hover. Com variaveis, o botao ficava branco em repouso e so
 *    aparecia sob o mouse. Por isso as propriedades vao declaradas direto.
 *
 * A especificidade .btn.branefia-answer-ai (0,2,0) vence a de .btn-blue (0,1,0)
 * independentemente da ordem em que as folhas sao carregadas.
 */
.btn.branefia-answer-ai {
    background-color: var(--tblr-blue, #206bc4);
    border-color: var(--tblr-blue, #206bc4);
    color: #fff;
}

.btn.branefia-answer-ai:hover,
.btn.branefia-answer-ai:focus {
    background-color: #1a569d;
    border-color: #1a569d;
    color: #fff;
}

.btn.branefia-answer-ai:active,
.btn.branefia-answer-ai.disabled,
.btn.branefia-answer-ai:disabled {
    background-color: #17508f;
    border-color: #17508f;
    color: #fff;
}