/* A quiet introduction that opens into a conversation. */
@font-face {
	font-family: "SF Pro Display";
	font-weight: 500;
	font-style: normal;
	font-display: swap;
	src: url("assets/fonts/SFProDisplay-Medium.woff2") format("woff2");
}

:root {
	color-scheme: light dark;
	--bg: #fff;
	--text: #1a1a1a;
	--muted: #6e6e6e;
	--bio: #858585;
	--card: #f5f5f5;
	--card-hover: #ededed;
	--line: #ebebeb;
	--focus: #858585;
	--hover-plasma: #1a3020;
	--hover-wetransfer: #3767ea;
	--hover-freenow: #fe2446;
	--ease: cubic-bezier(0.22, 1, 0.36, 1);
	--space: 32px;
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg: #080808;
		--text: #f4f4f4;
		--muted: #a0a0a0;
		--bio: #999;
		--card: #191919;
		--card-hover: #242424;
		--line: #252525;
		--focus: #808080;
		--hover-plasma: #fff;
		--hover-wetransfer: #a8beff;
		--hover-freenow: #ff8397;
	}
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; min-height: 100%; }
body {
	background: var(--bg);
	color: var(--text);
	font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
h1, h2, p { margin: 0; font: inherit; }
button, textarea { font: inherit; }
button, a, textarea { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; text-decoration: none; transition: color 180ms ease; }
button { cursor: pointer; }
button:disabled { cursor: default; }
button:focus-visible, a:focus-visible, .conversation:focus-visible {
	outline: 2px solid var(--text);
	outline-offset: 5px;
}

.page {
	min-height: 100vh;
	min-height: 100svh;
	display: grid;
	place-items: center;
	padding: 56px var(--space);
}
.experience { width: 100%; max-width: 728px; }
.intro { width: 100%; text-align: center; }
.contacts {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-bottom: 44px;
	font-size: 16px;
	line-height: 24px;
}
.contacts a:hover { color: var(--muted); }
.dot { color: var(--muted); }
.name, .about {
	font-size: 40px;
	line-height: 1.25;
	letter-spacing: -1.25px;
	text-wrap: balance;
}
.name { margin-bottom: 4px; }
.about { color: var(--bio); }
.about .link-plasma:hover { color: var(--hover-plasma); }
.about .link-wetransfer:hover { color: var(--hover-wetransfer); }
.about .link-freenow:hover { color: var(--hover-freenow); }

/* The arrival is one gesture, with a small overlap between its elements. */
.intro-pending .experience:not(:focus-within) :is(.contacts, .name, .about, .ask, .suggestions) { opacity: 0; }
.experience.is-entering .name { animation: arrive 760ms var(--ease) both; }
.experience.is-entering .about { animation: arrive 860ms var(--ease) 90ms both; }
.experience.is-entering .contacts { animation: settle 720ms ease 100ms both; }
.experience.is-entering .ask { animation: arrive 860ms var(--ease) 180ms both; }
.experience.is-entering .suggestions { animation: arrive-soft 720ms var(--ease) 340ms both; }
@keyframes arrive {
	from { opacity: 0; transform: translateY(18px); }
	to { opacity: 1; transform: translateY(0); }
}
@keyframes arrive-soft {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: translateY(0); }
}
@keyframes settle { from { opacity: 0; } to { opacity: 1; } }

.ask { position: relative; z-index: 2; width: 100%; max-width: 560px; margin: 40px auto 0; }
.dock { width: 100%; }
.composer {
	display: flex;
	align-items: flex-end;
	gap: 10px;
	padding: 7px 7px 7px 21px;
	border: 1px solid transparent;
	border-radius: 30px;
	background: var(--card);
	transition: border-color 220ms ease, background-color 220ms ease, box-shadow 220ms ease;
}
.composer:focus-within { border-color: var(--focus); box-shadow: 0 0 0 1px var(--focus); }
.composer-field {
	display: block;
	flex: 1;
	min-width: 0;
	height: 42px;
	max-height: calc(6 * 27px + 15px);
	margin: 0;
	padding: 7.5px 0;
	border: 0;
	border-radius: 0;
	outline: none;
	background: transparent;
	color: var(--text);
	line-height: 27px;
	resize: none;
	overflow-y: auto;
}
.composer-field::placeholder { color: var(--muted); opacity: 1; }
.composer-send {
	display: grid;
	place-items: center;
	flex: 0 0 42px;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--text);
	color: var(--bg);
	opacity: 1;
	transition: opacity 200ms ease, transform 300ms var(--ease);
}
.composer-send:disabled { opacity: 0.2; }
.composer-send:not(:disabled):hover { transform: scale(1.055); }
.composer-send:not(:disabled):active { transform: scale(0.93); }
.composer-hint {
	margin-top: 12px;
	color: var(--muted);
	font-size: 13px;
	line-height: 20px;
	text-align: center;
}
.suggestions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-top: 22px;
}
.suggestions button {
	min-height: 40px;
	padding: 8px 15px;
	border: 1px solid var(--line);
	border-radius: 22px;
	background: transparent;
	font-size: 14px;
	line-height: 22px;
	color: var(--muted);
	transition: color 180ms ease, background-color 180ms ease, transform 300ms var(--ease);
}
.suggestions button:hover { color: var(--text); background: var(--card); transform: translateY(-2px); }
.suggestions button:active { transform: translateY(0) scale(0.97); }

