/**
 * Support desk — "Submit a support ticket" section, ticket wizard (ported
 * from the reference Form Experience), guest contact card, ticket list and
 * conversation thread. Loaded only where the support desk renders.
 */

/* ---------- Tokens ---------- */
.wpi-sd,
.wpi-fx,
.wpi-tickets,
.wpi-thread {
	--fx-ink: var(--ink, #0B0B12);
	--fx-brand: var(--indigo, #4C5BFF);
	--fx-lens: var(--wp--preset--color--lens, #A9B1FF);
	--fx-muted: var(--muted, #5E6072);
	--fx-line: rgba(11, 11, 18, .1);
	--fx-soft: #F5F6FA;
	--fx-tint: rgba(76, 91, 255, .07);
	--fx-bad: #C42840;
	--fx-good: #12864A;
	--fx-r: 14px;
	--fx-ease: cubic-bezier(.22, 1, .36, 1);
	--fx-spring: cubic-bezier(.34, 1.56, .64, 1);
	--fx-mono: var(--wp--preset--font-family--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
}

/* ---------- Section layout ---------- */
.wpi-sd {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: start;
	scroll-margin-top: calc(var(--header-h, 68px) + 16px);
}

.wpi-sd__intro {
	min-width: 0;
}

/* The page group has no side padding; keep a gutter until the wide width fits. */
@media (max-width: 1400px) {
	.wpi-sd {
		padding-inline: var(--gutter, 1.125rem);
	}
}

@media (min-width: 1000px) {
	.wpi-sd {
		grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
	}

	.wpi-sd__intro {
		position: sticky;
		top: calc(var(--header-h, 68px) + 24px);
	}
}

.wpi-sd__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	margin: 0 0 1rem;
	font-family: var(--fx-mono);
	font-size: 11px;
	text-transform: uppercase;
	color: var(--fx-muted);
}

.wpi-sd__eyebrow::before {
	content: "";
	width: 14px;
	height: 8px;
	border-radius: 999px;
	background: radial-gradient(circle at 4px 50%, var(--fx-ink) 3.5px, transparent 4px), radial-gradient(circle at 10px 50%, var(--fx-brand) 3.5px, transparent 4px);
}

.wpi-sd__title {
	margin: 0 0 1.25rem;
	font-size: clamp(2rem, 1.4rem + 2vw, 2.75rem);
	font-weight: 500;
	line-height: 1.05;
}

.wpi-sd__lead {
	margin: 0 0 2rem;
	max-width: 52ch;
	color: var(--fx-muted);
	font-size: 16px;
	line-height: 1.6;
}

.wpi-sd__checks-title {
	margin: 0 0 1rem;
	font-size: 14.5px;
	font-weight: 500;
}

.wpi-sd__checks {
	display: grid;
	gap: .85rem;
	margin: 0 0 2rem;
	padding: 0;
	list-style: none;
}

.wpi-sd__checks li {
	position: relative;
	padding-left: 2rem;
	font-size: 14.5px;
	line-height: 1.55;
}

.wpi-sd__checks li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--fx-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234C5BFF' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4L18 8'/%3E%3C/svg%3E") center / 12px no-repeat;
}

.wpi-sd__checks a {
	color: var(--fx-brand);
	text-underline-offset: 3px;
}

.wpi-sd__notice {
	display: flex;
	gap: .75rem;
	align-items: flex-start;
	padding: 1rem 1.15rem;
	border-left: 3px solid var(--fx-brand);
	border-radius: 4px var(--fx-r) var(--fx-r) 4px;
	background: var(--lav-2, #EEF0FF);
	color: #2B2C3A;
	font-size: 13.5px;
	line-height: 1.55;
}

.wpi-sd__notice svg {
	flex: none;
	margin-top: 1px;
	color: var(--fx-brand);
}

.wpi-sd__notice p {
	margin: 0;
}

.wpi-sd__card {
	min-width: 0;
	padding: clamp(1.25rem, 3.2vw, 2.25rem);
	border-radius: var(--r-l, 28px);
	background: #fff;
	box-shadow: 0 0 0 1px var(--fx-line), 0 2px 4px rgba(11, 11, 18, .03), 0 40px 80px -40px rgba(36, 44, 140, .28);
}

.wpi-sd-who {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .6rem;
	margin: 0 0 1.75rem;
	padding: .75rem 1rem;
	border-radius: var(--fx-r);
	background: var(--fx-soft);
	font-size: 14px;
	color: #2B2C3A;
}

.wpi-sd-who > svg {
	flex: none;
	color: var(--fx-ink);
}

.wpi-sd-who > span {
	flex: 1;
	min-width: 12rem;
}

.wpi-sd-who a {
	color: var(--fx-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.wpi-sd-who > a {
	font-weight: 500;
	color: var(--fx-brand);
}

.wpi-sd-who__avatar {
	flex: none;
	border-radius: 50%;
}

/* Recent tickets under the intro. */
.wpi-sd-mine {
	margin-top: 2rem;
	padding: 1.1rem 1.15rem .5rem;
	border-radius: 18px;
	background: #fff;
	box-shadow: inset 0 0 0 1px var(--fx-line);
}

.wpi-sd-mine__head {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin: 0 0 .5rem;
	font-size: 13px;
	font-weight: 500;
}

.wpi-sd-mine__head a {
	color: var(--fx-brand);
	font-weight: 400;
}

.wpi-sd-mine ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.wpi-sd-mine li + li {
	border-top: 1px solid var(--fx-line);
}

.wpi-sd-mine li a {
	display: flex;
	align-items: center;
	gap: .65rem;
	padding: .7rem 0;
	color: var(--fx-ink);
	font-size: 14px;
	text-decoration: none;
}

.wpi-sd-mine li a:hover .wpi-sd-mine__subject {
	color: var(--fx-brand);
}

.wpi-sd-mine__num {
	font-family: var(--fx-mono);
	font-size: 11.5px;
	color: var(--fx-muted);
}

.wpi-sd-mine__subject {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	transition: color .2s;
}

/* Status badges (list, mini list, thread). */
.wpi-tk-badge {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	flex: none;
	padding: .2rem .6rem;
	border-radius: 999px;
	background: var(--fx-soft);
	color: var(--fx-muted);
	font-size: 12px;
	font-weight: 500;
	white-space: nowrap;
}

.wpi-tk-badge::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
}

.wpi-tk-badge.is-open { background: #FFF2E2; color: #8A4B00; }
.wpi-tk-badge.is-answered { background: var(--lav-2, #EEF0FF); color: var(--indigo-2, #3241E6); }
.wpi-tk-badge.is-pending { background: #E6F6EF; color: #145C40; }

/* ---------- Guest (CF7) card ---------- */
.wpi-sd-guest__title {
	margin: 0 0 .35rem;
	font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
	font-weight: 500;
	line-height: 1.2;
}

.wpi-sd-guest__lead {
	margin: 0 0 1.5rem;
	color: var(--fx-muted);
	font-size: 14px;
}

.wpi-sd-guest .wpcf7 form > p {
	margin: 0 0 1.1rem;
}

.wpi-sd-guest .wpcf7 label {
	display: block;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--fx-ink);
}

.wpi-sd-guest .wpcf7 label br {
	display: none;
}

.wpi-sd-guest .wpcf7-form-control-wrap {
	display: block;
	margin-top: .45rem;
}

.wpi-sd-guest .wpcf7 input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.wpi-sd-guest .wpcf7 select,
.wpi-sd-guest .wpcf7 textarea {
	box-sizing: border-box;
	display: block;
	width: 100%;
	max-width: none;
	min-height: 52px;
	margin: 0;
	padding: .85rem 1rem;
	border: 0;
	border-radius: var(--fx-r);
	background: var(--fx-soft);
	color: var(--fx-ink);
	font: inherit;
	font-size: 15px;
	font-weight: 400;
	box-shadow: inset 0 0 0 1px var(--fx-line);
	transition: background-color .25s, box-shadow .3s var(--fx-ease);
}

.wpi-sd-guest .wpcf7 textarea {
	min-height: 150px;
	line-height: 1.6;
	resize: vertical;
}

.wpi-sd-guest .wpcf7 input:hover,
.wpi-sd-guest .wpcf7 textarea:hover {
	box-shadow: inset 0 0 0 1px rgba(11, 11, 18, .22);
}

.wpi-sd-guest .wpcf7 input:focus,
.wpi-sd-guest .wpcf7 textarea:focus {
	outline: none;
	background: #fff;
	box-shadow: inset 0 0 0 1.5px var(--fx-brand), 0 0 0 4px rgba(76, 91, 255, .14);
}

.wpi-sd-guest .wpcf7 .wpcf7-not-valid {
	box-shadow: inset 0 0 0 1.5px var(--fx-bad), 0 0 0 4px rgba(214, 51, 75, .1);
}

.wpi-sd-guest .wpcf7-not-valid-tip {
	margin-top: .45rem;
	color: var(--fx-bad);
	font-size: 12.5px;
	font-weight: 500;
}

.wpi-sd-guest .wpcf7 .wpcf7-submit {
	min-height: 52px;
	margin: .5rem 0 0;
	padding: .8rem 1.8rem;
	border: 0;
	border-radius: 999px;
	background: var(--fx-ink);
	color: #fff;
	font: inherit;
	font-size: 15.5px;
	font-weight: 500;
	cursor: pointer;
	transition: background-color .3s, box-shadow .3s, transform .3s var(--fx-ease);
}

.wpi-sd-guest .wpcf7 .wpcf7-submit:hover {
	background: var(--fx-brand);
	box-shadow: 0 12px 26px -12px rgba(76, 91, 255, .8);
	transform: translateY(-1px);
}

.wpi-sd-guest .wpcf7 .wpcf7-submit:focus-visible {
	outline: 2px solid var(--fx-brand);
	outline-offset: 3px;
}

.wpi-sd-guest .wpcf7-response-output {
	margin: 1rem 0 0 !important;
	padding: .75rem 1rem !important;
	border-radius: 12px;
	font-size: 14px;
}

/* ---------- Wizard base ---------- */
.wpi-fx {
	position: relative;
	color: var(--fx-ink);
	font-size: 15px;
	line-height: 1.5;
	text-align: left;
}

.wpi-fx *,
.wpi-fx *::before,
.wpi-fx *::after {
	box-sizing: border-box;
}

.wpi-fx label {
	display: block;
	margin: 0;
	font-weight: inherit;
}

.wpi-fx p {
	margin: 0;
}

.wpi-fx [hidden] {
	display: none !important;
}

/* Steps */
.wpi-fx-step {
	min-width: 0;
	margin: 0 0 2rem;
	padding: 0;
	border: 0;
}

.wpi-fx .wpi-fx-step > * + * {
	margin-top: 1.5rem;
}

.wpi-fx.is-stepped .wpi-fx-step {
	margin: 0;
}

.wpi-fx-step legend {
	float: left;
	width: 100%;
	margin: 0 0 1.1rem;
	padding: 0;
	font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
	font-weight: 500;
	line-height: 1.2;
	outline: none;
}

.wpi-fx .wpi-fx-step legend + * {
	clear: both;
	margin-top: 0;
}

.wpi-fx-help {
	color: var(--fx-muted);
	font-size: 14px;
}

.wpi-fx-help--warn {
	display: flex;
	gap: .5rem;
	align-items: center;
	padding: .65rem .85rem;
	border-radius: 12px;
	background: #FFF7E6;
	color: #6B4200;
	font-size: 13px;
}

.wpi-fx-help--warn svg {
	flex: none;
}

.wpi-fx-row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
}

.wpi-fx-row--3 {
	grid-template-columns: 2fr 1fr 1fr;
}

@media (max-width: 640px) {
	.wpi-fx-row,
	.wpi-fx-row--3 {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Labels & fields */
.wpi-fx-label {
	display: flex;
	align-items: baseline;
	gap: .5rem;
	margin-bottom: .45rem;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--fx-ink);
}

.wpi-fx-label :is(.wpi-fx-opt, em) {
	font-style: normal;
	font-weight: 400;
	font-size: 12px;
	color: var(--fx-muted);
}

.wpi-fx-field {
	position: relative;
}

.wpi-fx input[type="text"],
.wpi-fx input[type="email"],
.wpi-fx input[type="url"],
.wpi-fx select,
.wpi-fx textarea {
	box-sizing: border-box;
	display: block;
	width: 100%;
	max-width: none;
	min-height: 52px;
	margin: 0;
	padding: .85rem 2.6rem .85rem 1rem;
	border: 1px solid transparent;
	border-radius: var(--fx-r);
	background-color: var(--fx-soft);
	color: var(--fx-ink);
	font: inherit;
	font-size: 15px;
	box-shadow: inset 0 0 0 1px var(--fx-line);
	transition: background-color .25s, box-shadow .3s var(--fx-ease), border-color .25s;
	appearance: none;
	-webkit-appearance: none;
}

.wpi-fx textarea {
	min-height: 140px;
	padding-right: 1rem;
	line-height: 1.6;
	resize: vertical;
}

.wpi-fx select {
	padding-right: 2.75rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6C80' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	background-size: 16px;
	cursor: pointer;
}

.wpi-fx input::placeholder,
.wpi-fx textarea::placeholder {
	color: #7F8094;
	opacity: 1;
}

.wpi-fx input:hover,
.wpi-fx select:hover,
.wpi-fx textarea:hover {
	box-shadow: inset 0 0 0 1px rgba(11, 11, 18, .22);
}

.wpi-fx input:focus,
.wpi-fx select:focus,
.wpi-fx textarea:focus {
	outline: none;
	background-color: #fff;
	box-shadow: inset 0 0 0 1.5px var(--fx-brand), 0 0 0 4px rgba(76, 91, 255, .14);
}

/* Valid tick on single-line fields. */
.wpi-fx-field:not(:has(textarea, select))::after {
	content: "";
	position: absolute;
	right: 1rem;
	bottom: 17px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--fx-good) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4L18 8'/%3E%3C/svg%3E") center / 12px no-repeat;
	opacity: 0;
	transform: scale(.4);
	transition: opacity .25s, transform .45s var(--fx-spring);
	pointer-events: none;
}

.wpi-fx-field.is-valid:not(:has(textarea, select))::after {
	opacity: 1;
	transform: scale(1);
}

.wpi-fx-field:has(.wpi-fx-error)::after {
	bottom: 42px;
}

/* Errors */
.wpi-fx .is-error input,
.wpi-fx .is-error select,
.wpi-fx .is-error textarea {
	box-shadow: inset 0 0 0 1.5px var(--fx-bad), 0 0 0 4px rgba(214, 51, 75, .1);
}

.wpi-fx-error {
	display: flex;
	align-items: center;
	gap: .35rem;
	margin-top: .45rem;
	color: var(--fx-bad);
	font-size: 12.5px;
	font-weight: 500;
	animation: wpi-fx-rise .35s var(--fx-ease);
}

.wpi-fx-error::before {
	content: "!";
	display: grid;
	place-items: center;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: var(--fx-bad);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
}

/* ---------- Choice groups ---------- */
.wpi-fx-choices {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}

.wpi-fx-choice {
	position: relative;
	display: flex !important;
	align-items: center;
	gap: .6rem;
	cursor: pointer;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}

/* Visually hidden native input — keeps keyboard & screen-reader behaviour. */
.wpi-fx-choice input,
.wpi-fx-toggle input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
	z-index: 1;
}

.wpi-fx-choice:has(input:focus-visible) {
	outline: 2px solid var(--fx-brand);
	outline-offset: 2px;
}

.wpi-fx-ico {
	display: grid;
	place-items: center;
	flex: none;
	width: 42px;
	height: 42px;
	border-radius: 12px;
	background: var(--fx-tint);
	color: var(--fx-brand);
	transition: background-color .3s, color .3s, transform .5s var(--fx-spring);
}

.wpi-fx-tick {
	display: grid;
	place-items: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--fx-brand);
	color: #fff;
	opacity: 0;
	transform: scale(.3);
	transition: opacity .2s, transform .45s var(--fx-spring);
}

.wpi-fx-choice:has(input:checked) .wpi-fx-tick {
	opacity: 1;
	transform: scale(1);
}

.wpi-fx-choice__label {
	color: inherit;
}

.wpi-fx-hint {
	display: block;
	margin-top: 2px;
	font-size: 12.5px;
	font-weight: 400;
	line-height: 1.35;
	color: var(--fx-muted);
}

.wpi-fx-choice.is-pop {
	animation: wpi-fx-pop .45s var(--fx-spring);
}

/* Cards */
.wpi-fx-choices.is-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr));
	gap: .65rem;
}

.wpi-fx-choices.is-cards .wpi-fx-choice {
	align-items: flex-start;
	height: 100%;
	padding: 1rem;
	border-radius: 18px;
	background: #fff radial-gradient(160px circle at var(--mx, -200px) var(--my, -200px), rgba(76, 91, 255, .09), transparent 70%);
	box-shadow: inset 0 0 0 1px var(--fx-line);
	transition: box-shadow .3s var(--fx-ease), transform .45s var(--fx-ease), background-color .3s;
}

.wpi-fx-choices.is-cards .wpi-fx-choice:hover {
	transform: translateY(-2px);
	box-shadow: inset 0 0 0 1px rgba(76, 91, 255, .35), 0 14px 30px -18px rgba(11, 11, 18, .35);
}

.wpi-fx-choices.is-cards .wpi-fx-choice__label {
	flex: 1;
	min-width: 0;
	padding-top: 2px;
	padding-right: 1rem;
	font-size: 14.5px;
	font-weight: 500;
	line-height: 1.3;
}

.wpi-fx-choices.is-cards .wpi-fx-tick {
	position: absolute;
	top: .65rem;
	right: .65rem;
}

.wpi-fx-choices.is-cards .wpi-fx-choice:has(input:checked) {
	background-color: #F6F7FF;
	box-shadow: inset 0 0 0 1.5px var(--fx-brand), 0 16px 34px -20px rgba(76, 91, 255, .7);
}

.wpi-fx-choices.is-cards .wpi-fx-choice:has(input:checked) .wpi-fx-ico {
	background: var(--fx-brand);
	color: #fff;
	transform: rotate(-6deg) scale(1.04);
}

/* Chips */
.wpi-fx-choices.is-chips .wpi-fx-choice {
	gap: .4rem;
	padding: .55rem 1rem;
	border-radius: 999px;
	background: #fff;
	box-shadow: inset 0 0 0 1px var(--fx-line);
	font-size: 14px;
	transition: background-color .25s, color .25s, box-shadow .25s;
}

.wpi-fx-choices.is-chips .wpi-fx-choice:hover {
	box-shadow: inset 0 0 0 1px rgba(11, 11, 18, .3);
}

.wpi-fx-choices.is-chips .wpi-fx-tick {
	width: 0;
	height: 16px;
	margin-right: -.4rem;
	background: transparent;
	color: currentColor;
	transition: width .35s var(--fx-ease), margin .35s var(--fx-ease), opacity .2s, transform .45s var(--fx-spring);
}

.wpi-fx-choices.is-chips .wpi-fx-choice:has(input:checked) {
	background: var(--fx-ink);
	color: #fff;
	box-shadow: none;
}

.wpi-fx-choices.is-chips .wpi-fx-choice:has(input:checked) .wpi-fx-tick {
	width: 16px;
	margin-right: 0;
}

/* Segmented control with a sliding indicator (position set by JS). */
.wpi-fx-choices.is-segmented {
	position: relative;
	display: grid;
	grid-auto-columns: minmax(0, 1fr);
	grid-auto-flow: column;
	gap: 4px;
	padding: 4px;
	border-radius: 16px;
	background: var(--fx-soft);
	box-shadow: inset 0 0 0 1px var(--fx-line);
	isolation: isolate;
}

.wpi-fx-choices.is-segmented::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	z-index: -1;
	width: var(--seg-w, 0);
	height: var(--seg-h, 0);
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(11, 11, 18, .08), 0 6px 16px -8px rgba(11, 11, 18, .25), inset 0 0 0 1px rgba(76, 91, 255, .25);
	transform: translate(var(--seg-x, 0), var(--seg-y, 0));
	transition: transform .45s var(--fx-ease), width .45s var(--fx-ease), height .45s var(--fx-ease);
}

.wpi-fx-choices.is-segmented .wpi-fx-choice {
	justify-content: center;
	min-height: 46px;
	padding: .55rem .5rem;
	border-radius: 12px;
	text-align: center;
	font-size: 14px;
	color: #4A4B5E;
	transition: color .25s;
}

.wpi-fx-choices.is-segmented .wpi-fx-choice__label {
	display: block;
}

.wpi-fx-choices.is-segmented .wpi-fx-hint {
	font-size: 11.5px;
}

.wpi-fx-choices.is-segmented .wpi-fx-choice:hover,
.wpi-fx-choices.is-segmented .wpi-fx-choice:has(input:checked) {
	color: var(--fx-ink);
}

.wpi-fx-choices.is-segmented .wpi-fx-choice:has(input:checked) .wpi-fx-choice__label {
	font-weight: 500;
}

/* Without JS the segmented control still shows the checked option. */
.wpi-fx:not(.is-fx-ready) .wpi-fx-choices.is-segmented .wpi-fx-choice:has(input:checked) {
	background: #fff;
	box-shadow: inset 0 0 0 1.5px var(--fx-brand);
}

@media (max-width: 520px) {
	.wpi-fx-choices.is-segmented:has(.wpi-fx-choice:nth-child(4)) {
		grid-auto-flow: row;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.wpi-fx-choices.is-cards {
		gap: .5rem;
	}

	.wpi-fx-choices.is-cards .wpi-fx-choice {
		align-items: center;
		padding: .7rem .8rem;
		border-radius: 14px;
	}

	.wpi-fx-choices.is-cards .wpi-fx-ico {
		width: 36px;
		height: 36px;
		border-radius: 10px;
	}

	.wpi-fx-choices.is-cards .wpi-fx-tick {
		top: 50%;
		margin-top: -10px;
	}
}

/* ---------- Toggle (single checkbox as a switch) ---------- */
.wpi-fx-toggle {
	position: relative;
	display: flex !important;
	align-items: center;
	gap: .85rem;
	padding: .85rem 1rem .85rem calc(1rem + 54px);
	border-radius: var(--fx-r);
	background: var(--fx-soft);
	box-shadow: inset 0 0 0 1px var(--fx-line);
	cursor: pointer;
	font-size: 14px;
}

.wpi-fx-toggle::before {
	content: "";
	position: absolute;
	left: 1rem;
	top: 50%;
	width: 42px;
	height: 24px;
	margin-top: -12px;
	border-radius: 999px;
	background: rgba(11, 11, 18, .18);
	transition: background-color .3s;
}

.wpi-fx-toggle::after {
	content: "";
	position: absolute;
	left: calc(1rem + 3px);
	top: 50%;
	width: 18px;
	height: 18px;
	margin-top: -9px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba(11, 11, 18, .3);
	transition: transform .4s var(--fx-spring);
}

.wpi-fx-toggle:has(input:checked)::before {
	background: var(--fx-brand);
}

.wpi-fx-toggle:has(input:checked)::after {
	transform: translateX(18px);
}

.wpi-fx-toggle:has(input:focus-visible) {
	outline: 2px solid var(--fx-brand);
	outline-offset: 2px;
}

.wpi-fx .wpi-fx-toggle + .wpi-fx-help--warn {
	margin-top: .5rem;
}

/* ---------- Suggestions ---------- */
.wpi-fx-suggest {
	margin-top: .6rem !important;
	padding: .85rem 1rem;
	border-radius: var(--fx-r);
	background: var(--fx-tint);
	box-shadow: inset 0 0 0 1px rgba(76, 91, 255, .18);
	font-size: 14px;
	animation: wpi-fx-rise .35s var(--fx-ease);
}

.wpi-fx-suggest p {
	display: flex;
	align-items: center;
	gap: .4rem;
	margin-bottom: .35rem;
	font-weight: 500;
	color: var(--fx-brand);
}

.wpi-fx-suggest ul {
	margin: 0;
	padding-left: 1.35rem;
}

.wpi-fx-suggest a {
	color: var(--fx-ink);
	text-underline-offset: 3px;
}

/* ---------- Prompts & counter ---------- */
.wpi-fx-prompts {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	margin-top: .6rem !important;
}

.wpi-fx-prompt {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	padding: .35rem .7rem;
	border: 1px dashed rgba(76, 91, 255, .55);
	border-radius: 999px;
	background: transparent;
	color: var(--fx-brand);
	font: inherit;
	font-size: 12.5px;
	font-weight: 500;
	cursor: pointer;
	transition: background-color .2s, border-color .2s, opacity .2s;
}

.wpi-fx-prompt:hover {
	border-style: solid;
	background: var(--fx-tint);
}

.wpi-fx-prompt.is-used {
	opacity: .55;
}

.wpi-fx-prompt:focus-visible {
	outline: 2px solid var(--fx-brand);
	outline-offset: 2px;
}

.wpi-fx-count {
	display: block;
	margin-top: .35rem;
	text-align: right;
	font-family: var(--fx-mono);
	font-size: 11px;
	color: var(--fx-muted);
	font-variant-numeric: tabular-nums;
}

.wpi-fx-count.is-near {
	color: #9A4700;
}

/* ---------- Drop zone ---------- */
.wpi-fx-drop__zone {
	position: relative;
	display: flex !important;
	align-items: center;
	gap: 1rem;
	padding: 1.15rem 1.25rem;
	border: 1.5px dashed rgba(11, 11, 18, .2);
	border-radius: 18px;
	background: var(--fx-soft);
	cursor: pointer;
	transition: border-color .25s, background-color .25s, transform .4s var(--fx-ease);
}

.wpi-fx-drop__zone:hover,
.wpi-fx-drop__zone:has(input:focus-visible) {
	border-color: var(--fx-brand);
}

.wpi-fx-drop__zone:has(input:focus-visible) {
	outline: 2px solid var(--fx-brand);
	outline-offset: 2px;
}

.wpi-fx-drop__zone.is-over {
	border-color: var(--fx-brand);
	background: var(--fx-tint);
	transform: scale(1.01);
}

.wpi-fx-drop__zone input[type="file"] {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}

.wpi-fx-drop__ico {
	display: grid;
	place-items: center;
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #fff;
	color: var(--fx-brand);
	box-shadow: 0 4px 14px -6px rgba(11, 11, 18, .25);
	transition: transform .5s var(--fx-spring);
}

.wpi-fx-drop__zone:hover .wpi-fx-drop__ico,
.wpi-fx-drop__zone.is-over .wpi-fx-drop__ico {
	transform: rotate(-12deg) scale(1.08);
}

.wpi-fx-drop__text {
	display: grid;
	gap: 2px;
	font-size: 14px;
}

.wpi-fx-drop__text strong {
	font-weight: 500;
}

.wpi-fx-drop__text u {
	color: var(--fx-brand);
	text-underline-offset: 3px;
}

.wpi-fx-drop__text small {
	font-family: var(--fx-mono);
	font-size: 10.5px;
	color: var(--fx-muted);
}

.wpi-fx-files {
	margin: 0;
	padding: 0;
	list-style: none;
}

.wpi-fx-file {
	display: flex;
	align-items: center;
	gap: .65rem;
	margin-top: .6rem;
	padding: .6rem .7rem .6rem .8rem;
	border-radius: 12px;
	background: #fff;
	box-shadow: inset 0 0 0 1px rgba(76, 91, 255, .35);
	animation: wpi-fx-rise .4s var(--fx-ease);
}

.wpi-fx-file.is-bad {
	box-shadow: inset 0 0 0 1px var(--fx-bad);
}

.wpi-fx-file__ico {
	display: grid;
	color: var(--fx-brand);
}

.wpi-fx-file__name {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	font-size: 14px;
	font-weight: 500;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.wpi-fx-file__size {
	font-family: var(--fx-mono);
	font-size: 11px;
	color: var(--fx-muted);
}

.wpi-fx-file.is-bad .wpi-fx-file__size {
	color: var(--fx-bad);
}

.wpi-fx-file__rm {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--fx-soft);
	color: var(--fx-ink);
	cursor: pointer;
}

.wpi-fx-file__rm:hover,
.wpi-fx-file__rm:focus-visible {
	background: var(--fx-bad);
	color: #fff;
}

/* ---------- Consent ---------- */
.wpi-fx-consent {
	display: flex !important;
	align-items: flex-start;
	gap: .65rem;
	font-size: 13.5px;
	color: var(--fx-muted);
	cursor: pointer;
	flex-wrap: wrap;
}

.wpi-fx-consent > span {
	flex: 1;
}

.wpi-fx-consent input[type="checkbox"] {
	flex: none;
	width: 20px;
	height: 20px;
	margin: 1px 0 0;
	border: 1.5px solid rgba(11, 11, 18, .35);
	border-radius: 6px;
	background: #fff;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	transition: background-color .2s, border-color .2s;
}

.wpi-fx-consent input[type="checkbox"]:checked {
	border-color: var(--fx-brand);
	background: var(--fx-brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4L18 8'/%3E%3C/svg%3E") center / 14px no-repeat;
}

.wpi-fx-consent input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--fx-brand);
	outline-offset: 2px;
}

.wpi-fx-consent.is-error input[type="checkbox"] {
	border-color: var(--fx-bad);
}

.wpi-fx-consent .wpi-fx-error {
	flex-basis: 100%;
}

/* ---------- Summary ---------- */
.wpi-fx-summary {
	padding: 1rem 1.15rem;
	border-radius: 18px;
	background: linear-gradient(135deg, rgba(76, 91, 255, .06), rgba(169, 177, 255, .1));
	box-shadow: inset 0 0 0 1px rgba(76, 91, 255, .18);
}

.wpi-fx-summary:empty {
	display: none;
}

.wpi-fx-summary__title {
	margin-bottom: .5rem !important;
	font-family: var(--fx-mono);
	font-size: 10.5px;
	text-transform: uppercase;
	color: var(--fx-brand);
}

.wpi-fx-summary section + section {
	margin-top: .65rem;
	padding-top: .65rem;
	border-top: 1px solid rgba(76, 91, 255, .15);
}

.wpi-fx-summary header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: .3rem;
	font-size: 12px;
	font-weight: 500;
	color: var(--fx-muted);
}

