/* ==========================================================================
 * Ask Goodlugg AI 공통 위젯 (add-askai-web-widget)
 * - KD v1 인라인 위젯(koreaDelivery/index.html)의 CSS 를 이식
 * - 전 페이지 플로팅 버튼(FAB) 스타일 추가
 * 브랜드: 보라 #512772 (hover #64318f) · 포인트 #FF5607 · AI 말풍선 테두리 #E4DAFC
 * ========================================================================== */

/* ---- 런처 박스(메인 전용, 연두박스) ------------------------------------ */
.ai-section-container {
    margin: 20px;
    background: #E6FE87;
    border-radius: 10px;
    padding: 20px;
    color: #333;
    position: relative;
}
/* 메인 런처 반응형 슬롯: 모바일=서비스 메뉴 '위', PC(≥576)=서비스 메뉴 '아래'.
   PC 에선 히어로→로그인→서비스 흐름이 안 끊기게 런처를 사이에서 빼 아래로 내린다. */
.askai-launcher-pc { display: none; }
@media screen and (min-width: 576px) {
    .askai-launcher-mobile { display: none; }
    .askai-launcher-pc { display: block; }
}

/* 메인 런처: 좌우를 콘텐츠 폭(히어로/미들배너)과 맞춘다.
   데스크톱=상위 max-width:810 섹션에 꽉 채움, 모바일=미들배너와 같은 12px 인셋 */
.ai-section-container.askai-launcher-box {
    margin-left: 0;
    margin-right: 0;
}
/* KD 랜딩: v1 처럼 좌우 20px 인셋으로 되돌림 (main 의 콘텐츠폭 정렬과 별개) */
.askai-launcher-kd .ai-section-container.askai-launcher-box {
    margin-left: 20px;
    margin-right: 20px;
}
/* 서비스 랜딩 공통(SDD·RS·BF·ICD): 콘텐츠폭 중앙 정렬 + 상하 여백 */
.askai-launcher-service {
    max-width: 810px;
    margin: 28px auto;
    padding: 0 20px;
}
/* D2D 는 콘텐츠 컨테이너(.display, max-width 480)라 폭이 좁음 → benefit 카드와 같은 폭으로 맞춤 */
.display .askai-launcher-service {
    max-width: none;
    margin: 8px 0;
    padding: 0;
}
.display .askai-launcher-service .ai-section-container.askai-launcher-box {
    margin-left: 20px;
    margin-right: 20px;
}
/* RS: 프로세스 3단계(~500px) 폭에 맞춰 좁게 중앙 정렬 (데스크톱에서 너무 넓지 않게) */
.storage-section02 .askai-launcher-service {
    max-width: 540px;
    margin-left: auto;
    margin-right: auto;
}
/* BF: 밑 배너(900) 폭에 맞춤 / ICD: 밑 '예약 전 확인' 콘텐츠(832) 폭에 맞춤. 둘 다 booking_container 안 → 중앙 정렬 */
.askai-launcher-bf { max-width: 940px; margin-left: auto; margin-right: auto; }
.askai-launcher-icd { max-width: 872px; margin-left: auto; margin-right: auto; }
@media screen and (max-width: 575px) {
    .ai-section-container.askai-launcher-box {
        margin-left: 12px;
        margin-right: 12px;
    }
    /* 서비스 랜딩(SDD·RS): 래퍼 padding+박스 margin 이중 여백 제거 → KD 와 동일 좌우 20 */
    .askai-launcher-service { padding: 0; }
    .askai-launcher-service .ai-section-container.askai-launcher-box {
        margin-left: 20px;
        margin-right: 20px;
    }
    /* ICD: 모바일에서 아래 '예약 전 확인'(콘텐츠 여백 16) 폭과 맞춰 안 좁아 보이게 */
    .askai-launcher-icd .ai-section-container.askai-launcher-box {
        margin-left: 16px;
        margin-right: 16px;
    }
}

