.agent-avatar {
  /* Easy size control */
  --small-size: 38px;
  --large-size: 200px;

  display: inline-block;
  width: var(--small-size);
  height: var(--small-size);
  border-radius: 50%;

  background-image: var(--avatar-small);
  background-size: cover;      /* change to contain if needed */
  background-position: center;

  cursor: pointer;
  position: absolute;
  
  right:40px;
  top:40px;
  
  z-index:2;
}

/* Large hover image */
.agent-avatar::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;

  width: var(--large-size);
  height: var(--large-size);
  border-radius: 50%;

  background-image: var(--avatar-large);
  background-size: cover;      /* or contain */
  background-position: center;

  transform: translate(-50%, -50%) scale(0.85);
  opacity: 0;
  pointer-events: none;

  transition:
    opacity 0.3s ease,
    transform 0.3s ease;

  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  z-index: 1000;
}

/* Hover micro-interaction */
.agent-avatar:hover::after {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}