/* ============================================================================
   Viewering Companion VC-7K3 Attendee Clean Layer
   Loaded AFTER brand.css. This is the authoritative attendee-page UI layer.
   Do not patch individual colours above this file; add future attendee UI here.
   ============================================================================ */

body.attendee-page {
  --vc-bg: #edf3f9;
  --vc-panel: #ffffff;
  --vc-panel-2: #f8fafc;
  --vc-border: rgba(15, 23, 42, .13);
  --vc-border-strong: rgba(15, 23, 42, .22);
  --vc-text: #111827;
  --vc-muted: #667085;
  --vc-faint: #98a2b3;
  --vc-orange: var(--brand-button, #ff5a1f);
  --vc-green-bg: #dff7eb;
  --vc-green-text: #065f46;
  --vc-shadow: 0 18px 45px rgba(15, 23, 42, .08);
  --vc-caption-bg: rgba(15, 23, 42, .84);
  --vc-caption-text: #ffffff;
}

html[data-theme="dark"] body.attendee-page {
  --vc-bg: #050914;
  --vc-panel: #111827;
  --vc-panel-2: #1f2937;
  --vc-border: rgba(255, 255, 255, .13);
  --vc-border-strong: rgba(255, 255, 255, .24);
  --vc-text: #f8fafc;
  --vc-muted: #cbd5e1;
  --vc-faint: #94a3b8;
  --vc-green-bg: #06391f;
  --vc-green-text: #dcfce7;
  --vc-shadow: 0 18px 45px rgba(0, 0, 0, .28);
  --vc-caption-bg: rgba(0, 0, 0, .78);
  --vc-caption-text: #ffffff;
}

html[data-theme="high-contrast"] body.attendee-page {
  --vc-bg: #ffffff;
  --vc-panel: #ffffff;
  --vc-panel-2: #ffffff;
  --vc-border: #000000;
  --vc-border-strong: #000000;
  --vc-text: #000000;
  --vc-muted: #000000;
  --vc-faint: #000000;
  --vc-caption-bg: #000000;
  --vc-caption-text: #ffffff;
}

/* Base attendee shell */
body.attendee-page,
body.attendee-page .aw2-page,
body.attendee-page .aw2-body {
  background: var(--vc-bg) !important;
  color: var(--vc-text) !important;
}

body.attendee-page .aw2-panel,
body.attendee-page details.aw2-panel,
body.attendee-page .aw2-card,
body.attendee-page .listen-only-player-card {
  background: var(--vc-panel) !important;
  border: 1px solid var(--vc-border) !important;
  color: var(--vc-text) !important;
  box-shadow: var(--vc-shadow) !important;
}

body.attendee-page .aw2-panel,
body.attendee-page details.aw2-panel {
  border-radius: 24px !important;
  overflow: hidden !important;
}

body.attendee-page .aw2-panel *,
body.attendee-page details.aw2-panel *,
body.attendee-page .listen-only-player-card * {
  text-shadow: none !important;
  opacity: 1;
}

body.attendee-page .aw2-panel-hd,
body.attendee-page summary.aw2-panel-hd,
body.attendee-page .aw2-panel-lbl,
body.attendee-page .aw2-panel-meta {
  color: var(--vc-text) !important;
}

body.attendee-page .aw2-chevron {
  color: var(--vc-muted) !important;
  stroke: var(--vc-muted) !important;
}

body.attendee-page .aw2-note,
body.attendee-page .small,
body.attendee-page small,
body.attendee-page .muted {
  color: var(--vc-muted) !important;
}

/* Live Audio card — grid layout so play + DVR share one row */
body.attendee-page #listenOnlyPlayerCard {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  grid-auto-rows: auto !important;
  column-gap: 4px !important;
  row-gap: 6px !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
}

body.attendee-page #listenOnlyStatusPill {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 38px !important;
  padding: 0 18px !important;
  border-radius: 999px !important;
  background: var(--vc-green-bg) !important;
  color: var(--vc-green-text) !important;
  font-weight: 900 !important;
  border: 0 !important;
}

