/* Voice screen — minimal, single focal point, ambient depth */

html, body { height: 100%; }
@supports (height: 100dvh) {
  html, body { height: 100dvh; } /* mobile Safari: exclude the collapsing URL bar */
}
body.test-page {
  display: flex; flex-direction: column;
  background:
    radial-gradient(38rem 26rem at 18% -6%, hsl(217 91% 60% / 0.10), transparent 65%),
    radial-gradient(34rem 24rem at 88% 12%, hsl(160 84% 39% / 0.08), transparent 60%),
    radial-gradient(30rem 22rem at 50% 110%, hsl(239 84% 67% / 0.08), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}

.top.slim { border-bottom: 0; background: transparent; backdrop-filter: none; }
.top-link {
  font-size: 15px; color: var(--fg-muted); text-decoration: none;
  width: 36px; height: 36px; display: grid; place-items: center;
  border-radius: var(--radius-full);
}
.top-link:hover { background: var(--bg-muted); color: var(--fg); }

.voice-screen {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column; align-items: center;
  justify-content: flex-end;
  padding: 0 max(1.25rem, env(safe-area-inset-left))
           calc(1rem + env(safe-area-inset-bottom))
           max(1.25rem, env(safe-area-inset-right));
  max-width: 34rem; margin: 0 auto; width: 100%;
}

/* phones held sideways: shrink the orb, put transcript beside it */
@media (max-height: 480px) and (orientation: landscape) {
  .voice-center { padding: .75rem 0 .5rem; gap: 8px; }
  .orb-stage { width: 84px; height: 84px; }
  .orb { width: 72px; height: 72px; }
  .orb-icon { width: 28px; height: 28px; }
  .transcript { mask-image: linear-gradient(to bottom, transparent, black 8%); }
}

/* transcript: quiet, fades at the top, grows above the orb */
.transcript {
  width: 100%; flex: 1; min-height: 0;
  overflow-y: auto; display: flex; flex-direction: column;
  justify-content: flex-end; gap: 10px;
  padding: 8px 4px;
  mask-image: linear-gradient(to bottom, transparent, black 18%);
  scrollbar-width: none;
}
.transcript::-webkit-scrollbar { display: none; }

.msg { max-width: 88%; display: grid; gap: 3px; }
.msg-label {
  font-size: 11px; line-height: 14px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: var(--fg-subtle);
  padding: 0 4px;
}
.msg-text {
  margin: 0; font-size: 14px; line-height: 21px;
  white-space: pre-wrap; overflow-wrap: anywhere;
  padding: 9px 13px; border-radius: 14px;
}
.msg-user { align-self: flex-end; justify-items: end; }
.msg-user .msg-text {
  background: var(--brand-soft); color: var(--fg);
  border-bottom-right-radius: 4px;
}
.msg-agent { align-self: flex-start; }
.msg-agent .msg-label { color: var(--brand); }
.msg-agent .msg-text {
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-bottom-left-radius: 4px;
}

.msg-text.tentative { opacity: .65; }

/* thinking indicator: three pulsing dots while the agent works */
.msg-text.dots { display: flex; gap: 4px; align-items: center; min-height: 21px; }
.msg-text.dots i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--fg-subtle);
  animation: dot 1.2s ease-in-out infinite;
}
.msg-text.dots i:nth-child(2) { animation-delay: .2s; }
.msg-text.dots i:nth-child(3) { animation-delay: .4s; }
@keyframes dot {
  0%, 60%, 100% { opacity: .35; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .msg-text.dots i { animation: none; }
}

/* ---------- orb ---------- */
.voice-center { display: grid; justify-items: center; gap: 16px; padding: 2rem 0 1.5rem; }

.orb-stage { position: relative; width: 128px; height: 128px; display: grid; place-items: center; }

/* soft rotating aurora glow behind the button */
.orb-stage::before {
  content: ""; position: absolute; inset: -26px;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    hsl(217 91% 60% / 0.35), hsl(160 84% 39% / 0.28),
    hsl(239 84% 67% / 0.32), hsl(217 91% 60% / 0.35));
  filter: blur(26px);
  animation: aurora 9s linear infinite;
  opacity: .55;
}

/* expanding halos — visible while listening */
.orb-halo {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1.5px solid hsl(160 84% 39% / 0.5);
  opacity: 0; pointer-events: none;
}
[data-live="listening"] .orb-halo { animation: halo 2.2s ease-out infinite; opacity: 1; }
[data-live="listening"] .orb-halo-2 { animation-delay: 1.1s; }

