/* IMPULSA Multi-Agent Chat Router & Analytics — frontend styles (scoped under .wpfwa-*) */

.wpfwa-wrap{
	position: fixed;
	z-index: 999999;
}

.wpfwa-btn{
	display: inline-flex;
	align-items: center;
	gap: 12px;
	text-decoration: none !important;
	-webkit-tap-highlight-color: transparent;
}

/* CTA sits on the opposite side of the screen edge:
   right position -> CTA to the LEFT of the icon (icon hugs the edge). */
.wpfwa-pos-right .wpfwa-btn{ flex-direction: row-reverse; }
.wpfwa-pos-left  .wpfwa-btn{ flex-direction: row; }

/* ---------- Icon bubble (base) ---------- */
.wpfwa-icon{
	--wpfwa-size: 60px;
	width: var(--wpfwa-size);
	height: var(--wpfwa-size);
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--wpfwa-icon-color);
	box-shadow: 0 8px 22px rgba(0,0,0,.20);
	transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
	position: relative;
}

.wpfwa-icon svg{
	width: 52%;
	height: 52%;
	display: block;
}

.wpfwa-icon svg *{
	fill: #fff;
}

.wpfwa-btn:hover .wpfwa-icon{
	background: var(--wpfwa-hover-color);
	transform: translateY(-2px) scale(1.04);
	box-shadow: 0 12px 28px rgba(0,0,0,.26);
}

.wpfwa-btn:active .wpfwa-icon{
	transform: translateY(0) scale(.98);
}

/* ---------- CTA pill ---------- */
.wpfwa-cta{
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	color: #111;
	background: #fff;
	border-radius: 999px;
	padding: 12px 16px;
	box-shadow: 0 8px 22px rgba(0,0,0,.16);
	white-space: nowrap;
	transition: opacity .18s ease, transform .18s ease;
}

/* CTA modes */
.wpfwa-cta-hidden .wpfwa-cta{ display: none; }
.wpfwa-cta-always .wpfwa-cta{ display: inline-flex; }

.wpfwa-cta-hover .wpfwa-cta{
	display: inline-flex;
	opacity: 0;
	pointer-events: none;
}
.wpfwa-pos-right.wpfwa-cta-hover .wpfwa-cta{ transform: translateX(8px); }
.wpfwa-pos-left.wpfwa-cta-hover  .wpfwa-cta{ transform: translateX(-8px); }

/* Only reveal on devices that support hover */
@media (hover: hover) and (pointer: fine){
	.wpfwa-cta-hover .wpfwa-btn:hover .wpfwa-cta{
		opacity: 1;
		pointer-events: auto;
		transform: translateX(0);
	}
}

/* ================= DESIGN VARIANTS ================= */

/* Variant 1 — Classic solid circle (base, nothing extra). */

/* Variant 2 — Squircle (rounded square). */
.wpfwa-variant-2 .wpfwa-icon{
	border-radius: 30%;
}

/* Variant 3 — Pulsing ring. */
.wpfwa-variant-3 .wpfwa-icon::before{
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: var(--wpfwa-icon-color);
	z-index: -1;
	animation: wpfwa-pulse 2s ease-out infinite;
}
@keyframes wpfwa-pulse{
	0%{ transform: scale(1); opacity: .55; }
	70%{ transform: scale(1.6); opacity: 0; }
	100%{ transform: scale(1.6); opacity: 0; }
}

/* Variant 4 — Gradient + soft glow. */
.wpfwa-variant-4 .wpfwa-icon{
	background: linear-gradient(135deg, var(--wpfwa-icon-color), var(--wpfwa-hover-color));
	box-shadow: 0 10px 26px color-mix(in srgb, var(--wpfwa-icon-color) 45%, transparent);
}
.wpfwa-variant-4 .wpfwa-btn:hover .wpfwa-icon{
	background: linear-gradient(135deg, var(--wpfwa-hover-color), var(--wpfwa-icon-color));
}

/* Variant 5 — Glass / outlined (colored glyph on light bubble). */
.wpfwa-variant-5 .wpfwa-icon{
	background: rgba(255,255,255,.92);
	border: 2px solid var(--wpfwa-icon-color);
	backdrop-filter: blur(4px);
}
.wpfwa-variant-5 .wpfwa-icon svg *{
	fill: var(--wpfwa-icon-color);
}
.wpfwa-variant-5 .wpfwa-btn:hover .wpfwa-icon{
	background: var(--wpfwa-icon-color);
}
.wpfwa-variant-5 .wpfwa-btn:hover .wpfwa-icon svg *{
	fill: #fff;
}

