src/lib/components/PicletGenerator/PicletGenerator.svelte

<script lang="ts">
  import type { PicletGeneratorProps, PicletWorkflowState, CaptionType, CaptionLength, PicletStats } from '$lib/types';
  import type { PicletInstance } from '$lib/db/schema';
  import UploadStep from './UploadStep.svelte';
  import WorkflowProgress from './WorkflowProgress.svelte';
  import PicletResult from './PicletResult.svelte';
  import { removeBackground } from '$lib/utils/professionalImageProcessing';
  import { extractPicletMetadata } from '$lib/services/picletMetadata';
  import { savePicletInstance, generatedDataToPicletInstance } from '$lib/db/piclets';
  import { PicletType, TYPE_DATA } from '$lib/types/picletTypes';
  import { EncounterService } from '$lib/db/encounterService';
  // import { withQwenTimeout } from '$lib/utils/qwenTimeout'; // Unused since qwen is disabled
  
  interface Props extends PicletGeneratorProps {
    // Trainer mode props
    isTrainerMode?: boolean;
    onTrainerImageCompleted?: (imagePath: string, picletId: number) => void;
    onTrainerImageFailed?: (imagePath: string, error: string) => void;
  }
  
  let { 
    joyCaptionClient, 
    fluxClient, 
    commandClient,
    
    // Unused clients (kept for future use)
    // hunyuanClient,
    // zephyrClient, 
    // qwenClient,
    // dotsClient,
    
    isTrainerMode = false,
    onTrainerImageCompleted,
    onTrainerImageFailed
  }: Props = $props();
  
  // Text generation client management - now using Command client
  type TextGenerationClient = 'hunyuan' | 'command' | 'zephyr' | 'qwen' | 'dots';
  let currentTextClient: TextGenerationClient = $state('command'); // Fixed to Command client only
  
  // Get the active text generation client (now only returns Command client)
  const getActiveTextClient = () => {
    if (!commandClient) {
      console.warn('Command client not yet initialized');
      return null;
    }
    return commandClient; // Only Command client is active
    
    // Unused client switching (kept for future use)
    // switch (currentTextClient) {
    //   case 'hunyuan': return hunyuanClient;
    //   case 'command': return commandClient;
    //   case 'zephyr': return zephyrClient;
    //   case 'qwen': return qwenClient;
    //   case 'dots': return dotsClient;
    //   default: return commandClient;
    // }
  };
  
  // Unified text generation function (now using Command client)
  const generateText = async (prompt: string): Promise<string> => {
    const client = getActiveTextClient();
    if (!client) {
      throw new Error(`Command client is not available`);
    }
    
    console.log(`Generating text with Command client...`);
    
    // Command client expects a message format with text and files
    // Using the generate function (fn_index based on ChatInterface)
    const message = {
      text: prompt,
      files: []  // No images for text-only generation
    };
    
    // ChatInterface expects: message, history, max_new_tokens
    const result = await client.predict("/chat", {
      message: message,
      max_new_tokens: 2000  // Max from the space
    });
    
    return result.data || '';
  };
  
  let workflowState: PicletWorkflowState = $state({
    currentStep: 'upload',
    userImage: null,
    imageCaption: null,
    picletConcept: null,
    picletStats: null,
    imagePrompt: null,
    picletImage: null,
    error: null,
    isProcessing: false
  });
  
  // Queue state for multi-image processing
  let imageQueue: File[] = $state([]);
  let currentImageIndex: number = $state(0);
  
  // Track trainer image metadata when in trainer mode
  let trainerImagePaths: string[] = $state([]);
  
  const IMAGE_GENERATION_PROMPT = (concept: string) => `Extract ONLY the visual appearance from this monster concept and describe it in one concise sentence:
"${concept}"

Focus on: colors, body shape, eyes, limbs, mouth, and key visual features. Omit backstory, abilities, and non-visual details.`;
  

  async function importPiclet(picletData: PicletInstance) {
    workflowState.isProcessing = true;
    workflowState.currentStep = 'complete';
    
    try {
      // Save the imported piclet
      const savedId = await savePicletInstance(picletData);
      
      // Create a success workflowState similar to generation
      workflowState.picletImage = {
        imageUrl: picletData.imageUrl,
        imageData: picletData.imageData,
        seed: 0,
        prompt: 'Imported piclet'
      };
      
      // Show import success
      workflowState.isProcessing = false;
      alert(`Successfully imported ${picletData.nickname || picletData.typeId}!`);
      
      // Reset to allow another import/generation
      setTimeout(() => reset(), 2000);
    } catch (error) {
      workflowState.error = `Failed to import piclet: ${error}`;
      workflowState.isProcessing = false;
    }
  }

  async function handleImageSelected(file: File) {
    if (!joyCaptionClient || !fluxClient) {
      workflowState.error = "Services not connected. Please wait...";
      return;
    }
    
    // Single image upload - clear queue and process normally
    imageQueue = [];
    currentImageIndex = 0;
    
    workflowState.userImage = file;
    workflowState.error = null;
    
    // Check if this is a piclet card with metadata
    const picletData = await extractPicletMetadata(file);
    if (picletData) {
      // Import existing piclet
      await importPiclet(picletData);
    } else {
      // Generate new piclet
      startWorkflow();
    }
  }
  
  async function handleImagesSelected(files: File[]) {
    if (!joyCaptionClient || !fluxClient) {
      workflowState.error = "Services not connected. Please wait...";
      return;
    }
    
    // Multi-image upload - set up queue and start with first image
    imageQueue = files;
    currentImageIndex = 0;
    
    await processCurrentImage();
  }
  
  async function processCurrentImage() {
    if (currentImageIndex >= imageQueue.length) {
      // Queue completed
      console.log('All images processed!');
      return;
    }
    
    const currentFile = imageQueue[currentImageIndex];
    workflowState.userImage = currentFile;
    workflowState.error = null;
    
    // Check if this is a piclet card with metadata
    const picletData = await extractPicletMetadata(currentFile);
    if (picletData) {
      // Import existing piclet
      await importPiclet(picletData);
      // Auto-advance to next image after import
      await advanceToNextImage();
    } else {
      // Generate new piclet
      startWorkflow();
    }
  }
  
  async function advanceToNextImage() {
    currentImageIndex++;
    
    if (currentImageIndex < imageQueue.length) {
      // Process next image
      setTimeout(() => processCurrentImage(), 1000); // Small delay for better UX
    } else if (isTrainerMode) {
      // In trainer mode, don't reset - wait for scanner to queue next image
      console.log('🔧 DEBUG: Trainer mode - waiting for next image to be queued');
      // Reset current image index for next image
      currentImageIndex = 0;
      imageQueue = [];
      // Don't call reset() - stay ready to process next trainer image
    } else {
      // Queue completed - reset to single image mode
      imageQueue = [];
      currentImageIndex = 0;
      reset();
    }
  }
  
  async function startWorkflow() {
    workflowState.isProcessing = true;
    
    try {
      // Step 1: Generate detailed object description with joy-caption
      await captionImage();
      await new Promise(resolve => setTimeout(resolve, 100)); // Small delay for workflowState update
      
      // Step 2: Generate free-form monster concept with qwen3
      await generateConcept();
      await new Promise(resolve => setTimeout(resolve, 100)); // Small delay for workflowState update
      
      // Step 3: Extract simple stats from enhanced concept
      await extractSimpleStats();
      await new Promise(resolve => setTimeout(resolve, 100)); // Small delay for workflowState update
      
      // Step 4: Generate image prompt with qwen3
      await generateImagePrompt();
      await new Promise(resolve => setTimeout(resolve, 100)); // Small delay for workflowState update
      
      // Step 5: Generate monster image
      await generateMonsterImage();
      
      // Step 6: Auto-save the piclet as caught (since scanning now auto-captures)
      await autoSavePicletAsCaught();
      
      workflowState.currentStep = 'complete';
      
      // If processing a queue or in trainer mode, auto-advance to next image after a short delay
      if (imageQueue.length > 1 || isTrainerMode) {
        setTimeout(() => advanceToNextImage(), 2000); // 2 second delay to show completion
      }
    } catch (err) {
      console.error('Workflow error:', err);
      
      // Check for GPU quota error
      if (err && typeof err === 'object' && 'message' in err) {
        const errorMessage = String(err.message);
        if (errorMessage.includes('exceeded your GPU quota') || errorMessage.includes('GPU quota')) {
          workflowState.error = 'GPU quota exceeded! You need to sign in with Hugging Face for free GPU time, or upgrade to Hugging Face Pro for more quota.';
        } else {
          workflowState.error = errorMessage;
        }
      } else if (err instanceof Error) {
        workflowState.error = err.message;
      } else {
        workflowState.error = 'An unknown error occurred';
      }
    } finally {
      workflowState.isProcessing = false;
    }
  }
  
  function handleAPIError(error: any): never {
    console.error('API Error:', error);
    
    // Check if it's a GPU quota error
    if (error && typeof error === 'object' && 'message' in error) {
      const errorMessage = String(error.message);
      if (errorMessage.includes('exceeded your GPU quota') || errorMessage.includes('GPU quota')) {
        throw new Error('GPU quota exceeded! You need to sign in with Hugging Face for free GPU time, or upgrade to Hugging Face Pro for more quota.');
      }
      throw new Error(errorMessage);
    }
    
    // Check if error has a different structure (like the status object from the logs)
    if (error && typeof error === 'object' && 'type' in error && error.type === 'status') {
      const statusError = error as any;
      if (statusError.message && statusError.message.includes('GPU quota')) {
        throw new Error('GPU quota exceeded! You need to sign in with Hugging Face for free GPU time, or upgrade to Hugging Face Pro for more quota.');
      }
      throw new Error(statusError.message || 'API request failed');
    }
    
    throw error;
  }
  
  async function captionImage() {
    workflowState.currentStep = 'captioning';
    
    if (!joyCaptionClient || !workflowState.userImage) {
      throw new Error('Caption service not available or no image provided');
    }
    
    try {
      const output = await joyCaptionClient.predict("/stream_chat", [
        workflowState.userImage,  // input_image
        "Descriptive",            // caption_type
        "long",                   // caption_length
        [],                       // extra_options
        "",                       // name_input
        ""                        // custom_prompt (empty for default descriptive captioning)
      ]);
      
      const [, caption] = output.data;
      
      // Store the detailed object description  
      workflowState.imageCaption = caption;
      console.log('Detailed object description generated:', caption);
    } catch (error) {
      handleAPIError(error);
    }
  }
  
  async function generateConcept() {
    workflowState.currentStep = 'conceptualizing';
    
    const activeClient = getActiveTextClient();
    if (!activeClient || !workflowState.imageCaption) {
      throw new Error(`${currentTextClient} service not available or no image caption provided`);
    }
    
    const conceptPrompt = `Based on this detailed object description, create a Pokémon-style monster that transforms the object into an imaginative creature. The monster should clearly be inspired by the object's appearance but reimagined as a living monster.

Object description: "${workflowState.imageCaption}"

Guidelines:
- Take the object's key visual elements (colors, shapes, materials) incorporating all of them into a single creature design
- Add eyes (can be glowing, mechanical, multiple, etc.) positioned where they make sense
- Include limbs (legs, arms, wings, tentacles) that grow from or replace parts of the object
- Add a mouth, beak, or feeding apparatus if appropriate
- Add creature elements like tail, fins, claws, horns, etc where fitting

Format your response exactly as follows:
\`\`\`md
# Object Rarity
{Assess how rare the object is based on real-world availability and value. Rare objects give strong monsters while common objects give weak ones. Use: common, uncommon, rare, or legendary}

# Monster Name
{Creative name that hints at the original object, 11 letters max}

# Primary Type
{Based on the object, choose the most fitting primary type: beast, bug, aquatic, flora, mineral, space, machina, structure, culture, or cuisine}

# Monster Description
{Detailed physical description showing how the object becomes a creature. Ensure the creature uses all the unique attributes of the object. Include colors, shapes, materials, eyes, limbs, mouth, and distinctive features. This section will be used for battle narratives and lore.}

# Monster Image Prompt
{Extensive visual description of the Pokémon style monster for image generation. Focus on key visual elements: body shape, colors, distinctive features, pose. Keep this optimized for AI image generation.}
\`\`\``;
    
    try {
      const responseText = await generateText(conceptPrompt);
      
      if (!responseText || responseText.trim() === '') {
        throw new Error('Failed to generate monster concept');
      }
      
      // Parse markdown code block response
      let cleanedResponse = responseText.trim();
      
      // Check if response is wrapped in markdown code blocks
      if (cleanedResponse.includes('```')) {
        // Handle different code block formats: ```md, ```, ```markdown
        const codeBlockRegex = /```(?:md|markdown)?\s*\n([\s\S]*?)```/;
        const match = cleanedResponse.match(codeBlockRegex);
        
        if (match && match[1]) {
          cleanedResponse = match[1].trim();
          console.log('Extracted content from markdown code block');
        } else {
          // Fallback: try to extract content between any ``` blocks
          const simpleMatch = cleanedResponse.match(/```([\s\S]*?)```/);
          if (simpleMatch && simpleMatch[1]) {
            cleanedResponse = simpleMatch[1].trim();
            console.log('Extracted content from generic code block');
          }
        }
      }
      
      // Ensure the response contains expected markdown headers
      if (!cleanedResponse.includes('# Object Rarity') || !cleanedResponse.includes('# Monster Name') || !cleanedResponse.includes('# Monster Image Prompt')) {
        console.warn('Response does not contain expected markdown structure (missing Object Rarity, Monster Name, or Monster Image Prompt)');
      }
      
      workflowState.picletConcept = cleanedResponse;
      console.log('Monster concept generated:', cleanedResponse);
    } catch (error) {
      handleAPIError(error);
    }
  }
  
  async function generateImagePrompt() {
    workflowState.currentStep = 'promptCrafting';
    
    const activeClient = getActiveTextClient();
    if (!activeClient || !workflowState.picletConcept || !workflowState.imageCaption) {
      throw new Error(`HunyuanTurbos service not available or no concept/caption available for prompt generation`);
    }
    
    // Extract the Monster Image Prompt from the structured concept
    const imagePromptMatch = workflowState.picletConcept.match(/# Monster Image Prompt\s*\n([\s\S]*?)(?=^#|$)/m);
    
    if (imagePromptMatch && imagePromptMatch[1]) {
      workflowState.imagePrompt = imagePromptMatch[1].trim();
      console.log('Extracted image prompt for generation:', workflowState.imagePrompt);
      return; // Skip fallback call since we have the prompt
    }
    
    // Fallback: if format parsing fails, use qwen3 to extract visual description
    const imagePromptPrompt = `Based on this monster concept, extract ONLY the visual description for image generation:

MONSTER CONCEPT:
"""
${workflowState.picletConcept}
"""

Create a concise visual description (1-3 sentences, max 100 words). Focus only on colors, shapes, materials, eyes, limbs, mouth, and distinctive features. Omit all non-visual information like abilities and backstory.`;
    
    try {
      const responseText = await generateText(imagePromptPrompt);
      
      if (!responseText || responseText.trim() === '') {
        throw new Error('Failed to generate image prompt');
      }
      
      workflowState.imagePrompt = responseText.trim();
      console.log('Image prompt generated:', workflowState.imagePrompt);
    } catch (error) {
      handleAPIError(error);
    }
  }
  
  async function generateMonsterImage() {
    workflowState.currentStep = 'generating';
    
    if (!fluxClient || !workflowState.imagePrompt || !workflowState.picletStats) {
      throw new Error('Image generation service not available or no prompt/stats');
    }
    
    // The image prompt should already be generated by generateImagePrompt() in the workflow
    
    // Get tier for image quality enhancement
    const tier = workflowState.picletStats.tier || 'medium';
    const tierDescriptions = {
      low: 'simple and iconic design',
      medium: 'detailed and well-crafted design', 
      high: 'highly detailed and impressive design with special effects',
      legendary: 'highly detailed and majestic design with dramatic lighting and aura effects'
    };
    
    try {
      const output = await fluxClient.predict("/infer", [
        `${workflowState.imagePrompt}\nNow generate an Pokémon Anime image of the monster in an idle pose with a plain dark-grey background. This is a ${tier} tier monster with a ${tierDescriptions[tier as keyof typeof tierDescriptions]}. The monster should not be attacking or in motion. The full monster must be visible within the frame.`,
        0,      // seed
        true,   // randomizeSeed
        1024,   // width
        1024,   // height
        4       // steps
      ]);
      
      const [image, usedSeed] = output.data;
      let url: string | undefined;
      
      if (typeof image === "string") url = image;
      else if (image && image.url) url = image.url;
      else if (image && image.path) url = image.path;
      
      if (url) {
        // Process the image to remove background using professional AI method
        console.log('Processing image for background removal...');
        try {
          const transparentBase64 = await removeBackground(url);
          workflowState.picletImage = {
            imageUrl: url,
            imageData: transparentBase64,
            seed: usedSeed,
            prompt: workflowState.imagePrompt
          };
          console.log('Background removal completed successfully');
        } catch (processError) {
          console.error('Failed to process image for background removal:', processError);
          // Fallback to original image
          workflowState.picletImage = {
            imageUrl: url,
            seed: usedSeed,
            prompt: workflowState.imagePrompt
          };
        }
      } else {
        throw new Error('Failed to generate monster image');
      }
    } catch (error) {
      handleAPIError(error);
    }
  }
  
  async function extractSimpleStats() {
    workflowState.currentStep = 'statsGenerating';
    
    if (!workflowState.picletConcept) {
      throw new Error('No concept available for stats extraction');
    }
    
    try {
      // Extract monster name
      const monsterNameMatch = workflowState.picletConcept.match(/# Monster Name\s*\n([\s\S]*?)(?=^#|$)/m);
      let monsterName = monsterNameMatch ? monsterNameMatch[1].trim() : 'Unknown Monster';
      
      // Clean and truncate name
      if (monsterName.includes(',')) {
        monsterName = monsterName.split(',')[0].trim();
      }
      if (monsterName.length > 12) {
        monsterName = monsterName.substring(0, 12);
      }
      monsterName = monsterName.replace(/\*/g, ''); // Remove markdown asterisks
      
      // Extract rarity and convert to tier
      const rarityMatch = workflowState.picletConcept.match(/# Object Rarity\s*\n([\s\S]*?)(?=^#)/m);
      const objectRarity = rarityMatch ? rarityMatch[1].trim().toLowerCase() : 'common';
      
      let tier: 'low' | 'medium' | 'high' | 'legendary' = 'medium';
      if (objectRarity.includes('common')) tier = 'low';
      else if (objectRarity.includes('uncommon')) tier = 'medium';
      else if (objectRarity.includes('rare')) tier = 'high';
      else if (objectRarity.includes('legendary') || objectRarity.includes('mythical')) tier = 'legendary';
      
      // Extract primary type
      const primaryTypeMatch = workflowState.picletConcept.match(/# Primary Type\s*\n([\s\S]*?)(?=^#|$)/m);
      let primaryType: any = primaryTypeMatch ? primaryTypeMatch[1].trim().toLowerCase() : 'beast';
      
      // Extract description
      const descriptionMatch = workflowState.picletConcept.match(/# Monster Description\s*\n([\s\S]*?)(?=^#|$)/m);
      let description = descriptionMatch ? descriptionMatch[1].trim() : workflowState.imageCaption || 'A mysterious creature';
      
      // Create simplified stats
      const stats: PicletStats = {
        name: monsterName,
        description: description,
        tier: tier,
        primaryType: primaryType
      };
      
      workflowState.picletStats = stats;
      console.log('Simple stats extracted:', stats);
      
    } catch (error) {
      console.error('Failed to extract simple stats:', error);
      handleAPIError(error);
    }
  }
  
  async function autoSavePicletAsCaught() {
    if (!workflowState.picletImage || !workflowState.imageCaption || !workflowState.picletConcept || !workflowState.imagePrompt || !workflowState.picletStats) {
      console.error('Cannot auto-save: missing required data');
      return;
    }
    
    try {
      // Create a clean copy of stats to ensure it's serializable
      const cleanStats = JSON.parse(JSON.stringify(workflowState.picletStats));
      
      const picletData = {
        name: workflowState.picletStats.name,
        imageUrl: workflowState.picletImage.imageUrl,
        imageData: workflowState.picletImage.imageData,
        imageCaption: workflowState.imageCaption,
        concept: workflowState.picletConcept,
        imagePrompt: workflowState.imagePrompt,
        stats: cleanStats,
        createdAt: new Date()
      };
      
      // Check for any non-serializable data
      console.log('Checking piclet data for serializability:');
      console.log('- name type:', typeof picletData.name);
      console.log('- imageUrl type:', typeof picletData.imageUrl);
      console.log('- imageData type:', typeof picletData.imageData, picletData.imageData ? `length: ${picletData.imageData.length}` : 'null/undefined');
      console.log('- imageCaption type:', typeof picletData.imageCaption);
      console.log('- concept type:', typeof picletData.concept);
      console.log('- imagePrompt type:', typeof picletData.imagePrompt);
      console.log('- stats:', cleanStats);
      
      // Convert to PicletInstance format and save as caught
      const picletInstance = await generatedDataToPicletInstance(picletData);
      
      // Override the caught status to auto-capture scanned Piclets
      picletInstance.caught = true;
      picletInstance.caughtAt = new Date();
      
      const picletId = await savePicletInstance(picletInstance);
      console.log('Piclet auto-saved as caught with ID:', picletId);
      
      // If in trainer mode, notify completion
      if (isTrainerMode && onTrainerImageCompleted && trainerImagePaths[currentImageIndex]) {
        onTrainerImageCompleted(trainerImagePaths[currentImageIndex], picletId);
      }
    } catch (err) {
      console.error('Failed to auto-save piclet:', err);
      console.error('Piclet data that failed to save:', {
        name: workflowState.picletStats?.name,
        hasImageUrl: !!workflowState.picletImage?.imageUrl,
        hasImageData: !!workflowState.picletImage?.imageData,
        hasStats: !!workflowState.picletStats
      });
      
      // If in trainer mode, notify failure
      if (isTrainerMode && onTrainerImageFailed && trainerImagePaths[currentImageIndex]) {
        const errorMessage = err instanceof Error ? err.message : 'Failed to save piclet';
        onTrainerImageFailed(trainerImagePaths[currentImageIndex], errorMessage);
      }
      
      // Don't throw - we don't want to interrupt the workflow
    }
  }
  
  function reset() {
    workflowState = {
      currentStep: 'upload',
      userImage: null,
      imageCaption: null,
      picletConcept: null,
      picletStats: null,
      imagePrompt: null,
      picletImage: null,
      error: null,
      isProcessing: false
    };
  }
  
  // Public method for trainer scanner to queue trainer images
  export function queueTrainerImage(imageFile: File, imagePath: string) {
    imageQueue.push(imageFile);
    trainerImagePaths.push(imagePath);
    
    // If this is the first image and we're not processing, start processing
    if (imageQueue.length === 1 && !workflowState.isProcessing) {
      processCurrentImage();
    }
  }
</script>

<div class="piclet-generator">
  
  <!-- Text Generation Client Selector (hidden since only HunyuanTurbos is active) -->
  <!-- 
  {#if !isTrainerMode}
    <div class="client-selector">
      <label for="text-client">Text Generator:</label>
      <select id="text-client" bind:value={currentTextClient}>
        <option value="hunyuan">HunyuanTurbos</option>
        <option value="command">Command</option>
        <option value="zephyr">Zephyr-7B</option>
        <option value="qwen">Qwen3</option>
        <option value="dots">Dots-Demo</option>
      </select>
    </div>
  {/if}
  -->
  
  {#if workflowState.currentStep !== 'upload'}
    <WorkflowProgress currentStep={workflowState.currentStep} error={workflowState.error} />
  {/if}
  
  {#if workflowState.currentStep === 'upload'}
    <UploadStep 
      onImageSelected={handleImageSelected}
      onImagesSelected={handleImagesSelected}
      isProcessing={workflowState.isProcessing}
      imageQueue={imageQueue}
      currentImageIndex={currentImageIndex}
    />
  {:else if workflowState.currentStep === 'complete'}
    <PicletResult workflowState={workflowState} onReset={reset} />
  {:else}
    <div class="processing-container">
      <div class="spinner"></div>
      <p class="processing-text">
        {#if workflowState.currentStep === 'captioning'}
          Analyzing your image...
        {:else if workflowState.currentStep === 'conceptualizing'}
          Creating Piclet concept...
        {:else if workflowState.currentStep === 'statsGenerating'}
          Generating battle stats...
        {:else if workflowState.currentStep === 'promptCrafting'}
          Creating image prompt...
        {:else if workflowState.currentStep === 'generating'}
          Generating your Piclet...
        {/if}
      </p>
    </div>
  {/if}
</div>

<style>
  .piclet-generator {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
  }
  
  /* Client selector styles (hidden since only HunyuanTurbos is active) */
  /*
  .client-selector {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding: 0.75rem;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #dee2e6;
  }
  
  .client-selector label {
    font-weight: 500;
    color: #495057;
  }
  
  .client-selector select {
    padding: 0.25rem 0.5rem;
    border: 1px solid #ced4da;
    border-radius: 4px;
    background: white;
    color: #495057;
    font-size: 0.9rem;
  }
  */
  
  
  .processing-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3rem 1rem;
  }
  
  .spinner {
    width: 60px;
    height: 60px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #007bff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 2rem;
  }
  
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
  
  .processing-text {
    font-size: 1.2rem;
    color: #333;
    margin-bottom: 2rem;
  }
  
</style>