/* Watch Party join line: red name, no lobby capsule / bell. */
.row.cc-wp-party-join,
html.cc-watch-party .row.cc-wp-party-join {
  background: transparent !important;
  border: 0 !important;
  margin: 4px 0 !important;
  padding: 0 !important;
}
.row.cc-wp-party-join .col-msg {
  display: block !important;
  background: none !important;
  border: 0 !important;
  padding: 2px 8px 2px 12px !important;
}
.row.cc-wp-party-join .cc-wp-party-join-name {
  color: #ff0000 !important;
  font-weight: 800 !important;
  font-style: normal !important;
}
.row.cc-wp-party-join .cc-wp-party-join-text {
  color: #c5c8ce !important;
  font-style: italic !important;
  font-weight: 500 !important;
}
.row.cc-wp-party-join .system-msg,
.row.system-message.cc-wp-party-join .system-msg {
  display: inline !important;
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  color: inherit !important;
  font-weight: inherit !important;
  font-style: inherit !important;
  gap: 0 !important;
}
.row.cc-wp-party-join .system-msg::before,
.row.system-message.cc-wp-party-join .system-msg::before {
  content: none !important;
  display: none !important;
}

/* Watch Party theater — hide lobby chrome; right column is Watch Party chat only. */

html.cc-watch-party,
html.cc-watch-party body {
  background: #1a1d24 !important;
  overflow: hidden !important;
}

html.cc-watch-party .top,
html.cc-watch-party .chat-head,
html.cc-watch-party #ccRoomPicker,
html.cc-watch-party #rightSidebar,
html.cc-watch-party #miniCamDock,
html.cc-watch-party #miniCamDockWrap,
html.cc-watch-party .hyperbeam-window,
html.cc-watch-party #pollsBtn,
html.cc-watch-party #pollsBadge,
html.cc-watch-party #ccOpenChallenges,
html.cc-watch-party #serverPingBtn,
html.cc-watch-party #chatHeadMediaControls,
html.cc-watch-party #appVersionDisplay,
html.cc-watch-party #pollsBar {
  display: none !important;
}

html.cc-watch-party .app,
html.cc-watch-party #app {
  display: block !important;
  grid-template-columns: none !important;
  height: 100vh !important;
  min-height: 100vh !important;
  padding: 0 !important;
  gap: 0 !important;
  background: #1a1d24 !important;
  overflow: hidden !important;
}

html.cc-watch-party main.panel {
  position: fixed !important;
  top: auto !important;
  right: 0 !important;
  bottom: 0 !important;
  left: var(--cc-wp-people-w, 248px) !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  height: var(--cc-wp-chat-h, 260px) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-top: 1px solid #2a2f38 !important;
  border-left: 0 !important;
  border-radius: 0 !important;
  background: #1e222a !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  z-index: 400001 !important;
  box-shadow: none !important;
}

/* The chat panel is a fixed size — there is no drag-to-resize handle. */
#caWpChatResize,
.ca-wp-chat-resize,
html.cc-watch-party #caWpChatResize,
html.cc-watch-party .ca-wp-chat-resize {
  display: none !important;
}

html.cc-watch-party.cc-wp-chat-off main.panel {
  display: none !important;
}
html.cc-watch-party.cc-wp-chat-off #caWatchPartyStage {
  bottom: var(--cc-wp-pad, 12px) !important;
}
html.cc-watch-party.cc-wp-chat-off #caWpPlaylist {
  bottom: 0 !important;
}

html.cc-watch-party.cc-wp-theater main.panel,
html.cc-watch-party.ca-wp-theater main.panel {
  display: none !important;
}

html.cc-watch-party #ccRoomChatHost,
html.cc-watch-party #chat {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  background: #1e222a !important;
  border: 0 !important;
}

html.cc-watch-party #ccRoomChatHost {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

html.cc-watch-party #chat {
  font-size: 13px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: 4px 8px 8px 14px !important;
  height: auto !important;
}

html.cc-watch-party #chat > .row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 8px !important;
  margin: 2px 0 !important;
  padding: 1px 4px !important;
  max-width: 100% !important;
  width: 100% !important;
  min-width: 0 !important;
  align-items: start !important;
}

html.cc-watch-party #chat .col-msg,
html.cc-watch-party #chat .col-msg span,
html.cc-watch-party #chat .col-msg .cc-msg-line,
html.cc-watch-party #chat .col-msg .cc-msg-body,
html.cc-watch-party #chat .col-msg .msg-username,
html.cc-watch-party #chat .col-msg .system-msg {
  font-size: 13px !important;
  line-height: 1.35 !important;
  white-space: pre-wrap !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}

html.cc-watch-party #chat .col-msg {
  overflow: visible !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

html.cc-watch-party #chat .col-msg span[style*="font-size"] {
  font-size: 13px !important;
}

html.cc-watch-party #chat .col-time {
  font-size: 11px !important;
  padding-left: 6px !important;
  white-space: nowrap !important;
}

html.cc-watch-party #chat .msg-username {
  max-width: 100% !important;
  flex-wrap: wrap !important;
}

html.cc-watch-party #chat .msg-pet-badge,
html.cc-watch-party #chat .user-pet-badge,
html.cc-watch-party #chat .cc-pet,
html.cc-watch-party #chat .cc-pet-sprite-img {
  display: none !important;
}

html.cc-watch-party #msg {
  font-size: 14px !important;
}

html.cc-watch-party #composer {
  flex: 0 0 56px !important;
  height: 56px !important;
  min-height: 56px !important;
  margin: 0 !important;
  padding: 8px 12px !important;
  background: #1e222a !important;
  border-top: 1px solid #2a2f38 !important;
  display: flex !important;
  flex-direction: column !important;
}

html.cc-watch-party #composer .toolbar {
  display: none !important;
}

html.cc-watch-party #composer .input-row {
  flex: 1 1 auto;
  min-height: 0;
  display: flex !important;
  align-items: stretch !important;
  gap: 8px;
}

html.cc-watch-party #msg {
  height: 100% !important;
  min-height: 0 !important;
  background: #383a40 !important;
  border: 0 !important;
  color: #dbdee1 !important;
  border-radius: 8px !important;
}

html.cc-watch-party #send {
  background: var(--cc-theme, #5865f2) !important;
  border: 0 !important;
  color: #fff !important;
  border-radius: 8px !important;
  align-self: stretch !important;
}

#caWpClearChat {
  display: none !important;
}

html.cc-watch-party #caWpClearChat:not([hidden]) {
  display: inline-flex !important;
  align-items: center;
  align-self: stretch !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: #3f1212 !important;
  color: #fff !important;
  font-weight: 800 !important;
  font-size: 11px !important;
  padding: 0 10px !important;
  cursor: pointer;
}

#caWatchPartyStage,
#caWpDock,
#caWatchPartyBar,
#caWpChatTabs,
#caWpAnnounce {
  display: none;
}

html.cc-watch-party #caWatchPartyBar {
  display: none !important;
}

html.cc-watch-party #caWatchPartyBar .ca-wp-bar-name {
  font-weight: 800;
  font-size: 15px;
  color: #fff;
  line-height: 1.2;
}

html.cc-watch-party #caWatchPartyBar .ca-wp-bar-online {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
  color: #9aa0a6;
  font-size: 12px;
  font-weight: 600;
}

html.cc-watch-party #caWatchPartyBar .ca-wp-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #32d74b;
  box-shadow: 0 0 6px #32d74b;
}

html.cc-watch-party #caWatchPartyBar .ca-wp-bar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

html.cc-watch-party #caWatchPartyLeave,
html.cc-watch-party .ca-wp-leave,
html.cc-watch-party #caWpWatchIframe,
html.cc-watch-party .ca-wp-iframe-btn {
  border: 1px solid var(--cc-theme, #ff2a2a);
  background: var(--cc-theme, #c40000);
  color: #fff;
  border-radius: 8px;
  padding: 6px 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

html.cc-watch-party #caWpWatchIframe,
html.cc-watch-party .ca-wp-iframe-btn {
  background: #1a2436;
  border-color: var(--cc-theme, #6aa7ff);
}

html.cc-watch-party #caWpChatTabs {
  display: flex !important;
  flex: 0 0 36px !important;
  align-items: stretch;
  gap: 6px;
  padding: 4px 12px 4px 16px;
  background: #171a21 !important;
  border-bottom: 1px solid #2a2f38 !important;
  overflow-x: auto;
  overflow-y: hidden;
}

html.cc-watch-party #caWpChatTabs .ca-wp-chat-tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 10px;
  white-space: nowrap;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #9aa0a6;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  position: relative;
}

html.cc-watch-party #caWpChatTabs .ca-wp-chat-tab.ca-wp-dm-tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px 0 10px;
  max-width: 160px;
}

html.cc-watch-party #caWpChatTabs .ca-wp-dm-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.cc-watch-party #caWpChatTabs .ca-wp-dm-close {
  font-size: 14px;
  line-height: 1;
  opacity: .7;
}

