/* collab-fields.css — Feld-Level-Co-Editing-Indikatoren (LoD.CollabFields, Stufe 3).
   "Wird gerade von X bearbeitet" am Feld: farbiger Cutout-Ring in der Peer-Farbe
   + kleiner Peer-Avatar oben rechts. Advisory (weiche Sperre) — kein Disable.
   Blueprint: docs/reference/product/gleichzeitige-bearbeitung.md (Stufe 3). */

/* Ring via OUTLINE (nicht box-shadow): kollidiert so NICHT mit dem box-shadow-Ring
   von .is-missing / Fokus am selben Feld — beide koennen gleichzeitig sichtbar sein.
   outline-offset gibt den Cutout-Abstand; moderne Browser folgen dem border-radius. */
.app-scope .collab-field-active {
  outline: 2px solid var(--collab-color, var(--brand-default));
  outline-offset: 2px;
  transition: outline-color var(--motion-fast) var(--ease-standard);
}

.app-scope .collab-field-badge {
  position: absolute;
  top: -10px;
  right: -6px;
  display: inline-flex;
  z-index: 5;
  pointer-events: none;
}
/* Der Titel-Bereich sitzt am oberen/rechten Body-Rand — das Standard-Badge (top:-10px/
   right:-6px steht AUSSERHALB der Box) wird dort vom Body abgeschnitten. Fuer den Titel
   das Badge INNEN am oberen rechten Rand positionieren, damit „wer bearbeitet" sichtbar ist. */
.app-scope .collab-field-badge[data-collab-field="titel"] {
  top: 6px;
  right: 6px;
}
.app-scope .collab-field-badge-slot { display: inline-flex; margin-left: -6px; }
.app-scope .collab-field-badge-slot:first-child { margin-left: 0; }
.app-scope .collab-field-badge .avatar {
  animation: collabBadgeIn var(--motion-enter) var(--ease-overshoot) backwards;
}
@keyframes collabBadgeIn {
  from { opacity: 0; transform: scale(0.5); }
  to   { opacity: 1; transform: scale(1); }
}

/* Live-Wert-Ghost (Stufe 3b): waehrend ein Peer den Feldwert live tippt, faerbt sich
   der (fremde) Text in der Peer-Farbe + leicht kursiv als "wird gerade getippt"-Hinweis.
   Rein visuell/ephemer — der wahre lokale Wert wird bei Blur/Fokus wiederhergestellt. */
.app-scope .collab-ghost-text {
  color: var(--collab-color, var(--brand-default));
  font-style: italic;
  transition: color var(--motion-fast) var(--ease-standard);
}

/* E4a: Peer-Draft-Punkte der Checkliste (neue, noch nicht gespeicherte Punkte eines
   Kollegen) — als nicht-interaktive Ghost-Zeile AN IHRER order-Position in der Liste
   (nicht mehr als Overlay unten). Rein advisory. */
.app-scope .app-checklist-item.collab-peer-ghost {
  border: 1px dashed var(--collab-color, var(--brand-default));
  background: color-mix(in srgb, var(--collab-color, var(--brand-default)) 6%, transparent);
  opacity: 0.9; cursor: default;
  animation: collabBadgeIn var(--motion-enter) var(--ease-overshoot) backwards;
}
.app-scope .collab-peer-ghost-dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--collab-color, var(--brand-default)); flex: 0 0 auto; }
.app-scope .collab-peer-ghost-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-style: italic; color: var(--lod-gray-700); }
.app-scope .collab-peer-ghost-who { font-size: var(--font-size-xs); color: var(--collab-color, var(--brand-default)); flex: 0 0 auto; margin-left: auto; }

/* Anwesend-Indikator auf Aufgaben-Karten/Listen: kleiner ueberlappender Avatar-Cluster
   oben rechts — wer hat den Datensatz gerade offen (bevor man ihn selbst oeffnet). */
.app-scope .card-presence {
  position: absolute; top: 6px; right: 6px;
  display: inline-flex; z-index: 3; pointer-events: none;
}
.app-scope .card-presence-slot {
  display: inline-flex; margin-left: -6px; border-radius: 50%;
  box-shadow: 0 0 0 2px var(--lod-white, #fff);
  animation: collabBadgeIn var(--motion-enter) var(--ease-overshoot) backwards;
}
.app-scope .card-presence-slot:first-child { margin-left: 0; }

/* E4b: Ghost-Avatare fuer live vom Peer hinzugefuegte Team-Mitglieder (noch nicht gespeichert). */
.app-scope .collab-team-ghosts { display: inline-flex; align-items: center; gap: 3px; margin-left: var(--space-2); vertical-align: middle; }
.app-scope .collab-team-ghost {
  display: inline-flex; border-radius: 50%;
  outline: 2px dashed var(--collab-color, var(--brand-default)); outline-offset: 1px;
  opacity: 0.85;
  animation: collabBadgeIn var(--motion-enter) var(--ease-overshoot) backwards;
}

/* Live-Cursor der Peers (LoD.CollabCursor, opt-in via DrawerCoedit `cursors:true`):
   fixed Overlay über allem, rein dekorativ (pointer-events: none) — die Position
   kommt element-relativ verankert vom Peer und wird per transform gesetzt; die
   kurze Transition interpoliert zwischen den ~15-Hz-Updates (flüssige Bewegung). */
.app-scope.collab-cursor-layer {
  position: fixed; inset: 0; z-index: var(--z-collab-cursor);
  pointer-events: none; overflow: hidden;
}
.app-scope .collab-cursor {
  position: absolute; top: 0; left: 0;
  display: inline-flex; align-items: flex-start;
  transition: transform 90ms linear;
  will-change: transform;
}
.app-scope .collab-cursor-arrow { display: block; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25)); }
.app-scope .collab-cursor-name {
  margin: 14px 0 0 -4px;
  padding: 1px 7px;
  border-radius: var(--radius-full, 999px);
  color: var(--lod-white); font-size: var(--font-size-xs); font-weight: 600; line-height: 1.5;
  white-space: nowrap; max-width: 160px; overflow: hidden; text-overflow: ellipsis;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}