:root {
	--ac-hh: 186px;
}

// .awsm-xyz-chat-widget-chat-item {
// 	max-width: 90%;
// 	padding: 13px 15px;
// 	border-radius: 14px;
// 	box-shadow: 1px 1px 1px -1px rgba(0, 0, 0, 0.24);
// }
// .awsm-xyz-chat-widget-chat-item:nth-child(odd) {
// 	background: #fff;
// 	margin-right: auto;
// }
// .awsm-xyz-chat-widget-chat-item:nth-child(even) {
// 	background: #e1facf;
// 	margin-left: auto;
// }

.awsm-wc {
	box-sizing: border-box;
	// --ac-primary-color: #0ba500;
	// --ac-header-text-color: #ffffff;
	// --ac-default-text-color: #535353;
	// --ac-secondary-text-color: ##f7f6f6;
	// --ac-success: #0ba500;
	// --ac-danger: #bf4242;
	// --ac-bg-color: #eeeeee;

	--ac-primary-color: #0dc300;
	--ac-header-text-color: #ffffff;
	--ac-default-text-color: #1f1f1f;
	--ac-secondary-text-color: #838383;
	--ac-bg-color: #f7f6f6;
	--ac-accent-color: #ffffff;
	--ac-bubble-system-color: #ffffff;
	--ac-bubble-user-color: #e1facf;
	--ac-button-color: #0dc300;
	--ac-button-textcolor: #ffffff;
	--ac-success: #0ba500;
	--ac-danger: #bf4242;

	color: var(--ac-default-text-color);
	font-size: 14px;
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 10000;

	.wp-admin & {
		position: relative;
		right: auto;
		bottom: auto;
		margin: 20px auto;
		text-align: right;
	}

	&-left {
		right: auto;
		left: 20px;
		.wp-admin & {
			text-align: left;
		}
	}

	*,
	*::before,
	*::after {
		box-sizing: border-box;
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
			"Helvetica Neue", Arial, "Noto Sans", sans-serif;
	}
	&-preloader {
		fill: var(--ac-primary-color);
		display: block;
	}
	&-disabled {
		opacity: 0.5;
		pointer-events: none;
	}
	&-trigger {
		cursor: pointer;
		z-index: 10;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
		position: absolute;
		right: 0;
		bottom: 0;
		transition: all ease 0.3s;
		.awsm-wc-left & {
			left: 0;
			right: auto;
		}
		.wp-admin & {
			position: relative;
			justify-content: flex-end;
			margin-top: 20px;
			display: inline-flex;
		}
		&-count {
			width: auto;
			height: auto;
			background-color: #e24242;
			border-radius: 10px;
			position: absolute;
			right: -2px;
			top: -2px;
			z-index: 10;
			color: #fff;
			font-size: 10px;
			min-width: 20px;
			min-height: 20px;
			line-height: 20px;
			text-align: center;
			padding: 0 3px;
			[dir="rtl"] & {
				left: -2px;
				right: auto;
			}
		}
		&-icon {
			position: relative;
			overflow: hidden;
			span {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				transition: all 0.4s ease;
				&:nth-child(1) {
					transform: none;
					.ac-open & {
						transform: translateY(-100%);
						.wp-admin & {
							transform: none;
						}
					}
				}
				&:nth-child(2) {
					transform: translateY(100%);
					.ac-open & {
						transform: none;
						.wp-admin & {
							transform: translateY(100%);
						}
					}
					svg path {
						fill: var(--ac-button-textcolor);
					}
				}
			}
		}
		&.style-1 {
			.awsm-wc-trigger-text {
				display: none;
			}
			.awsm-wc-trigger-icon {
				width: 70px;
				height: 70px;

				background: var(--ac-button-color);
				border-radius: 50%;

				svg {
					fill: var(--ac-button-textcolor);
					max-width: 37px;
					height: auto;
				}
			}
		}
		&.style-2 {
			white-space: nowrap;
			flex-direction: row-reverse;
			background: var(--ac-button-color);
			padding: 12px 30px;
			border-radius: 24px;
			color: var(--ac-button-textcolor);
			font-size: 16px;
			line-height: 1;
			[dir="rtl"] & {
				flex-direction: row;
			}
			.awsm-wc-trigger-icon {
				width: 24px;
				height: 24px;
				min-width: 24px;
				svg {
					fill: var(--ac-button-textcolor);
					max-width: 100%;
					height: auto;
				}
			}
		}
		&.style-3 {
			.awsm-wc-trigger-text {
				background: var(--ac-button-color);
				color: var(--ac-button-textcolor);
				font-size: 16px;
				padding: 10px 26px;
				border-radius: 24px;
				white-space: nowrap;
			}
			.awsm-wc-trigger-icon {
				width: 70px;
				height: 70px;

				background: var(--ac-button-color);
				border-radius: 50%;

				svg {
					fill: var(--ac-button-textcolor);
					max-width: 37px;
					height: auto;
				}
			}
		}
	}
	&-main {
		position: absolute;
		right: 0;
		bottom: 90px;
		border-radius: 8px;
		overflow: hidden;
		max-width: 390px;
		max-height: 560px;
		width: 100vw;
		height: 100vh;
		box-shadow: 0 0px 29px 7px rgba(0, 0, 0, 0.2);
		background-color: var(--ac-bg-color);
		transform: scale(0);
		transform-origin: right bottom;
		opacity: 0;
		transition: all 0.4s cubic-bezier(0.19, 0.57, 0.24, 1.14);
		.awsm-wc-left & {
			left: 0;
			right: auto;
			transform-origin: left bottom;
		}
		.wp-admin & {
			position: relative;
			bottom: auto;
			width: 100%;
		}
		&.ac-agent-chat-open.awsm-wc-agent-view {
			background-color: #f7f6f6;
		}
		.ac-open & {
			transform: scale(1);
			opacity: 1;
			// transition: all 0.3s cubic-bezier(0.47, 1.64, 0.41, 0.8);
			@media screen and (max-width: 480px) {
				max-width: 100vw;
				max-height: calc(100svh - 110px);
				right: -20px;
				.wp-admin & {
					right: 0;
				}
			}
		}
	}
	&.awsm-wc-left .awsm-wc-main {
		@media screen and (max-width: 480px) {
			left: -20px;
		}
	}
	&-in {
		opacity: 1;
		transition: all 0.3s ease;
		position: relative;
		text-align: start;
		&::before {
			content: "";
			background-color: var(--ac-primary-color);
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 60%;
			min-height: calc(var(--ac-hh) + 10px);
		}
		// .ac-opening & {
		// 	opacity: 1;
		// 	transition-delay: 0.5s;
		// }
	}
	&-head {
		color: var(--ac-header-text-color);
		padding: 30px;
		text-align: center;
		// transition: all 0.3s ease;
		position: relative;
		transition: all ease 0.3s;
		&-thumb {
			display: block;
			overflow: hidden;
			max-height: 60px;
			transition: all ease 0.3s;
			opacity: 1;
			margin-bottom: 15px;
			.ac-agent-chat-open & {
				margin-bottom: 0;
			}
			img {
				max-height: 60px;
				object-fit: contain;
				max-width: 100%;
			}
		}
		.ac-agent-chat-open & {
			padding: 8px 16px;

			.awsm-wc-title {
				padding: 3px 0 3px 42px;
				position: relative;
				margin: 0;
				[dir="rtl"] & {
					padding: 3px 42px 3px 0;
				}
			}
			.awsm-wc-agent {
				background-color: #fff;
				border-radius: 8px 8px 0 0;
				margin: -8px -16px;
				padding: 25px 30px;
			}
			.awsm-wc-head-thumb,
			.awsm-wc-desc {
				opacity: 0;
				max-height: 0;
				// height: 0;
				// transform: scaleY(0);
			}
			.awsm-wc-title {
				.awsm-wc-back {
					opacity: 1;
					visibility: visible;
				}
			}
		}
	}
	&-title {
		font-size: 20px;
		line-height: 1.2;
		font-weight: bold;
		padding: 0 0 6px 0;
		position: relative;
		transition: all ease 0.3s;
		.awsm-wc-back {
			position: absolute;
			left: 0;
			top: 0;
			width: 30px;
			height: 30px;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: color-mix(
				in srgb,
				var(--ac-primary-color),
				#000 15%
			);
			border-radius: 50%;
			cursor: pointer;
			opacity: 0;
			visibility: hidden;
			transition: all 0.3s ease;
			svg {
				fill: var(--ac-header-text-color);
			}
			[dir="rtl"] & {
				right: 0;
				left: auto;
				transform: scale(-1);
			}
		}
	}
	&-desc {
		font-size: 14px;
		line-height: 1.429;
		overflow: hidden;
		transition:
			max-height ease 0.3s,
			opacity ease 0.5s;
		max-height: 120px;
		opacity: 1;
	}
	&-in {
		position: relative;
		height: 100%;
		display: flex;
		flex-direction: column;
		border-radius: 8px;
		overflow: hidden;
		box-shadow: 0 0px 29px 7px rgba(0, 0, 0, 0.2);

		.awsm-wc-chat-view & {
			// background-color: #f7f6f6;
		}
	}
	&-content {
		// height: calc(100% - var(--ac-hh));

		flex: 1;
		border-radius: 8px 8px 0 0;
		overflow: hidden;
		background-color: #fff;
		position: relative;
		transition: all 0.4s ease;
		.awsm-wc-chat-view &,
		.awsm-wc-agent-view &,
		.awsm-wc-form-view & {
			background-color: var(--ac-bg-color);
		}
		.awsm-wc-chat-view &,
		.ac-agent-chat-open.awsm-wc-agent-view & {
			position: relative;
			// padding-bottom: 84px;
		}

		&-in {
			height: 100%;
			overflow: auto;
			.awsm-wc-chat-view &,
			.ac-agent-chat-open.awsm-wc-agent-view & {
				padding-bottom: 20px;
			}
		}
	}
	&-chat {
		padding: 20px 20px 0;
		position: relative;
		display: flex;
		flex-direction: column;
		gap: 16px;
		&-foot {
			// padding-bottom: 10px;
			// padding-top: 10px;
			padding: 10px;
			// padding-right: 10px;
			border-top: 1px solid #ddd;
			background: #f7f6f6;
			z-index: 1;
			[dir="rtl"] & {
				// padding-right: 0;
				// padding-left: 10px;
			}
			&-in {
				padding-right: 50px;
				// padding-left: 10px;
				position: relative;
				[dir="rtl"] & {
					padding-left: 50px;
					padding-right: 10px;
				}
			}
			.awsm-wc-input {
				width: 100%;
				border: 1px solid #c2c2c2;
				min-height: 45px;
				border-radius: 23px;
				padding: 10px 20px;
				appearance: none;
				background-color: #fff;
				margin-bottom: 4px;
				color: #1f1f1f;
				// color: var(--ac-default-text-color);
				p {
					margin: 0;
					// padding: 12px;
				}
				&-disabled {
					opacity: 0.5;
					pointer-events: none;
				}
				&-inner {
					max-height: 120px;
					overflow-x: hidden;
					overflow-y: auto;
					&:focus {
						outline: none;
					}
				}
			}
			[contenteditable] {
				-webkit-user-select: text;
				user-select: text;
				font-size: 16px; /* Critical - minimum font size to prevent zoom */
				line-height: normal;
			}

			.awsm-wc-agent-view & {
				opacity: 0;
				visibility: hidden;
				transition: all 0.4s ease;
			}
			.awsm-wc-agent-view.ac-agent-chat-open & {
				opacity: 1;
				visibility: visible;
				transition-delay: 0.5s;
			}
			&-btn {
				position: absolute;
				right: 0;
				bottom: 0;
				width: 45px;
				height: 45px;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 0 !important;
				border: none !important;
				border-radius: 50% !important;
				background: var(--ac-button-color);
				color: var(--ac-button-textcolor);
				svg {
					path {
						fill: var(--ac-button-textcolor);
					}
					[dir="rtl"] & {
						transform: scale(-1);
					}
				}
				[dir="rtl"] & {
					left: 0;
					right: auto;
				}
			}
			textarea {
				width: 100%;
				border: 1px solid #c2c2c2;
				height: 45px;
				border-radius: 23px;
				padding: 6px 20px;
				appearance: none;
			}
			&.awsm-wc-loading {
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				svg {
					// height: 58px;
					// max-width: 58px;
					// display: block;
					height: 47px;
					display: block;
					width: 40px;
				}
			}
			&-retry {
				background-color: var(--ac-bg-color);
				position: relative;
				z-index: 1;
				&-btns {
					display: flex;
					align-items: center;
					justify-content: flex-start;
					margin-top: 16px;
					gap: 8px;
					animation-name: fadeIn;
					animation-duration: 0.3s;
					animation-delay: 0.3s;
					animation-fill-mode: forwards;
					opacity: 0;
					button {
						padding: 8px 16px;
						border-radius: 23px;
						border: 1px solid var(--ac-button-color);
						background-color: #fff;
						transition: all 0.3s ease;
						&:hover {
							opacity: 0.7;
							cursor: pointer;
						}
					}
				}
			}
		}
		&-item {
			max-width: 90%;
			padding: 13px 15px;
			border-radius: 14px;
			box-shadow: 1px 1px 1px -1px rgba(#000, 0.24);
			color: var(--ac-default-text-color);
			background: var(--ac-bubble-system-color);
			animation-name: bounceUp;
			animation-duration: 0.2s;
			animation-delay: 0.1s;
			animation-timing-function: ease-in;
			//cubic-bezier(0, 0.39, 0.43, 0.99);
			// transform-origin: top left;
			transform-origin: bottom left;
			transform: scale(0) translateX(-20px);
			animation-fill-mode: forwards;
			margin-left: 0;
			margin-right: auto;
			line-height: 1.286;
			&-retry {
				max-width: 100%;
			}
			[dir="rtl"] & {
				margin-right: 0;
				margin-left: auto;
			}
			&.awsm-wc-chat-item-user {
				animation-name: none;
				// background: #e1facf;
				background: var(--ac-bubble-user-color);
				margin-left: auto;
				margin-right: 0;
				transform: scale(1) translateX(20px);
				animation-name: bounceUpReverse;
				animation-delay: 0s;
				[dir="rtl"] & {
					margin-left: 0;
					margin-right: auto;
				}
			}
			&.loading {
				padding: 13px 17px;
				svg {
					width: 100px;
					display: block;
					max-width: 35px;
				}
			}
		}
		&-retry {
			&-wrap {
				position: relative;
				.awsm-wc-chat-foot-retry {
					// transform: translateY(0);
					// opacity: 1;
					// visibility: visible;
					// transition: all 0.4s ease;
				}
				.awsm-wc-chat-retry-loader {
					opacity: 0;
					transition:
						height ease 0.2s 0.1s,
						padding 0.3s ease 0.1s,
						opacity ease 0.2s;
					height: 0;
					width: 50px;
					padding-top: 0;
					margin-left: auto;
					margin-right: auto;
					overflow: hidden;
				}
				&.awsm-wc-chat-retry-loading {
					.awsm-wc-chat-foot-retry {
						// transform: translateY(100%);
						// opacity: 0;
						// visibility: hidden;
					}
					.awsm-wc-chat-retry-loader {
						height: 30px;
						opacity: 1;
						padding-top: 16px;
						transition:
							height 0.3s ease,
							opacity 0.2s ease 0.2s;
					}
				}
			}
			// &-loading {
			// 	.awsm-wc-chat-foot-retry {
			// 	}
			// 	.awsm-wc-chat-foot-loading {
			// 		opacity: 1;
			// 		visibility: visible;
			// 	}
			// }
		}
	}
	// .awsm-xyz-chat-widget-chat-item.loading {
	// 	padding: 0;
	// }
	// .awsm-xyz-chat-widget-chat-item.loading svg {
	// 	width: 100px;
	// 	height: 50px;
	// 	margin: -8px -10px -14px;
	// }
	&-form {
		display: flex;
		flex-direction: column;
		gap: 20px;
		padding: 20px 20px 0;
		flex: 1;
		background: var(--ac-accent-color);

		animation-name: fadeIn;
		animation-duration: 0.5s;
		animation-delay: 0.3s;
		animation-fill-mode: forwards;
		opacity: 0;

		// .wp-admin & {
		// 	animation-name: none;
		// }
		&-group {
			label {
				font-size: 14px;
				font-weight: bold;
				margin: 0 0 4px;
				display: block;
				color: var(--ac-default-text-color);
				text-align: start;
			}
			// opacity: 0;
			// animation-name: fadeIn;
			// animation-duration: 0.5s;
			// animation-fill-mode: forwards;
		}
		&-control {
			display: block;
			width: 100%;
			border-width: 0 0 1px !important;
			border-color: #b5b5b5 !important;
			border-style: solid !important;
			border-radius: 0 !important;
			color: var(--ac-default-text-color) !important;

			background-color: transparent;
		}
		input.awsm-wc-form-control {
			background: transparent;
			height: 38px !important;
		}
		textarea.awsm-wc-form-control {
			height: 60px;
		}
		&-button {
			display: block;
			width: 100%;
			background-color: var(--ac-primary-color);
			border: 1px solid var(--ac-primary-color);
			border-radius: 24px;
			padding: 15px 25px;
			font-size: 14px;
			line-height: 18px;
			font-weight: bold;
			color: var(--ac-header-text-color);
		}
		&-foot {
			margin-top: auto;
			.awsm-wc-powered {
				padding: 8px;
			}
			.awsm-wc-chat-foot-loading {
				display: flex;
				align-items: center;
				justify-content: center;
				svg {
					max-width: 52px;
					display: block;
				}
			}
		}
		&-view {
			.awsm-wc-content-in {
				display: flex;
				flex-direction: column;
			}
		}
		&-thankyou {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100%;
			padding: 20px;
			text-align: center;
			flex-direction: column;
			img {
				margin-bottom: 36px;
			}
			p {
				max-width: 300px;
				margin: 0 auto;
				font-size: 14px;
				color: var(--ac-default-text-color);
			}
		}
	}
	&-agents {
		padding: 20px 16px;
		transition: all ease 0.3s;
		.ac-agent-chat-open & {
			padding: 0;
		}
	}
	&-agent {
		display: block;
		text-decoration: none;
		position: relative;
		&:focus,
		&:active {
			outline: none;
		}
		.ac-agent-chat-open & {
			padding: 20px 16px;
		}
		&-item {
			cursor: pointer;
			// transition: all 0.3s ease;
			background: var(--ac-accent-color);
			border-radius: 6px;
			.awsm-wc-agent-in {
				padding: 16px 54px 20px 24px;
				transition: padding 0.3s ease;
				&:not(:last-child) {
					margin-bottom: 12px;
					.ac-agent-chat-open & {
						margin-bottom: 0;
					}
				}
				[dir="rtl"] & {
					padding: 16px 24px 20px 54px;
				}
			}
			&.agent-offline {
				pointer-events: none;
				opacity: 0.5;
			}
			> span {
				position: absolute;
				right: 40px;
				top: 50%;
				transform: translateY(-50%);
				opacity: 0;
				transition: all 0.3s ease;
				[dir="rtl"] & {
					left: 40px;
					right: auto;
					transform: translateY(-50%) scale(-1);
				}
			}
			&:not(.ac-active):hover {
				box-shadow: 0 0 0 1px var(--ac-primary-color);
				> span {
					opacity: 1;
					right: 24px;
					[dir="rtl"] & {
						left: 24px;
						right: auto;
					}
				}
				.awsm-wc-agent-in {
				}
			}
			.ac-agent-chat-open & {
				background-color: var(--ac-accent-color);
				pointer-events: none;
				border-radius: 0;
				.awsm-wc-agent-in {
					padding: 0 16px;
					border: none;
				}
				&:not(.ac-active) {
					opacity: 0;
					visibility: hidden;
					height: 0;
					overflow: hidden;
					margin: 0;
					padding: 0;
				}
			}
		}

		&-in {
			display: flex;
			align-items: center;
			gap: 10px;
		}
		&-thumb {
			position: relative;
			width: 70px;
			height: 70px;
			img {
				border: 2px solid;
				width: 70px;
				height: 70px;
				border-radius: 35px;
				object-fit: cover;
				.agent-online & {
					border-color: var(--ac-success);
				}
				.agent-offline & {
					border-color: var(--ac-danger);
				}
			}
			span {
				position: absolute;
				right: -6px;
				bottom: 0;
				width: 22px;
				height: 22px;
				background-color: var(--ac-primary-color);
				border-radius: 11px;
				display: flex;
				align-items: center;
				justify-content: center;
				svg {
					fill: var(--ac-header-text-color);
					max-width: 14px;
					height: auto;
				}
			}
		}
		&-name {
			font-size: 16px;
			margin-bottom: 3px;
			display: flex;
			align-items: center;
			gap: 6px;
			color: var(--ac-default-text-color);
			span {
				display: flex;
				align-items: center;
				gap: 5px;
				font-size: 10px;
				font-weight: bold;
				.agent-online & {
					color: var(--ac-success);
				}
				.agent-offline & {
					color: var(--ac-danger);
				}
				&::before {
					content: "";
					width: 10px;
					height: 10px;
					border-radius: 5px;
					.agent-online & {
						background-color: var(--ac-success);
					}
					.agent-offline & {
						background-color: var(--ac-danger);
					}
				}
			}
		}
		&-role {
			color: var(--ac-secondary-text-color);
		}
		&-main {
			height: 100%;
		}
		&-chat {
			height: 0;
			overflow: hidden;
			transition: all 0.3s ease;
			background-color: #f7f6f6;
			border-radius: 8px 8px 0 0;
			opacity: 0;
			.ac-agent-chat-open & {
				height: auto;
				opacity: 1;
				transition-delay: 0.5s;
			}
		}
	}
	&-powered {
		text-align: center;
		a {
			color: #c2c2c2;
			font-size: 10px;
			text-decoration: none;
		}
	}
}

@keyframes bounceUp {
	0% {
		opacity: 0;
		transform: scale(1) translateX(-20px);
	}
	100% {
		opacity: 1;
		transform: scale(1) translateX(0);
	}
}
@keyframes bounceUpReverse {
	0% {
		opacity: 0;
		transform: scale(1) translateX(20px);
	}
	100% {
		opacity: 1;
		transform: scale(1) translateX(0);
	}
}

@keyframes fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}