/* Бегущие точки — в конце строки, где ИИ работает и человек ждёт
   (<x-progress-dots />): «ИИ изучает документ «ТЗ.docx» …». Три точки по
   очереди вспыхивают — работа идёт. Цвет — цвет текста строки. Без
   движения у тех, кто его отключил.

   Отдельным файлом, а не в app.css: нужны в обоих контурах, а стили
   пользовательского контура админка не подключает (и наоборот). Файл
   подключают оба layout контура и render hook админской панели
   (filament/admin-styles). */

.progress-dots {
    display: inline-flex;
    gap: 3px;
    margin-left: 4px;
    vertical-align: middle;
}

.progress-dots i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    opacity: .25;
    animation: progress-dot 1.2s ease-in-out infinite;
}

.progress-dots i:nth-child(2) { animation-delay: .2s; }
.progress-dots i:nth-child(3) { animation-delay: .4s; }

@keyframes progress-dot {
    0%, 80%, 100% { opacity: .25; }
    40% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .progress-dots i {
        animation: none;
        opacity: .6;
    }
}