.fcs {
	--fcs-main: #0b5d66;   /* warna tombol (diatur dari halaman admin) */
	--fcs-icon: #ffffff;   /* warna ikon customer service (diatur dari halaman admin) */
	--fcs-size: 58px;
	--fcs-item: 46px;
	--fcs-spring: cubic-bezier(.34, 1.56, .64, 1);
	position: fixed;
	right: calc(20px + env(safe-area-inset-right, 0px));
	bottom: calc(20px + env(safe-area-inset-bottom, 0px));
	z-index: 99999;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 14px;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	line-height: 1;
	pointer-events: none; /* area kosong di sekitar widget tetap bisa diklik */
}
.fcs *, .fcs *::before, .fcs *::after { box-sizing: border-box; }

/* ---------- Tombol customer service ----------
   !important dipakai supaya gaya tombol bawaan tema (hover/focus/active)
   tidak mengubah warna tombol setelah diklik. */
.fcs .fcs__toggle,
.fcs .fcs__toggle:hover,
.fcs .fcs__toggle:focus,
.fcs .fcs__toggle:active {
	background: var(--fcs-main) !important;
	color: var(--fcs-icon) !important;
	border: 0 !important;
}
.fcs .fcs__toggle {
	pointer-events: auto;
	position: relative;
	width: var(--fcs-size);
	height: var(--fcs-size);
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	border-radius: 50%;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
	box-shadow: 0 8px 22px rgba(0, 0, 0, .28);
	transition: transform .25s var(--fcs-spring), box-shadow .2s ease;
	animation: fcs-bob 3.2s ease-in-out infinite;
}
.fcs .fcs__toggle:hover { transform: scale(1.06); box-shadow: 0 12px 26px rgba(0, 0, 0, .34); }
.fcs .fcs__toggle:active { transform: scale(.94); }
.fcs .fcs__toggle:focus-visible,
.fcs .fcs__item:focus-visible { outline: 3px solid #ffd24a; outline-offset: 3px; }

/* Cincin denyut penarik perhatian saat tombol masih tertutup */
.fcs .fcs__toggle::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var(--fcs-main);
	opacity: .45;
	z-index: -1;
	animation: fcs-pulse 2.4s ease-out infinite;
}
.fcs.is-open .fcs__toggle { animation: none; }
.fcs.is-open .fcs__toggle::before { animation: none; opacity: 0; }

.fcs .fcs__toggle span {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	transition: opacity .25s ease, transform .35s var(--fcs-spring);
}
.fcs .fcs__toggle svg {
	width: 28px;
	height: 28px;
	display: block;
	fill: var(--fcs-icon) !important;
}
.fcs .fcs__toggle-close { opacity: 0; transform: rotate(-180deg) scale(.4); }
.fcs.is-open .fcs__toggle-open { opacity: 0; transform: rotate(180deg) scale(.4); }
.fcs.is-open .fcs__toggle-close { opacity: 1; transform: none; }

@keyframes fcs-pulse {
	0%   { transform: scale(1);   opacity: .45; }
	70%  { transform: scale(1.7); opacity: 0; }
	100% { transform: scale(1.7); opacity: 0; }
}
@keyframes fcs-bob {
	0%, 100% { translate: 0 0; }
	50%      { translate: 0 -5px; }
}

/* ---------- Daftar kontak ---------- */
.fcs .fcs__list {
	list-style: none;
	margin: 0;
	padding: 6px calc((var(--fcs-size) - var(--fcs-item)) / 2) 6px 14px;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
	max-height: calc(100vh - var(--fcs-size) - 70px);
	overflow-x: hidden;
	overflow-y: auto;
	scrollbar-width: none;
	visibility: hidden; /* juga mengeluarkan tautan dari urutan tab saat tertutup */
	transition: visibility 0s linear .3s;
}
.fcs .fcs__list::-webkit-scrollbar { display: none; }
.fcs.is-open .fcs__list { visibility: visible; pointer-events: auto; transition-delay: 0s; }

.fcs .fcs__row {
	margin: 0;
	padding: 0;
	list-style: none;
	opacity: 0;
	transition: opacity .18s ease, transform .18s ease;
}
.fcs.is-open .fcs__row {
	opacity: 1;
	transform: none;
	transition: opacity .25s ease, transform .45s var(--fcs-spring);
}
/* Muncul berurutan, mulai dari yang paling dekat dengan tombol */
.fcs.is-open .fcs__row:nth-last-child(2)    { transition-delay: .05s; }
.fcs.is-open .fcs__row:nth-last-child(3)    { transition-delay: .10s; }
.fcs.is-open .fcs__row:nth-last-child(4)    { transition-delay: .15s; }
.fcs.is-open .fcs__row:nth-last-child(5)    { transition-delay: .20s; }
.fcs.is-open .fcs__row:nth-last-child(6)    { transition-delay: .25s; }
.fcs.is-open .fcs__row:nth-last-child(7)    { transition-delay: .30s; }
.fcs.is-open .fcs__row:nth-last-child(n+8)  { transition-delay: .35s; }

/* Variasi animasi (dipilih dari halaman admin) */
.fcs--anim-naik  .fcs__row { transform: translateY(26px) scale(.8); }
.fcs--anim-geser .fcs__row { transform: translateX(70px); }
.fcs--anim-pop   .fcs__row { transform: scale(0); transform-origin: calc(100% - var(--fcs-item) / 2) 50%; }
.fcs--anim-putar .fcs__row { transform: rotate(35deg) translateY(30px); transform-origin: 100% 100%; }

.fcs .fcs__item {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none !important;
	color: #1c2b2d;
}
.fcs .fcs__label {
	padding: 8px 12px;
	border-radius: 8px;
	background: #fff;
	color: #1c2b2d;
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	box-shadow: 0 3px 12px rgba(0, 0, 0, .16);
	transition: transform .2s ease;
}
.fcs .fcs__icon {
	flex: none;
	width: var(--fcs-item);
	height: var(--fcs-item);
	border-radius: 50%;
	display: grid;
	place-items: center;
	color: #fff;
	background: #555;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .22);
	transition: transform .3s var(--fcs-spring);
}
.fcs .fcs__item:hover .fcs__icon { transform: scale(1.14) rotate(-8deg); }
.fcs .fcs__item:hover .fcs__label { transform: translateX(-4px); }
.fcs .fcs__icon svg { width: 22px; height: 22px; display: block; fill: #fff; }

/* Warna resmi tiap platform */
.fcs .fcs__item--wa .fcs__icon        { background: #25d366; }
.fcs .fcs__item--facebook .fcs__icon  { background: #1877f2; }
.fcs .fcs__item--tiktok .fcs__icon    { background: #000; }
.fcs .fcs__item--x .fcs__icon         { background: #000; }
.fcs .fcs__item--instagram .fcs__icon {
	background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
}

@media (max-width: 480px) {
	.fcs { --fcs-size: 54px; --fcs-item: 44px; right: calc(14px + env(safe-area-inset-right, 0px)); bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) {
	.fcs .fcs__toggle, .fcs .fcs__toggle::before { animation: none !important; }
	.fcs .fcs__toggle, .fcs .fcs__toggle span, .fcs .fcs__row, .fcs .fcs__icon, .fcs .fcs__label, .fcs .fcs__list { transition: none !important; }
	.fcs .fcs__row { transform: none !important; }
}
@media print { .fcs { display: none !important; } }