/* ==========================================================================
   Peerly Draw — Peers list & avatars (Material 3)
   ==========================================================================
   List item M3 : height 56dp, padding 16dp, radius 12dp
   Avatar : full round, tailles 40/48/72dp
   ========================================================================== */

.peer-item {
  display: flex;
  align-items: center;
  gap: var(--md-sys-spacing-1half);
  padding: var(--md-sys-spacing-1) var(--md-sys-spacing-1half);
  min-height: 56px;
  border-radius: var(--md-sys-shape-md);
  transition: background-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}

.peer-item:hover {
  background: color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-hover-opacity), transparent);
}

.peer-item--self {
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
}

.peer-item--self:hover {
  background: color-mix(in srgb, var(--md-sys-color-on-primary-container) var(--md-sys-state-hover-opacity), var(--md-sys-color-primary-container));
}

/* ==========================================================================
   AVATARS
   ========================================================================== */

.avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--md-sys-shape-full);
  font-family: var(--md-sys-typescale-font);
  font-weight: 600;
  color: #FFFFFF;
  flex-shrink: 0;
  object-fit: cover;
  user-select: none;
}

.avatar--sm {
  width: 32px;
  height: 32px;
  font-size: var(--md-sys-typescale-label-large-size);
}
.avatar--md {
  width: 40px;
  height: 40px;
  font-size: var(--md-sys-typescale-title-medium-size);
}
.avatar--lg {
  width: 48px;
  height: 48px;
  font-size: var(--md-sys-typescale-title-large-size);
}
.avatar--xl {
  width: 72px;
  height: 72px;
  font-size: var(--md-sys-typescale-headline-small-size);
}

/* ==========================================================================
   PEER ITEM CONTENT
   ========================================================================== */

.peer-item__name {
  flex: 1;
  font-size: var(--md-sys-typescale-body-large-size);
  line-height: var(--md-sys-typescale-body-large-line);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.peer-item__status {
  font-family: var(--md-sys-typescale-mono);
  font-size: var(--md-sys-typescale-label-small-size);
  font-weight: 500;
  color: var(--md-sys-color-on-surface-variant);
  flex-shrink: 0;
}

.peer-item--self .peer-item__status {
  color: var(--md-sys-color-on-primary-container);
  opacity: 0.8;
}