/* ===== REUSABLE TIMELINE - APPLE-LIKE DARK THEME ===== */
.timeline {
  position: relative;
}

.timeline-item {
  position: relative;
  padding-left: 30px;
  margin-bottom: 20px;
}

.timeline-marker {
  position: absolute;
  left: 0;
  top: 5px;
  width: 12px;
  height: 12px;
  border: 2px solid var(--bg-surface);
  border-radius: var(--radius-full);
  background: var(--primary);
  box-shadow: none;
}

.timeline-content {
  padding-left: 10px;
}

.call-history-timeline,
.activity-timeline {
  position: relative;
  padding-left: 30px;
}

.call-history-timeline::before,
.activity-timeline::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--border-default);
}

.call-history-item,
.activity-item {
  position: relative;
  padding: 16px;
  margin-bottom: 16px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius-md);
  transition: background-color var(--duration-fast) var(--ease-default),
              border-color var(--duration-fast) var(--ease-default);
  box-shadow: none;
}

.call-history-item:hover,
.activity-item:hover {
  background: var(--bg-elevated);
  border-color: var(--primary-transparent);
  border-left-color: var(--primary);
  box-shadow: none;
  transform: none;
}

.call-history-item::before,
.activity-item::before {
  content: '';
  position: absolute;
  left: -28px;
  top: 20px;
  width: 12px;
  height: 12px;
  background: var(--primary);
  border: 3px solid var(--bg-base);
  border-radius: var(--radius-full);
  box-shadow: none;
}

.activity-item-call::before {
  background: var(--success);
}