Update app.py

app.py

@@ -26,19 +26,53 @@ html, body, .stApp {
     width: 100% !important;
 }
 
-@media (min-width: 769px) {
-    .stApp {
-        /* کادر با عرض ثابت و گوشه‌های گرد */
-        max-width: 768px !important;
-        margin: 0 auto; /* وسط‌چین کردن محتوا */
-        padding: 20px; /* فاصله داخلی */
-        border-radius: 16px; /* گوشه‌های گرد */
-        border: 2px solid var(--primary); /* رنگ کادر */
-        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* سایه */
-        background-color: var(--background); /* پس‌زمینه سفید */
+
+/* ======== کادر شبیه موبایل برای دسکتاپ ======== */
+@media (min-width: 768px) {
+    [data-testid="stAppViewContainer"] {
+        max-width: 768px !important;  /* عرض موبایل */
+        margin: 0 auto !important;
+        padding: 20px !important;
+        border: 12px solid #333 !important;
+        border-radius: 40px !important;
+        box-shadow: 0 0 0 6px #666, 
+                    0 0 30px rgba(0,0,0,0.5) !important;
+        position: relative !important;
+        min-height: 90vh !important;
+        overflow: hidden !important;
+    }
+    
+    /* دکمه هوم مجازی */
+    [data-testid="stAppViewContainer"]::after {
+        content: "";
+        position: absolute;
+        bottom: 15px;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 100px;
+        height: 4px;
+        background: #333;
+        border-radius: 2px;
+    }
+    
+    /* جلوگیری از اسکرول بیرون از کادر */
+    html, body {
+        background: #f0f0f0 !important;
+        overflow: hidden !important;
     }
 }
 
+/* ======== تنظیمات محتوا در کادر موبایل ======== */
+@media (min-width: 768px) {
+    .stApp > div {
+        max-height: calc(90vh - 40px) !important;
+        overflow-y: auto !important;
+        scrollbar-width: none !important; /* برای فایرفاکس */
+    }
+    
+    .stApp > div::-webkit-scrollbar {
+        display: none !important; /* برای کروم و سافاری */
+    }
 /* تنظیمات کلی استایل‌ها */
 @font-face {
     font-family: 'B Nazanin';