primocode 8.32.0 → 8.33.1

package/app/app.css

@@ -27,7 +27,34 @@
   --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; }
 
@@ -48,70 +75,170 @@ html, body {
 }
 
 body {
-  display: grid;
-  grid-template-rows: auto 1fr auto;
   /* 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%);
 }
 
-/* ── topo ───────────────────────────────────────────────────────────────── */
-
-#topo {
-  display: flex; align-items: center; justify-content: space-between;
-  gap: 16px; padding: 11px 18px;
-  border-bottom: 1px solid var(--borda);
-  background: rgba(10, 15, 22, .72);
-  backdrop-filter: blur(14px);
-  /* Na janela do Chrome em modo app não há barra de título: esta faixa é a
-     barra, e precisa poder arrastar a janela. */
+/* ── 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;
-  user-select: none;
 }
-#topo button, #topo .chip { -webkit-app-region: no-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); }
 
-.marca { display: flex; align-items: center; gap: 9px; }
-.logo { width: 19px; height: 19px; color: var(--azul); flex: 0 0 auto; }
-.nome { font-weight: 640; letter-spacing: -.012em; }
-.versao { color: var(--apagado); font-size: 11.5px; font-family: var(--mono); }
+.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); }
 
-.estado { display: flex; gap: 7px; align-items: center; min-width: 0; }
+.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: 11.5px;
-  color: var(--fraco); background: var(--painel);
-  border: 1px solid var(--borda); border-radius: 999px;
-  padding: 3px 10px; white-space: nowrap;
-  max-width: 300px; overflow: hidden; text-overflow: ellipsis;
+  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; }
-#modo { color: var(--azul); border-color: var(--borda-viva); }
 
-/* ── conversa ───────────────────────────────────────────────────────────── */
+.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; }
 
-#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; }
-
-.boas-vindas { padding: 12vh 0 0; text-align: center; }
-.boas-vindas h1 {
-  font-size: 27px; font-weight: 620; letter-spacing: -.025em; margin: 0 0 10px;
-}
-.boas-vindas p {
-  color: var(--fraco); max-width: 460px; margin: 0 auto 26px; line-height: 1.6;
-}
-.atalhos { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
-.atalhos button {
+.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;
 }
-.atalhos button:hover {
-  color: var(--texto); border-color: var(--borda-viva); transform: translateY(-1px);
+.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 {
@@ -150,66 +277,6 @@ body {
   border: 1px solid rgba(251, 113, 133, .26); border-radius: 10px;
 }
 
-/* ── barra de baixo ─────────────────────────────────────────────────────── */
-
-#baixo {
-  border-top: 1px solid var(--borda);
-  background: rgba(10, 15, 22, .82);
-  backdrop-filter: blur(14px);
-  padding: 12px 22px 14px;
-}
-
-#pensando {
-  max-width: 860px; margin: 0 auto 9px;
-  display: flex; align-items: center; gap: 9px;
-  color: var(--azul); font-family: var(--mono); font-size: 12.5px;
-}
-.pulso {
-  width: 7px; height: 7px; border-radius: 50%; background: var(--azul);
-  animation: bater 1.15s ease-in-out infinite;
-}
-@keyframes bater {
-  0%, 100% { opacity: .28; transform: scale(.72); }
-  50%      { opacity: 1;   transform: scale(1); }
-}
-
-#forma {
-  max-width: 860px; margin: 0 auto;
-  display: flex; align-items: flex-end; gap: 9px;
-  background: var(--painel);
-  border: 1px solid var(--borda);
-  border-radius: 15px; padding: 8px 8px 8px 15px;
-  transition: border-color .16s, box-shadow .16s;
-}
-#forma:focus-within {
-  border-color: rgba(34, 211, 238, .45);
-  box-shadow: 0 0 0 3px rgba(34, 211, 238, .09);
-}
-
-#campo {
-  flex: 1; font: inherit; font-size: 14.5px; line-height: 1.55;
-  color: var(--texto); background: none; border: 0; outline: 0;
-  resize: none; max-height: 44vh; padding: 6px 0;
-}
-#campo::placeholder { color: var(--apagado); }
-
-#forma button {
-  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px;
-  display: grid; place-items: center; cursor: pointer; border: 0;
-  transition: background .16s, color .16s, opacity .16s;
-}
-#forma button svg { width: 18px; height: 18px; }
-#mandar { background: var(--azul); color: #04252c; }
-#mandar:hover { background: #67e8f9; }
-#mandar:disabled { background: #16323d; color: #3f6472; cursor: default; }
-#parar { background: rgba(251, 113, 133, .14); color: var(--falha); }
-#parar:hover { background: rgba(251, 113, 133, .24); }
-
-.dica {
-  max-width: 860px; margin: 8px auto 0;
-  color: var(--apagado); font-size: 11.5px; text-align: center;
-}
-
 /* ── arrastar arquivo ───────────────────────────────────────────────────── */
 
 #alvo-solto {
