/* Komi Cinema — immersive, accessible dark/red viewing surfaces.
   Keeps media ownership, episode and room synchronization in the existing JS. */
#watchModal,
#watchPartyModal {
  padding: 12px !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(3,3,3, .94) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px);
}
#watchModal #watchModalContent,
#watchPartyModal.komi-party-room-active #watchPartyModalContent {
  box-sizing: border-box;
  width: calc(100vw - 24px) !important;
  max-width: none !important;
  height: calc(100dvh - 24px) !important;
  max-height: calc(100dvh - 24px) !important;
  margin: 0 auto !important;
  padding: clamp(16px, 1.55vw, 28px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #575757 #0e0e0e;
  background: radial-gradient(ellipse 60% 30% at 24% 0, rgba(87,87,87,.19), transparent 90%), #0c0c0c !important;
  border: 1px solid #3a3a3a !important;
  border-radius: 26px !important;
  box-shadow: 0 28px 100px rgba(0,0,0,.84) !important;
  animation: none !important;
}
#watchModal.komi-watch-fullscreen,
#watchPartyModal.komi-party-fullscreen {padding: 0 !important}
#watchModal.komi-watch-fullscreen #watchModalContent,
#watchPartyModal.komi-party-fullscreen #watchPartyModalContent {
  width: 100vw !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
}
#watchModal .komi-watch-stage {
  grid-template-columns: minmax(0, 1fr) clamp(275px, 23vw, 360px) !important;
  gap: clamp(12px, 1.3vw, 22px) !important;
  margin-top: 44px !important;
  align-items: start;
}
#watchModal .komi-watch-main {gap: 14px}
#watchModal .komi-player-heading {min-height: 44px; padding-right: 10px !important}
#watchModal .komi-player-heading h2 {font-size: clamp(21px, 2vw, 29px) !important; letter-spacing: -.5px}
#watchModal .komi-player-heading span {font-size: 14px !important}
#watchModal .player-wrapper {
  border: 1px solid rgba(215,215,215, .35) !important;
  border-radius: 22px !important;
  background: #030303 !important;
  box-shadow: 0 16px 60px #00000099 !important;
  overflow: hidden !important;
}
#watchModal .player-box {
  aspect-ratio: 16 / 9 !important;
  width: 100% !important;
  height: auto !important;
  max-height: 72dvh !important;
  border-radius: 0 !important;
  background: #020202 !important;
}
#watchModal .player-box video,
#watchModal .player-box iframe {
  width: 100% !important;
  height: 100% !important;
  max-height: 72dvh !important;
  object-fit: contain;
}
#watchModal .komi-watch-sidebar {
  border-radius: 22px !important;
  border: 1px solid #3b3b3b !important;
  padding: 20px !important;
  background: linear-gradient(160deg,#171717,#121212 76%) !important;
  max-height: calc(100dvh - 146px) !important;
}
#watchModal .komi-watch-side-heading h3 {font-size: 20px !important}
#watchModal .komi-watch-sidebar label {font-size: 13px}
#watchModal .komi-watch-sidebar input {min-height: 44px; font-size: 14px !important; border-radius: 12px !important}
#watchModal .komi-watch-sidebar .komi-episode-number {
  min-height: 52px;
  border-radius: 14px !important;
  font-size: 15px !important;
}
#watchModal .komi-watch-controls {
  padding: 14px !important;
  gap: 12px !important;
  border-radius: 18px !important;
  background: #161616 !important;
  border-color: #2f2f2f !important;
}
#watchModal .komi-watch-navbtn,
#watchModal .komi-watch-source select {
  min-height: 48px !important;
  font-size: 14px !important;
  border-radius: 13px !important;
}
#watchModal .komi-watch-help {font-size: 12px !important; line-height: 1.6}
#watchModal .komi-watch-expand,
#watchModal .modal-close {
  top: 20px !important;
  min-height: 42px;
  border-radius: 13px !important;
  background: #212121 !important;
  color: #ffffff;
  border: 1px solid #4e4e4e !important;
}
#watchModal .komi-watch-expand {right: 74px !important; padding: 10px 16px !important; font-size: 13px !important; font-weight: 700}
#watchModal .modal-close {right: 20px !important; width: 42px; height: 42px; font-size: 23px !important}
#watchModal .komi-watch-expand:hover,
#watchModal .modal-close:hover {background: #373737 !important; border-color: #eaeaea !important}

