* { box-sizing: border-box; }
body {
  font-family: -apple-system, "Noto Sans TC", sans-serif;
  background: #f5f3ef;
  margin: 0;
  padding: 1rem;
  color: #2c2c2c;
}
#app { max-width: 600px; margin: 0 auto; }
h1 { font-weight: 400; text-align: center; color: #5a4a8f; }
#status {
  text-align: center;
  padding: 0.5rem;
  background: #fff;
  border-radius: 8px;
  font-size: 0.9rem;
  color: #888;
  margin-bottom: 1rem;
}
#messages {
  background: #fff;
  border-radius: 8px;
  padding: 1rem;
  min-height: 300px;
  margin-bottom: 1rem;
  overflow-y: auto;
}
.msg-user, .msg-frieren {
  margin: 0.5rem 0;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  max-width: 80%;
}
.msg-user { background: #e8e3f5; margin-left: auto; text-align: right; }
.msg-frieren { background: #f0f0f0; }
#chat-form { display: flex; gap: 0.5rem; }
#chat-input { flex: 1; padding: 0.75rem; border-radius: 8px; border: 1px solid #ccc; }
button { padding: 0.75rem 1.5rem; border: none; border-radius: 8px; background: #5a4a8f; color: white; cursor: pointer; }
#voice-controls { text-align: center; margin: 1rem 0; }
#conversation-btn {
  padding: 1rem 2rem;
  font-size: 1.1rem;
  background: #c4a8e8;
  color: #2c2c2c;
  user-select: none;
  touch-action: none;
}
#conversation-btn.recording { background: #ff6b6b; color: white; }