/*
 * Word.Studio — AI Engine forms, chat buttons and the guest limit wall.
 *
 * AI Engine's ChatGPT theme styles forms with selectors like
 * `.mwai-chatgpt-theme.mwai-form-container fieldset textarea`. Rather than `!important`,
 * every rule here starts with `body .mwai-form-container.mwai-form-container`, which is
 * one step more specific, so it wins whatever order the stylesheets load in.
 */

/* ── Form panel ── */
body .mwai-form-container.mwai-form-container {
	background: var(--ws-surface-page);
	color: var(--ws-text-strong);
	font-family: var(--ws-font-sans);
	font-size: var(--ws-text-body);
	border-radius: var(--ws-radius-lg);
	padding: var(--ws-space-5);
}

/* Columns inside forms: fields stacked in a column use the same spacing as top-level
 * fields (the fieldset's own bottom margin). WordPress otherwise adds its block gap above
 * the second item in a column, and nested column blocks bring their own margins, so the
 * two sides of a row drift out of line. */
body .mwai-form-container.mwai-form-container :is(.wp-block-column, .is-layout-flow) > * + * { margin-block-start: 0; }
body .mwai-form-container.mwai-form-container .wp-block-columns { margin-block: 0; }

/* Labels (AI Engine renders them as <legend>) */
body .mwai-form-container.mwai-form-container fieldset legend {
	font: 600 var(--ws-text-small)/1.3 var(--ws-font-sans);
	color: var(--ws-text-strong);
	margin-bottom: var(--ws-space-2);
}
body .mwai-form-container.mwai-form-container .mwai-form-field-container {
	border: 0;
	font-family: inherit;
}

/* ── Fields ── */
body .mwai-form-container.mwai-form-container fieldset :is(input[type=text], input[type=email], input[type=tel], input[type=url], input[type=number], input[type=password], select, textarea) {
	background-color: var(--ws-white);
	color: var(--ws-text-strong);
	font: 400 var(--ws-text-body)/1.4 var(--ws-font-sans);   /* 16px: phones don't zoom on tap */
	padding: 14px var(--ws-space-4);
	min-height: var(--ws-control-h);
	border: 1px solid var(--ws-border-control);
	border-radius: var(--ws-radius-md);
	box-shadow: none;
	transition: border-color var(--ws-dur-fast) var(--ws-ease-out), box-shadow var(--ws-dur-fast) var(--ws-ease-out);
}
/* Single-line fields share one height, so inputs and dropdowns line up side by side. */
body .mwai-form-container.mwai-form-container fieldset :is(input[type=text], input[type=email], input[type=tel], input[type=url], input[type=number], input[type=password], select) {
	height: var(--ws-control-h);
	padding-top: 0;
	padding-bottom: 0;
}
body .mwai-form-container.mwai-form-container fieldset textarea { min-height: 120px; resize: vertical; }
body .mwai-form-container.mwai-form-container fieldset :is(input, select, textarea):hover { border-color: var(--ws-gray-400); }
body .mwai-form-container.mwai-form-container fieldset :is(input, select, textarea):focus {
	outline: none;
	border-color: var(--ws-gray-900);
	box-shadow: 0 0 0 3px rgb(24 24 26 / 0.12);
}
body .mwai-form-container.mwai-form-container fieldset :is(input, textarea)::placeholder {
	color: var(--ws-text-placeholder);
	opacity: 1;
}
body .mwai-form-container.mwai-form-container fieldset :is(input, select, textarea)[disabled] {
	background-color: var(--ws-gray-50);
	color: var(--ws-text-muted);
}
body .mwai-form-container.mwai-form-container input[type=checkbox],
body .mwai-form-container.mwai-form-container input[type=radio] {
	width: 20px;
	height: 20px;
	margin: 0 var(--ws-space-2) 0 0;
	vertical-align: middle;
	accent-color: var(--ws-gray-900);
}

/* ── Submit button: the one primary action on a tool page ──
 * Waiting state is a soft dark gray with dimmed text; when the form is ready it
 * deepens to Ink. Hover lifts it a touch with a soft shadow and a faint top highlight. */
