/* 챗봇 */
   /* 챗봇 아이콘 버튼 */
        #chatbotIcon2 {
	    position: fixed;
	    bottom: 30px;
	    right: 20px;
	    width: 60px;
	    height: 61px;
	    background: url('/main/include/a_icon.png') no-repeat center center;
	    background-size: contain;
	    border-radius: 50%;
	    cursor: pointer;
	    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
	    z-index: 9999;
	}
	#chatbotIcon {
	    width: 80px;
	    height: 82px;
	    background: url('/main/include/c_icon2.jpg') no-repeat center center;
	    background-size: contain;
	    border-radius: 50%;
	    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
	    position: fixed;
	    bottom: 75px;
	    right: 30px;
	    z-index: 9999;
	    cursor: pointer;
	    animation: chatbotBounce 1.5s infinite ease-in-out;
	}
	
	/* 챗봇 텍스트 스타일 */
	/* 챗봇 텍스트 (기본 숨김) */
	#chatbotLabel {
	    background: #4C739A;
	    color: white;
	    font-size: 18px;
	    padding: 5px 10px;
	    border-radius: 5px;
	    margin-left: 10px;
	    font-weight: bold;
	    position: fixed;  /* 부모 요소 기준으로 위치 조정 */
	    right: 90px;  /* 아이콘 오른쪽에 표시 */
	    bottom: 55px;
	    display: inline-block;  /* 항상 보이도록 설정 */
	    z-index: 9999;
           animation: fadeBlink 2s infinite alternate ease-in-out;
	}


      /* 챗봇 컨테이너 (초기 상태: 숨김) */
        #chatContainer {
            position: fixed;
            bottom: 160px;
            right: 20px;
            width: 320px;
            background: white;
            border-radius: 10px;
            box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
            padding: 10px;
            z-index: 9999;
            border: 1px solid #ddd;
            font-family: Arial, sans-serif;
            display: none;
              opacity: 0;
	    transform: translateY(10px);
	    transition: opacity 0.3s ease, transform 0.3s ease;
        }
      
	/* 챗봇 창이 보일 때 */
	#chatContainer.show {
	    display: block;
	    opacity: 1;
	    transform: translateY(0);
	}
        
     


       /* 채팅창 스타일 */
        #chatbox2 {
            width: 100%;
            height: 350px;
            border: 1px solid #ccc;
            padding: 10px;
            overflow-y: auto;
            background: #f9f9f9;
            border-radius: 5px;
        }
        
        #chatbox {
	    width: 100%;
	    height: 380px;
	    border: 1px solid #ccc;
	    padding: 10px;
	    overflow-y: auto;
	    background: #f9f9f9;
	    border-radius: 10px;
	    display: flex;
	    flex-direction: column;
	}


	/* 사용자 및 챗봇 이름 스타일 */
	.name-label {
	    font-weight: bold;
	    font-size: 14px;
	    margin-bottom: 4px;
	}

	/* 챗봇 이름 스타일 (색상 및 강조 효과 추가) */
	.chat-message.bot .name-label {
	    //color: #007bff;  /* 챗봇을 파란색으로 강조 */
	    background: #e0e0e0; /* 배경 추가 */
	    padding: 3px 8px;
	    border-radius: 5px;
	    display: inline-block;
	}


	/* 기본 말풍선 스타일 */
	.bubble {
	    padding: 12px 16px;
	    border-radius: 18px;
	    font-size: 14px;
	    max-width: 75%;
	    position: relative;
	    animation: fadeIn 0.3s ease-in-out;
	}

	/* 사용자 메시지 스타일 */
	.chat-message.user {
	    display: flex;
	    flex-direction: column; /* 세로 정렬 */
	    align-items: flex-end; /* 사용자 말풍선 우측 정렬 */
	    margin-bottom: 10px;
	}

	/* 사용자 이름 스타일 */
	.chat-message.user .name-label {
	    background: #e0e0e0; /* 배경 추가 */
	    padding: 3px 8px;
	    border-radius: 5px;
	    display: inline-block;
	}


	.chat-message.user .bubble {
	    background: linear-gradient(135deg, #5AAEFF, #0056b3);
	    color: white;
	    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
	}

	/* 챗봇 메시지 스타일 */
	/* 챗봇 말풍선 (배경 진하게 & 음영 추가) */
	.chat-message.bot .bubble {
	    background: #e0e0e0;  /* 기존보다 조금 더 진한 회색 */
	    color: black;
	    font-weight: bold;  /* 가독성 강화 */
	    box-shadow: 3px 3px 12px rgba(0, 0, 0, 0.15); /* 그림자 강조 */
	    border: 1px solid #d0d0d0; /* 테두리 추가하여 더 명확하게 */
	}


	.chat-message.bot .bubble {
	    background: #f1f1f1;
	    color: black;
	    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
	}


        /* 입력창 & 버튼 */
        #userInput {
            width: 80%;
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 5px;
            margin-top: 5px;
        }

        button {
            width: 30%;
            padding: 8px;
            border: none;
            background-color: #4C739A;
            color: white;
            border-radius: 15px;
            cursor: pointer;
            font-weight: bold;
        }

        button:hover {
            background-color: #1D3051;
        }

        /* 버튼 컨테이너 */
        .buttonContainer {
            display: flex;
            justify-content: space-between;
            margin-top: 5px;
        }
        
        @keyframes chatbotBounce {
	    0%, 100% { transform: translateY(0); }
	    50% { transform: translateY(-5px); }
	}
	
	/* 텍스트 깜빡이는 애니메이션 */
	@keyframes fadeBlink {
	    0% { opacity: 1; }
	    50% { opacity: 0.3; } /* 완전히 사라졌다가 */
	    100% { opacity: 1; } /* 다시 나타남 */
	}
	
	#chatbotLabel small {
	    font-size: 12px;  /기존보다 더 작은 폰트 크기 */
	    color: #777;  /*연한 회색으로 강조도를 낮춤 */
	    display: block;  /*줄바꿈 유지 */
	}