/* 🤖 Sapie 챗봇 핵심 스타일 - chatbot-core.css */

/* 컨테이너 및 기본 위치 */
#chatbot-container {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    z-index: 1001;
}

/* 스크롤 버튼 */
#backtotop {
    position: fixed !important;
    bottom: 100px !important;
    right: 30px !important;
    z-index: 999 !important;
    transition: all 0.4s ease !important;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 15px rgba(0,123,255, 0.4);
    border: none !important;
    outline: none !important;
    cursor: pointer;
}

#backtotop i,
#backtotop .icon,
#backtotop::before,
#backtotop > * {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    color: white !important;
    font-size: 18px !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 스크롤 버튼 숨김/표시 상태 */
#backtotop.hidden-by-chatbot {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: scale(0.8) translateY(10px) !important;
    pointer-events: none !important;
}

#backtotop.visible {
    opacity: 1 !important;
    visibility: visible !important;
    transform: scale(1) translateY(0) !important;
    pointer-events: auto !important;
}

#backtotop:hover {
    transform: translateY(-2px) scale(1.05) !important;
    box-shadow: 0 6px 20px rgba(0,123,255, 0.6) !important;
}

#backtotop:active {
    transform: translateY(0) scale(0.95) !important;
}

/* 챗봇 창 기본 구조 */
#chatbot-window {
    display: none;
    flex-direction: column;
    width: 380px;
    height: fit-content !important;
    max-height: 700px !important;
    min-height: 500px !important;
    transition: all 0.3s ease-in-out;
    border-radius: 0.5rem;
    position: absolute;
    bottom: 70px;
    right: 0;
    box-shadow: 0 15px 50px rgba(167,183,251, 0.3);
    border: 1px solid rgba(204,212,251, 0.5);
    background: white;
    overflow: hidden;
    transform-origin: bottom right;
}

/* 메시지 영역 */
#chat-messages {
    flex: 1 1 auto !important;
    overflow-y: auto;
    background: linear-gradient(to bottom, #f8f9ff 0%, #ffffff 100%) !important;
    padding: 18px 15px 10px 15px !important;
    scroll-behavior: smooth;
    min-height: 350px !important;
    max-height: 450px !important;
    margin: 0 !important;
}

/* 입력 영역 */
#chat-input-area {
    flex: 0 0 auto !important;
    background: linear-gradient(to right, #f8f9ff 0%, #ffffff 100%) !important;
    border-top: 1px solid rgba(167,183,251, 0.2) !important;
    border-bottom-left-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
    padding: 15px 15px !important;
    display: flex;
    gap: 12px;
    align-items: center;
    height: 70px !important;
    min-height: 70px !important;
    max-height: 70px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* 플로팅 버튼 */
#chatbot-icon {
    position: relative;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 50%;
    background: linear-gradient(135deg, #ccd4fb 0%, #a7b7fb 100%) !important;
    box-shadow: 0 4px 15px rgba(167,183,251, 0.4);
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid rgba(255, 255, 255, 0.9) !important;
    padding: 0 !important;
    overflow: visible !important;
}

#chatbot-icon:hover {
    transform: translateY(-3px) scale(1.1);
    box-shadow: 0 8px 25px rgba(167,183,251, 0.6);
    border-color: rgba(255, 255, 255, 1) !important;
}

#chatbot-icon:active {
    transform: translateY(-1px) scale(0.95);
}

/* 🤖 Sapie 챗봇 플로팅 버튼 호버 애니메이션 수정 */

/* 플로팅 아바타 기본 설정 - 부드러운 전환 적용 */
#chatbot-float-avatar {
    width: 35px !important;
    height: 35px !important;
    border-radius: 50%;
    object-fit: cover;
    /* 부드러운 전환 효과 추가 */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) !important;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: optimize-contrast;
    backface-visibility: hidden;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

