Update static/style.css

static/style.css

@@ -730,6 +730,7 @@ button:hover {
     cursor: pointer;
     font-size: 20px;
     font-weight: bold;
+    margin-left: 8px;
 }
 
 .grouped-insights-content {
@@ -792,4 +793,114 @@ button:hover {
 
 .insight-source:hover {
     background-color: var(--primary);
+}
+
+.grouped-insights-actions {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+/* AI Select Button Styling */
+.ai-select-btn {
+    background: linear-gradient(135deg, #4b6cb7, #8e44ad);
+    color: white;
+    border: none;
+    padding: 8px 16px;
+    border-radius: 4px;
+    font-weight: 500;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+    transition: all 0.3s ease;
+}
+
+.ai-select-btn:before {
+    content: "🧠";
+    margin-right: 6px;
+    font-size: 14px;
+}
+
+.ai-select-btn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+}
+
+.ai-select-btn:active {
+    transform: translateY(0);
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+}
+
+.ai-select-btn:disabled {
+    background: linear-gradient(135deg, #a0a0a0, #7a7a7a);
+    cursor: wait;
+    transform: none;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+@keyframes pulse {
+    0% {
+        box-shadow: 0 0 0 0 rgba(142, 68, 173, 0.7);
+    }
+    70% {
+        box-shadow: 0 0 0 10px rgba(142, 68, 173, 0);
+    }
+    100% {
+        box-shadow: 0 0 0 0 rgba(142, 68, 173, 0);
+    }
+}
+
+.pulse {
+    animation: pulse 2s infinite;
+}
+
+/* Existing styles continue below */
+.ai-select-btn {
+    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
+    color: white;
+    font-weight: 600;
+    padding: 6px 12px;
+    border-radius: 6px;
+    border: none;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+    display: flex;
+    align-items: center;
+    transition: all 0.3s ease;
+    position: relative;
+    overflow: hidden;
+}
+
+.ai-select-btn::before {
+    content: "🧠";
+    margin-right: 6px;
+    font-size: 14px;
+}
+
+.ai-select-btn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+    background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
+}
+
+.ai-select-btn:active {
+    transform: translateY(1px);
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+}
+
+/* Add pulsing effect to draw attention */
+@keyframes pulse {
+    0% {
+        box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.7);
+    }
+    70% {
+        box-shadow: 0 0 0 6px rgba(139, 92, 246, 0);
+    }
+    100% {
+        box-shadow: 0 0 0 0 rgba(139, 92, 246, 0);
+    }
+}
+
+.ai-select-btn.pulse {
+    animation: pulse 2s infinite;
 }