/* 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; }
#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; }
#scw-widget .scw-tag { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; opacity: .75; color: var(--scw-on-primary) !important; }

#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; }
#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; }

#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; }
#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;
	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; font-family: var(--scw-font-heading) !important; font-size: 17px !important; font-weight: 600; line-height: 1.15; }
#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 { font-family: var(--scw-font-heading) !important; font-size: 16px; font-weight: 700; color: var(--scw-text) !important; }
#scw-widget .scw-frame-wrap { flex: 1; background: #fff; }
#scw-widget .scw-frame-wrap 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;
	/* 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); }
#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;
	}
}

/* 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; }