/* 🔧 호버 효과 - GIF는 기존 크기 그대로 유지 */
/* #chatbot-icon:hover #chatbot-float-avatar {
    width: 70px !important; 
    height: 70px !important; 
    filter: brightness(1.1) saturate(1.2) drop-shadow(0 4px 8px rgba(0,0,0,0.15));
    transform: translate(-50%, -50%) !important; 
} */

/* 🔧 클릭 효과 - GIF는 기존 크기 그대로 유지 */
/* #chatbot-icon:active #chatbot-float-avatar {
    width: 75px !important;
    height: 75px !important; 
    transform: translate(-50%, -50%) rotate(15deg) !important; 
    filter: brightness(1.2) saturate(1.3) drop-shadow(0 4px 8px rgba(0,0,0,0.2));
    transition: all 0.15s ease-out !important; 
} */

/* 반응형 - 태블릿 */
@media (max-width: 768px) {
    #chatbot-float-avatar {
        width: 30px !important;
        height: 30px !important;
    }
    
    #chatbot-icon:hover #chatbot-float-avatar {
        width: 60px !important; /* 기존 크기로 복원 (GIF용) */
        height: 60px !important; /* 기존 크기로 복원 (GIF용) */
    }
    
    #chatbot-icon:active #chatbot-float-avatar {
        width: 65px !important; /* 기존 크기로 복원 (GIF용) */
        height: 65px !important; /* 기존 크기로 복원 (GIF용) */
    }
}

/* 반응형 - 모바일 */
@media (max-width: 480px) {
    #chatbot-float-avatar {
        width: 28px !important;
        height: 28px !important;
    }
    
    #chatbot-icon:hover #chatbot-float-avatar {
        width: 56px !important; /* 기존 크기로 복원 (GIF용) */
        height: 56px !important; /* 기존 크기로 복원 (GIF용) */
    }
    
    #chatbot-icon:active #chatbot-float-avatar {
        width: 60px !important; /* 기존 크기로 복원 (GIF용) */
        height: 60px !important; /* 기존 크기로 복원 (GIF용) */
    }
}

/* 반응형 - 소형 모바일 */
@media (max-width: 360px) {
    #chatbot-float-avatar {
        width: 26px !important;
        height: 26px !important;
    }
    
    #chatbot-icon:hover #chatbot-float-avatar {
        width: 52px !important; /* 기존 크기로 복원 (GIF용) */
        height: 52px !important; /* 기존 크기로 복원 (GIF용) */
    }
    
    #chatbot-icon:active #chatbot-float-avatar {
        width: 56px !important; /* 기존 크기로 복원 (GIF용) */
        height: 56px !important; /* 기존 크기로 복원 (GIF용) */
    }
}

/* 🆕 추가: 부드러운 PNG ↔ GIF 전환을 위한 설정 */
#chatbot-icon {
    /* 컨테이너에도 부드러운 전환 적용 */
    transition: all 0.3s ease !important;
}

/* 🆕 추가: 애니메이션 성능 최적화 */
#chatbot-float-avatar {
    /* GPU 가속 활성화 */
    will-change: transform, filter;
    /* 레이어 분리로 성능 향상 */
    transform-style: preserve-3d;
}

/* 🆕 추가: 호버 상태에서 더 부드러운 전환 */
#chatbot-icon:hover {
    /* 컨테이너 호버 효과도 부드럽게 */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    transform: translateY(-2px) scale(1.05) !important; /* 컨테이너 자체도 약간 위로 */
}

/* 🆕 컨테이너 클릭 효과 */
#chatbot-icon:active {
    transform: translateY(0) scale(0.98) !important; /* 컨테이너 클릭 시 약간 눌림 */
}

