/* Activity ads (server/ads.js, app.js "Activity ads"). Rails flank the
   Activities popover on desktop; one banner sits under the list on phones;
   the preroll card floats over the app while a fresh activity is held. */

.call-popover-activity.has-ad-rails {
  width: min(640px, calc(100vw - 24px));
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) 120px;
  align-items: stretch;
  gap: 12px;
}
.ad-rail-spacer { display: block; }

.ad-slot {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--radius); border: 1px solid var(--border);
  background: var(--bg-input);
  cursor: default;
}
.ad-slot.linked { cursor: pointer; }
.ad-slot img, .ad-slot video {
  display: block; width: 100%; height: 100%; object-fit: cover;
  user-select: none;
}
.ad-rail { min-height: 240px; }
.ad-banner { aspect-ratio: 32 / 9; margin-top: 2px; }
.ad-slot.linked:hover { border-color: var(--border-strong); }
.ad-slot:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.ad-tag {
  font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-bright); background: rgba(0, 0, 0, .62);
  padding: 2px 6px; border-radius: var(--radius-sm);
}
.ad-slot .ad-tag { position: absolute; top: 6px; left: 6px; pointer-events: none; }

.ad-preroll {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 9000; /* above app modals (What's new etc.), below the consent gate */
  width: min(560px, calc(100vw - 32px));
  display: flex; flex-direction: column; gap: 10px;
  padding: 12px;
  background: var(--bg-floating); border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  animation: fm-pop .18s var(--ease-out);
}
.ad-preroll-head { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.ad-preroll-head .ad-tag { background: var(--bg-4); color: var(--text); }
.ad-preroll-advertiser { color: var(--text); font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-preroll-count { margin-left: auto; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ad-preroll-media {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  background: #000; border-radius: var(--radius);
}
.ad-preroll-media.linked { cursor: pointer; }
.ad-preroll-media img, .ad-preroll-media video { display: block; width: 100%; height: 100%; object-fit: contain; }
.ad-preroll-unmute {
  position: absolute; right: 8px; bottom: 8px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border: 0; border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, .7); color: #fff; font-size: 13px; cursor: pointer;
}
.ad-preroll-unmute[hidden] { display: none; }
.ad-preroll-foot { display: flex; justify-content: flex-end; }

@media (prefers-reduced-motion: reduce) {
  .ad-preroll { animation: none; }
}

/* The popover scrolls (max-height in style.css .call-popover); keep the rails
   pinned to the visible part instead of stretching past the fold. */
.call-popover-activity.has-ad-rails .ad-rail,
.call-popover-activity.has-ad-rails .ad-rail-spacer {
  position: sticky; top: 0; align-self: start;
  height: min(calc(70vh - 28px), 492px);
}