* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: black;
  color: white;
  font-family: sans-serif;
  transition: background-color 3s ease-in-out;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
  height: 100vh;
  align-items: center;
  justify-content: center;
}


#videoContainer {
  flex: 1;
  position: relative;
  background: black;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0 auto;
}

/* 정사각형 비디오 컨테이너 */
#videoContainer {
  aspect-ratio: 1/1; /* 정사각형 비율 강제 */
}

#videoContainer video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

video {
  background: black;
  z-index: 1;
}

#localVideo { 
  transform: scaleX(-1); 
}

#videoContainer #localVideo {
  transform: scaleX(-1);
}

#remoteVideo { 
  display: none; 
}

/* 원격 영상이 있을 때 로컬 영상을 작게 표시 */
.remote-active #localVideo {
  position: absolute;
  top: 2%;
  left: 2%;
  width: 15%;
  height: 15%;
  border-radius: 8px;
  border: 2px solid rgba(255,255,255,0.3);
  z-index: 10;
  cursor: pointer;
  transition: all 0.3s ease;
}

.remote-active #localVideo:hover {
  transform: scaleX(-1) scale(1.05);
  border-color: rgba(255,255,255,0.6);
}

.remote-active #remoteVideo {
  display: block !important;
  cursor: pointer;
}

/* 위치 전환 시 스타일 */
.remote-active.switched #localVideo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  border: none;
  z-index: 1;
}

.remote-active.switched #remoteVideo {
  position: absolute;
  top: 2%;
  left: 2%;
  width: 15%;
  height: 15%;
  border-radius: 8px;
  border: 2px solid rgba(255,255,255,0.3);
  z-index: 10;
  cursor: pointer;
  transition: all 0.3s ease;
}

.remote-active.switched #remoteVideo:hover {
  transform: scale(1.05);
  border-color: rgba(255,255,255,0.6);
}

/* 모바일에서 전환된 위치 조정 */
@media (max-width: 768px) {
  .remote-active.switched #remoteVideo {
    width: 15%;
    height: 15%;
    top: 2%;
    left: 2%;
  }
}

/* 모바일에서 작은 영상 크기 조정 */
@media (max-width: 768px) {
  .remote-active #localVideo {
    width: 15%;
    height: 15%;
    top: 2%;
    left: 2%;
  }
}

#status {
  padding: 8px;
  text-align: center;
  font-size: 12px;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 1000;
  backdrop-filter: blur(10px);

  display: none;
}

#appState {
  color: #00ffff;
  padding: 4px 8px;
  text-align: center;
  font-size: 11px;
  font-family: monospace;
  flex-shrink: 0;
  position: sticky;
  top: 36px;
  z-index: 999;
  backdrop-filter: blur(10px);

  display: none;
}

#roomInfo {
  margin: 8px 0;
  font-size: 12px;
  color: #ccc;
}

#roomInputHint {
  display: none;
  font-size: 11px;
  color: #ff6b6b;
  margin-top: 4px;
}

#settingsContainer {
  margin-top: 8px;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

#settingsContainer label {
  font-size: 12px;
}

#bandwidthSelect, #qualitySelect {
  color: white;
  border: none;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
}





#settingsContainer {
  display: none;
}

#dataUsage {
  color: #00ff00;
  padding: 4px 8px;
  text-align: center;
  font-size: 11px;
  font-family: monospace;
  flex-shrink: 0;
  position: sticky;
  top: 60px;
  z-index: 999;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0,255,0,0.2);
  display: none;
}

#controls-container {
  width: 100%;
}


#controls {
  padding: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  flex-shrink: 0;
  position: sticky;
  bottom: 0;
  z-index: 1000;
  backdrop-filter: blur(10px);
}

button, input {
  background: rgba(255,255,255,0.15);
  color: white;
  border: none;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  min-height: 36px;
  position: relative;
  z-index: 1001;
}

input {
  width: 100%;
  font-size: 12px;
}

.connected { 
  color: #4CAF50; 
}

.disconnected { 
  color: #f44336; 
}

.connecting { 
  color: #ff9800; 
}

/* 모바일 최적화 */
@media (max-width: 768px) {
  body {
    height: 100vh;
    min-height: 100vh;
  }
  
  #status {
    padding: 6px;
    font-size: 11px;
  }
  
  #controls {
    padding: 6px;
    gap: 4px;
  }
  
  button, input {
    padding: 6px 10px;
    font-size: 12px;
    min-height: 32px;
  }
  
  #videoContainer {
    flex: 1;
    min-height: 0;
  }
}

/* 세로 모드 최적화 - 정사각형 유지 */
@media (orientation: portrait) {
  #videoContainer {
    aspect-ratio: 1/1; /* 정사각형 유지 */
    max-height: calc(100vh - 120px);
    max-width: calc(100vh - 120px); /* 세로 모드에서 너비 제한 */
  }
}

