ion-toolbar {
  height: 70px; /* 设置你想要的高度 */
  --min-height: 60px; /* 设置最小高度 */
  padding: 0; /* 去掉内边距 */
  display: flex; /* 使用Flexbox布局 */
  align-items: center; /* 垂直居中对齐 */
  --background: transparent; /* 去除背景色 */
}
//头部样式
ion-header{
  background-color: #99d75c ;
  --background: transparent; /* 去除背景色 */
}
//头部标题
ion-title {
  margin: 0; /* 去掉默认的外边距 */
  flex: 1; /* 让标题占据剩余空间 */
  text-align: center; /* 让标题文本居中 */
  font-size: 24px;
}

/* 文本输入框样式 */
.input-box {
background-color: white; /* 设置输入框背景为白色 */
border-radius: 8px; /* 圆角 */

height: 40px; /* 高度 */
flex: 1; /* 让输入框占据剩余空间 */
}

/* 底部内容容器 */
.footer-content {
display: flex; /* 使用Flexbox布局 */
align-items: center; /* 垂直居中对齐 */
justify-content: center; /* 水平居中对齐 */
width: 100%; /* 宽度100% */
}
//底部按钮样式
ion-buttons {
margin: 0 5px; /* 按钮之间的间距 */
}
//底部发送按钮圆圈样式
.circle{
width: 35px;
height: 35px;
border-radius: 50%;
border:2px white solid;
display: flex; /* 使用Flexbox布局 */
align-items: center; /* 垂直居中对齐 */
justify-content: center; /* 水平居中对齐 */
}

//聊天内容容器样式
.chat-container {
display: flex;
flex-direction: column;
padding-top: 10px;
}
//聊天内容样式
.message-container {
display: flex; /* 使用Flexbox布局 */
justify-content: flex-end; /* 用户消息在右边，AI消息在左边 */
margin: 10px 0; /* 消息之间的间距 */
}
//消息内容样式
.message-content {
display: flex; /* 使用Flexbox布局 */
align-items: center; /* 垂直居中对齐 */
}
//用户消息和头像样式
.user-message-content {
justify-content: flex-end; /* 用户消息和头像在右边 */
}
//AI消息和头像样式
.ai-message-content {
justify-content: flex-start; /* AI消息和头像在左边 */
}
//气泡样式
.message-bubble {
background-color: #99d75c; /* 绿色气泡的背景色 */
color: white; /* 字体颜色 */
border-radius: 15px; /* 圆角 */
padding: 10px 15px; /* 内边距 */
max-width: 60%; /* 最大宽度 */
}
//用户消息样式
.user-message {
background-color: #99d75c; /* 用户消息的颜色 */
margin-left: 10px; /* 与头像之间的间距 */
}
//AI消息样式
.ai-message {
background-color: white; /* AI消息的气泡颜色 */
color: black; /* 字体颜色 */
border: 1px solid black; /* 添加黑色边框 */
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* 添加阴影效果 */
margin-right: 10px; /* 与头像之间的间距 */
}
//用户头像样式
.user-avatar {
width: 40px; /* 头像宽度 */
height: 40px; /* 头像高度 */
border-radius: 50%; /* 圆形 */
overflow: hidden; /* 超出部分隐藏 */
display: flex; /* 使用Flexbox布局 */
align-items: center; /* 垂直居中对齐 */
justify-content: center; /* 水平居中对齐 */
background-color: #f0f0f0; /* 背景色 */
border: 2px solid #99d75c; /* 边框颜色 */
margin-left: 5px; /* 与消息之间的间距 */
}
//AI头像样式
.ai-avatar {
width: 40px; /* 头像宽度 */
height: 40px; /* 头像高度 */
border-radius: 50%; /* 圆形 */
overflow: hidden; /* 超出部分隐藏 */
display: flex; /* 使用Flexbox布局 */
align-items: center; /* 垂直居中对齐 */
justify-content: center; /* 水平居中对齐 */
background-color: #f0f0f0; /* 背景色 */
border: 2px solid #99d75c; /* 边框颜色 */
margin-right: 5px; /* 与消息之间的间距 */
}
//用户头像图片样式
.user-avatar img {
width: 100%; /* 使图片适应头像框 */
height: 100%; /* 使图片适应头像框 */
object-fit: cover; /* 保持图片比例，裁剪多余部分 */
}
//AI头像图片样式
.ai-avatar img {
width: 100%; /* 使图片适应头像框 */
height: 100%; /* 使图片适应头像框 */
object-fit: cover; /* 保持图片比例，裁剪多余部分 */
}

//计时器样式
#timer{
width: 100%;
margin-top: 30px; /* 可根据需要调整这个值 */
text-align: center; /* 确保文本居中 */
margin-bottom: 10px;
}




