/* Paleta do Claude. Claro por padrao; escuro por preferencia do sistema ou por data-tema="escuro" no , que o alternador escreve. */ :root { --fundo: #FAF9F5; --superficie: #FFFFFF; --lateral: #F0EEE6; --texto: #1F1E1D; --fraco: #6D6C67; --borda: #E3E0D8; --acento: #D97757; --ok: #2E7D46; --instavel: #B7791F; /* Estava #8A8781 (3,58:1 contra --superficie, marginal) — escurecido para folga real acima do minimo de 3:1 exigido para o ponto/borda de "sem-acesso" (achado Important da revisao da Task 9, herdado da Task 8). */ --bloqueado: #726F69; --sessao: #2C6BB0; --raio: 12px; --lateral-largura: 264px; } :root[data-tema="escuro"] { --fundo: #262624; --superficie: #30302E; --lateral: #1F1E1D; --texto: #FAF9F5; --fraco: #A3A099; --borda: #3E3D3A; --acento: #D97757; --ok: #4CAF6A; --instavel: #D6A03A; /* Estava #6F6E69 (2,59:1 contra --superficie escuro — reprovava o minimo de 3:1). Clareado para dar folga real. */ --bloqueado: #9C9992; --sessao: #5B9BD5; } @media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) { --fundo: #262624; --superficie: #30302E; --lateral: #1F1E1D; --texto: #FAF9F5; --fraco: #A3A099; --borda: #3E3D3A; --ok: #4CAF6A; --instavel: #D6A03A; --bloqueado: #9C9992; --sessao: #5B9BD5; } } * { box-sizing: border-box; } body { margin: 0; display: flex; height: 100vh; overflow: hidden; background: var(--fundo); color: var(--texto); font: 15px/1.6 ui-sans-serif, -apple-system, "Segoe UI", system-ui, sans-serif; } /* ---------- lateral ---------- */ #lateral { width: var(--lateral-largura); flex: 0 0 var(--lateral-largura); background: var(--lateral); border-right: 1px solid var(--borda); display: flex; flex-direction: column; padding: 12px; } .lateral-topo { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 12px; } .marca { font-size: 19px; font-weight: 600; letter-spacing: -.01em; } .icone { background: none; border: 0; color: var(--fraco); cursor: pointer; font-size: 16px; padding: 4px 6px; border-radius: 6px; } .icone:hover { background: var(--borda); color: var(--texto); } .botao-novo { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 12px; margin-bottom: 14px; background: var(--superficie); color: var(--texto); border: 1px solid var(--borda); border-radius: var(--raio); font: inherit; font-weight: 500; cursor: pointer; text-align: left; } .botao-novo:hover { border-color: var(--acento); } #historico { flex: 1; overflow-y: auto; margin: 0 -4px; } #historico h2 { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--fraco); margin: 12px 10px 6px; font-weight: 600; } .conversa-item { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 8px; cursor: pointer; color: var(--texto); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .conversa-item:hover { background: var(--borda); } .conversa-item[aria-current="true"] { background: var(--borda); font-weight: 500; } /* I5: era `opacity: 0` + `:hover`. Em touch o botao nunca aparecia e nao havia outro caminho para apagar uma conversa; e como `opacity: 0` NAO tira o elemento da ordem de tabulacao, quem usa teclado focava um botao invisivel. E a mesma classe de defeito que este projeto ja reprovou uma vez na ressalva do tribunal, e que o spec §2.3 proibe ("sem depender de hover"). Agora: sempre visivel (discreto), reforcado no hover do item e no foco de teclado, e em cheio onde nao existe hover. */ .conversa-item .apagar { margin-left: auto; flex: 0 0 auto; border: 0; background: none; color: var(--fraco); cursor: pointer; opacity: .6; line-height: 1; padding: 4px 6px; border-radius: 6px; font-size: 15px; } .conversa-item:hover .apagar, .conversa-item .apagar:hover, .conversa-item .apagar:focus-visible { opacity: 1; color: var(--texto); } .conversa-item .apagar:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; } @media (hover: none) { .conversa-item .apagar { opacity: 1; } } .vazio { color: var(--fraco); font-size: 13px; padding: 8px 10px; } .config { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; margin-top: 8px; background: none; border: 0; border-top: 1px solid var(--borda); color: var(--texto); font: inherit; cursor: pointer; text-align: left; } .config:hover { background: var(--borda); } .config-avatar { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 50%; background: var(--acento); color: #fff; display: grid; place-items: center; font-size: 14px; } .config-texto { display: flex; flex-direction: column; line-height: 1.25; } .config-texto small { color: var(--fraco); font-size: 12px; } /* ---------- centro ---------- */ #centro { flex: 1; min-width: 0; overflow-y: auto; } #inicial { max-width: 740px; margin: 0 auto; padding: 12vh 24px 80px; } .saudacao { font-size: 30px; font-weight: 400; letter-spacing: -.02em; margin: 0 0 26px; text-align: center; } .caixa-entrada { margin-bottom: 34px; } .estado-conexao { max-width: 740px; margin: 12vh auto 0; padding: 14px 16px 10px; background: var(--superficie); border: 1px solid var(--borda); border-radius: 16px; box-shadow: 0 1px 2px rgba(0,0,0,.04); } .estado-conexao strong, .estado-conexao span { display: block; } .estado-conexao span { color: var(--fraco); margin-top: 4px; } .estado-conexao button { margin-top: 12px; } .formulario { background: var(--superficie); border: 1px solid var(--borda); border-radius: 16px; padding: 14px 16px 10px; box-shadow: 0 1px 2px rgba(0,0,0,.04); } .formulario:focus-within { border-color: var(--acento); } .entrada { width: 100%; border: 0; resize: none; background: none; color: var(--texto); font: inherit; outline: none; max-height: 200px; /* Duas linhas de altura minima: com uma so, a caixa ficava mais baixa que os controles do rodape e o conjunto parecia apertado ao lado do texto largo das respostas. */ min-height: 48px; } .entrada-rodape { display: flex; align-items: center; gap: 8px; margin-top: 6px; } .seletor-modelo { display: flex; gap: 4px; margin-left: auto; } .seletor-modelo select { background: none; border: 0; color: var(--fraco); font: inherit; font-size: 13px; cursor: pointer; padding: 3px 4px; border-radius: 6px; } .seletor-modelo select:hover { background: var(--borda); color: var(--texto); } .enviar { width: 30px; height: 30px; flex: 0 0 30px; border: 0; border-radius: 8px; background: var(--acento); color: #fff; cursor: pointer; font-size: 15px; } .enviar:disabled { opacity: .45; cursor: default; } /* ---------- blocos da tela inicial ---------- */ #inicial section { margin-bottom: 30px; } .titulo-bloco { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--fraco); font-weight: 600; margin: 0 0 10px; } /* ---------- mensagens ---------- */ /* `relative` por causa do botao "Decisoes", que fica absoluto no topo direito. */ #conversa { position: relative; display: flex; flex-direction: column; height: 100%; } #conversa[hidden] { display: none; } #mensagens { flex: 1; overflow-y: auto; padding: 28px 24px; } /* 740 (a largura do texto) + 48 (o padding lateral desta caixa). Estava 740 COM o padding por dentro, o que deixava o campo 48px mais estreito que as mensagens: a caixa nao alinhava com o texto acima dela. O numero aqui e o de `.msg` mais o proprio padding, e nao pode ser mexido sozinho. */ #conversa .caixa-entrada { max-width: 788px; margin: 0 auto 20px; width: 100%; padding: 0 24px; } .msg { max-width: 740px; margin: 0 auto 22px; word-wrap: break-word; overflow-wrap: anywhere; } /* `pre-wrap` so onde o texto E pre-formatado. Na bolha do assistente o markdown ja produz paragrafos e listas de verdade, e manter pre-wrap ali somaria a quebra do markdown com a quebra literal, dobrando o espaco entre blocos. */ .msg.user, .msg.erro, .msg.ferramenta { white-space: pre-wrap; } .msg.user { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 12px 16px; } .msg.assistant { padding: 2px 0; } /* ---------- markdown da resposta ---------- */ .msg.assistant > :first-child { margin-top: 0; } .msg.assistant > :last-child { margin-bottom: 0; } .msg.assistant p { margin: 0 0 14px; } .msg.assistant h2, .msg.assistant h3, .msg.assistant h4 { margin: 26px 0 10px; line-height: 1.3; letter-spacing: -.01em; } .msg.assistant h2 { font-size: 21px; } .msg.assistant h3 { font-size: 17px; } .msg.assistant h4 { font-size: 15px; color: var(--fraco); text-transform: uppercase; letter-spacing: .05em; } .msg.assistant ul, .msg.assistant ol { margin: 0 0 14px; padding-left: 22px; } .msg.assistant li { margin-bottom: 6px; } .msg.assistant li > ul, .msg.assistant li > ol { margin: 6px 0 0; } .msg.assistant blockquote { margin: 0 0 14px; padding: 2px 0 2px 14px; border-left: 3px solid var(--borda); color: var(--fraco); } .msg.assistant hr { border: 0; border-top: 1px solid var(--borda); margin: 22px 0; } .msg.assistant code { font-family: ui-monospace, SFMono-Regular, monospace; font-size: .88em; background: var(--lateral); border: 1px solid var(--borda); border-radius: 5px; padding: 1px 5px; } .msg.assistant pre { margin: 0 0 14px; padding: 12px 14px; overflow-x: auto; background: var(--lateral); border: 1px solid var(--borda); border-radius: var(--raio); } /* Dentro do 
 o fundo/borda do code inline viraria caixa dentro de caixa. */
.msg.assistant pre code { background: none; border: 0; padding: 0; font-size: 12.5px; }
.msg.assistant a { color: var(--acento); text-decoration: underline; text-underline-offset: 2px; }
/* Tabela larga rola dentro da propria caixa; sem isto a pagina inteira ganha rolagem
   horizontal e a coluna de mensagens e empurrada. */
.md-tabela { overflow-x: auto; margin: 0 0 14px; }
.msg.assistant table { border-collapse: collapse; font-size: 14px; }
.msg.assistant th, .msg.assistant td {
  border: 1px solid var(--borda); padding: 6px 10px; text-align: left; vertical-align: top;
}
.msg.assistant th { background: var(--lateral); font-weight: 600; }
.msg.ferramenta {
  color: var(--fraco); font-size: 12.5px; font-family: ui-monospace, SFMono-Regular, monospace;
  border-left: 2px solid var(--borda); padding-left: 10px;
}
.msg.erro { color: #B3261E; border: 1px solid #B3261E44; border-radius: var(--raio); padding: 12px 16px; }

/* ---------- paineis ---------- */
.painel {
  position: fixed; inset: 0; background: rgba(0,0,0,.35);
  display: grid; place-items: center; padding: 24px; z-index: 10;
}
.painel[hidden] { display: none; }
.painel-caixa {
  background: var(--superficie); border: 1px solid var(--borda); border-radius: 16px;
  max-width: 620px; width: 100%; max-height: 80vh; overflow-y: auto; padding: 22px 24px;
}
.painel h2 { margin: 0 0 4px; font-size: 18px; }
.painel .fechar { float: right; background: none; border: 0; color: var(--fraco); font-size: 20px; cursor: pointer; }

.grade-prompts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.cartao-prompt {
  padding: 12px 14px; text-align: left; font: inherit; font-size: 14px;
  background: var(--superficie); color: var(--texto);
  border: 1px solid var(--borda); border-radius: var(--raio); cursor: pointer;
}
.cartao-prompt:hover { border-color: var(--acento); }

.placar { display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; color: var(--fraco); margin-bottom: 12px; }
.ponto { display: inline-block; width: 8px; height: 8px; border-radius: 50%; vertical-align: middle; }
.ponto[data-e="ok"] { background: var(--ok); }
.ponto[data-e="instavel"] { background: var(--instavel); }
.ponto[data-e="sem-acesso"] { background: var(--bloqueado); }
.ponto[data-e="exige-sessao"] { background: var(--sessao); }

.placar-ligados { margin-left: auto; color: var(--texto); font-weight: 600; }

/* ---------- filtros de area e UF ---------- */
.barra-filtros { margin: 4px 0 12px; display: flex; flex-direction: column; gap: 6px; }
.linha-filtro { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 5px; }
.rotulo-filtro { font-size: 11.5px; color: var(--fraco); font-weight: 600; margin-right: 2px; line-height: 24px; }
/* Só os CHIPS colapsam. O botão que expande é irmão deste contêiner, nunca filho: dentro
   dele, ele sumia junto com o que deveria revelar e a lista virava um beco sem saída. */
.chips-uf { display: flex; flex-wrap: wrap; gap: 5px; flex: 1 1 0; min-width: 0; }
.chips-uf.colapsado { max-height: 26px; overflow: hidden; }
.chip-filtro {
  display: inline-flex; align-items: center; gap: 5px;
  font: inherit; font-size: 12px; padding: 3px 9px; border-radius: 999px; cursor: pointer;
  background: var(--superficie); color: var(--fraco);
  border: 1px solid var(--borda);
}
.chip-filtro:hover { border-color: var(--acento); color: var(--texto); }
.chip-filtro[aria-pressed="true"] {
  background: var(--acento); border-color: var(--acento); color: #fff;
}
.chip-conta {
  font-size: 10.5px; font-variant-numeric: tabular-nums;
  background: var(--lateral); color: var(--fraco); border-radius: 999px; padding: 0 5px;
}
.chip-filtro[aria-pressed="true"] .chip-conta { background: rgba(255,255,255,.25); color: #fff; }
.chip-filtro.mais { border-style: dashed; }
.acoes-escopo { gap: 12px; margin-top: 2px; }
.ligacao {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: 12px; color: var(--fraco); text-decoration: underline;
  text-underline-offset: 2px;
}
.ligacao:hover { color: var(--acento); }

/* ---------- grade de tribunais ---------- */
.grade-tribunais { display: flex; flex-wrap: wrap; gap: 5px; }
.chip-tribunal[hidden] { display: none; }
/* O chip e a moldura; os dois botoes dentro dele nao tem borda propria. Precisa ser
   assim porque sao DUAS acoes distintas no mesmo objeto — ver a sigla e o tribunal
   (esquerda) e liga/desliga (direita) — e botao dentro de botao nao existe em HTML. */
.chip-tribunal {
  display: inline-flex; align-items: stretch; overflow: hidden;
  border: 1px solid var(--borda); border-left-width: 3px; border-radius: 6px;
  background: var(--superficie);
}
.chip-tribunal:hover { border-color: var(--acento); }
.chip-tribunal[data-e="ok"] { border-left-color: var(--ok); }
.chip-tribunal[data-e="instavel"] { border-left-color: var(--instavel); }
.sigla {
  font: inherit; font-size: 12px; font-family: ui-monospace, SFMono-Regular, monospace;
  text-transform: uppercase; letter-spacing: .02em;
  padding: 3px 4px 3px 8px; cursor: pointer;
  background: none; color: var(--texto); border: 0;
}
/* A bolinha: verde = entra nas buscas, oca = fora. O anel continua desenhado quando
   apagada, entao o alvo de clique nao some — e o estado nao depende so de cor: o
   preenchimento (cheio x vazio) distingue os dois sem enxergar matiz. */
.liga {
  display: inline-flex; align-items: center; padding: 0 8px 0 3px;
  background: none; border: 0; cursor: pointer;
}
.liga::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  border: 1.5px solid var(--bloqueado); background: transparent;
}
.liga[aria-pressed="true"]::before { background: var(--ok); border-color: var(--ok); }
.liga:focus-visible, .sigla:focus-visible { outline: 2px solid var(--acento); outline-offset: -2px; }
/* Era `opacity: .6` no elemento inteiro — apagava texto E borda juntos, e a borda ja
   partia de uma cor marginal: o tribunal bloqueado (a informacao que mais importa,
   porque evita uma busca que nao vai funcionar) ficava o mais dificil de ler da grade
   (achado Important da revisao da Task 9). Troca: sem opacidade nenhuma, cor de texto
   propria (--fraco, que ja passa 4,5:1 sozinha) no lugar de apagar o --texto normal. */
.chip-tribunal[data-e="sem-acesso"] { border-left-color: var(--bloqueado); }
.chip-tribunal[data-e="sem-acesso"] .sigla { color: var(--fraco); }
.chip-tribunal[data-e="exige-sessao"] { border-left-color: var(--sessao); }

.manual summary { cursor: pointer; font-size: 13px; color: var(--fraco); font-weight: 600; }
.manual-corpo h3 { font-size: 14px; margin: 16px 0 4px; }
.manual-corpo p { margin: 0; font-size: 14px; color: var(--fraco); }
.manual-corpo ul { padding-left: 18px; font-size: 14px; color: var(--fraco); }
.estado-linha { font-size: 13px; color: var(--fraco); }
.painel .nota { white-space: pre-wrap; font-size: 14px; line-height: 1.65; }

/* ---------- painel de configurações ---------- */
.secao-config { margin-top: 22px; }
.secao-config h3 { margin: 0 0 4px; font-size: 15px; }
.campo {
  width: 100%; padding: 9px 11px; margin-top: 8px;
  background: var(--fundo); color: var(--texto);
  border: 1px solid var(--borda); border-radius: 9px; font: inherit;
}
.campo:focus { outline: none; border-color: var(--acento); }
.form-chave { display: flex; gap: 8px; align-items: flex-end; margin-top: 8px; }
.form-chave .campo { margin-top: 0; }
.botao-acento {
  padding: 9px 14px; border: 0; border-radius: 9px; white-space: nowrap;
  background: var(--acento); color: #fff; font: inherit; font-weight: 500; cursor: pointer;
}
.botao-acento:disabled { opacity: .5; cursor: default; }
/* Retorno de "a chave foi salva?". A cor reforca o estado, mas nunca e o unico sinal:
   o texto sozinho ja diz o que aconteceu (o estado nao pode depender de enxergar cor). */
.estado-chave { margin: 8px 0 0; font-size: 13px; color: var(--fraco); }
.estado-chave[data-estado="salvo"] { color: var(--ok); }
.estado-chave[data-estado="pendente"],
.estado-chave[data-estado="formato"] { color: var(--instavel); }
.chave-nova {
  margin-top: 12px; padding: 12px; border-radius: var(--raio);
  background: var(--fundo); border: 1px solid var(--acento);
}
.chave-nova p { margin: 0 0 6px; font-size: 13px; }
.chave-nova code {
  display: block; word-break: break-all; font-size: 12.5px;
  font-family: ui-monospace, SFMono-Regular, monospace; margin-bottom: 8px;
}
.lista-chaves { margin-top: 12px; }
.chave-linha {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 0; border-top: 1px solid var(--borda); font-size: 14px;
}
.chave-linha small { color: var(--fraco); font-size: 12px; }
.revogar {
  background: none; border: 1px solid var(--borda); border-radius: 8px;
  padding: 5px 10px; color: var(--fraco); font: inherit; font-size: 13px; cursor: pointer;
}
.revogar:hover { border-color: #B3261E; color: #B3261E; }
.exemplo {
  background: var(--fundo); border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 12px; overflow-x: auto; font-size: 12.5px; line-height: 1.6;
  font-family: ui-monospace, SFMono-Regular, monospace;
}

/* ---------- lateral em tela estreita (I4) ---------- */
/* Em tela larga o botao e o fundo nao existem: a lateral e coluna fixa. */
.abrir-lateral, .fundo-lateral { display: none; }

@media (max-width: 860px) {
  /* A lateral nao some mais: vira gaveta sobreposta. `visibility` (e nao so o
     translate) e o que a tira da ordem de tabulacao enquanto esta fechada. */
  #lateral {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 30;
    visibility: hidden; transform: translateX(-100%);
    transition: transform .18s ease, visibility .18s ease;
    box-shadow: 0 0 28px rgba(0,0,0,.22);
  }
  body.lateral-aberta #lateral { visibility: visible; transform: none; }

  .abrir-lateral {
    display: block; position: fixed; top: 10px; left: 10px; z-index: 40;
    background: var(--superficie); color: var(--texto);
    border: 1px solid var(--borda); border-radius: 9px;
    padding: 6px 11px; font: inherit; font-size: 17px; line-height: 1.2; cursor: pointer;
  }
  .abrir-lateral:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
  body.lateral-aberta .abrir-lateral { left: calc(var(--lateral-largura) + 10px); }

  .fundo-lateral { position: fixed; inset: 0; z-index: 25; background: rgba(0,0,0,.35); }
  body.lateral-aberta .fundo-lateral { display: block; }

  /* Espaco para o botao flutuante nao cobrir o conteudo. */
  #inicial { padding-top: 62px; }
  #mensagens { padding-top: 58px; }
}

/* Abaixo da largura da propria gaveta (~390px e menos), ela ocupa quase a tela toda e o
   botao nao cabe ao lado — ele volta para dentro do fluxo visual, sobre o fundo escuro. */
@media (max-width: 340px) {
  #lateral { width: 86vw; flex-basis: 86vw; }
  body.lateral-aberta .abrir-lateral { left: auto; right: 10px; }
}

/* Ficha do tribunal: se a busca por magistrado existe ali. Um portal sem esse filtro
   (TJPR, entre outros) parecia busca quebrada enquanto a tela nao dizia nada. */
.painel .nota.magistrado { margin-top: 14px; font-size: 13.5px; }
.painel .nota.magistrado small { display: block; margin-top: 4px; color: var(--fraco); font-size: 12.5px; }

/* Conversa cujo turno continua rodando no servidor. O turno sobrevive ao navegador
   fechar (servidor/turnos.js): sem este indicador, uma conversa respondendo fica
   indistinguivel de uma parada, e o usuario conclui que ela morreu. */
.conversa-item .em-andamento {
  flex: 0 0 auto; width: 11px; height: 11px; border-radius: 50%;
  border: 2px solid var(--borda); border-top-color: var(--acento);
  animation: jur-girar .9s linear infinite;
}
@keyframes jur-girar { to { transform: rotate(360deg); } }
/* Quem pede menos movimento continua vendo o estado — so nao ve a animacao. */
@media (prefers-reduced-motion: reduce) {
  .conversa-item .em-andamento { animation: none; border-top-color: var(--acento); border-right-color: var(--acento); }
}

/* ---------- painel de decisões ---------- */
/* Duas geometrias, e a escolha é de espaço, não de gosto: acima de 1100px o painel é um
   irmão do centro no flex do body — ele EMPURRA a conversa em vez de cobri-la, que é o
   ponto (ler o julgado ao lado do que o modelo disse dele). Abaixo disso não há largura
   para dividir, e ele vira gaveta sobreposta, como o drawer de intimações do ProcStudio. */
#decisoes {
  position: fixed; inset: 0 0 0 auto; z-index: 20;
  width: min(560px, 100%);
  display: flex; flex-direction: column;
  background: var(--superficie); border-left: 1px solid var(--borda);
  box-shadow: -8px 0 24px rgba(0,0,0,.10);
}
#decisoes[hidden] { display: none; }
.fundo-decisoes { position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 19; }
.fundo-decisoes[hidden] { display: none; }

@media (min-width: 1100px) {
  #decisoes {
    position: static; inset: auto; z-index: auto;
    flex: 0 0 420px; width: 420px; box-shadow: none;
  }
  /* Ancorado, não há o que fechar por trás: o fundo só existe na versão sobreposta. */
  .fundo-decisoes { display: none; }
}

