/**
 * Ask-in-lesson side column: side menu | video | Sanad.
 *
 * Applied only when qimah-cep-ask-side.js moves the widget (adds
 * .qcep-ask-active to .ld-focus at >= 1400px viewports). Below that the
 * widget stays where the_content rendered it (under the video) and none of
 * these rules match.
 *
 * Geometry facts these rules rest on (measured on staging, 2026-07-29):
 * - .ld-focus is the flex row; .ld-focus-sidebar is position:fixed (overlay,
 *   takes no flex space) - hence the padding-inline-start gutter, sized by
 *   --qcep-sb-w which the JS keeps in sync with the real sidebar width
 *   (ResizeObserver), so collapsing the sidebar reclaims the space.
 * - .ld-focus-main is centered by an !important auto-margin and hard-capped
 *   at 1200px - both must be beaten (!important + higher specificity) or
 *   main slides UNDER the fixed sidebar and clips the lesson title.
 * - .ld-focus-header is position:fixed, 51px tall - the column starts below
 *   it (67px = 51 + 16 breathing room).
 *
 * @package Qimah_CEP
 * @since   1.50.0
 */

/* Match the JS gate (innerWidth >= 1400 at load): if the viewport narrows after
   the move, these rules stop applying instead of leaving a dead gutter + fixed column. */
@media (min-width: 1400px) {

	.ld-focus.qcep-ask-active {
		padding-inline-start: var(--qcep-sb-w, 380px);
	}

	.ld-focus.qcep-ask-active .ld-focus-main {
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		min-width: 0 !important;
		flex: 1 1 0%;
	}

	/* Keep the video column's own content centered and capped as before. */
	.ld-focus.qcep-ask-active .ld-focus-content {
		max-width: 1200px;
		margin: 0 auto;
	}

	.qcep-ask-col {
		width: 372px;
		flex: 0 0 372px;
		box-sizing: border-box;
		padding-block: 67px 16px;
		padding-inline-start: 0;
		padding-inline-end: 16px;
	}

	.qcep-ask-col__inner {
		position: sticky;
		top: 67px;
		max-height: calc(100vh - 83px);
		display: flex;
		flex-direction: column;
	}

	/* The widget fills the column; its own chat log scrolls within the sticky
	   viewport-bounded inner instead of growing the page. */
	.qcep-ask-col .qa-wrap {
		margin: 0;
		display: flex;
		flex-direction: column;
		min-height: 0;
	}

	/* ------------------------------------------------------------------ */
	/* Sanad polish: make the widget read as a Focus Mode panel, not the   */
	/* floating chat dropped into a column. Scoped to .qcep-ask-col so the */
	/* global [qimah_ask] widget elsewhere keeps its own look.             */
	/* Palette per the Sanad ibex mascot spec: Summit Green #1e6649,       */
	/* deep ink #10301d, XP-Gold #E8B931 sparingly, dark canvas            */
	/* #0d2119 / #15352b. Dark mode = html[data-theme="dark"] (CEP rule).  */
	/* ------------------------------------------------------------------ */

	/* Full-height panel: the card fills the sticky inner so the composer
	   sits at the bottom edge like a real side panel. */
	.qcep-ask-col__inner .qa-wrap {
		flex: 1 1 auto;
		max-width: none;
		border-radius: 12px; /* Focus Mode card radius, not the 18px floating chat */
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); /* page card, not floating overlay */
		border-color: rgba(30, 102, 73, 0.14);
	}
	.qcep-ask-col .qa-log {
		flex: 1 1 auto;
		max-height: none;
		min-height: 0;
		padding: 14px;
	}

	/* Header: the widget's own quiet header (soft green-tinted gradient,
	   hairline border, green circle avatar + status). The 1.50.0 'Sanad
	   identity' band - solid Summit Green, white text, XP-Gold avatar ring
	   and gold status dot - is deliberately GONE (founder, 2026-08-04):
	   the gold ring boxed the sit-idle pose (CEP's avatar override beat
	   .qa-sit's transparent background on source order) and the loud band
	   fought the pose art. Only the padding is tightened for the column. */
	.qcep-ask-col .qa-head {
		padding: 12px 14px;
	}

	/* Starter chips: full-width question list, not wrapped pills - reads
	   cleaner at 372px and matches the lesson-first starters. */
	.qcep-ask-col .qa-chips {
		flex-direction: column;
		align-items: stretch;
		gap: 6px;
		padding: 12px 14px 0;
	}
	.qcep-ask-col .qa-chip {
		text-align: start;
		border-radius: 10px;
		padding: 10px 12px;
		font-weight: 500;
	}

	/* Composer: compact for the column - icon-only send. */
	.qcep-ask-col .qa-form {
		padding: 10px 12px;
		gap: 8px;
	}
	.qcep-ask-col .qa-form textarea {
		padding: 10px 12px;
		border-radius: 10px;
	}
	.qcep-ask-col .qa-form button {
		padding: 11px;
		border-radius: 10px;
	}
	.qcep-ask-col .qa-send-text { display: none; }
	.qcep-ask-col .qa-note { padding: 0 14px 10px; }

	/* Dark mode: deep-green canvas from the mascot spec. */
	html[data-theme="dark"] .qcep-ask-col__inner .qa-wrap {
		background: #0d2119;
		border-color: rgba(232, 185, 49, 0.12);
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
	}
	/* Dark: the widget's gradient reads fine over the dark panel; no band. */
	html[data-theme="dark"] .qcep-ask-col .qa-log { background: #0d2119; }
	html[data-theme="dark"] .qcep-ask-col .qa-form { background: #15352b; }

}