/* Keep agent identity readable in the embedded CRM and slightly enlarge
   message avatars in both the dashboard and storefront widget. */
.message-bubble-container.justify-end > .grid {
  grid-template-columns: minmax(0, 1fr) 56px !important;
}

.message-bubble-container [class*="grid-area:avatar"] {
  min-width: 56px;
  flex-direction: column;
  align-items: center !important;
  justify-content: flex-end;
  gap: 3px;
}

.message-bubble-container [class*="grid-area:avatar"] > span,
.message-bubble-container [class*="grid-area:avatar"] span[role="img"] {
  width: 28px !important;
  height: 28px !important;
}

.message-bubble-container [class*="grid-area:avatar"] img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nk-agent-name {
  display: block;
  width: 56px;
  overflow: hidden;
  color: var(--color-n-slate-11, #687078);
  font-size: 11px;
  font-weight: 500;
  line-height: 14px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conversation-wrap .agent-message .avatar-wrap {
  width: 28px !important;
  height: 28px !important;
}

.conversation-wrap .agent-message .avatar-wrap .user-thumbnail-box > span,
.conversation-wrap .agent-message .avatar-wrap span[role="img"] {
  width: 28px !important;
  height: 28px !important;
}

.conversation-wrap .agent-message .avatar-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}