/* Watch Party room - a fixed single-screen app shell.
   Built on common.css's design-system tokens so it follows the site theme.

   Layout contract: the room occupies exactly the viewport below the top nav
   and never scrolls the page. The stage (video + toolbar) is fixed height;
   the only scrolling region is the chat transcript. */

/* ══════════════════════════════════════════════════════════
   ROOM SHELL
   ══════════════════════════════════════════════════════════ */
/* Flex rather than grid, and `order` rather than logical columns: the page is
   RTL, where the first track lands on the RIGHT. Giving the panel order:-1
   makes "chat on the right" true by construction instead of depending on how
   a reader interprets inline-start under RTL. */
.watch-room {
  position: fixed;
  top: var(--nav-h); right: 0; bottom: 0; left: 0;
  display: flex;
  background: var(--bg-base);
  z-index: 10;
  overflow: hidden;
}
/* ── On-screen keyboard ──
   Tapping the chat box used to eat the video. `bottom: 0` resolves against
   the LAYOUT viewport, which the two mobile browsers break differently:
   Android shrinks it, so the whole room (video included) is squeezed; iOS
   does not shrink it at all and instead scrolls the page under the keyboard,
   which drags this fixed element's top off-screen. Either way part of the
   film disappears the moment someone types.

   So while the keyboard is up, the room is pinned to the VISUAL viewport
   instead - the area actually on screen - using values JS reads from
   visualViewport. The nav is deliberately allowed to scroll away: with a
   keyboard open there is very little height left and the video needs it more
   than the nav does. Without JS (or without visualViewport) nothing sets
   .kb-open and the original rules above still apply. */
.watch-room.kb-open {
  top: var(--kb-top, 0px);
  bottom: auto;
  height: var(--kb-h, 100%);
}
/* Share-link / mic / add-track are not what anyone is reaching for mid-
   sentence, and that row is the tallest thing competing with the picture on
   the little height a keyboard leaves. Hidden only while typing, so the
   video keeps as much of the stage as possible. */
.watch-room.kb-open .watch-toolbar { display: none; }
/* Every tap target in the room, not just the floating open button: they all
   sit close to video/gesture-heavy areas where iOS Safari's default
   ambiguous-gesture handling (deciding tap vs. double-tap-zoom vs. swipe)
   can delay or swallow a real tap. */
.watch-room button { touch-action: manipulation; }
/* The room takes over the screen, so the page chrome meant for scrolling
   documents (bottom tab bar, ambient blobs) would only steal height.
   Driven by a body class rather than :has() so it works on older WebViews,
   which this page has to support - see the Galaxy J3 findings. */
body.in-room .tabbar,
body.in-room .blob,
/* The site footer too. It is server-rendered into .wrap on every page, and a
   room is a fixed full-screen shell laid over that page - so the footer sat
   underneath, and on a phone it ended up covering the room: a full screen of
   footer with only a sliver of the player showing at the edge (reported from
   a device). A room is an app screen, not a document; nothing in the page
   chrome belongs in it, the نماد اعتماد الکترونیکی (اینماد) included.
   Safe for Enamad: `in-room` is only set when the URL carries a ?room=
   token. /watch itself, and every other page, still serves and shows the
   seal - which is what the checker fetches. */
body.in-room .site-footer { display: none; }
body.in-room { overflow: hidden; padding: 0; }

.watch-stage {
  flex: 1; order: 0;
  display: flex; flex-direction: column;
  min-width: 0; min-height: 0;
  padding: var(--space-4);
  gap: var(--space-3);
}

.watch-video-card {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column; gap: var(--space-3);
}

.player-wrap {
  position: relative; flex: 1; min-height: 0;
  background: #000; border-radius: var(--radius-xl);
  overflow: hidden;
}
.watch-video-card video {
  width: 100%; height: 100%; display: block;
  background: #000; object-fit: contain;
}

