202226701044/.history/Mind-app/src/app/page-companion/page-companion.component_20241201213925.scss

.button-container {
  position: absolute; /* 绝对定位 */
  top: 8px; /* 距离顶部的距离 */
  left: 6px; /* 距离左侧的距离 */
  display: flex; /* 使用flexbox布局 */
  flex-direction: row; /* 垂直排列 */
}

.custom-button {
  font-size: 14px; /* 按钮字体大小 */
  border-radius: 6px; /* 圆角按钮 */
  color: rgb(250, 222, 222); /* 字体颜色 */
  transition: opacity 0.3s, color 0.3s; /* 添加过渡效果 */
  
}

/* 添加按钮的悬停效果 */
.custom-button:hover {
  opacity: 0.5 !important; /* 悬停时透明度变化 */
  color:aqua !important;
}

ion-content {
    --background: #ffcccb; /* 设置背景颜色为粉色 */
    color: black; /* 设置文本颜色为黑色，确保可读性 */
  }
  ion-header {
    background-color: #f19595; /* 设置背景颜色为淡粉色 */
    color: black; /* 设置文本颜色为黑色 */
    
  }
  
  ion-toolbar {
    --background: transparent; /* 如果需要透明效果，可以设置为透明 */
   width: 200px;
    margin: auto;
  }
  .chat-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 10px;
    background-color: #f0f0f0;
  }
  
  .chat-title {
    text-align: center;
    margin: 10px 0;
  }
  
  .messages {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }
  
  .user-message {
    text-align: right;
    margin: 5px 0;
    padding: 10px;
    background-color: #007bff;
    color: white;
    border-radius: 10px;
    display: inline-block;
    max-width: 70%; /* 限制用户消息宽度 */
    align-self: flex-end; /* 用户消息右对齐 */
  }
  
  .ai-message {
    text-align: left;
    margin: 5px 0;
    padding: 10px;
    background-color: #e0e0e0;
    border-radius: 10px;
    display: inline-block;
    max-width: 70%; /* 限制 AI 消息宽度 */
    align-self: flex-start; /* AI 消息左对齐 */
  }
  
  .input-area {
    display: flex;
    align-items: center;
    margin-top: 10px;
  }