/* Page-scoped styles for the video player (/playing/:slug) — feature 005.
   Mobile-first. Design tokens from shared/variables.css. */

.player {
  position: relative;
  width: 100%;
  background: #000;
}
/* Constrain to a centered column on desktop so a full-width 16:9 video doesn't
   dominate the viewport and push the title/actions off-screen. */
@media (min-width: 1024px) {
  .player { max-width: 1120px; margin-inline: auto; }
}

/* The stage reserves the 16:9 area the persistent player overlays (feature 010).
   It must NOT be full-viewport height, or the title/actions get pushed a whole
   screen down. #player-stage inside provides the 16:9 height. */
.player__stage {
  position: relative;
  width: 100%;
  background: #000;
}
.player__video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Center overlay controls: transparent, centered, hidden until active (FR-008/FR-009). */
.player__controls {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  background: transparent;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-fast) ease, visibility var(--dur-fast) ease;
  pointer-events: none;
}
.player.is-active .player__controls,
.player:not(.is-playing) .player__controls {
  opacity: 1;
  visibility: visible;
}

/* Play/pause icon swap: play shown while paused, pause shown while playing. */
.player__icon-pause { display: none; }
.player.is-playing .player__icon-play { display: none; }
.player.is-playing .player__icon-pause { display: inline-flex; }

/* Graceful message when the media file is missing (edge case). */
.player__unavailable {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  font-size: var(--text-h3);
}

.player__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  cursor: pointer;
  pointer-events: auto;
  transition: background var(--dur-fast) ease, transform var(--dur-fast) ease;
}
.player__btn:hover { background: rgba(0, 0, 0, 0.75); }
.player__btn:active { transform: scale(0.94); }
.player__btn .icon { width: 24px; height: 24px; }
.player__btn--play { width: 72px; height: 72px; }
.player__btn--play .icon { width: 32px; height: 32px; }
/* The play triangle's box is square but its visual mass sits left, so at 32px it
   reads off-center in the round button; a fixed 26px height optically centers it. */
.player__btn--play .player__icon-play .icon { width: 26px; height: 26px; }

/* Small screens: tighter controls so all five buttons keep breathing room
   (5 × 56px + gaps overflowed 390px, touching the screen edges). */
@media (max-width: 480px) {
  .player__controls { gap: var(--space-3); }
  .player__btn { width: 48px; height: 48px; }
  .player__btn .icon { width: 20px; height: 20px; }
  .player__btn--play { width: 60px; height: 60px; }
  .player__btn--play .icon { width: 26px; height: 26px; }
}

/* Skip-back / previous reuse the forward/next icons, mirrored (FR-012). */
.player__btn--mirror .icon { transform: scaleX(-1); }

/* Bottom-right fullscreen toggle (FR-023). */
.player__fullscreen {
  position: absolute;
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: 2;
  pointer-events: auto;
}
.player__fullscreen { opacity: 0; transition: opacity var(--dur-fast) ease; }
.player.is-active .player__fullscreen,
.player:not(.is-playing) .player__fullscreen { opacity: 1; }

/* Loading spinner reuse for lazy frames (comments/related). */
.player__loader {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  color: var(--text-secondary);
  /* Solid dark surface so no page glow shows behind the spinner while a lazy
     section (comments/related) is loading. */
  background: var(--surface-0);
}
.player__loader .icon { width: 28px; height: 28px; }

/* Details revealed on scroll (US7/US8): left content column + related sidebar. */
.player__details {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-4);
}
@media (min-width: 1024px) {
  .player__details { grid-template-columns: 3fr 1fr; } /* col-md-9 : sidebar */
}
.player__title { font-size: var(--text-h2); margin-bottom: var(--space-3); }
.player__description { color: var(--text-secondary); margin-bottom: var(--space-6); }
.player__section-title { font-size: var(--text-h3); margin: var(--space-5) 0 var(--space-3); }

/* Read more (description + long comments). */
.read-more__content {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.read-more.is-expanded .read-more__content {
  -webkit-line-clamp: unset;
  overflow: visible;
}
.read-more__trigger {
  margin-top: var(--space-2);
  padding: 0;
  background: none;
  border: 0;
  color: var(--accent-blue);
  font-weight: 600;
  cursor: pointer;
}

/* Comments. */
.comments__form { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-5); }
.comments__submit { align-self: flex-start; }
.comments__empty { color: var(--text-tertiary); padding: var(--space-4) 0; }
.comment { padding: var(--space-3) 0; border-bottom: 1px solid var(--border-subtle); }
.comment__head { display: flex; gap: var(--space-3); align-items: baseline; margin-bottom: var(--space-1); }
.comment__author { font-weight: 600; }
.comment__time { font-size: var(--text-meta); color: var(--text-tertiary); }
.comment__body { color: var(--text-secondary); }
.comment__body p { margin: 0 0 var(--space-2); }

/* Related sidebar (US8) — shows a thumbnail per item. */
.related__item { display: block; margin-bottom: var(--space-4); color: inherit; }
.related__img { aspect-ratio: 16 / 9; border-radius: var(--radius-tile); overflow: hidden; }
.related__title { margin-top: var(--space-2); font-size: var(--text-meta); font-weight: 600; }
.related__empty { color: var(--text-tertiary); }

/* Video actions bar (like/dislike + menu) above the title. */
.player__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

