Ajustes de UI: barra de progresso da IA e toggle de ferramentas no mobile

public/style.css

@@ -3397,6 +3397,120 @@ code {
   to { transform: scale(1); opacity: 1; }
 }
 
+/* Botão alternador de ferramentas (recursos) */
+.btn-toggle-tools {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 8px;
+  border-radius: 8px;
+  color: var(--text-muted, #a3a3a3);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s;
+  flex-shrink: 0;
+}
+
+.btn-toggle-tools svg {
+  width: 20px;
+  height: 20px;
+}
+
+.btn-toggle-tools:hover {
+  background: var(--bg-tertiary, #1a1a1a);
+  color: var(--text-primary, #ffffff);
+}
+
+.btn-toggle-tools.active {
+  color: var(--brand-green, #10a37f);
+  background: rgba(16, 163, 127, 0.1);
+}
+
+/* Ocultar barra de ferramentas no mobile por padrão */
+@media (max-width: 768px) {
+  .prompt-modes-bar {
+    display: none !important;
+    width: 100%;
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
+    opacity: 0;
+  }
+  
+  .prompt-modes-bar.show {
+    display: flex !important;
+    max-height: 300px;
+    opacity: 1;
+    overflow-y: auto;
+    padding: 8px 4px;
+  }
+}
+
+/* Estilos de progresso da IA (Chain of Thought/Etapas) */
+.ia-progress-container {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 14px 18px;
+  background: var(--bg-secondary, #1a1a1a);
+  border: 1px solid var(--border-light, #262626);
+  border-radius: 12px;
+  max-width: 420px;
+  margin: 6px 0;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  animation: iaProgressPulse 2s infinite ease-in-out;
+}
+
+.ia-progress-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.ia-progress-icon {
+  width: 16px;
+  height: 16px;
+  border: 2px solid rgba(16, 163, 127, 0.2);
+  border-radius: 50%;
+  border-top-color: var(--brand-green, #10a37f);
+  animation: iaProgressSpin 1s linear infinite;
+  flex-shrink: 0;
+}
+
+.ia-progress-step-text {
+  font-size: 13px;
+  color: var(--text-primary, #ffffff);
+  font-weight: 500;
+  font-family: var(--font-sans);
+}
+
+.ia-progress-bar {
+  width: 100%;
+  height: 5px;
+  background-color: var(--bg-tertiary, #121212);
+  border-radius: 3px;
+  overflow: hidden;
+}
+
+.ia-progress-bar-fill {
+  height: 100%;
+  background: linear-gradient(90deg, var(--brand-green, #10a37f) 0%, #06b6d4 100%);
+  border-radius: 3px;
+  width: 10%;
+  transition: width 0.5s ease-out;
+}
+
+@keyframes iaProgressSpin {
+  to { transform: rotate(360deg); }
+}
+
+@keyframes iaProgressPulse {
+  0% { border-color: var(--border-light, #262626); }
+  50% { border-color: rgba(16, 163, 127, 0.4); }
+  100% { border-color: var(--border-light, #262626); }
+}
+