/**
 * Suezy chat section.
 *
 * Ported from the approved design (design_source/), which was authored at a fixed
 * 948x678. Everything here is fluid instead: the section has to survive any Elementor
 * column, any theme, and any viewport.
 *
 * Layout responds to the *section's* width via a container query rather than the
 * viewport, so dropping the widget into a half-width column stacks it correctly. A
 * viewport fallback covers browsers without container query support; the two blocks are
 * marked and must stay in sync.
 *
 * The section is isolated from the page around it. Client pages and themes ship rules such
 * as `.page * { margin: 0; padding: 0 }`, `.page :where(button) { background: none }` or a
 * theme's `button:focus { background-color: ... }`, and those reach inside. Two things keep
 * them out without shadow DOM:
 *
 * - One rule, just before the section's own rules, sets every element inside back to the
 *   browser's defaults (`all: revert`), discarding page and theme styles. SVGs and images are
 *   left out, because reverting them would also drop their size, fill and stroke attributes.
 *   intl-tel-input, the country selector on the gate's phone field, is reset like everything
 *   else: its own stylesheet is vendored with the same `:not(#sdr-suezy-scope)` armour on
 *   every selector, and enqueued after this file so it wins the tie the armour produces — the
 *   reset is worth an ID and a class, so armour alone only draws with it. Exempting its subtree
 *   instead would leave it the one part of the section a client theme could reach.
 *   See assets/vendor/intl-tel-input/README.md.
 * - Every rule carries `:not(#sdr-suezy-scope)`, which matches everything and adds an ID's
 *   worth of specificity, so the section's own rules beat that reset and any page or theme
 *   rule short of !important, whichever stylesheet loads last. Every rule gains the same, so
 *   the cascade inside this file is unchanged.
 *
 * The bare `.sdr-suezy` rule stays unscoped so Elementor's `{{WRAPPER}} .sdr-suezy` style
 * controls keep winning over it. tests/js/suezy-css-specificity.test.js enforces all of this.
 */

/* -------------------------------------------------------------------------- *
 * Typeface
 * -------------------------------------------------------------------------- */

@font-face {
	font-family: "Cooper Hewitt";
	src: url(../fonts/CooperHewitt-Book.woff) format("woff");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Cooper Hewitt";
	src: url(../fonts/CooperHewitt-Medium.woff) format("woff");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Cooper Hewitt";
	src: url(../fonts/CooperHewitt-Semibold.woff) format("woff");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Cooper Hewitt";
	src: url(../fonts/CooperHewitt-Bold.woff) format("woff");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Cooper Hewitt";
	src: url(../fonts/CooperHewitt-BoldItalic.woff) format("woff");
	font-weight: 700;
	font-style: italic;
	font-display: swap;
}

/* -------------------------------------------------------------------------- *
 * Tokens
 *
 * Scoped to the section rather than :root so the plugin cannot leak variables into
 * the client's theme. Elementor's style controls overwrite these same properties.
 * -------------------------------------------------------------------------- */

.sdr-suezy {
	--sdr-primary: #4329c9;
	--sdr-primary-hover: #37209e;
	--sdr-primary-active: #2c1a80;
	--sdr-on-primary: #fff;
	--sdr-primary-soft: #efebfc;
	--sdr-primary-soft-border: #dcd4f7;

	--sdr-surface: #fff;
	--sdr-surface-sunken: #f6f6f8;

	--sdr-text: #222;
	--sdr-text-secondary: #54565c;

	--sdr-border: #e2e3e8;
	--sdr-input-border: #b9bac4;
	--sdr-focus-ring: 0 0 0 3px rgba(67, 41, 201, 0.28);

	--sdr-danger: #b42318;
	--sdr-danger-surface: #fef3f2;
	--sdr-danger-border: #fecdca;

	--sdr-font: "Cooper Hewitt", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--sdr-radius: 16px;
	--sdr-radius-card: 8px;

	/* Padding scale. Widened by the container query below. */
	--sdr-pad-x: 18px;
	--sdr-pad-y: 18px;

	container-type: inline-size;
	container-name: sdr-suezy;
	max-width: var(--sdr-suezy-max-width, 948px);
	font-family: var(--sdr-font);

	/* The design's base size and leading, declared so a host page's body text settings are not inherited. */
	font-size: 16px;
	line-height: normal;
	color: var(--sdr-text);
	text-align: left;
}

/* Block-theme layouts (`.is-layout-constrained`) cap every unaligned child at the
 * theme's content-size, and stretch an `alignwide` one to its wide-size. Those rules tie
 * with the bare `.sdr-suezy` rule and can win on source order; this one is scoped (see the
 * header), so the section keeps the width the editor asked for without !important. This is
 * a ceiling, not a floor: a narrower column still shrinks it. */
.sdr-suezy:not(#sdr-suezy-scope).sdr-suezy {
	max-width: var(--sdr-suezy-max-width, 948px);
}

/* Same tie, on the margins those layouts use to centre their children. */
.sdr-suezy--align-left:not(#sdr-suezy-scope).sdr-suezy--align-left {
	margin-inline: 0;
}

.sdr-suezy--align-center:not(#sdr-suezy-scope).sdr-suezy--align-center {
	margin-inline: auto;
}

.sdr-suezy--align-right:not(#sdr-suezy-scope).sdr-suezy--align-right {
	margin-inline-start: auto;
	margin-inline-end: 0;
}

.sdr-suezy *:where(:not(svg, svg *, img)):not(#sdr-suezy-scope) {
	all: revert;
}

