/* Floating Social Chat — Frontend styles
 * Scoped entirely under .fscb-widget to avoid theme conflicts.
 * Uses CSS custom properties populated per-request from admin settings
 * (see public/class-public.php render_inline_styles()).
 */

.fscb-widget {
	--fscb-button-size: 54px;
	--fscb-icon-size: 24px;
	--fscb-radius: 50%;
	--fscb-spacing: 14px;
	--fscb-trigger-color: #25D366;
	--fscb-trigger-hover: #1DA851;
	--fscb-btn-bg: #ffffff;
	--fscb-btn-hover: #f2f2f2;
	--fscb-icon-color: #333333;
	--fscb-label-bg: #333333;
	--fscb-label-color: #ffffff;
	--fscb-bottom-offset: 30px;
	--fscb-side-offset: 20px;

	position: fixed;
	bottom: calc(var(--fscb-bottom-offset) + env(safe-area-inset-bottom, 0px));
	z-index: 999999;
	display: flex;
	flex-direction: column;
	align-items: center;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	box-sizing: border-box;
}

.fscb-widget * {
	box-sizing: border-box;
}

.fscb-widget.fscb-pos-right {
	right: calc(var(--fscb-side-offset) + env(safe-area-inset-right, 0px));
	align-items: flex-end;
}

.fscb-widget.fscb-pos-left {
	left: calc(var(--fscb-side-offset) + env(safe-area-inset-left, 0px));
	align-items: flex-start;
}

/* --- Trigger button --- */

.fscb-trigger {
	position: relative;
	width: var(--fscb-button-size);
	height: var(--fscb-button-size);
	border: 0;
	border-radius: var(--fscb-radius);
	background: var(--fscb-trigger-color);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
	padding: 0;
	transition: background-color 0.2s ease, transform 0.15s ease;
}

.fscb-trigger:hover,
.fscb-trigger:focus-visible {
	background: var(--fscb-trigger-hover);
	transform: translateY(-2px);
}

.fscb-trigger:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.fscb-trigger-icon {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--fscb-icon-size);
	height: var(--fscb-icon-size);
	transition: opacity 0.15s ease, transform 0.15s ease;
}

.fscb-trigger-icon svg {
	width: 100%;
	height: 100%;
	fill: currentColor;
}

.fscb-icon-close {
	opacity: 0;
	transform: scale(0.6) rotate(-45deg);
}

.fscb-icon-open {
	opacity: 1;
	transform: scale(1) rotate(0deg);
}

.fscb-widget.fscb-open .fscb-icon-open {
	opacity: 0;
	transform: scale(0.6) rotate(45deg);
}

.fscb-widget.fscb-open .fscb-icon-close {
	opacity: 1;
	transform: scale(1) rotate(0deg);
}

/* --- Menu --- */

.fscb-menu {
	margin-bottom: var(--fscb-spacing);
}

.fscb-menu[hidden] {
	display: none;
}

.fscb-menu-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.fscb-pos-right .fscb-menu-list {
	align-items: flex-end;
}

.fscb-pos-left .fscb-menu-list {
	align-items: flex-start;
}

.fscb-menu-item {
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 0.18s ease, transform 0.18s ease;
}

.fscb-widget.fscb-open .fscb-menu-item {
	opacity: 1;
	transform: translateY(0);
}

.fscb-menu-link {
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: inherit;
}

.fscb-pos-left .fscb-menu-link {
	flex-direction: row;
}

.fscb-pos-right .fscb-menu-link {
	flex-direction: row-reverse;
}

.fscb-icon {
	flex: 0 0 auto;
	width: var(--fscb-button-size);
	height: var(--fscb-button-size);
	border-radius: var(--fscb-radius);
	background: var(--fscb-btn-bg);
	color: var(--fscb-icon-color);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
	transition: background-color 0.15s ease, transform 0.15s ease;
}

.fscb-icon svg {
	width: var(--fscb-icon-size);
	height: var(--fscb-icon-size);
	fill: currentColor;
}

