$jsm-blue: #007aff;
$jsm-light-gray: #959595;
$jsm-dark-gray: #8b858c;
$jsm-very-light-gray: #cecece;

$message-bubble-padding: 0.6em 1em;

/**
	Clearfix mixin
*/
@mixin clearfix {
	&:before, &:after {
		content: "";
		display: table;
	}
	&:after {
		clear: both;
	}
}

/**
	Hidden element class
*/
.jsm-hide {
	display: none;
}
.jsm-invisible {
	visibility: hidden;
}

/**
	Helper to force redraw of the main element
*/

.jsm-force-redraw::before {
	content: ""
}

/**
	Wrapper for all phone screen content
*/
.jsm-iphone-content-wrapper {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	max-height: 100%;
}
.jsm-iphone-content {
	text-align: left;
	font-family: 'San Francisco', 'Helvetica Neue', Helvetica, sans-serif;
	display: table;
	table-layout: fixed;
	background: #fff;
	color: #030303;
	width: 100%;
	height: 100%;
}

/**
	Annotations
*/

.jsm-annotation-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	//background: rgba(255,255,255,0.5);
	z-index: 50;
	font-family: 'San Francisco', 'Helvetica Neue', Helvetica, sans-serif;
	font-size: 120%;

	.jsm-annotation {
		position: absolute;
		max-width: 80%;
		margin: 0 10%;
	}

	/** Default annotation styling */

	.jsm-annotation.jsm-annotation-default {
		background: #FF495C;
		color: #fff;
		border-radius: 0.25em;
		padding: 1em;
		text-align: left;
		line-height: 1.5em;
		animation: pop-in 200ms;
		animation-fill-mode: forwards;

		&.fade-out {
			animation-direction: reverse;
		}

		&.jsm-annotation-right.jsm-annotation-top:after {
			content: '';
			position: absolute;
			bottom: -19px;
			right: 2em;
			border-width: 0 20px 20px 0;
			border-style: solid;
			border-color: transparent #ff495c;
			display: block;
			width: 0;
		}
		&.jsm-annotation-left.jsm-annotation-top:after {
			content: '';
			position: absolute;
			bottom: -19px;
			left: 2em;
			border-width: 0 0 20px 20px;
			border-style: solid;
			border-color: transparent #ff495c;
			display: block;
			width: 0;
		}

	}
}
@keyframes pop-in {
	0% {
		transform: scale(1);
		opacity: 0;
	}
    50% {
        transform: scale(1.1);
    }
    100% {
    	transform: scale(1);
    	opacity: 1;
    }
}

/**
	Combined status and navigation bar
*/
.jsm-status-navbar {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 9%;
	background: #f9f9f9;
	border-bottom: 1px solid #b2b2b2;
	z-index: 20;

	.jsm-status-bar {
		width: 100%;
		height: 30%;
		text-align: center;

		.jsm-carrier {
			position: absolute;
			top: 0;
			left: 2.1%;

			.jsm-carrier-ring {
				display: inline-block;
				margin-top: -0.15em;
				margin-right: -0.15em;
				width: 0.4em;
				height: 0.4em;
				border: 1px solid #000;
				border-radius: 50%;

				&.closed {
					background: #000;
				}
			}
			.jsm-carrier-name {
				margin-left: 0.1em;
			}
		}
		.jsm-clock {
			font-weight: bold;
		}
		.jsm-battery {
			position: absolute;
			top: 0;
			right: 2.1%;

			.jsm-battery-image {
				display: inline-block;
				height: 0.8em;
				width: auto;
				vertical-align: middle;
			}
		}
	}

	.jsm-nav-title {
		width: 100%;
		text-align: center;
		padding: 0.5% 0;

		.jsm-nav-title-bot-name {
			font-size: 120%;
			margin-bottom: 0.2em;
		}
		.jsm-nav-title-replies-in {
			color: $jsm-light-gray;
		}
	}
	.jsm-nav-left, .jsm-nav-right {
		position: absolute;
		top: 50%;
		color: $jsm-blue;
		font-size: 140%;
		line-height: 1em;

		img {
			width: 0.8em;
			height: auto;
			vertical-align: middle;
			margin: -0.2em 0.2em 0 0;
		}
	}
	.jsm-nav-left {
		left: 2.1%;
	}
	.jsm-nav-right {
		right: 2.1%;
	}
}

