/* Constelação v2 — estilos portáveis. Só tokens do sistema visual Semantix
   (roxo é o único acento); a cor de cada agente chega por `--cor`. */
.cst { overflow: visible; font-family: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif; }

/* ---- arestas: invisíveis até o caminho ser usado ------------------------- */
.cst-aresta {
  fill: none; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset .42s cubic-bezier(.4, 0, .2, 1), stroke-width .3s, stroke-opacity .5s;
}
.cst-aresta.ativo   { stroke-width: 1.8; stroke-opacity: .95; filter: drop-shadow(0 0 2.5px rgba(124, 58, 237, .45)); }
.cst-aresta.nivel-1.ativo { stroke-width: 2.2; }
.cst-aresta.visitado { stroke-width: 1.2; stroke-opacity: .26; }

.cst-particula { filter: drop-shadow(0 0 3px rgba(109, 40, 217, .55)); }
.cst-pulso { fill: none; stroke: #6D28D9; stroke-width: 1.5; }

/* ---- CEO ----------------------------------------------------------------- */
.cst-ceo-halo { fill: rgba(109, 40, 217, .06); }
.cst-ceo-disco { filter: drop-shadow(0 18px 36px rgba(91, 33, 182, .28)); }
.cst-ceo-borda { fill: none; stroke: rgba(255, 255, 255, .22); stroke-width: 1; }
.cst-ceo-marca, .cst-agente-marca { fill: #fff; color: #fff; opacity: .92; }
.cst-ceo-rotulo {
  font-size: 12px; font-weight: 600; letter-spacing: .14em; fill: #2a1a5e;
}
/* pensando: um arco fino girando em volta do disco — sinal, não espetáculo */
.cst-ceo-pensando {
  fill: none; stroke: #7C3AED; stroke-width: 1.25; stroke-linecap: round;
  stroke-dasharray: 14 86; opacity: 0; transition: opacity .3s;
  transform-box: fill-box; transform-origin: center;
}
.cst-pensando .cst-ceo-pensando { opacity: .7; animation: cst-girar 1.4s linear infinite; }
@keyframes cst-girar { to { transform: rotate(360deg); } }

/* ---- agente: disco cheio, anel que respira enquanto trabalha -------------- */
.cst-agente { cursor: pointer; }
.cst-agente-disco { filter: drop-shadow(0 6px 14px rgba(91, 33, 182, .25)); }
.cst-agente-anel {
  fill: none; stroke: var(--cor); stroke-width: 1.5; opacity: 0;
  transform-box: fill-box; transform-origin: center;
}
.cst-agente.ativo .cst-agente-anel { animation: cst-respirar 1.6s ease-in-out infinite; }
@keyframes cst-respirar { 0%, 100% { opacity: .15; transform: scale(.92); } 50% { opacity: .55; transform: scale(1.08); } }
.cst-agente-rotulo { font-size: 11.5px; font-weight: 600; fill: #161326; letter-spacing: .01em; }

/* ---- faculdade: PEQUENA. Cheia quando ativa, vazada quando consultada ----- */
.cst-fac-disco { fill: var(--cor); stroke: var(--cor); stroke-width: 1.5; transition: fill .35s; }
.cst-faculdade.visitado .cst-fac-disco { fill: #fff; }
.cst-fac-halo { fill: var(--cor); opacity: 0; transform-box: fill-box; transform-origin: center; }
.cst-faculdade.ativo .cst-fac-halo { animation: cst-halo 1.2s ease-out infinite; }
@keyframes cst-halo { from { opacity: .35; transform: scale(.6); } to { opacity: 0; transform: scale(1.9); } }
.cst-fac-rotulo { font-size: 12px; font-weight: 500; fill: #161326; transition: fill .35s; dominant-baseline: middle; }
.cst-faculdade.visitado .cst-fac-rotulo { fill: #4B465F; }
.cst-fac-fonte {
  font: 500 9.5px ui-monospace, "SF Mono", Menlo, monospace; fill: #6E6787;
  letter-spacing: .02em; dominant-baseline: middle;
}
.cst-faculdade.ativo .cst-fac-fonte { fill: var(--cor); }

/* ---- foco: o resto esmaece ------------------------------------------------ */
.cst-com-foco .cst-agente, .cst-com-foco .cst-faculdade, .cst-com-foco .cst-aresta { transition: opacity .25s; }
.cst-com-foco [data-ag]:not(.cst-foco) { opacity: .28 !important; }

/* ---- cartão do agente ------------------------------------------------------ */
.cst-cartao {
  position: fixed; z-index: 20; min-width: 220px; max-width: 300px;
  padding: 12px 14px; border-radius: 14px; background: #fff;
  border: 1px solid rgba(35, 20, 80, .12);
  box-shadow: 0 1px 2px rgba(22, 19, 38, .05), 0 16px 40px -20px rgba(91, 33, 182, .35);
  font: 12.5px/1.4 "Geist", system-ui, sans-serif; color: #161326;
  animation: cst-entrar .18s ease-out;
}
@keyframes cst-entrar { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) {
  .cst-aresta { transition: none; }
  .cst-pensando .cst-ceo-pensando, .cst-agente.ativo .cst-agente-anel,
  .cst-faculdade.ativo .cst-fac-halo { animation: none; }
}

/* ---- CEO desenhado por fora (no produto é o orbi do presenca.js) ---------- */
.cst-ceo-oculto { display: none; }

/* ---- status do agente: tokens e tempo ------------------------------------ */
.cst-agente-status {
  font: 500 9.5px ui-monospace, "SF Mono", Menlo, monospace; fill: #6E6787; letter-spacing: .02em;
}
.cst-agente-status.vivo { fill: var(--cor); }

/* ---- cartão v2: contexto, tarefa, resultado, números ---------------------- */
.cst-cartao { width: 320px; max-width: calc(100vw - 24px); min-width: 0; pointer-events: none; }
.cst-cartao.fixo { pointer-events: auto; }
.cst-cartao header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.cst-cartao header b { font-size: 13px; }
.cst-cartao-estado {
  margin-left: auto; font: normal 500 9.5px ui-monospace, monospace; letter-spacing: .12em;
  text-transform: uppercase; color: #059669;
}
.cst-cartao-estado.vivo { color: var(--cor); }
.cst-cartao section { margin: 0 0 9px; }
.cst-cartao h4 {
  margin: 0 0 2px; font: 500 9.5px ui-monospace, monospace; letter-spacing: .14em;
  text-transform: uppercase; color: #6E6787;
}
.cst-cartao section p { margin: 0; font-size: 12.5px; color: #161326; }
.cst-c-contexto p { color: #4B465F; }
.cst-c-tarefa p { padding-left: 8px; border-left: 2px solid var(--cor); }
.cst-c-resultado p { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.cst-c-numeros {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin: 10px 0 8px;
  padding: 8px 0; border-top: 1px solid #E8E5F4; border-bottom: 1px solid #E8E5F4;
}
.cst-c-numeros div { margin: 0; }
.cst-c-numeros dt { font: 500 9px ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; color: #6E6787; }
.cst-c-numeros dd { margin: 2px 0 0; font: 600 13px ui-monospace, "SF Mono", monospace; color: #161326; font-variant-numeric: tabular-nums; }
.cst-c-areas { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 10px; }
.cst-c-areas li { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: #4B465F; }
.cst-c-areas li::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  border: 1.5px solid var(--cor); background: var(--cor);
}
.cst-c-areas li.visitado::before { background: #fff; }
.cst-cartao footer { margin-top: 8px; }
.cst-cartao footer p { margin: 2px 0 0; font: 11px ui-monospace, monospace; color: #4B465F; }
.cst-cartao-ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--cor); flex: 0 0 auto; }

/* ---- apertado (02/10/2026): sem altura para duas linhas por faculdade, a
   legenda de FONTE sai primeiro — a faculdade vira uma linha só. ---------- */
.cst-apertado .cst-fac-fonte { display: none; }
.cst-apertado .cst-fac-rotulo { font-size: 11px; }