/**
 * ekg-bot — Boss Spec Desk widget styles.
 *
 * Uses the boss-block-theme tokens (theme.json) with hardcoded fallbacks so the widget matches the
 * site chrome even before theme CSS vars resolve. Boss red (#c90016) / charcoal (#0f141b), system sans,
 * uppercase 800 controls at 3px radius — the same button language as the rest of the site.
 */

.ekgbot {
	--ekgbot-red: var(--wp--preset--color--primary, #c90016);
	--ekgbot-red-dark: var(--wp--preset--color--primary-dark, #990012);
	--ekgbot-charcoal: var(--wp--preset--color--charcoal, #0f141b);
	--ekgbot-ink: var(--wp--preset--color--ink, #151a21);
	--ekgbot-steel: var(--wp--preset--color--steel, #4a5563);
	--ekgbot-muted: var(--wp--preset--color--muted, #6b7280);
	--ekgbot-line: var(--wp--preset--color--line, #d9dde3);
	--ekgbot-surface: var(--wp--preset--color--surface, #f5f6f8);
	--ekgbot-surface-subtle: var(--wp--preset--color--surface-subtle, #fbfcfd);
	--ekgbot-paper: var(--wp--preset--color--paper, #ffffff);
	--ekgbot-on-dark: var(--wp--preset--color--on-dark, #ffffff);
	--ekgbot-on-dark-dim: var(--wp--preset--color--on-dark-dim, #d7dee8);

	font-family: var(--wp--preset--font-family--sans, Arial, Helvetica, "Helvetica Neue", system-ui, -apple-system, sans-serif);
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 99998;
	line-height: 1.45;
}

/* ---- launcher bubble --------------------------------------------------- */
.ekgbot__launch {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	border: 0;
	cursor: pointer;
	background: var(--ekgbot-red);
	color: var(--ekgbot-paper);
	font-weight: 800;
	font-size: 14px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 13px 20px 13px 16px;
	border-radius: 999px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28), 0 2px 6px rgba(0, 0, 0, 0.18);
	transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.ekgbot__launch:hover,
.ekgbot__launch:focus-visible {
	background: var(--ekgbot-red-dark);
	transform: translateY(-1px);
	box-shadow: 0 14px 36px rgba(0, 0, 0, 0.34), 0 3px 8px rgba(0, 0, 0, 0.2);
	outline: none;
}
.ekgbot__launch:focus-visible {
	box-shadow: 0 0 0 3px var(--ekgbot-paper), 0 0 0 6px var(--ekgbot-red);
}
.ekgbot__launch svg {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
}
.ekgbot.is-open .ekgbot__launch {
	display: none;
}

/* ---- panel ------------------------------------------------------------- */
.ekgbot__panel {
	display: none;
	flex-direction: column;
	width: 380px;
	max-width: calc(100vw - 32px);
	height: 560px;
	max-height: calc(100vh - 40px);
	background: var(--ekgbot-paper);
	border: 1px solid var(--ekgbot-line);
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 24px 70px rgba(0, 0, 0, 0.32);
}
.ekgbot.is-open .ekgbot__panel {
	display: flex;
	animation: ekgbot-rise 0.18s ease-out;
}
@keyframes ekgbot-rise {
	from { opacity: 0; transform: translateY(12px); }
	to { opacity: 1; transform: translateY(0); }
}

/* ---- header ------------------------------------------------------------ */
.ekgbot__head {
	position: relative;
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 15px 16px;
	background: var(--ekgbot-charcoal);
	color: var(--ekgbot-on-dark);
	border-bottom: 3px solid var(--ekgbot-red);
}
.ekgbot__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	flex: 0 0 auto;
	border-radius: 8px;
	background: var(--ekgbot-red);
	color: #fff;
}
.ekgbot__badge svg { width: 20px; height: 20px; }
.ekgbot__titles { display: flex; flex-direction: column; min-width: 0; }
.ekgbot__title {
	font-weight: 800;
	font-size: 15px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.ekgbot__sub {
	font-size: 12px;
	color: var(--ekgbot-on-dark-dim);
	letter-spacing: 0.01em;
}
.ekgbot__close {
	margin-left: auto;
	border: 0;
	background: transparent;
	color: var(--ekgbot-on-dark-dim);
	cursor: pointer;
	width: 32px;
	height: 32px;
	border-radius: 6px;
	font-size: 20px;
	line-height: 1;
	transition: background 0.15s ease, color 0.15s ease;
}
.ekgbot__close:hover,
.ekgbot__close:focus-visible {
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
	outline: none;
}

/* ---- breadcrumb -------------------------------------------------------- */
.ekgbot__crumbs {
	flex: 0 0 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px 4px;
	padding: 8px 14px;
	background: var(--ekgbot-surface-subtle);
	border-bottom: 1px solid var(--ekgbot-line);
	font-size: 12px;
	line-height: 1.3;
}
.ekgbot__crumbs[hidden] { display: none; }
.ekgbot__crumb {
	border: 0;
	background: transparent;
	padding: 1px 2px;
	font: inherit;
	color: var(--ekgbot-red);
	font-weight: 700;
	cursor: pointer;
	border-radius: 3px;
}
.ekgbot__crumb:hover,
.ekgbot__crumb:focus-visible {
	text-decoration: underline;
	outline: none;
}
.ekgbot__crumb--current {
	color: var(--ekgbot-steel);
	font-weight: 700;
	cursor: default;
}
.ekgbot__crumb--current:hover { text-decoration: none; }
.ekgbot__crumb-sep {
	color: var(--ekgbot-muted);
	font-weight: 700;
}

/* ---- message log ------------------------------------------------------- */
.ekgbot__log {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 16px 16px 8px;
	background: var(--ekgbot-surface);
	scroll-behavior: smooth;
}
.ekgbot__msg {
	max-width: 88%;
	margin-bottom: 12px;
	padding: 11px 13px;
	border-radius: 12px;
	font-size: 14px;
	animation: ekgbot-msg 0.16s ease-out;
}
@keyframes ekgbot-msg {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: translateY(0); }
}
.ekgbot__msg--bot {
	background: var(--ekgbot-paper);
	color: var(--ekgbot-ink);
	border: 1px solid var(--ekgbot-line);
	border-top-left-radius: 4px;
}
.ekgbot__msg--user {
	margin-left: auto;
	background: var(--ekgbot-red);
	color: #fff;
	border-top-right-radius: 4px;
	font-weight: 700;
}
.ekgbot__msg p { margin: 0 0 8px; }
.ekgbot__msg p:last-child { margin-bottom: 0; }

/* asset links inside a bot message */
.ekgbot__assets {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: 10px;
}
.ekgbot__asset {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-weight: 700;
	font-size: 13px;
	color: var(--ekgbot-red);
	text-decoration: none;
	padding: 8px 10px;
	border: 1px solid var(--ekgbot-line);
	border-radius: 8px;
	background: var(--ekgbot-surface-subtle);
	transition: border-color 0.15s ease, background 0.15s ease;
}
.ekgbot__asset:hover,
.ekgbot__asset:focus-visible {
	border-color: var(--ekgbot-red);
	background: #fff;
	outline: none;
}
.ekgbot__asset svg { width: 15px; height: 15px; flex: 0 0 auto; }

/* ---- choices (the reply rail) ----------------------------------------- */
.ekgbot__choices {
	flex: 0 0 auto;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 12px 16px 16px;
	background: var(--ekgbot-surface);
	border-top: 1px solid var(--ekgbot-line);
}
.ekgbot__choice {
	border: 1px solid var(--ekgbot-line-strong, #c6cad1);
	background: var(--ekgbot-paper);
	color: var(--ekgbot-ink);
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 600;
	cursor: pointer;
	padding: 10px 14px;
	border-radius: 999px;
	transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}
.ekgbot__choice:hover,
.ekgbot__choice:focus-visible {
	border-color: var(--ekgbot-red);
	color: var(--ekgbot-red);
	outline: none;
}
.ekgbot__choice:active { transform: translateY(1px); }

/* primary + handoff choices on funnel nodes */
.ekgbot__choice--primary {
	background: var(--ekgbot-red);
	border-color: var(--ekgbot-red);
	color: #fff;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-size: 13px;
}
.ekgbot__choice--primary:hover,
.ekgbot__choice--primary:focus-visible {
	background: var(--ekgbot-red-dark);
	border-color: var(--ekgbot-red-dark);
	color: #fff;
}
.ekgbot__choice--handoff {
	color: var(--ekgbot-steel);
}

/* phone = the "call now" escalation: a solid charcoal button, distinct from the red form CTA */
.ekgbot__choice--phone {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	text-decoration: none;
	background: var(--ekgbot-charcoal);
	border-color: var(--ekgbot-charcoal);
	color: var(--ekgbot-on-dark);
	font-weight: 800;
	letter-spacing: 0.02em;
	font-size: 13px;
}
.ekgbot__choice--phone:hover,
.ekgbot__choice--phone:focus-visible {
	background: var(--ekgbot-ink);
	border-color: var(--ekgbot-ink);
	color: var(--ekgbot-on-dark);
}
.ekgbot__choice--phone svg { width: 15px; height: 15px; flex: 0 0 auto; }

/* off-hours note under the funnel form CTA */
.ekgbot__note {
	max-width: 88%;
	margin: -2px 0 12px;
	padding: 8px 12px;
	font-size: 12.5px;
	font-style: italic;
	color: var(--ekgbot-muted);
	background: var(--ekgbot-surface-subtle);
	border: 1px dashed var(--ekgbot-line);
	border-radius: 10px;
}
.ekgbot__choice--back {
	color: var(--ekgbot-muted);
	border-style: dashed;
}

/* ---- footer note ------------------------------------------------------- */
.ekgbot__foot {
	flex: 0 0 auto;
	padding: 0 16px 12px;
	background: var(--ekgbot-surface);
	font-size: 11px;
	color: var(--ekgbot-muted);
	text-align: center;
}

/* ---- mobile ------------------------------------------------------------ */
@media (max-width: 480px) {
	.ekgbot { right: 12px; bottom: 12px; left: 12px; }
	.ekgbot__launch { width: 100%; justify-content: center; }

	/* Near-full-height sheet — fills the screen so there's no dead space above the panel and the message
	   log gets maximum room. vh first as the fallback, then dvh (dodges the iOS address-bar height jump). */
	.ekgbot__panel {
		width: 100%;
		height: calc(100vh - 24px);
		max-height: calc(100vh - 24px);
		height: calc(100dvh - 24px);
		max-height: calc(100dvh - 24px);
	}

	/* Bigger touch targets on the header + breadcrumb. */
	.ekgbot__close { width: 40px; height: 40px; font-size: 24px; }
	.ekgbot__crumbs { padding: 10px 14px; }
	.ekgbot__crumb { padding: 4px 4px; }

	/* Choices stack into one clean full-width column — easier to tap (~44px tall) than ragged wrapped pills. */
	.ekgbot__choices { flex-direction: column; gap: 8px; }
	.ekgbot__choices .ekgbot__choice {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		padding: 13px 16px;
		font-size: 14.5px;
	}
}

/* ---- reduced motion ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.ekgbot__launch,
	.ekgbot__choice,
	.ekgbot__msg,
	.ekgbot.is-open .ekgbot__panel { transition: none; animation: none; }
	.ekgbot__log { scroll-behavior: auto; }
}