/*
 * Cornice del "follow": quando il mio viewport insegue quello di un altro
 * operatore, un bordo del suo colore incornicia la vista e un'etichetta dice chi
 * sto seguendo. È un overlay **fisso sullo schermo** (non nel mondo): non pana né
 * zooma col board, resta incollato ai bordi del canvas.
 *
 * Il colore arriva runtime in `--follow-color` (dal roster del peer seguìto); qui
 * non è mai hardcoded. Decorativo: non intercetta i pointer, così il board sotto
 * resta interamente usabile — ed è ciò che permette allo stacco (pan/zoom) di
 * avvenire normalmente.
 */

.follow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 200;
  /* Bordo spesso del colore del peer, verso l'interno così non allarga il canvas. */
  box-shadow: inset 0 0 0 3px var(--follow-color, var(--accent));
}

.follow[hidden] {
  display: none;
}

/* Etichetta "Segui <nome>": pastiglia in alto al centro, sul colore del peer. */
.follow__label {
  position: absolute;
  top: 10px;
  left: 50%;
  translate: -50% 0;
  max-width: 60vw;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--follow-color, var(--accent));
  color: #fff;
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 1px rgb(0 0 0 / 30%);
  box-shadow: var(--shadow-chrome);
}