/* ============================================================================
   KeyCapital CRM - o painel do Copiloto

   Ele EMPURRA o conteudo em vez de cobrir (no desktop). Um chat que cobre a
   tabela obriga a fechar o chat para conferir o que ele disse, que e o oposto
   do ponto: a pergunta e sempre sobre o que esta na tela.
   ========================================================================== */
.copiloto{
  position:fixed;top:0;right:0;bottom:0;width:min(420px,100vw);z-index:34;
  display:flex;flex-direction:column;
  background:var(--surface);border-left:1px solid var(--line);
  box-shadow:-24px 0 60px -30px rgba(0,0,0,.9);
  animation:cop-entra .22s cubic-bezier(.2,.7,.3,1);
}
@keyframes cop-entra{from{transform:translateX(16px);opacity:0}to{transform:none;opacity:1}}

/* No desktop o casco encolhe; abaixo de 1200px nao ha largura para os dois, e
   ai sim ele vira sobreposicao. */
@media(min-width:1201px){
  body.com-copiloto .casco{padding-right:min(420px,100vw)}
  body.com-copiloto .topo{padding-right:22px}
}

.cop-topo{
  display:flex;align-items:center;gap:8px;padding:0 10px 0 18px;height:var(--topo);
  border-bottom:1px solid var(--line);flex:none;
}
.cop-topo > div{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center}
.cop-topo b{font-size:14.5px;font-weight:600;letter-spacing:-.01em}
.cop-escopo{font-size:11px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.cop-corpo{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:12px}

/* ---------------- estado vazio: ensina o que perguntar ---------------- */
.cop-vazio{margin:auto 0;text-align:center;display:grid;gap:14px;padding:10px 4px}
.cop-marca{
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;margin:0 auto;
  background:var(--brand-soft);color:var(--brand);box-shadow:var(--brilho);
}
.cop-marca .ic{width:24px;height:24px}
.cop-vazio p{font-size:13px;color:var(--ink-2);line-height:1.65}
.cop-sugestoes{display:grid;gap:7px}
.cop-sugestoes button{
  text-align:left;font-size:12.5px;padding:10px 13px;border-radius:var(--r-sm);
  border:1px solid var(--line);background:var(--surface-2);color:var(--ink-2);
  transition:border-color var(--transicao),color var(--transicao),background var(--transicao);
}
.cop-sugestoes button:hover{border-color:var(--brand);color:var(--ink);background:var(--brand-soft)}
.cop-aviso{font-size:11.5px;color:var(--ink-4)}

/* ---------------- baloes ---------------- */
.cop-msg{font-size:13.5px;line-height:1.68;max-width:100%;overflow-wrap:anywhere}
.cop-msg.eu{
  align-self:flex-end;max-width:88%;background:var(--brand);color:#fff;
  padding:9px 14px;border-radius:16px 16px 4px 16px;font-weight:500;
  box-shadow:var(--brilho);
}
/* A resposta NAO tem balao: e texto corrido na largura toda. Balao de assistente
   corta a leitura de uma lista de 8 contas em tirinhas, e a resposta util aqui
   quase sempre e uma lista. */
.cop-msg.ele{color:var(--ink);padding:2px 0}
.cop-msg.ele.erro{color:var(--erro);background:var(--erro-soft);padding:10px 13px;border-radius:var(--r-sm);font-size:13px}
.cop-msg b{font-weight:600;color:var(--ink)}
.cop-linha{display:block;margin:0 0 2px}
.cop-item{display:block;padding-left:16px;position:relative;margin:3px 0}
.cop-item::before{content:'';position:absolute;left:2px;top:.62em;width:4px;height:4px;border-radius:50%;background:var(--brand)}
/* item numerado troca a bolinha pelo numero: "olhe primeiro o 2" so funciona
   se o 2 continuar na tela */
.cop-item.num{padding-left:22px}
.cop-item.num::before{display:none}
.cop-item.num i{position:absolute;left:0;font-style:normal;font-weight:600;color:var(--brand)}
.cop-msg.ele br{content:"";display:block;height:7px}

/* cursor de digitacao no fim do texto que ainda esta chegando */
.cop-cursor{display:inline-block;width:2px;height:1em;background:var(--brand);
  vertical-align:-2px;margin-left:2px;animation:cop-pisca 1s steps(2) infinite}
@keyframes cop-pisca{50%{opacity:0}}

/* tres pontos enquanto o modelo pensa e nada chegou ainda */
.cop-pensando{display:inline-flex;gap:5px;align-items:center;height:20px}
.cop-pensando i{width:6px;height:6px;border-radius:50%;background:var(--brand);opacity:.35;
  animation:cop-pulo 1.1s ease-in-out infinite}
.cop-pensando i:nth-child(2){animation-delay:.15s}
.cop-pensando i:nth-child(3){animation-delay:.3s}
@keyframes cop-pulo{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}

/* ---------------- caixa de escrita ---------------- */
.cop-form{
  flex:none;display:flex;gap:8px;align-items:flex-end;padding:12px 14px 14px;
  border-top:1px solid var(--line);background:var(--surface);
}
.cop-form textarea{
  flex:1;resize:none;max-height:140px;min-height:38px;padding:9px 12px;
  border-radius:var(--r-sm);border:1px solid var(--line);background:var(--surface-2);
  font-size:13.5px;line-height:1.5;
}
.cop-form textarea:focus{outline:none;border-color:var(--brand);box-shadow:var(--anel)}
.cop-form .btn-icone{width:38px;height:38px;flex:none}

/* O leitor CONVERSA. O copiloto so le o CRM, entao a trava de escrita nao se
   aplica a ele (ver ESCRITA_DO_PROPRIO_CADASTRO no server.js). O botao de
   enviar carrega data-leitor-ok no HTML pelo mesmo motivo: sem isso a regra
   geral de esconder .btn-primario deixaria o leitor com um chat sem botao. */
[data-papel="leitor"] .cop-sugestoes button{display:block}