Update styles.css

styles.css

@@ -47,6 +47,7 @@
 body.dark .banner-message {
     background-color: var(--banner-background-dark) !important;
 }
+
 body.dark .gradio-container .contain .banner-message .banner-message-text {
     color: var(--banner-text-color-dark) !important;
 }
@@ -79,7 +80,7 @@ body.dark .gradio-container .contain .banner-message .banner-message-text a {
     padding: 0;
 }
 
-.user-input-container .multimodal-textbox{
+.user-input-container .multimodal-textbox {
     border: none !important;
 }
 
@@ -95,7 +96,8 @@ button.cancel {
     box-shadow: var(--button-cancel-shadow);
 }
 
-button.cancel:hover, .cancel[disabled] {
+button.cancel:hover,
+.cancel[disabled] {
     background: var(--button-cancel-background-fill-hover);
     color: var(--button-cancel-text-color-hover);
 }
@@ -104,7 +106,8 @@ button.cancel:hover, .cancel[disabled] {
     top: 8px;
 }
 
-.opt-out-message .html-container, .opt-out-checkbox label {
+.opt-out-message .html-container,
+.opt-out-checkbox label {
     font-size: 14px !important;
     padding: 0 !important;
     margin: 0 !important;
@@ -177,3 +180,58 @@ div.no-padding {
         max-height: 800px !important;
     }
 }
+
+/* Terms of Service Overlay */
+.agreement-overlay {
+    position: fixed !important;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background-color: rgba(0, 0, 0, 0.65);
+    /* Semi-transparent black background */
+    backdrop-filter: blur(5px);
+    /* Bloom/blur effect on the underlying content */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 9999;
+    /* Ensure it sits on top of everything */
+}
+
+/* Container for text/button within the overlay */
+.agreement-overlay>.form {
+    background-color: #333333;
+    color: white !important;
+    /* Force black text on white background to prevent invisible text issues */
+    padding: 30px;
+    border-radius: 10px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    max-width: 600px;
+    /* Increased width for better readability of long text */
+    width: 95%;
+    /* Responsive width */
+    max-height: 60vh;
+    /* Prevent overflowing viewport height */
+    overflow-y: auto;
+    /* Scroll if content is too tall */
+    text-align: left;
+    /* Left align text for better readability */
+    border: 1px solid #ccc;
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+}
+
+/* Center the header */
+.agreement-overlay>.form h2 {
+    text-align: center;
+    margin-top: 0;
+}
+
+/* Use dark mode styling if needed */
+body.dark .agreement-overlay>.form {
+    background-color: var(--secondary-800);
+    border-color: var(--border-color-primary);
+    color: var(--body-text-color);
+}