:root {
	--autofill-bg: #f8f9fa;
	--autofill-text: #202124;
	--autofill-hover-bg: #e0e0e0;
	--autofill-hover-text: #202124;
	--autofill-border: #dadce0;
	--brand-color: #009898;
	--button-bg: #ffffff;
	--button-text: #202124;
	--button-hover: #009898;
}

/* General styles */
body {
	font-family: "Avenir Next", sans-serif;
}

/* Logo container styles */
#logo-container {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	z-index: -1;
}

#logo {
	width: 80px;
}

#welcome-message {
	font-size: 16px;
	margin-top: 10px;
	color: #009898;
	font-style: italic;
}

#hint-message {
	font-size: 2rem;
	margin-top: 10px;
	color: #595959;
}

@keyframes textShine {
	0% {
		background-position: -100% 0;
	}
	50% {
		background-position: 100% 0;
	}
	100% {
		background-position: -100% 0;
	}
}

.hello {
	font-weight: 600;
	background-image: linear-gradient(
		to right,
		rgba(0, 152, 152, 1) 0%,
		rgba(60, 255, 82, 1) 33%,
		rgba(113, 130, 255, 1) 66%,
		rgba(0, 152, 152, 1) 100%
	);
	background-size: 300% 100%;
	background-position: -100% 0;
	-webkit-background-clip: text;
	color: transparent;
	animation: textShine 5s ease infinite;
}

/* Fixed input bar */
#user-input-container {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 75%;
	margin: 0 auto;
	padding: 10px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 10px;
	z-index: 1000;
}

.input-wrapper {
	position: relative;
	display: block;
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
}

#user-input {
	width: 100%;
	height: 56px;
	min-height: 56px;
	box-sizing: border-box;
	border: 1px solid #888;
	border-radius: 12px;
	padding: 0 92px 0 18px;
	font-size: 16px;
	font-family: "Avenir Next", sans-serif;
	background: #fff;
}

#user-input:focus {
	border-color: #009898;
	outline: none;
}

#user-input::placeholder {
	white-space: pre-wrap;
}

#mic-button,
#send-button {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 34px;
	height: 34px;
	min-width: 34px;
	min-height: 34px;
	padding: 0;
	margin: 0;
	border: none;
	border-radius: 50%;
	background: transparent;
	box-shadow: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 20;
	line-height: 1;
	color: #009898;
}

#mic-button {
	right: 48px;
}

#send-button {
	right: 10px;
}

#mic-button i,
#send-button i,
#microphoneIcon {
	font-size: 18px;
	color: #009898;
	pointer-events: none;
}

#microphoneIcon.listening,
#mic-button.listening i {
	color: #e53935;
}

#send-button:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

#send-button.loading {
	background: transparent;
	cursor: wait;
}

#clear-chat-button {
	position: static;
	flex: 0 0 52px;
	width: 52px;
	height: 52px;
	min-width: 52px;
	min-height: 52px;
	padding: 0;
	margin: 0;
	border: none;
	border-radius: 18px;
	background: rgba(0, 152, 152, 0.12);
	color: #008c8c;
	cursor: pointer;
	font-size: 18px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

#clear-chat-button:hover {
	background: rgba(0, 152, 152, 0.22);
}

/* Autofill buttons */
.autofill.button-style,
#conversation .autofill.button-style,
.bot-response-text .autofill.button-style {
	display: inline-block;
	padding: 10px 20px;
	margin: 5px;
	border: 1px solid var(--autofill-border, #dadce0);
	border-radius: 10px;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	background-color: var(--autofill-bg, #f8f9fa);
	color: var(--autofill-text, #202124);
	-webkit-text-fill-color: var(--autofill-text, #202124);
	transition:
		background-color 0.3s,
		color 0.3s;
	font-size: 15px;
	line-height: 1.3;
	font-family: "Avenir Next", sans-serif;
}

.autofill.button-style:hover,
#conversation .autofill.button-style:hover,
.bot-response-text .autofill.button-style:hover {
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
	background-color: var(--autofill-hover-bg, #e0e0e0);
	color: var(--autofill-hover-text, #202124);
	-webkit-text-fill-color: var(--autofill-hover-text, #202124);
}

.button-style {
	padding: 10px 15px;
	border: 2px solid var(--brand-color);
	border-radius: 10px;
	background-color: var(--button-bg);
	color: var(--button-text);
	cursor: pointer;
	font-size: 14px;
}

.autofill.button-style.visited,
.button-style.visited,
#conversation .autofill.button-style.visited,
.bot-response-text .autofill.button-style.visited {
	background-color: white !important;
	color: #595959 !important;
	-webkit-text-fill-color: #595959 !important;
	border: 2px solid #dadce0 !important;
	position: relative;
	padding-left: 30px !important;
	text-decoration: none !important;
}

.autofill.button-style.visited::before,
.button-style.visited::before,
#conversation .autofill.button-style.visited::before,
.bot-response-text .autofill.button-style.visited::before {
	content: "✓";
	color: #595959;
	position: absolute;
	left: 10px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 16px;
	line-height: 1;
}

/* Hint mic inside welcome text only */
.hint-mic {
	position: static;
	transform: none;
	font-size: 1em;
	vertical-align: middle;
	cursor: default;
}

/* Conversation */
#conversation {
	padding-left: 10px;
	padding-right: 10px;
	max-width: 100%;
	box-sizing: border-box;
}

#conversation li {
	list-style: none;
	margin-bottom: 10px;
	padding: 0 10px;
	justify-content: left;
	font-size: 16px;
}

#conversation li.user {
	color: #333;
	background-color: #f0f0f0;
	border-radius: 5px;
	text-align: center;
	min-height: 30px;
	display: flex;
	align-items: center;
	position: relative;
	justify-content: center;
	padding: 8px 72px 8px 12px;
}

#conversation li.user .message-text {
	text-align: center;
	flex: 1;
}

#conversation li.user .message-time {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 11px;
	color: #777;
	white-space: nowrap;
}

#conversation li.bot {
	color: #24302b;
	border-radius: 5px;
	text-align: left;
	min-height: 50px;
}

#conversation li.bot .message-time {
	text-align: right;
	font-size: 11px;
	color: #999;
	margin-top: 4px;
}

