.header-title {
  font-family: "FangSong", serif; /* 使用仿宋体 */
  font-weight: bold; /* 加粗 */
  text-align: center; /* 居中 */
}
/* 左边栏样式 */
.left_sidebar {
  width: 30%;
  height: 100%;
  background-color: #f0f0f0;
  border-right: 1px solid #ccc;
  position: absolute;
  top: 0;
  left: 0;
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out; /* 动画效果 */
}
/* 左边栏隐藏时样式 */
.left_sidebar.hidden {
  transform: translateX(-100%); /* 左移隐藏 */
  opacity: 0; /* 渐隐效果 */
}
/* 图标样式 */
.icon {
  position: absolute; /* 图标相对于窗口位置 */
  font-size: calc(2vw + 10px);
  color: gray;
  cursor: pointer;
  padding: 1vw; /* 动态调整内边距 */
  background-color: transparent;
  border-radius: 10%;
  z-index: 100; /* 确保图标显示在最上层 */
}
/* 左上角图标 */
.top_left {
  top: calc(7vh); /* 距离页面顶部2% */
  left: calc(3vw); /* 距离页面左侧2% */
}
/* 右上角图标 */
.top_right {
  top: calc(7vh); /* 距离页面顶部2% */
  left: calc(20vw); /* 距离页面右侧10% */
}
/* 白色盒子样式 */
.sidebar_box {
  background: url('/assets/images/sidebarbox-background.png') no-repeat center/cover;
  margin: 5px; /* 盒子内部与边栏之间的间距 */
  padding: 2px; /* 内边距增加视觉空间 */
  border-radius: 10px; /* 圆角 */
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px; /* 轻微阴影增强视觉层次感 */
  height: calc(75%); /* 减去上下间距的高度 */
  margin-top: 100px; /* 盒子与顶部的距离 */
  overflow-y: scroll; /* 滚动支持 */
}
/* 左边栏内容样式 */
.left_sidebar_content {
  font-size: 16px;
  color: #333; /* 深灰色字体 */
  font-family: "FangSong", serif; /* 使用仿宋体 */
  line-height: 1.5; /* 增加行高，提升可读性 */
}
/* 新增的透明盒子 */
.transparent_box {
  display: flex;
  align-items: center;
  background-color: transparent;
  margin-top: 10px;
  margin: 5px; /* 盒子内部与边栏之间的间距 */
  padding: 10px;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.transparent_box:hover {
  background-color: rgba(0, 0, 0, 0.1);
}
/* 左侧图标样式 */
.export_icon {
  margin-right: 10px;
  font-size: calc(2vw + 10px);
  color: gray;
}
/* 右侧文字样式 */
.export_text {
  color: gray;
  font-size: 14px;
  font-family: "FangSong", serif; /* 使用仿宋体 */
  font-weight: bold;
}
/* 清理列表默认样式 */
.left_sidebar_content ul {
  list-style-type: none; /* 去掉列表前的点 */
  padding: 0; /* 去掉内边距 */
  margin: 0; /* 去掉外边距 */
}
/* 列表项基础样式 */
.left_sidebar_content ul li {
  cursor: pointer; /* 鼠标指针变为手型 */
  padding: 10px 15px; /* 内边距使列表项看起来更分明 */
  border-radius: 5px; /* 圆角样式 */
  transition: background-color 0.3s ease; /* 鼠标悬停时的过渡效果 */
  display: flex; /* 使用 flex 排版 */
  align-items: center; /* 图标和文字垂直居中 */
}

/* 鼠标悬停时的样式 */
.left_sidebar_content ul li:hover {
  background-color: #f0f0f0; /* 鼠标悬停背景色 */
}

/* 当前选中项的样式 */
.left_sidebar_content ul li.active {
  background-color: rgba(196, 196, 196, 0.5); /* 选中项背景色 */
  color: #fff; /* 选中项文字颜色 */
}
/* 对话项文字样式 */
.conversation-item span {
  font-size: 16px; /* 文本大小 */
  white-space: nowrap; /* 不换行 */
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 用省略号表示超出部分 */
  flex: 1; /* 文字部分自动占据剩余空间 */
}
/* 右侧对话区域 */
.chat_area {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: margin-left 0.3s ease; /* 动画过渡 */
}
/* 对话内容显示框 */
.chat-container{
  display: flex;
  flex-direction: column;
  align-items: flex-start;  /* 默认左对齐 */
  flex-grow: 1;
  overflow-y: auto;
  margin-bottom: 10px;
  background-color: rgba(249, 249, 249, 0.7); 
  padding: 10px;
  height: calc(80% - 15px); /* 让它占据大部分空间 */
}
/* 单条消息容器 */
.message-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;  /* 使内容右对齐，头像和气泡分别在左右 */
  margin: 5px;
  width: 100%;  /* 占满宽度 */
}
/* 用户消息气泡 */
.user-bubble {
  max-width: 80%;
  padding: 10px;
  border-radius: 20px;
  font-size: 16px;
  line-height: 1.4;
  word-wrap: break-word;
  white-space: pre-line; /* 保留换行 */
  display: inline-block;
  background: url('/assets/images/bubble-background.png') no-repeat center/cover;
  color: black;
  margin-right: 5px; /* 留出空间给头像 */
  border-radius: 20px 20px 0 20px;  /* 气泡形状 */
  font-family: "FangSong", serif; /* 使用仿宋体 */
  /* 添加阴影效果 */
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2), /* 外阴影 */
              inset -2px -2px 5px rgba(255, 255, 255, 0.5), /* 内阴影高光 */
              inset 2px 2px 5px rgba(0, 0, 0, 0.1); /* 内阴影暗部 */
}
/* 用户消息右对齐 */
.user-bubble{
  flex-direction: row;  /* 保证头像和气泡从左到右排列 */
}
/* AI 消息外层容器：左对齐 */
.ai-message-row {
  display: flex;
  justify-content: flex-start; /* 左对齐 */
  margin: 10px 0; /* 每条消息的上下间距 */
  width: 100%; /* 占满父容器宽度 */
}
/* AI消息气泡 */
.ai-bubble{
  max-width: 80%;
  padding: 10px;
  border-radius: 20px;
  font-size: 16px;
  line-height: 1.4;
  word-wrap: break-word;
  white-space: pre-line; /* 保留换行 */
  display: inline-block;
  background: url('/assets/images/bubble-background.png') no-repeat center/cover;
  color: black;
  margin-right: 5px; /* 留出空间给头像 */
  border-radius: 20px 20px 20px 0px;  /* 气泡形状 */
  font-family: "FangSong", serif; /* 使用仿宋体 */
  /* 添加阴影效果 */
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2), /* 外阴影 */
              inset -2px -2px 5px rgba(255, 255, 255, 0.5), /* 内阴影高光 */
              inset 2px 2px 5px rgba(0, 0, 0, 0.1); /* 内阴影暗部 */
}
/* AI 消息图片 */
.ai-image img {
  max-width: 100%;
  height: auto;
  border-radius: 10px; /* 图片圆角 */
  margin-top: 5px;
}
/* 头像容器 */
.user-avatar {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background-color: #f1f1f1;
  color: #000;
}
/* 头像样式 */
.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;  /* 圆形头像 */
  object-fit: cover;
}
/* 输入框盒子的样式 */
.input_box {
  display: flex;
  align-items: center;           /* 垂直居中对齐 */
  justify-content: center; 
  justify-content: space-between; /* 左右对齐 */
  width: 100%;                   /* 让输入框区域宽度充满父容器 */
  padding: 5px;                 /* 内边距 */
  margin-bottom: 10px;           /* 距离底部 5px */
  background: url('/assets/images/button-background2.png') no-repeat center/cover;
  border-radius: 30px;            /* 圆角 */
  box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 12px; /* 阴影效果 */
  position: relative;
}
/* 语音输入按钮 */
.voice_button {
  color: gray;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;  /* 去掉默认边框 */
  --background: transparent;
  cursor: pointer;
  margin-right: 0px; /* 与输入框之间的小间隙 */
}
/* 输入框样式 */
ion-input {
  flex-grow: 1;  /* 使输入框占据剩余空间 */
  max-width: calc(100%); /* 设置输入框的最大宽度，留出空间给发送按钮 */
  --padding-start: 10px;
  --padding-end: 10px;
  --border-radius: 30px;
  --background: #f9f9f9;
  box-sizing: border-box;
  font-family: "FangSong", serif;
  font-weight: bold;
  margin-right: 0px; /* 确保输入框与发送按钮之间有小间隙 */
}
/* 输入框在获得焦点时的样式 */
ion-input:focus {
  --background: #fff;  /* 获取焦点时背景变为白色 */
  --box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);  /* 聚焦时显示阴影 */
}
/* 发送按钮 */
.send_button{
  color: gray;
  display: flex;
  align-items: center;
  justify-content: center;
  --background: transparent;
  border: none;  /* 去掉默认边框 */
  cursor: pointer;
  margin-left: 0px; /* 与输入框之间的小间隙 */
}
/* 终止按钮 */
.stop_button{
  color: gray;
  display: flex;
  align-items: center;
  justify-content: center;
  --background: transparent;
  border: none;  /* 去掉默认边框 */
  cursor: pointer;
  margin-left: 0px; /* 与输入框之间的小间隙 */
}