/* Simple Chat Widget - front-end styles.
   All selectors are namespaced under #scw-widget so they will not
   collide with the host theme. Colors come from CSS variables set
   inline by PHP from the saved config.

   Color, background, and font declarations on text elements are marked
   !important on purpose: themes and page builders (Elementor, Divi,
   customizer CSS) often style bare p / h2 / button with !important of
   their own, and an inherited color loses to ANY direct rule no matter
   how specific our selector is. Because everything here is scoped under
   #scw-widget, the !important cannot leak into the host site. */

#scw-widget {
	--scw-primary: #3f4626;
	--scw-primary-dark: #2f3419;
	--scw-on-primary: #f3f1e7;
	--scw-panel: #ffffff;
	--scw-text: #2b2e22;
	--scw-border: #e6e4d9;
	--scw-font-heading: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--scw-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	position: fixed;
	bottom: 22px;
	right: 22px;
	z-index: 2147483000;
	font-family: var(--scw-font-body);
}

#scw-widget * { box-sizing: border-box; }

/* Launcher (closed state) */
#scw-widget .scw-launcher {
	position: relative;
	width: 62px;
	height: 62px;
	border: none !important;
	cursor: pointer;
	border-radius: 50% !important;
	background: var(--scw-primary) !important;
	color: var(--scw-on-primary) !important;
	display: grid;
	place-items: center;
	box-shadow: 0 10px 26px rgba(47, 52, 25, .40) !important;
	transition: transform .2s ease, box-shadow .2s ease;
	padding: 0;
}
#scw-widget .scw-launcher:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(47, 52, 25, .5) !important; }
#scw-widget .scw-launcher svg { width: 28px; height: 28px; position: relative; z-index: 1; }
#scw-widget .scw-launcher .scw-ico-close { display: none; }

/* Subtle pulse ring in the widget's own color, only while closed. */
#scw-widget .scw-launcher::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var(--scw-primary);
	z-index: 0;
	animation: scw-pulse 2.2s ease-out infinite;
}
@keyframes scw-pulse {
	0%   { transform: scale(1);   opacity: .45; }
	70%  { transform: scale(1.6); opacity: 0; }
	100% { transform: scale(1.6); opacity: 0; }
}
#scw-widget.scw-open .scw-launcher::before { animation: none; opacity: 0; }

/* Panel (open state) */
#scw-widget .scw-panel {
	position: absolute;
	bottom: 78px;
	right: 0;
	width: 370px;
	height: 580px;
	max-height: calc(100vh - 110px);
	background: var(--scw-panel);
	border-radius: 22px;
	box-shadow: 0 24px 60px rgba(40, 44, 22, .30);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	opacity: 0;
	transform: translateY(12px) scale(.98);
	pointer-events: none;
	transition: opacity .22s ease, transform .22s ease;
}
#scw-widget.scw-open .scw-panel { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
#scw-widget.scw-open .scw-launcher .scw-ico-chat { display: none; }
#scw-widget.scw-open .scw-launcher .scw-ico-close { display: block; }

/* Header */
#scw-widget .scw-header {
	background: var(--scw-primary) !important;
	color: var(--scw-on-primary) !important;
	padding: 20px 18px 22px;
	position: relative;
	flex-shrink: 0;
}
#scw-widget .scw-brand-row { display: flex; align-items: center; gap: 12px; padding-right: 34px; /* keep clear of the close button */ }
#scw-widget .scw-brand-text { min-width: 0; }
#scw-widget .scw-logo {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background-color: var(--scw-on-primary);
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	display: grid;
	place-items: center;
	overflow: hidden;
	flex-shrink: 0;
}
#scw-widget .scw-logo--img { background-color: #fff; }
#scw-widget .scw-logo img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
#scw-widget .scw-logo svg { width: 28px; height: 28px; color: var(--scw-primary); }
#scw-widget .scw-name { font-family: var(--scw-font-heading) !important; font-size: 21px; font-weight: 700; line-height: 1.1; letter-spacing: normal !important; text-transform: none !important; color: var(--scw-on-primary) !important; white-space: normal !important; overflow-wrap: break-word; }
#scw-widget .scw-tag { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; opacity: .75; color: var(--scw-on-primary) !important; white-space: normal !important; overflow-wrap: break-word; }

#scw-widget .scw-greeting { margin-top: 16px; }
#scw-widget .scw-greeting h2 { margin: 0 0 4px; padding: 0; font-family: var(--scw-font-heading) !important; font-size: 19px !important; font-weight: 700; line-height: 1.25; letter-spacing: normal !important; text-transform: none !important; color: var(--scw-on-primary) !important; white-space: normal !important; overflow-wrap: break-word; }
#scw-widget .scw-greeting p { margin: 0; padding: 0; font-family: var(--scw-font-body) !important; font-size: 14px !important; line-height: 1.45; letter-spacing: normal !important; text-transform: none !important; opacity: .85; color: var(--scw-on-primary) !important; white-space: normal !important; overflow-wrap: break-word; }

#scw-widget .scw-close {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 30px;
	height: 30px;
	border: none !important;
	cursor: pointer;
	background: rgba(255, 255, 255, .14) !important;
	color: var(--scw-on-primary) !important;
	box-shadow: none !important;
	border-radius: 50% !important;
	display: grid;
	place-items: center;
	padding: 0;
}
#scw-widget .scw-close:hover { background: rgba(255, 255, 255, .26) !important; }

/* Body and views */
#scw-widget .scw-body { flex: 1; position: relative; overflow: hidden; }
#scw-widget .scw-view {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	transition: transform .26s ease, opacity .26s ease;
}
#scw-widget .scw-menu { padding: 18px 16px; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
#scw-widget .scw-menu.scw-hidden { transform: translateX(-16%); opacity: 0; pointer-events: none; }

