* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  background: #f5f6f8; color: #222;
}
header { padding: 20px 16px 8px; text-align: center; }
header h1 { margin: 0; font-size: 1.4rem; }
.sub { margin: 6px 0 0; color: #777; font-size: .9rem; }
main { flex: 1; width: 100%; max-width: 760px; margin: 0 auto; padding: 12px 16px; }
#chat { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.msg { padding: 10px 14px; border-radius: 10px; white-space: pre-wrap; line-height: 1.6; word-break: break-word; }
.msg.user { align-self: flex-end; background: #2563eb; color: #fff; max-width: 85%; }
.msg.bot { align-self: flex-start; background: #fff; border: 1px solid #e3e5e8; max-width: 100%; }
.msg.error { border-color: #f5c2c2; color: #b42318; }
form { display: flex; gap: 8px; position: sticky; bottom: 12px; }
textarea { flex: 1; padding: 10px; font: inherit; border: 1px solid #ccd; border-radius: 8px; resize: vertical; }
button { padding: 0 20px; font: inherit; border: 0; border-radius: 8px; background: #2563eb; color: #fff; cursor: pointer; }
button:disabled { background: #9db5ef; cursor: not-allowed; }
.status { color: #888; font-size: .85rem; min-height: 1.2em; }
footer { text-align: center; color: #aaa; font-size: .8rem; padding: 12px; }