.orb {
  position: relative; z-index: 1;
  width: 112px; height: 112px; border-radius: 50%;
  border: 0; cursor: pointer; display: grid; place-items: center;
  color: #fff;
  background:
    radial-gradient(circle at 32% 28%, hsl(217 96% 72%), transparent 58%),
    linear-gradient(135deg, hsl(160 94% 30%) 0%, hsl(221 83% 53%) 55%, hsl(239 84% 67%) 100%);
  box-shadow:
    0 10px 30px hsl(221 83% 40% / 0.35),
    inset 0 1px 1px hsl(0 0% 100% / 0.35);
  transition: transform 150ms ease, filter 150ms ease;
}
.orb:hover { transform: scale(1.03); }
.orb:focus-visible { outline: none; box-shadow: 0 0 0 4px hsl(217 91% 60% / 0.35), 0 10px 30px hsl(221 83% 40% / 0.35); }

.orb-icon {
  width: 40px; height: 40px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  grid-area: 1 / 1;
  transition: opacity 150ms ease, transform 150ms ease;
}

/* equalizer — replaces the mic while the agent speaks */
.eq {
  grid-area: 1 / 1; display: flex; gap: 5px; align-items: center;
  height: 40px; opacity: 0; transform: scale(.8);
  transition: opacity 150ms ease, transform 150ms ease;
}
.eq i {
  width: 5px; border-radius: 3px; background: #fff; height: 12px;
  animation: eq 1s ease-in-out infinite; animation-play-state: paused;
}
.eq i:nth-child(1) { animation-delay: 0s; }
.eq i:nth-child(2) { animation-delay: .15s; }
.eq i:nth-child(3) { animation-delay: .3s; }
.eq i:nth-child(4) { animation-delay: .45s; }
.eq i:nth-child(5) { animation-delay: .6s; }

/* state wiring */
.orb[data-state="idle"] { animation: breathe 4.5s ease-in-out infinite; }
.orb[data-state="connecting"] { filter: saturate(.35) brightness(.9); animation: orb-pulse 1.2s ease-in-out infinite; }
.orb[data-state="listening"] {
  background:
    radial-gradient(circle at 32% 28%, hsl(160 84% 55%), transparent 58%),
    linear-gradient(135deg, hsl(160 94% 26%) 0%, hsl(160 84% 39%) 60%, hsl(174 70% 45%) 100%);
  box-shadow: 0 10px 30px hsl(160 84% 30% / 0.35), inset 0 1px 1px hsl(0 0% 100% / 0.35);
}
.orb[data-state="speaking"] { animation: orb-pulse 1.1s ease-in-out infinite; }
.orb[data-state="speaking"] .orb-icon { opacity: 0; transform: scale(.8); }
.orb[data-state="speaking"] .eq { opacity: 1; transform: scale(1); }
.orb[data-state="speaking"] .eq i { animation-play-state: running; }

@keyframes aurora { to { transform: rotate(360deg); } }
@keyframes halo {
  0% { transform: scale(1); opacity: .8; }
  100% { transform: scale(1.65); opacity: 0; }
}
@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.025); }
}
@keyframes orb-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}
@keyframes eq {
  0%, 100% { height: 10px; }
  50% { height: 32px; }
}

.voice-status { margin: 0; font-size: 13px; color: var(--fg-muted); }

/* conditions: one quiet line */
.slim-strip {
  display: flex; align-items: center; gap: 14px;
  font-size: 12px; color: var(--fg-subtle);
  background: none; border: 0; padding: 0; margin: 0;
}
.slim-strip .badge { font-size: 11px; padding: 3px 9px; }
.strip-item { font-variant-numeric: tabular-nums; }
.strip-item:empty { display: none; }
.strip-refresh {
  background: none; border: 0; color: var(--fg-subtle);
  font-size: 15px; cursor: pointer; padding: 6px;
  border-radius: var(--radius-full); line-height: 1;
}
.strip-refresh:hover { color: var(--fg); background: var(--bg-muted); }

@media (hover: none) {
  .orb:hover { transform: none; }
  .top-link:hover { background: transparent; color: var(--fg-muted); }
  .strip-refresh:hover { background: transparent; color: var(--fg-subtle); }
}

@media (prefers-reduced-motion: reduce) {
  .orb, .orb-stage::before, .orb-halo, .eq i { animation: none !important; }
  .orb { transform: none !important; }
}