.rmai {
	--rmai-text: #1a1f36;
	--rmai-muted: #5b6477;
	--rmai-border: #e3e6ec;
	--rmai-bg: #ffffff;
	--rmai-bg-soft: #f7f8fa;
	--rmai-panel: #e1e6ee;
	--rmai-panel-border: #b8c0cd;
	--rmai-accent: #ff3b30;
	--rmai-radius: 16px;
	color: var(--rmai-text);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	max-width: 960px;
	margin: 0 auto;
	padding: 24px 24px 48px;
}

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

.rmai__header {
	text-align: center;
	margin-bottom: 20px;
}

.rmai__logo {
	font-weight: 700;
	font-size: 16px;
	letter-spacing: -0.01em;
	margin-bottom: 8px;
}

.rmai__title {
	font-size: 36px;
	font-weight: 600;
	letter-spacing: -0.03em;
	margin: 0 0 6px;
	display: inline-flex;
	align-items: center;
	gap: 12px;
}

.rmai__beta {
	font-size: 14px;
	font-weight: 500;
	color: var(--rmai-muted);
	border: 1px solid var(--rmai-border);
	border-radius: 999px;
	padding: 4px 12px;
	letter-spacing: 0.02em;
}

.rmai__subtitle {
	font-size: 15px;
	color: var(--rmai-muted);
	margin: 0;
}

/* ---------- Chatbot ----------
   The AI Engine widget, recolored via its CSS variables. Light theme with the
   brand red — no DOM restructuring, no state flips. */

.rmai__chatbot {
	max-width: 720px;
	margin: 0 auto;
}

.rmai .mwai-chatgpt-theme {
	--mwai-fontColor: var(--rmai-text);
	/* In this AI Engine version: Primary paints the input row, Secondary paints
	   the messages body. We want gray messages on a white input — gives a clear
	   "messages panel sits in a frame, input bar is its own surface" structure. */
	--mwai-backgroundPrimaryColor: var(--rmai-bg);
	--mwai-backgroundHeaderColor: var(--rmai-bg);
	--mwai-backgroundSecondaryColor: var(--rmai-panel);
	--mwai-bubbleColor: var(--rmai-bg);
	--mwai-accentColor: var(--rmai-accent);
	--mwai-headerColor: var(--rmai-text);
	--mwai-conversationsBackgroundColor: var(--rmai-bg);
	--mwai-conversationsTextColor: var(--rmai-text);
	--mwai-borderColor: var(--rmai-border);
	--mwai-borderRadius: var(--rmai-radius);
	--mwai-fontSize: 15px;
	--mwai-width: 100%;
	/* Bound the chat so it fits one viewport. The conversation scrolls
	   internally and AI Engine auto-pins to the latest message; the input is
	   always reachable at the bottom of the visible panel. The strong panel
	   chrome below makes the inner-vs-page scroll obvious instead of confusing. */
	--mwai-maxHeight: min(60vh, 560px);

	border: 1px solid var(--rmai-panel-border);
	border-radius: var(--rmai-radius);
	background: var(--rmai-panel);
	box-shadow: 0 12px 40px rgba(20, 30, 50, 0.14);
	overflow: hidden;
	/* Accent rail makes the panel read as a real "widget" not a tinted area. */
	border-top: 4px solid var(--rmai-accent);
}

/* Comfortable empty-state height + bottom safe-area so the last message
   doesn't clip behind the input row's top border. */
.rmai .mwai-chatgpt-theme .mwai-conversation {
	min-height: 360px;
	padding-bottom: 12px;
}

/* Wrap long URLs/words inside chat bubbles so they don't clip the right edge. */
.rmai .mwai-chatgpt-theme .mwai-text {
	overflow-wrap: anywhere;
}

/* Visible separator between messages area and input row reinforces the chrome.
   !important on padding matches AI Engine's own !important. */
.rmai .mwai-chatgpt-theme .mwai-input {
	border-top: 1px solid var(--rmai-panel-border);
	padding: 14px 14px 14px 18px !important;
}

/* AI Engine's chatgpt theme renders the submit as semi-transparent white,
   meant for a dark backdrop. Recolor for our light background and grow it to
   a comfortable touch target (32px default falls below WCAG 2.5.5 / 44pt). */
.rmai .mwai-chatgpt-theme .mwai-input button.mwai-input-submit {
	background: var(--rmai-accent);
	color: #fff;
	min-width: 40px;
	min-height: 40px;
}

.rmai .mwai-chatgpt-theme .mwai-input button.mwai-input-submit:hover {
	background: #e6342a;
}

/* Visible focus rings on the chat input and submit. AI Engine's defaults are
   either suppressed (textarea) or invisible-on-red (submit). */
.rmai .mwai-chatgpt-theme .mwai-input textarea:focus-visible {
	outline: 2px solid var(--rmai-accent);
	outline-offset: 2px;
}

.rmai .mwai-chatgpt-theme .mwai-input button.mwai-input-submit:focus-visible {
	outline: 2px solid var(--rmai-text);
	outline-offset: 2px;
}

/* During AI streaming, AI Engine widens the submit into a pill with a "0:08"
   timer (white-on-red text fails WCAG 1.4.3 — 3.5:1 vs 4.5:1). Hide the timer
   text and rely on the button color/shape as the busy indicator. */
.rmai .mwai-chatgpt-theme .mwai-input-submit .mwai-timer {
	display: none;
}

/* Soft brand-tinted user bubble — AI Engine paints it with --mwai-accentColor
   (the bright red used by the submit button), which is too aggressive behind
   text. Override the bubble; the submit button keeps the strong accent. */
.rmai .mwai-chatgpt-theme .mwai-reply.mwai-user .mwai-text {
	background: #fff1ef;
	color: var(--rmai-text);
	border: 1px solid #ffd9d2;
}

/* ---------- Persistent chips below chat ---------- */

.rmai__chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	max-width: 720px;
	margin: 20px auto 0;
}

.rmai__chip {
	font: inherit;
	font-size: 14px;
	color: var(--rmai-text);
	background: var(--rmai-bg);
	border: 1px solid var(--rmai-border);
	border-radius: 999px;
	padding: 10px 18px;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.rmai__chip:hover {
	background: var(--rmai-bg-soft);
	border-color: #cdd2dc;
}

.rmai__chip:focus-visible {
	outline: 2px solid var(--rmai-accent);
	outline-offset: 2px;
}

/* ---------- Mobile ---------- */

@media (max-width: 480px) {
	.rmai {
		padding: 16px 12px 32px;
	}
}