Update app.py

app.py

@@ -35,8 +35,11 @@ body, .gradio-container {
     background-color: var(--bg-dark) !important;
     font-family: 'EB Garamond', serif !important;
     color: var(--papyrus) !important;
-    max-width: 820px !important;
-    margin: auto !important;
+    max-width: 700px !important; /* Narrowed for better mobile/video framing */
+    margin: 0 auto !important;
+    padding: 10px !important;    /* Reduced padding */
+    height: 100vh !important;    /* Force full height usage */
+    overflow: hidden !important; /* Prevent scrollbars on the body */
 }
 
 /* Texture Overlay */
@@ -45,32 +48,31 @@ body, .gradio-container {
     position: fixed;
     inset: 0;
     background-image: url("https://www.transparenttextures.com/patterns/black-linen.png");
-    opacity: 0.2;
+    opacity: 0.15;
     pointer-events: none;
     z-index: 0;
 }
 
-/* ── Header ─────────────────────────────────────── */
+/* ── Compact Header ─────────────────────────────── */
 .header-block {
     text-align: center;
-    padding: 30px 0 15px;
-    border-bottom: 2px solid var(--gold);
-    margin-bottom: 20px;
+    padding: 10px 0 10px; /* Heavily reduced padding */
+    border-bottom: 1px solid var(--gold);
+    margin-bottom: 15px;
 }
 .header-block h1 {
     font-family: 'Cinzel', serif !important;
-    font-size: 3rem !important;
+    font-size: 1.8rem !important; /* Shrunk from 3rem */
     font-weight: 700 !important;
     color: var(--gold) !important;
-    letter-spacing: 0.2em !important;
+    letter-spacing: 0.1em !important;
     margin: 0 !important;
 }
 .header-block p {
     font-family: 'Cinzel', serif !important;
     color: var(--gold-dim) !important;
-    font-size: 0.9rem !important;
-    letter-spacing: 0.1em !important;
-    margin-top: 8px !important;
+    font-size: 0.7rem !important; /* Shrunk */
+    margin-top: 4px !important;
     text-transform: uppercase;
 }
 
@@ -79,23 +81,24 @@ body, .gradio-container {
     background: var(--stone) !important;
     border: 1px solid var(--gold) !important;
     border-radius: 8px !important;
+    height: 450px !important; /* FIXED HEIGHT: Essential for "one shot" */
+    min-height: 300px !important;
 }
 
-/* User Message - Obsidian/Stone style */
 #chatbot .message.user {
     background: #1a1814 !important;
     color: var(--papyrus) !important;
     border-radius: 8px 8px 0 8px !important;
-    border: 1px solid rgba(212, 175, 55, 0.2) !important;
+    font-size: 0.9rem !important;
+    padding: 8px !important;
 }
 
-/* Bot Message - High readability Papyrus */
 #chatbot .message.bot {
     background: var(--papyrus) !important;
     color: #1a1f16 !important;
     border-radius: 8px 8px 8px 0 !important;
-    border: 1px solid var(--gold) !important;
-    font-size: 1.1rem !important;
+    font-size: 0.9rem !important; /* Shrunk for readability in small box */
+    padding: 8px !important;
 }
 
 /* ── Input Row ───────────────────────────────────── */
@@ -104,42 +107,27 @@ textarea, input[type="text"] {
     border: 1px solid var(--stone) !important;
     border-radius: 4px !important;
     color: var(--papyrus) !important;
-    font-family: 'EB Garamond', serif !important;
-}
-textarea:focus, input[type="text"]:focus {
-    border-color: var(--gold) !important;
-}
-
-/* ── Send Button ─────────────────────────────────── */
-button.primary {
-    background: linear-gradient(135deg, var(--gold), var(--gold-dim)) !important;
-    border: none !important;
-    color: #000 !important;
-    font-family: 'Cinzel', serif !important;
-    font-weight: bold !important;
+    font-size: 0.9rem !important;
 }
 
-/* ── Examples ────────────────────────────────────── */
+/* ── Examples & Footer ───────────────────────────── */
 .examples-holder {
     border-top: 1px solid var(--gold-dim) !important;
-    margin-top: 10px !important;
+    margin-top: 5px !important;
+    padding-top: 5px !important;
 }
 
 .examples-holder button {
     background: var(--stone) !important;
-    border: 1px solid var(--gold-dim) !important;
-    color: var(--gold) !important;
-    font-family: 'EB Garamond', serif !important;
-    transition: all 0.3s ease;
-}
-
-.examples-holder button:hover {
-    background: var(--gold) !important;
-    color: #000 !important;
-    transform: translateY(-2px);
+    font-size: 0.8rem !important;
+    padding: 4px 8px !important;
 }
 
 footer { display: none !important; }
+
+/* ── Optimization for Demo Recording ──────────────── */
+/* This hides the "Built with Gradio" and extra spacing */
+.gap.vgap { gap: 10px !important; }
 """
 
 with gr.Blocks() as demo: