* { box-sizing: border-box; }
body {
  margin: 0; height: 100vh; display: flex; flex-direction: column;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: #f4f5f7; color: #1d1d1f;
}
header {
  padding: 14px 20px; background: #fff; border-bottom: 1px solid #e3e3e8;
  display: flex; justify-content: space-between; align-items: center;
}
header h1 { font-size: 17px; margin: 0; }
header .actions { display: flex; gap: 8px; }
header button { background: none; border: 1px solid #ccc; border-radius: 8px; padding: 6px 12px; cursor: pointer; }

#chat {
  flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 12px;
  max-width: 820px; width: 100%; margin: 0 auto;
}
.msg { padding: 10px 14px; border-radius: 14px; max-width: 80%; white-space: pre-wrap; line-height: 1.5; overflow-wrap: anywhere; }
.user { align-self: flex-end; background: #2b6ef2; color: #fff; border-bottom-right-radius: 4px; }
.assistant { align-self: flex-start; background: #fff; border: 1px solid #e3e3e8; border-bottom-left-radius: 4px; }
.error { align-self: flex-start; background: #fff3f3; color: #a32020; border: 1px solid #f2c4c4; }
.empty { color: #888; text-align: center; margin-top: 30vh; }

form { padding: 14px 20px; background: #fff; border-top: 1px solid #e3e3e8; }
.row { display: flex; gap: 8px; max-width: 820px; margin: 0 auto; }
textarea {
  flex: 1; resize: none; padding: 11px 12px; border: 1px solid #ccc; border-radius: 10px;
  font: inherit; min-height: 46px; max-height: 160px;
}
form button { border: 0; border-radius: 10px; padding: 0 18px; font-weight: 600; cursor: pointer; }
#send { background: #2b6ef2; color: #fff; }
#send:disabled { opacity: .5; cursor: default; }
#stop { background: #eee; }
#mic { background: #eee; font-size: 18px; padding: 0 14px; }
#mic:disabled { opacity: .5; cursor: default; }
#mic.listening { background: #e5484d; color: #fff; animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px rgba(229, 72, 77, .25); } }
#speak[aria-pressed="true"] { border-color: #2b6ef2; color: #2b6ef2; }
#convo[aria-pressed="true"] { background: #e5484d; border-color: #e5484d; color: #fff; }
#status { max-width: 820px; margin: 0 auto 8px; font-size: 13px; color: #666; }