/* ── Global RUÜH Widget ── */
#ruuh-widget-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ── Orb Stage ── */
.orb-stage {
  perspective: 1200px;
  transform-style: preserve-3d;
  perspective: 1200px;
  transform-style: preserve-3d;
  position: relative;
  width: 90px;
  height: 90px;
  display: grid;
  place-items: center;
  perspective: 1000px;
}

/* Orbital rings */
.ring {
  position: absolute;
  inset: 0;
  margin: auto;
  border-radius: 50%;
  pointer-events: none;
  transition: all .6s cubic-bezier(.4,0,.2,1);
}
.ring-1 { width: 90px; height: 90px; border: 1px solid rgba(40,212,255,.1); box-shadow: 0 0 10px rgba(40,212,255,.05); }
.ring-2 { width: 70px; height: 70px; border: 1px solid rgba(40,212,255,.18); box-shadow: inset 0 0 7px rgba(40,212,255,.08); }
/* ring-3 = the innermost circle BEHIND the RUÜH seal: a pure black-hole lens.
   No glow, no tint — deep black that bulges (convex dome) so the seal floats
   in real 3D depth when the rings pulse. Confined to this innermost orbit only. */
.ring-3 {
  width: 50px;
  height: 50px;
  border: 1px solid rgba(40,212,255,.28);
  background: radial-gradient(circle at 50% 34%, rgba(0,0,0,.95), #000 50%, #000 100%);
  box-shadow: inset 0 2px 6px rgba(150,200,255,.05), inset 0 -9px 16px rgba(0,0,0,1), inset 0 0 8px rgba(0,0,0,1);
}

/* Resting micro-breath */
@keyframes orbBreath {
  0%, 100% { transform: scale(1); opacity: .8; }
  50% { transform: scale(1.015); opacity: 1; }
}
.ring-1 { animation: orbBreath 7s ease-in-out infinite; }
.ring-2 { animation: orbBreath 7s ease-in-out infinite .8s; }
.ring-3 { animation: orbBreath 7s ease-in-out infinite 1.6s; }

/* Listening (gold ripple) */
.orb-stage.listening .ring-1 { animation: rippleOut 2s infinite cubic-bezier(.1,.8,.3,1); border-color: #00E5CC; }
.orb-stage.listening .ring-2 { animation: rippleOut 2s infinite cubic-bezier(.1,.8,.3,1) .35s; border-color: #00E5CC; }
.orb-stage.listening .ring-3 { animation: rippleOut 2s infinite cubic-bezier(.1,.8,.3,1) .7s; border-color: #00E5CC; }
@keyframes rippleOut {
  0% { transform: scale(.55); opacity: 1; }
  100% { transform: scale(1.45); opacity: 0; }
}

/* Speaking (cyan pulse) */
.orb-stage.speaking .ring-1 { animation: pulseRing 1.1s infinite ease-in-out; border-color: #0D9488; box-shadow: 0 0 15px rgba(40,212,255,.25); }
.orb-stage.speaking .ring-2 { animation: pulseRing 1.1s infinite ease-in-out .18s; border-color: #0D9488; }
.orb-stage.speaking .ring-3 { animation: pulseRing 1.1s infinite ease-in-out .36s; border-color: #0D9488; }
@keyframes pulseRing {
  0%, 100% { transform: scale(.86); opacity: .3; }
  50% { transform: scale(1.12); opacity: 1; }
}

/* Projecting (0coder projection flash -- brief luminous bloom, restores after) */
.orb-stage.projecting .ring-1 { animation: projFlash .9s infinite ease-in-out; border-color: rgba(168,85,247,.9); box-shadow: 0 0 22px rgba(168,85,247,.55), 0 0 40px rgba(40,212,255,.3); }
.orb-stage.projecting .ring-2 { animation: projFlash .9s infinite ease-in-out .15s; border-color: rgba(40,212,255,.85); }
.orb-stage.projecting .ring-3 { animation: projFlash .9s infinite ease-in-out .3s; border-color: rgba(168,85,247,.8); }
@keyframes projFlash {
  0%, 100% { transform: scale(.9); opacity: .55; }
  50% { transform: scale(1.28); opacity: 1; }
}

/* ── Holographic Orb Button ── */
.orb-btn {
  width: 26px;
  height: 26px;
  background: transparent;
  border: none;
  box-shadow: none;
  cursor: pointer;
  position: absolute;
  inset: 0;
  margin: auto;
  outline: none;
  z-index: 10;
  transition: all .35s cubic-bezier(.34,1.56,.64,1);
  display: grid;
  place-items: center;
}
.orb-btn:hover { 
  transform: scale(1.15) translateZ(10px); 
}
.orb-btn:active { transform: scale(.93); }

@keyframes ruuhBreath {
  0%, 100% {
    filter: drop-shadow(0 0 7px rgba(40,212,255,.6)) drop-shadow(0 0 12px rgba(0,255,255,.3));
    transform: translateY(0) scale(1);
  }
  50% {
    filter: drop-shadow(0 0 14px rgba(40,212,255,.95)) drop-shadow(0 0 22px rgba(0,255,255,.6));
    transform: translateY(-1.5px) scale(1.05);
  }
}
.orb-inner {
  width: 100%;
  height: 100%;
  animation: ruuhBreath 5s ease-in-out infinite;
  display: grid;
  place-items: center;
  position: relative;
  z-index: 2;
}
.orb-stage.speaking .orb-inner {
  animation-duration: 1.2s;
  filter: drop-shadow(0 0 16px rgba(40,212,255,.95)) drop-shadow(0 0 27px rgba(40,212,255,.8));
}
.orb-stage.listening .orb-inner {
  animation-duration: 1.7s;
  filter: drop-shadow(0 0 14px rgba(201,162,39,.85)) drop-shadow(0 0 24px rgba(201,162,39,.6));
}
.ruuh-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 6px rgba(40, 212, 255, 0.5));
}

/* ── State Badge ── */
.state-badge {
  font-family: 'Space Mono', monospace, sans-serif;
  font-size: 10px;
  letter-spacing: 2px;
  color: #3E5468;
  text-transform: uppercase;
  min-height: 16px;
  transition: color .4s ease, opacity .4s ease;
  opacity: .6;
  margin-top: 10px;
  text-align: center;
}
.orb-stage.listening ~ .state-badge,
.state-badge.listening { color: #00E5CC; opacity: 1; }
.orb-stage.speaking ~ .state-badge,
.state-badge.speaking { color: #0D9488; opacity: 1; }
.state-badge.error { color: #FF6B6B; opacity: 1; }
.state-badge.connecting { color: #3A9FFF; opacity: 1; animation: blink 1s steps(1) infinite; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }