// Make chats page edge-to-edge
.page-user-chats {
	[data-widget-area="header"],
	[data-widget-area="footer"] {
		display: none;
		visibility: hidden;
	}

	#content {
		width: auto;
		padding: 0;
	}

	.navbar {
		margin-bottom: 0;
	}

	#panel {
		padding-bottom: 0px;
	}

	@media (min-width: @screen-lg-min) {
		#panel {
			padding-top: 0px !important;
		}
	}
}

.chats-full,
.chat-modal {
	.dropdown .avatar {
		margin-right: 10px;
		.border-radius(50%);
	}
}

.chats-full {
	overflow: hidden;
	display: flex;
	flex-wrap: nowrap;

	[component="chat/nav-wrapper"] .chat-search,
	[component="chat/header"] {
		color: @gray-dark;
		height: 55px;
		border-bottom: 1px solid @gray-lighter;
		background: darken(@body-bg, 5%);
	}

	[component="chat/nav-wrapper"] {
		flex: 1;
		flex-direction: column;
		border-right: 1px solid @gray-lighter;
		overflow-y: scroll;
		background: #fff;

		.chat-search {
			line-height: 55px;

			.search-input {
				position: relative;
				font-weight: unset;
				margin-bottom: unset;
				width: 100%;
				padding: 0 10px;

				&#icon-search::before {
					content: "\f002";
					font-family: "FontAwesome";
					position: absolute;
					.inline-block;
					.transform(translateY(-50%));
					color: @gray-light;
					left: 20px;
					top: 50%;
					z-index: 1;
				}

				input {
					background-color: #fff;
					color: @gray;
					.border-radius(5px);
					text-align: center;
					box-shadow: none;
					border: none;

					&:focus {
						padding-left: 30px;
						text-align: left !important;
					}
				}
			}
		}

		[component="chat/search/list"] {
			width: 100%;
			padding: 0;
			margin: 1px 0;
			overflow-x: hidden;
			overflow-y: auto;
			box-shadow: none;
			border: 0;
			border-radius: 0;

			li {
				background: #fff;
				position: relative;
				list-style-type: none;
				padding: 10px;
				.pointer;
				border-bottom: 1px solid @gray-lighter;
				font-weight: bold;

				i {
					position: absolute;
					left: 47px;
					font-size: 15px;
					top: 12px;
				}

				img,
				.user-icon {
					.user-icon-style(50px, 25px, 50%);
					margin-right: 10px;
					vertical-align: middle;
				}
			}
		}

		.chats-list {
			flex: 1;
			overflow-y: auto;
			margin-bottom: 0;
		}
	}

	[component="chat/main-wrapper"] {
		flex: 3;

		.alert {
			margin: 1em;
		}
	}

	[component="chat/header"] {
		position: relative;
		padding: 10px;
		text-align: center;

		.chat-header {
			.inline-block;
			.text-ellipsis;
			max-width: 400px;
			line-height: 35px;

			.title {
				color: @gray-darker;
				font-size: @font-size-base + 1;
			}

			.timeago {
				color: @gray-light;
			}
		}

		.chat-menu {
			position: absolute;
			top: 0;
			right: 0;
			padding: 10px;

			.chat-item {
				.inline-block;
			}

			.close {
				line-height: 35px;
				color: @gray-darker;
				margin-left: 5px;
			}
		}
	}
}

.chat-modal {
	z-index: @zindex-modal;
	outline: none;

	.modal-header {
		padding: 5px 10px;
		display: flex;
		justify-content: space-between;
		align-items: center;

		h4 {
			font-size: 18px;
			font-weight: 600;

			i {
				font-size: 14px;
				vertical-align: center;

				&.fa-keyboard-o {
					.animation(topic-reply-pulse 2s ease-in infinite);
				}
			}
		}

		.close {
			outline: none;
			margin: 0 0 0 10px !important;
		}

		.users-tag-container span:only-of-type [data-role="remove"] {
			display: none;
		}
	}

	.modal-body {
		display: flex;
		flex-direction: column;
		height: 400px;
		padding: 0;

		.chat-content {
			flex: 1;
		}
	}
}

.chats-full,
.chat-modal {
	[component="chat/messages"] {
		display: flex;
		flex-direction: column;
		height: 100%;

		.chat-content {
			flex: 1;
		}
	}

	.modal-header .dropdown {
		.avatar {
			margin-right: 0.5em;
		}
	}
}

.chats-list {
	padding: 0;
	overflow-x: hidden;
	overflow-y: auto;

	> li {
		height: 70px;
		position: relative;
		list-style-type: none;
		padding: 10px 10px 10px 70px;
		.pointer;

		&:not(:last-child) {
			border-bottom: 1px solid @gray-lighter;
		}

		a,
		p,
		.room-name,
		.teaser-content {
			.text-ellipsis;
		}

		&.bg-info,
		&.bg-primary {
			background: lighten(@gray-lighter, 5%);
		}

		&.unread {
			.room-name,
			.teaser-content,
			.teaser-timestamp {
				font-weight: bold;
			}

			.teaser-timestamp,
			.teaser-content {
				color: @gray-darker;
			}
		}

		&.no_active,
		&.loading-text {
			text-align: center;
			padding: 20px 0;
			white-space: normal;
		}

		&.typing {
			.username:after {
				visibility: visible;
			}
		}

		.username {
			font-size: 14px;

			&::after {
				display: inline-block;
				font-family: "FontAwesome";
				content: "\f11c";
				margin-left: 0.5em;
				visibility: hidden;
			}
		}

		.leave {
			.opacity(0.5);

			&:hover {
				.opacity(1);
			}
		}

		.main-avatar {
			position: relative;
			float: left;
			margin-left: -60px;

			.avatar {
				.user-icon-style(50px, 25px, 50%);
				box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
			}

			.status {
				position: absolute;
				left: 40px;
				font-size: 15px;
				top: 0;
			}
		}

		.no-users {
			background: @brand-danger;
			color: #fff;
		}

		.room-name {
			color: @gray-darker;
			font-size: @font-size-base + 1;
			margin-top: 5px;
			display: block;
		}

		.teaser-content,
		.teaser-timestamp {
			color: @gray-light;
		}

		.teaser-content {
			display: block;
			font-size: @font-size-small + 1;
		}

		.teaser-timestamp {
			font-size: @font-size-small - 2;
			margin-top: 7px;
		}

		.members {
			position: absolute;
			padding: 0;
			bottom: 5px;
			left: 10px;

			li {
				width: 13px;
				padding: 0;
				margin: 0;
				display: none;

				&:nth-child(2),
				&:nth-child(3),
				&:nth-child(4) {
					.inline-block;
				}

				.avatar {
					.user-icon-style(20px, 10px, 50%);
					box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
				}

				.status {
					display: none;
				}
			}
		}
	}

	&[component="chat/list"] {
		.main-avatar {
			margin-top: -25px;
		}
		.room-name {
			font-weight: unset;
		}
	}
}

