/* 全局容器样式 */
.container {
  display: flex;
  flex-direction: column;
  height: 106vh;
  background-color: #ffffff; /* 背景为纯白色 */
  color: #333333; /* 深色文本，和白色背景形成对比 */
  margin-top: -100px;
  margin-bottom: -60px;
}
/* 标题区域 */
.header {
  padding: 10px;  /* 调整内边距 */
  text-align: center; /* 标题左对齐 */
  border-bottom: 1px solid #e0e0e0; /* 边框为浅灰色 */
}

.title {
  color: black; /* 深灰色标题 */
  font-size: 24px;
  font-weight: bold;
  text-transform: uppercase; /* 大写标题 */
}

/* 聊天区域 */
.chat-area {
  flex: 1;
  background-color: #ffffff; /* 白色背景 */
  overflow-y: auto; /* 允许滚动 */
  border-top: 1px solid #e0e0e0; /* 边框线 */
}

/* 消息气泡 */
.message {
  margin: 10px 10px;
  display: flex;
  flex-direction: row; /* 水平排列 */
}

.user-message, .assistant-message {
  padding: 10px;
  border-radius: 15px;
  border: 1px solid #dddddd;
  color: #333333;
  word-wrap: break-word; /* 自动换行 */
  word-break: break-all; /* 长单词自动拆分换行 */
  white-space: pre-wrap; /* 保留空白符并换行 */
  max-width: 80%; /* 最大宽度为70% */
  font-family: 'Arial', sans-serif;
}

.user-message {
  margin-left: auto;
  background-color: #f0f0f0; /* 用户消息为浅灰色背景 */
  border-radius: 15px 15px 0 15px; /* 圆角气泡 */
}

.assistant-message {
  margin-right: auto;
  background-color: #e8e8e8; /* AI消息背景色为稍深灰色 */
  border-radius: 15px 15px 15px 0; /* 圆角气泡 */
}

/* 输入区域 */
.input-area {
  display: flex;
  padding: 10px 15px;
  background-color: white; /* 输入区为浅灰色背景 */
  border-top: 1px solid #dddddd; /* 上方的分隔线 */
  position: sticky; /* 固定输入框在底部 */
  bottom: 0;
}

.input-box {
  flex: 1;
  padding: 10px;
  border: 1px solid #cccccc; /* 边框为浅灰色 */
  border-radius: 5px; /* 圆角输入框 */
  background-color: #ffffff; /* 输入框为白色 */
  color: #333333;
  margin-right: 10px;
  font-family: 'Arial', sans-serif;
  word-wrap: break-word; /* 输入框内长内容自动换行 */
  word-break: break-all;
}

/* 发送按钮样式 */
.send-btn {
  padding: 6px 12px;  /* 调整为更小的内边距 */
  background-color: #4a90e2; /* 亮蓝色 */
  color: #ffffff;
  border-radius: 5px; /* 保持圆角 */
  border: none;
  font-weight: bold;
  font-size: 14px; /* 缩小字体大小 */
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.send-btn:hover {
  background-color: #357ABD; /* 悬停时颜色加深 */
}

/* 图标颜色和输入框样式 */
input::placeholder {
  color: #aaaaaa; /* 输入框提示符为浅灰色 */
}