/* ══════════════ A second device beside a recording ══════════════
   What the student's phone shows while their computer records a lecture
   (liveFollow.js, liveBanner.js): a chip on every page, the follow screen's
   tools — photos and the phone's microphone — and, on the recording device,
   one line saying a phone is there. Everything else on the follow screen is
   the recorder's own look (.rec-*), on purpose: it is the same lecture.
   Prefixed .live-, loaded on every page like lecture-media.css. */

/* ── the chip on every page ──
   Above the phone's bottom nav, in the corner on a wide screen; small enough
   never to cover what the page is for. */
.live-banner {
  position: fixed;
  z-index: 45;
  left: 50%;
  bottom: calc(4.25rem + env(safe-area-inset-bottom, 0px));
  translate: -50% 0;
  display: flex;
  align-items: center;
  gap: .5rem;
  max-width: calc(100vw - 2rem);
  padding: .25rem .25rem .25rem .875rem;
  border: 1px solid #c7d2fe;
  border-radius: 999px;
  background: #eef2ff;
  color: #3730a3;
  font-size: .8125rem;
  box-shadow: 0 6px 18px -10px rgba(55, 48, 163, .45);
}
@media (min-width: 768px) {
  .live-banner { left: auto; right: 1.5rem; bottom: 1.5rem; translate: none; }
}
.live-banner-dot {
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #9ca3af;
}
.live-banner-dot.is-live { background: #dc2626; animation: rec-pulse 1.4s ease-in-out infinite; }
.live-banner-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.live-banner-clock { flex-shrink: 0; font-variant-numeric: tabular-nums; opacity: .8; }
.live-banner-open {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 .875rem;
  border-radius: 999px;
  background: #4f46e5;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}
.live-banner-open:hover { background: #4338ca; }
.live-banner-hide {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  opacity: .7;
}
.live-banner-hide:hover { opacity: 1; background: rgba(79, 70, 229, .08); }

/* ── the start screen's card for a lecture on another device ── */
.live-card .btn { white-space: nowrap; }

/* ── the follow screen ── */
.live-follow { display: flex; flex-direction: column; gap: 1rem; }
.live-tools { display: flex; flex-direction: column; gap: .75rem; }
.live-tools:empty { display: none; }
.live-photos { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }

/* Photos on their way: a thumbnail and what is happening to it. */
.live-outbox { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.live-outbox-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  max-width: 100%;
  padding: .25rem .5rem .25rem .25rem;
  border: 1px solid #e5e7eb;
  border-radius: .625rem;
  background: #fff;
  font-size: .75rem;
  color: #4b5563;
}
.live-outbox-item img { width: 40px; height: 40px; object-fit: cover; border-radius: .375rem; }
.live-outbox-item.is-failed { border-color: #fecaca; background: #fef2f2; color: #991b1b; }
.live-outbox-drop {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: inherit;
}

/* This device as the microphone. While it is on, it is impossible to miss:
   a red line and one large button to stop. */
.live-mic { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; }
.live-mic.is-on {
  align-items: stretch;
  padding: .875rem 1rem;
  border: 2px solid #fca5a5;
  border-radius: .875rem;
  background: #fef2f2;
}
.live-mic-state { display: flex; align-items: center; gap: .5rem; color: #b91c1c; font-size: .9375rem; }
.live-mic-dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: #dc2626;
  animation: rec-pulse 1.4s ease-in-out infinite;
}
.live-mic-stop {
  justify-content: center;
  min-height: 52px;
  font-size: 1rem;
}
.live-mic-error { color: #b45309; }

/* On the recording device: a phone is following. */
.live-host-tip { margin: 0; }

@media (pointer: coarse) {
  .live-photos .btn { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .live-banner-dot.is-live, .live-mic-dot { animation: none; }
}
@media (forced-colors: active) {
  .live-banner, .live-mic.is-on { border: 2px solid CanvasText; }
}

/* ── dark mode ── */
.dark .live-banner {
  background: var(--d-brand-bg);
  border-color: #3730a3;
  color: #c7d2fe;
}
.dark .live-banner-open { background: #4f46e5; }
.dark .live-banner-hide:hover { background: rgba(129, 140, 248, .12); }
.dark .live-outbox-item { background: var(--d-surface); border-color: var(--d-border); color: var(--d-text2); }
.dark .live-outbox-item.is-failed { background: rgba(127, 29, 29, .18); border-color: #7f1d1d; color: #fca5a5; }
.dark .live-mic.is-on { background: rgba(127, 29, 29, .18); border-color: #b91c1c; }
.dark .live-mic-state { color: #fca5a5; }
.dark .live-mic-error { color: #fcd34d; }