@charset "UTF-8";

.custom-textarea {
	white-space:pre-wrap;
	word-wrap:break-word;
	background:transparent;
	border:1px solid #ccc;
	position:absolute;
	top:0px;
	height:auto;
	resize: none;
	line-height:20px;
	min-height:36px;
	&:focus {
		border-color: #ccc;
		box-shadow: none;
	}
}

.bad-connection {
	background: #ffffac !important;
	color: #D04444 !important;
}

.textarea-div {
	white-space:pre-wrap;
	word-wrap:normal;
	color:rgba(0,0,0,0);
	position:absolute;
	top:0px;
	word-break: break-word;
	left:1px;
	line-height:20px;
	min-height:36px;
	height:auto;
	border:0;
}

body.ios {
	.textarea-div {
		padding: 7px 17px 7px 15px;
		-webkit-overflow-scrolling: auto;
	}
}

.textarea-div::-webkit-scrollbar {
	display:none;
}

.textarea-wrapper {
	position:relative;
	.textbox-preview-area {
		position: absolute;
		z-index: 2;
		top: 0;
		left: 0;
		box-shadow: none;
		white-space: normal;
	}
	.textbox-preview-link, .textbox-help-link {
		position: absolute;
		z-index: 3;
		bottom: -23px;
		font-size: 13px;
		cursor: pointer;
	}
	.textbox-preview-link {
		right: 45px;
	}
	.textbox-help-link {
		right: 0;
	}
	min-height:36px;
}

.date-separator, .new-separator {
	text-align: center;
	height: 2em;
	margin: 0;
	position: relative;
	z-index: 0;
	&:before, &:after {
		content: "";
		height: 1em;
		position: absolute;
		left: 0;
		width: 100%;
		display: none;
	}
	&:before {
		bottom: 0;
	}
	&:after {
		top: 0;
	}
	&.hovered--after {
		&:before {
			background: #f5f5f5;
			display: block;
		}
	}
	&.hovered--before {
		&:after {
			background: #f5f5f5;
			display: block;
		}
	}
	.separator__hr {
		border-color: #ccc;
		margin: 0;
		position: relative;
		z-index: 5;
		top: 1em;
	}
	.separator__text {
		line-height: 2em;
		color: #555;
		background: #FFF;
		display: inline-block;
		padding: 0 1em;
		font-weight: 700;
		@include border-radius(50px);
		position: relative;
		z-index: 5;
		font-size: 13px;
	}
}
.new-separator {
	.separator__hr {
		border-color: #FFAF53;
	}
	.separator__text {
		color: #F80;
		font-weight: normal;
	}
}

.file-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-align: center;
	color: #FFF;
	font-size: em(20px);
	font-weight: 600;
	z-index: 6;

	.overlay__indent {
		background-color: rgba(0, 0, 0, 0.6);
		position: relative;
		height: 100%;
		@include clearfix;
	}

	&.center-file-overlay {
		.overlay__indent {
			margin-left: 220px;
		}
	}

	&.right-file-overlay {
		font-size: em(18px);
		.overlay__circle {
			width: 300px;
			height: 300px;
			margin: -150px 0 0 -150px;
		}
		.overlay__files {
			margin: 60px auto 15px;
			width: 150px;
		}
	}

	.overlay__circle {
		background: #111;
		background: rgba(black, 0.7);
		width: 370px;
		height: 370px;
		margin: -185px 0 0 -185px;
		@include border-radius(500px);
		position: absolute;
		top: 50%;
		left: 50%;
	}

	.overlay__files {
		display: block;
		margin: 75px auto 20px;
	}

	.overlay__logo {
		position: absolute;
		left: 50%;
		bottom: 30px;
		margin-left: -50px;
		@include opacity(0.3);
	}

	.fa {
		display: inline-block;
		font-size: 1.1em;
		margin-right: 8px;
	}
}

