/* 基础样式 */
ion-content {
    --background: #f5f5f5;
    --padding-top: 0;
    --padding-bottom: 0;
    --padding-start: 0;
    --padding-end: 0;
}

/* iPhone 形状容器 */
.iphone-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;
}

.iphone-screen {
    position: relative;
    width: 375px; /* 模拟 iPhone 宽度 */
    height: calc(375px * 19.5 / 9); /* 根据宽高比计算高度 */
    background: white;
    border-radius: 54px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    margin: auto;
}

.iphone-notch {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 210px;
    height: 30px;
    background: black;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    z-index: 1;
}

/* 将主要内容包裹在 iPhone 屏幕内 */
.page-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    max-width: 100%;
    margin: 0 auto;
    padding: 30px 16px; /* 为刘海留出空间 */
    overflow-y: auto;
}

/* 紧急状态条 */
.emergency-bar {
    display: flex;
    align-items: center;
    padding: 12px 16px;  // 增加垂直padding
    background-color: #ff5252;
    color: white;
    font-size: 16px;  // 增大字体
    line-height: 1.5;
    ion-icon {
      margin-right: 8px;
    }
  }
  
  /* 子女消息区域 */
  .children-messages {
    padding: 0 8px;
    
    ion-card {
      margin: 8px 0;
      border-left: 4px solid var(--ion-color-warning);
      
      &.unread {
        border-left-color: var(--ion-color-primary);
        background: rgba(var(--ion-color-primary-rgb), 0.05);
      }
      
      .unread-indicator {
        position: absolute;
        right: 16px;
        top: 16px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--ion-color-primary);
      }
    }
  }
  
  /* 服务九宫格 */
  /* 服务九宫格 */
  .services-grid {
    padding: 16px 12px;
    
    ion-grid {
      gap: 12px; /* 增加格子间距 */
    }
  
    .service-item {
      ion-button {
        --padding-top: 12px;
        --padding-bottom: 12px;
        border-radius: 14px; /* 更圆润的边角 */
        background: #ffffff;
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08); /* 更柔和的阴影 */
        transition: all 0.2s ease;
        min-height: 100px; /* 统一高度 */
        width: 100%; /* 占满列宽度 */
  
        &:hover {
          transform: translateY(-2px); /* 悬停上移效果 */
          box-shadow: 0 5px 12px rgba(0, 0, 0, 0.12);
        }
  
        // 已有的紧急求助和代买药品颜色
        &[data-service-id="emergency"] {
          background: linear-gradient(135deg, #ff6b6b, #ff9a9a);
          ion-icon { color: #ffffff; }
          ion-label { 
            color: #ffffff;
            white-space: normal; /* 允许文字换行 */
            line-height: 1.3; /* 调整行高让文字两行显示 */
          }
        }
        &[data-service-id="medicine"] {
          background: linear-gradient(135deg, #42a5f5, #64b5f6);
          ion-icon { color: #ffffff; }
          ion-label { color: #ffffff; }
        }
        // 新增积分商城之后的颜色
        &[data-service-id="shop"] {
          background: linear-gradient(135deg, #ffb74d, #ffcc80); /* 橙色渐变 */
          ion-icon { color: #ffffff; }
          ion-label { 
            color: #ffffff;
            white-space: normal; /* 保持原有换行效果 */
            line-height: 1.3;
          }
        }
        // 新增工具借用、老人陪聊、AI管家颜色
&[data-service-id="tools"] {
  background: linear-gradient(135deg, #458cee, #2951d2); /* 蓝色渐变 */
  ion-icon { color: #ffffff; }
  ion-label { 
    color: #ffffff;
    white-space: normal; /* 允许文字换行 */
    line-height: 1.3;
  }
}
&[data-service-id="chat"] {
  background: linear-gradient(135deg, #ff69b4, #ff80ab); /* 粉色渐变 */
  ion-icon { color: #ffffff; }
  ion-label { 
    color: #ffffff;
    white-space: normal; 
    line-height: 1.3;
  }
}
&[data-service-id="ai"] {
  background: linear-gradient(135deg, #4dd0e1, #80deea); /* 青色渐变 */
  ion-icon { color: #ffffff; }
  ion-label { 
    color: #ffffff;
    white-space: normal; 
    line-height: 1.3;
  }
}
        &[data-service-id="events"] {
          background: linear-gradient(135deg, #66bb6a, #81c784); /* 绿色渐变 */
          ion-icon { color: #ffffff; }
          ion-label { color: #ffffff; }
        }
        &[data-service-id="skills"] {
          background: linear-gradient(135deg, #ba68c8, #ce93d8); /* 紫色渐变 */
          ion-icon { color: #ffffff; }
          ion-label { color: #ffffff; }
        }
        &[data-service-id="my"] {
          background: linear-gradient(135deg, #90a4ae, #b0bec5); /* 灰色渐变 */
          ion-icon { color: #ffffff; }
          ion-label { color: #ffffff; }
        }
      }
    }
  }
    .service-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100%;
      padding: 12px 0;
      border-radius: 12px;
      background: white;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
      transition: transform 0.2s ease;
      
      &:active {
        transform: scale(0.95);
      }
      
      &.emergency-service {
        background: linear-gradient(135deg, #ff5252, #ff8a80);
        color: white;
        animation: pulse 1.5s infinite;
      }
      
      .icon-container {
        position: relative;
        margin-bottom: 8px;
        
        // 为不同图标添加不同颜色
        ion-icon[name="warning"] {
          color: #ff5252;
        }
        ion-icon[name="medical"] {
          color: #4caf50;
        }
        ion-icon[name="construct"] {
          color: #2196f3;
        }
        ion-icon[name="chatbubbles"] {
          color: #9c27b0;
        }
        ion-icon[name="headset"] {
          color: #ff9800;
        }
        ion-icon[name="gift"] {
          color: #e91e63;
        }
        ion-icon[name="calendar"] {
          color: #673ab7;
        }
        ion-icon[name="people"] {
          color: #009688;
        }
        ion-icon[name="list"] {
          color: #795548;
        }
        
        ion-badge {
          position: absolute;
          top: -8px;
          right: -8px;
        }
      }
      
      ion-label {
        font-size: 12px;
        text-align: center;
      }  // 此处为正确闭合的大括号，若第227行是额外的`}`需删除
  }
  
  /* 社区动态信息流 */
  .community-feed {
    ion-item {
      --padding-start: 8px;
      --inner-padding-end: 8px;
      margin-bottom: 8px;
      border-radius: 12px;
      background: white;
      
      &.emergency-item {
        --background: rgba(255, 82, 82, 0.1);
        border-left: 4px solid var(--ion-color-danger);
      }
      
      &.completed-item {
        --background: rgba(200, 200, 200, 0.2);
        opacity: 0.8;
      }
      
      ion-avatar {
        width: 40px;
        height: 40px;
      }
      
      .emergency-tag {
        display: inline-flex;
        align-items: center;
        padding: 2px 6px;
        background: rgba(255, 82, 82, 0.2);
        border-radius: 4px;
        color: var(--ion-color-danger);
        font-size: 12px;
        
        ion-icon {
          margin-right: 4px;
        }
      }
      
      .item-meta {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        
        .time {
          font-size: 12px;
          color: var(--ion-color-medium);
        }
        
        .points {
          font-size: 14px;
          color: var(--ion-color-warning);
          font-weight: bold;
        }
      }
    }
  }
  
  /* 悬浮助手按钮 */
  .assistant-button {
    position: fixed;
    right: 20px;
    bottom: 20px;
    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; }
  }

/* 中央布局容器 */
.page-container {
  max-width: 100%;
  margin: 0 auto;
  padding: 0 16px;
}

/* 增加各区块间距 */
.children-messages,
.services-grid,
.community-feed {
  margin-bottom: 24px;
}

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

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

// 确保 html 和 body 元素充满屏幕
html, body {
  height: 100vh; // 设置高度为视口高度
  width: 100vw; // 设置宽度为视口宽度
  margin: 0;
  padding: 0;
  overflow: hidden;
}

ion-app {
  height: 100vh; // 设置高度为视口高度
  width: 100vw; // 设置宽度为视口宽度
}

ion-content {
  height: 100%;
  --background: #f5f5f5;
  --padding-top: 0;
  --padding-bottom: 0;
  --padding-start: 0;
  --padding-end: 0;
}

/* 手机容器样式 */
.phone-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; // 设置高度为视口高度
  width: 100vw; // 设置宽度为视口宽度
}

.phone-screen {
  position: relative;
  width: 100vw; // 设置宽度为视口宽度
  height: 100vh; // 设置高度为视口高度
  background: white;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
  overflow: auto;
  margin: auto;
}
