/* ============================================================
   VLM UI FX — vanilla, zero-dependency, self-hosted
   Voice glow + Thinking orbs + Border beam
   - brand-variable driven (works in light/dark themes)
   - respects prefers-reduced-motion
   - animations are transform/opacity only (cheap)
   ============================================================ */

/* ---------- shared ---------- */
.fx-host { position: relative; }

.fx-idle *,
.fx-idle *::before,
.fx-idle *::after { animation-play-state: paused !important; }

/* ================= 1) VOICE GLOW ================= */
.fx-glow {
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: -14px;
  height: 68px;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transform: translateY(14px) scaleX(.86);
  transition: opacity .35s ease, transform .45s cubic-bezier(.2,.9,.25,1.1);
  filter: blur(18px);
  background:
    radial-gradient(60% 120% at 50% 100%, var(--accent, #00b3b3) 0%, transparent 70%),
    radial-gradient(40% 90% at 22% 100%, var(--brand-light, #2aa3a9) 0%, transparent 70%),
    radial-gradient(40% 90% at 78% 100%, var(--brand-light, #2aa3a9) 0%, transparent 70%);
}
.fx-voice-on .fx-glow {
  opacity: .55;
  transform: translateY(0) scaleX(1);
  animation: fxGlowSweep 4.2s ease-in-out infinite;
}
@keyframes fxGlowSweep {
  0%, 100% { transform: translateY(0) scaleX(1) translateX(-2%); }
  50%      { transform: translateY(-2px) scaleX(1.03) translateX(2%); }
}
.fx-voice-busy .fx-glow {
  opacity: .38;
  animation: fxGlowSweep 2.4s ease-in-out infinite;
}

/* ================= 2) THINKING ORBS ================= */
.fx-orbs { display: inline-flex; align-items: center; gap: 5px; height: 18px; vertical-align: middle; }
.fx-orbs i {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent, #00b3b3);
  opacity: .55;
  animation: fxOrb 1.25s ease-in-out infinite;
  transform: translateY(0) scale(.85);
}
.fx-orbs i:nth-child(2) { animation-delay: .16s; }
.fx-orbs i:nth-child(3) { animation-delay: .32s; }
.fx-orbs i:nth-child(4) { animation-delay: .48s; }
@keyframes fxOrb {
  0%, 100% { transform: translateY(0) scale(.8);  opacity: .45; }
  40%      { transform: translateY(-5px) scale(1.15); opacity: 1; }
}

/* hide the legacy 3-dot indicator when orbs are active */
.assistant-typing.fx-orbs-on > span { display: none; }

.fx-orbs-chip {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 12px;
  padding: 8px 14px;
  border: 1px solid var(--border, #dfe7e5);
  border-radius: 12px;
  background: var(--surface-2, #f2f5f4);
  color: var(--text-muted, #5d6b6a);
  font-size: 12.5px;
}

/* ================= 3) BORDER BEAM ================= */
@property --fx-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.fx-beam { position: relative; }
.fx-beam > .fx-beam-edge {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1.4px;
  pointer-events: none;
  z-index: 2;
  background: conic-gradient(from var(--fx-angle),
      transparent 0deg, transparent 250deg,
      var(--accent, #00b3b3) 310deg,
      var(--brand-light, #2aa3a9) 335deg,
      transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: .0;
  animation: fxBeamSpin 6.5s linear infinite, fxBeamFade .6s ease .15s forwards;
}
@keyframes fxBeamSpin { to { --fx-angle: 360deg; } }
@keyframes fxBeamFade { to { opacity: .92; } }

/* ================= motion preferences & small screens ================= */
@media (prefers-reduced-motion: reduce) {
  .fx-glow, .fx-voice-on .fx-glow, .fx-voice-busy .fx-glow { animation: none !important; transition: none !important; }
  .fx-orbs i { animation: none !important; opacity: .9; }
  .fx-beam > .fx-beam-edge { animation: none !important; opacity: .55; }
}
@media (max-width: 900px) {
  .fx-glow { height: 48px; filter: blur(14px); }
}