/* semgit — presence (ui-pass lane 5, #75): the pill that says who else is
   editing this document. Linked after notes.css, before edit.css.

   One pill, fixed at the desk's bottom right. In Edit it moves up above
   Lorenz's Submit dock (.ep-submit-dock in edit.css: right 20px, bottom
   20px, 44px tall), which is why the offsets are literals that match his
   and not tokens. Fixed, so a name arriving in it moves nothing the reader
   is looking at — the rule at the top of live.js. */

.presence {
  position: fixed;
  right: 20px; bottom: 20px;
  /* Over the paper, the rail and the notes' head (7); under the toasts (9)
     and the Submit dock (60). */
  z-index: 8;
  display: inline-flex; align-items: center; gap: 7px;
  max-width: calc(100vw - 40px);
  padding: 5px 12px 5px 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  /* --e2, as the channel pills have: a pill sits lower than a card (--e3). */
  box-shadow: var(--e2);
  font-size: 11px; font-weight: 500; line-height: 14px;
  color: var(--ink-2);
  white-space: nowrap;
  transition: bottom var(--mid) var(--ease);
}
/* The dot is --focus, the blue a question's dot has (UI-BRIEF 2.1). */
.presence-dot {
  flex: none;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--focus);
}
.presence-text { overflow: hidden; text-overflow: ellipsis; }
.presence-text [data-handle] { color: var(--ink); }

/* Edit: above the Submit dock — its 20px, its 44px, and 12px of air. */
.desk:has(.editing[data-mode="edit"]) .presence { bottom: 76px; }

/* The dock moves in to 12px under 720px (edit.css); the pill goes with it. */
@media (max-width: 720px) {
  .presence { right: 12px; bottom: 12px; }
  .desk:has(.editing[data-mode="edit"]) .presence { bottom: 68px; }
}

@media print { .presence { display: none !important; } }