.jsm-bottom-bar {
	width: 100%;
	background: #fff;
	z-index: 10;
	margin-top: 0.5em;
	display: table-row;
	height: 0;

	/**
		Contains the quick reply options.
	*/
	.jsm-quick-replies {
		height: 4.25em;
		overflow: hidden;

		.jsm-quick-replies-container {
			white-space: nowrap;
			padding: 0 0.5em;
			display: inline-block;

			.jsm-quick-reply-option {
				padding: 0.6em 1em;
				border-radius: 1.5em;
				border: 1px solid $jsm-blue;
				background: #fff;
				font-size: 130%;
				display: inline-block;
				margin-right: 0.5em;
				color: $jsm-blue;
				transition: transform 0.25s ease-in-out;
				transform: translateY(3.5em);

				&.jsm-show {
					transform: translateY(0);
				}

				&.jsm-selected {
					background: $jsm-blue;
					color: #fff;
				}
			}
		}
	}

	.jsm-get-started {

		border-top: 1px solid $jsm-very-light-gray;
		text-align: center;

		.jsm-get-started-info {
			color: $jsm-very-light-gray;
			font-size: 120%;
			margin: 0.5em;
		}
		.jsm-get-started-button {
			background: $jsm-blue;
			font-size: 150%;
			color: #fff;
			margin: 0.5em;
			border-radius: 0.25em;
			padding: 0.5em;

		}

	}

	.jsm-input-message {
		border-top: 1px solid $jsm-very-light-gray;
		font-size: 150%;
		line-height: 2.5em;
		color: $jsm-light-gray;
		position: relative;
		background: #fafafa;

		.jsm-input-message-handle {
			margin: 0.25em auto;
			height: 0.25em;
			width: 10%;
			border-radius: 3px;
			background-color: $jsm-very-light-gray;
		}
		.jsm-persistent-menu {
			width: 100%;
			overflow: hidden;

			.jsm-persistent-menu-scroller {
				width: 300%;

				.jsm-persistent-menu-page {
					width: 33.333%;
					float: left;
					position: relative;

					.jsm-input-prompt {
						margin: 0 0 0 1em;
						border-bottom: 1px solid $jsm-very-light-gray;
					}
					.jsm-persistent-menu-title {
						margin: 0;
						border-bottom: 1px solid $jsm-very-light-gray;
						color: #030303;
						position: relative;
						font-weight: bold;
						text-align: center;

						&:after {
							position: absolute;
							top: 0.7em;
							left: 0.5em;
							display: block;
							content: ' ';
							background-image: url('data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2020%2033%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20xml%3Aspace%3D%22preserve%22%20style%3D%22fill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3Bstroke-linecap%3Asquare%3Bstroke-miterlimit%3A1.5%3B%22%3E%3Cg%20transform%3D%22matrix(1%2C0%2C0%2C1%2C-1621.65%2C-1985.09)%22%3E%3Cg%20id%3D%22_-Curve-%22%20transform%3D%22matrix(-0.0914484%2C0%2C-0%2C0.100605%2C1739.21%2C1875.51)%22%3E%3Cpath%20d%3D%22M1114.08%2C1126.53l130.391%2C124.333l-130.065%2C124.633%22%20style%3D%22fill%3Anone%3Bstroke%3A%23007aff%3Bstroke-width%3A43.34px%3B%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E');
							background-size: 1.25em 1.25em;
							height: 1.25em;
							width: 1.25em;
						}
					}
					.jsm-persistent-menu-entry {
						.jsm-persistent-menu-text {
							margin: 0 0 0 1em;
							border-bottom: 1px solid $jsm-very-light-gray;
							color: #030303;
							position: relative;

							&.jsm-has-children:after {
								position: absolute;
								top: 0.7em;
								right: 0.5em;
								display: block;
								content: ' ';
								background-image: url('data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2020%2033%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20xml%3Aspace%3D%22preserve%22%20style%3D%22fill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3Bstroke-linecap%3Asquare%3Bstroke-miterlimit%3A1.5%3B%22%3E%3Cpath%20id%3D%22_-Curve-%22%20d%3D%22M3.756%2C3.756l11.924%2C12.508l-11.894%2C12.539%22%20style%3D%22fill%3Anone%3Bstroke%3A%23cecece%3Bstroke-width%3A4.17px%3B%22%2F%3E%3C%2Fsvg%3E');
								background-size: 1em 1em;
								height: 1em;
								width: 1em;
							}
						}

						&.jsm-selected {
							background: #f0f0f0;
						}

						&:last-child {
							.jsm-persistent-menu-text {
								border-bottom: none;
							}
						}
					}

					&:after {
						position: absolute;
						content: ' ';
						width: 100%;
						height: 500%; /* account for smaller grayed out area */
						top: 0;
						left: 0;
						background-color: transparent;
						transition: all 250ms ease-in-out;
					}

					&.jsm-has-overlay:after {
						background-color: rgba(0, 0, 0, 0.1);
						box-shadow: inset -4px 0px 4px 0px rgba(0, 0, 0, 0.125);

					}
				}
			}
		}

	}
}

