Update index.html

index.html

@@ -54,163 +54,119 @@ tailwind.config = {
   }
 }
 </script>
+<link href="https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300&family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,700;1,9..144,300&display=swap" rel="stylesheet">
 <style>
   * { box-sizing: border-box; }
-  body { background: #0d0d0f; font-family: 'DM Mono', monospace; }
-/* ── Theme variables ─────────────────────────────── */
+  body { font-family: 'DM 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:        #0d0d0f;
+    --surface:   #1a1a1f;
+    --border:    #2a2a32;
+    --mist:      #3d3d48;
+    --fog:       #6b6b7a;
+    --ghost:     #9898a8;
+    --pearl:     #c8c8d8;
+    --cream:     #e8e4dc;
+    --accent:    #d4a853;
+    --accent2:   #c47c3a;
+    --ink:       #0d0d0f;
+    --user-bg:   #d4a853;
+    --user-text: #0d0d0f;
+    --danger:    #b85c5c;
+    --safe:      #6b8f71;
+    --prose:     #c8c8d8;
+    --code-bg:   rgba(255,255,255,0.08);
+    --code-col:  #d4a853;
+    --pre-bg:    #111116;
   }
   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:        #f5f0e8;
+    --surface:   #ede8df;
+    --border:    #d8d0c4;
+    --mist:      #cfc7b8;
+    --fog:       #8a8070;
+    --ghost:     #6a6058;
+    --pearl:     #3a3028;
+    --cream:     #1a1208;
+    --accent:    #9a6010;
+    --accent2:   #7a4a08;
+    --ink:       #f5f0e8;
+    --user-bg:   #9a6010;
+    --user-text: #f5f0e8;
+    --danger:    #993030;
+    --safe:      #3a6a3a;
+    --prose:     #3a3028;
+    --code-bg:   rgba(0,0,0,0.07);
+    --code-col:  #7a4a08;
+    --pre-bg:    #e4ddd0;
   }
 
-  
-  /* 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;
-  }
-  .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; }
+  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); }
+
+  .prose-msg { line-height: 1.65; color: var(--prose); }
+  .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: var(--code-bg); padding: 0.1em 0.35em; border-radius: 3px; font-size: 0.875em; color: var(--code-col); }
+  .prose-msg pre { background: var(--pre-bg); border: 1px solid var(--border); border-radius: 6px; padding: 12px 14px; overflow-x: auto; margin: 0.6em 0; }
+  .prose-msg pre code { background: transparent; padding: 0; color: var(--prose); font-size: 0.82em; }
+  .prose-msg h1,.prose-msg h2,.prose-msg h3 { font-family: 'Fraunces', 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 { 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; 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: #2a2a32; color: #e8e4dc; padding: 5px 8px; text-align: left; }
-  .prose-msg td { border-top: 1px solid #2a2a32; padding: 5px 8px; }
+  .prose-msg th { background: var(--mist); color: var(--cream); padding: 5px 8px; text-align: left; }
+  .prose-msg td { border-top: 1px solid var(--border); 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 { 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.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; }
-
-  /* Sidebar transition */
   #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 */
   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 1.5px var(--accent); }
+  #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">
@@ -579,7 +535,7 @@ tailwind.config = {
   </div>
 
   <!-- Input -->
-  <div class="border-t border-ash bg-smoke px-4 py-3 flex-shrink-0">
+  <div id="input-footer" class="border-t border-ash bg-smoke px-4 py-3 flex-shrink-0">
     <div class="flex items-end gap-2 bg-ash rounded-lg border border-mist focus-within:border-amber transition-colors px-3 py-2">
       <textarea id="user-input" 
         placeholder="Send a message..."