.idr-ai-chatbox-container{
	position: fixed;
	bottom: 0;
	z-index: 999;
	background: rgba(244, 175, 182, 0.07);
	backdrop-filter: blur(8px);
	width: 100%;
	padding-top:15px;
	padding-bottom:15px;
}
.idr-ai-chatbox-container.open{
	padding-bottom:0;
}
#idr-ai-chatbox{
	display: flex;
	gap: 15px;
	justify-content: center;
	align-items: center;
}
#idr-ai-chatbox-header{
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding:0 25px 0 25px;
	width:fit-content;
	position:relative;
	padding-left:unset !important;
	padding-right:unset !important;
	align-items: flex-end;
	margin: 0 0 0 20px;

}
#idr-ai-chatbox-header::after{
	position:absolute;
	content:'';
	background:url("/wp-content/plugins/idr-chat-widget/assets/images/drop-arrow.svg") no-repeat;
	background-size:cover;
	width: 30px;
	height: 30px;
	right: 20px;
	top: 0;
	opacity:0;
	cursor:pointer;
}
.idr-ai-chatbox-container.open #idr-ai-chatbox-header::after{
	opacity:1;
}
#idr-ai-chatbox-header  p:first-child{
	font-size:25px;
	font-weight:600;
	line-height:25px;
}
.idr-ai-chatbox-intro{
	font-weight:500;
	font-size:15px;
	line-height:20px;
}
#idr-ai-chatbox-body{
	display:flex;
	flex-direction:column;
	width:100%;
}
.idr-ai-chatbox-input-container{
	display:flex;
	align-items:center !important;
	gap:10px;
}
.idr-ai-chatbox-container .idr-input-wrapper{
	padding-left:unset !important;
	padding-right: 10px !important;
}
.idr-ai-chatbox-input-container textarea,.idr-ai-chatbox-input-container button{
	border:none;
	background:unset;
}
.idr-ai-chatbox-input-container textarea{
	font-weight:400;
	width: 100%;
	resize: none;
	font-size:12px;
	background: #F9FAFB;
	color: #6B7280;
	padding: 10px;
	display: flex;
	border-radius:8px;
	gap:20px;
	border: 1px solid  #D1D5DB;
	min-height:65px;
}
.idr-ai-chatbox-container.open	.idr-ai-chatbox-input-container textarea{
		min-height:unset;
	}
.idr-ai-chatbox-input-container textarea::-webkit-scrollbar {
	display: none;
}

.idr-ai-chatbox-input-container textarea:focus,.idr-ai-chatbox-input-container button:focus{
	border:none;
	outline:none;
}
.idr-ai-chatbox-container.open #idr-ai-chatbox{
	flex-wrap:wrap;
}
.idr-ai-chatbox-container.open .idr-ai-chatbox-intro{
	display:none;
}
.idr-ai-chatbox-container.open #idr-ai-chatbox-history,.idr-ai-chatbox-container.open  #idr-ai-chatbox-header{
	display:block;
	width:100%;
}
.idr-ai-chatbox-container.open .idr-ai-chatbox-input-container{
	margin:0 20px;
}
.idr-ai-chatbox-container.open .idr-ai-chatbox-title {
    padding-left: 0;
}
.idr-ai-chatbox-container.open #idr-ai-chatbox-body{
	width:100%;
	background:#ffffff;
	padding-bottom:20px;
}
#idr-ai-chatbox-send svg,#idr-ai-chatbox-send{
	width:20px;
	height:20px;
}
#idr-ai-chatbox-history{
	background: #ffffff;
	padding: 25px;
	display: flex;
	flex-direction: column;
	gap:20px;
	display:none;
	max-height: 350px;
	overflow: auto;
}
.chat-message.user-message,.assistant-message{
	padding: 10px;
	border: 1px solid  #e6e7e8;
	max-width: 83%;
	border-radius:8px;
}
.chat-message.user-message{
	margin-left:20%;
	font-weight:600;
	margin-top:20px;
	margin-bottom:20px;
	word-wrap: break-word;
}
.chat-message.assistant-message.thinking-message{
	font-style:italic;
}
.chat-message.assistant-message ul,.chat-message.assistant-message ol{
	margin-left:25px;
}
.chat-message.assistant-message p,.chat-message.assistant-message li{
	margin-bottom:15px;
	font-style:italic;
}

.idr-ai-chatbox-title{
	position:relative;
	padding-left:15px;
}
.idr-ai-chatbox-title:before{
	position:absolute;
	content:'';
	background:url("/wp-content/plugins/idr-chat-widget/assets/images/chatbox.png") no-repeat;
	background-size:cover;
	width: 22px;
	height: 29px;
    top: 7px;
    left: -13px;
	animation: spinY 2s linear infinite;
	transform-origin: center;
	/*     backface-visibility: hidden;
	perspective: 1000px; */
}

@keyframes spinY {
	0% {
		transform: rotateY(0deg);
	}
	100% {
		transform: rotateY(360deg);
	}
}
.idr-ai-chatbox-container.open .idr-ai-chatbox-title:before{
	opacity:0;
}
.message-dot {
	opacity: 0;
	animation: blink 1.5s infinite;
	font-size:16px;
}

.message-dot:nth-child(2) {
	animation-delay: 0.3s;
}

.message-dot:nth-child(3) {
	animation-delay: 0.6s;
}

.message-dot:nth-child(4) {
	animation-delay: 0.9s;
}

