/* Vivid WhatsApp — frontend widget */
.vivid-wa { position: fixed; bottom: var(--vivid-wa-bottom, 22px); z-index: 99998; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
.vivid-wa--right { right: 22px; }
.vivid-wa--left  { left: 22px; }
.vivid-wa--inline { position: static; }
/* Separate bottom spacing on phones (Button Bottom Margin — Mobile). */
@media (max-width: 600px) {
	.vivid-wa:not(.vivid-wa--inline):not(.vivid-wa--sidebar) { bottom: var(--vivid-wa-bottom-m, var(--vivid-wa-bottom, 22px)); }
}

.vivid-wa__toggle {
	display: inline-flex; align-items: center; gap: 9px;
	/* !important so aggressive theme `button` styles (WooCommerce/Woodmart etc.)
	   can't turn our launcher white or restyle its border. */
	background: var(--vivid-wa-color, #25D366) !important; color: #fff !important;
	border: 0 !important; border-radius: 999px !important;
	box-shadow: 0 6px 20px rgba(0,0,0,.22) !important; text-shadow: none !important;
	-webkit-appearance: none; appearance: none;
	padding: 13px 18px; cursor: pointer; min-width: 0; min-height: 0;
	font-size: 15px; font-weight: 600; line-height: 1; letter-spacing: normal;
	transition: transform .12s ease, box-shadow .12s ease;
}
.vivid-wa__toggle:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,.28) !important; }
.vivid-wa__toggle svg { fill: currentColor; color: #fff; }
.vivid-wa--button .vivid-wa__label { display: inline; }
.vivid-wa--minimal .vivid-wa__toggle { padding: 14px; }
.vivid-wa--minimal .vivid-wa__label { display: none; }

/* ── Round icon launcher (just the WhatsApp icon, gently pulsing) ──────────── */
.vivid-wa--icon .vivid-wa__toggle {
	width: 60px; height: 60px; padding: 0; border-radius: 50%;
	justify-content: center; position: relative;
}
.vivid-wa--icon .vivid-wa__label { display: none; }
.vivid-wa--icon .vivid-wa__toggle svg { width: 30px; height: 30px; }
/* Expanding ring behind the button — the "lightly pulsing" effect. */
.vivid-wa--icon .vivid-wa__toggle::after {
	content: ""; position: absolute; inset: 0; border-radius: 50%;
	background: var(--vivid-wa-color, #25D366); z-index: -1;
	animation: vividWaPulse 2.2s cubic-bezier(.66,0,0,1) infinite;
}
.vivid-wa.is-active.vivid-wa--icon .vivid-wa__toggle::after { animation: none; } /* calm once open */
@keyframes vividWaPulse {
	0%   { transform: scale(1);   opacity: .55; }
	70%  { transform: scale(1.7); opacity: 0; }
	100% { transform: scale(1.7); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.vivid-wa--icon .vivid-wa__toggle::after { animation: none; }
}

.vivid-wa__panel {
	position: absolute; bottom: 68px; width: 320px; max-width: 86vw;
	background: #fff; color: #111; border-radius: 16px; overflow: hidden;
	box-shadow: 0 18px 50px rgba(0,0,0,.25); opacity: 0; visibility: hidden;
	transform: translateY(10px); transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.vivid-wa--right .vivid-wa__panel { right: 0; }
.vivid-wa--left  .vivid-wa__panel { left: 0; }
.vivid-wa.is-active .vivid-wa__panel { opacity: 1; visibility: visible; transform: none; }
.vivid-wa--inline .vivid-wa__panel { position: static; opacity: 1; visibility: visible; transform: none; margin-top: 12px; }

.vivid-wa__header { background: var(--vivid-wa-color, #25D366); color: #fff; padding: 16px; display: flex; flex-direction: column; gap: 2px; position: relative; }
.vivid-wa__close {
	position: absolute !important; top: 10px; right: 12px; left: auto;
	background: rgba(255,255,255,.18) !important; color: #fff !important;
	border: 0 !important; box-shadow: none !important; text-shadow: none !important;
	-webkit-appearance: none; appearance: none;
	width: 28px !important; height: 28px !important; min-width: 0; padding: 0 !important;
	border-radius: 50% !important; cursor: pointer; margin: 0;
	font-size: 18px; line-height: 1;
	display: none; align-items: center; justify-content: center;
}
/* Only the always-open layouts get a close button; the floating launcher closes
   by tapping itself, so keep its close hidden even if the theme forces buttons visible. */
.vivid-wa--button .vivid-wa__close,
.vivid-wa--minimal .vivid-wa__close,
.vivid-wa--icon .vivid-wa__close { display: none !important; }
.vivid-wa__close:hover { background: rgba(255,255,255,.3) !important; }
.vivid-wa__status { font-size: 12px; opacity: .92; }
.vivid-wa__status.is-online::before { content: "● "; color: #b9f6ca; }
.vivid-wa__status.is-offline::before { content: "● "; color: #ffcdd2; }
.vivid-wa__greeting { padding: 14px 16px; background: #f4f6f8; font-size: 14px; line-height: 1.45; }

.vivid-wa__agents { padding: 8px; display: flex; flex-direction: column; gap: 4px; max-height: 320px; overflow-y: auto; }
.vivid-wa__agent { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; text-decoration: none; color: #111; transition: background .12s; }
.vivid-wa__agent:hover { background: #f0f2f5; }
.vivid-wa__avatar { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex: 0 0 42px; }
.vivid-wa__avatar--fallback { display: grid; place-items: center; background: var(--vivid-wa-color, #25D366); color: #fff; font-weight: 700; font-size: 18px; text-transform: uppercase; }
.vivid-wa__agent-meta { display: flex; flex-direction: column; gap: 1px; }
.vivid-wa__agent-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vivid-wa__agent-name { font-weight: 600; font-size: 14px; }
.vivid-wa__agent-dept { font-size: 12px; color: #667; }
.vivid-wa__agent-status { font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.vivid-wa__agent-status::before { content: "●"; font-size: 9px; line-height: 1; }
.vivid-wa__agent-status.is-online { color: #1faa53; }
.vivid-wa__agent-status.is-online::before { color: #25D366; }
.vivid-wa__agent-status.is-offline { color: #9aa0ab; }
.vivid-wa__agent-status.is-offline::before { color: #c4c9d2; }
.vivid-wa__powered { text-align: center; font-size: 11px; color: #99a; padding: 8px; }
.vivid-wa__powered strong { color: #5b5bf6; }

/* ── Pro layout: card ─────────────────────────────────────────
   Always-open card — no toggle button. Floats in the corner, or sits
   in-flow when used inline via the block/shortcode. */
.vivid-wa--card .vivid-wa__toggle { display: none; }
.vivid-wa--card .vivid-wa__panel {
	position: static; opacity: 1; visibility: visible; transform: none;
	width: 340px;
}
.vivid-wa--card.vivid-wa--inline .vivid-wa__panel { margin-top: 0; }
.vivid-wa--card .vivid-wa__close { display: inline-flex !important; }
.vivid-wa--card.is-closed { display: none; }

/* ── Pro layout: popup ────────────────────────────────────────
   Button opens a centered modal with a dimmed backdrop. */
.vivid-wa--popup.is-active::before {
	content: ""; position: fixed; inset: 0;
	background: rgba(10, 14, 20, .5); z-index: 99998;
	animation: vividWaFade .16s ease;
}
.vivid-wa--popup .vivid-wa__panel {
	position: fixed; z-index: 99999;
	left: 50%; top: 50%; bottom: auto; right: auto;
	transform: translate(-50%, -46%);
	width: 380px; max-width: 92vw; max-height: 84vh; overflow-y: auto;
}
.vivid-wa--popup.is-active .vivid-wa__panel { transform: translate(-50%, -50%); }
.vivid-wa--popup .vivid-wa__close { display: inline-flex !important; }
.vivid-wa--popup.vivid-wa--inline .vivid-wa__panel { position: fixed; } /* modal stays modal even inline */
.vivid-wa--popup.vivid-wa--inline:not(.is-active) .vivid-wa__panel { display: none; }

/* ── Pro layout: sidebar ──────────────────────────────────────
   Vertical tab on the screen edge; panel slides in full-height. */
.vivid-wa--sidebar { bottom: auto; top: 50%; transform: translateY(-50%); }
.vivid-wa--sidebar .vivid-wa__toggle {
	border-radius: 12px 12px 0 0; padding: 12px 16px;
	box-shadow: 0 -4px 16px rgba(0,0,0,.18);
}
.vivid-wa--sidebar.vivid-wa--right .vivid-wa__toggle {
	transform: rotate(-90deg); transform-origin: bottom right;
	position: absolute; right: 0; top: 50%;
}
.vivid-wa--sidebar.vivid-wa--left .vivid-wa__toggle {
	transform: rotate(90deg); transform-origin: bottom left;
	position: absolute; left: 0; top: 50%;
}
.vivid-wa--sidebar .vivid-wa__panel {
	position: fixed; top: 0; bottom: 0; width: 340px; max-width: 92vw;
	max-height: none; border-radius: 0; z-index: 99999;
	transition: transform .22s ease, opacity .18s ease, visibility .18s;
	display: flex; flex-direction: column;
}
.vivid-wa--sidebar.vivid-wa--right .vivid-wa__panel { right: 0; left: auto; transform: translateX(100%); }
.vivid-wa--sidebar.vivid-wa--left .vivid-wa__panel { left: 0; right: auto; transform: translateX(-100%); }
.vivid-wa--sidebar.is-active .vivid-wa__panel { transform: translateX(0); }
.vivid-wa--sidebar .vivid-wa__agents { max-height: none; flex: 1; }
.vivid-wa--sidebar .vivid-wa__close { display: inline-flex !important; }
/* Inline/sidebar doesn't make sense in-flow — degrade to a static card. */
.vivid-wa--sidebar.vivid-wa--inline { position: static; transform: none; }
.vivid-wa--sidebar.vivid-wa--inline .vivid-wa__toggle { display: none; }
.vivid-wa--sidebar.vivid-wa--inline .vivid-wa__panel {
	position: static; transform: none; opacity: 1; visibility: visible;
	border-radius: 16px; width: 340px;
}

@keyframes vividWaFade { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-color-scheme: dark) {
	.vivid-wa__panel { background: #1b2030; color: #e8ebf2; }
	.vivid-wa__greeting { background: #232a3b; }
	.vivid-wa__agent { color: #e8ebf2; }
	.vivid-wa__agent:hover { background: #232a3b; }
	.vivid-wa__agent-dept { color: #97a0b5; }
}