/* ================= DISPLAY RULES (reveal on trigger) ================= */
.wpfwa-pending{
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}
.wpfwa-revealed{
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	animation: wpfwa-pop .25s ease;
}
@keyframes wpfwa-pop{
	from{ transform: translateY(8px) scale(.96); opacity: 0; }
	to{ transform: translateY(0) scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce){
	.wpfwa-revealed,
	.wpfwa-variant-3 .wpfwa-icon::before{ animation: none; }
	.wpfwa-icon, .wpfwa-cta{ transition: none; }
}

/* ================= VISIBILITY BREAKPOINTS ================= */
@media (max-width: 767px){
	.wpfwa-hide-mobile{ display: none !important; }
}
@media (min-width: 768px) and (max-width: 1024px){
	.wpfwa-hide-tablet{ display: none !important; }
}
@media (min-width: 1025px){
	.wpfwa-hide-desktop{ display: none !important; }
}

/* ================= AGENT SELECTOR MODAL ================= */
.wpfwa-selector{
	position: fixed;
	inset: 0;
	z-index: 1000000;
	display: flex;
	align-items: center;
	justify-content: center;
}
.wpfwa-selector[hidden]{ display: none; }

.wpfwa-selector__backdrop{
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,.45);
	cursor: pointer;
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
	animation: wpfwa-fade-in .18s ease;
}

.wpfwa-selector__panel{
	position: relative;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 20px 60px rgba(0,0,0,.25), 0 4px 16px rgba(0,0,0,.1);
	padding: 28px 24px 24px;
	width: 320px;
	max-width: calc(100vw - 32px);
	max-height: calc(100vh - 48px);
	overflow-y: auto;
	animation: wpfwa-slide-up .2s ease;
}

.wpfwa-selector__close{
	position: absolute;
	top: 12px;
	right: 14px;
	background: none;
	border: none;
	font-size: 22px;
	line-height: 1;
	color: #646970;
	cursor: pointer;
	padding: 4px 6px;
	border-radius: 6px;
	transition: background .15s ease, color .15s ease;
}
.wpfwa-selector__close:hover{
	background: #f0f0f1;
	color: #1d2327;
}

.wpfwa-selector__title{
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 15px;
	font-weight: 700;
	color: #1d2327;
	margin: 0 0 16px;
	padding-right: 24px;
}

.wpfwa-selector__list{
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.wpfwa-selector__agent{
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	border-radius: 12px;
	border: 1.5px solid #e2e4e9;
	background: #fff;
	text-decoration: none !important;
	color: #1d2327;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 14px;
	font-weight: 600;
	transition: border-color .15s ease, background .15s ease, box-shadow .15s ease, transform .1s ease;
	cursor: pointer;
}
.wpfwa-selector__agent:hover{
	border-color: #2271b1;
	background: rgba(34,113,177,.05);
	box-shadow: 0 2px 8px rgba(34,113,177,.15);
	transform: translateY(-1px);
	color: #1d2327;
}
.wpfwa-selector__agent:focus{
	outline: 2px solid #2271b1;
	outline-offset: 2px;
}
.wpfwa-selector__agent:active{
	transform: translateY(0);
}

.wpfwa-selector__agent-icon{
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	border-radius: 999px;
	background: rgba(34,113,177,.12);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #2271b1;
}

.wpfwa-selector__agent-name{
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.wpfwa-selector__agent-arrow{
	color: #646970;
	font-size: 16px;
	flex-shrink: 0;
	transition: transform .15s ease, color .15s ease;
}
.wpfwa-selector__agent:hover .wpfwa-selector__agent-arrow{
	transform: translateX(3px);
	color: #2271b1;
}

@keyframes wpfwa-fade-in{
	from{ opacity: 0; }
	to{ opacity: 1; }
}
@keyframes wpfwa-slide-up{
	from{ transform: translateY(16px) scale(.97); opacity: 0; }
	to{ transform: translateY(0) scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce){
	.wpfwa-selector__backdrop,
	.wpfwa-selector__panel{ animation: none; }
	.wpfwa-selector__agent{ transition: none; }
}