html.cc-watch-party #caWpChatTabs .ca-wp-chat-tab.is-flash {
  animation: caWpDmFlash .9s linear infinite;
}

@keyframes caWpDmFlash {
  50% { opacity: .35; }
}

html.cc-watch-party #caWpChatTabs .ca-wp-chat-tab.is-on {
  background: #313338;
  color: #fff;
}

html.cc-watch-party #caWpChatTabs .ca-wp-tab-unread {
  position: absolute;
  top: 2px;
  right: 6px;
  min-width: 14px;
  height: 14px;
  padding: 0 4px;
  border-radius: 999px;
  background: #c40000;
  color: #fff;
  font-size: 9px;
  line-height: 14px;
  font-weight: 800;
}

html.cc-watch-party #caWpAnnounce {
  display: none;
  flex: 0 0 auto;
  padding: 8px 12px 8px 16px;
  background: #111827 !important;
  border-bottom: 1px solid #1e3a5f !important;
}

html.cc-watch-party #caWpAnnounce.is-on {
  display: block !important;
}

html.cc-watch-party #caWpAnnounce:not(.is-controller) .ca-wp-ann-label,
html.cc-watch-party #caWpAnnounce:not(.is-controller) .ca-wp-ann-row {
  display: none;
}

html.cc-watch-party #caWpAnnounce .ca-wp-ann-label {
  color: #93c5fd;
  font-size: 10px;
  font-weight: 800;
  margin-bottom: 4px;
}

html.cc-watch-party #caWpAnnounce .ca-wp-ann-row {
  display: flex;
  gap: 6px;
  align-items: stretch;
}

html.cc-watch-party #caWpAnnounceText {
  flex: 1 1 auto;
  min-width: 0;
  height: 32px;
  border: 0;
  border-radius: 6px;
  background: #1e293b;
  color: #fff;
  padding: 0 8px;
  font-size: 12px;
}

html.cc-watch-party #caWpAnnounceSend {
  flex: 0 0 auto;
  border: 0;
  border-radius: 6px;
  background: #2563eb;
  color: #fff;
  font-weight: 800;
  font-size: 11px;
  padding: 0 10px;
  cursor: pointer;
}

html.cc-watch-party #caWpAnnounce .ca-wp-lock-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

html.cc-watch-party #caWpJoinLock,
html.cc-watch-party #caWpCopyInvite {
  flex: 0 0 auto;
  border: 0;
  border-radius: 6px;
  background: #374151;
  color: #fff;
  font-weight: 800;
  font-size: 11px;
  padding: 6px 10px;
  cursor: pointer;
}

html.cc-watch-party #caWpJoinLock.is-locked {
  background: #b45309;
}

html.cc-watch-party #caWpCopyInvite {
  background: #1d4ed8;
}

html.cc-watch-party #caWpLockHint {
  color: #fbbf24;
  font-size: 11px;
  font-weight: 700;
}

#chat a.js-open-watch-party,
html.cc-watch-party #chat a.js-open-watch-party {
  color: #60a5fa !important;
  text-decoration: underline !important;
  font-weight: 800 !important;
}

html.cc-watch-party .cc-wp-iframe-header,
html.cc-watch-party .cc-wp-iframe-resize,
html.cc-watch-party #caWatchPartyStage > .cc-wp-iframe-header,
html.cc-watch-party #caWatchPartyStage > .cc-wp-iframe-resize {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  flex: 0 0 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
}

html.cc-watch-party #caWatchPartyStage {
  display: flex !important;
  flex-direction: column !important;
  position: fixed !important;
  top: calc(var(--cc-wp-top-h, 58px) + var(--cc-wp-pad, 12px)) !important;
  left: calc(var(--cc-wp-people-w, 248px) + var(--cc-wp-pad, 12px)) !important;
  right: calc(var(--cc-wp-playlist-w, 300px) + var(--cc-wp-pad, 12px)) !important;
  bottom: calc(var(--cc-wp-chat-h, 260px) + var(--cc-wp-pad, 12px)) !important;
  width: auto !important;
  z-index: 400000 !important;
  background: #0e1218 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 12px !important;
  border: 1px solid #2a2f38 !important;
  box-shadow: 0 8px 28px rgba(0,0,0,.35);
}

html.cc-watch-party.cc-wp-theater #caWatchPartyStage,
html.cc-watch-party.ca-wp-theater #caWatchPartyStage {
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  border-radius: 0 !important;
  border: 0 !important;
}

html.cc-watch-party #caWatchPartyStage .ca-wp-frame {
  position: relative !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  width: 100% !important;
  background: #000 !important;
  overflow: hidden !important;
}

html.cc-watch-party.cc-wp-chat-off #caWatchPartyStage .ca-wp-frame {
  flex: 1 1 auto !important;
}

html.cc-watch-party #caWatchPartyMount {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: #000 !important;
  overflow: hidden !important;
}

html.cc-watch-party #caWatchPartyMount > * {
  position: absolute !important;
  border: 0 !important;
}

html.cc-watch-party #caWatchPartyMount video,
html.cc-watch-party #caWatchPartyMount canvas,
html.cc-watch-party #caWatchPartyMount iframe {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: fill !important;
  background: #000 !important;
}

html.cc-watch-party #caWatchPartyStage .ca-wp-loading {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #ddd;
  font-size: 14px;
  font-weight: 700;
  background: #07090d;
  pointer-events: none;
}

html.cc-watch-party #caWpViewLock {
  position: absolute;
  inset: 0;
  z-index: 20;
  background: transparent;
  cursor: default;
  pointer-events: auto;
}
html.cc-watch-party #caWpViewLock.is-player-locked {
  cursor: not-allowed;
}
html.cc-watch-party.cc-wp-player-locked #caWatchPartyMount,
html.cc-watch-party.cc-wp-player-locked #caWatchPartyMount * {
  pointer-events: none !important;
}

html.cc-watch-party #caWpDock {
  display: none !important;
}

html.cc-watch-party.cc-wp-theater #caWpDock,
html.cc-watch-party.ca-wp-theater #caWpDock {
  right: 0 !important;
}

html.cc-watch-party .ca-wp-dock-left,
html.cc-watch-party .ca-wp-dock-mid,
html.cc-watch-party .ca-wp-dock-right {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

html.cc-watch-party .ca-wp-dock-mid {
  flex: 1 1 auto;
  justify-content: center;
  height: 48px;
  max-height: 48px;
  overflow: hidden;
}

html.cc-watch-party #caWpAvatars {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  max-height: 48px;
  overflow: hidden;
}

html.cc-watch-party #caWpAvatars .ca-wp-av,
html.cc-watch-party #caWpAvatars .ca-wp-av-add,
html.cc-watch-party #caWpAvatars .ca-wp-av-more {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  max-width: 40px !important;
  max-height: 40px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: #2e2e33 !important;
  cursor: pointer;
  position: relative;
  overflow: hidden !important;
  flex: 0 0 40px !important;
  color: #ddd;
  font-size: 13px;
}

html.cc-watch-party #caWpAvatars .ca-wp-av img {
  width: 40px !important;
  height: 40px !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  display: block !important;
}

html.cc-watch-party #caWpAvatars .ca-wp-av:hover {
  box-shadow: 0 0 0 2px #ff2a2a;
}

html.cc-watch-party .ca-wp-av.has-remote {
  box-shadow: 0 0 0 2px #ff2a2a;
}

html.cc-watch-party .ca-wp-remote {
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 22px;
  height: 22px;
  pointer-events: none;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23fff' stroke='%23000' stroke-width='1.8' stroke-linejoin='round' d='M4.2 3.2 4.2 18.4 8.6 14.4 12.1 22.1 15.1 20.7 11.4 12.7 17.3 12.7Z'/></svg>") center / contain no-repeat;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.7));
  z-index: 2;
}

html.cc-watch-party .ca-wp-av-add {
  color: #ddd;
  font-size: 13px;
}

