primocode 9.8.0-beta.2 → 9.8.0-beta.20

package/app/app.css

@@ -1,299 +1,500 @@
 /* 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."
+ * O desenho segue o de um app de mesa de agente, cinza e calmo: fundo
+ * neutro, barra lateral um degrau mais clara, compositor mais clara ainda, e
+ * cor só onde ela quer dizer alguma coisa — o laranja do "Acesso completo"
+ * (o agente não pergunta nada, nem antes do que não tem volta), o ciano da
+ * marca no botão de enviar quando há o que enviar, verde e vermelho só nos
+ * números de linha de uma edição.
  *
- * 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.
+ * Tema escuro primeiro, porque é o da janela. O claro redefine SÓ os tokens:
+ * nenhum componente tem cor própria fora do :root, então trocar o tema troca
+ * a tela inteira, não metade dela.
  */
 
 :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; }
+  color-scheme: dark;
+  --fundo: #181818;
+  --lado: #262626;
+  --compositor: #2f2f2f;
+  --barra-projeto: #202020;
+  --elevado: #2a2a2a;
+  --menu: #2b2b2b;
+  --borda: rgba(255, 255, 255, 0.07);
+  --borda-forte: rgba(255, 255, 255, 0.12);
+  --hover: rgba(255, 255, 255, 0.055);
+  --ativo: rgba(255, 255, 255, 0.085);
+  --texto: #ececec;
+  --texto-2: #cfcfcf;
+  --fraco: #8d8d8d;
+  --mais-fraco: #6a6a6a;
+  --balao: #2c2c2c;
+  --codigo: #111111;
+  --marca: #22d3ee;
+  --marca-texto: #06232a;
+  --enviar-off: #34425a;
+  --enviar-off-texto: #8391a8;
+  --laranja: #f08b4f;
+  --mais-linha: #5fcf8a;
+  --menos-linha: #f07a7a;
+  --aviso: #f0b64f;
+  --avatar: #3a6bd6;
+  --sombra: 0 12px 32px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.06);
+  --fonte: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
+  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
+  --largura-lado: 272px;
+  --largura-conversa: 736px;
+  --largura-painel: 44%;
+}
 
-/* `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; }
+:root[data-tema="claro"] {
+  color-scheme: light;
+  --fundo: #ffffff;
+  --lado: #f4f4f3;
+  --compositor: #ffffff;
+  --barra-projeto: #f4f4f3;
+  --elevado: #f7f7f6;
+  --menu: #ffffff;
+  --borda: rgba(0, 0, 0, 0.08);
+  --borda-forte: rgba(0, 0, 0, 0.14);
+  --hover: rgba(0, 0, 0, 0.045);
+  --ativo: rgba(0, 0, 0, 0.07);
+  --texto: #1d1d1d;
+  --texto-2: #3a3a3a;
+  --fraco: #6f6f6f;
+  --mais-fraco: #9a9a9a;
+  --balao: #f1f1f0;
+  --codigo: #f6f6f5;
+  --marca: #0e7490;
+  --marca-texto: #ffffff;
+  --enviar-off: #d9dde6;
+  --enviar-off-texto: #8a93a4;
+  --laranja: #c75a17;
+  --mais-linha: #1a7f45;
+  --menos-linha: #c23a3a;
+  --aviso: #9a6200;
+  --sombra: 0 12px 32px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.08);
+}
 
-html, body {
-  height: 100%;
+* { box-sizing: border-box; }
+html, body { height: 100%; }
+body {
   margin: 0;
   background: var(--fundo);
   color: var(--texto);
-  font-family: var(--sans);
-  font-size: 14px;
+  font: 14px/1.45 var(--fonte);
+  -webkit-font-smoothing: antialiased;
   overflow: hidden;
 }
+[hidden] { display: none !important; }
+button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
+button:focus-visible, textarea:focus-visible, input:focus-visible, [tabindex]:focus-visible {
+  outline: 2px solid var(--marca);
+  outline-offset: 1px;
+}
+.ic {
+  width: 18px; height: 18px; flex: none;
+  fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
+}
+.ic-p { width: 14px; height: 14px; }
+.espaco { flex: 1; }
+.fraco { color: var(--fraco); }
+
+.icone-btn {
+  display: inline-grid; place-items: center;
+  width: 28px; height: 28px; border-radius: 7px;
+  color: var(--fraco);
+}
+.icone-btn:hover { background: var(--hover); color: var(--texto); }
+.icone-btn[aria-pressed="true"] { color: var(--marca); }
+.icone-btn.grande .ic { width: 20px; height: 20px; }
+
+/* ── o esqueleto ───────────────────────────────────────────────────────── */
+
+.app { display: flex; height: 100%; }
 
