html.couple-room {
  width: 100%;
  height: 100%;
  background-color: #000;
  color-scheme: dark;
}

html.couple-room body {
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  background-color: transparent !important;
}

html.couple-room #mainmenu {
  visibility: hidden !important;
}

html.couple-room #controlButtons,
html.couple-room #chatModule,
html.couple-room #header,
html.couple-room #roomHeader,
html.couple-room .topbar,
html.couple-room #translateButton,
html.couple-room #connectUsers,
html.couple-room #closedList_connectUsers {
  display: none !important;
}

html.couple-room #gridlayout,
html.couple-room #directorlayout {
  background-color: transparent !important;
  background-image: var(--couple-room-wallpaper-image, none) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

html.couple-room {
  --video-rounded: 12px !important;
}

html.couple-room .tile,
html.couple-room #gridlayout,
html.couple-room #directorlayout,
html.couple-room video {
  border-radius: 12px !important;
}

html.couple-room .container_holder_video > .holder {
  border: 0 !important;
  border-radius: 12px !important;
  object-fit: cover !important;
  overflow: hidden !important;
}

html.couple-room .container_holder_video > .holder > video {
  border: 0 !important;
  border-radius: 12px !important;
  object-fit: cover !important;
}

/*
 * VDO writes #4444 onto the tile container while it is hovered so the native
 * enlarge/select affordance reads as active. Couple Room keeps that behavior,
 * but does not paint the dark hover tint over camera or screen-share tiles.
 */
html.couple-room .container_holder_video {
  background-color: transparent !important;
}

/*these are the shadows outside the window and the 1px dark border outside video */
html.couple-room .container_holder_video.is-not-screenshare {
  /* Add local camera-feed styles here. */
  box-shadow: 0px 12px 15px -3px rgba(9, 9, 11, 0.2),
  0px 5px 6px -4px rgba(0, 0, 0, 0.35),
  0px 0px 0px 1px rgba(0, 0, 0, 0.05) !important;
  border-radius: 12px !important;
}

/* this adds the inset 1px shadow over video feeds */
html.couple-room .container_holder_video.is-not-screenshare > .holder::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  transition: box-shadow 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

html.couple-room
  .container_holder_video.is-not-screenshare[data-couple-room-hand-raised="1"]
  > .holder::after {
  box-shadow:
    inset 0 0 0 3px rgba(245, 158, 11, 0.48),
    inset 0 0 12px rgba(245, 158, 11, 0.92) !important;
}

/*muted video border*/
html.couple-room .container_holder_video.is-not-screenshare[data-couple-room-audio-muted="1"] > .holder::after {
  box-shadow: inset 0 0 0 3px rgba(222, 11, 11, 0.45), inset 0 0 12px rgba(222, 11, 11, 0.95) !important;
  /*saving this value to play around with*/
  /*box-shadow: inset 0px 0px 8px -1px rgba(255, 27, 50, 0.75), inset 0px 0px 0px 1px rgba(255, 0, 0, 0.25);*/
}

html.couple-room .container_holder_video.is-not-screenshare video {
    background: #666 !important;
}

html.couple-room[data-couple-room-layout="custom"] .container_holder_video[data-couple-room-placed="1"] {
  display: block !important;
  overflow: hidden !important;
  left: var(--couple-room-x) !important;
  top: var(--couple-room-y) !important;
  width: var(--couple-room-width) !important;
  height: var(--couple-room-height) !important;
  z-index: var(--couple-room-z, 1) !important;
  transform: none !important;
  transition: none !important;
}

html.couple-room[data-couple-room-layout="custom"] .container_holder_video:not([data-couple-room-placed="1"]) {
  visibility: hidden !important;
  pointer-events: none !important;
}

html.couple-room[data-couple-room-layout="custom"] .container_holder_video[data-couple-room-placed="1"] > .holder,
html.couple-room[data-couple-room-layout="custom"] .container_holder_video[data-couple-room-placed="1"] > .holder > video {
  width: 100% !important;
  height: 100% !important;
}

html.couple-room[data-couple-room-layout="custom"] .container_holder_video[data-couple-room-placed="1"] > .holder {
  position: absolute !important;
  inset: 0 !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  overflow: hidden !important;
}

html.couple-room[data-couple-room-layout="custom"] .container_holder_video[data-couple-room-placed="1"] > .holder > video {
  display: block !important;
  position: absolute !important;
  left: var(--couple-room-media-left, 0%) !important;
  top: var(--couple-room-media-top, 0%) !important;
  width: var(--couple-room-media-width, 100%) !important;
  height: var(--couple-room-media-height, 100%) !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
}

html.couple-room[data-couple-room-layout="custom"] .container_holder_video[data-couple-room-placed="1"] video {
  object-fit: var(--couple-room-fit, cover) !important;
}

/*
 * Mirrored hardware video can expose its background along one edge when a
 * fractional CSS size lands between physical pixels. Overscan camera video by
 * one pixel per edge; the holder clips the excess and hides that compositor seam.
 */
