/* Avatar Atom */
.avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background-color: var(--bg-panel);        /* Panel color for avatar backgrounds */
  color: var(--text-secondary);
  font-weight: var(--font-weight-medium);
  overflow: hidden;
}

/* Avatar Color Variants */
.avatar-primary {
  background-color: var(--color-primary);
  color: white;
}

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

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

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

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

.avatar-neutral {
  background-color: var(--color-neutral-400);
  color: white;
}

.avatar-circle { border-radius: var(--border-radius-full); }
.avatar-rounded { border-radius: var(--border-radius-lg); }
.avatar-square { border-radius: var(--border-radius-md); }

.avatar-xs { width: var(--space-6); height: var(--space-6); font-size: var(--text-2xs); }
.avatar-sm { width: var(--space-8); height: var(--space-8); font-size: var(--text-xs); }
.avatar-md { width: var(--space-10); height: var(--space-10); font-size: var(--text-sm); }
.avatar-lg { width: var(--space-12); height: var(--space-12); font-size: var(--text-base); }
.avatar-xl { width: var(--space-16); height: var(--space-16); font-size: var(--text-xl); }

.avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-initials {
  text-transform: uppercase;
  user-select: none;
}

.avatar-status {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 25%;
  height: 25%;
  min-width: var(--space-2);
  min-height: var(--space-2);
  border-radius: var(--border-radius-full);
  border: var(--border-width-2) solid var(--bg-surface);
}

.avatar-status-online { background-color: var(--color-success); }
.avatar-status-offline { background-color: var(--color-neutral-400); }
.avatar-status-busy { background-color: var(--color-error); }
.avatar-status-away { background-color: var(--color-warning); }