/* ai.page.scss */

/* 深色模式下的覆盖样式 */
body.dark {
  --ion-border-color: #333333;
  
  /* 特殊元素的深色适配 */
  .message-bubble .timestamp {
    color: #888888 !important;
  }
  
  ion-textarea {
    --background: rgba(255,255,255,0.1);
    --color: #dddddd;
  }
}

/* 定义页面主容器样式 */
.ai-container {
  --primary-gradient: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%); /* 渐变色变量 */
  --ai-bubble-bg: #{rgba(#a8edea, 0.1)};  /* AI消息气泡半透明背景 */
  --user-bubble-bg: #{rgba(#c06c84, 0.1)};/* 用户消息气泡半透明背景 */
}

.chat-wrapper {
  position: relative;  // 相对定位容器
  height: calc(100vh - 180px); // 计算高度（总高度减去头部和输入区）
  padding: 16px 8px 0; // 内边距（左间距留出头像位置）
  overflow-y: auto; // 允许垂直滚动
  scroll-behavior: smooth; // 平滑滚动

  // 自定义滚动条
  &::-webkit-scrollbar {
    width: 6px; // 滚动条宽度
    background: rgba(200, 200, 200, 0.1); 
  }

  // 移动端适配
  @media (max-width: 768px) {
    height: calc(100vh - 160px); // 调整高度
    padding: 8px 4px 0;
  }
}

