add chat

static/css/chat/style.css

@@ -1,15 +1,4 @@
-.chat-title {
-  font-weight: 700;
-  font-size: 1rem;
-  color: #e6eefc;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
+
 
 #chatArea {
   display: flex !important;

static/css/footer.css

@@ -15,7 +15,8 @@
   box-sizing: border-box;
   position: sticky;
   bottom: 0;
-  z-index: 1000;
+  z-index: 1000; /* زيادة الأولوية */
+  min-height: 60px; /* تأمين ارتفاع أدنى */
   animation: fadeIn 0.3s ease-out forwards;
 }
 
@@ -29,4 +30,4 @@
     max-width: 100%;
     padding: 0.5rem;
   }
-}
+}

static/css/style.css

@@ -12,7 +12,7 @@
 html, body {
   width: 100%;
   height: 100%;
-  overflow-x: hidden;
+  overflow-x: hidden; /* تغيير من overflow: hidden */
   font-family: 'Inter', sans-serif;
   font-size: 1rem;
   -webkit-font-smoothing: antialiased;
@@ -24,8 +24,7 @@ body {
   flex-direction: column;
   background-color: var(--background-dark);
   color: var(--text-dark);
-  overflow: hidden;
-  word-wrap: break-word;
+  overflow-x: hidden; /* لمنع التمرير الأفقي فقط */
 }
 
 :root {
@@ -48,7 +47,7 @@ main {
   display: flex;
   flex-direction: column;
   margin-top: var(--header-height);
-  height: calc(100vh - var(--header-height));
+  height: calc(100vh - var(--header-height) - var(--footer-height)); /* إضافة ارتفاع الفوتر */
   overflow: hidden;
 }
 
@@ -68,6 +67,30 @@ main {
   animation: fadeIn 0.8s ease-out forwards;
 }
 
+#chatArea {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto; /* تمكين التمرير العمودي */
+  width: 100%;
+  box-sizing: border-box;
+  padding: 1rem;
+  background: transparent;
+  max-height: calc(100vh - var(--header-height) - var(--footer-height) - 6rem); /* تحديد ارتفاع صافي */
+}
+
+#chatBox {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 0.75rem;
+  box-sizing: border-box;
+  overflow-y: auto; /* تمكين التمرير العمودي */
+  max-height: calc(100vh - var(--header-height) - var(--footer-height) - 8rem); /* تحديد ارتفاع صافي */
+}
+
 .title {
   font-size: clamp(1.5rem, 4vw, 2.5rem);
   font-weight: 800;

static/css/webkit.css

@@ -32,7 +32,7 @@
 }
 
 #chatBox::-webkit-scrollbar-track {
-  background: transparent;
+  background: rgba(255, 255, 255, 0.05); /* تغيير من transparent */
 }
 
 #chatBox::-webkit-scrollbar-thumb {

templates/chat.html

@@ -296,11 +296,13 @@
           continue.
         </div>
       </div>
-<div id="chatArea" class="flex-1 overflow-y-auto hidden" aria-live="polite">
-  <div id="chatBox" class="flex flex-col w-full" aria-live="polite"></div>
+      <div id="chatArea" class="flex-1 overflow-y-auto hidden" aria-live="polite">
+        <div id="chatBox" class="flex flex-col w-full" aria-live="polite"></div>
       </div>
+    </main>
   </div>
-  <!-- Footer Form -->
+
+  <!-- Footer Form (منقول خارج main) -->
   <form id="footerForm" class="flex p-4">
     <div id="inputContainer" class="w-full">
       <textarea id="userInput" placeholder="Ask anything..." required></textarea>
@@ -338,7 +340,6 @@
     <div id="filePreview" class="upload-preview" style="display: none;"></div>
     <div id="audioPreview" class="audio-preview" style="display: none;"></div>
   </form>
-  </main>
 
   <!-- Settings Modal -->
   <div id="settingsModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
@@ -415,7 +416,6 @@
     <button onclick="document.getElementById('pwa-instructions').classList.add('hidden')"
       class="ml-2 text-sm">Close</button>
   </div>
-  </div>
 
   <!-- Scripts -->
   <script src="/static/js/chat.js?v=1.2"></script>