make chat cards more modern but don't make absurt designs. Minimal and more modern.

index.html

@@ -67,17 +67,17 @@
 <!-- Messages Container -->
             <div id="chatContainer" class="flex-1 overflow-y-auto scroll-smooth p-4 space-y-4" style="scrollbar-width: thin; scrollbar-color: #525252 #18181b;">
                 <!-- AI Welcome Message -->
-                <div class="flex items-start space-x-2 message-slide-in">
-                <div class="w-8 h-8 rounded-full bg-zinc-800 flex items-center justify-center flex-shrink-0">
-                    <i data-feather="cpu" class="w-4 h-4 text-zinc-400"></i>
-                </div>
-                <div class="flex-1 max-w-3xl">
-                    <div class="bg-zinc-900 rounded-lg p-3">
-                        <p class="text-white text-sm">Hello!</p>
-                        <p class="text-zinc-500 text-sm mt-1">How can I help you today?</p>
+                <div class="flex items-start gap-3 message-slide-in group">
+                    <div class="w-9 h-9 rounded-xl bg-gradient-to-br from-zinc-800 to-zinc-900 flex items-center justify-center flex-shrink-0 ring-1 ring-zinc-800/50 group-hover:ring-zinc-700/50 transition-all duration-200">
+                        <i data-feather="cpu" class="w-4.5 h-4.5 text-zinc-300"></i>
+                    </div>
+                    <div class="flex-1 max-w-4xl">
+                        <div class="bg-zinc-900/60 backdrop-blur-sm rounded-2xl p-4 border border-zinc-800/50 hover:border-zinc-700/50 transition-all duration-200">
+                            <p class="text-white text-sm leading-relaxed">Hello!</p>
+                            <p class="text-zinc-400 text-sm mt-2 leading-relaxed">How can I help you today?</p>
+                        </div>
                     </div>
                 </div>
-</div>
 <div id="typingIndicator" class="hidden flex items-start space-x-3">
                     <div class="w-8 h-8 rounded-full bg-zinc-800 flex items-center justify-center flex-shrink-0">
                         <i data-feather="cpu" class="w-4 h-4 text-zinc-400"></i>

script.js

