* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  background: #0f1115;
  color: #e7e9ee;
}
.app {
  max-width: 720px;
  height: 100%;
  margin: 0 auto;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 16px;
}
header { display: flex; align-items: center; justify-content: space-between; }
h1 { font-size: 20px; margin: 0; font-weight: 600; }
.status { font-size: 13px; padding: 4px 10px; border-radius: 999px; background: #262a33; }
.status.connected { background: #12392a; color: #6ee7b7; }
.status.error { background: #3f1d1d; color: #fca5a5; }

.orb-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 12px 0; }
.orb {
  width: 120px; height: 120px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #4b5563, #1f2937);
  transition: transform 0.12s ease-out, background 0.3s;
}
.orb[data-state="listening"] { background: radial-gradient(circle at 35% 35%, #60a5fa, #1d4ed8); }
.orb[data-state="thinking"] { background: radial-gradient(circle at 35% 35%, #fbbf24, #b45309); animation: pulse 1.2s infinite; }
.orb[data-state="speaking"] { background: radial-gradient(circle at 35% 35%, #34d399, #047857); }
@keyframes pulse { 50% { transform: scale(0.92); } }
.agent-state { font-size: 14px; color: #9ca3af; }

.transcript {
  flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px;
  padding: 8px; border-radius: 12px; background: #161922;
}
.line { max-width: 85%; padding: 8px 12px; border-radius: 12px; line-height: 1.5; font-size: 15px; white-space: pre-wrap; }
.line.user { align-self: flex-end; background: #1d4ed8; }
.line.agent { align-self: flex-start; background: #262a33; }
.line.interim { opacity: 0.6; }

.warning { background: #3f2d12; color: #fcd34d; padding: 10px 12px; border-radius: 10px; font-size: 14px; line-height: 1.5; }

.model-picker { display: flex; align-items: center; gap: 10px; font-size: 14px; color: #9ca3af; }
.model-picker select {
  flex: 1; padding: 10px 12px; font-size: 15px; border-radius: 10px;
  border: 1px solid #2f3440; background: #161922; color: #e7e9ee;
}
.model-picker select:disabled { opacity: 0.6; }

.controls { display: flex; gap: 12px; }
.btn {
  flex: 1; padding: 14px; font-size: 16px; border: none; border-radius: 12px;
  background: #262a33; color: #e7e9ee; cursor: pointer;
}
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn.primary { background: #2563eb; }
.btn.danger { background: #b91c1c; }