/**
 * CLEANUP-000H: MigratingStep — design token polish
 * Same loading pattern as ScanningStep.
 */

.StepContainer {
  padding: var(--spacing-6, 24px);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4, 16px);
}

.StepTitle {
  font-size: var(--font-size-large, 16px);
  font-weight: 600;
  color: var(--theme-color-fg-highlight, var(--theme-color-fg-default));
  margin: 0;
}

.LoadingContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-8, 32px) var(--spacing-4, 16px);
  gap: var(--spacing-4, 16px);
}

.Spinner {
  width: 48px;
  height: 48px;
  border: 3px solid var(--theme-color-bg-3);
  border-top-color: var(--theme-color-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  flex-shrink: 0;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.LoadingText {
  font-size: var(--font-size-default, 13px);
  color: var(--theme-color-fg-default-shy);
  text-align: center;
  line-height: 1.5;
}

.CurrentFile {
  font-size: var(--font-size-small, 12px);
  color: var(--theme-color-fg-default-shy);
  font-family: var(--font-family-mono, monospace);
  text-align: center;
  max-width: 400px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ProgressBar {
  width: 100%;
  max-width: 300px;
  height: 4px;
  background-color: var(--theme-color-bg-3);
  border-radius: 99px;
  overflow: hidden;
}

.ProgressFill {
  height: 100%;
  background-color: var(--theme-color-primary);
  border-radius: 99px;
  transition: width 300ms ease;
}

.MigrationLog {
  width: 100%;
  max-height: 160px;
  overflow-y: auto;
  background-color: var(--theme-color-bg-1);
  border: 1px solid var(--theme-color-border-default);
  border-radius: var(--border-radius-small, 4px);
  padding: var(--spacing-2, 8px) var(--spacing-3, 12px);
  font-family: var(--font-family-mono, monospace);
  font-size: var(--font-size-small, 12px);
  color: var(--theme-color-fg-default-shy);
  line-height: 1.6;
}