/* Mobile */
@media (max-width: 768px) {
	#user-input-container {
		width: 100%;
		padding: 8px;
		gap: 8px;
	}

	#user-input {
		height: 52px;
		min-height: 52px;
		padding-right: 86px;
		font-size: 15px;
	}

	#mic-button {
		right: 44px;
	}

	#send-button {
		right: 8px;
	}

	#clear-chat-button {
		flex-basis: 48px;
		width: 48px;
		height: 48px;
		min-width: 48px;
		min-height: 48px;
	}

	#hint-message {
		font-size: 1.4rem;
	}

	.autofill.button-style {
		font-size: 12px;
	}
}

@media (max-width: 360px) {
	#user-input-container {
		gap: 6px;
	}

	#user-input {
		padding-left: 12px;
		padding-right: 78px;
		font-size: 14px;
	}

	#mic-button,
	#send-button {
		width: 30px;
		height: 30px;
		min-width: 30px;
		min-height: 30px;
	}

	#mic-button {
		right: 40px;
	}

	#send-button {
		right: 7px;
	}

	#clear-chat-button {
		flex-basis: 44px;
		width: 44px;
		height: 44px;
		min-width: 44px;
		min-height: 44px;
	}
}
/* ============================================================
   SAGE CHAT MESSAGE ALIGNMENT + RESPONSE COLOUR
   31 Aug 2026
   ============================================================ */

/* ------------------------------------------------------------
   USER QUERY
   Compact content-width bubble aligned to the right.
   ------------------------------------------------------------ */

#conversation li.user {
	/* override old full-width centred user row */
	display: flex !important;
	width: fit-content !important;
	max-width: min(86%, 1100px) !important;

	margin-left: auto !important;
	margin-right: 0 !important;
	margin-bottom: 30px !important;

	padding: 8px 14px !important;

	background-color: #e4ebe6 !important;
	color: #24302b !important;

	border-radius: 14px !important;

	justify-content: flex-start !important;
	align-items: center !important;

	text-align: left !important;

	position: relative !important;

	min-height: 0 !important;
	box-sizing: border-box !important;
}

/* The text itself should not expand the bubble to full width */
#conversation li.user .message-text {
	display: block !important;
	width: auto !important;
	flex: 0 1 auto !important;

	text-align: left !important;
	color: #24302b !important;

	white-space: normal !important;
	overflow-wrap: anywhere !important;
}

/* Username / My SAGE profile link */
#conversation li.user .sage-user-name {
	color: #24302b !important;
	font-weight: 700 !important;
}

/* Actual query text */
#conversation li.user .user-message-content {
	color: #24302b !important;
	font-weight: 400 !important;
}

/* ------------------------------------------------------------
   USER MESSAGE DATE + TIME
   Lives immediately underneath the compact user bubble.
   ------------------------------------------------------------ */

#conversation li.user .message-time {
	position: absolute !important;

	top: calc(100% + 5px) !important;
	right: 0 !important;
	left: auto !important;

	transform: none !important;

	display: flex !important;
	align-items: center !important;
	justify-content: flex-end !important;
	gap: 6px !important;

	width: max-content !important;
	max-width: 100% !important;

	margin: 0 !important;
	padding: 0 !important;

	font-size: 11px !important;
	line-height: 1.2 !important;

	color: #7a827e !important;
	white-space: nowrap !important;
}

/*
   DOM currently is:
   time
   ⓘ
   date

   Visually reorder it to:
   time  date  ⓘ
*/
#conversation li.user .sage-time-clock {
	order: 1 !important;
}

#conversation li.user .sage-time-date {
	order: 2 !important;
}

#conversation li.user .sage-time-info {
	order: 3 !important;
}

/* Preserve native hidden behaviour */
#conversation li.user .sage-time-date[hidden] {
	display: none !important;
}

/* ⓘ stays at far right and must never appear italic */
#conversation li.user .sage-time-info {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;

	margin: 0 !important;
	padding: 0 !important;

	border: 0 !important;
	background: transparent !important;

	color: #7a827e !important;

	font-family: inherit !important;
	font-size: 12px !important;
	font-style: normal !important;
	font-weight: 400 !important;
	line-height: 1 !important;

	cursor: pointer !important;
}

/* ------------------------------------------------------------
   BOT RESPONSE COPY
   Replace the old teal / blue body-copy appearance.
   ------------------------------------------------------------ */

#conversation li.bot,
#conversation li.bot .bot-response-text,
#conversation li.bot .bot-response-text p,
#conversation li.bot .bot-response-text span:not(.autofill):not(.button-style),
#conversation li.bot .bot-response-text div:not(.bot-actions),
#conversation li.bot .bot-response-text ul,
#conversation li.bot .bot-response-text ol,
#conversation li.bot .bot-response-text li,
#conversation li.bot .bot-response-text b,
#conversation li.bot .bot-response-text strong,
#conversation li.bot .bot-response-text em,
#conversation
	li.bot
	.bot-response-text
	i:not(.fa):not(.fas):not(.far):not(.fab):not(.fa-solid):not(.fa-brands),
