add chat

static/css/chat/bubble.css

@@ -4,28 +4,29 @@
  */
 
 .bubble {
-  display: block;
+  display: block !important; /* إجبار العرض لتجنب التعارض مع hidden */
   align-self: flex-start;
   background: #1f1f1f;
   color: #e8e8e8;
-  border-radius: var(--bubble-radius);
+  border-radius: var(--bubble-radius, 1rem);
   line-height: 1.5;
   white-space: normal;
   font-family: 'Inter', sans-serif;
   font-size: 0.95rem;
   position: relative;
-  opacity: 1; /* إزالة أي خفاء افتراضي */
-  animation: bubbleAppear 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+  opacity: 1 !important; /* إزالة أي خفاء افتراضي */
+  animation: bubbleAppear 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards; /* الاحتفاظ بالأنيميشن لكن بدون تأخير */
   margin: 0.75rem 0;
   overflow-wrap: break-word;
   word-break: break-word;
   vertical-align: middle;
-  padding: 1rem 1rem;
+  padding: 1rem;
   box-sizing: border-box;
   max-width: 100%;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   border: 1px solid rgba(255, 255, 255, 0.05);
   transition: all 0.3s ease;
+  min-height: 20px; /* ضمان ارتفاع أدنى للظهور */
 }
 
 .bubble:hover {
@@ -34,6 +35,10 @@
 }
 
 @keyframes bubbleAppear {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
   to {
     opacity: 1;
     transform: translateY(0);

static/css/chat/style.css

@@ -19,6 +19,7 @@
 html {
   -webkit-text-size-adjust: 100%;
 }
+
 .chat-controls {
   display: flex;
   align-items: center;
@@ -34,7 +35,7 @@ html {
 
 #chatArea {
   flex: 1;
-  display: flex;
+  display: flex !important; /* إجبار العرض */
   flex-direction: column;
   overflow-y: auto;
   width: 100%;
@@ -44,18 +45,20 @@ html {
   word-wrap: break-word;
   word-break: break-word;
   max-width: 100%;
+  min-height: 0; /* لمنع الانهيار في flex */
 }
 
 #chatBox {
-  display: flex;
+  display: flex !important; /* إجبار العرض */
   flex-direction: column;
   width: 100%;
   height: 100%;
   overflow-y: auto;
-  padding: 0.75rem 0.75rem calc(var(--footer-height) + 1rem) 1rem;
+  padding: 0.75rem 0.75rem calc(var(--footer-height, 5rem) + 1rem) 1rem;
   box-sizing: border-box;
   max-width: 100%;
   overflow-wrap: break-word;
   word-wrap: break-word;
   word-break: break-word;
+  min-height: 0; /* للتمدد الصحيح */
 }

static/css/style.css

@@ -18,6 +18,7 @@ html, body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
+
 #chatArea {
   flex: 1;
   min-height: 0; /* لمنع الانهيار */
@@ -27,8 +28,8 @@ html, body {
 body {
   display: flex;
   flex-direction: column;
-  background-color: var(--background-dark);
-  color: var(--text-dark);
+  background-color: var(--background-dark, #0f0f0f);
+  color: var(--text-dark, #e5e7eb);
   overflow: hidden;
   word-wrap: break-word;
 }

static/css/webkit.css

@@ -24,4 +24,18 @@
 
 * {
   -webkit-tap-highlight-color: transparent;
+}
+
+/* إضافة للتوافق مع #chatBox */
+#chatBox::-webkit-scrollbar {
+  width: 6px;
+}
+
+#chatBox::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+#chatBox::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.3);
+  border-radius: 3px;
 }