/**
 * Boss look for the guide widget ("Support Desk" / "Ask Boss"), layered over the widget's own stylesheet.
 *
 * Boss red and charcoal from the theme's tokens (with fallbacks), system sans, uppercase 800 controls, pill
 * launcher and choices, charcoal header with a red bolt badge, phone-width sheet. Loaded only where the widget
 * loads. Icons are drawn here as CSS masks, so the page makes no extra requests.
 */

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

	/* The widget's own tokens, for anything not restyled below. */
	--ekgbot-font: var(--wp--preset--font-family--sans, Arial, Helvetica, "Helvetica Neue", system-ui, -apple-system, sans-serif);
	--ekgbot-ink: var(--bb-ink);
	--ekgbot-ink-strong: var(--bb-ink);
	--ekgbot-muted: var(--bb-muted);
	--ekgbot-accent: var(--bb-red);
	--ekgbot-accent-hover: var(--bb-red-dark);
	--ekgbot-link: var(--bb-red);
	--ekgbot-link-hover: var(--bb-red-dark);
	--ekgbot-focus: var(--bb-red);
	--ekgbot-surface: var(--bb-paper);
	--ekgbot-card: var(--bb-paper);
	--ekgbot-border: var(--bb-line);

	--bb-i-chat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4 5h16a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H9l-5 4V6a1 1 0 0 1 1-1Z' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E");
	--bb-i-doc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8l-5-5Z' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M14 3v5h5' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E");
	--bb-i-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15 15 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11 11 0 0 0 3.4.55 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1 11 11 0 0 0 .55 3.4 1 1 0 0 1-.25 1l-2.2 2.4Z' fill='%23000'/%3E%3C/svg%3E");

	right: 20px;
	bottom: 20px;
	font-family: var(--ekgbot-font);
	line-height: 1.45;
}

