/**
 * =========================================================
 * WRAPPER
 * =========================================================
 */

:root {
	--lwc-primary: #4B254A;
	--lwc-primary-dark: #412040;
	--lwc-secondary: #E97451;
	--lwc-tertiary: #F5C86E;
	--lwc-fourth: #EDEDED;
	--lwc-light-purple: #593658;
	--lwc-opacity-color: #401F3F;

	--lwc-color: #E97451;
}

.lwc-wrapper {
	--lwc-color: #E97451;

	position: fixed;
	bottom: 24px;

	z-index: 9998;

	font-family:
			Inter,
			Arial,
			sans-serif;
}


.lwc-wrapper.lwc-right {
	right: 24px;
}


.lwc-wrapper.lwc-left {
	left: 24px;
}


/**
 * =========================================================
 * POPUP
 * =========================================================
 */

.lwc-popup {
	position: absolute;
	bottom: 72px;

	width: 320px;

	overflow: hidden;

	border: 1px solid rgba(64, 31, 63, 0.08);
	border-radius: 24px;

	background: #fff;

	opacity: 0;
	visibility: hidden;

	transform:
			translateY(14px)
			scale(.96);

	transform-origin: bottom right;

	box-shadow:
			0 22px 65px
			rgba(64, 31, 63, 0.16);

	transition:
			opacity .25s ease,
			transform .25s ease,
			visibility .25s ease;
}


.lwc-right .lwc-popup {
	right: 0;
}


.lwc-left .lwc-popup {
	left: 0;

	transform-origin: bottom left;
}


.lwc-popup.is-open {
	opacity: 1;
	visibility: visible;

	transform:
			translateY(0)
			scale(1);
}


/**
 * =========================================================
 * HEADER
 * =========================================================
 */

.lwc-popup-header {
	display: flex;
	align-items: center;
	justify-content: space-between;

	padding: 16px 18px;

	background: var(--lwc-primary);

	color: #fff;
}


.lwc-popup-header-content {
	display: flex;
	align-items: center;
	gap: 10px;

	font-size: 13px;
	font-weight: 700;
}


.lwc-header-icon {
	display: flex;

	width: 24px;
	height: 24px;
}


.lwc-header-icon svg {
	width: 100%;
	height: 100%;
}


.lwc-popup-close {
	padding: 0;

	border: 0;

	background: transparent;

	color: #fff;

	cursor: pointer;

	font-size: 25px;
	line-height: 1;
}


/**
 * =========================================================
 * CHAT BODY
 * =========================================================
 */

.lwc-chat-body {
	min-height: 190px;

	padding: 20px 16px;

	background: var(--lwc-fourth);
}


.lwc-chat-row {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}


.lwc-agent-image,
.lwc-agent-placeholder {
	width: 36px;
	height: 36px;

	flex: 0 0 36px;

	border-radius: 999px;
}


.lwc-agent-image {
	object-fit: cover;
}


.lwc-agent-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;

	background: var(--lwc-primary);

	color: #fff;

	font-size: 14px;
	font-weight: 700;
}


/**
 * =========================================================
 * MESSAGE
 * =========================================================
 */

.lwc-message {
	max-width: 220px;

	padding: 12px 14px;

	border-radius:
			4px
			16px
			16px
			16px;

	background: #fff;

	color: var(--lwc-primary);

	box-shadow:
			0 6px 20px
			rgba(64, 31, 63, .06);
}


.lwc-message strong {
	display: block;

	margin-bottom: 4px;

	color: var(--lwc-secondary);

	font-size: 11px;
	font-weight: 700;
}


.lwc-message p {
	margin: 0;

	font-size: 13px;
	line-height: 1.5;
}


.lwc-message time {
	display: block;

	margin-top: 5px;

	color: rgba(64, 31, 63, .4);

	font-size: 9px;
}


/**
 * =========================================================
 * INPUT
 * =========================================================
 */

.lwc-input-area {
	display: flex;
	align-items: center;
	gap: 8px;

	padding: 12px;

	background: #fff;
}