/* Menu buttons */
#scw-widget .scw-btn {
	width: 100%;
	text-align: left;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 14px;
	background: #fff !important;
	border: 1.5px solid var(--scw-primary) !important;
	border-radius: 14px !important;
	padding: 13px 14px;
	color: var(--scw-primary) !important;
	font-family: inherit;
	text-transform: none !important;
	text-decoration: none !important;
	letter-spacing: normal !important;
	box-shadow: none !important;
	/* Themes often set white-space: nowrap on buttons; without this a
	   long label refuses to wrap and overflows the panel sideways. */
	white-space: normal !important;
	transition: background .15s ease, color .15s ease, transform .1s ease;
}
#scw-widget .scw-btn + .scw-btn { margin-top: 11px; }
#scw-widget .scw-btn:hover { background: var(--scw-primary) !important; color: var(--scw-on-primary) !important; }
#scw-widget .scw-btn:hover .scw-btn-ico { background: rgba(255, 255, 255, .18) !important; color: var(--scw-on-primary) !important; }
#scw-widget .scw-btn:active { transform: scale(.99); }
#scw-widget .scw-btn-ico {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	flex-shrink: 0;
	background: var(--scw-primary) !important;
	color: var(--scw-on-primary) !important;
	display: grid;
	place-items: center;
	transition: inherit;
}
#scw-widget .scw-btn-ico svg { width: 20px; height: 20px; }
#scw-widget .scw-btn-label { flex: 1; min-width: 0; font-family: var(--scw-font-heading) !important; font-size: 17px !important; font-weight: 600; line-height: 1.15; white-space: normal !important; overflow-wrap: break-word; }
#scw-widget .scw-btn-arrow { opacity: .55; display: grid; place-items: center; }

/* iframe view */
#scw-widget .scw-frame-view { transform: translateX(100%); opacity: 0; pointer-events: none; }
#scw-widget .scw-frame-view.scw-active { transform: translateX(0); opacity: 1; pointer-events: auto; }
#scw-widget .scw-frame-bar {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-bottom: 1px solid var(--scw-border);
	background: #faf9f5;
	flex-shrink: 0;
}
#scw-widget .scw-back {
	border: none !important;
	cursor: pointer;
	background: var(--scw-primary) !important;
	color: var(--scw-on-primary) !important;
	width: 32px;
	height: 32px;
	box-shadow: none !important;
	border-radius: 9px !important;
	display: grid;
	place-items: center;
	flex-shrink: 0;
	padding: 0;
}
#scw-widget .scw-back:hover { background: var(--scw-primary-dark) !important; }
#scw-widget .scw-frame-title { flex: 1; min-width: 0; font-family: var(--scw-font-heading) !important; font-size: 16px; font-weight: 700; color: var(--scw-text) !important; white-space: normal !important; overflow-wrap: break-word; }
#scw-widget .scw-frame-wrap {
	flex: 1;
	background: #fff;
	/* Fallback scrolling if embedded content ever oversizes itself. */
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
}
/* Embed helpers on the page (e.g. GoHighLevel's form_embed.js, loaded
   whenever a GHL form is embedded anywhere on the site) do two things
   to every GHL iframe they find, including ours: they tell the form
   inside to DISABLE its internal scrolling, and they set an inline
   height equal to the full form. So the iframe's height must stay
   free for them to grow (blocking it leaves an unscrollable, clipped
   form) - and .scw-frame-wrap above scrolls the inflated iframe.
   Without such helpers the iframe stays at 100% and the embedded tool
   scrolls itself, as always. min-height keeps it filling the panel
   either way; width stays pinned. */
#scw-widget #scw-frame { width: 100% !important; height: 100%; min-height: 100%; border: 0; display: block; }
#scw-widget .scw-html-host iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Footer */
#scw-widget .scw-footer {
	flex-shrink: 0;
	text-align: center;
	padding: 9px 10px;
	border-top: 1px solid var(--scw-border);
}
#scw-widget .scw-footer a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	text-decoration: none !important;
	color: #1f2d4d !important;
}
#scw-widget .scw-foot-label { font-size: 12px; font-weight: 700; color: #1f2d4d !important; }
#scw-widget .scw-foot-logo { height: 18px; width: auto; display: block; }

/* HTML / shortcode content host (sits over the iframe area) */
#scw-widget .scw-html-host {
	display: none;
	width: 100%;
	height: 100%;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	/* Transparent so .scw-frame-wrap is the single background layer;
	   the per-button panel background is applied there inline. */
	background: transparent;
}
#scw-widget .scw-html-panel { padding: 16px; color: var(--scw-text); overflow-wrap: break-word; }
#scw-widget .scw-html-panel img { max-width: 100%; height: auto; }

/* Mobile: full screen panel */
@media (max-width: 480px) {
	#scw-widget { bottom: 16px; right: 16px; }
	#scw-widget .scw-panel {
		position: fixed;
		inset: 0;
		width: 100%;
		height: 100%;
		max-height: 100%;
		border-radius: 0;
	}
	/* While the fullscreen panel is open, the page behind must not
	   scroll (iOS lets touches bleed through otherwise, which makes the
	   panel content feel frozen). widget.js toggles this class. */
	html.scw-noscroll,
	html.scw-noscroll body {
		overflow: hidden !important;
		overscroll-behavior: none;
	}
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
	#scw-widget .scw-panel,
	#scw-widget .scw-view,
	#scw-widget .scw-launcher { transition: none !important; }
	#scw-widget .scw-launcher::before { animation: none !important; opacity: 0 !important; }
}
#scw-widget :focus-visible { outline: 3px solid #b9c47e; outline-offset: 2px; }