Hi

\"\n});\n```\n\n## Val Town Utility Functions\n\nVal Town provides several utility functions to help with common project tasks.\n\n### Importing Utilities\n\nAlways import utilities with version pins to avoid breaking changes:\n\n```ts\nimport { parseProject, readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n```\n\n### Available Utilities\n\n\n#### **serveFile** - Serve project files with proper content types\n\nFor example, in Hono:\n\n```ts\n// serve all files in frontend/ and shared/\napp.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\napp.get(\"/shared/*\", c => serveFile(c.req.path, import.meta.url));\n```\n\n#### **readFile** - Read files from within the project:\n\n```ts\n// Read a file from the project\nconst fileContent = await readFile(\"/frontend/index.html\", import.meta.url);\n```\n\n#### **listFiles** - List all files in the project\n\n```ts\nconst files = await listFiles(import.meta.url);\n```\n\n#### **parseProject** - Extract information about the current project from import.meta.url\n\nThis is useful for including info for linking back to a val, ie in \"view source\" urls:\n\n```ts\nconst projectVal = parseProject(import.meta.url);\nconsole.log(projectVal.username); // Owner of the project\nconsole.log(projectVal.name); // Project name\nconsole.log(projectVal.version); // Version number\nconsole.log(projectVal.branch); // Branch name\nconsole.log(projectVal.links.self.project); // URL to the project page\n```\n\nHowever, it's *extremely importing* to note that `parseProject` and other Standard Library utilities ONLY RUN ON THE SERVER.\nIf you need access to this data on the client, run it in the server and pass it to the client by splicing it into the HTML page\nor by making an API request for it.\n\n## Val Town Platform Specifics\n\n- **Redirects:** Use `return new Response(null, { status: 302, headers: { Location: \"/place/to/redirect\" }})` instead of `Response.redirect` which is broken\n- **Images:** Avoid external images or base64 images. Use emojis, unicode symbols, or icon fonts/libraries instead\n- **AI Image:** To inline generate an AI image use: `

`\n- **Storage:** DO NOT use the Deno KV module for storage\n- **Browser APIs:** DO NOT use the `alert()`, `prompt()`, or `confirm()` methods\n- **Weather Data:** Use open-meteo for weather data (doesn't require API keys) unless otherwise specified\n- **View Source:** Add a view source link by importing & using `import.meta.url.replace(\"ems.sh\", \"val.town)\"` (or passing this data to the client) and include `target=\"_top\"` attribute\n- **Error Debugging:** Add `` to HTML to capture client-side errors\n- **Error Handling:** Only use try...catch when there's a clear local resolution; Avoid catches that merely log or return 500s. Let errors bubble up with full context\n- **Environment Variables:** Use `Deno.env.get('keyname')` when you need to, but generally prefer APIs that don't require keys\n- **Imports:** Use `https://esm.sh` for npm and Deno dependencies to ensure compatibility on server and browser\n- **Storage Strategy:** Only use backend storage if explicitly required; prefer simple static client-side sites\n- **React Configuration:** When using React libraries, pin versions with `?deps=react@18.2.0,react-dom@18.2.0` and start the file with `/** @jsxImportSource https://esm.sh/react@18.2.0 */`\n- Ensure all React dependencies and sub-dependencies are pinned to the same version\n- **Styling:** Default to using TailwindCSS via `` unless otherwise specified\n\n## Project Structure and Design Patterns\n\n### Recommended Directory Structure\n```\n├── backend/\n│ ├── database/\n│ │ ├── migrations.ts # Schema definitions\n│ │ ├── queries.ts # DB query functions\n│ │ └── README.md\n│ └── routes/ # Route modules\n│ ├── [route].ts\n│ └── static.ts # Static file serving\n│ ├── index.ts # Main entry point\n│ └── README.md\n├── frontend/\n│ ├── components/\n│ │ ├── App.tsx\n│ │ └── [Component].tsx\n│ ├── favicon.svg\n│ ├── index.html # Main HTML template\n│ ├── index.tsx # Frontend JS entry point\n│ ├── README.md\n│ └── style.css\n├── README.md\n└── shared/\n ├── README.md\n └── utils.ts # Shared types and functions\n```\n\n### Backend (Hono) Best Practices\n\n- Hono is the recommended API framework\n- Main entry point should be `backend/index.ts`\n- **Static asset serving:** Use the utility functions to read and serve project files:\n ```ts\n import { readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n \n // serve all files in frontend/ and shared/\n app.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\n app.get(\"/shared/*\", c => serveFile(c.req.path, import.meta.url));\n \n // For index.html, often you'll want to bootstrap with initial data\n app.get(\"/\", async c => {\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n \n // Inject data to avoid extra round-trips\n const initialData = await fetchInitialData();\n const dataScript = ``;\n \n html = html.replace(\"\", `${dataScript}`);\n return c.html(html);\n });\n ```\n- Create RESTful API routes for CRUD operations\n- Always include this snippet at the top-level Hono app to re-throwing errors to see full stack traces:\n ```ts\n // Unwrap Hono errors to see original error details\n app.onError((err, c) => {\n throw err;\n });\n ```\n\n### Database Patterns\n- Run migrations on startup or comment out for performance\n- Change table names when modifying schemas rather than altering\n- Export clear query functions with proper TypeScript typing\n\n## Common Gotchas and Solutions\n\n1. **Environment Limitations:** \n - Val Town runs on Deno in a serverless context, not Node.js\n - Code in `shared/` must work in both frontend and backend environments\n - Cannot use `Deno` keyword in shared code\n - Use `https://esm.sh` for imports that work in both environments\n\n2. **SQLite Peculiarities:**\n - Limited support for ALTER TABLE operations\n - Create new tables with updated schemas and copy data when needed\n - Always run table creation before querying\n\n3. **React Configuration:**\n - All React dependencies must be pinned to 18.2.0\n - Always include `@jsxImportSource https://esm.sh/react@18.2.0` at the top of React files\n - Rendering issues often come from mismatched React versions\n\n4. **File Handling:**\n - Val Town only supports text files, not binary\n - Use the provided utilities to read files across branches and forks\n - For files in the project, use `readFile` helpers\n\n5. **API Design:**\n - `fetch` handler is the entry point for HTTP vals\n - Run the Hono app with `export default app.fetch // This is the entry point for HTTP vals`\n\n",[],[434],"0e3f922a-e2e9-11f0-b141-42dde27851f2",".vtignore","0e3f9324-e2e9-11f0-b141-42dde27851f2",126,["D",1766815104186],".git\n.vscode\n.cursorrules\n.DS_Store\nnode_modules\nvendor",[],[442],"0e29ac62-e2e9-11f0-b941-42dde27851f2",".gitignore","0e29ad34-e2e9-11f0-b941-42dde27851f2",123,["D",1766815104084],"# Design system copy (regenerated by build)\nstyles/design-system/\n\n# Environment\n.env\n\n# Build output (optional - you may want to commit these for deployment)\n# styles/chat-app-*.css\n# styles/chat-app-loader.txt\n\n",[],[450],"0e25462c-e2e9-11f0-b141-42dde27851f2","favicon.svg","0e2546d6-e2e9-11f0-b141-42dde27851f2","0a230546-e2e9-11f0-b141-42dde27851f2",122,["D",1766815104079],"\n",[],[120,458],"0a230460-e2e9-11f0-b141-42dde27851f2",5,["D",1766815097374],[373],[120],"3d15f4f4-ef19-11f0-b16c-42dde27851f2","monaco-utils.js","0d8068d2-e2e9-11f0-b141-42dde27851f2","09c152e2-e2e9-11f0-b941-42dde27851f2",197,["D",1768155212648],"/**\n * Monaco Editor Utilities for Standalone Apps\n * Copied from /frontend/utils/monaco-utils.js for standalone deployment\n */\n\n// Define custom light theme with gray background\nfunction defineCustomThemes() {\n if (window.monaco && !window._monacoCustomThemesDefined) {\n window.monaco.editor.defineTheme('vs-light-gray', {\n base: 'vs',\n inherit: true,\n rules: [],\n colors: {\n 'editor.background': '#f8fafc', // slate-50 - light gray background\n 'editorGutter.background': '#f8fafc',\n 'editorLineNumber.foreground': '#94a3b8', // slate-400\n }\n });\n window._monacoCustomThemesDefined = true;\n }\n}\n\nexport function createMonacoEditor(container, code, language, options = {}) {\n // Detect dark mode from body class or system preference\n const isDarkMode = document.body.classList.contains('dark') || \n window.matchMedia('(prefers-color-scheme: dark)').matches;\n \n const defaultConfig = {\n value: code,\n language: language === 'js' ? 'javascript' : language,\n // Use custom vs-light-gray theme for light mode (light gray background)\n theme: isDarkMode ? 'vs-dark' : 'vs-light-gray',\n automaticLayout: options.automaticLayout !== undefined ? options.automaticLayout : true,\n minimap: { enabled: false },\n scrollBeyondLastLine: false,\n readOnly: options.readOnly || false,\n folding: true,\n foldingStrategy: 'indentation',\n wordWrap: 'on',\n lineNumbers: options.lineNumbers || 'off',\n lineDecorationsWidth: 10,\n lineNumbersMinChars: 3,\n padding: { top: 10, bottom: 10 },\n fontFamily: \"ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace\",\n fontSize: 13,\n renderLineHighlight: 'none',\n scrollbar: {\n vertical: 'auto',\n horizontal: 'auto',\n alwaysConsumeMouseWheel: false\n },\n overviewRulerLanes: 0,\n hideCursorInOverviewRuler: true,\n ...options\n };\n\n // Fallback if Monaco fails - uses light gray background in light mode\n const setFallback = () => {\n console.warn('Monaco loader not found or failed, using fallback');\n container.textContent = code;\n Object.assign(container.style, {\n whiteSpace: 'pre',\n overflow: 'auto',\n fontFamily: \"ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace\",\n fontSize: '13px',\n padding: '1rem',\n backgroundColor: isDarkMode ? '#1e293b' : '#f8fafc',\n color: isDarkMode ? '#e2e8f0' : '#1e293b',\n border: isDarkMode ? '1px solid #475569' : '1px solid #e2e8f0'\n });\n };\n\n if (window.monaco && window.monaco.editor) {\n try {\n defineCustomThemes();\n return window.monaco.editor.create(container, defaultConfig);\n } catch (e) {\n console.error('Monaco create failed', e);\n setFallback();\n return null;\n }\n } else if (window.require || (typeof require !== 'undefined')) {\n const req = window.require || require;\n\n if (!window._monacoConfigured) {\n req.config({ paths: { 'vs': 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.30.1/min/vs' }});\n window._monacoConfigured = true;\n }\n\n req(['vs/editor/editor.main'], () => {\n if (window.monaco && window.monaco.editor) {\n try {\n defineCustomThemes();\n return window.monaco.editor.create(container, defaultConfig);\n } catch (e) {\n console.error('Monaco create inside require failed', e);\n setFallback();\n return null;\n }\n } else {\n setFallback();\n return null;\n }\n }, (err) => {\n console.error('RequireJS failed to load Monaco', err);\n setFallback();\n return null;\n });\n } else {\n setFallback();\n return null;\n }\n}\n\nexport function addCopyButton(parentElement, codeText) {\n if (!parentElement || parentElement.querySelector('.monaco-copy-btn')) return;\n\n if (getComputedStyle(parentElement).position === 'static') {\n parentElement.style.position = 'relative';\n }\n\n const copyBtn = document.createElement('button');\n copyBtn.className = 'monaco-copy-btn';\n copyBtn.innerHTML = '';\n copyBtn.title = 'Copy code';\n \n // Check dark mode for button styling - light gray theme in light mode\n const isDark = document.body.classList.contains('dark');\n \n Object.assign(copyBtn.style, {\n position: 'absolute',\n top: '0.5rem',\n right: '0.5rem',\n padding: '0.25rem 0.5rem',\n borderRadius: '0.25rem',\n border: isDark ? '1px solid #475569' : '1px solid #cbd5e1',\n backgroundColor: isDark ? '#334155' : '#f1f5f9',\n color: isDark ? '#f8fafc' : '#475569',\n cursor: 'pointer',\n opacity: '0',\n transition: 'opacity 0.2s',\n zIndex: '10',\n display: 'flex',\n alignItems: 'center',\n gap: '0.25rem'\n });\n\n copyBtn.addEventListener('click', () => {\n navigator.clipboard.writeText(codeText).then(() => {\n const originalIcon = copyBtn.innerHTML;\n copyBtn.innerHTML = '';\n setTimeout(() => copyBtn.innerHTML = originalIcon, 2000);\n });\n });\n\n parentElement.addEventListener('mouseenter', () => copyBtn.style.opacity = '1');\n parentElement.addEventListener('mouseleave', () => copyBtn.style.opacity = '0');\n\n parentElement.appendChild(copyBtn);\n\n return copyBtn;\n}\n\n",[],[480,472],"frontend","3bd0a97c-ef19-11f0-af6a-42dde27851f2","build-html.ts","3bd0aa4e-ef19-11f0-af6a-42dde27851f2",149,["D",1768155210166],"// Build script for chat-app HTML\n// Processes @include directives to combine partials into index.html\n\n// ========================================\n// CONFIGURATION\n// ========================================\nconst CONFIG = {\n // Source and output paths\n SRC_DIR: \"./src/html\",\n OUTPUT_FILE: \"./index.html\",\n \n // CSS loading mode: \"build\" or \"link\"\n // - \"build\": Uses locally built compiled-*.css files (for production)\n // - \"link\": Links to prebuilt design system + local custom styles (for testing)\n CSS_MODE: \"build\", // Change to \"link\" to skip rebuild and link to prebuilt CSS\n \n // CSS paths (when CSS_MODE is \"link\")\n PREBUILT_DESIGN_SYSTEM_CSS: \"/v2/frontend/styles/theme.css\", // Prebuilt design system\n LOCAL_CUSTOM_CSS: \"/frontend/styles/app.css\", // Your custom app styles\n \n // Built CSS prefix (when CSS_MODE is \"build\")\n BUILT_CSS_PREFIX: \"compiled\", // Matches OUTPUT_PREFIX in build.ts\n};\n// ========================================\n\nasync function processIncludes(content: string, basePath: string): Promise {\n const includeRegex = //g;\n let result = content;\n let match;\n \n // Reset regex lastIndex to ensure we process all matches\n includeRegex.lastIndex = 0;\n \n // Process all matches\n const matches: Array<{ match: string; path: string }> = [];\n while ((match = includeRegex.exec(content)) !== null) {\n matches.push({ match: match[0], path: match[1].trim() });\n }\n \n // Process matches in reverse order to avoid index shifting issues\n for (let i = matches.length - 1; i >= 0; i--) {\n const { match: matchStr, path: includePath } = matches[i];\n const fullPath = `${basePath}/${includePath}`;\n \n try {\n let includeContent = await Deno.readTextFile(fullPath);\n // Recursively process nested includes\n const includeDir = fullPath.substring(0, fullPath.lastIndexOf('/'));\n includeContent = await processIncludes(includeContent, includeDir);\n result = result.replace(matchStr, includeContent);\n } catch (error) {\n console.error(`Error including ${fullPath}:`, error);\n throw error;\n }\n }\n \n return result;\n}\n\nasync function injectCssLinks(html: string): Promise {\n // Look for a CSS injection point or tag\n const cssPlaceholder = \"\";\n const headCloseTag = \"\";\n \n let cssLinks = \"\";\n \n if (CONFIG.CSS_MODE === \"link\") {\n // Link mode: Use prebuilt design system + local custom styles\n cssLinks = `\n \n \n `;\n console.log(` 🔗 CSS Mode: link`);\n console.log(` - Design system: ${CONFIG.PREBUILT_DESIGN_SYSTEM_CSS}`);\n console.log(` - Custom styles: ${CONFIG.LOCAL_CUSTOM_CSS}`);\n } else {\n // Build mode: Use locally compiled CSS chunks\n const stylesDir = \"./styles\";\n try {\n const files = [];\n for await (const entry of Deno.readDir(stylesDir)) {\n if (entry.isFile && entry.name.startsWith(CONFIG.BUILT_CSS_PREFIX) && entry.name.endsWith(\".css\")) {\n files.push(entry.name);\n }\n }\n \n // Sort files to ensure correct order (compiled.css or compiled-1.css, compiled-2.css, etc.)\n files.sort((a, b) => {\n const aNum = a.match(/-(\\d+)\\.css$/)?.[1];\n const bNum = b.match(/-(\\d+)\\.css$/)?.[1];\n if (!aNum && !bNum) return 0;\n if (!aNum) return -1;\n if (!bNum) return 1;\n return parseInt(aNum) - parseInt(bNum);\n });\n \n if (files.length > 0) {\n cssLinks = `\n `;\n for (const file of files) {\n cssLinks += `\n `;\n }\n console.log(` 📦 CSS Mode: build (${files.length} file${files.length > 1 ? 's' : ''})`);\n files.forEach(f => console.log(` - ${f}`));\n } else {\n console.warn(` ⚠️ No compiled CSS files found with prefix \"${CONFIG.BUILT_CSS_PREFIX}\"`);\n cssLinks = `\n `;\n }\n } catch (error) {\n console.warn(` ⚠️ Could not read styles directory:`, error);\n cssLinks = `\n `;\n }\n }\n \n // Inject CSS links\n if (html.includes(cssPlaceholder)) {\n return html.replace(cssPlaceholder, cssLinks);\n } else if (html.includes(headCloseTag)) {\n return html.replace(headCloseTag, `${cssLinks}\\n ${headCloseTag}`);\n }\n \n return html;\n}\n\nasync function buildHtml() {\n console.log(\"🔄 Building chat-app HTML...\\n\");\n \n const templatePath = `${CONFIG.SRC_DIR}/index.template.html`;\n const template = await Deno.readTextFile(templatePath);\n let result = await processIncludes(template, CONFIG.SRC_DIR);\n \n // Inject CSS links based on configuration\n result = await injectCssLinks(result);\n \n await Deno.writeTextFile(CONFIG.OUTPUT_FILE, result);\n \n const lines = result.split('\\n').length;\n console.log(`\\n✅ Created ${CONFIG.OUTPUT_FILE} (${lines} lines)`);\n}\n\nif (import.meta.main) {\n await buildHtml();\n}\n\n",[],[480,482],"3c7514e4-ef19-11f0-b856-42dde27851f2","tailwind.config.js","0bf44c04-e2e9-11f0-b941-42dde27851f2","0a5845a8-e2e9-11f0-8ff9-42dde27851f2",172,["D",1768155211433],"/** @type {import('tailwindcss').Config} */\nexport default {\n content: [\n \"../index.html\",\n \"../src/**/*.js\",\n \"../main.tsx\",\n \"./app.scss\",\n ],\n safelist: [\n 'text-size-small',\n 'text-size-medium',\n 'text-size-large',\n ],\n theme: {\n extend: {},\n },\n plugins: [],\n}\n\n",[],[480,498,490],"styles","0c43f678-e2e9-11f0-ad97-42dde27851f2","postcss.config.js","0c43f718-e2e9-11f0-ad97-42dde27851f2",45,["D",1766815100948],"export default {\n plugins: {\n tailwindcss: {},\n autoprefixer: {},\n },\n}\n\n",[],[480,498,500],"3b7c7ff0-ef19-11f0-97b5-42dde27851f2","compiled-loader.txt","3b7c80ae-ef19-11f0-97b5-42dde27851f2",140,["D",1768155209934],"/* chat-app CSS - Include these in order:\n \n \n \n \n*/\n",[],[480,498,508],"3baa879c-ef19-11f0-b4c0-42dde27851f2","compiled-4.css","3baa8850-ef19-11f0-b4c0-42dde27851f2",144,["D",1768155210226],".send-button:disabled{opacity:.5;cursor:not-allowed;background-color:var(--color-bg-disabled);color:var(--color-text-disabled)}.send-button .iconify{font-size:18px}.attachment-menu{position:absolute;z-index:20;display:flex;flex-direction:column;gap:0.25rem;border-radius:1rem;border-width:1px;--tw-border-opacity:1;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1));--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));padding:0.5rem;--tw-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);bottom:calc(100% - 10px);left:1rem;min-width:180px;transform-origin:bottom left}@media(min-width: 768px){.attachment-menu{left:calc(50% - 384px + 1rem)}}.attachment-option{display:flex;width:100%;cursor:pointer;align-items:center;gap:0.75rem;border-radius:0.5rem;border-style:none;background-color:transparent;padding:0.75rem;font-size:0.875rem;line-height:1.25rem;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;color:#0f172a}.attachment-option:hover{--tw-bg-opacity:1;background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1))}.attachment-icon{display:flex;height:2rem;width:2rem;align-items:center;justify-content:center;border-radius:9999px}.attachment-icon .iconify{font-size:18px}.bg-blue-100{background-color:#dbeafe}.text-blue-600{color:#2563eb}.bg-purple-100{background-color:#f3e8ff}.text-purple-600{color:#9333ea}.footer-text{margin-top:0.75rem;text-align:center;font-size:0.75rem;line-height:1rem;color:#64748b}.model-picker-button{display:flex;align-items:center;gap:.5rem;padding:.375rem .75rem;font-size:.875rem;color:#64748b;background:rgba(0,0,0,0);border:none;border-radius:.5rem;cursor:pointer;transition:all .15s ease;max-width:280px;min-width:0;flex:1 1 auto;overflow:hidden}@media(max-width: 640px){.model-picker-button{max-width:none;padding:.375rem .5rem;gap:.375rem;font-size:.8125rem}}.model-picker-button:hover{background:#f1f5f9;color:#334155}.model-picker-button .iconify{flex-shrink:0}.model-picker-button span.truncate{flex:1 1 0%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.model-picker-dropdown{position:absolute;left:0;width:420px;padding:0;background:#fff;border:1px solid #e2e8f0;border-radius:.75rem;box-shadow:0 10px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);z-index:50;overflow:hidden}@media(max-width: 640px){.model-picker-dropdown{left:0;right:auto;width:100%;min-width:280px;max-width:420px}}.model-picker-search{display:flex;align-items:center;padding:0 .75rem;border-bottom:1px solid #f1f5f9}.model-picker-search-input{flex:1;height:2.5rem;background:rgba(0,0,0,0) !important;border:none !important;outline:none !important;box-shadow:none !important;font-size:.875rem}.model-picker-search-input::-moz-placeholder{color:#94a3b8}.model-picker-search-input::placeholder{color:#94a3b8}.model-picker-search-input:focus{outline:none !important;box-shadow:none !important;border:none !important;ring:none}.model-picker-list{padding:.25rem;display:flex;flex-direction:column;gap:0;max-height:400px;overflow-y:auto;overflow-x:hidden}.model-picker-item{display:flex;align-items:center;padding:.5rem .625rem;border-radius:.5rem;cursor:pointer;transition:background .15s ease;flex:1 1 100%;min-width:0}.model-picker-item:hover{background:#f8fafc}.model-picker-item .text-primary{color:#f97316}.model-picker-item .font-medium{font-size:.875rem}.model-picker-item-selected{background:#f1f5f9}.model-picker-item-preview{background:#f8fafc}.model-picker-logo{width:1.5rem;height:1.5rem;margin-right:.625rem;flex-shrink:0;border-radius:.375rem;-o-object-fit:contain;object-fit:contain}.model-picker-preview-badge{font-size:.625rem;font-weight:500;padding:.125rem .375rem;border-radius:.25rem;background:#f1f5f9;color:#64748b;border:1px solid #e2e8f0;text-transform:uppercase;letter-spacing:.025em;flex-shrink:0}.main-view-nav{display:flex;align-items:center;flex-shrink:0;width:100%;min-height:2.75rem;padding:.375rem .75rem;border-bottom:1px solid var(--color-border, #e2e8f0)}.main-view-group{display:inline-flex;flex-direction:row;background-color:var(--color-bg-muted, #f4f4f5);padding:.25rem;border-radius:var(--radius-lg, 0.5rem);gap:.25rem}.main-view-tab{display:inline-flex;align-items:center;justify-content:center;gap:.375rem;padding:.375rem .75rem;font-size:.8125rem;font-weight:500;line-height:1.25rem;color:var(--color-text-secondary, #71717a);background-color:rgba(0,0,0,0);border:none;border-radius:var(--radius-md, 0.375rem);cursor:pointer;transition:all .15s ease-in-out;white-space:nowrap}.main-view-tab .iconify{width:.875rem;height:.875rem;flex-shrink:0}.main-view-tab:hover:not(.active){color:var(--color-text-primary, #18181b);background-color:rgba(0,0,0,.03)}.main-view-tab.active{color:var(--color-text-primary, #09090b);background-color:var(--color-bg-primary, #ffffff);box-shadow:var(--shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.05));font-weight:500}.chat-sidebar-view{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}.chat-sidebar{flex-shrink:0;width:160px;height:100%;background-color:var(--color-bg-muted, #f8fafc);border-right:1px solid var(--color-border, #e2e8f0);transition:width .2s ease,margin-left .2s ease;overflow:hidden;position:relative;display:flex;flex-direction:column}.chat-sidebar-collapsed{width:0;margin-left:-1px}.chat-sidebar-inner{display:flex;flex-direction:column;width:160px;flex:1;min-height:0;overflow:hidden}.chat-sidebar-header{display:flex;align-items:center;flex-shrink:0;height:3rem;padding:0 .75rem;border-bottom:1px solid var(--color-border, #e2e8f0);border-right:1px solid var(--color-border, #e2e8f0);background-color:var(--color-bg-primary, #ffffff)}.chat-sidebar-header-content{display:flex;align-items:center;gap:.375rem;flex:1}.chat-sidebar-icon{width:1rem;height:1rem;color:var(--color-primary, #3b82f6)}.chat-sidebar-title{font-size:.8125rem;font-weight:600;color:var(--color-text-primary, #0f172a)}.chat-sidebar-actions{display:flex;align-items:center;gap:.25rem}.chat-sidebar-action-btn{display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;padding:0;border:none;border-radius:.25rem;background-color:rgba(0,0,0,0);color:var(--color-text-muted, #94a3b8);cursor:pointer;transition:background-color .15s ease,color .15s ease}.chat-sidebar-action-btn:hover{background-color:var(--color-bg-muted, #f1f5f9);color:var(--color-text-primary, #0f172a)}.chat-sidebar-content{flex:1;overflow-y:auto;padding:.25rem .25rem}.chat-sidebar-group{margin-bottom:.5rem}.chat-sidebar-group-label{padding:.375rem .5rem .125rem;font-size:.625rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-muted, #94a3b8)}.chat-sidebar-menu{display:flex;flex-direction:column;gap:1px}.chat-folder-root{min-height:1.5rem;padding:.125rem;border-radius:.25rem;transition:background-color .15s ease,outline .15s ease}.chat-folder-root.drag-over{background-color:var(--color-primary-light, #dbeafe);outline:2px dashed var(--color-primary, #3b82f6);outline-offset:-2px}.chat-folder{position:relative}.chat-folder-drag-wrapper,.chat-item-drag-wrapper{position:relative}.chat-folder-row{display:flex;align-items:center;gap:.125rem;padding:.25rem .375rem;border-radius:.25rem;cursor:pointer;transition:background-color .15s ease;position:relative}.chat-folder-row:hover{background-color:var(--color-bg-muted, #f1f5f9)}.chat-folder-row:has(.chat-folder-edit-input){background-color:rgba(0,0,0,0)}.chat-folder-row.drag-over{background-color:var(--color-primary-light, #dbeafe);outline:2px dashed var(--color-primary, #3b82f6);outline-offset:-2px}.chat-folder-row.is-dragging{opacity:.5}.chat-folder-toggle{display:flex;align-items:center;justify-content:center;width:1rem;height:1rem;padding:0;border:none;border-radius:.125rem;background-color:rgba(0,0,0,0);color:var(--color-text-muted, #94a3b8);cursor:pointer;flex-shrink:0;transition:background-color .15s ease,color .15s ease}.chat-folder-toggle:hover{background-color:var(--color-bg-secondary, #e2e8f0);color:var(--color-text-primary, #0f172a)}.chat-folder-chevron{width:.75rem;height:.75rem;transition:transform .2s ease}.chat-folder-chevron.rotated{transform:rotate(-90deg)}.chat-folder-icon-folder{width:.875rem;height:.875rem;color:var(--color-text-muted, #94a3b8);flex-shrink:0}.chat-folder-label{font-size:0.875rem;line-height:1.25rem;flex:1;min-width:0;display:flex;align-items:center;gap:.125rem;padding:0;border:none;background-color:rgba(0,0,0,0);color:var(--color-text-primary, #0f172a);font-weight:500;text-align:left;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chat-folder-count{color:var(--color-text-muted, #94a3b8);font-weight:400;font-size:.6875rem}input.chat-folder-edit-input,input.chat-folder-edit-input[type=text]{font-size:0.875rem;line-height:1.25rem;flex:1;min-width:0;padding:0 !important;margin:0 !important;border:none !important;border-bottom:1px dashed var(--color-text-muted, #94a3b8) !important;border-radius:0 !important;background-color:rgba(0,0,0,0) !important;background:rgba(0,0,0,0) !important;color:var(--color-text-primary, #0f172a) !important;font-weight:500 !important;font-family:inherit !important;line-height:1.4 !important;outline:none !important;box-shadow:none !important;height:auto !important}input.chat-folder-edit-input:focus,input.chat-folder-edit-input:active,input.chat-folder-edit-input:focus-visible,input.chat-folder-edit-input[type=text]:focus,input.chat-folder-edit-input[type=text]:active,input.chat-folder-edit-input[type=text]:focus-visible{outline:none !important;box-shadow:none !important;border:none !important;border-bottom:1px dashed var(--color-primary, #3b82f6) !important;background-color:rgba(0,0,0,0) !important;background:rgba(0,0,0,0) !important}input.chat-folder-edit-input::-moz-selection, input.chat-folder-edit-input[type=text]::-moz-selection{background-color:var(--color-primary-light, #dbeafe)}input.chat-folder-edit-input::selection,input.chat-folder-edit-input[type=text]::selection{background-color:var(--color-primary-light, #dbeafe)}.chat-folder-actions-hover{display:none;align-items:center;gap:.125rem;margin-left:auto}.chat-folder-row:hover .chat-folder-actions-hover,.chat-item:hover .chat-folder-actions-hover{display:flex}.chat-action-btn-sm{display:flex;align-items:center;justify-content:center;width:1.125rem;height:1.125rem;padding:0;border:none;border-radius:.125rem;background-color:rgba(0,0,0,0);color:var(--color-text-muted, #94a3b8);cursor:pointer;transition:background-color .15s ease,color .15s ease}.chat-action-btn-sm:hover{background-color:var(--color-bg-secondary, #e2e8f0);color:var(--color-text-primary, #0f172a)}.chat-action-btn-sm .iconify{width:.75rem;height:.75rem}.chat-context-menu{position:absolute;top:100%;right:0;z-index:50;min-width:9rem;padding:.25rem;margin-top:.25rem;background-color:var(--color-bg-primary, #ffffff);border:1px solid var(--color-border, #e2e8f0);border-radius:.5rem;box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05);opacity:0;transform:scale(0.95);transform-origin:top right;transition:opacity .15s ease,transform .15s ease,visibility 0s linear .15s;visibility:hidden;pointer-events:none}.chat-context-menu.open{opacity:1;transform:scale(1);visibility:visible;pointer-events:auto;transition-delay:0s}.chat-context-item{display:flex;align-items:center;gap:.5rem;width:100%;padding:.5rem .625rem;border:none;border-radius:.375rem;background-color:rgba(0,0,0,0);color:var(--color-text-secondary, #64748b);font-size:.8125rem;text-align:left;cursor:pointer;transition:background-color .15s ease,color .15s ease}.chat-context-item:hover{background-color:var(--color-bg-muted, #f1f5f9);color:var(--color-text-primary, #0f172a)}.chat-context-item .iconify{width:.875rem;height:.875rem;flex-shrink:0}.chat-context-danger{color:var(--color-danger, #ef4444)}.chat-context-danger:hover{background-color:var(--color-danger-light, #fee2e2);color:var(--color-danger-dark, #b91c1c)}.chat-folder-contents{display:flex;flex-direction:column;gap:1px;margin-left:.85rem;padding-left:.5rem;border-left:1px solid var(--color-border, #e2e8f0)}.chat-folder-nested{margin-left:0}.chat-item{display:flex;align-items:center;gap:.35rem;padding:.25rem .375rem;border-radius:.25rem;cursor:pointer;transition:background-color .15s ease;position:relative}.chat-item:hover{background-color:var(--color-bg-hover, var(--color-bg-muted, #f1f5f9))}.chat-item.active{background-color:var(--color-primary-lighter, #dbeafe)}.chat-item:has(.chat-folder-edit-input){background-color:rgba(0,0,0,0)}.chat-item.is-dragging{opacity:.5}.chat-item-icon{width:.75rem;height:.75rem;color:var(--color-text-muted, #94a3b8);flex-shrink:0}.chat-item.active .chat-item-icon{color:var(--color-primary, #3b82f6)}.chat-item-btn{font-size:0.875rem;line-height:1.25rem;display:flex;align-items:center;gap:.35rem;flex:1;min-width:0;padding:0;border:none;background-color:rgba(0,0,0,0);color:var(--color-text-primary, #0f172a);font-weight:400;text-align:left;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;outline:none}.chat-item-btn .iconify{width:.75rem;height:.75rem;color:var(--color-text-muted, #94a3b8);flex-shrink:0}.chat-item-btn:focus-visible{outline:2px solid var(--color-primary, #3b82f6);outline-offset:-2px;border-radius:.125rem}.chat-item.active .chat-item-btn{font-weight:500;color:var(--color-primary-dark, #1e40af)}.chat-drop-indicator{position:absolute;left:0;right:0;height:2px;background-color:var(--color-primary, #3b82f6);pointer-events:none;z-index:10;border-radius:1px}.chat-drop-indicator::before{content:\"\";position:absolute;left:0;top:50%;transform:translateY(-50%);width:6px;height:6px;background-color:var(--color-primary, #3b82f6);border-radius:50%}.chat-folder-drop-before .chat-drop-indicator,.chat-item-drop-before .chat-drop-indicator{top:0;display:block}.chat-folder-drop-after .chat-drop-indicator,.chat-item-drop-after .chat-drop-indicator{bottom:0;top:auto;display:block}.chat-folder-drop-inside>.chat-folder-row{background-color:var(--color-primary-light, #dbeafe);outline:2px solid var(--color-primary, #3b82f6);outline-offset:-2px}.chat-empty-state{display:flex;flex-direction:column}.chat-empty-state .chat-item{width:100%}.chat-empty-btn{padding:.375rem .75rem;border:1px solid var(--color-border, #e2e8f0);border-radius:.375rem;background-color:var(--color-bg-primary, #ffffff);color:var(--color-text-primary, #0f172a);font-size:.8125rem;font-weight:500;cursor:pointer;transition:background-color .15s ease,border-color .15s ease}.chat-empty-btn:hover{background-color:var(--color-bg-muted, #f1f5f9);border-color:var(--color-primary, #3b82f6)}.chat-sidebar-footer{display:flex;align-items:center;justify-content:space-between;flex-shrink:0;padding:.5rem .75rem;border-top:1px solid var(--color-border, #e2e8f0)}.chat-sidebar-footer-info{display:flex;align-items:center;color:var(--color-text-muted, #94a3b8);font-size:.6875rem}.chat-sidebar-settings-btn{display:flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;padding:0;border:none;border-radius:.375rem;background-color:rgba(0,0,0,0);color:var(--color-text-muted, #94a3b8);cursor:pointer;transition:background-color .15s ease,color .15s ease}.chat-sidebar-settings-btn:hover{background-color:var(--color-bg-muted, #f1f5f9);color:var(--color-text-primary, #0f172a)}.chat-sidebar-settings-btn .iconify{width:1rem;height:1rem}.chat-sidebar-close-btn{display:none}.chat-sidebar-overlay{display:none}.touch-drag-ghost{position:fixed;pointer-events:none;z-index:9999;opacity:.9;transform:scale(1.02);box-shadow:0 8px 25px rgba(0,0,0,.15);background:var(--color-bg-primary, #fff);border-radius:.25rem;border:1px solid var(--color-primary, #3b82f6)}.touch-drag-ghost .chat-folder-actions-hover,.touch-drag-ghost .chat-context-menu{display:none !important}.touch-dragging{-moz-user-select:none;user-select:none;-webkit-user-select:none}.touch-dragging *{-moz-user-select:none;user-select:none;-webkit-user-select:none}@media(max-width: 768px){.chat-sidebar-overlay{position:fixed;inset:0;z-index:49;background-color:rgba(0,0,0,.5);opacity:0;visibility:hidden;transition:opacity .3s ease-out,visibility 0s linear .3s;display:block}.chat-sidebar-overlay.open{opacity:1;visibility:visible;transition-delay:0s}.chat-sidebar{position:fixed;left:0;top:0;z-index:50;box-shadow:4px 0 15px rgba(0,0,0,.1)}.chat-sidebar-collapsed{transform:translateX(-100%);width:280px;margin-left:0}.chat-sidebar-collapsed .chat-sidebar-close-btn{display:none}.chat-sidebar-close-btn{display:flex;align-items:center;justify-content:center;position:absolute;top:.5rem;right:-2.5rem;width:2rem;height:2rem;padding:0;border:1px solid var(--color-border, #e2e8f0);border-left:none;border-radius:0 .375rem .375rem 0;background-color:var(--color-bg-primary, #ffffff);color:var(--color-text-muted, #94a3b8);cursor:pointer;transition:background-color .15s ease,color .15s ease,border-color .15s ease;box-shadow:2px 0 8px rgba(0,0,0,.1);z-index:51}.chat-sidebar-close-btn::before{content:\"\";position:absolute;left:0;top:0;bottom:0;width:1px;background-color:var(--color-border, #e2e8f0)}.chat-sidebar-close-btn:hover{background-color:var(--color-bg-muted, #f1f5f9);color:var(--color-text-primary, #0f172a);border-color:var(--color-text-muted, #94a3b8)}.chat-sidebar-close-btn .iconify{width:1rem;height:1rem}}.chat-right-sidebar{flex-shrink:0;width:320px;height:100%;background-color:var(--color-bg-muted, #f8fafc);border-left:1px solid var(--color-border, #e2e8f0);transition:width .2s ease,margin-right .2s ease;overflow:hidden;position:relative}.chat-right-sidebar-collapsed{width:0;margin-right:-1px}.chat-right-sidebar-inner{display:flex;flex-direction:column;width:320px;height:100%;overflow:hidden}.chat-right-sidebar-header{display:flex;align-items:center;flex-shrink:0;height:3rem;padding:0 .75rem;border-bottom:1px solid var(--color-border, #e2e8f0);background-color:var(--color-bg-primary, #ffffff)}.chat-right-sidebar-header-content{display:flex;align-items:center;gap:.375rem;flex:1}.chat-right-sidebar-icon{width:1rem;height:1rem;color:var(--color-text-muted, #94a3b8)}.chat-right-sidebar-title{font-size:.8125rem;font-weight:600;color:var(--color-text-primary, #0f172a)}.chat-right-sidebar-close{display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;padding:0;border:none;border-radius:.25rem;background-color:rgba(0,0,0,0);color:var(--color-text-muted, #94a3b8);cursor:pointer;transition:background-color .15s ease,color .15s ease}.chat-right-sidebar-close:hover{background-color:var(--color-bg-muted, #f1f5f9);color:var(--color-text-primary, #0f172a)}.chat-right-sidebar-content{flex:1;overflow-y:auto;overflow-x:hidden;padding:.75rem;min-height:0}.chat-settings-group{margin-bottom:1.25rem}.chat-settings-group-label{padding:0 0 .5rem;font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-muted, #94a3b8)}.chat-settings-field{margin-bottom:1rem}.chat-settings-label{display:block;margin-bottom:.375rem;font-size:.8125rem;font-weight:500;color:var(--color-text-primary, #0f172a)}.chat-settings-description{display:block;margin-bottom:.5rem;font-size:.6875rem;padding-top:.5rem;color:var(--color-text-muted, #94a3b8)}.chat-settings-input,.chat-settings-textarea,.chat-settings-select{width:100%;padding:.5rem .625rem;font-size:.8125rem;font-family:var(--font-mono, \"Menlo\", monospace);color:var(--color-text-primary, #0f172a);background-color:var(--color-bg-primary, #ffffff);border:1px solid var(--color-border, #e2e8f0);border-radius:.375rem;transition:border-color .15s ease,box-shadow .15s ease}.chat-settings-input:focus,.chat-settings-textarea:focus,.chat-settings-select:focus{outline:none;border-color:var(--color-primary, #3b82f6);box-shadow:0 0 0 2px var(--color-primary-light, #dbeafe)}.chat-settings-input::-moz-placeholder, .chat-settings-textarea::-moz-placeholder, .chat-settings-select::-moz-placeholder{color:var(--color-text-muted, #94a3b8)}.chat-settings-input::placeholder,.chat-settings-textarea::placeholder,.chat-settings-select::placeholder{color:var(--color-text-muted, #94a3b8)}.chat-settings-textarea{min-height:6rem;resize:vertical;line-height:1.5}.chat-right-sidebar-content textarea.form-input{overflow:auto;resize:vertical}.chat-settings-range-wrapper{display:flex;align-items:center;gap:.75rem}.chat-settings-range{flex:1;height:4px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--color-bg-secondary, #e2e8f0);border-radius:2px;cursor:pointer}.chat-settings-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;background-color:var(--color-primary, #3b82f6);border-radius:50%;cursor:pointer;-webkit-transition:transform .15s ease;transition:transform .15s ease}.chat-settings-range::-webkit-slider-thumb:hover{transform:scale(1.1)}.chat-settings-range::-moz-range-thumb{width:14px;height:14px;background-color:var(--color-primary, #3b82f6);border:none;border-radius:50%;cursor:pointer}.chat-settings-range:focus{outline:none}.chat-settings-range:focus::-webkit-slider-thumb{box-shadow:0 0 0 3px var(--color-primary-light, #dbeafe)}.chat-settings-range-value{min-width:3rem;padding:.25rem .5rem;font-size:.75rem;font-family:var(--font-mono, \"Menlo\", monospace);color:var(--color-text-secondary, #64748b);background-color:var(--color-bg-muted, #f1f5f9);border-radius:.25rem;text-align:center}.chat-settings-toggle{display:flex;align-items:center;gap:.625rem;cursor:pointer;padding:.5rem 0;-webkit-user-select:none;-moz-user-select:none;user-select:none}.chat-settings-toggle-input{flex-shrink:0;width:2.25rem;height:1.25rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--color-bg-secondary, #e2e8f0);border-radius:.625rem;cursor:pointer;position:relative;transition:background-color .15s ease;margin:0}.chat-settings-toggle-input::before{content:\"\";position:absolute;top:2px;left:2px;width:calc(1.25rem - 4px);height:calc(1.25rem - 4px);background-color:var(--color-bg-primary, #ffffff);border-radius:50%;transition:transform .15s ease;box-shadow:0 1px 2px rgba(0,0,0,.1)}.chat-settings-toggle-input:checked{background-color:var(--color-primary, #3b82f6)}.chat-settings-toggle-input:checked::before{transform:translateX(1rem)}.chat-settings-toggle-input:focus{outline:none;box-shadow:0 0 0 2px var(--color-primary-light, #dbeafe)}.chat-settings-toggle-label{flex:1;font-size:.8125rem;font-weight:500;color:var(--color-text-primary, #0f172a);cursor:pointer;line-height:1.4}.chat-right-sidebar-footer{display:flex;align-items:center;justify-content:space-between;flex-shrink:0;padding:.5rem .75rem;border-top:1px solid var(--color-border, #e2e8f0);gap:.5rem;background-color:var(--color-bg-primary, #ffffff)}.chat-settings-btn{display:flex;align-items:center;justify-content:center;gap:.375rem;padding:.375rem .75rem;font-size:.75rem;font-weight:500;border-radius:.375rem;cursor:pointer;transition:background-color .15s ease,border-color .15s ease}.chat-settings-btn-reset{background-color:rgba(0,0,0,0);border:1px solid var(--color-border, #e2e8f0);color:var(--color-text-secondary, #64748b)}.chat-settings-btn-reset:hover{background-color:var(--color-bg-muted, #f1f5f9);border-color:var(--color-text-muted, #94a3b8)}.chat-settings-btn-save{background-color:var(--color-primary, #3b82f6);border:1px solid var(--color-primary, #3b82f6);color:var(--color-text-inverse, #ffffff)}.chat-settings-btn-save:hover{background-color:var(--color-primary-dark, #2563eb);border-color:var(--color-primary-dark, #2563eb)}.chat-settings-trigger{display:flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;padding:0;margin-left:auto;border:none;border-radius:.375rem;background-color:rgba(0,0,0,0);color:var(--color-text-muted, #94a3b8);cursor:pointer;transition:background-color .15s ease,color .15s ease}.chat-settings-trigger:hover{background-color:var(--color-bg-muted, #f1f5f9);color:var(--color-text-primary, #0f172a)}.chat-settings-trigger.active{background-color:var(--color-primary-light, #dbeafe);color:var(--color-primary, #3b82f6)}.chat-settings-trigger .iconify{width:1rem;height:1rem}.chat-right-sidebar-overlay{display:none}@media(max-width: 768px){.chat-right-sidebar-overlay{position:fixed;inset:0;z-index:49;background-color:rgba(0,0,0,.5);opacity:0;visibility:hidden;transition:opacity .3s ease-out,visibility 0s linear .3s;display:block}.chat-right-sidebar-overlay.open{opacity:1;visibility:visible;transition-delay:0s}.chat-right-sidebar{position:fixed;right:0;top:0;z-index:50;box-shadow:-4px 0 15px rgba(0,0,0,.1)}.chat-right-sidebar-collapsed{transform:translateX(100%);width:320px;margin-right:0}}.chat-settings-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem 1rem;text-align:center;height:100%}.chat-settings-empty .iconify{width:2.5rem;height:2.5rem;margin-bottom:.75rem;color:var(--color-text-muted, #94a3b8)}.chat-settings-empty p{font-size:.8125rem;color:var(--color-text-muted, #94a3b8);margin:0}.settings-view{display:flex;flex:1;min-height:0;background-color:var(--color-bg-muted, #f8fafc)}.settings-layout{display:flex;flex:1;min-height:0}.settings-sidebar{display:flex;flex-direction:column;width:160px;padding:.25rem .25rem;background-color:var(--color-bg-primary, #ffffff);border-right:1px solid var(--color-border, #e2e8f0);flex-shrink:0;gap:1px}.settings-mobile-tabs{display:none}@media(max-width: 768px){.settings-sidebar-desktop{display:none !important}.settings-mobile-tabs{display:flex;gap:.25rem;padding:.5rem;margin:-1rem -0.75rem 1rem -0.75rem;background-color:var(--color-bg-primary, #ffffff);border-bottom:1px solid var(--color-border, #e2e8f0);overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}.settings-mobile-tabs::-webkit-scrollbar{display:none}.settings-mobile-tab{display:flex;align-items:center;gap:.375rem;padding:.5rem .75rem;border:1px solid var(--color-border, #e2e8f0);border-radius:.5rem;background-color:var(--color-bg-primary, #ffffff);color:var(--color-text-secondary, #64748b);font-size:.75rem;font-weight:500;white-space:nowrap;cursor:pointer;transition:all .15s ease;flex-shrink:0}.settings-mobile-tab .iconify{width:.875rem;height:.875rem;flex-shrink:0}.settings-mobile-tab:hover{background-color:var(--color-bg-muted, #f1f5f9);border-color:var(--color-border-hover, #cbd5e1)}.settings-mobile-tab.active{background-color:var(--color-primary-light, #dbeafe);border-color:var(--color-primary, #3b82f6);color:var(--color-primary, #3b82f6);font-weight:600}.settings-content{padding:1rem .75rem}.settings-layout{overflow-x:auto;-webkit-overflow-scrolling:touch}.surface{overflow-x:auto;-webkit-overflow-scrolling:touch}.models-table-container,.expandable-table-container{overflow-x:auto;-webkit-overflow-scrolling:touch}.models-table-container::-webkit-scrollbar,.expandable-table-container::-webkit-scrollbar{height:6px}.models-table-container::-webkit-scrollbar-track,.expandable-table-container::-webkit-scrollbar-track{background:#f1f5f9;border-radius:3px}.models-table-container::-webkit-scrollbar-thumb,.expandable-table-container::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px}.models-table-container::-webkit-scrollbar-thumb:hover,.expandable-table-container::-webkit-scrollbar-thumb:hover{background:#94a3b8}.models-table-body{min-width:600px}.expandable-table-header{min-width:600px}.expandable-row-content{overflow-x:auto;-webkit-overflow-scrolling:touch}}@media(max-width: 640px){details .expandable-row-content>div>div:has(label>input[type=checkbox].form-checkbox){display:grid !important;grid-template-columns:repeat(2, 1fr) !important;gap:.75rem !important}details .expandable-row-content>div>div:has(label>input[type=checkbox].form-checkbox) label{margin:0 !important}}@media(min-width: 641px)and (max-width: 768px){details .expandable-row-content>div>div:has(label>input[type=checkbox].form-checkbox){display:grid !important;grid-template-columns:repeat(3, 1fr) !important;gap:.75rem !important}details .expandable-row-content>div>div:has(label>input[type=checkbox].form-checkbox) label{margin:0 !important}}.settings-nav-item{display:flex;align-items:center;gap:.625rem;padding:.5rem .75rem;border:none;border-radius:.375rem;background-color:rgba(0,0,0,0);color:var(--color-text-secondary, #64748b);font-size:.8125rem;font-weight:500;text-align:left;cursor:pointer;transition:all .15s ease;outline:none}.settings-nav-item:hover{background-color:var(--color-bg-muted, #f1f5f9);color:var(--color-text-primary, #0f172a)}.settings-nav-item:focus-visible{outline:2px solid var(--color-primary, #3b82f6);outline-offset:-2px}.settings-nav-item.active{background-color:var(--color-bg-muted, #f1f5f9);color:var(--color-text-primary, #0f172a);font-weight:600}.settings-nav-item .iconify{width:1rem;height:1rem;flex-shrink:0;opacity:.8}.settings-content{flex:1;overflow-y:auto}.settings-content-inner{padding:1rem;max-width:900px;margin:0 auto}.text-muted-foreground{color:var(--color-text-muted, #94a3b8)}.text-foreground{color:var(--color-text-primary, #0f172a)}.form-label{display:block;margin-bottom:.375rem;font-size:.8125rem;font-weight:500;color:var(--color-text-primary, #0f172a)}.form-select{width:100%;padding:.375rem .625rem;font-size:.8125rem;color:var(--color-text-primary, #0f172a);background-color:var(--color-bg-primary, #ffffff);border:1px solid var(--color-border, #e2e8f0);border-radius:.375rem;outline:none;transition:border-color .15s ease,box-shadow .15s ease}.form-select:focus{border-color:var(--color-primary, #3b82f6);box-shadow:0 0 0 3px rgba(59,130,246,.1)}.form-select:hover{border-color:var(--color-border-hover, #cbd5e1)}.btn-gray-secondary{display:inline-flex;align-items:center;justify-content:center;padding:.5rem .75rem;font-size:.8125rem;font-weight:500;color:var(--color-text-primary, #0f172a);background-color:var(--color-bg-primary, #ffffff);border:1px solid var(--color-border, #e2e8f0);border-radius:.375rem;cursor:pointer;transition:all .15s ease;line-height:1}.btn-gray-secondary:hover{background-color:var(--color-bg-muted, #f8fafc);border-color:var(--color-border-hover, #cbd5e1)}.btn-gray-secondary:active{transform:scale(0.98)}.btn-gray-secondary:focus-visible{outline:2px solid var(--color-primary, #3b82f6);outline-offset:2px}.btn-danger-soft{display:inline-flex;align-items:center;justify-content:center;padding:.5rem .75rem;font-size:.8125rem;font-weight:500;color:#dc2626;background-color:#fef2f2;border:1px solid #fecaca;border-radius:.375rem;cursor:pointer;transition:all .15s ease;line-height:1}.btn-danger-soft:hover{background-color:#fee2e2;border-color:#fca5a5}.btn-danger-soft:active{transform:scale(0.98)}.btn-danger-soft:focus-visible{outline:2px solid #dc2626;outline-offset:2px}.btn-sm{padding:.25rem .5rem;font-size:.75rem;height:28px}.models-table-container{border:1px solid var(--color-border, #e2e8f0);border-radius:.5rem;background-color:#f4f4f5;padding:0 .5rem .5rem .5rem}.models-table-container details.expandable-row{border-radius:0;padding:0;margin-bottom:0;border-bottom:1px solid var(--color-border, #e2e8f0)}.models-table-container details.expandable-row:last-of-type{border-bottom:none !important}.models-table-body{background-color:var(--color-bg-primary, #ffffff);border-radius:.5rem;border:1px solid var(--color-border, #e2e8f0);overflow:hidden}.template-editor-container{flex:1;display:flex;flex-direction:column;overflow-y:auto;background-color:#fff;background:#fff}.template-editor{flex:1;padding:1.5rem;min-height:0}.template-editor-content{max-width:48rem;margin:0 auto}.template-editor-header{margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid var(--color-border, #e2e8f0)}.template-editor-title-row{display:flex;align-items:center;gap:.75rem;margin-bottom:.5rem}.template-editor-title{font-size:1.5rem;font-weight:600;color:var(--color-text-primary, #0f172a);margin:0}.template-editor-subtitle{font-size:.875rem;color:var(--color-text-secondary, #64748b);margin:0}.template-editor-section{margin-bottom:1.25rem}.template-editor-section-title{font-size:.9375rem;font-weight:600;color:var(--color-text-primary, #0f172a);margin:0 0 .75rem 0;padding-bottom:.5rem;border-bottom:1px solid var(--color-border, #e2e8f0)}.template-param-row{margin-bottom:1rem}.template-param-row:last-child{margin-bottom:0}.template-param-label{display:flex;align-items:center;justify-content:space-between;margin-bottom:.375rem;font-size:.8125rem;color:var(--color-text-primary, #0f172a)}.template-param-value{font-weight:600;font-family:var(--font-mono, \"Menlo\", monospace);color:var(--color-primary, #3b82f6)}.template-param-hints{display:flex;justify-content:space-between;margin-top:.25rem;font-size:.6875rem;color:var(--color-text-secondary, #94a3b8)}.template-features-grid{display:flex;flex-wrap:wrap;gap:.75rem}.template-feature-toggle{display:flex;align-items:center;gap:.5rem;padding:.625rem .875rem;background-color:var(--color-bg-muted, #f8fafc);border:1px solid var(--color-border, #e2e8f0);border-radius:.375rem;cursor:pointer;transition:background-color .15s ease,border-color .15s ease;font-size:.8125rem}.template-feature-toggle:hover{background-color:var(--color-bg-secondary, #f1f5f9)}.template-feature-toggle .form-checkbox{margin:0}.template-feature-toggle .iconify{color:var(--color-text-secondary, #64748b)}.template-editor-actions{display:flex;justify-content:flex-end;gap:.75rem;margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--color-border, #e2e8f0)}.template-model-picker{position:relative}.template-model-picker-trigger{display:flex;align-items:center;gap:.625rem;width:100%;padding:.75rem 1rem;background-color:var(--color-bg-primary, #ffffff);border:1px solid var(--color-border, #e2e8f0);border-radius:.5rem;cursor:pointer;text-align:left;transition:border-color .15s ease,box-shadow .15s ease}.template-model-picker-trigger:hover{border-color:var(--color-border-hover, #cbd5e1)}.template-model-picker-trigger.active{border-color:var(--color-primary, #3b82f6);box-shadow:0 0 0 2px rgba(59,130,246,.2)}.template-model-picker-logo{width:1.5rem;height:1.5rem;flex-shrink:0;border-radius:.25rem;-o-object-fit:contain;object-fit:contain;color:var(--color-text-secondary, #64748b)}.template-model-picker-text{flex:1;min-width:0;font-size:.875rem;font-weight:500;color:var(--color-text-primary, #0f172a);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.template-model-picker-chevron{flex-shrink:0;color:var(--color-text-secondary, #94a3b8);transition:transform .15s ease}.active .template-model-picker-chevron{transform:rotate(180deg)}.template-model-picker-dropdown{position:absolute;top:100%;left:0;right:0;z-index:50;margin-top:.375rem;background-color:var(--color-bg-primary, #ffffff);border:1px solid var(--color-border, #e2e8f0);border-radius:.5rem;box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05);overflow:hidden}.template-model-picker-search{display:flex;align-items:center;gap:.5rem;padding:.75rem;border-bottom:1px solid var(--color-border, #e2e8f0)}.template-model-picker-search .iconify{color:var(--color-text-secondary, #94a3b8);font-size:1.125rem;flex-shrink:0}.template-model-picker-search-input{flex:1;border:none;background:rgba(0,0,0,0);font-size:.875rem;color:var(--color-text-primary, #0f172a);outline:none}.template-model-picker-search-input::-moz-placeholder{color:var(--color-text-secondary, #94a3b8)}.template-model-picker-search-input::placeholder{color:var(--color-text-secondary, #94a3b8)}.template-model-picker-list{max-height:20rem;overflow-y:auto;padding:.375rem}.template-model-picker-item{display:flex;align-items:center;gap:.75rem;width:100%;padding:.625rem .75rem;background:rgba(0,0,0,0);border:none;border-radius:.375rem;cursor:pointer;text-align:left;transition:background-color .1s ease}.template-model-picker-item:hover{background-color:var(--color-bg-muted, #f8fafc)}.template-model-picker-item.selected{background-color:var(--color-primary-soft, #eff6ff)}.template-model-picker-item-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:.125rem}.template-model-picker-item-name{font-size:.875rem;font-weight:500;color:var(--color-text-primary, #0f172a);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.template-model-picker-item-desc{font-size:.75rem;color:var(--color-text-secondary, #64748b);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.template-model-picker-check{flex-shrink:0;color:var(--color-primary, #3b82f6);font-size:1rem}body.dark{background-color:var(--color-bg-primary, #0f172a);color:var(--color-text-primary, #f1f5f9)}.dark .theme-scope,.theme-scope.dark{background-color:var(--color-bg-primary, #0f172a) !important}.dark .app-main-content,.dark .app-main-content.theme-scope{background-color:var(--color-bg-primary, #0f172a);background:var(--color-bg-primary, #0f172a)}.dark .chat-layout{background-color:var(--color-bg-primary, #0f172a);background:var(--color-bg-primary, #0f172a)}.dark .chat-main{background-color:var(--color-bg-primary, #0f172a);background:var(--color-bg-primary, #0f172a)}.dark .chat-container{background-color:var(--color-bg-primary, #0f172a);background:var(--color-bg-primary, #0f172a)}.dark .chat-inset-header{background-color:var(--color-bg-primary, #0f172a);background:var(--color-bg-primary, #0f172a);border-bottom-color:var(--color-border, #334155)}.dark .chat-sidebar{background-color:var(--color-bg-secondary, #1e293b);border-right-color:var(--color-border, #334155)}.dark .chat-sidebar-header{background-color:var(--color-bg-primary, #0f172a);border-bottom-color:var(--color-border, #334155);border-right-color:var(--color-border, #334155)}.dark .chat-sidebar-footer{border-top-color:var(--color-border, #334155)}.dark .chat-folder-contents{border-left-color:var(--color-border, #334155)}.dark .chat-context-menu{background-color:var(--color-bg-secondary, #1e293b);border-color:var(--color-border, #334155);box-shadow:0 10px 15px -3px rgba(0,0,0,.3),0 4px 6px -2px rgba(0,0,0,.2)}.dark .chat-empty-btn{background-color:var(--color-bg-secondary, #1e293b);border-color:var(--color-border, #334155);color:var(--color-text-primary, #f1f5f9)}.dark .chat-sidebar-close-btn{background-color:var(--color-bg-primary, #0f172a);border-color:var(--color-border, #334155)}.dark .chat-right-sidebar{background-color:var(--color-bg-secondary, #1e293b);border-left-color:var(--color-border, #334155)}.dark .chat-right-sidebar-header{background-color:var(--color-bg-primary, #0f172a);border-bottom-color:var(--color-border, #334155)}.dark .chat-right-sidebar-footer{border-top-color:var(--color-border, #334155)}.dark .settings-view{background-color:var(--color-bg-secondary, #1e293b)}.dark .settings-sidebar{background-color:var(--color-bg-primary, #0f172a);border-right-color:var(--color-border, #334155)}.dark .settings-mobile-tabs{background-color:var(--color-bg-primary, #0f172a);border-bottom-color:var(--color-border, #334155)}.dark .settings-mobile-tab{background-color:var(--color-bg-secondary, #1e293b);border-color:var(--color-border, #334155);color:var(--color-text-secondary, #94a3b8)}.dark .settings-mobile-tab:hover{background-color:var(--color-bg-muted, #334155);border-color:var(--color-border, #475569)}.dark .settings-mobile-tab.active{background-color:var(--color-primary-light, rgba(59, 130, 246, 0.15));border-color:var(--color-primary, #3b82f6);color:var(--color-primary, #3b82f6)}.dark .models-table-container{background-color:var(--color-bg-muted, #334155);border-color:var(--color-border, #334155)}.dark .models-table-body{background-color:var(--color-bg-secondary, #1e293b);border-color:var(--color-border, #334155)}.dark .message-me{background-color:var(--color-bg-muted, #334155);color:var(--color-text-primary, #f1f5f9)}.dark .message-editing.message-me{background-color:rgba(51,65,85,.5);outline:2px dashed var(--color-primary, #3b82f6);outline-offset:2px}.dark .message-attachment{background-color:hsla(0,0%,100%,.05)}.dark .action-icon-btn{color:var(--color-text-muted, #94a3b8)}.dark .action-icon-btn:hover{background-color:var(--color-bg-muted, #334155);color:var(--color-text-primary, #f1f5f9)}.dark .action-icon-btn.active{background-color:var(--color-bg-secondary, #1e293b);color:var(--color-text-primary, #f1f5f9)}.dark .action-icon-btn.action-icon-btn-stop{color:#f87171}.dark .action-icon-btn.action-icon-btn-stop:hover{background-color:rgba(239,68,68,.15);color:#fca5a5}.dark .message-thinking{border-left-color:var(--color-border, #475569);color:var(--color-text-muted, #94a3b8)}.dark .message-thinking .message-thinking-header{color:var(--color-text-secondary, #cbd5e1)}.dark .message-thinking p,.dark .message-thinking li,.dark .message-thinking code,.dark .message-thinking pre{color:var(--color-text-muted, #94a3b8)}.dark .message-thinking pre{background-color:var(--color-bg-muted, #334155);border-color:var(--color-border, #475569)}.dark .message-content pre{background-color:var(--color-bg-muted, #334155);border-color:var(--color-border, #475569);color:var(--color-text-primary, #f1f5f9)}.dark .message-content pre code{color:var(--color-text-primary, #f1f5f9)}.dark .message-content code{background-color:var(--color-bg-muted, #334155);color:#f472b6}.dark .message-content table th,.dark .message-content table td{border-color:var(--color-border, #475569)}.dark .message-content table th{background-color:var(--color-bg-muted, #334155)}.dark .message-content table td{background-color:var(--color-bg-secondary, #1e293b)}.dark .error-callout{background-color:rgba(239,68,68,.15);border-color:rgba(239,68,68,.3)}.dark .error-callout .error-title{color:#fca5a5}.dark .error-callout .error-message{color:#fca5a5}.dark .chat-input-container{background-color:var(--color-bg-secondary, #1e293b);border-color:var(--color-border, #334155)}.dark .chat-input{color:var(--color-text-primary, #f1f5f9)}.dark .chat-input::-moz-placeholder{color:var(--color-text-muted, #94a3b8)}.dark .chat-input::placeholder{color:var(--color-text-muted, #94a3b8)}.dark .attachment-menu{background-color:var(--color-bg-secondary, #1e293b);border-color:var(--color-border, #334155);box-shadow:0 10px 15px -3px rgba(0,0,0,.3),0 4px 6px -2px rgba(0,0,0,.2)}.dark .attachment-option{color:var(--color-text-primary, #f1f5f9)}.dark .attachment-option:hover{background-color:var(--color-bg-muted, #334155)}.dark .footer-text{color:var(--color-text-muted, #94a3b8)}.dark .monaco-copy-btn{background-color:var(--color-bg-secondary, #1e293b);border-color:var(--color-border, #475569);color:var(--color-text-primary, #f1f5f9)}.dark .main-view-nav{border-bottom-color:var(--color-border, #334155)}.dark .main-view-group{background-color:var(--color-bg-muted, #334155)}.dark .main-view-tab{color:var(--color-text-muted, #94a3b8)}.dark .main-view-tab:hover:not(.active){color:var(--color-text-primary, #f1f5f9);background-color:hsla(0,0%,100%,.05)}.dark .main-view-tab.active{color:var(--color-text-primary, #f1f5f9);background-color:var(--color-bg-secondary, #1e293b);box-shadow:0 1px 3px rgba(0,0,0,.3)}.dark .btn-gray-secondary{background-color:var(--color-bg-secondary, #1e293b);border-color:var(--color-border, #334155);color:var(--color-text-primary, #f1f5f9)}.dark .btn-gray-secondary:hover{background-color:var(--color-bg-muted, #334155);border-color:var(--color-border, #475569)}.dark .btn-danger-soft{background-color:rgba(239,68,68,.15);border-color:rgba(239,68,68,.3);color:#fca5a5}.dark .btn-danger-soft:hover{background-color:rgba(239,68,68,.25);border-color:rgba(239,68,68,.4)}.dark .chat-welcome h2{color:var(--color-text-primary, #f1f5f9)}.dark .chat-welcome p{color:var(--color-text-muted, #94a3b8)}.dark .model-picker-button{color:var(--color-text-muted, #94a3b8)}.dark .model-picker-button:hover{background-color:var(--color-bg-muted, #334155);color:var(--color-text-primary, #f1f5f9)}.dark .model-picker-dropdown{background-color:var(--color-bg-secondary, #1e293b);border-color:var(--color-border, #334155);box-shadow:0 10px 25px -5px rgba(0,0,0,.4),0 8px 10px -6px rgba(0,0,0,.3)}.dark .model-picker-search{border-bottom-color:var(--color-border, #334155)}.dark .model-picker-search-input{color:var(--color-text-primary, #f1f5f9)}.dark .model-picker-search-input::-moz-placeholder{color:var(--color-text-muted, #64748b)}.dark .model-picker-search-input::placeholder{color:var(--color-text-muted, #64748b)}.dark .model-picker-list{background-color:var(--color-bg-secondary, #1e293b)}.dark .model-picker-item{color:var(--color-text-primary, #f1f5f9)}.dark .model-picker-item:hover{background-color:var(--color-bg-muted, #334155)}.dark .model-picker-item .text-muted-foreground,.dark .model-picker-item .text-gray-500,.dark .model-picker-item .text-slate-500{color:var(--color-text-muted, #94a3b8)}.dark .model-picker-item-selected{background-color:var(--color-bg-muted, #334155)}.dark .model-picker-item-preview{background-color:var(--color-bg-muted, #334155)}.dark .model-picker-preview-badge{background-color:var(--color-bg-muted, #334155);border-color:var(--color-border, #475569);color:var(--color-text-muted, #94a3b8)}.active-model-display{background-color:var(--color-bg-primary, #ffffff);border-color:var(--color-border, #e2e8f0)}.dark .active-model-display{background-color:var(--color-bg-secondary, #1e293b);border-color:var(--color-border, #334155)}.model-id-display{background-color:#f9fafb;border-color:#e5e7eb;color:#374151}.dark .model-id-display{background-color:var(--color-bg-muted, #334155);border-color:var(--color-border, #475569);color:var(--color-text-primary, #f1f5f9)}.dark .expandable-row summary::before,.dark .theme-scope summary::before,.dark details summary::before{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2394a3b8'%3e%3cpath d='M8 5v14l11-7z'/%3e%3c/svg%3e\")}.dark .expandable-row{background-color:var(--color-bg-primary, #0f172a)}.dark .expandable-row summary:hover{background-color:var(--color-bg-muted, #334155)}.dark .expandable-row[open] summary{background-color:var(--color-bg-muted, #334155);border-bottom-color:var(--color-border, #334155)}.dark .expandable-row-content{background-color:var(--color-bg-secondary, #1e293b)}.add-model-row{background-color:#eff6ff;border-color:#bfdbfe}.dark .add-model-row{background-color:rgba(59,130,246,.15);border-color:rgba(59,130,246,.3)}.dark .add-model-row .form-input{background-color:var(--color-bg-secondary, #1e293b);border-color:var(--color-border, #475569);color:var(--color-text-primary, #f1f5f9)}.dark .add-model-row .form-input::-moz-placeholder{color:var(--color-text-muted, #94a3b8)}.dark .add-model-row .form-input::placeholder{color:var(--color-text-muted, #94a3b8)}.dark .template-editor-container{background-color:var(--color-bg-primary, #0f172a);background:var(--color-bg-primary, #0f172a)}.dark .template-editor-header{border-bottom-color:var(--color-border, #334155)}.dark .template-editor-section-title{border-bottom-color:var(--color-border, #334155)}.dark .template-editor-actions{border-top-color:var(--color-border, #334155)}.dark .template-feature-toggle{background-color:var(--color-bg-secondary, #1e293b);border-color:var(--color-border, #334155)}.dark .template-feature-toggle:hover{background-color:var(--color-bg-muted, #334155)}.dark .template-model-picker-trigger{background-color:var(--color-bg-secondary, #1e293b);border-color:var(--color-border, #334155)}.dark .template-model-picker-trigger:hover{border-color:var(--color-border, #475569)}.dark .template-model-picker-dropdown{background-color:var(--color-bg-secondary, #1e293b);border-color:var(--color-border, #334155);box-shadow:0 10px 25px -5px rgba(0,0,0,.4),0 8px 10px -6px rgba(0,0,0,.3)}.dark .template-model-picker-search{border-bottom-color:var(--color-border, #334155)}.dark .template-model-picker-search-input{color:var(--color-text-primary, #f1f5f9)}.dark .template-model-picker-search-input::-moz-placeholder{color:var(--color-text-muted, #94a3b8)}.dark .template-model-picker-search-input::placeholder{color:var(--color-text-muted, #94a3b8)}.dark .template-model-picker-item:hover{background-color:var(--color-bg-muted, #334155)}.dark .template-model-picker-item.selected{background-color:rgba(59,130,246,.2)}.dark .chat-welcome-icon{background-color:rgba(249,115,22,.15);color:#fb923c}.theme-scope{padding:0px !important;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);background-color:var(--color-bg-primary, #ffffff)}.dark .theme-scope{background-color:var(--color-bg-primary, #0f172a)}.text-size-small .message{font-size:.9rem !important}.text-size-small .chat-input{font-size:.9rem !important}.text-size-small .message-content pre,.text-size-small .message-content code{font-size:.84375rem !important}.text-size-small .message-thinking{font-size:.84375rem !important}.text-size-large .message{font-size:1.1rem !important}.text-size-large .chat-input{font-size:1.1rem !important}.text-size-large .message-content pre,.text-size-large .message-content code{font-size:1.03125rem !important}.text-size-large .message-thinking{font-size:1.03125rem !important}",[],[480,498,516],"3b9a5598-ef19-11f0-b740-42dde27851f2","compiled-3.css","3b9a56ec-ef19-11f0-b740-42dde27851f2",142,["D",1768155210162],".theme-scope .divider{border-top:1px solid var(--color-border)}.theme-scope .divider-b{border-bottom:1px solid var(--color-border)}.theme-scope .stat-box{padding:.75rem;background-color:var(--color-bg-muted);border-radius:var(--radius-lg)}.theme-scope .stat-label{font-size:var(--text-xs);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:var(--tracking-wide)}.theme-scope .stat-value{font-size:var(--text-2xl);font-weight:var(--font-bold);color:var(--color-text-primary)}.theme-scope .stat-change-positive{font-size:var(--text-xs);color:var(--color-success)}.theme-scope .stat-change-negative{font-size:var(--text-xs);color:var(--color-danger)}.theme-scope .nav-link{font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--color-text-secondary);transition:color .15s ease;text-decoration:none}.theme-scope .nav-link:hover{color:var(--color-text-primary)}.theme-scope .brand-text{font-size:var(--text-xl);font-weight:var(--font-bold);letter-spacing:var(--tracking-tight);color:var(--color-text-primary)}.theme-scope .footer-link{color:var(--color-text-secondary);transition:color .15s ease;text-decoration:none}.theme-scope .footer-link:hover{color:var(--color-primary)}.theme-scope .social-link{color:var(--color-text-muted);transition:color .15s ease}.theme-scope .social-link:hover{color:var(--color-text-secondary)}.theme-scope .hero-title{font-size:var(--text-4xl);font-weight:800;letter-spacing:var(--tracking-tight);color:var(--color-text-primary);line-height:var(--leading-tight)}.theme-scope .hero-accent{color:var(--color-primary)}.theme-scope .hero-description{font-size:var(--text-lg);color:var(--color-text-secondary)}.theme-scope .fine-print{font-size:var(--text-sm);color:var(--color-text-muted)}.theme-scope .panel-header{width:100%;padding:.75rem 1rem;display:flex;align-items:center;justify-content:space-between;background-color:var(--color-bg-primary);border-radius:var(--radius-lg);border-bottom-left-radius:0;border-bottom-right-radius:0;transition:background-color .15s ease;cursor:pointer}.theme-scope .panel-header:has(+*:not([style*=\"display: none\"])):not(:has(+[x-show]:not([style]))){border-bottom:1px solid var(--color-border)}.theme-scope .panel-header[aria-expanded=true]{border-bottom:1px solid var(--color-border)}.theme-scope .panel-header:hover{background-color:var(--color-bg-muted)}.theme-scope .accordion-borderless .panel-header{border-radius:0;background-color:rgba(0,0,0,0)}.theme-scope .accordion-borderless .panel-header[aria-expanded=true]{border-bottom:none}.theme-scope .accordion-borderless .panel-header:hover{background-color:var(--color-bg-muted)}.theme-scope .panel-content{padding:1rem;font-size:var(--text-sm);color:var(--color-text-secondary)}.theme-scope .grid-2{display:grid;grid-template-columns:repeat(2, 1fr);gap:1rem}.theme-scope .grid-2-responsive{display:grid;grid-template-columns:1fr;gap:1rem}@media(min-width: 768px){.theme-scope .grid-2-responsive{grid-template-columns:repeat(2, 1fr)}}.theme-scope .focus-ring:focus{outline:none;box-shadow:0 0 0 2px var(--color-primary-ring);border-color:var(--color-primary)}.theme-scope .focus-ring:focus-visible{outline:none;box-shadow:0 0 0 2px var(--color-primary-ring);border-color:var(--color-primary)}.theme-scope .tooltip{position:absolute;bottom:100%;right:0;margin-bottom:.5rem;padding:.375rem .75rem;font-size:var(--text-xs);color:var(--color-white);background-color:var(--color-text-primary);border-radius:var(--radius-md);box-shadow:0 4px 6px -1px rgba(0,0,0,.1);white-space:nowrap;z-index:50;pointer-events:none}.theme-scope .tooltip-arrow{position:absolute;top:100%;right:.375rem;margin-top:-0.25rem;border-width:.25rem;border-style:solid;border-color:var(--color-text-primary) rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0)}.theme-scope .calendar-widget{--calendar-cell-size: 36px;--calendar-gap: 2px;background-color:var(--color-bg-primary);border:1px solid var(--color-border);border-radius:.75rem;padding:1rem;box-shadow:0 1px 3px 0 rgba(0,0,0,.05)}.theme-scope .calendar-widget-xs{--calendar-cell-size: 24px;padding:.75rem;font-size:.75rem}.theme-scope .calendar-widget-xs .calendar-nav-title{font-size:.75rem}.theme-scope .calendar-widget-xs .calendar-weekday{font-size:.625rem}.theme-scope .calendar-widget-sm{--calendar-cell-size: 32px;padding:.875rem}.theme-scope .calendar-widget-sm .calendar-nav-title{font-size:.8125rem}.theme-scope .calendar-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem;gap:.5rem}.theme-scope .calendar-nav-btn{width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0);border:1px solid rgba(0,0,0,0);border-radius:.375rem;color:var(--color-text-secondary);cursor:pointer;transition:all .15s ease}.theme-scope .calendar-nav-btn:hover{background-color:var(--color-bg-secondary);border-color:var(--color-border);color:var(--color-text-primary)}.theme-scope .calendar-nav-btn .iconify{font-size:1.125rem}.theme-scope .calendar-nav-title{font-size:.875rem;font-weight:500;color:var(--color-text-primary);text-align:center;flex:1}.theme-scope .calendar-dropdowns{display:flex;gap:.375rem;flex:1;justify-content:center}.theme-scope .calendar-dropdown{padding:.25rem .5rem;font-size:.8125rem;font-family:inherit;background-color:var(--color-bg-primary);border:1px solid var(--color-border);border-radius:.375rem;color:var(--color-text-primary);cursor:pointer;appearance:none;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%2371717a' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right 4px center;padding-right:20px}.theme-scope .calendar-dropdown:hover{border-color:var(--color-primary)}.theme-scope .calendar-dropdown:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 2px var(--color-ring)}.theme-scope .calendar-grid{display:flex;flex-direction:column;gap:var(--calendar-gap)}.theme-scope .calendar-weekdays{display:flex;gap:var(--calendar-gap)}.theme-scope .calendar-weekday{width:var(--calendar-cell-size);height:calc(var(--calendar-cell-size)*.75);display:flex;align-items:center;justify-content:center;font-size:.6875rem;font-weight:500;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.03em}.theme-scope .calendar-week{display:flex;gap:var(--calendar-gap)}.theme-scope .calendar-day{width:var(--calendar-cell-size);height:var(--calendar-cell-size);display:flex;align-items:center;justify-content:center;font-size:.8125rem;font-family:inherit;background:rgba(0,0,0,0);border:none;border-radius:.375rem;color:var(--color-text-primary);cursor:pointer;position:relative;transition:all .1s ease}.theme-scope .calendar-day:hover:not(:disabled){background-color:var(--color-bg-secondary)}.theme-scope .calendar-day:focus{outline:none;box-shadow:0 0 0 2px var(--color-ring);z-index:1}.theme-scope .calendar-day-outside{color:var(--color-text-muted);opacity:.5}.theme-scope .calendar-day-today{background-color:var(--color-bg-secondary);border:1px solid var(--color-border);font-weight:600}.theme-scope .calendar-day-selected{background-color:var(--color-primary) !important;color:var(--color-text-on-dark) !important;font-weight:600}.theme-scope .calendar-day-selected:hover{background-color:var(--color-primary-hover) !important;color:var(--color-text-on-dark) !important}.theme-scope .calendar-day-in-range{background-color:var(--color-primary-light, rgba(59, 130, 246, 0.1));border-radius:0}.theme-scope .calendar-day-range-start{background-color:var(--color-primary) !important;color:var(--color-text-on-dark) !important;border-top-left-radius:.375rem !important;border-bottom-left-radius:.375rem !important;border-top-right-radius:0 !important;border-bottom-right-radius:0 !important}.theme-scope .calendar-day-range-end{background-color:var(--color-primary) !important;color:var(--color-text-on-dark) !important;border-top-right-radius:.375rem !important;border-bottom-right-radius:.375rem !important;border-top-left-radius:0 !important;border-bottom-left-radius:0 !important}.theme-scope .calendar-day-range-start.calendar-day-range-end{border-radius:.375rem !important}.theme-scope .calendar-day-disabled{color:var(--color-text-muted) !important;opacity:.3;cursor:not-allowed}.theme-scope .date-picker-trigger{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .875rem;font-size:.875rem;font-family:inherit;background-color:var(--color-bg-primary);border:1px solid var(--color-border);border-radius:.5rem;color:var(--color-text-primary);cursor:pointer;transition:all .15s ease;min-width:240px;justify-content:flex-start}.theme-scope .date-picker-trigger:hover{border-color:var(--color-primary);background-color:var(--color-bg-secondary)}.theme-scope .date-picker-trigger:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 2px var(--color-ring)}.theme-scope .date-picker-trigger .date-picker-icon{color:var(--color-text-muted);font-size:1.125rem;flex-shrink:0}.theme-scope .calendar-footer{display:flex;justify-content:center;margin-top:.75rem;padding-top:.75rem;border-top:1px solid var(--color-border)}.theme-scope .calendar-today-btn{display:flex;align-items:center;gap:.375rem;padding:.375rem .75rem;font-size:.8125rem;font-family:inherit;background:rgba(0,0,0,0);border:1px solid var(--color-border);border-radius:.375rem;color:var(--color-text-secondary);cursor:pointer;transition:all .15s ease}.theme-scope .calendar-today-btn:hover{background-color:var(--color-bg-secondary);color:var(--color-text-primary);border-color:var(--color-primary)}.theme-scope .calendar-today-btn .iconify{font-size:1rem}.theme-scope .calendar-range-container{display:flex;gap:1.5rem;justify-content:center}.theme-scope .calendar-range-container .calendar-widget{border:none;box-shadow:none;padding:0;background:rgba(0,0,0,0)}.theme-scope .calendar-view-toggle{display:flex;gap:.5rem;margin-bottom:1rem;padding:.25rem;background-color:var(--color-bg-muted);border-radius:.5rem}.theme-scope .calendar-view-btn{flex:1;padding:.5rem 1rem;font-size:.875rem;font-weight:500;background-color:rgba(0,0,0,0);border:none;border-radius:.375rem;color:var(--color-text-secondary);cursor:pointer;transition:all .15s ease}.theme-scope .calendar-view-btn:hover{background-color:var(--color-bg-secondary);color:var(--color-text-primary)}.theme-scope .calendar-view-btn.active{background-color:var(--color-bg-primary);color:var(--color-text-primary);box-shadow:0 1px 2px 0 rgba(0,0,0,.05)}.theme-scope .calendar-range-footer{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:1rem}.theme-scope .calendar-range-label{font-size:.875rem;color:var(--color-text-secondary)}.theme-scope .datetime-picker-container{display:flex;flex-direction:column;gap:1rem;position:relative}.theme-scope .datetime-picker-row{display:flex;gap:1rem;align-items:flex-start}.theme-scope .datetime-field{display:flex;flex-direction:column;gap:.375rem;position:relative}.theme-scope .datetime-picker-container .date-picker-trigger{min-width:180px;height:38px;padding:.5rem .75rem;justify-content:space-between}.theme-scope .datetime-label{font-size:.875rem;font-weight:500;color:var(--color-text-primary)}.theme-scope .time-picker-single-input{width:140px;height:38px;padding:.5rem .75rem;font-size:.875rem;font-family:inherit;background-color:var(--color-bg-primary);border:1px solid var(--color-border);border-radius:.5rem;color:var(--color-text-primary);cursor:text;transition:all .15s ease}.theme-scope .time-picker-single-input::-webkit-calendar-picker-indicator{filter:invert(0);opacity:.6;cursor:pointer}.theme-scope .time-picker-single-input::-webkit-calendar-picker-indicator:hover{opacity:1}.theme-scope .time-picker-single-input:hover{border-color:var(--color-primary)}.theme-scope .time-picker-single-input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 2px var(--color-ring)}.theme-scope .time-picker-single-input::placeholder{color:var(--color-text-muted)}.dark .theme-scope .time-picker-single-input,.dark .theme-scope input[type=time],.dark .theme-scope input[type=date],.theme-scope.dark .time-picker-single-input,.theme-scope.dark input[type=time],.theme-scope.dark input[type=date]{color-scheme:dark}.dark .theme-scope .time-picker-single-input::-webkit-calendar-picker-indicator,.dark .theme-scope input[type=time]::-webkit-calendar-picker-indicator,.dark .theme-scope input[type=date]::-webkit-calendar-picker-indicator,.theme-scope.dark .time-picker-single-input::-webkit-calendar-picker-indicator,.theme-scope.dark input[type=time]::-webkit-calendar-picker-indicator,.theme-scope.dark input[type=date]::-webkit-calendar-picker-indicator{filter:invert(1);opacity:.7}.dark .theme-scope .time-picker-single-input::-webkit-calendar-picker-indicator:hover,.dark .theme-scope input[type=time]::-webkit-calendar-picker-indicator:hover,.dark .theme-scope input[type=date]::-webkit-calendar-picker-indicator:hover,.theme-scope.dark .time-picker-single-input::-webkit-calendar-picker-indicator:hover,.theme-scope.dark input[type=time]::-webkit-calendar-picker-indicator:hover,.theme-scope.dark input[type=date]::-webkit-calendar-picker-indicator:hover{opacity:1}.theme-scope .time-picker-input{display:inline-flex;align-items:center;gap:0;padding:.5rem .5rem;background-color:var(--color-bg-primary);border:1px solid var(--color-border);border-radius:.5rem;font-family:inherit;height:38px}.theme-scope .time-picker-input:focus-within{border-color:var(--color-primary);box-shadow:0 0 0 2px var(--color-ring)}.theme-scope .time-segment{width:1.25rem;padding:0;border:none;background:rgba(0,0,0,0);font-size:.875rem;font-family:inherit;text-align:center;color:var(--color-text-primary)}.theme-scope .time-segment:focus{outline:none;background-color:var(--color-primary-light);border-radius:.25rem}.theme-scope .time-separator{font-size:.875rem;color:var(--color-text-muted);user-select:none}.theme-scope .time-period-btn{margin-left:.25rem;padding:.125rem .375rem;font-size:.75rem;font-weight:500;font-family:inherit;background-color:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:.25rem;color:var(--color-text-secondary);cursor:pointer;transition:all .15s ease}.theme-scope .time-period-btn:hover{background-color:var(--color-bg-muted);color:var(--color-text-primary)}.theme-scope .datetime-result{display:flex;align-items:center;gap:.5rem;padding:.625rem .875rem;background-color:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:.5rem;font-size:.875rem;color:var(--color-text-secondary)}.theme-scope .datetime-result .iconify{color:var(--color-primary);font-size:1.125rem}.theme-scope .nlp-picker-container{width:100%;max-width:500px}.theme-scope .nlp-picker-content{display:flex;flex-direction:column;gap:.75rem}.theme-scope .nlp-input-wrapper{position:relative;display:flex;align-items:center}.theme-scope .nlp-input{width:100%;padding:.625rem 2.5rem .625rem .875rem;font-size:.875rem;font-family:inherit;background-color:var(--color-bg-primary);border:1px solid var(--color-border);border-radius:.5rem;color:var(--color-text-primary);transition:all .15s ease}.theme-scope .nlp-input::placeholder{color:var(--color-text-muted)}.theme-scope .nlp-input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 2px var(--color-ring)}.theme-scope .nlp-calendar-btn{position:absolute;right:.5rem;padding:.375rem;background:rgba(0,0,0,0);border:none;color:var(--color-text-muted);cursor:pointer;border-radius:.25rem;transition:all .15s ease}.theme-scope .nlp-calendar-btn:hover{background-color:var(--color-bg-secondary);color:var(--color-text-primary)}.theme-scope .nlp-calendar-btn .iconify{font-size:1.125rem;display:block}.theme-scope .nlp-result{padding:.75rem 1rem;background-color:var(--color-success-light);border:1px solid var(--color-success);border-radius:.5rem;font-size:.875rem;color:var(--color-text-primary);line-height:1.5}.theme-scope .nlp-result strong{color:var(--color-success-dark);font-weight:600}.theme-scope .nlp-error{display:flex;align-items:center;gap:.5rem;padding:.75rem 1rem;background-color:var(--color-danger-light);border:1px solid var(--color-danger);border-radius:.5rem;font-size:.875rem;color:var(--color-danger-dark)}.theme-scope .nlp-error .iconify{font-size:1.125rem;flex-shrink:0}.theme-scope .nlp-examples{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;padding-top:.5rem;border-top:1px solid var(--color-border)}.theme-scope .nlp-examples-label{font-size:.75rem;font-weight:500;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.05em}.theme-scope .nlp-example-btn{padding:.25rem .625rem;font-size:.75rem;font-family:inherit;background-color:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:.375rem;color:var(--color-text-secondary);cursor:pointer;transition:all .15s ease}.theme-scope .nlp-example-btn:hover{background-color:var(--color-bg-muted);color:var(--color-text-primary);border-color:var(--color-primary)}.theme-scope .drawer-overlay{position:fixed;inset:0;z-index:50;background-color:rgba(0,0,0,.8);opacity:0;visibility:hidden;transition:opacity .3s ease-out,visibility 0s linear .3s}.theme-scope .drawer-overlay.open{opacity:1;visibility:visible;transition-delay:0s}.theme-scope .drawer{position:fixed;z-index:51;background-color:var(--color-bg-primary);display:flex;flex-direction:column;transition:transform .3s cubic-bezier(0.32, 0.72, 0, 1);pointer-events:none}.theme-scope .drawer.open{pointer-events:auto}.theme-scope .drawer-bottom{inset-inline:0;bottom:0;max-height:96vh;border-radius:0;transform:translateY(100%);padding-bottom:env(safe-area-inset-bottom, 0)}.theme-scope .drawer-bottom::after{content:\"\";position:absolute;left:0;right:0;bottom:-50px;height:50px;background-color:inherit;pointer-events:none}.theme-scope .drawer-bottom.open{transform:translateY(0)}.theme-scope .drawer-right{top:0;right:0;bottom:0;width:100%;max-width:24rem;border-top-left-radius:var(--radius-lg);border-bottom-left-radius:var(--radius-lg);transform:translateX(100%)}.theme-scope .drawer-right.open{transform:translateX(0)}.theme-scope .drawer-left{top:0;left:0;bottom:0;width:100%;max-width:24rem;border-top-right-radius:var(--radius-lg);border-bottom-right-radius:var(--radius-lg);transform:translateX(-100%)}.theme-scope .drawer-left.open{transform:translateX(0)}.theme-scope .drawer-top{inset-inline:0;top:0;max-height:96vh;border-bottom-left-radius:var(--radius-xl);border-bottom-right-radius:var(--radius-xl);transform:translateY(-100%)}.theme-scope .drawer-top.open{transform:translateY(0)}.theme-scope .drawer-sm{max-width:20rem}.theme-scope .drawer-md{max-width:28rem}.theme-scope .drawer-lg{max-width:36rem}.theme-scope .drawer-xl{max-width:48rem}.theme-scope .drawer-full{max-width:100%;border-radius:0}.theme-scope .drawer-h-sm{max-height:40vh}.theme-scope .drawer-h-md{max-height:60vh}.theme-scope .drawer-h-lg{max-height:80vh}.theme-scope .drawer-handle{display:flex;justify-content:center;padding:.75rem;padding-top:1rem;flex-shrink:0;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;transition:background-color .15s ease}.theme-scope .drawer-handle:hover{background-color:var(--color-bg-secondary)}.theme-scope .drawer-handle:active{cursor:grabbing}.theme-scope .drawer-handle-bar{width:3rem;height:.25rem;background-color:var(--color-border-light);border-radius:var(--radius-full);transition:background-color .15s ease,transform .15s ease}.theme-scope .drawer-handle:hover .drawer-handle-bar{background-color:var(--color-border);transform:scaleX(1.1)}.theme-scope .drawer-handle:active .drawer-handle-bar{background-color:var(--color-text-muted)}.theme-scope .drawer-header{padding:1rem 1.5rem;display:flex;flex-direction:column;gap:.25rem;text-align:center}.theme-scope .drawer-header-left{text-align:left}.theme-scope .drawer-title{font-size:var(--text-lg);font-weight:var(--font-semibold);color:var(--color-text-primary);line-height:1.375;margin:0}.theme-scope .drawer-description{font-size:var(--text-sm);color:var(--color-text-secondary);margin:0}.theme-scope .drawer-content{flex:1;overflow-y:auto;padding:1rem 1.5rem}.theme-scope .drawer-content-centered{display:flex;flex-direction:column;align-items:center;justify-content:center}.theme-scope .drawer-footer{padding:1rem 1.5rem 1.5rem;display:flex;flex-direction:column;gap:.5rem}.theme-scope .drawer-footer-row{flex-direction:row;justify-content:flex-end;gap:.75rem}.theme-scope .drawer-close{position:absolute;top:1rem;right:1rem;display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;color:var(--color-text-muted);background-color:rgba(0,0,0,0);border:none;border-radius:var(--radius-button);cursor:pointer;transition:all .15s ease-in-out}.theme-scope .drawer-close:hover{color:var(--color-text-primary);background-color:var(--color-bg-secondary)}.theme-scope .drawer-close:focus{outline:none;box-shadow:0 0 0 var(--ring-width) var(--color-gray-ring)}@media(min-width: 640px){.theme-scope .drawer-bottom-centered{max-width:32rem;margin-inline:auto;left:50%;transform:translateX(-50%) translateY(100%)}.theme-scope .drawer-bottom-centered.open{transform:translateX(-50%) translateY(0)}}.theme-scope .drawer-inner-card{width:100%;max-width:24rem;margin-inline:auto}.theme-scope .drawer-snap-indicator{position:absolute;left:0;right:0;height:2px;background-color:var(--color-border);opacity:.5}.theme-scope{--font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco, Consolas, monospace;--font-display: 'Space Grotesk', -apple-system, system-ui, sans-serif;--font-marketing: 'Space Grotesk', -apple-system, system-ui, sans-serif;--font-sans: -apple-system, system-ui, Inter, Roboto, 'Segoe UI', 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;font-family:var(--font-sans);background-color:#fff;color:#2d2f33;line-height:1.5;-webkit-font-smoothing:antialiased}.theme-scope .font-mono,.theme-scope code,.theme-scope pre,.theme-scope kbd,.theme-scope samp,.theme-scope tt,.theme-scope input[style*=font-mono],.theme-scope textarea[style*=font-mono],.theme-scope [style*=\"font-family: var(--font-mono\"],.theme-scope *[style*=\"var(--font-mono\"]{font-weight:400 !important}.theme-scope{--groq-orange-50: #fff5e5;--groq-orange-100: #ffe8cc;--groq-orange-200: #ffd1a3;--groq-orange-300: #ffb973;--groq-orange-400: #fe9e20;--groq-orange-500: #f48b0a;--groq-orange-600: #f43e01;--groq-orange-700: #c23101;--groq-orange-800: #9a2701;--groq-orange-900: #731d00;--groq-orange-950: #4d1300;--groq-gray-50: #f9f9f8;--groq-gray-100: #f3f3ee;--groq-gray-200: #e8e8e0;--groq-gray-300: #cecebf;--groq-gray-400: #9f9f92;--groq-gray-500: #69695d;--groq-gray-600: #4e4e45;--groq-gray-700: #2d2f33;--groq-gray-800: #26292e;--groq-gray-900: #1a1c1f;--groq-gray-950: #0f1011;--groq-black: #000000;--groq-white: #ffffff;--groq-yellow-50: #fffef0;--groq-yellow-100: #fefdc0;--groq-yellow-200: #f4fd90;--groq-yellow-300: #fdeb20;--groq-yellow-400: #f0dc00;--groq-yellow-500: #e6d000;--groq-yellow-600: #d4be00;--groq-yellow-700: #c6b802;--groq-yellow-800: #9a8f02;--groq-yellow-900: #706801;--groq-yellow-950: #4a4501;--groq-green-50: #e8fff5;--groq-green-100: #c5ffea;--groq-green-200: #a9ffdb;--groq-green-300: #10e68d;--groq-green-400: #0dd97f;--groq-green-500: #0dcc7a;--groq-green-600: #0aab66;--groq-green-700: #018b01;--groq-green-800: #016b01;--groq-green-900: #015001;--groq-green-950: #003500;--groq-gold-300: #c6b802;--groq-blue-50: #e8f6ff;--groq-blue-100: #d0edfe;--groq-blue-200: #bfe4fc;--groq-blue-300: #5fc0ff;--groq-blue-400: #30a8f0;--groq-blue-500: #0082a0;--groq-blue-600: #006d87;--groq-blue-700: #005870;--groq-blue-800: #004559;--groq-blue-900: #003445;--groq-blue-950: #002330;--groq-purple-50: #f8f5fd;--groq-purple-100: #f0eafb;--groq-purple-200: #e3dcf8;--groq-purple-300: #d377fd;--groq-purple-400: #b85ce8;--groq-purple-500: #683d7f;--groq-purple-600: #56326a;--groq-purple-700: #452856;--groq-purple-800: #351e43;--groq-purple-900: #261530;--groq-purple-950: #180d1f;--groq-pink-50: #fff5fd;--groq-pink-100: #feeafc;--groq-pink-200: #fad8ff;--groq-pink-300: #f392dd;--groq-pink-400: #f07cd5;--groq-pink-500: #ee66ce;--groq-pink-600: #d450b5;--groq-pink-700: #b03c97;--groq-pink-800: #8c2f78;--groq-pink-900: #68235a;--groq-pink-950: #45173c;--color-primary: var(--groq-orange-600);--color-primary-hover: var(--groq-orange-700);--color-primary-active: var(--groq-orange-800);--color-primary-dark: var(--groq-orange-800);--color-primary-light: var(--groq-orange-200);--color-primary-lighter: var(--groq-orange-100);--color-primary-lightest: var(--groq-orange-50);--color-primary-ring: rgba(244, 62, 1, 0.2);--color-accent: var(--groq-orange-400);--color-accent-hover: var(--groq-orange-600);--color-accent-light: var(--groq-orange-300);--color-cta: var(--groq-orange-600);--color-cta-hover: var(--groq-orange-700);--color-text-primary: var(--groq-gray-800);--color-text-secondary: var(--groq-gray-700);--color-text-muted: var(--groq-gray-600);--color-text-neutral: var(--groq-gray-700);--color-text-neutral-dark: var(--groq-gray-950);--color-text-on-dark: var(--groq-gray-50);--color-text-on-dark-muted: rgba(206, 206, 191, 0.85);--color-bg-primary: var(--groq-white);--color-bg-secondary: var(--groq-gray-200);--color-bg-muted: var(--groq-gray-100);--color-bg-light: var(--groq-gray-100);--color-bg-dark: var(--groq-gray-900);--color-bg-hover: var(--groq-gray-200);--color-bg-card: var(--groq-gray-50);--color-bg-page: var(--groq-gray-100);--color-bg-nav: var(--groq-gray-200);--color-bg-hero: var(--groq-gray-300);--color-bg-section: var(--groq-gray-200);--color-bg-section-alt: var(--groq-gray-400);--color-border: var(--groq-gray-400);--color-border-light: var(--groq-gray-500);--color-border-tab: var(--groq-gray-500);--color-success: #22c55e;--color-success-light: #dcfce7;--color-success-dark: #166534;--color-success-text: var(--groq-green-50);--color-warning: #f59e0b;--color-warning-light: #fef3c7;--color-warning-dark: #92400e;--color-warning-text: #ffffff;--color-danger: #ef4444;--color-danger-light: #fee2e2;--color-danger-dark: #b91c1c;--color-danger-text: #ffffff;--color-info: #0ea5e9;--color-info-light: #e0f2fe;--color-info-dark: #075985;--color-info-text: #ffffff;--color-neutral-text: #ffffff;--color-primary-text: var(--color-text-on-dark);--color-white: var(--groq-white);--color-gray-300: var(--groq-gray-300);--color-gray-400: var(--groq-gray-400);--color-control-border: var(--color-border);--color-control-border-hover: var(--groq-orange-400);--color-control-bg: var(--color-bg-primary);--color-control-bg-hover: var(--groq-orange-50, #fff5e5);--color-control-checked: var(--groq-orange-600);--color-control-checked-hover: var(--groq-orange-700);--color-control-checked-border: var(--groq-orange-600);--color-control-checkmark: #ffffff;--color-control-ring: rgba(244, 62, 1, 0.15);--color-toggle-bg: var(--groq-gray-500);--color-toggle-bg-checked: var(--groq-orange-600);--color-toggle-knob: #ffffff;--color-choice-border: var(--color-border);--color-choice-border-hover: var(--groq-orange-400);--color-choice-border-checked: var(--groq-orange-600);--color-choice-bg: transparent;--color-choice-bg-hover: var(--color-bg-hover);--color-choice-bg-checked: rgba(244, 62, 1, 0.03);--color-choice-ring: var(--groq-orange-600);--radius-sm: 0.25rem;--radius-md: 0.375rem;--radius-md: 0.5rem;--radius-xl: 0.75rem;--radius-2xl: 1rem;--radius-full: 9999px;--radius-button: 0.5rem;--radius-input: 0.375rem;--radius-card: 0.5rem;--radius-badge: 0.25rem;--radius-dropdown: 0.5rem;--radius-tab: 0.375rem;--radius-toast: 0.5rem;--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);--shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);--shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.15);--shadow-card: 0 1px 3px rgba(0, 0, 0, 0.1);--shadow-dropdown: 0 4px 6px rgba(0, 0, 0, 0.1);--shadow-toast: 0 10px 15px rgba(0, 0, 0, 0.1)}.theme-scope h1,.theme-scope h2,.theme-scope h3,.theme-scope h4,.theme-scope h5,.theme-scope h6,.theme-scope .text-h1,.theme-scope .text-h2,.theme-scope .text-h3{font-family:var(--font-family-sans);font-weight:700;color:var(--color-text-primary);letter-spacing:-0.025em;line-height:1.2}.theme-scope h1,.theme-scope .text-h1{font-size:2.5rem;font-weight:800}.theme-scope h2,.theme-scope .text-h2{font-size:1.875rem;font-weight:700}.theme-scope h3,.theme-scope .text-h3{font-size:1.25rem;font-weight:600}.theme-scope a,.theme-scope .link{color:var(--color-primary);text-decoration:none;transition:color .2s ease}.theme-scope a:hover,.theme-scope .link:hover{color:var(--color-primary-hover);text-decoration:none}.theme-scope .btn-primary{background-color:var(--color-primary);color:var(--color-primary-text);border:none;border-radius:var(--radius-button);font-weight:600;transition:all .2s ease}.theme-scope .btn-primary:hover{background-color:var(--color-primary-hover);transform:translateY(-1px);box-shadow:var(--shadow-md)}.theme-scope .btn-primary:active{transform:translateY(0)}.theme-scope .btn-secondary{background-color:var(--color-bg-muted);color:var(--color-text-primary);border:1px solid var(--color-border);border-radius:var(--radius-button);font-weight:500;transition:all .2s ease}.theme-scope .btn-secondary:hover{background-color:var(--color-bg-hover);border-color:var(--groq-orange-600);color:var(--groq-orange-600)}.theme-scope .btn-tertiary{background-color:rgba(0,0,0,0);color:var(--color-text-neutral);border:none;border-radius:var(--radius-button);font-weight:500;transition:all .2s ease}.theme-scope .btn-tertiary:hover{background-color:var(--color-bg-muted);color:var(--color-text-primary)}.theme-scope .btn-ghost{background-color:rgba(0,0,0,0);color:var(--color-text-muted);border:none;border-radius:var(--radius-button);font-weight:500;padding:.5rem 1rem;transition:all .2s ease}.theme-scope .btn-ghost:hover{background-color:var(--color-bg-muted);color:var(--color-text-neutral)}.theme-scope .btn-accent,.theme-scope .btn-cta{background-color:var(--color-accent);color:var(--color-primary-text);border:none;border-radius:var(--radius-button);font-weight:600;padding:.875rem 1.5rem;transition:all .2s ease}.theme-scope .btn-accent:hover,.theme-scope .btn-cta:hover{background-color:var(--color-accent-hover);transform:translateY(-1px);box-shadow:var(--shadow-md)}.theme-scope .btn-danger{background-color:var(--color-danger);color:var(--color-danger-text);border:none;border-radius:var(--radius-button);font-weight:600}.theme-scope .btn-danger:hover{background-color:var(--color-danger-dark)}.theme-scope .btn-success{background-color:var(--color-success);color:var(--color-success-text);border:none;border-radius:var(--radius-button);font-weight:600}.theme-scope .btn-success:hover{background-color:var(--color-success-dark);color:var(--color-text-on-dark)}.theme-scope .card{background-color:var(--color-bg-primary);border:1px solid var(--color-border);border-radius:var(--radius-card);box-shadow:var(--shadow-card);transition:all .2s ease}.theme-scope .card:hover{border-color:var(--color-border-tab);box-shadow:var(--shadow-md)}.theme-scope .card-title{font-weight:600;color:var(--color-text-primary);font-size:1.125rem}.theme-scope input[type=text],.theme-scope input[type=email],.theme-scope input[type=password],.theme-scope input[type=number],.theme-scope input[type=url],.theme-scope input[type=search],.theme-scope input[type=tel],.theme-scope textarea,.theme-scope .form-input{background-color:var(--color-bg-primary);border:1px solid var(--color-border);border-radius:var(--radius-input);padding:.75rem 1rem;font-family:var(--font-family-sans);font-size:1rem;color:var(--color-text-primary);transition:all .2s ease}.theme-scope input[type=text]::placeholder,.theme-scope input[type=email]::placeholder,.theme-scope input[type=password]::placeholder,.theme-scope input[type=number]::placeholder,.theme-scope input[type=url]::placeholder,.theme-scope input[type=search]::placeholder,.theme-scope input[type=tel]::placeholder,.theme-scope textarea::placeholder,.theme-scope .form-input::placeholder{color:var(--color-text-muted)}.theme-scope input[type=text]:focus,.theme-scope input[type=email]:focus,.theme-scope input[type=password]:focus,.theme-scope input[type=number]:focus,.theme-scope input[type=url]:focus,.theme-scope input[type=search]:focus,.theme-scope input[type=tel]:focus,.theme-scope textarea:focus,.theme-scope .form-input:focus{background-color:var(--color-bg-primary);border-color:var(--color-primary);outline:none;box-shadow:0 0 0 3px var(--color-primary-ring)}.theme-scope select,.theme-scope .form-select{background-color:var(--color-bg-primary);border:1px solid var(--color-border);border-radius:var(--radius-input);padding:.75rem 1rem;font-family:var(--font-family-sans);font-size:1rem;color:var(--color-text-primary)}.theme-scope select:focus,.theme-scope .form-select:focus{border-color:var(--color-primary);outline:none;box-shadow:0 0 0 3px var(--color-primary-ring)}.theme-scope label,.theme-scope .form-label{color:var(--color-text-primary);font-weight:600;font-size:.875rem;margin-bottom:.5rem;display:block}.theme-scope .badge{border-radius:var(--radius-badge);font-weight:600;font-size:.75rem;padding:.25rem .75rem}.theme-scope .badge-success{background-color:var(--color-success-light);color:var(--color-success-dark)}.theme-scope .badge-danger{background-color:var(--color-danger-light);color:var(--color-danger-dark)}.theme-scope .badge-warning{background-color:var(--color-warning-light);color:var(--color-warning-dark)}.theme-scope .badge-info{background-color:var(--color-info-light);color:var(--color-info-dark)}.theme-scope .tabs-list{background-color:rgba(0,0,0,0);border-bottom:2px solid var(--color-border);padding:0}.theme-scope .tab-trigger{border-radius:0;font-weight:500;color:var(--color-text-muted);background:rgba(0,0,0,0);border:none;border-bottom:2px solid rgba(0,0,0,0);padding:.75rem 1rem;margin-bottom:-2px;transition:all .15s ease}.theme-scope .tab-trigger:hover:not(.active):not([data-state=active]){color:var(--color-text-primary);border-bottom-color:var(--color-border-tab)}.theme-scope .tab-trigger.active,.theme-scope .tab-trigger[data-state=active]{color:var(--color-primary);border-bottom-color:var(--color-primary);font-weight:600}.theme-scope .dropdown-menu{background-color:var(--color-bg-primary);border:1px solid var(--color-border);border-radius:var(--radius-dropdown);box-shadow:var(--shadow-dropdown);padding:.5rem}.theme-scope .dropdown-item{border-radius:var(--radius-sm);color:var(--color-text-neutral);font-weight:500;padding:.625rem .75rem;transition:all .15s ease}.theme-scope .dropdown-item:hover{background-color:var(--color-bg-muted);color:var(--color-text-primary)}.theme-scope .alert,.theme-scope .callout{border-radius:var(--radius-md);padding:1rem 1.25rem;border:1px solid}.theme-scope .alert-success,.theme-scope .callout-success{background-color:var(--color-success-light);border-color:var(--color-success);color:var(--color-success-dark)}.theme-scope .alert-danger,.theme-scope .callout-danger,.theme-scope .alert-destructive{background-color:var(--color-danger-light);border-color:var(--color-danger);color:var(--color-danger-dark)}.theme-scope .alert-warning,.theme-scope .callout-warning{background-color:var(--color-warning-light);border-color:var(--color-warning);color:var(--color-warning-dark)}.theme-scope .alert-info,.theme-scope .callout-info{background-color:var(--color-info-light);border-color:var(--color-info);color:var(--color-info-dark)}.theme-scope .toast{background-color:var(--color-bg-primary);border-radius:var(--radius-toast);box-shadow:var(--shadow-toast);border:1px solid var(--color-border)}.theme-scope .avatar{border-radius:var(--radius-full);border:2px solid var(--color-bg-primary);box-shadow:var(--shadow-sm)}.theme-scope table{border-radius:var(--radius-md);border-collapse:separate;border-spacing:0;border:1px solid var(--color-border)}.theme-scope th{background-color:var(--color-bg-muted);color:var(--color-text-primary);font-weight:600;border-right:1px solid var(--color-border);border-bottom:1px solid var(--color-border)}.theme-scope th:last-child{border-right:none}.theme-scope td{border-right:1px solid var(--color-border);border-bottom:1px solid var(--color-border)}.theme-scope td:last-child{border-right:none}.theme-scope thead tr:first-child th:first-child{border-top-left-radius:var(--radius-md)}.theme-scope thead tr:first-child th:last-child{border-top-right-radius:var(--radius-md)}.theme-scope tbody tr:last-child td:first-child{border-bottom-left-radius:var(--radius-md)}.theme-scope tbody tr:last-child td:last-child{border-bottom-right-radius:var(--radius-md)}.theme-scope .accordion-group{border-radius:var(--radius-md);overflow:hidden}.theme-scope .accordion-button{font-weight:600;color:var(--color-text-primary)}.theme-scope .accordion-button:hover{background-color:var(--color-bg-muted)}.theme-scope .toggle-group{background-color:var(--color-bg-muted);border-radius:var(--radius-md);padding:.25rem}.theme-scope .toggle-group-item{color:var(--color-text-muted);font-weight:500}.theme-scope .toggle-group-item:hover:not(.active):not([data-state=on]){color:var(--color-text-primary)}.theme-scope .toggle-group-item.active,.theme-scope .toggle-group-item[data-state=on]{background-color:var(--color-bg-primary);color:var(--color-text-primary);box-shadow:var(--shadow-sm)}.theme-scope .text-accent{color:var(--color-accent)}.theme-scope .text-primary{color:var(--color-text-primary)}.theme-scope .text-muted{color:var(--color-text-muted)}.theme-scope .text-on-dark{color:var(--color-text-on-dark)}.theme-scope .bg-muted{background-color:var(--color-bg-muted)}.theme-scope .bg-secondary{background-color:var(--color-bg-secondary)}.theme-scope .bg-dark{background-color:var(--color-bg-dark);color:var(--color-text-on-dark)}.theme-scope .border-accent{border-color:var(--color-accent)}.theme-scope .border-primary{border-color:var(--color-primary)}.theme-scope .text-groq-orange{color:var(--groq-orange-400)}.theme-scope .bg-groq-orange{background-color:var(--groq-orange-400)}.theme-scope .border-groq-orange{border-color:var(--groq-orange-400)}.theme-scope .text-groq-yellow{color:var(--groq-yellow-300)}.theme-scope .bg-groq-yellow{background-color:var(--groq-yellow-300)}.theme-scope .border-groq-yellow{border-color:var(--groq-yellow-300)}.theme-scope .text-groq-green{color:var(--groq-green-300)}.theme-scope .bg-groq-green{background-color:var(--groq-green-300)}.theme-scope .border-groq-green{border-color:var(--groq-green-300)}.theme-scope .text-groq-blue{color:var(--groq-blue-300)}.theme-scope .bg-groq-blue{background-color:var(--groq-blue-300)}.theme-scope .border-groq-blue{border-color:var(--groq-blue-300)}.theme-scope .text-groq-purple{color:var(--groq-purple-300)}.theme-scope .bg-groq-purple{background-color:var(--groq-purple-300)}.theme-scope .border-groq-purple{border-color:var(--groq-purple-300)}.theme-scope .text-groq-pink{color:var(--groq-pink-300)}.theme-scope .bg-groq-pink{background-color:var(--groq-pink-300)}.theme-scope .border-groq-pink{border-color:var(--groq-pink-300)}.theme-scope.dark,.dark .theme-scope{background-color:var(--groq-gray-900);color:var(--groq-gray-50);--color-primary: var(--groq-orange-600);--color-primary-hover: var(--groq-orange-500);--color-primary-active: var(--groq-orange-400);--color-primary-dark: var(--groq-orange-300);--color-primary-light: rgba(244, 62, 1, 0.15);--color-primary-lighter: rgba(244, 62, 1, 0.1);--color-primary-lightest: rgba(244, 62, 1, 0.05);--color-primary-ring: rgba(254, 158, 32, 0.35);--color-primary-text: var(--groq-gray-950);--color-accent: var(--groq-orange-300);--color-accent-hover: var(--groq-orange-400);--color-accent-light: var(--groq-orange-200);--color-cta: var(--groq-orange-400);--color-cta-hover: var(--groq-orange-500);--color-text-primary: var(--groq-gray-50);--color-text-secondary: var(--groq-gray-100);--color-text-muted: var(--groq-gray-400);--color-text-neutral: var(--groq-gray-300);--color-text-neutral-dark: var(--groq-gray-100);--color-text-on-dark: var(--groq-gray-900);--color-text-on-dark-muted: rgba(26, 28, 31, 0.85);--color-bg-primary: var(--groq-gray-900);--color-bg-secondary: var(--groq-gray-800);--color-bg-muted: var(--groq-gray-700);--color-bg-light: var(--groq-gray-800);--color-bg-dark: var(--groq-gray-50);--color-bg-hover: var(--groq-gray-700);--color-bg-card: var(--groq-gray-800);--color-bg-page: var(--groq-gray-900);--color-bg-nav: var(--groq-gray-800);--color-bg-hero: var(--groq-gray-900);--color-bg-section: var(--groq-gray-800);--color-bg-section-alt: var(--groq-gray-700);--color-border: var(--groq-gray-700);--color-border-light: var(--groq-gray-600);--color-border-tab: var(--groq-gray-600);--color-success: var(--groq-green-400);--color-success-light: rgba(13, 217, 127, 0.15);--color-success-dark: var(--groq-green-300);--color-success-text: var(--groq-gray-950);--color-warning: var(--groq-yellow-300);--color-warning-light: rgba(253, 235, 32, 0.15);--color-warning-dark: var(--groq-yellow-200);--color-warning-text: var(--groq-gray-950);--color-danger: #f87171;--color-danger-light: rgba(239, 68, 68, 0.15);--color-danger-dark: #fca5a5;--color-danger-text: var(--groq-gray-950);--color-info: var(--groq-blue-300);--color-info-light: rgba(95, 192, 255, 0.15);--color-info-dark: var(--groq-blue-200);--color-info-text: var(--groq-gray-950);--color-neutral-text: var(--groq-gray-950);--color-white: var(--groq-gray-900);--color-gray-300: var(--groq-gray-600);--color-gray-400: var(--groq-gray-500);--color-control-border: var(--groq-gray-600);--color-control-border-hover: var(--groq-orange-400);--color-control-bg: var(--groq-gray-800);--color-control-bg-hover: var(--groq-gray-700);--color-control-checked: var(--groq-orange-400);--color-control-checked-hover: var(--groq-orange-500);--color-control-checked-border: var(--groq-orange-400);--color-control-checkmark: var(--groq-gray-950);--color-control-ring: rgba(254, 158, 32, 0.25);--color-toggle-bg: var(--groq-gray-600);--color-toggle-bg-checked: var(--groq-orange-400);--color-toggle-knob: var(--groq-gray-950);--color-choice-border: var(--groq-gray-600);--color-choice-border-hover: var(--groq-orange-400);--color-choice-border-checked: var(--groq-orange-400);--color-choice-bg: transparent;--color-choice-bg-hover: var(--groq-gray-700);--color-choice-bg-checked: rgba(254, 158, 32, 0.08);--color-choice-ring: var(--groq-orange-400);--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.35);--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);--shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.45);--shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.5);--shadow-card: 0 1px 3px rgba(0, 0, 0, 0.3);--shadow-dropdown: 0 4px 6px rgba(0, 0, 0, 0.4);--shadow-toast: 0 10px 15px rgba(0, 0, 0, 0.4)}.theme-scope.dark h1,.theme-scope.dark h2,.theme-scope.dark h3,.theme-scope.dark h4,.theme-scope.dark h5,.theme-scope.dark h6,.theme-scope.dark .text-h1,.theme-scope.dark .text-h2,.theme-scope.dark .text-h3,.dark .theme-scope h1,.dark .theme-scope h2,.dark .theme-scope h3,.dark .theme-scope h4,.dark .theme-scope h5,.dark .theme-scope h6,.dark .theme-scope .text-h1,.dark .theme-scope .text-h2,.dark .theme-scope .text-h3{color:var(--groq-gray-50)}.theme-scope.dark a,.theme-scope.dark .link,.dark .theme-scope a,.dark .theme-scope .link{color:var(--groq-orange-400)}.theme-scope.dark a:hover,.theme-scope.dark .link:hover,.dark .theme-scope a:hover,.dark .theme-scope .link:hover{color:var(--groq-orange-300)}.theme-scope.dark .text-groq-orange,.dark .theme-scope .text-groq-orange{color:var(--groq-orange-300)}.theme-scope.dark .bg-groq-orange,.dark .theme-scope .bg-groq-orange{background-color:var(--groq-orange-500)}.theme-scope.dark .border-groq-orange,.dark .theme-scope .border-groq-orange{border-color:var(--groq-orange-400)}.theme-scope.dark .text-groq-yellow,.dark .theme-scope .text-groq-yellow{color:var(--groq-yellow-200)}.theme-scope.dark .bg-groq-yellow,.dark .theme-scope .bg-groq-yellow{background-color:var(--groq-yellow-400)}.theme-scope.dark .border-groq-yellow,.dark .theme-scope .border-groq-yellow{border-color:var(--groq-yellow-300)}.theme-scope.dark .text-groq-green,.dark .theme-scope .text-groq-green{color:var(--groq-green-300)}.theme-scope.dark .bg-groq-green,.dark .theme-scope .bg-groq-green{background-color:var(--groq-green-400)}.theme-scope.dark .border-groq-green,.dark .theme-scope .border-groq-green{border-color:var(--groq-green-300)}.theme-scope.dark .text-groq-blue,.dark .theme-scope .text-groq-blue{color:var(--groq-blue-200)}.theme-scope.dark .bg-groq-blue,.dark .theme-scope .bg-groq-blue{background-color:var(--groq-blue-400)}.theme-scope.dark .border-groq-blue,.dark .theme-scope .border-groq-blue{border-color:var(--groq-blue-300)}.theme-scope.dark .text-groq-purple,.dark .theme-scope .text-groq-purple{color:var(--groq-purple-300)}.theme-scope.dark .bg-groq-purple,.dark .theme-scope .bg-groq-purple{background-color:var(--groq-purple-400)}.theme-scope.dark .border-groq-purple,.dark .theme-scope .border-groq-purple{border-color:var(--groq-purple-300)}.theme-scope.dark .text-groq-pink,.dark .theme-scope .text-groq-pink{color:var(--groq-pink-300)}.theme-scope.dark .bg-groq-pink,.dark .theme-scope .bg-groq-pink{background-color:var(--groq-pink-400)}.theme-scope.dark .border-groq-pink,.dark .theme-scope .border-groq-pink{border-color:var(--groq-pink-300)}.theme-scope.dark .text-primary,.dark .theme-scope .text-primary{color:var(--groq-gray-50)}.theme-scope.dark .text-muted,.dark .theme-scope .text-muted{color:var(--groq-gray-400)}.theme-scope.dark .text-on-dark,.dark .theme-scope .text-on-dark{color:var(--groq-gray-900)}.theme-scope.dark .bg-muted,.dark .theme-scope .bg-muted{background-color:var(--groq-gray-700)}.theme-scope.dark .bg-secondary,.dark .theme-scope .bg-secondary{background-color:var(--groq-gray-800)}.theme-scope.dark .bg-dark,.dark .theme-scope .bg-dark{background-color:var(--groq-gray-50);color:var(--groq-gray-900)}html,body{height:100%;overflow:hidden;overscroll-behavior:none;width:100%;transform:translateZ(0)}.app-main-content{display:flex;flex-direction:column;height:100dvh;height:calc(var(--vh)*100);max-height:100dvh;max-height:calc(var(--vh)*100);overflow:hidden;background-color:#fff;background:#fff;position:relative;transform:translate3d(0, 0, 0);backface-visibility:hidden}.app-main-content.theme-scope{background-color:#fff;background:#fff;padding:0;border-radius:0;box-shadow:none}.chat-layout{display:flex;flex:1;min-height:0;overflow:hidden;background-color:#fff;background:#fff;position:relative;transform:translate3d(0, 0, 0)}.chat-main{flex:1;min-width:0;min-height:0;overflow:hidden;display:flex;flex-direction:column;background-color:#fff;background:#fff;position:relative;transform:translate3d(0, 0, 0)}.chat-messages{flex:1;overflow-y:auto;overflow-x:hidden;min-height:0;-webkit-overflow-scrolling:touch;position:relative;transform:translate3d(0, 0, 0);will-change:scroll-position;padding-bottom:140px}@media(max-width: 768px){.chat-messages{padding-bottom:160px}}.messages-content{width:100%;max-width:48rem;margin:0 auto;padding:1rem}.chat-inset-header{display:flex;align-items:center;gap:.5rem;height:3rem;padding:0 .75rem;border-bottom:1px solid #e2e8f0;background-color:#fff;background:#fff;flex-shrink:0}.chat-sidebar-trigger{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;border:1px solid var(--color-border, #e2e8f0);border-radius:.375rem;background-color:var(--color-bg-primary, #ffffff);color:var(--color-text-muted, #94a3b8);cursor:pointer;transition:background-color .15s ease,color .15s ease,border-color .15s ease}.chat-sidebar-trigger:hover{background-color:var(--color-bg-muted, #f1f5f9);color:var(--color-text-primary, #0f172a);border-color:var(--color-text-muted, #94a3b8)}.chat-sidebar-trigger-icon{width:1rem;height:1rem}.chat-inset-title{font-size:0.875rem;line-height:1.25rem;font-weight:600;color:var(--color-text-primary, #0f172a);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chat-header{display:none}.chat-header-toggle{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;border:none;border-radius:.375rem;background-color:rgba(0,0,0,0);color:var(--color-text-muted, #94a3b8);cursor:pointer}.chat-header-toggle:hover{background-color:var(--color-bg-muted, #f1f5f9);color:var(--color-text-primary, #0f172a)}.chat-header-toggle .iconify{width:1.25rem;height:1.25rem}.chat-header-title{flex:1;font-size:1rem;font-weight:600;color:var(--color-text-primary, #0f172a);margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chat-welcome{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4rem 2rem;text-align:center}.chat-welcome-icon{width:4rem;height:4rem;margin-bottom:1.5rem;display:flex;align-items:center;justify-content:center;background-color:var(--color-primary-light, #dbeafe);border-radius:50%}.chat-welcome-icon .iconify{width:2rem;height:2rem;color:var(--color-primary, #3b82f6)}.chat-welcome h2{margin:0 0 .5rem;font-size:1.5rem;font-weight:700;color:var(--color-text-primary, #0f172a)}.chat-welcome p{margin:0 0 1.5rem;font-size:1rem;color:var(--color-text-muted, #94a3b8);max-width:24rem}.chat-welcome-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1.25rem;border:none;border-radius:.5rem;background-color:var(--color-primary, #3b82f6);color:#fff;font-size:.9375rem;font-weight:600;cursor:pointer;transition:background-color .15s ease}.chat-welcome-btn:hover{background-color:var(--color-primary-hover, #2563eb)}.chat-welcome-btn .iconify{width:1.25rem;height:1.25rem}.error-callout{border-radius:0.5rem;border-width:1px;--tw-border-opacity:1;border-color:rgb(254 202 202 / var(--tw-border-opacity, 1));--tw-bg-opacity:1;background-color:rgb(254 242 242 / var(--tw-bg-opacity, 1));padding:1rem;margin:.5rem 0}.error-callout .error-title{margin-bottom:0.5rem;display:flex;align-items:center;font-weight:600;--tw-text-opacity:1;color:rgb(153 27 27 / var(--tw-text-opacity, 1));font-size:.9375rem}.error-callout .error-message{font-size:0.875rem;line-height:1.25rem;--tw-text-opacity:1;color:rgb(185 28 28 / var(--tw-text-opacity, 1));line-height:1.5}.error-callout .error-message p{margin:.25rem 0}.error-callout .error-message ol{margin:.5rem 0;padding-left:1.5rem}.error-callout .error-message ol li{margin:.25rem 0}.error-callout .error-message a{--tw-text-opacity:1;color:rgb(37 99 235 / var(--tw-text-opacity, 1));text-decoration-line:underline;color:#2563eb}.error-callout .error-message a:hover{--tw-text-opacity:1;color:rgb(29 78 216 / var(--tw-text-opacity, 1))}.chat-messages{display:flex;width:100%;flex-direction:column;align-items:center;overflow-x:hidden}.messages-content{display:flex;width:100%;max-width:100%;flex-direction:column;gap:0px;padding-left:0.5rem;padding-right:0.5rem;padding-top:2rem;padding-bottom:12rem}@media (min-width: 640px){.messages-content{padding-left:0.5rem;padding-right:0.5rem}}@media (min-width: 768px){.messages-content{max-width:48rem}}.messages-content{overflow-x:hidden}.message-wrapper{display:flex;width:100%;animation:fadeIn .3s ease-out forwards}.message-group{position:relative;display:flex;flex-direction:column;padding-bottom:0.5rem;max-width:100%}.message-wrapper-me{justify-content:flex-end}.message-wrapper-me .message-group{align-items:flex-end;max-width:85%}.message-wrapper-them{justify-content:flex-start}.message-wrapper-them .message-group{width:100%;align-items:flex-start}@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.message{position:relative;padding:.75rem 1.25rem;font-size:1rem;line-height:1.6}.message-me{background-color:#f4f4f5;border-radius:1.25rem}.message-them{background-color:transparent;padding:0px}.message-editing.message-me{background-color:rgba(244,244,245,.5);outline:2px dashed var(--color-primary, #3b82f6);outline-offset:2px}.message-me p{margin:0px;white-space:pre-wrap;overflow-wrap:break-word}.message p{white-space:pre-wrap;overflow-wrap:break-word}.message-attachment{margin-top:0.5rem;display:flex;align-items:center;gap:0.5rem;border-radius:0.5rem;padding:0.5rem;font-size:0.875rem;line-height:1.25rem;background-color:rgba(0,0,0,.05)}.message-actions{margin-top:0.5rem;display:flex;align-items:center;gap:0.25rem;opacity:0;transition-property:opacity;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.message-wrapper:hover .message-actions{opacity:1}.actions-me{justify-content:flex-end}.actions-them{justify-content:flex-start}.action-icon-btn{display:flex;cursor:pointer;align-items:center;justify-content:center;border-radius:0.25rem;border-style:none;background-color:transparent;padding:0.25rem;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;color:#94a3b8;transition:color .2s ease,background-color .2s ease}.action-icon-btn:hover{--tw-bg-opacity:1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1));color:#0f172a}.action-icon-btn.copied{color:var(--color-success, #10b981)}.action-icon-btn.copied:hover{color:var(--color-success-dark, #059669)}.action-icon-btn.active{--tw-bg-opacity:1;background-color:rgb(229 231 235 / var(--tw-bg-opacity, 1));color:#0f172a}.action-icon-btn.action-icon-btn-stop{color:#ef4444}.action-icon-btn.action-icon-btn-stop:hover{--tw-bg-opacity:1;background-color:rgb(254 242 242 / var(--tw-bg-opacity, 1));color:#dc2626}.action-icon-btn .iconify{font-size:16px}.message-model-name{color:#94a3b8;font-size:.8125rem;padding:0 .5rem;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;user-select:none}.message-thinking{margin-bottom:1rem;border-left-width:2px;--tw-border-opacity:1;border-color:rgb(209 213 219 / var(--tw-border-opacity, 1));color:#6b7280;font-size:.9375rem}.message-thinking .message-thinking-header{margin-bottom:0.5rem;display:flex;align-items:center;gap:0.5rem;font-weight:500;--tw-text-opacity:1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.model-picker-item .message-thinking .message-thinking-header{font-size:.875rem}.message-thinking .message-thinking-header{font-size:.875rem}.message-thinking .message-thinking-header .iconify{font-size:16px}.message-thinking p,.message-thinking li,.message-thinking code,.message-thinking pre{color:#6b7280}.message-thinking a{--tw-text-opacity:1;color:rgb(59 130 246 / var(--tw-text-opacity, 1));text-decoration-line:underline}.message-thinking a:hover{--tw-text-opacity:1;color:rgb(37 99 235 / var(--tw-text-opacity, 1));color:#2563eb}.message-thinking pre{border-width:1px;--tw-border-opacity:1;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1));--tw-bg-opacity:1;background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1))}pre.message-content-editable{all:unset;display:block;outline:none;cursor:text;border-radius:.5rem;padding:.5rem;margin:-0.5rem;background-color:rgba(0,0,0,0);white-space:pre-wrap;word-wrap:break-word;font-family:inherit;font-size:inherit;line-height:1.6;min-height:1.5em;color:inherit}pre.message-content-editable:focus{outline:none}.monaco-hydrated{position:relative;margin-top:1rem;margin-bottom:1rem}.monaco-copy-btn{position:absolute;top:0.5rem;right:0.5rem;z-index:10;display:flex;cursor:pointer;align-items:center;gap:0.25rem;border-radius:0.25rem;border-width:1px;--tw-border-opacity:1;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1));--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));padding:0.25rem;padding-left:0.5rem;padding-right:0.5rem;opacity:0;transition-property:opacity;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.monaco-hydrated:hover .monaco-copy-btn{opacity:1}.message-content p:last-child{margin-bottom:0}.message-content pre{margin-top:1rem;margin-bottom:1rem;overflow-x:auto;border-radius:0.375rem;padding:1rem;background-color:#f8fafc;border:1px solid #e2e8f0;color:var(--color-text-primary, #0f172a);font-size:.9375rem;line-height:1.6}.message-content pre code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:inherit;line-height:inherit;background:none;padding:0;color:var(--color-text-primary, #0f172a)}.message-content code{border-radius:0.25rem;padding-left:0.25rem;padding-right:0.25rem;padding-top:0.125rem;padding-bottom:0.125rem;font-size:0.875rem;line-height:1.25rem;background-color:#f1f5f9;color:#e11d48;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}.message-content pre code{color:var(--color-text-primary, #0f172a);background:none}.message-content table{margin-top:1rem;margin-bottom:1rem;width:100%;border-collapse:collapse;max-width:100%;display:block;overflow-x:auto}.message-content table thead,.message-content table tbody,.message-content table tr{display:table;width:100%;table-layout:fixed}.message-content table th,.message-content table td{border-width:1px;--tw-border-opacity:1;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1));padding-left:0.75rem;padding-right:0.75rem;padding-top:0.5rem;padding-bottom:0.5rem;text-align:left;word-wrap:break-word;overflow-wrap:break-word;hyphens:auto}.message-content table th{--tw-bg-opacity:1;background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1));font-weight:600}.message-content table td{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.typing-indicator{display:flex;gap:0.25rem;padding-top:0.5rem;padding-bottom:0.5rem}.typing-dot{height:0.375rem;width:0.375rem;border-radius:9999px;--tw-bg-opacity:1;background-color:rgb(156 163 175 / var(--tw-bg-opacity, 1));animation:bounce 1.4s infinite ease-in-out both}.typing-dot:nth-child(1){animation-delay:-0.32s}.typing-dot:nth-child(2){animation-delay:-0.16s}@keyframes bounce{0%,80%,100%{transform:scale(0)}40%{transform:scale(1)}}.text-size-small .message{font-size:.9rem !important}.text-size-small .chat-input{font-size:.9rem !important}.text-size-small .message-content pre,.text-size-small .message-content code{font-size:.84375rem !important}.text-size-small .message-thinking{font-size:.84375rem !important}.text-size-large .message{font-size:1.1rem !important}.text-size-large .chat-input{font-size:1.1rem !important}.text-size-large .message-content pre,.text-size-large .message-content code{font-size:1.03125rem !important}.text-size-large .message-thinking{font-size:1.03125rem !important}.chat-input-wrapper{position:absolute;bottom:0px;left:0px;right:0px;z-index:10;margin-bottom:0.5rem;display:flex;flex-direction:column;align-items:center;padding-left:0.5rem;padding-right:0.5rem;background-color:rgba(0,0,0,0)}@media(max-width: 640px){.chat-input-wrapper{padding-left:0.75rem;padding-right:0.75rem}}.chat-input-container{display:flex;width:100%;max-width:48rem;flex-direction:column;gap:0.25rem;padding:0.5rem;background-color:var(--color-bg-primary);border:1px solid var(--color-border);border-radius:var(--radius-input);transition:box-shadow .15s ease-in-out,border-color .15s ease-in-out;min-width:0}.chat-input-container:focus-within{--tw-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);border-color:var(--color-primary)}.chat-input{width:100%;resize:none;border-style:none;background-color:transparent;font-size:1rem;max-height:200px;padding:.5rem .75rem;line-height:1.5;height:auto;min-height:auto;outline:none !important;border:none !important;box-shadow:none !important}.chat-input:focus,.chat-input:active,.chat-input:focus-visible{outline:none !important;border:none !important;box-shadow:none !important}.chat-input::-moz-placeholder{color:var(--color-text-muted)}.chat-input::placeholder{color:var(--color-text-muted)}.chat-input-actions{display:flex;align-items:center;gap:0.5rem;padding-left:0.25rem;padding-right:0.25rem;padding-bottom:0.25rem;flex-wrap:nowrap;min-width:0}.action-button{display:flex;height:2rem;width:2rem;flex-shrink:0;cursor:pointer;align-items:center;justify-content:center;border-radius:9999px;border-style:none;background-color:transparent;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;color:var(--color-text-muted)}.action-button:hover{background-color:var(--color-bg-muted);color:var(--color-text-primary)}.action-button .iconify{font-size:20px}.plus-button{background-color:transparent;color:var(--color-text-primary)}.plus-button:hover{background-color:var(--color-bg-muted)}.send-button{display:flex;height:2rem;width:2rem;flex-shrink:0;cursor:pointer;align-items:center;justify-content:center;border-radius:9999px;transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;background-color:var(--color-primary);color:var(--color-white);border:none}.send-button:hover:not(:disabled){background-color:var(--color-primary-hover);opacity:1}.send-button:active:not(:disabled){transform:scale(0.95)}",[],[480,498,524],"3b783a80-ef19-11f0-ba44-42dde27851f2","compiled-2.css","0bfafdc4-e2e9-11f0-b141-42dde27851f2",139,["D",1768155209875],".theme-scope .btn-neutral-secondary:disabled{background-color:var(--color-bg-secondary);color:var(--color-text-disabled);cursor:not-allowed}.theme-scope .btn-gray-secondary{display:inline-flex;align-items:center;justify-content:center;padding:var(--space-btn-y) var(--space-btn-x);font-size:var(--text-button);font-weight:var(--font-medium);line-height:var(--leading-normal);color:var(--color-text-primary);background-color:var(--color-white);border:1px solid var(--color-border);border-radius:var(--radius-button);cursor:pointer;transition:all .15s ease-in-out;text-decoration:none}.theme-scope .btn-gray-secondary:hover{background-color:var(--color-bg-secondary);border-color:var(--color-border-light)}.theme-scope .btn-gray-secondary:focus{outline:none;box-shadow:0 0 0 var(--ring-width) var(--color-gray-ring-dark)}.theme-scope .btn-gray-secondary:active{background-color:var(--color-bg-muted)}.theme-scope .btn-gray-secondary:disabled{background-color:var(--color-bg-secondary);color:var(--color-text-disabled);cursor:not-allowed}.theme-scope .card,.theme-scope .app-card{padding:var(--space-card-padding);background-color:var(--color-bg-primary);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);margin-bottom:1rem}.theme-scope .card-title,.theme-scope .app-title{font-size:var(--text-xl);font-weight:var(--font-semibold);color:var(--color-text-primary);margin-bottom:.5rem}.theme-scope .card-content,.theme-scope .app-card-content{color:var(--color-text-secondary)}.theme-scope .demo-card{padding:1rem;border:1px solid var(--color-border);border-radius:var(--radius-md)}.theme-scope .demo-card p:last-child{margin-bottom:0}.theme-scope .app-card p:last-child,.theme-scope .app-card-content p:last-child{margin-bottom:0}.theme-scope div[class*=border][class*=rounded] p:last-child,.theme-scope div[class*=border][class*=p-] p:last-child{margin-bottom:0}.theme-scope .accordion{border:1px solid var(--color-border);border-radius:var(--radius-lg);margin-bottom:1rem;overflow:hidden}.theme-scope .accordion-group{display:flex;flex-direction:column;gap:.5rem}.theme-scope .accordion-item{border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden}.theme-scope .accordion-item-open{border-bottom-left-radius:0;border-bottom-right-radius:0}.theme-scope .accordion-button{width:100%;padding:.5rem 1rem .5rem 1rem;background-color:var(--color-bg-secondary);border:none;text-align:left;cursor:pointer;display:flex;justify-content:flex-start;align-items:center;font-weight:var(--font-medium);color:var(--color-text-primary);transition:background-color .15s ease-in-out}.theme-scope .accordion-button:hover{background-color:var(--color-bg-muted)}.theme-scope .accordion-icon{flex-shrink:0;position:relative}.theme-scope .accordion-icon-line{fill:var(--color-text-secondary);transition:opacity .2s ease-in-out}.theme-scope .accordion-icon-line-vertical{transform-origin:center;transform:rotate(0deg)}.theme-scope .accordion-icon-rotated{transform:rotate(90deg)}.theme-scope .accordion-button-icon{width:1.25rem;height:1.25rem;flex-shrink:0}.theme-scope .accordion-button-open .accordion-button-icon{transform:rotate(180deg)}.theme-scope .accordion-content{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease-out;overflow:hidden;margin:0}.theme-scope .accordion-content-open{grid-template-rows:1fr}.theme-scope .accordion-content-inner{overflow:hidden;padding:0 1rem;min-height:0;color:var(--color-text-secondary);opacity:0;transition:opacity .3s ease-out,padding .3s ease-out}.theme-scope .accordion-content-open .accordion-content-inner{padding:1rem 1rem 1rem 1rem;opacity:1}.theme-scope .accordion-content-inner p:last-child{margin-bottom:0}.theme-scope .accordion-single{border:none;border-radius:0}.theme-scope .accordion-single .accordion-item{border:none;border-radius:0;overflow:visible}.theme-scope .accordion-single .accordion-item:not(:last-child){border-bottom:1px solid var(--color-border)}.theme-scope .accordion-single .accordion-button{padding:1rem 0;background-color:rgba(0,0,0,0);justify-content:space-between;font-weight:var(--font-medium);border:none}.theme-scope .accordion-single .accordion-button:hover{background-color:rgba(0,0,0,0)}.theme-scope .accordion-single .accordion-button-icon{width:1rem;height:1rem;transition:transform .2s ease-in-out;flex-shrink:0;margin-left:1rem}.theme-scope .accordion-single .accordion-button[aria-expanded=true] .accordion-button-icon{transform:rotate(180deg)}.theme-scope .accordion-single .accordion-content-inner{padding:0}.theme-scope .accordion-single .accordion-content-open .accordion-content-inner{padding:.5rem 0 1rem 0}.theme-scope .tab-nav{padding:var(--space-tab-y) 0;border-bottom:1px solid var(--color-border-tab);margin-bottom:1.5rem;position:relative}.theme-scope .tab-list{display:flex;gap:1rem;flex-wrap:wrap;font-size:var(--text-sm)}.theme-scope .tab-button{background:none;border:none;cursor:pointer;padding:.25rem 0;position:relative;color:var(--color-tab);text-decoration:none;transition:color .15s ease-in-out}.theme-scope .tab-button:hover{color:var(--color-tab-active)}.theme-scope .tab-button-active{color:var(--color-tab-active);font-weight:var(--font-semibold)}.theme-scope .tab-indicator{position:absolute;bottom:-0.5rem;left:0;right:0;height:2px;background:var(--color-tab-active)}.theme-scope .tab-container{border:1px solid var(--color-border-tab);border-radius:var(--radius-lg);overflow:hidden;background:var(--color-white)}.theme-scope .tab-container-header{background:var(--color-bg-light);border-bottom:1px solid var(--color-border-tab);display:flex;justify-content:space-between;align-items:center;padding:0 1rem}.theme-scope .tab-container-nav{display:flex;gap:1.5rem;font-size:var(--text-sm);height:100%}.theme-scope .tab-container-button{height:3rem;background:none;border:none;cursor:pointer;padding:var(--space-tab-y) 0;position:relative;color:var(--color-tab);transition:color .15s ease-in-out}.theme-scope .tab-container-button:hover{color:var(--color-tab-active)}.theme-scope .tab-container-button-active{color:var(--color-tab-active);font-weight:var(--font-semibold)}.theme-scope .tab-container-indicator{position:absolute;bottom:-1px;left:0;right:0;height:2px;background:var(--color-tab-active);z-index:1}.theme-scope .tab-container-actions{display:flex;gap:.5rem;align-items:center}.theme-scope .tab-action-button{background:none;border:none;cursor:pointer;color:var(--color-tab);padding:.25rem;display:flex;align-items:center;transition:color .15s ease-in-out}.theme-scope .tab-action-button:hover{color:var(--color-tab-active)}.theme-scope .tab-content{padding:1rem 0}.theme-scope .tab-container-content{padding:0}.theme-scope .tab-buttons{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.5rem}.theme-scope .tab-buttons-sm{gap:.375rem;margin-bottom:1rem}.theme-scope .tab-btn{display:inline-flex;align-items:center;justify-content:center;padding:.625rem 1.25rem;font-size:.9375rem;font-weight:var(--font-medium);line-height:var(--leading-normal);color:var(--color-text-secondary);background-color:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-lg);cursor:pointer;transition:all .15s ease-in-out;text-decoration:none;white-space:nowrap}.theme-scope .tab-btn:hover:not(:disabled){color:var(--color-text-primary);background-color:var(--color-bg-muted);border-color:var(--color-border-light)}.theme-scope .tab-btn:focus{outline:none;box-shadow:0 0 0 3px rgba(59,130,246,.15)}.theme-scope .tab-btn-active{color:var(--color-primary);background-color:var(--color-primary-light);border-color:var(--color-primary);font-weight:var(--font-semibold)}.theme-scope .tab-btn-active:hover:not(:disabled){color:var(--color-primary-hover);background-color:var(--color-primary-lighter);border-color:var(--color-primary-hover)}.theme-scope .tab-btn-disabled,.theme-scope .tab-btn:disabled{color:var(--color-text-muted);background-color:var(--color-bg-secondary);border-color:var(--color-border);cursor:not-allowed;opacity:.6}.theme-scope .tab-btn-sm{padding:.375rem .875rem;font-size:.8125rem;border-radius:var(--radius-md)}.theme-scope .tab-btn-content{padding:1rem 0}.theme-scope .tab-modern-group{display:inline-flex;background-color:var(--color-bg-muted, #f4f4f5);padding:.25rem;border-radius:var(--radius-lg);gap:.25rem;margin-bottom:.25rem}.theme-scope .tab-modern{display:inline-flex;align-items:center;justify-content:center;padding:.5rem 1rem;font-size:var(--text-sm);font-weight:var(--font-medium);line-height:1.25rem;color:var(--color-text-secondary, #71717a);background-color:rgba(0,0,0,0);border:none;border-radius:var(--radius-md);cursor:pointer;transition:all .15s ease-in-out;white-space:nowrap}.theme-scope .tab-modern:hover:not(.tab-modern-active){color:var(--color-text-primary, #18181b);background-color:rgba(0,0,0,.03)}.theme-scope .tab-modern-active{color:var(--color-text-primary, #09090b);background-color:var(--color-white, #ffffff);box-shadow:var(--shadow-sm);font-weight:var(--font-medium)}.theme-scope .tab-modern:focus{outline:none;box-shadow:none}.theme-scope .tab-modern-content{padding:0}.theme-scope .tab-modern-content .text-muted{color:var(--color-text-secondary, #71717a);font-size:var(--text-sm);line-height:var(--leading-normal)}.theme-scope .tab-modern-content .card{border:1px solid var(--color-border, #e4e4e7);border-radius:var(--radius-lg);background-color:var(--color-white, #ffffff);max-width:24rem}.theme-scope .tab-modern-content .card-body{padding:0rem}.theme-scope .callout{margin-top:1rem;padding:1rem 1.5rem;background:var(--color-bg-light);border:1px solid var(--color-border);border-radius:var(--radius-lg);margin-bottom:1.5rem}.theme-scope .callout-title{margin-top:0;font-size:var(--text-base);font-weight:var(--font-semibold);color:inherit;margin-bottom:.5rem}.theme-scope .callout p:last-child{margin-bottom:0}.theme-scope .callout pre{background:var(--color-white);padding:1rem;border-radius:var(--radius-md);overflow-x:auto;margin-top:1rem}.theme-scope .callout-note{background-color:var(--color-bg-secondary);border-color:var(--color-border);color:var(--color-text-neutral)}.theme-scope .callout-action{background-color:var(--color-info-light);border-color:var(--color-info);color:var(--color-info-dark)}.theme-scope .callout-warning{background-color:var(--color-warning-light);border-color:var(--color-warning);color:var(--color-warning-dark)}.theme-scope .callout-error{background-color:var(--color-danger-light);border-color:var(--color-danger);color:var(--color-danger-dark)}.theme-scope .alert{position:relative;width:100%;border-radius:var(--radius-lg);border:1px solid var(--color-border);border-left:3px solid var(--color-border);padding:1rem;display:flex;align-items:flex-start;gap:.75rem;background-color:var(--color-bg-primary);color:var(--color-text-primary);margin-bottom:1rem}.theme-scope .alert>svg,.theme-scope .alert>.iconify{flex-shrink:0;width:1rem;height:1rem;margin-top:.25rem;color:var(--color-text-primary)}.theme-scope .alert>div{flex:1}.theme-scope .alert-title{margin-top:0;margin-bottom:.25rem;font-weight:var(--font-medium);line-height:var(--leading-normal);color:inherit}.theme-scope .alert-description{color:var(--color-text-secondary);line-height:var(--leading-normal)}.theme-scope .alert-description p{margin-bottom:.5rem}.theme-scope .alert-description p:last-child{margin-bottom:0}.theme-scope .alert-default{background-color:var(--color-bg-primary);border-color:var(--color-border)}.theme-scope .alert-destructive{border-color:var(--color-danger);background-color:var(--color-danger-light);color:var(--color-danger-dark)}.theme-scope .alert-destructive>svg,.theme-scope .alert-destructive>.iconify{color:var(--color-danger)}.theme-scope .alert-destructive .alert-description{color:var(--color-danger-dark)}.theme-scope .alert-success{border-color:var(--color-success);background-color:var(--color-success-light);color:var(--color-success-dark)}.theme-scope .alert-success>svg,.theme-scope .alert-success>.iconify{color:var(--color-success)}.theme-scope .alert-success .alert-title{color:var(--color-success-dark)}.theme-scope .alert-success .alert-description{color:var(--color-success-dark)}.theme-scope .alert-warning{border-color:var(--color-warning);background-color:var(--color-warning-light);color:var(--color-warning-dark)}.theme-scope .alert-warning>svg,.theme-scope .alert-warning>.iconify{color:var(--color-warning)}.theme-scope .alert-warning .alert-title{color:var(--color-warning-dark)}.theme-scope .alert-warning .alert-description{color:var(--color-warning-dark)}.theme-scope .alert-info{border-color:var(--color-info);background-color:var(--color-info-light);color:var(--color-info-dark)}.theme-scope .alert-info>svg,.theme-scope .alert-info>.iconify{color:var(--color-info)}.theme-scope .alert-info .alert-title{color:var(--color-info-dark)}.theme-scope .alert-info .alert-description{color:var(--color-info-dark)}.theme-scope details{border-radius:.5rem;padding:.5rem 1rem .5rem 1rem;margin-bottom:1rem}.theme-scope summary{cursor:pointer;font-weight:500;color:var(--color-text-primary);user-select:none;display:flex;align-items:center;gap:.5rem;list-style:none}.theme-scope summary::-webkit-details-marker{display:none}.theme-scope summary::before{content:\"\";width:1rem;height:1rem;background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230f172a'%3e%3cpath d='M8 5v14l11-7z'/%3e%3c/svg%3e\");background-repeat:no-repeat;background-position:center;background-size:contain;transition:transform .2s ease-in-out;flex-shrink:0}.theme-scope summary:hover{color:var(--color-primary)}.theme-scope details[open] summary{margin-bottom:.75rem}.theme-scope details[open] summary::before{transform:rotate(90deg)}.theme-scope .details-toggle{border:1px solid var(--color-border);border-radius:.5rem;padding:.75rem 1rem;margin-bottom:1rem;background-color:var(--color-bg-primary);transition:border-color .15s ease-in-out}.theme-scope .details-toggle:hover{border-color:var(--color-border-light)}.theme-scope .details-summary{cursor:pointer;font-weight:500;color:var(--color-text-primary);user-select:none;padding:.25rem 0}.theme-scope .details-summary:hover{color:var(--color-primary)}.theme-scope .details-toggle[open] .details-summary{margin-bottom:.75rem}.theme-scope .details-content{padding-left:1rem;padding-top:.5rem;color:var(--color-text-secondary)}.theme-scope details.details-minimal{border:none;background:none;padding:0;margin-bottom:.5rem}.theme-scope details.details-minimal summary{padding:.25rem 0;color:var(--color-text-secondary)}.theme-scope details.details-minimal summary:hover{color:var(--color-text-primary)}.theme-scope details.details-minimal[open] summary{margin-bottom:.25rem;color:var(--color-text-primary)}.theme-scope details.details-minimal .details-content{padding-left:1.75rem;color:var(--color-text-secondary)}.theme-scope .color-success{color:var(--color-success)}.theme-scope .color-warning{color:var(--color-warning)}.theme-scope .color-danger{color:var(--color-danger)}.theme-scope .color-info{color:var(--color-primary)}.theme-scope .color-text-primary{color:var(--color-text-primary)}.theme-scope .color-text-secondary{color:var(--color-text-secondary)}.theme-scope .color-text-muted{color:var(--color-text-muted)}.theme-scope .color-bg-primary{background-color:var(--color-bg-primary)}.theme-scope .color-bg-secondary{background-color:var(--color-bg-secondary)}.theme-scope .color-bg-muted{background-color:var(--color-bg-muted)}.theme-scope .color-success{color:var(--color-success)}.theme-scope .color-success-bg{background-color:var(--color-success-light);color:var(--color-success-dark)}.theme-scope .color-success-border{border-color:var(--color-success)}.theme-scope .color-success-text{color:var(--color-success-dark)}.theme-scope .color-success-link{color:var(--color-success-link)}.theme-scope .color-success-link:hover{color:var(--color-success-link-hover)}.theme-scope .color-warning{color:var(--color-warning)}.theme-scope .color-warning-bg{background-color:var(--color-warning-light);color:var(--color-warning-dark)}.theme-scope .color-warning-border{border-color:var(--color-warning)}.theme-scope .color-warning-text{color:var(--color-warning-dark)}.theme-scope .color-warning-link{color:var(--color-warning-link)}.theme-scope .color-warning-link:hover{color:var(--color-warning-link-hover)}.theme-scope .color-danger{color:var(--color-danger)}.theme-scope .color-danger-bg{background-color:var(--color-danger-light);color:var(--color-danger-dark)}.theme-scope .color-danger-border{border-color:var(--color-danger)}.theme-scope .color-danger-text{color:var(--color-danger-dark)}.theme-scope .color-danger-link{color:var(--color-danger-link)}.theme-scope .color-danger-link:hover{color:var(--color-danger-link-hover)}.theme-scope .color-info{color:var(--color-primary)}.theme-scope .color-info-bg{background-color:var(--color-primary-lighter);color:var(--color-primary-dark)}.theme-scope .color-info-border{border-color:var(--color-primary)}.theme-scope .color-info-text{color:var(--color-primary-dark)}.theme-scope .color-info-link{color:var(--color-primary-hover)}.theme-scope .color-info-link:hover{color:var(--color-primary-active)}.theme-scope .color-neutral{color:var(--color-text-secondary)}.theme-scope .color-neutral-bg{background-color:var(--color-bg-muted);color:var(--color-text-neutral-dark)}.theme-scope .color-neutral-border{border-color:var(--color-border-light)}.theme-scope .color-neutral-text{color:var(--color-text-neutral)}.theme-scope .color-neutral-link{color:var(--color-neutral-link)}.theme-scope .color-neutral-link:hover{color:var(--color-neutral-link-hover)}.theme-scope .no-underline{text-decoration:none !important}.theme-scope .hover-no-underline:hover{text-decoration:none !important}.theme-scope .hidden{display:none !important}.theme-scope .mb-0{margin-bottom:0 !important}.theme-scope .badge{display:inline-flex;align-items:center;border-radius:var(--radius-md);padding:.125rem .5rem;font-size:var(--text-xs);font-weight:var(--font-medium);line-height:var(--leading-tight);white-space:nowrap;gap:.25rem}.theme-scope .badge-default{background-color:var(--color-primary);color:var(--color-white)}.theme-scope .badge-secondary{background-color:var(--color-bg-muted);color:var(--color-text-neutral)}.theme-scope .badge-success{background-color:var(--color-success-light);color:var(--color-success-link-hover)}.theme-scope .badge-error,.theme-scope .badge-danger,.theme-scope .badge-destructive{background-color:var(--color-danger-light);color:var(--color-danger-link-hover)}.theme-scope .badge-info{background-color:var(--color-primary-lighter);color:var(--color-primary-dark)}.theme-scope .badge-warning{background-color:var(--color-warning-light);color:var(--color-warning-link-hover)}.theme-scope .badge-neutral{background-color:var(--color-bg-muted);color:var(--color-text-neutral)}.theme-scope .badge-outline{background-color:rgba(0,0,0,0);border:1px solid var(--color-border-light);color:var(--color-text-secondary)}.theme-scope .badge-outline-default{background-color:rgba(0,0,0,0);border:1px solid var(--color-primary);color:var(--color-primary)}.theme-scope .badge-outline-secondary{background-color:rgba(0,0,0,0);border:1px solid var(--color-border-light);color:var(--color-text-secondary)}.theme-scope .badge-outline-success{background-color:rgba(0,0,0,0);border:1px solid var(--color-success);color:var(--color-success-link-hover)}.theme-scope .badge-outline-error,.theme-scope .badge-outline-danger,.theme-scope .badge-outline-destructive{background-color:rgba(0,0,0,0);border:1px solid var(--color-danger);color:var(--color-danger-link-hover)}.theme-scope .badge-outline-info{background-color:rgba(0,0,0,0);border:1px solid var(--color-primary);color:var(--color-primary-dark)}.theme-scope .badge-outline-warning{background-color:rgba(0,0,0,0);border:1px solid var(--color-warning);color:var(--color-warning-link-hover)}.theme-scope .badge-pill{border-radius:var(--radius-full)}.theme-scope .badge-number{border-radius:var(--radius-full);padding:.125rem .375rem;font-size:.6875rem;min-width:1.25rem;justify-content:center;background-color:var(--color-text-neutral-dark);color:var(--color-white)}.theme-scope .badge-number-secondary{background-color:var(--color-bg-muted);color:var(--color-text-neutral)}.theme-scope .badge-sm{font-size:.625rem;padding:.125rem .375rem}.theme-scope .badge-md{font-size:var(--text-sm);padding:.25rem .75rem;max-height:25px}.theme-scope .badge-lg{font-size:var(--text-base);padding:.375rem 1rem}.theme-scope .badge .iconify{display:inline-flex;align-items:center;font-size:var(--text-sm);width:.875rem;height:.875rem}.theme-scope .badge-md .iconify{font-size:var(--text-base);width:1rem;height:1rem}.theme-scope .badge-lg .iconify{font-size:var(--text-lg);width:1.125rem;height:1.125rem}.theme-scope .data-list{display:flex;flex-direction:column;border:1px solid var(--color-border);border-radius:.5rem;overflow:hidden;background-color:var(--color-bg-primary)}.theme-scope .data-list-row{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;border-bottom:1px solid var(--color-border);background-color:var(--color-bg-primary);transition:background-color .15s ease}.theme-scope .data-list-row:last-child{border-bottom:none}.theme-scope .data-list-row:hover{background-color:var(--color-bg-secondary)}.theme-scope .data-list-row-content{display:flex;align-items:center;gap:1rem;flex:1}.theme-scope .data-list-row-actions{display:flex;align-items:center;gap:.5rem}.theme-scope .data-list-item-title{font-weight:500;color:var(--color-text-primary)}.theme-scope .data-list-item-subtitle{font-size:.875rem;color:var(--color-text-secondary)}.theme-scope .empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem 1rem;text-align:center;background-color:var(--color-bg-secondary);border:1px dashed var(--color-border);border-radius:.5rem;color:var(--color-text-secondary)}.theme-scope .empty-state-icon{width:3rem;height:3rem;margin-bottom:1rem;color:var(--color-text-muted)}.theme-scope .empty-state-title{font-size:1rem;font-weight:600;color:var(--color-text-primary);margin-bottom:.5rem}.theme-scope .empty-state-description{font-size:.875rem;max-width:20rem}.theme-scope .breadcrumbs{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;font-size:.875rem;line-height:20px;color:var(--color-text-secondary);margin-bottom:1.5rem}.theme-scope .breadcrumb-item{display:flex;align-items:center;gap:.5rem}.theme-scope .breadcrumb-separator,.theme-scope .crumb-divider{color:var(--color-border-light);display:inline-flex;align-items:center}.theme-scope .breadcrumb-link{color:var(--color-text-secondary);text-decoration:none;transition:color .15s ease}.theme-scope .breadcrumb-link:hover{color:var(--color-text-primary);text-decoration:underline}.theme-scope .breadcrumb-current{color:var(--color-text-primary);font-weight:500}.theme-scope .breadcrumbs-chevron .crumb-divider{color:var(--color-border-light)}.theme-scope .breadcrumbs .crumb-divider svg{width:16px;height:16px;color:var(--color-border-light)}.theme-scope .back-link{display:flex;align-items:center;gap:.5rem;font-size:.875rem;line-height:20px;margin-bottom:1.5rem}.theme-scope .back-link svg{width:16px;height:16px;color:var(--color-text-secondary)}.theme-scope .back-link .breadcrumb-link{color:var(--color-text-secondary);text-decoration:none;transition:color .15s ease}.theme-scope .back-link .breadcrumb-link:hover{color:var(--color-text-primary);text-decoration:underline}.theme-scope .crumb-ellipsis{color:var(--color-text-muted)}.theme-scope .breadcrumbs-small{font-size:.75rem;line-height:18px}.theme-scope .breadcrumbs-small .crumb-divider svg{width:14px;height:14px}.theme-scope .breadcrumbs-large{font-size:1rem;line-height:24px}.theme-scope .breadcrumbs-large .crumb-divider svg{width:18px;height:18px}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}.theme-scope .animate-spin{animation:spin 1s linear infinite}.theme-scope .loading-overlay{position:absolute;inset:0;background-color:hsla(0,0%,100%,.7);display:flex;align-items:center;justify-content:center;z-index:50;backdrop-filter:blur(2px);border-radius:inherit}.theme-scope .loading-skeleton{background-color:var(--color-bg-muted);border-radius:.25rem;animation:pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite}@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}.theme-scope .avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;overflow:hidden;user-select:none;width:2.5rem;height:2.5rem;border-radius:9999px;background-color:var(--color-bg-secondary)}.theme-scope .avatar img{width:100%;height:100%;object-fit:cover;border-radius:inherit}.theme-scope .avatar-fallback{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background-color:var(--color-bg-muted);color:var(--color-text-secondary);font-size:.875rem;font-weight:500;text-transform:uppercase}.theme-scope .avatar-sm{width:2rem;height:2rem}.theme-scope .avatar-sm .avatar-fallback{font-size:.75rem}.theme-scope .avatar-lg{width:3rem;height:3rem}.theme-scope .avatar-lg .avatar-fallback{font-size:1rem}.theme-scope .avatar-xl{width:4rem;height:4rem}.theme-scope .avatar-xl .avatar-fallback{font-size:1.25rem}.theme-scope .avatar-square{border-radius:0}.theme-scope .avatar-rounded{border-radius:.5rem}.theme-scope .avatar-indicator{position:absolute;bottom:0;right:0;display:block;width:25%;height:25%;min-width:8px;min-height:8px;border-radius:9999px;border:2px solid var(--color-bg-primary);background-color:var(--color-bg-muted)}.theme-scope .status-online{background-color:var(--color-success)}.theme-scope .status-busy{background-color:var(--color-danger)}.theme-scope .status-offline{background-color:var(--color-text-muted)}.theme-scope .avatar-group{display:flex;align-items:center;flex-direction:row}.theme-scope .avatar-group .avatar{border:2px solid var(--color-bg-primary);margin-right:-1rem;transition:margin .2s ease,transform .2s ease,z-index .2s}.theme-scope .avatar-group .avatar:hover{z-index:10;transform:translateY(-2px);margin-right:0}.theme-scope .avatar-group .avatar:last-child{margin-right:0}.theme-scope .avatar-placeholder{background-color:var(--color-bg-secondary);color:var(--color-text-primary);font-size:.75rem}.theme-scope .item{display:flex;flex-direction:column;padding:1rem;background-color:var(--color-bg-primary);border:1px solid var(--color-border);border-radius:var(--radius-lg);transition:background-color .15s ease,border-color .15s ease}.theme-scope .item:hover{background-color:var(--color-bg-secondary)}.theme-scope .item-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem;padding-bottom:.75rem;border-bottom:1px solid var(--color-border)}.theme-scope .item-content{flex:1;display:flex;flex-direction:column;gap:.25rem}.theme-scope .item-title{font-weight:var(--font-medium);font-size:var(--text-base);color:var(--color-text-primary);margin-bottom:.25rem}.theme-scope .item-description{font-size:var(--text-sm);color:var(--color-text-secondary);line-height:var(--leading-normal)}.theme-scope .item-actions{display:flex;align-items:center;gap:.5rem}.theme-scope .item-footer{display:flex;align-items:center;justify-content:space-between;margin-top:.75rem;padding-top:.75rem;border-top:1px solid var(--color-border);font-size:var(--text-sm);color:var(--color-text-secondary)}.theme-scope .item>.flex{display:flex;align-items:center;gap:1rem}.theme-scope .item>.flex>.item-content{margin-top:0}.theme-scope .dropdown{position:relative;display:inline-block}.theme-scope .dropdown-mega{position:static}.theme-scope .dropdown-menu{position:absolute;top:100%;left:0;z-index:50;min-width:12rem;padding:.25rem 0;margin-top:.25rem;background-color:var(--color-bg-primary);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05);opacity:0;transform:scale(0.95) translateY(-5px);transform-origin:top left;transition:opacity .15s ease-out,transform .15s ease-out,visibility 0s linear .15s;pointer-events:none;visibility:hidden}.theme-scope .dropdown-menu.open{opacity:1;transform:scale(1) translateY(0);pointer-events:auto;visibility:visible;transition-delay:0s;display:block;z-index:999}.theme-scope .dropdown-menu-right{left:auto;right:0;transform-origin:top right}.theme-scope .dropdown-menu-center{left:50%;transform:translateX(-50%) scale(0.95) translateY(-5px);transform-origin:top center}.theme-scope .dropdown-menu-center.open{transform:translateX(-50%) scale(1) translateY(0)}.theme-scope .dropdown-menu-w-sm{min-width:10rem}.theme-scope .dropdown-menu-w-md{min-width:16rem}.theme-scope .dropdown-menu-w-lg{min-width:20rem}.theme-scope .dropdown-menu-w-xl{min-width:24rem}.theme-scope .dropdown-mega-container{position:relative}.theme-scope .dropdown-menu-mega{position:absolute;left:2rem;right:2rem;width:auto;padding:1.5rem;display:grid;grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));gap:1.5rem;transform:translateY(-5px);transform-origin:top center}.theme-scope .dropdown-menu-mega.open{display:grid !important;transform:translateY(0);overflow:hidden}.theme-scope .dropdown-menu-up,.theme-scope .dropdown-menu-top{top:auto;bottom:100%;margin-top:0;margin-bottom:.25rem;transform:scale(0.95) translateY(5px);transform-origin:bottom left}.theme-scope .dropdown-menu-up.open,.theme-scope .dropdown-menu-top.open{transform:scale(1) translateY(0)}.theme-scope .dropdown-menu-up.dropdown-menu-right,.theme-scope .dropdown-menu-top.dropdown-menu-right{transform-origin:bottom right}.theme-scope .dropdown-menu-up.dropdown-menu-center,.theme-scope .dropdown-menu-top.dropdown-menu-center{transform:translateX(-50%) scale(0.95) translateY(5px);transform-origin:bottom center}.theme-scope .dropdown-menu-up.dropdown-menu-center.open,.theme-scope .dropdown-menu-top.dropdown-menu-center.open{transform:translateX(-50%) scale(1) translateY(0)}.theme-scope .dropdown-header{display:block;padding:.5rem 1rem;margin-bottom:0;font-size:var(--text-xs);font-weight:var(--font-semibold);color:var(--color-text-secondary);white-space:nowrap;text-transform:uppercase;letter-spacing:.05em}.theme-scope .dropdown-item{display:flex;align-items:center;gap:.75rem;width:100%;padding:.5rem 1rem;clear:both;font-weight:400;color:var(--color-text-primary);text-align:inherit;white-space:nowrap;background-color:rgba(0,0,0,0);border:0;cursor:pointer;text-decoration:none;transition:all .15s ease-in-out;font-size:var(--text-sm)}.theme-scope .dropdown-item:hover,.theme-scope .dropdown-item:focus{background-color:var(--color-bg-secondary);color:var(--color-primary);text-decoration:none;outline:none}.theme-scope .dropdown-item.active{background-color:var(--color-primary-light);color:var(--color-primary)}.theme-scope .dropdown-item-description{display:block;font-size:var(--text-xs);color:var(--color-text-secondary);margin-top:.125rem;white-space:normal}.theme-scope .dropdown-item-text{display:block;padding:.5rem 1rem;font-size:var(--text-sm);color:var(--color-text-primary)}.theme-scope .dropdown-item:hover .dropdown-item-description{color:var(--color-text-neutral-dark)}.theme-scope .dropdown-divider{height:0;margin:.375rem 0;overflow:hidden;border-top:1px solid var(--color-border-light)}.theme-scope .dropdown-item-icon{width:1rem;height:1rem;color:var(--color-text-muted);flex-shrink:0}.theme-scope .dropdown-item:hover .dropdown-item-icon{color:var(--color-primary)}.theme-scope .popover-content{position:absolute;top:100%;left:0;z-index:50;padding:1rem;margin-top:.5rem;background-color:var(--color-bg-primary);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05);opacity:0;transform:scale(0.95) translateY(-5px);transform-origin:top left;transition:opacity .15s ease-out,transform .15s ease-out,visibility 0s linear .15s;pointer-events:none;visibility:hidden}.theme-scope .popover-content.open{opacity:1;transform:scale(1) translateY(0);pointer-events:auto;visibility:visible;transition-delay:0s}.theme-scope .popover-content-right{left:auto;right:0;transform-origin:top right}.theme-scope .popover-content-center{left:50%;transform:translateX(-50%) scale(0.95) translateY(-5px);transform-origin:top center}.theme-scope .popover-content-center.open{transform:translateX(-50%) scale(1) translateY(0)}.theme-scope .popover-content-up,.theme-scope .popover-content-top{top:auto;bottom:100%;margin-top:0;margin-bottom:.5rem;transform:scale(0.95) translateY(5px);transform-origin:bottom left}.theme-scope .popover-content-up.open,.theme-scope .popover-content-top.open{transform:scale(1) translateY(0)}.theme-scope .popover-content-up.popover-content-right,.theme-scope .popover-content-top.popover-content-right{transform-origin:bottom right}.theme-scope .popover-content-up.popover-content-center,.theme-scope .popover-content-top.popover-content-center{transform:translateX(-50%) scale(0.95) translateY(5px);transform-origin:bottom center}.theme-scope .popover-content-up.popover-content-center.open,.theme-scope .popover-content-top.popover-content-center.open{transform:translateX(-50%) scale(1) translateY(0)}.theme-scope .field{display:flex;flex-direction:column;gap:.375rem}.theme-scope .field:last-child{margin-bottom:0}.theme-scope .field-horizontal{flex-direction:row;align-items:flex-start;gap:.75rem}.theme-scope .field-responsive{flex-direction:column}@media(min-width: 640px){.theme-scope .field-responsive{flex-direction:row;align-items:flex-start;gap:1.5rem}}.theme-scope .field-label{display:block;margin-bottom:0;font-weight:var(--font-medium);color:var(--color-text-primary);font-size:var(--text-sm);line-height:var(--leading-normal)}.theme-scope .field-horizontal .field-label{margin-bottom:0;margin-top:0;line-height:var(--leading-normal)}.theme-scope .field-title{font-weight:var(--font-medium);color:var(--color-text-primary);font-size:var(--text-sm);line-height:var(--leading-normal);margin-bottom:0}.theme-scope .field-description{font-size:var(--text-sm);color:var(--color-text-muted);line-height:var(--leading-normal);margin:0}.theme-scope .field-horizontal .field-description{font-size:var(--text-sm);margin-bottom:0}.theme-scope .fieldset>.field-description{margin-bottom:.75rem}.theme-scope .field-description+.form-input,.theme-scope .field-description+.form-select,.theme-scope .field-description+.form-textarea,.theme-scope .field-description+input,.theme-scope .field-description+select,.theme-scope .field-description+textarea,.theme-scope .field-description+.range-slider{margin-top:0}.theme-scope .fieldset .field-description+.field-group{margin-top:0}.theme-scope .field-content{display:flex;flex-direction:column;gap:.25rem;flex:1}.theme-scope .field-horizontal .field-content{flex:1}.theme-scope .field-responsive .field-content{flex:0 0 auto;min-width:8rem}@media(min-width: 640px){.theme-scope .field-responsive .field-content{min-width:10rem;max-width:12rem}}.theme-scope .fieldset{border:none;padding:0;margin:0;min-width:0}.theme-scope .field-legend{font-size:var(--text-lg);font-weight:var(--font-semibold);color:var(--color-text-primary);margin-bottom:.375rem;line-height:var(--leading-normal)}.theme-scope .field-legend-label{font-size:var(--text-sm);font-weight:var(--font-medium);line-height:var(--leading-normal);margin-bottom:.375rem}.theme-scope .field-group{display:flex;flex-direction:column;gap:.5rem}.theme-scope .field-group>.field-separator{margin:.5rem 0 !important;flex-shrink:0}.theme-scope .field-group.gap-3{gap:.5rem}.theme-scope .fieldset .field-group .field-horizontal{margin-bottom:0}.theme-scope .space-y-2>.field-horizontal{margin-bottom:0}.theme-scope .space-y-2>.field-horizontal+.field-horizontal{margin-top:.5rem}@container field-group (min-width: 640px){.theme-scope .field-responsive{flex-direction:row;align-items:flex-start;gap:1.5rem}}.theme-scope .field-separator{display:block !important;height:1px;background-color:var(--color-border);margin:0;border:none;width:100%}.theme-scope .field-invalid input,.theme-scope .field-invalid textarea,.theme-scope .field-invalid select,.theme-scope .field-invalid .form-input,.theme-scope .field-invalid .form-select{border-color:var(--color-danger)}.theme-scope .field-invalid input:focus,.theme-scope .field-invalid textarea:focus,.theme-scope .field-invalid select:focus,.theme-scope .field-invalid .form-input:focus,.theme-scope .field-invalid .form-select:focus{border-color:var(--color-danger);box-shadow:0 0 0 3px rgba(239,68,68,.1)}.theme-scope .field-error{font-size:var(--text-sm);color:var(--color-danger);margin:0;line-height:var(--leading-normal)}.theme-scope .field-choice-card{display:block;padding:.75rem 1rem;border:1px solid var(--color-choice-border);border-radius:var(--radius-lg);cursor:pointer;transition:all .15s ease-in-out;background-color:var(--color-choice-bg)}.theme-scope .field-choice-card:hover{background-color:var(--color-choice-bg-hover);border-color:var(--color-choice-border-hover)}.theme-scope .field-choice-card:has(input:checked){border-color:var(--color-choice-border-checked);background-color:var(--color-choice-bg-checked)}.theme-scope .field-choice-card:has(input:focus){outline:2px solid var(--color-choice-ring);outline-offset:2px}.theme-scope .field-responsive input,.theme-scope .field-responsive textarea,.theme-scope .field-responsive select,.theme-scope .field-responsive .form-input,.theme-scope .field-responsive .form-select{width:100%;max-width:100%}@media(min-width: 640px){.theme-scope .field-responsive input,.theme-scope .field-responsive textarea,.theme-scope .field-responsive select,.theme-scope .field-responsive .form-input,.theme-scope .field-responsive .form-select{width:100%;max-width:24rem;flex:0 1 auto}}.theme-scope .field-horizontal input[type=checkbox],.theme-scope .field-horizontal input[type=radio],.theme-scope .field-horizontal .form-toggle{margin-top:.125rem;flex-shrink:0}.theme-scope .field-group .field-horizontal.field,.theme-scope .space-y-2 .field-horizontal.field{margin-bottom:0;gap:.625rem}.theme-scope .field-horizontal button{margin-right:.5rem}.theme-scope .field-horizontal button:last-child{margin-right:0}.theme-scope .field input[aria-invalid=true],.theme-scope .field textarea[aria-invalid=true],.theme-scope .field select[aria-invalid=true]{border-color:var(--color-danger)}.theme-scope .field:has(.field-description) .field-label,.theme-scope .field:has(.field-description) .field-title{margin-bottom:0}.theme-scope .field:has(input:focus) .field-label,.theme-scope .field:has(textarea:focus) .field-label,.theme-scope .field:has(select:focus) .field-label{color:var(--color-primary)}.theme-scope .range-slider{position:relative;width:100%;height:1.25rem;margin-top:.5rem}.theme-scope .range-slider-track{position:absolute;top:50%;left:0;right:0;height:.25rem;background:var(--color-border-light);border-radius:var(--radius-full);transform:translateY(-50%)}.theme-scope .range-slider-range{position:absolute;height:100%;background:var(--color-primary);border-radius:var(--radius-full)}.theme-scope .range-slider-input{position:absolute;width:100%;height:.25rem;top:50%;transform:translateY(-50%);background:rgba(0,0,0,0);pointer-events:none;appearance:none;-webkit-appearance:none;margin:0;padding:0}.theme-scope .range-slider-input::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;pointer-events:all;width:1rem;height:1rem;background:var(--color-bg-primary);border:2px solid var(--color-primary);border-radius:50%;cursor:pointer;box-shadow:var(--shadow-sm);transition:box-shadow .15s ease-in-out}.theme-scope .range-slider-input::-webkit-slider-thumb:hover{box-shadow:0 0 0 4px rgba(59,130,246,.1)}.theme-scope .range-slider-input::-webkit-slider-thumb:active{box-shadow:0 0 0 4px rgba(59,130,246,.2)}.theme-scope .range-slider-input::-moz-range-thumb{pointer-events:all;width:1rem;height:1rem;background:var(--color-bg-primary);border:2px solid var(--color-primary);border-radius:50%;cursor:pointer;box-shadow:var(--shadow-sm);transition:box-shadow .15s ease-in-out}.theme-scope .range-slider-input::-moz-range-thumb:hover{box-shadow:0 0 0 4px rgba(59,130,246,.1)}.theme-scope .range-slider-input::-moz-range-thumb:active{box-shadow:0 0 0 4px rgba(59,130,246,.2)}.theme-scope .range-slider-input:focus{outline:none}.theme-scope .range-slider-input:focus::-webkit-slider-thumb{box-shadow:0 0 0 4px rgba(59,130,246,.15)}.theme-scope .range-slider-input:focus::-moz-range-thumb{box-shadow:0 0 0 4px rgba(59,130,246,.15)}.theme-scope .range-slider-input-min{z-index:4}.theme-scope .range-slider-input-max{z-index:3}.theme-scope .code-block{position:relative;border:1px solid var(--color-code-border, var(--color-border));border-radius:var(--radius-lg);background-color:var(--color-code-bg-dark);color:var(--color-code-text-dark);margin-bottom:1.5rem;overflow:hidden}.theme-scope .code-block-header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;background-color:var(--color-code-header-bg, rgba(0, 0, 0, 0.03));border-bottom:1px solid var(--color-code-border, var(--color-border))}.theme-scope .code-block-title{font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--color-text-secondary)}.theme-scope .code-block-tabs{display:flex;gap:1rem}.theme-scope .code-block-tab{background:none;border:none;color:var(--color-text-muted);cursor:pointer;font-size:var(--text-sm);font-weight:var(--font-medium);padding:.25rem 0;position:relative;transition:color .2s}.theme-scope .code-block-tab:hover{color:var(--color-text-primary)}.theme-scope .code-block-tab.active{color:var(--color-text-primary)}.theme-scope .code-block-tab.active::after{content:\"\";position:absolute;bottom:-0.75rem;left:0;width:100%;height:1px;background-color:var(--color-primary)}.theme-scope .code-block-actions{display:flex;align-items:center;gap:.5rem}.theme-scope .code-copy-btn{background:none;border:none;color:var(--color-text-muted);cursor:pointer;padding:.25rem;border-radius:var(--radius-sm);transition:all .2s;display:flex;align-items:center;justify-content:center}.theme-scope .code-copy-btn:hover{background-color:var(--color-bg-muted);color:var(--color-text-primary)}.theme-scope .code-block-content{position:relative;padding:1rem;overflow-x:auto;font-family:var(--font-mono, ui-monospace, monospace);font-size:var(--text-sm);line-height:var(--leading-normal)}.theme-scope .code-block-content pre{margin:0;padding:0;background:rgba(0,0,0,0);color:inherit;font-family:inherit}.theme-scope .code-block-content code{font-family:inherit;color:inherit}.theme-scope .code-block.collapsed .code-block-content{max-height:150px;overflow-y:hidden}.theme-scope .code-block-expand-overlay{position:absolute;bottom:0;left:0;right:0;height:120px;background:linear-gradient(to bottom, transparent, var(--color-code-bg-dark) 90%);display:flex;align-items:center;justify-content:center;padding-top:2rem;pointer-events:none}.theme-scope .code-block-expand-btn{pointer-events:auto;background-color:var(--color-text-primary);color:var(--color-bg-primary);border:1px solid var(--color-text-primary);padding:.375rem .75rem;border-radius:var(--radius-sm);font-size:var(--text-xs);font-weight:var(--font-medium);cursor:pointer;transition:all .2s;box-shadow:0 1px 2px rgba(0,0,0,.05)}.theme-scope .code-block-expand-btn:hover{background-color:var(--color-text-neutral-dark);border-color:var(--color-text-neutral-dark)}.theme-scope .code-header-expand-btn{background:none;border:none;color:var(--color-text-muted);cursor:pointer;font-size:var(--text-xs);font-weight:var(--font-medium);padding:.25rem .5rem;border-radius:var(--radius-sm);transition:color .2s}.theme-scope .code-header-expand-btn:hover{color:var(--color-text-primary);background-color:var(--color-bg-muted)}.theme-scope .code-command{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;background-color:var(--color-code-bg-dark);color:var(--color-code-text-dark);border:1px solid var(--color-border);border-radius:var(--radius-lg);font-family:var(--font-mono, ui-monospace, monospace);font-size:var(--text-sm)}.theme-scope .code-command-text{margin-right:1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.theme-scope .code-command-prefix{color:var(--color-text-muted);margin-right:.5rem;user-select:none}.theme-scope .code-block.simple .code-copy-btn{position:absolute;top:.5rem;right:.5rem;z-index:10}.theme-scope code[class*=language-],.theme-scope pre[class*=language-]{color:var(--color-code-text-dark, #334155);text-shadow:none}.theme-scope .token.comment,.theme-scope .token.prolog,.theme-scope .token.doctype,.theme-scope .token.cdata{color:#64748b}.theme-scope .token.punctuation{color:#475569}.theme-scope .token.property,.theme-scope .token.tag,.theme-scope .token.boolean,.theme-scope .token.number,.theme-scope .token.constant,.theme-scope .token.symbol,.theme-scope .token.deleted{color:#0284c7}.theme-scope .token.selector,.theme-scope .token.attr-name,.theme-scope .token.string,.theme-scope .token.char,.theme-scope .token.builtin,.theme-scope .token.inserted{color:#059669}.theme-scope .token.operator,.theme-scope .token.entity,.theme-scope .token.url,.theme-scope .language-css .token.string,.theme-scope .style .token.string{color:#475569}.theme-scope .token.atrule,.theme-scope .token.attr-value,.theme-scope .token.keyword{color:#7c3aed}.theme-scope .token.function,.theme-scope .token.class-name{color:#2563eb}.theme-scope .token.regex,.theme-scope .token.important,.theme-scope .token.variable{color:#c2410c}.theme-scope .token.important,.theme-scope .token.bold{font-weight:bold}.theme-scope .token.italic{font-style:italic}.theme-scope .token.entity{cursor:help}.theme-scope.dark code[class*=language-],.theme-scope.dark pre[class*=language-],.dark .theme-scope code[class*=language-],.dark .theme-scope pre[class*=language-]{color:#ccc;text-shadow:none}.theme-scope.dark .token.comment,.theme-scope.dark .token.prolog,.theme-scope.dark .token.doctype,.theme-scope.dark .token.cdata,.dark .theme-scope .token.comment,.dark .theme-scope .token.prolog,.dark .theme-scope .token.doctype,.dark .theme-scope .token.cdata{color:#999}.theme-scope.dark .token.punctuation,.dark .theme-scope .token.punctuation{color:#ccc}.theme-scope.dark .token.property,.theme-scope.dark .token.tag,.theme-scope.dark .token.boolean,.theme-scope.dark .token.number,.theme-scope.dark .token.constant,.theme-scope.dark .token.symbol,.theme-scope.dark .token.deleted,.dark .theme-scope .token.property,.dark .theme-scope .token.tag,.dark .theme-scope .token.boolean,.dark .theme-scope .token.number,.dark .theme-scope .token.constant,.dark .theme-scope .token.symbol,.dark .theme-scope .token.deleted{color:#f08d49}.theme-scope.dark .token.selector,.theme-scope.dark .token.attr-name,.theme-scope.dark .token.string,.theme-scope.dark .token.char,.theme-scope.dark .token.builtin,.theme-scope.dark .token.inserted,.dark .theme-scope .token.selector,.dark .theme-scope .token.attr-name,.dark .theme-scope .token.string,.dark .theme-scope .token.char,.dark .theme-scope .token.builtin,.dark .theme-scope .token.inserted{color:#7ec699}.theme-scope.dark .token.operator,.theme-scope.dark .token.entity,.theme-scope.dark .token.url,.theme-scope.dark .language-css .token.string,.theme-scope.dark .style .token.string,.dark .theme-scope .token.operator,.dark .theme-scope .token.entity,.dark .theme-scope .token.url,.dark .theme-scope .language-css .token.string,.dark .theme-scope .style .token.string{color:#67cdcc}.theme-scope.dark .token.atrule,.theme-scope.dark .token.attr-value,.theme-scope.dark .token.keyword,.dark .theme-scope .token.atrule,.dark .theme-scope .token.attr-value,.dark .theme-scope .token.keyword{color:#cc99cd}.theme-scope.dark .token.function,.theme-scope.dark .token.class-name,.dark .theme-scope .token.function,.dark .theme-scope .token.class-name{color:#f8c555}.theme-scope.dark .token.regex,.theme-scope.dark .token.important,.theme-scope.dark .token.variable,.dark .theme-scope .token.regex,.dark .theme-scope .token.important,.dark .theme-scope .token.variable{color:#e90}.theme-scope .toast-container{position:fixed;bottom:1.5rem;right:1.5rem;z-index:100;display:flex;flex-direction:column;gap:.75rem;max-width:24rem;width:100%;pointer-events:none}.theme-scope .toast{pointer-events:auto;background-color:var(--color-bg-primary);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:1rem;box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);display:flex;align-items:flex-start;gap:.75rem;transition:all .3s ease;transform-origin:bottom right}.dark .theme-scope .toast,.theme-scope.dark .toast{background-color:var(--color-bg-secondary);box-shadow:0 4px 12px -1px rgba(0,0,0,.4),0 2px 6px -1px rgba(0,0,0,.3)}.dark .theme-scope .toast-success,.theme-scope.dark .toast-success{box-shadow:0 4px 12px -1px rgba(0,0,0,.4),0 0 20px -5px rgba(16,185,129,.2)}.dark .theme-scope .toast-error,.theme-scope.dark .toast-error{box-shadow:0 4px 12px -1px rgba(0,0,0,.4),0 0 20px -5px rgba(239,68,68,.2)}.dark .theme-scope .toast-warning,.theme-scope.dark .toast-warning{box-shadow:0 4px 12px -1px rgba(0,0,0,.4),0 0 20px -5px rgba(245,158,11,.2)}.dark .theme-scope .toast-info,.theme-scope.dark .toast-info{box-shadow:0 4px 12px -1px rgba(0,0,0,.4),0 0 20px -5px rgba(59,130,246,.2)}.theme-scope .toast-content{flex:1}.theme-scope .toast-title{font-weight:var(--font-semibold);font-size:var(--text-sm);color:var(--color-text-primary);margin-bottom:.25rem}.theme-scope .toast-description{font-size:var(--text-sm);color:var(--color-text-secondary)}.theme-scope .toast-close{color:var(--color-text-secondary);background:rgba(0,0,0,0);border:none;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;opacity:.7;transition:opacity .2s}.theme-scope .toast-close:hover{opacity:1}.theme-scope .toast-default{border-left:4px solid var(--color-border)}.theme-scope .toast-success{border-left:4px solid var(--color-success)}.theme-scope .toast-success .toast-icon{color:var(--color-success)}.theme-scope .toast-error{border-left:4px solid var(--color-danger)}.theme-scope .toast-error .toast-icon{color:var(--color-danger)}.theme-scope .toast-warning{border-left:4px solid var(--color-warning)}.theme-scope .toast-warning .toast-icon{color:var(--color-warning)}.theme-scope .toast-info{border-left:4px solid var(--color-primary)}.theme-scope .toast-info .toast-icon{color:var(--color-primary)}.theme-scope .pagination{display:flex;align-items:center;justify-content:flex-start}.theme-scope .pagination-content{display:flex;flex-direction:row;align-items:center;gap:.25rem;list-style:none;margin:0;padding:0}.theme-scope .pagination-item{display:inline-flex;align-items:center;justify-content:center;min-width:2.25rem;height:2.25rem;padding:0 .75rem;font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--color-text-primary);background-color:rgba(0,0,0,0);border-radius:var(--radius-md);text-decoration:none;transition:all .15s ease-in-out;cursor:pointer}.theme-scope .pagination-item:hover{background-color:var(--color-bg-secondary);color:var(--color-text-primary)}.theme-scope .pagination-item.active{background-color:var(--color-white);color:var(--color-text-primary);border:1px solid var(--color-border);font-weight:var(--font-semibold);box-shadow:var(--shadow-sm)}.theme-scope .pagination-item.icon-only{padding:0;width:2.25rem}.theme-scope .pagination-previous,.theme-scope .pagination-next{display:inline-flex;align-items:center;gap:.5rem;padding-left:.75rem;padding-right:.75rem;width:auto}.theme-scope .pagination-previous svg,.theme-scope .pagination-next svg{width:1rem;height:1rem}.theme-scope .pagination-ellipsis{display:flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;color:var(--color-text-muted)}.theme-scope .toggle-group{display:inline-flex;align-items:center;justify-content:center;gap:0;background-color:rgba(0,0,0,0);border-radius:var(--radius-sm);padding:0;border:1px solid var(--color-border)}.theme-scope .toggle-group-item{display:inline-flex;align-items:center;justify-content:center;border-radius:0;padding:.375rem .5rem;min-width:2rem;min-height:2rem;font-size:var(--text-sm);font-weight:400;line-height:1.25rem;color:var(--color-text-secondary);background-color:var(--color-bg-primary);border:none;border-right:1px solid var(--color-border);cursor:pointer;transition:background-color .1s ease,color .1s ease;white-space:nowrap;position:relative}.theme-scope .toggle-group-item:first-child{border-top-left-radius:.25rem;border-bottom-left-radius:.25rem}.theme-scope .toggle-group-item:last-child{border-top-right-radius:.25rem;border-bottom-right-radius:.25rem;border-right:none}.theme-scope .toggle-group-item:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px;z-index:10}.theme-scope .toggle-group-item:hover:not(:disabled):not([data-state=on]){background-color:var(--color-bg-muted)}.theme-scope .toggle-group-item[data-state=on],.theme-scope .toggle-group-item.selected{background-color:var(--color-primary-light, rgba(59, 130, 246, 0.15));color:var(--color-primary);z-index:1}.theme-scope .toggle-group-item:disabled,.theme-scope .toggle-group-item[disabled]{pointer-events:none;opacity:.38;color:var(--color-text-muted)}.theme-scope .toggle-group-item svg,.theme-scope .toggle-group-item .iconify{width:1.125rem;height:1.125rem;flex-shrink:0}.theme-scope .toggle-group-item svg+span,.theme-scope .toggle-group-item .iconify+span{margin-left:.375rem}.theme-scope .toggle-group.toggle-group-outline{background-color:rgba(0,0,0,0);border:none;padding:0;gap:2px}.theme-scope .toggle-group.toggle-group-outline .toggle-group-item{border-radius:var(--radius-sm);border:1px solid rgba(0,0,0,0);border-right:none}.theme-scope .toggle-group.toggle-group-outline .toggle-group-item:first-child{border-top-left-radius:.25rem;border-bottom-left-radius:.25rem}.theme-scope .toggle-group.toggle-group-outline .toggle-group-item:last-child{border-top-right-radius:.25rem;border-bottom-right-radius:.25rem}.theme-scope .toggle-group.toggle-group-outline .toggle-group-item:hover:not(:disabled):not([data-state=on]){background-color:var(--color-bg-muted)}.theme-scope .toggle-group.toggle-group-outline .toggle-group-item[data-state=on],.theme-scope .toggle-group.toggle-group-outline .toggle-group-item.selected{background-color:var(--color-primary-light, rgba(59, 130, 246, 0.15));color:var(--color-primary);border-color:rgba(0,0,0,0)}.theme-scope .toggle-group-sm .toggle-group-item{padding:.25rem .375rem;min-width:1.75rem;min-height:1.75rem;font-size:.8125rem}.theme-scope .toggle-group-sm .toggle-group-item svg,.theme-scope .toggle-group-sm .toggle-group-item .iconify{width:1rem;height:1rem}.theme-scope .toggle-group-lg .toggle-group-item{padding:var(--space-input-y) var(--space-input-x);min-width:2.5rem;min-height:2.5rem;font-size:.9375rem}.theme-scope .toggle-group-lg .toggle-group-item svg,.theme-scope .toggle-group-lg .toggle-group-item .iconify{width:1.25rem;height:1.25rem}.theme-scope .toggle-group-vertical{flex-direction:column}.theme-scope .toggle-group-vertical.toggle-group-outline .toggle-group-item{width:100%;margin-left:0;margin-top:-1px;border-left:none;border-top:1px solid rgba(0,0,0,0)}.theme-scope .toggle-group-vertical.toggle-group-outline .toggle-group-item:first-child{border-radius:.375rem .375rem 0 0;margin-top:0}.theme-scope .toggle-group-vertical.toggle-group-outline .toggle-group-item:last-child{border-radius:0 0 .375rem .375rem}.theme-scope .toggle-group-vertical.toggle-group-outline .toggle-group-item+.toggle-group-item{border-top:1px solid var(--color-border);border-left:none}.theme-scope .section-heading{font-size:var(--text-lg);font-weight:var(--font-semibold);color:var(--color-text-primary);margin-bottom:1rem;line-height:var(--leading-tight)}.theme-scope .section-description{font-size:var(--text-sm);color:var(--color-text-muted);margin-bottom:1rem}.theme-scope .subsection-heading{font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--color-text-secondary);margin-bottom:.5rem}.theme-scope .caption{font-size:var(--text-xs);color:var(--color-text-muted)}.theme-scope .fine-print{font-size:var(--text-sm);color:var(--color-text-muted)}.theme-scope .brand-text{font-size:var(--text-xl);font-weight:var(--font-bold);letter-spacing:-0.025em;color:var(--color-text-primary)}.theme-scope .hero-title{font-size:var(--text-4xl);font-weight:var(--font-extrabold);letter-spacing:-0.025em;color:var(--color-text-primary);line-height:1.1}@media(min-width: 768px){.theme-scope .hero-title{font-size:var(--text-5xl)}}.theme-scope .hero-accent{color:var(--color-primary)}.theme-scope .hero-description{font-size:var(--text-lg);color:var(--color-text-secondary)}.theme-scope .nav-link{display:inline-flex;align-items:center;font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--color-text-secondary);text-decoration:none;transition:color .15s ease}.theme-scope .nav-link:hover{color:var(--color-text-primary)}.theme-scope .footer-link{color:var(--color-text-secondary);text-decoration:none;transition:color .15s ease}.theme-scope .footer-link:hover{color:var(--color-primary)}.theme-scope .social-link{color:var(--color-text-muted);transition:color .15s ease}.theme-scope .social-link:hover{color:var(--color-text-secondary)}.theme-scope .badge-dark{background-color:var(--color-text-primary);color:var(--color-white);padding:.25rem .5rem;border-radius:var(--radius-lg);font-size:var(--text-xs);font-weight:var(--font-medium);display:inline-block}.theme-scope .icon-placeholder{color:var(--color-border-default);opacity:.6}.theme-scope .text-accent{color:var(--color-primary)}.theme-scope .bg-accent{background-color:var(--color-primary)}.theme-scope .bg-accent-light{background-color:var(--color-primary-ring)}.theme-scope .border-accent{border-color:var(--color-primary)}.theme-scope .loading-spinner{color:var(--color-primary);animation:spin 1s linear infinite}.theme-scope .status-dot{width:.5rem;height:.5rem;border-radius:50%}.theme-scope .status-success{background-color:var(--color-success)}.theme-scope .status-danger{background-color:var(--color-danger)}.theme-scope .status-warning{background-color:var(--color-warning)}.theme-scope .interactive-danger:hover{background-color:var(--color-danger-bg)}.theme-scope .btn-ghost-danger{color:var(--color-danger)}.theme-scope .btn-ghost-danger:hover{color:var(--color-danger);background-color:var(--color-danger-bg)}.theme-scope .text-success{color:var(--color-success)}.theme-scope .text-warning{color:var(--color-warning)}.theme-scope .text-danger{color:var(--color-danger)}.theme-scope .text-inverse{color:var(--color-white)}.theme-scope .text-muted{color:var(--color-text-muted)}.theme-scope .help-text{font-size:var(--text-sm);color:var(--color-text-muted);margin-top:.25rem}.theme-scope .demo-container{padding:2rem;border:1px solid var(--color-border);border-radius:var(--radius-lg);background-color:var(--color-bg-muted)}.theme-scope .demo-container-tall{padding:2rem;border:1px solid var(--color-border);border-radius:var(--radius-lg);background-color:var(--color-bg-muted);min-height:16rem;display:flex;align-items:flex-start;justify-content:center;position:relative;overflow:visible;z-index:10}.theme-scope .demo-container-sm{padding:1rem;border:1px solid var(--color-border);border-radius:var(--radius-lg);background-color:var(--color-bg-muted)}.theme-scope .surface{background-color:var(--color-bg-primary);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden}.theme-scope .surface-muted{background-color:var(--color-bg-muted);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden}.theme-scope .text-primary{color:var(--color-text-primary)}.theme-scope .text-secondary{color:var(--color-text-secondary)}.theme-scope .text-muted{color:var(--color-text-muted)}.theme-scope .text-accent{color:var(--color-primary)}.theme-scope .text-success{color:var(--color-success)}.theme-scope .text-danger{color:var(--color-danger)}.theme-scope .text-warning{color:var(--color-warning)}.theme-scope .bg-primary{background-color:var(--color-bg-primary)}.theme-scope .bg-muted{background-color:var(--color-bg-muted)}.theme-scope .bg-secondary{background-color:var(--color-bg-secondary)}.theme-scope .interactive{transition:background-color .15s ease,color .15s ease}.theme-scope .interactive:hover{background-color:var(--color-bg-muted)}.theme-scope .interactive-link{color:var(--color-text-secondary);transition:color .15s ease}.theme-scope .interactive-link:hover{color:var(--color-text-primary)}.theme-scope .accent-link{color:var(--color-text-secondary);transition:color .15s ease}.theme-scope .accent-link:hover{color:var(--color-primary)}.theme-scope .icon-muted{color:var(--color-text-muted)}.theme-scope .icon-interactive{color:var(--color-text-muted);transition:color .15s ease}.theme-scope .icon-interactive:hover{color:var(--color-text-secondary)}.theme-scope .icon-success{color:var(--color-success)}.theme-scope .icon-danger{color:var(--color-danger)}.theme-scope .icon-warning{color:var(--color-warning)}.theme-scope .icon-accent{color:var(--color-primary)}.theme-scope .border-light{border:1px solid var(--color-border-light)}",[],[480,498,532],"3b6f1108-ef19-11f0-a7f0-42dde27851f2","compiled-1.css","0c19512a-e2e9-11f0-b39b-42dde27851f2",138,["D",1768155209859],"/* chat-app - Generated CSS */\n:root{--color-bg-primary: #ffffff;--color-bg-secondary: #f8fafc;--color-bg-muted: #f1f5f9;--color-border: #e2e8f0;--color-border-light: #cbd5e1;--color-text-primary: #0f172a;--color-text-muted: #94a3b8;--color-primary: #3b82f6}:root.dark,.dark{--color-bg-primary: #1e293b;--color-bg-secondary: #0f172a;--color-bg-muted: #334155;--color-border: #475569;--color-border-light: #334155;--color-text-primary: #f8fafc;--color-text-muted: #94a3b8;--color-primary: #60a5fa}.theme-scope{--color-text-primary: #0f172a;--color-text-secondary: oklch(21% 0.034 264.665);--color-text-muted: #94a3b8;--color-text-neutral: #475569;--color-text-neutral-dark: #334155;--color-text-disabled: #9ca3af;--color-bg-primary: #ffffff;--color-bg-secondary: #f8fafc;--color-bg-muted: #f1f5f9;--color-bg-light: #F3F4F6;--color-bg-disabled: #f1f5f9;--color-border: #e2e8f0;--color-border-light: #cbd5e1;--color-border-tab: #e4e4e7;--color-primary: #3b82f6;--color-primary-hover: #2563eb;--color-primary-active: #1d4ed8;--color-primary-dark: #1e40af;--color-primary-light: #eff6ff;--color-primary-lighter: #dbeafe;--color-primary-lightest: #bfdbfe;--color-primary-ring: rgba(59, 130, 246, 0.3);--color-primary-text: #ffffff;--color-success: #10b981;--color-success-light: #d1fae5;--color-success-dark: #047857;--color-success-link: #059669;--color-success-link-hover: #047857;--color-success-ring: rgba(34, 197, 94, 0.3);--color-success-text: #ffffff;--color-success-200: #bbf7d0;--color-success-300: #86efac;--color-warning: #f59e0b;--color-warning-light: #fef3c7;--color-warning-dark: #92400e;--color-warning-link: #d97706;--color-warning-link-hover: #b45309;--color-warning-ring: rgba(245, 158, 11, 0.3);--color-warning-text: #ffffff;--color-warning-200: #fde68a;--color-warning-300: #fcd34d;--color-danger: #ef4444;--color-danger-light: #fee2e2;--color-danger-dark: #b91c1c;--color-danger-link: #dc2626;--color-danger-link-hover: #b91c1c;--color-danger-ring: rgba(239, 68, 68, 0.3);--color-danger-text: #ffffff;--color-danger-200: #fecaca;--color-danger-300: #fca5a5;--color-info: #0ea5e9;--color-info-light: #e0f2fe;--color-info-dark: #075985;--color-info-link: #0284c7;--color-info-link-hover: #0369a1;--color-info-ring: rgba(14, 165, 233, 0.3);--color-info-text: #ffffff;--color-info-200: #bae6fd;--color-info-300: #7dd3fc;--color-neutral: #71717a;--color-neutral-light: #f4f4f5;--color-neutral-dark: #3f3f46;--color-neutral-link: #52525b;--color-neutral-link-hover: #3f3f46;--color-neutral-ring: rgba(113, 113, 122, 0.3);--color-neutral-text: #ffffff;--color-neutral-200: #e4e4e7;--color-neutral-300: #d4d4d8;--color-code-bg: #f8fafc;--color-code-text: #be185d;--color-code-bg-dark: #f1f5f9;--color-code-text-dark: #334155;--color-code-header-bg: #e2e8f0;--color-code-border: #e2e8f0;--color-syntax-keyword: #7c3aed;--color-syntax-string: #059669;--color-syntax-number: #0284c7;--color-syntax-function: #2563eb;--color-syntax-comment: #64748b;--color-syntax-property: #c2410c;--color-syntax-punctuation: #475569;--color-tab: #71717a;--color-tab-active: #3b82f6;--color-gray-300: #d1d5db;--color-gray-400: #9ca3af;--color-white: #ffffff;--color-gray-ring: rgba(161, 161, 170, 0.2);--color-gray-ring-dark: rgba(15, 23, 42, 0.1);--color-bg-dark: #0f172a;--color-text-on-dark: #ffffff;--color-text-on-dark-muted: rgba(255, 255, 255, 0.85);--color-accent: #f59e0b;--color-accent-hover: #d97706;--color-cta: #3b82f6;--color-cta-hover: #2563eb;--color-control-border: var(--color-border-light);--color-control-border-hover: var(--color-border);--color-control-bg: var(--color-bg-primary);--color-control-bg-hover: var(--color-bg-secondary);--color-control-checked: var(--color-primary);--color-control-checked-hover: var(--color-primary-hover);--color-control-checked-border: var(--color-primary);--color-control-checkmark: #ffffff;--color-control-ring: var(--color-primary-ring);--color-toggle-bg: var(--color-border);--color-toggle-bg-checked: var(--color-primary);--color-toggle-knob: #ffffff;--color-choice-border: var(--color-border-light);--color-choice-border-hover: var(--color-border);--color-choice-border-checked: var(--color-primary);--color-choice-bg: transparent;--color-choice-bg-hover: var(--color-bg-secondary);--color-choice-bg-checked: rgba(59, 130, 246, 0.05);--color-choice-ring: var(--color-primary)}.theme-scope.dark,.dark .theme-scope{--color-text-primary: #f8fafc;--color-text-secondary: #e2e8f0;--color-text-muted: #94a3b8;--color-text-neutral: #cbd5e1;--color-text-neutral-dark: #e2e8f0;--color-text-disabled: #64748b;--color-bg-primary: #0f172a;--color-bg-secondary: #1e293b;--color-bg-muted: #334155;--color-bg-light: #1e293b;--color-bg-disabled: #1e293b;--color-border: #334155;--color-border-light: #475569;--color-border-tab: #475569;--color-primary: #60a5fa;--color-primary-hover: #3b82f6;--color-primary-active: #2563eb;--color-primary-dark: #93c5fd;--color-primary-light: rgba(59, 130, 246, 0.15);--color-primary-lighter: rgba(59, 130, 246, 0.1);--color-primary-lightest: rgba(59, 130, 246, 0.05);--color-primary-ring: rgba(96, 165, 250, 0.4);--color-primary-text: #0f172a;--color-success: #34d399;--color-success-light: rgba(16, 185, 129, 0.15);--color-success-dark: #6ee7b7;--color-success-link: #34d399;--color-success-link-hover: #6ee7b7;--color-success-ring: rgba(52, 211, 153, 0.4);--color-success-text: #0f172a;--color-success-200: rgba(16, 185, 129, 0.2);--color-success-300: rgba(16, 185, 129, 0.3);--color-warning: #fbbf24;--color-warning-light: rgba(245, 158, 11, 0.15);--color-warning-dark: #fcd34d;--color-warning-link: #fbbf24;--color-warning-link-hover: #fcd34d;--color-warning-ring: rgba(251, 191, 36, 0.4);--color-warning-text: #0f172a;--color-warning-200: rgba(245, 158, 11, 0.2);--color-warning-300: rgba(245, 158, 11, 0.3);--color-danger: #f87171;--color-danger-light: rgba(239, 68, 68, 0.15);--color-danger-dark: #fca5a5;--color-danger-link: #f87171;--color-danger-link-hover: #fca5a5;--color-danger-ring: rgba(248, 113, 113, 0.4);--color-danger-text: #0f172a;--color-danger-200: rgba(239, 68, 68, 0.2);--color-danger-300: rgba(239, 68, 68, 0.3);--color-info: #38bdf8;--color-info-light: rgba(14, 165, 233, 0.15);--color-info-dark: #7dd3fc;--color-info-link: #38bdf8;--color-info-link-hover: #7dd3fc;--color-info-ring: rgba(56, 189, 248, 0.4);--color-info-text: #0f172a;--color-info-200: rgba(14, 165, 233, 0.2);--color-info-300: rgba(14, 165, 233, 0.3);--color-neutral: #a1a1aa;--color-neutral-light: rgba(113, 113, 122, 0.15);--color-neutral-dark: #d4d4d8;--color-neutral-link: #a1a1aa;--color-neutral-link-hover: #d4d4d8;--color-neutral-ring: rgba(161, 161, 170, 0.4);--color-neutral-text: #0f172a;--color-neutral-200: rgba(113, 113, 122, 0.2);--color-neutral-300: rgba(113, 113, 122, 0.3);--color-code-bg: #1e293b;--color-code-text: #fb7185;--color-code-bg-dark: #1e293b;--color-code-text-dark: #e2e8f0;--color-code-header-bg: #334155;--color-code-border: #475569;--color-tab: #94a3b8;--color-tab-active: #60a5fa;--color-gray-300: #475569;--color-gray-400: #64748b;--color-white: #0f172a;--color-gray-ring: rgba(148, 163, 184, 0.25);--color-gray-ring-dark: rgba(248, 250, 252, 0.1);--color-bg-dark: #f8fafc;--color-text-on-dark: #0f172a;--color-text-on-dark-muted: rgba(15, 23, 42, 0.85);--color-accent: #fbbf24;--color-accent-hover: #f59e0b;--color-cta: #60a5fa;--color-cta-hover: #3b82f6;--color-control-border: var(--color-border);--color-control-border-hover: var(--color-border-light);--color-control-bg: var(--color-bg-secondary);--color-control-bg-hover: var(--color-bg-muted);--color-control-checked: var(--color-primary);--color-control-checked-hover: var(--color-primary-hover);--color-control-checked-border: var(--color-primary);--color-control-checkmark: #0f172a;--color-toggle-bg: var(--color-border-light);--color-toggle-bg-checked: var(--color-primary);--color-toggle-knob: #0f172a;--color-choice-border: var(--color-border);--color-choice-border-hover: var(--color-border-light);--color-choice-border-checked: var(--color-primary);--color-choice-bg: transparent;--color-choice-bg-hover: var(--color-bg-muted);--color-choice-bg-checked: rgba(96, 165, 250, 0.1);--color-choice-ring: var(--color-primary)}.theme-scope{--space-btn-x: 0.875rem;--space-btn-y: 0.5rem;--space-btn-sm-x: 0.5rem;--space-btn-sm-y: 0.25rem;--space-btn-icon: 0.75rem;--space-input-x: 0.75rem;--space-input-y: 0.5rem;--space-card-padding: 0.75rem;--space-tab-x: 1rem;--space-tab-y: 0.5rem;--space-tab-modern-x: 1rem;--space-tab-modern-y: 0.5rem;--space-tab-btn-x: 1.25rem;--space-tab-btn-y: 0.625rem;--space-badge-x: 0.625rem;--space-badge-y: 0.25rem;--space-badge-sm-x: 0.5rem;--space-badge-sm-y: 0.125rem;--space-dropdown-item-x: 0.75rem;--space-dropdown-item-y: 0.5rem;--space-toast-x: 1rem;--space-toast-y: 1rem;--space-copy-btn-x: 0.625rem;--space-copy-btn-y: 0.25rem;--space-accordion-x: 1rem;--space-accordion-y: 1rem;--space-table-cell-x: 0.75rem;--space-table-cell-y: 0.75rem;--space-list-item-x: 1rem;--space-list-item-y: 0.75rem;--space-pagination-x: 0.75rem;--space-pagination-y: 0.5rem;--space-toggle-x: 0.75rem;--space-toggle-y: 0.5rem;--space-gap-xs: 0.25rem;--space-gap-sm: 0.5rem;--space-gap-md: 1rem;--space-gap-lg: 1.5rem}.theme-scope{--font-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;--font-mono: 'Menlo', ui-monospace, SFMono-Regular, 'SF Mono', Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;--font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;--font-display: var(--font-sans);--font-marketing: var(--font-sans);--text-xs: 0.75rem;--text-sm: 0.875rem;--text-base: 1rem;--text-lg: 1.125rem;--text-xl: 1.25rem;--text-2xl: 1.5rem;--text-3xl: 1.875rem;--text-4xl: 2.25rem;--font-normal: 400;--font-medium: 500;--font-semibold: 600;--font-bold: 700;--leading-none: 1;--leading-tight: 1.25;--leading-snug: 1.375;--leading-normal: 1.5;--leading-relaxed: 1.625;--leading-loose: 2;--tracking-tighter: -0.05em;--tracking-tight: -0.025em;--tracking-normal: 0;--tracking-wide: 0.025em;--tracking-wider: 0.05em;--text-h1: 2rem;--text-h2: 1.5rem;--text-h3: 1.25rem;--text-h4: 1.125rem;--text-h5: 1rem;--text-h6: 0.875rem;--text-button: var(--text-sm);--text-button-sm: var(--text-xs);--text-badge: var(--text-xs);--text-input: var(--text-sm);--text-label: var(--text-sm);--text-copy-btn: var(--text-xs)}.theme-scope{--radius-none: 0;--radius-sm: 0.25rem;--radius-md: 0.375rem;--radius-lg: 0.5rem;--radius-xl: 0.75rem;--radius-2xl: 1rem;--radius-full: 9999px;--radius-button: var(--radius-md);--radius-input: var(--radius-md);--radius-card: var(--radius-lg);--radius-badge: var(--radius-md);--radius-badge-pill: var(--radius-full);--radius-dropdown: var(--radius-md);--radius-tab: var(--radius-md);--radius-tab-modern: var(--radius-md);--radius-toast: var(--radius-lg)}.theme-scope{--shadow-none: none;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);--shadow-md: 0 1px 3px 0 rgba(0, 0, 0, 0.1);--shadow-lg: 0 4px 6px -1px rgba(0, 0, 0, 0.1);--shadow-xl: 0 10px 15px -3px rgba(0, 0, 0, 0.1);--shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);--shadow-card: var(--shadow-md);--shadow-dropdown: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);--shadow-toast: 0 5px 15px -3px rgba(0, 0, 0, 0.08);--ring-width: 3px;--ring-offset: 0px}.theme-scope{font-family:var(--font-sans);color:var(--color-text-primary);line-height:1.5;background-color:var(--color-bg-primary);padding:1.25rem;border-radius:.5rem;box-sizing:border-box;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)),var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)),var(--tw-shadow)}.theme-scope *,.theme-scope *::before,.theme-scope *::after{box-sizing:border-box;border-style:none;border-width:0}.theme-scope h1,.theme-scope h2,.theme-scope h3,.theme-scope h4,.theme-scope h5,.theme-scope h6{font-weight:var(--font-semibold);line-height:var(--leading-tight);color:var(--color-text-primary);letter-spacing:-0.015em}.theme-scope h1{font-size:var(--text-h1);margin-bottom:.75rem}.theme-scope h2{font-size:var(--text-2xl);margin-bottom:.625rem}.theme-scope h3{font-size:var(--text-xl);margin-bottom:.5rem}.theme-scope h4{font-size:var(--text-lg);margin-bottom:.5rem}.theme-scope h5{font-size:var(--text-base);margin-bottom:.375rem}.theme-scope h6{font-size:var(--text-sm);margin-bottom:.25rem}.theme-scope p{margin-bottom:.75rem;color:var(--color-text-primary);line-height:1.6}.theme-scope strong,.theme-scope b{font-weight:var(--font-semibold);color:var(--color-text-primary)}.theme-scope em,.theme-scope i{font-style:italic}.theme-scope .text-display-xl{font-size:2.25rem;font-weight:var(--font-bold);color:var(--color-gray-300);letter-spacing:-0.025em;line-height:var(--leading-tight)}.theme-scope .text-display-lg{font-size:1.875rem;font-weight:var(--font-bold);color:var(--color-gray-300);letter-spacing:-0.025em;line-height:var(--leading-tight)}.theme-scope .text-display-md{font-size:var(--text-2xl);font-weight:var(--font-bold);color:var(--color-gray-300);letter-spacing:-0.025em;line-height:var(--leading-tight)}.theme-scope .text-display-sm{font-size:var(--text-xl);font-weight:var(--font-bold);color:var(--color-gray-300);letter-spacing:-0.025em;line-height:var(--leading-tight)}.theme-scope .link,.theme-scope a{color:var(--color-primary);text-decoration:none;transition:color .15s ease-in-out}.theme-scope .link:hover,.theme-scope a:hover{color:var(--color-primary-hover);text-decoration:underline}.theme-scope code{padding:.125rem .375rem;background-color:var(--color-code-bg);color:var(--color-code-text);border-radius:var(--radius-sm);font-family:var(--font-mono, ui-monospace, monospace);font-size:.875em}.theme-scope pre{padding:1rem;background-color:var(--color-code-bg-dark);color:var(--color-code-text-dark);border:1px solid var(--color-code-border, var(--color-border));border-radius:var(--radius-lg);overflow-x:auto;margin-bottom:1rem}.theme-scope pre code{padding:0;background-color:rgba(0,0,0,0);color:inherit;border-radius:0;font-size:var(--text-sm)}.theme-scope blockquote{padding-left:1rem;border-left:4px solid var(--color-border);color:var(--color-text-neutral);font-style:italic;margin-bottom:1rem}.theme-scope hr{border:none;border-top:1px solid var(--color-border);margin:1.5rem 0}.theme-scope .font-serif{font-family:ui-serif,Georgia,Cambria,\"Times New Roman\",Times,serif}.theme-scope .font-bold{font-weight:var(--font-bold)}.theme-scope .italic{font-style:italic}.theme-scope ul,.theme-scope ol{margin-bottom:1rem;padding-left:1.5rem;color:var(--color-text-neutral)}.theme-scope ul{list-style-type:disc}.theme-scope ol{list-style-type:decimal}.theme-scope li{margin-bottom:.5rem}.theme-scope ul ul,.theme-scope ol ol{margin-top:.5rem;margin-bottom:.5rem}.theme-scope .list-none{list-style-type:none;padding-left:0}.theme-scope dl{margin-bottom:1rem}.theme-scope dt{font-weight:var(--font-semibold);color:var(--color-text-primary);margin-bottom:.25rem}.theme-scope dd{margin-left:1.5rem;margin-bottom:.75rem;color:var(--color-text-secondary)}.theme-scope table{width:100%;margin-bottom:1rem}.theme-scope th{padding:.75rem;font-weight:var(--font-semibold);text-align:left;color:var(--color-text-primary);border-bottom:1px solid var(--color-border)}.theme-scope td{padding:.75rem;color:var(--color-text-neutral);border-bottom:1px solid var(--color-border)}.theme-scope tbody tr:last-child td{border-bottom:none}.theme-scope .app-table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;margin-bottom:1rem}.theme-scope .app-table th,.theme-scope .app-table td{border:none;border-bottom:1px solid var(--color-border)}.theme-scope .app-table th{background-color:var(--color-bg-secondary)}.theme-scope .app-table tbody tr:last-child td{border-bottom:none}.theme-scope .app-table th:not(:last-child),.theme-scope .app-table td:not(:last-child){border-right:1px solid var(--color-border)}.theme-scope .data-table td{padding:.25rem 1rem}.theme-scope .data-table th{padding:.5rem 1rem;height:1.3rem}.theme-scope tr:hover{background-color:var(--color-bg-secondary)}.theme-scope .table-compact{border-collapse:collapse;background-color:var(--color-bg-primary)}.theme-scope .table-compact caption{caption-side:bottom;text-align:left;color:var(--color-text-muted);font-size:var(--text-sm);padding:.75rem 1rem;margin-top:0}.theme-scope .table-compact thead{background-color:rgba(0,0,0,0)}.theme-scope .table-compact thead tr{border-bottom:1px solid var(--color-border);transition:none}.theme-scope .table-compact thead tr:hover{background-color:rgba(0,0,0,0)}.theme-scope .table-compact thead th{height:3rem;padding:.75rem 1rem;text-align:left;font-weight:var(--font-medium);color:var(--color-text-muted);font-size:var(--text-sm);vertical-align:middle;background-color:rgba(0,0,0,0);border:none;border-bottom:1px solid var(--color-border)}.theme-scope .table-compact thead th.text-right{text-align:right}.theme-scope .table-compact tbody tr{border-bottom:1px solid var(--color-border);transition:background-color .2s ease}.theme-scope .table-compact tbody tr:hover{background-color:var(--color-bg-muted)}.theme-scope .table-compact tbody tr:last-child{border-bottom:none}.theme-scope .table-compact tbody td{padding:.75rem 1rem;vertical-align:middle;border:none;color:var(--color-text-primary);font-size:var(--text-sm)}.theme-scope .table-compact tfoot{background-color:var(--color-bg-secondary);border-top:1px solid var(--color-border);font-weight:var(--font-medium)}.theme-scope .table-compact tfoot tr{border:none}.theme-scope .table-compact tfoot tr:hover{background-color:var(--color-bg-secondary)}.theme-scope .table-compact tfoot td{padding:.75rem 1rem;border:none;color:var(--color-text-primary);font-size:var(--text-sm)}.theme-scope .table-compact .table-caption{caption-side:bottom;margin-top:.5rem;padding:.75rem 1rem;text-align:center;color:var(--color-text-muted);font-size:var(--text-sm)}.theme-scope .expandable-table-container{font-size:var(--text-sm)}.theme-scope .expandable-table-header-row{display:flex;align-items:center;padding:.5rem 1rem;gap:.5rem}.theme-scope .expandable-table-header-row .exp-col-name{flex:1;min-width:0;padding-left:0}.theme-scope .expandable-table-header-row .exp-col-type{width:100px;flex-shrink:0}.theme-scope .expandable-table-header-row .exp-col-status{width:100px;flex-shrink:0}.theme-scope .expandable-table-header-row .exp-col-date{width:110px;flex-shrink:0;text-align:right}.theme-scope .expandable-row{border-bottom:none;border-bottom-width:1px;--tw-divide-y-reverse: 0;margin-bottom:0;border-radius:0;padding:0;background:var(--color-bg-primary)}.theme-scope .expandable-row:first-child{border-top-left-radius:var(--radius-md);border-top-right-radius:var(--radius-md)}.theme-scope .expandable-row:first-child summary{border-top-left-radius:var(--radius-md);border-top-right-radius:var(--radius-md)}.theme-scope .expandable-row:last-child{border-bottom:1px solid var(--color-border) !important;border-bottom-width:1px !important;border-bottom-left-radius:var(--radius-md);border-bottom-right-radius:var(--radius-md)}.theme-scope .expandable-row:not(:first-child):not(:last-child){border-radius:0}.theme-scope .expandable-row:not(:first-child):not(:last-child) summary{border-radius:0}.theme-scope .expandable-row summary{display:flex;align-items:center;padding:.5rem 1rem;gap:.5rem;cursor:pointer;transition:background-color .15s ease;border-radius:0;margin-bottom:0 !important}.theme-scope .expandable-row summary:hover{background-color:var(--color-bg-muted)}.theme-scope .expandable-row summary .exp-col-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.theme-scope .expandable-row summary .exp-col-type{width:100px;flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.theme-scope .expandable-row summary .exp-col-status{width:100px;flex-shrink:0}.theme-scope .expandable-row summary .exp-col-date{width:110px;flex-shrink:0;text-align:right;white-space:nowrap;color:var(--color-text-muted)}.theme-scope .expandable-row[open] summary{background-color:var(--color-bg-muted);border-bottom:1px solid var(--color-border)}.theme-scope .expandable-row-content{padding:1rem 1rem 1rem 2.5rem}.theme-scope input[type=text],.theme-scope input[type=email],.theme-scope input[type=password],.theme-scope input[type=number],.theme-scope input[type=url],.theme-scope input[type=search],.theme-scope input[type=tel],.theme-scope input[type=date],.theme-scope input[type=time],.theme-scope input[type=datetime-local],.theme-scope input[type=month],.theme-scope input[type=week],.theme-scope input[type=file],.theme-scope textarea,.theme-scope select,.theme-scope .form-input,.theme-scope .form-select{display:block;width:100%;margin:0;padding:.5rem .625rem;font-size:var(--text-sm);line-height:var(--leading-normal);color:var(--color-text-primary);background-color:var(--color-bg-primary);border:1px solid var(--color-border-light);border-radius:var(--radius-md);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.theme-scope .form-input.pl-10{padding-left:2.5rem}.theme-scope .form-input.rounded-none,.theme-scope textarea.form-input.rounded-none,.theme-scope input.form-input.rounded-none{border-radius:0}.theme-scope .form-input.rounded-t-none,.theme-scope textarea.form-input.rounded-t-none,.theme-scope input.form-input.rounded-t-none{border-top-left-radius:0;border-top-right-radius:0}.theme-scope .form-input.rounded-b-none,.theme-scope textarea.form-input.rounded-b-none,.theme-scope input.form-input.rounded-b-none{border-bottom-left-radius:0;border-bottom-right-radius:0}.theme-scope input[type=text]:focus,.theme-scope input[type=email]:focus,.theme-scope input[type=password]:focus,.theme-scope input[type=number]:focus,.theme-scope input[type=url]:focus,.theme-scope input[type=search]:focus,.theme-scope input[type=tel]:focus,.theme-scope input[type=date]:focus,.theme-scope input[type=time]:focus,.theme-scope input[type=datetime-local]:focus,.theme-scope input[type=month]:focus,.theme-scope input[type=week]:focus,.theme-scope input[type=file]:focus,.theme-scope textarea:focus,.theme-scope select:focus,.theme-scope .form-input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(59,130,246,.1)}.theme-scope input[type=text]:disabled,.theme-scope input[type=email]:disabled,.theme-scope input[type=password]:disabled,.theme-scope input[type=number]:disabled,.theme-scope input[type=url]:disabled,.theme-scope input[type=search]:disabled,.theme-scope input[type=tel]:disabled,.theme-scope input[type=date]:disabled,.theme-scope input[type=time]:disabled,.theme-scope input[type=datetime-local]:disabled,.theme-scope input[type=month]:disabled,.theme-scope input[type=week]:disabled,.theme-scope input[type=file]:disabled,.theme-scope textarea:disabled,.theme-scope select:disabled,.theme-scope .form-input:disabled{background-color:var(--color-bg-secondary);color:var(--color-text-muted);cursor:not-allowed}.theme-scope input[readonly],.theme-scope textarea[readonly],.theme-scope .form-input[readonly]{background-color:var(--color-bg-secondary);color:var(--color-text-secondary)}.theme-scope textarea{resize:vertical;min-height:80px;overflow:hidden}.theme-scope textarea.no-auto-grow{resize:both;overflow:auto}.theme-scope select,.theme-scope .form-select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Cpath fill='%236b7280' d='M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right .5rem center;background-size:1.25rem 1.25rem;padding-right:2.5rem}.theme-scope select:disabled,.theme-scope .form-select:disabled{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Cpath fill='%23cbd5e1' d='M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z'/%3E%3C/svg%3E\")}.theme-scope label,.theme-scope .form-label{display:block;margin-bottom:.5rem;font-weight:var(--font-medium);color:var(--color-text-primary);font-size:var(--text-sm)}.theme-scope .form-label-inline,.theme-scope .form-label.inline{display:inline;margin-bottom:0}.theme-scope .field-check,.theme-scope label.field-check{display:flex;align-items:flex-start;gap:.5rem;cursor:pointer;margin-bottom:0}.theme-scope .field-check.items-center{align-items:center}.theme-scope .field-check input[type=checkbox],.theme-scope .field-check input[type=radio]{margin-top:.125rem;flex-shrink:0}.theme-scope .field-check.items-center input[type=checkbox],.theme-scope .field-check.items-center input[type=radio]{margin-top:0}.theme-scope .field-check>span,.theme-scope .field-check>div{flex:1}.theme-scope .field-check .field-check-label{font-weight:var(--font-medium);font-size:var(--text-sm);color:var(--color-text-primary);line-height:1.25}.theme-scope .field-check .field-check-description{font-size:var(--text-sm);color:var(--color-text-muted);margin-top:.25rem}.theme-scope input[type=checkbox],.theme-scope input[type=radio],.theme-scope .form-checkbox,.theme-scope .form-radio{display:inline-block;width:1rem;height:1rem;min-width:1rem;flex-shrink:0;background-color:var(--color-control-bg);border:1px solid var(--color-control-border);border-radius:var(--radius-sm);cursor:pointer;transition:all .15s ease-in-out;accent-color:var(--color-control-checked)}.theme-scope input[type=radio]{border-radius:50%}.theme-scope input[type=checkbox]:hover,.theme-scope input[type=radio]:hover{background-color:var(--color-control-bg-hover);border-color:var(--color-control-border-hover)}.theme-scope input[type=checkbox]:checked,.theme-scope input[type=radio]:checked{background-color:var(--color-control-checked);border-color:var(--color-control-checked-border)}.theme-scope input[type=checkbox]:checked:hover,.theme-scope input[type=radio]:checked:hover{background-color:var(--color-control-checked-hover);border-color:var(--color-control-checked-hover)}.theme-scope input[type=checkbox]:focus,.theme-scope input[type=radio]:focus{outline:none;box-shadow:0 0 0 3px var(--color-control-ring)}.theme-scope input[type=range],.theme-scope .form-range{width:100%;height:.25rem;background:var(--color-border-light);border-radius:var(--radius-full);outline:none;cursor:pointer;appearance:none;-webkit-appearance:none}.theme-scope input[type=range]::-webkit-slider-runnable-track,.theme-scope .form-range::-webkit-slider-runnable-track{width:100%;height:.25rem;background:var(--color-border-light);border-radius:var(--radius-full)}.theme-scope input[type=range]::-webkit-slider-thumb,.theme-scope .form-range::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:1rem;height:1rem;background:var(--color-bg-primary);border:2px solid var(--color-primary);border-radius:50%;cursor:pointer;margin-top:-0.375rem;box-shadow:var(--shadow-sm);transition:box-shadow .15s ease-in-out}.theme-scope input[type=range]::-webkit-slider-thumb:hover,.theme-scope .form-range::-webkit-slider-thumb:hover{box-shadow:0 0 0 4px rgba(59,130,246,.1)}.theme-scope input[type=range]::-webkit-slider-thumb:active,.theme-scope .form-range::-webkit-slider-thumb:active{box-shadow:0 0 0 4px rgba(59,130,246,.2)}.theme-scope input[type=range]::-moz-range-track,.theme-scope .form-range::-moz-range-track{width:100%;height:.25rem;background:var(--color-border-light);border-radius:var(--radius-full);border:none}.theme-scope input[type=range]::-moz-range-thumb,.theme-scope .form-range::-moz-range-thumb{width:1rem;height:1rem;background:var(--color-bg-primary);border:2px solid var(--color-primary);border-radius:50%;cursor:pointer;box-shadow:var(--shadow-sm);transition:box-shadow .15s ease-in-out}.theme-scope input[type=range]::-moz-range-thumb:hover,.theme-scope .form-range::-moz-range-thumb:hover{box-shadow:0 0 0 4px rgba(59,130,246,.1)}.theme-scope input[type=range]::-moz-range-thumb:active,.theme-scope .form-range::-moz-range-thumb:active{box-shadow:0 0 0 4px rgba(59,130,246,.2)}.theme-scope input[type=range]:focus,.theme-scope .form-range:focus{outline:none}.theme-scope input[type=range]:focus::-webkit-slider-thumb,.theme-scope .form-range:focus::-webkit-slider-thumb{box-shadow:0 0 0 4px rgba(59,130,246,.15)}.theme-scope input[type=range]:focus::-moz-range-thumb,.theme-scope .form-range:focus::-moz-range-thumb{box-shadow:0 0 0 4px rgba(59,130,246,.15)}.theme-scope input[type=checkbox].form-toggle{appearance:none;width:2.75rem;height:1.5rem;background-color:var(--color-toggle-bg);border-radius:var(--radius-full);position:relative;cursor:pointer;outline:none;transition:background-color .2s ease-in-out;border:none;flex-shrink:0;box-sizing:border-box;margin:0}.theme-scope .form-toggle::after{content:\"\";position:absolute;top:.125rem;left:.125rem;width:1.25rem;height:1.25rem;background-color:var(--color-toggle-knob);border-radius:50%;box-shadow:var(--shadow-sm);transition:transform .2s ease-in-out}.theme-scope input[type=checkbox].form-toggle:checked{background-color:var(--color-toggle-bg-checked);border-color:rgba(0,0,0,0)}.theme-scope .form-toggle:checked::after{transform:translateX(1.25rem)}.theme-scope input[type=checkbox].form-toggle:focus{box-shadow:0 0 0 3px var(--color-control-ring)}.theme-scope input[type=checkbox].form-toggle:disabled{opacity:.5;cursor:not-allowed}.theme-scope .input-group{display:flex;position:relative;width:100%;align-items:stretch}.theme-scope .input-group-text{display:flex;align-items:center;padding:.5rem .625rem;font-size:var(--text-sm);font-weight:400;line-height:var(--leading-normal);color:var(--color-text-secondary);text-align:center;white-space:nowrap;background-color:var(--color-bg-secondary);border:1px solid var(--color-border-light);border-radius:var(--radius-md)}.theme-scope label.input-group-text,.theme-scope .form-label.input-group-text,.theme-scope .input-group-text label,.theme-scope .input-group-text .form-label{margin-bottom:0}.theme-scope .input-group .form-input,.theme-scope .input-group .form-select{flex:1 1 auto;width:1%;min-width:0;border-radius:var(--radius-md)}.theme-scope .input-group textarea{min-height:auto;height:auto}.theme-scope .input-group>:not(:first-child){margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0}.theme-scope .input-group>:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.theme-scope .input-group .form-input:focus,.theme-scope .input-group .form-select:focus,.theme-scope .input-group .btn-primary:focus,.theme-scope .input-group .btn-secondary:focus,.theme-scope .input-group .action-btn:focus{z-index:20;position:relative}.theme-scope .input-group .btn-primary,.theme-scope .input-group .btn-secondary,.theme-scope .input-group .action-btn{position:relative;z-index:10}.theme-scope .btn-primary,.theme-scope .action-btn{display:inline-flex;align-items:center;justify-content:center;padding:var(--space-btn-y) var(--space-btn-x);font-size:var(--text-button);font-weight:var(--font-medium);line-height:var(--leading-normal);color:var(--color-primary-text);background-color:var(--color-primary);border:1px solid var(--color-primary);border-radius:var(--radius-button);cursor:pointer;transition:all .15s ease-in-out;text-decoration:none}.theme-scope .btn-primary:hover,.theme-scope .action-btn:hover{background-color:var(--color-primary-hover);border-color:var(--color-primary-hover)}.theme-scope .btn-primary:focus,.theme-scope .action-btn:focus{outline:none;box-shadow:0 0 0 var(--ring-width) var(--color-primary-ring)}.theme-scope .btn-primary:active,.theme-scope .action-btn:active{background-color:var(--color-primary-active);border-color:var(--color-primary-active)}.theme-scope .btn-primary:disabled,.theme-scope .action-btn:disabled{background-color:var(--color-bg-disabled);border-color:var(--color-border);color:var(--color-text-disabled);cursor:not-allowed;opacity:.6}.theme-scope .btn-primary.btn-icon,.theme-scope .action-btn.btn-icon{padding:var(--space-btn-icon);border-radius:var(--radius-2xl);min-width:44px;aspect-ratio:1}.theme-scope .btn-secondary{display:inline-flex;align-items:center;justify-content:center;padding:var(--space-btn-y) var(--space-btn-x);font-size:var(--text-button);font-weight:var(--font-medium);line-height:var(--leading-normal);color:var(--color-primary);background-color:var(--color-primary-light);border:1px solid currentColor;box-shadow:inset 0 0 0 1px currentColor;border-radius:var(--radius-button);cursor:pointer;transition:all .15s ease-in-out;text-decoration:none}.theme-scope .btn-secondary:hover{background-color:var(--color-primary-lighter);color:var(--color-primary-hover)}.theme-scope .btn-secondary:focus{outline:none;box-shadow:inset 0 0 0 1px currentColor,0 0 0 var(--ring-width) var(--color-primary-ring)}.theme-scope .btn-secondary:active{background-color:var(--color-primary-lightest);color:var(--color-primary-active)}.theme-scope .btn-secondary:disabled{background-color:var(--color-bg-secondary);color:var(--color-text-disabled);cursor:not-allowed;opacity:.6}.theme-scope .btn-tertiary{display:inline-flex;align-items:center;justify-content:center;padding:var(--space-btn-y) var(--space-btn-x);font-size:var(--text-button);font-weight:var(--font-medium);line-height:var(--leading-normal);color:var(--color-primary);background-color:rgba(0,0,0,0);border:1px solid var(--color-primary);border-radius:var(--radius-button);cursor:pointer;transition:all .15s ease-in-out;text-decoration:none}.theme-scope .btn-tertiary:hover{background-color:var(--color-bg-secondary);color:var(--color-primary-hover);border-color:var(--color-primary-hover)}.theme-scope .btn-tertiary:focus{outline:none;box-shadow:0 0 0 var(--ring-width) var(--color-primary-ring)}.theme-scope .btn-tertiary:active{background-color:var(--color-bg-muted);color:var(--color-primary-active);border-color:var(--color-primary-active)}.theme-scope .btn-tertiary:disabled{background-color:rgba(0,0,0,0);border-color:var(--color-border);color:var(--color-text-disabled);cursor:not-allowed;opacity:.6}.theme-scope .btn-link{display:inline-flex;align-items:center;justify-content:center;padding:var(--space-btn-y) var(--space-btn-x);font-size:var(--text-button);font-weight:var(--font-medium);line-height:var(--leading-normal);color:var(--color-primary);background-color:rgba(0,0,0,0);border:none;border-radius:var(--radius-button);cursor:pointer;transition:all .15s ease-in-out;text-decoration:none}.theme-scope .btn-link:hover{color:var(--color-primary-hover);text-decoration:underline;background-color:var(--color-bg-secondary)}.theme-scope .btn-link:focus{outline:none;box-shadow:0 0 0 var(--ring-width) var(--color-primary-ring)}.theme-scope .btn-link:active{color:var(--color-primary-active)}.theme-scope .btn-link:disabled{color:var(--color-text-disabled);cursor:not-allowed;text-decoration:none;opacity:.6}.theme-scope .btn-ghost{display:inline-flex;align-items:center;justify-content:center;padding:var(--space-btn-y) var(--space-btn-x);font-size:var(--text-button);font-weight:var(--font-medium);line-height:var(--leading-normal);color:var(--color-text-primary);background-color:rgba(0,0,0,0);border:1px solid rgba(0,0,0,0);border-radius:var(--radius-button);cursor:pointer;transition:all .15s ease-in-out;text-decoration:none}.theme-scope .btn-ghost:hover{background-color:var(--color-bg-secondary);color:var(--color-text-primary)}.theme-scope .btn-ghost:focus{outline:none;background-color:var(--color-bg-secondary);box-shadow:0 0 0 var(--ring-width) var(--color-gray-ring)}.theme-scope .btn-ghost:active{background-color:var(--color-bg-muted)}.theme-scope .btn-ghost:disabled{color:var(--color-text-disabled);cursor:not-allowed;background-color:rgba(0,0,0,0);opacity:.6}.theme-scope .copy-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-gap-sm);padding:var(--space-copy-btn-y) var(--space-copy-btn-x);font-size:var(--text-copy-btn);font-weight:var(--font-medium);line-height:var(--leading-normal);color:var(--color-text-primary);background-color:var(--color-white);border:1px solid var(--color-border);border-radius:var(--radius-button);cursor:pointer;transition:all .15s ease-in-out;text-decoration:none}.theme-scope .copy-button:hover{background-color:var(--color-bg-secondary);border-color:var(--color-border-light)}.theme-scope .copy-button:focus{outline:none;box-shadow:0 0 0 var(--ring-width) var(--color-primary-ring)}.theme-scope .copy-button:active{background-color:var(--color-bg-muted)}.theme-scope .copy-button-copied{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-gap-sm);padding:var(--space-copy-btn-y) var(--space-copy-btn-x);font-size:var(--text-copy-btn);font-weight:var(--font-medium);line-height:var(--leading-normal);color:var(--color-success-text);background-color:var(--color-success);border:1px solid var(--color-success);border-radius:var(--radius-button);cursor:pointer;transition:all .15s ease-in-out;text-decoration:none}.theme-scope .copy-button-copied:hover{background-color:var(--color-success-link);border-color:var(--color-success-link)}.theme-scope .btn-group{display:inline-flex;isolation:isolate;vertical-align:middle}.theme-scope .btn-group>.dropdown{display:flex}.theme-scope .btn-group>.btn-primary,.theme-scope .btn-group>.btn-secondary,.theme-scope .btn-group>.btn-tertiary,.theme-scope .btn-group>.btn-danger,.theme-scope .btn-group>.btn-success,.theme-scope .btn-group>.btn-warning,.theme-scope .btn-group>.btn-info,.theme-scope .btn-group>.btn-neutral,.theme-scope .btn-group>.btn-gray,.theme-scope .btn-group>.btn-danger-secondary,.theme-scope .btn-group>.btn-success-secondary,.theme-scope .btn-group>.btn-warning-secondary,.theme-scope .btn-group>.btn-info-secondary,.theme-scope .btn-group>.btn-neutral-secondary,.theme-scope .btn-group>.btn-gray-secondary,.theme-scope .btn-group>.dropdown>.btn-primary,.theme-scope .btn-group>.dropdown>.btn-secondary,.theme-scope .btn-group>.dropdown>.btn-tertiary,.theme-scope .btn-group>.dropdown>.btn-danger,.theme-scope .btn-group>.dropdown>.btn-success,.theme-scope .btn-group>.dropdown>.btn-warning,.theme-scope .btn-group>.dropdown>.btn-info,.theme-scope .btn-group>.dropdown>.btn-neutral,.theme-scope .btn-group>.dropdown>.btn-gray,.theme-scope .btn-group>.dropdown>.btn-danger-secondary,.theme-scope .btn-group>.dropdown>.btn-success-secondary,.theme-scope .btn-group>.dropdown>.btn-warning-secondary,.theme-scope .btn-group>.dropdown>.btn-info-secondary,.theme-scope .btn-group>.dropdown>.btn-neutral-secondary,.theme-scope .btn-group>.dropdown>.btn-gray-secondary,.theme-scope .btn-group>.action-btn{position:relative;border-width:1px !important;box-shadow:none !important}.theme-scope .btn-group>.btn-secondary:not(:first-child),.theme-scope .btn-group>.btn-danger-secondary:not(:first-child),.theme-scope .btn-group>.btn-success-secondary:not(:first-child),.theme-scope .btn-group>.btn-warning-secondary:not(:first-child),.theme-scope .btn-group>.btn-info-secondary:not(:first-child),.theme-scope .btn-group>.btn-neutral-secondary:not(:first-child),.theme-scope .btn-group>.btn-gray-secondary:not(:first-child),.theme-scope .btn-group>.dropdown>.btn-secondary,.theme-scope .btn-group>.dropdown>.btn-danger-secondary,.theme-scope .btn-group>.dropdown>.btn-success-secondary,.theme-scope .btn-group>.dropdown>.btn-warning-secondary,.theme-scope .btn-group>.dropdown>.btn-info-secondary,.theme-scope .btn-group>.dropdown>.btn-neutral-secondary,.theme-scope .btn-group>.dropdown>.btn-gray-secondary{border-left-width:1px !important}.theme-scope .btn-group>*:not(:first-child){margin-left:-1px}.theme-scope .btn-group>.btn-primary:first-child,.theme-scope .btn-group>.btn-secondary:first-child,.theme-scope .btn-group>.btn-tertiary:first-child,.theme-scope .btn-group>.btn-danger:first-child,.theme-scope .btn-group>.btn-success:first-child,.theme-scope .btn-group>.btn-warning:first-child,.theme-scope .btn-group>.btn-info:first-child,.theme-scope .btn-group>.btn-neutral:first-child,.theme-scope .btn-group>.btn-gray:first-child,.theme-scope .btn-group>.btn-danger-secondary:first-child,.theme-scope .btn-group>.btn-success-secondary:first-child,.theme-scope .btn-group>.btn-warning-secondary:first-child,.theme-scope .btn-group>.btn-info-secondary:first-child,.theme-scope .btn-group>.btn-neutral-secondary:first-child,.theme-scope .btn-group>.btn-gray-secondary:first-child,.theme-scope .btn-group>.dropdown:first-child>.btn-primary,.theme-scope .btn-group>.dropdown:first-child>.btn-secondary,.theme-scope .btn-group>.dropdown:first-child>.btn-tertiary,.theme-scope .btn-group>.dropdown:first-child>.btn-danger,.theme-scope .btn-group>.dropdown:first-child>.btn-success,.theme-scope .btn-group>.dropdown:first-child>.btn-warning,.theme-scope .btn-group>.dropdown:first-child>.btn-info,.theme-scope .btn-group>.dropdown:first-child>.btn-neutral,.theme-scope .btn-group>.dropdown:first-child>.btn-gray,.theme-scope .btn-group>.dropdown:first-child>.btn-danger-secondary,.theme-scope .btn-group>.dropdown:first-child>.btn-success-secondary,.theme-scope .btn-group>.dropdown:first-child>.btn-warning-secondary,.theme-scope .btn-group>.dropdown:first-child>.btn-info-secondary,.theme-scope .btn-group>.dropdown:first-child>.btn-neutral-secondary,.theme-scope .btn-group>.dropdown:first-child>.btn-gray-secondary{border-top-right-radius:0;border-bottom-right-radius:0}.theme-scope .btn-group>.btn-primary:last-child,.theme-scope .btn-group>.btn-secondary:last-child,.theme-scope .btn-group>.btn-tertiary:last-child,.theme-scope .btn-group>.btn-danger:last-child,.theme-scope .btn-group>.btn-success:last-child,.theme-scope .btn-group>.btn-warning:last-child,.theme-scope .btn-group>.btn-info:last-child,.theme-scope .btn-group>.btn-neutral:last-child,.theme-scope .btn-group>.btn-gray:last-child,.theme-scope .btn-group>.btn-danger-secondary:last-child,.theme-scope .btn-group>.btn-success-secondary:last-child,.theme-scope .btn-group>.btn-warning-secondary:last-child,.theme-scope .btn-group>.btn-info-secondary:last-child,.theme-scope .btn-group>.btn-neutral-secondary:last-child,.theme-scope .btn-group>.btn-gray-secondary:last-child,.theme-scope .btn-group>.dropdown:last-child>.btn-primary,.theme-scope .btn-group>.dropdown:last-child>.btn-secondary,.theme-scope .btn-group>.dropdown:last-child>.btn-tertiary,.theme-scope .btn-group>.dropdown:last-child>.btn-danger,.theme-scope .btn-group>.dropdown:last-child>.btn-success,.theme-scope .btn-group>.dropdown:last-child>.btn-warning,.theme-scope .btn-group>.dropdown:last-child>.btn-info,.theme-scope .btn-group>.dropdown:last-child>.btn-neutral,.theme-scope .btn-group>.dropdown:last-child>.btn-gray,.theme-scope .btn-group>.dropdown:last-child>.btn-danger-secondary,.theme-scope .btn-group>.dropdown:last-child>.btn-success-secondary,.theme-scope .btn-group>.dropdown:last-child>.btn-warning-secondary,.theme-scope .btn-group>.dropdown:last-child>.btn-info-secondary,.theme-scope .btn-group>.dropdown:last-child>.btn-neutral-secondary,.theme-scope .btn-group>.dropdown:last-child>.btn-gray-secondary{border-top-left-radius:0;border-bottom-left-radius:0}.theme-scope .btn-group>.btn-primary:not(:first-child):not(:last-child),.theme-scope .btn-group>.btn-secondary:not(:first-child):not(:last-child),.theme-scope .btn-group>.btn-tertiary:not(:first-child):not(:last-child),.theme-scope .btn-group>.btn-danger:not(:first-child):not(:last-child),.theme-scope .btn-group>.btn-success:not(:first-child):not(:last-child),.theme-scope .btn-group>.btn-warning:not(:first-child):not(:last-child),.theme-scope .btn-group>.btn-info:not(:first-child):not(:last-child),.theme-scope .btn-group>.btn-neutral:not(:first-child):not(:last-child),.theme-scope .btn-group>.btn-gray:not(:first-child):not(:last-child),.theme-scope .btn-group>.btn-danger-secondary:not(:first-child):not(:last-child),.theme-scope .btn-group>.btn-success-secondary:not(:first-child):not(:last-child),.theme-scope .btn-group>.btn-warning-secondary:not(:first-child):not(:last-child),.theme-scope .btn-group>.btn-info-secondary:not(:first-child):not(:last-child),.theme-scope .btn-group>.btn-neutral-secondary:not(:first-child):not(:last-child),.theme-scope .btn-group>.btn-gray-secondary:not(:first-child):not(:last-child),.theme-scope .btn-group>.dropdown:not(:first-child):not(:last-child)>.btn-primary,.theme-scope .btn-group>.dropdown:not(:first-child):not(:last-child)>.btn-secondary,.theme-scope .btn-group>.dropdown:not(:first-child):not(:last-child)>.btn-tertiary,.theme-scope .btn-group>.dropdown:not(:first-child):not(:last-child)>.btn-danger,.theme-scope .btn-group>.dropdown:not(:first-child):not(:last-child)>.btn-success,.theme-scope .btn-group>.dropdown:not(:first-child):not(:last-child)>.btn-warning,.theme-scope .btn-group>.dropdown:not(:first-child):not(:last-child)>.btn-info,.theme-scope .btn-group>.dropdown:not(:first-child):not(:last-child)>.btn-neutral,.theme-scope .btn-group>.dropdown:not(:first-child):not(:last-child)>.btn-gray,.theme-scope .btn-group>.dropdown:not(:first-child):not(:last-child)>.btn-danger-secondary,.theme-scope .btn-group>.dropdown:not(:first-child):not(:last-child)>.btn-success-secondary,.theme-scope .btn-group>.dropdown:not(:first-child):not(:last-child)>.btn-warning-secondary,.theme-scope .btn-group>.dropdown:not(:first-child):not(:last-child)>.btn-info-secondary,.theme-scope .btn-group>.dropdown:not(:first-child):not(:last-child)>.btn-neutral-secondary,.theme-scope .btn-group>.dropdown:not(:first-child):not(:last-child)>.btn-gray-secondary{border-radius:0}.theme-scope .btn-group>*:hover,.theme-scope .btn-group>.dropdown:hover{z-index:2}.theme-scope .btn-group>*:focus,.theme-scope .btn-group>.dropdown:focus-within{z-index:3}.theme-scope .btn-icon-only{padding:var(--space-btn-icon);aspect-ratio:1;display:inline-flex;align-items:center;justify-content:center}.theme-scope .btn-sm,.theme-scope .btn-short{font-size:.75rem !important;padding:var(--space-btn-sm-y) var(--space-btn-sm-x) !important;line-height:1.25 !important}.theme-scope .btn-danger-soft{display:inline-flex;align-items:center;justify-content:center;padding:var(--space-btn-y) var(--space-btn-x);font-size:var(--text-button);font-weight:var(--font-medium);line-height:var(--leading-normal);color:var(--color-danger-link);background-color:var(--color-danger-light);border:1px solid rgba(0,0,0,0);border-radius:var(--radius-button);cursor:pointer;transition:all .15s ease-in-out;text-decoration:none}.theme-scope .btn-danger-soft:hover{background-color:#fecaca;color:var(--color-danger-link-hover)}.theme-scope .btn-danger-soft:focus{outline:none;box-shadow:0 0 0 var(--ring-width) var(--color-danger-ring)}.theme-scope .btn-danger-soft:active{background-color:#fca5a5}.theme-scope .btn-danger-soft:disabled{background-color:var(--color-bg-secondary);color:var(--color-text-disabled);cursor:not-allowed}.theme-scope .btn-success-soft{display:inline-flex;align-items:center;justify-content:center;padding:var(--space-btn-y) var(--space-btn-x);font-size:var(--text-button);font-weight:var(--font-medium);line-height:var(--leading-normal);color:var(--color-success-link);background-color:var(--color-success-light);border:1px solid rgba(0,0,0,0);border-radius:var(--radius-button);cursor:pointer;transition:all .15s ease-in-out;text-decoration:none}.theme-scope .btn-success-soft:hover{background-color:#bbf7d0;color:var(--color-success-link-hover)}.theme-scope .btn-success-soft:focus{outline:none;box-shadow:0 0 0 var(--ring-width) var(--color-success-ring)}.theme-scope .btn-success-soft:active{background-color:#86efac}.theme-scope .btn-success-soft:disabled{background-color:var(--color-bg-secondary);color:var(--color-text-disabled);cursor:not-allowed}.theme-scope .btn-warning-soft{display:inline-flex;align-items:center;justify-content:center;padding:var(--space-btn-y) var(--space-btn-x);font-size:var(--text-button);font-weight:var(--font-medium);line-height:var(--leading-normal);color:var(--color-warning-link);background-color:var(--color-warning-light);border:1px solid rgba(0,0,0,0);border-radius:var(--radius-button);cursor:pointer;transition:all .15s ease-in-out;text-decoration:none}.theme-scope .btn-warning-soft:hover{background-color:#fde68a;color:var(--color-warning-link-hover)}.theme-scope .btn-warning-soft:focus{outline:none;box-shadow:0 0 0 var(--ring-width) var(--color-warning-ring)}.theme-scope .btn-warning-soft:active{background-color:#fcd34d}.theme-scope .btn-warning-soft:disabled{background-color:var(--color-bg-secondary);color:var(--color-text-disabled);cursor:not-allowed}.theme-scope .btn-info-soft{display:inline-flex;align-items:center;justify-content:center;padding:var(--space-btn-y) var(--space-btn-x);font-size:var(--text-button);font-weight:var(--font-medium);line-height:var(--leading-normal);color:var(--color-info-link);background-color:var(--color-info-light);border:1px solid rgba(0,0,0,0);border-radius:var(--radius-button);cursor:pointer;transition:all .15s ease-in-out;text-decoration:none}.theme-scope .btn-info-soft:hover{background-color:#bae6fd;color:var(--color-info-link-hover)}.theme-scope .btn-info-soft:focus{outline:none;box-shadow:0 0 0 var(--ring-width) var(--color-info-ring)}.theme-scope .btn-info-soft:active{background-color:#7dd3fc}.theme-scope .btn-info-soft:disabled{background-color:var(--color-bg-secondary);color:var(--color-text-disabled);cursor:not-allowed}.theme-scope .btn-neutral-soft{display:inline-flex;align-items:center;justify-content:center;padding:var(--space-btn-y) var(--space-btn-x);font-size:var(--text-button);font-weight:var(--font-medium);line-height:var(--leading-normal);color:var(--color-neutral-link);background-color:var(--color-neutral-light);border:1px solid rgba(0,0,0,0);border-radius:var(--radius-button);cursor:pointer;transition:all .15s ease-in-out;text-decoration:none}.theme-scope .btn-neutral-soft:hover{background-color:#e4e4e7;color:var(--color-neutral-link-hover)}.theme-scope .btn-neutral-soft:focus{outline:none;box-shadow:0 0 0 var(--ring-width) var(--color-neutral-ring)}.theme-scope .btn-neutral-soft:active{background-color:#d4d4d8}.theme-scope .btn-neutral-soft:disabled{background-color:var(--color-bg-secondary);color:var(--color-text-disabled);cursor:not-allowed}.theme-scope .btn-gray-soft{display:inline-flex;align-items:center;justify-content:center;padding:var(--space-btn-y) var(--space-btn-x);font-size:var(--text-button);font-weight:var(--font-medium);line-height:var(--leading-normal);color:var(--color-text-primary);background-color:var(--color-bg-secondary);border:1px solid rgba(0,0,0,0);border-radius:var(--radius-button);cursor:pointer;transition:all .15s ease-in-out;text-decoration:none}.theme-scope .btn-gray-soft:hover{background-color:var(--color-border)}.theme-scope .btn-gray-soft:focus{outline:none;box-shadow:0 0 0 var(--ring-width) var(--color-gray-ring-dark)}.theme-scope .btn-gray-soft:active{background-color:var(--color-border-light)}.theme-scope .btn-gray-soft:disabled{background-color:var(--color-bg-muted);color:var(--color-text-muted);cursor:not-allowed}.theme-scope .btn-danger{display:inline-flex;align-items:center;justify-content:center;padding:var(--space-btn-y) var(--space-btn-x);font-size:var(--text-button);font-weight:var(--font-medium);line-height:var(--leading-normal);color:var(--color-danger-text);background-color:var(--color-danger);border:1px solid var(--color-danger);border-radius:var(--radius-button);cursor:pointer;transition:all .15s ease-in-out;text-decoration:none}.theme-scope .btn-danger:hover{background-color:var(--color-danger-link);border-color:var(--color-danger-link)}.theme-scope .btn-danger:focus{outline:none;box-shadow:0 0 0 3px rgba(239,68,68,.3)}.theme-scope .btn-danger:active{background-color:var(--color-danger-link-hover);border-color:var(--color-danger-link-hover)}.theme-scope .btn-danger:disabled{background-color:var(--color-bg-disabled);border-color:var(--color-border);color:var(--color-text-disabled);cursor:not-allowed;opacity:.6}.theme-scope .btn-success{display:inline-flex;align-items:center;justify-content:center;padding:var(--space-btn-y) var(--space-btn-x);font-size:var(--text-button);font-weight:var(--font-medium);line-height:var(--leading-normal);color:var(--color-success-text);background-color:var(--color-success);border:1px solid var(--color-success);border-radius:var(--radius-button);cursor:pointer;transition:all .15s ease-in-out;text-decoration:none}.theme-scope .btn-success:hover{background-color:var(--color-success-link);border-color:var(--color-success-link)}.theme-scope .btn-success:focus{outline:none;box-shadow:0 0 0 3px rgba(34,197,94,.3)}.theme-scope .btn-success:active{background-color:var(--color-success-link-hover);border-color:var(--color-success-link-hover)}.theme-scope .btn-success:disabled{background-color:var(--color-bg-disabled);border-color:var(--color-border);color:var(--color-text-disabled);cursor:not-allowed;opacity:.6}.theme-scope .btn-warning{display:inline-flex;align-items:center;justify-content:center;padding:var(--space-btn-y) var(--space-btn-x);font-size:var(--text-button);font-weight:var(--font-medium);line-height:var(--leading-normal);color:var(--color-warning-text);background-color:var(--color-warning);border:1px solid var(--color-warning);border-radius:var(--radius-button);cursor:pointer;transition:all .15s ease-in-out;text-decoration:none}.theme-scope .btn-warning:hover{background-color:var(--color-warning-link);border-color:var(--color-warning-link)}.theme-scope .btn-warning:focus{outline:none;box-shadow:0 0 0 3px rgba(245,158,11,.3)}.theme-scope .btn-warning:active{background-color:var(--color-warning-link-hover);border-color:var(--color-warning-link-hover)}.theme-scope .btn-warning:disabled{background-color:var(--color-bg-disabled);border-color:var(--color-border);color:var(--color-text-disabled);cursor:not-allowed;opacity:.6}.theme-scope .btn-info{display:inline-flex;align-items:center;justify-content:center;padding:var(--space-btn-y) var(--space-btn-x);font-size:var(--text-button);font-weight:var(--font-medium);line-height:var(--leading-normal);color:var(--color-info-text);background-color:var(--color-info);border:1px solid var(--color-info);border-radius:var(--radius-button);cursor:pointer;transition:all .15s ease-in-out;text-decoration:none}.theme-scope .btn-info:hover{background-color:var(--color-info-link);border-color:var(--color-info-link)}.theme-scope .btn-info:focus{outline:none;box-shadow:0 0 0 3px rgba(14,165,233,.3)}.theme-scope .btn-info:active{background-color:var(--color-info-link-hover);border-color:var(--color-info-link-hover)}.theme-scope .btn-info:disabled{background-color:var(--color-bg-disabled);border-color:var(--color-border);color:var(--color-text-disabled);cursor:not-allowed;opacity:.6}.theme-scope .btn-neutral{display:inline-flex;align-items:center;justify-content:center;padding:var(--space-btn-y) var(--space-btn-x);font-size:var(--text-button);font-weight:var(--font-medium);line-height:var(--leading-normal);color:var(--color-neutral-text);background-color:var(--color-neutral);border:1px solid var(--color-neutral);border-radius:var(--radius-button);cursor:pointer;transition:all .15s ease-in-out;text-decoration:none}.theme-scope .btn-neutral:hover{background-color:var(--color-neutral-link);border-color:var(--color-neutral-link)}.theme-scope .btn-neutral:focus{outline:none;box-shadow:0 0 0 3px rgba(113,113,122,.3)}.theme-scope .btn-neutral:active{background-color:var(--color-neutral-link-hover);border-color:var(--color-neutral-link-hover)}.theme-scope .btn-neutral:disabled{background-color:var(--color-bg-disabled);border-color:var(--color-border);color:var(--color-text-disabled);cursor:not-allowed;opacity:.6}.theme-scope .btn-gray{display:inline-flex;align-items:center;justify-content:center;padding:var(--space-btn-y) var(--space-btn-x);font-size:var(--text-button);font-weight:var(--font-medium);line-height:var(--leading-normal);color:var(--color-text-primary);background-color:var(--color-bg-muted);border:1px solid var(--color-border);border-radius:var(--radius-button);cursor:pointer;transition:all .15s ease-in-out;text-decoration:none}.theme-scope .btn-gray:hover{background-color:var(--color-border-light);border-color:var(--color-border-light)}.theme-scope .btn-gray:focus{outline:none;box-shadow:0 0 0 3px rgba(148,163,184,.3)}.theme-scope .btn-gray:active{background-color:var(--color-text-muted);border-color:var(--color-text-muted)}.theme-scope .btn-gray:disabled{background-color:var(--color-bg-muted);border-color:var(--color-bg-muted);color:var(--color-text-muted);cursor:not-allowed}.theme-scope .btn-danger-secondary{display:inline-flex;align-items:center;justify-content:center;padding:var(--space-btn-y) var(--space-btn-x);font-size:var(--text-button);font-weight:var(--font-medium);line-height:var(--leading-normal);color:var(--color-danger);background-color:var(--color-danger-light);border:1px solid currentColor;box-shadow:inset 0 0 0 1px currentColor;border-radius:var(--radius-button);cursor:pointer;transition:all .15s ease-in-out;text-decoration:none}.theme-scope .btn-danger-secondary:hover{background-color:#fecaca;color:var(--color-danger-link)}.theme-scope .btn-danger-secondary:focus{outline:none;box-shadow:inset 0 0 0 1px currentColor,0 0 0 3px rgba(239,68,68,.2)}.theme-scope .btn-danger-secondary:active{background-color:#fca5a5;color:var(--color-danger-link-hover)}.theme-scope .btn-danger-secondary:disabled{background-color:var(--color-bg-secondary);color:var(--color-text-disabled);cursor:not-allowed}.theme-scope .btn-success-secondary{display:inline-flex;align-items:center;justify-content:center;padding:var(--space-btn-y) var(--space-btn-x);font-size:var(--text-button);font-weight:var(--font-medium);line-height:var(--leading-normal);color:var(--color-success-link);background-color:var(--color-success-light);border:1px solid currentColor;box-shadow:inset 0 0 0 1px currentColor;border-radius:var(--radius-button);cursor:pointer;transition:all .15s ease-in-out;text-decoration:none}.theme-scope .btn-success-secondary:hover{background-color:#bbf7d0;color:var(--color-success-link-hover)}.theme-scope .btn-success-secondary:focus{outline:none;box-shadow:inset 0 0 0 1px currentColor,0 0 0 3px rgba(34,197,94,.2)}.theme-scope .btn-success-secondary:active{background-color:#86efac;color:var(--color-success-dark)}.theme-scope .btn-success-secondary:disabled{background-color:var(--color-bg-secondary);color:var(--color-text-disabled);cursor:not-allowed}.theme-scope .btn-warning-secondary{display:inline-flex;align-items:center;justify-content:center;padding:var(--space-btn-y) var(--space-btn-x);font-size:var(--text-button);font-weight:var(--font-medium);line-height:var(--leading-normal);color:var(--color-warning-link);background-color:var(--color-warning-light);border:1px solid currentColor;box-shadow:inset 0 0 0 1px currentColor;border-radius:var(--radius-button);cursor:pointer;transition:all .15s ease-in-out;text-decoration:none}.theme-scope .btn-warning-secondary:hover{background-color:#fde68a;color:var(--color-warning-link-hover)}.theme-scope .btn-warning-secondary:focus{outline:none;box-shadow:inset 0 0 0 1px currentColor,0 0 0 3px rgba(245,158,11,.2)}.theme-scope .btn-warning-secondary:active{background-color:#fcd34d;color:var(--color-warning-dark)}.theme-scope .btn-warning-secondary:disabled{background-color:var(--color-bg-secondary);color:var(--color-text-disabled);cursor:not-allowed}.theme-scope .btn-info-secondary{display:inline-flex;align-items:center;justify-content:center;padding:var(--space-btn-y) var(--space-btn-x);font-size:var(--text-button);font-weight:var(--font-medium);line-height:var(--leading-normal);color:var(--color-info-link);background-color:var(--color-info-light);border:1px solid currentColor;box-shadow:inset 0 0 0 1px currentColor;border-radius:var(--radius-button);cursor:pointer;transition:all .15s ease-in-out;text-decoration:none}.theme-scope .btn-info-secondary:hover{background-color:#bae6fd;color:var(--color-info-link-hover)}.theme-scope .btn-info-secondary:focus{outline:none;box-shadow:inset 0 0 0 1px currentColor,0 0 0 3px rgba(14,165,233,.2)}.theme-scope .btn-info-secondary:active{background-color:#7dd3fc;color:var(--color-info-dark)}.theme-scope .btn-info-secondary:disabled{background-color:var(--color-bg-secondary);color:var(--color-text-disabled);cursor:not-allowed}.theme-scope .btn-neutral-secondary{display:inline-flex;align-items:center;justify-content:center;padding:var(--space-btn-y) var(--space-btn-x);font-size:var(--text-button);font-weight:var(--font-medium);line-height:var(--leading-normal);color:var(--color-neutral-link);background-color:var(--color-neutral-light);border:1px solid currentColor;box-shadow:inset 0 0 0 1px currentColor;border-radius:var(--radius-button);cursor:pointer;transition:all .15s ease-in-out;text-decoration:none}.theme-scope .btn-neutral-secondary:hover{background-color:#e4e4e7;color:var(--color-neutral-link-hover)}.theme-scope .btn-neutral-secondary:focus{outline:none;box-shadow:inset 0 0 0 1px currentColor,0 0 0 3px rgba(113,113,122,.2)}.theme-scope .btn-neutral-secondary:active{background-color:#d4d4d8;color:var(--color-neutral-dark)}",[],[480,498,540],"3cb2ddb0-ef19-11f0-9a7f-42dde27851f2","chat-app-loader.txt","0c46de2e-e2e9-11f0-a1a6-42dde27851f2",181,["D",1768155211999],[],[480,498,548],"3d104ab8-ef19-11f0-b5d1-42dde27851f2","build.ts","0d7ae93e-e2e9-11f0-8fcb-42dde27851f2",196,["D",1768155212596],"// Build script for chat-app styles\n// Lives in /frontend/styles/ folder with all style-related files\n// Creates CSS files chunked for Val Town (< 60KB each)\nimport * as sass from \"npm:sass\";\nimport postcss from \"npm:postcss\";\nimport tailwindcss from \"npm:tailwindcss\";\nimport autoprefixer from \"npm:autoprefixer\";\nimport { copy } from \"https://deno.land/std@0.208.0/fs/copy.ts\";\n\n// ========================================\n// CONFIGURATION\n// ========================================\nconst CONFIG = {\n // Source paths\n DESIGN_SYSTEM_SOURCE: \"../../../../styles\", // From chat-app/frontend/styles/ up to v2/frontend/styles\n DESIGN_SYSTEM_DEST: \"./design-system\", // Design system files go here\n APP_STYLES_SCSS: \"./app.scss\", // App-specific styles\n \n // Output settings\n OUTPUT_PREFIX: \"./compiled\", // Generic output name for filtering in search\n MAX_CHUNK_SIZE: 60 * 1024, // 60KB per chunk for Val Town\n \n // App identifier (for comments/metadata)\n APP_NAME: \"chat-app\",\n};\n// ========================================\n\nasync function buildStyles() {\n console.log(`🔄 Building ${CONFIG.APP_NAME} styles...\\n`);\n\n // Step 1: Copy the design system\n console.log(\"📁 Step 1: Copying design system...\");\n try {\n try {\n await Deno.remove(CONFIG.DESIGN_SYSTEM_DEST, { recursive: true });\n } catch {\n // Folder doesn't exist, that's fine\n }\n\n await copy(CONFIG.DESIGN_SYSTEM_SOURCE, CONFIG.DESIGN_SYSTEM_DEST, { overwrite: true });\n console.log(` ✅ Copied design system → ${CONFIG.DESIGN_SYSTEM_DEST}`);\n } catch (error) {\n console.error(` ❌ Error copying design system:`, error);\n Deno.exit(1);\n }\n\n // Step 2: Compile design system\n console.log(\"\\n📦 Step 2: Compiling design system...\");\n let designSystemCss = \"\";\n try {\n const themeScssPath = `${CONFIG.DESIGN_SYSTEM_DEST}/theme.scss`;\n const scssContent = await Deno.readTextFile(themeScssPath);\n \n const result = sass.compileString(scssContent, {\n style: \"compressed\",\n loadPaths: [CONFIG.DESIGN_SYSTEM_DEST],\n });\n\n designSystemCss = result.css;\n console.log(` ✅ Compiled design system (compressed)`);\n } catch (error) {\n console.error(` ❌ Error compiling design system:`, error);\n Deno.exit(1);\n }\n\n // Step 3: Compile app-specific styles with @apply support\n console.log(\"\\n🎨 Step 3: Compiling app styles (with @apply)...\");\n let appCss = \"\";\n try {\n const sassResult = sass.compile(CONFIG.APP_STYLES_SCSS, {\n style: \"compressed\",\n });\n\n const postcssResult = await postcss([\n tailwindcss(\"./tailwind.config.js\"),\n autoprefixer,\n ]).process(sassResult.css, { \n from: CONFIG.APP_STYLES_SCSS, \n to: `${CONFIG.OUTPUT_PREFIX}.css` \n });\n\n appCss = postcssResult.css;\n console.log(` ✅ Compiled ${CONFIG.APP_STYLES_SCSS}`);\n } catch (error) {\n console.error(` ❌ Error compiling app styles:`, error);\n Deno.exit(1);\n }\n\n // Step 4: Split into chunks\n console.log(\"\\n🔗 Step 4: Splitting into chunks...\");\n try {\n const combinedCss = `/* ${CONFIG.APP_NAME} - Generated CSS */\\n${designSystemCss}${appCss}`;\n const totalSize = new TextEncoder().encode(combinedCss).length;\n \n if (totalSize <= CONFIG.MAX_CHUNK_SIZE) {\n await Deno.writeTextFile(`${CONFIG.OUTPUT_PREFIX}.css`, combinedCss);\n console.log(` ✅ Created ${CONFIG.OUTPUT_PREFIX}.css (${(totalSize / 1024).toFixed(2)} KB)`);\n } else {\n const chunks = splitCssIntoChunks(combinedCss, CONFIG.MAX_CHUNK_SIZE);\n const chunkFiles: string[] = [];\n \n for (let i = 0; i < chunks.length; i++) {\n const chunkFile = `${CONFIG.OUTPUT_PREFIX}-${i + 1}.css`;\n await Deno.writeTextFile(chunkFile, chunks[i]);\n const chunkSize = new TextEncoder().encode(chunks[i]).length;\n console.log(` ✅ Created ${chunkFile} (${(chunkSize / 1024).toFixed(2)} KB)`);\n chunkFiles.push(chunkFile);\n }\n \n // Create loader instructions\n const loaderContent = `/* ${CONFIG.APP_NAME} CSS - Include these in order:\n${chunkFiles.map(f => ` `).join('\\n')}\n*/\n`;\n await Deno.writeTextFile(`${CONFIG.OUTPUT_PREFIX}-loader.txt`, loaderContent);\n console.log(` ✅ Created ${CONFIG.OUTPUT_PREFIX}-loader.txt`);\n }\n \n console.log(`\\n Total: ${(totalSize / 1024).toFixed(2)} KB`);\n } catch (error) {\n console.error(` ❌ Error writing CSS:`, error);\n Deno.exit(1);\n }\n\n console.log(\"\\n\" + \"=\".repeat(50));\n console.log(\"📦 Build complete!\");\n console.log(\"=\".repeat(50));\n}\n\nfunction splitCssIntoChunks(css: string, maxSize: number): string[] {\n const chunks: string[] = [];\n let currentChunk = \"\";\n \n // Split at rule boundaries (after closing braces)\n const rules = css.split(/(?<=\\})\\s*(?=[.@#a-zA-Z])/);\n \n for (const rule of rules) {\n const testChunk = currentChunk + rule;\n const testSize = new TextEncoder().encode(testChunk).length;\n \n if (testSize > maxSize && currentChunk.length > 0) {\n chunks.push(currentChunk);\n currentChunk = rule;\n } else {\n currentChunk = testChunk;\n }\n }\n \n if (currentChunk.length > 0) {\n chunks.push(currentChunk);\n }\n \n return chunks;\n}\n\nif (import.meta.main) {\n await buildStyles();\n}\n\n",[],[480,498,555],"3d082d24-ef19-11f0-a3a2-42dde27851f2","app.scss","0d6c68fa-e2e9-11f0-8fcb-42dde27851f2",194,["D",1768155212546],"// Import all component styles using modern @use syntax\n@use 'components/layout';\n@use 'components/chat-messages';\n@use 'components/chat-input';\n@use 'components/model-picker';\n@use 'components/sidebar';\n@use 'components/right-sidebar';\n@use 'components/settings';\n@use 'components/template-editor';\n@use 'components/dark-mode';\n\n\n// Chatter App Styles - SCSS with @apply support\n// Modular structure with component imports\n\n.theme-scope {\n @apply shadow-none !p-0;\n background-color: var(--color-bg-primary, #ffffff);\n}\n\n.dark .theme-scope {\n background-color: var(--color-bg-primary, #0f172a);\n}\n\n// ==========================================================================\n// Text Size Variations\n// ==========================================================================\n// Base size is medium (default), small is 90%, large is 110%\n.text-size-small .message {\n font-size: 0.9rem !important;\n}\n\n.text-size-small .chat-input {\n font-size: 0.9rem !important;\n}\n\n.text-size-small .message-content pre,\n.text-size-small .message-content code {\n font-size: 0.84375rem !important;\n}\n\n.text-size-small .message-thinking {\n font-size: 0.84375rem !important;\n}\n\n.text-size-large .message {\n font-size: 1.1rem !important;\n}\n\n.text-size-large .chat-input {\n font-size: 1.1rem !important;\n}\n\n.text-size-large .message-content pre,\n.text-size-large .message-content code {\n font-size: 1.03125rem !important;\n}\n\n.text-size-large .message-thinking {\n font-size: 1.03125rem !important;\n}\n",[],[480,498,563],"0d42f48e-e2e9-11f0-b941-42dde27851f2","theme.scss","0d42f6b4-e2e9-11f0-b941-42dde27851f2","0ac3cc10-e2e9-11f0-9dc9-42dde27851f2",89,["D",1766815102617],"/* ===================================\n Theme Entry Point\n \n Switch themes by commenting/uncommenting the override import.\n The base styles are always included, then theme overrides layer on top.\n\n Make sure to update Tailwind variables in `/styles/config.js` as well\n =================================== */\n\n/* Base styles (always included) */\n@use 'default/all' as *;\n\n/* Theme Overrides - uncomment ONE of these: */\n// @use 'retro/overrides';\n// @use 'startup/overrides';\n// @use 'luma/overrides';\n@use 'groq/overrides';\n\n\n",[],[480,498,579,571],"design-system","0d2ed8fa-e2e9-11f0-9a99-42dde27851f2","tailwind.css","0d2ed9a4-e2e9-11f0-9a99-42dde27851f2",85,["D",1766815102475],"@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n/* \n * You can add custom @apply-based utilities here\n * Example:\n * \n * .btn-primary {\n * @apply px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600;\n * }\n */\n\n",[],[480,498,579,581],"3cff09b0-ef19-11f0-b5d1-42dde27851f2","tailwind-compiled.css","0d3cd626-e2e9-11f0-b941-42dde27851f2",192,["D",1768155212490],"*, ::before, ::after {\n --tw-border-spacing-x: 0;\n --tw-border-spacing-y: 0;\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-rotate: 0;\n --tw-skew-x: 0;\n --tw-skew-y: 0;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n --tw-pan-x: ;\n --tw-pan-y: ;\n --tw-pinch-zoom: ;\n --tw-scroll-snap-strictness: proximity;\n --tw-gradient-from-position: ;\n --tw-gradient-via-position: ;\n --tw-gradient-to-position: ;\n --tw-ordinal: ;\n --tw-slashed-zero: ;\n --tw-numeric-figure: ;\n --tw-numeric-spacing: ;\n --tw-numeric-fraction: ;\n --tw-ring-inset: ;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-color: rgb(59 130 246 / 0.5);\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-ring-shadow: 0 0 #0000;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n --tw-blur: ;\n --tw-brightness: ;\n --tw-contrast: ;\n --tw-grayscale: ;\n --tw-hue-rotate: ;\n --tw-invert: ;\n --tw-saturate: ;\n --tw-sepia: ;\n --tw-drop-shadow: ;\n --tw-backdrop-blur: ;\n --tw-backdrop-brightness: ;\n --tw-backdrop-contrast: ;\n --tw-backdrop-grayscale: ;\n --tw-backdrop-hue-rotate: ;\n --tw-backdrop-invert: ;\n --tw-backdrop-opacity: ;\n --tw-backdrop-saturate: ;\n --tw-backdrop-sepia: ;\n --tw-contain-size: ;\n --tw-contain-layout: ;\n --tw-contain-paint: ;\n --tw-contain-style: ;\n}\n\n::backdrop {\n --tw-border-spacing-x: 0;\n --tw-border-spacing-y: 0;\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-rotate: 0;\n --tw-skew-x: 0;\n --tw-skew-y: 0;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n --tw-pan-x: ;\n --tw-pan-y: ;\n --tw-pinch-zoom: ;\n --tw-scroll-snap-strictness: proximity;\n --tw-gradient-from-position: ;\n --tw-gradient-via-position: ;\n --tw-gradient-to-position: ;\n --tw-ordinal: ;\n --tw-slashed-zero: ;\n --tw-numeric-figure: ;\n --tw-numeric-spacing: ;\n --tw-numeric-fraction: ;\n --tw-ring-inset: ;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-color: rgb(59 130 246 / 0.5);\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-ring-shadow: 0 0 #0000;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n --tw-blur: ;\n --tw-brightness: ;\n --tw-contrast: ;\n --tw-grayscale: ;\n --tw-hue-rotate: ;\n --tw-invert: ;\n --tw-saturate: ;\n --tw-sepia: ;\n --tw-drop-shadow: ;\n --tw-backdrop-blur: ;\n --tw-backdrop-brightness: ;\n --tw-backdrop-contrast: ;\n --tw-backdrop-grayscale: ;\n --tw-backdrop-hue-rotate: ;\n --tw-backdrop-invert: ;\n --tw-backdrop-opacity: ;\n --tw-backdrop-saturate: ;\n --tw-backdrop-sepia: ;\n --tw-contain-size: ;\n --tw-contain-layout: ;\n --tw-contain-paint: ;\n --tw-contain-style: ;\n}/*\n! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com\n*//*\n1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)\n2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)\n*/\n\n*,\n::before,\n::after {\n box-sizing: border-box; /* 1 */\n border-width: 0; /* 2 */\n border-style: solid; /* 2 */\n border-color: #e5e7eb; /* 2 */\n}\n\n::before,\n::after {\n --tw-content: '';\n}\n\n/*\n1. Use a consistent sensible line-height in all browsers.\n2. Prevent adjustments of font size after orientation changes in iOS.\n3. Use a more readable tab size.\n4. Use the user's configured `sans` font-family by default.\n5. Use the user's configured `sans` font-feature-settings by default.\n6. Use the user's configured `sans` font-variation-settings by default.\n7. Disable tap highlights on iOS\n*/\n\nhtml,\n:host {\n line-height: 1.5; /* 1 */\n -webkit-text-size-adjust: 100%; /* 2 */\n -moz-tab-size: 4; /* 3 */\n -o-tab-size: 4;\n tab-size: 4; /* 3 */\n font-family: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"; /* 4 */\n font-feature-settings: normal; /* 5 */\n font-variation-settings: normal; /* 6 */\n -webkit-tap-highlight-color: transparent; /* 7 */\n}\n\n/*\n1. Remove the margin in all browsers.\n2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.\n*/\n\nbody {\n margin: 0; /* 1 */\n line-height: inherit; /* 2 */\n}\n\n/*\n1. Add the correct height in Firefox.\n2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)\n3. Ensure horizontal rules are visible by default.\n*/\n\nhr {\n height: 0; /* 1 */\n color: inherit; /* 2 */\n border-top-width: 1px; /* 3 */\n}\n\n/*\nAdd the correct text decoration in Chrome, Edge, and Safari.\n*/\n\nabbr:where([title]) {\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n}\n\n/*\nRemove the default font size and weight for headings.\n*/\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n font-size: inherit;\n font-weight: inherit;\n}\n\n/*\nReset links to optimize for opt-in styling instead of opt-out.\n*/\n\na {\n color: inherit;\n text-decoration: inherit;\n}\n\n/*\nAdd the correct font weight in Edge and Safari.\n*/\n\nb,\nstrong {\n font-weight: bolder;\n}\n\n/*\n1. Use the user's configured `mono` font-family by default.\n2. Use the user's configured `mono` font-feature-settings by default.\n3. Use the user's configured `mono` font-variation-settings by default.\n4. Correct the odd `em` font sizing in all browsers.\n*/\n\ncode,\nkbd,\nsamp,\npre {\n font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace; /* 1 */\n font-feature-settings: normal; /* 2 */\n font-variation-settings: normal; /* 3 */\n font-size: 1em; /* 4 */\n}\n\n/*\nAdd the correct font size in all browsers.\n*/\n\nsmall {\n font-size: 80%;\n}\n\n/*\nPrevent `sub` and `sup` elements from affecting the line height in all browsers.\n*/\n\nsub,\nsup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n}\n\nsub {\n bottom: -0.25em;\n}\n\nsup {\n top: -0.5em;\n}\n\n/*\n1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)\n2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)\n3. Remove gaps between table borders by default.\n*/\n\ntable {\n text-indent: 0; /* 1 */\n border-color: inherit; /* 2 */\n border-collapse: collapse; /* 3 */\n}\n\n/*\n1. Change the font styles in all browsers.\n2. Remove the margin in Firefox and Safari.\n3. Remove default padding in all browsers.\n*/\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n font-family: inherit; /* 1 */\n font-feature-settings: inherit; /* 1 */\n font-variation-settings: inherit; /* 1 */\n font-size: 100%; /* 1 */\n font-weight: inherit; /* 1 */\n line-height: inherit; /* 1 */\n letter-spacing: inherit; /* 1 */\n color: inherit; /* 1 */\n margin: 0; /* 2 */\n padding: 0; /* 3 */\n}\n\n/*\nRemove the inheritance of text transform in Edge and Firefox.\n*/\n\nbutton,\nselect {\n text-transform: none;\n}\n\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Remove default button styles.\n*/\n\nbutton,\ninput:where([type='button']),\ninput:where([type='reset']),\ninput:where([type='submit']) {\n -webkit-appearance: button; /* 1 */\n background-color: transparent; /* 2 */\n background-image: none; /* 2 */\n}\n\n/*\nUse the modern Firefox focus style for all focusable elements.\n*/\n\n:-moz-focusring {\n outline: auto;\n}\n\n/*\nRemove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)\n*/\n\n:-moz-ui-invalid {\n box-shadow: none;\n}\n\n/*\nAdd the correct vertical alignment in Chrome and Firefox.\n*/\n\nprogress {\n vertical-align: baseline;\n}\n\n/*\nCorrect the cursor style of increment and decrement buttons in Safari.\n*/\n\n::-webkit-inner-spin-button,\n::-webkit-outer-spin-button {\n height: auto;\n}\n\n/*\n1. Correct the odd appearance in Chrome and Safari.\n2. Correct the outline style in Safari.\n*/\n\n[type='search'] {\n -webkit-appearance: textfield; /* 1 */\n outline-offset: -2px; /* 2 */\n}\n\n/*\nRemove the inner padding in Chrome and Safari on macOS.\n*/\n\n::-webkit-search-decoration {\n -webkit-appearance: none;\n}\n\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Change font properties to `inherit` in Safari.\n*/\n\n::-webkit-file-upload-button {\n -webkit-appearance: button; /* 1 */\n font: inherit; /* 2 */\n}\n\n/*\nAdd the correct display in Chrome and Safari.\n*/\n\nsummary {\n display: list-item;\n}\n\n/*\nRemoves the default spacing and border for appropriate elements.\n*/\n\nblockquote,\ndl,\ndd,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nhr,\nfigure,\np,\npre {\n margin: 0;\n}\n\nfieldset {\n margin: 0;\n padding: 0;\n}\n\nlegend {\n padding: 0;\n}\n\nol,\nul,\nmenu {\n list-style: none;\n margin: 0;\n padding: 0;\n}\n\n/*\nReset default styling for dialogs.\n*/\ndialog {\n padding: 0;\n}\n\n/*\nPrevent resizing textareas horizontally by default.\n*/\n\ntextarea {\n resize: vertical;\n}\n\n/*\n1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)\n2. Set the default placeholder color to the user's configured gray 400 color.\n*/\n\ninput::-moz-placeholder, textarea::-moz-placeholder {\n opacity: 1; /* 1 */\n color: #9ca3af; /* 2 */\n}\n\ninput::placeholder,\ntextarea::placeholder {\n opacity: 1; /* 1 */\n color: #9ca3af; /* 2 */\n}\n\n/*\nSet the default cursor for buttons.\n*/\n\nbutton,\n[role=\"button\"] {\n cursor: pointer;\n}\n\n/*\nMake sure disabled buttons don't get the pointer cursor.\n*/\n:disabled {\n cursor: default;\n}\n\n/*\n1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)\n2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)\n This can trigger a poorly considered lint error in some tools but is included by design.\n*/\n\nimg,\nsvg,\nvideo,\ncanvas,\naudio,\niframe,\nembed,\nobject {\n display: block; /* 1 */\n vertical-align: middle; /* 2 */\n}\n\n/*\nConstrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)\n*/\n\nimg,\nvideo {\n max-width: 100%;\n height: auto;\n}\n\n/* Make elements with the HTML hidden attribute stay hidden by default */\n[hidden]:where(:not([hidden=\"until-found\"])) {\n display: none;\n}\n.\\!container {\n width: 100% !important;\n}\n.container {\n width: 100%;\n}\n@media (min-width: 640px) {\n\n .\\!container {\n max-width: 640px !important;\n }\n\n .container {\n max-width: 640px;\n }\n}\n@media (min-width: 768px) {\n\n .\\!container {\n max-width: 768px !important;\n }\n\n .container {\n max-width: 768px;\n }\n}\n@media (min-width: 1024px) {\n\n .\\!container {\n max-width: 1024px !important;\n }\n\n .container {\n max-width: 1024px;\n }\n}\n@media (min-width: 1280px) {\n\n .\\!container {\n max-width: 1280px !important;\n }\n\n .container {\n max-width: 1280px;\n }\n}\n@media (min-width: 1536px) {\n\n .\\!container {\n max-width: 1536px !important;\n }\n\n .container {\n max-width: 1536px;\n }\n}\n.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n}\n.pointer-events-none {\n pointer-events: none;\n}\n.visible {\n visibility: visible;\n}\n.collapse {\n visibility: collapse;\n}\n.static {\n position: static;\n}\n.fixed {\n position: fixed;\n}\n.absolute {\n position: absolute;\n}\n.relative {\n position: relative;\n}\n.sticky {\n position: sticky;\n}\n.inset-0 {\n inset: 0px;\n}\n.-right-2 {\n right: -0.5rem;\n}\n.-top-2 {\n top: -0.5rem;\n}\n.bottom-0 {\n bottom: 0px;\n}\n.bottom-full {\n bottom: 100%;\n}\n.left-0 {\n left: 0px;\n}\n.left-1\\/2 {\n left: 50%;\n}\n.left-3 {\n left: 0.75rem;\n}\n.left-6 {\n left: 1.5rem;\n}\n.left-full {\n left: 100%;\n}\n.right-0 {\n right: 0px;\n}\n.right-1\\.5 {\n right: 0.375rem;\n}\n.right-2 {\n right: 0.5rem;\n}\n.right-3 {\n right: 0.75rem;\n}\n.right-4 {\n right: 1rem;\n}\n.right-6 {\n right: 1.5rem;\n}\n.right-full {\n right: 100%;\n}\n.top-0 {\n top: 0px;\n}\n.top-1\\/2 {\n top: 50%;\n}\n.top-2 {\n top: 0.5rem;\n}\n.top-4 {\n top: 1rem;\n}\n.top-full {\n top: 100%;\n}\n.-z-0 {\n z-index: 0;\n}\n.z-10 {\n z-index: 10;\n}\n.z-20 {\n z-index: 20;\n}\n.z-30 {\n z-index: 30;\n}\n.z-50 {\n z-index: 50;\n}\n.z-\\[99\\] {\n z-index: 99;\n}\n.col-span-2 {\n grid-column: span 2 / span 2;\n}\n.\\!m-0 {\n margin: 0px !important;\n}\n.m-0 {\n margin: 0px;\n}\n.m-auto {\n margin: auto;\n}\n.-mx-4 {\n margin-left: -1rem;\n margin-right: -1rem;\n}\n.-my-6 {\n margin-top: -1.5rem;\n margin-bottom: -1.5rem;\n}\n.mx-2 {\n margin-left: 0.5rem;\n margin-right: 0.5rem;\n}\n.mx-4 {\n margin-left: 1rem;\n margin-right: 1rem;\n}\n.mx-auto {\n margin-left: auto;\n margin-right: auto;\n}\n.my-1 {\n margin-top: 0.25rem;\n margin-bottom: 0.25rem;\n}\n.my-4 {\n margin-top: 1rem;\n margin-bottom: 1rem;\n}\n.\\!mb-0 {\n margin-bottom: 0px !important;\n}\n.\\!mb-1 {\n margin-bottom: 0.25rem !important;\n}\n.\\!mt-1 {\n margin-top: 0.25rem !important;\n}\n.-mb-4 {\n margin-bottom: -1rem;\n}\n.-ml-1 {\n margin-left: -0.25rem;\n}\n.-mr-6 {\n margin-right: -1.5rem;\n}\n.-mt-1 {\n margin-top: -0.25rem;\n}\n.mb-0 {\n margin-bottom: 0px;\n}\n.mb-1 {\n margin-bottom: 0.25rem;\n}\n.mb-1\\.5 {\n margin-bottom: 0.375rem;\n}\n.mb-12 {\n margin-bottom: 3rem;\n}\n.mb-2 {\n margin-bottom: 0.5rem;\n}\n.mb-3 {\n margin-bottom: 0.75rem;\n}\n.mb-4 {\n margin-bottom: 1rem;\n}\n.mb-5 {\n margin-bottom: 1.25rem;\n}\n.mb-6 {\n margin-bottom: 1.5rem;\n}\n.mb-8 {\n margin-bottom: 2rem;\n}\n.ml-1\\.5 {\n margin-left: 0.375rem;\n}\n.ml-2 {\n margin-left: 0.5rem;\n}\n.ml-4 {\n margin-left: 1rem;\n}\n.ml-6 {\n margin-left: 1.5rem;\n}\n.ml-auto {\n margin-left: auto;\n}\n.mr-1 {\n margin-right: 0.25rem;\n}\n.mr-1\\.5 {\n margin-right: 0.375rem;\n}\n.mr-2 {\n margin-right: 0.5rem;\n}\n.mr-2\\.5 {\n margin-right: 0.625rem;\n}\n.mr-4 {\n margin-right: 1rem;\n}\n.mr-6 {\n margin-right: 1.5rem;\n}\n.mt-0\\.5 {\n margin-top: 0.125rem;\n}\n.mt-1 {\n margin-top: 0.25rem;\n}\n.mt-1\\.5 {\n margin-top: 0.375rem;\n}\n.mt-12 {\n margin-top: 3rem;\n}\n.mt-2 {\n margin-top: 0.5rem;\n}\n.mt-2\\.5 {\n margin-top: 0.625rem;\n}\n.mt-3 {\n margin-top: 0.75rem;\n}\n.mt-4 {\n margin-top: 1rem;\n}\n.mt-6 {\n margin-top: 1.5rem;\n}\n.mt-8 {\n margin-top: 2rem;\n}\n.mt-auto {\n margin-top: auto;\n}\n.line-clamp-2 {\n overflow: hidden;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n}\n.line-clamp-3 {\n overflow: hidden;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 3;\n}\n.block {\n display: block;\n}\n.inline-block {\n display: inline-block;\n}\n.inline {\n display: inline;\n}\n.flex {\n display: flex;\n}\n.inline-flex {\n display: inline-flex;\n}\n.table {\n display: table;\n}\n.table-caption {\n display: table-caption;\n}\n.grid {\n display: grid;\n}\n.contents {\n display: contents;\n}\n.hidden {\n display: none;\n}\n.aspect-\\[4\\/3\\] {\n aspect-ratio: 4/3;\n}\n.aspect-square {\n aspect-ratio: 1 / 1;\n}\n.aspect-video {\n aspect-ratio: 16 / 9;\n}\n.\\!h-4 {\n height: 1rem !important;\n}\n.\\!h-7 {\n height: 1.75rem !important;\n}\n.\\!h-8 {\n height: 2rem !important;\n}\n.h-1 {\n height: 0.25rem;\n}\n.h-1\\.5 {\n height: 0.375rem;\n}\n.h-10 {\n height: 2.5rem;\n}\n.h-11 {\n height: 2.75rem;\n}\n.h-12 {\n height: 3rem;\n}\n.h-2 {\n height: 0.5rem;\n}\n.h-20 {\n height: 5rem;\n}\n.h-24 {\n height: 6rem;\n}\n.h-3 {\n height: 0.75rem;\n}\n.h-4 {\n height: 1rem;\n}\n.h-40 {\n height: 10rem;\n}\n.h-5 {\n height: 1.25rem;\n}\n.h-6 {\n height: 1.5rem;\n}\n.h-64 {\n height: 16rem;\n}\n.h-8 {\n height: 2rem;\n}\n.h-9 {\n height: 2.25rem;\n}\n.h-96 {\n height: 24rem;\n}\n.h-\\[18px\\] {\n height: 18px;\n}\n.h-\\[480px\\] {\n height: 480px;\n}\n.h-auto {\n height: auto;\n}\n.h-full {\n height: 100%;\n}\n.h-px {\n height: 1px;\n}\n.max-h-20 {\n max-height: 5rem;\n}\n.max-h-60 {\n max-height: 15rem;\n}\n.max-h-64 {\n max-height: 16rem;\n}\n.max-h-96 {\n max-height: 24rem;\n}\n.max-h-\\[180px\\] {\n max-height: 180px;\n}\n.max-h-\\[200px\\] {\n max-height: 200px;\n}\n.max-h-\\[220px\\] {\n max-height: 220px;\n}\n.max-h-\\[240px\\] {\n max-height: 240px;\n}\n.max-h-\\[300px\\] {\n max-height: 300px;\n}\n.max-h-\\[75vh\\] {\n max-height: 75vh;\n}\n.max-h-\\[85vh\\] {\n max-height: 85vh;\n}\n.max-h-\\[95vh\\] {\n max-height: 95vh;\n}\n.\\!min-h-0 {\n min-height: 0px !important;\n}\n.min-h-24 {\n min-height: 6rem;\n}\n.min-h-32 {\n min-height: 8rem;\n}\n.min-h-6 {\n min-height: 1.5rem;\n}\n.min-h-96 {\n min-height: 24rem;\n}\n.min-h-\\[100px\\] {\n min-height: 100px;\n}\n.min-h-\\[500px\\] {\n min-height: 500px;\n}\n.min-h-\\[50vh\\] {\n min-height: 50vh;\n}\n.min-h-\\[80px\\] {\n min-height: 80px;\n}\n.min-h-screen {\n min-height: 100vh;\n}\n.\\!w-7 {\n width: 1.75rem !important;\n}\n.\\!w-full {\n width: 100% !important;\n}\n.w-1\\.5 {\n width: 0.375rem;\n}\n.w-1\\/2 {\n width: 50%;\n}\n.w-10 {\n width: 2.5rem;\n}\n.w-11 {\n width: 2.75rem;\n}\n.w-12 {\n width: 3rem;\n}\n.w-16 {\n width: 4rem;\n}\n.w-2 {\n width: 0.5rem;\n}\n.w-2\\/3 {\n width: 66.666667%;\n}\n.w-24 {\n width: 6rem;\n}\n.w-3 {\n width: 0.75rem;\n}\n.w-3\\/4 {\n width: 75%;\n}\n.w-4 {\n width: 1rem;\n}\n.w-5 {\n width: 1.25rem;\n}\n.w-5\\/6 {\n width: 83.333333%;\n}\n.w-6 {\n width: 1.5rem;\n}\n.w-8 {\n width: 2rem;\n}\n.w-9 {\n width: 2.25rem;\n}\n.w-\\[100px\\] {\n width: 100px;\n}\n.w-\\[150px\\] {\n width: 150px;\n}\n.w-\\[18px\\] {\n width: 18px;\n}\n.w-\\[200px\\] {\n width: 200px;\n}\n.w-\\[220px\\] {\n width: 220px;\n}\n.w-\\[240px\\] {\n width: 240px;\n}\n.w-\\[260px\\] {\n width: 260px;\n}\n.w-\\[280px\\] {\n width: 280px;\n}\n.w-\\[40px\\] {\n width: 40px;\n}\n.w-full {\n width: 100%;\n}\n.min-w-0 {\n min-width: 0px;\n}\n.max-w-2xl {\n max-width: 42rem;\n}\n.max-w-3xl {\n max-width: 48rem;\n}\n.max-w-4xl {\n max-width: 56rem;\n}\n.max-w-5xl {\n max-width: 64rem;\n}\n.max-w-6xl {\n max-width: 72rem;\n}\n.max-w-\\[120px\\] {\n max-width: 120px;\n}\n.max-w-\\[450px\\] {\n max-width: 450px;\n}\n.max-w-\\[95vw\\] {\n max-width: 95vw;\n}\n.max-w-lg {\n max-width: 32rem;\n}\n.max-w-md {\n max-width: 28rem;\n}\n.max-w-sm {\n max-width: 24rem;\n}\n.max-w-xl {\n max-width: 36rem;\n}\n.max-w-xs {\n max-width: 20rem;\n}\n.flex-1 {\n flex: 1 1 0%;\n}\n.flex-shrink {\n flex-shrink: 1;\n}\n.flex-shrink-0 {\n flex-shrink: 0;\n}\n.shrink-0 {\n flex-shrink: 0;\n}\n.flex-grow {\n flex-grow: 1;\n}\n.grow {\n flex-grow: 1;\n}\n.basis-1 {\n flex-basis: 0.25rem;\n}\n.basis-1\\/3 {\n flex-basis: 33.333333%;\n}\n.origin-top-right {\n transform-origin: top right;\n}\n.-translate-x-1\\/2 {\n --tw-translate-x: -50%;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.-translate-y-1\\/2 {\n --tw-translate-y: -50%;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.-translate-y-full {\n --tw-translate-y: -100%;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.translate-y-0 {\n --tw-translate-y: 0px;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.translate-y-1 {\n --tw-translate-y: 0.25rem;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.translate-y-2 {\n --tw-translate-y: 0.5rem;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.translate-y-full {\n --tw-translate-y: 100%;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.rotate-180 {\n --tw-rotate: 180deg;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.rotate-90 {\n --tw-rotate: 90deg;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.scale-100 {\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.scale-95 {\n --tw-scale-x: .95;\n --tw-scale-y: .95;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.transform {\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n@keyframes pulse {\n\n 50% {\n opacity: .5;\n }\n}\n.animate-pulse {\n animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n@keyframes spin {\n\n to {\n transform: rotate(360deg);\n }\n}\n.animate-spin {\n animation: spin 1s linear infinite;\n}\n.cursor-default {\n cursor: default;\n}\n.cursor-not-allowed {\n cursor: not-allowed;\n}\n.cursor-pointer {\n cursor: pointer;\n}\n.select-none {\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n}\n.select-all {\n -webkit-user-select: all;\n -moz-user-select: all;\n user-select: all;\n}\n.resize-none {\n resize: none;\n}\n.resize-y {\n resize: vertical;\n}\n.resize {\n resize: both;\n}\n.list-none {\n list-style-type: none;\n}\n.appearance-none {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n}\n.columns-2 {\n -moz-columns: 2;\n columns: 2;\n}\n.break-inside-avoid {\n -moz-column-break-inside: avoid;\n break-inside: avoid;\n}\n.grid-cols-1 {\n grid-template-columns: repeat(1, minmax(0, 1fr));\n}\n.grid-cols-2 {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n}\n.grid-cols-3 {\n grid-template-columns: repeat(3, minmax(0, 1fr));\n}\n.grid-cols-4 {\n grid-template-columns: repeat(4, minmax(0, 1fr));\n}\n.flex-row {\n flex-direction: row;\n}\n.flex-col {\n flex-direction: column;\n}\n.flex-wrap {\n flex-wrap: wrap;\n}\n.items-start {\n align-items: flex-start;\n}\n.items-end {\n align-items: flex-end;\n}\n.items-center {\n align-items: center;\n}\n.items-baseline {\n align-items: baseline;\n}\n.items-stretch {\n align-items: stretch;\n}\n.justify-start {\n justify-content: flex-start;\n}\n.justify-end {\n justify-content: flex-end;\n}\n.justify-center {\n justify-content: center;\n}\n.justify-between {\n justify-content: space-between;\n}\n.gap-0\\.5 {\n gap: 0.125rem;\n}\n.gap-1 {\n gap: 0.25rem;\n}\n.gap-1\\.5 {\n gap: 0.375rem;\n}\n.gap-2 {\n gap: 0.5rem;\n}\n.gap-3 {\n gap: 0.75rem;\n}\n.gap-4 {\n gap: 1rem;\n}\n.gap-6 {\n gap: 1.5rem;\n}\n.gap-8 {\n gap: 2rem;\n}\n.space-x-2 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-x-reverse: 0;\n margin-right: calc(0.5rem * var(--tw-space-x-reverse));\n margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));\n}\n.space-x-4 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-x-reverse: 0;\n margin-right: calc(1rem * var(--tw-space-x-reverse));\n margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));\n}\n.space-y-1 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));\n}\n.space-y-12 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(3rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(3rem * var(--tw-space-y-reverse));\n}\n.space-y-2 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));\n}\n.space-y-3 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));\n}\n.space-y-4 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(1rem * var(--tw-space-y-reverse));\n}\n.space-y-5 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));\n}\n.space-y-6 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));\n}\n.space-y-8 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(2rem * var(--tw-space-y-reverse));\n}\n.divide-y > :not([hidden]) ~ :not([hidden]) {\n --tw-divide-y-reverse: 0;\n border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));\n border-bottom-width: calc(1px * var(--tw-divide-y-reverse));\n}\n.self-end {\n align-self: flex-end;\n}\n.overflow-auto {\n overflow: auto;\n}\n.overflow-hidden {\n overflow: hidden;\n}\n.overflow-visible {\n overflow: visible;\n}\n.overflow-x-auto {\n overflow-x: auto;\n}\n.overflow-y-auto {\n overflow-y: auto;\n}\n.truncate {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.whitespace-nowrap {\n white-space: nowrap;\n}\n.whitespace-pre-line {\n white-space: pre-line;\n}\n.whitespace-pre-wrap {\n white-space: pre-wrap;\n}\n.break-words {\n overflow-wrap: break-word;\n}\n.break-all {\n word-break: break-all;\n}\n.\\!rounded-md {\n border-radius: 0.375rem !important;\n}\n.rounded {\n border-radius: 0.25rem;\n}\n.rounded-2xl {\n border-radius: 1rem;\n}\n.rounded-\\[32px\\] {\n border-radius: 32px;\n}\n.rounded-full {\n border-radius: 9999px;\n}\n.rounded-lg {\n border-radius: 0.5rem;\n}\n.rounded-md {\n border-radius: 0.375rem;\n}\n.rounded-sm {\n border-radius: 0.125rem;\n}\n.rounded-xl {\n border-radius: 0.75rem;\n}\n.rounded-b-\\[26px\\] {\n border-bottom-right-radius: 26px;\n border-bottom-left-radius: 26px;\n}\n.rounded-b-lg {\n border-bottom-right-radius: 0.5rem;\n border-bottom-left-radius: 0.5rem;\n}\n.rounded-b-none {\n border-bottom-right-radius: 0px;\n border-bottom-left-radius: 0px;\n}\n.rounded-r-lg {\n border-top-right-radius: 0.5rem;\n border-bottom-right-radius: 0.5rem;\n}\n.rounded-t-none {\n border-top-left-radius: 0px;\n border-top-right-radius: 0px;\n}\n.border {\n border-width: 1px;\n}\n.border-0 {\n border-width: 0px;\n}\n.border-2 {\n border-width: 2px;\n}\n.border-4 {\n border-width: 4px;\n}\n.\\!border-l-0 {\n border-left-width: 0px !important;\n}\n.border-b {\n border-bottom-width: 1px;\n}\n.border-b-0 {\n border-bottom-width: 0px;\n}\n.border-l {\n border-left-width: 1px;\n}\n.border-l-0 {\n border-left-width: 0px;\n}\n.border-l-2 {\n border-left-width: 2px;\n}\n.border-l-4 {\n border-left-width: 4px;\n}\n.border-r-0 {\n border-right-width: 0px;\n}\n.border-t {\n border-top-width: 1px;\n}\n.border-t-0 {\n border-top-width: 0px;\n}\n.border-solid {\n border-style: solid;\n}\n.border-dashed {\n border-style: dashed;\n}\n.\\!border-none {\n border-style: none !important;\n}\n.border-none {\n border-style: none;\n}\n.border-accent {\n border-color: var(--color-accent);\n}\n.border-blue-100 {\n --tw-border-opacity: 1;\n border-color: rgb(219 234 254 / var(--tw-border-opacity, 1));\n}\n.border-blue-200 {\n --tw-border-opacity: 1;\n border-color: rgb(191 219 254 / var(--tw-border-opacity, 1));\n}\n.border-blue-500 {\n --tw-border-opacity: 1;\n border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));\n}\n.border-gray-100 {\n --tw-border-opacity: 1;\n border-color: rgb(243 244 246 / var(--tw-border-opacity, 1));\n}\n.border-gray-200 {\n --tw-border-opacity: 1;\n border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));\n}\n.border-gray-300 {\n --tw-border-opacity: 1;\n border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));\n}\n.border-green-200 {\n --tw-border-opacity: 1;\n border-color: rgb(187 247 208 / var(--tw-border-opacity, 1));\n}\n.border-green-300 {\n --tw-border-opacity: 1;\n border-color: rgb(134 239 172 / var(--tw-border-opacity, 1));\n}\n.border-green-400 {\n --tw-border-opacity: 1;\n border-color: rgb(74 222 128 / var(--tw-border-opacity, 1));\n}\n.border-green-500 {\n --tw-border-opacity: 1;\n border-color: rgb(34 197 94 / var(--tw-border-opacity, 1));\n}\n.border-orange-200 {\n --tw-border-opacity: 1;\n border-color: rgb(254 215 170 / var(--tw-border-opacity, 1));\n}\n.border-orange-300 {\n --tw-border-opacity: 1;\n border-color: rgb(253 186 116 / var(--tw-border-opacity, 1));\n}\n.border-primary {\n border-color: var(--color-primary);\n}\n.border-purple-100 {\n --tw-border-opacity: 1;\n border-color: rgb(243 232 255 / var(--tw-border-opacity, 1));\n}\n.border-purple-200 {\n --tw-border-opacity: 1;\n border-color: rgb(233 213 255 / var(--tw-border-opacity, 1));\n}\n.border-red-200 {\n --tw-border-opacity: 1;\n border-color: rgb(254 202 202 / var(--tw-border-opacity, 1));\n}\n.border-red-300 {\n --tw-border-opacity: 1;\n border-color: rgb(252 165 165 / var(--tw-border-opacity, 1));\n}\n.border-red-400 {\n --tw-border-opacity: 1;\n border-color: rgb(248 113 113 / var(--tw-border-opacity, 1));\n}\n.border-red-500 {\n --tw-border-opacity: 1;\n border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));\n}\n.border-transparent {\n border-color: transparent;\n}\n.border-white {\n --tw-border-opacity: 1;\n border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));\n}\n.border-white\\/30 {\n border-color: rgb(255 255 255 / 0.3);\n}\n.border-yellow-400 {\n --tw-border-opacity: 1;\n border-color: rgb(250 204 21 / var(--tw-border-opacity, 1));\n}\n.border-yellow-500 {\n --tw-border-opacity: 1;\n border-color: rgb(234 179 8 / var(--tw-border-opacity, 1));\n}\n.border-t-gray-900 {\n --tw-border-opacity: 1;\n border-top-color: rgb(17 24 39 / var(--tw-border-opacity, 1));\n}\n.border-t-white {\n --tw-border-opacity: 1;\n border-top-color: rgb(255 255 255 / var(--tw-border-opacity, 1));\n}\n.\\!bg-transparent {\n background-color: transparent !important;\n}\n.bg-accent {\n background-color: var(--color-accent);\n}\n.bg-black {\n --tw-bg-opacity: 1;\n background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));\n}\n.bg-black\\/0 {\n background-color: rgb(0 0 0 / 0);\n}\n.bg-black\\/40 {\n background-color: rgb(0 0 0 / 0.4);\n}\n.bg-blue-100 {\n --tw-bg-opacity: 1;\n background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));\n}\n.bg-blue-50 {\n --tw-bg-opacity: 1;\n background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));\n}\n.bg-blue-50\\/95 {\n background-color: rgb(239 246 255 / 0.95);\n}\n.bg-blue-500 {\n --tw-bg-opacity: 1;\n background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));\n}\n.bg-blue-600 {\n --tw-bg-opacity: 1;\n background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));\n}\n.bg-current {\n background-color: currentColor;\n}\n.bg-gray-100 {\n --tw-bg-opacity: 1;\n background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));\n}\n.bg-gray-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));\n}\n.bg-gray-400 {\n --tw-bg-opacity: 1;\n background-color: rgb(156 163 175 / var(--tw-bg-opacity, 1));\n}\n.bg-gray-50 {\n --tw-bg-opacity: 1;\n background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));\n}\n.bg-gray-900 {\n --tw-bg-opacity: 1;\n background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));\n}\n.bg-green-100 {\n --tw-bg-opacity: 1;\n background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1));\n}\n.bg-green-50 {\n --tw-bg-opacity: 1;\n background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1));\n}\n.bg-green-50\\/95 {\n background-color: rgb(240 253 244 / 0.95);\n}\n.bg-green-600 {\n --tw-bg-opacity: 1;\n background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1));\n}\n.bg-indigo-100 {\n --tw-bg-opacity: 1;\n background-color: rgb(224 231 255 / var(--tw-bg-opacity, 1));\n}\n.bg-orange-100 {\n --tw-bg-opacity: 1;\n background-color: rgb(255 237 213 / var(--tw-bg-opacity, 1));\n}\n.bg-orange-50 {\n --tw-bg-opacity: 1;\n background-color: rgb(255 247 237 / var(--tw-bg-opacity, 1));\n}\n.bg-primary {\n background-color: var(--color-primary);\n}\n.bg-purple-100 {\n --tw-bg-opacity: 1;\n background-color: rgb(243 232 255 / var(--tw-bg-opacity, 1));\n}\n.bg-purple-50 {\n --tw-bg-opacity: 1;\n background-color: rgb(250 245 255 / var(--tw-bg-opacity, 1));\n}\n.bg-red-100 {\n --tw-bg-opacity: 1;\n background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));\n}\n.bg-red-50 {\n --tw-bg-opacity: 1;\n background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));\n}\n.bg-red-50\\/95 {\n background-color: rgb(254 242 242 / 0.95);\n}\n.bg-red-600 {\n --tw-bg-opacity: 1;\n background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));\n}\n.bg-success {\n background-color: var(--color-success);\n}\n.bg-teal-100 {\n --tw-bg-opacity: 1;\n background-color: rgb(204 251 241 / var(--tw-bg-opacity, 1));\n}\n.bg-transparent {\n background-color: transparent;\n}\n.bg-warning {\n background-color: var(--color-warning);\n}\n.bg-white {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));\n}\n.bg-white\\/95 {\n background-color: rgb(255 255 255 / 0.95);\n}\n.bg-yellow-100 {\n --tw-bg-opacity: 1;\n background-color: rgb(254 249 195 / var(--tw-bg-opacity, 1));\n}\n.bg-yellow-50 {\n --tw-bg-opacity: 1;\n background-color: rgb(254 252 232 / var(--tw-bg-opacity, 1));\n}\n.bg-yellow-50\\/95 {\n background-color: rgb(254 252 232 / 0.95);\n}\n.bg-opacity-50 {\n --tw-bg-opacity: 0.5;\n}\n.bg-gradient-to-r {\n background-image: linear-gradient(to right, var(--tw-gradient-stops));\n}\n.from-blue-50 {\n --tw-gradient-from: #eff6ff var(--tw-gradient-from-position);\n --tw-gradient-to: rgb(239 246 255 / 0) var(--tw-gradient-to-position);\n --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);\n}\n.from-green-500 {\n --tw-gradient-from: #22c55e var(--tw-gradient-from-position);\n --tw-gradient-to: rgb(34 197 94 / 0) var(--tw-gradient-to-position);\n --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);\n}\n.from-purple-50 {\n --tw-gradient-from: #faf5ff var(--tw-gradient-from-position);\n --tw-gradient-to: rgb(250 245 255 / 0) var(--tw-gradient-to-position);\n --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);\n}\n.to-green-600 {\n --tw-gradient-to: #16a34a var(--tw-gradient-to-position);\n}\n.to-pink-50 {\n --tw-gradient-to: #fdf2f8 var(--tw-gradient-to-position);\n}\n.to-purple-50 {\n --tw-gradient-to: #faf5ff var(--tw-gradient-to-position);\n}\n.object-contain {\n -o-object-fit: contain;\n object-fit: contain;\n}\n.object-cover {\n -o-object-fit: cover;\n object-fit: cover;\n}\n.\\!p-1 {\n padding: 0.25rem !important;\n}\n.\\!p-1\\.5 {\n padding: 0.375rem !important;\n}\n.\\!p-2 {\n padding: 0.5rem !important;\n}\n.p-0 {\n padding: 0px;\n}\n.p-0\\.5 {\n padding: 0.125rem;\n}\n.p-1 {\n padding: 0.25rem;\n}\n.p-1\\.5 {\n padding: 0.375rem;\n}\n.p-2 {\n padding: 0.5rem;\n}\n.p-3 {\n padding: 0.75rem;\n}\n.p-4 {\n padding: 1rem;\n}\n.p-5 {\n padding: 1.25rem;\n}\n.p-6 {\n padding: 1.5rem;\n}\n.p-8 {\n padding: 2rem;\n}\n.\\!px-1 {\n padding-left: 0.25rem !important;\n padding-right: 0.25rem !important;\n}\n.\\!px-2 {\n padding-left: 0.5rem !important;\n padding-right: 0.5rem !important;\n}\n.\\!px-3 {\n padding-left: 0.75rem !important;\n padding-right: 0.75rem !important;\n}\n.\\!py-0 {\n padding-top: 0px !important;\n padding-bottom: 0px !important;\n}\n.\\!py-0\\.5 {\n padding-top: 0.125rem !important;\n padding-bottom: 0.125rem !important;\n}\n.\\!py-1\\.5 {\n padding-top: 0.375rem !important;\n padding-bottom: 0.375rem !important;\n}\n.px-0 {\n padding-left: 0px;\n padding-right: 0px;\n}\n.px-1 {\n padding-left: 0.25rem;\n padding-right: 0.25rem;\n}\n.px-1\\.5 {\n padding-left: 0.375rem;\n padding-right: 0.375rem;\n}\n.px-2 {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n}\n.px-3 {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n}\n.px-4 {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n.px-6 {\n padding-left: 1.5rem;\n padding-right: 1.5rem;\n}\n.px-8 {\n padding-left: 2rem;\n padding-right: 2rem;\n}\n.px-\\[6px\\] {\n padding-left: 6px;\n padding-right: 6px;\n}\n.py-0 {\n padding-top: 0px;\n padding-bottom: 0px;\n}\n.py-0\\.5 {\n padding-top: 0.125rem;\n padding-bottom: 0.125rem;\n}\n.py-1 {\n padding-top: 0.25rem;\n padding-bottom: 0.25rem;\n}\n.py-1\\.5 {\n padding-top: 0.375rem;\n padding-bottom: 0.375rem;\n}\n.py-12 {\n padding-top: 3rem;\n padding-bottom: 3rem;\n}\n.py-16 {\n padding-top: 4rem;\n padding-bottom: 4rem;\n}\n.py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n.py-2\\.5 {\n padding-top: 0.625rem;\n padding-bottom: 0.625rem;\n}\n.py-3 {\n padding-top: 0.75rem;\n padding-bottom: 0.75rem;\n}\n.py-4 {\n padding-top: 1rem;\n padding-bottom: 1rem;\n}\n.py-6 {\n padding-top: 1.5rem;\n padding-bottom: 1.5rem;\n}\n.py-8 {\n padding-top: 2rem;\n padding-bottom: 2rem;\n}\n.\\!pl-0 {\n padding-left: 0px !important;\n}\n.\\!pl-1 {\n padding-left: 0.25rem !important;\n}\n.\\!pl-6 {\n padding-left: 1.5rem !important;\n}\n.\\!pr-2 {\n padding-right: 0.5rem !important;\n}\n.pb-0 {\n padding-bottom: 0px;\n}\n.pb-2 {\n padding-bottom: 0.5rem;\n}\n.pb-24 {\n padding-bottom: 6rem;\n}\n.pb-3 {\n padding-bottom: 0.75rem;\n}\n.pb-4 {\n padding-bottom: 1rem;\n}\n.pb-6 {\n padding-bottom: 1.5rem;\n}\n.pb-\\[6px\\] {\n padding-bottom: 6px;\n}\n.pl-10 {\n padding-left: 2.5rem;\n}\n.pl-2 {\n padding-left: 0.5rem;\n}\n.pl-4 {\n padding-left: 1rem;\n}\n.pl-5 {\n padding-left: 1.25rem;\n}\n.pl-6 {\n padding-left: 1.5rem;\n}\n.pr-10 {\n padding-right: 2.5rem;\n}\n.pr-12 {\n padding-right: 3rem;\n}\n.pr-24 {\n padding-right: 6rem;\n}\n.pr-4 {\n padding-right: 1rem;\n}\n.pr-8 {\n padding-right: 2rem;\n}\n.pt-0 {\n padding-top: 0px;\n}\n.pt-1 {\n padding-top: 0.25rem;\n}\n.pt-2 {\n padding-top: 0.5rem;\n}\n.pt-24 {\n padding-top: 6rem;\n}\n.pt-3 {\n padding-top: 0.75rem;\n}\n.pt-4 {\n padding-top: 1rem;\n}\n.pt-6 {\n padding-top: 1.5rem;\n}\n.pt-8 {\n padding-top: 2rem;\n}\n.text-left {\n text-align: left;\n}\n.text-center {\n text-align: center;\n}\n.text-right {\n text-align: right;\n}\n.align-middle {\n vertical-align: middle;\n}\n.font-mono {\n font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n}\n.font-sans {\n font-family: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n}\n.font-serif {\n font-family: ui-serif, Georgia, Cambria, \"Times New Roman\", Times, serif;\n}\n.text-2xl {\n font-size: 1.5rem;\n line-height: 2rem;\n}\n.text-3xl {\n font-size: 1.875rem;\n line-height: 2.25rem;\n}\n.text-4xl {\n font-size: 2.25rem;\n line-height: 2.5rem;\n}\n.text-7xl {\n font-size: 4.5rem;\n line-height: 1;\n}\n.text-\\[10px\\] {\n font-size: 10px;\n}\n.text-\\[13px\\] {\n font-size: 13px;\n}\n.text-base {\n font-size: 1rem;\n line-height: 1.5rem;\n}\n.text-lg {\n font-size: 1.125rem;\n line-height: 1.75rem;\n}\n.text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem;\n}\n.text-xl {\n font-size: 1.25rem;\n line-height: 1.75rem;\n}\n.text-xs {\n font-size: 0.75rem;\n line-height: 1rem;\n}\n.font-bold {\n font-weight: 700;\n}\n.font-medium {\n font-weight: 500;\n}\n.font-normal {\n font-weight: 400;\n}\n.font-semibold {\n font-weight: 600;\n}\n.uppercase {\n text-transform: uppercase;\n}\n.capitalize {\n text-transform: capitalize;\n}\n.italic {\n font-style: italic;\n}\n.leading-none {\n line-height: 1;\n}\n.leading-relaxed {\n line-height: 1.625;\n}\n.leading-tight {\n line-height: 1.25;\n}\n.tracking-tight {\n letter-spacing: -0.025em;\n}\n.tracking-tighter {\n letter-spacing: -0.05em;\n}\n.tracking-wide {\n letter-spacing: 0.025em;\n}\n.tracking-wider {\n letter-spacing: 0.05em;\n}\n.tracking-widest {\n letter-spacing: 0.1em;\n}\n.\\!text-gray-300 {\n --tw-text-opacity: 1 !important;\n color: rgb(209 213 219 / var(--tw-text-opacity, 1)) !important;\n}\n.\\!text-gray-400 {\n --tw-text-opacity: 1 !important;\n color: rgb(156 163 175 / var(--tw-text-opacity, 1)) !important;\n}\n.text-accent {\n color: var(--color-accent);\n}\n.text-amber-500 {\n --tw-text-opacity: 1;\n color: rgb(245 158 11 / var(--tw-text-opacity, 1));\n}\n.text-blue-500 {\n --tw-text-opacity: 1;\n color: rgb(59 130 246 / var(--tw-text-opacity, 1));\n}\n.text-blue-600 {\n --tw-text-opacity: 1;\n color: rgb(37 99 235 / var(--tw-text-opacity, 1));\n}\n.text-blue-700 {\n --tw-text-opacity: 1;\n color: rgb(29 78 216 / var(--tw-text-opacity, 1));\n}\n.text-blue-800 {\n --tw-text-opacity: 1;\n color: rgb(30 64 175 / var(--tw-text-opacity, 1));\n}\n.text-blue-900 {\n --tw-text-opacity: 1;\n color: rgb(30 58 138 / var(--tw-text-opacity, 1));\n}\n.text-danger {\n color: var(--color-danger);\n}\n.text-gray-200 {\n --tw-text-opacity: 1;\n color: rgb(229 231 235 / var(--tw-text-opacity, 1));\n}\n.text-gray-300 {\n --tw-text-opacity: 1;\n color: rgb(209 213 219 / var(--tw-text-opacity, 1));\n}\n.text-gray-400 {\n --tw-text-opacity: 1;\n color: rgb(156 163 175 / var(--tw-text-opacity, 1));\n}\n.text-gray-500 {\n --tw-text-opacity: 1;\n color: rgb(107 114 128 / var(--tw-text-opacity, 1));\n}\n.text-gray-600 {\n --tw-text-opacity: 1;\n color: rgb(75 85 99 / var(--tw-text-opacity, 1));\n}\n.text-gray-700 {\n --tw-text-opacity: 1;\n color: rgb(55 65 81 / var(--tw-text-opacity, 1));\n}\n.text-gray-800 {\n --tw-text-opacity: 1;\n color: rgb(31 41 55 / var(--tw-text-opacity, 1));\n}\n.text-gray-900 {\n --tw-text-opacity: 1;\n color: rgb(17 24 39 / var(--tw-text-opacity, 1));\n}\n.text-green-400 {\n --tw-text-opacity: 1;\n color: rgb(74 222 128 / var(--tw-text-opacity, 1));\n}\n.text-green-500 {\n --tw-text-opacity: 1;\n color: rgb(34 197 94 / var(--tw-text-opacity, 1));\n}\n.text-green-600 {\n --tw-text-opacity: 1;\n color: rgb(22 163 74 / var(--tw-text-opacity, 1));\n}\n.text-green-700 {\n --tw-text-opacity: 1;\n color: rgb(21 128 61 / var(--tw-text-opacity, 1));\n}\n.text-green-800 {\n --tw-text-opacity: 1;\n color: rgb(22 101 52 / var(--tw-text-opacity, 1));\n}\n.text-green-900 {\n --tw-text-opacity: 1;\n color: rgb(20 83 45 / var(--tw-text-opacity, 1));\n}\n.text-indigo-700 {\n --tw-text-opacity: 1;\n color: rgb(67 56 202 / var(--tw-text-opacity, 1));\n}\n.text-orange-400 {\n --tw-text-opacity: 1;\n color: rgb(251 146 60 / var(--tw-text-opacity, 1));\n}\n.text-orange-500 {\n --tw-text-opacity: 1;\n color: rgb(249 115 22 / var(--tw-text-opacity, 1));\n}\n.text-orange-600 {\n --tw-text-opacity: 1;\n color: rgb(234 88 12 / var(--tw-text-opacity, 1));\n}\n.text-orange-700 {\n --tw-text-opacity: 1;\n color: rgb(194 65 12 / var(--tw-text-opacity, 1));\n}\n.text-orange-800 {\n --tw-text-opacity: 1;\n color: rgb(154 52 18 / var(--tw-text-opacity, 1));\n}\n.text-primary {\n color: var(--color-primary);\n}\n.text-purple-500 {\n --tw-text-opacity: 1;\n color: rgb(168 85 247 / var(--tw-text-opacity, 1));\n}\n.text-purple-600 {\n --tw-text-opacity: 1;\n color: rgb(147 51 234 / var(--tw-text-opacity, 1));\n}\n.text-purple-700 {\n --tw-text-opacity: 1;\n color: rgb(126 34 206 / var(--tw-text-opacity, 1));\n}\n.text-purple-800 {\n --tw-text-opacity: 1;\n color: rgb(107 33 168 / var(--tw-text-opacity, 1));\n}\n.text-red-400 {\n --tw-text-opacity: 1;\n color: rgb(248 113 113 / var(--tw-text-opacity, 1));\n}\n.text-red-500 {\n --tw-text-opacity: 1;\n color: rgb(239 68 68 / var(--tw-text-opacity, 1));\n}\n.text-red-600 {\n --tw-text-opacity: 1;\n color: rgb(220 38 38 / var(--tw-text-opacity, 1));\n}\n.text-red-700 {\n --tw-text-opacity: 1;\n color: rgb(185 28 28 / var(--tw-text-opacity, 1));\n}\n.text-red-800 {\n --tw-text-opacity: 1;\n color: rgb(153 27 27 / var(--tw-text-opacity, 1));\n}\n.text-red-900 {\n --tw-text-opacity: 1;\n color: rgb(127 29 29 / var(--tw-text-opacity, 1));\n}\n.text-success {\n color: var(--color-success);\n}\n.text-teal-700 {\n --tw-text-opacity: 1;\n color: rgb(15 118 110 / var(--tw-text-opacity, 1));\n}\n.text-white {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity, 1));\n}\n.text-white\\/80 {\n color: rgb(255 255 255 / 0.8);\n}\n.text-yellow-600 {\n --tw-text-opacity: 1;\n color: rgb(202 138 4 / var(--tw-text-opacity, 1));\n}\n.text-yellow-700 {\n --tw-text-opacity: 1;\n color: rgb(161 98 7 / var(--tw-text-opacity, 1));\n}\n.text-yellow-800 {\n --tw-text-opacity: 1;\n color: rgb(133 77 14 / var(--tw-text-opacity, 1));\n}\n.text-yellow-900 {\n --tw-text-opacity: 1;\n color: rgb(113 63 18 / var(--tw-text-opacity, 1));\n}\n.underline {\n text-decoration-line: underline;\n}\n.line-through {\n text-decoration-line: line-through;\n}\n.underline-offset-4 {\n text-underline-offset: 4px;\n}\n.opacity-0 {\n opacity: 0;\n}\n.opacity-100 {\n opacity: 1;\n}\n.opacity-25 {\n opacity: 0.25;\n}\n.opacity-30 {\n opacity: 0.3;\n}\n.opacity-50 {\n opacity: 0.5;\n}\n.opacity-60 {\n opacity: 0.6;\n}\n.opacity-75 {\n opacity: 0.75;\n}\n.opacity-90 {\n opacity: 0.9;\n}\n.\\!shadow-none {\n --tw-shadow: 0 0 #0000 !important;\n --tw-shadow-colored: 0 0 #0000 !important;\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;\n}\n.shadow-2xl {\n --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-\\[0_5px_15px_-3px_rgb\$0_0_0_\\/_0\\.08\$\\] {\n --tw-shadow: 0 5px 15px -3px rgb(0 0 0 / 0.08);\n --tw-shadow-colored: 0 5px 15px -3px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-lg {\n --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-md {\n --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-sm {\n --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-xl {\n --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.\\!outline-none {\n outline: 2px solid transparent !important;\n outline-offset: 2px !important;\n}\n.outline-none {\n outline: 2px solid transparent;\n outline-offset: 2px;\n}\n.outline {\n outline-style: solid;\n}\n.\\!ring-0 {\n --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;\n --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;\n box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;\n}\n.ring {\n --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n.blur {\n --tw-blur: blur(8px);\n filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n.drop-shadow-\\[0_2px_8px_rgba\$0\\2c 0\\2c 0\\2c 0\\.8\$\\] {\n --tw-drop-shadow: drop-shadow(0 2px 8px rgba(0,0,0,0.8));\n filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n.grayscale {\n --tw-grayscale: grayscale(100%);\n filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n.filter {\n filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n.backdrop-blur-sm {\n --tw-backdrop-blur: blur(4px);\n backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);\n}\n.backdrop-filter {\n backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);\n}\n.transition {\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.transition-all {\n transition-property: all;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.transition-colors {\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.transition-opacity {\n transition-property: opacity;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.transition-shadow {\n transition-property: box-shadow;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.transition-transform {\n transition-property: transform;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.duration-100 {\n transition-duration: 100ms;\n}\n.duration-150 {\n transition-duration: 150ms;\n}\n.duration-200 {\n transition-duration: 200ms;\n}\n.duration-300 {\n transition-duration: 300ms;\n}\n.duration-75 {\n transition-duration: 75ms;\n}\n.ease-in {\n transition-timing-function: cubic-bezier(0.4, 0, 1, 1);\n}\n.ease-in-out {\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n}\n.ease-out {\n transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n}\n\n/* \n * You can add custom @apply-based utilities here\n * Example:\n * \n * .btn-primary {\n * @apply px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600;\n * }\n */\n\n.backdrop\\:bg-black\\/90::backdrop {\n background-color: rgb(0 0 0 / 0.9);\n}\n\n.backdrop\\:backdrop-blur-sm::backdrop {\n --tw-backdrop-blur: blur(4px);\n backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);\n}\n\n.after\\:absolute::after {\n content: var(--tw-content);\n position: absolute;\n}\n\n.after\\:left-\\[2px\\]::after {\n content: var(--tw-content);\n left: 2px;\n}\n\n.after\\:top-\\[2px\\]::after {\n content: var(--tw-content);\n top: 2px;\n}\n\n.after\\:h-5::after {\n content: var(--tw-content);\n height: 1.25rem;\n}\n\n.after\\:w-5::after {\n content: var(--tw-content);\n width: 1.25rem;\n}\n\n.after\\:rounded-full::after {\n content: var(--tw-content);\n border-radius: 9999px;\n}\n\n.after\\:border::after {\n content: var(--tw-content);\n border-width: 1px;\n}\n\n.after\\:border-gray-300::after {\n content: var(--tw-content);\n --tw-border-opacity: 1;\n border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));\n}\n\n.after\\:bg-white::after {\n content: var(--tw-content);\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));\n}\n\n.after\\:transition-all::after {\n content: var(--tw-content);\n transition-property: all;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n\n.after\\:content-\\[\\'\\'\\]::after {\n --tw-content: '';\n content: var(--tw-content);\n}\n\n.hover\\:border-blue-500:hover {\n --tw-border-opacity: 1;\n border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));\n}\n\n.hover\\:border-gray-300:hover {\n --tw-border-opacity: 1;\n border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));\n}\n\n.hover\\:border-gray-400:hover {\n --tw-border-opacity: 1;\n border-color: rgb(156 163 175 / var(--tw-border-opacity, 1));\n}\n\n.hover\\:border-purple-300:hover {\n --tw-border-opacity: 1;\n border-color: rgb(216 180 254 / var(--tw-border-opacity, 1));\n}\n\n.hover\\:border-purple-500:hover {\n --tw-border-opacity: 1;\n border-color: rgb(168 85 247 / var(--tw-border-opacity, 1));\n}\n\n.hover\\:bg-accent:hover {\n background-color: var(--color-accent);\n}\n\n.hover\\:bg-black\\/60:hover {\n background-color: rgb(0 0 0 / 0.6);\n}\n\n.hover\\:bg-blue-100:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));\n}\n\n.hover\\:bg-blue-700:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1));\n}\n\n.hover\\:bg-gray-100:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));\n}\n\n.hover\\:bg-gray-50:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));\n}\n\n.hover\\:bg-gray-700:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));\n}\n\n.hover\\:bg-green-200:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(187 247 208 / var(--tw-bg-opacity, 1));\n}\n\n.hover\\:bg-green-700:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(21 128 61 / var(--tw-bg-opacity, 1));\n}\n\n.hover\\:bg-primary-hover:hover {\n background-color: var(--color-primary-hover);\n}\n\n.hover\\:bg-red-100:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));\n}\n\n.hover\\:bg-red-50:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));\n}\n\n.hover\\:bg-red-700:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(185 28 28 / var(--tw-bg-opacity, 1));\n}\n\n.hover\\:bg-white\\/10:hover {\n background-color: rgb(255 255 255 / 0.1);\n}\n\n.hover\\:text-accent:hover {\n color: var(--color-accent);\n}\n\n.hover\\:text-black:hover {\n --tw-text-opacity: 1;\n color: rgb(0 0 0 / var(--tw-text-opacity, 1));\n}\n\n.hover\\:text-blue-600:hover {\n --tw-text-opacity: 1;\n color: rgb(37 99 235 / var(--tw-text-opacity, 1));\n}\n\n.hover\\:text-blue-800:hover {\n --tw-text-opacity: 1;\n color: rgb(30 64 175 / var(--tw-text-opacity, 1));\n}\n\n.hover\\:text-gray-600:hover {\n --tw-text-opacity: 1;\n color: rgb(75 85 99 / var(--tw-text-opacity, 1));\n}\n\n.hover\\:text-gray-700:hover {\n --tw-text-opacity: 1;\n color: rgb(55 65 81 / var(--tw-text-opacity, 1));\n}\n\n.hover\\:text-gray-800:hover {\n --tw-text-opacity: 1;\n color: rgb(31 41 55 / var(--tw-text-opacity, 1));\n}\n\n.hover\\:text-green-600:hover {\n --tw-text-opacity: 1;\n color: rgb(22 163 74 / var(--tw-text-opacity, 1));\n}\n\n.hover\\:text-green-800:hover {\n --tw-text-opacity: 1;\n color: rgb(22 101 52 / var(--tw-text-opacity, 1));\n}\n\n.hover\\:text-primary:hover {\n color: var(--color-primary);\n}\n\n.hover\\:text-purple-800:hover {\n --tw-text-opacity: 1;\n color: rgb(107 33 168 / var(--tw-text-opacity, 1));\n}\n\n.hover\\:text-red-500:hover {\n --tw-text-opacity: 1;\n color: rgb(239 68 68 / var(--tw-text-opacity, 1));\n}\n\n.hover\\:text-red-600:hover {\n --tw-text-opacity: 1;\n color: rgb(220 38 38 / var(--tw-text-opacity, 1));\n}\n\n.hover\\:text-red-700:hover {\n --tw-text-opacity: 1;\n color: rgb(185 28 28 / var(--tw-text-opacity, 1));\n}\n\n.hover\\:text-red-800:hover {\n --tw-text-opacity: 1;\n color: rgb(153 27 27 / var(--tw-text-opacity, 1));\n}\n\n.hover\\:text-white:hover {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity, 1));\n}\n\n.hover\\:underline:hover {\n text-decoration-line: underline;\n}\n\n.hover\\:shadow-lg:hover {\n --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.hover\\:shadow-md:hover {\n --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.focus\\:border-blue-500:focus {\n --tw-border-opacity: 1;\n border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));\n}\n\n.focus\\:border-gray-400:focus {\n --tw-border-opacity: 1;\n border-color: rgb(156 163 175 / var(--tw-border-opacity, 1));\n}\n\n.focus\\:shadow-none:focus {\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.focus\\:outline-none:focus {\n outline: 2px solid transparent;\n outline-offset: 2px;\n}\n\n.focus\\:\\!ring-0:focus {\n --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;\n --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;\n box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;\n}\n\n.focus\\:ring-0:focus {\n --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n\n.focus\\:ring-1:focus {\n --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n\n.focus\\:ring-2:focus {\n --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n\n.focus\\:ring-blue-500:focus {\n --tw-ring-opacity: 1;\n --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1));\n}\n\n.focus-visible\\:outline-none:focus-visible {\n outline: 2px solid transparent;\n outline-offset: 2px;\n}\n\n.focus-visible\\:ring-2:focus-visible {\n --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n\n.focus-visible\\:ring-offset-2:focus-visible {\n --tw-ring-offset-width: 2px;\n}\n\n.disabled\\:pointer-events-none:disabled {\n pointer-events: none;\n}\n\n.disabled\\:cursor-not-allowed:disabled {\n cursor: not-allowed;\n}\n\n.disabled\\:bg-gray-300:disabled {\n --tw-bg-opacity: 1;\n background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));\n}\n\n.disabled\\:bg-gray-50:disabled {\n --tw-bg-opacity: 1;\n background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));\n}\n\n.disabled\\:opacity-50:disabled {\n opacity: 0.5;\n}\n\n.group:hover .group-hover\\:scale-105 {\n --tw-scale-x: 1.05;\n --tw-scale-y: 1.05;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.group:hover .group-hover\\:scale-110 {\n --tw-scale-x: 1.1;\n --tw-scale-y: 1.1;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.group:hover .group-hover\\:bg-black\\/20 {\n background-color: rgb(0 0 0 / 0.2);\n}\n\n.group:hover .group-hover\\:bg-black\\/30 {\n background-color: rgb(0 0 0 / 0.3);\n}\n\n.group:hover .group-hover\\:opacity-100 {\n opacity: 1;\n}\n\n.peer:checked ~ .peer-checked\\:bg-blue-600 {\n --tw-bg-opacity: 1;\n background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));\n}\n\n.peer:checked ~ .peer-checked\\:bg-green-600 {\n --tw-bg-opacity: 1;\n background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1));\n}\n\n.peer:checked ~ .peer-checked\\:after\\:translate-x-full::after {\n content: var(--tw-content);\n --tw-translate-x: 100%;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.peer:checked ~ .peer-checked\\:after\\:border-white::after {\n content: var(--tw-content);\n --tw-border-opacity: 1;\n border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));\n}\n\n.peer:focus ~ .peer-focus\\:outline-none {\n outline: 2px solid transparent;\n outline-offset: 2px;\n}\n\n.peer:focus ~ .peer-focus\\:ring-4 {\n --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n\n.peer:focus ~ .peer-focus\\:ring-blue-300 {\n --tw-ring-opacity: 1;\n --tw-ring-color: rgb(147 197 253 / var(--tw-ring-opacity, 1));\n}\n\n.peer:focus ~ .peer-focus\\:ring-green-300 {\n --tw-ring-opacity: 1;\n --tw-ring-color: rgb(134 239 172 / var(--tw-ring-opacity, 1));\n}\n\n@media (min-width: 640px) {\n\n .sm\\:mb-6 {\n margin-bottom: 1.5rem;\n }\n\n .sm\\:ml-6 {\n margin-left: 1.5rem;\n }\n\n .sm\\:mr-6 {\n margin-right: 1.5rem;\n }\n\n .sm\\:mt-6 {\n margin-top: 1.5rem;\n }\n\n .sm\\:block {\n display: block;\n }\n\n .sm\\:max-w-md {\n max-width: 28rem;\n }\n\n .sm\\:columns-3 {\n -moz-columns: 3;\n columns: 3;\n }\n\n .sm\\:grid-cols-2 {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n\n .sm\\:grid-cols-3 {\n grid-template-columns: repeat(3, minmax(0, 1fr));\n }\n\n .sm\\:grid-cols-4 {\n grid-template-columns: repeat(4, minmax(0, 1fr));\n }\n\n .sm\\:flex-row {\n flex-direction: row;\n }\n\n .sm\\:items-center {\n align-items: center;\n }\n\n .sm\\:rounded-md {\n border-radius: 0.375rem;\n }\n}\n\n@media (min-width: 768px) {\n\n .md\\:mx-auto {\n margin-left: auto;\n margin-right: auto;\n }\n\n .md\\:flex {\n display: flex;\n }\n\n .md\\:columns-4 {\n -moz-columns: 4;\n columns: 4;\n }\n\n .md\\:grid-cols-2 {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n\n .md\\:grid-cols-3 {\n grid-template-columns: repeat(3, minmax(0, 1fr));\n }\n\n .md\\:grid-cols-4 {\n grid-template-columns: repeat(4, minmax(0, 1fr));\n }\n\n .md\\:grid-cols-6 {\n grid-template-columns: repeat(6, minmax(0, 1fr));\n }\n\n .md\\:flex-row {\n flex-direction: row;\n }\n}\n\n@media (min-width: 1024px) {\n\n .lg\\:col-span-2 {\n grid-column: span 2 / span 2;\n }\n\n .lg\\:grid-cols-11 {\n grid-template-columns: repeat(11, minmax(0, 1fr));\n }\n\n .lg\\:grid-cols-5 {\n grid-template-columns: repeat(5, minmax(0, 1fr));\n }\n}\n\n@media (prefers-color-scheme: dark) {\n\n .dark\\:border-green-600 {\n --tw-border-opacity: 1;\n border-color: rgb(22 163 74 / var(--tw-border-opacity, 1));\n }\n\n .dark\\:border-red-500 {\n --tw-border-opacity: 1;\n border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));\n }\n\n .dark\\:border-red-600 {\n --tw-border-opacity: 1;\n border-color: rgb(220 38 38 / var(--tw-border-opacity, 1));\n }\n\n .dark\\:bg-green-700 {\n --tw-bg-opacity: 1;\n background-color: rgb(21 128 61 / var(--tw-bg-opacity, 1));\n }\n\n .dark\\:bg-green-950\\/30 {\n background-color: rgb(5 46 22 / 0.3);\n }\n\n .dark\\:bg-red-700 {\n --tw-bg-opacity: 1;\n background-color: rgb(185 28 28 / var(--tw-bg-opacity, 1));\n }\n\n .dark\\:bg-red-950\\/30 {\n background-color: rgb(69 10 10 / 0.3);\n }\n\n .dark\\:text-green-100 {\n --tw-text-opacity: 1;\n color: rgb(220 252 231 / var(--tw-text-opacity, 1));\n }\n\n .dark\\:text-green-200 {\n --tw-text-opacity: 1;\n color: rgb(187 247 208 / var(--tw-text-opacity, 1));\n }\n\n .dark\\:text-green-400 {\n --tw-text-opacity: 1;\n color: rgb(74 222 128 / var(--tw-text-opacity, 1));\n }\n\n .dark\\:text-green-500 {\n --tw-text-opacity: 1;\n color: rgb(34 197 94 / var(--tw-text-opacity, 1));\n }\n\n .dark\\:text-red-100 {\n --tw-text-opacity: 1;\n color: rgb(254 226 226 / var(--tw-text-opacity, 1));\n }\n\n .dark\\:text-red-200 {\n --tw-text-opacity: 1;\n color: rgb(254 202 202 / var(--tw-text-opacity, 1));\n }\n\n .dark\\:text-red-300 {\n --tw-text-opacity: 1;\n color: rgb(252 165 165 / var(--tw-text-opacity, 1));\n }\n\n .dark\\:text-red-400 {\n --tw-text-opacity: 1;\n color: rgb(248 113 113 / var(--tw-text-opacity, 1));\n }\n\n .dark\\:text-red-500 {\n --tw-text-opacity: 1;\n color: rgb(239 68 68 / var(--tw-text-opacity, 1));\n }\n\n .dark\\:hover\\:bg-gray-800:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));\n }\n\n .dark\\:hover\\:bg-green-600:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1));\n }\n\n .dark\\:hover\\:bg-red-600:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));\n }\n\n .dark\\:hover\\:bg-red-900\\/30:hover {\n background-color: rgb(127 29 29 / 0.3);\n }\n\n .dark\\:hover\\:text-gray-300:hover {\n --tw-text-opacity: 1;\n color: rgb(209 213 219 / var(--tw-text-opacity, 1));\n }\n\n .dark\\:hover\\:text-green-400:hover {\n --tw-text-opacity: 1;\n color: rgb(74 222 128 / var(--tw-text-opacity, 1));\n }\n\n .dark\\:hover\\:text-red-400:hover {\n --tw-text-opacity: 1;\n color: rgb(248 113 113 / var(--tw-text-opacity, 1));\n }\n}\n\n.\\[\\&\\:has\$\\[role\\=checkbox\\]\$\\]\\:pr-0:has([role=checkbox]) {\n padding-right: 0px;\n}\n\n",[],[480,498,579,589],"0d2bb4b8-e2e9-11f0-b141-42dde27851f2","config.js","0d2bb576-e2e9-11f0-b141-42dde27851f2",84,["D",1766815102465],"// Design theme configuration\n// ============================================================\n// THEME SWITCHING: Comment/uncomment the import below to switch themes\n// This should match the theme selected in theme.scss\n// ============================================================\n\n// DEFAULT THEME (uncomment this, comment out others)\n// import * as activeTheme from './default/config.js';\n\n// GROQ THEME (uncomment this, comment out others)\nimport * as activeTheme from './groq/config.js';\n\n// RETRO THEME (create retro/config.js first)\n// import * as activeTheme from './retro/config.js';\n\n// STARTUP THEME (create startup/config.js first)\n// import * as activeTheme from './startup/config.js';\n\n// LUMA THEME (create luma/config.js first)\n// import * as activeTheme from './luma/config.js';\n\n// ============================================================\n// Re-export theme data for direct access\n// ============================================================\nexport const themeName = activeTheme.themeName;\nexport const themeDescription = activeTheme.themeDescription;\nexport const typography = activeTheme.typography;\nexport const customColors = activeTheme.customColors;\nexport const semanticColors = activeTheme.semanticColors;\nexport const tailwindExtend = activeTheme.tailwindExtend;\nexport const themeConfig = activeTheme.themeConfig;\n\n// ============================================================\n// Generate Tailwind config script tag from theme data\n// ============================================================\nfunction generateTailwindScript() {\n // Build the color palette entries for Tailwind\n const colorEntries = Object.entries(customColors).map(([key, value]) => {\n return \" '\" + key + \"': window.themeConfig.customColors['\" + key + \"'].palette\";\n }).join(',\\n');\n\n // Build the themeConfig object as a string\n const themeConfigStr = JSON.stringify({\n typography: typography,\n customColors: customColors,\n semanticColors: semanticColors\n }, null, 2);\n\n // Build the complete script\n const script = '\\n';\n\n return script;\n}\n\n// Export the generated tailwind styles\nexport const tailwindStyles = generateTailwindScript();\n\n// Load the compiled theme CSS\nexport async function getStyles() {\n const baseUrl = new URL('.', import.meta.url);\n const cssUrl = new URL('./theme.css', baseUrl);\n const cssPath = cssUrl.protocol === 'file:' ? cssUrl.pathname : cssUrl.href;\n \n const baseCss = await Deno.readTextFile(cssPath);\n \n return {\n tailwind: tailwindStyles,\n baseCss: baseCss\n };\n}\n",[],[480,498,579,597],"0d55b45c-e2e9-11f0-bb45-42dde27851f2","_typography.scss","0d55b560-e2e9-11f0-bb45-42dde27851f2","0b67b3ac-e2e9-11f0-9dc9-42dde27851f2",92,["D",1766815102710],".theme-scope {\n /* ===================================\n Typography Tokens\n =================================== */\n\n /* Font Families */\n --font-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;\n --font-mono: 'Menlo', ui-monospace, SFMono-Regular, 'SF Mono', Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;\n --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;\n \n /* Marketing/Display Font (for landing pages, hero sections) */\n --font-display: var(--font-sans);\n \n /* Body Copy Font (for marketing content) */\n --font-marketing: var(--font-sans);\n\n /* Font Sizes */\n --text-xs: 0.75rem; /* 12px */\n --text-sm: 0.875rem; /* 14px */\n --text-base: 1rem; /* 16px */\n --text-lg: 1.125rem; /* 18px */\n --text-xl: 1.25rem; /* 20px */\n --text-2xl: 1.5rem; /* 24px */\n --text-3xl: 1.875rem; /* 30px */\n --text-4xl: 2.25rem; /* 36px */\n\n /* Font Weights */\n --font-normal: 400;\n --font-medium: 500;\n --font-semibold: 600;\n --font-bold: 700;\n\n /* Line Heights */\n --leading-none: 1;\n --leading-tight: 1.25;\n --leading-snug: 1.375;\n --leading-normal: 1.5;\n --leading-relaxed: 1.625;\n --leading-loose: 2;\n\n /* Letter Spacing */\n --tracking-tighter: -0.05em;\n --tracking-tight: -0.025em;\n --tracking-normal: 0;\n --tracking-wide: 0.025em;\n --tracking-wider: 0.05em;\n\n /* Heading Sizes (semantic) */\n --text-h1: 2rem; /* 32px */\n --text-h2: 1.5rem; /* 24px */\n --text-h3: 1.25rem; /* 20px */\n --text-h4: 1.125rem; /* 18px */\n --text-h5: 1rem; /* 16px */\n --text-h6: 0.875rem; /* 14px */\n\n /* Component-Specific Typography */\n --text-button: var(--text-sm);\n --text-button-sm: var(--text-xs);\n --text-badge: var(--text-xs);\n --text-input: var(--text-sm);\n --text-label: var(--text-sm);\n --text-copy-btn: var(--text-xs);\n}\n\n",[],[480,498,579,613,605],"tokens","3d04b68a-ef19-11f0-b16c-42dde27851f2","_spacing.scss","0d65876a-e2e9-11f0-8fcb-42dde27851f2",193,["D",1768155212502],".theme-scope {\n /* ===================================\n Spacing Tokens (Semantic)\n =================================== */\n\n /* Button Spacing */\n --space-btn-x: 0.875rem; /* 14px - horizontal padding */\n --space-btn-y: 0.5rem; /* 8px - vertical padding */\n --space-btn-sm-x: 0.5rem; /* 8px - small button horizontal */\n --space-btn-sm-y: 0.25rem; /* 4px - small button vertical */\n --space-btn-icon: 0.75rem; /* 12px - icon-only button padding */\n\n /* Input/Form Spacing */\n --space-input-x: 0.75rem; /* 12px - horizontal padding */\n --space-input-y: 0.5rem; /* 8px - vertical padding */\n \n /* Card Spacing */\n // --space-card-padding: 1.25rem; /* 20px - card body padding */\n --space-card-padding: 0.75rem; /* 20px - card body padding */\n \n /* Tab Spacing */\n --space-tab-x: 1rem; /* 16px - tab horizontal spacing */\n --space-tab-y: 0.5rem; /* 8px - tab vertical spacing */\n --space-tab-modern-x: 1rem; /* 16px - modern tab horizontal */\n --space-tab-modern-y: 0.5rem; /* 8px - modern tab vertical */\n --space-tab-btn-x: 1.25rem; /* 20px - button-style tab horizontal */\n --space-tab-btn-y: 0.625rem; /* 10px - button-style tab vertical */\n \n /* Badge Spacing */\n --space-badge-x: 0.625rem; /* 10px - badge horizontal */\n --space-badge-y: 0.25rem; /* 4px - badge vertical */\n --space-badge-sm-x: 0.5rem; /* 8px - small badge horizontal */\n --space-badge-sm-y: 0.125rem; /* 2px - small badge vertical */\n \n /* Dropdown Spacing */\n --space-dropdown-item-x: 0.75rem; /* 12px - dropdown item horizontal */\n --space-dropdown-item-y: 0.5rem; /* 8px - dropdown item vertical */\n \n /* Toast Spacing */\n --space-toast-x: 1rem; /* 16px - toast horizontal */\n --space-toast-y: 1rem; /* 16px - toast vertical */\n \n /* Copy Button Spacing */\n --space-copy-btn-x: 0.625rem; /* 10px - copy button horizontal */\n --space-copy-btn-y: 0.25rem; /* 4px - copy button vertical */\n \n /* Accordion Spacing */\n --space-accordion-x: 1rem; /* 16px - accordion item horizontal */\n --space-accordion-y: 1rem; /* 16px - accordion item vertical */\n \n /* Table Spacing */\n --space-table-cell-x: 0.75rem; /* 12px - table cell horizontal */\n --space-table-cell-y: 0.75rem; /* 12px - table cell vertical */\n \n /* List Item Spacing */\n --space-list-item-x: 1rem; /* 16px - list item horizontal */\n --space-list-item-y: 0.75rem; /* 12px - list item vertical */\n \n /* Pagination Spacing */\n --space-pagination-x: 0.75rem; /* 12px - pagination item horizontal */\n --space-pagination-y: 0.5rem; /* 8px - pagination item vertical */\n \n /* Toggle Group Spacing */\n --space-toggle-x: 0.75rem; /* 12px - toggle item horizontal */\n --space-toggle-y: 0.5rem; /* 8px - toggle item vertical */\n \n /* Gap Spacing (for flex/grid layouts) */\n --space-gap-xs: 0.25rem; /* 4px */\n --space-gap-sm: 0.5rem; /* 8px */\n --space-gap-md: 1rem; /* 16px */\n --space-gap-lg: 1.5rem; /* 24px */\n}\n\n",[],[480,498,579,613,615],"0d5b0a74-e2e9-11f0-8fcb-42dde27851f2","_shadows.scss","0d5b0b1e-e2e9-11f0-8fcb-42dde27851f2",93,["D",1766815102764],".theme-scope {\n /* ===================================\n Shadow Tokens\n =================================== */\n\n /* Base Shadows */\n --shadow-none: none;\n --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n --shadow-md: 0 1px 3px 0 rgba(0, 0, 0, 0.1);\n --shadow-lg: 0 4px 6px -1px rgba(0, 0, 0, 0.1);\n --shadow-xl: 0 10px 15px -3px rgba(0, 0, 0, 0.1);\n --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);\n\n /* Component-Specific Shadows */\n --shadow-card: var(--shadow-md);\n --shadow-dropdown: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n --shadow-toast: 0 5px 15px -3px rgba(0, 0, 0, 0.08);\n \n /* Focus Ring Sizes (used with color-*-ring variables) */\n --ring-width: 3px;\n --ring-offset: 0px;\n}\n\n",[],[480,498,579,613,623],"0d6239e8-e2e9-11f0-bb45-42dde27851f2","_radii.scss","0d623aba-e2e9-11f0-bb45-42dde27851f2",94,["D",1766815102825],".theme-scope {\n /* ===================================\n Border Radius Tokens\n =================================== */\n\n --radius-none: 0;\n --radius-sm: 0.25rem; /* 4px */\n --radius-md: 0.375rem; /* 6px */\n --radius-lg: 0.5rem; /* 8px */\n --radius-xl: 0.75rem; /* 12px */\n --radius-2xl: 1rem; /* 16px */\n --radius-full: 9999px; /* Fully rounded */\n\n /* Component-Specific Radii */\n --radius-button: var(--radius-md);\n --radius-input: var(--radius-md);\n --radius-card: var(--radius-lg);\n --radius-badge: var(--radius-md);\n --radius-badge-pill: var(--radius-full);\n --radius-dropdown: var(--radius-md);\n --radius-tab: var(--radius-md);\n --radius-tab-modern: var(--radius-md);\n --radius-toast: var(--radius-lg);\n}\n\n",[],[480,498,579,613,631],"0d5072ee-e2e9-11f0-8fcb-42dde27851f2","_index.scss","0d5073ac-e2e9-11f0-8fcb-42dde27851f2",91,["D",1766815102693],"/* ===================================\n Design Tokens Index\n Imports all token files to define CSS custom properties\n =================================== */\n\n@use 'colors';\n@use 'spacing';\n@use 'typography';\n@use 'radii';\n@use 'shadows';\n\n",[],[480,498,579,613,639],"3cf92fc2-ef19-11f0-b16c-42dde27851f2","_colors.scss","0d4c559c-e2e9-11f0-b141-42dde27851f2",191,["D",1768155212458],"/* ===================================\n Root-level Color Defaults (for components outside theme-scope)\n =================================== */\n:root {\n /* Light mode defaults */\n --color-bg-primary: #ffffff;\n --color-bg-secondary: #f8fafc;\n --color-bg-muted: #f1f5f9;\n --color-border: #e2e8f0;\n --color-border-light: #cbd5e1;\n --color-text-primary: #0f172a;\n --color-text-muted: #94a3b8;\n --color-primary: #3b82f6;\n}\n\n/* Dark mode at root level */\n:root.dark,\n.dark {\n --color-bg-primary: #1e293b;\n --color-bg-secondary: #0f172a;\n --color-bg-muted: #334155;\n --color-border: #475569;\n --color-border-light: #334155;\n --color-text-primary: #f8fafc;\n --color-text-muted: #94a3b8;\n --color-primary: #60a5fa;\n}\n\n.theme-scope {\n /* ===================================\n Color Tokens\n =================================== */\n\n /* Text Colors */\n --color-text-primary: #0f172a;\n --color-text-secondary: oklch(21% 0.034 264.665);\n --color-text-muted: #94a3b8;\n --color-text-neutral: #475569;\n --color-text-neutral-dark: #334155;\n --color-text-disabled: #9ca3af; /* Readable disabled text color */\n\n /* Background Colors */\n --color-bg-primary: #ffffff;\n --color-bg-secondary: #f8fafc;\n --color-bg-muted: #f1f5f9;\n --color-bg-light: #F3F4F6;\n --color-bg-disabled: #f1f5f9; /* Disabled background color */\n\n /* Border Colors */\n --color-border: #e2e8f0;\n --color-border-light: #cbd5e1;\n --color-border-tab: #e4e4e7;\n\n /* Primary Colors */\n --color-primary: #3b82f6;\n --color-primary-hover: #2563eb;\n --color-primary-active: #1d4ed8;\n --color-primary-dark: #1e40af;\n --color-primary-light: #eff6ff;\n --color-primary-lighter: #dbeafe;\n --color-primary-lightest: #bfdbfe;\n \n /* Primary Ring (for focus states) */\n --color-primary-ring: rgba(59, 130, 246, 0.3);\n \n /* Primary Text (text color on primary background) */\n --color-primary-text: #ffffff;\n\n /* Success Colors */\n --color-success: #10b981; /* Brighter, less dark green (emerald-500) */\n --color-success-light: #d1fae5; /* Lighter background */\n --color-success-dark: #047857; /* Darker for text on light bg */\n --color-success-link: #059669;\n --color-success-link-hover: #047857;\n \n /* Success Ring */\n --color-success-ring: rgba(34, 197, 94, 0.3);\n \n /* Success Text (text color on success background) */\n --color-success-text: #ffffff;\n \n /* Success Secondary Colors (for outlined buttons) */\n --color-success-200: #bbf7d0;\n --color-success-300: #86efac;\n\n /* Warning Colors */\n --color-warning: #f59e0b;\n --color-warning-light: #fef3c7;\n --color-warning-dark: #92400e;\n --color-warning-link: #d97706;\n --color-warning-link-hover: #b45309;\n \n /* Warning Ring */\n --color-warning-ring: rgba(245, 158, 11, 0.3);\n \n /* Warning Text (text color on warning background) */\n --color-warning-text: #ffffff;\n \n /* Warning Secondary Colors */\n --color-warning-200: #fde68a;\n --color-warning-300: #fcd34d;\n\n /* Danger Colors */\n --color-danger: #ef4444;\n --color-danger-light: #fee2e2;\n --color-danger-dark: #b91c1c;\n --color-danger-link: #dc2626;\n --color-danger-link-hover: #b91c1c;\n \n /* Danger Ring */\n --color-danger-ring: rgba(239, 68, 68, 0.3);\n \n /* Danger Text (text color on danger background) */\n --color-danger-text: #ffffff;\n \n /* Danger Secondary Colors */\n --color-danger-200: #fecaca;\n --color-danger-300: #fca5a5;\n\n /* Info Colors */\n --color-info: #0ea5e9;\n --color-info-light: #e0f2fe;\n --color-info-dark: #075985;\n --color-info-link: #0284c7;\n --color-info-link-hover: #0369a1;\n \n /* Info Ring */\n --color-info-ring: rgba(14, 165, 233, 0.3);\n \n /* Info Text (text color on info background) */\n --color-info-text: #ffffff;\n \n /* Info Secondary Colors */\n --color-info-200: #bae6fd;\n --color-info-300: #7dd3fc;\n\n /* Neutral Colors */\n --color-neutral: #71717a;\n --color-neutral-light: #f4f4f5;\n --color-neutral-dark: #3f3f46;\n --color-neutral-link: #52525b;\n --color-neutral-link-hover: #3f3f46;\n \n /* Neutral Ring */\n --color-neutral-ring: rgba(113, 113, 122, 0.3);\n \n /* Neutral Text (text color on neutral background) */\n --color-neutral-text: #ffffff;\n \n /* Neutral Secondary Colors */\n --color-neutral-200: #e4e4e7;\n --color-neutral-300: #d4d4d8;\n\n /* Code Colors - Light mode uses light gray background with strong text contrast */\n --color-code-bg: #f8fafc;\n --color-code-text: #be185d;\n --color-code-bg-dark: #f1f5f9;\n --color-code-text-dark: #334155;\n --color-code-header-bg: #e2e8f0;\n --color-code-border: #e2e8f0;\n \n /* Syntax highlighting colors for light mode - strong contrast */\n --color-syntax-keyword: #7c3aed;\n --color-syntax-string: #059669;\n --color-syntax-number: #0284c7;\n --color-syntax-function: #2563eb;\n --color-syntax-comment: #64748b;\n --color-syntax-property: #c2410c;\n --color-syntax-punctuation: #475569;\n\n /* Tab Colors */\n --color-tab: #71717a;\n --color-tab-active: #3b82f6;\n\n /* Utility Colors */\n --color-gray-300: #d1d5db;\n --color-gray-400: #9ca3af;\n --color-white: #ffffff;\n \n /* Gray Ring (for ghost buttons, etc.) */\n --color-gray-ring: rgba(161, 161, 170, 0.2);\n --color-gray-ring-dark: rgba(15, 23, 42, 0.1);\n \n /* Dark/Inverted Section Colors */\n --color-bg-dark: #0f172a;\n --color-text-on-dark: #ffffff;\n --color-text-on-dark-muted: rgba(255, 255, 255, 0.85);\n \n /* Accent Color (for CTAs, highlights) */\n --color-accent: #f59e0b;\n --color-accent-hover: #d97706;\n \n /* CTA Color */\n --color-cta: #3b82f6;\n --color-cta-hover: #2563eb;\n \n /* ===================================\n Form Controls (Checkbox, Radio, Toggle)\n =================================== */\n \n /* Unchecked state */\n --color-control-border: var(--color-border-light);\n --color-control-border-hover: var(--color-border);\n --color-control-bg: var(--color-bg-primary);\n --color-control-bg-hover: var(--color-bg-secondary);\n \n /* Checked state */\n --color-control-checked: var(--color-primary);\n --color-control-checked-hover: var(--color-primary-hover);\n --color-control-checked-border: var(--color-primary);\n --color-control-checkmark: #ffffff;\n \n /* Focus state */\n --color-control-ring: var(--color-primary-ring);\n \n /* Toggle-specific */\n --color-toggle-bg: var(--color-border);\n --color-toggle-bg-checked: var(--color-primary);\n --color-toggle-knob: #ffffff;\n \n /* ===================================\n Choice Card Colors\n =================================== */\n --color-choice-border: var(--color-border-light);\n --color-choice-border-hover: var(--color-border);\n --color-choice-border-checked: var(--color-primary);\n --color-choice-bg: transparent;\n --color-choice-bg-hover: var(--color-bg-secondary);\n --color-choice-bg-checked: rgba(59, 130, 246, 0.05);\n --color-choice-ring: var(--color-primary);\n}\n\n/* ===================================\n Dark Mode Colors\n Applied via .dark class on theme-scope or parent\n =================================== */\n\n.theme-scope.dark,\n.dark .theme-scope {\n /* ===================================\n Color Tokens - Dark Mode\n =================================== */\n\n /* Text Colors - inverted for dark backgrounds */\n --color-text-primary: #f8fafc;\n --color-text-secondary: #e2e8f0;\n --color-text-muted: #94a3b8;\n --color-text-neutral: #cbd5e1;\n --color-text-neutral-dark: #e2e8f0;\n --color-text-disabled: #64748b;\n\n /* Background Colors - dark variants */\n --color-bg-primary: #0f172a;\n --color-bg-secondary: #1e293b;\n --color-bg-muted: #334155;\n --color-bg-light: #1e293b;\n --color-bg-disabled: #1e293b;\n\n /* Border Colors - subtle on dark */\n --color-border: #334155;\n --color-border-light: #475569;\n --color-border-tab: #475569;\n\n /* Primary Colors - slightly brighter for dark mode visibility */\n --color-primary: #60a5fa;\n --color-primary-hover: #3b82f6;\n --color-primary-active: #2563eb;\n --color-primary-dark: #93c5fd;\n --color-primary-light: rgba(59, 130, 246, 0.15);\n --color-primary-lighter: rgba(59, 130, 246, 0.1);\n --color-primary-lightest: rgba(59, 130, 246, 0.05);\n \n /* Primary Ring (for focus states) */\n --color-primary-ring: rgba(96, 165, 250, 0.4);\n \n /* Primary Text (text color on primary background) */\n --color-primary-text: #0f172a;\n\n /* Success Colors - brighter for dark mode */\n --color-success: #34d399;\n --color-success-light: rgba(16, 185, 129, 0.15);\n --color-success-dark: #6ee7b7;\n --color-success-link: #34d399;\n --color-success-link-hover: #6ee7b7;\n --color-success-ring: rgba(52, 211, 153, 0.4);\n --color-success-text: #0f172a;\n --color-success-200: rgba(16, 185, 129, 0.2);\n --color-success-300: rgba(16, 185, 129, 0.3);\n\n /* Warning Colors */\n --color-warning: #fbbf24;\n --color-warning-light: rgba(245, 158, 11, 0.15);\n --color-warning-dark: #fcd34d;\n --color-warning-link: #fbbf24;\n --color-warning-link-hover: #fcd34d;\n --color-warning-ring: rgba(251, 191, 36, 0.4);\n --color-warning-text: #0f172a;\n --color-warning-200: rgba(245, 158, 11, 0.2);\n --color-warning-300: rgba(245, 158, 11, 0.3);\n\n /* Danger Colors */\n --color-danger: #f87171;\n --color-danger-light: rgba(239, 68, 68, 0.15);\n --color-danger-dark: #fca5a5;\n --color-danger-link: #f87171;\n --color-danger-link-hover: #fca5a5;\n --color-danger-ring: rgba(248, 113, 113, 0.4);\n --color-danger-text: #0f172a;\n --color-danger-200: rgba(239, 68, 68, 0.2);\n --color-danger-300: rgba(239, 68, 68, 0.3);\n\n /* Info Colors */\n --color-info: #38bdf8;\n --color-info-light: rgba(14, 165, 233, 0.15);\n --color-info-dark: #7dd3fc;\n --color-info-link: #38bdf8;\n --color-info-link-hover: #7dd3fc;\n --color-info-ring: rgba(56, 189, 248, 0.4);\n --color-info-text: #0f172a;\n --color-info-200: rgba(14, 165, 233, 0.2);\n --color-info-300: rgba(14, 165, 233, 0.3);\n\n /* Neutral Colors */\n --color-neutral: #a1a1aa;\n --color-neutral-light: rgba(113, 113, 122, 0.15);\n --color-neutral-dark: #d4d4d8;\n --color-neutral-link: #a1a1aa;\n --color-neutral-link-hover: #d4d4d8;\n --color-neutral-ring: rgba(161, 161, 170, 0.4);\n --color-neutral-text: #0f172a;\n --color-neutral-200: rgba(113, 113, 122, 0.2);\n --color-neutral-300: rgba(113, 113, 122, 0.3);\n\n /* Code Colors - Dark mode uses actual dark background */\n --color-code-bg: #1e293b;\n --color-code-text: #fb7185;\n --color-code-bg-dark: #1e293b;\n --color-code-text-dark: #e2e8f0;\n --color-code-header-bg: #334155;\n --color-code-border: #475569;\n\n /* Tab Colors */\n --color-tab: #94a3b8;\n --color-tab-active: #60a5fa;\n\n /* Utility Colors */\n --color-gray-300: #475569;\n --color-gray-400: #64748b;\n --color-white: #0f172a;\n \n /* Gray Ring (for ghost buttons, etc.) */\n --color-gray-ring: rgba(148, 163, 184, 0.25);\n --color-gray-ring-dark: rgba(248, 250, 252, 0.1);\n \n /* Dark/Inverted Section Colors (swap for dark mode) */\n --color-bg-dark: #f8fafc;\n --color-text-on-dark: #0f172a;\n --color-text-on-dark-muted: rgba(15, 23, 42, 0.85);\n \n /* Accent Color (for CTAs, highlights) */\n --color-accent: #fbbf24;\n --color-accent-hover: #f59e0b;\n \n /* CTA Color */\n --color-cta: #60a5fa;\n --color-cta-hover: #3b82f6;\n \n /* ===================================\n Form Controls - Dark Mode\n =================================== */\n \n /* Unchecked state */\n --color-control-border: var(--color-border);\n --color-control-border-hover: var(--color-border-light);\n --color-control-bg: var(--color-bg-secondary);\n --color-control-bg-hover: var(--color-bg-muted);\n \n /* Checked state */\n --color-control-checked: var(--color-primary);\n --color-control-checked-hover: var(--color-primary-hover);\n --color-control-checked-border: var(--color-primary);\n --color-control-checkmark: #0f172a;\n \n /* Toggle-specific */\n --color-toggle-bg: var(--color-border-light);\n --color-toggle-bg-checked: var(--color-primary);\n --color-toggle-knob: #0f172a;\n \n /* ===================================\n Choice Card Colors - Dark Mode\n =================================== */\n --color-choice-border: var(--color-border);\n --color-choice-border-hover: var(--color-border-light);\n --color-choice-border-checked: var(--color-primary);\n --color-choice-bg: transparent;\n --color-choice-bg-hover: var(--color-bg-muted);\n --color-choice-bg-checked: rgba(96, 165, 250, 0.1);\n --color-choice-ring: var(--color-primary);\n}\n\n",[],[480,498,579,613,647],"0b67b2d0-e2e9-11f0-9dc9-42dde27851f2",18,["D",1766815099504],[350,351,352,353,354,355],[480,498,579,613],"0d34393a-e2e9-11f0-b141-42dde27851f2","overrides.scss","0d3439ee-e2e9-11f0-b141-42dde27851f2","0b517128-e2e9-11f0-8ff9-42dde27851f2",86,["D",1766815102510],"/* ===================================\n Startup Theme - \"The Institute\" Style\n Based on Brookings Institution style\n Font: Inter, Primary: #003A70, Accent: #FF9E1C\n =================================== */\n\n.theme-scope {\n /* ===================================\n Base Theme Override\n =================================== */\n --font-family-sans: \"Inter\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\n --font-family-serif: Georgia, Cambria, \"Times New Roman\", Times, serif;\n \n font-family: var(--font-family-sans);\n background-color: #ffffff;\n color: #222222;\n line-height: 1.6;\n -webkit-font-smoothing: antialiased;\n \n /* Institute Color Palette */\n --color-primary: #003A70;\n --color-primary-hover: #002855;\n --color-primary-active: #001a38;\n --color-primary-dark: #022A4E;\n \n --color-accent: #FF9E1C;\n --color-accent-hover: #e88d0b;\n \n --color-cta: #00649F; /* Specific CTA blue */\n --color-cta-hover: #FF9E1C;\n \n /* Text Colors */\n --color-text-primary: #222222;\n --color-text-secondary: #555555;\n --color-text-muted: #757575;\n --color-text-on-dark: #ffffff;\n --color-text-on-dark-muted: rgba(255,255,255,0.9);\n \n /* Backgrounds */\n --color-bg-primary: #ffffff;\n --color-bg-secondary: #f5f5f5;\n --color-bg-muted: #f0f0f0;\n --color-bg-dark: #022A4E;\n \n /* Borders */\n --color-border: #e0e0e0;\n --color-border-light: #eeeeee;\n \n /* Radii - Squared off */\n --radius-sm: 0px;\n --radius-md: 0px;\n --radius-lg: 0px;\n --radius-button: 0px;\n --radius-card: 0px;\n \n /* Shadows */\n --shadow-card: 0 2px 8px rgba(0,0,0,0.08);\n --shadow-hover: 0 8px 16px rgba(0,0,0,0.12);\n \n /* ===================================\n Typography\n =================================== */\n h1, h2, h3, h4, h5, h6,\n .text-h1, .text-h2, .text-h3 {\n font-family: var(--font-family-sans);\n font-weight: 700;\n color: var(--color-text-primary);\n letter-spacing: -0.02em;\n margin-top: 1.5em;\n margin-bottom: 0.75em;\n }\n \n h1, .text-h1 { \n font-size: 2.75rem; \n line-height: 1.1; \n font-weight: 800;\n }\n \n h2, .text-h2 { font-size: 2rem; line-height: 1.2; }\n h3, .text-h3 { font-size: 1.5rem; line-height: 1.3; font-weight: 700; }\n \n /* Links */\n a, .link {\n color: var(--color-primary);\n text-decoration: none;\n font-weight: 600;\n transition: all 0.2s ease;\n \n &:hover {\n color: var(--color-accent);\n text-decoration: underline;\n }\n }\n \n /* ===================================\n Buttons\n =================================== */\n .btn-primary {\n background-color: var(--color-primary);\n color: var(--color-text-on-dark);\n border: none;\n border-radius: var(--radius-button);\n font-weight: 700;\n padding: 0.75rem 1.5rem;\n font-size: 1rem;\n transition: all 0.2s ease;\n text-decoration: none;\n display: inline-block;\n \n &:hover {\n background-color: var(--color-accent);\n color: var(--color-text-on-dark);\n text-decoration: none;\n }\n }\n \n .btn-secondary {\n background-color: transparent;\n color: var(--color-primary);\n border: 1px solid var(--color-primary);\n border-radius: var(--radius-button);\n font-weight: 700;\n padding: 0.7rem 1.5rem;\n transition: all 0.2s ease;\n text-decoration: none;\n display: inline-block;\n \n &:hover {\n background-color: var(--color-primary);\n color: var(--color-text-on-dark);\n text-decoration: none;\n }\n }\n \n .btn-cta {\n background-color: var(--color-cta);\n color: var(--color-text-on-dark);\n border: none;\n border-radius: var(--radius-button);\n font-weight: 700;\n padding: 1rem 2rem;\n font-size: 1rem;\n transition: all 0.2s ease;\n text-decoration: none;\n display: inline-block;\n \n &:hover {\n background-color: var(--color-accent);\n color: var(--color-text-on-dark);\n text-decoration: none;\n }\n }\n \n .btn-accent {\n background-color: var(--color-accent);\n color: #000000; /* Black text on orange */\n border: none;\n border-radius: var(--radius-button);\n font-weight: 700;\n padding: 0.875rem 1.5rem;\n font-size: 1rem;\n text-transform: none; /* Regular case, not uppercase */\n letter-spacing: normal;\n transition: all 0.2s ease;\n text-decoration: none;\n display: inline-block;\n \n &:hover {\n background-color: #e88d0b; /* Darker orange on hover */\n color: #000000;\n text-decoration: none;\n }\n }\n \n .btn-sm {\n padding: 0.5rem 1rem;\n font-size: 0.75rem;\n }\n \n /* ===================================\n Dark Section (Inverted)\n =================================== */\n .bg-dark {\n background-color: var(--color-bg-dark);\n color: var(--color-text-on-dark);\n \n h1, h2, h3, h4, h5, h6,\n .text-h1, .text-h2, .text-h3 {\n color: var(--color-text-on-dark);\n }\n \n p {\n color: var(--color-text-on-dark-muted);\n }\n \n a:not(.btn-primary):not(.btn-secondary):not(.btn-cta):not(.btn-accent) {\n color: var(--color-text-on-dark);\n \n &:hover {\n text-decoration: underline;\n }\n }\n }\n \n /* ===================================\n Cards\n =================================== */\n .card {\n background-color: var(--color-bg-primary);\n border: 1px solid transparent;\n padding: 0;\n transition: box-shadow 0.2s;\n }\n \n /* ===================================\n Forms\n =================================== */\n input[type=text], input[type=email] {\n border: 1px solid var(--color-border);\n border-radius: var(--radius-button);\n padding: 1rem;\n font-family: var(--font-family-sans);\n font-size: 1rem;\n background-color: var(--color-bg-secondary);\n \n &:focus {\n background-color: var(--color-bg-primary);\n border-color: var(--color-primary);\n outline: none;\n }\n }\n \n /* ===================================\n Utility Classes\n =================================== */\n .text-accent { color: var(--color-accent); }\n .text-primary { color: var(--color-primary); }\n .text-on-dark { color: var(--color-text-on-dark); }\n .text-on-dark-muted { color: var(--color-text-on-dark-muted); }\n \n .bg-muted { background-color: var(--color-bg-muted); }\n .bg-secondary { background-color: var(--color-bg-secondary); }\n \n .border-accent { border-color: var(--color-accent); }\n .border-t-accent { border-top: 3px solid var(--color-accent); }\n \n /* Logo serif */\n .font-serif { font-family: var(--font-family-serif); }\n}\n",[],[480,498,579,668,660],"startup","0b517092-e2e9-11f0-8ff9-42dde27851f2",17,["D",1766815099358],[348],[480,498,579,668],"0d38b956-e2e9-11f0-a4b5-42dde27851f2","0d38ba28-e2e9-11f0-a4b5-42dde27851f2","0b3a40c0-e2e9-11f0-b141-42dde27851f2",87,["D",1766815102492],"/* ===================================\n Retro Theme - Geocities/Win95 Style\n Full override bringing back that 90s web nostalgia!\n =================================== */\n\n/* Playground-specific overrides (outside theme-scope) */\n:root {\n --playground-bg: #000033;\n --playground-text: #ffff00;\n --playground-text-muted: #00ff00;\n --playground-surface: #000080;\n --playground-surface-hover: #000066;\n --playground-border: #00ff00;\n --playground-border-hover: #00ffff;\n --playground-radius: 0;\n --playground-focus-ring: rgba(0, 255, 0, 0.4);\n --playground-font: \"Comic Sans MS\", \"Chalkboard SE\", \"Comic Neue\", cursive, sans-serif;\n}\n\n/* Retro Animations */\n@keyframes blink {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0; }\n}\n\n@keyframes rainbow {\n 0% { color: #ff0000; }\n 17% { color: #ff8800; }\n 33% { color: #ffff00; }\n 50% { color: #00ff00; }\n 67% { color: #00ffff; }\n 83% { color: #ff00ff; }\n 100% { color: #ff0000; }\n}\n\n@keyframes marquee {\n 0% { transform: translateX(100%); }\n 100% { transform: translateX(-100%); }\n}\n\n@keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}\n\n@keyframes glitch {\n 0%, 90%, 100% { transform: translate(0); }\n 91% { transform: translate(-2px, 1px); }\n 92% { transform: translate(2px, -1px); }\n 93% { transform: translate(-1px, -1px); }\n 94% { transform: translate(1px, 2px); }\n}\n\n@keyframes scanline {\n 0% { top: 0%; }\n 100% { top: 100%; }\n}\n\n.theme-scope {\n /* ===================================\n Base Theme Override\n =================================== */\n font-family: \"Comic Sans MS\", \"Chalkboard SE\", \"Comic Neue\", cursive, sans-serif;\n background-color: #000033;\n background-image: url('https://web.archive.org/web/20091027075046im_/http://geocities.com/Area51/Hollow/9880/starfield.gif');\n color: #ffff00;\n \n /* Retro Color Overrides */\n --color-primary: #00ff00;\n --color-primary-hover: #00cc00;\n --color-primary-active: #009900;\n --color-primary-dark: #006600;\n --color-primary-light: #000000;\n --color-primary-lighter: #003300;\n --color-primary-lightest: #001100;\n --color-primary-ring: rgba(0, 255, 0, 0.5);\n \n --color-text-primary: #ffff00;\n --color-text-secondary: #00ff00;\n --color-text-muted: #c0c0c0;\n \n --color-bg-primary: rgba(0, 0, 0, 0.8);\n --color-bg-secondary: #000080;\n --color-bg-muted: #000033;\n \n --color-border: #00ff00;\n --color-border-light: #00cc00;\n \n /* Semantic Colors - Neon Style */\n --color-success: #00ff00;\n --color-success-light: #003300;\n --color-success-dark: #00cc00;\n --color-warning: #ffff00;\n --color-warning-light: #333300;\n --color-danger: #ff0000;\n --color-danger-light: #330000;\n --color-info: #00ffff;\n --color-info-light: #003333;\n \n /* No rounded corners - it's the 90s! */\n --radius-sm: 0;\n --radius-md: 0;\n --radius-lg: 0;\n --radius-xl: 0;\n --radius-2xl: 0;\n --radius-button: 0;\n --radius-card: 0;\n --radius-full: 0;\n \n /* ===================================\n Typography - READABLE VERSION\n =================================== */\n h1, h2, h3, h4, h5, h6,\n .text-h1, .text-h2, .text-h3,\n .text-lg, .text-xl, .text-2xl, .text-3xl, .text-4xl, .text-5xl {\n font-family: \"Impact\", \"Arial Black\", Gadget, sans-serif;\n color: #ff00ff; /* Hot pink - more visible */\n text-shadow: \n 2px 2px 0 #000,\n -1px -1px 0 #000,\n 1px -1px 0 #000,\n -1px 1px 0 #000; /* Black outline for readability */\n }\n \n /* Section headings in module demos - make them stand out */\n .font-semibold, .font-bold {\n color: #00ffff;\n text-shadow: 1px 1px 0 #000;\n }\n \n h1, .text-h1 {\n font-size: 2.5rem;\n letter-spacing: 2px;\n }\n \n h2, .text-h2 {\n font-size: 1.75rem;\n }\n \n h3, .text-h3, .text-lg {\n font-size: 1.25rem;\n color: #00ffff; /* Cyan for h3 */\n }\n \n /* Regular paragraph text */\n p, .text-sm, .text-base {\n color: #ffff00;\n text-shadow: 1px 1px 0 #000;\n }\n \n a, .link {\n color: #00ff00;\n text-decoration: underline;\n text-shadow: 1px 1px 0 #000;\n \n &:hover {\n color: #ffff00;\n text-shadow: 0 0 10px #00ff00, 1px 1px 0 #000;\n }\n \n &:visited {\n color: #ff00ff;\n }\n }\n \n strong, b {\n color: #ff6600;\n text-shadow: 1px 1px 0 #000;\n }\n \n code:not(pre code), .code-inline {\n background-color: #000;\n color: #00ff00;\n border: 1px solid #00ff00;\n font-family: \"Courier New\", Courier, monospace;\n padding: 0.125rem 0.375rem;\n }\n \n pre, .code-block {\n background-color: #000;\n color: #00ff00;\n border: 2px solid #00ff00;\n font-family: \"Courier New\", Courier, monospace;\n padding: 1rem;\n }\n \n blockquote {\n border-left: 4px solid #00ff00;\n background: rgba(0, 0, 0, 0.5);\n color: #ffff00;\n padding: 1rem;\n font-style: italic;\n }\n \n hr {\n border: none;\n border-top: 2px dashed #00ff00;\n margin: 2rem 0;\n }\n \n /* ===================================\n Tailwind Utility Class Overrides\n These override common Tailwind classes used in modules\n =================================== */\n \n /* Background overrides */\n .bg-white,\n .bg-gray-50,\n .bg-gray-100 {\n background-color: #c0c0c0 !important;\n }\n \n .bg-gray-200,\n .bg-gray-300 {\n background-color: #a0a0a0 !important;\n }\n \n /* Text color overrides */\n .text-gray-900,\n .text-gray-800,\n .text-gray-700 {\n color: #000000 !important;\n text-shadow: none;\n }\n \n .text-gray-600,\n .text-gray-500 {\n color: #333333 !important;\n }\n \n .text-gray-400 {\n color: #666666 !important;\n }\n \n .text-blue-600,\n .text-blue-500 {\n color: #00ffff !important;\n text-shadow: 1px 1px 0 #000;\n }\n \n .text-green-500 {\n color: #00ff00 !important;\n }\n \n .text-red-500 {\n color: #ff0000 !important;\n }\n \n /* Border overrides */\n .border-gray-200,\n .border-gray-300 {\n border-color: #808080 !important;\n }\n \n .border-gray-100 {\n border-color: #a0a0a0 !important;\n }\n \n /* Rounded corners - remove them! */\n .rounded,\n .rounded-md,\n .rounded-lg,\n .rounded-xl,\n .rounded-2xl,\n .rounded-full {\n border-radius: 0 !important;\n }\n \n /* ===================================\n Cards - Windows 95 Style\n =================================== */\n .card, .app-card {\n background-color: #c0c0c0;\n border: 4px outset #ffffff;\n box-shadow: 4px 4px 0px #000;\n color: #000000;\n }\n \n .card-title, .app-title {\n font-family: \"Impact\", \"Arial Black\", sans-serif;\n color: #000080;\n text-shadow: none;\n text-align: left;\n animation: none; /* Remove blink - too annoying */\n background: linear-gradient(to right, #c0c0c0, #e0e0e0);\n border-bottom: 2px solid #808080;\n padding-bottom: 0.5rem;\n margin-bottom: 1rem;\n \n &::before {\n content: \"📁 \";\n }\n &::after {\n content: \"\";\n }\n }\n \n .app-card-content {\n background-color: #ffffff;\n border: 2px inset #808080;\n color: #000000;\n padding: 1rem;\n }\n \n /* ===================================\n Buttons - Win95 3D Style\n =================================== */\n .btn-primary, .action-btn {\n background-color: #c0c0c0 !important;\n color: #000000 !important;\n font-family: \"Comic Sans MS\", \"Chalkboard SE\", \"Comic Neue\", cursive, sans-serif;\n font-weight: bold;\n border: 3px outset #ffffff !important;\n /* Default button look (thick black border simulation) */\n box-shadow: inset 0 0 0 1px #000000 !important; \n text-transform: uppercase;\n \n &:hover {\n background-color: #dcdcdc !important;\n border: 3px outset #ffffff !important;\n }\n \n &:active {\n border: 3px inset #808080 !important;\n background-color: #a0a0a0 !important;\n box-shadow: none !important;\n }\n \n &:focus {\n outline: 1px dotted #000;\n outline-offset: -4px;\n }\n }\n \n .btn-secondary, .btn-gray {\n background-color: #c0c0c0 !important;\n color: #000000 !important;\n border: 3px outset #ffffff !important;\n box-shadow: none !important;\n \n &:hover {\n background-color: #d0d0d0 !important;\n }\n \n &:active {\n border: 3px inset #808080 !important;\n }\n }\n \n .btn-tertiary {\n background: #c0c0c0 !important;\n color: #000000 !important;\n border: 2px outset #ffffff !important;\n \n &:hover {\n background: #d0d0d0 !important;\n }\n }\n \n .btn-danger {\n background-color: #ff0000 !important;\n color: #ffffff !important;\n border: 3px outset #ff6666 !important;\n \n &:active {\n border: 3px inset #990000 !important;\n }\n }\n \n .btn-success {\n background-color: #00aa00 !important;\n color: #ffffff !important;\n border: 3px outset #66ff66 !important;\n \n &:active {\n border: 3px inset #009900 !important;\n }\n }\n \n /* Blue buttons from modules */\n [class*=\"bg-blue-600\"],\n [class*=\"bg-blue-700\"] {\n background-color: #000080 !important;\n border: 3px outset #0000cc !important;\n \n &:hover {\n background-color: #0000aa !important;\n }\n }\n \n /* ===================================\n Forms - Terminal/Hacker Style\n =================================== */\n input[type=text],\n input[type=email],\n input[type=password],\n input[type=number],\n input[type=url],\n input[type=search],\n input[type=tel],\n input[type=date],\n input[type=time],\n input[type=datetime-local],\n textarea,\n .form-input {\n background: #001100 !important; /* Very dark green instead of pure black */\n color: #00ff00 !important;\n border: 2px inset #00ff00 !important;\n font-family: \"Courier New\", Courier, monospace !important;\n caret-color: #00ff00;\n text-shadow: 0 0 1px #00ff00; /* Subtle glow effect */\n \n &::placeholder {\n color: #00aa00 !important; /* Brighter placeholder for visibility */\n text-shadow: none;\n }\n \n &:focus {\n border-color: #00ff00 !important;\n box-shadow: 0 0 10px #00ff00, inset 0 0 5px rgba(0, 255, 0, 0.3) !important;\n }\n }\n \n select, .form-select {\n background: #000 !important;\n color: #00ff00 !important;\n border: 2px inset #00ff00 !important;\n font-family: \"Courier New\", Courier, monospace !important;\n /* Fix dropdown arrow - single chevron */\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='%2300ff00'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E\") !important;\n background-repeat: no-repeat !important;\n background-position: right 8px center !important;\n background-size: 16px !important;\n padding-right: 32px !important;\n }\n \n label, .form-label {\n color: #ffff00 !important; /* Yellow for better contrast */\n font-family: \"Courier New\", Courier, monospace !important;\n font-weight: bold;\n text-transform: uppercase;\n background: #000080;\n padding: 4px 8px;\n border: 2px outset #4040c0;\n display: inline-block;\n margin-bottom: 6px;\n text-shadow: 1px 1px 0 #000000;\n }\n \n input[type=checkbox],\n input[type=radio] {\n accent-color: #00ff00;\n border-color: #00ff00;\n }\n \n input[type=range],\n .form-range {\n accent-color: #00ff00;\n background: #003300;\n }\n \n /* Copy Button - Retro Style */\n .copy-button, .copy-button-copied {\n background: #000080 !important;\n color: #00ffff !important;\n border: 2px outset #4040c0 !important;\n font-family: \"Courier New\", Courier, monospace !important;\n \n &:hover {\n background: #0000a0 !important;\n color: #ffffff !important;\n }\n }\n \n .copy-button-copied {\n background: #008000 !important;\n color: #ffffff !important;\n border: 2px outset #00c000 !important;\n }\n\n /* Toggle - Retro Mechanical Switch */\n input[type=checkbox].form-toggle {\n appearance: none;\n -webkit-appearance: none;\n width: 48px;\n height: 24px;\n background: #000000;\n border: 2px inset #808080 !important;\n border-radius: 0 !important; /* Square corners */\n position: relative;\n cursor: pointer;\n outline: none;\n \n /* The sliding button (thumb) */\n &::after {\n content: '';\n position: absolute;\n top: 2px;\n left: 2px;\n width: 16px;\n height: 16px;\n background: #c0c0c0;\n border: 2px outset #ffffff;\n transition: left 0.1s steps(2); /* Choppy retro animation */\n }\n\n /* OFF State specific styling */\n &:not(:checked) {\n background: #330000; /* Dark red background */\n box-shadow: inset 2px 2px 4px #000;\n }\n\n /* ON State specific styling */\n &:checked {\n background: #003300; /* Dark green background */\n \n &::after {\n left: 26px; /* Move to right */\n background: #00ff00; /* Green LED look */\n border: 2px outset #ccffcc;\n box-shadow: 0 0 5px #00ff00; /* Glow */\n }\n }\n \n &:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n filter: grayscale(100%);\n }\n }\n \n /* ===================================\n Tables - Classic HTML Style\n =================================== */\n table, .app-table {\n border: 4px ridge #808080 !important;\n background: #ffffff !important;\n color: #000000 !important;\n font-family: \"Times New Roman\", Times, serif;\n }\n \n th {\n background: #000080 !important;\n color: #ffffff !important;\n font-weight: bold;\n border: 2px inset #0000cc !important;\n padding: 8px;\n }\n \n td {\n border: 1px solid #808080 !important;\n padding: 8px;\n background: #ffffff !important;\n color: #000000 !important;\n }\n \n tr:nth-child(even) td {\n background: #e0e0e0 !important;\n }\n \n /* ===================================\n Badges - Bevel Style\n =================================== */\n .badge,\n [class*=\"badge-\"] {\n border: 2px outset #ffffff !important;\n background: #c0c0c0 !important;\n color: #000 !important;\n font-family: \"Comic Sans MS\", \"Chalkboard SE\", \"Comic Neue\", cursive, sans-serif;\n text-transform: uppercase;\n border-radius: 0 !important;\n }\n \n .badge-success {\n background: #00ff00 !important;\n border-color: #00cc00 !important;\n }\n \n .badge-danger {\n background: #ff0000 !important;\n color: #fff !important;\n border-color: #cc0000 !important;\n }\n \n .badge-warning {\n background: #ffff00 !important;\n border-color: #cccc00 !important;\n }\n \n .badge-info {\n background: #00ffff !important;\n border-color: #00cccc !important;\n }\n \n /* ===================================\n Tabs - Folder Style\n =================================== */\n .tabs-list {\n border-bottom: 2px solid #808080;\n }\n \n .tab-trigger {\n background: #c0c0c0 !important;\n border: 2px outset #ffffff !important;\n border-bottom: none !important;\n color: #000 !important;\n font-family: \"Comic Sans MS\", \"Chalkboard SE\", \"Comic Neue\", cursive, sans-serif;\n margin-right: 2px;\n \n &:hover {\n background: #d0d0d0 !important;\n }\n \n &[data-state=\"active\"],\n &.active {\n background: #ffffff !important;\n border-bottom: 2px solid #ffffff !important;\n margin-bottom: -2px;\n z-index: 1;\n }\n }\n \n /* ===================================\n Accordions - Retro Toggle\n =================================== */\n .accordion-group {\n border: 2px solid #808080;\n background: #c0c0c0;\n }\n \n .accordion-item {\n border-bottom: 2px solid #808080;\n }\n \n .accordion-button {\n color: #000080;\n text-transform: uppercase;\n font-weight: bold;\n font-family: \"Comic Sans MS\", \"Chalkboard SE\", \"Comic Neue\", cursive, sans-serif;\n \n &:hover {\n background: #d0d0d0;\n }\n }\n \n .accordion-content-inner {\n color: #000000;\n background: #ffffff;\n }\n \n /* ===================================\n Callouts/Alerts - Neon Boxes\n =================================== */\n .callout, .alert {\n border: 3px double;\n background: #000;\n padding: 1rem;\n \n &.callout-info, &.alert-info {\n border-color: #00ffff;\n color: #00ffff;\n }\n \n &.callout-success, &.alert-success {\n border-color: #00ff00;\n color: #00ff00;\n }\n \n &.callout-warning, &.alert-warning {\n border-color: #ffff00;\n color: #ffff00;\n }\n \n &.callout-danger, &.alert-danger {\n border-color: #ff0000;\n color: #ff0000;\n }\n }\n \n /* ===================================\n Loading States - Retro Style\n =================================== */\n .loading-spinner,\n .animate-spin {\n border: 4px solid #0000ff !important;\n border-top: 4px solid #ff0000 !important;\n border-radius: 0 !important;\n animation: spin 0.5s linear infinite !important;\n }\n \n .loading-text {\n color: #ff00ff;\n font-weight: bold;\n text-transform: uppercase;\n animation: blink 0.5s infinite;\n }\n \n /* Skeleton loading - make it retro */\n .animate-pulse,\n [class*=\"skeleton\"] {\n background: repeating-linear-gradient(\n 90deg,\n #000080 0px,\n #0000aa 10px,\n #000080 20px\n ) !important;\n animation: none !important;\n }\n \n /* ===================================\n Dropdowns - Win95 Menu\n =================================== */\n .dropdown-menu {\n background: #c0c0c0 !important;\n border: 2px outset #ffffff !important;\n box-shadow: 4px 4px 0 #000 !important;\n color: #000 !important;\n border-radius: 0 !important;\n }\n \n .dropdown-item {\n color: #000 !important;\n font-family: \"Comic Sans MS\", \"Chalkboard SE\", \"Comic Neue\", cursive, sans-serif;\n border-radius: 0 !important;\n \n &:hover {\n background: #000080 !important;\n color: #ffffff !important;\n }\n \n &:active {\n background: #000060 !important;\n }\n }\n \n .dropdown-header {\n color: #808080 !important;\n font-weight: bold;\n text-transform: uppercase;\n font-size: 0.75rem;\n }\n \n .dropdown-divider {\n border-color: #808080 !important;\n }\n \n /* ===================================\n Toast Notifications\n =================================== */\n .toast {\n background: #c0c0c0 !important;\n border: 3px outset #ffffff !important;\n color: #000 !important;\n font-family: \"Comic Sans MS\", \"Chalkboard SE\", \"Comic Neue\", cursive, sans-serif;\n box-shadow: 4px 4px 0 #000 !important;\n border-radius: 0 !important;\n }\n \n /* ===================================\n Avatar - Pixelated!\n =================================== */\n .avatar {\n border: 2px solid #00ff00 !important;\n image-rendering: pixelated;\n background: #000080 !important;\n border-radius: 0 !important;\n }\n \n /* ===================================\n Icons - Make them retro\n =================================== */\n .iconify {\n filter: none; /* Could add pixelation effect */\n }\n \n /* ===================================\n Kbd / Keyboard keys\n =================================== */\n kbd, .kbd {\n background: #c0c0c0 !important;\n border: 2px outset #ffffff !important;\n color: #000 !important;\n font-family: \"MS Sans Serif\", Tahoma, sans-serif !important;\n border-radius: 0 !important;\n box-shadow: 2px 2px 0 #808080 !important;\n }\n \n /* ===================================\n Toggle Groups\n =================================== */\n .toggle-group {\n border: 2px solid #808080;\n background: #c0c0c0;\n }\n \n .toggle-group-item {\n background: #c0c0c0 !important;\n border: 2px outset #ffffff !important;\n color: #000 !important;\n \n &:hover {\n background: #d0d0d0 !important;\n }\n \n &[data-state=\"on\"],\n &.active {\n background: #ffffff !important;\n border: 2px inset #808080 !important;\n }\n }\n \n /* ===================================\n Page Sections from Modules\n =================================== */\n \n /* Override header styling */\n header {\n background: #c0c0c0;\n border-bottom: 2px solid #808080;\n }\n \n /* Hero sections */\n section {\n background: #c0c0c0;\n }\n \n /* Footer */\n footer {\n background: #c0c0c0;\n border-top: 2px solid #808080;\n }\n \n /* ===================================\n Fun Extras - Easter Eggs\n =================================== */\n \n /* Visitor Counter Style */\n .visitor-counter {\n font-family: \"Courier New\", Courier, monospace;\n background: #000;\n color: #00ff00;\n border: 2px inset #333;\n padding: 0.25rem 0.5rem;\n display: inline-block;\n }\n \n /* Under Construction Banner */\n .under-construction {\n background: repeating-linear-gradient(\n 45deg,\n #ffff00,\n #ffff00 10px,\n #000 10px,\n #000 20px\n );\n padding: 0.5rem;\n text-align: center;\n font-weight: bold;\n color: #000;\n animation: glitch 2s infinite;\n }\n \n /* Marquee Text Effect */\n .marquee {\n overflow: hidden;\n white-space: nowrap;\n \n span {\n display: inline-block;\n animation: marquee 10s linear infinite;\n }\n }\n \n /* Rainbow Text */\n .rainbow-text {\n animation: rainbow 2s infinite linear;\n font-weight: bold;\n }\n \n /* Guestbook Style Comment Box */\n .guestbook {\n background: #ffffff;\n color: #000;\n border: 4px ridge #c0c0c0;\n padding: 1rem;\n font-family: \"Comic Sans MS\", cursive;\n \n .guestbook-entry {\n border-bottom: 1px dashed #808080;\n padding: 0.5rem 0;\n \n .guestbook-author {\n color: #0000ff;\n font-weight: bold;\n }\n \n .guestbook-date {\n color: #808080;\n font-size: 0.75rem;\n }\n }\n }\n \n /* Hit Counter */\n .hit-counter {\n background: #000;\n color: #ff0000;\n font-family: \"Courier New\", monospace;\n border: 2px inset #333;\n padding: 0.25rem 0.5rem;\n letter-spacing: 0.1em;\n \n &::before {\n content: \"Hits: \";\n color: #00ff00;\n }\n }\n \n /* Webring Navigation */\n .webring {\n text-align: center;\n padding: 0.5rem;\n border: 2px ridge #c0c0c0;\n background: #000;\n \n a {\n color: #00ff00;\n margin: 0 0.5rem;\n \n &:hover {\n color: #ffff00;\n }\n }\n }\n \n /* CRT Scanline Effect (optional - add to containers) */\n .crt-effect {\n position: relative;\n \n &::after {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: repeating-linear-gradient(\n 0deg,\n rgba(0, 0, 0, 0.1) 0px,\n rgba(0, 0, 0, 0.1) 1px,\n transparent 1px,\n transparent 2px\n );\n pointer-events: none;\n }\n }\n}\n",[],[480,498,579,682,660],"retro","0b3a3fee-e2e9-11f0-b141-42dde27851f2",16,["D",1766815099205],[346],[480,498,579,682],"0c5ca006-e2e9-11f0-b141-42dde27851f2","0c5ca0ba-e2e9-11f0-b141-42dde27851f2","0af97e82-e2e9-11f0-9dc9-42dde27851f2",49,["D",1766815101107],"/* ===================================\n Luma Theme - Event Platform Style\n Based on Lu.ma's clean, modern event platform aesthetic\n Font: System UI, Primary: Dark, Accent: Coral Red\n =================================== */\n\n.theme-scope {\n /* ===================================\n Base Theme Override\n =================================== */\n --font-family-sans: -apple-system, \"system-ui\", Inter, Roboto, \"Segoe UI\", \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif;\n \n font-family: var(--font-family-sans);\n background-color: #ffffff;\n color: #131517;\n line-height: 1.5;\n -webkit-font-smoothing: antialiased;\n \n /* ===================================\n Luma Color Palette\n =================================== */\n \n /* Primary = Dark/Black (main buttons, text) */\n --color-primary: #131517;\n --color-primary-hover: #2a2d30;\n --color-primary-active: #0a0b0c;\n --color-primary-dark: #000000;\n --color-primary-light: #f7f8f9;\n --color-primary-lighter: #f1f5f9;\n --color-primary-lightest: #e2e8f0;\n --color-primary-ring: rgba(19, 21, 23, 0.2);\n \n /* Accent = Luma Coral/Red (CTAs, highlights, brand) */\n --color-accent: #e54d2e;\n --color-accent-hover: #d4401f;\n --color-accent-light: #ff6b4a;\n \n /* CTA uses the accent color */\n --color-cta: #e54d2e;\n --color-cta-hover: #d4401f;\n \n /* Text Colors */\n --color-text-primary: #131517;\n --color-text-secondary: rgba(19, 21, 23, 0.64);\n --color-text-muted: #94a3b8;\n --color-text-neutral: #475569;\n --color-text-neutral-dark: #334155;\n --color-text-on-dark: #ffffff;\n --color-text-on-dark-muted: rgba(255, 255, 255, 0.85);\n \n /* Backgrounds */\n --color-bg-primary: #ffffff;\n --color-bg-secondary: #f8fafc;\n --color-bg-muted: #f1f5f9;\n --color-bg-light: #f7f8f9;\n --color-bg-dark: #131517;\n --color-bg-hover: #e2e8f0;\n \n /* Borders */\n --color-border: #e2e8f0;\n --color-border-light: #f1f5f9;\n --color-border-tab: #e4e4e7;\n \n /* Semantic Colors */\n --color-success: #22c55e;\n --color-success-light: #dcfce7;\n --color-success-dark: #166534;\n \n --color-warning: #f59e0b;\n --color-warning-light: #fef3c7;\n --color-warning-dark: #92400e;\n \n --color-danger: #ef4444;\n --color-danger-light: #fee2e2;\n --color-danger-dark: #b91c1c;\n \n --color-info: #0ea5e9;\n --color-info-light: #e0f2fe;\n --color-info-dark: #075985;\n \n /* Utility Colors */\n --color-white: #ffffff;\n --color-gray-300: #d1d5db;\n --color-gray-400: #9ca3af;\n \n /* ===================================\n Border Radius - Luma uses generous rounding\n =================================== */\n --radius-sm: 0.25rem; /* 4px */\n --radius-md: 0.5rem; /* 8px */\n --radius-lg: 0.75rem; /* 12px */\n --radius-xl: 1rem; /* 16px */\n --radius-2xl: 1.25rem; /* 20px */\n --radius-full: 9999px;\n \n /* Component-specific radii */\n --radius-button: 0.75rem; /* 12px - Luma uses larger button radii */\n --radius-input: 0.75rem; /* 12px */\n --radius-card: 0.75rem; /* 12px */\n --radius-badge: 9999px; /* Pill badges */\n --radius-dropdown: 0.5rem; /* 8px */\n --radius-tab: 0.5rem; /* 8px */\n --radius-toast: 0.75rem; /* 12px */\n \n /* ===================================\n Shadows - Soft and subtle\n =================================== */\n --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);\n --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);\n --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);\n --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.15);\n --shadow-2xl: 0 20px 60px rgba(0, 0, 0, 0.2);\n --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08);\n --shadow-dropdown: 0 4px 12px rgba(0, 0, 0, 0.1);\n --shadow-toast: 0 8px 32px rgba(0, 0, 0, 0.12);\n \n /* ===================================\n Typography\n =================================== */\n h1, h2, h3, h4, h5, h6,\n .text-h1, .text-h2, .text-h3 {\n font-family: var(--font-family-sans);\n font-weight: 600;\n color: var(--color-text-primary);\n letter-spacing: -0.02em;\n line-height: 1.2;\n }\n \n h1, .text-h1 { \n font-size: 2.5rem; \n font-weight: 700;\n }\n \n h2, .text-h2 { \n font-size: 1.875rem; \n font-weight: 700;\n }\n \n h3, .text-h3 { \n font-size: 1.25rem; \n font-weight: 600;\n }\n \n /* Links - subtle, no underline by default */\n a, .link {\n color: var(--color-text-primary);\n text-decoration: none;\n transition: color 0.2s ease;\n \n &:hover {\n color: var(--color-text-neutral);\n text-decoration: none;\n }\n }\n \n /* ===================================\n Buttons - Luma Style\n =================================== */\n .btn-primary {\n background-color: var(--color-primary);\n color: var(--color-text-on-dark);\n border: none;\n border-radius: var(--radius-button);\n font-weight: 600;\n padding: 0.75rem 1.5rem;\n font-size: 1rem;\n transition: all 0.2s ease;\n \n &:hover {\n background-color: var(--color-primary-hover);\n transform: translateY(-1px);\n box-shadow: var(--shadow-md);\n }\n \n &:active {\n transform: translateY(0);\n }\n }\n \n .btn-secondary {\n background-color: var(--color-bg-muted);\n color: var(--color-text-primary);\n border: none;\n border-radius: var(--radius-button);\n font-weight: 500;\n padding: 0.75rem 1.5rem;\n transition: all 0.2s ease;\n \n &:hover {\n background-color: var(--color-bg-hover);\n }\n }\n \n .btn-tertiary {\n background-color: transparent;\n color: var(--color-text-neutral);\n border: none;\n border-radius: var(--radius-button);\n font-weight: 500;\n padding: 0.75rem 1.5rem;\n transition: all 0.2s ease;\n \n &:hover {\n background-color: var(--color-bg-muted);\n color: var(--color-text-primary);\n }\n }\n \n .btn-ghost {\n background-color: transparent;\n color: var(--color-text-muted);\n border: none;\n border-radius: var(--radius-button);\n font-weight: 500;\n padding: 0.5rem 1rem;\n transition: all 0.2s ease;\n \n &:hover {\n background-color: var(--color-bg-muted);\n color: var(--color-text-neutral);\n }\n }\n \n /* Accent button (uses Luma coral) */\n .btn-accent, .btn-cta {\n background-color: var(--color-accent);\n color: var(--color-text-on-dark);\n border: none;\n border-radius: var(--radius-button);\n font-weight: 600;\n padding: 0.875rem 1.5rem;\n font-size: 1rem;\n transition: all 0.2s ease;\n \n &:hover {\n background-color: var(--color-accent-hover);\n transform: translateY(-1px);\n box-shadow: var(--shadow-md);\n }\n }\n \n .btn-danger {\n background-color: var(--color-danger);\n color: var(--color-text-on-dark);\n border: none;\n border-radius: var(--radius-button);\n font-weight: 600;\n \n &:hover {\n background-color: var(--color-danger-dark);\n }\n }\n \n .btn-success {\n background-color: var(--color-success);\n color: var(--color-text-on-dark);\n border: none;\n border-radius: var(--radius-button);\n font-weight: 600;\n \n &:hover {\n background-color: var(--color-success-dark);\n }\n }\n \n /* ===================================\n Cards - Clean with subtle shadow\n =================================== */\n .card {\n background-color: var(--color-bg-primary);\n border: none;\n border-radius: var(--radius-card);\n box-shadow: var(--shadow-card);\n transition: box-shadow 0.2s ease;\n \n &:hover {\n box-shadow: var(--shadow-md);\n }\n }\n \n .card-title {\n font-weight: 600;\n color: var(--color-text-primary);\n font-size: 1.125rem;\n }\n \n /* ===================================\n Forms - Rounded, clean inputs\n =================================== */\n input[type=text],\n input[type=email],\n input[type=password],\n input[type=number],\n input[type=url],\n input[type=search],\n input[type=tel],\n textarea,\n .form-input {\n background-color: var(--color-bg-muted);\n border: 1px solid var(--color-border);\n border-radius: var(--radius-input);\n padding: 0.75rem 1rem;\n font-family: var(--font-family-sans);\n font-size: 1rem;\n color: var(--color-text-primary);\n transition: all 0.2s ease;\n \n &::placeholder {\n color: var(--color-text-muted);\n }\n \n &:focus {\n background-color: var(--color-bg-primary);\n border-color: var(--color-primary);\n outline: none;\n box-shadow: 0 0 0 3px var(--color-primary-ring);\n }\n }\n \n select, .form-select {\n background-color: var(--color-bg-muted);\n border: 1px solid var(--color-border);\n border-radius: var(--radius-input);\n padding: 0.75rem 1rem;\n font-family: var(--font-family-sans);\n font-size: 1rem;\n color: var(--color-text-primary);\n \n &:focus {\n border-color: var(--color-primary);\n outline: none;\n box-shadow: 0 0 0 3px var(--color-primary-ring);\n }\n }\n \n label, .form-label {\n color: var(--color-text-primary);\n font-weight: 600;\n font-size: 0.875rem;\n margin-bottom: 0.5rem;\n display: block;\n }\n \n /* ===================================\n Badges - Pill style\n =================================== */\n .badge {\n border-radius: var(--radius-badge);\n font-weight: 600;\n font-size: 0.75rem;\n padding: 0.25rem 0.75rem;\n }\n \n .badge-success {\n background-color: var(--color-success-light);\n color: var(--color-success-dark);\n }\n \n .badge-danger {\n background-color: var(--color-danger-light);\n color: var(--color-danger-dark);\n }\n \n .badge-warning {\n background-color: var(--color-warning-light);\n color: var(--color-warning-dark);\n }\n \n .badge-info {\n background-color: var(--color-info-light);\n color: var(--color-info-dark);\n }\n \n /* ===================================\n Tabs - Rounded pill style\n =================================== */\n .tabs-list {\n background-color: var(--color-bg-muted);\n border-radius: var(--radius-lg);\n padding: 0.25rem;\n }\n \n .tab-trigger {\n border-radius: var(--radius-md);\n font-weight: 500;\n color: var(--color-text-muted);\n background: transparent;\n border: none;\n padding: 0.5rem 1rem;\n transition: all 0.15s ease;\n \n &:hover:not(.active):not([data-state=\"active\"]) {\n color: var(--color-text-primary);\n background-color: rgba(0, 0, 0, 0.03);\n }\n \n &.active,\n &[data-state=\"active\"] {\n background-color: var(--color-bg-primary);\n color: var(--color-text-primary);\n box-shadow: var(--shadow-sm);\n }\n }\n \n /* ===================================\n Dropdowns - Clean and rounded\n =================================== */\n .dropdown-menu {\n background-color: var(--color-bg-primary);\n border: 1px solid var(--color-border);\n border-radius: var(--radius-dropdown);\n box-shadow: var(--shadow-dropdown);\n padding: 0.25rem;\n }\n \n .dropdown-item {\n border-radius: var(--radius-md);\n color: var(--color-text-neutral);\n font-weight: 500;\n padding: 0.5rem 0.75rem;\n transition: all 0.15s ease;\n \n &:hover {\n background-color: var(--color-bg-muted);\n color: var(--color-text-primary);\n }\n }\n \n /* ===================================\n Alerts/Callouts\n =================================== */\n .alert, .callout {\n border-radius: var(--radius-lg);\n padding: 1rem 1.25rem;\n border: none;\n }\n \n .alert-success, .callout-success {\n background-color: var(--color-success-light);\n color: var(--color-success-dark);\n }\n \n .alert-danger, .callout-danger, .alert-destructive {\n background-color: var(--color-danger-light);\n color: var(--color-danger-dark);\n }\n \n .alert-warning, .callout-warning {\n background-color: var(--color-warning-light);\n color: var(--color-warning-dark);\n }\n \n .alert-info, .callout-info {\n background-color: var(--color-info-light);\n color: var(--color-info-dark);\n }\n \n /* ===================================\n Toast\n =================================== */\n .toast {\n background-color: var(--color-bg-primary);\n border-radius: var(--radius-toast);\n box-shadow: var(--shadow-toast);\n border: 1px solid var(--color-border);\n }\n \n /* ===================================\n Avatars - Circular\n =================================== */\n .avatar {\n border-radius: var(--radius-full);\n border: 2px solid var(--color-bg-primary);\n box-shadow: var(--shadow-sm);\n }\n \n /* ===================================\n Tables - Clean lines\n =================================== */\n table {\n border-radius: var(--radius-lg);\n overflow: hidden;\n }\n \n th {\n background-color: var(--color-bg-muted);\n color: var(--color-text-primary);\n font-weight: 600;\n border-bottom: 1px solid var(--color-border);\n }\n \n td {\n border-bottom: 1px solid var(--color-border);\n }\n \n tr:last-child td {\n border-bottom: none;\n }\n \n /* ===================================\n Accordions\n =================================== */\n .accordion-group {\n border-radius: var(--radius-lg);\n // border: 1px solid var(--color-border);\n overflow: hidden;\n }\n \n .accordion-button {\n font-weight: 600;\n color: var(--color-text-primary);\n \n &:hover {\n background-color: var(--color-bg-muted);\n }\n }\n \n /* ===================================\n Toggle Groups\n =================================== */\n .toggle-group {\n background-color: var(--color-bg-muted);\n border-radius: var(--radius-lg);\n padding: 0.25rem;\n }\n \n .toggle-group-item {\n border-radius: var(--radius-md);\n color: var(--color-text-muted);\n font-weight: 500;\n \n &:hover:not(.active):not([data-state=\"on\"]) {\n color: var(--color-text-primary);\n }\n \n &.active,\n &[data-state=\"on\"] {\n background-color: var(--color-bg-primary);\n color: var(--color-text-primary);\n box-shadow: var(--shadow-sm);\n }\n }\n \n /* ===================================\n Utility Classes\n =================================== */\n .text-accent { color: var(--color-accent); }\n .text-primary { color: var(--color-text-primary); }\n .text-muted { color: var(--color-text-muted); }\n .text-on-dark { color: var(--color-text-on-dark); }\n \n .bg-muted { background-color: var(--color-bg-muted); }\n .bg-secondary { background-color: var(--color-bg-secondary); }\n .bg-dark { \n background-color: var(--color-bg-dark); \n color: var(--color-text-on-dark);\n }\n \n .border-accent { border-color: var(--color-accent); }\n}\n\n",[],[480,498,579,696,660],"luma","0af97dd8-e2e9-11f0-9dc9-42dde27851f2",13,["D",1766815098782],[344],[480,498,579,696],"3cc157d2-ef19-11f0-90a0-42dde27851f2","0c6b77e8-e2e9-11f0-98a3-42dde27851f2","0b0ef186-e2e9-11f0-8ff9-42dde27851f2",183,["D",1768155212056],"/* ===================================\n Groq Theme - Fast AI Inference Platform Style\n Based on Groq's vibrant orange and modern tech aesthetic\n Font: System UI (app), Space Grotesk (marketing), IBM Plex Mono (code)\n Primary: Orange (#f43e01), Core: Black/White/Grays\n =================================== */\n\n.theme-scope {\n /* ===================================\n Base Theme Override\n =================================== */\n \n /* Typography - Groq uses IBM Plex Mono for code */\n --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco, Consolas, monospace;\n \n /* Marketing fonts - Space Grotesk for landing pages, hero sections, marketing copy */\n --font-display: 'Space Grotesk', -apple-system, system-ui, sans-serif;\n --font-marketing: 'Space Grotesk', -apple-system, system-ui, sans-serif;\n \n /* System UI for app interfaces (default) */\n --font-sans: -apple-system, system-ui, Inter, Roboto, 'Segoe UI', 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;\n \n font-family: var(--font-sans);\n background-color: #ffffff;\n color: #2d2f33; /* groq-gray-800 - Primary text */\n line-height: 1.5;\n -webkit-font-smoothing: antialiased;\n \n /* ===================================\n IBM Plex Mono Font Weight Override\n =================================== */\n /* Apply light weight (300) to all monospace elements */\n .font-mono,\n code, pre, kbd, samp, tt,\n input[style*=\"font-mono\"],\n textarea[style*=\"font-mono\"],\n [style*=\"font-family: var(--font-mono\"],\n *[style*=\"var(--font-mono\"] {\n font-weight: 400 !important;\n }\n \n /* ===================================\n Groq Core Color Palette\n Base colors from the provided palette\n =================================== */\n \n /* Core Oranges (Primary Brand Colors) - Full Scale */\n --groq-orange-50: #fff5e5;\n --groq-orange-100: #ffe8cc;\n --groq-orange-200: #ffd1a3;\n --groq-orange-300: #ffb973;\n --groq-orange-400: #fe9e20;\n --groq-orange-500: #f48b0a;\n --groq-orange-600: #f43e01; /* Primary Brand Color */\n --groq-orange-700: #c23101;\n --groq-orange-800: #9a2701;\n --groq-orange-900: #731d00;\n --groq-orange-950: #4d1300;\n \n /* Core Grays (Neutral Palette) - matches original Groq brand */\n --groq-gray-50: #f9f9f8; /* Lightest background */\n --groq-gray-100: #f3f3ee; /* Nav bg, lighter section bg */\n --groq-gray-200: #e8e8e0; /* Hover states */\n --groq-gray-300: #cecebf; /* Borders */\n --groq-gray-400: #9f9f92; /* Muted elements */\n --groq-gray-500: #69695d; /* Secondary text */\n --groq-gray-600: #4e4e45; /* Darker text */\n --groq-gray-700: #2d2f33; /* Card text, secondary text */\n --groq-gray-800: #26292e; /* Primary text */\n --groq-gray-900: #1a1c1f; /* Dark bg */\n --groq-gray-950: #0f1011; /* Darkest */\n \n /* Pure Black & White */\n --groq-black: #000000;\n --groq-white: #ffffff;\n \n /* ===================================\n Groq Extended Color Palette\n Additional colors for variety\n =================================== */\n \n /* Yellow Tones - Full Scale */\n --groq-yellow-50: #fffef0;\n --groq-yellow-100: #fefdc0;\n --groq-yellow-200: #f4fd90;\n --groq-yellow-300: #fdeb20;\n --groq-yellow-400: #f0dc00;\n --groq-yellow-500: #e6d000;\n --groq-yellow-600: #d4be00;\n --groq-yellow-700: #c6b802;\n --groq-yellow-800: #9a8f02;\n --groq-yellow-900: #706801;\n --groq-yellow-950: #4a4501;\n \n /* Green Tones - Full Scale */\n --groq-green-50: #e8fff5;\n --groq-green-100: #c5ffea;\n --groq-green-200: #a9ffdb;\n --groq-green-300: #10e68d;\n --groq-green-400: #0dd97f;\n --groq-green-500: #0dcc7a;\n --groq-green-600: #0aab66;\n --groq-green-700: #018b01;\n --groq-green-800: #016b01;\n --groq-green-900: #015001;\n --groq-green-950: #003500;\n \n /* Gold Tones */\n --groq-gold-300: #c6b802;\n \n /* Blue Tones - Full Scale */\n --groq-blue-50: #e8f6ff;\n --groq-blue-100: #d0edfe;\n --groq-blue-200: #bfe4fc;\n --groq-blue-300: #5fc0ff;\n --groq-blue-400: #30a8f0;\n --groq-blue-500: #0082a0;\n --groq-blue-600: #006d87;\n --groq-blue-700: #005870;\n --groq-blue-800: #004559;\n --groq-blue-900: #003445;\n --groq-blue-950: #002330;\n \n /* Purple Tones - Full Scale */\n --groq-purple-50: #f8f5fd;\n --groq-purple-100: #f0eafb;\n --groq-purple-200: #e3dcf8;\n --groq-purple-300: #d377fd;\n --groq-purple-400: #b85ce8;\n --groq-purple-500: #683d7f;\n --groq-purple-600: #56326a;\n --groq-purple-700: #452856;\n --groq-purple-800: #351e43;\n --groq-purple-900: #261530;\n --groq-purple-950: #180d1f;\n \n /* Pink Tones - Full Scale */\n --groq-pink-50: #fff5fd;\n --groq-pink-100: #feeafc;\n --groq-pink-200: #fad8ff;\n --groq-pink-300: #f392dd;\n --groq-pink-400: #f07cd5;\n --groq-pink-500: #ee66ce;\n --groq-pink-600: #d450b5;\n --groq-pink-700: #b03c97;\n --groq-pink-800: #8c2f78;\n --groq-pink-900: #68235a;\n --groq-pink-950: #45173c;\n \n /* ===================================\n Semantic Color Mapping\n =================================== */\n \n /* Primary = Groq Orange 600 (main brand color) */\n --color-primary: var(--groq-orange-600);\n --color-primary-hover: var(--groq-orange-700);\n --color-primary-active: var(--groq-orange-800);\n --color-primary-dark: var(--groq-orange-800);\n --color-primary-light: var(--groq-orange-200);\n --color-primary-lighter: var(--groq-orange-100);\n --color-primary-lightest: var(--groq-orange-50);\n --color-primary-ring: rgba(244, 62, 1, 0.2);\n \n /* Accent = Lighter Orange for variety */\n --color-accent: var(--groq-orange-400);\n --color-accent-hover: var(--groq-orange-600);\n --color-accent-light: var(--groq-orange-300);\n \n /* CTA uses main brand color */\n --color-cta: var(--groq-orange-600);\n --color-cta-hover: var(--groq-orange-700);\n \n /* Text Colors */\n --color-text-primary: var(--groq-gray-800); /* #2d2f33 - Main body text */\n --color-text-secondary: var(--groq-gray-700); /* #655852 - Card text */\n --color-text-muted: var(--groq-gray-600); /* #766f6b - Nav text, lighter */\n --color-text-neutral: var(--groq-gray-700);\n --color-text-neutral-dark: var(--groq-gray-950); /* #1e1e1e - Darkest text */\n --color-text-on-dark: var(--groq-gray-50); /* #fefefe - Light text on dark bg */\n --color-text-on-dark-muted: rgba(206, 206, 191, 0.85);\n \n /* ===================================\n Background Colors\n Console (App) and Marketing variations\n =================================== */\n \n /* Base backgrounds */\n --color-bg-primary: var(--groq-white); /* #ffffff - Pure white */\n --color-bg-secondary: var(--groq-gray-200); /* #fefefe - Card background */\n --color-bg-muted: var(--groq-gray-100); /* #fafafa - Console page bg */\n --color-bg-light: var(--groq-gray-100); /* #fafafa - Light sections */\n --color-bg-dark: var(--groq-gray-900); /* #272b2c - Dark bg */\n --color-bg-hover: var(--groq-gray-200); /* #f3f3ee - Hover state */\n \n /* Console (App) backgrounds */\n --color-bg-card: var(--groq-gray-50); /* #fefefe - White cards */\n --color-bg-page: var(--groq-gray-100); /* #fafafa - Console page bg */\n \n /* Marketing backgrounds */\n --color-bg-nav: var(--groq-gray-200); /* #f3f3ee - Nav background */\n --color-bg-hero: var(--groq-gray-300); /* #edede5 - Hero sections */\n --color-bg-section: var(--groq-gray-200); /* #f3f3ee - Light sections */\n --color-bg-section-alt: var(--groq-gray-400); /* #e8e8de - Gray cards */\n \n /* Borders */\n --color-border: var(--groq-gray-400); /* #e8e8de - Default border */\n --color-border-light: var(--groq-gray-500); /* #cecebf - Light border */\n --color-border-tab: var(--groq-gray-500);\n \n /* Semantic Colors */\n --color-success: #22c55e;\n --color-success-light: #dcfce7;\n --color-success-dark: #166534;\n --color-success-text: var(--groq-green-50); /* light green text on darkish green for better contrast */\n \n --color-warning: #f59e0b;\n --color-warning-light: #fef3c7;\n --color-warning-dark: #92400e;\n --color-warning-text: #ffffff;\n \n --color-danger: #ef4444;\n --color-danger-light: #fee2e2;\n --color-danger-dark: #b91c1c;\n --color-danger-text: #ffffff;\n \n --color-info: #0ea5e9;\n --color-info-light: #e0f2fe;\n --color-info-dark: #075985;\n --color-info-text: #ffffff;\n \n --color-neutral-text: #ffffff;\n \n /* Primary text (on primary background) */\n --color-primary-text: var(--color-text-on-dark);\n \n /* Utility Colors */\n --color-white: var(--groq-white);\n --color-gray-300: var(--groq-gray-300);\n --color-gray-400: var(--groq-gray-400);\n \n /* Form Controls (Checkbox, Radio, Toggle) */\n --color-control-border: var(--color-border);\n --color-control-border-hover: var(--groq-orange-400);\n --color-control-bg: var(--color-bg-primary);\n --color-control-bg-hover: var(--groq-orange-50, #fff5e5);\n --color-control-checked: var(--groq-orange-600);\n --color-control-checked-hover: var(--groq-orange-700);\n --color-control-checked-border: var(--groq-orange-600);\n --color-control-checkmark: #ffffff;\n --color-control-ring: rgba(244, 62, 1, 0.15);\n --color-toggle-bg: var(--groq-gray-500);\n --color-toggle-bg-checked: var(--groq-orange-600);\n --color-toggle-knob: #ffffff;\n \n /* Choice Card Colors */\n --color-choice-border: var(--color-border);\n --color-choice-border-hover: var(--groq-orange-400);\n --color-choice-border-checked: var(--groq-orange-600);\n --color-choice-bg: transparent;\n --color-choice-bg-hover: var(--color-bg-hover);\n --color-choice-bg-checked: rgba(244, 62, 1, 0.03);\n --color-choice-ring: var(--groq-orange-600);\n \n /* ===================================\n Border Radius - Modern, slightly rounded\n =================================== */\n --radius-sm: 0.25rem; /* 4px */\n --radius-md: 0.375rem; /* 6px */\n --radius-md: 0.5rem; /* 8px */\n --radius-xl: 0.75rem; /* 12px */\n --radius-2xl: 1rem; /* 16px */\n --radius-full: 9999px;\n \n /* Component-specific radii */\n --radius-button: 0.5rem; /* 8px - Modern, clean buttons */\n --radius-input: 0.375rem; /* 6px */\n --radius-card: 0.5rem; /* 8px */\n --radius-badge: 0.25rem; /* 4px - Subtle rounded badges */\n --radius-dropdown: 0.5rem; /* 8px */\n --radius-tab: 0.375rem; /* 6px */\n --radius-toast: 0.5rem; /* 8px */\n \n /* ===================================\n Shadows - Sharp and modern\n =================================== */\n --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);\n --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);\n --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);\n --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);\n --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.15);\n --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.1);\n --shadow-dropdown: 0 4px 6px rgba(0, 0, 0, 0.1);\n --shadow-toast: 0 10px 15px rgba(0, 0, 0, 0.1);\n \n /* ===================================\n Typography\n =================================== */\n h1, h2, h3, h4, h5, h6,\n .text-h1, .text-h2, .text-h3 {\n font-family: var(--font-family-sans);\n font-weight: 700;\n color: var(--color-text-primary);\n letter-spacing: -0.025em;\n line-height: 1.2;\n }\n \n h1, .text-h1 { \n font-size: 2.5rem; \n font-weight: 800;\n }\n \n h2, .text-h2 { \n font-size: 1.875rem; \n font-weight: 700;\n }\n \n h3, .text-h3 { \n font-size: 1.25rem; \n font-weight: 600;\n }\n \n /* Links - Groq orange */\n a, .link {\n color: var(--color-primary);\n text-decoration: none;\n transition: color 0.2s ease;\n \n &:hover {\n color: var(--color-primary-hover);\n text-decoration: none;\n }\n }\n \n /* ===================================\n Buttons - Groq Style\n =================================== */\n .btn-primary {\n background-color: var(--color-primary);\n color: var(--color-primary-text);\n border: none;\n border-radius: var(--radius-button);\n font-weight: 600;\n // padding: 0.75rem 1.5rem;\n /* font-size inherited from base --text-button variable */\n transition: all 0.2s ease;\n \n &:hover {\n background-color: var(--color-primary-hover);\n transform: translateY(-1px);\n box-shadow: var(--shadow-md);\n }\n \n &:active {\n transform: translateY(0);\n }\n }\n \n .btn-secondary {\n background-color: var(--color-bg-muted);\n color: var(--color-text-primary);\n border: 1px solid var(--color-border);\n border-radius: var(--radius-button);\n font-weight: 500;\n // padding: 0.75rem 1.5rem;\n transition: all 0.2s ease;\n \n &:hover {\n background-color: var(--color-bg-hover);\n border-color: var(--groq-orange-600);\n color: var(--groq-orange-600);\n }\n }\n \n .btn-tertiary {\n background-color: transparent;\n color: var(--color-text-neutral);\n border: none;\n border-radius: var(--radius-button);\n font-weight: 500;\n // padding: 0.75rem 1.5rem;\n transition: all 0.2s ease;\n \n &:hover {\n background-color: var(--color-bg-muted);\n color: var(--color-text-primary);\n }\n }\n \n .btn-ghost {\n background-color: transparent;\n color: var(--color-text-muted);\n border: none;\n border-radius: var(--radius-button);\n font-weight: 500;\n padding: 0.5rem 1rem;\n transition: all 0.2s ease;\n \n &:hover {\n background-color: var(--color-bg-muted);\n color: var(--color-text-neutral);\n }\n }\n \n /* Accent button (uses bright orange) */\n .btn-accent, .btn-cta {\n background-color: var(--color-accent);\n color: var(--color-primary-text);\n border: none;\n border-radius: var(--radius-button);\n font-weight: 600;\n padding: 0.875rem 1.5rem;\n /* font-size inherited from base --text-button variable */\n transition: all 0.2s ease;\n \n &:hover {\n background-color: var(--color-accent-hover);\n transform: translateY(-1px);\n box-shadow: var(--shadow-md);\n }\n }\n \n .btn-danger {\n background-color: var(--color-danger);\n color: var(--color-danger-text);\n border: none;\n border-radius: var(--radius-button);\n font-weight: 600;\n \n &:hover {\n background-color: var(--color-danger-dark);\n }\n }\n \n .btn-success {\n background-color: var(--color-success);\n color: var(--color-success-text);\n border: none;\n border-radius: var(--radius-button);\n font-weight: 600;\n \n &:hover {\n background-color: var(--color-success-dark);\n color: var(--color-text-on-dark);\n }\n }\n \n /* ===================================\n Cards - Clean with subtle borders\n =================================== */\n .card {\n background-color: var(--color-bg-primary);\n border: 1px solid var(--color-border);\n border-radius: var(--radius-card);\n box-shadow: var(--shadow-card);\n transition: all 0.2s ease;\n \n &:hover {\n border-color: var(--color-border-tab);\n box-shadow: var(--shadow-md);\n }\n }\n \n .card-title {\n font-weight: 600;\n color: var(--color-text-primary);\n font-size: 1.125rem;\n }\n \n /* ===================================\n Forms - Clean, modern inputs\n =================================== */\n input[type=text],\n input[type=email],\n input[type=password],\n input[type=number],\n input[type=url],\n input[type=search],\n input[type=tel],\n textarea,\n .form-input {\n background-color: var(--color-bg-primary);\n border: 1px solid var(--color-border);\n border-radius: var(--radius-input);\n padding: 0.75rem 1rem;\n font-family: var(--font-family-sans);\n font-size: 1rem;\n color: var(--color-text-primary);\n transition: all 0.2s ease;\n \n &::placeholder {\n color: var(--color-text-muted);\n }\n \n &:focus {\n background-color: var(--color-bg-primary);\n border-color: var(--color-primary);\n outline: none;\n box-shadow: 0 0 0 3px var(--color-primary-ring);\n }\n }\n \n select, .form-select {\n background-color: var(--color-bg-primary);\n border: 1px solid var(--color-border);\n border-radius: var(--radius-input);\n padding: 0.75rem 1rem;\n font-family: var(--font-family-sans);\n font-size: 1rem;\n color: var(--color-text-primary);\n \n &:focus {\n border-color: var(--color-primary);\n outline: none;\n box-shadow: 0 0 0 3px var(--color-primary-ring);\n }\n }\n \n label, .form-label {\n color: var(--color-text-primary);\n font-weight: 600;\n font-size: 0.875rem;\n margin-bottom: 0.5rem;\n display: block;\n }\n \n /* ===================================\n Badges - Subtle rounded style\n =================================== */\n .badge {\n border-radius: var(--radius-badge);\n font-weight: 600;\n font-size: 0.75rem;\n padding: 0.25rem 0.75rem;\n }\n \n .badge-success {\n background-color: var(--color-success-light);\n color: var(--color-success-dark);\n }\n \n .badge-danger {\n background-color: var(--color-danger-light);\n color: var(--color-danger-dark);\n }\n \n .badge-warning {\n background-color: var(--color-warning-light);\n color: var(--color-warning-dark);\n }\n \n .badge-info {\n background-color: var(--color-info-light);\n color: var(--color-info-dark);\n }\n \n /* ===================================\n Tabs - Clean, modern style\n =================================== */\n .tabs-list {\n background-color: transparent;\n border-bottom: 2px solid var(--color-border);\n padding: 0;\n }\n \n .tab-trigger {\n border-radius: 0;\n font-weight: 500;\n color: var(--color-text-muted);\n background: transparent;\n border: none;\n border-bottom: 2px solid transparent;\n padding: 0.75rem 1rem;\n margin-bottom: -2px;\n transition: all 0.15s ease;\n \n &:hover:not(.active):not([data-state=\"active\"]) {\n color: var(--color-text-primary);\n border-bottom-color: var(--color-border-tab);\n }\n \n &.active,\n &[data-state=\"active\"] {\n color: var(--color-primary);\n border-bottom-color: var(--color-primary);\n font-weight: 600;\n }\n }\n \n /* ===================================\n Dropdowns - Clean and sharp\n =================================== */\n .dropdown-menu {\n background-color: var(--color-bg-primary);\n border: 1px solid var(--color-border);\n border-radius: var(--radius-dropdown);\n box-shadow: var(--shadow-dropdown);\n padding: 0.5rem;\n }\n \n .dropdown-item {\n border-radius: var(--radius-sm);\n color: var(--color-text-neutral);\n font-weight: 500;\n padding: 0.625rem 0.75rem;\n transition: all 0.15s ease;\n \n &:hover {\n background-color: var(--color-bg-muted);\n color: var(--color-text-primary);\n }\n }\n \n /* ===================================\n Alerts/Callouts\n =================================== */\n .alert, .callout {\n border-radius: var(--radius-md);\n padding: 1rem 1.25rem;\n border: 1px solid;\n }\n \n .alert-success, .callout-success {\n background-color: var(--color-success-light);\n border-color: var(--color-success);\n color: var(--color-success-dark);\n }\n \n .alert-danger, .callout-danger, .alert-destructive {\n background-color: var(--color-danger-light);\n border-color: var(--color-danger);\n color: var(--color-danger-dark);\n }\n \n .alert-warning, .callout-warning {\n background-color: var(--color-warning-light);\n border-color: var(--color-warning);\n color: var(--color-warning-dark);\n }\n \n .alert-info, .callout-info {\n background-color: var(--color-info-light);\n border-color: var(--color-info);\n color: var(--color-info-dark);\n }\n \n /* ===================================\n Toast\n =================================== */\n .toast {\n background-color: var(--color-bg-primary);\n border-radius: var(--radius-toast);\n box-shadow: var(--shadow-toast);\n border: 1px solid var(--color-border);\n }\n \n /* ===================================\n Avatars - Circular\n =================================== */\n .avatar {\n border-radius: var(--radius-full);\n border: 2px solid var(--color-bg-primary);\n box-shadow: var(--shadow-sm);\n }\n \n /* ===================================\n Tables - Full bordered style for Groq\n =================================== */\n table {\n border-radius: var(--radius-md);\n border-collapse: separate;\n border-spacing: 0;\n border: 1px solid var(--color-border);\n }\n \n th {\n background-color: var(--color-bg-muted);\n color: var(--color-text-primary);\n font-weight: 600;\n border-right: 1px solid var(--color-border);\n border-bottom: 1px solid var(--color-border);\n }\n \n th:last-child {\n border-right: none;\n }\n \n td {\n border-right: 1px solid var(--color-border);\n border-bottom: 1px solid var(--color-border);\n }\n \n td:last-child {\n border-right: none;\n }\n \n /* Keep bottom border on last row (commented out / redundant BUT kind of looks nice so keeping) */\n // tbody tr:last-child td {\n // border-bottom: 1px solid var(--color-border);\n // }\n \n /* Rounded corners on corner cells */\n thead tr:first-child th:first-child {\n border-top-left-radius: var(--radius-md);\n }\n \n thead tr:first-child th:last-child {\n border-top-right-radius: var(--radius-md);\n }\n \n tbody tr:last-child td:first-child {\n border-bottom-left-radius: var(--radius-md);\n }\n \n tbody tr:last-child td:last-child {\n border-bottom-right-radius: var(--radius-md);\n }\n \n /* ===================================\n Accordions\n =================================== */\n .accordion-group {\n border-radius: var(--radius-md);\n // border: 1px solid var(--color-border);\n overflow: hidden;\n }\n \n .accordion-button {\n font-weight: 600;\n color: var(--color-text-primary);\n \n &:hover {\n background-color: var(--color-bg-muted);\n }\n }\n \n /* ===================================\n Toggle Groups\n =================================== */\n .toggle-group {\n background-color: var(--color-bg-muted);\n border-radius: var(--radius-md);\n padding: 0.25rem;\n }\n \n .toggle-group-item {\n // border-radius: var(--radius-md);\n color: var(--color-text-muted);\n font-weight: 500;\n \n &:hover:not(.active):not([data-state=\"on\"]) {\n color: var(--color-text-primary);\n }\n \n &.active,\n &[data-state=\"on\"] {\n background-color: var(--color-bg-primary);\n color: var(--color-text-primary);\n box-shadow: var(--shadow-sm);\n }\n }\n \n /* ===================================\n Utility Classes\n =================================== */\n .text-accent { color: var(--color-accent); }\n .text-primary { color: var(--color-text-primary); }\n .text-muted { color: var(--color-text-muted); }\n .text-on-dark { color: var(--color-text-on-dark); }\n \n .bg-muted { background-color: var(--color-bg-muted); }\n .bg-secondary { background-color: var(--color-bg-secondary); }\n .bg-dark { \n background-color: var(--color-bg-dark); \n color: var(--color-text-on-dark);\n }\n \n .border-accent { border-color: var(--color-accent); }\n .border-primary { border-color: var(--color-primary); }\n \n /* ===================================\n Groq-Specific Utility Classes\n Use the extended color palette\n =================================== */\n \n /* Orange variants */\n .text-groq-orange { color: var(--groq-orange-400); }\n .bg-groq-orange { background-color: var(--groq-orange-400); }\n .border-groq-orange { border-color: var(--groq-orange-400); }\n \n /* Yellow variants */\n .text-groq-yellow { color: var(--groq-yellow-300); }\n .bg-groq-yellow { background-color: var(--groq-yellow-300); }\n .border-groq-yellow { border-color: var(--groq-yellow-300); }\n \n /* Green variants */\n .text-groq-green { color: var(--groq-green-300); }\n .bg-groq-green { background-color: var(--groq-green-300); }\n .border-groq-green { border-color: var(--groq-green-300); }\n \n /* Blue variants */\n .text-groq-blue { color: var(--groq-blue-300); }\n .bg-groq-blue { background-color: var(--groq-blue-300); }\n .border-groq-blue { border-color: var(--groq-blue-300); }\n \n /* Purple variants */\n .text-groq-purple { color: var(--groq-purple-300); }\n .bg-groq-purple { background-color: var(--groq-purple-300); }\n .border-groq-purple { border-color: var(--groq-purple-300); }\n \n /* Pink variants */\n .text-groq-pink { color: var(--groq-pink-300); }\n .bg-groq-pink { background-color: var(--groq-pink-300); }\n .border-groq-pink { border-color: var(--groq-pink-300); }\n}\n\n/* ===================================\n Groq Dark Mode\n Vibrant orange on dark backgrounds\n =================================== */\n\n.theme-scope.dark,\n.dark .theme-scope {\n /* ===================================\n Base Dark Theme Override\n =================================== */\n \n background-color: var(--groq-gray-900);\n color: var(--groq-gray-50);\n \n /* ===================================\n Groq Dark Mode Semantic Colors\n =================================== */\n \n /* Primary = Groq Orange (brighter for dark mode) */\n --color-primary: var(--groq-orange-600);\n --color-primary-hover: var(--groq-orange-500);\n --color-primary-active: var(--groq-orange-400);\n --color-primary-dark: var(--groq-orange-300);\n --color-primary-light: rgba(244, 62, 1, 0.15);\n --color-primary-lighter: rgba(244, 62, 1, 0.1);\n --color-primary-lightest: rgba(244, 62, 1, 0.05);\n --color-primary-ring: rgba(254, 158, 32, 0.35);\n --color-primary-text: var(--groq-gray-950);\n \n /* Accent = Lighter Orange for variety */\n --color-accent: var(--groq-orange-300);\n --color-accent-hover: var(--groq-orange-400);\n --color-accent-light: var(--groq-orange-200);\n \n /* CTA uses main brand color */\n --color-cta: var(--groq-orange-400);\n --color-cta-hover: var(--groq-orange-500);\n \n /* Text Colors - Light on dark */\n --color-text-primary: var(--groq-gray-50);\n --color-text-secondary: var(--groq-gray-100);\n --color-text-muted: var(--groq-gray-400);\n --color-text-neutral: var(--groq-gray-300);\n --color-text-neutral-dark: var(--groq-gray-100);\n --color-text-on-dark: var(--groq-gray-900);\n --color-text-on-dark-muted: rgba(26, 28, 31, 0.85);\n \n /* ===================================\n Background Colors - Dark\n =================================== */\n \n /* Base backgrounds */\n --color-bg-primary: var(--groq-gray-900);\n --color-bg-secondary: var(--groq-gray-800);\n --color-bg-muted: var(--groq-gray-700);\n --color-bg-light: var(--groq-gray-800);\n --color-bg-dark: var(--groq-gray-50);\n --color-bg-hover: var(--groq-gray-700);\n \n /* Console (App) backgrounds */\n --color-bg-card: var(--groq-gray-800);\n --color-bg-page: var(--groq-gray-900);\n \n /* Marketing backgrounds */\n --color-bg-nav: var(--groq-gray-800);\n --color-bg-hero: var(--groq-gray-900);\n --color-bg-section: var(--groq-gray-800);\n --color-bg-section-alt: var(--groq-gray-700);\n \n /* Borders - subtle on dark */\n --color-border: var(--groq-gray-700);\n --color-border-light: var(--groq-gray-600);\n --color-border-tab: var(--groq-gray-600);\n \n /* Semantic Colors - Brighter for dark mode */\n --color-success: var(--groq-green-400);\n --color-success-light: rgba(13, 217, 127, 0.15);\n --color-success-dark: var(--groq-green-300);\n --color-success-text: var(--groq-gray-950);\n \n --color-warning: var(--groq-yellow-300);\n --color-warning-light: rgba(253, 235, 32, 0.15);\n --color-warning-dark: var(--groq-yellow-200);\n --color-warning-text: var(--groq-gray-950);\n \n --color-danger: #f87171;\n --color-danger-light: rgba(239, 68, 68, 0.15);\n --color-danger-dark: #fca5a5;\n --color-danger-text: var(--groq-gray-950);\n \n --color-info: var(--groq-blue-300);\n --color-info-light: rgba(95, 192, 255, 0.15);\n --color-info-dark: var(--groq-blue-200);\n --color-info-text: var(--groq-gray-950);\n \n --color-neutral-text: var(--groq-gray-950);\n \n /* Utility Colors */\n --color-white: var(--groq-gray-900);\n --color-gray-300: var(--groq-gray-600);\n --color-gray-400: var(--groq-gray-500);\n \n /* Form Controls - Dark Mode */\n --color-control-border: var(--groq-gray-600);\n --color-control-border-hover: var(--groq-orange-400);\n --color-control-bg: var(--groq-gray-800);\n --color-control-bg-hover: var(--groq-gray-700);\n --color-control-checked: var(--groq-orange-400);\n --color-control-checked-hover: var(--groq-orange-500);\n --color-control-checked-border: var(--groq-orange-400);\n --color-control-checkmark: var(--groq-gray-950);\n --color-control-ring: rgba(254, 158, 32, 0.25);\n --color-toggle-bg: var(--groq-gray-600);\n --color-toggle-bg-checked: var(--groq-orange-400);\n --color-toggle-knob: var(--groq-gray-950);\n \n /* Choice Card Colors - Dark Mode */\n --color-choice-border: var(--groq-gray-600);\n --color-choice-border-hover: var(--groq-orange-400);\n --color-choice-border-checked: var(--groq-orange-400);\n --color-choice-bg: transparent;\n --color-choice-bg-hover: var(--groq-gray-700);\n --color-choice-bg-checked: rgba(254, 158, 32, 0.08);\n --color-choice-ring: var(--groq-orange-400);\n \n /* ===================================\n Shadows - Darker, more subtle\n =================================== */\n --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);\n --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.35);\n --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);\n --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.45);\n --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.5);\n --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.3);\n --shadow-dropdown: 0 4px 6px rgba(0, 0, 0, 0.4);\n --shadow-toast: 0 10px 15px rgba(0, 0, 0, 0.4);\n \n /* ===================================\n Typography - Dark Mode\n =================================== */\n h1, h2, h3, h4, h5, h6,\n .text-h1, .text-h2, .text-h3 {\n color: var(--groq-gray-50);\n }\n \n /* Links - Groq orange (brighter) */\n a, .link {\n color: var(--groq-orange-400);\n \n &:hover {\n color: var(--groq-orange-300);\n }\n }\n \n /* ===================================\n Groq Dark Mode Utility Classes\n Use brighter colors for dark backgrounds\n =================================== */\n \n /* Orange variants - brighter */\n .text-groq-orange { color: var(--groq-orange-300); }\n .bg-groq-orange { background-color: var(--groq-orange-500); }\n .border-groq-orange { border-color: var(--groq-orange-400); }\n \n /* Yellow variants */\n .text-groq-yellow { color: var(--groq-yellow-200); }\n .bg-groq-yellow { background-color: var(--groq-yellow-400); }\n .border-groq-yellow { border-color: var(--groq-yellow-300); }\n \n /* Green variants */\n .text-groq-green { color: var(--groq-green-300); }\n .bg-groq-green { background-color: var(--groq-green-400); }\n .border-groq-green { border-color: var(--groq-green-300); }\n \n /* Blue variants */\n .text-groq-blue { color: var(--groq-blue-200); }\n .bg-groq-blue { background-color: var(--groq-blue-400); }\n .border-groq-blue { border-color: var(--groq-blue-300); }\n \n /* Purple variants */\n .text-groq-purple { color: var(--groq-purple-300); }\n .bg-groq-purple { background-color: var(--groq-purple-400); }\n .border-groq-purple { border-color: var(--groq-purple-300); }\n \n /* Pink variants */\n .text-groq-pink { color: var(--groq-pink-300); }\n .bg-groq-pink { background-color: var(--groq-pink-400); }\n .border-groq-pink { border-color: var(--groq-pink-300); }\n \n /* Inverted utility classes */\n .text-primary { color: var(--groq-gray-50); }\n .text-muted { color: var(--groq-gray-400); }\n .text-on-dark { color: var(--groq-gray-900); }\n \n .bg-muted { background-color: var(--groq-gray-700); }\n .bg-secondary { background-color: var(--groq-gray-800); }\n .bg-dark { \n background-color: var(--groq-gray-50); \n color: var(--groq-gray-900);\n }\n}\n\n",[],[480,498,579,710,660],"groq","0c63ce94-e2e9-11f0-b39b-42dde27851f2","0c63d010-e2e9-11f0-b39b-42dde27851f2",51,["D",1766815101157],"// Groq Theme Configuration\n// Real JSON data - gets wrapped in \n`;\n\n// Load base.css\nexport async function getStyles() {\n const baseUrl = new URL('.', import.meta.url);\n const cssUrl = new URL('./base.css', baseUrl);\n const cssPath = cssUrl.protocol === 'file:' ? cssUrl.pathname : cssUrl.href;\n const baseCss = await Deno.readTextFile(cssPath);\n \n return {\n tailwind: tailwindStyles,\n baseCss: baseCss\n };\n}\n",[],[480,498,579,747,739],"default","0cb14d7c-e2e9-11f0-8def-42dde27851f2","0cb14e1c-e2e9-11f0-8def-42dde27851f2",65,["D",1766815101665],"// Default Theme Configuration\n// Clean Shadcn-style with custom Brand Blue color family\n// Real JSON data - gets wrapped in \n \n \n \n\n",[],[480,1095,1096,1106,1098],"partials","3be90bc0-ef19-11f0-af6a-42dde27851f2","nav-tabs.html","3be90c74-ef19-11f0-af6a-42dde27851f2",152,["D",1768155210677]," \n \n\n",[],[480,1095,1096,1106,1108],"3bf07676-ef19-11f0-a138-42dde27851f2","loading.html","3bf07716-ef19-11f0-a138-42dde27851f2",154,["D",1768155210725]," \n

\n \n

Welcome to Chatter

Loading your conversations

\n\n",[],[480,1095,1096,1106,1116],"3bf6a4c4-ef19-11f0-9a7f-42dde27851f2","head.html","3bf6a596-ef19-11f0-9a7f-42dde27851f2",155,["D",1768155210693],"\n \n \n \n Chatter\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n\n",[],[480,1095,1096,1106,1124],"3bda55da-ef19-11f0-9a7f-42dde27851f2","templates-view.html","3bda56d4-ef19-11f0-9a7f-42dde27851f2","3b1272c2-ef19-11f0-ba7d-42dde27851f2",151,["D",1768155210260]," \n\n",[],[480,1095,1096,1106,1140,1132],"sidebar","3ba0a862-ef19-11f0-8419-42dde27851f2","index.html","3ba0a970-ef19-11f0-8419-42dde27851f2",143,["D",1768155210174]," \n \n \n \n \n\n",[],[480,1095,1096,1106,1140,1142],"3bb28028-ef19-11f0-a026-42dde27851f2","chats-view.html","3bb28226-ef19-11f0-a026-42dde27851f2",145,["D",1768155210307]," \n \n",[],[480,1095,1096,1106,1140,1150],"3b1271d2-ef19-11f0-ba7d-42dde27851f2",132,["D",1768155209265],[285,286,287],[480,1095,1096,1106,1140],"3c03bb00-ef19-11f0-ba8d-42dde27851f2","models.html","3c03bbbe-ef19-11f0-ba8d-42dde27851f2","3b26ec20-ef19-11f0-af6a-42dde27851f2",158,["D",1768155210534]," \n

\n \n \n \n \n \n

\n \n \n

\n \n

\n API Key\n

\n \n \n \n \n

\n Get your API key from console.groq.com/keys\n

\n \n

\n Base URL\n \n

\n The base OpenAI-compatible endpoint to use. See the Groq documentation.\n

\n \n \n

Models

\n \n /\n \n

\n \n

\n \n \n

\n \n \n \n

\n \n \n

\n \n

\n Active\n Display Name\n Capabilities\n Actions\n

\n \n \n

\n \n \n \n

\n No models configured. Click \"Add Model\" to get started.\n

\n \n \n

\n \n

\n API Key\n

\n \n \n

\n Get your API key from platform.openai.com\n

\n \n

\n Base URL\n \n

\n Default: https://api.openai.com/v1\n

\n \n \n

Models

\n \n /\n \n

\n \n

\n \n \n

\n \n \n \n

\n \n \n

\n Active\n Display Name\n Capabilities\n Actions\n

\n \n

\n \n \n

\n No models configured. Click \"Add Model\" to get started.\n

\n \n \n

\n \n

\n API Key\n

\n \n \n \n \n

\n Get your API key from console.anthropic.com\n

\n \n

\n Base URL\n \n

\n Default: https://api.anthropic.com/v1\n

\n \n \n

Models

\n \n /\n \n

\n \n

\n \n \n

\n \n \n \n

\n \n \n

\n Active\n Display Name\n Capabilities\n Actions\n

\n \n

\n \n \n

\n No models configured. Click \"Add Model\" to get started.\n

\n \n \n \n \n \n

\n \n \n

\n",[],[480,1095,1096,1106,1171,1163],"settings","3bc06210-ef19-11f0-872f-42dde27851f2","3bc062a6-ef19-11f0-872f-42dde27851f2",147,["D",1768155210411]," \n

\n \n \n \n \n

\n \n

\n \n \n \n

\n \n \n \n \n

\n\n",[],[480,1095,1096,1106,1171,1142],"3bcaada6-ef19-11f0-8b6d-42dde27851f2","general.html","3bcaae64-ef19-11f0-8b6d-42dde27851f2",148,["D",1768155210479]," \n

\n \n \n

Data Management

Export Data

Download all your chats and settings.

\n \n

Import Data

Restore from a backup file.

\n \n

Clear Data

Permanently remove all chats.

\n \n

\n \n \n

Behavior

\n \n

\n Enable auto-save\n

Automatically save your chats as you type.

\n \n

\n Show welcome message\n

Display the welcome screen when starting a new chat.

\n \n

\n Enable streaming\n

Stream responses in real-time. Disable for easier debugging.

\n \n

\n Auto-scroll messages\n

Automatically scroll to the latest message. Disable to stay at your current position.

\n\n

\n\n",[],[480,1095,1096,1106,1171,1180],"3bb713ea-ef19-11f0-872f-42dde27851f2","appearance.html","3bb7149e-ef19-11f0-872f-42dde27851f2",146,["D",1768155210348]," \n

Theme

Choose how Chatter looks to you. Select a single theme, or sync with your system.

\n \n \n

\n \n \n \n

\n \n

\n Currently using theme based on your system preference.\n

\n\n \n

\n\n",[],[480,1095,1096,1106,1171,1188],"3b26eb76-ef19-11f0-af6a-42dde27851f2",133,["D",1768155209402],[280,281,282,283],[480,1095,1096,1106,1171],"3bec76fc-ef19-11f0-8520-42dde27851f2","3bec77c4-ef19-11f0-8520-42dde27851f2","3b3bc3c0-ef19-11f0-8520-42dde27851f2",153,["D",1768155210701]," \n \n \n \n \n \n",[],[480,1095,1096,1106,1208,1142],"right-sidebar","3b3bc2da-ef19-11f0-8520-42dde27851f2",134,["D",1768155209541],[278],[480,1095,1096,1106,1208],"3bfceca8-ef19-11f0-9a7f-42dde27851f2","template-editor.html","3bfced48-ef19-11f0-9a7f-42dde27851f2","3b4f093a-ef19-11f0-8902-42dde27851f2",156,["D",1768155210809]," \n

\n \n \n

\n \n

Templates

Select a template from the sidebar or create a new one to get started.

\n \n

\n \n \n

\n \n

Configure your template settings below. These can be applied to any chat.

\n \n \n

\n Template Name\n \n

\n \n \n

\n Default Model\n

\n \n \n \n

\n \n \n

\n System Prompt\n \n

\n The system prompt defines the AI's persona and behavior for this template.\n

\n \n \n

Model Parameters

\n \n \n

\n Temperature\n \n

\n \n

\n Precise\n Creative\n

\n \n \n

\n Max Tokens\n \n

\n \n

\n 256\n 16384\n

\n \n \n

\n Top P\n \n

\n \n

\n \n \n

\n Frequency Penalty\n \n

\n \n

\n \n \n

\n Presence Penalty\n \n

\n \n

\n \n \n

\n",[],[480,1095,1096,1106,16,1215],"3c00ac8a-ef19-11f0-8520-42dde27851f2","messages.html","3c00ad20-ef19-11f0-8520-42dde27851f2",157,["D",1768155210833]," \n

\n \n

Welcome to Chatter

Select a chat from the sidebar or create a new one to get started.

\n \n

\n \n \n\n \n

\n \n

\n\n \n

\n",[],[480,1095,1096,1106,16,1224],"3c0943a4-ef19-11f0-8419-42dde27851f2","input.html","3c09444e-ef19-11f0-8419-42dde27851f2",159,["D",1768155210855]," \n

\n \n \n \n\n

\n \n\n

\n \n \n \n

\n \n

\n \n \n

\n",[],[480,1095,1096,1106,16,1232],"3c0edfc6-ef19-11f0-b4c0-42dde27851f2","header.html","3c0ee05c-ef19-11f0-b4c0-42dde27851f2",160,["D",1768155210891],"

\n \n \n \n

\n \n \n \n \n

\n \n",[],[480,1095,1096,1106,16,1240],"3b4f0868-ef19-11f0-8902-42dde27851f2",135,["D",1768155209668],[273,274,275,276],[480,1095,1096,1106,16],"3afd41f4-ef19-11f0-8902-42dde27851f2",131,["D",1768155209121],[272,277,279,284,288,289,290,291],[480,1095,1096,1106],"3ad989f8-ef19-11f0-b740-42dde27851f2","3ac8d180-ef19-11f0-b740-42dde27851f2",130,["D",1768155208900],[271,292],[480,1095,1096],"3ac8d0c2-ef19-11f0-b740-42dde27851f2",129,["D",1768155208773],[270],[480,1095],"3d0b5706-ef19-11f0-872f-42dde27851f2","threads.js","0bba70e2-e2e9-11f0-b141-42dde27851f2","0a3a8036-e2e9-11f0-9dc9-42dde27851f2",195,["D",1768155211274],"// =============================================================================\n// THREADS - Per-chat/thread state management and message parsing\n// =============================================================================\n// Each chat is a \"thread\" (like email threads). Manages thread state, \n// tracks job status, handles blockers, and provides message parsing\n// to extract reasoning/thinking tokens from various API formats.\n//\n// An \"orchestrator\" (to be built later) will manage multiple threads.\n\nvar THREADS_KEY = 'chatapp-threads';\n\n// Job status enum\nvar JobStatus = {\n PENDING: 'pending', // Job created, waiting to start\n RUNNING: 'running', // Job actively processing\n STREAMING: 'streaming', // Job streaming response\n BLOCKED: 'blocked', // Job blocked by a blocker (e.g., missing API key)\n COMPLETED: 'completed', // Job finished successfully\n ERROR: 'error', // Job failed with an error\n CANCELLED: 'cancelled', // Job was manually cancelled\n PAUSED: 'paused' // Job paused, can be resumed\n};\n\n// Blocker types\nvar BlockerType = {\n API_KEY_MISSING: 'api_key_missing',\n RATE_LIMIT: 'rate_limit',\n NETWORK_ERROR: 'network_error',\n PROVIDER_ERROR: 'provider_error',\n DEPENDENCY_FAILED: 'dependency_failed'\n};\n\n// Event types emitted by thread manager\nvar ThreadEvent = {\n JOB_CREATED: 'job:created',\n JOB_STARTED: 'job:started',\n JOB_STREAMING: 'job:streaming',\n JOB_PROGRESS: 'job:progress',\n JOB_COMPLETED: 'job:completed',\n JOB_FAILED: 'job:failed',\n JOB_BLOCKED: 'job:blocked',\n JOB_UNBLOCKED: 'job:unblocked',\n JOB_CANCELLED: 'job:cancelled',\n JOB_PAUSED: 'job:paused',\n JOB_RESUMED: 'job:resumed',\n BLOCKER_ADDED: 'blocker:added',\n BLOCKER_RESOLVED: 'blocker:resolved',\n STATE_CHANGED: 'state:changed'\n};\n\n// For backwards compatibility\nvar OrchestratorEvent = ThreadEvent;\n\nexport { JobStatus, BlockerType, ThreadEvent, OrchestratorEvent };\n\n// =============================================================================\n// MESSAGE PARSER - Extract reasoning, thinking, tool calls from various formats\n// =============================================================================\n\nexport function parseMessage(message) {\n if (!message) return null;\n \n var content = message.content || '';\n var reasoning = message.reasoning || null;\n var tools = message.tools || message.executedTools || [];\n \n // Parsed result object\n var parsed = {\n // Original message (kept intact for API calls)\n raw: message,\n \n // Clean content (for display, without think tags)\n content: content,\n \n // Extracted reasoning/thinking (for separate display)\n reasoning: reasoning,\n \n // Thinking extracted from content tags\n thinking: null,\n \n // Tool calls\n tools: Array.isArray(tools) ? tools : [],\n \n // Message role\n role: message.role || 'assistant',\n \n // Flags\n hasReasoning: !!reasoning,\n hasThinking: false,\n hasTools: Array.isArray(tools) && tools.length > 0\n };\n \n // Extract ... tags (Claude, some other models)\n var thinkTagMatch = content.match(/([\\s\\S]*?)<\\/think>/i);\n if (thinkTagMatch) {\n parsed.thinking = thinkTagMatch[1].trim();\n parsed.content = content.replace(/[\\s\\S]*?<\\/think>/gi, '').trim();\n parsed.hasThinking = true;\n }\n \n // Extract [think]...[/think] tags (alternative format)\n var thinkBracketMatch = content.match(/\\[think\\]([\\s\\S]*?)\\[\\/think\\]/i);\n if (thinkBracketMatch) {\n parsed.thinking = (parsed.thinking || '') + thinkBracketMatch[1].trim();\n parsed.content = parsed.content.replace(/\\[think\\][\\s\\S]*?\\[\\/think\\]/gi, '').trim();\n parsed.hasThinking = true;\n }\n \n // Extract ... tags (another variant)\n var thinkingTagMatch = content.match(/([\\s\\S]*?)<\\/thinking>/i);\n if (thinkingTagMatch) {\n parsed.thinking = (parsed.thinking || '') + thinkingTagMatch[1].trim();\n parsed.content = parsed.content.replace(/[\\s\\S]*?<\\/thinking>/gi, '').trim();\n parsed.hasThinking = true;\n }\n \n // Extract ```thinking ... ``` blocks\n var thinkingCodeMatch = content.match(/```thinking\\n?([\\s\\S]*?)```/i);\n if (thinkingCodeMatch) {\n parsed.thinking = (parsed.thinking || '') + thinkingCodeMatch[1].trim();\n parsed.content = parsed.content.replace(/```thinking\\n?[\\s\\S]*?```/gi, '').trim();\n parsed.hasThinking = true;\n }\n \n // If we have separate reasoning field from API, merge with thinking\n if (reasoning && !parsed.thinking) {\n parsed.thinking = reasoning;\n parsed.hasThinking = true;\n } else if (reasoning && parsed.thinking) {\n // Both exist - keep them separate but note it\n parsed.hasReasoning = true;\n }\n \n return parsed;\n}\n\n// Parse all messages in an array, returning both raw (for API) and parsed (for display)\nexport function parseMessages(messages) {\n if (!Array.isArray(messages)) return { raw: [], parsed: [] };\n \n return {\n // Raw messages for API calls (unchanged)\n raw: messages,\n \n // Parsed messages for display\n parsed: messages.map(function(msg) {\n if (msg.role === 'user') {\n // User messages don't need parsing\n return {\n raw: msg,\n content: msg.content,\n role: 'user',\n hasReasoning: false,\n hasThinking: false,\n hasTools: false\n };\n }\n return parseMessage(msg);\n })\n };\n}\n\n// Get display content for a message (clean, without think tags)\nexport function getDisplayContent(message) {\n var parsed = parseMessage(message);\n return parsed ? parsed.content : (message.content || '');\n}\n\n// Get thinking/reasoning for a message\nexport function getThinking(message) {\n var parsed = parseMessage(message);\n return parsed ? (parsed.thinking || parsed.reasoning) : null;\n}\n\nexport function createThreadsMixin() {\n return {\n // ==========================================================================\n // THREADS STATE\n // ==========================================================================\n \n threads: {\n // All tracked jobs: Map-like object { jobId: JobState }\n jobs: {},\n \n // Active blockers: Map-like object { blockerId: BlockerState }\n blockers: {},\n \n // Job dependencies: { jobId: [dependencyJobIds] }\n dependencies: {},\n \n // Event listeners: { eventType: [callbacks] }\n listeners: {},\n \n // Stats\n // Job dependencies: { jobId: [dependencyJobIds] }\n dependencies: {},\n \n // Event listeners: { eventType: [callbacks] }\n listeners: {},\n \n // Stats\n stats: {\n totalJobs: 0,\n completedJobs: 0,\n failedJobs: 0,\n blockedJobs: 0,\n activeJobs: 0,\n pendingJobs: 0,\n cancelledJobs: 0\n }\n },\n \n // Backwards compatibility alias\n get orchestrator() {\n return this.threads;\n },\n \n // ==========================================================================\n // INITIALIZATION\n // ==========================================================================\n \n initThreads: function() {\n console.log('[Threads] Initializing...');\n this.loadThreadsState();\n this.updateThreadsStats();\n \n var stats = this.threads.stats;\n console.log('[Threads] Initialized with', Object.keys(this.threads.jobs).length, 'jobs');\n console.log('[Threads] Stats:', \n 'active:', stats.activeJobs,\n 'blocked:', stats.blockedJobs, \n 'pending:', stats.pendingJobs,\n 'completed:', stats.completedJobs,\n 'failed:', stats.failedJobs\n );\n \n // Log all jobs for debugging\n if (Object.keys(this.threads.jobs).length > 0) {\n console.log('[Threads] All jobs:', this.threads.jobs);\n }\n },\n \n // Backwards compatibility\n initOrchestrator: function() {\n return this.initThreads();\n },\n \n loadThreadsState: function() {\n try {\n // Try new key first, fall back to old key for migration\n var stored = localStorage.getItem(THREADS_KEY) || localStorage.getItem('chatapp-orchestrator');\n if (stored) {\n var parsed = JSON.parse(stored);\n // Restore jobs but reset any \"running\" jobs to \"pending\" (they were interrupted)\n if (parsed.jobs) {\n var self = this;\n Object.keys(parsed.jobs).forEach(function(jobId) {\n var job = parsed.jobs[jobId];\n if (job.status === JobStatus.RUNNING || job.status === JobStatus.STREAMING) {\n job.status = JobStatus.PENDING;\n job.interruptedAt = Date.now();\n }\n self.threads.jobs[jobId] = job;\n });\n }\n if (parsed.blockers) {\n this.threads.blockers = parsed.blockers;\n }\n if (parsed.dependencies) {\n this.threads.dependencies = parsed.dependencies;\n }\n }\n } catch (e) {\n console.warn('[Threads] Failed to load state:', e);\n }\n },\n \n saveThreadsState: function() {\n try {\n var data = {\n jobs: this.threads.jobs,\n blockers: this.threads.blockers,\n dependencies: this.threads.dependencies,\n savedAt: Date.now()\n };\n localStorage.setItem(THREADS_KEY, JSON.stringify(data));\n // Clean up old key if it exists\n localStorage.removeItem('chatapp-orchestrator');\n } catch (e) {\n console.warn('[Threads] Failed to save state:', e);\n }\n },\n \n // Backwards compatibility\n loadOrchestratorState: function() {\n return this.loadThreadsState();\n },\n saveOrchestratorState: function() {\n return this.saveThreadsState();\n },\n \n // ==========================================================================\n // JOB MANAGEMENT\n // ==========================================================================\n \n // Create a new job and register it with the orchestrator\n createThreadJob: function(chatId, type, input, options) {\n options = options || {};\n \n // Clear old error/blocked jobs for this chat when creating a new job\n // This prevents stale error indicators from showing\n this.clearOldErrorJobsForChat(chatId);\n \n var jobId = 'job-' + Date.now() + '-' + Math.random().toString(36).substr(2, 9);\n \n var job = {\n id: jobId,\n chatId: chatId,\n type: type,\n input: input,\n status: JobStatus.PENDING,\n createdAt: Date.now(),\n updatedAt: Date.now(),\n startedAt: null,\n completedAt: null,\n result: null,\n error: null,\n blocker: null,\n progress: 0,\n metadata: options.metadata || {},\n retryCount: 0,\n maxRetries: options.maxRetries || 3\n };\n \n this.threads.jobs[jobId] = job;\n this.threads.stats.totalJobs++;\n \n // Handle dependencies\n if (options.dependsOn && options.dependsOn.length > 0) {\n this.threads.dependencies[jobId] = options.dependsOn;\n }\n \n this.updateThreadsStats();\n this.saveOrchestratorState();\n this.emitThreadEvent(OrchestratorEvent.JOB_CREATED, job);\n \n console.log('[Threads] Created job:', jobId, 'for chat:', chatId);\n \n return job;\n },\n \n // Clear old error/blocked jobs for a chat (called when creating new job)\n clearOldErrorJobsForChat: function(chatId) {\n var self = this;\n var jobsToRemove = Object.keys(this.threads.jobs)\n .map(function(id) { return self.threads.jobs[id]; })\n .filter(function(job) { \n return job.chatId === chatId && \n (job.status === JobStatus.ERROR || job.status === JobStatus.BLOCKED);\n });\n \n jobsToRemove.forEach(function(job) {\n delete self.threads.jobs[job.id];\n console.log('[Threads] Cleared old error job:', job.id);\n });\n \n if (jobsToRemove.length > 0) {\n this.updateThreadsStats();\n }\n },\n \n // Get a job by ID\n getThreadJob: function(jobId) {\n return this.threads.jobs[jobId] || null;\n },\n \n // Get all jobs for a specific chat\n getJobsForChat: function(chatId) {\n var self = this;\n return Object.keys(this.threads.jobs)\n .map(function(id) { return self.threads.jobs[id]; })\n .filter(function(job) { return job.chatId === chatId; })\n .sort(function(a, b) { return b.createdAt - a.createdAt; });\n },\n \n // Get the latest job for a chat\n getLatestJobForChat: function(chatId) {\n var jobs = this.getJobsForChat(chatId);\n return jobs.length > 0 ? jobs[0] : null;\n },\n \n // Update job status\n updateJobStatus: function(jobId, status, data) {\n var job = this.threads.jobs[jobId];\n if (!job) {\n console.warn('[Threads] Job not found:', jobId);\n return null;\n }\n \n var previousStatus = job.status;\n job.status = status;\n job.updatedAt = Date.now();\n \n // Handle status-specific updates\n if (status === JobStatus.RUNNING || status === JobStatus.STREAMING) {\n job.startedAt = job.startedAt || Date.now();\n this.threads.stats.activeJobs++;\n } else if (status === JobStatus.COMPLETED) {\n job.completedAt = Date.now();\n job.result = data && data.result;\n \n // Store parsed message data if result exists\n if (job.result) {\n job.parsed = parseMessage(job.result);\n }\n \n this.threads.stats.completedJobs++;\n if (previousStatus === JobStatus.RUNNING || previousStatus === JobStatus.STREAMING) {\n this.threads.stats.activeJobs = Math.max(0, this.threads.stats.activeJobs - 1);\n }\n } else if (status === JobStatus.ERROR) {\n job.completedAt = Date.now();\n job.error = data && data.error;\n this.threads.stats.failedJobs++;\n if (previousStatus === JobStatus.RUNNING || previousStatus === JobStatus.STREAMING) {\n this.threads.stats.activeJobs = Math.max(0, this.threads.stats.activeJobs - 1);\n }\n } else if (status === JobStatus.BLOCKED) {\n job.blocker = data && data.blocker;\n this.threads.stats.blockedJobs++;\n if (previousStatus === JobStatus.RUNNING || previousStatus === JobStatus.STREAMING) {\n this.threads.stats.activeJobs = Math.max(0, this.threads.stats.activeJobs - 1);\n }\n } else if (status === JobStatus.CANCELLED) {\n job.completedAt = Date.now();\n if (previousStatus === JobStatus.RUNNING || previousStatus === JobStatus.STREAMING) {\n this.threads.stats.activeJobs = Math.max(0, this.threads.stats.activeJobs - 1);\n }\n }\n \n // Merge any additional data\n if (data) {\n if (data.progress !== undefined) job.progress = data.progress;\n if (data.metadata) Object.assign(job.metadata, data.metadata);\n }\n \n this.updateThreadsStats();\n this.saveOrchestratorState();\n \n // Emit appropriate event\n var eventMap = {};\n eventMap[JobStatus.RUNNING] = OrchestratorEvent.JOB_STARTED;\n eventMap[JobStatus.STREAMING] = OrchestratorEvent.JOB_STREAMING;\n eventMap[JobStatus.COMPLETED] = OrchestratorEvent.JOB_COMPLETED;\n eventMap[JobStatus.ERROR] = OrchestratorEvent.JOB_FAILED;\n eventMap[JobStatus.BLOCKED] = OrchestratorEvent.JOB_BLOCKED;\n eventMap[JobStatus.CANCELLED] = OrchestratorEvent.JOB_CANCELLED;\n eventMap[JobStatus.PAUSED] = OrchestratorEvent.JOB_PAUSED;\n \n var eventType = eventMap[status];\n if (eventType) {\n this.emitThreadEvent(eventType, job);\n }\n \n console.log('[Threads] Job', jobId, 'status:', previousStatus, '->', status);\n \n // Log full job object when completed\n if (status === JobStatus.COMPLETED) {\n console.log('[Threads] Job completed, full state:', job);\n }\n \n return job;\n },\n \n // Update job progress (for streaming)\n updateJobProgress: function(jobId, progress, content) {\n var job = this.threads.jobs[jobId];\n if (!job) return;\n \n job.progress = progress;\n job.updatedAt = Date.now();\n if (content !== undefined) {\n job.metadata.streamedContent = content;\n }\n \n this.emitThreadEvent(OrchestratorEvent.JOB_PROGRESS, {\n job: job,\n progress: progress,\n content: content\n });\n },\n \n // ==========================================================================\n // JOB CONTROLS\n // ==========================================================================\n \n // Start a pending job\n startJob: function(jobId) {\n var job = this.threads.jobs[jobId];\n if (!job) {\n console.warn('[Threads] Cannot start: job not found:', jobId);\n return false;\n }\n \n if (job.status !== JobStatus.PENDING && job.status !== JobStatus.PAUSED) {\n console.warn('[Threads] Cannot start job in status:', job.status);\n return false;\n }\n \n // Check for blockers\n var blocker = this.checkJobBlockers(jobId);\n if (blocker) {\n this.updateJobStatus(jobId, JobStatus.BLOCKED, { blocker: blocker });\n return false;\n }\n \n // Check dependencies\n if (!this.checkDependencies(jobId)) {\n console.log('[Threads] Job has unmet dependencies:', jobId);\n return false;\n }\n \n this.updateJobStatus(jobId, JobStatus.RUNNING);\n return true;\n },\n \n // Cancel a job\n cancelJob: function(jobId) {\n var job = this.threads.jobs[jobId];\n if (!job) return false;\n \n if (job.status === JobStatus.COMPLETED || job.status === JobStatus.CANCELLED) {\n console.warn('[Threads] Cannot cancel job in status:', job.status);\n return false;\n }\n \n this.updateJobStatus(jobId, JobStatus.CANCELLED);\n \n // If there's a backend job, cancel it too\n if (job.metadata.backendJobId && this.jobs && this.jobs.cancelJob) {\n this.jobs.cancelJob(job.metadata.backendJobId);\n }\n \n return true;\n },\n \n // Pause a running job\n pauseJob: function(jobId) {\n var job = this.threads.jobs[jobId];\n if (!job) return false;\n \n if (job.status !== JobStatus.RUNNING && job.status !== JobStatus.STREAMING) {\n console.warn('[Threads] Cannot pause job in status:', job.status);\n return false;\n }\n \n this.updateJobStatus(jobId, JobStatus.PAUSED);\n return true;\n },\n \n // Resume a paused job\n resumeJob: function(jobId) {\n var job = this.threads.jobs[jobId];\n if (!job) return false;\n \n if (job.status !== JobStatus.PAUSED && job.status !== JobStatus.BLOCKED) {\n console.warn('[Threads] Cannot resume job in status:', job.status);\n return false;\n }\n \n // Check if blockers are resolved\n var blocker = this.checkJobBlockers(jobId);\n if (blocker) {\n console.log('[Threads] Job still blocked:', blocker.type);\n return false;\n }\n \n this.updateJobStatus(jobId, JobStatus.PENDING);\n return this.startJob(jobId);\n },\n \n // Retry a failed job\n retryJob: function(jobId) {\n var job = this.threads.jobs[jobId];\n if (!job) return false;\n \n if (job.status !== JobStatus.ERROR && job.status !== JobStatus.BLOCKED) {\n console.warn('[Threads] Cannot retry job in status:', job.status);\n return false;\n }\n \n if (job.retryCount >= job.maxRetries) {\n console.warn('[Threads] Max retries exceeded for job:', jobId);\n return false;\n }\n \n job.retryCount++;\n job.error = null;\n job.blocker = null;\n \n this.updateJobStatus(jobId, JobStatus.PENDING);\n \n this.emitThreadEvent(OrchestratorEvent.JOB_RESUMED, job);\n \n return this.startJob(jobId);\n },\n \n // ==========================================================================\n // BLOCKER MANAGEMENT\n // ==========================================================================\n \n // Check if a job has any blockers\n checkJobBlockers: function(jobId) {\n var job = this.threads.jobs[jobId];\n if (!job) return null;\n \n var provider = job.input && job.input.provider;\n if (!provider) {\n // Try to determine provider from model\n var model = job.input && job.input.model;\n if (model) {\n if (model.includes('/')) {\n provider = model.split('/')[0];\n } else if (model.startsWith('gpt') || model.startsWith('o1') || model.startsWith('o3') || model.startsWith('o4')) {\n provider = 'openai';\n } else if (model.startsWith('claude')) {\n provider = 'anthropic';\n } else {\n provider = 'groq';\n }\n }\n }\n \n // Skip API key check if:\n // 1. Provider is custom (may not need API key) - includes custom, custom2, custom3, etc.\n // 2. API key is provided in job input (passed directly to backend)\n // 3. Base URL is provided (custom endpoint may not need API key)\n if ((provider && provider.startsWith('custom')) || job.input.apiKey || job.input.baseUrl) {\n // Let the backend handle authentication - it will return proper error if needed\n return null;\n }\n \n // Check API key for standard providers (groq, openai, anthropic)\n if (provider && this.apiKeys) {\n var apiKey = this.apiKeys[provider];\n if (!apiKey || apiKey.trim().length === 0) {\n return {\n id: 'blocker-' + Date.now(),\n type: BlockerType.API_KEY_MISSING,\n provider: provider,\n message: provider.charAt(0).toUpperCase() + provider.slice(1) + ' API key is missing',\n createdAt: Date.now()\n };\n }\n }\n \n return null;\n },\n \n // Add a global blocker\n addBlocker: function(type, data) {\n var blockerId = 'blocker-' + Date.now();\n var blocker = {\n id: blockerId,\n type: type,\n data: data,\n createdAt: Date.now(),\n resolvedAt: null\n };\n \n this.threads.blockers[blockerId] = blocker;\n this.saveOrchestratorState();\n this.emitThreadEvent(OrchestratorEvent.BLOCKER_ADDED, blocker);\n \n return blocker;\n },\n \n // Resolve a blocker\n resolveBlocker: function(blockerId) {\n var blocker = this.threads.blockers[blockerId];\n if (!blocker) return false;\n \n blocker.resolvedAt = Date.now();\n delete this.threads.blockers[blockerId];\n \n this.saveOrchestratorState();\n this.emitThreadEvent(OrchestratorEvent.BLOCKER_RESOLVED, blocker);\n \n // Check if any blocked jobs can now proceed\n this.checkBlockedJobs();\n \n return true;\n },\n \n // Check all blocked jobs to see if they can proceed\n checkBlockedJobs: function() {\n var self = this;\n var unblockedCount = 0;\n \n Object.keys(this.threads.jobs).forEach(function(jobId) {\n var job = self.threads.jobs[jobId];\n if (job.status === JobStatus.BLOCKED) {\n var blocker = self.checkJobBlockers(jobId);\n if (!blocker) {\n // Blocker resolved!\n self.updateJobStatus(jobId, JobStatus.PENDING);\n self.emitThreadEvent(OrchestratorEvent.JOB_UNBLOCKED, job);\n unblockedCount++;\n }\n }\n });\n \n if (unblockedCount > 0) {\n console.log('[Threads] Unblocked', unblockedCount, 'jobs');\n }\n \n return unblockedCount;\n },\n \n // Check dependencies for a job\n checkDependencies: function(jobId) {\n var deps = this.threads.dependencies[jobId];\n if (!deps || deps.length === 0) return true;\n \n var self = this;\n return deps.every(function(depId) {\n var depJob = self.threads.jobs[depId];\n return depJob && depJob.status === JobStatus.COMPLETED;\n });\n },\n \n // ==========================================================================\n // EVENT SYSTEM\n // ==========================================================================\n \n // Subscribe to orchestrator events\n onThreadEvent: function(eventType, callback) {\n if (!this.threads.listeners[eventType]) {\n this.threads.listeners[eventType] = [];\n }\n this.threads.listeners[eventType].push(callback);\n \n // Return unsubscribe function\n var self = this;\n return function() {\n var idx = self.orchestrator.listeners[eventType].indexOf(callback);\n if (idx !== -1) {\n self.orchestrator.listeners[eventType].splice(idx, 1);\n }\n };\n },\n \n // Emit an orchestrator event\n emitThreadEvent: function(eventType, data) {\n var listeners = this.threads.listeners[eventType] || [];\n listeners.forEach(function(callback) {\n try {\n callback(data);\n } catch (e) {\n console.error('[Threads] Event handler error:', e);\n }\n });\n \n // Also emit a generic state changed event\n if (eventType !== OrchestratorEvent.STATE_CHANGED) {\n var stateListeners = this.threads.listeners[OrchestratorEvent.STATE_CHANGED] || [];\n stateListeners.forEach(function(callback) {\n try {\n callback({ event: eventType, data: data });\n } catch (e) {\n console.error('[Threads] State change handler error:', e);\n }\n });\n }\n },\n \n // ==========================================================================\n // STATS & QUERIES\n // ==========================================================================\n \n updateThreadsStats: function() {\n var self = this;\n var stats = {\n totalJobs: 0,\n completedJobs: 0,\n failedJobs: 0,\n blockedJobs: 0,\n activeJobs: 0,\n pendingJobs: 0,\n cancelledJobs: 0\n };\n \n Object.keys(this.threads.jobs).forEach(function(jobId) {\n var job = self.threads.jobs[jobId];\n stats.totalJobs++;\n \n if (job.status === JobStatus.COMPLETED) stats.completedJobs++;\n else if (job.status === JobStatus.ERROR) stats.failedJobs++;\n else if (job.status === JobStatus.BLOCKED) stats.blockedJobs++;\n else if (job.status === JobStatus.RUNNING || job.status === JobStatus.STREAMING) stats.activeJobs++;\n else if (job.status === JobStatus.PENDING || job.status === JobStatus.PAUSED) stats.pendingJobs++;\n else if (job.status === JobStatus.CANCELLED) stats.cancelledJobs++;\n });\n \n this.threads.stats = stats;\n },\n \n getThreadsStats: function() {\n return this.threads.stats;\n },\n \n // Get jobs by status\n getJobsByStatus: function(status) {\n var self = this;\n return Object.keys(this.threads.jobs)\n .map(function(id) { return self.threads.jobs[id]; })\n .filter(function(job) { return job.status === status; });\n },\n \n // Get all active jobs\n getActiveJobs: function() {\n var running = this.getJobsByStatus(JobStatus.RUNNING);\n var streaming = this.getJobsByStatus(JobStatus.STREAMING);\n return running.concat(streaming);\n },\n \n // Get all blocked jobs\n getBlockedJobs: function() {\n return this.getJobsByStatus(JobStatus.BLOCKED);\n },\n \n // Clean up old completed jobs (keep last N)\n cleanupOldJobs: function(keepCount) {\n keepCount = keepCount || 100;\n var self = this;\n \n var jobs = Object.keys(this.threads.jobs)\n .map(function(id) { return self.threads.jobs[id]; })\n .filter(function(job) {\n return job.status === JobStatus.COMPLETED || \n job.status === JobStatus.CANCELLED;\n })\n .sort(function(a, b) { return b.completedAt - a.completedAt; });\n \n if (jobs.length > keepCount) {\n var toRemove = jobs.slice(keepCount);\n toRemove.forEach(function(job) {\n delete self.threads.jobs[job.id];\n });\n this.saveOrchestratorState();\n console.log('[Threads] Cleaned up', toRemove.length, 'old jobs');\n }\n },\n \n // Clear all thread state (for debugging)\n clearThreadsState: function() {\n this.threads.jobs = {};\n this.threads.blockers = {};\n this.threads.dependencies = {};\n this.threads.stats = {\n totalJobs: 0,\n completedJobs: 0,\n failedJobs: 0,\n blockedJobs: 0,\n activeJobs: 0,\n pendingJobs: 0,\n cancelledJobs: 0\n };\n localStorage.removeItem(THREADS_KEY);\n localStorage.removeItem('chatapp-orchestrator'); // Clean up old key\n console.log('[Threads] State cleared');\n },\n \n // ==========================================================================\n // MESSAGE PARSING (exposed as methods)\n // ==========================================================================\n \n // Parse a single message to extract reasoning/thinking\n parseMessage: parseMessage,\n \n // Parse all messages\n parseMessages: parseMessages,\n \n // Get display content (clean, without think tags)\n getDisplayContent: getDisplayContent,\n \n // Get thinking/reasoning from a message\n getThinking: getThinking\n };\n}\n\n// Backwards compatibility export\nexport var createOrchestratorMixin = createThreadsMixin;\n\n",[],[480,1277,1269],"app","3b6a65e0-ef19-11f0-af6a-42dde27851f2","templates.js","3b6a6694-ef19-11f0-af6a-42dde27851f2",137,["D",1768155209825],"/**\n * Chat App Templates - Template management (mirrors chats.js structure)\n * Templates store reusable system prompts, model configurations, and parameters\n */\n\nimport { createTemplate, DEFAULT_TEMPLATE_PARAMS } from './state.js';\n\nexport function createTemplatesMethods() {\n return {\n // =========================================================================\n // Template Folder Methods (mirrors folder.js)\n // =========================================================================\n \n // Get root-level template folders\n getRootTemplateFolders() {\n return this.templateFolders\n .filter(function(f) { return f.parentId === null; })\n .sort(function(a, b) { return a.order - b.order; });\n },\n \n // Get child template folders\n getChildTemplateFolders(parentId) {\n return this.templateFolders\n .filter(function(f) { return f.parentId === parentId; })\n .sort(function(a, b) { return a.order - b.order; });\n },\n \n // Get templates in a folder\n getTemplatesInFolder(folderId) {\n return this.templates\n .filter(function(t) { return t.folderId === folderId; })\n .sort(function(a, b) { return a.order - b.order; });\n },\n \n // Get root templates (not in any folder)\n getRootTemplates() {\n return this.templates\n .filter(function(t) { return t.folderId === null; })\n .sort(function(a, b) { return a.order - b.order; });\n },\n \n // Toggle template folder collapsed state\n toggleTemplateFolderCollapsed(folderId) {\n var folder = this.templateFolders.find(function(f) { return f.id === folderId; });\n if (folder) {\n folder.collapsed = !folder.collapsed;\n this.saveToStorage();\n }\n },\n \n // Create a new template folder\n createTemplateFolder(parentId) {\n var newFolder = {\n id: this.nextTemplateFolderId++,\n name: 'New Folder',\n parentId: parentId || null,\n collapsed: false,\n order: this.templateFolders.length\n };\n this.templateFolders.push(newFolder);\n this.templatesVersion++;\n this.saveToStorage();\n \n // Start editing the folder name\n this.$nextTick(function() {\n this.startEditingTemplateFolder(newFolder.id, newFolder.name);\n }.bind(this));\n \n return newFolder;\n },\n \n // Delete a template folder\n deleteTemplateFolder(folderId) {\n // Move templates in this folder to root\n this.templates.forEach(function(t) {\n if (t.folderId === folderId) {\n t.folderId = null;\n }\n });\n \n // Move child folders to root\n this.templateFolders.forEach(function(f) {\n if (f.parentId === folderId) {\n f.parentId = null;\n }\n });\n \n // Remove the folder\n this.templateFolders = this.templateFolders.filter(function(f) { return f.id !== folderId; });\n this.templateFolderMenuOpen = null;\n this.templatesVersion++;\n this.saveToStorage();\n },\n \n // Can nest folder check (prevent deep nesting)\n canNestTemplateIn(folderId) {\n var folder = this.templateFolders.find(function(f) { return f.id === folderId; });\n return folder && folder.parentId === null; // Only allow one level of nesting\n },\n \n // =========================================================================\n // Template Editing Methods\n // =========================================================================\n \n startEditingTemplateFolder(folderId, currentName) {\n this.editingTemplateFolderId = folderId;\n this.editingTemplateFolderName = currentName;\n this.$nextTick(function() {\n var input = document.querySelector('[data-template-folder-edit=\"' + folderId + '\"]');\n if (input) {\n input.focus();\n input.select();\n }\n });\n },\n \n commitEditingTemplateFolder() {\n if (this.editingTemplateFolderId && this.editingTemplateFolderName.trim()) {\n var folder = this.templateFolders.find(function(f) { return f.id === this.editingTemplateFolderId; }.bind(this));\n if (folder) {\n folder.name = this.editingTemplateFolderName.trim();\n this.saveToStorage();\n }\n }\n this.cancelEditingTemplateFolder();\n },\n \n cancelEditingTemplateFolder() {\n this.editingTemplateFolderId = null;\n this.editingTemplateFolderName = '';\n },\n \n startEditingTemplate(templateId, currentName) {\n this.editingTemplateId = templateId;\n this.editingTemplateName = currentName;\n this.$nextTick(function() {\n var input = document.querySelector('[data-template-edit=\"' + templateId + '\"]');\n if (input) {\n input.focus();\n input.select();\n }\n });\n },\n \n commitEditingTemplate() {\n if (this.editingTemplateId && this.editingTemplateName.trim()) {\n var template = this.templates.find(function(t) { return t.id === this.editingTemplateId; }.bind(this));\n if (template) {\n template.name = this.editingTemplateName.trim();\n template.updatedAt = new Date().toISOString();\n this.saveToStorage();\n }\n }\n this.cancelEditingTemplate();\n },\n \n cancelEditingTemplate() {\n this.editingTemplateId = null;\n this.editingTemplateName = '';\n },\n \n // =========================================================================\n // Template CRUD Methods\n // =========================================================================\n \n // Create a new template\n createNewTemplate(folderId) {\n var template = createTemplate('New Template');\n template.id = this.nextTemplateId++;\n template.folderId = folderId || null;\n template.order = this.templates.length;\n \n this.templates.push(template);\n this.activeTemplateId = template.id;\n this.loadCurrentTemplateSettings();\n this.templatesVersion++;\n this.saveToStorage();\n \n // Start editing the name in sidebar\n this.$nextTick(function() {\n this.startEditingTemplate(template.id, template.name);\n }.bind(this));\n \n return template;\n },\n \n // Select a template\n selectTemplate(templateId) {\n this.activeTemplateId = templateId;\n this.loadCurrentTemplateSettings();\n // Template settings are shown in main content area, not right sidebar\n },\n \n // Delete a template\n deleteTemplate(templateId) {\n this.templates = this.templates.filter(function(t) { return t.id !== templateId; });\n \n if (this.activeTemplateId === templateId) {\n this.activeTemplateId = null;\n this.rightSidebarOpen = false;\n }\n \n this.templateMenuOpen = null;\n this.templatesVersion++;\n this.saveToStorage();\n },\n \n // Duplicate a template\n duplicateTemplate(templateId) {\n var original = this.templates.find(function(t) { return t.id === templateId; });\n if (!original) return null;\n \n var template = createTemplate(original.name + ' (Copy)');\n template.id = this.nextTemplateId++;\n template.folderId = original.folderId;\n template.order = this.templates.length;\n template.systemPrompt = original.systemPrompt;\n template.defaultModel = original.defaultModel;\n template.parameters = { ...original.parameters };\n \n this.templates.push(template);\n this.activeTemplateId = template.id;\n this.loadCurrentTemplateSettings();\n this.templatesVersion++;\n this.saveToStorage();\n \n return template;\n },\n \n // Get current template name\n getCurrentTemplateName() {\n if (!this.activeTemplateId) return '';\n var template = this.templates.find(function(t) { return t.id === this.activeTemplateId; }.bind(this));\n return template ? template.name : '';\n },\n \n // =========================================================================\n // Template Settings Methods\n // =========================================================================\n \n // Load settings for the current active template\n loadCurrentTemplateSettings() {\n if (!this.activeTemplateId) {\n this.currentTemplateSettings = {\n name: '',\n systemPrompt: '',\n defaultModel: null,\n temperature: DEFAULT_TEMPLATE_PARAMS.temperature,\n maxTokens: DEFAULT_TEMPLATE_PARAMS.maxTokens,\n topP: DEFAULT_TEMPLATE_PARAMS.topP,\n frequencyPenalty: DEFAULT_TEMPLATE_PARAMS.frequencyPenalty,\n presencePenalty: DEFAULT_TEMPLATE_PARAMS.presencePenalty,\n reasoningEffort: DEFAULT_TEMPLATE_PARAMS.reasoningEffort,\n webSearch: DEFAULT_TEMPLATE_PARAMS.webSearch,\n codeExecution: DEFAULT_TEMPLATE_PARAMS.codeExecution,\n imageDetail: DEFAULT_TEMPLATE_PARAMS.imageDetail,\n modelVersion: DEFAULT_TEMPLATE_PARAMS.modelVersion\n };\n return;\n }\n \n var template = this.templates.find(function(t) { return t.id === this.activeTemplateId; }.bind(this));\n if (!template) return;\n \n var params = template.parameters || {};\n \n this.currentTemplateSettings = {\n name: template.name || '',\n systemPrompt: template.systemPrompt || '',\n defaultModel: template.defaultModel || null,\n temperature: params.temperature ?? DEFAULT_TEMPLATE_PARAMS.temperature,\n maxTokens: params.maxTokens ?? DEFAULT_TEMPLATE_PARAMS.maxTokens,\n topP: params.topP ?? DEFAULT_TEMPLATE_PARAMS.topP,\n frequencyPenalty: params.frequencyPenalty ?? DEFAULT_TEMPLATE_PARAMS.frequencyPenalty,\n presencePenalty: params.presencePenalty ?? DEFAULT_TEMPLATE_PARAMS.presencePenalty,\n reasoningEffort: params.reasoningEffort ?? DEFAULT_TEMPLATE_PARAMS.reasoningEffort,\n webSearch: params.webSearch ?? DEFAULT_TEMPLATE_PARAMS.webSearch,\n codeExecution: params.codeExecution ?? DEFAULT_TEMPLATE_PARAMS.codeExecution,\n imageDetail: params.imageDetail ?? DEFAULT_TEMPLATE_PARAMS.imageDetail,\n modelVersion: params.modelVersion ?? DEFAULT_TEMPLATE_PARAMS.modelVersion\n };\n },\n \n // Save current template settings\n saveTemplateSettings() {\n if (!this.activeTemplateId) return;\n \n var template = this.templates.find(function(t) { return t.id === this.activeTemplateId; }.bind(this));\n if (!template) return;\n \n template.name = this.currentTemplateSettings.name || template.name;\n template.systemPrompt = this.currentTemplateSettings.systemPrompt;\n template.defaultModel = this.currentTemplateSettings.defaultModel;\n template.parameters = {\n temperature: this.currentTemplateSettings.temperature,\n maxTokens: this.currentTemplateSettings.maxTokens,\n topP: this.currentTemplateSettings.topP,\n frequencyPenalty: this.currentTemplateSettings.frequencyPenalty,\n presencePenalty: this.currentTemplateSettings.presencePenalty,\n reasoningEffort: this.currentTemplateSettings.reasoningEffort,\n webSearch: this.currentTemplateSettings.webSearch,\n codeExecution: this.currentTemplateSettings.codeExecution,\n imageDetail: this.currentTemplateSettings.imageDetail,\n modelVersion: this.currentTemplateSettings.modelVersion\n };\n template.updatedAt = new Date().toISOString();\n \n this.templatesVersion++;\n this.saveToStorage();\n console.log('[Templates] Saved settings for template:', this.activeTemplateId);\n return true; // Return success for toast handling\n },\n \n // Update a single template setting (debounced save - silent, no toast)\n updateTemplateSetting(key, value) {\n this.currentTemplateSettings[key] = value;\n \n // Debounce the save (silent - no toast for auto-save)\n if (this._templateSettingsSaveTimeout) {\n clearTimeout(this._templateSettingsSaveTimeout);\n }\n this._templateSettingsSaveTimeout = setTimeout(function() {\n this.saveTemplateSettings(); // Silent auto-save\n }.bind(this), 500);\n },\n \n // Save template settings with toast notification (for manual save button)\n saveTemplateSettingsWithToast() {\n const saved = this.saveTemplateSettings();\n if (saved && window.toast) {\n window.toast('Template saved!', { type: 'success' });\n }\n },\n \n // Reset template settings to defaults\n resetTemplateSettings() {\n this.currentTemplateSettings = {\n name: this.currentTemplateSettings.name, // Keep the name\n systemPrompt: '',\n defaultModel: null,\n temperature: DEFAULT_TEMPLATE_PARAMS.temperature,\n maxTokens: DEFAULT_TEMPLATE_PARAMS.maxTokens,\n topP: DEFAULT_TEMPLATE_PARAMS.topP,\n frequencyPenalty: DEFAULT_TEMPLATE_PARAMS.frequencyPenalty,\n presencePenalty: DEFAULT_TEMPLATE_PARAMS.presencePenalty,\n reasoningEffort: DEFAULT_TEMPLATE_PARAMS.reasoningEffort,\n webSearch: DEFAULT_TEMPLATE_PARAMS.webSearch,\n codeExecution: DEFAULT_TEMPLATE_PARAMS.codeExecution,\n imageDetail: DEFAULT_TEMPLATE_PARAMS.imageDetail,\n modelVersion: DEFAULT_TEMPLATE_PARAMS.modelVersion\n };\n \n this.saveTemplateSettings();\n \n if (window.toast) {\n window.toast('Template reset to defaults', { type: 'info' });\n }\n },\n \n // =========================================================================\n // Apply Template to Chat\n // =========================================================================\n \n // Apply a template's settings to the current chat\n applyTemplateToChat(templateId) {\n var template = this.templates.find(function(t) { return t.id === templateId; });\n if (!template || !this.activeChatId) return;\n \n // Copy template settings to current chat settings\n this.currentChatSettings.systemPrompt = template.systemPrompt || '';\n this.currentChatSettings.temperature = template.parameters?.temperature ?? this.currentChatSettings.temperature;\n this.currentChatSettings.maxTokens = template.parameters?.maxTokens ?? this.currentChatSettings.maxTokens;\n this.currentChatSettings.topP = template.parameters?.topP ?? this.currentChatSettings.topP;\n this.currentChatSettings.frequencyPenalty = template.parameters?.frequencyPenalty ?? this.currentChatSettings.frequencyPenalty;\n this.currentChatSettings.presencePenalty = template.parameters?.presencePenalty ?? this.currentChatSettings.presencePenalty;\n this.currentChatSettings.reasoningEffort = template.parameters?.reasoningEffort ?? this.currentChatSettings.reasoningEffort;\n this.currentChatSettings.webSearch = template.parameters?.webSearch ?? this.currentChatSettings.webSearch;\n this.currentChatSettings.codeExecution = template.parameters?.codeExecution ?? this.currentChatSettings.codeExecution;\n this.currentChatSettings.imageDetail = template.parameters?.imageDetail ?? this.currentChatSettings.imageDetail;\n this.currentChatSettings.modelVersion = template.parameters?.modelVersion ?? this.currentChatSettings.modelVersion;\n \n // Apply default model if set\n if (template.defaultModel) {\n var model = this.models.find(function(m) { return m.id === template.defaultModel; });\n if (model) {\n this.selectedModel = model;\n }\n }\n \n this.saveChatSettings();\n console.log('[Templates] Applied template to chat:', template.name);\n },\n \n // =========================================================================\n // Template Drag & Drop (simplified - mirrors dragdrop.js)\n // =========================================================================\n \n // Touch drag state for templates\n templateTouchDragActive: false,\n templateTouchDragElement: null,\n templateTouchDragGhost: null,\n templateTouchStartY: 0,\n templateTouchStartX: 0,\n _pendingTemplateTouchDrag: null,\n templateTouchScrollTimeout: null,\n _templateTouchMoved: false,\n _templateLongPressTriggered: false,\n TEMPLATE_LONG_PRESS_DELAY: 500,\n \n // Touch event handlers for templates\n onTemplateTouchStart(e, type, id) {\n // Always allow inputs to handle their own events\n var target = e.target;\n if (target.tagName === 'INPUT' || target.closest('input')) {\n return;\n }\n \n var touch = e.touches[0];\n this.templateTouchStartX = touch.clientX;\n this.templateTouchStartY = touch.clientY;\n this._pendingTemplateTouchDrag = { type: type, id: id, element: e.currentTarget };\n this._templateTouchMoved = false;\n this._templateLongPressTriggered = false;\n \n var self = this;\n this.templateTouchScrollTimeout = setTimeout(function() {\n if (self._pendingTemplateTouchDrag && !self._templateTouchMoved) {\n self._templateLongPressTriggered = true;\n self.initTemplateTouchDrag(e, type, id);\n if (navigator.vibrate) navigator.vibrate(50);\n }\n }, this.TEMPLATE_LONG_PRESS_DELAY);\n },\n \n initTemplateTouchDrag(e, type, id) {\n if (this.templateTouchDragActive) return;\n \n var touch = e.touches[0];\n this.templateTouchDragElement = e.currentTarget;\n \n if (type === 'template') {\n this.draggingTemplateId = id;\n this.draggingTemplateFolderId = null;\n } else {\n this.draggingTemplateFolderId = id;\n this.draggingTemplateId = null;\n }\n \n this.templateTouchDragActive = true;\n this.createTemplateTouchGhost(e.currentTarget, touch);\n e.currentTarget.classList.add('is-dragging');\n },\n \n createTemplateTouchGhost(element, touch) {\n var ghost = element.cloneNode(true);\n ghost.classList.add('touch-drag-ghost');\n ghost.style.cssText = 'position: fixed; pointer-events: none; z-index: 9999; opacity: 0.8; transform: scale(1.02); box-shadow: 0 8px 25px rgba(0,0,0,0.15); background: var(--color-bg-primary, #fff); border-radius: 0.25rem; width: ' + element.offsetWidth + 'px;';\n ghost.style.left = (touch.clientX - element.offsetWidth / 2) + 'px';\n ghost.style.top = (touch.clientY - 20) + 'px';\n document.body.appendChild(ghost);\n this.templateTouchDragGhost = ghost;\n },\n \n updateTemplateTouchGhost(touch) {\n if (this.templateTouchDragGhost) {\n this.templateTouchDragGhost.style.left = (touch.clientX - this.templateTouchDragGhost.offsetWidth / 2) + 'px';\n this.templateTouchDragGhost.style.top = (touch.clientY - 20) + 'px';\n }\n },\n \n removeTemplateTouchGhost() {\n if (this.templateTouchDragGhost && this.templateTouchDragGhost.parentNode) {\n this.templateTouchDragGhost.parentNode.removeChild(this.templateTouchDragGhost);\n }\n this.templateTouchDragGhost = null;\n },\n \n onTemplateTouchMove(e) {\n if (!this.templateTouchDragActive && this._pendingTemplateTouchDrag) {\n var touch = e.touches[0];\n var deltaX = Math.abs(touch.clientX - this.templateTouchStartX);\n var deltaY = Math.abs(touch.clientY - this.templateTouchStartY);\n \n // Any significant movement cancels the long-press drag initiation\n if (deltaX > 5 || deltaY > 5) {\n this._templateTouchMoved = true;\n this.cancelPendingTemplateTouchDrag();\n // Allow default scroll behavior\n return;\n }\n return;\n }\n \n if (!this.templateTouchDragActive) return;\n \n e.preventDefault();\n var touch = e.touches[0];\n this.updateTemplateTouchGhost(touch);\n \n // Find element under touch point\n if (this.templateTouchDragGhost) {\n this.templateTouchDragGhost.style.display = 'none';\n }\n var elementBelow = document.elementFromPoint(touch.clientX, touch.clientY);\n if (this.templateTouchDragGhost) {\n this.templateTouchDragGhost.style.display = '';\n }\n \n if (elementBelow) {\n var dropTarget = elementBelow.closest('.chat-item-drag-wrapper, .chat-folder-row, .chat-folder-root');\n \n if (dropTarget) {\n if (dropTarget.classList.contains('chat-folder-root')) {\n this.dragOverTemplateRoot = true;\n this.dragOverTemplateFolderId = null;\n } else if (dropTarget.classList.contains('chat-folder-row')) {\n var folderId = parseInt(dropTarget.dataset?.id || dropTarget.closest('[data-id]')?.dataset?.id);\n if (!isNaN(folderId)) {\n this.dragOverTemplateFolderId = folderId;\n this.dragOverTemplateRoot = false;\n }\n }\n } else {\n this.dragOverTemplateFolderId = null;\n }\n }\n },\n \n onTemplateTouchEnd(e) {\n var wasDragging = this.templateTouchDragActive;\n var longPressTriggered = this._templateLongPressTriggered;\n \n this.cancelPendingTemplateTouchDrag();\n this._templateLongPressTriggered = false;\n \n // If we weren't dragging and long-press wasn't triggered, this was a quick tap\n if (!wasDragging && !longPressTriggered) {\n // Find the clickable element (button) and trigger click\n var target = e.target;\n var button = target.closest('button.chat-item-btn, button.chat-folder-label');\n if (button) {\n setTimeout(function() { button.click(); }, 0);\n }\n return;\n }\n \n // Perform the drop\n if (this.dragOverTemplateFolderId !== null && this.draggingTemplateId) {\n var template = this.templates.find(function(t) { return t.id === this.draggingTemplateId; }.bind(this));\n if (template) {\n template.folderId = this.dragOverTemplateFolderId;\n this.templatesVersion++;\n this.saveToStorage();\n }\n } else if (this.dragOverTemplateRoot && this.draggingTemplateId) {\n var template = this.templates.find(function(t) { return t.id === this.draggingTemplateId; }.bind(this));\n if (template) {\n template.folderId = null;\n this.templatesVersion++;\n this.saveToStorage();\n }\n } else if (this.dragOverTemplateFolderRoot && this.draggingTemplateFolderId) {\n var folder = this.templateFolders.find(function(f) { return f.id === this.draggingTemplateFolderId; }.bind(this));\n if (folder) {\n folder.parentId = null;\n this.templatesVersion++;\n this.saveToStorage();\n }\n }\n \n // Clean up\n if (this.templateTouchDragElement) {\n this.templateTouchDragElement.classList.remove('is-dragging');\n }\n this.removeTemplateTouchGhost();\n this.templateTouchDragActive = false;\n this.templateTouchDragElement = null;\n this.onTemplateDragEnd();\n },\n \n cancelPendingTemplateTouchDrag() {\n clearTimeout(this.templateTouchScrollTimeout);\n this._pendingTemplateTouchDrag = null;\n },\n \n onTemplateDragStart(event, templateId) {\n this.draggingTemplateId = templateId;\n event.dataTransfer.effectAllowed = 'move';\n event.dataTransfer.setData('text/plain', 'template:' + templateId);\n },\n \n onTemplateDragEnd() {\n this.draggingTemplateId = null;\n this.dragOverTemplateFolderId = null;\n this.dragOverTemplateRoot = false;\n this.templateDropIndicator = null;\n },\n \n onTemplateFolderDragStart(event, folderId) {\n this.draggingTemplateFolderId = folderId;\n event.dataTransfer.effectAllowed = 'move';\n event.dataTransfer.setData('text/plain', 'templateFolder:' + folderId);\n },\n \n onTemplateFolderDragEnd() {\n this.draggingTemplateFolderId = null;\n this.dragOverTemplateFolderId = null;\n this.templateDropIndicator = null;\n },\n \n onTemplateFolderDragOver(event, folderId) {\n event.preventDefault();\n event.dataTransfer.dropEffect = 'move';\n this.dragOverTemplateFolderId = folderId;\n },\n \n onTemplateFolderDragLeave() {\n this.dragOverTemplateFolderId = null;\n },\n \n onTemplateFolderDrop(event, folderId) {\n event.preventDefault();\n \n if (this.draggingTemplateId) {\n var template = this.templates.find(function(t) { return t.id === this.draggingTemplateId; }.bind(this));\n if (template) {\n template.folderId = folderId;\n this.templatesVersion++;\n this.saveToStorage();\n }\n }\n \n this.onTemplateDragEnd();\n },\n \n onTemplateRootDragOver(event) {\n event.preventDefault();\n event.dataTransfer.dropEffect = 'move';\n this.dragOverTemplateRoot = true;\n },\n \n onTemplateRootDragLeave() {\n this.dragOverTemplateRoot = false;\n },\n \n onTemplateRootDrop(event) {\n event.preventDefault();\n \n if (this.draggingTemplateId) {\n var template = this.templates.find(function(t) { return t.id === this.draggingTemplateId; }.bind(this));\n if (template) {\n template.folderId = null;\n this.templatesVersion++;\n this.saveToStorage();\n }\n }\n \n this.dragOverTemplateRoot = false;\n this.onTemplateDragEnd();\n },\n \n onTemplateFolderRootDragOver(event) {\n event.preventDefault();\n event.dataTransfer.dropEffect = 'move';\n this.dragOverTemplateFolderRoot = true;\n },\n \n onTemplateFolderRootDragLeave() {\n this.dragOverTemplateFolderRoot = false;\n },\n \n onTemplateFolderRootDrop(event) {\n event.preventDefault();\n \n if (this.draggingTemplateFolderId) {\n var folder = this.templateFolders.find(function(f) { return f.id === this.draggingTemplateFolderId; }.bind(this));\n if (folder) {\n folder.parentId = null;\n this.templatesVersion++;\n this.saveToStorage();\n }\n }\n \n this.dragOverTemplateFolderRoot = false;\n this.onTemplateFolderDragEnd();\n }\n };\n}\n\n",[],[480,1277,1279],"3c69b0b8-ef19-11f0-aee5-42dde27851f2","storage.js","0be9b5fa-e2e9-11f0-b39b-42dde27851f2",171,["D",1768155211503],"/**\n * Chat App Storage - LocalStorage persistence\n * \n * Unified chat structure: chats = { [chatId]: { messages: [], metadata: {...} } }\n */\n\nconst STORAGE_KEY = 'chatapp-data';\nconst API_KEYS_STORAGE_KEY = 'chatapp-api-keys'; // Separate storage for API keys\n\nimport { createChatMetadata, createChatData } from './state.js';\n\nexport function createStorageMethods() {\n return {\n // Migrate old storage format to new unified format\n migrateStorageFormat(data) {\n // Check if already in new format (chats have .messages property)\n var firstChatId = Object.keys(data.chats || {})[0];\n if (firstChatId && data.chats[firstChatId] && data.chats[firstChatId].messages !== undefined) {\n console.log('[Storage] Already in new unified format');\n return data;\n }\n \n // Old format detected - migrate\n console.log('[Storage] Migrating from old format to unified chat structure...');\n var migratedChats = {};\n var oldChats = data.chats || {};\n var oldMetadata = data.chatMetadata || {};\n \n Object.keys(oldChats).forEach(function(chatId) {\n var messages = oldChats[chatId];\n var metadata = oldMetadata[chatId] || createChatMetadata();\n migratedChats[chatId] = {\n messages: Array.isArray(messages) ? messages : [],\n metadata: metadata\n };\n });\n \n // Also migrate any metadata that exists without corresponding messages\n Object.keys(oldMetadata).forEach(function(chatId) {\n if (!migratedChats[chatId]) {\n migratedChats[chatId] = {\n messages: [],\n metadata: oldMetadata[chatId]\n };\n }\n });\n \n data.chats = migratedChats;\n delete data.chatMetadata; // Remove old format\n \n console.log('[Storage] Migration complete, migrated', Object.keys(migratedChats).length, 'chats');\n return data;\n },\n \n loadFromStorage() {\n var self = this;\n console.log('[Storage] Loading from storage...');\n \n // CRITICAL: Ensure messages is ALWAYS an array before any async operations\n // This prevents Alpine template errors during initialization\n if (!Array.isArray(self.messages)) {\n self.messages = [];\n }\n \n try {\n var stored = localStorage.getItem(STORAGE_KEY);\n if (stored) {\n var data = JSON.parse(stored);\n \n // Migrate old format if necessary\n data = self.migrateStorageFormat(data);\n \n console.log('[Storage] Parsed data, activeChatId:', data.activeChatId, 'items count:', (data.items || []).length);\n \n self.folders = Array.isArray(data.folders) ? data.folders : [];\n self.items = Array.isArray(data.items) ? data.items : [];\n self.chats = (data.chats && typeof data.chats === 'object') ? data.chats : {};\n self.nextFolderId = data.nextFolderId || 1;\n self.nextItemId = data.nextItemId || 1;\n // Store the saved active chat ID but don't set it yet\n var savedActiveChatId = data.activeChatId || null;\n \n // Load templates data\n self.templateFolders = Array.isArray(data.templateFolders) ? data.templateFolders : [];\n self.templates = Array.isArray(data.templates) ? data.templates : [];\n self.nextTemplateFolderId = data.nextTemplateFolderId || 1;\n self.nextTemplateId = data.nextTemplateId || 1;\n self.mainView = data.mainView || 'chats';\n \n // Ensure all messages in all chats have valid IDs\n Object.keys(self.chats).forEach(function(chatId) {\n var chat = self.chats[chatId];\n if (chat && chat.messages) {\n chat.messages = self.ensureMessageIds(chat.messages);\n }\n });\n \n // Defer active chat selection to after Alpine initializes\n var chatData = savedActiveChatId ? self.chats[savedActiveChatId] : null;\n if (savedActiveChatId && chatData && chatData.messages) {\n console.log('[Storage] Deferring chat selection to $nextTick');\n self.$nextTick(function() {\n console.log('[Storage] In $nextTick, setting activeChatId:', savedActiveChatId);\n var chatMessages = chatData.messages;\n console.log('[Storage] Chat messages count:', chatMessages.length);\n if (Array.isArray(chatMessages)) {\n var processedMessages = self.ensureMessageIds(JSON.parse(JSON.stringify(chatMessages)));\n // Use Alpine's array replacement to ensure reactivity\n self.messages.length = 0; // Clear array\n processedMessages.forEach(function(msg) {\n self.messages.push(msg);\n });\n self.activeChatId = savedActiveChatId;\n console.log('[Storage] Loaded', self.messages.length, 'messages');\n \n // CRITICAL: Restore chat-specific model and settings after loading\n if (self.restoreChatModel) {\n self.restoreChatModel(savedActiveChatId);\n }\n if (self.loadCurrentChatSettings) {\n self.loadCurrentChatSettings();\n }\n } else {\n // Invalid chat data, reset\n console.log('[Storage] Invalid chat data, resetting');\n self.messages.length = 0;\n self.activeChatId = null;\n }\n });\n } else {\n console.log('[Storage] No active chat, messages already initialized as empty array');\n self.activeChatId = null;\n }\n } else {\n console.log('[Storage] No stored data found, messages already initialized');\n self.activeChatId = null;\n }\n } catch (e) {\n console.warn('Failed to load chat data:', e);\n // Reset to safe state on error\n self.messages.length = 0;\n self.chats = {};\n self.folders = [];\n self.items = [];\n self.activeChatId = null;\n }\n \n // Load API keys separately\n self.loadApiKeys();\n },\n \n // Ensure all messages have valid and UNIQUE IDs (required for x-for :key)\n ensureMessageIds(messages) {\n if (!Array.isArray(messages)) return [];\n var baseTime = Date.now();\n var usedIds = new Set();\n \n return messages.filter(function(msg) {\n // Filter out completely invalid messages\n return msg && typeof msg === 'object';\n }).map(function(msg, index) {\n // Clone to avoid mutating original\n var clone = Object.assign({}, msg);\n // Ensure role exists first (default to 'user')\n if (!clone.role) clone.role = 'user';\n \n // Ensure id is a valid primitive (number or string) and UNIQUE\n var currentId = clone.id;\n if (currentId === undefined || currentId === null || typeof currentId === 'object' || usedIds.has(currentId)) {\n // Generate unique ID with role prefix to prevent collisions\n var randomPart = Math.random().toString(36).substr(2, 9);\n clone.id = clone.role + '-' + baseTime + '-' + index + '-' + randomPart;\n }\n usedIds.add(clone.id);\n // Ensure content exists\n if (clone.content === undefined) clone.content = '';\n return clone;\n });\n },\n \n saveToStorage() {\n // Check if auto-save is enabled\n if (!this.settings?.autoSave) {\n return;\n }\n \n try {\n // Save current messages to active chat (unified structure)\n if (this.activeChatId && Array.isArray(this.messages)) {\n // Ensure chat exists with proper structure\n if (!this.chats[this.activeChatId]) {\n this.chats[this.activeChatId] = createChatData();\n }\n // Update messages\n this.chats[this.activeChatId].messages = JSON.parse(JSON.stringify(this.messages));\n }\n \n const data = {\n folders: this.folders,\n items: this.items,\n chats: this.chats,\n nextFolderId: this.nextFolderId,\n nextItemId: this.nextItemId,\n activeChatId: this.activeChatId,\n // Templates data\n templateFolders: this.templateFolders,\n templates: this.templates,\n nextTemplateFolderId: this.nextTemplateFolderId,\n nextTemplateId: this.nextTemplateId,\n mainView: this.mainView,\n };\n localStorage.setItem(STORAGE_KEY, JSON.stringify(data));\n } catch (e) {\n console.warn('Failed to save chat data:', e);\n }\n },\n \n // Force save regardless of auto-save setting\n forceSave() {\n try {\n // Save current messages to active chat (unified structure)\n if (this.activeChatId && Array.isArray(this.messages)) {\n if (!this.chats[this.activeChatId]) {\n this.chats[this.activeChatId] = createChatData();\n }\n this.chats[this.activeChatId].messages = JSON.parse(JSON.stringify(this.messages));\n }\n \n const data = {\n folders: this.folders,\n items: this.items,\n chats: this.chats,\n nextFolderId: this.nextFolderId,\n nextItemId: this.nextItemId,\n activeChatId: this.activeChatId,\n // Templates data\n templateFolders: this.templateFolders,\n templates: this.templates,\n nextTemplateFolderId: this.nextTemplateFolderId,\n nextTemplateId: this.nextTemplateId,\n mainView: this.mainView,\n };\n localStorage.setItem(STORAGE_KEY, JSON.stringify(data));\n } catch (e) {\n console.warn('Failed to save chat data:', e);\n }\n },\n \n // Clear all storage data (for testing/debugging)\n clearStorage() {\n try {\n localStorage.removeItem(STORAGE_KEY);\n // Clear arrays without replacing references\n this.messages.length = 0;\n this.folders.length = 0;\n this.items.length = 0;\n this.chats = {};\n this.activeChatId = null;\n this.nextFolderId = 1;\n this.nextItemId = 1;\n // Clear templates\n this.templateFolders.length = 0;\n this.templates.length = 0;\n this.activeTemplateId = null;\n this.nextTemplateFolderId = 1;\n this.nextTemplateId = 1;\n this.mainView = 'chats';\n console.log('[Storage] Cleared all chat data');\n } catch (e) {\n console.warn('Failed to clear storage:', e);\n }\n },\n \n // Helper to get chat metadata (from unified structure)\n getChatMetadata(chatId) {\n if (!chatId || !this.chats[chatId]) {\n return null;\n }\n return this.chats[chatId].metadata || null;\n },\n \n // Helper to update chat metadata\n updateChatMetadata(chatId, updates) {\n if (!chatId) return;\n \n // Ensure chat exists\n if (!this.chats[chatId]) {\n this.chats[chatId] = createChatData();\n }\n \n // Ensure metadata exists\n if (!this.chats[chatId].metadata) {\n this.chats[chatId].metadata = createChatMetadata();\n }\n \n // Apply updates\n Object.assign(this.chats[chatId].metadata, updates);\n this.chats[chatId].metadata.updatedAt = new Date().toISOString();\n },\n \n // =========================================================================\n // API Key Management\n // =========================================================================\n \n loadApiKeys() {\n try {\n var stored = localStorage.getItem(API_KEYS_STORAGE_KEY);\n if (stored) {\n var keys = JSON.parse(stored);\n this.apiKeys = Object.assign({\n groq: '',\n openai: '',\n anthropic: ''\n }, keys);\n console.log('[Storage] Loaded API keys for providers:', Object.keys(this.apiKeys).filter(k => this.apiKeys[k]));\n }\n } catch (e) {\n console.warn('Failed to load API keys:', e);\n }\n },\n \n saveApiKeys() {\n try {\n localStorage.setItem(API_KEYS_STORAGE_KEY, JSON.stringify(this.apiKeys));\n console.log('[Storage] Saved API keys');\n } catch (e) {\n console.warn('Failed to save API keys:', e);\n }\n },\n \n updateApiKey(provider, key) {\n this.apiKeys[provider] = key;\n this.saveApiKeys();\n // Show toast notification\n if (window.toast) {\n window.toast('API key saved!', { type: 'success' });\n }\n },\n \n getApiKey(provider) {\n return this.apiKeys[provider] || '';\n },\n \n clearApiKeys() {\n this.apiKeys = {\n groq: '',\n openai: '',\n anthropic: ''\n };\n localStorage.removeItem(API_KEYS_STORAGE_KEY);\n console.log('[Storage] Cleared all API keys');\n },\n };\n}\n",[],[480,1277,1287],"3c40df8a-ef19-11f0-8520-42dde27851f2","state.js","0bb0d6ae-e2e9-11f0-8def-42dde27851f2",168,["D",1768155211216],"/**\n * Chat App State - Initial state and model definitions\n */\n\nexport const MODELS = [\n // Groq - Compound Systems\n { id: 'groq/compound', name: 'Compound', desc: 'AI system with built-in tools including web search and code execution.', logo: '/public/groq-logo-orange.png', provider: 'groq', web: true, tools: true },\n { id: 'groq/compound-mini', name: 'Compound Mini', desc: 'Faster, lighter version with web search and code execution.', logo: '/public/groq-logo-orange.png', provider: 'groq', web: true, tools: true },\n \n // Groq - OpenAI GPT-OSS Models\n { id: 'openai/gpt-oss-120b', name: 'GPT OSS 120B', desc: 'Flagship 120B parameter model with browser search and reasoning.', logo: '/public/groq-logo-orange.png', provider: 'groq', web: true, thinking: true, tools: true },\n { id: 'openai/gpt-oss-20b', name: 'GPT OSS 20B', desc: 'Fast 20B model with web search, thinking, and code execution.', logo: '/public/groq-logo-orange.png', provider: 'groq', web: true, thinking: true, tools: true },\n \n // Groq - Llama 3.x Production\n { id: 'llama-3.1-8b-instant', name: 'Llama 3.1 8B Instant', desc: 'Ultra-fast 8B model for instant responses (560 t/s).', logo: '/public/groq-logo-orange.png', provider: 'groq' },\n { id: 'llama-3.3-70b-versatile', name: 'Llama 3.3 70B Versatile', desc: 'Versatile 70B model for a wide range of tasks (280 t/s).', logo: '/public/groq-logo-orange.png', provider: 'groq' },\n \n // Groq - Llama 4 Vision Models\n { id: 'meta-llama/llama-4-maverick-17b-128e-instruct', name: 'Llama 4 Maverick 17B', desc: 'Powerful image understanding and analysis (600 t/s).', logo: '/public/groq-logo-orange.png', provider: 'groq', image: true, preview: true },\n { id: 'meta-llama/llama-4-scout-17b-16e-instruct', name: 'Llama 4 Scout 17B', desc: 'Fast responses with image support (750 t/s).', logo: '/public/groq-logo-orange.png', provider: 'groq', image: true, preview: true },\n \n // OpenAI - GPT-5.2 Series (Latest)\n { id: 'gpt-5.2', name: 'GPT-5.2', desc: 'Most advanced model for coding and agentic tasks across industries.', logo: '/public/openai-logo.png', provider: 'openai', image: true, tools: true },\n { id: 'gpt-5.2-pro', name: 'GPT-5.2 Pro', desc: 'Version of GPT-5.2 that produces smarter and more precise responses.', logo: '/public/openai-logo.png', provider: 'openai', image: true, tools: true },\n { id: 'gpt-5-mini', name: 'GPT-5 Mini', desc: 'Faster, cost-efficient version of GPT-5 for well-defined tasks.', logo: '/public/openai-logo.png', provider: 'openai', image: true, tools: true },\n { id: 'gpt-5-nano', name: 'GPT-5 Nano', desc: 'Fastest, most cost-efficient version of GPT-5.', logo: '/public/openai-logo.png', provider: 'openai', tools: true },\n \n // OpenAI - GPT-4o Series\n { id: 'gpt-4o', name: 'GPT-4o', desc: 'High-intelligence model with vision, fast and affordable.', logo: '/public/openai-logo.png', provider: 'openai', image: true, tools: true },\n { id: 'gpt-4o-mini', name: 'GPT-4o Mini', desc: 'Small, fast, and affordable. Great for most tasks.', logo: '/public/openai-logo.png', provider: 'openai', image: true, tools: true },\n \n // OpenAI - o4 Reasoning Models (Latest)\n { id: 'o4', name: 'o4', desc: 'Latest reasoning model with enhanced capabilities.', logo: '/public/openai-logo.png', provider: 'openai', thinking: true, image: true, tools: true },\n { id: 'o4-mini', name: 'o4-mini', desc: 'Faster reasoning model optimized for coding and math.', logo: '/public/openai-logo.png', provider: 'openai', thinking: true },\n \n // OpenAI - o3 Reasoning Models\n { id: 'o3', name: 'o3', desc: 'Advanced reasoning model for complex multi-step tasks.', logo: '/public/openai-logo.png', provider: 'openai', thinking: true, image: true, tools: true },\n { id: 'o3-mini', name: 'o3-mini', desc: 'Fast, flexible reasoning for coding and problem-solving.', logo: '/public/openai-logo.png', provider: 'openai', thinking: true },\n \n // OpenAI - o1 Reasoning Models\n { id: 'o1', name: 'o1', desc: 'Original reasoning model for complex analysis.', logo: '/public/openai-logo.png', provider: 'openai', thinking: true, image: true },\n { id: 'o1-mini', name: 'o1-mini', desc: 'Efficient reasoning model for coding and math.', logo: '/public/openai-logo.png', provider: 'openai', thinking: true },\n \n // Anthropic - Claude 4 Series (Latest)\n { id: 'claude-opus-4-1-20250805', name: 'Claude Opus 4.1', desc: 'Most capable and intelligent model, setting new standards.', logo: 'vscode-icons:file-type-claude', provider: 'anthropic', thinking: true, image: true, tools: true },\n { id: 'claude-opus-4-20250514', name: 'Claude Opus 4', desc: 'Highly capable model for complex tasks.', logo: 'vscode-icons:file-type-claude', provider: 'anthropic', thinking: true, image: true, tools: true },\n { id: 'claude-sonnet-4-20250514', name: 'Claude Sonnet 4', desc: 'Excellent balance of performance, speed, and cost.', logo: 'vscode-icons:file-type-claude', provider: 'anthropic', thinking: true, image: true, tools: true },\n \n // Anthropic - Claude 3.7 Series\n { id: 'claude-3-7-sonnet-20250219', name: 'Claude 3.7 Sonnet', desc: 'Hybrid model with extended thinking capabilities.', logo: 'vscode-icons:file-type-claude', provider: 'anthropic', thinking: true, image: true, tools: true },\n \n // Anthropic - Claude 3.5 Series\n { id: 'claude-3-5-sonnet-20241022', name: 'Claude 3.5 Sonnet', desc: 'High performance for complex reasoning and coding.', logo: 'vscode-icons:file-type-claude', provider: 'anthropic', thinking: true, image: true, tools: true },\n { id: 'claude-3-5-haiku-20241022', name: 'Claude 3.5 Haiku', desc: 'Fast and cost-effective for simple tasks.', logo: 'vscode-icons:file-type-claude', provider: 'anthropic', image: true, tools: true }\n];\n\n// Default model parameters\nexport const DEFAULT_MODEL_PARAMS = {\n temperature: 0.7,\n maxTokens: 2048,\n topP: 1,\n frequencyPenalty: 0,\n presencePenalty: 0,\n // Groq-specific parameters\n reasoningEffort: 'medium',\n webSearch: false,\n codeExecution: false,\n imageDetail: 'auto',\n modelVersion: 'stable'\n};\n\n// Create default chat metadata\nexport function createChatMetadata() {\n return {\n systemPrompt: '',\n defaultModel: null, // Will use global selected model if null\n parameters: { ...DEFAULT_MODEL_PARAMS },\n createdAt: new Date().toISOString(),\n updatedAt: new Date().toISOString()\n };\n}\n\n// Create a new chat object with messages and metadata unified\nexport function createChatData(messages = [], metadata = null) {\n return {\n messages: messages,\n metadata: metadata || createChatMetadata()\n };\n}\n\n// Create message metadata for tracing\nexport function createMessageMetadata(model, params) {\n return {\n model: model || null,\n temperature: params?.temperature,\n maxTokens: params?.maxTokens,\n parameters: params ? { ...params } : {},\n timestamp: new Date().toISOString()\n };\n}\n\n// Default template parameters (same as chat settings)\nexport const DEFAULT_TEMPLATE_PARAMS = {\n ...DEFAULT_MODEL_PARAMS\n};\n\n// Create a new template object\nexport function createTemplate(name = 'New Template') {\n return {\n id: null, // Will be set when added\n name: name,\n folderId: null,\n order: 0,\n systemPrompt: '',\n defaultModel: null,\n parameters: { ...DEFAULT_TEMPLATE_PARAMS },\n createdAt: new Date().toISOString(),\n updatedAt: new Date().toISOString()\n };\n}\n\nexport function createInitialState() {\n return {\n // Main view state: 'chats' or 'templates'\n mainView: 'chats',\n \n // Sidebar state\n sidebarOpen: true,\n rightSidebarOpen: false, // Right sidebar for chat settings\n \n // Folder/Chat tree state\n folders: [],\n items: [], // Each item represents a chat with { id, name, folderId, order }\n // Unified chats structure: { [chatId]: { messages: [], metadata: { systemPrompt, defaultModel, parameters, ... } } }\n chats: {},\n nextFolderId: 1,\n nextItemId: 1,\n activeChatId: null,\n \n // Editing state\n editingFolderId: null,\n editingFolderName: '',\n editingItemId: null,\n editingItemName: '',\n \n // Drag state\n draggingItemId: null,\n draggingFolderId: null,\n draggingType: null,\n dragOverFolderId: null,\n dragOverRoot: false,\n dragOverFolderRoot: false,\n dropIndicator: null,\n \n // Menu state\n folderMenuOpen: null,\n \n // Copy feedback state\n copiedMessageId: null,\n itemMenuOpen: null,\n \n // Message editing state\n editingMessageId: null,\n editingMessageContent: '',\n \n // Reactivity helper - increment to force sidebar re-render\n itemsVersion: 0,\n \n // Chat state\n messages: [],\n messageInput: '',\n isTyping: false,\n showAttachments: false,\n showModelPicker: false,\n modelSearch: '',\n selectedModel: null,\n previewIndex: -1,\n modelPosition: 'top',\n models: MODELS,\n activeJobId: null, // Track current job for cancellation\n \n // Model configs state (loaded from API)\n modelConfigs: [],\n \n // Current chat settings (bound to right sidebar form)\n currentChatSettings: {\n systemPrompt: '',\n temperature: 0.7,\n maxTokens: 2048,\n topP: 1,\n frequencyPenalty: 0,\n presencePenalty: 0,\n reasoningEffort: 'medium',\n webSearch: false,\n codeExecution: false,\n imageDetail: 'auto',\n modelVersion: 'stable'\n },\n \n // Settings state\n showSettings: false,\n settingsTab: 'general',\n settings: {\n autoSave: true,\n showWelcomeMessage: false,\n language: 'English',\n autoScroll: true\n },\n \n // Thinking/reasoning visibility per message\n // Format: { messageId: true/false }\n thinkingVisible: {},\n \n // API Keys - stored per provider\n apiKeys: {\n groq: '', // Groq API key\n openai: '', // OpenAI API key\n anthropic: '', // Anthropic API key\n custom: '', // Custom provider API key (optional)\n },\n \n // Templates state (mirrors chat structure)\n templateFolders: [],\n templates: [], // Each template has { id, name, folderId, order, systemPrompt, defaultModel, parameters }\n nextTemplateFolderId: 1,\n nextTemplateId: 1,\n activeTemplateId: null,\n \n // Template editing state\n editingTemplateFolderId: null,\n editingTemplateFolderName: '',\n editingTemplateId: null,\n editingTemplateName: '',\n \n // Template drag state\n draggingTemplateId: null,\n draggingTemplateFolderId: null,\n dragOverTemplateFolderId: null,\n dragOverTemplateRoot: false,\n dragOverTemplateFolderRoot: false,\n templateDropIndicator: null,\n \n // Template menu state\n templateFolderMenuOpen: null,\n templateMenuOpen: null,\n \n // Current template settings (bound to right sidebar form when editing template)\n currentTemplateSettings: {\n name: '',\n systemPrompt: '',\n defaultModel: null,\n temperature: 0.7,\n maxTokens: 2048,\n topP: 1,\n frequencyPenalty: 0,\n presencePenalty: 0,\n reasoningEffort: 'medium',\n webSearch: false,\n codeExecution: false,\n imageDetail: 'auto',\n modelVersion: 'stable'\n },\n \n // Template model picker state\n templateModelOpen: false,\n templateModelSearch: '',\n \n // Templates version for reactivity\n templatesVersion: 0,\n };\n}\n\n",[],[480,1277,1295],"0bcfbf42-e2e9-11f0-a009-42dde27851f2","settings.js","0bcfbfe2-e2e9-11f0-a009-42dde27851f2",30,["D",1766815100155],"/**\n * Chat App Settings - Settings management\n */\n\nconst SETTINGS_KEY = 'chatapp-settings';\n\nexport function createSettingsMethods() {\n return {\n // Settings state (add to state.js later)\n settings: {\n autoSave: true,\n showWelcomeMessage: false,\n language: 'English',\n useStreaming: true, // Enable streaming responses by default\n autoScroll: true // Enable auto-scroll by default\n },\n \n // Toggle settings page\n toggleSettings() {\n var wasOpen = this.showSettings;\n this.showSettings = !this.showSettings;\n // Close right sidebar when opening settings\n if (this.showSettings) {\n this.rightSidebarOpen = false;\n }\n // When closing settings, check if any API key errors can be cleared\n if (wasOpen && !this.showSettings) {\n this.checkAndClearApiKeyErrors();\n }\n },\n \n // Check if API key errors in messages can be cleared (API key was added)\n checkAndClearApiKeyErrors() {\n var self = this;\n if (!Array.isArray(this.messages)) return;\n \n // First, use orchestrator to check all blocked jobs\n if (this.checkBlockedJobs) {\n var unblockedCount = this.checkBlockedJobs();\n if (unblockedCount > 0) {\n console.log('[Settings] Orchestrator unblocked', unblockedCount, 'jobs');\n }\n }\n \n // Find any API key error messages\n var hasApiKeyErrors = this.messages.some(function(m) {\n return m.role === 'error' && m.isApiKeyError;\n });\n \n if (!hasApiKeyErrors) return;\n \n // Check if the relevant provider now has an API key\n this.messages.forEach(function(msg, idx) {\n if (msg.role === 'error' && msg.isApiKeyError) {\n // Determine which provider this error was for\n var provider = self.selectedModel && self.selectedModel.provider;\n if (!provider) return;\n \n // Check if we now have an API key for this provider\n var hasKey = self.apiKeys && self.apiKeys[provider] && self.apiKeys[provider].trim().length > 0;\n \n if (hasKey) {\n // Update the error message to show it can be retried\n self.messages[idx] = {\n id: msg.id,\n role: 'error',\n content: 'API key added! Click \"Retry\" to send your message again.',\n isError: true,\n isApiKeyError: false,\n canRetry: true,\n originalProvider: provider,\n threadJobId: msg.threadJobId,\n timestamp: Date.now()\n };\n }\n }\n });\n \n // Save changes\n if (this.saveToStorage) {\n this.saveToStorage();\n }\n },\n \n // Retry a failed message (used after API key is added or for immediate retry)\n retryLastMessage() {\n if (!Array.isArray(this.messages)) return;\n \n // Find any error message (with or without canRetry flag)\n var errorMsgIdx = -1;\n var threadJobId = null;\n for (var i = this.messages.length - 1; i >= 0; i--) {\n if (this.messages[i].role === 'error') {\n errorMsgIdx = i;\n threadJobId = this.messages[i].threadJobId;\n break;\n }\n }\n \n // Find the last user message before any error\n var lastUserMsgIdx = -1;\n for (var i = this.messages.length - 1; i >= 0; i--) {\n if (this.messages[i].role === 'user') {\n lastUserMsgIdx = i;\n break;\n }\n }\n \n if (lastUserMsgIdx === -1) return;\n \n // Remove any error messages after the last user message\n var newMessages = this.messages.slice(0, lastUserMsgIdx + 1);\n this.messages = newMessages;\n \n // If there was an orchestrator job, try to retry it\n if (threadJobId && this.retryJob) {\n var success = this.retryJob(threadJobId);\n console.log('[Settings] Retry thread job:', threadJobId, success ? 'started' : 'failed');\n }\n \n // Resend the last user message\n if (this.sendChatRequest) {\n this.sendChatRequest();\n }\n \n // Save changes\n if (this.saveToStorage) {\n this.saveToStorage();\n }\n },\n \n // Cancel a job from the UI\n cancelJobFromUI(jobId) {\n if (this.cancelJob) {\n var success = this.cancelJob(jobId);\n console.log('[Settings] Cancel job:', jobId, success ? 'cancelled' : 'failed');\n \n // Remove the associated error message if present\n if (Array.isArray(this.messages)) {\n var msgIdx = this.messages.findIndex(function(m) { \n return m.threadJobId === jobId; \n });\n if (msgIdx !== -1) {\n this.messages.splice(msgIdx, 1);\n this.saveToStorage();\n }\n }\n }\n },\n \n loadSettings() {\n try {\n const stored = localStorage.getItem(SETTINGS_KEY);\n if (stored) {\n this.settings = { ...this.settings, ...JSON.parse(stored) };\n }\n } catch (e) {\n console.warn('Failed to load settings:', e);\n }\n },\n \n saveSettings() {\n try {\n localStorage.setItem(SETTINGS_KEY, JSON.stringify(this.settings));\n } catch (e) {\n console.warn('Failed to save settings:', e);\n }\n },\n \n updateSetting(key, value) {\n this.settings[key] = value;\n this.saveSettings();\n },\n \n checkForUpdate() {\n // Simple version check - in a real app this would ping a server\n const currentVersion = '1.0.0';\n alert(`Current version: ${currentVersion}\\\\n\\\\nYou are running the latest version!`);\n },\n \n exportData() {\n try {\n // Get all chat data\n const chatData = localStorage.getItem('chatapp-data');\n const settings = localStorage.getItem(SETTINGS_KEY);\n \n const exportObj = {\n version: '1.0.0',\n exportDate: new Date().toISOString(),\n chatData: chatData ? JSON.parse(chatData) : null,\n settings: settings ? JSON.parse(settings) : null\n };\n \n // Create download\n const dataStr = JSON.stringify(exportObj, null, 2);\n const dataBlob = new Blob([dataStr], { type: 'application/json' });\n const url = URL.createObjectURL(dataBlob);\n const link = document.createElement('a');\n link.href = url;\n link.download = `chatter-export-${new Date().toISOString().split('T')[0]}.json`;\n document.body.appendChild(link);\n link.click();\n document.body.removeChild(link);\n URL.revokeObjectURL(url);\n \n console.log('Data exported successfully');\n } catch (e) {\n console.error('Failed to export data:', e);\n alert('Failed to export data. Check console for details.');\n }\n },\n \n importData() {\n try {\n const input = document.createElement('input');\n input.type = 'file';\n input.accept = 'application/json';\n \n input.onchange = (e) => {\n const file = e.target.files[0];\n if (!file) return;\n \n const reader = new FileReader();\n reader.onload = (event) => {\n try {\n const importObj = JSON.parse(event.target.result);\n \n // Validate import\n if (!importObj.version || !importObj.chatData) {\n throw new Error('Invalid import file format');\n }\n \n // Confirm before importing\n if (!confirm('This will replace all current data. Continue?')) {\n return;\n }\n \n // Import chat data\n if (importObj.chatData) {\n localStorage.setItem('chatapp-data', JSON.stringify(importObj.chatData));\n }\n \n // Import settings\n if (importObj.settings) {\n localStorage.setItem(SETTINGS_KEY, JSON.stringify(importObj.settings));\n }\n \n // Reload the page to apply changes\n alert('Data imported successfully! The page will now reload.');\n window.location.reload();\n } catch (err) {\n console.error('Failed to import data:', err);\n alert('Failed to import data. Please check the file format.');\n }\n };\n \n reader.readAsText(file);\n };\n \n input.click();\n } catch (e) {\n console.error('Failed to import data:', e);\n alert('Failed to import data. Check console for details.');\n }\n },\n \n clearData() {\n if (confirm('Are you sure you want to clear all data? This cannot be undone.')) {\n if (confirm('This will delete all chats, folders, and messages. Are you absolutely sure?')) {\n try {\n localStorage.removeItem('chatapp-data');\n localStorage.removeItem(SETTINGS_KEY);\n \n // Reset state\n this.folders = [];\n this.items = [];\n this.chats = {};\n this.nextFolderId = 1;\n this.nextItemId = 1;\n this.activeChatId = null;\n this.messages = [];\n this.settings = {\n autoSave: true,\n showWelcomeMessage: false,\n language: 'English',\n useStreaming: true\n };\n \n alert('All data cleared successfully!');\n } catch (e) {\n console.error('Failed to clear data:', e);\n alert('Failed to clear data. Check console for details.');\n }\n }\n }\n }\n };\n}\n\n",[],[480,1277,1303],"3c2110f6-ef19-11f0-8520-42dde27851f2","providerSettings.js","0ba175e2-e2e9-11f0-8def-42dde27851f2",164,["D",1768155211043],"/**\n * Provider Settings - Manage API keys, base URLs, and model configurations\n * Loads defaults from server configs and allows user customization via localStorage\n */\n\nvar PROVIDER_SETTINGS_KEY = 'chatapp-provider-settings';\nvar PROVIDER_SETTINGS_VERSION = 2; // Increment this when DEFAULT_MODELS changes significantly\n\n// Default provider configurations\nvar DEFAULT_PROVIDERS = {\n groq: {\n name: 'Groq',\n baseUrl: 'https://api.groq.com/openai/v1',\n logo: '/public/groq-logo-orange.png',\n docsUrl: 'https://console.groq.com/docs',\n apiKeyUrl: 'https://console.groq.com/keys',\n apiKeyPrefix: 'gsk_'\n },\n openai: {\n name: 'OpenAI',\n baseUrl: 'https://api.openai.com/v1',\n logo: '/public/openai-logo.png',\n docsUrl: 'https://platform.openai.com/docs',\n apiKeyUrl: 'https://platform.openai.com/api-keys',\n apiKeyPrefix: 'sk-'\n },\n anthropic: {\n name: 'Anthropic',\n baseUrl: 'https://api.anthropic.com/v1',\n logo: 'vscode-icons:file-type-claude',\n docsUrl: 'https://docs.anthropic.com',\n apiKeyUrl: 'https://console.anthropic.com/settings/keys',\n apiKeyPrefix: 'sk-ant-'\n },\n custom: {\n name: 'Custom',\n baseUrl: 'https://llm.labspace.ai/v1',\n logo: '/public/custom-logo.png',\n docsUrl: '',\n apiKeyUrl: '',\n apiKeyPrefix: ''\n }\n};\n\n// Default models based on provider configs\nvar DEFAULT_MODELS = [\n // Groq models\n { id: 'groq/compound', name: 'Compound', provider: 'groq', desc: 'AI system with built-in tools including web search and code execution.', capabilities: { web: true, tools: true, streaming: true } },\n { id: 'groq/compound-mini', name: 'Compound Mini', provider: 'groq', desc: 'Faster, lighter version with web search and code execution.', capabilities: { web: true, tools: true, streaming: true } },\n { id: 'llama-3.1-8b-instant', name: 'Llama 3.1 8B Instant', provider: 'groq', desc: 'Ultra-fast 8B model for instant responses (560 t/s).', capabilities: { streaming: true } },\n { id: 'llama-3.3-70b-versatile', name: 'Llama 3.3 70B Versatile', provider: 'groq', desc: 'Versatile 70B model for a wide range of tasks (280 t/s).', capabilities: { streaming: true } },\n { id: 'meta-llama/llama-4-maverick-17b-128e-instruct', name: 'Llama 4 Maverick 17B', provider: 'groq', desc: 'Powerful image understanding and analysis (600 t/s).', capabilities: { image: true, streaming: true }, preview: true },\n { id: 'meta-llama/llama-4-scout-17b-16e-instruct', name: 'Llama 4 Scout 17B', provider: 'groq', desc: 'Fast responses with image support (750 t/s).', capabilities: { image: true, streaming: true }, preview: true },\n { id: 'openai/gpt-oss-120b', name: 'GPT OSS 120B', provider: 'groq', desc: 'Flagship 120B parameter model with browser search and reasoning.', capabilities: { web: true, thinking: true, tools: true, streaming: true } },\n { id: 'openai/gpt-oss-20b', name: 'GPT OSS 20B', provider: 'groq', desc: 'Fast 20B model with web search, thinking, and code execution.', capabilities: { web: true, thinking: true, tools: true, streaming: true } },\n { id: 'moonshotai/kimi-k2-instruct-0905', name: 'Kimi K2', provider: 'groq', desc: 'Highly capable for writing and coding with 262K context.', capabilities: { streaming: true }, preview: true },\n { id: 'qwen/qwen3-32b', name: 'Qwen3-32B', provider: 'groq', desc: 'Multilingual responses with thinking capabilities.', capabilities: { thinking: true, streaming: true }, preview: true },\n \n // OpenAI models - GPT-5.2 Series (Latest)\n { id: 'gpt-5.2', name: 'GPT-5.2', provider: 'openai', desc: 'Most advanced model for coding and agentic tasks across industries.', capabilities: { image: true, streaming: true, tools: true } },\n { id: 'gpt-5.2-pro', name: 'GPT-5.2 Pro', provider: 'openai', desc: 'Version of GPT-5.2 that produces smarter and more precise responses.', capabilities: { image: true, streaming: true, tools: true } },\n { id: 'gpt-5-mini', name: 'GPT-5 Mini', provider: 'openai', desc: 'Faster, cost-efficient version of GPT-5 for well-defined tasks.', capabilities: { image: true, streaming: true, tools: true } },\n { id: 'gpt-5-nano', name: 'GPT-5 Nano', provider: 'openai', desc: 'Fastest, most cost-efficient version of GPT-5.', capabilities: { streaming: true, tools: true } },\n \n // OpenAI - GPT-4o Series\n { id: 'gpt-4o', name: 'GPT-4o', provider: 'openai', desc: 'High-intelligence model with vision, fast and affordable.', capabilities: { image: true, streaming: true, tools: true } },\n { id: 'gpt-4o-mini', name: 'GPT-4o Mini', provider: 'openai', desc: 'Small, fast, and affordable. Great for most tasks.', capabilities: { image: true, streaming: true, tools: true } },\n { id: 'chatgpt-4o-latest', name: 'ChatGPT-4o Latest', provider: 'openai', desc: 'Dynamic model continuously updated to current ChatGPT version.', capabilities: { image: true, streaming: true, tools: true } },\n \n // OpenAI - o4 Reasoning Models (Latest)\n { id: 'o4', name: 'o4', provider: 'openai', desc: 'Latest reasoning model with enhanced capabilities and configurable effort.', capabilities: { thinking: true, streaming: true, image: true, tools: true } },\n { id: 'o4-mini', name: 'o4-mini', provider: 'openai', desc: 'Faster reasoning model optimized for coding, math, and science.', capabilities: { thinking: true, streaming: true } },\n \n // OpenAI - o3 Reasoning Models\n { id: 'o3', name: 'o3', provider: 'openai', desc: 'Advanced reasoning model for complex multi-step tasks.', capabilities: { thinking: true, streaming: true, image: true, tools: true } },\n { id: 'o3-mini', name: 'o3-mini', provider: 'openai', desc: 'Fast, flexible reasoning for coding and problem-solving.', capabilities: { thinking: true, streaming: true } },\n \n // OpenAI - o1 Reasoning Models\n { id: 'o1', name: 'o1', provider: 'openai', desc: 'Original reasoning model for complex analysis.', capabilities: { thinking: true, streaming: true, image: true } },\n { id: 'o1-mini', name: 'o1-mini', provider: 'openai', desc: 'Efficient reasoning model for coding and math.', capabilities: { thinking: true, streaming: true } },\n { id: 'o1-pro', name: 'o1-pro', provider: 'openai', desc: 'Enhanced compute for hard problems.', capabilities: { thinking: true, streaming: true, image: true } },\n \n // Anthropic - Claude 4 Series (Latest)\n { id: 'claude-opus-4-1-20250805', name: 'Claude Opus 4.1', provider: 'anthropic', desc: 'Most capable and intelligent model, setting new standards in complex reasoning.', capabilities: { thinking: true, image: true, streaming: true, tools: true } },\n { id: 'claude-opus-4-20250514', name: 'Claude Opus 4', provider: 'anthropic', desc: 'Highly capable model for complex tasks requiring deep reasoning.', capabilities: { thinking: true, image: true, streaming: true, tools: true } },\n { id: 'claude-sonnet-4-20250514', name: 'Claude Sonnet 4', provider: 'anthropic', desc: 'Excellent balance of performance, speed, and cost with extended thinking.', capabilities: { thinking: true, image: true, streaming: true, tools: true } },\n \n // Anthropic - Claude 3.7 Series\n { id: 'claude-3-7-sonnet-20250219', name: 'Claude 3.7 Sonnet', provider: 'anthropic', desc: 'Hybrid model with extended thinking capabilities.', capabilities: { thinking: true, image: true, streaming: true, tools: true } },\n \n // Anthropic - Claude 3.5 Series\n { id: 'claude-3-5-sonnet-20241022', name: 'Claude 3.5 Sonnet', provider: 'anthropic', desc: 'High performance for complex reasoning and coding.', capabilities: { thinking: true, image: true, streaming: true, tools: true } },\n { id: 'claude-3-5-haiku-20241022', name: 'Claude 3.5 Haiku', provider: 'anthropic', desc: 'Fast and cost-effective for simple tasks.', capabilities: { image: true, streaming: true, tools: true } },\n \n // Anthropic - Claude 3 Series (Legacy)\n { id: 'claude-3-opus-20240229', name: 'Claude 3 Opus', provider: 'anthropic', desc: 'Highly capable for complex analysis and coding.', capabilities: { image: true, streaming: true, tools: true } },\n { id: 'claude-3-sonnet-20240229', name: 'Claude 3 Sonnet', provider: 'anthropic', desc: 'Balanced performance and cost.', capabilities: { image: true, streaming: true, tools: true } },\n { id: 'claude-3-haiku-20240307', name: 'Claude 3 Haiku', provider: 'anthropic', desc: 'Fastest Claude 3 model.', capabilities: { streaming: true, tools: true } }\n];\n\nexport function createProviderSettingsMethods() {\n return {\n // Provider settings state\n providerSettings: {\n providers: {}, // { groq: { baseUrl, apiKey }, openai: {...} }\n models: [], // User's configured models\n loaded: false\n },\n \n // UI state for provider settings\n providerSettingsUI: {\n editingModelId: null,\n editingModelName: '',\n addingModelToProvider: null,\n newModelId: '',\n expandedProvider: 'groq', // Which provider section is expanded\n discoveringModels: false,\n discoveryError: null,\n testingConnection: false,\n connectionTestResult: null\n },\n \n // Load provider settings from localStorage, merging with defaults\n loadProviderSettings() {\n try {\n var stored = localStorage.getItem(PROVIDER_SETTINGS_KEY);\n var parsed = stored ? JSON.parse(stored) : {};\n \n // Check version - if old version or no version, reset to defaults\n if (!parsed.version || parsed.version < PROVIDER_SETTINGS_VERSION) {\n console.log('[ProviderSettings] Old version detected, resetting to defaults');\n parsed = { version: PROVIDER_SETTINGS_VERSION };\n }\n \n // Merge with defaults for providers\n var providers = {};\n Object.keys(DEFAULT_PROVIDERS).forEach(function(key) {\n providers[key] = Object.assign(\n {},\n DEFAULT_PROVIDERS[key],\n parsed.providers ? parsed.providers[key] : {}\n );\n });\n \n // Also load any additional custom providers (custom2, custom3, etc.)\n if (parsed.providers) {\n Object.keys(parsed.providers).forEach(function(key) {\n if (key.startsWith('custom') && key !== 'custom' && !providers[key]) {\n providers[key] = Object.assign(\n {},\n {\n name: 'Custom Provider',\n baseUrl: '',\n logo: 'lucide:server',\n docsUrl: '',\n apiKeyUrl: '',\n apiKeyPrefix: ''\n },\n parsed.providers[key]\n );\n }\n });\n }\n \n // For models, use stored if available AND not empty, otherwise use defaults\n var models = (parsed.models && parsed.models.length > 0) \n ? parsed.models \n : JSON.parse(JSON.stringify(DEFAULT_MODELS));\n \n // Safety check: if models is still empty (shouldn't happen), force defaults\n if (!models || models.length === 0) {\n console.warn('[ProviderSettings] Models array was empty, forcing defaults');\n models = JSON.parse(JSON.stringify(DEFAULT_MODELS));\n }\n \n this.providerSettings = {\n providers: providers,\n models: models,\n loaded: true,\n version: PROVIDER_SETTINGS_VERSION\n };\n \n // Also sync apiKeys from storage (these are stored separately)\n if (this.apiKeys) {\n Object.keys(providers).forEach(function(key) {\n if (this.apiKeys[key]) {\n providers[key].apiKey = this.apiKeys[key];\n }\n }.bind(this));\n }\n \n // Update the global models list for the picker\n this.updateGlobalModelsList();\n \n console.log('[ProviderSettings] Loaded', models.length, 'models');\n } catch (e) {\n console.warn('Failed to load provider settings:', e);\n this.providerSettings = {\n providers: JSON.parse(JSON.stringify(DEFAULT_PROVIDERS)),\n models: JSON.parse(JSON.stringify(DEFAULT_MODELS)),\n loaded: true,\n version: PROVIDER_SETTINGS_VERSION\n };\n this.updateGlobalModelsList();\n }\n },\n \n // Save provider settings to localStorage\n saveProviderSettings() {\n try {\n var data = {\n version: PROVIDER_SETTINGS_VERSION,\n providers: {},\n models: this.providerSettings.models\n };\n \n // Only save user-modified provider settings (not defaults)\n Object.keys(this.providerSettings.providers).forEach(function(key) {\n var provider = this.providerSettings.providers[key];\n data.providers[key] = {\n baseUrl: provider.baseUrl,\n name: provider.name // Save custom provider name\n // Don't save apiKey here - it's stored separately\n };\n }.bind(this));\n \n localStorage.setItem(PROVIDER_SETTINGS_KEY, JSON.stringify(data));\n console.log('[ProviderSettings] Saved');\n } catch (e) {\n console.warn('Failed to save provider settings:', e);\n }\n },\n \n // Reset provider settings to defaults\n resetProviderSettings() {\n if (confirm('Reset all provider settings to defaults? This will remove any custom models you have added.')) {\n localStorage.removeItem(PROVIDER_SETTINGS_KEY);\n this.loadProviderSettings();\n this.updateGlobalModelsList();\n }\n },\n \n // Add a new custom provider\n addCustomProvider() {\n // Find the next available custom provider ID\n var existingCustomIds = Object.keys(this.providerSettings.providers)\n .filter(function(key) { return key.startsWith('custom'); })\n .map(function(key) {\n var num = parseInt(key.replace('custom', '')) || 1;\n return num;\n });\n \n var nextNum = existingCustomIds.length > 0 ? Math.max.apply(null, existingCustomIds) + 1 : 2;\n var newProviderId = 'custom' + nextNum;\n \n // Create the new provider\n this.providerSettings.providers[newProviderId] = {\n name: 'Custom Provider ' + nextNum,\n baseUrl: '',\n logo: 'lucide:server',\n docsUrl: '',\n apiKeyUrl: '',\n apiKeyPrefix: ''\n };\n \n // Initialize API key for this provider\n this.apiKeys[newProviderId] = '';\n \n // Save settings\n this.saveProviderSettings();\n \n console.log('[ProviderSettings] Added new custom provider:', newProviderId);\n },\n \n // Delete a custom provider\n deleteCustomProvider(providerId) {\n if (!providerId.startsWith('custom')) {\n console.warn('Cannot delete built-in provider:', providerId);\n return;\n }\n \n if (providerId === 'custom') {\n console.warn('Cannot delete the primary custom provider');\n return;\n }\n \n if (!confirm('Delete this custom provider and all its models?')) {\n return;\n }\n \n // Remove provider\n delete this.providerSettings.providers[providerId];\n \n // Remove associated models\n this.providerSettings.models = this.providerSettings.models.filter(function(m) {\n return m.provider !== providerId;\n });\n \n // Remove API key\n delete this.apiKeys[providerId];\n \n // Save settings\n this.saveProviderSettings();\n this.updateGlobalModelsList();\n \n console.log('[ProviderSettings] Deleted custom provider:', providerId);\n },\n \n // Get all custom provider IDs (including the primary 'custom')\n getCustomProviderIds() {\n return Object.keys(this.providerSettings.providers)\n .filter(function(key) { return key.startsWith('custom'); })\n .sort();\n },\n \n // Get models for a specific provider\n getModelsForProvider(providerId) {\n return this.providerSettings.models.filter(function(m) {\n return m.provider === providerId;\n });\n },\n \n // Update provider base URL\n updateProviderBaseUrl(providerId, url) {\n if (this.providerSettings.providers[providerId]) {\n this.providerSettings.providers[providerId].baseUrl = url;\n this.saveProviderSettings();\n }\n },\n \n // Update provider name\n updateProviderName(providerId, name) {\n if (this.providerSettings.providers[providerId]) {\n this.providerSettings.providers[providerId].name = name;\n this.saveProviderSettings();\n // Update model descriptions with new provider name\n this.updateGlobalModelsList();\n }\n },\n \n // Start editing a model name\n startEditingModel(modelId, currentName) {\n this.providerSettingsUI.editingModelId = modelId;\n this.providerSettingsUI.editingModelName = currentName;\n \n // Focus the input after Alpine renders\n var self = this;\n this.$nextTick(function() {\n var input = document.querySelector('[data-model-edit=\"' + modelId + '\"]');\n if (input) {\n input.focus();\n input.select();\n }\n });\n },\n \n // Commit editing a model name\n commitEditingModel() {\n var modelId = this.providerSettingsUI.editingModelId;\n var newName = this.providerSettingsUI.editingModelName.trim();\n \n if (modelId && newName) {\n var model = this.providerSettings.models.find(function(m) {\n return m.id === modelId;\n });\n if (model) {\n model.name = newName;\n this.saveProviderSettings();\n }\n }\n \n this.providerSettingsUI.editingModelId = null;\n this.providerSettingsUI.editingModelName = '';\n },\n \n // Cancel editing\n cancelEditingModel() {\n this.providerSettingsUI.editingModelId = null;\n this.providerSettingsUI.editingModelName = '';\n },\n \n // Start adding a new model\n startAddingModel(providerId) {\n this.providerSettingsUI.addingModelToProvider = providerId;\n this.providerSettingsUI.newModelId = '';\n \n var self = this;\n this.$nextTick(function() {\n var input = document.querySelector('[data-new-model-input=\"' + providerId + '\"]');\n if (input) {\n input.focus();\n }\n });\n },\n \n // Commit adding a new model\n commitAddingModel() {\n var providerId = this.providerSettingsUI.addingModelToProvider;\n var modelId = this.providerSettingsUI.newModelId.trim();\n \n if (providerId && modelId) {\n // Check if model already exists\n var exists = this.providerSettings.models.find(function(m) {\n return m.id === modelId;\n });\n \n if (exists) {\n alert('Model with this ID already exists');\n return;\n }\n \n // Add new model (active by default)\n var provider = this.providerSettings.providers[providerId];\n var providerName = provider?.name || providerId;\n \n // Extract hostname from baseUrl for custom providers\n if (providerId && providerId.startsWith('custom') && provider?.baseUrl) {\n try {\n var url = new URL(provider.baseUrl);\n providerName = url.hostname;\n } catch (e) {\n providerName = provider?.name || 'Custom';\n }\n }\n \n this.providerSettings.models.push({\n id: modelId,\n name: modelId, // Use ID as initial name, user can edit\n provider: providerId,\n desc: providerName + ' model',\n capabilities: { streaming: true },\n active: true\n });\n \n this.saveProviderSettings();\n this.updateGlobalModelsList();\n }\n \n this.providerSettingsUI.addingModelToProvider = null;\n this.providerSettingsUI.newModelId = '';\n },\n \n // Cancel adding\n cancelAddingModel() {\n this.providerSettingsUI.addingModelToProvider = null;\n this.providerSettingsUI.newModelId = '';\n },\n \n // Delete a model\n deleteModel(modelId) {\n if (confirm('Delete this model from your configuration?')) {\n this.providerSettings.models = this.providerSettings.models.filter(function(m) {\n return m.id !== modelId;\n });\n this.saveProviderSettings();\n this.updateGlobalModelsList();\n }\n },\n \n // Toggle model capability\n toggleModelCapability(modelId, capability) {\n var model = this.providerSettings.models.find(function(m) {\n return m.id === modelId;\n });\n if (model) {\n if (!model.capabilities) model.capabilities = {};\n model.capabilities[capability] = !model.capabilities[capability];\n this.saveProviderSettings();\n }\n },\n \n // Toggle model active/inactive (show/hide in model picker)\n toggleModelActive(modelId) {\n var model = this.providerSettings.models.find(function(m) {\n return m.id === modelId;\n });\n if (model) {\n // Default to true if undefined, so toggle to false\n model.active = model.active === false ? true : false;\n this.saveProviderSettings();\n \n // Also update the global models list used by the picker\n this.updateGlobalModelsList();\n }\n },\n \n // Enable all models for a provider\n enableAllModels(providerId) {\n var models = this.getModelsForProvider(providerId);\n models.forEach(function(m) {\n m.active = true;\n });\n this.saveProviderSettings();\n this.updateGlobalModelsList();\n },\n \n // Disable all models for a provider\n disableAllModels(providerId) {\n var models = this.getModelsForProvider(providerId);\n models.forEach(function(m) {\n m.active = false;\n });\n this.saveProviderSettings();\n this.updateGlobalModelsList();\n },\n \n // Update the global models list (used by model picker) from provider settings\n updateGlobalModelsList() {\n // Get all active models from provider settings\n var activeModels = this.providerSettings.models.filter(function(m) {\n return m.active !== false; // Show by default if not set\n });\n \n // Get provider logos\n var providerLogos = {\n groq: '/public/groq-logo-orange.png',\n openai: '/public/openai-logo.png',\n anthropic: 'vscode-icons:file-type-claude',\n custom: 'lucide:message-square'\n };\n \n // Helper function to get provider display name\n var self = this;\n var getProviderDisplayName = function(providerId) {\n var provider = self.providerSettings.providers[providerId];\n if (!provider) return providerId;\n \n // For custom providers (custom, custom2, etc.), use custom name or extract from URL\n if (providerId && providerId.startsWith('custom')) {\n if (provider.name) {\n return provider.name;\n }\n if (provider.baseUrl) {\n try {\n var url = new URL(provider.baseUrl);\n return url.hostname;\n } catch (e) {\n return 'Custom';\n }\n }\n return 'Custom';\n }\n \n // For other providers, use their name\n return provider.name || providerId;\n };\n \n // Update the main models array used by the picker\n // Use a Map to deduplicate by model ID (keep first occurrence)\n var seenIds = {};\n var dedupedModels = [];\n activeModels.forEach(function(m) {\n if (!seenIds[m.id]) {\n seenIds[m.id] = true;\n dedupedModels.push(m);\n }\n });\n \n this.models = dedupedModels.map(function(m) {\n // Generate description dynamically based on current provider settings\n var providerDisplayName = getProviderDisplayName(m.provider);\n var desc = m.desc;\n \n // Update description for custom provider models to use current provider name\n if (m.provider && m.provider.startsWith('custom')) {\n desc = providerDisplayName + ' model';\n }\n \n return {\n id: m.id,\n name: m.name,\n desc: desc,\n logo: providerLogos[m.provider] || 'lucide:message-square',\n provider: m.provider,\n web: m.capabilities?.web,\n thinking: m.capabilities?.thinking,\n image: m.capabilities?.image,\n tools: m.capabilities?.tools,\n preview: m.preview\n };\n });\n \n // If current selected model is no longer active, select the first available\n if (this.selectedModel) {\n var stillActive = this.models.find(function(m) {\n return m.id === this.selectedModel.id;\n }.bind(this));\n \n if (!stillActive && this.models.length > 0) {\n this.selectedModel = this.models[0];\n }\n }\n },\n \n // Update model description\n updateModelDescription(modelId, desc) {\n var model = this.providerSettings.models.find(function(m) {\n return m.id === modelId;\n });\n if (model) {\n model.desc = desc;\n this.saveProviderSettings();\n }\n },\n \n // Discover models from a custom endpoint\n async discoverModels(providerId) {\n var provider = this.providerSettings.providers[providerId];\n if (!provider || !provider.baseUrl) {\n this.providerSettingsUI.discoveryError = 'Please enter a base URL first';\n return;\n }\n \n this.providerSettingsUI.discoveringModels = true;\n this.providerSettingsUI.discoveryError = null;\n \n try {\n var apiKey = this.apiKeys ? this.apiKeys[providerId] : null;\n \n var response = await fetch('/api/providers/discover-models', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({\n baseUrl: provider.baseUrl,\n apiKey: apiKey,\n provider: providerId\n })\n });\n \n var data = await response.json();\n \n if (!response.ok || data.error) {\n throw new Error(data.error || data.details || 'Failed to discover models');\n }\n \n if (data.models && data.models.length > 0) {\n var addedCount = 0;\n var self = this;\n \n data.models.forEach(function(model) {\n // Check if model already exists\n var exists = self.providerSettings.models.find(function(m) {\n return m.id === model.id;\n });\n \n if (!exists) {\n // Get provider name - use custom name if set, otherwise extract from URL\n var providerName = 'Custom';\n if (provider.name) {\n providerName = provider.name;\n } else if (provider.baseUrl) {\n try {\n var url = new URL(provider.baseUrl);\n providerName = url.hostname;\n } catch (e) {\n providerName = 'Custom';\n }\n }\n \n self.providerSettings.models.push({\n id: model.id,\n name: model.name || model.id,\n provider: providerId,\n desc: providerName + ' model' + (model.owned_by && model.owned_by !== 'organization_owner' ? ' • ' + model.owned_by : ''),\n capabilities: { streaming: true },\n active: true\n });\n addedCount++;\n }\n });\n \n if (addedCount > 0) {\n this.saveProviderSettings();\n this.updateGlobalModelsList();\n // Success - models added silently\n } else {\n // All models already exist - no action needed\n }\n } else {\n this.providerSettingsUI.discoveryError = 'No models found at this endpoint';\n }\n } catch (error) {\n console.error('[discoverModels] Error:', error);\n this.providerSettingsUI.discoveryError = error.message || 'Failed to discover models';\n } finally {\n this.providerSettingsUI.discoveringModels = false;\n }\n },\n \n // Test connection to a provider\n async testConnection(providerId) {\n var provider = this.providerSettings.providers[providerId];\n \n this.providerSettingsUI.testingConnection = true;\n this.providerSettingsUI.connectionTestResult = null;\n \n try {\n var apiKey = this.apiKeys ? this.apiKeys[providerId] : null;\n \n var response = await fetch('/api/providers/test-connection', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({\n baseUrl: provider ? provider.baseUrl : null,\n apiKey: apiKey,\n provider: providerId\n })\n });\n \n var data = await response.json();\n \n this.providerSettingsUI.connectionTestResult = {\n success: data.success,\n message: data.message || data.error,\n modelCount: data.modelCount\n };\n } catch (error) {\n console.error('[testConnection] Error:', error);\n this.providerSettingsUI.connectionTestResult = {\n success: false,\n message: error.message || 'Connection test failed'\n };\n } finally {\n this.providerSettingsUI.testingConnection = false;\n }\n },\n \n // Get capability badge class\n getCapabilityBadgeClass(capability) {\n switch(capability) {\n case 'web': return 'badge-info';\n case 'thinking': return 'badge-purple';\n case 'image': return 'badge-success';\n case 'tools': return 'badge-warning';\n case 'streaming': return 'badge-neutral';\n default: return 'badge-neutral';\n }\n },\n \n // Get capability icon\n getCapabilityIcon(capability) {\n switch(capability) {\n case 'web': return 'mdi:web';\n case 'thinking': return 'mdi:brain';\n case 'image': return 'mdi:image-outline';\n case 'tools': return 'mdi:tools';\n case 'streaming': return 'mdi:lightning-bolt';\n default: return 'mdi:help-circle-outline';\n }\n },\n \n // Get provider logo path\n getProviderLogo(providerId) {\n var logos = {\n groq: '/public/groq-logo-orange.png',\n openai: '/public/openai-logo.png',\n anthropic: 'vscode-icons:file-type-claude',\n custom: '/public/custom-logo.png'\n };\n return logos[providerId] || '/public/custom-logo.png';\n }\n };\n}\n",[],[480,1277,1311],"3c2a7fc4-ef19-11f0-93af-42dde27851f2","models.js","0b834310-e2e9-11f0-b141-42dde27851f2",166,["D",1768155211096],"/**\n * Chat App Models - Model picker functionality\n * \n * Uses unified chat structure: chats[id] = { messages: [], metadata: {...} }\n */\n\nimport { createChatData, createChatMetadata } from './state.js';\n\nexport function createModelMethods() {\n return {\n initPreviewIndex() {\n if (this.selectedModel) {\n const idx = this.filteredModels.findIndex(m => m.id === this.selectedModel.id);\n this.previewIndex = idx >= 0 ? idx : 0;\n } else {\n this.previewIndex = 0;\n }\n },\n \n handleModelKeydown(event) {\n const filtered = this.filteredModels;\n if (filtered.length === 0) return;\n \n if (event.key === 'ArrowDown') {\n event.preventDefault();\n this.previewIndex = Math.min(this.previewIndex + 1, filtered.length - 1);\n this.scrollPreviewIntoView();\n } else if (event.key === 'ArrowUp') {\n event.preventDefault();\n this.previewIndex = Math.max(this.previewIndex - 1, 0);\n this.scrollPreviewIntoView();\n } else if (event.key === 'Enter') {\n event.preventDefault();\n if (this.previewIndex >= 0 && this.previewIndex < filtered.length) {\n this.selectModel(filtered[this.previewIndex]);\n }\n } else if (event.key === 'Escape') {\n event.preventDefault();\n this.showModelPicker = false;\n this.modelSearch = '';\n }\n },\n \n scrollPreviewIntoView() {\n this.$nextTick(() => {\n const list = this.$refs.modelList;\n const items = list?.querySelectorAll('.model-picker-item');\n if (items && items[this.previewIndex]) {\n items[this.previewIndex].scrollIntoView({ block: 'nearest' });\n }\n });\n },\n \n selectModel(model) {\n this.selectedModel = model;\n this.showModelPicker = false;\n this.modelSearch = '';\n \n // Save selected model to current chat's unified metadata\n if (this.activeChatId) {\n // Ensure chat exists with proper structure\n if (!this.chats[this.activeChatId]) {\n this.chats[this.activeChatId] = createChatData();\n }\n // Ensure metadata exists\n if (!this.chats[this.activeChatId].metadata) {\n this.chats[this.activeChatId].metadata = createChatMetadata();\n }\n \n this.chats[this.activeChatId].metadata.defaultModel = model.id;\n this.chats[this.activeChatId].metadata.updatedAt = new Date().toISOString();\n \n console.log('[selectModel] Saved model to chat', this.activeChatId, ':', model.id);\n \n // Trigger save\n if (this.saveToStorage) {\n this.saveToStorage();\n }\n }\n \n this.$nextTick(() => {\n if (this.$refs.input) {\n this.$refs.input.focus();\n }\n });\n },\n \n setupModelPickerWatchers() {\n this.$watch('showModelPicker', (value) => {\n if (value) {\n this.$nextTick(() => {\n const trigger = this.$refs.modelTrigger;\n const dropdown = this.$refs.modelDropdown;\n if (trigger && dropdown) {\n const triggerRect = trigger.getBoundingClientRect();\n const dropdownRect = dropdown.getBoundingClientRect();\n const viewportHeight = window.innerHeight;\n \n if (triggerRect.bottom + dropdownRect.height > viewportHeight && triggerRect.top > dropdownRect.height) {\n this.modelPosition = 'top';\n } else {\n this.modelPosition = 'bottom';\n }\n }\n this.initPreviewIndex();\n if (this.$refs.modelSearchInput) {\n this.$refs.modelSearchInput.focus();\n }\n });\n } else {\n this.modelSearch = '';\n this.previewIndex = -1;\n }\n });\n \n this.$watch('modelSearch', () => this.initPreviewIndex());\n },\n \n // Get display name for a model ID (used in message metadata badges)\n getModelDisplayName(modelId) {\n if (!modelId) return 'Unknown';\n \n // Try to find the model in the models list\n const model = this.models.find(m => m.id === modelId);\n if (model && model.name) {\n return model.name;\n }\n \n // Fallback: format the model ID nicely\n // Handle common patterns like \"provider/model-name\" or \"model-name-version\"\n const parts = modelId.split('/');\n const modelPart = parts[parts.length - 1];\n \n // Clean up common patterns\n return modelPart\n .replace(/-/g, ' ')\n .replace(/_/g, ' ')\n .split(' ')\n .map(word => word.charAt(0).toUpperCase() + word.slice(1))\n .join(' ')\n .substring(0, 30); // Limit length\n },\n };\n}\n",[],[480,1277,1319],"3c53575a-ef19-11f0-9a7f-42dde27851f2","messaging.js","0ba63ece-e2e9-11f0-a009-42dde27851f2",170,["D",1768155211227],"/**\n * Chat App Messaging - Message sending, receiving, and API calls\n */\n\nimport { createMonacoEditor, addCopyButton } from \"../monaco-utils.js\";\n\nexport function createMessagingMethods(marked) {\n return {\n renderMessage(content) {\n return marked.parse(content);\n },\n\n ensureMonacoForViewer() {\n return new Promise((resolve, reject) => {\n if (window.monaco && window.monaco.editor) {\n resolve(window.monaco);\n return;\n }\n\n if (!window.require && (typeof require === 'undefined')) {\n reject(new Error('RequireJS not available'));\n return;\n }\n\n const req = window.require || require;\n\n if (!window._monacoConfigured) {\n req.config({\n paths: { 'vs': 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.30.1/min/vs' }\n });\n window._monacoConfigured = true;\n }\n\n req(['vs/editor/editor.main'], () => {\n if (window.monaco && window.monaco.editor) {\n resolve(window.monaco);\n } else {\n reject(new Error('Monaco loaded but window.monaco.editor is unavailable'));\n }\n }, (err) => reject(err));\n });\n },\n\n ensureCodeViewer() {\n if (this._codeViewer) return this._codeViewer;\n\n const overlay = document.createElement('div');\n overlay.setAttribute('data-monaco-viewer', 'true');\n Object.assign(overlay.style, {\n position: 'fixed',\n inset: '0',\n zIndex: '9999',\n display: 'none',\n backgroundColor: 'rgba(0,0,0,0.55)',\n backdropFilter: 'blur(6px)'\n });\n\n const panel = document.createElement('div');\n Object.assign(panel.style, {\n position: 'absolute',\n left: '50%',\n top: '50%',\n transform: 'translate(-50%, -50%)',\n width: 'min(1100px, calc(100vw - 32px))',\n height: 'min(740px, calc(100vh - 32px))',\n background: 'var(--viewer-bg, #0b1220)',\n border: '1px solid rgba(148,163,184,0.25)',\n borderRadius: '14px',\n overflow: 'hidden',\n boxShadow: '0 20px 60px rgba(0,0,0,0.45)',\n display: 'flex',\n flexDirection: 'column'\n });\n\n const header = document.createElement('div');\n Object.assign(header.style, {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n padding: '10px 12px',\n background: 'rgba(15,23,42,0.9)',\n borderBottom: '1px solid rgba(148,163,184,0.18)',\n color: '#e2e8f0',\n fontFamily: \"ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace\",\n fontSize: '12px'\n });\n\n const title = document.createElement('div');\n title.textContent = 'Code Viewer';\n Object.assign(title.style, { opacity: '0.9' });\n\n const actions = document.createElement('div');\n Object.assign(actions.style, { display: 'flex', gap: '8px', alignItems: 'center' });\n\n const copyBtn = document.createElement('button');\n copyBtn.type = 'button';\n copyBtn.textContent = 'Copy';\n Object.assign(copyBtn.style, {\n padding: '6px 10px',\n borderRadius: '8px',\n border: '1px solid rgba(148,163,184,0.25)',\n background: 'rgba(30,41,59,0.9)',\n color: '#e2e8f0',\n cursor: 'pointer'\n });\n\n const closeBtn = document.createElement('button');\n closeBtn.type = 'button';\n closeBtn.textContent = 'Close';\n Object.assign(closeBtn.style, {\n padding: '6px 10px',\n borderRadius: '8px',\n border: '1px solid rgba(148,163,184,0.25)',\n background: 'rgba(30,41,59,0.9)',\n color: '#e2e8f0',\n cursor: 'pointer'\n });\n\n const body = document.createElement('div');\n Object.assign(body.style, {\n position: 'relative',\n flex: '1',\n minHeight: '0',\n background: '#0b1220'\n });\n\n const editorHost = document.createElement('div');\n Object.assign(editorHost.style, {\n position: 'absolute',\n inset: '0'\n });\n\n const fallbackPre = document.createElement('pre');\n Object.assign(fallbackPre.style, {\n position: 'absolute',\n inset: '0',\n margin: '0',\n padding: '14px',\n overflow: 'auto',\n color: '#e2e8f0',\n background: '#0b1220',\n fontFamily: \"ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace\",\n fontSize: '13px',\n lineHeight: '1.5',\n whiteSpace: 'pre'\n });\n\n actions.appendChild(copyBtn);\n actions.appendChild(closeBtn);\n header.appendChild(title);\n header.appendChild(actions);\n body.appendChild(editorHost);\n body.appendChild(fallbackPre);\n panel.appendChild(header);\n panel.appendChild(body);\n overlay.appendChild(panel);\n\n overlay.addEventListener('click', (e) => {\n if (e.target === overlay) {\n overlay.style.display = 'none';\n }\n });\n closeBtn.addEventListener('click', () => {\n overlay.style.display = 'none';\n });\n\n copyBtn.addEventListener('click', () => {\n const viewer = this._codeViewer;\n const text = viewer && typeof viewer.currentCode === 'string' ? viewer.currentCode : '';\n navigator.clipboard.writeText(text || '');\n });\n\n document.body.appendChild(overlay);\n\n this._codeViewer = {\n overlay,\n editorHost,\n fallbackPre,\n editor: null,\n model: null,\n currentCode: '',\n currentLanguage: 'plaintext'\n };\n return this._codeViewer;\n },\n\n async openCodeViewer(code, language) {\n const viewer = this.ensureCodeViewer();\n viewer.currentCode = code || '';\n viewer.currentLanguage = language || 'plaintext';\n viewer.fallbackPre.textContent = viewer.currentCode;\n viewer.overlay.style.display = 'block';\n\n let monaco;\n try {\n monaco = await this.ensureMonacoForViewer();\n } catch (e) {\n // No Monaco available; fallbackPre stays visible\n return;\n }\n\n // Hide fallback once Monaco is ready\n viewer.fallbackPre.style.display = 'none';\n\n if (!viewer.model) {\n viewer.model = monaco.editor.createModel(viewer.currentCode, viewer.currentLanguage);\n } else {\n try {\n monaco.editor.setModelLanguage(viewer.model, viewer.currentLanguage);\n } catch (e) {\n // ok\n }\n viewer.model.setValue(viewer.currentCode);\n }\n\n if (!viewer.editor) {\n viewer.editor = monaco.editor.create(viewer.editorHost, {\n model: viewer.model,\n theme: (document.documentElement.classList.contains('dark') ? 'vs-dark' : 'vs-dark'),\n automaticLayout: true,\n readOnly: true,\n minimap: { enabled: false },\n scrollBeyondLastLine: false,\n wordWrap: 'on',\n lineNumbers: 'on',\n fontSize: 13,\n fontFamily: \"ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace\",\n renderLineHighlight: 'none'\n });\n } else {\n viewer.editor.setModel(viewer.model);\n try {\n viewer.editor.layout();\n } catch (e) {\n // ok\n }\n }\n\n // Layout after paint (helps when opening the modal)\n setTimeout(() => {\n if (viewer.editor) {\n try {\n viewer.editor.layout();\n } catch (e) {\n // ok\n }\n }\n }, 0);\n },\n\n async hydrateMonacoEditors() {\n // IMPORTANT: Avoid creating many Monaco instances (crashes + perf).\n // Instead: keep code blocks as-is, add lightweight controls, and open a SINGLE Monaco viewer on demand.\n const codeBlocks = this.$el.querySelectorAll('pre code');\n \n for (const block of codeBlocks) {\n const pre = block.parentElement;\n if (!pre || pre.classList.contains('monaco-hydrated')) continue;\n \n const className = block.className;\n const langMatch = className.match(/language-(\\w+)/);\n const language = langMatch ? langMatch[1] : 'plaintext';\n \n const code = block.textContent || '';\n\n // Mark as hydrated first to prevent double processing\n pre.classList.add('monaco-hydrated');\n\n // Copy button (lightweight)\n addCopyButton(pre, code);\n\n // \"Open\" button for a single shared Monaco viewer\n if (!pre.querySelector('.monaco-open-btn')) {\n if (getComputedStyle(pre).position === 'static') {\n pre.style.position = 'relative';\n }\n\n const openBtn = document.createElement('button');\n openBtn.type = 'button';\n openBtn.className = 'monaco-open-btn';\n openBtn.title = 'Open in Monaco viewer';\n openBtn.innerHTML = '';\n Object.assign(openBtn.style, {\n position: 'absolute',\n top: '0.5rem',\n right: '2.75rem', // leaves room for copy button\n padding: '0.25rem 0.5rem',\n borderRadius: '0.25rem',\n border: (document.documentElement.classList.contains('dark') ? '1px solid #475569' : '1px solid #cbd5e1'),\n backgroundColor: (document.documentElement.classList.contains('dark') ? '#334155' : '#f1f5f9'),\n color: (document.documentElement.classList.contains('dark') ? '#f8fafc' : '#475569'),\n cursor: 'pointer',\n opacity: '0',\n transition: 'opacity 0.2s',\n zIndex: '10',\n display: 'flex',\n alignItems: 'center',\n gap: '0.25rem'\n });\n\n openBtn.addEventListener('click', (e) => {\n e.preventDefault();\n e.stopPropagation();\n this.openCodeViewer(code, language);\n });\n\n pre.addEventListener('mouseenter', () => openBtn.style.opacity = '1');\n pre.addEventListener('mouseleave', () => openBtn.style.opacity = '0');\n\n pre.appendChild(openBtn);\n }\n }\n },\n \n adjustHeight() {\n const textarea = this.$refs.input;\n textarea.style.height = 'auto';\n const newHeight = Math.min(textarea.scrollHeight, 200);\n textarea.style.height = newHeight + 'px';\n \n const container = textarea.closest('.chat-input-container');\n if (container) {\n if (newHeight > 50) {\n container.classList.add('multiline');\n } else {\n container.classList.remove('multiline');\n }\n }\n },\n \n triggerFileUpload(type) {\n this.showAttachments = false;\n const fileName = type === 'image' ? 'vacation_photo.jpg' : 'project_report.pdf';\n \n // Generate unique ID with role prefix to prevent ID collision\n const userMessageId = 'user-' + Date.now() + '-' + Math.random().toString(36).substr(2, 9);\n \n this.messages.push({\n id: userMessageId,\n role: 'user',\n content: 'Uploaded ' + fileName,\n attachment: fileName,\n timestamp: new Date().toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' })\n });\n this.$nextTick(() => this.scrollToBottom());\n this.sendChatRequest();\n },\n \n copyMessage(text, messageId) {\n navigator.clipboard.writeText(text).then(() => {\n // Set copied state for this message\n this.copiedMessageId = messageId;\n \n // Clear after 1.5 seconds\n setTimeout(() => {\n this.copiedMessageId = null;\n }, 1500);\n });\n },\n \n deleteMessage(messageId) {\n const msgIndex = this.messages.findIndex(m => m.id === messageId);\n if (msgIndex !== -1) {\n this.messages.splice(msgIndex, 1);\n this.saveToStorage();\n }\n },\n \n // Fork chat from a message - create new chat with all messages up to and including this one\n forkChatFromMessage(messageId) {\n const msgIndex = this.messages.findIndex(m => m.id === messageId);\n if (msgIndex === -1) {\n console.warn('[forkChatFromMessage] Message not found:', messageId);\n return;\n }\n \n // Get all messages up to and including this one\n const forkedMessages = this.messages.slice(0, msgIndex + 1);\n \n // Get the current chat's folder\n const currentChat = this.items.find(i => i.id === this.activeChatId);\n const folderId = currentChat ? currentChat.folderId : null;\n \n // Create new chat in the same folder\n const id = this.nextItemId++;\n const order = this.getMaxOrder(this.items.filter(i => i.folderId === folderId)) + 1;\n \n // Generate name from the last user message or use default\n let chatName = 'Forked Chat';\n const lastUserMsg = forkedMessages.filter(m => m.role === 'user').pop();\n if (lastUserMsg && lastUserMsg.content) {\n chatName = lastUserMsg.content.slice(0, 30) + (lastUserMsg.content.length > 30 ? '...' : '');\n }\n \n const item = { id, name: chatName, folderId, order };\n this.items.push(item);\n \n // Deep copy messages to preserve all message metadata\n const messageCopy = JSON.parse(JSON.stringify(forkedMessages));\n \n // Deep copy the current chat's metadata (settings, system prompt, parameters)\n const currentChatData = this.chats[this.activeChatId];\n let forkedMetadata = {\n createdAt: Date.now(),\n updatedAt: Date.now(),\n forkedFrom: this.activeChatId,\n forkedAt: Date.now()\n };\n \n // Copy all chat settings from the source chat\n if (currentChatData && currentChatData.metadata) {\n const sourceMetadata = currentChatData.metadata;\n forkedMetadata = {\n ...forkedMetadata,\n systemPrompt: sourceMetadata.systemPrompt || '',\n defaultModel: sourceMetadata.defaultModel || null,\n parameters: sourceMetadata.parameters ? JSON.parse(JSON.stringify(sourceMetadata.parameters)) : {},\n appliedTemplateId: sourceMetadata.appliedTemplateId || null\n };\n }\n \n // Create chat with forked messages and settings\n this.chats[id] = {\n messages: messageCopy,\n metadata: forkedMetadata\n };\n \n // Select the new chat\n this.selectChat(id);\n \n console.log('[forkChatFromMessage] Created forked chat:', id, 'with', forkedMessages.length, 'messages and copied settings');\n },\n \n // Delete all messages below (after) this message\n deleteMessagesBelow(messageId) {\n const msgIndex = this.messages.findIndex(m => m.id === messageId);\n if (msgIndex === -1) {\n console.warn('[deleteMessagesBelow] Message not found:', messageId);\n return;\n }\n \n // Get count of messages to delete (for confirmation)\n const deleteCount = this.messages.length - msgIndex - 1;\n \n if (deleteCount === 0) {\n console.log('[deleteMessagesBelow] No messages below this one');\n return;\n }\n \n // Confirm deletion\n if (!confirm('Delete ' + deleteCount + ' message' + (deleteCount === 1 ? '' : 's') + ' below this one?')) {\n return;\n }\n \n // Delete all messages after this one\n this.messages.splice(msgIndex + 1, deleteCount);\n this.saveToStorage();\n \n console.log('[deleteMessagesBelow] Deleted', deleteCount, 'messages');\n },\n \n regenerateMessage(messageId) {\n // Find and delete the assistant message, then re-run inference\n const msgIndex = this.messages.findIndex(m => m.id === messageId);\n if (msgIndex !== -1 && this.messages[msgIndex].role === 'assistant') {\n this.messages.splice(msgIndex, 1);\n this.saveToStorage();\n // Re-run the chat request\n this.sendChatRequest();\n }\n },\n \n stopGenerating() {\n // Stop the currently generating assistant message\n console.log('[Stop] Stopping generation...');\n \n // Stop typing indicator\n this.isTyping = false;\n \n // Cancel the active job if using jobs API\n if (this.activeJobId) {\n console.log('[Stop] Cancelling job:', this.activeJobId);\n if (this.jobs && this.jobs.cancelJob) {\n this.jobs.cancelJob(this.activeJobId)\n .then(() => {\n console.log('[Stop] Job cancelled successfully');\n })\n .catch(err => {\n console.error('[Stop] Error cancelling job:', err);\n });\n }\n // Stop streaming\n if (this.jobs && this.jobs.stopStreaming) {\n this.jobs.stopStreaming(this.activeJobId);\n }\n this.activeJobId = null;\n }\n \n // Find and remove the loading assistant message\n const loadingMsgIndex = this.messages.findIndex(m => m.role === 'assistant' && m.isLoading);\n if (loadingMsgIndex !== -1) {\n // If message has some content, keep it but remove loading state\n if (this.messages[loadingMsgIndex].content && this.messages[loadingMsgIndex].content.trim()) {\n this.messages[loadingMsgIndex].isLoading = false;\n console.log('[Stop] Kept partial message');\n } else {\n // If no content, remove the message entirely\n this.messages.splice(loadingMsgIndex, 1);\n console.log('[Stop] Removed empty loading message');\n }\n }\n \n this.saveToStorage();\n },\n\n async sendMessage() {\n const self = this;\n if (!self.messageInput.trim() || self.isTyping || !self.activeChatId) return;\n \n // Defensive check: ensure messages is always an array\n if (!Array.isArray(self.messages)) {\n console.warn('[sendMessage] messages is not an array, resetting to empty array');\n self.messages = [];\n }\n \n const userText = self.messageInput;\n \n // Check if we should auto-rename (first user message in a \"New Chat\")\n const currentItem = self.items.find(i => i.id === self.activeChatId);\n const shouldRename = currentItem && currentItem.name === 'New Chat' && self.messages.filter(m => m.role === 'user').length === 0;\n \n // Generate unique ID with role prefix to prevent ID collision\n const userMessageId = 'user-' + Date.now() + '-' + Math.random().toString(36).substr(2, 9);\n \n self.messages.push({\n id: userMessageId,\n role: 'user',\n content: userText,\n timestamp: new Date().toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' })\n });\n \n // Auto-rename: just call the rename function directly\n if (shouldRename) {\n const newName = userText.slice(0, 30) + (userText.length > 30 ? '...' : '');\n self.renameChat(self.activeChatId, newName);\n }\n \n self.messageInput = '';\n \n self.$nextTick(() => {\n self.$refs.input.style.height = 'auto';\n self.scrollToBottom();\n // Don't call hydrateMonacoEditors here - let the debounced watcher handle it\n // Calling it synchronously during message updates can corrupt Alpine's DOM tracking\n });\n \n self.sendChatRequest();\n },\n \n async sendChatRequest() {\n this.isTyping = true;\n this.scrollToBottom();\n \n // Defensive check: ensure messages is always an array\n if (!Array.isArray(this.messages)) {\n console.warn('[sendChatRequest] messages is not an array, resetting to empty array');\n this.messages = [];\n }\n \n // Capture context for callbacks\n const self = this;\n \n try {\n // Get chat parameters from settings\n const chatParams = this.getChatParameters ? this.getChatParameters() : {};\n const systemPrompt = this.getSystemPrompt ? this.getSystemPrompt() : '';\n \n // Build messages array with optional system prompt\n const apiMessages = [];\n \n // Add system prompt if set\n if (systemPrompt && systemPrompt.trim()) {\n apiMessages.push({\n role: 'system',\n content: systemPrompt.trim()\n });\n }\n \n // Add conversation messages\n this.messages\n .filter(msg => msg.role === 'user' || msg.role === 'assistant')\n .forEach(msg => {\n apiMessages.push({\n role: msg.role,\n content: msg.content\n });\n });\n \n // Get model ID for metadata\n const modelId = this.selectedModel ? this.selectedModel.id : 'llama-3.3-70b-versatile';\n \n // Store message metadata for tracing (create BEFORE using it)\n const messageMeta = {\n model: modelId,\n temperature: chatParams.temperature,\n maxTokens: chatParams.maxTokens,\n parameters: { ...chatParams },\n timestamp: new Date().toISOString()\n };\n \n // Check streaming setting (default to true if not set)\n const useStreaming = this.settings?.useStreaming !== false;\n \n // Create assistant message placeholder with unique ID and metadata\n // Generate unique ID with role prefix to prevent ID collision with user messages\n const assistantMessageId = 'assistant-' + Date.now() + '-' + Math.random().toString(36).substr(2, 9);\n const assistantMessage = {\n id: assistantMessageId,\n role: 'assistant',\n content: '',\n timestamp: new Date().toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' }),\n metadata: messageMeta,\n isLoading: !useStreaming // Show loading state for non-streaming\n };\n this.messages.push(assistantMessage);\n this.isTyping = false;\n \n let assistantContent = '';\n \n // Throttle UI updates to prevent overwhelming Alpine's reactivity\n // Update UI at most every 50ms during streaming\n let lastUpdateTime = 0;\n let pendingUpdate = null;\n const UPDATE_THROTTLE_MS = 50;\n \n function throttledUpdate() {\n var now = Date.now();\n if (now - lastUpdateTime >= UPDATE_THROTTLE_MS) {\n // Enough time has passed, update immediately\n lastUpdateTime = now;\n if (pendingUpdate) {\n clearTimeout(pendingUpdate);\n pendingUpdate = null;\n }\n // Actually update the message content\n if (!Array.isArray(self.messages)) {\n return;\n }\n var msgIndex = self.messages.findIndex(function(m) { return m.id === assistantMessageId; });\n if (msgIndex !== -1) {\n self.messages[msgIndex].content = assistantContent;\n }\n self.scrollToBottom();\n } else if (!pendingUpdate) {\n // Schedule an update for when throttle period ends\n pendingUpdate = setTimeout(function() {\n pendingUpdate = null;\n throttledUpdate();\n }, UPDATE_THROTTLE_MS - (now - lastUpdateTime));\n }\n }\n \n // Get provider from model's stored config, fallback to parsing model ID\n var modelConfig = null;\n if (this.providerSettings && this.providerSettings.models) {\n modelConfig = this.providerSettings.models.find(function(m) { return m.id === modelId; });\n }\n if (!modelConfig && this.models) {\n modelConfig = this.models.find(function(m) { return m.id === modelId; });\n }\n var provider = (modelConfig && modelConfig.provider) \n ? modelConfig.provider \n : (modelId.includes('/') ? modelId.split('/')[0] : 'groq');\n var apiKey = this.getApiKey ? this.getApiKey(provider) : '';\n \n // Get base URL for custom providers\n var baseUrl = null;\n if (this.providerSettings && this.providerSettings.providers && this.providerSettings.providers[provider]) {\n baseUrl = this.providerSettings.providers[provider].baseUrl;\n }\n \n console.log('[Chat] Model:', modelId, '| Provider:', provider, '| API Key:', apiKey ? '***set***' : '(empty)', '| Base URL:', baseUrl || '(default)');\n \n // Create orchestrator job to track this chat request\n var threadJob = null;\n if (this.createThreadJob) {\n threadJob = this.createThreadJob(this.activeChatId, 'chat', {\n messages: apiMessages,\n model: modelId,\n provider: provider\n }, {\n metadata: {\n assistantMessageId: assistantMessageId,\n messageCount: apiMessages.length\n }\n });\n \n // Check for blockers before sending\n var blocker = this.checkJobBlockers ? this.checkJobBlockers(threadJob.id) : null;\n if (blocker) {\n console.log('[Orchestrator] Job blocked:', blocker.type);\n if (this.updateJobStatus) {\n this.updateJobStatus(threadJob.id, 'blocked', { blocker: blocker });\n }\n \n // Show blocked error in UI\n if (Array.isArray(self.messages)) {\n var msgIndex = self.messages.findIndex(function(m) { return m.id === assistantMessageId; });\n if (msgIndex !== -1) {\n self.messages[msgIndex] = {\n id: assistantMessageId,\n role: 'error',\n content: blocker.message + '. Please add your API key in Settings → Models.',\n isError: true,\n isApiKeyError: blocker.type === 'api_key_missing',\n threadJobId: threadJob.id,\n timestamp: Date.now()\n };\n }\n }\n self.isTyping = false;\n self.saveToStorage();\n return;\n }\n \n // Mark job as running\n if (this.updateJobStatus) {\n this.updateJobStatus(threadJob.id, 'running');\n }\n }\n \n var job = await this.jobs.createJob('chat', {\n messages: apiMessages,\n model: modelId,\n provider: provider, // Send provider to backend\n temperature: chatParams.temperature,\n maxTokens: chatParams.maxTokens,\n topP: chatParams.topP,\n frequencyPenalty: chatParams.frequencyPenalty,\n presencePenalty: chatParams.presencePenalty,\n systemPrompt: chatParams.systemPrompt,\n reasoningEffort: chatParams.reasoningEffort,\n webSearch: chatParams.webSearch,\n codeExecution: chatParams.codeExecution,\n imageDetail: chatParams.imageDetail,\n modelVersion: chatParams.modelVersion,\n apiKey: apiKey, // Pass API key to backend\n baseUrl: baseUrl, // Pass base URL for custom providers\n stream: useStreaming // Pass streaming preference\n });\n \n // Store job ID for potential cancellation\n this.activeJobId = job.id;\n console.log('[Job created]:', job.id);\n \n // Link backend job to orchestrator job\n if (threadJob && this.updateJobStatus) {\n threadJob.metadata.backendJobId = job.id;\n this.updateJobStatus(threadJob.id, 'streaming');\n }\n \n // Subscribe to job stream with captured context\n this.jobs.streamJob(job.id, {\n onData: function(data) {\n // Handle streaming data chunks\n if (data.content) {\n assistantContent += data.content;\n // Use throttled update to prevent overwhelming Alpine\n throttledUpdate();\n \n // Update orchestrator progress\n if (threadJob && self.updateJobProgress) {\n self.updateJobProgress(threadJob.id, assistantContent.length, assistantContent);\n }\n }\n \n // Clear loading state on first data chunk (for non-streaming mode)\n if (!Array.isArray(self.messages)) return;\n const msgIndex = self.messages.findIndex(function(m) { return m.id === assistantMessageId; });\n if (msgIndex !== -1 && self.messages[msgIndex].isLoading) {\n self.messages[msgIndex].isLoading = false;\n }\n },\n onJob: function(jobData) {\n // Handle job status changes\n console.log('[Job status]:', jobData.status);\n \n if (jobData.status === 'completed') {\n // Clear any pending throttled update\n if (pendingUpdate) {\n clearTimeout(pendingUpdate);\n pendingUpdate = null;\n }\n \n // Update orchestrator job status\n if (threadJob && self.updateJobStatus) {\n self.updateJobStatus(threadJob.id, 'completed', { \n result: jobData.result \n });\n }\n \n // Final result available\n console.log('[Chat complete]:', jobData.result);\n \n // Parse the message to extract thinking/reasoning\n if (jobData.result) {\n var parsed = self.parseMessage(jobData.result);\n console.log('[Parsed message]:', parsed);\n console.log('[Has reasoning?]:', parsed.hasReasoning, '|', parsed.reasoning);\n console.log('[Has thinking?]:', parsed.hasThinking, '|', parsed.thinking);\n console.log('[Clean content]:', parsed.content);\n }\n \n // Make sure final content is set\n if (jobData.result && jobData.result.content) {\n // Defensive check: ensure messages array still exists\n if (!Array.isArray(self.messages)) {\n console.warn('[Stream onJob] messages array lost, cannot update final content');\n return;\n }\n const msgIndex = self.messages.findIndex(function(m) { return m.id === assistantMessageId; });\n if (msgIndex !== -1) {\n // Store the full result object (including reasoning, tools, etc)\n self.messages[msgIndex].content = jobData.result.content;\n self.messages[msgIndex].reasoning = jobData.result.reasoning;\n self.messages[msgIndex].tools = jobData.result.tools || jobData.result.executedTools || [];\n self.messages[msgIndex].isLoading = false; // Clear loading state\n \n console.log('[Message stored with reasoning]:', !!self.messages[msgIndex].reasoning);\n }\n }\n \n // Save to chat storage\n self.saveToStorage();\n self.scrollToBottom();\n } else if (jobData.status === 'error') {\n console.error('[Job error]:', jobData.error, jobData);\n \n // Extract error message from various possible locations\n var errorMsg = jobData.error || jobData.message || jobData.details || 'An error occurred. Please check your settings and try again.';\n \n // Normalize error message for better detection\n var errorMsgLower = String(errorMsg).toLowerCase();\n var isApiKeyError = errorMsgLower.includes('api') && \n (errorMsgLower.includes('key') || errorMsgLower.includes('configured') || \n errorMsgLower.includes('not set') || errorMsgLower.includes('missing') ||\n errorMsgLower.includes('401') || errorMsgLower.includes('403') ||\n errorMsgLower.includes('unauthorized') || errorMsgLower.includes('forbidden'));\n \n // Determine provider name for better error messages\n var providerName = 'provider';\n if (self.selectedModel && self.selectedModel.provider) {\n var providerMap = {\n 'groq': 'Groq',\n 'openai': 'OpenAI',\n 'anthropic': 'Anthropic',\n 'custom': 'Custom Provider'\n };\n providerName = providerMap[self.selectedModel.provider] || self.selectedModel.provider;\n }\n \n // Create user-friendly error message for display\n var displayMsg = errorMsg;\n if (isApiKeyError && !errorMsg.includes('Settings')) {\n displayMsg = providerName + ' API key is missing or invalid. Please add your API key in Settings → Models.';\n }\n \n // Replace the placeholder loading message with an error card\n if (Array.isArray(self.messages)) {\n var msgIndex = self.messages.findIndex(function(m) { return m.id === assistantMessageId; });\n if (msgIndex !== -1) {\n self.messages[msgIndex] = {\n id: assistantMessageId,\n role: 'error',\n content: displayMsg,\n isError: true,\n isApiKeyError: isApiKeyError,\n threadJobId: threadJob ? threadJob.id : null,\n timestamp: Date.now()\n };\n }\n }\n \n // Update orchestrator job status\n if (threadJob && self.updateJobStatus) {\n var blockerType = isApiKeyError ? 'api_key_missing' : 'provider_error';\n self.updateJobStatus(threadJob.id, isApiKeyError ? 'blocked' : 'error', { \n error: errorMsg,\n blocker: isApiKeyError ? {\n type: blockerType,\n message: displayMsg,\n provider: provider\n } : null\n });\n }\n \n // Save to chat storage\n self.saveToStorage();\n self.scrollToBottom();\n \n // Also log for debugging\n console.error('[Chat Error]', errorMsg);\n \n // Clear typing indicator\n self.isTyping = false;\n }\n },\n onError: function(error) {\n console.error('[Stream error]:', error);\n \n // Remove the placeholder message\n if (Array.isArray(self.messages)) {\n const msgIndex = self.messages.findIndex(function(m) { return m.id === assistantMessageId; });\n if (msgIndex !== -1) {\n self.messages.splice(msgIndex, 1);\n }\n }\n \n // Show error toast\n if (window.toast) {\n window.toast('Stream Error', {\n description: error.message || 'An error occurred while streaming the response.',\n type: 'danger'\n });\n }\n }\n });\n \n } catch (error) {\n console.error('Chat error:', error);\n this.isTyping = false;\n \n // Check if it's an API key error\n const isApiKeyError = error.message && (\n error.message.includes('messageMeta') ||\n error.message.includes('API') ||\n error.message.includes('key') ||\n error.message.includes('401') ||\n error.message.includes('403')\n );\n \n // Show user-friendly error toast\n if (window.toast) {\n if (isApiKeyError || !this.getApiKey('groq')) {\n window.toast('API Key Required', {\n description: 'Please add your Groq API key in the settings to use this chat.',\n type: 'danger'\n });\n } else {\n window.toast('Error', {\n description: error.message || 'An unexpected error occurred. Please try again.',\n type: 'danger'\n });\n }\n }\n \n this.scrollToBottom();\n }\n },\n \n scrollToBottom() {\n if (!this.settings.autoScroll) {\n return;\n }\n const messagesContainer = document.getElementById('chat-messages');\n if (messagesContainer) {\n messagesContainer.scrollTop = messagesContainer.scrollHeight;\n }\n },\n \n // Toggle thinking/reasoning visibility for a message\n toggleThinking(messageId) {\n if (!this.thinkingVisible) {\n this.thinkingVisible = {};\n }\n this.thinkingVisible[messageId] = !this.thinkingVisible[messageId];\n },\n \n // Check if thinking is visible for a message\n isThinkingVisible(messageId) {\n return this.thinkingVisible && this.thinkingVisible[messageId];\n },\n \n handleKeydown(event) {\n if (event.key === 'Enter' && !event.shiftKey) {\n event.preventDefault();\n this.sendMessage();\n }\n },\n };\n}\n",[],[480,1277,1327],"0bbfc7fe-e2e9-11f0-a62a-42dde27851f2","jobs.js","0bbfc8c6-e2e9-11f0-a62a-42dde27851f2",28,["D",1766815100048],"// Jobs API Module - Frontend integration for async jobs\nexport function jobsModule() {\n return {\n // Active jobs tracking\n jobs: {},\n activeStreams: {},\n\n // Create a new job\n async createJob(type, input) {\n try {\n const response = await fetch('/api/jobs', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({ type, input })\n });\n \n if (!response.ok) {\n throw new Error('Failed to create job: ' + response.statusText);\n }\n \n const job = await response.json();\n this.jobs[job.id] = job;\n \n console.log('[Jobs] Created job:', job.id, job.status);\n return job;\n } catch (error) {\n console.error('[Jobs] Error creating job:', error);\n throw error;\n }\n },\n\n // Get job status\n async getJob(jobId) {\n try {\n const response = await fetch('/api/jobs/' + jobId);\n \n if (!response.ok) {\n throw new Error('Job not found');\n }\n \n const job = await response.json();\n this.jobs[jobId] = job;\n return job;\n } catch (error) {\n console.error('[Jobs] Error fetching job:', error);\n throw error;\n }\n },\n\n // List all jobs\n async listJobs(status = null) {\n try {\n const url = status ? '/api/jobs?status=' + status : '/api/jobs';\n const response = await fetch(url);\n \n if (!response.ok) {\n throw new Error('Failed to list jobs');\n }\n \n const data = await response.json();\n return data.jobs || [];\n } catch (error) {\n console.error('[Jobs] Error listing jobs:', error);\n throw error;\n }\n },\n\n // Cancel a job\n async cancelJob(jobId) {\n try {\n const response = await fetch('/api/jobs/' + jobId + '/cancel', {\n method: 'POST'\n });\n \n if (!response.ok) {\n throw new Error('Failed to cancel job');\n }\n \n const job = await response.json();\n this.jobs[jobId] = job;\n console.log('[Jobs] Cancelled job:', jobId);\n return job;\n } catch (error) {\n console.error('[Jobs] Error cancelling job:', error);\n throw error;\n }\n },\n\n // Subscribe to job updates via SSE\n streamJob(jobId, handlers = {}) {\n // Check if already streaming\n if (this.activeStreams[jobId]) {\n console.warn('[Jobs] Already streaming job:', jobId);\n return this.activeStreams[jobId];\n }\n\n const eventSource = new EventSource('/api/jobs/' + jobId + '/stream');\n this.activeStreams[jobId] = eventSource;\n\n // Handle job status updates\n eventSource.addEventListener('job', (event) => {\n try {\n const data = JSON.parse(event.data);\n this.jobs[jobId] = { ...this.jobs[jobId], ...data };\n \n console.log('[Jobs] Job update:', jobId, data.status);\n \n if (handlers.onJob) {\n handlers.onJob(data);\n }\n\n // Auto-close stream when job completes\n if (data.status === 'completed' || data.status === 'error' || data.status === 'cancelled') {\n this.stopStreaming(jobId);\n }\n } catch (error) {\n console.error('[Jobs] Error parsing job event:', error);\n }\n });\n\n // Handle streaming data chunks\n eventSource.addEventListener('data', (event) => {\n try {\n const data = JSON.parse(event.data);\n \n if (handlers.onData) {\n handlers.onData(data);\n }\n } catch (error) {\n console.error('[Jobs] Error parsing data event:', error);\n }\n });\n\n // Handle ping (keep-alive)\n eventSource.addEventListener('ping', () => {\n // Keep connection alive\n });\n\n // Handle errors\n eventSource.onerror = (error) => {\n console.error('[Jobs] Stream error for job:', jobId, error);\n \n if (handlers.onError) {\n handlers.onError(error);\n }\n \n this.stopStreaming(jobId);\n };\n\n return eventSource;\n },\n\n // Stop streaming a job\n stopStreaming(jobId) {\n if (this.activeStreams[jobId]) {\n this.activeStreams[jobId].close();\n delete this.activeStreams[jobId];\n console.log('[Jobs] Stopped streaming job:', jobId);\n }\n },\n\n // Stop all active streams\n stopAllStreams() {\n Object.keys(this.activeStreams).forEach(jobId => {\n this.stopStreaming(jobId);\n });\n },\n\n // Helper: Create and stream a chat job\n async createAndStreamChatJob(messages, options = {}) {\n const job = await this.createJob('chat', {\n messages,\n model: options.model,\n provider: options.provider,\n temperature: options.temperature,\n maxTokens: options.maxTokens\n });\n\n // Immediately start streaming\n this.streamJob(job.id, options.handlers);\n\n return job;\n }\n };\n}\n\n",[],[480,1277,1335],"3c25ce16-ef19-11f0-8419-42dde27851f2","index.js","0bca6a1a-e2e9-11f0-b941-42dde27851f2",165,["D",1768155211059],"/**\n * Chat App - Main Entry Point\n * Combines all modules into a single Alpine.js component\n */\n\nimport { marked } from \"https://esm.sh/marked\";\nimport Alpine from \"https://esm.sh/alpinejs@3.12.3\";\n\nimport { createInitialState, MODELS } from \"./state.js\";\nimport { createStorageMethods } from \"./storage.js\";\nimport { createFolderMethods } from \"./folders.js\";\nimport { createChatMethods } from \"./chats.js\";\nimport { createEditingMethods } from \"./editing.js\";\nimport { createDragDropMethods } from \"./dragdrop.js\";\nimport { createModelMethods } from \"./models.js\";\nimport { createMessagingMethods } from \"./messaging.js\";\nimport { createSettingsMethods } from \"./settings.js\";\nimport { createChatSettingsMethods } from \"./chatSettings.js\";\nimport { createProviderSettingsMethods } from \"./providerSettings.js\";\nimport { createTemplatesMethods } from \"./templates.js\";\nimport { createThreadsMixin, JobStatus, ThreadEvent, OrchestratorEvent, parseMessage, getDisplayContent, getThinking } from \"./threads.js\";\nimport { jobsModule } from \"./jobs.js\";\n\nfunction chatApp() {\n // Get initial state\n const state = createInitialState();\n \n // Get all method objects\n const storageMethods = createStorageMethods();\n const folderMethods = createFolderMethods();\n const chatMethods = createChatMethods();\n const editingMethods = createEditingMethods();\n const dragDropMethods = createDragDropMethods();\n const modelMethods = createModelMethods();\n const messagingMethods = createMessagingMethods(marked);\n const settingsMethods = createSettingsMethods();\n const chatSettingsMethods = createChatSettingsMethods();\n const providerSettingsMethods = createProviderSettingsMethods();\n const templatesMethods = createTemplatesMethods();\n const threadsMixin = createThreadsMixin();\n const jobs = jobsModule();\n \n // Return the combined component object\n // All methods use 'this' which Alpine will bind correctly\n return {\n // Spread all state properties\n ...state,\n \n // Spread all methods from modules\n ...storageMethods,\n ...folderMethods,\n ...chatMethods,\n ...editingMethods,\n ...dragDropMethods,\n ...modelMethods,\n ...messagingMethods,\n ...settingsMethods,\n ...chatSettingsMethods,\n ...providerSettingsMethods,\n ...templatesMethods,\n ...threadsMixin,\n \n // Job/thread status constants for templates\n JobStatus,\n ThreadEvent,\n OrchestratorEvent, // Backwards compat\n \n // Message parsing utilities\n parseMessage,\n getDisplayContent,\n getThinking,\n \n // Jobs API\n jobs,\n \n // Computed property for filtered models\n get filteredModels() {\n if (this.modelSearch === '') return this.models;\n const search = this.modelSearch.toLowerCase();\n return this.models.filter(m => \n m.name.toLowerCase().includes(search) ||\n m.desc.toLowerCase().includes(search) ||\n m.id.toLowerCase().includes(search)\n );\n },\n \n // Computed property to check if we should show \"Generate Response\" button\n // Shows when user's message is last and there's no assistant response after it\n get shouldShowGenerateButton() {\n if (!this.activeChatId) return false;\n if (!Array.isArray(this.messages) || this.messages.length === 0) return false;\n const lastMessage = this.messages[this.messages.length - 1];\n return lastMessage && lastMessage.role === 'user' && !this.isTyping;\n },\n \n // =========================================================================\n // Initialization\n // =========================================================================\n \n async init() {\n console.log('Chatter initialized');\n \n // Set default model first (may be overridden by chat-specific model in loadFromStorage)\n if (this.models.length > 0) {\n this.selectedModel = this.models[0];\n }\n \n this.loadSettings();\n this.loadFromStorage(); // This will restore chat-specific model in $nextTick\n \n // Initialize the threads manager\n this.initThreads();\n \n // Load provider settings (API keys, base URLs, models)\n this.loadProviderSettings();\n \n // Load model configs from API\n this.loadModelConfigs();\n \n marked.setOptions({\n highlight: function(code, lang) { return code; },\n breaks: true\n });\n \n // Debounced save function to prevent excessive saves during streaming\n let saveTimeout = null;\n const debouncedSave = () => {\n if (saveTimeout) clearTimeout(saveTimeout);\n saveTimeout = setTimeout(() => {\n this.saveToStorage();\n }, 500); // Save 500ms after last change\n };\n \n // Debounced Monaco hydration - only run after content stops changing\n // This prevents excessive DOM manipulation during streaming\n let hydrateTimeout = null;\n const debouncedHydrate = () => {\n if (hydrateTimeout) clearTimeout(hydrateTimeout);\n hydrateTimeout = setTimeout(() => {\n this.hydrateMonacoEditors();\n }, 1000); // Wait 1 second after last change before hydrating\n };\n \n // Watch for storage changes\n this.$watch('folders', () => this.saveToStorage(), { deep: true });\n this.$watch('items', () => this.saveToStorage(), { deep: true });\n // Note: We don't watch 'chats' because saveToStorage() updates it,\n // which would create a circular dependency. Instead we save when messages change.\n \n this.$watch('messages', () => {\n // Defensive check: ensure messages is always an array\n if (!Array.isArray(this.messages)) {\n console.error('[Watch] CRITICAL: messages is not an array! Type:', typeof this.messages);\n console.error('[Watch] This should never happen - messages array reference was lost');\n }\n // Use debounced hydration to avoid excessive DOM manipulation during streaming\n this.$nextTick(() => debouncedHydrate());\n // Debounced save to prevent excessive saves during streaming\n debouncedSave();\n }, { deep: true });\n \n // Setup model picker watchers\n this.setupModelPickerWatchers();\n\n this.$nextTick(() => {\n this.scrollToBottom();\n if (this.$refs.input) {\n this.$refs.input.style.height = 'auto';\n }\n setTimeout(() => this.hydrateMonacoEditors(), 500);\n });\n },\n };\n}\n\n// Register Dark Mode Store\nAlpine.store('darkMode', {\n enabled: false,\n preference: 'system', // 'light', 'dark', or 'system'\n \n init() {\n // Check localStorage for saved preference\n const stored = localStorage.getItem('chatter-theme-preference');\n if (stored === 'light') {\n this.preference = 'light';\n this.enabled = false;\n } else if (stored === 'dark') {\n this.preference = 'dark';\n this.enabled = true;\n } else {\n // System preference\n this.preference = 'system';\n this.enabled = window.matchMedia('(prefers-color-scheme: dark)').matches;\n }\n \n // Listen for system preference changes\n window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {\n // Only update if using system preference\n if (this.preference === 'system') {\n this.enabled = e.matches;\n }\n });\n },\n \n setDark() {\n this.preference = 'dark';\n this.enabled = true;\n localStorage.setItem('chatter-theme-preference', 'dark');\n // Update documentElement class (for CSS that targets html.dark or .dark ancestors)\n document.documentElement.classList.add('dark');\n },\n \n setLight() {\n this.preference = 'light';\n this.enabled = false;\n localStorage.setItem('chatter-theme-preference', 'light');\n // Remove dark class from documentElement\n document.documentElement.classList.remove('dark');\n },\n \n useSystem() {\n this.preference = 'system';\n this.enabled = window.matchMedia('(prefers-color-scheme: dark)').matches;\n localStorage.removeItem('chatter-theme-preference');\n // Update documentElement class based on system preference\n if (this.enabled) {\n document.documentElement.classList.add('dark');\n } else {\n document.documentElement.classList.remove('dark');\n }\n }\n});\n\n// Register Text Size Store\nAlpine.store('textSize', {\n size: 'medium', // 'small', 'medium', or 'large'\n \n init() {\n // Check localStorage for saved preference\n const stored = localStorage.getItem('chatter-text-size');\n if (stored && ['small', 'medium', 'large'].includes(stored)) {\n this.size = stored;\n this.applySize(stored);\n }\n },\n \n applySize(size) {\n // Remove all size classes from body\n document.body.classList.remove('text-size-small', 'text-size-medium', 'text-size-large');\n // Add the new size class to body\n document.body.classList.add('text-size-' + size);\n },\n \n setSize(size) {\n if (!['small', 'medium', 'large'].includes(size)) return;\n this.size = size;\n localStorage.setItem('chatter-text-size', size);\n this.applySize(size);\n }\n});\n\n// Register with Alpine and start\nAlpine.data('chatApp', chatApp);\nAlpine.start();\n\n// =========================================================================\n// Global Toast Helper\n// =========================================================================\n// Simple toast implementation using browser notifications or console\n// Can be replaced with a proper toast UI component if needed\nwindow.toast = function(message, options) {\n if (typeof options === 'undefined') options = {};\n var type = typeof options === 'string' ? options : (options.type || 'default');\n var description = options.description || '';\n \n // Create toast element\n var toast = document.createElement('div');\n toast.className = 'toast-notification toast-' + type;\n toast.innerHTML = '

' +\n '' + message + '' +\n (description ? '' + description + '' : '') +\n '

';\n \n // Style the toast\n toast.style.cssText = 'position: fixed; bottom: 20px; right: 20px; z-index: 9999; ' +\n 'padding: 12px 20px; border-radius: 8px; font-size: 14px; font-weight: 500; ' +\n 'box-shadow: 0 4px 12px rgba(0,0,0,0.15); transition: all 0.3s ease; ' +\n 'transform: translateY(100px); opacity: 0; max-width: 320px;';\n \n // Set colors based on type\n switch(type) {\n case 'success':\n toast.style.background = '#10b981';\n toast.style.color = '#ffffff';\n break;\n case 'error':\n case 'danger':\n toast.style.background = '#ef4444';\n toast.style.color = '#ffffff';\n break;\n case 'warning':\n toast.style.background = '#f59e0b';\n toast.style.color = '#ffffff';\n break;\n case 'info':\n toast.style.background = '#3b82f6';\n toast.style.color = '#ffffff';\n break;\n default:\n toast.style.background = '#374151';\n toast.style.color = '#ffffff';\n }\n \n document.body.appendChild(toast);\n \n // Animate in\n setTimeout(function() {\n toast.style.transform = 'translateY(0)';\n toast.style.opacity = '1';\n }, 10);\n \n // Remove after delay\n setTimeout(function() {\n toast.style.transform = 'translateY(100px)';\n toast.style.opacity = '0';\n setTimeout(function() {\n if (toast.parentNode) {\n toast.parentNode.removeChild(toast);\n }\n }, 300);\n }, 3000);\n};\n\nwindow.showToast = function(text, type, timeout) {\n if (typeof type === 'undefined') type = 'info';\n window.toast(text, { type: type === 'error' ? 'danger' : type });\n};\n\n// Export for potential external use\nexport { chatApp, MODELS };\n",[],[480,1277,1343],"0b9e86ca-e2e9-11f0-b141-42dde27851f2","folders.js","0b9e8760-e2e9-11f0-b141-42dde27851f2",23,["D",1766815099862],"/**\n * Chat App Folders - Folder operations\n */\n\nexport function createFolderMethods() {\n return {\n createFolder(parentId = null) {\n const id = this.nextFolderId++;\n const order = this.getMaxOrder(this.folders.filter(f => f.parentId === parentId)) + 1;\n const folder = { id, name: 'New Folder', parentId, collapsed: false, order };\n this.folders.push(folder);\n this.$nextTick(() => this.startEditingFolder(id, folder.name));\n return folder;\n },\n \n deleteFolder(folderId) {\n const descendantIds = this.getAllDescendantFolderIds(folderId);\n const allFolderIds = [folderId, ...descendantIds];\n \n // Delete chats in these folders\n const chatsToDelete = this.items.filter(item => allFolderIds.includes(item.folderId));\n for (const chat of chatsToDelete) {\n delete this.chats[chat.id];\n }\n \n this.items = this.items.filter(item => !allFolderIds.includes(item.folderId));\n this.folders = this.folders.filter(f => !allFolderIds.includes(f.id));\n this.folderMenuOpen = null;\n },\n \n getAllDescendantFolderIds(folderId) {\n const children = this.folders.filter(f => f.parentId === folderId);\n let descendants = children.map(c => c.id);\n for (const child of children) {\n descendants = [...descendants, ...this.getAllDescendantFolderIds(child.id)];\n }\n return descendants;\n },\n \n toggleFolderCollapsed(folderId) {\n const folder = this.folders.find(f => f.id === folderId);\n if (folder) folder.collapsed = !folder.collapsed;\n },\n \n getFolderDepth(folderId) {\n let depth = 0;\n let folder = this.folders.find(f => f.id === folderId);\n while (folder && folder.parentId !== null) {\n depth++;\n folder = this.folders.find(f => f.id === folder.parentId);\n }\n return depth;\n },\n \n canNestIn(folderId) {\n return this.getFolderDepth(folderId) < 2;\n },\n \n getRootFolders() {\n return this.folders.filter(f => f.parentId === null).sort((a, b) => a.order - b.order);\n },\n \n getChildFolders(parentId) {\n return this.folders.filter(f => f.parentId === parentId).sort((a, b) => a.order - b.order);\n },\n \n getMaxOrder(items) {\n if (!items.length) return 0;\n return Math.max(...items.map(i => i.order || 0));\n },\n };\n}\n",[],[480,1277,1351],"3c2f3c1c-ef19-11f0-8419-42dde27851f2","editing.js","0b986402-e2e9-11f0-a5e5-42dde27851f2",167,["D",1768155211114],"/**\n * Chat App Editing - Inline editing for folders, items, and messages\n */\n\nexport function createEditingMethods() {\n return {\n // Folder editing\n startEditingFolder(folderId, currentName) {\n this.editingFolderId = folderId;\n this.editingFolderName = currentName || '';\n this.$nextTick(() => {\n // Use a small delay for iOS to properly show keyboard\n setTimeout(() => {\n const input = document.querySelector('[data-folder-edit=\"' + folderId + '\"]');\n if (input) {\n input.focus();\n input.select();\n // iOS sometimes needs a second focus attempt\n if (/iPhone|iPad|iPod/.test(navigator.userAgent)) {\n setTimeout(() => input.focus(), 50);\n }\n }\n }, 10);\n });\n },\n \n commitEditingFolder() {\n if (!this.editingFolderId) return;\n const folder = this.folders.find(f => f.id === this.editingFolderId);\n if (folder) folder.name = (this.editingFolderName || '').trim() || 'New Folder';\n this.cancelEditingFolder();\n },\n \n cancelEditingFolder() {\n this.editingFolderId = null;\n this.editingFolderName = '';\n },\n \n // Item editing\n startEditingItem(itemId, currentName) {\n this.editingItemId = itemId;\n this.editingItemName = currentName || '';\n this.$nextTick(() => {\n // Use a small delay for iOS to properly show keyboard\n setTimeout(() => {\n const input = document.querySelector('[data-item-edit=\"' + itemId + '\"]');\n if (input) {\n input.focus();\n input.select();\n // iOS sometimes needs a second focus attempt\n if (/iPhone|iPad|iPod/.test(navigator.userAgent)) {\n setTimeout(() => input.focus(), 50);\n }\n }\n }, 10);\n });\n },\n \n commitEditingItem() {\n if (!this.editingItemId) return;\n const item = this.items.find(i => i.id === this.editingItemId);\n if (item) item.name = (this.editingItemName || '').trim() || 'New Chat';\n this.cancelEditingItem();\n },\n \n cancelEditingItem() {\n this.editingItemId = null;\n this.editingItemName = '';\n },\n \n // Message editing\n startEditingMessage(messageId, content) {\n this.editingMessageId = messageId;\n this.editingMessageContent = content;\n \n // Focus the contenteditable element\n this.$nextTick(() => {\n const el = document.querySelector('[data-message-id=\"' + messageId + '\"]');\n if (el) {\n el.focus();\n // Move cursor to end\n const range = document.createRange();\n const sel = window.getSelection();\n range.selectNodeContents(el);\n range.collapse(false);\n sel.removeAllRanges();\n sel.addRange(range);\n }\n });\n },\n \n commitEditingMessage(event) {\n if (!this.editingMessageId) return;\n \n const msgIndex = this.messages.findIndex(m => m.id === this.editingMessageId);\n if (msgIndex !== -1 && event && event.target) {\n // Get text content - innerText preserves line breaks in

\n        const newContent = event.target.innerText;\n        if (newContent && newContent.trim()) {\n          this.messages[msgIndex].content = newContent;\n          this.saveToStorage();\n        }\n      }\n      this.editingMessageId = null;\n      this.editingMessageContent = '';\n    },\n    \n    cancelEditingMessage() {\n      // Restore original content by just clearing editing state\n      // Alpine will re-render with the original message.content\n      this.editingMessageId = null;\n      this.editingMessageContent = '';\n    },\n  };\n}\n",[],[480,1277,1359],"3c1a014e-ef19-11f0-ba8d-42dde27851f2","dragdrop.js","0b8a59c0-e2e9-11f0-b941-42dde27851f2",163,["D",1768155210997],"/**\n * Chat App Drag & Drop - Folder and item drag/drop functionality\n * Supports both mouse (HTML5 Drag API) and touch events for mobile\n */\n\nexport function createDragDropMethods() {\n  return {\n    // Touch drag state\n    touchDragActive: false,\n    touchDragElement: null,\n    touchDragGhost: null,\n    touchStartY: 0,\n    touchStartX: 0,\n    touchScrollTimeout: null,\n    \n    // Initialize touch drag (call this on touchstart after a delay)\n    initTouchDrag(e, type, id) {\n      if (this.touchDragActive) return;\n      \n      const touch = e.touches[0];\n      this.touchStartX = touch.clientX;\n      this.touchStartY = touch.clientY;\n      this.touchDragElement = e.currentTarget;\n      \n      // Start dragging\n      if (type === 'item') {\n        this.draggingItemId = id;\n        this.draggingFolderId = null;\n        this.draggingType = 'item';\n      } else {\n        this.draggingFolderId = id;\n        this.draggingItemId = null;\n        this.draggingType = 'folder';\n      }\n      \n      this.touchDragActive = true;\n      \n      // Create ghost element for visual feedback\n      this.createTouchGhost(e.currentTarget, touch);\n      \n      // Add dragging class\n      e.currentTarget.classList.add('is-dragging');\n    },\n    \n    createTouchGhost(element, touch) {\n      const ghost = element.cloneNode(true);\n      ghost.classList.add('touch-drag-ghost');\n      ghost.style.cssText = 'position: fixed; pointer-events: none; z-index: 9999; opacity: 0.8; transform: scale(1.02); box-shadow: 0 8px 25px rgba(0,0,0,0.15); background: var(--color-bg-primary, #fff); border-radius: 0.25rem; width: ' + element.offsetWidth + 'px;';\n      ghost.style.left = (touch.clientX - element.offsetWidth / 2) + 'px';\n      ghost.style.top = (touch.clientY - 20) + 'px';\n      document.body.appendChild(ghost);\n      this.touchDragGhost = ghost;\n    },\n    \n    updateTouchGhost(touch) {\n      if (this.touchDragGhost) {\n        this.touchDragGhost.style.left = (touch.clientX - this.touchDragGhost.offsetWidth / 2) + 'px';\n        this.touchDragGhost.style.top = (touch.clientY - 20) + 'px';\n      }\n    },\n    \n    removeTouchGhost() {\n      if (this.touchDragGhost && this.touchDragGhost.parentNode) {\n        this.touchDragGhost.parentNode.removeChild(this.touchDragGhost);\n      }\n      this.touchDragGhost = null;\n    },\n    \n    // Touch event handlers\n    // Long press threshold for initiating drag (ms)\n    LONG_PRESS_DELAY: 500,\n    \n    onTouchStart(e, type, id) {\n      // Always allow inputs to handle their own events\n      const target = e.target;\n      if (target.tagName === 'INPUT' || target.closest('input')) {\n        return;\n      }\n      \n      const touch = e.touches[0];\n      this.touchStartX = touch.clientX;\n      this.touchStartY = touch.clientY;\n      this.touchStartTime = Date.now();\n      this._pendingTouchDrag = { type, id, element: e.currentTarget };\n      this._touchMoved = false;\n      this._longPressTriggered = false;\n      \n      // Set a timeout for long-press to initiate drag\n      // We use a longer delay (500ms) to clearly distinguish from taps\n      this.touchScrollTimeout = setTimeout(() => {\n        if (this._pendingTouchDrag && !this._touchMoved) {\n          // Long press detected - start drag mode\n          this._longPressTriggered = true;\n          this.initTouchDrag(e, type, id);\n          // Vibrate for haptic feedback if available\n          if (navigator.vibrate) navigator.vibrate(50);\n        }\n      }, this.LONG_PRESS_DELAY);\n    },\n    \n    onTouchMove(e) {\n      // If we haven't started dragging yet, check movement\n      if (!this.touchDragActive && this._pendingTouchDrag) {\n        const touch = e.touches[0];\n        const deltaX = Math.abs(touch.clientX - this.touchStartX);\n        const deltaY = Math.abs(touch.clientY - this.touchStartY);\n        \n        // Any significant movement cancels the long-press drag initiation\n        if (deltaX > 5 || deltaY > 5) {\n          this._touchMoved = true;\n          this.cancelPendingTouchDrag();\n          // Allow default scroll behavior\n          return;\n        }\n        return;\n      }\n      \n      if (!this.touchDragActive) return;\n      \n      // We're in drag mode - prevent scrolling\n      e.preventDefault();\n      const touch = e.touches[0];\n      \n      // Update ghost position\n      this.updateTouchGhost(touch);\n      \n      // Find element under touch point\n      if (this.touchDragGhost) {\n        this.touchDragGhost.style.display = 'none';\n      }\n      const elementBelow = document.elementFromPoint(touch.clientX, touch.clientY);\n      if (this.touchDragGhost) {\n        this.touchDragGhost.style.display = '';\n      }\n      \n      if (elementBelow) {\n        const dropTarget = elementBelow.closest('.chat-item-drag-wrapper, .chat-folder-row, .chat-folder-root');\n        \n        if (dropTarget) {\n          const rect = dropTarget.getBoundingClientRect();\n          const y = touch.clientY - rect.top;\n          const height = rect.height;\n          \n          if (dropTarget.classList.contains('chat-folder-root')) {\n            this.dragOverRoot = true;\n            this.dragOverFolderRoot = dropTarget.closest('.chat-sidebar-group')?.querySelector('.chat-sidebar-group-label')?.textContent?.includes('Folders');\n            this.dropIndicator = null;\n          } else {\n            this.dragOverRoot = false;\n            this.dragOverFolderRoot = false;\n            \n            const targetId = parseInt(dropTarget.dataset?.id || dropTarget.closest('[data-id]')?.dataset?.id);\n            const isFolder = dropTarget.classList.contains('chat-folder-row');\n            const targetType = isFolder ? 'folder' : 'item';\n            const parentId = dropTarget.closest('.chat-folder-contents')?.closest('.chat-folder')?.querySelector('.chat-folder-row')?.dataset?.id;\n            \n            if (!isNaN(targetId)) {\n              if (this.draggingItemId === targetId && targetType === 'item') {\n                this.dropIndicator = null;\n                return;\n              }\n              if (this.draggingFolderId === targetId && targetType === 'folder') {\n                this.dropIndicator = null;\n                return;\n              }\n              \n              const threshold = 0.35;\n              let position;\n              if (y < height * threshold) {\n                position = 'before';\n              } else if (y > height * (1 - threshold)) {\n                position = 'after';\n              } else if (isFolder) {\n                position = 'inside';\n                this.dragOverFolderId = targetId;\n              } else {\n                position = 'after';\n              }\n              \n              if (position !== 'inside') {\n                this.dragOverFolderId = null;\n              }\n              \n              this.dropIndicator = { targetId, position, type: targetType, parentId: parentId ? parseInt(parentId) : null };\n            }\n          }\n        } else {\n          this.dropIndicator = null;\n          this.dragOverFolderId = null;\n        }\n      }\n    },\n    \n    onTouchEnd(e) {\n      const wasDragging = this.touchDragActive;\n      const longPressTriggered = this._longPressTriggered;\n      \n      this.cancelPendingTouchDrag();\n      this._longPressTriggered = false;\n      \n      // If we weren't dragging and long-press wasn't triggered, this was a quick tap\n      // Manually trigger a click on the target to ensure it registers\n      if (!wasDragging && !longPressTriggered) {\n        // Find the clickable element (button) and trigger click\n        const target = e.target;\n        const button = target.closest('button.chat-item-btn, button.chat-folder-label');\n        if (button) {\n          // Use a minimal timeout to let the touch event fully complete\n          setTimeout(() => button.click(), 0);\n        }\n        return;\n      }\n      \n      // We were dragging - perform the drop\n      if (this.dropIndicator) {\n        const { targetId, position, type, parentId } = this.dropIndicator;\n        const draggedItemId = this.draggingItemId;\n        const draggedFolderId = this.draggingFolderId;\n        \n        if (draggedItemId) {\n          if (position === 'inside' && type === 'folder') {\n            this.moveItemToFolder(draggedItemId, targetId);\n          } else {\n            this.reorderItem(draggedItemId, targetId, type, position, parentId);\n          }\n        } else if (draggedFolderId) {\n          if (position === 'inside' && type === 'folder') {\n            this.moveFolderToParent(draggedFolderId, targetId);\n          } else if (type === 'folder') {\n            this.reorderFolder(draggedFolderId, targetId, position, parentId);\n          }\n        }\n      } else if (this.dragOverRoot || this.dragOverFolderRoot) {\n        if (this.draggingItemId) {\n          this.moveItemToFolder(this.draggingItemId, null);\n        } else if (this.draggingFolderId) {\n          this.moveFolderToParent(this.draggingFolderId, null);\n        }\n      }\n      \n      // Clean up\n      if (this.touchDragElement) {\n        this.touchDragElement.classList.remove('is-dragging');\n      }\n      this.removeTouchGhost();\n      this.touchDragActive = false;\n      this.touchDragElement = null;\n      this.clearDragState();\n    },\n    \n    cancelPendingTouchDrag() {\n      clearTimeout(this.touchScrollTimeout);\n      this._pendingTouchDrag = null;\n    },\n    \n    onItemDragStart(e, itemId) {\n      try { if (e && e.dataTransfer) { e.dataTransfer.setData('text/plain', 'item:' + itemId); e.dataTransfer.effectAllowed = 'move'; } } catch (_) {}\n      this.draggingItemId = itemId;\n      this.draggingFolderId = null;\n      this.draggingType = 'item';\n    },\n    \n    onItemDragEnd() {\n      this.clearDragState();\n    },\n    \n    onFolderDragStart(e, folderId) {\n      try { if (e && e.dataTransfer) { e.dataTransfer.setData('text/plain', 'folder:' + folderId); e.dataTransfer.effectAllowed = 'move'; } } catch (_) {}\n      this.draggingFolderId = folderId;\n      this.draggingItemId = null;\n      this.draggingType = 'folder';\n    },\n    \n    onFolderDragEnd() {\n      this.clearDragState();\n    },\n    \n    clearDragState() {\n      this.draggingItemId = null;\n      this.draggingFolderId = null;\n      this.draggingType = null;\n      this.dropIndicator = null;\n      this.dragOverFolderId = null;\n      this.dragOverRoot = false;\n      this.dragOverFolderRoot = false;\n    },\n    \n    onItemDragOver(e, targetId, targetType, parentId) {\n      e.preventDefault();\n      e.stopPropagation();\n      \n      if (this.draggingItemId === targetId && targetType === 'item') return;\n      if (this.draggingFolderId === targetId && targetType === 'folder') return;\n      \n      if (this.draggingFolderId && targetType === 'folder') {\n        const descendants = this.getAllDescendantFolderIds(this.draggingFolderId);\n        if (descendants.includes(targetId)) return;\n      }\n      \n      const rect = e.currentTarget.getBoundingClientRect();\n      const y = e.clientY - rect.top;\n      const height = rect.height;\n      const threshold = 0.35;\n      \n      let position;\n      if (y < height * threshold) {\n        position = 'before';\n      } else if (y > height * (1 - threshold)) {\n        position = 'after';\n      } else if (targetType === 'folder') {\n        position = 'inside';\n        this.dragOverFolderId = targetId;\n      } else {\n        position = 'after';\n      }\n      \n      if (position !== 'inside') {\n        this.dragOverFolderId = null;\n      }\n      \n      this.dropIndicator = { targetId, position, type: targetType, parentId };\n    },\n    \n    onItemDragLeave(e) {\n      if (e.currentTarget.contains(e.relatedTarget)) return;\n      if (this.dropIndicator && this.dropIndicator.targetId === parseInt(e.currentTarget.dataset?.id)) {\n        this.dropIndicator = null;\n      }\n    },\n    \n    onReorderDrop(e, targetId, targetType, parentId) {\n      e.preventDefault();\n      e.stopPropagation();\n      \n      if (!this.dropIndicator) return;\n      \n      const { position } = this.dropIndicator;\n      const draggedItemId = this.draggingItemId;\n      const draggedFolderId = this.draggingFolderId;\n      \n      if (draggedItemId) {\n        if (position === 'inside' && targetType === 'folder') {\n          this.moveItemToFolder(draggedItemId, targetId);\n        } else {\n          this.reorderItem(draggedItemId, targetId, targetType, position, parentId);\n        }\n      } else if (draggedFolderId) {\n        if (position === 'inside' && targetType === 'folder') {\n          this.moveFolderToParent(draggedFolderId, targetId);\n        } else if (targetType === 'folder') {\n          this.reorderFolder(draggedFolderId, targetId, position, parentId);\n        }\n      }\n      \n      this.clearDragState();\n    },\n    \n    reorderItem(itemId, targetId, targetType, position, targetParentId) {\n      const item = this.items.find(i => i.id === itemId);\n      if (!item) return;\n      \n      let newFolderId;\n      if (targetType === 'folder') {\n        const targetFolder = this.folders.find(f => f.id === targetId);\n        newFolderId = targetFolder ? targetFolder.parentId : null;\n      } else {\n        const targetItem = this.items.find(i => i.id === targetId);\n        newFolderId = targetItem ? targetItem.folderId : targetParentId;\n      }\n      \n      item.folderId = newFolderId;\n      \n      const siblings = this.items\n        .filter(i => i.folderId === newFolderId && i.id !== itemId)\n        .sort((a, b) => a.order - b.order);\n      \n      let targetIndex = targetType === 'item' \n        ? siblings.findIndex(i => i.id === targetId)\n        : siblings.length - 1;\n      \n      if (position === 'before') {\n        siblings.splice(Math.max(0, targetIndex), 0, item);\n      } else {\n        siblings.splice(targetIndex + 1, 0, item);\n      }\n      \n      siblings.forEach((s, idx) => { s.order = idx + 1; });\n    },\n    \n    reorderFolder(folderId, targetFolderId, position, targetParentId) {\n      const folder = this.folders.find(f => f.id === folderId);\n      const targetFolder = this.folders.find(f => f.id === targetFolderId);\n      if (!folder || !targetFolder) return;\n      \n      const descendants = this.getAllDescendantFolderIds(folderId);\n      if (descendants.includes(targetFolderId)) return;\n      \n      const newParentId = targetFolder.parentId;\n      folder.parentId = newParentId;\n      \n      const siblings = this.folders\n        .filter(f => f.parentId === newParentId && f.id !== folderId)\n        .sort((a, b) => a.order - b.order);\n      \n      const targetIndex = siblings.findIndex(f => f.id === targetFolderId);\n      \n      if (position === 'before') {\n        siblings.splice(Math.max(0, targetIndex), 0, folder);\n      } else {\n        siblings.splice(targetIndex + 1, 0, folder);\n      }\n      \n      siblings.forEach((s, idx) => { s.order = idx + 1; });\n    },\n    \n    moveItemToFolder(itemId, folderId) {\n      const item = this.items.find(i => i.id === itemId);\n      if (!item) return;\n      item.folderId = folderId;\n      item.order = this.getMaxOrder(this.items.filter(i => i.folderId === folderId)) + 1;\n    },\n    \n    moveFolderToParent(folderId, parentId) {\n      const folder = this.folders.find(f => f.id === folderId);\n      if (!folder) return;\n      \n      if (parentId !== null) {\n        const descendants = this.getAllDescendantFolderIds(folderId);\n        if (descendants.includes(parentId) || folderId === parentId) return;\n      }\n      \n      folder.parentId = parentId;\n      folder.order = this.getMaxOrder(this.folders.filter(f => f.parentId === parentId)) + 1;\n    },\n    \n    onRootDragOver(e) {\n      e.preventDefault();\n      this.dragOverRoot = true;\n      this.dragOverFolderId = null;\n    },\n    \n    onRootDragLeave() {\n      this.dragOverRoot = false;\n    },\n    \n    onRootDrop(e) {\n      e.preventDefault();\n      \n      if (this.dropIndicator) {\n        this.onReorderDrop(e, this.dropIndicator.targetId, this.dropIndicator.type, this.dropIndicator.parentId);\n        return;\n      }\n      \n      if (this.draggingItemId) {\n        this.moveItemToFolder(this.draggingItemId, null);\n      } else if (this.draggingFolderId) {\n        this.moveFolderToParent(this.draggingFolderId, null);\n      }\n      this.clearDragState();\n    },\n    \n    onFolderRootDragOver(e) {\n      e.preventDefault();\n      if (this.draggingFolderId) {\n        const folder = this.folders.find(f => f.id === this.draggingFolderId);\n        if (folder && folder.parentId !== null) {\n          this.dragOverFolderRoot = true;\n        }\n      }\n      this.dropIndicator = null;\n    },\n    \n    onFolderRootDragLeave() {\n      this.dragOverFolderRoot = false;\n    },\n    \n    onFolderRootDrop(e) {\n      e.preventDefault();\n      e.stopPropagation();\n      \n      if (this.dropIndicator) {\n        this.onReorderDrop(e, this.dropIndicator.targetId, this.dropIndicator.type, this.dropIndicator.parentId);\n        return;\n      }\n      \n      if (this.draggingFolderId) {\n        this.moveFolderToParent(this.draggingFolderId, null);\n      }\n      \n      this.clearDragState();\n    },\n    \n    showDropBefore(id, type) {\n      return this.dropIndicator && \n             this.dropIndicator.targetId === id && \n             this.dropIndicator.type === type && \n             this.dropIndicator.position === 'before';\n    },\n    \n    showDropAfter(id, type) {\n      return this.dropIndicator && \n             this.dropIndicator.targetId === id && \n             this.dropIndicator.type === type && \n             this.dropIndicator.position === 'after';\n    },\n    \n    showDropInside(id) {\n      return this.dropIndicator && \n             this.dropIndicator.targetId === id && \n             this.dropIndicator.position === 'inside';\n    },\n  };\n}\n",[],[480,1277,1367],"3c4465ba-ef19-11f0-91a1-42dde27851f2","chats.js","0bf00888-e2e9-11f0-bcd5-42dde27851f2",169,["D",1768155211259],"/**\n * Chat App Chats - Chat/item operations\n * \n * Uses unified chat structure: chats[id] = { messages: [], metadata: {...} }\n */\n\nimport { createChatData, createChatMetadata } from './state.js';\n\nexport function createChatMethods() {\n  return {\n    createNewChat(folderId = null) {\n      const id = this.nextItemId++;\n      const order = this.getMaxOrder(this.items.filter(i => i.folderId === folderId)) + 1;\n      const item = { id, name: 'New Chat', folderId, order };\n      this.items.push(item);\n      \n      // Add welcome message if setting is enabled\n      const initialMessages = [];\n      if (this.settings?.showWelcomeMessage) {\n        initialMessages.push({\n          id: Date.now(),\n          role: 'assistant',\n          content: 'Hello! How can I help you today?',\n          timestamp: new Date().toISOString()\n        });\n      }\n      \n      // Create chat with unified structure (messages + metadata)\n      this.chats[id] = createChatData(initialMessages);\n      \n      this.selectChat(id);\n      return item;\n    },\n    \n    deleteChat(chatId) {\n      this.items = this.items.filter(i => i.id !== chatId);\n      delete this.chats[chatId];\n      if (this.activeChatId === chatId) {\n        this.activeChatId = null;\n        // Clear array without replacing reference\n        this.messages.length = 0;\n      }\n      this.itemMenuOpen = null;\n    },\n    \n    // Fork entire chat - duplicate with all messages, metadata, and settings\n    forkEntireChat(chatId) {\n      const originalItem = this.items.find(i => i.id === chatId);\n      const originalChatData = this.chats[chatId];\n      \n      if (!originalItem || !originalChatData) {\n        console.warn('[forkEntireChat] Chat not found:', chatId);\n        return null;\n      }\n      \n      // Create new chat item in the same folder\n      const id = this.nextItemId++;\n      const folderId = originalItem.folderId;\n      const order = this.getMaxOrder(this.items.filter(i => i.folderId === folderId)) + 1;\n      const item = { \n        id, \n        name: originalItem.name + ' (Fork)', \n        folderId, \n        order \n      };\n      this.items.push(item);\n      \n      // Deep copy all messages to preserve all message metadata\n      const messagesCopy = JSON.parse(JSON.stringify(originalChatData.messages || []));\n      \n      // Deep copy the chat's metadata (settings, system prompt, parameters)\n      let forkedMetadata = {\n        createdAt: Date.now(),\n        updatedAt: Date.now(),\n        forkedFrom: chatId,\n        forkedAt: Date.now()\n      };\n      \n      // Copy all chat settings from the source chat\n      if (originalChatData.metadata) {\n        const sourceMetadata = originalChatData.metadata;\n        forkedMetadata = {\n          ...forkedMetadata,\n          systemPrompt: sourceMetadata.systemPrompt || '',\n          defaultModel: sourceMetadata.defaultModel || null,\n          parameters: sourceMetadata.parameters ? JSON.parse(JSON.stringify(sourceMetadata.parameters)) : {},\n          appliedTemplateId: sourceMetadata.appliedTemplateId || null\n        };\n      }\n      \n      // Create chat with forked messages and settings\n      this.chats[id] = {\n        messages: messagesCopy,\n        metadata: forkedMetadata\n      };\n      \n      // Select the new chat\n      this.selectChat(id);\n      \n      // Close the menu\n      this.itemMenuOpen = null;\n      \n      console.log('[forkEntireChat] Created forked chat:', id, 'with', messagesCopy.length, 'messages and copied settings');\n      \n      return item;\n    },\n    \n    selectChat(chatId) {\n      // Cancel any active job stream before switching (job keeps running on server)\n      if (this.activeJobId && this.activeChatId !== chatId) {\n        console.log('[Switching chat] Stopping job stream:', this.activeJobId);\n        try {\n          if (this.jobs && this.jobs.stopStreaming) {\n            this.jobs.stopStreaming(this.activeJobId);\n          }\n        } catch (e) {\n          console.warn('[Switching chat] Error stopping stream:', e);\n        }\n        this.activeJobId = null;\n      }\n      \n      // Save current chat messages before switching (unified structure)\n      if (this.activeChatId && this.activeChatId !== chatId) {\n        if (!this.chats[this.activeChatId]) {\n          this.chats[this.activeChatId] = createChatData();\n        }\n        this.chats[this.activeChatId].messages = JSON.parse(JSON.stringify(this.messages));\n      }\n      \n      this.activeChatId = chatId;\n      \n      // Get messages from unified structure\n      const chatData = this.chats[chatId];\n      const rawMessages = chatData && chatData.messages ? chatData.messages : [];\n      const ensuredMessages = this.ensureMessageIds(JSON.parse(JSON.stringify(rawMessages)));\n      \n      // CRITICAL: Never replace the messages array reference\n      // Instead, mutate the existing array to maintain Alpine reactivity\n      this.messages.length = 0;\n      if (Array.isArray(ensuredMessages)) {\n        ensuredMessages.forEach(msg => this.messages.push(msg));\n      }\n      \n      this.showSettings = false; // Close settings when selecting a chat\n      \n      // Load chat-specific settings for right sidebar\n      if (this.loadCurrentChatSettings) {\n        this.loadCurrentChatSettings();\n      }\n      \n      // Restore chat-specific model if saved\n      this.restoreChatModel(chatId);\n      \n      this.saveToStorage();\n      \n      this.$nextTick(() => {\n        this.scrollToBottom();\n        if (this.$refs.input) {\n          this.$refs.input.focus();\n        }\n      });\n    },\n    \n    getCurrentChatName() {\n      const chat = this.items.find(i => i.id === this.activeChatId);\n      return chat ? chat.name : 'Chat';\n    },\n    \n    // Rename a chat by ID\n    renameChat(chatId, newName) {\n      const item = this.items.find(i => i.id === chatId);\n      if (item) {\n        item.name = newName;\n        this.saveToStorage();\n        console.log('[renameChat] Renamed chat', chatId, 'to:', newName);\n        return true;\n      }\n      return false;\n    },\n    \n    getItemsInFolder(folderId) {\n      // Access itemsVersion to create a reactive dependency\n      const _ = this.itemsVersion;\n      return this.items.filter(i => i.folderId === folderId).sort((a, b) => a.order - b.order);\n    },\n    \n    getRootItems() {\n      // Access itemsVersion to create a reactive dependency\n      const _ = this.itemsVersion;\n      return this.items.filter(i => i.folderId === null).sort((a, b) => a.order - b.order);\n    },\n    \n    // Restore the saved model for a specific chat from its unified metadata\n    restoreChatModel(chatId) {\n      if (!chatId || !this.chats[chatId]) {\n        return false;\n      }\n      \n      const metadata = this.chats[chatId].metadata;\n      if (!metadata || !metadata.defaultModel) {\n        return false;\n      }\n      \n      const savedModelId = metadata.defaultModel;\n      \n      // Find the model in the models list\n      const savedModel = this.models.find(m => m.id === savedModelId);\n      if (savedModel) {\n        this.selectedModel = savedModel;\n        console.log('[restoreChatModel] Restored model for chat', chatId, ':', savedModelId);\n        return true;\n      } else {\n        console.warn('[restoreChatModel] Saved model not found:', savedModelId);\n        return false;\n      }\n    },\n  };\n}\n",[],[480,1277,1375],"3ca82992-ef19-11f0-926a-42dde27851f2","chatSettings.js","0bd5164a-e2e9-11f0-b39b-42dde27851f2",179,["D",1768155211287],"/**\n * Chat App Chat Settings - Right sidebar for chat-specific settings\n * Handles system prompt, model parameters, and per-message metadata\n * \n * Uses unified chat structure: chats[id] = { messages: [], metadata: {...} }\n */\n\nimport { createChatMetadata, createMessageMetadata, DEFAULT_MODEL_PARAMS, createChatData } from './state.js';\n\nexport function createChatSettingsMethods() {\n  return {\n    // Toggle right sidebar\n    toggleRightSidebar() {\n      this.rightSidebarOpen = !this.rightSidebarOpen;\n      // Close settings page when opening right sidebar\n      if (this.rightSidebarOpen) {\n        this.showSettings = false;\n      }\n      // Load current chat settings when opening\n      if (this.rightSidebarOpen && this.activeChatId) {\n        this.loadCurrentChatSettings();\n      }\n    },\n    \n    // Load settings for the current active chat (from unified structure)\n    loadCurrentChatSettings() {\n      if (!this.activeChatId) {\n        // Reset to defaults\n        this.currentChatSettings = {\n          systemPrompt: '',\n          temperature: DEFAULT_MODEL_PARAMS.temperature,\n          maxTokens: DEFAULT_MODEL_PARAMS.maxTokens,\n          topP: DEFAULT_MODEL_PARAMS.topP,\n          frequencyPenalty: DEFAULT_MODEL_PARAMS.frequencyPenalty,\n          presencePenalty: DEFAULT_MODEL_PARAMS.presencePenalty,\n          reasoningEffort: DEFAULT_MODEL_PARAMS.reasoningEffort,\n          webSearch: DEFAULT_MODEL_PARAMS.webSearch,\n          codeExecution: DEFAULT_MODEL_PARAMS.codeExecution,\n          imageDetail: DEFAULT_MODEL_PARAMS.imageDetail,\n          modelVersion: DEFAULT_MODEL_PARAMS.modelVersion\n        };\n        return;\n      }\n      \n      // Ensure chat exists with proper structure\n      if (!this.chats[this.activeChatId]) {\n        this.chats[this.activeChatId] = createChatData();\n      }\n      \n      // Ensure metadata exists\n      if (!this.chats[this.activeChatId].metadata) {\n        this.chats[this.activeChatId].metadata = createChatMetadata();\n      }\n      \n      const metadata = this.chats[this.activeChatId].metadata;\n      const params = metadata.parameters || {};\n      \n      this.currentChatSettings = {\n        systemPrompt: metadata.systemPrompt || '',\n        temperature: params.temperature ?? DEFAULT_MODEL_PARAMS.temperature,\n        maxTokens: params.maxTokens ?? DEFAULT_MODEL_PARAMS.maxTokens,\n        topP: params.topP ?? DEFAULT_MODEL_PARAMS.topP,\n        frequencyPenalty: params.frequencyPenalty ?? DEFAULT_MODEL_PARAMS.frequencyPenalty,\n        presencePenalty: params.presencePenalty ?? DEFAULT_MODEL_PARAMS.presencePenalty,\n        reasoningEffort: params.reasoningEffort ?? DEFAULT_MODEL_PARAMS.reasoningEffort,\n        webSearch: params.webSearch ?? DEFAULT_MODEL_PARAMS.webSearch,\n        codeExecution: params.codeExecution ?? DEFAULT_MODEL_PARAMS.codeExecution,\n        imageDetail: params.imageDetail ?? DEFAULT_MODEL_PARAMS.imageDetail,\n        modelVersion: params.modelVersion ?? DEFAULT_MODEL_PARAMS.modelVersion\n      };\n    },\n    \n    // Save current chat settings to metadata (unified structure)\n    saveChatSettings() {\n      if (!this.activeChatId) return;\n      \n      // Ensure chat exists with proper structure\n      if (!this.chats[this.activeChatId]) {\n        this.chats[this.activeChatId] = createChatData();\n      }\n      \n      // Ensure metadata exists\n      if (!this.chats[this.activeChatId].metadata) {\n        this.chats[this.activeChatId].metadata = createChatMetadata();\n      }\n      \n      const metadata = this.chats[this.activeChatId].metadata;\n      metadata.systemPrompt = this.currentChatSettings.systemPrompt;\n      metadata.parameters = {\n        temperature: this.currentChatSettings.temperature,\n        maxTokens: this.currentChatSettings.maxTokens,\n        topP: this.currentChatSettings.topP,\n        frequencyPenalty: this.currentChatSettings.frequencyPenalty,\n        presencePenalty: this.currentChatSettings.presencePenalty,\n        reasoningEffort: this.currentChatSettings.reasoningEffort,\n        webSearch: this.currentChatSettings.webSearch,\n        codeExecution: this.currentChatSettings.codeExecution,\n        imageDetail: this.currentChatSettings.imageDetail,\n        modelVersion: this.currentChatSettings.modelVersion\n      };\n      metadata.updatedAt = new Date().toISOString();\n      \n      this.saveToStorage();\n      console.log('[Chat Settings] Saved settings for chat:', this.activeChatId);\n    },\n    \n    // Update a single setting (debounced save)\n    updateChatSetting(key, value) {\n      this.currentChatSettings[key] = value;\n      \n      // Debounce the save\n      if (this._settingsSaveTimeout) {\n        clearTimeout(this._settingsSaveTimeout);\n      }\n      this._settingsSaveTimeout = setTimeout(() => {\n        this.saveChatSettings();\n      }, 500);\n    },\n    \n    // Get current chat's system prompt\n    getSystemPrompt() {\n      if (!this.activeChatId || !this.chats[this.activeChatId]) {\n        return '';\n      }\n      const metadata = this.chats[this.activeChatId].metadata;\n      return metadata ? (metadata.systemPrompt || '') : '';\n    },\n    \n    // Get current chat's model parameters\n    getChatParameters() {\n      if (!this.activeChatId || !this.currentChatSettings) {\n        return { ...DEFAULT_MODEL_PARAMS, systemPrompt: '' };\n      }\n      return {\n        systemPrompt: this.currentChatSettings.systemPrompt || '',\n        temperature: this.currentChatSettings.temperature ?? DEFAULT_MODEL_PARAMS.temperature,\n        maxTokens: this.currentChatSettings.maxTokens ?? DEFAULT_MODEL_PARAMS.maxTokens,\n        topP: this.currentChatSettings.topP ?? DEFAULT_MODEL_PARAMS.topP,\n        frequencyPenalty: this.currentChatSettings.frequencyPenalty ?? DEFAULT_MODEL_PARAMS.frequencyPenalty,\n        presencePenalty: this.currentChatSettings.presencePenalty ?? DEFAULT_MODEL_PARAMS.presencePenalty,\n        reasoningEffort: this.currentChatSettings.reasoningEffort ?? DEFAULT_MODEL_PARAMS.reasoningEffort,\n        webSearch: this.currentChatSettings.webSearch ?? DEFAULT_MODEL_PARAMS.webSearch,\n        codeExecution: this.currentChatSettings.codeExecution ?? DEFAULT_MODEL_PARAMS.codeExecution,\n        imageDetail: this.currentChatSettings.imageDetail ?? DEFAULT_MODEL_PARAMS.imageDetail,\n        modelVersion: this.currentChatSettings.modelVersion ?? DEFAULT_MODEL_PARAMS.modelVersion,\n      };\n    },\n    \n    // Get model config for the currently selected model\n    getCurrentModelConfig() {\n      if (!this.selectedModel || !this.modelConfigs.length) {\n        return null;\n      }\n      return this.modelConfigs.find(function(c) {\n        return c.id === this.selectedModel.id;\n      }.bind(this)) || null;\n    },\n    \n    // Create message metadata when sending a message\n    createMessageMeta() {\n      var modelId = this.selectedModel ? this.selectedModel.id : null;\n      var params = this.getChatParameters();\n      return createMessageMetadata(modelId, params);\n    },\n    \n    // Load model configs from API\n    async loadModelConfigs() {\n      try {\n        var response = await fetch('/api/models/configs');\n        if (response.ok) {\n          var data = await response.json();\n          this.modelConfigs = data.models || [];\n          console.log('[Model Configs] Loaded', this.modelConfigs.length, 'model configs');\n        }\n      } catch (error) {\n        console.error('[Model Configs] Failed to load:', error);\n      }\n    },\n    \n    // Reset current chat settings to defaults\n    resetChatSettings() {\n      this.currentChatSettings = {\n        systemPrompt: '',\n        temperature: DEFAULT_MODEL_PARAMS.temperature,\n        maxTokens: DEFAULT_MODEL_PARAMS.maxTokens,\n        topP: DEFAULT_MODEL_PARAMS.topP,\n        frequencyPenalty: DEFAULT_MODEL_PARAMS.frequencyPenalty,\n        presencePenalty: DEFAULT_MODEL_PARAMS.presencePenalty,\n        reasoningEffort: DEFAULT_MODEL_PARAMS.reasoningEffort,\n        webSearch: DEFAULT_MODEL_PARAMS.webSearch,\n        codeExecution: DEFAULT_MODEL_PARAMS.codeExecution,\n        imageDetail: DEFAULT_MODEL_PARAMS.imageDetail,\n        modelVersion: DEFAULT_MODEL_PARAMS.modelVersion\n      };\n      \n      // Also clear the saved model and applied template for this chat\n      if (this.activeChatId && this.chats[this.activeChatId] && this.chats[this.activeChatId].metadata) {\n        this.chats[this.activeChatId].metadata.defaultModel = null;\n        this.chats[this.activeChatId].metadata.appliedTemplateId = null;\n      }\n      \n      this.saveChatSettings();\n      \n      if (window.toast) {\n        window.toast('Chat settings reset to defaults', { type: 'info' });\n      }\n    },\n    \n    // Get the currently applied template ID for this chat\n    getAppliedTemplateId() {\n      if (!this.activeChatId || !this.chats[this.activeChatId]) {\n        return null;\n      }\n      var metadata = this.chats[this.activeChatId].metadata;\n      return metadata ? (metadata.appliedTemplateId || null) : null;\n    },\n    \n    // Get the currently applied template object\n    getAppliedTemplate() {\n      var templateId = this.getAppliedTemplateId();\n      if (!templateId) return null;\n      return this.templates.find(function(t) { return t.id === templateId; }) || null;\n    },\n    \n    // Apply a template to the current chat and track it\n    applyTemplateToChatWithTracking(templateId) {\n      if (!templateId) {\n        // Clear template\n        if (this.activeChatId && this.chats[this.activeChatId] && this.chats[this.activeChatId].metadata) {\n          this.chats[this.activeChatId].metadata.appliedTemplateId = null;\n        }\n        this.saveToStorage();\n        return;\n      }\n      \n      var template = this.templates.find(function(t) { return t.id === templateId; });\n      if (!template || !this.activeChatId) return;\n      \n      // Copy template settings to current chat settings\n      this.currentChatSettings.systemPrompt = template.systemPrompt || '';\n      this.currentChatSettings.temperature = template.parameters?.temperature ?? DEFAULT_MODEL_PARAMS.temperature;\n      this.currentChatSettings.maxTokens = template.parameters?.maxTokens ?? DEFAULT_MODEL_PARAMS.maxTokens;\n      this.currentChatSettings.topP = template.parameters?.topP ?? DEFAULT_MODEL_PARAMS.topP;\n      this.currentChatSettings.frequencyPenalty = template.parameters?.frequencyPenalty ?? DEFAULT_MODEL_PARAMS.frequencyPenalty;\n      this.currentChatSettings.presencePenalty = template.parameters?.presencePenalty ?? DEFAULT_MODEL_PARAMS.presencePenalty;\n      this.currentChatSettings.reasoningEffort = template.parameters?.reasoningEffort ?? DEFAULT_MODEL_PARAMS.reasoningEffort;\n      this.currentChatSettings.webSearch = template.parameters?.webSearch ?? DEFAULT_MODEL_PARAMS.webSearch;\n      this.currentChatSettings.codeExecution = template.parameters?.codeExecution ?? DEFAULT_MODEL_PARAMS.codeExecution;\n      this.currentChatSettings.imageDetail = template.parameters?.imageDetail ?? DEFAULT_MODEL_PARAMS.imageDetail;\n      this.currentChatSettings.modelVersion = template.parameters?.modelVersion ?? DEFAULT_MODEL_PARAMS.modelVersion;\n      \n      // Apply default model if set\n      if (template.defaultModel) {\n        var model = this.models.find(function(m) { return m.id === template.defaultModel; });\n        if (model) {\n          this.selectedModel = model;\n        }\n      }\n      \n      // Track which template was applied\n      if (!this.chats[this.activeChatId].metadata) {\n        this.chats[this.activeChatId].metadata = createChatMetadata();\n      }\n      this.chats[this.activeChatId].metadata.appliedTemplateId = templateId;\n      \n      this.saveChatSettings();\n      \n      if (window.toast) {\n        window.toast('Template \"' + template.name + '\" applied', { type: 'success' });\n      }\n    },\n    \n    // Save current chat settings back to the applied template\n    saveChatSettingsToTemplate() {\n      var templateId = this.getAppliedTemplateId();\n      if (!templateId) return;\n      \n      var template = this.templates.find(function(t) { return t.id === templateId; });\n      if (!template) return;\n      \n      // Update template with current chat settings\n      template.systemPrompt = this.currentChatSettings.systemPrompt;\n      template.parameters = {\n        temperature: this.currentChatSettings.temperature,\n        maxTokens: this.currentChatSettings.maxTokens,\n        topP: this.currentChatSettings.topP,\n        frequencyPenalty: this.currentChatSettings.frequencyPenalty,\n        presencePenalty: this.currentChatSettings.presencePenalty,\n        reasoningEffort: this.currentChatSettings.reasoningEffort,\n        webSearch: this.currentChatSettings.webSearch,\n        codeExecution: this.currentChatSettings.codeExecution,\n        imageDetail: this.currentChatSettings.imageDetail,\n        modelVersion: this.currentChatSettings.modelVersion\n      };\n      \n      // Save model if one is selected\n      if (this.selectedModel) {\n        template.defaultModel = this.selectedModel.id;\n      }\n      \n      template.updatedAt = new Date().toISOString();\n      this.templatesVersion++;\n      this.saveToStorage();\n      \n      if (window.toast) {\n        window.toast('Saved to template \"' + template.name + '\"', { type: 'success' });\n      }\n    },\n    \n    // Save current chat settings as a new template\n    saveChatSettingsAsNewTemplate() {\n      var templateName = 'Template from Chat';\n      \n      // Prompt for name (simple approach)\n      var name = prompt('Enter a name for the new template:', templateName);\n      if (!name) return;\n      \n      var newTemplate = {\n        id: 'template_' + Date.now(),\n        name: name,\n        folderId: null,\n        systemPrompt: this.currentChatSettings.systemPrompt,\n        defaultModel: this.selectedModel ? this.selectedModel.id : null,\n        parameters: {\n          temperature: this.currentChatSettings.temperature,\n          maxTokens: this.currentChatSettings.maxTokens,\n          topP: this.currentChatSettings.topP,\n          frequencyPenalty: this.currentChatSettings.frequencyPenalty,\n          presencePenalty: this.currentChatSettings.presencePenalty,\n          reasoningEffort: this.currentChatSettings.reasoningEffort,\n          webSearch: this.currentChatSettings.webSearch,\n          codeExecution: this.currentChatSettings.codeExecution,\n          imageDetail: this.currentChatSettings.imageDetail,\n          modelVersion: this.currentChatSettings.modelVersion\n        },\n        createdAt: new Date().toISOString(),\n        updatedAt: new Date().toISOString()\n      };\n      \n      this.templates.push(newTemplate);\n      \n      // Apply the new template to this chat\n      if (this.activeChatId && this.chats[this.activeChatId]) {\n        if (!this.chats[this.activeChatId].metadata) {\n          this.chats[this.activeChatId].metadata = createChatMetadata();\n        }\n        this.chats[this.activeChatId].metadata.appliedTemplateId = newTemplate.id;\n      }\n      \n      this.templatesVersion++;\n      this.saveToStorage();\n      \n      if (window.toast) {\n        window.toast('Created template \"' + name + '\"', { type: 'success' });\n      }\n    }\n  };\n}\n",[],[480,1277,1383],"0a3a7f8c-e2e9-11f0-9dc9-42dde27851f2",6,["D",1766815097530],[254,255,256,257,258,259,260,261,262,263,264,265,266,267,268],[480,1277],"09c1524c-e2e9-11f0-b941-42dde27851f2",["D",1766815096734],[253,269,293,370,371],[480],["D",1766815103714],[],[18,93],["D",1766815103712],[],[18,112],["D",1766815103736],[],[18,103],"0e1a62c0-e2e9-11f0-b141-42dde27851f2","system.ts","0e1a6392-e2e9-11f0-b141-42dde27851f2",120,["D",1766815104028],"// System/health endpoints\nimport type { Context } from \"https://deno.land/x/hono@v3.11.7/mod.ts\";\nimport { listConfiguredProviders } from \"../providers/index.ts\";\nimport { serverApiKey } from \"../config.ts\";\n\ntype HonoApp = { \n  get: (path: string, handler: (c: Context) => Response) => void;\n};\n\nexport function registerSystemRoutes(app: HonoApp): void {\n  // Health check\n  app.get('/health', (c: Context) => {\n    return c.json({ \n      status: \"ok\", \n      app: \"chat-app\",\n      providers: listConfiguredProviders(),\n    });\n  });\n\n  // Check if server has API key configured\n  app.get('/api/check-key', (c: Context) => {\n    return c.json({ hasServerKey: !!serverApiKey });\n  });\n}\n\n",[],[18,83,1409],"3d3495e4-ef19-11f0-926a-42dde27851f2","static.ts","0df75ef6-e2e9-11f0-b941-42dde27851f2",202,["D",1768155212774],"// Static file routes\nimport type { Context } from \"https://deno.land/x/hono@v3.11.7/mod.ts\";\nimport { readFileContent, readBinaryFile, textResponse } from \"../utils.ts\";\n\ntype HonoApp = { \n  get: (path: string, handler: (c: Context) => Promise | Response) => void \n};\n\nexport function registerStaticRoutes(app: HonoApp, importMetaUrl: string): void {\n  // Root HTML\n  app.get('/', async (c: Context) => {\n    try {\n      const html = await readFileContent('/frontend/index.html', importMetaUrl);\n      return c.html(html);\n    } catch (err) {\n      console.error('Error reading index.html:', err);\n      return c.text('Error loading page', 500);\n    }\n  });\n\n  // Serve combined CSS chunks as a single /styles.css\n  app.get('/styles.css', async (c: Context) => {\n    try {\n      let combinedCss = '';\n      let chunkNum = 1;\n      \n      // Load all chunks until one fails\n      while (true) {\n        try {\n          const chunkPath = '/frontend/styles/chat-app-' + chunkNum + '.css';\n          const cssContent = await readFileContent(chunkPath, importMetaUrl);\n          combinedCss += cssContent;\n          chunkNum++;\n        } catch {\n          // Try single file if chunks don't exist\n          if (chunkNum === 1) {\n            try {\n              const singlePath = '/frontend/styles/chat-app.css';\n              combinedCss = await readFileContent(singlePath, importMetaUrl);\n            } catch {\n              // No CSS file found\n            }\n          }\n          break;\n        }\n      }\n      \n      return textResponse(combinedCss, 'text/css');\n    } catch (error) {\n      console.error('Error loading combined styles.css:', error);\n      return c.text('/* Error loading combined styles CSS */', 500);\n    }\n  });\n\n  // Serve monaco utils\n  app.get('/src/monaco-utils.js', async (c: Context) => {\n    try {\n      const js = await readFileContent('/frontend/monaco-utils.js', importMetaUrl);\n      return textResponse(js, 'application/javascript');\n    } catch (err) {\n      console.error('Error reading monaco-utils.js:', err);\n      return c.text('Not found', 404);\n    }\n  });\n\n  // Serve app modules (modular JS files)\n  app.get('/src/app/:filename', async (c: Context) => {\n    const filename = c.req.param('filename');\n    try {\n      const js = await readFileContent('/frontend/app/' + filename, importMetaUrl);\n      return textResponse(js, 'application/javascript');\n    } catch (error) {\n      console.error('Error loading app module:', filename, error);\n      return c.text('Not found: ' + filename, 404);\n    }\n  });\n\n  // Serve frontend styles (CSS files)\n  app.get('/frontend/styles/:filename', async (c: Context) => {\n    const filename = c.req.param('filename');\n    try {\n      const css = await readFileContent('/frontend/styles/' + filename, importMetaUrl);\n      return textResponse(css, 'text/css');\n    } catch (error) {\n      console.error('Error loading style file:', filename, error);\n      return c.text('Not found: ' + filename, 404);\n    }\n  });\n\n  // Serve public assets (logos, icons)\n  app.get('/public/:filename', async (c: Context) => {\n    const filename = c.req.param('filename');\n    try {\n      const file = await readBinaryFile('/public/' + filename, importMetaUrl);\n      \n      // Determine content type\n      let contentType = 'application/octet-stream';\n      if (filename.endsWith('.png')) contentType = 'image/png';\n      else if (filename.endsWith('.jpg') || filename.endsWith('.jpeg')) contentType = 'image/jpeg';\n      else if (filename.endsWith('.svg')) contentType = 'image/svg+xml';\n      else if (filename.endsWith('.ico')) contentType = 'image/x-icon';\n      \n      return new Response(file as unknown as BodyInit, {\n        status: 200,\n        headers: {\n          'Content-Type': contentType,\n          'Cache-Control': 'public, max-age=86400'\n        }\n      });\n    } catch (error) {\n      return c.text('Not found', 404);\n    }\n  });\n}\n\n",[],[18,83,1417],"0e088da2-e2e9-11f0-9777-42dde27851f2","providers.ts","0e088e42-e2e9-11f0-9777-42dde27851f2",119,["D",1766815103902],"// Provider routes - list available chat providers\nimport type { Context } from \"https://deno.land/x/hono@v3.11.7/mod.ts\";\nimport { listConfiguredProviders, getDefaultProvider, getProviderInfo, getProvider } from \"../providers/index.ts\";\nimport { \n  ALL_MODEL_CONFIGS, \n  getModelConfig, \n  getDefaultParameters,\n  getModelConfigsByProvider,\n  getCustomBaseParameters \n} from \"../providers/model-configs.ts\";\nimport { CustomProvider } from \"../providers/custom.ts\";\nimport { OpenAIProvider } from \"../providers/openai.ts\";\n\ntype HonoApp = { \n  get: (path: string, handler: (c: Context) => Response | Promise) => void;\n  post: (path: string, handler: (c: Context) => Response | Promise) => void;\n};\n\nexport function registerProviderRoutes(app: HonoApp): void {\n  // List available providers with their configuration status\n  app.get('/api/providers', (c: Context) => {\n    return c.json({\n      providers: listConfiguredProviders(),\n      all: getProviderInfo(),\n      default: getDefaultProvider().name,\n    });\n  });\n  \n  // Get all model configurations with their parameters\n  app.get('/api/models/configs', (c: Context) => {\n    return c.json({\n      models: ALL_MODEL_CONFIGS\n    });\n  });\n  \n  // Get models for a specific provider\n  app.get('/api/models/configs/provider/:provider', (c: Context) => {\n    const provider = c.req.param('provider');\n    const models = getModelConfigsByProvider(provider);\n    \n    return c.json({\n      provider,\n      models\n    });\n  });\n  \n  // Get config for a specific model\n  app.get('/api/models/configs/:modelId', (c: Context) => {\n    const modelId = c.req.param('modelId');\n    const config = getModelConfig(modelId);\n    \n    if (!config) {\n      return c.json({ error: 'Model not found' }, 404);\n    }\n    \n    return c.json({\n      config,\n      defaults: getDefaultParameters(modelId)\n    });\n  });\n  \n  // Get base parameters for custom provider\n  app.get('/api/providers/custom/parameters', (c: Context) => {\n    return c.json({\n      parameters: getCustomBaseParameters()\n    });\n  });\n  \n  // Discover models from a custom OpenAI-compatible endpoint\n  app.post('/api/providers/discover-models', async (c: Context) => {\n    try {\n      const body = await c.req.json();\n      const { baseUrl, apiKey, provider } = body;\n      \n      if (!baseUrl) {\n        return c.json({ error: 'Base URL is required' }, 400);\n      }\n      \n      // Determine which provider to use for discovery\n      let models: Array<{ id: string; name: string; owned_by?: string }> = [];\n      \n      if (provider === 'openai') {\n        // Use OpenAI provider's listModels method\n        const openaiProvider = getProvider('openai') as OpenAIProvider | undefined;\n        if (openaiProvider && typeof openaiProvider.listModels === 'function') {\n          models = await openaiProvider.listModels(apiKey);\n        } else {\n          // Fallback to custom discovery\n          const customProvider = new CustomProvider({ baseUrl, apiKey });\n          models = await customProvider.listModels(baseUrl, apiKey);\n        }\n      } else {\n        // Use custom provider for OpenAI-compatible endpoints\n        const customProvider = new CustomProvider({ baseUrl, apiKey });\n        models = await customProvider.listModels(baseUrl, apiKey);\n      }\n      \n      return c.json({\n        success: true,\n        models,\n        count: models.length\n      });\n    } catch (error) {\n      console.error('[discover-models] Error:', error);\n      const message = error instanceof Error ? error.message : 'Unknown error';\n      return c.json({ \n        error: 'Failed to discover models', \n        details: message \n      }, 500);\n    }\n  });\n  \n  // Test provider connection\n  app.post('/api/providers/test-connection', async (c: Context) => {\n    try {\n      const body = await c.req.json();\n      const { baseUrl, apiKey, provider } = body;\n      \n      if (!baseUrl && provider !== 'groq' && provider !== 'openai' && provider !== 'anthropic') {\n        return c.json({ error: 'Base URL is required for custom providers' }, 400);\n      }\n      \n      // Try to list models as a connection test\n      const testUrl = (baseUrl || '').replace(/\\/$/, '');\n      const headers: Record = {};\n      \n      if (apiKey) {\n        if (provider === 'anthropic') {\n          headers['x-api-key'] = apiKey;\n          headers['anthropic-version'] = '2023-06-01';\n        } else {\n          headers['Authorization'] = 'Bearer ' + apiKey;\n        }\n      }\n      \n      // Different test endpoints based on provider\n      let testEndpoint = '/models';\n      if (provider === 'anthropic') {\n        // Anthropic doesn't have a models endpoint, so we'll just validate the key format\n        if (apiKey && apiKey.startsWith('sk-ant-')) {\n          return c.json({ \n            success: true, \n            message: 'API key format looks valid. Connection will be tested on first request.' \n          });\n        } else if (apiKey) {\n          return c.json({ \n            success: false, \n            error: 'Anthropic API keys should start with sk-ant-' \n          }, 400);\n        }\n        return c.json({ success: true, message: 'No API key provided, but connection can be tested on first request.' });\n      }\n      \n      const fullUrl = testUrl ? testUrl + testEndpoint : '';\n      \n      if (!fullUrl) {\n        return c.json({ error: 'Cannot test without a URL' }, 400);\n      }\n      \n      const response = await fetch(fullUrl, { headers });\n      \n      if (response.ok) {\n        const data = await response.json();\n        const modelCount = data.data?.length || (Array.isArray(data) ? data.length : 0);\n        return c.json({ \n          success: true, \n          message: 'Connection successful',\n          modelCount \n        });\n      } else {\n        const errorText = await response.text();\n        return c.json({ \n          success: false, \n          error: 'Connection failed: ' + response.status,\n          details: errorText.substring(0, 200)\n        }, response.status);\n      }\n    } catch (error) {\n      console.error('[test-connection] Error:', error);\n      const message = error instanceof Error ? error.message : 'Unknown error';\n      return c.json({ \n        success: false,\n        error: 'Connection test failed', \n        details: message \n      }, 500);\n    }\n  });\n}\n",[],[18,83,1425],"3d2c0410-ef19-11f0-a69f-42dde27851f2","jobs.ts","0e04994a-e2e9-11f0-b141-42dde27851f2",200,["D",1768155212782],"// Generic Jobs API with SSE updates\nimport type { Context } from \"https://deno.land/x/hono@v3.11.7/mod.ts\";\nimport { serverApiKey } from \"../config.ts\";\nimport { getProvider, getDefaultProvider } from \"../providers/index.ts\";\nimport type { ChatMessage, ChatCompletionOptions } from \"../providers/types.ts\";\nimport { validateParameters, transformParametersForAPI } from \"../providers/model-configs.ts\";\n\n// Job types\ntype JobStatus = 'pending' | 'running' | 'completed' | 'error' | 'cancelled';\ntype JobType = 'chat' | string; // Extensible for future job types\n\ninterface ChatJobInput {\n  messages: Array<{ role: string; content: string }>;\n  model?: string;\n  provider?: string;\n  temperature?: number;\n  maxTokens?: number;\n  topP?: number;\n  frequencyPenalty?: number;\n  presencePenalty?: number;\n  systemPrompt?: string;\n  reasoningEffort?: string;\n  webSearch?: boolean;\n  codeExecution?: boolean;\n  imageDetail?: string;\n  modelVersion?: string;\n  apiKey?: string;  // Add API key to job input\n  baseUrl?: string; // Add base URL for custom providers\n  stream?: boolean;  // Whether to use streaming (default: true)\n}\n\ninterface Job {\n  id: string;\n  type: JobType;\n  status: JobStatus;\n  createdAt: number;\n  updatedAt: number;\n  input: ChatJobInput | Record;\n  result: unknown;\n  error: string | null;\n  progress: number | null;\n  data: Record;\n  subscribers: Set;\n  abortController?: AbortController;\n}\n\n// In-memory job store. Suitable for single-process dev/local usage.\nconst jobs = new Map();\nlet jobCounter = 0;\n\nfunction now(): number {\n  return Date.now();\n}\n\nfunction newJobId(): string {\n  jobCounter += 1;\n  return `${now()}-${jobCounter}`;\n}\n\nfunction createJob(type: JobType, input: ChatJobInput | Record): Job {\n  const id = newJobId();\n  console.log(`[Jobs] Creating job ${id} of type: ${type}`);\n  const job: Job = {\n    id,\n    type,\n    status: \"pending\",\n    createdAt: now(),\n    updatedAt: now(),\n    input: input || {},\n    result: null,\n    error: null,\n    progress: null,\n    data: {},\n    subscribers: new Set(),\n    abortController: undefined,\n  };\n  jobs.set(id, job);\n  console.log(`[Jobs] Job ${id} created successfully`);\n  return job;\n}\n\nfunction getJob(id: string): Job | undefined {\n  return jobs.get(String(id));\n}\n\nfunction publish(job: Job, eventName: string, payload?: unknown): void {\n  const encoder = new TextEncoder();\n  const data = (payload === undefined) ? \"\" : JSON.stringify(payload);\n  const chunk = (eventName ? (`event: ${eventName}\\n`) : \"\") + `data: ${data}\\n\\n`;\n  for (const sub of job.subscribers) {\n    try {\n      sub.enqueue(encoder.encode(chunk));\n    } catch (_) {\n      /* ignore */\n    }\n  }\n}\n\nfunction completeJob(job: Job, result: unknown): void {\n  job.status = \"completed\";\n  job.updatedAt = now();\n  job.result = result || null;\n  publish(job, \"job\", { id: job.id, status: job.status, result: job.result });\n  // Best-effort close subscribers\n  for (const sub of job.subscribers) {\n    try {\n      sub.close();\n    } catch (_) {\n      /* ignore */\n    }\n  }\n  job.subscribers.clear();\n}\n\nfunction failJob(job: Job, message: string): void {\n  job.status = \"error\";\n  job.updatedAt = now();\n  job.error = String(message || \"error\");\n  publish(job, \"job\", { id: job.id, status: job.status, error: job.error });\n  for (const sub of job.subscribers) {\n    try {\n      sub.close();\n    } catch (_) {\n      /* ignore */\n    }\n  }\n  job.subscribers.clear();\n}\n\nfunction cancelJob(job: Job): void {\n  try {\n    job.abortController?.abort();\n  } catch (_) {\n    /* ignore */\n  }\n  job.status = \"cancelled\";\n  job.updatedAt = now();\n  publish(job, \"job\", { id: job.id, status: job.status });\n  for (const sub of job.subscribers) {\n    try {\n      sub.close();\n    } catch (_) {\n      /* ignore */\n    }\n  }\n  job.subscribers.clear();\n}\n\nasync function runChatJob(job: Job): Promise {\n  console.log(`[Jobs] Starting chat job ${job.id}`);\n  const input = job.input as ChatJobInput;\n  const {\n    messages,\n    model,\n    provider: providerName,\n    temperature,\n    maxTokens,\n    topP,\n    frequencyPenalty,\n    presencePenalty,\n    systemPrompt,\n    reasoningEffort,\n    webSearch,\n    codeExecution,\n    imageDetail,\n    modelVersion,\n    apiKey,  // Extract API key from input\n    baseUrl, // Extract base URL from input\n    stream: useStreaming = true,  // Default to streaming\n  } = input;\n\n  console.log(`[Jobs ${job.id}] Input - model: ${model}, provider: ${providerName}, messages: ${messages?.length || 0}`);\n\n  if (!messages || !Array.isArray(messages)) {\n    console.error(`[Jobs ${job.id}] ERROR: Messages array is required`);\n    failJob(job, \"Messages array is required\");\n    return;\n  }\n\n  // Get the requested provider or default\n  const provider = providerName ? getProvider(providerName) : getDefaultProvider();\n  if (!provider) {\n    console.error(`[Jobs ${job.id}] ERROR: Provider not found: ${providerName}`);\n    failJob(job, \"Provider not found: \" + providerName);\n    return;\n  }\n  \n  console.log(`[Jobs ${job.id}] Using provider: ${provider.name}`);\n  \n  // Skip isConfigured check if API key or baseUrl is provided (for custom providers)\n  if (!apiKey && !baseUrl && !provider.isConfigured()) {\n    console.error(`[Jobs ${job.id}] ERROR: Provider not configured: ${provider.name}`);\n    failJob(job, \"Provider not configured: \" + provider.name + \". Please provide an API key.\");\n    return;\n  }\n\n  // Validate and transform parameters for the specific model\n  let transformedParams: Record = {\n    reasoningEffort,\n    webSearch,\n    codeExecution,\n    imageDetail,\n  };\n  \n  // Skip validation for custom provider models (they may not be in the registry)\n  // Custom providers include 'custom', 'custom2', 'custom3', etc.\n  const isCustomProvider = (providerName && providerName.startsWith('custom')) || !!baseUrl;\n  \n  if (model && !isCustomProvider) {\n    const paramsToValidate: Record = {\n      temperature,\n      maxTokens,\n      topP,\n      frequencyPenalty,\n      presencePenalty,\n      reasoningEffort,\n      webSearch,\n      codeExecution,\n      imageDetail,\n    };\n    \n    // Remove undefined values for validation\n    Object.keys(paramsToValidate).forEach(key => {\n      if (paramsToValidate[key] === undefined) {\n        delete paramsToValidate[key];\n      }\n    });\n    \n    // Validate parameters\n    const validationErrors = validateParameters(model, paramsToValidate);\n    if (validationErrors.length > 0) {\n      console.error(`[Jobs ${job.id}] ERROR: Parameter validation failed:`, validationErrors);\n      failJob(job, \"Invalid parameters: \" + validationErrors.join(\", \"));\n      return;\n    }\n    \n    // Transform parameters (e.g., map 'medium' to 'default' for Qwen)\n    transformedParams = transformParametersForAPI(model, paramsToValidate);\n    console.log(`[Jobs ${job.id}] Transformed parameters:`, transformedParams);\n  } else if (model && isCustomProvider) {\n    console.log(`[Jobs ${job.id}] Skipping parameter validation for custom provider model: ${model}`);\n  }\n  \n  // Use transformed values\n  const options: ChatCompletionOptions = {\n    model,\n    temperature,\n    maxTokens,\n    topP,\n    frequencyPenalty,\n    presencePenalty,\n    systemPrompt,\n    reasoningEffort: transformedParams.reasoningEffort as 'low' | 'medium' | 'high' | undefined,\n    webSearch: transformedParams.webSearch as boolean | undefined,\n    codeExecution: transformedParams.codeExecution as boolean | undefined,\n    imageDetail: transformedParams.imageDetail as 'low' | 'auto' | 'high' | undefined,\n    stream: useStreaming,\n    apiKey,  // Pass API key to provider\n    baseUrl, // Pass base URL for custom providers\n  };\n\n  console.log(`[Jobs ${job.id}] Setting status to running, streaming: ${useStreaming}`);\n  job.status = \"running\";\n  job.updatedAt = now();\n  publish(job, \"job\", { id: job.id, status: job.status });\n  \n  // Helper to check if job was cancelled (TypeScript-safe)\n  const isCancelled = (): boolean => {\n    return job.status === 'cancelled';\n  };\n\n  const abortController = new AbortController();\n  job.abortController = abortController;\n\n  // Keep-alive ping for SSE connections\n  const keepAlive = setInterval(() => {\n    try {\n      publish(job, \"ping\", {});\n    } catch (_) {\n      /* ignore */\n    }\n  }, 15000);\n\n  try {\n    // Non-streaming mode: use complete() instead of stream()\n    if (!useStreaming) {\n      console.log(`[Jobs ${job.id}] Using non-streaming mode...`);\n      const response = await provider.complete(messages as ChatMessage[], options);\n      \n      console.log(`[Jobs ${job.id}] Non-streaming response received, content length: ${response.content?.length || 0}`);\n      \n      // Publish the complete response as a single chunk\n      publish(job, \"data\", {\n        content: response.content,\n        reasoning: undefined,\n        executedTools: undefined,\n        finishReason: \"stop\",\n      });\n      \n      completeJob(job, {\n        content: response.content,\n        reasoning: \"\",\n        tools: [],\n        usage: response.usage,\n      });\n      console.log(`[Jobs ${job.id}] Job completed successfully (non-streaming)`);\n      return;\n    }\n\n    // Streaming mode\n    let collapsedContent = \"\";\n    let collapsedReasoning = \"\";\n    const collectedTools: unknown[] = [];\n    let chunkCount = 0;\n\n    console.log(`[Jobs ${job.id}] Starting provider stream...`);\n    // Stream from provider\n    for await (const chunk of provider.stream(messages as ChatMessage[], options)) {\n      chunkCount++;\n      // Check if job was cancelled\n      if (isCancelled()) {\n        console.log(`[Jobs ${job.id}] Job cancelled, stopping stream`);\n        break;\n      }\n\n      if (chunk.done) {\n        console.log(`[Jobs ${job.id}] Stream completed (done=true), received ${chunkCount} chunks`);\n        break;\n      }\n\n      // Accumulate content\n      if (chunk.content) {\n        collapsedContent += chunk.content;\n      }\n      if (chunk.reasoning) {\n        collapsedReasoning += chunk.reasoning;\n      }\n      if (chunk.executedTools) {\n        collectedTools.push(chunk.executedTools);\n      }\n\n      // Publish chunk to subscribers\n      publish(job, \"data\", {\n        content: chunk.content,\n        reasoning: chunk.reasoning,\n        executedTools: chunk.executedTools,\n        finishReason: chunk.finishReason,\n      });\n    }\n\n    if (isCancelled()) {\n      console.log(`[Jobs ${job.id}] Job was cancelled`);\n      return;\n    }\n\n    console.log(`[Jobs ${job.id}] Completing job - content length: ${collapsedContent.length}, chunks: ${chunkCount}`);\n    completeJob(job, {\n      content: collapsedContent,\n      reasoning: collapsedReasoning,\n      tools: collectedTools,\n    });\n    console.log(`[Jobs ${job.id}] Job completed successfully`);\n  } catch (err) {\n    const currentStatus: JobStatus = job.status;\n    if (currentStatus === 'cancelled') {\n      console.log(`[Jobs ${job.id}] Job was cancelled (caught in error handler)`);\n      return;\n    }\n    console.error(`[Jobs ${job.id}] ERROR: ${(err as Error)?.message || String(err)}`);\n    console.error(`[Jobs ${job.id}] Error stack:`, (err as Error)?.stack);\n    failJob(job, (err as Error)?.message || String(err));\n  } finally {\n    clearInterval(keepAlive);\n    console.log(`[Jobs ${job.id}] Job execution finished, final status: ${job.status}`);\n  }\n}\n\ntype HonoApp = { \n  get: (path: string, handler: (c: Context) => unknown) => void;\n  post: (path: string, handler: (c: Context) => unknown) => void;\n};\n\nexport function registerJobsRoutes(app: HonoApp): void {\n  // Create job\n  app.post('/api/jobs', async (c: Context) => {\n    console.log('[Jobs API] POST /api/jobs - Creating new job');\n    try {\n      let body: Record = {};\n      try {\n        body = await c.req.json();\n      } catch (err) {\n        console.error('[Jobs API] Error parsing request body:', err);\n        body = {};\n      }\n      const { type, input } = body;\n      console.log(`[Jobs API] Job type: ${type}, input keys:`, Object.keys(input as object || {}));\n      \n      if (!type || typeof type !== 'string') {\n        console.error('[Jobs API] ERROR: Missing job type');\n        return c.json({ error: 'Missing job type' }, 400);\n      }\n      \n      const job = createJob(type, input as ChatJobInput | Record);\n      console.log(`[Jobs API] Created job ${job.id}, queuing execution...`);\n      \n      // Fire and forget runner based on type\n      queueMicrotask(() => {\n        console.log(`[Jobs API] Microtask executing for job ${job.id}`);\n        if (type === 'chat') {\n          runChatJob(job);\n        } else {\n          console.error(`[Jobs API] Unknown job type: ${type}`);\n          failJob(job, `Unknown job type: ${type}`);\n        }\n      });\n      \n      console.log(`[Jobs API] Returning response for job ${job.id}`);\n      return c.json({ id: job.id, status: job.status, createdAt: job.createdAt });\n    } catch (err) {\n      console.error('[Jobs API] ERROR in POST /api/jobs:', (err as Error)?.message);\n      console.error('[Jobs API] Error stack:', (err as Error)?.stack);\n      return c.json({ error: (err as Error)?.message || String(err) }, 500);\n    }\n  });\n\n  // Get job\n  app.get('/api/jobs/:id', (c: Context) => {\n    const id = c.req.param('id');\n    const job = getJob(id);\n    if (!job) {\n      return c.json({ error: 'Not found' }, 404);\n    }\n    return c.json({\n      id: job.id,\n      type: job.type,\n      status: job.status,\n      createdAt: job.createdAt,\n      updatedAt: job.updatedAt,\n      result: job.result,\n      error: job.error,\n      progress: job.progress\n    });\n  });\n\n  // List jobs (optionally filter by status)\n  app.get('/api/jobs', (c: Context) => {\n    const status = c.req.query('status');\n    const out: Array> = [];\n    for (const job of jobs.values()) {\n      if (status && job.status !== status) continue;\n      out.push({\n        id: job.id,\n        type: job.type,\n        status: job.status,\n        createdAt: job.createdAt,\n        updatedAt: job.updatedAt\n      });\n    }\n    return c.json({ jobs: out });\n  });\n\n  // Cancel job\n  app.post('/api/jobs/:id/cancel', (c: Context) => {\n    const id = c.req.param('id');\n    const job = getJob(id);\n    if (!job) {\n      return c.json({ error: 'Not found' }, 404);\n    }\n    if (job.status === 'completed' || job.status === 'error' || job.status === 'cancelled') {\n      return c.json({ id: job.id, status: job.status });\n    }\n    cancelJob(job);\n    return c.json({ id: job.id, status: job.status });\n  });\n\n  // Stream job updates via SSE\n  app.get('/api/jobs/:id/stream', (c: Context) => {\n    const id = c.req.param('id');\n    const job = getJob(id);\n    if (!job) {\n      return c.json({ error: 'Not found' }, 404);\n    }\n    \n    const stream = new ReadableStream({\n      start: (controller: ReadableStreamDefaultController) => {\n        // Track controller for cancellation\n        try {\n          (stream as unknown as { _controller: ReadableStreamDefaultController })._controller = controller;\n        } catch (_) {\n          /* ignore */\n        }\n        job.subscribers.add(controller);\n        \n        // Send initial state (include error if job already failed)\n        try {\n          const initialState: Record = {\n            id: job.id,\n            status: job.status,\n            createdAt: job.createdAt,\n            updatedAt: job.updatedAt\n          };\n          if (job.error) {\n            initialState.error = job.error;\n          }\n          publish(job, 'job', initialState);\n        } catch (_) {\n          /* ignore */\n        }\n      },\n      cancel: () => {\n        try {\n          const ctrl = (stream as unknown as { _controller?: ReadableStreamDefaultController })._controller;\n          if (ctrl) job.subscribers.delete(ctrl);\n        } catch (_) {\n          /* ignore */\n        }\n      }\n    });\n    \n    return new Response(stream, {\n      headers: {\n        'Content-Type': 'text/event-stream',\n        'Cache-Control': 'no-cache, no-transform',\n        'Connection': 'keep-alive',\n      },\n    });\n  });\n}\n\n",[],[18,83,1433],"0e001276-e2e9-11f0-b941-42dde27851f2","chat.ts","0e001320-e2e9-11f0-b941-42dde27851f2",117,["D",1766815103857],"// Chat API routes\nimport type { Context } from \"https://deno.land/x/hono@v3.11.7/mod.ts\";\nimport { getProvider, getDefaultProvider } from \"../providers/index.ts\";\nimport type { ChatMessage, ChatCompletionOptions } from \"../providers/types.ts\";\n\ntype HonoApp = { \n  get: (path: string, handler: (c: Context) => Promise | Response) => void;\n  post: (path: string, handler: (c: Context) => Promise | Response) => void;\n};\n\nexport function registerChatRoutes(app: HonoApp): void {\n  // Chat completion endpoint (streaming by default)\n  app.post('/api/chat', async (c: Context) => {\n    try {\n      const body = await c.req.json();\n      const { \n        messages, \n        model, \n        provider: providerName, \n        stream = true, \n        temperature, \n        maxTokens,\n        topP,\n        frequencyPenalty,\n        presencePenalty,\n        systemPrompt,\n        reasoningEffort,\n        webSearch,\n        codeExecution,\n        imageDetail,\n        modelVersion,\n        apiKey,  // Accept API key from frontend\n        baseUrl  // Accept base URL for custom providers\n      } = body;\n      \n      if (!messages || !Array.isArray(messages)) {\n        return c.json({ error: \"Messages array is required\" }, 400);\n      }\n\n      // Get the requested provider or default\n      const provider = providerName ? getProvider(providerName) : getDefaultProvider();\n      if (!provider) {\n        return c.json({ error: \"Provider not found: \" + providerName }, 400);\n      }\n      \n      // Skip isConfigured check if API key is provided in request\n      if (!apiKey && !provider.isConfigured()) {\n        return c.json({ error: \"Provider not configured: \" + provider.name + \". Please provide an API key.\" }, 500);\n      }\n\n      const options: ChatCompletionOptions = {\n        model,\n        temperature,\n        maxTokens,\n        topP,\n        frequencyPenalty,\n        presencePenalty,\n        systemPrompt,\n        reasoningEffort,\n        webSearch,\n        codeExecution,\n        imageDetail,\n        modelVersion,\n        stream,\n        apiKey,  // Pass API key to provider\n        baseUrl, // Pass base URL for custom providers\n        provider: providerName,\n      };\n\n      // Streaming response\n      if (stream) {\n        const encoder = new TextEncoder();\n        \n        const readableStream = new ReadableStream({\n          async start(controller) {\n            try {\n              for await (const chunk of provider.stream(messages as ChatMessage[], options)) {\n                if (chunk.done) {\n                  controller.enqueue(encoder.encode(\"data: [DONE]\\n\\n\"));\n                  break;\n                }\n                const data = JSON.stringify({ \n                  content: chunk.content, \n                  role: \"assistant\",\n                  raw: chunk.raw,\n                  reasoning: chunk.reasoning,\n                  executedTools: chunk.executedTools,\n                  finishReason: chunk.finishReason,\n                  message: chunk.message\n                });\n                controller.enqueue(encoder.encode(\"data: \" + data + \"\\n\\n\"));\n              }\n            } catch (error) {\n              const errorMsg = error instanceof Error ? error.message : \"Unknown error\";\n              controller.enqueue(encoder.encode(\"data: \" + JSON.stringify({ error: errorMsg }) + \"\\n\\n\"));\n            } finally {\n              controller.close();\n            }\n          },\n        });\n\n        return new Response(readableStream, {\n          headers: {\n            \"Content-Type\": \"text/event-stream\",\n            \"Cache-Control\": \"no-cache\",\n            \"Connection\": \"keep-alive\",\n          },\n        });\n      }\n\n      // Non-streaming response\n      const response = await provider.complete(messages as ChatMessage[], options);\n      \n      console.log(\"[Chat API response]:\", { provider: provider.name, model: response.model });\n      \n      return c.json({\n        content: response.content,\n        role: response.role,\n        model: response.model,\n        usage: response.usage,\n      });\n    } catch (error) {\n      console.error(\"Chat endpoint error:\", error);\n      const errorMsg = error instanceof Error ? error.message : \"Internal server error\";\n      return c.json({ error: errorMsg }, 500);\n    }\n  });\n\n  // Legacy non-streaming endpoint (kept for backwards compatibility)\n  app.post('/api/chat/complete', async (c: Context) => {\n    try {\n      const body = await c.req.json();\n      const { messages, model, provider: providerName, temperature, maxTokens } = body;\n      \n      if (!messages || !Array.isArray(messages)) {\n        return c.json({ error: \"Messages array is required\" }, 400);\n      }\n\n      const provider = providerName ? getProvider(providerName) : getDefaultProvider();\n      if (!provider) {\n        return c.json({ error: \"Provider not found: \" + providerName }, 400);\n      }\n      \n      if (!provider.isConfigured()) {\n        return c.json({ error: \"Provider not configured: \" + provider.name }, 500);\n      }\n\n      const response = await provider.complete(messages as ChatMessage[], {\n        model,\n        temperature,\n        maxTokens,\n      });\n      \n      return c.json({\n        content: response.content,\n        role: response.role,\n        model: response.model,\n        usage: response.usage,\n      });\n    } catch (error) {\n      console.error(\"Chat complete endpoint error:\", error);\n      const errorMsg = error instanceof Error ? error.message : \"Internal server error\";\n      return c.json({ error: errorMsg }, 500);\n    }\n  });\n}\n\n",[],[18,83,1441],["D",1766815098015],[244,245,246,247,248],[18,83],"0dcbd132-e2e9-11f0-8fcb-42dde27851f2","types.ts","0dcbd1f0-e2e9-11f0-8fcb-42dde27851f2",108,["D",1766815103504],"// Chat completion provider types\n\nexport interface ChatMessage {\n  role: \"user\" | \"assistant\" | \"system\";\n  content: string;\n}\n\nexport interface ChatCompletionOptions {\n  model?: string;\n  temperature?: number;\n  maxTokens?: number;\n  topP?: number;\n  frequencyPenalty?: number;\n  presencePenalty?: number;\n  stream?: boolean;\n  systemPrompt?: string;\n  // Reasoning/thinking options (supported by Groq, OpenAI o1/o3, Anthropic)\n  reasoningEffort?: 'low' | 'medium' | 'high';\n  // Groq-specific options\n  webSearch?: boolean;\n  codeExecution?: boolean;\n  imageDetail?: 'low' | 'auto' | 'high';\n  modelVersion?: 'latest' | 'stable' | string;\n  // OpenAI-specific options\n  responseFormat?: { type: string; [key: string]: unknown };\n  // API Key override - if provided, use this instead of default\n  apiKey?: string;\n  // Custom provider base URL override\n  baseUrl?: string;\n  // Provider identifier\n  provider?: string;\n}\n\nexport interface ChatCompletionResponse {\n  content: string;\n  role: \"assistant\";\n  model?: string;\n  usage?: {\n    promptTokens: number;\n    completionTokens: number;\n    totalTokens: number;\n  };\n}\n\nexport interface StreamChunk {\n  content: string;\n  done: boolean;\n  raw?: any; // Optional: full raw chunk data from provider\n  reasoning?: string; // Reasoning content from compound models\n  executedTools?: any; // Tool execution results\n  finishReason?: string; // Finish reason (stop, length, etc.)\n  message?: any; // Full message object if present in chunk\n}\n\nexport interface ChatProvider {\n  name: string;\n  defaultModel: string;\n  \n  // Non-streaming completion\n  complete(messages: ChatMessage[], options?: ChatCompletionOptions): Promise;\n  \n  // Streaming completion - returns an async iterable\n  stream(messages: ChatMessage[], options?: ChatCompletionOptions): AsyncIterable;\n  \n  // Check if provider is configured (has API key, etc.)\n  isConfigured(): boolean;\n}\n\n",[],[18,68,1452],"0de6eb84-e2e9-11f0-b941-42dde27851f2","test-parameter-validation.ts","0de6ec42-e2e9-11f0-b941-42dde27851f2",112,["D",1766815103514],"// Test script for parameter validation and transformation\n// Run with: deno run backend/providers/test-parameter-validation.ts\n\nimport { \n  validateParameters, \n  transformParametersForAPI,\n  getModelConfig,\n  getDefaultParameters \n} from \"./model-configs.ts\";\n\nconsole.log(\"=== Parameter Validation & Transformation Tests ===\\n\");\n\n// Test 1: Qwen model with reasoning effort\nconsole.log(\"Test 1: Qwen3-32B reasoning effort mapping\");\nconst qwenModel = 'qwen/qwen3-32b';\nconst qwenParams = {\n  reasoningEffort: 'medium',  // UI value\n  temperature: 0.7,\n};\n\nconst qwenTransformed = transformParametersForAPI(qwenModel, qwenParams);\nconsole.log(\"Input:\", qwenParams);\nconsole.log(\"Transformed:\", qwenTransformed);\nconsole.log(\"✓ Expected: reasoningEffort should be 'default'\\n\");\n\n// Test 2: Validation with invalid parameter\nconsole.log(\"Test 2: Validation with invalid reasoning effort\");\nconst invalidParams = {\n  reasoningEffort: 'super-high',  // Invalid value\n  temperature: 0.7,\n};\n\nconst errors = validateParameters(qwenModel, invalidParams);\nconsole.log(\"Input:\", invalidParams);\nconsole.log(\"Validation errors:\", errors);\nconsole.log(\"✓ Expected: Error about invalid reasoningEffort value\\n\");\n\n// Test 3: Get model config\nconsole.log(\"Test 3: Get Qwen model config\");\nconst config = getModelConfig(qwenModel);\nif (config) {\n  console.log(\"Model:\", config.name);\n  console.log(\"Provider:\", config.provider);\n  console.log(\"Capabilities:\", config.capabilities);\n  const reasoningParam = config.parameters.find(p => p.key === 'reasoningEffort');\n  if (reasoningParam && reasoningParam.type === 'select') {\n    console.log(\"Reasoning options:\", reasoningParam.options);\n    console.log(\"API mapping:\", (reasoningParam as any).apiMapping);\n  }\n} else {\n  console.log(\"Model not found!\");\n}\nconsole.log();\n\n// Test 4: Default parameters\nconsole.log(\"Test 4: Get default parameters for Qwen\");\nconst defaults = getDefaultParameters(qwenModel);\nconsole.log(\"Defaults:\", defaults);\nconsole.log();\n\n// Test 5: Backwards compatibility\nconsole.log(\"Test 5: Backwards compatibility - old values mapped\");\nconst oldValues = ['low', 'medium', 'high'];\nfor (const oldValue of oldValues) {\n  const transformed = transformParametersForAPI(qwenModel, { \n    reasoningEffort: oldValue \n  });\n  console.log(`  '${oldValue}' -> '${transformed.reasoningEffort}'`);\n}\nconsole.log();\n\n// Test 6: Valid Qwen parameters\nconsole.log(\"Test 6: Validation with valid Qwen parameters\");\nconst validQwenParams = {\n  reasoningEffort: 'default',\n  temperature: 0.7,\n  maxTokens: 2048,\n  webSearch: true,\n};\n\nconst validErrors = validateParameters(qwenModel, validQwenParams);\nconsole.log(\"Input:\", validQwenParams);\nconsole.log(\"Validation errors:\", validErrors.length === 0 ? \"None (valid!)\" : validErrors);\nconsole.log();\n\n// Test 7: Parameter range validation\nconsole.log(\"Test 7: Number parameter range validation\");\nconst rangeTestParams = {\n  temperature: 3.0,  // Out of range (max 2.0)\n  maxTokens: -100,   // Out of range (min 1)\n};\n\nconst rangeErrors = validateParameters(qwenModel, rangeTestParams);\nconsole.log(\"Input:\", rangeTestParams);\nconsole.log(\"Validation errors:\", rangeErrors);\nconsole.log();\n\n// Test 8: Model that doesn't exist\nconsole.log(\"Test 8: Invalid model\");\nconst invalidModelErrors = validateParameters('fake/model', { temperature: 0.7 });\nconsole.log(\"Validation errors:\", invalidModelErrors);\nconsole.log();\n\nconsole.log(\"=== All Tests Complete ===\");\nconsole.log(\"\\n✅ Parameter validation and transformation system working correctly!\");\n\n",[],[18,68,1460],"0da55336-e2e9-11f0-b141-42dde27851f2","openai.ts","0da553cc-e2e9-11f0-b141-42dde27851f2",105,["D",1766815103250],"// OpenAI Chat Provider\nimport type { ChatProvider, ChatMessage, ChatCompletionOptions, ChatCompletionResponse, StreamChunk } from \"./types.ts\";\n\nexport class OpenAIProvider implements ChatProvider {\n  name = \"openai\";\n  defaultModel = \"gpt-4o\";\n  \n  private apiKey: string | undefined;\n  private baseUrl = \"https://api.openai.com/v1\";\n  \n  constructor() {\n    this.apiKey = Deno.env.get(\"OPENAI_API_KEY\");\n  }\n  \n  isConfigured(): boolean {\n    return !!this.apiKey;\n  }\n  \n  async complete(messages: ChatMessage[], options?: ChatCompletionOptions): Promise {\n    // Use API key from options if provided, otherwise fall back to environment variable\n    const apiKey = options?.apiKey || this.apiKey;\n    \n    if (!apiKey) {\n      throw new Error(\"OPENAI_API_KEY not configured. Please add your API key in the chat settings.\");\n    }\n    \n    const model = options?.model || this.defaultModel;\n    const temperature = options?.temperature ?? 0.7;\n    const maxTokens = options?.maxTokens ?? 2048;\n    const topP = options?.topP ?? 1;\n    const frequencyPenalty = options?.frequencyPenalty ?? 0;\n    const presencePenalty = options?.presencePenalty ?? 0;\n    \n    // Add system prompt to messages if provided\n    const finalMessages = options?.systemPrompt \n      ? [{ role: \"system\" as const, content: options.systemPrompt }, ...messages]\n      : messages;\n    \n    // Build request headers\n    const headers: Record = {\n      \"Authorization\": \"Bearer \" + apiKey,\n      \"Content-Type\": \"application/json\",\n    };\n    \n    // Build request body\n    const requestBody: Record = {\n      model,\n      messages: finalMessages,\n      temperature,\n      max_tokens: maxTokens,\n      top_p: topP,\n      frequency_penalty: frequencyPenalty,\n      presence_penalty: presencePenalty,\n      stream: false,\n    };\n    \n    // Add reasoning effort for o1/o3 models\n    if (options?.reasoningEffort && (model.startsWith('o1') || model.startsWith('o3'))) {\n      requestBody.reasoning_effort = options.reasoningEffort;\n    }\n    \n    // Add response format for structured output\n    if (options?.responseFormat) {\n      requestBody.response_format = options.responseFormat;\n    }\n    \n    const response = await fetch(this.baseUrl + \"/chat/completions\", {\n      method: \"POST\",\n      headers,\n      body: JSON.stringify(requestBody),\n    });\n    \n    if (!response.ok) {\n      const errorText = await response.text();\n      console.error(\"OpenAI API error:\", response.status, errorText);\n      let errorMsg = \"Failed to get response from OpenAI API\";\n      try {\n        const errorData = JSON.parse(errorText);\n        errorMsg = errorData.error?.message || errorData.message || errorMsg;\n        if (response.status === 401 || response.status === 403) {\n          errorMsg = \"OpenAI API key is invalid or missing. Please check your API key in Settings → Models.\";\n        }\n      } catch {\n        // If error text isn't JSON, use the status code\n        if (response.status === 401 || response.status === 403) {\n          errorMsg = \"OpenAI API key is invalid or missing. Please check your API key in Settings → Models.\";\n        } else {\n          errorMsg = `OpenAI API error (${response.status}): ${errorText.substring(0, 200)}`;\n        }\n      }\n      throw new Error(errorMsg);\n    }\n    \n    const data = await response.json();\n    \n    console.log(\"[OpenAI API complete response]:\", JSON.stringify(data, null, 2));\n    \n    if (!data.choices || !data.choices[0] || !data.choices[0].message) {\n      throw new Error(\"Invalid response from OpenAI API\");\n    }\n    \n    return {\n      content: data.choices[0].message.content,\n      role: \"assistant\",\n      model: data.model,\n      usage: data.usage ? {\n        promptTokens: data.usage.prompt_tokens,\n        completionTokens: data.usage.completion_tokens,\n        totalTokens: data.usage.total_tokens,\n      } : undefined,\n    };\n  }\n  \n  async *stream(messages: ChatMessage[], options?: ChatCompletionOptions): AsyncIterable {\n    // Use API key from options if provided, otherwise fall back to environment variable\n    const apiKey = options?.apiKey || this.apiKey;\n    \n    if (!apiKey) {\n      throw new Error(\"OPENAI_API_KEY not configured. Please add your API key in the chat settings.\");\n    }\n    \n    const model = options?.model || this.defaultModel;\n    const temperature = options?.temperature ?? 0.7;\n    const maxTokens = options?.maxTokens ?? 2048;\n    const topP = options?.topP ?? 1;\n    const frequencyPenalty = options?.frequencyPenalty ?? 0;\n    const presencePenalty = options?.presencePenalty ?? 0;\n    \n    // Add system prompt to messages if provided\n    const finalMessages = options?.systemPrompt \n      ? [{ role: \"system\" as const, content: options.systemPrompt }, ...messages]\n      : messages;\n    \n    // Build request headers\n    const headers: Record = {\n      \"Authorization\": \"Bearer \" + apiKey,\n      \"Content-Type\": \"application/json\",\n    };\n    \n    // Build request body\n    const requestBody: Record = {\n      model,\n      messages: finalMessages,\n      temperature,\n      max_tokens: maxTokens,\n      top_p: topP,\n      frequency_penalty: frequencyPenalty,\n      presence_penalty: presencePenalty,\n      stream: true,\n    };\n    \n    // Add reasoning effort for o1/o3 models\n    if (options?.reasoningEffort && (model.startsWith('o1') || model.startsWith('o3'))) {\n      requestBody.reasoning_effort = options.reasoningEffort;\n    }\n    \n    console.log(\"[OpenAI stream] Request body:\", JSON.stringify(requestBody, null, 2));\n    \n    const response = await fetch(this.baseUrl + \"/chat/completions\", {\n      method: \"POST\",\n      headers,\n      body: JSON.stringify(requestBody),\n    });\n    \n    if (!response.ok) {\n      const errorText = await response.text();\n      console.error(\"[OpenAI stream] API error:\", response.status, errorText);\n      let errorMsg = \"Failed to start stream from OpenAI API\";\n      try {\n        const errorData = JSON.parse(errorText);\n        errorMsg = errorData.error?.message || errorData.message || errorMsg;\n        if (response.status === 401 || response.status === 403) {\n          errorMsg = \"OpenAI API key is invalid or missing. Please check your API key in Settings → Models.\";\n        }\n      } catch {\n        // If error text isn't JSON, use the status code\n        if (response.status === 401 || response.status === 403) {\n          errorMsg = \"OpenAI API key is invalid or missing. Please check your API key in Settings → Models.\";\n        } else {\n          errorMsg = `OpenAI API error (${response.status}): ${errorText.substring(0, 200)}`;\n        }\n      }\n      throw new Error(errorMsg);\n    }\n    \n    const reader = response.body?.getReader();\n    if (!reader) {\n      throw new Error(\"No response body for streaming\");\n    }\n    \n    const decoder = new TextDecoder();\n    let buffer = \"\";\n    let lineCount = 0;\n    \n    try {\n      while (true) {\n        const { done, value } = await reader.read();\n        \n        if (done) {\n          console.log(\"[OpenAI stream] Reader done, remaining buffer:\", buffer);\n          yield { content: \"\", done: true };\n          break;\n        }\n        \n        const chunk = decoder.decode(value, { stream: true });\n        buffer += chunk;\n        const lines = buffer.split(\"\\n\");\n        buffer = lines.pop() || \"\";\n        \n        for (const line of lines) {\n          const trimmed = line.trim();\n          if (!trimmed) continue;\n          \n          lineCount++;\n          if (lineCount <= 5) {\n            console.log(\"[OpenAI stream] Line \" + lineCount + \":\", trimmed.substring(0, 200));\n          }\n          \n          if (!trimmed.startsWith(\"data: \")) continue;\n          \n          const data = trimmed.slice(6);\n          if (data === \"[DONE]\") {\n            yield { content: \"\", done: true };\n            return;\n          }\n          \n          try {\n            const parsed = JSON.parse(data);\n            \n            if (parsed.error) {\n              const errorMsg = parsed.error?.message || JSON.stringify(parsed.error) || \"Unknown streaming error\";\n              console.error(\"[OpenAI stream] API error:\", errorMsg);\n              throw new Error(\"OpenAI API error: \" + errorMsg);\n            }\n            \n            const choice = parsed.choices?.[0];\n            const delta = choice?.delta || {};\n            \n            if (delta.content || choice?.finish_reason) {\n              yield { \n                content: delta.content || \"\", \n                done: false, \n                raw: parsed,\n                finishReason: choice?.finish_reason,\n              };\n            }\n          } catch (e) {\n            if (e instanceof Error && e.message.startsWith(\"OpenAI API error:\")) {\n              throw e;\n            }\n            console.error(\"[OpenAI stream] JSON parse error:\", e, \"data:\", data.substring(0, 100));\n          }\n        }\n      }\n    } finally {\n      console.log(\"[OpenAI stream] Total lines processed:\", lineCount);\n      reader.releaseLock();\n    }\n  }\n  \n  // List available models from the API\n  async listModels(apiKey?: string): Promise> {\n    const key = apiKey || this.apiKey;\n    if (!key) {\n      throw new Error(\"API key required to list models\");\n    }\n    \n    const response = await fetch(this.baseUrl + \"/models\", {\n      headers: {\n        \"Authorization\": \"Bearer \" + key,\n      },\n    });\n    \n    if (!response.ok) {\n      throw new Error(\"Failed to list models: \" + response.status);\n    }\n    \n    const data = await response.json();\n    \n    // Filter to chat models and sort\n    const chatModels = (data.data || [])\n      .filter((m: { id: string }) => \n        m.id.includes('gpt') || \n        m.id.includes('o1') || \n        m.id.includes('o3') ||\n        m.id.includes('chatgpt')\n      )\n      .map((m: { id: string }) => ({\n        id: m.id,\n        name: m.id,\n      }))\n      .sort((a: { id: string }, b: { id: string }) => a.id.localeCompare(b.id));\n    \n    return chatModels;\n  }\n}\n\n",[],[18,68,1468],"0da070e6-e2e9-11f0-b941-42dde27851f2","model-configs.ts","0da071a4-e2e9-11f0-b941-42dde27851f2",104,["D",1766815103229],"// Model Configuration Types System\n// Defines configurable parameters for each model/provider\n\n// =============================================================================\n// Parameter Type Definitions\n// =============================================================================\n\nexport type ParameterType = 'number' | 'string' | 'boolean' | 'select' | 'textarea';\n\nexport interface BaseParameter {\n  key: string;           // Internal key name (e.g., 'temperature')\n  label: string;         // Human-readable label\n  description?: string;  // Help text\n  type: ParameterType;\n  required?: boolean;\n  default?: unknown;\n}\n\nexport interface NumberParameter extends BaseParameter {\n  type: 'number';\n  min?: number;\n  max?: number;\n  step?: number;\n  default?: number;\n}\n\nexport interface StringParameter extends BaseParameter {\n  type: 'string';\n  maxLength?: number;\n  placeholder?: string;\n  default?: string;\n}\n\nexport interface TextareaParameter extends BaseParameter {\n  type: 'textarea';\n  maxLength?: number;\n  placeholder?: string;\n  rows?: number;\n  default?: string;\n}\n\nexport interface BooleanParameter extends BaseParameter {\n  type: 'boolean';\n  default?: boolean;\n}\n\nexport interface SelectParameter extends BaseParameter {\n  type: 'select';\n  options: Array<{ value: string; label: string }>;\n  default?: string;\n  apiMapping?: Record; // Maps UI value to API value (e.g., { low: 'none', medium: 'default' })\n}\n\nexport type ModelParameter = \n  | NumberParameter \n  | StringParameter \n  | TextareaParameter \n  | BooleanParameter \n  | SelectParameter;\n\n// =============================================================================\n// Model Configuration\n// =============================================================================\n\nexport interface ModelConfig {\n  id: string;                 // Model ID (e.g., 'llama-3.3-70b-versatile')\n  name: string;               // Display name\n  provider: string;           // Provider name (e.g., 'groq', 'openai')\n  description?: string;\n  parameters: ModelParameter[];\n  capabilities?: {\n    web?: boolean;\n    thinking?: boolean;\n    image?: boolean;\n    streaming?: boolean;\n    tools?: boolean;\n  };\n  // Optional: Transform parameters before sending to API\n  // This allows us to map UI values to provider-specific API values\n  transformParameters?: (params: Record) => Record;\n}\n\n// =============================================================================\n// Chat Session Metadata\n// =============================================================================\n\nexport interface ChatSessionMetadata {\n  systemPrompt?: string;\n  defaultModel?: string;\n  parameters?: Record;  // Model-specific parameters\n  createdAt?: string;\n  updatedAt?: string;\n}\n\n// =============================================================================\n// Message Metadata (stored per message for tracing)\n// =============================================================================\n\nexport interface MessageMetadata {\n  model?: string;              // Model used for this message\n  temperature?: number;\n  maxTokens?: number;\n  parameters?: Record;  // All parameters used\n  usage?: {\n    promptTokens?: number;\n    completionTokens?: number;\n    totalTokens?: number;\n  };\n  latencyMs?: number;          // Response time\n  reasoning?: string;          // For thinking models\n}\n\n// =============================================================================\n// Groq Model Configurations\n// =============================================================================\n\nconst GROQ_BASE_PARAMETERS: ModelParameter[] = [\n  {\n    key: 'temperature',\n    label: 'Temperature',\n    description: 'Controls randomness. Lower values are more focused, higher values are more creative.',\n    type: 'number',\n    min: 0,\n    max: 2,\n    step: 0.1,\n    default: 0.7\n  },\n  {\n    key: 'maxTokens',\n    label: 'Max Tokens',\n    description: 'Maximum number of tokens to generate.',\n    type: 'number',\n    min: 1,\n    max: 32768,\n    step: 1,\n    default: 2048\n  },\n  {\n    key: 'topP',\n    label: 'Top P',\n    description: 'Nucleus sampling threshold. Lower values are more focused.',\n    type: 'number',\n    min: 0,\n    max: 1,\n    step: 0.05,\n    default: 1\n  },\n  {\n    key: 'frequencyPenalty',\n    label: 'Frequency Penalty',\n    description: 'Reduces repetition of tokens. Higher values discourage repetition.',\n    type: 'number',\n    min: -2,\n    max: 2,\n    step: 0.1,\n    default: 0\n  },\n  {\n    key: 'presencePenalty',\n    label: 'Presence Penalty',\n    description: 'Encourages new topics. Higher values increase topic diversity.',\n    type: 'number',\n    min: -2,\n    max: 2,\n    step: 0.1,\n    default: 0\n  }\n];\n\nconst COMPOUND_PARAMETERS: ModelParameter[] = [\n  ...GROQ_BASE_PARAMETERS,\n  {\n    key: 'webSearch',\n    label: 'Web Search',\n    description: 'Enable web search for real-time information.',\n    type: 'boolean',\n    default: true\n  }\n];\n\nconst THINKING_PARAMETERS: ModelParameter[] = [\n  ...GROQ_BASE_PARAMETERS,\n  {\n    key: 'reasoningEffort',\n    label: 'Reasoning Effort',\n    description: 'How much effort to put into reasoning/thinking (low, medium, high).',\n    type: 'select',\n    options: [\n      { value: 'low', label: 'Low' },\n      { value: 'medium', label: 'Medium' },\n      { value: 'high', label: 'High' }\n    ],\n    default: 'medium'\n  },\n  {\n    key: 'webSearch',\n    label: 'Web Search',\n    description: 'Enable web search for real-time information.',\n    type: 'boolean',\n    default: false\n  },\n  {\n    key: 'codeExecution',\n    label: 'Code Execution',\n    description: 'Enable code execution capabilities.',\n    type: 'boolean',\n    default: false\n  }\n];\n\nconst VISION_PARAMETERS: ModelParameter[] = [\n  ...GROQ_BASE_PARAMETERS,\n  {\n    key: 'imageDetail',\n    label: 'Image Detail',\n    description: 'Level of detail for image processing.',\n    type: 'select',\n    options: [\n      { value: 'low', label: 'Low' },\n      { value: 'auto', label: 'Auto' },\n      { value: 'high', label: 'High' }\n    ],\n    default: 'auto'\n  }\n];\n\n// =============================================================================\n// Groq Model Registry\n// =============================================================================\n\nexport const GROQ_MODEL_CONFIGS: ModelConfig[] = [\n  // Compound Systems (Agentic AI)\n  {\n    id: 'groq/compound',\n    name: 'Compound',\n    provider: 'groq',\n    description: 'AI system with built-in tools including web search and code execution.',\n    parameters: COMPOUND_PARAMETERS,\n    capabilities: { web: true, streaming: true, tools: true }\n  },\n  {\n    id: 'groq/compound-mini',\n    name: 'Compound Mini',\n    provider: 'groq',\n    description: 'Faster, lighter version with web search and code execution.',\n    parameters: COMPOUND_PARAMETERS,\n    capabilities: { web: true, streaming: true, tools: true }\n  },\n  \n  // OpenAI GPT-OSS Models (Thinking + Tools)\n  {\n    id: 'openai/gpt-oss-120b',\n    name: 'GPT OSS 120B',\n    provider: 'groq',\n    description: 'OpenAI\\'s flagship 120B parameter model with browser search and reasoning.',\n    parameters: THINKING_PARAMETERS,\n    capabilities: { web: true, thinking: true, streaming: true, tools: true }\n  },\n  {\n    id: 'openai/gpt-oss-20b',\n    name: 'GPT OSS 20B',\n    provider: 'groq',\n    description: 'Fast 20B model with web search, thinking, and code execution.',\n    parameters: THINKING_PARAMETERS,\n    capabilities: { web: true, thinking: true, streaming: true, tools: true }\n  },\n  {\n    id: 'openai/gpt-oss-safeguard-20b',\n    name: 'Safety GPT OSS 20B',\n    provider: 'groq',\n    description: 'Safe responses with web search, thinking, and moderation.',\n    parameters: THINKING_PARAMETERS,\n    capabilities: { web: true, thinking: true, streaming: true, tools: true }\n  },\n  \n  // Llama 3.x Production Models\n  {\n    id: 'llama-3.1-8b-instant',\n    name: 'Llama 3.1 8B Instant',\n    provider: 'groq',\n    description: 'Ultra-fast 8B model for instant responses (560 t/s).',\n    parameters: GROQ_BASE_PARAMETERS,\n    capabilities: { streaming: true }\n  },\n  {\n    id: 'llama-3.3-70b-versatile',\n    name: 'Llama 3.3 70B Versatile',\n    provider: 'groq',\n    description: 'Versatile 70B model for a wide range of tasks (280 t/s).',\n    parameters: GROQ_BASE_PARAMETERS,\n    capabilities: { streaming: true }\n  },\n  \n  // Llama 4 Vision Models (Preview)\n  {\n    id: 'meta-llama/llama-4-maverick-17b-128e-instruct',\n    name: 'Llama 4 Maverick 17B 128E',\n    provider: 'groq',\n    description: 'Powerful image understanding and analysis (600 t/s).',\n    parameters: VISION_PARAMETERS,\n    capabilities: { image: true, streaming: true }\n  },\n  {\n    id: 'meta-llama/llama-4-scout-17b-16e-instruct',\n    name: 'Llama 4 Scout 17B 16E',\n    provider: 'groq',\n    description: 'Fast responses with image support (750 t/s).',\n    parameters: VISION_PARAMETERS,\n    capabilities: { image: true, streaming: true }\n  },\n  \n  // Specialized Models\n  {\n    id: 'moonshotai/kimi-k2-instruct-0905',\n    name: 'Kimi K2 0905',\n    provider: 'groq',\n    description: 'Highly capable for writing and coding with 262K context.',\n    parameters: GROQ_BASE_PARAMETERS,\n    capabilities: { streaming: true }\n  },\n  {\n    id: 'qwen/qwen3-32b',\n    name: 'Qwen3-32B',\n    provider: 'groq',\n    description: 'Multilingual responses with thinking capabilities.',\n    parameters: [\n      ...GROQ_BASE_PARAMETERS,\n      {\n        key: 'reasoningEffort',\n        label: 'Reasoning Effort',\n        description: 'How much effort to put into reasoning/thinking.',\n        type: 'select',\n        options: [\n          { value: 'none', label: 'None' },\n          { value: 'default', label: 'Default' }\n        ],\n        default: 'default',\n        apiMapping: {\n          'none': 'none',\n          'default': 'default',\n          // Map old values for backwards compatibility\n          'low': 'none',\n          'medium': 'default',\n          'high': 'default'\n        }\n      } as SelectParameter,\n      {\n        key: 'webSearch',\n        label: 'Web Search',\n        description: 'Enable web search for real-time information.',\n        type: 'boolean',\n        default: false\n      },\n      {\n        key: 'codeExecution',\n        label: 'Code Execution',\n        description: 'Enable code execution capabilities.',\n        type: 'boolean',\n        default: false\n      }\n    ],\n    capabilities: { thinking: true, streaming: true }\n  },\n  \n  // Guard/Safety Models\n  {\n    id: 'meta-llama/llama-guard-4-12b',\n    name: 'Llama Guard 4 12B',\n    provider: 'groq',\n    description: 'Content moderation and safety checking (1200 t/s).',\n    parameters: GROQ_BASE_PARAMETERS,\n    capabilities: { streaming: true }\n  }\n];\n\n// =============================================================================\n// OpenAI Base Parameters\n// =============================================================================\n\nconst OPENAI_BASE_PARAMETERS: ModelParameter[] = [\n  {\n    key: 'temperature',\n    label: 'Temperature',\n    description: 'Controls randomness. Lower values are more focused, higher values are more creative.',\n    type: 'number',\n    min: 0,\n    max: 2,\n    step: 0.1,\n    default: 0.7\n  },\n  {\n    key: 'maxTokens',\n    label: 'Max Tokens',\n    description: 'Maximum number of tokens to generate.',\n    type: 'number',\n    min: 1,\n    max: 128000,\n    step: 1,\n    default: 4096\n  },\n  {\n    key: 'topP',\n    label: 'Top P',\n    description: 'Nucleus sampling threshold.',\n    type: 'number',\n    min: 0,\n    max: 1,\n    step: 0.05,\n    default: 1\n  },\n  {\n    key: 'frequencyPenalty',\n    label: 'Frequency Penalty',\n    description: 'Reduces repetition of tokens.',\n    type: 'number',\n    min: -2,\n    max: 2,\n    step: 0.1,\n    default: 0\n  },\n  {\n    key: 'presencePenalty',\n    label: 'Presence Penalty',\n    description: 'Encourages new topics.',\n    type: 'number',\n    min: -2,\n    max: 2,\n    step: 0.1,\n    default: 0\n  }\n];\n\nconst OPENAI_REASONING_PARAMETERS: ModelParameter[] = [\n  ...OPENAI_BASE_PARAMETERS,\n  {\n    key: 'reasoningEffort',\n    label: 'Reasoning Effort',\n    description: 'How much effort to put into reasoning (o1/o3 models only).',\n    type: 'select',\n    options: [\n      { value: 'low', label: 'Low' },\n      { value: 'medium', label: 'Medium' },\n      { value: 'high', label: 'High' }\n    ],\n    default: 'medium'\n  }\n];\n\n// =============================================================================\n// OpenAI Model Registry\n// =============================================================================\n\nexport const OPENAI_MODEL_CONFIGS: ModelConfig[] = [\n  // GPT-5.2 Series (Latest - Dec 2025)\n  {\n    id: 'gpt-5.2',\n    name: 'GPT-5.2',\n    provider: 'openai',\n    description: 'The best model for coding and agentic tasks across industries.',\n    parameters: OPENAI_BASE_PARAMETERS,\n    capabilities: { image: true, streaming: true, tools: true, thinking: true }\n  },\n  {\n    id: 'gpt-5.2-pro',\n    name: 'GPT-5.2 Pro',\n    provider: 'openai',\n    description: 'Version of GPT-5.2 that produces smarter and more precise responses.',\n    parameters: OPENAI_REASONING_PARAMETERS,\n    capabilities: { image: true, streaming: true, tools: true, thinking: true }\n  },\n  {\n    id: 'gpt-5.1',\n    name: 'GPT-5.1',\n    provider: 'openai',\n    description: 'The best model for coding and agentic tasks with configurable reasoning effort.',\n    parameters: OPENAI_REASONING_PARAMETERS,\n    capabilities: { image: true, streaming: true, tools: true, thinking: true }\n  },\n  {\n    id: 'gpt-5',\n    name: 'GPT-5',\n    provider: 'openai',\n    description: 'Flagship model for coding, reasoning, and agentic tasks across domains.',\n    parameters: OPENAI_BASE_PARAMETERS,\n    capabilities: { image: true, streaming: true, tools: true, thinking: true }\n  },\n  {\n    id: 'gpt-5-pro',\n    name: 'GPT-5 Pro',\n    provider: 'openai',\n    description: 'Most advanced reasoning model that uses more compute for smarter, more precise responses.',\n    parameters: OPENAI_REASONING_PARAMETERS,\n    capabilities: { image: true, streaming: true, tools: true, thinking: true }\n  },\n  {\n    id: 'gpt-5-mini',\n    name: 'GPT-5 Mini',\n    provider: 'openai',\n    description: 'Faster, cost-efficient version of GPT-5 for well-defined tasks.',\n    parameters: OPENAI_BASE_PARAMETERS,\n    capabilities: { image: true, streaming: true, tools: true }\n  },\n  {\n    id: 'gpt-5-nano',\n    name: 'GPT-5 Nano',\n    provider: 'openai',\n    description: 'Fastest, most cost-efficient version of GPT-5 for summarization and classification.',\n    parameters: OPENAI_BASE_PARAMETERS,\n    capabilities: { image: true, streaming: true, tools: true }\n  },\n  \n  // GPT-4.1 Series (1M Context)\n  {\n    id: 'gpt-4.1',\n    name: 'GPT-4.1',\n    provider: 'openai',\n    description: 'Smartest non-reasoning model - excels at instruction following and tool calling with 1M context.',\n    parameters: OPENAI_BASE_PARAMETERS,\n    capabilities: { image: true, streaming: true, tools: true }\n  },\n  \n  // o-series Reasoning Models (Latest)\n  {\n    id: 'o3-pro',\n    name: 'o3 Pro',\n    provider: 'openai',\n    description: 'Highest reasoning model with reinforcement learning - uses more compute for consistently better answers.',\n    parameters: OPENAI_REASONING_PARAMETERS,\n    capabilities: { thinking: true, streaming: true, image: true, tools: true }\n  },\n  {\n    id: 'o3-deep-research',\n    name: 'o3 Deep Research',\n    provider: 'openai',\n    description: 'Most advanced deep research model for complex multi-step research with internet search and synthesis.',\n    parameters: OPENAI_REASONING_PARAMETERS,\n    capabilities: { thinking: true, streaming: true, image: true, tools: true }\n  },\n  {\n    id: 'o4-mini-deep-research',\n    name: 'o4-mini Deep Research',\n    provider: 'openai',\n    description: 'Faster, affordable deep research model for complex multi-step research tasks with internet search.',\n    parameters: OPENAI_REASONING_PARAMETERS,\n    capabilities: { thinking: true, streaming: true, image: true, tools: true }\n  },\n  {\n    id: 'o3',\n    name: 'o3',\n    provider: 'openai',\n    description: 'Advanced reasoning model for complex multi-step tasks.',\n    parameters: OPENAI_REASONING_PARAMETERS,\n    capabilities: { thinking: true, streaming: true, image: true, tools: true }\n  },\n  {\n    id: 'o3-mini',\n    name: 'o3-mini',\n    provider: 'openai',\n    description: 'Fast, flexible reasoning for coding and problem-solving.',\n    parameters: OPENAI_REASONING_PARAMETERS,\n    capabilities: { thinking: true, streaming: true }\n  },\n  \n  // o1 Reasoning Models (Legacy)\n  {\n    id: 'o1',\n    name: 'o1',\n    provider: 'openai',\n    description: 'Original reasoning model for complex analysis.',\n    parameters: OPENAI_REASONING_PARAMETERS,\n    capabilities: { thinking: true, streaming: true, image: true }\n  },\n  {\n    id: 'o1-mini',\n    name: 'o1-mini',\n    provider: 'openai',\n    description: 'Efficient reasoning model for coding and math.',\n    parameters: OPENAI_REASONING_PARAMETERS,\n    capabilities: { thinking: true, streaming: true }\n  },\n  {\n    id: 'o1-pro',\n    name: 'o1-pro',\n    provider: 'openai',\n    description: 'Enhanced compute for hard problems.',\n    parameters: OPENAI_REASONING_PARAMETERS,\n    capabilities: { thinking: true, streaming: true, image: true }\n  },\n  \n  // GPT-4o Series (Legacy - still fast & cheap)\n  {\n    id: 'gpt-4o',\n    name: 'GPT-4o',\n    provider: 'openai',\n    description: 'High-intelligence model with vision, fast and affordable.',\n    parameters: OPENAI_BASE_PARAMETERS,\n    capabilities: { image: true, streaming: true, tools: true }\n  },\n  {\n    id: 'gpt-4o-mini',\n    name: 'GPT-4o Mini',\n    provider: 'openai',\n    description: 'Small, fast, and affordable. Great for most tasks.',\n    parameters: OPENAI_BASE_PARAMETERS,\n    capabilities: { image: true, streaming: true, tools: true }\n  }\n];\n\n// =============================================================================\n// Anthropic Base Parameters\n// =============================================================================\n\nconst ANTHROPIC_BASE_PARAMETERS: ModelParameter[] = [\n  {\n    key: 'temperature',\n    label: 'Temperature',\n    description: 'Controls randomness. Lower values are more focused.',\n    type: 'number',\n    min: 0,\n    max: 1,\n    step: 0.1,\n    default: 0.7\n  },\n  {\n    key: 'maxTokens',\n    label: 'Max Tokens',\n    description: 'Maximum number of tokens to generate.',\n    type: 'number',\n    min: 1,\n    max: 200000,\n    step: 1,\n    default: 4096\n  },\n  {\n    key: 'topP',\n    label: 'Top P',\n    description: 'Nucleus sampling threshold.',\n    type: 'number',\n    min: 0,\n    max: 1,\n    step: 0.05,\n    default: 1\n  }\n];\n\nconst ANTHROPIC_THINKING_PARAMETERS: ModelParameter[] = [\n  ...ANTHROPIC_BASE_PARAMETERS,\n  {\n    key: 'reasoningEffort',\n    label: 'Extended Thinking',\n    description: 'Enable extended thinking with budget tokens.',\n    type: 'select',\n    options: [\n      { value: 'low', label: 'Low (5K tokens)' },\n      { value: 'medium', label: 'Medium (10K tokens)' },\n      { value: 'high', label: 'High (20K tokens)' }\n    ],\n    default: 'medium'\n  }\n];\n\n// =============================================================================\n// Anthropic Model Registry\n// =============================================================================\n\nexport const ANTHROPIC_MODEL_CONFIGS: ModelConfig[] = [\n  // Claude 4.5 Series (Latest - 2025)\n  {\n    id: 'claude-opus-4-5-20251124',\n    name: 'Claude Opus 4.5',\n    provider: 'anthropic',\n    description: 'Most advanced model for complex tasks requiring extended autonomous operation and deep reasoning.',\n    parameters: ANTHROPIC_THINKING_PARAMETERS,\n    capabilities: { thinking: true, image: true, streaming: true, tools: true }\n  },\n  {\n    id: 'claude-sonnet-4-5-20250929',\n    name: 'Claude Sonnet 4.5',\n    provider: 'anthropic',\n    description: 'Optimized for real-world agents, coding, and computer use with enhanced capabilities.',\n    parameters: ANTHROPIC_THINKING_PARAMETERS,\n    capabilities: { thinking: true, image: true, streaming: true, tools: true }\n  },\n  {\n    id: 'claude-haiku-4-5-20251015',\n    name: 'Claude Haiku 4.5',\n    provider: 'anthropic',\n    description: 'Lightweight and fast model designed for real-time experiences with low latency.',\n    parameters: ANTHROPIC_BASE_PARAMETERS,\n    capabilities: { image: true, streaming: true, tools: true }\n  },\n  \n  // Claude 4 Series\n  {\n    id: 'claude-opus-4-1-20250805',\n    name: 'Claude Opus 4.1',\n    provider: 'anthropic',\n    description: 'Most capable and intelligent model, setting new standards in complex reasoning and advanced coding.',\n    parameters: ANTHROPIC_THINKING_PARAMETERS,\n    capabilities: { thinking: true, image: true, streaming: true, tools: true }\n  },\n  {\n    id: 'claude-opus-4-20250514',\n    name: 'Claude Opus 4',\n    provider: 'anthropic',\n    description: 'Highly capable model for complex tasks requiring deep reasoning.',\n    parameters: ANTHROPIC_THINKING_PARAMETERS,\n    capabilities: { thinking: true, image: true, streaming: true, tools: true }\n  },\n  {\n    id: 'claude-sonnet-4-20250514',\n    name: 'Claude Sonnet 4',\n    provider: 'anthropic',\n    description: 'Excellent balance of performance, speed, and cost with extended thinking.',\n    parameters: ANTHROPIC_THINKING_PARAMETERS,\n    capabilities: { thinking: true, image: true, streaming: true, tools: true }\n  },\n  \n  // Claude 3.7 Series\n  {\n    id: 'claude-3-7-sonnet-20250219',\n    name: 'Claude 3.7 Sonnet',\n    provider: 'anthropic',\n    description: 'Hybrid model with extended thinking capabilities.',\n    parameters: ANTHROPIC_THINKING_PARAMETERS,\n    capabilities: { thinking: true, image: true, streaming: true, tools: true }\n  },\n  \n  // Claude 3.5 Series\n  {\n    id: 'claude-3-5-sonnet-20241022',\n    name: 'Claude 3.5 Sonnet',\n    provider: 'anthropic',\n    description: 'High performance for complex reasoning and coding.',\n    parameters: ANTHROPIC_THINKING_PARAMETERS,\n    capabilities: { thinking: true, image: true, streaming: true, tools: true }\n  },\n  {\n    id: 'claude-3-5-haiku-20241022',\n    name: 'Claude 3.5 Haiku',\n    provider: 'anthropic',\n    description: 'Fast and cost-effective for simple tasks.',\n    parameters: ANTHROPIC_BASE_PARAMETERS,\n    capabilities: { image: true, streaming: true, tools: true }\n  },\n  \n  // Claude 3 Series (Legacy)\n  {\n    id: 'claude-3-opus-20240229',\n    name: 'Claude 3 Opus',\n    provider: 'anthropic',\n    description: 'Highly capable for complex analysis and coding.',\n    parameters: ANTHROPIC_BASE_PARAMETERS,\n    capabilities: { image: true, streaming: true, tools: true }\n  },\n  {\n    id: 'claude-3-sonnet-20240229',\n    name: 'Claude 3 Sonnet',\n    provider: 'anthropic',\n    description: 'Balanced performance and cost.',\n    parameters: ANTHROPIC_BASE_PARAMETERS,\n    capabilities: { image: true, streaming: true, tools: true }\n  },\n  {\n    id: 'claude-3-haiku-20240307',\n    name: 'Claude 3 Haiku',\n    provider: 'anthropic',\n    description: 'Fastest Claude 3 model.',\n    parameters: ANTHROPIC_BASE_PARAMETERS,\n    capabilities: { streaming: true, tools: true }\n  }\n];\n\n// =============================================================================\n// Custom Provider Parameters (OpenAI-compatible)\n// =============================================================================\n\nconst CUSTOM_BASE_PARAMETERS: ModelParameter[] = [\n  {\n    key: 'temperature',\n    label: 'Temperature',\n    description: 'Controls randomness.',\n    type: 'number',\n    min: 0,\n    max: 2,\n    step: 0.1,\n    default: 0.7\n  },\n  {\n    key: 'maxTokens',\n    label: 'Max Tokens',\n    description: 'Maximum number of tokens to generate.',\n    type: 'number',\n    min: 1,\n    max: 128000,\n    step: 1,\n    default: 2048\n  },\n  {\n    key: 'topP',\n    label: 'Top P',\n    description: 'Nucleus sampling threshold.',\n    type: 'number',\n    min: 0,\n    max: 1,\n    step: 0.05,\n    default: 1\n  },\n  {\n    key: 'frequencyPenalty',\n    label: 'Frequency Penalty',\n    description: 'Reduces repetition.',\n    type: 'number',\n    min: -2,\n    max: 2,\n    step: 0.1,\n    default: 0\n  },\n  {\n    key: 'presencePenalty',\n    label: 'Presence Penalty',\n    description: 'Encourages new topics.',\n    type: 'number',\n    min: -2,\n    max: 2,\n    step: 0.1,\n    default: 0\n  }\n];\n\n// Custom models start empty - populated via auto-discovery\nexport const CUSTOM_MODEL_CONFIGS: ModelConfig[] = [];\n\n// =============================================================================\n// Combined Model Registry\n// =============================================================================\n\nexport const ALL_MODEL_CONFIGS: ModelConfig[] = [\n  ...GROQ_MODEL_CONFIGS,\n  ...OPENAI_MODEL_CONFIGS,\n  ...ANTHROPIC_MODEL_CONFIGS,\n  ...CUSTOM_MODEL_CONFIGS,\n];\n\n// =============================================================================\n// Helper Functions\n// =============================================================================\n\nexport function getModelConfig(modelId: string): ModelConfig | undefined {\n  return ALL_MODEL_CONFIGS.find(m => m.id === modelId);\n}\n\nexport function getModelConfigsByProvider(provider: string): ModelConfig[] {\n  return ALL_MODEL_CONFIGS.filter(m => m.provider === provider);\n}\n\nexport function getCustomBaseParameters(): ModelParameter[] {\n  return CUSTOM_BASE_PARAMETERS;\n}\n\nexport function getDefaultParameters(modelId: string): Record {\n  const config = getModelConfig(modelId);\n  if (!config) return {};\n  \n  const defaults: Record = {};\n  for (const param of config.parameters) {\n    if (param.default !== undefined) {\n      defaults[param.key] = param.default;\n    }\n  }\n  return defaults;\n}\n\n// Transform parameters from UI values to API values\n// This handles things like mapping 'medium' -> 'default' for reasoning_effort\nexport function transformParametersForAPI(\n  modelId: string, \n  params: Record\n): Record {\n  const config = getModelConfig(modelId);\n  if (!config) return params;\n  \n  const transformed: Record = { ...params };\n  \n  // Apply per-parameter transformations\n  for (const param of config.parameters) {\n    const value = transformed[param.key];\n    if (value === undefined) continue;\n    \n    // Handle select parameters with API mappings\n    if (param.type === 'select' && (param as SelectParameter).apiMapping) {\n      const mapping = (param as SelectParameter).apiMapping!;\n      const stringValue = String(value);\n      if (stringValue in mapping) {\n        transformed[param.key] = mapping[stringValue];\n      }\n    }\n  }\n  \n  // Apply model-specific transformations\n  if (config.transformParameters) {\n    return config.transformParameters(transformed);\n  }\n  \n  return transformed;\n}\n\n// Validate parameters against model config\n// Returns array of validation errors, empty if valid\nexport function validateParameters(\n  modelId: string,\n  params: Record\n): string[] {\n  const config = getModelConfig(modelId);\n  if (!config) return [`Model ${modelId} not found`];\n  \n  const errors: string[] = [];\n  \n  for (const param of config.parameters) {\n    const value = params[param.key];\n    \n    // Check required parameters\n    if (param.required && (value === undefined || value === null)) {\n      errors.push(`Parameter ${param.key} is required`);\n      continue;\n    }\n    \n    if (value === undefined || value === null) continue;\n    \n    // Type-specific validation\n    switch (param.type) {\n      case 'number': {\n        const numParam = param as NumberParameter;\n        const numValue = Number(value);\n        if (isNaN(numValue)) {\n          errors.push(`Parameter ${param.key} must be a number`);\n        } else {\n          if (numParam.min !== undefined && numValue < numParam.min) {\n            errors.push(`Parameter ${param.key} must be >= ${numParam.min}`);\n          }\n          if (numParam.max !== undefined && numValue > numParam.max) {\n            errors.push(`Parameter ${param.key} must be <= ${numParam.max}`);\n          }\n        }\n        break;\n      }\n      case 'select': {\n        const selectParam = param as SelectParameter;\n        const strValue = String(value);\n        const validValues = selectParam.options.map(o => o.value);\n        \n        // Also allow mapped values as valid\n        const allValidValues = selectParam.apiMapping \n          ? [...validValues, ...Object.keys(selectParam.apiMapping)]\n          : validValues;\n        \n        if (!allValidValues.includes(strValue)) {\n          errors.push(`Parameter ${param.key} must be one of: ${validValues.join(', ')}`);\n        }\n        break;\n      }\n      case 'string':\n      case 'textarea': {\n        const strParam = param as StringParameter | TextareaParameter;\n        const strValue = String(value);\n        if (strParam.maxLength && strValue.length > strParam.maxLength) {\n          errors.push(`Parameter ${param.key} must be <= ${strParam.maxLength} characters`);\n        }\n        break;\n      }\n      case 'boolean': {\n        if (typeof value !== 'boolean') {\n          errors.push(`Parameter ${param.key} must be a boolean`);\n        }\n        break;\n      }\n    }\n  }\n  \n  return errors;\n}\n\n// Export for frontend use (JSON-serializable version)\nexport function getModelConfigsJSON(): string {\n  return JSON.stringify(GROQ_MODEL_CONFIGS);\n}\n\n\n",[],[18,68,1476],"3d29849c-ef19-11f0-8520-42dde27851f2","0dcf0fdc-e2e9-11f0-98a3-42dde27851f2",199,["D",1768155212768],"// Chat Providers Index\nexport type { ChatProvider, ChatMessage, ChatCompletionOptions, ChatCompletionResponse, StreamChunk } from \"./types.ts\";\nexport { GroqProvider } from \"./groq.ts\";\nexport { OpenAIProvider } from \"./openai.ts\";\nexport { AnthropicProvider } from \"./anthropic.ts\";\nexport { CustomProvider } from \"./custom.ts\";\n\nimport type { ChatProvider } from \"./types.ts\";\nimport { GroqProvider } from \"./groq.ts\";\nimport { OpenAIProvider } from \"./openai.ts\";\nimport { AnthropicProvider } from \"./anthropic.ts\";\nimport { CustomProvider } from \"./custom.ts\";\n\n// Provider registry\nconst providers: Map = new Map();\n\n// Register default providers\nproviders.set(\"groq\", new GroqProvider());\nproviders.set(\"openai\", new OpenAIProvider());\nproviders.set(\"anthropic\", new AnthropicProvider());\nproviders.set(\"custom\", new CustomProvider());\n\nexport function getProvider(name: string): ChatProvider | undefined {\n  // Check for exact match first\n  const provider = providers.get(name);\n  if (provider) return provider;\n  \n  // For custom providers (custom2, custom3, etc.), return the custom provider\n  // All custom providers use the same CustomProvider class with dynamic configuration\n  if (name && name.startsWith(\"custom\")) {\n    return providers.get(\"custom\");\n  }\n  \n  return undefined;\n}\n\nexport function getDefaultProvider(): ChatProvider {\n  // Return first configured provider, or groq as fallback\n  for (const provider of providers.values()) {\n    if (provider.isConfigured()) {\n      return provider;\n    }\n  }\n  return providers.get(\"groq\")!;\n}\n\nexport function registerProvider(name: string, provider: ChatProvider): void {\n  providers.set(name, provider);\n}\n\nexport function listProviders(): string[] {\n  return Array.from(providers.keys());\n}\n\nexport function listConfiguredProviders(): string[] {\n  return Array.from(providers.entries())\n    .filter(([_, provider]) => provider.isConfigured())\n    .map(([name, _]) => name);\n}\n\n// Get provider info (for API responses)\nexport function getProviderInfo(): Record {\n  const info: Record = {};\n  for (const [name, provider] of providers.entries()) {\n    info[name] = {\n      name: provider.name,\n      configured: provider.isConfigured(),\n    };\n  }\n  return info;\n}\n",[],[18,68,112],"0daf7c94-e2e9-11f0-9a99-42dde27851f2","groq.ts","0daf7d34-e2e9-11f0-9a99-42dde27851f2",107,["D",1766815103330],"// Groq Chat Provider\nimport type { ChatProvider, ChatMessage, ChatCompletionOptions, ChatCompletionResponse, StreamChunk } from \"./types.ts\";\nimport { getModelConfig, transformParametersForAPI } from \"./model-configs.ts\";\n\n// Helper function to check if a model supports a specific parameter\nfunction modelSupportsParameter(modelId: string, parameterKey: string): boolean {\n  const config = getModelConfig(modelId);\n  if (!config) return false;\n  return config.parameters.some(p => p.key === parameterKey);\n}\n\n\nexport class GroqProvider implements ChatProvider {\n  name = \"groq\";\n  defaultModel = \"llama-3.3-70b-versatile\";\n  \n  private apiKey: string | undefined;\n  private baseUrl = \"https://api.groq.com/openai/v1\";\n  \n  constructor() {\n    this.apiKey = Deno.env.get(\"GROQ_API_KEY\");\n  }\n  \n  isConfigured(): boolean {\n    return !!this.apiKey;\n  }\n  \n  async complete(messages: ChatMessage[], options?: ChatCompletionOptions): Promise {\n    // Use API key from options if provided, otherwise fall back to environment variable\n    const apiKey = options?.apiKey || this.apiKey;\n    \n    if (!apiKey) {\n      throw new Error(\"GROQ_API_KEY not configured. Please add your API key in the chat settings.\");\n    }\n    \n    const model = options?.model || this.defaultModel;\n    const temperature = options?.temperature ?? 0.7;\n    const maxTokens = options?.maxTokens ?? 2048;\n    const topP = options?.topP ?? 1;\n    const frequencyPenalty = options?.frequencyPenalty ?? 0;\n    const presencePenalty = options?.presencePenalty ?? 0;\n    \n    // Add system prompt to messages if provided\n    const finalMessages = options?.systemPrompt \n      ? [{ role: \"system\" as const, content: options.systemPrompt }, ...messages]\n      : messages;\n    \n    // Build request headers\n    const headers: Record = {\n      \"Authorization\": \"Bearer \" + apiKey,\n      \"Content-Type\": \"application/json\",\n    };\n    \n    // Build request body\n    const requestBody: Record = {\n      model,\n      messages: finalMessages,\n      temperature,\n      max_tokens: maxTokens,\n      top_p: topP,\n      frequency_penalty: frequencyPenalty,\n      presence_penalty: presencePenalty,\n      stream: false,\n    };\n    \n    // Transform parameters for this specific model\n    const transformedParams = transformParametersForAPI(model, {\n      reasoningEffort: options?.reasoningEffort,\n      imageDetail: options?.imageDetail,\n      webSearch: options?.webSearch,\n      codeExecution: options?.codeExecution,\n    });\n    \n    // Add Groq-specific parameters only if the model supports them\n    if (transformedParams.reasoningEffort && modelSupportsParameter(model, 'reasoningEffort')) {\n      requestBody.reasoning_effort = transformedParams.reasoningEffort;\n    }\n    \n    // Add tool configuration only if the model supports web/code tools\n    const tools: string[] = [];\n    if (transformedParams.webSearch && modelSupportsParameter(model, 'webSearch')) {\n      tools.push(\"web_search\");\n    }\n    if (transformedParams.codeExecution && modelSupportsParameter(model, 'codeExecution')) {\n      tools.push(\"code_execution\");\n    }\n    if (tools.length > 0) {\n      requestBody.tools = tools.map(tool => ({ type: tool }));\n    }\n    \n    const response = await fetch(this.baseUrl + \"/chat/completions\", {\n      method: \"POST\",\n      headers,\n      body: JSON.stringify(requestBody),\n    });\n    \n    if (!response.ok) {\n      const errorText = await response.text();\n      console.error(\"Groq API error:\", response.status, errorText);\n      let errorMsg = \"Failed to get response from Groq API\";\n      try {\n        const errorData = JSON.parse(errorText);\n        errorMsg = errorData.error?.message || errorData.message || errorMsg;\n        if (response.status === 401 || response.status === 403) {\n          errorMsg = \"Groq API key is invalid or missing. Please check your API key in Settings → Models.\";\n        }\n      } catch {\n        // If error text isn't JSON, use the status code\n        if (response.status === 401 || response.status === 403) {\n          errorMsg = \"Groq API key is invalid or missing. Please check your API key in Settings → Models.\";\n        } else {\n          errorMsg = `Groq API error (${response.status}): ${errorText.substring(0, 200)}`;\n        }\n      }\n      throw new Error(errorMsg);\n    }\n    \n    const data = await response.json();\n    \n    console.log(\"[Groq API complete response]:\", JSON.stringify(data, null, 2));\n    \n    if (!data.choices || !data.choices[0] || !data.choices[0].message) {\n      throw new Error(\"Invalid response from Groq API\");\n    }\n    \n    return {\n      content: data.choices[0].message.content,\n      role: \"assistant\",\n      model: data.model,\n      usage: data.usage ? {\n        promptTokens: data.usage.prompt_tokens,\n        completionTokens: data.usage.completion_tokens,\n        totalTokens: data.usage.total_tokens,\n      } : undefined,\n    };\n  }\n  \n  async *stream(messages: ChatMessage[], options?: ChatCompletionOptions): AsyncIterable {\n    // Use API key from options if provided, otherwise fall back to environment variable\n    const apiKey = options?.apiKey || this.apiKey;\n    \n    if (!apiKey) {\n      throw new Error(\"GROQ_API_KEY not configured. Please add your API key in the chat settings.\");\n    }\n    \n    const model = options?.model || this.defaultModel;\n    const temperature = options?.temperature ?? 0.7;\n    const maxTokens = options?.maxTokens ?? 2048;\n    const topP = options?.topP ?? 1;\n    const frequencyPenalty = options?.frequencyPenalty ?? 0;\n    const presencePenalty = options?.presencePenalty ?? 0;\n    \n    // Add system prompt to messages if provided\n    const finalMessages = options?.systemPrompt \n      ? [{ role: \"system\" as const, content: options.systemPrompt }, ...messages]\n      : messages;\n    \n    // Build request headers\n    const headers: Record = {\n      \"Authorization\": \"Bearer \" + apiKey,\n      \"Content-Type\": \"application/json\",\n    };\n    \n    // Build request body\n    const requestBody: Record = {\n      model,\n      messages: finalMessages,\n      temperature,\n      max_tokens: maxTokens,\n      top_p: topP,\n      frequency_penalty: frequencyPenalty,\n      presence_penalty: presencePenalty,\n      stream: true,\n    };\n    \n    // Transform parameters for this specific model and check support individually\n    const transformedParams = transformParametersForAPI(model, {\n      reasoningEffort: options?.reasoningEffort,\n      imageDetail: options?.imageDetail,\n      webSearch: options?.webSearch,\n      codeExecution: options?.codeExecution,\n    });\n    \n    // Add Groq-specific parameters ONLY if the model supports them\n    // This prevents sending unsupported parameters that cause API errors\n    \n    // Reasoning effort (for thinking models like Qwen, GPT-OSS)\n    if (transformedParams.reasoningEffort && modelSupportsParameter(model, 'reasoningEffort')) {\n      requestBody.reasoning_effort = transformedParams.reasoningEffort;\n    }\n    \n    // Image detail (ONLY for vision models like Llama 4 Vision)\n    if (transformedParams.imageDetail && modelSupportsParameter(model, 'imageDetail')) {\n      requestBody.image_detail = transformedParams.imageDetail;\n    }\n    \n    // Tool configuration (web search and code execution for compound/thinking models)\n    const tools: string[] = [];\n    if (transformedParams.webSearch && modelSupportsParameter(model, 'webSearch')) {\n      tools.push(\"web_search\");\n    }\n    if (transformedParams.codeExecution && modelSupportsParameter(model, 'codeExecution')) {\n      tools.push(\"code_execution\");\n    }\n    if (tools.length > 0) {\n      requestBody.tools = tools.map(tool => ({ type: tool }));\n    }\n    \n    console.log(\"[Groq stream] Request body:\", JSON.stringify(requestBody, null, 2));\n    \n    const response = await fetch(this.baseUrl + \"/chat/completions\", {\n      method: \"POST\",\n      headers,\n      body: JSON.stringify(requestBody),\n    });\n    \n    if (!response.ok) {\n      const errorText = await response.text();\n      console.error(\"[Groq stream] API error:\", response.status, errorText);\n      let errorMsg = \"Failed to start stream from Groq API\";\n      try {\n        const errorData = JSON.parse(errorText);\n        errorMsg = errorData.error?.message || errorData.message || errorMsg;\n        if (response.status === 401 || response.status === 403) {\n          errorMsg = \"Groq API key is invalid or missing. Please check your API key in Settings → Models.\";\n        }\n      } catch {\n        // If error text isn't JSON, use the status code\n        if (response.status === 401 || response.status === 403) {\n          errorMsg = \"Groq API key is invalid or missing. Please check your API key in Settings → Models.\";\n        } else {\n          errorMsg = `Groq API error (${response.status}): ${errorText.substring(0, 200)}`;\n        }\n      }\n      throw new Error(errorMsg);\n    }\n    \n    const reader = response.body?.getReader();\n    if (!reader) {\n      throw new Error(\"No response body for streaming\");\n    }\n    \n    const decoder = new TextDecoder();\n    let buffer = \"\";\n    let lineCount = 0;\n    \n    try {\n      while (true) {\n        const { done, value } = await reader.read();\n        \n        if (done) {\n          console.log(\"[Groq stream] Reader done, remaining buffer:\", buffer);\n          yield { content: \"\", done: true };\n          break;\n        }\n        \n        const chunk = decoder.decode(value, { stream: true });\n        buffer += chunk;\n        const lines = buffer.split(\"\\n\");\n        buffer = lines.pop() || \"\";\n        \n        let currentEvent = \"\";\n        \n        for (const line of lines) {\n          const trimmed = line.trim();\n          if (!trimmed) continue;\n          \n          lineCount++;\n          // Log first few lines to debug\n          if (lineCount <= 5) {\n            console.log(\"[Groq stream] Line \" + lineCount + \":\", trimmed.substring(0, 200));\n          }\n          \n          // Track event type (SSE format: event: )\n          if (trimmed.startsWith(\"event: \")) {\n            currentEvent = trimmed.slice(7);\n            continue;\n          }\n          \n          if (!trimmed.startsWith(\"data: \")) continue;\n          \n          const data = trimmed.slice(6);\n          if (data === \"[DONE]\") {\n            yield { content: \"\", done: true };\n            return;\n          }\n          \n          try {\n            const parsed = JSON.parse(data);\n            \n            // Check for error event or error in data\n            if (currentEvent === \"error\" || parsed.error) {\n              const errorMsg = parsed.error?.message || JSON.stringify(parsed.error) || \"Unknown streaming error\";\n              console.error(\"[Groq stream] API error:\", errorMsg);\n              throw new Error(\"Groq API error: \" + errorMsg);\n            }\n            \n            const choice = parsed.choices?.[0];\n            const delta = choice?.delta || {};\n            \n            // Yield chunk if it has any content, reasoning, or tool data\n            const hasContent = delta.content;\n            const hasReasoning = delta.reasoning;\n            const hasExecutedTools = delta.executed_tools;\n            const hasFinishReason = choice?.finish_reason;\n            \n            if (hasContent || hasReasoning || hasExecutedTools || hasFinishReason) {\n              yield { \n                content: delta.content || \"\", \n                done: false, \n                raw: parsed,\n                // Include additional fields from delta\n                reasoning: delta.reasoning,\n                executedTools: delta.executed_tools,\n                finishReason: choice?.finish_reason,\n                // Include full message if present (some chunks might have complete message)\n                message: choice?.message\n              };\n            }\n            \n            // Reset event after processing data\n            currentEvent = \"\";\n          } catch (e) {\n            // Re-throw if it's our error\n            if (e instanceof Error && e.message.startsWith(\"Groq API error:\")) {\n              throw e;\n            }\n            console.error(\"[Groq stream] JSON parse error:\", e, \"data:\", data.substring(0, 100));\n          }\n        }\n      }\n    } finally {\n      console.log(\"[Groq stream] Total lines processed:\", lineCount);\n      reader.releaseLock();\n    }\n  }\n}\n\n",[],[18,68,1491],"0dd21150-e2e9-11f0-bb45-42dde27851f2","custom.ts","0dd211f0-e2e9-11f0-bb45-42dde27851f2",110,["D",1766815103546],"// Custom OpenAI-Compatible Chat Provider\n// Supports any OpenAI-compatible API endpoint with model auto-discovery\nimport type { ChatProvider, ChatMessage, ChatCompletionOptions, ChatCompletionResponse, StreamChunk } from \"./types.ts\";\n\nexport interface CustomProviderConfig {\n  baseUrl: string;\n  apiKey?: string;\n  name?: string;\n}\n\nexport class CustomProvider implements ChatProvider {\n  name = \"custom\";\n  defaultModel = \"\";\n  \n  private apiKey: string | undefined;\n  private baseUrl = \"\";\n  \n  constructor(config?: CustomProviderConfig) {\n    if (config) {\n      this.baseUrl = config.baseUrl;\n      this.apiKey = config.apiKey;\n      if (config.name) {\n        this.name = config.name;\n      }\n    }\n  }\n  \n  isConfigured(): boolean {\n    return !!this.baseUrl;\n  }\n  \n  // Set configuration dynamically\n  setConfig(config: CustomProviderConfig): void {\n    this.baseUrl = config.baseUrl;\n    this.apiKey = config.apiKey;\n    if (config.name) {\n      this.name = config.name;\n    }\n  }\n  \n  async complete(messages: ChatMessage[], options?: ChatCompletionOptions): Promise {\n    // Use baseUrl from options if provided\n    const baseUrl = options?.baseUrl || this.baseUrl;\n    const apiKey = options?.apiKey || this.apiKey;\n    \n    if (!baseUrl) {\n      throw new Error(\"Custom provider base URL not configured. Please add a base URL in the chat settings.\");\n    }\n    \n    const model = options?.model || this.defaultModel;\n    if (!model) {\n      throw new Error(\"No model specified for custom provider.\");\n    }\n    \n    const temperature = options?.temperature ?? 0.7;\n    const maxTokens = options?.maxTokens ?? 2048;\n    const topP = options?.topP ?? 1;\n    const frequencyPenalty = options?.frequencyPenalty ?? 0;\n    const presencePenalty = options?.presencePenalty ?? 0;\n    \n    // Add system prompt to messages if provided\n    const finalMessages = options?.systemPrompt \n      ? [{ role: \"system\" as const, content: options.systemPrompt }, ...messages]\n      : messages;\n    \n    // Build request headers\n    const headers: Record = {\n      \"Content-Type\": \"application/json\",\n    };\n    \n    if (apiKey) {\n      headers[\"Authorization\"] = \"Bearer \" + apiKey;\n    }\n    \n    // Build request body (OpenAI-compatible format)\n    const requestBody: Record = {\n      model,\n      messages: finalMessages,\n      temperature,\n      max_tokens: maxTokens,\n      top_p: topP,\n      frequency_penalty: frequencyPenalty,\n      presence_penalty: presencePenalty,\n      stream: false,\n    };\n    \n    // Ensure baseUrl doesn't have trailing slash\n    const normalizedBaseUrl = baseUrl.replace(/\\/$/, '');\n    \n    const response = await fetch(normalizedBaseUrl + \"/chat/completions\", {\n      method: \"POST\",\n      headers,\n      body: JSON.stringify(requestBody),\n    });\n    \n    if (!response.ok) {\n      const errorText = await response.text();\n      console.error(\"Custom API error:\", response.status, errorText);\n      let errorMsg = \"Failed to get response from Custom API\";\n      try {\n        const errorData = JSON.parse(errorText);\n        errorMsg = errorData.error?.message || errorData.message || errorMsg;\n        if (response.status === 401 || response.status === 403) {\n          errorMsg = \"Custom provider API key is invalid or missing. Please check your API key in Settings → Models.\";\n        }\n      } catch {\n        // If error text isn't JSON, use the status code\n        if (response.status === 401 || response.status === 403) {\n          errorMsg = \"Custom provider API key is invalid or missing. Please check your API key in Settings → Models.\";\n        } else {\n          errorMsg = `Custom API error (${response.status}): ${errorText.substring(0, 200)}`;\n        }\n      }\n      throw new Error(errorMsg);\n    }\n    \n    const data = await response.json();\n    \n    console.log(\"[Custom API complete response]:\", JSON.stringify(data, null, 2));\n    \n    if (!data.choices || !data.choices[0] || !data.choices[0].message) {\n      throw new Error(\"Invalid response from Custom API\");\n    }\n    \n    return {\n      content: data.choices[0].message.content,\n      role: \"assistant\",\n      model: data.model,\n      usage: data.usage ? {\n        promptTokens: data.usage.prompt_tokens,\n        completionTokens: data.usage.completion_tokens,\n        totalTokens: data.usage.total_tokens,\n      } : undefined,\n    };\n  }\n  \n  async *stream(messages: ChatMessage[], options?: ChatCompletionOptions): AsyncIterable {\n    const baseUrl = options?.baseUrl || this.baseUrl;\n    const apiKey = options?.apiKey || this.apiKey;\n    \n    if (!baseUrl) {\n      throw new Error(\"Custom provider base URL not configured. Please add a base URL in the chat settings.\");\n    }\n    \n    const model = options?.model || this.defaultModel;\n    if (!model) {\n      throw new Error(\"No model specified for custom provider.\");\n    }\n    \n    const temperature = options?.temperature ?? 0.7;\n    const maxTokens = options?.maxTokens ?? 2048;\n    const topP = options?.topP ?? 1;\n    const frequencyPenalty = options?.frequencyPenalty ?? 0;\n    const presencePenalty = options?.presencePenalty ?? 0;\n    \n    // Add system prompt to messages if provided\n    const finalMessages = options?.systemPrompt \n      ? [{ role: \"system\" as const, content: options.systemPrompt }, ...messages]\n      : messages;\n    \n    // Build request headers\n    const headers: Record = {\n      \"Content-Type\": \"application/json\",\n    };\n    \n    if (apiKey) {\n      headers[\"Authorization\"] = \"Bearer \" + apiKey;\n    }\n    \n    // Build request body\n    const requestBody: Record = {\n      model,\n      messages: finalMessages,\n      temperature,\n      max_tokens: maxTokens,\n      top_p: topP,\n      frequency_penalty: frequencyPenalty,\n      presence_penalty: presencePenalty,\n      stream: true,\n    };\n    \n    const normalizedBaseUrl = baseUrl.replace(/\\/$/, '');\n    \n    console.log(\"[Custom stream] Request to:\", normalizedBaseUrl + \"/chat/completions\");\n    \n    const response = await fetch(normalizedBaseUrl + \"/chat/completions\", {\n      method: \"POST\",\n      headers,\n      body: JSON.stringify(requestBody),\n    });\n    \n    if (!response.ok) {\n      const errorText = await response.text();\n      console.error(\"[Custom stream] API error:\", response.status, errorText);\n      let errorMsg = \"Failed to start stream from Custom API\";\n      try {\n        const errorData = JSON.parse(errorText);\n        errorMsg = errorData.error?.message || errorData.message || errorMsg;\n        if (response.status === 401 || response.status === 403) {\n          errorMsg = \"Custom provider API key is invalid or missing. Please check your API key in Settings → Models.\";\n        }\n      } catch {\n        // If error text isn't JSON, use the status code\n        if (response.status === 401 || response.status === 403) {\n          errorMsg = \"Custom provider API key is invalid or missing. Please check your API key in Settings → Models.\";\n        } else {\n          errorMsg = `Custom API error (${response.status}): ${errorText.substring(0, 200)}`;\n        }\n      }\n      throw new Error(errorMsg);\n    }\n    \n    const reader = response.body?.getReader();\n    if (!reader) {\n      throw new Error(\"No response body for streaming\");\n    }\n    \n    const decoder = new TextDecoder();\n    let buffer = \"\";\n    let lineCount = 0;\n    \n    try {\n      while (true) {\n        const { done, value } = await reader.read();\n        \n        if (done) {\n          console.log(\"[Custom stream] Reader done\");\n          yield { content: \"\", done: true };\n          break;\n        }\n        \n        const chunk = decoder.decode(value, { stream: true });\n        buffer += chunk;\n        const lines = buffer.split(\"\\n\");\n        buffer = lines.pop() || \"\";\n        \n        for (const line of lines) {\n          const trimmed = line.trim();\n          if (!trimmed) continue;\n          \n          lineCount++;\n          if (lineCount <= 5) {\n            console.log(\"[Custom stream] Line \" + lineCount + \":\", trimmed.substring(0, 200));\n          }\n          \n          if (!trimmed.startsWith(\"data: \")) continue;\n          \n          const data = trimmed.slice(6);\n          if (data === \"[DONE]\") {\n            yield { content: \"\", done: true };\n            return;\n          }\n          \n          try {\n            const parsed = JSON.parse(data);\n            \n            if (parsed.error) {\n              const errorMsg = parsed.error?.message || JSON.stringify(parsed.error) || \"Unknown streaming error\";\n              console.error(\"[Custom stream] API error:\", errorMsg);\n              throw new Error(\"Custom API error: \" + errorMsg);\n            }\n            \n            const choice = parsed.choices?.[0];\n            const delta = choice?.delta || {};\n            \n            if (delta.content || choice?.finish_reason) {\n              yield { \n                content: delta.content || \"\", \n                done: false, \n                raw: parsed,\n                finishReason: choice?.finish_reason,\n              };\n            }\n          } catch (e) {\n            if (e instanceof Error && e.message.startsWith(\"Custom API error:\")) {\n              throw e;\n            }\n            console.error(\"[Custom stream] JSON parse error:\", e, \"data:\", data.substring(0, 100));\n          }\n        }\n      }\n    } finally {\n      console.log(\"[Custom stream] Total lines processed:\", lineCount);\n      reader.releaseLock();\n    }\n  }\n  \n  // List available models from the API (auto-discovery)\n  async listModels(baseUrl?: string, apiKey?: string): Promise> {\n    const url = baseUrl || this.baseUrl;\n    const key = apiKey || this.apiKey;\n    \n    if (!url) {\n      throw new Error(\"Base URL required to list models\");\n    }\n    \n    const normalizedBaseUrl = url.replace(/\\/$/, '');\n    \n    const headers: Record = {};\n    if (key) {\n      headers[\"Authorization\"] = \"Bearer \" + key;\n    }\n    \n    const response = await fetch(normalizedBaseUrl + \"/models\", {\n      headers,\n    });\n    \n    if (!response.ok) {\n      const errorText = await response.text();\n      throw new Error(\"Failed to list models: \" + response.status + \" - \" + errorText);\n    }\n    \n    const data = await response.json();\n    \n    // Handle both OpenAI format { data: [...] } and simple array format [...]\n    const modelList = data.data || data || [];\n    \n    return modelList.map((m: { id: string; name?: string; owned_by?: string }) => ({\n      id: m.id,\n      name: m.name || m.id,\n      owned_by: m.owned_by,\n    }));\n  }\n}\n\n// Singleton instance for simple use cases\nexport const customProvider = new CustomProvider();\n\n",[],[18,68,1499],"0d9bfe76-e2e9-11f0-b141-42dde27851f2","anthropic.ts","0d9bff34-e2e9-11f0-b141-42dde27851f2",103,["D",1766815103178],"// Anthropic Chat Provider\n// Uses Anthropic's Messages API which has a different format than OpenAI\nimport type { ChatProvider, ChatMessage, ChatCompletionOptions, ChatCompletionResponse, StreamChunk } from \"./types.ts\";\n\n// Anthropic uses a different message format\ninterface AnthropicMessage {\n  role: \"user\" | \"assistant\";\n  content: string;\n}\n\nexport class AnthropicProvider implements ChatProvider {\n  name = \"anthropic\";\n  defaultModel = \"claude-sonnet-4-20250514\";\n  \n  private apiKey: string | undefined;\n  private baseUrl = \"https://api.anthropic.com/v1\";\n  private apiVersion = \"2023-06-01\";\n  \n  constructor() {\n    this.apiKey = Deno.env.get(\"ANTHROPIC_API_KEY\");\n  }\n  \n  isConfigured(): boolean {\n    return !!this.apiKey;\n  }\n  \n  // Convert OpenAI-style messages to Anthropic format\n  private convertMessages(messages: ChatMessage[], systemPrompt?: string): { system?: string; messages: AnthropicMessage[] } {\n    const anthropicMessages: AnthropicMessage[] = [];\n    let system = systemPrompt || \"\";\n    \n    for (const msg of messages) {\n      if (msg.role === \"system\") {\n        // Anthropic handles system prompts separately\n        system = system ? system + \"\\n\\n\" + msg.content : msg.content;\n      } else {\n        anthropicMessages.push({\n          role: msg.role as \"user\" | \"assistant\",\n          content: msg.content,\n        });\n      }\n    }\n    \n    return {\n      system: system || undefined,\n      messages: anthropicMessages,\n    };\n  }\n  \n  async complete(messages: ChatMessage[], options?: ChatCompletionOptions): Promise {\n    const apiKey = options?.apiKey || this.apiKey;\n    \n    if (!apiKey) {\n      throw new Error(\"ANTHROPIC_API_KEY not configured. Please add your API key in the chat settings.\");\n    }\n    \n    const model = options?.model || this.defaultModel;\n    const temperature = options?.temperature ?? 0.7;\n    const maxTokens = options?.maxTokens ?? 4096;\n    const topP = options?.topP ?? 1;\n    \n    const { system, messages: anthropicMessages } = this.convertMessages(messages, options?.systemPrompt);\n    \n    // Build request headers - Anthropic uses different auth header\n    const headers: Record = {\n      \"x-api-key\": apiKey,\n      \"anthropic-version\": this.apiVersion,\n      \"Content-Type\": \"application/json\",\n    };\n    \n    // Enable extended thinking for Claude 3.5+ if requested\n    if (options?.reasoningEffort && this.supportsExtendedThinking(model)) {\n      headers[\"anthropic-beta\"] = \"interleaved-thinking-2025-05-14\";\n    }\n    \n    // Build request body - Anthropic format\n    const requestBody: Record = {\n      model,\n      messages: anthropicMessages,\n      max_tokens: maxTokens,\n      stream: false,\n    };\n    \n    // Only add optional params if set\n    if (system) {\n      requestBody.system = system;\n    }\n    if (temperature !== undefined) {\n      requestBody.temperature = temperature;\n    }\n    if (topP !== undefined && topP !== 1) {\n      requestBody.top_p = topP;\n    }\n    \n    // Extended thinking configuration\n    if (options?.reasoningEffort && this.supportsExtendedThinking(model)) {\n      const budgetTokens = this.getThinkingBudget(options.reasoningEffort);\n      requestBody.thinking = {\n        type: \"enabled\",\n        budget_tokens: budgetTokens,\n      };\n      // Temperature must be 1 for extended thinking\n      requestBody.temperature = 1;\n    }\n    \n    const response = await fetch(this.baseUrl + \"/messages\", {\n      method: \"POST\",\n      headers,\n      body: JSON.stringify(requestBody),\n    });\n    \n    if (!response.ok) {\n      const errorText = await response.text();\n      console.error(\"Anthropic API error:\", response.status, errorText);\n      let errorMsg = \"Failed to get response from Anthropic API\";\n      try {\n        const errorData = JSON.parse(errorText);\n        errorMsg = errorData.error?.message || errorData.message || errorMsg;\n        if (response.status === 401 || response.status === 403) {\n          errorMsg = \"Anthropic API key is invalid or missing. Please check your API key in Settings → Models.\";\n        }\n      } catch {\n        // If error text isn't JSON, use the status code\n        if (response.status === 401 || response.status === 403) {\n          errorMsg = \"Anthropic API key is invalid or missing. Please check your API key in Settings → Models.\";\n        } else {\n          errorMsg = `Anthropic API error (${response.status}): ${errorText.substring(0, 200)}`;\n        }\n      }\n      throw new Error(errorMsg);\n    }\n    \n    const data = await response.json();\n    \n    console.log(\"[Anthropic API complete response]:\", JSON.stringify(data, null, 2));\n    \n    if (!data.content || !data.content[0]) {\n      throw new Error(\"Invalid response from Anthropic API\");\n    }\n    \n    // Extract text content (may include thinking blocks)\n    let content = \"\";\n    let reasoning = \"\";\n    for (const block of data.content) {\n      if (block.type === \"text\") {\n        content += block.text;\n      } else if (block.type === \"thinking\") {\n        reasoning += block.thinking;\n      }\n    }\n    \n    return {\n      content,\n      role: \"assistant\",\n      model: data.model,\n      usage: data.usage ? {\n        promptTokens: data.usage.input_tokens,\n        completionTokens: data.usage.output_tokens,\n        totalTokens: data.usage.input_tokens + data.usage.output_tokens,\n      } : undefined,\n    };\n  }\n  \n  async *stream(messages: ChatMessage[], options?: ChatCompletionOptions): AsyncIterable {\n    const apiKey = options?.apiKey || this.apiKey;\n    \n    if (!apiKey) {\n      throw new Error(\"ANTHROPIC_API_KEY not configured. Please add your API key in the chat settings.\");\n    }\n    \n    const model = options?.model || this.defaultModel;\n    const temperature = options?.temperature ?? 0.7;\n    const maxTokens = options?.maxTokens ?? 4096;\n    const topP = options?.topP ?? 1;\n    \n    const { system, messages: anthropicMessages } = this.convertMessages(messages, options?.systemPrompt);\n    \n    // Build request headers\n    const headers: Record = {\n      \"x-api-key\": apiKey,\n      \"anthropic-version\": this.apiVersion,\n      \"Content-Type\": \"application/json\",\n    };\n    \n    if (options?.reasoningEffort && this.supportsExtendedThinking(model)) {\n      headers[\"anthropic-beta\"] = \"interleaved-thinking-2025-05-14\";\n    }\n    \n    // Build request body\n    const requestBody: Record = {\n      model,\n      messages: anthropicMessages,\n      max_tokens: maxTokens,\n      stream: true,\n    };\n    \n    if (system) {\n      requestBody.system = system;\n    }\n    if (temperature !== undefined) {\n      requestBody.temperature = temperature;\n    }\n    if (topP !== undefined && topP !== 1) {\n      requestBody.top_p = topP;\n    }\n    \n    // Extended thinking configuration\n    if (options?.reasoningEffort && this.supportsExtendedThinking(model)) {\n      const budgetTokens = this.getThinkingBudget(options.reasoningEffort);\n      requestBody.thinking = {\n        type: \"enabled\",\n        budget_tokens: budgetTokens,\n      };\n      requestBody.temperature = 1;\n    }\n    \n    console.log(\"[Anthropic stream] Request body:\", JSON.stringify(requestBody, null, 2));\n    \n    const response = await fetch(this.baseUrl + \"/messages\", {\n      method: \"POST\",\n      headers,\n      body: JSON.stringify(requestBody),\n    });\n    \n    if (!response.ok) {\n      const errorText = await response.text();\n      console.error(\"[Anthropic stream] API error:\", response.status, errorText);\n      let errorMsg = \"Failed to start stream from Anthropic API\";\n      try {\n        const errorData = JSON.parse(errorText);\n        errorMsg = errorData.error?.message || errorData.message || errorMsg;\n        if (response.status === 401 || response.status === 403) {\n          errorMsg = \"Anthropic API key is invalid or missing. Please check your API key in Settings → Models.\";\n        }\n      } catch {\n        // If error text isn't JSON, use the status code\n        if (response.status === 401 || response.status === 403) {\n          errorMsg = \"Anthropic API key is invalid or missing. Please check your API key in Settings → Models.\";\n        } else {\n          errorMsg = `Anthropic API error (${response.status}): ${errorText.substring(0, 200)}`;\n        }\n      }\n      throw new Error(errorMsg);\n    }\n    \n    const reader = response.body?.getReader();\n    if (!reader) {\n      throw new Error(\"No response body for streaming\");\n    }\n    \n    const decoder = new TextDecoder();\n    let buffer = \"\";\n    let lineCount = 0;\n    \n    try {\n      while (true) {\n        const { done, value } = await reader.read();\n        \n        if (done) {\n          console.log(\"[Anthropic stream] Reader done\");\n          yield { content: \"\", done: true };\n          break;\n        }\n        \n        const chunk = decoder.decode(value, { stream: true });\n        buffer += chunk;\n        const lines = buffer.split(\"\\n\");\n        buffer = lines.pop() || \"\";\n        \n        let currentEvent = \"\";\n        \n        for (const line of lines) {\n          const trimmed = line.trim();\n          if (!trimmed) continue;\n          \n          lineCount++;\n          if (lineCount <= 5) {\n            console.log(\"[Anthropic stream] Line \" + lineCount + \":\", trimmed.substring(0, 200));\n          }\n          \n          // Track event type (SSE format)\n          if (trimmed.startsWith(\"event: \")) {\n            currentEvent = trimmed.slice(7);\n            continue;\n          }\n          \n          if (!trimmed.startsWith(\"data: \")) continue;\n          \n          const data = trimmed.slice(6);\n          \n          try {\n            const parsed = JSON.parse(data);\n            \n            // Handle different event types\n            if (currentEvent === \"error\" || parsed.type === \"error\") {\n              const errorMsg = parsed.error?.message || JSON.stringify(parsed) || \"Unknown streaming error\";\n              console.error(\"[Anthropic stream] API error:\", errorMsg);\n              throw new Error(\"Anthropic API error: \" + errorMsg);\n            }\n            \n            if (currentEvent === \"message_stop\" || parsed.type === \"message_stop\") {\n              yield { content: \"\", done: true };\n              return;\n            }\n            \n            // Content block delta - the actual streaming text\n            if (parsed.type === \"content_block_delta\") {\n              const delta = parsed.delta;\n              if (delta?.type === \"text_delta\") {\n                yield {\n                  content: delta.text || \"\",\n                  done: false,\n                  raw: parsed,\n                };\n              } else if (delta?.type === \"thinking_delta\") {\n                yield {\n                  content: \"\",\n                  done: false,\n                  raw: parsed,\n                  reasoning: delta.thinking || \"\",\n                };\n              }\n            }\n            \n            currentEvent = \"\";\n          } catch (e) {\n            if (e instanceof Error && e.message.startsWith(\"Anthropic API error:\")) {\n              throw e;\n            }\n            console.error(\"[Anthropic stream] JSON parse error:\", e, \"data:\", data.substring(0, 100));\n          }\n        }\n      }\n    } finally {\n      console.log(\"[Anthropic stream] Total lines processed:\", lineCount);\n      reader.releaseLock();\n    }\n  }\n  \n  // Check if model supports extended thinking\n  private supportsExtendedThinking(model: string): boolean {\n    return model.includes('claude-3') || \n           model.includes('claude-sonnet-4') || \n           model.includes('claude-opus-4');\n  }\n  \n  // Get thinking budget based on effort level\n  private getThinkingBudget(effort: 'low' | 'medium' | 'high'): number {\n    switch (effort) {\n      case 'low': return 5000;\n      case 'medium': return 10000;\n      case 'high': return 20000;\n      default: return 10000;\n    }\n  }\n}\n\n",[],[18,68,1507],"0daa10a6-e2e9-11f0-bdaa-42dde27851f2","PARAMETER-VALIDATION.md","0daa1178-e2e9-11f0-bdaa-42dde27851f2",106,["D",1766815103294],"# Parameter Validation & Transformation System\n\nThis system handles the \"whack-a-mole\" problem where different AI models/providers require different parameter formats.\n\n## Problem\n\nDifferent models have different requirements:\n- **Qwen3-32B**: `reasoning_effort` must be `'none'` or `'default'`\n- **OpenAI o1/o3**: `reasoning_effort` can be `'low'`, `'medium'`, `'high'`\n- **Anthropic**: Uses `extended_thinking` budget tokens instead\n- **Some models**: Don't support certain parameters at all\n\n## Solution\n\n### 1. Parameter Mapping (`apiMapping`)\n\nIn `model-configs.ts`, SelectParameters can define an `apiMapping` to translate UI values to API values:\n\n```typescript\n{\n  key: 'reasoningEffort',\n  label: 'Reasoning Effort',\n  type: 'select',\n  options: [\n    { value: 'none', label: 'None' },\n    { value: 'default', label: 'Default' }\n  ],\n  default: 'default',\n  apiMapping: {\n    'none': 'none',\n    'default': 'default',\n    // Backwards compatibility\n    'low': 'none',\n    'medium': 'default',\n    'high': 'default'\n  }\n}\n```\n\n### 2. Parameter Transformation\n\nThe `transformParametersForAPI()` function automatically applies these mappings:\n\n```typescript\nimport { transformParametersForAPI } from \"./model-configs.ts\";\n\n// Transform before sending to API\nconst transformedParams = transformParametersForAPI(model, {\n  reasoningEffort: 'medium', // UI value\n  webSearch: true,\n});\n// Result: { reasoningEffort: 'default', webSearch: true }\n```\n\n### 3. Parameter Validation\n\nThe `validateParameters()` function checks if parameters are valid:\n\n```typescript\nimport { validateParameters } from \"./model-configs.ts\";\n\nconst errors = validateParameters(modelId, params);\nif (errors.length > 0) {\n  console.error(\"Validation errors:\", errors);\n}\n```\n\n## Usage in Providers\n\n### Groq Provider Example\n\n```typescript\n// In complete() or stream() method:\nconst transformedParams = transformParametersForAPI(model, {\n  reasoningEffort: options?.reasoningEffort,\n  imageDetail: options?.imageDetail,\n  webSearch: options?.webSearch,\n  codeExecution: options?.codeExecution,\n});\n\n// Only add parameters if model supports them AND they're defined\nif (transformedParams.reasoningEffort && modelSupportsParameter(model, 'reasoningEffort')) {\n  requestBody.reasoning_effort = transformedParams.reasoningEffort;\n}\n```\n\n## Adding New Models with Custom Parameters\n\n### Example: Model with different parameter format\n\n```typescript\n{\n  id: 'custom-model',\n  name: 'Custom Model',\n  provider: 'custom',\n  parameters: [\n    {\n      key: 'thinkingLevel',\n      label: 'Thinking Level',\n      type: 'select',\n      options: [\n        { value: 'fast', label: 'Fast' },\n        { value: 'balanced', label: 'Balanced' },\n        { value: 'deep', label: 'Deep' }\n      ],\n      default: 'balanced',\n      // Map to what the API actually expects\n      apiMapping: {\n        'fast': '1',\n        'balanced': '2',\n        'deep': '3'\n      }\n    }\n  ],\n  // Optional: Custom transformation logic\n  transformParameters: (params) => {\n    const transformed = { ...params };\n    // Custom logic here\n    if (params.special_feature) {\n      transformed.enable_experimental = true;\n    }\n    return transformed;\n  }\n}\n```\n\n## Benefits\n\n1. **Single Source of Truth**: Model configs define both UI and API requirements\n2. **Backwards Compatibility**: Old parameter values can be mapped to new ones\n3. **Type Safety**: TypeScript ensures parameters are validated at compile time\n4. **Easy Debugging**: Clear error messages when parameters don't match\n5. **Extensible**: Add new parameter types and transformations easily\n\n## Testing\n\nTo test parameter validation:\n\n```typescript\nimport { validateParameters, transformParametersForAPI } from \"./model-configs.ts\";\n\n// Test validation\nconst errors = validateParameters('qwen/qwen3-32b', {\n  reasoningEffort: 'medium', // Valid (will be mapped)\n  temperature: 0.7,\n});\nconsole.log(\"Validation errors:\", errors); // Should be empty\n\n// Test transformation\nconst transformed = transformParametersForAPI('qwen/qwen3-32b', {\n  reasoningEffort: 'medium',\n});\nconsole.log(\"Transformed:\", transformed); // { reasoningEffort: 'default' }\n```\n\n## Migration Guide\n\n### For Existing Models\n\n1. Check your model's API documentation\n2. Find any parameters with specific value requirements\n3. Add `apiMapping` to those parameters in `model-configs.ts`\n4. Update provider to use `transformParametersForAPI()`\n\n### For New Providers\n\n1. Define parameter configs in `model-configs.ts`\n2. Use `transformParametersForAPI()` before building request body\n3. Use `modelSupportsParameter()` to check if parameter is supported\n4. Optionally add validation before making API calls\n\n## Common Patterns\n\n### Pattern 1: Optional parameter with mapping\n\n```typescript\nconst transformed = transformParametersForAPI(model, {\n  reasoningEffort: options?.reasoningEffort,\n});\n\nif (transformed.reasoningEffort && modelSupportsParameter(model, 'reasoningEffort')) {\n  requestBody.reasoning_effort = transformed.reasoningEffort;\n}\n```\n\n### Pattern 2: Validation before API call\n\n```typescript\nconst errors = validateParameters(modelId, params);\nif (errors.length > 0) {\n  throw new Error(`Invalid parameters: ${errors.join(', ')}`);\n}\n```\n\n### Pattern 3: Default values with mapping\n\n```typescript\nconst transformed = transformParametersForAPI(model, {\n  reasoningEffort: options?.reasoningEffort ?? 'medium', // UI default\n});\n// Will automatically map 'medium' to API value\n```\n\n",[],[18,68,1515],"0d92740a-e2e9-11f0-b141-42dde27851f2","IMPLEMENTATION-SUMMARY.md","0d9274c8-e2e9-11f0-b141-42dde27851f2",101,["D",1766815103064],"# Parameter Validation & Transformation System - Implementation Summary\n\n## Problem Solved\n\nDifferent AI models/providers have incompatible parameter requirements, causing a \"whack-a-mole\" issue where:\n- **Qwen3-32B**: Requires `reasoning_effort` to be `'none'` or `'default'`\n- **OpenAI o1/o3**: Accepts `'low'`, `'medium'`, `'high'`  \n- **GPT-OSS models**: Don't support `image_detail` at all\n- **Vision models**: Support `image_detail` parameter\n- **Other models**: Don't support `reasoning_effort` at all\n\nThis caused API errors like:\n```\n`reasoning_effort` must be one of `none` or `default`\nproperty 'image_detail' is unsupported\n```\n\n## Solution Implemented\n\n### 1. Enhanced Model Configuration (`model-configs.ts`)\n\nAdded `apiMapping` to `SelectParameter` type for value translation:\n\n```typescript\nexport interface SelectParameter extends BaseParameter {\n  type: 'select';\n  options: Array<{ value: string; label: string }>;\n  default?: string;\n  apiMapping?: Record; // NEW: Maps UI → API values\n}\n```\n\nAdded `transformParameters` function to `ModelConfig`:\n\n```typescript\nexport interface ModelConfig {\n  // ... existing fields ...\n  transformParameters?: (params: Record) => Record;\n}\n```\n\n### 2. Parameter Transformation Function\n\nCreated `transformParametersForAPI()` that:\n- Applies `apiMapping` for select parameters\n- Runs model-specific transformation functions\n- Preserves unknown/unsupported parameters\n\n```typescript\ntransformParametersForAPI('qwen/qwen3-32b', {\n  reasoningEffort: 'medium',  // UI value\n  temperature: 0.7\n});\n// Returns: { reasoningEffort: 'default', temperature: 0.7 }\n```\n\n### 3. Parameter Validation Function\n\nCreated `validateParameters()` that:\n- Checks required parameters\n- Validates number ranges (min/max)\n- Validates select options (with apiMapping support)\n- Validates string/textarea lengths\n- Validates boolean types\n\nReturns array of human-readable error messages.\n\n### 4. Provider Integration\n\nUpdated `groq.ts` provider:\n- Imports `transformParametersForAPI`\n- Transforms parameters before building request body\n- Applied to both `complete()` and `stream()` methods\n\n```typescript\nconst transformedParams = transformParametersForAPI(model, {\n  reasoningEffort: options?.reasoningEffort,\n  imageDetail: options?.imageDetail,\n  webSearch: options?.webSearch,\n  codeExecution: options?.codeExecution,\n});\n\nif (transformedParams.reasoningEffort && modelSupportsParameter(model, 'reasoningEffort')) {\n  requestBody.reasoning_effort = transformedParams.reasoningEffort;\n}\n```\n\n### 5. Jobs API Integration\n\nUpdated `jobs.ts` to validate and transform parameters:\n- Validates parameters before starting job\n- Transforms parameters for model-specific requirements\n- Returns clear error messages on validation failure\n\n```typescript\n// Validate parameters\nconst validationErrors = validateParameters(model, paramsToValidate);\nif (validationErrors.length > 0) {\n  failJob(job, \"Invalid parameters: \" + validationErrors.join(\", \"));\n  return;\n}\n\n// Transform parameters\nconst transformedParams = transformParametersForAPI(model, paramsToValidate);\n```\n\n### 6. Qwen Model Configuration Update\n\nUpdated `qwen/qwen3-32b` model config with proper parameter mapping:\n\n```typescript\n{\n  id: 'qwen/qwen3-32b',\n  name: 'Qwen3-32B',\n  provider: 'groq',\n  parameters: [\n    // ... base parameters ...\n    {\n      key: 'reasoningEffort',\n      label: 'Reasoning Effort',\n      type: 'select',\n      options: [\n        { value: 'none', label: 'None' },\n        { value: 'default', label: 'Default' }\n      ],\n      default: 'default',\n      apiMapping: {\n        'none': 'none',\n        'default': 'default',\n        // Backwards compatibility\n        'low': 'none',\n        'medium': 'default',\n        'high': 'default'\n      }\n    },\n    // ... other parameters ...\n  ],\n  capabilities: { thinking: true, streaming: true }\n}\n```\n\n## Files Changed\n\n1. **backend/providers/model-configs.ts**\n   - Added `apiMapping` to `SelectParameter`\n   - Added `transformParameters` to `ModelConfig`\n   - Added `transformParametersForAPI()` function\n   - Added `validateParameters()` function\n   - Updated Qwen model config with proper parameters\n\n2. **backend/providers/groq.ts**\n   - Import `transformParametersForAPI`\n   - Apply transformation in `complete()` method\n   - Apply transformation in `stream()` method\n\n3. **backend/routes/jobs.ts**\n   - Import validation and transformation functions\n   - Validate parameters before job execution\n   - Transform parameters before passing to provider\n   - Return validation errors to client\n\n## Files Created\n\n1. **backend/providers/PARAMETER-VALIDATION.md**\n   - Complete documentation of the system\n   - Usage examples\n   - Migration guide\n   - Common patterns\n\n2. **backend/providers/test-parameter-validation.ts**\n   - Test suite demonstrating all features\n   - Validation examples\n   - Transformation examples\n   - Run with: `deno run backend/providers/test-parameter-validation.ts`\n\n## Testing\n\nRun the test suite:\n\n```bash\ncd /Users/janzheng/localhost/smallweb/design/v2/frontend/apps/chat-app\ndeno run backend/providers/test-parameter-validation.ts\n```\n\nExpected output:\n- ✅ Parameter transformation works (medium → default)\n- ✅ Validation catches invalid values\n- ✅ Backwards compatibility maintained\n- ✅ Range validation works\n- ✅ All valid parameters pass validation\n\n## Benefits\n\n1. **Single Source of Truth**: Model requirements defined once in config\n2. **Backwards Compatible**: Old parameter values automatically mapped\n3. **Type Safe**: TypeScript validates at compile time\n4. **Clear Errors**: Meaningful error messages for invalid parameters\n5. **Extensible**: Easy to add new models with custom requirements\n6. **No Code Changes**: Providers automatically use transformations\n7. **No Whack-a-Mole**: Model-specific quirks handled declaratively\n\n## Next Steps\n\nTo add parameter mapping for other models:\n\n1. Identify models with parameter requirements (check API docs)\n2. Add `apiMapping` to relevant parameters in `model-configs.ts`\n3. Test with `test-parameter-validation.ts`\n4. Deploy - existing code automatically uses mappings\n\n## Example: Adding a New Model\n\n```typescript\n{\n  id: 'new-model',\n  name: 'New Model',\n  provider: 'custom',\n  parameters: [\n    {\n      key: 'creativityLevel',\n      label: 'Creativity',\n      type: 'select',\n      options: [\n        { value: 'conservative', label: 'Conservative' },\n        { value: 'balanced', label: 'Balanced' },\n        { value: 'experimental', label: 'Experimental' }\n      ],\n      default: 'balanced',\n      // Map UI values to what API expects\n      apiMapping: {\n        'conservative': '1',\n        'balanced': '2',\n        'experimental': '3'\n      }\n    }\n  ]\n}\n```\n\nNo other code changes needed - transformation happens automatically!\n\n",[],[18,68,1523],"0dd62c5e-e2e9-11f0-b141-42dde27851f2","FLOW-DIAGRAM.md","0dd62cf4-e2e9-11f0-b141-42dde27851f2",111,["D",1766815103506],"# Parameter Transformation Flow Diagram\n\n```\n┌─────────────────────────────────────────────────────────────────────┐\n│                         USER INPUT (Frontend)                        │\n│                                                                       │\n│  Model: qwen/qwen3-32b                                               │\n│  Parameters:                                                          │\n│    - reasoningEffort: \"medium\"  ← UI-friendly value                  │\n│    - temperature: 0.7                                                 │\n│    - webSearch: true                                                  │\n└───────────────────────────────┬─────────────────────────────────────┘\n                                │\n                                ↓\n┌─────────────────────────────────────────────────────────────────────┐\n│                    JOBS API (backend/routes/jobs.ts)                 │\n│                                                                       │\n│  1. Receive job request                                              │\n│  2. Extract parameters from input                                    │\n│  3. VALIDATE parameters                                              │\n│     ├─ validateParameters(modelId, params)                           │\n│     ├─ Check required fields                                         │\n│     ├─ Check value ranges                                            │\n│     └─ Check allowed values (with apiMapping support)                │\n│                                                                       │\n│  4. TRANSFORM parameters                                             │\n│     └─ transformParametersForAPI(modelId, params)                    │\n│        \"medium\" → \"default\" ✓                                        │\n│                                                                       │\n│  5. Pass transformed params to provider                              │\n└───────────────────────────────┬─────────────────────────────────────┘\n                                │\n                                ↓\n┌─────────────────────────────────────────────────────────────────────┐\n│                  GROQ PROVIDER (backend/providers/groq.ts)           │\n│                                                                       │\n│  1. Receive chat options with transformed parameters                 │\n│  2. Build request body                                               │\n│  3. Apply transformations again (double-check)                       │\n│     └─ transformParametersForAPI(model, { reasoningEffort, ... })   │\n│  4. Only add parameters if model supports them                       │\n│     └─ if (param && modelSupportsParameter(model, key))             │\n│  5. Send request to Groq API                                         │\n└───────────────────────────────┬─────────────────────────────────────┘\n                                │\n                                ↓\n┌─────────────────────────────────────────────────────────────────────┐\n│                        GROQ API (External)                           │\n│                                                                       │\n│  POST https://api.groq.com/openai/v1/chat/completions               │\n│  {                                                                    │\n│    \"model\": \"qwen/qwen3-32b\",                                        │\n│    \"messages\": [...],                                                │\n│    \"reasoning_effort\": \"default\",  ← API-compatible value ✓          │\n│    \"temperature\": 0.7,                                               │\n│    \"stream\": true                                                    │\n│  }                                                                    │\n│                                                                       │\n│  ✓ Success! No more errors                                           │\n└─────────────────────────────────────────────────────────────────────┘\n```\n\n## Model Configuration (model-configs.ts)\n\n```\n┌─────────────────────────────────────────────────────────────────────┐\n│                    MODEL CONFIG: qwen/qwen3-32b                      │\n│                                                                       │\n│  parameters: [                                                        │\n│    {                                                                  │\n│      key: 'reasoningEffort',                                         │\n│      type: 'select',                                                  │\n│      options: [                                                       │\n│        { value: 'none', label: 'None' },                             │\n│        { value: 'default', label: 'Default' }                        │\n│      ],                                                               │\n│      apiMapping: {                     ← THE KEY FEATURE             │\n│        'none': 'none',           ✓ Direct mapping                    │\n│        'default': 'default',     ✓ Direct mapping                    │\n│        'low': 'none',            ✓ Backwards compat                  │\n│        'medium': 'default',      ✓ Backwards compat                  │\n│        'high': 'default'         ✓ Backwards compat                  │\n│      }                                                                │\n│    }                                                                  │\n│  ]                                                                    │\n└─────────────────────────────────────────────────────────────────────┘\n```\n\n## Validation Flow\n\n```\nvalidateParameters(modelId, params)\n  │\n  ├─ For each parameter in model config:\n  │   │\n  │   ├─ Check if required and missing → ERROR\n  │   │\n  │   ├─ If present, validate by type:\n  │   │   │\n  │   │   ├─ NUMBER:\n  │   │   │   ├─ Is it a number?\n  │   │   │   ├─ Within min/max range?\n  │   │   │   └─ → Add to errors if invalid\n  │   │   │\n  │   │   ├─ SELECT:\n  │   │   │   ├─ Is it one of the allowed options?\n  │   │   │   ├─ OR is it a valid apiMapping key?  ← NEW\n  │   │   │   └─ → Add to errors if invalid\n  │   │   │\n  │   │   ├─ STRING/TEXTAREA:\n  │   │   │   ├─ Within maxLength?\n  │   │   │   └─ → Add to errors if invalid\n  │   │   │\n  │   │   └─ BOOLEAN:\n  │   │       └─ Is it true/false?\n  │   │\n  │   └─ Continue to next parameter\n  │\n  └─ Return array of error messages (empty if valid)\n```\n\n## Transformation Flow\n\n```\ntransformParametersForAPI(modelId, params)\n  │\n  ├─ Get model config\n  │\n  ├─ For each parameter:\n  │   │\n  │   ├─ Is it a SELECT parameter?\n  │   │   │\n  │   │   ├─ Does it have apiMapping?\n  │   │   │   │\n  │   │   │   ├─ Is current value in mapping?\n  │   │   │   │   │\n  │   │   │   │   └─ YES: Replace value with mapped value\n  │   │   │   │       \"medium\" → \"default\" ✓\n  │   │   │   │\n  │   │   │   └─ NO: Keep original value\n  │   │   │\n  │   │   └─ No apiMapping: Keep original value\n  │   │\n  │   └─ Not a SELECT: Keep original value\n  │\n  ├─ Apply model-specific transformParameters() if exists\n  │\n  └─ Return transformed parameters\n```\n\n## Error Handling\n\n### Before (No Validation):\n```\nUser selects \"medium\" reasoning\n   ↓\nSent directly to API\n   ↓\nGroq API rejects: \"must be 'none' or 'default'\"\n   ↓\nError shown to user 😞\n```\n\n### After (With Validation & Transformation):\n```\nUser selects \"medium\" reasoning\n   ↓\nValidated: \"medium\" is valid (in apiMapping) ✓\n   ↓\nTransformed: \"medium\" → \"default\"\n   ↓\nSent to API with correct value\n   ↓\nAPI accepts request ✓\n   ↓\nUser gets response 😊\n```\n\n## Key Components\n\n1. **`SelectParameter.apiMapping`**: Maps UI values to API values\n2. **`validateParameters()`**: Validates before sending to API\n3. **`transformParametersForAPI()`**: Transforms values using mappings\n4. **`ModelConfig.transformParameters`**: Custom transformation logic (optional)\n5. **Provider Integration**: Uses transformations automatically\n\n## Benefits\n\n- ✅ **Declarative**: Define mappings in config, not scattered in code\n- ✅ **Type-Safe**: TypeScript checks everything\n- ✅ **Backwards Compatible**: Old values still work\n- ✅ **Extensible**: Easy to add new models/mappings\n- ✅ **Debuggable**: Clear validation errors\n- ✅ **No Code Duplication**: One system for all providers\n\n",[],[18,68,1531],"0d95d280-e2e9-11f0-bb45-42dde27851f2","FIX-IMAGE-DETAIL.md","0d95d33e-e2e9-11f0-bb45-42dde27851f2",102,["D",1766815103152],"# Fix: image_detail Parameter Error\n\n## Issue\nGPT-OSS models were receiving `image_detail` parameter even though they don't support it, causing:\n```json\n{\n  \"id\": \"1766681048491-1\",\n  \"status\": \"error\",\n  \"error\": \"property 'image_detail' is unsupported\"\n}\n```\n\n## Root Cause\nThe code was applying transformations to ALL parameters and then checking if the model supports them. However, if `imageDetail` was set in the options (perhaps from a previous model selection or default settings), it would be included in the transformation and potentially sent to models that don't support it.\n\n## Solution\nThe fix ensures that **parameters are only added to the request if the model explicitly supports them**:\n\n```typescript\n// Transform parameters for this specific model\nconst transformedParams = transformParametersForAPI(model, {\n  reasoningEffort: options?.reasoningEffort,\n  imageDetail: options?.imageDetail,\n  webSearch: options?.webSearch,\n  codeExecution: options?.codeExecution,\n});\n\n// Add parameters ONLY if model supports them\nif (transformedParams.reasoningEffort && modelSupportsParameter(model, 'reasoningEffort')) {\n  requestBody.reasoning_effort = transformedParams.reasoningEffort;\n}\n\n// Image detail ONLY for vision models\nif (transformedParams.imageDetail && modelSupportsParameter(model, 'imageDetail')) {\n  requestBody.image_detail = transformedParams.imageDetail;\n}\n```\n\n## Model Configuration\n\nOnly **Llama 4 Vision models** have `imageDetail` parameter:\n\n✅ **Support imageDetail:**\n- `meta-llama/llama-4-maverick-17b-128e-instruct`\n- `meta-llama/llama-4-scout-17b-16e-instruct`\n\n❌ **DON'T support imageDetail:**\n- `openai/gpt-oss-120b`\n- `openai/gpt-oss-20b`\n- `llama-3.3-70b-versatile`\n- `qwen/qwen3-32b`\n- All other non-vision models\n\n## How It Works\n\nThe `modelSupportsParameter()` function checks if a parameter exists in the model's configuration:\n\n```typescript\nfunction modelSupportsParameter(modelId: string, parameterKey: string): boolean {\n  const config = getModelConfig(modelId);\n  if (!config) return false;\n  return config.parameters.some(p => p.key === parameterKey);\n}\n```\n\n### Example Flow:\n\n**GPT-OSS Model (no imageDetail):**\n```\n1. User options include imageDetail: 'auto'\n2. Transform: imageDetail: 'auto' (no mapping needed)\n3. Check: modelSupportsParameter('openai/gpt-oss-120b', 'imageDetail') → false\n4. Result: image_detail NOT added to request ✓\n```\n\n**Llama 4 Vision Model (has imageDetail):**\n```\n1. User options include imageDetail: 'auto'\n2. Transform: imageDetail: 'auto'\n3. Check: modelSupportsParameter('meta-llama/llama-4-maverick-17b-128e-instruct', 'imageDetail') → true\n4. Result: image_detail: 'auto' added to request ✓\n```\n\n## Benefits\n\n1. **No More Unsupported Parameter Errors**: Parameters only sent when supported\n2. **Type-Safe Configuration**: Model configs define what's supported\n3. **No Code Changes Needed**: Works automatically for all models\n4. **Clear Separation**: Vision parameters vs thinking parameters vs base parameters\n\n## Files Changed\n\n1. **`backend/providers/groq.ts`**\n   - Fixed parameter checking logic\n   - Added clear comments explaining when each parameter is used\n   - Applied same pattern to both `complete()` and `stream()` methods\n\n## Testing\n\nRun verification:\n```bash\ndeno run backend/providers/test-parameter-validation.ts\n```\n\nAll tests pass ✅\n\n## Related Issues Fixed\n\nThis same pattern fixes:\n- ✅ `reasoning_effort` mapping (Qwen: medium → default)\n- ✅ `image_detail` support check (only vision models)\n- ✅ `web_search` support check (only compound/thinking models)\n- ✅ `code_execution` support check (only compound/thinking models)\n\nThe parameter validation system now handles **all** model-specific quirks declaratively through the model configuration.\n\n",[],[18,68,1539],["D",1766815097871],[231,232,233,234,235,236,237,238,239,240,241,242],[18,68],["D",1766815097206],[230,243,249,250,251],[18],["D",1766815045152],["D",1789530642963],{"_11":12,"_165":74},{"_11":12,"_161":-5,"_73":74,"_31":72,"_162":163,"_164":30},{"_43":152,"_13":16,"_37":40,"_153":115,"_154":-5,"_155":-5,"_156":-5,"_157":-5,"_158":-5,"_159":14,"_160":12},"ctx",{"_56":-5,"_184":1590,"_1591":747,"_1592":1593,"_1594":30,"_1595":30,"_1596":30,"_1597":24,"_1598":-5,"_1599":-7,"_1600":-7,"_1601":26,"_1602":30,"_1603":30,"_1604":-5,"_1605":30,"_1606":30,"_1607":30,"_1608":-5},"ENV",{"_1561":1562,"_1563":1564,"_1565":16,"_1566":1567,"_1568":1569,"_1570":1571,"_1572":1573,"_1574":1575,"_1576":1577,"_1578":1579,"_1580":1581,"_1582":1583,"_1584":1585,"_1586":1587,"_1588":1589},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

History · backend