/* 头像样式重构 */
.ai-avatar, .user-avatar {
  width: 48px;
  height: 48px;
  flex-shrink: 0; // 防止头像被压缩
  
  img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid rgba(#c06c84, 0.2);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  }
}

.user-avatar img {
  border-color: rgba(#6c757d, 0.3);
}

/* 消息容器 */
.message-container {
  display: flex;
  flex-direction: column;
  gap: 12px; // 消息间距
}
/* 消息气泡基础样式 */
.message-bubble {
  position: relative; // 相对定位
  display: flex;
  align-items: flex-start;
  max-width: 80%;      /* 最大宽度占容器的80% */

  /* 用户消息的特殊样式 */
  &.user-msg {
    flex-direction: row-reverse;
    margin-left: auto; /* 靠右对齐 */
    .bubble-content {
      background: var(--user-bubble-bg); /* 使用用户气泡背景色 */
      border-radius: 16px 16px 4px 16px; /* 右上角直角，其他圆角 */
    }
    .timestamp {
      text-align: right;
    }
  }

  /* 消息内容区域 */
  .bubble-content {
    padding: 12px;     /* 内边距 */
    background: var(--ai-bubble-bg); /* AI气泡背景色 */
    border-radius: 16px 16px 16px 4px; /* 左下角直角，其他圆角 */
    backdrop-filter: blur(8px); /* 毛玻璃效果 */
  }
}

/* 危机模式下的特殊效果 */
.crisis-mode {
  .message-container::before {
    content: ''; /* 伪元素创建遮罩层 */
    position: fixed; /* 固定定位覆盖全屏 */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle, rgba(#c06c84, 0.1) 0%, transparent 70%); /* 径向渐变背景 */
    animation: pulseBreath 2s infinite; /* 呼吸动画 */
  }

  /* 紧急面板弹出动画 */
  .emergency-panel {
    //@include ionic.slide-in-up; /* 使用Ionic内置的上滑动效果 */
    background: rgba(255,255,255,0.95); /* 半透明白色背景 */
    border-radius: 24px 24px 0 0; /* 顶部圆角 */
  }
}

.timestamp {
  font-size: 0.75rem; // 12px字号
  color: var(--ion-text-color-secondary); // 使用Ionic次级文本色
  opacity: 0.7; // 半透明效果
  margin-top: 48px; // 上边距
  //display: flex; // 弹性布局

  // 根据消息类型调整位置
  .user-msg & {
    justify-content: flex-end; // 用户消息右对齐
    padding-right: 8px;
  }
  
  :not(.user-msg) & {
    justify-content: flex-start;
    padding-left: 8px; // AI消息左对齐
  }

  // 暗黑模式适配
  .dark & {
    color: rgba(255,255,255,0.6); // 浅灰色
  }
}

.input-wrapper {
  position: fixed; // 固定定位
  bottom: 72px; // 距底部安全距离
  left: 16px;
  right: 16px;
  display: flex; // 弹性布局
  align-items: flex-end; // 底部对齐
  gap: 12px; // 元素间距
  background: var(--ion-background-color); // 与背景同色
  padding: 8px 0 24px; // 下内边距留出空间
  backdrop-filter: blur(10px); // 毛玻璃效果

  ion-textarea {
    flex: 1; // 占据剩余空间
    --padding-start: 16px; 
    --padding-end: 16px;
    --border-radius: 24px; // 大圆角
    --background: rgba(255,255,255,0.9); // 半透明白
    font-size: 16px;
    transition: all 0.3s ease; // 过渡动画

    // 聚焦状态
    &.textarea-focused {
      --background: rgba(255,255,255,0.95);
      box-shadow: 0 4px 12px rgba(192,108,132,0.2);
    }
  }

  ion-button {
    --padding-start: 0; 
    --padding-end: 0;
    --border-radius: 50%; // 圆形按钮
    width: 48px; 
    height: 48px;
    margin-bottom: 8px; // 与输入框对齐
  }

  // 平板端优化
  @media (min-width: 768px) {
    max-width: 800px; 
    margin: 0 auto; // 居中显示
    left: 0;
    right: 0;
  }
}
// .ai-guard {
//     --primary-color: #64C3D3;
//     --danger-color: #FF6B6B;
//     --text-color: #4A4A6A;
  
//     .emotion-meter {
//       height: 200px;
//       background: linear-gradient(145deg, #F0F9FF, #E1F3FF);
//       position: relative;
//       overflow: hidden;
  
//       .wave {
//         position: absolute;
//         bottom: 0;
//         width: 200%;
//         height: 100px;
//         background: url('data:image/svg+xml,...波浪SVG数据...');
//         animation: waveFlow 15s linear infinite;
//       }
  
//       .face-avatar {
//         position: absolute;
//         left: 50%;
//         top: 30%;
//         transform: translateX(-50%);
//         width: 100px;
//         height: 100px;
//         border-radius: 50%;
//         overflow: hidden;
//         box-shadow: 0 8px 24px rgba(100,195,211,0.3);
  
//         img {
//           width: 100%;
//           transition: filter 0.5s ease;
//         }
  
//         &:hover img {
//           filter: hue-rotate(30deg);
//         }
//       }
//     }
  
//     .chat-container {
//       margin-top: -40px;
//       background: white;
//       border-radius: 40px 40px 0 0;
//       padding: 20px;
//       min-height: calc(100vh - 160px);
  
//       .messages {
//         max-height: 60vh;
//         overflow-y: auto;
  
//         .message {
//           margin: 12px 0;
//           transition: transform 0.3s ease;
  
//           &.ai {
//             .bubble {
//               background: #F0F9FF;
//               border-radius: 20px 20px 20px 4px;
//             }
//           }
  
//           .bubble {
//             max-width: 80%;
//             padding: 12px 16px;
//             background: var(--primary-color);
//             color: white;
//             border-radius: 20px 20px 4px 20px;
  
//             .meta {
//               display: flex;
//               align-items: center;
//               gap: 8px;
//               font-size: 12px;
//               margin-top: 8px;
//               opacity: 0.8;
//             }
//           }
//         }
//       }
  
//       .input-area {
//         display: flex;
//         gap: 12px;
//         padding: 16px;
//         background: rgba(240,249,255,0.9);
//         border-radius: 30px;
//         margin-top: 20px;
  
//         ion-textarea {
//           --padding-start: 12px;
//           background: white;
//           border-radius: 20px;
//         }
//       }
//     }
  
//     .emergency-card {
//       position: fixed;
//       bottom: -200px;
//       left: 20px;
//       right: 20px;
//       background: white;
//       border-radius: 20px;
//       box-shadow: 0 8px 32px rgba(255,107,107,0.2);
//       transition: bottom 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  
//       &.active {
//         bottom: 20px;
//       }
  
//       .header {
//         padding: 16px;
//         font-weight: 500;
//         color: var(--danger-color);
//         border-bottom: 1px solid #eee;
//       }
  
//       .actions {
//         padding: 16px;
//         display: grid;
//         gap: 12px;
//       }
//     }
// }

// @keyframes waveFlow {
//   0% { transform: translateX(0); }
//   100% { transform: translateX(-50%); }
// }



//生成样式一
// chat.page.scss
// .chat-container {
//   --background: #f5f5f5;
//   padding: 16px;
//   display: flex;
//   flex-direction: column;
//   gap: 12px;

//   .message-bubble {
//     max-width: 80%;
//     padding: 12px;
//     border-radius: 16px;
//     position: relative;

//     &.ai {
//       background: #F0F9FF;
//       align-self: flex-start;
//       border-radius: 16px 16px 16px 4px;
//     }

//     &.user {
//       background: linear-gradient(135deg, #FF9A9E 0%, #FFD3D3 100%);
//       align-self: flex-end;
//       border-radius: 16px 16px 4px 16px;
//     }

//     .time-stamp {
//       font-size: 0.75rem;
//       color: #666;
//       margin-top: 4px;
//       text-align: right;
//     }
//   }
// }

.input-footer {
  //border-collapse: fade;
  ion-item {
    --background: #eeebeb;
    border-radius: 28px;
    outline: 2px solid #64C3D3;
    margin: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    outline-offset: 3px;
    padding: 1px;
    transition: 0.25s;
    
  }

  .message-input {
    --padding-start: 1px;
    --padding-end: 1px;
  }

  ion-button {
    --padding-start: 1px;
    --padding-end: 1px;
  }
}


// 紧急弹窗样式
.emergency-popover {
  --width: 200px;
  
  ion-list {
    padding: 0;
  }

  ion-item {
    --min-height: 48px;
    --detail-icon-color: #e74c3c;
  }
}