@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css");

#aiContainer {

	::-webkit-scrollbar {
		background-color: transparent !important;
		width: 8px !important;
	}

	::-webkit-scrollbar-corner {
		background-color: transparent !important;
	}

	::-webkit-scrollbar-thumb {
		border: 1px solid #ddd;
		border-radius: 16px !important;
		background-color: #e8e9eb;
	}

	::-webkit-scrollbar-thumb:hover,
	::-webkit-scrollbar-thumb:active {
		border: 1px solid #dcdee3;
		background-color: #ddd;
	}

	::-webkit-scrollbar-track {
		background-color: transparent;
	}

	::-webkit-scrollbar:horizontal {
		height: 0;
	}

	:focus {
		outline: 0;
	}

	.topNav {
		position: absolute;
		top: 0;
	}

	.line {
		display: none;
	}


	#rightSide {
		align-content: center;
		background: url(../images/ai/sidebar.jpg) no-repeat center center fixed;
		background-size: cover;
		height: 100vh;
		font-family: 'Poppins', sans-serif
	}

	.pastChats {
		float: left;
		margin: 0 2px;
		border: none;
		background-image: url(../images/ai/aura_light.png);
		background-position: 75% -10%;
		background-size: cover;
		background-repeat: no-repeat;
		background-attachment: fixed;
		background-color: var(--theme-color-5);
		padding: 10px;
		width: 250px;
		height: 100%;
		z-index: 1;
		position: relative;
	}

	.pageTitle {
		float: unset;
		margin: auto;
		max-width: 100%;
		padding: 20px 0;
	}

	#titleImg {
		display: block;
		margin: 0 auto 20px;
		border-radius: 100px;
		background: url(../images/ai/blue-background.avif) center;
		background-size: cover;
		aspect-ratio: 1 / 1;
		width: 75%;
		max-width: 100px;
	}

	.pageTitle h3 {
		color: var(--color-text);
		font-size: 12pt;
		line-height: 1.1em;
		text-align: center;
	}

	.pastChats hr {
		margin: -5px auto 30px;
		border: none;
		border-bottom: 1px solid #cdd7dc;
	}

	.mySessions {
		height: calc(100% - 200px);
		overflow-y: auto;
		padding: 10px 10px 35px;
		-webkit-mask-image: -webkit-gradient(linear,
		left top,
		left bottom,
		from(rgba(0, 0, 0, 0)),
		color-stop(5%, rgba(0, 0, 0, 1)),
		color-stop(95%, rgba(0, 0, 0, 1)),
		to(rgba(0, 0, 0, 0)));
	}

	.mySessions .newSession {
		display: inline-block;
		position: relative;
		left: 95%;
		transform: translateX(-100%);
		cursor: pointer;
		border: 2px solid #333;
		border-radius: 20px;
		padding: 5px 10px;
		overflow: hidden;
		color: var(--color-text);
		font-weight: 700;
		font-size: 9pt;
		white-space: nowrap;
	}

	.mySessions .newSession:after {
		position: relative;
		margin-left: 5px;
		content: "\f044";
		color: #007bff;
		font-family: "Font Awesome 5 Free";
	}

	.mySessions h3 {
		margin-bottom: 20px;
		color: var(--color-text);
		font-size: 14pt;
	}

	.mySessions .todaySessions,
	.mySessions .todaySessions {
		padding-bottom: 20px;
	}

	.session {
		cursor: pointer;
		border-bottom: 1px solid rgba(205, 215, 220, .5);
		padding: 15px 0 15px 10px;
	}

	.session:last-of-type {
		border-bottom: none;
	}

	.currentSession {
		border-radius: 10px;
		background-color: #415d6921;
	}

	.sessionTitle {
		display: inline-block;
		box-sizing: border-box;
		width: 100%;
		overflow: hidden;
		color: var(--color-text);
		font-weight: 700;
		font-size: 10pt;
		/*max-width: calc(100% - 20px);*/
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.sessionDate {
		margin-top: 5px;
		font-weight: 400;
		font-size: 10pt;
	}

	.wrapper-ai {
		align-content: center;
		float: left;
		margin: auto;
		width: calc(100% - 260px);
		height: 100%;
	}

	.chatContainer,
	.wrapper-ai .widget {
		margin: auto;
		border-radius: 25px;
		background-image: url(../images/ai/aura_light.png);
		background-position: 75% -10%;
		background-size: 85%;
		background-repeat: no-repeat;
		background-attachment: fixed;
		min-width: 345px;
		max-width: 1280px;
		z-index: 1;
		position: relative;
	}

	.widget .title {
		position: relative;
		z-index: 1 !important;
		margin-bottom: -110px;
		border: none;
		border-radius: 25px 25px 0 0 !important;
		background: transparent;
		padding: 20px 40px;
		z-index: 2 !important;
		height: 75px !important;
	}

	.select2-container--default .select2-selection--single {
		border: 1.5px solid #111;
		border-radius: 20px;
		background: #fff;
		padding: 3px 15px;
		height: 100%
	}

	.select2-container--default .select2-selection--single .select2-selection__arrow {
		top: 5px;
		right: 10px;
	}

	.select2-container--default .select2-selection--single .select2-selection__arrow b {
		border-color: #007bff transparent transparent transparent !important;
	}

	.select2-container--default .select2-selection--single[aria-expanded="true"] {
		border-bottom: none;
	}

	.select2-container--open .select2-dropdown--below {
		border: 1.5px solid #111;
		border-top: none;
		border-radius: 0 0 20px 20px;
		background: #fff;
	}

	.select2-container--default .select2-selection--single .select2-selection__rendered {
		color: var(--color-text);
		font-size: 10pt;
		text-align: center
	}

	.select2-search--dropdown,
	.select2-container--default .select2-results > .select2-results__options {
		padding: 5px 15px;
	}

	.select2-results__option {
		padding: 6px 15px;
	}

	.select2-container--default .select2-results__option--highlighted[aria-selected] {
		border-radius: 10px;
		background: linear-gradient(45deg, #304fb5, #0989cf, #0088b0);
	}

	.select2-container--default .select2-search--dropdown .select2-search__field {
		margin-bottom: 10px;
		border: none;
		border-bottom: 1.5px solid #0989cf;
		padding: 10px;
		text-align: center
	}

	.chatContainer {
		border: none;
		padding: 40px;
		min-width: 320px;
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	#chatHistory {
		height: fit-content;
		min-height: 400px;
		max-height: 70vh;
		overflow-y: auto;
		overflow-x: hidden;
		padding-top: 16px !important;
		flex: 1;
	}

	/* No fade by default */

	.fadeTop {
		-webkit-mask-image: linear-gradient(
				to bottom,
				rgba(0, 0, 0, 0) 0%,
				rgba(0, 0, 0, 1) 10%,
				rgba(0, 0, 0, 1) 100%
		);
		mask-image: linear-gradient(
				to bottom,
				rgba(0, 0, 0, 0) 0%,
				rgba(0, 0, 0, 1) 10%,
				rgba(0, 0, 0, 1) 100%
		);
	}

	.fadeBottom {
		-webkit-mask-image: linear-gradient(
				to bottom,
				rgba(0, 0, 0, 1) 0%,
				rgba(0, 0, 0, 1) 90%,
				rgba(0, 0, 0, 0) 100%
		);
		mask-image: linear-gradient(
				to bottom,
				rgba(0, 0, 0, 1) 0%,
				rgba(0, 0, 0, 1) 90%,
				rgba(0, 0, 0, 0) 100%
		);
	}

	#chatHistory.fadeTop.fadeBottom {
		-webkit-mask-image: linear-gradient(
				to bottom,
				rgba(0, 0, 0, 0) 0%,
				rgba(0, 0, 0, 1) 10%,
				rgba(0, 0, 0, 1) 90%,
				rgba(0, 0, 0, 0) 100%
		);
		mask-image: linear-gradient(
				to bottom,
				rgba(0, 0, 0, 0) 0%,
				rgba(0, 0, 0, 1) 10%,
				rgba(0, 0, 0, 1) 90%,
				rgba(0, 0, 0, 0) 100%
		);
	}

	.chatInputRow {
		display: flex;
		align-items: center;
		gap: 20px;
		width: 100%;
		margin: auto;
	}

	#chatInput {
		flex: 1;
		box-sizing: border-box;
		margin: 0 !important;
		border: 1.5px solid #ddd !important;
		border-radius: 35px !important;
		background: #fff !important;
		padding: 20px 35px !important;
		height: 60px;
		color: #343434;
		font-size: 10pt;
		resize: none;
		overflow: hidden;
	}

	#submitButton {
		flex-shrink: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0;
		width: 60px;
		height: 60px;
		border-radius: 50%;
		background: #000;
		color: #fff;
		font-size: 14pt;
		cursor: pointer;
		aspect-ratio: 1/1;
	}

	#chatHistory .message {

		float: left;
		clear: both;
		padding: 16px 10px 16px 0;
		color: #343434;
	}

	#chatHistory .message.userMessage {
		vertical-align: middle;

		float: right;
		border-radius: 20px;

		background: transparent !important;
		padding-top: 15px;
		padding-right: 15px;
		padding-bottom: 15px;
		padding-left: 15px;
		width: 80%;
	}

	.current_process {
		/* Adjust as needed */
		margin-left: 70px;
		background: linear-gradient(115deg, #808080 30%, #d3d3d3 50%, #808080 70%);
		background-size: 200% auto;
		background-clip: text;
		color: transparent;
		font-weight: 600;
		font-size: 10pt;
		-webkit-background-clip: text;
		animation: glareEffect 3s infinite ease;
		clear: both;
		padding-bottom: 10px;
	}

	@keyframes glareEffect {
		0% {
			background-position: 150% 50%;
		}

		100% {
			background-position: 0% 50%;
		}
	}

	#chatHistory .message .botIcon {
		float: left;
		box-sizing: border-box;
		margin: 0px 0px 10px 0px;

		border-radius: 25px;
		background: url(../images/ai/blue-background.avif);
		background-position: center;
		background-size: cover;
		padding: 0 3px 3px;
		width: 45px !important;
		height: 45px !important;
		content: url('../images/ai/ai_logo.gif');
	}

	#chatHistory .message .messageContent {

		position: relative;
		margin: -20px 0 20px;
		box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
		border-radius: 15px;
		padding: 30px 30px 20px;
		max-width: 75%;
		font-size: 11pt;
		line-height: 1.5em;
		/* Adjust as needed */
	}

	#chatHistory .message .messageContent p {
		padding-top: 0px;
		padding-bottom: 12px;
		margin-bottom: 0px;
	}

	#chatHistory .message .messageContent h1 {
		padding-top: 10px;
		padding-bottom: 10px;
	}

	#chatHistory .message .messageContent ul {
		margin-left: 50px;
		padding-top: 10px;
		padding-bottom: 10px;
		list-style: initial;
	}

	#chatHistory .message .messageContent ul li {
		list-style: initial;
	}

	#chatHistory .message .messageContent table {
		margin-bottom: 16px;
		font-size: 10pt;
	}

	#chatHistory .message .messageContent table thead th {
		padding-left: 4px;
		font-size: 10pt;
		text-align: left;
	}

	#chatHistory .message .messageContent table td {
		border: 1px solid #c2c2c2;
		padding: 4px;
	}

	#chatHistory .message.agentMessage .messageContent {
		margin-left: 65px !important;
		background: var(--color-button-text);
		color: var(--color-text);
	}

	.userMessage .messageContent {
		float: right;
		background: linear-gradient(45deg, #304fb5, #0989cf, #0088b0);
		color: #fff;
	}

	.messageContent::before {
		position: absolute;
		top: 30px;
		border-style: solid;
		width: 0;
		height: 0;
		content: '';
	}

	.agentMessage .messageContent::before {
		left: -10px;
		border-width: 10px 10px 10px 0;
		border-color: transparent var(--color-button-text) transparent transparent;
	}

	.userMessage .messageContent::before {
		right: -10px;
		border-width: 10px 0 10px 10px;
		border-color: transparent transparent transparent #0088b0;
	}

	.options {
		clear: both;
	}

	.optionBtn {
		transition: all .5s ease;
		cursor: pointer;
		margin: 10px 0 10px 65px;
		box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
		border: 3px solid #0989cf;
		border-radius: 30px;
		background: transparent;
		padding: 12px 30px;
		width: fit-content;
		max-width: 75%;
		color: #000;
		font-weight: 600;
		font-size: 10pt;
		line-height: 1.5em;
		text-align: center;

		float: left;
		margin: 10px;
		background-color: white;
	}

	.optionBtn:hover {
		padding: 12px 40px;

	}


	.dot-stretching {

		position: relative;
		float: left;
		clear: both;
		transform: scale(1.25, 1.25);
		animation: dot-stretching 2s infinite ease-in;
		margin: 30px 30px 30px 70px;
		border-radius: 5px;
		background-color: #2173c5;
		width: 10px;
		height: 10px;
		color: #2173c5;
	}

	.dot-stretching::before,
	.dot-stretching::after {
		display: inline-block;
		position: absolute;
		top: 0;
		content: "";
	}

	.dot-stretching::before {
		animation: dot-stretching-before 2s infinite ease-in;
		border-radius: 5px;
		background-color: #2173c5;
		width: 10px;
		height: 10px;
		color: #2173c5;
	}

	.dot-stretching::after {
		animation: dot-stretching-after 2s infinite ease-in;
		border-radius: 5px;
		background-color: #2173c5;
		width: 10px;
		height: 10px;
		color: #2173c5;
	}

	@media only screen and (max-width: 767px) {
		.respHead > a {
			display: none;
			margin: 0;
		}
	}

	@keyframes dot-stretching {
		0% {
			transform: scale(1.25, 1.25);
		}

		50%,
		60% {
			transform: scale(0.8, 0.8);
		}

		100% {
			transform: scale(1.25, 1.25);
		}
	}

	@keyframes dot-stretching-before {
		0% {
			transform: translate(0) scale(0.7, 0.7);
		}

		50%,
		60% {
			transform: translate(-20px) scale(1, 1);
		}

		100% {
			transform: translate(0) scale(0.7, 0.7);
		}
	}

	@keyframes dot-stretching-after {
		0% {
			transform: translate(0) scale(0.7, 0.7);
		}

		50%,
		60% {
			transform: translate(20px) scale(1, 1);
		}

		100% {
			transform: translate(0) scale(0.7, 0.7);
		}
	}

	@media only screen and (max-width: 700px) and (orientation: portrait) {
		.pastChats {
			width: 85%;
			right: 5%;
			left: 5%;
			margin-top: 20px;
			height: 200px;
			border-radius: 25px;
			overflow: hidden;
			position: relative;
		}

		.pastChats .titleArea {
			display: none;
		}

		.mySessions {
			height: 200px;
			padding: 5px 10px;
			-webkit-mask-image: -webkit-gradient(linear,
			left top,
			left bottom,
			from(rgba(0, 0, 0, 0)),
			color-stop(15%, rgba(0, 0, 0, 1)),
			color-stop(85%, rgba(0, 0, 0, 1)),
			to(rgba(0, 0, 0, 0)));
		}

		.pastChats hr {
			display: none;
		}

		.mySessions .newSession {
			margin-top: 20px;
		}

		.session {
			padding: 10px 0 10px 10px;
		}

		.wrapper-ai {
			align-content: start;
			float: none;
			width: 90%;
			height: calc(100vh - 380px);
		}

		.chatContainer, .wrapper-ai .widget {
			background-position: 55% 145%;
			background-size: 150%;
		}

		#chatHistory {
			height: fit-content;
			min-height: 200px;
			max-height: calc(100vh - 525px);
			overflow: scroll;
			-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), color-stop(10%, rgba(0, 0, 0, 1)), color-stop(90%, rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0)));
		}
	}
}