/* =============================================================================
   Mr. Orange chat — the teaser sticker and the chat window it opens.

   Styles _partials/chat.html. Placeholder chat: the window is real, the reply is
   not (there is no bot yet — see the partial and CLAUDE.md).

   The teaser is drawn on both the home and Our Work frames, so both breakpoints
   live in this one file rather than in each page's responsive block. The 767px
   cut is the site-wide one.
   ========================================================================== */

/* --- Teaser sticker ------------------------------------------------------- */
/* A fixed button, bottom-right. Desktop shows the greeting bubble above the
   avatar (Figma); mobile shows the avatar alone in a cream disc (node 2571:2156). */
.chat-teaser {
	position: fixed;
	right: var(--space-8);
	bottom: 30px;
	z-index: var(--z-chat);
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0;
	background: none;
	border: none;
	cursor: pointer;
	transition:
		opacity 0.3s ease,
		visibility 0.3s ease;
}

/* Faded out while the footer is on screen (toggled from chat.js), so the fixed
   sticker never covers the footer's social icons. visibility + pointer-events
   take it out of the tab order and click target while hidden. */
.chat-teaser--over-footer {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	.chat-teaser {
		transition: none;
	}
}

/* The avatar sits ABOVE the bubble and overlaps its top by ~10px (Figma). */
.chat-teaser__avatar {
	width: 64px;
	height: auto;
	margin-bottom: -10px;
	z-index: 1;
}

.chat-teaser__bubble {
	margin: 0;
	max-width: 230px;
	padding: 14px 18px;
	background: var(--color-sand-pale);
	color: var(--color-carbon);
	font-family: var(--font-sans);
	font-size: var(--text-md);
	line-height: 1.35;
	text-align: left;
	border-radius: 15px;
}

/* --- Chat window ---------------------------------------------------------- */
/* Desktop: a floating panel bottom-right. Mobile rules below make it full-screen
   (Figma node 2451:366). */
.chat-window {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: var(--z-modal);
	display: flex;
	flex-direction: column;
	width: 380px;
	max-width: calc(100vw - 32px);
	height: 600px;
	max-height: calc(100dvh - 48px);
	overflow: hidden;
	background: var(--color-white);
	border-radius: var(--radius-chat);
	box-shadow: 0 24px 64px color-mix(in srgb, var(--color-black) 30%, transparent);
}

.chat-window[hidden] {
	display: none;
}

.chat-window__bar {
	flex: 0 0 74px;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 0 20px;
	background: linear-gradient(
		180deg,
		var(--color-orange),
		var(--color-orange-deep)
	);
}

.chat-window__bar-avatar {
	width: 46px;
	height: auto;
}

.chat-window__title {
	font-family: var(--font-sans);
	font-weight: 400;
	font-size: var(--text-lg);
	color: var(--color-black);
}

.chat-window__close {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	background: none;
	border: none;
	color: var(--color-black);
	cursor: pointer;
}

.chat-window__body {
	flex: 1 1 auto;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 24px 20px;
}

.chat-window__msg {
	display: flex;
	align-items: flex-end;
	gap: 10px;
	max-width: 90%;
}

.chat-window__msg--bot {
	align-self: flex-start;
}

.chat-window__msg--user {
	align-self: flex-end;
}

.chat-window__msg-avatar {
	flex: none;
	width: 47px;
	height: auto;
}

.chat-window__bubble {
	margin: 0;
	max-width: 225px;
	padding: 13px 21px 17px 26px;
	background: var(--color-cream);
	color: var(--color-black);
	font: var(--body-s);
	border-radius: var(--radius-chat-bubble);
	/* Replies carry email addresses and the odd long token with no natural
	   break; without this they run out of the bubble. */
	overflow-wrap: anywhere;
}

/* An email address in a reply is a mailto link (chat.js linkifies it once the
   stream ends). Underlined so it reads as tappable inside a text bubble. */
.chat-window__bubble a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* The pill sits 29px from each side and 27px from the bottom of the window
   (Figma 1735:154 measures it at x=29, ending 27px above the frame edge).
   env() on top of the bottom inset so an iPhone's home indicator does not sit
   over the send disc. */
.chat-window__inputbar {
	flex: 0 0 auto;
	padding: 12px 29px calc(27px + env(safe-area-inset-bottom));
}