.expanded-chat,
.chat-modal {
	.chat-content {
		background: #fff;
		overflow-y: auto;
		overflow-x: hidden;
		resize: none;
		word-wrap: break-word;
		margin: 0;
		padding: 10px;
		.fix-lists;

		.chat-message {
			display: block;

			.message-block {
				position: relative;
				.inline-block;
				max-width: 70%;
			}

			.message-body {
				border-radius: @message-border-radius;
				padding: 6px 12px;

				p {
					margin: 0;
				}
			}

			.message-wrapper {
				outline: none;

				.px-1,
				.chat-timestamp,
				.message-edited,
				.controls {
					display: none;
				}

				.chat-timestamp,
				.message-edited {
					font-weight: 700;
					font-size: @font-size-small;
				}

				.controls {
					display: none;

					[data-action="restore"] {
						display: none;
					}
				}

				&:focus {
					.message-header {
						padding: 10px 0;
					}

					.chat-timestamp,
					.message-edited,
					.px-1,
					.controls {
						.inline-block;
					}
				}
			}

			&.deleted,
			&.user-deleted,
			&.user-banned {
				.opacity(0.3);

				.controls {
					[data-action] {
						display: none;
					}

					[data-action="restore"] {
						display: inline;
					}
				}
			}

			&[data-break="false"],
			&[data-break="true"] {
				&:first-of-type {
					margin-top: 0 !important;
				}
			}

			&[data-break="false"] {
				margin-top: 2px;
			}

			&[data-break="true"] {
				margin-top: 10px;
			}

			&[data-self="1"] {
				.message-block {
					float: right;
				}

				.message-body {
					color: #ffffff;
					background: @message-bg-1;
				}

				.message-wrapper {
					&:focus {
						.message-header {
							text-align: right;
						}
					}
				}
			}

			&[data-self="0"] {
				margin-left: 42px;

				&[data-break="true"] {
					.message-avatar {
						position: absolute;
						float: left;
						bottom: 0;

						.chat-user-image {
							margin-left: -42px;
							float: left;
							.user-icon-style(32px, 16px, 50%);
						}
					}
				}

				&[data-break="false"] {
					.message-avatar {
						display: none;
					}
				}

				.message-block {
					float: left;
				}

				.message-body {
					color: @gray-darker;
					background: @message-bg-0;
				}

				.message-wrapper {
					&:focus {
						.message-header {
							text-align: left;
						}
					}
				}
			}
		}

		.system-message {
			list-style-type: none;
			text-align: center;
			color: @gray-light;
			font-size: 12px;
			margin-top: 10px;

			&::before,
			&::after {
				display: inline-block;
				width: 10%;
				content: "";
				border-top: 1px solid @gray-lighter;
				position: relative;
				top: -2px;
				margin: 0 10px;
			}
		}
	}

	.user-typing {
		color: @gray-light;
		margin: 1.428rem 0;
	}

	.selected[data-since] {
		font-weight: bold;
	}

	.modal-dialog {
		margin: 0 auto;
	}

	textarea {
		resize: none;
	}

	.since-bar {
		display: block;
		padding: 1rem 0;
		text-align: center;
	}

	.controlsToggle {
		margin-right: 10px;
	}

	[component="chat/composer"] {
		display: flex;
		position: relative;
		margin: 10px;

		[component="chat/input"] {
			flex: 1;
			.border-radius(@message-border-radius);
			box-shadow: none;
			padding-right: 42px;
			height: 42px;
		}

		[data-action="send"] {
			position: absolute;
			right: 5px;
			top: 50%;
			.transform(translateY(-50%));
			background: @message-bg-1;
			height: 32px;
			width: 32px;
			color: #fff;
			padding: 0;
			box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
			.border-radius(50%);
		}
	}
}

// ??????

.chats-page {
	margin-top: 10px;
}

[component="chat/manage-modal"] {
	.list-group-item .avatar {
		border-radius: 0;
		margin-right: 1em;
	}

	div + span {
		margin: -4px;
	}
}

/* Mobile handling of chat page */
@media (max-width: @screen-sm) {
	.page-user-chats {
		padding-bottom: 0;

		[component="chat/nav-wrapper"][data-loaded="1"],
		[component="chat/nav-wrapper"][data-loaded="0"] + [component="chat/main-wrapper"] {
			display: none;
		}
	}

	[data-action="pop-out"] {
		display: none;
	}
}

/* Mobile handling of chat modal */
@media (max-width: @screen-sm-max) {
	.chat-modal {
		z-index: @zindex-popover + 10;
	}
}