.dc-avatar-surface,
img.dc-avatar-surface {
    --dc-avatar-size: 64px;
    --dc-avatar-radius: 16px;
    width: var(--dc-avatar-size);
    height: var(--dc-avatar-size);
    border-radius: var(--dc-avatar-radius) !important;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
    border: 1px solid rgba(88, 101, 242, 0.12);
    background:
        radial-gradient(circle at 20% 20%, rgba(88, 101, 242, 0.16), transparent 58%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(244, 247, 255, 0.94) 100%);
    box-shadow:
        0 10px 24px rgba(88, 101, 242, 0.10),
        0 2px 6px rgba(15, 23, 42, 0.06);
}

.dc-avatar-surface {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

img.dc-avatar-surface {
    display: block;
    object-fit: cover;
}

.dc-avatar-surface img,
.dc-avatar-surface picture,
.dc-avatar-surface video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: inherit !important;
}

.dc-avatar-surface__initial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 6px;
    color: #5865F2;
    font-weight: 700;
    letter-spacing: -0.02em;
    text-transform: uppercase;
}

.dc-avatar-surface--sm {
    --dc-avatar-size: 32px;
    --dc-avatar-radius: 8px;
}

.dc-avatar-surface--md {
    --dc-avatar-size: 40px;
    --dc-avatar-radius: 10px;
}

.dc-avatar-surface--lg {
    --dc-avatar-size: 56px;
    --dc-avatar-radius: 14px;
}

.dc-avatar-surface--xl {
    --dc-avatar-size: 80px;
    --dc-avatar-radius: 18px;
}

.dc-avatar-surface--hero {
    --dc-avatar-size: 92px;
    --dc-avatar-radius: 20px;
}

.dc-avatar-surface--soft {
    background:
        radial-gradient(circle at 18% 18%, rgba(88, 101, 242, 0.18), transparent 52%),
        linear-gradient(180deg, rgba(250, 251, 255, 0.98) 0%, rgba(241, 244, 255, 0.96) 100%);
}

/* Compatibilidade para superfícies legadas de avatar ainda presentes no sistema. */
.patient-avatar,
.patient-avatar-sm,
.patient-avatar-large,
.user-avatar,
.avatar-circle,
.patient-photo,
.avatar-img {
    border-radius: 14px !important;
}

.patient-avatar,
.patient-avatar-sm,
.patient-avatar-large,
.user-avatar,
.avatar-circle {
    overflow: hidden;
}

.patient-avatar img,
.patient-avatar-sm img,
.patient-avatar-large img,
.user-avatar img,
.avatar-circle img,
.patient-photo img,
img.patient-photo,
.avatar-img {
    border-radius: inherit !important;
    object-fit: cover;
}