
/* 悬浮助手按钮 */
  .assistant-button {
    position: fixed;
    right: 20px;
    bottom: 80px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ion-color-primary), var(--ion-color-secondary));
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    
    .assistant-face {
      position: relative;
      width: 30px;
      height: 30px;
      
      .assistant-eye {
        position: absolute;
        top: 8px;
        width: 6px;
        height: 10px;
        background: white;
        border-radius: 3px;
        
        &.left-eye {
          left: 4px;
        }
        
        &.right-eye {
          right: 4px;
        }
      }
      
      .assistant-mouth {
        position: absolute;
        bottom: 6px;
        left: 50%;
        transform: translateX(-50%);
        width: 12px;
        height: 6px;
        border-bottom-left-radius: 6px;
        border-bottom-right-radius: 6px;
        background: white;
      }
    }
  }
  
  /* 动画 */
  @keyframes pulse {
    0% { transform: scale(1); opacity: 0.7; }
    50% { transform: scale(1.05); opacity: 1; }
    100% { transform: scale(1); opacity: 0.7; }
  }

/* 增加各区块间距 */
.children-messages,
.services-grid,
.community-feed {
  margin-bottom: 0px;
}
  
/* 中央布局容器 */
.page-container {
  max-width: 100%;
  margin: 0 auto;
  padding: 0 16px;
}


/* 服务卡片间距调整 */
.services-grid {
  ion-col {
    padding: 0px;
  }
}

/* 社区动态项间距 */
.community-feed {
  ion-item {
    margin-bottom: 12px;
  }
}

.services-grid {
  padding: 5px;
}

.service-button {
  height: 80px;
  margin: 8px;
  position: relative;
  border-radius: 18px !important;  // 添加圆角样式
  overflow: hidden;  // 确保背景图片也遵循圆角
  
  &[data-service-id="tools"] {
    background: url('/assets/images/toolspic.jpg') center/cover no-repeat;
    height: 80px;
    .button-content {
      display: none;
    }
  }
  &[data-service-id="ai"] {
    background: url('/assets/images/aipic.jpg') center/cover no-repeat;
    height: 80px;
    .button-content {
      display: none;
    }
  }
  &[data-service-id="events"] {
    background: url('/assets/images/eventspic.jpg') center/cover no-repeat;
    height: 80px;
    .button-content {
      display: none;
    }
  }
  &[data-service-id="my"] {
    background: url('/assets/images/mypic.jpg') center/cover no-repeat;
    height: 80px;
    .button-content {
      display: none;
    }
  }
  .button-content {
    position: relative;
    z-index: 2;
  }
}
  

.banner-slides {
  margin-bottom: 20px;
  
  .banner-img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 8px;
  }
}


/* 九宫格卡片样式 */
.services-grid {
  background-color: #f5f5f5;  // 外部背景灰色
  padding: 16px;
  border-radius: 12px;
  margin: 16px 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* 社区动态卡片样式 */
.community-feed {
  background-color: #f5f5f5;  // 外部背景灰色
  padding: 16px;
  border-radius: 12px;
  margin: 16px 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  
  ion-list {
    background: white;  // 内部列表白色背景
    border-radius: 8px;
    padding: 8px;
  }
  
  ion-list-header {
    ion-label {
      font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
      font-size: 1.2rem;
      font-weight: 600;
      color: var(--ion-color-primary);
      letter-spacing: 1px;
      text-shadow: 0 2px 4px rgba(0,0,0,0.1);
      position: relative;
      padding-left: 12px;
      
      &:before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 4px;
        height: 16px;
        background: var(--ion-color-primary);
        border-radius: 2px;
      }
    }
  }
}

