/* Content4reel branding header styles removed (now inherited from common/public/styles.css). */

/* Center paragraph text in audience container (cleaned malformed block) */
.audience-container p { text-align:center; }
.aud-reel-info .aud-progress { order:2; pointer-events:auto; margin:-4px 0 -4px 0 !important; }
.aud-reel-info a { pointer-events:auto; }

/* Player implementation removed; retaining only minimal container paragraph styling. */

/* Q4.K Fullscreen 9:16 Player (no offsets / no container constraints) */
/* === Q4.K True Vertical Reel Layout (Centered 9:16 like TikTok/Instagram) === */
body.audience-fullscreen { overflow:hidden; }
/* Runtime vars adjusted by JS to keep UI anchored to visible video when letterboxed */
:root { --aud-letterbox-bottom:0px; --aud-letterbox-top:0px; }
/* Fullscreen stage (use dynamic viewport height where supported) */
#audiencePlayer { position:fixed; inset:0; margin:0; padding:0; z-index:9999; background:var(--c4r-primary, #3A506B); display:flex; align-items:center; justify-content:center; height:100dvh; }
@supports not (height: 100dvh) { #audiencePlayer { height:100vh; } }
/* Optional width-first 9:16 wrapper toggle. When enabled we preserve full width and only crop vertically */
/* Width-first mode: always full screen width, maintain 9:16 ratio, never crop width. */
#audiencePlayer.width-first .audience-video-shell { position:absolute; left:0; top:0; width:100vw; height:100dvh; transform:none; max-height:none; overflow:hidden; }
#audiencePlayer.width-first .audience-video-shell::after { content:""; position:absolute; inset:0; pointer-events:none; }
/* If intrinsic 9:16 height (width*16/9) < viewport height, bars (top/bottom) naturally appear due to centered transform. */
/* 9:16 frame logic: by default fill viewport height; derive width from height (9/16). If screen is too narrow, fall back to width fill. */
/* Adaptive 9:16 frame: scales with viewport, clamps width for large desktops, fills width on narrow screens */
/* Mobile (default): full cover */
#audiencePlayer .audience-video-shell { position:absolute; inset:0; width:100vw; height:100vh; background:var(--c4r-primary, #3A506B); border:0; border-radius:0; overflow:hidden; }
/* Inner viewport that applies clipping so swipe transitions are not visible in letterbox bars */
.audience-video-viewport { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:100%; height:100%; max-height:100%; overflow:hidden; }
/* Width-first mode: 9:16 area may be shorter than viewport height; constrain viewport to derived 9:16 height and center */
#audiencePlayer.width-first.letterboxed .audience-video-viewport { height:calc(100vw * 16 / 9); }
@media (min-width:900px){
  /* Desktop framed mode: viewport just fills shell */
  #audiencePlayer .audience-video-viewport { left:0; top:0; transform:none; width:100%; height:100%; }
}
/* Force strict cover sizing so ABR (HLS) level resolution changes never alter perceived zoom.
  We avoid relying on intrinsic video dimensions (no min-width/height tricks) and always fill
  the frame; object-fit:cover guarantees consistent cropping center. */
#audiencePlayer .audience-video { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:100vw; height:auto; aspect-ratio:9/16; object-fit:fill; background:transparent; display:block; pointer-events:none; z-index:2; }
#audiencePlayer.width-first .audience-video { width:100vw; height:auto; }
/* Desktop breakpoint: enforce centered 9:16 frame (classic reel style) */
@media (min-width: 900px) {
  #audiencePlayer { background:#000; }
  /* Centered framed mode ONLY when not width-first (future optional toggle) */
  #audiencePlayer:not(.width-first) .audience-video-shell {
    position:absolute;
    left:50%; top:50%; transform:translate(-50%, -50%);
    height: min(92vh, 880px);
    width: calc(min(92vh, 880px) * 9 / 16);
    max-width: min(520px, 40vw);
    aspect-ratio: 9 / 16;
    background:var(--c4r-primary, #3A506B);
    box-shadow:0 0 30px rgba(0,0,0,.55);
    overflow:hidden;
  }
  /* Width-first (default) desktop: show entire video (no vertical crop). We fit by height, keep aspect, pillarbox sides. */
  #audiencePlayer.width-first .audience-video-shell { position:fixed; inset:0; width:100vw; height:100vh; box-shadow:none; }
  #audiencePlayer.width-first .audience-video-viewport { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); height:100vh; width:auto; aspect-ratio:9/16; }
  #audiencePlayer.width-first .audience-video { height:100vh; width:auto; max-height:100vh; max-width:calc(100vh * 9 / 16); object-fit:contain; }
  /* Width-first desktop overlay no longer needs special positioning - handled by viewport */
  #audiencePlayer.width-first .aud-progress { width:80%; max-width:none; }
  @supports not (aspect-ratio: 1 / 1) {
    #audiencePlayer:not(.width-first) .audience-video-shell { height:calc(100vh - 4vh); width:calc((100vh - 4vh) * 9/16); }
  }
  #audiencePlayer:not(.width-first) .audience-video { min-width:0; min-height:0; width:100%; height:100%; object-fit:cover; }
  #audiencePlayer:not(.width-first) .audience-video.fit-contain { object-fit:contain; }
  /* When width-first (default) on desktop: keep full viewport width (handled by base rules) */
}
/* Titles (kept visible) */
#audiencePlayer .audience-playlist-title,
#audiencePlayer .audience-reel-title {
  position:absolute;
  left:0; width:100%;
  padding:0.75rem 0.9rem;
  z-index:20;
  text-align:left;
  background:transparent; /* gradient removed per request */
  margin:0;
  pointer-events:none; /* allow clicks to pass through titles */
}
#audiencePlayer .audience-playlist-title a,
#audiencePlayer .audience-reel-title a { pointer-events:auto; }
#audiencePlayer .audience-reel-title { top:auto; bottom:0; background:transparent; }
/* Reel info positioned within video viewport (automatically clipped to video area) */
.aud-reel-info { position:absolute; left:50%; transform:translateX(-50%); bottom:12%; z-index:18; text-align:center; pointer-events:none; width:86%; max-width:640px; }
.audience-reel-title { font-weight:600; margin:0 0 1.2rem 0; font-size:1.05rem; color:#fff; text-align:left; }
.audience-reel-desc { margin-top:0.25rem; font-size:0.95rem; opacity:0.9; color:#fff; text-align:left; }
/* Q4.N - Remove all transitions from title/description elements so they move instantly with videos */
.audience-reel-title, .audience-reel-desc {
  transition: none !important;
  transform: none;
}

/* Q4.N - Legacy fade/prewipe classes disabled (now controlled by transform) */
.aud-reel-info--hidden .audience-reel-title,
.aud-reel-info--hidden .audience-reel-desc {
  opacity: 1 !important; /* Always visible - no fading */
}

.aud-reel-info--prewipe-next .audience-reel-title,
.aud-reel-info--prewipe-next .audience-reel-desc,
.aud-reel-info--prewipe-prev .audience-reel-title,
.aud-reel-info--prewipe-prev .audience-reel-desc {
  transform: none !important;
  opacity: 1 !important;
}
/* Active (currently playing) video sits below incoming during transition to avoid covering incoming video tail */
.audience-video.is-active { pointer-events:auto; z-index:3; }
/* Incoming video stays above active video during transition so it covers the outgoing tail */
.audience-video.is-incoming { z-index:4; }

/* Hide native loading spinner (WebKit). Keeps seamless A/B swap without black spinning circle */
.audience-video::-webkit-media-controls-loading-panel { display:none !important; }
.audience-video::-webkit-media-controls-start-playback-button { display:none !important; }
.audience-video::-webkit-media-controls { background:transparent; }
.audience-playlist-title { font-weight:600; text-align:center; margin-bottom:0.5rem; font-size:1.1rem; }
/* Ensure reel title stays left-aligned and has extra bottom margin to separate it from progress bar */
.audience-reel-title { text-align:left; margin-top:0.5rem; margin-bottom:1.6rem; font-size:0.95rem; opacity:0.85; }
.audience-status { text-align:center; padding:2rem 0; font-size:0.95rem; }

/* Custom overlay skin - now constrained within video viewport for proper letterbox clipping */
.audience-overlay { position:absolute; inset:0; background:transparent; transition:opacity .25s; z-index:10; padding:calc(env(safe-area-inset-top,0px) + 8px) 12px calc(env(safe-area-inset-bottom,0px) + 12px); box-sizing:border-box; }
.audience-overlay.hidden { opacity:0; pointer-events:none; }
/* Subtle bottom fade to improve white text contrast over video
   draws a gradient from fully transparent to rgba(0,0,0,0.2) across the bottom area */
.audience-overlay::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 20%; /* adjust if you want a taller/shorter fade */
  background: linear-gradient(transparent, rgba(58,80,107,0.18)); /* subtle blue-tint fade */
  pointer-events: none;
  z-index: 11; /* sits above video but below title (titles have z-index:20) */
}
.aud-ctrl-stack { position:absolute; right:6px; bottom:12px; display:flex; flex-direction:column; gap:8px; }
/* Base control button: translucent blue background (50%), unified size */
.aud-ctrl { background:rgba(58,80,107,.50); color:#fff; border:0; width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:18px; cursor:pointer; transition:background .18s, transform .18s; z-index:15; pointer-events:auto; }
/* Allow icons to scale up to fill control areas; keep them contained to their button's dimensions */
.aud-ctrl img { max-width: 100%; max-height: 100%; display:block; }

/* SVG icons (sprite-based): force fixed pixel sizes on legacy WebKit */
.aud-ctrl .aud-icon { display:block; width:48px !important; height:48px !important; fill:currentColor; }
.aud-play .aud-icon { width:72px !important; height:72px !important; }
.aud-mute .aud-icon { width:40px !important; height:40px !important; }
.aud-ctrl svg { display:block; width:100%; height:100%; }

/* Play button centered - base controls same size; play button is 100% larger (double) */
.aud-play { position:absolute; top:50%; left:50%; margin-top:-46px; margin-left:-46px; width:92px; height:92px; font-size:36px; z-index:20; background:rgba(58,80,107,.50); display:flex; align-items:center; justify-content:center; border-radius:50%; pointer-events:auto; }
/* Mute button top right (same base size) */
/* Mute button top right - now positioned relative to video viewport (automatically letterbox-aware) */
.aud-mute { position:absolute; top:calc(env(safe-area-inset-top,0px) + 20px); right:20px; z-index:15; pointer-events:auto; width:46px; height:46px; }
.aud-ctrl:hover { background:rgba(58,80,107,.65); }
.aud-play:hover { background:rgba(58,80,107,.65); }
/* pressed visual when overlay click triggers play/pause */
.aud-play.pressed { /* faster, snappier press effect */
  transform:scale(.9);
  transition:transform .1s ease;
}
.aud-ctrl.sim-hover { background:rgba(58,80,107,.65); }
.aud-ctrl:active { transform:scale(.9); }
.aud-play:active { transform:scale(.9); }
/* === Fixed-spacing cluster: progress bar + info stack === */
.aud-cluster { position:absolute; left:50%; bottom:calc(env(safe-area-inset-bottom,0px) + 24px); transform:translateX(-50%); width:80%; max-width:600px; pointer-events:none; z-index:18; display:flex; flex-direction:column; }
/* Ensure progress bar renders in natural DOM order inside reel info */
.aud-progress { position:relative; width:100%; height:30px; cursor:pointer; margin:0; transform:none; }
.aud-info-stack { position:relative; width:100%; }
.aud-reel-info { 
  position:relative; 
  width:100%; 
  pointer-events:none; 
  display:flex; 
  flex-direction:column; 
  gap:0px;
  /* Remove side padding per request: keep vertical spacing only */
  padding: 20px 0 16px 0;
}

/* Bottom gradient: anchored to bottom so it never creeps to top on tall viewports. */
.aud-reel-info::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  bottom: 0;
  width: 100vw;
  height: 0; /* hidden */
  background: none !important; /* remove gradient */
  transition: none; /* no animation needed when hidden */
  pointer-events:none;
  z-index:-1;
}

/* When description expanded, extend shade higher and slightly deepen center band */
.aud-reel-info.expanded::before { height:0; background:none !important; }

/* Media queries no longer needed for hidden background */
.aud-reel-info.is-hidden { display:none; }
.aud-reel-info .audience-reel-title { 
  margin:0 0 -20px 0 !important; 
  font-weight:700; 
  font-size:clamp(1.55rem, 1.95rem + 0.55vw, 2.50rem); 
  line-height:1.1; 
  letter-spacing:1px; 
  color:#fff; 
  order:1; 
  /* Readability outline */
  -webkit-text-stroke: 0.7px rgba(0,0,0,0.55); /* Safari / Chromium */
  text-shadow:
    0 0 3px rgba(0,0,0,0.72),
    0 0 9px rgba(0,0,0,0.55),
    0 2px 6px rgba(0,0,0,0.65);
}
.aud-reel-info .audience-reel-desc { 
  margin:-12px 0 0 0 !important; 
  color:#fff; 
  font-size:clamp(0.90rem, 0.95rem + 0.25vw, 1.05rem); 
  line-height:1.2; 
  display:block; 
  order:3; 
  /* Slightly lighter stroke to avoid overpowering body text */
  -webkit-text-stroke: 0.4px rgba(0,0,0,0.45);
  text-shadow:
    0 0 2px rgba(0,0,0,0.60),
    0 0 4px rgba(0,0,0,0.42),
    0 1px 2px rgba(0,0,0,0.50);
}
/* Remove outline effects from inline link text (already styled as a button/badge) */
.aud-reel-info .audience-reel-title a,
.aud-reel-info .audience-reel-desc a {
  -webkit-text-stroke: 0 !important;
  text-shadow: none !important;
}
/* Prevent link text from inheriting enlarged title/desc font sizes */
.aud-reel-info .audience-reel-title a { font-size:0.95rem !important; font-weight:600; line-height:1.05; }
.aud-reel-info .audience-reel-desc a { font-size:0.90rem !important; font-weight:600; line-height:1.1; }
.aud-reel-info .aud-reel-more-btn { margin:0 !important; align-self:flex-start; order:4; }
.aud-reel-info .aud-progress { order:2; pointer-events:auto; margin:-12px 0 -12px 0 !important; }
.audience-reel-title { font-weight:700; margin:0 0 1.6rem 0; font-size:clamp(1.55rem, 1.9rem + 0.5vw, 2.45rem); letter-spacing:1px; color:#fff; text-align:left; }
.audience-reel-desc { margin:0; font-size:clamp(0.90rem, 0.95rem + 0.25vw, 1.05rem); opacity:0.9; color:#fff; text-align:left; }
/* TV2-style: extra-thin track, subtle translucent background; container retains larger hit area for touch */
.aud-progress:before { content:""; position:absolute; left:0; right:0; top:50%; height:2px; transform:translateY(-50%); border-radius:2px; background:rgba(255,255,255,.28); backdrop-filter:blur(2px); }
.aud-progress-fill { position:absolute; left:0; top:50%; height:2px; transform:translateY(-50%); background:#fff; width:0; border-radius:2px; box-shadow:0 0 2px rgba(0,0,0,.45); transition:width .12s linear; }
.aud-progress-knob { position:absolute; top:50%; width:16px; height:16px; background:#fff; border-radius:50%; transform:translate(-50%, -50%); left:0; box-shadow:0 3px 8px -3px rgba(0,0,0,.55),0 0 0 1px rgba(0,0,0,.12); transition:left .12s linear, transform .12s ease, width .12s ease, height .12s ease; }
.aud-progress-knob { /* keep only transform transitions for smooth GPU-accelerated motion */
  transition: transform .14s cubic-bezier(.2,.9,.2,1), width .12s ease, height .12s ease;
}
.aud-progress:hover .aud-progress-knob, .aud-progress.dragging .aud-progress-knob { width:22px; height:22px; transform:translate(-50%, -50%) scale(1.02); }
.aud-progress.dragging .aud-progress-knob { box-shadow:0 6px 18px -6px rgba(0,0,0,.6), 0 0 12px rgba(255,255,255,.06); }
/* Mobile: invisible enlarged touch area while keeping visual slim line */
@media (max-width:900px){
  .aud-progress { height:42px; }
  .aud-progress:before { top:50%; }
  .aud-progress-knob::after{ content:""; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:42px; height:42px; border-radius:50%; background:transparent; pointer-events:none; }
}
.aud-progress:hover:before { background:rgba(255,255,255,.40); }
.aud-progress:hover .aud-progress-fill { background:#fff; }

/* Swipe wipe effect */
@keyframes audienceWipeUp { from { transform:translateY(40%); } to { transform:translateY(0); } }
@keyframes audienceWipeDown { from { transform:translateY(-40%); } to { transform:translateY(0); } }
.audience-video-shell { will-change:transform; backface-visibility:hidden; transform:translateZ(0); }
.audience-video { will-change:opacity; }
/* Legacy classes kept (no-op) to avoid glitches */
.audience-video-shell.wipe-up, .audience-video-shell.wipe-down { animation:none; }

/* Removed previous wipe overlays. Using subtle parallax translate on videos for transition. */
.audience-video { transition: opacity 70ms linear, transform 180ms cubic-bezier(.4,.0,.2,1); }

/* Swipe gesture container adjustments to prevent background page scroll */
#audienceSwiperHost { touch-action:none; overscroll-behavior:contain; }
/* (Swiper removed) Keep vertical drag lock on player only */
body { overscroll-behavior-y:none; }
body.audience-scroll-locked { height:100vh; overflow:hidden; position:fixed; width:100%; inset:0; }
#audiencePlayer .aud-playlist-overlay { touch-action:auto; }
/* When playlist open, allow body to scroll inside overlay container */
body.audience-scroll-locked.playlist-open { position:fixed; width:100%; inset:0; height:100vh; overflow:hidden; }
body.audience-scroll-locked.playlist-open .aud-playlist-overlay { overflow-y:auto; -webkit-overflow-scrolling:touch; }
#audienceSwiperHost, #audiencePlayer { touch-action:none; }
#audiencePlayer { touch-action:none; }

/* Instant pointer drag engine performance hints */
body.instant-dragging .audience-video.is-active,
body.instant-dragging .audience-video.is-incoming { transition:none !important; will-change:transform; }
body.instant-dragging .audience-video-shell,
body.instant-dragging .audience-video-viewport { transition:none !important; will-change:transform; }
body.instant-dragging { user-select:none; cursor:grabbing; }
body.instant-dragging .audience-video.is-active { filter:brightness(.95); }

/* --- Focus / tap highlight cleanup for control buttons --- */
/* Remove default semi-transparent light blue click/focus rectangle (Chrome/Safari) */
.aud-ctrl { outline:none; -webkit-tap-highlight-color:transparent; }
/* Firefox dotted ring */
.aud-ctrl:-moz-focusring { outline:none; }
/* Generic focus suppression */
.aud-ctrl:focus { outline:none; }
/* Provide an accessible custom focus style only for keyboard navigation */
.aud-ctrl:focus-visible { outline:2px solid rgba(255,255,255,.85); outline-offset:2px; box-shadow:0 0 0 3px rgba(0,0,0,.35); }

/* Progress bar highlight removal */
.aud-progress, .aud-progress * { -webkit-tap-highlight-color:transparent; outline:none; }
.aud-progress { user-select:none; }
.aud-progress:focus, .aud-progress:focus-visible { outline:none; }

/* Remove legacy pill styling & positional nudge */
#audiencePlayer .aud-reel-info .audience-reel-title { background:transparent; padding:0; display:block; color:#fff; }
.aud-reel-info .audience-reel-desc { position:static; top:auto; }

/* Thin progress line override (keep wider touch area) */
.aud-progress:before { height:3px; }
.aud-progress-fill { height:3px; }

/* Restored faded grey contrast band (behind progress bar + reel info text) */
.aud-contrast-band { position:absolute; left:0; right:0; width:100%; max-width:none; bottom:0; height: calc(env(safe-area-inset-bottom, 0px) + 120px); pointer-events:none; z-index:11; background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.45) 100%); /* simple top->bottom: 0% -> 45% */ border-top-left-radius:14px; border-top-right-radius:14px; }
@media (min-width:900px){ .aud-contrast-band { bottom:0; height: calc(env(safe-area-inset-bottom, 0px) + 120px); } }
/* Ensure progress bar + reel info appear above the band */
.aud-reel-info { position:absolute; z-index:18; }
/* Progress bar inside reel info should use relative positioning */
.aud-reel-info .aud-progress { position:relative; }
/* Read-more button styles */
.audience-reel-desc { display:inline; }
.aud-reel-more-btn { background:rgba(58,80,107,.50); color:#fff; border:0; padding:6px 12px; font:600 13px/1.2 system-ui,-apple-system,Segoe UI,Roboto,sans-serif; border-radius:4px; cursor:pointer; pointer-events:auto; }
.aud-reel-info.expanded .aud-reel-more-btn { background:rgba(58,80,107,.50); }
.aud-reel-more-btn:focus-visible { outline:2px solid #fff; outline-offset:2px; }

/* Expanded state: no movement needed - let content expand naturally */
body.aud-expanded-desc .aud-cluster { transform:translateX(-50%); transition:transform .28s ease; }
body:not(.aud-expanded-desc) .aud-cluster { transform:translateX(-50%); }

/* === Playlist Overlay Styles === */
.aud-playlist-overlay {
  /* cover the full player area (viewport) so the overlay continues to the bottom */
  position: fixed;
  inset: 0;
  /* flat overlay color - no gradient */
  background: rgba(58,80,107,0.82);
  z-index: 10001; /* sit above the player (player uses 9999) */
  display: none;
  flex-direction: column;
  padding: 28px; /* give header + list a little more breathing room */
  box-sizing: border-box;
  height: 100dvh;
  pointer-events: auto;
  /* slide-in from right animation */
  transform: translateX(100%);
  opacity: 0;
  transition: transform 280ms cubic-bezier(.2,.8,.2,1), opacity 200ms ease;
  will-change: transform, opacity;
}
/* when open state is applied we slide it into view */
.aud-playlist-overlay.open {
  transform: translateX(0);
  opacity: 1;
}
/* while dragging, disable transitions so transform follows touch */
.aud-playlist-overlay.dragging {
  transition: none !important;
}
.aud-playlist-overlay.closing {
  transform: translateX(100%);
  opacity: 0;
}
.aud-playlist-header {
  text-align: center;
  margin-bottom: 15px; /* Reduced from 20px */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.aud-playlist-header h3 {
  color: white;
  font-size: 1.3rem; /* Slightly smaller */
  margin: 0;
  font-weight: 600;
}

.aud-playlist-close {
  /* Match playlist control: same round size/position */
  position: fixed;
  top: calc(env(safe-area-inset-top,0px) + 10px);
  right: 20px;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  font-size: 1.8rem; /* increased for a larger X */
  font-weight: 700;
  line-height: 1;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  cursor: pointer;
  display: none; /* hidden by default; shown only when playlist overlay is open */
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s;
  z-index: 10002; /* above overlay content */
}

.aud-playlist-close:hover {
  background: rgba(255, 255, 255, 0.3);
}

.aud-playlist-close:active {
  background: rgba(255, 255, 255, 0.4);
}

/* Swap behavior: hide the external playlist button while overlay is visible,
   and show the close button only when playlist-open is set on body. */
body.playlist-open .aud-playlist,
body.audience-scroll-locked.playlist-open .aud-playlist {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.playlist-open .aud-playlist-close,
body.audience-scroll-locked.playlist-open .aud-playlist-close {
  display: flex !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.aud-playlist-list {
  /* take remaining space but never shrink items; keep scrollable when content overflows */
  flex: 1 1 auto;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px; /* restore a comfortable gap between items */
  max-height: calc(100% - 140px); /* leave room for header/padding so overlay doesn't grow indefinitely */
  -webkit-overflow-scrolling: touch; /* smooth scrolling on iOS */
  overscroll-behavior: contain;
  /* ensure the last item can scroll fully into view (40px + safe-area) */
  padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px));
  scroll-padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px));
}

.aud-playlist-item {
  display: flex;
  align-items: center;
  /* nearly opaque background for high readability */
  background: rgba(255, 255, 255, 0.70);
  border-radius: 6px; /* Slightly smaller */
  padding: 10px 12px; /* slightly reduced to make rows ~25% lower */
  cursor: pointer;
  transition: background-color 0.18s;
  min-height: 72px; /* ~25% lower rows for denser lists */
  flex: 0 0 auto; /* prevent items from shrinking to fit container */
  border: none;
}

.aud-playlist-item:hover {
  background: rgba(255, 255, 255, 0.96);
}

.aud-playlist-item.active {
  background: rgba(255, 159, 64, 0.95);
  border: none;
}

.playlist-item-thumb {
  width: 36px; /* reduced ~25% to match row height */
  height: 64px; /* keep 9:16-ish ratio */
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px; /* Slightly smaller */
  margin-right: 12px;
  flex-shrink: 0;
}

.playlist-item-info {
  flex: 1;
  color: rgba(20,20,20,0.96); /* dark text for high-contrast on near-white rows */
}

.playlist-item-title {
  font-size: 0.9rem; /* Reduced from 1rem */
  font-weight: 600;
  margin-bottom: 4px;
  line-height: 1.2;
  color: rgba(10,10,10,0.96);
}

.playlist-item-description {
  font-size: 0.75rem;
  opacity: 0.85;
  line-height: 1.2;
  margin-bottom: 2px;
  color: rgba(40,40,40,0.86);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.playlist-item-duration {
  font-size: 0.8rem; /* Reduced from 0.875rem */
  opacity: 0.7;
  line-height: 1;
}

/* Button positioning updates */
.aud-playlist {
  /* Match mute button size and shape */
  position: fixed;
  top: calc(env(safe-area-inset-top,0px) + 10px);
  right: 20px; /* keep at top-right (same inset as mute) */
  z-index: 10002;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}

.aud-playlist .aud-icon { width:40px !important; height:40px !important; }

.aud-mute {
  position: absolute;
  top: 70px; /* Move mute button up by 10px */
  right: 20px;
  z-index: 20;
}

/* Hide global/site menu controls while playlist overlay is visible.
   Add the attribute `data-hide-on-playlist` to any custom control to opt-in. */
body.playlist-open .menu-button,
body.playlist-open .nav-toggle,
body.playlist-open .site-menu-toggle,
body.playlist-open .aud-menu,
body.playlist-open .aud-mute,
body.playlist-open [data-hide-on-playlist],
body.audience-scroll-locked.playlist-open .menu-button,
body.audience-scroll-locked.playlist-open .nav-toggle,
body.audience-scroll-locked.playlist-open .site-menu-toggle,
body.audience-scroll-locked.playlist-open .aud-menu,
body.audience-scroll-locked.playlist-open .aud-mute,
body.audience-scroll-locked.playlist-open [data-hide-on-playlist] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* === Reel Info Ordering Overrides (Progress -> Title -> Description -> Read More) === */
/* Force vertical stack and neutralize earlier absolute/pill styles applied to generic .audience-reel-title rules */
.aud-reel-info { display:flex; flex-direction:column; align-items:flex-start; }
.aud-reel-info .audience-reel-title {
  position:static !important;
  width:auto !important;
  padding:0 !important;
  background:transparent !important;
  color:#fff !important;
  margin:0 0 0.55rem 0 !important;
  line-height:1.15;
  font-size:1.05rem;
  opacity:1 !important;
  pointer-events:auto;
  display:block !important;
  border:none !important;
}
.aud-reel-info .audience-reel-desc {
  position:static !important;
  top:auto !important;
  display:block !important;
  margin:0 0 0.55rem 0 !important;
  background:transparent !important;
  width:auto !important;
}
/* Ensure description text stays white and full width */
.aud-reel-info .audience-reel-desc { color:#fff !important; }
.aud-reel-info .aud-reel-more-btn { align-self:flex-start; }
/* Remove inline display override introduced earlier */
.audience-reel-desc { display:block !important; }