@@ -224,7 +291,9 @@ body.soltando #alvo-solto { display: grid; }
 }
 #alvo-solto span { color: var(--fraco); font-size: 13px; }
 
-@media (max-width: 620px) {
-  .estado #pasta { display: none; }
-  #conversa, #forma, #pensando, .dica { max-width: none; }
+@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; }
 }

package/app/app.js

@@ -51,8 +51,20 @@
   }
 
   function limparBoasVindas() {
-    var b = conversa.querySelector(".boas-vindas");
-    if (b) b.remove();
+    var b = document.getElementById("vazio");
+    if (b) b.hidden = true;
+    // A tira das mensagens nasce escondida para a tela vazia poder ocupar o
+    // meio. Esconder uma sem mostrar a outra deixaria a janela em branco na
+    // primeira mensagem — e nada na tela é o pior jeito de responder.
+    var t = document.getElementById("conversa");
+    if (t) t.hidden = false;
+  }
+
+  function voltarAoVazio() {
+    var b = document.getElementById("vazio");
+    var t = document.getElementById("conversa");
+    if (t) { t.innerHTML = ""; t.hidden = true; }
+    if (b) b.hidden = false;
   }
 
   /* ── ANSI → HTML ───────────────────────────────────────────────────────
@@ -162,7 +174,10 @@
     mandar.hidden = ocupado;
     campo.placeholder = ocupado
       ? "ele está trabalhando — pode ir escrevendo o próximo"
-      : "Peça alguma coisa…  (Enter manda, Shift+Enter quebra linha)";
+      // O "Enter manda, Shift+Enter quebra linha" saiu daqui: ele já está
+      // escrito na dica logo abaixo do campo, e dizer a mesma coisa duas
+      // vezes na mesma tela faz a pessoa ler nenhuma das duas.
+      : "Peça alguma coisa…";
   }
 
   /* ── o fluxo ───────────────────────────────────────────────────────────
@@ -218,7 +233,7 @@
     }
   });
 
-  document.querySelectorAll(".atalhos button").forEach(function (b) {
+  document.querySelectorAll(".sugestao").forEach(function (b) {
     b.addEventListener("click", function () { enviar(b.dataset.manda); });
   });
 
@@ -266,6 +281,158 @@
     ajustarAltura();
   });
 
+  /* ── a barra lateral ─────────────────────────────────────────────────
+     Mascote, novo chat, histórico e configurações — a mesma coisa da página
+     /code do Conecta, e de propósito: quem sai de uma tela para a outra não
+     pode ter de reaprender onde ficam as coisas. */
+
+  var CHAVE_TEMA = "primocode_tema";
+  var CHAVE_COR = "primocode_cor";
+  var pego = function (k, p) { try { return localStorage.getItem(k) || p; } catch (e) { return p; } };
+  var guardo = function (k, v) { try { localStorage.setItem(k, v); } catch (e) {} };
+
+  function marcarEscolha(caixaId, atributo, valor) {
+    var caixa = document.getElementById(caixaId);
+    if (!caixa) return;
+    Array.prototype.forEach.call(caixa.children, function (b) {
+      b.setAttribute("aria-pressed", b.dataset[atributo] === valor ? "true" : "false");
+    });
+  }
+  function aplicarTema(qual) {
+    // "sistema" não é um terceiro tema: é a ausência de escolha. Guardar
+    // "escuro" quando a pessoa quer seguir o aparelho faria a janela ignorar
+    // o modo noturno para sempre, sem ela ter como saber por quê.
+    var raiz = document.documentElement;
+    if (qual === "sistema") {
+      raiz.setAttribute("data-tema",
+        window.matchMedia("(prefers-color-scheme: dark)").matches ? "escuro" : "claro");
+    } else {
+      raiz.setAttribute("data-tema", qual);
+    }
+    marcarEscolha("temas", "tema", qual);
+  }
+  function aplicarCor(cor) {
+    document.documentElement.setAttribute("data-cor", cor);
+    marcarEscolha("cores", "cor", cor);
+  }
+
+  function desenharMarca() {
+    if (!window.PrimoMarca) return;
+    var t = document.getElementById("marcaTopo");
+    var g = document.getElementById("marcaGrande");
+    if (t) t.innerHTML = window.PrimoMarca.svg({ tamanho: 22 });
+    if (g) g.innerHTML = window.PrimoMarca.svg({ tamanho: 82, rotulo: "PrimoCode" });
+  }
+
+  function quando(iso) {
+    if (!iso) return "";
+    var d = new Date(iso);
+    if (isNaN(d)) return "";
+    var dias = Math.floor((Date.now() - d.getTime()) / 86400000);
+    if (dias <= 0) return d.toLocaleTimeString("pt-BR", { hour: "2-digit", minute: "2-digit" });
+    if (dias === 1) return "ontem";
+    if (dias < 7) return dias + " dias";
+    return d.toLocaleDateString("pt-BR", { day: "2-digit", month: "2-digit" });
+  }
+
+  var conversaAberta = null;
+
+  function carregarConversas() {
+    var caixa = document.getElementById("recentes");
+    if (!caixa) return;
+    pedir("/api/conversas").then(function (r) { return r.json(); }).then(function (d) {
+      if (!d || !d.ok || !d.conversas || !d.conversas.length) return;   // deixa o texto de vazio
+      caixa.innerHTML = "";
+      d.conversas.forEach(function (c) {
+        var b = document.createElement("button");
+        b.className = "item";
+        b.setAttribute("aria-current", c.id === conversaAberta ? "true" : "false");
+        var t = document.createElement("span");
+        // textContent, nunca innerHTML: o título vem cifrado do banco e foi
+        // escrito por gente — um "<img onerror>" ali viraria script na janela.
+        t.textContent = c.titulo || "Conversa";
+        var q = document.createElement("span");
+        q.className = "quando";
+        q.textContent = quando(c.atualizada) + (c.mensagens ? " · " + c.mensagens + " msg" : "");
+        b.appendChild(t); b.appendChild(q);
+        b.onclick = function () { abrirConversa(c.id); };
+        caixa.appendChild(b);
+      });
+    }).catch(function () { /* sem conta: fica o texto de vazio */ });
+  }
+
+  function abrirConversa(id) {
+    conversaAberta = id;
+    pedir("/api/conversa/" + encodeURIComponent(id)).then(function (r) { return r.json(); })
+      .then(function (d) {
+        if (!d || !d.ok) return;
+        voltarAoVazio();
+        limparBoasVindas();
+        var tira = document.getElementById("conversa");
+        (d.mensagens || []).forEach(function (m) {
+          var linha = document.createElement("div");
+          if (m.papel === "user") {
+            linha.className = "voce";
+            var dentro = document.createElement("div");
+            dentro.textContent = m.texto;
+            linha.appendChild(dentro);
+          } else {
+            linha.className = "saida";
+            linha.textContent = m.texto;
+          }
+          tira.appendChild(linha);
+        });
+        rolo.scrollTop = rolo.scrollHeight;
+        carregarConversas();
+      }).catch(function () {});
+  }
+
+  function ligarLado() {
+    var novo = document.getElementById("btnNovo");
+    if (novo) novo.onclick = function () {
+      conversaAberta = null;
+      voltarAoVazio();
+      carregarConversas();
+      campo.focus();
+    };
+
+    var dlg = document.getElementById("dlgConfig");
+    var abrir = document.getElementById("btnConfig");
+    var fechar = document.getElementById("fecharConfig");
+    if (abrir && dlg) abrir.onclick = function () {
+      // Os três valores vêm do estado que o terminal já manda; repetir a
+      // consulta aqui só para abrir um diálogo seria uma ida à toa.
+      ["pasta", "modo", "esforco"].forEach(function (k) {
+        var de = document.getElementById(k);
+        var para = document.getElementById(k + "Config");
+        if (de && para) para.textContent = de.textContent || "—";
+      });
+      dlg.showModal();
+    };
+    if (fechar && dlg) fechar.onclick = function () { dlg.close(); };
+
+    var temas = document.getElementById("temas");
+    if (temas) temas.onclick = function (ev) {
+      var b = ev.target.closest("[data-tema]"); if (!b) return;
+      guardo(CHAVE_TEMA, b.dataset.tema); aplicarTema(b.dataset.tema);
+    };
+    var cores = document.getElementById("cores");
+    if (cores) cores.onclick = function (ev) {
+      var b = ev.target.closest("[data-cor]"); if (!b) return;
+      guardo(CHAVE_COR, b.dataset.cor); aplicarCor(b.dataset.cor);
+    };
+
+    window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", function () {
+      if (pego(CHAVE_TEMA, "escuro") === "sistema") aplicarTema("sistema");
+    });
+  }
+
+  desenharMarca();
+  aplicarTema(pego(CHAVE_TEMA, "escuro"));
+  aplicarCor(pego(CHAVE_COR, "ciano"));
+  ligarLado();
+  carregarConversas();
+
   pedir("/api/estado").then(function (r) { return r.json(); }).then(pintarEstado)
     .catch(function () {});
   ligar();