*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      /* Paleta azul clássico + turquesa (apoio) + dourado (ação). */
      --bg: #081420;
      --surface: #0c1d31;
      /* Canvas do chat: azul clássico escuro, distinto da sidebar p/ delimitar. */
      --chat-bg: #0a1828;
      /* Superfície elevada (composer) e borda mais forte p/ destaque. */
      --surface-2: #13283d;
      --border-strong: #2c4a66;
      --border: #1a3047;
      /* Dourado: cor de AÇÃO/protagonista. --accent-bright p/ texto/marca. */
      --accent: #c9a24b;
      --accent-bright: #d8b45c;
      --accent-dim: #c9a24b22;
      /* Turquesa: cor de APOIO (mic/clipe, status online). */
      --accent-2: #178582;
      --accent-2-bright: #1fb0ac;
      --accent-2-dim: #17858222;
      --text: #f5f5f5;
      /* WCAG AA sobre o canvas escuro (#0a1828): #8398a8 fica ~5:1. */
      --text-muted: #8398a8;
      --user-bg: #102538;
      --jhonnie-bg: #0a1520;
      --tool-bg: #0a1a10;
      --tool-border: #1a3a1a;
      --error: #ff5555;
    }

    body {
      background: var(--bg);
      color: var(--text);
      font-family: 'Segoe UI', system-ui, sans-serif;
      display: flex;
      height: 100dvh;
      overflow: hidden;
    }

    /* ── Acessibilidade ── */
    /* Foco visível para navegação por teclado (não aparece em clique de mouse) */
    :focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 2px;
      border-radius: 4px;
    }
    /* Respeita usuários que pedem menos movimento */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
      }
    }

    /* ── Ícones (Lucide, SVG inline) ── */
    /* Herdam currentColor (casam com os tokens). Alinham ao meio do texto. */
    .lucide { display: inline-block; flex-shrink: 0; vertical-align: middle; }
    [data-icon] { display: inline-flex; align-items: center; vertical-align: middle; }
    .lucide.spin { animation: spin .8s linear infinite; }

    /* ── Sidebar ── */
    #sidebar {
      width: 230px; flex-shrink: 0;
      background: var(--surface);
      border-right: 1px solid var(--border);
      display: flex; flex-direction: column;
      padding: 1rem .8rem;
      gap: .25rem;
    }
    .brand {
      display: flex; align-items: center; gap: .6rem;
      padding: 0 .4rem .85rem;
    }
    .dot {
      width: 9px; height: 9px; border-radius: 50%;
      background: var(--accent); box-shadow: 0 0 8px var(--accent);
      animation: pulse 2.5s ease-in-out infinite;
    }
    @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.25} }
    .brand h1 { font-size: 1.05rem; font-weight: 700; color: var(--accent-bright); letter-spacing: 3px; }

    .side-section {
      font-size: .6rem; font-weight: 700; letter-spacing: 1.5px;
      color: var(--text-muted); padding: .8rem .4rem .35rem;
      user-select: none;
    }
    /* ── Lista de conversas (threads) ── */
    .conv-head {
      display: flex; align-items: center; justify-content: space-between;
    }
    #new-conv-btn {
      background: var(--accent-dim); border: 1px solid #c9a24b22;
      color: var(--accent); width: 20px; height: 20px; border-radius: 6px;
      font-size: 1rem; line-height: 1; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
    }
    #new-conv-btn:hover { background: #c9a24b33; }
    .conv-search-wrap { position: relative; margin: .15rem 0 .35rem; }
    .conv-search-icon {
      position: absolute; left: .5rem; top: 50%; transform: translateY(-50%);
      color: var(--text-muted); pointer-events: none;
    }
    #conv-search {
      width: 100%; background: var(--bg); border: 1px solid var(--border);
      color: var(--text); border-radius: 7px;
      padding: .35rem .55rem .35rem 1.7rem; font-size: .76rem; font-family: inherit;
      outline: none;
    }
    #conv-search:focus { border-color: #c9a24b44; }
    #conv-search::placeholder { color: var(--text-muted); }
    .conv-group {
      font-size: .58rem; font-weight: 700; letter-spacing: 1px;
      color: var(--text-muted); text-transform: uppercase;
      padding: .45rem .45rem .2rem; user-select: none;
    }
    .conv-empty { font-size: .74rem; color: var(--text-muted); padding: .4rem .45rem; }
    /* Lista de conversas é a área protagonista: ocupa todo o espaço livre
       entre a busca e o rodapé (flex:1), em vez de uma janela fixa apertada. */
    #conv-list {
      flex: 1; min-height: 0;
      display: flex; flex-direction: column; gap: 3px;
      overflow-y: auto; margin-bottom: .3rem;
    }
    #conv-list::-webkit-scrollbar { width: 3px; }
    #conv-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
    .conv-item {
      display: flex; align-items: center; gap: .4rem;
      padding: .45rem .55rem; border-radius: 8px; cursor: pointer;
      color: var(--text); font-size: .82rem;
      background: var(--surface); border: 1px solid var(--border);
      border-left: 3px solid transparent; transition: background .12s, border-color .12s;
    }
    .conv-item:hover { background: #11202e; border-color: #c9a24b33; }
    .conv-item.active {
      background: var(--accent-dim); border-color: #c9a24b55;
      border-left-color: var(--accent); color: #eaf6ff; font-weight: 600;
    }
    .conv-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    /* Ações SEMPRE visíveis (antes só no hover → invisível no touch) */
    .conv-actions { display: flex; gap: .05rem; flex-shrink: 0; opacity: .55; }
    .conv-item:hover .conv-actions, .conv-item.active .conv-actions { opacity: 1; }
    .conv-actions button {
      background: none; border: none; color: var(--text-muted);
      cursor: pointer; font-size: .8rem; line-height: 1;
      padding: .1rem .2rem; border-radius: 5px;
    }
    .conv-actions button:hover { color: var(--accent); background: #c9a24b1a; }
    .conv-actions button.danger:hover { color: var(--error); background: #ff44441a; }

    /* Seção de conversas arquivadas (colapsável) */
    .conv-arch-toggle {
      width: 100%; text-align: left; background: none; border: none; cursor: pointer;
      color: var(--text-muted); font-size: .68rem; font-weight: 700;
      letter-spacing: .5px; text-transform: uppercase;
      padding: .5rem .45rem .35rem; display: flex; align-items: center; gap: .35rem;
    }
    .conv-arch-toggle:hover { color: var(--accent); }
    .conv-item.archived { opacity: .72; border-left-color: #5a6678; }
    .conv-item.archived .conv-title { font-style: italic; }

    /* ── Rodapé enxuto da sidebar ── */
    /* Altura natural (não cresce): a lista de conversas acima fica com o resto. */
    .side-footer {
      flex-shrink: 0;
      display: flex; flex-direction: column; gap: .4rem;
      padding-top: .5rem; margin-top: .25rem;
      border-top: 1px solid var(--border);
    }
    .side-user {
      display: flex; align-items: center; gap: .5rem;
      padding: 0 .4rem; font-size: .72rem; color: var(--text-muted);
    }
    #current-user { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    #logout-btn {
      background: none; border: none; color: var(--text-muted);
      cursor: pointer; font-size: .68rem; text-decoration: underline;
      padding: 0; flex-shrink: 0;
    }
    #logout-btn:hover { color: var(--accent); }
    /* Status do modelo/voz: discreto, no rodapé de tudo */
    .side-meta {
      padding: 0 .4rem; font-size: .62rem; color: var(--text-muted);
      line-height: 1.5; opacity: .8;
    }

    #sidebar-backdrop {
      display: none; position: fixed; inset: 0;
      background: #00000066; z-index: 199;
    }

    /* ── Coluna principal ── */
    #main {
      flex: 1; display: flex; flex-direction: column;
      min-width: 0; height: 100dvh;
      background: var(--chat-bg);
    }
    #topbar { display: none; }

    @media (max-width: 860px) {
      #sidebar {
        position: fixed; left: 0; top: 0; height: 100dvh; z-index: 200;
        transform: translateX(-100%);
        transition: transform .25s cubic-bezier(.4,0,.2,1);
      }
      #sidebar.open { transform: translateX(0); }
      #sidebar-backdrop.open { display: block; }
      #topbar {
        display: flex; align-items: center; gap: .65rem;
        padding: .6rem 1rem; background: var(--surface);
        border-bottom: 1px solid var(--border); flex-shrink: 0;
      }
      #topbar h1 { font-size: .95rem; font-weight: 700; color: var(--accent); letter-spacing: 3px; }
      #menu-btn {
        background: none; border: 1px solid var(--border); border-radius: 8px;
        color: var(--text); font-size: 1rem; padding: .2rem .55rem; cursor: pointer;
      }
    }

    /* ── Chat ── */
    /* Coluna de leitura centralizada (~46rem), estilo Claude: o padding
       lateral cresce simetricamente quando a tela é maior que a coluna */
    #chat {
      flex: 1;
      overflow-y: auto;
      padding: 1.5rem max(1.25rem, calc((100% - 46rem) / 2));
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }
    #chat::-webkit-scrollbar { width: 3px; }
    #chat::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

    /* Estado vazio: saudação central acolhedora (#welcome).
       Como #chat é flex-column, margin:auto centra nos dois eixos. */
    .chat-empty {
      margin: auto;
      display: flex; flex-direction: column; align-items: center;
      gap: .85rem; text-align: center; max-width: 28rem;
      padding: 1rem;
    }
    .chat-empty-mark {
      width: 58px; height: 58px; border-radius: 16px;
      display: grid; place-items: center;
      color: var(--chat-bg); background: var(--accent);
      box-shadow: 0 0 28px #c9a24b33;
    }
    .chat-empty h2 {
      color: var(--text); font-size: 1.2rem; font-weight: 600; letter-spacing: .3px;
    }
    .chat-empty p { color: var(--text-muted); font-size: .92rem; line-height: 1.6; }

    .msg {
      font-size: .92rem;
      line-height: 1.7;
      position: relative;
    }
    /* Usuário: bolha discreta à direita */
    .msg.user {
      align-self: flex-end;
      max-width: 75%;
      background: var(--user-bg);
      border: 1px solid var(--border);
      border-radius: 14px 14px 4px 14px;
      padding: .6rem .95rem;
      color: #b8c8d8;
      white-space: pre-wrap;
      word-break: break-word;
    }
    /* Jhonnie: texto corrido, sem bolha (estilo Claude) */
    .msg.jhonnie {
      align-self: flex-start;
      max-width: 100%;
      padding: 0 2.25rem 0 0;
    }
    .msg-label {
      font-size: .62rem;
      font-weight: 700;
      letter-spacing: 1.5px;
      color: var(--accent);
      margin-bottom: .4rem;
    }
    .msg-body { word-break: break-word; }

    /* Markdown styles */
    .msg-body h1,.msg-body h2,.msg-body h3 { margin:.5rem 0 .25rem; color:#c0d8f0; }
    .msg-body h1{font-size:1.1rem} .msg-body h2{font-size:1rem} .msg-body h3{font-size:.95rem}
    .msg-body p { margin: .3rem 0; }
    .msg-body ul,.msg-body ol { padding-left: 1.25rem; margin: .3rem 0; }
    .msg-body li { margin: .15rem 0; }
    .msg-body strong { color: #d0e8ff; font-weight: 600; }
    .msg-body em { color: #a0c0e0; font-style: italic; }
    .msg-body code {
      background: #0a1a2a; border: 1px solid #1a2a3a;
      padding: .1rem .35rem; border-radius: 4px;
      font-family: 'Consolas', 'Courier New', monospace; font-size: .82rem; color: #7dd3fc;
    }
    .msg-body pre {
      background: #040a10; border: 1px solid #1a2a3a;
      border-radius: 6px; padding: .75rem 1rem; margin: .4rem 0;
      overflow-x: auto;
    }
    .msg-body pre code {
      background: none; border: none; padding: 0;
      font-size: .82rem; color: #a0d0f0; white-space: pre;
    }
    .msg-body a { color: var(--accent); text-decoration: underline; }
    .msg-body blockquote {
      border-left: 3px solid var(--accent); padding-left: .75rem;
      margin: .3rem 0; color: #8090a0;
    }

    /* Tool indicator */
    .tool-indicator {
      align-self: flex-start;
      display: flex; flex-direction: column; gap: .3rem;
      background: var(--tool-bg);
      border: 1px solid var(--tool-border);
      border-radius: 8px;
      padding: .4rem .75rem;
      font-size: .78rem; color: #4ade80;
    }
    .tool-head { display: flex; align-items: center; gap: .5rem; }
    .tool-spinner {
      width: 12px; height: 12px; border-radius: 50%;
      border: 2px solid #1a3a1a; border-top-color: #4ade80;
      animation: spin .7s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }
    /* Progresso por portal — discreto, sob o spinner (#136). */
    .tool-progress {
      display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .4rem;
      padding-left: 1.1rem; font-size: .68rem; color: var(--text-muted);
    }
    .tool-progress:empty { display: none; }
    .tool-portal { white-space: nowrap; }
    .tool-portal.ok  { color: #4ade80; }
    .tool-portal.off { color: var(--text-muted); opacity: .65; }
    .tool-portal.err { color: #fbbf24; }
    .tool-portal-sep { color: var(--border); }

    /* Thinking */
    .thinking {
      align-self: flex-start;
      color: var(--text-muted); font-size: .82rem; padding: .25rem 0;
    }
    .thinking span { animation: blink 1s step-start infinite; }
    .thinking span:nth-child(2){animation-delay:.2s}
    .thinking span:nth-child(3){animation-delay:.4s}
    @keyframes blink{50%{opacity:0}}

    /* Barra de ações da resposta (copiar / avaliar) */
    .msg-actions {
      display: flex; align-items: center; gap: .15rem;
      margin-top: .5rem;
      opacity: 0; transition: opacity .2s;
    }
    .msg.jhonnie:hover .msg-actions,
    .msg-actions:focus-within { opacity: 1; }
    .msg-action {
      background: none; border: none; cursor: pointer;
      color: var(--text-muted); font-size: .85rem;
      padding: .25rem .35rem; border-radius: 6px; line-height: 1;
      transition: color .15s, background .15s;
    }
    .msg-action:hover { color: var(--accent); background: var(--accent-dim); }
    .msg-action.ok      { color: #22c55e; }
    .msg-action.rated-up   { color: #22c55e; opacity: 1; }
    .msg-action.rated-down { color: var(--error); opacity: 1; }
    /* Em telas de toque não há hover — mantém as ações sempre visíveis */
    @media (hover: none) { .msg-actions { opacity: .7; } }

    /* Session separator */
    .separator {
      text-align: center; font-size: .65rem; color: var(--text-muted);
      padding: .25rem 0; user-select: none;
    }

    /* ── Composer (input flutuante centralizado) ── */
    /* Borda superior separa visualmente o campo de digitação da conversa. */
    #composer {
      flex-shrink: 0;
      padding: .7rem max(1.25rem, calc((100% - 46rem) / 2)) 1rem;
      border-top: 1px solid var(--border);
    }
    form {
      display: flex;
      align-items: flex-end;
      gap: .4rem;
      background: var(--surface-2);
      border: 1px solid var(--border-strong);
      border-radius: 16px;
      padding: .45rem .55rem;
      box-shadow: 0 2px 16px #00000055;
      transition: border-color .2s, box-shadow .2s;
    }
    form:focus-within {
      border-color: #c9a24b66;
      box-shadow: 0 0 0 3px #c9a24b1f, 0 2px 16px #00000055;
    }
    textarea {
      flex: 1;
      background: transparent;
      border: none;
      color: var(--text);
      padding: .55rem .5rem;
      font-size: .9rem; font-family: inherit;
      resize: none; min-height: 40px; max-height: 130px;
      outline: none; line-height: 1.5;
    }
    textarea::placeholder { color: var(--text-muted); }

    .icon-btn {
      background: var(--accent-dim); border: 1px solid #c9a24b44;
      color: var(--accent); width: 40px; height: 40px;
      border-radius: 8px; cursor: pointer; font-size: 1rem;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0; transition: background .2s;
    }
    .icon-btn:hover:not(:disabled) { background: #c9a24b33; }
    .icon-btn:disabled { opacity: .35; cursor: not-allowed; }
    /* Clipe usa o turquesa (apoio); o enviar fica no dourado (ação). */
    #clip-btn {
      background: var(--accent-2-dim); border-color: #17858244; color: var(--accent-2-bright);
    }
    #clip-btn:hover:not(:disabled) { background: #17858233; }
    /* Enviar: dourado sólido (ação), ícone escuro. :not(.stop) preserva o
       estado vermelho de "parar geração". */
    #send-btn:not(.stop) {
      background: var(--accent); border-color: var(--accent); color: var(--chat-bg);
    }
    #send-btn:not(.stop):hover:not(:disabled) {
      background: var(--accent-bright); border-color: var(--accent-bright);
    }
    /* Estado "parar geração": o botão de enviar vira um quadrado de parada */
    .icon-btn.stop { background: #3a0a0a; border-color: #ff444466; color: #ff5555; }

    /* Botão "tentar de novo" (aparece após um erro) */
    .retry-btn {
      align-self: flex-start;
      display: inline-flex; align-items: center; gap: .4rem;
      background: var(--accent-dim); border: 1px solid #c9a24b44;
      color: var(--accent); border-radius: 8px;
      padding: .4rem .8rem; font-size: .8rem; cursor: pointer;
      font-family: inherit; transition: background .2s; margin-top: -.4rem;
    }
    .retry-btn:hover { background: #c9a24b33; }

    /* ── Status Widget (rodapé do sidebar) ── */
    #server-status {
      flex-shrink: 0;
      display: flex; align-items: center; gap: .35rem;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 20px;
      padding: .2rem .5rem;
      font-size: .6rem; font-weight: 700; letter-spacing: 1px;
      transition: border-color .4s, box-shadow .4s;
      user-select: none;
    }
    .status-dot {
      width: 7px; height: 7px; border-radius: 50%;
      flex-shrink: 0;
      transition: background .4s, box-shadow .4s;
    }
    .status-text { transition: color .4s; }

    #server-status.online {
      border-color: #17858255;
      box-shadow: 0 0 10px #17858211;
    }
    #server-status.online .status-dot {
      background: var(--accent-2);
      box-shadow: 0 0 6px #178582aa;
      animation: pulse 3s ease-in-out infinite;
    }
    #server-status.online .status-text { color: var(--accent-2-bright); }

    #server-status.processing {
      border-color: #f59e0b44;
      box-shadow: 0 0 10px #f59e0b11;
    }
    #server-status.processing .status-dot {
      background: #f59e0b;
      box-shadow: 0 0 6px #f59e0b99;
      animation: pulse 0.8s ease-in-out infinite;
    }
    #server-status.processing .status-text { color: #f59e0b; }

    #server-status.offline {
      border-color: #ef444444;
      box-shadow: 0 0 10px #ef444411;
    }
    #server-status.offline .status-dot {
      background: #ef4444;
      box-shadow: 0 0 6px #ef444499;
      animation: none;
    }
    #server-status.offline .status-text { color: #ef4444; }

    /* ── Skills Panel ── */
    #skills-backdrop {
      display: none; position: fixed; inset: 0;
      background: #00000066; z-index: 99;
    }
    #skills-backdrop.open { display: block; }

    #skills-panel {
      position: fixed; top: 0; right: 0;
      width: 340px; max-width: 92vw; height: 100dvh;
      background: var(--surface);
      border-left: 1px solid var(--border);
      display: flex; flex-direction: column;
      transform: translateX(100%);
      transition: transform .25s cubic-bezier(.4,0,.2,1);
      z-index: 100; overflow: hidden;
    }
    #skills-panel.open { transform: translateX(0); }

    #skills-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 1rem 1.1rem .75rem;
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
    }
    #skills-header h2 {
      font-size: .85rem; font-weight: 700; letter-spacing: 2px; color: var(--accent);
    }
    #skills-close {
      background: none; border: none; color: var(--text-muted);
      font-size: 1.1rem; cursor: pointer; padding: .25rem; line-height: 1;
      transition: color .2s;
    }
    #skills-close:hover { color: var(--text); }

    #skills-list {
      flex: 1; overflow-y: auto; padding: .85rem;
      display: flex; flex-direction: column; gap: .65rem;
    }
    #skills-list::-webkit-scrollbar { width: 3px; }
    #skills-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

    .skill-card {
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 10px; padding: .85rem 1rem;
      display: flex; flex-direction: column; gap: .45rem;
      transition: border-color .2s;
    }
    .skill-card:hover { border-color: #c9a24b33; }

    .skill-card-top {
      display: flex; align-items: center; gap: .6rem;
    }
    .skill-icon { font-size: 1.35rem; line-height: 1; flex-shrink: 0; }
    .skill-meta { flex: 1; min-width: 0; }
    .skill-name {
      font-size: .88rem; font-weight: 700; color: var(--accent);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .skill-stem {
      font-size: .65rem; color: var(--text-muted); font-family: monospace;
    }
    .skill-desc {
      font-size: .78rem; color: #8090a8; line-height: 1.5;
    }
    .skill-footer {
      display: flex; align-items: center; justify-content: space-between;
      gap: .5rem; flex-wrap: wrap;
    }
    .skill-tags { display: flex; flex-wrap: wrap; gap: .25rem; }
    .skill-tag {
      font-size: .6rem; background: #c9a24b0d;
      color: #c9a24b66; border: 1px solid #c9a24b1a;
      padding: .1rem .4rem; border-radius: 4px; letter-spacing: .3px;
    }
    .skill-edge {
      font-size: .62rem; color: #f5a623; background: #f5a62311;
      border: 1px solid #f5a62333; padding: .1rem .4rem; border-radius: 4px;
      flex-shrink: 0;
    }
    .skill-run {
      background: var(--accent-dim); border: 1px solid #c9a24b44;
      color: var(--accent); border-radius: 6px;
      padding: .28rem .8rem; font-size: .76rem;
      cursor: pointer; transition: background .2s; flex-shrink: 0;
      font-family: inherit; letter-spacing: .5px;
    }
    .skill-run:hover { background: #c9a24b33; }

    /* ── Menu de Ferramentas (popover escalável) ── */
    .tools-menu { position: relative; }
    #tools-trigger {
      display: flex; align-items: center; justify-content: space-between; gap: .5rem;
      width: 100%; text-align: left;
      background: none; border: 1px solid var(--border);
      color: var(--text); border-radius: 8px;
      padding: .5rem .6rem; font-size: .82rem; cursor: pointer;
      font-family: inherit; transition: all .15s;
    }
    #tools-trigger:hover,
    #tools-trigger[aria-expanded="true"] {
      background: var(--accent-dim); border-color: #c9a24b33; color: var(--accent);
    }
    .tools-caret { font-size: .7rem; transition: transform .18s; color: var(--text-muted); }
    #tools-trigger[aria-expanded="true"] .tools-caret { transform: rotate(180deg); color: var(--accent); }

    #tools-popover {
      display: none;
      position: absolute; bottom: calc(100% + .35rem); left: 0; right: 0;
      background: var(--surface); border: 1px solid var(--border);
      border-radius: 10px; padding: .3rem;
      box-shadow: 0 8px 24px #00000066;
      flex-direction: column; gap: 2px; z-index: 50;
      max-height: 60vh; overflow-y: auto;
    }
    .tools-menu.open #tools-popover { display: flex; }

    /* Todos os itens do menu Ferramentas (por container, não por ID — assim um
       botão novo nunca nasce sem estilo, como aconteceu com a Auditoria). */
    #tools-popover button {
      display: flex; align-items: center; gap: .5rem;
      width: 100%; text-align: left;
      background: none; border: 1px solid transparent;
      color: var(--text); border-radius: 7px;
      padding: .5rem .6rem; font-size: .82rem; cursor: pointer;
      font-family: inherit; transition: all .15s;
    }
    #tools-popover button:hover {
      background: var(--accent-dim); border-color: #c9a24b22; color: var(--accent);
    }

    /* Auth modal */
    #auth-modal {
      display: none; position: fixed; inset: 0;
      background: #00000099; z-index: 1000;
      align-items: center; justify-content: center;
    }
    #auth-modal.visible { display: flex; }
    .auth-box {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: 12px; padding: 2rem; max-width: 380px; width: 90%;
    }
    .auth-box h2 {
      color: var(--accent); font-size: 1rem; letter-spacing: 2px;
      margin-bottom: .75rem;
    }
    .auth-box p {
      color: var(--text-muted); font-size: .85rem; line-height: 1.6;
      margin-bottom: 1.25rem;
    }
    #key-input, #login-user, #login-pass {
      width: 100%; background: #0c1520; border: 1px solid var(--border);
      color: var(--text); padding: .55rem .85rem; border-radius: 8px;
      font-size: .88rem; outline: none; font-family: 'Consolas', monospace;
      margin-bottom: 1rem; letter-spacing: .5px;
    }
    #key-input:focus, #login-user:focus, #login-pass:focus { border-color: #c9a24b44; }
    #key-submit, #login-submit {
      width: 100%; background: var(--accent-dim); border: 1px solid #c9a24b44;
      color: var(--accent); padding: .6rem; border-radius: 8px;
      cursor: pointer; font-size: .88rem; letter-spacing: 1px;
      transition: background .2s;
    }
    #key-submit:hover, #login-submit:hover { background: #c9a24b33; }
    #key-error, #login-error {
      color: var(--error); font-size: .78rem; margin-top: .5rem; display: none;
    }

    /* ── Painel de usuários (admin) — padrão da auditoria (#130) ── */
    .users-list { display: flex; flex-direction: column; gap: .5rem; margin-bottom: .35rem; }
    .user-row {
      background: var(--bg); border: 1px solid var(--border); border-radius: 10px;
      padding: .55rem .6rem;
    }
    .user-row-head { display: flex; align-items: center; gap: .4rem; }
    .user-name {
      font-size: .82rem; color: var(--text); font-weight: 600; flex: 1;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .user-badge {
      font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
      padding: .14rem .45rem; border-radius: 5px; background: var(--accent-dim);
      color: var(--accent-bright); white-space: nowrap;
    }
    .user-badge.muted { background: #2c4a6655; color: #c5d2dc; }
    .user-badge.off   { background: #ff44441a; color: #ff8080; }
    .user-actions { display: flex; gap: .1rem; flex-shrink: 0; }
    .user-actions button {
      background: none; border: none; color: #aab8c4; cursor: pointer;
      padding: .28rem; border-radius: 6px; display: grid; place-items: center;
    }
    .user-actions button:hover { color: var(--accent-bright); background: #c9a24b22; }
    .user-actions button.danger:hover { color: #ff8080; background: #ff444422; }
    .user-meta {
      display: flex; gap: .7rem; flex-wrap: wrap; margin: .35rem 0 .1rem;
      font-size: .7rem; color: #c5d2dc;
    }
    .user-meta .k {
      color: var(--text-muted); text-transform: uppercase; font-size: .58rem;
      letter-spacing: .4px; margin-right: .15rem;
    }
    .user-caps { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .45rem; }
    .user-caps-all { font-size: .72rem; color: #c5d2dc; }
    .user-chip {
      font-size: .66rem; font-family: inherit; cursor: pointer; padding: .16rem .5rem;
      border-radius: 6px; color: #d2dde6; background: #1f3a55;
      border: 1px solid #3a5a78; transition: all .12s;
    }
    .user-chip:hover { color: var(--accent-2-bright); border-color: var(--accent-2); }
    .user-chip.on {
      color: var(--accent-2-bright); background: var(--accent-2-dim);
      border: 1px solid var(--accent-2); font-weight: 600;
    }
    #new-user-form { display: flex; flex-direction: column; gap: .45rem; }
    #new-user-form input, #new-user-form select {
      width: 100%; background: var(--bg); border: 1px solid var(--border-strong);
      color: var(--text); padding: .45rem .6rem; border-radius: 7px;
      font-size: .82rem; outline: none; font-family: inherit;
    }
    #new-user-form input:focus, #new-user-form select:focus { border-color: #c9a24b66; }
    #new-user-form button {
      width: 100%; background: var(--accent); border: none;
      color: var(--bg); padding: .55rem; border-radius: 7px; cursor: pointer;
      font-size: .82rem; font-weight: 700; display: inline-flex; align-items: center;
      justify-content: center; gap: .4rem;
    }
    #new-user-form button:hover { background: var(--accent-bright); }
    /* Visível só para admin (auth.js alterna .show) */
    #users-btn { display: none; }
    #users-btn.show { display: flex; }
    #users-backdrop {
      display: none; position: fixed; inset: 0; background: #00000066; z-index: 99;
    }
    #users-backdrop.open { display: block; }
    #users-panel {
      position: fixed; top: 0; right: 0;
      width: 380px; max-width: 94vw; height: 100dvh;
      background: var(--surface); border-left: 1px solid var(--border);
      display: flex; flex-direction: column;
      transform: translateX(100%);
      transition: transform .25s cubic-bezier(.4,0,.2,1);
      z-index: 100; overflow: hidden;
    }
    #users-panel.open { transform: translateX(0); }
    #users-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 1rem 1.1rem .75rem; border-bottom: 1px solid var(--border); flex-shrink: 0;
    }
    #users-header h2 {
      font-size: .85rem; font-weight: 700; letter-spacing: 2px; color: var(--accent);
    }
    #users-header button {
      background: none; border: none; color: var(--text-muted);
      font-size: 1.1rem; cursor: pointer; padding: .25rem; line-height: 1;
    }
    #users-list { flex: 1; overflow-y: auto; padding: .85rem; }
    #users-list::-webkit-scrollbar { width: 3px; }
    #users-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
    .users-section-title {
      font-size: .62rem; font-weight: 700; letter-spacing: 1.5px;
      color: var(--text-muted); margin: .4rem 0 .55rem;
    }

    /* ── Botão "Instalar app" (PWA) ── */
    .pwa-install {
      position: fixed; top: .6rem; right: .8rem;
      z-index: 250; display: inline-flex; align-items: center; gap: .4rem;
      background: var(--accent); color: var(--bg); border: none;
      border-radius: 999px; padding: .5rem .95rem; cursor: pointer;
      font-weight: 700; font-size: .8rem; letter-spacing: .3px;
      box-shadow: 0 4px 16px #00000066;
    }
    .pwa-install:hover { background: var(--accent-bright); }
    .pwa-install[hidden] { display: none; }

    /* ── Painel de Auditoria (#89) ── */
    #audit-backdrop { display: none; position: fixed; inset: 0; background: #00000066; z-index: 99; }
    #audit-backdrop.open { display: block; }
    #audit-panel {
      position: fixed; top: 0; right: 0;
      width: 420px; max-width: 94vw; height: 100dvh;
      background: var(--surface); border-left: 1px solid var(--border);
      display: flex; flex-direction: column;
      transform: translateX(100%);
      transition: transform .25s cubic-bezier(.4,0,.2,1);
      z-index: 100; overflow: hidden;
    }
    #audit-panel.open { transform: translateX(0); }
    #audit-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 1rem 1.1rem .75rem; border-bottom: 1px solid var(--border); flex-shrink: 0;
    }
    #audit-header h2 {
      font-size: .85rem; font-weight: 700; letter-spacing: 2px; color: var(--accent);
      display: flex; align-items: center; gap: .45rem;
    }
    #audit-header button {
      background: none; border: none; color: var(--text-muted);
      font-size: 1.1rem; cursor: pointer; padding: .25rem; line-height: 1; transition: color .2s;
    }
    #audit-header button:hover { color: var(--text); }
    #audit-filters {
      display: flex; gap: .4rem; flex-wrap: wrap;
      padding: .6rem .85rem; border-bottom: 1px solid var(--border); flex-shrink: 0;
    }
    #audit-filters select {
      flex: 1; min-width: 7rem; background: var(--bg); border: 1px solid var(--border);
      color: var(--text); border-radius: 7px; padding: .35rem .5rem;
      font-size: .76rem; font-family: inherit; outline: none;
    }
    #audit-csv {
      background: var(--accent-dim); border: 1px solid #c9a24b33; color: var(--accent);
      border-radius: 7px; padding: .35rem .6rem; font-size: .74rem; cursor: pointer;
      display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap;
    }
    #audit-csv:hover { background: #c9a24b33; }
    #audit-list { flex: 1; overflow-y: auto; padding: .85rem; }
    #audit-list::-webkit-scrollbar { width: 3px; }
    #audit-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
    .audit-empty { color: var(--text-muted); font-size: .82rem; padding: .5rem 0; }

    /* Lista de eventos — layout em grade que cabe no celular (2 linhas). */
    .audit-list { display: flex; flex-direction: column; gap: .4rem; }
    .audit-row {
      display: grid; gap: .15rem .5rem; align-items: baseline;
      grid-template-columns: auto 1fr auto;
      grid-template-areas: "ev user when" "det det ip";
      padding: .45rem .55rem; border-radius: 8px;
      background: var(--bg); border: 1px solid var(--border); font-size: .76rem;
    }
    .audit-row .audit-ev {
      grid-area: ev; font-weight: 700; text-transform: uppercase;
      font-size: .58rem; letter-spacing: .5px; color: var(--accent);
      background: var(--accent-dim); padding: .12rem .4rem; border-radius: 5px; white-space: nowrap;
    }
    .audit-row .audit-user { grid-area: user; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .audit-row .audit-when { grid-area: when; justify-self: end; color: var(--text-muted); font-size: .66rem; white-space: nowrap; }
    .audit-row .audit-detail { grid-area: det; color: var(--text-muted); font-size: .7rem; word-break: break-word; }
    .audit-row .audit-ip { grid-area: ip; justify-self: end; color: var(--text-muted); font-size: .66rem; white-space: nowrap; }
    .audit-row.audit-warn .audit-ev { color: var(--error); background: #ff44441a; }

    /* ── Painel de histórico de orçamentos ── */
    #orc-backdrop {
      display: none; position: fixed; inset: 0; background: #00000066; z-index: 99;
    }
    #orc-backdrop.open { display: block; }
    #orc-panel {
      position: fixed; top: 0; right: 0;
      width: 420px; max-width: 94vw; height: 100dvh;
      background: var(--surface); border-left: 1px solid var(--border);
      display: flex; flex-direction: column;
      transform: translateX(100%);
      transition: transform .25s cubic-bezier(.4,0,.2,1);
      z-index: 100; overflow: hidden;
    }
    #orc-panel.open { transform: translateX(0); }
    #orc-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 1rem 1.1rem .75rem; border-bottom: 1px solid var(--border); flex-shrink: 0;
    }
    #orc-header h2 {
      font-size: .85rem; font-weight: 700; letter-spacing: 2px; color: var(--accent);
      display: flex; align-items: center; gap: .45rem;
    }
    #orc-header button {
      background: none; border: none; color: var(--text-muted);
      font-size: 1.1rem; cursor: pointer; padding: .25rem; line-height: 1; transition: color .2s;
    }
    #orc-header button:hover { color: var(--text); }
    /* Filtros — mesmo padrão da auditoria (#audit-filters). */
    #orc-filters {
      display: flex; gap: .4rem; flex-wrap: wrap;
      padding: .6rem .85rem; border-bottom: 1px solid var(--border); flex-shrink: 0;
    }
    #orc-filters[hidden] { display: none; }
    #orc-filters select {
      flex: 1; min-width: 7rem; background: var(--bg); border: 1px solid var(--border);
      color: var(--text); border-radius: 7px; padding: .35rem .5rem;
      font-size: .76rem; font-family: inherit; outline: none;
    }
    #orc-filters select[hidden] { display: none; }
    #orc-csv {
      background: var(--accent-dim); border: 1px solid #c9a24b33; color: var(--accent);
      border-radius: 7px; padding: .35rem .6rem; font-size: .74rem; cursor: pointer;
      display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap;
    }
    #orc-csv:hover { background: #c9a24b33; }
    #orc-list { flex: 1; overflow-y: auto; padding: .85rem; display: flex; flex-direction: column; gap: .4rem; }
    #orc-list::-webkit-scrollbar { width: 3px; }
    #orc-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
    .orc-empty { color: var(--text-muted); font-size: .82rem; padding: .5rem 0; }

    /* ── Painel de múltiplas UCs (épico orçamento customizável) ── */
    #uc-backdrop { display: none; position: fixed; inset: 0; background: #00000066; z-index: 99; }
    #uc-backdrop.open { display: block; }
    #uc-panel {
      position: fixed; top: 0; right: 0;
      width: 420px; max-width: 96vw; height: 100dvh;
      background: var(--surface); border-left: 1px solid var(--border);
      display: flex; flex-direction: column;
      transform: translateX(100%); transition: transform .25s cubic-bezier(.4,0,.2,1);
      z-index: 100; overflow: hidden;
    }
    #uc-panel.open { transform: translateX(0); }
    #uc-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 1rem 1.1rem .75rem; border-bottom: 1px solid var(--border); flex-shrink: 0;
    }
    #uc-header h2 { font-size: .85rem; font-weight: 700; letter-spacing: 2px; color: var(--accent); }
    #uc-header button { background: none; border: none; color: var(--text-muted); font-size: 1.1rem; cursor: pointer; padding: .25rem; line-height: 1; transition: color .2s; }
    #uc-header button:hover { color: var(--text); }
    #uc-body { flex: 1; overflow-y: auto; padding: .85rem; }
    #uc-body::-webkit-scrollbar { width: 3px; }
    #uc-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
    .uc-hint { font-size: .76rem; color: var(--text-muted); line-height: 1.5; margin-bottom: .7rem; }
    .uc-add-btn {
      display: block; text-align: center; cursor: pointer;
      border: 1px dashed #c9a24b55; border-radius: 9px; color: var(--accent);
      background: var(--accent-dim); padding: .6rem; font-size: .82rem; font-weight: 600;
    }
    .uc-add-btn:hover { background: #c9a24b22; }
    #uc-list { display: flex; flex-direction: column; gap: .5rem; margin: .7rem 0; }
    .uc-card {
      background: var(--bg); border: 1px solid var(--border); border-radius: 9px;
      padding: .55rem .65rem; display: flex; align-items: center; gap: .55rem;
    }
    .uc-card.erro { border-color: #f59e0b55; }
    .uc-card-main { flex: 1; min-width: 0; }
    .uc-card-title { font-size: .8rem; font-weight: 600; color: #d0e8ff; }
    .uc-card-sub { font-size: .68rem; color: var(--text-muted); margin-top: .15rem; }
    .uc-principal { display: flex; align-items: center; gap: .25rem; font-size: .62rem; color: var(--text-muted); white-space: nowrap; }
    .uc-remove { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: .95rem; line-height: 1; padding: .1rem .2rem; }
    .uc-remove:hover { color: var(--error); }
    #uc-controls { border-top: 1px solid var(--border); padding-top: .7rem; margin-top: .3rem; }
    .uc-modo { display: flex; flex-direction: column; gap: .35rem; margin-bottom: .6rem; }
    .uc-modo label { font-size: .8rem; color: var(--text); display: flex; align-items: center; gap: .4rem; cursor: pointer; }
    .uc-modo label span { font-size: .66rem; color: var(--text-muted); }
    .uc-params { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-bottom: .65rem; }
    .uc-params label { display: flex; flex-direction: column; gap: .2rem; font-size: .56rem; text-transform: uppercase; letter-spacing: .4px; color: var(--text-muted); }
    .uc-params input {
      background: var(--bg); border: 1px solid var(--border); border-radius: 7px;
      color: var(--text); font-size: .82rem; padding: .35rem .5rem; width: 100%;
    }
    .uc-params input:focus { outline: none; border-color: #c9a24b66; }
    #uc-gerar { width: 100%; }
    #uc-results { margin-top: .8rem; display: flex; flex-direction: column; gap: .8rem; }

    /* Linha de orçamento — mesmo padrão em grade da auditoria (.audit-row),
       cabe em 2 linhas no celular: badge · titular · preço / metadados · data. */
    .orc-row {
      display: grid; gap: .15rem .5rem; align-items: baseline;
      grid-template-columns: auto 1fr auto;
      grid-template-areas: "badge subj price" "meta meta when";
      padding: .5rem .55rem; border-radius: 8px;
      background: var(--bg); border: 1px solid var(--border); font-size: .76rem;
      cursor: pointer; transition: border-color .2s;
    }
    .orc-row:hover { border-color: #c9a24b33; }
    .orc-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
    .orc-row .orc-badge {
      grid-area: badge; font-weight: 700; text-transform: uppercase;
      font-size: .58rem; letter-spacing: .5px; color: var(--accent);
      background: var(--accent-dim); padding: .12rem .4rem; border-radius: 5px;
      white-space: nowrap; align-self: center;
    }
    .orc-row .orc-subj { grid-area: subj; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .orc-row .orc-price { grid-area: price; justify-self: end; font-weight: 700; color: var(--accent); white-space: nowrap; }
    .orc-row .orc-price.orc-inviavel { color: #fbbf24; font-weight: 600; font-size: .7rem; }
    .orc-row .orc-meta {
      grid-area: meta; color: var(--text-muted); font-size: .7rem; word-break: break-word;
      display: inline-flex; align-items: center; gap: .25rem; flex-wrap: wrap;
    }
    .orc-row .orc-meta .orc-author { display: inline-flex; align-items: center; gap: .2rem; }
    .orc-row .orc-meta .orc-author svg { opacity: .8; }
    .orc-row .orc-when { grid-area: when; justify-self: end; color: var(--text-muted); font-size: .66rem; white-space: nowrap; }

    /* Modal de visualização do orçamento reaberto */
    #orc-view-modal {
      display: none; position: fixed; inset: 0; background: #000000aa; z-index: 1400;
      align-items: center; justify-content: center; padding: 1rem;
    }
    #orc-view-modal.visible { display: flex; }
    .orc-view-box {
      background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
      width: 100%; max-width: 40rem; max-height: 90vh; display: flex; flex-direction: column;
    }
    .orc-view-head {
      display: flex; align-items: center; justify-content: space-between; gap: .5rem;
      padding: .9rem 1.1rem; border-bottom: 1px solid var(--border); flex-shrink: 0;
      font-size: .85rem; font-weight: 700; letter-spacing: 1px; color: var(--accent);
    }
    .orc-view-actions { display: flex; gap: .5rem; }
    #orc-view-body { overflow-y: auto; padding: 1rem 1.1rem; }
    #orc-view-body::-webkit-scrollbar { width: 3px; }
    #orc-view-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

    /* ── Card de fatura (issue #14) ── */
    .fatura-card {
      background: var(--surface);
      border: 1px solid #c9a24b33;
      border-radius: 12px;
      padding: .9rem 1.1rem;
      margin: .25rem 0;
      max-width: 34rem;
    }
    .fatura-card-header {
      display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
      padding-bottom: .55rem; margin-bottom: .65rem;
      border-bottom: 1px solid var(--border);
    }
    .fatura-dist {
      font-size: .95rem; font-weight: 700; color: var(--accent); letter-spacing: 1px;
    }
    .fatura-titular {
      font-size: .75rem; color: #8090a8;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .fatura-metrics {
      display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
      gap: .55rem; margin-bottom: .65rem;
    }
    .fatura-metric {
      background: var(--bg); border: 1px solid var(--border);
      border-radius: 8px; padding: .45rem .6rem;
    }
    .fatura-metric-label {
      font-size: .58rem; font-weight: 700; letter-spacing: 1px;
      color: var(--text-muted); text-transform: uppercase;
    }
    .fatura-metric-value {
      font-size: .92rem; font-weight: 600; color: #d0e8ff; margin-top: .15rem;
    }
    .fatura-extra {
      font-size: .72rem; color: #8090a8; line-height: 1.7; margin-bottom: .5rem;
    }
    .fatura-chart {
      display: flex; align-items: flex-end; gap: 3px;
      height: 90px; margin: .9rem 0 .15rem;
    }
    .fatura-bar-wrap {
      flex: 1; display: flex; flex-direction: column;
      align-items: center; gap: .2rem; height: 100%;
      justify-content: flex-end; min-width: 0;
    }
    /* Trilha separada do rótulo do mês: a % da barra resolve contra a trilha,
       não contra a coluna inteira — assim o flexbox não comprime os picos. */
    .fatura-bar-track {
      flex: 1; width: 100%;
      display: flex; align-items: flex-end;
    }
    .fatura-bar {
      position: relative;
      width: 100%; flex-shrink: 0; border-radius: 2px 2px 0 0;
      background: linear-gradient(180deg, var(--accent), #0077a0);
      min-height: 2px; opacity: .85;
    }
    /* valor do consumo (kWh) flutuando acima do topo de cada barra */
    .fatura-bar-val {
      position: absolute; bottom: 100%; left: 50%;
      transform: translateX(-50%); margin-bottom: 2px;
      font-size: .52rem; color: #9fb3c8; white-space: nowrap;
    }
    .fatura-bar.zero { background: #3a2a0a; border-top: 2px solid #f59e0b; }
    .fatura-bar.zero .fatura-bar-val { color: #fbbf24; }
    /* mês/ano rotacionado p/ caber sem sobrepor mesmo com 13 barras estreitas */
    .fatura-bar-mes {
      flex-shrink: 0; height: 24px; font-size: .5rem;
      color: var(--text-muted); letter-spacing: 0; white-space: nowrap;
      transform: rotate(-45deg); transform-origin: top center;
    }
    .fatura-chart-title {
      font-size: .58rem; font-weight: 700; letter-spacing: 1px;
      color: var(--text-muted); text-transform: uppercase; margin-top: .4rem;
    }
    .fatura-aviso {
      display: flex; gap: .4rem; align-items: flex-start;
      background: #1a1206; border: 1px solid #f59e0b44;
      border-radius: 6px; padding: .4rem .6rem; margin-top: .5rem;
      font-size: .74rem; color: #fbbf24; line-height: 1.5;
    }

    /* Badge do PATH usado na resposta (depuração do roteador) */
    .path-badge {
      display: inline-block; margin-left: .5rem;
      font-size: .55rem; font-weight: 700; letter-spacing: 1px;
      color: #c9a24b88; border: 1px solid #c9a24b33;
      border-radius: 4px; padding: 0 .3rem;
      vertical-align: middle; user-select: none;
    }

    /* ── Card de orçamento (PATH O — uso interno do consultor) ── */
    .orcamento-card {
      border: 1px solid #f59e0b55; border-radius: 12px;
      background: #0c1119; overflow: hidden;
    }
    .orc-banner {
      background: #2a1d05; color: #fbbf24;
      font-size: .66rem; font-weight: 700; letter-spacing: .3px;
      padding: .5rem .8rem; border-bottom: 1px solid #f59e0b33;
    }
    .orc-header {
      font-size: .9rem; font-weight: 700; color: var(--accent);
      padding: .7rem .85rem .15rem;
    }
    .orc-metrics {
      display: grid; grid-template-columns: repeat(3, 1fr);
      gap: .5rem; padding: .55rem .85rem .25rem;
    }
    .orc-metric {
      background: var(--bg); border: 1px solid var(--border);
      border-radius: 8px; padding: .5rem .6rem;
    }
    .orc-metric.headline { border-color: #c9a24b55; }
    .orc-metric-label {
      font-size: .56rem; text-transform: uppercase; letter-spacing: .5px;
      color: var(--text-muted);
    }
    .orc-metric-value { font-size: 1rem; font-weight: 700; color: #d0e8ff; margin-top: .15rem; }
    .orc-metric.headline .orc-metric-value { color: var(--accent); }
    .orc-metric-sub { font-size: .6rem; color: var(--text-muted); margin-top: .1rem; }
    .orc-detail { padding: .25rem .85rem .5rem; }
    .orc-line {
      display: flex; justify-content: space-between;
      font-size: .75rem; color: #8090a8; padding: .12rem 0;
    }
    .orc-line span:last-child { color: var(--text); }
    .orc-avisos { padding: 0 .85rem .65rem; }
    .orc-inviavel { padding: .6rem .85rem .9rem; font-size: .82rem; color: #fbbf24; }

    /* Auditoria — composição do preço (precificação em calibração) */
    .orc-audit { margin: .15rem .85rem .35rem; border-top: 1px solid var(--border); }
    .orc-audit > summary {
      cursor: pointer; list-style: none; user-select: none;
      font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
      color: var(--accent); padding: .55rem 0 .35rem;
    }
    .orc-audit > summary::-webkit-details-marker { display: none; }
    .orc-audit > summary::before { content: '▸ '; }
    .orc-audit[open] > summary::before { content: '▾ '; }
    .orc-audit-body { padding-bottom: .35rem; }
    .orc-audit .orc-line { font-size: .73rem; }
    .orc-audit-sep {
      font-size: .56rem; text-transform: uppercase; letter-spacing: .5px;
      color: var(--text-muted); margin: .4rem 0 .15rem; padding-top: .25rem;
      border-top: 1px dashed var(--border);
    }

    /* Customização do orçamento (recálculo determinístico no servidor) */
    .orc-customizar { margin: .15rem .85rem .6rem; border-top: 1px solid var(--border); }
    .orc-customizar > summary {
      cursor: pointer; list-style: none; user-select: none;
      font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
      color: var(--accent); padding: .55rem 0 .4rem;
    }
    .orc-customizar > summary::-webkit-details-marker { display: none; }
    .orc-customizar > summary::before { content: '▸ '; }
    .orc-customizar[open] > summary::before { content: '▾ '; }
    .orc-custom-grid {
      display: grid; grid-template-columns: repeat(2, 1fr);
      gap: .5rem; padding: .1rem 0 .2rem;
    }
    .orc-custom-grid label {
      display: flex; flex-direction: column; gap: .2rem;
      font-size: .56rem; text-transform: uppercase; letter-spacing: .4px;
      color: var(--text-muted);
    }
    .orc-inp {
      background: var(--bg); border: 1px solid var(--border); border-radius: 7px;
      color: var(--text); font-size: .82rem; padding: .35rem .5rem; width: 100%;
    }
    .orc-inp:focus { outline: none; border-color: #c9a24b66; }
    .orc-custom-actions { display: flex; gap: .5rem; padding-top: .55rem; }
    .orc-recalc-btn {
      flex: 1; cursor: pointer; border-radius: 8px;
      font-size: .76rem; font-weight: 600; padding: .45rem .6rem;
      background: var(--accent-dim); border: 1px solid #c9a24b44; color: var(--accent);
    }
    .orc-recalc-btn:hover:not(:disabled) { background: #c9a24b22; }
    .orc-recalc-btn:disabled { opacity: .55; cursor: default; }
    .orc-salvar-btn { background: transparent; color: var(--text-muted); border-color: var(--border); }
    .orc-salvar-btn:hover:not(:disabled) { color: var(--accent); border-color: #c9a24b44; }

    /* Botão de exportar proposta (PDF) no card do chat (#35) */
    .orc-export-row { padding: .15rem .85rem .7rem; }
    .orc-export-btn {
      width: 100%; cursor: pointer; border-radius: 8px;
      font-size: .78rem; font-weight: 600; padding: .5rem .6rem;
      background: var(--accent-dim); border: 1px solid #c9a24b44; color: var(--accent);
    }
    .orc-export-btn:hover { background: #c9a24b22; }

    /* Kit real cotado no portal dentro do card de orçamento (#35) */
    .orc-cotacao {
      margin: .15rem .85rem .4rem; padding: .5rem .6rem;
      background: var(--bg); border: 1px solid #c9a24b33; border-radius: 8px;
    }
    .orc-cotacao-head {
      font-size: .68rem; font-weight: 700; color: var(--accent);
      letter-spacing: .3px; margin-bottom: .25rem;
    }
    .orc-cotacao-line {
      display: flex; justify-content: space-between; gap: .6rem;
      font-size: .72rem; color: #8090a8; padding: .1rem 0;
    }
    .orc-cotacao-line span:last-child { color: var(--text); text-align: right; }

    /* Orçamento UNIFICADO: duas opções (micro/string) lado a lado (#35) */
    /* Orçamento cotado (#35/#110): pilha de cards COMPACTOS clicáveis. Cada opção
       nasce fechada (resumo: tipo · portal · kit/serviço/total); abre o orçamento
       completo auditável dentro do próprio card. */
    .orc-cotado { display: flex; flex-direction: column; gap: .5rem; }
    .orc-opcao {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: 12px; overflow: hidden;
    }
    .orc-opcao-sum {
      display: flex; flex-direction: column; gap: .35rem;
      padding: .55rem .75rem; cursor: pointer; list-style: none;
    }
    .orc-opcao-sum::-webkit-details-marker { display: none; }
    .orc-opcao-sum-head { display: flex; align-items: center; gap: .5rem; }
    .orc-opcao-tag {
      font-size: .58rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
      color: var(--accent); flex: 1;
    }
    .orc-opcao-portal { font-size: .68rem; color: var(--text-muted); }
    .orc-opcao-sum-head::after { content: '▸'; color: var(--text-muted); font-size: .72rem; }
    .orc-opcao[open] > .orc-opcao-sum .orc-opcao-sum-head::after { content: '▾'; }
    .orc-opcao-nums { display: flex; gap: .7rem; align-items: baseline; flex-wrap: wrap; }
    .orc-opcao-num {
      display: inline-flex; gap: .25rem; align-items: baseline;
      font-size: .74rem; font-weight: 600; color: #d0e8ff;
    }
    .orc-opcao-num-lbl {
      font-size: .55rem; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
      color: var(--text-muted);
    }
    .orc-opcao-num.total { color: var(--accent); font-weight: 700; font-size: .82rem; }
    .orc-opcao-sys { font-size: .62rem; color: var(--text-muted); }
    .orc-opcao[open] > .orc-opcao-sum { border-bottom: 1px solid var(--border); }
    .orc-opcao-body { padding: .4rem; }
    .orc-opcao-body .orcamento-card { border: none; border-radius: 0; }

    /* Card de cotação pura (PATH K, #35) */
    .cotacao-card {
      border: 1px solid #c9a24b44; border-radius: 12px;
      background: #0c1119; overflow: hidden;
    }
    .cot-grupo { padding: .25rem .85rem .5rem; }
    .cot-grupo-tit {
      font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
      color: var(--accent); margin: .45rem 0 .3rem;
    }
    .cot-item {
      background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
      margin-bottom: .4rem; overflow: hidden;
    }
    .cot-item-head {
      display: flex; align-items: center; gap: .5rem;
      padding: .45rem .6rem; cursor: pointer; list-style: none;
    }
    .cot-item-head::-webkit-details-marker { display: none; }
    .cot-item-head::after {
      content: '▸'; color: var(--text-muted); font-size: .72rem; margin-left: .1rem;
    }
    .cot-item[open] > .cot-item-head::after { content: '▾'; }
    .cot-item[open] > .cot-item-head { border-bottom: 1px solid var(--border); }
    .cot-item-body { padding: .35rem .6rem .45rem; }

    /* Rodapé "portais sem kit — por quê" (#112/#114): nasce fechado. */
    .cot-diag { margin: .1rem .6rem .5rem; border-top: 1px solid var(--border); }
    .orc-cotado > .cot-diag { margin: .1rem 0 0; }
    .cot-diag > summary {
      display: flex; align-items: center; gap: .35rem; cursor: pointer; list-style: none;
      font-size: .68rem; color: var(--text-muted); padding: .45rem .15rem;
    }
    .cot-diag > summary::-webkit-details-marker { display: none; }
    .cot-diag-body { padding: 0 .15rem .35rem; }
    .cot-diag-line { font-size: .68rem; color: #8090a8; padding: .12rem 0; }
    .cot-diag-portal {
      font-weight: 700; color: var(--accent); text-transform: uppercase;
      letter-spacing: .3px; margin-right: .25rem;
    }
    .cot-rank {
      flex: none; width: 1.1rem; height: 1.1rem; border-radius: 5px;
      background: var(--accent-dim); color: var(--accent);
      font-size: .66rem; font-weight: 700; display: grid; place-items: center;
    }
    .cot-portal { font-size: .78rem; font-weight: 600; color: #d0e8ff; flex: 1; }
    .cot-preco { font-size: .85rem; font-weight: 700; color: var(--accent); }
    .cot-item-sub { font-size: .64rem; color: var(--text-muted); margin: .15rem 0 .2rem; }
    .cot-item-line { font-size: .7rem; color: #8090a8; padding: .05rem 0; }

    /* ── Barra de anexo pendente (arquivo + texto juntos) ── */
    #attachment-bar { padding: 0 .15rem .4rem; }
    .att-chip {
      display: inline-flex; align-items: center; gap: .4rem;
      background: var(--accent-dim); border: 1px solid #c9a24b44;
      color: var(--accent); border-radius: 8px;
      padding: .3rem .55rem; font-size: .78rem; max-width: 100%;
    }
    #att-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 22rem; }
    #att-remove {
      background: none; border: none; color: var(--accent);
      cursor: pointer; font-size: .8rem; line-height: 1; padding: 0 .1rem; opacity: .8;
    }
    #att-remove:hover { opacity: 1; }

    /* Drag-and-drop de fatura */
    body.dragging form { border-color: var(--accent); box-shadow: 0 0 14px #c9a24b33; }
    #drop-hint {
      display: none; position: fixed; inset: 0; z-index: 500;
      background: #080b0fd9; pointer-events: none;
      align-items: center; justify-content: center;
      font-size: 1rem; color: var(--accent); letter-spacing: 1px;
    }
    body.dragging #drop-hint { display: flex; }
    #drop-hint .drop-box {
      border: 2px dashed #c9a24b66; border-radius: 16px;
      padding: 2.5rem 3.5rem; background: var(--surface);
    }

    /* ── Toasts (notificações não-bloqueantes) ── */
    #toast-stack {
      position: fixed; bottom: 1rem; left: 50%;
      transform: translateX(-50%);
      display: flex; flex-direction: column; gap: .5rem;
      z-index: 2000; pointer-events: none;
      width: max-content; max-width: 92vw;
    }
    .toast {
      pointer-events: auto;
      display: flex; align-items: center; gap: .55rem;
      background: var(--surface); border: 1px solid var(--border);
      border-left-width: 3px;
      border-radius: 10px; padding: .65rem .9rem;
      font-size: .82rem; color: var(--text);
      box-shadow: 0 6px 24px #00000066;
      animation: toast-in .25s cubic-bezier(.4,0,.2,1);
      max-width: 100%;
    }
    .toast.leaving { animation: toast-out .2s ease forwards; }
    .toast-icon { flex-shrink: 0; font-size: .95rem; }
    .toast-msg { flex: 1; line-height: 1.4; word-break: break-word; }
    .toast.success { border-left-color: #22c55e; }
    .toast.error   { border-left-color: var(--error); }
    .toast.info    { border-left-color: var(--accent); }
    @keyframes toast-in  { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes toast-out { to { opacity: 0; transform: translateY(10px); } }

    /* ── Modal genérico (confirmação / entrada de texto) ── */
    #dialog-modal {
      display: none; position: fixed; inset: 0;
      background: #00000099; z-index: 1500;
      align-items: center; justify-content: center;
    }
    #dialog-modal.visible { display: flex; }
    .dialog-box {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: 12px; padding: 1.5rem 1.6rem; max-width: 400px; width: 90%;
      animation: toast-in .2s ease;
    }
    .dialog-box h3 {
      color: var(--accent); font-size: .95rem; letter-spacing: 1px;
      margin-bottom: .6rem;
    }
    .dialog-box p {
      color: var(--text); font-size: .86rem; line-height: 1.55;
      margin-bottom: 1.1rem;
    }
    #dialog-input {
      width: 100%; background: #0c1520; border: 1px solid var(--border);
      color: var(--text); padding: .55rem .8rem; border-radius: 8px;
      font-size: .88rem; outline: none; margin-bottom: 1.1rem; font-family: inherit;
    }
    #dialog-input:focus { border-color: #c9a24b44; }
    .dialog-actions { display: flex; gap: .55rem; justify-content: flex-end; }
    .dialog-btn {
      border-radius: 8px; padding: .5rem 1.1rem; font-size: .84rem;
      cursor: pointer; font-family: inherit; transition: all .15s;
      border: 1px solid var(--border); background: none; color: var(--text-muted);
    }
    .dialog-btn:hover { color: var(--text); border-color: var(--text-muted); }
    .dialog-btn.primary {
      background: var(--accent-dim); border-color: #c9a24b44; color: var(--accent);
    }
    .dialog-btn.primary:hover { background: #c9a24b33; }
    .dialog-btn.danger {
      background: #2a1515; border-color: #ff444455; color: var(--error);
    }
    .dialog-btn.danger:hover { background: #3a1a1a; }