Update index.html

index.html

@@ -130,50 +130,75 @@ tailwind.config = {
   .from-amber         { --tw-gradient-from: var(--accent) !important; }
   .to-ember           { --tw-gradient-to: var(--accent2) !important; }
   .bg-rose            { background: var(--danger) !important; }
-  .hover\:text-rose:hover { color: var(--danger) !important; }
-  .hover\:text-sage:hover { color: var(--safe) !important; }
+  .hover\:text-rose:hover  { color: var(--danger) !important; }
+  .hover\:text-sage:hover  { color: var(--safe) !important; }
   .hover\:text-pearl:hover { color: var(--pearl) !important; }
   textarea, input, select { background: var(--mist); color: var(--cream); }
 
-  /* Scanline overlay (dark mode only) */
-  body:not(.light)::after {
-    content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 9999;
-    background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.04) 2px, rgba(0,0,0,0.04) 4px);
+  body:not(.light) {
+    background-image:
+      radial-gradient(1px 1px at 20% 30%, rgba(160,200,255,0.4) 0%, transparent 100%),
+      radial-gradient(1px 1px at 75% 15%, rgba(160,200,255,0.3) 0%, transparent 100%),
+      radial-gradient(1px 1px at 55% 70%, rgba(160,200,255,0.25) 0%, transparent 100%),
+      radial-gradient(1px 1px at 90% 55%, rgba(160,200,255,0.2) 0%, transparent 100%),
+      radial-gradient(1px 1px at 10% 85%, rgba(160,200,255,0.2) 0%, transparent 100%);
   }
 
-  /* Square corners everywhere */
-  .rounded-xl,.rounded-lg,.rounded-md,.rounded-2xl,.rounded,.rounded-tr-sm { border-radius: 2px !important; }
+  body:not(.light) #sidebar::before {
+    content: '';
+    position: absolute;
+    top: 0; left: 0; right: 0;
+    height: 1px;
+    background: linear-gradient(90deg, transparent, var(--accent), transparent);
+    opacity: 0.5;
+  }
+  /*#sidebar { position: relative; }*/
+
+  .font-display { font-family: 'Syne', sans-serif !important; }
 
-  .prose-msg { line-height: 1.7; color: var(--prose); font-family: 'JetBrains Mono', monospace; }
+  .prose-msg { line-height: 1.7; color: var(--prose); }
   .prose-msg p { margin: 0 0 0.6em; } .prose-msg p:last-child { margin-bottom: 0; }
-  .prose-msg code { font-family: 'JetBrains Mono', monospace; background: var(--code-bg); padding: 0.1em 0.35em; border-radius: 2px; font-size: 0.875em; color: var(--code-col); border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent); }
-  .prose-msg pre { background: var(--pre-bg); border: 1px solid var(--border); border-radius: 2px; padding: 12px 14px; overflow-x: auto; margin: 0.6em 0; }
+  .prose-msg code { font-family: 'Intel One Mono', 'Fira Code', monospace; background: var(--code-bg); padding: 0.1em 0.35em; border-radius: 4px; font-size: 0.875em; color: var(--code-col); border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent); }
+  .prose-msg pre { background: var(--pre-bg); border: 1px solid var(--border); border-left: 2px solid var(--accent); border-radius: 6px; padding: 12px 14px; overflow-x: auto; margin: 0.6em 0; }
   .prose-msg pre code { background: transparent; border: none; padding: 0; color: var(--prose); font-size: 0.82em; }
-  .prose-msg h1,.prose-msg h2,.prose-msg h3 { font-family: 'Share Tech Mono', monospace; color: var(--accent); margin: 0.8em 0 0.3em; font-weight: 400; text-transform: uppercase; letter-spacing: 0.1em; }
-  .prose-msg h1 { font-size: 1.1em; } .prose-msg h2 { font-size: 1em; } .prose-msg h3 { font-size: 0.95em; }
+  .prose-msg h1,.prose-msg h2,.prose-msg h3 { font-family: 'Syne', sans-serif; color: var(--cream); margin: 0.8em 0 0.3em; font-weight: 700; }
+  .prose-msg h1 { font-size: 1.25em; } .prose-msg h2 { font-size: 1.1em; } .prose-msg h3 { font-size: 1em; }
   .prose-msg ul, .prose-msg ol { padding-left: 1.25em; margin: 0.4em 0 0.6em; }
   .prose-msg li::marker { color: var(--accent); }
   .prose-msg li { margin: 0.2em 0; }
