feat(frontend): enforce light mode and add glass design

frontend/src/app/globals.css

@@ -12,11 +12,38 @@
   --font-mono: ui-monospace, monospace;
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
+
+.glass-panel {
+  background: rgba(255, 255, 255, 0.6);
+  border: 1px solid rgba(255, 255, 255, 0.8);
+  backdrop-filter: blur(12px);
+  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+  position: relative;
+  overflow: hidden;
+}
+
+.glass-panel::before,
+.glass-panel::after {
+  content: "";
+  position: absolute;
+  pointer-events: none;
+}
+
+.glass-panel::before {
+  top: -20%;
+  left: -20%;
+  width: 50%;
+  height: 50%;
+  background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.9), transparent);
+  transform: rotate(45deg);
+}
+
+.glass-panel::after {
+  bottom: -20%;
+  right: -20%;
+  width: 60%;
+  height: 60%;
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.4), transparent);
 }
 
 body {

frontend/src/components/ChatApp.tsx

@@ -51,8 +51,8 @@ export default function ChatApp() {
   };
 
   return (
-    <div className="flex flex-col items-center h-screen bg-gradient-to-br from-gray-950/60 to-gray-800/60 text-white p-4">
-      <div className="w-full max-w-3xl flex flex-col flex-1 backdrop-blur-lg rounded-lg border border-white/20 bg-white/10 shadow-xl overflow-hidden">
+    <div className="flex flex-col items-center h-screen bg-gradient-to-br from-white to-gray-100 text-gray-900 p-4">
+      <div className="w-full max-w-3xl flex flex-col flex-1 glass-panel rounded-lg overflow-hidden">
         <MessageList ref={listRef} messages={messages} />
         <MessageInput value={input} onChange={setInput} onSend={sendMessage} disabled={loading} />
       </div>

frontend/src/components/MessageInput.tsx

@@ -18,7 +18,7 @@ export default function MessageInput({ value, onChange, onSend, disabled }: Mess
     <form onSubmit={handleSubmit} className="flex gap-2 p-2">
       <input
         type="text"
-        className="flex-1 bg-white/20 backdrop-blur-md border border-white/30 text-white px-3 py-2 rounded-md focus:outline-none"
+        className="flex-1 bg-white/60 backdrop-blur-sm border border-gray-300 text-gray-900 px-3 py-2 rounded-md focus:outline-none"
         value={value}
         onChange={(e) => onChange(e.target.value)}
         placeholder="Type your message..."

frontend/src/components/MessageItem.tsx

@@ -12,8 +12,8 @@ interface MessageItemProps {
 export default function MessageItem({ message }: MessageItemProps) {
   const alignment = message.role === 'user' ? 'items-end' : 'items-start';
   return (
-    <div className={`flex flex-col ${alignment} animate-fadeIn`}>      
-      <div className="w-full max-w-xl p-3 my-2 bg-white/10 border border-white/30 backdrop-blur-lg rounded-lg shadow-md">
+    <div className={`flex flex-col ${alignment} animate-fadeIn`}>
+      <div className="w-full max-w-xl p-3 my-2 glass-panel rounded-lg shadow-md">
         <p className="whitespace-pre-wrap">{message.content}</p>
       </div>
     </div>

frontend/src/components/ui/GlassButton.tsx

@@ -7,7 +7,7 @@ interface GlassButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>
 export default function GlassButton({ children, className = '', ...props }: GlassButtonProps) {
   return (
     <button
-      className={`bg-white/20 backdrop-blur-md border border-white/30 text-white px-4 py-2 rounded-md shadow-lg transition-all hover:bg-white/30 active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed ${className}`}
+      className={`bg-white/60 backdrop-blur-sm border border-gray-300 text-gray-900 px-4 py-2 rounded-md shadow-lg transition-all hover:bg-white active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed ${className}`}
       {...props}
     >
       {children}