Update app.py

app.py

@@ -140,40 +140,51 @@ THEME = gr.themes.Soft(
     button_primary_text_color="#ffffff",
 )
 
-# -------------------- LAYOUT CSS (20/40/40 exact split) --------------------
+# -------------------- LAYOUT CSS (20/40/40 exact; crisp headers) ------
 CUSTOM_CSS = """
-/* Full-bleed app */
-html, body { height: 100%; background:#0b1220; }
-.gradio-container { height: 100vh !important; width: 100vw !important; max-width: 100vw !important; margin: 0; padding: 0 8px 8px 8px; }
+/* Full-bleed app with no side gutters */
+* { box-sizing: border-box; }
+html, body { height: 100%; background:#0b1220; margin:0; padding:0; }
+.gradio-container { height: 100vh !important; width: 100vw !important; max-width: 100vw !important; margin: 0; padding: 8px; }
 
 /* Header */
-#hdr { height: 64px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
-       background:#162434; border:1px solid #223144; border-radius:12px; margin:8px 0; }
+#hdr { height: 60px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
+       background:#162434; border:1px solid #223144; border-radius:12px; margin-bottom:8px; }
 #title { color:#ffffff; font-weight:900; font-size:20px; margin:0; letter-spacing:.2px; }
-#subtitle { color:#9fb4d1; font-size:12.5px; margin:0; }
+#subtitle { color:#b8cae1; font-size:12.5px; margin:0; }
 
-/* Main grid: 20% / 40% / 40% widths; fills the rest of the viewport height */
+/* Main grid: 20% / 40% / 40% widths; fills remaining viewport height */
 #main {
-  height: calc(100vh - 64px - 16px);  /* header + top/bottom margins */
+  height: calc(100vh - 60px - 16px);  /* header + outer padding */
   display: grid;
   grid-template-columns: 20% 40% 40%;
   gap: 10px;
 }
 
 /* Panels */
-.panel { border:1px solid #223144; border-radius:12px; background:#0f172a; display:flex; flex-direction:column; min-height:0; }
+.panel { position:relative; border:1px solid #223144; border-radius:12px; background:#0f172a;
+         display:flex; flex-direction:column; min-height:0; overflow: hidden; }
 .panel-h {
   display:flex; align-items:center; justify-content:space-between;
-  padding:10px 12px; background:#0b1b2b; border-bottom:1px solid #243244;
-  color:#eaf2ff; font-weight:900; letter-spacing:.2px;
-  border-top-left-radius:12px; border-top-right-radius:12px;
+  padding:10px 12px; background:#081422; border-bottom:1px solid #243244;
+  color:#ffffff; font-weight:900; letter-spacing:.25px; font-size:15px;
 }
-.panel-b { flex:1 1 auto; min-height:0; padding:10px 12px; }
+.panel-b { flex:1 1 auto; min-height:0; padding:10px 12px; position:relative; z-index:1; }
 
-/* Left column (Advanced) = 100% of main height; scroll inside if overflow */
+/* Left column (Advanced) — scroll inside if needed */
 #left { height: 100%; }
 #adv-inner { height: 100%; overflow: auto; padding-right: 6px; }
-label { color:#ffffff !important; font-weight:800 !important; }
+
+/* Kill chip-like label backgrounds (make text crisp) */
+.gradio-container .panel .label, 
+.gradio-container .panel .label > span, 
+.gradio-container label {
+  background: transparent !important;
+  box-shadow: none !important;
+  border: none !important;
+  color: #ffffff !important;
+  font-weight: 800 !important;
+}
 
 /* Middle column splits 75% (input) / 25% (buttons) */
 #middle { display:grid; grid-template-rows: 75% 25%; height:100%; gap:10px; }
@@ -181,25 +192,26 @@ label { color:#ffffff !important; font-weight:800 !important; }
 /* Right column splits 50% / 50% */
 #right { display:grid; grid-template-rows: 1fr 1fr; height:100%; gap:10px; }
 
-/* Textareas fill their panel without overflow */
+/* Textareas fill their panel; no spillover */
 .textwrap { height:100%; min-height:0; display:flex; }
 .textwrap > div { flex:1 1 auto; min-height:0; }
 .textwrap textarea { height:100% !important; }
 
+/* Inputs (high contrast) */
 textarea, textarea:focus {
   background:#0b1220 !important; color:#f9fbff !important;
   font-size: 17px !important; line-height:1.55 !important;
   padding: 10px 12px !important; border:1.6px solid #3b516c !important; border-radius: 10px !important;
 }
-textarea::placeholder { color:#9fb4d1 !important; }
+textarea::placeholder { color:#a6bdd9 !important; }
 textarea:hover { border-color:#6b8db6 !important; }
 textarea:focus { border-color:#60a5fa !important; outline:none !important; }
 
 /* Buttons row */
-#btnrow { display:flex; align-items:center; justify-content:center; gap:14px; height:100%; }
-#btnrow > button { min-width: 160px; height: 46px; font-weight:800; border-radius:10px; }
+#btnrow { display:flex; align-items:center; justify-content:center; gap:16px; height:100%; }
+#btnrow > button { min-width: 180px; height: 46px; font-weight:800; border-radius:10px; }
 
-/* Maximize button (Hindi/Telugu headers) */
+/* Maximize buttons (Hindi/Telugu) */
 .max { font-weight:900; padding:4px 10px; border-radius:10px; border:1px solid #3c5a86;
        background:#122037; color:#ffffff; }
 .max:hover { border-color:#60a5fa; }
@@ -207,7 +219,8 @@ textarea:focus { border-color:#60a5fa !important; outline:none !important; }
 /* Modal */
 #modal { position: fixed; inset: 0; z-index: 9999; background: rgba(2,6,23,.88); display: none; align-items: center; justify-content: center; padding: 12px; }
 #modal[style*="display: block"] { display: flex !important; }
-.modal-card { width:min(1280px,96vw); height:min(92vh,900px); background:#0f172a; border:1px solid #335070; border-radius:14px; box-shadow:0 18px 40px rgba(2,6,23,.6); display:flex; flex-direction:column; gap:8px; padding:10px; }
+.modal-card { width:min(1280px,96vw); height:min(92vh,900px); background:#0f172a; border:1px solid #335070; border-radius:14px;
+              box-shadow:0 18px 40px rgba(2,6,23,.6); display:flex; flex-direction:column; gap:8px; padding:10px; }
 .modal-title { color:#ffffff; font-weight:800; font-size:18px; letter-spacing:.2px; margin:0; }
 #fs_box textarea { height: calc(100% - 52px) !important; }
 .modal-actions { display:flex; gap:8px; justify-content:flex-end; }