/* 温暖风格的标题栏 */
.warm-header {
  --background: linear-gradient(135deg,#fff9f0); /* 温暖的珊瑚橘渐变 */
  --color: white;
  --border-color: transparent;
  --padding-top: 8px;
  --padding-bottom: 8px;
  box-shadow: 0 2px 12px rgba(255, 140, 102, 0.3); /* 柔和的阴影 */
}

/* 居中标题样式 */
.header-title {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: 0.5px;
  color: #b38a58;
  margin: 0;
  padding: 0;
  width: fit-content;
  pointer-events: none; /* 防止标题阻挡按钮点击 */
  .trash-outline{
    color: #b38a58;
  }
}

/* 按钮样式调整 */
.warm-header ion-button {
  --color: white;
  --background-hover: rgba(255, 255, 255, 0.15);
  --ripple-color: rgba(255, 255, 255, 0.2);
  --padding-start: 8px;
  --padding-end: 8px;
}

.warm-header ion-icon {
  font-size: 1.4rem;
}

/* 全局样式 - 暖白底色 */
ion-content {
  --background: #FFF8F2; // 更温暖的底色
  --padding-start: 16px;
  --padding-end: 16px;
  --padding-top: 16px;
}

/* 卡片基础样式 - 统一圆角和交互效果 */
.notification-card,
.match-card,
.ai-card {
  border-radius: 18px; // 更大的圆角更柔和
  padding: 20px;
  margin-bottom: 18px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06); // 更柔和的阴影
  transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1); // 更顺滑的动画
  
  &:active {
    transform: scale(0.97);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1); // 点击时阴影变化
  }
}

/* 消息通知卡片 - 日出橙色调 */
.warm-card-1 {
  background: linear-gradient(135deg, #FFEDDC 0%, #FFD8B8 100%); // 更柔和的渐变
  color: #7A3D12; // 更深的巧克力色文字
  
  .notification-title {
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 8px;
    color: #8B4513; // 标题颜色加深
  }
  
  .notification-desc {
    font-size: 0.92rem;
    line-height: 1.5;
    color: rgba(90, 58, 34, 0.85); // 更好的可读性
  }
}

/* 好友匹配卡片 - 拿铁色调 */
.warm-card-2 {
  background: linear-gradient(135deg, #F5E0C9 0%, #E8C9A3 100%); // 更自然的米色渐变
  color: #5C3A21; // 协调的文字颜色
  min-height: 110px; // 更高的卡片
  display: flex;
  justify-content: space-between;
  align-items: center;
  
  .match-info {
    max-width: 75%; // 更多文字空间
  }
  
  .match-title {
    font-size: 1.15rem;
    margin-bottom: 8px;
    font-weight: 600;
  }
  
  .match-desc {
    font-size: 0.92rem;
    line-height: 1.4;
    color: rgba(92, 58, 33, 0.9); // 更好的对比度
  }
  
  .match-icon {
    font-size: 2.2rem;
    color: rgba(92, 58, 33, 0.6); // 更协调的图标颜色
    transition: transform 0.3s;
    
    &:active {
      transform: scale(1.1); // 图标点击反馈
    }
  }
}

/* AI咨询卡片 - 香草奶油色调 */
.warm-card-3 {
  background: linear-gradient(135deg, #F7EEE3 0%, #EDE0CD 100%); // 更柔和的渐变
  position: relative;
  overflow: hidden;
  
  &::after {
    content: '';
    position: absolute;
    top: -30px;
    right: -30px;
    width: 100px;
    height: 100px;
    background: rgba(255, 245, 235, 0.25); // 更柔和的装饰圆
    border-radius: 50%;
  }
  
  .ai-header {
    margin-bottom: 1.2rem;
    display: flex;
    align-items: center;
  }
  
  .ai-avatar {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.7); // 更明显的边框
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
    margin-right: 15px;
    object-fit: cover;
  }
  
  .ai-profile {
    .ai-name {
      color: #654321; // 更深的标题颜色
      font-size: 1.18rem;
      font-weight: 600;
      margin-bottom: 4px;
    }
    
    .ai-title {
      color: #9C8C7B; // 协调的副标题颜色
      font-size: 0.88rem;
    }
  }
  
  .ai-features {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 1.5rem 0;
    
    .feature-tag {
      background: rgba(255, 253, 250, 0.95); // 更白的标签背景
      color: #7A5C44; // 更深的文字
      padding: 10px 12px;
      border-radius: 12px;
      font-size: 0.85rem;
      display: flex;
      align-items: center;
      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
      
      .feature-icon {
        color: #CD7F32; // 青铜色图标
        margin-right: 6px;
        font-size: 0.9rem;
      }
    }
  }
  
  .ai-action {
    --background: linear-gradient(135deg, #CD7F32 0%, #B87333 100%); // 青铜色按钮
    --box-shadow: 0 6px 16px rgba(205, 127, 50, 0.25);
    --padding-top: 14px;
    --padding-bottom: 14px;
    --border-radius: 12px;
    font-weight: 500;
    
    &:active {
      --background: linear-gradient(135deg, #B87333 0%, #A05A2C 100%); // 点击状态
    }
  }
}

/* 聊天列表 - 重新设计为更贴近聊天应用 */
.chat-list {
  margin-top: 25px;
  
  .chat-item {
    background-color: #FFFDFA; // 暖白色背景
    border-radius: 15px;
    padding: 14px;
    margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    
    &:active {
      background-color: #FFF9F0; // 点击反馈
      transform: scale(0.98);
    }
    
    .chat-avatar {
      width: 55px;
      height: 55px;
      border-radius: 50%;
      margin-right: 15px;
      box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
      flex-shrink: 0;
    }
    
    .chat-content {
      flex: 1;
      min-width: 0;
      
      .chat-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 6px;
        
        .chat-name {
          color: #6B4F37; // 深棕色名字
          font-size: 1rem;
          font-weight: 600;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          margin-right: 10px;
        }
        
        .chat-time {
          color: #B8A99A; // 更柔和的时间文字
          font-size: 0.75rem;
          flex-shrink: 0;
        }
      }
      
      .chat-preview {
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        .chat-message {
          color: #9C8C7B; // 协调的浅棕色
          font-size: 0.88rem;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          margin-right: 10px;
        }
        
        .chat-badge {
          background: linear-gradient(135deg, #FF7F50 0%, #E66C3E 100%); // 珊瑚色红点
          color: white;
          width: 20px;
          height: 20px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 0.7rem;
          font-weight: 600;
          flex-shrink: 0;
        }
      }
    }
  }
}

