/* # # # © | 2021-2026 | Kalmyk Portal, Translate, AI, TTS & STT | https://halmg.ru */
/* # # # CSS -> Page -> AI */





/* # # CONTENT */
#content {
	position: fixed;
	top: var(--global_52px);
	scrollbar-width: none;
}





#ai_message_block {
	width: var(--width_1190px);
	height: var(--height_330px);
	overflow-y: hidden;
	scrollbar-width: none;
}





#ai_message_block_inner {
	position: absolute;
	width: inherit;
	height: inherit;
	padding: 1px;
	overflow-y: scroll;
	scrollbar-width: none;
}





.ai_message_block_list {
	position: relative;
	width: auto;
	max-width: 92%;
	height: auto;
	padding: var(--global_18px);
	margin-bottom: var(--global_20px);
	clear: both;
	border-radius: var(--global_8px);
	box-shadow: var(--box-shadow_list);
	font-size: var(--global_18px);
	line-height: var(--global_28px);
	white-space: pre-wrap;
	word-wrap: break-word;
}
	.ai_message_block_list_user {
		float: right;
		background:
			rgba(
				var(--card_rgb),





				0.35
			)
		;
	}
		.ai_message_block_list_user p {
			opacity: 0.8;
			font-style: italic;
		}
	.ai_message_block_list_system {
		float: left;
		background:
			rgba(
				var(--phrase_rgb),





				0.5
			)
		;
	}





#ai_input_block {
	position: fixed;
	bottom: var(--global_48px);
	height: var(--height_330px);
	background:
		rgba(
			var(--white_rgb),





			0.85
		)
	;
	border-radius: var(--global_8px);
	box-shadow: var(--box-shadow);
}





#ai_input_keyboard_btn,
#ai_input_keyboard_cancel_btn {
	bottom: var(--global_6px);
	right: var(--global_6px);
	line-height: var(--global_57px);
}





#ai_input_keyboard_block {
	display: none;
	position: absolute;
	bottom: 0;
	width: inherit;
	height: var(--global_55px);
	background: var(--white);
	border-top:
		var(--global_1px)





		solid





		var(--grey)
	;
	border-bottom-left-radius: var(--global_8px);
	border-bottom-right-radius: var(--global_8px);
	cursor: default;
	z-index: 10;
}
.ai_input_keyboard_letter_btn {
	display: inline-block;
	bottom: var(--global_6px);
	color: var(--link);
	font: var(--letter_font);
	text-decoration: none;
	user-select: none;
}
#ai_input_keyboard_letter_btn_0 {
	left: var(--global_6px);
	animation-duration: 0.25s;
}
#ai_input_keyboard_letter_btn_1 {
	left: var(--global_54px);
	animation-duration: 0.45s;
}
#ai_input_keyboard_letter_btn_2 {
	left: var(--global_102px);
	animation-duration: 0.75s;
}
#ai_input_keyboard_letter_btn_3 {
	left: var(--global_150px);
	animation-duration: 0.35s;
}
#ai_input_keyboard_letter_btn_4 {
	left: var(--global_198px);
	animation-duration: 0.55s;
}
#ai_input_keyboard_letter_btn_5 {
	left: var(--global_246px);
	animation-duration: 1.25s;
}





#ai_input_clear_btn {
	display: none;
	top: var(--global_6px);
	right: var(--global_6px);
	line-height: var(--global_55px);
}





#ai_input_enter_btn {
	display: none;
	bottom: var(--global_6px);
	right: var(--global_54px);
	line-height: var(--global_65px);
}





#ai_input_textarea {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: inherit;
	height:
		calc(
			var(--height_330px) - var(--global_55px)
		)
	;
	background: transparent;
	border:
		var(--global_18px)





		solid





		transparent
	;
	border-top-width: var(--global_17px);
	border-bottom-width: var(--global_53px);
	border-right-width: var(--global_54px);
	outline:
		0





		!important
	;
	border-bottom-left-radius: var(--global_8px);
	border-bottom-right-radius: var(--global_8px);
	overflow: hidden;
	resize: none;
	font-size: var(--global_18px);
	line-height: var(--global_28px);
	white-space: pre-wrap;
	word-wrap: break-word;
	appearance: none;
}
	#ai_input_textarea:focus {
		outline:
			0





			!important
		;
	}





#ai_tooltip_block {
	position: fixed;
	bottom: var(--global_11px);
	left: 0;
	width: 100%;
	height: var(--global_26px);
	letter-spacing: -0.8px;
	opacity: 0.7;
	cursor: default;
	user-select: none;
}
	#ai_tooltip_block p {
		font: var(--small_font_span);
		font-style: italic;
		text-align: center;
	}
		#ai_tooltip_block p span:nth-child(1) {
			animation-duration: 0.3s;
		}
		#ai_tooltip_block p span:nth-child(2) {
			animation-duration: 0.65s;
		}
		#ai_tooltip_block p span:nth-child(3) {
			animation-duration: 1.15s;
		}
		#ai_tooltip_block p span:nth-child(4) {
			animation-duration: 1.65s;
		}
		#ai_tooltip_block p span:nth-child(5) {
			animation-duration: 2.05s;
		}
		#ai_tooltip_block p span:nth-child(6) {
			animation-duration: 3.1s;
		}
		#ai_tooltip_block p span:nth-child(7) {
			animation-duration: 3.4s;
		}
		#ai_tooltip_block p span:nth-child(8) {
			animation-duration: 3.7s;
		}





/* # # ANIMATIONS */
.ai_input_keyboard_letter_btn {
	/* animation-name: Text_Animation; */
	/* animation-fill-mode: forwards; */
}





/* # # MEDIA */
@media (max-width: 1221px) {





	.column_top,
	.column_bottom {
		margin-left: auto;
		margin-right: auto;
	}





	#content {
		max-width:
			calc(
				100% - var(--global_20px)
			)
		;
	}





	#ai_message_block {
		max-width:
			calc(
				100% - var(--global_10px)
			)
		;
		margin-left: var(--global_5px);
	}





	#ai_message_block_inner {
		width: 99%;
	}





	#ai_input_block {
		width:
			calc(
				100% - var(--global_30px)
			)
		;
		margin-left: var(--global_5px);
	}





	#decoration_wrap.element_with_fade::before {
		display:
			none





			!important
		;
	}
}





@media (max-width: 1070px) {





	#ai_tooltip_block {
		display: none;
	}
}





@media (max-width: 682px) {





	#ai_message_block_inner {
		width: 98%;
	}
}