.fscb-menu-link:hover .fscb-icon,
.fscb-menu-link:focus-visible .fscb-icon {
	background: var(--fscb-btn-hover);
	transform: scale(1.06);
}

.fscb-menu-link:focus-visible {
	outline: 2px solid var(--fscb-trigger-color);
	outline-offset: 2px;
	border-radius: var(--fscb-radius);
}

.fscb-label {
	background: var(--fscb-label-bg);
	color: var(--fscb-label-color);
	font-size: 13px;
	line-height: 1.3;
	padding: 6px 10px;
	border-radius: 4px;
	white-space: nowrap;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* --- No-trigger ("static") mode: every icon is always visible and
   independently clickable, with no expand/collapse state. --- */

.fscb-widget.fscb-static .fscb-menu-item {
	opacity: 1;
	transform: none;
}

.fscb-widget.fscb-static .fscb-menu {
	margin-bottom: 0;
}

/* --- Brand colors: each platform's icon uses its own recognizable
   color instead of the uniform Button Background/Icon Color settings.
   Enabled via Appearance → Icon Color → "Brand colors". --- */

.fscb-widget.fscb-brand-colors .fscb-icon-whatsapp  { background: #25D366; color: #fff; }
.fscb-widget.fscb-brand-colors .fscb-icon-telegram  { background: #229ED9; color: #fff; }
.fscb-widget.fscb-brand-colors .fscb-icon-messenger { background: #0084FF; color: #fff; }
.fscb-widget.fscb-brand-colors .fscb-icon-facebook  { background: #1877F2; color: #fff; }
.fscb-widget.fscb-brand-colors .fscb-icon-instagram {
	background: linear-gradient(45deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5);
	color: #fff;
}
.fscb-widget.fscb-brand-colors .fscb-icon-tiktok  { background: #000000; color: #fff; }
.fscb-widget.fscb-brand-colors .fscb-icon-twitter { background: #000000; color: #fff; }
.fscb-widget.fscb-brand-colors .fscb-icon-youtube { background: #FF0000; color: #fff; }
.fscb-widget.fscb-brand-colors .fscb-icon-email   { background: #6B7280; color: #fff; }
.fscb-widget.fscb-brand-colors .fscb-icon-phone   { background: #22C55E; color: #fff; }
.fscb-widget.fscb-brand-colors .fscb-icon-custom  { background: #555555; color: #fff; }

/* --- Animations --- */

.fscb-anim-fade .fscb-menu-item {
	transition-property: opacity;
}

.fscb-anim-scale .fscb-menu-item {
	transform: scale(0.7);
}

.fscb-anim-scale.fscb-open .fscb-menu-item {
	transform: scale(1);
}

.fscb-anim-slide .fscb-menu-item {
	transform: translateY(16px);
}

.fscb-anim-slide.fscb-open .fscb-menu-item {
	transform: translateY(0);
}

/* Stagger the menu items slightly for a nicer opening feel. */
.fscb-widget.fscb-open .fscb-menu-item:nth-child(1) { transition-delay: 0.02s; }
.fscb-widget.fscb-open .fscb-menu-item:nth-child(2) { transition-delay: 0.05s; }
.fscb-widget.fscb-open .fscb-menu-item:nth-child(3) { transition-delay: 0.08s; }
.fscb-widget.fscb-open .fscb-menu-item:nth-child(4) { transition-delay: 0.11s; }
.fscb-widget.fscb-open .fscb-menu-item:nth-child(5) { transition-delay: 0.14s; }
.fscb-widget.fscb-open .fscb-menu-item:nth-child(6) { transition-delay: 0.17s; }

/* --- Responsive / mobile --- */

@media (max-width: 480px) {
	.fscb-widget {
		--fscb-button-size: min(var(--fscb-button-size), 48px);
	}

	.fscb-label {
		font-size: 12px;
		max-width: 46vw;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}

@media (prefers-reduced-motion: reduce) {
	.fscb-widget * {
		transition: none !important;
	}
}