@import "lesshat.less";

@header-min-height: 30px;
@footer-min-height: 55px;
@link-font-color: #008ce3;
@primary-font-color: #444444;
@secondary-font-color: #7f7f7f;
@info-font-color: #aaaaaa;

.flex-list {
	.active {
		background-color: rgba(255, 255, 255, 0.075);
	}
}

.trigger-option,
.trigger-value {
	float: left;
	display: inline-block;
}

.trigger-option {
	width: 30%;
	max-width: 300px;
	padding-right: 4px;
}

.trigger-value {
	width: 70%;

	input {
		display: inline-block !important;
		width: auto !important;
	}
}

.livechat-code {
	width: 90%;
	max-width: 750px;
	text-align: right;

	textarea {
		text-align: left;
		width: 100%;
		height: 200px;
		background-color: #efefef;
		font-family: courier;
		font-size: 12px;
		display: block;
	}
}

.preview-mode {
	width: auto;
	margin-bottom: 1em;
}

.livechat-settings-div,
.livechat-preview-div {
	width: 50%;
	float: left;
	height: 95%;
	margin-bottom: 0 !important;
	padding: 1em;
}

.livechat-settings-div {
	border-right: 1px solid #cccccc;
}

.livechat-preview {
	width: 340px;
	height: 350px;
	margin: 0 auto;
	border-bottom: 1px solid #cccccc;
	position: relative;

	.preview-wrapper {
		position: absolute;
		width: 100%;
		padding: 0 20px;
		height: 300px;
		bottom: 0;
		font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif, "Meiryo UI";
		font-size: 0.8rem;
		color: @primary-font-color;
		-webkit-font-smoothing: antialiased;
		line-height: 1rem;

		input,
		button,
		select,
		textarea {
			font-family: inherit;
			font-size: inherit;
			line-height: inherit;
			padding: 5px;
			margin: 5px 0;
			border: 1px solid #e7e7e7;
			border-radius: 5px;
			outline: none;
		}

		input {
			height: 28px;
		}

		input:focus {
			outline: none;
			box-shadow: 0 0 0;
		}

		.button {
			&:extend(.unselectable);
			display: inline-block;
			padding: 9px 12px;
			font-weight: 500;
			font-size: 13px;
			margin: 4px;
			text-transform: uppercase;
			word-spacing: 0;
			box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.125);
			border: none;
			border-radius: 0;
			line-height: 16px;
			position: relative;
			cursor: pointer;
			color: rgba(255, 255, 255, 0.85);

			span {
				position: relative;
				z-index: 2;
			}

			&::before {
				background-color: rgba(0, 0, 0, 0.1);
				content: " ";
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				opacity: 0;
				z-index: 1;
				transition: opacity 0.1s ease-out;
			}

			&:hover {
				text-decoration: none;
				color: #ffffff;

				&::before {
					opacity: 1;
				}
			}

			&.clean {
				font-size: 14px;
				box-shadow: 0 0 3px rgba(0, 0, 0, 0.08);

				&.primary {
					font-weight: 600;
				}
			}

			&.button-block {
				display: block;
				width: 100%;
			}
		}

		.livechat-room {
			display: flex;
			flex-direction: column;
			height: 100%;

			.title {
				flex: 1 0 @header-min-height;
				line-height: @header-min-height;
				border-top-right-radius: 5px;
				border-top-left-radius: 5px;
				color: #ffffff;
				z-index: 10;
				cursor: pointer;

				h1 {
					margin: 0;
					padding: 0 5px;
					font-size: 9pt;
					display: inline-block;
					text-transform: none;
				}

				.toolbar {
					display: inline-block;
					float: right;
					padding-right: 5px;
				}
			}

			.messages {
				flex: 1 1 100%;
				background-color: #ffffff;
				border-left: 1px solid #e7e7e7;
				border-right: 1px solid #e7e7e7;
				overflow-y: auto;

				.wrapper {
					padding-bottom: 6px;

					ul {
						list-style-type: none;
						padding: 0;

						li {
							padding: 0;
						}
					}

					.message {
						font-size: 12px;
						padding-left: 40px;
						position: relative;
						line-height: 18px;
						margin: 12px 10px 0;
						min-height: 36px;

						&:nth-child(1) {
							margin-top: 0;
						}

						&.new-day {
							margin-top: 60px;

							&::before {
								content: attr(data-date);
								display: block;
								position: absolute;
								top: -30px;
								left: 0;
								font-size: 10px;
								font-weight: 600;
								text-align: center;
								.calc(left, ~'50% - 70px');
								color: @secondary-font-color;
								z-index: 10;
								padding: 0 10px;
								background-color: #ffffff;
								min-width: 120px;
							}

							&::after {
								content: " ";
								display: block;
								position: absolute;
								top: -20px;
								left: 0;
								width: 100%;
								border-top: 1px solid #dddddd;
							}
						}

						.edit-message {
							display: none;
							cursor: pointer;
						}

						&.own:hover:not(.system) .edit-message {
							display: inline-block;
						}

						.delete-message {
							display: none;
							cursor: pointer;
						}

						&.own:hover:not(.system) .delete-message {
							display: inline-block;
						}

						.user {
							display: inline-block;
							font-weight: 600;
							color: #444444;
							margin-right: 5px;
							outline: none;

							&:hover {
								color: #333333;
							}
						}

						.thumb {
							position: absolute;
							left: 0;
							top: 0;
							display: block;
							width: 30px;
							height: 30px;
						}

						.info {
							font-size: 10px;
							color: @info-font-color;
						}

						&.sequential {
							padding-top: 5px;
							margin-top: 0;
							margin-bottom: 0;
							min-height: 20px;

							.user {
								display: none;
							}

							.thumb {
								display: none;
							}

							.info {
								position: absolute;
								text-align: right;
								left: -20px;
								width: 55px;

								.time {
									display: none;
								}

								.edited {
									display: inline-block;
								}

								.edit-message {
									float: left;
									margin-left: 1px;
								}

								.delete-message {
									float: left;
								}
							}

							&:hover {
								.time {
									display: inline-block;
								}

								.edited {
									display: none;
								}
							}
						}

						&.system {
							.body {
								color: @info-font-color;
								font-style: italic;
								text-transform: lowercase;

								em {
									font-weight: 600;
								}
							}
						}

						.avatar-initials {
							line-height: 40px;
						}

						a {
							color: @link-font-color;
							font-weight: 400;

							&:hover {
								color: darken(@link-font-color, 10%);
								text-decoration: underline;
							}
						}

						.body {
							opacity: 1;
							transition: opacity 1s linear;
						}

						&.temp .body {
							opacity: 0.5;
						}

						&.msg-error .body {
							text-decoration: line-through;
						}

						.avatar .avatar-image {
							height: 100%;
							width: 100%;
							min-height: 20px;
							min-width: 20px;
							display: block;
							position: relative;
							background-color: transparent;
							background-size: cover;
							background-repeat: no-repeat;
							background-position: center;
							border-radius: 4px;
						}
					}
				}

				.new-message {
					margin: 0 -65px;
					position: absolute;
					background: #428bca;
					border-radius: 20px;
					width: 130px;
					height: 30px;
					text-align: center;
					color: #ffffff;
					line-height: 30px;
					font-size: 0.8em;
					cursor: pointer;
					bottom: 8px;
					left: 50%;
					z-index: 5;
					transition: transform 0.3s ease-out;
					.transform(translateY(-40px));

					&.not {
						.transform(translateY(100%));
					}
				}

				.error {
					bottom: 40px;
					position: fixed;
					width: 100%;
					background-color: #f7d799;
					padding: 5px;
					z-index: 8;
					transition: transform 0.2s ease-out;
					.transform(translateY(100%));

					&.show {
						.transform(translateY(0));
					}
				}
			}

			.footer {
				flex: 1 0 @footer-min-height;
				z-index: 10;
				background-color: #fcfcfc;
				border-top: 1px solid #e7e7e7;
				border-left: 1px solid #e7e7e7;
				border-right: 1px solid #e7e7e7;

				.input-wrapper {
					padding: 6px 6px 0;
					padding-right: 30px;

					textarea {
						display: block;
						padding: 6px 8px;
						padding-right: 38px;
						overflow-y: auto;
						resize: none;
						border: 1px solid #e7e7e7;
						border-radius: 5px;
						max-height: 200px;
						width: 100%;
						font-size: 12px;
						-webkit-appearance: none;
						height: 28px;
						line-height: normal;
						background-color: #ffffff;
						position: relative;
						outline: none;
					}
				}

				.send-button {
					float: right;
					position: relative;
					right: 7px;
					top: -28px;
					color: @secondary-font-color;
					cursor: pointer;
					transition: color 0.15s ease-out;

					&:hover {
						color: @primary-font-color;
					}
				}
			}

			.offline {
				flex: 1 1 100%;
				background-color: white;
				padding: 1em 10px;
				border-left: 1px solid #e7e7e7;
				border-right: 1px solid #e7e7e7;

				.offline-message {
					padding: 1em 0;
				}

				.message-sent {
					text-align: center;
				}

				form {
					input,
					textarea {
						display: block;
						width: 100%;
					}

					textarea {
						height: 3.5em;
					}

					.buttons {
						text-align: center;
					}

					.error {
						display: none;
						background-color: #f7d799;
						padding: 5px;

						&.show {
							display: block;
						}
					}
				}
			}
		}
	}

	&.closed,
	&.closed-offline {
		.preview-wrapper {
			height: 32px;

			.livechat-room .title .toolbar {
				display: none;
			}

			.messages {
				display: none;
			}

			.footer {
				display: none;
			}

			.offline {
				display: none;
			}
		}
	}
}

