/*
  ai-thinking-steps.css — "AI is thinking" step list component.
  All classes prefixed .ats-
*/

.ats {
    display: flex;
    flex-direction: column;
}

.ats-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.ats-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}

.ats-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .78rem;
    flex-shrink: 0;
    transition: transform .15s ease;
}

.ats-icon--blue   { background: rgba(13, 110, 253, .12); color: #0d6efd; }
.ats-icon--purple { background: rgba(111, 66, 193, .12); color: #6f42c1; }
.ats-icon--green  { background: rgba(25, 135, 84, .12);  color: #198754; }
.ats-icon--red    { background: rgba(220, 53, 69, .12);  color: #dc3545; }

/* Mascot poses are full-color illustrations, not single-tone glyphs — drop
   the tinted circle backdrop and give them a bit more room to read clearly. */
.ats-icon--mascot {
    width: 40px;
    height: 40px;
    background: none;
}
.ats-mascot {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* The current step reads as "this is where things are right now" — bigger
   icon (mascot pose especially) and bigger text than the completed steps
   above it, not just a pulse. */
.ats-item--current .ats-icon {
    width: 40px;
    height: 40px;
    font-size: 1.05rem;
    animation: ats-pulse 1.4s ease-in-out infinite;
}
.ats-item--current .ats-icon--mascot {
    width: 60px;
    height: 60px;
    animation: ats-mascot-pulse 1.4s ease-in-out infinite;
}

.ats-line {
    width: 2px;
    flex: 1;
    min-height: 16px;
    background: var(--border-color);
    margin: 2px 0;
}

.ats-text {
    font-size: .85rem;
    color: var(--text-color);
    padding-top: 5px;
    padding-bottom: 10px;
}

.ats-item--last .ats-text { padding-bottom: 2px; }

.ats-text--pulse {
    color: var(--text-color);
    font-size: 1rem;
    font-weight: 500;
    padding-top: 10px;
}

.ats-text--error {
    color: #dc3545;
    font-weight: 500;
}

/* Animated "..." on the current in-progress step — a lightweight signal
   that something's actually happening, not just a static label. */
.ats-dots {
    display: inline-flex;
    gap: 2px;
    margin-left: 2px;
    vertical-align: baseline;
}
.ats-dots span {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: currentColor;
    opacity: .3;
    animation: ats-dot-bounce 1.2s ease-in-out infinite;
}
.ats-dots span:nth-child(2) { animation-delay: .15s; }
.ats-dots span:nth-child(3) { animation-delay: .3s; }

@keyframes ats-dot-bounce {
    0%, 80%, 100% { opacity: .3; transform: translateY(0); }
    40%           { opacity: 1;  transform: translateY(-2px); }
}

@keyframes ats-pulse {
    0%, 100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(13, 110, 253, .25); }
    50%      { transform: scale(1.08); box-shadow: 0 0 0 4px rgba(13, 110, 253, 0); }
}
@keyframes ats-mascot-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.06); }
}