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 {
  padding: 10px;
  display: flex;
  flex-direction: column;
}

.message-bubble {
  background-color: #99d75c; /* 绿色气泡的背景色 */
  color: white; /* 字体颜色 */
  border-radius: 15px; /* 圆角 */
  padding: 10px 15px; /* 内边距 */
  margin: 5px 0; /* 外边距 */
  max-width: 80%; /* 最大宽度 */
  align-self: flex-end; /* 右侧对齐 */
}

.user-message {
  background-color: #99d75c; /* 用户消息的颜色 */
}

.ai-message {
  background-color: white; /* AI消息的气泡颜色 */
  color: black; /* 字体颜色 */
  align-self: flex-start; /* 左侧对齐 */
  border: 1px solid black; /* 添加黑色边框 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* 添加阴影效果 */
  border-radius: 15px; /* 圆角 */
  padding: 10px 15px; /* 内边距 */
  margin: 5px 0; /* 外边距 */
  max-width: 80%; /* 最大宽度 */
  word-wrap: break-word; /* 自动换行 */
}

.yuyinframe{
  --background: transparent; 
  background-color: #99d75c; 
  display: flex; 
  flex-direction: column; 
  justify-content: center; 
  align-items: center;
}
.modal-content {
  display: flex;
  align-items: center; /* 垂直居中对齐 */
  justify-content: center; /* 水平居中对齐 */
  width: 100%; /* 宽度100% */
  height: 25%;
}

.timer-container {
  height: 100%;
  flex-direction: column; /* 垂直排列 */
  
  justify-content: center; /* 水平居中对齐 */

}

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

/*语音取消按钮的样式 */
.cancle-button {
  font-size: 75px;
  display: flex; /* 使用Flexbox布局 */
  align-items: center; /* 垂直居中对齐 */
  justify-content: center; /* 水平居中对齐 */
  color: white;
  background-color: #99d75c; 
  margin-right: 20px;
}

/*语音发送按钮的样式 */
.send-button {
  height:60px ;
  width: 60px;
  border-radius: 50%;//圆
  display: flex; /* 使用Flexbox布局 */
  align-items: center; /* 垂直居中对齐 */
  justify-content: center; /* 水平居中对齐 */
  color: white;
  background-color: #99d75c; 
  border: 5px solid white;
  margin-left: 20px;
}


//音律跳动
.light {
  width: 100%;
  height: 90px;
  display: flex;
}

.light span {
  width: 10px;
  border-radius: 18px;
  margin-right: 20px;
}

.light span:nth-child(1) {
  animation: bar1 2s 0.2s infinite linear;
}

.light span:nth-child(2) {
  animation: bar2 2s 0.4s infinite linear;
}

.light span:nth-child(3) {
  animation: bar3 2s 0.6s infinite linear;
}

.light span:nth-child(4) {
  animation: bar4 2s 0.8s infinite linear;
}

.light span:nth-child(5) {
  animation: bar5 2s 1.0s infinite linear;
}

.light span:nth-child(6) {
  animation: bar6 2s 1.2s infinite linear;
}

.light span:nth-child(7) {
  animation: bar7 2s 1.4s infinite linear;
}

.light span:nth-child(8) {
  animation: bar8 2s 1.6s infinite linear;
}

.light span:nth-child(9) {
  animation: bar9 2s 1.8s infinite linear;
}

@keyframes bar1 {
  0% {
      background: #f677b0;
      margin-top: 25%;
      height: 10%;
  }

  50% {
      background: #f677b0;
      height: 100%;
      margin-top: 0%;
  }

  100% {
      background: #f677b0;
      height: 10%;
      margin-top: 25%;
  }
}

@keyframes bar2 {
  0% {
      background: #df7ff2;
      margin-top: 25%;
      height: 10%;
  }

  50% {
      background: #df7ff2;
      height: 100%;
      margin-top: 0%;
  }

  100% {
      background: #df7ff2;
      height: 10%;
      margin-top: 25%;
  }
}

@keyframes bar3 {
  0% {
      background: #8c7ff2;
      margin-top: 25%;
      height: 10%;
  }

  50% {
      background: #8c7ff2;
      height: 100%;
      margin-top: 0%;
  }

  100% {
      background: #8c7ff2;
      height: 10%;
      margin-top: 25%;
  }
}

@keyframes bar4 {
  0% {
      background: #024b6a;
      margin-top: 25%;
      height: 10%;
  }

  50% {
      background: #024b6a;
      height: 100%;
      margin-top: 0%;
  }

  100% {
      background: #024b6a;
      height: 10%;
      margin-top: 25%;
  }
}

@keyframes bar5 {
  0% {
      background: #7ff2d3;
      margin-top: 25%;
      height: 10%;
  }

  50% {
      background: #7ff2d3;
      height: 100%;
      margin-top: 0%;
  }

  100% {
      background: #7ff2d3;
      height: 10%;
      margin-top: 25%;
  }
}

