/* ==========================================================================
   OTI · Plataforma — estilos globais do host SA.
   INV-074 / Onda B (P-305): o chassi. As classes do drawer/navegação são o PADRÃO do host de tenant
   COPIADO (D456) — não uma RCL compartilhada, que acoplaria os dois hosts (D404/D211) só para servir um
   menu estático de 13 destinos. Todas as cores saem de var(--mud-palette-*), então a paleta VIOLETA do
   MudTheme do PlatformLayout se propaga aqui sozinha (é o que distingue o console de plataforma do de
   tenant já na tela de login).
   ========================================================================== */

html, body {
    margin: 0;
    padding: 0;
    font-family: 'Roboto', Arial, sans-serif;
    font-size: 14px;
    background-color: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    scroll-behavior: smooth;
}

/* ── AppBar ─────────────────────────────────────────────────────────────── */
.app-bar-gradient {
    background-image: linear-gradient(90deg,
        var(--mud-palette-appbar-background) 0%,
        color-mix(in srgb, var(--mud-palette-appbar-background) 82%, var(--mud-palette-primary)) 100%);
    border-bottom: 1px solid var(--mud-palette-divider);
    backdrop-filter: saturate(140%);
}

.app-bar-title {
    font-weight: 600;
    letter-spacing: 0.2px;
}

.user-avatar {
    font-size: 0.8rem;
    font-weight: 600;
    background-color: color-mix(in srgb, var(--mud-palette-primary) 30%, transparent) !important;
    color: var(--mud-palette-appbar-text) !important;
}

/* ── Drawer / navegação ─────────────────────────────────────────────────── */
.app-drawer {
    border-right: 1px solid var(--mud-palette-divider);
}

/* A coluna do drawer precisa de altura definida ponta a ponta para a navegação rolar POR DENTRO em vez
   de exceder a viewport (mesma correção do host de tenant). */
.app-drawer .mud-drawer-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.drawer-conteudo {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.drawer-conteudo__nav {
    flex: 1 1 auto;
    overflow-y: auto;
    /* overflow-x:hidden é do SMOKE, não do desenho (P-305): com os rótulos do host SA — "Aprovação de
       conhecimento" é o pior caso — o conteúdo excedia os 248px e o drawer ganhava uma barra de rolagem
       HORIZONTAL. O rótulo já quebra em duas linhas; o que sobrava era só a barra. */
    overflow-x: hidden;
    min-height: 0;
}

/* Rótulo longo quebra em vez de empurrar a largura do drawer. */
.app-nav .mud-nav-link-text {
    white-space: normal;
    overflow-wrap: anywhere;
}

.app-nav {
    padding-top: 8px;
    font-size: 0.875rem;
}

.app-nav .mud-nav-link {
    font-size: 0.875rem;
    border-radius: 8px;
    margin: 2px 8px;
    padding-top: 8px;
    padding-bottom: 8px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.app-nav .mud-nav-link:hover {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
}

/* Item ativo: realce com barra lateral e fundo translúcido. */
.app-nav .mud-nav-link.active {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 16%, transparent);
    color: var(--mud-palette-primary);
    font-weight: 600;
    box-shadow: inset 3px 0 0 0 var(--mud-palette-primary);
}

.app-nav .mud-nav-link.active .mud-icon-root {
    color: var(--mud-palette-primary);
}

.app-nav .mud-nav-group .mud-nav-link {
    margin-left: 8px;
}

/* Cabeçalho do grupo: caixa-alta discreta — distingue a banda dos destinos. */
.app-nav-faixa > .mud-nav-link .mud-nav-link-text,
.app-nav-faixa > .mud-nav-link-button .mud-nav-link-text {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--mud-palette-text-secondary);
}


/* ── Balão do assistente de operação (Eixo I / Fatia 2, P-221) ──
   GLOBAL (não scoped): o painel usa MudPaper/MudText (componentes-filho) e o CSS com escopo
   (.razor.css) NÃO carimba o atributo de escopo em componentes-filho ⇒ as regras não pegariam.
   Cores via var(--mud-palette-*) ⇒ acompanha o tema. position:fixed ⇒ fora do fluxo do layout. */
