@use '../../../../../../resources/views/default/scss/components/progressive-blur';

@keyframes lqd-ext-chat-spin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

@keyframes lqd-ext-chat-message-loader {
	0% {
		opacity: 0.5;
		transform: translateY(0);
	}

	50% {
		opacity: 1;
		transform: translateY(-3px);
	}

	100% {
		opacity: 0.5;
		transform: translateY(0);
	}
}

.lqd-ext-chatbot-embedded,
.lqd-ext-chatbot-embedded body {
	margin: 0;
	padding: 0;
}

// fixing a bug on ff
body:has(> .lqd-ext-chatbot:only-child) {
	margin: 0 !important;
}

.lqd-ext-chatbot {
	--lqd-ext-chat-primary: #017be5;
	--lqd-ext-chat-primary-foreground: #fff;
	--lqd-ext-chat-font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	--lqd-ext-chat-offset-y: 30px;
	--lqd-ext-chat-offset-x: 30px;
	--lqd-ext-chat-trigger-w: 60px;
	--lqd-ext-chat-trigger-h: 60px;
	--lqd-ext-chat-trigger-background: var(--lqd-ext-chat-primary);
	--lqd-ext-chat-trigger-foreground: var(--lqd-ext-chat-primary-foreground);
	--lqd-ext-chat-window-w: 420px;
	--lqd-ext-chat-window-h: 745px;
	--lqd-ext-chat-window-bg: #fff;
	--lqd-ext-chat-window-y-offset: 20px;
	--lqd-ext-chat-form-h: 70px;
	--lqd-ext-chat-foot-bg: #f8f8f8;
	--lqd-ext-chat-chat-assistant-bg: #F9F9F9;
	--lqd-ext-chat-chat-assistant-color: #000;
	--lqd-ext-chat-position: fixed;
	--lqd-ext-chat-flex-direction: column;
	display: flex;
	flex-direction: var(--lqd-ext-chat-flex-direction);
	gap: var(--lqd-ext-chat-window-y-offset);
	position: relative;
	// position: var(--lqd-ext-chat-position);
	// bottom: var(--lqd-ext-chat-offset-y);
	// left: var(--lqd-ext-chat-offset-x);
	overflow: hidden;
	z-index: 99999;
	font-family: var(--lqd-ext-chat-font-family);
	color: #222;

	&-emoji-picker {

		.picmo__picker {

			&.picmo__picker {
				--background-color: #F9F9F9;
				--secondary-background-color: #F9F9F9;
				--border-color: hsl(0 0% 0% / 5%);
				--search-background-color: hsl(0 0% 0% / 5%);
				--search-height: 40px;
				--accent-color: var(--lqd-ext-chat-primary);
				--ui-font-size: 14px;
				--picker-width: 100%;
				--emoji-size-multiplier: 1;
				--emoji-preview-size: 2em;
				--emoji-size: 1.75rem;
				--emoji-area-height: min(300px, calc(min(var(--lqd-ext-chat-window-h), calc(100vh - (var(--lqd-ext-chat-offset-y) * 2) - var(--lqd-ext-chat-trigger-h) - var(--lqd-ext-chat-window-y-offset))) - 140px));
			}

			.picmo__searchContainer {

				.picmo__searchField {
					border-radius: 8px;
					font-size: 14px;
				}
			}

			.picmo__emojiButton {
				border-radius: 6px;
			}

			.picmo__preview {
				display: none;
			}
		}
	}

	&-trigger {
		display: inline-grid;
		place-items: center;
		place-content: center;
		width: var(--lqd-ext-chat-trigger-w);
		height: var(--lqd-ext-chat-trigger-h);
		position: relative;
		background-color: var(--lqd-ext-chat-trigger-background);
		color: var(--lqd-ext-chat-trigger-foreground);
		border-radius: var(--lqd-ext-chat-trigger-w);
		border: none;
		overflow: hidden;
		transition: all 0.15s;
		cursor: pointer;
		backdrop-filter: blur(12px) saturate(120%);

		&:before {
			content: '';
			display: inline-block;
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			background-color: var(--lqd-ext-chat-primary);
			opacity: 0;
			transform: translateY(3px);
			transition: all 0.15s;
		}

		&-img,
		&-icon {
			grid-row: 1 / 1;
			grid-column: 1 / 1;
			transition: all 0.15s;
			position: relative;
			z-index: 1;
		}

		&-img {
			width: 100%;
			height: auto;
			max-width: none;
		}

		&-icon {
			opacity: 0;
			transform: translateY(3px);
		}

		&:active {
			transform: scale(0.9);
		}
	}

	&-trigger-bubble {
		padding: 12px 16px;
		border-radius: 12px;
		position: absolute;
		bottom: calc(var(--lqd-ext-chat-trigger-h) + var(--lqd-ext-chat-window-y-offset));
		left: 0;
		color: var(--lqd-ext-chat-primary);
		font-size: 14px;
		font-weight: 500;
		line-height: 1.2em;
		backdrop-filter: blur(12px) saturate(120%);
		transition: all 0.15s;

		&:before {
			content: '';
			display: inline-block;
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			background-color: var(--lqd-ext-chat-primary);
			opacity: 0.05;
			border-radius: inherit;
		}

		p {
			position: relative;
			z-index: 1;
			margin: 0;
		}
	}

	&-window {
		display: flex;
		flex-direction: column;
		// width: var(--lqd-ext-chat-window-w);
		// height: var(--lqd-ext-chat-window-h);
		width: 100vw;
		height: 100vh;
		background-color: var(--lqd-ext-chat-window-bg);
		// box-shadow: 0 5px 40px hsl(0 0% 0% / 16%);
		border-radius: 12px;
		overflow: hidden;
		pointer-events: none;
		transform-origin: bottom left;
		transform: scale(0.975) translateY(6px);
		opacity: 0;
		visibility: hidden;
		transition: all 0.1s;

		&-conversation-message {
			display: flex;
			gap: 10px;

			&-avatar {
				width: 27px;
				height: 27px;
				overflow: hidden;
				border-radius: 20px;
				flex-shrink: 0;
				margin: 0;
			}

			&-content-wrap {
				display: flex;
				flex-wrap: wrap;
				flex-grow: 1;
				max-width: 100%;

				&:has(pre[class*=language-]) {
					max-width: calc(100% - 27px - 10px);
				}
			}

			&-content {
				padding: 12px;
				border-radius: 11px;
				background-color: var(--lqd-ext-chat-chat-assistant-bg);
				color: var(--lqd-ext-chat-chat-assistant-color);
				transition: background-color 0.15s;
				max-width: 100%;

				&,
				pre {

					> :first-child {
						margin-top: 0;
					}

					> :last-child {
						margin-bottom: 0;
					}
				}

				pre {
					margin: 0;
					white-space: normal;
					font: inherit;

					&[class*=language] {
						font-family: 'Courier New', Courier, monospace;
						border-radius: 4px;
						max-width: 100%;
						direction: ltr;
						white-space: pre-wrap;
					}
				}

				ol,
				ul {
					padding-inline-start: 1.5em;
				}

				li {
					margin-bottom: 1em;
				}
			}

			&-time {
				width: 100%;
				margin-top: 6px;
				font-size: 11px;
				font-weight: 500;
				opacity: 0.5;
			}

			&-loader {

				span {
					animation: lqd-ext-chat-message-loader 1s ease-out infinite;

					&:nth-child(2) {
						animation-delay: 0.125s;
					}

					&:nth-child(3) {
						animation-delay: 0.25s;
					}
				}
			}

			&[data-type=user] {
				justify-content: end;

				.lqd-ext-chatbot-window-conversation-message-content-wrap,
				.lqd-ext-chatbot-window-conversation-message-content {
					margin-inline-start: auto;
				}

				.lqd-ext-chatbot-window-conversation-message-time {
					text-align: end;
				}

				.lqd-ext-chatbot-window-conversation-message-content {
					background-color: var(--lqd-ext-chat-primary);
					color: var(--lqd-ext-chat-primary-foreground);
				}

				+[data-type=user] {
					margin-top: 8px;

					.lqd-ext-chatbot-window-conversation-message-avatar {
						visibility: hidden;
					}
				}
			}

			&[data-type=assistant] {

				+[data-type=assistant] {
					margin-top: 8px;

					.lqd-ext-chatbot-window-conversation-message-avatar {
						visibility: hidden;
					}
				}
			}
		}

		&-loader {

			svg {
				animation: lqd-ext-chat-spin 0.75s linear infinite;
			}
		}
	}

	&[data-pos-x=left] {

		html[dir=rtl] & {
			align-items: end;
		}
	}

	&[data-pos-x=right] {
		align-items: end;

		.lqd-ext-chatbot-window {
			transform-origin: bottom right;
		}

		.lqd-ext-chatbot-trigger-bubble {
			left: auto;
			right: 0;
		}

		html[dir=rtl] & {
			align-items: start;
		}
	}

	&[data-pos-y=top] {
		--lqd-ext-chat-flex-direction: column-reverse;

		.lqd-ext-chatbot-window {
			transform-origin: top left;
		}

		.lqd-ext-chatbot-trigger-bubble {
			bottom: auto;
			top: calc(var(--lqd-ext-chat-trigger-h) + var(--lqd-ext-chat-window-y-offset));
		}

		&[data-pos-x=right] {

			.lqd-ext-chatbot-window {
				transform-origin: top right;
			}
		}
	}

	&[data-window-state=open] {

		.lqd-ext-chatbot-window {
			transform: scale(1) translateY(0);
			opacity: 1;
			visibility: visible;
			pointer-events: auto;
		}

		.lqd-ext-chatbot-trigger-bubble {
			transform: scale(0.95);
			opacity: 0;
			visibility: hidden;
		}

		.lqd-ext-chatbot-trigger {

			&:before {
				transform: translateY(0);
				opacity: 1;
			}

			.lqd-ext-chatbot-trigger-icon {
				opacity: 1;
				transform: translateY(0);
			}

			.lqd-ext-chatbot-trigger-img {
				opacity: 0;
				transform: translateY(-3px);
			}
		}
	}

	&[data-fetching=false] {

		.lqd-ext-chatbot-window-loader {
			opacity: 0;
			visibility: hidden;
			transition-delay: 100ms;
		}
	}
}
