ng-configure/src/app/components/sticky-header/sticky-header.component.scss

.sticky-header {
  position: sticky;
  top: 0;
  z-index: 1000; /* 进一步提高z-index确保在最顶部 */
  transition: all 0.3s ease-in-out;
  margin-bottom: 1.5rem; /* 为内容区域提供间距 */
  align-self: flex-start; /* 确保在flex容器中sticky生效 */
  background-color: white; /* 确保不透明，防止内容透出 */
  /* 创建新的层叠上下文，确保z-index生效 */
  transform: translateZ(0);
  will-change: transform;
  /* 轻微的内阴影，增强立体感 */
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.8);

  .header-content {
    background: #f8fafc; /* 简洁的灰白色背景 */
    border-radius: 0.5rem;
    border: 1px solid #e2e8f0; /* 柔和的边框 */
    box-shadow: 
      inset 0 2px 4px 0 rgba(0, 0, 0, 0.06), /* 轻微内阴影，创造凹陷感 */
      inset 0 0 0 1px rgba(255, 255, 255, 0.9), /* 内边缘高光，增强立体感 */
      0 1px 2px 0 rgba(0, 0, 0, 0.05); /* 轻微外阴影，保持与页面融合 */
    transition: all 0.3s ease-in-out;
    height: 100%; /* 填充父容器高度 */
    min-height: 100%; /* 确保填充最小高度 */
    /* 移除 overflow: hidden，防止内容裁剪 */
  }

  .header-title {
    font-size: 1.75rem; /* text-3xl */
    font-weight: 800;
    transition: all 0.3s ease-in-out;
    margin: 0;
    color: #1e293b; /* text-slate-800 */
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8); /* 轻微文字阴影，增强可读性 */
  }

  .debug-section {
    transition: all 0.3s ease-in-out;
    max-height: 200px;
    opacity: 1;
    
    .debug-info, .debug-urls {
      &:not(:last-child) {
        border-bottom: 1px solid #e2e8f0; /* border-slate-200 */
      }
    }
  }

  .hint-section {
    transition: all 0.3s ease-in-out;
    max-height: 100px;
    opacity: 1;
  }

  /* 锁定状态 - 固定在视口顶部，保持原大小 */
  &.locked {
    position: fixed;
    top: 0;
    z-index: 1100; /* 提高z-index确保在最顶层 */
    margin-bottom: 0; /* 移除margin，因为现在是fixed定位 */
    transform: none; /* 移除transform层叠上下文 */
    will-change: auto;
    box-shadow: none; /* 移除外阴影，增强一体感 */
    background-color: white; /* 确保背景不透明 */
    
    .header-content {
      border-radius: 0.5rem;
      box-shadow: 
        inset 0 2px 4px 0 rgba(0, 0, 0, 0.06),
        inset 0 0 0 1px rgba(255, 255, 255, 0.9); /* 内阴影，增强一体感 */
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      margin: 0; /* 移除外边距，确保精确对齐 */
      height: 100%; /* 填充父容器高度 */
      min-height: 100%; /* 确保填充最小高度 */
      /* 保持原padding大小 */
    }

    .header-title {
      /* 保持原字体大小：1.75rem */
      font-weight: 800;
      color: #1e293b;
      text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
    }

    .hint-section {
      max-height: 0;
      opacity: 0;
      padding-top: 0;
      padding-bottom: 0;
      border: none;
      
      p {
        font-size: 0.8125rem;
        opacity: 0;
      }
    }
    
    .debug-section {
      max-height: 0;
      opacity: 0;
      
      .debug-info, .debug-urls {
        padding-top: 0;
        padding-bottom: 0;
        font-size: 0.6875rem;
        opacity: 0;
        border: none;
      }
    }
  }

  /* 缩小状态 - 在锁定基础上进一步缩小 */
  &.compact {
    .header-content {
      border-radius: 0.375rem;
      box-shadow: 
        inset 0 3px 6px 0 rgba(0, 0, 0, 0.08), /* 更强的内阴影，增强凹陷感 */
        inset 0 0 0 1px rgba(255, 255, 255, 0.8); /* 内边缘高光，增强一体感 */
      background: #f1f5f9; /* 稍微深一点的背景，强调状态变化 */
      border: 1px solid #cbd5e1; /* 保持一致的边框 */
      height: 100%; /* 填充父容器高度 */
      min-height: 100%; /* 确保填充最小高度 */
      
      > div:first-child {
        padding-top: 0.375rem;
        padding-bottom: 0.375rem;
      }
    }

    .header-title {
      font-size: 1.125rem; /* 更小一点 */
      font-weight: 800;
      color: #0f172a; /* 更深的文字颜色，增强可读性 */
      text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9); /* 保持文字阴影 */
      letter-spacing: -0.025em; /* 紧凑的字母间距 */
    }

    .hint-section {
      max-height: 0;
      opacity: 0;
      padding-top: 0;
      padding-bottom: 0;
      border: none;
      
      p {
        font-size: 0.8125rem; /* 比text-sm小一点 */
        opacity: 0;
      }
    }
    
    .debug-section {
      max-height: 0;
      opacity: 0;
      
      .debug-info, .debug-urls {
        padding-top: 0;
        padding-bottom: 0;
        font-size: 0.6875rem; /* 比text-xs更小 */
        opacity: 0;
        border: none;
      }
    }
  }
}