body {
  font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  margin: 0; padding: 0; background: #f8fafc; color: #232323;
}
.chat-container {
  max-width: 500px; margin: 0 auto; padding: 0 1em;
  display: flex; flex-direction: column; height: 100vh;
}
#chat-messages {
  flex: 1 1 auto; overflow-y: auto; margin: 0; padding: 1em 0 0.5em 0;
  display: flex; flex-direction: column;
}
.msg {
  margin: 0.3em 0; padding: 0.7em 1em; border-radius: 1.2em; max-width: 80%;
  word-break: break-word; line-height: 1.4;
}
.msg.user { background: #e3f0fd; align-self: flex-end; }
.msg.assistant { background: #e9f5e1; align-self: flex-start; }
#chat-form {
  display: flex; flex-shrink: 0; gap: 0.5em; margin-bottom: 1em;
}
#chat-input {
  flex: 1 1 auto; font-size: 1em; padding: 0.7em; border-radius: 1.2em; border: 1px solid #aaa;
}
#chat-form button {
  font-size: 1em; padding: 0.7em 1.2em; border-radius: 1.2em; background: #368cff; color: #fff; border: none;
}
.login-container {
  max-width: 350px; margin: 5vh auto; padding: 2em; background: #fff; border-radius: 1.5em; box-shadow: 0 2px 12px #0001;
  display: flex; flex-direction: column; align-items: center;
}
.login-container input { margin-bottom: 1em; width: 90%; padding: 0.7em; border-radius: 0.7em; border: 1px solid #aaa;}
.error { color: red; margin-bottom: 1em; }