/* 키보드 대응 CSS 스타일 */

/* 
 * 모바일 디바이스와 PC 모바일 뷰 구분
 * - mobile-device: 실제 모바일 디바이스
 * - pc-mobile-view: PC에서 모바일 뷰 보기
 */

/* PC 모바일 뷰에서는 키보드 대응 스타일 비활성화 */
.pc-mobile-view.keyboard-active .gndr-main,
.pc-mobile-view.keyboard-active #sub-page-area,
.pc-mobile-view.keyboard-active #sub-page-area-super,
.pc-mobile-view.keyboard-active .sub-page-container {
    /* PC 모바일 뷰에서는 기존 스타일 유지 */
}

/* 실제 모바일 디바이스에서만 키보드 대응 */
.mobile-device.keyboard-active .gndr-main {
    /* adjustPan 모드에서는 gndr-main 위치 유지 */
    overflow-y: auto !important;
}

/* sub-page-area는 항상 고정 위치 유지 */
.keyboard-active #sub-page-area,
.keyboard-active #sub-page-area-super {
    /* position과 transform은 건드리지 않음 */
    overflow: visible !important;
}

/* sub-page-container는 항상 .show 상태의 위치 유지 */
.keyboard-active .sub-page-container {
    /* position absolute 유지 */
    /* left 값이 변경되지 않도록 보장 */
}

