/* Аватар */
.avatar-video-controls {
	position: absolute;
	bottom: 15px;
	left: 0;
	right: 0;
	display: flex;
	justify-content: center;
	gap: 10px;
	opacity: 0;
	transition: opacity 0.3s;
}
.avatar-video-controls:hover {
	opacity: 1;
}
.avatar-control-btn {
	background-color: rgba(52, 152, 219, 0.8);
	color: white;
	border: none;
	padding: 8px 15px;
	border-radius: 5px;
	cursor: pointer;
	font-size: 14px;
	transition: background-color 0.3s;
}
.avatar-control-btn:hover {
	background-color: rgba(41, 128, 185, 0.9);
}

.avatar-video-hover:hover {
	transform: scale(1.02);
}



.avatar-container {
	position: fixed;
	top: 20px;
	right: 20px;
	z-index: 1000;
}
.avatar-button {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
	border: 3px solid white;
	box-shadow: var(--shadow);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: var(--transition);
	position: relative;
}
	.avatar-button img {
		width: 45px;
		height: 45px;
		object-fit: contain;
		pointer-events: none;
	}
	.avatar-button:hover {
		transform: scale(1.1);
		box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
	}
	.avatar-button i {
		color: white;
		font-size: 24px;
	}


/* Стрелка тултипа */
.avatar-tooltip::after {
	content: '';
	position: absolute;
	top: -15px;
	right: 12px;
	transform: translateX(-50%);
	border-width: 0 8px 10px;
	border-style: solid;
	border-color: transparent transparent white;
	filter: drop-shadow(0 2px 1px rgba(0,0,0,0.1));
}

.avatar-tooltip::before {
	bottom: 100%;
	top: auto;
	border-width: 0 9px 11px;
	border-color: transparent transparent #e0e0e0;
}






.avatar-tooltip {
	position: absolute;
	top: 70px;
	right: 0;
	background: white;
	color: var(--dark);
	padding: 15px;
	border-radius: 8px;
	box-shadow: var(--shadow);
	width: 200px;
	opacity: 0;
	visibility: hidden;
	transition: var(--transition);
	font-size: 0.9rem;
	text-align: center;
	border-left: 4px solid var(--accent);
}

.avatar-button:hover .avatar-tooltip {
	opacity: 1;
	visibility: visible;
	top: 80px;
}


















/* Показываем тултип при наведении на аватар */
.avatar-container:hover .avatar-tooltip {
	opacity: 1;
	visibility: visible;
	transition-delay: 0.2s;
}

.avatar-button:hover .avatar-tooltip {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}




/* Стили для плашек с ссылками*/
.video-links-container {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	pointer-events: none;
	padding: 25px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: flex-start;
	justify-content: flex-end;
}

.video-link {
	background: linear-gradient(135deg, rgba(231, 76, 60, 0.95) 0%, rgba(192, 57, 43, 0.95) 100%);
	color: white;
	padding: 4px 6px; /* Уменьшены отступы */
	border-radius: 8px;
	text-decoration: none;
	font-weight: 600;
	font-size: 16px; /* Увеличен шрифт */
	transition: all 0.4s ease;
	transform: translateX(-100%);
	opacity: 0;
	pointer-events: auto;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
	border: 2px solid rgba(255, 255, 255, 0.5);
	min-width: 140px;
	text-align: center;
	position: relative;
	z-index: 1000;
	line-height: 1.3; /* Улучшен межстрочный интервал */
}

	.video-link.visible {
		transform: translateX(0);
		opacity: 1;
	}

	.video-link:hover {
		transform: translateX(0) scale(1.08);
		background: linear-gradient(135deg, rgba(231, 76, 60, 1) 0%, rgba(192, 57, 43, 1) 100%);
		box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
	}

	.video-link i {
		margin-right: 6px;
		font-size: 14px; /* Немного увеличены иконки */
	}

	/* Разные цвета для разных плашек */
	.video-link.catalog {
		background: linear-gradient(135deg, rgba(52, 152, 219, 0.95) 0%, rgba(41, 128, 185, 0.95) 100%) !important;
	}

	.video-link.about {
		background: linear-gradient(135deg, rgba(46, 204, 113, 0.95) 0%, rgba(39, 174, 96, 0.95) 100%) !important;
	}

	.video-link.contacts {
		background: linear-gradient(135deg, rgba(155, 89, 182, 0.95) 0%, rgba(142, 68, 173, 0.95) 100%) !important;
	}

	.video-link.news {
		background: linear-gradient(135deg, rgba(241, 196, 15, 0.95) 0%, rgba(243, 156, 18, 0.95) 100%) !important;
		color: #2c3e50 !important;
	}


