/* Drawer Mode Styles - good-chat.org 스타일 */

/* Grupo 기본 좌측 아이콘 내비게이션 완전 숨김 (body.drawer_mode 클래스 없어도 즉시 적용) */
.side_navigation.boundary {
    display: none !important;
}

/* Drawer 오버레이 배경 */
.drawer_overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.35);
    z-index: 1040; /* aside(1200)보다 훨씬 낮게 */
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
    pointer-events: none; /* 기본적으로 클릭 불가 */
}

.drawer_overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: none !important; /* 오버레이 자체는 클릭을 받지 않음 (body 핸들러로 처리) */
}

/* Drawer 열린 상태: aside 영역에서는 오버레이가 클릭을 막지 않도록 */
/* aside의 z-index를 오버레이보다 훨씬 높게 설정하여 aside가 위에 오도록 보장 */
body.drawer_mode .aside.drawer_open {
    pointer-events: auto !important;
    z-index: 1200 !important; /* 오버레이(1040)보다 훨씬 높게 */
    position: fixed !important;
}

body.drawer_mode .aside.drawer_open * {
    pointer-events: auto !important;
}

/* Drawer 모드: 사이드바 기본 숨김 (왼쪽 밖으로) */
body.drawer_mode .page_row > .aside.page_column,
body.drawer_mode .aside.page_column.visible,
body.drawer_mode .aside.page_column {
    position: fixed !important;
    left: -300px !important;
    top: 0 !important;
    height: 100vh !important;
    width: 280px !important;
    max-width: 80vw !important;
    z-index: 1200 !important; /* 오버레이(1040)보다 높게 */
    transition: left 0.3s ease-in-out !important;
    transform: none !important;
    overflow-y: auto !important;
    pointer-events: none !important; /* 기본적으로 클릭 불가 (drawer 열릴 때만 활성화) */
}

/* Drawer 열린 상태 */
body.drawer_mode .aside.page_column.drawer_open,
body.drawer_mode .page_row > .aside.drawer_open {
    left: 0 !important;
    pointer-events: auto !important; /* aside 내부 클릭 가능하도록 */
    z-index: 1200 !important; /* 오버레이보다 위에 */
}

/* Drawer 열린 상태에서 aside 내부 요소 클릭 가능 */
body.drawer_mode .aside.drawer_open * {
    pointer-events: auto !important;
}

/* Drawer 모드에서 middle 영역 — 모바일 전체 폭 */
body.drawer_mode .middle.page_column {
    max-width: 100% !important;
    flex: 0 0 100% !important;
}

/* 데스크톱: 860px 가운데 정렬 (good-chat.org 스타일) */
@media (min-width: 992px) {
    /* page_row가 실제 flex 컨테이너 (Bootstrap row) — 여기에 center 적용 */
    body.drawer_mode .page_row.chat_page_container {
        justify-content: center !important;
    }
    body.drawer_mode .middle.page_column {
        max-width: 860px !important;
        flex: 0 1 860px !important;
        border-left: 1px solid rgba(255,255,255,0.06) !important;
        border-right: 1px solid rgba(255,255,255,0.06) !important;
        position: relative;
        z-index: 1;
    }
    /* aside: drawer 모드에서 완전히 숨김 (flex 공간도 없애기) */
    body.drawer_mode .page_row > .aside.page_column:not(.drawer_open) {
        display: none !important;
        flex: 0 0 0 !important;
        max-width: 0 !important;
        overflow: hidden !important;
    }
    /* 오른쪽 브랜딩 영역 제거 */
    body.drawer_mode .page_row.chat_page_container::after {
        display: none !important;
        content: none !important;
    }
}

/* Drawer 모드: aside head 숨김 (gc_custom_nav이 네비게이션 담당) */
body.drawer_mode .aside > .head {
    display: none !important;
}

/* Drawer 모드: Grupo 기본 사이드바 컨텐츠 숨김 */
body.drawer_mode .aside .site_records {
    display: none !important;
}
body.drawer_mode .aside .storage_files_upload_status {
    display: none !important;
}
body.drawer_mode .aside .audio_player_box {
    display: none !important;
}
body.drawer_mode .aside .site_advert_block {
    display: none !important;
}
body.drawer_mode .aside .mini_audio_player {
    display: none !important;
}

