/**
 * WhatSender Pro — Zoho SalesIQ float widget (creative redesign).
 *
 * @package WhatSender_Pro
 */

@keyframes wsp-siq-pulse {
	0%, 100% { transform: scale(1); opacity: 0.55; }
	50% { transform: scale(1.18); opacity: 0; }
}

@keyframes wsp-siq-slide-in {
	from { opacity: 0; transform: translateX(14px) scale(0.96); }
	to { opacity: 1; transform: translateX(0) scale(1); }
}

[data-id="zsalesiq"]:not(.wsp-siq-ready),
#zsiqwidget:not(.wsp-siq-ready) {
	opacity: 0 !important;
	pointer-events: none !important;
}

[data-id="zsalesiq"].wsp-siq-ready,
#zsiqwidget.wsp-siq-ready {
	opacity: 1 !important;
	pointer-events: auto !important;
	transition: opacity 0.35s ease !important;
}

#zsiqwidget,
.zsiq-float,
#zsiq_float {
	position: fixed !important;
	right: 20px !important;
	bottom: 88px !important;
	left: auto !important;
	top: auto !important;
	z-index: 99998 !important;
	filter: drop-shadow(0 20px 50px rgba(17, 17, 17, 0.18));
}

#zsiq_float.zsiq-float,
#zsiq_float.zsiq_cnt,
#zsiq_float.zsiq-flexM {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	justify-content: flex-end !important;
	gap: 10px !important;
	width: auto !important;
	height: auto !important;
	padding: 0 !important;
	background: transparent !important;
	border-radius: 0 !important;
	cursor: default !important;
	overflow: visible !important;
	font-family: var(--wsp-font, "Figtree", system-ui, sans-serif) !important;
	animation: wsp-siq-slide-in 0.55s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

#zsiq_float .seasonal-float-img:empty {
	display: none !important;
}

/* ── Message card ── */
.zsiq-float-tooltip,
#zs-fl-tip {
	position: relative !important;
	right: auto !important;
	left: auto !important;
	top: auto !important;
	bottom: auto !important;
	flex: 0 0 auto !important;
	order: 1 !important;
	margin: 0 !important;
	width: max-content !important;
	max-width: none !important;
	min-width: 0 !important;
	height: auto !important;
	padding: 14px 18px 14px 16px !important;
	background: linear-gradient(145deg, #111 0%, #1c2b1f 55%, #163d2b 100%) !important;
	border: none !important;
	border-radius: 18px 6px 18px 18px !important;
	box-shadow:
		5px 5px 0 #b8ff3c,
		0 16px 40px rgba(17, 17, 17, 0.28) !important;
	white-space: nowrap !important;
	overflow: visible !important;
	animation: none !important;
	z-index: 2 !important;
}

.zsiq-float-tooltip::before,
.zsiq-float-tooltip::after,
#zs-fl-tip::before,
#zs-fl-tip::after {
	display: none !important;
	content: none !important;
}

.zsiq-float-tooltip .zsiq-clr3,
.zsiq-float-tooltip .zsiq-clr6,
.zsiq-float-tooltip .zsiq-elips,
.zsiq-float-tooltip .zsiq-tultip-desc,
#zs-fl-tip .zsiq-clr3,
#zs-fl-tip .zsiq-clr6,
#zs-fl-tip .zsiq-elips,
#zs-fl-tip .zsiq-tultip-desc {
	display: block !important;
	overflow: visible !important;
	text-overflow: unset !important;
	white-space: nowrap !important;
	max-width: none !important;
	width: auto !important;
}

.zsiq-float-tooltip .zsiq-clr3,
#zs-fl-tip .zsiq-clr3 {
	font-family: var(--wsp-display, "Unbounded", system-ui, sans-serif) !important;
	font-weight: 600 !important;
	font-size: 0.82rem !important;
	line-height: 1.3 !important;
	letter-spacing: -0.02em !important;
	color: #fff !important;
	margin: 0 !important;
	padding: 0 !important;
}

.zsiq-float-tooltip .zsiq-clr6,
#zs-fl-tip .zsiq-clr6 {
	font-family: var(--wsp-font, "Figtree", system-ui, sans-serif) !important;
	font-size: 0.76rem !important;
	line-height: 1.35 !important;
	color: #b8ff3c !important;
	font-weight: 600 !important;
	margin: 5px 0 0 !important;
	padding: 0 0 0 14px !important;
	position: relative !important;
}

.zsiq-float-tooltip .zsiq-clr6::before,
#zs-fl-tip .zsiq-clr6::before {
	content: "" !important;
	position: absolute !important;
	left: 0 !important;
	top: 50% !important;
	width: 8px !important;
	height: 8px !important;
	margin-top: -4px !important;
	background: #25d366 !important;
	border-radius: 50% !important;
	box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.35) !important;
	animation: wsp-siq-pulse 2s ease infinite !important;
}

/* ── Close button ── */
.siqico-close.zsiq-tultip-close,
#zs-tip-close {
	position: absolute !important;
	top: -9px !important;
	right: -9px !important;
	left: auto !important;
	width: 24px !important;
	height: 24px !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: #b8ff3c !important;
	border: 2px solid #111 !important;
	border-radius: 50% !important;
	color: #111 !important;
	font-size: 0 !important;
	line-height: 1 !important;
	opacity: 1 !important;
	visibility: visible !important;
	z-index: 8 !important;
	cursor: pointer !important;
	box-shadow: 2px 2px 0 #111 !important;
	transition: transform 0.2s ease !important;
}

