/* 기본 폰트 및 박스 사이징 설정 */
body { font-family: Arial, sans-serif; } 

:root { 
    --primary-color: #121212; /* 기본 색상 변수 */
}

.js-btn-chatbot { z-index: 1000; position: fixed; bottom: 30px; right:30px; width: 56px; height: 56px; overflow: hidden; border-radius: 16px; background: #7cb32a url('/resources/img/main/chatbot.svg') no-repeat center/ 40px; box-shadow: 0 2px 10px 2px rgba(0,0,0,0.1); } 
.btn-chatbot-style { position: fixed; bottom: 20px; right: 20px; padding: 15px 25px; font-size: 16px; background-color: var(--primary-color); color: white; border: none; cursor: pointer; box-shadow: 0 4px 8px rgba(0,0,0,0.2); z-index: 9998; } 
.chatbot-popup-container { position: fixed; bottom: 90px; right: 30px; width: 380px; height: 600px; max-width: calc(100vw - 40px); max-height: calc(100vh - 110px); background-color: white; border-radius: 15px; box-shadow: 0 5px 15px rgba(0,0,0,0.3); display: flex; flex-direction: column; overflow: hidden; z-index: 9999; transition: width 0.3s, height 0.3s, bottom 0.3s, right 0.3s; } 

.chatbot-header { background-color: var(--primary-color); color: white; padding: 15px; display: flex; justify-content: space-between; align-items: center; cursor: move; } 
.chatbot-header h2 { margin: 0; font-size: 16px;font-weight: 700; } 

.chatbot-close-btn { background: none; border: none; color: white; font-size: 24px; cursor: pointer; } 
.chatbot-body { flex-grow: 1; display: flex; flex-direction: column; padding: 10px; overflow: hidden; } 
.chatbot-messages { flex-grow: 1; overflow-y: auto; padding: 10px; margin-bottom: 10px; } 

.message { margin-bottom: 15px; display: flex; flex-direction: column; } 
.message.user { align-items: flex-end; } 
.message.bot { align-items: flex-start; } 
.message .text-bubble { max-width: 80%; padding: 10px 15px; border-radius: 20px; line-height: 1.5; word-wrap: break-word; } 
.message.user .text-bubble { background-color: var(--primary-color); color: white; border-bottom-right-radius: 5px; } 
.message.bot .text-bubble { background-color: #f1f1f1; color: #333; border-bottom-left-radius: 5px; } 
.message.bot .text-bubble a { color: var(--primary-color); text-decoration: none;}

.chatbot-input-area { display: flex; border-top: 1px solid #eee; padding: 10px 0 0 10px; } 
#chatbot-input { flex-grow: 1; border: 1px solid #ccc; border-radius: 20px; padding: 10px 15px; resize: none; height: 40px; font-size: 14px; line-height: 1.4; margin-right: 10px; box-sizing: border-box; overflow-y: hidden; }
#chatbot-send-btn { background-color: var(--primary-color); color: white; border: none; border-radius: 50%; width: 40px; height: 40px; cursor: pointer; flex-shrink: 0; margin-right: 10px; display: flex; align-items: center; justify-content: center; padding-right: 3px; padding-top: 2px; } 
#chatbot-send-btn svg { width: 20px; height: 20px; } 

/* 로딩 및 입력 중 인디케이터 */
.typing-indicator span { display: inline-block; animation: bounce 1.4s infinite ease-in-out both; } 
.typing-indicator span:nth-child(1) { animation-delay: -0.32s; } 
.typing-indicator span:nth-child(2) { animation-delay: -0.16s; } 

@keyframes bounce { 
	0%, 80%, 100% { transform: scale(0); } 
	40% { transform: scale(1.0); } 
}

/* 반응형 디자인: 화면 너비가 600px 이하일 때 */
@media (max-width: 600px){
	.chatbot-popup-container { width: 100%; height: 100%;max-width: 100%; max-height: 100%; bottom: 0; right: 0; border-radius: 0; box-shadow: none; } 
	.btn-chatbot-style { bottom: 10px; right: 10px; } 
}

/* 관련 메뉴 스타일 */
#chatbot-popup .message.bot .text-bubble .related-menu-container { margin-top: 15px; padding-top: 10px; border-top: 1px solid #e9e9eb; } 
#chatbot-popup .message.bot .text-bubble .related-menu-title { font-size: 14px; font-weight: bold; color: #333; margin-bottom: 10px; display: block; } 
#chatbot-popup .message.bot .text-bubble .related-menu-list { list-style-type: none !important; padding: 0 !important; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; } 
#chatbot-popup .message.bot .text-bubble .related-menu-item { list-style: none !important; padding: 0 !important; margin: 0 !important; } 
#chatbot-popup .message.bot .text-bubble .related-menu-item a { display: inline-block; padding: 4px 12px; border: 1px solid var(--primary-color); border-radius: 15px; color: var(--primary-color); text-decoration: none !important; font-size: 13px; transition: background-color 0.2s, color 0.2s; }
#chatbot-popup .message.bot .text-bubble .related-menu-item a:hover { background-color: var(--primary-color); color: #fff; text-decoration: none; }