.chat-window__field {
	display: flex;
	align-items: center;
	gap: 10px;
	/* 14 top / 16 bottom / 18 left from Figma, which is what gives the pill its
	   50px height. The right side is 8 rather than Figma's 56: there the send
	   disc is drawn overlapping the pill, here it is a flex child inside it, so
	   the space it needs comes from the element rather than from padding. */
	padding: 14px 8px 16px 18px;
	background: var(--color-cream);
	border: 1px solid var(--color-sand-soft);
	border-radius: var(--radius-pill);
}

.chat-window__spark {
	flex: none;
	display: inline-flex;
	color: var(--color-black);
}

.chat-window__input {
	flex: 1 1 auto;
	min-width: 0;
	border: none;
	background: none;
	outline: none;
	font: var(--body-s);
	color: var(--color-black);
}

/* The send disc, Figma node 2484:591: an orange→deep-orange vertical gradient
   with the cream send mark. currentColor carries the cream to the mark's fill. */
.chat-window__send {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 31px;
	height: 31px;
	padding: 0;
	background: linear-gradient(
		180deg,
		var(--color-orange) 39%,
		var(--color-orange-deep)
	);
	color: var(--color-cream);
	border: none;
	border-radius: 50%;
	cursor: pointer;
}

.chat-window__send:hover {
	filter: brightness(1.05);
}

@media (max-width: 767px) {
	/* Teaser: the 56px avatar disc alone (Figma node 2571:2156), placed at the
	   hero's lower-right rather than the screen corner. The frame (node 2571:197,
	   392x844) sits it 16px from the right and its bottom ~215px up from the
	   viewport bottom, so it rests just below the hero buttons, above the marquee. */
	.chat-teaser {
		right: var(--space-4);
		bottom: 215px;
		width: 56px;
		height: 56px;
		align-items: stretch;
		background: var(--color-cream);
		border-radius: 50%;
		box-shadow: 0 6px 20px color-mix(in srgb, var(--color-black) 18%, transparent);
	}
	.chat-teaser__bubble {
		display: none;
	}
	.chat-teaser__avatar {
		width: 100%;
		height: 100%;
		margin: 0;
		object-fit: contain;
	}

	/* Window: full-screen. */
	.chat-window {
		inset: 0;
		width: 100%;
		max-width: none;
		height: 100dvh;
		max-height: none;
		border-radius: 0;
		box-shadow: none;
	}
}


/* ==== Chat: live states ====================================================
   Everything below exists because the window now talks to an agent. The
   placeholder needed none of it: nothing was ever pending, nothing failed, and
   nothing came back with a link.
   ========================================================================= */

/* While a reply is in flight. The field and the send disc disable themselves,
   so this only has to make that legible rather than decorative. */
.chat-window.is-sending .chat-window__field {
	opacity: 0.6;
}

.chat-window__typing {
	align-self: flex-start;
	margin: 0;
	padding: 0 4px;
	color: var(--color-carbon);
	font: var(--body-s);
	font-style: italic;
}

/* An error is not a message from Mr. Orange, so it does not get his bubble or
   his avatar — it reads as the interface speaking, which is what it is. */
.chat-window__error {
	margin: 0;
	padding: 10px 14px;
	background: var(--color-cream);
	border-left: 3px solid var(--color-orange);
	border-radius: var(--radius-sm);
	color: var(--color-black);
	font: var(--body-s);
}

/* Cards for the pages a reply points at. They sit under the bubble rather than
   inside it: the agent writes short answers on purpose, and a URL in the prose
   would eat the budget and break the line. */
.chat-window__links {
	display: flex;
	flex-direction: column;
	gap: 6px;
	align-self: flex-start;
	/* Matches the bubble, so a card reads as belonging to the reply above it
	   rather than as a full-width banner. Page titles are long; the ellipsis
	   below does the rest. */
	max-width: 225px;
	/* The avatar column, so cards line up with the bubble and not with the
	   avatar edge. */
	margin: -6px 0 0 57px;
}

.chat-window__link {
	display: block;
	padding: 9px 14px;
	background: var(--color-white);
	border: 1px solid var(--color-sand-soft);
	border-radius: var(--radius-chat-bubble);
	color: var(--color-black);
	font: var(--body-s);
	text-decoration: none;
	/* Titles are page titles and can be long; one line each keeps the row of
	   cards scannable instead of becoming a second wall of text. */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.chat-window__link:hover,
.chat-window__link:focus-visible {
	border-color: var(--color-orange);
}