* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: radial-gradient(circle at 50% 30%, #12161f, #07090d);
  color: #e8eaf0; font-family: system-ui, sans-serif;
  min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 18px;
  overflow: hidden;
}
h1 { font-size: 2.2rem; font-weight: 300; letter-spacing: 4px; }
h1 span { color: #6ee7b7; font-weight: 600; }
.orb {
  width: 110px; height: 110px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: all .35s ease; position: relative;
}
.orb.idle   { background: #1f2733; box-shadow: 0 0 30px #1f2733; }
.orb.listen { background: #10b981; box-shadow: 0 0 60px #10b98188; }
.orb.think  { background: #6366f1; box-shadow: 0 0 60px #6366f188; animation: spin 2s linear infinite; }
.orb.speak  { background: #f59e0b; box-shadow: 0 0 60px #f59e0b88; animation: breathe 1.2s ease infinite; }
.orb.error  { background: #ef4444; box-shadow: 0 0 60px #ef444488; }
.pulse { width: 46px; height: 46px; border-radius: 50%; background: #07090d; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes breathe { 50% { transform: scale(1.15); } }
.status { font-size: .95rem; color: #9aa3b2; letter-spacing: 1px; }
.status.listen { color: #34d399; }
.status.think  { color: #a5b4fc; }
.status.speak  { color: #fbbf24; }
.log {
  max-width: 520px; width: 90%; height: 130px; overflow-y: auto;
  font-size: .85rem; color: #8a94a6; background: #0d1117cc;
  border: 1px solid #1e2633; border-radius: 12px; padding: 10px 14px;
  display: none; line-height: 1.5;
}
.log .you { color: #6ee7b7; }
.log .me  { color: #a5b4fc; }
.mic {
  width: 64px; height: 64px; border-radius: 50%; border: none;
  background: #10b981; font-size: 26px; cursor: pointer;
  transition: transform .2s; box-shadow: 0 4px 24px #10b98144;
}
.mic:hover { transform: scale(1.08); }
.mic.on { background: #ef4444; box-shadow: 0 4px 24px #ef444466; }