<div class="flex bg-black/95 text-gray-300/90">
	<div class="w-64">
		<button class="text-white p-4 border border-white">New chat</button>
	</div>
	<div class="relative flex-1 overflow-y-auto">
		<div class="mx-auto flex h-screen max-h-screen max-w-4xl flex-col gap-8 pt-12">
			<div class="flex items-start justify-start gap-4 leading-relaxed">
				<img
					src="https://huggingface.co./avatars/2edb18bd0206c16b433841a47f53fa8e.svg"
					class="mt-5 h-4 w-4 flex-none rounded-full shadow-lg shadow-white/40"
				/>
				<div
					class="text-blue-00 group relative rounded-2xl bg-gradient-to-br from-gray-800/50 to-gray-800/20 px-5 pt-4 pb-5"
				>
					Lorem ipsum, dolor sit amet consectetur adipisicing eLorem ipsum, dolor sit amet
					consectetur adipisicing eLorem ipsum, dolor sit amet consectetur adipisicing eLorem ipsum,
					dolor sit amet consectetur adipisicing eLorem ipsum, dolor sit amet consectetur
					adipisicing eLorem ipsum, dolor sit amet consectetur adipisicing eLorem ipsum, dolor sit
					amet consectetur adipisicing elit. Dolorum maiores quo officiis?
				</div>
			</div>
			<div class="mb-2 flex items-start justify-start gap-4 text-gray-300/70">
				<div class="mt-4 h-4 w-4 flex-none rounded-full" />
				<div class="rounded-2xl px-4 py-3.5">
					Lorem ipsum, dolor sit amet consectetur adipisicing eLorem ipsum, dolor sit amet
					consectetur adipisicing eLorem ipsum
				</div>
			</div>
			<div class="flex items-start justify-start gap-4 leading-relaxed">
				<img
					src="https://huggingface.co./avatars/2edb18bd0206c16b433841a47f53fa8e.svg"
					class="mt-5 h-3 w-3 flex-none rounded-full bg-white"
				/>
				<div
					class="text-blue-00 rounded-2xl bg-gradient-to-br from-gray-800/50 to-gray-800/20 px-5 pt-4 pb-5"
				>
					<p>
						Lorem ipsum, dolor sit amet consectetur adipisicing eLorem ipsum, dolor sit amet
						consectetur adipisicing eLorem ipsum, dolor sit amet consectetur adipisicing eLorem
						ipsum, dolor sit
					</p>
					<div class="mt-4 flex flex-wrap gap-4 first:mt-0">
						<img
							src="https://lexica-serve-encoded-images2.sharif.workers.dev/full_jpg/7a6fcbc9-3440-49b4-9c33-eaadc59a462d"
							alt=""
							class="max-h-[360px] rounded-xl"
						/>
						<img
							src="https://lexica-serve-encoded-images2.sharif.workers.dev/full_jpg/11d91b58-4305-45de-b608-1142ddc118a7"
							alt=""
							class="max-h-[360px] rounded-xl"
						/>
					</div>
				</div>
			</div>
			<div class="flex items-start justify-start gap-4 leading-relaxed">
				<img
					src="https://huggingface.co./avatars/2edb18bd0206c16b433841a47f53fa8e.svg"
					class="mt-5 h-3 w-3 flex-none rounded-full bg-white"
				/>
				<div
					class="text-blue-00 rounded-2xl bg-gradient-to-br from-gray-800/50 to-gray-800/20 px-5 pt-4 pb-5"
				>
					<p>
						Lorem ipsum, dolor sit amet consectetur adipisicing eLorem ipsum, dolor sit amet
						consectetur adipisicing eLorem ipsum, dolor sit amet consectetur adipisicing eLorem
						ipsum, dolor sit
					</p>
					<div class="mt-4 flex flex-wrap gap-4 first:mt-0">
						<img
							src="https://lexica-serve-encoded-images2.sharif.workers.dev/full_jpg/7a6fcbc9-3440-49b4-9c33-eaadc59a462d"
							alt=""
							class="max-h-[360px] rounded-xl"
						/>
						<img
							src="https://lexica-serve-encoded-images2.sharif.workers.dev/full_jpg/11d91b58-4305-45de-b608-1142ddc118a7"
							alt=""
							class="max-h-[360px] rounded-xl"
						/>
					</div>
				</div>
			</div>
			<div class="flex items-start justify-start gap-4 leading-relaxed">
				<img
					src="https://huggingface.co./avatars/2edb18bd0206c16b433841a47f53fa8e.svg"
					class="mt-5 h-3 w-3 flex-none rounded-full bg-white"
				/>
				<div
					class="text-blue-00 rounded-2xl bg-gradient-to-br from-gray-800/50 to-gray-800/20 px-5 pt-4 pb-5"
				>
					<p>
						Lorem ipsum, dolor sit amet consectetur adipisicing eLorem ipsum, dolor sit amet
						consectetur adipisicing eLorem ipsum, dolor sit amet consectetur adipisicing eLorem
						ipsum, dolor sit
					</p>
					<div class="mt-4 flex flex-wrap gap-4 first:mt-0">
						<img
							src="https://lexica-serve-encoded-images2.sharif.workers.dev/full_jpg/7a6fcbc9-3440-49b4-9c33-eaadc59a462d"
							alt=""
							class="max-h-[360px] rounded-xl"
						/>
						<img
							src="https://lexica-serve-encoded-images2.sharif.workers.dev/full_jpg/11d91b58-4305-45de-b608-1142ddc118a7"
							alt=""
							class="max-h-[360px] rounded-xl"
						/>
					</div>
				</div>
			</div>
			<div class="flex items-start justify-start gap-4 text-gray-300">
				<div class="mt-4 h-4 w-4 flex-none rounded-full" />
				<div class="rounded-2xl px-4 py-3.5">
					Lorem ipsum, dolor sit amet consectetur adipisicing eLorem ipsum, dolor sit amet
					consectetur adipisicing eLorem ipsum
				</div>
			</div>
			<div class="flex items-start justify-start gap-4 leading-relaxed">
				<img
					src="https://huggingface.co./avatars/2edb18bd0206c16b433841a47f53fa8e.svg"
					class="mt-5 h-4 w-4 flex-none rounded-full shadow-lg shadow-white/40"
				/>
				<div
					class="group relative rounded-2xl bg-gradient-to-br from-gray-800/50 to-gray-800/20 px-5 pt-4 pb-5 text-blue-900"
				>
					<div class="h-4 w-2 animate-pulse bg-white/20" />
				</div>
			</div>
		</div>
		<div class="fixed inset-x-0 bottom-12 mx-auto max-w-4xl">
			<div
				class="w-full rounded-2xl border border-black bg-gradient-to-br from-gray-800/40 to-gray-800/50 px-4 py-3.5 shadow-2xl shadow-white/5 outline-none ring-gray-700 focus:ring-1"
				role="textbox"
				contenteditable
			>
				Ask anything...
			</div>
			<!-- <textarea class="w-full rounded-2xl bg-slate-800/80 px-4 py-3.5 shadow-xl" rows="1" placeholder="Write anything..."></textarea> -->
		</div>
	</div>
</div>
