Update app.py

app.py

@@ -170,100 +170,22 @@ def classify_display(text):
     return f"<div style='display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:10px'>{chips}</div>"
 
 # ---------------- CSS ----------------
-
-# ---------------- CSS refinado - tema claro agradável ----------------
 custom_css = """
-
-/* Fundo geral e texto */
-body, .gradio-container, .gr-block, .wrap.svelte-1ipelgc {
-    background-color: #ffffff !important;
-    color: #1e1e1e !important;
-}
-
-/* Cabeçalho principal */
-h1, h2, h3 {
-    text-align: center !important;
-    color: #1f77b4 !important;
-    font-weight: 700 !important;
-    margin-bottom: 1rem !important;
-}
-
-/* Texto descritivo abaixo do título */
-p, label, span {
-    color: #333333 !important;
-}
-
-/* Caixas de texto e inputs */
-textarea, input[type="text"], .gr-textbox, .gr-input {
-    background-color: #f0f2f6 !important;
-    color: #1e1e1e !important;
-    border: 1px solid #d1d5db !important;
-    border-radius: 8px !important;
-    padding: 0.6rem !important;
-}
-
-/* Botões */
-button, .gr-button {
-    background-color: #1f77b4 !important;
-    color: white !important;
-    font-weight: 600 !important;
-    border-radius: 8px !important;
-    border: none !important;
-    transition: background-color 0.2s ease-in-out;
-}
-button:hover, .gr-button:hover {
-    background-color: #1663a6 !important;
-}
-
-/* Caixas de saída (semelhantes às "segment-box" do demo) */
-.output-class, .gr-panel.output, .output-box, .gr-highlighted, .gr-card {
-    background-color: #f0f2f6 !important;
-    border-left: 4px solid #1f77b4 !important;
-    border-radius: 8px !important;
-    padding: 1rem !important;
-    margin: 0.5rem 0 !important;
-}
-
-/* Cabeçalhos de seções */
-.gradio-container .gr-group label, .gradio-container .gr-panel label {
-    font-weight: 600 !important;
-    color: #1f77b4 !important;
-}
-
-/* Scrollbars suaves */
-::-webkit-scrollbar {
-    width: 8px;
-}
-::-webkit-scrollbar-thumb {
-    background-color: #c1c1c1;
-    border-radius: 4px;
-}
-
-/* Ajustes visuais */
-.gradio-container .prose {
-    text-align: justify !important;
-}
-.gradio-container .gr-column {
-    padding: 0.5rem !important;
-}
-
-/* Modo escuro (automático) */
-@media (prefers-color-scheme: dark) {
-    body, .gradio-container {
-        background-color: #262730 !important;
-        color: #e0e0e0 !important;
-    }
-    textarea, input, .gr-textbox {
-        background-color: #3a3b46 !important;
-        color: #e0e0e0 !important;
-    }
-    .output-class, .gr-panel.output {
-        background-color: #3a3b46 !important;
-        border-left: 4px solid #1f77b4 !important;
-    }
-}
-
-
+body { background-color: #0c0c0c; color: #f1f1f1; font-family: 'Inter', sans-serif; }
+.gradio-container { background-color: #0c0c0c; color: #f1f1f1; }
+h2, h3 { text-align: center; color: #00b4ff; font-weight: 600; }
+textarea { background-color: #181818 !important; color: #fff !important; border-radius: 10px !important; border: 1px solid #333 !important; }
+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: #112f50; border-radius: 10px; border: 1px solid #1f3c5a; padding: 10px; display: flex; align-items: center; justify-content: center; color: #eee; margin-top: 25px; position: relative; overflow: scroll; } .arrow-btn { width: 25px; height: 25px; font-size: 12px; padding: 0; background: none; border: none; color: #e0f0ff; cursor: pointer; font-weight: bold; }
+
+.arrow-btn:hover { color: #ffffff; transform: scale(1.3); }
+.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; top: 5px; left: 5px; }
+.suggestion-box .next-btn { position: absolute; top: 5px; right: 5px; }
+.suggestion-box .suggestion-text { width: 100%; text-align: center; border:none; background:none; color:#eee; font-weight:500; padding-top:8px; overflow-y: scroll;}
 """