/* Status row — full width, transparent, no pill background */
body.attendee-page #listenOnlyPlayerCard .lo-status-row {
  grid-column: 1 / -1 !important;
  display: flex !important;
  align-items: center !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

/* Play row: grid col 1, row 2 */
body.attendee-page #listenOnlyPlayerCard .lo-play-row,
body.attendee-page #listenOnlyPlayerCard .lo-primary-row {
  grid-column: 1 !important;
  grid-row: 2 !important;
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
}

/* DVR row: grid col 2, row 2 — sits inline with play button */
body.attendee-page #listenOnlyPlayerCard .lo-dvr-row {
  grid-column: 2 !important;
  grid-row: 2 !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  flex-wrap: nowrap !important;
  margin: 0 !important;
}

/* Progress + message span full width */
body.attendee-page #listenOnlyPlayerCard #listenProgressShell,
body.attendee-page #listenOnlyPlayerCard .lo-progress-shell,
body.attendee-page #listenOnlyPlayerCard .lo-msg,
body.attendee-page #listenOnlyPlayerCard #listenOnlyMessage {
  grid-column: 1 / -1 !important;
}

/* Main Play button — high-specificity (0,3,1) to beat vc-preview-css width:100% */
body.attendee-page #listenOnlyPlayerCard #listenOnlyPlayButton,
body.attendee-page #listenOnlyPlayerCard .lo-play-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  min-height: 0 !important;
  height: 26px !important;
  padding: 0 9px !important;
  width: auto !important;
  min-width: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--vc-orange) !important;
  color: #ffffff !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  box-shadow: none !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}

body.attendee-page #listenOnlyPlayButton *,
body.attendee-page #listenOnlyPlayButton svg,
body.attendee-page #listenOnlyPlayButton span,
body.attendee-page #listenOnlyPlayerCard .lo-play-btn *,
body.attendee-page #listenOnlyPlayerCard .lo-play-btn svg,
body.attendee-page #listenOnlyPlayerCard .lo-play-btn span {
  color: #ffffff !important;
  fill: currentColor !important;
}

/* From beginning / Live buttons — compact pills */
body.attendee-page #listenDvrStartButton,
body.attendee-page #listenDvrLiveButton,
body.attendee-page #listenOnlyPlayerCard .lo-dvr-btn {
  display: inline-flex !important;
  visibility: visible !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 0 !important;
  height: 24px !important;
  padding: 0 6px !important;
  width: auto !important;
  min-width: 0 !important;
  border-radius: 999px !important;
  border: 1px solid var(--vc-border-strong) !important;
  background: var(--vc-panel-2) !important;
  color: var(--vc-text) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  box-shadow: none !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}

body.attendee-page #listenDvrStartButton *,
body.attendee-page #listenDvrLiveButton * {
  color: var(--vc-text) !important;
}

body.attendee-page #listenDvrStartButton.lo-dvr-active,
body.attendee-page #listenDvrLiveButton.lo-dvr-active {
  border-color: var(--vc-orange) !important;
  background: color-mix(in srgb, var(--vc-orange) 10%, var(--vc-panel-2)) !important;
}

/* Progress scrubber — single clean range input, hide the duplicate visual track */
body.attendee-page #listenProgressShell {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  margin: 14px 0 8px !important;
}

body.attendee-page #listenProgressShell .lo-progress-track {
  display: none !important;
}

body.attendee-page #listenProgressFill {
  display: none !important;
}

body.attendee-page #listenProgressRange {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  accent-color: var(--vc-orange) !important;
  opacity: 1 !important;
  cursor: pointer !important;
  height: 4px !important;
}

body.attendee-page #listenProgressShell .lo-progress-times {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  color: var(--vc-muted) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
}

body.attendee-page #listenProgressCurrent,
body.attendee-page #listenProgressLive {
  color: var(--vc-muted) !important;
  white-space: nowrap !important;
}

body.attendee-page #listenOnlyMessage,
body.attendee-page #listenOnlyPlayerCard .lo-msg {
  color: var(--vc-muted) !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  font-weight: 400 !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  white-space: normal !important;
  overflow: visible !important;
  padding-left: 2px !important;
}

