Update index.html

index.html

@@ -9,23 +9,38 @@
     <link href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300;14..32,400;14..32,500;14..32,600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
 
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css">
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/mammoth/1.6.0/mammoth.browser.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/12.0.1/marked.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js">
+    </script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/mammoth/1.6.0/mammoth.browser.min.js">
+    </script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js">
+    </script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/12.0.1/marked.min.js">
+    </script>
 
     <script>
         window.MathJax = {
             tex: {
-                inlineMath: [['$', '$'], ['\\(', '\\)']],
-                displayMath: [['$$', '$$'], ['\\[', '\\]']],
+                inlineMath: [
+                    ['$', '$'],
+                    ['\\(', '\\)']
+                ],
+                displayMath: [
+                    ['$$', '$$'],
+                    ['\\[', '\\]']
+                ],
                 processEscapes: true,
-                packages: {'[+]': ['mhchem']}
+                packages: {
+                    '[+]': ['mhchem']
+                }
             },
-            loader: {load: ['[tex]/mhchem']}
+            loader: {
+                load: ['[tex]/mhchem']
+            }
         };
     </script>
-    <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
+    <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js">
+    </script>
 
     <style>
         :root {
@@ -63,6 +78,7 @@
             outline: none !important;
             box-shadow: none !important;
         }
+
         *:focus-visible {
             outline: none !important;
             box-shadow: none !important;
@@ -105,12 +121,21 @@
         }
 
         @keyframes liquidMove {
-            0%, 100% { transform: translate(0, 0) rotate(0deg); }
-            33% { transform: translate(30px, -30px) rotate(120deg); }
-            66% { transform: translate(-20px, 20px) rotate(240deg); }
+            0%,
+            100% {
+                transform: translate(0, 0) rotate(0deg);
+            }
+            33% {
+                transform: translate(30px, -30px) rotate(120deg);
+            }
+            66% {
+                transform: translate(-20px, 20px) rotate(240deg);
+            }
         }
 
-        button, a, [role="button"] {
+        button,
+        a,
+        [role="button"] {
             -webkit-tap-highlight-color: transparent;
             outline: none;
         }
@@ -123,39 +148,116 @@
             font-family: inherit;
         }
 
