/* ---- clean css ---- */

*, body, div, dl, dt, dd, ul, ol, li, 
h1, h2, h3, h4, h5, h6, pre, form,
fieldset, input, textarea, p, th,
td, blockquote {
   margin: 0px;
   padding: 0px;
   box-sizing: border-box;
}

fieldset, img { 
   border: 0; 
}

/* ---- page css ---- */

html {
   margin: 0;
   padding: 0;
   height: 100%;
   font-family: 'Roboto', sans-serif;
   font-size: 0.8em
}

body {
   margin: 0px; 
   padding: 0px;
   background: #141719;
}

html, body {
  min-height:100%;
  height:100%;
}

#chat {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	width: 100%;
	max-width: 600px;
	height: 100%;
	background: #202123;
	box-shadow: 2px 1px 10px rgba(0,0,0,.2);
	margin: 0 auto;
	position: relative;

}

#chat .message, #chat .notice {

	display: flex;
	align-items: center;
	width: 100%;

	justify-content: flex-end;
	animation-duration: .3s;
	animation-name: fly-in;

	position: relative;
}		
	
#chat .other {
	flex-direction: row-reverse;
}

.messageWrapper {
	position: relative;
}

#chat .other .messageWrapper {

	text-align: left !important;
}


#chat-container {
	display: flex;
	flex-direction: column;
	padding: 20px 30px;
	margin-top: 40px;
	overflow-y: scroll;
	flex-grow: 1;

}

#chat .notice {
	align-items: center;
	text-align: center;
	justify-content: center;
	position: relative;
}

#chat .notice .messageWrapper {

	color: #959595;
	text-shadow: 1px 1px 0px rgba(0,0,0,1);
	border-bottom:  1px solid rgba(255,255,255,.05);
	width: 200px;
	margin: 0px 50px 15px 15px;
	padding-bottom: 15px;
	text-align: center;
}

#chat .message {
	padding-bottom: 8px;
}

#chat .message .messageWrapper {
	display: block;
	max-width: 75%;			
	padding: 12px 16px;	
	background: rgba(255,255,255,.1);
	color: #e3e5e9;
	border-radius: 3px;				
	white-space: normal;
	word-wrap: break-word;
	text-align: right;
}

@keyframes fly-in {
  0% {
    transform: scale(0.85) translateY(10%);
    opacity: 0;
  }
  100% {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

#chat header {
	position: absolute;
	top: 0;
	width: 100%;
	color: white;
	background: rgba(0,0,0,.2);
	height: 40px;
}

#chat footer {
	position: relative;
	color: white;
}

.isTyping {
	opacity: .4;
	padding: 15px 0 15px 5px;
}
header h1 {
	width: 100%;
	text-align: center;
	font-size: 14px;
	font-weight: normal;
	padding-top: 12px;
	color: #adadad;
	text-shadow: 1px 1px 0px rgba(0,0,0,1);
}

#usersOnline {
	float: left;
	margin-top: -18px;
	padding-left: 10px;
}

#usersOnline svg {
	float: left;
	opacity: .4;
	width: 14px;
	height: 14px;
}

#usersOnline span {
	display: inline-block;
	margin: 2px 0 0 4px;
	opacity: .7;
}


#status {
	float: right;
	margin-top: -16px;
	padding-right: 10px;
}

#status .icon {
	fill: red;
	float: right;
	margin-left: 5px;
	margin-top: -2px;
}

#status .icon svg {
	width: 0px;
	height: 18px;
}

#status .icon path, .messageStatus svg path {				
	transition: fill .3s;
}

#status.connecting svg.connecting {	width: 18px;	}
#status.connecting svg path { fill: #b61414; }

#status.authenticating svg.unlocked { width: 18px; }
#status.authenticating svg path { fill: #bc5d17;	}

#status.connected svg.locked { width: 18px; }
#status.connected svg path { fill: #149c17;	}

#status .title {
	opacity: .7;
}

.message .messageStatus {
	position: absolute;
	right: -26px;
	bottom: 18px !important;
}

.messageStatus svg {
	width: 0px;
	height: 14px;
}

.messageStatus.sent svg.sent { width: 14px; }
.messageStatus.sent path { fill: #6d6d6d; }

.messageStatus.received { right: -24px; }
.messageStatus.received svg.received { width: 14px; }
.messageStatus.received path { fill: #6d6d6d; }

.message.other .messageStatus {
	display: none;
}

#chat footer {
	background: rgba(0,0,0,.2);
	position: relative;
	padding-right: 127px;
	transition: padding .3s;
}

#messageText {
	max-height: 150px;
	background: rgba(255,255,255,.1);
	height: 100%;
	padding: 15px;
	position: relative;
	display: block;
	overflow-y: auto;
	outline: none;
}

