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

/* ── Orb Stage ── */
.orb-stage {
  position: relative;
  width: 100px;
  height: 100px;
  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 { width: 50px; height: 50px; border: 1px solid rgba(40,212,255,.28); box-shadow: 0 0 5px rgba(40,212,255,.12); }

/* 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: #E8C84A; }
.orb-stage.listening .ring-2 { animation: rippleOut 2s infinite cubic-bezier(.1,.8,.3,1) .35s; border-color: #E8C84A; }
.orb-stage.listening .ring-3 { animation: rippleOut 2s infinite cubic-bezier(.1,.8,.3,1) .7s; border-color: #E8C84A; }
@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; }
}

/* ── 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: #E8C84A; 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; } }