-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; }
+  width: var(--largura-lado); flex: none;
+  display: flex; flex-direction: column;
+  background: var(--lado);
+  border-right: 1px solid var(--borda);
+  min-height: 0;
+}
+.app.sem-lado .lado { display: none; }
+#btnLadoAbrir { display: none; }
+.app.sem-lado #btnLadoAbrir { display: inline-grid; }
+
+.lado-barra { height: 42px; display: flex; align-items: center; padding: 0 12px; }
+
+.lado-marca {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 0 10px 0 12px; height: 40px;
+}
+.marca-btn {
+  display: inline-flex; align-items: center; gap: 6px;
+  font-size: 17px; font-weight: 600; letter-spacing: -0.01em;
+  padding: 3px 6px; margin-left: -6px; border-radius: 7px;
+}
+.marca-btn .ic { color: var(--fraco); }
+.marca-btn:hover { background: var(--hover); }
+.lado-acoes { display: flex; gap: 4px; }
+
+.busca { padding: 4px 10px 6px; }
+.busca input {
+  width: 100%; height: 30px; padding: 0 10px;
+  background: var(--fundo); color: var(--texto);
+  border: 1px solid var(--borda-forte); border-radius: 8px; font: inherit;
+}
+
+.nav { display: flex; flex-direction: column; gap: 1px; padding: 8px 6px 0; }
+.nav-linha { display: flex; align-items: center; gap: 4px; }
+.nav-linha .nav-item { flex: 1; }
+.nav-linha .icone-btn { margin-right: 6px; }
+.nav-item {
+  display: flex; align-items: center; gap: 11px;
+  height: 31px; padding: 0 9px; border-radius: 8px;
+  color: var(--texto); text-align: left; white-space: nowrap;
+}
+.nav-item .ic { color: var(--texto-2); }
+.nav-item:hover { background: var(--hover); }
+.nav-item.ativo { background: var(--ativo); }
+.nav-item[aria-pressed="true"] { background: var(--ativo); }
+
+.rolagem-lado { flex: 1; min-height: 0; overflow-y: auto; padding: 22px 6px 12px; }
+.secao { color: var(--fraco); padding: 0 9px; height: 30px; display: flex; align-items: center; }
+.lista { display: flex; flex-direction: column; gap: 1px; margin-bottom: 18px; }
+.vazio-lista { color: var(--mais-fraco); padding: 0 9px; height: 34px; display: flex; align-items: center; }
 .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); }