/* 🆕 접근성: 애니메이션 줄이기 설정 존중 */
@media (prefers-reduced-motion: reduce) {
    #chatbot-float-avatar,
    #chatbot-icon {
        transition: none !important;
    }
    
    #chatbot-icon:hover #chatbot-float-avatar {
        transform: translate(-50%, -50%) !important; /* 크기 변화만 유지, scale 제거 */
        width: 70px !important; /* 기존 GIF 크기 유지 */
        height: 70px !important; /* 기존 GIF 크기 유지 */
    }
    
    #chatbot-icon:active #chatbot-float-avatar {
        transform: translate(-50%, -50%) !important; /* 회전 효과 제거 */
        width: 75px !important; /* 기존 GIF 크기 유지 */
        height: 75px !important; /* 기존 GIF 크기 유지 */
    }
    
    #chatbot-icon:hover {
        transform: none !important; /* 컨테이너 애니메이션 제거 */
    }
    
    #chatbot-icon:active {
        transform: none !important; /* 컨테이너 애니메이션 제거 */
    }
}
#chatbot-float-avatar[src*=".png"] {
    width: 35px !important;
    height: 35px !important;
}

#chatbot-float-avatar[src*=".gif"] {
    /* GIF 기본 크기도 작게 - JavaScript에서 제어 */
    width: 35px !important;
    height: 35px !important;
}

/* 반응형 - 태블릿 */
@media (max-width: 768px) {
    #chatbot-float-avatar {
        width: 30px !important;
        height: 30px !important;
    }
    
    #chatbot-float-avatar[src*=".png"],
    #chatbot-float-avatar[src*=".gif"] {
        width: 30px !important;
        height: 30px !important;
    }
}

/* 반응형 - 모바일 */
@media (max-width: 480px) {
    #chatbot-float-avatar {
        width: 28px !important;
        height: 28px !important;
    }
    
    #chatbot-float-avatar[src*=".png"],
    #chatbot-float-avatar[src*=".gif"] {
        width: 28px !important;
        height: 28px !important;
    }
}

/* 반응형 - 소형 모바일 */
@media (max-width: 360px) {
    #chatbot-float-avatar {
        width: 26px !important;
        height: 26px !important;
    }
    
    #chatbot-float-avatar[src*=".png"],
    #chatbot-float-avatar[src*=".gif"] {
        width: 26px !important;
        height: 26px !important;
    }
}

/* 컨테이너 호버 효과는 유지 */
#chatbot-icon:hover {
    transform: translateY(-2px) scale(1.05) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#chatbot-icon:active {
    transform: translateY(0) scale(0.98) !important;
}
/* 말풍선 툴팁 기본 스타일 */
/* 툴팁 기본 스타일 강화 */
.chatbot-tooltip {
    position: absolute;
    right: 60px; /* 챗봇 버튼 왼쪽에 위치 */
    top: 50%;
    transform: translateY(-50%);
    background: linear-gradient(135deg, #ffffff 0%, #f8f9ff 100%);
    border: 2px solid rgba(167,183,251, 0.3);
    border-radius: 20px;
    padding: 12px 16px;
    box-shadow: 0 8px 25px rgba(167,183,251, 0.4);
    white-space: nowrap;
    font-size: 14px;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    pointer-events: none;
    max-width: 200px;
    text-align: center;
    z-index: 1002; /* 챗봇보다 위에 */
}

/* 툴팁 표시 상태 - !important 추가 */
.chatbot-tooltip.show {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(-50%) translateX(0) !important;
}

/* 말풍선 꼬리 (오른쪽 끝) - 위치 조정 */
.chatbot-tooltip::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -10px; /* 기존 -8px에서 -10px로 */
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 0 10px 10px; /* 크기 조정 */
    border-color: transparent transparent transparent #ffffff;
    filter: drop-shadow(2px 0 2px rgba(167,183,251, 0.2));
    z-index: 1003;
}

/* 툴팁 펄스 애니메이션 강화 */
.chatbot-tooltip.pulse {
    animation: tooltipPulse 2s ease-in-out infinite !important;
}

