/* oli-presence.css — the immersive multi-screen presence layer.

   Two surfaces are styled here and nothing else:
     1. #oliPresenceBadge  — the number, always in view, never in the way.
     2. #oliPresenceOverlay — the same number, full-bleed, on demand.

   The overlay is the "immersive, in real time" half of the request: it is a
   full-viewport read of how many screens are open right now, across every
   surface that is publishing. It is pointer-transparent except for the core,
   so flipping it on cannot eat a click on the app underneath.

   Everything is driven from one custom property, --olp-accent, so a tenant
   theme can recolour the whole layer with a single declaration. */

#oliPresenceBadge,
#oliPresenceOverlay {
  --olp-accent: #7ce7c4;
  --olp-accent-soft: rgba(124, 231, 196, 0.16);
  --olp-ink: #e8f4f0;
  --olp-dim: rgba(232, 244, 240, 0.55);
}

/* ── badge ─────────────────────────────────────────────────────────────────── */

#oliPresenceBadge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 6px 8px;
  padding: 5px 10px;
  border: 1px solid var(--olp-accent-soft);
  border-radius: 999px;
  background: rgba(10, 16, 20, 0.72);
  color: var(--olp-ink);
  font: 600 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.04em;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}

#oliPresenceBadge:hover {
  border-color: var(--olp-accent);
  background: rgba(16, 26, 32, 0.86);
}

#oliPresenceBadge:active { transform: scale(0.97); }

#oliPresenceBadge .olp-badge-n {
  color: var(--olp-accent);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  min-width: 1ch;
  text-align: right;
}

#oliPresenceBadge .olp-badge-t {
  color: var(--olp-dim);
  font-weight: 500;
  text-transform: lowercase;
}

/* A change in the count is worth one pulse and no more; a badge that animates
   forever is a badge a person learns to ignore. */
@keyframes olp-pulse {
  0%   { box-shadow: 0 0 0 0 var(--olp-accent-soft); }
  70%  { box-shadow: 0 0 0 7px rgba(124, 231, 196, 0); }
  100% { box-shadow: 0 0 0 0 rgba(124, 231, 196, 0); }
}

#oliPresenceBadge.olp-badge-pulse { animation: olp-pulse 620ms ease-out 1; }

@media (prefers-reduced-motion: reduce) {
  #oliPresenceBadge.olp-badge-pulse { animation: none; }
  #oliPresenceOverlay { transition: none; }
}

/* ── overlay ───────────────────────────────────────────────────────────────── */

#oliPresenceOverlay {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(120% 90% at 50% 30%, rgba(8, 14, 18, 0.82) 0%, rgba(4, 7, 9, 0.94) 70%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  backdrop-filter: blur(14px) saturate(120%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 220ms ease, visibility 220ms ease;
}

#oliPresenceOverlay.olp-on {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* A slow grid drift behind the number. Purely decorative, marked aria-hidden
   at the DOM level, and switched off for anyone who asked for less motion. */
#oliPresenceOverlay .olp-grid {
  position: absolute;
  inset: -20%;
  background-image:
    linear-gradient(rgba(124, 231, 196, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124, 231, 196, 0.07) 1px, transparent 1px);
  background-size: 64px 64px;
  animation: olp-drift 28s linear infinite;
  pointer-events: none;
}

@keyframes olp-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(64px, 64px, 0); }
}

@media (prefers-reduced-motion: reduce) {
  #oliPresenceOverlay .olp-grid { animation: none; }
}

#oliPresenceOverlay .olp-core {
  position: relative;
  text-align: center;
  padding: 0 24px;
  color: var(--olp-ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

#oliPresenceOverlay .olp-label {
  font-size: 12px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--olp-dim);
  margin-bottom: 10px;
}

#oliPresenceOverlay .olp-count {
  font-size: clamp(96px, 22vw, 260px);
  line-height: 0.86;
  font-weight: 700;
  color: var(--olp-accent);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 60px rgba(124, 231, 196, 0.35);
}

#oliPresenceOverlay .olp-sub {
  margin-top: 12px;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--olp-dim);
}

#oliPresenceOverlay .olp-row {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 22px;
}

#oliPresenceOverlay .olp-chip {
  padding: 6px 12px;
  border: 1px solid var(--olp-accent-soft);
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--olp-dim);
  background: rgba(12, 20, 24, 0.6);
}

#oliPresenceOverlay .olp-chip.olp-live {
  color: var(--olp-accent);
  border-color: rgba(124, 231, 196, 0.4);
}

#oliPresenceOverlay .olp-chip.olp-live i {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--olp-accent);
  vertical-align: middle;
  animation: olp-blink 1.6s ease-in-out infinite;
}

@keyframes olp-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.25; }
}

@media (prefers-reduced-motion: reduce) {
  #oliPresenceOverlay .olp-chip.olp-live i { animation: none; }
}

/* While the immersive view is up, the document behind it must not scroll -
   otherwise the wheel moves the app under a full-screen number. */
html.olp-presenting,
html.olp-presenting body { overflow: hidden; }