.ai-chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.ai-header-left {
    display: flex;
    align-items: center;
    gap: 6px;
}

.brand-text {
    font-size: 18px;
    color: #333;
    position: relative;
}

.sparkle-icon {
    background: url(/images/kd/ai_icon-93f8373cce2c6456da665bb869bf3bc8.svg) no-repeat center;
    width: 26px;
    height: 26px;
}

.brand-bold {
    font-weight: bold;
}

.beta-badge {
    border: 1px solid #FF5607;
    color: #FF5607;
    border-radius: 10px;
    font-size: 9px;
    padding: 1px 4px;
    margin-left: 8px;
    vertical-align: super;
    position: relative;
    top: -2px;
}

.ai-chat-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ---- 입력창 ------------------------------------------------------------- */
.chat-input-wrapper {
    display: flex;
    align-items: flex-end;   /* 입력이 여러 줄로 길어져도 전송 버튼은 하단 고정(위치 안 바뀜) */
    gap: 8px;
    width: 100%;
}

.chat-input-container {
    border: 1px solid #321b49;
    border-radius: 12px;
    padding: 12px 16px;
    background-color: white;
    flex: 1;
    min-height: 48px;
    box-sizing: border-box;
    display: flex;
    align-items: flex-start;
}

.chat-input,
.ai-launcher-input {
    width: 100%;
    border: none;
    background: transparent;
    font-size: 14px;
    color: #333;
    outline: none;
    line-height: 1.5;
    min-height: 24px;
    max-height: 120px;
    padding: 0;
    resize: none;
    overflow-y: auto;
    font-family: inherit;
}
/* 랜딩 런처 입력칸: 원본 textarea(1줄) 그대로. 클릭은 컨테이너(팝업 열기)가 받게 통과 */
.ai-launcher-input { pointer-events: none; overflow: hidden; }

.chat-input::placeholder,
.ai-launcher-input::placeholder {
    color: #999;
}

.input-clear-btn {
    width: 48px;
    height: 48px;
    background-color: #512772;
    border-radius: 8px;
    display: none;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    cursor: pointer;
    flex-shrink: 0;
}

.input-send-btn {
    width: 48px;
    height: 48px;
    background-color: #512772;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
    transition: background-color 0.2s ease;
}
.input-send-btn:hover { background-color: #64318f; }
.input-send-btn svg { width: 20px; height: 20px; display: block; }

/* ---- 답변 텍스트 -------------------------------------------------------- */
.response-text {
    font-size: 14px;
    line-height: 1.5;
}

/* 답변 속 링크: 팝업이 <footer id="customer"> 안이라 'footer#customer a{color:white}'(특이도 1,0,1)에
   먹혀 흰색(안 보임)이 됨 → !important 로 보이는 파란색 강제 */
.response-text a {
    color: #2563eb !important;
    text-decoration: underline;
    font-weight: 500;
}

.response-text a:hover {
    color: #1d4ed8 !important;
    text-decoration: underline;
}

.response-text img {
    max-width: 100%;
    height: auto;
    margin: 8px 0;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    display: block;
}

.response-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}



/* ---- 대화 트랜스크립트 (질문/답변 누적) -------------------------------- */
.chat-messages {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 420px;
    overflow-y: auto;
    padding: 4px;
    scroll-behavior: smooth;
}
.chat-msg {
    display: flex;
    flex-direction: column;
    max-width: 88%;
}
.chat-msg.user {
    align-self: flex-end;
    align-items: flex-end;
}
.chat-msg.ai {
    align-self: flex-start;
    align-items: flex-start;
}
.msg-bubble {
    font-size: 14px;
    line-height: 1.5;
    border-radius: 12px;
    padding: 12px 16px;
    word-break: break-word;
    white-space: normal;
}
.chat-msg.user .msg-bubble {
    background-color: #512772;
    color: #fff;
    border-bottom-right-radius: 4px;
}
.chat-msg.ai .msg-bubble {
    background-color: #fff;
    color: #333;
    border: 1px dashed #E4DAFC;
    border-bottom-left-radius: 4px;
}
.chat-msg .response-actions {
    margin-top: 4px;
    padding-left: 4px;
}

