From e5c7ebb388b2f11735b268c4eacd92e688d1b69d Mon Sep 17 00:00:00 2001
From: Jack Kingsman <jack.kingsman@gmail.com>
Date: Wed, 11 Mar 2026 21:05:55 -0700
Subject: [PATCH] Tweak the win95 theme coloring a bit

---
 frontend/src/components/ChatHeader.tsx   |  2 +-
 frontend/src/components/MessageInput.tsx |  2 +-
 frontend/src/themes.css                  | 80 ++++++++++++++++++++++++
 3 files changed, 82 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/ChatHeader.tsx b/frontend/src/components/ChatHeader.tsx
index ecfac33..fe247c7 100644
--- a/frontend/src/components/ChatHeader.tsx
+++ b/frontend/src/components/ChatHeader.tsx
@@ -94,7 +94,7 @@ export function ChatHeader({
   };
 
   return (
-    <header className="flex justify-between items-start px-4 py-2.5 border-b border-border gap-2">
+    <header className="conversation-header flex justify-between items-start px-4 py-2.5 border-b border-border gap-2">
       <span className="flex min-w-0 flex-1 items-start gap-2">
         {conversation.type === 'contact' && onOpenContactInfo && (
           <span
diff --git a/frontend/src/components/MessageInput.tsx b/frontend/src/components/MessageInput.tsx
index 3d32980..49e6f4a 100644
--- a/frontend/src/components/MessageInput.tsx
+++ b/frontend/src/components/MessageInput.tsx
@@ -150,7 +150,7 @@ export const MessageInput = forwardRef<MessageInputHandle, MessageInputProps>(fu
 
   return (
     <form
-      className="px-4 py-2.5 border-t border-border flex flex-col gap-1"
+      className="message-input-shell px-4 py-2.5 border-t border-border flex flex-col gap-1"
       onSubmit={handleSubmit}
       autoComplete="off"
     >
diff --git a/frontend/src/themes.css b/frontend/src/themes.css
index cdc9943..b2a477d 100644
--- a/frontend/src/themes.css
+++ b/frontend/src/themes.css
@@ -153,6 +153,86 @@
     inset -1px -1px 0 hsl(0 0% 34%);
 }
 
+[data-theme='windows-95'] .conversation-header {
+  background: hsl(240 100% 25%);
+  color: hsl(0 0% 100%);
+  box-shadow:
+    inset 1px 1px 0 hsl(0 0% 100% / 0.35),
+    inset -1px -1px 0 hsl(240 100% 14%);
+}
+
+[data-theme='windows-95'] .conversation-header .text-muted-foreground,
+[data-theme='windows-95'] .conversation-header .text-foreground,
+[data-theme='windows-95'] .conversation-header .text-primary,
+[data-theme='windows-95'] .conversation-header button,
+[data-theme='windows-95'] .conversation-header [role='button'] {
+  color: hsl(0 0% 100%);
+}
+
+[data-theme='windows-95'] .conversation-header button {
+  background: hsl(240 100% 25%);
+  box-shadow: none;
+}
+
+[data-theme='windows-95'] .conversation-header .lucide-info {
+  color: hsl(0 0% 100%);
+}
+
+[data-theme='windows-95'] .message-input-shell {
+  background: hsl(0 0% 75%);
+  box-shadow:
+    inset 1px 1px 0 hsl(0 0% 100%),
+    inset -1px -1px 0 hsl(0 0% 34%);
+}
+
+@media (min-width: 768px) {
+  [data-theme='windows-95'] * {
+    scrollbar-width: auto;
+    scrollbar-color: hsl(0 0% 75%) hsl(0 0% 84%);
+  }
+
+  [data-theme='windows-95'] ::-webkit-scrollbar {
+    width: 16px;
+    height: 16px;
+  }
+
+  [data-theme='windows-95'] ::-webkit-scrollbar-track,
+  [data-theme='windows-95'] ::-webkit-scrollbar-corner {
+    background: hsl(0 0% 84%);
+    box-shadow:
+      inset 1px 1px 0 hsl(0 0% 100%),
+      inset -1px -1px 0 hsl(0 0% 34%);
+  }
+
+  [data-theme='windows-95'] ::-webkit-scrollbar-thumb {
+    background: hsl(0 0% 75%);
+    border-radius: 0;
+    box-shadow:
+      inset 1px 1px 0 hsl(0 0% 100%),
+      inset -1px -1px 0 hsl(0 0% 34%);
+  }
+
+  [data-theme='windows-95'] ::-webkit-scrollbar-thumb:hover {
+    background: hsl(0 0% 80%);
+  }
+
+  [data-theme='windows-95'] ::-webkit-scrollbar-thumb:active {
+    box-shadow:
+      inset -1px -1px 0 hsl(0 0% 100%),
+      inset 1px 1px 0 hsl(0 0% 34%);
+  }
+
+  [data-theme='windows-95'] ::-webkit-scrollbar-button:single-button {
+    display: block;
+    background: hsl(0 0% 75%);
+    height: 16px;
+    width: 16px;
+    box-shadow:
+      inset 1px 1px 0 hsl(0 0% 100%),
+      inset -1px -1px 0 hsl(0 0% 34%);
+  }
+}
+
 /* ── iPhone / iOS ─────────────────────────────────────────── */
 :root[data-theme='ios'] {
   --background: 240 18% 96%;