/**
 * DeVsN Addons — Floating Social (v3.9.0)
 * Floating chat button that expands into direct social inbox links.
 */

.devsn-fsocial {
	--dfs-size: 60px;
	--dfs-item: 48px;
	--dfs-gap: 14px;
	--dfs-radius: 50%;
	--dfs-x: 24px;
	--dfs-y: 24px;
	--dfs-main-1: #4f46e5;
	--dfs-main-2: #9333ea;
	--dfs-main-fg: #fff;
	--dfs-item-bg: #0f172a;
	--dfs-item-fg: #fff;
	--dfs-brand: #4f46e5;
	--dfs-ease: cubic-bezier(0.34, 1.56, 0.64, 1);

	position: fixed;
	z-index: 99990;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--dfs-gap);
	font-family: inherit;
	line-height: 1;
}

/* ------------------------------------------------------------------ *
 * Position
 * ------------------------------------------------------------------ */
.devsn-fsocial--bottom-right {
	right: var(--dfs-x);
	bottom: var(--dfs-y);
	align-items: flex-end;
}
.devsn-fsocial--bottom-left {
	left: var(--dfs-x);
	bottom: var(--dfs-y);
	align-items: flex-start;
}
.devsn-fsocial--top-right {
	right: var(--dfs-x);
	top: var(--dfs-y);
	flex-direction: column-reverse;
	align-items: flex-end;
}
.devsn-fsocial--top-left {
	left: var(--dfs-x);
	top: var(--dfs-y);
	flex-direction: column-reverse;
	align-items: flex-start;
}
.devsn-fsocial--middle-right {
	right: var(--dfs-x);
	top: 50%;
	transform: translateY(-50%);
	align-items: flex-end;
}
.devsn-fsocial--middle-left {
	left: var(--dfs-x);
	top: 50%;
	transform: translateY(-50%);
	align-items: flex-start;
}

/* ------------------------------------------------------------------ *
 * Channel list
 * ------------------------------------------------------------------ */
.devsn-fsocial__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	align-items: inherit;
	gap: var(--dfs-gap);
}

.devsn-fsocial--top-right .devsn-fsocial__list,
.devsn-fsocial--top-left .devsn-fsocial__list {
	flex-direction: column-reverse;
}

.devsn-fsocial--layout-horizontal .devsn-fsocial__list {
	flex-direction: row-reverse;
	align-items: center;
}
.devsn-fsocial--layout-horizontal.devsn-fsocial--bottom-left .devsn-fsocial__list,
.devsn-fsocial--layout-horizontal.devsn-fsocial--top-left .devsn-fsocial__list,
.devsn-fsocial--layout-horizontal.devsn-fsocial--middle-left .devsn-fsocial__list {
	flex-direction: row;
}
.devsn-fsocial--layout-horizontal {
	flex-direction: row-reverse;
	align-items: center;
}
.devsn-fsocial--layout-horizontal.devsn-fsocial--bottom-left,
.devsn-fsocial--layout-horizontal.devsn-fsocial--top-left,
.devsn-fsocial--layout-horizontal.devsn-fsocial--middle-left {
	flex-direction: row;
}

.devsn-fsocial__row {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.devsn-fsocial--bottom-left .devsn-fsocial__row,
.devsn-fsocial--top-left .devsn-fsocial__row,
.devsn-fsocial--middle-left .devsn-fsocial__row {
	flex-direction: row-reverse;
}

.devsn-fsocial__item {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--dfs-item);
	height: var(--dfs-item);
	border-radius: var(--dfs-radius);
	background: var(--dfs-item-bg);
	color: var(--dfs-item-fg);
	text-decoration: none;
	overflow: hidden;
	transition: transform 0.25s var(--dfs-ease), box-shadow 0.25s ease, filter 0.25s ease;
}

.devsn-fsocial.is-brand .devsn-fsocial__item {
	background: var(--dfs-brand);
	color: #fff;
}

.devsn-fsocial--style-soft .devsn-fsocial__item {
	background: color-mix(in srgb, var(--dfs-brand) 16%, #fff);
	color: var(--dfs-brand);
}
.devsn-fsocial--style-outline .devsn-fsocial__item {
	background: #fff;
	color: var(--dfs-brand);
	box-shadow: inset 0 0 0 2px var(--dfs-brand);
}
.devsn-fsocial--style-glass .devsn-fsocial__item {
	background: color-mix(in srgb, var(--dfs-brand) 22%, transparent);
	color: var(--dfs-brand);
	backdrop-filter: blur(10px) saturate(160%);
	-webkit-backdrop-filter: blur(10px) saturate(160%);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dfs-brand) 35%, transparent);
}