-  .prose-msg blockquote { border-left: 2px solid var(--accent); padding-left: 0.75em; color: var(--ghost); margin: 0.5em 0; }
-  .prose-msg a { color: var(--accent); }
-  .prose-msg strong { color: var(--cream); }
+  .prose-msg blockquote { border-left: 2px solid var(--accent); padding-left: 0.75em; color: var(--ghost); margin: 0.5em 0; font-style: italic; }
+  .prose-msg a { color: var(--accent); text-decoration: underline; }
+  .prose-msg strong { color: var(--cream); font-weight: 500; }
   .prose-msg table { border-collapse: collapse; width: 100%; margin: 0.5em 0; font-size: 0.85em; }
-  .prose-msg th { background: var(--mist); color: var(--accent); padding: 5px 8px; text-align: left; border: 1px solid var(--border); }
-  .prose-msg td { border: 1px solid var(--border); padding: 5px 8px; }
+  .prose-msg th { background: var(--mist); color: var(--cream); padding: 5px 8px; text-align: left; border-bottom: 1px solid var(--accent); }
+  .prose-msg td { border-top: 1px solid var(--border); padding: 5px 8px; }
 
   .prose-user { line-height: 1.65; color: var(--user-text); }
   .prose-user p { margin: 0 0 0.5em; } .prose-user p:last-child { margin-bottom: 0; }
-  .prose-user code { background: rgba(0,0,0,0.15); padding: 0.1em 0.3em; border-radius: 2px; font-size: 0.875em; }
-  .prose-user strong { font-weight: 600; }
+  .prose-user code { background: rgba(255,255,255,0.1); padding: 0.1em 0.3em; border-radius: 3px; font-size: 0.875em; }
+  .prose-user strong { font-weight: 500; }
 
   textarea { resize: none; overflow: hidden; }
   #sidebar { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
   #overlay { transition: opacity 0.3s ease; }
-  .dot-1 { animation: blink 1.2s 0s infinite; color: var(--accent); }
-  .dot-2 { animation: blink 1.2s 0.2s infinite; color: var(--accent); }
-  .dot-3 { animation: blink 1.2s 0.4s infinite; color: var(--accent); }
+  .dot-1 { animation: blink 1.2s 0s infinite; }
+  .dot-2 { animation: blink 1.2s 0.2s infinite; }
+  .dot-3 { animation: blink 1.2s 0.4s infinite; }
   select { -webkit-appearance: none; appearance: none; }
-  textarea:focus, input:focus, select:focus { outline: none; box-shadow: 0 0 0 1px var(--accent), 0 0 8px color-mix(in srgb, var(--accent) 30%, transparent); }
+  textarea:focus, input:focus, select:focus { outline: none; box-shadow: 0 0 0 1.5px var(--accent), 0 0 12px color-mix(in srgb, var(--accent) 20%, transparent); }
+  
+  /* Tool panel styles */
+  #tool-panel, #file-explorer-panel { transition: all 0.3s ease; }
+  .tool-item { transition: all 0.2s ease; }
+  .tool-item:hover { transform: translateX(4px); }
+  .tool-item.active { background: var(--accent); color: var(--ink); }
+
+  /* File Explorer Styles */
+  .file-tree-item { transition: all 0.15s ease; }
+  .file-tree-item:hover { background: var(--mist); }
+  .file-tree-item.active { background: var(--accent) !important; color: var(--ink); }
+  .file-tree-children { border-left: 1px solid var(--border); margin-left: 11px; padding-left: 8px; }
+  .file-explorer-editor { animation: slideIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
 
 /* CRITICAL MOBILE FIX - Main container */
 @media (max-width: 768px) {
@@ -1152,4 +1177,4 @@ function closeSidebar() {
 init();
 </script>
 </body>
-</html>
+</html>