/* ai-guide — chat with PE's AI guide, drawn as a data center.
   Geometry only and scaffolding-level: structure to see the states, not
   the finished look. Color and type come from tokens and voices.
   Markup: templates/components/ai-guide.php
   Behavior: scripts/ai-guide.js (sets data-state / data-activity) */

ai-guide {
	display: block;
	max-width: 40em;
}

/* The whole guide — data center, conversation, message box — fits on one
   screen below the sticky header, up to a max on tall screens. The message
   list takes whatever height is left.
   $todo: Derek to tune the max; 44em is a scaffolding number. */
.ai-guide {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-rows: auto 1fr;
	grid-template-areas:
		'. center'
		'conversation conversation';
	gap: 1em;
	height: min(44em, 100svh - var(--site-header-height) - 2em);

	/* The data center sits outside the conversation, never inside it. */
	.data-center {
		grid-area: center;
		display: grid;
		justify-items: end;
		gap: 0.5em;
	}

	.building {
		margin: 0;
		width: 8em;
		aspect-ratio: 1;
		display: grid;
		place-items: center;
		border: 1px solid var(--stroke-primary);
		border-radius: var(--control-radius);
	}

	&[data-state='off'] .building {
		opacity: 0.4;
	}

	.data-center[data-activity='receiving'] .building,
	.data-center[data-activity='sending'] .building {
		border-style: dashed;
	}

	/* The conversation is its own bounded box. */
	.conversation {
		grid-area: conversation;
		min-height: 0;
		display: flex;
		flex-direction: column;
		gap: 1em;
		padding: 1em;
		border: 1px solid var(--stroke-primary);
		border-radius: var(--control-radius);
	}

	/* Takes the height the guide has left, so it never grows with the
	   chat. Messages sit at the bottom; older ones scroll up inside. */
	.messages {
		margin: 0;
		padding: 0;
		list-style: none;
		display: flex;
		flex-direction: column;
		gap: 0.75em;
		flex: 1 1 0;
		min-height: 0;
		overflow-y: auto;
		overscroll-behavior: contain;

		/* Pushes the conversation to the bottom while it's short. An auto
		   margin, not justify-content: flex-end, so the oldest messages
		   stay reachable by scrolling once it overflows. */
		li:first-child {
			margin-top: auto;
		}

		li {
			flex-shrink: 0;
			align-self: flex-start;
			max-width: 85%;
			padding: 0.5em 0.75em;
			border-radius: var(--control-radius);
			background: var(--fill-secondary);
			white-space: pre-wrap;
			overflow-wrap: anywhere;
		}

		[data-role='user'] {
			align-self: flex-end;
			background: var(--fill-auxiliary);
		}
	}

	/* Message box on the left, Send on the right, the count underneath. */
	form {
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: end;
		gap: 0.5em;

		label {
			display: grid;
			gap: 0.25em;
		}

		.quiet-voice {
			grid-column: 1 / -1;
		}
	}
}