:host {
  display: block;
  width: 44rpx;
  height: 44rpx;
  flex-shrink: 0;
}

.avatar {
  width: 44rpx;
  height: 44rpx;
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--color-avatar-fg);
  font-size: 18rpx;
  font-weight: var(--font-semibold);
}

.avatar--human {
  background: var(--color-avatar-human);
}

.avatar--agent {
  background: var(--color-avatar-agent);
}

.avatar--service {
  background: var(--color-avatar-service);
}

.avatar--image {
  background: transparent;
}

.avatar__image {
  width: 100%;
  height: 100%;
}