/* Fake Full Mode Styles */
body.fake-full-mode {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    /* Multi-layer fallback for viewport height */
    height: 100vh !important;                    /* [1] 기본 fallback (모든 브라우저) */
    height: -webkit-fill-available !important;   /* [2] iOS Safari < 15.4 */
    height: 100dvh !important;                   /* [3] 최신 브라우저 (iOS 15.4+, Android 108+) */
    background: #000 !important;
    z-index: 9999 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Fake Full 모드에서 비디오 컨테이너 최적화 */
body.fake-full-mode .video-container {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    /* Multi-layer fallback for viewport height */
    height: 100vh !important;
    height: -webkit-fill-available !important;
    height: 100dvh !important;
    max-width: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    z-index: 10000 !important;
}

body.fake-full-mode .main-video-box {
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

/* 비디오 플레이어 최적화 */
body.fake-full-mode #reaction-player,
body.fake-full-mode #reaction-youtube-container,
body.fake-full-mode #reaction-youtube-container iframe {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

/* 오버레이 영상 - 정상 표시 유지 */
body.fake-full-mode #youtube-container {
    position: absolute !important;
    /* 위치는 기존 설정 유지 (top-right, top-left 등) */
    border-radius: 8px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
}

body.fake-full-mode #youtube-container iframe {
    border-radius: 8px !important;
}

/* Fake Full 모드에서 다른 요소들 숨김 */
body.fake-full-mode .header,
body.fake-full-mode .quick-controls,
body.fake-full-mode .quick-controls-inline,
body.fake-full-mode .beta-notice,
body.fake-full-mode .help-faq,
body.fake-full-mode .message,
body.fake-full-mode .video-title-section,
body.fake-full-mode .video-actions-section,
body.fake-full-mode .mobile-overlay-toggle,
body.fake-full-mode .overlay-settings-panel,
body.fake-full-mode footer {
    display: none !important;
}

/* 플로팅 컨트롤 스타일 */
.floating-controls {
    position: fixed;
    bottom: 20px;  /* 오른쪽 아래로 */
    right: 20px;
    z-index: 100000;
    display: flex;
    gap: 12px;
    opacity: 1 !important;  /* 강제로 항상 보이게 */
    transition: opacity 0.3s ease;
    pointer-events: auto !important;  /* 강제로 클릭 가능하게 */
}

body.fake-full-mode .floating-controls {
    opacity: 1;
    pointer-events: auto;
}

/* Desktop fullscreen support - show exit button */
.video-container:fullscreen .floating-controls,
.video-container:-webkit-full-screen .floating-controls,
.video-container:-moz-full-screen .floating-controls,
.video-container:-ms-fullscreen .floating-controls {
    opacity: 1;
    pointer-events: auto;
}

