/* CSS Document */
/*@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap'); "Open Sans"*/
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap');

body {
	font-family: "Roboto Condensed", Arial, sans-serif;
	background: #0C192B;
	height: 100%;
}

.errorbox{padding: 10px; background: #fee2e2; color: #991b1b; border-radius: 6px; margin: 15px 0;}

#form-container input.error,#form-container select.error, #form-container textarea.error{
    background: rgb(251, 227, 228);
    border: 1px solid #fbc2c4;
    color: #8a1f11;
}


#form-container label.error{
    color: #8a1f11;
    display: inline-block;
    margin-left: 1.5em;
}


#chat-container {
	display: flex;
	flex-direction: column; /* Stack children vertically */
	height: 100vh; /* Full height of the viewport */
}

	#chat-header{width:auto;height: 85px;}
		#progress-header{ height:75px; display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 10px 30px;
		}
		.progress-left, .progress-right {
			flex: 1; 
			font-size: 22px; 
			color: #efefef; 
		}
		.progress-right { text-align: right; font-size: 12px;}


		#progress-container{ position: relative; width:100%;height: 10px;border: 1px solid #142A48;margin:0; background: #152D4E; }

		#progress-bar {
			height: 100%; color: #efefef;
			width: 0; /* Start with 0 width */
			background: #3167B1 ; /* Color of the progress */
			transition: width 0.5s ease;
		}
		#progress-circle {
			position: absolute; /* Position absolute to move it along the progress bar */
			top: -5px; /* Adjust to position above the progress bar */
			left: 0; /* Start at the left */
			width: 20px; /* Width of the circle */
			height: 20px; /* Height of the circle */
			background-color:#FF9600; /* Circle color */
			border-radius: 50%; /* Make it a circle */
			transition: left 0.5s ease; /* Smooth transition for movement */
			z-index: 50;
		}
		#progress-display {
			color: #efefef;
			margin-bottom: 10px; /* Space between progress and chat box */
		}
#chat-window {
	flex: 1; 
	overflow-y: auto; padding: 20px; 

}

#chat-content{ transition: transform 0.5s ease; z-index: 1; position: relative;}

#form-container, #chat-results{
		width:60%;	min-height:50%; 
		background-color: #ffffff; 
		border: 1px solid #ccc;
		border-radius: 12px;
		display: flex;
		flex-direction: column; 
		justify-content:flex-start; 
		align-items: center;
		margin: 10px auto;
		padding: 40px;

	}

#chat-results { display: none;}


.chat-message { z-index: 10; position:relative;
	margin-bottom: 20px;
	/*font-weight: bold;
	opacity: 0;  Start as invisible */
	/*transform: translateY(-20px);  Start slightly above */
	transition: opacity 0.5s ease, transform 0.5s ease; /* Smooth transition for opacity and position */
}
.chat-content{
	padding:15px 20px; display: inline-block; position: relative;width: auto; border-radius:10px;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.chat-message .chat-content{margin-left: 10px;background: #efefef;}	
.bot .chat-content:before {
	content: ""; /* Required for pseudo-elements */
	position: absolute; /* Position the triangle absolutely */
	top: 0; /* Adjust to position above the box */
	left: -10px; /* Adjust to position to the left of the box */
	width: 0; /* No width */
	height: 0; /* No height */
	border-left: 10px solid transparent; /* Left side of the triangle */
	border-right: 10px solid transparent; /* Right side of the triangle */
	border-top: 10px solid  #efefef; /* Bottom side of the triangle (color of the ticker) */
}	
.edit-btn{ color: #9C9C9C;}
.edit-btn:hover{ color: #FF9600;}
.user-answer {
	 text-align: right;
	 /* opacity: 0;Start as invisible */
	 /*transform: translateY(-20px); Start slightly above */
	transition: opacity 0.5s ease, transform 0.5s ease; /* Smooth transition for opacity and position */
}
.user-answer .chat-content{margin-right: 10px;background: #CDCDCD;}	
.user-answer .chat-content:before {
	content: ""; /* Required for pseudo-elements */
	position: absolute; /* Position the triangle absolutely */
	bottom: 0; /* Adjust to position above the box */
	right: -10px; /* Adjust to position to the left of the box */
	width: 0; /* No width */
	height: 0; /* No height */
	border-left: 10px solid transparent; /* Left side of the triangle */
	border-right: 10px solid transparent; /* Right side of the triangle */
	border-bottom: 10px solid  #CDCDCD; /* Bottom side of the triangle (color of the ticker) */
}	






#chat-box { padding: 10px 10px 100px 10px;width:60%; margin:20px auto 50px auto; display: none;}
/*.message { margin: 10px 0; padding:20px; background: #efefef;}*/
.user { text-align: right; }
.bot { text-align: left; }

/*#results { display: none; }
#welcome-message { display: block; }*/



.chat-options{ text-align: center; margin-top: -20px; z-index: 2; position:relative;}
.chat-options .option, .submitBTN{ width: auto; border-radius: 8px; padding: 10px 20px; margin:4px; background-color:#FF9600; color: #ffffff; border: none;}
.chat-options .option:hover, .submitBTN:hover{background-color:#0084FF;}

.answer-text-content { /* 🔑 NEW CLASS */
	display: inline-block; /* Allows the content to shrink-wrap */
}
.hidden {
	display: none !important;
}

.fade-in {
	opacity: 0; /* Start invisible */
	transform: translateY(-60px); /* Start slightly above */
	transition: opacity 0.6s ease, transform 0.6s ease; /* Smooth transition */
}

.fade-in.show {
	opacity: 1; /* Fully visible */
	transform: translateY(0); /* Move to original position */
}
@media only screen and (max-width: 990px) {
	#chat-box, #form-container, #chat-results{ width:80%; }

}
@media only screen and (max-width: 570px) {
	#chat-box, #form-container, #chat-results {width:98%; }
}