/**
 * WhatsApp Conversion Suite Pro — front-end widget styles.
 * Mobile-first, theme-driven via CSS custom properties set inline per-instance.
 */

.wcsp-widget {
	--wcsp-primary: #25d366;
	--wcsp-bg: #25d366;
	--wcsp-size: 60px;
	--wcsp-ox: 24px;
	--wcsp-oy: 24px;
	position: fixed;
	z-index: 99999;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Positions */
.wcsp-pos-bottom-right { right: var(--wcsp-ox); bottom: var(--wcsp-oy); }
.wcsp-pos-bottom-left  { left: var(--wcsp-ox);  bottom: var(--wcsp-oy); }
.wcsp-pos-top-right    { right: var(--wcsp-ox); top: var(--wcsp-oy); }
.wcsp-pos-top-left     { left: var(--wcsp-ox);  top: var(--wcsp-oy); }

/* Launcher button */
.wcsp-launcher {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: var(--wcsp-size);
	height: var(--wcsp-size);
	padding: 0;
	border: 0;
	cursor: pointer;
	color: #fff;
	background: var(--wcsp-bg);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.wcsp-launcher:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.24); }
.wcsp-launcher:focus-visible { outline: 3px solid var(--wcsp-primary); outline-offset: 3px; }

.wcsp-cta { font-weight: 600; font-size: 15px; white-space: nowrap; padding-right: 6px; }

/* Shapes */
.wcsp-shape-circle  .wcsp-launcher { border-radius: 50%; }
.wcsp-shape-square  .wcsp-launcher { border-radius: 8px; }
.wcsp-shape-rounded .wcsp-launcher { width: auto; padding: 0 22px; border-radius: 999px; }
.wcsp-shape-card    .wcsp-launcher { width: auto; padding: 14px 22px; border-radius: 16px; }

.wcsp-shape-bottom-bar,
.wcsp-shape-sticky-mobile {
	left: 0; right: 0; bottom: 0;
}
.wcsp-shape-bottom-bar .wcsp-launcher,
.wcsp-shape-sticky-mobile .wcsp-launcher {
	width: 100%; height: 54px; border-radius: 0;
}

/* Glassmorphism + neon modifiers */
.wcsp-glass .wcsp-launcher {
	background: rgba(255, 255, 255, 0.18);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(255, 255, 255, 0.35);
	color: var(--wcsp-primary);
}
.wcsp-neon .wcsp-launcher {
	box-shadow: 0 0 12px var(--wcsp-primary), 0 0 28px var(--wcsp-primary);
}

/* Slide-up panel */
.wcsp-panel {
	position: absolute;
	bottom: calc(var(--wcsp-size) + 16px);
	right: 0;
	width: min(340px, calc(100vw - 32px));
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.25);
	overflow: hidden;
	transform-origin: bottom right;
	animation: wcsp-pop 0.22s ease;
}
.wcsp-pos-bottom-left .wcsp-panel,
.wcsp-pos-top-left .wcsp-panel { right: auto; left: 0; transform-origin: bottom left; }

