.customer-avatar {
  position: relative;
  display: inline-grid;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--color-border-soft, #dcc9b8);
  border-radius: 50%;
  background: var(--customer-avatar-bg);
  color: var(--customer-avatar-fg);
  font-size: 19px;
  font-weight: 800;
  line-height: 1;
}

.customer-avatar > .customer-avatar-initial {
  color: var(--customer-avatar-fg);
  font: inherit;
  line-height: 1;
}

.customer-avatar > img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.customer-avatar > img[hidden] { display: none !important; }

.customer-item { grid-template-columns: 40px minmax(0, 1fr); column-gap: 10px; }
.customer-item > .customer-avatar { align-self: center; }
.customer-header-avatar > .customer-avatar { width: 100%; height: 100%; font-size: 25px; }
.app-shell[data-active-nav-category="customer"] .customer-header-top { grid-template-columns: 58px minmax(0, 1fr); gap: 10px; }
.app-shell[data-active-nav-category="customer"] .customer-header-avatar { display: grid; }

.x-dm-queue-card,
.x-dm-conversation,
.x-dm-relationship-account { grid-template-columns: 40px minmax(0, 1fr); column-gap: 10px; }
.x-dm-queue-card > .customer-avatar,
.x-dm-conversation > .customer-avatar,
.x-dm-relationship-account > .customer-avatar { grid-column: 1; grid-row: 1 / span 4; align-self: center; }
.x-dm-queue-card > :not(.customer-avatar),
.x-dm-conversation > :not(.customer-avatar),
.x-dm-relationship-account > :not(.customer-avatar) { grid-column: 2; }
.x-dm-detail-identity { align-items: center !important; }
.x-dm-detail-identity > .customer-avatar { overflow: hidden; }
.x-dm-detail-person,
.x-dm-customer-person { display: grid; min-width: 0; gap: 2px; }
.x-dm-detail-person > span,
.x-dm-customer-person > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.x-dm-customer-identity { align-items: center; }

.x-dm-mobile-task-avatar.customer-avatar { width: 42px; height: 42px; }
.x-dm-mobile-avatar.customer-avatar { width: 50px; height: 50px; }
.x-dm-mobile-task-avatar.customer-avatar > img,
.x-dm-mobile-avatar.customer-avatar > img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 760px) {
  .app-shell[data-active-nav-category="customer"] .customer-header-top { grid-template-columns: 44px minmax(0, 1fr); }
  .app-shell[data-active-nav-category="customer"] .customer-header-avatar { display: grid; width: 44px; height: 44px; }
  .customer-item { grid-template-columns: 36px minmax(0, 1fr); }
  .customer-item > .customer-avatar { width: 36px; height: 36px; font-size: 17px; }
}