/* 聊天消息容器 */
.conversation-container {
  height: calc(100vh - 140px); /* 调整高度计算 */
  overflow-y: auto;
  padding: 16px;  /* 增加内边距 */
  -webkit-overflow-scrolling: touch;  /* 优化移动端滚动 */
}

/* 消息列表布局 */
.message-list {
  display: flex;
  flex-direction: column;
  gap: 18px;  /* 增加消息间距 */
}

/* 单条消息布局 */
.message-item {
  display: flex;
  &.user-message {
    justify-content: flex-end;
  }
  &.assistant-message {
    justify-content: flex-start;
  }
}

/* 消息气泡样式 */
.message-bubble {
  max-width: 75%;  /* 增大最大宽度 */
  padding: 12px 18px;
  border-radius: 18px;  /* 更圆润的边角 */
  line-height: 1.6;
  position: relative;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);  /* 添加柔和阴影 */
  
  &.user-message {
    background: #2196F3;  /* 蓝色调用户消息 */
    color: white;
    border-bottom-right-radius: 4px;  /* 右下直角设计 */
  }
  
  &.assistant-message {
    background: #ffffff;  /* 白色助手消息 */
    color: #333;
    border-bottom-left-radius: 4px;  /* 左下直角设计 */
  }

  /* 消息时间戳样式 */
  .message-time {
    display: block;
    font-size: 12px;
    opacity: 0.8;
    margin-top: 4px;
    text-align: right;  /* 用户消息时间右对齐 */
  }
  &.assistant-message .message-time {
    text-align: left;  /* 助手消息时间左对齐 */
  }
}

/* 输入区样式 */
.input-footer {
  --ion-toolbar-background: #f5f7fa;  /* 浅灰背景 */
  border-top: 1px solid #e0e0e0;  /* 顶部分割线 */
}

.input-item {
  --background: white;
  border-radius: 28px;
  margin: 12px 16px;
  padding: 4px 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);  /* 输入框阴影 */
}

.send-button {
  --padding-start: 12px;
  --padding-end: 12px;
  --border-radius: 24px;
  --background: #2196F3;
  color: white;
  transition: transform 0.2s ease;
  
  &:hover {
    transform: scale(1.08);  /* 悬停放大效果 */
  }
}