/* ── Toolbar ── */
.watch-toolbar {
  display: flex; align-items: center; gap: var(--gap-sm);
  flex-wrap: wrap; flex-shrink: 0;
}
.pill {
  font-size: var(--text-xs); font-weight: var(--weight-bold);
  padding: var(--space-1-5) var(--space-3); border-radius: var(--radius-full);
  background: var(--bg-subtle); border: 1px solid var(--border-default); color: var(--fg-3);
}
.pill-accent {
  background: var(--accent-subtle); color: var(--accent-fg);
  border-color: var(--accent);
}

/* ══════════════════════════════════════════════════════════
   SIDE PANEL (chat + members)
   ══════════════════════════════════════════════════════════ */
/* order:-1 puts the panel first in the flex line, which under RTL is the
   right-hand edge of the room. Physical `border-left` because the divider
   always faces the video, which is always to its left here. */
.watch-side {
  order: -1; flex-shrink: 0;
  width: 360px;
  display: flex; flex-direction: column;
  min-height: 0;
  background: var(--bg-card);
  border-left: 1px solid var(--border-default);
  transition: transform var(--transition-normal), width var(--transition-normal);
}

.side-head {
  display: flex; align-items: center; gap: var(--gap-sm);
  padding: var(--space-3) var(--space-3);
  border-bottom: 1px solid var(--border-default);
  flex-shrink: 0;
}
.side-tabs { display: flex; gap: var(--space-1); flex: 1; min-width: 0; }
.side-tab {
  flex: 1; border: none; background: none;
  padding: var(--space-2) var(--space-2); border-radius: var(--radius-md);
  font-family: inherit; font-weight: var(--weight-bold); font-size: var(--text-xs);
  color: var(--fg-3); cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1-5);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.side-tab:hover { background: var(--bg-subtle); color: var(--fg-1); }
.side-tab.active { background: var(--accent-subtle); color: var(--accent-fg); }
.side-count {
  font-size: 10px; font-weight: var(--weight-bold);
  background: var(--bg-muted); color: var(--fg-3);
  border-radius: var(--radius-full); padding: 1px var(--space-1-5); min-width: 18px;
}
.side-tab.active .side-count { background: var(--accent); color: var(--fg-on-brand); }

.side-close {
  width: 32px; height: 32px; flex-shrink: 0;
  border-radius: var(--radius-md); border: 1px solid var(--border-default);
  background: var(--bg-subtle); color: var(--fg-3);
  cursor: pointer; font-size: var(--text-sm);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.side-close:hover { background: var(--bg-muted); color: var(--fg-1); }

.side-panel { display: none; flex: 1; min-height: 0; flex-direction: column; }
.side-panel.active { display: flex; }

/* ── Chat transcript: the one scrolling region in the room ── */
.chat-messages {
  flex: 1; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-4) var(--space-3);
  overscroll-behavior: contain;
}

/* Telegram-style bubbles: your own messages hug one edge, everyone else's
   hug the other, so authorship is readable without parsing the name. */
.chat-msg {
  max-width: 78%;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm); line-height: var(--leading-normal);
  word-break: break-word;
  animation: msg-in var(--duration-fast) var(--ease-out);
}
@keyframes msg-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .chat-msg { animation: none; } }

/* The transcript is a column flex container, so align-self works on the
   horizontal axis - and under RTL that axis runs right-to-left, making
   flex-START the RIGHT edge. Hence self=flex-start, other=flex-end, which
   reads backwards but is what actually puts your own messages on the right.
   Corner radii are physical for the same reason. */
.chat-msg.other {
  align-self: flex-end;              /* RTL cross-axis end = left */
  background: var(--bg-subtle);
  border: 1px solid var(--border-default);
  border-bottom-left-radius: var(--radius-sm);
}
.chat-msg.self {
  align-self: flex-start;            /* RTL cross-axis start = right */
  background: var(--accent);
  color: var(--fg-on-brand);
  border-bottom-right-radius: var(--radius-sm);
}
.chat-msg .name {
  display: block;
  color: var(--accent-fg); font-weight: var(--weight-bold);
  font-size: var(--text-xs); margin-bottom: 2px;
}
.chat-msg.self .name { display: none; }
.chat-msg .txt { color: inherit; }

