:host { display: block; }
.hb-timeline { position: relative; padding: var(--hb-spacing-sm) 0; }

/* 左右两侧共享的竖线（left/right 模式） */
.hb-timeline--left { padding-left: 20px; }
.hb-timeline--right { padding-right: 20px; }
.hb-timeline--left::before,
.hb-timeline--right::before {
  content: '';
  position: absolute;
  top: var(--hb-spacing-sm);
  bottom: var(--hb-spacing-sm);
  width: 2px;
  background: var(--hb-color-border-secondary);
}
.hb-timeline--left::before { left: 5px; }
.hb-timeline--right::before { right: 5px; }

/* 交替模式：竖线居中 */
.hb-timeline--alternate::before {
  content: '';
  position: absolute;
  top: var(--hb-spacing-sm);
  bottom: var(--hb-spacing-sm);
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  background: var(--hb-color-border-secondary);
}

.hb-timeline__item {
  position: relative;
  padding-bottom: var(--hb-spacing-md);
  display: flex;
  align-items: flex-start;
}
/* left 模式：内容在右 */
.hb-timeline--left .hb-timeline__item { padding-left: 18px; }
.hb-timeline--left .hb-timeline__dot { position: absolute; left: -18px; top: 4px; }

/* right 模式：内容在左 */
.hb-timeline--right .hb-timeline__item { justify-content: flex-end; padding-right: 18px; }
.hb-timeline--right .hb-timeline__dot { position: absolute; right: -18px; top: 4px; }

/* alternate 模式：左右交替 */
.hb-timeline--alternate .hb-timeline__item { width: 50%; }
.hb-timeline--alternate .hb-timeline__item--left { left: 0; padding-right: 24px; text-align: right; }
.hb-timeline--alternate .hb-timeline__item--right { margin-left: 50%; padding-left: 24px; }
.hb-timeline--alternate .hb-timeline__dot {
  position: absolute;
  top: 4px;
}
.hb-timeline--alternate .hb-timeline__item--left .hb-timeline__dot { right: -7px; }
.hb-timeline--alternate .hb-timeline__item--right .hb-timeline__dot { left: -7px; }

.hb-timeline__content { min-width: 0; }
.hb-timeline__content-text { font-size: var(--hb-font-size-sm); color: var(--hb-color-text); }
.hb-timeline__time { font-size: var(--hb-font-size-xs); color: var(--hb-color-text-secondary); margin-top: 2px; }

.hb-timeline__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 2px solid var(--hb-color-bg-container);
  z-index: 1;
}
.hb-timeline__dot--blue { background: var(--hb-color-primary); }
.hb-timeline__dot--green { background: var(--hb-color-success); }
.hb-timeline__dot--red { background: var(--hb-color-danger); }
.hb-timeline__dot--gray { background: var(--hb-color-text-quaternary); }
