/* "Chat with us" on sprizzy.com. Script: js/site-chat.js. Design: docs/design/live-chat-redesign/03-plan.md.
   The site's own tokens (accent #0042ff, ink #1a1919, rule #e2e0dd, Founders Grotesk). Everything is prefixed
   spc- and sized in px so the theme's rem and Materialize rules cannot reach it. Motion: open 240ms M3
   emphasized-decelerate from the launcher's corner, close 150ms emphasized-accelerate, bubbles 180ms. */

.spc-launch, .spc-panel {
	--spc-accent: #0042ff;
	--spc-accent-dark: #032fae;
	--spc-accent-soft: #eef3ff;
	--spc-ink: #1a1919;
	--spc-meta: #6b6966;
	--spc-rule: #e2e0dd;
	--spc-paper: #ffffff;
	--spc-wash: #f6f5f3;
	--spc-good: #1f9d55;
	--spc-bad: #d33a2c;
	--spc-font: "Founders Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--spc-in: cubic-bezier(.05, .7, .1, 1);
	--spc-out: cubic-bezier(.3, 0, .8, .15);
	--spc-shadow: 0 0 0 1px rgb(26 25 25 / .06), 0 2px 4px hsl(225 40% 20% / .06), 0 12px 24px hsl(225 40% 20% / .08), 0 32px 64px hsl(225 40% 20% / .14);
}

/* ---- launcher ---- */