.wpi-fx-summary header button {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	padding: .2rem .5rem;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--fx-brand);
	font: inherit;
	font-size: 12px;
	cursor: pointer;
}

.wpi-fx-summary header button:hover,
.wpi-fx-summary header button:focus-visible {
	background: #fff;
}

.wpi-fx-summary dl,
.wpi-tk-facts {
	display: grid;
	gap: .25rem;
	margin: 0;
}

.wpi-fx-summary dl > div,
.wpi-tk-facts > div {
	display: grid;
	grid-template-columns: minmax(110px, 34%) minmax(0, 1fr);
	gap: .75rem;
	font-size: 13.5px;
}

.wpi-fx-summary dt,
.wpi-tk-facts dt {
	color: var(--fx-muted);
}

.wpi-fx-summary dd,
.wpi-tk-facts dd {
	margin: 0;
	overflow-wrap: anywhere;
	font-weight: 500;
}

/* ---------- Progress header ---------- */
.wpi-fx-progress {
	margin-bottom: 1.75rem;
}

.wpi-fx-progress__meta {
	margin-bottom: .6rem !important;
	font-family: var(--fx-mono);
	font-size: 10.5px;
	text-transform: uppercase;
	color: var(--fx-muted);
}

.wpi-fx-progress__track {
	position: relative;
	height: 6px;
	margin-right: 15px;
	border-radius: 999px;
	background: var(--fx-soft);
	box-shadow: inset 0 0 0 1px var(--fx-line);
}