/* ---- launcher: red pill with a chat icon ------------------------------- */
.ekgbot__launch {
	gap: 9px;
	padding: 13px 20px 13px 16px;
	border-radius: 999px;
	background: var(--bb-red);
	color: var(--bb-paper);
	font: 800 14px/1.2 var(--ekgbot-font);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	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(--bb-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(--bb-paper), 0 0 0 6px var(--bb-red); }
.ekgbot__launch:active { background: var(--bb-red-dark); transform: none; }
.ekgbot__dot {
	width: 20px;
	height: 20px;
	border-radius: 0;
	background: currentColor;
	-webkit-mask: var(--bb-i-chat) center / contain no-repeat;
	mask: var(--bb-i-chat) center / contain no-repeat;
}

/* ---- panel ------------------------------------------------------------- */
/* Sizes below are content-box, as Boss's panel and bubbles have always been measured. */
.ekgbot__panel,
.ekgbot__msg,
.ekgbot__note { box-sizing: content-box; }
.ekgbot__panel {
	width: 380px;
	max-width: calc(100vw - 32px);
	height: 560px;
	max-height: calc(100vh - 40px);
	background: var(--bb-paper);
	border: 1px solid var(--bb-line);
	border-radius: 14px;
	box-shadow: 0 24px 70px rgba(0, 0, 0, 0.32);
	transition: none;
}
.ekgbot.is-open .ekgbot__panel { animation: bb-rise 0.18s ease-out; }
@keyframes bb-rise {
	from { opacity: 0; transform: translateY(12px); }
	to { opacity: 1; transform: translateY(0); }
}

/* ---- header: charcoal, red rule, red bolt badge ------------------------ */
.ekgbot__head {
	align-items: center;
	gap: 11px;
	padding: 15px 16px;
	background: var(--bb-charcoal);
	color: var(--bb-on-dark);
	border-bottom: 3px solid var(--bb-red);
}
.ekgbot__head::before {
	content: "";
	flex: 0 0 36px;
	width: 36px;
	height: 36px;
	border-radius: 8px;
	background: var(--bb-red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 2 4 14h6l-1 8 9-12h-6l1-8Z' fill='%23fff'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
}
.ekgbot__titles { display: flex; flex-direction: column; }
.ekgbot__title {
	font: 800 15px/1.45 var(--ekgbot-font);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--bb-on-dark);
}
.ekgbot__who {
	margin: 0;
	font: 400 12px/1.45 var(--ekgbot-font);
	letter-spacing: 0.01em;
	color: var(--bb-on-dark-dim);
}
.ekgbot__close {
	width: 32px;
	height: 32px;
	margin: 0 0 0 auto;
	border: 0;
	border-radius: 6px;
	color: var(--bb-on-dark-dim);
	font-size: 20px;
	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; }
.ekgbot__close:focus-visible { outline: 2px solid var(--bb-on-dark); outline-offset: 1px; }

/* ---- breadcrumb -------------------------------------------------------- */
.ekgbot__crumbs {
	gap: 2px 4px;
	padding: 8px 14px;
	background: var(--bb-surface-subtle);
	border-bottom: 1px solid var(--bb-line);
	font: 400 12px/1.3 var(--ekgbot-font);
	color: var(--bb-muted);
}
.ekgbot__crumbs > span[aria-hidden] { color: var(--bb-muted); font-weight: 700; }
.ekgbot__crumb {
	padding: 1px 2px;
	border-radius: 3px;
	color: var(--bb-red);
	font-weight: 700;
	text-decoration: none;
}
.ekgbot__crumb:hover,
.ekgbot__crumb:focus-visible { text-decoration: underline; }
.ekgbot__crumb--current,
.ekgbot__crumb--current:hover { color: var(--bb-steel); font-weight: 700; text-decoration: none; }

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

/* guide and video links inside an answer */
.ekgbot__assets { flex-direction: column; align-items: stretch; gap: 6px; margin-top: 10px; }
.ekgbot__asset {
	align-items: center;
	gap: 7px;
	margin: 0;
	padding: 8px 10px;
	border: 1px solid var(--bb-line);
	border-radius: 8px;
	background: var(--bb-surface-subtle);
	color: var(--bb-red);
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	transition: border-color 0.15s ease, background 0.15s ease;
}
.ekgbot__asset::before {
	content: "";
	flex: 0 0 15px;
	width: 15px;
	height: 15px;
	background: currentColor;
	-webkit-mask: var(--bb-i-doc) center / contain no-repeat;
	mask: var(--bb-i-doc) center / contain no-repeat;
}
.ekgbot__asset:hover,
.ekgbot__asset:focus-visible { border-color: var(--bb-red); background: #fff; color: var(--bb-red); outline: none; }

/* the support-is-offline note under the form button */
.ekgbot__note {
	max-width: 88%;
	margin: -2px 0 12px;
	padding: 8px 12px;
	font-size: 12.5px;
	font-style: italic;
	color: var(--bb-muted);
	background: var(--bb-surface-subtle);
	border: 1px dashed var(--bb-line);
	border-radius: 10px;
}

/* ---- choices: a wrapping row of pills ---------------------------------- */
.ekgbot__choices {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 8px;
	max-height: none;
	padding: 12px 16px 16px;
	background: var(--bb-surface);
	border-top: 1px solid var(--bb-line);
}
.ekgbot__choice {
	display: inline-flex;
	width: auto;
	justify-content: center;
	padding: 10px 14px;
	border: 1px solid var(--bb-line-strong);
	border-radius: 999px;
	background: var(--bb-paper);
	color: var(--bb-ink);
	font: 600 13.5px/normal var(--ekgbot-font);
	transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}
.ekgbot__choice::after,
.ekgbot__choice--back::after { content: none; }
.ekgbot__choice:hover,
.ekgbot__choice:focus-visible { border-color: var(--bb-red); color: var(--bb-red); }
.ekgbot__choice:focus-visible { outline: 2px solid var(--bb-red); outline-offset: 2px; }
.ekgbot__choice:active { transform: translateY(1px); }
.ekgbot__choice--primary {
	background: var(--bb-red);
	border-color: var(--bb-red);
	color: #fff;
	font-weight: 800;
	font-size: 13px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.ekgbot__choice--primary:hover,
.ekgbot__choice--primary:focus-visible { background: var(--bb-red-dark); border-color: var(--bb-red-dark); color: #fff; }
.ekgbot__choice--back { justify-content: center; border-style: dashed; color: var(--bb-muted); font-weight: 600; }

/* the phone: the "call now" escalation, solid charcoal so it never reads as the form button */
.ekgbot__choice--phone {
	align-items: center;
	gap: 7px;
	background: var(--bb-charcoal);
	border-color: var(--bb-charcoal);
	color: var(--bb-on-dark);
	font-weight: 800;
	font-size: 13px;
	letter-spacing: 0.02em;
	text-decoration: none;
}
.ekgbot__choice--phone::before {
	content: "";
	flex: 0 0 15px;
	width: 15px;
	height: 15px;
	background: currentColor;
	-webkit-mask: var(--bb-i-phone) center / contain no-repeat;
	mask: var(--bb-i-phone) center / contain no-repeat;
}
.ekgbot__choice--phone:hover,
.ekgbot__choice--phone:focus-visible { background: var(--bb-ink); border-color: var(--bb-ink); color: var(--bb-on-dark); }
/* On a narrow phone the label wraps; balance it so the break falls after the "·", not inside the number. */
.ekgbot__choice--phone span { text-wrap: balance; }

/* ---- footer ------------------------------------------------------------ */
.ekgbot__foot {
	padding: 0 16px 12px;
	border-top: 0;
	background: var(--bb-surface);
	font: 400 11px/1.45 var(--ekgbot-font);
	color: var(--bb-muted);
	text-align: center;
}

/* While the site's phone menu is open it fills the screen; the widget steps aside rather than float over it. */
body:has(.ekg-nav.is-open) .ekgbot { display: none; }

/* ---- narrow screens ---------------------------------------------------- */
/* The widget's own phone sheet starts at 560px; Boss keeps the floating panel down to 480px. */
@media (max-width: 560px) {
	.ekgbot,
	.ekgbot.is-open { left: auto; right: 20px; bottom: 20px; }
	.ekgbot__panel { width: 380px; max-height: calc(100vh - 40px); border-bottom: 1px solid var(--bb-line); border-radius: 14px; }
	.ekgbot__choices { max-height: none; }
}
/* Phone: a near-full-height sheet, full-width launcher, one column of tall choices. */
@media (max-width: 480px) {
	.ekgbot,
	.ekgbot.is-open { right: 12px; bottom: 12px; left: 12px; }
	.ekgbot__launch { width: 100%; justify-content: center; }
	.ekgbot__panel {
		width: 100%;
		height: calc(100vh - 24px);
		max-height: calc(100vh - 24px);
		height: calc(100dvh - 24px);
		max-height: calc(100dvh - 24px);
	}
	.ekgbot__close { width: 40px; height: 40px; font-size: 24px; }
	.ekgbot__crumbs { padding: 10px 14px; }
	.ekgbot__crumb { padding: 4px; }
	.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; }
}

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