#conversation li.bot .bot-response-text h1,
#conversation li.bot .bot-response-text h2,
#conversation li.bot .bot-response-text h3,
#conversation li.bot .bot-response-text h4,
#conversation li.bot .bot-response-text h5,
#conversation li.bot .bot-response-text h6 {
	color: #24302b !important;
}

/* SAGE: label also uses the same dark green-grey */
#conversation li.bot .bot-name {
	color: #24302b !important;
}

/* Ordinary inline links inside an answer */
#conversation li.bot .bot-response-text a:not(.autofill):not(.button-style) {
	color: #24302b !important;
	text-decoration-color: #24302b !important;
}

/* ------------------------------------------------------------
   MOBILE
   Bubble stays compact but is allowed more usable width.
   ------------------------------------------------------------ */

@media (max-width: 600px) {
	#conversation li.user {
		max-width: 92% !important;
		padding: 8px 12px !important;
		margin-bottom: 28px !important;
	}

	#conversation li.user .message-time {
		font-size: 10px !important;
		gap: 5px !important;
	}

	#conversation li.user .sage-time-info {
		font-size: 11px !important;
	}
}
/* ============================================================
   SAGE MESSAGE BUBBLES + INPUT MASK
   31 Aug 2026
   ============================================================ */

/* ------------------------------------------------------------
   FIXED INPUT BAR MASK
   Prevent conversation content showing through behind it
   ------------------------------------------------------------ */

#user-input-container {
	background: #ffffff !important;
	z-index: 5000 !important;
}

/*
   A subtle full-width mask immediately beneath the input bar.
   This keeps scrolling messages visually separated from the
   fixed composer.
*/
#user-input-container::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 0;
	transform: translateX(-50%);
	width: 100vw;
	height: 100%;
	background: #ffffff;
	z-index: -1;
	pointer-events: none;
}

/* ------------------------------------------------------------
   USER QUERY BUBBLE
   top-left 25
   top-right 25
   bottom-right 5
   bottom-left 25
   ------------------------------------------------------------ */

#conversation li.user {
	display: flex !important;

	width: fit-content !important;
	max-width: min(86%, 1100px) !important;

	margin-left: auto !important;
	margin-right: 0 !important;
	margin-bottom: 30px !important;

	padding: 9px 16px !important;

	background: #e4ebe6 !important;
	color: #24302b !important;

	border: 0 !important;
	border-radius: 25px 25px 5px 25px !important;

	min-height: 0 !important;

	align-items: center !important;
	justify-content: flex-start !important;

	text-align: left !important;

	position: relative !important;
	box-sizing: border-box !important;
}

#conversation li.user .message-text {
	display: block !important;
	width: auto !important;
	flex: 0 1 auto !important;

	text-align: left !important;
	color: #24302b !important;

	white-space: normal !important;
	overflow-wrap: anywhere !important;
}

/* ------------------------------------------------------------
   BOT RESPONSE BUBBLE
   top-left 25
   top-right 5
   bottom-right 25
   bottom-left 25
   ------------------------------------------------------------ */

#conversation li.bot {
	display: block !important;

	width: auto !important;
	max-width: 100% !important;

	margin-left: 0 !important;
	margin-right: 0 !important;
	margin-bottom: 18px !important;

	padding: 18px 20px !important;

	background: rgba(250, 249, 245, 0.8) !important;
	color: #24302b !important;

	border: 0 !important;
	border-radius: 25px 5px 25px 25px !important;

	text-align: left !important;

	box-sizing: border-box !important;
}

/* Make sure actual SAGE answer text inherits the dark colour */
#conversation li.bot .bot-response-text,
#conversation li.bot .bot-response-text p,
#conversation li.bot .bot-response-text ul,
#conversation li.bot .bot-response-text ol,
#conversation li.bot .bot-response-text li,
#conversation li.bot .bot-response-text strong,
#conversation li.bot .bot-response-text b,
#conversation li.bot .bot-name {
	color: #24302b !important;
}

/* ------------------------------------------------------------
   Keep bot timestamp subtle and outside visual competition
   ------------------------------------------------------------ */

#conversation li.bot .message-time {
	color: #8b918e !important;
	font-size: 11px !important;
	margin-top: 8px !important;
	text-align: right !important;
}

/* ------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------ */

@media (max-width: 600px) {
	#conversation li.user {
		max-width: 92% !important;
		padding: 8px 13px !important;
		border-radius: 22px 22px 5px 22px !important;
	}

	#conversation li.bot {
		padding: 15px 16px !important;
		border-radius: 22px 5px 22px 22px !important;
	}

	#user-input-container::before {
		width: 100vw;
	}
}

/* ============================================================
   SAGE CHAT TOP-ANCHOR FIX — 31 Aug 2026
   The composer is position:fixed, so it is outside normal layout flow.
   Keep exactly one stable clearance below it and prevent #conversation
   from flex-growing into an empty spacer. This also neutralises legacy
   UL margins that can make the newest turn appear to drift downward.
   ============================================================ */
#chat-window {
	margin-top: 0 !important;
	padding-top: 86px !important;
	min-height: 0 !important;
	box-sizing: border-box !important;
	scroll-padding-top: 86px !important;
}

#conversation {
	display: block !important;
	flex: none !important;
	height: auto !important;
	min-height: 0 !important;
	margin: 0 !important;
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
	padding-top: 0 !important;
	padding-bottom: 18px !important;
	box-sizing: border-box !important;
}

