/* TODO 时间线整体样式 */
#timeline {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.timeline-wrapper {
  position: relative;
}

/* 时间分组区域样式 */
.time-section {
  position: relative;
  display: flex;
  margin-bottom: 30px;
}

/* 年份区域样式 */
.year-section {
  position: relative;
  display: flex;
  margin-bottom: 40px;
}

/* 左侧区域 */
.timeline-left {
  width: 130px;
  flex-shrink: 0;
  position: relative;
}

/* 中间时间线 */
.timeline-center {
  width: 2px;
  background: #e0e0e0;
  flex-shrink: 0;
  position: relative;
  z-index: 0;
}

/* 右侧内容区域 */
.timeline-right {
  flex-grow: 1;
  padding-left: 30px;
  position: relative;
}

/* 年份标记和标签 */
.year-marker {
  position: relative;
  text-align: right;
  padding-right: 15px;
}

.year-point {
  position: absolute;
  top: 8px;
  right: -7px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #333;
  z-index: 1;
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
}

.year-label {
  font-size: 1.8em;
  font-weight: 600;
  color: #333;
  margin: 0;
  line-height: 1.2;
}

/* 时间标记和标签 */
.time-marker {
  position: relative;
  text-align: right;
  padding-right: 15px;
}

.time-point {
  position: absolute;
  top: 8px;
  right: -7px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #666;
  z-index: 1;
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
}

.time-label {
  font-size: 1.2em;
  font-weight: 500;
  color: #666;
  margin: 0;
  line-height: 1.2;
}

/* 当前时间点样式 */
.current-time-marker {
  position: absolute;
  top: 8px;
  right: -7px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ff4444;
  z-index: 2;
  border: 3px solid #fff;
  box-shadow: 0 0 0 3px rgba(255, 68, 68, 0.3), 0 0 10px rgba(255, 68, 68, 0.5);
  animation: pulse 2s infinite;
}

.current-time-label {
  font-size: 1.8em;
  font-weight: 700;
  color: #ff4444;
  margin: 0;
  line-height: 1.2;
  text-shadow: 0 0 5px rgba(255, 68, 68, 0.3);
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 3px rgba(255, 68, 68, 0.3), 0 0 10px rgba(255, 68, 68, 0.5);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(255, 68, 68, 0.1), 0 0 15px rgba(255, 68, 68, 0.3);
  }
  100% {
    box-shadow: 0 0 0 3px rgba(255, 68, 68, 0.3), 0 0 10px rgba(255, 68, 68, 0.5);
  }
}

/* TODO 项目容器 */
.todo-items {
  position: relative;
}

/* TODO 项目样式 */
.todo-item {
  padding: 0 0 18px 0;
  margin-bottom: 18px;
  border-bottom: 1px dashed #eaeaea;
  position: relative;
}

.todo-item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

/* 延期标识 */
.todo-item.overdue {
  background: linear-gradient(90deg, rgba(255, 68, 68, 0.1) 0%, transparent 100%);
  border-left: 4px solid #ff4444;
  padding-left: 10px;
  margin-left: -10px;
}

.todo-item.overdue::before {
  content: "⚠️ 已延期";
  position: absolute;
  top: -5px;
  right: 0;
  background: #ff4444;
  color: white;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.7em;
  font-weight: 600;
}

/* TODO 标题样式 */
.todo-title {
  margin-bottom: 0;
}

.todo-link {
  font-size: 1.1em;
  color: #1a73e8;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s;
}

.todo-link:hover {
  color: #174ea6;
  text-decoration: underline;
}

/* TODO 重要性级别样式 */
.seminal-todo {
  color: #d23669;
  font-weight: 700;
  font-size: 1.25em;
}

.seminal-todo:hover {
  color: #b32057;
}

.novel-todo {
  color: #3498db;
  font-weight: 600;
  font-size: 1.05em;
}

.novel-todo:hover {
  color: #2980b9;
}

.emmm-todo {
  color: #777;
  font-weight: 500;
  font-size: 0.95em;
}

.emmm-todo:hover {
  color: #555;
}

/* TODO 描述样式 */
.todo-description {
  color: #666;
  font-size: 0.8em;
  line-height: 1.5;
}

