change loading text, rework margins

app.py

@@ -22,11 +22,13 @@ css = "@import url(https://fonts.googleapis.com/css2?family=Silkscreen:wght@400;
       "content:\"\";width:10px;height:10px;position:absolute;bottom:-1px;border:1px solid var(" \
       "--color-border-accent);background-color:var(--color-accent-soft)}.bot.svelte-a99nd8.svelte-a99nd8::before{" \
       "left:-10px;border-right:0}.user.svelte-a99nd8.svelte-a99nd8::after{right:-10px;border-left:0}textarea{" \
-      "background-color:#fff}#component-48,#component-51{position:absolute;left:50%;top:50%;transform:translateX(" \
-      "-50%) translateY(-50%);width:50%;height:50vh;padding:80px 20px 20px;background-color:#fff;border:1px solid " \
-      "#002366}#component-49{position:initial}#component-50,#component-62{" \
-      "position:absolute;top:20px;right:20px;width:44px;height:44px;min-width:44px;min-height:44px}.output-class" \
-      ".svelte-1s28oeb.svelte-1s28oeb.svelte-1s28oeb,div.svelte-1eq475l{font-weight:400}"
+      "background-color:#fff;height:50px!important}#component-48,#component-51{" \
+      "position:absolute;left:50%;top:50%;transform:translateX(-50%) translateY(" \
+      "-50%);width:50%;height:50vh;padding:80px 20px 20px;background-color:#fff;border:1px solid " \
+      "#002366}#component-49{position:initial;background-image:url(" \
+      "\"/img/map.jpg\");background-position:center;background-repeat:no-repeat;background-size:contain}#component" \
+      "-50,#component-62{position:absolute;top:20px;right:20px;width:44px;height:44px;min-width:44px;min-height:44px" \
+      "}.output-class.svelte-1s28oeb.svelte-1s28oeb.svelte-1s28oeb,div.svelte-1eq475l{font-weight:400}"
 
 with gr.Blocks(theme=theme, css=css) as iface:
     chatbot = []
@@ -147,8 +149,7 @@ with gr.Blocks(theme=theme, css=css) as iface:
     with gr.Row(visible=False) as solvingRow:
         i = 0
         while i < len(roles):
-            with gr.Column():
-                accusationButtons.append(gr.Button(roles[i]))
+            accusationButtons.append(gr.Button(roles[i]))
             i += 1
 
         closeSolvingButton = gr.Button("X")
@@ -214,18 +215,18 @@ with gr.Blocks(theme=theme, css=css) as iface:
         return remaining_questions > 0
 
     def disable_input():
-        return gr.update(interactive=False), \
-            gr.update(interactive=False), \
-            gr.update(interactive=False), \
-            gr.update(interactive=False), \
-            gr.update(interactive=False)
+        return gr.update(interactive=False, placeholder="Waiting for an answer..."), \
+            gr.update(interactive=False, placeholder="Waiting for an answer..."), \
+            gr.update(interactive=False, placeholder="Waiting for an answer..."), \
+            gr.update(interactive=False, placeholder="Waiting for an answer..."), \
+            gr.update(interactive=False, placeholder="Waiting for an answer...")
 
     def enable_input():
-        return gr.update(interactive=True), \
-            gr.update(interactive=True), \
-            gr.update(interactive=True), \
-            gr.update(interactive=True), \
-            gr.update(interactive=True)
+        return gr.update(interactive=True, placeholder="Ask a question..."), \
+            gr.update(interactive=True, placeholder="Ask a question..."), \
+            gr.update(interactive=True, placeholder="Ask a question..."), \
+            gr.update(interactive=True, placeholder="Ask a question..."), \
+            gr.update(interactive=True, placeholder="Ask a question...")
 
     def try_to_solve():
         return {solvingRow: gr.update(visible=True)}

style.css

@@ -74,6 +74,7 @@
 
 textarea {
     background-color: #fff;
+    height: 50px !important;
 }
 
 #component-48, #component-51 {
@@ -90,6 +91,10 @@ textarea {
 
 #component-49 {
     position: initial;
+    background-image: url(\"/img/map.jpg\");
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: contain;
 }
 
 #component-50, #component-62 {