/* Main Video Area Component */
.main-video-area {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

/* Normal and switched modes use default styles */

/* Remote video styles */
#remote-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  background: #000;
  transition: opacity 0.3s ease-in-out;
  opacity: 1;
}

/* TRTC video elements inside the remote-video container */
#remote-video video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#remote-video.hidden {
  opacity: 0;
  pointer-events: none;
}

/* Avatar content styles */
.avatar-content {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
}

.avatar-content .placeholder-content {
  transition: opacity 0.3s ease-in-out;
  opacity: 1;
}

.avatar-content .placeholder-content.hidden {
  opacity: 0;
  pointer-events: none;
}

#placeholder-video,
#placeholder-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity 0.3s ease-in-out;
}

#placeholder-video.hidden,
#placeholder-image.hidden {
  opacity: 0;
  pointer-events: none;
}

/* Main local video when views are switched */
#main-local-video video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scaleX(-1); /* Mirror effect for natural selfie view */
}
