From 73fae4e294dd58a7331f7a869cc001005a78ba97 Mon Sep 17 00:00:00 2001
From: Marcos <marcos@tracksteel.com.br>
Date: Sun, 22 Mar 2026 10:23:02 -0300
Subject: [PATCH] Refactor: Remove inline styles and fix IDE warnings

---
 templates/index.html | 88 +++++++++++++++++++++++++++-----------------
 1 file changed, 55 insertions(+), 33 deletions(-)

diff --git a/templates/index.html b/templates/index.html
index 4ab40d8..fd482b7 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -30,25 +30,16 @@
         }
 
         /* Custom Scrollbar */
-        ::-webkit-scrollbar {
-            width: 8px;
+        ::-webkit-scrollbar { width: 8px; }
+        ::-webkit-scrollbar-track { background: var(--bg-base); }
+        ::-webkit-scrollbar-thumb { 
+            background: var(--border); 
+            border-radius: 4px; 
+            border: 2px solid var(--bg-base); 
         }
+        ::-webkit-scrollbar-thumb:hover { background: var(--accent); }
 
-        ::-webkit-scrollbar-track {
-            background: var(--bg-base);
-        }
-
-        ::-webkit-scrollbar-thumb {
-            background: var(--border);
-            border-radius: 4px;
-            border: 2px solid var(--bg-base);
-        }
-
-        ::-webkit-scrollbar-thumb:hover {
-            background: var(--accent);
-        }
-
-        /* Scrollbar Fix for Firefox */
+        /* Scrollbar Fix for Firefox / Modern Browsers */
         * {
             scrollbar-width: thin;
             scrollbar-color: var(--accent) transparent;
@@ -650,6 +641,30 @@
             font-size: 1.1rem;
             letter-spacing: 0.2rem;
         }
+
+        /* Utilities */
+        .hidden { display: none !important; }
+        .w-full { width: 100%; }
+        .text-center { text-align: center; }
+        .mt-2 { margin-top: 0.5rem; }
+        .opacity-60 { opacity: 0.6; }
+
+        .theme-icon { width: 18px; height: 18px; }
+        .recording-dot {
+            width: 8px;
+            height: 8px;
+            background: var(--danger);
+            border-radius: 50%;
+            display: inline-block;
+            animation: pulse 1s infinite;
+        }
+        .mic-active { color: var(--danger) !important; border-color: var(--danger) !important; }
+        
+        .fade-in { animation: fadeIn 0.4s ease-out; }
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
     </style>
 </head>
 
@@ -662,7 +677,7 @@
             <input type="password" id="web-pass-input" aria-label="Senha da VPS" autocomplete="current-password"
                 class="form-input login-input" placeholder="Senha da VPS"
                 onkeypress="if(event.key==='Enter') attemptLogin()">
-            <button type="button" class="btn btn-primary" style="width:100%; padding: 0.8rem;"
+            <button type="button" class="btn btn-primary w-full" style="padding: 0.8rem;"
                 onclick="attemptLogin()">Entrar no Dashboard</button>
             <div id="login-error" style="color:var(--danger); font-size: 0.75rem; margin-top: 1rem; display: none;">
                 Senha incorreta. Tente novamente.</div>
@@ -680,12 +695,11 @@
             <div class="header-actions">
                 <div class="status-badge" id="bot-status">Online</div>
                 <button type="button" class="theme-toggle" onclick="toggleTheme()" aria-label="Alternar tema">
-                    <svg id="icon-sun" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" style="display: none;">
+                    <svg id="icon-sun" class="theme-icon hidden" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                         <circle cx="12" cy="12" r="5" />
-                        <path
-                            d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" />
+                        <path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" />
                     </svg>
-                    <svg id="icon-moon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                    <svg id="icon-moon" class="theme-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                         <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
                     </svg>
                 </button>
@@ -802,9 +816,7 @@
                                 <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z" />
                                 <path d="M19 10v2a7 7 0 0 1-14 0v-2M12 19v4M8 23h8" />
                             </svg>
-                            <span id="recording-dot"
-                                style="display:none; width:8px; height:8px; background:red; border-radius:50%; animation: pulse 1s infinite;">
-                            </span>
+                            <span id="recording-dot" class="recording-dot hidden"></span>
                         </button>
 
                         <button type="button" class="btn btn-primary" aria-label="Enviar" onclick="sendChat()">
@@ -830,7 +842,7 @@
                         <div class="insights-placeholder">
                             <div class="login-icon" role="img" aria-label="Gráfico de Insights">📊</div>
                             <p>Aguardando dados estruturados...</p>
-                            <small style="display:block; margin-top:0.5rem; opacity:0.6;">Peça algo como "status dos containers" para ver o refinamento aqui.</small>
+                            <small class="mt-2 opacity-60">Peça algo como "status dos containers" para ver o refinamento aqui.</small>
                         </div>
                     </div>
                 </div>
@@ -895,9 +907,16 @@
             updateThemeIcon(!isDark);
         }
 
-        function updateThemeIcon(isDark) {
-            document.getElementById('icon-sun').style.display = isDark ? 'block' : 'none';
-            document.getElementById('icon-moon').style.display = isDark ? 'none' : 'block';
+        function updateThemeIcon(isLight) {
+            const sun = document.getElementById('icon-sun');
+            const moon = document.getElementById('icon-moon');
+            if (isLight) {
+                sun.classList.remove('hidden');
+                moon.classList.add('hidden');
+            } else {
+                sun.classList.add('hidden');
+                moon.classList.remove('hidden');
+            }
         }
 
         const savedTheme = localStorage.getItem('theme');
@@ -1145,12 +1164,15 @@
 
         function updateMicUI(active) {
             const dot = document.getElementById('recording-dot');
-            const icon = document.getElementById('mic-icon');
             const btn = document.getElementById('audio-btn');
 
-            dot.style.display = active ? 'inline-block' : 'none';
-            icon.style.color = active ? 'red' : 'inherit';
-            btn.style.borderColor = active ? 'red' : 'var(--border)';
+            if (active) {
+                dot.classList.remove('hidden');
+                btn.classList.add('mic-active');
+            } else {
+                dot.classList.add('hidden');
+                btn.classList.remove('mic-active');
+            }
         }
 
         async function uploadAudio(blob) {