@use "../../../010-settings/" as *;

[data-onscreenchat-inact-userid] {
	opacity: .3 !important;
}

.ilOnScreenChatWindowHeaderTooltip {
	ul {
		text-align: left;
		list-style-type: none;
		margin: 0;
		padding: 0;
	}
}

#onscreenchat-container {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	/*height: 100px;*/
	overflow: visible;
	pointer-events: none;
	z-index: 1039;
	padding-right: 15px;
	padding-left: 15px;
	margin-right: auto;
	margin-left: auto;

	.iosOnScreenChat {
		margin-right: -3px;
		margin-left: -15px;
		position: relative;
	}

	.popover {
		max-width: 200px;
		min-height: 100px;
		word-break: break-word;
		a {
			border: 1px solid white;
			padding: 1px 0 1px 2px;

			&:hover {
				border: 1px solid silver;
			}

			img {
				max-width: 19px;
				max-height: 19px;
			}
		}
	}

	.chat-window-wrapper {
		bottom: 0;
		padding-left: 5px;
		padding-right: 5px;
		width: 278px;
		height: 377px;
		background-color: $il-main-bg;

		&:last-child {
			padding-left: 0;
		}

		.chat-img img {
			height: 30px;
			width: 30px;
		}

		li.left .chat-img {
			margin-right: 5px;
		}

		li.right .chat-img {
			margin-left: 5px;
		}

		.iosOnScreenChatBodyMsg {
			overflow-x: hidden;
			overflow-wrap: break-word;
			word-wrap: break-word;
			-ms-hyphens: auto;
			-moz-hyphens: auto;
			-webkit-hyphens: auto;
			hyphens: auto;
		}

		.panel-footer-for-shadow {
			height: 0;
			width: 0;
		}

		.iosOnScreenChatMessageContainer {
			resize: none;
			width: 100%;
			border: 1px solid;
			background: white;
			height: 25px;
		}

		.osc_truncate_username{
			width: 150px;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			display: inline-block;
		}
		.text-muted-left{
			width: 160px;
			margin-top: -4px;
			text-align: right;
		}
		.text-muted-right{
			width: 160px;
			margin-top: -4px;
			text-align: left;
		}
		.osc_truncate_username_left{
			width: 160px;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			display: inline-block;
			margin-bottom: -5px;
			text-align: right;
		}

		.osc_truncate_username_right{
			width: 160px;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			display: inline-block;
		}

		.chat {
			list-style: none;
			margin: 0;
			padding: 0;
			min-height: calc(100% - 50px);

			li.separator:not(:first-child) {
				margin-top: 10px;
			}

			li.header:not(:first-child) {
				margin-top: 15px;
			}

			li {
				padding-bottom: 5px;

				&:before {
					display: table;
					content: " ";
				}

				&:after {
					display: table;
					content: " ";
					clear: both;
				}

				&.separator {
					text-align: center;
					background-color: $il-main-dark-bg;

					p {
						font-size: $il-font-size-small;
						margin-top: 8px;
						margin-bottom: 8px;
					}
				}

				&.header, &.message {
					padding-left: 15px;
					padding-right: 15px;
				}

				&.message.right {
					.chat-body {
						text-align: justify;
						float: right;
						max-width: 85%;
					}
				}

				&.message.left {
					.chat-body {
						text-align: justify;
						width: 85%;
					}
				}

				.chat-body {
					.header {
						strong {
							font-size: $il-font-size-xsmall;
						}
					}

					p {
						margin: 0;
						color: $il-text-light-color;
						font-size: $il-font-size-small;
					}
				}
			}
		}

		.panel {
			pointer-events: auto;
			margin: 0;
			border: 1px solid $il-main-border-color;

			.panel-heading {
				font-size: $il-font-size-xsmall;
				display: block;
				padding: 5px 5px 5px 15px;
				pointer-events: auto;
				margin: 0;
				vertical-align: middle;

				.btn {
					padding: 0 4px;
				}

				img {
					width: 16px;
					height: 16px;
					vertical-align: sub;
				}
				
				a.glyph {
					vertical-align: middle;
				}

				.minimize {
					margin-left: 5px;
					vertical-align: middle;
				}
			}

			.panel .slidedown .glyphicon, .chat .glyphicon {
				margin-right: 5px;
			}

			.panel-body {
				height: auto;
				overflow-y: scroll;
				position: relative;
				height: 250px;
				padding-left: 0;
				padding-right: 0;
				padding-bottom: 0;
				width: 100%;

				.fader {
					position: -webkit-sticky;
					position: sticky;
					bottom: 0;
					width: 100%;
					height: 50px;
					background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(#fff));
					background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #fff 100%);

					.typing-info {
						font-size: .6em;
						position: absolute;
						bottom: 0;
						padding: 2px 5px;
						text-align: right;
						width: 100%;
					}
				}
			}

			.panel-footer {
				position: relative;
				border-top: none;
				padding-top: 15px ;
				padding-bottom: 15px;
			}
		}
	}
}

.iosOnScreenChatModalBody {
	.ui-menu-item {
		padding: 5px;
	}
	.ui-menu-item-wrapper {
		cursor: pointer !important;
	}
}

.ilOnScreenChatSearchLoader {
	vertical-align: middle;
	width: 10px;
	height: 10px;
	margin-left: 5px;
	display: inline-block;
}