/* Global styles. Clean / minimal / edgy. Colours + fonts come from brand.config.js (var(--brand-*)). */

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-16px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

:root {
  --bg-0: var(--brand-bg);
  --bg-1: var(--brand-bg-1);
  --bg-2: var(--brand-bg-2);
  --bg-3: var(--brand-bg-3);
  --text-0: var(--brand-text);
  --text-1: rgba(var(--brand-text-rgb),0.58);
  --text-2: rgba(var(--brand-text-rgb),0.32);
  --text-3: rgba(var(--brand-text-rgb),0.14);
  --accent: var(--brand-accent);
  --period: var(--brand-accent);
  --on-accent: var(--brand-on-accent, #fff);   /* text / icons on accent backgrounds */
  --accent-text: var(--brand-accent-text, var(--brand-accent));   /* accent-coloured small text on the dark background */
  --accent-2: var(--brand-accent-2);
  --hero-card: var(--brand-card);   /* dark-gray hero cards (Stash / Shop / Messages) */
  --accent-glow: rgba(var(--brand-accent-rgb),0.32);
  --ember: var(--brand-ember);
  --divider: rgba(var(--brand-text-rgb),0.07);
  --card: rgba(var(--brand-text-rgb),0.03);
  --card-2: rgba(var(--brand-text-rgb),0.06);
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 18px;
  --font-display: var(--brand-font-display);
  --font-ui: var(--brand-font-body);
  --font-mono: var(--brand-font-mono);
  --font-druk: var(--brand-font-wordmark);
  /* Theme tokens (dark default) */
  --fg: #fff;
  --fg-inv: #000;
  --ink: 255,255,255;
  --bg-rgb: var(--brand-bg-rgb);
  --surface: var(--brand-surface);
  --surface-2: var(--brand-surface-2);
  --page: var(--brand-page);
  --glass: rgba(20,20,20,0.45);
  color-scheme: dark;
}

/* Photo / video / player areas stay dark in both modes. */
.force-dark {
  --bg-0: var(--brand-bg); --bg-1: var(--brand-bg-1); --bg-2: var(--brand-bg-2); --bg-3: var(--brand-bg-3);
  --text-0: var(--brand-text); --text-1: rgba(var(--brand-text-rgb),0.58); --text-2: rgba(var(--brand-text-rgb),0.32); --text-3: rgba(var(--brand-text-rgb),0.14);
  --accent-2: var(--brand-accent-2); --hero-card: var(--brand-card); --divider: rgba(var(--brand-text-rgb),0.07); --card: rgba(var(--brand-text-rgb),0.03); --card-2: rgba(var(--brand-text-rgb),0.06);
  --fg: #fff; --fg-inv: #000; --ink: 255,255,255; --bg-rgb: var(--brand-bg-rgb); --surface: var(--brand-surface); --surface-2: var(--brand-surface-2); --glass: rgba(20,20,20,0.45);
  color: var(--text-0);
  color-scheme: dark;
}
/* Slim white cards (Jared 2026-10-23): weekly calls, group calls, meetups, co-write sessions. Founder events stay dark. */
.card-light {
  --bg-1: #fff; --bg-2: #f2f2f2; --fg: #0d0d0d; --fg-inv: #fff; --ink: 0,0,0;
  --text-0: #0d0d0d; --text-1: rgba(0,0,0,0.58); --text-2: rgba(0,0,0,0.38); --text-3: rgba(0,0,0,0.14);
  --divider: rgba(0,0,0,0.08); --card: rgba(0,0,0,0.03); --card-2: rgba(0,0,0,0.06);
  background: #fff; color: #0d0d0d; color-scheme: light;
}

* { box-sizing: border-box; }

html, body {
  touch-action: manipulation;  /* Safari ignores user-scalable=no: without this, fast taps become double-tap zoom and get lost or land on the wrong row */
  margin: 0;
  overscroll-behavior: none;   /* no whole-page rubber-band; the app scroller handles pull-to-refresh itself */
  background: var(--brand-page);
  color: var(--text-0);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "cv11";
}

button { font-family: inherit; border: 0; }   /* no browser default ring on round Back · X buttons (Jared 2026-10-25) */

body {
  min-height: 100vh;
  box-sizing: border-box;      /* padding stays inside the window — no page scroll around the desktop frame */
  background: var(--brand-page);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

/* Main tab scroller: no native bounce at the edges (our pull-to-refresh is the only top motion). */
.app-scroll { overscroll-behavior-y: none; }

/* ── App-internal scrollbar (hidden) ──────────────────────────────────────── */
*::-webkit-scrollbar { display: none; width: 0; height: 0; }
* { scrollbar-width: none; -ms-overflow-style: none; }

/* ── Typography helpers ───────────────────────────────────────────────────── */
.h-display {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 0.92;
}
.h-display-roman {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}
/* Druk Wide stand-in — Archivo at max (125%) width, scoped to carousel titles */
.h-druk {
  font-family: var(--font-druk);
  font-weight: 800;
  font-stretch: 125%;
  font-variation-settings: "wdth" 125;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 0.9;
}
/* Stacked title (Ai OS style): bold black + lighter sub */
.h-stack {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 0.95;
}
.h-stack .sub {
  display: block;
  color: var(--text-1);
  font-weight: 800;
}

.h-mono {
  font-family: var(--font-mono);
  font-feature-settings: "tnum", "zero";
  letter-spacing: 0.02em;
}

.divider { background: var(--divider); height: 0.5px; width: 100%; }

/* Card surface — flat, no border by default */
.card {
  background: var(--card);
  border-radius: var(--r-lg);
}

/* Accent pill button */
.btn-accent {
  background: var(--accent);
  color: var(--on-accent, #fff);
  border: 0;
  border-radius: 999px;
  padding: 11px 18px;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.btn-accent:hover { filter: brightness(1.08); }
.btn-solid {
  background: var(--fg);
  color: var(--fg-inv);
  border: 0;
  border-radius: 999px;
  padding: 11px 18px;
  font-weight: 600;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.btn-ghost {
  background: rgba(var(--ink),0.08);
  color: var(--fg);
  border: 0;
  border-radius: 999px;
  padding: 11px 18px;
  font-weight: 600;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.btn-ghost-sm {
  background: rgba(var(--ink),0.07);
  color: var(--fg);
  border: 0;
  border-radius: 999px;
  padding: 6px 12px;
  font-weight: 500;
  font-size: 12px;
  cursor: pointer;
}

/* Avatar — square-ish friendly (still round) */
.avatar {
  border-radius: 999px;
  background: #222;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
}
.avatar.ring-live::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 999px;
  border: 1.5px solid var(--accent);
}

/* Subtle press-down */
.tappable { transition: transform .12s ease, opacity .12s ease; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }  /* iPhone: no double-tap wait, so quick taps register */
.tappable:active { transform: scale(0.97); opacity: 0.85; }

/* Sheet animations */
@keyframes sheetUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
@keyframes overlayFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes screenIn {
  from { transform: translateX(4%); }
  to   { transform: translateX(0); }
}

.sheet { animation: sheetUp .32s cubic-bezier(.2,.8,.2,1) backwards; } /* no lingering transform — iOS draws the text cursor in the wrong spot inside transformed boxes */
/* Closing: slide back down + fade the backdrop (app.jsx adds these right before removing the screen) */
@keyframes sheetDown { from { transform: translateY(0); } to { transform: translateY(100%); } }
@keyframes overlayOut { from { opacity: 1; } to { opacity: 0; } }
.sheet.sheet-out { animation: sheetDown .24s cubic-bezier(.4,0,1,1) both; }
.overlay-out { animation: overlayOut .24s ease both; pointer-events: none; }
.fade-in { animation: overlayFade .2s ease both; }
.screen-in { animation: screenIn .25s cubic-bezier(.2,.8,.2,1) backwards; }

/* Section title style — flat */
.section-h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 4px 20px 12px;
}
.section-h .label {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.025em;
}
.section-h .more {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-1);
  cursor: pointer;
}

/* Eyebrow */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-1);
  white-space: nowrap;
}

/* Live pulsing + blinking dot — accent-color tinted */
.live-dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 var(--accent);
  animation: liveDot 1.6s ease-in-out infinite, liveBlink 1.6s steps(2, jump-none) infinite;
  margin-right: 6px; vertical-align: middle;
}

