/* ════════════════════════════════════════════════════════════════════
   cc-source-badge.css — native-surface badge for agent-created artifacts
   ════════════════════════════════════════════════════════════════════ */

.cc-source-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px 3px 6px;
  border-radius: 999px;
  background: rgba(180, 200, 255, 0.10);
  border: 1px solid rgba(180, 200, 255, 0.28);
  color: rgba(200, 220, 255, 0.96);
  font: 600 10.5px/1 ui-sans-serif, system-ui;
  letter-spacing: 0.02em;
  cursor: default;
  transition: background 140ms ease, border-color 140ms ease;
  vertical-align: middle;
}
.cc-source-badge.is-clickable {
  cursor: pointer;
}
.cc-source-badge.is-clickable:hover {
  background: rgba(180, 200, 255, 0.18);
  border-color: rgba(180, 200, 255, 0.50);
  color: rgba(220, 230, 255, 0.98);
}
.cc-source-badge__dot {
  font-size: 9px;
  line-height: 1;
  opacity: 0.85;
}
.cc-source-badge__label {
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 9.5px;
}

/* Compact (mini) variant — icon-only, for tight grids */
.cc-source-badge--mini {
  width: 20px; height: 20px;
  padding: 0;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(180, 200, 255, 0.18);
  border: 1px solid rgba(180, 200, 255, 0.45);
  color: rgba(220, 230, 255, 0.98);
  font: 700 10px/1 ui-sans-serif, system-ui;
  cursor: pointer;
}
.cc-source-badge--mini:hover {
  background: rgba(180, 200, 255, 0.30);
  transform: scale(1.05);
}

/* Container helper when surfaces drop the badge into a positioned cell */
.cc-source-badge-host {
  display: inline-block;
}