* { box-sizing: border-box; }
        body { font-family: system-ui, sans-serif; margin: 0; color: #222; background: #f7f7f5; }
        header {
            display: flex; align-items: center; justify-content: space-between;
            background: #1e2530; color: #fff; padding: .75rem 1.5rem; flex-wrap: wrap; gap: .4rem;
        }
        header .marca { font-weight: 700; }
        header .marca a { color: #fff; text-decoration: none; }
        header nav { display: flex; flex-wrap: wrap; align-items: center; }
        header nav a { color: #cfd6e3; text-decoration: none; margin-left: 1rem; font-size: .9rem; }
        header nav a:hover, header nav a.active { color: #fff; }
        .btn-engrenagem { background: none; border: none; color: #cfd6e3; font-size: .9rem; font-family: inherit; cursor: pointer; margin-left: 1rem; text-decoration: none; }
        .btn-engrenagem:hover { color: #fff; }
        .seletor-idioma { margin-left: 1rem; padding-left: 1rem; border-left: 1px solid #3a4252; }
        .seletor-idioma a { color: #8b93a3; text-decoration: none; font-size: .78rem; margin-left: .5rem; }
        .seletor-idioma a:first-child { margin-left: 0; }
        .seletor-idioma a:hover, .seletor-idioma a.active { color: #fff; font-weight: 600; }
        main { max-width: 960px; margin: 0 auto; padding: 2rem 1.5rem; }
        /* Páginas de /admin (usuário pediu, 2026-07-31: "não uma página centralizada...
           fluida" — a tela de Tokens, com tabelas largas, sobrava muito espaço vazio à direita
           num monitor grande com o teto de 960px). Sem largura máxima: usa a tela toda, só com
           uma margem mínima nas bordas. */
        main.main-largo { max-width: none; padding: 2rem 2.5rem; }
        h1 { margin-top: 0; }
        .breadcrumb { color: #888; font-size: .85rem; margin-bottom: 1rem; }
        .erro-form { color: #d33; font-size: .9rem; max-width: 420px; }
        .page-header { display: flex; align-items: baseline; justify-content: space-between; }
        table { border-collapse: collapse; width: 100%; margin-top: .5rem; font-size: .9rem; background: #fff; }
        td, th { padding: .5rem .7rem; text-align: left; border-bottom: 1px solid #eee; }
        th { color: #555; font-weight: 600; background: #fafaf8; }
        .vazio { color: #888; font-style: italic; }
        .acoes { display: flex; gap: .4rem; white-space: nowrap; }
        .btn {
            display: inline-block; padding: .4rem .8rem; border-radius: 6px; border: 1px solid #ccc;
            background: #fff; color: #222; text-decoration: none; font-size: .85rem; cursor: pointer;
        }
        .btn:hover { background: #eee; }
        .btn-primary { background: #2f6fed; border-color: #2f6fed; color: #fff; }
        .btn-primary:hover { background: #2559c4; }
        .btn-danger { background: #fff; border-color: #d33; color: #d33; }
        .btn-danger:hover { background: #fdecec; }
        .btn-sm { padding: .2rem .5rem; font-size: .8rem; }
        /* grid (não flex-wrap) pra travar em no máximo 3 cards por linha mesmo em telas largas
           (pedido explícito do usuário, 2026-08-02 — a lista de cards do /admin cresceu e ficava
           esparramada numa linha só em monitor largo) */
        .cards { display: grid; grid-template-columns: repeat(3, minmax(260px, 1fr)); gap: 1rem; margin-top: 1.5rem; }
        .card {
            background: #fff; border: 1px solid #e1e0d9; border-radius: 10px; padding: 1.25rem;
            text-decoration: none; color: #222;
        }
        .card:hover { border-color: #2f6fed; }
        .card .icone { font-size: 1.8rem; }
        .card .icone-linha { display: flex; align-items: center; gap: .5rem; }
        .tag-global {
            font-size: .68rem; font-weight: 600; color: #2f6fed; background: #eaf1ff;
            padding: .1rem .5rem; border-radius: 10px; text-transform: uppercase; letter-spacing: .03em;
        }
        .card h2 { font-size: 1.05rem; margin: .5rem 0 .25rem 0; }
        .card p { color: #777; font-size: .85rem; margin: 0; }
        form.form-cadastro { max-width: 480px; margin-top: 1rem; }
        form.form-cadastro .campo { margin-bottom: .9rem; display: flex; flex-direction: column; gap: .25rem; }
        form.form-cadastro label { font-size: .85rem; font-weight: 600; color: #444; }
        form.form-cadastro input, form.form-cadastro select {
            padding: .45rem .6rem; border: 1px solid #ccc; border-radius: 6px; font-size: .9rem;
        }
        form.form-cadastro .acoes-form { margin-top: 1rem; display: flex; gap: .6rem; }
        /* Layout 2 colunas (2026-08-03, pedido do usuário: form de agente "muito grande na
           vertical") — modificador opcional, `.form-cadastro` sozinho continua 1 coluna em todo o
           resto do app. `.campo-full`/`.acoes-form`/`h2` sempre ocupam as 2 colunas (título de
           seção e botões não fazem sentido partidos ao meio). */
        form.form-cadastro.form-2col {
            max-width: 760px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.5rem; align-items: start;
        }
        form.form-cadastro.form-2col .campo-full,
        form.form-cadastro.form-2col .acoes-form,
        form.form-cadastro.form-2col h2 { grid-column: 1 / -1; }
        .tag { display: inline-block; font-size: .75rem; padding: .1rem .4rem; border-radius: 4px; background: #eee; margin-left: .3rem; }
        /* Tela de detalhe do agente reformulada (2026-08-04, pedido do usuário: "adequar a tela do
           agente nesse estilo sem mexer na essência da página") — mesmo sistema visual (.card,
           .btn) já usado no resto do app, só com um cabeçalho maior/badges/cards de seção, sem
           introduzir barra lateral nem mudar nenhum campo/rota existente. */
        .agente-cabecalho {
            display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
            background: #fff; border: 1px solid #e1e0d9; border-radius: 12px; padding: 1.25rem 1.5rem;
            margin-bottom: 1.25rem; flex-wrap: wrap;
        }
        .agente-cabecalho-titulo { display: flex; align-items: center; gap: .9rem; }
        .agente-cabecalho-icone {
            width: 48px; height: 48px; border-radius: 10px; background: #eaf1ff;
            display: flex; align-items: center; justify-content: center; font-size: 1.6rem; flex-shrink: 0;
        }
        .agente-cabecalho h1 { margin: 0; font-size: 1.3rem; display: flex; align-items: center; gap: .6rem; }
        .agente-cabecalho-desc { color: #777; font-size: .85rem; margin: .2rem 0 0 0; }
        .agente-cabecalho-chips { display: flex; gap: .75rem; }
        .agente-info-chip {
            background: #f7f7f5; border: 1px solid #e1e0d9; border-radius: 8px; padding: .5rem .9rem;
            font-size: .8rem; min-width: 110px;
        }
        .agente-info-chip strong { display: block; font-size: .92rem; margin-top: .1rem; }
        .status-badge {
            display: inline-block; font-size: .72rem; font-weight: 600; padding: .15rem .6rem;
            border-radius: 20px; white-space: nowrap;
        }
        .status-badge-conectado { background: #e6f7ec; color: #1a8a44; }
        .status-badge-aguardando_instalacao { background: #fff6e6; color: #a15c00; }
        .status-badge-pausado { background: #fff6e6; color: #a15c00; }
        .status-badge-revogado { background: #fdecec; color: #d33; }
        .status-badge-offline { background: #fdecec; color: #d33; }
        .agentes-status-detalhe { color: #888; font-size: .78rem; margin-top: .15rem; max-width: 320px; }
        .cards-secoes { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; align-items: start; }
        @media (max-width: 800px) { .cards-secoes { grid-template-columns: 1fr; } }
        .card-secao {
            background: #fff; border: 1px solid #e1e0d9; border-radius: 12px; padding: 1.25rem 1.5rem;
        }
        .card-secao-titulo { display: flex; align-items: center; gap: .5rem; margin: 0 0 1rem 0; font-size: 1.02rem; }
        .card-secao .campo { margin-bottom: .9rem; display: flex; flex-direction: column; gap: .25rem; }
        .card-secao label { font-size: .85rem; font-weight: 600; color: #444; }
        .card-secao input, .card-secao select {
            padding: .45rem .6rem; border: 1px solid #ccc; border-radius: 6px; font-size: .9rem;
        }
        .card-secao-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.25rem; }
        .card-secao-2col .campo-full { grid-column: 1 / -1; }
        .aviso-pendente {
            background: #fff6e6; border: 1px solid #f0dcae; color: #a15c00; border-radius: 8px;
            padding: .6rem .8rem; font-size: .82rem; margin-bottom: 1rem;
        }
        .acoes-form-dock {
            display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1.25rem;
            background: #fff; border: 1px solid #e1e0d9; border-radius: 12px; padding: 1rem 1.25rem;
        }
        .chat-historico { display: flex; flex-direction: column; gap: .5rem; margin: 1rem 0; }
        .bolha { max-width: 80%; padding: .6rem .9rem; border-radius: 10px; font-size: .9rem; }
        /* Bolha do assistente usa mais largura, útil pra tabelas/gráficos de dado real. A quebra
           "estranha" que parecia reflow de largura era na verdade outro bug (ver `.bolha > strong`
           logo abaixo) — corrigido lá, não aqui; mantido 95% mesmo assim por ser uma melhora real
           à parte. BUG REAL corrigido (2026-08-01, usuário reportou print com bolhas de larguras
           bem diferentes entre respostas, "fica muito estranha a tela"): `max-width` sozinho só
           limita um TETO — sem `width` explícito, `align-self: flex-start` (a bolha é item de um
           flex column) faz o box encolher pro tamanho do CONTEÚDO (shrink-to-fit), então uma
           resposta curta virava uma caixa estreita e a próxima, mais longa, uma caixa larga.
           `width` fixo faz todas ocuparem sempre a mesma largura, textos curtos ou longos. */
        .bolha-assistente { width: 95%; max-width: 95%; }
        /* SÓ o rótulo "Você"/"Assistente" (`<strong>` DIRETO filho de `.bolha`, ver
           _chat_mensagem.html) — achado real (2026-07-27): `.bolha strong` (sem o `>`) pegava
           QUALQUER `<strong>` dentro da bolha, inclusive o **negrito** do markdown da resposta,
           que ficava maiúsculo/bloco próprio/desbotado sem motivo — parecia "quebra de linha
           estranha", mas na verdade era esta regra vazando pro conteúdo. */
        /* inline-block (não block): permite `.duracao-resposta` sentar do lado, na mesma linha —
           ver _chat_mensagem.html. Sozinho (sem irmão), visualmente idêntico a block. */
        .bolha > strong { display: inline-block; font-size: .7rem; text-transform: uppercase; opacity: .6; margin-bottom: .15rem; }
        .bolha p { margin: 0; white-space: pre-wrap; }
        .bolha-usuario { align-self: flex-end; background: #2f6fed; color: #fff; }
        .bolha-usuario strong { opacity: .8; }
        /* Chat assíncrono (Marco E, 2026-08-03) — bolha de "processando" enquanto uma pergunta
           espera o agente remoto do tenant; pulso sutil só pra indicar "ainda em andamento", sem
           chamar atenção demais numa espera que pode legitimamente durar minutos. */
        .bolha-processando { opacity: .75; animation: pulsar-processando 1.8s ease-in-out infinite; }
        @keyframes pulsar-processando { 0%, 100% { opacity: .6; } 50% { opacity: .95; } }
        /* BUG REAL (2026-07-31, usuário reportou print com "O INTELIA," em vez de "O IntelIA,"):
           `.bolha > strong` acima usa uppercase geral — inofensivo pro rótulo antigo ("Assistente"),
           mas agora o rótulo é a marca "IntelIA" (usuário pediu, 2026-07-31), cuja caixa mista É a
           identidade — uppercase destrói exatamente isso. Sobrescreve só pra bolha do assistente;
           "VOCÊ" (bolha do usuário) continua maiúsculo normalmente. */
        .bolha-assistente > strong { text-transform: none; }
        .bolha-assistente { align-self: flex-start; background: #fff; border: 1px solid #e1e0d9; }
        .bolha-assistente .markdown-body p { margin: 0 0 .5rem 0; white-space: normal; }
        .bolha-assistente .markdown-body > *:last-child { margin-bottom: 0; }
        .duracao-resposta { color: #999; font-size: .78rem; margin-left: .4rem; }
        /* Usuário pediu (2026-08-01): aviso discreto quando 3 avaliações negativas trocam o
           modelo ativo automaticamente (ver `avaliarMensagem` em chat.html). */
        .aviso-troca-modelo { font-size: .8rem; color: #a15c00; background: #fff6e6; border: 1px
            solid #f0dcae; border-radius: 6px; padding: .4rem .6rem; margin: .4rem 0 0 0; }
        /* Usuário pediu (2026-07-31): hover sobre "demorou Xs" mostrando o tempo de cada etapa
           (1ª chamada à IA / banco de dados / IA total / outros) — só quando a mensagem TEM esse
           detalhamento (mensagens antigas, de antes desta coluna existir, não têm; ver
           `_chat_mensagem.html`). `title` nativo já quebra linha em "\n" sem JS/CSS extra. */
        .duracao-resposta[title] { cursor: help; border-bottom: 1px dotted #bbb; }
        .markdown-body table { border-collapse: collapse; margin: .4rem 0; font-size: .85rem; }
        .markdown-body th, .markdown-body td { border: 1px solid #ddd; padding: .3rem .5rem; }
        /* Redesenho (2026-08-04, pedido do usuário: "não gostei das tabelas, ficaram feias e pouco
           fluidas... tabelas modernas") — trocou o grid de bordas em toda célula (visual de
           planilha antiga, texto alinhado à direita) por linhas horizontais só, cabeçalho sticky
           dentro do scroll do modal, hover de linha, e pílulas coloridas pra status (ver
           `.pill-*` abaixo, mesmo padrão de `.status-badge` já usado no resto do app). */
        .tabela-tokens { border-collapse: separate; border-spacing: 0; width: 100%; margin-top: .5rem; font-size: .87rem; }
        .tabela-tokens thead th {
            position: sticky; top: 0; z-index: 1;
            background: #fafaf8; color: #777; font-weight: 600; font-size: .74rem;
            text-transform: uppercase; letter-spacing: .04em; text-align: left;
            padding: .6rem .8rem; border-bottom: 2px solid #e1e0d9; white-space: nowrap;
        }
        .tabela-tokens td { padding: .6rem .8rem; text-align: left; border-bottom: 1px solid #f0efe9; vertical-align: middle; white-space: nowrap; }
        .tabela-tokens tbody tr:hover { background: #f7f7f5; }
        .tabela-tokens tbody tr:last-child td { border-bottom: none; }
        /* Só a coluna de checkbox do modal-lista (agentes.html) — NÃO `:first-child` genérico, senão
           centraliza a 1ª coluna de QUALQUER tabela `.tabela-tokens` (achado real, 2026-08-04:
           usuário reportou "MODELO"/"USUÁRIO" centralizados em vez de alinhados à esquerda). */
        .tabela-tokens th.col-selecao, .tabela-tokens td.col-selecao { width: 2.2rem; text-align: center; padding-right: 0; }
        .tabela-tokens code { background: #f0efe9; padding: .1rem .4rem; border-radius: 4px; font-size: .85em; }
        .pill { display: inline-block; font-size: .72rem; font-weight: 600; padding: .18rem .6rem; border-radius: 20px; white-space: nowrap; }
        .pill-pendente { background: #f0efe9; color: #666; }
        .pill-em_andamento { background: #eaf1ff; color: #2f6fed; }
        .pill-entregue { background: #e6f7ec; color: #1a8a44; }
        .pill-falha { background: #fdecec; color: #d33; }
        .pill-expirado { background: #fff6e6; color: #a15c00; }
        /* Árvore por pergunta de chat no "Log da fila" (2026-08-04, pedido do usuário: "agrupar...
           expandir em modelo de tree") — linha de cabeçalho clicável, +/- explícito (não só o
           triângulo nativo de <details>, que não funciona bem dentro de <table>). */
        .linha-grupo-fila { cursor: pointer; background: #fafaf8; font-weight: 600; }
        .linha-grupo-fila:hover { background: #f0efe9; }
        .grupo-fila-alternador {
            display: inline-block; width: 1.2rem; text-align: center; font-family: monospace;
            font-weight: 700; color: #2f6fed;
        }
        .linha-grupo-fila-filha td:nth-child(2) { padding-left: 2rem; }
        .linha-clicavel:hover { background: #f5f4ee; }
        .markdown-body code { background: #f0f0ee; padding: .05rem .3rem; border-radius: 4px; font-size: .85em; }
        .markdown-body pre { background: #f0f0ee; padding: .6rem; border-radius: 6px; overflow-x: auto; }
        .markdown-body pre code { background: none; padding: 0; }
        .markdown-body ul, .markdown-body ol { margin: .3rem 0; padding-left: 1.3rem; }
        /* Rodapé de ações (exportar/compartilhar) de cada resposta — pedido do usuário
           (2026-07-30). Fica discreto (ícone pequeno, opacidade baixa) até o hover pra não brigar
           visualmente com o conteúdo da resposta. */
        .bolha-acoes { display: flex; gap: .3rem; margin-top: .5rem; padding-top: .4rem; border-top: 1px solid #eee; }
        .bolha-acoes-grupo { display: flex; gap: .15rem; }
        .bolha-acoes-separador { width: 1px; background: #e1e0d9; margin: .1rem .3rem; }
        .btn-acao-mensagem {
            border: 1px solid #ddd; background: #fafaf8; cursor: pointer; font-size: 1.1rem; padding: .3rem .55rem;
            border-radius: 6px; opacity: .9; text-decoration: none; color: inherit; line-height: 1;
        }
        .btn-acao-mensagem:hover { opacity: 1; background: #eef1fb; border-color: #2f6fed; }
        .btn-avaliar.ativo { opacity: 1; background: #eaf7ea; border-color: #2e9e44; }
        .chat-form { display: flex; gap: .5rem; align-items: center; position: sticky; bottom: 0; background: #f7f7f5; padding-top: .5rem; }
        .chat-form textarea {
            flex: 1; padding: .6rem .8rem; border: 1px solid #ccc; border-radius: 8px; font-size: .9rem;
            font-family: inherit; resize: none; max-height: 12rem; line-height: 1.4;
        }
        .chat-form-wrapper { position: relative; }
        .consulta-sugestoes {
            display: none; position: absolute; bottom: 100%; left: 0; right: 0; margin-bottom: .4rem;
            background: #fff; border: 1px solid #e1e0d9; border-radius: 8px; box-shadow: 0 -6px 20px rgba(0,0,0,.1);
            max-height: 260px; overflow-y: auto; padding: .4rem; font-size: .85rem; z-index: 20;
        }
        .consulta-sugestoes .sugestao-titulo {
            font-size: .7rem; text-transform: uppercase; color: #999; font-weight: 600; padding: .2rem .5rem;
        }
        .consulta-sugestoes .sugestao-item { padding: .35rem .5rem; border-radius: 5px; cursor: pointer; }
        .consulta-sugestoes .sugestao-item:hover { background: #f0efe9; }
        .consulta-sugestoes .sugestao-item code { background: none; padding: 0; }
        .htmx-indicator { opacity: 0; color: #888; font-size: .8rem; transition: opacity .15s; }
        .htmx-indicator.htmx-request { opacity: 1; }
        .form-inline { display: flex; gap: .5rem; align-items: center; margin: .75rem 0; }
        .form-inline input { padding: .45rem .6rem; border: 1px solid #ccc; border-radius: 6px; font-size: .9rem; }
        .catalogo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: .75rem; margin-top: 1rem; }
        .catalogo-item { background: #fff; border: 1px solid #e1e0d9; border-radius: 8px; padding: .75rem .9rem; font-size: .85rem; }
        .catalogo-item summary { cursor: pointer; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
        .catalogo-item p { margin: .5rem 0 0 0; }
        .detalhe-tecnico { color: #888; font-size: .8rem; }
        .catalogo-item code { background: #fafaf8; padding: .05rem .3rem; border-radius: 4px; }
        main.main-chat { max-width: none; padding: 0; height: calc(100vh - 53px); }
        .chat-layout { display: flex; height: 100%; }
        .chat-sidebar {
            width: 260px; flex-shrink: 0; background: #f0efe9; border-right: 1px solid #e1e0d9;
            padding: 1rem .75rem; overflow-y: auto;
        }
        /* margin-top abre espaço pro ☰ fixo (ver .btn-sidebar-toggle) não cobrir este botão —
           ele é o primeiro elemento da sidebar mas o toggle é position:fixed, fora do fluxo. */
        .chat-nova-btn { width: 100%; margin-top: 2.4rem; margin-bottom: 1rem; }
        /* Busca por conteúdo nas conversas (usuário pediu, 2026-07-31). */
        .chat-busca-wrapper { position: relative; margin-bottom: .8rem; }
        .chat-busca-input {
            width: 100%; box-sizing: border-box; padding: .45rem .6rem; font-size: .85rem;
            border: 1px solid #ccc; border-radius: 6px;
        }
        .chat-busca-resultados {
            display: none; position: absolute; top: calc(100% + .3rem); left: 0; right: 0;
            background: #fff; border: 1px solid #e1e0d9; border-radius: 8px;
            box-shadow: 0 4px 16px rgba(0,0,0,.12); max-height: 340px; overflow-y: auto; z-index: 30;
        }
        .chat-busca-resultados.aberta { display: block; }
        .chat-busca-item {
            display: flex; flex-direction: column; gap: .1rem; padding: .5rem .7rem;
            text-decoration: none; color: #333; border-bottom: 1px solid #f0efe9; font-size: .82rem;
        }
        .chat-busca-item:last-child { border-bottom: none; }
        .chat-busca-item:hover { background: #f0efe9; }
        .chat-busca-item strong { font-size: .78rem; color: #2f6fed; }
        .chat-busca-item span { color: #777; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .chat-busca-vazio { padding: .6rem .7rem; font-size: .82rem; color: #999; }
        .conversa-grupo-titulo { font-size: .7rem; text-transform: uppercase; color: #999; font-weight: 600; margin: .9rem 0 .3rem .3rem; }
        .conversa-item { display: flex; align-items: center; gap: .3rem; border-radius: 6px; }
        .conversa-item:hover, .conversa-item.ativa { background: #e6e4dc; }
        .conversa-link {
            flex: 1; padding: .45rem .5rem; color: #333; text-decoration: none; font-size: .85rem;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }
        .conversa-renomear {
            background: none; border: none; cursor: pointer; font-size: .8rem; opacity: 0; padding: .2rem .4rem;
        }
        .conversa-item:hover .conversa-renomear { opacity: .7; }
        .conversa-renomear:hover { opacity: 1 !important; }
        .conversa-dia { margin-top: .4rem; }
        .conversa-dia summary {
            cursor: pointer; font-size: .78rem; color: #777; padding: .3rem .3rem; list-style: none;
        }
        .conversa-dia summary::-webkit-details-marker { display: none; }
        .conversa-dia summary::before { content: "▸ "; }
        .conversa-dia[open] summary::before { content: "▾ "; }
        .chat-principal { flex: 1; min-width: 0; padding: 1.5rem 2rem; overflow-y: auto; display: flex; flex-direction: column; }
        /* Com a sidebar oculta, o conteúdo do chat avança pra esquerda e passa por baixo do
           botão ☰ (que é position:fixed, não some com a sidebar — ver .btn-sidebar-toggle).
           Achado real (2026-07-31, print do usuário): abre espaço extra só nesse estado. */
        #chat-sidebar.oculta ~ .chat-principal { padding-left: 3.5rem; }
        .chat-principal .chat-historico { flex: 1; }
        .btn-ajuda {
            background: none; border: 1px solid #ccc; border-radius: 8px; cursor: pointer;
            font-size: 1rem; padding: .5rem .7rem; line-height: 1;
        }
        .btn-ajuda:hover { background: #eee; }
        /* <dialog> renderiza no "top layer" nativo do navegador — sempre acima de qualquer outro
           elemento da página, sem precisar de z-index; e não mexe no histórico/botão voltar. */
        .modal-ajuda {
            border: 1px solid #e1e0d9; border-radius: 12px; padding: 1.25rem 1.5rem; max-width: 640px;
            width: 90vw; box-shadow: 0 8px 30px rgba(0,0,0,.15);
        }
        .modal-ajuda::backdrop { background: rgba(20, 20, 20, .45); }
        .modal-ajuda-cabecalho { display: flex; align-items: center; justify-content: space-between; }
        .modal-ajuda-cabecalho h2 { margin: 0; font-size: 1.1rem; }
        .modal-ajuda-fechar { background: none; border: none; font-size: 1.1rem; cursor: pointer; color: #888; }
        .modal-ajuda-fechar:hover { color: #222; }
        .modal-ajuda h3 { font-size: .9rem; margin: 1rem 0 .4rem 0; }
        .modal-confirmar-acoes { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1.25rem; }
        /* Modal de lista paginada+busca (2026-08-04, "Log da fila"/"Histórico de token") — mais
           larga que o modal-ajuda padrão (640px), pra caber tabela de várias colunas. */
        .modal-lista-grande { max-width: 900px; }
        .modal-lista-tabela-wrap { max-height: 55vh; overflow-y: auto; margin: .75rem 0; }
        .modal-lista-tabela-wrap table { width: 100%; }
        .lista-exemplos { padding-left: 1.1rem; margin: 0; font-size: .85rem; }
        .lista-exemplos li { margin-bottom: .55rem; }
        .lista-exemplos code {
            background: #f0f0ee; padding: .1rem .4rem; border-radius: 4px; font-size: .82rem; display: inline-block;
        }
        .lista-exemplos-ruim code { background: #fdecec; }
        .exemplo-nota { display: block; color: #888; font-size: .78rem; margin-top: .15rem; }
        .home-hero { max-width: 760px; margin: 2rem auto; text-align: center; }
        .home-hero h1 { font-size: 2rem; margin-bottom: .5rem; }
        .home-hero .subtitulo { color: #666; font-size: 1.1rem; margin-bottom: 2rem; }
        .home-hero .texto { text-align: left; font-size: .98rem; line-height: 1.6; color: #333; }
        .home-hero .texto p { margin: 0 0 1rem 0; }
        .home-cta {
            display: inline-flex; align-items: center; gap: .5rem; margin-top: 1rem;
            padding: .8rem 1.6rem; font-size: 1.05rem; border-radius: 10px;
        }
        .btn-flutuante {
            position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 50;
            display: flex; align-items: center; gap: .5rem;
            background: #2f6fed; color: #fff; text-decoration: none;
            padding: .8rem 1.2rem; border-radius: 999px; font-size: 1rem; font-weight: 600;
            box-shadow: 0 6px 20px rgba(47,111,237,.4);
        }
        .btn-flutuante:hover { background: #2559c4; }
        /* Definição do usuário (2026-07-27): gráfico usa no máximo 50% da largura da bolha —
           impede que um gráfico domine a resposta inteira quando o texto ao redor é curto.
           BUG REAL corrigido (2026-07-27): canvas sem um pai de altura definida faz o Chart.js
           crescer sem limite com responsive:true (documentado no próprio Chart.js) — daqui vem o
           espaço vazio enorme que o usuário reportou. `.ia-grafico-wrapper` dá essa altura fixa;
           o JS usa `maintainAspectRatio:false` pra respeitar ela em vez de calcular uma proporção
           sobre um container sem tamanho próprio. */
        .ia-grafico-wrapper {
            position: relative; max-width: 50%; margin: .5rem 0;
            background: #fff; border: 1px solid #e1e0d9; border-radius: 8px; padding: .5rem;
        }
        /* BUG REAL corrigido (2026-07-31, usuário reportou print com a tela "explodindo" ao clicar
           em "Ver dados do gráfico"): a altura fixa de 320px estava no WRAPPER inteiro, não só no
           canvas — ao abrir a tabela de dados dentro dele, o conteúdo extra estourava essa altura
           fixa e vazava visualmente por cima da bolha seguinte (overflow não contido). O canvas
           continua precisando de um pai com altura definida (ver comment de `_renderizar_markdown_
           com_grafico` em main.py), então essa altura fixa move pra este novo `.ia-grafico-
           canvas-box`, exclusivo do canvas — o wrapper em volta agora cresce livremente (altura
           automática) conforme botão/tabela são exibidos. */
        .ia-grafico-canvas-box { position: relative; height: 320px; }
        .ia-grafico { display: block; }
        .ia-grafico-dados-btn {
            display: block; margin: .4rem auto 0 auto; background: none; border: 1px solid #ccc;
            border-radius: 6px; padding: .3rem .7rem; font-size: .78rem; color: #555; cursor: pointer;
        }
        .ia-grafico-dados-btn:hover { background: #f0efe9; }
        .ia-grafico-dados { margin-top: .5rem; overflow-x: auto; }
        .ia-grafico-dados table { border-collapse: collapse; font-size: .8rem; width: 100%; }
        .ia-grafico-dados th, .ia-grafico-dados td { border: 1px solid #e1e0d9; padding: .25rem .5rem; text-align: right; }
        .ia-grafico-dados th:first-child, .ia-grafico-dados td:first-child { text-align: left; }
        /* Usuário pediu (2026-07-27): sidebar de conversas ocultável/reexibível. */
        .chat-sidebar { transition: margin-left .15s ease; }
        .chat-sidebar.oculta { margin-left: -260px; }
        /* Botão MORA no DOM da sidebar (usuário pediu, 2026-07-31: ficando na área do chat ele
           some quando a conversa cresce e rola a tela — `.chat-principal` tem scroll próprio).
           `position: fixed` faz ele ignorar tanto o `margin-left` da sidebar (quando ela se
           esconde) quanto o scroll do chat — fica sempre no mesmo canto da tela, alcançável pra
           reabrir a sidebar mesmo com ela oculta. */
        .btn-sidebar-toggle {
            /* top: 53px = altura real do <header> (bug real, 2026-07-31: com .85rem o botão
               sobrepunha a marca "IntelIA" no cabeçalho, confirmado por print do usuário). */
            position: fixed; top: 63px; left: .9rem; z-index: 40;
            background: #fff; border: 1px solid #ccc; border-radius: 6px; cursor: pointer;
            font-size: .9rem; padding: .35rem .6rem; box-shadow: 0 1px 4px rgba(0,0,0,.08);
        }
        .btn-sidebar-toggle:hover { background: #eee; }

        /* Responsivo (usuário pediu, 2026-07-31: "tem que ser mais mobile, não uma página
           centralizada tipo 640x480, fluida") — o app nunca tinha nenhuma media query; em tela
           estreita o cabeçalho não quebrava linha e as tabelas ficavam apertadas. Fluido de
           verdade: sem largura fixa, só reduz respiro/fonte pra caber melhor. */
        @media (max-width: 640px) {
            header { padding: .6rem .85rem; }
            header nav a { margin-left: .6rem; font-size: .82rem; }
            .seletor-idioma { margin-left: .6rem; padding-left: .6rem; }
            main { padding: 1rem .85rem; }
            table, .tabela-tokens { font-size: .78rem; }
            td, th, .tabela-tokens td, .tabela-tokens th { padding: .35rem .4rem; }
            .home-hero { margin: 1rem auto; }
            .chat-sidebar { width: 220px; }
            .chat-sidebar.oculta { margin-left: -220px; }
            .cards { grid-template-columns: 1fr; }
            form.form-cadastro.form-2col { grid-template-columns: 1fr; }
        }
        @media (min-width: 641px) and (max-width: 900px) {
            .cards { grid-template-columns: repeat(2, minmax(260px, 1fr)); }
        }