/* ==========================================================================
   6ixmerchandise — WhatsApp click-to-chat button.

   Geometry is the Shopify Inbox activator's, taken from the live app embed
   rather than guessed (`config/settings_data.json` + the `<style data-shopify>`
   block in docs/frontend/html/home.html):

       background   #000000   (button_color)
       icon         #ffffff   (secondary_color)
       shape        56px square, 16px radius (--shopify-chat-border-radius)
       offset       80px from the viewport bottom (button_vertical_position "higher")
       label        none      (button_text "no_text")
       greeting     none      (greeting_message "")

   The one deliberate difference is the corner: Inbox sat bottom-LEFT because
   6M Rewards owned bottom-right. On WooCommerce the rewards launcher is still
   bottom-right, at `right: 24px` and 48px tall from `bottom: 24px` (desktop) /
   `bottom: 180px` (below 1025px), so this button takes the same right-hand
   column 80px up and the two stack cleanly instead of splitting the corners.
   See docs/FRONTEND_DECISIONS.md decision 26.

   @see inc/chat.php
   ========================================================================== */

.s6m-wa {
	position: fixed;
	right: 24px;
	bottom: calc(80px + env(safe-area-inset-bottom, 0));

	/* Under the rewards drawer (2147483001) and its pill (2147483000), so an
	   open drawer covers this button rather than colliding with it — but above
	   the mobile tab bar (10) and the PDP sticky add-to-cart (90). */
	z-index: 2147482999;

	display: flex;
	width: 56px;
	height: 56px;
	align-items: center;
	justify-content: center;
	border-radius: 16px;
	background: #000;
	box-shadow: 0 12px 40px rgb(0 0 0 / 22%);
	color: #fff;
	transition: transform 0.15s ease, background 0.15s ease;
}

.s6m-wa:hover,
.s6m-wa:focus-visible {
	background: #111;
	color: #fff;
	transform: translateY(-1px);
}

