/**
 * Swatch Studio — WhatsApp click-to-chat links.
 *
 * Two variants share the `.ss-chat-link` base and the same brand icon
 * (Click to Chat for WhatsApp's "Style 3" — full-color, own green gradient
 * baked in, never recolored via CSS):
 *   .ss-chat-button (+ .ss-chat-left/.ss-chat-right) — the floating footer
 *     button. Fixed position, big icon, label hidden until hover.
 *   .ss-chat-inline — the [swatch_chat] shortcode. Flows with surrounding
 *     content, small icon, label always visible (it's the link text, not a
 *     hover reveal).
 *
 * Both are plain <a href="https://wa.me/...">, no JS needed by default —
 * including the floating button's hover label reveal (pure CSS gap/width
 * transition). chat.js only enhances clicks when a link-mode override
 * (WhatsApp Web / native app) is configured — see Chat::needs_link_mode_script().
 */

.ss-chat-link {
	display: inline-flex;
	align-items: center;
	text-decoration: none !important;
}

.ss-chat-icon {
	flex-shrink: 0;
	object-fit: contain;
	pointer-events: none;
}

/* ── Floating button ─────────────────────────────────────────────────
   A right-docked button (`right: Npx`) grows leftward on hover, so its
   label must appear visually *before* the icon (row-reverse); a left-docked
   one grows rightward, icon-then-label (normal row). `gap` (not margin)
   spaces them, so the same rule works in both directions without a
   left/right swap. */
.ss-chat-button {
	position: fixed !important;
	z-index: 999;
	bottom: var(--ss-chat-offset-bottom, 15px);
	gap: 0;
	transition: gap 150ms ease;
}

.ss-chat-button.ss-chat-right {
	right: var(--ss-chat-offset-side, 15px);
	flex-direction: row-reverse !important;
}

.ss-chat-button.ss-chat-left {
	left: var(--ss-chat-offset-side, 15px);
	flex-direction: row !important;
}

.ss-chat-button:hover,
.ss-chat-button:focus-visible {
	gap: 10px;
}

.ss-chat-button .ss-chat-icon {
	width: var(--ss-chat-size, 56px);
	height: var(--ss-chat-size, 56px);
	filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.28));
	transition: filter 120ms ease;
}

.ss-chat-button:hover .ss-chat-icon,
.ss-chat-button:focus-visible .ss-chat-icon {
	filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.36));
}

/* Hover label — a separate rounded pill (background/text color configurable
   in Settings), matching the reference plugin's CTA text bubble rather than
   recoloring the icon itself. Hidden by default, revealed via max-width. */
.ss-chat-button .ss-chat-label {
	max-width: 0;
	overflow: hidden;
	white-space: nowrap;
	box-sizing: border-box;
	padding: 0;
	border-radius: 10px;
	background: var(--ss-chat-label-bg, #25d366);
	color: var(--ss-chat-label-color, #fff);
	font-size: 14px;
	font-weight: 600;
	line-height: 2.4;
	transition: max-width 180ms ease, padding 180ms ease;
}

.ss-chat-button:hover .ss-chat-label,
.ss-chat-button:focus-visible .ss-chat-label {
	max-width: 240px;
	padding: 0 16px;
}

.ss-chat-button:focus-visible {
	outline: 2px solid #201e1d;
	outline-offset: 2px;
	border-radius: 999px;
}

@media (max-width: 480px) {
	.ss-chat-button {
		bottom: var(--ss-chat-mobile-offset-bottom, 55px);
	}

	.ss-chat-button.ss-chat-right {
		right: var(--ss-chat-mobile-offset-side, 10px);
	}

	.ss-chat-button.ss-chat-left {
		left: var(--ss-chat-mobile-offset-side, 10px);
	}

	/* No room for the hover label on touch screens — icon-only there. */
	.ss-chat-button .ss-chat-label {
		display: none;
	}
}

/* ── [swatch_chat] shortcode ─────────────────────────────────────────
   Flows inline with surrounding content — no fixed position, no hover
   reveal. Deliberately unstyled beyond spacing/icon size, so it blends into
   a theme's own button/link styling (e.g. wrapped in a page-builder button)
   rather than fighting it. */
.ss-chat-inline {
	gap: 8px;
	color: inherit;
	font: inherit;
}

.ss-chat-inline .ss-chat-icon {
	width: 20px;
	height: 20px;
}

.ss-chat-inline .ss-chat-label {
	line-height: 1.3;
}