/* =========================================================================
   Console 9router — folha de estilo

   Duas decisões que valem pra tudo abaixo:

   1) ESCALA. Espaçamento, raio e altura de controle saem de variáveis. Antes
      havia 8, 10, 12, 14 e 16px misturados sem critério — e o resultado é o que
      parecia: desalinhado sem que se soubesse apontar onde.

   2) COR COM SIGNIFICADO. Azul é ação e foco; verde, âmbar e vermelho carregam
      sentido fixo (respondeu / inferência / falhou). Nada é colorido só pra
      enfeitar: em tela escura, cor à toa vira ruído.
   ========================================================================= */

:root {
  /* superfícies, do fundo pra frente */
  --fundo: #0d0f14;
  --superficie: #151922;
  --superficie-2: #1c212c;
  --superficie-3: #232936;
  --borda: #2b3240;
  --borda-forte: #3a4354;

  --texto: #e8eaf0;
  --texto-fraco: #98a1b3;
  --texto-fraquissimo: #6b7488;

  --destaque: #6ea8fe;
  --destaque-forte: #4d8ef7;
  --destaque-fraco: rgba(110, 168, 254, 0.14);

  --ok: #3ddc84;
  --ok-fraco: rgba(61, 220, 132, 0.13);
  --erro: #ff6b6b;
  --erro-fraco: rgba(255, 107, 107, 0.13);
  --aviso: #ffb454;
  --aviso-fraco: rgba(255, 180, 84, 0.13);

  /* escala de espaçamento */
  --e1: 4px;
  --e2: 8px;
  --e3: 12px;
  --e4: 16px;
  --e5: 24px;
  --e6: 32px;

  --raio-p: 8px;
  --raio: 12px;
  --raio-g: 16px;
  --pilula: 999px;

  --altura-topo: 56px;
  --altura-controle: 38px;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 15px/1.55 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.oculto { display: none !important; }
.sutil { color: var(--texto-fraco); }
.pequeno { font-size: 12px; line-height: 1.45; }
.erro { color: var(--erro); }

/* O nome do produto ganha gradiente — é o único lugar decorativo da interface,
   e serve pra dar identidade sem poluir o resto. */
.destaque {
  background: linear-gradient(92deg, var(--destaque) 0%, #a78bfa 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------------------------------------------------------------- entrada */
.portao {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--e4);
  /* Brilho suave atrás do cartão: profundidade sem desenhar nada. */
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(110, 168, 254, 0.10), transparent 70%),
    var(--fundo);
}
.cartao-entrada {
  width: 100%;
  max-width: 380px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-g);
  padding: var(--e6) var(--e5);
  display: flex;
  flex-direction: column;
  gap: var(--e3);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}
.cartao-entrada h1 { margin: 0; font-size: 24px; letter-spacing: -0.02em; }
.cartao-entrada > p:first-of-type { margin: 0 0 var(--e1); }
.cartao-entrada .pequeno { margin: var(--e2) 0 0; }

