Update index.html

index.html

@@ -54,164 +54,128 @@ tailwind.config = {
   }
 }
 </script>
+<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;700&family=Share+Tech+Mono&display=swap" rel="stylesheet">
 <style>
   * { box-sizing: border-box; }
-  body { background: #0d0d0f; font-family: 'DM Mono', monospace; }
-/* ── Theme variables ─────────────────────────────── */
+  body { font-family: 'JetBrains Mono', monospace; }
+
   body {
-    --c-bg:      #0d0d0f;
-    --c-surface: #1a1a1f;
-    --c-border:  #2a2a32;
-    --c-mist:    #3d3d48;
-    --c-fog:     #6b6b7a;
-    --c-ghost:   #9898a8;
-    --c-pearl:   #c8c8d8;
-    --c-cream:   #e8e4dc;
-    --c-text:    #c8c8d8;
+    --bg:        #020a02;
+    --surface:   #050f05;
+    --border:    #0f2a0f;
+    --mist:      #0a1f0a;
+    --fog:       #2a5a2a;
+    --ghost:     #4a8a4a;
+    --pearl:     #70d870;
+    --cream:     #a0ffa0;
+    --accent:    #00ff41;
+    --accent2:   #00cc33;
+    --ink:       #020a02;
+    --user-bg:   #00ff41;
+    --user-text: #020a02;
+    --danger:    #ff4444;
+    --safe:      #44ff88;
+    --prose:     #70d870;
+    --code-bg:   rgba(0,255,65,0.08);
+    --code-col:  #00ff41;
+    --pre-bg:    #020702;
   }
   body.light {
-    --c-bg:      #f5f0e8;
-    --c-surface: #ede8df;
-    --c-border:  #d8d0c4;
-    --c-mist:    #c8bfb0;
-    --c-fog:     #8a8070;
-    --c-ghost:   #6a6058;
-    --c-pearl:   #3a3028;
-    --c-cream:   #1a1208;
-    --c-text:    #3a3028;
+    --bg:        #f0fff0;
+    --surface:   #e4f5e4;
+    --border:    #b0d8b0;
+    --mist:      #c8e8c8;
+    --fog:       #5a8a5a;
+    --ghost:     #3a6a3a;
+    --pearl:     #1a3a1a;
+    --cream:     #0a1f0a;
+    --accent:    #1a6a1a;
+    --accent2:   #0f4f0f;
+    --ink:       #f0fff0;
+    --user-bg:   #1a6a1a;
+    --user-text: #f0fff0;
+    --danger:    #cc2222;
+    --safe:      #227722;
+    --prose:     #1a3a1a;
+    --code-bg:   rgba(0,100,0,0.08);
+    --code-col:  #0f5f0f;
+    --pre-bg:    #dff0df;
   }
 
-  
-  /* Scrollbar */
-  ::-webkit-scrollbar { width: 4px; }
-  ::-webkit-scrollbar-track { background: transparent; }
-  ::-webkit-scrollbar-thumb { background: #3d3d48; border-radius: 2px; }
-  ::-webkit-scrollbar-thumb:hover { background: #6b6b7a; }
-
-  /* Prose styles for markdown */
-  .prose-msg { line-height: 1.65; color: #c8c8d8; }
-  .prose-msg p { margin: 0 0 0.6em; }
-  .prose-msg p:last-child { margin-bottom: 0; }
-  .prose-msg code {
-    font-family: 'DM Mono', monospace;
-    background: rgba(255,255,255,0.08);
-    padding: 0.1em 0.35em;
-    border-radius: 3px;
-    font-size: 0.875em;
-    color: #d4a853;
-  }
-  .prose-msg pre {
-    background: #111116;
-    border: 1px solid #2a2a32;
-    border-radius: 6px;
-    padding: 12px 14px;
-    overflow-x: auto;
-    margin: 0.6em 0;
-  }
-  .prose-msg pre code {
-    background: transparent;
-    padding: 0;
-    color: #c8c8d8;
-    font-size: 0.82em;
+  body                { background: var(--bg); color: var(--pearl); }
+  #sidebar            { background: var(--surface); border-color: var(--border); }
+  header              { background: var(--surface); border-color: var(--border); }
+  .bg-smoke           { background: var(--surface) !important; }
+  .bg-ash             { background: var(--mist) !important; }
+  .bg-mist            { background: var(--mist) !important; }
+  .hover\:bg-ash:hover  { background: var(--border) !important; }
+  .hover\:bg-mist:hover { background: var(--mist) !important; }
+  .border-ash         { border-color: var(--border) !important; }
+  .border-mist        { border-color: var(--mist) !important; }
+  .text-fog           { color: var(--fog) !important; }
+  .text-ghost         { color: var(--ghost) !important; }
+  .text-pearl         { color: var(--pearl) !important; }
+  .text-cream         { color: var(--cream) !important; }
+  .text-amber         { color: var(--accent) !important; }
+  .text-ink           { color: var(--user-text) !important; }
+  .text-rose          { color: var(--danger) !important; }
+  .text-sage          { color: var(--safe) !important; }
+  .bg-amber           { background: var(--user-bg) !important; }
+  .hover\:bg-ember:hover { background: var(--accent2) !important; }
+  .bg-amber\/10       { background: color-mix(in srgb, var(--accent) 10%, transparent) !important; }
+  .bg-amber\/20       { background: color-mix(in srgb, var(--accent) 20%, transparent) !important; }
+  .border-amber\/25   { border-color: color-mix(in srgb, var(--accent) 25%, transparent) !important; }
+  .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-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);
   }
-  .prose-msg h1,.prose-msg h2,.prose-msg h3 {
-    font-family: 'Fraunces', serif;
-    color: #e8e4dc;
-    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; }
+
+  /* Square corners everywhere */
+  .rounded-xl,.rounded-lg,.rounded-md,.rounded-2xl,.rounded,.rounded-tr-sm { border-radius: 2px !important; }
+
+  .prose-msg { line-height: 1.7; color: var(--prose); font-family: 'JetBrains Mono', monospace; }
+  .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 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 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 #d4a853;
-    padding-left: 0.75em;
-    color: #9898a8;
-    margin: 0.5em 0;
-    font-style: italic;
-  }
-  .prose-msg a { color: #d4a853; text-decoration: underline; }
-  .prose-msg strong { color: #e8e4dc; font-weight: 500; }
+  .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 table { border-collapse: collapse; width: 100%; margin: 0.5em 0; font-size: 0.85em; }
-  .prose-msg th { background: #2a2a32; color: #e8e4dc; padding: 5px 8px; text-align: left; }
-  .prose-msg td { border-top: 1px solid #2a2a32; padding: 5px 8px; }
-
-  /* User bubble prose */
-  .prose-user { line-height: 1.65; color: #1a1a1f; }
-  .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.12); padding: 0.1em 0.3em; border-radius: 3px; font-size: 0.875em; }
-  .prose-user pre { background: rgba(0,0,0,0.15); border-radius: 5px; padding: 10px 12px; overflow-x: auto; margin: 0.5em 0; }
-  .prose-user strong { font-weight: 500; }
-
-  /* Textarea auto-resize trick */
-  textarea { resize: none; overflow: hidden; }
+  .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-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; }
 
-  /* Sidebar transition */
+  textarea { resize: none; overflow: hidden; }
   #sidebar { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
   #overlay { transition: opacity 0.3s ease; }
-
-  /* Thinking dots */
-  .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; }
-
-  .msg-anim { opacity: 0; animation: fadeUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
-
-  /* Model select */
+  .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); }
   select { -webkit-appearance: none; appearance: none; }
-
-  /* Focus ring override */
-  textarea:focus, input:focus, select:focus { outline: none; box-shadow: 0 0 0 1.5px #d4a853; }
-
-/* Apply variables to all the fixed-color elements */
-  body                { background: var(--c-bg); }
-  #sidebar            { background: var(--c-surface); border-color: var(--c-border); }
-  header              { background: var(--c-surface); border-color: var(--c-border); }
-  .border-ash         { border-color: var(--c-border) !important; }
-  .bg-smoke           { background: var(--c-surface) !important; }
-  .bg-ash             { background: var(--c-mist) !important; }
-  .bg-mist            { background: var(--c-mist) !important; }
-  .text-fog           { color: var(--c-fog) !important; }
-  .text-ghost         { color: var(--c-ghost) !important; }
-  .text-pearl         { color: var(--c-pearl) !important; }
-  .text-cream         { color: var(--c-cream) !important; }
-  .border-mist        { border-color: var(--c-mist) !important; }
-
-  /* Prose text in light mode */
-  body.light .prose-msg          { color: var(--c-text); }
-  body.light .prose-msg code     { background: rgba(0,0,0,0.08); color: #b06000; }
-  body.light .prose-msg pre      { background: #e8e0d4; border-color: var(--c-border); }
-  body.light .prose-msg pre code { color: var(--c-text); }
-  body.light .prose-msg strong   { color: var(--c-cream); }
-  body.light .prose-msg blockquote { color: var(--c-ghost); }
-
-  /* Input/select backgrounds */
-  body.light textarea,
-  body.light input[type="text"],
-  body.light input[type="password"],
-  body.light input[type="number"],
-  body.light select               { background: var(--c-surface); color: var(--c-cream); }
-
-  /* Conversation list hover */
-  body.light #conv-list [class*="hover:bg-ash"]:hover { background: var(--c-border) !important; }
-  body.light #conv-list [class*="bg-mist"]            { background: var(--c-mist) !important; }
-
-  /* Message container */
-  body.light #messages            { background: var(--c-bg); }
-
-  /* Scrollbar in light mode */
-  body.light ::-webkit-scrollbar-thumb { background: var(--c-mist); }
-
-
-
-
+  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); }
+  #input-footer { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
 </style>
 </head>
-<body class="h-screen flex overflow-hidden text-pearl">
-
+<body class="h-screen flex overflow-hidden">
 <!-- Privacy notice -->
 <div id="privacy-modal" class="fixed inset-0 z-50 flex items-center justify-center bg-black/70 backdrop-blur-sm">
   <div class="bg-smoke border border-ash rounded-xl p-6 max-w-sm w-full mx-4 shadow-2xl">