/* 가로 모드 최적화 - 정사각형 유지 */
@media (orientation: landscape) {
  #videoContainer {
    aspect-ratio: 1/1; /* 정사각형 유지 */
    max-height: calc(100vh - 80px);
    max-width: calc(100vh - 80px); /* 가로 모드에서 너비 제한 */
  }
}

/* 모바일에서 정사각형 강제 적용 */
@media (max-width: 768px) {
  #videoContainer {
    aspect-ratio: 1/1 !important; /* 모바일에서 정사각형 강제 */
    width: min(100vw, 100vh - 120px);
    height: min(100vw, 100vh - 120px);
    max-width: 100vw;
    max-height: 100vw;
  }
}

/* ===== 상태별 버튼 관리 ===== */

/* 멤버목록 버튼은 항상 숨김 */
#getMemberListBtn { display: none !important; }



/* 초기 상태 (Initial State) */
.state-initial #joinRoomBtn { display: none; }
.state-initial #leaveRoomBtn { display: none; }
.state-initial #getMemberListBtn { display: none; }
.state-initial #createOfferBtn { display: none; }

/* 시그널링 서버 접속됨 상태 (Signaling Connected) */
.state-signaling-connected #joinRoomBtn { display: inline-block; }
.state-signaling-connected #leaveRoomBtn { display: none; }
.state-signaling-connected #getMemberListBtn { display: none; }
.state-signaling-connected #createOfferBtn { display: none; }

/* 방 참가 시도 상태 (Room Join Attempt) */
.state-joining #joinRoomBtn { display: none; }
.state-joining #leaveRoomBtn { display: inline-block; }
.state-joining #getMemberListBtn { display: none; }
.state-joining #createOfferBtn { display: none; }

/* 방 참가 성공 상태 (Room Joined) */
.state-joined #joinRoomBtn { display: none; }
.state-joined #leaveRoomBtn { display: inline-block; }
.state-joined #getMemberListBtn { display: none; }
.state-joined #createOfferBtn { display: none; }

/* 멤버 1명 상태 (Single Member) */
.state-single-member #joinRoomBtn { display: none; }
.state-single-member #leaveRoomBtn { display: inline-block; }
.state-single-member #getMemberListBtn { display: none; }
.state-single-member #createOfferBtn { display: none; }

/* 멤버 2명 상태 - 화면연결 끊어짐 (기본) */
.state-two-members-disconnected #joinRoomBtn { display: none; }
.state-two-members-disconnected #leaveRoomBtn { display: inline-block; }
.state-two-members-disconnected #getMemberListBtn { display: none; }
.state-two-members-disconnected #createOfferBtn { display: inline-block; }

/* 멤버 2명 상태 - 화면연결 끊어짐 시 배경 애니메이션 */
.state-two-members-disconnected {
  animation: greenFlash 5s ease-in-out infinite !important;
}

@keyframes greenFlash {
  0% {
    background-color: transparent;
  }
  50% {
    background-color: #ed00864e;
  }
  100% {
    background-color: transparent;
  }
}

/* 멤버 2명 상태 - 화면연결 시도 중 */
.state-two-members-connecting #joinRoomBtn { display: none; }
.state-two-members-connecting #leaveRoomBtn { display: inline-block; }
.state-two-members-connecting #getMemberListBtn { display: none; }
.state-two-members-connecting #createOfferBtn { display: inline-block; opacity: 0.5; pointer-events: none; }

/* 멤버 2명 상태 - 화면연결 완료 */
.state-two-members-connected #joinRoomBtn { display: none; }
.state-two-members-connected #leaveRoomBtn { display: inline-block; }
.state-two-members-connected #getMemberListBtn { display: none; }
.state-two-members-connected #createOfferBtn { display: none; }

/* 방 나가기 상태 (Room Leave) */
.state-leaving #joinRoomBtn { display: none; }
.state-leaving #leaveRoomBtn { display: none; }
.state-leaving #getMemberListBtn { display: none; }
.state-leaving #createOfferBtn { display: none; }

/* 오류 상태 (Error) */
.state-error #joinRoomBtn { display: inline-block; }
.state-error #leaveRoomBtn { display: none; }
.state-error #getMemberListBtn { display: none; }
.state-error #createOfferBtn { display: none; }

/* 버튼 비활성화 스타일 */
#createOfferBtn:disabled {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}

/* 방 정보 숨김 */

#roomInfo {
  display: none !important;
}

/* 송수신 패널 표시/숨김 - 연결 중일 때만 표시 */
.state-two-members-connected #dataUsage,
.state-two-members-connecting #dataUsage {
  display: block !important;
}

.state-initial #dataUsage,
.state-joining #dataUsage,
.state-joined #dataUsage,
.state-single-member #dataUsage,
.state-two-members-disconnected #dataUsage,
.state-leaving #dataUsage,
.state-error #dataUsage {
  display: none !important;
}