Update app.py

app.py

@@ -2,7 +2,7 @@
 # -*- coding: utf-8 -*-
 """
 🪶 Council Matters Classifier – PT
-Dark modern Gradio interface with suggestions carousel.
+Dark modern Gradio interface with suggestions carousel and compact arrow buttons.
 """
 
 import gradio as gr
@@ -170,7 +170,7 @@ def classify_display(text):
         chips += f"<span class='output-chip' style='border-color:{color}80;color:{color}'>{label} ({prob:.0%})</span>"
     return f"<div style='display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:10px'>{chips}</div>"
 
-# ---------------- CSS ----------------
+# ---------------- CSS atualizado ----------------
 custom_css = """
 body { background-color: #0c0c0c; color: #f1f1f1; font-family: 'Inter', sans-serif; }
 .gradio-container { background-color: #0c0c0c; color: #f1f1f1; }
@@ -179,11 +179,32 @@ textarea { background-color: #181818 !important; color: #fff !important; border-
 button { background-color: #007aff !important; color: white !important; font-weight: 600 !important; border-radius: 8px !important; border: none !important; }
 button:hover { background-color: #00aaff !important; }
 .output-chip { background-color: #1a1a1a; padding: 5px 12px; border-radius: 8px; font-weight: 500; border: 1px solid #007aff33; }
-.suggestion-box { background-color: #111; border-radius: 10px; border: 1px solid #222; padding: 10px; display: flex; align-items: center; justify-content: space-between; color: #aaa; margin-top: 25px; }
-.arrow-btn { background: none; border: none; color: #00c3ff; font-size: 22px; cursor: pointer; }
-.arrow-btn:hover { color: #00e0ff; transform: scale(1.15); }
-.use-btn { background-color:#00c3ff !important; color:#000 !important; font-weight:600 !important; border-radius:6px !important; padding:3px 10px !important; }
-.use-btn:hover { background-color:#00e0ff !important; }
+.suggestion-box { 
+    background-color: #112f50;  /* azul mais suave */
+    border-radius: 10px; 
+    border: 1px solid #1f3c5a; 
+    padding: 10px; 
+    display: flex; 
+    align-items: center; 
+    justify-content: center; 
+    color: #eee; 
+    margin-top: 25px; 
+    position: relative;
+}
+.arrow-btn { 
+    background: none; 
+    border: none; 
+    color: #e0f0ff; 
+    font-size: 16px;  
+    cursor: pointer; 
+    font-weight: bold;
+}
+.arrow-btn:hover { color: #ffffff; transform: scale(1.2); }
+.use-btn { background-color:#66b3ff !important; color:#000 !important; font-weight:600 !important; border-radius:6px !important; padding:3px 8px !important; margin-left:5px;}
+.use-btn:hover { background-color:#99ccff !important; }
+.suggestion-box .prev-btn { position: absolute; left: 5px; top: 50%; transform: translateY(-50%); }
+.suggestion-box .next-btn { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); }
+.suggestion-box .suggestion-text { width: 100%; text-align: center; padding: 0 40px; border:none; background:none; color:#eee; font-weight:500; }
 """
 
 # ---------------- Gradio UI ----------------
@@ -198,10 +219,10 @@ with gr.Blocks(css=custom_css, theme="gradio/soft") as demo:
     classify_btn.click(fn=classify_display, inputs=input_text, outputs=output)
 
     # Sugestões
-    prev_btn = gr.Button("⟨")
-    suggestion_display = gr.Textbox(value=suggestions[0], interactive=False)
-    next_btn = gr.Button("⟩")
-    use_btn = gr.Button("Usar sugestão")
+    prev_btn = gr.Button("⟨", elem_classes="prev-btn arrow-btn")
+    suggestion_display = gr.Textbox(value=suggestions[0], interactive=False, elem_classes="suggestion-text")
+    next_btn = gr.Button("⟩", elem_classes="next-btn arrow-btn")
+    use_btn = gr.Button("Usar", elem_classes="use-btn")
 
     prev_btn.click(fn=prev_example, outputs=suggestion_display)
     next_btn.click(fn=next_example, outputs=suggestion_display)
@@ -209,5 +230,6 @@ with gr.Blocks(css=custom_css, theme="gradio/soft") as demo:
 
     gr.Row([prev_btn, suggestion_display, next_btn, use_btn], elem_id="suggestion-box")
 
+# ---------------- Launch ----------------
 if __name__ == "__main__":
     demo.launch()