@@ -119,24 +119,24 @@ function addMessage(content, sender) {
     messageDiv.className = `flex items-start space-x-3 message-slide-in ${sender === 'user' ? 'flex-row-reverse space-x-reverse' : ''}`;
     if (sender === 'user') {
         messageDiv.innerHTML = `
-            <div class="w-8 h-8 rounded-full bg-zinc-800 flex items-center justify-center flex-shrink-0">
-                <i data-feather="user" class="w-4 h-4 text-zinc-400"></i>
+            <div class="w-9 h-9 rounded-xl bg-gradient-to-br from-blue-600 to-blue-700 flex items-center justify-center flex-shrink-0 ring-1 ring-blue-600/30 group-hover:ring-blue-500/50 transition-all duration-200">
+                <i data-feather="user" class="w-4.5 h-4.5 text-white"></i>
             </div>
-            <div class="flex-1 max-w-3xl">
-                <div class="bg-zinc-700 rounded-lg p-3">
-                    <p class="text-white text-sm break-words">${content}</p>
+            <div class="flex-1 max-w-4xl">
+                <div class="bg-gradient-to-br from-zinc-800/80 to-zinc-900/80 backdrop-blur-sm rounded-2xl p-4 border border-zinc-700/50 hover:border-zinc-600/50 transition-all duration-200 shadow-sm shadow-zinc-900/20">
+                    <p class="text-white text-sm leading-relaxed break-words">${content}</p>
                 </div>
             </div>
         `;
     } else {
         const processedContent = marked.parse(content);
         messageDiv.innerHTML = `
-            <div class="w-8 h-8 rounded-full bg-zinc-700 flex items-center justify-center flex-shrink-0">
-                <i data-feather="cpu" class="w-4 h-4 text-zinc-300"></i>
+            <div class="w-9 h-9 rounded-xl bg-gradient-to-br from-zinc-800 to-zinc-900 flex items-center justify-center flex-shrink-0 ring-1 ring-zinc-800/50 group-hover:ring-zinc-700/50 transition-all duration-200">
+                <i data-feather="cpu" class="w-4.5 h-4.5 text-zinc-300"></i>
             </div>
-            <div class="flex-1 max-w-3xl">
-                <div class="bg-zinc-800 rounded-lg p-3">
-                    <div class="markdown text-white text-sm">${processedContent}</div>
+            <div class="flex-1 max-w-4xl">
+                <div class="bg-gradient-to-br from-zinc-900/60 to-zinc-950/60 backdrop-blur-sm rounded-2xl p-4 border border-zinc-800/50 hover:border-zinc-700/50 transition-all duration-200 shadow-sm shadow-zinc-900/20">
+                    <div class="markdown text-white text-sm leading-relaxed">${processedContent}</div>
                 </div>
             </div>
         `;
@@ -361,14 +361,14 @@ function clearChat() {
     if (confirm('Are you sure you want to clear the entire chat history?')) {
         const chatContainer = document.getElementById('chatContainer');
         chatContainer.innerHTML = `
-            <div class="flex items-start space-x-2 message-slide-in">
-                <div class="w-8 h-8 rounded-full bg-zinc-800 flex items-center justify-center flex-shrink-0">
-                    <i data-feather="cpu" class="w-4 h-4 text-zinc-400"></i>
+            <div class="flex items-start gap-3 message-slide-in group">
+                <div class="w-9 h-9 rounded-xl bg-gradient-to-br from-zinc-800 to-zinc-900 flex items-center justify-center flex-shrink-0 ring-1 ring-zinc-800/50 group-hover:ring-zinc-700/50 transition-all duration-200">
+                    <i data-feather="cpu" class="w-4.5 h-4.5 text-zinc-300"></i>
                 </div>
-                <div class="flex-1 max-w-3xl">
-                    <div class="bg-zinc-900 rounded-lg p-3">
-                        <p class="text-white text-sm">Hello!</p>
-                        <p class="text-zinc-500 text-sm mt-1">How can I help you today?</p>
+                <div class="flex-1 max-w-4xl">
+                    <div class="bg-gradient-to-br from-zinc-900/60 to-zinc-950/60 backdrop-blur-sm rounded-2xl p-4 border border-zinc-800/50 hover:border-zinc-700/50 transition-all duration-200 shadow-sm shadow-zinc-900/20">
+                        <p class="text-white text-sm leading-relaxed">Hello!</p>
+                        <p class="text-zinc-400 text-sm mt-2 leading-relaxed">How can I help you today?</p>
                     </div>
                 </div>
             </div>

style.css

@@ -70,31 +70,100 @@ body {
 .float-animation {
     animation: float 3s ease-in-out infinite;
 }
-/* Markdown Styling */
-.markdown h1 { @apply text-lg font-bold text-white mb-2 mt-3; }
-.markdown h2 { @apply text-base font-semibold text-white mb-2 mt-2; }
-.markdown h3 { @apply text-sm font-medium text-white mb-1 mt-2; }
-.markdown p { @apply text-zinc-200 mb-2 leading-relaxed; }
-.markdown code { @apply bg-zinc-700 px-1 py-0.5 rounded text-xs text-green-400; }
+/* Enhanced Message Cards */
+.message-slide-in {
+    animation: slideInFade 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+@keyframes slideInFade {
+    from {
+        opacity: 0;
+        transform: translateY(10px) scale(0.98);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+    }
+}
+
+/* Modern Message Container */
+.max-w-4xl {
+    max-width: 56rem;
+}
+
+/* Enhanced Markdown Styling */
+.markdown h1 { 
+    @apply text-lg font-semibold text-white mb-3 mt-4 tracking-tight;
+    background: linear-gradient(to right, #ffffff, #e5e5e5);
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+.markdown h2 { 
+    @apply text-base font-medium text-white mb-3 mt-3 tracking-tight;
+    color: #f4f4f5;
+}
+.markdown h3 { 
+    @apply text-sm font-medium text-zinc-200 mb-2 mt-3 tracking-tight;
+}
+.markdown p { 
+    @apply text-zinc-100 mb-3 leading-relaxed;
+    line-height: 1.6;
+}
+.markdown code { 
+    @apply bg-zinc-800/60 px-2 py-1 rounded-md text-xs text-emerald-400 font-mono;
+    border: 1px solid rgba(34, 197, 94, 0.1);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+}
 .markdown pre {
-    @apply bg-zinc-900 rounded p-2 overflow-x-auto mb-2 text-xs;
-    font-family: 'Courier New', monospace;
+    @apply bg-gradient-to-br from-zinc-900 to-zinc-950 rounded-xl p-4 overflow-x-auto mb-4 text-xs;
+    font-family: 'Fira Code', 'Monaco', 'Courier New', monospace;
+    border: 1px solid #27272a;
+    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
+}
+.markdown pre code { 
+    @apply bg-transparent text-zinc-200 py-0 px-0;
+    border: none;
+    box-shadow: none;
+}
+.markdown ul { 
+    @apply list-disc list-inside text-zinc-100 mb-3 space-y-2 text-sm;
+    line-height: 1.6;
+}
+.markdown ol { 
+    @apply list-decimal list-inside text-zinc-100 mb-3 space-y-2 text-sm;
+    line-height: 1.6;
 }
-.markdown pre code { @apply bg-transparent text-zinc-300; }
-.markdown ul { @apply list-disc list-inside text-zinc-200 mb-2 space-y-1 text-sm; }
-.markdown ol { @apply list-decimal list-inside text-zinc-200 mb-2 space-y-1 text-sm; }
 .markdown blockquote {
-    @apply border-l-2 border-zinc-600 pl-3 italic text-zinc-400 mb-2 text-sm;
+    @apply border-l-3 border-zinc-600 pl-4 italic text-zinc-300 mb-3 text-sm;
+    background: linear-gradient(to right, rgba(113, 113, 122, 0.1), transparent);
+    padding: 12px 16px;
+    border-radius: 0 8px 8px 0;
+    line-height: 1.6;
+}
+.markdown a { 
+    @apply text-blue-400 underline decoration-1 underline-offset-2 hover:text-blue-300 hover:decoration-blue-300 transition-colors duration-200 text-sm;
 }
-.markdown a { @apply text-white underline hover:text-zinc-300 text-sm; }
 .markdown table {
-    @apply w-full border-collapse mb-2 text-sm;
+    @apply w-full border-collapse mb-4 text-sm rounded-lg overflow-hidden;
+    border: 1px solid #27272a;
 }
 .markdown th {
-    @apply border border-zinc-700 px-2 py-1 bg-zinc-900 text-left text-sm;
+    @apply border border-zinc-700 px-3 py-2 bg-zinc-900/80 text-left text-sm font-medium text-zinc-200;
 }
 .markdown td {
-    @apply border border-zinc-700 px-2 py-1 text-zinc-300 text-sm;
+    @apply border border-zinc-800 px-3 py-2 text-zinc-300;
+}
+
+/* Message hover effects */
+.group:hover .group-hover\\:ring-zinc-700\\/50 {
+    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px * var(--tw-ring-inset-width)) var(--tw-ring-color);
+    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+}
+
+.group:hover .group-hover\\:ring-blue-500\\/50 {
+    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px * var(--tw-ring-inset-width)) var(--tw-ring-color);
+    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
 }
 /* Transition Classes */
 .transition-all {