mesajlar fazla kompleks. Daha basit tasarım istiyorum mesajlara. Cardlara falan yani mesajlardaki. Ayrıca kullanıcı mesajında nedense kayma falan oluyor taşma oluyor yazıda. Chats kısmı da yok solda nedense.

components/sidebar.js

@@ -6,8 +6,8 @@ class CustomSidebar extends HTMLElement {
                 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
                 * { font-family: 'Inter', sans-serif; }
                 .sidebar {
-                    width: 320px;
-                    background: rgba(17, 24, 39, 0.95);
+                width: 280px;
+background: rgba(17, 24, 39, 0.95);
                     backdrop-filter: blur(20px);
                     -webkit-backdrop-filter: blur(20px);
                     border-right: 1px solid rgba(255, 255, 255, 0.1);
@@ -236,10 +236,9 @@ class CustomSidebar extends HTMLElement {
                     </svg>
                     New Chat
                 </button>
-                
                 <div class="nav-section">
                     <div class="nav-title">Recent Chats</div>
-<div class="chat-history" id="recentChats">
+                    <div class="chat-history" id="recentChats">
                         <div class="history-item">
                             <svg class="history-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                 <path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/>
@@ -270,10 +269,9 @@ class CustomSidebar extends HTMLElement {
                             </svg>
                             TypeScript best practices
                         </div>
-</div>
+                    </div>
                 </div>
-                
-                <div class="divider"></div>
+<div class="divider"></div>
                 
                 <div class="nav-section">
                     <div class="nav-title">Araçlar</div>

index.html

@@ -88,32 +88,30 @@
             <!-- 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-3 message-slide-in">
-                    <div class="w-8 h-8 rounded-full bg-gradient-to-br from-white to-zinc-600 flex items-center justify-center flex-shrink-0">
-                        <i data-feather="cpu" class="w-4 h-4 text-zinc-900"></i>
+                <div class="flex items-start space-x-2 message-slide-in">
+                    <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>
-                    <div class="max-w-xl">
-                        <div class="bg-zinc-900 rounded-2xl rounded-tl-sm p-4 glow hover:scale-[1.02] transition-all duration-200">
-                            <p class="text-white leading-relaxed">Welcome to Neural Nexus AI 🚀</p>
-                            <p class="text-zinc-400 text-sm mt-2">I'm your advanced AI assistant. How can I help you today?</p>
+                    <div class="flex-1 max-w-3xl">
+                        <div class="bg-zinc-800 rounded-lg p-3">
+                            <p class="text-white text-sm">Welcome to Nixaut Copilot 🚀</p>
+                            <p class="text-zinc-400 text-sm mt-1">I'm your AI assistant. How can I help you today?</p>
                         </div>
-                        <p class="text-xs text-zinc-500 mt-1">Just now</p>
                     </div>
                 </div>
-                
-                <div id="typingIndicator" class="hidden flex items-center space-x-3">
-                    <div class="w-8 h-8 rounded-full bg-gradient-to-br from-white to-zinc-600 flex items-center justify-center flex-shrink-0">
-                        <i data-feather="cpu" class="w-4 h-4 text-zinc-900"></i>
+<div id="typingIndicator" class="hidden flex items-start space-x-3">
+                    <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>
-                    <div class="bg-zinc-900 rounded-2xl rounded-tl-sm p-4">
+                    <div class="bg-zinc-800 rounded-lg p-3 max-w-xs">
                         <div class="typing-indicator flex space-x-1">
-                            <span class="w-2 h-2 bg-white rounded-full"></span>
-                            <span class="w-2 h-2 bg-white rounded-full"></span>
-                            <span class="w-2 h-2 bg-white rounded-full"></span>
+                            <span class="w-2 h-2 bg-zinc-400 rounded-full"></span>
+                            <span class="w-2 h-2 bg-zinc-400 rounded-full"></span>
+                            <span class="w-2 h-2 bg-zinc-400 rounded-full"></span>
                         </div>
                     </div>
                 </div>
-            </div>
+</div>
             <!-- Advanced Input Area -->
             <div class="bg-zinc-900/40 backdrop-blur-xl border-t border-zinc-800/60 p-6 mt-auto">
                 <!-- Model Selection & Tokens Bar -->

script.js

@@ -102,35 +102,31 @@ function addMessage(content, sender) {
     
     const messageDiv = document.createElement('div');
     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>
-            <div class="max-w-xl">
-                <div class="bg-gradient-to-r from-white to-zinc-100 text-zinc-900 rounded-2xl rounded-tr-sm p-4 hover:scale-[1.02] transition-all duration-200 shadow-lg">
-                    <p class="leading-relaxed">${content}</p>
+            <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>
-                <p class="text-xs text-zinc-500 mt-1 text-right">${timestamp}</p>
             </div>
         `;
     } else {
         const processedContent = marked.parse(content);
         messageDiv.innerHTML = `
-            <div class="w-8 h-8 rounded-full bg-gradient-to-br from-white to-zinc-600 flex items-center justify-center flex-shrink-0">
-                <i data-feather="cpu" class="w-4 h-4 text-zinc-900"></i>
+            <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>
-            <div class="max-w-xl">
-                <div class="bg-zinc-900 rounded-2xl rounded-tl-sm p-4 glow hover:scale-[1.02] transition-all duration-200">
-                    <div class="markdown text-white">${processedContent}</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>
-                <p class="text-xs text-zinc-500 mt-1">${timestamp}</p>
             </div>
         `;
     }
-    
-    chatContainer.appendChild(messageDiv);
+chatContainer.appendChild(messageDiv);
     chatContainer.scrollTop = chatContainer.scrollHeight;
     
     // Re-initialize feather icons for new elements
@@ -352,20 +348,19 @@ 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-3 message-slide-in">
-                <div class="w-8 h-8 rounded-full bg-gradient-to-br from-white to-zinc-600 flex items-center justify-center flex-shrink-0">
-                    <i data-feather="cpu" class="w-4 h-4 text-zinc-900"></i>
+            <div class="flex items-start space-x-2 message-slide-in">
+                <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>
-                <div class="max-w-xl">
-                    <div class="bg-zinc-900 rounded-2xl rounded-tl-sm p-4 glow hover:scale-[1.02] transition-all duration-200">
-                        <p class="text-white leading-relaxed">Welcome to Nixaut Copilot 🚀</p>
-                        <p class="text-zinc-400 text-sm mt-2">I'm your advanced AI assistant. How can I help you today?</p>
-</div>
-                    <p class="text-xs text-zinc-500 mt-1">Just now</p>
+                <div class="flex-1 max-w-3xl">
+                    <div class="bg-zinc-800 rounded-lg p-3">
+                        <p class="text-white text-sm">Welcome to Nixaut Copilot 🚀</p>
+                        <p class="text-zinc-400 text-sm mt-1">I'm your AI assistant. How can I help you today?</p>
+                    </div>
                 </div>
             </div>
         `;
-        chatHistory = [];
+chatHistory = [];
         saveChatHistory();
         feather.replace();
     }

style.css

@@ -70,34 +70,32 @@ body {
 .float-animation {
     animation: float 3s ease-in-out infinite;
 }
-
 /* Markdown Styling */
-.markdown h1 { @apply text-2xl font-bold text-white mb-4 mt-6; }
-.markdown h2 { @apply text-xl font-semibold text-white mb-3 mt-5; }
-.markdown h3 { @apply text-lg font-medium text-white mb-2 mt-4; }
-.markdown p { @apply text-zinc-300 mb-4 leading-relaxed; }
-.markdown code { @apply bg-zinc-800 px-1 py-0.5 rounded text-sm text-green-400; }
+.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; }
 .markdown pre {
-    @apply bg-zinc-900 rounded-lg p-4 overflow-x-auto mb-4 border border-zinc-800;
+    @apply bg-zinc-900 rounded p-2 overflow-x-auto mb-2 text-xs;
     font-family: 'Courier New', monospace;
 }
 .markdown pre code { @apply bg-transparent text-zinc-300; }
-.markdown ul { @apply list-disc list-inside text-zinc-300 mb-4 space-y-1; }
-.markdown ol { @apply list-decimal list-inside text-zinc-300 mb-4 space-y-1; }
+.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-4 border-zinc-600 pl-4 italic text-zinc-400 mb-4;
+    @apply border-l-2 border-zinc-600 pl-3 italic text-zinc-400 mb-2 text-sm;
 }
-.markdown a { @apply text-white underline underline-offset-2 hover:text-zinc-300; }
+.markdown a { @apply text-white underline hover:text-zinc-300 text-sm; }
 .markdown table {
-    @apply w-full border-collapse mb-4;
+    @apply w-full border-collapse mb-2 text-sm;
 }
 .markdown th {
-    @apply border border-zinc-700 px-4 py-2 bg-zinc-900 text-left font-semibold;
+    @apply border border-zinc-700 px-2 py-1 bg-zinc-900 text-left text-sm;
 }
 .markdown td {
-    @apply border border-zinc-700 px-4 py-2 text-zinc-300;
+    @apply border border-zinc-700 px-2 py-1 text-zinc-300 text-sm;
 }
-
 /* Transition Classes */
 .transition-all {
     transition-property: all;