[data-component='ChatWidget'] {
	position: absolute;
	bottom: 0;
	display: flex;
	flex-direction: column;
	margin: 0 10px 10px 0;
	max-width: 300px;
	right: 0;
	width: 90vw;
	z-index: 9999;
	
	> .launcher {
		align-self: flex-end;
		margin-top: 10px;
		background-position: center;
		background-size: 70%;
		background-repeat: no-repeat;
		background-color: rgba(#fff, 0.3);
		background-image: url('/resources/images/chat-icon.svg');
		cursor: pointer;
		transition-property: opacity, background-color;
		transition-duration: 0.15s;
		border-radius: 100%;
		height: 45px;
		width: 45px;

		&.focus {
			outline: none;
		}

		&.on {
			background-color: rgba(#fff, 0.7);
		}

		&.disabled {
			pointer-events: none;
			opacity: 0.5;
		}
	}
}

[data-component='Conversation'] {
	border-radius: 5px;
	box-shadow: 0px 2px 10px 1px #000;
}

[data-component='Chat'] {
	height: 100%;
}

[data-component='MessageList'] {
	background-color: rgba(#fff, 0.9);
	height: 91vmin;
	overflow-y: scroll;
	padding-top: 5px;
	border-radius: 5px 5px 0px 0px;

	> .message {
		margin: 5px;
		display: flex;
		word-wrap: break-word;
		color: rgba(#000, 1.0)

		> .client {
			background-color: rgba(#fff, 0.9);
			border-radius: 5px;
			padding: 6px;
			max-width: 215px;
			text-align: left;
			margin-left: auto;

			> .message-text {
				font-size: 1.3vmin;
				color: rgba(#000, 1.0);
			}

			> .message-time {
				font-size: 1vmin;
				color: rgba(#777, 1.0)
			}
		}

		> .response {
			background-color: rgba(#fff, 0.9);
			border-radius: 5px;
			padding: 6px;
			max-width: 215px;
			text-align: left;
			font-size: 1.3vmin;

			> .message-text {
				font-size: 1.3vmin;
				color: rgba(#000, 1.0);
			}

			> .message-time {
				font-size: 1vmin;
				color: rgba(#777, 1.0);
			}
		}
	}
}

[data-component='Sender'] {
	align-items: center;
	display: flex;
	background-color: rgba(#fff, 0.9);
	height: 6vmin;
	padding: 0.5vmin;
	border-radius: 0 0 5px 5px;
	
	> .new-message {
		width: 100%;
		border: 0;
		border-radius: 5px;
		background-color: rgba(#fff, 0.9);
		color: #000;
		height: 30px;
		padding-left: 10px;
		font-size: 1.4vmin;

		&.focus {
			outline: none;
		}
	}
}