#messageText:empty::before {
	content: "Enter your message here ..";
	color: gray;
}

#sendMessage, #sendAttachement, #sendPhoto  {
	position: absolute;
	right: 10px;
	bottom: 0px;
	opacity: .2;
	transition: opacity .3s, color .3s;
	width: 44px;
	height: 44px;
	padding: 10px;		
	cursor: pointer;
}


#sendAttachement {
	right: 50px;	
	opacity: 1;
	transition: opacity .2s, color .2s;
}

#sendPhoto {
	right: 80px;
	opacity: 1;	
	transition: opacity .2s, color .2s;
}

footer.canSendMessage #sendMessage {
	opacity: 1;
}

footer.canSendMessage #sendPhoto, footer.canSendMessage #sendAttachement {
	opacity: 0 !important;
	pointer-events: none !important;
}

footer.canSendMessage {
	padding-right: 55px !important;
}


.message.file.image .messageWrapper {
	padding: 5px !important;
}

.message.file.image .messageWrapper img {
	width: 100%;
	float: left;
}

#upload input {
	display: none;
}

.message a {
	color: #83BEDC;
	text-decoration: none;
}

.message a:hover {
	color: #A6D2E8;
}

.message.seen .received path {
	fill: #5278c4;
}

.uploadingFile .text {
	position: relative;
	z-index: 2;
}

.uploadingFile .messageWrapper {
	position: relative;
	overflow: hidden;
	background: rgba(255,255,255,.02) !important;
}

.uploadingFile .progress {
	position: absolute;
	top: 0;
	left: 0;
	width: 0%;
	height: 100%;
	z-index: 1;
	background: red;
	background: rgba(255,255,255,.08);
	transition: width .1s;
}

#dropMessage {
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 999;
	backdrop-filter: blur(3px); 
	background: rgba(0,0,0,.2);
	transition: opacity .3s;
	pointer-events: none;
	opacity: 0;
}

#dropMessage div {
	font-size: 1.2em;
	color: rgba(255,255,255,.4);
	text-shadow: 1px 1px 0px rgba(0,0,0,.6);
	text-align: center;
	top: 50%;
	width: 100%;
	transform: translateY(50%);
	position: absolute;
	pointer-events: none;
}

#chat.fileDrop #dropMessage {
	opacity: 1;
}

.messageWrapper.video::before {
	display: block;
	content: ' ';
	background-image: url('/img/play.svg');
	fill: #ffffff;
	background-size: 60px 60px;
	height: 60px;
	width: 60px;
	position: absolute;
	pointer-events: none;
	left: 50%;
	top: 50%;	
	transform: translate(-50%, -50%);
	opacity: .8;
}


#home {
	background: red;
	width: 100%;
	max-width: 400px;
	left: 50%;
	transform: translateX(-50%);
	position: relative;
	
	background: #202123;
	box-shadow: 2px 1px 10px rgba(0,0,0,.2);
	color: #959595;
	padding: 20px;
}

#home h1 {
	text-align: center;
	font-size: 1.2em;
	margin-bottom: 20px;
}

#home > div {
}

#home ul {
	padding: 10px 10px 10px 10px;
}

#home li {
	list-style-type: none;
	padding: 3px 5px;
}

#home li::before {
	content: '-';
	opacity: .5;
	margin-left: -10px;
	position: absolute;
}

.spacer {
	display: block;
	height: 1px;
	width: 100%;
	background: rgba(255,255,255,.2);
	margin: 10px 0 10px 0;
}

#createRoom {
	color: white;
	background: rgba(255,255,255,.1);
	text-shadow: 1px 1px 0px rgba(0,0,0,1);
	border-bottom:  1px solid rgba(255,255,255,.05);
	text-decoration: none;
	border-radius: 2;
	font-size: 1.2em;
	padding: 10px 12px;
	display: inline-block;
	margin: 5px 0 10px 0;
}

#roomUrl {

	display: inline-block;
	position: relative;
	width: 240px;
	padding: 5px 10px;
	background: rgba(0,0,0,.1);
	border: 1px solid rgba(255,255,255,.1);
	text-align: center;
	color: #959595;
	outline: none;
	font-family: 'Roboto', sans-serif;
	font-size: 1em;
}

.copyToClipboard {
	margin-top: 5px;
}