.floating-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.2);
    color: white;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.floating-btn:hover {
    background: rgba(0, 0, 0, 0.9);
    border-color: rgba(255, 255, 255, 0.4);
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

.floating-btn:active {
    transform: scale(0.95);
}

.floating-btn .material-icons {
    font-size: 24px;
}

/* 모바일 최적화 */
@media (max-width: 768px) {
    .floating-controls {
        bottom: 15px;  /* 오른쪽 아래로 */
        right: 15px;
    }
    
    .floating-btn {
        width: 56px;
        height: 56px;
        font-size: 24px;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }
    
    .floating-btn .material-icons {
        font-size: 28px;
    }
}

/* 가로모드 모바일 최적화 */
@media (max-width: 768px) and (orientation: landscape) {
    body.fake-full-mode .video-container {
        width: 100vw !important;
        /* Multi-layer fallback for viewport height */
        height: 100vh !important;
        height: -webkit-fill-available !important;
        height: 100dvh !important;
    }
}

/* 애니메이션 효과 */
body.fake-full-mode {
    animation: fadeIn 0.3s ease, rotateEnter 0.4s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes rotateEnter {
    from {
        transform: scale(0.95);
        opacity: 0.8;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* 스크롤 방지 */
body.fake-full-mode {
    overflow: hidden !important;
    position: fixed !important;
}

/* 컨테이너 자식들의 pointer-events 활성화 (비디오 조작 가능) */
body.fake-full-mode .video-container * {
    pointer-events: auto !important;
}

/* 플로팅 컨트롤만 최상위 레이어 */
body.fake-full-mode .floating-controls {
    pointer-events: auto !important;
}

/* YouTube fullscreen 버튼 강제 숨김 (fs: 0이 무시되는 경우 대비) */
.ytp-fullscreen-button {
    display: none !important;
}

button[aria-label*="Full screen"],
button[aria-label*="fullscreen"],
button[title*="Full screen"],
button[title*="fullscreen"] {
    display: none !important;
}

/* HTML5 video fullscreen 버튼 숨김 */
video::-webkit-media-controls-fullscreen-button {
    display: none !important;
}

video::-moz-media-controls-fullscreen-button {
    display: none !important;
}

video::-ms-media-controls-fullscreen-button {
    display: none !important;
}

/* 메인 리액션 영상의 fullscreen 버튼 숨김 */
#reaction-player::-webkit-media-controls-fullscreen-button,
#reaction-youtube-container::-webkit-media-controls-fullscreen-button {
    display: none !important;
}

/* YouTube iframe 내부 fullscreen 버튼 강제 숨김 */
#reaction-youtube-container iframe {
    pointer-events: none; /* 일시적으로 모든 클릭 비활성화 */
}

#reaction-youtube-container:hover iframe {
    pointer-events: auto; /* 호버시에만 클릭 활성화 (fullscreen 버튼 제외) */
}

/* YouTube 플레이어 컨트롤 영역에서 fullscreen 버튼 영역만 타겟 */
.ytp-fullscreen-button,
.ytp-chrome-bottom .ytp-fullscreen-button {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* ========================================
   Real Fullscreen Mode (Desktop)
   ======================================== */

/* 진짜 Fullscreen 모드 스타일 (데스크탑) */
.video-container:fullscreen,
.video-container:-webkit-full-screen,
.video-container:-moz-full-screen,
.video-container:-ms-fullscreen {
    width: 100vw !important;
    height: 100vh !important;
    max-width: none !important;
    background: #000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    border: none !important;
}

/* 진짜 Fullscreen에서 main-video-box */
.video-container:fullscreen .main-video-box,
.video-container:-webkit-full-screen .main-video-box,
.video-container:-moz-full-screen .main-video-box,
.video-container:-ms-fullscreen .main-video-box {
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

/* 진짜 Fullscreen에서 비디오 플레이어 */
.video-container:fullscreen #reaction-player,
.video-container:fullscreen #reaction-youtube-container,
.video-container:fullscreen #reaction-youtube-container iframe,
.video-container:-webkit-full-screen #reaction-player,
.video-container:-webkit-full-screen #reaction-youtube-container,
.video-container:-webkit-full-screen #reaction-youtube-container iframe,
.video-container:-moz-full-screen #reaction-player,
.video-container:-moz-full-screen #reaction-youtube-container,
.video-container:-moz-full-screen #reaction-youtube-container iframe,
.video-container:-ms-fullscreen #reaction-player,
.video-container:-ms-fullscreen #reaction-youtube-container,
.video-container:-ms-fullscreen #reaction-youtube-container iframe {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

/* 진짜 Fullscreen에서 오버레이 영상 */
.video-container:fullscreen #youtube-container,
.video-container:-webkit-full-screen #youtube-container,
.video-container:-moz-full-screen #youtube-container,
.video-container:-ms-fullscreen #youtube-container {
    position: absolute !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
}

.video-container:fullscreen #youtube-container iframe,
.video-container:-webkit-full-screen #youtube-container iframe,
.video-container:-moz-full-screen #youtube-container iframe,
.video-container:-ms-fullscreen #youtube-container iframe {
    border-radius: 8px !important;
}

/* Orientation Hint 스타일 */
.orientation-hint {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(10px);
    color: white;
    padding: 12px 24px;
    border-radius: 25px;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 100001;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    animation: hintSlideUp 0.3s ease;
    transition: opacity 0.3s ease;
}

.orientation-hint .material-icons {
    font-size: 20px;
    animation: rotateIcon 1.5s ease-in-out infinite;
}

@keyframes hintSlideUp {
    from {
        bottom: -50px;
        opacity: 0;
    }
    to {
        bottom: 20px;
        opacity: 1;
    }
}

@keyframes rotateIcon {
    0%, 100% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(-15deg);
    }
    75% {
        transform: rotate(15deg);
    }
}

/* 모바일 최적화 */
@media (max-width: 768px) {
    .orientation-hint {
        bottom: 30px;
        font-size: 15px;
        padding: 14px 28px;
    }
}