.wpi-fx-progress__fill {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: calc(6% + var(--fx-progress, 0) * 94%);
	border-radius: inherit;
	background: linear-gradient(90deg, var(--fx-brand), var(--fx-lens));
	transition: width .7s var(--fx-ease);
}

/* The brand's two dots ride the end of the bar and collide on each step. */
.wpi-fx-progress__fill i {
	position: absolute;
	top: 50%;
	right: -7px;
	width: 14px;
	height: 14px;
	margin-top: -7px;
	border-radius: 50%;
	background: var(--fx-ink);
	box-shadow: 0 0 0 3px #fff;
}

.wpi-fx-progress__fill i + i {
	right: -15px;
	background: var(--fx-brand);
	mix-blend-mode: multiply;
	box-shadow: none;
}

.wpi-fx-progress.is-bump .wpi-fx-progress__fill i:first-child {
	animation: wpi-fx-dot-a .7s var(--fx-ease);
}

.wpi-fx-progress.is-bump .wpi-fx-progress__fill i + i {
	animation: wpi-fx-dot-b .7s var(--fx-ease);
}

.wpi-fx-progress__steps {
	display: flex;
	justify-content: space-between;
	gap: .5rem;
	margin: .85rem 0 0;
	padding: 0;
	list-style: none;
}