/* 👍/👎 피드백 버튼 — 답변 말풍선 아래, 작고 은은하게(브랜드 톤). AI 말풍선처럼 왼쪽 정렬 */
.askai-feedback {
    margin: 5px 0 0 2px;
    width: 100%;   /* 답변 말풍선(.chat-msg 88%)만큼 — 입력창을 넉넉히 */
}
.askai-fb-btns { display: flex; align-items: center; gap: 4px; }
/* 👎 사유 입력창(인라인 펼침) */
.askai-fb-reason { margin-top: 7px; }
.askai-fb-reason-input {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #e0d9ee;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 13px;
    font-family: inherit;
    line-height: 1.5;
    color: #222;              /* footer 색상속으로 글씨가 안 보이던 것 방지 */
    background: #fff;
    resize: none;
    outline: none;
}
.askai-fb-reason-input::placeholder { color: #9a93a8; }
.askai-fb-reason-input:focus { border-color: #512772; }
.askai-fb-reason-row { display: flex; gap: 6px; margin-top: 5px; }
.askai-fb-reason-send {
    border: none; border-radius: 7px; padding: 5px 12px; font-size: 12px; cursor: pointer;
    background: #512772; color: #fff;
}
.askai-fb-reason-send:hover { background: #64318f; }
.askai-fb-reason-skip {
    border: none; background: transparent; color: #999; font-size: 12px; cursor: pointer; padding: 5px 6px;
}
.askai-fb-reason-skip:hover { color: #512772; }
.askai-fb-sent {
    display: inline-flex; align-items: center; gap: 3px;
    margin-left: 6px; font-size: 12px; color: #512772;
}
.askai-fb-sent svg { display: block; }
.askai-fb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: #b3aac2;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.askai-fb-btn:hover { background: #f1ecfa; color: #512772; }
.askai-fb-up.selected { background: #ede7fb; color: #512772; }    /* 좋아요 = 브랜드 보라 */
.askai-fb-down.selected { background: #ede7fb; color: #512772; }  /* 싫어요도 보라(호버색과 통일) — 구분은 아이콘으로 */
.askai-fb-btn svg { display: block; }
@media screen and (max-width: 575px) {
    .chat-messages { max-height: 60vh; }
    .chat-msg { max-width: 92%; }
}

/* ---- 인라인 런처 버튼 (클릭 → 채팅 팝업) ------------------------------- */
/* 랜딩(연두박스) 진입 요소 — 클릭하면 채팅 팝업 열림. 시각은 원래 UI(입력박스 + Try 버튼) 유지 */
.ai-chat-launcher { cursor: pointer; }
.chat-input-container.ai-chat-launcher { align-items: center; }
.chat-input-container.ai-chat-launcher:hover { border-color: #512772; }
.ai-chat-launcher-text { color: #999; font-size: 14px; }
.ai-chat-try-btn {
    height: 48px;
    background-color: #512772;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 12px;
    font-weight: 600;
    padding: 0 16px;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background-color 0.2s ease;
}
.ai-chat-try-btn:hover { background-color: #64318f; }

/* ---- 채팅 팝업 (비모달 — 오버레이 없음, 페이지와 공존해 클릭 가능) ---- */
.ai-chat-popup {
    position: fixed;
    z-index: 2147483000;   /* 페이지 상단 내비/메뉴보다 위 */
    background: #fff;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 40px rgba(0,0,0,0.25);
}
/* PC: 우하단 플로팅 카드 (페이지 클릭을 막지 않음 → 채팅하며 예약 진행 가능) */
@media screen and (min-width: 576px) {
    .ai-chat-popup {
        right: 8px; bottom: 24px;   /* 우하단 카카오톡 버튼(right:10px)까지 덮도록 오른쪽에 더 붙임 */
        width: 400px; height: 600px; max-height: 80vh;
        border-radius: 16px; overflow: hidden;
    }
}
/* 모바일: 풀스크린 (상단 메뉴까지 덮음). 키보드 대응 위해 dvh 사용, 헤더(×)는 항상 상단 */
@media screen and (max-width: 575px) {
    .ai-chat-popup {
        top: 0; left: 0; right: 0; bottom: 0;
        width: 100%;
        height: 100vh;    /* fallback */
        height: 100dvh;   /* 키보드/브라우저 크롬 반영 */
        border-radius: 0;
    }
}
.ai-chat-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border-bottom: 1px solid #eee;
    flex: 0 0 auto;   /* 스크롤되지 않음 → × 항상 보임 */
    background: #fff;
}
.ai-chat-close {
    border: none; background: none; cursor: pointer;
    font-size: 28px; line-height: 1; color: #333;
    padding: 4px 8px; margin: -4px -8px -4px 0;
}
/* 메시지는 가운데 영역을 채우고 스크롤, 입력창은 하단 고정 */
.ai-chat-popup .chat-messages {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    overscroll-behavior: contain;   /* 챗 내부 스크롤이 바깥 페이지로 새지 않게 */
    padding: 16px;
}
.ai-chat-popup .chat-input-wrapper {
    flex: 0 0 auto;
    padding: 12px 16px 0;   /* 아래 여백은 고지문구(.askai-disclaimer)가 담당 — 입력칸과 3px 만 띄움 */
    border-top: 1px solid #eee;
    background: #fff;
}

/* ---- 로딩 애니메이션 ---------------------------------------------------- */
.loading-dots {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: #666;
    padding: 4px 0;
}
.loading-dots span {
    width: 6px;
    height: 6px;
    background-color: #321b49;
    border-radius: 50%;
    display: inline-block;
    animation: loading-bounce 1.4s infinite ease-in-out both;
}
.loading-dots span:nth-child(1) { animation-delay: -0.32s; }
.loading-dots span:nth-child(2) { animation-delay: -0.16s; }
.loading-dots span:nth-child(3) { animation-delay: 0s; }
@keyframes loading-bounce {
    0%, 80%, 100% { transform: scale(0); opacity: 0.5; }
    40% { transform: scale(1); opacity: 1; }
}

/* ==========================================================================
 * 플로팅 버튼(FAB) — 전 페이지. 기존 카카오톡 상담 버튼(.btn.chat, bottom:50px)
 * 위에 겹치지 않게 쌓는다. 라운드 사각 + ai_icon.svg(흰색 마스크) + BETA 뱃지.
 * ========================================================================== */
/* wrapper 가 화면 고정 위치를 맡는다(세로 위치는 JS 가 상담버튼 위로 계산해 wrapper.bottom 에).
   버튼은 overflow:hidden(스윕 클립) 이라 툴팁이 잘려서, 툴팁을 wrapper 자식으로 빼 왼쪽에 띄운다. */
.askai-fab-wrap {
    position: fixed;
    right: 10px;
    /* 세로 위치(bottom)는 askai-widget.js 가 실제 상담버튼(카톡/WhatsApp) 바로 위 8px 로
       동적 계산해 넣는다 — 페이지마다 상담버튼 위치가 달라서(D2D 는 예약바 때문에 90px 로
       올라감 #195) CSS 고정값으론 못 맞춘다. 아래는 JS 실행 전 폴백값. */
    bottom: 100px;
    z-index: 2147482000;   /* 팝업(2147483000)보다 아래, 페이지보다 위 */
}
.askai-fab {
    position: relative;
    width: 42px;    /* 기존 카톡/WhatsApp 플로팅 버튼(a.btn.chat width:42px)과 크기 통일 */
    height: 42px;
    padding: 0;
    background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%); /* 보라→핑크 그라데 */
    border: none;
    border-radius: 50%;    /* 원형 */
    overflow: hidden;      /* 반짝 스윕(::before)을 원 안으로 클립 */
    box-shadow: 0 4px 13px rgba(120, 40, 120, 0.26);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: filter 0.2s ease;
}
/* 호버 툴팁(삼성처럼 챗봇임 안내) — 버튼 왼쪽 말풍선. 문구는 JS 가 서비스별 placeholder 로 채움 */
.askai-fab-tip {
    position: absolute;
    right: calc(100% + 10px);   /* 버튼 왼쪽 10px */
    top: 50%;
    transform: translateY(-50%) translateX(6px);
    background: #2b1b3d;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    text-align: left;
    padding: 7px 11px;
    border-radius: 10px;
    width: max-content;
    max-width: 240px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
}
.askai-fab-tip::after {   /* 오른쪽 꼬리 */
    content: "";
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-left-color: #2b1b3d;
}
.askai-fab-wrap:hover .askai-fab-tip,
.askai-fab-wrap:focus-within .askai-fab-tip {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0);
}
.askai-fab:hover { filter: brightness(1.06); animation-play-state: paused; }
/* svg 내부 색을 무시하고 mask 실루엣을 흰색으로 → 보라·핑크 그라데 배경 위 별이 선명 */
.askai-fab-icon {
    position: relative;
    z-index: 1;            /* 반짝 스윕(::before) 위로 별이 오게 */
    width: 24px;
    height: 24px;
    background-color: #fff;
    -webkit-mask: url(/images/kd/ai_icon-93f8373cce2c6456da665bb869bf3bc8.svg) no-repeat center / contain;
    mask: url(/images/kd/ai_icon-93f8373cce2c6456da665bb869bf3bc8.svg) no-repeat center / contain;
}
/* ---- 팝업 하단 AI 생성 답변 고지 --------------------------------------- */
.askai-disclaimer {
    text-align: center;
    font-size: 11px;
    color: #999;
    padding: 3px 12px 8px;   /* 입력칸에 바짝(위 3px), 아래만 살짝 여백 */
    background: #fff;        /* 입력 wrapper 와 같은 흰 배경으로 이어지게 */
}

/* ---- 첫 턴 추천질문 칩(인사말 아래, 클릭=그대로 전송, 첫 전송과 함께 제거) ---- */
.askai-suggests {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin: 2px 0 10px 4px;
}
.askai-suggest-btn {
    background: #fff;
    border: 1px solid #C9B8E8;
    color: #512772;
    border-radius: 18px;
    padding: 8px 14px;
    font-size: 13px;
    line-height: 1.35;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.askai-suggest-btn:hover { background: #f5effc; }

/* ---- 강조 애니메이션 -----------------------------------------------------
 * 반짝 스윕(::before 빛줄기가 5초 주기로 표면을 한 번 훑고 길게 쉼) + 아주 옅은 glow 호흡.
 * glow 는 원 밖으로 살짝만 번지게(요청: 약하게). prefers-reduced-motion 켠 사용자는 정지. */
@keyframes askai-fab-shimmer {
    0%        { left: -140%; }
    35%, 100% { left: 150%; }
}
@keyframes askai-fab-breathe {
    0%, 100% { box-shadow: 0 4px 12px rgba(90,30,90,0.24), 0 0 4px 0  rgba(217,70,239,0.18); }
    50%      { box-shadow: 0 4px 14px rgba(90,30,90,0.26), 0 0 9px 2px rgba(217,70,239,0.30); }
}
.askai-fab {
    animation: askai-fab-breathe 3.2s ease-in-out infinite;
}
/* 반짝 스윕: 원 안(overflow:hidden)에서 대각선 빛줄기가 지나감 */
.askai-fab::before {
    content: "";
    position: absolute;
    top: -40%;
    left: -140%;
    width: 55%;
    height: 180%;
    pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,0.4), transparent);
    transform: rotate(12deg);
    animation: askai-fab-shimmer 5s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
    .askai-fab { animation: none; }
    .askai-fab::before { animation: none; display: none; }
}