@layer components {

  .avatar {
    display: inline-grid;
    place-items: center;
    flex: none;
    overflow: hidden;
    border-radius: var(--radius-pill);
    background: var(--surface-sunk);
    color: var(--ink-muted);
    font-weight: var(--weight-bold);
    letter-spacing: 0.02em;
    line-height: 1;
    user-select: none;
  }

  .avatar__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .avatar--tiny   { width: 1.5rem;  height: 1.5rem;  font-size: var(--text-xs); }
  .avatar--small  { width: 1.75rem; height: 1.75rem; font-size: var(--text-xs); }
  .avatar--medium { width: var(--face-md); height: var(--face-md); font-size: var(--text-sm); }
  .avatar--large  { width: 6rem;    height: 6rem;    font-size: var(--text-lg); }

  
  .avatar[data-extra="person"],
  .avatar[data-extra="company"],
  .avatar[data-extra="ai"] {
    border-radius: var(--radius-sm);
  }

  
  .avatar--workspace { border-radius: var(--radius-sm); }

  .extra__kind {
    flex: none;
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--ink-faint);
  }

  .person {
    display: inline-flex;
    align-items: center;
    gap: var(--space);
    min-width: 0;
  }

  .person__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .faces {
    display: inline-flex;
    align-items: center;
  }

  .faces > .avatar,
  .faces > .faces__empty { position: relative; z-index: 1; }

  
  .faces > .avatar { box-shadow: 0 0 0 2px var(--canvas); }

  
  .faces__support {
    display: inline-flex;
    position: relative;
    z-index: 0;
    margin-left: calc(var(--space) * -1.25);
  }

  .faces__support .avatar {
    box-shadow: 0 0 0 2px var(--canvas);
    opacity: 0.85;
  }

  
  .task:hover .faces__support .avatar,
  .menu__item:hover .faces__support .avatar,
  .task:hover .faces > .avatar { box-shadow: 0 0 0 2px var(--surface-hover); }

  .faces--stack > .avatar,
  .faces--stack > .faces__online > .avatar {
    position: relative;
    box-shadow: 0 0 0 2px var(--canvas);
  }

  .faces--stack > .avatar:not(:first-child),
  .faces--stack > .faces__online:not(:first-child) {
    margin-left: calc(var(--space) * -1.25);
  }

  
  .faces__online { position: relative; display: inline-flex; }

  .faces__online-dot {
    position: absolute;
    top: -0.0625rem;
    left: -0.0625rem;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: var(--radius-pill);
    background: var(--go);
    box-shadow: 0 0 0 2px var(--canvas);
  }

  .faces__empty {
    display: inline-grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    color: var(--ink-faint);
    transition: color var(--transition);
  }

  .faces__empty svg { width: 1.25rem; height: 1.25rem; }

  .faces__empty--medium { width: 2.25rem; height: 2.25rem; }
  .faces__empty--medium svg { width: 1.5rem; height: 1.5rem; }

  
  
  .avatar--arriving {
    animation: face-arrives 380ms var(--ease) backwards;
  }

  @keyframes face-arrives {
    from { opacity: 0; transform: scale(0.5); }
    60%  { opacity: 1; transform: scale(1.08); }
  }

  @media (prefers-reduced-motion: reduce) {
    .avatar--arriving { animation-name: face-fades; }
  }

  @keyframes face-fades {
    from { opacity: 0; }
  }
}