.wcsp-panel-head {
	display: flex; align-items: center; justify-content: space-between;
	padding: 14px 16px; color: #fff; background: var(--wcsp-bg);
}
.wcsp-panel-title { font-weight: 700; font-size: 15px; }
.wcsp-close { background: none; border: 0; color: #fff; font-size: 24px; line-height: 1; cursor: pointer; }

.wcsp-greeting { margin: 14px 16px; font-size: 14px; color: #333; }
.wcsp-agents { padding: 6px 8px 10px; max-height: 320px; overflow-y: auto; }

.wcsp-agent {
	display: flex; align-items: center; gap: 12px;
	padding: 10px 10px; border-radius: 12px;
	text-decoration: none; color: #111;
	transition: background 0.15s ease;
}
.wcsp-agent:hover { background: #f3f5f7; }
.wcsp-agent-avatar {
	width: 44px; height: 44px; border-radius: 50%;
	object-fit: cover; flex: 0 0 44px;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--wcsp-bg); color: #fff; font-weight: 700;
}
.wcsp-agent-meta { display: flex; flex-direction: column; flex: 1; }
.wcsp-agent-name { font-weight: 600; font-size: 14px; }
.wcsp-agent-role { font-size: 12px; color: #6b7280; }
.wcsp-agent-go { color: #9ca3af; font-size: 22px; }
.wcsp-empty, .wcsp-consent { padding: 10px 16px; font-size: 12px; color: #6b7280; }

/* Animations on the launcher */
@keyframes wcsp-pop { from { opacity: 0; transform: scale(0.92) translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes wcsp-bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes wcsp-pulse  { 0%{box-shadow:0 0 0 0 rgba(37,211,102,.6)} 70%{box-shadow:0 0 0 16px rgba(37,211,102,0)} 100%{box-shadow:0 0 0 0 rgba(37,211,102,0)} }
@keyframes wcsp-shake  { 0%,100%{transform:rotate(0)} 25%{transform:rotate(-8deg)} 75%{transform:rotate(8deg)} }
@keyframes wcsp-glow   { 0%,100%{filter:drop-shadow(0 0 2px var(--wcsp-primary))} 50%{filter:drop-shadow(0 0 12px var(--wcsp-primary))} }
@keyframes wcsp-zoom   { 0%,100%{transform:scale(1)} 50%{transform:scale(1.08)} }
@keyframes wcsp-slide  { 0%{transform:translateX(0)} 50%{transform:translateX(-6px)} 100%{transform:translateX(0)} }

.wcsp-anim-bounce .wcsp-launcher { animation: wcsp-bounce 1.8s ease-in-out infinite; }
.wcsp-anim-pulse  .wcsp-launcher { animation: wcsp-pulse 2s infinite; }
.wcsp-anim-shake  .wcsp-launcher { animation: wcsp-shake 2.4s ease-in-out infinite; }
.wcsp-anim-glow   .wcsp-launcher { animation: wcsp-glow 2s ease-in-out infinite; }
.wcsp-anim-zoom   .wcsp-launcher { animation: wcsp-zoom 2s ease-in-out infinite; }
.wcsp-anim-slide  .wcsp-launcher { animation: wcsp-slide 2s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
	.wcsp-launcher { animation: none !important; }
}

/* Presence indicators */
.wcsp-presence { width: 10px; height: 10px; border-radius: 50%; margin-left: auto; margin-right: 10px; flex: 0 0 10px; }
.wcsp-presence-open { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.25); }
.wcsp-presence-away { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,.25); }
.wcsp-presence-holiday { background: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,.25); }

.wcsp-agent { position: relative; }
.wcsp-agent-presence { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px; }
.wcsp-agent-presence.is-online { background: #22c55e; }
.wcsp-agent-presence.is-away { background: #cbd5e1; }
.wcsp-agent.is-away { opacity: .72; }

/* Quick replies */
.wcsp-quick-replies { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 16px 12px; }
.wcsp-chip-reply {
	border: 1px solid var(--wcsp-primary); background: transparent; color: var(--wcsp-primary);
	padding: 7px 12px; border-radius: 999px; font-size: 13px; cursor: pointer; transition: background .15s, color .15s;
}
.wcsp-chip-reply:hover { background: var(--wcsp-primary); color: #fff; }

/* FAQ */
.wcsp-faq { padding: 4px 16px 14px; border-top: 1px solid #eef0f2; }
.wcsp-faq-title { display: block; font-size: 12px; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: .04em; margin: 10px 0 6px; }
.wcsp-faq-item { padding: 6px 0; border-bottom: 1px solid #f1f3f5; }
.wcsp-faq-item summary { cursor: pointer; font-size: 13px; font-weight: 600; color: #111; }
.wcsp-faq-item p { margin: 8px 0 2px; font-size: 13px; color: #4b5563; }

/* Display mode: carousel (horizontal scroll of agents) */
.wcsp-mode-carousel .wcsp-agents { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; }
.wcsp-mode-carousel .wcsp-agent { flex: 0 0 78%; scroll-snap-align: start; flex-direction: column; text-align: center; }
.wcsp-mode-carousel .wcsp-agent-avatar { width: 64px; height: 64px; flex-basis: 64px; }
.wcsp-mode-carousel .wcsp-agent-meta { align-items: center; }
.wcsp-mode-carousel .wcsp-agent-presence { position: absolute; top: 10px; right: 10px; }

/* Display mode: team grid */
.wcsp-mode-team .wcsp-agents { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.wcsp-mode-team .wcsp-agent { flex-direction: column; text-align: center; }
.wcsp-mode-team .wcsp-agent-meta { align-items: center; }

/* Display mode: single contact card */
.wcsp-mode-contact .wcsp-agent:not(:first-child) { display: none; }
.wcsp-mode-contact .wcsp-agent { flex-direction: column; text-align: center; padding: 18px; }
.wcsp-mode-contact .wcsp-agent-avatar { width: 72px; height: 72px; flex-basis: 72px; }