From c62d4d4242d46a00a33281c511ad65a8368f47de Mon Sep 17 00:00:00 2001
From: mohsentaba <s.hosseintaba98@gmail.com>
Date: Tue, 19 May 2026 08:43:43 +0330
Subject: [PATCH] color of chat updated to imam javad theme , and location of
 chat cart modyfied

---
 static/css/live_chat.css            | 143 ++++++++++++++++------------
 templates/admin/chat/live_chat.html |  26 ++++-
 2 files changed, 108 insertions(+), 61 deletions(-)

diff --git a/static/css/live_chat.css b/static/css/live_chat.css
index 1c88c4d..b8d4e17 100644
--- a/static/css/live_chat.css
+++ b/static/css/live_chat.css
@@ -1,7 +1,7 @@
-/* ── در هم شکستن محدودیت عرض و پدینگ‌های پیش‌فرض انفولد ── */
+/* ── Break out of Unfold constraints but keep elegant symmetric padding ── */
 #content {
-    padding-left: 0 !important;
-    padding-right: 0 !important;
+    padding-left: 1.5rem !important;
+    padding-right: 1.5rem !important;
     padding-bottom: 0 !important;
     max-width: 100% !important;
     width: 100% !important;
@@ -21,14 +21,15 @@ html {
 
 /* ── Layout & Structure ── */
 .chat-main-wrapper {
+    width: 100% !important;
     height: calc(100vh - 140px);
-    margin-top: -1rem;
+    margin: 0 auto;
 }
 
 .rooms-sidebar {
     width: 320px;
-    background: #f8fafc;
-    /* رنگ پس‌زمینه خیلی ملایم برای سایدبار */
+    background: #FAF6E9;
+    /* جایگزین خاکستری ملایم با کرمی */
 }
 
 @media (min-width: 1024px) {
@@ -38,7 +39,8 @@ html {
 }
 
 .dark .rooms-sidebar {
-    background: #1f2937;
+    background: #052B18;
+    /* پس‌زمینه سایدبار در حالت دارک: سبز تیره */
 }
 
 /* ── Custom Scrollbar ── */
@@ -55,42 +57,43 @@ html {
 
 .chat-scrollbar::-webkit-scrollbar-thumb,
 .chat-messages::-webkit-scrollbar-thumb {
-    background: rgba(0, 136, 204, 0.3);
+    background: rgba(10, 82, 46, 0.3);
+    /* سبز اصلی با شفافیت */
     border-radius: 4px;
     transition: all 0.3s ease;
 }
 
 .chat-scrollbar::-webkit-scrollbar-thumb:hover,
 .chat-messages::-webkit-scrollbar-thumb:hover {
-    background: rgba(0, 136, 204, 0.5);
+    background: rgba(10, 82, 46, 0.5);
+    /* سبز اصلی پررنگ‌تر موقع هاور */
 }
 
 /* ── Room List Styles (New Telegram/Modern Style) ── */
 .room-item {
     margin: 4px 8px;
-    /* ایجاد فاصله از دیواره‌های سایدبار */
     border-radius: 12px;
-    /* گرد کردن گوشه‌های کل روم */
     border-left: none !important;
-    /* حذف بوردر چپ قدیمی */
     transition: background-color 0.2s ease, transform 0.1s ease;
 }
 
 .room-item:hover {
-    background-color: rgba(0, 136, 204, 0.05);
+    background-color: rgba(10, 82, 46, 0.05);
+    /* هاور روی روم‌ها با هاله سبز اصلی */
 }
 
 .dark .room-item:hover {
-    background-color: rgba(255, 255, 255, 0.05);
+    background-color: rgba(250, 246, 233, 0.1);
+    /* هاور در دارک مود با هاله کرمی */
 }
 
 .room-item-active {
-    background: linear-gradient(135deg, rgba(0, 136, 204, 0.1), rgba(28, 156, 232, 0.05)) !important;
-    box-shadow: 0 2px 8px rgba(0, 136, 204, 0.05);
+    background: linear-gradient(135deg, rgba(10, 82, 46, 0.1), rgba(5, 43, 24, 0.05)) !important;
+    box-shadow: 0 2px 8px rgba(10, 82, 46, 0.05);
 }
 
 .dark .room-item-active {
-    background: linear-gradient(135deg, rgba(28, 156, 232, 0.15), rgba(0, 136, 204, 0.05)) !important;
+    background: linear-gradient(135deg, rgba(250, 246, 233, 0.15), rgba(10, 82, 46, 0.1)) !important;
 }
 
 /* آواتار کوچک داخل لیست چت‌ها */
@@ -98,7 +101,8 @@ html {
     width: 44px;
     height: 44px;
     border-radius: 50%;
-    background: linear-gradient(135deg, #cbd5e1, #94a3b8);
+    background: linear-gradient(135deg, #d4d0c1, #a8a496);
+    /* تنالیته خاکستری-کرمی خنثی برای روم‌های عادی */
     display: flex;
     align-items: center;
     justify-content: center;
@@ -109,19 +113,22 @@ html {
 }
 
 .room-item-active .room-avatar {
-    background: linear-gradient(135deg, #0088cc, #1c9ce8);
+    background: linear-gradient(135deg, #0A522E, #052B18);
+    /* آواتار روم فعال با گرادیان سبز اصلی و تیره */
 }
 
 /* ── Telegram-style Header ── */
 .telegram-header {
-    background: linear-gradient(135deg, #0088cc, #1c9ce8);
+    background: linear-gradient(135deg, #0A522E, #052B18);
+    /* گرادیان سبز اصلی به سبز تیره */
     border: none;
-    box-shadow: 0 2px 8px rgba(0, 136, 204, 0.2);
+    box-shadow: 0 2px 8px rgba(10, 82, 46, 0.2);
     backdrop-filter: blur(20px);
 }
 
 .dark .telegram-header {
-    background: linear-gradient(135deg, #1f2937, #374151);
+    background: linear-gradient(135deg, #052B18, #031c0f);
+    /* سبز خیلی تیره در حالت دارک */
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
 }
 
@@ -132,19 +139,22 @@ html {
     display: flex;
     align-items: center;
     justify-content: center;
-    border: 2px solid rgba(255, 255, 255, 0.25);
+    border: 2px solid rgba(250, 246, 233, 0.25);
+    /* بردر کرمی نیمه‌شفاف */
 }
 
 /* ── Chat Area Background ── */
 .chat-messages {
-    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), rgba(248, 250, 252, 0.8));
+    background: linear-gradient(to bottom, rgba(250, 246, 233, 0.8), rgba(255, 255, 255, 1));
+    /* پس‌زمینه چت: کرمی محو شونده به سفید */
     overflow-y: auto;
     overscroll-behavior: contain;
     padding: 1.5rem;
 }
 
 .dark .chat-messages {
-    background: linear-gradient(to bottom, rgba(17, 24, 39, 0.5), rgba(31, 41, 55, 0.8));
+    background: linear-gradient(to bottom, rgba(5, 43, 24, 0.9), rgba(10, 82, 46, 0.4));
+    /* پس‌زمینه دارک: سبز تیره */
 }
 
 /* ── Message Bubbles (Telegram Style) ── */
@@ -181,24 +191,29 @@ html {
 }
 
 .message-bubble-sent {
-    background: linear-gradient(135deg, #0088cc, #1c9ce8);
-    color: white;
+    background: linear-gradient(135deg, #0A522E, #074023);
+    /* حباب پیام ارسال شده: سبز اصلی */
+    color: #FAF6E9;
+    /* متن کرمی روشن روی زمینه سبز */
     border-radius: 18px 18px 4px 18px;
-    box-shadow: 0 2px 8px rgba(0, 136, 204, 0.25);
+    box-shadow: 0 2px 8px rgba(10, 82, 46, 0.25);
 }
 
 .message-bubble-received {
     background: #ffffff;
-    color: #374151;
+    color: #052B18;
+    /* متن پیام دریافتی: سبز تیره روی زمینه سفید */
     border-radius: 18px 18px 18px 4px;
-    border: 1px solid rgba(229, 231, 235, 0.6);
+    border: 1px solid rgba(250, 246, 233, 0.8);
+    /* کادر محو کرمی */
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
 }
 
 .dark .message-bubble-received {
-    background: #374151;
-    color: #f9fafb;
-    border: 1px solid rgba(75, 85, 99, 0.3);
+    background: #052B18;
+    /* حباب دریافتی در دارک: سبز تیره */
+    color: #FAF6E9;
+    border: 1px solid rgba(10, 82, 46, 0.4);
 }
 
 .message-content {
@@ -218,18 +233,20 @@ html {
 
 /* ── Input Area ── */
 .message-input-area {
-    background: linear-gradient(135deg, #ffffff, #f8fafc);
-    border-top: 1px solid rgba(229, 231, 235, 0.3);
+    background: linear-gradient(135deg, #ffffff, #FAF6E9);
+    /* زمینه باکس ارسال: سفید به کرمی */
+    border-top: 1px solid rgba(10, 82, 46, 0.1);
 }
 
 .dark .message-input-area {
-    background: linear-gradient(135deg, #374151, #4b5563);
-    border-top: 1px solid rgba(75, 85, 99, 0.3);
+    background: linear-gradient(135deg, #052B18, #031c0f);
+    border-top: 1px solid rgba(250, 246, 233, 0.1);
 }
 
 .telegram-input-container {
     background: #ffffff;
-    border: 2px solid rgba(0, 136, 204, 0.1);
+    border: 2px solid rgba(10, 82, 46, 0.15);
+    /* کادر باکس تایپ با هاله سبز */
     border-radius: 25px;
     padding: 6px 16px;
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
@@ -237,17 +254,17 @@ html {
 }
 
 .telegram-input-container:focus-within {
-    border-color: #0088cc;
-    box-shadow: 0 6px 25px rgba(0, 136, 204, 0.12);
+    border-color: #0A522E;
+    box-shadow: 0 6px 25px rgba(10, 82, 46, 0.15);
 }
 
 .dark .telegram-input-container {
-    background: rgba(55, 65, 81, 0.9);
-    border-color: rgba(75, 85, 99, 0.3);
+    background: rgba(10, 82, 46, 0.1);
+    border-color: rgba(250, 246, 233, 0.2);
 }
 
 .dark .telegram-input-container:focus-within {
-    border-color: #1c9ce8;
+    border-color: #FAF6E9;
 }
 
 .telegram-message-input {
@@ -256,15 +273,20 @@ html {
     outline: none;
     font-size: 14px;
     padding: 8px 0;
-    color: #374151;
+    color: #052B18;
+    /* رنگ تایپ سبز تیره */
 }
 
 .dark .telegram-message-input {
-    color: #f9fafb;
+    color: #FAF6E9;
 }
 
 .telegram-message-input::placeholder {
-    color: #9ca3af;
+    color: rgba(5, 43, 24, 0.5);
+}
+
+.dark .telegram-message-input::placeholder {
+    color: rgba(250, 246, 233, 0.5);
 }
 
 .telegram-action-btn {
@@ -281,13 +303,14 @@ html {
 }
 
 .send-btn-telegram {
-    background: linear-gradient(135deg, #0088cc, #1c9ce8);
-    color: white;
+    background: linear-gradient(135deg, #0A522E, #052B18);
+    /* دکمه ارسال: سبز اصلی به تیره */
+    color: #FAF6E9;
 }
 
 .send-btn-telegram:hover {
     transform: scale(1.05);
-    box-shadow: 0 4px 12px rgba(0, 136, 204, 0.4);
+    box-shadow: 0 4px 12px rgba(10, 82, 46, 0.4);
 }
 
 .send-btn-telegram:active {
@@ -296,28 +319,30 @@ html {
 
 /* ── Users Modal Solid Backgrounds ── */
 #users-modal {
-    background-color: #f8fafc !important;
+    background-color: #FAF6E9 !important;
+    /* پس‌زمینه مودال: کرمی */
 }
 
-#users-modal > div:nth-child(2) {
+#users-modal>div:nth-child(2) {
     background-color: #ffffff !important;
-    border-bottom: 1px solid #e5e7eb !important;
+    border-bottom: 1px solid rgba(10, 82, 46, 0.1) !important;
 }
 
 #users-list {
-    background-color: #f8fafc !important;
+    background-color: #FAF6E9 !important;
 }
 
-/* Dark Mode Support */
+/* Dark Mode Support for Modal */
 .dark #users-modal {
-    background-color: #1f2937 !important;
+    background-color: #052B18 !important;
+    /* پس‌زمینه دارک مودال: سبز تیره */
 }
 
-.dark #users-modal > div:nth-child(2) {
-    background-color: #111827 !important;
-    border-bottom: 1px solid #374151 !important;
+.dark #users-modal>div:nth-child(2) {
+    background-color: #031c0f !important;
+    border-bottom: 1px solid rgba(250, 246, 233, 0.1) !important;
 }
 
 .dark #users-list {
-    background-color: #1f2937 !important;
+    background-color: #052B18 !important;
 }
\ No newline at end of file
diff --git a/templates/admin/chat/live_chat.html b/templates/admin/chat/live_chat.html
index 0cfd1a6..5eaa80a 100644
--- a/templates/admin/chat/live_chat.html
+++ b/templates/admin/chat/live_chat.html
@@ -12,11 +12,33 @@
 <link href="https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/Vazirmatn-font-face.css" rel="stylesheet"
     type="text/css" />
 <link rel="stylesheet" href="{% static 'css/live_chat.css' %}">
+<style>
+    /* ── Break out of Unfold constraints & Center card with symmetric padding ── */
+    #content {
+        padding-left: 1.5rem !important;
+        padding-right: 1.5rem !important;
+        padding-bottom: 0 !important;
+        max-width: 100% !important;
+        width: 100% !important;
+    }
+
+    div:has(> #content) {
+        padding-left: 0 !important;
+        padding-right: 0 !important;
+        padding-bottom: 0 !important;
+    }
+
+    .chat-main-wrapper {
+        width: 100% !important;
+        max-width: 100% !important;
+        margin: 0 auto !important;
+    }
+</style>
 {% endblock %}
 
 {% block content %}
 <div
-    class="chat-main-wrapper flex w-full shadow-md border-y border-gray-200 dark:border-gray-700 overflow-hidden mt-0 relative">
+    class="chat-main-wrapper flex w-full shadow-md border border-gray-200 dark:border-gray-700 rounded-xl overflow-hidden mt-0 relative">
 
     <div
         class="rooms-sidebar flex-shrink-0 flex flex-col border-r border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50 relative z-20">
@@ -73,7 +95,7 @@
         </div>
     </div>
 
-    <div class="chat-area flex-1 flex flex-col relative z-10">
+    <div class="chat-area flex-1 flex flex-col relative z-10" style="min-width: 0; overflow: hidden;">
         <div id="no-chat-selected"
             class="absolute inset-0 flex flex-col items-center justify-center text-gray-400 z-30 bg-[#f8fafc] dark:bg-[#111827]">
             <div