Update app.py

app.py

@@ -780,74 +780,70 @@ def create_interface():
         color: white !important;
     }
     
-    /* Make upload button container match radio button container size but taller */
+    /* Container for the file upload */
     .file-upload-container {
         margin-left: 15px;
         width: 150px;
-        height: 46px; /* Increased from 40px to 46px for better alignment */
+        height: 50px !important; /* Increased height significantly */
         display: inline-block;
         vertical-align: middle;
         position: relative;
+        overflow: hidden !important; /* Prevent content from spilling out */
     }
     
-    /* Hide ALL the default file upload elements */
-    .file-upload-container .file-preview,
-    .file-upload-container .file-drop,
-    .file-upload-container p,
-    .file-upload-container svg,
-    .file-upload-container [data-testid="chunkFileDropArea"],
-    .file-upload-container [data-testid="droparea"],
-    .file-upload-container div[data-testid="block"] > div[data-testid="droparea"],
-    .file-upload-container .upload-button {
+    /* Completely hide ALL elements within the container first */
+    .file-upload-container * {
         display: none !important;
+        opacity: 0 !important;
+        visibility: hidden !important;
     }
     
-    /* Style the button to look exactly like we want */
-    .file-upload-container > div:last-child {
+    /* Then create a custom button overlay that replaces everything */
+    .file-upload-container::after {
+        content: "Upload Document";
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 50px !important;
+        background-color: #f0f0f0;
+        border: 1px solid #d9d9d9;
+        border-radius: 4px;
+        display: flex !important;
+        align-items: center;
+        justify-content: center;
+        font-size: 14px;
+        cursor: pointer;
+        z-index: 100;
+    }
+    
+    /* Show only the actual input element to keep it functional, but make it cover the full area */
+    .file-upload-container input[type="file"] {
+        display: block !important;
+        opacity: 0 !important;
+        visibility: visible !important;
         position: absolute !important;
         top: 0 !important;
         left: 0 !important;
         width: 100% !important;
-        height: 46px !important; /* Increased from 40px to 46px */
-        padding: 0 15px !important;
-        background-color: #f0f0f0 !important;
-        border: 1px solid #d9d9d9 !important;
-        border-radius: 4px !important;
-        display: flex !important;
-        align-items: center !important;
-        justify-content: center !important;
-        margin: 0 !important;
-        z-index: 10 !important; /* Ensure this is on top */
-    }
-    
-    /* Style the button text */
-    .file-upload-container label span {
-        font-size: 14px !important;
-        font-weight: normal !important;
-        margin: 0 !important;
-        display: inline-block !important;
+        height: 50px !important;
+        cursor: pointer !important;
+        z-index: 200 !important;
     }
     
-    /* Hover effect */
-    .file-upload-container > div:last-child:hover {
-        background-color: #e0e0e0 !important;
-    }
-    
-    /* This is critical - hide any other elements that might be causing the overlap */
-    .file-upload-container > div:not(:last-child) {
-        display: none !important;
-    }
-    
-    /* Hide any additional elements that might appear */
-    .file-upload-container * {
-        margin: 0 !important;
-    }
-    
-    /* Explicitly make sure the Upload Document text is visible and centered */
-    .file-upload-container label {
+    /* Style the "- or -" text */
+    .file-upload-container::before {
+        content: "- or -";
+        position: absolute;
+        bottom: -20px;
+        left: 0;
+        width: 100%;
+        text-align: center;
+        font-size: 12px;
+        color: #999;
         display: block !important;
-        text-align: center !important;
-        width: 100% !important;
+        visibility: visible !important;
+        opacity: 1 !important;
     }
     """