[data-component='Chat'] {
	height: 100%;
	display: flex;
	flex-grow: 1;
	flex-direction: column;
}

[data-component='MessageList'] {
	overflow-y: auto;
	flex-grow: 1;

	> .message {
		display: flex;
		word-wrap: break-word;
		word-break: break-all;
		
		&:not(:first-child) {
			margin-top: 0.5rem;
		}

		> .client {
			margin-left: auto;
		}

		> .client, > .response {
			background-color: rgba(#000, 0.1);
			border-radius: 5px;
			max-width: 85%;
			display: flex;
			align-items: center;
			padding: 0.5rem;

			> .message-avatar {
				height: 2rem;
				border-radius: 50%;
			}

			> .message-content {
				padding-left: 0.5rem;

				> .message-text {
					font-size: 1rem;
				}

				> .message-time {
					font-size: 0.8rem;
					opacity: 0.8;
				}
			}
		}
	}

	> .empty {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding-top: 20vmin;

		> p {
			padding: 6px 12px;
			border-radius: 6px;
			user-select: none;
			pointer-events: none;
			font-size: 20px;
			color: #000;
		}
	}
}

[data-component='Sender'] {
	display: flex;
	background-color: #fff;
	color: #000;
	flex-shrink: 0;
	margin-top: 0.5rem;
	height: 3rem;

	> .new-message {
		width: 80%;
		box-shadow: 0vmin 0vmin 1vmin 0vmin rgba(17,17,17,0.5);
		border: 0;
		font-size: 1rem;
		margin-right: 1vmin;
		border-radius: 0.5vmin;
		padding-left: 1vmin;
		color: #000;

		&.focus {
			outline: none;
		}
	}

	> .send {
		width: 20%;
		box-shadow: 0vmin 0vmin 1vmin 0vmin rgba(17,17,17,0.5);
		border: 0;
		background-color: #aef;
		color: #000;
		font-size: 1rem;
		border-radius: 0.5vmin;
	}
}