.wpi-fx-progress__steps li {
	margin: 0;
}

.wpi-fx-progress__steps button {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	padding: .25rem .4rem .25rem .25rem;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--fx-muted);
	font: inherit;
	font-size: 12.5px;
	cursor: pointer;
	transition: color .25s, background-color .25s;
}

.wpi-fx-progress__steps button:disabled {
	cursor: default;
	opacity: .6;
}

.wpi-fx-progress__steps li.is-open:not(.is-active) button:hover {
	background: var(--fx-soft);
	color: var(--fx-ink);
}

.wpi-fx-progress__steps button:focus-visible {
	outline: 2px solid var(--fx-brand);
	outline-offset: 2px;
}

.wpi-fx-progress__num,
.wpi-fx-progress__ok {
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--fx-soft);
	box-shadow: inset 0 0 0 1px var(--fx-line);
	font-family: var(--fx-mono);
	font-size: 11px;
	transition: background-color .3s, color .3s, transform .45s var(--fx-spring);
}

.wpi-fx-progress__ok {
	display: none;
	background: var(--fx-brand);
	color: #fff;
	box-shadow: none;
}

.wpi-fx-progress__steps .is-done .wpi-fx-progress__num {
	display: none;
}

.wpi-fx-progress__steps .is-done .wpi-fx-progress__ok {
	display: grid;
	animation: wpi-fx-pop .45s var(--fx-spring);
}

