.flow-presence {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #5c7568;
  font-size: 8px;
  font-weight: 700;
}

.flow-presence::before {
  width: 6px;
  height: 6px;
  background: #64a580;
  border-radius: 50%;
  box-shadow: 0 0 0 3px #e5f2ea;
  content: "";
}

.flow-cursors {
  position: absolute;
  z-index: 20;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.flow-remote-cursor {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: transform 60ms linear;
  will-change: transform;
}

.flow-remote-cursor i {
  width: 0;
  height: 0;
  border-top: 10px solid #345f4c;
  border-right: 7px solid transparent;
  transform: rotate(-18deg);
}

.flow-remote-cursor strong {
  padding: 3px 6px;
  color: #fff;
  background: #345f4c;
  border-radius: 5px;
  box-shadow: 0 2px 7px rgba(30, 55, 43, 0.2);
  font-size: 7px;
  white-space: nowrap;
}