/* ── live ──
 * Live collaboration: peer carets, name chips, gutter dots, lock states.
 * Linked from index.html in cascade order — the order is load-bearing. */

/* ── Live collaboration ──────────────────────────────────────────────────────
   Carets are drawn in a fixed layer OVER the note, never inside it: the editable
   area is contenteditable, and an element placed in there lands inside somebody's
   text and gets typed around. */
#collab-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;     /* never eat a click meant for the note */
  z-index: 55;              /* over the note, under the palette (100) */
}

.collab-caret {
  position: fixed;
  width: 2px;
  border-radius: 1px;
  /* Follows rather than jumps, which is what makes it read as a person moving. */
  transition: top 0.08s linear, left 0.08s linear;
}

.collab-chip {
  position: absolute;
  bottom: 100%;
  left: -1px;
  margin-bottom: 3px;
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 10px;
  line-height: 1.5;
  white-space: nowrap;
  color: #0b0c0d;           /* the chip is filled with the peer's colour */
  font-weight: 600;
  opacity: 1;
  transition: opacity 0.4s;
}
.collab-chip.idle { opacity: 0; }

/* A dot in the gutter survives scrolling, so somebody working two screens down
   is still visible without hunting for their cursor. */
.collab-dot {
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  margin: 0 auto;
}

/* A block someone else is editing: tinted in their colour and visibly not yours.
   The refusal to type lives in app.js; this is only how it looks. */
.block.collab-locked .block-content {
  opacity: 0.7;
  cursor: not-allowed;
}
.block.collab-locked {
  box-shadow: inset 2px 0 0 var(--collab-colour, var(--accent));
  background: color-mix(in srgb, var(--collab-colour, var(--accent)) 7%, transparent);
}

/* Presence in the status bar: squares, not circular avatars — the app is
   monospace and square-edged, and round avatars read as pasted on. */
#live-peers { display: inline-flex; align-items: center; gap: 5px; }
#live-peers.hidden { display: none; }
.peer-dot { width: 7px; height: 7px; border-radius: 2px; display: inline-block; }
.peer-count { color: var(--fg-dim); }

/* The live toggle in the share panel. */
.live-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  cursor: pointer;
  font-size: 12px;
}
.live-row input { accent-color: var(--accent); cursor: pointer; }
.live-label { color: var(--fg); }
.live-note { color: var(--fg-dim); margin-left: auto; font-size: 11px; }
.live-row.unavailable { opacity: 0.5; cursor: not-allowed; }
.live-row.unavailable input { cursor: not-allowed; }

/* Reconnecting and frozen states, said in the status bar rather than a dialog. */
#live-peers.reconnecting .peer-count { color: var(--warn); }
#live-peers.frozen .peer-count { color: var(--danger); }