/* ao-modal-reasoning.css — the "Explain Query Reasoning" modal (2026-08-25, ui/perf-wave1-462)
 *
 * WHAT THIS STYLES
 * ----------------
 * The popup opened by the Easy Answers answer-item ⋮ menu → "Explain Query Reasoning",
 * and by the search-bar ⋮ menu item of the same name.
 *
 *   AgenticChatBotUtil.openExplainReasoningPopup()   (agentic-chatbot-util.ts L336)
 *   smartSearchUtils.openExplainReasoningPopup()     (smartsearch-utils.ts   L1344)
 *
 * Both set  css: "vux-cirrus-default-window vux-reasoning-popup"  and webix renders
 *
 *   div.webix_view.webix_window.vux-popup.vux-cirrus-default-window.vux-reasoning-popup.ao-vux-app
 *
 * VERIFIED LIVE on http://localhost:8092 (2026-08-25). The sibling "View Sourcing
 * Information" popup (smartSearchUtils.openShowMetadataPopup) renders
 *
 *   div.webix_view.webix_window.vux-popup.ao-vux-appdescription-app.ao-vux-ea-summary-info-app.vux-cirrus-default-window.ao-vux-app
 *
 * i.e. it does NOT carry `vux-reasoning-popup`, and we do not carry either of its two
 * `ao-vux-*-app` classes. `.vux-reasoning-popup` is therefore a clean, exclusive hook.
 *
 * >>> EVERY selector in this file is scoped under `.vux-reasoning-popup`. <<<
 * Three agents are restyling three modals that share `.vux-cirrus-default-window` and
 * `.ao-vux-appdescription-template`. One unscoped rule silently restyles the others.
 * Consistency between the three comes from the ao-design-system tokens, not from
 * shared selectors.
 *
 * "VIEW ACTION PLAN" INHERITS THIS — DELIBERATELY.
 * -----------------------------------------------
 * openExplainReasoningPopup() serves both menu items: `isReasoning: true` is the
 * reasoning branch, unset is the action-plan branch (agentic-chatbot-util.ts L229/L232).
 * The `css:` string is on the shared appConfig and is set unconditionally, so BOTH get
 * `.vux-reasoning-popup`. That is the right outcome: it is one popup answering one
 * question — "how did the engine get here" — and the action plan is markdown rendered
 * through the same markdown-it call into the same `.ao-vux-appdescription-template`
 * container. The only divergence is the header verb ("Action Plan -" vs "Reasoning -").
 * Nothing below assumes reasoning-specific content.
 *
 * AESTHETIC SOURCE — js/ao-thinking-map.js (`tm3-` namespace, CSS array from L248)
 * -------------------------------------------------------------------------------
 * The thinking map already speaks this modal's language, so we borrow its vocabulary
 * rather than inventing a parallel one:
 *   .tm3-chip / .tm3-dot  → each markdown heading becomes a numbered STEP NODE sitting
 *                           on a vertical rail (the map's step strip, turned vertical)
 *   .tm3-qhit             → every <b> the engine emitted is a GROUNDED TOKEN: the exact
 *                           tinted / inset-underlined treatment the map uses for words
 *                           of the question it has bound to data
 *   .tm3-act .tm3-why     → <em> is the WHY line: muted, one step down from the claim
 *   .tm3-check            → <blockquote> is an acceptance note
 * Second reference: themes/css/ao-ontology-graph.css.
 *
 * TOKENS — consumed, never defined. From themes/css/ao-design-system.css:
 *   --ao-primary --ao-primary-deep --ao-primary-light --ao-primary-50 --ao-primary-40
 *   --ao-ink --ao-mid --ao-dim --ao-warm --ao-ok --ao-bad
 *   --ao-surface --ao-hairline --ao-elevation --ao-field
 *   --ao-ease --ao-ease-pop --ao-radius-pill --ao-radius-card
 * Anything outside that contract (--ao-font, --ao-shadow) is read with a literal
 * fallback so this sheet degrades sanely if ao-design-system.css is absent.
 * Our own privates are namespaced --aor-* and live on .vux-reasoning-popup only.
 *
 * LOAD ORDER + THE (0,5,0) CHROME CEILING  — measured, not guessed
 * -----------------------------------------------------------------
 * themes/css/index.css is appended to <head> at RUNTIME by loadCss(), so a static
 * <link> in index.html lands BEFORE it and loses every same-specificity tie.
 *
 * For the DOCUMENT (everything under .ao-vux-appdescription-template) that costs
 * nothing: index's rules there are (0,1,1) and ours are (0,2,1)+, so they win on merit.
 *
 * For the WINDOW CHROME it costs a lot. index.css styles this family through
 *     .webix_window.webix_view.vux-cirrus-default-window .webix_win_body        (0,4,0)
 *     .webix_window.webix_view.vux-cirrus-default-window .webix_win_head .webix_template
 *                                                                              (0,5,0)
 * which silently ate the first draft's body background and header padding. Chrome
 * rules below therefore lead with the element's OWN full class chain:
 *
 *     .webix_window.webix_view.vux-cirrus-default-window.vux-reasoning-popup    (0,5,0)
 *
 * Still scoped — `vux-reasoning-popup` is in the chain, so the Sourcing and Semantic
 * SQL modals cannot match. Content rules keep the short, readable prefix.
 * Where index.css wins and its value is one we want (the 24px window radius) we
 * simply do not fight it.
 */

