/* ══════════════════════════════════════════════════════════════════════════
   ASK AOS — front-end concierge widget
   Fully tokenized to the AOS brand (teal #2E9E9E accent, charcoal ink,
   Instrument Sans + JetBrains Mono). Every color references an --aos-*
   token emitted at :root by design-language.php — zero hardcoded color.

   Typography:
     - Instrument Sans: title, message body, input, chips
     - JetBrains Mono:  source chips, demo/meta labels

   Layout:
     - Launcher: 56px teal circle (pill when contextual), bottom-right
     - Panel: 380 x 560px, charcoal header, warm-light body
     - Mobile (<640px): full-width bottom sheet, 80vh
   ══════════════════════════════════════════════════════════════════════════ */


/* ── Launcher button ──────────────────────────────────────────────────── */

.aos-chat-launcher {
	position: fixed;
	bottom: 24px;
	right: 24px;
	z-index: 99998;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	border: none;
	background: hsl(var(--aos-yellow));
	color: hsl(var(--aos-navy));
	cursor: pointer;
	display: grid;
	place-items: center;
	box-shadow:
		0 10px 28px hsl(var(--aos-blue) / 0.28),
		0 2px 6px hsl(var(--aos-navy) / 0.14);
	transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
	            box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1),
	            background 180ms ease;
}

.aos-chat-launcher:hover {
	transform: translateY(-2px) scale(1.04);
	box-shadow:
		0 16px 36px hsl(var(--aos-blue) / 0.34),
		0 3px 8px hsl(var(--aos-navy) / 0.16);
}

.aos-chat-launcher:active {
	transform: scale(0.96);
}

.aos-chat-launcher:focus-visible {
	outline: none;
	box-shadow:
		0 0 0 3px hsl(var(--paper)),
		0 0 0 6px hsl(var(--aos-blue) / 0.6);
}

.aos-chat-launcher svg {
	width: 24px;
	height: 24px;
	fill: currentColor;
}


/* Hide launcher when panel is open */
.aos-chat-launcher[aria-expanded="true"] {
	transform: scale(0);
	pointer-events: none;
}

/* Contextual launcher (on a known page): pill-shaped with page topic label */
.aos-chat-launcher.has-pill {
	width: auto;
	height: 52px;
	padding: 0 20px 0 16px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	gap: 10px;
}
.aos-chat-launcher.has-pill svg {
	width: 20px;
	height: 20px;
}
.aos-chat-launcher__pill {
	font-family: "Instrument Sans", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: -0.005em;
	color: hsl(var(--aos-navy));
	white-space: nowrap;
}
/* ── Panel ────────────────────────────────────────────────────────────── */

.aos-chat-panel {
	position: fixed;
	bottom: 24px;
	right: 24px;
	z-index: 99999;
	width: 380px;
	height: 560px;
	max-height: calc(100vh - 48px);
	border-radius: 20px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	background: hsl(var(--aos-cream));
	border: 1px solid hsl(var(--aos-navy) / 0.08);
	box-shadow:
		0 40px 96px hsl(var(--aos-navy) / 0.20),
		0 8px 24px hsl(var(--aos-navy) / 0.10);
	transform: translateY(16px) scale(0.96);
	opacity: 0;
	pointer-events: none;
	transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1),
	            opacity 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.aos-chat-panel[data-open="true"] {
	transform: translateY(0) scale(1);
	opacity: 1;
	pointer-events: auto;
}


/* ── Header ───────────────────────────────────────────────────────────── */

.aos-chat-header {
	background: hsl(var(--aos-navy));
	color: hsl(var(--paper));
	padding: 18px 20px;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	flex-shrink: 0;
	border-bottom: 2px solid hsl(var(--aos-yellow));
}

.aos-chat-header__text {
	flex: 1;
}

.aos-chat-header__title {
	font-family: "Instrument Sans", system-ui, sans-serif;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.02em;
	margin: 0;
}
/* Editorial emphasis — the AOS signature: short serif-italic accent word
   set against the sans title (mirrors "The Agency OS." on the site). */
.aos-chat-header__title em {
	font-family: "Cormorant Garamond", Georgia, serif;
	font-style: italic;
	font-weight: 500;
	font-size: 1.14em;
	letter-spacing: 0;
}

.aos-chat-header__sub {
	font-family: "Instrument Sans", system-ui, sans-serif;
	font-size: 12.5px;
	color: hsl(var(--paper) / 0.68);
	margin-top: 3px;
}

.aos-chat-header__close {
	width: 28px;
	height: 28px;
	border-radius: 8px;
	border: none;
	background: hsl(var(--paper) / 0.1);
	color: hsl(var(--paper) / 0.78);
	cursor: pointer;
	display: grid;
	place-items: center;
	flex-shrink: 0;
	transition: background 160ms ease, color 160ms ease;
}