/* Watch Party — a true full-window room, not an oversized basic dialog. */
#watchPartyModal.komi-party-room-active .komi-party-shell {display:flex;flex-direction:column;min-height:100%;min-width:0;gap:20px}
#watchPartyModal .komi-party-room-header {
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding: 0 0 17px; border-bottom:1px solid #262626;
}
#watchPartyModal .komi-party-room-identity {min-width:0}
#watchPartyModal .komi-party-kicker {display:flex;align-items:center;gap:10px;color:#eaeaea;font-size:11px;font-weight:800;letter-spacing:2px;margin-bottom:8px}
#watchPartyModal .komi-party-role {font-size:11px;letter-spacing:0;padding:5px 10px;border-radius:999px;background:#262626;color:#eaeaea;border:1px solid #434343}
#watchPartyModal .komi-party-room-header h2 {margin:0;color:#ffffff;font-size:clamp(23px,2.15vw,34px);line-height:1.2;letter-spacing:-.6px;overflow-wrap:anywhere}
#watchPartyModal .komi-party-room-header p {margin:7px 0 0;color:#b5b5b5;font-size:14px;line-height:1.5;overflow-wrap:anywhere}
#watchPartyModal .komi-party-head-actions {display:flex;align-items:center;gap:10px;flex-shrink:0}
#watchPartyModal .komi-party-fullscreen-btn,
#watchPartyModal .komi-party-room-header .modal-close {
  display:inline-flex;position:static !important;align-items:center;justify-content:center;
  min-height:44px;border-radius:14px !important;padding:10px 15px;
  background:#212121;color:#f6f6f6;border:1px solid #454545;
  font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;
}
#watchPartyModal .komi-party-room-header .modal-close {width:44px;height:44px;padding:0;font-size:24px}
#watchPartyModal .komi-party-fullscreen-btn:hover,
#watchPartyModal .komi-party-room-header .modal-close:hover {background:#333333;border-color:#eaeaea}
#watchPartyModal .komi-party-room-layout {
  display:grid;grid-template-columns:minmax(0,1fr) clamp(340px,25vw,400px);
  gap:clamp(14px,1.4vw,25px);min-width:0;flex:1;align-items:start;
}
#watchPartyModal .komi-party-screen-panel {display:flex;flex-direction:column;gap:12px;min-width:0}
#watchPartyModal .komi-party-video-frame {
  position:relative;width:100%;aspect-ratio:16/9;max-height:72dvh;
  overflow:hidden;border:1px solid #434343;border-radius:23px;
  background:#030303;box-shadow:0 18px 55px #00000099;
}
#watchPartyModal .komi-party-video-frame video,
#watchPartyModal .komi-party-video-frame iframe {display:block;width:100%;height:100%;object-fit:contain;border:0}
#watchPartyModal #partyEmbedHint {
  color:#b2b2b2 !important;font-size:12px !important;line-height:1.65;
  margin:0;padding:12px 15px;border:1px solid #333333;
  background:#161616;border-radius:14px;
}
#watchPartyModal #partyStatus:not(:empty) {
  margin:0;padding:12px 15px;background:#202020;color:#eaeaea;
  border:1px solid #575757;border-radius:13px;font-size:13px;
}
#watchPartyModal .komi-party-source-panel {
  border:1px solid #2e2e2e;border-radius:18px;padding:17px;
  background:#151515;display:flex;flex-direction:column;gap:9px;
}
#watchPartyModal .komi-party-source-panel label {display:flex;flex-direction:column;gap:10px;font-size:14px;font-weight:750}
#watchPartyModal #partyEpisode {
  width:100%;min-height:48px;padding:10px 12px;
  border-radius:13px;border:1px solid #505050;
  background:#1e1e1e;color:#ffffff;font-size:14px;
}
#watchPartyModal .komi-party-social-panel {
  display:flex;flex-direction:column;min-width:0;min-height:420px;
  height: min(76dvh,900px);max-height:none;gap:14px;
  padding:20px;border:1px solid #343434;border-radius:22px;
  background:linear-gradient(180deg,#171717,#111111);
}
#watchPartyModal .komi-party-panel-heading {display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:12px;border-bottom:1px solid #2f2f2f}
#watchPartyModal .komi-party-panel-heading h3 {margin:0;font-size:19px;color:#ffffff}
#watchPartyModal .komi-party-panel-heading small {font-size:12px;color:#7d7d7d}
#watchPartyModal #partyChatBox {
  flex:1;min-height:170px;max-height:none !important;
  overflow-y:auto;scrollbar-color:#575757 #151515;
  border:1px solid #343434;border-radius:16px;background:#0e0e0e;
  padding:13px;display:flex;flex-direction:column;gap:9px;
}
#watchPartyModal #partyChatBox > div {
  font-size:14px;line-height:1.55;color:#e5e5e5;
  border:1px solid #292929;background:#191919;
  border-radius:13px;padding:10px 12px;overflow-wrap:anywhere;
}
#watchPartyModal #partyChat {
  display:flex;align-items:stretch;gap:8px;min-width:0;
}
#watchPartyModal #partyChat input,
#watchPartyModal #partyInvite input {
  flex:1;min-width:0;min-height:47px;box-sizing:border-box;
  border:1px solid #3f3f3f;border-radius:13px;background:#1e1e1e;
  color:#ffffff;padding:11px 12px;font-size:14px;
}
#watchPartyModal #partyChat button,
#watchPartyModal #partyInvite button,
#watchPartyModal #partyUnlock {
  min-height:47px;padding:11px 15px;background:#d7d7d7;
  color:#ffffff;border:1px solid #eaeaea;border-radius:13px;
  font-size:13px;font-weight:750;cursor:pointer;
}
#watchPartyModal .komi-party-reaction-title {font-size:12px;color:#7d7d7d;font-weight:750;margin:0 0 9px}
#watchPartyModal #partyReactions {display:flex;flex-wrap:wrap;gap:7px}
#watchPartyModal .party-react-btn {
  background:#202020;color:#ebebeb;border:1px solid #414141;
  padding:10px 13px;border-radius:12px;font-size:13px;font-weight:700;
  cursor:pointer;transition:background .16s,border-color .16s;
}
#watchPartyModal .party-react-btn:hover {background:#343434;border-color:#eaeaea;transform:none}
#watchPartyModal #partyInvite {display:flex;gap:8px;flex-wrap:wrap}
#watchPartyModal #partyInvite input {min-width:150px}
#watchPartyModal .komi-party-source-panel :focus-visible,
#watchPartyModal .komi-party-social-panel :focus-visible,
#watchPartyModal .komi-party-head-actions :focus-visible {outline:2px solid #eaeaea;outline-offset:3px}
#watchPartyModal .komi-party-room-header .modal-close[hidden],
#watchPartyModal #partyUnlock[hidden] {display:none !important}