.chat-msg.system {
  align-self: center; max-width: 90%;
  background: none; border: none; padding: var(--space-1) var(--space-2);
  color: var(--fg-muted); font-size: var(--text-xs); text-align: center;
}

/* ── Composer ── */
.side-compose {
  flex-shrink: 0;
  padding: var(--space-3);
  border-top: 1px solid var(--border-default);
  background: var(--bg-card);
}
.reactions-row { display: flex; gap: var(--space-1-5); margin-bottom: var(--space-2-5); }
.reactions-row button {
  flex: 1; border: 1px solid var(--border-default); background: var(--bg-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-1-5) 0; font-size: var(--text-lg); cursor: pointer;
  transition: background var(--transition-fast), transform var(--transition-fast);
}
.reactions-row button:hover { background: var(--bg-muted); transform: translateY(-2px); }
.reactions-row button:active { transform: scale(.92); }

.watch-side .row { display: flex; gap: var(--gap-sm); }
.watch-side input[type="text"] {
  flex: 1; min-width: 0;
  padding: var(--space-2-5) var(--space-3);
  border-radius: var(--radius-lg); border: 1px solid var(--border-default);
  background: var(--bg-subtle); color: var(--fg-1);
  font-family: inherit; font-size: var(--text-sm); outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.watch-side input[type="text"]:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .15);
}

/* ── Members ── */
.members-list {
  list-style: none; margin: 0; padding: var(--space-3);
  display: flex; flex-direction: column; gap: var(--space-2);
  overflow-y: auto; flex: 1; min-height: 0;
}
.members-list li {
  display: flex; align-items: center; justify-content: space-between; gap: var(--gap-sm);
  font-size: var(--text-sm); padding: var(--space-2-5) var(--space-3);
  border-radius: var(--radius-lg);
  background: var(--bg-subtle); border: 1px solid var(--border-default);
}
.members-list .mic-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--fg-muted); display: inline-block; flex-shrink: 0;
}
.members-list .mic-dot.on {
  background: var(--color-success);
  box-shadow: 0 0 0 3px rgba(16,185,129,.22);
}

#micBtn.active { background: var(--color-error); color: #fff; }

/* ══════════════════════════════════════════════════════════
   OPEN/CLOSE — the panel is dismissible on every screen size
   ══════════════════════════════════════════════════════════ */
.side-open {
  /* Mobile Safari's own address/tab bar toggles between compact and
     expanded without resizing a `position: fixed` ancestor's box (it is
     sized for the LARGEST possible viewport), and that toolbar is often
     60-70px tall when expanded - a plain `bottom: 20px` can render under it,
     unreachable to touch even though the element is technically "there" in
     the DOM. 64px of clearance plus the home-indicator safe area (0 on
     hardware without one) covers both. */
  position: absolute; bottom: calc(64px + env(safe-area-inset-bottom, 0px)); right: var(--space-5);
  width: 52px; height: 52px; border-radius: var(--radius-full);
  /* Without this, iOS Safari can spend the tap deciding whether it is the
     start of a double-tap-to-zoom or a page-swipe gesture instead of firing
     click straight away - on a button sitting over video content (which has
     its own default touch gestures) that indecision can eat the tap
     entirely. This tells it: single-tap/click only, decide immediately. */
  touch-action: manipulation;
  border: 1px solid var(--border-default); background: var(--accent);
  color: var(--fg-on-brand); font-size: var(--text-xl);
  cursor: pointer; z-index: 30;
  display: none; align-items: center; justify-content: center;
  box-shadow: var(--shadow-lg);
  transition: transform var(--transition-fast);
}
.side-open:active { transform: scale(.94); }
/* Desktop: shown only once explicitly closed (side-closed). Mobile's default
   is the reverse polarity - see the max-width:819px rule further down,
   which shows this whenever .side-forced-open is ABSENT, matching the
   panel's own closed-by-default state on that breakpoint. */
