/*
 * Frontend widget styles — mirror the site's nested-glass-card recipe so a
 * theme redesign automatically recolors the chat. We pull colors from the
 * Tailwind v4 --color-* tokens already declared on :root by src/tailwind.css,
 * so re-skinnng that file retints the chat without touching this one.
 *
 * Layering note: these rules are unlayered on purpose. Astra + Tailwind v4
 * (utilities live in @layer utilities) means an unlayered CSS rule here
 * beats any plain utility class the theme might apply to children — same
 * pattern used throughout assets/critical.css.
 */

:root {
	--ssc-z-launch: 70;
	--ssc-z-panel: 71;
	--ssc-shadow-card: 0 24px 60px rgba(24,23,19,.22), inset 0 1px 0 rgba(255,255,255,.85);
	--ssc-shadow-launch: 0 14px 32px rgba(24,23,19,.22);
}

/* Floating launcher (round button, lower-right). */
.ss-chat {
	position: fixed;
	right: clamp(14px, 2.4vw, 28px);
	bottom: clamp(14px, 2.4vw, 28px);
	z-index: var(--ssc-z-launch);
	font-family: var(--font-sans, "Plus Jakarta Sans", sans-serif);
	color: var(--color-ink, #181713);
}
.ss-chat[hidden] { display: none !important; }
.ss-chat-launch {
	position: relative;
	isolation: isolate;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 58px !important;
	height: 58px !important;
	min-width: 58px;
	min-height: 58px;
	padding: 0 !important;
	margin: 0 !important;
	border: 1px solid #181713 !important;
	border-radius: 9999px !important;
	background: var(--color-brand, #FFC531) !important;
	color: var(--color-ink, #181713) !important;
	cursor: pointer;
	box-shadow: var(--ssc-shadow-launch);
	transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease;
	/* Mobile tap behaviour: drop the 300 ms click delay and stop iOS Safari
	   from interpreting the tap as a scroll / zoom gesture — that misread
	   was what dragged the page when the launcher was pressed. The
	   transparent tap-highlight removes the gray flash so the tap feels
	   pinned to the icon. */
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
	user-select: none;
}
.ss-chat-launch:hover {
	transform: translateY(-2px);
	box-shadow: 0 18px 40px rgba(24,23,19,.28);
}
.ss-chat-launch:focus-visible {
	outline: 3px solid rgba(255,197,49,.5);
	outline-offset: 3px;
}
.ss-chat-launch svg {
	width: 24px !important;
	height: 24px !important;
	display: block !important;
	flex: none !important;
}
/* When the panel is open we hide the floating launcher entirely — the panel's
   own header carries a close button, and swapping icon to a cross confused
   users (other chat widgets don't do this). Removes one decision from the
   visual vocabulary of the launcher. */
.ss-chat.is-open .ss-chat-launch { display: none !important; }
.ss-chat-launch-dot {
	position: absolute;
	top: 4px; right: 4px;
	width: 12px; height: 12px;
	border-radius: 9999px;
	background: #181713;
	box-shadow: 0 0 0 2px #FFC531;
	animation: ssc-pulse 2.2s infinite ease-out;
}
.ss-chat.is-open .ss-chat-launch-dot { display: none; }
@keyframes ssc-pulse {
	0%   { transform: scale(1);   opacity: 1; }
	70%  { transform: scale(1.6); opacity: 0; }
	100% { transform: scale(1.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.ss-chat-launch-dot { animation: none; opacity: .5; }
	.ss-chat-launch { transition: none; }
}

/* Glass panel — same nested-glass-card recipe as the rest of the site:
   outer = translucent blurred rim, inner = opaque rounded-[22px] bg-white. */
.ss-chat-panel {
	position: fixed;
	right: clamp(14px, 2.4vw, 28px);
	bottom: calc(58px + clamp(22px, 4vw, 34px));
	z-index: var(--ssc-z-panel);
	width: min(380px, calc(100% - 28px));
	height: min(620px, calc(100vh - 120px));
	max-height: calc(100dvh - 120px);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	/* Stop the panel itself from propagating a pull-to-refresh / rub­ber-
	   band gesture to the page beneath. .ss-chat-body already has this for
	   its own scroll, but applying it here catches the edges too (when the
	   chat-log is shorter than the panel viewport). */
	overscroll-behavior: contain;
	border-radius: 28px !important;
	border: 1px solid rgba(255,255,255,.6) !important;
	background: rgba(255,255,255,.4) !important;
	-webkit-backdrop-filter: blur(24px) saturate(180%) !important;
	backdrop-filter: blur(24px) saturate(180%) !important;
	box-shadow: var(--ssc-shadow-card);
	transform-origin: bottom right;
	opacity: 0;
	transform: translateY(8px) scale(.98);
	transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
	pointer-events: none;
	visibility: hidden;
}
/* Open state must win with !important so theme/global rules (and any leftover
   animation fill) cannot leave the panel visible-but-inert — that blocked
   both the close button and the message textarea. */
.ss-chat.is-open .ss-chat-panel {
	opacity: 1 !important;
	transform: none !important;
	pointer-events: auto !important;
	visibility: visible !important;
	animation: ssc-pop .22s ease;
}
@keyframes ssc-pop {
	from { opacity: 0; transform: translateY(8px) scale(.98); }
	to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.ss-chat.is-open .ss-chat-panel { animation: none; }
	.ss-chat-panel { transition: none; }
}

/* Header */
.ss-chat-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	padding: 18px 18px 14px;
	border-bottom: 1px solid rgba(24,23,19,.08);
}
.ss-chat-header-text { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.ss-chat-title {
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .16em;
	color: var(--color-ink, #181713);
}
.ss-chat-subtitle {
	font-size: 11px;
	color: var(--color-body, #72716A);
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
.ss-chat-status {
	display: inline-block;
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: 9999px;
	border: 1.5px solid var(--color-body, #72716A);
	background: transparent;
	box-sizing: border-box;
}
.ss-chat-status::before { content: none; display: none; }

.ss-chat-close {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 36px !important;
	height: 36px !important;
	min-width: 36px;
	min-height: 36px;
	padding: 0 !important;
	margin: 0 !important;
	border: 1px solid rgba(24,23,19,.16) !important;
	border-radius: 9999px !important;
	background: transparent !important;
	color: var(--color-ink, #181713) !important;
	cursor: pointer;
	/* Some plugin themes set pointer-events: none on generic .btn or
	   [type=button] selectors inside layered overlays; force it on so the
	   click always reaches our handler. */
	pointer-events: auto !important;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.ss-chat-close:hover {
	background: var(--color-ink, #181713) !important;
	color: #fff !important;
	border-color: var(--color-ink, #181713) !important;
}
.ss-chat-close svg { width: 14px !important; height: 14px !important; display: block; flex: none; }

/* Body: opaque inner panel + scroll. */
.ss-chat-body {
	flex: 1;
	min-height: 0;
	border-radius: 22px !important;
	background: #ffffff !important;
	margin: 0 10px;
	padding: 18px 18px 6px;
	overflow-y: auto;
	scroll-behavior: smooth;
}
.ss-chat-body::-webkit-scrollbar { width: 6px; }
.ss-chat-body::-webkit-scrollbar-thumb { background: rgba(24,23,19,.18); border-radius: 3px; }
.ss-chat-body::-webkit-scrollbar-track { background: transparent; }

.ss-chat-log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ss-chat-msg {
	display: flex;
	flex-direction: column;
	max-width: 86%;
	font-size: 13px;
	line-height: 1.45;
}
.ss-chat-msg.is-visitor {
	margin-left: auto;
	align-items: flex-end;
}
.ss-chat-msg.is-agent,
.ss-chat-msg.is-system {
	margin-right: auto;
	align-items: flex-start;
}
.ss-chat-bubble {
	padding: 9px 14px;
	border-radius: 16px;
	white-space: pre-wrap;
	word-break: break-word;
}
.ss-chat-msg.is-visitor .ss-chat-bubble {
	background: var(--color-brand, #FFC531);
	color: var(--color-ink, #181713);
	border-bottom-right-radius: 4px;
}
.ss-chat-msg.is-agent .ss-chat-bubble {
	background: var(--color-sage, #E4E6D2);
	color: var(--color-ink, #181713);
	border-bottom-left-radius: 4px;
}
.ss-chat-msg.is-system .ss-chat-bubble {
	background: rgba(24,23,19,.05);
	color: var(--color-body, #72716A);
	font-size: 11px;
	font-style: italic;
	border-bottom-left-radius: 4px;
}
.ss-chat-msg-time {
	margin-top: 4px;
	font-size: 9px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--color-body, #72716A);
	opacity: .7;
}

.ss-chat-empty {
	padding: 24px 4px;
	text-align: center;
	color: var(--color-body, #72716A);
	font-size: 13px;
	line-height: 1.5;
}
.ss-chat-empty.hidden,
.ss-chat-empty[hidden] { display: none !important; }

/* Pre-chat contact gate */
.ss-chat-prechat {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 8px 4px 12px;
}
.ss-chat-prechat[hidden] { display: none !important; }
.ss-chat-prechat-lead {
	margin: 0 0 4px;
	font-size: 13px;
	line-height: 1.45;
	color: var(--color-body, #72716A);
}
.ss-chat-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .04em;
	color: var(--color-ink, #181713);
}
.ss-chat-field input {
	width: 100%;
	box-sizing: border-box;
	padding: 11px 14px !important;
	border: 1px solid #E9E5D8 !important;
	border-radius: 14px !important;
	background: #FBF9F3 !important;
	font: inherit;
	font-size: 13px !important;
	font-weight: 400;
	letter-spacing: 0;
	color: var(--color-ink, #181713) !important;
	outline: none !important;
	box-shadow: none !important;
	transition: border-color .2s ease, background-color .2s ease;
}
.ss-chat-field input::placeholder { color: #B4B2A6; font-weight: 400; }
.ss-chat-field input:focus {
	border-color: var(--color-brand, #FFC531) !important;
	background: #fff !important;
}
.ss-chat-prechat-hint {
	margin: 0;
	font-size: 11px;
	line-height: 1.4;
	color: var(--color-body, #72716A);
}
.ss-chat-prechat-error {
	margin: 0;
	font-size: 12px;
	line-height: 1.4;
	color: #D64545;
}
.ss-chat-prechat-error[hidden] { display: none !important; }
.ss-chat-prechat-submit {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 44px;
	margin-top: 4px;
	padding: 12px 16px !important;
	border: 0 !important;
	border-radius: 9999px !important;
	background: var(--color-brand, #FFC531) !important;
	color: var(--color-ink, #181713) !important;
	font: inherit;
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: .12em;
	text-transform: uppercase;
	cursor: pointer;
	transition: transform .2s ease, box-shadow .2s ease;
}
.ss-chat-prechat-submit:hover {
	transform: translateY(-1px);
	box-shadow: 0 10px 24px rgba(242,180,28,.35);
}
.ss-chat-prechat-submit:disabled {
	opacity: .55;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}
.ss-chat-log[hidden],
.ss-chat-form[hidden] { display: none !important; }

/* Composer */
.ss-chat-form {
	display: flex;
	align-items: flex-end;
	gap: 10px;
	padding: 12px 14px 16px;
	border-top: 1px solid rgba(24,23,19,.08);
	background: rgba(255,255,255,.55);
}
.ss-chat-input {
	flex: 1;
	min-height: 40px;
	max-height: min(40vh, 200px);
	resize: none;
	/* Grow with content via JS (autosize). Keep overflow hidden so Windows
	   doesn't paint a permanent scrollbar from 1px scrollHeight rounding;
	   chat.js flips to auto only once the max-height cap is hit. */
	overflow-y: hidden;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding: 11px 14px !important;
	border: 1px solid #E9E5D8 !important;
	border-radius: 14px !important;
	background: #FBF9F3 !important;
	font: inherit;
	font-size: 13px;
	color: var(--color-ink, #181713);
	outline: none !important;
	box-shadow: none !important;
	transition: border-color .2s ease, background-color .2s ease;
	line-height: 1.4;
	pointer-events: auto !important;
	user-select: text !important;
	-webkit-user-select: text !important;
	touch-action: manipulation;
}
.ss-chat-input::placeholder { color: #B4B2A6; }
.ss-chat-input:focus { border-color: var(--color-brand, #FFC531) !important; background: #fff !important; }
.ss-chat-input::-webkit-scrollbar { display: none; width: 0; height: 0; }

.ss-chat-send {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 44px !important;
	height: 44px !important;
	min-width: 44px;
	min-height: 44px;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 9999px !important;
	background: var(--color-brand, #FFC531) !important;
	color: var(--color-ink, #181713) !important;
	cursor: pointer;
	transition: transform .2s ease, box-shadow .2s ease;
	flex: none;
}
.ss-chat-send:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(242,180,28,.35);
}
.ss-chat-send:focus-visible {
	outline: 3px solid rgba(255,197,49,.5);
	outline-offset: 3px;
}
.ss-chat-send svg { width: 16px !important; height: 16px !important; display: block; flex: none; }
.ss-chat-send[disabled] {
	opacity: .4;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

/* Soft page lock while open: overflow only. Avoid position:fixed on <body>
   — that breaks fixed-position children / focus on several browsers and made
   the composer textarea unusable after open. */
body.ssc-chat-locked {
	overflow: hidden;
	overscroll-behavior: contain;
}

/* Mobile: panel goes full-bleed and the launcher hides when the panel is
   open (panel header has its own close button). Safe-area-inset padding
   keeps the composer clear of the iOS home indicator and the header clear
   of the status-bar / Dynamic Island. overscroll-behavior: contain stops
   pull-to-refresh from firing when the user scrolls past the top of the
   message log. */
@media (max-width: 480px) {
	/* 100% / inset — never 100vw (scrollbar gutter → sideways page drag). */
	.ss-chat-panel {
		inset: 0;
		right: 0;
		left: 0;
		top: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		max-height: 100dvh;
		border-radius: 0;
		border-left: 0;
		border-right: 0;
	}
	.ss-chat { right: 14px; bottom: 14px; }
	.ss-chat-header {
		padding-top: calc(14px + env(safe-area-inset-top, 0px));
	}
	.ss-chat-form {
		padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
	}
	.ss-chat-body { overscroll-behavior: contain; }
	/* Pull the launcher's corner in slightly on notched phones so it doesn't
	   sit underneath the home indicator. */
	.ss-chat {
		right: calc(14px + env(safe-area-inset-right, 0px));
		bottom: calc(14px + env(safe-area-inset-bottom, 0px));
	}
}