@keyframes tooltipPulse {
    0%, 100% {
        transform: translateY(-50%) scale(1);
        box-shadow: 0 8px 25px rgba(167,183,251, 0.4);
    }
    50% {
        transform: translateY(-50%) scale(1.02);
        box-shadow: 0 10px 30px rgba(167,183,251, 0.6);
    }
}
/* 툴팁 텍스트 스타일 조정 */
.chatbot-tooltip .tooltip-title {
    font-weight: 800;
    color: #2d3748;
    margin-bottom: 4px; /* 간격 약간 증가 */
    font-size: 15px; /* 폰트 크기 약간 증가 */
    letter-spacing: -0.02em;
    line-height: 1.3; /* 줄 높이 추가 */
}

.chatbot-tooltip .tooltip-subtitle {
    font-weight: 300;
    color: #718096;
    font-size: 13px; /* 폰트 크기 약간 증가 */
    opacity: 0.9;
    line-height: 1.3; /* 줄 높이 추가 */
}
/* X 버튼 스타일 */

/* X 버튼 위치 조정 */
.tooltip-close-btn {
    position: absolute;
    top: 10px; /* 위쪽 여백 증가 */
    right: 5px; /* 오른쪽 여백 증가 */
    width: 24px; /* 크기 약간 증가 */
    height: 24px;
    border: 1px solid rgba(167, 183, 251, 0.2);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 249, 255, 0.8) 100%);
    color: #4a5568;
    border-radius: 50%;
    font-size: 14px; /* 폰트 크기 약간 증가 */
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1004;
    padding: 0;
    opacity: 0.8;
    box-shadow: 0 2px 6px rgba(167, 183, 251, 0.2);
}


.tooltip-close-btn:hover {
    background: linear-gradient(135deg, rgba(167, 183, 251, 0.2) 0%, rgba(167, 183, 251, 0.1) 100%);
    border-color: rgba(167, 183, 251, 0.4);
    color: #2d3748;
    opacity: 1;
    transform: scale(1.15);
    box-shadow: 0 4px 12px rgba(167, 183, 251, 0.3);
}

.tooltip-close-btn:active {
    transform: scale(0.9);
    box-shadow: 0 2px 4px rgba(167, 183, 251, 0.2);
}

/* 툴팁 컨테이너 크기 확대 */
.chatbot-tooltip {
    position: absolute;
    right: 60px;
    top: 50%;
    transform: translateY(-50%);
    background: linear-gradient(135deg, #ffffff 0%, #f8f9ff 100%);
    border: 2px solid rgba(167,183,251, 0.3);
    border-radius: 20px;
    padding: 18px 30px 15px 18px; /* 상단, 우측, 하단, 좌측 패딩 증가 */
    box-shadow: 0 8px 25px rgba(167,183,251, 0.4);
    white-space: nowrap;
    font-size: 14px;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    pointer-events: none;
    min-width: 220px; /* 최소 너비 증가 */
    max-width: 280px; /* 최대 너비 증가 */
    text-align: center;
    z-index: 1002;
}

/* 표시 상태일 때 포인터 이벤트 활성화 */
.chatbot-tooltip.show {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important; /* X 버튼 클릭 가능하게 */
    transform: translateY(-50%) translateX(0) !important;
}
/* 🔗 URL 라우팅 관련 스타일 */

/* URL로 열린 챗봇 강조 표시 (선택사항) */
#chatbot-window.url-opened {
    border: 2px solid #4CAF50;
    box-shadow: 0 15px 50px rgba(76, 175, 80, 0.3);
}

/* URL 공유 버튼 (향후 추가 시) */
.url-share-btn {
    position: absolute;
    top: 10px;
    right: 50px;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 20px;
    padding: 5px 12px;
    font-size: 12px;
    color: #333;
    cursor: pointer;
    transition: all 0.2s ease;
}

.url-share-btn:hover {
    background: rgba(255, 255, 255, 0.4);
    transform: scale(1.05);
}

/* 모바일에서 URL 툴팁 */
@media (max-width: 768px) {
    .url-share-btn {
        display: none; /* 모바일에서는 숨김 */
    }
}