/* Imports */
@import 'https://fonts.googleapis.com/css?family=Noto+Sans';

/* Variables */
$scrollbar-width:              30px;
$chat-thread-bgd-color:        rgba(25,147,147,0.2);
$chat-thread-msg-arrow-size:   15px;
$chat-thread-avatar-size:      50px;
$chat-thread-offset:           #{$chat-thread-avatar-size + 30px};

.chat-cont {padding: 0;	margin: 0;}

.chat-thread {
	margin: 10px auto;
	padding: 20px 20px;
	list-style: none;
	overflow-y: scroll;
  overflow-x: hidden;
  background: -moz-linear-gradient(-45deg, #ededed 0, #ededed 33%, #daf0ed 100%);
	background: -webkit-linear-gradient(-45deg, #ededed 0, #ededed 33%, #daf0ed 100%);
	background-color:#fff;
	background-repeat: no-repeat;
  background-attachment: fixed;
	text-shadow: none;
	border-color:#dcdcdc; border-style:solid; border-width:2px;
}

.chat-thread li {
	position: relative;
	clear: both;
	display: inline-block;
	padding: 16px 40px 16px 20px;
	margin: 0 0 20px 0;
	font: 16px 'Noto Sans', sans-serif;
	border-radius: 10px;
	text-align:left;
}

/* Chat - Avatar */
.chat-thread li:before {
	position: absolute;
	top: 0;
	width: $chat-thread-avatar-size;
	height: $chat-thread-avatar-size;
	border-radius: $chat-thread-avatar-size;
	content: '';
}

/* Chat - Speech Bubble Arrow */
.chat-thread li:after {
	position: absolute;
  top: $chat-thread-msg-arrow-size;
	content: '';
	width: 0;
	height: 0;
	border-top: $chat-thread-msg-arrow-size solid $chat-thread-bgd-color;
}

.chat-thread li:nth-child(even) {
	animation: show-chat-odd 0.15s 1 ease-in;
	-moz-animation: show-chat-odd 0.15s 1 ease-in;
	-webkit-animation: show-chat-odd 0.15s 1 ease-in;
	float: right;
	margin-right: $chat-thread-offset;
	color:#434343; background-color:#ffffff;
	border:#d1e8dc 2px solid; width:67%;
}

.chat-thread li:nth-child(even):before {
	right: -$chat-thread-offset;
	}

.chat-thread li:nth-child(even):after {
	border-right: $chat-thread-msg-arrow-size solid transparent;
	right: -$chat-thread-msg-arrow-size;
	content: '';
	position: absolute;
	right: 0;
	top: 50%;
	width: 0;
	height: 0;
	border: 10px solid transparent;
	border-left-color: #ffffff;
	border-right: 0;
	margin-top: -10px;
	margin-right: -9px;
}

.chat-thread li:nth-child(odd) {
	animation: show-chat-even 0.15s 1 ease-in;
	-moz-animation: show-chat-even 0.15s 1 ease-in;
	-webkit-animation: show-chat-even 0.15s 1 ease-in;
	float: left;
	margin-left: $chat-thread-offset;
	color:#434343; background-color:#cae5e1;
	border:#fff 2px solid; width:67%;
}

.chat-thread li:nth-child(odd):before {
	left: -$chat-thread-offset;
}

.chat-thread li:nth-child(odd):after {
	border-left: $chat-thread-msg-arrow-size solid transparent;
	left: -$chat-thread-msg-arrow-size;
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	width: 0;
	height: 0;
	border: 10px solid transparent;
	border-right-color: #cae5e1;
	border-left: 0;
	margin-top: -10px;
	margin-left: -9px;
}

.chat-window {
	position: fixed;
	bottom: 18px;
	width:90%;
}

.chat-window-message {
	width: 100%;
	height: 48px;
	font: 16px 'Noto Sans', sans-serif;
	background: none;
	border: 0;
	border-bottom: 1px solid $chat-thread-bgd-color;
	outline: none;
}

.chat-thread {scrollbar-width:30px; cursor:pointer;}
.chat-thread::-webkit-scrollbar {width:30px; cursor:pointer;}
.chat-thread::-webkit-scrollbar-track {	background-color:#ddd;width:30px; border:1px solid #ccc}
.chat-thread::-webkit-scrollbar-thumb {	background-color:#aaa;}
.chat-thread::-webkit-scrollbar-thumb:hover {	background-color:#999;}

.chat-extra {background-color:#cad7e6 !important;}
.chat-end {background: none !important; float:left !important; margin:0px !important; padding:5px !important; font-size:12px !important; border:0px !important; color:#454545 !important; font-style:italic !important;}
.chat-end:after {border:0px !important;}

/* A tiny bit responsive... */
/* Small screens */
@media all and (max-width: 600px) {
	.chat-thread {
		width: 100%;
		max-height:200px; height: 90%;
	}

	.chat-window {
		left: 5%;
		width: 90%;
	}
}

/* Medium and large screens */
@media all and (min-width: 400px) {
	.chat-thread {
		width: 80%;
		max-height:200px; height: auto;
	}

	.chat-window {
		left: 25%;
		width: 80%;
	}
}

/* Animation and Load Screens */
@keyframes show-chat-even {
  0% {
    margin-left: -480px;
  }
  100% {
    margin-left: 0;
  }
}

@-moz-keyframes show-chat-even {
  0% {
    margin-left: -480px;
  }
  100% {
    margin-left: 0;
  }
}

@-webkit-keyframes show-chat-even {
  0% {
    margin-left: -480px;
  }
  100% {
    margin-left: 0;
  }
}

@keyframes show-chat-odd {
  0% {
    margin-right: -480px;
  }
  100% {
    margin-right: 0;
  }
}

@-moz-keyframes show-chat-odd {
  0% {
    margin-right: -480px;
  }
  100% {
    margin-right: 0;
  }
}

@-webkit-keyframes show-chat-odd {
  0% {
    margin-right: -480px;
  }
  100% {
    margin-right: 0;
  }
}