/* people.js: who is in a chat, Leave, and the composer's @ picker. */

.people { position: relative; display: flex; align-items: center; }
.people-chip { gap: var(--sv-space-2); padding: 0 var(--sv-space-2); }
.people-chip[hidden] { display: none; }
.people-faces { display: inline-flex; }
.people-faces .people-face + .people-face { margin-left: -6px; }
.people-face {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ws-selected);
  color: var(--sv-ink);
  box-shadow: 0 0 0 2px var(--sv-surface);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0;
}
.people-count { color: var(--sv-ink-tertiary); font-size: var(--ui-meta); font-variant-numeric: tabular-nums; }
.people-card {
  position: absolute;
  top: calc(100% + var(--sv-space-2));
  right: 0;
  z-index: var(--sv-z-overlay);
  width: min(20rem, calc(100vw - 2 * var(--sv-space-4)));
  max-height: min(60vh, 28rem);
  overflow-y: auto;
  padding: var(--sv-space-2);
}
.people-head { margin: 0; padding: var(--sv-space-1) var(--sv-space-2); color: var(--sv-ink-tertiary); font-size: var(--ui-meta); font-weight: 500; letter-spacing: var(--sv-tracking-caps); text-transform: uppercase; }
.people-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.people-row, .mention-row { display: flex; align-items: center; gap: var(--sv-space-2); min-height: 40px; padding: 2px var(--sv-space-2); border-radius: var(--sv-radius); }
.people-who { flex: 1; min-width: 0; display: grid; font-size: var(--ui-text); }
.people-who strong, .mention-row strong { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.people-mail { color: var(--sv-ink-tertiary); font-size: var(--ui-meta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.people-tag { flex: none; color: var(--sv-ink-tertiary); font-size: var(--ui-meta); }
button.people-leave { margin: var(--sv-space-2) 0 0; width: 100%; justify-content: center; color: var(--sv-danger); }
.composer { position: relative; }
.mention-picker {
  position: absolute;
  left: var(--sv-space-2);
  bottom: calc(100% + var(--sv-space-1));
  z-index: calc(var(--sv-z-overlay) + 2); /* above the composer's notices */
  width: min(22rem, calc(100% - 2 * var(--sv-space-2)));
  padding: var(--sv-space-1);
  border-radius: calc(var(--sv-radius) * 1.25);
}
.mention-row { cursor: pointer; font-size: var(--ui-text); }
.mention-row .people-mail { flex: 1; min-width: 0; }
.mention-row[aria-selected="true"] { background: var(--ws-hover); }
/* @people without @Share (people.js): said before it goes that only they get it. */
.mention-hint {
  align-self: center;
  width: min(100%, calc(var(--reading) + 2 * var(--sv-space-5)));
  padding: var(--sv-space-1) var(--sv-space-5);
  color: var(--sv-ink-tertiary);
  font-size: var(--ui-meta);
}
.mention-hint[hidden] { display: none; }
/* An @handle that names no one here (mentionpicker.js unresolved): it tells no one. */
.mention-unresolved { color: var(--sv-attention); }
@media (max-width: 760px) {
  .people-count { display: none; }
  .people-card { position: fixed; top: 60px; right: var(--sv-space-4); left: var(--sv-space-4); width: auto; }
}