Update app.py

app.py

@@ -59,9 +59,9 @@ def respond(message, history, name, char_class, char_alignment):
 
 chat_css="""
 #alignment_radio .gr-radio {
-    display: grid;
+    display: grid !important;
     grid-template-columns: repeat(3, 1fr);
-    gap: 0px;
+    gap: 0 !important;
     width: 300px;
 }
 
@@ -70,24 +70,25 @@ chat_css="""
 }
 
 #alignment_radio label {
-    display: flex;
+    display: flex !important;
     align-items: center;
     justify-content: center;
     aspect-ratio: 1 / 1;
-    background-color: #ddd;
-    border: 1px solid #aaa;
+    background-color: #eee;
+    border: 1px solid #ccc;
     font-size: 0.75rem;
-    margin: 0;
-    padding: 0;
+    margin: 0 !important;
+    padding: 0 !important;
     cursor: pointer;
     user-select: none;
     transition: background-color 0.2s, color 0.2s;
 }
 
+/* This is the magic: target the label of the checked input */
 #alignment_radio input[type="radio"]:checked + label {
-    background-color: red;
-    color: white;
-    border-color: darkred;
+    background-color: red !important;
+    color: white !important;
+    border-color: darkred !important;
 }
 """