.siqico-close.zsiq-tultip-close:hover,
#zs-tip-close:hover {
	transform: scale(1.08) !important;
}

.siqico-close.zsiq-tultip-close::before,
#zs-tip-close.siqico-close::before {
	content: "×" !important;
	font-family: Arial, Helvetica, sans-serif !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	display: block !important;
}

/* ── Avatar ── */
.zs-fl-logo,
#zs_fl_logo {
	flex: 0 0 56px !important;
	order: 2 !important;
	margin: 0 !important;
	display: block !important;
	width: 56px !important;
	height: 56px !important;
	min-width: 56px !important;
	min-height: 56px !important;
	border-radius: 50% !important;
	border: 3px solid #111 !important;
	outline: none !important;
	object-fit: cover !important;
	background: #fff !important;
	box-shadow:
		0 0 0 3px #b8ff3c,
		4px 4px 0 #111,
		0 12px 28px rgba(17, 17, 17, 0.22) !important;
	z-index: 3 !important;
	position: relative !important;
	transition: transform 0.25s ease, box-shadow 0.25s ease !important;
	animation: wsp-siq-avatar-glow 2.4s ease infinite !important;
}

@keyframes wsp-siq-avatar-glow {
	0%, 100% { box-shadow: 0 0 0 3px #b8ff3c, 4px 4px 0 #111, 0 0 0 6px rgba(37, 211, 102, 0.35), 0 12px 28px rgba(17, 17, 17, 0.22); }
	50% { box-shadow: 0 0 0 3px #b8ff3c, 4px 4px 0 #111, 0 0 0 12px rgba(37, 211, 102, 0), 0 12px 28px rgba(17, 17, 17, 0.22); }
}

.zs-fl-logo:hover,
#zs_fl_logo:hover {
	transform: scale(1.05) !important;
}

/* Pulse ring — img cannot use ::after; glow animation above */

/* ── Chat window shell ── */
#zsiq_chat_wrap,
.chat-iframe-wrap {
	overflow: visible !important;
	border: 3px solid var(--wsp-ink, #111) !important;
	border-radius: 24px !important;
	box-shadow: 6px 6px 0 var(--wsp-lime, #b8ff3c), 0 24px 60px rgba(17, 17, 17, 0.22) !important;
	background: transparent !important;
	bottom: 156px !important;
	max-height: min(640px, calc(100vh - 200px)) !important;
	position: fixed !important;
}

#siq_chatwindow,
.chat-iframe-wrap iframe {
	border: none !important;
	border-radius: 20px !important;
	box-shadow: none !important;
	display: block !important;
	width: 100% !important;
	height: 100% !important;
}

/* Custom close — sits above iframe, never clipped */
#wsp-siq-chat-close {
	position: absolute !important;
	top: 10px !important;
	right: 10px !important;
	z-index: 2147483647 !important;
	width: 36px !important;
	height: 36px !important;
	margin: 0 !important;
	padding: 0 !important;
	display: none !important;
	align-items: center !important;
	justify-content: center !important;
	background: var(--wsp-lime, #b8ff3c) !important;
	border: 2px solid var(--wsp-ink, #111) !important;
	border-radius: 50% !important;
	color: var(--wsp-ink, #111) !important;
	font-family: Arial, Helvetica, sans-serif !important;
	font-size: 22px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	cursor: pointer !important;
	box-shadow: 2px 2px 0 var(--wsp-ink, #111) !important;
	transition: transform 0.2s ease !important;
	pointer-events: none !important;
}

#wsp-siq-chat-close:hover {
	transform: scale(1.08) !important;
}

#zsiq_chat_wrap.chat-iframe-open #wsp-siq-chat-close,
.chat-iframe-wrap.chat-iframe-open #wsp-siq-chat-close {
	display: flex !important;
	pointer-events: auto !important;
}

/* ── Float close when chat open ── */
#zsiq_float.zsiq-toggle {
	bottom: 88px !important;
	right: 20px !important;
	z-index: 99999 !important;
	width: 56px !important;
	height: 56px !important;
	padding: 0 !important;
	background: #111 !important;
	border: 3px solid #111 !important;
	box-shadow:
		0 0 0 3px #b8ff3c,
		4px 4px 0 #25d366 !important;
	border-radius: 50% !important;
	overflow: visible !important;
}

#zs_fl_close.siqico-close,
.zsiq-toggle .zsiq-close-icn {
	opacity: 1 !important;
	visibility: visible !important;
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	transform: none !important;
	background: transparent !important;
}

#zs_fl_close.siqico-close::before,
.zsiq-toggle .zsiq-close-icn::before {
	content: "×" !important;
	font-family: Arial, Helvetica, sans-serif !important;
	font-size: 24px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	color: #b8ff3c !important;
	display: block !important;
}

@media (max-width: 640px) {
	#zsiqwidget,
	.zsiq-float,
	#zsiq_float {
		bottom: 76px !important;
		right: 14px !important;
	}

	.zsiq-float-tooltip,
	#zs-fl-tip {
		padding: 12px 14px !important;
		border-radius: 16px 6px 16px 16px !important;
		box-shadow: 4px 4px 0 #b8ff3c, 0 12px 28px rgba(17, 17, 17, 0.2) !important;
	}

	.zs-fl-logo,
	#zs_fl_logo {
		width: 48px !important;
		height: 48px !important;
		min-width: 48px !important;
		min-height: 48px !important;
		flex-basis: 48px !important;
	}
}