claude-code-workflow 6.3.53 → 7.0.0

package/ccw/src/templates/dashboard-css/23-memory.css

@@ -1,2390 +0,0 @@
-/* ========================================
- * Memory Module Styles
- * Three-column layout: Hotspots | Graph | Context
- * ======================================== */
-
-/* ========================================
- * Memory View Layout
- * ======================================== */
-.memory-view {
-  height: 100%;
-  min-height: 600px;
-  max-height: calc(100vh - 150px);
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-}
-
-.memory-view.loading {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
-
-/* Memory Header with Active Memory Toggle */
-.memory-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0.75rem 0;
-  margin-bottom: 1rem;
-  border-bottom: 1px solid hsl(var(--border));
-  flex-shrink: 0;
-}
-
-.memory-header-left {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.memory-header-left h2 {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  font-size: 1.125rem;
-  font-weight: 600;
-  color: hsl(var(--foreground));
-  margin: 0;
-}
-
-.memory-header-right {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-}
-
-/* Active Memory Controls Container */
-.active-memory-controls {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-}
-
-/* Active Memory Toggle */
-.active-memory-toggle {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-}
-
-/* Active Memory Config */
-.active-memory-config {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  padding-left: 0.75rem;
-  border-left: 1px solid hsl(var(--border));
-}
-
-.config-item {
-  display: flex;
-  align-items: center;
-  gap: 0.375rem;
-}
-
-.config-item label {
-  font-size: 0.75rem;
-  color: hsl(var(--muted-foreground));
-  white-space: nowrap;
-}
-
-.config-item select {
-  padding: 0.25rem 0.5rem;
-  font-size: 0.75rem;
-  color: hsl(var(--foreground));
-  background: hsl(var(--background));
-  border: 1px solid hsl(var(--border));
-  border-radius: 0.25rem;
-  cursor: pointer;
-  outline: none;
-  min-width: 80px;
-}
-
-.config-item select:focus {
-  border-color: hsl(var(--primary));
-}
-
-.config-item select:hover {
-  border-color: hsl(var(--primary) / 0.5);
-}
-
-/* Active Memory Actions */
-.active-memory-actions {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding-left: 0.75rem;
-  border-left: 1px solid hsl(var(--border));
-}
-
-.last-sync {
-  font-size: 0.6875rem;
-  color: hsl(var(--muted-foreground));
-  white-space: nowrap;
-}
-
-.toggle-label {
-  font-size: 0.8125rem;
-  font-weight: 500;
-  color: hsl(var(--muted-foreground));
-}
-
-.toggle-switch {
-  position: relative;
-  display: inline-block;
-  width: 44px;
-  height: 24px;
-}
-
-.toggle-switch input {
-  opacity: 0;
-  width: 0;
-  height: 0;
-}
-
-.toggle-slider {
-  position: absolute;
-  cursor: pointer;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: hsl(var(--muted));
-  border-radius: 24px;
-  transition: all 0.3s ease;
-}
-
-.toggle-slider::before {
-  position: absolute;
-  content: "";
-  height: 18px;
-  width: 18px;
-  left: 3px;
-  bottom: 3px;
-  background-color: white;
-  border-radius: 50%;
-  transition: all 0.3s ease;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-}
-
-.toggle-switch input:checked + .toggle-slider {
-  background-color: hsl(var(--primary));
-}
-
-.toggle-switch input:checked + .toggle-slider::before {
-  transform: translateX(20px);
-}
-
-.toggle-switch input:focus + .toggle-slider {
-  box-shadow: 0 0 0 2px hsl(var(--primary) / 0.3);
-}
-
-.toggle-status {
-  font-size: 0.75rem;
-  font-weight: 500;
-  color: hsl(var(--muted-foreground));
-  padding: 0.25rem 0.5rem;
-  border-radius: 0.25rem;
-  background: hsl(var(--muted) / 0.5);
-}
-
-.toggle-status.active {
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
-  color: hsl(142 76% 36%);
-  background: hsl(142 76% 36% / 0.1);
-}
-
-/* Auto-sync indicator */
-.auto-sync-indicator {
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
-  font-size: 0.6875rem;
-  color: hsl(var(--primary));
-  background: hsl(var(--primary) / 0.1);
-  padding: 0.25rem 0.5rem;
-  border-radius: 0.25rem;
-  white-space: nowrap;
-}
-
-.auto-sync-indicator svg {
-  animation: pulse 2s ease-in-out infinite;
-}
-
-@keyframes pulse {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.5; }
-}
-
-/* Sync Button */
-.btn-sync {
-  padding: 0.5rem;
-  border-radius: 0.375rem;
-  background: hsl(var(--primary) / 0.1);
-  border: 1px solid hsl(var(--primary) / 0.3);
-  color: hsl(var(--primary));
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
-
-.btn-sync:hover {
-  background: hsl(var(--primary) / 0.2);
-  border-color: hsl(var(--primary));
-}
-
-.btn-sync.syncing {
-  opacity: 0.7;
-  cursor: not-allowed;
-}
-
-.btn-sync.syncing i {
-  animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
-}
-
-.memory-columns {
-  display: grid;
-  grid-template-columns: 280px 1fr 320px;
-  gap: 1.5rem;
-  flex: 1;
-  min-height: 0;
-  max-height: calc(100vh - 230px);
-}
-
-.memory-column {
-  display: flex;
-  flex-direction: column;
-  background: hsl(var(--card));
-  border: 1px solid hsl(var(--border));
-  border-radius: 0.75rem;
-  overflow: hidden;
-  min-width: 0;
-  max-height: 100%;
-}
-
-/* Memory Section inside columns */
-.memory-section {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  overflow: hidden;
-}
-
-.section-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0.875rem 1rem;
-  border-bottom: 1px solid hsl(var(--border));
-  background: hsl(var(--muted) / 0.3);
-}
-
-.section-header h3 {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  font-size: 0.875rem;
-  font-weight: 600;
-  color: hsl(var(--foreground));
-  margin: 0;
-}
-
-.section-header-left {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.section-header-actions {
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
-}
-
-/* Memory Filters */
-.memory-filters {
-  display: flex;
-  gap: 0.25rem;
-  padding: 0.75rem 1rem;
-  border-bottom: 1px solid hsl(var(--border));
-  background: hsl(var(--muted) / 0.15);
-}
-
-.filter-btn {
-  padding: 0.375rem 0.75rem;
-  font-size: 0.75rem;
-  font-weight: 500;
-  color: hsl(var(--muted-foreground));
-  background: transparent;
-  border: 1px solid hsl(var(--border));
-  border-radius: 0.375rem;
-  cursor: pointer;
-  transition: all 0.15s ease;
-}
-
-.filter-btn:hover {
-  background: hsl(var(--hover));
-  color: hsl(var(--foreground));
-}
-
-.filter-btn.active {
-  background: hsl(var(--primary));
-  color: hsl(var(--primary-foreground));
-  border-color: hsl(var(--primary));
-}
-
-/* Hotspot Lists Container */
-.hotspot-lists {
-  flex: 1;
-  overflow-y: auto;
-  padding: 0.75rem;
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-  min-height: 0;
-}
-
-.hotspot-list-container {
-  display: flex;
-  flex-direction: column;
-}
-
-.hotspot-list-container:last-child {
-  margin-bottom: 0;
-}
-
-.hotspot-list-title {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  font-size: 0.75rem;
-  font-weight: 600;
-  color: hsl(var(--muted-foreground));
-  margin: 0 0 0.5rem 0;
-  padding-bottom: 0.375rem;
-  border-bottom: 1px solid hsl(var(--border));
-  flex-shrink: 0;
-}
-
-/* Hotspot List Items */
-.hotspot-list {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.hotspot-item {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  padding: 0.625rem 0.75rem;
-  background: hsl(var(--background));
-  border: 1px solid hsl(var(--border));
-  border-radius: 0.5rem;
-  cursor: pointer;
-  transition: all 0.15s ease;
-}
-
-.hotspot-item:hover {
-  background: hsl(var(--hover));
-  border-color: hsl(var(--primary) / 0.3);
-}
-
-.hotspot-rank {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 1.5rem;
-  height: 1.5rem;
-  font-size: 0.6875rem;
-  font-weight: 700;
-  color: hsl(var(--muted-foreground));
-  background: hsl(var(--muted));
-  border-radius: 0.25rem;
-  flex-shrink: 0;
-}
-
-.hotspot-info {
-  flex: 1;
-  min-width: 0;
-}
-
-.hotspot-name {
-  font-size: 0.8125rem;
-  font-weight: 500;
-  color: hsl(var(--foreground));
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.hotspot-path {
-  font-size: 0.6875rem;
-  color: hsl(var(--muted-foreground));
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  margin-top: 0.125rem;
-}
-
-.hotspot-heat {
-  display: flex;
-  align-items: center;
-  gap: 0.375rem;
-  flex-shrink: 0;
-}
-
-.hotspot-heat .heat-badge {
-  padding: 0.25rem 0.5rem;
-  font-size: 0.6875rem;
-  font-weight: 600;
-  border-radius: 0.25rem;
-}
-
-.hotspot-heat.high .heat-badge {
-  background: hsl(0 84% 92%);
-  color: hsl(0 84% 40%);
-}
-
-.hotspot-heat.medium .heat-badge {
-  background: hsl(38 92% 90%);
-  color: hsl(38 92% 30%);
-}
-
-.hotspot-heat.low .heat-badge {
-  background: hsl(142 71% 90%);
-  color: hsl(142 71% 30%);
-}
-
-.hotspot-empty {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 1.5rem;
-  text-align: center;
-  color: hsl(var(--muted-foreground));
-}
-
-.hotspot-empty i {
-  margin-bottom: 0.5rem;
-  opacity: 0.5;
-}
-
-.hotspot-empty p {
-  margin: 0;
-  font-size: 0.8125rem;
-}
-
-/* Graph Legend */
-.graph-legend {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  padding: 0.5rem 1rem;
-  border-top: 1px solid hsl(var(--border));
-  background: hsl(var(--muted) / 0.15);
-  font-size: 0.6875rem;
-  color: hsl(var(--muted-foreground));
-}
-
-.legend-item {
-  display: flex;
-  align-items: center;
-  gap: 0.375rem;
-}
-
-.legend-dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-}
-
-.legend-dot.file { background: hsl(var(--primary)); }
-.legend-dot.module { background: hsl(var(--muted-foreground)); border: 1px dashed hsl(var(--muted-foreground)); }
-.legend-dot.component { background: hsl(142 76% 36%); }
-
-/* Graph Container */
-.graph-container,
-.memory-graph-container {
-  flex: 1;
-  position: relative;
-  background: hsl(var(--background));
-  min-height: 300px;
-  max-height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-}
-
-.memory-graph-container svg {
-  width: 100%;
-  height: 100%;
-}
-
-/* Memory Graph Legend */
-.memory-graph-legend {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  padding: 0.5rem 1rem;
-  border-top: 1px solid hsl(var(--border));
-  background: hsl(var(--muted) / 0.15);
-  font-size: 0.6875rem;
-  color: hsl(var(--muted-foreground));
-}
-
-/* Graph Empty State */
-.graph-empty-state,
-.graph-error {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 2rem;
-  text-align: center;
-  color: hsl(var(--muted-foreground));
-}
-
-.graph-empty-state i,
-.graph-error i {
-  margin-bottom: 0.75rem;
-  opacity: 0.5;
-}
-
-.graph-empty-state p,
-.graph-error p {
-  margin: 0;
-  font-size: 0.875rem;
-}
-
-/* Section Count Badge */
-.section-count {
-  font-size: 0.6875rem;
-  color: hsl(var(--muted-foreground));
-  margin-left: 0.5rem;
-}
-
-/* Graph Edge Styles */
-.graph-edge {
-  stroke: hsl(var(--border));
-  stroke-opacity: 0.6;
-}
-
-/* Graph Node Styles */
-.graph-node {
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
-
-.graph-node.file {
-  fill: hsl(var(--primary));
-}
-
-.graph-node.module {
-  fill: hsl(var(--muted-foreground));
-}
-
-.graph-node.component {
-  fill: hsl(var(--success));
-}
-
-.graph-node-label {
-  font-size: 10px;
-  fill: hsl(var(--foreground));
-  pointer-events: none;
-}
-
-/* Context Search */
-.context-search {
-  position: relative;
-  padding: 0.75rem 1rem;
-  border-bottom: 1px solid hsl(var(--border));
-}
-
-.context-search input,
-.context-search-input {
-  width: 100%;
-  padding: 0.5rem 0.75rem 0.5rem 2rem;
-  font-size: 0.8125rem;
-  color: hsl(var(--foreground));
-  background: hsl(var(--background));
-  border: 1px solid hsl(var(--border));
-  border-radius: 0.375rem;
-  outline: none;
-  transition: border-color 0.15s ease;
-}
-
-.context-search input:focus,
-.context-search-input:focus {
-  border-color: hsl(var(--primary));
-}
-
-.context-search input::placeholder,
-.context-search-input::placeholder {
-  color: hsl(var(--muted-foreground));
-}
-
-.context-search .search-icon {
-  position: absolute;
-  left: 1.5rem;
-  top: 50%;
-  transform: translateY(-50%);
-  color: hsl(var(--muted-foreground));
-  pointer-events: none;
-}
-
-/* Context Empty State */
-.context-empty {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 2rem;
-  text-align: center;
-  color: hsl(var(--muted-foreground));
-}
-
-.context-empty i {
-  margin-bottom: 0.75rem;
-  opacity: 0.5;
-}
-
-.context-empty p {
-  margin: 0;
-  font-size: 0.875rem;
-}
-
-/* Context Timeline */
-.context-timeline {
-  flex: 1;
-  overflow-y: auto;
-  padding: 0.75rem;
-  min-height: 0;
-}
-
-/* Context Timeline Card Style */
-.timeline-item {
-  display: flex;
-  gap: 0.75rem;
-  padding: 0.75rem;
-  margin-bottom: 0.5rem;
-  background: hsl(var(--background));
-  border: 1px solid hsl(var(--border));
-  border-radius: 0.5rem;
-  transition: all 0.15s ease;
-  cursor: pointer;
-  min-height: 60px;
-  max-height: 120px;
-  overflow: hidden;
-}
-
-.timeline-item:hover {
-  border-color: hsl(var(--primary) / 0.3);
-  background: hsl(var(--hover));
-}
-
-.timeline-item.expanded {
-  max-height: none;
-  background: hsl(var(--muted) / 0.3);
-  border-color: hsl(var(--primary) / 0.5);
-}
-
-.timeline-item:last-child {
-  margin-bottom: 0;
-}
-
-.timeline-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 1.75rem;
-  height: 1.75rem;
-  border-radius: 0.375rem;
-  flex-shrink: 0;
-}
-
-.timeline-icon.read {
-  background: hsl(var(--primary-light));
-  color: hsl(var(--primary));
-}
-
-.timeline-icon.edit {
-  background: hsl(var(--warning-light));
-  color: hsl(var(--warning));
-}
-
-.timeline-icon.prompt,
-.timeline-icon.unknown {
-  background: hsl(var(--muted));
-  color: hsl(var(--muted-foreground));
-}
-
-.timeline-content {
-  flex: 1;
-  min-width: 0;
-}
-
-.timeline-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 0.25rem;
-}
-
-.timeline-type {
-  font-size: 0.75rem;
-  font-weight: 600;
-  color: hsl(var(--foreground));
-}
-
-.timeline-time {
-  font-size: 0.6875rem;
-  color: hsl(var(--muted-foreground));
-}
-
-.timeline-prompt {
-  font-size: 0.8125rem;
-  color: hsl(var(--foreground));
-  line-height: 1.4;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-}
-
-.timeline-files {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.375rem;
-  margin-top: 0.5rem;
-}
-
-.file-tag {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.25rem;
-  padding: 0.125rem 0.5rem;
-  font-size: 0.6875rem;
-  background: hsl(var(--muted));
-  color: hsl(var(--foreground));
-  border-radius: 0.25rem;
-  cursor: pointer;
-  transition: all 0.15s ease;
-}
-
-.file-tag:hover {
-  background: hsl(var(--primary-light));
-  color: hsl(var(--primary));
-}
-
-.file-tag.more {
-  background: hsl(var(--muted));
-  color: hsl(var(--muted-foreground));
-  cursor: default;
-}
-
-/* Context List */
-.context-list {
-  flex: 1;
-  overflow-y: auto;
-  padding: 0.75rem;
-}
-
-.context-item {
-  display: flex;
-  align-items: flex-start;
-  gap: 0.75rem;
-  padding: 0.75rem;
-  margin-bottom: 0.5rem;
-  background: hsl(var(--background));
-  border: 1px solid hsl(var(--border));
-  border-radius: 0.5rem;
-  cursor: pointer;
-  transition: all 0.15s ease;
-}
-
-.context-item:hover {
-  background: hsl(var(--hover));
-  border-color: hsl(var(--primary) / 0.3);
-}
-
-.context-item:last-child {
-  margin-bottom: 0;
-}
-
-.context-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 28px;
-  height: 28px;
-  border-radius: 0.375rem;
-  background: hsl(var(--muted));
-  color: hsl(var(--muted-foreground));
-  flex-shrink: 0;
-}
-
-.context-icon.read { background: hsl(var(--primary-light)); color: hsl(var(--primary)); }
-.context-icon.edit { background: hsl(var(--warning-light)); color: hsl(var(--warning)); }
-.context-icon.prompt { background: hsl(var(--success-light)); color: hsl(var(--success)); }
-
-.context-info {
-  flex: 1;
-  min-width: 0;
-}
-
-.context-file {
-  font-size: 0.8125rem;
-  font-weight: 500;
-  color: hsl(var(--foreground));
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.context-time {
-  font-size: 0.6875rem;
-  color: hsl(var(--muted-foreground));
-  margin-top: 0.125rem;
-}
-
-/* Context Stats Footer */
-.context-stats {
-  display: flex;
-  justify-content: space-around;
-  padding: 0.75rem;
-  border-top: 1px solid hsl(var(--border));
-  background: hsl(var(--muted) / 0.15);
-}
-
-.context-stat {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 0.25rem;
-}
-
-.context-stat-value {
-  font-size: 1.125rem;
-  font-weight: 700;
-  color: hsl(var(--primary));
-}
-
-.context-stat-label {
-  font-size: 0.625rem;
-  color: hsl(var(--muted-foreground));
-  text-transform: uppercase;
-}
-
-/* ========== Node Details Panel ========== */
-.node-details {
-  padding: 1rem;
-}
-
-.node-detail-header {
-  display: flex;
-  align-items: flex-start;
-  gap: 0.75rem;
-  padding-bottom: 1rem;
-  border-bottom: 1px solid hsl(var(--border));
-  margin-bottom: 1rem;
-}
-
-.node-detail-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 2.5rem;
-  height: 2.5rem;
-  border-radius: 0.5rem;
-  flex-shrink: 0;
-}
-
-.node-detail-icon.file {
-  background: hsl(var(--primary) / 0.1);
-  color: hsl(var(--primary));
-}
-
-.node-detail-icon.module {
-  background: hsl(267, 84%, 95%);
-  color: hsl(267, 84%, 50%);
-}
-
-.node-detail-icon.component {
-  background: hsl(142, 71%, 92%);
-  color: hsl(142, 71%, 40%);
-}
-
-.node-detail-info {
-  flex: 1;
-  min-width: 0;
-}
-
-.node-detail-name {
-  font-size: 0.9375rem;
-  font-weight: 600;
-  color: hsl(var(--foreground));
-  margin-bottom: 0.25rem;
-  word-break: break-word;
-}
-
-.node-detail-path {
-  font-size: 0.75rem;
-  color: hsl(var(--muted-foreground));
-  font-family: monospace;
-  word-break: break-all;
-}
-
-.node-detail-stats {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 0.75rem;
-  padding: 0.875rem;
-  background: hsl(var(--muted) / 0.3);
-  border-radius: 0.5rem;
-  margin-bottom: 1rem;
-}
-
-.detail-stat {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 0.25rem;
-  text-align: center;
-}
-
-.detail-stat-label {
-  font-size: 0.6875rem;
-  color: hsl(var(--muted-foreground));
-  text-transform: uppercase;
-  letter-spacing: 0.025em;
-}
-
-.detail-stat-value {
-  font-size: 1rem;
-  font-weight: 600;
-  color: hsl(var(--foreground));
-}
-
-.node-associations {
-  margin-top: 1rem;
-}
-
-.associations-title {
-  display: flex;
-  align-items: center;
-  gap: 0.375rem;
-  font-size: 0.8125rem;
-  font-weight: 600;
-  color: hsl(var(--foreground));
-  margin: 0 0 0.75rem 0;
-}
-
-.associations-list {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.association-item {
-  display: flex;
-  align-items: center;
-  gap: 0.625rem;
-  padding: 0.625rem;
-  background: hsl(var(--background));
-  border: 1px solid hsl(var(--border));
-  border-radius: 0.375rem;
-  cursor: pointer;
-  transition: all 0.15s ease;
-}
-
-.association-item:hover {
-  background: hsl(var(--hover));
-  border-color: hsl(var(--primary) / 0.3);
-}
-
-.association-node {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  flex: 1;
-  min-width: 0;
-}
-
-.association-node i {
-  color: hsl(var(--muted-foreground));
-  flex-shrink: 0;
-}
-
-.association-node span {
-  font-size: 0.8125rem;
-  font-weight: 500;
-  color: hsl(var(--foreground));
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.association-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 1.75rem;
-  height: 1.75rem;
-  border-radius: 0.375rem;
-  background: hsl(var(--muted));
-  color: hsl(var(--muted-foreground));
-  flex-shrink: 0;
-}
-
-.association-icon.file {
-  background: hsl(var(--primary) / 0.1);
-  color: hsl(var(--primary));
-}
-
-.association-icon.module {
-  background: hsl(267, 84%, 95%);
-  color: hsl(267, 84%, 50%);
-}
-
-.association-info {
-  flex: 1;
-  min-width: 0;
-}
-
-.association-name {
-  font-size: 0.8125rem;
-  font-weight: 500;
-  color: hsl(var(--foreground));
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.association-weight {
-  font-size: 0.6875rem;
-  color: hsl(var(--muted-foreground));
-  padding: 0.125rem 0.375rem;
-  background: hsl(var(--muted));
-  border-radius: 0.25rem;
-  flex-shrink: 0;
-}
-
-.node-no-associations {
-  padding: 1.5rem;
-  text-align: center;
-  color: hsl(var(--muted-foreground));
-  font-size: 0.875rem;
-}
-
-.associations-more {
-  text-align: center;
-  padding: 0.5rem;
-  font-size: 0.75rem;
-  color: hsl(var(--muted-foreground));
-  border-top: 1px solid hsl(var(--border));
-  margin-top: 0.5rem;
-}
-
-@media (max-width: 1400px) {
-  .memory-columns {
-    grid-template-columns: 260px 1fr 280px;
-    gap: 1rem;
-  }
-}
-
-@media (max-width: 1024px) {
-  .memory-columns {
-    grid-template-columns: 1fr;
-    gap: 1rem;
-    max-height: none;
-    overflow-y: auto;
-  }
-
-  .memory-column {
-    max-height: 500px;
-  }
-}
-
-/* ========================================
- * Hotspot List (Left Column)
- * ======================================== */
-.memory-hotspots {
-  display: flex;
-  flex-direction: column;
-  background: hsl(var(--card));
-  border: 1px solid hsl(var(--border));
-  border-radius: 0.75rem;
-  overflow: hidden;
-  max-height: 100%;
-}
-
-.hotspots-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0.875rem 1rem;
-  border-bottom: 1px solid hsl(var(--border));
-  background: hsl(var(--muted) / 0.3);
-}
-
-.hotspots-header h3 {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  font-size: 0.875rem;
-  font-weight: 600;
-  color: hsl(var(--foreground));
-  margin: 0;
-}
-
-.hotspots-header h3 i {
-  color: hsl(var(--muted-foreground));
-}
-
-.hotspot-list {
-  flex: 1;
-  overflow-y: auto;
-  padding: 0.5rem;
-  min-height: 0;
-}
-
-.hotspot-item {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0.75rem;
-  margin-bottom: 0.375rem;
-  background: hsl(var(--background));
-  border: 1px solid hsl(var(--border));
-  border-radius: 0.5rem;
-  cursor: pointer;
-  transition: all 0.15s ease;
-}
-
-.hotspot-item:last-child {
-  margin-bottom: 0;
-}
-
-.hotspot-item:hover {
-  background: hsl(var(--hover));
-  border-color: hsl(var(--primary) / 0.3);
-  box-shadow: 0 2px 8px hsl(var(--foreground) / 0.05);
-}
-
-.hotspot-item-left {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-  flex: 1;
-  min-width: 0;
-}
-
-.hotspot-name {
-  font-size: 0.8125rem;
-  font-weight: 600;
-  color: hsl(var(--foreground));
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.hotspot-path {
-  font-size: 0.6875rem;
-  font-family: var(--font-mono);
-  color: hsl(var(--muted-foreground));
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.hotspot-meta {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  font-size: 0.625rem;
-  color: hsl(var(--muted-foreground));
-  margin-top: 0.125rem;
-}
-
-.hotspot-meta i {
-  width: 12px;
-}
-
-/* Heat Badge */
-.heat-badge {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 3rem;
-  padding: 0.375rem 0.5rem;
-  border-radius: 0.375rem;
-  font-size: 0.75rem;
-  font-weight: 600;
-  flex-shrink: 0;
-  transition: transform 0.15s ease;
-}
-
-.hotspot-item:hover .heat-badge {
-  transform: scale(1.05);
-}
-
-.heat-high {
-  background: linear-gradient(135deg, hsl(0 84% 60% / 0.2), hsl(0 84% 60% / 0.12));
-  color: hsl(0 84% 45%);
-  border: 1px solid hsl(0 84% 60% / 0.3);
-}
-
-.heat-medium {
-  background: linear-gradient(135deg, hsl(38 92% 50% / 0.2), hsl(38 92% 50% / 0.12));
-  color: hsl(38 92% 35%);
-  border: 1px solid hsl(38 92% 50% / 0.3);
-}
-
-.heat-low {
-  background: linear-gradient(135deg, hsl(142 76% 36% / 0.2), hsl(142 76% 36% / 0.12));
-  color: hsl(142 76% 30%);
-  border: 1px solid hsl(142 76% 36% / 0.3);
-}
-
-/* ========================================
- * Memory Graph (Center Column - D3 SVG)
- * ======================================== */
-.memory-graph-container {
-  display: flex;
-  flex-direction: column;
-  background: hsl(var(--card));
-  border: 1px solid hsl(var(--border));
-  border-radius: 0.75rem;
-  overflow: hidden;
-  max-height: 100%;
-}
-
-.graph-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0.875rem 1rem;
-  border-bottom: 1px solid hsl(var(--border));
-  background: hsl(var(--muted) / 0.3);
-}
-
-.graph-header h3 {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  font-size: 0.875rem;
-  font-weight: 600;
-  color: hsl(var(--foreground));
-  margin: 0;
-}
-
-.graph-header h3 i {
-  color: hsl(var(--muted-foreground));
-}
-
-.graph-controls {
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
-}
-
-.memory-graph {
-  flex: 1;
-  position: relative;
-  background: hsl(var(--background));
-  min-height: 300px;
-  max-height: 100%;
-  overflow: hidden;
-}
-
-/* D3 Graph Elements */
-.graph-node {
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
-
-.graph-node:hover {
-  filter: brightness(1.1);
-}
-
-.graph-node-file circle {
-  fill: hsl(var(--primary));
-  stroke: hsl(var(--primary));
-  stroke-width: 2;
-}
-
-.graph-node-file.hot circle {
-  fill: hsl(0 84% 60%);
-  stroke: hsl(0 84% 60%);
-  animation: nodePulse 2s infinite;
-}
-
-.graph-node-file.warm circle {
-  fill: hsl(38 92% 50%);
-  stroke: hsl(38 92% 50%);
-}
-
-.graph-node-file.cool circle {
-  fill: hsl(142 76% 36%);
-  stroke: hsl(142 76% 36%);
-}
-
-.graph-node-module circle {
-  fill: hsl(var(--muted));
-  stroke: hsl(var(--muted-foreground));
-  stroke-width: 2;
-  stroke-dasharray: 4 2;
-}
-
-.graph-node text {
-  font-family: var(--font-sans);
-  font-size: 11px;
-  fill: hsl(var(--foreground));
-  pointer-events: none;
-  user-select: none;
-}
-
-.graph-link {
-  stroke: hsl(var(--border));
-  stroke-width: 1.5;
-  fill: none;
-  opacity: 0.6;
-  transition: all 0.2s ease;
-}
-
-.graph-link.strong {
-  stroke: hsl(var(--primary));
-  stroke-width: 2;
-  opacity: 0.8;
-}
-
-.graph-link:hover {
-  stroke: hsl(var(--primary));
-  opacity: 1;
-}
-
-/* Graph Tooltip */
-.graph-tooltip {
-  position: absolute;
-  padding: 0.5rem 0.75rem;
-  background: hsl(var(--card));
-  border: 1px solid hsl(var(--border));
-  border-radius: 0.375rem;
-  font-size: 0.75rem;
-  color: hsl(var(--foreground));
-  pointer-events: none;
-  opacity: 0;
-  transition: opacity 0.2s ease;
-  box-shadow: 0 4px 12px hsl(var(--foreground) / 0.15);
-  z-index: 100;
-  max-width: 200px;
-}
-
-.graph-tooltip.visible {
-  opacity: 1;
-}
-
-.tooltip-title {
-  font-weight: 600;
-  margin-bottom: 0.25rem;
-}
-
-.tooltip-meta {
-  display: flex;
-  flex-direction: column;
-  gap: 0.125rem;
-  font-size: 0.6875rem;
-  color: hsl(var(--muted-foreground));
-}
-
-/* Node Pulse Animation */
-@keyframes nodePulse {
-  0%, 100% {
-    opacity: 1;
-    transform: scale(1);
-  }
-  50% {
-    opacity: 0.7;
-    transform: scale(1.1);
-  }
-}
-
-/* Graph Zoom/Pan Styles */
-.memory-graph-svg {
-  cursor: grab;
-}
-
-.memory-graph-svg:active {
-  cursor: grabbing;
-}
-
-.graph-content {
-  transition: transform 0.1s ease-out;
-}
-
-/* Graph Node Groups */
-.graph-node-group {
-  cursor: pointer;
-}
-
-.graph-node-group:hover circle {
-  filter: brightness(1.2);
-}
-
-.graph-node-group.file circle {
-  fill: hsl(var(--primary));
-  stroke: hsl(var(--primary));
-  stroke-width: 2;
-}
-
-.graph-node-group.module circle {
-  fill: hsl(var(--muted));
-  stroke: hsl(var(--muted-foreground));
-  stroke-width: 2;
-  stroke-dasharray: 4 2;
-}
-
-.graph-node-group.component circle {
-  fill: hsl(142 76% 36%);
-  stroke: hsl(142 76% 36%);
-  stroke-width: 2;
-}
-
-/* Individual graph-node circles (for legacy support) */
-.graph-node.file {
-  fill: hsl(var(--primary));
-  stroke: hsl(var(--primary));
-  stroke-width: 2;
-}
-
-.graph-node.module {
-  fill: hsl(var(--muted));
-  stroke: hsl(var(--muted-foreground));
-  stroke-width: 2;
-  stroke-dasharray: 4 2;
-}
-
-.graph-node.component {
-  fill: hsl(142 76% 36%);
-  stroke: hsl(142 76% 36%);
-  stroke-width: 2;
-}
-
-/* Selected Node */
-.graph-node.selected {
-  stroke: hsl(var(--foreground));
-  stroke-width: 3;
-  filter: drop-shadow(0 0 8px hsl(var(--primary)));
-}
-
-/* Graph Labels */
-.graph-label {
-  font-family: var(--font-sans);
-  font-size: 11px;
-  fill: hsl(var(--foreground));
-  pointer-events: none;
-  user-select: none;
-  text-shadow:
-    1px 1px 2px hsl(var(--background)),
-    -1px -1px 2px hsl(var(--background)),
-    1px -1px 2px hsl(var(--background)),
-    -1px 1px 2px hsl(var(--background));
-}
-
-/* Graph Controls */
-.graph-controls {
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
-}
-
-.graph-controls .btn-icon {
-  padding: 0.375rem;
-  border-radius: 0.375rem;
-  background: transparent;
-  border: 1px solid transparent;
-  color: hsl(var(--muted-foreground));
-  cursor: pointer;
-  transition: all 0.15s ease;
-}
-
-.graph-controls .btn-icon:hover {
-  background: hsl(var(--muted));
-  border-color: hsl(var(--border));
-  color: hsl(var(--foreground));
-}
-
-/* ========================================
- * Context Timeline (Right Column)
- * ======================================== */
-.memory-context {
-  display: flex;
-  flex-direction: column;
-  background: hsl(var(--card));
-  border: 1px solid hsl(var(--border));
-  border-radius: 0.75rem;
-  overflow: hidden;
-  max-height: 100%;
-}
-
-.context-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0.875rem 1rem;
-  border-bottom: 1px solid hsl(var(--border));
-  background: hsl(var(--muted) / 0.3);
-}
-
-.context-header h3 {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  font-size: 0.875rem;
-  font-weight: 600;
-  color: hsl(var(--foreground));
-  margin: 0;
-}
-
-.context-header h3 i {
-  color: hsl(var(--muted-foreground));
-}
-
-.context-timeline {
-  flex: 1;
-  overflow-y: auto;
-  padding: 0.75rem;
-  min-height: 0;
-}
-
-/* Timeline item styles moved to Context Timeline Card Style section (line ~445) */
-
-.timeline-timestamp {
-  font-size: 0.6875rem;
-  color: hsl(var(--muted-foreground));
-  margin-bottom: 0.25rem;
-}
-
-.timeline-action {
-  font-size: 0.8125rem;
-  color: hsl(var(--foreground));
-  margin-bottom: 0.375rem;
-  line-height: 1.4;
-}
-
-.timeline-detail {
-  font-size: 0.75rem;
-  font-family: var(--font-mono);
-  color: hsl(var(--muted-foreground));
-  background: hsl(var(--muted) / 0.3);
-  padding: 0.375rem 0.5rem;
-  border-radius: 0.25rem;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-@keyframes timelinePulse {
-  0%, 100% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.5;
-  }
-}
-
-/* ========================================
- * Prompt History View
- * ======================================== */
-.prompt-history-view {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  padding: 1rem;
-}
-
-.prompt-list {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-}
-
-.prompt-item {
-  background: hsl(var(--card));
-  border: 1px solid hsl(var(--border));
-  border-radius: 0.5rem;
-  overflow: hidden;
-  transition: all 0.2s ease;
-}
-
-.prompt-item:hover {
-  border-color: hsl(var(--primary) / 0.3);
-  box-shadow: 0 2px 8px hsl(var(--foreground) / 0.05);
-}
-
-.prompt-item-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0.75rem 1rem;
-  background: hsl(var(--muted) / 0.2);
-  cursor: pointer;
-}
-
-.prompt-item-info {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-  flex: 1;
-}
-
-.prompt-item-time {
-  font-size: 0.75rem;
-  font-weight: 600;
-  color: hsl(var(--foreground));
-}
-
-.prompt-item-meta {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  font-size: 0.6875rem;
-  color: hsl(var(--muted-foreground));
-}
-
-.prompt-preview {
-  padding: 0.75rem 1rem;
-  font-size: 0.8125rem;
-  color: hsl(var(--foreground));
-  line-height: 1.5;
-  max-height: 4.5em;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: 3;
-  -webkit-box-orient: vertical;
-}
-
-.prompt-full {
-  display: none;
-  padding: 0.75rem 1rem;
-  font-size: 0.8125rem;
-  font-family: var(--font-mono);
-  color: hsl(var(--foreground));
-  background: hsl(var(--muted) / 0.3);
-  border-top: 1px solid hsl(var(--border));
-  max-height: 300px;
-  overflow-y: auto;
-  white-space: pre-wrap;
-  word-wrap: break-word;
-  line-height: 1.6;
-}
-
-.prompt-item-expanded .prompt-preview {
-  display: none;
-}
-
-.prompt-item-expanded .prompt-full {
-  display: block;
-}
-
-/* ========================================
- * Insights Panel
- * ======================================== */
-.insights-panel {
-  background: hsl(var(--card));
-  border: 1px solid hsl(var(--border));
-  border-radius: 0.75rem;
-  padding: 1rem;
-}
-
-.insights-header {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  margin-bottom: 1rem;
-  padding-bottom: 0.75rem;
-  border-bottom: 1px solid hsl(var(--border));
-}
-
-.insights-header h3 {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  font-size: 0.9375rem;
-  font-weight: 600;
-  color: hsl(var(--foreground));
-  margin: 0;
-}
-
-.insights-header h3 i {
-  color: hsl(var(--primary));
-}
-
-.insights-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-  gap: 0.75rem;
-}
-
-.pattern-card {
-  padding: 0.875rem;
-  background: hsl(var(--background));
-  border: 1px solid hsl(var(--border));
-  border-left: 3px solid hsl(var(--primary));
-  border-radius: 0.5rem;
-  transition: all 0.15s ease;
-}
-
-.pattern-card:hover {
-  background: hsl(var(--hover));
-  border-left-color: hsl(var(--primary));
-  box-shadow: 0 2px 8px hsl(var(--foreground) / 0.05);
-}
-
-.pattern-type {
-  font-size: 0.6875rem;
-  font-weight: 600;
-  color: hsl(var(--primary));
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-  margin-bottom: 0.5rem;
-}
-
-.pattern-suggestion {
-  font-size: 0.8125rem;
-  color: hsl(var(--foreground));
-  margin-bottom: 0.625rem;
-  line-height: 1.5;
-}
-
-.suggestion-example {
-  font-size: 0.75rem;
-  font-family: var(--font-mono);
-  color: hsl(var(--muted-foreground));
-  background: hsl(var(--muted) / 0.5);
-  padding: 0.5rem;
-  border-radius: 0.25rem;
-  overflow-x: auto;
-  white-space: pre;
-}
-
-/* ========================================
- * Stats Summary
- * ======================================== */
-.stats-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
-  gap: 0.75rem;
-  margin-bottom: 1.5rem;
-}
-
-.stat-card {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 1rem;
-  background: hsl(var(--card));
-  border: 1px solid hsl(var(--border));
-  border-radius: 0.5rem;
-  text-align: center;
-  transition: all 0.2s ease;
-}
-
-.stat-card:hover {
-  border-color: hsl(var(--primary) / 0.3);
-  box-shadow: 0 2px 8px hsl(var(--foreground) / 0.05);
-}
-
-.stat-value {
-  font-size: 1.875rem;
-  font-weight: 700;
-  color: hsl(var(--primary));
-  margin-bottom: 0.25rem;
-  line-height: 1;
-}
-
-.stat-label {
-  font-size: 0.75rem;
-  font-weight: 500;
-  color: hsl(var(--muted-foreground));
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-}
-
-.stat-trend {
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
-  font-size: 0.6875rem;
-  color: hsl(var(--muted-foreground));
-  margin-top: 0.375rem;
-}
-
-.stat-trend.up {
-  color: hsl(142 76% 36%);
-}
-
-.stat-trend.down {
-  color: hsl(0 84% 60%);
-}
-
-.stat-trend i {
-  font-size: 0.75rem;
-}
-
-/* ========================================
- * Animations
- * ======================================== */
-
-/* Fade in for new items */
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-    transform: translateY(8px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-.timeline-item,
-.hotspot-item,
-.pattern-card {
-  animation: fadeIn 0.3s ease;
-}
-
-/* ========================================
- * Empty States
- * ======================================== */
-.memory-empty-state {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 3rem 2rem;
-  text-align: center;
-  color: hsl(var(--muted-foreground));
-}
-
-.memory-empty-state i {
-  font-size: 3rem;
-  opacity: 0.3;
-  margin-bottom: 1rem;
-}
-
-.memory-empty-state h3 {
-  font-size: 1rem;
-  font-weight: 600;
-  color: hsl(var(--foreground));
-  margin-bottom: 0.5rem;
-}
-
-.memory-empty-state p {
-  font-size: 0.875rem;
-  max-width: 300px;
-}
-
-/* ========================================
- * Insights History Cards
- * ======================================== */
-.memory-insights-section {
-  margin-top: 1.5rem;
-}
-
-.insights-section {
-  background: hsl(var(--card));
-  border: 1px solid hsl(var(--border));
-  border-radius: 0.75rem;
-  overflow: hidden;
-}
-
-.insights-section-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0.875rem 1rem;
-  border-bottom: 1px solid hsl(var(--border));
-  background: hsl(var(--muted) / 0.3);
-}
-
-.insights-section-header h3 {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  font-size: 0.875rem;
-  font-weight: 600;
-  color: hsl(var(--foreground));
-  margin: 0;
-}
-
-.insights-section-header h3 i {
-  color: hsl(var(--primary));
-}
-
-.insights-section-header .section-count {
-  font-size: 0.6875rem;
-  font-weight: 500;
-  color: hsl(var(--muted-foreground));
-  background: hsl(var(--muted));
-  padding: 0.125rem 0.5rem;
-  border-radius: 0.75rem;
-  margin-left: 0.5rem;
-}
-
-.insights-section-actions {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-/* Insights Cards Container */
-.insights-cards-container {
-  padding: 1rem;
-}
-
-.insights-cards {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-  gap: 0.75rem;
-}
-
-/* Individual Insight Card */
-.insight-card {
-  display: flex;
-  flex-direction: column;
-  padding: 0.875rem;
-  background: hsl(var(--background));
-  border: 1px solid hsl(var(--border));
-  border-radius: 0.5rem;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  border-left: 3px solid hsl(var(--border));
-}
-
-.insight-card:hover {
-  background: hsl(var(--hover));
-  border-color: hsl(var(--primary) / 0.3);
-  box-shadow: 0 2px 8px hsl(var(--foreground) / 0.08);
-  transform: translateY(-1px);
-}
-
-/* Severity-based colors */
-.insight-card.high {
-  border-left-color: hsl(0 84% 60%);
-}
-
-.insight-card.high:hover {
-  border-left-color: hsl(0 84% 50%);
-}
-
-.insight-card.medium {
-  border-left-color: hsl(38 92% 50%);
-}
-
-.insight-card.medium:hover {
-  border-left-color: hsl(38 92% 45%);
-}
-
-.insight-card.low {
-  border-left-color: hsl(142 76% 36%);
-}
-
-.insight-card.low:hover {
-  border-left-color: hsl(142 76% 30%);
-}
-
-/* Insight Card Header */
-.insight-card-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 0.625rem;
-}
-
-.insight-card-tool {
-  display: flex;
-  align-items: center;
-  gap: 0.375rem;
-  font-size: 0.75rem;
-  font-weight: 600;
-  color: hsl(var(--foreground));
-}
-
-.insight-card-tool i {
-  color: hsl(var(--primary));
-  font-size: 0.875rem;
-}
-
-.insight-card-time {
-  font-size: 0.6875rem;
-  color: hsl(var(--muted-foreground));
-}
-
-/* Insight Card Stats */
-.insight-card-stats {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  margin-bottom: 0.625rem;
-  padding-bottom: 0.5rem;
-  border-bottom: 1px solid hsl(var(--border));
-}
-
-.insight-stat {
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
-  font-size: 0.6875rem;
-  color: hsl(var(--muted-foreground));
-}
-
-.insight-stat i {
-  font-size: 0.75rem;
-}
-
-.insight-stat span {
-  font-weight: 500;
-}
-
-/* Insight Card Preview */
-.insight-card-preview {
-  font-size: 0.8125rem;
-  color: hsl(var(--foreground));
-  line-height: 1.5;
-  overflow: hidden;
-  display: -webkit-box;
-  -webkit-line-clamp: 3;
-  -webkit-box-orient: vertical;
-}
-
-.insight-card-preview .preview-item {
-  display: flex;
-  align-items: flex-start;
-  gap: 0.375rem;
-  margin-bottom: 0.25rem;
-}
-
-.insight-card-preview .preview-item i {
-  color: hsl(var(--primary));
-  font-size: 0.6875rem;
-  margin-top: 0.25rem;
-  flex-shrink: 0;
-}
-
-.insight-card-preview .preview-text {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-/* Insight Detail Panel */
-.insight-detail-panel {
-  position: fixed;
-  top: 0;
-  right: 0;
-  width: 50vw;
-  min-width: 600px;
-  max-width: 100vw;
-  height: 100vh;
-  background: hsl(var(--card));
-  border-left: 1px solid hsl(var(--border));
-  box-shadow: -4px 0 24px hsl(var(--foreground) / 0.1);
-  z-index: 1000;
-  display: flex;
-  flex-direction: column;
-  animation: slideInRight 0.3s ease;
-}
-
-@keyframes slideInRight {
-  from {
-    transform: translateX(100%);
-    opacity: 0;
-  }
-  to {
-    transform: translateX(0);
-    opacity: 1;
-  }
-}
-
-.insight-detail {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}
-
-.insight-detail-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 1rem 1.25rem;
-  border-bottom: 1px solid hsl(var(--border));
-}
-
-.insight-detail-header h3 {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  font-size: 1rem;
-  font-weight: 600;
-  color: hsl(var(--foreground));
-  margin: 0;
-}
-
-.insight-detail-header h3 i {
-  color: hsl(var(--primary));
-}
-
-.insight-detail-close {
-  padding: 0.5rem;
-  background: transparent;
-  border: none;
-  color: hsl(var(--muted-foreground));
-  cursor: pointer;
-  border-radius: 0.375rem;
-  transition: all 0.15s ease;
-}
-
-.insight-detail-close:hover {
-  background: hsl(var(--muted));
-  color: hsl(var(--foreground));
-}
-
-.insight-detail-meta {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.75rem;
-  padding: 1rem 1.25rem;
-  border-bottom: 1px solid hsl(var(--border));
-  background: hsl(var(--background));
-}
-
-.meta-item {
-  display: flex;
-  align-items: center;
-  gap: 0.375rem;
-  font-size: 0.75rem;
-  color: hsl(var(--muted-foreground));
-}
-
-.meta-item i {
-  color: hsl(var(--primary));
-  font-size: 0.875rem;
-}
-
-.meta-item span {
-  font-weight: 500;
-  color: hsl(var(--foreground));
-}
-
-.insight-detail-content {
-  flex: 1;
-  overflow-y: auto;
-  padding: 1.25rem;
-}
-
-.insight-detail-section {
-  margin-bottom: 1.5rem;
-}
-
-.insight-detail-section:last-child {
-  margin-bottom: 0;
-}
-
-.insight-detail-section h4 {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  font-size: 0.875rem;
-  font-weight: 600;
-  color: hsl(var(--foreground));
-  margin: 0 0 0.75rem 0;
-  padding-bottom: 0.5rem;
-  border-bottom: 1px solid hsl(var(--border));
-}
-
-.insight-detail-section h4 i {
-  color: hsl(var(--primary));
-}
-
-/* Pattern and Suggestion Items */
-.pattern-item,
-.suggestion-item {
-  display: flex;
-  align-items: flex-start;
-  gap: 0.75rem;
-  padding: 0.75rem;
-  background: hsl(var(--background));
-  border: 1px solid hsl(var(--border));
-  border-radius: 0.5rem;
-  margin-bottom: 0.5rem;
-  transition: all 0.15s ease;
-}
-
-.pattern-item:hover,
-.suggestion-item:hover {
-  background: hsl(var(--hover));
-  border-color: hsl(var(--primary) / 0.3);
-}
-
-.pattern-item:last-child,
-.suggestion-item:last-child {
-  margin-bottom: 0;
-}
-
-.item-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 2rem;
-  height: 2rem;
-  border-radius: 0.375rem;
-  flex-shrink: 0;
-}
-
-.pattern-item .item-icon {
-  background: hsl(var(--primary) / 0.1);
-  color: hsl(var(--primary));
-}
-
-.suggestion-item .item-icon {
-  background: hsl(142 76% 36% / 0.1);
-  color: hsl(142 76% 36%);
-}
-
-.item-content {
-  flex: 1;
-  min-width: 0;
-}
-
-.item-title {
-  font-size: 0.8125rem;
-  font-weight: 500;
-  color: hsl(var(--foreground));
-  margin-bottom: 0.25rem;
-}
-
-.item-description {
-  font-size: 0.75rem;
-  color: hsl(var(--muted-foreground));
-  line-height: 1.5;
-}
-
-.item-example {
-  margin-top: 0.5rem;
-  padding: 0.5rem;
-  background: hsl(var(--muted) / 0.5);
-  border-radius: 0.25rem;
-  font-family: var(--font-mono);
-  font-size: 0.6875rem;
-  color: hsl(var(--foreground));
-  overflow-x: auto;
-  white-space: pre-wrap;
-  word-wrap: break-word;
-}
-
-/* Detail Actions */
-.insight-detail-actions {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 0.5rem;
-  padding: 1rem 1.25rem;
-  border-top: 1px solid hsl(var(--border));
-  background: hsl(var(--muted) / 0.2);
-}
-
-.insight-detail-actions button {
-  display: flex;
-  align-items: center;
-  gap: 0.375rem;
-  padding: 0.5rem 1rem;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  border-radius: 0.375rem;
-  cursor: pointer;
-  transition: all 0.15s ease;
-}
-
-.btn-delete-insight {
-  background: hsl(0 84% 60% / 0.1);
-  border: 1px solid hsl(0 84% 60% / 0.3);
-  color: hsl(0 84% 60%);
-}
-
-.btn-delete-insight:hover {
-  background: hsl(0 84% 60% / 0.2);
-  border-color: hsl(0 84% 60%);
-}
-
-.btn-close-insight {
-  background: hsl(var(--muted));
-  border: 1px solid hsl(var(--border));
-  color: hsl(var(--foreground));
-}
-
-.btn-close-insight:hover {
-  background: hsl(var(--hover));
-  border-color: hsl(var(--primary) / 0.3);
-}
-
-/* Empty Insights State */
-.insights-empty {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 2rem;
-  text-align: center;
-  color: hsl(var(--muted-foreground));
-}
-
-.insights-empty i {
-  font-size: 2.5rem;
-  opacity: 0.3;
-  margin-bottom: 0.75rem;
-}
-
-.insights-empty p {
-  font-size: 0.875rem;
-  margin: 0;
-}
-
-/* ========================================
- * Responsive Adjustments
- * ======================================== */
-@media (max-width: 768px) {
-  .memory-view {
-    grid-template-columns: 1fr;
-  }
-
-  .stats-grid {
-    grid-template-columns: repeat(2, 1fr);
-  }
-
-  .insights-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .insights-cards {
-    grid-template-columns: 1fr;
-  }
-
-  .insight-detail-panel {
-    width: 100%;
-  }
-}