Update app.py

app.py

@@ -58,57 +58,62 @@ html, body, .stApp {
 }
 
 @media (min-width: 768px) {
-    /* Reset کامل و پایه‌ای */
+    /* Reset default margins and padding */
     html, body {
         margin: 0 !important;
         padding: 0 !important;
-        background: #f0f0f0 !important;
-        height: 100% !important;
-        width: 100% !important;
+        background: #f0f0f0 !important; /* رنگ پس‌زمینه خاکستری روشن */
+        height: 100vh !important;
         overflow: hidden !important;
     }
-
-    /* مرکز کردن کامل و دقیق */
+    
+    /* Container for the mobile frame */
     body {
         display: flex !important;
         justify-content: center !important;
         align-items: center !important;
-        min-height: 100vh !important;
+        background: #f0f0f0 !important; /* مطمئن شوید این رنگ با رنگ پس‌زمینه کادر موبایل متفاوت نیست */
     }
-
-    /* استایل اصلی کادر موبایل */
+    
+    /* Mobile frame styling */
     [data-testid="stAppViewContainer"] {
         width: 475px !important;
         height: 667px !important;
-        margin: 0 !important;
+        margin: 0 auto !important;  
         border: 12px solid #000 !important;
         border-radius: 40px !important;
-        box-shadow: 0 0 0 6px #666, 0 0 30px rgba(0,0,0,0.5) !important;
+        box-shadow: 
+            0 0 0 6px #666, 
+            0 0 30px rgba(0,0,0,0.5) !important;
         background-color: var(--background) !important;
+        color: var(--text) !important;
         overflow-y: auto !important;
         overflow-x: hidden !important;
-        position: relative !important;
-        
-        /* جهت‌دهی محتوا */
+        scrollbar-width: thin !important;
+        scrollbar-color: #6a0dad #f0f0f0 !important;
         direction: rtl !important;
+        position: relative !important;
     }
 
-    /* پدینگ داخلی 5 پیکسل برای همه محتوا */
-    [data-testid="stAppViewContainer"] > div,
-    [data-testid="block-container"],
-    .stApp > div {
-        padding: 0 5px !important;
+    /* Remove any potential dark background from parent elements */
+    #root, .stApp {
+        background: transparent !important;
+        padding: 0 !important;
         margin: 0 !important;
     }
 
-    /* اسکرولبار سمت راست با جهت RTL */
-    [data-testid="stAppViewContainer"] {
-        scrollbar-width: thin !important;
-        scrollbar-color: #6a0dad #f0f0f0 !important;
+    /* Ensure Streamlit's main container doesn't add extra space */
+    [data-testid="stAppViewContainer"] > div {
+        max-width: 100% !important;
+        padding: 0 !important;
+        margin: 0 !important;
     }
-    
+
+    /* Webkit scrollbar styles */
     [data-testid="stAppViewContainer"]::-webkit-scrollbar {
         width: 6px !important;
+        right: 0 !important;
+        left: auto !important;
     }
     
     [data-testid="stAppViewContainer"]::-webkit-scrollbar-track {
@@ -120,9 +125,16 @@ html, body, .stApp {
     [data-testid="stAppViewContainer"]::-webkit-scrollbar-thumb {
         background-color: #6a0dad !important;
         border-radius: 3px !important;
+        margin-left: 10px !important;
     }
-
-    /* دکمه هوم مجازی */
+    
+    /* Reset direction for content */
+    [data-testid="stAppViewContainer"] > * {
+        direction: ltr !important;
+        text-align: right !important;
+    }
+    
+    /* Virtual home button */
     [data-testid="stAppViewContainer"]::after {
         content: "";
         position: absolute;
@@ -134,12 +146,6 @@ html, body, .stApp {
         background: #333;
         border-radius: 2px;
     }
-
-    /* بازنشانی جهت برای محتوای انگلیسی/اعداد */
-    [data-testid="stAppViewContainer"] > div > div {
-        direction: ltr !important;
-        text-align: right !important;
-    }
 }
 
 /* هدر راهیار */