/**
 * Ask AI — shared chat surface.
 *
 * One stylesheet for all three surfaces: the site-wide modal, the inline mount
 * on /ask-ai/, and the floating "Ask AI" pill shown on text selection.
 *
 * Follows the theme's corner-radius scale (--radius-control/field/surface) and the
 * brand teal. Contrast, focus rings, touch targets and reduced-motion follow the
 * accessible/clinical design profile.
 */

.vance-askai {
	--askai-teal: var(--primary-color, #008080);
	--askai-teal-dark: var(--primary-hover, #006666);
	--askai-wash: var(--primary-wash, #def4f4);
	--askai-ink: #1F2937;
	--askai-muted: #4B5563;
	--askai-line: #E2E8F0;
	--askai-surface: #ffffff;
}

/* =========================================================================
   Modal shell
   ========================================================================= */

.vance-askai-modal {
	position: fixed;
	inset: 0;
	z-index: 100000; /* above the sticky header (1000) and mobile nav (1003) */
	display: none;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(10, 25, 41, 0.55);
}

.vance-askai-modal.is-open {
	display: flex;
	animation: vance-askai-fade 180ms ease-out;
}

@keyframes vance-askai-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.vance-askai-modal__panel {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 720px;
	height: min(82vh, 760px);
	background: var(--askai-surface);
	border: 1px solid var(--askai-line);
	box-shadow: 0 24px 60px rgba(10, 25, 41, 0.28);
	overflow: hidden;
	border-radius: var(--radius-surface);
}

/* =========================================================================
   Chat surface (shared by modal + inline mount)
   ========================================================================= */

.vance-askai {
	display: flex;
	flex-direction: column;
	min-height: 0;
	flex: 1;
	font-family: var(--font-main, 'Inter', system-ui, sans-serif);
	color: var(--askai-ink);
	background: var(--askai-surface);
}

.vance-askai--inline {
	border: 1px solid var(--askai-line);
	height: min(72vh, 680px);
	border-radius: var(--radius-surface);
}

.vance-askai__header {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 20px;
	background: var(--askai-teal);
	color: #ffffff;
	flex: 0 0 auto;
}

.vance-askai__badge {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	flex: 0 0 38px;
	background: rgba(255, 255, 255, 0.16);
	border-radius: var(--radius-control);
}

.vance-askai__badge svg { width: 20px; height: 20px; }

.vance-askai__titles { flex: 1 1 auto; min-width: 0; }

.vance-askai__title {
	margin: 0;
	font-family: var(--font-heading, 'Outfit', sans-serif);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.25;
	color: #ffffff;
}

.vance-askai__subtitle {
	margin: 2px 0 0;
	font-size: 13px;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.88);
}

.vance-askai__header-actions {
	display: flex;
	align-items: center;
	gap: 4px;
	flex: 0 0 auto;
}

.vance-askai__iconbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	color: #ffffff;
	cursor: pointer;
	transition: background-color 200ms ease-out;
	border-radius: var(--radius-control);
}

.vance-askai__iconbtn:hover { background: rgba(255, 255, 255, 0.18); }
.vance-askai__iconbtn svg { width: 20px; height: 20px; }

/* --- Messages ---------------------------------------------------------- */

.vance-askai__log {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	padding: 20px;
	background: #F8FAFC;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.vance-askai__msg {
	max-width: 82%;
	padding: 12px 15px;
	font-size: 15px;
	line-height: 1.65;
	white-space: normal;
	overflow-wrap: anywhere;
	border-radius: var(--radius-surface);
}

.vance-askai__msg--user {
	align-self: flex-end;
	background: var(--askai-teal);
	color: #ffffff;
}

.vance-askai__msg--bot {
	align-self: flex-start;
	background: #ffffff;
	border: 1px solid var(--askai-line);
	color: var(--askai-ink);
}

.vance-askai__msg--error {
	align-self: stretch;
	max-width: 100%;
	background: #FEF2F2;
	border: 1px solid #FCA5A5;
	color: #991B1B;
	font-size: 14px;
	border-radius: var(--radius-surface);
}

.vance-askai__msg a {
	color: var(--askai-teal-dark);
	text-decoration: underline;
}

.vance-askai__msg--user a { color: #ffffff; }

.vance-askai__msg strong { font-weight: 700; }

/* Citation links the model appends ("Read more: <title> — <url>"). */
.vance-askai__cite {
	display: inline-block;
	margin-top: 8px;
	padding-left: 16px;
	position: relative;
	font-weight: 600;
	font-size: 14px;
	line-height: 1.45;
	color: var(--askai-teal-dark);
	text-decoration: underline;
}

.vance-askai__cite::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 8px;
	height: 8px;
	background: var(--askai-teal);
}

/* Empty state */

.vance-askai__intro { padding: 4px 2px 0; }

.vance-askai__intro p {
	margin: 0 0 14px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--askai-muted);
}

/* Kept to a single row. On a narrow screen the row scrolls sideways rather
   than wrapping to a second line. */
.vance-askai__suggestions {
	display: flex;
	flex-wrap: nowrap;
	gap: 8px;
	overflow-x: auto;
	scrollbar-width: none;
	padding-bottom: 2px;
}

.vance-askai__suggestions::-webkit-scrollbar { display: none; }

.vance-askai__suggestion {
	flex: 0 0 auto;
	white-space: nowrap;
	padding: 8px 12px;
	min-height: 34px;
	font-family: inherit;
	font-size: 12px;
	line-height: 1.3;
	text-align: left;
	color: var(--askai-teal-dark);
	background: var(--askai-wash);
	border: 1px solid var(--askai-teal);
	cursor: pointer;
	transition: background-color 200ms ease-out, color 200ms ease-out;
	border-radius: var(--radius-control);
}

.vance-askai__suggestion:hover {
	background: var(--askai-teal);
	color: #ffffff;
}

/* Typing indicator */

.vance-askai__typing {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	height: 12px;
}

.vance-askai__typing span {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--askai-teal);
	opacity: 0.45;
	animation: vance-askai-blink 1.2s infinite ease-in-out both;
}

