// overrides for the base css of converse/inverse

@text-color: #212529;
@link-color: #007bff;
@hover-color: #0056b3;
@bg-color: #578ea9;
@primary-bg-color: #007bff;
@primary-text-color: #fff;


body {
	height:100vh; background-color:@bg-color; color:@text-color;
	.brand-heading {
		margin:auto; font-size:6em; font-weight:bold;
		.icon-conversejs { font-size:0.88em; }
	}
}

.converse-bg {
	position:relative; height:100vh; text-align:center; color:#fff;
	.brand-heading { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); }
}

.xmpp-status, .xmpp-status-menu {
	.online { color:#28a745; }
	.dnd { color:#dc3545; }
	.away { color:#17a2b8; }
	.logout, .offline { color:#868e96; }
}


#mockups {
	position:fixed; bottom:0; left:50%; padding:7px; z-index:2000;
	background-color:@bg-color; transform:translate(-50%, 0%);
	a {
		width:30px; padding:4px; background:#aaa; border:1px solid #000;
		color:#000; font-size:0.9em;
	}
}

#conversejs {
	margin:10px 0 0;
	p { margin-bottom:1rem; }
	a, a:visited { color:@link-color; }
	a:hover { color:@hover-color; }
	canvas { background:#000; border-radius:4px; margin:2px 0; }
	form.pure-form.converse-form {
		input[type=button], input[type=submit] { margin-right:0; }
	}

	.badge { padding:0.25em 0.4em; line-height:1; font-weight:700; font-size:0.9em; }
	.btn.btn-primary { color:@primary-text-color; }
	.chat-head .avatar { border-radius:5px; }

	.fa {
		font:normal normal normal 14px/1 FontAwesome;
		display:inline-block; font-size:inherit; text-rendering:auto;
		-webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
	}

	#controlbox {
		margin-right:0.5em;
		.controlbox-pane { height:100%; border-radius:5px; }
		.controlbox-pane label { margin:8px; }
		#login-dialog {
			.brand-heading { margin-top:3.5%; font-size:2.5em; color:@bg-color; }
		}
		#chatrooms .rooms-list-container { margin:10px 0; }
	}

	#converse-roster {
		height:calc(~"100% - 70px"); margin-top:0; padding-bottom:15px; overflow:auto;
		border-bottom:1px solid #777;
		.roster-filter-form {
			margin:5px 0 0;
			input { width:56%; margin-right:5px; }
			span { margin:0; padding:0.2em; color:#888; cursor:pointer; }
			span.fa-user { color:#000; }
			.form-group { margin-bottom:0.5rem; }
		}
		.roster-contacts {
			height:auto; font-size:0.875rem; overflow:hidden;
			dd {
				height:28px;
				a { text-overflow:initial; overflow:visible; }
				a.remove-xmpp-contact { font-size:0.95em; }
			}
		}
	}

	#minimized-chats .badge { position:absolute; right:122px; bottom:8px; border:1px solid #111; }

	&.fullscreen {
		width:100%; height:100%; right:0; bottom:0; color:@text-color;
		&.login {
			width:calc(~"100vw - 20px"); height:calc(~"100vh - 20px"); margin:10px;
			#controlbox #login-dialog {
				height:100%; border-radius:5px;
				.brand-heading { font-size:6em; }
				.converse-form { margin:0; padding:3em 2em 3em; }
			}
		}
		&.chatbox {
			margin:0;
			.chatbox { width:100%; }
			.chatbox .box-flyout { width:100%; height:100vh; }
		}
		#controlbox {
			width:100%; margin-right:0;
			.box-flyout { width:100%; }
			.controlbox-pane { height:100vh; border-radius:0; }
		}
		.chatroom .box-flyout .chatroom-body .chat-area { height:calc(~"100vh - 95px"); }
	}

	.sidebar {
		display:none; position:absolute; width:50px; height:100vh; padding:10px 0;
		background-color:@bg-color; text-align:center;
		.chatbox-btn {
			float:none; margin:0; font-size:1.35em;
			&.fa-vcard { margin-top:30px; }
		}
		.bottom { position:absolute; bottom:10px; }
	}

	.chatbox {
		.chat-content { padding:0.5em; }
		.chat-body {
			background:#fff;
			.chat-message {
				margin:0.3em;
				canvas { vertical-align:middle; background:#777; }
				.chat-msg-me canvas { background:@bg-color; }
				.chat-msg-them canvas { background:#e77051; }
				.chat-msg-author { float:none; }
			}
		}
		form.sendXMPPMessage {
			textarea { resize:none; border:none; border-top-left-radius:0; border-top-right-radius:0; }
			.chat-toolbar {
				a, li.toggle-toolbar-menu { color:@text-color; }
			}
		}
	}

	.chatroom .box-flyout .chatroom-body {
		.chat-area {
			min-width:100%; height:395px;
			.chat-content { padding:0.5em; }
		}
		.chat-info { color:#fff; line-height:normal; }
		.occupants {
			.chatroom-features { bottom:0; width:auto; }
			ul li.feature { float:left; margin-right:0.5em; padding-right:0; font-size:1em; cursor:help; }
		}
	}

	#users {
		position:relative;
		#chatrooms {
			padding-bottom:5px; border-bottom:1px solid #aaa;
			.rooms-list-container dl.rooms-list {
				.available-chatroom, .open-chatroom { padding:0.1em 0; }
				a + a { line-height:22px; }
			}
		}
		#chatrooms, #contacts { margin-top:0.75em; }
		.userinfo {
			padding-bottom:10px; border-bottom:1px solid #aaa;
			.username { margin-left:5px; }
			.d-flex { margin-bottom:2px; }
		}
		&.controlbox-pane { height:450px; text-align:left; }
		.chatbox-btn { margin:0; color:@link-color; }
	}
}




@media screen and (max-width: 575px) {
	body {
		.brand-heading { font-size:3.75em; }
	}

	#conversejs {
		&.fullscreen.login, & {
			#controlbox #login-dialog .brand-heading { font-size:3.75em; }
		}
		.chatbox .chat-body { border-radius:7px; }
		.flyout { border-radius:4px; }
	}
}

