/* Shared customer and admin avatar styling; the existing class names stay compatible. */
[data-customer-avatar-root] { display: inline-flex; width: 50px; height: 50px; }
.customer-avatar {
  --customer-avatar-size: 50px;
  display: inline-flex;
  position: relative;
  flex: 0 0 auto;
  width: var(--customer-avatar-size);
  height: var(--customer-avatar-size);
  border-radius: 50%;
  overflow: hidden;
  vertical-align: middle;
  color: #fff;
  font-size: calc(var(--customer-avatar-size) * .34);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  user-select: none;
}
.customer-avatar--tone-0 { background-color: #b85c00; }
.customer-avatar--tone-1 { background-color: #00845d; }
.customer-avatar--tone-2 { background-color: #2463d4; }
.customer-avatar--tone-3 { background-color: #d92359; }
.customer-avatar--tone-4 { background-color: #8054c7; }
.customer-avatar--tone-5 { background-color: #0d7f8c; }
.customer-avatar--empty { background-color: #64748b; }
.customer-avatar--three { font-size: calc(var(--customer-avatar-size) * .28); }
.customer-avatar__fallback { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.customer-avatar__fallback svg { width: 55%; height: 55%; }
.customer-avatar .customer-avatar__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #fff; opacity: 0; }
.customer-avatar--photo .customer-avatar__photo { opacity: 1; }
.customer-avatar--photo .customer-avatar__fallback { visibility: hidden; }