/* ============================================================
   Home v4 — S6 Ask (.rc4-ask)
   Self-playing example chat. Markup is the final frame; the
   "before" state lives only under .rc4-ask__panel.is-rc4-rewound
   (set by api.scene while the panel is below the start line): the
   panel, header and source line stay, the conversation waits as a
   ghost and lights up message by message as JS adds .is-on. The
   status chip sits at the right of the header.
   ============================================================ */

/* --- Layout: stacked by default; copy left, chat right from 1100px
   (below that the left column is too narrow for the 45px headline) --- */
.rc4-ask .rc4-ask__layout { display: block; }
.rc4-ask .rc4-ask__layout > .rc-section__head { margin: 0 0 32px; }
@media (min-width: 1100px) {
	.rc4-ask .rc4-ask__layout {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 600px);
		gap: 56px;
		align-items: center;
	}
	.rc4-ask .rc4-ask__layout > .rc-section__head { margin: 0; }
}

/* --- Panel: the one cut-corner object in this section --- */
.rc4-ask .rc4-ask__panel {
	--rc-cut: 18px;
	position: relative;
	margin: 0;
	width: 100%;
	max-width: 600px;
	background: var(--rc-card);
	box-shadow: inset 0 0 0 1px var(--rc-line-strong);
	/* Local polygon: var(--rc-clip-cut) is resolved on :root with the 14px
	   --rc-cut, so overriding --rc-cut here would not reach it and the corner
	   hairlines below would sit off the cut edge. */
	clip-path: polygon(var(--rc-cut) 0, 100% 0, 100% calc(100% - var(--rc-cut)), calc(100% - var(--rc-cut)) 100%, 0 100%, 0 var(--rc-cut));
}
/* 1px hairline along both cut edges, so the outline stays continuous. */
.rc4-ask .rc4-ask__panel::before,
.rc4-ask .rc4-ask__panel::after {
	content: "";
	position: absolute;
	width: var(--rc-cut);
	height: var(--rc-cut);
	pointer-events: none;
	z-index: 2;
}
.rc4-ask .rc4-ask__panel::before {
	top: 0; left: 0;
	background: linear-gradient(to bottom right, transparent 50%, var(--rc-line-strong) 50%, var(--rc-line-strong) calc(50% + 1.2px), transparent calc(50% + 1.2px));
}
.rc4-ask .rc4-ask__panel::after {
	right: 0; bottom: 0;
	background: linear-gradient(to bottom right, transparent calc(50% - 1.2px), var(--rc-line-strong) calc(50% - 1.2px), var(--rc-line-strong) 50%, transparent 50%);
}

.rc4-ask .rc4-ask__ico { flex: none; display: block; }

/* Header: spark + "Example chat" */
.rc4-ask .rc4-ask__top {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 7px 16px 8px 28px;
	border-bottom: 1px solid var(--rc-line);
	font: 500 12px/1.2 var(--rc-font-mono);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--rc-text-soft);
}
.rc4-ask .rc4-ask__top .rc4-ask__ico { color: var(--rc-purple-lt); }
.rc4-ask .rc4-ask__status { margin-left: auto; }