+  display: flex; align-items: center; gap: 8px;
+  height: 31px; padding: 0 9px; border-radius: 8px;
+  color: var(--texto); text-align: left; width: 100%;
+}
+.item:hover { background: var(--hover); color: var(--texto); }
+.item[aria-current="true"] { background: var(--ativo); color: var(--texto); }
+.item .titulo { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.item .quando { color: var(--mais-fraco); font-size: 12px; flex: none; font-variant-numeric: tabular-nums; }
+.item .ic { width: 16px; height: 16px; color: var(--fraco); }
+.dia { color: var(--mais-fraco); font-size: 12px; padding: 8px 9px 2px; }
+
+.lado-pe {
+  display: flex; align-items: center; justify-content: space-between;
+  height: 54px; padding: 0 12px 0 14px; border-top: 1px solid var(--borda);
+}
+.usuario { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--texto-2); font-size: 14.5px; }
+.nome-usuario { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.avatar {
+  width: 20px; height: 20px; border-radius: 50%; flex: none;
+  display: grid; place-items: center;
+  background: var(--avatar); color: #fff; font-size: 8px; font-weight: 600; letter-spacing: 0.02em;
+}
+
+/* ── o centro ──────────────────────────────────────────────────────────── */
+
+.centro { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; }
+.topo {
+  position: absolute; top: 0; left: 0; right: 0; z-index: 2;
+  height: 42px; display: flex; align-items: center; gap: 8px; padding: 0 12px;
+  pointer-events: none;
+}
+.topo > * { pointer-events: auto; }
+.topo-titulo {
+  flex: 1; min-width: 0; text-align: center; color: var(--fraco); font-size: 13px;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; pointer-events: none;
+}
+
+.rolo { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; }
+.vazio {
+  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
+  gap: 22px; padding: 60px 24px 20px;
+}
+.vazio h1 { margin: 0; font-size: 26px; font-weight: 400; letter-spacing: -0.01em; text-wrap: balance; text-align: center; }
+.mascote { color: var(--fraco); display: grid; place-items: center; }
+.mascote.pequeno { color: var(--mais-fraco); }
+
+.chat {
+  width: 100%; max-width: calc(var(--largura-conversa) + 48px); margin: 0 auto;
+  padding: 58px 24px 28px; display: flex; flex-direction: column; gap: 14px;
+}
+
+.msg-voce { display: flex; justify-content: flex-end; }
+.msg-voce .balao {
+  max-width: 76%; background: var(--balao); padding: 9px 15px; border-radius: 18px;
+  white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px; line-height: 1.5;
+}
+
+.msg-primo { font-size: 15px; line-height: 1.62; overflow-wrap: anywhere; color: var(--texto); }
+.msg-primo > :first-child { margin-top: 0; }
+.msg-primo > :last-child { margin-bottom: 0; }
+.msg-primo p { margin: 0 0 10px; }
+.msg-primo h3, .msg-primo h4 { margin: 16px 0 6px; font-size: 15px; font-weight: 600; }
+.msg-primo ul, .msg-primo ol { margin: 0 0 10px; padding-left: 22px; }
+.msg-primo li { margin: 2px 0; }
+.msg-primo code { font-family: var(--mono); font-size: 13px; background: var(--hover); padding: 1px 5px; border-radius: 5px; }
+.msg-primo pre {
+  margin: 0 0 10px; padding: 12px 14px; background: var(--codigo); border: 1px solid var(--borda);
+  border-radius: 10px; overflow-x: auto; font: 12.5px/1.55 var(--mono);
+}
+.msg-primo pre code { background: none; padding: 0; font-size: inherit; }
+
+.pensamento { color: var(--fraco); font-size: 14px; white-space: pre-wrap; }
+.aviso-msg { color: var(--aviso); font-size: 14px; white-space: pre-wrap; }
+.aviso-msg.erro { color: var(--menos-linha); }
+
+/* A linha de ação: pequena, cinza, e só abre quando a pessoa quer. O agente
+   faz dez coisas por pedido; se cada uma ocupasse um bloco, a resposta —
+   que é o que importa — ficaria lá embaixo. */
+.acoes { display: flex; flex-direction: column; gap: 0; }
+.acao { color: var(--fraco); font-size: 13.5px; }
+.acao-linha {
+  display: flex; align-items: center; gap: 8px; width: 100%;
+  min-height: 28px; padding: 3px 8px; margin-left: -8px; border-radius: 7px; text-align: left;
+}
+.acao-linha.abre:hover { background: var(--hover); color: var(--texto-2); }
+.acao-linha:not(.abre) { cursor: default; }
+.acao-linha .ic { width: 16px; height: 16px; }
+.acao-texto { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.acao-texto b { font-weight: 500; color: var(--texto-2); }
+.acao-meta { flex: none; font-variant-numeric: tabular-nums; display: inline-flex; gap: 6px; }
+.acao .mais { color: var(--mais-linha); }
+.acao .menos { color: var(--menos-linha); }
+.acao .ok { color: var(--mais-linha); }
+.acao .falhou { color: var(--aviso); }
+.acao .rodando { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--mais-fraco); border-top-color: var(--texto-2); animation: gira 0.8s linear infinite; }
+.acao-seta { width: 14px; height: 14px; transition: transform 0.15s; opacity: 0; }
+.acao-linha.abre .acao-seta { opacity: 0.8; }
+.acao.aberta .acao-seta { transform: rotate(180deg); }
+.acao-detalhe {
+  margin: 2px 0 8px 24px; padding: 10px 12px; max-height: 280px; overflow: auto;
+  background: var(--codigo); border: 1px solid var(--borda); border-radius: 9px;
+  font: 12px/1.55 var(--mono); color: var(--texto-2); white-space: pre;
+}
+.acao-detalhe .l-mais { color: var(--mais-linha); }
+.acao-detalhe .l-menos { color: var(--menos-linha); }
+.acao.fundo { padding-left: 18px; }
+
+.saida-comando {
+  margin: 0; padding: 12px 14px; background: var(--codigo); border: 1px solid var(--borda);
+  border-radius: 10px; overflow-x: auto; font: 12.5px/1.55 var(--mono); color: var(--texto-2); white-space: pre-wrap;
+}
+
+.trabalhando { display: flex; align-items: center; gap: 10px; color: var(--fraco); font-size: 14px; }
+.trabalhando .pulso {
+  width: 8px; height: 8px; border-radius: 50%; background: var(--marca);
+  animation: pulsa 1.2s ease-in-out infinite;
+}
+.brilho {
+  background: linear-gradient(90deg, var(--fraco) 0%, var(--texto) 50%, var(--fraco) 100%);
+  background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
+  animation: brilha 1.8s linear infinite;
+}
+@keyframes pulsa { 50% { opacity: 0.35; transform: scale(0.8); } }
+@keyframes brilha { to { background-position: -200% 0; } }
+@keyframes gira { to { transform: rotate(360deg); } }
+
+/* ── o terminal ────────────────────────────────────────────────────────── */
+
+.terminal { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 48px 24px 12px; }
+.terminal-topo { display: flex; align-items: center; justify-content: space-between; padding-bottom: 10px; }
+.terminal-topo small { color: var(--fraco); font-size: 12.5px; margin-left: 6px; }
+.terminal-saida {
+  flex: 1; margin: 0; padding: 14px 16px; overflow: auto;
+  background: #0d0d0d; color: #d4d4d4; border: 1px solid var(--borda); border-radius: 12px;
+  font: 12.5px/1.5 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere;
+}
+/* As cores de terminal: as mesmas do PALETTE de lib/ui.js (cubo de 256),
+   no fundo escuro fixo do terminal — por isso literais, não tokens. */
+.c45 { color: #22d3ee; } .c31 { color: #0891b2; } .c254 { color: #e2e8f0; }
+.c247 { color: #94a3b8; } .c243 { color: #64748b; } .c214 { color: #fbbf24; } .c204 { color: #fb7185; }
+.forte { font-weight: 700; }
+
+/* ── o compositor ─────────────────────────────────────────────────────── */
+
+.rodape { flex: none; padding: 0 24px 16px; }
+.compositor-zona { width: 100%; max-width: var(--largura-conversa); margin: 0 auto; }
+.projeto-barra {
+  margin: 0 14px; height: 40px; padding: 0 16px 8px; display: flex; align-items: center;
+  background: var(--barra-projeto); border: 1px solid var(--borda); border-bottom: 0;
+  border-radius: 16px 16px 0 0; margin-bottom: -8px; box-sizing: content-box; padding-top: 0;
+}
+.projeto-btn { display: inline-flex; align-items: center; gap: 9px; color: var(--fraco); font-size: 14px; height: 30px; padding: 0 6px; margin-left: -6px; border-radius: 7px; }
+.projeto-btn:hover { color: var(--texto); background: var(--hover); }
+.projeto-btn .ic { width: 17px; height: 17px; }
+.projeto-btn.tem { color: var(--texto-2); }
+
+.compositor {
+  position: relative; background: var(--compositor); border: 1px solid var(--borda);
+  border-radius: 20px; padding: 13px 12px 10px 14px;
+  display: flex; flex-direction: column; gap: 10px;
+  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
+  container-type: inline-size;
+}
+/* Compositor apertado (painel aberto, janela estreita): o nome técnico do
+   esforço sai primeiro, depois o texto da permissão — os ícones ficam. */
+@container (max-width: 560px) { #esforcoNome { display: none; } }
+@container (max-width: 420px) { .chip-perm span { display: none; } }
+.compositor textarea {
+  width: 100%; min-height: 44px; max-height: 40vh; resize: none; border: 0; outline: 0;
+  background: transparent; color: var(--texto); font: 15px/1.5 var(--fonte); padding: 0 2px;
+}
+.compositor textarea::placeholder { color: var(--mais-fraco); }
+.controles { display: flex; align-items: center; gap: 6px; min-width: 0; }
+.controles > * { flex: none; }
+.controles > .espaco { flex: 1; }
+.controles > .icone-btn:first-child { margin-left: -3px; color: var(--texto-2); }
+
+.chip-perm {
+  flex: 0 1 auto !important; min-width: 0; overflow: hidden;
+  display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 8px; border-radius: 8px;
+  color: var(--fraco); font-size: 14px; margin-left: 6px; white-space: nowrap;
+}
+.chip-perm:hover { background: var(--hover); }
+.chip-perm .ic { width: 17px; height: 17px; }
+.chip-perm span { overflow: hidden; text-overflow: ellipsis; }
+.chip-perm[data-modo="livre"] { color: var(--laranja); }
+
+.seletor {
+  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 8px; border-radius: 8px;
+  color: var(--fraco); font-size: 14px; white-space: nowrap;
+}
+.seletor b { font-weight: 500; color: var(--texto-2); }
+.seletor:hover { background: var(--hover); }
+
 .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; }
+  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; margin-left: 2px;
+  background: var(--marca); color: var(--marca-texto);
+}
+.enviar .ic { width: 17px; height: 17px; stroke-width: 2; }
+.enviar:disabled { background: var(--enviar-off); color: var(--enviar-off-texto); cursor: default; }
+.enviar.parar { background: var(--texto); color: var(--fundo); }
+
+.anexos { display: flex; flex-wrap: wrap; gap: 6px; }
+.anexo {
+  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 6px 0 9px;
+  background: var(--hover); border: 1px solid var(--borda); border-radius: 8px; font-size: 13px; color: var(--texto-2);
+}
+.anexo .ic { width: 14px; height: 14px; }
+.anexo button { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; color: var(--fraco); }
+.anexo button:hover { background: var(--hover); color: var(--texto); }
+
+/* ── o menu flutuante ─────────────────────────────────────────────────── */
+
+.menu {
+  position: fixed; z-index: 20; min-width: 230px; max-width: 340px; max-height: 60vh; overflow-y: auto;
+  background: var(--menu); border-radius: 12px; box-shadow: var(--sombra); padding: 5px;
 }
+.menu-titulo { color: var(--fraco); font-size: 12px; padding: 7px 10px 4px; }
+.menu-item {
+  display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 7px 10px; border-radius: 8px; text-align: left;
+}
+.menu-item:hover, .menu-item:focus-visible { background: var(--hover); outline: 0; }
+.menu-item .ic { width: 16px; height: 16px; margin-top: 1px; color: var(--fraco); }
+.menu-item .rot { flex: 1; min-width: 0; }
+.menu-item .rot span { display: block; color: var(--fraco); font-size: 12.5px; margin-top: 1px; }
+.menu-item .marcado { color: var(--marca); font-size: 13px; }
+.menu-item.laranja, .menu-item.laranja .ic { color: var(--laranja); }
+.menu-sep { height: 1px; background: var(--borda); margin: 5px 4px; }
+.menu-entrada { display: flex; gap: 6px; padding: 6px; }
+.menu-entrada input {
+  flex: 1; min-width: 0; height: 30px; padding: 0 9px; font: inherit; color: var(--texto);
+  background: var(--fundo); border: 1px solid var(--borda-forte); border-radius: 7px;
+}
+.menu-entrada button { padding: 0 10px; border-radius: 7px; background: var(--ativo); }
+
+/* ── o painel da direita ─────────────────────────────────────────────── */
+
+.painel {
+  width: var(--largura-painel); min-width: 340px; max-width: 760px; flex: none;
+  display: flex; flex-direction: column; border-left: 1px solid var(--borda); background: var(--fundo);
+}
+.painel-topo { height: 42px; display: flex; align-items: center; gap: 4px; padding: 0 8px 0 10px; border-bottom: 1px solid var(--borda); }
+.abas { display: flex; gap: 2px; }
+.aba { height: 28px; padding: 0 11px; border-radius: 7px; color: var(--fraco); }
+.aba:hover { color: var(--texto); }
+.aba[aria-selected="true"] { background: var(--ativo); color: var(--texto); }
+.painel-corpo { flex: 1; min-height: 0; position: relative; display: flex; }
+.previa { flex: 1; border: 0; background: #fff; width: 100%; }
+.painel-vazio {
+  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
+  gap: 4px; padding: 24px; text-align: center; background: var(--fundo);
+}
+.painel-vazio p { margin: 0; max-width: 34ch; }
+.painel-vazio .mascote { margin-bottom: 10px; }
+.arquivos { display: grid; grid-template-rows: minmax(120px, 40%) 1fr; }
+.arvore { overflow: auto; padding: 8px 6px; border-bottom: 1px solid var(--borda); font-size: 13px; }
+.no {
+  display: flex; align-items: center; gap: 6px; width: 100%; height: 26px; padding-right: 8px; border-radius: 6px;
+  text-align: left; color: var(--texto-2); white-space: nowrap;
+}
+.no:hover { background: var(--hover); }
+.no[aria-selected="true"] { background: var(--ativo); color: var(--texto); }
+.no .ic { width: 15px; height: 15px; color: var(--fraco); }
+.no .nome { overflow: hidden; text-overflow: ellipsis; }
+.no.mudou .nome::after { content: " •"; color: var(--marca); }
+.visor { display: flex; flex-direction: column; min-height: 0; }
+.visor-topo { padding: 8px 14px; color: var(--fraco); font-size: 12.5px; border-bottom: 1px solid var(--borda); font-family: var(--mono); }
+.visor-texto { flex: 1; margin: 0; padding: 10px 0; overflow: auto; font: 12px/1.6 var(--mono); color: var(--texto-2); counter-reset: l; }
+.visor-texto .ln { display: block; padding: 0 14px 0 0; white-space: pre; }
+.visor-texto .ln::before {
+  counter-increment: l; content: counter(l); display: inline-block; width: 3.4em; margin-right: 12px;
+  text-align: right; color: var(--mais-fraco); user-select: none;
+}
+
+/* ── diálogo ──────────────────────────────────────────────────────────── */
+
+.dialogo {
+  width: min(520px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: 14px;
+  background: var(--menu); color: var(--texto); box-shadow: var(--sombra);
+}
+.dialogo::backdrop { background: rgba(0, 0, 0, 0.5); }
+.dlg-topo { display: flex; align-items: center; justify-content: space-between; padding: 14px 14px 4px 20px; }
+.dlg-topo h2 { margin: 0; font-size: 16px; font-weight: 600; }
+.dlg-corpo { padding: 4px 20px 20px; }
+.dlg-corpo h3 { font-size: 12.5px; font-weight: 500; color: var(--fraco); margin: 14px 0 8px; }
+.dlg-corpo p { margin: 0 0 8px; font-size: 13px; }
+.atalhos { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 0; align-items: center; }
+.atalhos dd { margin: 0; color: var(--texto-2); }
+kbd {
+  font: 12px var(--mono); padding: 2px 6px; border-radius: 5px; background: var(--hover);
+  border: 1px solid var(--borda-forte); color: var(--texto-2);
+}
+.comandos { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
+.comandos button { text-align: left; padding: 7px 10px; border-radius: 8px; font-family: var(--mono); font-size: 13px; }
+.comandos button:hover { background: var(--hover); }
+.comandos span { display: block; font-family: var(--fonte); color: var(--fraco); font-size: 12px; }
+
+/* ── soltar arquivo ───────────────────────────────────────────────────── */
+
+.alvo-solto {
+  position: fixed; inset: 0; z-index: 30; display: none; place-items: center;
+  background: rgba(0, 0, 0, 0.45); pointer-events: none;
+}
+body.soltando .alvo-solto { display: grid; }
+.alvo-solto > div {
+  display: flex; flex-direction: column; gap: 4px; align-items: center; padding: 28px 40px;
+  border: 1.5px dashed var(--marca); border-radius: 18px; background: var(--menu);
+}
+.alvo-solto span { color: var(--fraco); }
+
+/* ── telas estreitas ──────────────────────────────────────────────────
+   Abaixo de 1100px o painel não cabe ao lado da conversa e passa a flutuar
+   por cima; abaixo de 960px a barra lateral também, e começa recolhida. */
+@media (max-width: 960px) {
+  .lado { position: absolute; z-index: 10; top: 0; bottom: 0; left: 0; box-shadow: var(--sombra); }
+}
+@media (max-width: 1100px) {
+  .painel { position: absolute; z-index: 9; top: 0; bottom: 0; right: 0; width: min(560px, 92vw); min-width: 0; box-shadow: var(--sombra); }
+}
+@media (max-width: 640px) {
+  .rodape { padding: 0 12px 12px; }
+  .chat { padding-left: 14px; padding-right: 14px; }
+  .chip-perm span, .seletor span { display: none; }
+  .comandos { grid-template-columns: 1fr; }
+}
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after { animation: none !important; transition: none !important; }
+}
+
+/* A saída de um comando também aparece no chat, sobre o fundo de código do
+   tema — no claro, o "branco de terminal" sumiria. */
+:root[data-tema="claro"] .saida-comando .c254 { color: var(--texto); }
+:root[data-tema="claro"] .saida-comando .c247 { color: var(--fraco); }