.client-with-avatar {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  vertical-align: middle;
}

.task-table .cell-clients .client-with-icon.client-with-avatar {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}

.client-inline-avatar {
  display: inline-block;
  width: 22px;
  height: 22px;
  min-width: 22px;
  max-width: none;
  flex: 0 0 22px;
  border-radius: 50%;
  object-fit: cover;
  vertical-align: middle;
}

.client-inline-avatar--pill {
  width: 22px;
  height: 22px;
  min-width: 22px;
  flex-basis: 22px;
  /* Keep the outer flex footprint at 18 px, so existing pills stay the same height. */
  margin-block: -2px;
  margin-inline-end: 4px;
}

.client-pill-content {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
}

.task-entity-pill-list__button .client-inline-avatar--pill,
.object-linked-pill-list__item .client-inline-avatar--pill {
  align-self: center;
}

.party-pill,
.cp-party-pill {
  min-width: 0;
  max-width: 100%;
}

.party-pill-content,
.cp-party-pill-content {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.party-pill-content__label,
.party-pill-content__identity,
.cp-party-pill-content__label,
.cp-party-pill-content__identity {
  display: inline;
}

/*
 * A mixed party reads as one phrase: "Контакт: [avatar] Имя". The generic
 * client pill remains the identity source, while inline layout lets a long
 * name wrap naturally instead of becoming a second flex column beside the
 * type label.
 */
.party-pill-content .client-pill-content,
.party-pill-content .task-participant-pill__name,
.cp-party-pill-content .client-pill-content,
.cp-party-pill-content .task-participant-pill__name {
  display: inline;
}

.party-pill-content .client-inline-avatar--pill,
.cp-party-pill-content .client-inline-avatar--pill {
  vertical-align: -4px;
}