.ms-agent-run-card[data-selected="true"] {
  --ui-surface-border: color-mix(in srgb, var(--ms-color-primary) 68%, var(--ms-color-border));
  --ui-surface-shadow:
    0 0 0 2px color-mix(in srgb, var(--ms-color-primary) 14%, transparent),
    var(--ms-shadow-md);
}

.ms-agent-run-card__header {
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: color-mix(in srgb, var(--ms-color-muted) 34%, var(--ms-color-surface));
  padding: 10px 12px;
}

.ms-agent-run-card--accent .ms-agent-run-card__header {
  background: color-mix(in srgb, var(--ms-color-accent) 9%, var(--ms-color-surface));
}

.ms-agent-run-card--success .ms-agent-run-card__header {
  background: color-mix(in srgb, var(--ms-color-success) 8%, var(--ms-color-surface));
}

.ms-agent-run-card--warning .ms-agent-run-card__header {
  background: color-mix(in srgb, var(--ms-color-warning) 10%, var(--ms-color-surface));
}

.ms-agent-run-card--danger .ms-agent-run-card__header {
  background: color-mix(in srgb, var(--ms-color-danger) 8%, var(--ms-color-surface));
}

.ms-agent-run-card__heading {
  gap: 7px;
}

.ms-agent-run-card__eyebrow {
  flex: 0 0 auto;
  border: 1px solid color-mix(in srgb, var(--ms-color-border) 78%, transparent);
  border-radius: var(--ms-radius-sm);
  background: color-mix(in srgb, var(--ms-color-surface) 84%, transparent);
  color: var(--ms-color-muted-foreground);
  padding: 2px 5px;
  font-size: var(--ms-text-tiny);
  font-weight: 750;
  line-height: 13px;
}

.ms-agent-run-card__actions {
  flex: 0 0 auto;
  gap: 6px;
}

.ms-agent-run-card__body {
  gap: 10px;
  padding: 12px;
}

.ms-agent-run-card__grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.agent-run-metric-card {
  padding: 12px;
}

.agent-run-metric-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--ms-color-muted-foreground);
  font-size: var(--ms-text-tiny);
  font-weight: 500;
  line-height: var(--ms-leading-tiny);
  text-transform: uppercase;
}

.agent-run-metric-card__icon {
  display: inline-flex;
  flex-shrink: 0;
}

.agent-run-metric-card__value {
  margin-top: 8px;
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
}
