.kitan-bot-widget .msg-form {
	padding: 16px;

	display: flex;
	gap: 16px;
	flex-direction: row;
	align-items: stretch;
	justify-content: space-between;

	border-top: 1px solid $neutral-500-25;
	border-bottom: 1px solid $neutral-500-25;
	background: $secondary-1-25;

	@include media-down(xs) {
		padding: 8px;

	}

	.msg-input {
    position: relative;
    display: flex;
    justify-content: center;
    max-height: 200px;
    width: 100%;
    overflow: hidden;
    align-items: center;
    flex-direction: column;

		.msg-area {
			resize: none;
			width: 100%;
			min-height: 20px;
			height: 20px;
			max-height: 128px;
			box-sizing: border-box;

			padding: 0px 4px;
			font-family: inherit;
						
			font-size: $font-size-body-xs;
			line-height: 1.57;
			font-style: normal;
			font-weight: 400;
			color: $neutral-800;

			border: 0;
			border-radius: 0;
			overflow: hidden;
			outline: none;

			// Трюк: разворачиваем textarea вверх
			display: block;
			align-self: flex-end;

			background: transparent;

			&:focus, &:focus-visible {
				border: 0;
				outline: none;
			}

			&:placeholder {
				color: $neutral-700;
			}
		}
	}

	.msg-send-btn-wrap {
		display: flex;
    flex-direction: column;
    justify-content: flex-end;
	}

	.msg-send {
		border-radius: 100px;
		background: $neutral-600;
		display: flex;
		width: 40px;
		height: 40px;
		justify-content: center;
		align-items: center;
		gap: 8px;
		border: 0;
	}

	&.focused {
		border-color: $primary-1;

	}

	&.ready-to-send {
		.msg-send {
			background: $primary-1;
			transition: background .2s;

			&:hover {
				background: $primary-1-dark;
			}
		}
	}
}