$(document).ready(function(){
                    	    $('#chatbot-send').click(function(){
                    	        var message = $('#chat-input').val();
                    	        sendMessage(message);
                    	        $('#chat-input').val('');
                    	    });

                    	    $('#chat-input').keypress(function(e){
                    	        if(e.which == 13){
                    	            $('#chatbot-send').click();
                    	        }
                    	    });
                    	});

                    	function sendMessage(message){
                    	    var userHtml = "<div class='chat-message user-message'>" + message + "</div>";
                    	    $('#chatbot-messages').append(userHtml);
                    	    getResponse(message);
                    	}

                    	function getResponse(message) {
                    	    $('#loading').show();
                    	    $.get("/hbz/getGPT3Response.do", {question: message}, function(response) {
                    	        $('#loading').hide();
                    	        var answer = response.answer;
                    	        var gpt3Html = "<div class='chat-message gpt3-message'>" + answer + "</div>";
                    	        $('#chatbot-messages').append(gpt3Html);
                    	    });
                    	}
</script>
                       <style>
    .relative-position {
        position: relative;
    }
    
    .chatbot-help {
        position: absolute;
        top: 100%;
        left: calc(100% - 350px);
        width: 350px;
        height: 500px;
        background-color: #fff;
        border: 1px solid #e0e0e0;
        border-radius: 10px;
        box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
        padding: 10px;
        display: none;
        z-index: 1000;
        overflow: hidden;
    }
    
    #chatbot-messages {
        width: 100%;
        height: calc(100% - 90px);
        overflow-y: auto;
        padding: 10px;
        border-bottom: 1px solid #e0e0e0;
    }
    
    .chatbot-inner {
        position: absolute;
        bottom: 10px;
        left: 10px;
        right: 10px;
    }
    
    #chatbot-input {
        width: calc(100% - 85px);
        border: 1px solid #e0e0e0;
        border-radius: 18px;
        padding: 10px;
        margin-right: 10px;
        float: left;
    }
    
    #chatbot-send {
        float: right;
        background-color: #00c300;
        color: #ffffff;
        border: none;
        border-radius: 18px;
        padding: 10px 20px;
        margin: 0;
        cursor: pointer;
    }

    .chatbot-inner::after {
        content: '';
        clear: both;
        display: table;
    }
    
    #loading {
  display: flex;
  justify-content: center;
  align-items: center;
 
  position: absolute;
  bottom: 30px;
  
}

/* 점의 스타일 개선 */
.dot {
  width: 5px;
  height: 5px;
  margin: 0 3px;
  background-color: #3498db;
  border-radius: 50%;
  opacity: 0.7; /* 투명도 추가 */
  animation: dotPulse 1.5s infinite ease-in-out both;
}

/* 점 애니메이션에 ‘transform-origin’ 속성과 ‘opacity’ 변화 추가 */
@keyframes dotPulse {
  0% {
    transform: scale(0.9);
    opacity: 0.7;
  }
  50% {
    transform: scale(1.4);
    opacity: 1;
  }
  100% {
    transform: scale(0.9);
    opacity: 0.7;
  }
}
    
</style>


<div id="chatbotHelp" class="chatbot-help">
   
    <div class="chatbot-inner">
    <div id="chatbot-messages" id="chat-box"></div>
    <div id="loading" style="display:none;">
	    <div class="dot"></div>
	    <div class="dot"></div>
	    <div class="dot"></div>
	  </div>
        
        <input type="text" id="chatbot-input" placeholder="여기에 메시지를 입력하세요...">
        <button id="chatbot-send">보내기</button>
    </div>
</div>     
                       
    </nav> 지금 이걸 실행하면 메세지가 보내지질 않는데 왜 안보내져?