#conversation > li:first-of-type {
	margin-top: 0 !important;
}

@media (max-width: 600px) {
	#chat-window {
		padding-top: 78px !important;
		scroll-padding-top: 78px !important;
	}
}

/* ============================================================
   RECIPE PAGINATION VISIBILITY FIX — 31 Aug 2026
   .recipe-image-button uses display:flex!important. This selector is
   deliberately more specific and later in the cascade so recipes after
   the current page remain genuinely hidden until Show 8 more is pressed.
   ============================================================ */
.recipe-results-group .recipe-image-button.recipe-page-hidden {
	display: none !important;
}

/* ============================================================
   RESPONSIVE YOUTUBE EMBEDS
   Maintain native 16:9 video proportions on every device.
   Overrides legacy iframe height="215" attributes.
   ============================================================ */

#conversation .bot-response-text iframe[src*="youtube.com/embed/"],
#conversation .bot-response-text iframe[src*="youtube-nocookie.com/embed/"] {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	aspect-ratio: 16 / 9 !important;

	margin: 10px 0 0 !important;

	border: 0 !important;
	border-radius: 12px !important;

	background: #000;
}

/*
   Legacy song/video wrappers currently contain min-width:300px.
   Don't allow that to force horizontal overflow on narrow phones.
*/
#conversation .bot-response-text div[style*="min-width:300px"],
#conversation .bot-response-text div[style*="min-width: 300px"] {
	min-width: 0 !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
}

/* Slightly softer radius on small screens */
@media (max-width: 600px) {
	#conversation .bot-response-text iframe[src*="youtube.com/embed/"],
	#conversation .bot-response-text iframe[src*="youtube-nocookie.com/embed/"] {
		border-radius: 9px !important;
	}
}

/* === SAGE Stage 27.6.11a: canonical bot-response typography === */
#conversation li.bot,
#conversation li.bot .bot-response-text,
#conversation li.bot .bot-response-text *:not(code):not(pre):not(kbd):not(samp):not(.fa):not(.fas):not(.far):not(.fab):not(.fa-solid):not(.fa-brands),
#conversation li.bot .bot-name {
	font-family: "Avenir Next", Avenir, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}
#conversation li.bot .bot-response-text code,
#conversation li.bot .bot-response-text kbd,
#conversation li.bot .bot-response-text samp {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace !important;
}
#conversation li.bot .bot-response-text pre:not(.sage-ascii-diagram) {
	font-family: "Avenir Next", Avenir, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}
/* === /SAGE Stage 27.6.11a === */

/* === SAGE Stage 27.6.11j: semantic responsive content === */
#conversation li.bot .bot-response-text {
	min-width: 0 !important;
	max-width: 100% !important;
	overflow-x: hidden !important;
}
#conversation li.bot .bot-response-text > * {
	min-width: 0 !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
}
#conversation li.bot .bot-response-text pre:not(.sage-ascii-diagram) {
	font-family: "Avenir Next", Avenir, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
	white-space: pre-wrap !important;
	overflow-wrap: anywhere !important;
	word-break: normal !important;
	overflow-x: hidden !important;
	line-height: 1.55 !important;
}
#conversation li.bot .bot-response-text .sage-flow {
	font-family: "Avenir Next", Avenir, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 1rem 0 1.35rem !important;
	padding: 0 !important;
	text-align: left !important;
}
#conversation li.bot .bot-response-text .sage-flow-step,
#conversation li.bot .bot-response-text .sage-flow-arrow,
#conversation li.bot .bot-response-text .sage-flow-plus,
#conversation li.bot .bot-response-text .sage-flow-continuation,
#conversation li.bot .bot-response-text .sage-diagram-title {
	font-family: "Avenir Next", Avenir, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
	max-width: 100% !important;
	overflow-wrap: anywhere !important;
	word-break: normal !important;
}
#conversation li.bot .bot-response-text .sage-flow-step {padding:.08rem 0 !important;}
#conversation li.bot .bot-response-text .sage-flow-arrow,
#conversation li.bot .bot-response-text .sage-flow-plus {padding:.08rem 0 !important;font-weight:600;}
#conversation li.bot .bot-response-text .sage-flow-continuation {display:inline-block;padding-top:.12rem;}
#conversation li.bot .bot-response-text .sage-diagram-title {margin:1.1rem 0 .35rem !important;}
@media (max-width: 600px) {
	#conversation li.bot .bot-response-text h1 {font-size: 1.55rem !important; line-height: 1.18 !important;}
	#conversation li.bot .bot-response-text h2 {font-size: 1.3rem !important; line-height: 1.22 !important;}
	#conversation li.bot .bot-response-text h3 {font-size: 1.12rem !important; line-height: 1.28 !important;}
	#conversation li.bot .bot-response-text p,
	#conversation li.bot .bot-response-text li,
	#conversation li.bot .bot-response-text blockquote {overflow-wrap:anywhere !important;word-break:normal !important;}
	#conversation li.bot .bot-response-text ul,
	#conversation li.bot .bot-response-text ol {padding-left:1.2rem !important;}
	#conversation li.bot .bot-response-text .sage-flow {margin:.85rem 0 1.1rem !important;}
}
/* === /SAGE Stage 27.6.11j === */