body .mwai-form-container.mwai-form-container :is(.mwai-form-submit, .mwai-form-reset) button {
	position: relative;
	min-height: var(--ws-control-h-lg);
	margin-top: var(--ws-space-2);
	padding: 0 var(--ws-space-6);
	background: var(--ws-gray-900);
	color: var(--ws-white);
	font: 700 1.0625rem/1 var(--ws-font-sans);
	letter-spacing: -0.01em;
	border: 0;
	border-radius: var(--ws-radius-md);
	box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06);
	transition:
		background-color var(--ws-dur) var(--ws-ease-out),
		color var(--ws-dur) var(--ws-ease-out),
		box-shadow var(--ws-dur) var(--ws-ease-out),
		transform var(--ws-dur) var(--ws-ease-out);
}
body .mwai-form-container.mwai-form-container :is(.mwai-form-submit, .mwai-form-reset) button:not([disabled]):hover {
	background: var(--ws-black);
	transform: translateY(-1px);
	box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.1), var(--ws-shadow-press);
}
body .mwai-form-container.mwai-form-container :is(.mwai-form-submit, .mwai-form-reset) button:not([disabled]):active {
	transform: translateY(0);
	box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06);
	transition-duration: var(--ws-dur-fast);
}
body .mwai-form-container.mwai-form-container :is(.mwai-form-submit, .mwai-form-reset) button:focus-visible { outline: 2px solid var(--ws-focus); outline-offset: 3px; }
/* Waiting for the form to be filled in */
body .mwai-form-container.mwai-form-container :is(.mwai-form-submit, .mwai-form-reset) button[disabled],
body .mwai-form-container.mwai-form-container :is(.mwai-form-submit, .mwai-form-reset) button[disabled]:hover {
	background: var(--ws-gray-700);
	color: rgb(255 255 255 / 0.55);
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}
body .mwai-form-container.mwai-form-container :is(.mwai-form-submit, .mwai-form-reset) button[disabled] span { opacity: 1; }

/* ── Output ──
 * AI Engine styles the output inside a form with
 * `.mwai-chatgpt-theme.mwai-form-container .mwai-form-output-container .mwai-form-output`,
 * so these rules repeat that path with the doubled-class prefix. */
body .mwai-form-container.mwai-form-container .mwai-form-output-container .mwai-form-output,
body .mwai-form-output-container .mwai-form-output.mwai-form-output {
	background: var(--ws-white);
	color: var(--ws-text);
	border: 1px solid var(--ws-border);
	border-radius: var(--ws-radius-lg);
	padding: var(--ws-space-5);
	font: 400 var(--ws-text-body)/var(--ws-leading-body) var(--ws-font-sans);
}
/* AI Engine's error box (also hosts the limit wall): ink instead of its default red. */
body .mwai-form-container.mwai-form-container { --mwai-errorBackgroundColor: var(--ws-gray-900); --mwai-errorTextColor: var(--ws-white); --mwai-errorFontColor: var(--ws-white); }
body .mwai-form-container.mwai-form-container .mwai-form-output-container .mwai-form-output.mwai-error,
body .mwai-form-output-container .mwai-form-output.mwai-form-output.mwai-error {
	background: var(--ws-surface-inverse);
	color: var(--ws-text-on-inverse);
	border-color: transparent;
}
/* Plain links in error messages; the limit wall styles its own button. */
body .mwai-form-container.mwai-form-container .mwai-form-output-container .mwai-form-output.mwai-error a:not(.ws-limit-box a),
body .mwai-form-output-container .mwai-form-output.mwai-form-output.mwai-error a:not(.ws-limit-box a) { color: var(--ws-white); }

/* ── Guest limit wall (markup from the WPCode "AI Engine - MemberPress Guest Fallback" snippet) ── */
/* The wall brings its own surface, so the error box around it steps aside. */
body .mwai-form-container.mwai-form-container .mwai-form-output-container .mwai-form-output.mwai-error:has(.ws-limit-box),
body .mwai-form-output-container .mwai-form-output.mwai-form-output.mwai-error:has(.ws-limit-box) {
	padding: 0;
	background: transparent;
	border: 0;
}
/* AI Engine renders the message as Markdown with line breaks on, so each newline in
 * the snippet's HTML becomes a <br>, which would add empty rows to this grid. */
