.dc-avatar-row {
display: flex; align-items: center; gap: var(--dc-3);
font-family: var(--dc-font);
}
.dc-avatar {
display: inline-grid; place-items: center;
width: 40px; height: 40px; flex: 0 0 auto;
border-radius: var(--dc-r-full);
background: var(--dc-brand-soft); color: var(--dc-brand-text);
font-family: var(--dc-font); font-size: 15px; font-weight: 700; line-height: 1;
overflow: hidden; user-select: none;
}
.dc-avatar--muted { background: var(--dc-sunken); color: var(--dc-text-sub); }
.dc-avatar--sm { width: 28px; height: 28px; font-size: 12px; }
.dc-avatar--lg { width: 56px; height: 56px; font-size: 20px; }
.dc-avatar__name {
display: flex; flex-direction: column; gap: 2px;
font-size: 12px; color: var(--dc-text-mute);
}
.dc-avatar__name strong { font-size: 14px; color: var(--dc-text); }
.dc-avatar-group { display: flex; align-items: center; padding-left: 10px; }
.dc-avatar-group .dc-avatar {
margin-left: -10px;
box-shadow: 0 0 0 2px var(--dc-surface);
}
.dc-avatar-wrap { position: relative; display: inline-block; }
.dc-avatar__status {
position: absolute; right: -1px; bottom: -1px;
width: 12px; height: 12px; border-radius: var(--dc-r-full);
background: var(--dc-ok);
box-shadow: 0 0 0 2px var(--dc-surface);
}
.dc-avatar__status--off { background: var(--dc-text-mute); }