.department-agents {
	list-style-type: none;

	li {
		display: inline-block;
		background-color: #dddddd;
		border-radius: 10px;
		padding: 2px 8px 2px 2px;
		margin: 1px 0;
		cursor: pointer;

		.icon-plus-circled {
			opacity: 0.5;
			font-size: 0.8rem;
		}
	}
}

.agent-info {
	input[type='text'] {
		width: auto;
		line-height: 24px;
		height: 24px;
	}
}

.visitor-custom-fields {
	padding: 0 20px;
}

.visitor-navigation,
.visitor-custom-fields {
	.visitor-scroll {
		height: 130px;
		overflow-y: auto;
		border: 1px solid #e7e7e7;
		border-radius: 4px;
		padding: 4px;
		margin-top: 4px;
		margin-bottom: 20px;

		ul {
			li {
				white-space: nowrap;

				a {
					text-overflow: ellipsis;
					display: block;
					overflow: hidden;
					color: @secondary-font-color;
					text-decoration: underline;

					&:hover {
						text-decoration: none;
					}
				}
			}
		}
	}
}

.livechat-section {
	opacity: 0.5;
	transition: opacity 0.4s ease;

	&.available {
		opacity: 1;
	}
}

.livechat-status {
	float: right;
	margin-right: 10px;
	font-size: 20px;
}

.external-message {
	padding: 10px;
	position: relative;

	&::after {
		content: " ";
		position: absolute;
		border-bottom: 1px solid #cccccc;
		left: 10px;
		right: 10px;
		bottom: 0;
	}
}

.user-view {
	li {
		color: @secondary-font-color;
		line-height: 18px;
		font-size: 12px;
		font-weight: 300;
	}

	nav.centered-buttons {
		text-align: center;
		margin-bottom: 1em;

		button {
			display: inline-block;
			width: auto;
		}
	}
}

.rooms-list {
	.inquiries {
		.opt {
			display: none;
		}
	}
}

.visitor-edit {
	padding: 20px;

	h3 {
		font-size: 24px;
		margin-bottom: 8px;
		line-height: 22px;
	}
}

.queue-department {
	.show-offline {
		vertical-align: middle;
	}
}
