.ui-user-badge {
  display: inline-flex; align-items: center; gap: 7px; max-width: 100%; height: 30px; padding: 0 10px 0 3px; border: 1px solid var(--ui-border);
  border-radius: 999px; background: var(--ui-surface); color: var(--ui-fg); font: 500 13px/1 var(--ui-font); text-decoration: none;
  vertical-align: middle; white-space: nowrap; --s: 24px; --h: #6e56cf;
}
a.ui-user-badge:hover { border-color: var(--ui-strong); background: var(--ui-subtle); }
a.ui-user-badge:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-user-badge-accent { border-color: transparent; background: var(--ui-accent-soft); color: var(--ui-accent); }
.ui-user-badge-plain { height: auto; padding: 0; border: 0; background: none; }
.ui-user-badge-avatar {
  position: relative; display: inline-grid; place-items: center; flex: none; width: var(--s); height: var(--s); border-radius: 50%;
  background: color-mix(in srgb, var(--h) 24%, var(--ui-bg)); color: color-mix(in srgb, var(--h) 70%, var(--ui-fg));
  font: 600 calc(var(--s) * .4)/1 var(--ui-font); user-select: none;
}
.ui-user-badge-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.ui-user-badge-c0 { --h: #e5484d; } .ui-user-badge-c1 { --h: #f76b15; } .ui-user-badge-c2 { --h: #ad7f00; }
.ui-user-badge-c3 { --h: #30a46c; } .ui-user-badge-c4 { --h: #12a594; } .ui-user-badge-c5 { --h: #0090ff; }
.ui-user-badge-c6 { --h: #6e56cf; } .ui-user-badge-c7 { --h: #d6409f; }
.ui-user-badge-dot { position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--ui-surface); background: var(--ui-strong); }
.ui-user-badge-online { background: var(--ui-success); }
.ui-user-badge-away { background: var(--ui-warning); }
.ui-user-badge-busy { background: var(--ui-danger); }
.ui-user-badge-name { overflow: hidden; text-overflow: ellipsis; }
.ui-user-badge-role { padding: 2px 6px; border-radius: 999px; background: var(--ui-subtle); color: var(--ui-muted); font-size: 11px; font-weight: 600; }
.ui-user-badge-accent .ui-user-badge-role { background: color-mix(in srgb, var(--ui-accent) 15%, transparent); color: var(--ui-accent); }
.ui-user-badge-tick { flex: none; width: 14px; height: 14px; color: var(--ui-info); }
.ui-user-badge-sm { height: 24px; padding: 0 8px 0 2px; gap: 5px; font-size: 12px; --s: 20px; }
.ui-user-badge-sm .ui-user-badge-role { padding: 1px 5px; font-size: 10px; }
.ui-user-badge-sm .ui-user-badge-tick { width: 12px; height: 12px; }
.ui-user-badge-plain.ui-user-badge-sm { height: auto; padding: 0; }