/* O orbe: contêiner, canvas WebGL, fallback em CSS, anel de escuta e rótulo.
   O JS escreve `data-state` e `--level`; o resto é daqui. */

.orb {
  --level: 0;
  position: relative;
  display: inline-block;
  width: var(--orb-size);
  aspect-ratio: 1;
  line-height: 0;
  user-select: none;
  -webkit-user-select: none;
  transition: width var(--t-slow) var(--ease);
  contain: layout style;
}
.orb--hero { width: var(--orb-size); }
.orb--inline { width: 84px; }
.orb--mini { width: 30px; }
@media (max-width: 719px) { .orb--inline { width: 44px; } }

/* Canvas maior que o corpo, para o brilho vazar. */
.orb-gl {
  position: absolute;
  left: -35%; top: -35%;
  width: 170%; height: 170%;
  display: block;
  pointer-events: none;
}

/* Fallback em CSS: corpo com gradientes radiais e halo desfocado. */
.orb-halo, .orb-body { display: none; }
.orb.is-fallback .orb-halo, .orb.is-fallback .orb-body { display: block; }

.orb-halo {
  position: absolute;
  inset: -30%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent-soft), rgba(255, 61, 154, 0.06) 45%, transparent 68%);
  filter: blur(10px);
  opacity: calc(0.7 + 0.6 * var(--level));
  pointer-events: none;
}
.orb-body {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 50% 50%, var(--bg-3), var(--bg-2) 72%);
  box-shadow:
    inset 0 0 0 1px var(--border-strong),
    inset 0 0 28px var(--accent-soft),
    0 0 30px var(--accent-soft);
  transform: scale(calc(1 + 0.05 * var(--level)));
}
.orb-body::before {
  /* filamentos: manchas de cor que giram devagar */
  content: "";
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(closest-side at 62% 64%, var(--orb-c), transparent 70%),
    radial-gradient(closest-side at 32% 58%, var(--orb-a), transparent 65%),
    radial-gradient(closest-side at 55% 30%, var(--orb-b), transparent 60%);
  opacity: 0.75;
  filter: blur(6px);
  animation: orb-drift 14s linear infinite;
}
.orb-body::after {
  /* núcleo e reflexo, fixos */
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 38% 34%, var(--orb-core) 0%, rgba(238, 241, 255, 0.35) 8%, transparent 22%),
    radial-gradient(circle at 50% 50%, transparent 55%, rgba(5, 6, 15, 0.55) 100%);
}
.orb--mini .orb-body::before { filter: blur(2px); }
.orb--mini .orb-halo { display: none !important; }

@keyframes orb-drift { to { transform: rotate(360deg); } }

.orb[data-state="thinking"] .orb-body::before { animation-duration: 4s; opacity: 1; }
.orb[data-state="listening"] .orb-body::before { animation-duration: 9s; opacity: 0.9; }
.orb[data-state="speaking"] .orb-body::before { animation-duration: 7s; opacity: 0.95; }
.orb[data-state="error"] { --orb-a: var(--danger); --orb-b: var(--danger); --orb-c: var(--accent-3); }
.orb[data-state="error"] .orb-body { box-shadow: inset 0 0 0 1px var(--danger), 0 0 36px var(--danger-soft); }

/* Anel de escuta: pulsa com o nível do microfone. */
.orb-ring {
  position: absolute;
  z-index: 3;
  left: 50%; top: 50%;
  width: 128%;
  aspect-ratio: 1;
  margin: -64% 0 0 -64%;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  box-shadow: 0 0 30px var(--accent-soft), inset 0 0 30px var(--accent-soft);
  opacity: 0;
  transition: opacity 300ms var(--ease), transform 90ms linear;
  pointer-events: none;
}
.orb--mini .orb-ring { display: none; }
.orb[data-state="listening"] .orb-ring { opacity: 1; animation: ring-breathe 2.4s ease-in-out infinite; }
@keyframes ring-breathe {
  0%, 100% { border-color: var(--border-strong); }
  50% { border-color: var(--accent-2); }
}

/* Rótulo do que está acontecendo (ferramenta em curso, "ouvindo…"). */
.orb-label {
  min-height: 20px;
  text-align: center;
  font: 500 var(--fs-xs)/1.4 var(--font-mono);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--muted);
  transition: color var(--t-base);
}
.orb-label.tool { text-transform: none; letter-spacing: 0.02em; color: var(--accent-2); }

@media (prefers-reduced-motion: reduce) {
  .orb, .orb-ring { transition: none; }
  .orb-body::before, .orb[data-state="listening"] .orb-ring { animation: none; }
}