/* ------------------------------------------------------------- estrutura */
.topo {
  display: flex;
  align-items: center;
  gap: var(--e4);
  height: var(--altura-topo);
  padding: 0 var(--e4);
  background: var(--superficie);
  border-bottom: 1px solid var(--borda);
  position: sticky;
  top: 0;
  z-index: 10;
}
.marca {
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
/* nowrap + shrink 0: o cabeçalho quebrava em duas linhas e comia altura útil. */
.abas { display: flex; gap: var(--e1); margin: 0 auto; flex-shrink: 0; }
.aba {
  background: transparent;
  border: 1px solid transparent;
  color: var(--texto-fraco);
  padding: 7px 16px;
  border-radius: var(--pilula);
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  height: auto;
  transition: color 0.15s, background 0.15s;
}
.aba:hover { color: var(--texto); background: var(--superficie-2); }
.aba.ativa {
  color: var(--destaque);
  background: var(--destaque-fraco);
  border-color: rgba(110, 168, 254, 0.28);
}
#contador-modelos { white-space: nowrap; flex-shrink: 0; }

.corpo {
  display: flex;
  align-items: stretch;
  height: calc(100vh - var(--altura-topo));
}
/* O conteúdo rola por dentro, não a página: cabeçalho e lateral ficam sempre no
   lugar, que é o que se espera de um console. */
.conteudo { flex: 1; min-width: 0; overflow-y: auto; }

.painel { display: none; padding: var(--e5); max-width: 980px; margin: 0 auto; }
.painel.ativo { display: block; }
/* Conversar é o único painel que precisa da altura toda: entrada colada embaixo. */
.painel[data-painel='chat'].ativo {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* ---------------------------------------------------------------- lateral */
.lateral {
  width: 236px;
  flex-shrink: 0;
  border-right: 1px solid var(--borda);
  background: var(--superficie);
  padding: var(--e3);
  overflow-y: auto;
}
.largura-total { width: 100%; }
#nova-conversa {
  /* Discreto de propósito: é atalho frequente, não o assunto da tela. */
  background: var(--superficie-2);
  color: var(--texto);
  border: 1px solid var(--borda-forte);
  font-size: 13px;
}
#nova-conversa:hover { border-color: var(--destaque); color: var(--destaque); filter: none; }

.lista-conversas { margin-top: var(--e3); display: flex; flex-direction: column; gap: 2px; }
.item-conversa {
  display: flex;
  align-items: center;
  gap: var(--e2);
  padding: 8px 10px;
  border-radius: var(--raio-p);
  cursor: pointer;
  font-size: 13px;
  color: var(--texto-fraco);
  border-left: 2px solid transparent;
  transition: background 0.12s, color 0.12s;
}
.item-conversa:hover { background: var(--superficie-2); color: var(--texto); }
.item-conversa.ativa {
  background: var(--superficie-2);
  border-left-color: var(--destaque);
  color: var(--texto);
}
.item-conversa .titulo { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* -------------------------------------------------------------- controles */
.barra { display: flex; gap: var(--e2); margin-bottom: var(--e3); flex-wrap: wrap; align-items: center; }

.campo, input, select, textarea, button {
  font: inherit;
  color: var(--texto);
  background: var(--superficie-2);
  border: 1px solid var(--borda);
  border-radius: var(--raio-p);
  padding: 0 var(--e3);
  height: var(--altura-controle);
}
textarea {
  width: 100%;
  resize: vertical;
  font-family: inherit;
  height: auto;
  padding: 10px var(--e3);
  line-height: 1.5;
}
.campo { flex: 1; min-width: 170px; }
/* O seletor de modelo encolhe mais que os outros campos: com min-width alto, a
   barra quebrava e a engrenagem sobrava sozinha numa linha. O nome do modelo
   pode truncar — ele está escrito por extenso logo abaixo, na assinatura. */
#chat-modelo { min-width: 110px; }
select { cursor: pointer; }

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--destaque);
  box-shadow: 0 0 0 3px var(--destaque-fraco);
}

button {
  background: var(--destaque);
  color: #0a0f1c;
  border-color: transparent;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: filter 0.12s, transform 0.06s, border-color 0.12s, color 0.12s;
}
button:hover { filter: brightness(1.08); }
button:active { transform: translateY(1px); }
button:disabled { opacity: 0.45; cursor: default; transform: none; }
button.secundario {
  background: var(--superficie-2);
  color: var(--texto);
  border-color: var(--borda-forte);
  font-weight: 500;
}
button.secundario:hover { border-color: var(--destaque); color: var(--destaque); filter: none; }
button.perigo { background: transparent; color: var(--erro); border-color: var(--borda-forte); }
button.perigo:hover { background: var(--erro-fraco); filter: none; }

.icone {
  background: var(--superficie-2);
  border: 1px solid var(--borda);
  color: var(--texto-fraco);
  width: var(--altura-controle);
  padding: 0;
  font-size: 15px;
  flex-shrink: 0;
}
.icone:hover { color: var(--texto); border-color: var(--borda-forte); filter: none; }
.mini {
  background: transparent;
  border: 0;
  color: var(--texto-fraquissimo);
  font-size: 12px;
  padding: 2px 6px;
  height: auto;
  cursor: pointer;
  font-weight: 500;
}
.mini:hover { color: var(--destaque); filter: none; }

.alternador {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  font-size: 13px;
  color: var(--texto-fraco);
  background: var(--superficie-2);
  border: 1px solid var(--borda);
  border-radius: var(--raio-p);
  padding: 0 var(--e3);
  height: var(--altura-controle);
  cursor: pointer;
  white-space: nowrap;
}
/* O alternador ligado muda de cor: sem isso, "Modelo automático" ativo e
   inativo pareciam a mesma coisa. */
.alternador:has(input:checked) {
  color: var(--destaque);
  border-color: rgba(110, 168, 254, 0.4);
  background: var(--destaque-fraco);
}
.alternador input { width: 15px; height: 15px; accent-color: var(--destaque); padding: 0; }

.ajustes {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: var(--e4);
  margin-bottom: var(--e3);
  display: flex;
  flex-direction: column;
  gap: var(--e3);
}
.ajustes label { display: flex; flex-direction: column; gap: var(--e1); font-size: 13px; color: var(--texto-fraco); }
.linha-ajustes { display: flex; gap: var(--e5); flex-wrap: wrap; }
.linha-ajustes label { flex: 1; min-width: 170px; }
input[type='range'] { padding: 0; height: 26px; accent-color: var(--destaque); background: transparent; border: 0; }

