/* code-module.css — area dedicada do modulo de codigo.
   Arquivo proprio de proposito: styles.css ja tem ~139 KB e este modulo e uma
   tela inteira, nao um ajuste. Separado, da para ler e mexer sem varrer o
   arquivo grande.

   TEMA: as cores vem de variaveis definidas em .code-module (claro, o padrao
   do app) e sobrescritas em body.dark-mode. O app inteiro usa `body.dark-mode`
   como chave de tema, entao o modulo acompanha o toggle sem logica propria.
   Antes as cores eram cravadas em escuro e o botao de tema nao faria nada
   aqui dentro. */

.code-module {
  --cm-fundo: #f5f6fa;      /* fundo geral da area */
  --cm-painel: #ffffff;     /* barras, laterais, caixas */
  --cm-fundo2: #eceef5;     /* realce sutil (hover, faixas) */
  --cm-borda: #dfe2ec;
  --cm-borda2: #c9cddc;
  --cm-texto: #23252f;
  --cm-suave: #6b7183;      /* texto secundario */
  --cm-fraco: #9aa0b2;      /* texto terciario, numeros de linha */
  --cm-acento: var(--accent);
  --cm-acento-fraco: #a99cff;
  --cm-ok: #1a9c5b;
  --cm-erro: #d13b3b;
  --cm-erro-fundo: #fdf0f0;
  --cm-erro-borda: #f3c9c9;
  --cm-codigo-fundo: #f2f3f8;

  position: fixed; inset: 0; z-index: 900;
  display: none; grid-template-rows: auto 1fr;
  background: var(--cm-fundo); color: var(--cm-texto);
  font-family: 'Segoe UI', Tahoma, sans-serif;
}
body.dark-mode .code-module {
  --cm-fundo: #1a1b24;
  --cm-painel: #161720;
  --cm-fundo2: #1f202e;
  --cm-borda: #262736;
  --cm-borda2: #36384a;
  --cm-texto: #d7dbe7;
  --cm-suave: #8a90a6;
  --cm-fraco: #565c70;
  --cm-acento: var(--accent);
  --cm-acento-fraco: #a99cff;
  --cm-ok: #7ddc9a;
  --cm-erro: #ff8a80;
  --cm-erro-fundo: #2a1620;
  --cm-erro-borda: #4d2230;
  --cm-codigo-fundo: #13141c;
}
body.dark-mode .code-envio textarea::placeholder,
body.dark-mode .code-terminal-linha input::placeholder,
body.dark-mode .code-opcao-livre::placeholder,
body.dark-mode .code-tree-busca::placeholder,
body.dark-mode .hs-traj-busca::placeholder,
body.dark-mode .hs-campo input::placeholder,
body.dark-mode .hs-campo textarea::placeholder,
body.dark-mode .hs-campo-inline input::placeholder { color: #9b9bac; }
.code-module.active { display: grid; }

/* ---- barra de cima ---- */
.code-top {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; background: var(--cm-painel); border-bottom: 1px solid var(--cm-borda);
}
.code-top h2 { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 8px; margin: 0; }
.code-top h2 svg.lucide { color: var(--cm-acento); }
.code-folder {
  font-size: 12px; color: var(--cm-suave); background: var(--cm-fundo2); border: 1px solid var(--cm-borda);
  border-radius: 6px; padding: 4px 10px; max-width: 380px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: rtl;
}
.code-top .code-espaco { margin-left: auto; }
.code-btn {
  background: var(--cm-fundo2); border: 1px solid var(--cm-borda2); color: var(--cm-texto);
  border-radius: 8px; padding: 6px 12px; font-size: 13px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.code-btn:hover { border-color: var(--cm-acento); }
.code-btn.primario { background: var(--cm-acento); border-color: var(--cm-acento); color: #fff; }
.code-btn.primario:hover { background: #6a5de0; }
.code-btn:disabled { opacity: .45; cursor: not-allowed; }

/* Tema: o mesmo par sol/lua do app, so que dentro do modulo. O rotulo diz para
   ONDE o clique leva ("Escuro" = vai escurecer) — o icone sozinho e ambiguo,
   metade das pessoas le como "estou no modo lua".
   ATENÇÃO: as regras de show precisam de `svg.lucide` para ganhar especificidade
   contra a regra de hide (0,2,1 vs 0,2,0). */
.code-tema svg.lucide, .code-tema span { display: none; }
.code-tema svg.lucide-moon, .code-tema .code-tema-claro { display: inline; }
body.dark-mode .code-tema svg.lucide-moon,
body.dark-mode .code-tema .code-tema-claro { display: none; }
body.dark-mode .code-tema svg.lucide-sun,
body.dark-mode .code-tema .code-tema-escuro { display: inline; }
.code-btn.ativo { border-color: var(--cm-acento); color: var(--cm-acento); }

.code-select {
  background: var(--cm-fundo2); border: 1px solid var(--cm-borda2); color: var(--cm-texto);
  border-radius: 8px; padding: 6px 10px; font-size: 12.5px; font-family: inherit; cursor: pointer;
}
.code-select:hover { border-color: var(--cm-acento); }

/* ---- corpo: arvore + conversa (+ visualizador) ---- */
.code-corpo { display: grid; grid-template-columns: 260px 1fr; min-height: 0; }
/* Com arquivo aberto a conversa cede espaco, mas nunca some: o agente continua
   sendo o centro do trabalho. */
.code-module.com-visualizador .code-corpo { grid-template-columns: 240px minmax(320px, 1fr) minmax(360px, 1.1fr); }
.code-lateral {
  background: var(--cm-painel); border-right: 1px solid var(--cm-borda); padding: 10px;
  display: grid; grid-template-rows: 1fr auto; min-height: 0;
}
.code-lateral-rolagem { overflow-y: auto; min-height: 0; }
.code-lateral h3 { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--cm-fraco); margin: 14px 0 8px 4px; }
.code-lateral h3:first-child { margin-top: 0; }

/* Gaveta de projetos: atalho para os que ja foram abertos. */
.code-proj {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px;
  border-radius: 6px; font-size: 13px; color: var(--cm-suave); cursor: pointer;
}
.code-proj:hover { background: var(--cm-fundo2); }
.code-proj.ativo { background: var(--cm-fundo2); color: var(--cm-texto); box-shadow: inset 2px 0 0 var(--cm-acento); }
.code-proj svg.lucide { color: var(--cm-fraco); font-size: 12px; }
.code-proj.ativo svg.lucide { color: var(--cm-acento-fraco); }
.code-proj-nome { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.code-proj-x {
  background: none; border: none; color: var(--cm-fraco); cursor: pointer;
  padding: 2px 4px; font-size: 11px; opacity: 0; transition: opacity .15s;
}
.code-proj:hover .code-proj-x { opacity: 1; }
.code-proj-x:hover { color: var(--cm-erro); }

/* Marca no rodape da lateral. */
.code-marca { padding: 12px 8px 4px; border-top: 1px solid var(--cm-borda); margin-top: 10px; }
.code-marca img { width: 100%; max-width: 150px; opacity: .38; display: block; }
/* O SVG da marca e branco: no tema claro precisa inverter para aparecer. */
.code-marca img { filter: invert(1); }
body.dark-mode .code-marca img { filter: none; }

.code-tree-item {
  display: flex; align-items: center; gap: 8px; padding: 5px 8px;
  border-radius: 6px; font-size: 13px; color: var(--cm-suave); cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.code-tree-item:hover { background: var(--cm-fundo2); }
.code-tree-item svg.lucide { color: var(--cm-fraco); font-size: 12px; }
.code-tree-item.ativo { background: var(--cm-fundo2); color: var(--cm-texto); }
.code-tree-item.voltar { color: var(--cm-acento); }
.code-tree-vazio { font-size: 12px; color: var(--cm-fraco); padding: 8px; }

/* Linhas: status, conversa, terminal, envio. Flex em coluna (nao grid) para a
   barra do harness ficar colada no TOPO e a conversa crescer no meio; o
   terminal aberto tem altura fixa e o rodapé fica embaixo. */
.code-conversa { display: flex; flex-direction: column; min-height: 0; }
.code-status {
  font-size: 12px; padding: 0 16px; height: 33px; box-sizing: border-box;
  display: flex; align-items: center; color: var(--cm-suave);
  background: var(--cm-painel); border-bottom: 1px solid var(--cm-borda);
}
.code-status.ok { color: var(--cm-ok); }
.code-status.erro { color: var(--cm-erro); }
.code-status.carregando { color: var(--cm-acento-fraco); }
.code-status.aviso { color: #c08a1f; }
body.dark-mode .code-status.aviso { color: #e6b455; }

.code-messages { overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 12px; flex: 1 1 auto; min-height: 0; }
.code-vazio { margin: auto; text-align: center; color: var(--cm-fraco); max-width: 400px; }
.code-vazio svg.lucide { font-size: 34px; display: block; margin-bottom: 12px; opacity: .5; }
.code-vazio p { font-size: 13px; line-height: 1.6; }
.code-vazio strong { color: var(--cm-suave); }

/* Tela de entrada: sem projeto aberto, escolher um e a unica coisa que importa. */
.code-entrada { margin: auto; text-align: center; max-width: 460px; padding: 20px; }
.code-entrada-logo { width: 190px; opacity: .9; margin-bottom: 14px; }
body.dark-mode .code-entrada-logo { filter: none; }
.code-entrada-sub { font-size: 13.5px; color: var(--cm-suave); margin-bottom: 22px; line-height: 1.5; }
.code-btn.grande { padding: 10px 20px; font-size: 14px; margin: 0 auto; }
.code-entrada-recentes { margin-top: 30px; text-align: left; }
.code-entrada-recentes h4 {
  font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--cm-fraco); margin: 0 0 10px 2px; font-weight: 600;
}
.code-entrada-proj {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  background: var(--cm-fundo2); border: 1px solid var(--cm-borda); border-radius: 9px;
  padding: 10px 13px; margin-bottom: 7px; cursor: pointer; color: var(--cm-suave);
  font-family: inherit;
}
.code-entrada-proj:hover { border-color: var(--cm-acento); }
.code-entrada-proj svg.lucide { color: var(--cm-acento); font-size: 15px; }
.code-entrada-proj span { display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.code-entrada-proj strong { font-size: 13.5px; color: var(--cm-texto); font-weight: 600; }
.code-entrada-proj small {
  font-size: 11px; color: var(--cm-fraco); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; direction: rtl; text-align: left;
}

.code-msg { max-width: 78%; padding: 10px 14px; border-radius: 12px; font-size: 14px; line-height: 1.55; }
.code-msg.user { align-self: flex-end; background: var(--cm-acento); color: #fff; border-bottom-right-radius: 4px; }
.code-msg.ai { align-self: flex-start; background: var(--cm-painel); border: 1px solid var(--cm-borda); border-bottom-left-radius: 4px; }
.code-msg.erro { align-self: stretch; max-width: 100%; background: var(--cm-erro-fundo); border: 1px solid var(--cm-erro-borda); color: var(--cm-erro); }
/* Aviso: a retentativa nao e erro (o motor ainda vai tentar) nem fala do
   agente. Peso proprio, mais discreto que o vermelho. */
.code-msg.aviso {
  align-self: stretch; max-width: 100%; font-size: 12.5px;
  background: var(--cm-fundo2); border: 1px solid var(--cm-borda2);
  border-left: 3px solid #d99a2b; color: var(--cm-suave);
  display: flex; align-items: center; gap: 8px;
}
.code-msg.aviso svg.lucide { color: #d99a2b; font-size: 11px; }
.code-msg pre { background: var(--cm-codigo-fundo); padding: 10px; border-radius: 8px; overflow-x: auto; margin: 8px 0; }
.code-msg code { font-family: 'Fira Code', monospace; font-size: 12.5px; }

/* Ferramenta: uma linha discreta — o que importa e a acao, nao o volume. */
.code-ferramenta {
  align-self: flex-start; font-size: 12px; color: var(--cm-suave);
  background: var(--cm-fundo2); border: 1px solid var(--cm-borda); border-radius: 999px;
  padding: 4px 12px; display: inline-flex; align-items: center; gap: 7px;
}
.code-ferramenta svg.lucide { font-size: 11px; color: var(--cm-acento-fraco); }
.code-ferramenta strong { font-weight: 600; color: var(--cm-texto); }
/* O caminho e o que estoura a largura: encolhe primeiro, corta no fim. */
.code-ferramenta-alvo {
  font-family: 'Fira Code', monospace; font-size: 11.5px; color: var(--cm-fraco);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46ch;
}
.code-ferramenta.rodando { border-color: var(--cm-acento-fraco); }
.code-ferramenta.feita svg.lucide { color: var(--cm-ok); }
.code-ferramenta.falhou { border-color: var(--cm-erro-borda); color: var(--cm-erro); }
.code-ferramenta.falhou svg.lucide { color: var(--cm-erro); }

/* Raciocinio: presente, mas em segundo plano — nao pode competir com a
   resposta. Fechado vira uma linha so; aberto, texto cru com as quebras que o
   modelo escreveu. */
.code-pensamento {
  align-self: stretch; max-width: 100%;
  background: var(--cm-fundo2); border: 1px solid var(--cm-borda);
  border-left: 3px solid var(--cm-acento-fraco); border-radius: 10px;
  padding: 8px 12px; font-size: 12.5px;
}
.code-pensamento > summary {
  cursor: pointer; list-style: none; color: var(--cm-suave);
  display: flex; align-items: center; gap: 8px; font-weight: 600;
}
.code-pensamento > summary::-webkit-details-marker { display: none; }
/* Seta em texto puro, nao icone: nao depende do nome interno da fonte do
   Font Awesome, que muda entre versoes. */
.code-pensamento > summary::after {
  content: '▾'; font-size: 11px; margin-left: auto; color: var(--cm-fraco);
  transition: transform .15s;
}
.code-pensamento[open] > summary::after { transform: rotate(180deg); }
.code-pensamento > summary svg.lucide { color: var(--cm-acento-fraco); font-size: 11px; }
.code-pensamento-corpo {
  margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--cm-borda);
  color: var(--cm-suave); line-height: 1.6; font-style: italic;
  white-space: pre-wrap; word-break: break-word;
  max-height: 340px; overflow-y: auto;
}

/* Indicador de trabalho: precisa ser visivel de longe, porque a pergunta que
   ele responde e "isso ainda esta rodando?". */
.code-trabalhando {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 9px;
  font-size: 12.5px; color: var(--cm-acento);
  background: rgba(var(--accent-rgb),.10); border: 1px solid rgba(var(--accent-rgb),.30);
  border-radius: 999px; padding: 6px 14px;
}
.code-trab-parar {
  margin-left: 4px; padding: 2px 9px; border-radius: 999px; cursor: pointer;
  font-size: 11.5px; font-family: inherit;
  background: transparent; border: 1px solid var(--cm-acento); color: var(--cm-acento);
}
.code-trab-parar:hover { background: var(--cm-acento); color: #fff; }
.code-pontos { display: inline-flex; gap: 4px; }
.code-pontos i {
  width: 5px; height: 5px; border-radius: 50%; background: var(--cm-acento);
  display: block; animation: codePulso 1.2s infinite ease-in-out;
}
.code-pontos i:nth-child(2) { animation-delay: .18s; }
.code-pontos i:nth-child(3) { animation-delay: .36s; }
@keyframes codePulso {
  0%, 70%, 100% { transform: scale(.7); opacity: .35; }
  35% { transform: scale(1); opacity: 1; }
}

/* Pergunta do agente: mesmo peso da permissao (as duas bloqueiam o turno), com
   sotaque proprio para nao confundir "posso fazer?" com "qual caminho sigo?". */
.code-perm.pergunta { border-left-color: #4aa3df; }
.code-pergunta-bloco { margin-top: 10px; }
.code-pergunta-cab {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--cm-fraco); margin-bottom: 3px;
}
.code-pergunta-txt { font-size: 13.5px; color: var(--cm-texto); line-height: 1.5; }
.code-pergunta-dica { font-size: 11.5px; color: var(--cm-fraco); margin-top: 3px; }
.code-opcoes { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.code-opcao {
  text-align: left; cursor: pointer; padding: 8px 12px; border-radius: 8px;
  background: var(--cm-painel); border: 1px solid var(--cm-borda2); color: var(--cm-texto);
  display: flex; flex-direction: column; gap: 2px; font-family: inherit;
}
.code-opcao:hover { border-color: var(--cm-acento); }
.code-opcao.marcada { border-color: var(--cm-acento); background: rgba(var(--accent-rgb),.12); }
.code-opcao strong { font-size: 13px; font-weight: 600; }
.code-opcao small { font-size: 11.5px; color: var(--cm-suave); }
.code-opcao-livre {
  width: 100%; margin-top: 8px; padding: 8px 12px; border-radius: 8px;
  background: var(--cm-painel); border: 1px solid var(--cm-borda2);
  color: var(--cm-texto); font-family: inherit; font-size: 13px;
}
.code-opcao-livre:focus { outline: none; border-color: var(--cm-acento); }

/* Confiança de agente: chip da barra superior enquanto a pasta está em modo
   "auto" (chamadas MCP aprovadas sozinhas). Clique revoga. */
.code-trust-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: color-mix(in srgb, var(--cm-acento) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--cm-acento) 45%, transparent);
  color: var(--cm-acento); border-radius: 20px;
  padding: 4px 12px; font-size: 12px; font-weight: 600; cursor: pointer;
  white-space: nowrap;
}
.code-trust-chip:hover { background: color-mix(in srgb, var(--cm-acento) 28%, transparent); }

/* Permissao: o unico bloco que EXIGE decisao, entao tem peso visual proprio. */
.code-perm {
  align-self: stretch; background: var(--cm-fundo2); border: 1px solid var(--cm-borda2);
  border-left: 3px solid var(--cm-acento); border-radius: 10px; padding: 12px 14px;
}
.code-perm-cab { font-size: 13.5px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.code-perm-cab svg.lucide { color: var(--cm-acento); }
.code-perm-det { font-size: 12px; color: var(--cm-suave); margin-top: 6px; word-break: break-all; }
.code-perm-btns { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.code-perm-btns button {
  background: var(--cm-acento); border: none; color: #fff; border-radius: 7px;
  padding: 6px 14px; font-size: 12.5px; cursor: pointer;
}
.code-perm-btns button:hover { background: #6a5de0; }
.code-perm-btns button.recusar { background: transparent; border: 1px solid var(--cm-erro-borda); color: var(--cm-erro); }
.code-perm-btns button.recusar:hover { background: var(--cm-erro-fundo); }
.code-perm.respondida { opacity: .6; border-left-color: var(--cm-borda2); }
.code-perm-resp { font-size: 12px; color: var(--cm-ok); margin-top: 10px; }

/* ---- visualizador de arquivo ---- */
.code-visualizador { display: none; background: var(--cm-fundo); border-left: 1px solid var(--cm-borda); grid-template-rows: auto auto minmax(0, 1fr); min-height: 0; }
.code-visualizador.aberto { display: grid; }
.code-visualizador-topo {
  display: flex; align-items: center; gap: 8px; padding: 0 10px;
  height: 33px; box-sizing: border-box;
  background: var(--cm-painel); border-bottom: 1px solid var(--cm-borda);
}
.code-visualizador-nome {
  flex: 1; font-size: 12.5px; color: var(--cm-texto); font-family: 'Fira Code', monospace;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: rtl; text-align: left;
}
.code-visualizador-tag {
  font-size: 10.5px; color: var(--cm-acento); background: rgba(var(--accent-rgb),.12);
  border: 1px solid rgba(var(--accent-rgb),.35); border-radius: 999px; padding: 2px 8px; white-space: nowrap;
}
.code-visualizador-topo .code-btn { padding: 4px 8px; }
.code-visualizador-corpo { overflow: auto; min-height: 0; background: var(--cm-codigo-fundo); }
.code-visualizador-carregando { padding: 14px; font-size: 12px; color: var(--cm-fraco); }

/* Previa renderizada: o iframe fica isolado, entao ele traz o proprio fundo. */
.code-previa { width: 100%; height: 100%; border: 0; background: #fff; display: block; }
.code-previa-md { padding: 18px 22px; font-size: 14px; line-height: 1.65; color: var(--cm-texto); }
.code-previa-md pre { background: var(--cm-fundo2); padding: 10px; border-radius: 8px; overflow-x: auto; }
.code-previa-md code { font-family: 'Fira Code', monospace; font-size: 12.5px; }
.code-previa-md img { max-width: 100%; }

/* Tabela em vez de <pre>: numero de linha que nao entra no copiar/colar. */
.code-fonte { border-collapse: collapse; width: 100%; font-family: 'Fira Code', monospace; font-size: 12.5px; }
.code-fonte td { vertical-align: top; padding: 0 0 0 10px; line-height: 1.55; }
.code-lin {
  width: 1%; text-align: right; padding-right: 12px !important; color: var(--cm-fraco);
  user-select: none; border-right: 1px solid var(--cm-borda); position: sticky; left: 0;
  background: var(--cm-codigo-fundo);
}
.code-txt { color: var(--cm-texto); white-space: pre; padding-right: 14px !important; }
/* Editor: células editáveis */
.code-fonte.editavel .code-txt {
  outline: none; cursor: text; border-radius: 2px;
  transition: background 0.15s;
}
.code-fonte.editavel .code-txt:focus {
  background: var(--cm-fundo2); box-shadow: inset 0 0 0 1px var(--cm-acento);
}
.code-fonte.editavel .code-txt:hover {
  background: rgba(var(--accent-rgb), 0.05);
}
/* Indicador de "alterado" no topo do visualizador */
.code-visualizador-alterado {
  color: #f59e0b; font-size: 11px; font-weight: 600;
  margin-left: 8px; text-transform: uppercase;
}

/* ---- caixa de envio ---- */
/* ---- Terminal ----------------------------------------------------------
   Painel recolhivel acima do campo de envio. Fundo sempre escuro, nos dois
   temas: saida de comando e monoespacada e a pessoa espera terminal escuro —
   um terminal branco no tema claro le como caixa de texto, nao como console. */
.code-terminal { display: none; grid-template-rows: auto 1fr auto; min-height: 0; }
.code-terminal.aberto { display: grid; height: 300px; flex: none; }
.code-terminal-topo {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 12px; font-size: 12px; font-weight: 600;
  background: var(--cm-painel); border-top: 1px solid var(--cm-borda);
  border-bottom: 1px solid var(--cm-borda); color: var(--cm-suave);
}
.code-terminal-topo > svg.lucide { color: var(--cm-acento); }
.code-terminal-topo .code-btn { padding: 3px 8px; font-size: 11.5px; }
/* O caminho cede espaco primeiro e empurra os botoes para a direita. */
.code-terminal-cwd {
  margin-right: auto; font-weight: 400; color: var(--cm-fraco);
  font-family: 'Fira Code', monospace; font-size: 11.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.code-terminal-saida {
  margin: 0; padding: 10px 14px; overflow-y: auto;
  background: #0b0c14; color: #cfd4e3;
  font-family: 'Fira Code', monospace; font-size: 12px; line-height: 1.55;
  white-space: pre-wrap; word-break: break-word;
}
.code-terminal-saida .canal-cmd { color: var(--cm-acento-fraco); font-weight: 600; }
.code-terminal-saida .canal-erro { color: #ff8a80; }
.code-terminal-saida .canal-fim { color: #7ddc9a; }
.code-terminal-linha {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; background: #0b0c14; border-top: 1px solid #1e1f2e;
}
.code-terminal-prompt { color: var(--cm-acento-fraco); font-family: 'Fira Code', monospace; font-size: 13px; }
.code-terminal-linha input {
  flex: 1; background: none; border: none; outline: none;
  color: #cfd4e3; font-family: 'Fira Code', monospace; font-size: 12.5px;
}
.code-terminal-linha input::placeholder { color: #565c70; }
.code-terminal-linha input:disabled { opacity: .5; }

.code-envio { display: flex; gap: 10px; padding: 12px 16px; background: var(--cm-painel); border-top: none; }
.code-envio textarea {
  flex: 1; resize: none; min-height: 44px; max-height: 160px;
  background: var(--cm-fundo2); border: 1px solid var(--cm-borda2); border-radius: 10px;
  color: var(--cm-texto); padding: 11px 14px; font-size: 14px; font-family: inherit;
}
.code-envio textarea:focus { outline: none; border-color: var(--cm-acento); }
.code-envio textarea:disabled { opacity: .5; }
/* Steer: link sutil estilo Qoder — sem fundo colorido, só texto + ícone */
.code-btn.steer-link {
  background: transparent; border-color: transparent;
  color: var(--cm-suave); font-weight: 500; font-size: 13px;
  padding: 6px 8px; border-radius: 8px;
}
.code-btn.steer-link:hover { background: var(--cm-fundo2); color: var(--cm-texto); }
/* Botão de ícone (três pontinhos) */
.code-btn.icon-btn {
  background: transparent; border-color: transparent;
  color: var(--cm-fraco); padding: 6px 8px; border-radius: 8px;
}
.code-btn.icon-btn:hover { background: var(--cm-fundo2); color: var(--cm-texto); }
/* Menu dropdown dos três pontinhos */
.code-envio-menu { position: relative; display: inline-flex; align-items: center; }
.code-menu-dropdown {
  display: none; position: absolute; bottom: 100%; right: 0;
  background: var(--cm-painel); border: 1px solid var(--cm-borda2);
  border-radius: 10px; padding: 4px; min-width: 180px;
  box-shadow: 0 4px 16px rgba(0,0,0,.18); z-index: 10; margin-bottom: 6px;
}
.code-menu-dropdown.aberto { display: block; }
.code-menu-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  background: none; border: none; color: var(--cm-texto);
  padding: 8px 10px; border-radius: 6px; font-size: 13px; cursor: pointer;
  text-align: left;
}
.code-menu-item:hover { background: var(--cm-fundo2); }
.code-menu-item i { color: var(--cm-suave); }
.code-menu-check { margin-left: auto; color: var(--cm-acento); font-weight: 700; }
/* Versão do app na barra superior */
.code-versao {
  font-size: 11px; font-weight: 400; color: var(--cm-fraco);
  background: var(--cm-fundo2); padding: 2px 7px; border-radius: 5px;
  margin-left: 4px; vertical-align: middle;
}
/* Contador de mensagens na fila (legado — mantido para compatibilidade) */
.code-fila-contador { display: none; }
/* Prévia da fila: barra sutil colada acima do chat */
.code-fila-preview {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 14px; gap: 8px;
  background: color-mix(in srgb, var(--cm-acento) 10%, var(--cm-painel));
  border-top: 1px solid var(--cm-borda);
  border-bottom: none;
  font-size: 12px; color: var(--cm-suave);
  animation: codeFilaSlide .2s ease-out;
}
@keyframes codeFilaSlide { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
.code-fila-preview-info {
  display: flex; align-items: center; gap: 6px;
  min-width: 0; flex: 1;
}
.code-fila-preview-info i { width: 13px; height: 13px; opacity: .6; flex-shrink: 0; }
.code-fila-preview-count {
  font-weight: 600; color: var(--cm-acento); white-space: nowrap; flex-shrink: 0;
}
.code-fila-preview-text {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--cm-texto); opacity: .7;
}
.code-fila-preview-actions { display: flex; gap: 2px; flex-shrink: 0; }
.code-fila-preview-btn {
  background: transparent; border: none; color: var(--cm-fraco);
  padding: 4px; border-radius: 6px; cursor: pointer; display: inline-flex;
  align-items: center; justify-content: center;
}
.code-fila-preview-btn:hover { background: var(--cm-fundo2); color: var(--cm-texto); }
.code-fila-preview-btn i { width: 13px; height: 13px; }
/* Mensagem na fila: indicador visual */
.code-msg-fila {
  display: inline-block;
  padding: 2px 6px; font-size: 10px; font-weight: 600;
  background: #f59e0b; color: #fff; border-radius: 4px;
  margin-right: 6px; text-transform: uppercase;
}
.code-msg.na-fila { opacity: 0.7; }

/* ---- busca, abas e painel de alterações ---- */
/* Busca por nome no topo da árvore; abas fazem o visualizador virar IDE:
   cada arquivo aberto é uma aba, e o diff e as alterações também. As cores
   usam as variáveis de tema + alpha, então claro e escuro vêm de graça. */
.code-tree-busca {
  width: calc(100% - 16px); margin: 0 8px 6px; padding: 6px 10px;
  background: var(--cm-fundo2); border: 1px solid var(--cm-borda2); border-radius: 8px;
  color: var(--cm-texto); font-size: 12px;
}
.code-tree-busca:focus { outline: none; border-color: var(--cm-acento); }
.code-tree-chev { display: inline-block; width: 12px; text-align: center; color: var(--cm-fraco); font-size: 11px; }
.code-tree-item.raiz { color: var(--cm-suave); font-weight: 600; }

.code-abas {
  display: flex; gap: 2px; overflow-x: auto; background: var(--cm-painel);
  border-bottom: 1px solid var(--cm-borda); padding: 0 8px;
  /* Mesma altura da barra de status da coluna da esquerda, para as
     bordas inferiores ficarem alinhadas (sem desnivel). */
  height: 33px; box-sizing: border-box; align-items: flex-end;
}
.code-aba {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 5px 10px; font-size: 12px; color: var(--cm-suave); cursor: pointer;
  background: var(--cm-fundo2); border: 1px solid var(--cm-borda); border-bottom: none;
  border-radius: 8px 8px 0 0; max-width: 180px;
}
.code-aba span { overflow: hidden; text-overflow: ellipsis; }
.code-aba:hover { color: var(--cm-texto); }
.code-aba.ativa { background: var(--cm-fundo); color: var(--cm-texto); border-color: var(--cm-borda2); }
.code-aba svg.lucide { font-size: 11px; color: var(--cm-acento-fraco); }
.code-aba-x { margin-left: 2px; color: var(--cm-fraco); padding: 0 3px; border-radius: 4px; }
.code-aba-x:hover { color: var(--cm-erro); background: var(--cm-fundo2); }
.code-aba-n { background: var(--cm-acento); color: #fff; border-radius: 8px; font-size: 10px; padding: 1px 6px; }

/* Resumo da sessao: secoes no espirito do Summary de IDE (Progresso, git,
   arquivos tocados). Titulos pequenos em caixa alta, itens clicaveis. */
.code-resumo-sec { padding: 10px 0 6px; border-bottom: 1px solid var(--cm-borda); }
.code-resumo-sec:last-child { border-bottom: none; }
.code-resumo-sec h4 {
  margin: 0 12px 6px; font-size: 10.5px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--cm-fraco);
}
.code-resumo-item {
  display: flex; align-items: center; gap: 8px; padding: 4px 12px;
  font-size: 12px; color: var(--cm-suave); cursor: pointer;
}
.code-resumo-item:hover { background: var(--cm-fundo2); color: var(--cm-texto); }
.code-resumo-item svg.lucide { width: 14px; flex: none; text-align: center; font-size: 11px; color: var(--cm-fraco); }
.code-resumo-item svg.lucide.ok { color: var(--cm-ok); }
.code-resumo-item svg.lucide.falhou { color: var(--cm-erro); }
.code-resumo-item svg.lucide.rodando { color: var(--cm-acento-fraco); }
.code-resumo-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.code-resumo-vazio { padding: 2px 12px 8px; font-size: 12px; color: var(--cm-fraco); }

/* Alterações (git): lista no espírito do painel de review de uma IDE. */
.code-git-topo {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 12px; font-size: 12px; color: var(--cm-suave);
  border-bottom: 1px solid var(--cm-borda);
}
.code-git-item { display: flex; align-items: center; gap: 8px; padding: 5px 12px; font-size: 12px; cursor: pointer; }
.code-git-item:hover { background: var(--cm-fundo2); }
.code-git-nome { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.code-git-st { width: 16px; height: 16px; border-radius: 4px; text-align: center; font-size: 10px; font-weight: 700; line-height: 16px; flex: none; }
.code-git-st.st-M { background: #7a5c1e33; color: #c08a1f; border: 1px solid #7a5c1e55; }
.code-git-st.st-A { background: #1a9c5b22; color: var(--cm-ok); border: 1px solid #1a9c5b55; }
.code-git-st.st-D { background: #d13b3b22; color: var(--cm-erro); border: 1px solid #d13b3b55; }
.code-git-st.st-R { background: #2e6fd822; color: #6ea8ff; border: 1px solid #2e6fd855; }
.code-git-contas { font-size: 11px; white-space: nowrap; }
.code-git-contas .mais { color: var(--cm-ok); font-style: normal; margin-right: 6px; }
.code-git-contas .menos { color: var(--cm-erro); font-style: normal; }

/* Diff colorido: + verde, − vermelho, @@ separador de trecho. */
.code-diff tr.code-diff-add td { background: #1a9c5b1e; }
.code-diff tr.code-diff-add td.code-lin { color: var(--cm-ok); }
.code-diff tr.code-diff-del td { background: #d13b3b1e; }
.code-diff tr.code-diff-del td.code-lin { color: var(--cm-erro); }
.code-diff tr.code-diff-hunk td { color: var(--cm-acento-fraco); padding-top: 10px; font-size: 11px; }

/* O modulo e desktop; em janela estreita a arvore sai da frente. */
@media (max-width: 820px) {
  .code-corpo { grid-template-columns: 1fr; }
  .code-lateral { display: none; }
}

/* ---- DeepSeek Harness: chrome próprio (abas, traj, composer, stats) ---- */
/* A cara do DeepSeek original com a identidade do ThreadSeek: só aparece
   quando o módulo está com a classe motor-harness. */
.code-module:not(.motor-harness) .hs-so-harness { display: none; }

/* Barra superior do harness: abas Chat/Trajectory + preset + Session log. */
/* Altura fixa de 33px — a mesma da .code-status e da .code-abas do
   visualizador — para as bordas inferiores se encontrarem alinhadas na
   divisória das colunas (sem "intersecção" de linhas em alturas diferentes). */
.hs-bar {
  display: flex; align-items: center; gap: 10px;
  height: 33px; box-sizing: border-box;
  padding: 0 14px; background: var(--cm-painel);
  border-bottom: 1px solid var(--cm-borda);
}
.hs-tabs { display: flex; gap: 4px; }
.hs-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; font-size: 12.5px; color: var(--cm-suave);
  background: transparent; border: 1px solid transparent; border-radius: 7px; cursor: pointer;
}
.hs-tab svg.lucide { width: 14px; height: 14px; }
.hs-tab:hover { color: var(--cm-texto); background: var(--cm-fundo2); }
.hs-tab.ativo { color: var(--cm-acento); background: var(--cm-fundo2); border-color: var(--cm-borda2); }
.hs-preset-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; font-size: 12px; color: var(--cm-suave);
  background: var(--cm-fundo2); border: 1px solid var(--cm-borda2); border-radius: 999px; cursor: pointer;
}
.hs-preset-chip:hover { border-color: var(--cm-acento); color: var(--cm-texto); }
.hs-preset-chip svg.lucide { width: 13px; height: 13px; color: var(--cm-acento); }
.hs-log-btn {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; font-size: 12px; color: var(--cm-suave);
  background: transparent; border: 1px solid var(--cm-borda); border-radius: 7px; cursor: pointer;
}
.hs-log-btn:hover { border-color: var(--cm-acento); color: var(--cm-texto); }
.hs-log-btn svg.lucide { width: 13px; height: 13px; }

/* Trajectory: visões Duration/Turns/Calls + busca + corpo rolável. */
.hs-traj {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
  background: var(--cm-fundo);
}
.hs-traj-topo {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; border-bottom: 1px solid var(--cm-borda);
}
.hs-visoes { display: flex; gap: 4px; }
.hs-visao {
  padding: 4px 12px; font-size: 12px; color: var(--cm-suave);
  background: transparent; border: 1px solid transparent; border-radius: 999px; cursor: pointer;
}
.hs-visao:hover { color: var(--cm-texto); background: var(--cm-fundo2); }
.hs-visao.ativa { color: #fff; background: var(--cm-acento); border-color: var(--cm-acento); }
.hs-traj-busca {
  margin-left: auto; width: 260px; padding: 5px 12px; font-size: 12.5px;
  background: var(--cm-fundo2); border: 1px solid var(--cm-borda2); border-radius: 8px; color: var(--cm-texto);
}
.hs-traj-busca:focus { outline: none; border-color: var(--cm-acento); }
.hs-traj-corpo { flex: 1; min-height: 0; overflow: auto; padding: 14px 16px; }
.hs-traj-vazio { color: var(--cm-fraco); font-size: 13px; padding: 24px; text-align: center; }

/* Linha do tempo por turno: trilhas Input/Model/Tools com barras de duração. */
.hs-timeline { display: flex; flex-direction: column; gap: 14px; }
.hs-tl-turno { font-size: 11px; color: var(--cm-fraco); text-transform: uppercase; letter-spacing: .5px; margin: 4px 0 2px; }
.hs-tl-row { display: flex; align-items: center; gap: 10px; margin: 3px 0; }
.hs-tl-rotulo { width: 56px; flex: none; font-size: 11.5px; color: var(--cm-suave); }
.hs-tl-trilha { flex: 1; height: 14px; background: var(--cm-fundo2); border-radius: 4px; position: relative; overflow: hidden; }
.hs-tl-bar { position: absolute; top: 2px; bottom: 2px; border-radius: 3px; min-width: 3px; }
.hs-tl-bar-input { background: #2e6fd8aa; }
.hs-tl-bar-model { background: var(--cm-acento); }
.hs-tl-bar-tool { background: #1a9c5b99; }
.hs-tl-info { width: 130px; flex: none; font-size: 11px; color: var(--cm-fraco); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Feed de eventos (turnos): cartões com chips de etapa. */
.hs-feed-turno {
  background: var(--cm-painel); border: 1px solid var(--cm-borda);
  border-radius: 10px; padding: 10px 12px; margin-bottom: 10px;
}
.hs-feed-topo { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--cm-suave); margin-bottom: 6px; }
.hs-feed-topo .hs-feed-num { font-weight: 700; color: var(--cm-acento); }
.hs-feed-linha { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; padding: 2px 0; font-size: 12px; color: var(--cm-texto); }
.hs-chip-mini {
  display: inline-flex; align-items: center; padding: 1px 8px;
  font-size: 10.5px; border-radius: 999px; border: 1px solid var(--cm-borda2); flex: none;
}
.hs-chip-mini.in { color: #6ea8ff; background: #2e6fd81a; }
.hs-chip-mini.out { color: var(--cm-acento-fraco); background: rgba(var(--accent-rgb),.10); }
.hs-chip-mini.tool { color: var(--cm-ok); background: #1a9c5b1a; }
.hs-feed-texto { color: var(--cm-suave); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.hs-feed-texto.destaque { color: var(--cm-texto); -webkit-line-clamp: unset; display: block; }

/* Composer: chips de acesso/presets/plugins/modelo+effort no rodapé. */
.hs-composer {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 12px; background: var(--cm-painel);
  border-top: 1px solid var(--cm-borda);
}
.hs-espaco { flex: 1; }
.hs-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; font-size: 12px; color: var(--cm-suave);
  background: var(--cm-fundo2); border: 1px solid var(--cm-borda2); border-radius: 999px; cursor: pointer;
}
.hs-chip:hover { border-color: var(--cm-acento); color: var(--cm-texto); }
.hs-chip svg.lucide { width: 13px; height: 13px; }
.hs-chip .hs-seta { width: 12px; height: 12px; color: var(--cm-fraco); }
#hsAcessoRotulo { color: var(--cm-texto); }
#hsModelRotulo { color: var(--cm-texto); }
#hsEffortRotulo { color: var(--cm-acento); }

/* Barra de stats da sessão, sob o composer. */
.hs-stats {
  padding: 5px 14px; font-size: 11.5px; color: var(--cm-suave);
  background: var(--cm-painel); border-top: 1px solid var(--cm-borda);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Menu flutuante (acesso, modelo+effort). */
.hs-menu {
  position: fixed; z-index: 2000; min-width: 220px;
  background: var(--cm-painel); border: 1px solid var(--cm-borda2);
  border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.35); padding: 5px;
}
.hs-menu-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 8px 10px; font-size: 12.5px; color: var(--cm-texto); text-align: left;
  background: transparent; border: none; border-radius: 7px; cursor: pointer;
}
.hs-menu-item:hover { background: var(--cm-fundo2); }
.hs-menu-item .hs-menu-desc { display: block; font-size: 11px; color: var(--cm-fraco); }
.hs-menu-item .hs-menu-check { margin-left: auto; color: var(--cm-acento); font-weight: 700; }
.hs-menu-sep { height: 1px; background: var(--cm-borda); margin: 5px 4px; }
.hs-menu-titulo { padding: 6px 10px 3px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--cm-fraco); }

/* Modais (presets, plugins). */
.hs-overlay {
  position: fixed; inset: 0; z-index: 2100;
  background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center;
}
.hs-modal {
  width: min(680px, 92vw); max-height: 84vh; display: flex; flex-direction: column;
  background: var(--cm-painel); border: 1px solid var(--cm-borda2);
  border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.hs-modal-topo {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px; border-bottom: 1px solid var(--cm-borda);
}
.hs-modal-topo h3 { font-size: 15px; margin: 0; flex: 1; }
.hs-modal-fechar {
  background: transparent; border: none; color: var(--cm-suave); cursor: pointer; font-size: 16px;
}
.hs-modal-fechar:hover { color: var(--cm-texto); }
.hs-modal-corpo { padding: 16px 18px; overflow: auto; }
.hs-modal-sub { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--cm-fraco); margin: 14px 0 8px; }
.hs-modal-sub:first-child { margin-top: 0; }
.hs-modal-desc { font-size: 12.5px; color: var(--cm-suave); margin: 4px 0 10px; }
.hs-modal-acoes { display: flex; gap: 8px; justify-content: flex-end; padding: 12px 18px; border-top: 1px solid var(--cm-borda); }

/* Presets: grade de cartões + badges. */
.hs-presets-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.hs-preset-card {
  border: 1px solid var(--cm-borda2); border-radius: 10px; padding: 12px;
  background: var(--cm-fundo); cursor: pointer; display: flex; flex-direction: column; gap: 6px;
}
.hs-preset-card:hover { border-color: var(--cm-acento); }
.hs-preset-card.em-uso { border-color: var(--cm-acento); box-shadow: 0 0 0 1px var(--cm-acento); }
.hs-preset-card .hs-preset-nome { font-size: 13px; font-weight: 600; color: var(--cm-texto); }
.hs-preset-card .hs-preset-desc { font-size: 11.5px; color: var(--cm-suave); }
.hs-preset-card .hs-preset-acoes { display: flex; gap: 6px; margin-top: 4px; }
.hs-preset-card .hs-preset-acoes button {
  font-size: 11px; padding: 2px 8px; color: var(--cm-suave);
  background: var(--cm-fundo2); border: 1px solid var(--cm-borda2); border-radius: 6px; cursor: pointer;
}
.hs-preset-card .hs-preset-acoes button:hover { border-color: var(--cm-acento); color: var(--cm-texto); }
.hs-badge {
  display: inline-flex; align-items: center; padding: 1px 8px;
  font-size: 10px; border-radius: 999px; font-weight: 600;
}
.hs-badge.uso { color: var(--cm-acento); background: rgba(var(--accent-rgb),.13); }
.hs-badge.ok { color: var(--cm-ok); background: #1a9c5b22; }
.hs-badge.off { color: var(--cm-fraco); background: var(--cm-fundo2); }

/* Plugins: cartões com toggle Enabled/Disabled. */
.hs-plug-card {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--cm-borda2); border-radius: 10px; padding: 10px 14px; margin-bottom: 8px;
  background: var(--cm-fundo);
}
.hs-plug-card .hs-plug-info { flex: 1; min-width: 0; }
.hs-plug-card .hs-plug-nome { font-size: 13px; color: var(--cm-texto); font-weight: 600; }
.hs-plug-card .hs-plug-desc { font-size: 11.5px; color: var(--cm-suave); }
.hs-plug-toggle {
  padding: 3px 12px; font-size: 11.5px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--cm-borda2); background: var(--cm-fundo2); color: var(--cm-suave);
}
.hs-plug-toggle.ligado { color: var(--cm-ok); border-color: #1a9c5b66; background: #1a9c5b1a; }

/* Campos de formulário dos modais. */
.hs-campo { margin-bottom: 10px; }
.hs-campo label { display: block; font-size: 12px; color: var(--cm-suave); margin-bottom: 4px; }
.hs-campo input[type="text"], .hs-campo input[type="number"], .hs-campo textarea {
  width: 100%; padding: 7px 10px; font-size: 12.5px; color: var(--cm-texto);
  background: var(--cm-fundo2); border: 1px solid var(--cm-borda2); border-radius: 8px;
}
.hs-campo input:focus, .hs-campo textarea:focus { outline: none; border-color: var(--cm-acento); }
.hs-campo-inline { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.hs-campo-inline label { font-size: 12px; color: var(--cm-suave); width: 180px; flex: none; }
.hs-campo-inline input { width: 120px; padding: 5px 10px; font-size: 12.5px; color: var(--cm-texto); background: var(--cm-fundo2); border: 1px solid var(--cm-borda2); border-radius: 8px; }
.hs-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 6px; }
.hs-check-item { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--cm-texto); padding: 4px 2px; }
.hs-check-item input { accent-color: var(--cm-acento); }