html.cc-watch-party .ca-wp-av-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  cursor: default;
}

html.cc-watch-party .ca-wp-power,
html.cc-watch-party .ca-wp-dock-right button {
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
}

html.cc-watch-party .ca-wp-dock-right button.is-on,
html.cc-watch-party .ca-wp-dock-right button:hover,
html.cc-watch-party .ca-wp-power:hover {
  background: #2a2a30;
}

html.cc-watch-party #caWpLock {
  color: #f5c518;
}

html.cc-watch-party .ca-wp-report {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 14px;
  border-radius: 8px;
  background: #e57373;
  color: #111 !important;
  font-weight: 800;
  font-size: 14px;
  text-decoration: none;
}

html.cc-watch-party .ca-wp-requests,
html.cc-watch-party .ca-wp-logout {
  height: 40px;
  padding: 0 14px;
  border: 0;
  border-radius: 8px;
  background: #2e2e33;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
}

html.cc-watch-party .ca-wp-requests.is-on {
  background: #1a5a1a;
}

html.cc-watch-party .ca-wp-requests:disabled {
  opacity: 0.85;
  cursor: default;
}

html.cc-watch-party .ca-wp-share {
  height: 40px;
  padding: 0 14px;
  border: 0;
  border-radius: 8px;
  background: #2e2e33;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
}

html.cc-watch-party .ca-wp-share.is-on {
  background: #1a5a1a;
}

html.cc-watch-party #caWpShareLayer {
  position: absolute;
  inset: 0;
  z-index: 30;
  background: #000;
  pointer-events: none;
}

html.cc-watch-party #caWpShareLayer.ca-wp-share-waiting,
html.cc-wp-iframe #caWpShareLayer.ca-wp-share-waiting {
  background: transparent;
  pointer-events: none;
}

html.cc-watch-party #caWpShareLayer.ca-wp-share-waiting video,
html.cc-wp-iframe #caWpShareLayer.ca-wp-share-waiting video {
  opacity: 0;
}

html.cc-watch-party.cc-wp-sharing #caWpShareLayer,
html.cc-wp-iframe.cc-wp-sharing #caWpShareLayer {
  pointer-events: auto;
}

html.cc-watch-party .ca-wp-share-wait,
html.cc-wp-iframe .ca-wp-share-wait {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  padding: 8px 14px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  pointer-events: none;
  white-space: nowrap;
}

html.cc-watch-party .ca-wp-share-wait[hidden],
html.cc-wp-iframe .ca-wp-share-wait[hidden] {
  display: none !important;
}

html.cc-watch-party #caWpShareLayer .screen-sound-overlay,
html.cc-wp-iframe #caWpShareLayer .screen-sound-overlay {
  display: none !important;
}

html.cc-watch-party #caWpAudioPick,
html.cc-wp-iframe #caWpAudioPick {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  pointer-events: auto;
}

html.cc-watch-party #caWpAudioPick[hidden],
html.cc-wp-iframe #caWpAudioPick[hidden] {
  display: none !important;
}

html.cc-watch-party .ca-wp-audio-pick-card,
html.cc-wp-iframe .ca-wp-audio-pick-card {
  width: min(440px, calc(100% - 28px));
  padding: 16px 18px;
  border-radius: 10px;
  background: #141820;
  color: #eee;
  border: 1px solid #2a3344;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

html.cc-watch-party .ca-wp-audio-pick-card h3,
html.cc-wp-iframe .ca-wp-audio-pick-card h3 {
  margin: 0 0 8px;
  font-size: 16px;
}

html.cc-watch-party .ca-wp-audio-pick-card p,
html.cc-wp-iframe .ca-wp-audio-pick-card p {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.4;
  color: #c8d0dc;
}

html.cc-watch-party .ca-wp-audio-opt,
html.cc-wp-iframe .ca-wp-audio-opt {
  display: block;
  margin: 8px 0;
  font-size: 13px;
  font-weight: 600;
}

html.cc-watch-party #caWpAudioDevice,
html.cc-wp-iframe #caWpAudioDevice {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid #2a3344;
  background: #0d1424;
  color: #eee;
}

html.cc-watch-party .ca-wp-audio-pick-actions,
html.cc-wp-iframe .ca-wp-audio-pick-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}

html.cc-watch-party .ca-wp-audio-pick-actions button,
html.cc-wp-iframe .ca-wp-audio-pick-actions button {
  height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: 8px;
  background: #1a5a1a;
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}

html.cc-watch-party .ca-wp-audio-pick-actions .ca-wp-audio-cancel,
html.cc-wp-iframe .ca-wp-audio-pick-actions .ca-wp-audio-cancel {
  background: #333;
}

html.cc-watch-party.cc-wp-sharing #caWatchPartyMount,
html.cc-wp-iframe.cc-wp-sharing #caWatchPartyMount {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

html.cc-watch-party.cc-wp-sharing #caWpShareLayer,
html.cc-wp-iframe.cc-wp-sharing #caWpShareLayer {
  display: block !important;
}

html.cc-watch-party #caWpShareAudio,
html.cc-wp-iframe #caWpShareAudio {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

html.cc-watch-party .ca-wp-share-sound,
html.cc-wp-iframe .ca-wp-share-sound {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 9;
  pointer-events: auto;
  height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 8px;
  background: #1a5a1a;
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
}

html.cc-watch-party .ca-wp-share-sound[hidden],
html.cc-wp-iframe .ca-wp-share-sound[hidden] {
  display: none !important;
}

html.cc-watch-party #caWpShareLayer[hidden] {
  display: none !important;
}

html.cc-watch-party #caWpShareLayer video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

html.cc-watch-party .ca-wp-share-tag {
  position: absolute;
  left: 10px;
  bottom: 10px;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

html.cc-watch-party #caWpViewLock.ca-wp-view-only::after {
  content: 'View only';
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.55);
  color: #ddd;
  font-size: 12px;
  font-weight: 700;
  pointer-events: none;
}

html.cc-watch-party .ca-wp-logout {
  background: #5a0000;
}

html.cc-watch-party .ca-wp-vol-ico {
  font-size: 16px;
  line-height: 1;
}

html.cc-watch-party #caWpVolume {
  width: 110px;
  accent-color: var(--cc-theme, #ff2a2a);
}

html.cc-watch-party #caWpMore.ca-wp-more {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 0;
}

html.cc-watch-party #caWpMore.ca-wp-more span {
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 1px;
  background: #fff;
}

html.cc-watch-party #caWpMoreMenu {
  position: absolute;
  right: 10px;
  bottom: calc(100% + 10px);
  width: 248px;
  padding: 6px 0;
  background: #2a2d32;
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55);
  z-index: 20;
  overflow: hidden;
}

html.cc-watch-party #caWpMoreMenu[hidden] {
  display: none !important;
}

html.cc-watch-party .ca-wp-menu-row,
html.cc-watch-party .ca-wp-menu-head {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 42px;
  padding: 0 16px;
  border: 0;
  background: transparent;
  color: #fff;
  font: 14px/1.2 system-ui, Segoe UI, sans-serif;
  text-align: left;
  cursor: pointer;
  gap: 8px;
}

html.cc-watch-party .ca-wp-menu-head {
  border-bottom: 1px solid #3a3d44;
  margin-bottom: 2px;
  font-weight: 600;
}

html.cc-watch-party .ca-wp-menu-back {
  font-size: 18px;
  line-height: 1;
  margin-right: 4px;
  color: #e8eaed;
}

html.cc-watch-party .ca-wp-menu-row:hover,
html.cc-watch-party .ca-wp-menu-head:hover {
  background: #3a3d44;
}

html.cc-watch-party .ca-wp-menu-label {
  flex: 1 1 auto;
  color: #fff;
}

html.cc-watch-party .ca-wp-menu-val {
  flex: 0 0 auto;
  color: #c4c6ca;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

html.cc-watch-party .ca-wp-chev {
  color: #c4c6ca;
  font-size: 16px;
}

html.cc-watch-party .ca-wp-menu-check {
  width: 18px;
  flex: 0 0 18px;
  color: #fff;
  font-size: 14px;
}

html.cc-watch-party .ca-wp-star {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
}

html.cc-watch-party .ca-wp-toggle {
  position: relative;
  width: 36px;
  height: 20px;
  flex: 0 0 36px;
  margin-left: auto;
  border-radius: 999px;
  background: #4a4d52;
}

html.cc-watch-party .ca-wp-toggle i {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: left 0.15s ease;
}

html.cc-watch-party .ca-wp-toggle.is-on i {
  left: 18px;
}

html.cc-watch-party #caWpMemberCard[hidden] {
  display: none !important;
}

