Update app.py

app.py

@@ -46,12 +46,20 @@ CSS = """
     margin: 5px 0;
 }
 .thinking-container {
-    border-left: 3px solid #e0e0e0;
+    border-left: 3px solid #facc15;
     padding-left: 10px;
     margin: 8px 0;
+    background: #210c29;
 }
 details:not([open]) .thinking-container {
-    border-left-color: #4CAF50;
+    border-left-color: #290c15;
+}
+details {
+    border: 1px solid #e0e0e0 !important;
+    border-radius: 8px !important;
+    padding: 12px !important;
+    margin: 8px 0 !important;
+    transition: border-color 0.2s;
 }
 """
 
@@ -104,6 +112,7 @@ def parse_response(text, state):
 def format_response(state, elapsed):
     answer_part = state.answer.replace('<think>', '').replace('</think>', '')
     collapsible = []
+    collapsed = "<details open>"
 
     if state.thought or state.in_think:
         if state.in_think:
@@ -115,8 +124,9 @@ def format_response(state, elapsed):
             # Finished: show total accumulated time
             formatted_time = format_time(state.total_think_time)
             status = f"✅ Thought for {formatted_time}"
+            collapsed = "<details>"
         collapsible.append(
-            f"<details open><summary>{status}</summary>\n\n<div class='thinking-container'>\n{state.thought}\n</div>\n</details>"
+            f"{collapsed}<summary>{status}</summary>\n\n<div class='thinking-container'>\n{state.thought}\n</div>\n</details>"
         )
 
     return collapsible, answer_part
@@ -195,7 +205,7 @@ with gr.Blocks(css=CSS) as demo:
         examples=[
             ["How many r's are in the word strawberry?"],
             ["Write 10 funny sentences that end in a fruit!"],
-            ["Let's play Tic Tac Toe, I'll start and we'll take turns: \nRow 1: -|-|-\nRow 2: -|-|-\nRow 3: -|-|-\nYour Turn!"]
+            ["Let’s play word chains! I’ll start: PIZZA. Your turn! Next word must start with… A!"]
         ],
         inputs=msg,
         label="Example Prompts"