.s6m-wa:focus-visible {
	outline: 2px solid var(--6m-signal, #e63946);
	outline-offset: 2px;
}

.s6m-wa__icon {
	display: block;
	width: 28px;
	height: 28px;
}

@media (prefers-reduced-motion: reduce) {
	.s6m-wa {
		transition: none;
	}
	.s6m-wa:hover,
	.s6m-wa:focus-visible {
		transform: none;
	}
}

/* Checkout and the theme's other minimal-chrome surfaces strip every floating
   element (assets/css/checkout.css); the PHP already refuses to print the
   button on `is_checkout()`, and this covers the body-class path too. */
.s6m-checkout-page .s6m-wa,
body.sixm-minimal-chrome .s6m-wa {
	display: none !important;
}

/* DESKTOP ONLY. The rewards nudge ("Get $5 off — join 6M Rewards free ★") is
   anchored 12px above the launcher pill and right-aligned to the same column.
   Above 1025px the pill sits at `bottom: 24px`, which puts the bubble at
   roughly 86-134px — straight over this button. Rather than move the button
   permanently (80px is Inbox's own offset and worth keeping), step it above the
   bubble only while the bubble exists, and step back when the shopper dismisses
   it or opens the drawer.

   Below 1025px the pill drops to `bottom: 180px` and takes the bubble with it
   to ~242-290px, so 80px is already clear and this must NOT apply: 152px would
   land the button inside the pill itself. That bug was live for one iteration
   and is why the breakpoint is here rather than on the base rule.

   Where `:has()` is unsupported the button keeps its place and is covered for
   those few seconds. */
@media (min-width: 1025px) {
	body:has(#sixm-nudge:not([hidden])) .s6m-wa {
		bottom: 152px;
		transition: bottom 0.3s ease, transform 0.15s ease, background 0.15s ease;
	}

	@media (prefers-reduced-motion: reduce) {
		body:has(#sixm-nudge:not([hidden])) .s6m-wa {
			transition: none;
		}
	}
}

/* On a phone the PDP's sticky add-to-cart bar slides up over the bottom 90px.
   80px would put the chat button behind it, so stand down while the shopper is
   being asked to buy — the same trade the theme already makes for the bottom
   tab bar at checkout. Guarded on :has() support; where it is missing the
   button simply stays, which is the pre-existing behaviour of every other
   floating element on that screen. */
@media (max-width: 767px) {
	body:has(.sticky-atc.is-visible) .s6m-wa {
		opacity: 0;
		pointer-events: none;
	}
}

/* ==========================================================================
   On-site chat panel (opens from the button; hands the typed message to
   WhatsApp). Same corner and z-index as the button; a bottom sheet on phones.
   ========================================================================== */
.s6m-wa.is-open {
	background: #111;
}

.s6m-wa-panel {
	position: fixed;
	right: 24px;
	bottom: calc(80px + 56px + 12px + env(safe-area-inset-bottom, 0));
	z-index: 2147482999;
	width: 340px;
	max-width: calc(100vw - 32px);
	overflow: hidden;
	border-radius: 16px;
	background: var(--6m-bg, #fff);
	color: var(--6m-ink, #111);
	box-shadow: 0 16px 48px rgb(0 0 0 / 24%);
	font-family: inherit;
}

.s6m-wa-panel[hidden] {
	display: none;
}

.s6m-wa-panel__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 14px 14px 16px;
	background: #000;
	color: #fff;
}

.s6m-wa-panel__who {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

.s6m-wa-panel__avatar {
	display: inline-flex;
	width: 40px;
	height: 40px;
	flex: 0 0 40px;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #fff;
	color: #000;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.02em;
}

.s6m-wa-panel__name,
.s6m-wa-panel__status {
	margin: 0;
	line-height: 1.3;
}

.s6m-wa-panel__name {
	font-weight: 700;
	font-size: 15px;
}

.s6m-wa-panel__status {
	font-size: 12px;
	opacity: 0.8;
}

.s6m-wa-panel__close {
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: #fff;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
}

.s6m-wa-panel__close:hover,
.s6m-wa-panel__close:focus-visible {
	background: rgb(255 255 255 / 12%);
}

.s6m-wa-panel__body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 14px 16px 16px;
}

.s6m-wa-panel__bubble {
	margin: 0;
	padding: 10px 12px;
	border-radius: 12px 12px 12px 4px;
	background: var(--6m-surface, #f3f3f3);
	font-size: 14px;
	line-height: 1.45;
}

.s6m-wa-panel__label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

.s6m-wa-panel__text {
	width: 100%;
	min-height: 76px;
	padding: 10px 12px;
	border: 1px solid var(--6m-line, #d9d9d9);
	border-radius: 10px;
	background: var(--6m-bg, #fff);
	color: inherit;
	font: inherit;
	font-size: 16px; /* no iOS zoom */
	resize: vertical;
}

.s6m-wa-panel__text:focus-visible {
	outline: 2px solid var(--6m-signal, #e63946);
	outline-offset: 1px;
}

.s6m-wa-panel__send {
	width: 100%;
	min-height: 48px;
	border: 0;
	border-radius: 12px;
	background: #25d366;
	color: #062b16;
	font: inherit;
	font-weight: 700;
	font-size: 15px;
	cursor: pointer;
}

.s6m-wa-panel__send:hover,
.s6m-wa-panel__send:focus-visible {
	background: #1fbf5b;
}

.s6m-wa-panel__alt {
	margin: 2px 0 0;
	font-size: 12px;
	text-align: center;
	opacity: 0.8;
}

.s6m-wa-panel__alt a {
	color: inherit;
	text-decoration: underline;
}

@media (max-width: 767px) {
	.s6m-wa-panel {
		right: 0;
		left: 0;
		bottom: 0;
		width: auto;
		max-width: none;
		border-radius: 16px 16px 0 0;
		padding-bottom: env(safe-area-inset-bottom, 0);
	}
}

@media (min-width: 1025px) {
	body:has(#sixm-nudge:not([hidden])) .s6m-wa-panel {
		bottom: calc(152px + 56px + 12px);
	}
}

.s6m-checkout-page .s6m-wa-panel,
body.sixm-minimal-chrome .s6m-wa-panel {
	display: none !important;
}