front/static/homepages/puppy_chat/css/puppy_chat.scss

.background {
  position: absolute;

  width: 100%;
  height: 75%;
  top: 4%;
  z-index: -3;
}

.chat {
  position: absolute;
  width: 100%;
  top: 10%;
  height: 79%;
  z-index: -1;
  padding: 10px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;  /* 消息从上往下显示 */

}

.chat_area {
  margin-bottom: 10px;
  padding: 10px;
  border-radius: 15px;
  max-width: 75%;
  word-wrap: break-word;
  display: flex;
  flex-direction: row;  /* 头像和消息水平排列 */
  align-items: center;  /* 内容垂直居中 */
}

.user_message {
  background-color: #7879F1; /* 用户消息气泡背景色 */

  color: white;
  margin-top: 22%;  /* 让用户的消息气泡靠右 */
  margin-right: 5%;  /* AI消息靠左 */
  margin-left: auto;  /* 让AI的消息气泡靠右 */
  text-align: left;
  word-break: break-word;  /* 自动换行 */
}

.ai_message {
  background-color: #e5e5ea; /* AI消息气泡背景色 */
  color: black;
  margin-left: 2%;  /* 用户消息靠右 */
  margin-right: auto;  /* 让用户的消息气泡靠左 */
  text-align: left;
  word-break: break-word;  /* 自动换行 */
}

.avatar_container {
  display: flex;
  right: 10%;
  justify-content: center;
  align-items: center;
}

.ai_avatar_container {
  margin-right: 10px;  /* AI头像与气泡的间距 */
}

.user_avatar_container {
  margin-left: 10px;  /* 用户头像与气泡的间距 */
}

.ai_avatar, .user_avatar {
  right: 5%;
  width: 40px;  /* 头像的大小 */
  height: 40px;  /* 头像的大小 */
  border-radius: 50%;  /* 头像圆形 */
}

.message_content {
  max-width: 80%;  /* 限制消息气泡的最大宽度 */
}

.input_box {
  position: absolute;
  width: 100%;
  height: 9%;
  top: 79%;
}

.input_box_background {
  position: absolute;
  width: 98%;
  height: 90%;
  left: 1%;
  top: 5%;
}

.input_words {
  position: absolute;
  width: 70%;
  height: 80%;
  left: 5%;
  top: 10%;
}

.send_button {
  position: absolute;
  width: 12%;
  height: 70%;
  left: 84%;
  top: 15%;
}