.thinking {
    display: flex;
    gap: 8px;
}

.thinking .dot {
    background-color: var(--bs-primary-bg-subtle);
    width: 12px;
    height: 12px;
    border-radius: 100%;
    animation-name: thinking;
    animation-duration: 1.2s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

.thinking .dot:nth-child(1) {
    animation-delay: 200ms;
}

.thinking .dot:nth-child(2) {
    animation-delay: 300ms;
}

.thinking .dot:nth-child(3) {
    animation-delay: 400ms;
}

@keyframes thinking {
    0% { transform: translateY(0px) }
    25% { transform: translateY(-12px) }
    45% { transform: translateY(0px) }
}