/* Стили для перетаскиваемого модального окна */
.avatar-modal {
	display: none;
	position: fixed;
	z-index: 10000;
	width: 300px;
	height: 400px;
	background: white;
	border-radius: 15px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
	overflow: hidden;
	resize: both;
	min-width: 200px;
	min-height: 250px;
	max-width: 90vw;
	max-height: 90vh;
}

	.avatar-modal.active {
		display: block;
	}

.avatar-modal-header {
	background: linear-gradient(135deg, #6d7b8c 0%, #4a5568 100%);
	color: white;
	padding: 15px;
	cursor: move;
	display: flex;
	justify-content: space-between;
	align-items: center;
	user-select: none;
}

.avatar-modal-title {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
}

.avatar-modal-controls {
	display: flex;
	gap: 10px;
}

.avatar-modal-btn {
	background: none;
	border: none;
	color: white;
	cursor: pointer;
	padding: 5px;
	border-radius: 4px;
	transition: background 0.3s ease;
}

	.avatar-modal-btn:hover {
		background: rgba(255, 255, 255, 0.2);
	}

.avatar-modal-content {
	height: calc(100% - 50px);
	position: relative;
}

.avatar-video-container {
	height: 100%;
	background: #000;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.avatar-video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}


/* Адаптивность */
@media (max-width: 768px) {
	.avatar-modal {
		width: 95vw;
		height: 70vh;
		left: 2.5vw !important;
		top: 5vh !important;
	}

	.video-links-container {
		padding: 20px;
		gap: 15px;
	}

	.video-link {
		padding: 16px 20px !important;
		font-size: 16px !important;
		min-width: 200px;
	}

	.avatar-container {
		bottom: 25px;
		right: 25px;
	}

	.avatar-button {
		width: 60px;
		height: 60px;
	}

		.avatar-button img {
			width: 35px;
			height: 35px;
		}
}



/* Обновленные стили для модального окна */
		.avatar-modal1 {
			display: none;
			position: fixed;
			z-index: 10000;
			width: 300px;
			height: 350px;
			background: white;
			border-radius: 15px;
			box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
			overflow: hidden;
			resize: both;
			min-width: 300px;
			min-height: 350px;
			max-width: 90vw;
			max-height: 90vh;
			/* Позволяет событиям мыши проходить сквозь окно */
			pointer-events: none;
		}

		.avatar-modal1.active {
			display: block;
		}

		/* Заголовок и контент должны принимать события */
		.avatar-modal-header,
		.avatar-modal-content,
		.avatar-modal-content * {
			pointer-events: auto;
		}

		.avatar-modal1-header {
			background: linear-gradient(135deg, #6d7b8c 0%, #4a5568 100%);
			color: white;
			padding: 15px;
			cursor: move;
			display: flex;
			justify-content: space-between;
			align-items: center;
			user-select: none;
		}

/* Стили для перетаскиваемого модального окна */
.avatar-modal {
	display: block;
	position: fixed;
	z-index: 10000;
	width: 500px;
	height: 600px;
	background: white;
	border-radius: 15px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
	overflow: hidden;
	resize: both;
	min-width: 400px;
	min-height: 450px;
	max-width: 90vw;
	max-height: 90vh;
	opacity: 0;
	visibility: hidden;
	transform: scale(0.1) translate(var(--start-x), var(--start-y));
	transform-origin: bottom right;
	transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

	.avatar-modal.active {
		opacity: 1;
		visibility: visible;
		transform: scale(1) translate(0, 0);
	}

	.avatar-modal.closing {
		opacity: 0;
		visibility: visible;
		transform: scale(0.1) translate(var(--start-x), var(--start-y));
	}

.avatar-modal-header {
	background: linear-gradient(135deg, #6d7b8c 0%, #4a5568 100%);
	color: white;
	padding: 15px;
	cursor: move;
	display: flex;
	justify-content: space-between;
	align-items: center;
	user-select: none;
}

.avatar-modal-title {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
}

.avatar-modal-controls {
	display: flex;
	gap: 10px;
}

.avatar-modal-btn {
	background: none;
	border: none;
	color: white;
	cursor: pointer;
	padding: 5px;
	border-radius: 4px;
	transition: background 0.3s ease;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
}

	.avatar-modal-btn:hover {
		background: rgba(255, 255, 255, 0.2);
	}

.avatar-modal-content {
	height: calc(100% - 50px);
	position: relative;
}

.avatar-video-container {
	height: 100%;
	background: #000;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	position: relative;
}

/* Стили для изображений */
.avatar-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	transition: opacity 1.5s ease;
	z-index: 5;
}

	.avatar-image.active {
		opacity: 1;
		z-index: 10;
	}

	.avatar-image.start-image {
		z-index: 15;
	}

.avatar-video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 8;
	opacity: 0;
	transition: opacity 1.5s ease;
}

	.avatar-video.playing {
		opacity: 1;
		z-index: 20;
	}

/* Стили для плашек с ссылками - УМЕНЬШЕНЫ НА 20% */
.video-links-container {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	pointer-events: none;
	padding: 12px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: flex-start;
	justify-content: flex-end;
}

.video-link.default-video {
	background: linear-gradient(135deg, rgba(52, 73, 94, 0.95) 0%, rgba(44, 62, 80, 0.95) 100%);
}

.video-link {
	background: linear-gradient(135deg, rgba(231, 76, 60, 0.95) 0%, rgba(192, 57, 43, 0.95) 100%);
	color: white;
	padding: 6px 10px;
	border-radius: 6px;
	text-decoration: none;
	font-weight: 600;
	font-size: 12.8px;
	transition: all 0.4s ease;
	transform: translateX(-100%);
	opacity: 0;
	pointer-events: auto;
	box-shadow: 0 3px 11px rgba(0, 0, 0, 0.4);
	border: 1.6px solid rgba(255, 255, 255, 0.5);
	min-width: 112px;
	text-align: center;
	position: relative;
	z-index: 1000;
	line-height: 1.3;
}

	.video-link.visible {
		transform: translateX(0);
		opacity: 1;
	}

	.video-link:hover {
		transform: translateX(0) scale(1.08);
		background: linear-gradient(135deg, rgba(231, 76, 60, 1) 0%, rgba(192, 57, 43, 1) 100%);
		box-shadow: 0 5px 16px rgba(0, 0, 0, 0.5);
	}

	.video-link i {
		margin-right: 5px;
		font-size: 11.2px;
	}

	/* Разные цвета для разных плашек */
	.video-link.catalog {
		background: linear-gradient(135deg, rgba(52, 152, 219, 0.95) 0%, rgba(41, 128, 185, 0.95) 100%);
	}

	.video-link.about {
		background: linear-gradient(135deg, rgba(46, 204, 113, 0.95) 0%, rgba(39, 174, 96, 0.95) 100%);
	}

	.video-link.contacts {
		background: linear-gradient(135deg, rgba(155, 89, 182, 0.95) 0%, rgba(142, 68, 173, 0.95) 100%);
	}

	.video-link.news {
		background: linear-gradient(135deg, rgba(241, 196, 15, 0.95) 0%, rgba(243, 156, 18, 0.95) 100%);
		color: #2c3e50;
	}

	.video-link.change-video {
		background: linear-gradient(135deg, rgba(230, 126, 34, 0.95) 0%, rgba(211, 84, 0, 0.95) 100%);
	}

	.video-link.load-json {
		background: linear-gradient(135deg, rgba(149, 165, 166, 0.95) 0%, rgba(127, 140, 141, 0.95) 100%);
	}



.avatar-pulse {
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: rgba(52, 152, 219, 0.4);
	animation: pulse 2s infinite;
	pointer-events: none;
	animation: avatar-pulse-dots 2.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
}

@keyframes pulseMain {
	0% {
		transform: scale(1);
		opacity: 0.7;
	}

	70% {
		transform: scale(1.5);
		opacity: 0;
	}

	100% {
		transform: scale(1);
		opacity: 0;
	}
}


/* Адаптивность */
@media (max-width: 768px) {
	.avatar-modal {
		width: 95vw;
		height: 70vh;
		left: 2.5vw;
		top: 5vh;
	}

	.video-links-container {
		padding: 10px;
		gap: 8px;
	}

	.video-link {
		padding: 6px 8px;
		font-size: 11.2px;
		min-width: 100px;
	}

	.avatar-container {
		bottom: 25px;
		right: 25px;
	}

	.avatar-button {
		width: 60px;
		height: 60px;
	}

		.avatar-button img {
			width: 35px;
			height: 35px;
		}

}
/* Стили для уведомления о смене видео */
.video-change-notification {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: rgba(0, 0, 0, 0.8);
	color: white;
	padding: 20px;
	border-radius: 10px;
	text-align: center;
	z-index: 1000;
	display: none;
}

	.video-change-notification.visible {
		display: block;
		animation: fadeInOut 2s forwards;
	}

@keyframes fadeInOut {
	0% {
		opacity: 0;
	}

	20% {
		opacity: 1;
	}

	80% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}

/* Эффект загрузки */
.video-loading {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 100;
	display: none;
}

	.video-loading.visible {
		display: block;
		animation: fadeInOut 0.3s forwards;
	}

.spinner {
	width: 50px;
	height: 50px;
	border: 5px solid rgba(255, 255, 255, 0.3);
	border-radius: 50%;
	border-top-color: #3498db;
	animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}

/* Стили для уведомления о загрузке плашек */
.links-loading {
	position: absolute;
	bottom: 20px;
	left: 20px;
	background: rgba(0, 0, 0, 0.7);
	color: white;
	padding: 10px 15px;
	border-radius: 5px;
	font-size: 12px;
	z-index: 1000;
	display: none;
}

	.links-loading.visible {
		display: block;
	}

/* Стиль для активной кнопки home в controls */
.avatar-modal-btn.home-active {
	background: rgba(255, 255, 255, 0.3) !important;
	animation: pulse-home 2s infinite;
}

@keyframes pulse-home {
	0% {
		box-shadow: 0 0 0 0 rgba(52, 152, 219, 0.7);
	}

	70% {
		box-shadow: 0 0 0 10px rgba(52, 152, 219, 0);
	}

	100% {
		box-shadow: 0 0 0 0 rgba(52, 152, 219, 0);
	}
}

/* Анимация появления/исчезновения */
@keyframes modalFlyIn {
	from {
		opacity: 0;
		transform: scale(0.1) translate(var(--start-x), var(--start-y));
	}

	to {
		opacity: 1;
		transform: scale(1) translate(0, 0);
	}
}

@keyframes modalFlyOut {
	from {
		opacity: 1;
		transform: scale(1) translate(0, 0);
	}

	to {
		opacity: 0;
		transform: scale(0.1) translate(var(--start-x), var(--start-y));
	}
}

/* Альтернативный вариант 3 - точечная пульсация */
.avatar-pulse-dots {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	z-index: -1;
}

	.avatar-pulse-dots::before {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		width: 8px;
		height: 8px;
		background: #3a7bd5;
		border-radius: 50%;
		animation: avatar-pulse-dots 2s ease-in-out infinite;
		transform: translate(-50%, -50%);
	}

@keyframes avatar-pulse-dots {
	0% {
		box-shadow: 0 0 0 0 rgba(58, 123, 213, 0.7);
	}

	70% {
		box-shadow: 0 0 0 20px rgba(58, 123, 213, 0);
	}

	100% {
		box-shadow: 0 0 0 0 rgba(58, 123, 213, 0);
	}
}