.chat-input {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	flex-direction: column;
	position: relative;

	* {
		box-sizing: border-box;
	}
}

.chat-inputs {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: flex-end;

	textarea {
		font-family: inherit;
		font-size: var(--chat--input--font-size);
		width: 100%;
		border: var(--chat--input--border, 0);
		border-radius: var(--chat--input--border-radius);
		padding: var(--chat--input--padding);
		min-height: var(--chat--textarea--height, 2.5em);
		max-height: var(--chat--textarea--max-height);
		height: var(--chat--textarea--height, 2.5em);
		resize: none;
		overflow-y: auto;
		background: var(--chat--input--background, white);
		color: var(--chat--input--text-color, initial);
		outline: none;
		line-height: var(--chat--input--line-height, 1.5);

		&::placeholder {
			font-size: var(
				--chat--input--placeholder--font-size,
				var(--chat--input--font-size)
			);
		}

		&:focus,
		&:hover {
			border-color: var(--chat--input--border-active, 0);
		}
	}
}

.chat-inputs-controls {
	display: flex;
}

.chat-input-send-button,
.chat-input-file-button {
	height: var(--chat--textarea--height);
	width: var(--chat--textarea--height);
	padding: initial;
	box-shadow: none;
	background: var(--chat--input--send--button--background, white);
	cursor: pointer;
	color: var(
		--chat--input--send--button--color,
		var(--chat--color--secondary)
	);
	border: 0;
	font-size: 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: color var(--chat--transition-duration) ease;

	svg {
		min-width: fit-content;
	}

	&[disabled] {
		cursor: not-allowed;
		color: var(--chat--color-disabled);
	}

	.chat-input-send-button {
		&:hover,
		&:focus {
			background: var(
				--chat--input--send--button--background-hover,
				var(--chat--input--send--button--background)
			);
			color: var(--chat--input--send--button--color-hover);
		}
	}
}

.chat-input-file-button {
	background: var(--chat--input--file--button--background, white);
	color: var(--chat--input--file--button--color);

	&:hover {
		background: var(--chat--input--file--button--background-hover);
		color: var(--chat--input--file--button--color-hover);
	}
}

.chat-files {
	display: flex;
	overflow-x: hidden;
	overflow-y: auto;
	width: 100%;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 0.5em;
	padding: var(--chat--files-spacing);
}

.chat-input-left-panel {
	width: var(--chat--input--left--panel--width);
	margin-left: 0.4em;
}

.chat-input-compliance-notice {
	width: 100%;
	margin: 0.5em 0 0.25em;
	padding: 0 0.75em;
	font-size: 0.7em;
	line-height: 1.4;
	color: var(--chat--color-typing);
	opacity: 0.5;
	text-align: center;
	white-space: pre-line;
}