/* Presence decorates holders and content wrappers, never tool roots.
   Per-peer colors come from hex-validated awareness values in presence.ts. */

[data-blok-interface] {
  --blok-presence-color: #0b6e99;
  /* The gutter strip's inline gap. */
  --blok-presence-gap: 6px;
  --blok-presence-caret-width: 2px;
  /* Half the width, so both ends read as a cap rather than a cut corner. */
  --blok-presence-caret-radius: 1px;
  --blok-presence-pulse: 1.6s;
  --blok-presence-face-size: 32px;
  /* Ring around a gutter face. */
  --blok-presence-ring: 2px;
  --blok-presence-face-gap: 2px;
  --blok-presence-slide: 180ms;
  /* Only a floor. The real height is written per block by presence-avatars.ts
     from the MEASURED first line — a heading's line is far taller than a
     paragraph's, so no constant centres the face on both. */
  --blok-presence-face-line: 1.5rem;
}

/* Holder-relative coordinates keep carets out of the text layout. */
[data-blok-presence-caret] {
  position: absolute;
  z-index: 2;
  width: var(--blok-presence-caret-width);
  /* Half the width, so the line straddles the character boundary it was
     measured at instead of sitting to the right of it. */
  margin-left: calc(-0.5 * var(--blok-presence-caret-width));
  border-radius: var(--blok-presence-caret-radius);
  background: var(--blok-presence-color);
  pointer-events: none;
  user-select: none;
}

/* The name above a remote caret. A SIBLING of the caret, not a pseudo-element
   on it: the resting pulse animates the caret's opacity, and a name breathing
   with the line would be unreadable. The text is an attribute this rule paints,
   because the flag hangs off the holder and a copied block keeps text nodes. */
[data-blok-presence-caret-label] {
  position: absolute;
  z-index: 2;
  padding: var(--blok-space-0-5) var(--blok-space-1-5);
  border-radius: var(--blok-space-1);
  background: var(--blok-presence-color);
  color: var(--blok-text-on-dark);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.45;
  white-space: nowrap;
  opacity: 0;
  /* Its own height above the line, so it never covers the text it points at. */
  transform: translateY(calc(-100% - 4px));
  transition: opacity 140ms ease;
  pointer-events: none;
  user-select: none;
}

[data-blok-presence-caret-label]::after {
  content: attr(data-blok-presence-caret-label);
}

[data-blok-presence-caret-shown] {
  opacity: 1;
}

/* A slow fade distinguishes remote idle carets from the local cursor's blink. */
[data-blok-presence-caret-idle] {
  animation: blok-presence-caret-pulse var(--blok-presence-pulse) ease-in-out infinite;
}

@keyframes blok-presence-caret-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* The line still settles; only the animation goes. */
@media (prefers-reduced-motion: reduce) {
  [data-blok-presence-caret-idle] {
    animation: none;
  }

  /* The face still steps aside — it just arrives there at once. */
  [data-blok-presence-gutter] {
    transition: none;
  }

  /* The name still comes and goes; it just does not fade. */
  [data-blok-presence-caret-label] {
    transition: none;
  }
}

/* Use the content wrapper, not the full-width holder, to stay beside the text. */
[data-blok-presence-gutter] {
  position: absolute;
  top: 0;
  inset-inline-end: 100%;
  z-index: 1;
  display: flex;
  gap: var(--blok-presence-face-gap);
  align-items: center;
  min-height: var(--blok-presence-face-line);
  margin-inline-end: var(--blok-presence-gap);
  transition: transform var(--blok-presence-slide) cubic-bezier(0.2, 0.7, 0.3, 1);
  pointer-events: none;
  user-select: none;
}

/* Only the innermost hovered block owns the controls.
   The toolbar gutter collapses to zero in read-only mode. */