.aos-chat-header__close:hover {
	background: hsl(var(--paper) / 0.18);
	color: hsl(var(--paper));
}

.aos-chat-header__close:focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px hsl(var(--aos-yellow));
}

.aos-chat-header__close svg {
	width: 14px;
	height: 14px;
}

/* Demo mode chip */
.aos-chat-demo {
	display: inline-block;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	background: hsl(var(--aos-yellow) / 0.22);
	color: hsl(var(--aos-yellow));
	padding: 2px 8px;
	border-radius: 999px;
	margin-top: 6px;
}


/* ── Messages ─────────────────────────────────────────────────────────── */

.aos-chat-messages {
	flex: 1;
	overflow-y: auto;
	padding: 16px 16px 8px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	scroll-behavior: smooth;
	overscroll-behavior: contain;
}

/* User bubble */
.aos-chat-msg--user {
	align-self: flex-end;
	max-width: 82%;
	background: hsl(var(--aos-blue));
	color: hsl(var(--paper));
	font-family: "Instrument Sans", system-ui, sans-serif;
	font-size: 14px;
	line-height: 1.5;
	padding: 10px 14px;
	border-radius: 16px 16px 4px 16px;
	word-break: break-word;
}

/* Assistant bubble */
.aos-chat-msg--assistant {
	align-self: flex-start;
	max-width: 88%;
}

.aos-chat-msg__body {
	background: hsl(var(--paper));
	border: 1px solid hsl(var(--aos-navy) / 0.1);
	color: hsl(var(--aos-navy));
	font-family: "Instrument Sans", system-ui, sans-serif;
	font-size: 14px;
	line-height: 1.55;
	padding: 10px 14px;
	border-radius: 16px 16px 16px 4px;
	word-break: break-word;
	box-shadow: 0 1px 2px hsl(var(--aos-navy) / 0.04);
}

/* Links inside assistant answers */
.aos-chat-msg__body a {
	color: hsl(var(--aos-blue));
	text-underline-offset: 2px;
}

/* Source chips */
.aos-chat-sources {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 6px;
	padding-left: 2px;
}

.aos-chat-source {
	display: inline-block;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: hsl(var(--aos-blue));
	background: hsl(var(--aos-yellow-soft));
	padding: 3px 10px;
	border-radius: 999px;
	text-decoration: none;
	transition: background 160ms ease, color 160ms ease;
}

.aos-chat-source:hover {
	background: hsl(var(--aos-yellow));
	color: hsl(var(--aos-navy));
}


/* ── Entrance: messages + starters rise in (premium, staggered) ───────── */

