.avatar {
  width:32px; height:32px; border-radius:50%; background:var(--avatar-bg); color:var(--avatar-fg);
  display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-weight:700;
}
.av {
  width:44px; height:44px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  font-weight:700; font-size:15px; flex-shrink:0;
}
.av.lg { width:88px; height:88px; font-size:29px; }
.av.sm { width:36px; height:36px; font-size:13px; }
.av.t-info { background:var(--tone-info-bg); color:var(--tone-info-fg); }
.av.t-gold { background:var(--tone-gold-bg); color:var(--tone-gold-fg); }
.av.t-ok { background:var(--tone-ok-bg); color:var(--tone-ok-fg); }
.av.t-neutral { background:var(--tone-neutral-bg); color:var(--tone-neutral-fg); }
/* mascot avatar: reusable .av.mascot (img inside). Never recoloured; the head needs >= 32px. */
/* new agent avatars (sociedade-agentes): full-bleed square art, shown as a circle */
.av.mascot { background:transparent; padding:0; overflow:hidden; border-radius:50%; }
.av.mascot img { width:100%; height:100%; display:block; object-fit:cover; border-radius:50%; }
.pa .contact .av { width:40px; height:40px; font-size:14px; }
.av.sm.mascot { width:36px; height:36px; }
.av.xs.mascot { width:32px; height:32px; }
.pa .av-img { display:block; width:40px; height:40px; border-radius:50%; flex-shrink:0; object-fit:cover; background:transparent; }
.av-wrap { position:relative; display:inline-flex; }
.pin-tile .av { width:52px; height:52px; font-size:17px; }
.pin-tile .av-img { width:52px; height:52px; font-size:17px; }
.sres .av-img { width:36px; height:36px; }
@container (min-width: 720px) and (max-width: 1099px) {
  /* one avatar size for pinned and listed agents, as in a tablet dock */
  .pa:not(.side-over) .pin-tile .av-img { width:48px; height:48px; }
  .pa:not(.side-over) .c-li .contact .av-img { width:48px; height:48px; }
}