/* src/app/tab2/tab2.page.scss */
.message-container {
    display: flex;
    align-items: center; /* 垂直居中 */
    margin-bottom: 10px;
  }
  
  .user-message,
  .ai-message {
    width: 100%;
  }
  
  .user-message .message-text,
  .ai-message .message-text {
    max-width: 75%; /* 消息内容的最大宽度 */
    word-wrap: break-word; /* 防止文字溢出 */
  }
  
  .avatar-container {
    display: flex;
    align-items: center; /* 垂直居中 */
  }
  
  .full-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden; /* 确保图片超出部分被隐藏 */
  }
  
  .full-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 保持图片比例并填充容器 */
    border-radius: 50%; /* 保持圆形 */
  }
  
  .user-message .avatar-container {
    margin-right: 10px; /* 头像和文本之间的间距 */
  }
  
  .ai-message .avatar-container {
    margin-left: 10px; /* 头像和文本之间的间距 */
  }
  
  .user-message .message-text {
    text-align: left; /* 用户消息左对齐 */
    margin-left: 10px; /* 文本和头像之间的间距 */
    color:rgb(7, 7, 15); /* 用户消息的文字颜色 */
    
  }
  
  .ai-message .message-text {
    tetext-align: left; /* AI 消息左对齐 */
    margin-right: 10px; /* 文本和头像之间的间距 */
    color: #333; /* AI 医生消息的文字颜色 */
  }
  
  .user-message {
    justify-content: flex-start; /* 用户消息固定在左边 */
    background-color:#f1f1f1; /* 用户消息的背景色 */
    
  }
  
  .ai-message {
    justify-content: flex-end; /* AI 消息固定在右边 */
    background-color: #f1f1f1; /* AI 医生消息的背景色 */
  }
  
  /* 确保头像和消息在同一行内 */
  .user-message .message-container,
  .ai-message .message-container {
    display: flex;
    align-items: center; /* 垂直居中 */
  }
  
  /* 确保消息容器占据整个宽度 */
  .user-message .message-container,
  .ai-message .message-container {
    width: 100%;
  }
  
  ion-footer ion-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
  }
  
  ion-footer .send-button-container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
  
  ion-footer ion-input {
    flex: 1;
    margin-right: 10px;
  }
  
  ion-footer ion-button {
    width: 80px;
  }
  
  ion-spinner {
    margin-left: 10px;
  }
  
  /* 居中显示标题 */
  .center-title {
    text-align: center;
    width: 100%; /* 确保标题占据整个工具栏的宽度 */
  }