base.less

				user-select: text;
			}
		}
	}
}

.cozy {
	.message {
		padding: 4px 20px 4px 70px;

		.body {
			margin-top: 0;
		}
	}
}

.compact {
	.message {
		min-height: 26px;
		padding: 5px 15px 0 37px;

		&:not(.system) .message-cog-container {
			display: inline-block;
		}

		.body {
			display: inline;

			.inline-image img {
				max-height: 100px;
			}

			.inline-video {
				max-height: 150px;
			}

			.attachment {
				.attachment-title > a {
					font-size: 0.9em;
				}

				.attachment-author img {
					border-radius: 2px;
				}
			}

			blockquote iframe {
				height: 150px;
				width: 266px;
			}
		}

		.info {
			.avatar-image {
				border-radius: 2px;
			}

			.role-tag {
				display: none;
			}
		}

		.thumb {
			height: 20px;
			width: 20px;
			left: 10px;

			.avatar {
				width: 20px;
				height: 20px;
			}
		}

		&.sequential {
			.thumb:not(.thumb-small),.user {

				/* stylelint-disable-line */
				display: inline-block;
			}

			.info {
				position: relative;
				text-align: right;
				left: 0;

				.time,
				.edited {
					display: inline-block;
				}
			}
		}
	}
}

// FLEX-TAB and FLEX-TAB views
.main-content-flex {
	display: flex;
	height: 100%;
}

.flex-tab-container {
	display: flex;
	z-index: 2;
	border-width: 0 0 0 1px;

	.flex-tab {
		position: relative;
		display: none;
		width: @flex-tab-width;
		overflow-x: visible;

		.control {
			.header {
				text-align: center;
				padding: 5px 30px 20px;
				margin: 5px 0 15px;

				h2 {
					font-size: 20px;
					line-height: 25px;
					font-weight: 300;
				}
			}

			.button {
				min-height: 36px;
				margin: 0 1px;
			}

			.more {
				position: absolute;
				left: 0;
				top: 0;
				height: 60px;
				width: 30px;
				border-width: 0 0 1px;
				cursor: pointer;
				.transform(translateX(-27px));
				transition: transform 0.25s ease-out 0.475s, background 0.075s ease-out 0.5s;

				i {
					.transform-origin(50%, 50%, 0);
					transition: transform 0.3s ease-out;
					height: 12.5px;
					vertical-align: top;
					margin-top: 1px;
				}
			}

			.search-form {
				width: 100%;

				.icon-plus {
					position: absolute;
					top: 11px;
					left: 8px;
					font-size: 13px;
				}
			}

			.info-tabs {
				position: absolute;
				top: 0;
				text-align: right;
				height: 60px;
				right: 20px;

				a {
					float: left;
					display: inline-block;
					padding: 0 15px;
					height: 60px;
					line-height: 60px;
					vertical-align: middle;
					border-width: 0 0 0 1px;

					&:last-child {
						border-width: 0 1px 0 0;
					}
				}
			}
		}

		.content {
			&:extend(.fill-all);
			overflow-x: hidden;
			overflow-y: auto;
			top: auto;
			-webkit-overflow-scrolling: touch;

			> div {
				transition: transform 0.45s cubic-bezier(0.5, 0, 0, 1), opacity 0.125s ease-out 0.1s;
			}

			> .animated-hidden {
				.transform(translateX(100%));
				opacity: 0;
			}

			> .animated {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}

			> .title {
				height: @header-min-height;

				h2 {
					padding: 0 20px;
					font-size: 20px;
					line-height: @header-min-height;
					font-weight: 300;
				}
			}
		}

		footer {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			padding: 9px 15px 0;
			z-index: 100;
			text-align: right;
			height: @footer-min-height;
		}

		.social {
			text-align: center;

			h4 {
				font-weight: 300;
				position: absolute;
				width: 100%;
				top: -12px;
				left: 0;
				font-size: 13px;
			}

			.share {
				border-radius: 50%;
				min-height: 40px;
				line-height: 20px;

				&::before {
					border-radius: 50%;
				}

				span {
					display: none;
				}
			}
		}
	}

	.flex-tab-bar {
		min-width: 40px;
		z-index: 1;

		.tab-button {
			position: relative;
			cursor: pointer;
			text-align: center;

			button {
				height: 38px;
			}

			.counter {
				position: absolute;
				font-size: 9px;
				width: 13px;
				height: 13px;
				border-radius: 50%;
				line-height: 13px;
				font-weight: bold;
				right: 4px;
				top: 4px;
				text-align: center;
			}

			&.active {
				border-width: 0 3px 0 0;

				button {
					margin-left: 3px;
				}

				.counter {
					margin-right: -3px;
				}
			}
		}
	}

	&.opened {
		.flex-tab {
			display: block;
		}
	}
}

