/*
 * Painel do assistente. Folha estática, como a pim-compacto.css: o painel do
 * Filament não compila utilitários novos e isto não justifica um build.
 */
[x-cloak] { display: none !important; }

.fl-assistente-painel { position: fixed; inset-block: 0; inset-inline-end: 0; z-index: 40; display: flex; align-items: stretch; pointer-events: none; }
.fl-assistente-painel > * { pointer-events: auto; }

/*
 * O botão do assistente vive na barra de topo (esteve numa aba fixa na margem
 * direita e tapava a tabela — 2026-10-14).
 */
.fl-assistente-botao {
    display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .6rem;
    background: #f59e0b; border: 1px solid #d97706; color: #422006;
    font-size: 12px; font-weight: 600; white-space: nowrap;
}
.fl-assistente-botao:hover { background: #d97706; color: #fff; }
.fl-assistente-botao svg { width: 15px; height: 15px; flex: none; }

/* Os ícones acompanham a letra do botão em que estão. */
.fl-assistente button svg, .fl-assistente-gaveta__topo button svg { width: 13px; height: 13px; flex: none; }
.fl-assistente__abas-botao svg { width: 18px; height: 18px; }
.fl-assistente__so-icone svg { width: 14px; height: 14px; }

.fl-assistente-gaveta {
    width: 32rem; max-width: 100vw; display: flex; flex-direction: column; background: #fff;
    border-inline-start: 1px solid rgb(0 0 0 / .08); box-shadow: -8px 0 24px rgb(0 0 0 / .08);
}
.fl-assistente-gaveta__topo { display: flex; justify-content: flex-end; gap: .5rem; padding: .4rem .6rem; border-bottom: 1px solid rgb(0 0 0 / .06); }
.fl-assistente-gaveta__topo button { font-size: 11px; color: #71717a; display: inline-flex; align-items: center; gap: .25rem; }
.fl-assistente-gaveta__topo .fl-assistente-gaveta__fixo { color: #b45309; }
.fl-assistente-gaveta__topo button:hover { color: #b45309; }

/*
 * Fixado, a página encolhe em vez de ficar por baixo do painel.
 *
 * São DOIS contentores, não um: no Filament 5 a barra de topo (`fi-topbar-ctn`)
 * é irmã do `fi-layout`, ambas filhas do body — não está lá dentro. Empurrar só
 * o layout deixava o menu do utilizador debaixo do painel (2026-10-14).
 *
 * O combinador de irmão não serve aqui: o painel é injectado no fim do body,
 * depois dos dois, e `~` só olha para a frente. Daí o `:has()` no body.
 */
body:has(.fl-assistente-painel--fixo) .fi-layout,
body:has(.fl-assistente-painel--fixo) .fi-topbar-ctn {
    padding-inline-end: 32rem;
    transition: padding-inline-end .15s ease;
}

.fl-assistente { display: flex; flex-direction: column; height: 100%; min-height: 0; font-size: 12px; }
.fl-assistente__corpo { flex: 1; min-height: 0; display: flex; }
.fl-assistente__conteudo { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* A tira de abas, à direita, como num copiloto. */
.fl-assistente__abas { display: flex; flex-direction: column; border-inline-start: 1px solid rgb(0 0 0 / .06); }
.fl-assistente__abas-botao { padding: .7rem .55rem; color: #a1a1aa; border-inline-start: 2px solid transparent; }
.fl-assistente__abas-botao:hover { color: #71717a; background: #fafafa; }
.fl-assistente__abas-botao--ativo { color: #b45309; background: #fffbeb; border-inline-start-color: #f59e0b; }

.fl-assistente__lista { flex: 1; overflow-y: auto; padding: .4rem 0; }
.fl-assistente__seccao { padding: .5rem .75rem .2rem; color: #a1a1aa; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; }
.fl-assistente__linha { display: flex; align-items: center; gap: .4rem; padding: .35rem .75rem; border-bottom: 1px solid rgb(0 0 0 / .04); }
.fl-assistente__linha > :first-child { flex: 1; min-width: 0; text-align: start; }
.fl-assistente__linha span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fl-assistente__linha small { display: block; color: #a1a1aa; font-size: 10px; }
.fl-assistente__linha:hover { background: #fafafa; }
.fl-assistente__linha--atual { background: #fffbeb; }
.fl-assistente__linha--erro span { color: #b91c1c; }
.fl-assistente__msgerro { color: #b91c1c !important; }
.fl-assistente__perigo { color: #b91c1c; }
.fl-assistente__cabecalho { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; padding: .5rem .75rem; border-bottom: 1px solid rgb(0 0 0 / .06); }
.fl-assistente__contexto { color: #a1a1aa; font-size: 11px; margin-inline-start: .4rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fl-assistente__cabecalho > :first-child { min-width: 0; }
.fl-assistente__acoes { display: flex; gap: .5rem; }
.fl-assistente__acoes button { font-size: 11px; color: #71717a; display: inline-flex; align-items: center; gap: .2rem; }
.fl-assistente__acoes button:hover { color: #b45309; }

.fl-assistente__mensagens { flex: 1; overflow-y: auto; padding: .75rem; display: flex; flex-direction: column; gap: .6rem; }
.fl-assistente__msg { padding: .5rem .65rem; border: 1px solid rgb(0 0 0 / .06); line-height: 1.45; }
.fl-assistente__msg--user { background: #fef3c7; align-self: flex-end; max-width: 85%; }
.fl-assistente__msg--assistant { background: #fafafa; }
.fl-assistente__msg table { width: 100%; border-collapse: collapse; margin: .4rem 0; font-size: 11px; }
.fl-assistente__msg th, .fl-assistente__msg td { border: 1px solid rgb(0 0 0 / .08); padding: .2rem .35rem; text-align: start; }
.fl-assistente__msg p + p { margin-top: .4rem; }
.fl-assistente__msg ul, .fl-assistente__msg ol { margin: .3rem 0 .3rem 1.1rem; list-style: revert; }

.fl-assistente__vazio { color: #71717a; display: flex; flex-direction: column; gap: .3rem; align-items: flex-start; }
.fl-assistente__vazio button { text-align: start; color: #b45309; }
.fl-assistente__vazio button:hover { text-decoration: underline; }

.fl-assistente__proposta { border: 1px solid #f59e0b; padding: .6rem; background: #fffbeb; }
.fl-assistente__antes { text-decoration: line-through; color: #a1a1aa; margin: .35rem 0; }
.fl-assistente__depois { color: #166534; margin-bottom: .35rem; }
.fl-assistente__motivo { color: #71717a; font-style: italic; }
.fl-assistente__proposta .fl-assistente__acoes button { font-weight: 600; color: #b45309; }

.fl-assistente__pensar { color: #a1a1aa; font-style: italic; }
.fl-assistente__erro { padding: .5rem .75rem; background: #fef2f2; color: #991b1b; border-top: 1px solid #fecaca; }

.fl-assistente__barra { display: flex; gap: .5rem; padding: .6rem; border-top: 1px solid rgb(0 0 0 / .06); }
.fl-assistente__barra textarea { flex: 1; border: 1px solid rgb(0 0 0 / .12); padding: .35rem .5rem; font-size: 12px; resize: none; }
.fl-assistente__barra button { padding: 0 .8rem; background: #f59e0b; color: #fff; font-weight: 600; font-size: 12px; }
.fl-assistente__barra button:disabled { background: #d4d4d8; }


/*
 * As lojas no topo, imediatamente antes do menu do utilizador (que é sempre o
 * último). O traço separa-as do avatar, senão lê-se tudo como um bloco só.
 */
.fi-topbar .fl-lojas { display: inline-flex; align-items: center; gap: .75rem; padding-inline-end: .75rem; margin-inline-end: .25rem; border-inline-end: 1px solid rgb(0 0 0 / .1); }

/* O quadro de autorizações (Configurações → Assistente — autorizações). */
.fl-autorizacoes__nota { color: #71717a; font-size: 12px; margin-block-end: .75rem; max-width: 70ch; }
.fl-autorizacoes__tabela { border-collapse: collapse; font-size: 12px; background: #fff; }
.fl-autorizacoes__tabela th, .fl-autorizacoes__tabela td { border: 1px solid rgb(0 0 0 / .08); padding: .3rem .5rem; text-align: center; }
.fl-autorizacoes__tabela thead th { background: #fafafa; font-weight: 600; }
.fl-autorizacoes__tabela tbody th { text-align: start; font-weight: 500; white-space: nowrap; }
.fl-autorizacoes__tabela input { accent-color: #f59e0b; }
/* Os preços são à parte: não são um grupo do menu, são colunas dentro dos outros. */
.fl-autorizacoes__precos { background: #fffbeb; }
.fl-autorizacoes__precos th { font-style: italic; }