* {
  box-sizing: border-box;
}

body {
  margin: 0;

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "Microsoft YaHei",
    sans-serif;

  background: #f5f5f7;

  display: flex;

  justify-content: center;

  height: 100vh;
}

.container {
  width: 100%;

  max-width: 700px;

  display: flex;

  flex-direction: column;

  height: 100vh;
}

header {
  padding: 16px;

  text-align: center;

  font-weight: 600;

  background: white;

  border-bottom: 1px solid #eee;
}

#chat {
  flex: 1;

  overflow-y: auto;

  padding: 16px;
}

.msg {
  margin: 10px 0;

  padding: 10px 14px;

  border-radius: 12px;

  max-width: 80%;

  line-height: 1.5;

  white-space: pre-wrap;

  word-wrap: break-word;
}

.user {
  background: #007aff;

  color: white;

  margin-left: auto;
}

.ai {
  background: white;

  border: 1px solid #eee;
}

form {
  display: flex;

  padding: 12px;

  background: white;

  border-top: 1px solid #eee;
}

input {
  flex: 1;

  padding: 10px 14px;

  border: 1px solid #ddd;

  border-radius: 20px;

  outline: none;

  font-size: 16px;
}

button {
  margin-left: 8px;

  padding: 10px 18px;

  border: none;

  border-radius: 20px;

  background: #007aff;

  color: white;

  cursor: pointer;
}

button:disabled {
  opacity: 0.5;

  cursor: not-allowed;
}