.vance-askai__typing span:nth-child(2) { animation-delay: 0.18s; }
.vance-askai__typing span:nth-child(3) { animation-delay: 0.36s; }

@keyframes vance-askai-blink {
	0%, 80%, 100% { opacity: 0.25; }
	40%           { opacity: 1; }
}

/* --- Composer ---------------------------------------------------------- */

.vance-askai__composer {
	flex: 0 0 auto;
	border-top: 1px solid #2f4f6f;
	background: #ffffff;
	padding: 12px 14px;
}

.vance-askai__input {
	display: block;
	/* Fills the row beside the side column, top to bottom. */
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
	height: auto;
	align-self: stretch;
	min-height: 0;
	max-height: 60vh;
	padding: 12px 14px;
	font-family: inherit;
	font-size: 16px; /* 16px keeps iOS from zooming on focus */
	line-height: 1.5;
	color: var(--askai-ink);
	background: #ffffff;
	border: 1px solid #CBD5E1;
	border-radius: var(--radius-field);
	/* Draggable from the bottom-right corner. */
	resize: vertical;
	overflow-y: auto;
}

.vance-askai__input::placeholder { color: #64748B; }

/* The theme has no global sr-only helper — scope one here. */
.vance-askai .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.vance-askai__send {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-width: 46px;
	height: 46px;
	padding: 0 16px;
	font-family: var(--font-heading, 'Outfit', sans-serif);
	font-size: 15px;
	font-weight: 600;
	color: #ffffff;
	background: var(--askai-teal);
	border: 1px solid var(--askai-teal);
	cursor: pointer;
	transition: background-color 200ms ease-out;
	border-radius: var(--radius-control);
}

.vance-askai__send:hover:not(:disabled) {
	background: var(--askai-teal-dark);
	border-color: var(--askai-teal-dark);
}

.vance-askai__send:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

.vance-askai__send svg { width: 18px; height: 18px; }

.vance-askai__foot {
	margin: 9px 2px 0;
	font-size: 12px;
	line-height: 1.5;
	color: var(--askai-muted);
}

.vance-askai__foot a { color: var(--askai-teal-dark); text-decoration: underline; }

/* --- Reading level slider ----------------------------------------------
   Deliberately prominent: a frosted glass panel so the control reads as a
   first-class part of the composer rather than a hairline under the input. */

/* One row: tall input on the left, slider stacked above the buttons on the
   right. The row height is set by the side column, and the input stretches to
   match it. */
.vance-askai__entry {
	display: flex;
	align-items: stretch;
	gap: 12px;
}

.vance-askai__side {
	display: flex;
	flex-direction: column;
	gap: 5px;
	flex: 0 0 auto;
	width: 230px;
}

.vance-askai__level {
	position: relative;
	flex: 0 0 auto;
	min-width: 0;
	margin: 0;
	padding: 4px 12px 2px;
	background: linear-gradient(135deg, rgba(0, 128, 128, 0.14), rgba(174, 219, 219, 0.22));
	border: 1px solid rgba(0, 128, 128, 0.28);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 2px 10px rgba(10, 25, 41, 0.06);
	-webkit-backdrop-filter: blur(10px) saturate(140%);
	backdrop-filter: blur(10px) saturate(140%);
	overflow: hidden;
	border-radius: var(--radius-surface);
}

/* Sheen across the top edge, the "glass" cue. */
.vance-askai__level::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 45%;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0));
	pointer-events: none;
}

.vance-askai__level-label {
	position: relative;
	display: block;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.01em;
	color: #0F4C4C;
	margin-bottom: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.vance-askai__level-label strong {
	display: inline-block;
	padding: 2px 10px;
	margin-left: 4px;
	font-family: var(--font-heading, 'Outfit', sans-serif);
	font-size: 13px;
	font-weight: 700;
	color: #ffffff;
	background: var(--askai-teal);
	box-shadow: 0 1px 4px rgba(0, 128, 128, 0.4);
	border-radius: var(--radius-control);
}

.vance-askai__level-input {
	position: relative;
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 20px;
	margin: 0;
	background: transparent;
	cursor: pointer;
}

/* Track: a recessed glass channel. */
.vance-askai__level-input::-webkit-slider-runnable-track {
	height: 8px;
	border-radius: var(--radius-pill);
	background: linear-gradient(90deg, rgba(255, 255, 255, 0.85), rgba(174, 219, 219, 0.95));
	border: 1px solid rgba(0, 128, 128, 0.35);
	box-shadow: inset 0 2px 4px rgba(10, 25, 41, 0.16);
}
.vance-askai__level-input::-moz-range-track {
	height: 8px;
	border-radius: var(--radius-pill);
	background: linear-gradient(90deg, rgba(255, 255, 255, 0.85), rgba(174, 219, 219, 0.95));
	border: 1px solid rgba(0, 128, 128, 0.35);
	box-shadow: inset 0 2px 4px rgba(10, 25, 41, 0.16);
}

/* Thumb: a glossy teal bead, large enough to grab on touch. */
.vance-askai__level-input::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 20px;
	height: 20px;
	margin-top: -6px;
	border-radius: 50%;
	background:
		radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.35) 34%, rgba(255, 255, 255, 0) 60%),
		linear-gradient(160deg, var(--askai-teal), var(--askai-teal-dark));
	border: 2px solid #ffffff;
	box-shadow: 0 2px 8px rgba(0, 90, 90, 0.5), 0 0 0 1px rgba(0, 128, 128, 0.55);
	transition: transform 150ms ease-out, box-shadow 150ms ease-out;
}
.vance-askai__level-input::-moz-range-thumb {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background:
		radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.35) 34%, rgba(255, 255, 255, 0) 60%),
		linear-gradient(160deg, var(--askai-teal), var(--askai-teal-dark));
	border: 2px solid #ffffff;
	box-shadow: 0 2px 8px rgba(0, 90, 90, 0.5), 0 0 0 1px rgba(0, 128, 128, 0.55);
}