/* --- Conversation --- */
.rc4-ask .rc4-ask__log {
	list-style: none;
	margin: 0;
	padding: 22px 24px 24px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.rc4-ask .rc4-ask__msg { margin: 0; padding: 0; }

/* User bubbles: right, flat graphite */
.rc4-ask .rc4-ask__msg--q {
	align-self: flex-end;
	max-width: 80%;
	padding: 10px 14px;
	background: #2A2E38;
	color: var(--rc-text);
	font: 400 16px/1.5 var(--rc-font-sans);
}

/* Answer rows: avatar + body */
.rc4-ask .rc4-ask__msg--a {
	display: grid;
	grid-template-columns: 28px minmax(0, 1fr);
	gap: 10px;
	align-items: start;
	padding-right: 6%;
}
.rc4-ask .rc4-ask__av {
	width: 28px;
	height: 28px;
	display: grid;
	place-items: center;
	background: var(--rc-card-soft);
	box-shadow: inset 0 0 0 1px var(--rc-line-strong);
	color: var(--rc-purple-lt);
}
.rc4-ask .rc4-ask__av svg { display: block; }
.rc4-ask .rc4-ask__body { position: relative; min-width: 0; }

/* Answer bubble: 1px full outline (house rule: no colored left bars) */
.rc4-ask .rc4-ask__bubble {
	padding: 13px 16px 14px;
	background: rgba(91, 79, 196, 0.08);
	box-shadow: inset 0 0 0 1px rgba(157, 144, 248, 0.38);
}
.rc4-ask .rc4-ask__text {
	margin: 0;
	color: var(--rc-text);
	font: 400 16px/1.55 var(--rc-font-sans);
}
.rc4-ask .rc4-ask__text strong { color: #fff; font-weight: 600; }
.rc4-ask .rc4-ask__chunk { display: inline-block; }

/* Typing indicator: sits where the answer bubble starts; hidden at rest */
.rc4-ask .rc4-ask__typing {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	gap: 5px;
	padding: 13px 14px;
	background: #202233; /* the answer bubble's tint, opaque: it sits on the waiting answer */
	box-shadow: inset 0 0 0 1px rgba(157, 144, 248, 0.38);
	opacity: 0;
	visibility: hidden;
	transition: opacity .15s linear, visibility 0s linear .15s;
	z-index: 1;
}
.rc4-ask .rc4-ask__typing.is-on { opacity: 1; visibility: visible; transition: opacity .15s linear; }
.rc4-ask .rc4-ask__typing i {
	width: 6px;
	height: 6px;
	border-radius: 1.5px;
	background: var(--rc-text-mute);
	opacity: 0.35;
}
.rc4-ask .rc4-ask__typing.is-on i { animation: rc4AskDot .5s linear infinite; }
.rc4-ask .rc4-ask__typing.is-on i:nth-child(2) { animation-delay: .12s; }
.rc4-ask .rc4-ask__typing.is-on i:nth-child(3) { animation-delay: .24s; }
@keyframes rc4AskDot {
	0%, 100% { opacity: 0.35; }
	40%      { opacity: 1; }
}

/* --- A1 mini chart: one 0–30% axis, two bars --- */
.rc4-ask .rc4-ask__chart {
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	column-gap: 14px;
	row-gap: 4px;
	align-items: center;
	margin-top: 12px;
}
.rc4-ask .rc4-ask__lbl {
	font: 400 14px/1.3 var(--rc-font-sans);
	color: var(--rc-text);
	white-space: nowrap;
}
.rc4-ask .rc4-ask__lbl b { font-weight: 600; color: #fff; }
.rc4-ask .rc4-ask__lbl--a { grid-column: 1; grid-row: 1; }
.rc4-ask .rc4-ask__track--a { grid-column: 2; grid-row: 1; }
.rc4-ask .rc4-ask__lbl--b { grid-column: 1; grid-row: 2; }
.rc4-ask .rc4-ask__track--b { grid-column: 2; grid-row: 2; }
.rc4-ask .rc4-ask__cap { grid-column: 2; grid-row: 3; }

/* Shared axis behind both bars: hairline at 0, gridlines at 10/20/30% */
.rc4-ask .rc4-ask__axis {
	grid-column: 2;
	grid-row: 1 / 3;
	align-self: stretch;
	background:
		linear-gradient(90deg, var(--rc-line-bright) 0 1px, transparent 1px),
		repeating-linear-gradient(90deg, transparent 0 calc(33.333% - 1px), var(--rc-line) calc(33.333% - 1px) 33.333%);
}
.rc4-ask .rc4-ask__track {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	height: 24px;
}
.rc4-ask .rc4-ask__bar {
	display: block;
	height: 14px;
	border-radius: 0 4px 4px 0;
	transform-origin: 0 50%;
}
.rc4-ask .rc4-ask__bar--a { width: 90%; background: #8B7CF0; }  /* 27 of 30 */
.rc4-ask .rc4-ask__bar--b { width: 60%; background: #B98432; }  /* 18 of 30 */
.rc4-ask .rc4-ask__cap {
	padding-top: 4px;
	font: 400 12px/1.3 var(--rc-font-mono);
	color: var(--rc-text-soft);
}

/* --- A2 status chips --- */
.rc4-ask .rc4-ask__chips {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.rc4-ask .rc4-ask__chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	padding: 6px 10px;
	font: 500 13px/1.3 var(--rc-font-mono);
	color: var(--rc-text);
	background: var(--rc-bg);
}
.rc4-ask .rc4-ask__chip svg { flex: none; display: block; }
.rc4-ask .rc4-ask__chip--bad  { box-shadow: inset 0 0 0 1px rgba(229, 100, 90, 0.75); }
.rc4-ask .rc4-ask__chip--bad svg  { color: var(--rc-red); }
.rc4-ask .rc4-ask__chip--good { box-shadow: inset 0 0 0 1px rgba(70, 177, 123, 0.75); }
.rc4-ask .rc4-ask__chip--good svg { color: var(--rc-green); }

/* --- Source line: the one yellow "look here" --- */
.rc4-ask .rc4-ask__src {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 7px;
	margin: 0;
	padding: 12px 28px 13px 24px;
	border-top: 1px solid var(--rc-line);
	font: 400 12px/1.5 var(--rc-font-mono);
	color: var(--rc-text-soft);
}
.rc4-ask .rc4-ask__src .rc4-ask__ico { color: var(--rc-text-mute); }
.rc4-ask .rc4-ask__hl {
	color: var(--rc-text);
	padding: 0 2px;
	background-image: linear-gradient(rgba(217, 164, 65, 0.42), rgba(217, 164, 65, 0.42));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 100% 42%;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

/* ============================================================
   Motion: before state (only while rewound) + transitions
   ============================================================ */
.rc4-ask .rc4-ask__panel,
.rc4-ask .rc4-ask__msg--q,
.rc4-ask .rc4-ask__av,
.rc4-ask .rc4-ask__bubble,
.rc4-ask .rc4-ask__chunk,
.rc4-ask .rc4-ask__chip,
.rc4-ask .rc4-ask__src {
	transition: opacity .25s var(--rc-ease-out), transform .25s var(--rc-ease-out);
}
.rc4-ask .rc4-ask__lbl,
.rc4-ask .rc4-ask__cap { transition: opacity .3s var(--rc-ease-out) .1s; }
.rc4-ask .rc4-ask__bar { transition: transform .4s var(--rc-ease-out); }
.rc4-ask .rc4-ask__hl { transition: background-size .6s var(--rc-ease-out); }

/* Waiting messages are ghosts (one level only: inside a lit bubble, the
   pieces not yet on are ghosts; inside a ghost bubble they inherit it). */
.rc4-ask .rc4-ask__panel.is-rc4-rewound :is(.rc4-ask__msg--q, .rc4-ask__av, .rc4-ask__bubble):not(.is-on) { opacity: var(--rc4-ghost); }
.rc4-ask .rc4-ask__panel.is-rc4-rewound .rc4-ask__bubble.is-on :is(.rc4-ask__chunk, .rc4-ask__lbl, .rc4-ask__cap, .rc4-ask__chip):not(.is-on) { opacity: var(--rc4-ghost); }
.rc4-ask .rc4-ask__panel.is-rc4-rewound .rc4-ask__bar:not(.is-on) { transform: scaleX(0); }
.rc4-ask .rc4-ask__panel.is-rc4-rewound .rc4-ask__hl:not(.is-on) { background-size: 0% 42%; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 760px) {
	.rc4-ask .rc__container { padding-left: 16px; padding-right: 16px; }
	.rc4-ask .rc4-ask__top { padding: 6px 12px 7px 22px; }
	.rc4-ask .rc4-ask__log { padding: 16px; gap: 12px; }
	.rc4-ask .rc4-ask__msg--q { max-width: 88%; padding: 9px 12px; font-size: 15px; }
	.rc4-ask .rc4-ask__msg--a { grid-template-columns: 24px minmax(0, 1fr); gap: 8px; padding-right: 0; }
	.rc4-ask .rc4-ask__av { width: 24px; height: 24px; }
	.rc4-ask .rc4-ask__bubble { padding: 11px 12px 12px; }
	.rc4-ask .rc4-ask__text { font-size: 15px; }
	.rc4-ask .rc4-ask__typing { padding: 11px 12px; }

	/* Chart: labels above bars, bars fill the bubble */
	.rc4-ask .rc4-ask__chart { grid-template-columns: minmax(0, 1fr); row-gap: 2px; margin-top: 10px; }
	.rc4-ask .rc4-ask__lbl--a { grid-column: 1; grid-row: 1; }
	.rc4-ask .rc4-ask__track--a { grid-column: 1; grid-row: 2; }
	.rc4-ask .rc4-ask__lbl--b { grid-column: 1; grid-row: 3; padding-top: 6px; }
	.rc4-ask .rc4-ask__track--b { grid-column: 1; grid-row: 4; }
	.rc4-ask .rc4-ask__cap { grid-column: 1; grid-row: 5; }
	.rc4-ask .rc4-ask__axis { display: none; }
	.rc4-ask .rc4-ask__track {
		height: 20px;
		background:
			linear-gradient(90deg, var(--rc-line-bright) 0 1px, transparent 1px),
			repeating-linear-gradient(90deg, transparent 0 calc(33.333% - 1px), var(--rc-line) calc(33.333% - 1px) 33.333%);
	}
	.rc4-ask .rc4-ask__bar { height: 12px; }

	/* Chips stack */
	.rc4-ask .rc4-ask__chips { flex-direction: column; align-items: flex-start; }

	.rc4-ask .rc4-ask__src { padding: 11px 22px 12px 16px; }
}

/* ============================================================
   Reduced motion: the final frame, no movement
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
	.rc4-ask .rc4-ask__panel,
	.rc4-ask .rc4-ask__panel * { transition: none !important; animation: none !important; }
	.rc4-ask .rc4-ask__panel.is-rc4-rewound,
	.rc4-ask .rc4-ask__panel.is-rc4-rewound * { opacity: 1 !important; transform: none !important; }
	.rc4-ask .rc4-ask__panel .rc4-ask__hl { background-size: 100% 42% !important; }
	.rc4-ask .rc4-ask__panel .rc4-ask__typing { display: none !important; }
}