:root {
  --bg: #060606;
  --ink: #f5f5f5;
  --muted: rgba(245, 245, 245, 0.5);
  --orb-idle-a: #4a4a4a;
  --orb-idle-b: #1a1a1a;
  --orb-listening-a: #ffffff;
  --orb-listening-b: #c9c9c9;
  --orb-talking-a: #ff6b5e;
  --orb-talking-b: #c81324;
  --ring-listening: rgba(255, 255, 255, 0.35);
  --ring-talking: rgba(200, 19, 36, 0.45);
  --pill-bg: #17171799;
  --danger: #ff5a52;
  --radius-lg: 28px;
  --level: 0; /* live audio volume 0-1, set from JS */

  /* Blob palette — idle (high-contrast grayscale water drift) */
  --blob-base-a: #5a5a5a;
  --blob-base-b: #050505;
  --blob-a: rgba(225, 225, 225, 0.8);
  --blob-b: rgba(70, 70, 70, 0.65);
  --blob-c: rgba(190, 190, 190, 0.6);
  --blob-d: rgba(20, 20, 20, 0.75);
  --blob-e: rgba(140, 140, 140, 0.5);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  height: 100%;
  overscroll-behavior: none;
}

body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
  overflow: hidden;
  touch-action: manipulation;
}

.app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  padding: 20px 20px calc(20px + env(safe-area-inset-bottom)) 20px;
  padding-top: calc(20px + env(safe-area-inset-top));
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 0.02em;
}

.brand {
  font-weight: 600;
  text-transform: lowercase;
  color: var(--muted);
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  transition: background 0.3s ease, color 0.3s ease;
  backdrop-filter: blur(8px);
}

.status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted);
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.3s ease, transform 0.3s ease, background 0.3s ease;
}

.status.live {
  background: rgba(200, 19, 36, 0.18);
  color: #ff8880;
}

.status.live::before {
  background: #ff5a52;
  opacity: 1;
  transform: scale(1);
  animation: dot-breathe 1.8s ease-in-out infinite;
}

@keyframes dot-breathe {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}

.stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 36px;
  min-height: 0;
}

.title {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 0.85;
  gap: 2px;
  margin-top: 20px;   /* ← add this line */
}

.title .atom {
  font-family: "Bebas Neue", "Inter", sans-serif;
  font-weight: 400;
  font-size: clamp(48px, 12vw, 88px);
  letter-spacing: 4px;
  color: #ffffff;
  text-shadow: 2px 4px 14px rgba(255, 255, 255, 0.25);
}

.title .voice {
  font-family: "Bebas Neue", "Inter", sans-serif;
  font-weight: 400;
  font-size: clamp(16px, 4vw, 26px);
  letter-spacing: 6px;
  text-transform: lowercase;
  color: #e50914;
  opacity: 0.95;
  text-shadow: 1px 2px 8px rgba(229, 9, 20, 0.4);
}

.orb-wrap {
  position: relative;
  --size: clamp(120px, 30vw, 168px);
  width: clamp(140px, 34vw, 190px);
  height: clamp(140px, 34vw, 190px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.orb {
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: transparent;
  overflow: hidden;
  clip-path: circle(50%);
  -webkit-clip-path: circle(50%);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  position: relative;
  z-index: 2;
  user-select: none;
  -webkit-user-select: none;
  animation: breathe 4s ease-in-out infinite;
  transform: scale(calc(1 + var(--level) * 0.18));
  transition: box-shadow 0.15s ease;
  will-change: transform;
}

/* Glossy glass sheen — sits above the liquid noise layer, gives the
   frosted/refractive "liquid glass" look via a specular highlight
   and a soft rim light around the edge. */
.orb::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  z-index: 3;
  pointer-events: none;
  background: radial-gradient(
      circle at 32% 26%,
      rgba(255, 255, 255, 0.55) 0%,
      rgba(255, 255, 255, 0.18) 18%,
      rgba(255, 255, 255, 0) 42%
    ),
    radial-gradient(circle at 70% 78%, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 30%);
  mix-blend-mode: screen;
}

.orb::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  z-index: 3;
  pointer-events: none;
  box-shadow: inset 0 -8px 16px rgba(0, 0, 0, 0.35), inset 0 6px 10px rgba(255, 255, 255, 0.15);
}

@keyframes breathe {
  0%,
  100% {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
  }
  50% {
    box-shadow: 0 8px 36px rgba(0, 0, 0, 0.65);
  }
}

