:root {
  --bg: #0b0f1a;
  --bg2: #131a2b;
  --fg: #e9eef7;
  --muted: #8b97ad;
  --me: #1f6feb;
  --agent: #1c2740;
  --accent: #28d39a;
  --danger: #ff5c5c;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  background: radial-gradient(1200px 600px at 50% -10%, #16203a 0%, var(--bg) 60%);
  color: var(--fg);
  font: 16px/1.45 -apple-system, "Segoe UI", Roboto, sans-serif;
  overscroll-behavior: none;
}

#app {
  display: flex; flex-direction: column;
  height: 100dvh; max-width: 720px; margin: 0 auto;
}

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; font-weight: 600;
  border-bottom: 1px solid #1d2740;
}
.brand { letter-spacing: .2px; }
.status { font-size: 14px; color: var(--accent); }
.status.off { color: var(--danger); }

.convo {
  flex: 1; overflow-y: auto; padding: 18px 14px 8px;
  display: flex; flex-direction: column; gap: 10px;
}
.hint {
  margin: auto; text-align: center; color: var(--muted);
  font-size: 15px; max-width: 320px;
}

.msg {
  max-width: 82%; padding: 11px 14px; border-radius: 16px;
  white-space: pre-wrap; word-wrap: break-word; animation: pop .15s ease;
}
.msg.me { align-self: flex-end; background: var(--me); border-bottom-right-radius: 5px; }
.msg.agent { align-self: flex-start; background: var(--agent); border-bottom-left-radius: 5px; }
@keyframes pop { from { transform: translateY(6px); opacity: 0; } }

.live { padding: 0 16px; min-height: 24px; }
.live-user { color: var(--muted); font-style: italic; min-height: 20px; }

.textbar { display: flex; gap: 8px; padding: 6px 14px 0; }
.textbar input {
  flex: 1; background: var(--bg2); border: 1px solid #243049; color: var(--fg);
  border-radius: 12px; padding: 12px 14px; font-size: 16px; outline: none;
}
.textbar input:focus { border-color: var(--me); }
.textbar button {
  width: 48px; border: none; border-radius: 12px; background: var(--me);
  color: #fff; font-size: 18px; cursor: pointer;
}
.textbar button:active { transform: scale(.95); }

.controls {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 14px 0 28px;
}
.mic {
  position: relative; width: 84px; height: 84px; border-radius: 50%;
  border: none; cursor: pointer; background: var(--bg2);
  display: grid; place-items: center; color: var(--fg);
  box-shadow: 0 6px 24px rgba(0,0,0,.4);
  transition: transform .1s ease, background .2s ease;
}
.mic:active { transform: scale(.96); }
.mic-ico { font-size: 32px; }
.mic-ring {
  position: absolute; inset: -6px; border-radius: 50%;
  border: 2px solid transparent;
}
.mic.listening { background: #14361f; }
.mic.listening .mic-ring { border-color: var(--accent); animation: pulse 1.4s infinite; }
.mic.speaking { background: #2a1f3d; }
.mic.speaking .mic-ring { border-color: #a06bff; animation: pulse 1s infinite; }
@keyframes pulse { 0%{transform:scale(1);opacity:1} 70%{transform:scale(1.25);opacity:0} 100%{opacity:0} }

.state { color: var(--muted); font-size: 13px; min-height: 16px; }