.lwc-input-area input {
	width: 100%;
	height: 42px;

	padding:
			0 16px;

	border:
			1px solid
			rgba(64, 31, 63, .12);

	border-radius: 999px;

	outline: none;

	color: var(--lwc-primary);

	font-size: 13px;
}


.lwc-input-area input:focus {
	border-color: var(--lwc-secondary);

	box-shadow:
			0 0 0 3px
			color-mix(
					in srgb,
					var(--lwc-secondary) 10%,
					transparent
			);
}


.lwc-input-area button {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 42px;
	height: 42px;

	flex: 0 0 42px;

	padding: 0;

	border: 0;
	border-radius: 999px;

	background: var(--lwc-secondary);

	color: #fff;

	cursor: pointer;

	transition:
			transform .2s ease,
			background .2s ease;
}


.lwc-input-area button:hover {
	background: var(--lwc-primary);

	transform:
			translateY(-1px)
			scale(1.03);
}


.lwc-input-area button svg {
	width: 17px;
	height: 17px;
}


/**
 * =========================================================
 * PRIVACY
 * =========================================================
 */

.lwc-privacy {
	padding:
			0
			15px
			13px;

	background: #fff;

	color: rgba(64, 31, 63, .55);

	font-size: 9px;
	line-height: 1.4;

	text-align: center;
}


.lwc-privacy a {
	color: var(--lwc-secondary);

	font-weight: 700;

	text-decoration: none;
}


/**
 * =========================================================
 * FLOATING BUTTON
 * =========================================================
 */

.lwc-toggle {
	position: relative;

	display: flex;
	align-items: center;
	justify-content: center;

	width: 60px;
	height: 60px;

	margin-left: auto;

	padding: 0;

	border: 0;

	background: transparent;

	cursor: pointer;

	filter:
			drop-shadow(
					0 10px 22px
					rgba(64, 31, 63, .2)
			);

	transition:
			transform .25s ease;
}


.lwc-left .lwc-toggle {
	margin-left: 0;
	margin-right: auto;
}


.lwc-toggle:hover {
	transform:
			translateY(-2px)
			scale(1.05);
}


#lwc-whatsapp-icon {
	width: 60px;
	height: 60px;

	transition:
			opacity .2s ease,
			transform .25s ease;
}


#lwc-whatsapp-icon.is-hidden {
	opacity: 0;

	transform:
			scale(.6)
			rotate(40deg);
}


/**
 * Close
 */

.lwc-close-icon {
	position: absolute;
	inset: 0;

	display: flex;
	align-items: center;
	justify-content: center;

	border-radius: 999px;

	background: var(--lwc-secondary);

	color: #fff;

	opacity: 0;

	font-size: 2rem !important;
	font-weight: 300;
	line-height: 1;

	transform:
			scale(.5)
			rotate(-45deg);

	transition:
			opacity .2s ease,
			transform .25s ease;
}


.lwc-close-icon.is-visible {
	opacity: 1;

	transform:
			scale(1)
			rotate(0);
}


/**
 * =========================================================
 * MOBILE
 * =========================================================
 */

@media (max-width: 520px) {

	.lwc-wrapper {
		bottom: 108px;
	}

	.lwc-toggle {

		width: 48px;
		height: 48px;

	}


	.lwc-wrapper.lwc-right {
		right: 12px;
	}


	.lwc-wrapper.lwc-left {
		left: 12px;
	}


	.lwc-popup {
		position: fixed;

		right: 12px;
		bottom:180px;

		left: 12px !important;

		width: auto;

		max-width: none;
	}


	.lwc-chat-body {
		min-height: 165px;
	}
}


/* ---- Mobile tweaks ---- */

@media (max-width: 480px) {

	.lwc-wrapper.lwc-right {
		right: 16px;
	}

	.lwc-wrapper.lwc-left {
		left: 16px;
	}

	.lwc-wrapper {
		bottom: 108px;
		transition: bottom 0.4s ease;
	}

	.lwc-wrapper.lwc-scrolled {
		bottom: 120px;
	}

	.lwc-balloon,
	.lwc-consent {
		max-width: calc(100vw - 100px);
	}

	.lwc-right .lwc-popup {
		right: 16px;
	}
}