@media screen and (max-width: 767px) {
	#conversejs {
		left:0; margin:0;
		&.fullscreen {
			&.chatbox {
				> .chatbox, .chatroom { width:calc(~"100% - 50px"); }
				&.sidebar-open {
					#controlbox #users { display:block; }
					> .chatbox:not(#controlbox), .chatroom { display:none; }
				}
				.chatbox .box-flyout { left:0; }
			}
		}
		&.login {
			margin:10px;
			#controlbox {
				margin:0;
				.controlbox-pane { font-size:1.15em; }
				&.chatbox { width:100%; }
			}
			.chatbox .box-flyout { height:calc(~"100vh - 20px"); width:100%; bottom:0; left:0; }
		}
		&.sidebar-open {
			#controlbox #users { display:block; }
			> .chatbox:not(#controlbox) { display:none; }
		}

		#controlbox {
			#users {
				position:absolute; top:0; left:50px; display:none;
				width:calc(~"100% - 50px");
			}
			.box-flyout { width:100%; left:0; }
			.sidebar { display:block; }
		}

		#users.controlbox-pane { height:100vh; }
		#login-dialog .pure-form.converse-form { padding:3em 2em 3em; }
		> .chatbox { width:calc(~"100% - 50px"); }
		.chatbox .chat-body .chat-message .chat-msg-author { white-space:normal; }
		.chatbox .box-flyout {
			left:50px; bottom:0; width:calc(~"100% - 50px"); height:100vh; box-shadow:none;
			.chatroom-body .chat-area { height:calc(~"100vh - 55px"); }
		}
	}
}

@media screen and (min-width: 576px) {
	#conversejs {
		.offset-sm-2 { margin-left: 16.666667%; }
	}
}

@media screen and (min-width: 768px) {
	#conversejs {
		.offset-md-2 { margin-left: 16.666667%; }
		.offset-md-3 { margin-left: 25%; }
	}
}

@media screen and (min-width: 992px) {
	#conversejs {
		.offset-lg-2 { margin-left: 16.666667%; }
		.offset-lg-3 { margin-left: 25%; }
	}
}

@media screen and (min-width: 1200px) {
	#conversejs {
		.offset-xl-2 { margin-left: 16.666667%; }
	}
}

@media screen and (max-height: 450px) {
	#conversejs { left:0; }
}

@media screen and (max-width: 480px) {
	#conversejs { width:auto; }
}