/* Entrance: the wall rises into place, then its benefits and button follow in sequence. */
@keyframes ws-wall-in {
	from { opacity: 0; transform: translateY(14px) scale(0.985); filter: blur(6px); }
	to   { opacity: 1; transform: none; filter: none; }
}
@keyframes ws-item-in {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: none; }
}
body .ws-limit-box { animation: ws-wall-in 560ms var(--ws-ease-out) both; }
body .ws-limit-box :is(h2, p, li, .ws-limit-cta) { animation: ws-item-in 420ms var(--ws-ease-out) both; }
body .ws-limit-box.ws-limit-box h2 { animation-delay: 120ms; }
body .ws-limit-box.ws-limit-box p { animation-delay: 180ms; }
body .ws-limit-box li:nth-of-type(1) { animation-delay: 260ms; }
body .ws-limit-box li:nth-of-type(2) { animation-delay: 320ms; }
body .ws-limit-box li:nth-of-type(3) { animation-delay: 380ms; }
body .ws-limit-box li:nth-of-type(n+4) { animation-delay: 440ms; }
body .ws-limit-box .ws-limit-cta { animation-delay: 480ms; }
@media (prefers-reduced-motion: reduce) {
	body .ws-limit-box, body .ws-limit-box * { animation: none !important; }
	body .ws-limit-box .ws-limit-cta a, body .mwai-form-container .mwai-form-submit button { transition: none; transform: none !important; }
}

body .ws-limit-box br,
body .ws-limit-box p:empty { display: none; }
body .ws-limit-box {
	display: grid;
	gap: var(--ws-space-4);
	background: var(--ws-surface-inverse);
	color: var(--ws-text-on-inverse);
	border-radius: var(--ws-radius-lg);
	padding: var(--ws-space-6);
	margin: 0;
	box-sizing: border-box;
}
body .ws-limit-box h2 {
	margin: 0;
	border: 0;
	color: var(--ws-white);
	font: 800 var(--ws-text-h3)/1.2 var(--ws-font-sans);
	letter-spacing: -0.02em;
}
body .ws-limit-box p { margin: 0; color: var(--ws-gray-300); line-height: 1.6; }
body .ws-limit-box ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ws-space-2); }
body .ws-limit-box li { display: flex; align-items: flex-start; gap: var(--ws-space-2); margin: 0; color: var(--ws-gray-200); }
body .ws-limit-box .ws-check { flex: none; color: var(--ws-white); font-weight: 700; }
body .ws-limit-box .ws-limit-cta { display: flex; align-items: center; gap: var(--ws-space-4); flex-wrap: wrap; padding-top: var(--ws-space-2); }
body .mwai-form-output-container .ws-limit-box .ws-limit-cta a {
	display: inline-flex;
	align-items: center;
	min-height: var(--ws-control-h);
	padding: 0 var(--ws-space-5);
	background: var(--ws-white) var(--ws-glow-fill);
	color: var(--ws-gray-900);
	font: 700 var(--ws-text-body)/1 var(--ws-font-sans);
	text-decoration: none;
	border: 1px solid var(--ws-glow-edge);
	border-radius: var(--ws-radius-md);
	box-shadow: var(--ws-glow-rest);
	transition: box-shadow var(--ws-dur-glow) var(--ws-ease-out), transform var(--ws-dur-glow) var(--ws-ease-out);
}
/* Same glow as the home "Get Access" and header "Sign Up" (see .ws-glow in base.css). */
body .mwai-form-output-container .ws-limit-box .ws-limit-cta a:hover {
	background-image: var(--ws-glow-fill-hover);
	box-shadow: var(--ws-glow-hover);
	transform: scale(var(--ws-glow-grow));
}
body .mwai-form-output-container .ws-limit-box .ws-limit-cta a:focus-visible { outline: 2px solid var(--ws-focus-on-inverse); outline-offset: 3px; }
body .ws-limit-box .ws-price { color: var(--ws-gray-300); font-size: var(--ws-text-small); font-weight: 500; }

/* ── Chatbots on the built-in ChatGPT theme ── */
body .mwai-chatgpt-theme.mwai-chatgpt-theme:not(.mwai-form-container) button {
	background-color: var(--ws-gray-900);
	color: var(--ws-white);
	font-weight: 700;
	border: 0;
	border-radius: var(--ws-radius-md);
}
body .mwai-chatgpt-theme.mwai-chatgpt-theme:not(.mwai-form-container) button:hover { background-color: var(--ws-black); }
body .mwai-chatgpt-theme.mwai-chatgpt-theme .mwai-input .mwai-input-text { background-color: var(--ws-white); }