/* Avatars with a profile photo (B-093, components/avatar.js). Sizes stay on each caller's own class
   (.avatar, .card-avatar, .su-av...); this file only clips the photo to the circle. */
.avatar-box { position: relative; overflow: hidden; border-radius: 50%; }
.avatar-img {
  width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block;
  user-select: none; -webkit-user-drag: none;
}
.avatar-box.has-photo { background-clip: padding-box; }

/* ---- Photo editor row (Personal preferences): 72px circle, buttons, hint, inline error ---- */
.avatar-edit { display: flex; align-items: center; gap: var(--sp-7); }
.avatar-edit-slot {
  position: relative; flex: none; width: 72px; height: 72px; border-radius: 50%;
  transition: box-shadow var(--t-fast) var(--ease);
}
.avatar-edit-slot .avatar { width: 72px; height: 72px; font-size: 26px; }
.avatar-edit-slot.is-over { box-shadow: 0 0 0 3px var(--bg-surface), 0 0 0 5px var(--blue); }
.avatar-edit-slot.is-over::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%; background: rgba(49, 122, 226, .18); pointer-events: none;
}
.avatar-edit-slot.is-busy .avatar { opacity: .55; }
.avatar-edit-preview { outline: 2px dashed var(--border-strong); outline-offset: 3px; }
.avatar-edit-side { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.avatar-edit-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.avatar-edit-hint { color: var(--text-2); font-size: var(--fs-sm); line-height: var(--lh-sm); }
.avatar-edit-error { color: var(--red); font-size: var(--fs-sm); line-height: var(--lh-sm); }
.avatar-edit-error:empty { display: none; }

/* "Frame your photo" modal (B-094, components/photo-framer.js) */
.pf { display: flex; flex-direction: column; align-items: center; gap: var(--sp-5); }
.pf-stage {
  position: relative; overflow: hidden; border-radius: var(--r-md, 8px); background: #1f2329;
  cursor: grab; touch-action: none; user-select: none; outline: none;
}
.pf-stage:focus-visible { box-shadow: 0 0 0 2px var(--bg-surface), 0 0 0 4px var(--blue); }
.pf-stage.is-dragging { cursor: grabbing; }
.pf-img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; pointer-events: none; }
.pf-ring {
  position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 0 999px rgba(0, 0, 0, .55); outline: 2px solid rgba(255, 255, 255, .9); outline-offset: -2px;
}
.pf-controls { display: flex; align-items: center; gap: var(--sp-3); width: 280px; max-width: 100%; }
.pf-zoom { flex: 1; min-width: 0; accent-color: var(--green, #017737); }
.pf-zoom-label { color: var(--text-2); font-size: var(--fs-lg, 16px); width: 12px; text-align: center; }
.pf-hint { color: var(--text-2); font-size: var(--fs-sm); text-align: center; }
.avatar-edit-clickable { cursor: pointer; }
.avatar-edit-clickable:focus-visible { box-shadow: 0 0 0 2px var(--bg-surface), 0 0 0 4px var(--blue); outline: none; }