Transform into immersive dataframe chat interface

- Simplified to show only Gradio dataframe component
- Added fullscreen immersive layout with no padding/margins
- Created interactive chat interface at bottom with orange/black Gradio theme
- Added 26 rows of sample data for demonstration
- Implemented mock AI responses for data queries
- Beautiful glassmorphism design with smooth animations

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

src/App.svelte

@@ -1,832 +1,263 @@
 <script lang="ts">
   import Dataframe from '@gradio/dataframe';
-  import { pipeline } from '@xenova/transformers';
-
-  let rawData = '';
-  let cleanedData = '';
-  let cleaningSteps: any[] = [];
-  let showSteps = false;
-  let fileInput: HTMLInputElement;
-
-
-  let inputValue: { data: string[][]; headers: string[] } = { data: [[]], headers: [] };
-  let cleanedValue: { data: string[][]; headers: string[] } = { data: [[]], headers: [] };
-
-  // Cleaning UI state
-  let cleaningInProgress = false;
-  let cleaningError: string | null = null;
-  let modelWarning: string | null = null;
-  let progressCurrent = 0;
-  let progressTotal = 0;
-
-  // Cleaning toggles
-  let optDedupeRows = true;
-  let optDedupeColumns = false;
-  let optRemoveSymbols = true;
-  let optCollapseSpaces = true;
-  let optHtmlToText = true;
-
-  // Extra LLM instructions to augment standard cleaning
-  let extraInstructions: string = '';
-
-
-  function parseCSVorTSV(text: string) {
-    if (!text) return { data: [[]], headers: [] };
-    const lines = text.trim().split(/\r?\n/);
-    if (lines.length === 0) return { data: [[]], headers: [] };
-    const sep = lines[0].includes('\t') ? '\t' : ',';
-    const headers = lines[0].split(sep).map(h => h.trim());
-    const data = lines.slice(1).map(line => line.split(sep).map(cell => cell.trim()));
-    return normalizeTable({ data, headers });
-  }
-
-  function hasNonEmptyTable(value: { data: string[][]; headers: string[] } | null | undefined): boolean {
-    if (!value) return false;
-    const headersOk = Array.isArray(value.headers) && value.headers.length > 0;
-    const rowsOk = Array.isArray(value.data) && value.data.length > 0;
-    if (!headersOk || !rowsOk) return false;
-    // At least one non-empty cell
-    return value.data.some((row) => Array.isArray(row) && row.some((cell) => String(cell ?? '').trim() !== ''));
-  }
-
-  function normalizeTable(value: { data: unknown[][]; headers: unknown[] } | null | undefined): { data: string[][]; headers: string[] } {
-    if (!value || !Array.isArray(value.headers) || value.headers.length === 0) {
-      return { data: [], headers: [] };
-    }
-    const headers: string[] = value.headers.map((h) => String(h ?? ''));
-    const width = headers.length;
-    const data: string[][] = (Array.isArray(value.data) ? value.data : []).map((row) => {
-      const safeRow = Array.isArray(row) ? row : [];
-      const padded: string[] = Array.from({ length: width }, (_, i) => String(safeRow[i] ?? ''));
-      return padded;
-    });
-    return { headers, data };
-  }
-
-  function padRowToWidth(row: unknown[] | null | undefined, width: number): string[] {
-    const safeRow = Array.isArray(row) ? row : [];
-    return Array.from({ length: width }, (_, i) => String(safeRow[i] ?? ''));
-  }
-
-  function htmlToText(input: string): string {
-    return input.replace(/<[^>]*>/g, '');
-  }
-
-  function removeSymbols(input: string): string {
-    // Keep letters, numbers, common punctuation; remove emojis and other symbols
-    return input
-      .replace(/[\p{Extended_Pictographic}]/gu, '')
-      .replace(/[\u200B-\u200D\uFEFF]/g, '')
-      .replace(/[^\p{L}\p{N}\s\-_'",.;:!?()\[\]{}@#$%&*/+\\=<>^~`|]/gu, '');
-  }
-
-  function collapseSpaces(input: string): string {
-    return input.replace(/\s+/g, ' ').trim();
-  }
-
-  function dedupeRows(headers: string[], rows: string[][]): string[][] {
-    const seen = new Set<string>();
-    const out: string[][] = [];
-    for (const r of rows) {
-      const key = r.join('\u0001');
-      if (!seen.has(key)) {
-        seen.add(key);
-        out.push(padRowToWidth(r, headers.length));
-      }
-    }
-    return out;
-  }
-
-  function dedupeColumns(headers: string[], rows: string[][]): { headers: string[]; rows: string[][] } {
-    const seen = new Set<string>();
-    const keepIdx: number[] = [];
-    const outHeaders: string[] = [];
-    headers.forEach((h, i) => {
-      if (!seen.has(h)) {
-        seen.add(h);
-        keepIdx.push(i);
-        outHeaders.push(h);
-      }
-    });
-    const outRows = rows.map((r) => keepIdx.map((i) => r[i] ?? ''));
-    return { headers: outHeaders, rows: outRows };
-  }
-
-  function updateInputValueFromRaw() {
-    inputValue = parseCSVorTSV(rawData);
-  }
-
-  function updateRawFromInputValue() {
-    // Convert inputValue back to CSV string
-    if (!inputValue.headers.length) return;
-    const sep = ',';
-    const lines = [inputValue.headers.join(sep), ...inputValue.data.map(row => row.join(sep))];
-    rawData = lines.join('\n');
-  }
-
-  function handleFileUpload(event: Event) {
-    const files = (event.target as HTMLInputElement).files;
-    if (files && files.length > 0) {
-      const reader = new FileReader();
-      reader.onload = (e) => {
-        rawData = e.target?.result as string;
-        updateInputValueFromRaw();
-      };
-      reader.readAsText(files[0]);
-    }
-  }
-
-  function handleInputChange(e: CustomEvent) {
-    inputValue = normalizeTable(e.detail);
-    updateRawFromInputValue();
-  }
-
-  let textCleaner: any = null;
-  let loadingModel = false;
-
-  // Heuristic fallback cleaner if model output is unusable
-  function fallbackClean(text: string): string {
-    if (!text) return '';
-    // Remove URLs
-    let out = text.replace(/https?:\/\/\S+/g, '');
-    // Remove emojis and non-text pictographs
-    out = out.replace(/[\p{Extended_Pictographic}]/gu, '');
-    // Remove HTML tags and zero-width characters
-    out = out.replace(/<[^>]*>/g, '').replace(/[\u200B-\u200D\uFEFF]/g, '');
-    // Normalize quotes and whitespace
-    out = out
-      .replace(/[\u2018\u2019\u201A\u201B]/g, "'")
-      .replace(/[\u201C\u201D\u201E\u201F]/g, '"')
-      .replace(/[\u2013\u2014]/g, '-')
-      .normalize('NFC')
-      .replace(/"{2,}/g, '"')
-      .replace(/'{2,}/g, "'")
-      .replace(/[!?.]{2,}/g, (m: string) => m[0])
-      .replace(/\s+/g, ' ')
-      .trim();
-    // Remove stray leading 'clean:' tokens if any echoed
-    out = out.replace(/^\s*clean:\s*/i, '');
-    return out;
-  }
-
-  function isLikelyNumericOrDate(text: string): boolean {
-    const t = (text || '').trim();
-    if (!t) return false;
-    // Currency/number like $12.00, 12, 12.0 USD
-    if (/^[\p{Sc}]?\s?\d{1,3}(?:[.,]\d{3})*(?:[.,]\d+)?(?:\s?(?:USD|EUR|GBP|JPY|AUD|CAD))?$/iu.test(t)) return true;
-    // Date-like: YYYY-MM-DD, YYYY/MM/DD, DD-MM-YYYY, MM-DD-YYYY, with ., / or -
-    if (/^(?:\d{4}[\-\/.]\d{2}[\-\/.]\d{2}|\d{2}[\-\/.]\d{2}[\-\/.]\d{4})$/.test(t)) return true;
-    return false;
-  }
-
-  function jaccardTokenSimilarity(a: string, b: string): number {
-    const toTokens = (s: string) => (s.match(/[\p{L}\p{N}\-']+/gu) ?? []).map((t) => t.toLowerCase());
-    const A = new Set(toTokens(a));
-    const B = new Set(toTokens(b));
-    if (A.size === 0 && B.size === 0) return 1;
-    let inter = 0;
-    for (const t of A) if (B.has(t)) inter += 1;
-    const union = new Set([...A, ...B]).size;
-    return union === 0 ? 0 : inter / union;
-  }
-
-  function isPlausibleClean(source: string, candidate: string): boolean {
-    if (!candidate) return false;
-    const len = candidate.length;
-    const srcLen = source.length;
-    if (len > Math.max(8, Math.floor(srcLen * 1.4)) || len < Math.floor(srcLen * 0.4)) return false;
-    const punctOnly = candidate.replace(/[\p{L}\p{N}]/gu, '').length / Math.max(1, len) > 0.35;
-    if (punctOnly) return false;
-    const sim = jaccardTokenSimilarity(source, candidate);
-    if (sim < 0.5) return false;
-    return true;
-  }
-
-  async function cleanTextWithModel(text: string): Promise<string> {
-    if (!text || !text.trim()) return '';
-    // Skip model for numeric/date-ish content
-    if (isLikelyNumericOrDate(text)) return fallbackClean(text);
-    if (!textCleaner) {
-      loadingModel = true;
-      // Use a small instruction-capable text2text model for deterministic edits
-      // If unavailable, this will throw and we fallback deterministically.
-      textCleaner = await pipeline('text2text-generation', 'Xenova/t5-small');
-      loadingModel = false;
-    }
-
-    const prompt =
-      'clean: ' +
-      text
-        .replace(/https?:\/\/\S+/g, '')
-        .replace(/[\p{Extended_Pictographic}]/gu, '')
-        .replace(/\s+/g, ' ')
-        .trim() +
-      (extraInstructions && extraInstructions.trim().length > 0
-        ? `\nrules: ${extraInstructions.trim()}`
-        : '');
-
-    try {
-      const output = await textCleaner(prompt, {
-        max_new_tokens: 64,
-        temperature: 0,
-        do_sample: false
-      });
-      const generated = output?.[0]?.generated_text ?? '';
-      let candidate = generated.split('\n')[0].trim().replace(/^"|"$/g, '');
-      // Normalize whitespace and quotes
-      candidate = candidate
-        .replace(/^\s*clean:\s*/i, '')
-        .replace(/\bclean:\s*/gi, '')
-        .replace(/[\u2018\u2019\u201A\u201B]/g, "'")
-        .replace(/[\u201C\u201D\u201E\u201F]/g, '"')
-        .replace(/[\u2013\u2014]/g, '-')
-        .replace(/<[^>]*>/g, '')
-        .replace(/[\u200B-\u200D\uFEFF]/g, '')
-        .replace(/"{2,}/g, '"')
-        .replace(/'{2,}/g, "'")
-        .replace(/[!?.]{2,}/g, (m: string) => m[0])
-        .replace(/\s+/g, ' ')
-        .trim();
-      if (!isPlausibleClean(text, candidate)) return fallbackClean(text);
-      return candidate;
-    } catch (e) {
-      return fallbackClean(text);
-    }
-  }
-
-  async function analyzeAndClean() {
-    cleaningError = null;
-    modelWarning = null;
-    showSteps = false;
-    cleaningSteps = [];
-    cleanedValue = { data: [[]], headers: [] };
-    cleanedData = '';
-
-    // Ensure there is a table to clean
-    if (!inputValue.headers?.length) {
-      cleaningError = 'No headers detected. Please paste a table with headers in the first row.';
-      return;
-    }
-
-    // Start with current headers/rows
-    let outHeaders = [...inputValue.headers];
-    let workingRows = inputValue.data.map((r) => padRowToWidth(r, outHeaders.length));
-
-    // Deterministic transforms applied first
-    if (optDedupeColumns) {
-      const dc = dedupeColumns(outHeaders, workingRows);
-      outHeaders = dc.headers;
-      workingRows = dc.rows.map((r) => padRowToWidth(r, outHeaders.length));
-    }
-    if (optDedupeRows) {
-      workingRows = dedupeRows(outHeaders, workingRows);
-    }
-
-    // Iterate rows
-    cleaningInProgress = true;
-    progressCurrent = 0;
-    const numRows = workingRows.length;
-    const numCols = outHeaders.length;
-    progressTotal = numRows * numCols;
-    const outRows: string[][] = [];
-
-    for (const row of workingRows) {
-      const baseRow = padRowToWidth(row, numCols);
-      const cleanedCells: string[] = [];
-      for (let c = 0; c < numCols; c += 1) {
-        let cell = (baseRow?.[c] ?? '').toString();
-        // Apply deterministic cell transforms
-        if (optHtmlToText) cell = htmlToText(cell);
-        if (optRemoveSymbols) cell = removeSymbols(cell);
-        if (optCollapseSpaces) cell = collapseSpaces(cell);
-        let cleaned = '';
-        try {
-          cleaned = await cleanTextWithModel(cell);
-        } catch (e) {
-          if (!modelWarning) modelWarning = 'Model unavailable. Used deterministic fallback cleaning.';
-          cleaned = fallbackClean(cell);
-        }
-        if (!cleaned) cleaned = fallbackClean(cell);
-        cleanedCells.push(cleaned);
-        progressCurrent += 1;
-      }
-      const newRow = cleanedCells;
-      outRows.push(newRow);
-    }
-
-    cleanedValue = normalizeTable({ headers: outHeaders, data: outRows });
-    // Keep a CSV copy in cleanedData for export convenience
-    const sep = ',';
-    const lines = [outHeaders.join(sep), ...outRows.map(r => r.join(sep))];
-    cleanedData = lines.join('\n');
-
-    // Note for transparency
-    cleaningSteps = [{ step: `Cleaned all ${numCols} columns and replaced values in the preview.`, accepted: true }];
-    showSteps = true;
-    cleaningInProgress = false;
 
+  // Sample data for the dataframe
+  let value: { data: string[][]; headers: string[] } = {
+    headers: ['Name', 'Age', 'City', 'Score', 'Status'],
+    data: [
+      ['Alice Johnson', '28', 'New York', '92.5', 'Active'],
+      ['Bob Smith', '34', 'Los Angeles', '87.3', 'Active'],
+      ['Carol Davis', '29', 'Chicago', '95.1', 'Inactive'],
+      ['David Wilson', '42', 'Houston', '78.9', 'Active'],
+      ['Eva Brown', '31', 'Phoenix', '88.7', 'Active'],
+      ['Frank Miller', '37', 'Philadelphia', '91.2', 'Inactive'],
+      ['Grace Lee', '26', 'San Antonio', '94.8', 'Active'],
+      ['Henry Taylor', '45', 'San Diego', '82.6', 'Active'],
+      ['Isabella Rodriguez', '33', 'Dallas', '89.4', 'Active'],
+      ['Jack Anderson', '29', 'San Jose', '93.7', 'Active'],
+      ['Kate Thompson', '36', 'Austin', '86.2', 'Inactive'],
+      ['Liam Martinez', '41', 'Jacksonville', '91.8', 'Active'],
+      ['Maya Patel', '27', 'Fort Worth', '94.3', 'Active'],
+      ['Noah Williams', '39', 'Columbus', '85.9', 'Active'],
+      ['Olivia Chen', '32', 'Charlotte', '90.1', 'Inactive'],
+      ['Peter Garcia', '44', 'San Francisco', '88.5', 'Active'],
+      ['Quinn Johnson', '30', 'Indianapolis', '92.7', 'Active'],
+      ['Rachel Kim', '35', 'Seattle', '87.8', 'Active'],
+      ['Samuel Brown', '38', 'Denver', '89.9', 'Inactive'],
+      ['Tara Wilson', '31', 'Washington', '93.2', 'Active'],
+      ['Ulysses Davis', '43', 'Boston', '86.4', 'Active'],
+      ['Victoria Lopez', '28', 'El Paso', '91.5', 'Active'],
+      ['William Moore', '40', 'Detroit', '84.7', 'Inactive'],
+      ['Ximena Taylor', '34', 'Nashville', '90.8', 'Active'],
+      ['Yuki Nakamura', '29', 'Portland', '92.1', 'Active'],
+      ['Zoe Jackson', '37', 'Oklahoma City', '88.3', 'Active']
+    ]
+  };
+
+  function handleChange(event: CustomEvent) {
+    value = event.detail;
+  }
+
+  let query = '';
+  let response = '';
+  let isSearching = false;
+
+  function searchData() {
+    if (!query.trim()) return;
+    
+    isSearching = true;
+    response = '';
+    
+    // Mock response for demo (will be replaced with LLM later)
     setTimeout(() => {
-      const resultsSection = document.querySelector('.results-card');
-      if (resultsSection) {
-        resultsSection.scrollIntoView({ 
-          behavior: 'smooth', 
-          block: 'start',
-          inline: 'nearest'
-        });
-      }
-    }, 100);
-  }
-
-  function toggleStep(idx: number) {
-    cleaningSteps[idx].accepted = !cleaningSteps[idx].accepted;
-  }
-
-  function exportCleaned() {
-    // Export cleanedValue as CSV
-    if (!cleanedValue.headers.length) return;
-    const sep = ',';
-    const lines = [cleanedValue.headers.join(sep), ...cleanedValue.data.map(row => row.join(sep))];
-    const csv = lines.join('\n');
-    const blob = new Blob([csv], { type: 'text/csv' });
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement('a');
-    a.href = url;
-    a.download = 'cleaned_data.csv';
-    a.click();
-    URL.revokeObjectURL(url);
+      const mockResponses = [
+        "🔍 Based on the data, I found 21 active users and 5 inactive users. The most active city appears to be Los Angeles with high engagement scores.",
+        "📊 The average score across all users is 89.2, with Carol Davis having the highest score of 95.1 from Chicago.",
+        "👥 Looking at the age distribution, users range from 26 to 45 years old, with an average age of 34.3 years.",
+        "🏆 The top performers are primarily located in major metropolitan areas like New York, San Francisco, and Chicago.",
+        "📈 There's an interesting correlation between age and score - users in their late 20s tend to have higher scores on average."
+      ];
+      
+      response = mockResponses[Math.floor(Math.random() * mockResponses.length)];
+      isSearching = false;
+    }, 1000 + Math.random() * 1000);
+  }
+
+  function handleKeyPress(event: KeyboardEvent) {
+    if (event.key === 'Enter') {
+      searchData();
+    }
   }
-
-  $: updateInputValueFromRaw();
-  // No-op reactive blocks here
 </script>
 
-<div class="app-container df-theme">
-  <header class="app-header">
-    <div class="header-content">
-      <h1>Tabular Data Cleaner</h1>
-      <p class="subtitle">Clean and transform your spreadsheet data with AI assistance</p>
-    </div>
-  </header>
+<div class="fullscreen-dataframe">
+  <div class="dataframe-container">
+    <Dataframe
+      bind:value={value}
+      show_row_numbers={true}
+      editable={true}
+      on:change={handleChange}
+    />
+  </div>
   
-  <main class="app-main">
-    <div class="content-grid">
-      <!-- Input Section -->
-      <section class="input-card">
-        <div class="card-header">
-          <h2>Import Data</h2>
-          <p class="card-subtitle">Upload a file or paste your CSV/TSV data</p>
-        </div>
-        <div class="upload-area">
-          <input type="file" accept=".csv,.tsv,.txt" bind:this={fileInput} on:change={handleFileUpload} id="file-input" class="file-input" />
-          <label for="file-input" class="file-label">
-            <div class="upload-icon">📁</div>
-            <span>Choose file or drag & drop</span>
-          </label>
-        </div>
-        <div class="divider">
-          <span>or</span>
-        </div>
-        <textarea 
-          id="data-input" 
-          bind:value={rawData} 
-          rows="8" 
-          class="data-textarea"
-          placeholder="Paste CSV or TSV data here..."
-          on:input={updateInputValueFromRaw}
-        ></textarea>
-        
-        {#if hasNonEmptyTable(inputValue)}
-          <div class="preview-section">
-            <h3>Data Preview</h3>
-            <div class="dataframe-wrapper">
-              <Dataframe
-                bind:value={inputValue}
-                show_search="search"
-                show_row_numbers={true}
-                show_copy_button={true}
-                show_fullscreen_button={true}
-                editable={true}
-                on:change={handleInputChange}
-              />
-            </div>
-          </div>
-        {/if}
-      </section>
-
-      <!-- Controls Section -->
-      <section class="controls-card">
-        <div class="card-header">
-          <h2>Cleaning Options</h2>
-        </div>
-        
-        <div class="control-group">
-          <h3>LLM Instructions</h3>
-          <textarea 
-            rows="3" 
-            bind:value={extraInstructions} 
-            class="instructions-textarea"
-            placeholder="e.g., expand abbreviations, fix capitalization..."
-          ></textarea>
-        </div>
-
-        <div class="control-group">
-          <h3>Transform Options</h3>
-          <div class="checkbox-group">
-            <label class="checkbox-label">
-              <input type="checkbox" bind:checked={optDedupeRows} />
-              <span class="checkmark"></span>
-              Deduplicate rows
-            </label>
-            <label class="checkbox-label">
-              <input type="checkbox" bind:checked={optDedupeColumns} />
-              <span class="checkmark"></span>
-              Deduplicate columns
-            </label>
-            <label class="checkbox-label">
-              <input type="checkbox" bind:checked={optRemoveSymbols} />
-              <span class="checkmark"></span>
-              Remove symbols/emojis
-            </label>
-            <label class="checkbox-label">
-              <input type="checkbox" bind:checked={optCollapseSpaces} />
-              <span class="checkmark"></span>
-              Remove extra spaces
-            </label>
-            <label class="checkbox-label">
-              <input type="checkbox" bind:checked={optHtmlToText} />
-              <span class="checkmark"></span>
-              Convert HTML to text
-            </label>
+  <div class="search-panel">
+    <div class="search-container">
+      <div class="search-header">
+        <h2>✨ Ask me anything about your data</h2>
+        <p>Try: "How many active users?", "Who has the highest score?", "What's the average age?"</p>
+      </div>
+      
+      <div class="search-input-container">
+        <input
+          type="text"
+          bind:value={query}
+          on:keypress={handleKeyPress}
+          placeholder="Ask a question about the data..."
+          class="search-input"
+          disabled={isSearching}
+        />
+        <button 
+          class="search-button"
+          on:click={searchData}
+          disabled={isSearching || !query.trim()}
+        >
+          {#if isSearching}
+            <div class="spinner"></div>
+          {:else}
+            🔍 Ask
+          {/if}
+        </button>
+      </div>
+      
+      {#if response}
+        <div class="response-container">
+          <div class="response-text">
+            {response}
           </div>
         </div>
-
-        <div class="action-buttons">
-          <button 
-            class="btn-primary" 
-            on:click={analyzeAndClean} 
-            disabled={cleaningInProgress || loadingModel || !inputValue.headers?.length}
-          >
-            {#if loadingModel}
-              <span class="spinner"></span>
-              Loading model...
-            {:else if cleaningInProgress}
-              <span class="spinner"></span>
-              Cleaning {progressCurrent}/{progressTotal}...
-            {:else}
-              ✨ Clean Data
-            {/if}
-          </button>
-          <button 
-            class="btn-secondary" 
-            on:click={exportCleaned} 
-            disabled={!hasNonEmptyTable(cleanedValue)}
-          >
-            💾 Export
-          </button>
-        </div>
-
-        {#if cleaningError}
-          <div class="alert alert-error">{cleaningError}</div>
-        {/if}
-        {#if modelWarning}
-          <div class="alert alert-warning">{modelWarning}</div>
-        {/if}
-      </section>
+      {/if}
     </div>
-
-    <!-- Results Section -->
-    {#if hasNonEmptyTable(cleanedValue)}
-      <section class="results-card">
-        <div class="card-header">
-          <h2>Cleaned Results</h2>
-          <p class="card-subtitle">Review and export your cleaned data</p>
-        </div>
-        <div class="dataframe-wrapper">
-          <Dataframe
-            bind:value={cleanedValue}
-            show_search="search"
-            show_row_numbers={true}
-            show_copy_button={true}
-            show_fullscreen_button={true}
-            editable={false}
-          />
-        </div>
-      </section>
-    {/if}
-  </main>
+  </div>
 </div>
 
 <style>
-  /* Reset and base styles */
   :global(*) {
-    box-sizing: border-box;
-  }
-  
-  :global(body) {
     margin: 0;
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
-    background: #f8fafc;
-    color: #1e293b;
-    line-height: 1.6;
-  }
-
-  /* App container */
-  .app-container {
-    min-height: 100vh;
-  }
-
-  /* Header */
-  .app-header {
-    margin: 0 auto;
-    padding: 2rem;
-  }
-
-  .header-content {
-    max-width: 1200px;
-    margin: 0 auto;
-    padding: 0 2rem;
-    text-align: center;
-  }
-
-  .app-header h1 {
-    font-size: 2.5rem;
-    font-weight: 700;
-    margin: 0 0 0.5rem 0;
-    background: linear-gradient(135deg, #667eea, #764ba2);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
+    padding: 0;
+    box-sizing: border-box;
   }
 
-  .subtitle {
-    font-size: 1.1rem;
-    color: #64748b;
+  :global(body, html) {
     margin: 0;
-    font-weight: 400;
-  }
-
-  /* Main content */
-  .app-main {
-    max-width: 1200px;
-    margin: 0 auto;
-    padding: 2rem;
-  }
-
-  .content-grid {
-    display: grid;
-    grid-template-columns: 650px 350px;
-    gap: 2rem;
-    margin-bottom: 2rem;
-    justify-content: center;
-  }
-
-  @media (max-width: 768px) {
-    .content-grid {
-      grid-template-columns: 1fr;
-      grid-template-rows: auto auto;
-      max-width: 100%;
-    }
-
-  .input-card, .controls-card, .results-card {
-      width: 100%;
-    }
-
-    .control-group {
-      padding: 0;
-    }
-  }
-  
-
-  /* Card styles */
-  .input-card, .controls-card, .results-card {
-    background: white;
-    border-radius: 16px;
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-    border: 1px solid rgba(226, 232, 240, 0.8);
+    padding: 0;
+    width: 100%;
+    height: 100%;
     overflow: hidden;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
   }
 
-  .controls-card {
-    width: 350px;
-    height: min-content;
-  }
-
-  .card-header {
-    padding: 1.5rem 1.5rem 1rem 1.5rem;
-    border-bottom: 1px solid #f1f5f9;
-  }
-
-  .card-header h2 {
-    font-size: 1.25rem;
-    font-weight: 600;
-    margin: 0 0 0.25rem 0;
-    color: #1e293b;
-  }
-
-  .card-subtitle {
-    font-size: 0.9rem;
-    color: #64748b;
-    margin: 0;
-  }
-
-  /* Upload area */
-  .upload-area {
-    padding: 1.5rem;
-  }
-
-  .file-input {
-    display: none;
-  }
-
-  .file-label {
+  .fullscreen-dataframe {
+    width: 100vw;
+    height: 100vh;
+    position: fixed;
+    top: 0;
+    left: 0;
+    background: white;
     display: flex;
     flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    padding: 2rem;
-    border: 2px dashed #cbd5e1;
-    border-radius: 12px;
-    background: #f8fafc;
-    cursor: pointer;
-    transition: all 0.2s ease;
-  }
-
-  .file-label:hover {
-    border-color: #667eea;
-    background: #f1f5f9;
-  }
-
-  .upload-icon {
-    font-size: 2rem;
-    margin-bottom: 0.5rem;
-  }
-
-  .file-label span {
-    color: #475569;
-    font-weight: 500;
-  }
-
-  /* Divider */
-  .divider {
-    display: flex;
-    align-items: center;
-    margin: 0 1.5rem;
-    text-align: center;
   }
 
-  .divider::before,
-  .divider::after {
-    content: '';
+  .dataframe-container {
     flex: 1;
-    height: 1px;
-    background: #e2e8f0;
-  }
-
-  .divider span {
-    padding: 0 1rem;
-    color: #64748b;
-    font-size: 0.875rem;
-    background: white;
-  }
-
-  /* Textareas */
-
-  .data-textarea, .instructions-textarea {
-    padding: 1rem;
-    border: 1px solid #e2e8f0;
-    border-radius: 8px;
-    font-size: 0.875rem;
-    resize: vertical;
-    transition: border-color 0.2s ease;
-    box-sizing: border-box;
-    line-height: 1.5;
-    min-height: 120px;
+    overflow: hidden;
   }
 
-  .data-textarea {
-    margin: 1.5rem;
-    width: calc(100% - 3rem);
-    font-family: 'JetBrains Mono', 'Fira Code', monospace;
+  .search-panel {
+    background: linear-gradient(135deg, #ff6b35 0%, #1a1a1a 100%);
+    padding: 2rem;
+    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.1);
   }
 
-  .instructions-textarea {
-    width: 100%;
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
+  .search-container {
+    max-width: 800px;
+    margin: 0 auto;
   }
 
-  .data-textarea:focus, .instructions-textarea:focus {
-    outline: none;
-    border-color: #667eea;
-    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+  .search-header {
+    text-align: center;
+    margin-bottom: 1.5rem;
   }
 
-  /* Control groups */
-  .control-group {
-    padding: 0 1.5rem 1.5rem 1.5rem;
+  .search-header h2 {
+    color: white;
+    font-size: 1.8rem;
+    font-weight: 700;
+    margin: 0 0 0.5rem 0;
+    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
   }
 
-  .control-group h3 {
+  .search-header p {
+    color: rgba(255, 255, 255, 0.9);
     font-size: 1rem;
-    font-weight: 600;
-    margin: 0 0 0.75rem 0;
-    color: #374151;
-  }
-
-  /* Checkbox styles */
-  .checkbox-group {
-    display: flex;
-    flex-direction: column;
-    gap: 0.75rem;
+    margin: 0;
+    opacity: 0.9;
   }
 
-  .checkbox-label {
+  .search-input-container {
     display: flex;
-    align-items: center;
-    cursor: pointer;
-    font-size: 0.9rem;
-    color: #374151;
+    gap: 1rem;
+    margin-bottom: 1.5rem;
   }
 
-  .checkbox-label input[type="checkbox"] {
-    display: none;
+  .search-input {
+    flex: 1;
+    padding: 1rem 1.5rem;
+    border: none;
+    border-radius: 50px;
+    font-size: 1.1rem;
+    background: white;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+    outline: none;
+    transition: all 0.3s ease;
   }
 
-  .checkmark {
-    width: 18px;
-    height: 18px;
-    border: 2px solid #d1d5db;
-    border-radius: 4px;
-    margin-right: 0.75rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: all 0.2s ease;
+  .search-input:focus {
+    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.15);
+    transform: translateY(-2px);
   }
 
-  .checkbox-label input[type="checkbox"]:checked + .checkmark {
-    background: #667eea;
-    border-color: #667eea;
+  .search-input:disabled {
+    opacity: 0.7;
   }
 
-  .checkbox-label input[type="checkbox"]:checked + .checkmark::after {
-    content: '✓';
+  .search-button {
+    padding: 1rem 2rem;
+    background: rgba(255, 255, 255, 0.2);
+    border: 2px solid rgba(255, 255, 255, 0.3);
+    border-radius: 50px;
     color: white;
-    font-size: 12px;
-    font-weight: bold;
-  }
-
-  /* Buttons */
-  .action-buttons {
-    padding: 0 1.5rem 1.5rem 1.5rem;
-    display: flex;
-    gap: 0.75rem;
-  }
-
-  .btn-primary, .btn-secondary {
-    padding: 0.75rem 1.5rem;
-    border-radius: 8px;
-    border: none;
     font-weight: 600;
+    font-size: 1.1rem;
     cursor: pointer;
-    transition: all 0.2s ease;
+    transition: all 0.3s ease;
+    backdrop-filter: blur(10px);
     display: flex;
     align-items: center;
     gap: 0.5rem;
   }
 
-  .btn-primary {
-    background: linear-gradient(135deg, #667eea, #764ba2);
-    color: white;
-    flex: 1;
+  .search-button:hover:not(:disabled) {
+    background: rgba(255, 255, 255, 0.3);
+    border-color: rgba(255, 255, 255, 0.5);
+    transform: translateY(-2px);
   }
 
-  .btn-primary:hover:not(:disabled) {
-    transform: translateY(-1px);
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
-  }
-
-  .btn-secondary {
-    background: #f8fafc;
-    color: #475569;
-    border: 1px solid #e2e8f0;
+  .search-button:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
   }
 
-  .btn-secondary:hover:not(:disabled) {
-    background: #f1f5f9;
+  .response-container {
+    background: rgba(255, 255, 255, 0.95);
+    border-radius: 20px;
+    padding: 1.5rem 2rem;
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
+    backdrop-filter: blur(10px);
+    animation: slideUp 0.5s ease-out;
   }
 
-  .btn-primary:disabled, .btn-secondary:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-    transform: none;
+  .response-text {
+    font-size: 1.1rem;
+    line-height: 1.6;
+    color: #2d3748;
+    margin: 0;
   }
 
-  /* Spinner */
   .spinner {
-    width: 16px;
-    height: 16px;
-    border: 2px solid transparent;
-    border-top: 2px solid currentColor;
+    width: 20px;
+    height: 20px;
+    border: 2px solid rgba(255, 255, 255, 0.3);
+    border-top: 2px solid white;
     border-radius: 50%;
     animation: spin 1s linear infinite;
   }
@@ -835,50 +266,14 @@
     to { transform: rotate(360deg); }
   }
 
-  /* Alerts */
-  .alert {
-    margin: 0 1.5rem 1rem 1.5rem;
-    padding: 0.75rem 1rem;
-    border-radius: 8px;
-    font-size: 0.875rem;
-  }
-
-  .alert-error {
-    background: #fef2f2;
-    color: #dc2626;
-    border: 1px solid #fecaca;
-  }
-
-  .alert-warning {
-    background: #fffbeb;
-    color: #d97706;
-    border: 1px solid #fed7aa;
-  }
-
-  /* Preview section */
-  .preview-section {
-    padding: 0 1.5rem 1.5rem 1.5rem;
-  }
-
-  .preview-section h3 {
-    font-size: 1rem;
-    font-weight: 600;
-    margin: 0 0 1rem 0;
-    color: #374151;
-  }
-
-
-  /* Results card */
-  .results-card {
-    grid-column: 1 / -1;
-  }
-
-  .results-card .dataframe-wrapper {
-    margin: 1.5rem;
-  }
-
-  /* Theme overrides */
-  .df-theme {
-    --gr-df-table-text: #1e293b !important;
+  @keyframes slideUp {
+    from {
+      opacity: 0;
+      transform: translateY(20px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
   }
-</style>
+</style>