:root {
    --dot-size: 8px; /* size of each dot */
    --dot-gap: 6px; /* spacing between dots */
    --dot-color: #111827; /* neutral-900 */
    --dot-speed: 0.9s; /* bounce duration */
    --dot-lift: 6px; /* bounce height */
    --dot-opacity: 0.5; /* base opacity */
}


.typing-dots {
    display: inline-flex;
    align-items: flex-end;
    gap: var(--dot-gap);
    height: calc(var(--dot-size) + var(--dot-lift));
    background: #f1f3f4;
    padding: 20px 10px 10px 10px;
    border-radius: 100px;
    box-shadow: 2px 3px 3px #636363;
}


.typing-dots .dot {
    width: var(--dot-size);
    height: var(--dot-size);
    border-radius: 50%;
    background: var(--dot-color);
    opacity: var(--dot-opacity);
    transform: translateY(0);
    animation: dot-bounce var(--dot-speed) ease-in-out infinite;
}


.typing-dots .dot:nth-child(2) {
    animation-delay: 0.15s;
}
.typing-dots .dot:nth-child(3) {
    animation-delay: 0.3s;
}


@keyframes dot-bounce {
    0%, 80%, 100% { transform: translateY(0); opacity: var(--dot-opacity); }
    40% { transform: translateY(calc(var(--dot-lift) * -1)); opacity: 1; }
}


/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .typing-dots .dot { animation: none; opacity: 1; }
}