.wpi-fx-progress__steps .is-active button {
	color: var(--fx-ink);
	font-weight: 500;
}

.wpi-fx-progress__steps .is-active .wpi-fx-progress__num {
	background: var(--fx-ink);
	color: #fff;
	box-shadow: none;
	transform: scale(1.08);
}

@media (max-width: 560px) {
	.wpi-fx-progress__steps li:not(.is-active) .wpi-fx-progress__label {
		display: none;
	}
}

/* ---------- Step navigation & buttons ---------- */
.wpi-fx-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	margin-top: 1.75rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--fx-line);
}

.wpi-fx-nav > [data-sd-back][hidden] + * {
	margin-left: auto;
}

.wpi-fx-btn,
.wpi-fx-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	min-height: 48px;
	padding: .75rem 1.35rem;
	border: 0;
	border-radius: 999px;
	font: inherit;
	font-size: 15px;
	font-weight: 500;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .3s, color .3s, transform .3s var(--fx-ease), box-shadow .3s, background-position .9s var(--fx-ease);
}

.wpi-fx-btn--next {
	margin-left: auto;
	background: var(--fx-ink);
	color: #fff;
}

.wpi-fx-btn--next:hover {
	background: var(--fx-brand);
	color: #fff;
	box-shadow: 0 12px 26px -12px rgba(76, 91, 255, .8);
}