.devsn-fsocial.has-shadow .devsn-fsocial__item {
	box-shadow: 0 10px 24px -8px color-mix(in srgb, var(--dfs-brand) 70%, transparent), 0 2px 6px rgba(15, 23, 42, 0.16);
}
.devsn-fsocial.has-shadow.devsn-fsocial--style-outline .devsn-fsocial__item {
	box-shadow: inset 0 0 0 2px var(--dfs-brand), 0 8px 20px -10px rgba(15, 23, 42, 0.45);
}

.devsn-fsocial__item:hover,
.devsn-fsocial__item:focus-visible {
	transform: translateY(-3px) scale(1.08);
	filter: saturate(115%);
}

.devsn-fsocial__logo {
	display: block;
	width: 52%;
	height: 52%;
}
.devsn-fsocial__logo svg {
	display: block;
	width: 100%;
	height: 100%;
	fill: currentColor;
}

/* Tooltip */
.devsn-fsocial__tip {
	position: absolute;
	top: 50%;
	right: calc(100% + 12px);
	margin-top: -14px;
	pointer-events: none;
	white-space: nowrap;
	font-size: 13px;
	font-weight: 600;
	padding: 7px 12px;
	border-radius: 8px;
	background: #0f172a;
	color: #fff;
	opacity: 0;
	transform: translateX(6px);
	transition: opacity 0.2s ease, transform 0.2s ease;
}
.devsn-fsocial--bottom-left .devsn-fsocial__tip,
.devsn-fsocial--top-left .devsn-fsocial__tip,
.devsn-fsocial--middle-left .devsn-fsocial__tip {
	right: auto;
	left: calc(100% + 12px);
	transform: translateX(-6px);
}
.devsn-fsocial--layout-horizontal .devsn-fsocial__tip {
	top: auto;
	bottom: calc(100% + 10px);
	right: 50%;
	left: auto;
	margin: 0;
	transform: translate(50%, 6px);
}
.devsn-fsocial--layout-horizontal .devsn-fsocial__row:hover .devsn-fsocial__tip {
	transform: translate(50%, 0);
}
.devsn-fsocial:not(.has-tips) .devsn-fsocial__tip,
.devsn-fsocial--layout-arc .devsn-fsocial__tip {
	display: none;
}
.devsn-fsocial.has-tips .devsn-fsocial__row:hover .devsn-fsocial__tip,
.devsn-fsocial.has-tips .devsn-fsocial__item:focus-visible + .devsn-fsocial__tip {
	opacity: 1;
	transform: translateX(0);
}

/* ------------------------------------------------------------------ *
 * Closed / open state + open animations
 * ------------------------------------------------------------------ */
.devsn-fsocial__row {
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.35s ease, transform 0.45s var(--dfs-ease), filter 0.35s ease;
	transition-delay: calc((var(--dfs-count) - var(--i)) * 45ms);
}
.devsn-fsocial.is-open .devsn-fsocial__row {
	opacity: 1;
	pointer-events: auto;
	transform: none;
	filter: none;
	transition-delay: calc(var(--i) * 55ms);
}

.devsn-fsocial--open-slide .devsn-fsocial__row {
	transform: translateY(18px) scale(0.85);
}
.devsn-fsocial--top-right.devsn-fsocial--open-slide .devsn-fsocial__row,
.devsn-fsocial--top-left.devsn-fsocial--open-slide .devsn-fsocial__row {
	transform: translateY(-18px) scale(0.85);
}
.devsn-fsocial--open-pop .devsn-fsocial__row {
	transform: scale(0.2);
}
.devsn-fsocial--open-flip .devsn-fsocial__row {
	transform: perspective(600px) rotateX(-90deg) scale(0.8);
}
.devsn-fsocial--open-blur .devsn-fsocial__row {
	transform: scale(0.9);
	filter: blur(8px);
}
.devsn-fsocial--open-swing .devsn-fsocial__row {
	transform: rotate(-35deg) translateX(24px) scale(0.7);
	transform-origin: bottom right;
}

