:root {
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: radial-gradient(circle at 50% 20%, #14151a 0%, #06070a 60%, #000 100%);
  color: #e8e8ec;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  overflow: hidden;
}

.app {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

.orb {
  --amp: 0;
  --hue-a: 210;
  --hue-b: 265;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  border: none;
  background: transparent;
  padding: 0;
  position: relative;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.orb-core {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, hsla(var(--hue-a), 95%, 72%, 0.95) 0%, transparent 45%),
    radial-gradient(circle at 68% 70%, hsla(var(--hue-b), 90%, 62%, 0.9) 0%, transparent 55%),
    radial-gradient(circle at 50% 50%, hsl(calc((var(--hue-a) + var(--hue-b)) / 2) 85% 55%) 0%, hsl(calc((var(--hue-a) + var(--hue-b)) / 2) 70% 30%) 70%, #0a0a0f 100%);
  filter: blur(1px) saturate(1.15);
  box-shadow:
    0 0 40px 6px hsla(var(--hue-a), 90%, 60%, calc(0.35 + var(--amp) * 0.45)),
    0 0 90px 20px hsla(var(--hue-b), 90%, 55%, calc(0.2 + var(--amp) * 0.35));
  transform: scale(calc(1 + var(--amp) * 0.22));
  transition: box-shadow 120ms ease, transform 70ms ease, background 400ms ease;
  animation: breathe 4.2s ease-in-out infinite;
}

@keyframes breathe {
  0%, 100% { filter: blur(1px) saturate(1.15) brightness(1); }
  50% { filter: blur(1.5px) saturate(1.3) brightness(1.08); }
}

.orb-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid hsla(var(--hue-a), 90%, 70%, 0);
  opacity: 0;
}

.orb.is-active .orb-ring {
  animation: ripple 2.6s ease-out infinite;
  border-color: hsla(var(--hue-a), 90%, 70%, 0.55);
}

.orb.is-active .ring-2 { animation-delay: 0.6s; }
.orb.is-active .ring-3 { animation-delay: 1.2s; }

@keyframes ripple {
  0% { transform: scale(0.85); opacity: 0.55; }
  100% { transform: scale(1.55); opacity: 0; }
}

.orb.state-idle { --hue-a: 210; --hue-b: 250; }
.orb.state-connecting { --hue-a: 40; --hue-b: 40; }
.orb.state-connecting .orb-core { animation: breathe 1s ease-in-out infinite; }
.orb.state-thinking { --hue-a: 40; --hue-b: 40; }
.orb.state-thinking .orb-core { animation: breathe 1s ease-in-out infinite; }
.orb.state-listening { --hue-a: 190; --hue-b: 250; }
.orb.state-speaking { --hue-a: 300; --hue-b: 20; }

.agent-info {
  font-size: 13px;
  letter-spacing: 0.03em;
  color: #6c6c76;
  text-transform: uppercase;
  min-height: 16px;
}

.status {
  font-size: 15px;
  letter-spacing: 0.02em;
  color: #9a9aa5;
  min-height: 20px;
  text-align: center;
}

.transcript {
  max-width: 560px;
  min-height: 24px;
  text-align: center;
  font-size: 16px;
  line-height: 1.5;
  color: #d7d7de;
  padding: 0 20px;
}

.end-call {
  position: absolute;
  bottom: 48px;
  left: 50%;
  transform: translateX(-50%);
  background: #d92d3f;
  color: white;
  border: none;
  padding: 12px 28px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(217, 45, 63, 0.4);
}

.end-call:hover { background: #c8202f; }

.hidden { display: none !important; }