.chats-list {
	padding: 0;
	max-height: 608px;
	overflow-x: hidden;
	overflow-y: auto;

	li {
		clear: both;
		list-style-type: none;
		padding: 0.5em;
		.pointer;

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

		&.unread {
			.bg-variant(@state-warning-bg);
		}

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

		a {
			display: block;
			.text-ellipsis;
		}

		p {
			margin: 0;
		}

		.user-img {
			width:24px;
			height:24px;
			margin-left: 0.5em;
		}
	}
}

.expanded-chat, .chat-modal {
	.modal-header {
		padding: 0.25em 1em;

		h4 {
			font-size: 1.5rem;
			font-weight: bold;

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

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

		.close {
			padding: 0.5em;
		}
	}

	.chat-content {
		.fix-lists;
		height: 250px;
		overflow-y: auto;
		overflow-x: hidden;
		resize: none;
		word-wrap: break-word;
		margin: 0;
		padding: 0;

		li.chat-message {
			list-style-type: none;
			font-weight: 300;
			padding: 0 1.428rem;
			margin-right: 1.428rem;

			&:first-child {
				padding-top: 1.428rem;
			}

			&:last-child {
				padding-bottom: 1.428rem;
			}

			&[data-break="true"] {
				padding-top: 1rem;
				margin-top: 1rem;
				border-top: 1px solid @gray-lighter;
			}

			a {
				display: block;
				float: left;

				.chat-user-image {
					width: 32px;
					height: 32px;
				}
			}

			.chat-user {
				display: inline-block;
				margin-left: 13px;
			}

			.chat-timestamp {
				color: @gray-light;
				font-size: 1rem;
				display: inline-block;
				margin-left: 10px;
				.user-select(none);
			}

			.message-body {
				margin-left: 45px;

				p {
					margin: 7px 0 0 0;
					line-height: 2rem;
				}
			}

			&[data-self="0"] + [data-self="0"], &[data-self="1"] + [data-self="1"] {
				&[data-break="false"] {
					.message-header {
						display: none;
					}
				}
			}
		}
	}

	.chat-input {
		height: 42px;
	}

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

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

	.modal-dialog {
		margin: 0 auto;
	}

	textarea {
		resize: none;
	}
}