.liveChat {
	position: relative;

	display: flex;
	flex-direction: column;

	width: 100%;
	height: 100%;

	overflow: hidden;

	transition: all 250ms ease-in-out;

	&.empty {
		justify-content: center;
		align-items: center;

		&.compact {
			height: 5vh !important;
		}
	}

	&.compact {
		height: 15vh;

		justify-content: flex-end;

		.liveChat_timeline {
			position: relative;

			display: flex;
			flex-direction: column;

			padding: 0;
			margin: 0;

			gap: 5px;

			.textRoom_line {
				padding: 0;
				margin: 0;

				h4 {
					font-size: 0.8rem;
				}
			}
		}

		.liveChat_textInput {
			position: relative;

			bottom: 0;
			left: 0;

			margin-bottom: 0;
		}
	}

	&.floating {
		.textRoom_line {
			display: relative;

			background-color: rgba(var(--layoutBackgroundColor), 0.7);
			backdrop-filter: blur(20px);
		}

		.liveChat_timeline {
			display: flex;

			flex-direction: column;
			padding-top: 0;

			overflow-x: hidden;
			overflow-y: hidden;

			//justify-content: flex-end;

			margin-bottom: 0;

			transition: all 250ms ease-in-out;
		}
	}

	.liveChat_timeline {
		position: relative;

		display: flex;
		flex-direction: column;

		gap: 10px;

		height: 100%;
		overflow-y: scroll;

		margin-bottom: 70px;
	}

	.liveChat_textInput {
		position: absolute;
		bottom: 0;
		left: 0;

		margin-bottom: 20px;

		width: 100%;
		height: fit-content;

		color: var(--text-color);

		.ant-input-textarea-show-count::after {
			color: var(--text-color);
		}
	}
}

.textRoom_line {
	display: flex;
	flex-direction: column;

	padding: 5px 7px;
	border-radius: 12px;

	background-color: rgba(var(--bg_color_1), 0.7);

	h1,
	h2,
	h3,
	h4,
	span {
		margin: 0;
		user-select: text;
	}

	.textRoom_line_user {
		font-weight: bold;
		font-size: 0.9rem;

		color: var(--text-color);
		overflow: hidden;

		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.textRoom_line_content {
		font-size: 0.8rem;
		color: var(--text-color);

		padding: 0 10px;

		word-break: break-all;
		white-space: pre-wrap;
	}
}
