/* ==========================================
   FLOATING BUTTONS ROOT
========================================== */

.dr1060floatingbuttons {

	position: relative;

	z-index: 10000;
}

/* ==========================================
   WRAPPER
========================================== */

.dr1060floatingbuttons .floating-buttons {

	position: fixed;

	right: 22px;

	bottom: 40px;

	display: flex;

	flex-direction: column;

	gap: 14px;

	align-items: flex-end;
}

/* ==========================================
   BASE BUTTON
========================================== */

.dr1060floatingbuttons .fab-btn {

	width: 64px;

	height: 64px;

	border-radius: 22px;

	display: flex;

	align-items: center;

	justify-content: center;

	text-decoration: none;

	color: #ffffff;

	font-size: 20px;

	border: 2px solid rgba(255,255,255,.12);

	position: relative;

	overflow: hidden;

	cursor: pointer;

	backdrop-filter: blur(25px);

	-webkit-backdrop-filter: blur(25px);

	box-shadow:
		0 10px 35px rgba(0,0,0,.20),
		0 0 25px rgba(0,212,255,.12);

	transition: all .35s ease;

	animation: aiBotFloat 5s ease-in-out infinite;
}

/* ==========================================
   FLOATING ANIMATION
========================================== */

@keyframes aiBotFloat {

	0%,100% {

		transform: translateY(0);
	}

	50% {

		transform: translateY(-8px);
	}
}

/* ==========================================
   HOLOGRAPHIC BORDER
========================================== */

.dr1060floatingbuttons .fab-btn::before {

	content: "";

	position: absolute;

	inset: -2px;

	border-radius: inherit;

	background:
		conic-gradient(
			from 0deg,
			#00d4ff,
			#6d5dfc,
			#ff61d8,
			#00d4ff
		);

	z-index: -2;

	opacity: .8;

	animation: aiRotate 8s linear infinite;
}

@keyframes aiRotate {

	from {

		transform: rotate(0deg);
	}

	to {

		transform: rotate(360deg);
	}
}

/* ==========================================
   GLASS INNER LAYER
========================================== */

.dr1060floatingbuttons .fab-btn::after {

	content: "";

	position: absolute;

	inset: 2px;

	border-radius: 20px;

	background:
		rgba(10,18,35,.88);

	z-index: -1;
}

/* ==========================================
   HOVER
========================================== */

.dr1060floatingbuttons .fab-btn:hover {

	transform:
		translateY(-8px)
		scale(1.12);

	box-shadow:
		0 20px 50px rgba(0,212,255,.25),
		0 0 35px rgba(109,93,252,.35);
}

/* ==========================================
   ACTIVE
========================================== */

.dr1060floatingbuttons .fab-btn:active {

	transform: scale(.95);
}

/* ==========================================
   ICON
========================================== */

.dr1060floatingbuttons .fab-btn .icon {

	font-size: 24px;

	display: flex;

	align-items: center;

	justify-content: center;

	filter:
		drop-shadow(
			0 0 10px rgba(255,255,255,.45)
		);
}

/* ==========================================
   LABEL
========================================== */

.dr1060floatingbuttons .fab-btn .label {

	position: absolute;

	right: 84px;

	top: 50%;

	transform:
		translateY(-50%)
		translateX(10px);

	padding: 10px 16px;

	border-radius: 999px;

	background:
		rgba(7,19,39,.95);

	backdrop-filter: blur(18px);

	border:
		1px solid rgba(0,212,255,.20);

	color: #ffffff;

	font-size: 13px;

	font-weight: 700;

	letter-spacing: .3px;

	white-space: nowrap;

	opacity: 0;

	visibility: hidden;

	box-shadow:
		0 10px 30px rgba(0,0,0,.25);

	transition: all .3s ease;
}

.dr1060floatingbuttons .fab-btn:hover .label {

	opacity: 1;

	visibility: visible;

	transform:
		translateY(-50%)
		translateX(0);
}

/* ==========================================
   WHATSAPP AI SUPPORT
========================================== */

.dr1060floatingbuttons .fab-btn.whatsapp {

	background:
		linear-gradient(
			135deg,
			#00c853,
			#69f0ae
		);

	box-shadow:
		0 15px 40px rgba(0,200,83,.25);
}

/* ==========================================
   CALL AI EXPERT
========================================== */

.dr1060floatingbuttons .fab-btn.phone {

	background:
		linear-gradient(
			135deg,
			#00d4ff,
			#4f46e5
		);

	box-shadow:
		0 15px 40px rgba(0,212,255,.25);
}

/* ==========================================
   AI CHAT
========================================== */

.dr1060floatingbuttons .fab-btn.sms {

	background:
		linear-gradient(
			135deg,
			#ff61d8,
			#ff8a00
		);

	box-shadow:
		0 15px 40px rgba(255,97,216,.25);
}

/* ==========================================
   EMAIL
========================================== */

.dr1060floatingbuttons .fab-btn.email {

	background:
		linear-gradient(
			135deg,
			#38bdf8,
			#00d4ff
		);

	box-shadow:
		0 15px 40px rgba(56,189,248,.25);
}

/* ==========================================
   SHARE
========================================== */

.dr1060floatingbuttons .fab-btn.share {

	background:
		linear-gradient(
			135deg,
			#8b5cf6,
			#ec4899
		);

	box-shadow:
		0 15px 40px rgba(139,92,246,.25);
}

/* ==========================================
   TOP
========================================== */

.dr1060floatingbuttons .fab-btn.top {

	background:
		linear-gradient(
			135deg,
			#071327,
			#102452
		);

	box-shadow:
		0 15px 40px rgba(0,0,0,.35);
}

/* ==========================================
   PULSE EFFECT
========================================== */

.dr1060floatingbuttons .fab-btn.whatsapp::after,
.dr1060floatingbuttons .fab-btn.phone::after,
.dr1060floatingbuttons .fab-btn.sms::after {

	animation: aiPulse 2.5s infinite;
}

@keyframes aiPulse {

	0% {

		box-shadow: 0 0 0 0 rgba(0,212,255,.5);
	}

	70% {

		box-shadow: 0 0 0 18px rgba(0,212,255,0);
	}

	100% {

		box-shadow: 0 0 0 0 rgba(0,212,255,0);
	}
}

/* ==========================================
   MOBILE
========================================== */

@media (max-width:768px) {

	.dr1060floatingbuttons .floating-buttons {

		right: 14px;

		bottom: 24px;

		gap: 10px;
	}

	.dr1060floatingbuttons .fab-btn {

		width: 56px;

		height: 56px;

		border-radius: 18px;
	}

	.dr1060floatingbuttons .fab-btn .icon {

		font-size: 20px;
	}

	.dr1060floatingbuttons .fab-btn .label {

		display: none;
	}
}