.assistente-wrap {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 1300;
}
.assistente-launcher {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mud-palette-primary-text);
    background: var(--mud-palette-primary);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.assistente-launcher:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.34);
}
.assistente-launcher:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}
.assistente-painel {
    width: min(380px, calc(100vw - 32px));
    height: min(560px, calc(100vh - 120px));
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    overflow: hidden;
    background: var(--mud-palette-surface);
}
.assistente-cabecalho {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    color: var(--mud-palette-primary-text);
    background: var(--mud-palette-primary);
}
.assistente-corpo {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.assistente-vazio {
    color: var(--mud-palette-text-secondary);
    padding: 8px 4px;
}
.assistente-pergunta {
    align-self: flex-end;
    max-width: 85%;
    padding: 8px 10px;
    border-radius: 10px 10px 2px 10px;
    background: color-mix(in srgb, var(--mud-palette-primary) 16%, transparent);
}
.assistente-resposta {
    align-self: flex-start;
    max-width: 90%;
    padding: 8px 10px;
    border-radius: 10px 10px 10px 2px;
    background: var(--mud-palette-background-gray);
    border: 1px solid var(--mud-palette-divider);
}
.assistente-resposta--recusa {
    border-left: 3px solid var(--mud-palette-warning);
}
/* Markdown renderizado da resposta (P-230/D181): tema-aware via var(--mud-palette-*) — legível em claro e
   escuro. Só o subconjunto que o renderizador emite: parágrafo, negrito/itálico, listas, código e link. */
.assistente-resposta-md > :first-child { margin-top: 0; }
.assistente-resposta-md > :last-child { margin-bottom: 0; }
.assistente-resposta-md p { margin: 0 0 6px; }
.assistente-resposta-md ul,
.assistente-resposta-md ol { margin: 4px 0 6px; padding-left: 20px; }
.assistente-resposta-md li { margin: 2px 0; }
.assistente-resposta-md strong { font-weight: 600; }
.assistente-resposta-md a { color: var(--mud-palette-primary); text-decoration: underline; }
.assistente-resposta-md code {
    font-family: "Cascadia Code", Consolas, "Courier New", monospace;
    font-size: 0.85em;
    padding: 1px 4px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--mud-palette-text-primary) 10%, transparent);
    /* P-306, causa MEDIDA no smoke (não suposta): o código INLINE é a origem real da barra de rolagem
       horizontal do balão. Identificadores como `!CalibracaoFidelidadeAncora.EhFiel(DistanciaCosseno(...))`
       não têm ponto de quebra natural e estouram um corpo de 369px. Medido na página: scrollWidth 763 →
       369 (= clientWidth) com esta regra + a do divisor abaixo, e zero elementos excedendo. Vale no balão
       e na tela ampla — a classe é a mesma. */
    overflow-wrap: anywhere;
    word-break: break-word;
}
.assistente-resposta-md pre {
    margin: 6px 0;
    padding: 8px 10px;
    border-radius: 8px;
    overflow-x: auto;
    background: color-mix(in srgb, var(--mud-palette-text-primary) 8%, transparent);
    border: 1px solid var(--mud-palette-divider);
}
.assistente-resposta-md pre code { padding: 0; background: none; border-radius: 0; }
/* Estado de falha do eco otimista (P-223): a bolha da pergunta permanece com indicação clara. */
.assistente-resposta--falha {
    border-left: 3px solid var(--mud-palette-error);
    background: color-mix(in srgb, var(--mud-palette-error) 8%, var(--mud-palette-background-gray));
}
/* Sinalização de histórico (D150): divisor rotulado acima da conversa anterior do usuário. */
.assistente-divisor-historico {
    display: flex;
    align-items: center;
    margin: 4px 0 2px;
}
/* P-306: o `mud-divider-fullwidth` chega com largura 100%, então cada uma das duas réguas pedia a
   largura inteira do corpo e a linha estourava. `flex-basis: 0` + `min-width: 0` devolvem a elas o
   direito de dividir o espaço que sobra do rótulo. Segunda metade da cura da barra horizontal. */