-        input, textarea {
+        input,
+        textarea {
             font-family: inherit;
             outline: none;
             border: none;
             background: transparent;
         }
 
-        ::-webkit-scrollbar { width: 5px; height: 5px; }
-        ::-webkit-scrollbar-track { background: transparent; }
-        ::-webkit-scrollbar-thumb { background: rgba(114, 119, 117, 0.3); border-radius: 10px; }
-        ::-webkit-scrollbar-thumb:hover { background: rgba(114, 119, 117, 0.6); }
+        ::-webkit-scrollbar {
+            width: 5px;
+            height: 5px;
+        }
+        ::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        ::-webkit-scrollbar-thumb {
+            background: rgba(114, 119, 117, 0.3);
+            border-radius: 10px;
+        }
+        ::-webkit-scrollbar-thumb:hover {
+            background: rgba(114, 119, 117, 0.6);
+        }
 
-        @keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
-        @keyframes fadeInUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
-        @keyframes pulseOpacity { 0% { opacity: 0.4; } 100% { opacity: 1; } }
-        @keyframes spin { 100% { transform: rotate(360deg); } }
-        @keyframes typingBounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-4px); opacity: 1; } }
+        @keyframes fadeIn {
+            from {
+                opacity: 0;
+                transform: translateY(6px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+        @keyframes fadeInUp {
+            from {
+                opacity: 0;
+                transform: translateY(12px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+        @keyframes pulseOpacity {
+            0% {
+                opacity: 0.4;
+            }
+            100% {
+                opacity: 1;
+            }
+        }
+        @keyframes spin {
+            100% {
+                transform: rotate(360deg);
+            }
+        }
+        @keyframes typingBounce {
+            0%,
+            60%,
+            100% {
+                transform: translateY(0);
+                opacity: 0.4;
+            }
+            30% {
+                transform: translateY(-4px);
+                opacity: 1;
+            }
+        }
         @keyframes recordPulse {
-            0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(179, 38, 30, 0.4); }
-            50% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(179, 38, 30, 0); }
-            100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(179, 38, 30, 0); }
+            0% {
+                transform: scale(1);
+                box-shadow: 0 0 0 0 rgba(179, 38, 30, 0.4);
+            }
+            50% {
+                transform: scale(1.05);
+                box-shadow: 0 0 0 10px rgba(179, 38, 30, 0);
+            }
+            100% {
+                transform: scale(1);
+                box-shadow: 0 0 0 0 rgba(179, 38, 30, 0);
+            }
         }
         @keyframes dropUpFade {
-            from { opacity: 0; transform: translateY(10px) scale(0.95); }
-            to { opacity: 1; transform: translateY(0) scale(1); }
+            from {
+                opacity: 0;
+                transform: translateY(10px) scale(0.95);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0) scale(1);
+            }
         }
         @keyframes modalFadeIn {
-            from { opacity: 0; transform: scale(0.96); }
-            to { opacity: 1; transform: scale(1); }
+            from {
+                opacity: 0;
+                transform: scale(0.96);
+            }
+            to {
+                opacity: 1;
+                transform: scale(1);
+            }
         }
         @keyframes blinkCursor {
-            0%, 100% { opacity: 1; }
-            50% { opacity: 0; }
+            0%,
+            100% {
+                opacity: 1;
+            }
+            50% {
+                opacity: 0;
+            }
         }
 
         .blinking-cursor {
@@ -170,90 +272,221 @@
         }
 
         .btn-menu {
-            position: absolute; top: 16px; left: 16px; z-index: 50;
-            width: 44px; height: 44px; border-radius: 50%;
-            display: flex; align-items: center; justify-content: center;
+            position: absolute;
+            top: 16px;
+            left: 16px;
+            z-index: 50;
+            width: 44px;
+            height: 44px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
             background: var(--glass-bg);
             backdrop-filter: blur(16px);
             -webkit-backdrop-filter: blur(16px);
             border: 1px solid var(--glass-border);
-            color: var(--text-secondary); 
+            color: var(--text-secondary);
             transition: var(--transition-default);
             box-shadow: var(--glass-shadow);
         }
-        .btn-menu:hover { background: rgba(255, 255, 255, 0.8); color: var(--text-primary); }
+        .btn-menu:hover {
+            background: rgba(255, 255, 255, 0.8);
+            color: var(--text-primary);
+        }
 
         .sidebar {
-            width: 280px; 
+            width: 280px;
             background: var(--bg-sidebar);
             backdrop-filter: blur(20px);
             -webkit-backdrop-filter: blur(20px);
             border-right: 1px solid var(--glass-border);
-            display: flex; flex-direction: column; 
-            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
+            display: flex;
+            flex-direction: column;
+            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
             z-index: 100;
-            height: 100%; flex-shrink: 0; 
-            box-shadow: 2px 0 12px rgba(0,0,0,0.03);
+            height: 100%;
+            flex-shrink: 0;
+            box-shadow: 2px 0 12px rgba(0, 0, 0, 0.03);
+        }
+        .sidebar.collapsed {
+            transform: translateX(-100%);
+            position: absolute;
         }
-        .sidebar.collapsed { transform: translateX(-100%); position: absolute; }
 
-        .sidebar-header { padding: 20px 20px 10px; display: flex; align-items: center; justify-content: space-between; }
-        .sidebar-logo { font-weight: 600; font-size: 16px; letter-spacing: -0.3px; color: var(--text-primary); }
+        .sidebar-header {
+            padding: 20px 20px 10px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+        }
+        .sidebar-logo {
+            font-weight: 600;
+            font-size: 16px;
+            letter-spacing: -0.3px;
+            color: var(--text-primary);
+        }
 
-        .btn-new-chat { 
-            margin: 10px 16px; 
-            display: flex; align-items: center; justify-content: center; gap: 10px; 
-            padding: 12px 14px; 
-            border-radius: var(--radius-sm); 
+        .btn-new-chat {
+            margin: 10px 16px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 10px;
+            padding: 12px 14px;
+            border-radius: var(--radius-sm);
             background: var(--glass-bg);
             backdrop-filter: blur(12px);
             -webkit-backdrop-filter: blur(12px);
-            border: 1px solid var(--glass-border); 
-            font-size: 14px; font-weight: 500; 
-            transition: var(--transition-default); 
-            color: var(--text-primary); 
+            border: 1px solid var(--glass-border);
+            font-size: 14px;
+            font-weight: 500;
+            transition: var(--transition-default);
+            color: var(--text-primary);
             box-shadow: var(--glass-shadow);
         }
-        .btn-new-chat:hover { background: rgba(255, 255, 255, 0.9); box-shadow: 0 4px 16px rgba(0,0,0,0.08); color: var(--brand-accent); border-color: var(--border-focus);}
-
-        .sidebar-history { flex: 1; overflow-y: auto; padding: 10px 16px; display: flex; flex-direction: column; gap: 4px; }
-        
-        .history-header { display:flex; justify-content:space-between; align-items:center; padding: 0 4px 8px; margin-bottom:8px; border-bottom:1px solid var(--border-light); }
-        .history-title-text { font-size:11px; font-weight:600; color:var(--text-tertiary); text-transform:uppercase; letter-spacing:0.5px; }
-        .btn-clear-all { font-size:11px; font-weight:500; color:var(--text-tertiary); cursor:pointer; transition:var(--transition-default); }
-        .btn-clear-all:hover { color:var(--brand-danger); }
-        
-        .history-item { 
-            padding: 10px 14px; 
-            border-radius: var(--radius-sm); 
-            font-size: 14px; color: var(--text-secondary); 
-            cursor: pointer; 
-            display: flex; justify-content: space-between; align-items: center; 
-            transition: var(--transition-default); 
-            border: 1px solid transparent; 
-        }
-        .history-item:hover { background: rgba(255, 255, 255, 0.6); color: var(--text-primary); }
-        .history-item.active { background: rgba(227, 236, 250, 0.8); color: #001d35; font-weight: 500; border-color: rgba(219, 234, 254, 0.5); }
-        .history-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
-
-        .btn-delete-chat { background: none; border: none; color: var(--text-tertiary); cursor: pointer; padding: 4px; display: none; align-items: center; justify-content: center; border-radius: 6px; }
-        .history-item:hover .btn-delete-chat { display: flex; }
-        .btn-delete-chat:hover { color: var(--brand-danger); background: #fce8e8; }
-
-        .sidebar-footer { 
-            padding: 16px; 
-            border-top: 1px solid var(--glass-border); 
-            display: flex; align-items: center; gap: 10px; 
+        .btn-new-chat:hover {
+            background: rgba(255, 255, 255, 0.9);
+            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+            color: var(--brand-accent);
+            border-color: var(--border-focus);
+        }
+
+        .sidebar-history {
+            flex: 1;
+            overflow-y: auto;
+            padding: 10px 16px;
+            display: flex;
+            flex-direction: column;
+            gap: 4px;
+        }
+
+        .history-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 4px 8px;
+            margin-bottom: 8px;
+            border-bottom: 1px solid var(--border-light);
+        }
+        .history-title-text {
+            font-size: 11px;
+            font-weight: 600;
+            color: var(--text-tertiary);
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+        }
+        .btn-clear-all {
+            font-size: 11px;
+            font-weight: 500;
+            color: var(--text-tertiary);
+            cursor: pointer;
+            transition: var(--transition-default);
+        }
+        .btn-clear-all:hover {
+            color: var(--brand-danger);
+        }
+
+        .history-item {
+            padding: 10px 14px;
+            border-radius: var(--radius-sm);
+            font-size: 14px;
+            color: var(--text-secondary);
+            cursor: pointer;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            transition: var(--transition-default);
+            border: 1px solid transparent;
+        }
+        .history-item:hover {
+            background: rgba(255, 255, 255, 0.6);
+            color: var(--text-primary);
+        }
+        .history-item.active {
+            background: rgba(227, 236, 250, 0.8);
+            color: #001d35;
+            font-weight: 500;
+            border-color: rgba(219, 234, 254, 0.5);
+        }
+        .history-text {
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            flex: 1;
+        }
+
+        .btn-delete-chat {
+            background: none;
+            border: none;
+            color: var(--text-tertiary);
+            cursor: pointer;
+            padding: 4px;
+            display: none;
+            align-items: center;
+            justify-content: center;
+            border-radius: 6px;
+        }
+        .history-item:hover .btn-delete-chat {
+            display: flex;
+        }
+        .btn-delete-chat:hover {
+            color: var(--brand-danger);
+            background: #fce8e8;
+        }
+
+        .sidebar-footer {
+            padding: 16px;
+            border-top: 1px solid var(--glass-border);
+            display: flex;
+            align-items: center;
+            gap: 10px;
             background: var(--glass-bg);
             backdrop-filter: blur(12px);
             -webkit-backdrop-filter: blur(12px);
             flex-wrap: wrap;
         }
-        .user-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--brand-accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 600; flex-shrink: 0; }
-        .user-info-box { flex: 1; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
-        .user-name { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-primary); line-height: 1.2; }
-        .user-sub { font-size: 11.5px; font-weight: 500; color: var(--text-secondary); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; cursor: pointer; }
-        
+        .user-avatar {
+            width: 38px;
+            height: 38px;
+            border-radius: 50%;
+            background: var(--brand-accent);
+            color: #fff;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 15px;
+            font-weight: 600;
+            flex-shrink: 0;
+        }
+        .user-info-box {
+            flex: 1;
+            overflow: hidden;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+        }
+        .user-name {
+            font-size: 14px;
+            font-weight: 600;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            color: var(--text-primary);
+            line-height: 1.2;
+        }
+        .user-sub {
+            font-size: 11.5px;
+            font-weight: 500;
+            color: var(--text-secondary);
+            margin-top: 2px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            line-height: 1.2;
+            cursor: pointer;
+        }
+
         .btn-login-register {
             background: var(--brand-accent);
             color: #fff;
@@ -268,44 +501,110 @@
             margin-left: auto;
             box-shadow: 0 2px 8px rgba(11, 87, 208, 0.15);
         }
-        .btn-login-register:hover { background: #0842a0; transform: scale(1.02); }
+        .btn-login-register:hover {
+            background: #0842a0;
+            transform: scale(1.02);
+        }
 
-        .btn-power { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text-secondary); transition: var(--transition-default); }
-        .btn-power:hover { background: #fce8e8; color: var(--brand-danger); }
+        .btn-power {
+            width: 34px;
+            height: 34px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: var(--text-secondary);
+            transition: var(--transition-default);
+        }
+        .btn-power:hover {
+            background: #fce8e8;
+            color: var(--brand-danger);
+        }
 
-        .main-area { flex: 1; display: flex; flex-direction: column; position: relative; transition: 0.3s; height: 100%; overflow: hidden; z-index: 1; }
+        .main-area {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            position: relative;
+            transition: 0.3s;
+            height: 100%;
+            overflow: hidden;
+            z-index: 1;
+        }
 
         .chat-container {
-            flex: 1; overflow-x: hidden; overflow-y: auto; padding: 60px 20px 180px;
-            display: flex; flex-direction: column; align-items: center;
+            flex: 1;
+            overflow-x: hidden;
+            overflow-y: auto;
+            padding: 60px 20px 180px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
             scroll-behavior: smooth;
         }
 
         .welcome-center {
-            margin: auto; text-align: center; display: flex; flex-direction: column; align-items: center;
-            animation: fadeInUp 0.6s ease; width: 100%; justify-content: center; flex: 1;
+            margin: auto;
+            text-align: center;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            animation: fadeInUp 0.6s ease;
+            width: 100%;
+            justify-content: center;
+            flex: 1;
+        }
+        .welcome-center img {
+            width: 64px;
+            height: 64px;
+            border-radius: 18px;
+            margin-bottom: 24px;
+            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+            object-fit: cover;
+        }
+        .welcome-center h1 {
+            font-size: 32px;
+            font-weight: 400;
+            color: #1f1f1f;
+            margin-bottom: 8px;
+            line-height: 1.3;
+        }
+        .welcome-center p {
+            font-size: 16px;
+            color: var(--text-secondary);
+            display: none;
         }
-        .welcome-center img { width: 64px; height: 64px; border-radius: 18px; margin-bottom: 24px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); object-fit: cover; }
-        .welcome-center h1 { font-size: 32px; font-weight: 400; color: #1f1f1f; margin-bottom: 8px; line-height: 1.3; }
-        .welcome-center p { font-size: 16px; color: var(--text-secondary); display: none; }
 
-        #chatMessages { width: 100%; display: flex; flex-direction: column; align-items: center; }
+        #chatMessages {
+            width: 100%;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
 
         .message-wrapper {
-            width: 100%; max-width: 850px; margin-bottom: 32px;
-            display: flex; flex-direction: column;
+            width: 100%;
+            max-width: 850px;
+            margin-bottom: 32px;
+            display: flex;
+            flex-direction: column;
             animation: fadeInUp 0.3s ease;
         }
 
         .user-message {
-            align-self: flex-end; max-width: 85%;
+            align-self: flex-end;
+            max-width: 85%;
             background: var(--bg-user-msg);
             backdrop-filter: blur(12px);
             -webkit-backdrop-filter: blur(12px);
-            padding: 14px 20px; border-radius: 24px 24px 6px 24px;
-            font-size: 15.5px; line-height: 1.6; color: var(--text-primary);
-            box-shadow: 0 1px 3px rgba(0,0,0,0.02);
-            word-wrap: break-word; overflow-wrap: break-word;
+            padding: 14px 20px;
+            border-radius: 24px 24px 6px 24px;
+            font-size: 15.5px;
+            line-height: 1.6;
+            color: var(--text-primary);
+            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
+            word-wrap: break-word;
+            overflow-wrap: break-word;
             border: 1px solid var(--glass-border);
         }
 
@@ -324,15 +623,28 @@
         }
 
         .bot-avatar {
-            width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
-            border: 1px solid var(--border-light); background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.05);
-            margin-top: 2px; display: flex; align-items: center; justify-content: center;
+            width: 34px;
+            height: 34px;
+            border-radius: 50%;
+            flex-shrink: 0;
+            overflow: hidden;
+            border: 1px solid var(--border-light);
+            background: #fff;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+            margin-top: 2px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        .bot-avatar img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
         }
-        .bot-avatar img { width: 100%; height: 100%; object-fit: cover; }
 
         .bot-content-wrapper {
             flex: 1 1 0%;
-            min-width: 0; 
+            min-width: 0;
             max-width: calc(100% - 50px);
             width: 100%;
             overflow: hidden;
@@ -345,29 +657,67 @@
             word-wrap: break-word;
             overflow-wrap: break-word;
             word-break: normal;
-            white-space: pre-wrap; 
+            white-space: pre-wrap;
             width: 100%;
             max-width: 100%;
             min-height: 20px;
         }
 
-        .bot-content * { max-width: 100%; }
-        .bot-content p { margin-bottom: 16px; white-space: pre-wrap; }
-        .bot-content p:last-child { margin-bottom: 0; }
-        .bot-content strong { font-weight: 600; color: #000; }
-        .bot-content code { font-family: var(--font-code); background: rgba(31,31,31,0.05); padding: 3px 6px; border-radius: 6px; font-size: 0.9em; color: #0284c7; white-space: pre-wrap; word-break: break-word; }
+        .bot-content * {
+            max-width: 100%;
+        }
+        .bot-content p {
+            margin-bottom: 16px;
+            white-space: pre-wrap;
+        }
+        .bot-content p:last-child {
+            margin-bottom: 0;
+        }
+        .bot-content strong {
+            font-weight: 600;
+            color: #000;
+        }
+        .bot-content code {
+            font-family: var(--font-code);
+            background: rgba(31, 31, 31, 0.05);
+            padding: 3px 6px;
+            border-radius: 6px;
+            font-size: 0.9em;
+            color: #0284c7;
+            white-space: pre-wrap;
+            word-break: break-word;
+        }
 
         .bot-content pre {
-            background: #0d1117; padding: 40px 16px 16px; border-radius: var(--radius-md);
-            overflow-x: auto; margin: 16px 0; box-shadow: 0 4px 16px rgba(0,0,0,0.1);
-            position: relative; white-space: pre; word-break: normal;
+            background: #0d1117;
+            padding: 40px 16px 16px;
+            border-radius: var(--radius-md);
+            overflow-x: auto;
+            margin: 16px 0;
+            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+            position: relative;
+            white-space: pre;
+            word-break: normal;
         }
         .bot-content pre::before {
-            content: ''; position: absolute; top: 14px; left: 16px;
-            width: 12px; height: 12px; border-radius: 50%;
-            background: #ff5f56; box-shadow: 20px 0 0 #ffbd2e, 40px 0 0 #27c93f;
+            content: '';
+            position: absolute;
+            top: 14px;
+            left: 16px;
+            width: 12px;
+            height: 12px;
+            border-radius: 50%;
+            background: #ff5f56;
+            box-shadow: 20px 0 0 #ffbd2e, 40px 0 0 #27c93f;
+        }
+        .bot-content pre code {
+            background: none;
+            padding: 0;
+            color: #e2e8f0;
+            font-size: 13.5px;
+            text-shadow: none;
+            white-space: pre;
         }
-        .bot-content pre code { background: none; padding: 0; color: #e2e8f0; font-size: 13.5px; text-shadow: none; white-space: pre; }
 
         .bot-content table {
             display: block;
@@ -378,11 +728,12 @@
             white-space: nowrap;
             -webkit-overflow-scrolling: touch;
         }
-        .bot-content th, .bot-content td {
+        .bot-content th,
+        .bot-content td {
             border: 1px solid var(--border-light);
             padding: 8px 14px;
             text-align: left;
-            background: rgba(255,255,255,0.4);
+            background: rgba(255, 255, 255, 0.4);
             white-space: nowrap;
         }
         .bot-content th {
@@ -390,118 +741,242 @@
             font-weight: 600;
         }
 
-        .chat-attachment-container { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
-        .chat-file-pill { 
-            display: inline-flex; align-items: center; gap: 8px; 
+        .chat-attachment-container {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 10px;
+            margin-bottom: 12px;
+        }
+        .chat-file-pill {
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
             background: var(--glass-bg);
             backdrop-filter: blur(8px);
             -webkit-backdrop-filter: blur(8px);
-            border: 1px solid var(--glass-border); 
-            padding: 8px 14px; border-radius: var(--radius-lg); 
-            font-size: 13px; font-weight: 500; 
-            box-shadow: 0 2px 6px rgba(0,0,0,0.03); 
+            border: 1px solid var(--glass-border);
+            padding: 8px 14px;
+            border-radius: var(--radius-lg);
+            font-size: 13px;
+            font-weight: 500;
+            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
+        }
+        .chat-img-preview {
+            max-width: 120px;
+            max-height: 120px;
+            border-radius: 12px;
+            border: 1px solid var(--border-light);
+            object-fit: cover;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
         }
-        .chat-img-preview { max-width: 120px; max-height: 120px; border-radius: 12px; border: 1px solid var(--border-light); object-fit: cover; box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
 
-        .qwen-think-box { 
+        .qwen-think-box {
             background: var(--glass-bg);
             backdrop-filter: blur(10px);
             -webkit-backdrop-filter: blur(10px);
-            border: 1px solid var(--glass-border); 
-            border-radius: 16px; margin-bottom: 16px; overflow: hidden; 
-            transition: var(--transition-default); 
-        }
-        .qwen-think-box summary { 
-            padding: 12px 16px; font-size: 13.5px; font-weight: 500; color: var(--text-secondary); 
-            cursor: pointer; user-select: none; list-style: none; 
-            display: flex; align-items: center; gap: 8px; 
-            background: rgba(248, 250, 252, 0.4); 
-        }
-        .qwen-think-box summary::-webkit-details-marker { display: none; }
-        .qwen-think-box summary svg.arrow { width: 14px; height: 14px; transition: transform var(--transition-default); }
-        .qwen-think-box[open] summary svg.arrow { transform: rotate(90deg); }
-        .qwen-think-content { padding: 16px; border-top: 1px solid var(--border-light); font-size: 13.5px; color: var(--text-secondary); font-style: italic; line-height: 1.6; opacity: 0.8; white-space: pre-wrap;}
-
-        .action-status { 
-            display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; 
+            border: 1px solid var(--glass-border);
+            border-radius: 16px;
+            margin-bottom: 16px;
+            overflow: hidden;
+            transition: var(--transition-default);
+        }
+        .qwen-think-box summary {
+            padding: 12px 16px;
+            font-size: 13.5px;
+            font-weight: 500;
+            color: var(--text-secondary);
+            cursor: pointer;
+            user-select: none;
+            list-style: none;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            background: rgba(248, 250, 252, 0.4);
+        }
+        .qwen-think-box summary::-webkit-details-marker {
+            display: none;
+        }
+        .qwen-think-box summary svg.arrow {
+            width: 14px;
+            height: 14px;
+            transition: transform var(--transition-default);
+        }
+        .qwen-think-box[open] summary svg.arrow {
+            transform: rotate(90deg);
+        }
+        .qwen-think-content {
+            padding: 16px;
+            border-top: 1px solid var(--border-light);
+            font-size: 13.5px;
+            color: var(--text-secondary);
+            font-style: italic;
+            line-height: 1.6;
+            opacity: 0.8;
+            white-space: pre-wrap;
+        }
+
+        .action-status {
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+            padding: 6px 14px;
             background: var(--glass-bg);
             backdrop-filter: blur(8px);
             -webkit-backdrop-filter: blur(8px);
-            border-radius: 16px; font-size: 13px; font-weight: 500; color: var(--text-secondary); 
-            margin-bottom: 16px; border: 1px solid var(--glass-border); 
-            cursor: default; user-select: none; 
-        }
-        .action-status.active { background: rgba(227, 236, 250, 0.8); border-color: rgba(168, 199, 250, 0.5); color: var(--brand-accent); }
-        .flicker-text { animation: pulseOpacity 1.2s infinite alternate; }
-        .spin-icon { animation: spin 1s linear infinite; }
-
-        .typing-indicator { display: inline-flex; gap: 4px; padding: 8px 0; align-items: center; }
-        .typing-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-tertiary); animation: typingBounce 1.2s infinite; }
-        .typing-dot:nth-child(2) { animation-delay: 0.15s; }
-        .typing-dot:nth-child(3) { animation-delay: 0.3s; }
-
-        .msg-actions { display: flex; gap: 8px; margin-top: 14px; opacity: 0; transition: opacity var(--transition-default); align-items: center; flex-wrap: wrap; }
-        .message-wrapper:hover .msg-actions { opacity: 1; }
-        @media (hover: none) { .msg-actions { opacity: 1; } }
-
-        .action-btn { 
-            display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; 
-            color: var(--text-secondary); padding: 8px 14px; border-radius: 12px; 
-            transition: var(--transition-default); 
+            border-radius: 16px;
+            font-size: 13px;
+            font-weight: 500;
+            color: var(--text-secondary);
+            margin-bottom: 16px;
+            border: 1px solid var(--glass-border);
+            cursor: default;
+            user-select: none;
+        }
+        .action-status.active {
+            background: rgba(227, 236, 250, 0.8);
+            border-color: rgba(168, 199, 250, 0.5);
+            color: var(--brand-accent);
+        }
+        .flicker-text {
+            animation: pulseOpacity 1.2s infinite alternate;
+        }
+        .spin-icon {
+            animation: spin 1s linear infinite;
+        }
+
+        .typing-indicator {
+            display: inline-flex;
+            gap: 4px;
+            padding: 8px 0;
+            align-items: center;
+        }
+        .typing-dot {
+            width: 7px;
+            height: 7px;
+            border-radius: 50%;
+            background: var(--text-tertiary);
+            animation: typingBounce 1.2s infinite;
+        }
+        .typing-dot:nth-child(2) {
+            animation-delay: 0.15s;
+        }
+        .typing-dot:nth-child(3) {
+            animation-delay: 0.3s;
+        }
+
+        .msg-actions {
+            display: flex;
+            gap: 8px;
+            margin-top: 14px;
+            opacity: 0;
+            transition: opacity var(--transition-default);
+            align-items: center;
+            flex-wrap: wrap;
+        }
+        .message-wrapper:hover .msg-actions {
+            opacity: 1;
+        }
+        @media (hover: none) {
+            .msg-actions {
+                opacity: 1;
+            }
+        }
+
+        .action-btn {
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            font-size: 13px;
+            font-weight: 500;
+            color: var(--text-secondary);
+            padding: 8px 14px;
+            border-radius: 12px;
+            transition: var(--transition-default);
             background: var(--glass-bg);
             backdrop-filter: blur(4px);
             -webkit-backdrop-filter: blur(4px);
-            border: 1px solid var(--glass-border); 
+            border: 1px solid var(--glass-border);
+        }
+        .action-btn:hover {
+            background: rgba(255, 255, 255, 0.9);
+            color: var(--text-primary);
+            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
+        }
+        .action-btn.listen-btn {
+            background: rgba(227, 236, 250, 0.8);
+            color: #0b57d0;
+            border-color: transparent;
+        }
+        .action-btn.listen-btn:hover {
+            background: rgba(211, 227, 253, 0.9);
         }
-        .action-btn:hover { background: rgba(255, 255, 255, 0.9); color: var(--text-primary); box-shadow: 0 2px 6px rgba(0,0,0,0.04); }
-        .action-btn.listen-btn { background: rgba(227, 236, 250, 0.8); color: #0b57d0; border-color: transparent; }
-        .action-btn.listen-btn:hover { background: rgba(211, 227, 253, 0.9); }
 
         .btn-scroll-bottom {
             position: absolute;
             bottom: 110px;
             left: 50%;
             transform: translateX(-50%) translateY(20px);
-            width: 40px; height: 40px;
+            width: 40px;
+            height: 40px;
             border-radius: 50%;
             background: var(--glass-bg);
             backdrop-filter: blur(16px);
             -webkit-backdrop-filter: blur(16px);
             border: 1px solid var(--glass-border);
             box-shadow: var(--glass-shadow);
-            display: flex; align-items: center; justify-content: center;
+            display: flex;
+            align-items: center;
+            justify-content: center;
             color: var(--text-secondary);
-            opacity: 0; pointer-events: none;
+            opacity: 0;
+            pointer-events: none;
             transition: all 0.3s ease;
             z-index: 45;
         }
         .btn-scroll-bottom.visible {
-            opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0);
+            opacity: 1;
+            pointer-events: auto;
+            transform: translateX(-50%) translateY(0);
         }
         .btn-scroll-bottom:hover {
-            background: rgba(255, 255, 255, 0.9); color: var(--brand-accent);
+            background: rgba(255, 255, 255, 0.9);
+            color: var(--brand-accent);
         }
 
         .input-dock {
-            position: absolute; bottom: 0; left: 0; width: 100%;
-            padding: 10px 20px 24px; padding-bottom: max(24px, env(safe-area-inset-bottom));
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            padding: 10px 20px 24px;
+            padding-bottom: max(24px, env(safe-area-inset-bottom));
             background: linear-gradient(to top, rgba(17, 25, 40, 0.18) 0%, transparent 100%);
-            display: flex; flex-direction: column; align-items: center; z-index: 50;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            z-index: 50;
         }
 
-        .loc-toast { 
-            display: none; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; 
-            color: var(--text-secondary); margin-bottom: 12px; 
+        .loc-toast {
+            display: none;
+            align-items: center;
+            gap: 6px;
+            font-size: 12.5px;
+            font-weight: 500;
+            color: var(--text-secondary);
+            margin-bottom: 12px;
             background: var(--glass-bg);
             backdrop-filter: blur(12px);
             -webkit-backdrop-filter: blur(12px);
-            padding: 6px 14px; border-radius: 16px; 
-            border: 1px solid var(--glass-border); 
+            padding: 6px 14px;
+            border-radius: 16px;
+            border: 1px solid var(--glass-border);
             box-shadow: var(--glass-shadow);
         }
 
         .input-container {
-            width: 100%; max-width: 850px;
+            width: 100%;
+            max-width: 850px;
             background: rgba(255, 255, 255, 0.82);
             backdrop-filter: blur(24px);
             -webkit-backdrop-filter: blur(24px);
@@ -509,7 +984,8 @@
             box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(168, 199, 250, 0.15);
             border-radius: 50px;
             padding: 8px 12px 8px 16px;
-            display: flex; flex-direction: column;
+            display: flex;
+            flex-direction: column;
             transition: var(--transition-default);
         }
         .input-container:focus-within {
@@ -518,38 +994,113 @@
             background: rgba(255, 255, 255, 0.92);
         }
 
-        .file-preview-bar { display: none; padding: 4px 0 12px; align-items: center; gap: 10px; margin-bottom: 4px; }
-        .file-preview-bar.active { display: flex; }
-        .file-preview-pill { 
-            display: flex; align-items: center; gap: 8px; 
+        .file-preview-bar {
+            display: none;
+            padding: 4px 0 12px;
+            align-items: center;
+            gap: 10px;
+            margin-bottom: 4px;
+        }
+        .file-preview-bar.active {
+            display: flex;
+        }
+        .file-preview-pill {
+            display: flex;
+            align-items: center;
+            gap: 8px;
             background: rgba(255, 255, 255, 0.95);
             backdrop-filter: blur(8px);
             -webkit-backdrop-filter: blur(8px);
-            border: 1px solid var(--border-light); 
-            padding: 6px 12px; border-radius: 16px; 
-            font-size: 13.5px; font-weight: 500; 
-            box-shadow: 0 2px 4px rgba(0,0,0,0.03); 
+            border: 1px solid var(--border-light);
+            padding: 6px 12px;
+            border-radius: 16px;
+            font-size: 13.5px;
+            font-weight: 500;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
+        }
+        .file-preview-icon {
+            width: 18px;
+            height: 18px;
+            object-fit: cover;
+            border-radius: 4px;
+        }
+        .file-preview-name {
+            max-width: 120px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            color: var(--text-primary);
+        }
+        .btn-remove-file {
+            width: 20px;
+            height: 20px;
+            border-radius: 50%;
+            background: #fce8e8;
+            color: var(--brand-danger);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: var(--transition-default);
+            margin-left: 4px;
+        }
+        .btn-remove-file:hover {
+            background: #fca5a5;
+            color: #fff;
         }
-        .file-preview-icon { width: 18px; height: 18px; object-fit: cover; border-radius: 4px; }
-        .file-preview-name { max-width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-primary); }
-        .btn-remove-file { width: 20px; height: 20px; border-radius: 50%; background: #fce8e8; color: var(--brand-danger); display: flex; align-items: center; justify-content: center; transition: var(--transition-default); margin-left: 4px; }
-        .btn-remove-file:hover { background: #fca5a5; color: #fff; }
 
-        .input-row { display: flex; align-items: flex-end; gap: 10px; width: 100%; align-items: center; }
+        .input-row {
+            display: flex;
+            align-items: flex-end;
+            gap: 10px;
+            width: 100%;
+            align-items: center;
+        }
 
-        .tools-left { display: flex; gap: 4px; align-items: center; position: relative; }
+        .tools-left {
+            display: flex;
+            gap: 4px;
+            align-items: center;
+            position: relative;
+        }
         .tool-btn {
-            width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
-            color: var(--text-secondary); transition: all 0.2s ease; position: relative; flex-shrink: 0;
+            width: 44px;
+            height: 44px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: var(--text-secondary);
+            transition: all 0.2s ease;
+            position: relative;
+            flex-shrink: 0;
+        }
+        .tool-btn:hover {
+            background: rgba(255, 255, 255, 0.7);
+            color: var(--text-primary);
+            transform: scale(1.05);
+        }
+
+        .tool-btn.active-env {
+            color: #fff;
+            background: rgba(11, 87, 208, 0.7);
+        }
+        .tool-btn.active-think-low {
+            color: #fff;
+            background: rgba(179, 38, 30, 0.7);
+        }
+        .tool-btn.active-think-medium {
+            color: #fff;
+            background: rgba(227, 116, 0, 0.7);
+        }
+        .tool-btn.active-think-high {
+            color: #fff;
+            background: rgba(11, 87, 208, 0.7);
+        }
+        .tool-btn.active-search {
+            color: #fff;
+            background: rgba(20, 108, 46, 0.7);
         }
-        .tool-btn:hover { background: rgba(255, 255, 255, 0.7); color: var(--text-primary); transform: scale(1.05); }
 
-        .tool-btn.active-env { color: #fff; background: rgba(11, 87, 208, 0.7); }
-        .tool-btn.active-think-low { color: #fff; background: rgba(179, 38, 30, 0.7); }
-        .tool-btn.active-think-medium { color: #fff; background: rgba(227, 116, 0, 0.7); }
-        .tool-btn.active-think-high { color: #fff; background: rgba(11, 87, 208, 0.7); }
-        .tool-btn.active-search { color: #fff; background: rgba(20, 108, 46, 0.7); }
-        
         .btn-mic.recording {
             color: var(--brand-danger);
             background: rgba(252, 232, 232, 0.9);
@@ -557,40 +1108,82 @@
         }
 
         .chat-input {
-            flex: 1; padding: 12px 4px; font-size: 15.5px; resize: none; max-height: 180px; min-height: 24px;
-            color: var(--text-primary); line-height: 1.5; background: transparent;
+            flex: 1;
+            padding: 12px 4px;
+            font-size: 15.5px;
+            resize: none;
+            max-height: 180px;
+            min-height: 24px;
+            color: var(--text-primary);
+            line-height: 1.5;
+            background: transparent;
             caret-color: var(--brand-accent);
         }
-        .chat-input::placeholder { color: var(--text-tertiary); font-weight: 400;}
+        .chat-input::placeholder {
+            color: var(--text-tertiary);
+            font-weight: 400;
+        }
 
         .btn-send {
-            width: 44px; height: 44px; border-radius: 50%;
-            background: transparent; color: var(--text-primary);
-            display: flex; align-items: center; justify-content: center;
-            transition: all 0.2s ease; flex-shrink: 0;
+            width: 44px;
+            height: 44px;
+            border-radius: 50%;
+            background: transparent;
+            color: var(--text-primary);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: all 0.2s ease;
+            flex-shrink: 0;
+        }
+        .btn-send:hover:not(:disabled) {
+            background: rgba(255, 255, 255, 0.8);
+            transform: scale(1.08);
+        }
+        .btn-send:disabled {
+            color: var(--text-tertiary);
+            cursor: not-allowed;
+            background: transparent;
         }
-        .btn-send:hover:not(:disabled) { background: rgba(255, 255, 255, 0.8); transform: scale(1.08); }
-        .btn-send:disabled { color: var(--text-tertiary); cursor: not-allowed; background: transparent;}
 
         .btn-stop {
-            width: 44px; height: 44px; border-radius: 50%;
-            background: rgba(252, 232, 232, 0.9); color: var(--brand-danger);
-            display: none; align-items: center; justify-content: center;
-            transition: all 0.2s ease; flex-shrink: 0;
+            width: 44px;
+            height: 44px;
+            border-radius: 50%;
+            background: rgba(252, 232, 232, 0.9);
+            color: var(--brand-danger);
+            display: none;
+            align-items: center;
+            justify-content: center;
+            transition: all 0.2s ease;
+            flex-shrink: 0;
+        }
+        .btn-stop.active {
+            display: flex;
+        }
+        .btn-stop:hover {
+            background: #fca5a5;
+            color: #fff;
         }
-        .btn-stop.active { display: flex; }
-        .btn-stop:hover { background: #fca5a5; color: #fff; }
 
-        .hidden-input { display: none; }
+        .hidden-input {
+            display: none;
+        }
         .dropdown-menu {
-            position: absolute; bottom: calc(100% + 14px); left: 0;
+            position: absolute;
+            bottom: calc(100% + 14px);
+            left: 0;
             background: var(--glass-bg);
             backdrop-filter: blur(20px);
             -webkit-backdrop-filter: blur(20px);
-            border: 1px solid var(--glass-border); 
-            border-radius: 20px; padding: 8px;
+            border: 1px solid var(--glass-border);
+            border-radius: 20px;
+            padding: 8px;
             box-shadow: var(--glass-shadow);
-            display: none; flex-direction: column; min-width: 200px; z-index: 100;
+            display: none;
+            flex-direction: column;
+            min-width: 200px;
+            z-index: 100;
             transform-origin: bottom left;
         }
         .dropdown-menu.active {
@@ -598,83 +1191,308 @@
             animation: dropUpFade 0.2s cubic-bezier(0.4, 0, 0.2, 1);
         }
 
-        .dropdown-header { padding: 8px 14px 12px; font-size: 11.5px; font-weight: 600; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--border-light); margin-bottom: 4px; }
-        .dropdown-item { padding: 12px 14px; border-radius: 12px; font-size: 14px; font-weight: 500; display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; transition: var(--transition-default); color: var(--text-secondary); }
-        .dropdown-item:hover { background: rgba(255, 255, 255, 0.6); color: var(--text-primary); }
-        .dropdown-item.selected { background: rgba(227, 236, 250, 0.8); color: var(--brand-accent); font-weight: 600; }
-        .dropdown-item svg { color: inherit; }
+        .dropdown-header {
+            padding: 8px 14px 12px;
+            font-size: 11.5px;
+            font-weight: 600;
+            color: var(--text-tertiary);
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            border-bottom: 1px solid var(--border-light);
+            margin-bottom: 4px;
+        }
+        .dropdown-item {
+            padding: 12px 14px;
+            border-radius: 12px;
+            font-size: 14px;
+            font-weight: 500;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            gap: 10px;
+            cursor: pointer;
+            transition: var(--transition-default);
+            color: var(--text-secondary);
+        }
+        .dropdown-item:hover {
+            background: rgba(255, 255, 255, 0.6);
+            color: var(--text-primary);
+        }
+        .dropdown-item.selected {
+            background: rgba(227, 236, 250, 0.8);
+            color: var(--brand-accent);
+            font-weight: 600;
+        }
+        .dropdown-item svg {
+            color: inherit;
+        }
 
-        .auth-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.5); backdrop-filter: blur(8px); display: none; align-items: center; justify-content: center; z-index: 2000; }
-        .auth-modal { 
+        .auth-overlay {
+            position: fixed;
+            inset: 0;
+            background: rgba(15, 23, 42, 0.5);
+            backdrop-filter: blur(8px);
+            display: none;
+            align-items: center;
+            justify-content: center;
+            z-index: 2000;
+        }
+        .auth-modal {
             background: var(--glass-bg);
             backdrop-filter: blur(24px);
             -webkit-backdrop-filter: blur(24px);
-            width: 90%; max-width: 380px; 
-            border-radius: var(--radius-lg); padding: 32px; 
-            box-shadow: 0 24px 48px rgba(0,0,0,0.15); 
+            width: 90%;
+            max-width: 380px;
+            border-radius: var(--radius-lg);
+            padding: 32px;
+            box-shadow: 0 24px 48px rgba(0, 0, 0, 0.15);
             position: relative;
             border: 1px solid var(--glass-border);
             animation: modalFadeIn 0.2s ease;
         }
-        .auth-close { position: absolute; top: 16px; right: 16px; color: var(--text-tertiary); width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: var(--transition-default); }
-        .auth-close:hover { background: var(--bg-sidebar); color: var(--text-primary); }
-        .auth-title { font-size: 22px; font-weight: 600; margin-bottom: 24px; text-align: center; color: var(--text-primary); letter-spacing: -0.5px; }
+        .auth-close {
+            position: absolute;
+            top: 16px;
+            right: 16px;
+            color: var(--text-tertiary);
+            width: 32px;
+            height: 32px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: 50%;
+            transition: var(--transition-default);
+        }
+        .auth-close:hover {
+            background: var(--bg-sidebar);
+            color: var(--text-primary);
+        }
+        .auth-title {
+            font-size: 22px;
+            font-weight: 600;
+            margin-bottom: 24px;
+            text-align: center;
+            color: var(--text-primary);
+            letter-spacing: -0.5px;
+        }
 
-        .auth-tabs { display: flex; background: rgba(240, 244, 249, 0.6); border-radius: var(--radius-sm); padding: 4px; margin-bottom: 20px; }
-        .auth-tab { flex: 1; text-align: center; padding: 10px; font-size: 13.5px; font-weight: 500; cursor: pointer; border-radius: 8px; color: var(--text-secondary); transition: var(--transition-default); }
-        .auth-tab.active { background: rgba(255, 255, 255, 0.9); color: var(--text-primary); box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
+        .auth-tabs {
+            display: flex;
+            background: rgba(240, 244, 249, 0.6);
+            border-radius: var(--radius-sm);
+            padding: 4px;
+            margin-bottom: 20px;
+        }
+        .auth-tab {
+            flex: 1;
+            text-align: center;
+            padding: 10px;
+            font-size: 13.5px;
+            font-weight: 500;
+            cursor: pointer;
+            border-radius: 8px;
+            color: var(--text-secondary);
+            transition: var(--transition-default);
+        }
+        .auth-tab.active {
+            background: rgba(255, 255, 255, 0.9);
+            color: var(--text-primary);
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+        }
 
-        .auth-input { width: 100%; padding: 14px 16px; border: 1px solid var(--border-light); border-radius: var(--radius-sm); font-size: 14.5px; margin-bottom: 12px; transition: var(--transition-default); background: rgba(248, 250, 252, 0.8); caret-color: var(--brand-accent); }
-        .auth-input:focus { border-color: var(--brand-accent); background: rgba(255, 255, 255, 0.95); box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1); }
-        .auth-btn { width: 100%; padding: 14px; background: var(--brand-color); color: #fff; font-size: 14.5px; font-weight: 500; border-radius: var(--radius-sm); transition: var(--transition-default); box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15); }
-        .auth-btn:hover { background: #1e293b; transform: translateY(-1px); }
-        .auth-phase { display: none; }
-        .auth-phase.active { display: block; }
-        .auth-message { font-size: 13px; text-align: center; margin-top: 14px; min-height: 18px; font-weight: 500; }
+        .auth-input {
+            width: 100%;
+            padding: 14px 16px;
+            border: 1px solid var(--border-light);
+            border-radius: var(--radius-sm);
+            font-size: 14.5px;
+            margin-bottom: 12px;
+            transition: var(--transition-default);
+            background: rgba(248, 250, 252, 0.8);
+            caret-color: var(--brand-accent);
+        }
+        .auth-input:focus {
+            border-color: var(--brand-accent);
+            background: rgba(255, 255, 255, 0.95);
+            box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
+        }
+        .auth-btn {
+            width: 100%;
+            padding: 14px;
+            background: var(--brand-color);
+            color: #fff;
+            font-size: 14.5px;
+            font-weight: 500;
+            border-radius: var(--radius-sm);
+            transition: var(--transition-default);
+            box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15);
+        }
+        .auth-btn:hover {
+            background: #1e293b;
+            transform: translateY(-1px);
+        }
+        .auth-phase {
+            display: none;
+        }
+        .auth-phase.active {
+            display: block;
+        }
+        .auth-message {
+            font-size: 13px;
+            text-align: center;
+            margin-top: 14px;
+            min-height: 18px;
+            font-weight: 500;
+        }
 
-        .mobile-overlay { display: none; position: fixed; inset: 0; background: rgba(15,23,42,0.3); backdrop-filter: blur(3px); z-index: 95; opacity: 0; transition: 0.3s; pointer-events: none; }
-        .mobile-overlay.active { display: block; opacity: 1; pointer-events: all; }
+        .mobile-overlay {
+            display: none;
+            position: fixed;
+            inset: 0;
+            background: rgba(15, 23, 42, 0.3);
+            backdrop-filter: blur(3px);
+            z-index: 95;
+            opacity: 0;
+            transition: 0.3s;
+            pointer-events: none;
+        }
+        .mobile-overlay.active {
+            display: block;
+            opacity: 1;
+            pointer-events: all;
+        }
 
         .custom-confirm-overlay {
-            position: fixed; inset: 0; background: rgba(15, 23, 42, 0.4); backdrop-filter: blur(6px);
-            display: none; align-items: center; justify-content: center; z-index: 2500;
+            position: fixed;
+            inset: 0;
+            background: rgba(15, 23, 42, 0.4);
+            backdrop-filter: blur(6px);
+            display: none;
+            align-items: center;
+            justify-content: center;
+            z-index: 2500;
         }
         .custom-confirm-box {
-            background: var(--glass-bg); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
-            border: 1px solid var(--glass-border); border-radius: 28px; padding: 28px; max-width: 340px;
-            width: 90%; text-align: center; box-shadow: 0 24px 48px rgba(0,0,0,0.18);
+            background: var(--glass-bg);
+            backdrop-filter: blur(24px);
+            -webkit-backdrop-filter: blur(24px);
+            border: 1px solid var(--glass-border);
+            border-radius: 28px;
+            padding: 28px;
+            max-width: 340px;
+            width: 90%;
+            text-align: center;
+            box-shadow: 0 24px 48px rgba(0, 0, 0, 0.18);
             animation: modalFadeIn 0.2s ease;
         }
-        .custom-confirm-msg { font-size: 16px; font-weight: 500; margin-bottom: 24px; color: var(--text-primary); line-height: 1.5; }
-        .custom-confirm-btns { display: flex; gap: 12px; justify-content: center; }
-        .custom-confirm-btn { flex: 1; padding: 12px; border-radius: 16px; font-size: 14px; font-weight: 600; transition: var(--transition-default); }
-        .custom-confirm-btn.cancel { background: rgba(240, 244, 249, 0.8); color: var(--text-secondary); }
-        .custom-confirm-btn.confirm { background: var(--brand-danger); color: #fff; }
-        .custom-confirm-btn.cancel:hover { background: rgba(220, 230, 240, 0.9); }
-        .custom-confirm-btn.confirm:hover { background: #a01e18; }
+        .custom-confirm-msg {
+            font-size: 16px;
+            font-weight: 500;
+            margin-bottom: 24px;
+            color: var(--text-primary);
+            line-height: 1.5;
+        }
+        .custom-confirm-btns {
+            display: flex;
+            gap: 12px;
+            justify-content: center;
+        }
+        .custom-confirm-btn {
+            flex: 1;
+            padding: 12px;
+            border-radius: 16px;
+            font-size: 14px;
+            font-weight: 600;
+            transition: var(--transition-default);
+        }
+        .custom-confirm-btn.cancel {
+            background: rgba(240, 244, 249, 0.8);
+            color: var(--text-secondary);
+        }
+        .custom-confirm-btn.confirm {
+            background: var(--brand-danger);
+            color: #fff;
+        }
+        .custom-confirm-btn.cancel:hover {
+            background: rgba(220, 230, 240, 0.9);
+        }
+        .custom-confirm-btn.confirm:hover {
+            background: #a01e18;
+        }
 
         @media (max-width: 900px) {
-            .sidebar { position: fixed; left: 0; top: 0; height: 100%; box-shadow: 4px 0 32px rgba(0,0,0,0.1); }
-            .sidebar.collapsed { transform: translateX(-100%); box-shadow: none; }
-            .input-dock { padding: 10px 10px 20px; }
-            .input-container { border-radius: 28px; padding: 8px 10px 8px 16px; }
-            .tool-btn { width: 38px; height: 38px; }
-            .btn-send, .btn-stop { width: 40px; height: 40px; }
-            .chat-container { padding: 60px 10px 160px; }
-            .user-message { font-size: 14.5px; max-width: 90%; }
-            .bot-content { font-size: 14.5px; }
-            .welcome-center h1 { font-size: 28px; }
+            .sidebar {
+                position: fixed;
+                left: 0;
+                top: 0;
+                height: 100%;
+                box-shadow: 4px 0 32px rgba(0, 0, 0, 0.1);
+            }
+            .sidebar.collapsed {
+                transform: translateX(-100%);
+                box-shadow: none;
+            }
+            .input-dock {
+                padding: 10px 10px 20px;
+            }
+            .input-container {
+                border-radius: 28px;
+                padding: 8px 10px 8px 16px;
+            }
+            .tool-btn {
+                width: 38px;
+                height: 38px;
+            }
+            .btn-send,
+            .btn-stop {
+                width: 40px;
+                height: 40px;
+            }
+            .chat-container {
+                padding: 60px 10px 160px;
+            }
+            .user-message {
+                font-size: 14.5px;
+                max-width: 90%;
+            }
+            .bot-content {
+                font-size: 14.5px;
+            }
+            .welcome-center h1 {
+                font-size: 28px;
+            }
         }
 
         @media (max-width: 600px) {
-            .chat-container { padding: 50px 8px 140px; }
-            .input-container { padding: 6px 8px 6px 12px; border-radius: 24px; }
-            .tool-btn { width: 34px; height: 34px; }
-            .btn-send, .btn-stop { width: 36px; height: 36px; }
-            .chat-input { font-size: 14px; }
-            .user-message { max-width: 92%; font-size: 14px; }
-            .bot-content { font-size: 14px; }
-            .welcome-center h1 { font-size: 26px; }
+            .chat-container {
+                padding: 50px 8px 140px;
+            }
+            .input-container {
+                padding: 6px 8px 6px 12px;
+                border-radius: 24px;
+            }
+            .tool-btn {
+                width: 34px;
+                height: 34px;
+            }
+            .btn-send,
+            .btn-stop {
+                width: 36px;
+                height: 36px;
+            }
+            .chat-input {
+                font-size: 14px;
+            }
+            .user-message {
+                max-width: 92%;
+                font-size: 14px;
+            }
+            .bot-content {
+                font-size: 14px;
+            }
+            .welcome-center h1 {
+                font-size: 26px;
+            }
         }
     </style>
 </head>