html.cc-watch-party #caWpAnnounce,
html.cc-watch-party #caWpAnnounce.is-on,
html.cc-watch-party .ca-wp-share-tag {
  display: none !important;
}

/* Player chrome */
html.cc-watch-party .ca-wp-player-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex: 0 0 44px;
  height: 44px;
  padding: 0 14px;
  background: #12151c;
  border-bottom: 1px solid #252a33;
  color: #c5c8ce;
  overflow: visible;
  z-index: 20;
}
html.cc-watch-party .ca-wp-mode {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #e8eaed;
}
html.cc-watch-party .ca-wp-mode-dot,
html.cc-watch-party #caWpModeDot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e5484d;
  box-shadow: 0 0 8px #e5484d;
}
html.cc-watch-party .ca-wp-remote-box {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
html.cc-watch-party #caWpRemoteStatus {
  color: #9aa0a6;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
html.cc-watch-party #caWpTakeRemote {
  border: 0;
  border-radius: 999px;
  background: #6d5cff;
  color: #fff;
  font-weight: 800;
  font-size: 12px;
  padding: 6px 12px;
  cursor: pointer;
}
html.cc-watch-party .ca-wp-remote-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
html.cc-watch-party .ca-wp-chat-toggle,
html.cc-watch-party #caWpChatToggle {
  border: 0;
  border-radius: 8px;
  background: #2a3140;
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  padding: 6px 10px;
  cursor: pointer;
  white-space: nowrap;
}
html.cc-watch-party.cc-wp-chat-off #caWpChatToggle {
  background: #3b5bfd;
}
html.cc-watch-party .ca-wp-broadcast-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
html.cc-watch-party .ca-wp-broadcast-wrap[hidden] {
  display: none !important;
}
html.cc-watch-party #caWpBroadcast {
  border: 0;
  border-radius: 8px;
  background: linear-gradient(180deg, #ffe082, #ffc107 55%, #ffb300);
  color: #1a1200;
  font-weight: 800;
  font-size: 12px;
  padding: 6px 12px;
  cursor: pointer;
  white-space: nowrap;
}
html.cc-watch-party #caWpBroadcastReset {
  border: 1px solid #4a5568;
  border-radius: 8px;
  background: #2a3140;
  color: #e7ecf3;
  font-weight: 800;
  font-size: 12px;
  padding: 6px 12px;
  cursor: pointer;
  white-space: nowrap;
}
html.cc-watch-party #caWpBroadcastReset:hover {
  background: #3a4454;
  border-color: #9aa0a6;
}
html.cc-watch-party #caWpBroadcast:hover,
html.cc-watch-party #caWpBroadcast.is-on {
  filter: brightness(1.08);
  box-shadow: 0 0 0 2px rgba(255, 193, 7, .35);
}
#caWpBroadcastPop,
.ca-wp-broadcast-pop {
  position: fixed;
  z-index: 2000000;
  min-width: 280px;
  padding: 12px;
  background: #1a2233;
  border: 1px solid #ffc107;
  border-radius: 12px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, .55);
  color: #e7ecf3;
}
#caWpBroadcastPop[hidden] {
  display: none !important;
}
#caWpBroadcastPop .ca-wp-broadcast-label {
  font-size: 12px;
  font-weight: 800;
  color: #ffc107;
  margin-bottom: 8px;
}
#caWpBroadcastPop .ca-wp-broadcast-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
#caWpBroadcastPop #caWpBroadcastText {
  flex: 1 1 auto;
  min-width: 0;
  height: 34px;
  padding: 0 10px;
  border: 1px solid #3a4660;
  border-radius: 8px;
  background: #0f1524;
  color: #fff;
  font-size: 13px;
}
#caWpBroadcastPop #caWpBroadcastSend {
  flex: 0 0 auto;
  height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: #ffc107;
  color: #1a1200;
  font-weight: 800;
  cursor: pointer;
}
#caWpBroadcastPop .ca-wp-broadcast-hint {
  margin-top: 8px;
  font-size: 11px;
  color: #9aa0a6;
}
html.cc-watch-party .ca-wp-pass-wrap {
  position: relative;
}
html.cc-watch-party #caWpPassRemote {
  border: 0;
  border-radius: 8px;
  background: #2a3140;
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  padding: 6px 10px;
  cursor: pointer;
}
html.cc-watch-party #caWpPassMenu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 160px;
  padding: 6px 0;
  background: #232833;
  border: 1px solid #343b48;
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0,0,0,.45);
  z-index: 400020;
}
html.cc-watch-party #caWpPassMenu[hidden] {
  display: none !important;
}
html.cc-watch-party .ca-wp-pass-item {
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
  color: #e8eaed;
  text-align: left;
  padding: 8px 12px;
  font-size: 13px;
  cursor: pointer;
}
html.cc-watch-party .ca-wp-pass-item:hover {
  background: #2e3542;
}
html.cc-watch-party .ca-wp-pass-empty {
  padding: 10px 12px;
  color: #9aa0a6;
  font-size: 12px;
}
html.cc-watch-party .ca-wp-player-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  position: relative;
  flex: 0 0 56px;
  height: 56px;
  left: auto;
  right: auto;
  bottom: auto;
  padding: 0 14px;
  background: #12151c;
  border-top: 1px solid #252a33;
  color: #e8eaed;
  z-index: 6;
  pointer-events: auto;
  box-sizing: border-box;
}
html.cc-watch-party .ca-wp-player-foot .ca-wp-live,
html.cc-watch-party .ca-wp-player-foot .ca-wp-foot-actions {
  pointer-events: auto;
}
html.cc-watch-party .ca-wp-player-foot:not(.is-live) .ca-wp-live {
  display: none;
}
html.cc-watch-party .ca-wp-live {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 12px;
  font-weight: 600;
  color: #d7dbe2;
}
html.cc-watch-party .ca-wp-live-pill {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 7px;
  border-radius: 999px;
  background: #e5484d;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
}
html.cc-watch-party .ca-wp-foot-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
html.cc-watch-party #caWpStopShare {
  border: 0;
  border-radius: 8px;
  background: #e5484d;
  color: #fff;
  font-weight: 800;
  font-size: 12px;
  padding: 6px 12px;
  cursor: pointer;
}
html.cc-watch-party #caWpPlayerLock {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 10px;
  background: #2a3140;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: 0 0 40px;
}
html.cc-watch-party #caWpPlayerLock:hover:not(:disabled) {
  background: #353c4b;
}
html.cc-watch-party #caWpPlayerLock.is-locked {
  color: #f0c14b;
  background: #3a3214;
}
html.cc-watch-party #caWpPlayerLock:disabled {
  cursor: default;
  opacity: 0.92;
}
html.cc-watch-party #caWpPlayerVol {
  width: 110px;
  accent-color: #fff;
}
html.cc-watch-party #caWpPlayerFull {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 10px;
  background: #2a3140;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
}
html.cc-watch-party #caWpPlayerFull:hover {
  background: #353c4b;
}
html.cc-watch-party .ca-wp-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid #2a3140;
  border-top-color: #6d5cff;
  border-radius: 50%;
  animation: caWpSpin 0.8s linear infinite;
}
@keyframes caWpSpin {
  to { transform: rotate(360deg); }
}
html.cc-watch-party .ca-wp-loading-text {
  color: #c5c8ce;
  font-size: 13px;
}

/* Top bar */
#caWpTopBar {
  display: none;
}
html.cc-watch-party #caWpTopBar {
  display: flex !important;
  align-items: center;
  gap: 10px;
  position: fixed !important;
  top: 0 !important;
  left: var(--cc-wp-people-w, 248px) !important;
  right: 0 !important;
  height: auto !important;
  min-height: 58px;
  padding: 6px 14px;
  background: #1a1d24 !important;
  border-bottom: 1px solid #2a2f38;
  color: #e8eaed;
  z-index: 400005;
  box-sizing: border-box;
}
html.cc-watch-party .ca-wp-back,
html.cc-watch-party .ca-wp-icon-btn {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 10px;
  background: #262b36;
  color: #e8eaed;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
}
html.cc-watch-party .ca-wp-icon-btn.is-on,
html.cc-watch-party #caWpPlaylistToggle.is-on {
  background: #3b4252;
  color: #fff;
}
html.cc-watch-party .ca-wp-top-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #e5484d;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 34px;
}
html.cc-watch-party .ca-wp-top-titles {
  min-width: 0;
  flex: 0 1 260px;
  max-width: 280px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
html.cc-watch-party .ca-wp-head-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
}
html.cc-watch-party .ca-wp-head-tab {
  height: 22px;
  padding: 0 10px;
  border: 0;
  border-radius: 6px;
  background: #262b36;
  color: #9aa0a6;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  line-height: 22px;
}
html.cc-watch-party .ca-wp-head-tab.is-on {
  background: #3b5bfd;
  color: #fff;
}
html.cc-watch-party .ca-wp-head-tab:hover {
  color: #fff;
}
html.cc-watch-party .ca-wp-cam-strip {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: flex-end;
  align-self: stretch;
  overflow: visible;
}
html.cc-watch-party .ca-wp-cam-strip[hidden] {
  display: none !important;
}
html.cc-watch-party #caWpTopTitle {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html.cc-watch-party .ca-wp-top-sub {
  font-size: 11px;
  color: #9aa0a6;
  font-weight: 600;
}
html.cc-watch-party .ca-wp-top-right {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
  flex: 0 0 auto;
  /* The cam strip is the only element that stretches, so without this the
     icons slide back next to the title whenever no one is on cam. */
  margin-left: auto;
}
html.cc-watch-party .ca-wp-top-count {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #c5c8ce;
  font-size: 13px;
  font-weight: 700;
  padding: 0 4px;
}
html.cc-watch-party .ca-wp-top-count.is-locked::after {
  content: '🔒';
  font-size: 12px;
  line-height: 1;
}
html.cc-watch-party #caWpOverflowMenu {
  position: absolute;
  top: calc(100% + 8px);
  right: 42px;
  width: 230px;
  padding: 6px 0;
  background: #232833;
  border: 1px solid #343b48;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,.5);
  z-index: 40;
}
html.cc-watch-party #caWpOverflowMenu[hidden] {
  display: none !important;
}
html.cc-watch-party #caWpOverflowMenu .ca-wp-menu-row {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 40px;
  padding: 0 14px;
  border: 0;
  background: transparent;
  color: #e8eaed;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
html.cc-watch-party #caWpOverflowMenu .ca-wp-menu-row[data-wp-ov="lock"] {
  font-weight: 700;
}
html.cc-watch-party #caWpOverflowMenu .ca-wp-menu-row:hover {
  background: #2e3542;
}
html.cc-watch-party #caWpOverflowMenu .ca-wp-menu-row.is-danger {
  color: #ff7b82;
}
html.cc-watch-party #caWpOverflowMenu .ca-wp-menu-sep {
  height: 1px;
  margin: 4px 0;
  background: #343b48;
}

/* People */
#caWpPeople,
#caWpPlaylist {
  display: none;
}
html.cc-watch-party #caWpPeople {
  display: flex !important;
  flex-direction: column;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  width: var(--cc-wp-people-w, 248px) !important;
  background: #161920 !important;
  border-right: 1px solid #2a2f38;
  z-index: 400004;
  color: #e8eaed;
}
html.cc-watch-party .ca-wp-people-hd,
html.cc-watch-party .ca-wp-pl-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 14px 10px;
  font-size: 13px;
  font-weight: 800;
  color: #c5c8ce;
}
html.cc-watch-party .ca-wp-media {
  flex: 0 0 auto;
  padding: 12px 12px 8px;
  border-bottom: 1px solid #2a2f38;
}
html.cc-watch-party .ca-wp-media-hd {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  color: #9aa0a6;
  margin-bottom: 8px;
}
html.cc-watch-party .ca-wp-media-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
}
html.cc-watch-party .ca-wp-media-btn {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 42px;
  border: 1px solid #2a3140;
  border-radius: 10px;
  background: #1c2230;
  color: #e8eaed;
  cursor: pointer;
  padding: 0 8px;
}
html.cc-watch-party .ca-wp-media-btn:hover {
  background: #232a3a;
}
html.cc-watch-party .ca-wp-media-btn.is-on {
  background: #1565c0;
  border-color: #1565c0;
  color: #fff;
}
html.cc-watch-party .ca-wp-media-btn.is-on .ca-wp-media-onoff {
  background: #fff;
  color: #1565c0;
  border-radius: 4px;
  padding: 2px 6px;
  font-weight: 800;
}
html.cc-watch-party .ca-wp-media-ico {
  display: inline-flex;
  width: 22px;
  height: 22px;
  color: #42a5f5;
}
html.cc-watch-party .ca-wp-media-btn.is-on .ca-wp-media-ico {
  color: #fff;
}
html.cc-watch-party .ca-wp-media-ico svg {
  width: 22px;
  height: 22px;
}
html.cc-watch-party .ca-wp-media-onoff {
  font-size: 11px;
  font-weight: 800;
}
html.cc-watch-party .ca-wp-person-cam,
html.cc-watch-party .ca-wp-person-mic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  color: #2ecf8f;
}
html.cc-watch-party .ca-wp-person-mic {
  color: #42a5f5;
}
html.cc-watch-party .ca-wp-person-cam svg,
html.cc-watch-party .ca-wp-person-mic svg {
  width: 16px;
  height: 16px;
}

/* Live cams sit in the header beside the Watch Party title. */
html.cc-watch-party #leftCamDock {
  display: none !important;
}
html.cc-watch-party.cc-wp-theater #leftCamDock,
html.cc-watch-party.ca-wp-theater #leftCamDock,
html.cc-watch-party.cc-wp-theater #caWpCamStrip,
html.cc-watch-party.ca-wp-theater #caWpCamStrip {
  display: none !important;
}
html.cc-watch-party #caWpCamStrip #webcamPanel {
  display: flex !important;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow-x: auto;
  overflow-y: visible;
  pointer-events: auto;
}
html.cc-watch-party #caWpCamStrip .webcam-placeholder,
html.cc-watch-party #caWpCamStrip .webcam-off,
html.cc-watch-party #caWpCamStrip .dock-footer,
html.cc-watch-party #caWpCamStrip .featured-badge {
  display: none !important;
}
html.cc-watch-party #caWpCamStrip #webcamPanel .webcam-dock,
html.cc-watch-party #caWpCamStrip #webcamPanel .screen-dock,
html.cc-watch-party #caWpCamStrip #webcamPanel .webcam-dock:not(.webcam-dock--mini),
html.cc-watch-party #caWpCamStrip #webcamPanel .screen-dock:not(.screen-dock--mini) {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 0 0 auto !important;
  align-self: flex-end !important;
  width: 176px !important;
  height: 118px !important;
  min-width: 128px !important;
  min-height: 86px !important;
  max-width: 480px !important;
  max-height: 280px !important;
  margin: 0 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  pointer-events: auto !important;
  z-index: 1;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}