.assistente-divisor-historico .mud-divider {
    min-width: 0;
    flex-basis: 0;
}
/* Indicador de nova mensagem (P-227/D174): flutua no rodapé do corpo enquanto o usuário lê o
   histórico; leva ao fim ao clicar. Discreto, tema-aware via paleta MudBlazor. */
.assistente-nova-msg {
    position: sticky;
    bottom: 6px;
    align-self: center;
    margin-top: 4px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px 4px 8px;
    border: 1px solid var(--mud-palette-divider);
    border-radius: 16px;
    cursor: pointer;
    font-size: 0.8125rem;
    color: var(--mud-palette-primary-text);
    background: var(--mud-palette-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.assistente-nova-msg:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.34);
}
.assistente-nova-msg:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}
.assistente-citacoes {
    margin-top: 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    /* Item de flex não encolhe abaixo do seu min-content por padrão: um caminho longo empurraria a linha
       para fora do painel. min-width:0 devolve o direito de encolher, e a pílula quebra o texto dentro. */
    min-width: 0;
}
.assistente-citacoes > * {
    min-width: 0;
}
.assistente-citacao {
    cursor: pointer;
}
/* P-306 — as CITAÇÕES saíam ilegíveis, por duas causas somadas:
   (1) os spans eram inline no flex-wrap SEM separador visual, então "Fontes:" e os caminhos liam-se como
       um único bloco corrido ("Fontes:docs/design/…docs/design/…");
   (2) a classe .assistente-citacao-texto era REFERENCIADA no markup e NÃO EXISTIA aqui — classe órfã, um
       bug real e invisível (nada quebra, só não estiliza).
   A cura resolve as duas: cada fonte vira uma pílula delimitada, e o rótulo ganha respiro próprio. */
.assistente-citacoes__rotulo {
    margin-right: 2px;
    flex: 0 0 auto;
}
.assistente-citacao-texto {
    display: inline-block;
    /* box-sizing EXPLÍCITO: sem ele o padding e a borda SOMAM aos 100% e a pílula estoura o container —
       barra de rolagem HORIZONTAL no corpo do balão. Achado no smoke ao vivo desta sprint, e é a MESMA
       classe do defeito que o smoke da P-305 achou no drawer: max-width com caixa de conteúdo. */
    box-sizing: border-box;
    max-width: 100%;
    padding: 2px 8px;
    border: 1px solid var(--mud-palette-divider);
    border-radius: 12px;
    background: color-mix(in srgb, var(--mud-palette-text-primary) 6%, transparent);
    color: var(--mud-palette-text-secondary);
    /* caminhos longos quebram DENTRO da pílula: sem isto a linha estouraria a largura do painel */
    overflow-wrap: anywhere;
}

/* ── Tela ampla do assistente (INV-074 / Onda C — P-306) ──
   Coluna de altura fixa: cabeçalho + corpo rolável + composer. Só o CORPO rola — o composer fica sempre
   ao alcance, e a paginação reversa precisa de um container de scroll próprio para ancorar. */
.assistente-tela {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 112px);
    border-radius: 12px;
    overflow: hidden;
}
.assistente-tela__cabecalho {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--mud-palette-divider);
}
.assistente-tela__corpo {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.assistente-tela__carregar,
.assistente-tela__inicio {
    align-self: center;
    color: var(--mud-palette-text-secondary);
}
/* As três vistas do triângulo precisam de LARGURA para respirar — é a razão de existir desta tela.
   Por isso a bolha de resposta é bem mais larga aqui que no balão (90% de 380px). */
.assistente-tela__corpo .assistente-resposta {
    max-width: min(880px, 100%);
    width: 100%;
}
.assistente-tela__corpo .assistente-pergunta {
    max-width: min(640px, 90%);
}
.assistente-tela__rodape {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px 2px;
    border-top: 1px solid var(--mud-palette-divider);
}
.assistente-rodape {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px 2px;
    border-top: 1px solid var(--mud-palette-divider);
}
.assistente-aviso {
    padding: 2px 12px 10px;
    color: var(--mud-palette-text-secondary);
}