/* === SAGE Stage 27.6.11k: genuine branching ASCII diagrams === */
#conversation li.bot .bot-response-text pre.sage-ascii-diagram,
#conversation li.bot .bot-response-text .sage-ascii-diagram {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace !important;
	font-size: 15px !important;
	font-weight: 400 !important;
	white-space: pre !important;
	line-height: 1.35 !important;
	letter-spacing: 0 !important;
	word-spacing: 0 !important;
	tab-size: 4;
	display: block !important;
	width: max-content !important;
	max-width: 100% !important;
	min-width: 0 !important;
	overflow-x: auto !important;
	overflow-y: hidden !important;
	overflow-wrap: normal !important;
	word-break: normal !important;
	box-sizing: border-box !important;
	margin: 1.15rem auto !important;
	padding: .75rem .85rem !important;
	background: transparent !important;
	border: 0 !important;
	text-align: left !important;
	direction: ltr !important;
	-webkit-overflow-scrolling: touch;
}
@media (max-width: 600px) {
	#conversation li.bot .bot-response-text pre.sage-ascii-diagram,
	#conversation li.bot .bot-response-text .sage-ascii-diagram {
		font-size: 13px !important;
		line-height: 1.32 !important;
		width: max-content !important;
		max-width: 100% !important;
		margin: 1rem auto !important;
		padding: .55rem .35rem !important;
	}
}
/* === /SAGE Stage 27.6.11k === */


/* === SAGE Stage 27.6.11l: visual alignment across desktop/mobile === */
#conversation li.bot .bot-response-text pre.sage-ascii-diagram,
#conversation li.bot .bot-response-text .sage-ascii-diagram {
	font-size: 18px !important;
	line-height: 1.38 !important;
	width: max-content !important;
	max-width: 100% !important;
	margin: 1.15rem 0 1.25rem !important;
	padding: .55rem 0 !important;
	text-align: left !important;
}
#conversation li.bot .bot-response-text .sage-flow.sage-flow-branch-tail {
	width: auto !important;
	max-width: 32rem !important;
	margin: -.25rem 0 1.35rem 0 !important;
}
#conversation li.bot .bot-response-text .sage-ascii-diagram + .sage-flow {
	margin-top: -.25rem !important;
}
@media (max-width: 600px) {
	#conversation li.bot .bot-response-text pre.sage-ascii-diagram,
	#conversation li.bot .bot-response-text .sage-ascii-diagram {
		font-size: 13px !important;
		line-height: 1.34 !important;
		margin: .85rem 0 1rem !important;
		padding: .35rem 0 !important;
	}
	#conversation li.bot .bot-response-text .sage-flow.sage-flow-branch-tail {
		max-width: 100% !important;
		margin: -.15rem 0 1.15rem 0 !important;
	}
}
/* === /SAGE Stage 27.6.11l === */


/* === SAGE Stage 27.6.11m: responsive diagram components === */
#conversation li.bot .bot-response-text .sage-diagram-block {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace !important;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	overflow-x: auto !important;
	overflow-y: hidden !important;
	box-sizing: border-box !important;
	margin: 1.1rem 0 1.35rem !important;
	padding: .25rem 0 !important;
	-webkit-overflow-scrolling: touch;
}
#conversation li.bot .bot-response-text .sage-diagram-block > pre.sage-ascii-diagram {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace !important;
	font-size: 20px !important;
	line-height: 1.42 !important;
	font-weight: 400 !important;
	white-space: pre !important;
	letter-spacing: 0 !important;
	word-spacing: 0 !important;
	width: max-content !important;
	max-width: none !important;
	min-width: max-content !important;
	overflow: visible !important;
	margin: 0 !important;
	padding: .25rem .35rem !important;
	background: transparent !important;
	border: 0 !important;
	text-align: left !important;
	direction: ltr !important;
}
#conversation li.bot .bot-response-text .sage-diagram-sequence {
	display: inline-flex !important;
	flex-direction: column !important;
	align-items: stretch !important;
	max-width: 100% !important;
	min-width: 0 !important;
	margin: 1.05rem 0 1.4rem !important;
	box-sizing: border-box !important;
}
#conversation li.bot .bot-response-text .sage-diagram-sequence .sage-diagram-block {
	width: auto !important;
	max-width: 100% !important;
	margin: 0 !important;
}
#conversation li.bot .bot-response-text .sage-diagram-sequence .sage-flow.sage-flow-branch-tail {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	width: 100% !important;
	max-width: none !important;
	margin: .15rem 0 0 !important;
	padding: 0 !important;
	text-align: center !important;
}
#conversation li.bot .bot-response-text .sage-diagram-sequence .sage-flow-step,
#conversation li.bot .bot-response-text .sage-diagram-sequence .sage-flow-arrow {
	font-family: "Avenir Next", Avenir, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
	width: auto !important;
	max-width: 100% !important;
	text-align: center !important;
}
@media (max-width: 600px) {
	#conversation li.bot .bot-response-text .sage-diagram-block > pre.sage-ascii-diagram {
		font-size: 14px !important;
		line-height: 1.38 !important;
		padding: .2rem .2rem !important;
	}
	#conversation li.bot .bot-response-text .sage-diagram-block {
		margin: .9rem 0 1.1rem !important;
	}
	#conversation li.bot .bot-response-text .sage-diagram-sequence {
		margin: .85rem 0 1.2rem !important;
	}
}
/* === /SAGE Stage 27.6.11m === */

/* === SAGE Stage 30.0A4: one vertical scroll owner for chat ===
   main.css makes BOTH #chat-window and #conversation scrollable. Later SAGE
   layout rules make #conversation auto-height, so keeping overflow:auto there
   creates a redundant inner scrollbar beside short responses such as My
   Reminders. #chat-window remains the sole vertical scroll container.
   ============================================================ */
#conversation {
    overflow: visible !important;
    padding-right: 0 !important;
}
#conversation::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}
/* === /SAGE Stage 30.0A4 === */


