.fp-user-avatar { position:relative; display:inline-flex; box-sizing:border-box; border:1px solid var(--bs-border-color,#dee2e6); align-items:center; justify-content:center; flex-shrink:0; overflow:hidden; border-radius:50%; background:var(--bs-primary,#03a9f5); color:white; font-weight:600; vertical-align:middle; }
.fp-user-avatar img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:50%; background:var(--bs-body-bg,#fff); }


.profile-photo-editor { display:flex; gap:1rem; align-items:center; margin:1rem 0 1.5rem; flex-wrap:wrap; }
.profile-photo-editor label { display:block; font-weight:600; margin-bottom:.5rem; }
.profile-photo-editor p { font-size:.85rem; margin-top:.5rem; color:var(--bs-secondary-color); }
.profile-photo-editor input { max-width:100%; }
.photo-crop-preview { width:min(100%,320px); margin:0 auto 1rem; }
.photo-crop-preview canvas { width:100%; height:auto; border-radius:50%; display:block; }
.profile-photo-crop-control { display:block; margin-bottom:1rem; }
.profile-photo-crop-control input[type=range] { display:block; width:100%; }


/* The shared avatar owns its circular edge; its chat wrapper only positions it. */
.chat-msg-avatar:has(.fp-user-avatar) { align-self:center; background:transparent; border:0; }