/* In a conversation, only the transcript scrolls. The composer has a home. */
body.is-chatting { overflow: hidden; }
body.is-chatting .page {
	position: fixed;
	top: var(--visual-viewport-top, 0px);
	left: 0;
	right: 0;
	height: 100vh;
	height: var(--visual-viewport-height, 100dvh);
	min-height: 0;
	padding: 0 var(--space);
}
.experience.is-chatting {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 0;
}
.chat-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-shrink: 0;
	gap: 20px;
	width: 100%;
	max-width: 560px;
	margin: 0 auto;
	padding: max(24px, env(safe-area-inset-top)) 0 20px;
	border-bottom: 1px solid var(--line);
}
.chat-title { font-size: 17px; line-height: 25px; letter-spacing: -0.25px; }
.chat-subtitle { color: var(--muted); font-size: 13px; line-height: 20px; }
.chat-reset {
	flex-shrink: 0;
	min-height: 44px;
	margin-right: -12px;
	padding: 8px 12px;
	border: 0;
	border-radius: 12px;
	background: transparent;
	color: var(--muted);
	font-size: 14px;
	transition: background-color 160ms ease, color 160ms ease;
}
.chat-reset:hover { color: var(--text); background: var(--card); }
.conversation {
	flex: 1;
	min-height: 0;
	width: 100%;
	overflow-y: auto;
	overscroll-behavior-y: contain;
	overflow-anchor: none;
	scrollbar-width: thin;
	scrollbar-gutter: stable both-edges;
	scrollbar-color: var(--line) transparent;
	scroll-padding-block: 28px;
	mask-image: linear-gradient(to bottom, transparent, #000 12px, #000 calc(100% - 12px), transparent);
}
.ask-thread {
	display: flex;
	flex-direction: column;
	gap: 36px;
	width: 100%;
	max-width: 560px;
	margin: 0 auto;
	padding: 32px 0 20px;
}
.turn { display: flex; flex-direction: column; gap: 26px; }
.msg { overflow-wrap: anywhere; }
.msg-user {
	align-self: flex-end;
	max-width: 85%;
	padding: 12px 18px;
	border-radius: 23px 23px 7px 23px;
	background: var(--card);
	white-space: pre-wrap;
}
.msg-bot { width: 100%; padding: 0 2px; }
.msg-author { display: block; margin-bottom: 9px; color: var(--muted); font-size: 13px; line-height: 20px; }
.reply-content { display: grid; }
.reply-body, .thinking { grid-area: 1 / 1; }
.reply-body { line-height: 1.65; white-space: pre-wrap; }
.reply-body a { text-decoration: underline; text-underline-offset: 3px; }
.is-error .reply-body { color: var(--muted); font-size: 15px; line-height: 1.5; }
.reply-retry {
	grid-row: 2;
	justify-self: start;
	min-height: 44px;
	margin: 8px 0 -8px -10px;
	padding: 8px 10px;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: var(--text);
	font: inherit;
	font-size: 14px;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.reply-retry:hover { background: var(--card); }
.reply-retry:disabled { opacity: 0.5; cursor: default; }
.thinking { display: flex; align-items: center; gap: 5px; height: 30px; color: var(--muted); }
.thinking i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; animation: thinking 1400ms ease-in-out infinite; }
.thinking i:nth-child(2) { animation-delay: 160ms; }
.thinking i:nth-child(3) { animation-delay: 320ms; }
@keyframes thinking { 0%, 70%, 100% { opacity: 0.3; transform: translateY(0); } 35% { opacity: 0.85; transform: translateY(-3px); } }
.experience.is-chatting .ask { flex-shrink: 0; margin-top: 0; padding: 20px 0 max(22px, env(safe-area-inset-bottom)); }
.experience.is-chatting .composer-hint { font-size: 12px; margin-top: 10px; }
.experience.is-chatting .composer-field { max-height: min(177px, max(42px, calc(var(--visual-viewport-height, 100dvh) - 230px))); }

.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (min-width: 1440px) { .intro { max-width: 680px; margin-inline: auto; } }
@media (max-width: 809.98px) {
	:root { --space: 24px; }
	body { font-size: 17px; }
	.page { padding-block: 36px; }
	.name, .about { font-size: 28px; line-height: 1.3; letter-spacing: -0.65px; }
	.contacts { margin-bottom: 32px; font-size: 15px; }
	.ask { margin-top: 32px; }
	.composer-field { font-size: 17px; }
	.composer-hint { font-size: 12px; }
	.suggestions { gap: 6px; margin-top: 18px; }
	.suggestions button { padding-inline: 13px; }
	.chat-header { padding-top: max(18px, env(safe-area-inset-top)); padding-bottom: 16px; }
	.ask-thread { padding-top: 24px; gap: 30px; }
	.turn { gap: 23px; }
	.msg-user { max-width: 90%; }
	.experience.is-chatting .ask { padding-top: 16px; padding-bottom: max(18px, env(safe-area-inset-bottom)); }
}
@media (pointer: coarse) { .experience.is-chatting .composer-hint { display: none; } }
@media (max-height: 500px) {
	.chat-header { padding-top: max(10px, env(safe-area-inset-top)); padding-bottom: 8px; }
	.experience.is-chatting .composer-hint { display: none; }
	.ask-thread { padding-top: 16px; }
	.experience.is-chatting .ask { padding-top: 10px; padding-bottom: max(10px, env(safe-area-inset-bottom)); }
}
@media (max-width: 359px) {
	:root { --space: 20px; }
	.name, .about { font-size: 26px; }
	.suggestions { gap: 5px; }
	.suggestions button { font-size: 13px; padding-inline: 11px; }
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
	.intro-pending .experience :is(.contacts, .name, .about, .ask, .suggestions) { opacity: 1 !important; }
	.thinking i { opacity: 0.6; }
}