/*
 * CP-01 Activity feed item — app/components/ui/activity_item_component.rb
 *
 * Row: 32px --radius-round leading marker (avatar or tinted icon frame) +
 * body. Head line uses flex-wrap so the DD-16 timestamp sits right-aligned
 * on a wide row and wraps beneath on a narrow one, matching the "container
 * query or flexbox wrap" convention already used elsewhere in this app.
 *
 * Token vars only — enforced by test/lint/css_token_lint_test.rb.
 */

.ui-activity-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-md);
}

.ui-activity-item__marker {
  flex-shrink: 0;
}

.ui-activity-item__icon-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-round);
}

.ui-activity-item__icon-frame--violet {
  background: var(--color-violet-subtle);
  color: var(--color-violet-ink);
}

.ui-activity-item__icon-frame--accent {
  background: var(--color-accent-100);
  color: var(--color-accent-pressed);
}

.ui-activity-item__icon-frame--success {
  background: var(--color-success-subtle);
  color: var(--color-success-ink);
}

.ui-activity-item__icon-frame--danger {
  background: var(--color-danger-subtle);
  color: var(--color-danger-ink);
}

.ui-activity-item__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.ui-activity-item__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}

.ui-activity-item__action {
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
  color: var(--color-ink);
}

.ui-activity-item__actor {
  font-weight: 500;
}

.ui-activity-item__timestamp {
  flex-shrink: 0;
  margin-left: auto;
}

.ui-activity-item__comment {
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
  color: var(--color-ink);
}

/*
 * States. Pending items fade only the non-text leading marker (avatar or
 * icon frame); the action/comment text drops to ink-muted instead of
 * being opacity-faded so it stays readable. The timestamp is already
 * ink-muted by default and needs no override.
 */
.ui-activity-item--pending .ui-activity-item__marker {
  opacity: 0.6;
}

.ui-activity-item--pending .ui-activity-item__action,
.ui-activity-item--pending .ui-activity-item__comment {
  color: var(--color-ink-muted);
}

.ui-activity-item--new {
  animation: ui-activity-item-wash-fade var(--duration-highlight) var(--ease-out) forwards;
}

@keyframes ui-activity-item-wash-fade {
  0% {
    background: var(--color-accent-50);
  }

  100% {
    background: transparent;
  }
}