/*---------------------------------------*\
 * Styles For Image generator
 * DALL-E
\*---------------------------------------*/

.main-sidebar-cont {
	* {
		box-sizing: border-box;
	}

	.sidebar-ai-heading {
		text-align: center;
		padding-bottom: 15px;
	}
	.prompt-area {
		width: 100%;
		font: initial;
		font-size: 0.9rem;
		padding: 10px;
		border-radius: 5px;
		border: 1px solid gray;
		outline: none;
		color: var(--primary-text-color);
		resize: none;
		margin-bottom: 8px;
		background: transparent;

		&:focus-visible {
			border-color: var(--button-background-color);
		}
	}
	.size-selector {
		width: 100%;
		margin-bottom: 16px;
		background: transparent;
		padding: 10px;
		border-radius: 5px;
		border: 1px solid gray;
		outline: none;
		color: var(--primary-text-color);

		&:focus-visible {
			border-color: var(--button-background-color);
		}
	}
	.generatorBtn {
		border: none;
		background: var(--button-background-color);
		color: var(--button-text-color);
		padding: 10px 16px;
		border-top-left-radius: 15px;
		border-bottom-right-radius: 15px;
		font-weight: 600;
		font-size: 16px;
	}
	.img-fluid {
		max-width: 100%;
		margin-top: 10px;
	}
}

/*---------------------------------------*\
 * Styles For Text Generator
 * AI Assistant
\*---------------------------------------*/

