/* 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;
}
/* The size is pinned with !important on purpose: third-party embed
   helpers (e.g. GoHighLevel's form_embed.js, loaded when a page embeds
   a GHL form directly) force an inline height on every GHL iframe on
   the page, including ours, which breaks scrolling inside the panel.
   A stylesheet !important beats inline styles, so ours stays put. */
#scw-widget .scw-frame-wrap iframe { width: 100% !important; height: 100% !important; max-height: 100% !important; 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; }