@keyframes aos-chat-rise {
	from { opacity: 0; transform: translateY(9px); }
	to   { opacity: 1; transform: translateY(0); }
}
.aos-chat-msg--assistant,
.aos-chat-msg--user,
.aos-chat-cta {
	animation: aos-chat-rise 380ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.aos-chat-starters .aos-chat-starter {
	animation: aos-chat-rise 380ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.aos-chat-starters .aos-chat-starter:nth-child(1) { animation-delay: 70ms; }
.aos-chat-starters .aos-chat-starter:nth-child(2) { animation-delay: 140ms; }
.aos-chat-starters .aos-chat-starter:nth-child(3) { animation-delay: 210ms; }
.aos-chat-starters .aos-chat-starter:nth-child(4) { animation-delay: 280ms; }


/* ── Typing indicator ─────────────────────────────────────────────────── */

.aos-chat-typing {
	align-self: flex-start;
	display: flex;
	gap: 5px;
	padding: 12px 16px;
	background: hsl(var(--paper));
	border: 1px solid hsl(var(--aos-navy) / 0.1);
	border-radius: 16px 16px 16px 4px;
}

.aos-chat-typing__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: hsl(var(--aos-yellow));
	animation: aos-chat-bounce 1.2s ease-in-out infinite;
}

.aos-chat-typing__dot:nth-child(2) { animation-delay: 0.15s; }
.aos-chat-typing__dot:nth-child(3) { animation-delay: 0.3s; }

@keyframes aos-chat-bounce {
	0%, 60%, 100% { transform: translateY(0); }
	30%           { transform: translateY(-6px); }
}


/* ── Fallback CTA card ────────────────────────────────────────────────── */

.aos-chat-cta {
	align-self: flex-start;
	max-width: 88%;
	background: hsl(var(--aos-yellow-soft));
	border: 1px solid hsl(var(--aos-yellow) / 0.5);
	border-radius: 12px;
	padding: 14px 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.aos-chat-cta__text {
	font-family: "Instrument Sans", system-ui, sans-serif;
	font-size: 13px;
	line-height: 1.45;
	color: hsl(var(--aos-navy));
}

.aos-chat-cta__btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 18px;
	background: hsl(var(--aos-blue));
	color: hsl(var(--paper));
	font-family: "Instrument Sans", system-ui, sans-serif;
	font-size: 13px;
	font-weight: 600;
	border: none;
	border-radius: 999px;
	text-decoration: none;
	cursor: pointer;
	transition: background 160ms ease;
	align-self: flex-start;
}

.aos-chat-cta__btn:hover {
	background: hsl(var(--aos-navy));
}


/* ── Suggested prompts ────────────────────────────────────────────────── */

.aos-chat-starters {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: 4px;
	align-self: flex-start;
	max-width: 88%;
}

.aos-chat-starter {
	display: inline-block;
	background: hsl(var(--paper));
	color: hsl(var(--aos-navy));
	font-family: "Instrument Sans", system-ui, sans-serif;
	font-size: 13px;
	font-weight: 500;
	padding: 8px 14px;
	border-radius: 999px;
	border: 1px solid hsl(var(--aos-yellow) / 0.5);
	cursor: pointer;
	text-align: left;
	transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.aos-chat-starter:hover {
	background: hsl(var(--aos-yellow));
	border-color: hsl(var(--aos-yellow));
	color: hsl(var(--aos-navy));
	transform: translateY(-1px);
}

.aos-chat-starter:focus-visible {
	outline: none;
	border-color: hsl(var(--aos-blue));
	box-shadow: 0 0 0 3px hsl(var(--aos-blue) / 0.22);
}


/* ── Input row ────────────────────────────────────────────────────────── */

.aos-chat-input {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	padding: 12px 16px 16px;
	border-top: 1px solid hsl(var(--aos-navy) / 0.1);
	background: hsl(var(--paper));
	flex-shrink: 0;
}

.aos-chat-input__field {
	flex: 1;
	resize: none;
	border: 1px solid hsl(var(--aos-navy) / 0.14);
	border-radius: 12px;
	padding: 10px 14px;
	font-family: "Instrument Sans", system-ui, sans-serif;
	font-size: 14px;
	line-height: 1.4;
	color: hsl(var(--aos-navy));
	background: hsl(var(--aos-cream));
	outline: none;
	max-height: 96px;
	overflow-y: auto;
	transition: border-color 160ms ease, box-shadow 160ms ease;
}

.aos-chat-input__field::placeholder {
	color: hsl(var(--fg-muted));
}

.aos-chat-input__field:focus {
	border-color: hsl(var(--aos-blue));
	box-shadow: 0 0 0 3px hsl(var(--aos-blue) / 0.16);
}

.aos-chat-input__send {
	width: 38px;
	height: 38px;
	border-radius: 10px;
	border: none;
	background: hsl(var(--aos-yellow));
	color: hsl(var(--aos-navy));
	cursor: pointer;
	display: grid;
	place-items: center;
	flex-shrink: 0;
	transition: background 160ms ease, transform 160ms ease;
}

.aos-chat-input__send:hover {
	background: hsl(var(--aos-blue));
	color: hsl(var(--paper));
}

.aos-chat-input__send:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px hsl(var(--aos-blue) / 0.3);
}

.aos-chat-input__send:active {
	transform: scale(0.92);
}

.aos-chat-input__send:disabled {
	opacity: 0.45;
	cursor: default;
}

.aos-chat-input__send svg {
	width: 16px;
	height: 16px;
}


/* ── Responsive: mobile bottom sheet ──────────────────────────────────── */

@media (max-width: 639px) {
	.aos-chat-panel {
		bottom: 0;
		right: 0;
		left: 0;
		width: 100%;
		height: 80vh;
		max-height: 80vh;
		border-radius: 20px 20px 0 0;
		transform: translateY(100%);
	}

	.aos-chat-panel[data-open="true"] {
		transform: translateY(0);
	}

	.aos-chat-launcher {
		bottom: 16px;
		right: 16px;
	}
}


/* ── Reduced motion ───────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.aos-chat-launcher::before {
		animation: none;
	}

	.aos-chat-typing__dot {
		animation: none;
	}

	.aos-chat-msg--assistant,
	.aos-chat-msg--user,
	.aos-chat-cta,
	.aos-chat-starters .aos-chat-starter {
		animation: none !important;
	}

	.aos-chat-panel {
		transition: opacity 100ms ease;
		transform: none !important;
	}

	.aos-chat-panel[data-open="true"] {
		transform: none !important;
	}

	.aos-chat-launcher {
		transition: none;
	}
}