/* HYPERPART: activity-feed */
/* Promoted VERBATIM from Dazzle regions.css (W2, fleet convergence).
 * The Dazzle emitter contract predates the move and is unchanged. */

/* ─────────────────────────── activity_feed region ───────────────
 * Vertical timeline: dot on a left rail, time on the left of each
 * row, message bubble on the right. Bubble gets a hover-shadow
 * when wired to an action_url (HTMX-driven detail drawer open). */

.dz-activity-feed {
  position: relative;
  padding-inline-start: var(--space-md);
  border-inline-start: 1px solid var(--colour-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  list-style: none;
  margin: 0;
}

.dz-activity-row {
  position: relative;
}

.dz-activity-dot {
  /* Same rail geometry as .dz-timeline-bullet-wrap (padding + 1px border). */
  --activity-dot-size: 0.75rem;
  position: absolute;
  inset-inline-start: calc(
    -1 * var(--space-md) - 0.5px - (var(--activity-dot-size) / 2)
  );
  top: 0.375rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--activity-dot-size);
  height: var(--activity-dot-size);
}

.dz-activity-dot > svg {
  width: var(--activity-dot-size, 0.75rem);
  height: var(--activity-dot-size, 0.75rem);
  display: block;
  color: var(--colour-brand);
}

.dz-activity-row-inner {
  display: flex;
  gap: var(--space-md);
}

.dz-activity-time {
  font-size: var(--text-xs);
  color: var(--colour-text-muted);
  min-width: 5rem;
  padding-block-start: 0.25rem;
}

/* Bubble — no border (the dashboard slot already owns card chrome,
 * adding a border re-creates a card-within-a-card per #852). Subtle
 * background tint provides visual grouping. */
.dz-activity-bubble {
  flex: 1 1 0;
  padding-inline: var(--space-sm);
  padding-block: var(--space-xs);
  border-radius: var(--radius-sm);
  background: color-mix(in oklch, var(--colour-bg) 70%, transparent);
  font-size: var(--text-sm);
  color: var(--colour-text);
}

.dz-activity-bubble.is-clickable {
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out);
}

.dz-activity-bubble.is-clickable:hover {
  background: var(--colour-bg);
}

.dz-activity-actor {
  font-weight: var(--weight-medium);
}

.dz-activity-empty {
  text-align: center;
  font-size: var(--text-sm);
  color: var(--colour-text-muted);
  padding-block: var(--space-2xl);
}