/* Room browser (not watching) remains a comfortable centered dialog. */
#watchPartyModal:not(.komi-party-room-active) #watchPartyModalContent {
  width:min(760px,calc(100vw - 24px)) !important;
  max-width:760px !important;
  max-height:calc(100dvh - 32px);
  border-radius:24px;
  padding:28px;
}
#watchPartyModal:not(.komi-party-room-active) #partyRoomList {max-height:35dvh;overflow-y:auto}
@media(max-width:1050px) {
  #watchModal .komi-watch-stage {grid-template-columns:minmax(0,1fr) 265px !important;gap:12px !important}
  #watchPartyModal .komi-party-room-layout {grid-template-columns:minmax(0,1fr) 315px;gap:14px}
  #watchPartyModal .komi-party-social-panel {padding:15px}
}
@media(max-width:820px) {
  #watchModal .komi-watch-stage {grid-template-columns:minmax(0,1fr) !important;gap:14px !important}
  #watchModal .komi-watch-sidebar {max-height:none !important}
  #watchModal .komi-watch-sidebar .komi-episode-number-grid {grid-template-columns:repeat(auto-fill,minmax(56px,1fr)) !important}
  #watchModal .komi-player-heading {margin-top:5px}
  #watchPartyModal .komi-party-room-layout {grid-template-columns:minmax(0,1fr)}
  #watchPartyModal .komi-party-social-panel {height:auto;min-height:340px}
  #watchPartyModal #partyChatBox {min-height:190px;max-height:310px !important}
  #watchPartyModal .komi-party-video-frame {max-height:57dvh}
}
@media(max-width:620px) {
  #watchModal,#watchPartyModal {padding:6px !important}
  #watchModal #watchModalContent,
  #watchPartyModal.komi-party-room-active #watchPartyModalContent {
    width:calc(100vw - 12px) !important;height:calc(100dvh - 12px) !important;
    max-height:calc(100dvh - 12px) !important;
    border-radius:20px !important;padding:14px !important;
  }
  #watchModal.komi-watch-fullscreen #watchModalContent,
  #watchPartyModal.komi-party-fullscreen #watchPartyModalContent {
    width:100vw !important;height:100dvh !important;max-height:100dvh !important;border-radius:0 !important;
  }
  #watchModal .komi-watch-stage {margin-top:50px !important}
  #watchModal .komi-watch-main {gap:10px}
  #watchModal .komi-player-heading h2 {font-size:19px !important}
  #watchModal .player-wrapper {border-radius:17px !important}
  #watchModal .player-box {max-height:55dvh !important}
  #watchModal .komi-watch-controls {flex-wrap:wrap;padding:10px !important}
  #watchModal .komi-watch-source {flex:1 0 100%}
  #watchModal .komi-watch-navbtn {min-width:0;flex:1}
  #watchModal .komi-watch-sidebar {padding:14px !important;border-radius:18px !important}
  #watchModal .komi-watch-expand {top:14px !important;right:64px !important;padding:9px 11px !important}
  #watchModal .modal-close {top:14px !important;right:14px !important}
  #watchPartyModal .komi-party-room-header {align-items:flex-start}
  #watchPartyModal .komi-party-room-header h2 {font-size:22px}
  #watchPartyModal .komi-party-room-header p {font-size:12px}
  #watchPartyModal .komi-party-head-actions {gap:7px}
  #watchPartyModal .komi-party-fullscreen-btn {padding:10px 11px;font-size:20px}
  #watchPartyModal .komi-party-fullscreen-btn span {display:none}
  #watchPartyModal .komi-party-video-frame {border-radius:17px;max-height:52dvh}
  #watchPartyModal .komi-party-social-panel {padding:13px;border-radius:17px}
  #watchPartyModal #partyChat input {min-width:0}
  #watchPartyModal #partyChat button {padding:10px 12px}
}
@media(prefers-reduced-motion:reduce) {
  #watchPartyModal .party-react-btn {transition:none}
}