.fsi-root, .fsi-root * { box-sizing: border-box; }

/* ---------- Icon bar ---------- */
.fsi-bar {
	position: fixed;
	z-index: var(--fsi-z, 9999);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--fsi-gap, 10px);
}

.fsi-icons {
	display: flex;
	flex-direction: column;
	gap: var(--fsi-gap, 10px);
}

.fsi-icon {
	width: var(--fsi-size, 50px);
	height: var(--fsi-size, 50px);
	border-radius: var(--fsi-radius, 50%);
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	box-shadow: 0 3px 10px rgba(0, 0, 0, .18);
	transition: transform .18s ease, box-shadow .18s ease;
	position: relative;
}

.fsi-icon svg { width: 56%; height: 56%; }

.fsi-colors-brand .fsi-icon { background: var(--fsi-brand, #333); color: #fff; }
.fsi-colors-custom .fsi-icon { background: var(--fsi-custom-bg, #333); color: var(--fsi-custom-fg, #fff); }

/* Keyboard focus */
.fsi-icon:focus-visible,
.fsi-launcher:focus-visible,
.fsi-cta-bubble:focus-visible,
.fsi-cta-close:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
	box-shadow: 0 0 0 4px rgba(34, 113, 177, .9);
}

/* Hover effects */
.fsi-hover-scale .fsi-icon:hover { transform: scale(1.12); }
.fsi-hover-pulse .fsi-icon:hover { animation: fsi-pulse .9s ease infinite; }
@keyframes fsi-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(0, 0, 0, .25); }
	70%  { box-shadow: 0 0 0 10px rgba(0, 0, 0, 0); }
	100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
}

/* Entrance animations */
.fsi-anim-fade .fsi-icon { animation: fsi-fade .5s ease both; }
.fsi-anim-slide.fsi-side-right .fsi-icon { animation: fsi-slide-l .45s ease both; }
.fsi-anim-slide.fsi-side-left .fsi-icon { animation: fsi-slide-r .45s ease both; }
.fsi-anim-bounce .fsi-icon { animation: fsi-bounce .6s cubic-bezier(.34, 1.56, .64, 1) both; }

.fsi-icons .fsi-icon:nth-child(1) { animation-delay: .03s; }
.fsi-icons .fsi-icon:nth-child(2) { animation-delay: .08s; }
.fsi-icons .fsi-icon:nth-child(3) { animation-delay: .13s; }
.fsi-icons .fsi-icon:nth-child(4) { animation-delay: .18s; }
.fsi-icons .fsi-icon:nth-child(5) { animation-delay: .23s; }
.fsi-icons .fsi-icon:nth-child(n+6) { animation-delay: .28s; }

@keyframes fsi-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes fsi-slide-l { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: none; } }
@keyframes fsi-slide-r { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: none; } }
@keyframes fsi-bounce { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }

/* Tooltip */
.fsi-icon[data-fsi-tooltip]::after {
	content: attr(data-fsi-tooltip);
	position: absolute;
	white-space: nowrap;
	background: #1f2328;
	color: #fff;
	font-size: 12px;
	line-height: 1;
	padding: 6px 9px;
	border-radius: 5px;
	opacity: 0;
	pointer-events: none;
	transition: opacity .15s ease;
	top: 50%;
	transform: translateY(-50%);
}
.fsi-side-right .fsi-icon[data-fsi-tooltip]::after { right: calc(100% + 10px); }
.fsi-side-left .fsi-icon[data-fsi-tooltip]::after { left: calc(100% + 10px); }
.fsi-side-center .fsi-icon[data-fsi-tooltip]::after { right: calc(100% + 10px); }

/* Horizontal bars: tooltips sit above the icon instead of beside it */
.fsi-orient-horizontal .fsi-icon[data-fsi-tooltip]::after {
	left: 50%;
	right: auto;
	top: auto;
	bottom: calc(100% + 10px);
	transform: translateX(-50%);
}
.fsi-icon[data-fsi-tooltip]:hover::after,
.fsi-icon[data-fsi-tooltip]:focus-visible::after { opacity: 1; }