/* Stage 30.Q1 — SAGE Quiz modal and three-state Quest status */
body.sage-quiz-open{overflow:hidden!important}
.sage-quiz-modal{position:fixed;inset:0;z-index:40000;display:grid;place-items:center;padding:18px;background:rgba(18,35,33,.58);backdrop-filter:blur(5px)}
.sage-quiz-card{width:min(760px,100%);max-height:92vh;overflow:hidden;background:#fff;border-radius:22px;padding:24px;box-shadow:0 28px 90px rgba(0,0,0,.25);color:#20302d;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto}
.sage-quiz-head{display:flex;gap:18px;justify-content:space-between;align-items:flex-start}.sage-quiz-head h2{margin:2px 0 6px;font-size:1.55rem}.sage-quiz-head p{margin:0;color:#61716d}.sage-quiz-close{border:0;background:#edf7f5;color:#087f7b;border-radius:50%;width:42px;height:42px;font-size:1.6rem;cursor:pointer;flex:0 0 auto}
.sage-quiz-progress{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:18px 0;padding:12px 14px;border-radius:13px;background:#f2f8f7}.sage-quiz-progress span{font-weight:700;color:#087f7b}.sage-quiz-progress strong{font-weight:600;color:#50615d}
.sage-quiz-stage{overflow:auto;min-height:0;padding:2px 2px 8px}
.sage-quiz-question-one{border:1px solid #d8e4e1;border-radius:16px;padding:18px}.sage-quiz-question-count{font-size:.82rem;color:#6a7a76;margin-bottom:8px}.sage-quiz-question-one h3{margin:0 0 14px;font-size:1.08rem;line-height:1.45}.sage-quiz-question-one h3>span{display:inline-grid;place-items:center;width:28px;height:28px;margin-right:8px;border-radius:50%;background:#e7f5f3;color:#087f7b}.sage-quiz-options{display:grid;gap:9px}.sage-quiz-option{display:flex;gap:10px;align-items:flex-start;border:1px solid #dbe5e3;border-radius:12px;padding:12px;cursor:pointer;background:#fff}.sage-quiz-option:has(input:checked),.sage-quiz-option.is-selected{border-color:#079b98;background:#f0fbf9}.sage-quiz-option input{margin-top:3px;accent-color:#079b98}.sage-quiz-option input:disabled{cursor:default}.sage-quiz-feedback{margin-top:12px;padding:11px 12px;border-radius:10px;background:#f5f8f7}.sage-quiz-feedback.is-correct{border-left:4px solid #6fb690}.sage-quiz-feedback.is-wrong{border-left:4px solid #d8a15a}.sage-quiz-validation{margin-top:10px;color:#8a5a1f;font-weight:600}
.sage-quiz-nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding-top:16px;background:#fff}.sage-quiz-nav button{border-radius:12px;padding:10px 16px;font:inherit;cursor:pointer}.sage-quiz-back{justify-self:start;background:#fff;border:1px solid #cad9d6}.sage-quiz-next{justify-self:end;background:#fff;border:1px solid #cad9d6}.sage-quiz-center{justify-self:center}.sage-quiz-submit-one,.sage-quiz-finish,.sage-quiz-done,.sage-quiz-retry{background:#079b98;color:#fff;border:1px solid #079b98;font-weight:600}.sage-quiz-nav button:disabled{opacity:.45;cursor:not-allowed}.sage-quiz-review-label{font-weight:700;color:#087f7b}.sage-quiz-inline-status{display:inline-block;margin-left:10px;font-weight:650;color:#087f7b}.quest-complete.sage-quiz-status-button span{white-space:nowrap}
@media(max-width:640px){.sage-quiz-modal{padding:0}.sage-quiz-card{height:100dvh;max-height:none;border-radius:0;padding:18px}.sage-quiz-progress{display:grid}.sage-quiz-head h2{font-size:1.35rem}.sage-quiz-nav{position:sticky;bottom:-18px;padding:14px 0 4px}.sage-quiz-nav button{padding:10px 12px}}


/* === SAGE Stage 30.Q1.2: quiz authentication + explicit re-attempt === */
.sage-quiz-retake-button{margin-left:8px}
.sage-quiz-auth-card{position:relative;width:min(520px,100%);background:#fff;border-radius:22px;padding:30px;box-shadow:0 28px 90px rgba(0,0,0,.25);color:#20302d;text-align:left}
.sage-quiz-auth-card>.sage-quiz-close{position:absolute;top:18px;right:18px}
.sage-quiz-auth-card h2{margin:2px 54px 12px 0;font-size:1.45rem}
.sage-quiz-auth-card p{margin:0 0 22px;color:#61716d;line-height:1.55}
.sage-quiz-signin{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 20px;border-radius:12px;background:#079b98;color:#fff!important;text-decoration:none!important;font-weight:700;border:1px solid #079b98}
.sage-quiz-signin:hover{filter:brightness(.96)}
@media(max-width:640px){.sage-quiz-auth-card{margin:18px;padding:24px 20px;border-radius:18px}.sage-quiz-signin{width:100%;box-sizing:border-box}.sage-quiz-retake-button{margin-left:6px;margin-top:8px}}
/* === /SAGE Stage 30.Q1.2 === */


/* Stage 30.Q2.2: resilient mobile quiz layout */
.sage-quiz-toast{position:fixed;left:50%;bottom:24px;z-index:50050;max-width:min(520px,calc(100vw - 32px));transform:translate(-50%,18px);opacity:0;transition:.2s ease;background:#20302d;color:#fff;padding:12px 16px;border-radius:12px;box-shadow:0 12px 34px rgba(0,0,0,.24);font-weight:600;text-align:center}
.sage-quiz-toast.show{transform:translate(-50%,0);opacity:1}
@media(max-width:640px){
  .sage-quiz-modal{padding:10px;box-sizing:border-box;align-items:center;justify-items:center;overflow:hidden}
  .sage-quiz-card{width:100%;height:min(100dvh - 20px,900px);max-height:calc(100dvh - 20px);border-radius:18px;padding:0;overflow:hidden;grid-template-rows:auto auto minmax(0,1fr) auto;box-sizing:border-box}
  .sage-quiz-head{padding:18px 18px 10px;gap:12px;box-sizing:border-box}
  .sage-quiz-head>div{min-width:0}
  .sage-quiz-head h2{font-size:1.22rem;line-height:1.25;margin:0 0 6px;overflow-wrap:anywhere}
  .sage-quiz-head p{font-size:.9rem;line-height:1.4}
  .sage-quiz-close{width:38px;height:38px;font-size:1.45rem}
  .sage-quiz-progress{margin:0 18px 12px;padding:10px 12px;gap:6px}
  .sage-quiz-progress strong{font-size:.86rem;line-height:1.35}
  .sage-quiz-stage{padding:0 18px 16px;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  .sage-quiz-question-one{padding:15px;border-radius:14px}
  .sage-quiz-question-one h3{font-size:1rem;line-height:1.4}
  .sage-quiz-option{padding:10px 11px}
  .sage-quiz-nav{position:relative;bottom:auto;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:8px;padding:12px 18px calc(12px + env(safe-area-inset-bottom));border-top:1px solid #e4eeec;box-shadow:0 -8px 22px rgba(17,52,48,.06);box-sizing:border-box}
  .sage-quiz-nav button{min-width:0;max-width:100%;padding:10px 8px;font-size:.9rem;white-space:nowrap}
  .sage-quiz-back{justify-self:start}.sage-quiz-next{justify-self:end}.sage-quiz-center{justify-self:center;min-width:0}
  .sage-quiz-center button{white-space:nowrap}
  .sage-quiz-toast{bottom:calc(16px + env(safe-area-inset-bottom));font-size:.92rem}
}
@media(max-width:360px){
  .sage-quiz-modal{padding:6px}
  .sage-quiz-card{height:calc(100dvh - 12px);max-height:calc(100dvh - 12px)}
  .sage-quiz-head{padding:14px 14px 8px}.sage-quiz-progress{margin:0 14px 10px}.sage-quiz-stage{padding:0 14px 12px}.sage-quiz-nav{padding-left:14px;padding-right:14px;gap:6px}
  .sage-quiz-nav button{font-size:.84rem;padding:9px 6px}
}

/* Stage 30.Q3 — Planet B two-chance quiz + evidence review */
.sage-quiz-resolved-label{font-weight:700;color:#087f7b}
.sage-quiz-review-evidence{display:grid;gap:12px}
.sage-quiz-review-evidence h3{margin-bottom:2px}
.sage-quiz-review-row,.sage-quiz-review-result,.sage-quiz-related-learning{padding:11px 12px;border-radius:11px;background:#f5f8f7;line-height:1.45}
.sage-quiz-review-row>b,.sage-quiz-related-learning>b{display:block;margin-bottom:4px;color:#334642}
.sage-quiz-review-result{border-left:4px solid #079b98}
.sage-quiz-related-learning .button-style{display:inline-flex;margin-top:8px}

/* Stage 30.Q3.1 — quiz query cards + live state refresh */
.sage-quiz-dynamic{display:grid;gap:12px}
.sage-quiz-state-summary{display:grid;gap:8px}
.sage-quiz-state-row{line-height:1.45;color:#50615d}
.sage-quiz-state-row b{color:#2f423e}
.sage-quiz-query-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.sage-quiz-query-actions .button-style{margin:0}
.sage-quiz-catalog-button{text-decoration:none!important}
.sage-quiz-learning{text-decoration:none!important}
@media(max-width:640px){.sage-quiz-query-actions{gap:7px}.sage-quiz-query-actions .button-style{width:auto}}
/* === /SAGE Stage 30.Q3.1 === */

/* === SAGE Stage 30.4A: keep chat scrolling, hide the intrusive visible rail ===
   #chat-window remains the single vertical scroll owner. The scrollbar itself
   is hidden so it no longer appears to be embedded inside each response card.
   Wheel, trackpad, touch, keyboard and programmatic scrolling still work.
   ============================================================ */
#chat-window {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}
#chat-window::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}
/* === /SAGE Stage 30.4A === */

/* === SAGE Stage 30.9C: client-host scroll ownership ===
   Direct partner shells (Climate Healers, Together Around Food, etc.) let the
   host page own vertical scrolling. Standalone sage.sync.quest is unchanged. */
html.sage-client-host,
html.sage-client-host body {
    height: auto !important;
    min-height: 100% !important;
    overflow-y: visible !important;
}
html.sage-client-host #chat-window,
html.sage-client-host #conversation {
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}
html.sage-client-host #chat-window::-webkit-scrollbar,
html.sage-client-host #conversation::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}
/* === /SAGE Stage 30.9C === */

/* =========================================================
   STAGE 30.9C1 RESPONSIVE GOOGLE DRIVE VIDEO
   Google Drive /preview embeds use the same full-width 16:9
   response-card treatment as canonical YouTube embeds.
   ========================================================= */
#conversation .bot-response-text iframe[src*="drive.google.com/file/d/"][src*="/preview"] {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: 16 / 9 !important;
    box-sizing: border-box !important;
    border: 0 !important;
    margin: 10px 0 18px !important;
}

#conversation .bot-response-text > div,
#conversation .bot-response-text > section {
    max-width: 100%;
    box-sizing: border-box;
}

@media (max-width: 640px) {
    #conversation .bot-response-text iframe[src*="drive.google.com/file/d/"][src*="/preview"] {
        width: 100% !important;
        aspect-ratio: 16 / 9 !important;
    }
}


/* === SAGE Stage 30.9C7: action-icon integrity + mobile Drive embeds === */
/* Font Awesome uses <i> as an icon container; semantic answer italics must not
   leak into action controls, including restored/hard-refreshed action docks. */
#conversation .bot-actions i,
#conversation .sage-action-dock i,
.sage-action-sheet i,
.sage-action-trigger i,
.sage-action-zone-head i,
.sage-action-zone .bot-action-btn i {
    font-style: normal !important;
}

/* Drive viewport rules are canonicalised in Stage 30.9C9/C11 below. */
/* === /SAGE Stage 30.9C7 === */


/* === SAGE Stage 30.9C8: compact generated lists + Google Drive mobile repaint === */
/* #conversation li is the chat-row rule; do not let it create oversized spacing
   inside lists generated within an answer. */
#conversation li.bot .bot-response-text ul,
#conversation li.bot .bot-response-text ol {
    margin-top: .45rem !important;
    margin-bottom: .65rem !important;
}
#conversation li.bot .bot-response-text ul > li,
#conversation li.bot .bot-response-text ol > li {
    margin: .3rem 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    line-height: 1.5 !important;
}
#conversation li.bot .bot-response-text ul > li { list-style: disc !important; }
#conversation li.bot .bot-response-text ol > li { list-style: decimal !important; }

/* Legacy Drive repaint/GPU hacks removed in Stage 30.9C11. */
/* === /SAGE Stage 30.9C8 === */


/* === SAGE Stage 30.9C9: response integrity + stable Drive viewport === */
#conversation li.bot .bot-response-text .sage-numbered-points > div {
    margin: .45rem 0 !important;
    padding: 0 !important;
    line-height: 1.5 !important;
}
#conversation li.bot .bot-response-text .sage-contextual-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    margin: .65rem 0 !important;
    padding: 0 !important;
    list-style: none !important;
}
#conversation li.bot .bot-response-text .sage-contextual-actions .autofill,
#conversation li.bot .bot-response-text .sage-contextual-actions .iframe-button {
    margin: 0 !important;
}
#conversation li.bot .bot-response-text .sage-explore-copy {
    margin: .75rem 0 .4rem !important;
}
#conversation li.bot .bot-response-text .sage-foodprint-summary {
    margin: .75rem 0 !important;
}

/* Google Drive owns its internal player chrome. SAGE supplies one clean,
   untransformed 16:9 viewport and does not crop or GPU-transform the iframe. */
#conversation li.bot .bot-response-text .sage-drive-frame {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
    margin: 10px 0 18px !important;
    padding: 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
    background: #000 !important;
}
#conversation li.bot .bot-response-text .sage-drive-frame > iframe[src*="drive.google.com"],
#conversation li.bot .bot-response-text .sage-drive-frame > iframe[src*="docs.google.com"] {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: visible !important;
}
@media (max-width: 640px) {
    #conversation li.bot .bot-response-text .sage-drive-frame {
        width: 100% !important;
        aspect-ratio: 16 / 9 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    #conversation li.bot .bot-response-text .sage-foodprint-summary {
        align-items: flex-start !important;
    }
}
/* === /SAGE Stage 30.9C9 === */


/* === SAGE Stage 30.9C11: canonical Drive mobile viewport ===
   Google Drive owns its cross-origin player controls. SAGE supplies exactly one
   responsive 16:9 wrapper with no transforms, clipping or fixed mobile height. */
#conversation li.bot .bot-response-text .sage-drive-frame {
    overflow: visible !important;
}
#conversation li.bot .bot-response-text .sage-drive-frame::before,
#conversation li.bot .bot-response-text .sage-drive-frame::after {
    pointer-events: none !important;
}
/* === /SAGE Stage 30.9C11 === */


