Update app.py

app.py

@@ -24,8 +24,6 @@ os.environ.setdefault("TRANSFORMERS_CACHE", HF_TRANSFORMERS)  # warning is fine
 os.environ.setdefault("SENTENCE_TRANSFORMERS_HOME", ST_HOME)
 os.environ.setdefault("GRADIO_TEMP_DIR", GRADIO_TMP)
 os.environ.setdefault("GRADIO_CACHE_DIR", GRADIO_CACHE)
-
-# Disable experimental xet; prefer stable transfer
 os.environ.setdefault("HF_HUB_ENABLE_XET", "0")
 os.environ.setdefault("HF_HUB_ENABLE_HF_TRANSFER", "1")
 
@@ -370,26 +368,35 @@ def clarityops_reply(user_msg, history, tz, uploaded_files_paths, awaiting_answe
 theme = gr.themes.Soft(primary_hue="teal", neutral_hue="slate", radius_size=gr.themes.sizes.radius_lg)
 custom_css = """
 :root { --brand-bg: #e6f7f8; --brand-accent: #0d9488; --brand-text: #0f172a; --brand-text-light: #ffffff; }
-.gradio-container { background: var(--brand-bg); }
+
+/* Full-height layout */
+html, body, .gradio-container { height: 100vh; }
+.gradio-container { background: var(--brand-bg); display: flex; flex-direction: column; }
+
+/* Tidy typography */
 h1 { color: var(--brand-text); font-weight: 700; font-size: 28px !important; }
+
+/* Minimal chrome */
 .chatbot header, .chatbot .label, .chatbot .label-wrap, .chatbot .top, .chatbot .header, .chatbot > .wrap > header { display: none !important; }
 .message.user, .message.bot { background: var(--brand-accent) !important; color: var(--brand-text-light) !important; border-radius: 12px !important; padding: 8px 12px !important; }
 textarea, input, .gr-input { border-radius: 12px !important; }
 
-/* Centered handshake overlay INSIDE the chat area */
-#chat-container { position: relative; }  /* anchor for absolute overlay */
+/* Anchor for overlay */
+#chat-container { position: relative; }
 
+/* Centered handshake overlay INSIDE the chat area */
 #handshake-overlay {
   position: absolute;
-  inset: 8px;                  /* fill the chatbot panel with a small margin */
-  z-index: 50;
+  top: 0; left: 0; right: 0; bottom: 0;   /* fully cover the chat surface */
+  margin: 8px;                            /* reveal rounded corners of chat */
+  z-index: 9999;                          /* sit above the chat content */
   display: grid;
   place-items: center;
-  pointer-events: none;         /* do not block uploads/inputs below */
+  pointer-events: none;                   /* do not block input below */
 }
 
 #handshake-overlay .panel {
-  pointer-events: auto;         /* clickable if needed */
+  pointer-events: auto;                   /* if you later want to click to dismiss */
   background: rgba(13, 148, 136, 0.96);
   color: #fff;
   padding: 18px 22px;
@@ -412,7 +419,9 @@ with gr.Blocks(theme=theme, css=custom_css, analytics_enabled=False) as demo:
     gr.Markdown("# ClarityOps Augmented Decision AI")
 
     with gr.Column(elem_id="chat-container"):
-        chat = gr.Chatbot(label="", show_label=False, height=720)
+        # Taller chat: use viewport math so UI fills the screen
+        chat = gr.Chatbot(label="", show_label=False, height="62vh")
+        # Overlay rendered as a sibling inside the same container so absolute positioning covers chat
         handshake = gr.HTML(
             value=(
                 '<div id="handshake-overlay">'
@@ -446,7 +455,6 @@ with gr.Blocks(theme=theme, css=custom_css, analytics_enabled=False) as demo:
         paths = []
         for f in (files or []):
             paths.append(getattr(f, "name", None) or f)
-        # Also hide banner when the first action is file upload
         overlay_hidden = gr.update(value='<div id="handshake-overlay" class="hidden"></div>')
         return (current or []) + paths, overlay_hidden