@keyframes blink {
	0% { opacity: 0; }
	25% { opacity: 1; }
	50% { opacity: 1; }
	100% { opacity: 0; }
}
.idr-ai-chatbox-title img{
	width:95px;
	height:36px;
}
@media only screen and (min-width: 576px) and (max-width: 768px) {
	#idr-ai-chatbox-header{
		width:unset;
		margin:unset;
	}
	#idr-ai-chatbox-body{
		width:unset;
		padding-bottom:unset;
	}
	
	.idr-ai-chatbox-input-container textarea{
		min-width: 279px;
		min-height:unset;
		font-size:14px;

	}
	.idr-ai-chatbox-container.open textarea{
		max-height: 43px;
	}
	.idr-ai-chatbox-container.open #idr-ai-chatbox-body{
		padding-bottom:15px;
	}
	.idr-ai-chatbox-container.open #idr-ai-chatbox-header,.idr-ai-chatbox-container.open #idr-ai-chatbox-body{
		width:100%;
	}
	.idr-ai-chatbox-container{
		padding-bottom:15px;
		padding-top:15px;
	}

	.idr-ai-chatbox-container.open{
		padding-top:0;
		padding-bottom:0;
	}
	#idr-ai-chatbox{
		align-items:center;
		gap:30px;
	}
	.idr-ai-chatbox-container.open #idr-ai-chatbox{
		gap:15px;
	}
	.idr-ai-chatbox-container.open #idr-ai-chatbox-header{
		padding-top:15px;
	}
	.idr-ai-chatbox-input-container {
		gap: 20px;
	}
	#idr-ai-chatbox-header::after {
		top:18px;
	}
}
@media only screen and (min-width: 768px){
	#idr-ai-chatbox-body{
		display: flex;
		flex-direction:row;
		flex-wrap: wrap;
		width:unset;
		gap:15px;
		padding-bottom:0;
	}

	.idr-ai-chatbox-input-container textarea{
		max-height:42px;
		min-width: 490px;
		min-height:unset;
		font-size:14px;
	}
	

	.idr-ai-chatbox-container.open #idr-ai-chatbox-body,.idr-ai-chatbox-container.open .idr-ai-chatbox-input-container{
		width:100% !important;
		margin:auto !important
	}
	#idr-ai-chatbox{
		gap:30px;
		align-items:center;
	}
	.idr-ai-chatbox-intro{
		max-width: 235px;
		margin-left:30px;
	}
	#idr-ai-chatbox-header{
		width:unset;
	}
	.idr-ai-chatbox-container.open #idr-ai-chatbox-header{
		padding:15px 0 15px 0 !important;
		width:100%;
	}
	.idr-ai-chatbox-container.open #idr-ai-chatbox{
		gap:0;
	}
	.idr-ai-chatbox-title:before{
		top: 6px;
        left: -17px;
	}
	#idr-ai-chatbox-header::after{
		right:0;
		top: 18px;
	}
	#idr-ai-chatbox-container .idr-input-wrapper{
		margin-left: auto!important;
		margin-right: auto!important;
	}
	.idr-ai-chatbox-container{
		padding-bottom:15px;
		padding-top:15px;
	}
	.idr-ai-chatbox-container.open{
		padding-top:0;
		padding-bottom:0;
	}
	.idr-ai-chatbox-container.open #idr-ai-chatbox-body{
		padding-bottom:30px;
	}
	#idr-ai-chatbox-send{
		height:23px;
	}

}


@media only screen and (min-width: 992px){
	#idr-ai-chatbox-history{
		max-height: 301px;
		overflow: auto;
		max-width:800px;
	}
	.idr-ai-chatbox-input-container{
		max-width:800px;
	}

	#idr-ai-chatbox{
		gap:0;
	}
	#idr-ai-chatbox-header {
		align-items: flex-start;
		padding: 0 0 0 0;
		gap:25px;
		margin:unset;
	}
	.idr-ai-chatbox-container.open #idr-ai-chatbox-header,.idr-ai-chatbox-container.open 	#idr-ai-chatbox-body{
		padding: 10px 0 10px 0 !important;
		width:100%;
	}
	.idr-ai-chatbox-input-container{
		margin: 0 23px;
		gap:20px;

	}

	#idr-ai-chatbox-body{
		display:block;
		padding-bottom:0;
	}
	#idr-ai-chatbox-header p:first-child {
		font-size: 30px;
		flex-basis: 17%;
		line-height: 24px;
	}
	.idr-ai-chatbox-input-container textarea {
		min-width: 670px;
	}

	.idr-ai-chatbox-title:before{
		top: 6px;
		left: -10px;
		width: 19px;
		height: 24px;
	}
	.idr-ai-chatbox-container.open    #idr-ai-chatbox-header p:first-child {
		font-size: 25px;
		line-height: 22px;
	}
	.idr-ai-chatbox-container {
		padding-bottom: 16px;
		padding-top:16px;
	}
	.idr-ai-chatbox-container .idr-input-wrapper{
		padding:unset !important;
	}

}
@media only screen and (min-width: 1200px){
	.idr-ai-chatbox-container.open .idr-ai-chatbox-title{
		padding-left:unset;
	}
	#idr-ai-chatbox-header p:first-child {
		flex-basis:19%;
	}
	#idr-ai-chatbox-header::after{
		top: 14px;
	}

}
@media only screen and (min-width: 1400px) {
	#idr-ai-chatbox-header {
		padding-left:0 !important;
		padding-right:0 !important;
		gap:55px;
	}

	#idr-ai-chatbox-header::after{
		right:10px;
	}

	.idr-ai-chatbox-container.open .idr-ai-chatbox-input-container,#idr-ai-chatbox-history{
		max-width: 900px;
	}

}
