feat: unify chat analytics navigation

src/components/ChatAnalysisHeader.scss

@@ -0,0 +1,95 @@
+.chat-analysis-header {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 20px 24px 16px;
+  background: var(--card-bg);
+  border: 1px solid var(--border-color);
+  border-radius: 16px;
+  flex-shrink: 0;
+}
+
+.chat-analysis-back {
+  width: fit-content;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: color 0.2s ease;
+  font-size: 13px;
+  font-weight: 500;
+
+  &:hover {
+    color: var(--text-primary);
+  }
+}
+
+.chat-analysis-breadcrumb {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--text-tertiary);
+  font-size: 13px;
+
+  .chat-analysis-breadcrumb-separator {
+    opacity: 0.6;
+  }
+
+  .current {
+    color: var(--text-primary);
+    font-weight: 600;
+  }
+}
+
+.chat-analysis-switcher {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  width: fit-content;
+  padding: 4px;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: 999px;
+}
+
+.chat-analysis-switcher-item {
+  min-width: 104px;
+  padding: 8px 16px;
+  border: none;
+  border-radius: 999px;
+  background: transparent;
+  color: var(--text-secondary);
+  cursor: pointer;
+  font-size: 13px;
+  font-weight: 500;
+  transition: all 0.2s ease;
+
+  &:hover {
+    color: var(--text-primary);
+    background: var(--bg-hover);
+  }
+
+  &.active {
+    background: var(--primary-light);
+    color: var(--primary);
+  }
+}
+
+@media (max-width: 768px) {
+  .chat-analysis-header {
+    padding: 16px 18px 14px;
+  }
+
+  .chat-analysis-switcher {
+    width: 100%;
+  }
+
+  .chat-analysis-switcher-item {
+    flex: 1;
+    min-width: 0;
+  }
+}