/* Section: simulator, the live chat with the demo assistant. Looks like a messaging app; no messaging brand's colours or logo. */
.s-simulator { background: var(--wp--preset--color--surface-alt); }
.s-simulator__grid { display: grid; gap: var(--wp--preset--spacing--30); align-items: start; }
@media (min-width: 1000px) {
	.s-simulator__grid { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: var(--wp--preset--spacing--40); }
}
.sim { min-inline-size: 0; }
.sim__label {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0 0 var(--wp--preset--spacing--10);
	padding: 0.2rem 0.8rem;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--small);
	font-weight: var(--wp--custom--weight--strong);
}
.sim__app {
	display: flex;
	flex-direction: column;
	block-size: min(640px, 82vh);
	min-block-size: 520px;
	border-radius: var(--wp--custom--radius--large);
	overflow: hidden;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	box-shadow: var(--wp--custom--shadow--medium);
}
/* On a phone the chat takes the height of its opening (welcome, every chip whole), up to a cap, then scrolls. */
@media (max-width: 599px) {
	.sim__app { block-size: auto; min-block-size: 0; max-block-size: 760px; }
	.sim__log { flex: 1 1 auto; min-block-size: 0; }
}
.sim__head {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem 1rem;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary-contrast);
}
.sim__avatar { display: grid; place-items: center; inline-size: 42px; block-size: 42px; border-radius: 50%; background: var(--wp--preset--color--accent); color: var(--wp--preset--color--accent-contrast); flex: none; }
.sim__who { display: flex; flex-direction: column; line-height: 1.35; min-inline-size: 0; }
.sim__who strong { font-size: var(--wp--preset--font-size--base); }
.sim__status { font-size: var(--wp--preset--font-size--small); color: rgba(255, 255, 255, 0.88); }
.sim__status::before { content: ""; display: inline-block; inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--wp--preset--color--accent); margin-inline-end: 6px; }
.sim__log {
	flex: 1;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: var(--wp--preset--spacing--20);
	background:
		radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--wp--preset--color--primary) 10%, transparent) 1px, transparent 0) 0 0 / 18px 18px,
		var(--wp--preset--color--surface-alt);
	overscroll-behavior: contain;
}
.sim__log:focus-visible { outline-offset: -3px; }
.sim__day { align-self: center; margin: 0; padding: 0.1rem 0.75rem; border-radius: var(--wp--custom--radius--pill); background: var(--wp--preset--color--surface); color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--small); }
.sim__msg {
	max-inline-size: min(85%, 34rem);
	padding: 0.5rem 0.8rem;
	border-radius: 16px;
	box-shadow: 0 1px 1px rgba(4, 22, 16, 0.08);
	overflow-wrap: anywhere;
	line-height: 1.65;
}
.sim__msg p { margin: 0; white-space: pre-wrap; }
.sim__msg--in { align-self: flex-start; background: var(--wp--preset--color--surface); border-start-start-radius: 4px; }
.sim__msg--out { align-self: flex-end; background: color-mix(in srgb, var(--wp--preset--color--accent) 24%, var(--wp--preset--color--surface)); border-start-end-radius: 4px; }
.sim__msg img { display: block; max-inline-size: 220px; max-block-size: 220px; border-radius: 10px; margin-block-end: 0.3rem; }
.sim__msg audio { display: block; max-inline-size: 240px; block-size: 40px; }
.sim__sys { align-self: center; margin: 0; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted); text-align: center; }
.sim__typing { display: inline-flex; gap: 5px; padding-block: 0.85rem; }
.sim__typing i { inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--wp--preset--color--muted); animation: sim-dot 1s infinite ease-in-out; }
.sim__typing i:nth-child(2) { animation-delay: 0.15s; }
.sim__typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes sim-dot { 0%, 80%, 100% { opacity: 0.3; } 40% { opacity: 1; } }
/* the chips sit in the chat, under the welcome bubble, and wrap into rows */
.sim__chips { display: flex; flex-direction: column; gap: 0.5rem; margin-block: 0.25rem 0.5rem; }
.sim__row { display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; }
.sim__row-label { flex-basis: 100%; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--ink); font-weight: var(--wp--custom--weight--strong); }
.sim__chip {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	min-block-size: 44px;
	max-inline-size: 100%;
	padding: 0.35rem 0.95rem;
	text-align: start;
	text-wrap: balance;
	line-height: 1.4;
	border-radius: var(--wp--custom--radius--pill);
	border: 1px solid var(--wp--preset--color--primary);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--small);
	font-weight: var(--wp--custom--weight--strong);
	cursor: pointer;
}
.sim__chip:hover { background: var(--wp--preset--color--primary); color: var(--wp--preset--color--primary-contrast); }
.sim__chip--img { padding-inline-start: 0.35rem; }
/* a document's thumbnail shows its top (the hospital's name), framed so a white page stays visible */
.sim__chip img { inline-size: 32px; block-size: 32px; flex: none; border-radius: var(--wp--custom--radius--small); object-fit: cover; object-position: 50% 0; border: 1px solid var(--wp--preset--color--muted); background: var(--wp--preset--color--surface); }
.sim__bar { display: flex; align-items: center; gap: 0.4rem; padding: 0.6rem var(--wp--preset--spacing--20) 0.8rem; margin: 0; }
.sim__input {
	flex: 1;
	min-inline-size: 0;
	min-block-size: 44px;
	padding: 0.5rem 1rem;
	border-radius: var(--wp--custom--radius--pill);
	border: 1px solid var(--wp--preset--color--muted);
	background: var(--wp--preset--color--surface);
}
.sim__input:focus-visible { border-color: var(--wp--preset--color--primary); }
.sim__icon-btn, .sim__send {
	display: inline-grid;
	place-items: center;
	inline-size: 44px;
	block-size: 44px;
	flex: none;
	padding: 0;
	border-radius: 50%;
	border: 0;
	cursor: pointer;
}
.sim__icon-btn { background: transparent; color: var(--wp--preset--color--muted); }
.sim__icon-btn:hover { background: var(--wp--preset--color--surface-alt); color: var(--wp--preset--color--primary); }
.sim__icon-btn[aria-pressed="true"] { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--accent-contrast); animation: sim-rec 1.2s infinite ease-in-out; }
@keyframes sim-rec { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--wp--preset--color--accent) 30%, transparent); } }
.sim__send { background: var(--wp--preset--color--primary); color: var(--wp--preset--color--primary-contrast); }
.sim__send:hover { background: var(--wp--preset--color--ink); }
.is-busy .sim__send, .is-busy .sim__chip { opacity: 0.6; pointer-events: none; }
.sim__fallback { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wp--preset--spacing--20); padding: var(--wp--preset--spacing--20); border-block-start: 1px solid var(--wp--preset--color--line); background: var(--wp--preset--color--surface); }
.sim__fallback[hidden] { display: none; }
.sim__fallback p { margin: 0; flex: 1 1 16rem; }
.is-closed .sim__bar, .is-closed .sim__chips, .is-capped .sim__bar, .is-capped .sim__chips { display: none; }
.sim__note { margin: var(--wp--preset--spacing--10) 0 0; font-size: 0.9375rem; color: var(--wp--preset--color--ink); line-height: 1.6; }
.sim__sys { font-size: 0.9375rem; color: var(--wp--preset--color--ink); background: var(--wp--preset--color--surface); padding: 0.3rem 0.8rem; border-radius: var(--wp--custom--radius--medium); }
/* the simulator and the clinics band share one pale background: one gap between them, not two */
.s-simulator { padding-block-end: var(--wp--preset--spacing--50); }
.s-simulator__aside { display: flex; flex-direction: column; align-items: flex-start; gap: var(--wp--preset--spacing--10); }
.s-simulator__aside-title { font-size: var(--wp--preset--font-size--medium); margin: 0; }
.s-simulator__aside-text { color: var(--wp--preset--color--muted); }
.s-simulator__qr { display: none; }
@media (min-width: 1000px) and (hover: hover) {
	.s-simulator__qr { display: block; margin-block-start: var(--wp--preset--spacing--10); }
}
.s-simulator__qr-img.is-svg, .s-simulator__qr-img { inline-size: 168px; block-size: 168px; }