src/lib/components/chat/ChatWindow.svelte

<script lang="ts">
	import type { Message, MessageFile, MetacognitiveEvent, MetacognitiveEventType } from "$lib/types/Message";
	import type { MetacognitiveConfig, MetacognitivePromptData } from "$lib/types/Metacognitive";
	import { determineMetacognitivePrompt } from "$lib/utils/metacognitiveLogic";
	import { onDestroy, tick } from "svelte";

	import IconOmni from "$lib/components/icons/IconOmni.svelte";
	import CarbonCaretDown from "~icons/carbon/caret-down";
	import CarbonDirectionRight from "~icons/carbon/direction-right-01";
	import CarbonModel from "~icons/carbon/model";

	import ChatInput from "./ChatInput.svelte";
	import StopGeneratingBtn from "../StopGeneratingBtn.svelte";
	import type { Model } from "$lib/types/Model";
	import { page } from "$app/state";
	import { goto } from "$app/navigation";
	import FileDropzone from "./FileDropzone.svelte";
	import RetryBtn from "../RetryBtn.svelte";
	import file2base64 from "$lib/utils/file2base64";
	import { base } from "$app/paths";
	import ContinueBtn from "../ContinueBtn.svelte";
	import ChatMessage from "./ChatMessage.svelte";
	import { browser } from "$app/environment";
	import { snapScrollToBottom } from "$lib/actions/snapScrollToBottom";
	import SystemPromptModal from "../SystemPromptModal.svelte";
	import ShareConversationModal from "../ShareConversationModal.svelte";
	import ChatIntroduction from "./ChatIntroduction.svelte";
	import UploadedFile from "./UploadedFile.svelte";
	import { useSettingsStore } from "$lib/stores/settings";
	import { useMetacognitiveEngine } from "$lib/hooks/useMetacognitiveEngine.svelte";
	import ModelSwitch from "./ModelSwitch.svelte";
	import { routerExamples } from "$lib/constants/routerExamples";
	import type { RouterFollowUp, RouterExample } from "$lib/constants/routerExamples";
	import { shareModal } from "$lib/stores/shareModal";
	import PersonaSelector from "$lib/components/PersonaSelector.svelte";

	import { fly } from "svelte/transition";
	import { cubicInOut } from "svelte/easing";
	import { loginModalOpen } from "$lib/stores/loginModal";

	import { isVirtualKeyboard } from "$lib/utils/isVirtualKeyboard";
	import superjson from "superjson";

	interface Props {
		messages?: Message[];
		messagesAlternatives?: Message["id"][][];
		loading?: boolean;
		pending?: boolean;
		shared?: boolean;
		currentModel: Model;
		models: Model[];
		preprompt?: string | undefined;
		personaId?: string;
		lockedPersonaId?: string;
		branchState?: {
			messageId: string;
			personaId: string;
			personaName: string;
		} | null;
		files?: File[];
		metacognitiveConfig?: MetacognitiveConfig;
		metacognitiveState?: {
			targetFrequency?: number;
			lastPromptedAtMessageId?: string | null;
		};
		onmessage?: (content: string) => void;
		onstop?: () => void;
		onretry?: (payload: { id: Message["id"]; content?: string; personaId?: string }) => void;
		oncontinue?: (payload: { id: Message["id"] }) => void;
		onshowAlternateMsg?: (payload: { id: Message["id"] }) => void;
		onbranch?: (messageId: string, personaId: string) => void;
		onmetacognitivebranch?: (messageId: string, personaId: string, promptData: MetacognitivePromptData) => void;
	}

	let {
		messages = [],
		messagesAlternatives = [],
		loading = false,
		pending = false,
		shared = false,
		currentModel,
		models,
		preprompt = undefined,
		personaId,
		lockedPersonaId,
		branchState,
		files = $bindable([]),
		metacognitiveConfig,
		metacognitiveState,
		onmessage,
		onstop,
		onretry,
		oncontinue,
		onshowAlternateMsg,
		onbranch,
		onmetacognitivebranch,
	}: Props = $props();

	let isReadOnly = $derived(!models.some((model) => model.id === currentModel.id));

	// Get persona information for single-persona mode
	let userSettings = useSettingsStore();
	let persona = $derived.by(() => {
		if (!personaId) return undefined;
		return $userSettings.personas?.find((p) => p.id === personaId);
	});
	
	// Compute branch points: messages that other messages branch from
	// Map of messageId -> array of persona names that branched from it
	let branchPointInfo = $derived.by(() => {
		const branchPoints = new Map<string, string[]>();
		messages.forEach(msg => {
			if (msg.branchedFrom) {
				const messageId = msg.branchedFrom.messageId;
				const personaName = $userSettings.personas?.find(p => p.id === msg.branchedFrom?.personaId)?.name || msg.branchedFrom.personaId;
				if (!branchPoints.has(messageId)) {
					branchPoints.set(messageId, []);
				}
				const personas = branchPoints.get(messageId)!;
				if (!personas.includes(personaName)) {
					personas.push(personaName);
				}
			}
		});
		return branchPoints;
	});

	const metacognitiveEngine = useMetacognitiveEngine(() => ({
		messages,
		loading,
		pending,
		metacognitiveConfig,
		metacognitiveState,
		userSettings: $userSettings,
		onmetacognitivebranch
	}));

	let activeMetacognitivePrompt = $derived(metacognitiveEngine.activeMetacognitivePrompt);

	let message: string = $state("");
	let shareModalOpen = $state(false);
	let editMsdgId: Message["id"] | null = $state(null);
	let pastedLongContent = $state(false);

	const handleSubmit = () => {
		if (loading) return;
		onmessage?.(message);
		message = "";
	};

	let lastTarget: EventTarget | null = null;

	let onDrag = $state(false);

	const onDragEnter = (e: DragEvent) => {
		lastTarget = e.target;
		onDrag = true;
	};
	const onDragLeave = (e: DragEvent) => {
		if (e.target === lastTarget) {
			onDrag = false;
		}
	};

	const onPaste = (e: ClipboardEvent) => {
		const textContent = e.clipboardData?.getData("text");

		if (!$settings.directPaste && textContent && textContent.length >= 3984) {
			e.preventDefault();
			pastedLongContent = true;
			setTimeout(() => {
				pastedLongContent = false;
			}, 1000);
			const pastedFile = new File([textContent], "Pasted Content", {
				type: "application/vnd.chatui.clipboard",
			});

			files = [...files, pastedFile];
		}

		if (!e.clipboardData) {
			return;
		}

		// paste of files
		const pastedFiles = Array.from(e.clipboardData.files);
		if (pastedFiles.length !== 0) {
			e.preventDefault();

			// filter based on activeMimeTypes, including wildcards
			const filteredFiles = pastedFiles.filter((file) => {
				return activeMimeTypes.some((mimeType: string) => {
					const [type, subtype] = mimeType.split("/");
					const [fileType, fileSubtype] = file.type.split("/");
					return (
						(type === "*" || fileType === type) && (subtype === "*" || fileSubtype === subtype)
					);
				});
			});

			files = [...files, ...filteredFiles];
		}
	};

	let lastMessage = $derived(browser && (messages.at(-1) as Message));
	let scrollSignal = $derived.by(() => {
		const last = messages.at(-1) as Message | undefined;
		return last
			? `${last.id}:${last.content.length}:${messages.length}:${loading}:${activeMetacognitivePrompt?.messageId ?? ""}`
			: `${messages.length}:0:${loading}:${activeMetacognitivePrompt?.messageId ?? ""}`;
	});
	let lastIsError = $derived(
		lastMessage &&
			!loading &&
			(lastMessage.from === "user" ||
				lastMessage.updates?.findIndex((u) => u.type === "status" && u.status === "error") !== -1)
	);

	let streamingAssistantMessage = $derived(
		(() => {
			for (let i = messages.length - 1; i >= 0; i -= 1) {
				const candidate = messages[i];
				if (candidate.from === "assistant") {
					return candidate;
				}
			}
			return undefined;
		})()
	);
	let streamingRouterMetadata = $derived(streamingAssistantMessage?.routerMetadata ?? null);
	let streamingRouterModelName = $derived(
		streamingRouterMetadata?.model
			? (streamingRouterMetadata.model.split("/").pop() ?? streamingRouterMetadata.model)
			: ""
	);
	let showRouterDetails = $state(false);
	let routerDetailsTimeout: ReturnType<typeof setTimeout> | undefined;

	$effect(() => {
		if (!currentModel.isRouter || !loading) {
			showRouterDetails = false;
			if (routerDetailsTimeout) {
				clearTimeout(routerDetailsTimeout);
				routerDetailsTimeout = undefined;
			}
			return;
		}

		if (routerDetailsTimeout) {
			clearTimeout(routerDetailsTimeout);
		}

		showRouterDetails = false;
		routerDetailsTimeout = setTimeout(() => {
			showRouterDetails = true;
		}, 1000);
	});

	let sources = $derived(
		files?.map<Promise<MessageFile>>((file) =>
			file2base64(file).then((value) => ({
				type: "base64",
				value,
				mime: file.type,
				name: file.name,
			}))
		)
	);

	const unsubscribeShareModal = shareModal.subscribe((value) => {
		shareModalOpen = value;
	});

	onDestroy(() => {
		unsubscribeShareModal();
		shareModal.close();
		if (routerDetailsTimeout) {
			clearTimeout(routerDetailsTimeout);
		}
	});

	let chatContainer: HTMLElement | undefined = $state();

	async function scrollToBottom() {
		await tick();
		if (!chatContainer) return;
		chatContainer.scrollTop = chatContainer.scrollHeight;
	}

	// If last message is from user, scroll to bottom
	$effect(() => {
		if (lastMessage && lastMessage.from === "user") {
			scrollToBottom();
		}
	});

	const settings = useSettingsStore();
	let hideRouterExamples = $derived($settings.hidePromptExamples?.[currentModel.id] ?? false);

	// Respect per‑model multimodal toggle from settings (force enable)
	let modelIsMultimodalOverride = $derived($settings.multimodalOverrides?.[currentModel.id]);
	let modelIsMultimodal = $derived((modelIsMultimodalOverride ?? currentModel.multimodal) === true);
	let activeMimeTypes = $derived(
		Array.from(
			new Set([
				...(modelIsMultimodal ? (currentModel.multimodalAcceptedMimetypes ?? ["image/*"]) : []),
			])
		)
	);
	let isFileUploadEnabled = $derived(activeMimeTypes.length > 0);
	let focused = $state(false);

	let activeRouterExamplePrompt = $state<string | null>(null);
	let routerFollowUps = $derived<RouterFollowUp[]>(
		activeRouterExamplePrompt
			? (routerExamples.find((ex) => ex.prompt === activeRouterExamplePrompt)?.followUps ?? [])
			: []
	);
	let routerUserMessages = $derived(messages.filter((msg) => msg.from === "user"));
	let shouldShowRouterFollowUps = $derived(
		!message.length &&
			activeRouterExamplePrompt &&
			routerFollowUps.length > 0 &&
			routerUserMessages.length === 1 &&
			currentModel.isRouter &&
			!hideRouterExamples &&
			!loading
	);

	$effect(() => {
		if (!currentModel.isRouter || !messages.length) {
			activeRouterExamplePrompt = null;
			return;
		}

		const firstUserMessage = messages.find((msg) => msg.from === "user");
		if (!firstUserMessage) {
			activeRouterExamplePrompt = null;
			return;
		}

		const match = routerExamples.find((ex) => ex.prompt.trim() === firstUserMessage.content.trim());
		activeRouterExamplePrompt = match ? match.prompt : null;
	});

	function triggerPrompt(prompt: string) {
		if (loading) return;
		if (page.data.loginRequired) {
			$loginModalOpen = true;
			return;
		}
		message = prompt;
		handleSubmit();
	}

	async function startExample(example: RouterExample) {
		activeRouterExamplePrompt = example.prompt;

		if (browser && example.attachments?.length) {
			const loadedFiles: File[] = [];
			for (const attachment of example.attachments) {
				try {
					const response = await fetch(`${base}/${attachment.src}`);
					if (!response.ok) continue;

					const blob = await response.blob();
					const name = attachment.src.split("/").pop() ?? "attachment";
					loadedFiles.push(
						new File([blob], name, { type: blob.type || "application/octet-stream" })
					);
				} catch (err) {
					console.error("Error loading attachment:", err);
				}
			}
			files = loadedFiles;
		}

		triggerPrompt(example.prompt);
	}

	function startFollowUp(followUp: RouterFollowUp) {
		triggerPrompt(followUp.prompt);
	}