/* Arc layout — items sit on a quarter circle around the button. */
.devsn-fsocial--layout-arc .devsn-fsocial__list {
	position: absolute;
	inset: auto;
	right: 0;
	bottom: 0;
	width: var(--dfs-size);
	height: var(--dfs-size);
	display: block;
	pointer-events: none;
}
.devsn-fsocial--layout-arc.devsn-fsocial--bottom-left .devsn-fsocial__list,
.devsn-fsocial--layout-arc.devsn-fsocial--top-left .devsn-fsocial__list,
.devsn-fsocial--layout-arc.devsn-fsocial--middle-left .devsn-fsocial__list {
	right: auto;
	left: 0;
}
.devsn-fsocial--layout-arc .devsn-fsocial__row {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	transform: rotate(0deg) translate(0, 0);
}
.devsn-fsocial--layout-arc.is-open .devsn-fsocial__row {
	pointer-events: auto;
	transform: rotate(calc(-90deg / (var(--dfs-count) + 1) * var(--i)))
		translate(0, calc(-1 * (var(--dfs-size) + var(--dfs-gap) * 3)))
		rotate(calc(90deg / (var(--dfs-count) + 1) * var(--i)));
}
.devsn-fsocial--layout-arc.devsn-fsocial--bottom-left.is-open .devsn-fsocial__row,
.devsn-fsocial--layout-arc.devsn-fsocial--top-left.is-open .devsn-fsocial__row,
.devsn-fsocial--layout-arc.devsn-fsocial--middle-left.is-open .devsn-fsocial__row {
	transform: rotate(calc(90deg / (var(--dfs-count) + 1) * var(--i)))
		translate(0, calc(-1 * (var(--dfs-size) + var(--dfs-gap) * 3)))
		rotate(calc(-90deg / (var(--dfs-count) + 1) * var(--i)));
}

/* ------------------------------------------------------------------ *
 * Main button
 * ------------------------------------------------------------------ */
.devsn-fsocial__toggle {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--dfs-size);
	height: var(--dfs-size);
	padding: 0;
	border: 0;
	cursor: pointer;
	border-radius: var(--dfs-radius);
	background: linear-gradient(135deg, var(--dfs-main-1), var(--dfs-main-2));
	color: var(--dfs-main-fg);
	transition: transform 0.3s var(--dfs-ease), box-shadow 0.3s ease;
	-webkit-tap-highlight-color: transparent;
}
.devsn-fsocial.has-shadow .devsn-fsocial__toggle {
	box-shadow: 0 14px 30px -10px color-mix(in srgb, var(--dfs-main-1) 80%, transparent), 0 4px 10px rgba(15, 23, 42, 0.2);
}
.devsn-fsocial__toggle:hover {
	transform: scale(1.06);
}
.devsn-fsocial__toggle-icon,
.devsn-fsocial__toggle-close {
	position: absolute;
	display: grid;
	place-items: center;
	width: 46%;
	height: 46%;
	transition: opacity 0.25s ease, transform 0.35s var(--dfs-ease);
}
.devsn-fsocial__toggle-icon svg,
.devsn-fsocial__toggle-close svg {
	width: 100%;
	height: 100%;
	fill: currentColor;
}
.devsn-fsocial__toggle-close {
	opacity: 0;
	transform: rotate(-90deg) scale(0.4);
}
.devsn-fsocial.is-open .devsn-fsocial__toggle-icon {
	opacity: 0;
	transform: rotate(90deg) scale(0.4);
}
.devsn-fsocial.is-open .devsn-fsocial__toggle-close {
	opacity: 1;
	transform: none;
}

.devsn-fsocial__toggle-ring {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
}

/* ------------------------------------------------------------------ *
 * Idle animations
 * ------------------------------------------------------------------ */
.devsn-fsocial--anim-pulse .devsn-fsocial__toggle-ring {
	box-shadow: 0 0 0 0 color-mix(in srgb, var(--dfs-main-1) 60%, transparent);
	animation: dfs-pulse 2.2s infinite;
}
.devsn-fsocial--anim-glow .devsn-fsocial__toggle {
	animation: dfs-glow 2.4s ease-in-out infinite;
}
.devsn-fsocial--anim-beat .devsn-fsocial__toggle {
	animation: dfs-beat 1.6s ease-in-out infinite;
}
.devsn-fsocial--anim-bounce .devsn-fsocial__toggle {
	animation: dfs-bounce 1.8s ease-in-out infinite;
}
.devsn-fsocial--anim-shake .devsn-fsocial__toggle {
	animation: dfs-shake 3s ease-in-out infinite;
}
.devsn-fsocial--anim-swing .devsn-fsocial__toggle {
	transform-origin: top center;
	animation: dfs-swing 3.4s ease-in-out infinite;
}
.devsn-fsocial--anim-float .devsn-fsocial__toggle {
	animation: dfs-float 3s ease-in-out infinite;
}
.devsn-fsocial--anim-spin-slow .devsn-fsocial__toggle-icon {
	animation: dfs-spin 6s linear infinite;
}
.devsn-fsocial.is-open .devsn-fsocial__toggle,
.devsn-fsocial.is-open .devsn-fsocial__toggle-ring,
.devsn-fsocial.is-open .devsn-fsocial__toggle-icon {
	animation: none;
}

