.formWrapper { padding: 0px 0px 12px 0px; position: sticky; z-index: 11; bottom: 0px; }
.formWrapper {
	.grad {
		position: absolute; left: 0px; top: -44px; width: 100%; height: 88px; pointer-events: none; z-index: 1;
		background: linear-gradient(180deg, rgba(242, 242, 242, 0.00) 3.62%, var(--color-bg-primary) 68.18%);
	}
	.bg { position: absolute; left: 0px; top: 44px; width: 100%; height: calc(100% - 44px); background: var(--color-bg-primary); z-index: 0; }

	> .inner { display: flex; gap: 0px 8px; align-items: flex-end; margin: 0px auto; position: relative; z-index: 2; width: 100%; max-width: 960px; }
	> .inner {
		> .icon { width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%; background-size: 20px; background-color: var(--color-shape-tertiary); }
		> .icon:hover, .icon.hover { background-color: var(--color-shape-secondary); }
		> .icon.plus { background-image: url('~img/icon/chat/buttons/plus.svg'); }
		> .icon.emoji { background-image: url('~img/icon/chat/buttons/emoji.svg'); }

		> .form { width: 100%; }
	}

	.readonly {
		display: flex; justify-content: center; align-items: center; gap: 0px 8px; height: 32px; border-radius: 15px; @include text-small;
		border: 1px solid var(--color-shape-primary); background: var(--color-shape-tertiary); width: 100%;
	}
	.readonly::before { content: ''; display: block; width: 8px; height: 12px; background: url('~img/icon/lock.svg'); }

	.navigation { 
		position: absolute; right: 0px; bottom: calc(100% + 8px); display: flex; flex-direction: column; align-items: flex-end; 
		justify-content: flex-end; gap: 16px 0px; padding: 0px; z-index: 3;
	}
	.navigation {
		.btn { position: relative; width: 32px; height: 32px; display: none; align-items: center; justify-content: center; }
		.btn {
			&.active { display: flex; }

			.bg {
				position: absolute; z-index: 0; left: 0px; top: 0px; width: 100%; height: 100%;
				border-radius: 50%; background-color: var(--color-shape-tertiary);
			}
			.icon { position: relative; z-index: 1; width: 20px; height: 20px; }
			.icon.arrow { background-image: url('~img/icon/chat/navigation/arrow.svg'); }
			.icon.mention { background-image: url('~img/icon/chat/navigation/mention.svg'); }

			.counter { position: absolute; z-index: 2; height: 20px; left: 0px; top: -14px; width: 100%; text-align: center; }
			.counter {
				.label {
					display: inline-block; @include text-small; line-height: 20px; padding: 0px 4px; height: 20px; min-width: 20px;
					border-radius: 10px; color: var(--color-text-inversion); background: var(--color-control-active); @include text-overflow-nw;
					max-width: 100%;
				}
			}
		}
		.btn.up {
			.icon { transform: rotate(180deg); }
		}
		.btn:hover {
			.bg { transform: scale(0.95); }
		}
	}

	.bottom { width: 100%; height: 12px; background-color: var(--color-bg-primary); }

	.dragOverlay { 
		pointer-events: none; background-color: var(--color-bg-primary); flex-grow: 1; z-index: 10; width: 100%;
		display: flex; flex-direction: column; align-items: center; justify-content: center; display: none; height: 100%;
	}
	.dragOverlay {
		.inner { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px 0px; }
		.icon { width: 58px; height: 58px; background-image: url('~img/icon/chat/dragState.svg'); }
		.label { @include text-header3; font-weight: 700; color: var(--color-text-tertiary); }
	}

	&.isDraggingOver { height: 100%; height: 100%; display: flex; flex-direction: column; }
	&.isDraggingOver {
		.dragOverlay { display: flex; }
	}
}

