/* ═══════════════════════════════════════════════════════════
   MOTOR DE AGENTES DE VOZ · orbe.css — el ORBE + cielo cósmico
   ------------------------------------------------------------
   Subset portado del shell-orbe de Jarvis-OS: SOLO el orbe (caja,
   halo, lienzo, status) y el cielo cósmico. SIN identidad: todo
   vía var(--token) del theme activo. La mecánica de partículas
   vive en assets/js/orbe.js (canvas).
   ═══════════════════════════════════════════════════════════ */

/* la zona del orbe se centra en el escenario; en desktop se corre apenas
   a la izquierda cuando el panel lateral está abierto (nunca se achica) */
.orbe-zona{
  display:flex;flex-direction:column;align-items:center;gap:20px;flex:none;
  transition:transform .5s cubic-bezier(.22,1,.36,1);
}
@media (min-width:821px){
  body.panel-open .orbe-zona{transform:translateX(calc(-1 * min(19vw,230px)))}
}

.orbe{
  position:relative;width:var(--orbe-size,min(64vmin,560px));aspect-ratio:1;flex:none;
  transition:width .5s cubic-bezier(.22,1,.36,1);
}
.orbe-halo{
  position:absolute;inset:-42%;border-radius:50%;
  background:var(--orbe-halo);filter:blur(26px);
  animation:orbeHalo 6s ease-in-out infinite;
  pointer-events:none;
}
/* el lienzo desborda la caja a propósito: le da aire al disco galáctico
   y a las ondas expansivas del canvas */
.orbe-lienzo{
  position:absolute;inset:-48%;width:196%;height:196%;
  display:block;pointer-events:none;
}

/* ── estados (la mecánica de partículas la lleva el JS; acá solo el halo) ── */
[data-estado="escuchando"] .orbe-halo{animation-duration:2.2s;opacity:.95}
[data-estado="pensando"] .orbe-halo{animation-duration:1.5s}
[data-estado="hablando"] .orbe-halo{animation-duration:.9s}

@keyframes orbeHalo{
  0%,100%{opacity:.55;transform:scale(.97)}
  50%{opacity:.9;transform:scale(1.05)}
}
@keyframes orbeTitila{
  0%,100%{filter:brightness(1)}
  40%{filter:brightness(1.22)}
  60%{filter:brightness(1.05)}
}

/* ── cielo cósmico (nebulosa viva + estrellas + fugaces — capas que
   orbe.js inyecta en .bg-galaxy) ── */
.bg-galaxy{overflow:hidden}
.cielo-nebulosa{position:absolute;inset:-32%;pointer-events:none;will-change:transform}
.cielo-nebulosa.a{background:var(--fondo-nebulosa-a);animation:cieloDerivaA 46s ease-in-out infinite alternate}
.cielo-nebulosa.b{background:var(--fondo-nebulosa-b);animation:cieloDerivaB 61s ease-in-out infinite alternate}
.cielo-estrellas{position:absolute;inset:0;pointer-events:none}
.cielo-estrellas.e1{background-image:var(--fondo-estrellas-1);animation:cieloTitila 5.5s ease-in-out infinite alternate}
.cielo-estrellas.e2{background-image:var(--fondo-estrellas-2);animation:cieloTitila 7.5s ease-in-out infinite alternate-reverse}
.cielo-fugaz{
  position:absolute;width:130px;height:2px;border-radius:99px;opacity:0;
  pointer-events:none;transform-origin:left center;
  background:var(--fondo-fugaz);
  animation:cieloFugaz var(--dur,1.2s) cubic-bezier(.2,.6,.4,1) forwards;
}
.cielo-fugaz::before{
  content:"";position:absolute;right:-2px;top:-1.5px;width:5px;height:5px;border-radius:99px;
  background:var(--fondo-fugaz-nucleo);
  box-shadow:0 0 10px var(--fondo-fugaz-nucleo),0 0 24px var(--fondo-fugaz-halo);
}
@keyframes cieloDerivaA{
  from{transform:translate3d(-2.5%,-1.5%,0) scale(1)}
  to{transform:translate3d(3%,2.5%,0) scale(1.12)}
}
@keyframes cieloDerivaB{
  from{transform:translate3d(2.5%,2%,0) scale(1.08)}
  to{transform:translate3d(-3%,-2%,0) scale(1)}
}
@keyframes cieloTitila{from{opacity:.35}to{opacity:.95}}
@keyframes cieloFugaz{
  0%{opacity:0;transform:rotate(var(--ang,28deg)) translateX(0)}
  12%{opacity:1}
  100%{opacity:0;transform:rotate(var(--ang,28deg)) translateX(var(--dist,340px))}
}

.orbe-status{
  position:relative;z-index:2;   /* por encima del canvas del orbe (que desborda su caja) */
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:10px;font-weight:600;
  letter-spacing:.26em;text-transform:uppercase;color:var(--text-3);
}
.orbe-status .dot{width:6px;height:6px;border-radius:50%;background:var(--ok);flex:none}
.orbe-status.pensando .dot,.orbe-status.escuchando .dot,.orbe-status.hablando .dot{
  background:var(--accent-2);animation:orbeTitila 1s ease-in-out infinite;
}

@media (max-width:820px){
  body.panel-open .orbe-zona{transform:none}   /* en mobile el orbe no se corre */
}

@media (prefers-reduced-motion:reduce){
  .orbe-halo,.cielo-nebulosa,.cielo-estrellas,.orbe-status .dot{animation:none !important}
  .cielo-fugaz{display:none}
  .orbe,.orbe-zona{transition:none}
  /* el canvas también respeta reduced-motion: orbe.js dibuja un frame estático */
}