/* ------------------------------------------------ */
/* 1. 폰트 파일 등록 */
/* ------------------------------------------------ */
@font-face {
    font-family: 'Pretendard';
    src: url('fonts/Pretendard-Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Pretendard';
    src: url('fonts/Pretendard-SemiBold.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
}

/* ------------------------------------------------ */
/* 2. 기본 리셋 및 레이아웃 */
/* ------------------------------------------------ */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

body {
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 500;
    background-color: #f5f5f5;
    display: flex;
    justify-content: center;
    align-items: center;
}

.chatbot-container {
    width: 100%;
    max-width: 400px;
    height: 100%;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

/* ------------------------------------------------ */
/* [추가] 상단 헤더 스타일 */
/* ------------------------------------------------ */
.chat-header {
    width: 100%;
    height: 60px;
    /* 헤더 높이 고정 */
    background-color: #ffffff;
    display: flex;
    align-items: center;
    padding: 0 20px;
    border-bottom: 1px solid #f0f0f0;
    /* 하단 구분선 */
    flex-shrink: 0;
    /* 화면이 작아져도 헤더 크기는 줄어들지 않음 */
    z-index: 10;
}

.header-back-btn {
    background: none;
    border: none;
    font-size: 16px;
    font-weight: 600;
    /* SemiBold */
    color: #333;
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 0;
    font-family: 'Pretendard', sans-serif;
    /* 폰트 통일 */
}

.header-back-btn .back-icon {
    margin-right: 8px;
    /* 화살표와 텍스트 사이 간격 */
    font-size: 14px;
    color: #1B285B;
    /* 웰컴 타이틀과 같은 남색 계열로 포인트 */
    font-weight: bold;
}

.header-back-btn:hover {
    opacity: 0.7;
    /* 마우스 올렸을 때 살짝 흐려짐 */
}

/* ------------------------------------------------ */
/* 3. 채팅 본문 영역 */
/* ------------------------------------------------ */
.chat-body {
    flex-grow: 1;
    overflow-y: auto;
    padding: 20px;
    /* 배경 그라데이션 + 이미지 */
    background-image:
        linear-gradient(180deg, rgba(240, 248, 255, 0.9) 0%, rgba(180, 210, 255, 0.95) 100%),
        url('back_img.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
}

.chat-body::-webkit-scrollbar {
    display: none;
}

/* ------------------------------------------------ */
/* 4. 상단 웰컴 버블 (전시장 찾기...) */
/* ------------------------------------------------ */
/* 🌟 1. 추가: 'CES' 이미지 스타일 */
.ces-logo-text {
    height: 13px;
    /* 텍스트 높이와 비슷하게 맞춤 (필요시 조절) */
    width: auto;
    vertical-align: middle;
    /* 텍스트 중간에 오도록 정렬 */
    margin: 0 0 2px 0px;
    /* 양옆 간격 미세 조정 */
    /* 이미지 자체의 여백이 있다면 제거 */
    display: inline-block;
}


.text-mint {
    color: #00c6ba;
    /* 요청하신 민트색 */
    font-weight: 700;
    /* 조금 더 강조 (선택사항) */
}

.welcome-bubble {
    width: 100%;
    background-color: rgba(255, 255, 255, 0.4);
    /* 아주 연한 회색 */
    border-radius: 20px;
    /* 더 둥글게 */
    padding: 10px 20px;
    margin-bottom: 0px;
    text-align: left;
    position: relative;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
    /* 🌟 배경이 투명해졌으므로 내용물이 잘 보이게 보정 (선택사항) */
    backdrop-filter: blur(5px);
    /* 배경 흐림 효과 */
    -webkit-backdrop-filter: blur(5px);
}

.welcome-text-content {
    position: relative;
    z-index: 2;
    padding-right: 70px;
    /* 텍스트가 이미지와 겹치지 않게 여백 확보 */
}


.welcome-title {
    font-size: 15px;
    font-weight: 600;
    color: #1B285B;
    /* 🌟 요청하신 헤드 텍스트 컬러 */
    margin-bottom: 8px;
    line-height: 1.4;
    word-break: keep-all;
}

.welcome-text {
    font-size: 13px;
    color: #666;
    font-weight: 500;
    line-height: 1.4;
    margin-bottom: 0;
    padding: 10px 0px 5px 0;
}

.welcome-image-content {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 80px;
    /* 로고 크기 고정 */
    z-index: 1;
}

.welcome-logo {
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* ------------------------------------------------ */
/* 5. 초기 인사말 (반가워요 매비예요!) - 카카오톡 프로필 스타일 */
/* ------------------------------------------------ */
/* ------------------------------------------------ */
/* 5. 초기 인사말 (반가워요 매비예요!) - 수직 정렬 수정 */
/* ------------------------------------------------ */

/* ------------------------------------------------ */
/* 5. 초기 인사말 (완전 독립 스타일) */
/* ------------------------------------------------ */

/* ------------------------------------------------ */
/* 5. 초기 인사말 (완전 독립 스타일) */
/* ------------------------------------------------ */

/* 1. 전체 컨테이너: 세로 정렬 & 중앙 정렬 */
.initial-greeting-wrapper {
    display: flex;
    flex-direction: column;
    /* 위에서 아래로 배치 */
    align-items: left;
    /* 좌우 가운데 정렬 */
    justify-content: center;
    margin-top: 20px;
    margin-bottom: 10px;
    width: 100%;
    gap: 15px;
    /* 이미지와 텍스트 사이 간격 */
}

/* 2. 아바타 이미지: 원본 비율 그대로 크게 */
.greeting-avatar {
    width: 60px;
    /* 큼지막하게 */
    height: 60px;

    /* 배경/테두리/그림자/둥글기 모두 제거 (원본 이미지 강조) */
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    margin: 0;

    display: flex;
    justify-content: center;
    align-items: left;
}

.greeting-avatar img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* 이미지 비율 유지 */
}

/* 3. 텍스트 말풍선 */
.greeting-message-bubble {
    background-color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.4;
    padding: 15px 25px;

    border-radius: 25px;
    /* 둥글게 */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    /* 살짝 그림자 */
    border-top-left-radius: 4px;

    text-align: left;
    word-break: keep-all;
    width: fit-content;
    max-width: 100%;
}

/* ------------------------------------------------ */
/* 6. 퀵 액션 버튼 (텍스트 길이에 맞춤) */
/* ------------------------------------------------ */
.quick-actions-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    margin-bottom: 20px;
    align-items: flex-start;
    /* 왼쪽 정렬 */
}

/* ------------------------------------------------ */
/* 6. 퀵 액션 버튼 (수정됨) */
/* ------------------------------------------------ */

.pill-button {
    width: fit-content;
    max-width: 100%;

    padding: 12px 20px;
    background-color: #ffffff;
    border: none;

    /* 말풍선 모양 */
    border-radius: 25px 25px 25px 5px;

    font-size: 15px;
    font-weight: 700;
    color: #333;
    text-align: left;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    cursor: pointer;
    transition: all 0.2s ease;

    display: inline-flex;
    align-items: center;
    line-height: 1.4;

    /* 🌟 핵심 수정: 줄바꿈 방지 */
    white-space: nowrap;

    /* 만약 텍스트가 너무 길어서 화면을 넘어가면 말줄임표(...) 처리하려면 아래 주석 해제 */
    /* overflow: hidden; */
    /* text-overflow: ellipsis; */
}

.pill-button .btn-icon {
    margin-right: 8px;
    font-size: 13px;
    flex-shrink: 0;
}

.pill-button:active {
    background-color: #00c6ba;
    /* 클릭 시 테마 색상 */
    color: white;
    transform: scale(0.98);
}

/* ------------------------------------------------ */
/* 7. 일반 채팅 메시지 (정렬 수정) */
/* ------------------------------------------------ */
.message {
    display: flex;
    margin-bottom: 15px;
    width: 100%;
    /* 🌟 상단 라인 맞춤 (아바타가 위로 붕 뜨지 않게) */
    align-items: flex-start;
}

/* 🤖 봇 메시지 */
/* ------------------------------------------------ */
/* 7. 일반 채팅 메시지 (정렬 및 모양 수정) */
/* ------------------------------------------------ */

/* 🤖 봇 메시지 전체 컨테이너 */
.bot-message {
    display: flex;
    align-items: flex-start;
    /* 상단 정렬 (아바타와 말풍선 높이 맞춤) */
    justify-content: flex-start;
    /* 🌟 왼쪽 정렬 */
    width: 100%;
    margin-bottom: 15px;
}

/* 봇 아바타 */
.bot-avatar {
    width: 36px;
    height: 36px;
    margin-right: 10px;
    /* 말풍선과의 간격 */
    flex-shrink: 0;

    /* 원형 아바타 스타일 유지 */
    background-color: transparent;
    border-radius: 50%;
    overflow: hidden;

    /* 위치 미세 조정 (필요시) */
    margin-top: 0;
}

.bot-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 💬 봇 말풍선 스타일 (왼쪽 위 뾰족하게) */
.bot-bubble {
    background-color: #ffffff;
    padding: 12px 18px;

    /* 🌟 핵심: 왼쪽 상단만 뾰족하게 (나머지는 둥글게) */
    border-top-left-radius: 0;
    /* 뾰족한 모서리 */
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;

    font-size: 15px;
    line-height: 1.5;
    color: #333;

    /* 그림자 효과 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);

    max-width: 80%;
    /* 너무 길어지지 않게 제한 */
    word-break: break-word;
}

/* 👤 사용자 메시지 */
.user-message {
    justify-content: flex-end;
}

.user-bubble {
    background-color: #00c6ba;
    /* 🌟 요청하신 색상 */
    color: white;
    padding: 12px 18px;

    /* 🌟 말풍선 모서리 */
    border-radius: 20px;
    border-top-right-radius: 4px;

    font-size: 15px;
    line-height: 1.5;
    box-shadow: 0 2px 5px rgba(0, 198, 186, 0.2);
    max-width: 80%;
    word-break: break-word;
    text-align: left;
}

/* ------------------------------------------------ */
/* 8. 하단 입력창 */
/* ------------------------------------------------ */
.chat-input-area {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    background-color: #ffffff;
    border-top: 1px solid #f0f0f0;
    gap: 10px;
    flex-shrink: 0;
}

#message-input {
    flex-grow: 1;
    padding: 12px 20px;
    border: 1px solid #e0e0e0;
    background-color: #f9f9f9;
    border-radius: 25px;
    font-size: 15px;
    outline: none;
    transition: all 0.2s ease;
}

#message-input:focus {
    background-color: #ffffff;
    border-color: #00c6ba;
    box-shadow: 0 0 0 3px rgba(0, 198, 186, 0.1);
}

#send-button {
    width: 45px;
    height: 45px;
    background-color: #00c6ba;
    /* 🌟 버튼 색상 변경 */
    color: white;
    border: none;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    cursor: pointer;
    box-shadow: 0 3px 8px rgba(0, 198, 186, 0.3);
    transition: all 0.2s;
}

#send-button:hover {
    background-color: #00a89e;
    transform: scale(1.05);
}

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