#post-list {
	@include flex(1 1 auto);
	position: relative;
	overflow-y: hidden;
	height: 100%;

	.inactive {
		display: none;
	}

	.post-list-holder-by-time {
		background: #fff;
		overflow-y: scroll;
		width: 100%;
		padding: 1em 0 0;
		position: absolute;
		height: 100%;
		-webkit-overflow-scrolling: touch;
		&::-webkit-scrollbar {
			width: 0px !important;
		}
		&.active {
			display: inline;
		}
	}

	.more-messages-text {
		margin: 5px 0 10px;
		display: block;
		text-align: center;
		outline: none;
		border: none;
		font-size: 13px;
	}
	.beginning-messages-text {
		margin-top: 2px;
		margin-bottom: 5px;
		display: block;
		text-align: center;
		color: grey;
	}
}

.post-list__timestamp {
	position: absolute;
	top: 8px;
	left: 50%;
	z-index: 50;
	width: 120px;
	text-align: center;
	background: $primary-color;
	color: #fff;
	@include border-radius(3px);
	font-size: 12px;
	line-height: 25px;
	margin-left: -60px;
	-webkit-font-smoothing: initial;
	@include single-transition(all, 0.3s, ease);
	@include translateY(-45px);
	@include opacity(0);
	display: none;

	&.scrolling {
		@include single-transition(all, 0.3s, ease);
		@include translateY(0);
		@include opacity(0.8);
	}
}

.post-list__arrows {
	background: url('../images/postArrows.png') center;
	@include background-size(28px 28px);
	background-repeat: no-repeat;
	width: 40px;
	height: 40px;
	position: absolute;
	bottom: 50px;
	right: 5px;
	z-index: 50;
	@include opacity(0);
	@include single-transition(all, 0.3s);
	display: none;

	&.scrolling {
		display: block;
		@include opacity(1);
	}
}

.post-create__container {
	form {
		width: 100%;
		padding: 0.5em 14px 0;
		margin: 0 auto;
		max-width: 1028px;
	}
	.post-create-body {
		position: relative;
		padding: 0 0 2px;
		.post-body__cell {
			vertical-align: top;
			position: relative;
			&.scroll {
				.btn-file {
					right: 15px;
				}
				.custom-textarea {
					padding-right: 43px;
				}
			}
		}
		.send-button {
			display: none;
			cursor: pointer;
			padding-right: 4px;
			width: 45px;
			height: 37px;
			font-size: 18px;
			line-height: 37px;
			vertical-align: bottom;
			text-align: center;
			@include single-transition(all, 0.15s);
			&:active {
				@include opacity(0.75);
			}
		}
		.custom-textarea {
			padding-top: 8px;
			padding-right: 28px;
			max-height: 162px !important;
			overflow: auto;
			line-height: 1.5;
		}
		.textarea-div {
			padding-top: 8px;
			padding-right: 30px;
			max-height: 163px !important;
			overflow: auto;
			line-height: 1.5;
		}
		.btn-file {
			right: 0;
			position: absolute;
			top: 1px;
			color: #444;
			@include opacity(0.5);
			@include single-transition(all, 0.15s);
			font-size: 16px;
			padding: 7px 9px 6px;
			&:hover, &:active {
				@include opacity(0.9);
				box-shadow: none;
			}
		}
		textarea {
			box-shadow: none;
		}
	}
	.post-create-footer {
		@include clearfix;
		padding: 3px 0 0 0;
		font-size: 13px;
		.control-label {
			font-weight: normal;
			margin-bottom: 0;
			top: -5px;
			position: relative;
		}
		.msg-typing {
			min-height: 25px;
			display: block;
			@include opacity(0.7);
		}
	}
}

.post-list__table {
	display: table;
	table-layout: fixed;
	width: 100%;
	min-height: 100%;
	height: 100%;
	.post-list__content {
		display: table-cell;
		vertical-align: bottom;
		> div:last-child {
			.dropdown-menu {
				top: auto;
				bottom: 25px;
			}
		}
	}
}

