/* ============================================================================
   iBooster CRM - janela de vidro do Bolt.
   A conversa, o compositor e a lista continuam compartilhados com o espaco
   de trabalho; esta folha muda apenas a moldura sobre o CRM V3.
   ========================================================================== */
.copiloto{
  /* So o destaque muda aqui dentro. Derivados (--anel) sao refeitos porque
     token derivado resolve no <html>. A perspectiva CEO troca estes mesmos
     nomes por grafite em copiloto-manual.css. */
  --accent:var(--bolt);
  --brand:var(--accent);--brand-2:var(--bolt-2);--brand-fill:var(--accent);
  --brand-soft:var(--surface-3);--brand-line:var(--line-strong);
  --anel:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent);
  --sombra-brand:0 1px 2px rgba(17,19,24,.16);
  --cop-vidro:color-mix(in srgb,var(--surface) 62%,transparent);
  --cop-corpo-vidro:color-mix(in srgb,var(--surface) 20%,transparent);
  --cop-caixa-vidro:color-mix(in srgb,var(--surface) 84%,transparent);
  position:fixed;right:16px;bottom:16px;width:min(450px,calc(100vw - 32px));
  height:min(760px,calc(100dvh - 32px));z-index:var(--z-panel);
  display:flex;flex-direction:column;
  background:var(--cop-vidro);border:1px solid color-mix(in srgb,var(--surface) 65%,var(--line-strong));
  border-radius:26px;-webkit-backdrop-filter:blur(28px) saturate(1.25);
  backdrop-filter:blur(28px) saturate(1.25);
  box-shadow:0 18px 65px -25px rgba(17,19,24,.36),0 3px 12px -5px rgba(17,19,24,.14);
  animation:cop-entra var(--dur-4) var(--ease-out);
}
.copiloto[hidden]{display:none}
html[data-tema="escuro"] .copiloto{
  --cop-vidro:color-mix(in srgb,var(--surface) 76%,transparent);
  --cop-corpo-vidro:color-mix(in srgb,var(--surface) 28%,transparent);
  --cop-caixa-vidro:color-mix(in srgb,var(--surface) 92%,transparent);
  box-shadow:0 22px 70px -20px rgba(0,0,0,.78);
}
html[data-tema="escuro"] .copiloto:not(.copiloto-ceo){--brand-fill:var(--bolt-fill);--brand-2:var(--bolt-fill-2)}
@keyframes cop-entra{from{transform:translateY(14px) scale(.985);opacity:0}to{transform:none;opacity:1}}
.copiloto .btn-primario{background:var(--brand-fill);color:#fff}
.copiloto .btn-primario:hover{background:var(--brand-2)}
.copiloto :focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---------------- cabecalho: uma linha so ---------------- */
.cop-topo{display:flex;align-items:center;gap:2px;padding:0 8px 0 14px;min-height:var(--topo);flex:none;
  background:var(--cop-corpo-vidro);color:var(--ink);border-bottom:1px solid var(--line);
  border-radius:25px 25px 0 0}
.cop-topo > .cop-topo-avatar{margin-right:3px}
.cop-topo .btn-fantasma{color:var(--ink-3)}
.cop-topo .btn-fantasma:hover{background:var(--hover);color:var(--ink)}
.cop-topo .btn-fantasma[aria-expanded="true"]{background:var(--ativo);color:var(--ink)}
.cop-seletor{flex:1;min-width:0;display:grid;gap:0;text-align:left;padding:5px 8px;margin-right:4px;border-radius:var(--r-sm);
  transition:background var(--dur-1) var(--ease)}
.cop-seletor:hover,.cop-seletor[aria-expanded="true"]{background:var(--hover)}
.cop-seletor-alto{display:flex;align-items:center;gap:6px;min-width:0;font-size:var(--fs-xs);line-height:1.3;color:var(--ink-3)}
.cop-seletor-alto b{font-weight:var(--fw-semibold);color:var(--ink-2);white-space:nowrap}
.cop-escopo{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cop-escopo:not(:empty)::before{content:'·';margin-right:6px;color:var(--ink-4)}
.cop-seletor-titulo{display:flex;align-items:center;gap:4px;min-width:0;font-size:var(--fs-md);font-weight:var(--fw-semibold);line-height:1.35;color:var(--ink)}
.cop-seletor-titulo > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cop-seletor-titulo .ic{width:14px;height:14px;color:var(--ink-3);flex:none;transition:transform var(--dur-2) var(--ease)}
.cop-seletor[aria-expanded="true"] .cop-seletor-titulo .ic{transform:rotate(180deg)}
.cop-ancora{position:relative;display:inline-flex}
.cop-menu{position:absolute;top:calc(100% + 6px);right:0;min-width:248px}
.cop-menu .chave{justify-content:space-between;gap:12px;height:auto;min-height:40px;padding:6px 10px;border-radius:var(--r-xs);color:var(--ink);font-weight:var(--fw-regular)}
.cop-menu .chave:hover{background:var(--hover)}
.cop-menu .chave > span:first-child{display:grid;gap:1px;text-align:left}
.cop-menu .chave small{font-size:var(--fs-xs);color:var(--ink-3)}
.cop-menu .chave[hidden]{display:none}
.cop-menu button:disabled{opacity:.45;cursor:default}
.cop-menu button:disabled:hover{background:none}
[data-papel="leitor"] #copiloto-modo{display:none}

/* ---------------- seletor de conversas: popover sob o cabecalho ---------------- */
.cop-lista{position:absolute;top:calc(var(--topo) - 2px);left:8px;right:8px;max-height:min(560px,calc(100% - var(--topo) - 96px));z-index:6;
  display:flex;flex-direction:column;border-radius:14px;background:var(--surface-raised);box-shadow:var(--e3);overflow:hidden;
  animation:entra var(--dur-3) var(--ease-out)}
.cop-lista[hidden]{display:none}
.cop-lista-topo{display:flex;gap:6px;align-items:center;padding:10px 10px 6px;flex:none}
.cop-lista-topo .bl-busca{flex:1}
.cop-lista .bl-lista{overflow-y:auto;padding:0 6px 10px}

/* ---------------- o fio ---------------- */
.cop-corpo{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:20px 16px 12px;display:flex;flex-direction:column;gap:18px;background:var(--cop-corpo-vidro)}
.cop-corpo > .cop-vazio,.cop-corpo > .cop-ceo-home{margin-top:auto;margin-bottom:auto}
.copiloto .bc-form{background:var(--cop-caixa-vidro);border:1px solid color-mix(in srgb,var(--line-strong) 65%,transparent);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}

/* ---------------- O PILOTO: o Bolt mexendo na tela ----------------
   Tudo aqui e por cima da interface de verdade, nunca dentro dela: o piloto
   aponta e destaca, quem muda o dado ja foi o servidor. Por isso todo mundo
   aqui e pointer-events:none - o cursor falso nao pode roubar o clique do
   cursor de verdade. */
.cop-piloto-cursor{
  position:fixed;left:0;top:0;z-index:var(--z-piloto);pointer-events:none;opacity:0;
  transition:transform .43s cubic-bezier(.4,.1,.2,1),opacity .2s;
}
.cop-piloto-cursor.visivel{opacity:1}
.cop-piloto-ponta{
  position:absolute;left:-9px;top:-9px;width:18px;height:18px;border-radius:50%;
  background:var(--bolt);box-shadow:0 2px 10px rgba(0,0,0,.3),0 0 0 3px rgba(255,255,255,.9);
}
.cop-piloto-anel{
  position:absolute;left:-17px;top:-17px;width:34px;height:34px;border-radius:50%;
  border:2px solid var(--bolt);opacity:.45;animation:cop-anel 1.5s ease-out infinite;
}
@keyframes cop-anel{0%{transform:scale(.6);opacity:.55}100%{transform:scale(1.25);opacity:0}}
.cop-piloto-cursor.clicando .cop-piloto-ponta{transform:scale(.7);transition:transform .12s}

/* A faixa existe para a pessoa entender POR QUE a tela esta se mexendo sozinha,
   e para ter como parar. Tela que anda sem explicacao parece defeito. */
.cop-piloto-faixa{
  position:fixed;left:50%;transform:translateX(-50%);top:14px;z-index:calc(var(--z-piloto) + 1);
  display:flex;align-items:center;gap:9px;max-width:min(560px,92vw);
  padding:8px 10px 8px 13px;border-radius:var(--r-full);
  background:var(--ink);color:var(--surface);font-size:var(--fs-sm);
  box-shadow:0 8px 26px rgba(0,0,0,.24);animation:cop-faixa .25s ease-out;
}
@keyframes cop-faixa{from{opacity:0;transform:translate(-50%,-8px)}to{opacity:1;transform:translate(-50%,0)}}
.cop-piloto-faixa b{font-weight:var(--fw-medium);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cop-piloto-pulso{flex:none;width:8px;height:8px;border-radius:50%;background:var(--bolt);animation:cop-pisca 1.2s ease-in-out infinite}
.cop-piloto-parar{
  flex:none;border:0;border-radius:var(--r-full);padding:4px 10px;cursor:pointer;
  background:rgba(255,255,255,.16);color:inherit;font-size:var(--fs-xs);font-family:inherit;
}
.cop-piloto-parar:hover{background:rgba(255,255,255,.28)}
/* O alvo: contorno, e nao troca de fundo, para o valor dentro do campo
   continuar legivel enquanto e escrito. */
.cop-alvo{outline:2px solid var(--bolt) !important;outline-offset:2px;border-radius:var(--r-sm);transition:outline-color .2s}
.cop-escrito{animation:cop-acendeu 1.5s ease-out}
@keyframes cop-acendeu{
  0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--bolt) 55%,transparent)}
  100%{box-shadow:0 0 0 14px transparent}
}
@media (prefers-reduced-motion:reduce){
  .cop-piloto-cursor{transition:opacity .2s}
  .cop-piloto-anel,.cop-escrito{animation:none}
}

/* No tablet, a conversa repousa acima da barra de navegacao. */
@media (max-width:1000px){
  .copiloto{right:8px;bottom:calc(76px + env(safe-area-inset-bottom));
    width:min(450px,calc(100vw - 16px));height:min(760px,calc(100dvh - 100px - env(safe-area-inset-bottom)))}
}
@media (max-width:760px){
  .cop-topo{padding-left:12px}
  .copiloto .bl-busca input{font-size:16px}
  #copiloto-ampliar{display:none}
}
@media (prefers-reduced-motion:reduce){.copiloto{animation:none}}