From 2195b35288419c9b651e3a80bc79a07185aab357 Mon Sep 17 00:00:00 2001
From: admtracksteel <admtracksteel@gmail.com>
Date: Thu, 28 May 2026 19:26:43 +0000
Subject: [PATCH] =?UTF-8?q?Transforma=20bot=C3=B5es=20de=20relat=C3=B3rio?=
 =?UTF-8?q?=20e=20observa=C3=A7=C3=B5es=20em=20formato=20de=20tag/pill=20a?=
 =?UTF-8?q?linhados=20na=20sidebar?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/index.html | 45 ++++++++++++++++++++++++---------------------
 public/style.css  | 42 +++++++++++++++++++++++++-----------------
 2 files changed, 49 insertions(+), 38 deletions(-)

diff --git a/public/index.html b/public/index.html
index b932ede..2051c03 100644
--- a/public/index.html
+++ b/public/index.html
@@ -65,29 +65,32 @@
         <button class="tag-filter" data-tag="estudos">📚 Estudos</button>
       </div>
 
-      <!-- Botão: Minhas Observações -->
-      <button class="btn-observacoes" id="btnObservacoes">
-        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
-          <path stroke-linecap="round" stroke-linejoin="round" d="M12 6.042A8.967 8.967 0 0 0 6 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 0 1 6 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 0 1 6-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0 0 18 18a8.967 8.967 0 0 0-6 2.292m0-14.25v14.25" />
-        </svg>
-        <span>Minhas Observações</span>
-      </button>
+      <!-- Botões de ação extras em formato de tag/pill -->
+      <div class="sidebar-actions" style="display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 16px 10px; border-bottom: 1px solid var(--border-light);">
+        <!-- Botão: Minhas Observações -->
+        <button class="btn-observacoes" id="btnObservacoes">
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M12 6.042A8.967 8.967 0 0 0 6 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 0 1 6 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 0 1 6-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0 0 18 18a8.967 8.967 0 0 0-6 2.292m0-14.25v14.25" />
+          </svg>
+          <span>Minhas Observações</span>
+        </button>
 
-      <!-- Botão: Emitir Relatório -->
-      <button class="btn-observacoes" id="btnEmitirRelatorio" style="border-color: var(--brand-green); color: var(--brand-green); background: rgba(16, 163, 127, 0.05);">
-        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
-          <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" />
-        </svg>
-        <span>Emitir Relatório</span>
-      </button>
+        <!-- Botão: Emitir Relatório -->
+        <button class="btn-observacoes" id="btnEmitirRelatorio" style="border-color: var(--brand-green); color: var(--brand-green); background: rgba(16, 163, 127, 0.05);">
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" />
+          </svg>
+          <span>Emitir Relatório</span>
+        </button>
 
-      <!-- Botão: Modelos de Relatório -->
-      <button class="btn-observacoes" id="btnModelosRelatorio">
-        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
-          <path stroke-linecap="round" stroke-linejoin="round" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-        </svg>
-        <span>Modelos de Relatório</span>
-      </button>
+        <!-- Botão: Modelos de Relatório -->
+        <button class="btn-observacoes" id="btnModelosRelatorio">
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+          </svg>
+          <span>Modelos de Relatório</span>
+        </button>
+      </div>
 
       <!-- Histórico de Conversas -->
       <div class="chat-history" id="chatHistory">
diff --git a/public/style.css b/public/style.css
index 7547a02..52fe4f3 100644
--- a/public/style.css
+++ b/public/style.css
@@ -2865,33 +2865,41 @@ code {
   font-weight: 500;
 }
 
-/* Botão Minhas Observações na sidebar */
+/* Botão Minhas Observações na sidebar em estilo tag/pill */
 .btn-observacoes {
-  display: flex;
+  display: inline-flex;
   align-items: center;
-  gap: 10px;
-  width: calc(100% - 40px);
-  margin: 0 auto 8px;
-  padding: 12px 16px;
-  background: var(--bg-secondary, #1a1a1a);
-  border: 1px solid var(--border-light, #262626);
-  border-radius: 12px;
-  color: var(--text-secondary, #a3a3a3);
-  font-size: 0.9rem;
+  gap: 4px;
+  background-color: var(--bg-tertiary);
+  border: 1px solid var(--border-light);
+  border-radius: 20px;
+  color: var(--text-secondary);
+  font-size: 11.5px;
   font-weight: 500;
+  padding: 5px 10px;
   cursor: pointer;
-  transition: all 0.2s;
+  white-space: nowrap;
+  transition: all var(--transition-fast);
+  font-family: var(--font-sans);
+  width: auto;
+  margin: 0;
 }
 
 .btn-observacoes:hover {
-  background: var(--brand-green, #10a37f);
-  color: white;
-  border-color: var(--brand-green, #10a37f);
+  background-color: var(--bg-accent);
+  color: var(--text-primary);
+  border-color: var(--border-light);
+}
+
+#btnEmitirRelatorio:hover {
+  background: var(--brand-green) !important;
+  color: white !important;
+  border-color: var(--brand-green) !important;
 }
 
 .btn-observacoes svg {
-  width: 20px;
-  height: 20px;
+  width: 13px;
+  height: 13px;
   flex-shrink: 0;
 }