/* .show 클래스가 있는 컨테이너는 항상 보이도록 */
.keyboard-active .sub-page-container.show {
    left: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.keyboard-active .sub-page-content {
    height: auto !important;
    max-height: none !important; /* inline style의 max-height 제거 */
    min-height: calc(100% - var(--page-header-height, 0px)) !important;
    overflow-y: auto !important;
    padding-bottom: 20px !important;
}

/* Footer가 있는 페이지 */
.keyboard-active .sub-page-content.with-footer {
    min-height: calc(100% - var(--page-header-height, 0px) - var(--page-footer-height, 0px)) !important;
    padding-bottom: calc(var(--page-footer-height, 0px) + 20px) !important;
}

/* 포커스된 입력 필드 스크롤 마진 */
.keyboard-active input:focus,
.keyboard-active textarea:focus,
.keyboard-active .ns-input:focus {
    scroll-margin-top: 50px;
    scroll-margin-bottom: 50px;
}

/* Android WebView 특화 처리 */
.android.keyboard-active .gndr-main {
    transform: translateY(0) !important;
    transition: none !important;
}

/* 키보드 표시 시 부드러운 전환 */
body {
    transition: none; /* 키보드 전환 시 애니메이션 제거 */
}

/* 키보드 높이 CSS 변수 기본값 */
:root {
    --keyboard-height: 0px;
    --keyboard-visible: 0;
    --viewport-height: 100vh;
}

/* 키보드 활성화 시 viewport 높이 조정 */
.keyboard-active {
    --viewport-height: calc(100vh - var(--keyboard-height));
}

/* 로그인 페이지 키보드 대응 */
.keyboard-active .page-email-login .section-email-login {
    height: auto !important;
    min-height: calc(var(--viewport-height) - 20px) !important;
    padding-bottom: 80px !important; /* 버튼 공간 확보 */
}

/* 로그인 버튼 키보드 위에 sticky 고정 - ADJUST_RESIZE 모드 */
.keyboard-active .page-email-login .form-footer,
.keyboard-visible .page-email-login .form-footer {
    position: fixed !important;
    bottom: 0 !important; /* ADJUST_RESIZE 모드에서는 0 */
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    background: #ffffff !important;
    padding: 16px 20px !important;
    border-top: 1px solid #e0e0e0 !important;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.1) !important;
    z-index: 9999 !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}

/* 키보드가 숨겨질 때 원래 상태로 복원 */
body:not(.keyboard-active):not(.keyboard-visible) .page-email-login .form-footer {
    position: static !important;
    bottom: auto !important;
    width: auto !important;
    box-shadow: none !important;
    border-top: none !important;
    z-index: auto !important;
}

/* 로그인 버튼 스타일 조정 */
.keyboard-active .page-email-login .form-footer .ef-ripple.try-to-login {
    width: 100% !important;
    height: 48px !important;
    margin-bottom: 8px !important;
}

/* 패스워드 찾기 링크 */
.keyboard-active .page-email-login .form-footer .forget-password {
    text-align: center !important;
    display: block !important;
    margin: 0 !important;
}

/* 입력 필드 영역 보장 */
.keyboard-active .form-item {
    margin-bottom: 16px !important;
}

/* 스크롤 영역 확보 */
.keyboard-active .page-email-login .shrink-space {
    height: 20px !important;
    min-height: 20px !important;
}

/* 마지막 입력 필드 아래 여백 */
.keyboard-active .page-email-login .form-item:last-of-type {
    margin-bottom: 30px !important;
}

/* page-cafe-ganadara 채팅 입력창 키보드 처리 */
.keyboard-active .page-cafe-ganadara .hns-chat-input-container,
.keyboard-visible .page-cafe-ganadara .hns-chat-input-container {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 10001 !important;
}

/* 멀티라인 텍스트 입력 스타일 - 원본 스타일 유지 */
.hns-chat-input.ml-text {
    flex: 1 !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 25px !important;
    padding: 12px 20px !important;
    color: white !important;
    font-size: 16px !important;
    line-height: 20px !important;
    outline: none !important;
    min-height: 20px !important;
    max-height: 60px !important;
    resize: none !important;
    overflow-y: auto !important;
    transition: all 0.3s ease !important;
}

.hns-chat-input.ml-text::placeholder {
    color: rgba(255, 255, 255, 0.6) !important;
}

.hns-chat-input.ml-text:focus {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
}

/* 전송 버튼 스타일 - 원본 스타일 유지 */
.hns-send-button {
    background: #ff6b6b !important;
    border: none !important;
    border-radius: 50% !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    color: white !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    transition: all 0.3s ease !important;
}

.hns-send-button:hover {
    background: #ff5252 !important;
    transform: scale(1.1) !important;
}

.hns-send-button:active {
    transform: scale(0.95) !important;
}

/* Live Chat UI Fixes */

/* Chat mode specific styles - Hide header and live indicator in chat mode */
.live-fullscreen-overlay.chat-mode .live-dark-header {
    display: none !important;
}

.live-fullscreen-overlay.chat-mode .live-indicator {
    display: none !important;
}

/* Position heart button 8px above input container */
.live-fullscreen-overlay .live-heart-button {
    position: absolute;
    bottom: calc(88px + 8px) !important; /* Input container height + 8px gap */
    right: 24px;
    z-index: 85;
}

/* Position hearts container to match heart button */
.live-fullscreen-overlay .live-hearts-container {
    bottom: calc(88px + 8px) !important; /* Same as heart button */
}

/* Ensure chat container is seamless with input container */
.live-fullscreen-overlay .live-chat-container {
    position: absolute;
    bottom: 88px !important; /* Same as input container height - no gap */
    left: 0;
    right: 0;
    height: 300px; /* PC 기본 높이 설정 */
    max-height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 40;
}

/* Fix chat messages positioning for seamless connection */
.live-fullscreen-overlay .live-chat-messages {
    position: absolute;
    bottom: 16px; /* Adjust for seamless connection */
    left: 16px;
    right: 16px;
    height: 280px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .live-fullscreen-overlay .live-heart-button {
        bottom: calc(88px + 8px) !important;
        right: 16px;
    }
    
    .live-fullscreen-overlay .live-hearts-container {
        bottom: calc(88px + 8px) !important;
        right: 16px;
    }
    
    .live-fullscreen-overlay .live-chat-container {
        height: 250px !important; /* 모바일 높이 */
        max-height: 250px !important;
    }
}


/* Live 관련 Flex 구조 CSS */
.live-fullscreen-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9998; /* 다이얼로그보다 낮게 설정 */
}

.live-content-wrapper {
    height: 100vh; /* 고정 높이로 안정화 */
    position: relative;
    display: flex;
    flex-direction: column;
}

.live-viewport-wrapper {
    flex: 1; /* 남은 공간 모두 차지 */
    position: relative;
    overflow: hidden;
    min-height: 0; /* Flex 컨테이너 수축 허용 */
}

.live-chat-input-container {
    flex-shrink: 0; /* 고정 높이 유지 */
    height: 88px;
    min-height: 88px; /* 최소 높이 보장 */
    position: relative; /* absolute 대신 relative */
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    box-sizing: border-box;
    transform: translateZ(0); /* GPU 가속으로 위치 안정화 */
}

/* Live chat input 스타일 */
.live-chat-input {
    flex: 1;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 25px;
    padding: 12px 20px;
    color: white;
    font-size: 16px;
    line-height: 20px;
    outline: none;
    transform: translateZ(0); /* GPU 가속으로 위치 안정화 */
    will-change: auto; /* 불필요한 레이어 생성 방지 */
}

