claude-code-workflow 6.3.53 → 7.0.0

package/ccw/src/templates/dashboard-css/30-core-memory.css

@@ -1,1720 +0,0 @@
-/* ============================================
-   Core Memory Styles
-   ============================================ */
-
-/* Modal Base Styles */
-.modal-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.6);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1000;
-  animation: fadeIn 0.2s ease-out;
-  backdrop-filter: blur(2px);
-}
-
-@keyframes fadeIn {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}
-
-.modal-content {
-  background: hsl(var(--card));
-  border: 1px solid hsl(var(--border));
-  border-radius: 12px;
-  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
-  max-height: 90vh;
-  display: flex;
-  flex-direction: column;
-  animation: slideUpModal 0.3s ease-out;
-  overflow: hidden;
-}
-
-@keyframes slideUpModal {
-  from {
-    opacity: 0;
-    transform: translateY(20px) scale(0.95);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-  }
-}
-
-.modal-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 1.25rem 1.5rem;
-  border-bottom: 1px solid hsl(var(--border));
-}
-
-.modal-header h2 {
-  font-size: 1.25rem;
-  font-weight: 600;
-  color: hsl(var(--foreground));
-  margin: 0;
-}
-
-.modal-close {
-  background: none;
-  border: none;
-  padding: 0.5rem;
-  cursor: pointer;
-  color: hsl(var(--muted-foreground));
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 6px;
-  transition: all 0.2s;
-}
-
-.modal-close:hover {
-  background: hsl(var(--hover));
-  color: hsl(var(--foreground));
-}
-
-.modal-close i {
-  width: 20px;
-  height: 20px;
-}
-
-.modal-body {
-  flex: 1;
-  overflow-y: auto;
-  padding: 1.5rem;
-}
-
-.modal-footer {
-  display: flex;
-  justify-content: flex-end;
-  gap: 0.75rem;
-  padding: 1.25rem 1.5rem;
-  border-top: 1px solid hsl(var(--border));
-}
-
-.core-memory-container {
-  padding: 1.5rem;
-}
-
-/* Tab Navigation */
-.core-memory-tabs {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 1.5rem;
-  flex-wrap: wrap;
-  gap: 1rem;
-  border-bottom: 1px solid hsl(var(--border));
-  padding-bottom: 1rem;
-}
-
-.tab-nav {
-  display: flex;
-  gap: 0;
-  background: hsl(var(--muted) / 0.5);
-  border-radius: 8px;
-  padding: 4px;
-}
-
-.tab-btn {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.625rem 1.25rem;
-  border: none;
-  background: transparent;
-  color: hsl(var(--muted-foreground));
-  font-size: 0.9375rem;
-  font-weight: 500;
-  cursor: pointer;
-  border-radius: 6px;
-  transition: all 0.2s ease;
-}
-
-.tab-btn i {
-  width: 18px;
-  height: 18px;
-}
-
-.tab-btn:hover {
-  color: hsl(var(--foreground));
-}
-
-.tab-btn.active {
-  background: hsl(var(--card));
-  color: hsl(var(--primary));
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-}
-
-.tab-actions {
-  display: flex;
-  gap: 0.75rem;
-  flex-wrap: wrap;
-}
-
-.cm-tab-panel {
-  animation: fadeIn 0.2s ease-out;
-}
-
-.cm-tab-panel .memory-stats {
-  margin-bottom: 1rem;
-}
-
-.core-memory-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 1.5rem;
-  flex-wrap: wrap;
-  gap: 1rem;
-}
-
-.header-actions {
-  display: flex;
-  gap: 0.75rem;
-  flex-wrap: wrap;
-}
-
-.memory-stats {
-  display: flex;
-  gap: 1.5rem;
-}
-
-.stat-item {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.stat-label {
-  font-size: 0.875rem;
-  color: hsl(var(--muted-foreground));
-  margin-bottom: 0.25rem;
-}
-
-.stat-value {
-  font-size: 1.5rem;
-  font-weight: 600;
-  color: hsl(var(--foreground));
-}
-
-/* Memories Grid */
-.memories-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
-  gap: 1.25rem;
-}
-
-@media (max-width: 768px) {
-  .memories-grid {
-    grid-template-columns: 1fr;
-  }
-}
-
-/* Memory Card */
-.memory-card {
-  background: hsl(var(--card));
-  border: 1px solid hsl(var(--border));
-  border-radius: 8px;
-  padding: 1.25rem;
-  transition: all 0.2s ease;
-  cursor: pointer;
-  /* Fixed card dimensions */
-  display: flex;
-  flex-direction: column;
-  height: 280px;
-  min-height: 280px;
-  max-height: 280px;
-}
-
-.memory-card:hover {
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-  transform: translateY(-2px);
-}
-
-.memory-card.archived {
-  opacity: 0.7;
-  border-style: dashed;
-}
-
-.memory-card-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 0.75rem;
-  flex-shrink: 0;
-}
-
-.memory-id {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  font-size: 0.875rem;
-  color: hsl(var(--foreground));
-  font-weight: 600;
-  flex-wrap: wrap;
-}
-
-.memory-id i {
-  width: 16px;
-  height: 16px;
-}
-
-.memory-id i[data-lucide="star"] {
-  color: hsl(38 92% 50%);
-}
-
-.memory-actions {
-  display: flex;
-  gap: 0.5rem;
-}
-
-.icon-btn {
-  background: none;
-  border: none;
-  padding: 0.25rem;
-  cursor: pointer;
-  color: hsl(var(--muted-foreground));
-  transition: color 0.2s;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.icon-btn:hover {
-  color: hsl(var(--foreground));
-}
-
-.icon-btn.danger:hover {
-  color: hsl(var(--destructive));
-}
-
-.icon-btn.favorite-active {
-  color: hsl(38 92% 50%);
-}
-
-.icon-btn.favorite-active svg {
-  stroke: hsl(38 92% 50%);
-  fill: hsl(38 92% 50% / 0.2);
-}
-
-.icon-btn.favorite-active:hover {
-  color: hsl(38 92% 40%);
-}
-
-.icon-btn.favorite-active:hover svg {
-  stroke: hsl(38 92% 40%);
-  fill: hsl(38 92% 40% / 0.3);
-}
-
-/* Favorite star icon in memory-id */
-.favorite-star {
-  color: hsl(38 92% 50%);
-}
-
-.favorite-star svg {
-  stroke: hsl(38 92% 50%);
-  fill: hsl(38 92% 50% / 0.2);
-}
-
-.icon-btn i {
-  width: 18px;
-  height: 18px;
-}
-
-/* Copy ID Button */
-.copy-id-btn {
-  background: none;
-  border: none;
-  padding: 0.125rem 0.25rem;
-  cursor: pointer;
-  color: hsl(var(--muted-foreground));
-  transition: color 0.2s;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  margin-left: 0.25rem;
-  border-radius: 4px;
-}
-
-.copy-id-btn:hover {
-  color: hsl(var(--primary));
-  background: hsl(var(--muted));
-}
-
-.copy-id-btn i {
-  width: 14px;
-  height: 14px;
-}
-
-.copy-id-btn.copied {
-  color: hsl(var(--success, 142 76% 36%));
-}
-
-/* Memory Content */
-.memory-content {
-  flex: 1;
-  min-height: 0;
-  overflow: hidden;
-  margin-bottom: 0.75rem;
-}
-
-.memory-summary,
-.memory-preview {
-  font-size: 0.875rem;
-  line-height: 1.5;
-  color: hsl(var(--muted-foreground));
-  /* Fixed height with ellipsis */
-  display: -webkit-box;
-  -webkit-line-clamp: 4;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-height: 6em;
-}
-
-.memory-summary {
-  color: hsl(var(--foreground));
-}
-
-/* Memory Tags */
-.memory-tags {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.375rem;
-  margin-bottom: 0.5rem;
-  flex-shrink: 0;
-  max-height: 2rem;
-  overflow: hidden;
-}
-
-.tag {
-  padding: 0.25rem 0.75rem;
-  background: hsl(var(--accent));
-  color: hsl(var(--primary));
-  border-radius: 4px;
-  font-size: 0.75rem;
-  font-weight: 500;
-}
-
-/* Memory Footer - Fixed at bottom */
-.memory-footer {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  padding-top: 0.75rem;
-  border-top: 1px solid hsl(var(--border));
-  margin-top: auto;
-}
-
-.memory-meta {
-  display: flex;
-  gap: 1rem;
-  font-size: 0.8125rem;
-  color: hsl(var(--muted-foreground));
-  flex-wrap: wrap;
-}
-
-.memory-meta span {
-  display: flex;
-  align-items: center;
-  gap: 0.375rem;
-}
-
-.memory-meta i {
-  width: 14px;
-  height: 14px;
-}
-
-.memory-features {
-  display: flex;
-  gap: 0.5rem;
-  flex-wrap: wrap;
-}
-
-.feature-btn {
-  padding: 0.375rem 0.75rem;
-  background: hsl(var(--muted));
-  border: 1px solid hsl(var(--border));
-  border-radius: 4px;
-  font-size: 0.8125rem;
-  cursor: pointer;
-  transition: all 0.2s;
-  display: flex;
-  align-items: center;
-  gap: 0.375rem;
-  color: hsl(var(--foreground));
-}
-
-.feature-btn:hover {
-  background: hsl(var(--hover));
-  border-color: hsl(var(--primary));
-}
-
-.feature-btn i {
-  width: 14px;
-  height: 14px;
-}
-
-/* Badges */
-.badge {
-  padding: 0.25rem 0.5rem;
-  border-radius: 4px;
-  font-size: 0.75rem;
-  font-weight: 500;
-}
-
-.badge-archived {
-  background: var(--warning-bg, #fef3c7);
-  color: var(--warning-color, #92400e);
-}
-
-.badge-priority-high {
-  background: var(--danger-bg, #fee2e2);
-  color: var(--danger-color, #991b1b);
-}
-
-.badge-priority-low {
-  background: var(--info-bg, #dbeafe);
-  color: var(--info-color, #1e3a8a);
-}
-
-.badge-current {
-  background: var(--success-bg, #d1fae5);
-  color: var(--success-color, #065f46);
-}
-
-/* Modal Styles */
-.memory-modal {
-  max-width: 700px;
-  width: 100%;
-}
-
-.memory-detail-modal {
-  max-width: 900px;
-  width: 100%;
-}
-
-.form-group {
-  margin-bottom: 1.25rem;
-}
-
-.form-group label {
-  display: block;
-  font-weight: 500;
-  margin-bottom: 0.5rem;
-  color: hsl(var(--foreground));
-}
-
-.form-group textarea,
-.form-group input[type="text"] {
-  width: 100%;
-  padding: 0.75rem;
-  border: 1px solid hsl(var(--border));
-  border-radius: 6px;
-  background: hsl(var(--background));
-  color: hsl(var(--foreground));
-  font-family: inherit;
-  font-size: 0.9375rem;
-  resize: vertical;
-}
-
-.form-group textarea:focus,
-.form-group input[type="text"]:focus {
-  outline: none;
-  border-color: hsl(var(--primary));
-  box-shadow: 0 0 0 3px hsl(var(--primary) / 0.1);
-}
-
-/* Memory Detail Content */
-.memory-detail-content {
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-}
-
-.detail-section h3 {
-  font-size: 1rem;
-  font-weight: 600;
-  margin-bottom: 0.75rem;
-  color: hsl(var(--foreground));
-}
-
-.detail-text {
-  font-size: 0.9375rem;
-  line-height: 1.6;
-  color: hsl(var(--foreground));
-  white-space: pre-wrap;
-}
-
-.detail-code {
-  background: hsl(var(--muted));
-  border: 1px solid hsl(var(--border));
-  border-radius: 6px;
-  padding: 1rem;
-  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
-  font-size: 0.875rem;
-  line-height: 1.5;
-  overflow-x: auto;
-  white-space: pre-wrap;
-  word-wrap: break-word;
-}
-
-/* Knowledge Graph Styles */
-.knowledge-graph {
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-}
-
-.graph-section h3 {
-  font-size: 1rem;
-  font-weight: 600;
-  margin-bottom: 0.75rem;
-  color: hsl(var(--foreground));
-}
-
-.entities-list,
-.relationships-list {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-}
-
-.entity-item {
-  padding: 0.75rem;
-  background: hsl(var(--muted));
-  border: 1px solid hsl(var(--border));
-  border-radius: 6px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.entity-name {
-  font-weight: 500;
-  color: hsl(var(--foreground));
-}
-
-.entity-type {
-  padding: 0.25rem 0.5rem;
-  background: hsl(var(--accent));
-  color: hsl(var(--primary));
-  border-radius: 4px;
-  font-size: 0.75rem;
-}
-
-.relationship-item {
-  padding: 0.75rem;
-  background: hsl(var(--muted));
-  border: 1px solid hsl(var(--border));
-  border-radius: 6px;
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-}
-
-.rel-source,
-.rel-target {
-  flex: 1;
-  font-weight: 500;
-  color: hsl(var(--foreground));
-}
-
-.rel-type {
-  padding: 0.25rem 0.5rem;
-  background: hsl(var(--info) / 0.15);
-  color: hsl(var(--info));
-  border-radius: 4px;
-  font-size: 0.75rem;
-  white-space: nowrap;
-}
-
-/* Evolution Timeline */
-.evolution-timeline {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-.evolution-version {
-  padding: 1rem;
-  background: hsl(var(--muted));
-  border: 1px solid hsl(var(--border));
-  border-left: 3px solid hsl(var(--primary));
-  border-radius: 6px;
-}
-
-.version-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 0.5rem;
-}
-
-.version-number {
-  font-weight: 600;
-  color: hsl(var(--primary));
-}
-
-.version-date {
-  font-size: 0.8125rem;
-  color: hsl(var(--muted-foreground));
-}
-
-.version-reason {
-  font-size: 0.875rem;
-  color: hsl(var(--foreground));
-  margin-top: 0.5rem;
-}
-
-/* Empty State */
-.empty-state {
-  text-align: center;
-  padding: 3rem 1rem;
-  color: hsl(var(--muted-foreground));
-}
-
-.empty-state i {
-  width: 48px;
-  height: 48px;
-  margin-bottom: 1rem;
-  opacity: 0.5;
-}
-
-.empty-state p {
-  font-size: 0.9375rem;
-}
-
-.empty-text {
-  color: hsl(var(--muted-foreground));
-  font-style: italic;
-}
-
-/* Notification Animations */
-@keyframes slideInRight {
-  from {
-    opacity: 0;
-    transform: translateX(100px);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-
-@keyframes slideOutRight {
-  from {
-    opacity: 1;
-    transform: translateX(0);
-  }
-  to {
-    opacity: 0;
-    transform: translateX(100px);
-  }
-}
-
-/* ============================================
-   Knowledge Graph D3 Visualization Styles
-   ============================================ */
-
-.knowledge-graph-container {
-  width: 100%;
-  min-height: 400px;
-  background: hsl(var(--muted) / 0.3);
-  border: 1px solid hsl(var(--border));
-  border-radius: 8px;
-  overflow: hidden;
-}
-
-.knowledge-graph-svg {
-  display: block;
-  width: 100%;
-  height: 100%;
-}
-
-.graph-content {
-  cursor: grab;
-}
-
-.graph-content:active {
-  cursor: grabbing;
-}
-
-.graph-edge {
-  stroke: hsl(var(--muted-foreground));
-  stroke-width: 1.5;
-  stroke-opacity: 0.6;
-  fill: none;
-}
-
-.graph-node {
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
-
-.graph-node:hover {
-  filter: brightness(1.2);
-  stroke-width: 3;
-}
-
-.graph-label {
-  font-size: 11px;
-  fill: hsl(var(--foreground));
-  pointer-events: none;
-  user-select: none;
-}
-
-.graph-node-group.file .graph-node { fill: #3b82f6; }
-.graph-node-group.function .graph-node { fill: #10b981; }
-.graph-node-group.module .graph-node { fill: #8b5cf6; }
-.graph-node-group.class .graph-node { fill: #f59e0b; }
-.graph-node-group.entity .graph-node { fill: #6b7280; }
-
-.graph-error,
-.graph-empty-state {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  min-height: 300px;
-  color: hsl(var(--muted-foreground));
-  text-align: center;
-  padding: 2rem;
-}
-
-.graph-error i,
-.graph-empty-state i {
-  width: 48px;
-  height: 48px;
-  margin-bottom: 1rem;
-  opacity: 0.5;
-}
-
-.graph-error p,
-.graph-empty-state p {
-  font-size: 0.9375rem;
-  margin: 0;
-}
-
-/* ============================================
-   Evolution Version Card Styles
-   ============================================ */
-
-.version-card {
-  background: hsl(var(--card));
-  border: 1px solid hsl(var(--border));
-  border-left: 3px solid hsl(var(--primary));
-  border-radius: 8px;
-  padding: 1rem;
-  transition: all 0.2s ease;
-}
-
-.version-card:hover {
-  box-shadow: 0 2px 8px hsl(var(--foreground) / 0.08);
-}
-
-.version-card .version-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 0.75rem;
-}
-
-.version-card .version-info {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  flex-wrap: wrap;
-}
-
-.version-card .version-number {
-  font-size: 0.875rem;
-  font-weight: 700;
-  color: hsl(var(--primary));
-  padding: 0.25rem 0.5rem;
-  background: hsl(var(--primary) / 0.1);
-  border-radius: 4px;
-}
-
-.version-card .version-date {
-  font-size: 0.8125rem;
-  color: hsl(var(--muted-foreground));
-}
-
-.version-content-preview {
-  font-size: 0.875rem;
-  line-height: 1.5;
-  color: hsl(var(--muted-foreground));
-  background: hsl(var(--muted) / 0.5);
-  padding: 0.75rem;
-  border-radius: 6px;
-  margin-bottom: 0.75rem;
-  white-space: pre-wrap;
-  word-break: break-word;
-}
-
-.version-diff-stats {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.75rem;
-  margin-bottom: 0.75rem;
-}
-
-.diff-stat {
-  display: flex;
-  align-items: center;
-  gap: 0.375rem;
-  font-size: 0.75rem;
-  font-weight: 500;
-  padding: 0.25rem 0.625rem;
-  border-radius: 4px;
-}
-
-.diff-stat i {
-  width: 12px;
-  height: 12px;
-}
-
-.diff-stat.diff-added {
-  background: hsl(142 76% 36% / 0.15);
-  color: hsl(142 76% 30%);
-}
-
-.diff-stat.diff-modified {
-  background: hsl(38 92% 50% / 0.15);
-  color: hsl(38 92% 40%);
-}
-
-.diff-stat.diff-deleted {
-  background: hsl(0 84% 60% / 0.15);
-  color: hsl(0 84% 45%);
-}
-
-.version-card .version-reason {
-  font-size: 0.8125rem;
-  color: hsl(var(--foreground));
-  padding-top: 0.75rem;
-  border-top: 1px solid hsl(var(--border));
-  margin-top: 0;
-}
-
-.version-card .version-reason strong {
-  color: hsl(var(--muted-foreground));
-  font-weight: 600;
-}
-
-.evolution-empty-state {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  min-height: 200px;
-  color: hsl(var(--muted-foreground));
-  text-align: center;
-  padding: 2rem;
-}
-
-.evolution-empty-state i {
-  width: 48px;
-  height: 48px;
-  margin-bottom: 1rem;
-  opacity: 0.5;
-}
-
-.evolution-empty-state p {
-  font-size: 0.9375rem;
-  margin: 0;
-}
-
-/* Relations Detail Styles */
-.relations-detail h4 {
-  font-size: 1rem;
-  font-weight: 600;
-  margin-bottom: 1rem;
-  color: hsl(var(--foreground));
-}
-
-.clusters-list {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-.relation-cluster-item {
-  padding: 1rem;
-  background: hsl(var(--muted) / 0.3);
-  border: 1px solid hsl(var(--border));
-  border-radius: 8px;
-}
-
-.relation-cluster-header {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  margin-bottom: 0.75rem;
-}
-
-.relation-cluster-header i {
-  width: 18px;
-  height: 18px;
-  color: hsl(var(--primary));
-}
-
-.relation-cluster-header .cluster-name {
-  font-weight: 600;
-  color: hsl(var(--foreground));
-}
-
-.cluster-relations-list {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 0.5rem;
-  padding-top: 0.75rem;
-  border-top: 1px solid hsl(var(--border));
-}
-
-.relations-label {
-  font-size: 0.8125rem;
-  color: hsl(var(--muted-foreground));
-}
-
-.relation-tag {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.375rem;
-  padding: 0.25rem 0.625rem;
-  background: hsl(var(--accent));
-  border-radius: 4px;
-  font-size: 0.8125rem;
-}
-
-.relation-tag i {
-  width: 12px;
-  height: 12px;
-  color: hsl(var(--muted-foreground));
-}
-
-.relation-tag .relation-type {
-  font-size: 0.6875rem;
-  padding: 0.125rem 0.375rem;
-  background: hsl(var(--primary) / 0.15);
-  color: hsl(var(--primary));
-  border-radius: 3px;
-  margin-left: 0.25rem;
-}
-
-.text-muted {
-  color: hsl(var(--muted-foreground));
-  font-size: 0.875rem;
-}
-
-/* Dark Mode Adjustments */
-[data-theme="dark"] .memory-card {
-  background: #1e293b;
-  border-color: #334155;
-}
-
-[data-theme="dark"] .memory-card:hover {
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-}
-
-[data-theme="dark"] .detail-code {
-  background: #0f172a;
-  border-color: #334155;
-}
-
-[data-theme="dark"] .entity-item,
-[data-theme="dark"] .relationship-item,
-[data-theme="dark"] .evolution-version {
-  background: #1e293b;
-  border-color: #334155;
-}
-
-[data-theme="dark"] .knowledge-graph-container {
-  background: #0f172a;
-  border-color: #334155;
-}
-
-[data-theme="dark"] .graph-label {
-  fill: #e2e8f0;
-}
-
-[data-theme="dark"] .graph-edge {
-  stroke: #64748b;
-}
-
-[data-theme="dark"] .version-card {
-  background: #1e293b;
-  border-color: #334155;
-}
-
-[data-theme="dark"] .version-content-preview {
-  background: #0f172a;
-}
-
-/* ============================================
-   Session Clustering Styles
-   ============================================ */
-
-.clusters-container {
-  margin-top: 0;
-  height: calc(100vh - 200px);
-  min-height: 500px;
-}
-
-.clusters-layout {
-  display: grid;
-  grid-template-columns: 320px 1fr;
-  gap: 1.5rem;
-  height: 100%;
-}
-
-@media (max-width: 900px) {
-  .clusters-layout {
-    grid-template-columns: 1fr;
-  }
-}
-
-/* Clusters Sidebar */
-.clusters-sidebar {
-  background: hsl(var(--card));
-  border: 1px solid hsl(var(--border));
-  border-radius: 8px;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-
-.clusters-sidebar-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 1rem;
-  border-bottom: 1px solid hsl(var(--border));
-  background: hsl(var(--muted) / 0.3);
-}
-
-.clusters-sidebar-header h4 {
-  margin: 0;
-  font-size: 0.9375rem;
-  font-weight: 600;
-  color: hsl(var(--foreground));
-}
-
-.cluster-list {
-  flex: 1;
-  overflow-y: auto;
-  padding: 0.5rem;
-}
-
-/* Cluster Item */
-.cluster-item {
-  display: flex;
-  align-items: flex-start;
-  gap: 0.75rem;
-  padding: 0.875rem;
-  border-radius: 6px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  margin-bottom: 0.5rem;
-  border: 1px solid transparent;
-}
-
-.cluster-item:hover {
-  background: hsl(var(--muted) / 0.5);
-}
-
-.cluster-item.active {
-  background: hsl(var(--primary) / 0.1);
-  border-color: hsl(var(--primary) / 0.3);
-}
-
-.cluster-icon {
-  flex-shrink: 0;
-  width: 36px;
-  height: 36px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: hsl(var(--muted));
-  border-radius: 6px;
-  color: hsl(var(--muted-foreground));
-}
-
-.cluster-icon i {
-  width: 18px;
-  height: 18px;
-}
-
-.cluster-item.active .cluster-icon {
-  background: hsl(var(--primary) / 0.15);
-  color: hsl(var(--primary));
-}
-
-.cluster-info {
-  flex: 1;
-  min-width: 0;
-}
-
-.cluster-name {
-  font-weight: 500;
-  font-size: 0.9375rem;
-  color: hsl(var(--foreground));
-  margin-bottom: 0.25rem;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.cluster-meta {
-  display: flex;
-  gap: 0.75rem;
-  font-size: 0.75rem;
-  color: hsl(var(--muted-foreground));
-}
-
-/* Cluster Status Badges */
-.badge-active {
-  background: hsl(142 76% 36% / 0.15);
-  color: hsl(142 76% 36%);
-}
-
-.badge-archived {
-  background: hsl(var(--muted));
-  color: hsl(var(--muted-foreground));
-}
-
-.badge-pending {
-  background: hsl(38 92% 50% / 0.15);
-  color: hsl(38 92% 40%);
-}
-
-/* Clusters Detail Panel */
-.clusters-detail {
-  background: hsl(var(--card));
-  border: 1px solid hsl(var(--border));
-  border-radius: 8px;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-}
-
-.cluster-detail-content {
-  padding: 1.5rem;
-  flex: 1;
-  overflow-y: auto;
-  min-height: 0; /* Enable flexbox scrolling */
-}
-
-.cluster-detail-content .empty-state {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  min-height: 300px;
-}
-
-/* Cluster Detail View */
-.cluster-detail {
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-}
-
-.cluster-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.cluster-header h3 {
-  margin: 0;
-  font-size: 1.25rem;
-  font-weight: 600;
-  color: hsl(var(--foreground));
-}
-
-.cluster-actions {
-  display: flex;
-  gap: 0.5rem;
-}
-
-.cluster-description {
-  color: hsl(var(--muted-foreground));
-  font-size: 0.9375rem;
-  line-height: 1.6;
-  margin: 0;
-}
-
-.cluster-intent {
-  padding: 0.75rem 1rem;
-  background: hsl(var(--muted) / 0.5);
-  border-radius: 6px;
-  font-size: 0.875rem;
-  color: hsl(var(--foreground));
-}
-
-.cluster-intent strong {
-  color: hsl(var(--primary));
-}
-
-/* Cluster Sections */
-.cluster-timeline,
-.cluster-relations {
-  padding-top: 1rem;
-  border-top: 1px solid hsl(var(--border));
-}
-
-.cluster-timeline h4,
-.cluster-relations h4 {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  margin: 0 0 1rem 0;
-  font-size: 1rem;
-  font-weight: 600;
-  color: hsl(var(--foreground));
-}
-
-.cluster-timeline h4 i,
-.cluster-relations h4 i {
-  width: 18px;
-  height: 18px;
-  color: hsl(var(--primary));
-}
-
-/* Session Timeline */
-.timeline {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  max-width: 100%;
-}
-
-/* Override conflicting timeline-item styles from other CSS files */
-.cluster-timeline .timeline .timeline-item {
-  display: flex;
-  gap: 1rem;
-  position: relative;
-  /* Reset card-like appearance from other CSS */
-  background: transparent;
-  border: none;
-  border-radius: 0;
-  padding: 0;
-  margin-bottom: 0;
-  /* Remove height constraints */
-  min-height: auto;
-  max-height: none;
-  overflow: visible;
-  cursor: default;
-}
-
-.cluster-timeline .timeline .timeline-item::before {
-  content: '';
-  position: absolute;
-  left: 0.6875rem;
-  top: 2rem;
-  bottom: -1rem;
-  width: 2px;
-  background: hsl(var(--border));
-}
-
-.cluster-timeline .timeline .timeline-item:last-child::before {
-  display: none;
-}
-
-.timeline-marker {
-  flex-shrink: 0;
-  width: 1.5rem;
-  height: 1.5rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1;
-}
-
-.timeline-number {
-  width: 1.5rem;
-  height: 1.5rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: hsl(var(--primary));
-  color: white;
-  border-radius: 50%;
-  font-size: 0.75rem;
-  font-weight: 600;
-}
-
-.timeline-content {
-  flex: 1;
-  background: hsl(var(--card));
-  border: 1px solid hsl(var(--border));
-  border-radius: 8px;
-  padding: 1rem;
-  transition: all 0.2s ease;
-  cursor: pointer;
-}
-
-.timeline-content:hover {
-  border-color: hsl(var(--primary) / 0.3);
-  box-shadow: 0 2px 8px hsl(var(--foreground) / 0.05);
-}
-
-.timeline-content.expanded {
-  border-color: hsl(var(--primary) / 0.5);
-  background: hsl(var(--primary) / 0.02);
-}
-
-.timeline-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.5rem;
-  margin-bottom: 0.75rem;
-  padding-bottom: 0.75rem;
-  border-bottom: 1px solid hsl(var(--border));
-}
-
-.session-id {
-  font-family: 'Monaco', 'Menlo', monospace;
-  font-size: 0.75rem;
-  color: hsl(var(--muted-foreground));
-  background: hsl(var(--muted));
-  padding: 0.25rem 0.5rem;
-  border-radius: 4px;
-}
-
-/* Session Type Badges */
-.badge-core_memory {
-  background: hsl(260 70% 50% / 0.15);
-  color: hsl(260 70% 50%);
-}
-
-.badge-workflow {
-  background: hsl(200 80% 50% / 0.15);
-  color: hsl(200 80% 45%);
-}
-
-.badge-cli_history {
-  background: hsl(30 80% 50% / 0.15);
-  color: hsl(30 80% 40%);
-}
-
-.session-title {
-  font-weight: 600;
-  font-size: 0.9375rem;
-  color: hsl(var(--foreground));
-  line-height: 1.4;
-  margin-bottom: 0.5rem;
-}
-
-.session-summary {
-  font-size: 0.875rem;
-  color: hsl(var(--muted-foreground));
-  line-height: 1.5;
-  margin-bottom: 0.5rem;
-}
-
-.session-tokens {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.375rem;
-  font-size: 0.75rem;
-  color: hsl(var(--muted-foreground));
-  padding: 0.25rem 0.5rem;
-  background: hsl(var(--muted));
-  border-radius: 4px;
-  margin-bottom: 0.75rem;
-}
-
-.session-tokens i {
-  width: 12px;
-  height: 12px;
-}
-
-/* Expandable timeline card - DEPRECATED, use clickable instead */
-.timeline-content.expandable {
-  position: relative;
-}
-
-/* Clickable timeline card */
-.timeline-content.clickable {
-  position: relative;
-}
-
-.timeline-content.clickable:hover {
-  border-color: hsl(var(--primary) / 0.5);
-  background: hsl(var(--primary) / 0.02);
-}
-
-.timeline-content.clickable:active {
-  transform: scale(0.995);
-}
-
-/* Timeline card footer with preview hint */
-.timeline-card-footer {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-top: 0.75rem;
-  padding-top: 0.75rem;
-  border-top: 1px solid hsl(var(--border));
-}
-
-.preview-hint {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.375rem;
-  font-size: 0.75rem;
-  color: hsl(var(--muted-foreground));
-  transition: color 0.2s;
-}
-
-.preview-hint i {
-  width: 14px;
-  height: 14px;
-}
-
-.timeline-content:hover .preview-hint {
-  color: hsl(var(--primary));
-}
-
-/* CSS Arrow for expand hint - DEPRECATED */
-.expand-arrow {
-  display: flex;
-  justify-content: center;
-  padding: 0.75rem 0 0.25rem;
-  opacity: 0.5;
-  transition: opacity 0.2s;
-}
-
-.timeline-content:hover .expand-arrow {
-  opacity: 1;
-}
-
-.expand-arrow::after {
-  content: '';
-  width: 10px;
-  height: 10px;
-  border-right: 2px solid hsl(var(--primary));
-  border-bottom: 2px solid hsl(var(--primary));
-  transform: rotate(45deg);
-  transition: transform 0.2s ease;
-}
-
-.timeline-content.expanded .expand-arrow::after {
-  transform: rotate(-135deg) translateY(3px);
-}
-
-/* Expanded detail section */
-.session-detail-expand {
-  display: none;
-  margin-top: 1rem;
-  padding-top: 1rem;
-  border-top: 1px solid hsl(var(--border));
-  animation: fadeIn 0.2s ease-out;
-}
-
-.timeline-content.expanded .session-detail-expand {
-  display: block;
-}
-
-.full-summary {
-  font-size: 0.875rem;
-  color: hsl(var(--foreground));
-  line-height: 1.6;
-  white-space: pre-wrap;
-  word-break: break-word;
-  margin-bottom: 1rem;
-  padding: 0.75rem;
-  background: hsl(var(--muted) / 0.3);
-  border-radius: 6px;
-}
-
-.session-detail-expand .session-tokens {
-  font-size: 0.75rem;
-  color: hsl(var(--muted-foreground));
-  margin-bottom: 1rem;
-}
-
-.timeline-actions {
-  display: flex;
-  gap: 0.5rem;
-  padding-top: 0.75rem;
-  border-top: 1px solid hsl(var(--border));
-}
-
-.btn-xs {
-  padding: 0.375rem 0.75rem;
-  font-size: 0.75rem;
-  display: inline-flex;
-  align-items: center;
-  gap: 0.375rem;
-  border-radius: 4px;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.btn-xs i {
-  width: 14px;
-  height: 14px;
-}
-
-.btn-ghost {
-  background: transparent;
-  border: 1px solid hsl(var(--border));
-  color: hsl(var(--muted-foreground));
-}
-
-.btn-ghost:hover {
-  background: hsl(var(--muted));
-  color: hsl(var(--foreground));
-  border-color: hsl(var(--muted-foreground));
-}
-
-.btn-ghost.btn-danger:hover {
-  background: hsl(var(--destructive) / 0.1);
-  color: hsl(var(--destructive));
-  border-color: hsl(var(--destructive) / 0.3);
-}
-
-/* Relations List */
-.relations-list {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.relation-item {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  padding: 0.625rem 0.875rem;
-  background: hsl(var(--muted) / 0.3);
-  border: 1px solid hsl(var(--border));
-  border-radius: 6px;
-  font-size: 0.875rem;
-}
-
-.relation-item i {
-  width: 14px;
-  height: 14px;
-  color: hsl(var(--muted-foreground));
-}
-
-.relation-type {
-  padding: 0.125rem 0.5rem;
-  background: hsl(var(--primary) / 0.1);
-  color: hsl(var(--primary));
-  border-radius: 3px;
-  font-size: 0.75rem;
-  font-weight: 500;
-}
-
-.relation-item a {
-  color: hsl(var(--primary));
-  text-decoration: none;
-}
-
-.relation-item a:hover {
-  text-decoration: underline;
-}
-
-/* Dark Mode for Clusters */
-[data-theme="dark"] .clusters-sidebar,
-[data-theme="dark"] .clusters-detail {
-  background: #1e293b;
-  border-color: #334155;
-}
-
-[data-theme="dark"] .tab-nav {
-  background: rgba(51, 65, 85, 0.5);
-}
-
-[data-theme="dark"] .tab-btn.active {
-  background: #1e293b;
-}
-
-[data-theme="dark"] .clusters-sidebar-header {
-  background: rgba(15, 23, 42, 0.5);
-  border-color: #334155;
-}
-
-[data-theme="dark"] .cluster-item:hover {
-  background: rgba(51, 65, 85, 0.5);
-}
-
-[data-theme="dark"] .cluster-item.active {
-  background: rgba(59, 130, 246, 0.15);
-  border-color: rgba(59, 130, 246, 0.3);
-}
-
-[data-theme="dark"] .timeline-content,
-[data-theme="dark"] .cluster-intent,
-[data-theme="dark"] .relation-item {
-  background: rgba(15, 23, 42, 0.5);
-  border-color: #334155;
-}
-
-/* Embedding Hint Styles */
-.embedding-hint {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 10px 12px;
-  margin-bottom: 12px;
-  border-radius: 8px;
-  font-size: 12px;
-  line-height: 1.4;
-}
-
-.embedding-hint i {
-  flex-shrink: 0;
-  width: 16px;
-  height: 16px;
-}
-
-.embedding-hint.warning {
-  background: rgba(245, 158, 11, 0.1);
-  border: 1px solid rgba(245, 158, 11, 0.3);
-  color: #d97706;
-}
-
-.embedding-hint.info {
-  background: rgba(59, 130, 246, 0.1);
-  border: 1px solid rgba(59, 130, 246, 0.3);
-  color: #3b82f6;
-}
-
-.embedding-hint .hint-link {
-  margin-left: auto;
-  color: inherit;
-  text-decoration: underline;
-  white-space: nowrap;
-}
-
-.embedding-hint .btn-xs {
-  margin-left: auto;
-  padding: 4px 8px;
-  font-size: 11px;
-}
-
-[data-theme="dark"] .embedding-hint.warning {
-  background: rgba(245, 158, 11, 0.15);
-  color: #fbbf24;
-}
-
-[data-theme="dark"] .embedding-hint.info {
-  background: rgba(59, 130, 246, 0.15);
-  color: #60a5fa;
-}