/* A janela do PrimoCode.
 *
 * "Um aplicativo desktop bem bonito com as cores do PrimoCode, com aquele
 *  azul. Bem estilo Codex. Um chat estilo terminal para quem não quer o
 *  terminal."
 *
 * As cores não foram escolhidas aqui: são as mesmas de lib/ui.js, que já vêm
 * do design system do produto. cyan-400 é o azul do PrimoCode; slate é a
 * neutra; amber avisa e rose reprova. Repetir o terminal na tela não é falta
 * de imaginação — é o que faz as duas telas serem o MESMO produto.
 */

:root {
  --azul:       #22d3ee;   /* cyan-400  — a marca */
  --azul-fundo: #0891b2;   /* cyan-600  — a mesma cor recuando */
  --texto:      #e2e8f0;   /* slate-200 */
  --fraco:      #94a3b8;   /* slate-400 */
  --apagado:    #64748b;   /* slate-500 */
  --alerta:     #fbbf24;   /* amber-400 */
  --falha:      #fb7185;   /* rose-400  */

  --fundo:      #0a0f16;
  --painel:     #0f1620;
  --borda:      #1e293b;
  --borda-viva: #24384f;

  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Mono", Menlo,
          Consolas, "Liberation Mono", monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;

  /* A barra lateral e o diálogo de configurações. Nomes novos, mesma
     família de cores — nada aqui inventa cor: tudo sai das de cima. */
  --barra:      #0b1119;
  --alto:       #16202c;
  --largura-lado: 262px;
}

/* Tema claro. Só os TOKENS mudam; nenhuma regra abaixo sabe que ele existe,
   e é isso que faz o tema inteiro caber em vinte linhas. */
html[data-tema="claro"] {
  --azul:       #0e7490;
  --azul-fundo: #0891b2;
  --texto:      #0f1922;
  --fraco:      #46596b;
  --apagado:    #7b8fa1;
  --fundo:      #f4f7f9;
  --painel:     #ffffff;
  --borda:      #d5e0e7;
  --borda-viva: #b7c8d3;
  --barra:      #eef3f6;
  --alto:       #e3ebf0;
}
/* A cor de acento escolhida nas configurações. */
html[data-cor="verde"] { --azul:#34d399; --azul-fundo:#10b981; }
html[data-cor="roxo"]  { --azul:#a78bfa; --azul-fundo:#8b5cf6; }
html[data-cor="ambar"] { --azul:#fbbf24; --azul-fundo:#d97706; }
html[data-cor="rosa"]  { --azul:#fb7185; --azul-fundo:#e11d48; }

* { box-sizing: border-box; }

/* `display:flex` e `display:grid` nas regras abaixo ganham do `[hidden]` do
   navegador, que é só `display:none` sem peso nenhum. O resultado era o botão
   de parar e o "trabalhando" aparecendo com o agente parado — a janela dizia
   que estava fazendo alguma coisa o tempo todo. */
[hidden] { display: none !important; }

html, body {
  height: 100%;
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--sans);
  font-size: 14px;
  overflow: hidden;
}

body {
  /* O brilho azul atrás de tudo. Um só, bem aberto e bem fraco: dá
     profundidade sem virar papel de parede. */
  background-image:
    radial-gradient(120% 80% at 50% -20%, rgba(34, 211, 238, .08), transparent 62%);
}

/* ── a mesma planta da página /code do Conecta ──────────────────────────
   Barra lateral fixa à esquerda, conversa ocupando o resto. As duas telas
   são o mesmo produto e têm de ser reconhecíveis uma na outra no primeiro
   olhar — quem sai do terminal para a janela ou do celular para a janela
   não pode ter de reaprender onde ficam as coisas. */
.tela { display: flex; height: 100%; }
.lado {
  width: var(--largura-lado); flex: 0 0 var(--largura-lado);
  background: var(--barra); border-right: 1px solid var(--borda);
  display: flex; flex-direction: column; min-height: 0;
  -webkit-app-region: drag;
}
.lado button, .lado .chip { -webkit-app-region: no-drag; }
.lado-topo { padding: 14px 12px 10px; display: flex; flex-direction: column; gap: 12px; }
.marca-linha { display: flex; align-items: center; gap: 9px; padding: 0 4px; }
.marca-linha .nome { font-weight: 620; letter-spacing: -.01em; }
.marca-linha .versao { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--apagado); }

.novo {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 9px 12px; border-radius: 9px; cursor: pointer;
  background: var(--alto); border: 1px solid var(--borda-viva);
  color: inherit; font: inherit; font-size: 13.5px; font-weight: 500;
  transition: border-color .15s;
}
.novo:hover { border-color: var(--azul); }

.rotulo { padding: 14px 16px 6px; font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--apagado); }
.recentes { flex: 1 1 0; min-height: 0; overflow-y: auto; padding: 0 8px 8px; }
.item {
  display: block; width: 100%; text-align: left; padding: 8px 10px; cursor: pointer;
  border: 0; background: none; color: var(--fraco); font: inherit; font-size: 13px;
  border-radius: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.item:hover { background: var(--alto); color: var(--texto); }
.item[aria-current="true"] { background: var(--alto); color: var(--texto); font-weight: 500; }
.item .quando { display: block; font-size: 11px; color: var(--apagado); font-family: var(--mono); }
.vazio-lista { padding: 6px 12px; font-size: 12.5px; color: var(--apagado); line-height: 1.5; }
.vazio-lista code { font-family: var(--mono); color: var(--azul); }

.lado-pe { border-top: 1px solid var(--borda); padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.pe-btn {
  display: flex; align-items: center; gap: 9px; padding: 8px 10px; cursor: pointer;
  border: 0; background: none; color: var(--fraco); font: inherit; font-size: 13.5px;
  border-radius: 8px; width: 100%; text-align: left;
}
.pe-btn:hover { background: var(--alto); color: var(--texto); }
.chips { display: flex; flex-wrap: wrap; gap: 5px; padding: 0 4px 2px; }
.chip {
  font-family: var(--mono); font-size: 11px; color: var(--fraco);
  background: var(--alto); border: 1px solid var(--borda);
  border-radius: 6px; padding: 2px 7px;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chip:empty { display: none; }

.conversa { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.rolo { flex: 1 1 0; overflow-y: auto; scroll-behavior: smooth; }
.rolo::-webkit-scrollbar { width: 10px; }
.rolo::-webkit-scrollbar-thumb { background: #1c2836; border-radius: 8px; border: 3px solid var(--fundo); }
.tira { max-width: 860px; margin: 0 auto; padding: 26px 22px 40px; }

.vazio { display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 9vh 22px 0; text-align: center; }
.vazio h1 { font-size: 26px; font-weight: 620; letter-spacing: -.025em; margin: 4px 0 0; }
.vazio p { color: var(--fraco); max-width: 460px; margin: 0; line-height: 1.6; }
.sugestoes { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 6px; }
.sugestao {
  font: inherit; font-size: 13px; color: var(--fraco); cursor: pointer;
  background: var(--painel); border: 1px solid var(--borda);
  border-radius: 999px; padding: 7px 15px;
  transition: border-color .16s, color .16s, transform .16s;
}
.sugestao:hover { color: var(--texto); border-color: var(--azul); transform: translateY(-1px); }

/* "trabalhando", com o ponto que pulsa. Fica ACIMA do campo, para não
   empurrar o texto que a pessoa está digitando. */
#pensando {
  max-width: 860px; margin: 0 auto 9px; display: flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 12px; color: var(--apagado);
}
.pulso {
  width: 8px; height: 8px; border-radius: 50%; background: var(--azul);
  box-shadow: 0 0 0 0 rgba(34, 211, 238, .55);
}
@media (prefers-reduced-motion: no-preference) {
  .pulso { animation: bater 1.4s ease-out infinite; }
  @keyframes bater {
    to { box-shadow: 0 0 0 9px rgba(34, 211, 238, 0); }
  }
}
.dica {
  max-width: 860px; margin: 8px auto 0;
  color: var(--apagado); font-size: 11.5px; text-align: center;
}

.rodape { border-top: 1px solid var(--borda); background: rgba(10, 15, 22, .82);
  backdrop-filter: blur(14px); padding: 12px 22px 14px; }
html[data-tema="claro"] .rodape { background: rgba(255, 255, 255, .85); }
.caixa { max-width: 860px; margin: 0 auto; display: flex; align-items: flex-end; gap: 10px; }
.campo-volta {
  flex: 1 1 auto; display: flex; align-items: flex-end; gap: 8px;
  background: var(--painel); border: 1px solid var(--borda-viva); border-radius: 12px;
  padding: 9px 12px; transition: border-color .15s;
}
.campo-volta:focus-within { border-color: var(--azul); }
.chevron { font-family: var(--mono); color: var(--azul); font-weight: 600; padding-bottom: 1px; }
/* O textarea entrega a moldura para a `.campo-volta`. Sem isto ele desenha a
   caixa DELE dentro da caixa de fora — duas bordas, uma dentro da outra. */
#campo {
  flex: 1 1 auto; background: none; border: 0; outline: none; color: inherit;
  resize: none; font-family: var(--mono); font-size: 13.5px; line-height: 1.6;
  max-height: 190px; padding: 0;
}
#campo::placeholder { color: var(--apagado); }
.enviar {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; cursor: pointer;
  display: grid; place-items: center; border: 0;
  background: var(--azul); color: #04252c; transition: background .16s, opacity .16s;
}
html[data-tema="claro"] .enviar { color: #fff; }
.enviar:disabled { background: #16323d; color: #3f6472; cursor: default; }
.enviar.parar { background: rgba(251, 113, 133, .14); color: var(--falha); }

/* ── configurações ──────────────────────────────────────────────────── */
dialog {
  border: 1px solid var(--borda-viva); border-radius: 14px; padding: 0;
  background: var(--painel); color: var(--texto); max-width: 440px; width: calc(100% - 32px);
}
dialog::backdrop { background: rgba(4, 8, 12, .62); }
.dlg-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 17px; border-bottom: 1px solid var(--borda); }
.dlg-topo h2 { margin: 0; font-size: 15.5px; font-weight: 620; }
.dlg-corpo { padding: 15px 17px 19px; display: flex; flex-direction: column; gap: 19px; }
.grupo > h3 { margin: 0 0 9px; font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--apagado); font-weight: 500; }
.opcoes { display: flex; gap: 8px; flex-wrap: wrap; }
.opcao, .copiar {
  padding: 7px 14px; border-radius: 8px; cursor: pointer; font: inherit; font-size: 13px;
  border: 1px solid var(--borda-viva); background: none; color: var(--fraco);
}
.opcao[aria-pressed="true"] { border-color: var(--azul); color: var(--texto); }
.copiar { padding: 4px 10px; font-size: 12px; }
.cores { display: flex; gap: 10px; }
.cor { width: 30px; height: 30px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; }
.cor[aria-pressed="true"] { border-color: var(--texto); }
.linha-info { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; color: var(--fraco); }
.linha-info b { color: var(--texto); font-weight: 500; }
.dlg-corpo code { font-family: var(--mono); color: var(--azul); }

/* ── conversa ───────────────────────────────────────────────────────────── */

#rolo { overflow-y: auto; scroll-behavior: smooth; }
#rolo::-webkit-scrollbar { width: 10px; }
#rolo::-webkit-scrollbar-thumb { background: #1c2836; border-radius: 8px; border: 3px solid var(--fundo); }

#conversa { max-width: 860px; margin: 0 auto; padding: 26px 22px 40px; }

/* O que o usuário disse: bolha à direita, curta, com a marca de lado. */
.voce {
  margin: 24px 0 14px; display: flex; justify-content: flex-end;
}
.voce > div {
  background: linear-gradient(180deg, rgba(34,211,238,.12), rgba(34,211,238,.07));
  border: 1px solid rgba(34, 211, 238, .28);
  border-radius: 14px 14px 4px 14px;
  padding: 10px 15px; max-width: 78%;
  white-space: pre-wrap; word-break: break-word; line-height: 1.55;
}

/* A saída do agente: monoespaçada, como no terminal, porque É a saída do
   terminal — as mesmas linhas, as mesmas cores. */
.saida {
  font-family: var(--mono); font-size: 12.8px; line-height: 1.62;
  white-space: pre-wrap; word-break: break-word;
  color: var(--texto); margin: 0;
}
.saida a { color: var(--azul); }

/* As cores ANSI, traduzidas. Os números são os do lib/ui.js. */
.c45  { color: var(--azul); }
.c31  { color: var(--azul-fundo); }
.c254 { color: var(--texto); }
.c247 { color: var(--fraco); }
.c243 { color: var(--apagado); }
.c214 { color: var(--alerta); }
.c204 { color: var(--falha); }
.forte { font-weight: 650; }

.aviso-erro {
  margin: 14px 0; padding: 10px 14px; line-height: 1.55;
  color: var(--falha); background: rgba(251, 113, 133, .08);
  border: 1px solid rgba(251, 113, 133, .26); border-radius: 10px;
}

/* ── arrastar arquivo ───────────────────────────────────────────────────── */

#alvo-solto {
  position: fixed; inset: 0; display: none; place-items: center;
  background: rgba(6, 10, 16, .82); backdrop-filter: blur(3px); z-index: 40;
}
body.soltando #alvo-solto { display: grid; }
#alvo-solto > div {
  border: 2px dashed rgba(34, 211, 238, .55); border-radius: 18px;
  padding: 44px 62px; text-align: center; color: var(--azul);
  display: grid; gap: 6px;
}
#alvo-solto span { color: var(--fraco); font-size: 13px; }

@media (max-width: 760px) {
  /* Janela estreita: a barra lateral sai da frente. O botão de novo chat e o
     histórico continuam alcançáveis pelo terminal (/rc de novo, /conversas). */
  .lado { display: none; }
  .tira, .caixa { max-width: none; }
}