.sdr-suezy:not(#sdr-suezy-scope) *,
.sdr-suezy:not(#sdr-suezy-scope) *::before,
.sdr-suezy:not(#sdr-suezy-scope) *::after {
	box-sizing: border-box;
}

/* -------------------------------------------------------------------------- *
 * Panel
 * -------------------------------------------------------------------------- */

.sdr-suezy__panel:not(#sdr-suezy-scope) {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--sdr-border);
	border-radius: var(--sdr-radius);
	background: var(--sdr-surface);
	animation: sdr-suezy-breathe 2.4s ease-in-out infinite;
}

.sdr-suezy__demo-badge:not(#sdr-suezy-scope) {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 3;
	padding: 4px 10px;
	border-radius: 999px;
	background: rgba(28, 23, 48, 0.72);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.4;
	text-transform: uppercase;
	pointer-events: none;
}

@keyframes sdr-suezy-breathe {

	0%,
	100% {
		box-shadow:
			0 14px 34px rgba(28, 23, 48, 0.12),
			0 0 0 1px rgba(67, 41, 201, 0.12),
			0 0 26px 2px rgba(67, 41, 201, 0.18);
	}

	50% {
		box-shadow:
			0 14px 34px rgba(28, 23, 48, 0.12),
			0 0 0 1px rgba(67, 41, 201, 0.34),
			0 0 66px 18px rgba(67, 41, 201, 0.46);
	}
}

/* -------------------------------------------------------------------------- *
 * Header: portrait + intro
 * -------------------------------------------------------------------------- */

.sdr-suezy__header:not(#sdr-suezy-scope) {
	display: grid;
	grid-template-columns: 1fr;
	flex: none;
	border-bottom: 1px solid var(--sdr-border);
}

.sdr-suezy__portrait:not(#sdr-suezy-scope) {
	position: relative;
	aspect-ratio: 16 / 7;
	background: var(--sdr-surface-sunken);
}

.sdr-suezy__portrait-image:not(#sdr-suezy-scope) {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
	object-position: 50% 22%;
}

/*
 * Two stacked gradients: a radial vignette that pulls the eye to the subject, and a
 * vertical wash that darkens the base enough for the caption to stay legible over any
 * photograph the client swaps in.
 */
.sdr-suezy__portrait-scrim:not(#sdr-suezy-scope) {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(112% 74% at 52% 30%, rgba(67, 41, 201, 0) 34%, rgba(67, 41, 201, 0.34) 72%, rgba(43, 25, 140, 0.72) 100%),
		linear-gradient(to bottom, rgba(28, 23, 48, 0.34) 0%, rgba(28, 23, 48, 0) 36%, rgba(35, 20, 110, 0.88) 100%);
}

.sdr-suezy__portrait-caption:not(#sdr-suezy-scope) {
	position: absolute;
	bottom: 16px;
	left: 18px;
	pointer-events: none;
}

.sdr-suezy__brand-name:not(#sdr-suezy-scope) {
	display: block;
	color: #fff;
	font-size: 26px;
	font-style: italic;
	font-weight: 700;
	line-height: 1.1;
}

.sdr-suezy__brand-tagline:not(#sdr-suezy-scope) {
	display: block;
	margin-top: 4px;
	color: #d6cdf8;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
}

.sdr-suezy__intro:not(#sdr-suezy-scope) {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
	padding: var(--sdr-pad-y) var(--sdr-pad-x);
	background-color: var(--sdr-surface);
}

.sdr-suezy__marks:not(#sdr-suezy-scope) {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

.sdr-suezy__logo:not(#sdr-suezy-scope) {
	flex: none;
	width: auto;
	height: 32px;
	margin: 0;
}

.sdr-suezy__accreditation:not(#sdr-suezy-scope) {
	flex: none;
	width: auto;
	height: 64px;
	margin: 0;
}

.sdr-suezy__eyebrow:not(#sdr-suezy-scope) {
	margin: 16px 0 0;
	color: var(--sdr-primary);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.12em;
	line-height: 1.35;
}

.sdr-suezy__eyebrow:not(#sdr-suezy-scope) a {
	color: inherit;
	text-decoration: none;
}

.sdr-suezy__eyebrow:not(#sdr-suezy-scope) a:hover,
.sdr-suezy__eyebrow:not(#sdr-suezy-scope) a:focus-visible {
	color: var(--sdr-primary-hover);
	text-decoration: underline;
}

.sdr-suezy__heading:not(#sdr-suezy-scope) {
	margin: 12px 0 0;
	color: var(--sdr-text);
	font-family: inherit;

	/* Viewport-based first, so browsers without container query units still scale. */
	font-size: clamp(21px, 2.2vw + 8px, 27px);
	font-size: clamp(21px, 2.9cqi + 12px, 27px);
	font-weight: 700;
	line-height: 1.3;
	text-wrap: pretty;
}

.sdr-suezy__heading-accent:not(#sdr-suezy-scope) {
	display: block;
	color: var(--sdr-primary);
}

.sdr-suezy__meta:not(#sdr-suezy-scope) {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 20px;
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
}

.sdr-suezy__meta-item:not(#sdr-suezy-scope) {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: var(--sdr-text-secondary);
	font-size: 14px;
}

.sdr-suezy__meta-icon:not(#sdr-suezy-scope) {
	flex: none;
	color: var(--sdr-primary);
}

/* -------------------------------------------------------------------------- *
 * Accreditation bar
 * -------------------------------------------------------------------------- */

.sdr-suezy__trust:not(#sdr-suezy-scope) {
	display: flex;
	flex-wrap: wrap;
	flex: none;
	align-items: center;
	justify-content: center;
	gap: 10px 18px;
	margin: 0;
	padding: 9px var(--sdr-pad-x);
	border-bottom: 1px solid var(--sdr-border);
	background: var(--sdr-surface-sunken);
	list-style: none;
}

.sdr-suezy__trust-item:not(#sdr-suezy-scope) {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: var(--sdr-text);
	font-size: 14px;
	font-weight: 500;
}

/* A hairline between marks, so a text label and logos read as one row of equals. */
.sdr-suezy__trust-item:not(#sdr-suezy-scope) + .sdr-suezy__trust-item::before {
	content: "";
	flex: none;
	width: 1px;
	height: 18px;
	margin-right: 24px;
	background: var(--sdr-border);
}

/*
 * One rule for every mark. The shipped artwork is trimmed to its ink bounds by
 * bin/optimize-assets.py, so a shared height reads as optically consistent; max-width
 * keeps an unusually wide replacement from crowding the row.
 */
.sdr-suezy__trust-image:not(#sdr-suezy-scope) {
	flex: none;
	width: auto;
	max-width: 120px;
	height: 24px;
	margin: 0;
	object-fit: contain;
}

/* -------------------------------------------------------------------------- *
 * Cards: what Suezy covers, shown rather than chosen, so nothing about them invites a click
 * -------------------------------------------------------------------------- */

.sdr-suezy__body:not(#sdr-suezy-scope) {
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: center;
	min-height: 0;
	padding: calc(var(--sdr-pad-y) + 6px) calc(var(--sdr-pad-x) + 4px);
}

.sdr-suezy__cards-title:not(#sdr-suezy-scope) {
	margin: 0;
	color: var(--sdr-text);
	font-family: inherit;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
}

/*
 * auto-fit rather than a fixed four columns: the cards reflow to three, two or one
 * without needing a breakpoint, whatever width the surrounding column gives them.
 */
.sdr-suezy__cards:not(#sdr-suezy-scope) {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
	gap: 12px;
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
}

.sdr-suezy__cards-item:not(#sdr-suezy-scope) {
	display: flex;
	margin: 0;
}

.sdr-suezy__card:not(#sdr-suezy-scope) {
	position: relative;
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 9px;
	padding: 14px 15px;
	overflow: hidden;
	border: 1.5px solid var(--sdr-primary);
	border-radius: var(--sdr-radius-card);
	background: var(--sdr-primary);
	color: var(--sdr-on-primary);
	font-family: inherit;
	text-align: left;
}

.sdr-suezy__card-image:not(#sdr-suezy-scope) {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
	object-position: 88% 50%;
	opacity: 0.62;
	pointer-events: none;
}

.sdr-suezy__card-scrim:not(#sdr-suezy-scope) {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(105deg, rgba(50, 30, 152, 0.9) 0%, rgba(50, 30, 152, 0.74) 48%, rgba(50, 30, 152, 0.36) 100%);
}

.sdr-suezy__card-icon:not(#sdr-suezy-scope) {
	position: relative;
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.18);
	color: #fff;
}

.sdr-suezy__card-title:not(#sdr-suezy-scope) {
	position: relative;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.25;
}

/* Hidden in the narrow layout; the wide layout below brings it back. */
.sdr-suezy__card-text:not(#sdr-suezy-scope) {
	position: relative;
	display: none;
	margin: 0;
	color: rgba(255, 255, 255, 0.92);
	font-size: 13px;
	line-height: 1.45;
}

/* -------------------------------------------------------------------------- *
 * Call to action
 * -------------------------------------------------------------------------- */

.sdr-suezy__cta-wrap:not(#sdr-suezy-scope) {
	display: flex;
	justify-content: center;
	margin-top: 18px;
}

.sdr-suezy__cta-glow:not(#sdr-suezy-scope) {
	position: relative;
	display: inline-flex;
	border-radius: 999px;
	box-shadow: 0 12px 26px -10px rgba(67, 41, 201, 0.6);
}

/*
 * A rotating conic gradient masked down to a 2px outline, so the ring traces the
 * button's edge. @property is what makes the angle animatable at all -- without it the
 * custom property is a string and the browser has nothing to interpolate.
 */
@property --sdr-suezy-angle {
	syntax: "<angle>";
	initial-value: 0deg;
	inherits: false;
}

.sdr-suezy__cta-ring:not(#sdr-suezy-scope) {
	position: absolute;
	inset: -3px;
	padding: 2px;
	border-radius: 999px;
	pointer-events: none;
	background: conic-gradient(from var(--sdr-suezy-angle), rgba(67, 41, 201, 0.14) 0deg, rgba(67, 41, 201, 0.14) 210deg, rgba(140, 107, 255, 0.9) 300deg, #b7a2ff 335deg, rgba(140, 107, 255, 0.7) 350deg, rgba(67, 41, 201, 0.14) 360deg);
	-webkit-mask:
		linear-gradient(#000 0 0) content-box,
		linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask:
		linear-gradient(#000 0 0) content-box,
		linear-gradient(#000 0 0);
	mask-composite: exclude;
	animation: sdr-suezy-spin 2.4s linear infinite;
}

@keyframes sdr-suezy-spin {

	to {
		--sdr-suezy-angle: 360deg;
	}
}

.sdr-suezy__cta:not(#sdr-suezy-scope) {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	min-width: 180px;
	min-height: 48px;
	padding: 0 26px;
	border: none;
	border-radius: 999px;
	background: var(--sdr-primary);
	color: var(--sdr-on-primary);
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	appearance: none;
	cursor: pointer;
	transition: background 0.18s ease;
}

.sdr-suezy__cta:not(#sdr-suezy-scope):hover {
	background: var(--sdr-primary-hover);
	color: var(--sdr-on-primary);
}

.sdr-suezy__cta:not(#sdr-suezy-scope):active {
	background: var(--sdr-primary-active);
}

.sdr-suezy__cta:not(#sdr-suezy-scope):focus-visible {
	outline: none;
	box-shadow: var(--sdr-focus-ring);
}

.sdr-suezy__cta-icon:not(#sdr-suezy-scope) {
	flex: none;
	transition: transform 0.18s ease;
}

.sdr-suezy__cta:not(#sdr-suezy-scope):hover .sdr-suezy__cta-icon {
	transform: translateX(2px);
}

/* -------------------------------------------------------------------------- *
 * Gate: contact details and the emailed code
 *
 * Replaces the cards and call to action inside the body once a visitor launches. It reads
 * as the start of a chat: a transcript of messages, and a tray beneath holding whatever
 * Suezy is asking for. Themes style bare inputs and buttons aggressively, so every control
 * here sets its own box.
 * -------------------------------------------------------------------------- */

/* Beats any single-class display rule a theme or this file sets on these elements. */
.sdr-suezy:not(#sdr-suezy-scope) [hidden] {
	display: none;
}

/* The gate script holds the body at the entry state's height; the transcript takes what the
 * tray leaves and scrolls. The body's usual `flex: 1` has a zero basis, which in a panel of
 * no fixed height sizes it to its content and ignores that height, so the gate drops it. */
.sdr-suezy:not(#sdr-suezy-scope)[data-sdr-state="gate"] .sdr-suezy__body,
.sdr-suezy:not(#sdr-suezy-scope)[data-sdr-state="conversation"] .sdr-suezy__body {
	flex: none;
}

.sdr-suezy__gate:not(#sdr-suezy-scope) {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 18px;
	width: 100%;
	min-height: 0;
}

/* ---- Transcript ---------------------------------------------------------- */

.sdr-suezy__transcript:not(#sdr-suezy-scope) {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 12px;
	min-height: 0;
	margin: -4px;
	padding: 4px;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
}

.sdr-suezy__message:not(#sdr-suezy-scope) {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	max-width: min(560px, 88%);
	animation: sdr-suezy-message-in 0.28s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

/* Focus lands on the last message programmatically when the gate ends; it is not a control. */
.sdr-suezy__message:not(#sdr-suezy-scope):focus {
	outline: none;
}

.sdr-suezy__message--visitor:not(#sdr-suezy-scope) {
	align-self: flex-end;
}

@keyframes sdr-suezy-message-in {

	from {
		opacity: 0;
		transform: translateY(6px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.sdr-suezy__avatar:not(#sdr-suezy-scope) {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 1px solid var(--sdr-primary-soft-border);
	border-radius: 50%;
	background: var(--sdr-primary-soft);
	color: var(--sdr-primary);
	overflow: hidden;
}

/*
 * Cropped to the face. In the shipped portrait the face sits right of centre, about a third
 * of the way down: scale about that point, then move it to the middle of the circle.
 */
.sdr-suezy__avatar-image:not(#sdr-suezy-scope) {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
	object-position: 50% 0;
	transform: translate(-7.5%, 16.5%) scale(2);
	transform-origin: 57.5% 33.5%;
}

.sdr-suezy__bubble:not(#sdr-suezy-scope) {
	min-width: 0;
	padding: 10px 15px;
	border: 1px solid var(--sdr-border);
	border-radius: 4px 16px 16px;
	background: var(--sdr-surface-sunken);
	color: var(--sdr-text);
	font-size: 15px;
	line-height: 1.5;
}

/* The details the code went to, with an Edit button beside them while the code is pending. */
.sdr-suezy__message--editable:not(#sdr-suezy-scope) {
	align-items: center;
}

.sdr-suezy__edit:not(#sdr-suezy-scope) {
	display: inline-flex;
	flex: none;
	order: -1;
	align-items: center;
	gap: 5px;
	min-height: 32px;
	margin: 0;
	padding: 0 11px;
	border: 1px solid var(--sdr-primary-soft-border);
	border-radius: 8px;
	background: var(--sdr-primary-soft);
	color: var(--sdr-primary);
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	text-transform: none;
	appearance: none;
	cursor: pointer;
	transition:
		background 0.15s ease,
		border-color 0.15s ease;
}

.sdr-suezy__edit:not(#sdr-suezy-scope):hover {
	border-color: var(--sdr-primary);
	background: var(--sdr-primary-soft);
	color: var(--sdr-primary-hover);
}

.sdr-suezy__edit:not(#sdr-suezy-scope):focus-visible {
	outline: none;
	box-shadow: var(--sdr-focus-ring);
}

.sdr-suezy__edit:not(#sdr-suezy-scope):disabled {
	opacity: 0.5;
	cursor: progress;
}

.sdr-suezy__message--visitor:not(#sdr-suezy-scope) .sdr-suezy__bubble {
	border-color: var(--sdr-primary);
	border-radius: 16px 4px 16px 16px;
	background: var(--sdr-primary);
	color: var(--sdr-on-primary);
}

.sdr-suezy__bubble:not(#sdr-suezy-scope) strong {
	font-weight: 600;
	overflow-wrap: anywhere;
}

/* Spoken, not shown: alignment and the avatar already say who is talking. */
.sdr-suezy__sender:not(#sdr-suezy-scope) {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ---- Tray ---------------------------------------------------------------- */

.sdr-suezy__line:not(#sdr-suezy-scope) {
	display: block;
}

.sdr-suezy__line:not(#sdr-suezy-scope) + .sdr-suezy__line {
	margin-top: 6px;
}

.sdr-suezy__tray:not(#sdr-suezy-scope) {
	flex: none;
	padding: 14px;
	border: 1px solid var(--sdr-border);
	border-radius: var(--sdr-radius);
	background: var(--sdr-surface-sunken);
}

.sdr-suezy__tray-form:not(#sdr-suezy-scope) {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
}

.sdr-suezy__tray-row:not(#sdr-suezy-scope) {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	margin: 0;
}

.sdr-suezy__alert:not(#sdr-suezy-scope) {
	margin: 0;
	padding: 10px 12px;
	border: 1px solid var(--sdr-danger-border);
	border-radius: var(--sdr-radius-card);
	background: var(--sdr-danger-surface);
	color: var(--sdr-danger);
	font-size: 14px;
	line-height: 1.45;
}

.sdr-suezy__fields:not(#sdr-suezy-scope) {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
}

.sdr-suezy__field:not(#sdr-suezy-scope) {
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
}

.sdr-suezy__tray-row:not(#sdr-suezy-scope) > .sdr-suezy__field {
	flex: 1;
}

/* The box a field's label and input share. */
.sdr-suezy__control:not(#sdr-suezy-scope) {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 46px;
	padding: 0 14px;
	border: 1px solid var(--sdr-input-border);
	border-radius: 10px;
	background: var(--sdr-surface);
	cursor: text;
	transition:
		border-color 0.15s ease,
		box-shadow 0.15s ease;
}

.sdr-suezy__control:not(#sdr-suezy-scope):focus-within {
	border-color: var(--sdr-primary);
	box-shadow: var(--sdr-focus-ring);
}

.sdr-suezy__control:not(#sdr-suezy-scope):has([aria-invalid="true"]) {
	border-color: var(--sdr-danger);
}

.sdr-suezy__label:not(#sdr-suezy-scope) {
	flex: none;
	margin: 0;
	color: var(--sdr-text-secondary);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	white-space: nowrap;
	cursor: text;
}

.sdr-suezy__required:not(#sdr-suezy-scope) {
	margin-left: 1px;
	color: var(--sdr-danger);
}

/* Kept for assistive tech only; the composer shows its prompt as a placeholder instead. */
.sdr-suezy__label--visually-hidden:not(#sdr-suezy-scope) {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.sdr-suezy__input:not(#sdr-suezy-scope),
.sdr-suezy__input:not(#sdr-suezy-scope):focus {
	flex: 1;
	width: 100%;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 11px 0;
	border: none;
	border-radius: 0;
	outline: none;
	background: transparent;
	box-shadow: none;
	color: var(--sdr-text);
	font-family: inherit;

	/* 16px keeps iOS Safari from zooming the page when the field takes focus. */
	font-size: 16px;
	line-height: 1.25;
}

.sdr-suezy__input:not(#sdr-suezy-scope)::placeholder {
	color: var(--sdr-text-secondary);
	opacity: 1;
}

/* ---- The phone field's country selector ---------------------------------- *
 * intl-tel-input wraps the input in `.iti` once the gate starts it, and brings its own
 * stylesheet, which the reset above leaves alone. What is left is fitting it to a field whose
 * label lives inside the box: the wrapper has to fill the control, and the country button has
 * to read as part of that box rather than a control sitting in one. */

.sdr-suezy__field--phone:not(#sdr-suezy-scope) .iti {
	display: flex;
	flex: 1;
	min-width: 0;
}

/*
 * The button carries the flag and the dial code, stripped back to the field's own background.
 *
 * Its padding-right is the space between the dial code and the number, so "+65" and what the
 * visitor types do not read as one run-on string. The space has to come from here rather than
 * from the input: intl-tel-input sets the input's own left padding inline when it starts, by
 * measuring this button and adding six, so widening the button is what moves the number
 * across. Padding the country container instead does nothing, since that is not what it
 * measures.
 *
 * Nothing divides the two. The section's fields carry no internal rules, and a full-height one
 * here reads as a text caret sitting in the field.
 */
.sdr-suezy__field--phone:not(#sdr-suezy-scope) .iti__selected-country {
	padding-right: 8px;
	border-radius: 0;
	background: transparent;
}

.sdr-suezy__field--phone:not(#sdr-suezy-scope)
.iti__selected-country-primary {
	padding-right: 4px;
	padding-left: 0;
}

.sdr-suezy__field--phone:not(#sdr-suezy-scope) .iti__selected-dial-code {
	color: var(--sdr-text);
	font-size: 16px;
}

.sdr-suezy__field--phone:not(#sdr-suezy-scope)
.iti--separate-dial-code
.iti__selected-country:focus-visible {
	outline: 2px solid var(--sdr-primary);
	outline-offset: -2px;
}

/*
 * The country list, in both the shapes intl-tel-input gives it: a dropdown inside the field on
 * a wide screen, and a popup covering the screen on a phone.
 *
 * The popup is appended to <body>, outside the section, so it inherits none of the section's
 * type and reads none of its tokens. Every rule below therefore names both, and the popup's
 * share is written out in full rather than with var().
 */
.sdr-suezy__field--phone:not(#sdr-suezy-scope) .iti__country-list {
	border-radius: 10px;
}

.sdr-suezy__field--phone:not(#sdr-suezy-scope) .iti__country,
.iti--detached-country-selector:not(#sdr-suezy-scope) .iti__country {
	font-size: 15px;
}

.sdr-suezy__field--phone:not(#sdr-suezy-scope) .iti__search-input,
.iti--detached-country-selector:not(#sdr-suezy-scope) .iti__search-input {

	/* 16px keeps iOS Safari from zooming the page when the search box takes focus. */
	font-size: 16px;
}

/* Their own controls sit outside the section's reset, so without this they take the browser's
 * focus ring rather than the section's. */
.sdr-suezy__field--phone:not(#sdr-suezy-scope) .iti__search-input:focus,
.iti--detached-country-selector:not(#sdr-suezy-scope) .iti__search-input:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgb(67 41 201 / 28%);
}

.sdr-suezy__field--phone:not(#sdr-suezy-scope) .iti__country.iti__highlight,
.iti--detached-country-selector:not(#sdr-suezy-scope) .iti__country.iti__highlight {
	background: #efebfc;
}

/*
 * The popup only. Keep the stack in step with --sdr-font, which it cannot read.
 */
.iti--detached-country-selector:not(#sdr-suezy-scope):not(#sdr-suezy-scope) {
	font-family: "Cooper Hewitt", -apple-system, blinkmacsystemfont, "Segoe UI", sans-serif;

	/*
	 * A section lifted out of the page for full screen sits at z-index 100000, and the popup
	 * carries 1060 of its own, so it painted behind the section: the visitor tapped the flag,
	 * the arrow flipped to open, and nothing appeared, with no way to pick a country at all.
	 * Keep in step with the z-index in the full-screen block near the end of this file.
	 *
	 * The armour is doubled because the vendored stylesheet sets this same single class and
	 * loads after this file, so a single armour would only draw with it and lose on order.
	 */
	z-index: 100001;
}

/* ---- The emailed code ---------------------------------------------------- *
 * Six digit boxes with the verify and resend buttons beside them, wrapping beneath when the
 * tray is too narrow. The boxes mirror one transparent input laid over them. */

.sdr-suezy__otp:not(#sdr-suezy-scope) {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 10px 12px;
	margin: 0;
}

.sdr-suezy__otp:not(#sdr-suezy-scope) > .sdr-suezy__field {
	flex: 1 1 250px;
}

.sdr-suezy__otp-boxes:not(#sdr-suezy-scope) {
	position: relative;
	max-width: 328px;
}

.sdr-suezy__otp-label:not(#sdr-suezy-scope) {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.sdr-suezy__otp-cells:not(#sdr-suezy-scope) {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 8px;
}

.sdr-suezy__otp-cell:not(#sdr-suezy-scope) {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 50px;
	border: 2px solid var(--sdr-primary-soft-border);
	border-radius: 10px;
	background: var(--sdr-surface);
	box-shadow: 0 6px 14px rgba(28, 23, 48, 0.05);
	color: var(--sdr-text);
	font-size: 20px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1;
	transition:
		border-color 0.15s ease,
		box-shadow 0.15s ease;
}

.sdr-suezy__otp-cell:not(#sdr-suezy-scope).is-filled {
	border-color: var(--sdr-input-border);
}

.sdr-suezy__otp-cell:not(#sdr-suezy-scope).is-active {
	border-color: var(--sdr-primary);
	box-shadow: var(--sdr-focus-ring);
}

.sdr-suezy__otp-boxes:not(#sdr-suezy-scope):has([aria-invalid="true"]) .sdr-suezy__otp-cell {
	border-color: var(--sdr-danger);
}

.sdr-suezy__otp-boxes:not(#sdr-suezy-scope):has([aria-invalid="true"]) .sdr-suezy__otp-cell.is-active {
	box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.2);
}

/* Invisible but real: it takes the taps, the typing, the paste and the autofill. */
.sdr-suezy__otp-input:not(#sdr-suezy-scope),
.sdr-suezy__otp-input:not(#sdr-suezy-scope):focus {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: none;
	border-radius: 0;
	outline: none;
	background: transparent;
	box-shadow: none;
	color: transparent;
	caret-color: transparent;
	-webkit-text-fill-color: transparent;

	/* 16px keeps iOS Safari from zooming the page when the field takes focus. */
	font-size: 16px;
	cursor: text;
}

.sdr-suezy__otp-input:not(#sdr-suezy-scope)::selection {
	background: transparent;
}

.sdr-suezy__otp-actions:not(#sdr-suezy-scope) {
	display: flex;
	flex: 0 1 auto;
	gap: 8px;
}

.sdr-suezy__otp-button:not(#sdr-suezy-scope) {
	display: inline-flex;
	flex: 0 0 auto;
	flex-direction: column;
	min-width: 128px;
	align-items: center;
	justify-content: center;
	gap: 2px;
	height: 50px;
	margin: 0;
	padding: 0 12px;
	border: 1px solid var(--sdr-primary-soft-border);
	border-radius: 10px;
	background: var(--sdr-surface);
	color: var(--sdr-primary);
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
	appearance: none;
	cursor: pointer;
	transition:
		background 0.18s ease,
		border-color 0.18s ease,
		opacity 0.18s ease;
}

.sdr-suezy__otp-button:not(#sdr-suezy-scope) small {
	font-size: 11px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.02em;
	text-transform: none;
}

.sdr-suezy__otp-button:not(#sdr-suezy-scope):hover {
	border-color: var(--sdr-primary);
	background: var(--sdr-primary-soft);
	color: var(--sdr-primary);
}

.sdr-suezy__otp-button--primary:not(#sdr-suezy-scope) {
	border-color: var(--sdr-primary);
	background: var(--sdr-primary);
	color: var(--sdr-on-primary);
}

.sdr-suezy__otp-button--primary:not(#sdr-suezy-scope):hover {
	border-color: var(--sdr-primary-hover);
	background: var(--sdr-primary-hover);
	color: var(--sdr-on-primary);
}

.sdr-suezy__otp-button--primary:not(#sdr-suezy-scope):active {
	background: var(--sdr-primary-active);
}

.sdr-suezy__otp-button:not(#sdr-suezy-scope):focus-visible {
	outline: none;
	box-shadow: var(--sdr-focus-ring);
}

.sdr-suezy__otp-button:not(#sdr-suezy-scope):disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.sdr-suezy__otp-button:not(#sdr-suezy-scope):disabled:hover {
	border-color: var(--sdr-primary-soft-border);
	background: var(--sdr-surface);
}

.sdr-suezy__otp-button--primary:not(#sdr-suezy-scope):disabled:hover {
	border-color: var(--sdr-primary);
	background: var(--sdr-primary);
}

.sdr-suezy__error:not(#sdr-suezy-scope) {
	margin: 0 0 0 2px;
	color: var(--sdr-danger);
	font-size: 13px;
	line-height: 1.4;
}

.sdr-suezy__check:not(#sdr-suezy-scope) {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 4px 10px;
	align-items: start;
	align-self: center;
	min-width: 0;
}

.sdr-suezy__checkbox:not(#sdr-suezy-scope) {
	width: 18px;
	height: 18px;
	margin: 2px 0 0;
	accent-color: var(--sdr-primary);
}

.sdr-suezy__checkbox:not(#sdr-suezy-scope):focus-visible {
	outline: none;
	box-shadow: var(--sdr-focus-ring);
}

.sdr-suezy__check-label:not(#sdr-suezy-scope) {
	color: var(--sdr-text-secondary);
	font-size: 14px;
	line-height: 1.45;
}

/* A button, not a link: it opens the notice over the panel rather than leaving the page. */
.sdr-suezy__link:not(#sdr-suezy-scope) {
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: var(--sdr-primary);
	font-weight: 600;
	text-align: left;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.sdr-suezy__link:not(#sdr-suezy-scope):hover {
	color: var(--sdr-primary-hover);
}

.sdr-suezy__link:not(#sdr-suezy-scope):focus-visible {
	outline: none;
	border-radius: 2px;
	box-shadow: var(--sdr-focus-ring);
}

.sdr-suezy__check:not(#sdr-suezy-scope) .sdr-suezy__error {
	grid-column: 2;
}

.sdr-suezy__send:not(#sdr-suezy-scope) {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	margin: 0;
	padding: 0;
	border: none;
	border-radius: 12px;
	background: var(--sdr-primary);
	color: var(--sdr-on-primary);
	appearance: none;
	cursor: pointer;
	transition: background 0.18s ease;
}

.sdr-suezy__send:not(#sdr-suezy-scope) svg {
	transition: transform 0.18s ease;
}

.sdr-suezy__send:not(#sdr-suezy-scope):hover {
	background: var(--sdr-primary-hover);
	color: var(--sdr-on-primary);
}

.sdr-suezy__send:not(#sdr-suezy-scope):hover svg {
	transform: translateX(2px);
}

.sdr-suezy__send:not(#sdr-suezy-scope):active {
	background: var(--sdr-primary-active);
}

.sdr-suezy__send:not(#sdr-suezy-scope):focus-visible {
	outline: none;
	box-shadow: var(--sdr-focus-ring);
}

.sdr-suezy__send:not(#sdr-suezy-scope):disabled {
	background: var(--sdr-primary);
	opacity: 0.6;
	cursor: progress;
}

.sdr-suezy__actions:not(#sdr-suezy-scope) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 18px;
	margin: -6px 0 0 2px;
}

.sdr-suezy__text-button:not(#sdr-suezy-scope) {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	margin: 0;
	padding: 0;
	border: none;
	background: none;
	color: var(--sdr-primary);
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	text-align: left;
	text-decoration: underline;
	text-transform: none;
	text-underline-offset: 3px;
	appearance: none;
	cursor: pointer;
}

.sdr-suezy__text-button:not(#sdr-suezy-scope):hover {
	background: none;
	color: var(--sdr-primary-hover);
}

.sdr-suezy__text-button:not(#sdr-suezy-scope):focus-visible {
	outline: none;
	border-radius: 4px;
	box-shadow: var(--sdr-focus-ring);
}

.sdr-suezy__text-button:not(#sdr-suezy-scope):disabled {
	color: var(--sdr-text-secondary);
	text-decoration: none;
	cursor: default;
}

/* ---- Conversation --------------------------------------------------------- */

/* A visitor's message is plain text; its line breaks are the only formatting it carries. */
.sdr-suezy__text:not(#sdr-suezy-scope) {
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

/* Suezy's replies carry a small Markdown subset instead: headings, paragraphs, lists, bold, italics and links. */
.sdr-suezy__text--rich:not(#sdr-suezy-scope) {
	white-space: normal;
}

/* :where keeps this reset below the spacing rules that follow. */
.sdr-suezy__text--rich:not(#sdr-suezy-scope) > :where(p, ul, ol) {
	margin: 0;
}

.sdr-suezy__text--rich:not(#sdr-suezy-scope) > * + * {
	margin-top: 8px;
}

.sdr-suezy__text--rich:not(#sdr-suezy-scope) > .sdr-suezy__reply-heading {
	font-size: 1.05em;
	font-weight: 600;
	line-height: 1.3;
}

.sdr-suezy__text--rich:not(#sdr-suezy-scope) > * + .sdr-suezy__reply-heading {
	margin-top: 14px;
}

.sdr-suezy__text--rich:not(#sdr-suezy-scope) > .sdr-suezy__reply-heading + * {
	margin-top: 4px;
}

.sdr-suezy__text--rich:not(#sdr-suezy-scope) em {
	font-style: italic;
}

.sdr-suezy__text--rich:not(#sdr-suezy-scope) > ul,
.sdr-suezy__text--rich:not(#sdr-suezy-scope) > ol {
	padding-left: 1.4em;
}

.sdr-suezy__text--rich:not(#sdr-suezy-scope) > ul {
	list-style: disc;
}

.sdr-suezy__text--rich:not(#sdr-suezy-scope) > ol {
	list-style: decimal;
}

.sdr-suezy__text--rich:not(#sdr-suezy-scope) li {
	margin: 0;
}

.sdr-suezy__text--rich:not(#sdr-suezy-scope) li + li {
	margin-top: 4px;
}

/* Reference checklists have no interactive or persisted completion state. */
.sdr-suezy__text--rich:not(#sdr-suezy-scope) > .sdr-suezy__checklist {
	list-style: none;
	padding-left: 0;
}

.sdr-suezy__text--rich:not(#sdr-suezy-scope) > .sdr-suezy__checklist > li {
	position: relative;
	padding-left: 1.65em;
}

.sdr-suezy__text--rich:not(#sdr-suezy-scope) > .sdr-suezy__checklist > li + li {
	margin-top: 8px;
}

.sdr-suezy__checklist-box:not(#sdr-suezy-scope) {
	position: absolute;
	left: 0;
	top: 0.3em;
	width: 0.9em;
	height: 0.9em;
	box-sizing: border-box;
	border: 1px solid currentcolor;
	border-radius: 2px;
}

.sdr-suezy__reply-link:not(#sdr-suezy-scope) {
	color: var(--sdr-primary);
	text-decoration: underline;
	text-underline-offset: 2px;
	overflow-wrap: anywhere;
}

.sdr-suezy__reply-link:not(#sdr-suezy-scope):hover {
	color: var(--sdr-primary-hover);
}

.sdr-suezy__reply-link:not(#sdr-suezy-scope):focus-visible {
	outline: none;
	border-radius: 2px;
	box-shadow: var(--sdr-focus-ring);
}

/* A message whose exchange failed stays on screen, marked, with Try again when that can help. */
.sdr-suezy__message--not-sent:not(#sdr-suezy-scope) {
	flex-wrap: wrap;
	justify-content: flex-end;
}

.sdr-suezy__message--not-sent:not(#sdr-suezy-scope) .sdr-suezy__bubble {
	border-style: dashed;
	opacity: 0.72;
}

.sdr-suezy__not-sent:not(#sdr-suezy-scope) {
	display: flex;
	flex-basis: 100%;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 0 12px;
	color: var(--sdr-danger);
	font-size: 13px;
	line-height: 1.4;
	text-align: right;
}

.sdr-suezy__not-sent:not(#sdr-suezy-scope) .sdr-suezy__text-button {
	min-height: 28px;
	font-size: 13px;
}

/* Its own element in the transcript, not part of Suezy's message bubble; the left margin
 * lines it up under her message text, past the avatar column (36px avatar + 10px gap). */
.sdr-suezy__picker:not(#sdr-suezy-scope) {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: min(560px, 88%);
	margin-left: 46px;
}

/* The first picker answers the greeting from the tray, so it takes the tray's width. */
.sdr-suezy__tray:not(#sdr-suezy-scope) > .sdr-suezy__picker {
	max-width: none;
	margin-left: 0;
}

@media (min-width: 641px) {

	.sdr-suezy__tray:not(#sdr-suezy-scope) > .sdr-suezy__picker .sdr-suezy__topics {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.sdr-suezy__topics:not(#sdr-suezy-scope) {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: sdr-suezy-topic;
}

.sdr-suezy__topics-item:not(#sdr-suezy-scope) {
	margin: 0;
	counter-increment: sdr-suezy-topic;
}

.sdr-suezy__topic:not(#sdr-suezy-scope) {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	min-height: 40px;
	margin: 0;
	padding: 8px 14px;
	border: 1px solid var(--sdr-primary-soft-border);
	border-radius: 12px;
	background: var(--sdr-primary-soft);
	color: var(--sdr-primary);
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	text-align: left;
	text-transform: none;
	appearance: none;
	cursor: pointer;
	transition:
		background 0.15s ease,
		border-color 0.15s ease,
		color 0.15s ease;
}

.sdr-suezy__topic:not(#sdr-suezy-scope)::before {
	content: counter(sdr-suezy-topic) ".";
	flex: none;
	color: var(--sdr-primary);
	font-weight: 700;
}

.sdr-suezy__topic:not(#sdr-suezy-scope):hover::before {
	color: inherit;
}

.sdr-suezy__topic:not(#sdr-suezy-scope):hover {
	border-color: var(--sdr-primary);
	background: var(--sdr-primary);
	color: var(--sdr-on-primary);
}

.sdr-suezy__topic:not(#sdr-suezy-scope):focus-visible {
	outline: none;
	box-shadow: var(--sdr-focus-ring);
}

.sdr-suezy__own-words:not(#sdr-suezy-scope),
.sdr-suezy__composer:not(#sdr-suezy-scope) {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
}

.sdr-suezy__own-words:not(#sdr-suezy-scope) .sdr-suezy__field,
.sdr-suezy__composer:not(#sdr-suezy-scope) .sdr-suezy__field {
	flex: 1;
}

/* Three lines tall at rest, growing with the draft to the cap and scrolling past it. The focus
 * selector outranks the input's own `min-height: 0`. */
.sdr-suezy__composer-input:not(#sdr-suezy-scope),
.sdr-suezy__composer-input:not(#sdr-suezy-scope):focus {
	min-height: calc(3 * 1.25em + 22px);
	max-height: 160px;
	overflow-y: auto;
	resize: none;
}

/* Brings the topics back mid-conversation. Styled like a topic, so it reads as the way back to
 * them and send stays the composer's main action. */
.sdr-suezy__topics-button:not(#sdr-suezy-scope) {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	margin: 0;
	padding: 0;
	border: 1px solid var(--sdr-primary-soft-border);
	border-radius: 12px;
	background: var(--sdr-primary-soft);
	color: var(--sdr-primary);
	appearance: none;
	cursor: pointer;
	transition:
		background 0.18s ease,
		border-color 0.18s ease,
		color 0.18s ease;
}

.sdr-suezy__topics-button:not(#sdr-suezy-scope):hover {
	border-color: var(--sdr-primary);
	background: var(--sdr-primary);
	color: var(--sdr-on-primary);
}

.sdr-suezy__topics-button:not(#sdr-suezy-scope):focus-visible {
	outline: none;
	box-shadow: var(--sdr-focus-ring);
}

.sdr-suezy__topics-button:not(#sdr-suezy-scope):disabled {
	border-color: var(--sdr-primary-soft-border);
	background: var(--sdr-primary-soft);
	color: var(--sdr-primary);
	opacity: 0.6;
	cursor: progress;
}

/* ---- Suezy replying ------------------------------------------------------ */

.sdr-suezy__typing:not(#sdr-suezy-scope) {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	height: 1.5em;
}

.sdr-suezy__typing-dot:not(#sdr-suezy-scope) {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--sdr-text-secondary);
	animation: sdr-suezy-typing 1.2s ease-in-out infinite;
}

.sdr-suezy__typing-dot:not(#sdr-suezy-scope):nth-child(2) {
	animation-delay: 0.15s;
}

.sdr-suezy__typing-dot:not(#sdr-suezy-scope):nth-child(3) {
	animation-delay: 0.3s;
}

@keyframes sdr-suezy-typing {

	0%,
	60%,
	100% {
		opacity: 0.3;
		transform: none;
	}

	30% {
		opacity: 1;
		transform: translateY(-3px);
	}
}

/* ---- Endings -------------------------------------------------------------- */

/* In place of the composer once the session is over; the transcript above it stays. */
.sdr-suezy__ended:not(#sdr-suezy-scope) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 18px;
}

.sdr-suezy__ended-line:not(#sdr-suezy-scope) {
	flex: 1 1 260px;
	margin: 0;
	color: var(--sdr-text);
	font-size: 15px;
	line-height: 1.5;
}

.sdr-suezy__ended-line:not(#sdr-suezy-scope):focus {
	outline: none;
}

.sdr-suezy__ended-line:not(#sdr-suezy-scope) strong {
	font-weight: 700;
	overflow-wrap: anywhere;
}

/* -------------------------------------------------------------------------- *
 * Footer
 * -------------------------------------------------------------------------- */

.sdr-suezy__footer:not(#sdr-suezy-scope) {
	flex: none;
	padding: 12px var(--sdr-pad-x) 14px;
	border-top: 1px solid var(--sdr-border);
	background: var(--sdr-surface-sunken);
}

.sdr-suezy__disclaimer:not(#sdr-suezy-scope) {
	margin: 0;
	color: var(--sdr-text-secondary);
	font-size: 13px;
	line-height: 1.45;
	text-align: center;
}

/* Once a conversation is open the footer also holds the restart button, after the disclaimer. */
.sdr-suezy__footer--actions:not(#sdr-suezy-scope) {
	display: flex;
	align-items: center;
	gap: 12px;
}

.sdr-suezy__footer--actions:not(#sdr-suezy-scope) .sdr-suezy__disclaimer {
	flex: 1 1 auto;
	min-width: 0;
}

/* Styled like the topics button: a way to change course, not the section's main action. */
.sdr-suezy__restart:not(#sdr-suezy-scope) {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	border: 1px solid var(--sdr-primary-soft-border);
	border-radius: 999px;
	background: var(--sdr-primary-soft);
	color: var(--sdr-primary);
	appearance: none;
	cursor: pointer;
	transition:
		background 0.18s ease,
		border-color 0.18s ease,
		color 0.18s ease;
}

.sdr-suezy__restart:not(#sdr-suezy-scope)[hidden] {
	display: none;
}

.sdr-suezy__restart:not(#sdr-suezy-scope):hover {
	border-color: var(--sdr-primary);
	background: var(--sdr-primary);
	color: var(--sdr-on-primary);
}

.sdr-suezy__restart:not(#sdr-suezy-scope):focus-visible {
	outline: none;
	box-shadow: var(--sdr-focus-ring);
}

.sdr-suezy__restart:not(#sdr-suezy-scope):disabled {
	border-color: var(--sdr-primary-soft-border);
	background: var(--sdr-primary-soft);
	color: var(--sdr-primary);
	opacity: 0.6;
	cursor: progress;
}

/* -------------------------------------------------------------------------- *
 * Dialog
 *
 * Asks before a restart, and carries the notices the acknowledgement names. It covers the
 * panel rather than the page, so it goes wherever the section is, full screen included.
 * -------------------------------------------------------------------------- */

.sdr-suezy__dialog-backdrop:not(#sdr-suezy-scope) {
	position: absolute;
	inset: 0;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: rgba(28, 23, 48, 0.48);
}

.sdr-suezy__dialog:not(#sdr-suezy-scope) {
	width: min(420px, 100%);
	max-height: 100%;
	overflow: auto;
	padding: 22px 22px 18px;
	border-radius: var(--sdr-radius);
	background: var(--sdr-surface);
	box-shadow: 0 18px 44px rgba(28, 23, 48, 0.28);
	color: var(--sdr-text);
}

.sdr-suezy__dialog:not(#sdr-suezy-scope):focus {
	outline: none;
}

.sdr-suezy__dialog-title:not(#sdr-suezy-scope) {
	margin: 0 0 8px;
	color: var(--sdr-text);
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
}

.sdr-suezy__dialog-text:not(#sdr-suezy-scope) {
	margin: 0 0 16px;
	color: var(--sdr-text-secondary);
	font-size: 15px;
	line-height: 1.5;
}

.sdr-suezy__dialog-actions:not(#sdr-suezy-scope) {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 10px;
}

/*
 * A notice is longer than the panel, so the dialog holds its own height and the copy
 * scrolls within it. The title and Close stay put at either end.
 */
.sdr-suezy__dialog--legal:not(#sdr-suezy-scope) {
	display: flex;
	flex-direction: column;
	gap: 14px;
	width: min(620px, 100%);

	/*
	 * A section can be taller than the window, so the panel is not a low enough ceiling on
	 * its own: a dialog that fills a tall panel would put its own Close button off screen.
	 */
	max-height: min(100%, calc(100vh - 32px));
	max-height: min(100%, calc(100dvh - 32px));
	overflow: hidden;
}

.sdr-suezy__dialog--legal:not(#sdr-suezy-scope) .sdr-suezy__dialog-title {
	margin-bottom: 0;
}

.sdr-suezy__legal-copy:not(#sdr-suezy-scope) {
	flex: 1 1 auto;

	/* Without this a flex item refuses to shrink below its content, and nothing scrolls. */
	min-height: 0;
	overflow-y: auto;

	/* Reaching the end of the notice does not then scroll the page behind it. */
	overscroll-behavior: contain;
	padding-right: 10px;
	color: var(--sdr-text-secondary);
	font-size: 14px;
	line-height: 1.55;
}

.sdr-suezy__legal-copy:not(#sdr-suezy-scope):focus-visible {
	outline: none;
	border-radius: 2px;
	box-shadow: var(--sdr-focus-ring);
}

/* -------------------------------------------------------------------------- *
 * Narrow layout
 *
 * The eyebrow, meta row and accreditation bar are left out of the narrow layout; the
 * wide layout below brings them back.
 * -------------------------------------------------------------------------- */

.sdr-suezy__eyebrow:not(#sdr-suezy-scope),
.sdr-suezy__meta:not(#sdr-suezy-scope),
.sdr-suezy__trust:not(#sdr-suezy-scope) {
	display: none;
}

/* -------------------------------------------------------------------------- *
 * Wide layout
 *
 * Keep the two blocks below identical. The container query is authoritative; the
 * @supports block only exists for browsers that cannot evaluate it, where the viewport
 * is the best available proxy for the section's width.
 * -------------------------------------------------------------------------- */

@container sdr-suezy (min-width: 680px) {

	/*
	 * Set on the panel, not on .sdr-suezy: a container query cannot style the element
	 * that *is* the container, only its descendants. The variables inherit from here
	 * down to the intro, trust bar, body and footer, which is everything that uses them.
	 */
	.sdr-suezy__panel:not(#sdr-suezy-scope) {
		--sdr-pad-x: 30px;
		--sdr-pad-y: 22px;
	}

	.sdr-suezy__header:not(#sdr-suezy-scope) {
		grid-template-columns: 244px 1fr;
		min-height: 228px;
	}

	.sdr-suezy__portrait:not(#sdr-suezy-scope) {
		aspect-ratio: auto;
	}

	/* Tall enough for the gate's details tray with every error showing, so launching
	 * swaps the cards for the gate without the panel changing height. */
	.sdr-suezy__body:not(#sdr-suezy-scope) {
		min-height: 440px;
	}

	/* Two classes: the toggle's own rule comes later in the file. */
	.sdr-suezy__panel:not(#sdr-suezy-scope) .sdr-suezy__header-toggle {
		min-height: 36px;
	}

	.sdr-suezy__eyebrow:not(#sdr-suezy-scope) {
		display: block;
	}

	.sdr-suezy__meta:not(#sdr-suezy-scope) {
		display: flex;
	}

	.sdr-suezy__trust:not(#sdr-suezy-scope) {
		display: flex;
		justify-content: center;
		gap: 10px 32px;
		padding-inline: 24px;
	}

	.sdr-suezy__card-text:not(#sdr-suezy-scope) {
		display: block;
	}

	.sdr-suezy__fields:not(#sdr-suezy-scope) {
		grid-template-columns: 1fr 1fr;
	}

	.sdr-suezy__field--wide:not(#sdr-suezy-scope) {
		grid-column: 1 / -1;
	}
}

@supports not (container-type: inline-size) {

	@media (min-width: 900px) {

		.sdr-suezy__panel:not(#sdr-suezy-scope) {
			--sdr-pad-x: 30px;
			--sdr-pad-y: 22px;
		}

		.sdr-suezy__header:not(#sdr-suezy-scope) {
			grid-template-columns: 244px 1fr;
			min-height: 228px;
		}

		.sdr-suezy__portrait:not(#sdr-suezy-scope) {
			aspect-ratio: auto;
		}

		.sdr-suezy__body:not(#sdr-suezy-scope) {
			min-height: 440px;
		}

		/* Two classes: the toggle's own rule comes later in the file. */
		.sdr-suezy__panel:not(#sdr-suezy-scope) .sdr-suezy__header-toggle {
			min-height: 36px;
		}

		.sdr-suezy__eyebrow:not(#sdr-suezy-scope) {
			display: block;
		}

		.sdr-suezy__meta:not(#sdr-suezy-scope) {
			display: flex;
		}

		.sdr-suezy__trust:not(#sdr-suezy-scope) {
			display: flex;
			justify-content: center;
			gap: 10px 32px;
			padding-inline: 24px;
		}

		.sdr-suezy__card-text:not(#sdr-suezy-scope) {
			display: block;
		}

		.sdr-suezy__fields:not(#sdr-suezy-scope) {
			grid-template-columns: 1fr 1fr;
		}

		.sdr-suezy__field--wide:not(#sdr-suezy-scope) {
			grid-column: 1 / -1;
		}
	}
}

/* -------------------------------------------------------------------------- *
 * Hiding the header
 *
 * A live section can fold its header and accreditation bar away so the gate and conversation
 * get the room; assets/js/suezy-controls.js adds the toggle and animates the height. It pins
 * the panel at the height it had, and the body grows into what the header gives up.
 * -------------------------------------------------------------------------- */

.sdr-suezy__header:not(#sdr-suezy-scope),
.sdr-suezy__trust:not(#sdr-suezy-scope) {
	transition: height 0.35s ease, padding 0.35s ease;
}

/* Hidden once folded, so nothing in it can be tabbed to or read out. The wide layout gives
 * the header a min-height, which would otherwise hold it open. */
.sdr-suezy--header-hidden:not(#sdr-suezy-scope) .sdr-suezy__header,
.sdr-suezy--header-hidden:not(#sdr-suezy-scope) .sdr-suezy__trust {
	min-height: 0;
	overflow: hidden;
	visibility: hidden;
	padding-block: 0;
	border-bottom-width: 0;
	transition: height 0.35s ease, padding 0.35s ease, visibility 0s linear 0.35s;
}

/* Matches the gate's state selector, which takes the body's flex away; source order wins. */
.sdr-suezy:not(#sdr-suezy-scope).sdr-suezy--header-pinned .sdr-suezy__body {
	flex: 1 0 auto;
}

.sdr-suezy__header-toggle:not(#sdr-suezy-scope) {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	min-height: 44px;
	margin: 0;
	padding: 0 56px;
	border: none;
	border-bottom: 1px solid var(--sdr-border);
	border-radius: 0;
	background: var(--sdr-surface);
	color: var(--sdr-text-secondary);
	font: inherit;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	line-height: 1;
	text-transform: uppercase;
	appearance: none;
	cursor: pointer;
	transition: color 0.18s ease, background 0.18s ease;
}

.sdr-suezy__header-toggle:not(#sdr-suezy-scope):hover {
	background: var(--sdr-surface-sunken);
	color: var(--sdr-primary);
}

.sdr-suezy__header-toggle:not(#sdr-suezy-scope):focus-visible {
	outline: 2px solid var(--sdr-primary);
	outline-offset: -4px;
}

.sdr-suezy__header-toggle-icon:not(#sdr-suezy-scope) {
	flex: none;
	transition: transform 0.35s ease;
}

.sdr-suezy--header-hidden:not(#sdr-suezy-scope) .sdr-suezy__header-toggle-icon {
	transform: rotate(180deg);
}

/* -------------------------------------------------------------------------- *
 * Full screen
 *
 * On a phone-sized screen a launched section covers the whole screen instead of sitting in
 * the page; assets/js/suezy-controls.js lifts it and adds the buttons. This follows the
 * screen rather than the section's width, and the section is itself the container, which a
 * container query cannot style -- so it is a media query. Keep its width in step with PHONE
 * in that file.
 * -------------------------------------------------------------------------- */

.sdr-suezy__screen-button:not(#sdr-suezy-scope) {
	display: none;
}

@media (max-width: 640px) {

	html.sdr-suezy-locked:not(#sdr-suezy-scope) {
		overflow: hidden;
	}

	.sdr-suezy__screen-button:not(#sdr-suezy-scope) {
		position: absolute;
		top: 10px;
		z-index: 2;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		margin: 0;
		padding: 0;
		border: none;
		border-radius: 999px;
		background: rgba(28, 23, 48, 0.56);
		color: #fff;
		appearance: none;
		cursor: pointer;
		transition: background 0.18s ease;
	}

	.sdr-suezy__screen-button:not(#sdr-suezy-scope)[hidden] {
		display: none;
	}

	.sdr-suezy__screen-button:not(#sdr-suezy-scope):hover {
		background: rgba(28, 23, 48, 0.8);
	}

	/* The purple focus ring would vanish against the photograph, so ring it in white first. */
	.sdr-suezy__screen-button:not(#sdr-suezy-scope):focus-visible {
		outline: none;
		box-shadow: 0 0 0 2px #fff, 0 0 0 5px var(--sdr-primary);
	}

	.sdr-suezy__screen-button--resume:not(#sdr-suezy-scope) {
		right: 10px;
	}

	.sdr-suezy__screen-button--exit:not(#sdr-suezy-scope) {
		top: calc(env(safe-area-inset-top, 0px) + 10px);
		left: 10px;
	}

	/* Three classes: two to match the width rule's doubled class, one to win it. */
	.sdr-suezy:not(#sdr-suezy-scope).sdr-suezy.sdr-suezy--fullscreen {
		position: fixed;
		inset: 0;

		/* The country selector's popup sits one above this; see .iti--detached-country-selector. */
		z-index: 100000;
		width: auto;
		max-width: none;
		margin: 0;
		background: var(--sdr-surface);
	}

	/* The min-height beats the one a folded header pins inline. */
	.sdr-suezy--fullscreen:not(#sdr-suezy-scope) .sdr-suezy__panel {
		height: 100%;
		min-height: 0 !important;
		border: none;
		border-radius: 0;
		box-shadow: none;
		animation: none;
	}

	/* A header folded in the page comes back here as the band; there is nothing to fold. */
	.sdr-suezy:not(#sdr-suezy-scope).sdr-suezy--fullscreen .sdr-suezy__header {
		height: auto !important;
		overflow: visible;
		visibility: visible;
		border-bottom-width: 1px;
	}

	.sdr-suezy--fullscreen:not(#sdr-suezy-scope) .sdr-suezy__header-toggle {
		display: none;
	}

	/* In the page with the header folded, the toggle bar is the top of the panel: sit in it. */
	.sdr-suezy--header-hidden:not(#sdr-suezy-scope) .sdr-suezy__screen-button--resume {
		top: 0;
		border-radius: 0;
		background: transparent;
		color: var(--sdr-text-secondary);
	}

	.sdr-suezy--header-hidden:not(#sdr-suezy-scope) .sdr-suezy__screen-button--resume:hover {
		background: var(--sdr-surface-sunken);
		color: var(--sdr-primary);
	}

	/* The header shrinks to a band of brand colour that names Suezy, leaving the screen to
	 * the transcript. A sliver of the photograph would only show part of a face. */
	.sdr-suezy--fullscreen:not(#sdr-suezy-scope) .sdr-suezy__intro,
	.sdr-suezy--fullscreen:not(#sdr-suezy-scope) .sdr-suezy__portrait-image,
	.sdr-suezy--fullscreen:not(#sdr-suezy-scope) .sdr-suezy__portrait-scrim {
		display: none;
	}

	/* The exit/resume buttons take this corner once launched full-screen. */
	.sdr-suezy--fullscreen:not(#sdr-suezy-scope) .sdr-suezy__demo-badge {
		display: none;
	}

	.sdr-suezy--fullscreen:not(#sdr-suezy-scope) .sdr-suezy__portrait {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: calc(env(safe-area-inset-top, 0px) + 64px);
		padding: calc(env(safe-area-inset-top, 0px) + 10px) 64px 10px;
		background: linear-gradient(135deg, var(--sdr-primary) 0%, var(--sdr-primary-active) 100%);
		aspect-ratio: auto;
	}

	.sdr-suezy--fullscreen:not(#sdr-suezy-scope) .sdr-suezy__portrait-caption {
		position: static;
		text-align: center;
	}

	.sdr-suezy--fullscreen:not(#sdr-suezy-scope) .sdr-suezy__brand-name {
		font-size: 20px;
	}

	.sdr-suezy--fullscreen:not(#sdr-suezy-scope) .sdr-suezy__brand-tagline {
		margin-top: 2px;
		font-size: 10px;
	}

	/* The gate holds the body at the entry state's height with an inline style and takes
	 * away its flex. Here the screen decides instead; both apply again once the section is
	 * back. The section class matches the gate's state selector, and source order wins. */
	.sdr-suezy:not(#sdr-suezy-scope).sdr-suezy--fullscreen .sdr-suezy__body {
		flex: 1 1 auto;
		height: auto !important;
		min-height: 0;
		padding-block: 16px;
	}

	.sdr-suezy--fullscreen:not(#sdr-suezy-scope) .sdr-suezy__footer {
		padding-top: 8px;
		padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
	}

	.sdr-suezy--fullscreen:not(#sdr-suezy-scope) .sdr-suezy__disclaimer {
		font-size: 12px;
		line-height: 1.4;
	}
}

/* -------------------------------------------------------------------------- *
 * Motion preferences
 * -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

	.sdr-suezy__panel:not(#sdr-suezy-scope),
	.sdr-suezy__cta-ring:not(#sdr-suezy-scope),
	.sdr-suezy__message:not(#sdr-suezy-scope),
	.sdr-suezy__typing-dot:not(#sdr-suezy-scope) {
		animation: none;
	}

	.sdr-suezy__panel:not(#sdr-suezy-scope) {
		box-shadow: 0 14px 34px rgba(28, 23, 48, 0.12);
	}

	.sdr-suezy__cta:not(#sdr-suezy-scope),
	.sdr-suezy__cta-icon:not(#sdr-suezy-scope),
	.sdr-suezy__control:not(#sdr-suezy-scope),
	.sdr-suezy__otp-cell:not(#sdr-suezy-scope),
	.sdr-suezy__header:not(#sdr-suezy-scope),
	.sdr-suezy__header-toggle:not(#sdr-suezy-scope),
	.sdr-suezy__header-toggle-icon:not(#sdr-suezy-scope),
	.sdr-suezy__otp-button:not(#sdr-suezy-scope),
	.sdr-suezy__screen-button:not(#sdr-suezy-scope),
	.sdr-suezy__trust:not(#sdr-suezy-scope),
	.sdr-suezy--header-hidden:not(#sdr-suezy-scope) .sdr-suezy__header,
	.sdr-suezy--header-hidden:not(#sdr-suezy-scope) .sdr-suezy__trust,
	.sdr-suezy__send:not(#sdr-suezy-scope),
	.sdr-suezy__send:not(#sdr-suezy-scope) svg,
	.sdr-suezy__topic:not(#sdr-suezy-scope),
	.sdr-suezy__topics-button:not(#sdr-suezy-scope),
	.sdr-suezy__restart:not(#sdr-suezy-scope) {
		transition: none;
	}

	.sdr-suezy__send:not(#sdr-suezy-scope):hover svg {
		transform: none;
	}
}