.wpi-fx-btn--next svg,
.wpi-fx-submit svg {
	transition: transform .35s var(--fx-ease);
}

.wpi-fx-btn--next:hover svg {
	transform: translateX(3px);
}

.wpi-fx-btn--ghost {
	background: transparent;
	color: var(--fx-muted);
}

.wpi-fx-btn--ghost:hover {
	background: var(--fx-soft);
	color: var(--fx-ink);
}

.wpi-fx-btn .is-flip {
	transform: scaleX(-1);
}

.wpi-fx-btn:focus-visible,
.wpi-fx-submit:focus-visible {
	outline: 2px solid var(--fx-brand);
	outline-offset: 3px;
}

.wpi-fx-submit {
	min-height: 52px;
	margin-left: auto;
	padding: .8rem 1.8rem;
	background: var(--fx-brand) linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .28) 50%, transparent 70%) -200% 0 / 200% 100% no-repeat;
	color: #fff;
	font-size: 15.5px;
	box-shadow: 0 14px 30px -14px rgba(76, 91, 255, .9);
}

.wpi-fx-submit:hover {
	background-position: 200% 0;
	transform: translateY(-1px);
}

.wpi-fx-submit:hover svg {
	transform: translate(2px, -2px);
}

.wpi-fx-submit:disabled {
	opacity: .6;
	cursor: not-allowed;
	transform: none;
}