.post {
	word-wrap: break-word;
	padding: 8px 1em 0;
	position: relative;
	max-width: 100%;
	@include legacy-pie-clearfix;

	&:hover {
		.dropdown, .comment-icon__container {
			visibility: visible;
		}
		.permalink-icon {
			visibility: visible;
		}
	}

	&.post--highlight {
		background-color: beige;
	}

	p {
		margin: 0;
		line-height: 1.6em;
		font-size: 0.97em;
		white-space: pre-wrap;

		&:last-child {
			margin-bottom: 0.5em;
		}

	}

	span {

		p:last-child {
			margin-bottom: 0.5em;
		}

	}

	&.post--root {

		.comment-icon__container {
			visibility: visible;
		}

	}

	&.same--root {

		&.same--user {
			padding: 0 1em;

			&:hover {

				.post__time {

					&:before {
						@include opacity(0.5);
					}

				}

			}

			.post__header {
				margin: 0;
				height: 0;

				.col__name {
					display: none;
				}

				.col__reply {
					top: 6px;
				}

			}

			.post__time {
				top: 24px;
			}

			.post__time {
				display: inline-block;
				font: normal normal normal 14px/1 FontAwesome;
				font-size: inherit;
				text-rendering: auto;
				-webkit-font-smoothing: antialiased;
				-moz-osx-font-smoothing: grayscale;
				font-size: 0;
				position: absolute;
				top: -3px;
				left: 17px;
				width: 30px;
				height: 30px;
				line-height: 37px;

				&:before {
					@include opacity(0);
					content: "\f017";
					content: "\f017";
					font-size: 19px;
				}

			}

		}

		&.post--comment {

			.post__link {
				display: none;
			}

			.post__img {
				img {
					display: none;
				}
			}

		}

		&.post--comment {
			.post__body {
				border-left: 4px solid #ddd;
			}
		}

	}

	&.other--root {

		.comment-icon__container {

			&.icon--show {
				visibility: visible;
			}

		}

		&.post--comment {

			.popover {

				margin-top: 84px;

				> .arrow {
					top: 21px !important;
				}
			}

			.post__header {

				.col__reply {
					top: 53px;
				}

			}

		}

	}

	.post__content {
		margin: 0 auto;
		position: relative;
		max-width: 1000px;
		display: table;
		width: 100%;
		table-layout: fixed;

		> div {
			display: table-cell;
			vertical-align: top;
		}

	}

	.post__header {
		padding: 0;
		list-style: none;
		margin-bottom: 2px;

		li {
			display: inline-block;
		}

		.col__name {
			margin-right: 7px;
			font-weight: 600;
		}

		.col__reply {
			position: absolute;
			right: 0;
			top: 30px;
			width: 65px;
			white-space: nowrap;
		}

		.permalink-popover {
			min-width: 0;

			.popover-content {
				padding: 5px;
			}

			.form-control, .btn {
				font-size: 13px;
				height: 30px;
				padding: 0 8px;
				line-height: 30px;
			}

		}

	}

	.post__img {
		width: 46px;
		img {
			width: 36px;
			height: 36px;
			vertical-align: inherit;
			@include border-radius(50px);
		}
	}

	.dropdown {
		display: inline-block;
		visibility: hidden;
		margin-right: 5px;
		top: -1px;

		.dropdown-menu {
			right: 0;
			left: auto;
			min-width: 130px;
			padding: 2px 0;

			li {
				display: block;

			}

			a {
				padding: 5px 15px;
			}

		}

	}

	.post__dropdown {
		&:after {
			content: '[...]';
			top: -1px;
			position: relative;
		}
	}

	.post__body {
		word-wrap: break-word;
		padding: 0.2em 0.5em 0em;
		@include legacy-pie-clearfix;
		width: calc(100% - 75px);

		p {
			margin: 0 0 0.4em;
		}

		img {
			max-height: 400px;
		}

		ul, ol {
			margin-bottom: 0.4em;

			p {
				margin-bottom: 0;
			}
			li ul, li ol {
				padding: 0 0 0 20px
			}

			li.list-item--task-list ul, li.list-item--task-list ol {
				margin-left: 20px;
			}

			li.list-item--task-list ul {
				padding-left: 0;
			}

			li:not(.list-item--task-list) li.list-item--task-list, li:not(.list-item--task-list) li.list-item--task-list ~ li {
				margin-left: -20px;
			}

			li input[type="checkbox"]:disabled {
				vertical-align: top;
				cursor: default;
			}
		}

		ul li.list-item--task-list, ul li.list-item--task-list ~ li {
			list-style-type: none;
		}

		ul li.list-item--task-list ~ li:not(.list-item--task-list) {
			text-indent: 3px;

			&:before {
				content: "⦁";
				margin-right: 8px;
			}
		}
	}

	.post__link {
		margin: 2px 0 5px;
		font-size: 13px;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}

	.post__time {
		font-size: 0.9em;
	}

	.post__time, &.post--system .post__body {
		@include opacity(0.6);
	}

	.post-loading-gif {
		height:10px;
		width:10px;
		margin-top:6px;
	}

	.post-fail {
		color: #D58A8A;
	}

	.post-waiting {
		color: #999;
	}

	.permalink-icon {
		display: inline-block;
		color: $primary-color;
		visibility: hidden;
	}

	.comment-icon__container {
		fill: $primary-color;
		display: inline-block;
		visibility: hidden;

		&.icon--visible {
			visibility: visible;
		}

		.comment-icon {
			display: inline-block;
			top: 3px;
			position: relative;
			margin-right: 3px;
			fill: inherit;
		}

		path {
			fill: inherit;
		}

	}

	.web-embed-data {
		padding: 2px 0 0 10px;
		background: #f9f9f9;
		background: rgba(0, 0, 0, 0.05);
		@include border-radius(2px);
		height: 50px;
		overflow: hidden;
		text-overflow: ellipsis;
		.embed-title {
			margin: 3px 0 1px;
			color: #555;
			font-weight: 600;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
		}
		.embed-description {
			margin: 0;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
			color: #888;
		}
		.embed-link {
			display: none;
		}
	}
}