html.couple-room[data-couple-room-layout="custom"]
  .container_holder_video.is-not-screenshare[data-couple-room-placed="1"]
  > .holder
  > video {
  left: calc(var(--couple-room-media-left, 0%) - 1px) !important;
  top: calc(var(--couple-room-media-top, 0%) - 1px) !important;
  width: calc(var(--couple-room-media-width, 100%) + 2px) !important;
  height: calc(var(--couple-room-media-height, 100%) + 2px) !important;
  max-width: none !important;
  max-height: none !important;
  flex: 0 0 auto !important;
}

html.couple-room .video-label,
html.couple-room .video-label.toprounded,
html.couple-room .video-label.rounded,
html.couple-room .video-label.floating3d,
html.couple-room .video-label *,
html.couple-room .video-label.toprounded * {
  font-size: 16px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  line-height: 1.4 !important;
  text-transform: none !important;
}

html.couple-room .video-label,
html.couple-room .video-label.toprounded {
  position: absolute !important;
  top: auto !important;
  bottom: 5px !important;
  left: 5px !important;
  box-sizing: border-box !important;
  width: auto !important;
  height: 30.4px !important;
  min-width: 0 !important;
  max-width: calc(100% - 10px) !important;
  margin: 0 !important;
  padding: 4px 10px !important;
  transform: none !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: rgba(0, 0, 0, 0.65) !important;
  color: #fff !important;
  box-shadow: 0px 0px 0px 0.5px rgba(0, 0, 0, 0.65), inset 0px 0px 0px 1px rgba(255, 255, 255, 0.24) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  backdrop-filter: blur(12px) !important;
  opacity: 1 !important;
  filter: none !important;
  text-align: left !important;
  white-space: nowrap !important;
  transition: background-color 240ms cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 240ms cubic-bezier(0.2, 0.8, 0.2, 1),
    padding 240ms cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

html.couple-room .container_holder_video.is-not-screenshare[data-couple-room-audio-muted="1"] .video-label {
  background: rgba(222, 11, 11, 0.85) !important;
  box-shadow: 0 0 0 0.5px rgba(120, 0, 0, 0.42), inset 0 0 0 1px rgba(255, 255, 255, 0.19) !important;
}

html.couple-room
  .container_holder_video.is-not-screenshare[data-couple-room-hand-raised="1"]:not([data-couple-room-audio-muted="1"])
  .video-label {
  background: rgba(205, 126, 15, 0.9) !important;
  box-shadow:
    0 0 0 0.5px rgba(112, 66, 0, 0.48),
    inset 0 0 0 1px rgba(255, 231, 186, 0.28) !important;
}

html.couple-room .video-label::before {
  content: "" !important;
  display: inline-block !important;
  width: 0 !important;
  height: 18px !important;
  margin-right: 0 !important;
  opacity: 0 !important;
  background-position: left center !important;
  background-repeat: no-repeat !important;
  background-size: 18px 18px !important;
  transform: translateX(-8px) scale(0.72) !important;
  transform-origin: center !important;
  vertical-align: -4px !important;
  transition:
    width 240ms cubic-bezier(0.2, 0.8, 0.2, 1),
    margin-right 240ms cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 180ms ease-out,
    transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

html.couple-room
  .container_holder_video.is-not-screenshare[data-couple-room-hand-raised="1"]
  .video-label::before {
  width: 18px !important;
  margin-right: 6px !important;
  opacity: 1 !important;
  background-image: url("./media/couple-room/icon-raise-hand.svg") !important;
  transform: translateX(0) scale(1) !important;
}

html.couple-room
  .container_holder_video.is-not-screenshare[data-couple-room-audio-muted="1"]
  .video-label::before {
  width: 18px !important;
  margin-right: 6px !important;
  opacity: 1 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='white'%3E%3Cpath d='M12.499 5.501v-.866C12.499 2.628 10.932 1.001 9 1.001S5.501 2.628 5.501 4.635v3.228c0 1.275.633 2.397 1.591 3.045l5.407-5.407Z' opacity='.4'/%3E%3Cpath d='M6.603 14.579c.523.19 1.075.32 1.647.381v1.29a.75.75 0 0 0 1.5 0v-1.29C13.263 14.586 16 11.613 16 8a.75.75 0 0 0-1.5 0 5.5 5.5 0 0 1-6.689 5.371l-1.208 1.208ZM5.643 12.357A5.49 5.49 0 0 1 3.5 8 .75.75 0 0 0 2 8c0 2.188 1.003 4.141 2.575 5.425l1.068-1.068ZM16.53 1.47a.75.75 0 0 1 0 1.06l-14 14a.75.75 0 0 1-1.06-1.06l14-14a.75.75 0 0 1 1.06 0Z'/%3E%3C/svg%3E") !important;
  transform: translateX(0) scale(1) !important;
}

html.couple-room
  .container_holder_video.is-not-screenshare[data-couple-room-hand-raised="1"][data-couple-room-audio-muted="1"]
  .video-label::before {
  width: 42px !important;
  background-image:
    url("./media/couple-room/icon-raise-hand.svg"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='white'%3E%3Cpath d='M12.499 5.501v-.866C12.499 2.628 10.932 1.001 9 1.001S5.501 2.628 5.501 4.635v3.228c0 1.275.633 2.397 1.591 3.045l5.407-5.407Z' opacity='.4'/%3E%3Cpath d='M6.603 14.579c.523.19 1.075.32 1.647.381v1.29a.75.75 0 0 0 1.5 0v-1.29C13.263 14.586 16 11.613 16 8a.75.75 0 0 0-1.5 0 5.5 5.5 0 0 1-6.689 5.371l-1.208 1.208ZM5.643 12.357A5.49 5.49 0 0 1 3.5 8 .75.75 0 0 0 2 8c0 2.188 1.003 4.141 2.575 5.425l1.068-1.068ZM16.53 1.47a.75.75 0 0 1 0 1.06l-14 14a.75.75 0 0 1-1.06-1.06l14-14a.75.75 0 0 1 1.06 0Z'/%3E%3C/svg%3E") !important;
  background-position:
    left center,
    right center !important;
  background-size:
    18px 18px,
    18px 18px !important;
}

html.couple-room .video-mute-state.couple-room-native-mute-state {
  display: none !important;
}

html.couple-room .couple-room-audio-meter {
  --couple-room-audio-level: 0;
  position: absolute;
  right: 7px;
  bottom: 7px;
  z-index: 12;
  width: 9px;
  height: 42px;
  overflow: hidden;
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.62);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  opacity: 0.72;
  transition: opacity 120ms ease-out;
}

html.couple-room .couple-room-audio-meter[data-active="1"] {
  opacity: 1;
}

html.couple-room .couple-room-audio-meter > span {
  position: absolute;
  inset: 2px;
  border-radius: 999px;
  background: linear-gradient(to top, #22c55e 0 60%, #facc15 78%, #ef4444 100%);
  transform: scaleY(var(--couple-room-audio-level));
  transform-origin: center bottom;
  transition: transform 70ms linear;
}

html.couple-room .signal-meter {
  top: 7px !important;
  left: 7px !important;
  z-index: 12 !important;
  width: 30px !important;
  height: 30px !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 9px !important;
  background: rgba(0, 0, 0, 0.62) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35) !important;
  font-size: 20px !important;
  line-height: 1 !important;
  -webkit-backdrop-filter: blur(12px) !important;
  backdrop-filter: blur(12px) !important;
}

html.couple-room .signal-meter:not([data-level="0"]) {
  display: flex !important;
}

html.couple-room .signal-meter > i {
  display: none !important;
}

html.couple-room .signal-meter::before {
  content: "";
  width: 3px;
  height: 5px;
  border-radius: 1px;
  background: currentColor;
  box-shadow:
    5px -3px 0 currentColor,
    10px -6px 0 currentColor,
    15px -9px 0 currentColor;
  transform: translate(-6px, 5px);
}

html.couple-room .video-mute-state.raisedHand {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  html.couple-room .container_holder_video.is-not-screenshare > .holder::after,
  html.couple-room .video-label,
  html.couple-room .video-label::before,
  html.couple-room .couple-room-audio-meter,
  html.couple-room .couple-room-audio-meter > span {
    transition: none !important;
  }
}

html.couple-room .fullwindowButton {
  display: none !important;
}

html.couple-room #context-menu-video {
  width: 240px !important;
  padding: 4px !important;
  border: 1px solid rgba(0, 0, 0, 0.14) !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.08) !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

html.couple-room #context-menu-video .context-menu__items {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  margin: 0 !important;
  padding: 0 !important;
}

html.couple-room #context-menu-video .context-menu__item {
  margin: 0 !important;
}

html.couple-room #context-menu-video .context-menu__link {
  display: flex !important;
  min-height: 32px !important;
  align-items: center !important;
  padding: 6px 8px !important;
  border-radius: 6px !important;
  color: #171717 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 20px !important;
  text-decoration: none !important;
}

html.couple-room #context-menu-video .context-menu__link:hover {
  background: rgba(0, 0, 0, 0.06) !important;
}

html.couple-room #context-menu-video .context-menu__link i,
html.couple-room #context-menu-video .context-menu__submenu i,
html.couple-room #context-menu-video .context-menu__tip,
html.couple-room #context-menu-video hr,
html.couple-room #context-menu-video .context-menu__item:has(.context-menu__tip) {
  display: none !important;
}

html.couple-room.darktheme #context-menu-video {
  border-color: rgba(255, 255, 255, 0.1) !important;
  background: #171717 !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

html.couple-room.darktheme #context-menu-video .context-menu__link {
  color: #f5f5f5 !important;
}

html.couple-room.darktheme #context-menu-video .context-menu__link:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
}

html.couple-room video.couple-room-controls-hidden::-webkit-media-controls,
html.couple-room video.couple-room-controls-hidden::-webkit-media-controls-enclosure,
html.couple-room video.couple-room-controls-hidden::-webkit-media-controls-panel {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

html.couple-room-space-drag,
html.couple-room-space-drag body,
html.couple-room-space-drag .container_holder_video,
html.couple-room-space-drag .container_holder_video * {
  cursor: grab !important;
}

html.couple-room-space-drag body * {
  cursor: grab !important;
  pointer-events: none !important;
}