css adjustments, added clearer wording

app.py

@@ -8,17 +8,18 @@ theme = gr.themes.Monochrome(
     text_size="lg"
 )
 css = "@import url(https://fonts.googleapis.com/css2?family=Silkscreen:wght@400;700&display=swap);.gradio-container{" \
-      "background-color:#cda678;font-family:Silkscreen;position:relative}.secondary.svelte-58yet2," \
-      ".tabitem{background-color:#002366}#component-1{min-height:75vh}#component-4{" \
-      "margin-top:auto}.tabs.svelte-btpldm{height:100%}.tabitem{border:1px solid #fff}#component-17,#component-25," \
-      "#component-33,#component-41,#component-9{min-height:70vh;max-height:70vh}#component-10,#component-11," \
-      "#component-18,#component-19,#component-26,#component-27,#component-34,#component-35,#component-42," \
-      "#component-43{background-color:#aaa}.message.svelte-a99nd8.svelte-a99nd8{" \
+      "background-color:#cda678;font-family:Silkscreen;position:relative}#component-1{min-height:75vh}#component-4{" \
+      "margin-top:auto}.tabs.svelte-btpldm{height:100%}.tabitem{background-color:#002366;border:1px solid " \
+      "#fff}#component-17,#component-25,#component-33,#component-41,#component-9{" \
+      "min-height:70vh;max-height:70vh}.secondary.svelte-58yet2{" \
+      "background-color:#002366;font-weight:400}#component-10,#component-11,#component-18,#component-19," \
+      "#component-26,#component-27,#component-34,#component-35,#component-42,#component-43{" \
+      "background-color:#aaa}.message.svelte-a99nd8.svelte-a99nd8{" \
       "padding:15px;position:relative}.user.svelte-a99nd8.svelte-a99nd8{" \
       "margin-right:10px}.bot.svelte-a99nd8.svelte-a99nd8{" \
       "padding-left:15px;margin-left:10px}.bot.svelte-a99nd8.svelte-a99nd8::before," \
       ".user.svelte-a99nd8.svelte-a99nd8::after{" \
-      "content:\"\";width:10px;height:10px;position:absolute;bottom:0;border:1px solid var(" \
+      "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(" \
@@ -124,7 +125,7 @@ with gr.Blocks(theme=theme, css=css) as iface:
         with gr.Column(scale=1):
             questionCounter = gr.Label(label="Remaining Questions", value="24")
             mapButton = gr.Button("Show Floor Plan")
-            finishButton = gr.Button("Try to Solve")
+            finishButton = gr.Button("Pick a Culprit")
         with gr.Column(scale=7):
             i = 0
             while i < len(roles):
@@ -132,7 +133,7 @@ with gr.Blocks(theme=theme, css=css) as iface:
                     with gr.Row():
                         with gr.Column(scale=9):
                             chatbot.append(gr.Chatbot(label=roles[i]))
-                            msg.append(gr.Textbox(label=""))
+                            msg.append(gr.Textbox(label="", placeholder="Type a question..."))
                         with gr.Column(scale=3):
                             characterImage = gr.Label(label="")
                 i += 1

style.css

@@ -30,6 +30,7 @@
 
 .secondary.svelte-58yet2 {
     background-color: #002366;
+    font-weight: 400;
 }
 
 #component-10, #component-11, #component-18, #component-19, #component-26, #component-27, #component-34, #component-35,
@@ -56,7 +57,7 @@
     width: 10px;
     height: 10px;
     position: absolute;
-    bottom: 0;
+    bottom: -1px;
     border: 1px solid var(--color-border-accent);
     background-color: var(--color-accent-soft);
 }