/* Stage 30.9C13E: authored button groups may use UL/LI only as layout wrappers.
   Keep the authored HTML and separators intact; hide only the decorative marker. */
.bot-response-text ul.sage-button-list,
.bot-response-text ol.sage-button-list {
    list-style: none;
    padding-left: 0;
    margin-left: 0;
}
.bot-response-text ul.sage-button-list > li,
.bot-response-text ol.sage-button-list > li {
    list-style: none;
}
.bot-response-text ul.sage-button-list > li::marker,
.bot-response-text ol.sage-button-list > li::marker {
    content: "";
}

/* SAGE response layout fix 2026-10-01: the chat window owns vertical scroll.
   Both axes must be visible; overflow-x:hidden also makes overflow-y:auto.
   Tables/diagrams keep their own existing horizontal overflow rules. */
#conversation li.bot .bot-response-text {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere;
}
/* Override the higher-specificity !important prose-list marker rules. */
#conversation li.bot .bot-response-text ul.sage-button-list,
#conversation li.bot .bot-response-text ol.sage-button-list {
    list-style: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}
#conversation li.bot .bot-response-text ul.sage-button-list > li,
#conversation li.bot .bot-response-text ol.sage-button-list > li {
    list-style: none !important;
}
#conversation li.bot .bot-response-text ul.sage-button-list > li::marker,
#conversation li.bot .bot-response-text ol.sage-button-list > li::marker {
    content: "" !important;
}