/* Find Your Setup (/find-your-setup/). Loaded on that page only.
   Built on the theme tokens in style.css :root (light + dark), with the
   homepage's black/gold banner treatment for the hero. */

/* Component display rules below must never beat the hidden attribute. */
.sf-app [hidden] { display: none !important; }

.sf-app {
	--sf-gold: #E8C88A;
	--sf-ink-bg: #120D08;
	display: grid;
	gap: clamp(2rem, 4vw, 3rem);
	margin: 0 0 clamp(2rem, 4vw, 3rem);
}

/* Hero + question box */
.sf-hero {
	position: relative;
	isolation: isolate;
	border-radius: 8px;
	overflow: hidden;
	padding: clamp(1.75rem, 5vw, 3.5rem) clamp(1rem, 4vw, 3rem);
	color: #FFFCF5;
	background-color: var(--sf-ink-bg);
	background-image:
		linear-gradient(90deg, rgba(18, 13, 8, .95) 0%, rgba(18, 13, 8, .82) 55%, rgba(18, 13, 8, .55) 100%),
		linear-gradient(0deg, rgba(18, 13, 8, .9) 0%, rgba(18, 13, 8, .3) 60%),
		url("/wp-content/uploads/2026/09/loki-series-top-player-blades-1200w.jpg.webp");
	background-image:
		linear-gradient(90deg, rgba(18, 13, 8, .95) 0%, rgba(18, 13, 8, .82) 55%, rgba(18, 13, 8, .55) 100%),
		linear-gradient(0deg, rgba(18, 13, 8, .9) 0%, rgba(18, 13, 8, .3) 60%),
		image-set(url("/wp-content/uploads/2026/09/loki-series-top-player-blades-1200w.jpg.avif") type("image/avif"), url("/wp-content/uploads/2026/09/loki-series-top-player-blades-1200w.jpg.webp") type("image/webp"));
	background-size: cover;
	background-position: center right;
}
.sf-eyebrow,
.sf-kicker {
	font-family: var(--font-mono);
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	font-variant-numeric: tabular-nums;
}
.sf-eyebrow { color: var(--sf-gold); margin: 0 0 .6rem; }
.sf-hero__title {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(1.6rem, 4vw, 2.6rem);
	line-height: 1.1;
	letter-spacing: -.01em;
	margin: 0 0 1.25rem;
	color: #FFFCF5;
}
.sf-box {
	max-width: 760px;
	background: #FFFCF5;
	border-radius: 18px;
	padding: .9rem 1rem .6rem;
	box-shadow: 0 12px 40px rgba(0, 0, 0, .35);
	transition: box-shadow .15s ease;
}
.sf-box:focus-within { box-shadow: 0 0 0 2px var(--sf-gold), 0 12px 40px rgba(0, 0, 0, .35); }
.sf-box__input {
	display: block;
	width: 100%;
	min-height: 3.2rem;
	border: 0;
	padding: 0;
	background: transparent;
	resize: none;
	font: 400 16px/1.5 var(--font-body);
	color: #14100B;
	outline: none;
	box-shadow: none;
}
.sf-box__input::placeholder { color: #6B6150; opacity: 1; }
.sf-box__bar { display: flex; align-items: center; gap: .5rem; margin-top: .25rem; }
.sf-box__hint {
	flex: 1;
	font: 600 .7rem/1.3 var(--font-mono);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #665C48;
}
.sf-iconbtn,
.sf-send {
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	display: inline-grid;
	place-items: center;
	padding: 0;
	cursor: pointer;
	transition: transform .15s ease, background-color .15s ease;
}
.sf-iconbtn { border: 1px solid #DBD0B3; background: transparent; color: #14100B; }
.sf-send { border: 0; background: #14100B; color: #FFFCF5; }
.sf-send:hover { transform: translateY(-1px); background: var(--accent); }
.sf-send:disabled { cursor: progress; background: #8A7F6A; transform: none; }
.sf-iconbtn svg,
.sf-send svg { width: 20px; height: 20px; }
/* Listening: the text area becomes a live waveform and the mic a stop button. */
.sf-wave {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 3px;
	height: 3.2rem;
	padding: 0 .5rem;
	overflow: hidden;
}
.sf-wave__bar {
	flex: 0 0 2px;
	width: 2px;
	height: 26px;
	border-radius: 2px;
	background: #14100B;
	opacity: .72;
	transform: scaleY(.08);
	transform-origin: center;
	transition: transform .08s linear;
	will-change: transform;
}
.sf-box.is-listening .sf-box__input { display: none; }
.sf-box__listening { display: none; }
.sf-box.is-listening .sf-box__hint { display: none; }
.sf-box.is-listening .sf-box__listening {
	display: block;
	flex: 1;
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font: 600 .74rem/1.3 var(--font-mono);
	letter-spacing: .06em;
	color: #14100B;
}
.sf-box.is-listening .sf-box__listening::before {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-right: .5rem;
	border-radius: 50%;
	background: var(--accent);
	vertical-align: 1px;
	animation: sf-pulse 1s ease-in-out infinite;
}
.sf-box.is-listening .sf-send { opacity: .35; pointer-events: none; }
.sf-mic.is-live { background: #ECE6D8; border-color: #ECE6D8; color: #14100B; }
.sf-mic.is-live svg { width: 16px; height: 16px; }
.sf-chips {
	list-style: none;
	margin: 1rem 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	max-width: 760px;
}
.sf-chip {
	min-height: 44px;
	padding: .55rem .9rem;
	border-radius: 6px;
	border: 1px solid rgba(255, 252, 245, .35);
	background: rgba(255, 255, 255, .06);
	color: #FFFCF5;
	font: 500 .9rem/1.25 var(--font-body);
	text-align: left;
	cursor: pointer;
	transition: border-color .15s ease, color .15s ease;
}
.sf-chip:hover { border-color: var(--sf-gold); color: var(--sf-gold); }
.sf-hero__alt { margin: 1.1rem 0 0; font-size: .95rem; color: rgba(255, 252, 245, .85); }
.sf-hero__alt a { color: var(--sf-gold); font-weight: 600; }
.sf-turnstile { margin-top: .5rem; }
.sf-app--picker-only .sf-hero__title { margin-bottom: .5rem; }

/* Conversation inside the dark panel, above the box. It scrolls in its own
   frame so the question box stays put. Bubbles carry the light palette in
   both themes so cards inside them read the same everywhere. */
.sf-hero .sf-thread {
	position: relative;
	max-width: 760px;
	max-height: min(52vh, 560px);
	overflow-y: auto;
	overscroll-behavior: contain;
	margin: 0 auto 1rem;
	padding: 1rem 0 .25rem;
	scrollbar-width: none;
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 1rem);
	mask-image: linear-gradient(to bottom, transparent 0, #000 1rem);
}
.sf-hero .sf-msg--user { background: var(--sf-gold); color: #14100B; }
.sf-hero .sf-msg--bot {
	--surface: #FFFCF5;
	--bg: #FFFFFF;
	--bg-alt: #FAF4E6;
	--border: #DBD0B3;
	--text: #14100B;
	--text-muted: #665C48;
	background: #FFFCF5;
	border-color: #DBD0B3;
	color: #14100B;
}
.sf-app--chatting .sf-chips,
.sf-app--chatting .sf-hero__alt { display: none; }
.sf-app--chatting .sf-hero__title { font-size: clamp(1.3rem, 2.6vw, 1.7rem); margin-bottom: 1rem; }

/* Answer thread */
.sf-thread { display: grid; gap: 1rem; max-width: 900px; }
.sf-msg { border-radius: 8px; padding: 1rem 1.15rem; font: 400 1rem/1.6 var(--font-body); box-sizing: border-box; }
.sf-msg--user { justify-self: end; max-width: 85%; background: var(--text); color: var(--bg); }
.sf-msg--bot { background: var(--surface); border: 1px solid var(--border); color: var(--text); }
.sf-msg p { margin: 0 0 .65em; }
.sf-msg p:last-child { margin-bottom: 0; }
.sf-answer ul { margin: 0 0 .65em; padding-left: 1.2rem; }
.sf-answer + .sf-setup,
.sf-answer + .sf-cards,
.sf-answer + .sf-links { margin-top: 1rem; }
.sf-thinking {
	display: flex;
	align-items: center;
	gap: .6rem;
	color: var(--text-muted);
	font: 600 .78rem/1.3 var(--font-mono);
	letter-spacing: .08em;
	text-transform: uppercase;
}
.sf-dots { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: sf-pulse 1s ease-in-out infinite; }
@keyframes sf-pulse { 50% { opacity: .25; transform: scale(.7); } }

/* Picker */
.sf-h2 {
	font-family: var(--font-display);
	font-size: clamp(1.35rem, 2.4vw, 1.8rem);
	font-weight: 700;
	letter-spacing: -.01em;
	line-height: 1.2;
	margin: 0 0 .4rem;
}
.sf-sub { font-size: .97rem; color: var(--text-muted); max-width: 65ch; margin: 0 0 1.25rem; }
.sf-picker__form { display: grid; gap: 1.1rem; }
.sf-q { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.sf-q legend { float: left; width: 100%; margin: 0 0 .5rem; padding: 0; color: var(--text-muted); }
.sf-opt { position: relative; }
.sf-opt input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.sf-opt span {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: .55rem 1rem;
	border: 1px solid var(--border);
	border-radius: 6px;
	background: var(--surface);
	color: var(--text);
	font: 600 .95rem/1.2 var(--font-body);
	transition: background-color .15s ease, border-color .15s ease;
}
.sf-opt:hover span { border-color: var(--text); }
.sf-opt input:checked + span { background: var(--text); border-color: var(--text); color: var(--bg); }
.sf-opt input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.sf-pick-result:not(:empty) { margin-top: 1.5rem; }
.sf-note { color: var(--text-muted); font-size: .92rem; margin: 0 0 .75rem; }

/* Setup + product cards */
.sf-setup {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 8px;
	padding: 1.25rem;
	box-sizing: border-box;
	overflow: hidden;
	color: var(--text);
}
.sf-msg .sf-setup { padding: 1rem; }
.sf-setup__title { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; margin: 0 0 .4rem; }
.sf-setup__why { color: var(--text-muted); font-size: .95rem; line-height: 1.6; margin: 0 0 1rem; max-width: 72ch; }
.sf-setup__parts,
.sf-cards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: .75rem;
}
.sf-cards { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.sf-part,
.sf-card {
	display: grid;
	grid-template-rows: auto 1fr;
	border: 1px solid var(--border);
	border-radius: 8px;
	overflow: hidden;
	background: var(--bg);
	box-sizing: border-box;
}
.sf-part__media,
.sf-card__media { display: block; aspect-ratio: 4 / 3; background: var(--bg-alt); padding: .5rem; box-sizing: border-box; }
.sf-part__media picture,
.sf-card__media picture { display: block; width: 100%; height: 100%; }
.sf-part__media img,
.sf-card__media img { display: block; width: 100%; height: 100%; object-fit: contain; }
.sf-part__body,
.sf-card__body { display: flex; flex-direction: column; gap: .3rem; padding: .75rem; }
.sf-part__body .sf-kicker,
.sf-card__body .sf-kicker { color: var(--text-muted); font-size: .66rem; }
.sf-part__name,
.sf-card__name {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: .92rem;
	line-height: 1.3;
	color: var(--text);
	text-decoration: none;
}
.sf-part__name:hover,
.sf-card__name:hover { color: var(--accent); }
.sf-specs { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 4px; margin: .25rem 0 0; }
.sf-spec { min-width: 0; margin: 0; padding: .3rem .2rem; border-radius: 4px; background: var(--bg-alt); text-align: center; }
.sf-spec dd { margin: 0; font: 700 .9rem/1.1 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text); }
.sf-spec dt { margin: .1rem 0 0; font: 600 .56rem/1.2 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-spec { display: flex; flex-direction: column-reverse; }
.sf-part__price { font-weight: 700; font-variant-numeric: tabular-nums; margin-top: auto; padding-top: .35rem; }
.sf-stock { font: 600 .68rem/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; }
.sf-stock.is-in { color: var(--jade); }
.sf-card__actions { display: grid; gap: .4rem; margin-top: .55rem; }
.sf-card__actions .sf-card__cta { width: 100%; }
.sf-buy { display: grid; gap: .4rem; }
.sf-buy__select { width: 100%; min-height: 40px; padding: .35rem .5rem; border: 1px solid var(--border); border-radius: 4px; background: var(--surface); color: var(--text); font: 500 .85rem/1.2 var(--font-body); }
.sf-buy__btn { min-height: 44px; padding: .55rem .6rem; border: 0; border-radius: 6px; background: var(--accent); color: #fff; font: 700 .74rem/1.1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; transition: transform .15s ease, background-color .15s ease; }
.sf-buy__btn:hover:not(:disabled) { transform: translateY(-1px); }
.sf-buy__btn:disabled { background: var(--bg-alt); color: var(--text-muted); cursor: not-allowed; }
.sf-buy__btn.is-view-basket { background: var(--jade); color: #fff; }
.sf-buy__btn.loading { opacity: .7; cursor: progress; }
.sf-setup__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	margin: 1rem 0 .25rem;
}
.sf-setup__total { margin: 0; display: grid; gap: .1rem; }
.sf-setup__total .sf-kicker { color: var(--text-muted); }
.sf-setup__total strong { font-family: var(--font-display); font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.sf-setup__note { font-size: .85rem; color: var(--text-muted); }
.sf-setup .lk-setupbuy { margin-top: .75rem; }
.sf-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: .6rem 1.1rem;
	border-radius: 6px;
	box-sizing: border-box;
	font: 600 .76rem/1 var(--font-mono);
	letter-spacing: .08em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease;
}
.sf-btn--ghost { border: 1px solid currentColor; color: var(--text); background: transparent; }
.sf-btn--ghost:hover { background: var(--text); color: var(--bg); }
.sf-links { list-style: none; padding: 0; margin: .75rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.sf-pill {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: .4rem .85rem;
	border: 1px solid var(--border);
	border-radius: 999px;
	background: var(--bg-alt);
	color: var(--text);
	font: 600 .76rem/1.2 var(--font-mono);
	letter-spacing: .03em;
	text-decoration: none;
}
.sf-pill:hover { border-color: var(--text); }

/* Five starting setups (server-rendered) */
.sf-starters {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: .75rem;
}
.sf-starter__link {
	display: grid;
	align-content: start;
	gap: .4rem;
	height: 100%;
	box-sizing: border-box;
	padding: 1.25rem;
	border: 1px solid var(--border);
	border-radius: 8px;
	background: var(--surface);
	color: var(--text);
	text-decoration: none;
	overflow: hidden;
	transition: border-color .15s ease, transform .15s ease;
}
.sf-starter__link:hover { border-color: var(--text); transform: translateY(-2px); }
.sf-starter__link .sf-kicker { color: var(--accent); }
.sf-starter__title { font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; line-height: 1.25; }
.sf-starter__parts { font-size: .9rem; font-weight: 600; }
.sf-starter__why { font-size: .88rem; line-height: 1.55; color: var(--text-muted); }
.sf-starter__price { margin-top: .35rem; font-weight: 700; display: flex; justify-content: space-between; gap: .5rem; align-items: baseline; }
.sf-starter__more { font: 600 .72rem/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }

/* Page sections around the app */
.sf-page .lk-lead { margin: 0 0 clamp(1.5rem, 3vw, 2rem); max-width: 70ch; }
.sf-msg,
.sf-pick-result { scroll-margin-top: 96px; }
.sf-page .lk-section { margin: 0 0 clamp(2rem, 4vw, 3rem); }
.sf-how { display: grid; gap: .75rem; margin: 0 0 1rem; padding-left: 1.2rem; max-width: 72ch; }
.sf-how li { padding-left: .25rem; }
.sf-page .lk-faq h2 {
	font-family: var(--font-display);
	font-size: clamp(1.35rem, 2.4vw, 1.8rem);
	font-weight: 700;
	letter-spacing: -.01em;
	margin: 0 0 1rem;
}
.sf-page .lk-faq__item { padding: 1.1rem 1.35rem; border-radius: 8px; }
.sf-page .lk-faq__q { margin: 0; padding: 0; font-size: .98rem; font-family: var(--font-display); font-weight: 700; color: var(--text); }
.sf-page .lk-faq__a { padding-top: .65rem; font-size: .92rem; line-height: 1.65; color: var(--text-muted); }
.sf-page .lk-faq__a p { margin: 0 0 .6em; }
.sf-page .lk-faq__a p:last-child { margin: 0; }

@media (max-width: 700px) {
	.sf-hero { background-position: 70% center; }
	.sf-box__hint { display: none; }
	.sf-box__bar { justify-content: flex-end; }
	.sf-msg--user { max-width: 100%; }
	.sf-setup__parts { grid-template-columns: 1fr; gap: .5rem; }
	.sf-part { grid-template-columns: 88px minmax(0, 1fr); grid-template-rows: none; }
	.sf-part__media { aspect-ratio: auto; height: 100%; min-height: 88px; }
	.sf-cards { grid-template-columns: 1fr; gap: .6rem; }
	.sf-card { grid-template-columns: 72px minmax(0, 1fr); grid-template-rows: none; }
	.sf-card__media { aspect-ratio: auto; height: auto; min-height: 72px; padding: .35rem; align-self: start; }
	.sf-card__body { padding: .65rem; }
	.sf-card__actions { grid-template-columns: 1fr 1fr; }
	.sf-card__actions .sf-buy { grid-column: 1 / -1; grid-template-columns: 1fr; }
	.sf-card__actions .sf-buy:only-child,
	.sf-card__actions .sf-card__cta { grid-column: 1 / -1; }
	.sf-hero .sf-msg--bot { padding: .9rem; }
	.sf-setup__foot .sf-btn { flex: 1 1 auto; }
	.sf-q { gap: .4rem; }
	.sf-opt { flex: 1 1 auto; }
	.sf-opt span { width: 100%; justify-content: center; box-sizing: border-box; padding: .55rem .6rem; }
}

@media (prefers-reduced-motion: reduce) {
	.sf-app *,
	.sf-app *::before { transition: none !important; animation: none !important; }
}

/* While an answer is loading the mic waits, and says so if tapped. */
.sf-app--busy .sf-mic { opacity: .45; cursor: progress; }

/* Everything in the panel sits in one centred column, so the left and right
   margins match. The thread reserves its scrollbar space on both sides,
   which keeps its bubbles exactly as wide as the box below. */
.sf-hero > * { margin-left: auto; margin-right: auto; }
.sf-hero .sf-thread::-webkit-scrollbar { display: none; }
.sf-hero .sf-eyebrow,
.sf-hero .sf-hero__title,
.sf-hero .sf-hero__alt { max-width: 760px; }

/* Desktop: give the conversation the panel's full width and more height. */
@media (min-width: 1024px) {
	.sf-hero { padding: 3rem 3rem 2.75rem; }
	.sf-hero .sf-thread,
	.sf-box,
	.sf-chips,
	.sf-hero .sf-eyebrow,
	.sf-hero .sf-hero__title,
	.sf-hero .sf-hero__alt { max-width: 1040px; }
	.sf-hero .sf-thread { max-height: min(68vh, 760px); }
	.sf-msg { font-size: 1.04rem; padding: 1.15rem 1.35rem; }
	.sf-msg--user { max-width: 70%; }
	.sf-box { padding: 1.1rem 1.25rem .75rem; }
	.sf-box__input { font-size: 17px; min-height: 3.6rem; }
	.sf-cards { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}

/* Next-step chips under the latest answer */
.sf-next { list-style: none; margin: .9rem 0 0; padding: .85rem 0 0; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: .45rem; }
.sf-next li { margin: 0; }
.sf-next__btn { min-height: 44px; border-radius: 6px; cursor: pointer; font: 500 .88rem/1.3 var(--font-body); letter-spacing: 0; text-align: left; }
.sf-next__btn:hover { border-color: var(--accent); color: var(--accent); }
.sf-app--busy .sf-next__btn { color: var(--text-muted); pointer-events: none; }

/* Cards arrive one after another */
@keyframes sfCardReveal {
	from { opacity: 0; transform: translateY(12px); }
	to { opacity: 1; transform: none; }
}
.sf-setup__parts > .sf-part,
.sf-cards > .sf-card { animation: sfCardReveal 380ms cubic-bezier(.16, 1, .3, 1) both; }
.sf-setup__parts > .sf-part:nth-child(2),
.sf-cards > .sf-card:nth-child(2) { animation-delay: 80ms; }
.sf-setup__parts > .sf-part:nth-child(3),
.sf-cards > .sf-card:nth-child(3) { animation-delay: 160ms; }
.sf-cards > .sf-card:nth-child(n+4) { animation-delay: 240ms; }

/* Phones: once chatting, the panel header shrinks so answers sit higher */
@media (max-width: 700px) {
	.sf-app--chatting .sf-hero { padding-top: 1rem; padding-bottom: 1rem; }
	.sf-app--chatting .sf-hero .sf-eyebrow { display: none; }
	.sf-app--chatting .sf-hero__title { font-size: 1.15rem; margin-bottom: .65rem; }
	.sf-next { gap: .4rem; }
	.sf-next li { flex: 1 1 100%; }
	.sf-next__btn { width: 100%; }
}

/* Phones and small tablets: once chatting, the conversation uses the page's
   own scroll instead of a small frame, and the question box stays stuck to
   the bottom of the screen above the tab bar, like a messaging app.
   overflow: clip (not hidden) so the panel is not a scroll container,
   which would stop the box sticking. */
.sf-msg { scroll-margin-top: 84px; }
@media (max-width: 768px) {
	.sf-app--chatting .sf-hero { overflow: clip; }
	.sf-app--chatting .sf-hero .sf-thread {
		max-height: none;
		overflow: visible;
		-webkit-mask-image: none;
		mask-image: none;
		padding-top: 0;
	}
	.sf-app--chatting .sf-box {
		position: sticky;
		bottom: calc(54px + env(safe-area-inset-bottom, 0px) + .5rem);
		z-index: 5;
	}
}