.form { padding: 0px; border: 0px; background-color: var(--color-shape-tertiary); border-radius: 16px; position: relative; overflow: hidden; }
.form {
	#form-loader { display: none; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 10; }
	#form-loader.active { display: block; }
	#form-loader {
		.dots { display: none; }
	}

	.head { 
		padding: 7px 12px; display: flex; flex-direction: row; gap: 0px 16px; align-items: center; justify-content: space-between;
		background: var(--color-shape-tertiary);
	}
	.head {
		.side.left { flex-grow: 1; display: flex; align-items: center; gap: 0px 8px; overflow: hidden; }
		.side.left {
			> .icon, > .iconObject { flex-shrink: 0; }
			> .iconObject:not(.noBg) { background-color: var(--color-shape-highlight-medium) !important; }
			
			.icon.isMultiple { background-image: url('~img/icon/chat/attachment/multiple.svg'); }
			.textWrapper { width: 100%; @include text-small; display: flex; flex-direction: column; overflow: hidden; }
		}
		.side.right { flex-shrink: 0; }

		.name { @include text-overflow-nw; color: var(--color-text-secondary); font-weight: 500; }
		.descr { @include clamp1; color: var(--color-text-secondary); }
		.descr:empty { display: none; }
		.icon.clear { width: 20px; height: 20px; border-radius: 50%; background: var(--color-control-active) url('~img/icon/chat/buttons/clear.svg'); }
	}

	&.customScrollbar {
		::-webkit-scrollbar { height: 0px; }
	}

	.editableWrap { @include text-common; line-height: 20px; max-height: 352px; overflow-x: hidden; overflow-y: scroll; background-color: transparent; }
	.editableWrap {
		.editable, .placeholder { padding: 6px 32px 6px 12px; }
	}
	.editableWrap.isRtl { text-align: right; }

	.attachments { margin: 6px 0px; padding: 0px 8px; max-height: 360px; overflow: visible; max-width: unset; }
	.attachments {
		.swiper { width: 100%; overflow: visible; }
		.swiper-slide { width: unset; }
		.swiper-button-prev,
		.swiper-button-next { position: absolute; z-index: 2; width: 70px; height: 100%; top: 0px; }
		.swiper-button-prev { left: -8px; background: linear-gradient(-90deg, rgba(255, 255, 255, 0) 0%, var(--color-bg-primary) 100%); }
		.swiper-button-next { right: -8px; background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, var(--color-bg-primary) 100%); }

		.swiper-button-prev::before,
		.swiper-button-next::before,
		.swiper-button-prev::after,
		.swiper-button-next::after { content: ''; position: absolute; left: 50%; top: 50%; }

		.swiper-button-prev::before,
		.swiper-button-next::before {
			z-index: 1; margin: -19px 0px 0px -18px; width: 36px; height: 36px; border-radius: 50%; box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.20);
			border: 1px solid var(--color-shape-secondary); background-color: var(--color-bg-primary);
		}
		.swiper-button-prev::after,
		.swiper-button-next::after { z-index: 2; margin: -10px 0px 0px -9px; width: 20px; height: 20px; background-image: url('~img/arrow/chatFormAttachment.svg'); }
		.swiper-button-prev::after { transform: rotateZ(180deg); margin-left: -10px; }

		.swiper-button-disabled { display: none; }

		.attachment { max-width: 300px; border: 1px solid var(--color-shape-tertiary); background: var(--color-bg-primary); box-shadow: 0px 0px 4px rgba(0,0,0,0.05); }
		.swiper-slide:last-child .attachment { margin-right: 6px; }

		.attachment.isImage {
			.imgWrapper { width: 100%; height: 100%; min-height: unset; min-width: unset; }
			.imgWrapper {
				.blur { display: none; }
				.image { aspect-ratio: 1; border-radius: 8px; width: 100%; height: 100%; }
			}
		}
	}

	.charCounter { display: none; position: absolute; bottom: 10px; right: 48px; @include text-small; line-height: 20px; color: var(--color-text-secondary); }
	.charCounter.red { background: var(--color-red); }
	.charCounter.show { display: block; }

	.icon.send { position: absolute; bottom: 6px; right: 10px; width: 20px; height: 20px; background: url('~img/icon/chat/buttons/send.svg'); }
	.icon.send.isLoading { background: url('~img/icon/chat/buttons/loader.svg'); }
	.icon.send.anim { animation: rotate 1.2s infinite linear; animation-delay: 0.3s; }
}