/* 状态指示器 */
.todo-status {
  display: inline-block;
  margin-left: 0.3em;
  padding: 3px 6px;
  border-radius: 8px;
  font-size: 0.6em;
  font-weight: 600;
  vertical-align: middle;
  margin-top: -0.5em;
  line-height: 1;
}

.todo-status.pending {
  background: #fff3cd;
  color: #856404;
}

.todo-status.completed {
  background: #d4edda;
  color: #155724;
}

.todo-status.overdue {
  background: #f8d7da;
  color: #721c24;
}

/* 暗色模式适配 */
.dark .timeline-center {
  background: #444;
}

.dark .year-point {
  background: #ddd;
  border: 2px solid #333;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
}

.dark .year-label {
  color: #eee;
}

.dark .time-point {
  background: #aaa;
  border: 2px solid #333;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
}

.dark .time-label {
  color: #ccc;
}

.dark .current-time-marker {
  background: #ff6b6b;
  border: 3px solid #333;
  box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.3), 0 0 10px rgba(255, 107, 107, 0.5);
}

.dark .current-time-label {
  color: #ff6b6b;
  text-shadow: 0 0 5px rgba(255, 107, 107, 0.3);
}

.dark .todo-item {
  border-bottom: 1px dashed #444;
}

.dark .todo-item.overdue {
  background: linear-gradient(90deg, rgba(255, 107, 107, 0.1) 0%, transparent 100%);
  border-left: 4px solid #ff6b6b;
}

.dark .todo-link {
  color: #8ab4f8;
}

.dark .todo-link:hover {
  color: #aecbfa;
}

/* 暗色模式下的重要性级别样式 */
.dark .seminal-todo {
  color: #ff7eb6;
}

.dark .seminal-todo:hover {
  color: #ff9ec9;
}

.dark .novel-todo {
  color: #6fc6ff;
}

.dark .novel-todo:hover {
  color: #8bd3ff;
}

.dark .emmm-todo {
  color: #aaa;
}

.dark .emmm-todo:hover {
  color: #ccc;
}

.dark .todo-description {
  color: #aaa;
}

/* 暗色模式下的状态指示器 */
.dark .todo-status.pending {
  background: #3d2f00;
  color: #ffd700;
}

.dark .todo-status.completed {
  background: #1b5e20;
  color: #81c784;
}

.dark .todo-status.overdue {
  background: #4a1a1a;
  color: #ffcdd2;
}

/* 响应式设计 */
@media (max-width: 700px) {
  .timeline-left {
    width: 100px;
  }
  
  .timeline-right {
    padding-left: 20px;
  }
  
  .year-label, .current-time-label {
    font-size: 1.5em;
  }
  
  .time-label {
    font-size: 1.1em;
  }
  
  .seminal-todo {
    font-size: 1.2em;
  }
  
  .novel-todo {
    font-size: 1.1em;
  }
  
  .emmm-todo {
    font-size: 1.03em;
  }
  
  .current-time-marker {
    width: 14px;
    height: 14px;
  }
}

@media (max-width: 500px) {
  .timeline-left {
    width: 80px;
  }
  
  .timeline-right {
    padding-left: 15px;
  }
  
  .year-label, .current-time-label {
    font-size: 1.3em;
  }
  
  .time-label {
    font-size: 1.0em;
  }
  
  .seminal-todo {
    font-size: 1.15em;
  }
  
  .novel-todo {
    font-size: 1.08em;
  }
  
  .emmm-todo {
    font-size: 1.02em;
  }
  
  .current-time-marker {
    width: 12px;
    height: 12px;
  }
}

/* 工具提示样式 */
.timeline-tooltip {
  position: fixed;
  display: none;
  z-index: 1000;
  background: white;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  padding: 8px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
  max-width: 40vw;
  min-width: 200px;
  overflow: hidden;
}

.timeline-tooltip.show {
  opacity: 1;
}

.timeline-tooltip img {
  width: auto;
  height: auto;
  max-width: 100%;
  border-radius: 4px;
  display: block;
}

/* 暗色模式下的工具提示 */
.dark .timeline-tooltip {
  background: #333;
  border-color: #555;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}