// main: ChatGPT.module.scss,Messages.module.scss

// The icon when the chat window is closed.

.mwai-open-button {
	position: absolute;
	right: 0;
	bottom: 0;
	transition: all 0.2s ease-out;
	z-index: 9999;
	display: flex;
	flex-direction: column;
	align-items: end;

	.mwai-icon-text {
		background: var(--mwai-iconTextBackgroundColor);
		color: var(--mwai-iconTextColor);
		max-width: 200px;
		font-size: 13px;
		margin-bottom: 15px;
		padding: 5px 10px;
		border-radius: 8px;
	}
	
	&:hover {
		cursor: pointer;
		filter: saturate(2.5) hue-rotate(5deg);
	}
}

// Handle the chat window and fullscreen.
// Let's keep this common for all themes.

.mwai-window {
	position: fixed;
	right: 30px;
	bottom: 30px;
	width: var(--mwai-width);
	z-index: 9999;

	.mwai-header {
		display: none;
    justify-content: flex-end;
    align-items: center;
		border-radius: var(--mwai-borderRadius) var(--mwai-borderRadius) 0 0;
		background: var(--mwai-backgroundHeaderColor);

		.mwai-buttons {
			display: flex;
			align-items: center;

			.mwai-resize-button {
				justify-content: center;
				height: 32px;
				width: 22px;
				cursor: pointer;
				display: flex;
				justify-content: center;
				align-items: center;

				&:before {
					transition: all 0.2s ease-out;
					content: ' ';
					cursor: pointer;
					position: absolute;
					height: 13px;
					width: 13px;
					border: 1px solid var(--mwai-headerButtonsColor);
				}

				&:hover:before {
					width: 16px;
					height: 16px;
				}
			}

			.mwai-close-button {
				justify-content: center;
				height: 32px;
				width: 33px;
				cursor: pointer;
				border-radius: var(--mwai-borderRadius);

				&:before {
					transition: all 0.2s ease-out;
					transform: translate(16px, 5px) rotate(45deg);
				}
				&:after {
					transition: all 0.2s ease-out;
					transform: translate(16px, 5px) rotate(-45deg);
				}
			}

			.mwai-close-button:before, .mwai-close-button:after {
				content: ' ';
				cursor: pointer;
				position: absolute;
				height: 22px;
				width: 1px;
				background-color: var(--mwai-headerButtonsColor);
			}

			.mwai-close-button:hover {
				&:before {
					opacity: 1;
					transform: translate(16px, 5px) rotate(135deg);
				}
				&:after {
					opacity: 1;
					transform: translate(16px, 5px) rotate(45deg);
				}
			}

		}
	}

	.mwai-content {
		display: none;
		opacity: 0;
		max-height: var(--mwai-maxHeight);
		border-radius: 0 0 var(--mwai-borderRadius) var(--mwai-borderRadius);
		overflow: hidden;
	}

	&.mwai-bottom-left {
		bottom: 30px;
		right: inherit;
		left: 30px;

		.mwai-open-button {
			right: inherit;
			left: 0;
		}
	}

	&.mwai-top-right {
		top: 30px;
		bottom: inherit;
		right: 30px;

		.mwai-open-button {
			top: 0;
			bottom: inherit;
		}
	}

	&.mwai-top-left {
		top: 30px;
		bottom: inherit;
		right: inherit;
		left: 30px;

		.mwai-open-button {
			top: 0;
			bottom: inherit;
			right: inherit;
			left: 0;
		}
	}

	&.mwai-top-left, &.mwai-bottom-left {
		
		.mwai-open-button {
			align-items: flex-start;
		}
	}

	&.mwai-top-right, &.mwai-top-left {

		.mwai-open-button {
			flex-direction: column-reverse;

			.mwai-icon-text {
				margin-bottom: 0;
				margin-top: 15px;
			}
		}
	}
}

// Popup chat is fullscreen

.mwai-window.mwai-fullscreen {

	.mwai-header  {

		.mwai-buttons  {
			margin-bottom: 0px;

			.mwai-resize-button {
				&:before {
					width: 16px;
					height: 16px;
				}
		
				&:hover:before {
					width: 13px;
					height: 13px;
				}
			}
		}
	}
}

// Standard chat is fullscreen

.mwai-fullscreen:not(.mwai-window), .mwai-fullscreen.mwai-window.mwai-open {
	position: fixed;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  top: 0 !important;
  width: inherit;
  height: inherit;
  max-height: inherit;
  max-width: inherit;
	display: flex;
	flex-direction: column;
	margin: 0;
	z-index: 999999;
	background-color: var(--mwai-backgroundSecondaryColor);

  .mwai-content {
		height: 100%;
    max-height: inherit;

		.mwai-conversation {
			flex: auto;
			max-height: none;
		}
  }
}

// Popup chat is open

.mwai-window.mwai-open {

	.mwai-header {
		display: flex;
	}

	.mwai-content {
		display: flex;
		transition: opacity 200ms ease-in-out 0s;
		opacity: 1;
	}

	.mwai-open-button {
		display: none;
	}
}

.mwai-error {
	margin: var(--mwai-spacing);
	color: white;
	background: rgba(180, 55, 55, 0.55);
	padding: var(--mwai-spacing);
	border-radius: var(--mwai-borderRadius);

	&:hover {
		cursor: pointer;
		background: rgba(180, 44, 44, 0.85);
	}
}

// Keyframes for buttons

@keyframes mwai-button-spinner {

	from {
		transform: rotate(0turn);
	}
	to {
		transform: rotate(1turn);
	}
}

// WordPress Admin Bar

.admin-bar .mwai-fullscreen:not(.mwai-window),
.admin-bar .mwai-fullscreen.mwai-window.mwai-open {
	top: 32px;
}

// Mobile

@media (max-width: 760px) {

	.mwai-chat {

		&.mwai-window {
			width: calc(100% - 40px);
			z-index: 9999999999;
		}

		.mwai-reply {
			flex-direction: column;
		}

		.mwai-input {
			flex-direction: column;
		}
	}
}