/* Floating 버튼 공통: 모바일에서 숨김 (채팅 헤더 내 버튼 사용) */
.gc-floating-menu,
.gc-floating-login,
.gc-floating-options {
    display: none !important;
}

/* Floating 햄버거 버튼 — PC(≥992px) 전용: 페이지 왼쪽 중앙 고정 */
@media (min-width: 992px) {
    .gc-floating-menu {
        position: fixed !important;
        top: 50% !important;
        left: 8px !important;
        transform: translateY(-50%) !important;
        z-index: 1200 !important;
        width: 40px !important;
        height: 40px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        color: rgba(255,255,255,0.8) !important;
        border-radius: 8px !important;
        background: rgba(0,0,0,0.35) !important;
        backdrop-filter: blur(4px) !important;
        transition: background 0.2s !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
    }
    .gc-floating-menu:hover {
        background: rgba(255,255,255,0.15) !important;
        color: #fff !important;
    }
    .gc-floating-menu svg {
        width: 22px !important;
        height: 22px !important;
    }

    /* Floating 로그인 버튼 — PC 전용: 오른쪽 상단 */
    .gc-floating-login {
        position: fixed !important;
        top: 8px !important;
        right: 8px !important;
        z-index: 1200 !important;
        width: 40px !important;
        height: 40px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        color: rgba(255,255,255,0.8) !important;
        border-radius: 8px !important;
        background: rgba(0,0,0,0.35) !important;
        backdrop-filter: blur(4px) !important;
        transition: background 0.2s !important;
        text-decoration: none !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
    }
    .gc-floating-login:hover {
        background: rgba(255,255,255,0.15) !important;
        color: #fff !important;
    }
    .gc-floating-login svg {
        width: 22px !important;
        height: 22px !important;
    }

    /* Floating 옵션 버튼 — PC 전용: 오른쪽 중앙 */
    .gc-floating-options {
        position: fixed !important;
        top: 50% !important;
        right: 8px !important;
        transform: translateY(-50%) !important;
        z-index: 1200 !important;
        width: 40px !important;
        height: 40px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        color: rgba(255,255,255,0.8) !important;
        border-radius: 8px !important;
        background: rgba(0,0,0,0.35) !important;
        backdrop-filter: blur(4px) !important;
        transition: background 0.2s !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
    }
}
@media (min-width: 992px) {
    .gc-floating-options:hover {
        background: rgba(255,255,255,0.15) !important;
        color: #fff !important;
    }
    .gc-floating-options svg {
        width: 22px !important;
        height: 22px !important;
    }
}

/* PWA 아이콘 (오른쪽 상단) */
.pwa_book_icon {
    position: fixed;
    right: 20px;
    top: 80px; /* 기존 아이콘 아래에 배치 */
    z-index: 1200;
    cursor: pointer;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 10px;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

.pwa_book_icon:hover {
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
}

.pwa_book_icon svg {
    width: 24px;
    height: 24px;
}

/* PWA 설치 팝업 */
.pwa_install_popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #1a1a1a;
    padding: 30px;
    border-radius: 20px;
    z-index: 2000;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
    text-align: center;
    min-width: 350px;
    display: none;
}

.pwa_install_popup.active {
    display: block;
}

.pwa_install_popup .icon {
    font-size: 50px;
    margin-bottom: 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pwa_install_popup h2 {
    font-size: 24px;
    margin-bottom: 15px;
    color: #FFD700;
    font-weight: bold;
}

.pwa_install_popup p {
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 25px;
}

.pwa_install_popup button {
    background: #667eea;
    color: white;
    border: none;
    padding: 12px 30px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    margin: 5px;
    transition: all 0.2s;
    width: 80%;
    max-width: 300px;
}

.pwa_install_popup button:hover {
    background: #764ba2;
    transform: translateY(-2px);
}

.pwa_install_popup button.notification {
    background: linear-gradient(135deg, #FF8C00 0%, #FF6347 100%);
}

.pwa_install_popup button.install {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    font-weight: bold;
}

.pwa_install_popup button.secondary {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    width: auto;
    padding: 8px 20px;
    color: rgba(255, 255, 255, 0.6);
}