@keyframes dfs-pulse {
	0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--dfs-main-1) 55%, transparent); }
	70% { box-shadow: 0 0 0 20px color-mix(in srgb, var(--dfs-main-1) 0%, transparent); }
	100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--dfs-main-1) 0%, transparent); }
}
@keyframes dfs-glow {
	0%, 100% { filter: brightness(1); box-shadow: 0 0 0 0 color-mix(in srgb, var(--dfs-main-2) 45%, transparent); }
	50% { filter: brightness(1.15); box-shadow: 0 0 26px 6px color-mix(in srgb, var(--dfs-main-2) 45%, transparent); }
}
@keyframes dfs-beat {
	0%, 100% { transform: scale(1); }
	14% { transform: scale(1.14); }
	28% { transform: scale(1); }
	42% { transform: scale(1.1); }
	56% { transform: scale(1); }
}
@keyframes dfs-bounce {
	0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
	40% { transform: translateY(-14px); }
	60% { transform: translateY(-7px); }
}
@keyframes dfs-shake {
	0%, 82%, 100% { transform: rotate(0); }
	85% { transform: rotate(-14deg); }
	88% { transform: rotate(12deg); }
	91% { transform: rotate(-10deg); }
	94% { transform: rotate(8deg); }
	97% { transform: rotate(-4deg); }
}
@keyframes dfs-swing {
	0%, 70%, 100% { transform: rotate(0); }
	78% { transform: rotate(12deg); }
	86% { transform: rotate(-9deg); }
	94% { transform: rotate(4deg); }
}
@keyframes dfs-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-10px); }
}
@keyframes dfs-spin {
	to { transform: rotate(360deg); }
}

/* ------------------------------------------------------------------ *
 * Greeting bubble
 * ------------------------------------------------------------------ */
.devsn-fsocial__bubble {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	max-width: 250px;
	padding: 12px 34px 12px 14px;
	border-radius: 14px;
	background: #fff;
	color: #0f172a;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.45;
	box-shadow: 0 16px 34px -14px rgba(15, 23, 42, 0.4), 0 2px 8px rgba(15, 23, 42, 0.08);
	animation: dfs-bubble-in 0.45s var(--dfs-ease) both;
}
.devsn-fsocial__bubble[hidden] {
	display: none;
}
.devsn-fsocial__bubble::after {
	content: "";
	position: absolute;
	bottom: -6px;
	right: 22px;
	width: 12px;
	height: 12px;
	background: inherit;
	transform: rotate(45deg);
}
.devsn-fsocial--bottom-left .devsn-fsocial__bubble::after,
.devsn-fsocial--middle-left .devsn-fsocial__bubble::after,
.devsn-fsocial--top-left .devsn-fsocial__bubble::after {
	right: auto;
	left: 22px;
}
.devsn-fsocial--top-right .devsn-fsocial__bubble::after,
.devsn-fsocial--top-left .devsn-fsocial__bubble::after {
	bottom: auto;
	top: -6px;
}
.devsn-fsocial__bubble-x {
	position: absolute;
	top: 6px;
	right: 8px;
	border: 0;
	background: none;
	cursor: pointer;
	font-size: 17px;
	line-height: 1;
	color: #94a3b8;
	padding: 2px 4px;
}
.devsn-fsocial__bubble-x:hover {
	color: #0f172a;
}
@keyframes dfs-bubble-in {
	from { opacity: 0; transform: translateY(10px) scale(0.9); }
	to { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------ *
 * Devices + reduced motion
 * ------------------------------------------------------------------ */
@media (max-width: 767px) {
	.devsn-fsocial--dev-desktop {
		display: none !important;
	}
	.devsn-fsocial__bubble {
		max-width: 200px;
		font-size: 12.5px;
	}
}
@media (min-width: 768px) {
	.devsn-fsocial--dev-mobile {
		display: none !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.devsn-fsocial *,
	.devsn-fsocial *::before,
	.devsn-fsocial *::after {
		animation: none !important;
		transition-duration: 0.01ms !important;
	}
}