/* Shared viewing: desktop dialog / mobile bottom sheet. */
#watchPartyModal {
  --party-surface: #161616;
  --party-ink: 244,244,244;
  --party-primary: #f0f0f0;
  --party-primary-ink: #111;
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  z-index: 30000 !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity .18s ease, visibility 0s .18s !important;
  font-family: "Segoe UI", Tahoma, Arial, sans-serif;
}
html[data-theme="light"] #watchPartyModal,
html[data-watch-theme="light"] #watchPartyModal,
html.watch-theme-light #watchPartyModal {
  --party-surface: #fff;
  --party-ink: 20,20,20;
  --party-primary: #181818;
  --party-primary-ink: #fff;
}
#watchPartyModal.is-open { visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; transition: opacity .18s ease, visibility 0s !important; }
#watchPartyModal *, #watchPartyModal *::before, #watchPartyModal *::after { box-sizing: border-box; }
#watchPartyModal [hidden] { display: none !important; }
#watchPartyModal .watch-party-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.35); }
#watchPartyModal .watch-party-panel {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%,-50%) translateY(8px);
  width: min(400px,calc(100% - 32px));
  max-height: calc(100dvh - 32px);
  margin: 0; padding: 24px;
  overflow: auto; overscroll-behavior: contain;
  border: 1px solid rgba(var(--party-ink),.12);
  border-radius: 18px;
  background: var(--party-surface);
  color: rgb(var(--party-ink));
  box-shadow: 0 20px 60px rgba(0,0,0,.24);
  outline: none;
  transition: transform .2s ease;
}
#watchPartyModal.is-open .watch-party-panel { transform: translate(-50%,-50%); }
#watchPartyModal .watch-party-header { display: flex; align-items: center; gap: 12px; margin: 0 0 22px; }
#watchPartyModal .watch-party-header h2 { flex: 1; min-width: 0; margin: 0; padding: 0; font: 600 20px/1.3 "Segoe UI",Tahoma,Arial,sans-serif; overflow-wrap: anywhere; color: inherit; }
#watchPartyModal .watch-party-close {
  display: grid; place-items: center; flex: 0 0 44px; height: 44px;
  margin: -10px -10px -10px 0; padding: 0;
  background: transparent; color: rgba(var(--party-ink),.6);
  border: 0; border-radius: 10px; cursor: pointer;
}
#watchPartyModal .watch-party-close span { position: relative; width: 18px; height: 18px; }
#watchPartyModal .watch-party-close span::before, #watchPartyModal .watch-party-close span::after {
  content: ''; position: absolute; top: 8px; left: 0; width: 18px; height: 1.5px;
  background: currentColor; transform: rotate(45deg);
}
#watchPartyModal .watch-party-close span::after { transform: rotate(-45deg); }
#watchPartyModal .watch-party-content { display: flex; flex-direction: column; gap: 18px; }
#watchPartyModal .watch-party-action, #watchPartyModal .watch-party-code {
  height: 48px; min-height: 48px; margin: 0; padding: 0 14px;
  border-radius: 11px; border: 1px solid transparent;
  font: 600 15px/1.2 "Segoe UI",Tahoma,Arial,sans-serif;
  text-transform: none; letter-spacing: normal;
}
#watchPartyModal .watch-party-action { width: 100%; cursor: pointer; text-align: center; }
#watchPartyModal .watch-party-action.is-primary { background: var(--party-primary); color: var(--party-primary-ink); }
#watchPartyModal .watch-party-action.is-secondary { width: auto; background: rgba(var(--party-ink),.08); color: inherit; }
#watchPartyModal .watch-party-action.is-outline { background: transparent; color: inherit; border-color: rgba(var(--party-ink),.24); }
#watchPartyModal .watch-party-join-form { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; margin: 0; }
#watchPartyModal .watch-party-code { width: 100%; min-width: 0; background: transparent; color: inherit; border-color: rgba(var(--party-ink),.24); font-weight: 400; font-size: 16px; }
#watchPartyModal .watch-party-code::placeholder { color: rgba(var(--party-ink),.48); }
#watchPartyModal .watch-party-code[aria-invalid="true"] { border-color: #c95a5a; }
#watchPartyModal button:focus-visible, #watchPartyModal input:focus-visible { outline: 2px solid rgba(var(--party-ink),.75); outline-offset: 3px; }
#watchPartyModal button:disabled, #watchPartyModal input:disabled { opacity: .5; cursor: wait; }
#watchPartyModal .watch-party-participants { padding: 18px 0 0; border-top: 1px solid rgba(var(--party-ink),.12); }
#watchPartyModal .watch-party-count { color: rgba(var(--party-ink),.55); font-size: 13px; margin-bottom: 12px; }
#watchPartyModal .watch-party-user-list { max-height: 220px; overflow-y: auto; overscroll-behavior: contain; }
#watchPartyModal .watch-party-member { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; min-height: 36px; padding: 6px 0; font-size: 15px; }
#watchPartyModal .watch-party-member > span:first-child { min-width: 0; overflow-wrap: anywhere; }
#watchPartyModal .watch-party-host { flex-shrink: 0; font-size: 12px; color: rgba(var(--party-ink),.5); }
#watchPartyModal .watch-party-status { margin: 16px 0 0; font-size: 13px; line-height: 1.45; color: rgba(var(--party-ink),.55); }
#watchPartyModal .watch-party-status.is-error { color: #d57575; }
#watchPartyModal .watch-party-content .watch-party-status { margin: 0; }
#watchPartyModal .watch-party-handle { display: none; }
#watchPartyModal .watch-party-copy-fallback { position: absolute; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; }
@media (hover:hover) {
  #watchPartyModal .watch-party-action:hover:not(:disabled) { filter: brightness(.93); }
  #watchPartyModal .watch-party-close:hover { background: rgba(var(--party-ink),.06); color: rgb(var(--party-ink)); }
}
@media (max-width:640px) {
  #watchPartyModal { top: var(--party-vtop,0px) !important; height: var(--party-vh,100dvh) !important; bottom: auto !important; }
  #watchPartyModal .watch-party-panel {
    top: auto; bottom: 0; left: 0; width: 100%;
    max-height: calc(var(--party-vh,100dvh) - 12px);
    padding: 18px 24px max(24px,env(safe-area-inset-bottom));
    border-radius: 22px 22px 0 0; border-bottom: 0;
    transform: translateY(24px);
  }
  #watchPartyModal.is-open .watch-party-panel { transform: translateY(0); }
  #watchPartyModal .watch-party-handle { display: block; width: 36px; height: 4px; margin: -5px auto 24px; border-radius: 4px; background: rgba(var(--party-ink),.3); }
  #watchPartyModal .watch-party-header { margin-bottom: 24px; }
  #watchPartyModal .watch-party-user-list { max-height: min(220px,30dvh); }
}
@media (prefers-reduced-motion:reduce) {
  #watchPartyModal, #watchPartyModal .watch-party-panel { transition: none !important; }
}