html.cc-watch-party #caWpCamStrip #webcamPanel .webcam-dock.ca-wp-cam-lg,
html.cc-watch-party #caWpCamStrip #webcamPanel .screen-dock.ca-wp-cam-lg {
  width: 280px !important;
  height: 178px !important;
}
html.cc-watch-party #caWpCamStrip #webcamPanel .webcam-dock.webcam-dock--self.ca-wp-views-open,
html.cc-watch-party #caWpCamStrip #webcamPanel .webcam-dock.webcam-dock--self:has(.webcam-viewer-count:hover),
html.cc-watch-party #caWpCamStrip #webcamPanel .webcam-dock.webcam-dock--self:has(.webcam-viewer-count:focus-within) {
  overflow: visible !important;
  z-index: 8;
}
html.cc-watch-party #caWpCamStrip #webcamPanel .webcam-dock .dock-head,
html.cc-watch-party #caWpCamStrip #webcamPanel .screen-dock .dock-head {
  position: absolute !important;
  inset: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  font-size: 11px;
  background: transparent !important;
  z-index: 12 !important;
}
html.cc-watch-party #caWpCamStrip #webcamPanel .webcam-dock .webcam-video,
html.cc-watch-party #caWpCamStrip #webcamPanel .webcam-dock:not(.webcam-dock--mini) .webcam-video,
html.cc-watch-party #caWpCamStrip #webcamPanel .screen-dock .screen-video,
html.cc-watch-party #caWpCamStrip #webcamPanel .screen-dock:not(.screen-dock--mini) .screen-video {
  position: absolute !important;
  inset: 0 !important;
  flex: none !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  overflow: hidden !important;
}
html.cc-watch-party #caWpCamStrip #webcamPanel .webcam-dock .webcam-video video,
html.cc-watch-party #caWpCamStrip #webcamPanel .webcam-dock:not(.webcam-dock--mini) .webcam-video video,
html.cc-watch-party #caWpCamStrip #webcamPanel .screen-dock .screen-video video,
html.cc-watch-party #caWpCamStrip #webcamPanel .screen-dock:not(.screen-dock--mini) .screen-video video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
}
html.cc-watch-party #caWpCamStrip .ca-wp-cam-resize {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 14px;
  height: 14px;
  z-index: 30;
  cursor: nwse-resize;
  background:
    linear-gradient(135deg, transparent 0 50%, rgba(255, 255, 255, 0.22) 50% 58%, transparent 58% 72%, rgba(255, 255, 255, 0.55) 72% 80%, transparent 80%);
}
html.cc-watch-party #caWpCamStrip .webcam-dock--self .webcam-viewer-count {
  top: 6px !important;
  left: 6px !important;
  cursor: pointer !important;
}
html.cc-watch-party #caWpCamStrip .webcam-viewer-count-main {
  background: #2f6bff !important;
  padding: 3px 8px !important;
  gap: 4px !important;
  border-radius: 6px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
}
html.cc-watch-party #caWpCamStrip .webcam-viewer-count-main svg {
  display: none !important;
}
html.cc-watch-party #caWpCamStrip .ca-wp-views-label {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 10px;
  font-weight: 800;
}
html.cc-watch-party #caWpCamStrip .webcam-viewer-names {
  top: 22px;
  left: 0;
  pointer-events: auto;
}
html.cc-watch-party #caWpCamStrip .webcam-dock.ca-wp-views-open .webcam-viewer-names,
html.cc-watch-party #caWpCamStrip .webcam-viewer-count:hover .webcam-viewer-names,
html.cc-watch-party #caWpCamStrip .webcam-viewer-count:focus-within .webcam-viewer-names {
  display: block !important;
}
html.cc-watch-party #caWpPeopleCount,
html.cc-watch-party #caWpPlCount {
  color: #9aa0a6;
  font-weight: 700;
}
html.cc-watch-party .ca-wp-people-search {
  padding: 0 12px 10px;
}
html.cc-watch-party #caWpPeopleSearch {
  width: 100%;
  height: 34px;
  border: 0;
  border-radius: 8px;
  background: #232833;
  color: #e8eaed;
  padding: 0 10px;
  font-size: 13px;
  box-sizing: border-box;
}
html.cc-watch-party .ca-wp-people-list {
  flex: 1 1 auto;
  overflow: auto;
  padding: 0 8px 12px;
}
html.cc-watch-party .ca-wp-person {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  padding: 6px 8px;
  border-radius: 8px;
  cursor: pointer;
}
/* Name opens a private message; the ⋯ button opens moderation. */
html.cc-watch-party .ca-wp-person-open {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  padding: 0;
  cursor: pointer;
}
html.cc-watch-party .ca-wp-person-mod {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #9aa0a6;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  opacity: .35;
}
html.cc-watch-party .ca-wp-person:hover .ca-wp-person-mod,
html.cc-watch-party .ca-wp-person-mod:focus-visible {
  opacity: 1;
}
html.cc-watch-party .ca-wp-person-mod:hover {
  background: #2e3542;
  color: #fff;
}
html.cc-watch-party .ca-wp-person:hover,
html.cc-watch-party .ca-wp-person.is-remote {
  background: #232833;
}
html.cc-watch-party .ca-wp-person-av {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #2e3542;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  flex: 0 0 32px;
}
html.cc-watch-party .ca-wp-person-av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
html.cc-watch-party .ca-wp-person-meta {
  flex: 1 1 auto;
  min-width: 0;
}
html.cc-watch-party .ca-wp-person-name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html.cc-watch-party .ca-wp-host-badge {
  font-size: 10px;
  font-weight: 800;
  color: #9aa0a6;
  background: #2a3140;
  border-radius: 4px;
  padding: 1px 5px;
}
html.cc-watch-party .ca-wp-jail-badge {
  font-size: 10px;
  font-weight: 800;
  color: #ffd0a8;
  background: #5a3416;
  border-radius: 4px;
  padding: 1px 5px;
}
html.cc-watch-party .ca-wp-person-flag {
  width: 16px;
  height: 12px;
  object-fit: cover;
  border-radius: 2px;
}
html.cc-watch-party .ca-wp-people-empty {
  padding: 16px 8px;
  color: #9aa0a6;
  font-size: 12px;
  text-align: center;
}

/* Swapped layout: cameras take the left column, Participants moves to the top bar. */
html.cc-watch-party.cc-wp-cams-side #caWpCamStrip {
  display: flex !important;
  flex-direction: column;
  gap: 8px;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  width: var(--cc-wp-people-w, 248px) !important;
  padding: 0 0 12px !important;
  margin: 0 !important;
  background: #161920 !important;
  border-right: 1px solid #2a2f38;
  overflow-x: hidden;
  overflow-y: auto;
  z-index: 400004;
  box-sizing: border-box;
}
html.cc-watch-party.cc-wp-cams-side #caWpCamStrip #webcamPanel {
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  gap: 8px;
  padding: 0 8px !important;
  overflow-x: hidden;
  overflow-y: visible;
  box-sizing: border-box;
}
html.cc-watch-party.cc-wp-cams-side #caWpCamStrip #webcamPanel .webcam-dock,
html.cc-watch-party.cc-wp-cams-side #caWpCamStrip #webcamPanel .screen-dock,
html.cc-watch-party.cc-wp-cams-side #caWpCamStrip #webcamPanel .webcam-dock.ca-wp-cam-lg,
html.cc-watch-party.cc-wp-cams-side #caWpCamStrip #webcamPanel .screen-dock.ca-wp-cam-lg {
  width: 100% !important;
  height: 140px !important;
  max-width: none !important;
  align-self: stretch !important;
}
html.cc-watch-party.cc-wp-cams-side #caWpCamStrip #caWpMediaBar {
  padding: 12px 12px 8px;
  border-bottom: 1px solid #2a2f38;
}

html.cc-watch-party.cc-wp-cams-side #caWpPeople {
  position: static !important;
  flex: 1 1 auto !important;
  flex-direction: row !important;
  align-items: center;
  gap: 10px;
  width: auto !important;
  min-width: 0;
  height: auto !important;
  max-height: 96px;
  background: transparent !important;
  border-right: 0 !important;
  overflow: hidden;
}
html.cc-watch-party.cc-wp-cams-side #caWpPeople .ca-wp-people-hd {
  flex: 0 0 auto;
  gap: 6px;
  padding: 0;
}
html.cc-watch-party.cc-wp-cams-side #caWpPeople .ca-wp-people-search {
  flex: 0 0 auto;
  width: 150px;
  padding: 0;
}
html.cc-watch-party.cc-wp-cams-side #caWpPeople .ca-wp-people-list {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  overflow-x: auto;
  overflow-y: hidden;
}
html.cc-watch-party.cc-wp-cams-side #caWpPeople .ca-wp-person {
  flex: 0 0 auto;
  width: auto;
  max-width: 190px;
  padding: 4px 8px;
}
html.cc-watch-party.cc-wp-cams-side #caWpPeople .ca-wp-people-empty {
  padding: 0 8px;
  white-space: nowrap;
}
html.cc-watch-party.cc-wp-cams-side.cc-wp-theater #caWpCamStrip,
html.cc-watch-party.cc-wp-cams-side.ca-wp-theater #caWpCamStrip {
  display: none !important;
}
html.cc-watch-party #caWpSwapLayout.is-on {
  background: #1565c0;
  color: #fff;
}

/* Playlist */
html.cc-watch-party #caWpPlaylist {
  display: flex !important;
  flex-direction: column;
  position: fixed !important;
  top: var(--cc-wp-top-h, 58px) !important;
  right: 0 !important;
  bottom: var(--cc-wp-chat-h, 260px) !important;
  width: var(--cc-wp-playlist-w, 300px) !important;
  background: #1e222a !important;
  border-left: 1px solid #2a2f38;
  z-index: 400003;
  color: #e8eaed;
  padding: 0 0 8px;
  box-sizing: border-box;
}
html.cc-watch-party.cc-wp-playlist-off #caWpPlaylist {
  display: none !important;
}
html.cc-watch-party .ca-wp-pl-add {
  display: flex;
  gap: 8px;
  padding: 0 12px 10px;
}
html.cc-watch-party #caWpPlUrl {
  flex: 1 1 auto;
  min-width: 0;
  height: 36px;
  border: 0;
  border-radius: 8px;
  background: #12151c;
  color: #e8eaed;
  padding: 0 10px;
  font-size: 13px;
}
html.cc-watch-party #caWpPlAdd {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 8px;
  background: #2a3140;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
}
html.cc-watch-party .ca-wp-pl-share,
html.cc-watch-party #caWpPlShare {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 12px 12px;
  height: 40px;
  border: 1px dashed #3a4250;
  border-radius: 10px;
  background: transparent;
  color: #c5c8ce;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}
