[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: 100;

	> .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;
		position: relative;

		&.focus {
			outline: none;
		}

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

		&.disabled {
			pointer-events: none;
			opacity: 0.5;
		}
		> .badge{
			border-radius: 50%;
			padding: 0.7vmin;
			top: -1vmin;
			font-size: 1.5vmin;
			left: -1vmin;
			background: rgba(255,0,0,0.9);
			color: #fff;
			font-weight: bold;
			position: absolute;
		}
	}
}

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

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

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

	> .message {
		margin: 5px;
		display: flex;
		word-wrap: break-word;

		> .client {
			margin-left: auto;
		}

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

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

			> .message-content {
				padding-left: 6px;

				> .message-text {
					font-size: 1.3vmin;
				}

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

[data-component='Sender'] {
	align-items: center;
	display: flex;
	background-color: rgba(#000, 0.1);
	height: 6vmin;
	padding: 0.5vmin;
	border-radius: 0 0 5px 5px;

	> .new-message {
		width: 100%;
		border: 0;
		border-radius: 5px;
		background-color: rgba(#000, 0.1);
		color: #fff;
		height: 30px;
		padding-left: 10px;
		font-size: 1.4vmin;

		&.focus {
			outline: none;
		}
	}
}