/*
 * Voice, visually.
 *
 * The temptation with a voice interface is a glowing orb the size of the screen
 * that pulses to the waveform. It looks extraordinary in a demo and it is
 * exhausting to actually use — the animation is loudest exactly when the person
 * is trying to listen to something.
 *
 * So the visual language here is state, not spectacle: one small mark that
 * changes shape depending on whether the thing is waiting, hearing, working or
 * talking, and nothing else moving on the page. Everything inherits the site's
 * own tokens, so voice looks like part of the site rather than a widget that
 * landed on it.
 */

.an-v-fab {
	position: fixed;
	right: max(16px, env(safe-area-inset-right));
	bottom: max(16px, env(safe-area-inset-bottom));
	z-index: 60;

	display: inline-flex;
	align-items: center;
	gap: var(--an-space-2, 8px);

	padding: 12px 18px 12px 14px;
	border: 1px solid var(--an-line, #DEDEDA);
	border-radius: 999px;

	background: var(--an-surface, #fff);
	color: var(--an-text, #16181A);
	font: 500 var(--an-t-small, 15px) / 1 var(--an-font-ui, system-ui);
	letter-spacing: 0.01em;

	box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 8px 24px rgba(0, 0, 0, .08);
	cursor: pointer;
	transition: transform var(--an-fast, 140ms) var(--an-ease, ease),
	            box-shadow var(--an-fast, 140ms) var(--an-ease, ease);
}

.an-v-fab:hover { transform: translateY(-1px); }
.an-v-fab:active { transform: translateY(0); }
.an-v-fab:focus-visible { outline: 2px solid var(--an-accent, #B4501C); outline-offset: 3px; }

.an-v-fab-i { display: inline-flex; color: var(--an-primary, #1F6B4A); }

/*
 * The mobile tab bar owns the bottom edge. Sitting above it rather than on top
 * of it is the difference between a microphone that is always reachable and one
 * that covers the navigation.
 */
@media (max-width: 860px) {
	.an-v-fab { bottom: calc(72px + max(8px, env(safe-area-inset-bottom))); padding: 12px 16px; }
	.an-v-fab-t { display: none; }
	.an-v-fab { border-radius: 50%; padding: 14px; }
}

/* ── the panel ─────────────────────────────────────────────── */

.an-v {
	position: fixed;
	inset: auto max(16px, env(safe-area-inset-right)) 80px auto;
	z-index: 61;
	width: min(420px, calc(100vw - 32px));

	opacity: 0;
	transform: translateY(8px);
	transition: opacity var(--an-med, 240ms) var(--an-ease, ease),
	            transform var(--an-med, 240ms) var(--an-ease, ease);
}

.an-v.is-in { opacity: 1; transform: translateY(0); }

@media (max-width: 860px) {
	.an-v {
		inset: auto 0 0 0;
		width: 100%;
	}
}

.an-v-panel {
	display: flex;
	flex-direction: column;
	gap: var(--an-space-3, 12px);

	padding: var(--an-space-4, 16px);
	border: 1px solid var(--an-line, #DEDEDA);
	border-radius: var(--an-radius-lg, 16px);
	background: var(--an-surface, #fff);
	box-shadow: 0 2px 6px rgba(0, 0, 0, .06), 0 20px 48px rgba(0, 0, 0, .14);
}

@media (max-width: 860px) {
	.an-v-panel {
		border-radius: var(--an-radius-lg, 16px) var(--an-radius-lg, 16px) 0 0;
		border-bottom: 0;
		padding-bottom: calc(var(--an-space-4, 16px) + env(safe-area-inset-bottom));
	}
}

.an-v-head {
	display: flex;
	align-items: center;
	gap: var(--an-space-2, 8px);
}

.an-v-state {
	flex: 1;
	font: 500 var(--an-t-micro, 13px) / 1.3 var(--an-font-ui, system-ui);
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--an-text-3, #82878C);
}

.an-v-x {
	border: 0;
	background: none;
	color: var(--an-text-3, #82878C);
	font-size: 22px;
	line-height: 1;
	padding: 4px 8px;
	cursor: pointer;
}

.an-v-x:focus-visible { outline: 2px solid var(--an-accent, #B4501C); outline-offset: 2px; }

/* ── the one moving part ───────────────────────────────────── */

.an-v-orb {
	position: relative;
	width: 12px;
	height: 12px;
	flex: 0 0 12px;
}

.an-v-orb i {
	position: absolute;
	inset: 2px;
	border-radius: 50%;
	background: var(--an-text-3, #82878C);
	transition: background var(--an-fast, 140ms) var(--an-ease, ease),
	            inset var(--an-fast, 140ms) var(--an-ease, ease);
}

/* Waiting: a small steady dot. */
.an-v[data-state="idle"] .an-v-orb i { background: var(--an-text-3, #82878C); }

/* Hearing: open and green, breathing slowly. */
.an-v[data-state="listening"] .an-v-orb i {
	inset: 0;
	background: var(--an-primary, #1F6B4A);
	animation: an-v-breathe 2.4s var(--an-ease, ease) infinite;
}

/* Working: the state most interfaces render as a spinner and call "Loading". */
.an-v[data-state="thinking"] .an-v-orb i {
	inset: 3px;
	background: var(--an-warn, #9A6A00);
	animation: an-v-pulse .9s var(--an-ease, ease) infinite;
}

/* Talking: laterite, the site's emphasis colour. */
.an-v[data-state="speaking"] .an-v-orb i {
	inset: 1px;
	background: var(--an-accent, #B4501C);
	animation: an-v-breathe 1.1s var(--an-ease, ease) infinite;
}

@keyframes an-v-breathe {
	0%, 100% { opacity: 1; }
	50% { opacity: .45; }
}

@keyframes an-v-pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(.72); }
}

@media (prefers-reduced-motion: reduce) {
	.an-v .an-v-orb i { animation: none !important; }
	.an-v { transition: none; }
}

/* ── transcript ────────────────────────────────────────────── */

.an-v-log {
	display: flex;
	flex-direction: column;
	gap: var(--an-space-3, 12px);
	max-height: min(46vh, 380px);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.an-v-log:empty { display: none; }

.an-v-row p {
	margin: 0;
	font: var(--an-t-small, 15px) / 1.55 var(--an-font-ui, system-ui);
	color: var(--an-text, #16181A);
}

.an-v-row.is-you p {
	color: var(--an-text-2, #52565A);
	padding-left: var(--an-space-3, 12px);
	border-left: 2px solid var(--an-line, #DEDEDA);
}

.an-v-row.is-sys p {
	font-size: var(--an-t-micro, 13px);
	color: var(--an-text-3, #82878C);
	line-height: 1.5;
}

.an-v-go {
	display: inline-block;
	margin-top: var(--an-space-2, 8px);
	font: 500 var(--an-t-micro, 13px) / 1 var(--an-font-ui, system-ui);
	color: var(--an-accent, #B4501C);
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 2px;
}

/* Evidence, collapsed. Present for anyone who wants it, silent for everyone
   else — an answer buried under four citations is harder to trust, not easier. */
.an-v-src {
	margin-top: var(--an-space-2, 8px);
	font: var(--an-t-micro, 13px) / 1.5 var(--an-font-ui, system-ui);
}

.an-v-src summary {
	color: var(--an-text-3, #82878C);
	cursor: pointer;
	list-style: none;
}

.an-v-src summary::before { content: "› "; }
.an-v-src[open] summary::before { content: "⌄ "; }

.an-v-src a {
	display: block;
	margin-top: 4px;
	color: var(--an-text-2, #52565A);
}

/* ── prompts and typing ────────────────────────────────────── */

.an-v-eg {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--an-space-2, 8px);
}

.an-v-eg > span {
	font: 500 var(--an-t-micro, 13px) / 1 var(--an-font-ui, system-ui);
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--an-text-3, #82878C);
}

.an-v-eg button {
	padding: 6px 10px;
	border: 1px solid var(--an-line, #DEDEDA);
	border-radius: 999px;
	background: var(--an-surface-2, #FAFAF8);
	color: var(--an-text-2, #52565A);
	font: var(--an-t-micro, 13px) / 1.2 var(--an-font-ui, system-ui);
	cursor: pointer;
}

.an-v-eg button:hover { border-color: var(--an-text-3, #82878C); color: var(--an-text, #16181A); }

.an-v-type {
	display: flex;
	gap: var(--an-space-2, 8px);
}

.an-v-type input {
	flex: 1;
	min-width: 0;
	padding: 10px 12px;
	border: 1px solid var(--an-line, #DEDEDA);
	border-radius: var(--an-radius-sm, 6px);
	background: var(--an-surface-2, #FAFAF8);
	color: var(--an-text, #16181A);
	font: var(--an-t-small, 15px) / 1.3 var(--an-font-ui, system-ui);
}

.an-v-type input:focus-visible {
	outline: 2px solid var(--an-accent, #B4501C);
	outline-offset: 1px;
}

.an-v-type button {
	padding: 10px 16px;
	border: 0;
	border-radius: var(--an-radius-sm, 6px);
	background: var(--an-primary, #1F6B4A);
	color: var(--an-primary-c, #fff);
	font: 500 var(--an-t-small, 15px) / 1.3 var(--an-font-ui, system-ui);
	cursor: pointer;
}

.an-v-fine {
	margin: 0;
	font: var(--an-t-micro, 13px) / 1.4 var(--an-font-ui, system-ui);
	color: var(--an-text-3, #82878C);
}