.vance-askai__level-input:hover::-webkit-slider-thumb,
.vance-askai__level-input:active::-webkit-slider-thumb {
	transform: scale(1.08);
	box-shadow: 0 3px 12px rgba(0, 90, 90, 0.6), 0 0 0 1px rgba(0, 128, 128, 0.7);
}

/* --- Action row (New chat / Clear / Send) ------------------------------- */

/* Send on top, New chat and Clear sharing the row beneath it. Keeps Send
   dominant while halving the height of three full-width stacked buttons. */
.vance-askai__actions {
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 0 0 auto;
	width: 100%;
}

.vance-askai__actions-row {
	display: flex;
	gap: 4px;
}

.vance-askai__minibtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	flex: 1 1 0;
	min-width: 0;
	height: 30px;
	padding: 0 8px;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	color: var(--askai-muted);
	background: #ffffff;
	border: 1px solid #CBD5E1;
	cursor: pointer;
	transition: color 200ms ease-out, border-color 200ms ease-out;
	border-radius: var(--radius-control);
}

.vance-askai__minibtn:hover {
	color: var(--askai-teal-dark);
	border-color: var(--askai-teal);
}

.vance-askai__minibtn svg { width: 13px; height: 13px; flex: 0 0 auto; }
.vance-askai__minibtn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Send leads the block and stays the prominent action. */
.vance-askai__actions .vance-askai__send {
	width: 100%;
	height: 34px;
	justify-content: center;
	padding: 0 12px;
}

/* --- Progressive reveal caret ------------------------------------------ */

.vance-askai__caret {
	display: inline-block;
	width: 2px;
	height: 1em;
	margin-left: 1px;
	vertical-align: text-bottom;
	background: var(--askai-teal);
	animation: vance-askai-caret 900ms steps(2, start) infinite;
	border-radius: var(--radius-control);
}

@keyframes vance-askai-caret {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0; }
}

/* --- General-knowledge disclosure -------------------------------------- */

.vance-askai__note {
	display: block;
	margin-top: 10px;
	padding: 8px 11px;
	font-size: 13px;
	line-height: 1.5;
	color: #78350F;
	background: #FFFBEB;
	border-left: 3px solid #D97706;
	border-radius: var(--radius-surface);
}

/* --- Expanded disclaimer ----------------------------------------------- */

.vance-askai__disclaimer {
	margin-top: 8px;
	font-size: 12px;
	line-height: 1.6;
	color: var(--askai-muted);
}

.vance-askai__disclaimer summary {
	cursor: pointer;
	font-weight: 600;
	color: var(--askai-teal-dark);
	padding: 4px 0;
}

.vance-askai__disclaimer > div {
	padding: 8px 0 2px;
	border-top: 1px solid #2f4f6f;
	margin-top: 6px;
}

.vance-askai__disclaimer p { margin: 0 0 8px; }
.vance-askai__disclaimer p:last-child { margin-bottom: 0; }
.vance-askai__disclaimer a { color: var(--askai-teal-dark); text-decoration: underline; }

/* =========================================================================
   First-visit intro popup (articles) — "Demystify Your Health Journey"

   A deliberately rounded, soft "VANCE-Ai" treatment, matching the supplied
   mockup. This overlay is appended to <body>, NOT inside a .vance-askai node,
   so the --askai-* variables are out of scope here: use the theme-level
   --primary-* / --font-* custom properties (with literal fallbacks) instead.
   ========================================================================= */

.vance-askai-intro-overlay {
	position: fixed;
	inset: 0;
	z-index: 100010;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(10, 25, 41, 0.62);
	animation: vance-askai-fade 200ms ease-out;
}

.vance-askai-intro {
	position: relative;
	width: 100%;
	max-width: 940px;
	background: #ffffff;
	border-radius: var(--radius-surface);
	box-shadow: 0 30px 80px rgba(10, 25, 41, 0.34);
	font-family: var(--font-main, 'Inter', system-ui, sans-serif);
	color: #1F2937;
	overflow: hidden;
	/* No cap on card height meant that on narrow viewports, where the grid
	   below stacks the illustration banner above the full text column
	   instead of beside it, combined content height could exceed the
	   viewport with nothing to constrain it — the whole page scrolled to
	   reach the CTA instead of the card scrolling internally. The overlay's
	   own 24px flex padding on each side is subtracted here so the card
	   never exceeds the space the overlay actually gives it. */
	max-height: calc(100dvh - 48px);
	overflow-y: auto;
}

/* Two columns: copy + CTA on the left, illustration on the right. */
.vance-askai-intro__grid {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	align-items: stretch;
}

.vance-askai-intro__col {
	display: flex;
	flex-direction: column;
	padding: 44px 44px 34px;
	min-width: 0;
}

/* Round close button; sits over the tinted media panel. */
.vance-askai-intro__close {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 3;
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #ffffff;
	border: 1px solid rgba(15, 23, 42, 0.12);
	/* Circular by design. The !important is a leftover from the old
	   `button { border-radius:0 !important }` reset in main.css; it now only
	   guards against the rounded default, which is a plain declaration. */
	border-radius: 50% !important;
	color: #0F172A;
	box-shadow: 0 2px 10px rgba(10, 25, 41, 0.18);
	cursor: pointer;
	transition: background-color 200ms ease-out, color 200ms ease-out;
}