/* ---------- Collapse launcher ---------- */
.fsi-launcher {
	width: var(--fsi-size, 50px);
	height: var(--fsi-size, 50px);
	border: 0;
	border-radius: var(--fsi-radius, 50%);
	background: var(--fsi-custom-bg, #1f2328);
	color: var(--fsi-custom-fg, #fff);
	cursor: pointer;
	display: none;
	align-items: center;
	justify-content: center;
	box-shadow: 0 3px 10px rgba(0, 0, 0, .22);
	padding: 0;
}
.fsi-launcher svg { width: 50%; height: 50%; }
.fsi-launcher-close { display: none; }
.fsi-launcher[aria-expanded="true"] .fsi-launcher-open { display: none; }
.fsi-launcher[aria-expanded="true"] + .fsi-icons { display: flex; }
.fsi-launcher[aria-expanded="true"] .fsi-launcher-close { display: block; }
.fsi-launcher .fsi-launcher-open { transition: transform .2s ease; }
.fsi-launcher:hover .fsi-launcher-open { transform: rotate(90deg); }

/* Collapse: always */
.fsi-collapse-always .fsi-launcher { display: flex; }
.fsi-collapse-always .fsi-launcher[aria-expanded="false"] + .fsi-icons { display: none; }

/* Collapse: mobile only */
@media (max-width: 782px) {
	.fsi-collapse-mobile .fsi-launcher { display: flex; }
	.fsi-collapse-mobile .fsi-launcher[aria-expanded="false"] + .fsi-icons { display: none; }
}

/* Launcher sits at the outer end of the stack */
.fsi-bar { flex-direction: column-reverse; }
.fsi-bar.fsi-orient-horizontal { flex-direction: row-reverse; }
.fsi-bar.fsi-orient-horizontal.fsi-side-left { flex-direction: row; }
.fsi-orient-horizontal .fsi-icons { flex-direction: row; }

/* ---------- Show-after-scroll ---------- */
.fsi-await-scroll .fsi-bar,
.fsi-await-scroll .fsi-cta.fsi-cta-visible {
	opacity: 0;
	pointer-events: none;
	transition: opacity .3s ease;
}
.fsi-await-scroll.fsi-scrolled .fsi-bar,
.fsi-await-scroll.fsi-scrolled .fsi-cta.fsi-cta-visible {
	opacity: 1;
	pointer-events: auto;
}

/* ---------- CTA bubble ---------- */
.fsi-cta {
	position: fixed;
	bottom: 24px;
	z-index: var(--fsi-z, 9999);
	max-width: 320px;
	opacity: 0;
	transform: translate(var(--fsi-cta-tx, 0), 16px);
	pointer-events: none;
	transition: opacity .35s ease, transform .35s ease;
}
.fsi-cta.fsi-cta-visible {
	opacity: 1;
	transform: translate(var(--fsi-cta-tx, 0), 0);
	pointer-events: auto;
}

.fsi-cta-bubble {
	display: flex;
	align-items: center;
	gap: 12px;
	background: var(--fsi-cta-bg, #25D366);
	color: var(--fsi-cta-fg, #fff);
	text-decoration: none;
	padding: 12px 18px 12px 12px;
	border-radius: 50px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
}

.fsi-cta-icon {
	width: 42px;
	height: 42px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: rgba(255, 255, 255, .18);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}
.fsi-cta-icon svg { width: 55%; height: 55%; color: var(--fsi-cta-fg, #fff); }

.fsi-cta-badge {
	position: absolute;
	top: -2px;
	right: -2px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #ff3b30;
	border: 2px solid var(--fsi-cta-bg, #25D366);
	animation: fsi-badge 1.6s ease infinite;
}
@keyframes fsi-badge {
	0%   { box-shadow: 0 0 0 0 rgba(255, 59, 48, .6); }
	70%  { box-shadow: 0 0 0 8px rgba(255, 59, 48, 0); }
	100% { box-shadow: 0 0 0 0 rgba(255, 59, 48, 0); }
}

.fsi-cta-copy { display: flex; flex-direction: column; line-height: 1.25; }
.fsi-cta-text { font-weight: 600; font-size: 14px; }
.fsi-cta-subtext { font-size: 12px; opacity: .85; }

.fsi-cta-close {
	position: absolute;
	top: -9px;
	right: -9px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #fff;
	color: #333;
	border: 1px solid rgba(0, 0, 0, .12);
	box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	z-index: 1;
}
.fsi-cta.fsi-side-left .fsi-cta-close { left: -9px; right: auto; }

/* ---------- Small screens ---------- */
@media (max-width: 480px) {
	.fsi-cta { max-width: calc(100vw - 32px); }
	.fsi-cta-subtext { display: none; }
}

/* ---------- Accessibility & print ---------- */
@media (prefers-reduced-motion: reduce) {
	.fsi-root * {
		animation: none !important;
		transition-duration: .01ms !important;
	}
	.fsi-cta.fsi-cta-visible { opacity: 1; transform: translate(var(--fsi-cta-tx, 0), 0); }
}

@media print {
	.fsi-root { display: none !important; }
}