/* 채팅 위젯 컨테이너: 우측 하단에 고정 */
#chat-widget-container {
    position: fixed;
    bottom: 30px;
    right: 50%;
    margin-right:-660px;
    z-index: 1000;
}

/* 채팅 시작 버튼 */
#chat-open-btn {
    width: 60px;
    height: 60px;
    background: url('../images/icon-chatbot2.png') no-repeat;
    background-size: 60px 60px;
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.2s;
}
#chat-open-btn:hover {
    transform: scale(1.1);
}

/* 채팅창 */
#chat-window {
    width: 350px;
    height: 500px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: opacity 0.3s, transform 0.3s;
    transform-origin: bottom right;
}

/* 채팅창 숨기기/보이기 애니메이션 */
#chat-window.hidden, #chat-open-btn.hidden {
    display:none;
    opacity: 0;
    transform: scale(0);
    pointer-events: none; /* 숨겨졌을 때 클릭 안 되게 */
}

/* 헤더 */
#chat-header {
    background: linear-gradient(135deg,#0166ff, #8e54e9);
    color: white;
    padding: 15px;
    font-weight: 500;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#chat-close-btn {
    background: none;
    border: none;
    color: white;
    font-size: 20px;
    cursor: pointer;
    height:20px;
}

#chat-close-btn img{width:18px;height:18px;vertical-align: top}

/* 메시지 영역 */
#chat-messages {
    flex-grow: 1;
    padding: 15px;
    overflow-y: auto;
    background-color: #f9f9f9;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* 메시지 말풍선 공통 스타일 */
.message {
    padding: 10px 15px;
    border-radius: 18px;
    max-width: 80%;
    word-wrap: break-word;
}

/* 봇 메시지 (왼쪽) */
.bot-message {
    background-color: #e9e9eb;
    align-self: flex-start;
}

/* 사용자 메시지 (오른쪽) */
.user-message {
    background-color: #007bff;
    color: white;
    align-self: flex-end;
}

/* 입력 영역 */
#chat-footer {
    display: flex;
    padding: 10px;
    border-top: 1px solid #ddd;
}
#chat-input {
    flex-grow: 1;
    border: 1px solid #ccc;
    border-radius: 20px;
    padding: 10px 15px;
    margin-right: 10px;
}
#chat-send-btn {
    background: linear-gradient(135deg,#0166ff, #8e54e9);
    color: white;
    border: none;
    border-radius: 20px;
    padding: 10px 20px;
    cursor: pointer;
}
/* ================================== */
/* 말풍선 티저 애니메이션 스타일        */
/* ================================== */
#teaser-bubble {
    position: absolute;
    bottom: 70px; /* 버튼과의 간격 */

    /* ▼▼▼ 여기가 핵심 수정 부분 ▼▼▼ */

    /* 1. 위치 기준점 수정 */
    right: 5px; /* 오른쪽 정렬 위치를 재조정하여 중심 맞춤 */

    /* 2. 가로로만 늘어나도록 설정 */
    white-space: nowrap; /* 줄바꿈을 하지 않음 (세로 고정) */

    /* 3. 불필요한 속성 제거 */
    /* max-width, text-align 속성은 더 이상 필요 없으므로 삭제합니다. */

    /* ▲▲▲ 여기가 핵심 수정 부분 ▲▲▲ */

    background: #202230;
    color: white;
    padding: 12px 18px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    font-size: 14px;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

/* 말풍선 꼬리 위치는 그대로 유지합니다 (오른쪽) */
#teaser-bubble::after {
    content: '';
    position: absolute;
    top: 100%;
    right: 17px;
    left: auto;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #202230;
}

#teaser-bubble.hidden {
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
}

#teaser-bubble.hidden {
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
}


/* 모바일 환경에서는 말풍선 위치를 버튼에 맞춰 왼쪽으로 이동 */
@media (max-width: 768px) {
    #teaser-bubble {
        right: auto;
        left: 5px;
    }

    #teaser-bubble::after {
        right: auto;
        left: 15px;
    }
}
@media (max-width: 768px) {

    /* 1. 채팅 위젯 컨테이너 위치 미세 조정 */
    #chat-widget-container {
        bottom: 80px;
        left: 10px;
    }

    /* 2. 채팅 시작 버튼 크기 살짝 줄이기 */
    #chat-open-btn {
        width: 55px;
        height: 55px;
    }

    /* 3. 채팅창을 전체 화면으로 확장 */
    #chat-window {
        /* 위치와 크기를 뷰포트 전체로 설정 */
        width: 100vw;
        height: 100dvh;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;

        /* 데스크탑 스타일 초기화 */
        border-radius: 0;
        box-shadow: none;

        /* 애니메이션 기준점을 중앙으로 변경 */
        transform-origin: center;
    }

    /* 4. 헤더와 입력창 패딩을 줄여 공간 확보 */
    #chat-header, #chat-footer {
        padding: 12px 15px;
    }
}