.vance-askai-intro__close:hover {
	background: var(--primary-color, #008080);
	border-color: var(--primary-color, #008080);
	color: #ffffff;
}

.vance-askai-intro__close svg { width: 18px; height: 18px; }

/* Logo */
.vance-askai-intro__logo { margin-bottom: 24px; }
/* logo.png is the VANCE wordmark on a padded 16:9 canvas, so sizing by height
   alone renders it tiny. Fix the box to the mockup's proportion and let
   object-fit:cover crop the transparent margin so the wordmark fills it. */
.vance-askai-intro__logo-img {
	display: block;
	width: 140px;
	height: 42px;
	object-fit: cover;
	object-position: center;
}

.vance-askai-intro__logo-text {
	font-family: var(--font-heading, 'Outfit', sans-serif);
	font-size: 24px;
	font-weight: 800;
	letter-spacing: 0.02em;
	color: var(--primary-color, #008080);
}

/* Heading */
.vance-askai-intro__title {
	margin: 0 0 14px;
	font-family: var(--font-heading, 'Outfit', sans-serif);
	font-size: 34px;
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -0.01em;
	color: #0F2A33;
}

.vance-askai-intro__title-spark {
	display: inline-flex;
	vertical-align: middle;
	margin-left: 8px;
	color: var(--primary-color, #008080);
}

.vance-askai-intro__title-spark svg { width: 26px; height: 26px; }

/* Subtitle */
.vance-askai-intro__subtitle {
	margin: 0 0 26px;
	max-width: 42ch;
	font-size: 16px;
	line-height: 1.6;
	color: #5A6B75;
}

/* Feature rows */
.vance-askai-intro__features {
	list-style: none;
	margin: 0 0 28px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.vance-askai-intro__feature {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}

.vance-askai-intro__feature-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex: 0 0 44px;
	border-radius: var(--radius-control);
	color: var(--primary-color, #008080);
	background: var(--primary-wash, #def4f4);
}

.vance-askai-intro__feature-icon svg { width: 21px; height: 21px; }

.vance-askai-intro__feature-text {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding-top: 2px;
}

.vance-askai-intro__feature-text strong {
	font-family: var(--font-heading, 'Outfit', sans-serif);
	font-size: 16px;
	font-weight: 700;
	color: #0F2A33;
}

.vance-askai-intro__feature-text span {
	font-size: 14px;
	line-height: 1.55;
	color: #5A6B75;
}

/* CTA block — pinned to the bottom of the column so the mockup rhythm holds
   whatever the copy length. */
.vance-askai-intro__cta-wrap { margin-top: auto; }

.vance-askai-intro__lead {
	margin: 0 0 10px;
	font-family: var(--font-heading, 'Outfit', sans-serif);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.01em;
	text-align: center;
	color: var(--primary-hover, #006666);
}

/* Two side-by-side CTAs: ACTIVATE (closes) and ACTIVATE & TRY (opens the chat). */
.vance-askai-intro__cta-row {
	display: flex;
	gap: 10px;
}

.vance-askai-intro__activate {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	flex: 1 1 0;
	min-width: 0;
	min-height: 54px;
	padding: 0 14px;
	font-family: var(--font-heading, 'Outfit', sans-serif);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.03em;
	color: #ffffff;
	background: var(--primary-color, #008080);
	border: 0;
	border-radius: var(--radius-surface) !important; /* beat main.css button radius reset */
	box-shadow: 0 8px 22px rgba(0, 128, 128, 0.30);
	cursor: pointer;
	transition: background-color 200ms ease-out, transform 200ms ease-out, box-shadow 200ms ease-out;
}

.vance-askai-intro__activate:hover {
	background: var(--primary-hover, #006666);
	transform: translateY(-1px);
	box-shadow: 0 10px 26px rgba(0, 128, 128, 0.36);
}

.vance-askai-intro__activate-label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Clicked: settle to success green with a tick + 'ACTIVATED' and a brief pop. */
.vance-askai-intro__activate.is-activated,
.vance-askai-intro__activate.is-activated:hover {
	background: #10B981;
	box-shadow: 0 8px 22px rgba(16, 185, 129, 0.38);
	transform: none;
	cursor: default;
	animation: vance-askai-activated 500ms ease-out;
}

@keyframes vance-askai-activated {
	0%   { transform: scale(1); }
	35%  { transform: scale(1.06); }
	100% { transform: scale(1); }
}

.vance-askai-intro__activate-icon { display: inline-flex; flex: 0 0 auto; }
.vance-askai-intro__activate-icon svg { width: 19px; height: 19px; }

/* Trust line */
.vance-askai-intro__trust {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 18px 0 0;
	font-size: 13.5px;
	font-weight: 500;
	color: #64748B;
}

.vance-askai-intro__trust-icon { display: inline-flex; color: var(--primary-color, #008080); }
.vance-askai-intro__trust-icon svg { width: 16px; height: 16px; }

/* Quiet register link, logged-out only — keeps the sign-up path without
   competing with the single ACTIVATE call to action. */
.vance-askai-intro__register {
	margin: 14px auto 0;
	padding: 4px;
	font-family: var(--font-main, 'Inter', sans-serif);
	font-size: 13px;
	font-weight: 600;
	color: var(--primary-hover, #006666);
	background: none;
	border: 0;
	text-decoration: underline;
	cursor: pointer;
	border-radius: var(--radius-control);
}

.vance-askai-intro__register:hover { color: var(--primary-color, #008080); }

/* Media column */
.vance-askai-intro__media {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 28px;
	overflow: hidden;
	background:
		radial-gradient(120% 90% at 80% 12%, rgba(0, 128, 128, 0.12), rgba(0, 128, 128, 0) 60%),
		linear-gradient(160deg, #F3FAFA 0%, #E8F3F5 100%);
	border-left: 1px solid rgba(0, 128, 128, 0.10);
	border-radius: var(--radius-surface);
}

.vance-askai-intro__media > img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--radius-surface, 14px) !important; /* legacy !important; main.css no longer squares img */
}

/* Built-in "VANCE-Ai in use" illustration = a representative (not real) product
   screenshot, shown when no popup image is configured: a mock article with a
   highlighted term and the VANCE-Ai answer card explaining it. Purely visual; the
   JS marks the whole block aria-hidden. */
.vance-askai-illus {
	position: relative;
	width: 100%;
	max-width: 336px;
}

.vance-askai-illus__doc {
	padding: 20px 20px 22px;
	background: #ffffff;
	border: 1px solid #E4EEF0;
	border-radius: var(--radius-surface);
	box-shadow: 0 12px 30px rgba(10, 25, 41, 0.10);
}

.vance-askai-illus__doc-title {
	display: block;
	margin-bottom: 12px;
	font-family: var(--font-heading, 'Outfit', sans-serif);
	font-size: 15px;
	font-weight: 700;
	color: var(--primary-hover, #006666);
}

.vance-askai-illus__para {
	margin: 0 0 14px;
	font-size: 12.5px;
	line-height: 1.7;
	color: #64748B;
}

.vance-askai-illus__mark {
	padding: 1px 5px;
	font-weight: 600;
	color: var(--primary-hover, #006666);
	background: var(--primary-wash, #def4f4);
	border-radius: var(--radius-control);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

.vance-askai-illus__line {
	display: block;
	height: 8px;
	margin-top: 9px;
	border-radius: var(--radius-pill);
	background: #EDF1F3;
}

.vance-askai-illus__line.is-short { width: 58%; }

/* The floating VANCE-Ai answer card, overlapping the article's lower-right. */
.vance-askai-illus__card {
	position: absolute;
	right: -12px;
	bottom: -18px;
	width: 232px;
	padding: 12px 13px;
	background: #ffffff;
	border: 1px solid #E4EEF0;
	border-radius: var(--radius-surface);
	box-shadow: 0 18px 40px rgba(10, 25, 41, 0.18);
}

.vance-askai-illus__card-head {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 9px;
}

.vance-askai-illus__card-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	flex: 0 0 26px;
	border-radius: 50%;
	color: #ffffff;
	background: var(--primary-color, #008080);
}

.vance-askai-illus__card-badge svg { width: 15px; height: 15px; }

.vance-askai-illus__card-name {
	flex: 1 1 auto;
	font-family: var(--font-heading, 'Outfit', sans-serif);
	font-size: 13px;
	font-weight: 700;
	color: #0F2A33;
}

.vance-askai-illus__card-ctrls {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
	color: #B4C0C6;
}

.vance-askai-illus__card-ctrls svg { width: 13px; height: 13px; }

.vance-askai-illus__card-text {
	margin: 0 0 10px;
	font-size: 12px;
	line-height: 1.55;
	color: #334155;
}

.vance-askai-illus__card-foot {
	display: flex;
	gap: 14px;
	padding-top: 9px;
	border-top: 1px solid #EEF2F4;
	color: #AEB9BF;
}

.vance-askai-illus__card-foot svg { width: 15px; height: 15px; }

/* =========================================================================
   Article sidebar widget — inverted "VANCE-Ai" card (teal, white text)

   The compound .oped-sidebar-block.oped-askai-widget selectors beat the base
   sidebar-card rules (white bg, navy h4) regardless of stylesheet load order.
   ========================================================================= */

.oped-sidebar-block.oped-askai-widget {
	background: var(--primary-color, #008080);
	border-radius: var(--radius-surface);
	color: #ffffff;
	box-shadow: 0 10px 26px rgba(0, 128, 128, 0.22);
}

.oped-sidebar-block.oped-askai-widget h4 { color: #ffffff; }
.oped-sidebar-block.oped-askai-widget h4 svg { color: #ffffff; }

.oped-sidebar-block.oped-askai-widget p {
	margin: 0 0 14px;
	font-size: 14px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.92);
}

/* Inverse button: white on the teal card, teal glyph + label. */
.oped-askai-widget__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	min-height: 46px;
	padding: 0 16px;
	font-family: var(--font-heading, 'Outfit', sans-serif);
	font-size: 15px;
	font-weight: 700;
	color: var(--primary-hover, #006666);
	background: #ffffff;
	border: 1px solid #ffffff;
	border-radius: var(--radius-control) !important; /* beat main.css button radius reset */
	cursor: pointer;
	transition: background-color 200ms ease-out, color 200ms ease-out;
}

.oped-askai-widget__btn:hover {
	background: var(--primary-wash, #def4f4);
	border-color: var(--primary-wash, #def4f4);
	color: var(--primary-hover, #006666);
}

.oped-askai-widget__btn svg { width: 17px; height: 17px; }

.oped-sidebar-block.oped-askai-widget .oped-askai-widget__hint {
	margin: 12px 0 0;
	font-size: 12px;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.78);
}

/* =========================================================================
   Header nav CTA — "VANCE-Ai" button, matching the popup ACTIVATE style
   ========================================================================= */

.vance-nav-askai {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 32px; /* explicit so .header-dashboard-link (main.css) can match this
	                 box exactly via box-sizing:border-box, despite its added
	                 border — was auto (~31px); pinning it is what makes the
	                 match reliable rather than approximate. 2026-08-11. */
	padding: 8px 16px;
	font-family: var(--font-heading, 'Outfit', sans-serif);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: #ffffff;
	background: var(--primary-color, #008080);
	border: 0;
	border-radius: var(--radius-control) !important;
	box-shadow: 0 4px 12px rgba(0, 128, 128, 0.28);
	cursor: pointer;
	transition: background-color 200ms ease-out, transform 200ms ease-out, box-shadow 200ms ease-out;
}

.vance-nav-askai:hover {
	background: var(--primary-hover, #006666);
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(0, 128, 128, 0.34);
}

.vance-nav-askai svg { width: 15px; height: 15px; flex: 0 0 auto; }

/* =========================================================================
   Selection pill (highlight-to-ask)
   ========================================================================= */

.vance-askai-pillbar {
	position: absolute;
	z-index: 99998; /* under the modal, over page content */
	display: inline-flex;
	align-items: stretch;
	gap: 1px; /* a hairline seam, so the pair reads as one control */
	box-shadow: 0 6px 18px rgba(10, 25, 41, 0.30);
}

.vance-askai-pill {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 40px;
	padding: 0 15px;
	font-family: var(--font-heading, 'Outfit', sans-serif);
	font-size: 14px;
	font-weight: 600;
	color: #ffffff;
	background: var(--primary-color, #008080);
	border: 0;
	cursor: pointer;
	transition: background-color 200ms ease-out, color 200ms ease-out;
	border-radius: var(--radius-pill);
}

.vance-askai-pill:hover { background: var(--primary-hover, #006666); }
.vance-askai-pill svg { width: 16px; height: 16px; flex: none; }

/* Secondary action: white on the same footprint, so "Ask" stays the default. */
.vance-askai-pill--ghost {
	color: #0A1929;
	background: #ffffff;
}

.vance-askai-pill--ghost:hover {
	color: var(--primary-hover, #006666);
	background: #F1F5F9;
}

.vance-askai-pill--ghost svg { color: var(--primary-color, #008080); }

@media (pointer: coarse) {
	.vance-askai-pill { height: 44px; padding: 0 18px; }
}

/* =========================================================================
   Note picker (highlight-to-note)
   ========================================================================= */

.vance-askai-notes {
	position: absolute;
	z-index: 99999; /* over the pill bar, still under the modal */
	box-sizing: border-box;
	width: 320px;
	max-width: calc(100vw - 16px);
	padding: 14px 16px 16px;
	font-family: var(--font-body, 'Inter', sans-serif);
	color: #0A1929;
	background: #ffffff;
	border: 1px solid #E2E8F0;
	box-shadow: 0 6px 18px rgba(10, 25, 41, 0.30);
	border-radius: var(--radius-surface);
}

.vance-askai-notes.is-busy { cursor: progress; }

.vance-askai-notes__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 10px;
}

.vance-askai-notes__title {
	font-family: var(--font-heading, 'Outfit', sans-serif);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
}

.vance-askai-notes__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	flex: none;
	padding: 0;
	color: #64748B;
	background: none;
	border: 0;
	cursor: pointer;
	transition: color 200ms ease-out, background-color 200ms ease-out;
	border-radius: var(--radius-control);
}

.vance-askai-notes__close:hover { color: #0A1929; background: #F1F5F9; }
.vance-askai-notes__close svg { width: 16px; height: 16px; }

.vance-askai-notes__quote {
	margin: 0 0 14px;
	padding: 0 0 0 12px;
	font-size: 13px;
	line-height: 1.5;
	color: #475569;
	border-left: 3px solid var(--primary-color, #008080);

	/* Two lines is enough to confirm what is being saved. */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.vance-askai-notes__label {
	margin: 0 0 6px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: #64748B;
}

.vance-askai-notes__list {
	max-height: 172px;
	overflow-y: auto;
	border: 1px solid #E2E8F0;
}

.vance-askai-notes__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	min-height: 40px;
	padding: 9px 12px;
	font-family: inherit;
	font-size: 13px;
	text-align: left;
	color: #0A1929;
	background: #ffffff;
	border: 0;
	border-bottom: 1px solid #2f4f6f;
	cursor: pointer;
	transition: background-color 200ms ease-out, color 200ms ease-out;
	border-radius: var(--radius-control);
}

.vance-askai-notes__item:last-child { border-bottom: 0; }
.vance-askai-notes__item:hover { color: var(--primary-hover, #006666); background: #F1F5F9; }
.vance-askai-notes__item[disabled] { cursor: default; opacity: 0.55; }

.vance-askai-notes__itemtitle {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.vance-askai-notes__itemdate {
	flex: none;
	font-size: 11px;
	color: #94A3B8;
}

.vance-askai-notes__empty {
	margin: 0;
	padding: 12px;
	font-size: 13px;
	line-height: 1.5;
	color: #64748B;
}

.vance-askai-notes__new { margin-top: 14px; }

.vance-askai-notes__newrow { display: flex; gap: 8px; }

.vance-askai-notes__input {
	box-sizing: border-box;
	flex: 1 1 auto;
	min-width: 0;
	height: 40px;
	padding: 0 10px;
	font-family: inherit;
	font-size: 13px;
	color: #0A1929;
	background: #ffffff;
	border: 1px solid #E2E8F0;
	border-radius: var(--radius-field);
}

.vance-askai-notes__input::placeholder { color: #94A3B8; }
.vance-askai-notes__input:focus { border-color: var(--primary-color, #008080); }

.vance-askai-notes__create {
	flex: none;
	height: 40px;
	padding: 0 14px;
	font-family: var(--font-heading, 'Outfit', sans-serif);
	font-size: 13px;
	font-weight: 600;
	color: #ffffff;
	background: var(--primary-color, #008080);
	border: 0;
	cursor: pointer;
	transition: background-color 200ms ease-out;
	border-radius: var(--radius-control);
}

.vance-askai-notes__create:hover { background: var(--primary-hover, #006666); }
.vance-askai-notes__create[disabled] { cursor: default; opacity: 0.6; }

.vance-askai-notes__signedout {
	margin: 0 0 12px;
	font-size: 13px;
	line-height: 1.55;
	color: #475569;
}

.vance-askai-notes__status {
	margin: 10px 0 0;
	font-size: 12px;
	line-height: 1.45;
	color: #64748B;
}

.vance-askai-notes__status.is-error { color: #B91C1C; }
.vance-askai-notes__status:empty { display: none; }

.vance-askai-notes__done {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 14px;
	font-weight: 600;
	color: #0A1929;
}

.vance-askai-notes__doneicon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	flex: none;
	color: #ffffff;
	background: var(--primary-color, #008080);
	border-radius: var(--radius-control);
}

.vance-askai-notes__doneicon svg { width: 15px; height: 15px; }

.vance-askai-notes__open {
	display: inline-block;
	margin-top: 10px;
	font-size: 13px;
	font-weight: 600;
	color: var(--primary-color, #008080);
}

@media (pointer: coarse) {
	.vance-askai-notes__item,
	.vance-askai-notes__input,
	.vance-askai-notes__create { min-height: 44px; }

	.vance-askai-notes__close { width: 44px; height: 44px; }
}

/* =========================================================================
   Focus visibility: never remove the ring, only restyle it
   ========================================================================= */

.vance-askai :focus-visible,
.vance-askai-pill:focus-visible,
.vance-askai-notes :focus-visible,
.vance-askai__iconbtn:focus-visible,
.vance-askai-intro :focus-visible,
.vance-nav-askai:focus-visible {
	outline: 3px solid #0F766E;
	outline-offset: 2px;
}

.vance-askai__input:focus {
	outline: 3px solid var(--askai-teal);
	outline-offset: -1px;
	border-color: var(--askai-teal);
}

/* =========================================================================
   Responsive
   ========================================================================= */

@media (max-width: 767.98px) {
	/* The intro card's height was capped only against the viewport
	   (100dvh - 48px), so on a phone tall enough for the stacked illustration
	   banner plus the full copy column, it hit that cap and read as a
	   full-screen takeover rather than a modal (audit: SXO). Capping it well
	   under the viewport keeps the dimmed background visibly framing it on
	   every phone size; content that doesn't fit still scrolls internally via
	   the overflow-y:auto already on .vance-askai-intro. */
	.vance-askai-intro-overlay { padding: 20px 16px; }
	.vance-askai-intro { max-height: min(600px, calc(100dvh - 40px)); }

	/* Stack the intro popup: illustration banner on top, copy + CTA below. */
	.vance-askai-intro__grid { grid-template-columns: 1fr; }
	.vance-askai-intro__media {
		order: -1;
		min-height: 172px;
		padding: 22px;
		border-left: 0;
		border-bottom: 1px solid rgba(0, 128, 128, 0.10);
	}
	.vance-askai-illus { max-width: 300px; }
	.vance-askai-illus__card { display: none; } /* the floating card would clip in the short banner */
	.vance-askai-intro__col { padding: 26px 24px 24px; }
	.vance-askai-intro__logo-img { width: 118px; height: 34px; }
	.vance-askai-intro__title { font-size: 27px; }
	.vance-askai-intro__title-spark svg { width: 22px; height: 22px; }
	.vance-askai-intro__subtitle { margin-bottom: 20px; }
	.vance-askai-intro__features { margin-bottom: 22px; }
	.vance-askai-intro__cta-row { flex-direction: column; }

	.vance-askai-modal { padding: 0; }

	.vance-askai-modal__panel {
		max-width: none;
		height: 100%;
		border: 0;
	}

	/* Not enough width for the input and the side column side by side. */
	.vance-askai__entry { flex-direction: column; }
	.vance-askai__side { width: 100%; }
	.vance-askai__input { min-height: 90px; }

	.vance-askai__msg { max-width: 92%; }
	.vance-askai__log { padding: 16px; }
	.vance-askai--inline { height: min(78vh, 560px); }
	.vance-askai__subtitle { display: none; }
}

/* =========================================================================
   Motion preferences
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
	.vance-askai-modal.is-open { animation: none; }
	.vance-askai-intro-overlay { animation: none; }
	.vance-askai__typing span { animation: none; opacity: 0.6; }
	.vance-askai__caret { animation: none; }
	.vance-askai-intro__activate.is-activated { animation: none; }

	.vance-askai *,
	.vance-askai-notes *,
	.vance-askai-intro *,
	.vance-askai-pill,
	.vance-nav-askai {
		transition-duration: 0.01ms !important;
	}
}

/* Lock background scroll while the modal owns the screen. */
body.vance-askai-open { overflow: hidden; }

/* =========================================================================
   Modal kit alignment
   -------------------------------------------------------------------------
   The VANCE-Ai modal now shares the design language of the IBD Malnutrition
   Calculator, the same one applied to the health quiz and the Discovery
   Suite modal (assets/css/vance-modal-kit.css). Chat mechanics are untouched;
   this restyles the shell and the controls around it:

     - blurred scrim, 16px-radius panel, soft rather than hard shadow
     - header goes from a solid teal band to the calculator's light header,
       with a teal pill mark, uppercase Outfit title and muted subtitle
     - inputs, buttons and chips pick up the 12px radius, the teal focus ring
       and the lift-on-hover the calculator uses

   Scoped to `.vance-askai-modal` / `.vance-askai` so the inline mount on
   /ask-ai/ and the highlight-to-ask pill are unaffected except where they
   share these controls.
   ========================================================================= */

.vance-askai-modal {
	padding: 24px 16px;
	background: rgba(10, 25, 41, 0.55);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.vance-askai-modal__panel {
	max-width: 720px;
	height: min(84vh, 780px);
	background: var(--mk-bg, #F8FAFC);
	border: 0;
	border-radius: var(--mk-radius-lg, 14px);
	box-shadow: 0 24px 60px rgba(10, 25, 41, 0.28);
}

/* --- Header ------------------------------------------------------------ */

.vance-askai-modal .vance-askai__header {
	gap: 12px;
	padding: 18px 20px 16px;
	background: #ffffff;
	color: var(--mk-navy, #0A1929);
	border-bottom: 1px solid #2f4f6f;
	border-radius: var(--mk-radius-lg, 14px) var(--mk-radius-lg, 14px) 0 0;
}

.vance-askai-modal .vance-askai__badge {
	width: 36px;
	height: 36px;
	flex: 0 0 36px;
	background: var(--mk-wash, #def4f4);
	color: var(--mk-teal, #008080);
	border: 1px solid rgba(0, 128, 128, 0.2);
	border-radius: 50%;
}

.vance-askai-modal .vance-askai__title {
	font-size: 17px;
	font-weight: 800;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	color: var(--mk-navy, #0A1929);
}

.vance-askai-modal .vance-askai__subtitle {
	font-size: 13px;
	color: var(--mk-muted, #64748B);
}

.vance-askai-modal .vance-askai__iconbtn {
	width: 34px;
	height: 34px;
	color: var(--mk-muted, #64748B);
	background: #ffffff;
	border: 1px solid var(--mk-border, #E2E8F0);
	border-radius: 50%;
	transition: 0.18s;
}

.vance-askai-modal .vance-askai__iconbtn:hover {
	background: #ffffff;
	color: var(--mk-navy, #0A1929);
	border-color: var(--mk-teal, #008080);
}

.vance-askai-modal .vance-askai__iconbtn svg { width: 17px; height: 17px; }

/* --- Conversation ------------------------------------------------------ */

.vance-askai-modal .vance-askai__log { background: var(--mk-bg, #F8FAFC); }

.vance-askai-modal .vance-askai__msg { border-radius: var(--mk-radius, 10px); }

.vance-askai-modal .vance-askai__msg--bot {
	box-shadow: var(--mk-shadow, 0 10px 30px rgba(0, 0, 0, 0.05));
}

.vance-askai-modal .vance-askai__suggestion {
	border-radius: var(--mk-radius, 10px);
	border-width: 2px;
	border-color: var(--mk-border, #E2E8F0);
	background: #ffffff;
	font-weight: 600;
	transition: 0.18s;
}

.vance-askai-modal .vance-askai__suggestion:hover {
	transform: translateY(-2px);
	background: var(--mk-wash, #def4f4);
	color: var(--mk-teal, #008080);
	border-color: var(--mk-teal, #008080);
	box-shadow: var(--mk-shadow-lift, 0 6px 20px -4px rgba(0, 128, 128, 0.18));
}

/* --- Composer ---------------------------------------------------------- */

.vance-askai-modal .vance-askai__composer {
	padding: 14px;
	border-radius: 0 0 var(--mk-radius-lg, 14px) var(--mk-radius-lg, 14px);
}

.vance-askai-modal .vance-askai__input {
	background: var(--mk-bg, #F8FAFC);
	border: 1px solid var(--mk-border, #E2E8F0);
	border-radius: var(--mk-radius, 10px);
	transition: 0.2s;
}

.vance-askai-modal .vance-askai__input:focus {
	outline: none;
	background: #ffffff;
	border-color: var(--mk-teal, #008080);
	box-shadow: 0 0 0 4px rgba(0, 128, 128, 0.1);
}

.vance-askai-modal .vance-askai__send {
	border: none;
	border-radius: var(--mk-radius, 10px);
	font-weight: 700;
	box-shadow: 0 4px 12px rgba(0, 128, 128, 0.2);
	transition: 0.18s;
}

.vance-askai-modal .vance-askai__send:hover:not(:disabled) {
	box-shadow: 0 6px 20px rgba(0, 128, 128, 0.3);
}

.vance-askai-modal .vance-askai__minibtn { border-radius: var(--radius-control); }

/* The composer's frosted reading-level panel predates the kit and was the one
   piece still reading as a different product. Flatten it to a plain card. */
.vance-askai-modal .vance-askai__level {
	padding: 5px 12px 3px;
	background: var(--mk-bg, #F8FAFC);
	border: 1px solid var(--mk-border, #E2E8F0);
	border-radius: var(--mk-radius, 10px);
	box-shadow: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

.vance-askai-modal .vance-askai__level::before { display: none; }

@media (max-width: 640px) {
	.vance-askai-modal { padding: 0; }
	.vance-askai-modal__panel {
		height: 100%;
		max-width: none;
		border-radius: 0;
	}
	.vance-askai-modal .vance-askai__header,
	.vance-askai-modal .vance-askai__composer { border-radius: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.vance-askai-modal .vance-askai__suggestion:hover { transform: none; }
}

/* ============================================================================
   CLARIFYING-QUESTION PICKER
   ----------------------------------------------------------------------------
   Rendered under the opening reply when it carries a ```vance-ask block, so the
   reader clicks an answer instead of typing one. Built by buildQuestionPicker()
   in assets/js/vance-askai.js; the block itself never reaches the bubble.

   Options are <button aria-pressed> rather than checkboxes or radios: a group
   can be single- or multi-select depending on what the model asked for, and one
   pressable control styles identically for both. "Other" is the same control
   with a text field revealed underneath.
   ========================================================================== */

.vance-askai__ask {
    margin: 4px 0 8px;
    padding: 16px;
    border: 1px solid rgba(0, 128, 128, 0.22);
    border-radius: var(--radius-surface, 14px);
    background: rgba(0, 128, 128, 0.04);
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.vance-askai__ask.is-empty {
    /* Nothing picked when "Send answers" was pressed. */
    border-color: rgba(220, 38, 38, 0.55);
}

.vance-askai__askq { display: flex; flex-direction: column; gap: 8px; }

.vance-askai__askchip {
    align-self: flex-start;
    padding: 3px 9px;
    border-radius: var(--radius-control, 6px);
    background: rgba(0, 128, 128, 0.12);
    color: #00696b;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.vance-askai__asktitle {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
    color: #0f172a;
}

.vance-askai__askhint {
    margin: -4px 0 0;
    font-size: 12px;
    color: #64748b;
}

.vance-askai__askopts { display: flex; flex-wrap: wrap; gap: 8px; }

.vance-askai__askopt {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    /* 10px/14px puts the single-line variant at 44px, the touch minimum. */
    padding: 10px 14px;
    border: 1px solid #cbd5e1;
    border-radius: var(--radius-control, 6px);
    background: #fff;
    color: #0f172a;
    font: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.vance-askai__askopt:hover { border-color: #008080; }

.vance-askai__askopt:focus-visible {
    outline: 2px solid #008080;
    outline-offset: 2px;
}

.vance-askai__askopt.is-selected {
    background: #008080;
    border-color: #008080;
    color: #fff;
}

.vance-askai__askopt-label { font-weight: 600; }

.vance-askai__askopt-desc { font-size: 11.5px; color: #64748b; line-height: 1.35; }

.vance-askai__askopt.is-selected .vance-askai__askopt-desc { color: rgba(255, 255, 255, 0.85); }

.vance-askai__askopt--other { font-style: italic; }

.vance-askai__askother {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #cbd5e1;
    border-radius: var(--radius-field, 10px);
    font: inherit;
    font-size: 13px;
    color: #0f172a;
    background: #fff;
}

.vance-askai__askother:focus-visible {
    outline: 2px solid #008080;
    outline-offset: 1px;
    border-color: #008080;
}

.vance-askai__askactions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.vance-askai__asksend {
    min-height: 44px;
    padding: 11px 20px;
    border: 0;
    border-radius: var(--radius-control, 6px);
    background: #008080;
    color: #fff;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.vance-askai__asksend:hover { background: #00696b; }

.vance-askai__askskip {
    min-height: 44px;
    padding: 11px 14px;
    border: 0;
    background: none;
    color: #64748b;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

.vance-askai__askskip:hover { color: #0f172a; }

.vance-askai__asksend:focus-visible,
.vance-askai__askskip:focus-visible {
    outline: 2px solid #008080;
    outline-offset: 2px;
}

@media (max-width: 560px) {
    /* Full-width options read better than a ragged two-per-row wrap on a phone. */
    .vance-askai__askopt { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .vance-askai__askopt { transition: none; }
}