/* Red dot — "LIVE" signal, always red regardless of palette */
.dot-red {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: #ff1a2e;
  box-shadow: 0 0 0 0 #ff1a2e;
  animation: dotRed 1.6s ease-in-out infinite, liveBlink 1.6s steps(2, jump-none) infinite;
  margin-right: 6px; vertical-align: middle;
}
@keyframes dotRed {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,26,46,0.45); }
  50%      { box-shadow: 0 0 0 6px transparent; }
}

/* Green dot — "fresh signal", neon green, pulse only (no blink) */
.dot-green {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--brand-accent);
  box-shadow: 0 0 0 0 var(--brand-accent);
  animation: dotGreen 1.6s ease-in-out infinite;
  margin-right: 6px; vertical-align: middle;
}
@keyframes dotGreen {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--brand-accent-rgb),0.45); }
  50%      { box-shadow: 0 0 0 6px transparent; }
}

@keyframes liveDot {
  0%, 100% { box-shadow: 0 0 0 0 var(--accent-glow); }
  50%      { box-shadow: 0 0 0 6px transparent; }
}
@keyframes liveBlink {
  0%, 60% { opacity: 1; }
  61%, 100% { opacity: 0; }
}

/* Signal-ring — hollow circle with pulsing halo, no blink */
.signal-ring {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: transparent;
  border: 1.5px solid var(--accent);
  box-shadow: 0 0 0 0 var(--accent);
  animation: liveDot 1.6s ease-in-out infinite;
  margin-right: 6px; vertical-align: middle;
}

