.scot-chat {
	box-sizing: border-box;

	&.scot-chat-no-ai {
		.message-actions,
		.thread-status {
			display: none !important;
		}
	}

	*, *::before, *::after {
		box-sizing: border-box;
	}

	z-index: 10;
	bottom: 20px;
	font-size: 14px;
	line-height: 1.2;

	&.positionFixed {
		position: fixed;

		.scot-chat__messages {
			position: absolute;
		}

		&.position-right {
			right: 20px;

			.scot-chat__messages {
				right: 0;
			}
		}

		&.position-left {
			left: 20px;

			.scot-chat__messages {
				left: 0;

				&:before {
					left: 12px;
				}
			}
		}
	}

	&.positionInitial {
		.scot-chat__messages {
			&::before {
				display: none !important;
			}

			&__messages {
				height: 300px
			}
		}
	}

	img {
		max-width: 100%;
		height: auto;
	}

	&__trigger {
		cursor: pointer;
		position: relative;

		.message-counter {
			position: absolute;
			top: 0;
			right: 0;
		}
	}

	.message-counter {
		width: 20px;
		height: 20px;
		display: inline-block;
		border-radius: 50%;
		font-size: 10px;
		font-weight: 600;
		background: red;
		color: #fff;
		text-align: center;
		line-height: 20px;
		vertical-align: middle;
	}

	&__messages {
		bottom: calc(100% + 15px);
		width: var(--scot-widget-width, 300px);
		max-width: calc(100vw - 40px);
		background: var(--scot-message-bg, #f1f6fb);
		color: var(--scot-message-color);
		border-radius: 6px;
		padding: 10px;
		-webkit-filter: drop-shadow(0px 2px 5px rgba(0, 0, 0, .2));
		filter: drop-shadow(0px 2px 5px rgba(0, 0, 0, .2));
		opacity: 0;
		visibility: hidden;
		z-index: -1;

		a {
			color: var(--scot-message-color);
		}

		&.open {
			opacity: 1;
			visibility: visible;
			z-index: 1;
		}

		&:before {
			content: '';
			position: absolute;
			display: block;
			width: 0;
			height: 0;
			border-top: 10px solid var(--scot-message-bg, #f1f6fb);
			border-left: 12px solid transparent;
			top: 100%;
			right: 12px;
		}

		&__header {
			padding: 8px 30px 8px 10px;
			background: var(--scot-header-bg, #fff);
			width: 100%;
			border-radius: 6px;
			box-shadow: 1px 0 5px rgba(0, 0, 0, .1);
			position: relative;
			z-index: 2;
			display: flex;
			align-items: center;

			.user-name {
				max-width: 100%;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
				font-size: 12px;
				font-weight: 600;
				color: var(--scot-header-color);
				.name {
					margin-bottom: 4px;
				}
				.thread-status {
					opacity: .8;
					font-size: 11px;
				}
			}

			.user-avatar {
				width: 30px;
				height: 30px;
				border-radius: 50%;
				object-fit: cover;
				margin-right: 8px;
			}

			.message-counter {
				position: absolute;
				right: 8px;
				top: 50%;
				transform: translateY(-50%);
			}
		}

		&__messages {
			max-height: 50vh;
			overflow-y: auto;
			display: flex;
			flex-direction: column;
			gap: 10px;
			padding: 10px 0;
			min-height: 200px;
			-ms-overflow-style: none;
			scrollbar-width: none;

			.scroll-down-icon {
				position: absolute;
				width: 30px;
				height: 30px;
				border-radius: 50%;
				cursor: pointer;
				box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
				bottom: 60px;
				right: 10px;
				background: var(--scot-support-message-bg, #fff);
				z-index: 2;

				&:before, &:after {
					content: '';
					position: absolute;
					display: block;
					width: 12px;
					height: 1px;
					background: #8b8b8b;
					transform: rotate(45deg);
					top: 16px;
					left: 6px;
				}

				&:after {
					transform: rotate(-45deg);
					top: 16px;
					left: 14px;
				}

				.message-counter {
					top: -5px;
					right: -5px;
					position: absolute;
					width: 16px;
					height: 16px;
					line-height: 16px;
				}
			}

			&::-webkit-scrollbar {
				display: none;
			}

			p {
				margin: 0;
			}

			.single-message {
				position: relative;
				background: var(--scot-customer-message-bg, #fff);
				border-radius: 10px;
				padding: 5px 10px 5px 10px;
				min-width: 30%;
				max-width: 80%;
				align-self: flex-end;

				&.agent,
				&.bot {
					align-self: flex-start;
					background: var(--scot-support-message-bg, #fff);
				}

				&.system {
					align-self: center;
					background: #000;
					color: #fff;
					font-size: 11px;
					> *:not(.message) {
						display: none !important;
					}
					.message {
						margin-bottom: 0;
					}
				}

				.message-actions {
					> * {
						display: none;
					}
				}

				&.bot:last-of-type .message-actions > *,
				&.agent:last-of-type .message-actions > * {
					display: inline-block;
					margin: 8px 0;
					padding: 6px 12px;
					background: #6f42c1;
					color: #fff;
					border-radius: 6px;
					font-size: 14px;
					cursor: pointer;
				}

				.message-sender {
					margin: 0 0 5px 0;
					font-weight: 500;
					color: #007BFF;

					&.agent {
						color: #28A745;
					}

					&.bot {
						color: #6F42C1;
					}

					&.system {
						color: #6C757D;
					}
				}

				.message {
					margin-bottom: 2px;
					overflow-wrap: break-word;

					img {
						cursor: pointer;
					}
				}

				&.skeleton {
					background: linear-gradient(110deg, #ececec 8%, #f5f5f5 18%, #ececec 33%);
					background-size: 200% 100%;
					animation: 1.5s shine linear infinite;
					width: 80%;
					min-height: 60px;
				}

				.message-date {

					font-size: 10px;
					opacity: 0.7;
					text-align: right;
					margin-left: auto;

					img {
						width: 12px;
						opacity: 0.7;
						animation: rotate 1s infinite;
						vert-align: top;
					}
				}
			}
		}

		&__input {
			max-height: 40%;
			position: relative;

			.working-hours {
				margin: 0 -10px;
				padding: 10px;
				font-size: 10px;
				opacity: .5;
				line-height: 1.3;
				border-top: 1px solid var(--scot-message-color);

				p {
					margin: 0;
				}
			}

			textarea {
				width: 100%;
				padding: 50px;
				border-radius: 0;
				border: none;
				box-shadow: none;
				outline: none;
				background: var(--scot-input-field-bg, #fff);
				color: var(--scot-input-field-color, #1e1e1e);
				margin: 0;
			}

			.textarea-wrapper {
				display: grid;
				overflow-y: auto;
				max-height: 200px;
				border-radius: 6px;
				box-shadow: 1px 0 5px rgba(0, 0, 0, .1);

				&:after {
					content: attr(data-replicated-value) " ";
					white-space: pre-wrap;
					visibility: hidden;
				}

				textarea {
					resize: none;
					overflow: hidden;
					margin: 0;
				}

				textarea,
				&:after {
					padding: 10px 35px 10px 15px;
					font: inherit;
					grid-area: 1 / 1 / 2 / 2;
					width: 100%;
					overflow: hidden;
				}
			}

			.file-picker {
				position: absolute;
				left: 10px;
				bottom: 10px;
				cursor: pointer;
				color: rgba(0, 0, 0, .5);
				transition: .3s;
				display: flex;

				&:hover {
					color: rgba(0, 0, 0, .8);
				}

				svg {
					width: 16px;
				}

				input[type=file] {
					position: absolute;
					left: 0;
					top: 0;
					display: block;
					opacity: 0;
					width: 16px;
					height: 18px;
				}
			}

			.send-button {
				position: absolute;
				right: 10px;
				bottom: 8px;
				z-index: 2;
				cursor: pointer;
				color: rgba(0, 0, 0, .5);
				transition: .3s;
				display: flex;

				&:hover {
					color: rgba(0, 0, 0, .8);
				}

				svg {
					width: 22px;
				}
			}
		}

		&__file_popup {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, .2);
			z-index: 50;
		}
	}

	.popup-image {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		padding: 30px;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 11111;

		img {
			max-width: 100%;
			height: auto;
			position: relative;
			z-index: 2;
		}

		.popup-backdrop {
			position: absolute;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
			background: rgba(0, 0, 0, .5);
		}

		.close-popup {
			position: absolute;
			right: 10px;
			top: 10px;
			z-index: 2;
			cursor: pointer;
			width: 30px;
			height: 30px;

			div {
				width: 20px;
				height: 2px;
				transform: rotate(45deg);
				background: #fff;
				position: absolute;
				top: 15px;
				left: 5px;

				&:last-child {
					transform: rotate(-45deg);
				}
			}
		}
	}

}


body.admin-bar {
	.scot-chat {
		.popup-image {
			.close-popup {
				top: 40px;
			}
		}
	}
}

@keyframes rotate {
	0% {
		transform: rotate(0);
	}
	100% {
		transform: rotate(360deg);
	}
}

@keyframes shine {
	to {
		background-position-x: -200%;
	}
}