/* Live collaboration presence strip + in-editor collab affordances. */

.collabStrip {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 40;
  width: 210px;
  max-height: 60vh;
  overflow-y: auto;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.14);
  border: 1px solid rgba(0, 0, 0, 0.08);
  font: 500 12px/1.35 system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #1f2328;
  pointer-events: auto;
}

.collabStripHeading {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6b7280;
  margin: 6px 0 4px;
}
.collabStripHeading:first-child { margin-top: 0; }

.collabPeers,
.collabSessions {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.collabEmpty {
  font-size: 11px;
  color: #9aa0a6;
  padding: 2px 0;
}

.collabPeer {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 4px 6px;
  border: none;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.03);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
}
.collabPeer:hover:not(:disabled) { background: rgba(67, 99, 216, 0.12); }
.collabPeer.noSelection { cursor: default; opacity: 0.75; }

.collabDot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: 0 0 auto;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.7);
}
.collabDot.idle { opacity: 0.6; }

.collabPeerName { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.collabPeerCount { color: #6b7280; font-size: 11px; flex: 0 0 auto; }

.collabSession {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border-radius: 6px;
  background: rgba(67, 99, 216, 0.08);
}
.collabSession.stale { background: rgba(0, 0, 0, 0.05); color: #6b7280; }
.collabSessionLabel { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* §4: member chips under each presence-strip session row. .collabSessionEntry
   wraps the existing .collabSession row so the chips sit below it without
   disturbing that row's own flex layout. */
.collabSessionEntry {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.collabSessionMembers {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 0 6px 2px;
}
.collabSessionMemberCount {
  font-size: 10px;
  color: #9aa0a6;
  flex: 0 0 auto;
  margin-right: 2px;
}
.collabSessionMemberChip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: none;
  border-radius: 9px;
  padding: 1px 7px 1px 5px;
  background: rgba(0, 0, 0, 0.05);
  font: 600 10px system-ui, sans-serif;
  color: inherit;
  cursor: pointer;
}
.collabSessionMemberChip:disabled { cursor: default; opacity: 0.7; }
.collabSessionMemberChip:hover:not(:disabled) { background: rgba(67, 99, 216, 0.14); }
.collabSessionMemberChip .collabDot { width: 7px; height: 7px; box-shadow: none; }
.collabSessionMemberChip.leader { font-weight: 800; }

.collabJoinBtn,
.collabDismissBtn {
  flex: 0 0 auto;
  border: none;
  border-radius: 5px;
  padding: 2px 8px;
  font: 600 11px system-ui, sans-serif;
  cursor: pointer;
}
.collabJoinBtn { background: #4363d8; color: #fff; }
.collabJoinBtn:hover { background: #3450bd; }
.collabDismissBtn { background: transparent; color: #9aa0a6; padding: 2px 4px; }
.collabDismissBtn:hover { color: #e6194b; }

.collabLogRow {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.collabLogToggle {
  border: none;
  border-radius: 5px;
  padding: 3px 8px;
  font: 600 11px system-ui, sans-serif;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.06);
  color: #3f4448;
}
.collabLogToggle:hover { background: rgba(67, 99, 216, 0.14); }

.collabLog {
  margin-top: 6px;
  max-height: 34vh;
  overflow-y: auto;
  padding: 6px 8px;
  border-radius: 6px;
  background: #0f1115;
  color: #cdd3da;
  font: 11px/1.4 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  white-space: pre-wrap;
  word-break: break-word;
}

/* On-board: cards in a live session and/or selected by a remote peer.
   Both relax paint containment so the floating tags above the card can show. */
.card.collabInSession {
  contain: layout style;
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 4px var(--collab-session-color, #e6194b),
    0 4px 8px rgba(0, 0, 0, 0.18);
}
.card.collabPeerSelected {
  contain: layout style;
  box-shadow:
    0 0 0 3px var(--collab-sel-color, #4363d8),
    0 4px 8px rgba(0, 0, 0, 0.18);
}
/* If both, the peer-selection ring sits just outside the session ring. */
.card.collabInSession.collabPeerSelected {
  box-shadow:
    0 0 0 2px var(--collab-session-color, #e6194b),
    0 0 0 5px var(--collab-sel-color, #4363d8),
    0 4px 8px rgba(0, 0, 0, 0.18);
}
/* §4.3: the local (possibly minimized) session's own cards get a distinct
   "open" affordance rather than "join" — the ring is the same, the cursor
   and tag/title text (set in JS) are what differ. */
.card.collabLocalSession {
  cursor: pointer;
}

.collabCardTags {
  position: absolute;
  bottom: 100%;
  left: 0;
  margin-bottom: 4px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px;
  pointer-events: none;
  z-index: 6;
}
.collabSessionTag,
.collabSelFlag {
  padding: 1px 8px;
  border-radius: 8px;
  font: 600 12px system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #fff;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
.collabSessionTag {
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* In-editor: a section being edited by a remote peer. */
.screenplaySection.collabPeerEditing {
  outline: 2px solid var(--collab-peer-color, #4363d8);
  outline-offset: 2px;
  border-radius: 4px;
}
.collabPeerFlag {
  position: absolute;
  top: -10px;
  left: 8px;
  padding: 1px 7px;
  border-radius: 8px;
  font: 600 10px system-ui, sans-serif;
  color: #fff;
  background: var(--collab-peer-color, #4363d8);
  z-index: 3;
  pointer-events: none;
  white-space: nowrap;
}

/* In-editor header/status banners. */
.screenplayCollabBadge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 10px;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(67, 99, 216, 0.12);
  font-size: 11px;
  font-weight: 600;
  color: #3450bd;
}
.screenplayCollabBadge .collabDot { width: 8px; height: 8px; box-shadow: none; }
.screenplayCollabTakeover {
  border: 0;
  border-radius: 6px;
  padding: 3px 6px;
  background: rgba(67, 99, 216, 0.18);
  color: inherit;
  font: inherit;
  font-size: 10px;
  font-weight: 750;
  cursor: pointer;
}
.screenplayCollabTakeover:hover,
.screenplayCollabTakeover:focus-visible {
  background: rgba(67, 99, 216, 0.28);
  outline: none;
}

.screenplayCollabBanner {
  padding: 10px 14px;
  background: #fff4e5;
  border-bottom: 1px solid #f0c98a;
  color: #8a5a00;
  font: 600 13px system-ui, sans-serif;
  display: flex;
  align-items: center;
  gap: 12px;
}
.screenplayCollabBanner.ended { background: #fde8e8; border-color: #f0a0a0; color: #9b1c1c; }
.screenplayCollabBanner[data-kind="degraded"] { background: #efe9e9; border-color: #c9b8b8; color: #5a3a3a; }
.screenplayCollabBanner button {
  border: none;
  border-radius: 6px;
  padding: 4px 12px;
  font: 600 12px system-ui, sans-serif;
  cursor: pointer;
  background: #4363d8;
  color: #fff;
}

/* Leader-only "End for everyone" control and the successor's inherited-
   unsaved-work marker, both in the LIVE badge (§3.6/§3.4 — no dock yet). */
.screenplayCollabEndBtn {
  background: rgba(230, 25, 75, 0.14);
  color: #9b1c1c;
}
.screenplayCollabEndBtn:hover,
.screenplayCollabEndBtn:focus-visible {
  background: rgba(230, 25, 75, 0.24);
}
.screenplayCollabUnsavedHandoff {
  margin-left: 4px;
  padding: 2px 7px;
  border-radius: 8px;
  background: rgba(245, 130, 49, 0.18);
  color: #8a4a00;
  font-size: 10px;
  font-weight: 750;
}

/* §4: in-editor members row (renderCollabMembers in widget.js) — reuses the
   dock's own .liveSessionDockAvatar markup via src/peerAvatar.js, sitting on
   its own line right under the LIVE badge/title. */
.screenplayCollabMembers {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
}
.screenplayCollabMembers .liveSessionDockAvatar.leader {
  box-shadow: 0 0 0 2px #4363d8;
}

/* §3.7: the solo fallback stops being silent. */
.screenplaySoloBadge {
  display: inline-flex;
  align-items: center;
  margin-left: 10px;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.08);
  font-size: 11px;
  font-weight: 700;
  color: #5a5f66;
}

/* §4.2: the minimize dock — a compact, always-on-top, draggable bar that
   stands in for the full screenplay editor while it's minimized. z-index
   sits above the editor modal (#screenplayEditorModal: 11000) and its own
   nested comment/title dialogs (.screenplayCommentModal: 11100), but below
   the leave-choice dialog overlay (.screenplayLeaveDialogOverlay: 11800) so
   the dock's own Leave button can never end up covered by the dialog it
   opens. */
.liveSessionDock {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 11500;
  pointer-events: auto;
}
.liveSessionDockBar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.24);
  border: 1px solid rgba(0, 0, 0, 0.1);
  font: 500 12px/1.3 system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #18201c;
  cursor: grab;
  user-select: none;
}
.liveSessionDockBar:active { cursor: grabbing; }
.liveSessionDockDot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #4363d8;
  flex: 0 0 auto;
}
.liveSessionDockLeader {
  white-space: nowrap;
  font-weight: 700;
}
.liveSessionDockCards {
  white-space: nowrap;
  color: rgba(24, 32, 28, 0.62);
}
.liveSessionDockDirty {
  white-space: nowrap;
  font-weight: 700;
  color: #b5460a;
  background: rgba(245, 130, 49, 0.16);
  border-radius: 5px;
  padding: 1px 6px;
}
.liveSessionDockAvatars {
  display: flex;
  gap: 3px;
  flex: 0 0 auto;
}
.liveSessionDockAvatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none;
  color: #fff;
  font: 700 9px/20px system-ui, sans-serif;
  text-align: center;
  padding: 0;
  cursor: pointer;
}
.liveSessionDockAvatar:disabled { cursor: default; opacity: 0.55; }
.liveSessionDockActions {
  display: flex;
  gap: 5px;
  flex: 0 0 auto;
}
.liveSessionDockBtn {
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 6px;
  padding: 4px 9px;
  font: 600 11px system-ui, sans-serif;
  background: #fff;
  color: #18201c;
  cursor: pointer;
  white-space: nowrap;
}
.liveSessionDockBtn:hover:not(:disabled) { background: rgba(0, 0, 0, 0.05); }
.liveSessionDockBtn:disabled { opacity: 0.5; cursor: default; }
.liveSessionDockBtn.primary {
  background: #4363d8;
  border-color: #4363d8;
  color: #fff;
}
.liveSessionDockBtn.primary:hover:not(:disabled) { background: #3450bd; }
.liveSessionDockBtn.quiet { background: transparent; }

/* §3.4: the 3-choice leave/save dialog (window.confirm only offers OK/Cancel). */
.screenplayLeaveDialogOverlay {
  position: fixed;
  inset: 0;
  z-index: 11800;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 24, 28, 0.42);
}
.screenplayLeaveDialog {
  width: min(420px, calc(100vw - 32px));
  border-radius: 10px;
  background: #fff;
  color: #18201c;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.32);
  padding: 18px 18px 14px;
}
.screenplayLeaveDialogMessage {
  font: 600 14px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
  margin-bottom: 14px;
}
/* §5.2: the stale-baseline conflict dialog reuses this same 3-button dialog
   (rather than a second one), extended with a side-by-side "yours"/"theirs"
   comparison — wider than the plain leave/save prompts above. */
.screenplayLeaveDialog.screenplayLeaveDialogWide {
  width: min(640px, calc(100vw - 32px));
}
.screenplayLeaveDialogVersions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}
.screenplayLeaveDialogVersion {
  min-width: 0;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 7px;
  padding: 8px 9px;
  background: rgba(0, 0, 0, 0.02);
}
.screenplayLeaveDialogVersionLabel {
  font: 800 10px/1.4 system-ui, sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(24, 32, 28, 0.56);
  margin-bottom: 5px;
}
.screenplayLeaveDialogVersionBody {
  max-height: 220px;
  overflow: auto;
  margin: 0;
  font: 400 12px/1.4 ui-monospace, "SF Mono", Menlo, monospace;
  white-space: pre-wrap;
  word-break: break-word;
  color: #18201c;
}
@media (max-width: 520px) {
  .screenplayLeaveDialogVersions { grid-template-columns: 1fr; }
}
.screenplayLeaveDialogActions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
.screenplayLeaveDialogBtn {
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 7px;
  padding: 7px 14px;
  font: 600 13px system-ui, sans-serif;
  background: #fff;
  color: #18201c;
  cursor: pointer;
}
.screenplayLeaveDialogBtn:hover,
.screenplayLeaveDialogBtn:focus-visible { background: rgba(0, 0, 0, 0.05); outline: none; }
.screenplayLeaveDialogBtn.primary {
  background: #4363d8;
  border-color: #4363d8;
  color: #fff;
}
.screenplayLeaveDialogBtn.primary:hover,
.screenplayLeaveDialogBtn.primary:focus-visible { background: #3450bd; }

@media (prefers-color-scheme: dark) {
  .collabStrip {
    background: rgba(32, 34, 37, 0.95);
    color: #e6e8ea;
    border-color: rgba(255, 255, 255, 0.1);
  }
  .collabPeer { background: rgba(255, 255, 255, 0.05); }
  .collabPeerCount, .collabStripHeading { color: #9aa0a6; }
  .collabLogToggle { background: rgba(255, 255, 255, 0.08); color: #cdd3da; }
  .collabLogRow { border-top-color: rgba(255, 255, 255, 0.1); }
  .screenplaySoloBadge { background: rgba(255, 255, 255, 0.1); color: #c7ccd2; }
  .screenplayCollabUnsavedHandoff { background: rgba(245, 130, 49, 0.24); color: #ffd7ad; }
  .screenplayLeaveDialog { background: #23262b; color: #e6e8ea; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6); }
  .screenplayLeaveDialogBtn { background: #2c2f35; border-color: rgba(255, 255, 255, 0.14); color: #e6e8ea; }
  .screenplayLeaveDialogBtn:hover, .screenplayLeaveDialogBtn:focus-visible { background: #34383f; }
  .screenplayLeaveDialogVersion { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.14); }
  .screenplayLeaveDialogVersionLabel { color: #9aa0a6; }
  .screenplayLeaveDialogVersionBody { color: #e6e8ea; }
  .liveSessionDockBar {
    background: rgba(32, 34, 37, 0.96);
    color: #e6e8ea;
    border-color: rgba(255, 255, 255, 0.12);
  }
  .liveSessionDockCards { color: #9aa0a6; }
  .liveSessionDockBtn { background: #2c2f35; border-color: rgba(255, 255, 255, 0.14); color: #e6e8ea; }
  .liveSessionDockBtn:hover:not(:disabled) { background: #34383f; }
  .liveSessionDockBtn.quiet { background: transparent; }
  .collabSessionMemberChip { background: rgba(255, 255, 255, 0.08); }
  .collabSessionMemberChip:hover:not(:disabled) { background: rgba(67, 99, 216, 0.28); }
  .collabSessionMemberCount { color: #9aa0a6; }
}