/* Prevent parent overflow:hidden from clipping first character of wrapped lines */
body.attendee-page .listen-only-player-card,
body.attendee-page .card.control-card {
  overflow: visible !important;
}

body.attendee-page .aw2-panel-bd {
  overflow: visible !important;
}

/* Raw caption list is intentionally hidden; captions display on the slide via CC overlay. */
body.attendee-page #listenCaptionShell,
body.attendee-page #listenCaptionList,
body.attendee-page .lo-captions,
body.attendee-page .lo-caption-list {
  display: none !important;
}

/* Resources */
body.attendee-page #resourcesList .resource-item {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-rows: auto !important;
  align-items: center !important;
  gap: 10px 14px !important;
  background: var(--vc-panel-2) !important;
  border: 1px solid var(--vc-border) !important;
  border-radius: 18px !important;
  padding: 14px 16px !important;
  color: var(--vc-text) !important;
  box-shadow: none !important;
}

/* Title + description always in column 1 */
body.attendee-page #resourcesList .resource-item > div,
body.attendee-page #resourcesList .resource-item > p {
  grid-column: 1 !important;
}

body.attendee-page #resourcesList .resource-item strong {
  display: block !important;
  color: var(--vc-text) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}

body.attendee-page #resourcesList .resource-file {
  display: block !important;
  margin-top: 3px !important;
  color: var(--vc-muted) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Button always in column 2, spanning all rows — compact download link */
body.attendee-page #resourcesList .resource-link,
body.attendee-page #resourcesList a.resource-link,
body.attendee-page #resourcesList a.btn.light.resource-link {
  grid-column: 2 !important;
  grid-row: 1 / -1 !important;
  align-self: center !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 22px !important;
  padding: 0 7px !important;
  border-radius: 5px !important;
  color: var(--vc-muted) !important;
  background: transparent !important;
  border: 1px solid var(--vc-border) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  opacity: 1 !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body.attendee-page #resourcesList .resource-link,
html[data-theme="dark"] body.attendee-page #resourcesList a.resource-link,
html[data-theme="dark"] body.attendee-page #resourcesList a.btn.light.resource-link {
  color: #ffffff !important;
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.2) !important;
}

/* Stage status pill — hidden; status is already shown in the top toolbar */
body.attendee-page #presentationStatusPill {
  display: none !important;
}

/* Stage CC overlay */
body.attendee-page .presentation-stage-wrap,
body.attendee-page #presentationStage {
  position: relative !important;
}

/* Caption bar: hidden by default — only shown when CC is explicitly enabled.
   This prevents the bar from flashing on/off when captions are inactive. */
body.attendee-page #presentationSlideCaption {
  display: none !important;
}

/* Only show caption bar when it has actual content */
body.attendee-page.vc-stage-captions-enabled #presentationSlideCaption:not(:empty) {
  display: block !important;
  position: absolute !important;
  left: 50% !important;
  bottom: 22px !important;
  transform: translateX(-50%) !important;
  width: min(88%, 980px) !important;
  max-height: 30% !important;
  overflow: hidden !important;
  padding: 12px 16px !important;
  border-radius: 16px !important;
  background: var(--vc-caption-bg) !important;
  color: var(--vc-caption-text) !important;
  font-size: clamp(15px, 1.75vw, 22px) !important;
  line-height: 1.35 !important;
  font-weight: 800 !important;
  text-align: center !important;
  box-shadow: 0 18px 44px rgba(0,0,0,.26) !important;
  z-index: 15 !important;
}


body.attendee-page .vc-cc-toggle {
  position: absolute !important;
  right: 18px !important;
  bottom: 18px !important;
  z-index: 16 !important;
  min-width: 54px !important;
  min-height: 46px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.38) !important;
  background: rgba(31, 41, 55, .84) !important;
  color: #ffffff !important;
  font-weight: 950 !important;
  font-size: 15px !important;
  cursor: pointer !important;
  box-shadow: none !important;
}

body.attendee-page .vc-cc-toggle[aria-pressed="true"] {
  background: var(--vc-orange) !important;
  border-color: var(--vc-orange) !important;
}