/* Sessão compartilhada: avatares na barra, cursores das outras pessoas e o diálogo do link. */

/* Os avatares ficam empilhados para caberem na barra sem empurrar as ações. */
.peers {
  display: flex;
  align-items: center;
  flex: none;
}

.peers .peer-dot + .peer-dot,
.peers .peer-more {
  margin-left: -8px;
}

.peers .peer-dot,
.peers .peer-more {
  box-shadow: 0 0 0 2px var(--hull);
}

.peer-more {
  height: 24px;
  padding: 0 7px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--hull-3);
  border: 1px solid var(--seam-2);
  color: var(--bone-2);
  font: 500 11.5px var(--font-mono);
  flex: none;
}

.peer-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--brass-ink);
  background: var(--peer, var(--brass));
  border: 1px solid rgba(0, 0, 0, 0.35);
  flex: none;
  user-select: none;
}

.peers .peer-dot.is-me {
  box-shadow: 0 0 0 2px var(--hull), 0 0 0 3px var(--peer, var(--brass));
}

#btnSession.on {
  color: var(--brass-2);
  background: var(--brass-wash);
  border-color: var(--brass-edge);
}

/* ---------- cursores sobre o palco ---------- */

.peer-cursors {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: var(--z-cursor);
}

.peer-cursor {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: flex-start;
  gap: 3px;
  will-change: transform;
  transition: opacity 0.25s ease;
}

/* Cursor parado há um tempo esmaece em vez de sumir de uma vez. */
.peer-cursor.is-idle {
  opacity: 0;
}

.peer-cursor svg {
  width: 16px;
  height: 16px;
  flex: none;
  fill: var(--peer, var(--brass));
  stroke: rgba(8, 12, 13, 0.7);
  stroke-width: 1;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

.peer-cursor span {
  margin-top: 9px;
  padding: 1px 6px 2px;
  border-radius: 8px;
  background: var(--peer, var(--brass));
  color: var(--brass-ink);
  font-family: var(--font-ui);
  font-size: 11.5px;
  line-height: 1.5;
  white-space: nowrap;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- diálogo ---------- */

.session-link {
  display: flex;
  gap: 6px;
}

.session-link input {
  flex: 1;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 12.5px;
}

.session-peers {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.session-peers li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  color: var(--bone-2);
}

.session-state {
  font-size: 13px;
  color: var(--lichen);
  font-style: italic;
}

@media (max-width: 820px) {
  .peers {
    display: none;
  }
}