// ─────────────────────────────────────────────────────────────────────────────
// Component: Timeline
// File:      src/scss/components/_timeline.scss
//
// Variants:  .commit-row .proposal-row .issue-row .session-row
//            .commit-sha .commit-msg .commit-meta
//            .session-live .session-live-pulse .session-row-active
// Tokens:    --border-subtle, --color-accent, --color-success, --text-*
// Usage:     <div class="commit-row">…</div>
//
// Notes:     .session-live-pulse uses @keyframes for the active session dot.
// ─────────────────────────────────────────────────────────────────────────────

.commit-list { display: flex; flex-direction: column; }

.commit-row,
.proposal-row,
.issue-row,
.session-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-subtle);

  &:last-child { border-bottom: none; }
}

.commit-row {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  align-items: center;
}

.commit-sha {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-accent);
  white-space: nowrap;
}

.commit-msg {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: var(--space-2);

  a { color: var(--text-primary); }
  a:hover { color: var(--color-accent); text-decoration: none; }
}

.commit-meta {
  font-size: var(--text-xs);
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

// Live session indicator dot
.session-live {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--color-success);
  box-shadow: 0 0 6px var(--color-success);
  margin-right: var(--space-1);
  vertical-align: middle;
  flex-shrink: 0;
}

@keyframes session-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 6px var(--color-success); }
  50%       { opacity: 0.55; box-shadow: 0 0 12px var(--color-success); }
}

.session-live-pulse { animation: session-pulse 1.6s ease-in-out infinite; }

.session-row-active {
  background: color-mix(in srgb, var(--color-success) 4%, transparent);
  border-radius: var(--radius-sm);
  padding-left: var(--space-2);
  padding-right: var(--space-2);
}

.session-row-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: 14px;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.session-row-intent  { font-size: 13px; color: var(--text-muted); margin-top: 2px; }
.session-no-participants { color: var(--text-muted); font-size: 13px; }

.session-commit-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  background: var(--bg-overlay);
  color: var(--text-secondary);
  white-space: nowrap;
}

.session-location-tag { font-size: var(--text-xs); color: var(--text-muted); white-space: nowrap; }

// Branch pill
.branch-pill {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 11px;
  font-family: var(--font-mono);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  max-width: 200px;
  text-overflow: ellipsis;
}