</script>

<svelte:window
	ondragenter={onDragEnter}
	ondragleave={onDragLeave}
	ondragover={(e) => {
		e.preventDefault();
	}}
	ondrop={(e) => {
		e.preventDefault();
		onDrag = false;
	}}
/>

<div class="relative z-[-1] min-h-0 min-w-0">
	{#if shareModalOpen}
		<ShareConversationModal open={shareModalOpen} onclose={() => shareModal.close()} />
	{/if}
	<div
		class="scrollbar-custom h-full overflow-y-auto"
		use:snapScrollToBottom={scrollSignal}
		bind:this={chatContainer}
	>
		<div
			class="mx-auto flex h-full max-w-3xl flex-col gap-6 px-5 pt-6 sm:gap-8 xl:max-w-4xl xl:pt-10"
		>
			{#if preprompt && preprompt != currentModel.preprompt}
				<SystemPromptModal preprompt={preprompt ?? ""} />
			{/if}

			{#if messages.length > 0}
				<div class="flex h-max flex-col gap-8 pb-52">
					{#each messages as message, idx (idx)}
					<ChatMessage
						{loading}
						{message}
						alternatives={messagesAlternatives.find((a) => a.includes(message.id)) ?? []}
						isAuthor={!shared}
						readOnly={isReadOnly}
						isLast={idx === messages.length - 1}
						personaName={message.from === "assistant" && !message.personaResponses ? persona?.name : undefined}
						personaOccupation={message.from === "assistant" && !message.personaResponses ? persona?.jobSector : undefined}
						personaStance={message.from === "assistant" && !message.personaResponses ? persona?.stance : undefined}
						{branchState}
						branchPersonas={branchPointInfo.get(message.id) ?? []}
						metacognitivePrompt={idx === messages.length - 1 && activeMetacognitivePrompt?.messageId === message.id ? activeMetacognitivePrompt : null}
						bind:editMsdgId
						onretry={(payload) => onretry?.(payload)}
						onshowAlternateMsg={(payload) => onshowAlternateMsg?.(payload)}
						onbranch={(messageId, personaId) => onbranch?.(messageId, personaId)}
						onmetacognitiveaction={() => metacognitiveEngine.handleMetacognitiveAction(message.id)}
					/>
					{/each}
					{#if isReadOnly}
						<ModelSwitch {models} {currentModel} />
					{/if}
				</div>
			{:else if pending}
				<ChatMessage
					loading={true}
					message={{
						id: "0-0-0-0-0",
						content: "",
						from: "assistant",
						children: [],
					}}
					isAuthor={!shared}
					readOnly={isReadOnly}
				/>
			{:else}
				<ChatIntroduction
					{currentModel}
					onmessage={(content) => {
						if (page.data.loginRequired) {
							$loginModalOpen = true;
						} else {
							onmessage?.(content);
						}
					}}
				/>
			{/if}
		</div>
	</div>

	<div
		class="pointer-events-none absolute inset-x-0 bottom-0 z-0 mx-auto flex w-full
			max-w-3xl flex-col items-center justify-center bg-gradient-to-t from-white
			via-white/100 to-white/0 px-3.5 pb-4 pt-2 dark:border-gray-800
			dark:from-gray-900 dark:via-gray-900/100
			dark:to-gray-900/0 max-sm:py-0 sm:px-5 xl:max-w-4xl [&>*]:pointer-events-auto"
	>
		{#if !message.length && !messages.length && !sources.length && !loading && currentModel.isRouter && routerExamples.length && !hideRouterExamples}
			<div
				class="no-scrollbar mb-3 flex w-full select-none justify-start gap-2 overflow-x-auto whitespace-nowrap text-gray-400 dark:text-gray-500"
			>
				{#each routerExamples as ex}
					<button
						class="flex items-center rounded-lg bg-gray-100/90 px-2 py-0.5 text-center text-sm backdrop-blur hover:text-gray-500 dark:bg-gray-700/50 dark:hover:text-gray-400"
						onclick={() => startExample(ex)}>{ex.title}</button
					>
				{/each}
			</div>
		{/if}
		{#if shouldShowRouterFollowUps}
			<div
				class="no-scrollbar mb-3 flex w-full select-none justify-start gap-2 overflow-x-auto whitespace-nowrap text-gray-400 dark:text-gray-500"
			>
				{#each routerFollowUps as followUp}
					<button
						class="flex items-center gap-1 rounded-lg bg-gray-100/90 px-2 py-0.5 text-center text-sm backdrop-blur hover:text-gray-500 dark:bg-gray-700/50 dark:hover:text-gray-400"
						onclick={() => startFollowUp(followUp)}
					>
						<CarbonDirectionRight class="scale-y-[-1] text-xs" />
						{followUp.title}</button
					>
				{/each}
			</div>
		{/if}
		{#if sources?.length && !loading}
			<div
				in:fly|local={sources.length === 1 ? { y: -20, easing: cubicInOut } : undefined}
				class="flex flex-row flex-wrap justify-center gap-2.5 rounded-xl pb-3"
			>
				{#each sources as source, index}
					{#await source then src}
						<UploadedFile
							file={src}
							onclose={() => {
								files = files.filter((_, i) => i !== index);
							}}
						/>
					{/await}
				{/each}
			</div>
		{/if}

		<div class="w-full">
			<div class="flex w-full *:mb-3">
				{#if !loading}
					{#if messages && lastMessage && lastMessage.interrupted && !isReadOnly}
						<div class="ml-auto gap-2">
							<ContinueBtn
								onClick={() => {
									if (lastMessage && lastMessage.ancestors) {
										oncontinue?.({
											id: lastMessage?.id,
										});
									}
								}}
							/>
						</div>
					{/if}
				{/if}
			</div>
			<div
				class={{
					"mb-3 flex items-center justify-end gap-2 self-stretch whitespace-nowrap px-0.5 text-xs text-gray-400/90 max-md:mb-2 max-sm:gap-2": true,
					"max-sm:hidden": focused && isVirtualKeyboard(),
				}}
			>
				<PersonaSelector {lockedPersonaId} />
				{#if models.find((m) => m.id === currentModel.id)}
                    {#if !currentModel.isRouter || !loading}
                        <a
                            href="{base}/settings/models/{currentModel.id}"
                            class="flex items-center gap-1.5 rounded-lg border border-gray-300 bg-gray-100 px-4 py-1.5 text-sm text-gray-400 shadow-sm hover:bg-gray-200 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-500 dark:hover:bg-gray-700"
                        >
							<CarbonModel class="text-xs" />
							{#if currentModel.isRouter}
								<IconOmni classNames="text-xs" />
								<span class="max-w-[250px] truncate">{currentModel.displayName}</span>
							{:else}
								<span class="max-w-[250px] truncate">{currentModel.displayName}</span>
							{/if}
						</a>
					{:else if showRouterDetails && streamingRouterMetadata}
						<div
							class="mr-2 flex items-center gap-1.5 whitespace-nowrap text-[.70rem] text-xs leading-none text-gray-400 dark:text-gray-400"
						>
							<IconOmni classNames="text-xs animate-pulse" />

							<span class="router-badge-text router-shimmer">
								{streamingRouterMetadata.route}
							</span>

							<span class="text-gray-500">with</span>

							<span class="router-badge-text">
								{streamingRouterModelName}
							</span>
						</div>
					{:else}
						<div
							class="loading-dots relative inline-flex items-center text-gray-400 dark:text-gray-400"
							aria-label="Routing…"
						>
							<IconOmni classNames="text-xs animate-pulse mr-1" /> Routing
						</div>
					{/if}
			{:else}
				<span class="inline-flex items-center line-through dark:border-gray-700">
					{currentModel.id}
				</span>
			{/if}
		</div>
			<form
				tabindex="-1"
				aria-label={isFileUploadEnabled ? "file dropzone" : undefined}
				onsubmit={(e) => {
					e.preventDefault();
					handleSubmit();
				}}
				class={{
					"relative flex w-full max-w-4xl flex-1 items-center rounded-xl border bg-gray-100 dark:border-gray-700 dark:bg-gray-800": true,
					"opacity-30": isReadOnly,
					"max-sm:mb-4": focused && isVirtualKeyboard(),
				}}
			>
				{#if onDrag && isFileUploadEnabled}
					<FileDropzone bind:files bind:onDrag mimeTypes={activeMimeTypes} />
				{:else}
					<div
						class="flex w-full flex-1 rounded-xl border-none bg-transparent"
						class:paste-glow={pastedLongContent}
					>
						{#if lastIsError}
							<ChatInput value="Sorry, something went wrong. Please try again." disabled={true} />
						{:else}
							<ChatInput
								placeholder={isReadOnly 
									? "This conversation is read-only." 
									: branchState 
										? `Branched from ${branchState.personaName}` 
										: "Ask anything"}
								{loading}
								bind:value={message}
								bind:files
								mimeTypes={activeMimeTypes}
								onsubmit={handleSubmit}
								{onPaste}
								disabled={isReadOnly || lastIsError}
								{modelIsMultimodal}
								bind:focused
							/>
						{/if}

						{#if loading}
							<StopGeneratingBtn
								onClick={() => onstop?.()}
								showBorder={true}
								classNames="absolute bottom-2 right-2 size-7 self-end rounded-full border bg-white text-black shadow transition-none dark:border-transparent dark:bg-gray-600 dark:text-white"
							/>
						{:else}
							<button
								class="btn absolute bottom-2 right-2 size-7 self-end rounded-full border bg-white text-black shadow transition-none enabled:hover:bg-white enabled:hover:shadow-inner dark:border-transparent dark:bg-gray-600 dark:text-white dark:hover:enabled:bg-black {!message ||
								isReadOnly
									? ''
									: '!bg-black !text-white dark:!bg-white dark:!text-black'}"
								disabled={!message || isReadOnly}
								type="submit"
								aria-label="Send message"
								name="submit"
							>
								<svg
									width="1em"
									height="1em"
									viewBox="0 0 32 32"
									fill="none"
									xmlns="http://www.w3.org/2000/svg"
								>
									<path
										fill-rule="evenodd"
										clip-rule="evenodd"
										d="M17.0606 4.23197C16.4748 3.64618 15.525 3.64618 14.9393 4.23197L5.68412 13.4871C5.09833 14.0729 5.09833 15.0226 5.68412 15.6084C6.2699 16.1942 7.21965 16.1942 7.80544 15.6084L14.4999 8.91395V26.7074C14.4999 27.5359 15.1715 28.2074 15.9999 28.2074C16.8283 28.2074 17.4999 27.5359 17.4999 26.7074V8.91395L24.1944 15.6084C24.7802 16.1942 25.7299 16.1942 26.3157 15.6084C26.9015 15.0226 26.9015 14.0729 26.3157 13.4871L17.0606 4.23197Z"
										fill="currentColor"
									/>
								</svg>
							</button>
						{/if}
					</div>
				{/if}
			</form>
		</div>
	</div>
</div>

<style lang="postcss">
	.paste-glow {
		animation: glow 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
		will-change: box-shadow;
	}

	@keyframes glow {
		0% {
			box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.8);
		}
		50% {
			box-shadow: 0 0 20px 4px rgba(59, 130, 246, 0.6);
		}
		100% {
			box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
		}
	}

	.router-badge-text {
		display: inline-block;
		position: relative;
		color: inherit;
	}

	.router-shimmer {
		display: inline-block;
		background-image: linear-gradient(
			90deg,
			rgba(156, 163, 175, 1) 0%,
			rgba(156, 163, 175, 0.6) 10%,
			rgba(156, 163, 175, 0.6) 50%,
			rgba(156, 163, 175, 0.6) 90%,
			rgba(156, 163, 175, 1) 100%
		);
		background-size: 220% 100%;
		animation: router-shimmer 2.8s linear infinite;
		background-clip: text;
		-webkit-background-clip: text;
		color: transparent;
		-webkit-text-fill-color: transparent;
	}

	:global(.dark) .router-shimmer {
		background-image: linear-gradient(
			90deg,
			rgba(255, 255, 255, 0.15) 0%,
			rgba(255, 255, 255, 0.7) 50%,
			rgba(255, 255, 255, 0.15) 100%
		);
	}

	@keyframes router-shimmer {
		0% {
			background-position: 200% 0;
		}
		100% {
			background-position: -200% 0;
		}
	}

	.loading-dots::after {
		content: "";
		animation: dots-content 0.9s steps(1, end) infinite;
	}
	@keyframes dots-content {
		0% {
			content: "";
		}
		33% {
			content: ".";
		}
		66% {
			content: "..";
		}
		88% {
			content: "...";
		}
	}
</style>