/* Reactions (like/dislike) — reused for video + comments. */
.reactions { display: inline-flex; gap: var(--space-2); }
.reactions__form { margin: 0; }
.reaction-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--text-secondary);
  font-weight: 600;
  font-size: var(--text-meta);
  cursor: pointer;
  transition: border-color var(--dur-fast) ease, background var(--dur-fast) ease, color var(--dur-fast) ease;
}
.reaction-btn:hover { border-color: var(--accent-blue); color: var(--text-primary); }
.reaction-btn.is-active { background: var(--accent-blue); border-color: var(--accent-blue); color: #fff; }
.reaction-btn .icon { width: 18px; height: 18px; }
.reaction-btn__count { line-height: 1; }

/* Autoplay preference toggle (feature 010). Muted when off, accent when on. */
.player__autoplay {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--text-tertiary);
  cursor: pointer;
  transition: border-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.player__autoplay:hover { border-color: var(--accent-blue); color: var(--text-primary); }
.player__autoplay.is-on { color: var(--accent-blue); border-color: var(--accent-blue); }
.player__autoplay .icon { width: 20px; height: 20px; fill: currentColor; }
/* button_to wraps the control in a form — keep it inline with the action row. */
.player__autoplay { margin: 0; }

/* Dropdown menu (share / add to playlist). */
.menu { position: relative; }
.menu__toggle { padding: var(--space-2) var(--space-3); }
.menu__list {
  position: absolute;
  right: 0;
  top: calc(100% + var(--space-2));
  z-index: 5;
  min-width: 200px;
  padding: var(--space-2);
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}
.menu__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3);
  border: 0;
  border-radius: var(--radius-tile);
  background: none;
  color: var(--text-primary);
  font-size: var(--text-body);
  text-align: left;
  cursor: pointer;
}
.menu__item:hover { background: var(--surface-3); }
.menu__item .icon { width: 20px; height: 20px; }

/* Comment actions / replies. */
.comment__actions { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-2); }
/* Reply form spans the full width, below the like/dislike row. */
.comment__reply { display: block; width: 100%; margin-top: var(--space-2); }
.comment__reply summary {
  list-style: none;
  cursor: pointer;
  color: var(--text-secondary);
  font-weight: 600;
  font-size: var(--text-meta);
}
.comment__reply summary::-webkit-details-marker { display: none; }
.comment__reply[open] summary { margin-bottom: var(--space-2); }
.comment__reply .comments__form { width: 100%; }
.comment__replies {
  margin: var(--space-2) 0 0 var(--space-5);
  padding-left: var(--space-4);
  border-left: 2px solid var(--border-subtle);
}
.comment--reply { border-bottom: 0; }

/* Prettier comment textarea. */
.comments__input {
  width: 100%;
  min-height: 72px;
  resize: vertical;
  padding: var(--space-3) var(--space-4);
  background: var(--surface-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  color: var(--text-primary);
  font-family: inherit;
  font-size: var(--text-body);
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.comments__input::placeholder { color: var(--text-tertiary); }
.comments__input:focus {
  outline: none;
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 4px var(--accent-blue-glow);
}
.comments__actions { display: flex; justify-content: flex-end; margin-top: var(--space-2); }

/* Add-to-playlist modal rows. */
.playlist-add { display: flex; flex-direction: column; gap: var(--space-2); }
.playlist-add__form { margin: 0; }
.playlist-add__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: var(--surface-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-tile);
  color: var(--text-primary);
  font-size: var(--text-body);
  cursor: pointer;
}
.playlist-add__row:hover,
.playlist-add__row.is-added { border-color: var(--accent-blue); }
.playlist-add__row .icon { width: 20px; height: 20px; }
.playlist-add__check { color: var(--success); }
.playlist-add__empty { color: var(--text-tertiary); padding: var(--space-3) 0; }

/* Inline "Add a playlist" create control (feature 008, US1). */
.playlist-add__list { display: flex; flex-direction: column; gap: var(--space-2); }
/* The button/form carry an explicit `display`, which would otherwise beat the
   [hidden] attribute — force hidden children to stay hidden while toggling. */
.playlist-add__create [hidden] { display: none !important; }

/* Row = toggle button + delete button (feature 008 delete). */
.playlist-add__item { display: flex; align-items: stretch; gap: var(--space-2); }
.playlist-add__item .playlist-add__form { flex: 1 1 auto; margin: 0; }
.playlist-add__item .playlist-add__row { width: 100%; height: 100%; }
.playlist-add__delete-form { flex: 0 0 auto; margin: 0; }
.playlist-add__delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 100%;
  min-height: 44px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-tile);
  background: var(--surface-3);
  color: var(--text-tertiary);
  cursor: pointer;
}
.playlist-add__delete:hover { color: var(--danger); border-color: var(--danger); }
.playlist-add__delete .icon { width: 18px; height: 18px; }
.playlist-add__add { color: var(--text-secondary); }
.playlist-add__create-form { margin: 0; }
.playlist-add__create-fields { display: flex; align-items: center; gap: var(--space-2); }
.playlist-add__input { flex: 1 1 auto; height: 44px; }
.playlist-add__icon-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-tile);
  background: var(--surface-3);
  color: var(--text-primary);
  cursor: pointer;
}
.playlist-add__confirm { color: var(--success); }
.playlist-add__icon-btn:hover { border-color: var(--accent-blue); }
.playlist-add__icon-btn .icon { width: 18px; height: 18px; }
.playlist-add__error { color: var(--danger, #ff6b6b); font-size: var(--text-meta); margin-bottom: var(--space-2); }

/* Live embed (feature 009): responsive 16:9 within the player stage. */
/* In flow with its own 16:9 box — the stage no longer has an intrinsic height
   (it used to be 100svh; see the layout fix). */
.live-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}
.live-embed__frame {
  width: 100%;
  height: 100%;
  max-height: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}