.spc-launch {
	position: fixed;
	right: 20px;
	bottom: calc(20px + env(safe-area-inset-bottom));
	z-index: 2147483000;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 52px;
	padding: 0 22px 0 16px;
	border: 0;
	border-radius: 26px;
	background: var(--spc-accent);
	color: #fff;
	font: 500 17px/1 var(--spc-font);
	letter-spacing: .01em;
	box-shadow: 0 1px 2px hsl(225 80% 20% / .2), 0 8px 24px hsl(225 90% 40% / .28);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
	transition: transform .1s ease-out, box-shadow .2s ease, background-color .2s ease;
}
@media (hover: hover) {
	.spc-launch:hover { background: var(--spc-accent-dark); box-shadow: 0 1px 2px hsl(225 80% 20% / .25), 0 12px 32px hsl(225 90% 40% / .34); }
}
.spc-launch:active { transform: scale(.97); }
.spc-launch:focus-visible { outline: none; box-shadow: 0 0 0 3px #fff, 0 0 0 6px rgb(0 66 255 / .45); }

.spc-launch__label {
	display: inline-block; max-width: 140px; overflow: hidden; white-space: nowrap;
	transition: max-width .24s var(--spc-in), opacity .15s ease;
}
/* Open: the pill folds into a round close button (label out, padding even). */
.spc-launch.is-open { padding: 0 15px; gap: 0; }
.spc-launch.is-open .spc-launch__label { max-width: 0; opacity: 0; }
.spc-launch { transition: transform .1s ease-out, box-shadow .2s ease, background-color .2s ease, padding .24s var(--spc-in), gap .24s var(--spc-in); }

.spc-launch__icons { position: relative; width: 22px; height: 22px; flex: none; }
.spc-ico {
	position: absolute; inset: 0; width: 22px; height: 22px; fill: currentColor;
	transition: transform .2s var(--spc-in), opacity .2s ease, filter .2s ease;
}
.spc-ico--close { opacity: 0; transform: rotate(-45deg) scale(.8); filter: blur(2px); }
.spc-launch.is-open .spc-ico--chat { opacity: 0; transform: rotate(45deg) scale(.8); filter: blur(2px); }
.spc-launch.is-open .spc-ico--close { opacity: 1; transform: none; filter: none; }

.spc-badge {
	position: absolute; top: -4px; right: -4px;
	min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
	background: var(--spc-bad); color: #fff; box-shadow: 0 0 0 2px #fff;
	font: 600 12px/20px var(--spc-font); text-align: center; font-variant-numeric: tabular-nums;
	opacity: 0; transform: scale(.5); pointer-events: none;
	transition: opacity .15s ease, transform .2s cubic-bezier(.34, 1.56, .64, 1);
}
.spc-launch.has-unread .spc-badge { opacity: 1; transform: none; }

/* ---- panel ---- */

.spc-panel {
	position: fixed;
	right: 20px;
	bottom: calc(88px + env(safe-area-inset-bottom));
	z-index: 2147483001;
	width: 384px;
	height: min(640px, calc(100vh - 128px));
	display: flex;
	flex-direction: column;
	background: var(--spc-paper);
	color: var(--spc-ink);
	border-radius: 20px;
	box-shadow: var(--spc-shadow);
	font: 400 16px/1.45 var(--spc-font);
	overflow: hidden;
	transform-origin: bottom right;
	opacity: 0;
	transform: translateY(8px) scale(.95);
	visibility: hidden;
	pointer-events: none;
	transition: opacity .15s var(--spc-out), transform .15s var(--spc-out), visibility 0s linear .15s;
}
.spc-panel[hidden] { display: none; }
.spc-panel[data-state="open"] {
	opacity: 1;
	transform: none;
	visibility: visible;
	pointer-events: auto;
	transition: opacity .24s var(--spc-in), transform .24s var(--spc-in), visibility 0s;
}
.spc-panel * { box-sizing: border-box; }

.spc-head {
	flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px;
	padding: 14px 12px 14px 18px; border-bottom: 1px solid var(--spc-rule); background: var(--spc-paper);
	position: relative;
}
.spc-head__id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.spc-mark {
	position: relative; flex: none; width: 36px; height: 36px; border-radius: 12px;
	display: grid; place-items: center; color: #fff;
	background: linear-gradient(160deg, #2a62ff, var(--spc-accent) 60%, #0036d6);
	box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14), 0 2px 6px hsl(225 90% 40% / .25);
}
.spc-mark svg { width: 18px; height: 18px; fill: currentColor; }
.spc-dot {
	position: absolute; right: -3px; bottom: -3px; width: 12px; height: 12px; border-radius: 50%;
	background: #c9c6c1; box-shadow: 0 0 0 2px #fff; transition: background-color .3s ease;
}
.spc-dot.is-on { background: var(--spc-good); }
.spc-dot.is-away { background: #c9c6c1; }
.spc-title { margin: 0; font: 600 18px/1.15 var(--spc-font); color: var(--spc-ink); letter-spacing: 0; outline: none; }
.spc-sub { margin: 3px 0 0; font-size: 14px; line-height: 1.2; color: var(--spc-meta); }
.spc-head__actions { display: flex; gap: 2px; position: relative; }
.spc-iconbtn {
	width: 34px; height: 34px; border: 0; border-radius: 10px; background: transparent; color: var(--spc-meta);
	display: grid; place-items: center; cursor: pointer; transition: background-color .15s ease, color .15s ease, transform .1s ease-out;
}
.spc-iconbtn svg { width: 20px; height: 20px; fill: currentColor; }
@media (hover: hover) { .spc-iconbtn:hover { background: var(--spc-wash); color: var(--spc-ink); } }
.spc-iconbtn:active { transform: scale(.94); }
.spc-iconbtn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgb(0 66 255 / .35); }

.spc-menu {
	position: absolute; top: 40px; right: 0; z-index: 2; min-width: 250px; padding: 6px;
	background: var(--spc-paper); border-radius: 12px; box-shadow: var(--spc-shadow);
	animation: spcMenu .14s var(--spc-in);
}
.spc-menu[hidden] { display: none; }
.spc-menu button, .spc-menu a {
	display: block; width: 100%; padding: 10px 12px; border: 0; border-radius: 8px; background: none;
	font: 400 15px/1.2 var(--spc-font); color: var(--spc-ink); text-align: left; text-decoration: none; cursor: pointer;
}
.spc-menu button:hover, .spc-menu a:hover, .spc-menu button:focus-visible, .spc-menu a:focus-visible { background: var(--spc-wash); outline: none; }
@keyframes spcMenu { from { opacity: 0; transform: translateY(-4px) scale(.98); } }

/* ---- thread ---- */

.spc-log {
	flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
	display: flex; flex-direction: column; padding: 18px 16px 8px;
	background: linear-gradient(180deg, var(--spc-paper), var(--spc-wash) 140%);
}
.spc-msg { max-width: 82%; display: flex; flex-direction: column; margin-top: 12px; }
.spc-msg:first-child { margin-top: 0; }
.spc-msg.is-follow { margin-top: 3px; }
.spc-msg--you { align-self: flex-end; align-items: flex-end; }
.spc-msg--us { align-self: flex-start; align-items: flex-start; }
.spc-msg__body {
	padding: 10px 14px; border-radius: 18px; white-space: pre-wrap; overflow-wrap: anywhere;
	font-size: 16px; line-height: 1.42;
}
.spc-msg--you .spc-msg__body { background: var(--spc-accent); color: #fff; border-bottom-right-radius: 6px; }
.spc-msg--us .spc-msg__body { background: var(--spc-paper); color: var(--spc-ink); border-bottom-left-radius: 6px; box-shadow: 0 0 0 1px var(--spc-rule), 0 1px 2px rgb(26 25 25 / .04); }
.spc-msg--you.has-next .spc-msg__body { border-bottom-right-radius: 18px; border-top-right-radius: 18px; }
.spc-msg--you.is-follow .spc-msg__body { border-top-right-radius: 6px; }
.spc-msg--us.has-next .spc-msg__body { border-bottom-left-radius: 18px; }
.spc-msg--us.is-follow .spc-msg__body { border-top-left-radius: 6px; }
.spc-meta { margin: 5px 4px 0; font-size: 12px; line-height: 1.2; color: var(--spc-meta); font-variant-numeric: tabular-nums; }

.spc-msg { transition: opacity .18s ease-out, transform .18s ease-out; }
.spc-msg.is-entering { opacity: 0; transform: translateY(6px) scale(.98); }
.spc-msg--us.is-entering { transform-origin: bottom left; }
.spc-msg--you.is-pending .spc-msg__body { opacity: .6; }
.spc-msg.is-failed .spc-msg__body { opacity: 1; box-shadow: 0 0 0 1px var(--spc-bad); }
.spc-msg.is-failed .spc-meta { color: var(--spc-bad); }
.spc-retry { border: 0; background: none; padding: 0; font: 600 12px/1.2 var(--spc-font); color: var(--spc-accent); text-decoration: underline; cursor: pointer; }

.spc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.spc-chip {
	padding: 9px 14px; border: 1px solid #cfd9ff; border-radius: 999px; background: var(--spc-paper);
	font: 500 15px/1.15 var(--spc-font); color: var(--spc-accent); cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, transform .1s ease-out;
	animation: spcChip .24s var(--spc-in) both;
}
.spc-chip:nth-child(2) { animation-delay: .04s; }
.spc-chip:nth-child(3) { animation-delay: .08s; }
.spc-chip:nth-child(4) { animation-delay: .12s; }
@media (hover: hover) { .spc-chip:hover { background: var(--spc-accent-soft); border-color: var(--spc-accent); } }
.spc-chip:active { transform: scale(.97); }
.spc-chip:focus-visible { outline: none; box-shadow: 0 0 0 3px rgb(0 66 255 / .35); }
@keyframes spcChip { from { opacity: 0; transform: translateY(4px); } }

.spc-typing {
	align-self: flex-start; display: inline-flex; gap: 4px; margin-top: 12px; padding: 13px 14px;
	border-radius: 18px; border-bottom-left-radius: 6px; background: var(--spc-paper);
	box-shadow: 0 0 0 1px var(--spc-rule);
	animation: spcChip .18s ease-out;
}
.spc-typing span { width: 7px; height: 7px; border-radius: 50%; background: #9b9893; animation: spcDots 1.2s ease-in-out infinite; }
.spc-typing span:nth-child(2) { animation-delay: .15s; }
.spc-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes spcDots { 0%, 60%, 100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-3px); opacity: 1; } }

.spc-card {
	align-self: stretch; margin-top: 14px; padding: 12px; border-radius: 14px;
	background: var(--spc-paper); box-shadow: 0 0 0 1px var(--spc-rule); animation: spcChip .24s var(--spc-in);
}
.spc-card__label { display: block; margin: 0 0 8px; font-size: 14px; color: var(--spc-ink); }
.spc-card__row { display: flex; gap: 8px; }
.spc-card__btn {
	flex: none; padding: 0 16px; border: 0; border-radius: 10px; background: var(--spc-ink); color: #fff;
	font: 500 15px/1 var(--spc-font); cursor: pointer; transition: transform .1s ease-out, background-color .15s ease;
}
.spc-card__btn:active { transform: scale(.97); }
.spc-card--account { margin: 0 0 14px; }
.spc-card__btn--block {
	display: block; width: 100%; height: 44px; line-height: 44px; margin-top: 4px; text-align: center; text-decoration: none;
	background: var(--spc-accent); color: #fff !important; border-radius: 12px;
}
@media (hover: hover) { .spc-card__btn--block:hover { background: var(--spc-accent-dark); } }
.spc-card__hint { margin: 8px 0 0; font-size: 13px; color: var(--spc-meta); text-align: center; }
.spc-note { align-self: center; margin: 12px 0 0; font-size: 13px; color: var(--spc-meta); text-align: center; }

.spc-status { flex: none; margin: 0; padding: 0 18px; font-size: 14px; line-height: 1.3; color: var(--spc-meta); }
.spc-status:not(:empty) { padding: 8px 18px 0; }

/* ---- composer ---- */

.spc-compose { flex: none; padding: 10px 12px 12px; background: var(--spc-paper); }
.spc-box {
	display: flex; align-items: flex-end; gap: 8px; padding: 6px 6px 6px 14px;
	border: 1px solid var(--spc-rule); border-radius: 16px; background: var(--spc-paper);
	transition: border-color .15s ease, box-shadow .15s ease;
}
.spc-box:focus-within { border-color: var(--spc-accent); box-shadow: 0 0 0 3px rgb(0 66 255 / .14); }
/* 16px keeps iOS Safari from zooming the page on focus. */
.spc-input, .spc-field {
	font: 400 16px/1.4 var(--spc-font); color: var(--spc-ink); background: transparent;
	margin: 0 !important; box-shadow: none !important; outline: none;
}
.spc-input {
	flex: 1; min-height: 36px; max-height: 120px; padding: 7px 0 !important; border: 0 !important; resize: none; height: 36px;
}
.spc-input::placeholder, .spc-field::placeholder { color: #9b9893; }
.spc-send {
	position: relative; flex: none; width: 36px; height: 36px; border: 0; border-radius: 12px;
	background: var(--spc-accent); color: #fff; display: grid; place-items: center; cursor: pointer;
	transition: background-color .15s ease, opacity .15s ease, transform .1s ease-out;
}
.spc-send svg { width: 18px; height: 18px; fill: currentColor; transition: opacity .15s ease; }
.spc-send:disabled { background: #e8e6e3; color: #a8a5a0; cursor: default; }
.spc-send:not(:disabled):active { transform: scale(.94); }
.spc-send:focus-visible { outline: none; box-shadow: 0 0 0 3px rgb(0 66 255 / .35); }
.spc-spin {
	position: absolute; width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgb(255 255 255 / .4);
	border-top-color: #fff; opacity: 0; animation: spcSpin .7s linear infinite;
}
.spc-send.is-sending svg { opacity: 0; }
.spc-send.is-sending .spc-spin { opacity: 1; }
.spc-send.is-sending:disabled { background: var(--spc-accent); }
@keyframes spcSpin { to { transform: rotate(360deg); } }

.spc-email { margin-bottom: 8px; }
.spc-email[hidden] { display: none; }
.spc-field {
	display: block; width: 100%; height: 44px; padding: 0 14px !important;
	border: 1px solid var(--spc-rule) !important; border-radius: 12px; background: var(--spc-paper);
	transition: border-color .15s ease, box-shadow .15s ease;
}
.spc-field:focus { border-color: var(--spc-accent) !important; box-shadow: 0 0 0 3px rgb(0 66 255 / .14) !important; }
.spc-card .spc-field { height: 40px; }
.spc-turnstile:not(:empty) { margin-top: 8px; }
.spc-error { margin-top: 8px; font-size: 14px; color: var(--spc-bad); }
.spc-error[hidden] { display: none; }

.spc-sr, .spc-trap {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---- phones: a round button, and the chat as a sheet that follows the visual viewport ---- */

html.spc-lock, html.spc-lock body { overflow: hidden; }

@media (max-width: 600px) {
	.spc-launch { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); width: 56px; height: 56px; padding: 0; justify-content: center; border-radius: 50%; }
	.spc-launch__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.spc-launch.is-open { opacity: 0; pointer-events: none; }
	.spc-panel {
		left: 0; right: 0; bottom: var(--spc-kb, 0px); width: auto;
		height: min(88dvh, var(--spc-vh, 88dvh)); max-height: var(--spc-vh, 100dvh);
		border-radius: 20px 20px 0 0;
		transform-origin: bottom center;
		transform: translateY(100%);
		opacity: 1;
		transition: transform .25s var(--spc-out), visibility 0s linear .25s;
		padding-bottom: env(safe-area-inset-bottom);
	}
	.spc-panel[data-state="open"] { transform: none; transition: transform .5s cubic-bezier(.32, .72, 0, 1), visibility 0s; }
}

@media (prefers-reduced-motion: reduce) {
	.spc-panel, .spc-panel[data-state="open"] { transition: opacity .12s linear, visibility 0s; transform: none; }
	.spc-msg, .spc-ico, .spc-badge, .spc-launch { transition: none; }
	.spc-chip, .spc-typing, .spc-card, .spc-menu { animation: none; }
	.spc-typing span { animation: none; opacity: .7; }
}

@media print { .spc-launch, .spc-panel { display: none !important; } }