.watch-room.side-closed .side-open { display: flex; }

/* Unread marker while the panel is shut. */
.side-open-badge {
  position: absolute; top: 4px; right: 4px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--color-error); border: 2px solid var(--bg-base);
}
.side-open-badge[hidden] { display: none; }

.side-scrim {
  position: absolute; inset: 0; background: var(--bg-overlay);
  z-index: 19; opacity: 0; pointer-events: none;
  transition: opacity var(--transition-normal);
}

/* ── Desktop: panel collapses to zero width so the video reclaims it ── */
@media (min-width: 820px) {
  .watch-side { overflow: hidden; }
  .watch-room.side-closed .watch-side {
    width: 0; border-left-width: 0; pointer-events: none;
  }
}

/* ── Mobile/tablet: panel is an overlay sheet pinned to the right edge, so
   the video keeps the whole stage underneath it ──
   Closed is the DEFAULT here - no class needed - and opening it requires the
   explicit .side-forced-open class. Desktop's rule above is the opposite
   polarity (open by default, .side-closed collapses it). Splitting the two
   states into two independently-named classes, instead of one class whose
   meaning flips per breakpoint, means the panel's initial on-screen state
   never depends on JS's own viewport check agreeing with this media query -
   if that JS check is ever wrong, stale, or simply hasn't run yet, mobile
   still starts closed because CSS alone says so. (A real device was seen
   stuck in the "open, in-flow, squeezing the video to a sliver" state this
   was meant to prevent.) */
@media (max-width: 819px) {
  .watch-stage { padding: var(--space-3); }
  .watch-side {
    position: absolute; top: 0; bottom: 0; right: 0;
    width: min(380px, 88vw); z-index: 20;
    box-shadow: var(--shadow-lg);
    transform: translateX(100%);
  }
  .watch-room.side-forced-open .watch-side { transform: translateX(0); }
  .watch-room.side-forced-open .side-scrim { opacity: 1; pointer-events: auto; }
  /* Reverse of the desktop rule above: shown whenever NOT explicitly opened,
     which on this breakpoint is also the untouched-by-JS default. */
  .watch-room:not(.side-forced-open) .side-open { display: flex; }
  .chat-msg { max-width: 85%; }
}

/* Very short viewports (landscape phones): keep the toolbar from eating the
   video by letting it scroll horizontally instead of wrapping to two rows. */
@media (max-height: 520px) {
  .watch-toolbar { flex-wrap: nowrap; overflow-x: auto; padding-bottom: var(--space-1); }
  .watch-toolbar::-webkit-scrollbar { height: 0; }
}

/* ══════════════════════════════════════════════════════════
   OVERLAYS (unchanged behaviour, DS-token styling)
   ══════════════════════════════════════════════════════════ */
.tap-to-play {
  position: absolute; inset: 0; width: 100%; border: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-1-5);
  background: rgba(0, 0, 0, .62); color: #fff;
  font-family: inherit; font-size: var(--text-base); font-weight: var(--weight-bold);
}
.tap-to-play[hidden] { display: none; }
.tap-to-play .ic { font-size: 42px; display: flex; justify-content: center; }
.tap-to-play small { font-size: var(--text-xs); font-weight: var(--weight-regular); opacity: .75; }

