[WEB DATA: <span>To implement the requested features in your HTML and JavaScript code, I will add a toggle switch for the </span><span><code>webToggle</code></span><span> functionality and modify the API call to include the specified payload. Below is the updated code with these changes:</span>
<div class=""><pre class=""><div class=""><div><div class="">xml</div></div><div class=""><span style="font-size: inherit; font-family: inherit; background: transparent; color: rgb(197, 200, 198); border-radius: 3px; display: flex; line-height: 1.42857; overflow-x: auto; white-space: pre;"><code style="font-size: inherit; font-family: inherit; line-height: 1.66667; padding: 8px; white-space: pre-wrap;"><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;"><span class="" style="color: rgb(197, 200, 198);">&lt;!</span><span class="" style="color: rgb(197, 200, 198);">DOCTYPE</span><span class="" style="color: rgb(197, 200, 198);"> </span><span class="" style="color: rgb(197, 200, 198);">html</span><span class="" style="color: rgb(197, 200, 198);">&gt;</span><span>
</span></span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;"><span></span><span class="" style="color: rgb(197, 200, 198);">&lt;</span><span class="" style="color: rgb(197, 200, 198);">html</span><span class="" style="color: rgb(197, 200, 198);"> </span><span class="" style="color: rgb(240, 198, 116);">lang</span><span class="" style="color: rgb(197, 200, 198);">=</span><span class="" style="color: rgb(197, 200, 198);">"</span><span class="" style="color: rgb(197, 200, 198);">en</span><span class="" style="color: rgb(197, 200, 198);">"</span><span class="" style="color: rgb(197, 200, 198);">&gt;</span><span>
</span></span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;"><span></span><span class="" style="color: rgb(197, 200, 198);">&lt;</span><span class="" style="color: rgb(197, 200, 198);">head</span><span class="" style="color: rgb(197, 200, 198);">&gt;</span><span>
</span></span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;"><span>    </span><span class="" style="color: rgb(197, 200, 198);">&lt;</span><span class="" style="color: rgb(197, 200, 198);">meta</span><span class="" style="color: rgb(197, 200, 198);"> </span><span class="" style="color: rgb(240, 198, 116);">charset</span><span class="" style="color: rgb(197, 200, 198);">=</span><span class="" style="color: rgb(197, 200, 198);">"</span><span class="" style="color: rgb(197, 200, 198);">UTF-8</span><span class="" style="color: rgb(197, 200, 198);">"</span><span class="" style="color: rgb(197, 200, 198);">&gt;</span><span>
</span></span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;"><span>    </span><span class="" style="color: rgb(197, 200, 198);">&lt;</span><span class="" style="color: rgb(197, 200, 198);">meta</span><span class="" style="color: rgb(197, 200, 198);"> </span><span class="" style="color: rgb(240, 198, 116);">name</span><span class="" style="color: rgb(197, 200, 198);">=</span><span class="" style="color: rgb(197, 200, 198);">"</span><span class="" style="color: rgb(197, 200, 198);">viewport</span><span class="" style="color: rgb(197, 200, 198);">"</span><span class="" style="color: rgb(197, 200, 198);"> </span><span class="" style="color: rgb(240, 198, 116);">content</span><span class="" style="color: rgb(197, 200, 198);">=</span><span class="" style="color: rgb(197, 200, 198);">"</span><span class="" style="color: rgb(197, 200, 198);">width=device-width, initial-scale=1.0</span><span class="" style="color: rgb(197, 200, 198);">"</span><span class="" style="color: rgb(197, 200, 198);">&gt;</span><span>
</span></span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;"><span>    </span><span class="" style="color: rgb(197, 200, 198);">&lt;</span><span class="" style="color: rgb(197, 200, 198);">title</span><span class="" style="color: rgb(197, 200, 198);">&gt;</span><span>KairoChat - AI Conversations</span><span class="" style="color: rgb(197, 200, 198);">&lt;/</span><span class="" style="color: rgb(197, 200, 198);">title</span><span class="" style="color: rgb(197, 200, 198);">&gt;</span><span>
</span></span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;"><span>    </span><span class="" style="color: rgb(197, 200, 198);">&lt;</span><span class="" style="color: rgb(197, 200, 198);">link</span><span class="" style="color: rgb(197, 200, 198);"> </span><span class="" style="color: rgb(240, 198, 116);">href</span><span class="" style="color: rgb(197, 200, 198);">=</span><span class="" style="color: rgb(197, 200, 198);">"</span><span class="" style="color: rgb(197, 200, 198);">https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&amp;display=swap</span><span class="" style="color: rgb(197, 200, 198);">"</span><span class="" style="color: rgb(197, 200, 198);"> </span><span class="" style="color: rgb(240, 198, 116);">rel</span><span class="" style="color: rgb(197, 200, 198);">=</span><span class="" style="color: rgb(197, 200, 198);">"</span><span class="" style="color: rgb(197, 200, 198);">stylesheet</span><span class="" style="color: rgb(197, 200, 198);">"</span><span class="" style="color: rgb(197, 200, 198);">&gt;</span><span>
</span></span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;"><span>    </span><span class="" style="color: rgb(197, 200, 198);">&lt;</span><span class="" style="color: rgb(197, 200, 198);">script</span><span class="" style="color: rgb(197, 200, 198);"> </span><span class="" style="color: rgb(240, 198, 116);">src</span><span class="" style="color: rgb(197, 200, 198);">=</span><span class="" style="color: rgb(197, 200, 198);">"</span><span class="" style="color: rgb(197, 200, 198);">https://cdn.jsdelivr.net/npm/marked/marked.min.js</span><span class="" style="color: rgb(197, 200, 198);">"</span><span class="" style="color: rgb(197, 200, 198);">&gt;</span><span class="" style="color: rgb(197, 200, 198);">&lt;/</span><span class="" style="color: rgb(197, 200, 198);">script</span><span class="" style="color: rgb(197, 200, 198);">&gt;</span><span>
</span></span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;"><span>    </span><span class="" style="color: rgb(197, 200, 198);">&lt;</span><span class="" style="color: rgb(197, 200, 198);">style</span><span class="" style="color: rgb(197, 200, 198);">&gt;</span><span>
</span></span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">        :root {
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">            --bg-primary: #1a1a1a;
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">            --bg-secondary: #252525;
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">            --text-primary: #ffffff;
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">            --text-secondary: #b0b0b0;
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">            --accent-primary: #4caf50;
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">            --accent-secondary: #45a049;
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">            --error: #f44336;
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">            --shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">        }
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">        
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">        * {
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">            margin: 0;
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">            padding: 0;
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">            box-sizing: border-box;
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">        }
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">        
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">        body {
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">            font-family: 'Roboto', sans-serif;
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">            background-color: var(--bg-primary);
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">            color: var(--text-primary);
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">            line-height: 1.6;
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">        }
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">        
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">        .app-container {
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">            display: flex;
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">            height: 100vh;
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">        }
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">        
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">        .sidebar {
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">            width: 250px;
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">            background-color: var(--bg-secondary);
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">            padding: 1rem;
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">            display: flex;
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">            flex-direction: column;
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">        }
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">        
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">        .main-content {
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">            flex: 1;
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">            display: flex;
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">            flex-direction: column;
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">            overflow: hidden;
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">        }
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">        
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">        h1 {
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">            font-size: 1.5rem;
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">            font-weight: 500;
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">            margin-bottom: 1rem;
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">            color: var(--accent-primary);
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">        }
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">        
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">        button {
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">            background-color: var(--accent-primary);
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">            color: var(--text-primary);
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">            border: none;
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">            padding: 0.5rem 1rem;
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">            border-radius: 4px;
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">            font-size: 0.9rem;
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">            font-weight: 500;
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">            cursor: pointer;
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">            transition: background-color 0.2s;
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">        }
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">        
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">        button:hover {
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">            background-color: var(--accent-secondary);
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">        }
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">        
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">        #new-chat {
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">            margin-bottom: 1rem;
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">        }
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">        
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">        #conversation-list {
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">            flex: 1;
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">            overflow-y: auto;
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">        }
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">        
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">        .conversation-item {
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">            padding: 0.5rem;
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">            margin-bottom: 0.5rem;
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">            background-color: var(--bg-primary);
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">            border-radius: 4px;
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">            cursor: pointer;
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">            display: flex;
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">            justify-content: space-between;
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">            align-items: center;
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">            transition: background-color 0.2s;
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">        }
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">        
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">        .conversation-item:hover {
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">            background-color: var(--accent-secondary);
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">        }
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">        
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">        .conversation-item.active {
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">            background-color: var(--accent-primary);
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">            font-weight: 500;
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">        }
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">        
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">        .delete-conversation {
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">            background-color: transparent;
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">            color: var(--text-secondary);
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">            padding: 0.25rem;
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">        }
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">        
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">        .delete-conversation:hover {
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">            color: var(--error);
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">        }
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">        
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">        #chat-container {
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">            flex: 1;
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">            overflow-y: auto;
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">            padding: 1rem;
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">        }
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">        /* Additional styles for toggle switch */
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">        .toggle-container {
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">          display:flex; 
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">          align-items:center; 
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">          margin-top:.5rem; 
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">          color:white; 
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">          font-size:.9rem
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">        }
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;"><span>    </span><span class="" style="color: rgb(197, 200, 198);">&lt;/</span><span class="" style="color: rgb(197, 200, 198);">style</span><span class="" style="color: rgb(197, 200, 198);">&gt;</span><span>
</span></span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;"><span></span><span class="" style="color: rgb(197, 200, 198);">&lt;/</span><span class="" style="color: rgb(197, 200, 198);">head</span><span class="" style="color: rgb(197, 200, 198);">&gt;</span><span>
</span></span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;"><span></span><span class="" style="color: rgb(197, 200, 198);">&lt;</span><span class="" style="color: rgb(197, 200, 198);">body</span><span class="" style="color: rgb(197, 200, 198);">&gt;</span><span>
</span></span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;"><span>    </span><span class="" style="color: rgb(197, 200, 198);">&lt;</span><span class="" style="color: rgb(197, 200, 198);">div</span><span class="" style="color: rgb(197, 200, 198);"> </span><span class="" style="color: rgb(240, 198, 116);">class</span><span class="" style="color: rgb(197, 200, 198);">=</span><span class="" style="color: rgb(197, 200, 198);">"</span><span class="" style="color: rgb(197, 200, 198);">app-container</span><span class="" style="color: rgb(197, 200, 198);">"</span><span class="" style="color: rgb(197, 200, 198);">&gt;</span><span>
</span></span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;"><span>        </span><span class="" style="color: rgb(197, 200, 198);">&lt;</span><span class="" style="color: rgb(197, 200, 198);">aside</span><span class="" style="color: rgb(197, 200, 198);"> </span><span class="" style="color: rgb(240, 198, 116);">class</span><span class="" style="color: rgb(197, 200, 198);">=</span><span class="" style="color: rgb(197, 200, 198);">"</span><span class="" style="color: rgb(197, 200, 198);">sidebar</span><span class="" style="color: rgb(197, 200, 198);">"</span><span class="" style="color: rgb(197, 200, 198);">&gt;</span><span>
</span></span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;"><span>            </span><span class="" style="color: rgb(197, 200, 198);">&lt;</span><span class="" style="color: rgb(197, 200, 198);">h1</span><span class="" style="color: rgb(197, 200, 198);">&gt;</span><span>KairoChat</span><span class="" style="color: rgb(197, 200, 198);">&lt;/</span><span class="" style="color: rgb(197, 200, 198);">h1</span><span class="" style="color: rgb(197, 200, 198);">&gt;</span><span>
</span></span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;"><span>            </span><span class="" style="color: rgb(197, 200, 198);">&lt;</span><span class="" style="color: rgb(197, 200, 198);">button</span><span class="" style="color: rgb(197, 200, 198);"> </span><span class="" style="color: rgb(240, 198, 116);">id</span><span class="" style="color: rgb(197, 200, 198);">=</span><span class="" style="color: rgb(197, 200, 198);">"</span><span class="" style="color: rgb(197, 200, 198);">new-chat</span><span class="" style="color: rgb(197, 200, 198);">"</span><span class="" style="color: rgb(197, 200, 198);">&gt;</span><span>New Chat</span><span class="" style="color: rgb(197, 200, 198);">&lt;/</span><span class="" style="color: rgb(197, 200, 198);">button</span><span class="" style="color: rgb(197, 200, 198);">&gt;</span><span>
</span></span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">            
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;"><span>             </span><span class="" style="color: rgb(150, 152, 150); font-family: inherit; font-style: italic;">&lt;!-- Web Toggle Switch --&gt;</span><span>
</span></span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;"><span>             </span><span class="" style="color: rgb(197, 200, 198);">&lt;</span><span class="" style="color: rgb(197, 200, 198);">div</span><span class="" style="color: rgb(197, 200, 198);"> </span><span class="" style="color: rgb(240, 198, 116);">class</span><span class="" style="color: rgb(197, 200, 198);">=</span><span class="" style="color: rgb(197, 200, 198);">"</span><span class="" style="color: rgb(197, 200, 198);">toggle-container</span><span class="" style="color: rgb(197, 200, 198);">"</span><span class="" style="color: rgb(197, 200, 198);">&gt;</span><span>
</span></span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;"><span>                </span><span class="" style="color: rgb(197, 200, 198);">&lt;</span><span class="" style="color: rgb(197, 200, 198);">label</span><span class="" style="color: rgb(197, 200, 198);"> </span><span class="" style="color: rgb(240, 198, 116);">for</span><span class="" style="color: rgb(197, 200, 198);">=</span><span class="" style="color: rgb(197, 200, 198);">"</span><span class="" style="color: rgb(197, 200, 198);">web-toggle</span><span class="" style="color: rgb(197, 200, 198);">"</span><span class="" style="color: rgb(197, 200, 198);">&gt;</span><span>Web Toggle:</span><span class="" style="color: rgb(197, 200, 198);">&lt;/</span><span class="" style="color: rgb(197, 200, 198);">label</span><span class="" style="color: rgb(197, 200, 198);">&gt;</span><span>
</span></span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;"><span>                </span><span class="" style="color: rgb(197, 200, 198);">&lt;</span><span class="" style="color: rgb(197, 200, 198);">input</span><span class="" style="color: rgb(197, 200, 198);"> </span><span class="" style="color: rgb(240, 198, 116);">type</span><span class="" style="color: rgb(197, 200, 198);">=</span><span class="" style="color: rgb(197, 200, 198);">"</span><span class="" style="color: rgb(197, 200, 198);">checkbox</span><span class="" style="color: rgb(197, 200, 198);">"</span><span class="" style="color: rgb(197, 200, 198);"> </span><span class="" style="color: rgb(240, 198, 116);">id</span><span class="" style="color: rgb(197, 200, 198);">=</span><span class="" style="color: rgb(197, 200, 198);">"</span><span class="" style="color: rgb(197, 200, 198);">web-toggle</span><span class="" style="color: rgb(197, 200, 198);">"</span><span class="" style="color: rgb(197, 200, 198);">&gt;</span><span>
</span></span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;"><span>             </span><span class="" style="color: rgb(197, 200, 198);">&lt;/</span><span class="" style="color: rgb(197, 200, 198);">div</span><span class="" style="color: rgb(197, 200, 198);">&gt;</span><span>
</span></span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;"><span>             </span><span class="" style="color: rgb(197, 200, 198);">&lt;</span><span class="" style="color: rgb(197, 200, 198);">div</span><span class="" style="color: rgb(197, 200, 198);"> </span><span class="" style="color: rgb(240, 198, 116);">id</span><span class="" style="color: rgb(197, 200, 198);">=</span><span class="" style="color: rgb(197, 200, 198);">"</span><span class="" style="color: rgb(197, 200, 198);">conversation-list</span><span class="" style="color: rgb(197, 200, 198);">"</span><span class="" style="color: rgb(197, 200, 198);">&gt;</span><span class="" style="color: rgb(197, 200, 198);">&lt;/</span><span class="" style="color: rgb(197, 200, 198);">div</span><span class="" style="color: rgb(197, 200, 198);">&gt;</span><span>
</span></span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;"><span>         </span><span class="" style="color: rgb(197, 200, 198);">&lt;/</span><span class="" style="color: rgb(197, 200, 198);">aside</span><span class="" style="color: rgb(197, 200, 198);">&gt;</span><span>
</span></span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;"><span>         </span><span class="" style="color: rgb(197, 200, 198);">&lt;</span><span class="" style="color: rgb(197, 200, 198);">main</span><span class="" style="color: rgb(197, 200, 198);"> </span><span class="" style="color: rgb(240, 198, 116);">class</span><span class="" style="color: rgb(197, 200, 198);">=</span><span class="" style="color: rgb(197, 200, 198);">"</span><span class="" style="color: rgb(197, 200, 198);">main-content</span><span class="" style="color: rgb(197, 200, 198);">"</span><span class="" style="color: rgb(197, 200, 198);">&gt;</span><span>
</span></span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;"><span>             </span><span class="" style="color: rgb(197, 200, 198);">&lt;</span><span class="" style="color: rgb(197, 200, 198);">div</span><span class="" style="color: rgb(197, 200, 198);"> </span><span class="" style="color: rgb(240, 198, 116);">id</span><span class="" style="color: rgb(197, 200, 198);">=</span><span class="" style="color: rgb(197, 200, 198);">"</span><span class="" style="color: rgb(197, 200, 198);">chat-container</span><span class="" style="color: rgb(197, 200, 198);">"</span><span class="" style="color: rgb(197, 200, 198);">&gt;</span><span class="" style="color: rgb(197, 200, 198);">&lt;/</span><span class="" style="color: rgb(197, 200, 198);">div</span><span class="" style="color: rgb(197, 200, 198);">&gt;</span><span>
</span></span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;"><span>             </span><span class="" style="color: rgb(197, 200, 198);">&lt;</span><span class="" style="color: rgb(197, 200, 198);">div</span><span class="" style="color: rgb(197, 200, 198);"> </span><span class="" style="color: rgb(240, 198, 116);">id</span><span class="" style="color: rgb(197, 200, 198);">=</span><span class="" style="color: rgb(197, 200, 198);">"</span><span class="" style="color: rgb(197, 200, 198);">input-container</span><span class="" style="color: rgb(197, 200, 198);">"</span><span class="" style="color: rgb(197, 200, 198);">&gt;</span><span>
</span></span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;"><span>                 </span><span class="" style="color: rgb(197, 200, 198);">&lt;</span><span class="" style="color: rgb(197, 200, 198);">input</span><span class="" style="color: rgb(197, 200, 198);"> </span><span class="" style="color: rgb(240, 198, 116);">type</span><span class="" style="color: rgb(197, 200, 198);">=</span><span class="" style="color: rgb(197, 200, 198);">"</span><span class="" style="color: rgb(197, 200, 198);">text</span><span class="" style="color: rgb(197, 200, 198);">"</span><span class="" style="color: rgb(197, 200, 198);"> </span><span class="" style="color: rgb(240, 198, 116);">id</span><span class="" style="color: rgb(197, 200, 198);">=</span><span class="" style="color: rgb(197, 200, 198);">"</span><span class="" style="color: rgb(197, 200, 198);">user-input</span><span class="" style="color: rgb(197, 200, 198);">"</span><span class="" style="color: rgb(197, 200, 198);"> </span><span class="" style="color: rgb(240, 198, 116);">placeholder</span><span class="" style="color: rgb(197, 200, 198);">=</span><span class="" style="color: rgb(197, 200, 198);">"</span><span class="" style="color: rgb(197, 200, 198);">Type your message...</span><span class="" style="color: rgb(197, 200, 198);">"</span><span class="" style="color: rgb(197, 200, 198);">&gt;</span><span>
</span></span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;"><span>                 </span><span class="" style="color: rgb(197, 200, 198);">&lt;</span><span class="" style="color: rgb(197, 200, 198);">button</span><span class="" style="color: rgb(197, 200, 198);"> </span><span class="" style="color: rgb(240, 198, 116);">id</span><span class="" style="color: rgb(197, 200, 198);">=</span><span class="" style="color: rgb(197, 200, 198);">"</span><span class="" style="color: rgb(197, 200, 198);">send-message</span><span class="" style="color: rgb(197, 200, 198);">"</span><span class="" style="color: rgb(197, 200, 198);">&gt;</span><span>Send</span><span class="" style="color: rgb(197, 200, 198);">&lt;/</span><span class="" style="color: rgb(197, 200, 198);">button</span><span class="" style="color: rgb(197, 200, 198);">&gt;</span><span>
</span></span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;"><span>             </span><span class="" style="color: rgb(197, 200, 198);">&lt;/</span><span class="" style="color: rgb(197, 200, 198);">div</span><span class="" style="color: rgb(197, 200, 198);">&gt;</span><span>
</span></span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;"><span>         </span><span class="" style="color: rgb(197, 200, 198);">&lt;/</span><span class="" style="color: rgb(197, 200, 198);">main</span><span class="" style="color: rgb(197, 200, 198);">&gt;</span><span>
</span></span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;"><span>     </span><span class="" style="color: rgb(197, 200, 198);">&lt;/</span><span class="" style="color: rgb(197, 200, 198);">div</span><span class="" style="color: rgb(197, 200, 198);">&gt;</span><span>
</span></span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;"><span>     </span><span class="" style="color: rgb(197, 200, 198);">&lt;</span><span class="" style="color: rgb(197, 200, 198);">script</span><span class="" style="color: rgb(197, 200, 198);">&gt;</span><span>
</span></span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">         const chatContainer = document.getElementById('chat-container');
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">         const userInput = document.getElementById('user-input');
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">         const sendButton = document.getElementById('send-message');
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">         const newChatButton = document.getElementById('new-chat');
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">         const conversationList = document.getElementById('conversation-list');
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">         const webToggle = document.getElementById('web-toggle');
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">         let currentConversationId = null; 
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">         let conversations = {}; 
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">         let isTyping = false; 
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">         function loadConversations() { 
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">             const savedConversations = localStorage.getItem('conversations'); 
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">             if (savedConversations) { 
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">                 conversations = JSON.parse(savedConversations); 
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">                 updateConversationList(); 
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">             } 
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">         }
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">         function saveConversations() { 
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">             localStorage.setItem('conversations', JSON.stringify(conversations)); 
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">             updateConversationList(); 
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">         }
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">         function updateConversationList() { 
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">             conversationList.innerHTML = ''; 
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">             Object.keys(conversations) 
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">                 .sort((a, b) =&gt; b - a) 
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">                 .forEach(id =&gt; { 
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">                     const item = document.createElement('div'); 
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">                     item.className = 'conversation-item'; 
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">                     if (id === currentConversationId) { 
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">                         item.classList.add('active'); 
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">                     } 
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">                     item.innerHTML = `                         
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;"><span>                         </span><span class="" style="color: rgb(197, 200, 198);">&lt;</span><span class="" style="color: rgb(197, 200, 198);">span</span><span class="" style="color: rgb(197, 200, 198);">&gt;</span><span>Chat ${id.slice(0, 8)}</span><span class="" style="color: rgb(197, 200, 198);">&lt;/</span><span class="" style="color: rgb(197, 200, 198);">span</span><span class="" style="color: rgb(197, 200, 198);">&gt;</span><span>                         
</span></span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;"><span>                         </span><span class="" style="color: rgb(197, 200, 198);">&lt;</span><span class="" style="color: rgb(197, 200, 198);">button</span><span class="" style="color: rgb(197, 200, 198);"> </span><span class="" style="color: rgb(240, 198, 116);">class</span><span class="" style="color: rgb(197, 200, 198);">=</span><span class="" style="color: rgb(197, 200, 198);">"</span><span class="" style="color: rgb(197, 200, 198);">delete-conversation</span><span class="" style="color: rgb(197, 200, 198);">"</span><span class="" style="color: rgb(197, 200, 198);">&gt;</span><span>×</span><span class="" style="color: rgb(197, 200, 198);">&lt;/</span><span class="" style="color: rgb(197, 200, 198);">button</span><span class="" style="color: rgb(197, 200, 198);">&gt;</span><span>                     
</span></span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">                     `; 
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">                     item.querySelector('span').addEventListener('click', () =&gt; loadConversation(id)); 
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">                     item.querySelector('.delete-conversation').addEventListener('click', (e) =&gt; {                         
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">                         e.stopPropagation();                         
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">                         deleteConversation(id);                     
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">                     });                     
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">                     conversationList.appendChild(item);                 
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">                 });         
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">         }
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">         function loadConversation(id) {             
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">             currentConversationId = id;             
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">             chatContainer.innerHTML = conversations[id];             
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">             chatContainer.scrollTop = chatContainer.scrollHeight;             
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">             updateConversationList();         
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">         }
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">         function deleteConversation(id) {             
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">             delete conversations[id];             
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">             saveConversations();             
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">             if (currentConversationId === id) {                 
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">                 currentConversationId = null;                 
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">                 chatContainer.innerHTML = '';             
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">             }             
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">             updateConversationList();         
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">         }
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">         function startNewChat() {             
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">             currentConversationId = null;             
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">             chatContainer.innerHTML = '';             
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">             updateConversationList();         
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">         }
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">         async function sendMessage() {             
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">             const message = userInput.value.trim();             
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">             if (!message || isTyping) return;              
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">             isTyping = true;             
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">             userInput.value = '';              
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">             appendMessage(message, 'user-message');              
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">             const aiMessage = document.createElement('div');             
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">             aiMessage.className = 'message ai-message';             
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;"><span>             aiMessage.innerHTML = '</span><span class="" style="color: rgb(197, 200, 198);">&lt;</span><span class="" style="color: rgb(197, 200, 198);">span</span><span class="" style="color: rgb(197, 200, 198);"> </span><span class="" style="color: rgb(240, 198, 116);">class</span><span class="" style="color: rgb(197, 200, 198);">=</span><span class="" style="color: rgb(197, 200, 198);">"</span><span class="" style="color: rgb(197, 200, 198);">typing-indicator</span><span class="" style="color: rgb(197, 200, 198);">"</span><span class="" style="color: rgb(197, 200, 198);">&gt;</span><span class="" style="color: rgb(197, 200, 198);">&lt;/</span><span class="" style="color: rgb(197, 200, 198);">span</span><span class="" style="color: rgb(197, 200, 198);">&gt;</span><span>';             
</span></span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">             chatContainer.appendChild(aiMessage);             
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">             chatContainer.scrollTop = chatContainer.scrollHeight;              
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">             try {                 
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">                 const payload = { prompt: message, model:'gpt-4o', cvid : currentConversationId, web:webToggle.checked };                 
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">                 const response = await fetch(`https://kairo-api.kys.gay/api/gpt`, {                     
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">                     method:'POST',                     
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">                     headers:{ 'Content-Type': 'application/json' },                     
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">                     body : JSON.stringify(payload)                 
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">                 });                 
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">                 const data = await response.json();                                  
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">                 currentConversationId = data.conversation_id;                 
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">                 aiMessage.innerHTML = '';                 
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">                 await typeEffect(data.message, aiMessage);             
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">             } catch (error) {                 
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">                 aiMessage.textContent = 'Error: Unable to get a response. Please try again.';             
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">             } finally {                 
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">                 isTyping = false;                 
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">                 saveConversation();             
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">             }         
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">         }
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">         function appendMessage(content, className) {             
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">             const messageDiv = document.createElement('div');             
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">             messageDiv.className = `message ${className}`;             
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">             messageDiv.textContent = content;             
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">             chatContainer.appendChild(messageDiv);             
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">             chatContainer.scrollTop = chatContainer.scrollHeight;         
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">         }
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">         async function typeEffect(text, element, speed=20) {             
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">              let i=0;              
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">              while(i&lt;text.length){                  
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">                  await new Promise(resolve=&gt; setTimeout(resolve,speed));                  
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">                  element.innerHTML=marked.parse(text.slice(0,i+1));                  
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">                  chatContainer.scrollTop=chatContainer.scrollHeight;                  
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">                  i++;              
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">              }         
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">          }
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">          function saveConversation() {             
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">              conversations[currentConversationId] = chatContainer.innerHTML;             
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">              saveConversations();         
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">          }
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">          sendButton.addEventListener('click', sendMessage);         
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">          userInput.addEventListener('keypress', (e) =&gt; {             
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">              if (e.key === 'Enter') sendMessage();         
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">          });         
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">          newChatButton.addEventListener('click', startNewChat);         
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;">          loadConversations();     
</span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;"><span>     </span><span class="" style="color: rgb(197, 200, 198);">&lt;/</span><span class="" style="color: rgb(197, 200, 198);">script</span><span class="" style="color: rgb(197, 200, 198);">&gt;</span><span> 
</span></span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;"><span></span><span class="" style="color: rgb(197, 200, 198);">&lt;/</span><span class="" style="color: rgb(197, 200, 198);">body</span><span class="" style="color: rgb(197, 200, 198);">&gt;</span><span> 
</span></span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;"><span></span><span class="" style="color: rgb(197, 200, 198);">&lt;/</span><span class="" style="color: rgb(197, 200, 198);">html</span><span class="" style="color: rgb(197, 200, 198);">&gt;</span><span>
</span></span><span style="opacity: 1; font-size: inherit; line-height: 1.42857; color: rgb(197, 200, 198); background-color: transparent; flex-shrink: 0; padding: 8px; text-align: right; user-select: none;"></span></code></span><button aria-label="Copy Code" type="button" class=""><svg class="" viewBox="0 0 384 512" width="16pt" height="16pt" fill="#c5c8c6"><path d="M280 240H168c-4.4 0-8 3.6-8 8v16c0 4.4 3.6 8 8 8h112c4.4 0 8-3.6 8-8v-16c0-4.4-3.6-8-8-8zm0 96H168c-4.4 0-8 3.6-8 8v16c0 4.4 3.6 8 8 8h112c4.4 0 8-3.6 8-8v-16c0-4.4-3.6-8-8-8zM112 232c-13.3 0-24 10.7-24 24s10.7 24 24 24 24-10.7 24-24-10.7-24-24-24zm0 96c-13.3 0-24 10.7-24 24s10.7 24 24 24 24-10.7 24-24-10.7-24-24-24zM336 64h-80c0-35.3-28.7-64-64-64s-64 28.7-64 64H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zM192 48c8.8 0 16 7.2 16 16s-7.2 16-16 16-16-7.2-16-16 7.2-16 16-16zm144 408c0 4.4-3.6 8-8 8H56c-4.4 0-8-3.6-8-8V120c0-4.4 3.6-8 8-8h40v32c0 8.8 7.2 16 16 16h160c8.8 0 16-7.2 16-16v-32h40c4.4 0 8 3.6 8 8v336z"></path></svg></button></div></div></pre></div>
<h2 class="">Key Changes Made:</h2>
<ul class="">
<li index="0"><span>
</span><span><span><strong>Web Toggle</strong></span><span>:</span></span><span>
</span><span><ul class="">
<li index="0"><span>Added a checkbox input for </span><span><code>webToggle</code></span><span> in the sidebar.</span></li>
<li index="1"><span>The state of this checkbox is included in the payload sent to the API.</span></li>
</ul></span><span>
</span></li>
<li index="1"><span>
</span><span><span><strong>API Call Modification</strong></span><span>:</span></span><span>
</span><span><ul class="">
<li index="0"><span>Changed the fetch request to use a POST method with the specified payload structure.</span></li>
</ul></span><span>
</span></li>
</ul>
<span>This implementation will allow you to toggle the </span><span><code>web</code></span><span> parameter when sending messages to the API while maintaining the Roboto font throughout the application.</span>]

