.container {
	display: flex;
	align-items: center;
	gap: 4px;
	height: 24px;
	padding: 0 12px;
	font-size: 0.75rem;
}

.dots {
	display: flex;
	align-items: center;
	gap: 2px;
}

.dot {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background-color: var(--text-primary);
	animation: typingBounce 1.4s infinite ease-in-out;
}

.dot:nth-child(1) { animation-delay: 0s; }
.dot:nth-child(2) { animation-delay: 0.2s; }
.dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes typingBounce {
	0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
	40% { opacity: 1; transform: scale(1); }
}

.text {
	color: var(--text-secondary);
	font-weight: 500;
}