.jsm-chat-content-wrapper {
	display: table-row;
	width: 100%;
	height: 100%;
}
.jsm-chat-content-wrapper-2 {
	width: 100%;
	height: 100%;
	position: relative;
}
.jsm-chat-content {
	max-height: 100%;
	width: 100%;
	height: 100%;
	background: #fff;
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	bottom: 0;

	/**
		Indicates the bot's reading progress of the conversation.
	*/
	.jsm-chat-progress-indicator {
		position: absolute;
		top: 22%;
		right: 0.15em;
		width: 1.2em;
		height: 1.2em;
		z-index: 5;

		.jsm-bot-icon img {
			width: 1.2em;
			height: 1.2em;
			border-radius: 50%;
		}
	}

	/**
		Displayed before the Get Started button is pressed.
	*/
	.jsm-bot-welcome-message {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: #fff;

		.jsm-bot-welcome-banner {
			background: no-repeat center center;
			background-size: cover;
			margin-top: 5em;
			height: 12em;
			position: relative;

			.jsm-bot-welcome-icon {
				bottom: 0;
				left: 50%;
				margin-left: calc(-3.5em - 1px);
				margin-bottom: calc(-3.5em - 1px);
				position: absolute;
				width: calc(7em + 2px);
				height: calc(7em + 2px);
				background: #fff;
				border-radius: 50%;

				img {
					margin: 1px;
					width: 7em;
					height: 7em;
					border-radius: 50%;
				}
			}
		}
		h1 {
			margin: 2em 0 0;
			text-align: center;
			font-weight: normal;
			font-size: 180%;
		}
		h2 {
			text-align: center;
			font-weight: normal;
			font-size: 130%;
			margin: 0.15em 0 0.25em;
		}
		& > p {
			text-align: center;
			color: $jsm-light-gray;
			font-size: 130%;
			padding: 0 2em;
			margin: 0 0 2em;
		}
		div.jsm-bot-welcome-status {
			@include clearfix;

			padding: 0 2em;
			margin-bottom: 2em;

			div.jsm-bot-welcome-status-svg-wrapper {
				width: 3em;
				height: 3em;
				overflow: hidden;
				float: left;

				svg {
					width: 2.25em;
					height: 2.25em;
				}
			}
			p {
				margin: 0 0 0 3em;
				font-size: 130%;
				padding-top: 0.15em;
			}
		}
	}

	/**
		iOS won't display scrollbars, so we don't need to work around it.
	*/
	&.ios {
		width: 100%;
		.jsm-bot-welcome-message {
			margin-right: 0;
		}
	}

	/**
		Displayed at the top of a chat, contains information about the chat partner or bot.
	*/
	.jsm-bot-info {
		@include clearfix;

		margin-top: 22%;
		border-bottom: 1px solid #cdcdd1;
		clear: both;
		margin-bottom: 1em;

		img {
			float: left;
			margin: 0 1.5em 1.5em 1.5em;
			width: 6em;
			height: 6em;
			border-radius: 50%;
		}

		.jsm-bot-info-name {
			font-size: 160%;
			margin: 0.15em 0;
		}
		.jsm-bot-info-likes, .jsm-bot-info-category {
			font-size: 120%;
			margin-bottom: 0.25em;
			font-weight: 200;
		}
		.jsm-bot-info-category {
			color: $jsm-light-gray;
		}
	}

	/**
		Wrapper for all subsequent chat items sent by one user
	*/
	.jsm-user-wrapper {
		position: relative;
		margin-top: 0.5em;

		.jsm-user-icon {
			position: absolute;
			left: 0.5em;
			width: 3em;
			height: 3em;

			img.jsm-bot-logo {
				width: 3em;
				height: 3em;
				border-radius: 50%;
			}
			img.jsm-messenger-flash {
				position: absolute;
				width: 1.5em;
				height: 1.5em;
				z-index: 5;
				top: 1.8em;
				left: 1.8em;
			}
		}
	}

	/**
		Wrapper for a chat row
	*/
	.jsm-chat-row {
		@include clearfix;
	}

	/**
		Time stamp
	*/
	.jsm-chat-timestamp {
		margin: 0 0 0.5em;
		color: $jsm-light-gray;
		text-align: center;
	}

	/**
		Standard message bubbles.
	*/
	.jsm-chat-message {
		padding: $message-bubble-padding;
		border-radius: 1.5em;
		margin-bottom: 0.15em;
		font-size: 130%;
		max-width: 75%;
		transition: transform 0.25s ease-in-out, opacity 0.25s ease-in-out;
		transform: translateY(0);
		position: relative;
		z-index: 10;

		&.jsm-left {
			float: left;
			background: #f1f0f0;
			border: 1px solid #f1f0f0;
			margin-left: 3em;

			&.jsm-has-previous {
				border-top-left-radius: 0.25em;
			}
			&.jsm-has-next {
				border-bottom-left-radius: 0.25em;
			}
		}
		&.jsm-right {
			float: right;
			background: $jsm-blue;
			border: 1px solid $jsm-blue;
			color: #fff;
			margin-right: 5%;

			&.jsm-has-previous {
				border-top-right-radius: 0.25em;
			}
			&.jsm-has-next {
				border-bottom-right-radius: 0.25em;
			}

			.jsm-status {
				position: absolute;
				font-size: 76.92%;
				right: -1.5em;
				bottom: 0;
				width: 1.2em;
				height: 1.2em;
				border-radius: 50%;
			}
		}

		&.jsm-quickreply {
			opacity: 0;
			transform: translateY(1em);
		}
	}

	/**
		Image attachments
	*/
	.jsm-chat-message.jsm-image-attachment {
		padding: 0;
		border: none;
		background: #fff;
		position: relative;
		width: 100%;

		.jsm-image {
			border-radius: 1.5em;
			width: 100%;
			height: auto;
			background-repeat: no-repeat;
			background-position: 50% 50%;
			background-size: cover;
			border: 1px solid rgba(255, 255, 255, 0.25); /** FIXME why are left and right borders cut off? */

			&:after {
				padding-top: 52.35%;
				display: block;
				content: '';
			}
		}

		&.jsm-left {
			&.jsm-has-previous {
				.jsm-image {
					border-top-left-radius: 0.25em;
				}
			}
			&.jsm-has-next {
				.jsm-image {
					border-bottom-left-radius: 0.25em;
				}
			}
		}
		&.jsm-right {
			&.jsm-has-previous {
				.jsm-image {
					border-top-right-radius: 0.25em;
				}
			}
			&.jsm-has-next {
				.jsm-image {
					border-bottom-right-radius: 0.25em;
				}
			}
		}

		.jsm-share {
			position: absolute;
			top: 50%;
			margin-top: -0.75em;

			svg {
				width: 1.5em;
				height: 1.5em;
			}
		}
		&.jsm-left {
			.jsm-share {
				right: -2.15em;
			}
		}
		&.jsm-right {
			.jsm-share {
				left: -2.15em;
			}
		}
	}

	/**
		Additional message bubble class for the left user's typing indicator.
	*/
	.jsm-typing-indicator {
		span {
			background: $jsm-dark-gray;
			height: 0.5em;
			width: 0.5em;
			border-radius: 50%;
			display: inline-block;
			margin-right: 0.25em;
			-webkit-animation: jsm-typing-indicator-anim 2s infinite;
			animation: jsm-typing-indicator-anim 2s infinite;
		}
		span:nth-child(1) {
			-webkit-animation-delay: 0s;
			animation-delay: 0s;
		}
		span:nth-child(2) {
			-webkit-animation-delay: 0.15s;
			animation-delay: 0.15s;
		}
		span:nth-child(3) {
			-webkit-animation-delay: 0.3s;
			animation-delay: 0.3s;
			margin-right: 0;
		}
	}

	/**
		Additional message bubble class for button templates and the contained title and buttons.
	*/
	.jsm-button-template {
		margin-bottom: 0.5em;
		padding: 0;
		width: calc(100% - 6em);
		.jsm-header {
			padding: $message-bubble-padding;
		}
		.jsm-button:last-child {
			border-bottom-left-radius: 1.45em;
			border-bottom-right-radius: 1.45em;
			border-bottom: none;
		}
	}

	/**
		Additional message bubble class for generic templates and the contained items.
	*/
	.jsm-generic-template-wrapper {
		border-radius: 0;
		overflow: hidden;
		white-space: nowrap;
		padding: 0 3em;

		&.jsm-chat-message.jsm-left {
			background: none;
			border: none;
			margin-left: 0;
			max-width: 100%;
			float: none;
		}

		/**
			The template is wrapped into a white background layer that will cover the user icon when the template is scrolled horizontally.
		*/
		.jsm-generic-template-background {
			border-radius: 1.5em;
			background-color: #fff;
			display: inline-block;

			.jsm-generic-template {
				border: 1px solid #f1f0f0;
				background: #fff;
				border-radius: 0.25em;
				display: inline-block;
				margin-right: 0.5em;

				.jsm-image {
					background-size: cover;
					box-sizing: border-box;
					padding-top: 52%;
					border-top-left-radius: 0.2em;
					border-top-right-radius: 0.2em;
					border-bottom: 1px solid #f1f0f0;

					&.jsm-square {
						padding-top: 100%;
					}
				}

				.jsm-title {
					font-family: Arial, sans-serif;
					border-bottom: 1px solid #f1f0f0;
					padding: $message-bubble-padding;
					white-space: normal;

					p:first-child {
						font-size: 100%;
						font-weight: bold;
						margin: 0 0 0.5em;
					}
					p:last-child {
						color: $jsm-dark-gray;
						font-size: 90%;
						margin: 0;
					}
				}

				.jsm-button:last-child {
					border-bottom-left-radius: 0.2em;
					border-bottom-right-radius: 0.2em;
					border-bottom: none;
				}

				&:first-child {
					border-top-left-radius: 1.5em;
					border-bottom-left-radius: 1.5em;

					.jsm-image {
						border-top-left-radius: 1.55em;
					}

					.jsm-button:last-child {
						border-bottom-left-radius: 1.45em;
						border-bottom-right-radius: 1.45em;
						border-bottom: none;
					}
				}
				&:last-child {
					border-top-right-radius: 1.5em;
					border-bottom-right-radius: 1.5em;

					.jsm-image {
						border-top-right-radius: 1.55em;
					}

					.jsm-button:last-child {
						border-bottom-left-radius: 1.45em;
						border-bottom-right-radius: 1.45em;
						border-bottom: none;
					}
				}
			}
		}
	}

	.jsm-button-template, .jsm-generic-template-wrapper {
		.jsm-button {
			margin: 0;
			padding: 0.8em 1em;
			background: #fff;
			color: $jsm-blue;
			text-align: center;
			overflow: hidden;
			border-bottom: 1px solid #f1f0f0;
			&.jsm-selected {
				color: $jsm-light-gray;
			}
		}
		&.jsm-has-previous .jsm-button:last-child {
			border-top-left-radius: 0.25em;
		}
		&.jsm-has-next .jsm-button:last-child {
			border-bottom-left-radius: 0.25em;
		}
	}
}

@keyframes jsm-typing-indicator-anim {
    0% {
    	transform: translate(0, 0);
    }
    20% {
    	transform: translate(0, -0.5em);
    }
    40% {
    	transform: translate(0, 0);
    }
}
@-webkit-keyframes jsm-typing-indicator-anim {
    0% {
    	-webkit-transform: translate(0, 0);
    }
    20% {
    	-webkit-transform: translate(0, -0.5em);
    }
    40% {
    	-webkit-transform: translate(0, 0);
    }
}