* { -webkit-tap-highlight-color: transparent; }

/* Mini player surface — translucent glass */
.mp-bg {
  background: rgba(20,20,20,0.45);
  backdrop-filter: blur(34px) saturate(180%);
  -webkit-backdrop-filter: blur(34px) saturate(180%);
  border: 0.5px solid rgba(var(--ink),0.10);
}

/* Equalizer bars */
.eq { display: inline-flex; gap: 2px; align-items: flex-end; height: 12px; }
.eq i { display: block; width: 2px; background: var(--accent); border-radius: 1px; animation: eq 0.9s ease-in-out infinite; }
.eq i:nth-child(1) { animation-delay: 0s;  height: 60%; }
.eq i:nth-child(2) { animation-delay: 0.2s; height: 100%; }
.eq i:nth-child(3) { animation-delay: 0.4s; height: 40%; }
.eq i:nth-child(4) { animation-delay: 0.1s; height: 80%; }
@keyframes eq {
  0%, 100% { transform: scaleY(0.4); }
  50%      { transform: scaleY(1); }
}

/* Waveform bars */
.wf { display: flex; gap: 2px; align-items: center; height: 32px; }
.wf i { display: block; width: 2px; border-radius: 1px; background: rgba(var(--ink),0.32); transition: background .15s ease; }
.wf i.played { background: var(--accent); }

/* Inputs */
.input {
  background: rgba(var(--ink),0.05);
  border: 0.5px solid var(--divider);
  border-radius: var(--r-md);
  padding: 11px 14px;
  color: var(--text-0);
  font-family: inherit;
  font-size: 14px;
  width: 100%;
  outline: none;
}
.input:focus { border-color: var(--accent); }

button:focus, input:focus, textarea:focus { outline: none; }

/* PWYW slider thumb */
.ppwy-slider {
  appearance: none; -webkit-appearance: none;
  width: 100%; height: 4px; background: rgba(var(--brand-bg-rgb),0.18);
  border-radius: 999px; outline: none;
}
.ppwy-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--brand-bg);
  box-shadow: 0 0 0 4px rgba(var(--brand-bg-rgb),0.08), 0 4px 12px rgba(0,0,0,0.25);
  cursor: pointer;
}
.ppwy-slider::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%; border: 0;
  background: var(--brand-bg);
  box-shadow: 0 0 0 4px rgba(var(--brand-bg-rgb),0.08), 0 4px 12px rgba(0,0,0,0.25);
}

.mono-mode {
  --accent: #b8b8b3;
  --accent-2: #e6e6e6;
  --accent-glow: rgba(184,184,179,0.32);
  --ember: #6b6963;
}

