.widgets-assistant {
	position: fixed;
	right: 10px;
	bottom: 20px;
	font-family: 'Inter', sans-serif;
	display: flex;
	justify-content: space-between;
	width: 100%;
	align-items: center;
	max-width: 260px;
	border-radius: 20px;
	background: linear-gradient(270deg, #141621, #2e313d, #4b4f5b, #141621);
	background-size: 600% 600%;
	animation: backgroundFlow 8s ease infinite;
	box-shadow: 0px 2px 6.2px 0px rgba(0, 0, 0, 0.12);
	padding: 12px;
	z-index: 1100;
}

@keyframes backgroundFlow {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

.widgets-assistant__content {
	color: #fff;
}

.widgets-assistant__name {
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	line-height: normal;
	margin-bottom: 3px;
}

.widgets-assistant__status {
	font-size: 10px;
	font-style: normal;
	font-weight: 500;
	line-height: normal;
}

.widgets-assistant__call {
	position: relative;
	background: transparent;
	padding: 0;

	display: flex;
	justify-content: center;
	align-items: center;

	width: 36px;
	height: 36px;
	cursor: pointer;

	transition: all 0.3s ease-in-out;
	border-radius: 32px;
	border: 1px solid rgba(255, 255, 255, 0.4);
	background: rgba(255, 255, 255, 0.08);
}

.widgets-assistant__call:hover {
	background: rgba(255, 255, 255, 0.2);
}

@keyframes ring-loop {
	0%,
	89% {
		transform: rotate(0deg);
	}
	90% {
		transform: rotate(10deg);
	}
	91.5% {
		transform: rotate(-10deg);
	}
	93% {
		transform: rotate(6deg);
	}
	94.5% {
		transform: rotate(-6deg);
	}
	96% {
		transform: rotate(3deg);
	}
	100% {
		transform: rotate(0deg);
	}
}

.widgets-assistant:not(.active) .widgets-assistant__call svg {
	animation: ring-loop 4s ease-in-out infinite;
	transform-origin: center;
	display: inline-block;
}

.widgets-assistant__call svg path {
	transition: all 0.3s ease-in-out;
}

.widgets-assistant.active .widgets-assistant__call svg path {
	fill: #fe2e2e;
}

.widgets-assistant__call::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1.5px;
	height: 80%;
	background: #fe2e2e;

	transform-origin: center center;
	transform: translate(-50%, -50%) rotate(45deg) scaleY(0);

	transition: transform 0.25s ease-out, background-color 0.3s ease-in-out;
	z-index: 90;
}

.widgets-assistant.active .widgets-assistant__call::before {
	transform: translate(-50%, -50%) rotate(45deg) scaleY(1);
}

.widgets-assistant__wave {
	position: absolute;
	top: -68px;
	left: 0%;
	width: 100%;
	height: 140px;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.3s ease;

	display: flex;
	justify-content: center;
}

.widgets-assistant.active .widgets-assistant__wave {
	opacity: 1;
}