.prep-overlay {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, .72); color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-2-5);
  text-align: center; padding: var(--space-5);
  font-size: var(--text-sm); font-weight: var(--weight-bold);
}
.prep-overlay[hidden] { display: none; }
.prep-overlay small { font-weight: var(--weight-regular); font-size: var(--text-xs); opacity: .75; }
.prep-spinner {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, .25); border-top-color: #fff;
  animation: prep-spin 1s linear infinite;
}
@keyframes prep-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .prep-spinner { animation: none; } }
.prep-bar {
  width: min(260px, 80%); height: 6px; border-radius: var(--radius-full);
  background: rgba(255, 255, 255, .2); overflow: hidden;
}
.prep-bar > div {
  height: 100%; width: 0; border-radius: var(--radius-full);
  background: var(--accent-3); transition: width var(--transition-slow, .4s) ease;
}

/* Mini-app in-place player overlay */
.player-overlay {
  position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, .82);
  display: flex; align-items: center; justify-content: center; padding: var(--space-4);
}
.player-overlay[hidden] { display: none; }
.player-overlay-inner {
  width: 100%; max-width: 720px; background: var(--bg-card);
  border: 1px solid var(--border-default); border-radius: var(--radius-xl);
  padding: var(--space-4);
}

/* ── Audio / subtitle pickers ── */
/* --- playback control bar ------------------------------------------------
   Sits under the video. The host drives it; for guests the controls are
   disabled (visible but inert) so the layout matches for everyone and it is
   obvious that playback is host-controlled rather than broken. */
.pbar {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
  padding: 8px 10px; margin-top: 8px;
  background: var(--bg-subtle, rgba(128, 128, 128, .12));
  border: 1px solid var(--glass-border, rgba(128, 128, 128, .22));
  border-radius: 12px;
  /* The row is LTR (transport controls read left-to-right everywhere) even
     though the page is RTL. */
  direction: ltr;
}
.pbar-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 30px; padding: 0 7px;
  font-size: 12px; font-weight: 700; line-height: 1;
  color: var(--text, inherit);
  background: transparent; border: 1px solid var(--glass-border, rgba(128,128,128,.22));
  border-radius: 8px; cursor: pointer;
}
.pbar-btn:hover:not(:disabled) { background: rgba(128, 128, 128, .16); }
.pbar-btn svg.ic { width: 15px; height: 15px; }
.pbar-time {
  font-size: 11.5px; font-variant-numeric: tabular-nums;
  color: var(--text-dim, #888); min-width: 42px; text-align: center; flex-shrink: 0;
}
.pbar-seek { flex: 1; min-width: 60px; height: 4px; cursor: pointer; accent-color: var(--accent, #6c5ce7); }
.pbar-rate {
  height: 30px; padding: 0 4px; font-size: 11.5px;
  color: var(--text, inherit); background: transparent;
  border: 1px solid var(--glass-border, rgba(128,128,128,.22));
  border-radius: 8px; cursor: pointer;
}
.pbar[data-readonly="1"] .pbar-btn:not(#pbFull),
.pbar[data-readonly="1"] .pbar-seek,
.pbar[data-readonly="1"] .pbar-rate { opacity: .45; pointer-events: none; }
.pbar-note {
  font-size: 11.5px; color: var(--text-dim, #888);
  text-align: center; margin-top: 4px; flex-shrink: 0;
}
@media (max-width: 560px) {
  .pbar { gap: 6px; padding: 7px 8px; }
  .pbar-btn { min-width: 30px; padding: 0 5px; font-size: 11px; }
  .pbar-time { min-width: 36px; font-size: 11px; }
}

.track-bar { display: flex; gap: var(--gap-sm); flex-wrap: wrap; flex-shrink: 0; }
.track-bar:empty { display: none; }
.track-picker {
  display: flex; align-items: center; gap: var(--space-1-5);
  background: var(--bg-subtle); border: 1px solid var(--border-default);
  border-radius: var(--radius-md); padding: var(--space-1-5) var(--space-2-5);
  font-size: var(--text-xs); font-weight: var(--weight-bold);
}
.track-picker select {
  background: transparent; color: var(--fg-1); border: none;
  font-family: inherit; font-size: var(--text-xs); cursor: pointer; max-width: 160px;
}
.track-picker select option { background: var(--bg-card); color: var(--fg-1); }