.orb:hover {
  filter: brightness(1.05);
}

.orb:active {
  filter: brightness(0.95);
}

.orb-inner {
  position: absolute;
  inset: -35%;
  border-radius: 50%;
  background: radial-gradient(circle at 22% 28%, var(--blob-a) 0%, transparent 46%),
    radial-gradient(circle at 78% 22%, var(--blob-b) 0%, transparent 50%),
    radial-gradient(circle at 65% 75%, var(--blob-c) 0%, transparent 52%),
    radial-gradient(circle at 25% 78%, var(--blob-d) 0%, transparent 50%),
    radial-gradient(circle at 55% 45%, var(--blob-e) 0%, transparent 48%),
    radial-gradient(circle at 50% 50%, var(--blob-base-a), var(--blob-base-b));
  background-size: 260% 260%, 260% 260%, 260% 260%, 260% 260%, 240% 240%, 100% 100%;
  filter: blur(16px) saturate(1.4) contrast(1.25);
  animation: flow 7s ease-in-out infinite;
  transition: filter 0.4s ease;
}

/* Rotating conic sweep — a soft blurred band of light continuously
   circling the sphere. This is the main thing that reads as "liquid
   swirl" (same trick behind the ChatGPT-style orb). Pure transform
   rotation, no SVG filter dependency, so it renders everywhere. */
.orb-inner::before {
  content: "";
  position: absolute;
  inset: -20%;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(255, 255, 255, 0.5) 40deg,
    transparent 100deg,
    rgba(0, 0, 0, 0.55) 170deg,
    transparent 230deg,
    rgba(255, 255, 255, 0.3) 300deg,
    transparent 360deg
  );
  filter: blur(20px);
  mix-blend-mode: overlay;
  animation: spin-sweep 9s linear infinite;
  will-change: transform;
}

/* Slower counter-drifting wash for parallax depth. */
.orb-inner::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 65%, rgba(255, 255, 255, 0.4) 0%, transparent 40%),
    radial-gradient(circle at 68% 30%, rgba(0, 0, 0, 0.5) 0%, transparent 42%),
    radial-gradient(circle at 40% 15%, rgba(255, 255, 255, 0.25) 0%, transparent 38%);
  background-size: 220% 220%;
  filter: blur(10px);
  mix-blend-mode: overlay;
  animation: flow2 12s ease-in-out infinite reverse;
}

@keyframes flow {
  0% {
    background-position: 0% 0%, 100% 0%, 60% 100%, 0% 100%, 50% 50%, 0 0;
    transform: rotate(0deg) scale(1.05);
  }
  20% {
    background-position: 35% 55%, 70% 30%, 40% 75%, 20% 60%, 65% 25%, 0 0;
    transform: rotate(10deg) scale(1.15);
  }
  40% {
    background-position: 65% 15%, 45% 65%, 75% 45%, 45% 85%, 30% 60%, 0 0;
    transform: rotate(-8deg) scale(1.1);
  }
  60% {
    background-position: 20% 70%, 80% 55%, 25% 35%, 60% 25%, 70% 70%, 0 0;
    transform: rotate(9deg) scale(1.18);
  }
  80% {
    background-position: 55% 25%, 30% 80%, 65% 20%, 35% 55%, 20% 30%, 0 0;
    transform: rotate(-6deg) scale(1.08);
  }
  100% {
    background-position: 0% 0%, 100% 0%, 60% 100%, 0% 100%, 50% 50%, 0 0;
    transform: rotate(0deg) scale(1.05);
  }
}