.wpi-fx-submit.is-loading svg {
	animation: wpi-fx-fly 1s var(--fx-ease) infinite;
}

.wpi-fx-msg {
	margin-top: .75rem !important;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--fx-bad);
}

.wpi-fx-msg:empty {
	display: none;
}

@media (max-width: 560px) {
	.wpi-fx-nav .wpi-fx-btn--next,
	.wpi-fx-nav .wpi-fx-submit {
		flex: 1;
	}
}

/* ---------- Stepped state ---------- */
.wpi-fx.is-fx-ready .wpi-fx-step[hidden] {
	display: none;
}

.wpi-fx-step.is-in-next {
	animation: wpi-fx-in-next .55s var(--fx-ease);
}

.wpi-fx-step.is-in-prev {
	animation: wpi-fx-in-prev .55s var(--fx-ease);
}

.wpi-fx.is-shake .wpi-fx-step:not([hidden]) {
	animation: wpi-fx-shake .45s ease;
}

/* ---------- Success ---------- */
.wpi-fx.is-sent > :not(.wpi-fx-done) {
	display: none !important;
}

.wpi-fx-done {
	padding: clamp(1rem, 3vw, 2rem) 0;
	text-align: center;
	animation: wpi-fx-rise .6s var(--fx-ease);
}

.wpi-fx-done__mark {
	position: relative;
	width: 92px;
	height: 92px;
	margin: 0 auto 1.25rem;
}

.wpi-fx-done__mark i {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 46px;
	height: 46px;
	margin: -23px 0 0 -23px;
	border-radius: 50%;
	background: var(--fx-ink);
	animation: wpi-fx-done-a 1.1s var(--fx-ease) forwards;
}

.wpi-fx-done__mark i + i {
	background: var(--fx-brand);
	animation-name: wpi-fx-done-b;
}

.wpi-fx-done__mark svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	fill: none;
	stroke: #fff;
	stroke-width: 4;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 40;
	stroke-dashoffset: 40;
	animation: wpi-fx-draw .5s .95s var(--fx-ease) forwards;
}

.wpi-fx-done__title {
	margin: 0 0 .5rem;
	font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem);
	font-weight: 500;
	outline: none;
}

.wpi-fx-done__text {
	max-width: 46ch;
	margin: 0 auto !important;
	color: var(--fx-muted);
}

.wpi-fx-done__next {
	max-width: 420px;
	margin: 1.5rem auto 0;
	padding: 1rem 1.25rem;
	border-radius: 18px;
	background: var(--fx-soft);
	text-align: left;
}

.wpi-fx-done__next p {
	margin-bottom: .6rem !important;
	font-family: var(--fx-mono);
	font-size: 10.5px;
	text-transform: uppercase;
	color: var(--fx-muted);
}

.wpi-fx-done__next ol {
	display: grid;
	gap: .55rem;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: fx;
}

.wpi-fx-done__next li {
	display: flex;
	align-items: center;
	gap: .65rem;
	margin: 0;
	font-size: 14px;
	counter-increment: fx;
	animation: wpi-fx-rise .5s var(--fx-ease) both;
}

.wpi-fx-done__next li:nth-child(1) { animation-delay: 1.1s; }
.wpi-fx-done__next li:nth-child(2) { animation-delay: 1.25s; }
.wpi-fx-done__next li:nth-child(n+3) { animation-delay: 1.4s; }

.wpi-fx-done__next li::before {
	content: counter(fx);
	display: grid;
	place-items: center;
	flex: none;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: #fff;
	box-shadow: inset 0 0 0 1px rgba(76, 91, 255, .35);
	color: var(--fx-brand);
	font-family: var(--fx-mono);
	font-size: 11px;
}

.wpi-fx-done__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .5rem;
	margin-top: 1.5rem;
}

/* ---------- Ticket list (account + support page) ---------- */
.wpi-tickets__bar {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 1rem;
}

