\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",[],[205,212,247],{"_105":255,"_96":256,"_155":257,"_157":213,"_158":140,"_159":258,"_161":162,"_107":259,"_101":32,"_164":223,"_166":260,"_167":22,"_168":-5,"_169":261,"_99":262},"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",[],[205,212,256],{"_105":264,"_96":265,"_155":266,"_157":213,"_158":140,"_159":267,"_161":162,"_107":268,"_101":32,"_164":223,"_166":269,"_167":22,"_168":-5,"_169":270,"_99":271},"0bca693e-e2e9-11f0-b941-42dde27851f2","index.js","0bca6a1a-e2e9-11f0-b941-42dde27851f2",29,["D",1766815099829],"/**\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 { 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 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    ...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 (!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 with Alpine and start\nAlpine.data('chatApp', chatApp);\nAlpine.start();\n\n// Export for potential external use\nexport { chatApp, MODELS };\n",[],[205,212,265],{"_105":273,"_96":274,"_155":275,"_157":213,"_158":140,"_159":276,"_161":162,"_107":277,"_101":32,"_164":223,"_166":278,"_167":22,"_168":-5,"_169":279,"_99":280},"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",[],[205,212,274],{"_105":282,"_96":283,"_155":284,"_157":213,"_158":140,"_159":285,"_161":162,"_107":286,"_101":32,"_164":223,"_166":287,"_167":22,"_168":-5,"_169":288,"_99":289},"0ba63e06-e2e9-11f0-a009-42dde27851f2","messaging.js","0ba63ece-e2e9-11f0-a009-42dde27851f2",25,["D",1766815099914],"/**\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    async hydrateMonacoEditors() {\n      // IMPORTANT: This function manipulates DOM which can break Alpine's x-for tracking\n      // We need to be very careful to only modify elements OUTSIDE the x-for template\n      // Use a safer approach: add Monaco INSIDE the existing element instead of replacing\n      \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        if (['javascript', 'js', 'typescript', 'ts', 'json'].includes(language)) {\n          const code = block.textContent;\n          \n          if (!pre.parentNode) continue;\n          \n          // SAFER APPROACH: Instead of replacing the pre element (which breaks Alpine),\n          // hide the original content and add Monaco as a sibling\n          // This preserves Alpine's DOM tracking\n          \n          // Mark as hydrated first to prevent double processing\n          pre.classList.add('monaco-hydrated');\n          \n          // Hide the original code block\n          pre.style.display = 'none';\n          \n          // Create Monaco wrapper as a sibling, not a replacement\n          const wrapper = document.createElement('div');\n          wrapper.className = 'monaco-wrapper';\n          wrapper.style.position = 'relative';\n          wrapper.style.marginTop = '1rem';\n          wrapper.style.marginBottom = '1rem';\n          \n          const container = document.createElement('div');\n          container.style.height = '200px';\n          container.style.width = '100%';\n          container.style.border = '1px solid #e2e8f0';\n          container.style.borderRadius = '0.375rem';\n          container.style.overflow = 'hidden';\n          container.style.backgroundColor = '#ffffff';\n          \n          wrapper.appendChild(container);\n          addCopyButton(wrapper, code);\n          \n          // Insert after the pre instead of replacing\n          pre.parentNode.insertBefore(wrapper, pre.nextSibling);\n\n          await this.$nextTick();\n\n          createMonacoEditor(container, code, language, {\n            readOnly: true,\n            lineNumbers: 'off'\n          });\n        } else {\n          pre.classList.add('monaco-hydrated');\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      // Create chat with forked messages (deep copy to avoid reference issues)\n      const messageCopy = JSON.parse(JSON.stringify(forkedMessages));\n      this.chats[id] = {\n        messages: messageCopy,\n        metadata: {\n          createdAt: Date.now(),\n          updatedAt: Date.now(),\n          forkedFrom: this.activeChatId,\n          forkedAt: Date.now()\n        }\n      };\n      \n      // Select the new chat\n      this.selectChat(id);\n      \n      console.log('[forkChatFromMessage] Created forked chat:', id, 'with', forkedMessages.length, 'messages');\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    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",[],[205,212,283],{"_105":291,"_96":292,"_155":293,"_157":213,"_158":140,"_159":294,"_161":162,"_107":295,"_101":32,"_164":223,"_166":296,"_167":22,"_168":-5,"_169":297,"_99":298},"0b83422a-e2e9-11f0-b141-42dde27851f2","models.js","0b834310-e2e9-11f0-b141-42dde27851f2",20,["D",1766815099683],"/**\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}\n",[],[205,212,292],{"_105":300,"_96":301,"_155":302,"_157":213,"_158":140,"_159":303,"_161":162,"_107":304,"_101":32,"_164":223,"_166":305,"_167":22,"_168":-5,"_169":306,"_99":307},"0ba174fc-e2e9-11f0-8def-42dde27851f2","providerSettings.js","0ba175e2-e2e9-11f0-8def-42dde27851f2",24,["D",1766815099847],"/**\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        // 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    // 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 === 'custom' && 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        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 provider, use custom name or extract from URL\n        if (providerId === '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 === '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] || 'mdi:robot',\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",[],[205,212,301],{"_105":309,"_96":310,"_155":311,"_157":213,"_158":140,"_159":312,"_161":162,"_107":313,"_101":32,"_164":223,"_166":314,"_167":22,"_168":-5,"_169":315,"_99":316},"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",[],[205,212,310],{"_105":318,"_96":319,"_155":320,"_157":213,"_158":140,"_159":321,"_161":162,"_107":322,"_101":32,"_164":223,"_166":323,"_167":22,"_168":-5,"_169":324,"_99":325},"0bb0d5be-e2e9-11f0-8def-42dde27851f2","state.js","0bb0d6ae-e2e9-11f0-8def-42dde27851f2",26,["D",1766815099983],"/**\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\nexport function createInitialState() {\n  return {\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}\n\n",[],[205,212,319],{"_105":327,"_96":328,"_155":329,"_157":213,"_158":140,"_159":330,"_161":162,"_107":331,"_101":32,"_164":223,"_166":332,"_167":22,"_168":-5,"_169":333,"_99":334},"0be9b514-e2e9-11f0-b39b-42dde27851f2","storage.js","0be9b5fa-e2e9-11f0-b39b-42dde27851f2",32,["D",1766815100356],"/**\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          // 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        };\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        };\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        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",[],[205,212,328],{"_105":336,"_96":337,"_155":338,"_157":213,"_158":140,"_159":339,"_161":162,"_107":340,"_101":32,"_164":223,"_166":341,"_167":22,"_168":-5,"_169":342,"_99":343},"0bba6ee4-e2e9-11f0-b141-42dde27851f2","threads.js","0bba70e2-e2e9-11f0-b141-42dde27851f2",27,["D",1766815100044],"// =============================================================================\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)\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 === '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",[],[205,212,337],[205,212],{"_105":346,"_96":347,"_155":348,"_157":206,"_158":140,"_159":349,"_161":162,"_107":350,"_101":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_169":351,"_99":789},"0a5844a4-e2e9-11f0-8ff9-42dde27851f2","styles","0a5845a8-e2e9-11f0-8ff9-42dde27851f2",7,["D",1766815097725],[352,424,726,735,744,753,762,771,780],{"_105":353,"_96":354,"_155":355,"_157":348,"_158":140,"_159":356,"_161":162,"_107":357,"_101":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_169":358,"_99":423},"0aa9edea-e2e9-11f0-9dc9-42dde27851f2","components","0aa9eea8-e2e9-11f0-9dc9-42dde27851f2",10,["D",1766815098260],[359,369,378,387,396,405,414],{"_105":360,"_96":361,"_155":362,"_157":355,"_158":140,"_159":363,"_161":162,"_107":364,"_101":32,"_164":365,"_166":366,"_167":22,"_168":-5,"_169":367,"_99":368},"0c0ca6f0-e2e9-11f0-80a8-42dde27851f2","_chat-input.scss","0c0ca786-e2e9-11f0-80a8-42dde27851f2",38,["D",1766815100586],"file","// Chat Input Area Styles\n\n.chat-input-wrapper {\n  @apply flex flex-col items-center absolute bottom-0 inset-x-2 z-10 mb-2;\n  background-color: transparent;\n}\n\n.chat-input-container {\n  @apply w-full max-w-3xl flex flex-col gap-1 p-2;\n  background-color: var(--color-bg-primary);\n  border: 1px solid var(--color-border);\n  border-radius: var(--radius-input);\n  transition: box-shadow 0.15s ease-in-out, border-color 0.15s ease-in-out;\n  \n  // &.multiline {\n  //   border-radius: 1rem;\n  // }\n  \n  &:focus-within {\n    @apply shadow-md;\n    border-color: var(--color-primary);\n  }\n}\n\n.chat-input {\n  @apply bg-transparent border-none resize-none w-full;\n  font-size: 1rem;\n  max-height: 200px;\n  padding: 0.5rem 0.75rem;\n  line-height: 1.5;\n  height: auto;\n  min-height: auto;\n  outline: none !important;\n  border: none !important;\n  box-shadow: none !important;\n  \n  &:focus,\n  &:active,\n  &:focus-visible {\n    outline: none !important;\n    border: none !important;\n    box-shadow: none !important;\n  }\n  \n  &::placeholder {\n    color: var(--color-text-muted);\n  }\n}\n\n.chat-input-actions {\n  @apply flex items-center gap-2 px-1 pb-1;\n}\n\n// Buttons\n.action-button {\n  @apply w-8 h-8 rounded-full bg-transparent border-none flex items-center justify-center cursor-pointer transition-colors flex-shrink-0;\n  color: var(--color-text-muted);\n  \n  &:hover {\n    background-color: var(--color-bg-muted);\n    color: var(--color-text-primary);\n  }\n  \n  .iconify {\n    font-size: 20px;\n  }\n}\n\n.plus-button {\n  @apply bg-transparent;\n  color: var(--color-text-primary);\n  \n  &:hover {\n    background-color: var(--color-bg-muted);\n  }\n}\n\n.send-button {\n  @apply w-8 h-8 rounded-full flex items-center justify-center cursor-pointer transition-all flex-shrink-0;\n  background-color: var(--color-primary);\n  color: var(--color-white);\n  border: none;\n  \n  &:hover:not(:disabled) {\n    background-color: var(--color-primary-hover);\n    @apply opacity-100;\n  }\n  \n  &:active:not(:disabled) {\n    transform: scale(0.95);\n  }\n  \n  &:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n    background-color: var(--color-bg-disabled);\n    color: var(--color-text-disabled);\n  }\n  \n  .iconify {\n    font-size: 18px;\n  }\n}\n\n// Attachment Menu\n.attachment-menu {\n  @apply absolute bg-white border border-gray-200 rounded-2xl p-2 flex flex-col gap-1 shadow-lg z-20;\n  bottom: calc(100% - 10px);\n  left: 1rem;\n  min-width: 180px;\n  transform-origin: bottom left;\n  \n  @media (min-width: 768px) {\n    left: calc(50% - 384px + 1rem);\n  }\n}\n\n.attachment-option {\n  @apply flex items-center gap-3 p-3 w-full border-none bg-transparent rounded-lg cursor-pointer text-sm transition-colors;\n  color: #0f172a;\n  \n  &:hover {\n    @apply bg-gray-50;\n  }\n}\n\n.attachment-icon {\n  @apply w-8 h-8 rounded-full flex items-center justify-center;\n  \n  .iconify {\n    font-size: 18px;\n  }\n}\n\n// Utility classes for attachment icons\n.bg-blue-100 { background-color: #dbeafe; }\n.text-blue-600 { color: #2563eb; }\n.bg-purple-100 { background-color: #f3e8ff; }\n.text-purple-600 { color: #9333ea; }\n\n// Footer\n.footer-text {\n  @apply text-xs text-center mt-3;\n  color: #64748b;\n}\n\n",[],[205,347,354,361],{"_105":370,"_96":371,"_155":372,"_157":355,"_158":140,"_159":373,"_161":162,"_107":374,"_101":32,"_164":365,"_166":375,"_167":22,"_168":-5,"_169":376,"_99":377},"0c23698a-e2e9-11f0-b39b-42dde27851f2","_chat-messages.scss","0c236a66-e2e9-11f0-b39b-42dde27851f2",42,["D",1766815100735],"// Chat Messages and Input Area Styles\n\n// Error Callout Styles\n.error-callout {\n  @apply rounded-lg p-4 bg-red-50 border border-red-200;\n  margin: 0.5rem 0;\n  \n  .error-title {\n    @apply font-semibold text-red-800 mb-2 flex items-center;\n    font-size: 0.9375rem;\n  }\n  \n  .error-message {\n    @apply text-sm text-red-700;\n    line-height: 1.5;\n    \n    p {\n      margin: 0.25rem 0;\n    }\n    \n    ol {\n      margin: 0.5rem 0;\n      padding-left: 1.5rem;\n      \n      li {\n        margin: 0.25rem 0;\n      }\n    }\n    \n    a {\n      @apply text-blue-600 underline;\n      \n      &:hover {\n        @apply text-blue-700;\n      }\n    }\n  }\n}\n\n// Messages Area\n.chat-messages {\n  @apply w-full flex flex-col items-center;\n}\n\n.messages-content {\n  @apply w-full max-w-full md:max-w-3xl px-2 sm:px-2 py-8 pb-40 flex flex-col gap-0;\n}\n\n// Message Wrappers\n.message-wrapper {\n  @apply flex w-full;\n  animation: fadeIn 0.3s ease-out forwards;\n}\n\n.message-group {\n  @apply flex flex-col relative;\n  max-width: 100%;\n}\n\n.message-wrapper-me {\n  @apply justify-end;\n  \n  .message-group {\n    @apply items-end;\n    max-width: 85%;\n  }\n}\n\n.message-wrapper-them {\n  @apply justify-start;\n  \n  .message-group {\n    @apply items-start w-full;\n  }\n}\n\n@keyframes fadeIn {\n  from { opacity: 0; transform: translateY(10px); }\n  to { opacity: 1; transform: translateY(0); }\n}\n\n// Messages\n.message {\n  @apply relative;\n  padding: 0.75rem 1.25rem;\n  font-size: 1rem;\n  line-height: 1.6;\n}\n\n.message-me {\n  background-color: #f4f4f5;\n  border-radius: 1.25rem;\n}\n\n.message-them {\n  @apply bg-transparent p-0;\n}\n\n.message-me p {\n  @apply m-0 break-words whitespace-pre-wrap;\n}\n\n.message p {\n  @apply break-words whitespace-pre-wrap;\n}\n\n.message-attachment {\n  @apply flex items-center gap-2 mt-2 p-2 rounded-lg text-sm;\n  background-color: rgba(0,0,0,0.05);\n}\n\n// Action Buttons\n.message-actions {\n  @apply flex gap-0 mt-2 opacity-0 transition-opacity;\n}\n\n.message-wrapper:hover .message-actions {\n  @apply opacity-100;\n}\n\n.actions-me {\n  @apply justify-end;\n}\n\n.actions-them {\n  @apply justify-start;\n}\n\n.action-icon-btn {\n  @apply bg-transparent border-none cursor-pointer p-1 rounded flex items-center justify-center transition-colors;\n  color: #94a3b8;\n  transition: color 0.2s ease, background-color 0.2s ease;\n  \n  &:hover {\n    @apply bg-gray-100;\n    color: #0f172a;\n  }\n  \n  &.copied {\n    color: var(--color-success, #10b981);\n    \n    &:hover {\n      color: var(--color-success-dark, #059669);\n    }\n  }\n  \n  &.active {\n    @apply bg-gray-200;\n    color: #0f172a;\n  }\n  \n  .iconify {\n    font-size: 16px;\n  }\n}\n\n// Thinking/Reasoning Section\n.message-thinking {\n  @apply border-l-2 border-gray-300 mb-4;\n  color: #6b7280; // gray-500\n  font-size: 0.9375rem;\n  \n  .message-thinking-header {\n    @apply flex items-center gap-2 mb-2 font-medium text-gray-600;\n    font-size: 0.875rem;\n    \n    .iconify {\n      font-size: 16px;\n    }\n  }\n  \n  // Override default text color for thinking content\n  p, li, code, pre {\n    color: #6b7280;\n  }\n  \n  // Keep links visible\n  a {\n    @apply text-blue-500 underline;\n    &:hover {\n      @apply text-blue-600;\n    }\n  }\n  \n  // Code blocks in thinking\n  pre {\n    @apply bg-gray-50 border border-gray-200;\n  }\n}\n\n// Message Editing (inline contenteditable)\npre.message-content-editable {\n  // Reset pre styles completely\n  all: unset;\n  display: block;\n  outline: none;\n  cursor: text;\n  border-radius: 0.5rem;\n  padding: 0.5rem;\n  margin: -0.5rem;\n  background-color: transparent;\n  // box-shadow: 0 0 0 2px var(--color-primary, #3b82f6);\n  white-space: pre-wrap;\n  word-wrap: break-word;\n  font-family: inherit;\n  font-size: inherit;\n  line-height: 1.6;\n  min-height: 1.5em;\n  color: inherit;\n  \n  &:focus {\n    outline: none;\n  }\n}\n\n// Monaco wrapper styles\n.monaco-hydrated {\n  @apply relative my-4;\n}\n\n.monaco-copy-btn {\n  @apply absolute top-2 right-2 p-1 px-2 rounded border border-gray-200 bg-white cursor-pointer opacity-0 transition-opacity z-10 flex items-center gap-1;\n}\n\n.monaco-hydrated:hover .monaco-copy-btn {\n  @apply opacity-100;\n}\n\n// Code block styling\n.message-content {\n  // Remove bottom margin from last paragraph\n  p:last-child {\n    margin-bottom: 0;\n  }\n  \n  pre {\n    @apply my-4 p-4 rounded-md overflow-x-auto;\n    background-color: #f8fafc;\n    border: 1px solid #e2e8f0;\n    color: var(--color-text-primary, #0f172a);\n    font-size: 0.9375rem;\n    line-height: 1.6;\n    \n    code {\n      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;\n      font-size: inherit;\n      line-height: inherit;\n      background: none;\n      padding: 0;\n      color: var(--color-text-primary, #0f172a);\n    }\n  }\n  \n  code {\n    @apply px-1 py-0.5 rounded text-sm;\n    background-color: #f1f5f9;\n    color: #e11d48;\n    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;\n  }\n  \n  pre code {\n    color: var(--color-text-primary, #0f172a);\n    background: none;\n  }\n  \n  // Table styling - constrain width and make responsive\n  table {\n    @apply w-full my-4 border-collapse;\n    max-width: 100%;\n    display: block;\n    overflow-x: auto;\n    \n    thead, tbody, tr {\n      display: table;\n      width: 100%;\n      table-layout: fixed;\n    }\n    \n    th, td {\n      @apply px-3 py-2 text-left border border-gray-200;\n      word-wrap: break-word;\n      overflow-wrap: break-word;\n      hyphens: auto;\n    }\n    \n    th {\n      @apply bg-gray-50 font-semibold;\n    }\n    \n    td {\n      @apply bg-white;\n    }\n  }\n}\n\n// Typing Indicator\n.typing-indicator {\n  @apply flex gap-1 py-2;\n}\n\n.typing-dot {\n  @apply w-1.5 h-1.5 bg-gray-400 rounded-full;\n  animation: bounce 1.4s infinite ease-in-out both;\n  \n  &:nth-child(1) { animation-delay: -0.32s; }\n  &:nth-child(2) { animation-delay: -0.16s; }\n}\n\n@keyframes bounce {\n  0%, 80%, 100% { transform: scale(0); }\n  40% { transform: scale(1); }\n}\n\n",[],[205,347,354,371],{"_105":379,"_96":380,"_155":381,"_157":355,"_158":140,"_159":382,"_161":162,"_107":383,"_101":32,"_164":365,"_166":384,"_167":22,"_168":-5,"_169":385,"_99":386},"0c1613b6-e2e9-11f0-b941-42dde27851f2","_layout.scss","0c161492-e2e9-11f0-b941-42dde27851f2",40,["D",1766815100645],"// Chat Layout and Structure\n\n.chat-layout {\n  display: flex;\n  height: 100vh;\n  overflow: hidden;\n}\n\n.chat-main {\n  flex: 1;\n  min-width: 0;\n  height: 100vh;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n}\n\n.chat-main .chat-container {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n  position: relative;\n  padding-bottom: 0;\n}\n\n.chat-main .chat-messages {\n  flex: 1;\n  overflow-y: auto;\n}\n\n// Chat Container\n.chat-container {\n  @apply min-h-[96vh] relative;\n  background-color: #ffffff;\n  padding-bottom: 100px;\n}\n\n// ==========================================================================\n// Chat Inset Header (Main area header with toggle)\n// ==========================================================================\n\n.chat-inset-header {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  height: 3rem;\n  padding: 0 0.75rem;\n  border-bottom: 1px solid var(--color-border, #e2e8f0);\n  background-color: var(--color-bg-primary, #ffffff);\n  flex-shrink: 0;\n}\n\n.chat-sidebar-trigger {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 2rem;\n  height: 2rem;\n  padding: 0;\n  border: 1px solid var(--color-border, #e2e8f0);\n  border-radius: 0.375rem;\n  background-color: var(--color-bg-primary, #ffffff);\n  color: var(--color-text-muted, #94a3b8);\n  cursor: pointer;\n  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;\n  \n  &:hover {\n    background-color: var(--color-bg-muted, #f1f5f9);\n    color: var(--color-text-primary, #0f172a);\n    border-color: var(--color-text-muted, #94a3b8);\n  }\n}\n\n.chat-sidebar-trigger-icon {\n  width: 1rem;\n  height: 1rem;\n  transition: transform 0.2s ease;\n  \n  &.rotated {\n    transform: rotate(180deg);\n  }\n}\n\n.chat-inset-title {\n  @apply text-sm;\n  font-weight: 600;\n  color: var(--color-text-primary, #0f172a);\n  flex: 1;\n  min-width: 0; /* Allow flex item to shrink */\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n// ==========================================================================\n// Chat Header (legacy - keeping for mobile toggle)\n// ==========================================================================\n\n.chat-header {\n  display: none; /* Hide legacy header, using inset header now */\n}\n\n.chat-header-toggle {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 2rem;\n  height: 2rem;\n  padding: 0;\n  border: none;\n  border-radius: 0.375rem;\n  background-color: transparent;\n  color: var(--color-text-muted, #94a3b8);\n  cursor: pointer;\n  \n  &:hover {\n    background-color: var(--color-bg-muted, #f1f5f9);\n    color: var(--color-text-primary, #0f172a);\n  }\n  \n  .iconify {\n    width: 1.25rem;\n    height: 1.25rem;\n  }\n}\n\n.chat-header-title {\n  flex: 1;\n  font-size: 1rem;\n  font-weight: 600;\n  color: var(--color-text-primary, #0f172a);\n  margin: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n// ==========================================================================\n// Chat Welcome State\n// ==========================================================================\n\n.chat-welcome {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 4rem 2rem;\n  text-align: center;\n}\n\n.chat-welcome-icon {\n  width: 4rem;\n  height: 4rem;\n  margin-bottom: 1.5rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--color-primary-light, #dbeafe);\n  border-radius: 50%;\n  \n  .iconify {\n    width: 2rem;\n    height: 2rem;\n    color: var(--color-primary, #3b82f6);\n  }\n}\n\n.chat-welcome h2 {\n  margin: 0 0 0.5rem;\n  font-size: 1.5rem;\n  font-weight: 700;\n  color: var(--color-text-primary, #0f172a);\n}\n\n.chat-welcome p {\n  margin: 0 0 1.5rem;\n  font-size: 1rem;\n  color: var(--color-text-muted, #94a3b8);\n  max-width: 24rem;\n}\n\n.chat-welcome-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0.75rem 1.25rem;\n  border: none;\n  border-radius: 0.5rem;\n  background-color: var(--color-primary, #3b82f6);\n  color: #ffffff;\n  font-size: 0.9375rem;\n  font-weight: 600;\n  cursor: pointer;\n  transition: background-color 0.15s ease;\n  \n  &:hover {\n    background-color: var(--color-primary-hover, #2563eb);\n  }\n  \n  .iconify {\n    width: 1.25rem;\n    height: 1.25rem;\n  }\n}\n\n",[],[205,347,354,380],{"_105":388,"_96":389,"_155":390,"_157":355,"_158":140,"_159":391,"_161":162,"_107":392,"_101":32,"_164":365,"_166":393,"_167":22,"_168":-5,"_169":394,"_99":395},"0c0966d4-e2e9-11f0-9dc9-42dde27851f2","_model-picker.scss","0c096788-e2e9-11f0-9dc9-42dde27851f2",37,["D",1766815100563],"// Model Picker Styles\n\n.model-picker-button {\n  display: flex;\n  align-items: center;\n  gap: 0.375rem;\n  padding: 0.25rem 0.5rem;\n  font-size: 0.8125rem;\n  color: #64748b;\n  background: transparent;\n  border: none;\n  border-radius: 0.5rem;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  max-width: 160px;\n  \n  &:hover {\n    background: #f1f5f9;\n    color: #334155;\n  }\n}\n\n.model-picker-dropdown {\n  position: absolute;\n  left: 0;\n  width: 420px;\n  padding: 0;\n  background: white;\n  border: 1px solid #e2e8f0;\n  border-radius: 0.75rem;\n  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);\n  z-index: 50;\n  overflow: hidden;\n}\n\n.model-picker-search {\n  display: flex;\n  align-items: center;\n  padding: 0 0.75rem;\n  border-bottom: 1px solid #f1f5f9;\n}\n\n.model-picker-search-input {\n  flex: 1;\n  height: 2.5rem;\n  background: transparent !important;\n  border: none !important;\n  outline: none !important;\n  box-shadow: none !important;\n  font-size: 0.875rem;\n  \n  &::placeholder {\n    color: #94a3b8;\n  }\n  \n  &:focus {\n    outline: none !important;\n    box-shadow: none !important;\n    border: none !important;\n    ring: none;\n  }\n}\n\n.model-picker-list {\n  max-height: 220px;\n  overflow-y: auto;\n  padding: 0.25rem;\n}\n\n.model-picker-item {\n  display: flex;\n  align-items: center;\n  padding: 0.5rem 0.625rem;\n  border-radius: 0.5rem;\n  cursor: pointer;\n  transition: background 0.15s ease;\n  \n  &:hover {\n    background: #f8fafc;\n  }\n  \n  .text-primary {\n    color: #f97316;\n  }\n  \n  .font-medium {\n    font-size: 0.875rem;\n  }\n}\n\n.model-picker-item-selected {\n  background: #f1f5f9;\n}\n\n.model-picker-item-preview {\n  background: #f8fafc;\n}\n\n.model-picker-logo {\n  width: 1.5rem;\n  height: 1.5rem;\n  margin-right: 0.625rem;\n  flex-shrink: 0;\n  border-radius: 0.375rem;\n  object-fit: contain;\n}\n\n.model-picker-preview-badge {\n  font-size: 0.625rem;\n  font-weight: 500;\n  padding: 0.125rem 0.375rem;\n  border-radius: 0.25rem;\n  background: #f1f5f9;\n  color: #64748b;\n  border: 1px solid #e2e8f0;\n  text-transform: uppercase;\n  letter-spacing: 0.025em;\n  flex-shrink: 0;\n}\n\n",[],[205,347,354,389],{"_105":397,"_96":398,"_155":399,"_157":355,"_158":140,"_159":400,"_161":162,"_107":401,"_101":32,"_164":365,"_166":402,"_167":22,"_168":-5,"_169":403,"_99":404},"0c544e60-e2e9-11f0-b141-42dde27851f2","_right-sidebar.scss","0c544f28-e2e9-11f0-b141-42dde27851f2",48,["D",1766815100948],"// Chat Settings Right Sidebar\n// Mirror of left sidebar styles for consistency\n\n// ==========================================================================\n// Right Sidebar Layout\n// ==========================================================================\n\n.chat-right-sidebar {\n  flex-shrink: 0;\n  width: 320px;\n  height: 100vh;\n  background-color: var(--color-bg-muted, #f8fafc);\n  border-left: 1px solid var(--color-border, #e2e8f0);\n  transition: width 0.2s ease, margin-right 0.2s ease;\n  overflow: hidden;\n  position: relative;\n}\n\n.chat-right-sidebar-collapsed {\n  width: 0;\n  margin-right: -1px;\n}\n\n.chat-right-sidebar-inner {\n  display: flex;\n  flex-direction: column;\n  width: 320px;\n  height: 100%;\n}\n\n// ==========================================================================\n// Right Sidebar Header\n// ==========================================================================\n\n.chat-right-sidebar-header {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  height: 3rem;\n  padding: 0 0.75rem;\n  border-bottom: 1px solid var(--color-border, #e2e8f0);\n  background-color: var(--color-bg-primary, #ffffff);\n}\n\n.chat-right-sidebar-header-content {\n  display: flex;\n  align-items: center;\n  gap: 0.375rem;\n  flex: 1;\n}\n\n.chat-right-sidebar-icon {\n  width: 1rem;\n  height: 1rem;\n  color: var(--color-text-muted, #94a3b8);\n}\n\n.chat-right-sidebar-title {\n  font-size: 0.8125rem;\n  font-weight: 600;\n  color: var(--color-text-primary, #0f172a);\n}\n\n.chat-right-sidebar-close {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 1.5rem;\n  height: 1.5rem;\n  padding: 0;\n  border: none;\n  border-radius: 0.25rem;\n  background-color: transparent;\n  color: var(--color-text-muted, #94a3b8);\n  cursor: pointer;\n  transition: background-color 0.15s ease, color 0.15s ease;\n  \n  &:hover {\n    background-color: var(--color-bg-muted, #f1f5f9);\n    color: var(--color-text-primary, #0f172a);\n  }\n}\n\n// ==========================================================================\n// Right Sidebar Content\n// ==========================================================================\n\n.chat-right-sidebar-content {\n  flex: 1;\n  overflow-y: auto;\n  padding: 0.75rem;\n}\n\n// ==========================================================================\n// Settings Group\n// ==========================================================================\n\n.chat-settings-group {\n  margin-bottom: 1.25rem;\n}\n\n.chat-settings-group-label {\n  padding: 0 0 0.5rem;\n  font-size: 0.6875rem;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  color: var(--color-text-muted, #94a3b8);\n}\n\n// ==========================================================================\n// Settings Form Fields\n// ==========================================================================\n\n.chat-settings-field {\n  margin-bottom: 1rem;\n}\n\n.chat-settings-label {\n  display: block;\n  margin-bottom: 0.375rem;\n  font-size: 0.8125rem;\n  font-weight: 500;\n  color: var(--color-text-primary, #0f172a);\n}\n\n.chat-settings-description {\n  display: block;\n  margin-bottom: 0.5rem;\n  font-size: 0.6875rem;\n  padding-top: 0.5rem;\n  color: var(--color-text-muted, #94a3b8);\n}\n\n.chat-settings-input,\n.chat-settings-textarea,\n.chat-settings-select {\n  width: 100%;\n  padding: 0.5rem 0.625rem;\n  font-size: 0.8125rem;\n  font-family: var(--font-mono, 'Menlo', monospace);\n  color: var(--color-text-primary, #0f172a);\n  background-color: var(--color-bg-primary, #ffffff);\n  border: 1px solid var(--color-border, #e2e8f0);\n  border-radius: 0.375rem;\n  transition: border-color 0.15s ease, box-shadow 0.15s ease;\n  \n  &:focus {\n    outline: none;\n    border-color: var(--color-primary, #3b82f6);\n    box-shadow: 0 0 0 2px var(--color-primary-light, #dbeafe);\n  }\n  \n  &::placeholder {\n    color: var(--color-text-muted, #94a3b8);\n  }\n}\n\n.chat-settings-textarea {\n  min-height: 6rem;\n  resize: vertical;\n  line-height: 1.5;\n}\n\n// ==========================================================================\n// Range/Slider Input\n// ==========================================================================\n\n.chat-settings-range-wrapper {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n}\n\n.chat-settings-range {\n  flex: 1;\n  height: 4px;\n  -webkit-appearance: none;\n  appearance: none;\n  background-color: var(--color-bg-secondary, #e2e8f0);\n  border-radius: 2px;\n  cursor: pointer;\n  \n  &::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    appearance: none;\n    width: 14px;\n    height: 14px;\n    background-color: var(--color-primary, #3b82f6);\n    border-radius: 50%;\n    cursor: pointer;\n    transition: transform 0.15s ease;\n    \n    &:hover {\n      transform: scale(1.1);\n    }\n  }\n  \n  &::-moz-range-thumb {\n    width: 14px;\n    height: 14px;\n    background-color: var(--color-primary, #3b82f6);\n    border: none;\n    border-radius: 50%;\n    cursor: pointer;\n  }\n  \n  &:focus {\n    outline: none;\n    \n    &::-webkit-slider-thumb {\n      box-shadow: 0 0 0 3px var(--color-primary-light, #dbeafe);\n    }\n  }\n}\n\n.chat-settings-range-value {\n  min-width: 3rem;\n  padding: 0.25rem 0.5rem;\n  font-size: 0.75rem;\n  font-family: var(--font-mono, 'Menlo', monospace);\n  color: var(--color-text-secondary, #64748b);\n  background-color: var(--color-bg-muted, #f1f5f9);\n  border-radius: 0.25rem;\n  text-align: center;\n}\n\n// ==========================================================================\n// Toggle/Checkbox\n// ==========================================================================\n\n.chat-settings-toggle {\n  display: flex;\n  align-items: center;\n  gap: 0.625rem;\n  cursor: pointer;\n  padding: 0.5rem 0;\n  user-select: none;\n}\n\n.chat-settings-toggle-input {\n  flex-shrink: 0;\n  width: 2.25rem;\n  height: 1.25rem;\n  -webkit-appearance: none;\n  appearance: none;\n  background-color: var(--color-bg-secondary, #e2e8f0);\n  border-radius: 0.625rem;\n  cursor: pointer;\n  position: relative;\n  transition: background-color 0.15s ease;\n  margin: 0;\n  \n  &::before {\n    content: '';\n    position: absolute;\n    top: 2px;\n    left: 2px;\n    width: calc(1.25rem - 4px);\n    height: calc(1.25rem - 4px);\n    background-color: var(--color-bg-primary, #ffffff);\n    border-radius: 50%;\n    transition: transform 0.15s ease;\n    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);\n  }\n  \n  &:checked {\n    background-color: var(--color-primary, #3b82f6);\n    \n    &::before {\n      transform: translateX(1rem);\n    }\n  }\n  \n  &:focus {\n    outline: none;\n    box-shadow: 0 0 0 2px var(--color-primary-light, #dbeafe);\n  }\n}\n\n.chat-settings-toggle-label {\n  flex: 1;\n  font-size: 0.8125rem;\n  font-weight: 500;\n  color: var(--color-text-primary, #0f172a);\n  cursor: pointer;\n  line-height: 1.4;\n}\n\n// ==========================================================================\n// Right Sidebar Footer\n// ==========================================================================\n\n.chat-right-sidebar-footer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  flex-shrink: 0;\n  padding: 0.5rem 0.75rem;\n  border-top: 1px solid var(--color-border, #e2e8f0);\n  gap: 0.5rem;\n}\n\n.chat-settings-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.375rem;\n  padding: 0.375rem 0.75rem;\n  font-size: 0.75rem;\n  font-weight: 500;\n  border-radius: 0.375rem;\n  cursor: pointer;\n  transition: background-color 0.15s ease, border-color 0.15s ease;\n}\n\n.chat-settings-btn-reset {\n  background-color: transparent;\n  border: 1px solid var(--color-border, #e2e8f0);\n  color: var(--color-text-secondary, #64748b);\n  \n  &:hover {\n    background-color: var(--color-bg-muted, #f1f5f9);\n    border-color: var(--color-text-muted, #94a3b8);\n  }\n}\n\n.chat-settings-btn-save {\n  background-color: var(--color-primary, #3b82f6);\n  border: 1px solid var(--color-primary, #3b82f6);\n  color: var(--color-text-inverse, #ffffff);\n  \n  &:hover {\n    background-color: var(--color-primary-dark, #2563eb);\n    border-color: var(--color-primary-dark, #2563eb);\n  }\n}\n\n// ==========================================================================\n// Header Settings Trigger Button\n// ==========================================================================\n\n.chat-settings-trigger {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 1.75rem;\n  height: 1.75rem;\n  padding: 0;\n  margin-left: auto;\n  border: none;\n  border-radius: 0.375rem;\n  background-color: transparent;\n  color: var(--color-text-muted, #94a3b8);\n  cursor: pointer;\n  transition: background-color 0.15s ease, color 0.15s ease;\n  \n  &:hover {\n    background-color: var(--color-bg-muted, #f1f5f9);\n    color: var(--color-text-primary, #0f172a);\n  }\n  \n  &.active {\n    background-color: var(--color-primary-light, #dbeafe);\n    color: var(--color-primary, #3b82f6);\n  }\n  \n  .iconify {\n    width: 1rem;\n    height: 1rem;\n  }\n}\n\n// ==========================================================================\n// Mobile Responsive\n// ==========================================================================\n\n// Mobile Right Sidebar Overlay\n.chat-right-sidebar-overlay {\n  display: none;\n}\n\n@media (max-width: 768px) {\n  .chat-right-sidebar-overlay {\n    position: fixed;\n    inset: 0;\n    z-index: 49;\n    background-color: rgba(0, 0, 0, 0.5);\n    opacity: 0;\n    visibility: hidden;\n    transition: opacity 0.3s ease-out, visibility 0s linear 0.3s;\n    display: block;\n  }\n  \n  .chat-right-sidebar-overlay.open {\n    opacity: 1;\n    visibility: visible;\n    transition-delay: 0s;\n  }\n  \n  .chat-right-sidebar {\n    position: fixed;\n    right: 0;\n    top: 0;\n    z-index: 50;\n    box-shadow: -4px 0 15px rgba(0, 0, 0, 0.1);\n  }\n  \n  .chat-right-sidebar-collapsed {\n    transform: translateX(100%);\n    width: 320px;\n    margin-right: 0;\n  }\n}\n\n// ==========================================================================\n// Empty State (when no chat selected)\n// ==========================================================================\n\n.chat-settings-empty {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 2rem 1rem;\n  text-align: center;\n  height: 100%;\n  \n  .iconify {\n    width: 2.5rem;\n    height: 2.5rem;\n    margin-bottom: 0.75rem;\n    color: var(--color-text-muted, #94a3b8);\n  }\n  \n  p {\n    font-size: 0.8125rem;\n    color: var(--color-text-muted, #94a3b8);\n    margin: 0;\n  }\n}\n\n",[],[205,347,354,398],{"_105":406,"_96":407,"_155":408,"_157":355,"_158":140,"_159":409,"_161":162,"_107":410,"_101":32,"_164":365,"_166":411,"_167":22,"_168":-5,"_169":412,"_99":413},"0c26e290-e2e9-11f0-9dc9-42dde27851f2","_settings.scss","0c26e34e-e2e9-11f0-9dc9-42dde27851f2",43,["D",1766815100746],"// Settings View Styles\n// Modernized with card-based layout and tight typography\n\n.settings-view {\n  display: flex;\n  flex: 1;\n  min-height: 0;\n  background-color: var(--color-bg-muted, #f8fafc); // Changed to muted for card contrast\n}\n\n.settings-layout {\n  display: flex;\n  flex: 1;\n  min-height: 0;\n}\n\n.settings-sidebar {\n  display: flex;\n  flex-direction: column;\n  width: 160px; // Slightly wider\n  padding: .25rem .25rem;\n  background-color: var(--color-bg-primary, #ffffff); // White sidebar\n  border-right: 1px solid var(--color-border, #e2e8f0);\n  flex-shrink: 0;\n  gap: 1px;\n}\n\n// ==========================================================================\n// Mobile Tabs (shown above content on mobile)\n// ==========================================================================\n\n.settings-mobile-tabs {\n  display: none; // Hidden on desktop\n}\n\n// ==========================================================================\n// Mobile Responsive\n// ==========================================================================\n\n@media (max-width: 768px) {\n  // Hide desktop sidebar on mobile\n  .settings-sidebar-desktop {\n    display: none !important;\n  }\n  \n  // Show mobile tabs\n  .settings-mobile-tabs {\n    display: flex;\n    gap: 0.25rem;\n    padding: 0.5rem;\n    margin: -1rem -0.75rem 1rem -0.75rem; // Negative margin to extend to edges\n    background-color: var(--color-bg-primary, #ffffff);\n    border-bottom: 1px solid var(--color-border, #e2e8f0);\n    overflow-x: auto;\n    -webkit-overflow-scrolling: touch;\n    \n    // Hide scrollbar\n    scrollbar-width: none;\n    -ms-overflow-style: none;\n    &::-webkit-scrollbar {\n      display: none;\n    }\n  }\n  \n  .settings-mobile-tab {\n    display: flex;\n    align-items: center;\n    gap: 0.375rem;\n    padding: 0.5rem 0.75rem;\n    border: 1px solid var(--color-border, #e2e8f0);\n    border-radius: 0.5rem;\n    background-color: var(--color-bg-primary, #ffffff);\n    color: var(--color-text-secondary, #64748b);\n    font-size: 0.75rem;\n    font-weight: 500;\n    white-space: nowrap;\n    cursor: pointer;\n    transition: all 0.15s ease;\n    flex-shrink: 0;\n    \n    .iconify {\n      width: 0.875rem;\n      height: 0.875rem;\n      flex-shrink: 0;\n    }\n    \n    &:hover {\n      background-color: var(--color-bg-muted, #f1f5f9);\n      border-color: var(--color-border-hover, #cbd5e1);\n    }\n    \n    &.active {\n      background-color: var(--color-primary-light, #dbeafe);\n      border-color: var(--color-primary, #3b82f6);\n      color: var(--color-primary, #3b82f6);\n      font-weight: 600;\n    }\n  }\n  \n  .settings-content {\n    padding: 1rem 0.75rem;\n  }\n}\n\n.settings-nav-item {\n  display: flex;\n  align-items: center;\n  gap: 0.625rem;\n  padding: 0.5rem 0.75rem; // Tighter padding\n  border: none;\n  border-radius: 0.375rem;\n  background-color: transparent;\n  color: var(--color-text-secondary, #64748b);\n  font-size: 0.8125rem; // Smaller font\n  font-weight: 500;\n  text-align: left;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  outline: none;\n  \n  &:hover {\n    background-color: var(--color-bg-muted, #f1f5f9);\n    color: var(--color-text-primary, #0f172a);\n  }\n  \n  &:focus-visible {\n    outline: 2px solid var(--color-primary, #3b82f6);\n    outline-offset: -2px;\n  }\n  \n  &.active {\n    background-color: var(--color-bg-muted, #f1f5f9);\n    color: var(--color-text-primary, #0f172a);\n    font-weight: 600;\n  }\n  \n  .iconify {\n    width: 1rem; // Smaller icon\n    height: 1rem;\n    flex-shrink: 0;\n    opacity: 0.8;\n  }\n}\n\n.settings-content {\n  flex: 1;\n  overflow-y: auto;\n  padding: 1rem; // More breathing room around cards\n  max-width: 900px;\n  margin: 0 auto; // Center content\n}\n\n// Typography Helpers (Scoped to settings if needed, but using Tailwind classes mostly)\n.text-muted-foreground {\n  color: var(--color-text-muted, #94a3b8);\n}\n\n.text-foreground {\n  color: var(--color-text-primary, #0f172a);\n}\n\n// Form Elements\n.form-label {\n  display: block;\n  margin-bottom: 0.375rem;\n  font-size: 0.8125rem;\n  font-weight: 500;\n  color: var(--color-text-primary, #0f172a);\n}\n\n.form-select {\n  width: 100%;\n  padding: 0.375rem 0.625rem;\n  font-size: 0.8125rem;\n  color: var(--color-text-primary, #0f172a);\n  background-color: var(--color-bg-primary, #ffffff);\n  border: 1px solid var(--color-border, #e2e8f0);\n  border-radius: 0.375rem;\n  outline: none;\n  transition: border-color 0.15s ease, box-shadow 0.15s ease;\n  \n  &:focus {\n    border-color: var(--color-primary, #3b82f6);\n    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);\n  }\n  \n  &:hover {\n    border-color: var(--color-border-hover, #cbd5e1);\n  }\n}\n\n// Checkboxes use the default design system styles\n// No custom overrides needed here\n\n// Buttons\n.btn-gray-secondary {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0.5rem 0.75rem;\n  font-size: 0.8125rem;\n  font-weight: 500;\n  color: var(--color-text-primary, #0f172a);\n  background-color: var(--color-bg-primary, #ffffff);\n  border: 1px solid var(--color-border, #e2e8f0);\n  border-radius: 0.375rem;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  line-height: 1;\n  \n  &:hover {\n    background-color: var(--color-bg-muted, #f8fafc);\n    border-color: var(--color-border-hover, #cbd5e1);\n  }\n  \n  &:active {\n    transform: scale(0.98);\n  }\n  \n  &:focus-visible {\n    outline: 2px solid var(--color-primary, #3b82f6);\n    outline-offset: 2px;\n  }\n}\n\n.btn-danger-soft {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0.5rem 0.75rem;\n  font-size: 0.8125rem;\n  font-weight: 500;\n  color: #dc2626;\n  background-color: #fef2f2;\n  border: 1px solid #fecaca;\n  border-radius: 0.375rem;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  line-height: 1;\n  \n  &:hover {\n    background-color: #fee2e2;\n    border-color: #fca5a5;\n  }\n  \n  &:active {\n    transform: scale(0.98);\n  }\n  \n  &:focus-visible {\n    outline: 2px solid #dc2626;\n    outline-offset: 2px;\n  }\n}\n\n// Button Sizes\n.btn-sm {\n  padding: 0.25rem 0.5rem;\n  font-size: 0.75rem;\n  height: 28px;\n}\n\n// ==========================================================================\n// Models Table Styling (extends expandable table)\n// ==========================================================================\n\n.models-table-container {\n  border: 1px solid var(--color-border, #e2e8f0);\n  border-radius: 0.5rem;\n  overflow: hidden;\n  background-color: #f4f4f5; // gray-100\n  padding: 0 0.5rem 0.5rem 0.5rem;\n  \n  // Override theme-scope details styling for expandable rows\n  details.expandable-row {\n    border-radius: 0;\n    padding: 0;\n    margin-bottom: 0;\n    border-bottom: 1px solid var(--color-border, #e2e8f0);\n    \n    &:last-of-type {\n      border-bottom: none !important;\n    }\n  }\n}\n\n.models-table-body {\n  background-color: var(--color-bg-primary, #ffffff);\n  border-radius: 0.5rem;\n  border: 1px solid var(--color-border, #e2e8f0);\n  overflow: hidden;\n}\n",[],[205,347,354,407],{"_105":415,"_96":416,"_155":417,"_157":355,"_158":140,"_159":418,"_161":162,"_107":419,"_101":32,"_164":365,"_166":420,"_167":22,"_168":-5,"_169":421,"_99":422},"0c3c4004-e2e9-11f0-b141-42dde27851f2","_sidebar.scss","0c3c40a4-e2e9-11f0-b141-42dde27851f2",44,["D",1766815100893],"// Chat Sidebar Layout and Components\n\n// ==========================================================================\n// Chat Sidebar Layout\n// ==========================================================================\n\n.chat-sidebar {\n  flex-shrink: 0;\n  // width: 280px;\n  width: 160px;\n  height: 100vh;\n  background-color: var(--color-bg-muted, #f8fafc);\n  border-right: 1px solid var(--color-border, #e2e8f0);\n  transition: width 0.2s ease, margin-left 0.2s ease;\n  overflow: hidden;\n  position: relative;\n}\n\n.chat-sidebar-collapsed {\n  width: 0;\n  margin-left: -1px;\n}\n\n.chat-sidebar-inner {\n  display: flex;\n  flex-direction: column;\n  // width: 280px;\n  width: 160px;\n  height: 100%;\n}\n\n// ==========================================================================\n// Chat Sidebar Header\n// ==========================================================================\n\n.chat-sidebar-header {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  height: 3rem;\n  padding: 0 0.75rem;\n  border-bottom: 1px solid var(--color-border, #e2e8f0);\n  border-right: 1px solid var(--color-border, #e2e8f0);\n  background-color: var(--color-bg-primary, #ffffff);\n}\n\n.chat-sidebar-header-content {\n  display: flex;\n  align-items: center;\n  gap: 0.375rem;\n  flex: 1;\n}\n\n.chat-sidebar-icon {\n  width: 1rem;\n  height: 1rem;\n  color: var(--color-primary, #3b82f6);\n}\n\n.chat-sidebar-title {\n  font-size: 0.8125rem;\n  font-weight: 600;\n  color: var(--color-text-primary, #0f172a);\n}\n\n.chat-sidebar-actions {\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n}\n\n.chat-sidebar-action-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 1.5rem;\n  height: 1.5rem;\n  padding: 0;\n  border: none;\n  border-radius: 0.25rem;\n  background-color: transparent;\n  color: var(--color-text-muted, #94a3b8);\n  cursor: pointer;\n  transition: background-color 0.15s ease, color 0.15s ease;\n  \n  &:hover {\n    background-color: var(--color-bg-muted, #f1f5f9);\n    color: var(--color-text-primary, #0f172a);\n  }\n}\n\n// ==========================================================================\n// Chat Sidebar Content\n// ==========================================================================\n\n.chat-sidebar-content {\n  flex: 1;\n  overflow-y: auto;\n  padding: 0.25rem 0.25rem;\n}\n\n.chat-sidebar-group {\n  margin-bottom: 0.5rem;\n}\n\n.chat-sidebar-group-label {\n  padding: 0.375rem 0.5rem 0.125rem;\n  font-size: 0.625rem;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  color: var(--color-text-muted, #94a3b8);\n}\n\n.chat-sidebar-menu {\n  display: flex;\n  flex-direction: column;\n  gap: 1px;\n}\n\n// ==========================================================================\n// Chat Folder Tree\n// ==========================================================================\n\n.chat-folder-root {\n  min-height: 1.5rem;\n  padding: 0.125rem;\n  border-radius: 0.25rem;\n  transition: background-color 0.15s ease, outline 0.15s ease;\n  \n  &.drag-over {\n    background-color: var(--color-primary-light, #dbeafe);\n    outline: 2px dashed var(--color-primary, #3b82f6);\n    outline-offset: -2px;\n  }\n}\n\n.chat-folder {\n  position: relative;\n}\n\n.chat-folder-drag-wrapper,\n.chat-item-drag-wrapper {\n  position: relative;\n}\n\n.chat-folder-row {\n  display: flex;\n  align-items: center;\n  gap: 0.125rem;\n  padding: 0.25rem 0.375rem;\n  border-radius: 0.25rem;\n  cursor: pointer;\n  transition: background-color 0.15s ease;\n  position: relative;\n  \n  &:hover {\n    background-color: var(--color-bg-muted, #f1f5f9);\n  }\n  \n  &:has(.chat-folder-edit-input) {\n    background-color: transparent;\n  }\n  \n  &.drag-over {\n    background-color: var(--color-primary-light, #dbeafe);\n    outline: 2px dashed var(--color-primary, #3b82f6);\n    outline-offset: -2px;\n  }\n  \n  &.is-dragging {\n    opacity: 0.5;\n  }\n}\n\n.chat-folder-toggle {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 1rem;\n  height: 1rem;\n  padding: 0;\n  border: none;\n  border-radius: 0.125rem;\n  background-color: transparent;\n  color: var(--color-text-muted, #94a3b8);\n  cursor: pointer;\n  flex-shrink: 0;\n  transition: background-color 0.15s ease, color 0.15s ease;\n  \n  &:hover {\n    background-color: var(--color-bg-secondary, #e2e8f0);\n    color: var(--color-text-primary, #0f172a);\n  }\n}\n\n.chat-folder-chevron {\n  width: 0.75rem;\n  height: 0.75rem;\n  transition: transform 0.2s ease;\n  \n  &.rotated {\n    transform: rotate(-90deg);\n  }\n}\n\n.chat-folder-icon-folder {\n  width: 0.875rem;\n  height: 0.875rem;\n  color: var(--color-text-muted, #94a3b8);\n  flex-shrink: 0;\n}\n\n.chat-folder-label {\n  @apply text-sm;\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  align-items: center;\n  gap: 0.125rem;\n  padding: 0;\n  border: none;\n  background-color: transparent;\n  color: var(--color-text-primary, #0f172a);\n  font-weight: 500;\n  text-align: left;\n  cursor: pointer;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.chat-folder-count {\n  color: var(--color-text-muted, #94a3b8);\n  font-weight: 400;\n  font-size: 0.6875rem;\n}\n\ninput.chat-folder-edit-input,\ninput.chat-folder-edit-input[type=\"text\"] {\n  @apply text-sm;\n  flex: 1;\n  min-width: 0;\n  padding: 0 !important;\n  margin: 0 !important;\n  border: none !important;\n  border-bottom: 1px dashed var(--color-text-muted, #94a3b8) !important;\n  border-radius: 0 !important;\n  background-color: transparent !important;\n  background: transparent !important;\n  color: var(--color-text-primary, #0f172a) !important;\n  font-weight: 500 !important;\n  font-family: inherit !important;\n  line-height: 1.4 !important;\n  outline: none !important;\n  box-shadow: none !important;\n  height: auto !important;\n  \n  &:focus,\n  &:active,\n  &:focus-visible {\n    outline: none !important;\n    box-shadow: none !important;\n    border: none !important;\n    border-bottom: 1px dashed var(--color-primary, #3b82f6) !important;\n    background-color: transparent !important;\n    background: transparent !important;\n  }\n  \n  &::selection {\n    background-color: var(--color-primary-light, #dbeafe);\n  }\n}\n\n.chat-folder-actions-hover {\n  display: none;\n  align-items: center;\n  gap: 0.125rem;\n  margin-left: auto;\n}\n\n.chat-folder-row:hover .chat-folder-actions-hover,\n.chat-item:hover .chat-folder-actions-hover {\n  display: flex;\n}\n\n.chat-action-btn-sm {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 1.125rem;\n  height: 1.125rem;\n  padding: 0;\n  border: none;\n  border-radius: 0.125rem;\n  background-color: transparent;\n  color: var(--color-text-muted, #94a3b8);\n  cursor: pointer;\n  transition: background-color 0.15s ease, color 0.15s ease;\n  \n  &:hover {\n    background-color: var(--color-bg-secondary, #e2e8f0);\n    color: var(--color-text-primary, #0f172a);\n  }\n  \n  .iconify {\n    width: 0.75rem;\n    height: 0.75rem;\n  }\n}\n\n// ==========================================================================\n// Chat Context Menu\n// ==========================================================================\n\n.chat-context-menu {\n  position: absolute;\n  top: 100%;\n  right: 0;\n  z-index: 50;\n  min-width: 10rem;\n  padding: 0.25rem;\n  margin-top: 0.25rem;\n  background-color: var(--color-bg-primary, #ffffff);\n  border: 1px solid var(--color-border, #e2e8f0);\n  border-radius: 0.5rem;\n  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n  opacity: 0;\n  transform: scale(0.95);\n  transform-origin: top right;\n  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;\n  visibility: hidden;\n  pointer-events: none;\n  \n  &.open {\n    opacity: 1;\n    transform: scale(1);\n    visibility: visible;\n    pointer-events: auto;\n    transition-delay: 0s;\n  }\n}\n\n.chat-context-item {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  width: 100%;\n  padding: 0.5rem 0.625rem;\n  border: none;\n  border-radius: 0.375rem;\n  background-color: transparent;\n  color: var(--color-text-secondary, #64748b);\n  font-size: 0.8125rem;\n  text-align: left;\n  cursor: pointer;\n  transition: background-color 0.15s ease, color 0.15s ease;\n  \n  &:hover {\n    background-color: var(--color-bg-muted, #f1f5f9);\n    color: var(--color-text-primary, #0f172a);\n  }\n  \n  .iconify {\n    width: 0.875rem;\n    height: 0.875rem;\n    flex-shrink: 0;\n  }\n}\n\n.chat-context-danger {\n  color: var(--color-danger, #ef4444);\n  \n  &:hover {\n    background-color: var(--color-danger-light, #fee2e2);\n    color: var(--color-danger-dark, #b91c1c);\n  }\n}\n\n// ==========================================================================\n// Chat Folder Contents (Nested)\n// ==========================================================================\n\n.chat-folder-contents {\n  display: flex;\n  flex-direction: column;\n  gap: 1px;\n  margin-left: 0.85rem;\n  padding-left: 0.5rem;\n  border-left: 1px solid var(--color-border, #e2e8f0);\n}\n\n.chat-folder-nested {\n  margin-left: 0;\n}\n\n// ==========================================================================\n// Chat Item\n// ==========================================================================\n\n.chat-item {\n  display: flex;\n  align-items: center;\n  gap: 0.35rem;\n  padding: 0.25rem 0.375rem;\n  border-radius: 0.25rem;\n  cursor: pointer;\n  transition: background-color 0.15s ease;\n  position: relative;\n  \n  &:hover {\n    background-color: var(--color-bg-hover, var(--color-bg-muted, #f1f5f9));\n  }\n  \n  &.active {\n    background-color: var(--color-primary-lighter, #dbeafe);\n  }\n  \n  &:has(.chat-folder-edit-input) {\n    background-color: transparent;\n  }\n  \n  &.is-dragging {\n    opacity: 0.5;\n  }\n}\n\n.chat-item-icon {\n  width: 0.75rem;\n  height: 0.75rem;\n  color: var(--color-text-muted, #94a3b8);\n  flex-shrink: 0;\n}\n\n.chat-item.active .chat-item-icon {\n  color: var(--color-primary, #3b82f6);\n}\n\n.chat-item-btn {\n  @apply text-sm;\n  display: flex;\n  align-items: center;\n  gap: 0.35rem;\n  flex: 1;\n  min-width: 0;\n  padding: 0;\n  border: none;\n  background-color: transparent;\n  color: var(--color-text-primary, #0f172a);\n  font-weight: 400;\n  text-align: left;\n  cursor: pointer;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  outline: none;\n  \n  .iconify {\n    width: 0.75rem;\n    height: 0.75rem;\n    color: var(--color-text-muted, #94a3b8);\n    flex-shrink: 0;\n  }\n  \n  &:focus-visible {\n    outline: 2px solid var(--color-primary, #3b82f6);\n    outline-offset: -2px;\n    border-radius: 0.125rem;\n  }\n}\n\n.chat-item.active .chat-item-btn {\n  font-weight: 500;\n  color: var(--color-primary-dark, #1e40af);\n}\n\n// ==========================================================================\n// Chat Drop Indicator (Notion-style line)\n// ==========================================================================\n\n.chat-drop-indicator {\n  position: absolute;\n  left: 0;\n  right: 0;\n  height: 2px;\n  background-color: var(--color-primary, #3b82f6);\n  pointer-events: none;\n  z-index: 10;\n  border-radius: 1px;\n  \n  &::before {\n    content: '';\n    position: absolute;\n    left: 0;\n    top: 50%;\n    transform: translateY(-50%);\n    width: 6px;\n    height: 6px;\n    background-color: var(--color-primary, #3b82f6);\n    border-radius: 50%;\n  }\n}\n\n.chat-folder-drop-before .chat-drop-indicator,\n.chat-item-drop-before .chat-drop-indicator {\n  top: 0;\n  display: block;\n}\n\n.chat-folder-drop-after .chat-drop-indicator,\n.chat-item-drop-after .chat-drop-indicator {\n  bottom: 0;\n  top: auto;\n  display: block;\n}\n\n.chat-folder-drop-inside > .chat-folder-row {\n  background-color: var(--color-primary-light, #dbeafe);\n  outline: 2px solid var(--color-primary, #3b82f6);\n  outline-offset: -2px;\n}\n\n// ==========================================================================\n// Chat Empty State\n// ==========================================================================\n\n.chat-empty-state {\n  display: flex;\n  flex-direction: column;\n  \n  .chat-item {\n    width: 100%;\n  }\n}\n\n.chat-empty-btn {\n  padding: 0.375rem 0.75rem;\n  border: 1px solid var(--color-border, #e2e8f0);\n  border-radius: 0.375rem;\n  background-color: var(--color-bg-primary, #ffffff);\n  color: var(--color-text-primary, #0f172a);\n  font-size: 0.8125rem;\n  font-weight: 500;\n  cursor: pointer;\n  transition: background-color 0.15s ease, border-color 0.15s ease;\n  \n  &:hover {\n    background-color: var(--color-bg-muted, #f1f5f9);\n    border-color: var(--color-primary, #3b82f6);\n  }\n}\n\n// ==========================================================================\n// Chat Sidebar Footer\n// ==========================================================================\n\n.chat-sidebar-footer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  flex-shrink: 0;\n  padding: 0.5rem 0.75rem;\n  border-top: 1px solid var(--color-border, #e2e8f0);\n}\n\n.chat-sidebar-footer-info {\n  display: flex;\n  align-items: center;\n  color: var(--color-text-muted, #94a3b8);\n  font-size: 0.6875rem;\n}\n\n.chat-sidebar-settings-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 1.75rem;\n  height: 1.75rem;\n  padding: 0;\n  border: none;\n  border-radius: 0.375rem;\n  background-color: transparent;\n  color: var(--color-text-muted, #94a3b8);\n  cursor: pointer;\n  transition: background-color 0.15s ease, color 0.15s ease;\n  \n  &:hover {\n    background-color: var(--color-bg-muted, #f1f5f9);\n    color: var(--color-text-primary, #0f172a);\n  }\n  \n  .iconify {\n    width: 1rem;\n    height: 1rem;\n  }\n}\n\n// ==========================================================================\n// Mobile close button\n// ==========================================================================\n\n.chat-sidebar-close-btn {\n  display: none;\n}\n\n// Mobile Sidebar Overlay\n.chat-sidebar-overlay {\n  display: none;\n}\n\n@media (max-width: 768px) {\n  .chat-sidebar-overlay {\n    position: fixed;\n    inset: 0;\n    z-index: 49;\n    background-color: rgba(0, 0, 0, 0.5);\n    opacity: 0;\n    visibility: hidden;\n    transition: opacity 0.3s ease-out, visibility 0s linear 0.3s;\n    display: block;\n  }\n  \n  .chat-sidebar-overlay.open {\n    opacity: 1;\n    visibility: visible;\n    transition-delay: 0s;\n  }\n  \n  .chat-sidebar {\n    position: fixed;\n    left: 0;\n    top: 0;\n    z-index: 50;\n    box-shadow: 4px 0 15px rgba(0, 0, 0, 0.1);\n  }\n  \n  .chat-sidebar-collapsed {\n    transform: translateX(-100%);\n    width: 280px;\n    margin-left: 0;\n  }\n  \n  .chat-sidebar-collapsed .chat-sidebar-close-btn {\n    display: none;\n  }\n  \n  .chat-sidebar-close-btn {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    position: absolute;\n    top: 0.5rem;\n    right: -2.5rem;\n    width: 2rem;\n    height: 2rem;\n    padding: 0;\n    border: 1px solid var(--color-border, #e2e8f0);\n    border-left: none;\n    border-radius: 0 0.375rem 0.375rem 0;\n    background-color: var(--color-bg-primary, #ffffff);\n    color: var(--color-text-muted, #94a3b8);\n    cursor: pointer;\n    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;\n    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);\n    z-index: 51;\n    \n    &::before {\n      content: '';\n      position: absolute;\n      left: 0;\n      top: 0;\n      bottom: 0;\n      width: 1px;\n      background-color: var(--color-border, #e2e8f0);\n    }\n    \n    &:hover {\n      background-color: var(--color-bg-muted, #f1f5f9);\n      color: var(--color-text-primary, #0f172a);\n      border-color: var(--color-text-muted, #94a3b8);\n    }\n    \n    .iconify {\n      width: 1rem;\n      height: 1rem;\n    }\n  }\n}\n\n",[],[205,347,354,416],[205,347,354],{"_105":425,"_96":426,"_155":427,"_157":348,"_158":140,"_159":428,"_161":162,"_107":429,"_101":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_169":430,"_99":725},"0ac3cb52-e2e9-11f0-9dc9-42dde27851f2","design-system","0ac3cc10-e2e9-11f0-9dc9-42dde27851f2",11,["D",1766815098430],[431,448,643,685,701,709,717],{"_105":432,"_96":433,"_155":434,"_157":427,"_158":140,"_159":435,"_161":162,"_107":436,"_101":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_169":437,"_99":447},"0ae1deee-e2e9-11f0-b941-42dde27851f2","corporate","0ae1dfb6-e2e9-11f0-b941-42dde27851f2",12,["D",1766815098617],[438],{"_105":439,"_96":440,"_155":441,"_157":434,"_158":140,"_159":442,"_161":162,"_107":443,"_101":32,"_164":365,"_166":444,"_167":22,"_168":-5,"_169":445,"_99":446},"0c4f63f0-e2e9-11f0-a009-42dde27851f2","overrides.scss","0c4f64a4-e2e9-11f0-a009-42dde27851f2",47,["D",1766815100947],"/* ===================================\n   Corporate Theme - YC / Hacker News Style\n   Utilitarian, high-density, \"boring\" corporate startup aesthetic\n   =================================== */\n\n.theme-scope {\n  /* ===================================\n     Base Theme Override\n     =================================== */\n  font-family: Verdana, Geneva, sans-serif;\n  background-color: #f6f6ef; /* YC Beige */\n  color: #000000;\n  line-height: 1.4;\n  -webkit-font-smoothing: auto;\n  -moz-osx-font-smoothing: auto;\n  \n  /* YC Color Palette */\n  --color-primary: #ff6600;\n  --color-primary-hover: #e65c00;\n  --color-primary-active: #cc5200;\n  --color-primary-dark: #b34700;\n  --color-primary-light: #ffcc99;\n  --color-primary-lighter: #ffe6cc;\n  --color-primary-lightest: #fff2e6;\n  --color-primary-ring: rgba(255, 102, 0, 0.3);\n  \n  /* Text Colors - High Contrast */\n  --color-text-primary: #000000;\n  --color-text-secondary: #828282; /* HN Gray */\n  --color-text-muted: #999999;\n  --color-text-neutral: #666666;\n  \n  /* Backgrounds */\n  --color-bg-primary: #f6f6ef;\n  --color-bg-secondary: #ffffff;\n  --color-bg-muted: #efefef;\n  --color-bg-light: #fbfbfb;\n  --color-bg-hover: #e6e6e6;\n  --color-bg-active: #dcdcdc;\n  \n  /* Borders */\n  --color-border: #dcdcdc;\n  --color-border-light: #ebebeb;\n  \n  /* Semantic Colors */\n  --color-success: #008000; /* Standard Green */\n  --color-success-light: #e6ffe6;\n  --color-success-dark: #006600;\n  --color-warning: #ffcc00;\n  --color-warning-light: #ffffe0;\n  --color-warning-dark: #cc9900;\n  --color-danger: #cc0000;\n  --color-danger-light: #ffe6e6;\n  --color-danger-dark: #990000;\n  --color-info: #0000ff; /* Standard Link Blue */\n  --color-info-light: #e6e6ff;\n  --color-info-dark: #0000cc;\n  \n  /* Utilitarian Radii (mostly square) */\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  \n  /* Typography */\n  --text-h1: 1.5rem;\n  --text-h2: 1.25rem;\n  --text-h3: 1.1rem;\n  --leading-tight: 1.2;\n  \n  /* Spacing */\n  --space-btn-x: 0.5rem;\n  --space-btn-y: 0.25rem;\n  --space-card-padding: 1rem;\n  \n  /* No Shadows - Flat Design */\n  --shadow-card: none;\n  --shadow-hover: none;\n  --shadow-dropdown: 0 2px 4px rgba(0,0,0,0.2);\n  \n  /* ===================================\n     Typography\n     =================================== */\n  h1, h2, h3, h4, h5, h6,\n  .text-h1, .text-h2, .text-h3 {\n    font-family: Verdana, Geneva, sans-serif;\n    font-weight: 700;\n    color: #000000;\n    margin-top: 1em;\n    margin-bottom: 0.5em;\n  }\n  \n  h1, .text-h1 { font-size: 1.5rem; }\n  h2, .text-h2 { font-size: 1.25rem; }\n  h3, .text-h3 { font-size: 1.1rem; }\n  \n  p {\n    font-size: 10pt;\n    margin-bottom: 1em;\n    color: #000000;\n  }\n  \n  a, .link {\n    color: #000000;\n    text-decoration: none;\n    \n    &:hover {\n      text-decoration: underline;\n    }\n    \n    &.link-blue {\n      color: #0000ff;\n    }\n  }\n  \n  .fine-print, .text-xs {\n    font-size: 8pt;\n    color: #828282;\n  }\n  \n  code:not(pre code), .code-inline {\n    font-family: monospace;\n    font-size: 9pt;\n    background-color: #efefef;\n    padding: 0 3px;\n  }\n  \n  pre, .code-block {\n    font-family: monospace;\n    font-size: 9pt;\n    background-color: #f6f6ef;\n    border: 1px solid #dcdcdc;\n    padding: 10px;\n    overflow-x: auto;\n  }\n  \n  hr {\n    border: none;\n    border-top: 1px solid #dcdcdc;\n    margin: 1rem 0;\n  }\n  \n  /* ===================================\n     Layout & Components\n     =================================== */\n     \n  /* Top Bar / Header */\n  .header, header {\n    background-color: #ff6600;\n    padding: 2px;\n    color: #000000;\n    \n    a {\n      color: #000000;\n      font-weight: bold;\n    }\n  }\n  \n  /* Cards */\n  .card, .app-card {\n    background-color: #f6f6ef;\n    border: none;\n    padding: 0;\n    margin-bottom: 1rem;\n  }\n  \n  .card-title, .app-title {\n    font-size: 1.1rem;\n    font-weight: bold;\n    color: #000000;\n    margin-bottom: 0.5rem;\n  }\n  \n  .app-card-content {\n    background-color: #f6f6ef;\n  }\n  \n  /* Buttons - Simple & Ugly */\n  .btn-primary, .action-btn {\n    background-color: #efefef;\n    color: #000000;\n    border: 1px solid #828282;\n    font-family: Verdana, Geneva, sans-serif;\n    font-size: 10pt;\n    font-weight: normal;\n    cursor: pointer;\n    padding: 2px 6px;\n    \n    &:hover {\n      border-color: #000000;\n    }\n  }\n  \n  .btn-secondary {\n    background-color: transparent;\n    color: #828282;\n    border: none;\n    text-decoration: underline;\n    font-size: 9pt;\n    cursor: pointer;\n    \n    &:hover {\n      color: #000000;\n    }\n  }\n  \n  /* Forms - Utilitarian */\n  input[type=text],\n  input[type=email],\n  input[type=password],\n  textarea,\n  .form-input {\n    font-family: monospace;\n    font-size: 10pt;\n    border: 1px solid #828282;\n    background-color: #ffffff;\n    padding: 2px;\n    color: #000000;\n    \n    &:focus {\n      outline: none;\n      border-color: #ff6600;\n    }\n  }\n  \n  label, .form-label {\n    font-family: Verdana, Geneva, sans-serif;\n    font-size: 10pt;\n    color: #828282;\n    margin-bottom: 2px;\n  }\n  \n  /* Tables - High Density */\n  table, .app-table {\n    width: 100%;\n    border-collapse: collapse;\n    font-size: 10pt;\n    background-color: #f6f6ef;\n  }\n  \n  th {\n    text-align: left;\n    color: #828282;\n    font-weight: normal;\n    padding: 4px 8px;\n  }\n  \n  td {\n    padding: 4px 8px;\n    color: #000000;\n    vertical-align: top;\n  }\n  \n  tr:nth-child(even) {\n    background-color: #f6f6ef;\n  }\n  \n  /* Lists - Numbered/Bulleted */\n  ol {\n    list-style-type: decimal;\n    padding-left: 20px;\n    color: #828282;\n    \n    li {\n      margin-bottom: 4px;\n      \n      &::marker {\n        color: #828282;\n      }\n    }\n  }\n  \n  /* Badges - Minimal Text */\n  .badge {\n    border: 1px solid #828282;\n    background: transparent;\n    color: #828282;\n    font-size: 8pt;\n    padding: 0 4px;\n  }\n  \n  .badge-success { border-color: #008000; color: #008000; }\n  .badge-danger { border-color: #cc0000; color: #cc0000; }\n  .badge-warning { border-color: #cc9900; color: #cc9900; }\n  .badge-info { border-color: #0000ff; color: #0000ff; }\n  \n  /* Playground Overrides */\n  :root {\n    --playground-bg: #f6f6ef;\n    --playground-text: #000000;\n    --playground-text-muted: #828282;\n    --playground-surface: #f6f6ef;\n    --playground-surface-hover: #efefef;\n    --playground-border: #dcdcdc;\n    --playground-border-hover: #828282;\n    --playground-radius: 0;\n    --playground-focus-ring: rgba(255, 102, 0, 0.3);\n    --playground-font: Verdana, Geneva, sans-serif;\n  }\n}\n",[],[205,347,426,433,440],[205,347,426,433],{"_105":449,"_96":25,"_155":450,"_157":427,"_158":140,"_159":451,"_161":162,"_107":452,"_101":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_169":453,"_99":642},"0b2451b6-e2e9-11f0-b11e-42dde27851f2","0b245274-e2e9-11f0-b11e-42dde27851f2",15,["D",1766815099062],[454,463,472,481,490,499,508,517,526,535,544,553,561,570,579,588,597,606,615,624,633],{"_105":455,"_96":456,"_155":457,"_157":450,"_158":140,"_159":458,"_161":162,"_107":459,"_101":32,"_164":365,"_166":460,"_167":22,"_168":-5,"_169":461,"_99":462},"0cb6da58-e2e9-11f0-b941-42dde27851f2","_all.scss","0cb6db2a-e2e9-11f0-b941-42dde27851f2",66,["D",1766815101605],"/* ===================================\n   Default Theme - All Components\n   This partial imports all component styles\n   Use this for themes to inherit all default styles\n   =================================== */\n\n/* Import variables FIRST so CSS custom properties are defined before use */\n@use '_variables' as *;\n\n/* Import all component partials with underscore prefix */\n@use '_base' as *;\n@use '_typography' as *;\n@use '_lists' as *;\n@use '_tables' as *;\n@use '_forms' as *;\n@use '_buttons' as *;\n@use '_cards' as *;\n@use '_accordions' as *;\n@use '_tabs' as *;\n@use '_callouts' as *;\n@use '_details' as *;\n@use '_utilities' as *;\n@use '_badges' as *;\n@use '_components' as *;\n@use '_avatars' as *;\n@use '_items' as *;\n@use '_dropdowns' as *;\n@use '_fields' as *;\n@use '_code' as *;\n@use '_toast' as *;\n@use '_pagination' as *;\n@use '_toggle-group' as *;\n@use '_semantic' as *;\n@use '_calendar' as *;\n@use '_drawer' as *;\n\n",[],[205,347,426,25,456],{"_105":464,"_96":465,"_155":466,"_157":450,"_158":140,"_159":467,"_161":162,"_107":468,"_101":32,"_164":365,"_166":469,"_167":22,"_168":-5,"_169":470,"_99":471},"0ca7fa56-e2e9-11f0-a1a6-42dde27851f2","_avatars.scss","0ca7fb1e-e2e9-11f0-a1a6-42dde27851f2",62,["D",1766815101581],".theme-scope {\n  /* Avatars */\n  .avatar {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    vertical-align: middle;\n    overflow: hidden;\n    user-select: none;\n    width: 2.5rem; /* 40px - Default md */\n    height: 2.5rem;\n    border-radius: 9999px; /* Circle default */\n    background-color: var(--color-bg-secondary);\n  }\n\n  .avatar img {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    border-radius: inherit;\n  }\n\n  .avatar-fallback {\n    width: 100%;\n    height: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background-color: var(--color-bg-muted);\n    color: var(--color-text-secondary);\n    font-size: 0.875rem;\n    font-weight: 500;\n    text-transform: uppercase;\n  }\n\n  /* Sizes */\n  .avatar-sm {\n    width: 2rem; /* 32px */\n    height: 2rem;\n  }\n  .avatar-sm .avatar-fallback {\n    font-size: 0.75rem;\n  }\n\n  .avatar-lg {\n    width: 3rem; /* 48px */\n    height: 3rem;\n  }\n  .avatar-lg .avatar-fallback {\n    font-size: 1rem;\n  }\n\n  .avatar-xl {\n    width: 4rem; /* 64px */\n    height: 4rem;\n  }\n  .avatar-xl .avatar-fallback {\n    font-size: 1.25rem;\n  }\n\n  /* Shapes */\n  .avatar-square {\n    border-radius: 0;\n  }\n\n  .avatar-rounded {\n    border-radius: 0.5rem;\n  }\n\n  /* Status Indicators */\n  .avatar-indicator {\n    position: absolute;\n    bottom: 0;\n    right: 0;\n    display: block;\n    width: 25%; /* Relative to avatar size */\n    height: 25%;\n    min-width: 8px;\n    min-height: 8px;\n    border-radius: 9999px;\n    border: 2px solid var(--color-bg-primary); /* Cutout effect */\n    background-color: var(--color-bg-muted);\n  }\n\n  .status-online {\n    background-color: var(--color-success);\n  }\n\n  .status-busy {\n    background-color: var(--color-danger);\n  }\n\n  .status-offline {\n    background-color: var(--color-text-muted);\n  }\n\n  /* Avatar Group */\n  .avatar-group {\n    display: flex;\n    align-items: center;\n    flex-direction: row;\n  }\n\n  .avatar-group .avatar {\n    border: 2px solid var(--color-bg-primary);\n    margin-right: -1rem; /* Tighter overlap */\n    transition: margin 0.2s ease, transform 0.2s ease, z-index 0.2s;\n  }\n\n  .avatar-group .avatar:hover {\n    z-index: 10;\n    transform: translateY(-2px);\n    margin-right: 0; \n  }\n\n  .avatar-group .avatar:last-child {\n    margin-right: 0;\n  }\n\n  .avatar-placeholder {\n    background-color: var(--color-bg-secondary);\n    color: var(--color-text-primary);\n    font-size: 0.75rem;\n  }\n}\n",[],[205,347,426,25,465],{"_105":473,"_96":474,"_155":475,"_157":450,"_158":140,"_159":476,"_161":162,"_107":477,"_101":32,"_164":365,"_166":478,"_167":22,"_168":-5,"_169":479,"_99":480},"0c952976-e2e9-11f0-b39b-42dde27851f2","_badges.scss","0c952a16-e2e9-11f0-b39b-42dde27851f2",60,["D",1766815101480],".theme-scope {\n  /* Badges & Tags */\n  .badge {\n  display: inline-flex;\n  align-items: center;\n  border-radius: var(--radius-md);\n  padding: 0.125rem 0.5rem;\n  font-size: var(--text-xs);\n  font-weight: var(--font-medium);\n  line-height: var(--leading-tight);\n  white-space: nowrap;\n  gap: 0.25rem;\n  }\n\n  /* Badge Variants */\n  .badge-default {\n  background-color: var(--color-primary);\n  color: var(--color-white);\n  }\n\n  .badge-secondary {\n  background-color: var(--color-bg-muted);\n  color: var(--color-text-neutral);\n  }\n\n  .badge-success {\n  background-color: var(--color-success-light);\n  color: var(--color-success-link-hover);\n  }\n\n  .badge-error,\n  .badge-danger,\n  .badge-destructive {\n  background-color: var(--color-danger-light);\n  color: var(--color-danger-link-hover);\n  }\n\n  .badge-info {\n  background-color: var(--color-primary-lighter);\n  color: var(--color-primary-dark);\n  }\n\n  .badge-warning {\n  background-color: var(--color-warning-light);\n  color: var(--color-warning-link-hover);\n  }\n\n  .badge-neutral {\n  background-color: var(--color-bg-muted);\n  color: var(--color-text-neutral);\n  }\n\n  /* Outline Variants */\n  .badge-outline {\n  background-color: transparent;\n  border: 1px solid var(--color-border-light);\n  color: var(--color-text-secondary);\n  }\n\n  .badge-outline-default {\n  background-color: transparent;\n  border: 1px solid var(--color-primary);\n  color: var(--color-primary);\n  }\n\n  .badge-outline-secondary {\n  background-color: transparent;\n  border: 1px solid var(--color-border-light);\n  color: var(--color-text-secondary);\n  }\n\n  .badge-outline-success {\n  background-color: transparent;\n  border: 1px solid var(--color-success);\n  color: var(--color-success-link-hover);\n  }\n\n  .badge-outline-error,\n  .badge-outline-danger,\n  .badge-outline-destructive {\n  background-color: transparent;\n  border: 1px solid var(--color-danger);\n  color: var(--color-danger-link-hover);\n  }\n\n  .badge-outline-info {\n  background-color: transparent;\n  border: 1px solid var(--color-primary);\n  color: var(--color-primary-dark);\n  }\n\n  .badge-outline-warning {\n  background-color: transparent;\n  border: 1px solid var(--color-warning);\n  color: var(--color-warning-link-hover);\n  }\n\n  /* Pill Variant (More Rounded) */\n  .badge-pill {\n  border-radius: var(--radius-full);\n  }\n\n  /* Number Badge (Small pill for numbers) */\n  .badge-number {\n  border-radius: var(--radius-full);\n  padding: 0.125rem 0.375rem;\n  font-size: 0.6875rem;\n  min-width: 1.25rem;\n  justify-content: center;\n  background-color: var(--color-text-neutral-dark);\n  color: var(--color-white);\n  }\n\n  .badge-number-secondary {\n  background-color: var(--color-bg-muted);\n  color: var(--color-text-neutral);\n  }\n\n  /* Size Variants */\n  .badge-sm {\n  font-size: 0.625rem;\n  padding: 0.125rem 0.375rem;\n  }\n\n  .badge-md {\n  font-size: var(--text-sm);\n  padding: 0.25rem 0.75rem;\n  max-height: 25px;\n  }\n\n  .badge-lg {\n  font-size: var(--text-base);\n  padding: 0.375rem 1rem;\n  }\n\n  /* Icon Support */\n  .badge .iconify {\n  display: inline-flex;\n  align-items: center;\n  font-size: var(--text-sm);\n  width: 0.875rem;\n  height: 0.875rem;\n  }\n\n  .badge-md .iconify {\n  font-size: var(--text-base);\n  width: 1rem;\n  height: 1rem;\n  }\n\n  .badge-lg .iconify {\n  font-size: var(--text-lg);\n  width: 1.125rem;\n  height: 1.125rem;\n  }\n}",[],[205,347,426,25,474],{"_105":482,"_96":483,"_155":484,"_157":450,"_158":140,"_159":485,"_161":162,"_107":486,"_101":32,"_164":365,"_166":487,"_167":22,"_168":-5,"_169":488,"_99":489},"0cca51aa-e2e9-11f0-8def-42dde27851f2","_buttons.scss","0cca5254-e2e9-11f0-8def-42dde27851f2",69,["D",1766815101828],".theme-scope {\n/* Buttons */\n.btn-primary,\n.action-btn {\ndisplay: inline-flex;\nalign-items: center;\njustify-content: center;\npadding: var(--space-btn-y) var(--space-btn-x);\nfont-size: var(--text-button);\nfont-weight: var(--font-medium);\nline-height: var(--leading-normal);\ncolor: var(--color-primary-text);\nbackground-color: var(--color-primary);\nborder: 1px solid var(--color-primary);\nborder-radius: var(--radius-button);\ncursor: pointer;\ntransition: all 0.15s ease-in-out;\ntext-decoration: none;\n}\n\n.btn-primary:hover,\n.action-btn:hover {\nbackground-color: var(--color-primary-hover);\nborder-color: var(--color-primary-hover);\n}\n\n.btn-primary:focus,\n.action-btn:focus {\noutline: none;\nbox-shadow: 0 0 0 var(--ring-width) var(--color-primary-ring);\n}\n\n.btn-primary:active,\n.action-btn:active {\nbackground-color: var(--color-primary-active);\nborder-color: var(--color-primary-active);\n}\n\n.btn-primary:disabled,\n.action-btn:disabled {\n  background-color: var(--color-bg-disabled);\n  border-color: var(--color-border);\n  color: var(--color-text-disabled);\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n\n/* Icon-only button variant */\n.btn-primary.btn-icon,\n.action-btn.btn-icon {\npadding: var(--space-btn-icon);\nborder-radius: var(--radius-2xl);\nmin-width: 44px;\naspect-ratio: 1;\n}\n\n.btn-secondary {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--space-btn-y) var(--space-btn-x);\n  font-size: var(--text-button);\n  font-weight: var(--font-medium);\n  line-height: var(--leading-normal);\n  color: var(--color-primary);\n  background-color: var(--color-primary-light);\n  border: 1px solid currentColor;\n  box-shadow: inset 0 0 0 1px currentColor;\n  border-radius: var(--radius-button);\n  cursor: pointer;\n  transition: all 0.15s ease-in-out;\n  text-decoration: none;\n}\n\n.btn-secondary:hover {\n  background-color: var(--color-primary-lighter);\n  color: var(--color-primary-hover);\n}\n\n.btn-secondary:focus {\n  outline: none;\n  box-shadow: inset 0 0 0 1px currentColor, 0 0 0 var(--ring-width) var(--color-primary-ring);\n}\n\n.btn-secondary:active {\n  background-color: var(--color-primary-lightest);\n  color: var(--color-primary-active);\n}\n\n.btn-secondary:disabled {\n  background-color: var(--color-bg-secondary);\n  color: var(--color-text-disabled);\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n\n.btn-tertiary {\ndisplay: inline-flex;\nalign-items: center;\njustify-content: center;\npadding: var(--space-btn-y) var(--space-btn-x); /* Matches form-input height */\nfont-size: var(--text-button);\nfont-weight: var(--font-medium);\nline-height: var(--leading-normal);\ncolor: var(--color-primary);\nbackground-color: transparent;\nborder: 1px solid var(--color-primary);\nborder-radius: var(--radius-button);\ncursor: pointer;\ntransition: all 0.15s ease-in-out;\ntext-decoration: none;\n}\n\n.btn-tertiary:hover {\nbackground-color: var(--color-bg-secondary);\ncolor: var(--color-primary-hover);\nborder-color: var(--color-primary-hover);\n}\n\n.btn-tertiary:focus {\noutline: none;\nbox-shadow: 0 0 0 var(--ring-width) var(--color-primary-ring);\n}\n\n.btn-tertiary:active {\nbackground-color: var(--color-bg-muted);\ncolor: var(--color-primary-active);\nborder-color: var(--color-primary-active);\n}\n\n.btn-tertiary:disabled {\n  background-color: transparent;\n  border-color: var(--color-border);\n  color: var(--color-text-disabled);\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n\n.btn-link {\ndisplay: inline-flex;\nalign-items: center;\njustify-content: center;\npadding: var(--space-btn-y) var(--space-btn-x); /* Matches form-input height */\nfont-size: var(--text-button);\nfont-weight: var(--font-medium);\nline-height: var(--leading-normal);\ncolor: var(--color-primary);\nbackground-color: transparent;\nborder: none;\nborder-radius: var(--radius-button);\ncursor: pointer;\ntransition: all 0.15s ease-in-out;\ntext-decoration: none;\n}\n\n.btn-link:hover {\ncolor: var(--color-primary-hover);\ntext-decoration: underline;\nbackground-color: var(--color-bg-secondary);\n}\n\n.btn-link:focus {\noutline: none;\nbox-shadow: 0 0 0 var(--ring-width) var(--color-primary-ring);\n}\n\n.btn-link:active {\ncolor: var(--color-primary-active);\n}\n\n.btn-link:disabled {\n  color: var(--color-text-disabled);\n  cursor: not-allowed;\n  text-decoration: none;\n  opacity: 0.6;\n}\n\n.btn-ghost {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--space-btn-y) var(--space-btn-x);\n  font-size: var(--text-button);\n  font-weight: var(--font-medium);\n  line-height: var(--leading-normal);\n  color: var(--color-text-primary);\n  background-color: transparent;\n  border: 1px solid transparent;\n  border-radius: var(--radius-button);\n  cursor: pointer;\n  transition: all 0.15s ease-in-out;\n  text-decoration: none;\n}\n\n.btn-ghost:hover {\n  background-color: var(--color-bg-secondary);\n  color: var(--color-text-primary);\n}\n\n.btn-ghost:focus {\n  outline: none;\n  background-color: var(--color-bg-secondary);\n  box-shadow: 0 0 0 var(--ring-width) var(--color-gray-ring); /* Neutral ring instead of blue */\n}\n\n.btn-ghost:active {\n  background-color: var(--color-bg-muted);\n}\n\n.btn-ghost:disabled {\n  color: var(--color-text-disabled);\n  cursor: not-allowed;\n  background-color: transparent;\n  opacity: 0.6;\n}\n\n/* Copy Button */\n.copy-button {\ndisplay: inline-flex;\nalign-items: center;\njustify-content: center;\ngap: var(--space-gap-sm);\npadding: var(--space-copy-btn-y) var(--space-copy-btn-x);\nfont-size: var(--text-copy-btn);\nfont-weight: var(--font-medium);\nline-height: var(--leading-normal);\ncolor: var(--color-text-primary);\nbackground-color: var(--color-white);\nborder: 1px solid var(--color-border);\nborder-radius: var(--radius-button);\ncursor: pointer;\ntransition: all 0.15s ease-in-out;\ntext-decoration: none;\n}\n\n.copy-button:hover {\nbackground-color: var(--color-bg-secondary);\nborder-color: var(--color-border-light);\n}\n\n.copy-button:focus {\noutline: none;\nbox-shadow: 0 0 0 var(--ring-width) var(--color-primary-ring);\n}\n\n.copy-button:active {\nbackground-color: var(--color-bg-muted);\n}\n\n.copy-button-copied {\ndisplay: inline-flex;\nalign-items: center;\njustify-content: center;\ngap: var(--space-gap-sm);\npadding: var(--space-copy-btn-y) var(--space-copy-btn-x);\nfont-size: var(--text-copy-btn);\nfont-weight: var(--font-medium);\nline-height: var(--leading-normal);\ncolor: var(--color-success-text);\nbackground-color: var(--color-success);\nborder: 1px solid var(--color-success);\nborder-radius: var(--radius-button);\ncursor: pointer;\ntransition: all 0.15s ease-in-out;\ntext-decoration: none;\n}\n\n.copy-button-copied:hover {\nbackground-color: var(--color-success-link);\nborder-color: var(--color-success-link);\n}\n\n/* Button Groups */\n.btn-group {\n  display: inline-flex;\n  isolation: isolate;\n  vertical-align: middle;\n}\n\n/* Ensure dropdown wrapper inside group stretches and passes stretch to child */\n.btn-group > .dropdown {\n  display: flex;\n}\n\n.btn-group > .btn-primary,\n.btn-group > .btn-secondary,\n.btn-group > .btn-tertiary,\n.btn-group > .btn-danger,\n.btn-group > .btn-success,\n.btn-group > .btn-warning,\n.btn-group > .btn-info,\n.btn-group > .btn-neutral,\n.btn-group > .btn-gray,\n.btn-group > .btn-danger-secondary,\n.btn-group > .btn-success-secondary,\n.btn-group > .btn-warning-secondary,\n.btn-group > .btn-info-secondary,\n.btn-group > .btn-neutral-secondary,\n.btn-group > .btn-gray-secondary,\n.btn-group > .dropdown > .btn-primary,\n.btn-group > .dropdown > .btn-secondary,\n.btn-group > .dropdown > .btn-tertiary,\n.btn-group > .dropdown > .btn-danger,\n.btn-group > .dropdown > .btn-success,\n.btn-group > .dropdown > .btn-warning,\n.btn-group > .dropdown > .btn-info,\n.btn-group > .dropdown > .btn-neutral,\n.btn-group > .dropdown > .btn-gray,\n.btn-group > .dropdown > .btn-danger-secondary,\n.btn-group > .dropdown > .btn-success-secondary,\n.btn-group > .dropdown > .btn-warning-secondary,\n.btn-group > .dropdown > .btn-info-secondary,\n.btn-group > .dropdown > .btn-neutral-secondary,\n.btn-group > .dropdown > .btn-gray-secondary,\n.btn-group > .action-btn {\n  position: relative;\n  border-width: 1px !important; /* Force 1px border when in group, override any other styles */\n  box-shadow: none !important; /* Remove the inset shadow fake-border */\n}\n\n/* Add specialized separator for group items to maintain visual division */\n/* Only remove left border if we are sure it's not needed, but with margin-left: -1px we actually want overlapping borders */\n.btn-group > .btn-secondary:not(:first-child),\n.btn-group > .btn-danger-secondary:not(:first-child),\n.btn-group > .btn-success-secondary:not(:first-child),\n.btn-group > .btn-warning-secondary:not(:first-child),\n.btn-group > .btn-info-secondary:not(:first-child),\n.btn-group > .btn-neutral-secondary:not(:first-child),\n.btn-group > .btn-gray-secondary:not(:first-child),\n.btn-group > .dropdown > .btn-secondary,\n.btn-group > .dropdown > .btn-danger-secondary,\n.btn-group > .dropdown > .btn-success-secondary,\n.btn-group > .dropdown > .btn-warning-secondary,\n.btn-group > .dropdown > .btn-info-secondary,\n.btn-group > .dropdown > .btn-neutral-secondary,\n.btn-group > .dropdown > .btn-gray-secondary {\n   border-left-width: 1px !important; /* Restore left border for overlap */\n}\n\n.btn-group > *:not(:first-child) {\n  margin-left: -1px; /* Overlap borders */\n}\n\n/* First element in group */\n.btn-group > .btn-primary:first-child,\n.btn-group > .btn-secondary:first-child,\n.btn-group > .btn-tertiary:first-child,\n.btn-group > .btn-danger:first-child,\n.btn-group > .btn-success:first-child,\n.btn-group > .btn-warning:first-child,\n.btn-group > .btn-info:first-child,\n.btn-group > .btn-neutral:first-child,\n.btn-group > .btn-gray:first-child,\n.btn-group > .btn-danger-secondary:first-child,\n.btn-group > .btn-success-secondary:first-child,\n.btn-group > .btn-warning-secondary:first-child,\n.btn-group > .btn-info-secondary:first-child,\n.btn-group > .btn-neutral-secondary:first-child,\n.btn-group > .btn-gray-secondary:first-child,\n.btn-group > .dropdown:first-child > .btn-primary,\n.btn-group > .dropdown:first-child > .btn-secondary,\n.btn-group > .dropdown:first-child > .btn-tertiary,\n.btn-group > .dropdown:first-child > .btn-danger,\n.btn-group > .dropdown:first-child > .btn-success,\n.btn-group > .dropdown:first-child > .btn-warning,\n.btn-group > .dropdown:first-child > .btn-info,\n.btn-group > .dropdown:first-child > .btn-neutral,\n.btn-group > .dropdown:first-child > .btn-gray,\n.btn-group > .dropdown:first-child > .btn-danger-secondary,\n.btn-group > .dropdown:first-child > .btn-success-secondary,\n.btn-group > .dropdown:first-child > .btn-warning-secondary,\n.btn-group > .dropdown:first-child > .btn-info-secondary,\n.btn-group > .dropdown:first-child > .btn-neutral-secondary,\n.btn-group > .dropdown:first-child > .btn-gray-secondary {\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0;\n}\n\n/* Last element in group */\n.btn-group > .btn-primary:last-child,\n.btn-group > .btn-secondary:last-child,\n.btn-group > .btn-tertiary:last-child,\n.btn-group > .btn-danger:last-child,\n.btn-group > .btn-success:last-child,\n.btn-group > .btn-warning:last-child,\n.btn-group > .btn-info:last-child,\n.btn-group > .btn-neutral:last-child,\n.btn-group > .btn-gray:last-child,\n.btn-group > .btn-danger-secondary:last-child,\n.btn-group > .btn-success-secondary:last-child,\n.btn-group > .btn-warning-secondary:last-child,\n.btn-group > .btn-info-secondary:last-child,\n.btn-group > .btn-neutral-secondary:last-child,\n.btn-group > .btn-gray-secondary:last-child,\n.btn-group > .dropdown:last-child > .btn-primary,\n.btn-group > .dropdown:last-child > .btn-secondary,\n.btn-group > .dropdown:last-child > .btn-tertiary,\n.btn-group > .dropdown:last-child > .btn-danger,\n.btn-group > .dropdown:last-child > .btn-success,\n.btn-group > .dropdown:last-child > .btn-warning,\n.btn-group > .dropdown:last-child > .btn-info,\n.btn-group > .dropdown:last-child > .btn-neutral,\n.btn-group > .dropdown:last-child > .btn-gray,\n.btn-group > .dropdown:last-child > .btn-danger-secondary,\n.btn-group > .dropdown:last-child > .btn-success-secondary,\n.btn-group > .dropdown:last-child > .btn-warning-secondary,\n.btn-group > .dropdown:last-child > .btn-info-secondary,\n.btn-group > .dropdown:last-child > .btn-neutral-secondary,\n.btn-group > .dropdown:last-child > .btn-gray-secondary {\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n}\n\n/* Middle elements */\n.btn-group > .btn-primary:not(:first-child):not(:last-child),\n.btn-group > .btn-secondary:not(:first-child):not(:last-child),\n.btn-group > .btn-tertiary:not(:first-child):not(:last-child),\n.btn-group > .btn-danger:not(:first-child):not(:last-child),\n.btn-group > .btn-success:not(:first-child):not(:last-child),\n.btn-group > .btn-warning:not(:first-child):not(:last-child),\n.btn-group > .btn-info:not(:first-child):not(:last-child),\n.btn-group > .btn-neutral:not(:first-child):not(:last-child),\n.btn-group > .btn-gray:not(:first-child):not(:last-child),\n.btn-group > .btn-danger-secondary:not(:first-child):not(:last-child),\n.btn-group > .btn-success-secondary:not(:first-child):not(:last-child),\n.btn-group > .btn-warning-secondary:not(:first-child):not(:last-child),\n.btn-group > .btn-info-secondary:not(:first-child):not(:last-child),\n.btn-group > .btn-neutral-secondary:not(:first-child):not(:last-child),\n.btn-group > .btn-gray-secondary:not(:first-child):not(:last-child),\n.btn-group > .dropdown:not(:first-child):not(:last-child) > .btn-primary,\n.btn-group > .dropdown:not(:first-child):not(:last-child) > .btn-secondary,\n.btn-group > .dropdown:not(:first-child):not(:last-child) > .btn-tertiary,\n.btn-group > .dropdown:not(:first-child):not(:last-child) > .btn-danger,\n.btn-group > .dropdown:not(:first-child):not(:last-child) > .btn-success,\n.btn-group > .dropdown:not(:first-child):not(:last-child) > .btn-warning,\n.btn-group > .dropdown:not(:first-child):not(:last-child) > .btn-info,\n.btn-group > .dropdown:not(:first-child):not(:last-child) > .btn-neutral,\n.btn-group > .dropdown:not(:first-child):not(:last-child) > .btn-gray,\n.btn-group > .dropdown:not(:first-child):not(:last-child) > .btn-danger-secondary,\n.btn-group > .dropdown:not(:first-child):not(:last-child) > .btn-success-secondary,\n.btn-group > .dropdown:not(:first-child):not(:last-child) > .btn-warning-secondary,\n.btn-group > .dropdown:not(:first-child):not(:last-child) > .btn-info-secondary,\n.btn-group > .dropdown:not(:first-child):not(:last-child) > .btn-neutral-secondary,\n.btn-group > .dropdown:not(:first-child):not(:last-child) > .btn-gray-secondary {\n  border-radius: 0;\n}\n\n/* Hover/Focus Z-index handling */\n.btn-group > *:hover,\n.btn-group > .dropdown:hover {\n  z-index: 2;\n}\n\n.btn-group > *:focus,\n.btn-group > .dropdown:focus-within {\n  z-index: 3;\n}\n\n/* Icon only button (square) */\n.btn-icon-only {\npadding: var(--space-btn-icon);\naspect-ratio: 1;\ndisplay: inline-flex;\nalign-items: center;\njustify-content: center;\n}\n\n/* Small/Short Button (matches badge-md height) */\n.btn-sm,\n.btn-short {\nfont-size: 0.75rem !important;\npadding: var(--space-btn-sm-y) var(--space-btn-sm-x) !important;\nline-height: 1.25 !important;\n}\n\n/* ===================================\n   Soft Color Variants (No Outline, Light Background)\n   =================================== */\n\n/* Danger Soft */\n.btn-danger-soft {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--space-btn-y) var(--space-btn-x);\n  font-size: var(--text-button);\n  font-weight: var(--font-medium);\n  line-height: var(--leading-normal);\n  color: var(--color-danger-link);\n  background-color: var(--color-danger-light);\n  border: 1px solid transparent; /* No outline */\n  border-radius: var(--radius-button);\n  cursor: pointer;\n  transition: all 0.15s ease-in-out;\n  text-decoration: none;\n}\n\n.btn-danger-soft:hover {\n  background-color: #fecaca; /* red-200 */\n  color: var(--color-danger-link-hover);\n}\n\n.btn-danger-soft:focus {\n  outline: none;\n  box-shadow: 0 0 0 var(--ring-width) var(--color-danger-ring);\n}\n\n.btn-danger-soft:active {\n  background-color: #fca5a5; /* red-300 */\n}\n\n.btn-danger-soft:disabled {\n  background-color: var(--color-bg-secondary);\n  color: var(--color-text-disabled);\n  cursor: not-allowed;\n}\n\n/* Success Soft */\n.btn-success-soft {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--space-btn-y) var(--space-btn-x);\n  font-size: var(--text-button);\n  font-weight: var(--font-medium);\n  line-height: var(--leading-normal);\n  color: var(--color-success-link);\n  background-color: var(--color-success-light);\n  border: 1px solid transparent; /* No outline */\n  border-radius: var(--radius-button);\n  cursor: pointer;\n  transition: all 0.15s ease-in-out;\n  text-decoration: none;\n}\n\n.btn-success-soft:hover {\n  background-color: #bbf7d0; /* green-200 */\n  color: var(--color-success-link-hover);\n}\n\n.btn-success-soft:focus {\n  outline: none;\n  box-shadow: 0 0 0 var(--ring-width) var(--color-success-ring);\n}\n\n.btn-success-soft:active {\n  background-color: #86efac; /* green-300 */\n}\n\n.btn-success-soft:disabled {\n  background-color: var(--color-bg-secondary);\n  color: var(--color-text-disabled);\n  cursor: not-allowed;\n}\n\n/* Warning Soft */\n.btn-warning-soft {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--space-btn-y) var(--space-btn-x);\n  font-size: var(--text-button);\n  font-weight: var(--font-medium);\n  line-height: var(--leading-normal);\n  color: var(--color-warning-link);\n  background-color: var(--color-warning-light);\n  border: 1px solid transparent; /* No outline */\n  border-radius: var(--radius-button);\n  cursor: pointer;\n  transition: all 0.15s ease-in-out;\n  text-decoration: none;\n}\n\n.btn-warning-soft:hover {\n  background-color: #fde68a; /* yellow-200 */\n  color: var(--color-warning-link-hover);\n}\n\n.btn-warning-soft:focus {\n  outline: none;\n  box-shadow: 0 0 0 var(--ring-width) var(--color-warning-ring);\n}\n\n.btn-warning-soft:active {\n  background-color: #fcd34d; /* yellow-300 */\n}\n\n.btn-warning-soft:disabled {\n  background-color: var(--color-bg-secondary);\n  color: var(--color-text-disabled);\n  cursor: not-allowed;\n}\n\n/* Info Soft */\n.btn-info-soft {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--space-btn-y) var(--space-btn-x);\n  font-size: var(--text-button);\n  font-weight: var(--font-medium);\n  line-height: var(--leading-normal);\n  color: var(--color-info-link);\n  background-color: var(--color-info-light);\n  border: 1px solid transparent; /* No outline */\n  border-radius: var(--radius-button);\n  cursor: pointer;\n  transition: all 0.15s ease-in-out;\n  text-decoration: none;\n}\n\n.btn-info-soft:hover {\n  background-color: #bae6fd; /* sky-200 */\n  color: var(--color-info-link-hover);\n}\n\n.btn-info-soft:focus {\n  outline: none;\n  box-shadow: 0 0 0 var(--ring-width) var(--color-info-ring);\n}\n\n.btn-info-soft:active {\n  background-color: #7dd3fc; /* sky-300 */\n}\n\n.btn-info-soft:disabled {\n  background-color: var(--color-bg-secondary);\n  color: var(--color-text-disabled);\n  cursor: not-allowed;\n}\n\n/* Neutral Soft */\n.btn-neutral-soft {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--space-btn-y) var(--space-btn-x);\n  font-size: var(--text-button);\n  font-weight: var(--font-medium);\n  line-height: var(--leading-normal);\n  color: var(--color-neutral-link);\n  background-color: var(--color-neutral-light);\n  border: 1px solid transparent; /* No outline */\n  border-radius: var(--radius-button);\n  cursor: pointer;\n  transition: all 0.15s ease-in-out;\n  text-decoration: none;\n}\n\n.btn-neutral-soft:hover {\n  background-color: #e4e4e7; /* zinc-200 */\n  color: var(--color-neutral-link-hover);\n}\n\n.btn-neutral-soft:focus {\n  outline: none;\n  box-shadow: 0 0 0 var(--ring-width) var(--color-neutral-ring);\n}\n\n.btn-neutral-soft:active {\n  background-color: #d4d4d8; /* zinc-300 */\n}\n\n.btn-neutral-soft:disabled {\n  background-color: var(--color-bg-secondary);\n  color: var(--color-text-disabled);\n  cursor: not-allowed;\n}\n\n/* Gray Soft */\n.btn-gray-soft {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--space-btn-y) var(--space-btn-x);\n  font-size: var(--text-button);\n  font-weight: var(--font-medium);\n  line-height: var(--leading-normal);\n  color: var(--color-text-primary);\n  background-color: var(--color-bg-secondary);\n  border: 1px solid transparent; /* No outline */\n  border-radius: var(--radius-button);\n  cursor: pointer;\n  transition: all 0.15s ease-in-out;\n  text-decoration: none;\n}\n\n.btn-gray-soft:hover {\n  background-color: var(--color-border);\n}\n\n.btn-gray-soft:focus {\n  outline: none;\n  box-shadow: 0 0 0 var(--ring-width) var(--color-gray-ring-dark);\n}\n\n.btn-gray-soft:active {\n  background-color: var(--color-border-light);\n}\n\n.btn-gray-soft:disabled {\n  background-color: var(--color-bg-muted);\n  color: var(--color-text-muted);\n  cursor: not-allowed;\n}\n\n/* Danger Button */\n.btn-danger {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--space-btn-y) var(--space-btn-x);\n  font-size: var(--text-button);\n  font-weight: var(--font-medium);\n  line-height: var(--leading-normal);\n  color: var(--color-danger-text);\n  background-color: var(--color-danger);\n  border: 1px solid var(--color-danger);\n  border-radius: var(--radius-button);\n  cursor: pointer;\n  transition: all 0.15s ease-in-out;\n  text-decoration: none;\n}\n\n.btn-danger:hover {\n  background-color: var(--color-danger-link);\n  border-color: var(--color-danger-link);\n}\n\n.btn-danger:focus {\n  outline: none;\n  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.3);\n}\n\n.btn-danger:active {\n  background-color: var(--color-danger-link-hover);\n  border-color: var(--color-danger-link-hover);\n}\n\n.btn-danger:disabled {\n  background-color: var(--color-bg-disabled);\n  border-color: var(--color-border);\n  color: var(--color-text-disabled);\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n\n/* Success Button */\n.btn-success {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--space-btn-y) var(--space-btn-x);\n  font-size: var(--text-button);\n  font-weight: var(--font-medium);\n  line-height: var(--leading-normal);\n  color: var(--color-success-text);\n  background-color: var(--color-success);\n  border: 1px solid var(--color-success);\n  border-radius: var(--radius-button);\n  cursor: pointer;\n  transition: all 0.15s ease-in-out;\n  text-decoration: none;\n}\n\n.btn-success:hover {\n  background-color: var(--color-success-link);\n  border-color: var(--color-success-link);\n}\n\n.btn-success:focus {\n  outline: none;\n  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.3);\n}\n\n.btn-success:active {\n  background-color: var(--color-success-link-hover);\n  border-color: var(--color-success-link-hover);\n}\n\n.btn-success:disabled {\n  background-color: var(--color-bg-disabled);\n  border-color: var(--color-border);\n  color: var(--color-text-disabled);\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n\n/* Warning Button */\n.btn-warning {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--space-btn-y) var(--space-btn-x);\n  font-size: var(--text-button);\n  font-weight: var(--font-medium);\n  line-height: var(--leading-normal);\n  color: var(--color-warning-text);\n  background-color: var(--color-warning);\n  border: 1px solid var(--color-warning);\n  border-radius: var(--radius-button);\n  cursor: pointer;\n  transition: all 0.15s ease-in-out;\n  text-decoration: none;\n}\n\n.btn-warning:hover {\n  background-color: var(--color-warning-link);\n  border-color: var(--color-warning-link);\n}\n\n.btn-warning:focus {\n  outline: none;\n  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.3);\n}\n\n.btn-warning:active {\n  background-color: var(--color-warning-link-hover);\n  border-color: var(--color-warning-link-hover);\n}\n\n.btn-warning:disabled {\n  background-color: var(--color-bg-disabled);\n  border-color: var(--color-border);\n  color: var(--color-text-disabled);\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n\n/* Info Button */\n.btn-info {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--space-btn-y) var(--space-btn-x);\n  font-size: var(--text-button);\n  font-weight: var(--font-medium);\n  line-height: var(--leading-normal);\n  color: var(--color-info-text);\n  background-color: var(--color-info);\n  border: 1px solid var(--color-info);\n  border-radius: var(--radius-button);\n  cursor: pointer;\n  transition: all 0.15s ease-in-out;\n  text-decoration: none;\n}\n\n.btn-info:hover {\n  background-color: var(--color-info-link);\n  border-color: var(--color-info-link);\n}\n\n.btn-info:focus {\n  outline: none;\n  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.3);\n}\n\n.btn-info:active {\n  background-color: var(--color-info-link-hover);\n  border-color: var(--color-info-link-hover);\n}\n\n.btn-info:disabled {\n  background-color: var(--color-bg-disabled);\n  border-color: var(--color-border);\n  color: var(--color-text-disabled);\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n\n/* Neutral Button */\n.btn-neutral {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--space-btn-y) var(--space-btn-x);\n  font-size: var(--text-button);\n  font-weight: var(--font-medium);\n  line-height: var(--leading-normal);\n  color: var(--color-neutral-text);\n  background-color: var(--color-neutral);\n  border: 1px solid var(--color-neutral);\n  border-radius: var(--radius-button);\n  cursor: pointer;\n  transition: all 0.15s ease-in-out;\n  text-decoration: none;\n}\n\n.btn-neutral:hover {\n  background-color: var(--color-neutral-link);\n  border-color: var(--color-neutral-link);\n}\n\n.btn-neutral:focus {\n  outline: none;\n  box-shadow: 0 0 0 3px rgba(113, 113, 122, 0.3);\n}\n\n.btn-neutral:active {\n  background-color: var(--color-neutral-link-hover);\n  border-color: var(--color-neutral-link-hover);\n}\n\n.btn-neutral:disabled {\n  background-color: var(--color-bg-disabled);\n  border-color: var(--color-border);\n  color: var(--color-text-disabled);\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n\n/* Gray Button (Github/Vercel Style - Light Gray) */\n.btn-gray {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--space-btn-y) var(--space-btn-x);\n  font-size: var(--text-button);\n  font-weight: var(--font-medium);\n  line-height: var(--leading-normal);\n  color: var(--color-text-primary);\n  background-color: var(--color-border); /* Matches slate-200/border, slightly darker than badge */\n  border: 1px solid var(--color-border);\n  border-radius: var(--radius-button);\n  cursor: pointer;\n  transition: all 0.15s ease-in-out;\n  text-decoration: none;\n}\n\n.btn-gray:hover {\n  background-color: var(--color-border-light); /* Darker on hover */\n  border-color: var(--color-border-light);\n}\n\n.btn-gray:focus {\n  outline: none;\n  box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.3); /* Slate-400 ring */\n}\n\n.btn-gray:active {\n  background-color: var(--color-text-muted);\n  border-color: var(--color-text-muted);\n}\n\n.btn-gray:disabled {\n  background-color: var(--color-bg-muted);\n  border-color: var(--color-bg-muted);\n  color: var(--color-text-muted);\n  cursor: not-allowed;\n}\n\n/* ===================================\n   Secondary Color Variants (Outlined)\n   =================================== */\n\n/* Danger Secondary (Outlined) */\n.btn-danger-secondary {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--space-btn-y) var(--space-btn-x);\n  font-size: var(--text-button);\n  font-weight: var(--font-medium);\n  line-height: var(--leading-normal);\n  color: var(--color-danger);\n  background-color: var(--color-danger-light);\n  border: 1px solid currentColor;\n  box-shadow: inset 0 0 0 1px currentColor;\n  border-radius: var(--radius-button);\n  cursor: pointer;\n  transition: all 0.15s ease-in-out;\n  text-decoration: none;\n}\n\n.btn-danger-secondary:hover {\n  background-color: #fecaca; /* red-200 */\n  color: var(--color-danger-link);\n}\n\n.btn-danger-secondary:focus {\n  outline: none;\n  box-shadow: inset 0 0 0 1px currentColor, 0 0 0 3px rgba(239, 68, 68, 0.2);\n}\n\n.btn-danger-secondary:active {\n  background-color: #fca5a5; /* red-300 */\n  color: var(--color-danger-link-hover);\n}\n\n.btn-danger-secondary:disabled {\n  background-color: var(--color-bg-secondary);\n  color: var(--color-text-disabled);\n  cursor: not-allowed;\n}\n\n/* Success Secondary (Outlined) */\n.btn-success-secondary {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--space-btn-y) var(--space-btn-x);\n  font-size: var(--text-button);\n  font-weight: var(--font-medium);\n  line-height: var(--leading-normal);\n  color: var(--color-success-link);\n  background-color: var(--color-success-light);\n  border: 1px solid currentColor;\n  box-shadow: inset 0 0 0 1px currentColor;\n  border-radius: var(--radius-button);\n  cursor: pointer;\n  transition: all 0.15s ease-in-out;\n  text-decoration: none;\n}\n\n.btn-success-secondary:hover {\n  background-color: #bbf7d0; /* green-200 */\n  color: var(--color-success-link-hover);\n}\n\n.btn-success-secondary:focus {\n  outline: none;\n  box-shadow: inset 0 0 0 1px currentColor, 0 0 0 3px rgba(34, 197, 94, 0.2);\n}\n\n.btn-success-secondary:active {\n  background-color: #86efac; /* green-300 */\n  color: var(--color-success-dark);\n}\n\n.btn-success-secondary:disabled {\n  background-color: var(--color-bg-secondary);\n  color: var(--color-text-disabled);\n  cursor: not-allowed;\n}\n\n/* Warning Secondary (Outlined) */\n.btn-warning-secondary {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--space-btn-y) var(--space-btn-x);\n  font-size: var(--text-button);\n  font-weight: var(--font-medium);\n  line-height: var(--leading-normal);\n  color: var(--color-warning-link);\n  background-color: var(--color-warning-light);\n  border: 1px solid currentColor;\n  box-shadow: inset 0 0 0 1px currentColor;\n  border-radius: var(--radius-button);\n  cursor: pointer;\n  transition: all 0.15s ease-in-out;\n  text-decoration: none;\n}\n\n.btn-warning-secondary:hover {\n  background-color: #fde68a; /* yellow-200 */\n  color: var(--color-warning-link-hover);\n}\n\n.btn-warning-secondary:focus {\n  outline: none;\n  box-shadow: inset 0 0 0 1px currentColor, 0 0 0 3px rgba(245, 158, 11, 0.2);\n}\n\n.btn-warning-secondary:active {\n  background-color: #fcd34d; /* yellow-300 */\n  color: var(--color-warning-dark);\n}\n\n.btn-warning-secondary:disabled {\n  background-color: var(--color-bg-secondary);\n  color: var(--color-text-disabled);\n  cursor: not-allowed;\n}\n\n/* Info Secondary (Outlined) */\n.btn-info-secondary {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--space-btn-y) var(--space-btn-x);\n  font-size: var(--text-button);\n  font-weight: var(--font-medium);\n  line-height: var(--leading-normal);\n  color: var(--color-info-link);\n  background-color: var(--color-info-light);\n  border: 1px solid currentColor;\n  box-shadow: inset 0 0 0 1px currentColor;\n  border-radius: var(--radius-button);\n  cursor: pointer;\n  transition: all 0.15s ease-in-out;\n  text-decoration: none;\n}\n\n.btn-info-secondary:hover {\n  background-color: #bae6fd; /* sky-200 */\n  color: var(--color-info-link-hover);\n}\n\n.btn-info-secondary:focus {\n  outline: none;\n  box-shadow: inset 0 0 0 1px currentColor, 0 0 0 3px rgba(14, 165, 233, 0.2);\n}\n\n.btn-info-secondary:active {\n  background-color: #7dd3fc; /* sky-300 */\n  color: var(--color-info-dark);\n}\n\n.btn-info-secondary:disabled {\n  background-color: var(--color-bg-secondary);\n  color: var(--color-text-disabled);\n  cursor: not-allowed;\n}\n\n/* Neutral Secondary (Outlined) */\n.btn-neutral-secondary {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--space-btn-y) var(--space-btn-x);\n  font-size: var(--text-button);\n  font-weight: var(--font-medium);\n  line-height: var(--leading-normal);\n  color: var(--color-neutral-link);\n  background-color: var(--color-neutral-light);\n  border: 1px solid currentColor;\n  box-shadow: inset 0 0 0 1px currentColor;\n  border-radius: var(--radius-button);\n  cursor: pointer;\n  transition: all 0.15s ease-in-out;\n  text-decoration: none;\n}\n\n.btn-neutral-secondary:hover {\n  background-color: #e4e4e7; /* zinc-200 */\n  color: var(--color-neutral-link-hover);\n}\n\n.btn-neutral-secondary:focus {\n  outline: none;\n  box-shadow: inset 0 0 0 1px currentColor, 0 0 0 3px rgba(113, 113, 122, 0.2);\n}\n\n.btn-neutral-secondary:active {\n  background-color: #d4d4d8; /* zinc-300 */\n  color: var(--color-neutral-dark);\n}\n\n.btn-neutral-secondary:disabled {\n  background-color: var(--color-bg-secondary);\n  color: var(--color-text-disabled);\n  cursor: not-allowed;\n}\n\n/* Gray Secondary (Github/Vercel Style - Light) */\n.btn-gray-secondary {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--space-btn-y) var(--space-btn-x);\n  font-size: var(--text-button);\n  font-weight: var(--font-medium);\n  line-height: var(--leading-normal);\n  color: var(--color-text-primary);\n  background-color: var(--color-white);\n  border: 1px solid var(--color-border);\n  border-radius: var(--radius-button);\n  cursor: pointer;\n  transition: all 0.15s ease-in-out;\n  text-decoration: none;\n}\n\n.btn-gray-secondary:hover {\n  background-color: var(--color-bg-secondary);\n  border-color: var(--color-border-light);\n}\n\n.btn-gray-secondary:focus {\n  outline: none;\n  box-shadow: 0 0 0 var(--ring-width) var(--color-gray-ring-dark);\n}\n\n.btn-gray-secondary:active {\n  background-color: var(--color-bg-muted);\n}\n\n.btn-gray-secondary:disabled {\n  background-color: var(--color-bg-secondary);\n  color: var(--color-text-disabled);\n  cursor: not-allowed;\n}\n}",[],[205,347,426,25,483],{"_105":491,"_96":492,"_155":493,"_157":450,"_158":140,"_159":494,"_161":162,"_107":495,"_101":32,"_164":365,"_166":496,"_167":22,"_168":-5,"_169":497,"_99":498},"0cc05e7a-e2e9-11f0-b941-42dde27851f2","_calendar.scss","0cc05f38-e2e9-11f0-b941-42dde27851f2",67,["D",1766815101759],".theme-scope {\n/* Calendar Component */\n/* ================== */\n\n/* Calendar Widget Container */\n.calendar-widget {\n  --calendar-cell-size: 36px;\n  --calendar-gap: 2px;\n  background-color: var(--color-bg-primary);\n  border: 1px solid var(--color-border);\n  border-radius: 0.75rem;\n  padding: 1rem;\n  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);\n}\n\n/* Size Variants */\n.calendar-widget-xs {\n  --calendar-cell-size: 24px;\n  padding: 0.75rem;\n  font-size: 0.75rem;\n}\n\n.calendar-widget-xs .calendar-nav-title {\n  font-size: 0.75rem;\n}\n\n.calendar-widget-xs .calendar-weekday {\n  font-size: 0.625rem;\n}\n\n.calendar-widget-sm {\n  --calendar-cell-size: 32px;\n  padding: 0.875rem;\n}\n\n.calendar-widget-sm .calendar-nav-title {\n  font-size: 0.8125rem;\n}\n\n/* Calendar Navigation */\n.calendar-nav {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 0.75rem;\n  gap: 0.5rem;\n}\n\n.calendar-nav-btn {\n  width: 28px;\n  height: 28px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: transparent;\n  border: 1px solid transparent;\n  border-radius: 0.375rem;\n  color: var(--color-text-secondary);\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.calendar-nav-btn:hover {\n  background-color: var(--color-bg-secondary);\n  border-color: var(--color-border);\n  color: var(--color-text-primary);\n}\n\n.calendar-nav-btn .iconify {\n  font-size: 1.125rem;\n}\n\n.calendar-nav-title {\n  font-size: 0.875rem;\n  font-weight: 500;\n  color: var(--color-text-primary);\n  text-align: center;\n  flex: 1;\n}\n\n/* Dropdown Navigation */\n.calendar-dropdowns {\n  display: flex;\n  gap: 0.375rem;\n  flex: 1;\n  justify-content: center;\n}\n\n.calendar-dropdown {\n  padding: 0.25rem 0.5rem;\n  font-size: 0.8125rem;\n  font-family: inherit;\n  background-color: var(--color-bg-primary);\n  border: 1px solid var(--color-border);\n  border-radius: 0.375rem;\n  color: var(--color-text-primary);\n  cursor: pointer;\n  appearance: none;\n  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\");\n  background-repeat: no-repeat;\n  background-position: right 4px center;\n  padding-right: 20px;\n}\n\n.calendar-dropdown:hover {\n  border-color: var(--color-primary);\n}\n\n.calendar-dropdown:focus {\n  outline: none;\n  border-color: var(--color-primary);\n  box-shadow: 0 0 0 2px var(--color-ring);\n}\n\n/* Calendar Grid */\n.calendar-grid {\n  display: flex;\n  flex-direction: column;\n  gap: var(--calendar-gap);\n}\n\n.calendar-weekdays {\n  display: flex;\n  gap: var(--calendar-gap);\n}\n\n.calendar-weekday {\n  width: var(--calendar-cell-size);\n  height: calc(var(--calendar-cell-size) * 0.75);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 0.6875rem;\n  font-weight: 500;\n  color: var(--color-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.03em;\n}\n\n.calendar-week {\n  display: flex;\n  gap: var(--calendar-gap);\n}\n\n/* Calendar Days */\n.calendar-day {\n  width: var(--calendar-cell-size);\n  height: var(--calendar-cell-size);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 0.8125rem;\n  font-family: inherit;\n  background: transparent;\n  border: none;\n  border-radius: 0.375rem;\n  color: var(--color-text-primary);\n  cursor: pointer;\n  position: relative;\n  transition: all 0.1s ease;\n}\n\n.calendar-day:hover:not(:disabled) {\n  background-color: var(--color-bg-secondary);\n}\n\n.calendar-day:focus {\n  outline: none;\n  box-shadow: 0 0 0 2px var(--color-ring);\n  z-index: 1;\n}\n\n/* Day States */\n.calendar-day-outside {\n  color: var(--color-text-muted);\n  opacity: 0.5;\n}\n\n.calendar-day-today {\n  background-color: var(--color-bg-secondary);\n  border: 1px solid var(--color-border);\n  font-weight: 600;\n}\n\n.calendar-day-selected {\n  background-color: var(--color-primary) !important;\n  color: var(--color-text-on-dark) !important;\n  font-weight: 600;\n}\n\n.calendar-day-selected:hover {\n  background-color: var(--color-primary-hover) !important;\n  color: var(--color-text-on-dark) !important;\n}\n\n/* Range Selection */\n.calendar-day-in-range {\n  background-color: var(--color-primary-light, rgba(59, 130, 246, 0.1));\n  border-radius: 0;\n}\n\n.calendar-day-range-start {\n  background-color: var(--color-primary) !important;\n  color: var(--color-text-on-dark) !important;\n  border-top-left-radius: 0.375rem !important;\n  border-bottom-left-radius: 0.375rem !important;\n  border-top-right-radius: 0 !important;\n  border-bottom-right-radius: 0 !important;\n}\n\n.calendar-day-range-end {\n  background-color: var(--color-primary) !important;\n  color: var(--color-text-on-dark) !important;\n  border-top-right-radius: 0.375rem !important;\n  border-bottom-right-radius: 0.375rem !important;\n  border-top-left-radius: 0 !important;\n  border-bottom-left-radius: 0 !important;\n}\n\n.calendar-day-range-start.calendar-day-range-end {\n  border-radius: 0.375rem !important;\n}\n\n.calendar-day-disabled {\n  color: var(--color-text-muted) !important;\n  opacity: 0.3;\n  cursor: not-allowed;\n}\n\n/* Date Picker Trigger */\n.date-picker-trigger {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0.5rem 0.875rem;\n  font-size: 0.875rem;\n  font-family: inherit;\n  background-color: var(--color-bg-primary);\n  border: 1px solid var(--color-border);\n  border-radius: 0.5rem;\n  color: var(--color-text-primary);\n  cursor: pointer;\n  transition: all 0.15s ease;\n  min-width: 240px;\n  justify-content: flex-start;\n}\n\n.date-picker-trigger:hover {\n  border-color: var(--color-primary);\n  background-color: var(--color-bg-secondary);\n}\n\n.date-picker-trigger:focus {\n  outline: none;\n  border-color: var(--color-primary);\n  box-shadow: 0 0 0 2px var(--color-ring);\n}\n\n.date-picker-trigger .date-picker-icon {\n  color: var(--color-text-muted);\n  font-size: 1.125rem;\n  flex-shrink: 0;\n}\n\n/* Calendar Footer */\n.calendar-footer {\n  display: flex;\n  justify-content: center;\n  margin-top: 0.75rem;\n  padding-top: 0.75rem;\n  border-top: 1px solid var(--color-border);\n}\n\n.calendar-today-btn {\n  display: flex;\n  align-items: center;\n  gap: 0.375rem;\n  padding: 0.375rem 0.75rem;\n  font-size: 0.8125rem;\n  font-family: inherit;\n  background: transparent;\n  border: 1px solid var(--color-border);\n  border-radius: 0.375rem;\n  color: var(--color-text-secondary);\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.calendar-today-btn:hover {\n  background-color: var(--color-bg-secondary);\n  color: var(--color-text-primary);\n  border-color: var(--color-primary);\n}\n\n.calendar-today-btn .iconify {\n  font-size: 1rem;\n}\n\n/* Range Calendar Container (Dual Month) */\n.calendar-range-container {\n  display: flex;\n  gap: 1.5rem;\n  justify-content: center;\n}\n\n.calendar-range-container .calendar-widget {\n  border: none;\n  box-shadow: none;\n  padding: 0;\n  background: transparent;\n}\n\n.calendar-view-toggle {\n  display: flex;\n  gap: 0.5rem;\n  margin-bottom: 1rem;\n  padding: 0.25rem;\n  background-color: var(--color-bg-muted);\n  border-radius: 0.5rem;\n}\n\n.calendar-view-btn {\n  flex: 1;\n  padding: 0.5rem 1rem;\n  font-size: 0.875rem;\n  font-weight: 500;\n  background-color: transparent;\n  border: none;\n  border-radius: 0.375rem;\n  color: var(--color-text-secondary);\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.calendar-view-btn:hover {\n  background-color: var(--color-bg-secondary);\n  color: var(--color-text-primary);\n}\n\n.calendar-view-btn.active {\n  background-color: var(--color-bg-primary);\n  color: var(--color-text-primary);\n  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n}\n\n.calendar-range-footer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 1rem;\n  margin-top: 1rem;\n  padding-top: 1rem;\n  border-top: 1px solid var(--color-border);\n}\n\n.calendar-range-label {\n  font-size: 0.875rem;\n  color: var(--color-text-secondary);\n}\n\n/* Date and Time Picker */\n.datetime-picker-container {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  position: relative;\n}\n\n.datetime-picker-row {\n  display: flex;\n  gap: 1rem;\n  align-items: flex-start;\n}\n\n.datetime-field {\n  display: flex;\n  flex-direction: column;\n  gap: 0.375rem;\n  position: relative;\n}\n\n.datetime-picker-container .date-picker-trigger {\n  min-width: 180px;\n  height: 38px;\n  padding: 0.5rem 0.75rem;\n  justify-content: space-between;\n}\n\n.datetime-label {\n  font-size: 0.875rem;\n  font-weight: 500;\n  color: var(--color-text-primary);\n}\n\n/* Time Picker Input */\n.time-picker-single-input {\n  width: 140px;\n  height: 38px;\n  padding: 0.5rem 0.75rem;\n  font-size: 0.875rem;\n  font-family: inherit;\n  background-color: var(--color-bg-primary);\n  border: 1px solid var(--color-border);\n  border-radius: 0.5rem;\n  color: var(--color-text-primary);\n  cursor: text;\n  transition: all 0.15s ease;\n}\n\n.time-picker-single-input:hover {\n  border-color: var(--color-primary);\n}\n\n.time-picker-single-input:focus {\n  outline: none;\n  border-color: var(--color-primary);\n  box-shadow: 0 0 0 2px var(--color-ring);\n}\n\n.time-picker-single-input::placeholder {\n  color: var(--color-text-muted);\n}\n\n/* Legacy time picker styles (keeping for other use cases) */\n.time-picker-input {\n  display: inline-flex;\n  align-items: center;\n  gap: 0;\n  padding: 0.5rem 0.5rem;\n  background-color: var(--color-bg-primary);\n  border: 1px solid var(--color-border);\n  border-radius: 0.5rem;\n  font-family: inherit;\n  height: 38px;\n}\n\n.time-picker-input:focus-within {\n  border-color: var(--color-primary);\n  box-shadow: 0 0 0 2px var(--color-ring);\n}\n\n.time-segment {\n  width: 1.25rem;\n  padding: 0;\n  border: none;\n  background: transparent;\n  font-size: 0.875rem;\n  font-family: inherit;\n  text-align: center;\n  color: var(--color-text-primary);\n}\n\n.time-segment:focus {\n  outline: none;\n  background-color: var(--color-primary-light);\n  border-radius: 0.25rem;\n}\n\n.time-separator {\n  font-size: 0.875rem;\n  color: var(--color-text-muted);\n  user-select: none;\n}\n\n.time-period-btn {\n  margin-left: 0.25rem;\n  padding: 0.125rem 0.375rem;\n  font-size: 0.75rem;\n  font-weight: 500;\n  font-family: inherit;\n  background-color: var(--color-bg-secondary);\n  border: 1px solid var(--color-border);\n  border-radius: 0.25rem;\n  color: var(--color-text-secondary);\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.time-period-btn:hover {\n  background-color: var(--color-bg-muted);\n  color: var(--color-text-primary);\n}\n\n/* DateTime Result Display */\n.datetime-result {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0.625rem 0.875rem;\n  background-color: var(--color-bg-secondary);\n  border: 1px solid var(--color-border);\n  border-radius: 0.5rem;\n  font-size: 0.875rem;\n  color: var(--color-text-secondary);\n}\n\n.datetime-result .iconify {\n  color: var(--color-primary);\n  font-size: 1.125rem;\n}\n\n/* Natural Language Picker */\n.nlp-picker-container {\n  width: 100%;\n  max-width: 500px;\n}\n\n.nlp-picker-content {\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n}\n\n.nlp-input-wrapper {\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n\n.nlp-input {\n  width: 100%;\n  padding: 0.625rem 2.5rem 0.625rem 0.875rem;\n  font-size: 0.875rem;\n  font-family: inherit;\n  background-color: var(--color-bg-primary);\n  border: 1px solid var(--color-border);\n  border-radius: 0.5rem;\n  color: var(--color-text-primary);\n  transition: all 0.15s ease;\n}\n\n.nlp-input::placeholder {\n  color: var(--color-text-muted);\n}\n\n.nlp-input:focus {\n  outline: none;\n  border-color: var(--color-primary);\n  box-shadow: 0 0 0 2px var(--color-ring);\n}\n\n.nlp-calendar-btn {\n  position: absolute;\n  right: 0.5rem;\n  padding: 0.375rem;\n  background: transparent;\n  border: none;\n  color: var(--color-text-muted);\n  cursor: pointer;\n  border-radius: 0.25rem;\n  transition: all 0.15s ease;\n}\n\n.nlp-calendar-btn:hover {\n  background-color: var(--color-bg-secondary);\n  color: var(--color-text-primary);\n}\n\n.nlp-calendar-btn .iconify {\n  font-size: 1.125rem;\n  display: block;\n}\n\n/* NLP Result Display */\n.nlp-result {\n  padding: 0.75rem 1rem;\n  background-color: var(--color-success-light);\n  border: 1px solid var(--color-success);\n  border-radius: 0.5rem;\n  font-size: 0.875rem;\n  color: var(--color-text-primary);\n  line-height: 1.5;\n}\n\n.nlp-result strong {\n  color: var(--color-success-dark);\n  font-weight: 600;\n}\n\n/* NLP Error Display */\n.nlp-error {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0.75rem 1rem;\n  background-color: var(--color-danger-light);\n  border: 1px solid var(--color-danger);\n  border-radius: 0.5rem;\n  font-size: 0.875rem;\n  color: var(--color-danger-dark);\n}\n\n.nlp-error .iconify {\n  font-size: 1.125rem;\n  flex-shrink: 0;\n}\n\n/* NLP Examples */\n.nlp-examples {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 0.5rem;\n  padding-top: 0.5rem;\n  border-top: 1px solid var(--color-border);\n}\n\n.nlp-examples-label {\n  font-size: 0.75rem;\n  font-weight: 500;\n  color: var(--color-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n}\n\n.nlp-example-btn {\n  padding: 0.25rem 0.625rem;\n  font-size: 0.75rem;\n  font-family: inherit;\n  background-color: var(--color-bg-secondary);\n  border: 1px solid var(--color-border);\n  border-radius: 0.375rem;\n  color: var(--color-text-secondary);\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.nlp-example-btn:hover {\n  background-color: var(--color-bg-muted);\n  color: var(--color-text-primary);\n  border-color: var(--color-primary);\n}\n}\n\n",[],[205,347,426,25,492],{"_105":500,"_96":501,"_155":502,"_157":450,"_158":140,"_159":503,"_161":162,"_107":504,"_101":32,"_164":365,"_166":505,"_167":22,"_168":-5,"_169":506,"_99":507},"0c76e916-e2e9-11f0-b39b-42dde27851f2","_code.scss","0c76e9ca-e2e9-11f0-b39b-42dde27851f2",54,["D",1766815101276],".theme-scope {\n  /* Code Block Component */\n  .code-block {\n    position: relative;\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-lg);\n    background-color: var(--color-code-bg-dark);\n    color: var(--color-code-text-dark);\n    margin-bottom: 1.5rem;\n    overflow: hidden;\n  }\n\n  /* Header */\n  .code-block-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 0.75rem 1rem;\n    background-color: rgba(255, 255, 255, 0.05);\n    border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n  }\n\n  .code-block-title {\n    font-size: var(--text-sm);\n    font-weight: var(--font-medium);\n    color: var(--color-gray-300);\n  }\n\n  /* Tabs in Header */\n  .code-block-tabs {\n    display: flex;\n    gap: 1rem;\n  }\n\n  .code-block-tab {\n    background: none;\n    border: none;\n    color: var(--color-text-muted);\n    cursor: pointer;\n    font-size: var(--text-sm);\n    font-weight: var(--font-medium);\n    padding: 0.25rem 0;\n    position: relative;\n    transition: color 0.2s;\n  }\n\n  .code-block-tab:hover {\n    color: var(--color-white);\n  }\n\n  .code-block-tab.active {\n    color: var(--color-white);\n  }\n\n  .code-block-tab.active::after {\n    content: '';\n    position: absolute;\n    bottom: -0.75rem; /* align with header bottom padding */\n    left: 0;\n    width: 100%;\n    height: 1px;\n    background-color: var(--color-primary);\n  }\n\n  /* Actions (Copy Button) */\n  .code-block-actions {\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n  }\n\n  .code-copy-btn {\n    background: none;\n    border: none;\n    color: var(--color-text-muted);\n    cursor: pointer;\n    padding: 0.25rem;\n    border-radius: var(--radius-sm);\n    transition: all 0.2s;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  .code-copy-btn:hover {\n    background-color: rgba(255, 255, 255, 0.1);\n    color: var(--color-white);\n  }\n\n  /* Content */\n  .code-block-content {\n    position: relative;\n    padding: 1rem;\n    overflow-x: auto;\n    font-family: var(--font-mono, ui-monospace, monospace);\n    font-size: var(--text-sm);\n    line-height: var(--leading-normal);\n  }\n\n  .code-block-content pre {\n    margin: 0;\n    padding: 0;\n    background: transparent;\n    color: inherit;\n    font-family: inherit;\n  }\n\n  .code-block-content code {\n    font-family: inherit;\n    color: inherit;\n  }\n  \n  /* Expand/Collapse */\n  .code-block.collapsed .code-block-content {\n    max-height: 150px; /* Adjust as needed */\n    overflow-y: hidden;\n  }\n\n  .code-block-expand-overlay {\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    height: 120px;\n    background: linear-gradient(to bottom, transparent, var(--color-code-bg-dark) 90%);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding-top: 2rem;\n    pointer-events: none;\n  }\n\n  .code-block-expand-btn {\n    pointer-events: auto;\n    background-color: var(--color-text-primary);\n    color: var(--color-bg-primary);\n    border: 1px solid var(--color-text-primary);\n    padding: 0.375rem 0.75rem;\n    border-radius: var(--radius-sm);\n    font-size: var(--text-xs);\n    font-weight: var(--font-medium);\n    cursor: pointer;\n    transition: all 0.2s;\n    box-shadow: 0 1px 2px rgba(0,0,0,0.05);\n  }\n\n  .code-block-expand-btn:hover {\n    background-color: var(--color-text-neutral-dark);\n    border-color: var(--color-text-neutral-dark);\n  }\n\n  /* Header Expand Button */\n  .code-header-expand-btn {\n    background: none;\n    border: none;\n    color: var(--color-text-muted);\n    cursor: pointer;\n    font-size: var(--text-xs);\n    font-weight: var(--font-medium);\n    padding: 0.25rem 0.5rem;\n    border-radius: var(--radius-sm);\n    transition: color 0.2s;\n  }\n\n  .code-header-expand-btn:hover {\n    color: var(--color-white);\n    background-color: rgba(255, 255, 255, 0.1);\n  }\n\n  /* Single Command Style (Inline-like block) */\n  .code-command {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 0.75rem 1rem;\n    background-color: var(--color-code-bg-dark);\n    color: var(--color-code-text-dark);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-lg);\n    font-family: var(--font-mono, ui-monospace, monospace);\n    font-size: var(--text-sm);\n  }\n\n  .code-command-text {\n    margin-right: 1rem;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .code-command-prefix {\n    color: var(--color-text-muted);\n    margin-right: 0.5rem;\n    user-select: none;\n  }\n\n  /* Copy Button Position for Simple Code Block (no header) */\n  .code-block.simple .code-copy-btn {\n    position: absolute;\n    top: 0.5rem;\n    right: 0.5rem;\n    z-index: 10;\n  }\n}\n",[],[205,347,426,25,501],{"_105":509,"_96":510,"_155":511,"_157":450,"_158":140,"_159":512,"_161":162,"_107":513,"_101":32,"_164":365,"_166":514,"_167":22,"_168":-5,"_169":515,"_99":516},"0c81e230-e2e9-11f0-a4b5-42dde27851f2","_details.scss","0c81e33e-e2e9-11f0-a4b5-42dde27851f2",56,["D",1766815101319],".theme-scope {\n\n  /* Details/Summary */\n  details {\n    // border: 1px solid var(--color-border);\n    border-radius: 0.5rem;\n    padding: 0.5rem 1rem 0.5rem 1rem;\n    margin-bottom: 1rem;\n  }\n\n  summary {\n    cursor: pointer;\n    font-weight: 500;\n    color: var(--color-text-primary);\n    user-select: none;\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n    /* Increased spacing between marker and text */\n    list-style: none;\n    /* Hide default marker */\n  }\n\n  /* Hide default marker in Webkit/Blink */\n  summary::-webkit-details-marker {\n    display: none;\n  }\n\n  /* Custom Marker */\n  summary::before {\n    content: \"\";\n    width: 1rem;\n    /* Increased from 0.75rem */\n    height: 1rem;\n    /* Increased from 0.75rem */\n    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\");\n    background-repeat: no-repeat;\n    background-position: center;\n    background-size: contain;\n    transition: transform 0.2s ease-in-out;\n    flex-shrink: 0;\n  }\n\n  summary:hover {\n    color: var(--color-primary);\n  }\n\n  details[open] summary {\n    margin-bottom: 0.75rem;\n  }\n\n  details[open] summary::before {\n    transform: rotate(90deg);\n  }\n\n  /* Details/Summary Toggle Variant */\n  .details-toggle {\n    border: 1px solid var(--color-border);\n    border-radius: 0.5rem;\n    padding: 0.75rem 1rem;\n    margin-bottom: 1rem;\n    background-color: var(--color-bg-primary);\n    transition: border-color 0.15s ease-in-out;\n  }\n\n  .details-toggle:hover {\n    border-color: var(--color-border-light);\n  }\n\n  .details-summary {\n    cursor: pointer;\n    font-weight: 500;\n    color: var(--color-text-primary);\n    user-select: none;\n    padding: 0.25rem 0;\n    /* Revert to vanilla behavior (no flex, no custom marker) */\n  }\n\n  .details-summary:hover {\n    color: var(--color-primary);\n  }\n\n  .details-toggle[open] .details-summary {\n    margin-bottom: 0.75rem;\n  }\n\n  .details-content {\n    padding-left: 1rem;\n    padding-top: 0.5rem;\n    color: var(--color-text-secondary);\n  }\n\n  /* Minimal Details/Summary Variant */\n  details.details-minimal {\n    border: none;\n    background: none;\n    padding: 0;\n    margin-bottom: 0.5rem;\n  }\n\n  details.details-minimal summary {\n    padding: 0.25rem 0;\n    color: var(--color-text-secondary);\n    /* Muted color by default */\n  }\n\n  details.details-minimal summary:hover {\n    color: var(--color-text-primary);\n    /* Darker on hover */\n  }\n\n  details.details-minimal[open] summary {\n    margin-bottom: 0.25rem;\n    color: var(--color-text-primary);\n  }\n\n  details.details-minimal .details-content {\n    padding-left: 1.75rem;\n    /* Align with text start (marker width + gap) */\n    color: var(--color-text-secondary);\n  }\n}",[],[205,347,426,25,510],{"_105":518,"_96":519,"_155":520,"_157":450,"_158":140,"_159":521,"_161":162,"_107":522,"_101":32,"_164":365,"_166":523,"_167":22,"_168":-5,"_169":524,"_99":525},"0cd86b64-e2e9-11f0-8def-42dde27851f2","_fields.scss","0cd86c18-e2e9-11f0-8def-42dde27851f2",70,["D",1766815101919],".theme-scope {\n  /* Field Component Styles - Based on shadcn/ui */\n  \n  /* Field Container */\n  .field {\n    display: flex;\n    flex-direction: column;\n    gap: 0.375rem;\n  }\n  \n  .field:last-child {\n    margin-bottom: 0;\n  }\n  \n  /* Field orientations */\n  .field-horizontal {\n    flex-direction: row;\n    align-items: flex-start;\n    gap: 0.75rem;\n  }\n  \n  .field-responsive {\n    flex-direction: column;\n    \n    @media (min-width: 640px) {\n      flex-direction: row;\n      align-items: flex-start;\n      gap: 1.5rem;\n    }\n  }\n  \n  /* Field Label */\n  .field-label {\n    display: block;\n    margin-bottom: 0;\n    font-weight: var(--font-medium);\n    color: var(--color-text-primary);\n    font-size: var(--text-sm);\n    line-height: var(--leading-normal);\n  }\n  \n  .field-horizontal .field-label {\n    margin-bottom: 0;\n    margin-top: 0;\n    line-height: var(--leading-normal);\n  }\n  \n  /* Field Title (for non-input field headers) */\n  .field-title {\n    font-weight: var(--font-medium);\n    color: var(--color-text-primary);\n    font-size: var(--text-sm);\n    line-height: var(--leading-normal);\n    margin-bottom: 0;\n  }\n  \n  /* Field Description */\n  .field-description {\n    font-size: var(--text-sm);\n    color: var(--color-text-muted);\n    line-height: var(--leading-normal);\n    margin: 0;\n  }\n  \n  .field-horizontal .field-description {\n    font-size: var(--text-sm);\n    margin-bottom: 0;\n  }\n  \n  /* Description inside fieldset should have bottom margin for spacing before checkbox/radio groups */\n  .fieldset > .field-description {\n    margin-bottom: 0.75rem;\n  }\n  \n  /* Description that comes before an input gets bottom spacing */\n  .field-description + .form-input,\n  .field-description + .form-select,\n  .field-description + .form-textarea,\n  .field-description + input,\n  .field-description + select,\n  .field-description + textarea,\n  .field-description + .range-slider {\n    margin-top: 0;\n  }\n  \n  /* Tighter spacing for fieldset + description + field-group combo */\n  .fieldset .field-description + .field-group {\n    margin-top: 0;\n  }\n  \n  /* Field Content - wrapper for label + description in horizontal layouts */\n  .field-content {\n    display: flex;\n    flex-direction: column;\n    gap: 0.25rem;\n    flex: 1;\n  }\n  \n  .field-horizontal .field-content {\n    flex: 1;\n  }\n  \n  .field-responsive .field-content {\n    flex: 0 0 auto;\n    min-width: 8rem;\n    \n    @media (min-width: 640px) {\n      min-width: 10rem;\n      max-width: 12rem;\n    }\n  }\n  \n  /* Fieldset */\n  .fieldset {\n    border: none;\n    padding: 0;\n    margin: 0;\n    min-width: 0;\n  }\n  \n  /* Field Legend */\n  .field-legend {\n    font-size: var(--text-lg);\n    font-weight: var(--font-semibold);\n    color: var(--color-text-primary);\n    margin-bottom: 0.375rem;\n    line-height: var(--leading-normal);\n  }\n  \n  .field-legend-label {\n    font-size: var(--text-sm);\n    font-weight: var(--font-medium);\n    line-height: var(--leading-normal);\n    margin-bottom: 0.375rem;\n  }\n  \n  /* Field Group - stacks multiple fields */\n  .field-group {\n    display: flex;\n    flex-direction: column;\n    gap: 0.5rem;\n  }\n  \n  /* Separators don't participate in gap - they have their own spacing */\n  .field-group > .field-separator {\n    margin: 0.5rem 0 !important;\n    flex-shrink: 0;\n  }\n  \n  .field-group.gap-3 {\n    gap: 0.5rem;\n  }\n  \n  /* Checkbox/Radio groups inside fieldset need consistent spacing */\n  .fieldset .field-group .field-horizontal {\n    margin-bottom: 0;\n  }\n  \n  /* Space-y utility override for consistent checkbox/radio spacing */\n  .space-y-2 > .field-horizontal {\n    margin-bottom: 0;\n  }\n  \n  .space-y-2 > .field-horizontal + .field-horizontal {\n    margin-top: 0.5rem;\n  }\n  \n  /* Container query support for responsive fields */\n  @container field-group (min-width: 640px) {\n    .field-responsive {\n      flex-direction: row;\n      align-items: flex-start;\n      gap: 1.5rem;\n    }\n  }\n  \n  /* Field Separator */\n  .field-separator {\n    display: block !important;\n    height: 1px;\n    background-color: var(--color-border);\n    margin: 0;\n    border: none;\n    width: 100%;\n  }\n  \n  /* Field Error State */\n  .field-invalid input,\n  .field-invalid textarea,\n  .field-invalid select,\n  .field-invalid .form-input,\n  .field-invalid .form-select {\n    border-color: var(--color-danger);\n  }\n  \n  .field-invalid input:focus,\n  .field-invalid textarea:focus,\n  .field-invalid select:focus,\n  .field-invalid .form-input:focus,\n  .field-invalid .form-select:focus {\n    border-color: var(--color-danger);\n    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);\n  }\n  \n  /* Field Error Message */\n  .field-error {\n    font-size: var(--text-sm);\n    color: var(--color-danger);\n    margin: 0;\n    line-height: var(--leading-normal);\n  }\n  \n  /* Choice Card - clickable field wrapper */\n  .field-choice-card {\n    display: block;\n    padding: 0.75rem 1rem;\n    border: 1px solid var(--color-choice-border);\n    border-radius: var(--radius-lg);\n    cursor: pointer;\n    transition: all 0.15s ease-in-out;\n    background-color: var(--color-choice-bg);\n  }\n  \n  .field-choice-card:hover {\n    background-color: var(--color-choice-bg-hover);\n    border-color: var(--color-choice-border-hover);\n  }\n  \n  .field-choice-card:has(input:checked) {\n    border-color: var(--color-choice-border-checked);\n    background-color: var(--color-choice-bg-checked);\n  }\n  \n  .field-choice-card:has(input:focus) {\n    outline: 2px solid var(--color-choice-ring);\n    outline-offset: 2px;\n  }\n  \n  /* Responsive field input sizing */\n  .field-responsive input,\n  .field-responsive textarea,\n  .field-responsive select,\n  .field-responsive .form-input,\n  .field-responsive .form-select {\n    width: 100%;\n    max-width: 100%;\n    \n    @media (min-width: 640px) {\n      width: 100%;\n      max-width: 24rem;\n      flex: 0 1 auto;\n    }\n  }\n  \n  /* Horizontal field adjustments for checkboxes/radios/toggles */\n  .field-horizontal input[type=\"checkbox\"],\n  .field-horizontal input[type=\"radio\"],\n  .field-horizontal .form-toggle {\n    margin-top: 0.125rem;\n    flex-shrink: 0;\n  }\n  \n  /* Reset field margins inside checkbox/radio groups to prevent double spacing */\n  .field-group .field-horizontal.field,\n  .space-y-2 .field-horizontal.field {\n    margin-bottom: 0;\n    gap: 0.625rem;\n  }\n  \n  /* Field buttons in horizontal layout */\n  .field-horizontal button {\n    margin-right: 0.5rem;\n  }\n  \n  .field-horizontal button:last-child {\n    margin-right: 0;\n  }\n  \n  /* Accessibility improvements */\n  .field input[aria-invalid=\"true\"],\n  .field textarea[aria-invalid=\"true\"],\n  .field select[aria-invalid=\"true\"] {\n    border-color: var(--color-danger);\n  }\n  \n  /* Field with description spacing adjustments */\n  .field:has(.field-description) .field-label,\n  .field:has(.field-description) .field-title {\n    margin-bottom: 0;\n  }\n  \n  /* Focus within container styling */\n  .field:has(input:focus) .field-label,\n  .field:has(textarea:focus) .field-label,\n  .field:has(select:focus) .field-label {\n    color: var(--color-primary);\n  }\n  \n  /* Range Slider (Two-headed slider) */\n  .range-slider {\n    position: relative;\n    width: 100%;\n    height: 1.25rem;\n    margin-top: 0.5rem;\n  }\n  \n  .range-slider-track {\n    position: absolute;\n    top: 50%;\n    left: 0;\n    right: 0;\n    height: 0.25rem;\n    background: var(--color-border-light);\n    border-radius: var(--radius-full);\n    transform: translateY(-50%);\n  }\n  \n  .range-slider-range {\n    position: absolute;\n    height: 100%;\n    background: var(--color-primary);\n    border-radius: var(--radius-full);\n  }\n  \n  .range-slider-input {\n    position: absolute;\n    width: 100%;\n    height: 0.25rem;\n    top: 50%;\n    transform: translateY(-50%);\n    background: transparent;\n    pointer-events: none;\n    appearance: none;\n    -webkit-appearance: none;\n    margin: 0;\n    padding: 0;\n  }\n  \n  .range-slider-input::-webkit-slider-thumb {\n    appearance: none;\n    -webkit-appearance: none;\n    pointer-events: all;\n    width: 1rem;\n    height: 1rem;\n    background: var(--color-bg-primary);\n    border: 2px solid var(--color-primary);\n    border-radius: 50%;\n    cursor: pointer;\n    box-shadow: var(--shadow-sm);\n    transition: box-shadow 0.15s ease-in-out;\n  }\n  \n  .range-slider-input::-webkit-slider-thumb:hover {\n    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);\n  }\n  \n  .range-slider-input::-webkit-slider-thumb:active {\n    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2);\n  }\n  \n  .range-slider-input::-moz-range-thumb {\n    pointer-events: all;\n    width: 1rem;\n    height: 1rem;\n    background: var(--color-bg-primary);\n    border: 2px solid var(--color-primary);\n    border-radius: 50%;\n    cursor: pointer;\n    box-shadow: var(--shadow-sm);\n    transition: box-shadow 0.15s ease-in-out;\n  }\n  \n  .range-slider-input::-moz-range-thumb:hover {\n    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);\n  }\n  \n  .range-slider-input::-moz-range-thumb:active {\n    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2);\n  }\n  \n  .range-slider-input:focus {\n    outline: none;\n  }\n  \n  .range-slider-input:focus::-webkit-slider-thumb {\n    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15);\n  }\n  \n  .range-slider-input:focus::-moz-range-thumb {\n    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15);\n  }\n  \n  /* Z-index for overlapping sliders - min on top so it's accessible when at same position */\n  .range-slider-input-min {\n    z-index: 4;\n  }\n  \n  .range-slider-input-max {\n    z-index: 3;\n  }\n}\n",[],[205,347,426,25,519],{"_105":527,"_96":528,"_155":529,"_157":450,"_158":140,"_159":530,"_161":162,"_107":531,"_101":32,"_164":365,"_166":532,"_167":22,"_168":-5,"_169":533,"_99":534},"0cc50bc8-e2e9-11f0-bdaa-42dde27851f2","_forms.scss","0cc50c5e-e2e9-11f0-bdaa-42dde27851f2",68,["D",1766815101792],".theme-scope {\n/* Forms */\ninput[type=text],\ninput[type=email],\ninput[type=password],\ninput[type=number],\ninput[type=url],\ninput[type=search],\ninput[type=tel],\ninput[type=date],\ninput[type=time],\ninput[type=datetime-local],\ninput[type=month],\ninput[type=week],\ninput[type=file],\ntextarea,\nselect,\n.form-input,\n.form-select {\ndisplay: block;\nwidth: 100%;\nmargin: 0;\npadding: 0.5rem 0.625rem; /* Adjusted padding for better height */\nfont-size: var(--text-sm);\nline-height: var(--leading-normal);\ncolor: var(--color-text-primary);\nbackground-color: var(--color-bg-primary);\nborder: 1px solid var(--color-border-light);\nborder-radius: var(--radius-md);\ntransition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n}\n\n/* Specificity override for Tailwind padding utilities */\n.form-input.pl-10 {\npadding-left: 2.5rem;\n}\n\n/* Border radius overrides for connected inputs (e.g., chat input with toolbar) */\n.form-input.rounded-none,\ntextarea.form-input.rounded-none,\ninput.form-input.rounded-none {\nborder-radius: 0;\n}\n\n.form-input.rounded-t-none,\ntextarea.form-input.rounded-t-none,\ninput.form-input.rounded-t-none {\nborder-top-left-radius: 0;\nborder-top-right-radius: 0;\n}\n\n.form-input.rounded-b-none,\ntextarea.form-input.rounded-b-none,\ninput.form-input.rounded-b-none {\nborder-bottom-left-radius: 0;\nborder-bottom-right-radius: 0;\n}\n\ninput[type=text]:focus,\ninput[type=email]:focus,\ninput[type=password]:focus,\ninput[type=number]:focus,\ninput[type=url]:focus,\ninput[type=search]:focus,\ninput[type=tel]:focus,\ninput[type=date]:focus,\ninput[type=time]:focus,\ninput[type=datetime-local]:focus,\ninput[type=month]:focus,\ninput[type=week]:focus,\ninput[type=file]:focus,\ntextarea:focus,\nselect:focus,\n.form-input:focus {\noutline: none;\nborder-color: var(--color-primary);\nbox-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);\n}\n\ninput[type=text]:disabled,\ninput[type=email]:disabled,\ninput[type=password]:disabled,\ninput[type=number]:disabled,\ninput[type=url]:disabled,\ninput[type=search]:disabled,\ninput[type=tel]:disabled,\ninput[type=date]:disabled,\ninput[type=time]:disabled,\ninput[type=datetime-local]:disabled,\ninput[type=month]:disabled,\ninput[type=week]:disabled,\ninput[type=file]:disabled,\ntextarea:disabled,\nselect:disabled,\n.form-input:disabled {\nbackground-color: var(--color-bg-secondary);\ncolor: var(--color-text-muted);\ncursor: not-allowed;\n}\n\ninput[readonly],\ntextarea[readonly],\n.form-input[readonly] {\nbackground-color: var(--color-bg-secondary);\ncolor: var(--color-text-secondary);\n}\n\n/* Textarea auto-grow */\ntextarea {\nresize: vertical;\nmin-height: 80px;\noverflow: hidden;\n}\n\ntextarea.no-auto-grow {\nresize: both;\noverflow: auto;\n}\n\n/* Select dropdown arrow - matches button dropdown chevron style */\nselect,\n.form-select {\nappearance: none;\n-webkit-appearance: none;\n-moz-appearance: none;\nbackground-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\");\nbackground-repeat: no-repeat;\nbackground-position: right 0.5rem center;\nbackground-size: 1.25rem 1.25rem;\npadding-right: 2.5rem;\n}\n\nselect:disabled,\n.form-select:disabled {\nbackground-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\");\n}\n\n/* Labels */\nlabel,\n.form-label {\ndisplay: block;\nmargin-bottom: 0.5rem;\nfont-weight: var(--font-medium);\ncolor: var(--color-text-primary);\nfont-size: var(--text-sm);\n}\n\n/* Inline label - for use alongside checkboxes, radios, toggles */\n.form-label-inline,\n.form-label.inline {\ndisplay: inline;\nmargin-bottom: 0;\n}\n\n/* Checkbox/Radio field wrapper - inline label + input pattern */\n.field-check,\nlabel.field-check {\ndisplay: flex;\nalign-items: flex-start;\ngap: 0.5rem;\ncursor: pointer;\nmargin-bottom: 0;\n}\n\n.field-check.items-center {\nalign-items: center;\n}\n\n.field-check input[type=checkbox],\n.field-check input[type=radio] {\nmargin-top: 0.125rem; /* Align with first line of text */\nflex-shrink: 0;\n}\n\n.field-check.items-center input[type=checkbox],\n.field-check.items-center input[type=radio] {\nmargin-top: 0;\n}\n\n.field-check > span,\n.field-check > div {\nflex: 1;\n}\n\n.field-check .field-check-label {\nfont-weight: var(--font-medium);\nfont-size: var(--text-sm);\ncolor: var(--color-text-primary);\nline-height: 1.25;\n}\n\n.field-check .field-check-description {\nfont-size: var(--text-sm);\ncolor: var(--color-text-muted);\nmargin-top: 0.25rem;\n}\n\n/* Checkboxes and Radio Buttons */\ninput[type=checkbox],\ninput[type=radio],\n.form-checkbox,\n.form-radio {\ndisplay: inline-block;\nwidth: 1rem;\nheight: 1rem;\nmin-width: 1rem;\nflex-shrink: 0;\nbackground-color: var(--color-control-bg);\nborder: 1px solid var(--color-control-border);\nborder-radius: var(--radius-sm);\ncursor: pointer;\ntransition: all 0.15s ease-in-out;\naccent-color: var(--color-control-checked);\n}\n\ninput[type=radio] {\nborder-radius: 50%;\n}\n\ninput[type=checkbox]:hover,\ninput[type=radio]:hover {\nbackground-color: var(--color-control-bg-hover);\nborder-color: var(--color-control-border-hover);\n}\n\ninput[type=checkbox]:checked,\ninput[type=radio]:checked {\nbackground-color: var(--color-control-checked);\nborder-color: var(--color-control-checked-border);\n}\n\ninput[type=checkbox]:checked:hover,\ninput[type=radio]:checked:hover {\nbackground-color: var(--color-control-checked-hover);\nborder-color: var(--color-control-checked-hover);\n}\n\ninput[type=checkbox]:focus,\ninput[type=radio]:focus {\noutline: none;\nbox-shadow: 0 0 0 3px var(--color-control-ring);\n}\n\n/* Range Slider */\ninput[type=range],\n.form-range {\nwidth: 100%;\nheight: 0.25rem;\nbackground: var(--color-border-light);\nborder-radius: var(--radius-full);\noutline: none;\ncursor: pointer;\nappearance: none;\n-webkit-appearance: none;\n}\n\ninput[type=range]::-webkit-slider-runnable-track,\n.form-range::-webkit-slider-runnable-track {\nwidth: 100%;\nheight: 0.25rem;\nbackground: var(--color-border-light);\nborder-radius: var(--radius-full);\n}\n\ninput[type=range]::-webkit-slider-thumb,\n.form-range::-webkit-slider-thumb {\nappearance: none;\n-webkit-appearance: none;\nwidth: 1rem;\nheight: 1rem;\nbackground: var(--color-bg-primary);\nborder: 2px solid var(--color-primary);\nborder-radius: 50%;\ncursor: pointer;\nmargin-top: -0.375rem;\nbox-shadow: var(--shadow-sm);\ntransition: box-shadow 0.15s ease-in-out;\n}\n\ninput[type=range]::-webkit-slider-thumb:hover,\n.form-range::-webkit-slider-thumb:hover {\nbox-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);\n}\n\ninput[type=range]::-webkit-slider-thumb:active,\n.form-range::-webkit-slider-thumb:active {\nbox-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2);\n}\n\ninput[type=range]::-moz-range-track,\n.form-range::-moz-range-track {\nwidth: 100%;\nheight: 0.25rem;\nbackground: var(--color-border-light);\nborder-radius: var(--radius-full);\nborder: none;\n}\n\ninput[type=range]::-moz-range-thumb,\n.form-range::-moz-range-thumb {\nwidth: 1rem;\nheight: 1rem;\nbackground: var(--color-bg-primary);\nborder: 2px solid var(--color-primary);\nborder-radius: 50%;\ncursor: pointer;\nbox-shadow: var(--shadow-sm);\ntransition: box-shadow 0.15s ease-in-out;\n}\n\ninput[type=range]::-moz-range-thumb:hover,\n.form-range::-moz-range-thumb:hover {\nbox-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);\n}\n\ninput[type=range]::-moz-range-thumb:active,\n.form-range::-moz-range-thumb:active {\nbox-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2);\n}\n\ninput[type=range]:focus,\n.form-range:focus {\noutline: none;\n}\n\ninput[type=range]:focus::-webkit-slider-thumb,\n.form-range:focus::-webkit-slider-thumb {\nbox-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15);\n}\n\ninput[type=range]:focus::-moz-range-thumb,\n.form-range:focus::-moz-range-thumb {\nbox-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15);\n}\n\n/* Toggle Switch */\ninput[type=checkbox].form-toggle {\n  appearance: none;\n  width: 2.75rem;\n  height: 1.5rem;\n  background-color: var(--color-toggle-bg);\n  border-radius: var(--radius-full);\n  position: relative;\n  cursor: pointer;\n  outline: none;\n  transition: background-color 0.2s ease-in-out;\n  border: none;\n  flex-shrink: 0; /* Prevent squashing in flex containers */\n  box-sizing: border-box;\n  margin: 0;\n}\n\n.form-toggle::after {\ncontent: \"\";\nposition: absolute;\ntop: 0.125rem;\nleft: 0.125rem;\nwidth: 1.25rem;\nheight: 1.25rem;\nbackground-color: var(--color-toggle-knob);\nborder-radius: 50%;\nbox-shadow: var(--shadow-sm);\ntransition: transform 0.2s ease-in-out;\n}\n\ninput[type=checkbox].form-toggle:checked {\nbackground-color: var(--color-toggle-bg-checked);\nborder-color: transparent;\n}\n\n.form-toggle:checked::after {\ntransform: translateX(1.25rem);\n}\n\ninput[type=checkbox].form-toggle:focus {\nbox-shadow: 0 0 0 3px var(--color-control-ring);\n}\n\ninput[type=checkbox].form-toggle:disabled {\nopacity: 0.5;\ncursor: not-allowed;\n}\n\n/* Input Group */\n.input-group {\ndisplay: flex;\nposition: relative;\nwidth: 100%;\nalign-items: stretch;\n}\n\n.input-group-text {\ndisplay: flex;\nalign-items: center;\npadding: 0.5rem 0.625rem;\nfont-size: var(--text-sm);\nfont-weight: 400;\nline-height: var(--leading-normal);\ncolor: var(--color-text-secondary);\ntext-align: center;\nwhite-space: nowrap;\nbackground-color: var(--color-bg-secondary);\nborder: 1px solid var(--color-border-light);\nborder-radius: var(--radius-md);\n}\n\n/* Remove margin from labels inside or as input-group-text */\nlabel.input-group-text,\n.form-label.input-group-text,\n.input-group-text label,\n.input-group-text .form-label {\nmargin-bottom: 0;\n}\n\n.input-group .form-input,\n.input-group .form-select {\nflex: 1 1 auto;\nwidth: 1%;\nmin-width: 0;\nborder-radius: var(--radius-md);\n}\n\n.input-group textarea {\nmin-height: auto;\nheight: auto;\n}\n\n.input-group > :not(:first-child) {\nmargin-left: -1px;\nborder-top-left-radius: 0;\nborder-bottom-left-radius: 0;\n}\n\n.input-group > :not(:last-child) {\nborder-top-right-radius: 0;\nborder-bottom-right-radius: 0;\n}\n\n.input-group .form-input:focus,\n.input-group .form-select:focus,\n.input-group .btn-primary:focus,\n.input-group .btn-secondary:focus,\n.input-group .action-btn:focus {\nz-index: 20;\nposition: relative;\n}\n\n.input-group .btn-primary,\n.input-group .btn-secondary,\n.input-group .action-btn {\nposition: relative;\nz-index: 10;\n}\n}",[],[205,347,426,25,528],{"_105":536,"_96":537,"_155":538,"_157":450,"_158":140,"_159":539,"_161":162,"_107":540,"_101":32,"_164":365,"_166":541,"_167":22,"_168":-5,"_169":542,"_99":543},"0ce223ac-e2e9-11f0-bdaa-42dde27851f2","_items.scss","0ce22460-e2e9-11f0-bdaa-42dde27851f2",73,["D",1766815101950],".theme-scope {\n/* Items Component */\n.item {\n  display: flex;\n  flex-direction: column;\n  padding: 1rem;\n  background-color: var(--color-bg-primary);\n  border: 1px solid var(--color-border);\n  border-radius: var(--radius-lg);\n  transition: background-color 0.15s ease, border-color 0.15s ease;\n}\n\n.item:hover {\n  background-color: var(--color-bg-secondary);\n}\n\n.item-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 0.75rem;\n  padding-bottom: 0.75rem;\n  border-bottom: 1px solid var(--color-border);\n}\n\n.item-content {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n}\n\n.item-title {\n  font-weight: var(--font-medium);\n  font-size: var(--text-base);\n  color: var(--color-text-primary);\n  margin-bottom: 0.25rem;\n}\n\n.item-description {\n  font-size: var(--text-sm);\n  color: var(--color-text-secondary);\n  line-height: var(--leading-normal);\n}\n\n.item-actions {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  // margin-top: 0.75rem; // messes with \"Item with Header & Footer\" cards\n}\n\n.item-footer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-top: 0.75rem;\n  padding-top: 0.75rem;\n  border-top: 1px solid var(--color-border);\n  font-size: var(--text-sm);\n  color: var(--color-text-secondary);\n}\n\n/* Item with flex layout (for horizontal items with avatars) */\n.item > .flex {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n}\n\n.item > .flex > .item-content {\n  margin-top: 0;\n}\n}\n",[],[205,347,426,25,537],{"_105":545,"_96":546,"_155":547,"_157":450,"_158":140,"_159":548,"_161":162,"_107":549,"_101":32,"_164":365,"_166":550,"_167":22,"_168":-5,"_169":551,"_99":552},"0cac52e0-e2e9-11f0-8def-42dde27851f2","_lists.scss","0cac540c-e2e9-11f0-8def-42dde27851f2",63,["D",1766815101630],".theme-scope {\n/* Lists */\nul, ol {\nmargin-bottom: 1rem;\npadding-left: 1.5rem;\ncolor: var(--color-text-neutral);\n}\n\nul {\nlist-style-type: disc;\n}\n\nol {\nlist-style-type: decimal;\n}\n\nli {\nmargin-bottom: 0.5rem;\n}\n\nul ul, ol ol {\nmargin-top: 0.5rem;\nmargin-bottom: 0.5rem;\n}\n\n.list-none {\nlist-style-type: none;\npadding-left: 0;\n}\n\n/* Description Lists */\ndl {\nmargin-bottom: 1rem;\n}\n\ndt {\nfont-weight: var(--font-semibold);\ncolor: var(--color-text-primary);\nmargin-bottom: 0.25rem;\n}\n\ndd {\nmargin-left: 1.5rem;\nmargin-bottom: 0.75rem;\ncolor: var(--color-text-secondary);\n}\n}",[],[205,347,426,25,546],{"_105":554,"_96":555,"_155":556,"_157":450,"_158":140,"_159":102,"_161":162,"_107":557,"_101":32,"_164":365,"_166":558,"_167":22,"_168":-5,"_169":559,"_99":560},"0ceaac3e-e2e9-11f0-b941-42dde27851f2","_pagination.scss","0ceaad06-e2e9-11f0-b941-42dde27851f2",["D",1766815102039],".theme-scope {\n  /* Pagination */\n  .pagination {\n    display: flex;\n    align-items: center;\n    justify-content: flex-start; /* Or center depending on pref, usually start or based on container */\n  }\n\n  .pagination-content {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: 0.25rem;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n\n  .pagination-item {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    min-width: 2.25rem;\n    height: 2.25rem;\n    padding: 0 0.75rem;\n    font-size: var(--text-sm);\n    font-weight: var(--font-medium);\n    color: var(--color-text-primary);\n    background-color: transparent;\n    border-radius: var(--radius-md);\n    text-decoration: none;\n    transition: all 0.15s ease-in-out;\n    cursor: pointer;\n\n    &:hover {\n      background-color: var(--color-bg-secondary);\n      color: var(--color-text-primary);\n    }\n\n    &.active {\n      background-color: var(--color-white);\n      color: var(--color-text-primary);\n      border: 1px solid var(--color-border);\n      font-weight: var(--font-semibold);\n      /* Box shadow similar to buttons if needed, or flat */\n      box-shadow: var(--shadow-sm);\n    }\n\n    &.icon-only {\n      padding: 0;\n      width: 2.25rem;\n    }\n  }\n\n  .pagination-previous,\n  .pagination-next {\n    display: inline-flex;\n    align-items: center;\n    gap: 0.5rem;\n    padding-left: 0.75rem;\n    padding-right: 0.75rem;\n    width: auto;\n\n    svg {\n      width: 1rem;\n      height: 1rem;\n    }\n  }\n\n  .pagination-ellipsis {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 2.25rem;\n    height: 2.25rem;\n    color: var(--color-text-muted);\n  }\n}\n",[],[205,347,426,25,555],{"_105":562,"_96":563,"_155":564,"_157":450,"_158":140,"_159":565,"_161":162,"_107":566,"_101":32,"_164":365,"_166":567,"_167":22,"_168":-5,"_169":568,"_99":569},"0c892f7c-e2e9-11f0-b39b-42dde27851f2","_semantic.scss","0c893026-e2e9-11f0-b39b-42dde27851f2",57,["D",1766815101401],"/* ===================================\n   Semantic CSS Classes\n   Replaces common Tailwind utility patterns with themeable classes\n   =================================== */\n\n.theme-scope {\n\n  /* ===================================\n     Section & Module Layout\n     =================================== */\n  \n  /* Section heading - replaces \"text-lg font-semibold mb-4\" */\n  .section-heading {\n    font-size: var(--text-lg);\n    font-weight: var(--font-semibold);\n    color: var(--color-text-primary);\n    margin-bottom: 1rem;\n    line-height: var(--leading-tight);\n  }\n\n  /* Section description - replaces \"text-sm text-gray-500/600 mb-4\" */\n  .section-description {\n    font-size: var(--text-sm);\n    color: var(--color-text-muted);\n    margin-bottom: 1rem;\n  }\n\n  /* Sub-heading - replaces \"text-sm font-medium mb-2\" */\n  .subsection-heading {\n    font-size: var(--text-sm);\n    font-weight: var(--font-medium);\n    color: var(--color-text-secondary);\n    margin-bottom: 0.5rem;\n  }\n\n  /* Caption / small label - replaces \"text-xs text-gray-500\" */\n  .caption {\n    font-size: var(--text-xs);\n    color: var(--color-text-muted);\n  }\n\n  /* Fine print - small muted text for disclaimers */\n  .fine-print {\n    font-size: var(--text-sm);\n    color: var(--color-text-muted);\n  }\n\n  /* ===================================\n     Brand & Hero Typography\n     =================================== */\n  \n  /* Brand text - bold logo typography */\n  .brand-text {\n    font-size: var(--text-xl);\n    font-weight: var(--font-bold);\n    letter-spacing: -0.025em;\n    color: var(--color-text-primary);\n  }\n\n  /* Hero title - large marketing headline */\n  .hero-title {\n    font-size: var(--text-4xl);\n    font-weight: var(--font-extrabold);\n    letter-spacing: -0.025em;\n    color: var(--color-text-primary);\n    line-height: 1.1;\n  }\n\n  @media (min-width: 768px) {\n    .hero-title {\n      font-size: var(--text-5xl);\n    }\n  }\n\n  /* Hero accent - highlighted text in hero */\n  .hero-accent {\n    color: var(--color-primary);\n  }\n\n  /* Hero description - subtitle for hero */\n  .hero-description {\n    font-size: var(--text-lg);\n    color: var(--color-text-secondary);\n  }\n\n  /* Nav link - navigation menu link */\n  .nav-link {\n    display: inline-flex;\n    align-items: center;\n    font-size: var(--text-sm);\n    font-weight: var(--font-medium);\n    color: var(--color-text-secondary);\n    text-decoration: none;\n    transition: color 0.15s ease;\n    \n    &:hover {\n      color: var(--color-text-primary);\n    }\n  }\n\n  /* Footer link */\n  .footer-link {\n    color: var(--color-text-secondary);\n    text-decoration: none;\n    transition: color 0.15s ease;\n    \n    &:hover {\n      color: var(--color-primary);\n    }\n  }\n\n  /* Social link - icon link */\n  .social-link {\n    color: var(--color-text-muted);\n    transition: color 0.15s ease;\n    \n    &:hover {\n      color: var(--color-text-secondary);\n    }\n  }\n\n  /* Badge dark - dark background badge */\n  .badge-dark {\n    background-color: var(--color-text-primary);\n    color: var(--color-white);\n    padding: 0.25rem 0.5rem;\n    border-radius: var(--radius-lg);\n    font-size: var(--text-xs);\n    font-weight: var(--font-medium);\n    display: inline-block;\n  }\n\n  /* Icon placeholder - for placeholder images/icons */\n  .icon-placeholder {\n    color: var(--color-border-default);\n    opacity: 0.6;\n  }\n\n  /* Text/Background accent - uses primary color for branded text */\n  .text-accent {\n    color: var(--color-primary);\n  }\n\n  .bg-accent {\n    background-color: var(--color-primary);\n  }\n\n  .bg-accent-light {\n    background-color: var(--color-primary-ring);\n  }\n\n  .border-accent {\n    border-color: var(--color-primary);\n  }\n\n  /* Loading spinner */\n  .loading-spinner {\n    color: var(--color-primary);\n    animation: spin 1s linear infinite;\n  }\n\n  /* Status dots - small indicator circles */\n  .status-dot {\n    width: 0.5rem;\n    height: 0.5rem;\n    border-radius: 50%;\n  }\n\n  .status-success {\n    background-color: var(--color-success);\n  }\n\n  .status-danger {\n    background-color: var(--color-danger);\n  }\n\n  .status-warning {\n    background-color: var(--color-warning);\n  }\n\n  /* Interactive danger variant */\n  .interactive-danger {\n    &:hover {\n      background-color: var(--color-danger-bg);\n    }\n  }\n\n  /* Ghost button danger variant */\n  .btn-ghost-danger {\n    color: var(--color-danger);\n    \n    &:hover {\n      color: var(--color-danger);\n      background-color: var(--color-danger-bg);\n    }\n  }\n\n  /* ===================================\n     Semantic Text Colors\n     =================================== */\n  \n  .text-success {\n    color: var(--color-success);\n  }\n\n  .text-warning {\n    color: var(--color-warning);\n  }\n\n  .text-danger {\n    color: var(--color-danger);\n  }\n\n  .text-inverse {\n    color: var(--color-white);\n  }\n\n  .text-muted {\n    color: var(--color-text-muted);\n  }\n\n  /* Help text - replaces \"text-sm text-gray-500 mt-1\" */\n  .help-text {\n    font-size: var(--text-sm);\n    color: var(--color-text-muted);\n    margin-top: 0.25rem;\n  }\n\n  /* ===================================\n     Demo / Preview Containers\n     =================================== */\n  \n  /* Demo container - replaces \"p-8 border border-gray-200 rounded-lg bg-gray-50\" */\n  .demo-container {\n    padding: 2rem;\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-lg);\n    background-color: var(--color-bg-muted);\n  }\n\n  /* Demo container with fixed height */\n  .demo-container-tall {\n    padding: 2rem;\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-lg);\n    background-color: var(--color-bg-muted);\n    min-height: 16rem;\n    display: flex;\n    align-items: flex-start;\n    justify-content: center;\n    position: relative;\n    overflow: visible;\n    z-index: 10;\n  }\n\n  /* Demo container smaller variant */\n  .demo-container-sm {\n    padding: 1rem;\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-lg);\n    background-color: var(--color-bg-muted);\n  }\n\n  /* Surface - generic box with bg and border */\n  .surface {\n    background-color: var(--color-bg-primary);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-lg);\n    overflow: hidden;\n  }\n\n  .surface-muted {\n    background-color: var(--color-bg-muted);\n    border: 1px solid var(--color-border);\n    border-radius: var(--radius-lg);\n    overflow: hidden;\n  }\n\n  /* ===================================\n     Text Styles (Semantic)\n     =================================== */\n  \n  /* Primary text - replaces \"text-gray-900\" */\n  .text-primary {\n    color: var(--color-text-primary);\n  }\n\n  /* Secondary text - replaces \"text-gray-700/600\" */\n  .text-secondary {\n    color: var(--color-text-secondary);\n  }\n\n  /* Muted text - replaces \"text-gray-500/400\" */\n  .text-muted {\n    color: var(--color-text-muted);\n  }\n\n  /* Accent text - replaces \"text-blue-600\" */\n  .text-accent {\n    color: var(--color-primary);\n  }\n\n  /* Success text - replaces \"text-green-500/600\" */\n  .text-success {\n    color: var(--color-success);\n  }\n\n  /* Danger/Error text - replaces \"text-red-500/600\" */\n  .text-danger {\n    color: var(--color-danger);\n  }\n\n  /* Warning text - replaces \"text-orange-400/500\" */\n  .text-warning {\n    color: var(--color-warning);\n  }\n\n  /* ===================================\n     Background Styles\n     =================================== */\n  \n  /* Primary bg - replaces \"bg-white\" */\n  .bg-primary {\n    background-color: var(--color-bg-primary);\n  }\n\n  /* Muted bg - replaces \"bg-gray-50/100\" */\n  .bg-muted {\n    background-color: var(--color-bg-muted);\n  }\n\n  /* Secondary bg - replaces \"bg-gray-100/200\" */\n  .bg-secondary {\n    background-color: var(--color-bg-secondary);\n  }\n\n  /* ===================================\n     Interactive Elements\n     =================================== */\n  \n  /* Interactive surface - replaces \"hover:bg-gray-50 transition-colors\" */\n  .interactive {\n    transition: background-color 0.15s ease, color 0.15s ease;\n  }\n\n  .interactive:hover {\n    background-color: var(--color-bg-muted);\n  }\n\n  /* Interactive link - replaces \"text-gray-600 hover:text-gray-900\" */\n  .interactive-link {\n    color: var(--color-text-secondary);\n    transition: color 0.15s ease;\n  }\n\n  .interactive-link:hover {\n    color: var(--color-text-primary);\n  }\n\n  /* Accent link - replaces \"text-gray-600 hover:text-blue-600\" */\n  .accent-link {\n    color: var(--color-text-secondary);\n    transition: color 0.15s ease;\n  }\n\n  .accent-link:hover {\n    color: var(--color-primary);\n  }\n\n  /* ===================================\n     Icons\n     =================================== */\n  \n  /* Icon muted - replaces \"text-gray-400\" on icons */\n  .icon-muted {\n    color: var(--color-text-muted);\n  }\n\n  /* Icon on hover */\n  .icon-interactive {\n    color: var(--color-text-muted);\n    transition: color 0.15s ease;\n  }\n\n  .icon-interactive:hover {\n    color: var(--color-text-secondary);\n  }\n\n  /* Icon success */\n  .icon-success {\n    color: var(--color-success);\n  }\n\n  /* Icon danger */\n  .icon-danger {\n    color: var(--color-danger);\n  }\n\n  /* Icon warning */\n  .icon-warning {\n    color: var(--color-warning);\n  }\n\n  /* Icon accent/primary */\n  .icon-accent {\n    color: var(--color-primary);\n  }\n\n  /* ===================================\n     Border Styles\n     =================================== */\n  \n  /* Default border - replaces \"border border-gray-200\" */\n  // .border-default {\n  //   border: 1px solid var(--color-border);\n  // }\n\n  /* Light border - replaces \"border border-gray-100\" */\n  .border-light {\n    border: 1px solid var(--color-border-light);\n  }\n\n  /* Divider - replaces \"border-t border-gray-200\" */\n  .divider {\n    border-top: 1px solid var(--color-border);\n  }\n\n  .divider-b {\n    border-bottom: 1px solid var(--color-border);\n  }\n\n  /* ===================================\n     Stats / Metrics\n     =================================== */\n  \n  /* Stat box - replaces \"p-3 bg-gray-50 rounded-lg\" */\n  .stat-box {\n    padding: 0.75rem;\n    background-color: var(--color-bg-muted);\n    border-radius: var(--radius-lg);\n  }\n\n  /* Stat label - replaces \"text-xs text-gray-500 uppercase tracking-wide\" */\n  .stat-label {\n    font-size: var(--text-xs);\n    color: var(--color-text-muted);\n    text-transform: uppercase;\n    letter-spacing: var(--tracking-wide);\n  }\n\n  /* Stat value - replaces \"text-2xl font-bold\" */\n  .stat-value {\n    font-size: var(--text-2xl);\n    font-weight: var(--font-bold);\n    color: var(--color-text-primary);\n  }\n\n  /* Stat change positive - replaces \"text-xs text-green-600\" */\n  .stat-change-positive {\n    font-size: var(--text-xs);\n    color: var(--color-success);\n  }\n\n  /* Stat change negative - replaces \"text-xs text-red-600\" */\n  .stat-change-negative {\n    font-size: var(--text-xs);\n    color: var(--color-danger);\n  }\n\n  /* ===================================\n     Navigation Elements\n     =================================== */\n  \n  /* Nav link - replaces \"text-sm font-medium text-gray-600 hover:text-gray-900\" */\n  .nav-link {\n    font-size: var(--text-sm);\n    font-weight: var(--font-medium);\n    color: var(--color-text-secondary);\n    transition: color 0.15s ease;\n    text-decoration: none;\n  }\n\n  .nav-link:hover {\n    color: var(--color-text-primary);\n  }\n\n  /* Brand text - replaces \"text-xl font-bold tracking-tight text-gray-900\" */\n  .brand-text {\n    font-size: var(--text-xl);\n    font-weight: var(--font-bold);\n    letter-spacing: var(--tracking-tight);\n    color: var(--color-text-primary);\n  }\n\n  /* Footer link - replaces \"text-gray-600 hover:text-blue-600\" */\n  .footer-link {\n    color: var(--color-text-secondary);\n    transition: color 0.15s ease;\n    text-decoration: none;\n  }\n\n  .footer-link:hover {\n    color: var(--color-primary);\n  }\n\n  /* Social link - replaces \"text-gray-400 hover:text-gray-600\" */\n  .social-link {\n    color: var(--color-text-muted);\n    transition: color 0.15s ease;\n  }\n\n  .social-link:hover {\n    color: var(--color-text-secondary);\n  }\n\n  /* ===================================\n     Hero / Marketing Sections\n     =================================== */\n  \n  /* Hero title - replaces \"text-4xl md:text-5xl font-extrabold tracking-tight text-gray-900\" */\n  .hero-title {\n    font-size: var(--text-4xl);\n    font-weight: 800;\n    letter-spacing: var(--tracking-tight);\n    color: var(--color-text-primary);\n    line-height: var(--leading-tight);\n  }\n\n  /* Hero accent - replaces \"text-blue-600\" inside hero */\n  .hero-accent {\n    color: var(--color-primary);\n  }\n\n  /* Hero description - replaces \"text-lg text-gray-600\" */\n  .hero-description {\n    font-size: var(--text-lg);\n    color: var(--color-text-secondary);\n  }\n\n  /* Fine print - replaces \"text-sm text-gray-500\" */\n  .fine-print {\n    font-size: var(--text-sm);\n    color: var(--color-text-muted);\n  }\n\n  /* ===================================\n     Panel / Section Styling\n     =================================== */\n  \n  /* Panel header - for accordion, collapsible headers */\n  .panel-header {\n    width: 100%;\n    padding: 0.75rem 1rem;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    background-color: var(--color-bg-primary);\n    border-radius: var(--radius-lg);\n    border-bottom-left-radius: 0;\n    border-bottom-right-radius: 0;\n    transition: background-color 0.15s ease;\n    cursor: pointer;\n  }\n\n  /* Show border-bottom when panel is open (next sibling is visible) */\n  .panel-header:has(+ *:not([style*=\"display: none\"])):not(:has(+ [x-show]:not([style]))) {\n    border-bottom: 1px solid var(--color-border);\n  }\n\n  /* Alternative: when aria-expanded is true */\n  .panel-header[aria-expanded=\"true\"] {\n    border-bottom: 1px solid var(--color-border);\n  }\n\n  .panel-header:hover {\n    background-color: var(--color-bg-muted);\n  }\n\n  .accordion-borderless .panel-header {\n    border-radius: 0;\n    background-color: transparent;\n  }\n\n  .accordion-borderless .panel-header[aria-expanded=\"true\"] {\n    border-bottom: none;\n  }\n\n  .accordion-borderless .panel-header:hover {\n    background-color: var(--color-bg-muted);\n  }\n\n  /* Panel content */\n  .panel-content {\n    padding: 1rem;\n    font-size: var(--text-sm);\n    color: var(--color-text-secondary);\n  }\n\n  /* ===================================\n     Grid Wrappers\n     =================================== */\n  \n  /* Two-column grid - replaces \"grid grid-cols-2 gap-4\" */\n  .grid-2 {\n    display: grid;\n    grid-template-columns: repeat(2, 1fr);\n    gap: 1rem;\n  }\n\n  /* Two-column responsive grid */\n  .grid-2-responsive {\n    display: grid;\n    grid-template-columns: 1fr;\n    gap: 1rem;\n  }\n\n  @media (min-width: 768px) {\n    .grid-2-responsive {\n      grid-template-columns: repeat(2, 1fr);\n    }\n  }\n\n  /* ===================================\n     Focus States\n     =================================== */\n  \n  /* Focus ring - replaces focus:ring-2 focus:ring-blue-500 */\n  .focus-ring:focus {\n    outline: none;\n    box-shadow: 0 0 0 2px var(--color-primary-ring);\n    border-color: var(--color-primary);\n  }\n\n  .focus-ring:focus-visible {\n    outline: none;\n    box-shadow: 0 0 0 2px var(--color-primary-ring);\n    border-color: var(--color-primary);\n  }\n\n  /* ===================================\n     Tooltip\n     =================================== */\n  \n  .tooltip {\n    position: absolute;\n    bottom: 100%;\n    right: 0;\n    margin-bottom: 0.5rem;\n    padding: 0.375rem 0.75rem;\n    font-size: var(--text-xs);\n    color: var(--color-white);\n    background-color: var(--color-text-primary);\n    border-radius: var(--radius-md);\n    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);\n    white-space: nowrap;\n    z-index: 50;\n    pointer-events: none;\n  }\n\n  .tooltip-arrow {\n    position: absolute;\n    top: 100%;\n    right: 0.375rem;\n    margin-top: -0.25rem;\n    border-width: 0.25rem;\n    border-style: solid;\n    border-color: var(--color-text-primary) transparent transparent transparent;\n  }\n\n}\n\n",[],[205,347,426,25,563],{"_105":571,"_96":572,"_155":573,"_157":450,"_158":140,"_159":574,"_161":162,"_107":575,"_101":32,"_164":365,"_166":576,"_167":22,"_168":-5,"_169":577,"_99":578},"0cde13e8-e2e9-11f0-8def-42dde27851f2","_tables.scss","0cde149c-e2e9-11f0-8def-42dde27851f2",72,["D",1766815101958],".theme-scope {\n/* Tables */\ntable {\nwidth: 100%;\nmargin-bottom: 1rem;\n}\n\nth {\npadding: 0.75rem;\nfont-weight: var(--font-semibold);\ntext-align: left;\ncolor: var(--color-text-primary);\nborder-bottom: 1px solid var(--color-border);\n}\n\ntd {\npadding: 0.75rem;\ncolor: var(--color-text-neutral);\nborder-bottom: 1px solid var(--color-border);\n}\n\n/* Remove border on last row */\ntbody tr:last-child td {\nborder-bottom: none;\n}\n\n/* App Table - bordered table with rounded corners */\n.app-table {\n  width: 100%;\n  border-collapse: separate;\n  border-spacing: 0;\n  border: 1px solid var(--color-border);\n  border-radius: var(--radius-lg);\n  overflow: hidden;\n  margin-bottom: 1rem;\n  \n  th, td {\n    border: none;\n    border-bottom: 1px solid var(--color-border);\n  }\n  \n  th {\n    background-color: var(--color-bg-secondary);\n  }\n  \n  /* Remove bottom border from last row */\n  tbody tr:last-child td {\n    border-bottom: none;\n  }\n  \n  /* Add right borders for cell separation (except last cell) */\n  th:not(:last-child),\n  td:not(:last-child) {\n    border-right: 1px solid var(--color-border);\n  }\n}\n\n.data-table td {\n  padding: 0.25rem 1rem;\n}\n\n.data-table th {\n  padding: 0.5rem 1rem;\n  height: 1.3rem;\n}\n\ntr:hover {\nbackground-color: var(--color-bg-secondary);\n}\n\n/* Compact Table (Shadcn-style) */\n.table-compact {\n  border-collapse: collapse;\n  background-color: var(--color-bg-primary);\n  \n  caption {\n    caption-side: bottom;\n    text-align: left;\n    color: var(--color-text-muted);\n    font-size: var(--text-sm);\n    padding: 0.75rem 1rem;\n    margin-top: 0;\n  }\n  \n  thead {\n    background-color: transparent;\n    \n    tr {\n      border-bottom: 1px solid var(--color-border);\n      transition: none;\n      \n      &:hover {\n        background-color: transparent;\n      }\n    }\n    \n    th {\n      height: 3rem;\n      padding: 0.75rem 1rem;\n      text-align: left;\n      font-weight: var(--font-medium);\n      color: var(--color-text-muted);\n      font-size: var(--text-sm);\n      vertical-align: middle;\n      background-color: transparent;\n      border: none;\n      border-bottom: 1px solid var(--color-border);\n      \n      &.text-right {\n        text-align: right;\n      }\n    }\n  }\n  \n  tbody {\n    tr {\n      border-bottom: 1px solid var(--color-border);\n      transition: background-color 0.2s ease;\n      \n      &:hover {\n        background-color: var(--color-bg-muted);\n      }\n      \n      &:last-child {\n        border-bottom: none;\n      }\n    }\n    \n    td {\n      padding: 0.75rem 1rem;\n      vertical-align: middle;\n      border: none;\n      color: var(--color-text-primary);\n      font-size: var(--text-sm);\n    }\n  }\n  \n  tfoot {\n    background-color: var(--color-bg-secondary);\n    border-top: 1px solid var(--color-border);\n    font-weight: var(--font-medium);\n    \n    tr {\n      border: none;\n      \n      &:hover {\n        background-color: var(--color-bg-secondary);\n      }\n    }\n    \n    td {\n      padding: 0.75rem 1rem;\n      border: none;\n      color: var(--color-text-primary);\n      font-size: var(--text-sm);\n    }\n  }\n  \n  .table-caption {\n    caption-side: bottom;\n    margin-top: 0.5rem;\n    padding: 0.75rem 1rem;\n    text-align: center;\n    color: var(--color-text-muted);\n    font-size: var(--text-sm);\n  }\n}\n\n/* Expandable Table (Details/Summary based) */\n.expandable-table-container {\n  font-size: var(--text-sm);\n}\n\n/* Header row - uses flexbox */\n.expandable-table-header-row {\n  display: flex;\n  align-items: center;\n  padding: 0.5rem 1rem;\n  gap: 0.5rem;\n  \n  .exp-col-name { \n    flex: 1; \n    min-width: 0; \n    /* padding-left: 1.25rem; /* account for native marker */\n    padding-left: 0; /* flush left instead */\n  }\n  .exp-col-type { width: 100px; flex-shrink: 0; }\n  .exp-col-status { width: 100px; flex-shrink: 0; }\n  .exp-col-date { width: 110px; flex-shrink: 0; text-align: right; }\n}\n\n/* Details/Summary Row Styling - tight table rows */\n.expandable-row {\n  // border-bottom: 1px solid var(--color-border) !important;\n  border-bottom: none;\n  border-bottom-width: 1px; /* Override .divide-y */\n  --tw-divide-y-reverse: 0; /* Override Tailwind divide */\n  margin-bottom: 0;\n  border-radius: 0; /* Reset default details radius */\n  padding: 0;\n  background: var(--color-white);\n  \n  &:first-child {\n    border-top-left-radius: var(--radius-md);\n    border-top-right-radius: var(--radius-md);\n    \n    summary {\n      border-top-left-radius: var(--radius-md);\n      border-top-right-radius: var(--radius-md);\n    }\n  }\n  \n  &:last-child {\n    border-bottom: 1px solid var(--color-border) !important;\n    border-bottom-width: 1px !important; /* Override .divide-y */\n    border-bottom-left-radius: var(--radius-md);\n    border-bottom-right-radius: var(--radius-md);\n    \n    // summary {\n    //   border-bottom-left-radius: var(--radius-md);\n    //   border-bottom-right-radius: var(--radius-md);\n    // }\n  }\n  \n  /* Reset middle rows to have no radius */\n  &:not(:first-child):not(:last-child) {\n    border-radius: 0;\n    \n    summary {\n      border-radius: 0;\n    }\n  }\n  \n  summary {\n    display: flex;\n    align-items: center;\n    padding: 0.5rem 1rem;\n    gap: 0.5rem;\n    cursor: pointer;\n    transition: background-color 0.15s ease;\n    border-radius: 0; /* Reset default */\n    margin-bottom: 0 !important;\n    \n    &:hover {\n      background-color: var(--color-bg-muted);\n    }\n    \n    .exp-col-name { \n      flex: 1; \n      min-width: 0; \n      overflow: hidden; \n      text-overflow: ellipsis; \n      white-space: nowrap; \n    }\n    .exp-col-type { \n      width: 100px; \n      flex-shrink: 0; \n      overflow: hidden; \n      text-overflow: ellipsis; \n      white-space: nowrap; \n    }\n    .exp-col-status { width: 100px; flex-shrink: 0; }\n    .exp-col-date { \n      width: 110px; \n      flex-shrink: 0; \n      text-align: right; \n      white-space: nowrap; \n      color: var(--color-text-muted); \n    }\n  }\n  \n  &[open] summary {\n    background-color: var(--color-bg-muted);\n    border-bottom: 1px solid var(--color-border);\n  }\n}\n\n/* Expanded Content */\n.expandable-row-content {\n  padding: 1rem 1rem 1rem 2.5rem;\n  // background-color: var(--color-bg-secondary);\n}\n}",[],[205,347,426,25,572],{"_105":580,"_96":581,"_155":582,"_157":450,"_158":140,"_159":583,"_161":162,"_107":584,"_101":32,"_164":365,"_166":585,"_167":22,"_168":-5,"_169":586,"_99":587},"0cdb3ae2-e2e9-11f0-a5e5-42dde27851f2","_tabs.scss","0cdb3b6e-e2e9-11f0-a5e5-42dde27851f2",71,["D",1766815101940],".theme-scope {\n/* Tabs */\n.tab-nav {\npadding: var(--space-tab-y) 0;\nborder-bottom: 1px solid var(--color-border-tab);\nmargin-bottom: 1.5rem;\nposition: relative;\n}\n\n.tab-list {\ndisplay: flex;\ngap: 1rem;\nflex-wrap: wrap;\nfont-size: var(--text-sm);\n}\n\n.tab-button {\nbackground: none;\nborder: none;\ncursor: pointer;\npadding: 0.25rem 0;\nposition: relative;\ncolor: var(--color-tab);\ntext-decoration: none;\ntransition: color 0.15s ease-in-out;\n}\n\n.tab-button:hover {\ncolor: var(--color-tab-active);\n}\n\n.tab-button-active {\ncolor: var(--color-tab-active);\nfont-weight: var(--font-semibold);\n}\n\n.tab-indicator {\nposition: absolute;\nbottom: -0.5rem;\nleft: 0;\nright: 0;\nheight: 2px;\nbackground: var(--color-tab-active);\n}\n\n/* Tab Container (with header) */\n.tab-container {\nborder: 1px solid var(--color-border-tab);\nborder-radius: var(--radius-lg);\noverflow: hidden;\nbackground: var(--color-white);\n}\n\n.tab-container-header {\nbackground: var(--color-bg-light);\nborder-bottom: 1px solid var(--color-border-tab);\ndisplay: flex;\njustify-content: space-between;\nalign-items: center;\npadding: 0 1rem;\n}\n\n.tab-container-nav {\ndisplay: flex;\ngap: 1.5rem;\nfont-size: var(--text-sm);\nheight: 100%;\n}\n\n.tab-container-button {\nheight: 3rem;\nbackground: none;\nborder: none;\ncursor: pointer;\npadding: var(--space-tab-y) 0;\nposition: relative;\ncolor: var(--color-tab);\ntransition: color 0.15s ease-in-out;\n}\n\n.tab-container-button:hover {\ncolor: var(--color-tab-active);\n}\n\n.tab-container-button-active {\ncolor: var(--color-tab-active);\nfont-weight: var(--font-semibold);\n}\n\n.tab-container-indicator {\nposition: absolute;\nbottom: -1px;\nleft: 0;\nright: 0;\nheight: 2px;\nbackground: var(--color-tab-active);\nz-index: 1;\n}\n\n.tab-container-actions {\ndisplay: flex;\ngap: 0.5rem;\nalign-items: center;\n}\n\n.tab-action-button {\nbackground: none;\nborder: none;\ncursor: pointer;\ncolor: var(--color-tab);\npadding: 0.25rem;\ndisplay: flex;\nalign-items: center;\ntransition: color 0.15s ease-in-out;\n}\n\n.tab-action-button:hover {\ncolor: var(--color-tab-active);\n}\n\n.tab-content {\npadding: 1rem 0;\n}\n\n.tab-container-content {\npadding: 0;\n}\n\n/* Button-Style Tabs */\n.tab-buttons {\ndisplay: flex;\nflex-wrap: wrap;\ngap: 0.5rem;\nmargin-bottom: 1.5rem;\n}\n\n.tab-buttons-sm {\ngap: 0.375rem;\nmargin-bottom: 1rem;\n}\n\n.tab-btn {\ndisplay: inline-flex;\nalign-items: center;\njustify-content: center;\npadding: 0.625rem 1.25rem;\nfont-size: 0.9375rem;\nfont-weight: var(--font-medium);\nline-height: var(--leading-normal);\ncolor: var(--color-text-secondary);\nbackground-color: var(--color-bg-secondary);\nborder: 1px solid var(--color-border);\nborder-radius: var(--radius-lg);\ncursor: pointer;\ntransition: all 0.15s ease-in-out;\ntext-decoration: none;\nwhite-space: nowrap;\n}\n\n.tab-btn:hover:not(:disabled) {\ncolor: var(--color-text-primary);\nbackground-color: var(--color-bg-muted);\nborder-color: var(--color-border-light);\n}\n\n.tab-btn:focus {\noutline: none;\nbox-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);\n}\n\n.tab-btn-active {\ncolor: var(--color-primary);\nbackground-color: var(--color-primary-light);\nborder-color: var(--color-primary);\nfont-weight: var(--font-semibold);\n}\n\n.tab-btn-active:hover:not(:disabled) {\ncolor: var(--color-primary-hover);\nbackground-color: var(--color-primary-lighter);\nborder-color: var(--color-primary-hover);\n}\n\n.tab-btn-disabled,\n.tab-btn:disabled {\ncolor: var(--color-text-muted);\nbackground-color: var(--color-bg-secondary);\nborder-color: var(--color-border);\ncursor: not-allowed;\nopacity: 0.6;\n}\n\n/* Small variant */\n.tab-btn-sm {\npadding: 0.375rem 0.875rem;\nfont-size: 0.8125rem;\nborder-radius: var(--radius-md);\n}\n\n/* Button Tab Content Area */\n.tab-btn-content {\npadding: 1rem 0;\n}\n\n/* Modern Rounded Tabs (shadcn-style) */\n.tab-modern-group {\ndisplay: inline-flex;\nbackground-color: var(--color-bg-muted, #f4f4f5);\npadding: 0.25rem;\nborder-radius: var(--radius-lg);\ngap: 0.25rem;\nmargin-bottom: 0.25rem;\n}\n\n.tab-modern {\ndisplay: inline-flex;\nalign-items: center;\njustify-content: center;\npadding: 0.5rem 1rem;\nfont-size: var(--text-sm);\nfont-weight: var(--font-medium);\nline-height: 1.25rem;\ncolor: var(--color-text-secondary, #71717a);\nbackground-color: transparent;\nborder: none;\nborder-radius: var(--radius-md);\ncursor: pointer;\ntransition: all 0.15s ease-in-out;\nwhite-space: nowrap;\n}\n\n.tab-modern:hover:not(.tab-modern-active) {\ncolor: var(--color-text-primary, #18181b);\nbackground-color: rgba(0, 0, 0, 0.03);\n}\n\n.tab-modern-active {\ncolor: var(--color-text-primary, #09090b);\nbackground-color: var(--color-white, #ffffff);\nbox-shadow: var(--shadow-sm);\nfont-weight: var(--font-medium);\n}\n\n.tab-modern:focus {\noutline: none;\nbox-shadow: none;\n}\n\n/* Modern Tab Content */\n.tab-modern-content {\npadding: 0;\n}\n\n.tab-modern-content .text-muted {\ncolor: var(--color-text-secondary, #71717a);\nfont-size: var(--text-sm);\nline-height: var(--leading-normal);\n}\n\n.tab-modern-content .card {\nborder: 1px solid var(--color-border, #e4e4e7);\nborder-radius: var(--radius-lg);\nbackground-color: var(--color-white, #ffffff);\nmax-width: 24rem;\n}\n\n.tab-modern-content .card-body {\npadding: 0rem;\n}\n}",[],[205,347,426,25,581],{"_105":589,"_96":590,"_155":591,"_157":450,"_158":140,"_159":592,"_161":162,"_107":593,"_101":32,"_164":365,"_166":594,"_167":22,"_168":-5,"_169":595,"_99":596},"0c9963ec-e2e9-11f0-8def-42dde27851f2","_toggle-group.scss","0c996496-e2e9-11f0-8def-42dde27851f2",61,["D",1766815101508],".theme-scope {\n  /* Toggle Group - Google Sheets toolbar style */\n  .toggle-group {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: 0;\n    background-color: transparent;\n    border-radius: var(--radius-sm);\n    padding: 0;\n    border: 1px solid #dadce0; /* Google-style light border */\n  }\n\n  .toggle-group-item {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 0;\n    padding: 0.375rem 0.5rem;\n    min-width: 2rem;\n    min-height: 2rem;\n    font-size: var(--text-sm);\n    font-weight: 400;\n    line-height: 1.25rem;\n    color: #5f6368; /* Google gray text */\n    background-color: #ffffff;\n    border: none;\n    border-right: 1px solid #dadce0;\n    cursor: pointer;\n    transition: background-color 0.1s ease, color 0.1s ease;\n    white-space: nowrap;\n    position: relative;\n\n    &:first-child {\n      border-top-left-radius: 0.25rem;\n      border-bottom-left-radius: 0.25rem;\n    }\n\n    &:last-child {\n      border-top-right-radius: 0.25rem;\n      border-bottom-right-radius: 0.25rem;\n      border-right: none;\n    }\n\n    /* Focus styles */\n    &:focus-visible {\n      outline: 2px solid #1a73e8;\n      outline-offset: -2px;\n      z-index: 10;\n    }\n\n    /* Hover styles */\n    &:hover:not(:disabled):not([data-state=\"on\"]) {\n      background-color: #f1f3f4; /* Google subtle gray hover */\n    }\n\n    /* Selected state */\n    &[data-state=\"on\"],\n    &.selected {\n      background-color: #e8f0fe; /* Google blue tint */\n      color: #1967d2; /* Google blue */\n      z-index: 1;\n    }\n    \n    /* Disabled state */\n    &:disabled,\n    &[disabled] {\n      pointer-events: none;\n      opacity: 0.38;\n      color: #80868b;\n    }\n    \n    /* Icons inside */\n    svg, \n    .iconify {\n        width: 1.125rem;\n        height: 1.125rem;\n        flex-shrink: 0;\n    }\n    \n    /* With label and icon */\n    svg + span,\n    .iconify + span {\n        margin-left: 0.375rem;\n    }\n  }\n\n  /* Variants */\n  \n  /* Outline Variant - Borderless style (like Google Docs toolbar without container border) */\n  .toggle-group.toggle-group-outline {\n    background-color: transparent;\n    border: none;\n    padding: 0;\n    gap: 2px; /* Small gap between buttons */\n    \n    .toggle-group-item {\n        border-radius: var(--radius-sm);\n        border: 1px solid transparent;\n        border-right: none;\n        \n        &:first-child {\n            border-top-left-radius: 0.25rem;\n            border-bottom-left-radius: 0.25rem;\n        }\n        \n        &:last-child {\n            border-top-right-radius: 0.25rem;\n            border-bottom-right-radius: 0.25rem;\n        }\n        \n        &:hover:not(:disabled):not([data-state=\"on\"]) {\n            background-color: #f1f3f4;\n        }\n        \n        &[data-state=\"on\"],\n        &.selected {\n            background-color: #e8f0fe;\n            color: #1967d2;\n            border-color: transparent;\n        }\n    }\n  }\n\n  /* Sizes */\n  \n  /* Small */\n  .toggle-group-sm {\n      .toggle-group-item {\n          padding: 0.25rem 0.375rem;\n          min-width: 1.75rem;\n          min-height: 1.75rem;\n          font-size: 0.8125rem;\n          \n          svg, \n          .iconify {\n              width: 1rem;\n              height: 1rem;\n          }\n      }\n  }\n\n  /* Large */\n  .toggle-group-lg {\n      .toggle-group-item {\n          padding: var(--space-input-y) var(--space-input-x);\n          min-width: 2.5rem;\n          min-height: 2.5rem;\n          font-size: 0.9375rem;\n          \n          svg, \n          .iconify {\n              width: 1.25rem;\n              height: 1.25rem;\n          }\n      }\n  }\n  \n  /* Vertical orientation (optional enhancement, not strictly in shadcn basic ex but good to have) */\n  .toggle-group-vertical {\n      flex-direction: column;\n      \n      &.toggle-group-outline {\n          .toggle-group-item {\n              width: 100%;\n              margin-left: 0;\n              margin-top: -1px;\n              border-left: none;\n              border-top: 1px solid transparent;\n              \n              &:first-child {\n                  border-radius: 0.375rem 0.375rem 0 0;\n                  margin-top: 0;\n              }\n              \n              &:last-child {\n                  border-radius: 0 0 0.375rem 0.375rem;\n              }\n          }\n          \n          .toggle-group-item + .toggle-group-item {\n              border-top: 1px solid var(--color-border);\n              border-left: none;\n          }\n      }\n  }\n}\n",[],[205,347,426,25,590],{"_105":598,"_96":599,"_155":600,"_157":450,"_158":140,"_159":601,"_161":162,"_107":602,"_101":32,"_164":365,"_166":603,"_167":22,"_168":-5,"_169":604,"_99":605},"0c8fd70a-e2e9-11f0-a1a6-42dde27851f2","_typography.scss","0c8fd7aa-e2e9-11f0-a1a6-42dde27851f2",59,["D",1766815101432],".theme-scope {\n  /* Typography */\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    font-weight: var(--font-semibold);\n    line-height: var(--leading-tight);\n    color: var(--color-text-primary);\n    letter-spacing: -0.015em; /* Tighter tracking for headings */\n  }\n\n  h1 {\n    font-size: var(--text-h1);\n    margin-bottom: 0.75rem;\n  } /* Reduced size/margin */\n\n  h2 {\n    font-size: var(--text-2xl);\n    margin-bottom: 0.625rem;\n  }\n\n  h3 {\n    font-size: var(--text-xl);\n    margin-bottom: 0.5rem;\n  }\n\n  h4 {\n    font-size: var(--text-lg);\n    margin-bottom: 0.5rem;\n  }\n\n  h5 {\n    font-size: var(--text-base);\n    margin-bottom: 0.375rem;\n  }\n\n  h6 {\n    font-size: var(--text-sm);\n    margin-bottom: 0.25rem;\n  }\n\n  p {\n    margin-bottom: 0.75rem; /* Reduced from 1rem */\n    /* color: var(--color-text-secondary); */\n    color: var(--color-text-primary); /* looks better I think */\n    line-height: 1.6; /* Slightly tighter */\n  }\n\n  strong, b {\n    font-weight: var(--font-semibold);\n    color: var(--color-text-primary);\n  }\n\n  em, i {\n    font-style: italic;\n  }\n\n  /* Typography Utility Classes - Light Gray Display Text */\n  .text-display-xl {\n    font-size: 2.25rem; /* text-4xl */\n    font-weight: var(--font-bold);\n    color: var(--color-gray-300);\n    letter-spacing: -0.025em; /* tracking-tight */\n    line-height: var(--leading-tight);\n  }\n\n  .text-display-lg {\n    font-size: 1.875rem; /* text-3xl */\n    font-weight: var(--font-bold);\n    color: var(--color-gray-300);\n    letter-spacing: -0.025em; /* tracking-tight */\n    line-height: var(--leading-tight);\n  }\n\n  .text-display-md {\n    font-size: var(--text-2xl); /* text-2xl */\n    font-weight: var(--font-bold);\n    color: var(--color-gray-300);\n    letter-spacing: -0.025em; /* tracking-tight */\n    line-height: var(--leading-tight);\n  }\n\n  .text-display-sm {\n    font-size: var(--text-xl); /* text-xl */\n    font-weight: var(--font-bold);\n    color: var(--color-gray-300);\n    letter-spacing: -0.025em; /* tracking-tight */\n    line-height: var(--leading-tight);\n  }\n\n  /* Links */\n  .link,\n  a {\n    color: var(--color-primary);\n    text-decoration: none;\n    transition: color 0.15s ease-in-out;\n  }\n\n  .link:hover,\n  a:hover {\n    color: var(--color-primary-hover);\n    text-decoration: underline;\n  }\n\n  /* Code */\n  code {\n    padding: 0.125rem 0.375rem;\n    background-color: var(--color-code-bg);\n    color: var(--color-code-text);\n    border-radius: var(--radius-sm);\n    font-family: var(--font-mono, ui-monospace, monospace);\n    font-size: 0.875em;\n  }\n\n  pre {\n    padding: 1rem;\n    background-color: var(--color-code-bg-dark);\n    color: var(--color-code-text-dark);\n    border-radius: var(--radius-lg);\n    overflow-x: auto;\n    margin-bottom: 1rem;\n  }\n\n  pre code {\n    padding: 0;\n    background-color: transparent;\n    color: inherit;\n    border-radius: 0;\n    font-size: var(--text-sm);\n  }\n\n  /* Blockquotes */\n  blockquote {\n    padding-left: 1rem;\n    border-left: 4px solid var(--color-border);\n    color: var(--color-text-neutral);\n    font-style: italic;\n    margin-bottom: 1rem;\n  }\n\n  /* Horizontal Rule */\n  hr {\n    border: none;\n    border-top: 1px solid var(--color-border);\n    margin: 1.5rem 0;\n  }\n\n  /* Font Styles */\n  .font-serif {\n      font-family: ui-serif, Georgia, Cambria, \"Times New Roman\", Times, serif;\n  }\n\n  .font-bold {\n  font-weight: var(--font-bold);\n  }\n\n  .italic {\n    font-style: italic;\n  }\n}",[],[205,347,426,25,599],{"_105":607,"_96":608,"_155":609,"_157":450,"_158":140,"_159":610,"_161":162,"_107":611,"_101":32,"_164":365,"_166":612,"_167":22,"_168":-5,"_169":613,"_99":614},"0caed5c4-e2e9-11f0-a5e5-42dde27851f2","_utilities.scss","0caed664-e2e9-11f0-a5e5-42dde27851f2",64,["D",1766815101649],".theme-scope {\n  /* ===================================\n     Design System Utilities\n     \n     NOTE: Standard Tailwind utilities (flex, gap-*, p-*, m-*, text-*, etc.)\n     are provided by Tailwind CDN. This file only contains:\n     1. Semantic color utilities using CSS variables\n     2. Utilities that Tailwind doesn't provide\n     3. Design-system-specific overrides\n     =================================== */\n\n  /* Semantic Color Utilities (using CSS variables) */\n  .color-success { color: var(--color-success); }\n  .color-warning { color: var(--color-warning); }\n  .color-danger { color: var(--color-danger); }\n  .color-info { color: var(--color-primary); }\n  \n  .color-text-primary { color: var(--color-text-primary); }\n  .color-text-secondary { color: var(--color-text-secondary); }\n  .color-text-muted { color: var(--color-text-muted); }\n  \n  .color-bg-primary { background-color: var(--color-bg-primary); }\n  .color-bg-secondary { background-color: var(--color-bg-secondary); }\n  .color-bg-muted { background-color: var(--color-bg-muted); }\n\n  /* Text decoration utilities */\n  .no-underline { text-decoration: none !important; }\n  .hover-no-underline:hover { text-decoration: none !important; }\n\n  /* Force hidden (works even when other display is set) */\n  .hidden { display: none !important; }\n  \n  /* mb-0 override (common need) */\n  .mb-0 { margin-bottom: 0 !important; }\n}\n",[],[205,347,426,25,608],{"_105":616,"_96":617,"_155":618,"_157":450,"_158":140,"_159":619,"_161":162,"_107":620,"_101":32,"_164":365,"_166":621,"_167":22,"_168":-5,"_169":622,"_99":623},"0c8d99d6-e2e9-11f0-a4b5-42dde27851f2","_variables.scss","0c8d9aa8-e2e9-11f0-a4b5-42dde27851f2",58,["D",1766815101431],"/* Import tokens from the tokens folder */\n@use '../tokens' as *;\n\n/* All CSS custom properties are now defined in ../tokens/ \n   This file exists for backwards compatibility and to allow \n   theme-specific overrides */\n",[],[205,347,426,25,617],{"_105":625,"_96":626,"_155":627,"_157":450,"_158":140,"_159":628,"_161":162,"_107":629,"_101":32,"_164":365,"_166":630,"_167":22,"_168":-5,"_169":631,"_99":632},"0c7c208e-e2e9-11f0-a1a6-42dde27851f2","base.scss","0c7c2142-e2e9-11f0-a1a6-42dde27851f2",55,["D",1766815101312],"/* Base Scope - SCSS Nesting */\n\n/* Import variables FIRST so CSS custom properties are defined before use */\n@use '_variables' as *;\n\n/* Import all component partials */\n@use '_base' as *;\n@use '_typography' as *;\n@use '_lists' as *;\n@use '_tables' as *;\n@use '_forms' as *;\n@use '_buttons' as *;\n@use '_cards' as *;\n@use '_accordions' as *;\n@use '_tabs' as *;\n@use '_callouts' as *;\n@use '_details' as *;\n@use '_utilities' as *;\n@use '_badges' as *;\n@use '_components' as *;\n@use '_dropdowns' as *;\n@use '_items' as *;\n@use '_avatars' as *;\n@use '_pagination' as *;\n@use '_code' as *;\n@use '_toast' as *;\n@use '_toggle-group' as *;\n@use '_fields' as *;\n@use '_drawer' as *;\n\n",[],[205,347,426,25,626],{"_105":634,"_96":635,"_155":636,"_157":450,"_158":140,"_159":637,"_161":162,"_107":638,"_101":32,"_164":223,"_166":639,"_167":22,"_168":-5,"_169":640,"_99":641},"0cb14d7c-e2e9-11f0-8def-42dde27851f2","config.js","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
yawnxyz

chat