user: use the roboto font here and in the site use the api https://kairo-api.kys.gay/api/gpt and send a post to it with payload: const payload = { prompt: msg, model: 'gpt-4o', cvid: id, web: webToggle.checked }; and add a webtoggle where if thats toggled then true and if not on then false, it returns the same json and stuff:  <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>KairoChat - AI Conversations</title>     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">     <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>     <style>         :root {             --bg-primary: #1a1a1a;             --bg-secondary: #252525;             --text-primary: #ffffff;             --text-secondary: #b0b0b0;             --accent-primary: #4caf50;             --accent-secondary: #45a049;             --error: #f44336;             --shadow: 0 2px 10px rgba(0, 0, 0, 0.1);         }          * {             margin: 0;             padding: 0;             box-sizing: border-box;         }          body {             font-family: 'Roboto', sans-serif;             background-color: var(--bg-primary);             color: var(--text-primary);             line-height: 1.6;         }          .app-container {             display: flex;             height: 100vh;         }          .sidebar {             width: 250px;             background-color: var(--bg-secondary);             padding: 1rem;             display: flex;             flex-direction: column;         }          .main-content {             flex: 1;             display: flex;             flex-direction: column;             overflow: hidden;         }          h1 {             font-size: 1.5rem;             font-weight: 500;             margin-bottom: 1rem;             color: var(--accent-primary);         }          button {             background-color: var(--accent-primary);             color: var(--text-primary);             border: none;             padding: 0.5rem 1rem;             border-radius: 4px;             font-size: 0.9rem;             font-weight: 500;             cursor: pointer;             transition: background-color 0.2s;         }          button:hover {             background-color: var(--accent-secondary);         }          #new-chat {             margin-bottom: 1rem;         }          #conversation-list {             flex: 1;             overflow-y: auto;         }          .conversation-item {             padding: 0.5rem;             margin-bottom: 0.5rem;             background-color: var(--bg-primary);             border-radius: 4px;             cursor: pointer;             display: flex;             justify-content: space-between;             align-items: center;             transition: background-color 0.2s;         }          .conversation-item:hover {             background-color: var(--accent-secondary);         }          .conversation-item.active {             background-color: var(--accent-primary);             font-weight: 500;         }          .delete-conversation {             background-color: transparent;             color: var(--text-secondary);             padding: 0.25rem;         }          .delete-conversation:hover {             color: var(--error);         }          #chat-container {             flex: 1;             overflow-y: auto;             padding: 1rem;         }          .message {             max-width: 80%;             margin-bottom: 1rem;             padding: 0.75rem;             border-radius: 4px;         }          .user-message {             background-color: var(--accent-primary);             color: var(--text-primary);             align-self: flex-end;             margin-left: auto;         }          .ai-message {             background-color: var(--bg-secondary);             border: 1px solid var(--accent-primary);         }          #input-container {             display: flex;             padding: 1rem;             background-color: var(--bg-secondary);         }          #user-input {             flex: 1;             padding: 0.5rem;             border: 1px solid var(--accent-primary);             border-radius: 4px;             font-size: 1rem;             background-color: var(--bg-primary);             color: var(--text-primary);             font-family: 'Roboto', sans-serif;         }          #send-message {             margin-left: 0.5rem;         }          .typing-indicator::after {             content: '▋';             animation: blink 1s step-start infinite;         }          @keyframes blink {             50% { opacity: 0; }         }          /* Markdown Styles */         .ai-message p { margin-bottom: 0.5rem; }         .ai-message h2 { font-size: 1.2rem; margin-top: 1rem; margin-bottom: 0.5rem; color: var(--accent-primary); }         .ai-message h3 { font-size: 1.1rem; margin-top: 0.75rem; margin-bottom: 0.5rem; color: var(--accent-primary); }         .ai-message code { background-color: var(--bg-primary); padding: 0.2em 0.4em; border-radius: 3px; font-family: monospace; }         .ai-message pre { background-color: var(--bg-primary); padding: 1em; border-radius: 4px; overflow-x: auto; margin-bottom: 0.5rem; }         .ai-message pre code { background-color: transparent; padding: 0; }         .ai-message ul, .ai-message ol { padding-left: 1.5em; margin-bottom: 0.5rem; }         .ai-message blockquote { border-left: 3px solid var(--accent-primary); padding-left: 1em; margin-left: 0; color: var(--text-secondary); }         .ai-message a { color: var(--accent-primary); text-decoration: none; }         .ai-message a:hover { text-decoration: underline; }         .ai-message img { max-width: 100%; height: auto; border-radius: 4px; margin-bottom: 0.5rem; }     </style> </head> <body>     <div class="app-container">         <aside class="sidebar">             <h1>KairoChat</h1>             <button id="new-chat">New Chat</button>             <div id="conversation-list"></div>         </aside>         <main class="main-content">             <div id="chat-container"></div>             <div id="input-container">                 <input type="text" id="user-input" placeholder="Type your message...">                 <button id="send-message">Send</button>             </div>         </main>     </div>          <script>         const chatContainer = document.getElementById('chat-container');         const userInput = document.getElementById('user-input');         const sendButton = document.getElementById('send-message');         const newChatButton = document.getElementById('new-chat');         const conversationList = document.getElementById('conversation-list');          let currentConversationId = null;         let conversations = {};         let isTyping = false;          function loadConversations() {             const savedConversations = localStorage.getItem('conversations');             if (savedConversations) {                 conversations = JSON.parse(savedConversations);                 updateConversationList();             }         }          function saveConversations() {             localStorage.setItem('conversations', JSON.stringify(conversations));             updateConversationList();         }          function updateConversationList() {             conversationList.innerHTML = '';             Object.keys(conversations)                 .sort((a, b) => b - a)                 .forEach(id => {                     const item = document.createElement('div');                     item.className = 'conversation-item';                     if (id === currentConversationId) {                         item.classList.add('active');                     }                     item.innerHTML = `                         <span>Chat ${id.slice(0, 8)}</span>                         <button class="delete-conversation">×</button>                     `;                     item.querySelector('span').addEventListener('click', () => loadConversation(id));                     item.querySelector('.delete-conversation').addEventListener('click', (e) => {                         e.stopPropagation();                         deleteConversation(id);                     });                     conversationList.appendChild(item);                 });         }          function loadConversation(id) {             currentConversationId = id;             chatContainer.innerHTML = conversations[id];             chatContainer.scrollTop = chatContainer.scrollHeight;             updateConversationList();         }          function deleteConversation(id) {             delete conversations[id];             saveConversations();             if (currentConversationId === id) {                 currentConversationId = null;                 chatContainer.innerHTML = '';             }             updateConversationList();         }          function startNewChat() {             currentConversationId = null;             chatContainer.innerHTML = '';             updateConversationList();         }          async function sendMessage() {             const message = userInput.value.trim();             if (!message || isTyping) return;              isTyping = true;             userInput.value = '';              appendMessage(message, 'user-message');              const aiMessage = document.createElement('div');             aiMessage.className = 'message ai-message';             aiMessage.innerHTML = '<span class="typing-indicator"></span>';             chatContainer.appendChild(aiMessage);             chatContainer.scrollTop = chatContainer.scrollHeight;              try {                 const response = await fetch(`https://kairo-api.kys.gay/api/gpt?msg=${encodeURIComponent(message)}${currentConversationId ? `&cvid=${currentConversationId}` : ''}`);                 const data = await response.json();                                  currentConversationId = data.conversation_id;                 aiMessage.innerHTML = '';                 await typeEffect(data.message, aiMessage);             } catch (error) {                 aiMessage.textContent = 'Error: Unable to get a response. Please try again.';             } finally {                 isTyping = false;                 saveConversation();             }         }          function appendMessage(content, className) {             const messageDiv = document.createElement('div');             messageDiv.className = `message ${className}`;             messageDiv.textContent = content;             chatContainer.appendChild(messageDiv);             chatContainer.scrollTop = chatContainer.scrollHeight;         }          async function typeEffect(text, element, speed = 20) {             let i = 0;             while (i < text.length) {                 await new Promise(resolve => setTimeout(resolve, speed));                 element.innerHTML = marked.parse(text.slice(0, i + 1));                 chatContainer.scrollTop = chatContainer.scrollHeight;                 i++;             }         }          function saveConversation() {             conversations[currentConversationId] = chatContainer.innerHTML;             saveConversations();         }          sendButton.addEventListener('click', sendMessage);         userInput.addEventListener('keypress', (e) => {             if (e.key === 'Enter') sendMessage();         });         newChatButton.addEventListener('click', startNewChat);          loadConversations();     </script> </body> </html> Please look at the WEB DATA, and answer the prompt please do not say anything about the web data like saying "According to the web data" or anything like that. With the web data, you have data about the year 2024, so if the data is about the past or future, please consider that.