.wpi-tickets__list {
	display: grid;
	gap: .5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wpi-tickets .wpi-ticket-row a {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: .2rem .85rem;
	align-items: center;
	margin: 0;
	padding: .95rem 1.1rem;
	border: 0;
	border-radius: 16px;
	background: #fff;
	box-shadow: inset 0 0 0 1px var(--fx-line);
	color: var(--fx-ink);
	text-decoration: none;
	transition: box-shadow .3s var(--fx-ease), transform .3s var(--fx-ease);
}

.wpi-tickets .wpi-ticket-row a:hover {
	background: #fff;
	transform: translateY(-1px);
	box-shadow: inset 0 0 0 1px rgba(76, 91, 255, .35), 0 14px 30px -20px rgba(11, 11, 18, .35);
}

.wpi-tickets .wpi-ticket-row a:focus-visible {
	outline: 2px solid var(--fx-brand);
	outline-offset: 2px;
}

.wpi-tickets .wpi-ticket-row__num {
	grid-row: span 2;
	display: grid;
	place-items: center;
	min-width: 48px;
	height: 40px;
	padding: 0 .5rem;
	border-radius: 12px;
	background: var(--fx-tint);
	color: var(--fx-brand);
	font-family: var(--fx-mono);
	font-size: 12px;
}

.wpi-tickets .wpi-ticket-row__subject {
	font-weight: 500;
}

.wpi-tickets .wpi-ticket-row__time {
	grid-column: 2;
	font-size: 12.5px;
	color: var(--fx-muted);
}

.wpi-tickets .wpi-ticket-row .wpi-status {
	grid-row: span 2;
}

.wpi-tickets .wpi-ticket-row.is-closed a {
	background: var(--fx-soft);
}

/* ---------- Thread ---------- */
.wpi-thread__head {
	margin-bottom: 1.75rem;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--fx-line);
}

.wpi-thread__title {
	font-weight: 500;
	line-height: 1.2;
}

.wpi-thread__title span {
	font-family: var(--fx-mono);
	font-size: .6em;
	vertical-align: middle;
	color: var(--fx-brand);
}

.wpi-thread__meta > span:not(.wpi-status) {
	display: inline-flex;
	padding: .2rem .6rem;
	border-radius: 999px;
	background: var(--fx-soft);
	font-size: 12.5px;
}

.wpi-thread__messages {
	position: relative;
	gap: 1.25rem;
}

.wpi-thread__messages::before {
	content: "";
	position: absolute;
	left: 17px;
	top: 18px;
	bottom: 18px;
	width: 1px;
	background: var(--fx-line);
}

.wpi-thread .wpi-msg__avatar {
	position: relative;
	box-shadow: 0 0 0 4px #fff;
}

.wpi-thread .wpi-msg__bubble {
	padding: 1.1rem 1.25rem;
	border: 0;
	border-radius: 4px 18px 18px 18px;
	background: #fff;
	box-shadow: inset 0 0 0 1px var(--fx-line);
}

.wpi-thread .wpi-msg.is-staff .wpi-msg__bubble {
	background: linear-gradient(135deg, rgba(76, 91, 255, .06), rgba(169, 177, 255, .12));
	box-shadow: inset 0 0 0 1px rgba(76, 91, 255, .22);
}

.wpi-thread .wpi-msg__body {
	font-size: 14.5px;
	line-height: 1.6;
}

.wpi-thread .wpi-tk-facts {
	margin-top: 1rem;
	padding: .85rem 1rem;
	border-radius: 14px;
	background: var(--fx-soft);
}

.wpi-thread .wpi-msg__files a {
	background: var(--fx-tint);
	color: var(--fx-brand);
}

.wpi-thread__reply.wpi-fx {
	display: grid;
	gap: 1rem;
	padding: clamp(1rem, 2.5vw, 1.5rem);
	border-radius: 20px;
	background: #fff;
	box-shadow: inset 0 0 0 1px var(--fx-line);
}

.wpi-thread__reply .wpi-fx-nav {
	flex-wrap: wrap;
	margin-top: 0;
	padding-top: 1rem;
}

.wpi-thread__reply .wpi-fx-submit {
	margin-left: 0;
}

/* ---------- Keyframes ---------- */
@keyframes wpi-fx-rise {
	from { opacity: 0; transform: translateY(8px); }
}

@keyframes wpi-fx-pop {
	0% { transform: scale(1); }
	40% { transform: scale(.94); }
	100% { transform: scale(1); }
}

@keyframes wpi-fx-in-next {
	from { opacity: 0; transform: translateX(28px); }
}

@keyframes wpi-fx-in-prev {
	from { opacity: 0; transform: translateX(-28px); }
}

@keyframes wpi-fx-shake {
	20%, 60% { transform: translateX(-6px); }
	40%, 80% { transform: translateX(6px); }
}

@keyframes wpi-fx-dot-a {
	0% { transform: translateX(0); }
	40% { transform: translateX(-9px); }
	65% { transform: translateX(3px); }
	100% { transform: translateX(0); }
}

@keyframes wpi-fx-dot-b {
	0% { transform: translateX(0); }
	40% { transform: translateX(9px); }
	65% { transform: translateX(-3px); }
	100% { transform: translateX(0); }
}

@keyframes wpi-fx-done-a {
	0% { transform: translateX(-60px) scale(.4); opacity: 0; }
	45% { transform: translateX(-24px) scale(1); opacity: 1; }
	70% { transform: translateX(-4px) scaleX(1.1); }
	100% { transform: translateX(-12px); }
}

@keyframes wpi-fx-done-b {
	0% { transform: translateX(60px) scale(.4); opacity: 0; }
	45% { transform: translateX(24px) scale(1); opacity: 1; }
	70% { transform: translateX(4px) scaleX(1.1); }
	100% { transform: translateX(12px); }
}

@keyframes wpi-fx-draw {
	to { stroke-dashoffset: 0; }
}

@keyframes wpi-fx-fly {
	50% { transform: translate(4px, -4px); opacity: .4; }
}

@media (prefers-reduced-motion: reduce) {
	.wpi-sd *,
	.wpi-fx *,
	.wpi-fx *::before,
	.wpi-fx *::after,
	.wpi-tickets *,
	.wpi-thread * {
		animation-duration: .01ms !important;
		animation-delay: 0s !important;
		transition-duration: .01ms !important;
	}
}