@layer components {
.av {
  --c: var(--accent);
  width: 22px; height: 22px; border-radius: var(--r-round); flex: none; display: inline-grid; place-items: center;
  font-size: var(--fs-10); font-weight: 700; color: var(--c);
  background: color-mix(in srgb, var(--c) 20%, var(--bg-2));
  border: 1.5px solid color-mix(in srgb, var(--c) 55%, transparent);
  position: relative;
}
.av.lg { width: 30px; height: 30px; font-size: var(--fs-12); }
.av.xl { width: 40px; height: 40px; font-size: var(--fs-15); }
.av.sm { width: 18px; height: 18px; font-size: var(--fs-9); border-width: 1px; }
.av.xxl { width: 72px; height: 72px; font-size: var(--fs-28); border-width: 2px; }
.av img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.av.pic { border-color: transparent; background: var(--bg-3); }
.av.live::after { content: ""; position: absolute; right: -2px; bottom: -2px; width: 8px; height: 8px; border-radius: var(--r-round); background: var(--ok); border: 2px solid var(--bg-1); }
.av.ai { --c: var(--claude); }
.av.breathe { animation: breathe 2.4s ease-in-out infinite; }

.avs { display: inline-flex; }
.avs .av + .av { margin-left: -6px; }
.avs .av { box-shadow: 0 0 0 2px var(--bg-1); }

@keyframes breathe { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 18%, transparent); } }
.av-empty { font-size: var(--fs-11-5); }
}