:root {
  --bg: #0e1116;
  --fg: #e8eef5;
  --muted: #7c8595;
  --accent: #4f8cff;
  --accent-active: #ff5b6b;
  --card: #161b23;
}
@media (prefers-color-scheme: light) {
  :root {
    --bg: #f6f8fb;
    --fg: #1a1f2a;
    --muted: #6a7382;
    --card: #ffffff;
  }
}
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; height: 100%; background: var(--bg); color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  overscroll-behavior: none;
}
main {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 100vh; padding: 24px; gap: 24px;
}
.status {
  font-size: 14px; color: var(--muted); min-height: 1.2em; text-align: center;
}
.orb {
  --silence-progress: 0%;
  width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, #6aa3ff 0%, var(--accent) 60%, #2c5fb8 100%);
  border: none; color: white; font-size: 22px; font-weight: 600;
  letter-spacing: 0.5px;
  box-shadow: 0 8px 36px rgba(79, 140, 255, 0.45), inset 0 -12px 24px rgba(0,0,0,0.18);
  cursor: pointer; transition: transform 0.15s ease, box-shadow 0.2s, background 0.4s;
  user-select: none;
  position: relative;
}
/* Thin progress ring shown only while listening — fills as silence approaches the cut.
 * conic-gradient makes a clock-style sweep. */
.orb.listening::after {
  content: '';
  position: absolute; inset: -10px;
  border-radius: 50%;
  background: conic-gradient(
    rgba(255, 255, 255, 0.85) var(--silence-progress),
    rgba(255, 255, 255, 0.0) var(--silence-progress)
  );
  -webkit-mask: radial-gradient(circle, transparent calc(50% - 4px), black calc(50% - 4px));
          mask: radial-gradient(circle, transparent calc(50% - 4px), black calc(50% - 4px));
  pointer-events: none;
  transition: background 0.05s linear;
}
.orb:disabled { opacity: 0.5; cursor: progress; }
.orb:active { transform: scale(0.96); }
.orb.listening {
  background: radial-gradient(circle at 30% 25%, #ff8a96, var(--accent-active) 60%, #b22231 100%);
  box-shadow: 0 8px 48px rgba(255, 91, 107, 0.6), inset 0 -12px 24px rgba(0,0,0,0.25);
  animation: pulse 1.4s ease-in-out infinite;
}
.orb.thinking {
  background: radial-gradient(circle at 30% 25%, #d6c0ff, #9a7eff 60%, #5a3acb 100%);
  animation: spin-slow 2.4s linear infinite;
}
.orb.speaking {
  background: radial-gradient(circle at 30% 25%, #b8f5d2, #45c97a 60%, #1f7a47 100%);
  animation: pulse 1.0s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { transform: scale(1.0); }
  50% { transform: scale(1.06); }
}
@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.transcript {
  width: 100%; max-width: 480px; min-height: 60px;
  padding: 14px 16px; background: var(--card); border-radius: 12px;
  font-size: 15px; line-height: 1.45; color: var(--fg);
  white-space: pre-wrap; word-wrap: break-word;
}
.transcript.hidden { display: none; }
.row { display: flex; gap: 12px; }
.ghost {
  background: transparent; border: 1px solid var(--muted); color: var(--fg);
  padding: 10px 18px; border-radius: 999px; font-size: 14px; cursor: pointer;
}
.ghost:disabled { opacity: 0.4; cursor: not-allowed; }
.settings {
  width: 100%; max-width: 480px; padding: 16px; background: var(--card);
  border-radius: 12px; display: flex; flex-direction: column; gap: 12px;
  font-size: 14px;
}
.settings.hidden { display: none; }
.settings label { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.settings input[type=range] { flex: 1; min-width: 120px; }

/* Live RMS bar — diagnostic so user sees what mic captures vs threshold */
.rms-row { display: flex; align-items: center; gap: 10px; }
.rms-label { font-size: 13px; color: var(--muted); white-space: nowrap; }
.rms-bar {
  flex: 1; height: 10px; border-radius: 6px; background: rgba(127, 127, 127, 0.2);
  position: relative; overflow: hidden;
}
.rms-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #45c97a 0%, #f0c93a 70%, #ff5b6b 100%);
  transition: width 60ms linear;
}
.rms-mark {
  position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--fg);
  opacity: 0.6;
}
.rms-num { font-size: 12px; color: var(--muted); width: 26px; text-align: right; font-variant-numeric: tabular-nums; }