.button-container {
  display: flex; // 使用 Flexbox 布局
  justify-content: center; // 水平居中对齐按钮
  margin: 20px 0; // 上下间距

  .chat-button {
    flex: 1; // 让按钮均匀分布
    margin: 0 10px; // 左右间距
    padding: 12px 16px; // 内边距
    font-size: 16px; // 字体大小
    color: #3880ff; // 按钮字体颜色
    border: 2px solid #3880ff; // 添加方框，设置边框颜色和宽度
    border-radius: 8px; // 圆角
    background-color: transparent; // 背景透明

    &.ion-activated {
      background-color: #e0f0ff; // 激活状态背景色
      color: #0056b3; // 激活状态字体颜色
      border-color: #0056b3; // 激活状态边框颜色
    }

    &:hover {
      background-color: rgba(56, 128, 255, 0.1); // 悬停状态背景色
      transition: background-color 0.3s; // 背景色变化过渡效果
    }

    &:active {
      background-color: rgba(56, 128, 255, 0.2); // 点击状态背景色
    }
  }
}