/* ------------------------------------------------------------- sugestões */
.sugestoes {
  background: var(--superficie);
  border: 1px solid rgba(110, 168, 254, 0.35);
  border-radius: var(--raio);
  padding: var(--e3) var(--e4);
  margin-bottom: var(--e3);
}
.sugestoes > p:first-child { margin-top: 0; }
.sugestao {
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: var(--e2) 0;
  flex-wrap: wrap;
  border-top: 1px solid var(--borda);
}
.sugestao:first-of-type { border-top: 0; }
.sugestao .id { font-size: 13px; word-break: break-all; font-weight: 500; }
.sugestao button { height: 28px; padding: 0 12px; font-size: 12px; }

/* -------------------------------------------------------------- conversa */
.historico {
  flex: 1;
  min-height: 200px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--e3);
  padding: var(--e1) 0 var(--e4);
}
.balao {
  padding: var(--e3) var(--e4);
  border-radius: var(--raio);
  max-width: 82%;
  word-break: break-word;
  font-size: 14.5px;
}
.balao.usuario {
  align-self: flex-end;
  background: var(--destaque-forte);
  color: #06101f;
  border-bottom-right-radius: var(--e1);
  font-weight: 500;
}
.balao.modelo, .balao.falha {
  align-self: flex-start;
  max-width: 92%;
  border-bottom-left-radius: var(--e1);
}
.balao.modelo { background: var(--superficie); border: 1px solid var(--borda); }
.balao.falha { background: var(--erro-fraco); border: 1px solid rgba(255, 107, 107, 0.4); }
/* pre-wrap só onde o conteúdo é texto cru; no balão do modelo o markdown já
   virou HTML, e pre-wrap duplicaria toda quebra de linha. */
.balao.usuario, .balao.falha { white-space: pre-wrap; }

.assinatura {
  font-size: 11px;
  color: var(--texto-fraquissimo);
  margin-top: var(--e2);
  font-variant-numeric: tabular-nums;
}
.acoes-balao { margin-top: var(--e2); display: flex; gap: var(--e1); opacity: 0; transition: opacity 0.15s; }
.balao:hover .acoes-balao { opacity: 1; }

.linha-envio {
  display: flex;
  gap: var(--e2);
  align-items: flex-end;
  padding-top: var(--e3);
  border-top: 1px solid var(--borda);
}
.linha-envio textarea { flex: 1; }
.botoes-envio { display: flex; flex-direction: column; gap: var(--e2); }
.botoes-envio button { min-width: 92px; }

/* ------------------------------------------------------------ comparação */
.fichas { display: flex; gap: var(--e2); flex-wrap: wrap; margin-bottom: var(--e3); }
.ficha {
  background: var(--destaque-fraco);
  border: 1px solid rgba(110, 168, 254, 0.3);
  color: var(--destaque);
  border-radius: var(--pilula);
  padding: 5px var(--e2) 5px var(--e3);
  font-size: 12.5px;
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  font-weight: 500;
}
.ficha button {
  background: transparent;
  border: 0;
  color: inherit;
  padding: 0 2px;
  font-size: 15px;
  line-height: 1;
  height: auto;
  opacity: 0.65;
}
.ficha button:hover { opacity: 1; filter: none; }

.colunas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: var(--e3);
  margin-top: var(--e4);
}
.coluna {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: var(--e4);
  display: flex;
  flex-direction: column;
}
.coluna h3 { margin: 0 0 var(--e2); font-size: 13px; word-break: break-all; }
.coluna .corpo { word-break: break-word; font-size: 14px; margin-top: var(--e2); }

.selo {
  font-size: 11px;
  padding: 3px 9px;
  border-radius: var(--pilula);
  display: inline-block;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.selo.ok { background: var(--ok-fraco); color: var(--ok); }
.selo.falhou { background: var(--erro-fraco); color: var(--erro); }
.selo.neutro { background: var(--superficie-3); color: var(--texto-fraquissimo); }

/* --------------------------------------------------------------- catálogo */
.lista-modelos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--e2);
}
.item-modelo {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: var(--e3);
  display: flex;
  align-items: center;
  gap: var(--e2);
  transition: border-color 0.12s, background 0.12s;
}
.item-modelo:hover { border-color: var(--borda-forte); background: var(--superficie-2); }
/* Reticências em vez de quebrar no meio da palavra ("qwen3-cod / er-plus").
   O nome inteiro fica no title e na ficha. */