.list-view {
	-webkit-overflow-scrolling: touch;
	overflow-y: auto;
	overflow-x: hidden;
	z-index: 10;
	padding: 20px;

	.list {
		display: flex;
		flex-flow: column nowrap;
		position: relative;
		width: 100%;

		.message {
			padding: 8px 0 4px 50px;
		}
	}

	> .title {
		margin: 0 0 20px;

		h2 {
			font-size: 20px;
			line-height: 25px;
			font-weight: 300;
		}

		p {
			font-size: 12px;
			margin-top: 4px;
		}

		b {
			font-weight: 600;
		}

		.see-all {
			float: right;
			border-width: 0;
			text-decoration: underline;
			cursor: pointer;

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

	.show-more-users {
		margin: 1em auto 0;
		display: block;
	}

	&.uploaded-files-list {
		a {
			&.file-name {
				color: #008ce3;
				padding: 10px 5px;
				border-bottom: 1px solid #eaeaea;
				display: block;
				border-width: 0 0 1px;

				&:hover {
					color: #006db0;
					text-decoration: underline;
				}

				p {
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}
		}

		i {
			float: left;
			margin-right: 10px;

			&.file-delete {
				float: right;
				padding-top: 10px;
			}

			&.file-download {
				float: right;
				padding-top: 11px;
			}
		}
	}
}

.user-view {
	z-index: 15;
	overflow-y: auto;
	overflow-x: hidden;

	.about {
		width: 100%;
		margin-bottom: 20px;
	}

	.thumb {
		width: 100%;
		height: 350px;
		padding: 20px;
	}

	nav {
		padding: 0 20px;

		.back {
			float: right;
		}
	}

	.info {
		white-space: normal;
		padding: 0 20px;

		h3 {
			-webkit-user-select: text;
			-moz-user-select: text;
			-ms-user-select: text;
			user-select: text;
			font-size: 24px;
			margin: 8px 0;
			line-height: 27px;
			text-overflow: ellipsis;
			width: 100%;
			overflow: hidden;
			white-space: nowrap;

			i::after {
				content: " ";
				display: inline-block;
				width: 8px;
				height: 8px;
				border-radius: 4px;
				vertical-align: middle;
			}
		}

		p {
			-webkit-user-select: text;
			-moz-user-select: text;
			-ms-user-select: text;
			user-select: text;
			line-height: 18px;
			font-size: 12px;
			font-weight: 300;
		}

		.role-tag {
			padding: 1px 4px;
			border-radius: 2px;
		}
	}

	.stats {
		li {
			margin-bottom: 3px;
			display: inline-block;
			padding: 4px 6px;
			border-right: 2px;
			border-radius: 2px;
		}
	}

	.box {
		position: relative;
		margin-bottom: 25px;
		font-size: 13px;

		h4 {
			&:extend(.small-title);
			margin-bottom: 6px;
		}

		&::after {
			content: " ";
			height: 1px;
			width: 100%;
			bottom: -10px;
			left: 0;
			position: absolute;
		}
	}

	.tags {
		li {
			display: inline-block;
			padding: 4px;
			border-right: 2px;
		}
	}

	.links {
		i {
			margin-right: 5px;
			font-size: 13px;
		}

		a {
			white-space: nowrap;
			max-width: 100%;
			overflow: hidden;
			text-overflow: ellipsis;
			display: block;
			border-radius: 2px;
			padding: 0 5px;
			line-height: 22px;
			position: relative;
			transition: background 0.18s ease, color 0.18s ease;

			&::before {
				content: attr(data-stats);
				position: absolute;
				right: 5px;
				top: 0;
				font-size: 11px;
				opacity: 0;
			}

			&:hover {
				padding-right: 34px;
				text-decoration: none;

				&::before {
					opacity: 1;
				}
			}

			span {
				font-weight: 300;
			}
		}
	}

	.contact-code {
		margin: -5px 0 10px 0;
		font-size: 12px;
	}

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

		p {
			line-height: 18px;
			font-size: 12px;
			font-weight: 300;
		}

		a {
			white-space: nowrap;
			max-width: 100%;
			overflow: hidden;
			text-overflow: ellipsis;
			display: block;
			border-radius: 2px;
			padding: 0 5px;
			line-height: 22px;
			position: relative;
			transition: background 0.18s ease, color 0.18s ease;

			&::before {
				content: attr(data-stats);
				position: absolute;
				right: 5px;
				top: 0;
				font-size: 11px;
				opacity: 0;
			}

			span {
				font-weight: 300;
			}
		}
	}

	.edit-form {
		padding: 20px 20px 0;
		white-space: normal;

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

		p {
			line-height: 18px;
			font-size: 12px;
			font-weight: 300;
		}

		> .input-line {
			margin-top: 20px;

			#password {
				width: 70%;
			}
		}

		nav {
			padding: 0;

			&.buttons {
				margin-top: 2em;
			}
		}

		.form-divisor {
			text-align: center;
			margin: 2em 0;
			height: 9px;

			> span {
				padding: 0 1em;
			}
		}
	}

	.room-info-content > div {
		margin: 0 0 20px;
	}
}

@user-image-square: 20px;

.user-image {
	margin: 4px;
	height: @user-image-square;
	width: @user-image-square;
	cursor: pointer;
	font-size: 12px;
	position: relative;
	display: inline-table;

	&:hover,
	&.selected {
		.avatar {
			&::after {
				.transform(scaleX(1))
			}
		}
	}

	.avatar {
		overflow: visible;

		&::before {
			font-size: 10px;
		}

		&::after {
			content: " ";
			height: 6px;
			width: 6px;
			position: absolute;
			z-index: 1;
			left: -12px;
			top: 8px;
			border-radius: 3px;
		}

		.avatar-initials {
			line-height: @user-image-square;
		}
	}

	p {
		display: none;
	}

	.lines & {
		width: 100%;
		margin: 0;

		&::after {
			display: none;
		}

		button {
			.clearfix;
			padding: 5px 0;
			height: 30px;
			display: block;

			> div {
				float: left;
				width: @user-image-square;
				height: @user-image-square;
			}
		}

		p {
			float: left;
			display: block;
			line-height: @user-image-square;
			font-size: 15px;
			font-weight: 400;
			overflow: hidden;
			text-overflow: ellipsis;
			position: relative;
			padding-left: 10px;
			.calc(width, ~"100% - 45px");
		}
	}

	button {
		display: block;
		width: 100%;
		height: 100%;
	}
}

.user-profile {
	white-space: normal;
	overflow: hidden;

	.thumb {
		float: left;
		width: 75px;

		img {
			width: 60px;
			height: 60px;
		}
	}

	.info {
		display: block;
		margin-left: 75px;

		h3 {
			font-size: 14px;
			margin-bottom: 8px;
			font-weight: 600;
		}

		p {
			font-size: 12px;
			margin-bottom: 6px;
		}

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

.profile-buttons {
	margin-top: 1em;
}

.rocket-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1000;
	visibility: hidden;

	&.fluid {
		.modal {
			height: 100%;

			main {
				position: absolute;
				overflow-y: scroll;
				.calc(height, ~'100% - 112px');
			}
		}
	}

	&.opened {
		.animation(fadeIn .1s ease-out forwards);

		.modal {
			.animation(modalEnter .35s cubic-bezier(.5, 0, .1, 1) forwards .1s);
		}
	}

	&.closed {
		.animation(fadeOut .2s ease-out forwards);

		.modal {
			.animation(modalExit .25s cubic-bezier(.5, 0, .1, 1) forwards);
		}
	}

	&.overflow {
		.modal {
			overflow: visible;

			main {
				overflow: visible;
				position: relative;
			}
		}
	}

	.wrapper {
		display: table;
		height: 100%;
		width: 100%;
		position: relative;
	}

	.window {
		display: table-cell;
		vertical-align: middle;
		text-align: center;
		width: 100%;
		height: 100%;
		position: relative;
	}

	fieldset {
		margin-bottom: 8px;
	}

	legend {
		z-index: 2;
		display: block;
		margin-bottom: 18px;
		position: relative;
		text-transform: uppercase;
		font-size: 13px;

		i {
			margin-right: 4px;
		}

		&::before {
			content: " ";
			width: 100%;
			height: 1px;
			position: absolute;
			top: 19px;
			left: 0;
			z-index: 1;
		}
	}

	.modal {
		display: block;
		max-width: 800px;
		margin: 0 auto;
		width: 90%;
		position: relative;
		overflow: hidden;
		text-align: left;
		border-radius: 4px;
		box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.15);
		padding: 56px 0;
		opacity: 0;

		header {
			height: 55px;
			position: absolute;
			top: 0;
			width: 100%;
			z-index: 1;
			font-size: 14px;
			text-align-last: right;
			padding: 0 25px;
			box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);

			h3 {
				display: inline-block;
				margin: 0;
				text-align: left;
				font-size: 18px;
				font-weight: 600;
				line-height: 55px;
				text-overflow: ellipsis;
				overflow: hidden;
			}

			.close {
				position: absolute;
				width: 20px;
				height: 26px;
				right: 20px;
				top: 16px;
				opacity: 1;

				i {
					font-size: 24px;
				}
			}
		}

		main {
			display: block;
			width: 100%;
			height: 100%;
			overflow-y: auto;
			overflow-x: hidden;
			padding: 20px 25px;
		}

		footer {
			height: 55px;
			position: absolute;
			bottom: 0;
			width: 100%;
			z-index: 1;
			padding: 11px 25px 0;
			text-align: right;
			box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15);
		}
	}
}

.avatarPrompt {
	header {
		p {
			font-size: 14px;
			line-height: 22px;
			font-weight: 300;
		}
	}

	img {
		width: 200px;
	}
}

.select-arrow {
	position: absolute;
	bottom: 11px;
	right: 4px;
	color: #a9a9a9;
}

#login-card {
	width: 100%;
	max-width: 520px;
	padding: 20px;
	margin: 20px auto;
	box-shadow:
		0 1px 1px 0 rgba(0, 0, 0, 0.2),
		0 2px 10px 0 rgba(0, 0, 0, 0.16);
	border-radius: 4px;
	position: relative;
	z-index: 1;

	header {
		padding: 18px 0 23px;

		p {
			margin: 8px 0 0;
			font-size: 14px;
			line-height: 22px;
			font-weight: 300;
		}
	}

	h2 {
		&:extend(.rocket-h2);
		line-height: 24px;
		margin: 0;
	}

	h3 {
		&:extend(.rocket-h3);
	}

	img {
		width: 200px;
	}

	a {
		margin: 4px 0;
		display: inline-block;
	}

	.options {
		display: none;
		width: 100%;
		font-size: 10px;
	}

	.submit,
	.register,