.live-chat-input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.live-chat-input:focus {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateZ(0); /* 포커스 시에도 위치 안정화 */
    will-change: auto; /* 불필요한 리플로우 방지 */
}

/* 채팅 모드 전환 시 부드러운 애니메이션 - 플리커링 방지 개선 */
.live-fullscreen-overlay.chat-mode .live-dark-header {
    transform: translateY(-100%);
    transition: transform 0.3s ease;
    visibility: hidden; /* 완전히 숨김 */
}

.live-fullscreen-overlay:not(.chat-mode) .live-dark-header {
    transform: translateY(0);
    transition: transform 0.3s ease;
    visibility: visible;
}

/* 입력창 포커스 시에도 컨테이너 위치 고정 */
.live-chat-input-container:focus-within {
    transform: translateZ(0);
}

/* Live send button 스타일 */
.live-send-button {
    background: #ff6b6b;
    border: none;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    min-width: 48px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}

.live-send-button:hover {
    background: #ff5252;
    transform: scale(1.05);
}

.live-send-button:active {
    transform: scale(0.95);
}

/* Live 채팅 메시지 프로필 이미지 스타일 */
.live-profile-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.live-profile-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* 채팅 입력창이 키보드에 붙었을 때 메시지 영역 패딩 */
.keyboard-active #hnsCharactersContainer {
    padding-bottom: 70px !important;
}

.keyboard-active #liveChatMessages {
    /*padding-bottom: 70px !important;*/
}

/* page-cafe-ganadara는 항상 fixed 유지 - 원본 스타일 유지 */
.page-cafe-ganadara .hns-chat-input-container {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 10001 !important;
    background: rgba(0, 0, 0, 0.9) !important;
    backdrop-filter: blur(20px) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
    padding: 20px 24px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
}

/* input 포커스 시에도 bottom 고정 강화 */
.page-cafe-ganadara .hns-chat-input.ml-text:focus {
    /* 기존 스타일 유지하면서 container가 움직이지 않도록 */
}

/* page-cafe-ganadara viewport wrapper - 고정 크기 유지 */
.hns-viewport-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

/* 키보드가 나타났을 때 viewport wrapper 높이 조정 - JavaScript로 처리 */
/* .keyboard-active .hns-viewport-wrapper,
.keyboard-visible .hns-viewport-wrapper {
    height: calc(100vh - var(--keyboard-height, 0px)) !important;
    transform: none !important;
} */

/* fullscreen overlay는 스크롤 가능 */
.keyboard-active .hns-fullscreen-overlay,
.keyboard-visible .hns-fullscreen-overlay {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    height: 100% !important;
}

/* 캐릭터 컨테이너 위치 조정 */
.hns-characters-container {
    position: absolute;
    bottom: 88px; /* 채팅 입력창 높이만큼 위로 */
    left: 0;
    right: 0;
    height: calc(100% - 60px - 88px); /* 헤더와 채팅창 제외 */
}

/* 키보드 활성 시 캐릭터 컨테이너 조정 */
.keyboard-active .hns-characters-container,
.keyboard-visible .hns-characters-container {
    /* 스크롤로 접근 가능하도록 패딩 추가 */
    padding-bottom: var(--keyboard-height, 0px) !important;
}

/* 키보드 오픈 시 캐릭터 소개보기 숨기기 */
.keyboard-active .hns-character-profile-container,
.keyboard-visible .hns-character-profile-container {
    display: none !important;
}

/* 키보드 오픈 시 캐릭터 컨테이너 숨기고 채팅 UI 표시 */
.keyboard-active .hns-characters-container,
.keyboard-visible .hns-characters-container {
    display: none !important;
}

/* 키보드 오픈 시 채팅 메시지 컨테이너 표시 */
.keyboard-active .hns-chat-messages-container,
.keyboard-visible .hns-chat-messages-container {
    display: block !important;
    position: absolute;
    top: 60px;
    bottom: 0px; /* viewport가 이미 키보드+입력창 높이만큼 조정됨 */
    left: 0;
    right: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px 20px 0px 20px;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
}

/* 메시지 래퍼 - 하단 정렬을 위한 설정 */
.keyboard-active .hns-chat-messages-wrapper,
.keyboard-visible .hns-chat-messages-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* 하단부터 쌓이도록 */
    min-height: 100%;
    box-sizing: border-box;
}


/* 채팅 메시지 스타일 */
.chat-message {
    display: flex;
    margin-bottom: 16px;
    align-items: flex-end;
}

/* 내 메시지 (오른쪽) */
.chat-message.my-message {
    justify-content: flex-end;
}

