/* Floating Contact Widget - frontend styles
 * Dynamic values (position offsets, colors, font sizes, per-item hover tint)
 * are injected via wp_add_inline_style() as CSS custom properties / small rules.
 */

#fcw-widget{
	position:fixed;
	z-index:999999;
	font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
	right:var(--fcw-side,24px);
	bottom:var(--fcw-bottom,24px);
}
#fcw-widget.fcw-pos-left{
	left:var(--fcw-side,24px);
	right:auto;
}

#fcw-card{
	position:relative;
	width:64px;
	height:64px;
}

/* ===== Main round button (always visible, stays put) ===== */
.fcw-main-btn{
	position:relative;
	width:64px; height:64px; border-radius:50%;
	background:linear-gradient(145deg, var(--fcw-bg-start,#2fd66b), var(--fcw-bg-end,#1da851));
	display:flex; align-items:center; justify-content:center;
	box-shadow:0 10px 30px rgba(22,26,35,.18);
	cursor:pointer;
	border:none;
	padding:0;
	z-index:2;
}

.fcw-icon-slide{
	position:relative; width:48px; height:48px; border-radius:50%;
	background:#fff; display:flex; align-items:center; justify-content:center;
	overflow:hidden; box-shadow:0 2px 6px rgba(0,0,0,.15);
}
.fcw-icon-slide img{
	position:absolute; width:34px; height:34px; object-fit:contain;
	transition:transform .4s cubic-bezier(.4,0,.2,1), opacity .35s ease;
}
.fcw-icon-slide img.enter{ transform:translateX(0); opacity:1; }
.fcw-icon-slide img.leave{ transform:translateX(56px); opacity:0; }
.fcw-icon-slide img.incoming{ transform:translateX(-56px); opacity:0; }
#fcw-card.open .fcw-icon-slide{ opacity:0; transform:scale(.5); }

.fcw-close-x{
	position:absolute; inset:0;
	display:flex; align-items:center; justify-content:center;
	opacity:0; transform:scale(.5);
	pointer-events:none;
}
.fcw-close-x svg{ width:26px; height:26px; }
#fcw-card.open .fcw-close-x{ opacity:1; transform:scale(1); pointer-events:auto; }
.fcw-icon-slide, .fcw-close-x{ transition:opacity .25s ease, transform .25s ease; }

.fcw-pulse{
	position:absolute; inset:0; border-radius:50%;
	border:2px solid var(--fcw-pulse-color,#ffffff);
	animation:fcwPulse 2.4s ease-out infinite;
	pointer-events:none;
	z-index:1;
}
#fcw-card.open .fcw-pulse{ display:none; }
@keyframes fcwPulse{ 0%{transform:scale(1);opacity:.8;} 100%{transform:scale(1.6);opacity:0;} }

/* ===== Contact list card, floats ABOVE the main button ===== */
.fcw-list{
	position:absolute;
	bottom:76px;
	right:0;
	width:220px;
	max-height:calc(100vh - 160px);
	background:#fff;
	border-radius:18px;
	box-shadow:0 16px 40px rgba(22,26,35,.22);
	padding:8px;
	display:flex; flex-direction:column; gap:4px;
	overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch;
	opacity:0;
	transform:translateY(12px);
	pointer-events:none;
	transition:opacity .22s ease, transform .22s ease;
}
.fcw-list::-webkit-scrollbar{ width:5px; }
.fcw-list::-webkit-scrollbar-thumb{ background:#dcdfe8; border-radius:10px; }
#fcw-widget.fcw-pos-left .fcw-list{ right:auto; left:0; }
#fcw-card.open ~ .fcw-list,
#fcw-card.open + .fcw-list{
	opacity:1;
	transform:translateY(0);
	pointer-events:auto;
}

.fcw-option{
	display:flex; align-items:center; gap:12px; padding:9px 10px; border-radius:12px;
	text-decoration:none; color:#161a23;
	font-size:var(--fcw-label-fs,13.5px);
	font-weight:var(--fcw-label-fw,600);
	transition:background .2s ease;
}

.fcw-icon{
	position:relative; width:36px; height:36px; border-radius:10px;
	display:flex; align-items:center; justify-content:center; flex-shrink:0;
	background:#f4f5f8; border:1px solid #eceef3;
}
.fcw-icon img{ width:20px; height:20px; object-fit:contain; }
.fcw-sub{ display:block; font-size:11px; font-weight:500; color:#9096ab; margin-top:1px; }

@media (max-width:480px){
	#fcw-widget{
		right:var(--fcw-side-m,16px);
		bottom:var(--fcw-bottom-m,16px);
	}
	#fcw-widget.fcw-pos-left{
		left:var(--fcw-side-m,16px);
		right:auto;
	}
	.fcw-list{ width:calc(100vw - 32px); max-width:260px; }
}