.abrir-decisoes {
  position: absolute; top: 12px; right: 16px; z-index: 5;
  font: inherit; font-size: 12.5px; padding: 5px 11px; border-radius: 999px; cursor: pointer;
  background: var(--superficie); color: var(--fraco);
  border: 1px solid var(--borda);
}
.abrir-decisoes:hover { border-color: var(--acento); color: var(--texto); }
.abrir-decisoes[aria-expanded="true"] { background: var(--acento); border-color: var(--acento); color: #fff; }
.abrir-decisoes[hidden] { display: none; }

.decisoes-topo {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; border-bottom: 1px solid var(--borda); flex: 0 0 auto;
}
.decisoes-topo h2 { margin: 0; font-size: 15px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.decisoes-topo .fechar {
  background: none; border: 0; color: var(--fraco); font-size: 20px; line-height: 1;
  cursor: pointer; padding: 0 4px;
}
.decisoes-topo .fechar:hover { color: var(--texto); }
.decisoes-corpo { flex: 1; overflow-y: auto; padding: 12px 16px 24px; }

.busca-item {
  display: flex; flex-direction: column; gap: 3px; width: 100%; text-align: left;
  font: inherit; cursor: pointer; margin-bottom: 8px;
  padding: 10px 12px; border-radius: var(--raio);
  background: var(--fundo); color: var(--texto); border: 1px solid var(--borda);
}
.busca-item:hover { border-color: var(--acento); }
.busca-linha { display: flex; align-items: baseline; gap: 8px; }
.busca-sigla { font-family: ui-monospace, SFMono-Regular, monospace; font-size: 12.5px; text-transform: uppercase; }
.busca-total { margin-left: auto; font-size: 12px; color: var(--fraco); }
.busca-item[data-status="erro"] .busca-total { color: #B3261E; }
.busca-query { font-size: 13px; color: var(--fraco); overflow-wrap: anywhere; }
.busca-aviso { font-size: 12px; color: #B3261E; }

.julgado { padding: 12px 0; border-top: 1px solid var(--borda); }
.julgado h3 { margin: 0 0 4px; font-size: 13.5px; font-family: ui-monospace, SFMono-Regular, monospace; }
.julgado-meta { margin: 0 0 6px; font-size: 12px; color: var(--fraco); }
.julgado-texto { margin: 0 0 8px; font-size: 13.5px; line-height: 1.55; overflow-wrap: anywhere; }
.julgado-link { font-size: 12.5px; color: var(--acento); }
.julgado-bruto summary { font-size: 12px; color: var(--fraco); cursor: pointer; }
.julgado-bruto pre {
  margin: 6px 0 0; padding: 10px; overflow-x: auto; font-size: 11.5px;
  background: var(--lateral); border: 1px solid var(--borda); border-radius: 8px;
}
.decisoes-mais { display: block; margin: 14px auto 0; }
.decisoes-erro { color: #B3261E; font-size: 13.5px; line-height: 1.55; }
/* Zero resultados NÃO é "não existe jurisprudência" — mesma regra do resto do sistema,
   e aqui ela precisa ocupar espaço na tela, não uma nota de rodapé. */
.decisoes-vazio {
  border: 1px solid var(--instavel); border-radius: var(--raio);
  padding: 12px 14px; font-size: 13.5px; line-height: 1.55;
}
.decisoes-vazio p { margin: 0 0 8px; }
.decisoes-vazio p:last-child { margin: 0; color: var(--fraco); }