/* ==========================================================================
   时间轴组件 (Timeline)
   ========================================================================== */

.zuoekai-timeline {
  list-style: none;
  margin: 0;
  padding: 0 0 0 16px; /* Offset for line */
  border-left: 2px solid var(--zuoekai-color-brand-500);
}

/* 时间轴项 */
.zuoekai-timeline__item {
  position: relative;
  margin-bottom: 24px;
  padding-left: 24px;
}

.zuoekai-timeline__item:last-child {
  margin-bottom: 0;
}

/* 节点 (Dot/Icon) */
.zuoekai-timeline__node {
  position: absolute;
  left: -25px; /* (16px padding + 2px border) / 2 + node width/2 approx adjustment */
  /* Exact calc: Left border is at 0 relative to padding-box if margin used? 
     Actually border-left is on ul. So nodes need to be centered on -2px line?
     Let's adjust: padding-left of ul is 0, border-left is on ul. 
     Items are inside ul. 
     Better approach: 
     ul has border-left. 
     Nodes are absolute -left: (node_width / 2) + (border_width / 2).
     border is 2px. node is 12px. -> -6 - 1 = -7px.
  */
  left: -7px; 
  top: 4px; /* Align with text top */
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--zuoekai-color-brand-500);
  border: 2px solid var(--zuoekai-color-brand-500);
  box-shadow: 0 0 0 4px var(--zuoekai-color-surface-panel);
  z-index: 1;
  transition: all 0.2s;
}

/* 内容区域 */
.zuoekai-timeline__content {
  display: flex;
  flex-direction: column;
}

.zuoekai-timeline__time {
  font-size: 12px;
  color: var(--zuoekai-color-brand-700);
  font-weight: 500;
  margin-bottom: 4px;
  line-height: 1.4;
}

.zuoekai-timeline__title {
  font-size: 14px;
  font-weight: 500;
  color: var(--zuoekai-color-text);
  margin: 0 0 4px;
}

.zuoekai-timeline__description {
  font-size: 13px;
  color: var(--zuoekai-color-text-secondary);
  line-height: 1.5;
  margin: 0;
}

/* --- 变体 (Variants) --- */

/* 1. 状态色节点 */
.zuoekai-timeline__node--active {
  background-color: var(--zuoekai-color-brand-600);
  border-color: var(--zuoekai-color-brand-600);
}

.zuoekai-timeline__node--success {
  background-color: var(--zuoekai-color-success-600);
  border-color: var(--zuoekai-color-success-600);
}

.zuoekai-timeline__node--warning {
  background-color: var(--zuoekai-color-warning-600);
  border-color: var(--zuoekai-color-warning-600);
}

.zuoekai-timeline__node--error {
  background-color: var(--zuoekai-color-error-600);
  border-color: var(--zuoekai-color-error-600);
}

/* 2. 带图标节点 (Icon Node) */
.zuoekai-timeline__item--icon .zuoekai-timeline__node {
  width: 24px;
  height: 24px;
  left: -13px; /* -12 - 1 */
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--zuoekai-color-brand-500);
  border: 1px solid var(--zuoekai-color-brand-500);
  color: #fff;
}

.zuoekai-timeline__item--icon .zuoekai-timeline__node svg {
  width: 14px;
  height: 14px;
}

/* 3. 备用侧边布局 (Opposite Content) - 需要更复杂的 grid 布局，暂且只做简单垂直流 */