/* ==========================================================================
   Alternivite — Analysis Status Component
   Reusable document analysis progress tracker
   ========================================================================== */

/* Container */
.as {
   background: var(--bg-primary);
   border: 1px solid var(--border-primary);
   border-radius: var(--radius-lg);
   padding: var(--space-5);
   max-width: 560px;
   font-family: var(--font-sans);
}

.as-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: var(--space-3);
   margin-bottom: var(--space-5);
}

.as-doc {
   display: flex;
   align-items: center;
   gap: var(--space-3);
   min-width: 0;
}

.as-doc-icon {
   flex-shrink: 0;
   width: 36px;
   height: 36px;
   border-radius: var(--radius-md);
   background: var(--color-primary-50);
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--color-primary-600);
}

.as-doc-name {
   font-size: var(--text-sm);
   font-weight: var(--font-semibold);
   color: var(--text-primary);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

.as-doc-meta {
   font-size: var(--text-xs);
   color: var(--text-tertiary);
   margin-top: 2px;
}

/* Status Badge */
.as-badge {
   flex-shrink: 0;
   display: inline-flex;
   align-items: center;
   gap: 6px;
   padding: 4px 10px;
   border-radius: var(--radius-full);
   font-size: var(--text-xs);
   font-weight: var(--font-semibold);
   line-height: 1;
   white-space: nowrap;
}

.as-badge--queued {
   background: var(--color-neutral-100);
   color: var(--text-secondary);
}

.as-badge--processing {
   background: var(--color-primary-50);
   color: var(--color-primary-700);
}

.as-badge--completed {
   background: var(--color-success-50);
   color: var(--color-success-700);
}

.as-badge--failed {
   background: var(--color-error-50);
   color: var(--color-error-700);
}

.as-badge--retrying {
   background: var(--color-warning-50);
   color: var(--color-warning-700);
}

/* Status dot */
.as-dot {
   width: 7px;
   height: 7px;
   border-radius: 50%;
   background: currentColor;
   flex-shrink: 0;
}

.as-badge--processing .as-dot {
   animation: as-pulse 1.5s ease-in-out infinite;
}

.as-badge--retrying .as-dot {
   animation: as-pulse 1s ease-in-out infinite;
}

@keyframes as-pulse {
   0%, 100% { opacity: 1; }
   50% { opacity: 0.3; }
}

/* Workflow Pipeline */
.as-pipeline {
   display: flex;
   align-items: flex-start;
   gap: 0;
   margin-bottom: var(--space-4);
}

.as-step {
   flex: 1;
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   position: relative;
}

/* Connector line between steps */
.as-step:not(:last-child)::after {
   content: '';
   position: absolute;
   top: 14px;
   left: calc(50% + 14px);
   right: calc(-50% + 14px);
   height: 2px;
   background: var(--border-primary);
   transition: background var(--duration-normal) var(--ease-default);
}

.as-step--done:not(:last-child)::after {
   background: var(--color-success-400);
}

.as-step--active:not(:last-child)::after {
   background: linear-gradient(90deg, var(--color-primary-400) 0%, var(--border-primary) 100%);
}

/* Step circle */
.as-step-dot {
   width: 28px;
   height: 28px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   background: var(--color-neutral-100);
   border: 2px solid var(--border-primary);
   color: var(--text-tertiary);
   position: relative;
   z-index: 1;
   transition: all var(--duration-normal) var(--ease-default);
}

.as-step--done .as-step-dot {
   background: var(--color-success-500);
   border-color: var(--color-success-500);
   color: white;
}

.as-step--active .as-step-dot {
   background: var(--color-primary-500);
   border-color: var(--color-primary-500);
   color: white;
   animation: as-ring 2s ease-in-out infinite;
}

.as-step--failed .as-step-dot {
   background: var(--color-error-500);
   border-color: var(--color-error-500);
   color: white;
}

@keyframes as-ring {
   0%, 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.3); }
   50% { box-shadow: 0 0 0 6px rgba(99, 102, 241, 0); }
}

/* Step label */
.as-step-label {
   margin-top: var(--space-2);
   font-size: 11px;
   font-weight: var(--font-medium);
   color: var(--text-tertiary);
   line-height: 1.3;
   max-width: 80px;
}

.as-step--done .as-step-label {
   color: var(--color-success-600);
}

.as-step--active .as-step-label {
   color: var(--color-primary-600);
   font-weight: var(--font-semibold);
}

.as-step--failed .as-step-label {
   color: var(--color-error-600);
}

/* Progress bar */
.as-progress {
   height: 4px;
   background: var(--bg-secondary);
   border-radius: var(--radius-full);
   overflow: hidden;
   margin-bottom: var(--space-4);
}

.as-progress-bar {
   height: 100%;
   background: var(--color-primary-500);
   border-radius: var(--radius-full);
   transition: width 0.6s var(--ease-default);
   width: 0%;
}

.as-progress--completed .as-progress-bar {
   background: var(--color-success-500);
   width: 100%;
}

.as-progress--failed .as-progress-bar {
   background: var(--color-error-500);
}

/* Footer: timestamp + retry */
.as-footer {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: var(--space-3);
}

.as-time {
   font-size: var(--text-xs);
   color: var(--text-tertiary);
}

.as-retry-btn {
   display: inline-flex;
   align-items: center;
   gap: 5px;
   padding: 5px 12px;
   font-size: var(--text-xs);
   font-weight: var(--font-semibold);
   color: var(--color-primary-600);
   background: transparent;
   border: 1px solid var(--color-primary-300);
   border-radius: var(--radius-md);
   cursor: pointer;
   transition: all var(--duration-fast) var(--ease-default);
}

.as-retry-btn:hover {
   background: var(--color-primary-50);
   border-color: var(--color-primary-400);
}

.as-retry-btn:focus-visible {
   outline: 2px solid var(--border-focus);
   outline-offset: 2px;
}

/* Status message */
.as-message {
   font-size: var(--text-xs);
   color: var(--text-secondary);
   margin-bottom: var(--space-4);
   padding: var(--space-3);
   background: var(--bg-secondary);
   border-radius: var(--radius-md);
   line-height: var(--leading-relaxed);
}

.as-message--error {
   background: var(--color-error-50);
   color: var(--color-error-700);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 480px) {
   .as {
      padding: var(--space-4);
   }

   .as-step-label {
      font-size: 10px;
      max-width: 60px;
   }

   .as-step-dot {
      width: 24px;
      height: 24px;
   }

   .as-step:not(:last-child)::after {
      top: 12px;
      left: calc(50% + 12px);
      right: calc(-50% + 12px);
   }

   .as-header {
      flex-wrap: wrap;
   }
}