
.active{
	z-index: 999;

}
.chatbox-wrapper {
			position: fixed;
			bottom: 0px;
			right: 40px;
			width: 400px;
			flex-direction: column;
			align-items: center;
			transition: transform 0.5s ease-in-out;
			z-index: 99;
			transform: translateY(90%);

		}

		.chatbox-toggle {
			background: linear-gradient(to right, #ff6600, #ad003c);
			color: white;
			border: none;
			border-top-left-radius: 20px;
			border-top-right-radius: 20px;
			width: 100%;
			height: 40px;
			font-size: 15px;
			cursor: pointer;
			text-align: center;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		

		.chatbox-container {
			width: 100%;
			height: 500px;
			background-color: white;
			border: 1px solid #ccc;
			box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
			display: flex;
			flex-direction: column;
			border-top-left-radius: 20px;
			border-top-right-radius: 20px;
		}

		.chatbox-wrapper.active {
			transform: translateY(0%);
		}

		#chatbox {
			display: flex;
			flex-direction: column;
			flex-grow: 1;
			padding: 10px;
			overflow-y: auto;
		}

		#chatbox-messages {
			flex-grow: 1;
			overflow-y: auto;
			margin-bottom: 10px;
			height: 0px;
		}

		#user-input {
			width: 100%;
			padding: 10px;
			margin-bottom: 10px;
			border: 1px solid #ccc;
			border-radius: 4px;
		}
		#send-btn {
			width: 100%;
			padding: 10px;
			background: linear-gradient(to right, #ff6600, #ad003c);
			color: white;
			border: none;
			border-radius: 4px;
			cursor: pointer;
		}
		/* Mesaj baloncukları */
		.message {
			margin-bottom: 10px;
			width: 100%;
			padding: 10px;
			border-radius: 10px;
			max-width: 70%;
			box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
			word-wrap: break-word;
		}

		.name {
			margin-bottom: 0px;
			font-weight: bold;
			float: left;

		}

		.usermesage {
			float:right;
			width: 100%;
		}
		.botmesage {
			float:right;
			width: 100%;
		}

		.name2 {
			margin-bottom: 0px;
			width: 100%;
			padding: 10px;
			text-align: end;
			font-weight: bold;

		}

		/* Kullanıcı mesajları sağa */
		.user-message {
			background-color: #e0e0e0;
			align-self: flex-end;
			float: right;
		}

		/* Bot mesajları sola */
		.bot-message {
			background: linear-gradient(to right, #ff6600, #ad003c);
			color: white;
			align-self: flex-start;
			float: left;
		}

		/* Scrollbar için stil */
		#chatbox-messages::-webkit-scrollbar {
			width: 6px;
		}

		#chatbox-messages::-webkit-scrollbar-thumb {
			background: linear-gradient(to right, #ff6600, #ad003c);
			border-radius: 10px;
		}

		/* Hazır soru butonları */
		/* Hazır soru butonları */
		#quick-questions {
			display: flex;
			flex-wrap: nowrap;
			/* Butonların yan yana durmasını sağla */
			overflow-x: auto;
			/* Yalnızca yatay kaydırma yapılabilir */
			padding: 5px 0;
			/* Üst ve alt boşlukları ekleyerek kaydırmayı daha rahat hale getirelim */
		}

		.quick-question {
			background-color: #f2f2f2;
			border: none;
			padding: 10px 15px;
			margin: 5px;
			text-align: center;
			cursor: pointer;
			border-radius: 4px;
			font-size: 14px;
			color: #333;
			white-space: nowrap;
			transition: all 0.3s ease;
		}
		

		.quick-question:hover {
			background: linear-gradient(to right, #ff6600, #ad003c);
			color: white;
		}
		

		@media only screen and (max-width: 768px) {
			.chatbox-wrapper {
				width: 90%;
				right: 5%;
				max-width: 95%; /* Ekstra güvenlik */
			}
		}