html.cc-watch-party #caWpPlShare.is-on {
  border-style: solid;
  border-color: #e5484d;
  color: #fff;
  background: rgba(229, 72, 77, 0.12);
}
html.cc-watch-party .ca-wp-pl-list {
  flex: 1 1 auto;
  overflow: auto;
  padding: 0 10px;
}
html.cc-watch-party .ca-wp-pl-empty {
  padding: 16px 8px;
  color: #9aa0a6;
  font-size: 12px;
  text-align: center;
  line-height: 1.4;
}
html.cc-watch-party .ca-wp-pl-item {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid transparent;
  border-radius: 10px;
  background: #171a21;
  color: #e8eaed;
  text-align: left;
  padding: 10px;
  margin-bottom: 8px;
  cursor: pointer;
}
html.cc-watch-party .ca-wp-pl-item.is-on {
  border-color: #4c5cff;
  box-shadow: 0 0 0 1px rgba(76, 92, 255, 0.35);
}
html.cc-watch-party .ca-wp-pl-item.is-pinned .ca-wp-pl-ico {
  color: #f5c518;
}
html.cc-watch-party .ca-wp-pl-pin {
  flex: 0 0 auto;
  display: inline-flex;
  width: 16px;
  height: 16px;
  color: #6b7280;
  pointer-events: none;
}
html.cc-watch-party .ca-wp-pl-pin svg {
  width: 16px;
  height: 16px;
}
html.cc-watch-party .ca-wp-pl-ico {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: #2a3140;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 36px;
  color: #c5c8ce;
}
html.cc-watch-party .ca-wp-pl-meta {
  flex: 1 1 auto;
  min-width: 0;
}
html.cc-watch-party .ca-wp-pl-title {
  display: block;
  font-size: 13px;
  font-weight: 800;
}
html.cc-watch-party .ca-wp-pl-sub {
  display: block;
  font-size: 11px;
  color: #9aa0a6;
}
html.cc-watch-party .ca-wp-pl-x {
  border: 0;
  background: transparent;
  color: #9aa0a6;
  font-size: 18px;
  cursor: pointer;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  align-self: center;
  margin: 0;
  padding: 0;
  line-height: 1;
}
html.cc-watch-party .ca-wp-pl-hide,
html.cc-watch-party #caWpPlHide {
  margin: 8px 12px 4px;
  height: 36px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #9aa0a6;
  font-weight: 700;
  cursor: pointer;
}

html.cc-watch-party.cc-wp-theater #caWpPeople,
html.cc-watch-party.cc-wp-theater #caWpTopBar,
html.cc-watch-party.cc-wp-theater #caWpPlaylist,
html.cc-watch-party.ca-wp-theater #caWpPeople,
html.cc-watch-party.ca-wp-theater #caWpTopBar,
html.cc-watch-party.ca-wp-theater #caWpPlaylist {
  display: none !important;
}

#caWpBansModal {
  position: fixed;
  inset: 0;
  z-index: 500000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(4, 8, 18, 0.72);
}
#caWpBansModal[hidden] {
  display: none !important;
}
.ca-wp-bans-card {
  width: min(92vw, 420px);
  background: #171a21;
  border: 1px solid #2a2f38;
  border-radius: 12px;
  padding: 16px;
  color: #e8eaed;
}
.ca-wp-bans-card h2 {
  margin: 0 0 12px;
  font-size: 18px;
}
.ca-wp-ban-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid #2a2f38;
}
.ca-wp-ban-row button {
  border: 0;
  border-radius: 8px;
  background: #2a3140;
  color: #fff;
  padding: 6px 10px;
  cursor: pointer;
  font-weight: 700;
}
.ca-wp-bans-empty {
  color: #9aa0a6;
  font-size: 13px;
  padding: 8px 0 16px;
}
.ca-wp-bans-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}
.ca-wp-bans-actions button {
  border: 0;
  border-radius: 8px;
  background: #2a3140;
  color: #fff;
  padding: 8px 12px;
  cursor: pointer;
  font-weight: 700;
}

html.cc-watch-party .pop,
html.cc-watch-party .pop.open,
html.cc-wp-iframe .pop,
html.cc-wp-iframe .pop.open,
html.cc-watch-party #ccCamPickerModal,
html.cc-watch-party .webcam-settings-modal,
html.cc-watch-party #webcamModal {
  z-index: 2000000 !important;
  isolation: isolate;
  transform: translateZ(0);
}
html.cc-watch-party #ccCamPickerModal,
html.cc-watch-party #webcamSettingsModal,
html.cc-watch-party #webcamModal.webcam-settings-modal {
  position: fixed !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  max-height: none !important;
  pointer-events: auto !important;
}
html.cc-watch-party.cc-wp-media-modal #caWatchPartyStage {
  z-index: 1 !important;
  pointer-events: none !important;
}

/* Keep the player visible behind the user menu — only stop the embedded page
   swallowing the click that dismisses it. Dropping z-index here blanked the
   whole Hyperbeam screen. */
html.cc-watch-party.cc-wp-user-menu #caWatchPartyStage {
  pointer-events: none !important;
}

#caWpUserMenu {
  display: none;
}
html.cc-watch-party #caWpUserMenu {
  display: flex;
  flex-direction: column;
  position: fixed;
  z-index: 400020;
  width: 240px;
  padding: 6px 0 8px;
  background: #232833;
  border: 1px solid #343b48;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,.55);
  color: #e8eaed;
  isolation: isolate;
}
html.cc-watch-party #caWpUserMenu[hidden] {
  display: none !important;
}
html.cc-watch-party #caWpUserMenu .ca-wp-user-menu-name {
  padding: 8px 14px 10px;
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  border-bottom: 1px solid #343b48;
  margin-bottom: 4px;
}
html.cc-watch-party #caWpUserMenu .ca-wp-menu-row {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 40px;
  padding: 0 14px;
  border: 0;
  background: transparent;
  color: #e8eaed;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
html.cc-watch-party #caWpUserMenu .ca-wp-menu-row:hover {
  background: #2e3542;
}
html.cc-watch-party #caWpUserMenu .ca-wp-menu-row.is-danger {
  color: #ff7b82;
}
html.cc-watch-party.cc-wp-media-modal #caWatchPartyMount,
html.cc-watch-party.cc-wp-media-modal #caWatchPartyMount iframe,
html.cc-watch-party.cc-wp-media-modal #caWatchPartyMount canvas,
html.cc-watch-party.cc-wp-media-modal #caWatchPartyMount video,
html.cc-watch-party.cc-wp-media-modal .ca-wp-frame,
html.cc-watch-party.cc-wp-media-modal #leftCamDock {
  visibility: hidden !important;
  pointer-events: none !important;
}

html.cc-watch-party .toast-notification,
html.cc-wp-iframe .toast-notification {
  z-index: 2000000 !important;
}

html.cc-wp-iframe .ca-wp-player-head,
html.cc-wp-iframe .ca-wp-player-foot,
html.cc-wp-iframe #caWpPeople,
html.cc-wp-iframe #caWpTopBar,
html.cc-wp-iframe #caWpPlaylist,
html.cc-wp-iframe #caWpChatResize {
  display: none !important;
}

