/* 全局布局 */
html {
  scroll-behavior: smooth;  /* 平滑滚动 */
}

body {
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
  min-height: 100vh;
}

/* 顶部导航 */
.app-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-height);
  background-color: rgba(250, 250, 250, 0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-divider);
  z-index: 100;
}

.header-container {
  max-width: var(--container-max-width);
  height: 100%;
  margin: 0 auto;
  padding: 0 var(--container-padding-mobile);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.app-title {
  font-size: 14px;
  font-weight: 400;
  color: var(--color-text-secondary);
  letter-spacing: 0.5px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* 主内容区 */
.app-main {
  margin-top: calc(var(--header-height) + 64px);  /* header + time-anchor */
  padding-top: var(--spacing-3xl);
  padding-bottom: 160px;  /* 增加底部留白，避免被浮动按钮遮挡 */
  min-height: calc(100vh - var(--header-height) - 64px);

  /* 🆕 改为 flex 布局（左侧日历 + 右侧时间轴）*/
  display: flex;
  gap: 0;
}

/* 右侧时间轴包装器 */
.timeline-wrapper {
  flex: 1;
  min-width: 0;  /* 允许缩小 */
}

.timeline-container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--container-padding-mobile);
}

/* 响应式：平板端 */
@media (min-width: 768px) and (max-width: 1023px) {
  .timeline-container {
    padding: 0 var(--container-padding-tablet);
  }

  .header-container {
    padding: 0 var(--container-padding-tablet);
  }

  .app-title {
    font-size: 15px;
  }
}

/* 响应式：桌面端 */
@media (min-width: 1024px) {
  .timeline-container {
    padding: 0 var(--container-padding-desktop);
  }

  .header-container {
    padding: 0 var(--container-padding-desktop);
  }

  .app-title {
    font-size: 15px;
  }
}

/* 响应式：移动端 */
@media (max-width: 767px) {
  .app-main {
    margin-top: calc(var(--header-height) + 56px);  /* 时间锚点移动端高度 */
    padding-bottom: 140px;  /* 移动端底部留白稍少 */
    min-height: calc(100vh - var(--header-height) - 56px);
    display: block;  /* 移动端恢复正常布局 */
  }
}