#acode-ai-assistant {
	* {
		box-sizing: border-box;
	}

	.mainApp {
		position: absolute;
		left: 0;
		width: 100%;
		height: calc(100% - 80px);
		background: var(--primary-color);
	}

	.chatBox {
		height: 100%;
		width: 100%;
		white-space: pre-wrap;
		overflow-y: auto;
	}

	/**
   * Display User input in chatBox
   */

	.wrapper {
		padding-block: 12px;
		padding-inline: 10px;

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

			.profile {
				height: 35px;
				width: 35px;
				border-radius: 8px;
				background: #5436da;
				display: flex;
				align-items: center;
				justify-content: center;

				img {
					width: 60%;
				}
			}

			.message {
				flex: 1;
				color: var(--primary-text-color);
				font-size: 16px;
				line-height: 1.5;
				user-select: text;
			}
		}
	}

	/**
   * Displat Ai response in chatBox
   */

	.ai_wrapper {
		padding-block: 12px 30px;
		padding-inline: 10px;
		background-color: var(--secondary-color);

		.ai_chat {
			display: flex;
			align-items: flex-start;
			gap: 10px;

			.ai_profile {
				height: 35px;
				width: 35px;
				border-radius: 8px;
				background: #10a37f;
				display: flex;
				align-items: center;
				justify-content: center;

				img {
					width: 60%;
				}
			}
		}
	}

	/**
   * Highlights Code AREA
   * In Ai response
   */

	.ai_wrapper .ai_message {
		flex: 1;
		color: var(--secondary-text-color);
		font-size: 16px;
		line-height: 1.5;
		overflow: hidden;
		user-select: text;
		/*
    code block in ai response
    */
		.codeBlock {
			border: 2px solid var(--border-color);
			width: 100%;
			border-radius: 5px;
			overflow-x: auto;
			position: relative;

			.copy-button {
				position: absolute;
				top: 4px;
				right: 8px;
				border: none;
				outline: none;
				border-radius: 8px;
				height: 24px;
				width: 28px;
				color: lightgray;
				display: flex;
				justify-content: center;
				align-items: center;
				font-weight: bold;
				background: rgb(26, 34, 46);
				box-shadow: 0 4px 0 #1b232f;
				transition: all 0.3s ease-in-out;
				&:active {
					box-shadow: 0;
					color: gray;
				}
			}
			.codesArea {
				box-sizing: border-box;
				padding: 12px;
				margin-bottom: 0;
				&::-webkit-scrollbar {
					height: 10px;
				}
				&::-webkit-scrollbar-thumb {
					background: lightgray;
					border-radius: 4px;
				}
			}
		}

		// Markdown

		hr {
			margin: 1rem 0;
			color: inherit;
			border: 0;
			border-top: 1px solid;
			opacity: 0.25;
		}

		h6,
		h5,
		h4,
		h3,
		h2,
		h1 {
			margin-top: 0;
			margin-bottom: 0.5rem;
			font-weight: 500;
			line-height: 1.2;
			color: inherit;
		}

		h1 {
			font-size: calc(1.375rem + 1.5vw);
		}

		h2 {
			font-size: calc(1.325rem + 0.9vw);
		}

		h3 {
			font-size: calc(1.3rem + 0.6vw);
		}

		h4 {
			font-size: calc(1.275rem + 0.3vw);
		}

		h5 {
			font-size: 1.25rem;
		}

		h6 {
			font-size: 1rem;
		}

		p {
			margin-top: 0;
			margin-bottom: 1rem;
		}

		ul,
		ol {
			margin: 1em 0;
			padding: 0 0 0 2em;
		}

		ul {
			list-style-type: disc;
		}

		li p:last-child {
			margin: 0;
		}

		dt {
			font-weight: 700;
		}

		dd {
			margin-bottom: 0.5rem;
			margin-left: 0;
		}

		blockquote {
			margin: 0 0 1rem;
		}

		b,
		strong {
			font-weight: bolder;
		}

		small,
		.small {
			font-size: 0.875em;
		}

		pre,
		code,
		kbd,
		samp {
			font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
				"Courier New", monospace;
			font-size: 1em;
		}

		pre {
			display: block;
			margin-top: 0;
			margin-bottom: 1rem;
			overflow: auto;
			font-size: 0.875em;
		}

		pre code {
			font-size: inherit;
			color: inherit;
		}

		code {
			font-size: 0.875em;
			color: var(--link-text-color);
			word-wrap: break-word;
		}

		a > code {
			color: inherit;
		}

		kbd {
			padding: 0.1875rem 0.375rem;
			font-size: 0.875em;
			color: var(--primary-text-color);
			background-color: var(--popup-background-color);
			border-radius: 0.25rem;
		}

		kbd kbd {
			padding: 0;
			font-size: 1em;
		}
	}

	/**
   * Error In ai response
   */

	.error-box {
		border: 1px solid var(--error-text-color);
		color: var(--error-text-color);
		font-weight: 700;
		padding: 8px;
		white-space: pre-wrap;
		word-break: break-word;
		border-radius: 10px;
	}

	/**
   * PROMPT AREA For CHATGPT
   */

	.inputBox {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 80px;
		padding: 8px;
		display: flex;
		background-color: var(--popup-background-color);
		box-shadow: 0px -2px 4px var(--box-shadow-color);
		z-index: 1;
	}

	.chatTextarea {
		flex: 1;
		height: 100%;
		resize: none;
		border: none;
		outline: none;
		background: none;
		font: initial;
		font-size: 1.1rem;
		color: var(--primary-text-color);
		padding-inline-end: 8px;
	}

	.sendBtn {
		height: 40px;
		width: 40px;
		border-radius: 8px;
		border: none;
		outline: none;
		background-color: rgba(0, 0, 0, 0.2);
		color: gray;
		display: grid;
		place-items: center;

		&:active {
			background-color: var(--button-background-color);
			color: var(--primary-text-color);
		}
	}
	.stopGenerationBtn {
		height: 40px;
		width: 40px;
		border-radius: 8px;
		border: none;
		outline: none;
		background-color: var(--button-background-color);
		color: var(--primary-text-color);
		display: grid;
		place-items: center;

		&:active {
			background-color: rgba(0, 0, 0, 0.2);
		}
	}
	.hide {
		display: none;
	}
}