/* Invite paste prompt — shown from Lobby when Watch Party is locked. */
#ccWpInviteModal {
  position: fixed;
  inset: 0;
  z-index: 220000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(4, 8, 18, 0.72);
}
#ccWpInviteModal[hidden] {
  display: none !important;
}
#ccWpInviteModal .cc-wp-invite-card {
  width: min(92vw, 440px);
  background: #121a2a;
  border: 1px solid #2a3a55;
  border-radius: 12px;
  padding: 18px 16px 16px;
  color: #e7ecf3;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
}
#ccWpInviteModal #ccWpInviteTitle {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.01em;
}
#ccWpInviteModal .cc-wp-invite-copy {
  margin: 0 0 8px;
  color: #b7c2d4;
  font-size: 13px;
  line-height: 1.4;
}
#ccWpInviteModal .cc-wp-invite-ex {
  margin: 0 0 12px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #0c1320;
  border: 1px solid #24344d;
  color: #8ec8ff;
  font-size: 12px;
  line-height: 1.35;
  word-break: break-all;
}
#ccWpInviteModal #ccWpInviteInput {
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 8px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #2a3a55;
  background: #0c1320;
  color: #e7ecf3;
  font-size: 14px;
}
#ccWpInviteModal #ccWpInviteInput:focus {
  outline: none;
  border-color: #4d8dff;
}
#ccWpInviteModal .cc-wp-invite-err {
  margin: 0 0 10px;
  color: #ffb4b4;
  font-size: 12px;
}
#ccWpInviteModal .cc-wp-invite-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
#ccWpInviteModal .cc-wp-invite-actions button {
  appearance: none;
  border: 1px solid #2a3a55;
  background: #1a2436;
  color: #d7deea;
  border-radius: 8px;
  padding: 8px 12px;
  font-weight: 700;
  cursor: pointer;
}
#ccWpInviteModal .cc-wp-invite-actions button.is-go {
  border-color: #2f6adf;
  background: #2f6adf;
  color: #fff;
}

/* Per-user Hyperbeam iframe overlay while chatting in #lobby */
html.cc-wp-iframe #caWatchPartyStage {
  display: flex !important;
  flex-direction: column !important;
  position: fixed !important;
  left: 80px !important;
  top: 80px !important;
  right: auto !important;
  bottom: auto !important;
  width: 900px !important;
  height: 520px !important;
  z-index: 900000 !important;
  background: #0d1424 !important;
  border: 2px solid var(--cc-wp-iframe-color, var(--cc-theme, #6aa7ff)) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .55) !important;
}

html.cc-wp-iframe:not(.cc-watch-party) #caWatchPartyStage .cc-wp-iframe-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex: 0 0 38px;
  height: 38px;
  padding: 0 10px;
  background: #182136;
  color: #e7ecf3;
  cursor: grab;
  user-select: none;
  border-bottom: 1px solid #243047;
}

html.cc-wp-iframe #caWatchPartyStage .cc-wp-iframe-title {
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

html.cc-wp-iframe #caWatchPartyStage .cc-wp-iframe-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  white-space: nowrap;
}

html.cc-wp-iframe #caWatchPartyStage .cc-wp-iframe-controls button,
html.cc-wp-iframe #caWatchPartyStage .cc-wp-iframe-controls input[type="color"] {
  background: transparent;
  border: none;
  color: #e7ecf3;
  font-size: 13px;
  cursor: pointer;
  padding: 2px 4px;
  line-height: 1;
}

html.cc-wp-iframe #caWatchPartyStage .cc-wp-iframe-controls button:hover {
  color: var(--cc-wp-iframe-color, #6aa7ff);
}

html.cc-wp-iframe #caWatchPartyStage #caWpIframeReturn {
  border: 1px solid var(--cc-wp-iframe-color, #6aa7ff);
  background: #1c2232;
  color: #e7ecf3;
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 800;
}

html.cc-wp-iframe #caWatchPartyStage #caWpIframeClose {
  width: 28px;
  height: 24px;
  margin-left: 4px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: #7a1d1d;
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
}

html.cc-wp-iframe #caWatchPartyStage #caWpIframeClose:hover {
  background: #a32626;
  color: #fff;
}

html.cc-wp-iframe #caWatchPartyStage #caWpIframeLock.is-locked {
  color: #ffb4b4;
}

html.cc-wp-iframe #caWatchPartyStage #caWpIframeShare.is-on {
  color: #8fdf8f;
}

html.cc-wp-iframe #caWpShareLayer {
  position: absolute;
  inset: 0;
  z-index: 30;
  background: #000;
  pointer-events: none;
}

html.cc-wp-iframe #caWpShareLayer[hidden] {
  display: none !important;
}

html.cc-wp-iframe #caWpShareLayer video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

html.cc-wp-iframe #caWatchPartyStage .cc-wp-iframe-vol {
  width: 72px;
  accent-color: var(--cc-wp-iframe-color, #6aa7ff);
  cursor: pointer;
}

html.cc-wp-iframe #caWatchPartyStage .cc-wp-iframe-color {
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid #243047 !important;
  border-radius: 4px;
  background: #0d1424 !important;
}

html.cc-wp-iframe #caWatchPartyStage .ca-wp-frame {
  position: relative !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  width: 100% !important;
  background: #000 !important;
  overflow: hidden !important;
}

html.cc-wp-iframe #caWatchPartyMount,
html.cc-wp-iframe #caWatchPartyMount > * {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
}

html.cc-wp-iframe #caWpViewLock {
  position: absolute;
  inset: 0;
  z-index: 20;
  background: transparent;
  cursor: default;
}
html.cc-wp-iframe #caWpViewLock.is-player-locked {
  cursor: not-allowed;
}

html.cc-wp-iframe #caWatchPartyStage .ca-wp-loading {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ddd;
  font-size: 15px;
  font-weight: 700;
  background: #000;
  pointer-events: none;
}

html.cc-wp-iframe #caWatchPartyStage .cc-wp-iframe-resize {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 16px;
  height: 16px;
  cursor: se-resize;
  background: var(--cc-wp-iframe-color, #6aa7ff);
  border-bottom-right-radius: 6px;
  opacity: .85;
  z-index: 6;
}

html.cc-wp-iframe #caWpDock,
html.cc-wp-iframe #caWatchPartyBar,
html.cc-wp-iframe #caWpChatTabs,
html.cc-wp-iframe #caWpAnnounce,
html.cc-wp-iframe #caWpChatResize {
  display: none !important;
}

/* Gold *watching TITLE* prompt on the #Lobby tab — click joins Watch Party. */
.chat-head #chatHeadRoomName.has-wp-prompt,
.chat-head .cc-room-tab.is-lobby.has-wp-prompt {
  gap: 6px;
  padding-right: 6px;
}
#ccWpLobbyPrompt,
.cc-wp-lobby-prompt {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 170px;
  margin: 0 0 0 2px;
  padding: 2px 8px;
  border: 1px solid #ffc107;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffe082 0%, #ffc107 55%, #ffb300 100%);
  color: #1a1200;
  font-size: 11px;
  font-weight: 800;
  font-style: italic;
  line-height: 1.2;
  cursor: pointer;
  box-shadow: 0 0 0 1px rgba(255, 193, 7, .35), 0 4px 12px rgba(255, 193, 7, .35);
  z-index: 2;
}
#ccWpLobbyPrompt:hover,
.cc-wp-lobby-prompt:hover {
  filter: brightness(1.08);
}
#ccWpLobbyPrompt.is-flash,
.cc-wp-lobby-prompt.is-flash {
  animation: ccWpLobbyPromptFlash 1.4s ease-out 1;
}
.cc-wp-lobby-prompt-ico {
  flex: 0 0 auto;
  font-size: 12px;
  line-height: 1;
}
.cc-wp-lobby-prompt-txt {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@keyframes ccWpLobbyPromptFlash {
  0% { box-shadow: 0 0 0 0 rgba(255, 193, 7, .9); }
  70% { box-shadow: 0 0 0 8px rgba(255, 193, 7, 0); }
  100% { box-shadow: 0 0 0 1px rgba(255, 193, 7, .35), 0 4px 12px rgba(255, 193, 7, .35); }
}
#chat .row.cc-watch-party-ann-row .system-msg,
#chat .row.system-message .system-msg.cc-watch-party-ann {
  color: #ffc107;
}
#chat .row.cc-watch-party-ann-row a.js-open-watch-party {
  color: #fff59d !important;
  font-weight: 800 !important;
  text-decoration: underline !important;
}

/* Popup DMs stay in Lobby. Watch Party uses chat tabs instead. */
html.cc-watch-party #dm,
html.cc-watch-party #dm.open {
  display: none !important;
}
html.cc-watch-party #dmMinimizedBtn {
  display: none !important;
}
html.cc-watch-party.cc-dms-viewing #composer,
html.cc-watch-party.cc-dms-viewing #chat {
  display: none !important;
}
html.cc-watch-party.cc-dms-viewing #ccRoomChatHost > .dmBody.cc-docked-dm-view.active {
  display: flex !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
}