/* ==================================================================== *
 * 1. SCOPE ROOT + PRIVATE TOKENS
 * ==================================================================== */

.vux-reasoning-popup {
	/* rail geometry — one place, so the node, the rail and the text indent
	   can never drift apart */
	--aor-gutter: 34px;
	/* text indent past the rail */
	--aor-node: 20px;
	/* diameter of a step node */
	--aor-measure: 80ch;
	/* reading measure for prose — the window is sized to 60% of the SCREEN, which
	   is far wider than prose wants; this caps the line, it does not fill the box */

	/* grounded-token colours (.tm3-qhit). Split out as privates because the
	   stock DARK palette ships --vux-primary-40 == --vux-primary-50 == #1a282f,
	   so the light-theme pairing (deep ink on a pale tint) inverts into
	   unreadable dark-on-dark. See the dark override in §8. */
	--aor-token-bg: var(--ao-primary-40, #e8f2fc);
	--aor-token-fg: var(--ao-primary-deep, #005bab);
	--aor-token-edge: var(--ao-primary-light, #7fb2e6);
	--aor-token-mix: 12%;

	/* step-heading ink — same story: --vux-primary-700 is #0d6084 in the dark
	   palette, ~2.5:1 against the dark stage for 11.5px tracked caps. */
	--aor-step-fg: var(--ao-primary-deep, #005bab);

	/* numeral inside the step node. White works on every palette whose primary is
	   a mid/dark hue; the high-contrast palette's primary is bright yellow, where
	   white-on-yellow is unreadable. Overridden in §8. */
	--aor-node-ink: #fff;

	--aor-font: var(--ao-font, Inter, "Roboto", "Helvetica Neue", Arial, sans-serif);
	--aor-mono: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
}

@supports (background: color-mix(in srgb, red, blue)) {
	.vux-reasoning-popup {
		/* derived from the LIVE primary + the LIVE surface, so the token tracks
		   whatever palette the platform injected instead of being AO blue for ever */
		--aor-token-bg: color-mix(in srgb, var(--ao-primary, #0079e1) var(--aor-token-mix), var(--ao-surface, #fff));
		--aor-token-edge: color-mix(in srgb, var(--ao-primary, #0079e1) 46%, var(--ao-surface, #fff));
	}
}

/* ==================================================================== *
 * 2. THE SHELL
 * The window radius (24px) is set by index.css at (0,3,0) and is the house
 * value — we keep it and only add the hairline + lift the reference earns
 * from depth rather than a heavy drop shadow.
 * ==================================================================== */

.vux-reasoning-popup.webix_window {
	border: 1px solid var(--ao-hairline, #dde5ee);
	box-shadow: 0 24px 64px rgba(30, 36, 41, .20), var(--ao-elevation, 0 4px 14px rgba(0, 121, 225, .22));
	font-family: var(--aor-font);
}

/* clip the header/body corners to the shell radius */
.vux-reasoning-popup .webix_win_content {
	border-radius: inherit;
	overflow: hidden;
}

/* ==================================================================== *
 * 3. HEADER
 * `<section class="flex gap-16"><i.vuxicon-chat-info><div.ao-vux-ellipsis>`
 * then a sibling `<i class="webix_icon vuxicon-close-regular vux-app-close">`.
 * ==================================================================== */

.vux-reasoning-popup .webix_win_head .webix_toolbar {
	background: transparent;
	border: 0;
}

.vux-reasoning-popup .webix_win_head {
	/* a whisper of the field bleeding down from the top, then a hairline */
	background:
		linear-gradient(180deg, var(--ao-primary-50, #f0f7fd) 0%, var(--ao-surface, #fff) 100%);
	border-bottom: 1px solid var(--ao-hairline, #dde5ee);
}

/* (0,7,0) — index.css owns this one at (0,5,0) with `padding:24px 28px` and
   `align-items:center`; a 3-line clamped title wants the icon pinned to the top. */
.webix_window.webix_view.vux-cirrus-default-window.vux-reasoning-popup .webix_win_head .webix_template {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	padding: 22px 24px 20px 26px;
	background: transparent;
	overflow: visible;
}

.vux-reasoning-popup .webix_win_head .webix_template>section {
	align-items: flex-start;
	gap: 14px;
	min-width: 0;
	/* let the title ellipsis actually engage inside a flex row */
}

/* the leading glyph becomes a tinted node — the same "this object is in play"
   signal the map puts on .tm3-node.focus, reduced to a 34px chip */
.vux-reasoning-popup .webix_win_head .webix_icon.vuxicon-chat-info {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	margin: -2px 0 0;
	border-radius: 50%;
	background: var(--ao-primary-40, #e8f2fc);
	color: var(--ao-primary-deep, #005bab) !important;
	font-size: 17px !important;
	box-shadow: 0 0 0 1px var(--aor-token-edge) inset;
}

/* "Reasoning- <question>" / "Action Plan- <question>" */
.vux-reasoning-popup .webix_win_head .ao-vux-ellipsis {
	min-width: 0;
	padding-top: 5px;
	font-family: var(--aor-font);
	font-size: 16.5px;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -.2px;
	color: var(--ao-ink, #1e2429);
}

/* close — a real ghost icon button (cf. .ao-iconbtn / .tm3-x) */
.vux-reasoning-popup .webix_win_head .vux-app-close {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	margin: 0;
	border-radius: 50%;
	color: var(--ao-mid, #5e7081) !important;
	font-size: 15px !important;
	cursor: pointer;
	transition: background-color .2s var(--ao-ease, ease), color .2s var(--ao-ease, ease),
		transform .25s var(--ao-ease, ease);
}

.vux-reasoning-popup .webix_win_head .vux-app-close:hover {
	background: var(--ao-primary-40, #e8f2fc);
	color: var(--ao-primary-deep, #005bab) !important;
	transform: scale(1.06);
}

.vux-reasoning-popup .webix_win_head .vux-app-close:focus-visible {
	outline: 2px solid var(--ao-primary, #0079e1);
	outline-offset: 2px;
}

/* ==================================================================== *
 * 4. BODY SURFACE
 * The soft radial field, not a flat fill — depth comes from the ground,
 * the way it does behind the constellation.
 * ==================================================================== */

/* (0,5,0) — index.css sets `background: var(--vux-dashboard-popup-bg)` here at (0,4,0). */
.webix_window.webix_view.vux-cirrus-default-window.vux-reasoning-popup .webix_win_body {
	background: var(--ao-field, radial-gradient(120% 90% at 50% 8%, #fff 0%, #f4f8fd 42%, #eaf1fa 100%));
	color: var(--ao-ink, #1e2429);
}

/* every webix layout wrapper between the body and the content must get out of
   the way, or one of them paints white over the field */
.vux-reasoning-popup .webix_win_body .webix_layout_line,
.vux-reasoning-popup .webix_win_body .webix_abslayout,
.vux-reasoning-popup .webix_win_body .webix_multiview,
.vux-reasoning-popup .webix_win_body .webix_dataview,
.vux-reasoning-popup .webix_win_body .webix_spacer,
.vux-reasoning-popup .webix_win_body .ao-vux-microapp {
	background: transparent;
}

/* the scroller */
.vux-reasoning-popup .webix_dataview.ao-vux-dataview {
	scrollbar-width: thin;
	scrollbar-color: var(--ao-hairline, #dde5ee) transparent;
}

.vux-reasoning-popup .webix_dataview::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

.vux-reasoning-popup .webix_dataview::-webkit-scrollbar-track {
	background: transparent;
}

.vux-reasoning-popup .webix_dataview::-webkit-scrollbar-thumb {
	border: 3px solid transparent;
	border-radius: 10px;
	background: var(--ao-hairline, #dde5ee);
	background-clip: content-box;
}

.vux-reasoning-popup .webix_dataview::-webkit-scrollbar-thumb:hover {
	background: var(--ao-dim, #94a3b1);
	background-clip: content-box;
}

/* The dataview item is floated with an inline `width:autopx; height:autopx`
   (both invalid, both dropped at parse time) plus a real `overflow:hidden`.
   Height is therefore content-driven — no clipping risk vertically — but the
   float shrink-to-fits, so we claim the full row explicitly. */
.webix_window.webix_view.vux-cirrus-default-window.vux-reasoning-popup .webix_dataview_item {
	width: 100%;
	padding: 0;
	border: 0;
	background: transparent;
}

/* ==================================================================== *
 * 5. THE REASONING DOCUMENT
 * `.ao-vux-appdescription-template > div` wraps markdown-it output:
 * h1-h6 / p / ul / ol / li / b / em / code / pre / blockquote / table / hr / a.
 * ==================================================================== */

.vux-reasoning-popup .ao-vux-appdescription-template {
	box-sizing: border-box;
	max-width: var(--aor-measure);
	padding: 28px 34px 40px;
	font-family: var(--aor-font);
	font-size: 14px;
	line-height: 1.72;
	color: var(--ao-ink, #1e2429);
	/* long identifiers ("com::apporchid::…", a bare URL) must not push a
	   horizontal overflow the item's inline overflow:hidden would then clip */
	overflow-wrap: anywhere;
}

/* the rail: one vertical line the whole sequence of steps hangs off, faded at
   both ends so it reads as a thread rather than a border */
.vux-reasoning-popup .ao-vux-appdescription-template>div {
	position: relative;
	padding-left: var(--aor-gutter);
}

.vux-reasoning-popup .ao-vux-appdescription-template>div::before {
	content: "";
	position: absolute;
	top: 10px;
	bottom: 6px;
	left: calc(var(--aor-node) / 2);
	width: 1px;
	transform: translateX(-.5px);
	background: linear-gradient(180deg,
			transparent 0,
			var(--ao-hairline, #dde5ee) 14px,
			var(--ao-hairline, #dde5ee) calc(100% - 22px),
			transparent 100%);
	pointer-events: none;
}

/* ---- step headings ------------------------------------------------- *
 * h1-h4 are the engine's phases and get a numbered node on the rail.
 * h5/h6 are treated as sub-labels: same rail, hollow node, no number.
 * (Live content emits h4 only; the wider rule is defensive.) */

.vux-reasoning-popup .ao-vux-appdescription-template>div {
	counter-reset: aor-step;
}

.vux-reasoning-popup .ao-vux-appdescription-template h1,
.vux-reasoning-popup .ao-vux-appdescription-template h2,
.vux-reasoning-popup .ao-vux-appdescription-template h3,
.vux-reasoning-popup .ao-vux-appdescription-template h4,
.vux-reasoning-popup .ao-vux-appdescription-template h5,
.vux-reasoning-popup .ao-vux-appdescription-template h6 {
	position: relative;
	margin: 30px 0 8px;
	padding: 0;
	font-family: var(--aor-font);
	font-size: 11.5px;
	font-weight: 600;
	line-height: 20px;
	letter-spacing: .9px;
	text-transform: uppercase;
	color: var(--aor-step-fg);
}

.vux-reasoning-popup .ao-vux-appdescription-template>div> :first-child {
	margin-top: 0;
}

/* the node — a numbered disc centred on the rail, ringed in the surface colour
   so the rail visibly passes behind it (cf. .tm3-dot sitting in .tm3-chip) */
.vux-reasoning-popup .ao-vux-appdescription-template h1::before,
.vux-reasoning-popup .ao-vux-appdescription-template h2::before,
.vux-reasoning-popup .ao-vux-appdescription-template h3::before,
.vux-reasoning-popup .ao-vux-appdescription-template h4::before {
	counter-increment: aor-step;
	content: counter(aor-step);
	position: absolute;
	left: calc(var(--aor-gutter) * -1);
	top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--aor-node);
	height: var(--aor-node);
	border-radius: 50%;
	background: var(--ao-primary, #0079e1);
	color: var(--aor-node-ink);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1;
	box-shadow: 0 0 0 4px var(--ao-surface, #fff), var(--ao-elevation, 0 4px 14px rgba(0, 121, 225, .22));
}

/* h5/h6: same rail, a hollow node, no number — a sub-beat, not a phase */
.vux-reasoning-popup .ao-vux-appdescription-template h5,
.vux-reasoning-popup .ao-vux-appdescription-template h6 {
	margin-top: 20px;
	color: var(--ao-mid, #5e7081);
	letter-spacing: .6px;
}

.vux-reasoning-popup .ao-vux-appdescription-template h5::before,
.vux-reasoning-popup .ao-vux-appdescription-template h6::before {
	content: "";
	position: absolute;
	left: calc(var(--aor-gutter) * -1 + (var(--aor-node) - 9px) / 2);
	top: 6px;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--ao-surface, #fff);
	box-shadow: 0 0 0 2px var(--ao-primary-light, #7fb2e6), 0 0 0 5px var(--ao-surface, #fff);
}

/* ---- prose --------------------------------------------------------- */

.vux-reasoning-popup .ao-vux-appdescription-template p {
	margin: 0 0 10px;
	padding: 0;
	line-height: 1.72;
	color: var(--ao-ink, #1e2429);
}

.vux-reasoning-popup .ao-vux-appdescription-template>div>p:last-child,
.vux-reasoning-popup .ao-vux-appdescription-template>div>ul:last-child,
.vux-reasoning-popup .ao-vux-appdescription-template>div>ol:last-child {
	margin-bottom: 0;
}

/* the "why" line — one step quieter than the claim it qualifies (.tm3-why) */
.vux-reasoning-popup .ao-vux-appdescription-template em,
.vux-reasoning-popup .ao-vux-appdescription-template i {
	font-style: normal;
	color: var(--ao-mid, #5e7081);
}

/* ---- grounded tokens (.tm3-qhit) ----------------------------------- *
 * Every <b>/<strong> the engine emitted is a term it BOUND: a phrase lifted
 * from the question, an MSO, a property, a value. Lighting them up is the
 * whole point of the map's question line, and it is what turns this wall of
 * prose into something scannable. Deliberately NOT applied inside headings
 * (a heading is already a token) or inside code (already a chip). */
.vux-reasoning-popup .ao-vux-appdescription-template p b,
.vux-reasoning-popup .ao-vux-appdescription-template p strong,
.vux-reasoning-popup .ao-vux-appdescription-template li b,
.vux-reasoning-popup .ao-vux-appdescription-template li strong,
.vux-reasoning-popup .ao-vux-appdescription-template td b,
.vux-reasoning-popup .ao-vux-appdescription-template td strong {
	display: inline;
	/* tm3 uses `padding:0 3px`; inline padding pushes trailing punctuation away
	   from the term, so this stays deliberately tight */
	padding: 0 3px;
	border-radius: 4px;
	background: var(--aor-token-bg);
	color: var(--aor-token-fg);
	font-weight: 600;
	box-shadow: inset 0 -2px 0 var(--aor-token-edge);
	/* the highlight must break with the line, not force an overflow */
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}

/* ---- lists --------------------------------------------------------- */

.vux-reasoning-popup .ao-vux-appdescription-template ul,
.vux-reasoning-popup .ao-vux-appdescription-template ol {
	margin: 8px 0 12px;
	padding: 0;
	list-style: none;
}

.vux-reasoning-popup .ao-vux-appdescription-template li {
	position: relative;
	margin: 0 0 5px;
	padding-left: 19px;
	line-height: 1.68;
	color: var(--ao-ink, #1e2429);
}

.vux-reasoning-popup .ao-vux-appdescription-template ul>li::before {
	content: "";
	position: absolute;
	left: 3px;
	top: .68em;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--ao-primary, #0079e1);
}

/* nested: hollow, one shade back */
.vux-reasoning-popup .ao-vux-appdescription-template ul ul>li::before {
	background: transparent;
	box-shadow: inset 0 0 0 1.2px var(--ao-dim, #94a3b1);
}

.vux-reasoning-popup .ao-vux-appdescription-template ol {
	counter-reset: aor-item;
}

.vux-reasoning-popup .ao-vux-appdescription-template ol>li {
	padding-left: 24px;
}

.vux-reasoning-popup .ao-vux-appdescription-template ol>li::before {
	counter-increment: aor-item;
	content: counter(aor-item) ".";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--ao-dim, #94a3b1);
	font-size: 12px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.vux-reasoning-popup .ao-vux-appdescription-template ul ul,
.vux-reasoning-popup .ao-vux-appdescription-template ul ol,
.vux-reasoning-popup .ao-vux-appdescription-template ol ul,
.vux-reasoning-popup .ao-vux-appdescription-template ol ol {
	margin: 5px 0 0 10px;
}

/* ---- code ---------------------------------------------------------- */

.vux-reasoning-popup .ao-vux-appdescription-template code {
	padding: 1px 6px;
	border: 1px solid var(--ao-hairline, #dde5ee);
	border-radius: 6px;
	background: var(--ao-surface, #fff);
	font-family: var(--aor-mono);
	font-size: 12.5px;
	color: var(--ao-primary-deep, #005bab);
}

.vux-reasoning-popup .ao-vux-appdescription-template pre {
	margin: 10px 0 14px;
	padding: 14px 16px;
	border: 1px solid var(--ao-hairline, #dde5ee);
	border-radius: var(--ao-radius-card, 14px);
	background: var(--ao-surface, #fff);
	overflow-x: auto;
	font-family: var(--aor-mono);
	font-size: 12.5px;
	line-height: 1.62;
	color: var(--ao-ink, #1e2429);
	white-space: pre;
	overflow-wrap: normal;
}

.vux-reasoning-popup .ao-vux-appdescription-template pre code {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: inherit;
	font-size: inherit;
}

/* ---- asides -------------------------------------------------------- *
 * An acceptance note / caveat, in the .tm3-check register. */
.vux-reasoning-popup .ao-vux-appdescription-template blockquote {
	margin: 12px 0;
	padding: 10px 14px;
	border: 1px solid var(--ao-hairline, #dde5ee);
	border-left: 2px solid var(--ao-primary-light, #7fb2e6);
	border-radius: 4px var(--ao-radius-card, 14px) var(--ao-radius-card, 14px) 4px;
	background: var(--ao-surface, #fff);
	color: var(--ao-mid, #5e7081);
	font-size: 13px;
}

.vux-reasoning-popup .ao-vux-appdescription-template blockquote p:last-child {
	margin-bottom: 0;
}

.vux-reasoning-popup .ao-vux-appdescription-template hr {
	margin: 20px 0;
	border: 0;
	border-top: 1px solid var(--ao-hairline, #dde5ee);
	height: 0;
}

.vux-reasoning-popup .ao-vux-appdescription-template a {
	color: var(--ao-primary-deep, #005bab);
	text-decoration: none;
	box-shadow: inset 0 -1px 0 var(--aor-token-edge);
}

.vux-reasoning-popup .ao-vux-appdescription-template a:hover {
	box-shadow: inset 0 -2px 0 var(--ao-primary, #0079e1);
}

/* ---- tables -------------------------------------------------------- */

.vux-reasoning-popup .ao-vux-appdescription-template table {
	width: 100%;
	margin: 12px 0 16px;
	border-collapse: collapse;
	border: 1px solid var(--ao-hairline, #dde5ee);
	border-radius: var(--ao-radius-card, 14px);
	overflow: hidden;
	background: var(--ao-surface, #fff);
	font-size: 13px;
}

.vux-reasoning-popup .ao-vux-appdescription-template th {
	padding: 8px 12px;
	background: var(--ao-primary-50, #f0f7fd);
	color: var(--ao-mid, #5e7081);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .6px;
	text-transform: uppercase;
	text-align: left;
	border-bottom: 1px solid var(--ao-hairline, #dde5ee);
}

.vux-reasoning-popup .ao-vux-appdescription-template td {
	padding: 8px 12px;
	border-top: 1px solid var(--ao-hairline, #dde5ee);
	vertical-align: top;
}

/* ==================================================================== *
 * 6. ENTRANCE
 * A short rise on the document, not on the window — webix owns the window's
 * own show animation and fighting it produces a double move.
 * ==================================================================== */

.vux-reasoning-popup .ao-vux-appdescription-template {
	animation: aorRise .42s var(--ao-ease-pop, cubic-bezier(.34, 1.32, .5, 1)) both;
}

@keyframes aorRise {
	from {
		opacity: 0;
		transform: translateY(8px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* ==================================================================== *
 * 7. EMPTY / LOADING
 * ==================================================================== */

.vux-reasoning-popup .ao-vux-empty-message {
	color: var(--ao-mid, #5e7081);
	font-family: var(--aor-font);
}

.vux-reasoning-popup .ao-vux-empty-message .ao-vux-empty-icon-holder {
	background: var(--ao-primary-40, #e8f2fc);
	color: var(--ao-primary-deep, #005bab);
}

/* ==================================================================== *
 * 8. THEME REPAIRS
 * The tokens follow the live palette on their own; these two blocks fix the
 * places where the stock palettes themselves are inconsistent.
 * ==================================================================== */

/* DARK / HIGH CONTRAST — the ramp collapses (--vux-primary-40 == --vux-primary-50
   == #1a282f) and --vux-primary-700 (#0d6084) is too dark to sit on it. Flip the
   token's ink to the LIGHT end of the ramp and lean on the derived tint. */
body.dark-theme .vux-reasoning-popup,
body.highcontrast-theme .vux-reasoning-popup {
	--aor-token-fg: var(--ao-primary-light, #7fb2e6);
	--aor-token-edge: var(--ao-primary, #0079e1);
	--aor-token-mix: 20%;
	/* a 12% tint disappears into a #1c1c1c stage */
	--aor-step-fg: var(--ao-primary-light, #7fb2e6);
}

/* HIGH CONTRAST ships a bright yellow --vux-primary-500; the step numeral has to
   flip to the dark end or it vanishes into its own disc. --ao-ink is WHITE in that
   palette, so it is not the answer either — hence a literal, on purpose. */
body.highcontrast-theme .vux-reasoning-popup {
	--aor-node-ink: #111;
}

body.dark-theme .vux-reasoning-popup .webix_win_head,
body.highcontrast-theme .vux-reasoning-popup .webix_win_head {
	/* the pale-tint gradient reads as a grey smear on a dark shell */
	background: var(--ao-surface, #1c1c1c);
}

body.dark-theme .vux-reasoning-popup .webix_win_head .webix_icon.vuxicon-chat-info,
body.highcontrast-theme .vux-reasoning-popup .webix_win_head .webix_icon.vuxicon-chat-info {
	color: var(--ao-primary-light, #7fb2e6) !important;
}

body.dark-theme .vux-reasoning-popup.webix_window,
body.highcontrast-theme .vux-reasoning-popup.webix_window {
	box-shadow: 0 24px 64px rgba(0, 0, 0, .55), var(--ao-elevation, 0 4px 14px rgba(0, 121, 225, .22));
}

/* PURPLE — --vux-primary-50 ships DARKER than --vux-primary-40, so the header's
   50 -> surface gradient darkens upward against every other theme. Swap the stop.
   (ao-design-system.css makes the same repair for --ao-field; this is the one
   place we mix the ramp by hand.) */
body.purple-theme .vux-reasoning-popup .webix_win_head {
	background: linear-gradient(180deg, var(--ao-primary-40, #e8f2fc) 0%, var(--ao-surface, #fff) 100%);
}

/* ==================================================================== *
 * 9. MOTION / DENSITY
 * ==================================================================== */

@media (prefers-reduced-motion: reduce) {

	.vux-reasoning-popup .ao-vux-appdescription-template {
		animation: none;
	}

	.vux-reasoning-popup .webix_win_head .vux-app-close {
		transition: none;
	}

	.vux-reasoning-popup .webix_win_head .vux-app-close:hover {
		transform: none;
	}
}

/* narrow window (the popup is sized to 60% of screen width, which on a small
   display leaves little room for a 34px gutter) */
@media (max-width: 900px) {
	.vux-reasoning-popup {
		--aor-gutter: 26px;
		--aor-node: 18px;
	}

	.vux-reasoning-popup .ao-vux-appdescription-template {
		padding: 22px 20px 32px;
	}

	.vux-reasoning-popup .webix_win_head .webix_template {
		padding: 18px 16px 16px 18px;
	}
}