.marquee-track {
  display: inline-flex;
  gap: 32px;
  animation: marquee-scroll 38s linear infinite;
  will-change: transform;
}
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Feed view toggle — animated attention stroke that traces the pill (thin) */
@property --feed-toggle-ang {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
.feed-toggle {
  position: relative;
  isolation: isolate;
}
/* Traveling comet of light around the perimeter. Drawn as a border-box background (no masks):
   iOS Safari sometimes dropped the mask and smeared the glow across the whole pill. */
.feed-toggle {
  border: 1px solid transparent;
  background:
    linear-gradient(rgba(var(--ink),0.06), rgba(var(--ink),0.06)) padding-box,
    linear-gradient(var(--bg-0), var(--bg-0)) padding-box,
    conic-gradient(from var(--feed-toggle-ang),
      color-mix(in oklab, var(--accent) 20%, transparent) 0deg,
      color-mix(in oklab, var(--accent) 20%, transparent) 230deg,
      var(--accent) 300deg,
      color-mix(in oklab, var(--accent) 55%, #fff) 326deg,
      var(--accent) 348deg,
      color-mix(in oklab, var(--accent) 20%, transparent) 360deg) border-box !important;
  animation: feedToggleSpin 2.8s linear infinite;
}
@keyframes feedToggleSpin {
  to { --feed-toggle-ang: 360deg; }
}
@media (prefers-reduced-motion: reduce) {
  .feed-toggle { animation: none; }
}

/* Feed view toggle — inactive labels softly glint. */
.feed-toggle__label {
  position: relative;
  display: inline-block;
}
.feed-toggle__label.is-inactive { animation: feedLabelGlint 4.2s ease-in-out infinite; }
@keyframes feedLabelGlint {
  0%, 100% { opacity: 1; }
  8%       { opacity: 0.55; }
  16%      { opacity: 1; }
}
/* stagger the second label so both don't glint in unison */
.feed-toggle__label.sheen-delay.is-inactive {
  animation-delay: 2.1s;
}
@media (prefers-reduced-motion: reduce) {
  .feed-toggle__label.is-inactive { animation: none; }
}

/* "Get full access" upsell card — animated accent stroke that traces the
   rounded rect to draw the eye until the user selects it */
@property --access-ang {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
.access-card {
  position: relative;
  isolation: isolate;
}
.access-card::before {
  content: '';
  position: absolute;
  inset: -1.5px;
  border-radius: 13px;
  padding: 2px;
  background: conic-gradient(from var(--access-ang),
    transparent 0deg,
    transparent 200deg,
    color-mix(in oklab, var(--accent) 0%, transparent) 220deg,
    var(--accent) 300deg,
    color-mix(in oklab, var(--accent) 50%, #fff) 328deg,
    var(--accent) 350deg,
    transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: accessSpin 2.6s linear infinite;
  pointer-events: none;
  z-index: 3;
}
/* soft resting glow so the card reads as special between sweeps */
.access-card::after {
  content: '';
  position: absolute;
  inset: -1.5px;
  border-radius: 13px;
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--accent) 22%, transparent);
  pointer-events: none;
  z-index: 0;
}
@keyframes accessSpin {
  to { --access-ang: 360deg; }
}
@media (prefers-reduced-motion: reduce) {
  .access-card::before { animation: none; }
}

/* Multi-select check */
.dot-check {
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--text-3);
  flex-shrink: 0;
}
.dot-check.on { background: var(--accent); border-color: var(--accent); }

/* ── Comments ── */
@keyframes cmFlash { 0% { background: var(--accent-18); } 100% { background: transparent; } }
.cm-flash { animation: cmFlash 1.6s ease-out; }
@keyframes cmShimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.cm-gif-shimmer { background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,0.18) 50%, transparent 70%); animation: cmShimmer 1.8s linear infinite; }
@keyframes cmPulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
.cm-rec-dot { width: 9px; height: 9px; border-radius: 50%; background: #ff3b30; flex-shrink: 0; animation: cmPulse 1s ease-in-out infinite; }
@keyframes cmBar { 0%,100% { height: 4px; } 50% { height: 18px; } }
.cm-rec-bar { width: 2.5px; border-radius: 2px; background: var(--accent); flex-shrink: 0; animation: cmBar .7s ease-in-out infinite; }

/* Play button while a song is buffering */
.audio-spin { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(0,0,0,0.2); border-top-color: #000;
              animation: audioSpin .7s linear infinite; display: inline-block; }
@keyframes audioSpin { to { transform: rotate(360deg); } }

/* Whole posts: no shrink-on-press (it read as the card caving in) — just open. */
.post-card { cursor: pointer; -webkit-tap-highlight-color: transparent; }

/* Loading placeholders (feed cards while posts load) */
.skel { background: rgba(var(--ink),0.06); position: relative; overflow: hidden; }
.skel::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(var(--ink),0.06), transparent); animation: skelShine 1.3s infinite; }
@keyframes skelShine { to { transform: translateX(100%); } }

