// 确保 ion-header 和 ion-content 的背景透明，以便背景图显示
ion-header {
  --background: transparent;
  --border-width: 0; // 移除默认边框
  position: absolute; // 让头部浮动在内容之上
  width: 100%;
  z-index: 10; // 确保头部在最上层
}

ion-toolbar {
  --background: transparent;
  --border-width: 0;
  color: white; // 头部图标和文字颜色
}

ion-button {
  --color: white; // 头部按钮图标颜色
}

.profile-page-content {
  --background: var(--ion-color-light);
  --padding-top: 0;
  --padding-bottom: 0;
  --padding-start: 0;
  --padding-end: 0;
}

// 页面背景图容器
.profile-background-image {
  position: absolute; // 保持绝对定位，使其不影响文档流
  top: 0;
  left: 0;
  width: 100%;
  height: 425px; // 调整背景图高度以覆盖更多区域
  overflow: hidden; // 隐藏超出容器的部分
  z-index: 1; // 确保在内容下方
}

// 内部的 img 标签样式
.profile-background-image img {
  width: 100%;
  height: 100%;
  object-fit: cover; // 关键：图片会覆盖整个容器，保持宽高比，裁剪多余部分
  object-position: center; // 关键：图片在容器中居中显示
  filter: brightness(0.8); // 调整亮度，让文字更清晰
  display: block; // 移除图片底部可能存在的空白
}

.profile-container {
  position: relative;
  z-index: 2; // 确保内容在背景图上方
  padding: 20px;
  padding-top: 120px; // 增加顶部内边距，给头部和背景图留出更多空间
  color: white; // 默认文字颜色为白色
}

// 用户信息区
.user-info-section {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.user-avatar {
  width: 80px;
  height: 80px;
  margin-right: 15px;
  border: 2px solid white; // 头像白色边框
  flex-shrink: 0; // 防止头像被压缩
}

.user-details {
  flex-grow: 1;
}

.user-name {
  font-size: 1.8em;
  font-weight: bold;
  margin: 0;
  color: white;
}

.user-tags {
  display: flex;
  align-items: center;
  margin-top: 5px;
}

.gender-icon {
  font-size: 1.2em;
  margin-right: 5px;
  &.female {
    color: #ff69b4; // 粉色
  }
  &.male {
    color: #00bfff; // 蓝色
  } 
}

.verified-tag {
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 15px;
  padding: 3px 8px;
  font-size: 0.8em;
  display: flex;
  align-items: center;
  color: white;
  ion-icon {
    margin-right: 3px;
    font-size: 1em;
    color: #4CAF50; // 绿色勾
  }
}

.user-bio {
  font-size: 0.9em;
  color: rgba(255, 255, 255, 0.8);
  margin-top: 10px;
}

// 数据统计区
.stats-grid {
  margin-top: 20px;
  margin-bottom: 20px;
  text-align: center;
}

.stat-item {
  .stat-number {
    font-size: 1.5em;
    font-weight: bold;
    color: white;
  }
  .stat-label {
    font-size: 0.8em;
    color: rgba(255, 255, 255, 0.7);
  }
}

// 组合后的操作区域
.profile-actions-main-row {
  display: flex;
  justify-content: space-between; /* 将左右两部分推开 */
  align-items: flex-end; /* 底部对齐 */
  margin: 20px;
  margin-top: -30px; /* 向上微调，使其与统计数据行对齐 */
  position: relative; /* 确保 z-index 作用 */
  z-index: 5; /* 确保在背景图和内容上方 */
}

.moment-section {
  display: flex;
  gap: 15px; /* 分享瞬间和我的瞬间之间的间距 (现在只有一个，但保留) */
}

.moment-action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #ff69b4; /* 确保文字颜色可见 */
  background-color: transparent;
  border-radius: 0;
  padding: 0;
  flex: none;
}

.add-moment-button {
  --background: transparent;
  --color: white;
  font-size: 2em;
  height: auto;
  width: auto;
  border-radius: 0;
  box-shadow: none; /* 移除阴影 */
  margin-bottom: 5px; /* 文字的间距 */
  --padding-start: 0;
  --padding-end: 0;
  --padding-top: 0;
  --padding-bottom: 0;
}

// 删除我的瞬间相关样式
.moment-action-item.my-moments {
  display: none; // 隐藏，或者直接删除这部分样式
}

.my-moments-thumbnail {
  display: none; // 隐藏，或者直接删除这部分样式
}

.moment-action-label {
  font-size: 0.8em;
  color: white;
  white-space: nowrap; /* 防止文字换行 */
}

.edit-settings-buttons {
  display: flex;
  gap: 10px;
}

// 恢复编辑资料和设置按钮样式
.edit-profile-button, .settings-button {
  --background: rgba(255, 255, 255, 0.2);
  --background-activated: rgba(255, 255, 255, 0.3);
  --color: white;
  --border-color: rgba(255, 255, 255, 0.5);
  --border-width: 1px;
  font-size: 0.9em;
  height: 35px;
  box-shadow: none; /* 移除阴影 */
  vertical-align: middle;
}

.settings-button {
  width: 35px; /* 使其成为正方形按钮 */
  --padding-start: 0;
  --padding-end: 0;
}

// 内容切换标签
.profile-segment {
  --background: white; /* segment 背景改为白色 */
  --background-checked: white;
  --color: #999; /* 未选中文字颜色 */
  --color-checked: black; /* 选中文字颜色 */
  margin-top: 20px;
  border-radius: 0;
  padding: 0 20px;
  height: 50px;
  border-bottom: 1px solid #eee; /* 添加底部边框 */
}

ion-segment-button {
  --indicator-color: black; // 下划线颜色
  --indicator-height: 2px;
  --padding-start: 0;
  --padding-end: 0;
  --padding-top: 15px;
  --padding-bottom: 15px;
  font-size: 1.1em;
  text-transform: none; // 防止大写
}

// 确保 segment 内部的文字颜色是黑色的
.profile-segment ion-segment-button p {
  color: black;
}

.profile-segment ion-segment-button.segment-button-checked p {
  font-weight: bold; // 选中时加粗
  color: black;
}

// 内容展示区 (瀑布流布局)
.content-grid {
  background-color: var(--ion-color-light); // 浅色背景，与顶部深色背景区分
  padding: 10px;
  min-height: 400px; // 确保有足够高度
}

.post-item {
  margin-bottom: 10px; // 帖子之间的间距
  background-color: white; /* 帖子背景改为白色 */
  border-radius: 8px;
  overflow: hidden; // 确保图片圆角
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.post-image {
  width: 100%;
  height: auto; // 保持图片比例
  display: block;
}

// 未登录状态
.not-logged-in-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  text-align: center;
  color: gray;
  p {
    margin-bottom: 20px;
  }
}