[data-blok-element]:hover:not(:has([data-blok-element]:hover)) > [data-blok-element-content] > [data-blok-presence-gutter] {
  transform: translateX(calc(-1 * var(--blok-editor-gutter-start, 0px)));
}

/* Transforms are physical, so the RTL gutter needs the opposite sign. */
[data-blok-rtl="true"] [data-blok-element]:hover:not(:has([data-blok-element]:hover)) > [data-blok-element-content] > [data-blok-presence-gutter] {
  transform: translateX(var(--blok-editor-gutter-start, 0px));
}

/* Shared disc geometry for the gutter face and its overflow badge. */
[data-blok-presence-face],
[data-blok-presence-face-overflow] {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--blok-presence-face-size);
  height: var(--blok-presence-face-size);
  box-sizing: border-box;
  border: var(--blok-presence-ring) solid var(--blok-bg-primary);
  border-radius: 50%;
  background: var(--blok-presence-color);
  color: var(--blok-text-on-dark);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
}

/* Block copy unwraps the strip, so initials must not be text nodes. */
[data-blok-presence-face]::after,
[data-blok-presence-face-overflow]::after {
  content: attr(data-blok-presence-initials);
}

/* A count, not a person: no ring, so it never reads as another face. */
[data-blok-presence-face-overflow] {
  border-color: transparent;
  background: transparent;
  color: var(--blok-text-secondary);
  font-size: 10px;
}

/* The drag ghost clones the content wrapper the strip is mounted on. */
[data-blok-interface="drag-preview"] [data-blok-presence-gutter] {
  display: none;
}

/* The face's title needs hover; the surrounding strip must not block controls. */
[data-blok-presence-face] {
  pointer-events: auto;
}