.chat-message.my-message .message-bubble {
    background: #FF0DDF;
    color: white;
    padding: 12px 16px;
    border-radius: 18px 18px 4px 18px;
    max-width: 70%;
    word-wrap: break-word;
}

/* AI 메시지 (왼쪽) */
.chat-message.ai-message {
    justify-content: flex-start;
    align-items: flex-start;
    gap: 8px;
}

.chat-message.ai-message .message-profile {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    margin-top: 4px;
}

.chat-message.ai-message .message-profile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.chat-message.ai-message .message-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: 70%;
}

.chat-message.ai-message .message-name {
    font-size: 12px;
    color: rgba(255, 255, 255, 1);
    font-weight: 500;
    margin-left: 8px;
}

.chat-message.ai-message .message-bubble {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    padding: 12px 16px;
    border-radius: 4px 18px 18px 18px;
    word-wrap: break-word;
}

/* scene-community에서 max-height 유지 */
.keyboard-active .scene-community .tab-content.live {
    max-height: calc(100vh - var(--keyboard-height, 0px) - 100px) !important;
    overflow-y: auto !important;
}

/* ml-text 기본 스타일 - page-cafe-ganadara에서는 원본 스타일 사용 */
.page-email-login .ml-text {
    width: calc(100% - 40px);
    height: 20px;
    border-radius: 8px;
    min-height: 20px;
    padding: 18px 20px;
    border: 1px solid var(--border-color, #e0e0e0);
    font-size: 16px;
    line-height: 20px;
    font-weight: 400;
    color: #28274f;
    background-color: #ffffff;
    box-sizing: unset;
    outline: none;
}

.page-email-login .ml-text::placeholder {
    font-size: 16px;
    line-height: 20px;
    font-weight: 400;
    color: #adadad;
}

/* page-community-write 키보드 대응 - adjustResize 모드 최적화 */
/* 실제 모바일 디바이스에서만 적용 */
.mobile-device.keyboard-active .page-community-write {
    /* adjustResize 모드에서는 뷰포트가 자동 조정됨 */
}

.mobile-device.keyboard-active .page-community-write .page-content {
    /* 스크롤 가능하도록 설정 */
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    /* adjustResize에서는 키보드 높이만큼 뷰포트가 줄어들므로 패딩 최소화 */
    padding-bottom: 20px !important;
}

/* 키보드 활성 시에도 페이지 컨테이너는 원래 위치 유지 */
.keyboard-active .sub-page-container[data-page*="community-write"] {
    /* position absolute와 transform 유지 - 변경하지 않음 */
}

/* PC 모바일 뷰에서는 키보드 대응 스타일 최소화 */
.pc-mobile-view.keyboard-active .page-community-write {
    /* PC에서는 특별한 처리 불필요 */
}

/* panel-community-comment 키보드 대응 - adjustResize 모드 */
/* 실제 모바일 디바이스에서만 적용 */
.mobile-device.keyboard-active .panel-community-comment {
    /* adjustResize 모드에서는 뷰포트가 자동 조정됨 */
}

.mobile-device.keyboard-active .panel-community-comment .panel-footer {
    /* adjustResize에서는 footer가 키보드 바로 위에 위치 */
    /* 추가 조정 불필요 */
}

.mobile-device.keyboard-active .panel-community-comment .panel-content {
    /* 스크롤 가능하도록 설정 */
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    /* 키보드 위 footer 공간 확보 */
    padding-bottom: 80px !important;
}

/* PC 모바일 뷰에서는 기존 방식 유지 */
.pc-mobile-view.keyboard-active .panel-community-comment .panel-footer {
    /* PC에서는 transform으로 위치 조정 */
    transform: translateY(calc(-1 * var(--keyboard-height, 0px))) !important;
}

/* 헤더 레이아웃 수정 - 제목 왼쪽, 탈출버튼 오른쪽 */
.page-cafe-ganadara .hns-dark-header {
    justify-content: space-between !important;
    padding: 0 16px !important; /* 패딩 줄임 */
}

.page-cafe-ganadara .hns-neon-title {
    position: static !important; /* absolute 해제 */
    transform: none !important;
    font-size: 20px !important; /* 폰트 크기 줄임 */
    white-space: nowrap !important; /* 한 줄로 유지 */
    flex: 1 !important;
    text-align: left !important;
    margin-right: 10px !important;
}

.page-cafe-ganadara .hns-exit-btn {
    order: 2 !important; /* 오른쪽으로 이동 */
    width: 36px !important;
    height: 36px !important;
    flex-shrink: 0 !important;
}