/* AI 채팅 팝업 - 동작용 최소 골격만. 디자인/색상/폰트/아이콘은 별도 작업. */

/* hidden 속성을 가진 요소는 무조건 숨김 (display:flex 등 덮어쓰기 방지) */
.aiChatPanel[hidden],
.img-modal[hidden] {
	display: none !important;
}

/* 플로팅 AI 버튼 (우측 하단 고정) */
.aiChatFloatBtn {position: fixed; right: 20px; bottom: 20px; width: 60px; height: 60px; background: url(../images/ai_chatOpen.png) no-repeat right; background-size: 80%; z-index: 1000;}

/* 슬라이드 패널 */
.aiChatPanel { position: fixed; top: 0; right: 0; width: 100%; height: 100%; z-index: 100; opacity: 0; transition: all .5s ease;}
.aiChatPanel.open {opacity: 1;}
.aiChatPanel .aiChatPanelInner {position: absolute; left: 0; bottom: 0; width: 100%; height: 60vh; display: flex; flex-direction:column; background: #fff; border-radius: 20px 20px 0 0; box-shadow:0 -10px 30px rgba(0,0,0,.18); transform:translateY(100%); transition:transform .45s cubic-bezier(.22,.61,.36,1); will-change:transform;}
.aiChatPanel.open .aiChatPanelInner {transform:translateY(0);}
.aiChatPanel .aiChatPanelInner .chatHead { display: flex; align-items: center; padding: 10px; gap: 10px;}
.aiChatPanel .aiChatPanelInner .chatHead .chatHeadIcon img {width: 35px; height: 35px;}
.aiChatPanel .aiChatPanelInner .chatHead .chatHeadTxt {flex: 1; font-weight: 700;}
.aiChatPanel .aiChatPanelInner .chatHead .aiChatClose {background: url(../images/close_dark.svg) no-repeat center; background-size: 80%; width: 30px; height: 30px; font-size: 0; line-height: 0; overflow: hidden; text-indent: -9999px;}
.aiChatPanel .aiChatPanelInner .chatHead .closeBtn {position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 15%; height: 5px; border-radius: 3px; background-color: #D9D9D9; font-size: 0; text-indent: -9999px;}

/* 채팅 본문 스크롤 영역 */
.aiChatPanel .chatBody { padding: 10px; flex: 1 1 auto; overflow-y: auto;}
.aiChatPanel .chatBody .chatMsg {display: flex; align-items: flex-start; flex-wrap: wrap; gap: 10px; margin-bottom: 10px;}
.aiChatPanel .chatBody .chatMsg p {margin: 0; font-weight: 500;}
.aiChatPanel .chatBody .chatMsg .chatMsgIcon img {width: 35px; height: 35px;}
.aiChatPanel .chatBody .chatMsg .chatMsgBubble {max-width: 75%; padding: 10px; border: 1px solid #E3E3E3; box-shadow:0 2px 10px rgba(0,0,0,.04); border-radius: 10px;}
.aiChatPanel .chatBody .chatMsg.user {justify-content: flex-end; }
.aiChatPanel .chatBody .chatMsg.user .chatMsgBubble.user {background-color: #01A5DC; border-color: #01A5DC; color: #fff;}
.aiChatPanel .chatBody .chatMsg .chatQuickBtn { width: 100%; display: flex; align-items: center; gap: 10px; padding-left: 45px;}
.aiChatPanel .chatBody .chatMsg .chatQuickBtn a { padding: 3px 9px; border: 1px solid #01A5DC; color: #01A5DC; border-radius: 30px; white-space: nowrap; font-size: 15px; }
.aiChatPanel .chatBody .chatMsgBubble.loading { display: flex; flex-direction: row; align-items: center; gap: 4px; padding: 12px 16px; width: fit-content; max-width: 80%; min-height: unset; height: unset; line-height: 0; position: absolute; left: 50px;}
.aiChatPanel .chatBody .chatMsgBubble.loading span { display: inline-block; width: 7px; height: 7px; min-height: unset; border-radius: 50%; background: #D9D9D9; animation: dotBounce 1.2s infinite ease-in-out; flex-shrink: 0;}
.aiChatPanel .chatBody .chatMsgBubble.loading span:nth-child(1) { animation-delay: 0s; }
.aiChatPanel .chatBody .chatMsgBubble.loading span:nth-child(2) { animation-delay: 0.2s; }
.aiChatPanel .chatBody .chatMsgBubble.loading span:nth-child(3) { animation-delay: 0.4s; }
@keyframes dotBounce { 0%, 80%, 100% { transform: translateY(0); opacity: 0.3; } 40% { transform: translateY(-6px); opacity: 1; } }
/* 채팅 푸터 */
.aiChatPanel .chatFooter {display: flex; align-items: center; gap: 10px; padding: 15px;}
.aiChatPanel .chatFooter textarea, .aiChatPanel .chatFooter input {border: none; background-color: #F1F5F9; border-radius: 30px; padding: 10px; flex: 1; resize:none; outline: none; overflow:hidden;}
.aiChatPanel .chatFooter .chatSend {background: #01A5DC url(../images/arrow_upward_white.svg) no-repeat center; background-size: 65%; border-radius:50%; width: 35px; height: 35px; font-size: 0; line-height: 0; overflow: hidden; text-indent: -9999px;}

@media (min-width: 1000px) {
	.aiChatPanel {top: 0; right: 0; left: auto; bottom: auto; width: 420px; height: 100%; border-radius:0; box-shadow: -10px 0 30px rgba(0,0,0,.18);}
	.aiChatPanel .aiChatPanelInner {top: 0; right: 0; left: auto; bottom: auto; width:420px; height:100%; border-radius:0; transform:translateX(100%);}
	.aiChatPanel.open .aiChatPanelInner {transform: translateX(0);}
	.aiChatPanel .aiChatPanelInner .chatHead {background-color: #01A5DC; padding: 10px; }
	.aiChatPanel .aiChatPanelInner .chatHead .closeBtn {display: none;}
	.aiChatPanel .aiChatPanelInner .chatHead strong {color: #fff;}
	.aiChatPanel .aiChatPanelInner .chatHead .aiChatClose { background: url(../images/close_white.svg) no-repeat center; background-size: 80%;}
} 


/* 이미지 모달 - 화면 전체 덮기 */
.img-modal {position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 120; background: rgba(0, 0, 0, 0.7); display: flex; align-items: center; justify-content: center;}
.img-modal .img-modal__content {position: relative; padding: 0 15px; background-color: #fff;}
.img-modal .img-modal__content img {max-width: 100%;}
.img-modal .img-modal__content .img-modal__close { position: absolute; top: -35px; right: 10px; background: url(../images/icon/close_white.svg) no-repeat center; background-size: 80%; width: 30px; height: 30px; font-size: 0; line-height: 0; overflow: hidden; text-indent: -9999px;}