/* ============================================================
   Ospaces — Real-time collaboration (light + dark).
   Presence avatar stack, "N viewing" badge, and remote-cursor
   decorations on editor blocks. Colors come from each peer's
   deterministic HSL (inline), chrome from the theme variables.
   ============================================================ */

/* ---- presence avatar stack (topbar) ---- */
.presence-stack {
  display: inline-flex;
  align-items: center;
}
.presence-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg);
  margin-left: -7px;
  user-select: none;
  cursor: default;
}
.presence-avatar:first-child { margin-left: 0; }
.presence-overflow {
  background: var(--bg-active);
  color: var(--text-light);
}

/* ---- presence on a database title row ---- */
.db-presence {
  display: inline-flex;
  align-items: center;
  margin-left: 10px;
}
.db-presence:empty { display: none; }

/* ---- "N viewing" badge (topbar) ---- */
.collab-badge {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font);
  color: var(--text-light);
  background: var(--bg-hover);
  border-radius: 10px;
  padding: 2px 9px;
  white-space: nowrap;
  user-select: none;
}
.collab-badge[hidden] { display: none; }

/* ---- remote focus decoration on editor blocks ---- */
/* --collab-color is set inline per block from the peer's color. */
.block.collab-remote-focus {
  position: relative;
  box-shadow: inset 2px 0 0 var(--collab-color, var(--accent));
  border-radius: 2px;
}

/* name flags floating at the block's top-right (one per peer) */
.collab-flags {
  position: absolute;
  top: -9px;
  right: 4px;
  display: flex;
  gap: 4px;
  pointer-events: none;
  z-index: 6;
}
.collab-flag {
  font-size: 10px;
  font-weight: 600;
  font-family: var(--font);
  line-height: 1;
  color: #fff;
  border-radius: 4px;
  padding: 3px 7px;
  white-space: nowrap;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: rgba(15, 15, 15, 0.15) 0 1px 3px;
}
html[data-theme="dark"] .collab-flag {
  box-shadow: rgba(0, 0, 0, 0.45) 0 1px 3px;
}

/* ---- live remote caret + selection (Google-Docs style) ---- */
/* One non-editable, click-through overlay per block; children are positioned
   relative to the block's border box (.block is position: relative). */
.collab-cursor-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  user-select: none;
}
/* thin caret bar at the peer's exact offset; background set inline per peer */
.collab-caret {
  position: absolute;
  width: 2px;
  border-radius: 1px;
  animation: collab-caret-blink 1.1s steps(1) infinite;
}
/* little cap on top of the caret so overlapping carets stay distinguishable */
.collab-caret-cap {
  position: absolute;
  top: -3px;
  left: -1px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
}
@keyframes collab-caret-blink {
  0%, 55% { opacity: 1; }
  56%, 100% { opacity: 0.15; }
}
@media (prefers-reduced-motion: reduce) {
  .collab-caret { animation: none; }
}
/* translucent selection band; background set inline per peer */
.collab-sel {
  position: absolute;
  opacity: 0.22;
  border-radius: 2px;
}