/* Block copy unwraps the gutter. Keep artwork in a CSS mask, never child SVG. */
[data-blok-presence-glyph]::after {
  content: "";
  width: 75%;
  height: 75%;
  background-color: currentcolor;
  -webkit-mask-image: var(--blok-presence-glyph);
  mask-image: var(--blok-presence-glyph);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

[data-blok-presence-glyph="astronaut"] {
  --blok-presence-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M10 1.5a6.5 6.5 0 016.5 6.5v3a4.5 4.5 0 01-4.5 4.5H8A4.5 4.5 0 013.5 11V8A6.5 6.5 0 0110 1.5ZM5.5 8a4.5 4.5 0 019 0v1.75a2.5 2.5 0 01-2.5 2.5H8a2.5 2.5 0 01-2.5-2.5Z'/%3E%3Cpath d='M6.7 10.2a3.5 3.5 0 013.1-3.3 4.2 4.2 0 00-2.1 3.3Z'/%3E%3Cpath d='M3.5 1.9a1.15 1.15 0 011.6 1.6l1 1-1.6 1.6-1-1Z'/%3E%3Crect x='1' y='7.5' width='1.5' height='4.5' rx='.75'/%3E%3Crect x='17.5' y='7.5' width='1.5' height='4.5' rx='.75'/%3E%3Cpath fill-rule='evenodd' d='M6.4 16.3h7.2a.8.8 0 01.8.8v.6a.8.8 0 01-.8.8H6.4a.8.8 0 01-.8-.8v-.6a.8.8 0 01.8-.8ZM7 17.05h3v.7H7ZM11.2 17.05h2v.7h-2Z'/%3E%3C/svg%3E");
}
[data-blok-presence-glyph="rocket"] {
  --blok-presence-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='currentColor'%3E%3Cg transform='translate(1 -1) rotate(45 10 10)'%3E%3Cpath fill-rule='evenodd' d='M10 1.25C7.2 3.25 6.5 6.25 6.5 9.5V12l1 1.5h5l1-1.5V9.5c0-3.25-.7-6.25-3.5-8.25ZM10 5.75a1.75 1.75 0 100 3.5 1.75 1.75 0 000-3.5ZM7.9 3.9q2.1-.6 4.2 0l-.25.95q-1.85-.55-3.7 0ZM7.7 10.9h4.6v.9H7.7Z'/%3E%3Cpath fill-rule='evenodd' d='m5.25 8.75-2 2.5a1.5 1.5 0 00-.25.85v2.65c0 .45.45.7.8.5l2.45-1.4-1-1.5Zm9.5 0 2 2.5c.2.25.25.55.25.85v2.65c0 .45-.45.7-.8.5l-2.45-1.4 1-1.5ZM8.25 15h3.5c0 1.75-.75 3.1-1.75 4.25C9 18.1 8.25 16.75 8.25 15Zm1.05 1.2h1.4c0 .95-.3 1.7-.7 2.3-.4-.6-.7-1.35-.7-2.3Z'/%3E%3C/g%3E%3C/svg%3E");
}
[data-blok-presence-glyph="comet"] {
  --blok-presence-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M17.8 2.2c-2.2 4.4-3.9 8.9-6.7 12.9a5 5 0 0 1-7.8.9c-2.5-2.7-1.4-6.6 1.3-8.6 2.2-1.6 4.4-3.1 6.4-5.2-.2 2.7-2.6 4.6-4.4 6.2C11 7.6 14.3 5.2 17.8 2.2ZM6.8 10a2.6 2.6 0 1 0 0 5.2 2.6 2.6 0 0 0 0-5.2Z'/%3E%3Cpath d='M14 15c1.7-1.9 3.1-4.5 4-7-2.4 1.5-3.9 4.1-4 7Z'/%3E%3Cpath d='M5.4 12.8c0-.8.6-1.4 1.4-1.4' fill='none' stroke='currentColor' stroke-width='1.1' stroke-linecap='round'/%3E%3C/svg%3E");
}
[data-blok-presence-glyph="satellite"] {
  --blok-presence-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='currentColor'%3E%3Cg transform='rotate(-35 10 10)'%3E%3Cg fill='none' stroke='currentColor' stroke-width='1.25'%3E%3Cpath stroke-linecap='round' d='M4.75 10.25H7.25m5.5 0h2.5M10 5V6M10 1.1V2.3'/%3E%3Crect x='1.25' y='7' width='3.5' height='6.5' rx='.6'/%3E%3Crect x='15.25' y='7' width='3.5' height='6.5' rx='.6'/%3E%3Cpath d='M1.25 9.15h3.5m-3.5 2.2h3.5M15.25 9.15h3.5m-3.5 2.2h3.5'/%3E%3Crect x='7.25' y='6' width='5.5' height='8.5' rx='1.25'/%3E%3C/g%3E%3Cpath d='M10.8 6.6h1.25v7.25H7.9v-1.5h2.9Z'/%3E%3Cpath fill-rule='evenodd' d='M6.9 2.25h6.2q-.2 3-3.1 3t-3.1-3ZM8.4 3.2q1.6 1.9 3.2 0Z'/%3E%3C/g%3E%3C/svg%3E");
}
[data-blok-presence-glyph="planet"] {
  --blok-presence-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='currentColor'%3E%3Cg transform='rotate(-30 10 10)'%3E%3Cpath fill-rule='evenodd' d='M4.5 9.25a5.55 5.55 0 1111 0c-3.1.9-7.9.9-11 0ZM6.9 6.5h2.6a.6.6 0 010 1.2H6.9a.6.6 0 010-1.2ZM11.3 8.1h1.9a.55.55 0 010 1.1h-1.9a.55.55 0 010-1.1ZM13.2 5.4q1.75 1.15 1.85 2.95-1.05-1.8-2.65-2.25Z'/%3E%3Cpath d='M5.85 14a5.55 5.55 0 008.3 0 30 30 0 01-8.3 0Z'/%3E%3Cpath d='M2.75 7.75C-.5 9.75 3.5 12.75 10 12.75s10.5-3 7.25-5' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E");
}
[data-blok-presence-glyph="moon"] {
  --blok-presence-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M11.6 2a.5.5 0 0 1 .4.8A6.6 6.6 0 0 0 17.2 13.4a.5.5 0 0 1 .45.75A8.25 8.25 0 1 1 11.6 2ZM5 6.5a1.2 1.2 0 1 0 0 2.4 1.2 1.2 0 0 0 0-2.4ZM7 12a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Z'/%3E%3Cpath d='m15 2 .8 2.2L18 5l-2.2.8L15 8l-.8-2.2L12 5l2.2-.8Z'/%3E%3C/svg%3E");
}
[data-blok-presence-glyph="star"] {
  --blok-presence-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath transform='translate(0 .5)' fill-rule='evenodd' d='M9.25 2.5q.75-1.5 1.5 0l1.9 3.9 4.3.6q1.7.25.45 1.45l-3.1 3 .75 4.3q.3 1.75-1.25.9L10 14.65l-3.8 2q-1.55.85-1.25-.9l.75-4.3-3.1-3Q1.35 7.25 3.05 7l4.3-.6ZM10 4.2l.6 4.9 1.3-1.9ZM15.8 8.2l-4.3 1.5 2.1.9ZM13.8 15.2l-2.7-3.6-.3 1.7ZM6.2 15.3l2.4-4-1.7.7ZM4.2 8l4.3 1.5-1.2-1.8Z'/%3E%3C/svg%3E");
}
[data-blok-presence-glyph="sun"] {
  --blok-presence-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M10 5.6a4.4 4.4 0 100 8.8 4.4 4.4 0 000-8.8ZM8.1 7.5a3.2 3.2 0 004.4 4.4 4.8 4.8 0 01-4.4-4.4Z'/%3E%3Cpath d='M9.6 1.2q2 1.6.4 3.2-1.6-1.6-.4-3.2Z'/%3E%3Cpath transform='rotate(45 10 10)' d='M9.6 1.2q2 1.6.4 3.2-1.6-1.6-.4-3.2Z'/%3E%3Cpath transform='rotate(90 10 10)' d='M9.6 1.2q2 1.6.4 3.2-1.6-1.6-.4-3.2Z'/%3E%3Cpath transform='rotate(135 10 10)' d='M9.6 1.2q2 1.6.4 3.2-1.6-1.6-.4-3.2Z'/%3E%3Cpath transform='rotate(180 10 10)' d='M9.6 1.2q2 1.6.4 3.2-1.6-1.6-.4-3.2Z'/%3E%3Cpath transform='rotate(225 10 10)' d='M9.6 1.2q2 1.6.4 3.2-1.6-1.6-.4-3.2Z'/%3E%3Cpath transform='rotate(270 10 10)' d='M9.6 1.2q2 1.6.4 3.2-1.6-1.6-.4-3.2Z'/%3E%3Cpath transform='rotate(315 10 10)' d='M9.6 1.2q2 1.6.4 3.2-1.6-1.6-.4-3.2Z'/%3E%3C/svg%3E");
}
[data-blok-presence-glyph="telescope"] {
  --blok-presence-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath d='M10 10.5v7.75M10 11.5l-4.75 6.75M10 11.5l4.75 6.75M6.3 16.8h7.4' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round'/%3E%3Cg transform='rotate(-30 10 7.5)'%3E%3Cpath fill-rule='evenodd' d='M2 6.25h3V5h9v5H5V8.75H2a.5.5 0 01-.5-.5v-1.5a.5.5 0 01.5-.5ZM12.3 5.9h1.1v3.2h-1.1Z'/%3E%3Crect x='15.25' y='4' width='1.75' height='7' rx='.6'/%3E%3Ccircle cx='9' cy='10.7' r='.95'/%3E%3C/g%3E%3C/svg%3E");
}
[data-blok-presence-glyph="galaxy"] {
  --blok-presence-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='currentColor'%3E%3Ccircle cx='10' cy='10' r='1.65'/%3E%3Cpath d='M3 11.75C1.5 8 3.8 3.25 8 2.5c3-.55 6 .5 7.25 2.75-2.5-1.8-6-1.6-7.85.55-1.7 1.95-1.25 4.4.4 6-2.05-.35-3.55-2-3.55-4.15-.85 1.15-1.2 2.65-1.25 4.1Z'/%3E%3Cpath transform='rotate(180 10 10)' d='M3 11.75C1.5 8 3.8 3.25 8 2.5c3-.55 6 .5 7.25 2.75-2.5-1.8-6-1.6-7.85.55-1.7 1.95-1.25 4.4.4 6-2.05-.35-3.55-2-3.55-4.15-.85 1.15-1.2 2.65-1.25 4.1Z'/%3E%3C/svg%3E");
}
[data-blok-presence-glyph="saucer"] {
  --blok-presence-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='currentColor'%3E%3Cg transform='translate(0 -.7) rotate(-12 10 10)'%3E%3Cpath fill-rule='evenodd' d='M5.5 7.65q.35-4.9 4.5-4.9t4.5 4.9ZM7.35 6.2q.7-2.1 2.65-2.1t2.65 2.1Z'/%3E%3Cpath d='M7.6 6.3h1.1l2.2-2.6h-1.1Z'/%3E%3Cpath fill-rule='evenodd' d='M10 8.9c4.7 0 8.5.95 8.5 2.3 0 1.2-3.8 3.05-8.5 3.05S1.5 12.4 1.5 11.2 5.3 8.9 10 8.9ZM5.5 10.25a.9.9 0 100 1.8.9.9 0 000-1.8Zm4.5 0a.9.9 0 100 1.8.9.9 0 000-1.8Zm4.5 0a.9.9 0 100 1.8.9.9 0 000-1.8ZM4.7 12.6q5.3 1.5 10.6 0-5.3 2.1-10.6 0Z'/%3E%3Cpath d='M8.6 15.6 6.75 18.5h6.5l-1.85-2.9' fill='none' stroke='currentColor' stroke-width='1.25' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E");
}
[data-blok-presence-glyph="asteroid"] {
  --blok-presence-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M6.4 2.8 10.6 1.5q.7-.2 1.2.3l1.8 1.6 2.6.9q.7.3.8 1l.4 2.6-1.2 1.4 1.9 2.4q.4.5.1 1.2l-2.1 3.1q-.3.5-1 .6l-2.4.5-1.7 1q-.6.4-1.2 0l-2.1-1-2.7-.4q-.8-.1-1.1-.8l-1.7-3.3q-.4-.7 0-1.3L3 9 2.9 6.6q0-.8.6-1.2l1.8-2q.5-.4 1.1-.6ZM7.2 4.5a2.5 2.5 0 100 5 2.5 2.5 0 000-5ZM12.5 10.1a1.9 1.9 0 100 3.8 1.9 1.9 0 000-3.8ZM5.6 12a1 1 0 100 2 1 1 0 000-2Z'/%3E%3Cpath d='M8.6 6.1a1.7 1.7 0 01-2.3 2.3 2.3 2.3 0 002.3-2.3ZM13.5 11.4a1.2 1.2 0 01-1.6 1.6 1.6 1.6 0 001.6-1.6Z'/%3E%3C/svg%3E");
}
[data-blok-presence-glyph="unknown"] {
  --blok-presence-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='currentColor'%3E%3Ccircle cx='10' cy='5.7' r='3.7'/%3E%3Cpath fill-rule='evenodd' d='M10 11.2c4 0 7 2.1 7 5.4v1.2H3v-1.2c0-3.3 3-5.4 7-5.4Zm0 1.6c-2.9 0-5.3 1.4-5.3 3.5h10.6c0-2.1-2.4-3.5-5.3-3.5Z'/%3E%3C/svg%3E");
}