/* Live updates + who's here (Build H, state/lanes/live-design.md). Quiet: tokens only; the one gold use is the
   writing / editing ring. No sound, no "Live" pill, no connection status. */

/* 2. A thing that arrived live: a soft note-coloured background that fades over 4 s. */
.is-live-new { animation: live-new 4s var(--ease) forwards; }
@keyframes live-new { from { background-color: var(--bg-note); } to { background-color: transparent; } }
@media (prefers-reduced-motion: reduce) {
  .is-live-new { animation: none; background-color: var(--bg-note); }
}

/* 3. Badges: 24 px circles, 2 px surface ring, overlapping only -2 px (review fix: at -6 px the next badge hid the
   second initial, 'DL' under 'DI'), so every badge shows both initials; the later badge sits on top. */
.presence { display: inline-flex; align-items: center; flex: none; }
.presence[hidden] { display: none; }
.presence .presence-av {
  width: 24px; height: 24px; font-size: var(--fs-xs); border-radius: 50%;
  box-shadow: 0 0 0 2px var(--bg-surface); margin-left: -2px; position: relative;
  transition: opacity var(--t-med) var(--ease); opacity: 1;
}
.presence .presence-av:first-child { margin-left: 0; }
.presence .presence-av.is-entering { opacity: 0; }
.presence .presence-av[data-doing="writing"],
.presence .presence-av[data-doing="editing"] { box-shadow: 0 0 0 2px var(--gold); }
.presence .presence-more {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--chip-bg); color: var(--text-2); font-weight: var(--fw-semibold);
}
.deal-head-right .presence { margin-right: var(--sp-6); }
.lead-side-head .presence { margin-left: auto; padding-left: var(--sp-4); align-self: flex-start; }

/* Lists and board: someone else has the record open. */
.presence-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 0 2px var(--bg-surface); margin-left: var(--sp-3); vertical-align: middle; flex: none;
}

/* Multi-line tooltips (the '+2' badge lists one name per line). */
.tooltip { white-space: pre-line; }

/* 4. "Shabnam is writing an email to Sam" at the top of the Email composer. */
.presence-writing {
  display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-sm); color: var(--text-2);
  background: var(--tip-bg); border: 1px solid var(--tip-border); border-radius: var(--r-sm);
  padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4);
}
.presence-writing[hidden] { display: none; }
.presence-writing .presence-writing-av { flex: none; }

/* 5. "Changed while you were typing". */
.live-conflict { margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--text-2); line-height: 1.5; }
.live-conflict-who { font-weight: var(--fw-semibold); color: var(--text); }
.live-conflict-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }
.live-conflict-value { color: var(--text); overflow-wrap: anywhere; }
.live-conflict-acts { display: inline-flex; gap: var(--sp-3); }
.live-conflict-link {
  border: 0; background: none; padding: 0; color: var(--link); font: inherit; cursor: pointer;
}
.live-conflict-link:hover { text-decoration: underline; }
.live-conflict-box {
  display: block; margin-top: var(--sp-2); max-height: 160px; overflow: auto; padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--tip-border); border-radius: var(--r-sm); background: var(--bg-surface);
}
.live-conflict-note { margin-top: var(--sp-1); color: var(--text-2); }
/* The AI box's line: inside the box, under 'Ready for you', above the row being edited (or at the box top). */
.ai-ready > .live-conflict, .lead-ai-ready > .live-conflict { margin: var(--sp-2) 0; }

/* A dialog's line (activity, deal, convert): a calm tinted strip inside the dialog's padding, above the form, like
   the "is writing an email" line. The activity form's controls start after its 40 px icon column. */
.live-conflict.is-strip {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  background: var(--tip-bg); border: 1px solid var(--tip-border); border-radius: var(--r-sm);
  padding: var(--sp-3) var(--sp-4);
}
.live-conflict.is-strip .live-conflict-line { flex: 1; min-width: 0; }
.live-conflict.is-strip .live-conflict-av { flex: none; }
.live-conflict.is-strip > .live-conflict-box { flex-basis: 100%; }
.modal-body > .live-conflict { margin: var(--sp-5) var(--sp-6) 0; }
.act-modal .modal-body > .live-conflict { margin: var(--sp-5) var(--sp-6) 0 calc(var(--sp-4) + 40px); }

/* The deal title's line: its own row under the header's title row (not squeezed between the input and the owner). */
.deal-head-top + .deal-title-conflict { margin-top: var(--sp-2); }

/* Build 8 (prelaunch-design.md G2): the AI box's unsent edit, inside the box: Copy · Use as lesson · ×. */
.live-conflict-unsent-line { display: inline; }
.live-conflict-link[data-testid=live-conflict-clear] {
  display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
  width: 20px; height: 20px; margin-left: var(--sp-3); color: var(--text-2); border-radius: var(--r-sm);
}
.live-conflict-link[data-testid=live-conflict-clear]:hover { color: var(--text); background: var(--chip-bg); }
.live-conflict-clear-ic svg, .live-conflict-clear-ic { width: 12px; height: 12px; }

/* Build 8 (prelaunch-design.md G1): a colleague changed the open lead's status while I was typing: one strip at the
   top of the lead panel body, like 'Shabnam is writing an email' (tip background, 20 px avatar). */
.live-status-line {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; font-size: var(--fs-sm); color: var(--text-2);
  background: var(--tip-bg); border: 1px solid var(--tip-border); border-radius: var(--r-sm);
  padding: var(--sp-3) var(--sp-4); margin: 0 0 var(--sp-4);
}
.live-status-line .live-conflict-who { font-weight: var(--fw-semibold); color: var(--text); }
.live-status-line .live-status-av { flex: none; }
.live-status-text { flex: 1 1 200px; min-width: 0; }