.bot-indicator {
	font-family: inherit;
	font-size: 11px;
	padding: 2px 4px;
	border-radius: 2px;
	font-weight: 600;
	margin: 0 0 0 -4px;
}

.attachment {
	.attachment__content {
		border-width: 1px;
		border-style: solid;
		border-radius: 4px;
		padding: 2px 5px;
		margin: 0 0 5px 0;
	}
	.attachment__thumb-pretext {
		border: 0 none;
		background: transparent;
	}
	.attachment__container {
		border-left-width: 4px;
		border-left-style: solid;
		padding: 2px 0 2px 10px;
		&.attachment__container--good {
			border-left-color: #00C100;
		}
		&.attachment__container--warning {
			border-left-color: #DEDE01;
		}
		&.attachment__container--danger {
			border-left-color: #E40303;
		}
	}
	.attachment__body {
		float: left;
		width: 80%;
		padding-right: 5px;
		overflow-x: auto;
		overflow-y: hidden;
		&.attachment__body--no_thumb {
			width: 100%;
		}
	}
	.attachment__text p:last-of-type {
		display: inline-block;
	}
	.attachment__thumb-pretext {
		margin-left: 5px;
	}
	.attachment__title {
		margin: 5px 0;
		padding: 0;
		line-height: 16px;
		height: 22px;
		font-size: 16px;
		a {
			font-size: 16px;
		}
	}
	.attachment__author-icon {
		@include border-radius(50px);
		margin-right: 5px;
		width: 14px;
		height: 14px;
	}
	.attachment__image {
		max-width: 100%;
		margin-bottom: 1em;
	}
	.attachment__thumb-container {
		width: 20%;
		float: right;
		img {
			max-height: 75px;
			max-width: 100%;
		}
	}
	.attachment___fields {
		width: 100%;
		.attachment___field-caption {
			font-weight: 700;
		}
		.attachment___field p {
			margin: 0;
		}
	}
}

.permalink-text {
	overflow: hidden;
}

.permalink-popover {
	min-width: 320px;
	margin-left: 50px !important;
}