@keyframes spin-sweep {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes flow2 {
  0% {
    background-position: 0% 0%, 100% 100%, 50% 0%;
  }
  33% {
    background-position: 60% 70%, 30% 40%, 80% 30%;
  }
  66% {
    background-position: 20% 30%, 70% 80%, 20% 60%;
  }
  100% {
    background-position: 0% 0%, 100% 100%, 50% 0%;
  }
}

/* Connecting: dashed ring spins around the orb while the session sets up */
.orb.connecting {
  animation: none;
}

.orb.connecting::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 2px dashed rgba(245, 245, 245, 0.3);
  animation: spin 2.2s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Listening state: mic is capturing — orb flows white/silver, reacts to your voice */
.orb.listening {
  animation: none;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    0 0 calc(14px + var(--level) * 50px) rgba(255, 255, 255, calc(0.3 + var(--level) * 0.5));
}

.orb.listening .orb-inner {
  --blob-base-a: #ffffff;
  --blob-base-b: #b9b9b9;
  --blob-a: rgba(255, 255, 255, 0.85);
  --blob-b: rgba(220, 220, 220, 0.7);
  --blob-c: rgba(255, 255, 255, 0.6);
  --blob-d: rgba(190, 190, 190, 0.7);
}

/* Talking state: bot audio is playing — orb flows red, reacts to its own voice */
.orb.talking {
  animation: none;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    0 0 calc(16px + var(--level) * 60px) rgba(200, 19, 36, calc(0.35 + var(--level) * 0.55));
}

.orb.talking .orb-inner {
  --blob-base-a: #ff3b30;
  --blob-base-b: #7a0d16;
  --blob-a: rgba(255, 107, 94, 0.85);
  --blob-b: rgba(229, 9, 20, 0.75);
  --blob-c: rgba(255, 150, 130, 0.55);
  --blob-d: rgba(150, 10, 20, 0.75);
}

/* Ripple rings — concentric circles emanating from the orb, colored per state */
.ring {
  position: absolute;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  width: var(--size, 160px);
  height: var(--size, 160px);
  transform: translate(-50%, -50%) scale(1);
  border: 1.5px solid transparent;
  pointer-events: none;
  opacity: 0;
  z-index: 1;
}

.orb-wrap:has(.orb.listening) .ring {
  border-color: var(--ring-listening);
  animation: ripple 2.6s ease-out infinite;
}

.orb-wrap:has(.orb.talking) .ring {
  border-color: var(--ring-talking);
  animation: ripple 1.6s ease-out infinite;
}

.orb-wrap:has(.orb.listening) .ring,
.orb-wrap:has(.orb.talking) .ring {
  opacity: 1;
}

.ring-1 {
  animation-delay: 0s;
}
.ring-2 {
  animation-delay: 0.5s;
}
.ring-3 {
  animation-delay: 1s;
}

@keyframes ripple {
  0% {
    transform: translate(-50%, -50%) scale(0.85);
    opacity: 0.55;
  }
  100% {
    transform: translate(-50%, -50%) scale(calc(1.6 + var(--level) * 0.4));
    opacity: 0;
  }
}

.hint {
  font-size: 14px;
  color: var(--muted);
  text-align: center;
  display: none;
  transition: opacity 0.2s ease;
}

.error-banner {
  font-size: 13px;
  color: #ffb3ae;
  background: rgba(200, 19, 36, 0.15);
  padding: 8px 14px;
  border-radius: 10px;
  max-width: 320px;
  text-align: center;
  display: none;
  animation: fade-in 0.25s ease;
}

.error-banner.visible {
  display: block;
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.controls {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 14px;
  background: transparent;
  backdrop-filter: blur(10px);
  border-radius: var(--radius-lg);
  align-self: center;
  margin-bottom: 12px;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s ease;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.controls.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.ctrl-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  border: none;
  background: transparent;
  padding:5px 12px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.1s ease;
  user-select: none;
  -webkit-user-select: none;
}

.ctrl-btn:hover {
  background: rgba(255, 255, 255, 0.08);
}

.ctrl-btn:active {
  transform: scale(0.96);
}

.ctrl-btn.muted {
  color: var(--muted);
}

.icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.end-btn {
  color: var(--danger);
}

.end-btn .icon {
  color: var(--danger);
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  .orb,
  .orb.connecting::after,
  .status.live::before,
  .error-banner,
  .ring {
    animation: none !important;
  }
}

/* Small phones: tighten spacing a bit */
@media (max-height: 640px) {
  .stage {
    gap: 20px;
  }
  .app {
    padding-left: 16px;
    padding-right: 16px;
  }
}
@media (max-width: 480px) {
  .title .atom {
    font-size: clamp(64px, 18vw, 100px);
  }
  .title .voice {
    font-size: clamp(20px, 6vw, 30px);
  }
}
@media (max-width: 480px) {
  .title .atom {
    font-size: clamp(64px, 18vw, 100px);
  }
  .title .voice {
    font-size: clamp(20px, 6vw, 30px);
  }
  .orb-wrap {
    --size: clamp(160px, 42vw, 220px);
    width: clamp(180px, 46vw, 240px);
    height: clamp(180px, 46vw, 240px);
  }
}