.item-modelo .id {
  font-size: 13px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* As ações só aparecem no hover: 200 cartões cheios de botão viram uma parede. */
.item-modelo .acoes { display: flex; gap: var(--e1); opacity: 0; transition: opacity 0.12s; }
.item-modelo:hover .acoes, .item-modelo:focus-within .acoes { opacity: 1; }
.item-modelo .acoes button { height: 27px; padding: 0 10px; font-size: 12px; }

.estrela {
  background: transparent;
  border: 0;
  color: var(--texto-fraquissimo);
  cursor: pointer;
  font-size: 15px;
  padding: 0;
  width: 20px;
  height: auto;
  flex-shrink: 0;
}
.estrela:hover { color: var(--aviso); filter: none; }
.estrela.marcada { color: var(--aviso); }

/* --------------------------------------------------------------- prompts */
.cartao {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: var(--e4);
  display: flex;
  flex-direction: column;
  gap: var(--e2);
  margin-bottom: var(--e4);
}
.lista-prompts { display: flex; flex-direction: column; gap: var(--e2); }
.item-prompt {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: var(--e4);
}
.item-prompt h4 { margin: 0 0 var(--e1); font-size: 14px; }
.item-prompt p {
  margin: 0 0 var(--e3);
  color: var(--texto-fraco);
  font-size: 13px;
  white-space: pre-wrap;
  max-height: 90px;
  overflow: hidden;
}
.item-prompt .acoes { display: flex; gap: var(--e2); flex-wrap: wrap; }
.item-prompt .acoes button { height: 30px; padding: 0 12px; font-size: 12px; }

/* -------------------------------------------------------- aviso flutuante */
.aviso {
  position: fixed;
  bottom: var(--e5);
  left: 50%;
  transform: translateX(-50%);
  background: var(--superficie-2);
  border: 1px solid var(--aviso);
  color: var(--aviso);
  padding: 11px var(--e5);
  border-radius: var(--pilula);
  font-size: 13.5px;
  z-index: 50;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  max-width: 90vw;
}

.girando { animation: girar 1s linear infinite; display: inline-block; }
@keyframes girar { to { transform: rotate(360deg); } }

/* --------------------------------------------------- markdown na resposta */
.balao h2, .balao h3, .balao h4 { margin: var(--e4) 0 var(--e2); font-size: 15px; }
.balao h2:first-child, .balao h3:first-child, .balao p:first-child { margin-top: 0; }
.balao p { margin: 0 0 var(--e2); }
.balao p:last-child { margin-bottom: 0; }
.balao ul { margin: var(--e2) 0; padding-left: 22px; }
.balao li { margin-bottom: var(--e1); }
.balao code {
  background: rgba(255, 255, 255, 0.07);
  padding: 2px 6px;
  border-radius: 5px;
  font-size: 12.5px;
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  color: #c3d3f5;
}
.bloco-codigo {
  border: 1px solid var(--borda);
  border-radius: var(--raio-p);
  overflow: hidden;
  margin: var(--e3) 0;
  background: #0a0c11;
}
.cabecalho-codigo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--e1) var(--e3);
  background: var(--superficie-2);
  font-size: 11px;
  color: var(--texto-fraquissimo);
  border-bottom: 1px solid var(--borda);
}
.cabecalho-codigo button {
  background: transparent;
  border: 0;
  color: var(--texto-fraquissimo);
  font-size: 11px;
  cursor: pointer;
  padding: 2px 6px;
  height: auto;
  font-weight: 500;
}
.cabecalho-codigo button:hover { color: var(--destaque); filter: none; }
.bloco-codigo pre { margin: 0; padding: var(--e3); overflow-x: auto; }
.bloco-codigo code { background: transparent; padding: 0; font-size: 12.5px; line-height: 1.6; color: #d7e3fb; }

/* ------------------------------------------------------------------ móvel */
@media (max-width: 860px) {
  .abas { margin: 0 0 0 auto; }
  #contador-modelos { display: none; }
  .painel { padding: var(--e4); }
}

@media (max-width: 720px) {
  .lateral {
    position: fixed;
    left: 0;
    top: var(--altura-topo);
    bottom: 0;
    z-index: 20;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    box-shadow: 12px 0 30px rgba(0, 0, 0, 0.4);
  }
  .lateral.aberta { transform: translateX(0); }
  .aba { padding: 7px 11px; font-size: 13px; }
  .balao { max-width: 94%; }
}

/* ------------------------------------------------------- filtros em grade */
/* Duas barras com flex-wrap deixavam um controle órfão por linha (o "Ordenar"
   esticado sozinho, o botão "Testar" embaixo). Grade resolve: cada controle
   ocupa uma célula, e o que sobra distribui em vez de esticar um só. */
.filtros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  gap: var(--e2);
  margin-bottom: var(--e3);
}
.filtros .busca {
  /* A busca é o controle mais usado desta tela: ganha o dobro de espaço. */
  grid-column: span 2;
  min-width: 0;
}
.filtros > * { min-width: 0; }
@media (max-width: 560px) {
  .filtros .busca { grid-column: span 1; }
}