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

[data-component='MessageList'] {
	overflow-y: scroll;
	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;
				}
			}
		}
	}
}

[data-component='Sender'] {
	display: flex;
	background-color: #fff;
	padding: 1rem;
	flex-shrink: 0;
	border-radius: 5px;
	margin-top: 0.5rem;
	height: 3rem;
	box-shadow: 0vmin 0.3vmin 1vmin 0.2vmin rgba(17,17,17,0.5);

	> .new-message {
		width: 100%;
		border: 0;
		color: #000;
		font-size: 1rem;

		&.focus {
			outline: none;
		}
	}
}