/* Chat reply thread / hold menu — iMessage-style entrance */
@keyframes dmBlurIn { from { background: rgba(0,0,0,0); -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); } }
@keyframes dmPopIn { from { opacity: 0; transform: translateY(18px) scale(0.94); } to { opacity: 1; transform: none; } }
@keyframes dmRiseIn { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
.dm-blur-in { animation: dmBlurIn .28s ease-out both; }
.dm-pop-in { animation: dmPopIn .34s cubic-bezier(.2,.9,.3,1.15) both; }
.dm-rise-in { animation: dmRiseIn .3s cubic-bezier(.2,.8,.3,1) .05s both; }
.dm-typing-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(var(--ink),0.6); animation: dmTyping 1s infinite ease-in-out; }
@keyframes dmTyping { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }
.dm-heart-burst { position: absolute; left: 50%; top: 50%; font-size: 46px; pointer-events: none; z-index: 3;
  animation: dmHeart .75s cubic-bezier(.2,.9,.3,1.3) both; filter: drop-shadow(0 4px 14px rgba(0,0,0,.45)); }
@keyframes dmHeart { 0% { transform: translate(-50%,-50%) scale(.2); opacity: 0; } 25% { transform: translate(-50%,-50%) scale(1.15); opacity: 1; }
  60% { transform: translate(-50%,-50%) scale(1); opacity: 1; } 100% { transform: translate(-50%,-90%) scale(.9); opacity: 0; } }
.dm-hit { animation: dmHit 1.6s ease; }
@keyframes dmHit { 0%, 60% { box-shadow: 0 0 0 2px var(--accent); background: rgba(var(--brand-accent-rgb),0.08); } 100% { box-shadow: 0 0 0 0 transparent; background: transparent; } }

/* Collectible ticket: slow holographic sheen over the pass */
.oth-holo { position: absolute; pointer-events: none; mix-blend-mode: overlay; opacity: .28;
  background: linear-gradient(115deg, transparent 30%, rgba(255,0,170,.6) 40%, rgba(0,255,230,.6) 48%, rgba(var(--brand-accent-rgb),.6) 56%, transparent 66%);
  background-size: 250% 250%; animation: appHolo 6s ease-in-out infinite; }
@keyframes appHolo { 0% { background-position: 100% 0; } 50% { background-position: 0 100%; } 100% { background-position: 100% 0; } }
@media (prefers-reduced-motion: reduce) { .oth-holo { animation: none; } }

/* Live: hearts float up and fade */
@keyframes liveHeart { 0% { transform: translateY(0) scale(.6); opacity: 0; } 12% { opacity: 1; transform: translateY(-20px) scale(1); } 100% { transform: translateY(-240px) translateX(-14px) scale(1.15); opacity: 0; } }
.live-heart { animation: liveHeart 2.4s ease-out forwards; }

/* Live replay preview strip (8 frames) */
@keyframes appFlip { from { background-position: 0% 0; } to { background-position: 100% 0; } }

/* Zoom's own toolbar is hidden by ZoomWatchInner (poll) — the app draws its own bar that presses Zoom's buttons. */
/* Zoom inside the app: Zoom's window sits top-left, full width (never center it — see ZoomWatchInner) */
.oth-zoom-root { display: block !important; }
/* Zoom's menus + dialogs (mic/camera pickers, share, settings, record consent) are drawn on <body> → must sit above the ZoomWatch screen (z 9000) */
body > .zoom-MuiPopper-root, body > [class*="zoom-Mui"], body > [class*="zmwebsdk"] { z-index: 9700 !important; }
/* …and Zoom places them against a stale layout (off-screen on phones). Pin every pop-up to a sheet under the top bar instead. */
body > .zoom-MuiPopper-root { position: fixed !important; inset: auto !important; left: 10px !important; right: 10px !important; top: calc(env(safe-area-inset-top, 0px) + 64px) !important;
                              transform: none !important; margin: 0 !important; width: auto !important; max-width: none !important; max-height: 72vh; overflow: auto; }
body > .zoom-MuiPopper-root > * { max-width: 100% !important; width: auto !important; box-sizing: border-box; margin: 0 auto !important; }
.oth-zoom-root .zoom-MuiPopper-root, .oth-zoom-root [class*="zoom-MuiMenu"], .oth-zoom-root [class*="zoom-MuiPopover"] { z-index: 9700 !important; }

/* iPhone draws its own big ▶ on videos it won't autoplay (Low Power Mode) — we show our own controls instead */
video::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }

@keyframes spin { to { transform: rotate(360deg); } }