/*
 * Roster degli operatori live nella toolbar, alla Figma: stack di avatar tondi
 * sovrapposti, colore assegnato dal server. Quando il live server non risponde,
 * al loro posto un grigio informativo — nessun errore, la presence è un di più.
 *
 * Colori dai token; il colore del singolo avatar arriva runtime dal server ed è
 * scritto nella CSS var `--avatar-color` dal renderer (mai hardcoded qui).
 */

.presence {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
}

/* Stato offline / in connessione: pastiglia grigia, tenue, non cliccabile. */
.presence__offline {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: var(--surface-raised);
  color: var(--text-dim);
  font-size: var(--text-xs);
  white-space: nowrap;
}

/* Lo stack: gli avatar si sovrappongono leggermente, come in Figma. */
.presence__stack {
  display: inline-flex;
  align-items: center;
}

.presence__stack > * + * {
  margin-left: -8px;
}

.presence__avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 2px solid var(--surface-chrome);
  border-radius: 50%;
  background: var(--avatar-color, var(--border-strong));
  color: #fff;
  cursor: pointer;
  /* Il bordo del colore della chrome stacca gli avatar sovrapposti tra loro. */
  transition:
    translate var(--duration-fast) var(--ease),
    box-shadow var(--duration-fast) var(--ease);
}

/* In hover l'avatar sale sopra i vicini sovrapposti e si solleva un filo. */
.presence__avatar:hover {
  z-index: 2;
  translate: 0 -2px;
}

/* Le iniziali: piccole, in grassetto, leggibili su qualunque tinta della palette. */
.presence__initials {
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 1px rgb(0 0 0 / 35%);
  user-select: none;
}

/* Il proprio avatar è un bottone: si può cliccare per rinominarsi. */
.presence__avatar--self {
  cursor: pointer;
  /* Sta davanti agli altri nello stack, così l'anello di "tu" non è coperto. */
  z-index: 1;
  box-shadow: 0 0 0 2px var(--accent);
}

/* Il self usa la stessa animazione di sollevamento in hover, via `.presence__avatar:hover`. */

.presence__avatar--self:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--accent), 0 0 0 4px var(--accent-soft);
}

/* L'avatar del peer che sto seguendo: anello del suo colore, così si vede a colpo
   d'occhio chi guido con lo sguardo. */
.presence__avatar--following {
  z-index: 1;
  box-shadow: 0 0 0 2px var(--surface-chrome), 0 0 0 4px var(--avatar-color);
}

/* Il pastiglione "+N" per gli operatori oltre il tetto: neutro, non un colore peer. */
.presence__avatar--overflow {
  background: var(--surface-raised);
  border-color: var(--surface-chrome);
  color: var(--text-secondary);
}

.presence__avatar--overflow .presence__initials {
  text-shadow: none;
  font-weight: 600;
}

/* --- rifiniture della modale rinomina (riusa la chrome di .settings) -------- */

.rename__intro {
  margin: 0 0 4px;
  color: var(--text-secondary);
  font-size: var(--text-sm);
}