This is page 56 of 62. Use http://codebase.md/doobidoo/mcp-memory-service?lines=true&page={x} to view the full context.
# Directory Structure
```
├── .claude
│ ├── agents
│ │ ├── amp-bridge.md
│ │ ├── amp-pr-automator.md
│ │ ├── code-quality-guard.md
│ │ ├── gemini-pr-automator.md
│ │ └── github-release-manager.md
│ ├── commands
│ │ ├── README.md
│ │ ├── refactor-function
│ │ ├── refactor-function-prod
│ │ └── refactor-function.md
│ ├── consolidation-fix-handoff.md
│ ├── consolidation-hang-fix-summary.md
│ ├── directives
│ │ ├── agents.md
│ │ ├── code-quality-workflow.md
│ │ ├── consolidation-details.md
│ │ ├── development-setup.md
│ │ ├── hooks-configuration.md
│ │ ├── memory-first.md
│ │ ├── memory-tagging.md
│ │ ├── pr-workflow.md
│ │ ├── quality-system-details.md
│ │ ├── README.md
│ │ ├── refactoring-checklist.md
│ │ ├── storage-backends.md
│ │ └── version-management.md
│ ├── prompts
│ │ └── hybrid-cleanup-integration.md
│ ├── settings.local.json.backup
│ └── settings.local.json.local
├── .commit-message
├── .coveragerc
├── .dockerignore
├── .env.example
├── .env.sqlite.backup
├── .envnn#
├── .gitattributes
├── .github
│ ├── FUNDING.yml
│ ├── ISSUE_TEMPLATE
│ │ ├── bug_report.yml
│ │ ├── config.yml
│ │ ├── feature_request.yml
│ │ └── performance_issue.yml
│ ├── pull_request_template.md
│ └── workflows
│ ├── bridge-tests.yml
│ ├── CACHE_FIX.md
│ ├── claude-branch-automation.yml
│ ├── claude-code-review.yml
│ ├── claude.yml
│ ├── cleanup-images.yml.disabled
│ ├── dev-setup-validation.yml
│ ├── docker-publish.yml
│ ├── dockerfile-lint.yml
│ ├── LATEST_FIXES.md
│ ├── main-optimized.yml.disabled
│ ├── main.yml
│ ├── publish-and-test.yml
│ ├── publish-dual.yml
│ ├── README_OPTIMIZATION.md
│ ├── release-tag.yml.disabled
│ ├── release.yml
│ ├── roadmap-review-reminder.yml
│ ├── SECRET_CONDITIONAL_FIX.md
│ └── WORKFLOW_FIXES.md
├── .gitignore
├── .mcp.json.backup
├── .mcp.json.template
├── .metrics
│ ├── baseline_cc_install_hooks.txt
│ ├── baseline_mi_install_hooks.txt
│ ├── baseline_nesting_install_hooks.txt
│ ├── BASELINE_REPORT.md
│ ├── COMPLEXITY_COMPARISON.txt
│ ├── QUICK_REFERENCE.txt
│ ├── README.md
│ ├── REFACTORED_BASELINE.md
│ ├── REFACTORING_COMPLETION_REPORT.md
│ └── TRACKING_TABLE.md
├── .pyscn
│ ├── .gitignore
│ └── reports
│ └── analyze_20251123_214224.html
├── AGENTS.md
├── ai-optimized-tool-descriptions.py
├── archive
│ ├── deployment
│ │ ├── deploy_fastmcp_fixed.sh
│ │ ├── deploy_http_with_mcp.sh
│ │ └── deploy_mcp_v4.sh
│ ├── deployment-configs
│ │ ├── empty_config.yml
│ │ └── smithery.yaml
│ ├── development
│ │ └── test_fastmcp.py
│ ├── docs-removed-2025-08-23
│ │ ├── authentication.md
│ │ ├── claude_integration.md
│ │ ├── claude-code-compatibility.md
│ │ ├── claude-code-integration.md
│ │ ├── claude-code-quickstart.md
│ │ ├── claude-desktop-setup.md
│ │ ├── complete-setup-guide.md
│ │ ├── database-synchronization.md
│ │ ├── development
│ │ │ ├── autonomous-memory-consolidation.md
│ │ │ ├── CLEANUP_PLAN.md
│ │ │ ├── CLEANUP_README.md
│ │ │ ├── CLEANUP_SUMMARY.md
│ │ │ ├── dream-inspired-memory-consolidation.md
│ │ │ ├── hybrid-slm-memory-consolidation.md
│ │ │ ├── mcp-milestone.md
│ │ │ ├── multi-client-architecture.md
│ │ │ ├── test-results.md
│ │ │ └── TIMESTAMP_FIX_SUMMARY.md
│ │ ├── distributed-sync.md
│ │ ├── invocation_guide.md
│ │ ├── macos-intel.md
│ │ ├── master-guide.md
│ │ ├── mcp-client-configuration.md
│ │ ├── multi-client-server.md
│ │ ├── service-installation.md
│ │ ├── sessions
│ │ │ └── MCP_ENHANCEMENT_SESSION_MEMORY_v4.1.0.md
│ │ ├── UBUNTU_SETUP.md
│ │ ├── ubuntu.md
│ │ ├── windows-setup.md
│ │ └── windows.md
│ ├── docs-root-cleanup-2025-08-23
│ │ ├── AWESOME_LIST_SUBMISSION.md
│ │ ├── CLOUDFLARE_IMPLEMENTATION.md
│ │ ├── DOCUMENTATION_ANALYSIS.md
│ │ ├── DOCUMENTATION_CLEANUP_PLAN.md
│ │ ├── DOCUMENTATION_CONSOLIDATION_COMPLETE.md
│ │ ├── LITESTREAM_SETUP_GUIDE.md
│ │ ├── lm_studio_system_prompt.md
│ │ ├── PYTORCH_DOWNLOAD_FIX.md
│ │ └── README-ORIGINAL-BACKUP.md
│ ├── investigations
│ │ └── MACOS_HOOKS_INVESTIGATION.md
│ ├── litestream-configs-v6.3.0
│ │ ├── install_service.sh
│ │ ├── litestream_master_config_fixed.yml
│ │ ├── litestream_master_config.yml
│ │ ├── litestream_replica_config_fixed.yml
│ │ ├── litestream_replica_config.yml
│ │ ├── litestream_replica_simple.yml
│ │ ├── litestream-http.service
│ │ ├── litestream.service
│ │ └── requirements-cloudflare.txt
│ ├── release-notes
│ │ └── release-notes-v7.1.4.md
│ └── setup-development
│ ├── README.md
│ ├── setup_consolidation_mdns.sh
│ ├── STARTUP_SETUP_GUIDE.md
│ └── test_service.sh
├── CHANGELOG-HISTORIC.md
├── CHANGELOG.md
├── claude_commands
│ ├── memory-context.md
│ ├── memory-health.md
│ ├── memory-ingest-dir.md
│ ├── memory-ingest.md
│ ├── memory-recall.md
│ ├── memory-search.md
│ ├── memory-store.md
│ ├── README.md
│ └── session-start.md
├── claude-hooks
│ ├── config.json
│ ├── config.template.json
│ ├── CONFIGURATION.md
│ ├── core
│ │ ├── auto-capture-hook.js
│ │ ├── auto-capture-hook.ps1
│ │ ├── memory-retrieval.js
│ │ ├── mid-conversation.js
│ │ ├── permission-request.js
│ │ ├── session-end.js
│ │ ├── session-start.js
│ │ └── topic-change.js
│ ├── debug-pattern-test.js
│ ├── install_claude_hooks_windows.ps1
│ ├── install_hooks.py
│ ├── memory-mode-controller.js
│ ├── MIGRATION.md
│ ├── README-AUTO-CAPTURE.md
│ ├── README-NATURAL-TRIGGERS.md
│ ├── README-PERMISSION-REQUEST.md
│ ├── README-phase2.md
│ ├── README.md
│ ├── simple-test.js
│ ├── statusline.sh
│ ├── test-adaptive-weights.js
│ ├── test-dual-protocol-hook.js
│ ├── test-mcp-hook.js
│ ├── test-natural-triggers.js
│ ├── test-recency-scoring.js
│ ├── tests
│ │ ├── integration-test.js
│ │ ├── phase2-integration-test.js
│ │ ├── test-code-execution.js
│ │ ├── test-cross-session.json
│ │ ├── test-permission-request.js
│ │ ├── test-session-tracking.json
│ │ └── test-threading.json
│ ├── utilities
│ │ ├── adaptive-pattern-detector.js
│ │ ├── auto-capture-patterns.js
│ │ ├── context-formatter.js
│ │ ├── context-shift-detector.js
│ │ ├── conversation-analyzer.js
│ │ ├── dynamic-context-updater.js
│ │ ├── git-analyzer.js
│ │ ├── mcp-client.js
│ │ ├── memory-client.js
│ │ ├── memory-scorer.js
│ │ ├── performance-manager.js
│ │ ├── project-detector.js
│ │ ├── session-cache.json
│ │ ├── session-tracker.js
│ │ ├── tiered-conversation-monitor.js
│ │ ├── user-override-detector.js
│ │ └── version-checker.js
│ └── WINDOWS-SESSIONSTART-BUG.md
├── CLAUDE.md
├── CODE_OF_CONDUCT.md
├── COMMIT_MESSAGE.md
├── CONTRIBUTING.md
├── Development-Sprint-November-2025.md
├── docs
│ ├── amp-cli-bridge.md
│ ├── api
│ │ ├── code-execution-interface.md
│ │ ├── memory-metadata-api.md
│ │ ├── PHASE1_IMPLEMENTATION_SUMMARY.md
│ │ ├── PHASE2_IMPLEMENTATION_SUMMARY.md
│ │ ├── PHASE2_REPORT.md
│ │ └── tag-standardization.md
│ ├── architecture
│ │ ├── graph-database-design.md
│ │ ├── search-enhancement-spec.md
│ │ └── search-examples.md
│ ├── architecture.md
│ ├── archive
│ │ └── obsolete-workflows
│ │ ├── load_memory_context.md
│ │ └── README.md
│ ├── assets
│ │ └── images
│ │ ├── dashboard-v3.3.0-preview.png
│ │ ├── memory-awareness-hooks-example.png
│ │ ├── project-infographic.svg
│ │ └── README.md
│ ├── CLAUDE_CODE_QUICK_REFERENCE.md
│ ├── cloudflare-setup.md
│ ├── demo-recording-script.md
│ ├── deployment
│ │ ├── docker.md
│ │ ├── dual-service.md
│ │ ├── production-guide.md
│ │ └── systemd-service.md
│ ├── development
│ │ ├── ai-agent-instructions.md
│ │ ├── code-quality
│ │ │ ├── phase-2a-completion.md
│ │ │ ├── phase-2a-handle-get-prompt.md
│ │ │ ├── phase-2a-index.md
│ │ │ ├── phase-2a-install-package.md
│ │ │ └── phase-2b-session-summary.md
│ │ ├── code-quality-workflow.md
│ │ ├── dashboard-workflow.md
│ │ ├── issue-management.md
│ │ ├── pr-280-post-mortem.md
│ │ ├── pr-review-guide.md
│ │ ├── refactoring-notes.md
│ │ ├── release-checklist.md
│ │ └── todo-tracker.md
│ ├── docker-optimized-build.md
│ ├── document-ingestion.md
│ ├── DOCUMENTATION_AUDIT.md
│ ├── enhancement-roadmap-issue-14.md
│ ├── examples
│ │ ├── analysis-scripts.js
│ │ ├── maintenance-session-example.md
│ │ ├── memory-distribution-chart.jsx
│ │ ├── quality-system-configs.md
│ │ └── tag-schema.json
│ ├── features
│ │ └── association-quality-boost.md
│ ├── first-time-setup.md
│ ├── glama-deployment.md
│ ├── guides
│ │ ├── advanced-command-examples.md
│ │ ├── chromadb-migration.md
│ │ ├── commands-vs-mcp-server.md
│ │ ├── mcp-enhancements.md
│ │ ├── mdns-service-discovery.md
│ │ ├── memory-consolidation-guide.md
│ │ ├── memory-quality-guide.md
│ │ ├── migration.md
│ │ ├── scripts.md
│ │ └── STORAGE_BACKENDS.md
│ ├── HOOK_IMPROVEMENTS.md
│ ├── hooks
│ │ └── phase2-code-execution-migration.md
│ ├── http-server-management.md
│ ├── ide-compatability.md
│ ├── IMAGE_RETENTION_POLICY.md
│ ├── images
│ │ ├── dashboard-placeholder.md
│ │ └── update-restart-demo.png
│ ├── implementation
│ │ ├── health_checks.md
│ │ └── performance.md
│ ├── IMPLEMENTATION_PLAN_HTTP_SSE.md
│ ├── integration
│ │ ├── homebrew.md
│ │ └── multi-client.md
│ ├── integrations
│ │ ├── gemini.md
│ │ ├── groq-bridge.md
│ │ ├── groq-integration-summary.md
│ │ └── groq-model-comparison.md
│ ├── integrations.md
│ ├── legacy
│ │ └── dual-protocol-hooks.md
│ ├── LIGHTWEIGHT_ONNX_SETUP.md
│ ├── LM_STUDIO_COMPATIBILITY.md
│ ├── maintenance
│ │ └── memory-maintenance.md
│ ├── mastery
│ │ ├── api-reference.md
│ │ ├── architecture-overview.md
│ │ ├── configuration-guide.md
│ │ ├── local-setup-and-run.md
│ │ ├── testing-guide.md
│ │ └── troubleshooting.md
│ ├── migration
│ │ ├── code-execution-api-quick-start.md
│ │ └── graph-migration-guide.md
│ ├── natural-memory-triggers
│ │ ├── cli-reference.md
│ │ ├── installation-guide.md
│ │ └── performance-optimization.md
│ ├── oauth-setup.md
│ ├── pr-graphql-integration.md
│ ├── quality-system-ui-implementation.md
│ ├── quick-setup-cloudflare-dual-environment.md
│ ├── README.md
│ ├── refactoring
│ │ └── phase-3-3-analysis.md
│ ├── releases
│ │ └── v8.72.0-testing.md
│ ├── remote-configuration-wiki-section.md
│ ├── research
│ │ ├── code-execution-interface-implementation.md
│ │ └── code-execution-interface-summary.md
│ ├── ROADMAP.md
│ ├── sqlite-vec-backend.md
│ ├── statistics
│ │ ├── charts
│ │ │ ├── activity_patterns.png
│ │ │ ├── contributors.png
│ │ │ ├── growth_trajectory.png
│ │ │ ├── monthly_activity.png
│ │ │ └── october_sprint.png
│ │ ├── data
│ │ │ ├── activity_by_day.csv
│ │ │ ├── activity_by_hour.csv
│ │ │ ├── contributors.csv
│ │ │ └── monthly_activity.csv
│ │ ├── generate_charts.py
│ │ └── REPOSITORY_STATISTICS.md
│ ├── technical
│ │ ├── development.md
│ │ ├── memory-migration.md
│ │ ├── migration-log.md
│ │ ├── sqlite-vec-embedding-fixes.md
│ │ └── tag-storage.md
│ ├── testing
│ │ └── regression-tests.md
│ ├── testing-cloudflare-backend.md
│ ├── troubleshooting
│ │ ├── cloudflare-api-token-setup.md
│ │ ├── cloudflare-authentication.md
│ │ ├── database-transfer-migration.md
│ │ ├── general.md
│ │ ├── hooks-quick-reference.md
│ │ ├── memory-management.md
│ │ ├── pr162-schema-caching-issue.md
│ │ ├── session-end-hooks.md
│ │ └── sync-issues.md
│ ├── tutorials
│ │ ├── advanced-techniques.md
│ │ ├── data-analysis.md
│ │ └── demo-session-walkthrough.md
│ ├── wiki-documentation-plan.md
│ └── wiki-Graph-Database-Architecture.md
├── examples
│ ├── claude_desktop_config_template.json
│ ├── claude_desktop_config_windows.json
│ ├── claude-desktop-http-config.json
│ ├── config
│ │ └── claude_desktop_config.json
│ ├── http-mcp-bridge.js
│ ├── memory_export_template.json
│ ├── README.md
│ ├── setup
│ │ └── setup_multi_client_complete.py
│ └── start_https_example.sh
├── IMPLEMENTATION_SUMMARY.md
├── install_service.py
├── install.py
├── LICENSE
├── NOTICE
├── PR_DESCRIPTION.md
├── pyproject-lite.toml
├── pyproject.toml
├── pytest.ini
├── README.md
├── release-notes-v8.61.0.md
├── run_server.py
├── scripts
│ ├── .claude
│ │ └── settings.local.json
│ ├── archive
│ │ └── check_missing_timestamps.py
│ ├── backup
│ │ ├── backup_memories.py
│ │ ├── backup_sqlite_vec.sh
│ │ ├── export_distributable_memories.sh
│ │ └── restore_memories.py
│ ├── benchmarks
│ │ ├── benchmark_code_execution_api.py
│ │ ├── benchmark_hybrid_sync.py
│ │ └── benchmark_server_caching.py
│ ├── ci
│ │ ├── check_dockerfile_args.sh
│ │ └── validate_imports.sh
│ ├── database
│ │ ├── analyze_sqlite_vec_db.py
│ │ ├── check_sqlite_vec_status.py
│ │ ├── db_health_check.py
│ │ └── simple_timestamp_check.py
│ ├── development
│ │ ├── debug_server_initialization.py
│ │ ├── find_orphaned_files.py
│ │ ├── fix_mdns.sh
│ │ ├── fix_sitecustomize.py
│ │ ├── remote_ingest.sh
│ │ ├── setup-git-merge-drivers.sh
│ │ ├── uv-lock-merge.sh
│ │ └── verify_hybrid_sync.py
│ ├── hooks
│ │ └── pre-commit
│ ├── installation
│ │ ├── install_linux_service.py
│ │ ├── install_macos_service.py
│ │ ├── install_uv.py
│ │ ├── install_windows_service.py
│ │ ├── install.py
│ │ ├── setup_backup_cron.sh
│ │ ├── setup_claude_mcp.sh
│ │ └── setup_cloudflare_resources.py
│ ├── linux
│ │ ├── service_status.sh
│ │ ├── start_service.sh
│ │ ├── stop_service.sh
│ │ ├── uninstall_service.sh
│ │ └── view_logs.sh
│ ├── maintenance
│ │ ├── add_project_tags.py
│ │ ├── apply_quality_boost_retroactively.py
│ │ ├── assign_memory_types.py
│ │ ├── auto_retag_memory_merge.py
│ │ ├── auto_retag_memory.py
│ │ ├── backfill_graph_table.py
│ │ ├── check_memory_types.py
│ │ ├── cleanup_association_memories_hybrid.py
│ │ ├── cleanup_association_memories.py
│ │ ├── cleanup_corrupted_encoding.py
│ │ ├── cleanup_low_quality.py
│ │ ├── cleanup_memories.py
│ │ ├── cleanup_organize.py
│ │ ├── consolidate_memory_types.py
│ │ ├── consolidation_mappings.json
│ │ ├── delete_orphaned_vectors_fixed.py
│ │ ├── delete_test_memories.py
│ │ ├── fast_cleanup_duplicates_with_tracking.sh
│ │ ├── find_all_duplicates.py
│ │ ├── find_cloudflare_duplicates.py
│ │ ├── find_duplicates.py
│ │ ├── memory-types.md
│ │ ├── README.md
│ │ ├── recover_timestamps_from_cloudflare.py
│ │ ├── regenerate_embeddings.py
│ │ ├── repair_malformed_tags.py
│ │ ├── repair_memories.py
│ │ ├── repair_sqlite_vec_embeddings.py
│ │ ├── repair_zero_embeddings.py
│ │ ├── restore_from_json_export.py
│ │ ├── retag_valuable_memories.py
│ │ ├── scan_todos.sh
│ │ ├── soft_delete_test_memories.py
│ │ └── sync_status.py
│ ├── migration
│ │ ├── cleanup_mcp_timestamps.py
│ │ ├── legacy
│ │ │ └── migrate_chroma_to_sqlite.py
│ │ ├── mcp-migration.py
│ │ ├── migrate_sqlite_vec_embeddings.py
│ │ ├── migrate_storage.py
│ │ ├── migrate_tags.py
│ │ ├── migrate_timestamps.py
│ │ ├── migrate_to_cloudflare.py
│ │ ├── migrate_to_sqlite_vec.py
│ │ ├── migrate_v5_enhanced.py
│ │ ├── TIMESTAMP_CLEANUP_README.md
│ │ └── verify_mcp_timestamps.py
│ ├── pr
│ │ ├── amp_collect_results.sh
│ │ ├── amp_detect_breaking_changes.sh
│ │ ├── amp_generate_tests.sh
│ │ ├── amp_pr_review.sh
│ │ ├── amp_quality_gate.sh
│ │ ├── amp_suggest_fixes.sh
│ │ ├── auto_review.sh
│ │ ├── detect_breaking_changes.sh
│ │ ├── generate_tests.sh
│ │ ├── lib
│ │ │ └── graphql_helpers.sh
│ │ ├── pre_pr_check.sh
│ │ ├── quality_gate.sh
│ │ ├── resolve_threads.sh
│ │ ├── run_pyscn_analysis.sh
│ │ ├── run_quality_checks_on_files.sh
│ │ ├── run_quality_checks.sh
│ │ ├── thread_status.sh
│ │ └── watch_reviews.sh
│ ├── quality
│ │ ├── bulk_evaluate_onnx.py
│ │ ├── check_test_scores.py
│ │ ├── debug_deberta_scoring.py
│ │ ├── export_deberta_onnx.py
│ │ ├── fix_dead_code_install.sh
│ │ ├── migrate_to_deberta.py
│ │ ├── phase1_dead_code_analysis.md
│ │ ├── phase2_complexity_analysis.md
│ │ ├── README_PHASE1.md
│ │ ├── README_PHASE2.md
│ │ ├── rescore_deberta.py
│ │ ├── rescore_fallback.py
│ │ ├── reset_onnx_scores.py
│ │ ├── track_pyscn_metrics.sh
│ │ └── weekly_quality_review.sh
│ ├── README.md
│ ├── run
│ │ ├── memory_wrapper_cleanup.ps1
│ │ ├── memory_wrapper_cleanup.py
│ │ ├── memory_wrapper_cleanup.sh
│ │ ├── README_CLEANUP_WRAPPER.md
│ │ ├── run_mcp_memory.sh
│ │ ├── run-with-uv.sh
│ │ └── start_sqlite_vec.sh
│ ├── run_memory_server.py
│ ├── server
│ │ ├── check_http_server.py
│ │ ├── check_server_health.py
│ │ ├── memory_offline.py
│ │ ├── preload_models.py
│ │ ├── run_http_server.py
│ │ ├── run_memory_server.py
│ │ ├── start_http_server.bat
│ │ └── start_http_server.sh
│ ├── service
│ │ ├── deploy_dual_services.sh
│ │ ├── http_server_manager.sh
│ │ ├── install_http_service.sh
│ │ ├── mcp-memory-http.service
│ │ ├── mcp-memory.service
│ │ ├── memory_service_manager.sh
│ │ ├── service_control.sh
│ │ ├── service_utils.py
│ │ ├── update_service.sh
│ │ └── windows
│ │ ├── add_watchdog_trigger.ps1
│ │ ├── install_scheduled_task.ps1
│ │ ├── manage_service.ps1
│ │ ├── run_http_server_background.ps1
│ │ ├── uninstall_scheduled_task.ps1
│ │ └── update_and_restart.ps1
│ ├── setup-lightweight.sh
│ ├── sync
│ │ ├── check_drift.py
│ │ ├── claude_sync_commands.py
│ │ ├── export_memories.py
│ │ ├── import_memories.py
│ │ ├── litestream
│ │ │ ├── apply_local_changes.sh
│ │ │ ├── enhanced_memory_store.sh
│ │ │ ├── init_staging_db.sh
│ │ │ ├── io.litestream.replication.plist
│ │ │ ├── manual_sync.sh
│ │ │ ├── memory_sync.sh
│ │ │ ├── pull_remote_changes.sh
│ │ │ ├── push_to_remote.sh
│ │ │ ├── README.md
│ │ │ ├── resolve_conflicts.sh
│ │ │ ├── setup_local_litestream.sh
│ │ │ ├── setup_remote_litestream.sh
│ │ │ ├── staging_db_init.sql
│ │ │ ├── stash_local_changes.sh
│ │ │ ├── sync_from_remote_noconfig.sh
│ │ │ └── sync_from_remote.sh
│ │ ├── README.md
│ │ ├── safe_cloudflare_update.sh
│ │ ├── sync_memory_backends.py
│ │ └── sync_now.py
│ ├── testing
│ │ ├── run_complete_test.py
│ │ ├── run_memory_test.sh
│ │ ├── simple_test.py
│ │ ├── test_cleanup_logic.py
│ │ ├── test_cloudflare_backend.py
│ │ ├── test_docker_functionality.py
│ │ ├── test_installation.py
│ │ ├── test_mdns.py
│ │ ├── test_memory_api.py
│ │ ├── test_memory_simple.py
│ │ ├── test_migration.py
│ │ ├── test_search_api.py
│ │ ├── test_sqlite_vec_embeddings.py
│ │ ├── test_sse_events.py
│ │ ├── test-connection.py
│ │ └── test-hook.js
│ ├── update_and_restart.sh
│ ├── utils
│ │ ├── claude_commands_utils.py
│ │ ├── detect_platform.py
│ │ ├── generate_personalized_claude_md.sh
│ │ ├── groq
│ │ ├── groq_agent_bridge.py
│ │ ├── list-collections.py
│ │ ├── memory_wrapper_uv.py
│ │ ├── query_memories.py
│ │ ├── README_detect_platform.md
│ │ ├── smithery_wrapper.py
│ │ ├── test_groq_bridge.sh
│ │ └── uv_wrapper.py
│ └── validation
│ ├── check_dev_setup.py
│ ├── check_documentation_links.py
│ ├── check_handler_coverage.py
│ ├── diagnose_backend_config.py
│ ├── validate_configuration_complete.py
│ ├── validate_graph_tools.py
│ ├── validate_memories.py
│ ├── validate_migration.py
│ ├── validate_timestamp_integrity.py
│ ├── verify_environment.py
│ ├── verify_pytorch_windows.py
│ └── verify_torch.py
├── SECURITY.md
├── selective_timestamp_recovery.py
├── SPONSORS.md
├── src
│ └── mcp_memory_service
│ ├── __init__.py
│ ├── _version.py
│ ├── api
│ │ ├── __init__.py
│ │ ├── client.py
│ │ ├── operations.py
│ │ ├── sync_wrapper.py
│ │ └── types.py
│ ├── backup
│ │ ├── __init__.py
│ │ └── scheduler.py
│ ├── cli
│ │ ├── __init__.py
│ │ ├── ingestion.py
│ │ ├── main.py
│ │ └── utils.py
│ ├── config.py
│ ├── consolidation
│ │ ├── __init__.py
│ │ ├── associations.py
│ │ ├── base.py
│ │ ├── clustering.py
│ │ ├── compression.py
│ │ ├── consolidator.py
│ │ ├── decay.py
│ │ ├── forgetting.py
│ │ ├── health.py
│ │ └── scheduler.py
│ ├── dependency_check.py
│ ├── discovery
│ │ ├── __init__.py
│ │ ├── client.py
│ │ └── mdns_service.py
│ ├── embeddings
│ │ ├── __init__.py
│ │ └── onnx_embeddings.py
│ ├── ingestion
│ │ ├── __init__.py
│ │ ├── base.py
│ │ ├── chunker.py
│ │ ├── csv_loader.py
│ │ ├── json_loader.py
│ │ ├── pdf_loader.py
│ │ ├── registry.py
│ │ ├── semtools_loader.py
│ │ └── text_loader.py
│ ├── lm_studio_compat.py
│ ├── mcp_server.py
│ ├── models
│ │ ├── __init__.py
│ │ └── memory.py
│ ├── quality
│ │ ├── __init__.py
│ │ ├── ai_evaluator.py
│ │ ├── async_scorer.py
│ │ ├── config.py
│ │ ├── implicit_signals.py
│ │ ├── metadata_codec.py
│ │ ├── onnx_ranker.py
│ │ └── scorer.py
│ ├── server
│ │ ├── __init__.py
│ │ ├── __main__.py
│ │ ├── cache_manager.py
│ │ ├── client_detection.py
│ │ ├── environment.py
│ │ ├── handlers
│ │ │ ├── __init__.py
│ │ │ ├── consolidation.py
│ │ │ ├── documents.py
│ │ │ ├── graph.py
│ │ │ ├── memory.py
│ │ │ ├── quality.py
│ │ │ └── utility.py
│ │ └── logging_config.py
│ ├── server_impl.py
│ ├── services
│ │ ├── __init__.py
│ │ └── memory_service.py
│ ├── storage
│ │ ├── __init__.py
│ │ ├── base.py
│ │ ├── cloudflare.py
│ │ ├── factory.py
│ │ ├── graph.py
│ │ ├── http_client.py
│ │ ├── hybrid.py
│ │ ├── migrations
│ │ │ └── 008_add_graph_table.sql
│ │ └── sqlite_vec.py
│ ├── sync
│ │ ├── __init__.py
│ │ ├── exporter.py
│ │ ├── importer.py
│ │ └── litestream_config.py
│ ├── utils
│ │ ├── __init__.py
│ │ ├── cache_manager.py
│ │ ├── content_splitter.py
│ │ ├── db_utils.py
│ │ ├── debug.py
│ │ ├── directory_ingestion.py
│ │ ├── document_processing.py
│ │ ├── gpu_detection.py
│ │ ├── hashing.py
│ │ ├── health_check.py
│ │ ├── http_server_manager.py
│ │ ├── port_detection.py
│ │ ├── quality_analytics.py
│ │ ├── startup_orchestrator.py
│ │ ├── system_detection.py
│ │ └── time_parser.py
│ └── web
│ ├── __init__.py
│ ├── api
│ │ ├── __init__.py
│ │ ├── analytics.py
│ │ ├── backup.py
│ │ ├── consolidation.py
│ │ ├── documents.py
│ │ ├── events.py
│ │ ├── health.py
│ │ ├── manage.py
│ │ ├── mcp.py
│ │ ├── memories.py
│ │ ├── quality.py
│ │ ├── search.py
│ │ └── sync.py
│ ├── app.py
│ ├── dependencies.py
│ ├── oauth
│ │ ├── __init__.py
│ │ ├── authorization.py
│ │ ├── discovery.py
│ │ ├── middleware.py
│ │ ├── models.py
│ │ ├── registration.py
│ │ └── storage.py
│ ├── sse.py
│ └── static
│ ├── app.js
│ ├── i18n
│ │ ├── de.json
│ │ ├── en.json
│ │ ├── es.json
│ │ ├── fr.json
│ │ ├── ja.json
│ │ ├── ko.json
│ │ └── zh.json
│ ├── index.html
│ ├── README.md
│ ├── sse_test.html
│ └── style.css
├── start_http_debug.bat
├── start_http_server.sh
├── test_document.txt
├── test_version_checker.js
├── TESTING_NOTES.md
├── tests
│ ├── __init__.py
│ ├── api
│ │ ├── __init__.py
│ │ ├── test_compact_types.py
│ │ └── test_operations.py
│ ├── bridge
│ │ ├── mock_responses.js
│ │ ├── package-lock.json
│ │ ├── package.json
│ │ └── test_http_mcp_bridge.js
│ ├── conftest.py
│ ├── consolidation
│ │ ├── __init__.py
│ │ ├── conftest.py
│ │ ├── test_associations.py
│ │ ├── test_clustering.py
│ │ ├── test_compression.py
│ │ ├── test_consolidator.py
│ │ ├── test_decay.py
│ │ ├── test_forgetting.py
│ │ └── test_graph_modes.py
│ ├── contracts
│ │ └── api-specification.yml
│ ├── integration
│ │ ├── conftest.py
│ │ ├── HANDLER_COVERAGE_REPORT.md
│ │ ├── package-lock.json
│ │ ├── package.json
│ │ ├── test_all_memory_handlers.py
│ │ ├── test_api_key_fallback.py
│ │ ├── test_api_memories_chronological.py
│ │ ├── test_api_tag_time_search.py
│ │ ├── test_api_with_memory_service.py
│ │ ├── test_bridge_integration.js
│ │ ├── test_cli_interfaces.py
│ │ ├── test_cloudflare_connection.py
│ │ ├── test_concurrent_clients.py
│ │ ├── test_data_serialization_consistency.py
│ │ ├── test_http_server_startup.py
│ │ ├── test_mcp_memory.py
│ │ ├── test_mdns_integration.py
│ │ ├── test_oauth_basic_auth.py
│ │ ├── test_oauth_flow.py
│ │ ├── test_server_handlers.py
│ │ └── test_store_memory.py
│ ├── performance
│ │ ├── test_background_sync.py
│ │ └── test_hybrid_live.py
│ ├── README.md
│ ├── smithery
│ │ └── test_smithery.py
│ ├── sqlite
│ │ └── simple_sqlite_vec_test.py
│ ├── storage
│ │ ├── conftest.py
│ │ └── test_graph_storage.py
│ ├── test_client.py
│ ├── test_content_splitting.py
│ ├── test_database.py
│ ├── test_deberta_quality.py
│ ├── test_fallback_quality.py
│ ├── test_graph_traversal.py
│ ├── test_hybrid_cloudflare_limits.py
│ ├── test_hybrid_storage.py
│ ├── test_lightweight_onnx.py
│ ├── test_memory_ops.py
│ ├── test_memory_wrapper_cleanup.py
│ ├── test_quality_integration.py
│ ├── test_quality_system.py
│ ├── test_semantic_search.py
│ ├── test_sqlite_vec_storage.py
│ ├── test_time_parser.py
│ ├── test_timestamp_preservation.py
│ ├── timestamp
│ │ ├── test_hook_vs_manual_storage.py
│ │ ├── test_issue99_final_validation.py
│ │ ├── test_search_retrieval_inconsistency.py
│ │ ├── test_timestamp_issue.py
│ │ └── test_timestamp_simple.py
│ └── unit
│ ├── conftest.py
│ ├── test_cloudflare_storage.py
│ ├── test_csv_loader.py
│ ├── test_fastapi_dependencies.py
│ ├── test_import.py
│ ├── test_imports.py
│ ├── test_json_loader.py
│ ├── test_mdns_simple.py
│ ├── test_mdns.py
│ ├── test_memory_service.py
│ ├── test_memory.py
│ ├── test_semtools_loader.py
│ ├── test_storage_interface_compatibility.py
│ ├── test_tag_time_filtering.py
│ └── test_uv_no_pip_installer_fallback.py
├── tools
│ ├── docker
│ │ ├── DEPRECATED.md
│ │ ├── docker-compose.http.yml
│ │ ├── docker-compose.pythonpath.yml
│ │ ├── docker-compose.standalone.yml
│ │ ├── docker-compose.uv.yml
│ │ ├── docker-compose.yml
│ │ ├── docker-entrypoint-persistent.sh
│ │ ├── docker-entrypoint-unified.sh
│ │ ├── docker-entrypoint.sh
│ │ ├── Dockerfile
│ │ ├── Dockerfile.glama
│ │ ├── Dockerfile.slim
│ │ ├── README.md
│ │ └── test-docker-modes.sh
│ └── README.md
├── uv.lock
└── verify_compression.sh
```
# Files
--------------------------------------------------------------------------------
/src/mcp_memory_service/web/static/style.css:
--------------------------------------------------------------------------------
```css
1 | /* MCP Memory Service Dashboard Styles */
2 |
3 | /* CSS Reset and Base Styles */
4 | * {
5 | margin: 0;
6 | padding: 0;
7 | box-sizing: border-box;
8 | }
9 |
10 | /* CSS Custom Properties */
11 | :root {
12 | /* Color Palette */
13 | --primary: #3b82f6;
14 | --primary-dark: #2563eb;
15 | --secondary: #8b5cf6;
16 | --accent: #06d6a0;
17 | --success: #10b981;
18 | --warning: #f59e0b;
19 | --error: #ef4444;
20 | --neutral-50: #f9fafb;
21 | --neutral-100: #f3f4f6;
22 | --neutral-200: #e5e7eb;
23 | --neutral-300: #d1d5db;
24 | --neutral-400: #9ca3af;
25 | --neutral-500: #6b7280;
26 | --neutral-600: #4b5563;
27 | --neutral-700: #374151;
28 | --neutral-800: #1f2937;
29 | --neutral-900: #111827;
30 |
31 | /* Typography */
32 | --font-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
33 | --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
34 |
35 | /* Font Sizes */
36 | --text-xs: 0.75rem;
37 | --text-sm: 0.875rem;
38 | --text-base: 1rem;
39 | --text-lg: 1.125rem;
40 | --text-xl: 1.25rem;
41 | --text-2xl: 1.5rem;
42 | --text-3xl: 1.875rem;
43 |
44 | /* Spacing Scale */
45 | --space-1: 0.25rem;
46 | --space-2: 0.5rem;
47 | --space-3: 0.75rem;
48 | --space-4: 1rem;
49 | --space-5: 1.25rem;
50 | --space-6: 1.5rem;
51 | --space-8: 2rem;
52 | --space-10: 2.5rem;
53 | --space-12: 3rem;
54 | --space-16: 4rem;
55 |
56 | /* Border Radius */
57 | --radius-sm: 0.25rem;
58 | --radius-md: 0.375rem;
59 | --radius-lg: 0.5rem;
60 | --radius-xl: 0.75rem;
61 |
62 | /* Shadows */
63 | --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
64 | --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
65 | --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
66 | --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
67 |
68 | /* Transitions */
69 | --transition-fast: 150ms ease;
70 | --transition-base: 200ms ease;
71 | --transition-slow: 300ms ease;
72 |
73 | /* Breakpoints */
74 | --mobile-max: 768px;
75 | --tablet-min: 769px;
76 | --tablet-max: 1024px;
77 | --desktop-min: 1025px;
78 | }
79 |
80 | /* Base Typography */
81 | body {
82 | font-family: var(--font-primary);
83 | font-size: var(--text-base);
84 | line-height: 1.5;
85 | color: var(--neutral-900);
86 | background-color: var(--neutral-50);
87 | overflow-x: hidden;
88 | }
89 |
90 | h1, h2, h3, h4, h5, h6 {
91 | font-weight: 600;
92 | line-height: 1.25;
93 | margin-bottom: var(--space-4);
94 | }
95 |
96 | h1 { font-size: var(--text-3xl); }
97 | h2 { font-size: var(--text-2xl); }
98 | h3 { font-size: var(--text-xl); }
99 |
100 | /* App Layout */
101 | .app-container {
102 | min-height: 100vh;
103 | display: grid;
104 | grid-template-rows: auto auto auto 1fr auto;
105 | grid-template-areas:
106 | "header"
107 | "nav"
108 | "sync"
109 | "main"
110 | "footer";
111 | }
112 |
113 | /* Header Styles */
114 | .app-header {
115 | grid-area: header;
116 | background: white;
117 | border-bottom: 1px solid var(--neutral-200);
118 | box-shadow: var(--shadow-sm);
119 | position: sticky;
120 | top: 0;
121 | z-index: 100;
122 | }
123 |
124 | .header-content {
125 | max-width: 1200px;
126 | margin: 0 auto;
127 | padding: var(--space-4) var(--space-6);
128 | display: grid;
129 | grid-template-columns: auto 1fr auto;
130 | gap: var(--space-6);
131 | align-items: center;
132 | }
133 |
134 | .logo-section {
135 | display: flex;
136 | align-items: center;
137 | gap: var(--space-3);
138 | }
139 |
140 | .app-title {
141 | font-size: var(--text-xl);
142 | font-weight: 700;
143 | color: var(--primary);
144 | margin: 0;
145 | }
146 |
147 | .version-badge {
148 | background: var(--neutral-100);
149 | color: var(--neutral-600);
150 | padding: var(--space-1) var(--space-2);
151 | border-radius: var(--radius-md);
152 | font-size: var(--text-xs);
153 | font-weight: 500;
154 | }
155 |
156 | /* Search Section */
157 | .search-section {
158 | flex: 1;
159 | max-width: 600px;
160 | }
161 |
162 | .search-container {
163 | position: relative;
164 | display: flex;
165 | align-items: center;
166 | }
167 |
168 | .search-input {
169 | width: 100%;
170 | padding: var(--space-3) var(--space-4);
171 | padding-right: var(--space-12);
172 | border: 1px solid var(--neutral-300);
173 | border-radius: var(--radius-lg);
174 | font-size: var(--text-base);
175 | background: var(--neutral-50);
176 | transition: var(--transition-base);
177 | }
178 |
179 | .search-input:focus {
180 | outline: none;
181 | border-color: var(--primary);
182 | background: white;
183 | box-shadow: 0 0 0 3px rgb(59 130 246 / 0.1);
184 | }
185 |
186 | .search-btn {
187 | position: absolute;
188 | right: var(--space-2);
189 | padding: var(--space-2);
190 | background: none;
191 | border: none;
192 | color: var(--neutral-500);
193 | cursor: pointer;
194 | border-radius: var(--radius-md);
195 | transition: var(--transition-base);
196 | }
197 |
198 | .search-btn:hover {
199 | color: var(--primary);
200 | background: var(--neutral-100);
201 | }
202 |
203 | /* Action Buttons */
204 | .action-buttons {
205 | display: flex;
206 | gap: var(--space-3);
207 | align-items: center;
208 | }
209 |
210 | /* Button Components */
211 | .btn {
212 | display: inline-flex;
213 | align-items: center;
214 | gap: var(--space-2);
215 | padding: var(--space-3) var(--space-4);
216 | border: none;
217 | border-radius: var(--radius-md);
218 | font-size: var(--text-sm);
219 | font-weight: 500;
220 | cursor: pointer;
221 | transition: var(--transition-base);
222 | text-decoration: none;
223 | }
224 |
225 | .btn-primary {
226 | background: var(--primary);
227 | color: white;
228 | }
229 |
230 | .btn-primary:hover {
231 | background: var(--primary-dark);
232 | }
233 |
234 | .btn-secondary {
235 | background: var(--neutral-200);
236 | color: var(--neutral-700);
237 | }
238 |
239 | .btn-secondary:hover {
240 | background: var(--neutral-300);
241 | }
242 |
243 | /* Language Selector - Dropdown Version */
244 | .language-selector {
245 | position: relative;
246 | margin-left: var(--space-2);
247 | }
248 |
249 | .lang-dropdown-trigger {
250 | display: flex;
251 | align-items: center;
252 | gap: var(--space-2);
253 | padding: var(--space-2) var(--space-3);
254 | border: 1px solid var(--neutral-300);
255 | background: var(--neutral-100);
256 | color: var(--neutral-800);
257 | border-radius: var(--radius-lg);
258 | cursor: pointer;
259 | transition: var(--transition-base);
260 | font-size: var(--text-sm);
261 | font-family: var(--font-primary);
262 | white-space: nowrap;
263 | }
264 |
265 | .lang-dropdown-trigger:hover {
266 | background: var(--neutral-200);
267 | border-color: var(--neutral-400);
268 | }
269 |
270 | .lang-dropdown-trigger:focus {
271 | outline: 2px solid var(--primary);
272 | outline-offset: 2px;
273 | background: var(--neutral-200);
274 | }
275 |
276 | .lang-dropdown-trigger[aria-expanded="true"] {
277 | background: var(--neutral-200);
278 | border-color: var(--primary);
279 | }
280 |
281 | .lang-icon {
282 | flex-shrink: 0;
283 | color: var(--neutral-600);
284 | }
285 |
286 | .lang-current {
287 | font-weight: 500;
288 | }
289 |
290 | .lang-chevron {
291 | flex-shrink: 0;
292 | transition: transform var(--transition-base);
293 | }
294 |
295 | .lang-dropdown-trigger[aria-expanded="true"] .lang-chevron {
296 | transform: rotate(180deg);
297 | }
298 |
299 | .lang-dropdown-menu {
300 | position: absolute;
301 | top: calc(100% + var(--space-1));
302 | right: 0;
303 | min-width: 180px;
304 | background: white;
305 | border: 1px solid var(--neutral-300);
306 | border-radius: var(--radius-lg);
307 | box-shadow: var(--shadow-lg);
308 | padding: var(--space-1);
309 | z-index: 1000;
310 | opacity: 0;
311 | transform: translateY(-8px);
312 | transition: opacity var(--transition-base), transform var(--transition-base);
313 | pointer-events: none;
314 | }
315 |
316 | .lang-dropdown-menu:not([hidden]) {
317 | opacity: 1;
318 | transform: translateY(0);
319 | pointer-events: auto;
320 | }
321 |
322 | .lang-option {
323 | display: flex;
324 | align-items: center;
325 | gap: var(--space-3);
326 | width: 100%;
327 | padding: var(--space-2) var(--space-3);
328 | border: none;
329 | background: transparent;
330 | border-radius: var(--radius-md);
331 | cursor: pointer;
332 | transition: var(--transition-fast);
333 | text-align: left;
334 | font-size: var(--text-sm);
335 | font-family: var(--font-primary);
336 | color: var(--neutral-800);
337 | }
338 |
339 | .lang-option:hover {
340 | background: var(--neutral-100);
341 | }
342 |
343 | .lang-option:focus {
344 | outline: none;
345 | background: var(--neutral-100);
346 | }
347 |
348 | .lang-option.active {
349 | background: rgba(59, 130, 246, 0.1);
350 | color: var(--primary);
351 | font-weight: 500;
352 | }
353 |
354 | .lang-option .lang-flag {
355 | font-size: var(--text-lg);
356 | flex-shrink: 0;
357 | }
358 |
359 | .lang-option .lang-name {
360 | flex: 1;
361 | }
362 |
363 | .lang-option .lang-check {
364 | width: 16px;
365 | height: 16px;
366 | stroke: var(--primary);
367 | flex-shrink: 0;
368 | opacity: 0;
369 | }
370 |
371 | .lang-option.active .lang-check {
372 | opacity: 1;
373 | }
374 |
375 | /* Mobile Responsive */
376 | @media (max-width: 768px) {
377 | .lang-current {
378 | display: none;
379 | }
380 |
381 | .lang-dropdown-trigger {
382 | padding: var(--space-2);
383 | }
384 |
385 | .lang-dropdown-menu {
386 | right: auto;
387 | left: 0;
388 | }
389 | }
390 |
391 | .btn-danger {
392 | background: var(--error);
393 | color: white;
394 | }
395 |
396 | .btn-danger:hover {
397 | background: #dc2626;
398 | }
399 |
400 | /* Navigation */
401 | .main-nav {
402 | grid-area: nav;
403 | background: white;
404 | border-bottom: 1px solid var(--neutral-200);
405 | }
406 |
407 | .nav-container {
408 | max-width: 1200px;
409 | margin: 0 auto;
410 | padding: 0 var(--space-6);
411 | display: flex;
412 | gap: var(--space-2);
413 | }
414 |
415 | .nav-item {
416 | display: flex;
417 | align-items: center;
418 | gap: var(--space-2);
419 | padding: var(--space-4) var(--space-5);
420 | border: none;
421 | background: none;
422 | color: var(--neutral-600);
423 | font-size: var(--text-sm);
424 | font-weight: 500;
425 | cursor: pointer;
426 | border-bottom: 2px solid transparent;
427 | transition: var(--transition-base);
428 | }
429 |
430 | .nav-item:hover {
431 | color: var(--primary);
432 | background: var(--neutral-50);
433 | }
434 |
435 | .nav-item.active {
436 | color: var(--primary);
437 | border-bottom-color: var(--primary);
438 | }
439 |
440 | /* Sync Status Bar */
441 | .sync-status-bar {
442 | grid-area: sync;
443 | display: none; /* Hidden by default, shown by JavaScript for hybrid mode */
444 | background: var(--neutral-50);
445 | border-bottom: 1px solid var(--neutral-200);
446 | padding: var(--space-3) var(--space-6);
447 | transition: all 0.3s ease;
448 | }
449 |
450 | .sync-status-bar.visible {
451 | display: block;
452 | }
453 |
454 | .sync-status-bar.synced {
455 | background: linear-gradient(90deg, rgba(34, 197, 94, 0.05) 0%, rgba(34, 197, 94, 0) 100%);
456 | border-bottom-color: var(--success-light);
457 | }
458 |
459 | .sync-status-bar.syncing {
460 | background: linear-gradient(90deg, rgba(59, 130, 246, 0.1) 0%, rgba(59, 130, 246, 0) 100%);
461 | border-bottom-color: var(--primary-light);
462 | }
463 |
464 | .sync-status-bar.pending {
465 | background: linear-gradient(90deg, rgba(251, 191, 36, 0.1) 0%, rgba(251, 191, 36, 0) 100%);
466 | border-bottom-color: var(--warning-light);
467 | }
468 |
469 | .sync-status-bar.error {
470 | background: linear-gradient(90deg, rgba(239, 68, 68, 0.1) 0%, rgba(239, 68, 68, 0) 100%);
471 | border-bottom-color: var(--danger-light);
472 | }
473 |
474 | .sync-status-content {
475 | display: flex;
476 | justify-content: space-between;
477 | align-items: center;
478 | max-width: 1400px;
479 | margin: 0 auto;
480 | }
481 |
482 | .sync-status-indicator {
483 | display: flex;
484 | align-items: center;
485 | gap: var(--space-2);
486 | font-size: var(--text-sm);
487 | }
488 |
489 | #syncStatusIcon {
490 | font-size: var(--text-lg);
491 | animation: sync-pulse 2s ease-in-out infinite;
492 | }
493 |
494 | .sync-status-bar.syncing #syncStatusIcon {
495 | animation: sync-rotate 1s linear infinite;
496 | }
497 |
498 | #syncStatusText {
499 | font-weight: 600;
500 | color: var(--neutral-900);
501 | }
502 |
503 | .sync-details {
504 | color: var(--neutral-600);
505 | margin-left: var(--space-2);
506 | }
507 |
508 | .sync-button {
509 | display: flex;
510 | align-items: center;
511 | gap: var(--space-2);
512 | padding: var(--space-2) var(--space-4);
513 | background: var(--primary);
514 | color: white;
515 | border: none;
516 | border-radius: var(--radius-md);
517 | font-size: var(--text-sm);
518 | font-weight: 600;
519 | cursor: pointer;
520 | transition: all 0.2s ease;
521 | }
522 |
523 | .sync-button:hover:not(:disabled) {
524 | background: var(--primary-dark);
525 | transform: translateY(-1px);
526 | box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
527 | }
528 |
529 | .sync-button:active:not(:disabled) {
530 | transform: translateY(0);
531 | }
532 |
533 | .sync-button:disabled {
534 | background: var(--neutral-300);
535 | cursor: not-allowed;
536 | opacity: 0.6;
537 | }
538 |
539 | .sync-button-icon {
540 | font-size: var(--text-base);
541 | }
542 |
543 | @keyframes sync-rotate {
544 | from {
545 | transform: rotate(0deg);
546 | }
547 | to {
548 | transform: rotate(360deg);
549 | }
550 | }
551 |
552 | @keyframes sync-pulse {
553 | 0%, 100% {
554 | opacity: 1;
555 | }
556 | 50% {
557 | opacity: 0.6;
558 | }
559 | }
560 |
561 | /* Main Content */
562 | .main-content {
563 | grid-area: main;
564 | max-width: 1200px;
565 | margin: 0 auto;
566 | padding: var(--space-8) var(--space-6);
567 | width: 100%;
568 | }
569 |
570 | /* View Containers */
571 | .view-container {
572 | display: none;
573 | }
574 |
575 | .view-container.active {
576 | display: block;
577 | }
578 |
579 | /* Dashboard Grid Layout */
580 | .dashboard-grid {
581 | display: grid;
582 | grid-template-columns: 1fr 400px;
583 | grid-template-rows: auto auto;
584 | gap: var(--space-8);
585 | grid-template-areas:
586 | "welcome quick-actions"
587 | "recent quick-actions";
588 | }
589 |
590 | .welcome-card {
591 | grid-area: welcome;
592 | background: white;
593 | padding: var(--space-8);
594 | border-radius: var(--radius-xl);
595 | box-shadow: var(--shadow-md);
596 | }
597 |
598 | .welcome-card h2 {
599 | color: var(--neutral-900);
600 | margin-bottom: var(--space-3);
601 | }
602 |
603 | .welcome-card p {
604 | color: var(--neutral-600);
605 | margin-bottom: var(--space-6);
606 | }
607 |
608 | .quick-stats {
609 | display: grid;
610 | grid-template-columns: repeat(3, 1fr);
611 | gap: var(--space-6);
612 | }
613 |
614 | .stat-item {
615 | text-align: center;
616 | }
617 |
618 | .stat-number {
619 | display: block;
620 | font-size: var(--text-2xl);
621 | font-weight: 700;
622 | color: var(--primary);
623 | margin-bottom: var(--space-1);
624 | }
625 |
626 | .stat-label {
627 | font-size: var(--text-sm);
628 | color: var(--neutral-600);
629 | }
630 |
631 | .recent-memories {
632 | grid-area: recent;
633 | background: white;
634 | padding: var(--space-6);
635 | border-radius: var(--radius-xl);
636 | box-shadow: var(--shadow-md);
637 | }
638 |
639 | .quick-actions {
640 | grid-area: quick-actions;
641 | background: white;
642 | padding: var(--space-6);
643 | border-radius: var(--radius-xl);
644 | box-shadow: var(--shadow-md);
645 | }
646 |
647 | .action-grid {
648 | display: grid;
649 | gap: var(--space-4);
650 | }
651 |
652 | .action-card {
653 | display: flex;
654 | align-items: center;
655 | gap: var(--space-3);
656 | padding: var(--space-4);
657 | background: var(--neutral-50);
658 | border: 1px solid var(--neutral-200);
659 | border-radius: var(--radius-lg);
660 | cursor: pointer;
661 | transition: var(--transition-base);
662 | font-size: var(--text-sm);
663 | font-weight: 500;
664 | }
665 |
666 | .action-card:hover {
667 | background: var(--neutral-100);
668 | border-color: var(--primary);
669 | }
670 |
671 | /* Compact Sync Control Styles */
672 | .sync-control-compact {
673 | margin-top: var(--space-4);
674 | padding: var(--space-3);
675 | background: var(--neutral-50);
676 | border: 1px solid var(--neutral-200);
677 | border-radius: var(--radius-md);
678 | border-left: 3px solid var(--neutral-400);
679 | }
680 |
681 | .sync-row {
682 | display: flex;
683 | align-items: center;
684 | gap: var(--space-3);
685 | }
686 |
687 | .sync-status {
688 | display: flex;
689 | align-items: center;
690 | gap: var(--space-2);
691 | flex: 1;
692 | min-width: 0;
693 | }
694 |
695 | .sync-dot {
696 | width: 8px;
697 | height: 8px;
698 | border-radius: 50%;
699 | background: var(--neutral-400);
700 | flex-shrink: 0;
701 | }
702 |
703 | .sync-text-sm {
704 | font-size: var(--text-sm);
705 | color: var(--neutral-700);
706 | font-weight: 500;
707 | white-space: nowrap;
708 | overflow: hidden;
709 | text-overflow: ellipsis;
710 | }
711 |
712 | .sync-progress-sm {
713 | font-size: var(--text-xs);
714 | color: var(--neutral-500);
715 | flex-shrink: 0;
716 | white-space: nowrap;
717 | }
718 |
719 | .sync-buttons-sm {
720 | display: flex;
721 | gap: 2px;
722 | flex-shrink: 0;
723 | }
724 |
725 | .btn-icon-sm {
726 | width: 28px;
727 | height: 28px;
728 | display: flex;
729 | align-items: center;
730 | justify-content: center;
731 | background: transparent;
732 | border: none;
733 | border-radius: var(--radius-sm);
734 | cursor: pointer;
735 | color: var(--neutral-500);
736 | transition: all var(--transition-fast);
737 | }
738 |
739 | .btn-icon-sm:hover {
740 | background: var(--neutral-200);
741 | color: var(--neutral-700);
742 | }
743 |
744 | .btn-icon-sm:active {
745 | transform: scale(0.95);
746 | }
747 |
748 | .btn-icon-sm.btn-icon-primary {
749 | color: var(--primary);
750 | }
751 |
752 | .btn-icon-sm.btn-icon-primary:hover {
753 | background: rgba(59, 130, 246, 0.15);
754 | color: var(--primary-dark);
755 | }
756 |
757 | .btn-icon-sm:disabled {
758 | opacity: 0.4;
759 | cursor: not-allowed;
760 | }
761 |
762 | /* Sync Control Status States */
763 | .sync-control-compact.synced {
764 | border-left-color: var(--success);
765 | }
766 |
767 | .sync-control-compact.synced .sync-dot {
768 | background: var(--success);
769 | }
770 |
771 | .sync-control-compact.syncing {
772 | border-left-color: var(--primary);
773 | }
774 |
775 | .sync-control-compact.syncing .sync-dot {
776 | background: var(--primary);
777 | animation: spinner 1s linear infinite;
778 | }
779 |
780 | .sync-control-compact.pending {
781 | border-left-color: var(--warning);
782 | }
783 |
784 | .sync-control-compact.pending .sync-dot {
785 | background: var(--warning);
786 | }
787 |
788 | .sync-control-compact.error {
789 | border-left-color: var(--error);
790 | }
791 |
792 | .sync-control-compact.error .sync-dot {
793 | background: var(--error);
794 | }
795 |
796 | .sync-control-compact.paused {
797 | border-left-color: var(--neutral-400);
798 | }
799 |
800 | .sync-control-compact.paused .sync-dot {
801 | background: var(--neutral-400);
802 | }
803 |
804 | @keyframes pulse {
805 | 0%, 100% { opacity: 1; }
806 | 50% { opacity: 0.5; }
807 | }
808 |
809 | @keyframes spinner {
810 | 0% { transform: rotate(0deg); }
811 | 100% { transform: rotate(360deg); }
812 | }
813 |
814 | /* Backup Settings in Modal */
815 | .backup-settings {
816 | margin-top: var(--space-2);
817 | }
818 |
819 | .backup-actions {
820 | margin-top: var(--space-3);
821 | display: flex;
822 | gap: var(--space-2);
823 | }
824 |
825 | /* Small button variant */
826 | .btn-sm {
827 | padding: var(--space-2);
828 | font-size: var(--text-xs);
829 | min-width: auto;
830 | }
831 |
832 | .btn-sm svg {
833 | width: 16px;
834 | height: 16px;
835 | }
836 |
837 | /* Memory List/Grid Components */
838 | .memory-list {
839 | display: flex;
840 | flex-direction: column;
841 | gap: var(--space-4);
842 | max-height: 600px;
843 | overflow-y: auto;
844 | }
845 |
846 | .memory-grid {
847 | display: grid;
848 | grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
849 | gap: var(--space-6);
850 | }
851 |
852 | .memory-card {
853 | background: white;
854 | border: 1px solid var(--neutral-200);
855 | border-radius: var(--radius-lg);
856 | padding: var(--space-5);
857 | transition: var(--transition-base);
858 | cursor: pointer;
859 | }
860 |
861 | .memory-card:hover {
862 | border-color: var(--primary);
863 | box-shadow: var(--shadow-md);
864 | }
865 |
866 | .memory-header {
867 | display: flex;
868 | justify-content: space-between;
869 | align-items: flex-start;
870 | margin-bottom: var(--space-3);
871 | }
872 |
873 | .memory-meta {
874 | font-size: var(--text-xs);
875 | color: var(--neutral-500);
876 | }
877 |
878 | /* Time-of-day emoji icon */
879 | .time-icon {
880 | display: inline-block;
881 | margin-left: 6px;
882 | font-size: 1em;
883 | opacity: 0.85;
884 | vertical-align: middle;
885 | cursor: help; /* Shows tooltip on hover */
886 | }
887 |
888 | .time-icon:hover {
889 | opacity: 1;
890 | }
891 |
892 | .memory-content {
893 | color: var(--neutral-700);
894 | line-height: 1.6;
895 | margin-bottom: var(--space-4);
896 | display: -webkit-box;
897 | -webkit-line-clamp: 3;
898 | -webkit-box-orient: vertical;
899 | overflow: hidden;
900 | }
901 |
902 | .memory-tags {
903 | display: flex;
904 | flex-wrap: wrap;
905 | gap: var(--space-2);
906 | }
907 |
908 | .tag {
909 | background: var(--neutral-100);
910 | color: var(--neutral-700);
911 | padding: var(--space-1) var(--space-2);
912 | border-radius: var(--radius-sm);
913 | font-size: var(--text-xs);
914 | font-weight: 500;
915 | }
916 |
917 | /* Document Group Styles */
918 | .document-group {
919 | background: white;
920 | border: 1px solid var(--neutral-200);
921 | border-radius: var(--radius-lg);
922 | padding: var(--space-5);
923 | transition: var(--transition-base);
924 | cursor: pointer;
925 | margin-bottom: var(--space-4);
926 | }
927 |
928 | .document-group:hover {
929 | border-color: var(--primary);
930 | box-shadow: var(--shadow-md);
931 | }
932 |
933 | .document-header {
934 | display: flex;
935 | align-items: center;
936 | gap: var(--space-3);
937 | margin-bottom: var(--space-3);
938 | }
939 |
940 | .document-icon {
941 | font-size: var(--text-xl);
942 | flex-shrink: 0;
943 | }
944 |
945 | .document-info {
946 | flex: 1;
947 | min-width: 0;
948 | }
949 |
950 | .document-title {
951 | font-weight: 600;
952 | color: var(--neutral-900);
953 | margin-bottom: var(--space-1);
954 | word-break: break-word;
955 | }
956 |
957 | .document-meta {
958 | font-size: var(--text-sm);
959 | color: var(--neutral-500);
960 | }
961 |
962 | .document-preview {
963 | color: var(--neutral-700);
964 | line-height: 1.6;
965 | margin-bottom: var(--space-3);
966 | display: -webkit-box;
967 | -webkit-line-clamp: 2;
968 | -webkit-box-orient: vertical;
969 | overflow: hidden;
970 | }
971 |
972 | .document-tags {
973 | display: flex;
974 | flex-wrap: wrap;
975 | gap: var(--space-2);
976 | margin-bottom: var(--space-3);
977 | }
978 |
979 | .document-actions {
980 | display: flex;
981 | gap: var(--space-2);
982 | justify-content: flex-end;
983 | }
984 |
985 | .document-actions .btn-icon {
986 | display: flex;
987 | align-items: center;
988 | gap: var(--space-1);
989 | padding: var(--space-2) var(--space-3);
990 | background: var(--neutral-100);
991 | color: var(--neutral-700);
992 | border: 1px solid var(--neutral-200);
993 | border-radius: var(--radius-md);
994 | font-size: var(--text-sm);
995 | transition: var(--transition-fast);
996 | cursor: pointer;
997 | }
998 |
999 | .document-actions .btn-icon:hover {
1000 | background: var(--neutral-200);
1001 | border-color: var(--neutral-300);
1002 | }
1003 |
1004 | .document-actions .btn-remove:hover {
1005 | background: var(--error);
1006 | color: white;
1007 | border-color: var(--error);
1008 | }
1009 |
1010 | /* Document Chunks Modal */
1011 | .document-chunks {
1012 | max-height: 70vh;
1013 | overflow-y: auto;
1014 | }
1015 |
1016 | .chunk-item {
1017 | background: var(--neutral-50);
1018 | border: 1px solid var(--neutral-200);
1019 | border-radius: var(--radius-md);
1020 | padding: var(--space-4);
1021 | margin-bottom: var(--space-4);
1022 | }
1023 |
1024 | .chunk-header {
1025 | display: flex;
1026 | justify-content: space-between;
1027 | align-items: center;
1028 | margin-bottom: var(--space-2);
1029 | }
1030 |
1031 | .chunk-number {
1032 | font-weight: 600;
1033 | color: var(--neutral-900);
1034 | }
1035 |
1036 | .chunk-meta {
1037 | font-size: var(--text-sm);
1038 | color: var(--neutral-500);
1039 | }
1040 |
1041 | .chunk-content {
1042 | color: var(--neutral-700);
1043 | line-height: 1.6;
1044 | margin-bottom: var(--space-3);
1045 | white-space: pre-wrap;
1046 | word-break: break-word;
1047 | max-height: 400px;
1048 | overflow-y: auto;
1049 | padding: var(--space-3);
1050 | background: white;
1051 | border-radius: var(--radius-sm);
1052 | }
1053 |
1054 | .chunk-tags {
1055 | display: flex;
1056 | flex-wrap: wrap;
1057 | gap: var(--space-2);
1058 | }
1059 |
1060 | /* Dark mode: Fix white backgrounds in document chunk modals */
1061 | body.dark-mode .chunk-item {
1062 | background: #1f2937 !important;
1063 | border-color: #374151 !important;
1064 | }
1065 |
1066 | body.dark-mode .chunk-content {
1067 | background: #111827 !important;
1068 | color: #d1d5db !important;
1069 | }
1070 |
1071 | body.dark-mode .chunk-number {
1072 | color: #60a5fa !important;
1073 | }
1074 |
1075 | body.dark-mode .chunk-meta {
1076 | color: #9ca3af !important;
1077 | }
1078 |
1079 | body.dark-mode .chunk-header {
1080 | color: #f3f4f6 !important;
1081 | }
1082 |
1083 | /* Dark mode: Language selector dropdown */
1084 | body.dark-mode .lang-dropdown-trigger {
1085 | background: #1f2937;
1086 | border-color: #374151;
1087 | color: #f3f4f6;
1088 | }
1089 |
1090 | body.dark-mode .lang-dropdown-trigger:hover {
1091 | background: #374151;
1092 | border-color: #4b5563;
1093 | }
1094 |
1095 | body.dark-mode .lang-dropdown-trigger:focus {
1096 | background: #374151;
1097 | }
1098 |
1099 | body.dark-mode .lang-dropdown-trigger[aria-expanded="true"] {
1100 | background: #374151;
1101 | border-color: #3b82f6;
1102 | }
1103 |
1104 | body.dark-mode .lang-icon {
1105 | color: #9ca3af;
1106 | }
1107 |
1108 | body.dark-mode .lang-dropdown-menu {
1109 | background: #1f2937;
1110 | border-color: #374151;
1111 | }
1112 |
1113 | body.dark-mode .lang-option {
1114 | color: #f3f4f6;
1115 | }
1116 |
1117 | body.dark-mode .lang-option:hover {
1118 | background: #374151;
1119 | }
1120 |
1121 | body.dark-mode .lang-option:focus {
1122 | background: #374151;
1123 | }
1124 |
1125 | body.dark-mode .lang-option.active {
1126 | background: rgba(59, 130, 246, 0.2);
1127 | color: #60a5fa;
1128 | }
1129 |
1130 | /* Search Layout */
1131 | .search-layout {
1132 | display: grid;
1133 | grid-template-columns: 280px 1fr;
1134 | gap: var(--space-8);
1135 | }
1136 |
1137 | .search-filters {
1138 | background: white;
1139 | padding: var(--space-6);
1140 | border-radius: var(--radius-xl);
1141 | box-shadow: var(--shadow-md);
1142 | height: fit-content;
1143 | }
1144 |
1145 | .filter-section {
1146 | margin-bottom: var(--space-5);
1147 | }
1148 |
1149 | .filter-section label {
1150 | display: block;
1151 | font-size: var(--text-sm);
1152 | font-weight: 500;
1153 | color: var(--neutral-700);
1154 | margin-bottom: var(--space-2);
1155 | }
1156 |
1157 | .filter-section input,
1158 | .filter-section select {
1159 | width: 100%;
1160 | padding: var(--space-3);
1161 | border: 1px solid var(--neutral-300);
1162 | border-radius: var(--radius-md);
1163 | font-size: var(--text-sm);
1164 | }
1165 |
1166 | .search-results {
1167 | background: white;
1168 | border-radius: var(--radius-xl);
1169 | box-shadow: var(--shadow-md);
1170 | overflow: hidden;
1171 | }
1172 |
1173 | .search-header {
1174 | padding: var(--space-6);
1175 | border-bottom: 1px solid var(--neutral-200);
1176 | display: flex;
1177 | justify-content: space-between;
1178 | align-items: center;
1179 | }
1180 |
1181 | .results-meta {
1182 | display: flex;
1183 | align-items: center;
1184 | gap: var(--space-4);
1185 | }
1186 |
1187 | .view-options {
1188 | display: flex;
1189 | gap: var(--space-1);
1190 | }
1191 |
1192 | .view-btn {
1193 | padding: var(--space-2) var(--space-3);
1194 | border: 1px solid var(--neutral-300);
1195 | background: white;
1196 | font-size: var(--text-sm);
1197 | cursor: pointer;
1198 | transition: var(--transition-base);
1199 | }
1200 |
1201 | .view-btn:first-child {
1202 | border-radius: var(--radius-md) 0 0 var(--radius-md);
1203 | }
1204 |
1205 | .view-btn:last-child {
1206 | border-radius: 0 var(--radius-md) var(--radius-md) 0;
1207 | border-left: none;
1208 | }
1209 |
1210 | .view-btn.active {
1211 | background: var(--primary);
1212 | color: white;
1213 | border-color: var(--primary);
1214 | }
1215 |
1216 | #searchResultsList {
1217 | padding: var(--space-6);
1218 | }
1219 |
1220 | /* Modal Components */
1221 | .modal-overlay {
1222 | position: fixed;
1223 | top: 0;
1224 | left: 0;
1225 | right: 0;
1226 | bottom: 0;
1227 | background: rgba(0, 0, 0, 0.5);
1228 | display: none;
1229 | align-items: center;
1230 | justify-content: center;
1231 | z-index: 1000;
1232 | padding: var(--space-4);
1233 | }
1234 |
1235 | .modal-overlay.active {
1236 | display: flex;
1237 | }
1238 |
1239 | .modal-content {
1240 | background: white;
1241 | border-radius: var(--radius-xl);
1242 | box-shadow: var(--shadow-xl);
1243 | max-width: 600px;
1244 | width: 100%;
1245 | max-height: 90vh;
1246 | overflow: hidden;
1247 | display: flex;
1248 | flex-direction: column;
1249 | }
1250 |
1251 | .modal-header {
1252 | padding: var(--space-6);
1253 | border-bottom: 1px solid var(--neutral-200);
1254 | display: flex;
1255 | justify-content: space-between;
1256 | align-items: center;
1257 | }
1258 |
1259 | .modal-header h3 {
1260 | margin: 0;
1261 | }
1262 |
1263 | .modal-close {
1264 | background: none;
1265 | border: none;
1266 | padding: var(--space-2);
1267 | cursor: pointer;
1268 | color: var(--neutral-500);
1269 | border-radius: var(--radius-md);
1270 | transition: var(--transition-base);
1271 | }
1272 |
1273 | .modal-close:hover {
1274 | background: var(--neutral-100);
1275 | color: var(--neutral-700);
1276 | }
1277 |
1278 | .modal-body {
1279 | padding: var(--space-6);
1280 | flex: 1;
1281 | overflow-y: auto;
1282 | }
1283 |
1284 | .modal-footer {
1285 | padding: var(--space-6);
1286 | border-top: 1px solid var(--neutral-200);
1287 | display: flex;
1288 | gap: var(--space-3);
1289 | justify-content: flex-end;
1290 | }
1291 |
1292 | /* Form Components */
1293 | .form-group {
1294 | margin-bottom: var(--space-5);
1295 | }
1296 |
1297 | .form-group label {
1298 | display: block;
1299 | font-size: var(--text-sm);
1300 | font-weight: 500;
1301 | color: var(--neutral-700);
1302 | margin-bottom: var(--space-2);
1303 | }
1304 |
1305 | .form-group input,
1306 | .form-group textarea,
1307 | .form-group select {
1308 | width: 100%;
1309 | padding: var(--space-3);
1310 | border: 1px solid var(--neutral-300);
1311 | border-radius: var(--radius-md);
1312 | font-size: var(--text-base);
1313 | transition: var(--transition-base);
1314 | }
1315 |
1316 | .form-group input:focus,
1317 | .form-group textarea:focus,
1318 | .form-group select:focus {
1319 | outline: none;
1320 | border-color: var(--primary);
1321 | box-shadow: 0 0 0 3px rgb(59 130 246 / 0.1);
1322 | }
1323 |
1324 | .form-group textarea {
1325 | resize: vertical;
1326 | min-height: 120px;
1327 | }
1328 |
1329 | /* System Info in Settings Modal */
1330 | .system-info {
1331 | display: flex;
1332 | flex-direction: column;
1333 | gap: var(--space-3);
1334 | }
1335 |
1336 | .info-row {
1337 | display: flex;
1338 | justify-content: space-between;
1339 | align-items: center;
1340 | padding: var(--space-2) 0;
1341 | border-bottom: 1px solid var(--neutral-100);
1342 | }
1343 |
1344 | .info-row:last-child {
1345 | border-bottom: none;
1346 | }
1347 |
1348 | .info-label {
1349 | font-size: var(--text-sm);
1350 | color: var(--neutral-600);
1351 | font-weight: 500;
1352 | }
1353 |
1354 | .info-value {
1355 | font-size: var(--text-sm);
1356 | color: var(--neutral-900);
1357 | font-weight: 600;
1358 | font-family: 'Monaco', 'Courier New', monospace;
1359 | }
1360 |
1361 | /* Loading and Status Components */
1362 | .loading-overlay {
1363 | position: fixed;
1364 | top: 0;
1365 | left: 0;
1366 | right: 0;
1367 | bottom: 0;
1368 | background: rgba(255, 255, 255, 0.9);
1369 | display: none;
1370 | align-items: center;
1371 | justify-content: center;
1372 | flex-direction: column;
1373 | gap: var(--space-4);
1374 | z-index: 2000;
1375 | }
1376 |
1377 | .loading-overlay.active {
1378 | display: flex;
1379 | }
1380 |
1381 | .loading-spinner {
1382 | width: 40px;
1383 | height: 40px;
1384 | border: 4px solid var(--neutral-200);
1385 | border-top: 4px solid var(--primary);
1386 | border-radius: 50%;
1387 | animation: spin 1s linear infinite;
1388 | }
1389 |
1390 | @keyframes spin {
1391 | 0% { transform: rotate(0deg); }
1392 | 100% { transform: rotate(360deg); }
1393 | }
1394 |
1395 | /* Toast Notifications */
1396 | .toast-container {
1397 | position: fixed;
1398 | top: var(--space-6);
1399 | right: var(--space-6);
1400 | z-index: 1500;
1401 | display: flex;
1402 | flex-direction: column;
1403 | gap: var(--space-3);
1404 | }
1405 |
1406 | .toast {
1407 | background: white;
1408 | border: 1px solid var(--neutral-200);
1409 | border-radius: var(--radius-lg);
1410 | padding: var(--space-4);
1411 | box-shadow: var(--shadow-lg);
1412 | min-width: 300px;
1413 | animation: slideIn 0.3s ease-out;
1414 | }
1415 |
1416 | .toast.success {
1417 | border-left: 4px solid var(--success);
1418 | }
1419 |
1420 | .toast.error {
1421 | border-left: 4px solid var(--error);
1422 | }
1423 |
1424 | .toast.warning {
1425 | border-left: 4px solid var(--warning);
1426 | }
1427 |
1428 | @keyframes slideIn {
1429 | from {
1430 | transform: translateX(100%);
1431 | opacity: 0;
1432 | }
1433 | to {
1434 | transform: translateX(0);
1435 | opacity: 1;
1436 | }
1437 | }
1438 |
1439 | /* Connection Status */
1440 | .connection-status {
1441 | position: fixed;
1442 | bottom: var(--space-6);
1443 | right: var(--space-6);
1444 | background: white;
1445 | border: 1px solid var(--neutral-200);
1446 | border-radius: var(--radius-lg);
1447 | padding: var(--space-3) var(--space-4);
1448 | box-shadow: var(--shadow-md);
1449 | display: flex;
1450 | align-items: center;
1451 | gap: var(--space-2);
1452 | font-size: var(--text-sm);
1453 | z-index: 100;
1454 | }
1455 |
1456 | .status-indicator {
1457 | width: 8px;
1458 | height: 8px;
1459 | border-radius: 50%;
1460 | background: var(--success);
1461 | }
1462 |
1463 | .status-indicator.disconnected {
1464 | background: var(--error);
1465 | }
1466 |
1467 | .status-indicator.connecting {
1468 | background: var(--warning);
1469 | animation: pulse 1.5s infinite;
1470 | }
1471 |
1472 | @keyframes pulse {
1473 | 0%, 100% { opacity: 1; }
1474 | 50% { opacity: 0.5; }
1475 | }
1476 |
1477 | /* Responsive Design */
1478 | @media (max-width: 768px) {
1479 | .header-content {
1480 | grid-template-columns: 1fr;
1481 | grid-template-rows: auto auto auto;
1482 | gap: var(--space-4);
1483 | text-align: center;
1484 | }
1485 |
1486 | .search-section {
1487 | max-width: none;
1488 | }
1489 |
1490 | .action-buttons {
1491 | justify-content: center;
1492 | }
1493 |
1494 | .btn-text {
1495 | display: none;
1496 | }
1497 |
1498 | .nav-container {
1499 | flex-wrap: wrap;
1500 | justify-content: center;
1501 | }
1502 |
1503 | .dashboard-grid {
1504 | grid-template-columns: 1fr;
1505 | grid-template-areas:
1506 | "welcome"
1507 | "recent"
1508 | "quick-actions";
1509 | }
1510 |
1511 | .search-layout {
1512 | grid-template-columns: 1fr;
1513 | gap: var(--space-4);
1514 | }
1515 |
1516 | .search-filters {
1517 | order: 2;
1518 | }
1519 |
1520 | .search-results {
1521 | order: 1;
1522 | }
1523 |
1524 | .memory-grid {
1525 | grid-template-columns: 1fr;
1526 | }
1527 |
1528 | .quick-stats {
1529 | grid-template-columns: 1fr;
1530 | gap: var(--space-4);
1531 | }
1532 | }
1533 |
1534 | @media (min-width: 769px) and (max-width: 1024px) {
1535 | .dashboard-grid {
1536 | grid-template-columns: 1fr 300px;
1537 | }
1538 |
1539 | .search-layout {
1540 | grid-template-columns: 250px 1fr;
1541 | }
1542 | }
1543 |
1544 | /* Utility Classes */
1545 | .hidden {
1546 | display: none !important;
1547 | }
1548 |
1549 | .sr-only {
1550 | position: absolute;
1551 | width: 1px;
1552 | height: 1px;
1553 | padding: 0;
1554 | margin: -1px;
1555 | overflow: hidden;
1556 | clip: rect(0, 0, 0, 0);
1557 | white-space: nowrap;
1558 | border: 0;
1559 | }
1560 |
1561 | /* Browse View - Tags Cloud */
1562 | .browse-content {
1563 | padding: var(--space-6);
1564 | }
1565 |
1566 | .tags-cloud {
1567 | display: flex;
1568 | flex-wrap: wrap;
1569 | gap: var(--space-3);
1570 | justify-content: center;
1571 | margin-bottom: var(--space-8);
1572 | padding: var(--space-6);
1573 | background: var(--neutral-50);
1574 | border-radius: var(--radius-lg);
1575 | }
1576 |
1577 | .tag-bubble {
1578 | display: inline-flex;
1579 | align-items: center;
1580 | gap: var(--space-2);
1581 | padding: var(--space-2) var(--space-4);
1582 | background: var(--neutral-100);
1583 | color: var(--neutral-700);
1584 | border: 1px solid var(--neutral-200);
1585 | border-radius: var(--radius-sm);
1586 | font-size: var(--text-sm);
1587 | font-weight: 500;
1588 | cursor: pointer;
1589 | transition: all 0.2s ease;
1590 | text-decoration: none;
1591 | }
1592 |
1593 | .tag-bubble:hover {
1594 | background: var(--neutral-200);
1595 | border-color: var(--neutral-300);
1596 | transform: translateY(-1px);
1597 | box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
1598 | }
1599 |
1600 | .tag-bubble .count {
1601 | background: var(--neutral-200);
1602 | color: var(--neutral-700);
1603 | padding: var(--space-1) var(--space-2);
1604 | border-radius: var(--radius-sm);
1605 | font-size: var(--text-xs);
1606 | font-weight: 600;
1607 | }
1608 |
1609 | .tagged-memories {
1610 | margin-top: var(--space-8);
1611 | }
1612 |
1613 | .tagged-memories .section-header {
1614 | display: flex;
1615 | justify-content: space-between;
1616 | align-items: center;
1617 | margin-bottom: var(--space-6);
1618 | padding-bottom: var(--space-4);
1619 | border-bottom: 2px solid var(--neutral-200);
1620 | }
1621 |
1622 | .tagged-memories h3 {
1623 | color: var(--neutral-800);
1624 | font-size: var(--text-xl);
1625 | }
1626 |
1627 | #selectedTagName {
1628 | color: var(--primary);
1629 | font-weight: 600;
1630 | }
1631 |
1632 | /* Memory Details Metadata Styles */
1633 | .memory-metadata {
1634 | margin-top: var(--space-4);
1635 | border: 1px solid var(--neutral-200);
1636 | border-radius: 8px;
1637 | overflow: hidden;
1638 | }
1639 |
1640 | .metadata-toggle {
1641 | background: var(--neutral-50);
1642 | padding: var(--space-3) var(--space-4);
1643 | margin: 0;
1644 | border-bottom: 1px solid var(--neutral-200);
1645 | font-size: var(--text-sm);
1646 | font-weight: 600;
1647 | color: var(--neutral-700);
1648 | transition: background-color 0.2s ease;
1649 | }
1650 |
1651 | .metadata-toggle:hover {
1652 | background: var(--neutral-100);
1653 | }
1654 |
1655 | .toggle-icon {
1656 | display: inline-block;
1657 | margin-right: var(--space-2);
1658 | transition: transform 0.2s ease;
1659 | font-size: 0.8em;
1660 | }
1661 |
1662 | .memory-metadata.expanded .toggle-icon {
1663 | transform: rotate(90deg);
1664 | }
1665 |
1666 | .metadata-content {
1667 | max-height: 0;
1668 | overflow: hidden;
1669 | transition: max-height 0.3s ease;
1670 | }
1671 |
1672 | .memory-metadata.expanded .metadata-content {
1673 | max-height: 500px;
1674 | padding: var(--space-4);
1675 | }
1676 |
1677 | .metadata-items {
1678 | display: flex;
1679 | flex-direction: column;
1680 | gap: var(--space-2);
1681 | }
1682 |
1683 | .metadata-item {
1684 | display: flex;
1685 | align-items: flex-start;
1686 | gap: var(--space-2);
1687 | padding: var(--space-2);
1688 | background: var(--neutral-50);
1689 | border-radius: 4px;
1690 | font-family: var(--font-mono);
1691 | font-size: var(--text-sm);
1692 | }
1693 |
1694 | .metadata-key {
1695 | font-weight: 600;
1696 | color: var(--neutral-700);
1697 | min-width: 120px;
1698 | flex-shrink: 0;
1699 | }
1700 |
1701 | .metadata-value {
1702 | color: var(--neutral-600);
1703 | word-break: break-word;
1704 | }
1705 |
1706 | .metadata-string {
1707 | color: var(--success);
1708 | }
1709 |
1710 | .metadata-number {
1711 | color: var(--primary);
1712 | }
1713 |
1714 | .metadata-boolean {
1715 | color: var(--warning);
1716 | }
1717 |
1718 | .metadata-array {
1719 | color: var(--secondary);
1720 | }
1721 |
1722 | .metadata-object {
1723 | color: var(--neutral-500);
1724 | }
1725 |
1726 | .metadata-empty {
1727 | color: var(--neutral-400);
1728 | font-style: italic;
1729 | padding: var(--space-4);
1730 | text-align: center;
1731 | }
1732 |
1733 | /* Memory Type Styling */
1734 | .memory-meta p {
1735 | margin-bottom: var(--space-2);
1736 | }
1737 |
1738 | .memory-meta strong {
1739 | color: var(--neutral-700);
1740 | margin-right: var(--space-2);
1741 | }
1742 |
1743 | /* Print Styles */
1744 | @media print {
1745 | .app-header,
1746 | .main-nav,
1747 | .modal-overlay,
1748 | .toast-container,
1749 | .connection-status {
1750 | display: none !important;
1751 | }
1752 |
1753 | .main-content {
1754 | max-width: none;
1755 | padding: 0;
1756 | }
1757 | }
1758 |
1759 | /* API Documentation Styles */
1760 | #apiDocsView {
1761 | padding: var(--space-6);
1762 | }
1763 |
1764 | .api-docs-header {
1765 | text-align: center;
1766 | margin-bottom: var(--space-8);
1767 | }
1768 |
1769 | .api-docs-header h2 {
1770 | color: var(--neutral-800);
1771 | margin-bottom: var(--space-3);
1772 | }
1773 |
1774 | .api-docs-header p {
1775 | color: var(--neutral-600);
1776 | font-size: var(--text-lg);
1777 | margin-bottom: var(--space-6);
1778 | }
1779 |
1780 | .api-docs-links {
1781 | display: flex;
1782 | gap: var(--space-4);
1783 | justify-content: center;
1784 | flex-wrap: wrap;
1785 | }
1786 |
1787 | .api-endpoints-grid {
1788 | display: grid;
1789 | grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
1790 | gap: var(--space-6);
1791 | max-width: 1200px;
1792 | margin: 0 auto;
1793 | }
1794 |
1795 | .endpoint-section {
1796 | background: var(--neutral-50);
1797 | border-radius: var(--radius-lg);
1798 | border: 1px solid var(--neutral-200);
1799 | overflow: hidden;
1800 | transition: border-color 0.2s ease, box-shadow 0.2s ease;
1801 | }
1802 |
1803 | .endpoint-section:hover {
1804 | border-color: var(--primary);
1805 | box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1);
1806 | }
1807 |
1808 | .endpoint-section h3 {
1809 | background: linear-gradient(135deg, var(--primary), var(--primary-dark));
1810 | color: white;
1811 | padding: var(--space-4);
1812 | margin: 0;
1813 | font-size: var(--text-lg);
1814 | }
1815 |
1816 | .endpoint-list {
1817 | padding: var(--space-4);
1818 | }
1819 |
1820 | .endpoint-item {
1821 | background: white;
1822 | border: 1px solid var(--neutral-200);
1823 | border-radius: var(--radius-md);
1824 | padding: var(--space-4);
1825 | margin-bottom: var(--space-3);
1826 | transition: border-color 0.2s ease, box-shadow 0.2s ease;
1827 | }
1828 |
1829 | .endpoint-item:last-child {
1830 | margin-bottom: 0;
1831 | }
1832 |
1833 | .endpoint-item:hover {
1834 | border-color: var(--primary);
1835 | box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1);
1836 | }
1837 |
1838 | .endpoint-item .method {
1839 | display: inline-block;
1840 | padding: var(--space-1) var(--space-3);
1841 | border-radius: var(--radius-sm);
1842 | font-size: var(--text-xs);
1843 | font-weight: 700;
1844 | text-transform: uppercase;
1845 | margin-right: var(--space-3);
1846 | min-width: 60px;
1847 | text-align: center;
1848 | }
1849 |
1850 | .endpoint-item .method.get {
1851 | background: var(--success);
1852 | color: white;
1853 | }
1854 |
1855 | .endpoint-item .method.post {
1856 | background: var(--primary);
1857 | color: white;
1858 | }
1859 |
1860 | .endpoint-item .method.delete {
1861 | background: var(--error);
1862 | color: white;
1863 | }
1864 |
1865 | .endpoint-item .path {
1866 | font-family: var(--font-mono);
1867 | font-weight: 600;
1868 | color: var(--neutral-700);
1869 | font-size: var(--text-sm);
1870 | }
1871 |
1872 | .endpoint-item .description {
1873 | display: block;
1874 | color: var(--neutral-600);
1875 | font-size: var(--text-sm);
1876 | margin-top: var(--space-2);
1877 | line-height: 1.5;
1878 | }
1879 |
1880 | /* Responsive adjustments for API docs */
1881 | @media (max-width: 768px) {
1882 | .api-endpoints-grid {
1883 | grid-template-columns: 1fr;
1884 | gap: var(--space-4);
1885 | }
1886 |
1887 | .api-docs-links {
1888 | flex-direction: column;
1889 | align-items: center;
1890 | }
1891 |
1892 | .api-docs-links .btn {
1893 | width: 100%;
1894 | max-width: 300px;
1895 | }
1896 | }
1897 |
1898 | /* ============================= */
1899 | /* Search Filter Enhancements */
1900 | /* ============================= */
1901 |
1902 | /* Tooltips */
1903 | .tooltip {
1904 | position: relative;
1905 | display: inline-flex;
1906 | align-items: center;
1907 | justify-content: center;
1908 | cursor: help;
1909 | color: var(--neutral-400);
1910 | font-size: var(--text-sm);
1911 | margin-left: var(--space-2);
1912 | transition: all 0.2s ease;
1913 | vertical-align: middle;
1914 | }
1915 |
1916 | .tooltip svg {
1917 | display: block;
1918 | transition: all 0.2s ease;
1919 | }
1920 |
1921 | .tooltip:hover {
1922 | color: var(--primary);
1923 | transform: scale(1.1);
1924 | }
1925 |
1926 | .tooltip:hover::after {
1927 | content: attr(title);
1928 | position: absolute;
1929 | bottom: 100%;
1930 | left: 50%;
1931 | transform: translateX(-50%);
1932 | background: var(--neutral-800);
1933 | color: white;
1934 | padding: var(--space-3) var(--space-4);
1935 | border-radius: var(--space-2);
1936 | font-size: var(--text-xs);
1937 | white-space: nowrap;
1938 | z-index: 1000;
1939 | box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
1940 | min-width: 150px;
1941 | max-width: 400px;
1942 | overflow: hidden;
1943 | text-overflow: ellipsis;
1944 | line-height: 1.4;
1945 | }
1946 |
1947 | .tooltip:hover::before {
1948 | content: '';
1949 | position: absolute;
1950 | bottom: calc(100% - 5px);
1951 | left: 50%;
1952 | transform: translateX(-50%);
1953 | border: 5px solid transparent;
1954 | border-top-color: var(--neutral-800);
1955 | z-index: 1001;
1956 | }
1957 |
1958 | /* Help Text */
1959 | .help-text {
1960 | display: block;
1961 | font-size: var(--text-xs);
1962 | color: var(--neutral-500);
1963 | margin-top: var(--space-1);
1964 | line-height: 1.4;
1965 | }
1966 |
1967 | /* Filter Actions */
1968 | .filter-actions {
1969 | display: flex;
1970 | gap: var(--space-3);
1971 | margin-top: var(--space-4);
1972 | padding-top: var(--space-4);
1973 | border-top: 1px solid var(--neutral-200);
1974 | }
1975 |
1976 | .filter-actions .btn {
1977 | flex: 1;
1978 | display: flex;
1979 | align-items: center;
1980 | justify-content: center;
1981 | gap: var(--space-2);
1982 | padding: var(--space-3) var(--space-4);
1983 | font-size: var(--text-sm);
1984 | font-weight: 500;
1985 | border-radius: var(--space-2);
1986 | border: none;
1987 | cursor: pointer;
1988 | transition: all 0.2s ease;
1989 | }
1990 |
1991 | .filter-actions .btn-primary {
1992 | background: var(--primary);
1993 | color: white;
1994 | }
1995 |
1996 | .filter-actions .btn-primary:hover {
1997 | background: var(--primary-dark);
1998 | transform: translateY(-1px);
1999 | }
2000 |
2001 | .filter-actions .btn-secondary {
2002 | background: var(--neutral-100);
2003 | color: var(--neutral-700);
2004 | border: 1px solid var(--neutral-300);
2005 | }
2006 |
2007 | .filter-actions .btn-secondary:hover {
2008 | background: var(--neutral-200);
2009 | }
2010 |
2011 | /* Active Filters Display */
2012 | .active-filters {
2013 | margin-top: var(--space-4);
2014 | padding: var(--space-4);
2015 | background: var(--neutral-50);
2016 | border-radius: var(--space-2);
2017 | border: 1px solid var(--neutral-200);
2018 | }
2019 |
2020 | .active-filters h4 {
2021 | font-size: var(--text-sm);
2022 | font-weight: 600;
2023 | color: var(--neutral-700);
2024 | margin-bottom: var(--space-3);
2025 | }
2026 |
2027 | .filter-pills {
2028 | display: flex;
2029 | flex-wrap: wrap;
2030 | gap: var(--space-2);
2031 | }
2032 |
2033 | .filter-pill {
2034 | display: inline-flex;
2035 | align-items: center;
2036 | gap: var(--space-2);
2037 | padding: var(--space-2) var(--space-3);
2038 | background: var(--primary);
2039 | color: white;
2040 | font-size: var(--text-xs);
2041 | border-radius: 9999px;
2042 | border: none;
2043 | cursor: pointer;
2044 | transition: all 0.2s ease;
2045 | }
2046 |
2047 | .filter-pill:hover {
2048 | background: var(--primary-dark);
2049 | }
2050 |
2051 | .filter-pill .remove-filter {
2052 | background: none;
2053 | border: none;
2054 | color: white;
2055 | cursor: pointer;
2056 | padding: 0;
2057 | width: 16px;
2058 | height: 16px;
2059 | border-radius: 50%;
2060 | display: flex;
2061 | align-items: center;
2062 | justify-content: center;
2063 | font-size: 12px;
2064 | line-height: 1;
2065 | }
2066 |
2067 | .filter-pill .remove-filter:hover {
2068 | background: rgba(255, 255, 255, 0.2);
2069 | }
2070 |
2071 | /* Enhanced filter section styling */
2072 | .filter-section {
2073 | margin-bottom: var(--space-4);
2074 | }
2075 |
2076 | .filter-section label {
2077 | display: flex;
2078 | align-items: center;
2079 | font-size: var(--text-sm);
2080 | font-weight: 500;
2081 | color: var(--neutral-700);
2082 | margin-bottom: var(--space-2);
2083 | }
2084 |
2085 | .filter-section input,
2086 | .filter-section select {
2087 | width: 100%;
2088 | padding: var(--space-3);
2089 | border: 1px solid var(--neutral-300);
2090 | border-radius: var(--space-2);
2091 | font-size: var(--text-sm);
2092 | transition: border-color 0.2s ease, box-shadow 0.2s ease;
2093 | }
2094 |
2095 | .filter-section input:focus,
2096 | .filter-section select:focus {
2097 | outline: none;
2098 | border-color: var(--primary);
2099 | box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
2100 | }
2101 |
2102 | /* Loading states */
2103 | .filter-actions .btn:disabled {
2104 | opacity: 0.6;
2105 | cursor: not-allowed;
2106 | transform: none;
2107 | }
2108 |
2109 | .filter-actions .btn.loading {
2110 | position: relative;
2111 | color: transparent;
2112 | }
2113 |
2114 | .filter-actions .btn.loading::after {
2115 | content: '';
2116 | position: absolute;
2117 | top: 50%;
2118 | left: 50%;
2119 | transform: translate(-50%, -50%);
2120 | width: 16px;
2121 | height: 16px;
2122 | border: 2px solid currentColor;
2123 | border-radius: 50%;
2124 | border-top-color: transparent;
2125 | animation: spin 1s linear infinite;
2126 | }
2127 |
2128 | @keyframes spin {
2129 | to {
2130 | transform: translate(-50%, -50%) rotate(360deg);
2131 | }
2132 | }
2133 |
2134 | /* Mobile responsiveness for filter improvements */
2135 | @media (max-width: 768px) {
2136 | .filter-actions {
2137 | flex-direction: column;
2138 | }
2139 |
2140 | .filter-pills {
2141 | gap: var(--space-1);
2142 | }
2143 |
2144 | .filter-pill {
2145 | font-size: 11px;
2146 | padding: var(--space-1) var(--space-2);
2147 | }
2148 |
2149 | .tooltip:hover::after {
2150 | max-width: 250px;
2151 | font-size: 11px;
2152 | }
2153 | }
2154 |
2155 | /* Filters Header with Toggle */
2156 | .filters-header {
2157 | display: flex;
2158 | justify-content: space-between;
2159 | align-items: center;
2160 | margin-bottom: var(--space-4);
2161 | padding-bottom: var(--space-3);
2162 | border-bottom: 1px solid var(--neutral-200);
2163 | }
2164 |
2165 | .filters-header h3 {
2166 | margin: 0;
2167 | display: flex;
2168 | align-items: center;
2169 | }
2170 |
2171 | .mode-toggle-compact {
2172 | display: flex;
2173 | align-items: center;
2174 | gap: var(--space-2);
2175 | }
2176 |
2177 | .mode-toggle-compact .toggle-switch {
2178 | width: 48px;
2179 | height: 24px;
2180 | }
2181 |
2182 | .mode-toggle-compact .slider:before {
2183 | height: 16px;
2184 | width: 16px;
2185 | left: 4px;
2186 | bottom: 4px;
2187 | }
2188 |
2189 | .mode-toggle-compact input:checked + .slider:before {
2190 | transform: translateX(24px);
2191 | }
2192 |
2193 | /* Search Mode Indicator */
2194 | .search-mode-indicator {
2195 | margin-bottom: var(--space-4);
2196 | padding: var(--space-3);
2197 | background: var(--neutral-50);
2198 | border-radius: var(--space-2);
2199 | border: 1px solid var(--neutral-200);
2200 | text-align: center;
2201 | }
2202 |
2203 | .mode-status {
2204 | font-size: var(--text-sm);
2205 | color: var(--neutral-600);
2206 | font-weight: 500;
2207 | }
2208 |
2209 | .mode-status #searchModeText {
2210 | color: var(--primary);
2211 | font-weight: 600;
2212 | }
2213 |
2214 | .toggle-switch {
2215 | position: relative;
2216 | display: inline-block;
2217 | width: 60px;
2218 | height: 28px;
2219 | }
2220 |
2221 | .toggle-switch input {
2222 | opacity: 0;
2223 | width: 0;
2224 | height: 0;
2225 | }
2226 |
2227 | .slider {
2228 | position: absolute;
2229 | cursor: pointer;
2230 | top: 0;
2231 | left: 0;
2232 | right: 0;
2233 | bottom: 0;
2234 | background-color: #666;
2235 | transition: .3s;
2236 | border-radius: 28px;
2237 | }
2238 |
2239 | .slider:before {
2240 | position: absolute;
2241 | content: "";
2242 | height: 20px;
2243 | width: 20px;
2244 | left: 4px;
2245 | bottom: 4px;
2246 | background-color: white;
2247 | transition: .3s;
2248 | border-radius: 50%;
2249 | }
2250 |
2251 | input:checked + .slider {
2252 | background-color: #2563eb; /* Cache bust: fixed 2025-10-03 */
2253 | }
2254 |
2255 | input:checked + .slider:before {
2256 | transform: translateX(32px);
2257 | background-color: white;
2258 | box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
2259 | }
2260 |
2261 | .mode-label {
2262 | display: flex;
2263 | align-items: center;
2264 | gap: var(--space-2);
2265 | font-weight: 600;
2266 | color: var(--neutral-700);
2267 | }
2268 |
2269 | #searchModeText {
2270 | min-width: 120px;
2271 | }
2272 |
2273 |
2274 | /* ============================================================
2275 | DARK MODE - VARIABLE REDEFINITION APPROACH
2276 | Appended 2025-10-04: Redefine color variables for dark theme
2277 | ============================================================ */
2278 |
2279 | /* Utility Classes */
2280 | .hidden {
2281 | display: none !important;
2282 | }
2283 |
2284 | .settings-section-heading {
2285 | margin-top: 0;
2286 | color: var(--neutral-600);
2287 | }
2288 |
2289 | .settings-divider {
2290 | margin: var(--space-6) 0;
2291 | border: none;
2292 | border-top: 1px solid var(--neutral-200);
2293 | }
2294 |
2295 | /* Dark Mode Theme - Redefine Color Variables */
2296 | body.dark-mode {
2297 | /* Invert neutral color scale for dark mode */
2298 | --neutral-50: #111827; /* Darkest background (was lightest) */
2299 | --neutral-100: #1f2937; /* Surface/card background */
2300 | --neutral-200: #374151; /* Borders/dividers */
2301 | --neutral-300: #4b5563; /* Subtle borders */
2302 | --neutral-400: #6b7280; /* Disabled text */
2303 | --neutral-500: #9ca3af; /* Muted text */
2304 | --neutral-600: #d1d5db; /* Body text (was dark, now light) */
2305 | --neutral-700: #e5e7eb; /* Strong text */
2306 | --neutral-800: #f3f4f6; /* Stronger text */
2307 | --neutral-900: #f9fafb; /* Headings/emphasis (was dark, now lightest) */
2308 |
2309 | /* Apply inverted variables to body */
2310 | background-color: var(--neutral-50);
2311 | color: var(--neutral-600);
2312 | }
2313 |
2314 | /* Specific overrides that can't use variables - Cache bust: v8.1.1 fix */
2315 | body.dark-mode .app-header,
2316 | body.dark-mode .main-nav,
2317 | body.dark-mode .sync-status-bar,
2318 | body.dark-mode .welcome-card,
2319 | body.dark-mode .recent-memories,
2320 | body.dark-mode .quick-actions,
2321 | body.dark-mode .memory-card,
2322 | body.dark-mode .action-card,
2323 | body.dark-mode .document-group,
2324 | body.dark-mode .search-filters,
2325 | body.dark-mode .search-results,
2326 | body.dark-mode .modal-content,
2327 | body.dark-mode .toast,
2328 | body.dark-mode .endpoint-item {
2329 | background: var(--neutral-100) !important; /* Dark card background */
2330 | }
2331 |
2332 | /* Dark mode sync status bar gradients */
2333 | body.dark-mode .sync-status-bar.synced {
2334 | background: linear-gradient(90deg, rgba(34, 197, 94, 0.15) 0%, rgba(34, 197, 94, 0) 100%) !important;
2335 | }
2336 |
2337 | body.dark-mode .sync-status-bar.syncing {
2338 | background: linear-gradient(90deg, rgba(59, 130, 246, 0.2) 0%, rgba(59, 130, 246, 0) 100%) !important;
2339 | }
2340 |
2341 | body.dark-mode .sync-status-bar.pending {
2342 | background: linear-gradient(90deg, rgba(251, 191, 36, 0.15) 0%, rgba(251, 191, 36, 0) 100%) !important;
2343 | }
2344 |
2345 | body.dark-mode .sync-status-bar.error {
2346 | background: linear-gradient(90deg, rgba(239, 68, 68, 0.15) 0%, rgba(239, 68, 68, 0) 100%) !important;
2347 | }
2348 |
2349 | body.dark-mode .memory-card,
2350 | body.dark-mode .welcome-card,
2351 | body.dark-mode .action-card,
2352 | body.dark-mode .modal-content,
2353 | body.dark-mode .search-filters,
2354 | body.dark-mode .search-results {
2355 | border-color: var(--neutral-200) !important;
2356 | }
2357 |
2358 | body.dark-mode .memory-card:hover,
2359 | body.dark-mode .action-card:hover {
2360 | box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
2361 | }
2362 |
2363 | body.dark-mode .nav-item:hover {
2364 | background: var(--neutral-200);
2365 | color: var(--primary);
2366 | }
2367 |
2368 | body.dark-mode .nav-item.active {
2369 | color: var(--primary);
2370 | border-bottom-color: var(--primary);
2371 | }
2372 |
2373 | /* Override specific element colors that need explicit dark mode values - Cache bust: v8.1.1 */
2374 | body.dark-mode .memory-content {
2375 | color: var(--neutral-900) !important; /* Brightest text for readability */
2376 | }
2377 |
2378 | body.dark-mode .memory-meta {
2379 | color: var(--neutral-600) !important; /* Lighter but still readable for metadata */
2380 | }
2381 |
2382 | body.dark-mode .memory-meta strong {
2383 | color: var(--neutral-900) !important; /* Bright labels for readability */
2384 | }
2385 |
2386 | /* Dark mode - reduce emoji brightness slightly */
2387 | body.dark-mode .time-icon {
2388 | opacity: 0.75;
2389 | filter: grayscale(10%); /* Subtle desaturation */
2390 | }
2391 |
2392 | body.dark-mode .time-icon:hover {
2393 | opacity: 0.9;
2394 | filter: grayscale(0%);
2395 | }
2396 |
2397 | body.dark-mode .action-card h3,
2398 | body.dark-mode .action-card p,
2399 | body.dark-mode .action-card span {
2400 | color: var(--neutral-900);
2401 | }
2402 |
2403 | /* Connection status indicator dark mode */
2404 | body.dark-mode .connection-status {
2405 | background: var(--neutral-100) !important;
2406 | border-color: var(--neutral-200) !important;
2407 | color: var(--neutral-900) !important;
2408 | }
2409 |
2410 | body.dark-mode .action-card svg {
2411 | color: var(--primary);
2412 | }
2413 |
2414 | body.dark-mode h4 {
2415 | color: var(--neutral-600);
2416 | }
2417 |
2418 | body.dark-mode .filter-chip.active {
2419 | background: var(--primary);
2420 | color: #ffffff;
2421 | border-color: var(--primary);
2422 | }
2423 |
2424 | body.dark-mode .toast.success {
2425 | border-left-color: var(--success);
2426 | }
2427 |
2428 | body.dark-mode .toast.error {
2429 | border-left-color: var(--error);
2430 | }
2431 |
2432 | body.dark-mode .toast.info {
2433 | border-left-color: var(--primary);
2434 | }
2435 |
2436 | /* Scrollbars (webkit browsers) */
2437 | body.dark-mode ::-webkit-scrollbar {
2438 | background: var(--neutral-50);
2439 | }
2440 |
2441 | body.dark-mode ::-webkit-scrollbar-thumb {
2442 | background: var(--neutral-200);
2443 | }
2444 |
2445 | body.dark-mode ::-webkit-scrollbar-thumb:hover {
2446 | background: var(--neutral-300);
2447 | }
2448 |
2449 | /* ===================================
2450 | Footer Styles
2451 | =================================== */
2452 |
2453 | .app-footer {
2454 | grid-area: footer;
2455 | margin-top: 4rem;
2456 | padding: 3rem 2rem 2rem;
2457 | background: var(--neutral-50);
2458 | border-top: 1px solid var(--neutral-100);
2459 | }
2460 |
2461 | .footer-content {
2462 | max-width: 1200px;
2463 | margin: 0 auto;
2464 | display: grid;
2465 | grid-template-columns: repeat(3, 1fr);
2466 | gap: 3rem;
2467 | }
2468 |
2469 | .footer-section h4 {
2470 | font-size: 0.875rem;
2471 | font-weight: 600;
2472 | text-transform: uppercase;
2473 | letter-spacing: 0.05em;
2474 | color: var(--neutral-900);
2475 | margin: 0 0 1rem 0;
2476 | }
2477 |
2478 | .footer-links {
2479 | list-style: none;
2480 | padding: 0;
2481 | margin: 0;
2482 | }
2483 |
2484 | .footer-links li {
2485 | margin-bottom: 0.75rem;
2486 | }
2487 |
2488 | .footer-links a {
2489 | color: var(--neutral-700);
2490 | text-decoration: none;
2491 | font-size: 0.875rem;
2492 | display: inline-flex;
2493 | align-items: center;
2494 | gap: 0.5rem;
2495 | transition: color 0.2s ease;
2496 | }
2497 |
2498 | .footer-links a:hover {
2499 | color: var(--blue-600);
2500 | }
2501 |
2502 | .footer-links svg {
2503 | flex-shrink: 0;
2504 | }
2505 |
2506 | .footer-description {
2507 | font-size: 0.875rem;
2508 | color: var(--neutral-600);
2509 | margin: 0 0 1.5rem 0;
2510 | line-height: 1.6;
2511 | }
2512 |
2513 | .footer-license {
2514 | display: flex;
2515 | align-items: center;
2516 | gap: 0.5rem;
2517 | margin-bottom: 0.75rem;
2518 | }
2519 |
2520 | .footer-license svg {
2521 | color: var(--neutral-500);
2522 | flex-shrink: 0;
2523 | }
2524 |
2525 | .footer-license a {
2526 | color: var(--neutral-700);
2527 | text-decoration: none;
2528 | font-size: 0.875rem;
2529 | transition: color 0.2s ease;
2530 | }
2531 |
2532 | .footer-license a:hover {
2533 | color: var(--blue-600);
2534 | }
2535 |
2536 | .footer-copyright {
2537 | font-size: 0.75rem;
2538 | color: var(--neutral-500);
2539 | }
2540 |
2541 | /* Dark mode footer styles */
2542 | body.dark-mode .app-footer {
2543 | background: var(--neutral-100) !important; /* Dark surface background */
2544 | border-top-color: var(--neutral-200) !important;
2545 | }
2546 |
2547 | body.dark-mode .footer-section h4 {
2548 | color: var(--neutral-900) !important; /* Light text for readability */
2549 | }
2550 |
2551 | body.dark-mode .footer-links a {
2552 | color: var(--neutral-700) !important; /* Medium-light link text */
2553 | }
2554 |
2555 | body.dark-mode .footer-links a:hover {
2556 | color: var(--blue-400);
2557 | }
2558 |
2559 | body.dark-mode .footer-description {
2560 | color: var(--neutral-600) !important; /* Readable body text */
2561 | }
2562 |
2563 | body.dark-mode .footer-license svg {
2564 | color: var(--neutral-500);
2565 | }
2566 |
2567 | body.dark-mode .footer-license a {
2568 | color: var(--neutral-700) !important; /* Match link colors */
2569 | }
2570 |
2571 | body.dark-mode .footer-license a:hover {
2572 | color: var(--blue-400);
2573 | }
2574 |
2575 | body.dark-mode .footer-copyright {
2576 | color: var(--neutral-500) !important; /* Muted text */
2577 | }
2578 |
2579 | /* ===================================
2580 | Documents View Styles
2581 | =================================== */
2582 |
2583 | .documents-layout {
2584 | display: flex;
2585 | flex-direction: column;
2586 | gap: var(--space-8);
2587 | padding: var(--space-6);
2588 | }
2589 |
2590 | .documents-section {
2591 | background: white;
2592 | border-radius: var(--radius-xl);
2593 | padding: var(--space-6);
2594 | box-shadow: var(--shadow-sm);
2595 | }
2596 |
2597 | .documents-section h2 {
2598 | margin: 0 0 var(--space-6) 0;
2599 | color: var(--neutral-900);
2600 | font-size: var(--text-xl);
2601 | font-weight: 600;
2602 | }
2603 |
2604 | /* Upload Area */
2605 | .upload-area {
2606 | margin-bottom: var(--space-6);
2607 | }
2608 |
2609 | .drop-zone {
2610 | border: 2px dashed var(--neutral-300);
2611 | border-radius: var(--radius-lg);
2612 | padding: var(--space-12);
2613 | text-align: center;
2614 | transition: var(--transition-base);
2615 | background: var(--neutral-50);
2616 | cursor: pointer;
2617 | }
2618 |
2619 | .drop-zone:hover,
2620 | .drop-zone.drag-over {
2621 | border-color: var(--primary);
2622 | background: rgba(59, 130, 246, 0.05);
2623 | }
2624 |
2625 | .drop-zone-content {
2626 | display: flex;
2627 | flex-direction: column;
2628 | align-items: center;
2629 | gap: var(--space-4);
2630 | }
2631 |
2632 | .drop-zone-content svg {
2633 | color: var(--neutral-400);
2634 | opacity: 0.7;
2635 | }
2636 |
2637 | .drop-zone-content h3 {
2638 | margin: 0;
2639 | color: var(--neutral-900);
2640 | font-size: var(--text-xl);
2641 | font-weight: 500;
2642 | }
2643 |
2644 | .drop-zone-content p {
2645 | margin: 0;
2646 | color: var(--neutral-600);
2647 | }
2648 |
2649 | .supported-formats {
2650 | font-size: var(--text-sm) !important;
2651 | color: var(--neutral-500) !important;
2652 | }
2653 |
2654 | .link-button {
2655 | background: none;
2656 | border: none;
2657 | color: var(--primary);
2658 | text-decoration: underline;
2659 | cursor: pointer;
2660 | font-size: inherit;
2661 | padding: 0;
2662 | }
2663 |
2664 | .link-button:hover {
2665 | color: var(--primary-dark);
2666 | }
2667 |
2668 | /* Upload Configuration */
2669 | .upload-config {
2670 | margin-bottom: var(--space-6);
2671 | }
2672 |
2673 | .config-section {
2674 | margin-bottom: var(--space-4);
2675 | }
2676 |
2677 | .config-section label {
2678 | display: block;
2679 | margin-bottom: var(--space-2);
2680 | font-weight: 500;
2681 | color: var(--neutral-700);
2682 | font-size: var(--text-sm);
2683 | }
2684 |
2685 | .config-row {
2686 | display: grid;
2687 | grid-template-columns: 1fr 1fr;
2688 | gap: var(--space-6);
2689 | margin-bottom: var(--space-4);
2690 | }
2691 |
2692 | .form-control {
2693 | width: 100%;
2694 | padding: var(--space-3);
2695 | border: 1px solid var(--neutral-300);
2696 | border-radius: var(--radius-md);
2697 | font-size: var(--text-base);
2698 | transition: var(--transition-fast);
2699 | }
2700 |
2701 | .form-control:focus {
2702 | outline: none;
2703 | border-color: var(--primary);
2704 | box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
2705 | }
2706 |
2707 | .form-control[type="range"] {
2708 | cursor: pointer;
2709 | }
2710 |
2711 | /* Processing Mode Toggle */
2712 | .processing-mode-toggle {
2713 | display: flex;
2714 | gap: var(--space-2);
2715 | margin-bottom: var(--space-2);
2716 | }
2717 |
2718 | .mode-btn {
2719 | display: flex;
2720 | align-items: center;
2721 | gap: var(--space-2);
2722 | padding: var(--space-3) var(--space-4);
2723 | border: 1px solid var(--neutral-300);
2724 | border-radius: var(--radius-md);
2725 | background: var(--neutral-50);
2726 | color: var(--neutral-700);
2727 | font-size: var(--text-sm);
2728 | font-weight: 500;
2729 | cursor: pointer;
2730 | transition: var(--transition-fast);
2731 | flex: 1;
2732 | justify-content: center;
2733 | }
2734 |
2735 | .mode-btn:hover {
2736 | background: var(--neutral-100);
2737 | border-color: var(--neutral-400);
2738 | }
2739 |
2740 | .mode-btn.active {
2741 | background: var(--primary);
2742 | border-color: var(--primary);
2743 | color: white;
2744 | }
2745 |
2746 | .mode-btn.active:hover {
2747 | background: var(--primary-dark);
2748 | }
2749 |
2750 | .mode-description {
2751 | font-size: var(--text-xs);
2752 | color: var(--neutral-500);
2753 | margin-top: var(--space-1);
2754 | }
2755 |
2756 | .form-help {
2757 | display: block;
2758 | font-size: var(--text-xs);
2759 | color: var(--neutral-500);
2760 | margin-top: var(--space-1);
2761 | }
2762 |
2763 | /* Upload Actions */
2764 | .upload-actions {
2765 | text-align: center;
2766 | margin-bottom: var(--space-8);
2767 | }
2768 |
2769 | /* Upload History */
2770 | .upload-history {
2771 | min-height: 200px;
2772 | display: flex;
2773 | flex-direction: column;
2774 | gap: var(--space-4);
2775 | }
2776 |
2777 | .upload-item {
2778 | display: flex;
2779 | align-items: center;
2780 | justify-content: space-between;
2781 | padding: var(--space-4);
2782 | border: 1px solid var(--neutral-200);
2783 | border-radius: var(--radius-md);
2784 | background: var(--neutral-50);
2785 | }
2786 |
2787 | .upload-item.success {
2788 | border-color: var(--success);
2789 | background: rgba(16, 185, 129, 0.05);
2790 | }
2791 |
2792 | .upload-item.error {
2793 | border-color: var(--error);
2794 | background: rgba(239, 68, 68, 0.05);
2795 | }
2796 |
2797 | .upload-item.processing {
2798 | border-color: var(--warning);
2799 | background: rgba(245, 158, 11, 0.05);
2800 | }
2801 |
2802 | .upload-info {
2803 | flex: 1;
2804 | }
2805 |
2806 | .upload-filename {
2807 | font-weight: 500;
2808 | color: var(--neutral-900);
2809 | margin-bottom: var(--space-1);
2810 | }
2811 |
2812 | .upload-meta {
2813 | font-size: var(--text-sm);
2814 | color: var(--neutral-600);
2815 | }
2816 |
2817 | .upload-status {
2818 | display: flex;
2819 | align-items: center;
2820 | gap: var(--space-2);
2821 | font-size: var(--text-sm);
2822 | font-weight: 500;
2823 | }
2824 |
2825 | .upload-status.success {
2826 | color: var(--success);
2827 | }
2828 |
2829 | .upload-status.error {
2830 | color: var(--error);
2831 | }
2832 |
2833 | .upload-status.processing {
2834 | color: var(--warning);
2835 | }
2836 |
2837 | /* Progress Bar */
2838 | .progress-bar {
2839 | width: 100%;
2840 | height: 8px;
2841 | background: var(--neutral-200);
2842 | border-radius: var(--radius-sm);
2843 | overflow: hidden;
2844 | margin-top: var(--space-2);
2845 | }
2846 |
2847 | .progress-fill {
2848 | height: 100%;
2849 | background: var(--primary);
2850 | border-radius: var(--radius-sm);
2851 | transition: width var(--transition-base);
2852 | }
2853 |
2854 | /* Dark mode for documents */
2855 | body.dark-mode .documents-section {
2856 | background: var(--neutral-100);
2857 | border-color: var(--neutral-200);
2858 | }
2859 |
2860 | body.dark-mode .drop-zone {
2861 | border-color: var(--neutral-200);
2862 | background: var(--neutral-100);
2863 | }
2864 |
2865 | body.dark-mode .drop-zone:hover,
2866 | body.dark-mode .drop-zone.drag-over {
2867 | border-color: var(--primary);
2868 | background: rgba(59, 130, 246, 0.1);
2869 | }
2870 |
2871 | body.dark-mode .drop-zone-content h3 {
2872 | color: var(--neutral-900);
2873 | }
2874 |
2875 | body.dark-mode .drop-zone-content p {
2876 | color: var(--neutral-700);
2877 | }
2878 |
2879 | body.dark-mode .upload-item {
2880 | background: var(--neutral-200);
2881 | border-color: var(--neutral-300);
2882 | }
2883 |
2884 | body.dark-mode .upload-item.success {
2885 | border-color: var(--success);
2886 | background: rgba(16, 185, 129, 0.1);
2887 | }
2888 |
2889 | body.dark-mode .upload-item.error {
2890 | border-color: var(--error);
2891 | background: rgba(16, 185, 129, 0.1);
2892 | }
2893 |
2894 | body.dark-mode .upload-item.processing {
2895 | border-color: var(--warning);
2896 | background: rgba(245, 158, 11, 0.1);
2897 | }
2898 |
2899 | body.dark-mode .upload-filename {
2900 | color: var(--neutral-900);
2901 | }
2902 |
2903 | body.dark-mode .upload-meta {
2904 | color: var(--neutral-600);
2905 | }
2906 |
2907 | /* Dark mode - Chunking Help Section */
2908 | body.dark-mode .chunking-help {
2909 | background: var(--neutral-100) !important;
2910 | border-color: var(--neutral-200) !important;
2911 | }
2912 |
2913 | body.dark-mode .help-header {
2914 | border-bottom-color: var(--neutral-200) !important;
2915 | color: var(--neutral-900) !important;
2916 | }
2917 |
2918 | body.dark-mode .help-content {
2919 | color: var(--neutral-700) !important;
2920 | }
2921 |
2922 | body.dark-mode .help-note {
2923 | background: rgba(245, 158, 11, 0.15) !important;
2924 | border-left-color: var(--warning) !important;
2925 | color: var(--neutral-900) !important;
2926 | }
2927 |
2928 | body.dark-mode .help-option {
2929 | background: var(--neutral-50) !important;
2930 | border-color: var(--neutral-200) !important;
2931 | }
2932 |
2933 | body.dark-mode .help-option:hover {
2934 | border-color: var(--primary) !important;
2935 | box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2) !important;
2936 | }
2937 |
2938 | body.dark-mode .help-option-header strong {
2939 | color: var(--neutral-900) !important;
2940 | }
2941 |
2942 | body.dark-mode .help-option p {
2943 | color: var(--neutral-700) !important;
2944 | }
2945 |
2946 | body.dark-mode .help-option p strong {
2947 | color: var(--neutral-900) !important;
2948 | }
2949 |
2950 | body.dark-mode .help-tips {
2951 | background: rgba(59, 130, 246, 0.15) !important;
2952 | border-left-color: var(--primary) !important;
2953 | }
2954 |
2955 | body.dark-mode .help-tips strong {
2956 | color: var(--neutral-900) !important;
2957 | }
2958 |
2959 | body.dark-mode .help-tips li {
2960 | color: var(--neutral-700) !important;
2961 | }
2962 |
2963 | body.dark-mode .help-tips li strong {
2964 | color: var(--primary) !important;
2965 | }
2966 |
2967 | body.dark-mode .close-help {
2968 | color: var(--neutral-600) !important;
2969 | }
2970 |
2971 | body.dark-mode .close-help:hover {
2972 | color: var(--error) !important;
2973 | }
2974 |
2975 | /* Dark mode - Overlap diagram */
2976 | body.dark-mode .help-example {
2977 | background: var(--neutral-50) !important;
2978 | border-color: var(--neutral-200) !important;
2979 | }
2980 |
2981 | body.dark-mode .help-example strong {
2982 | color: var(--neutral-900) !important;
2983 | }
2984 |
2985 | body.dark-mode .chunk-demo {
2986 | box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
2987 | }
2988 |
2989 | body.dark-mode .chunk-part.unique {
2990 | background: linear-gradient(135deg, rgba(59, 130, 246, 0.3) 0%, rgba(59, 130, 246, 0.2) 100%) !important;
2991 | color: var(--blue-300) !important;
2992 | border-color: var(--primary) !important;
2993 | }
2994 |
2995 | body.dark-mode .chunk-part.overlap {
2996 | background: linear-gradient(135deg, rgba(245, 158, 11, 0.3) 0%, rgba(245, 158, 11, 0.2) 100%) !important;
2997 | color: #fbbf24 !important;
2998 | border-color: var(--warning) !important;
2999 | }
3000 |
3001 | body.dark-mode .chunk-demo:hover .chunk-part.overlap {
3002 | background: linear-gradient(135deg, rgba(245, 158, 11, 0.4) 0%, rgba(245, 158, 11, 0.3) 100%) !important;
3003 | }
3004 |
3005 | /* Responsive */
3006 | @media (max-width: 768px) {
3007 | .documents-layout {
3008 | padding: var(--space-4);
3009 | gap: var(--space-6);
3010 | }
3011 |
3012 | .documents-section {
3013 | padding: var(--space-4);
3014 | }
3015 |
3016 | .drop-zone {
3017 | padding: var(--space-8);
3018 | }
3019 |
3020 | .config-row {
3021 | grid-template-columns: 1fr;
3022 | gap: var(--space-4);
3023 | }
3024 |
3025 | .upload-item {
3026 | flex-direction: column;
3027 | align-items: flex-start;
3028 | gap: var(--space-2);
3029 | }
3030 | }
3031 |
3032 | /* Responsive footer */
3033 | @media (max-width: 768px) {
3034 | .footer-content {
3035 | grid-template-columns: 1fr;
3036 | gap: 2rem;
3037 | }
3038 |
3039 | .app-footer {
3040 | padding: 2rem 1rem 1.5rem;
3041 | margin-top: 3rem;
3042 | }
3043 | }
3044 |
3045 | /* Manage View Styles */
3046 | .manage-layout {
3047 | display: flex;
3048 | flex-direction: column;
3049 | gap: var(--space-8);
3050 | padding: var(--space-6);
3051 | }
3052 |
3053 | .manage-section {
3054 | background: white;
3055 | border-radius: var(--radius-xl);
3056 | padding: var(--space-6);
3057 | box-shadow: var(--shadow-sm);
3058 | }
3059 |
3060 | .manage-section h2 {
3061 | margin: 0 0 var(--space-6) 0;
3062 | color: var(--neutral-900);
3063 | font-size: var(--text-xl);
3064 | font-weight: 600;
3065 | }
3066 |
3067 | .bulk-ops-grid {
3068 | display: grid;
3069 | grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
3070 | gap: var(--space-6);
3071 | }
3072 |
3073 | .bulk-op-card {
3074 | background: var(--neutral-50);
3075 | border: 1px solid var(--neutral-200);
3076 | border-radius: var(--radius-lg);
3077 | padding: var(--space-5);
3078 | transition: var(--transition-base);
3079 | }
3080 |
3081 | .bulk-op-card:hover {
3082 | border-color: var(--primary);
3083 | box-shadow: var(--shadow-md);
3084 | }
3085 |
3086 | .bulk-op-card h3 {
3087 | margin: 0 0 var(--space-2) 0;
3088 | color: var(--neutral-900);
3089 | font-size: var(--text-lg);
3090 | font-weight: 600;
3091 | }
3092 |
3093 | .bulk-op-card p {
3094 | margin: 0 0 var(--space-4) 0;
3095 | color: var(--neutral-600);
3096 | font-size: var(--text-sm);
3097 | }
3098 |
3099 | .op-controls {
3100 | display: flex;
3101 | gap: var(--space-3);
3102 | align-items: center;
3103 | }
3104 |
3105 | .op-controls .form-control {
3106 | min-width: 200px;
3107 | flex: 1;
3108 | }
3109 |
3110 | .system-ops-grid {
3111 | display: grid;
3112 | grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
3113 | gap: var(--space-4);
3114 | }
3115 |
3116 | .system-op-card {
3117 | background: var(--neutral-50);
3118 | border: 1px solid var(--neutral-200);
3119 | border-radius: var(--radius-lg);
3120 | padding: var(--space-4);
3121 | text-align: center;
3122 | }
3123 |
3124 | .system-op-card h3 {
3125 | margin: 0 0 var(--space-2) 0;
3126 | font-size: var(--text-base);
3127 | font-weight: 600;
3128 | }
3129 |
3130 | .system-op-card p {
3131 | margin: 0 0 var(--space-4) 0;
3132 | font-size: var(--text-sm);
3133 | color: var(--neutral-600);
3134 | }
3135 |
3136 | /* Analytics View Styles */
3137 | .analytics-layout {
3138 | display: flex;
3139 | flex-direction: column;
3140 | gap: var(--space-8);
3141 | padding: var(--space-6);
3142 | }
3143 |
3144 | .analytics-section {
3145 | background: white;
3146 | border-radius: var(--radius-xl);
3147 | padding: var(--space-6);
3148 | box-shadow: var(--shadow-sm);
3149 | }
3150 |
3151 | .analytics-section h2 {
3152 | margin: 0 0 var(--space-6) 0;
3153 | color: var(--neutral-900);
3154 | font-size: var(--text-xl);
3155 | font-weight: 600;
3156 | }
3157 |
3158 | .metrics-grid {
3159 | display: grid;
3160 | grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
3161 | gap: var(--space-4);
3162 | }
3163 |
3164 | .metric-card {
3165 | background: linear-gradient(135deg, var(--primary), var(--primary-dark));
3166 | color: white;
3167 | border-radius: var(--radius-lg);
3168 | padding: var(--space-5);
3169 | text-align: center;
3170 | box-shadow: var(--shadow-md);
3171 | }
3172 |
3173 | .metric-value {
3174 | font-size: var(--text-3xl);
3175 | font-weight: 700;
3176 | margin-bottom: var(--space-2);
3177 | font-variant-numeric: tabular-nums;
3178 | }
3179 |
3180 | .metric-label {
3181 | font-size: var(--text-sm);
3182 | opacity: 0.9;
3183 | font-weight: 500;
3184 | }
3185 |
3186 | .charts-grid {
3187 | display: grid;
3188 | grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
3189 | gap: var(--space-6);
3190 | }
3191 |
3192 | .chart-card {
3193 | background: var(--neutral-50);
3194 | border: 1px solid var(--neutral-200);
3195 | border-radius: var(--radius-lg);
3196 | padding: var(--space-5);
3197 | }
3198 |
3199 | .chart-card h3 {
3200 | margin: 0 0 var(--space-4) 0;
3201 | color: var(--neutral-900);
3202 | font-size: var(--text-lg);
3203 | font-weight: 600;
3204 | }
3205 |
3206 | .chart-controls {
3207 | margin-bottom: var(--space-4);
3208 | }
3209 |
3210 | .chart-container {
3211 | min-height: 200px;
3212 | display: flex;
3213 | align-items: center;
3214 | justify-content: center;
3215 | flex-direction: column;
3216 | gap: var(--space-3);
3217 | color: var(--neutral-500);
3218 | }
3219 |
3220 | .reports-grid {
3221 | display: grid;
3222 | grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
3223 | gap: var(--space-6);
3224 | }
3225 |
3226 | .report-card {
3227 | background: var(--neutral-50);
3228 | border: 1px solid var(--neutral-200);
3229 | border-radius: var(--radius-lg);
3230 | padding: var(--space-5);
3231 | }
3232 |
3233 | .report-card h3 {
3234 | margin: 0 0 var(--space-4) 0;
3235 | color: var(--neutral-900);
3236 | font-size: var(--text-lg);
3237 | font-weight: 600;
3238 | }
3239 |
3240 | .report-content {
3241 | color: var(--neutral-700);
3242 | }
3243 |
3244 | /* Tag Management Styles */
3245 | .tag-stats-table {
3246 | width: 100%;
3247 | border-collapse: collapse;
3248 | margin-top: var(--space-4);
3249 | }
3250 |
3251 | .tag-stats-table th,
3252 | .tag-stats-table td {
3253 | padding: var(--space-3);
3254 | text-align: left;
3255 | border-bottom: 1px solid var(--neutral-200);
3256 | }
3257 |
3258 | .tag-stats-table th {
3259 | background: var(--neutral-100);
3260 | font-weight: 600;
3261 | color: var(--neutral-900);
3262 | }
3263 |
3264 | .tag-stats-table .tag-name {
3265 | font-weight: 500;
3266 | color: var(--primary);
3267 | }
3268 |
3269 | .tag-stats-table .tag-count {
3270 | font-weight: 600;
3271 | color: var(--neutral-900);
3272 | }
3273 |
3274 | .tag-actions {
3275 | display: flex;
3276 | gap: var(--space-2);
3277 | }
3278 |
3279 | .tag-action-btn {
3280 | padding: var(--space-1) var(--space-2);
3281 | border: 1px solid var(--neutral-300);
3282 | border-radius: var(--radius-sm);
3283 | background: var(--neutral-50);
3284 | color: var(--neutral-700);
3285 | font-size: var(--text-xs);
3286 | cursor: pointer;
3287 | transition: var(--transition-base);
3288 | }
3289 |
3290 | .tag-action-btn:hover {
3291 | background: var(--neutral-200);
3292 | border-color: var(--neutral-400);
3293 | }
3294 |
3295 | .tag-action-btn.danger:hover {
3296 | background: var(--error);
3297 | color: white;
3298 | border-color: var(--error);
3299 | }
3300 |
3301 | /* Dark mode support for Manage/Analytics - Fixed v8.5.5 */
3302 | body.dark-mode .manage-section,
3303 | body.dark-mode .analytics-section {
3304 | background: var(--neutral-100) !important; /* Dark card background */
3305 | color: var(--neutral-900) !important; /* Light text */
3306 | }
3307 |
3308 | body.dark-mode .manage-section h2,
3309 | body.dark-mode .analytics-section h2 {
3310 | color: var(--neutral-900) !important;
3311 | }
3312 |
3313 | body.dark-mode .bulk-op-card,
3314 | body.dark-mode .system-op-card,
3315 | body.dark-mode .chart-card,
3316 | body.dark-mode .report-card {
3317 | background: var(--neutral-200) !important; /* Lighter nested card background for contrast */
3318 | border-color: var(--neutral-300) !important;
3319 | color: var(--neutral-900) !important;
3320 | }
3321 |
3322 | body.dark-mode .bulk-op-card h3,
3323 | body.dark-mode .system-op-card h3,
3324 | body.dark-mode .chart-card h3,
3325 | body.dark-mode .report-card h3 {
3326 | color: var(--neutral-900) !important;
3327 | }
3328 |
3329 | body.dark-mode .bulk-op-card p,
3330 | body.dark-mode .system-op-card p,
3331 | body.dark-mode .chart-card p,
3332 | body.dark-mode .report-card p {
3333 | color: var(--neutral-600) !important;
3334 | }
3335 |
3336 | /* Activity Heatmap Styles */
3337 | .activity-heatmap {
3338 | font-family: var(--font-mono);
3339 | }
3340 |
3341 | .heatmap-stats {
3342 | display: flex;
3343 | gap: var(--space-6);
3344 | margin-bottom: var(--space-4);
3345 | font-size: var(--text-sm);
3346 | color: var(--neutral-600);
3347 | }
3348 |
3349 | .heatmap-month {
3350 | margin-bottom: var(--space-4);
3351 | }
3352 |
3353 | .month-label {
3354 | font-size: var(--text-sm);
3355 | font-weight: 600;
3356 | color: var(--neutral-700);
3357 | margin-bottom: var(--space-2);
3358 | }
3359 |
3360 | .month-grid {
3361 | display: grid;
3362 | grid-template-columns: repeat(7, 1fr);
3363 | gap: 1px;
3364 | background: var(--neutral-200);
3365 | border-radius: var(--radius-sm);
3366 | overflow: hidden;
3367 | }
3368 |
3369 | .heatmap-cell {
3370 | aspect-ratio: 1;
3371 | background: var(--neutral-100);
3372 | border: 1px solid var(--neutral-200);
3373 | cursor: pointer;
3374 | transition: var(--transition-base);
3375 | }
3376 |
3377 | .heatmap-cell:hover {
3378 | opacity: 0.8;
3379 | }
3380 |
3381 | .heatmap-cell.empty {
3382 | background: transparent;
3383 | border: none;
3384 | }
3385 |
3386 | .heatmap-cell.level-0 {
3387 | background: var(--neutral-100);
3388 | }
3389 |
3390 | .heatmap-cell.level-1 {
3391 | background: #9be9a8;
3392 | }
3393 |
3394 | .heatmap-cell.level-2 {
3395 | background: #40c463;
3396 | }
3397 |
3398 | .heatmap-cell.level-3 {
3399 | background: #30a14e;
3400 | }
3401 |
3402 | .heatmap-cell.level-4 {
3403 | background: #216e39;
3404 | }
3405 |
3406 | .heatmap-legend {
3407 | display: flex;
3408 | align-items: center;
3409 | gap: var(--space-2);
3410 | margin-top: var(--space-4);
3411 | font-size: var(--text-sm);
3412 | color: var(--neutral-600);
3413 | }
3414 |
3415 | .legend-cell {
3416 | width: 12px;
3417 | height: 12px;
3418 | border-radius: 2px;
3419 | }
3420 |
3421 | /* Enhanced Tags Report */
3422 | .enhanced-tags-report .report-period {
3423 | font-size: var(--text-sm);
3424 | color: var(--neutral-600);
3425 | margin-bottom: var(--space-3);
3426 | padding-bottom: var(--space-2);
3427 | border-bottom: 1px solid var(--neutral-200);
3428 | }
3429 |
3430 | .enhanced-tags-report .tags-list {
3431 | list-style: none;
3432 | padding: 0;
3433 | }
3434 |
3435 | .enhanced-tags-report .tags-list li {
3436 | padding: var(--space-3);
3437 | border: 1px solid var(--neutral-200);
3438 | border-radius: var(--radius-sm);
3439 | margin-bottom: var(--space-2);
3440 | background: white;
3441 | }
3442 |
3443 | .enhanced-tags-report .tag-header {
3444 | display: flex;
3445 | justify-content: space-between;
3446 | align-items: center;
3447 | margin-bottom: var(--space-2);
3448 | }
3449 |
3450 | .enhanced-tags-report .tag-count {
3451 | font-weight: 600;
3452 | color: var(--primary);
3453 | }
3454 |
3455 | .enhanced-tags-report .tag-cooccurrence {
3456 | font-size: var(--text-sm);
3457 | color: var(--neutral-600);
3458 | font-style: italic;
3459 | }
3460 |
3461 | /* Activity Breakdown */
3462 | .activity-breakdown .activity-summary {
3463 | display: flex;
3464 | gap: var(--space-6);
3465 | margin-bottom: var(--space-4);
3466 | flex-wrap: wrap;
3467 | }
3468 |
3469 | .activity-breakdown .activity-stat {
3470 | font-size: var(--text-sm);
3471 | color: var(--neutral-600);
3472 | }
3473 |
3474 | .activity-breakdown .peak-times {
3475 | margin-bottom: var(--space-4);
3476 | font-size: var(--text-sm);
3477 | color: var(--neutral-700);
3478 | }
3479 |
3480 | .activity-breakdown .activity-chart {
3481 | margin-top: var(--space-4);
3482 | }
3483 |
3484 | .activity-bar-row {
3485 | display: flex;
3486 | align-items: center;
3487 | gap: var(--space-3);
3488 | margin-bottom: var(--space-2);
3489 | padding: var(--space-2);
3490 | background: var(--neutral-50);
3491 | border-radius: var(--radius-sm);
3492 | }
3493 |
3494 | .activity-label {
3495 | min-width: 60px;
3496 | font-size: var(--text-sm);
3497 | font-weight: 500;
3498 | color: var(--neutral-700);
3499 | }
3500 |
3501 | .activity-bar {
3502 | flex: 1;
3503 | height: 8px;
3504 | background: linear-gradient(90deg, var(--primary), var(--primary-dark));
3505 | border-radius: 4px;
3506 | transition: var(--transition-base);
3507 | }
3508 |
3509 | .activity-count {
3510 | min-width: 30px;
3511 | text-align: right;
3512 | font-size: var(--text-sm);
3513 | font-weight: 600;
3514 | color: var(--primary);
3515 | }
3516 |
3517 | /* Storage Report */
3518 | .storage-report .storage-summary {
3519 | display: flex;
3520 | gap: var(--space-6);
3521 | margin-bottom: var(--space-4);
3522 | flex-wrap: wrap;
3523 | }
3524 |
3525 | .storage-report .storage-stat {
3526 | font-size: var(--text-sm);
3527 | color: var(--neutral-600);
3528 | }
3529 |
3530 | .storage-report h4 {
3531 | margin: var(--space-4) 0 var(--space-2) 0;
3532 | color: var(--neutral-900);
3533 | font-size: var(--text-lg);
3534 | font-weight: 600;
3535 | }
3536 |
3537 | .storage-report .largest-memories {
3538 | list-style: none;
3539 | padding: 0;
3540 | }
3541 |
3542 | .storage-report .largest-memories li {
3543 | padding: var(--space-3);
3544 | border: 1px solid var(--neutral-200);
3545 | border-radius: var(--radius-sm);
3546 | margin-bottom: var(--space-2);
3547 | background: white;
3548 | }
3549 |
3550 | .storage-report .memory-size {
3551 | font-weight: 600;
3552 | color: var(--primary);
3553 | margin-bottom: var(--space-1);
3554 | }
3555 |
3556 | .storage-report .memory-preview {
3557 | font-size: var(--text-sm);
3558 | color: var(--neutral-700);
3559 | margin-bottom: var(--space-1);
3560 | word-break: break-word;
3561 | }
3562 |
3563 | .storage-report .memory-meta {
3564 | font-size: var(--text-xs);
3565 | color: var(--neutral-500);
3566 | }
3567 |
3568 | /* Dark mode support for new analytics features */
3569 | body.dark-mode .heatmap-cell.level-0 {
3570 | background: var(--neutral-200);
3571 | }
3572 |
3573 | body.dark-mode .heatmap-cell.level-1 {
3574 | background: #238636;
3575 | }
3576 |
3577 | body.dark-mode .heatmap-cell.level-2 {
3578 | background: #1a7f37;
3579 | }
3580 |
3581 | body.dark-mode .heatmap-cell.level-3 {
3582 | background: #0f5132;
3583 | }
3584 |
3585 | body.dark-mode .heatmap-cell.level-4 {
3586 | background: #033a16;
3587 | }
3588 |
3589 | body.dark-mode .enhanced-tags-report .tags-list li,
3590 | body.dark-mode .activity-bar-row,
3591 | body.dark-mode .storage-report .largest-memories li {
3592 | background: var(--neutral-100);
3593 | border-color: var(--neutral-300);
3594 | color: var(--neutral-900);
3595 | }
3596 |
3597 | /* Form controls in Manage/Analytics dark mode */
3598 | body.dark-mode .bulk-op-card input,
3599 | body.dark-mode .bulk-op-card select,
3600 | body.dark-mode .chart-card input,
3601 | body.dark-mode .chart-card select,
3602 | body.dark-mode .manage-section .form-control,
3603 | body.dark-mode .analytics-section .form-control {
3604 | background: var(--neutral-300) !important;
3605 | border-color: var(--neutral-400) !important;
3606 | color: var(--neutral-900) !important;
3607 | }
3608 |
3609 | body.dark-mode .bulk-op-card input:focus,
3610 | body.dark-mode .bulk-op-card select:focus,
3611 | body.dark-mode .chart-card input:focus,
3612 | body.dark-mode .chart-card select:focus {
3613 | border-color: var(--primary) !important;
3614 | background: var(--neutral-400) !important;
3615 | }
3616 |
3617 | /* Buttons in Manage/Analytics dark mode */
3618 | body.dark-mode .bulk-op-card .btn,
3619 | body.dark-mode .system-op-card .btn,
3620 | body.dark-mode .chart-card .btn {
3621 | opacity: 1;
3622 | }
3623 |
3624 | /* Fix all white backgrounds in Analytics/Quality dark mode */
3625 | body.dark-mode .chart-container,
3626 | body.dark-mode .stat-card,
3627 | body.dark-mode .quality-summary .stat-card,
3628 | body.dark-mode .chart-area,
3629 | body.dark-mode .analytics-section .chart-container,
3630 | body.dark-mode .quality-section .stat-card {
3631 | background: var(--neutral-100) !important;
3632 | }
3633 |
3634 | /* Quality tab memory previews and lists */
3635 | body.dark-mode .memory-preview {
3636 | background: var(--neutral-200) !important;
3637 | border-color: var(--neutral-300) !important;
3638 | }
3639 |
3640 | body.dark-mode .memory-preview:hover {
3641 | background: var(--neutral-300) !important;
3642 | border-color: var(--primary) !important;
3643 | }
3644 |
3645 | body.dark-mode .memory-preview .memory-content {
3646 | color: var(--neutral-700) !important;
3647 | }
3648 |
3649 | body.dark-mode .top-performers,
3650 | body.dark-mode .bottom-performers {
3651 | background: var(--neutral-100) !important;
3652 | border-color: var(--neutral-300) !important;
3653 | }
3654 |
3655 | body.dark-mode .top-performers h3,
3656 | body.dark-mode .bottom-performers h3 {
3657 | color: var(--neutral-900) !important;
3658 | }
3659 |
3660 | /* GLOBAL dark mode overrides for ALL white backgrounds across ALL tabs */
3661 | body.dark-mode .form-control,
3662 | body.dark-mode input.form-control,
3663 | body.dark-mode select.form-control,
3664 | body.dark-mode textarea.form-control,
3665 | body.dark-mode .form-select,
3666 | body.dark-mode select.form-select {
3667 | background: var(--neutral-200) !important;
3668 | border-color: var(--neutral-300) !important;
3669 | color: var(--neutral-900) !important;
3670 | }
3671 |
3672 | body.dark-mode .form-control:focus {
3673 | background: var(--neutral-300) !important;
3674 | border-color: var(--primary) !important;
3675 | }
3676 |
3677 | body.dark-mode .view-btn,
3678 | body.dark-mode button.view-btn {
3679 | background: var(--neutral-200) !important;
3680 | color: var(--neutral-900) !important;
3681 | border-color: var(--neutral-300) !important;
3682 | }
3683 |
3684 | body.dark-mode .view-btn:hover {
3685 | background: var(--neutral-300) !important;
3686 | border-color: var(--primary) !important;
3687 | }
3688 |
3689 | /* Quality tab chart contrast improvements */
3690 | body.dark-mode .quality-section .chart-container,
3691 | body.dark-mode .quality-distribution,
3692 | body.dark-mode .quality-chart {
3693 | background: var(--neutral-400) !important;
3694 | border-color: var(--neutral-500) !important;
3695 | }
3696 |
3697 | body.dark-mode .metric-card {
3698 | background: linear-gradient(135deg, var(--primary-dark), var(--primary)) !important;
3699 | color: white !important;
3700 | }
3701 |
3702 | body.dark-mode .metric-value,
3703 | body.dark-mode .metric-label {
3704 | color: white !important;
3705 | }
3706 |
3707 | /* Tag management table dark mode */
3708 | body.dark-mode .tag-stats-table {
3709 | color: var(--neutral-900);
3710 | }
3711 |
3712 | body.dark-mode .tag-stats-table th {
3713 | background: var(--neutral-200) !important;
3714 | color: var(--neutral-900) !important;
3715 | }
3716 |
3717 | body.dark-mode .tag-stats-table td {
3718 | border-bottom-color: var(--neutral-200) !important;
3719 | color: var(--neutral-900) !important;
3720 | }
3721 |
3722 | body.dark-mode .tag-stats-table .tag-name {
3723 | color: var(--primary) !important;
3724 | }
3725 |
3726 | body.dark-mode .tag-stats-table .tag-count {
3727 | color: var(--neutral-900) !important;
3728 | }
3729 |
3730 | /* Tag action buttons dark mode */
3731 | body.dark-mode .tag-action-btn {
3732 | background: var(--neutral-200) !important;
3733 | border-color: var(--neutral-300) !important;
3734 | color: var(--neutral-900) !important;
3735 | }
3736 |
3737 | body.dark-mode .tag-action-btn:hover {
3738 | background: var(--neutral-300) !important;
3739 | border-color: var(--neutral-400) !important;
3740 | }
3741 |
3742 | body.dark-mode .tag-action-btn.danger:hover {
3743 | background: var(--error) !important;
3744 | color: white !important;
3745 | border-color: var(--error) !important;
3746 | }
3747 |
3748 | /* Simple Chart Styles */
3749 | .simple-chart {
3750 | font-family: var(--font-mono);
3751 | font-size: var(--text-sm);
3752 | width: 100%;
3753 | overflow: hidden;
3754 | }
3755 |
3756 | .chart-header {
3757 | font-weight: 600;
3758 | margin-bottom: var(--space-4);
3759 | color: var(--neutral-900);
3760 | }
3761 |
3762 | .chart-row {
3763 | display: flex;
3764 | align-items: center;
3765 | margin-bottom: var(--space-2);
3766 | gap: var(--space-3);
3767 | min-height: 24px;
3768 | width: 100%;
3769 | max-width: 100%;
3770 | }
3771 |
3772 | .chart-bar {
3773 | height: 18px;
3774 | background: var(--primary);
3775 | border-radius: var(--radius-sm);
3776 | transition: width 0.3s ease;
3777 | min-width: 10px;
3778 | max-width: 200px;
3779 | position: relative;
3780 | flex-shrink: 0;
3781 | }
3782 |
3783 | .chart-label {
3784 | flex: 1;
3785 | min-width: 0;
3786 | color: var(--neutral-700);
3787 | font-size: var(--text-sm);
3788 | overflow: hidden;
3789 | text-overflow: ellipsis;
3790 | white-space: nowrap;
3791 | }
3792 |
3793 | .chart-bar::after {
3794 | content: '';
3795 | position: absolute;
3796 | top: 0;
3797 | left: 0;
3798 | right: 0;
3799 | bottom: 0;
3800 | background: linear-gradient(90deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 100%);
3801 | border-radius: var(--radius-sm);
3802 | }
3803 |
3804 | .chart-value {
3805 | min-width: 100px;
3806 | text-align: right;
3807 | color: var(--neutral-900);
3808 | font-weight: 500;
3809 | font-size: 1rem;
3810 | white-space: nowrap;
3811 | flex-shrink: 0;
3812 | }
3813 |
3814 | .chart-value small {
3815 | color: var(--neutral-600);
3816 | font-weight: 400;
3817 | font-size: 0.9rem;
3818 | }
3819 |
3820 | .tags-list, .activity-list {
3821 | list-style: none;
3822 | padding: 0;
3823 | margin: 0;
3824 | }
3825 |
3826 | .tags-list li, .activity-list li {
3827 | padding: var(--space-2) 0;
3828 | border-bottom: 1px solid var(--neutral-200);
3829 | }
3830 |
3831 | .tags-list li:last-child, .activity-list li:last-child {
3832 | border-bottom: none;
3833 | }
3834 |
3835 | .tags-list li strong {
3836 | color: var(--primary);
3837 | }
3838 |
3839 | /* Dark mode for charts - Fixed v8.5.5 contrast */
3840 | body.dark-mode .chart-label {
3841 | color: #e5e5e5 !important; /* Much brighter text for labels */
3842 | font-weight: 500; /* Slightly bolder for readability */
3843 | }
3844 |
3845 | body.dark-mode .chart-value {
3846 | color: #ffffff !important; /* Pure white for maximum readability */
3847 | font-weight: 600; /* Slightly bolder in dark mode */
3848 | }
3849 |
3850 | body.dark-mode .chart-value small {
3851 | color: var(--neutral-300) !important; /* Lighter text for small elements */
3852 | }
3853 |
3854 | body.dark-mode .chart-bar {
3855 | background: var(--primary) !important;
3856 | }
3857 |
3858 | body.dark-mode .chart-container {
3859 | color: var(--neutral-700) !important; /* Loading/placeholder text */
3860 | }
3861 |
3862 | body.dark-mode .tags-list li,
3863 | body.dark-mode .activity-list li {
3864 | border-bottom-color: var(--neutral-200) !important;
3865 | color: var(--neutral-900) !important;
3866 | }
3867 |
3868 | body.dark-mode .tags-list li strong {
3869 | color: var(--primary) !important;
3870 | }
3871 |
3872 | body.dark-mode .activity-list li {
3873 | color: var(--neutral-700) !important;
3874 | }
3875 |
3876 | /* Dark mode: Document chunks modal */
3877 | body.dark-mode .modal-content .chunk-item {
3878 | background: #1f2937 !important;
3879 | border-color: #374151 !important;
3880 | }
3881 |
3882 | body.dark-mode .modal-content .chunk-header {
3883 | color: #f3f4f6 !important;
3884 | }
3885 |
3886 | body.dark-mode .modal-content .chunk-content {
3887 | color: #d1d5db !important;
3888 | }
3889 |
3890 | body.dark-mode .modal-content .chunk-meta {
3891 | color: #9ca3af !important;
3892 | }
3893 |
3894 | body.dark-mode .modal-content .chunk-number {
3895 | color: #60a5fa !important;
3896 | }
3897 |
3898 | /* Document Management Features */
3899 | .upload-actions-container {
3900 | display: flex;
3901 | align-items: center;
3902 | gap: var(--space-4);
3903 | }
3904 |
3905 | .upload-actions {
3906 | display: flex;
3907 | gap: var(--space-2);
3908 | }
3909 |
3910 | .btn-icon {
3911 | display: flex;
3912 | align-items: center;
3913 | gap: var(--space-2);
3914 | padding: var(--space-2) var(--space-3);
3915 | border: 1px solid var(--neutral-300);
3916 | border-radius: var(--radius-md);
3917 | background: white;
3918 | cursor: pointer;
3919 | transition: all var(--transition-base);
3920 | font-size: var(--text-sm);
3921 | color: var(--neutral-700);
3922 | }
3923 |
3924 | .btn-icon:hover {
3925 | background: var(--neutral-50);
3926 | border-color: var(--neutral-400);
3927 | transform: translateY(-1px);
3928 | }
3929 |
3930 | .btn-icon svg {
3931 | flex-shrink: 0;
3932 | }
3933 |
3934 | .btn-view-memory {
3935 | color: var(--primary);
3936 | border-color: var(--primary-light);
3937 | }
3938 |
3939 | .btn-view-memory:hover {
3940 | background: rgba(99, 102, 241, 0.05);
3941 | border-color: var(--primary);
3942 | }
3943 |
3944 | .btn-remove {
3945 | color: var(--error);
3946 | border-color: rgba(239, 68, 68, 0.3);
3947 | }
3948 |
3949 | .btn-remove:hover {
3950 | background: rgba(239, 68, 68, 0.05);
3951 | border-color: var(--error);
3952 | }
3953 |
3954 | /* Document Search Section */
3955 | .doc-search-container {
3956 | display: flex;
3957 | gap: var(--space-3);
3958 | margin-bottom: var(--space-4);
3959 | }
3960 |
3961 | .doc-search-container .search-input {
3962 | flex: 1;
3963 | }
3964 |
3965 | .doc-search-results {
3966 | margin-top: var(--space-4);
3967 | }
3968 |
3969 | .search-results-header {
3970 | display: flex;
3971 | justify-content: space-between;
3972 | align-items: center;
3973 | margin-bottom: var(--space-4);
3974 | padding-bottom: var(--space-3);
3975 | border-bottom: 2px solid var(--neutral-200);
3976 | }
3977 |
3978 | .search-results-header h3 {
3979 | margin: 0;
3980 | font-size: var(--text-lg);
3981 | color: var(--neutral-900);
3982 | }
3983 |
3984 | .results-count {
3985 | color: var(--neutral-600);
3986 | font-size: var(--text-sm);
3987 | }
3988 |
3989 | .search-results-list {
3990 | display: flex;
3991 | flex-direction: column;
3992 | gap: var(--space-3);
3993 | }
3994 |
3995 | .search-result-item {
3996 | padding: var(--space-4);
3997 | background: white;
3998 | border: 1px solid var(--neutral-200);
3999 | border-radius: var(--radius-md);
4000 | transition: var(--transition-base);
4001 | }
4002 |
4003 | .search-result-item:hover {
4004 | box-shadow: var(--shadow-sm);
4005 | border-color: var(--primary-light);
4006 | }
4007 |
4008 | .result-header {
4009 | display: flex;
4010 | justify-content: space-between;
4011 | align-items: center;
4012 | margin-bottom: var(--space-2);
4013 | }
4014 |
4015 | .result-header strong {
4016 | color: var(--neutral-900);
4017 | }
4018 |
4019 | .similarity-score {
4020 | font-size: var(--text-sm);
4021 | color: var(--primary);
4022 | font-weight: 600;
4023 | }
4024 |
4025 | .result-content {
4026 | color: var(--neutral-700);
4027 | margin-bottom: var(--space-3);
4028 | line-height: 1.6;
4029 | }
4030 |
4031 | .result-tags {
4032 | display: flex;
4033 | gap: var(--space-2);
4034 | flex-wrap: wrap;
4035 | }
4036 |
4037 | .section-description {
4038 | color: var(--neutral-600);
4039 | margin-bottom: var(--space-4);
4040 | }
4041 |
4042 | /* Memory Viewer Modal */
4043 | .modal {
4044 | position: fixed;
4045 | top: 0;
4046 | left: 0;
4047 | right: 0;
4048 | bottom: 0;
4049 | background: rgba(0, 0, 0, 0.5);
4050 | display: none;
4051 | align-items: center;
4052 | justify-content: center;
4053 | z-index: 1000;
4054 | padding: var(--space-4);
4055 | }
4056 |
4057 | .memory-viewer-content {
4058 | max-width: 900px;
4059 | width: 100%;
4060 | max-height: 90vh;
4061 | background: white;
4062 | border-radius: var(--radius-xl);
4063 | box-shadow: var(--shadow-xl);
4064 | display: flex;
4065 | flex-direction: column;
4066 | }
4067 |
4068 | .memory-viewer-content .modal-header {
4069 | padding: var(--space-6);
4070 | border-bottom: 1px solid var(--neutral-200);
4071 | display: flex;
4072 | justify-content: space-between;
4073 | align-items: center;
4074 | }
4075 |
4076 | .memory-viewer-content .modal-header h2 {
4077 | margin: 0;
4078 | font-size: var(--text-xl);
4079 | color: var(--neutral-900);
4080 | }
4081 |
4082 | .memory-viewer-content .modal-close {
4083 | background: none;
4084 | border: none;
4085 | font-size: 2rem;
4086 | line-height: 1;
4087 | cursor: pointer;
4088 | color: var(--neutral-500);
4089 | padding: var(--space-2);
4090 | border-radius: var(--radius-md);
4091 | transition: var(--transition-base);
4092 | }
4093 |
4094 | .memory-viewer-content .modal-close:hover {
4095 | background: var(--neutral-100);
4096 | color: var(--neutral-700);
4097 | }
4098 |
4099 | .memory-viewer-content .modal-body {
4100 | flex: 1;
4101 | overflow-y: auto;
4102 | padding: var(--space-6);
4103 | }
4104 |
4105 | .memory-viewer-content .modal-footer {
4106 | padding: var(--space-6);
4107 | border-top: 1px solid var(--neutral-200);
4108 | display: flex;
4109 | justify-content: flex-end;
4110 | }
4111 |
4112 | .document-info {
4113 | margin-bottom: var(--space-6);
4114 | }
4115 |
4116 | .document-info h3 {
4117 | margin: 0 0 var(--space-2) 0;
4118 | color: var(--neutral-900);
4119 | font-size: var(--text-lg);
4120 | }
4121 |
4122 | .memory-chunks-list {
4123 | display: flex;
4124 | flex-direction: column;
4125 | gap: var(--space-4);
4126 | }
4127 |
4128 | .memory-chunk-item {
4129 | padding: var(--space-4);
4130 | background: var(--neutral-50);
4131 | border: 1px solid var(--neutral-200);
4132 | border-radius: var(--radius-md);
4133 | }
4134 |
4135 | .chunk-header {
4136 | display: flex;
4137 | justify-content: space-between;
4138 | align-items: center;
4139 | margin-bottom: var(--space-3);
4140 | padding-bottom: var(--space-2);
4141 | border-bottom: 1px solid var(--neutral-200);
4142 | }
4143 |
4144 | .chunk-number {
4145 | font-weight: 600;
4146 | color: var(--primary);
4147 | font-size: var(--text-sm);
4148 | }
4149 |
4150 | .chunk-hash {
4151 | font-family: 'Monaco', 'Courier New', monospace;
4152 | font-size: var(--text-xs);
4153 | color: var(--neutral-500);
4154 | }
4155 |
4156 | .chunk-tags {
4157 | display: flex;
4158 | gap: var(--space-2);
4159 | flex-wrap: wrap;
4160 | }
4161 |
4162 | /* Dark Mode Support for New Components */
4163 | body.dark-mode .btn-icon {
4164 | background: var(--neutral-200);
4165 | border-color: var(--neutral-300);
4166 | color: var(--neutral-900);
4167 | }
4168 |
4169 | body.dark-mode .btn-icon:hover {
4170 | background: var(--neutral-300);
4171 | }
4172 |
4173 | body.dark-mode .search-result-item,
4174 | body.dark-mode .memory-chunk-item {
4175 | background: var(--neutral-200);
4176 | border-color: var(--neutral-300);
4177 | }
4178 |
4179 | body.dark-mode .memory-viewer-content {
4180 | background: var(--neutral-100);
4181 | }
4182 |
4183 | body.dark-mode .section-description,
4184 | body.dark-mode .result-content {
4185 | color: var(--neutral-300);
4186 | }
4187 |
4188 | /* Responsive Adjustments */
4189 | @media (max-width: 768px) {
4190 | .upload-actions-container {
4191 | flex-direction: column;
4192 | align-items: flex-start;
4193 | }
4194 |
4195 | .upload-actions {
4196 | width: 100%;
4197 | }
4198 |
4199 | .btn-icon {
4200 | flex: 1;
4201 | justify-content: center;
4202 | }
4203 |
4204 | .doc-search-container {
4205 | flex-direction: column;
4206 | }
4207 |
4208 | .memory-viewer-content {
4209 | max-height: 95vh;
4210 | margin: var(--space-2);
4211 | }
4212 | }
4213 |
4214 | /* ============================================
4215 | Chunking Help Section Styles
4216 | ============================================ */
4217 |
4218 | .info-icon {
4219 | cursor: pointer;
4220 | font-size: 1.1em;
4221 | margin-left: var(--space-1);
4222 | opacity: 0.7;
4223 | transition: all var(--transition-base);
4224 | -webkit-user-select: none;
4225 | user-select: none;
4226 | }
4227 |
4228 | .info-icon:hover {
4229 | opacity: 1;
4230 | transform: scale(1.2);
4231 | }
4232 |
4233 | .chunking-help {
4234 | margin-top: var(--space-3);
4235 | padding: var(--space-3);
4236 | background: var(--neutral-50);
4237 | border: 1px solid var(--neutral-200);
4238 | border-radius: var(--radius-lg);
4239 | animation: slideDown 0.3s ease-out;
4240 | }
4241 |
4242 | @keyframes slideDown {
4243 | from {
4244 | opacity: 0;
4245 | transform: translateY(-10px);
4246 | }
4247 | to {
4248 | opacity: 1;
4249 | transform: translateY(0);
4250 | }
4251 | }
4252 |
4253 | .help-header {
4254 | display: flex;
4255 | justify-content: space-between;
4256 | align-items: center;
4257 | margin-bottom: var(--space-3);
4258 | padding-bottom: var(--space-2);
4259 | border-bottom: 2px solid var(--neutral-200);
4260 | color: var(--neutral-800);
4261 | }
4262 |
4263 | .help-header strong {
4264 | font-size: 1.1em;
4265 | }
4266 |
4267 | .close-help {
4268 | background: none;
4269 | border: none;
4270 | font-size: 1.5em;
4271 | color: var(--neutral-500);
4272 | cursor: pointer;
4273 | padding: 0 var(--space-2);
4274 | line-height: 1;
4275 | transition: color var(--transition-base);
4276 | }
4277 |
4278 | .close-help:hover {
4279 | color: var(--error);
4280 | }
4281 |
4282 | .help-content {
4283 | color: var(--neutral-700);
4284 | }
4285 |
4286 | .help-note {
4287 | background: var(--warning);
4288 | background: linear-gradient(135deg, #fff3cd 0%, #fcf8e3 100%);
4289 | border-left: 4px solid var(--warning);
4290 | padding: var(--space-2);
4291 | margin-bottom: var(--space-3);
4292 | border-radius: var(--radius-base);
4293 | font-size: 0.95em;
4294 | }
4295 |
4296 | .help-recommendations {
4297 | display: flex;
4298 | flex-direction: column;
4299 | gap: var(--space-3);
4300 | margin-bottom: var(--space-3);
4301 | }
4302 |
4303 | .help-option {
4304 | background: white;
4305 | padding: var(--space-3);
4306 | border-radius: var(--radius-base);
4307 | border: 1px solid var(--neutral-200);
4308 | transition: all var(--transition-base);
4309 | }
4310 |
4311 | .help-option:hover {
4312 | border-color: var(--primary);
4313 | box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1);
4314 | }
4315 |
4316 | .help-option-header {
4317 | display: flex;
4318 | justify-content: space-between;
4319 | align-items: center;
4320 | margin-bottom: var(--space-2);
4321 | }
4322 |
4323 | .help-option-header strong {
4324 | color: var(--neutral-800);
4325 | }
4326 |
4327 | .help-tag {
4328 | background: var(--success);
4329 | color: white;
4330 | padding: var(--space-1) var(--space-2);
4331 | border-radius: var(--radius-full);
4332 | font-size: 0.75em;
4333 | font-weight: 600;
4334 | text-transform: uppercase;
4335 | letter-spacing: 0.5px;
4336 | }
4337 |
4338 | .help-option p {
4339 | margin: var(--space-1) 0;
4340 | font-size: 0.9em;
4341 | line-height: 1.5;
4342 | }
4343 |
4344 | .help-option p strong {
4345 | color: var(--neutral-700);
4346 | }
4347 |
4348 | .help-tips {
4349 | background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
4350 | padding: var(--space-3);
4351 | border-radius: var(--radius-base);
4352 | border-left: 4px solid var(--primary);
4353 | }
4354 |
4355 | .help-tips strong {
4356 | color: var(--neutral-800);
4357 | display: block;
4358 | margin-bottom: var(--space-2);
4359 | }
4360 |
4361 | .help-tips ul {
4362 | margin: 0;
4363 | padding-left: var(--space-4);
4364 | }
4365 |
4366 | .help-tips li {
4367 | margin: var(--space-1) 0;
4368 | font-size: 0.9em;
4369 | line-height: 1.6;
4370 | color: var(--neutral-700);
4371 | }
4372 |
4373 | .help-tips li strong {
4374 | display: inline;
4375 | color: var(--primary-dark);
4376 | font-weight: 600;
4377 | }
4378 |
4379 | /* Overlap Visual Diagram */
4380 | .help-example {
4381 | margin: var(--space-3) 0;
4382 | padding: var(--space-3);
4383 | background: white;
4384 | border-radius: var(--radius-base);
4385 | border: 1px solid var(--neutral-200);
4386 | }
4387 |
4388 | .help-example strong {
4389 | display: block;
4390 | margin-bottom: var(--space-2);
4391 | color: var(--neutral-800);
4392 | }
4393 |
4394 | .overlap-diagram {
4395 | display: flex;
4396 | flex-direction: column;
4397 | gap: var(--space-2);
4398 | margin-top: var(--space-2);
4399 | }
4400 |
4401 | .chunk-demo {
4402 | display: flex;
4403 | border-radius: var(--radius-base);
4404 | overflow: hidden;
4405 | box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
4406 | }
4407 |
4408 | .chunk-part {
4409 | padding: var(--space-2);
4410 | font-family: monospace;
4411 | font-size: 0.85em;
4412 | display: flex;
4413 | align-items: center;
4414 | justify-content: center;
4415 | transition: all var(--transition-base);
4416 | }
4417 |
4418 | .chunk-part.unique {
4419 | background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
4420 | color: var(--primary-dark);
4421 | flex: 1;
4422 | border: 2px solid var(--primary);
4423 | }
4424 |
4425 | .chunk-part.overlap {
4426 | background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
4427 | color: #92400e;
4428 | flex: 0 0 35%;
4429 | border: 2px solid var(--warning);
4430 | font-weight: 600;
4431 | }
4432 |
4433 | .chunk-demo:hover .chunk-part.overlap {
4434 | background: linear-gradient(135deg, #fde68a 0%, #fbbf24 100%);
4435 | transform: scale(1.02);
4436 | }
4437 |
4438 | /* Mobile responsiveness for help section */
4439 | @media (max-width: 768px) {
4440 | .chunking-help {
4441 | padding: var(--space-2);
4442 | }
4443 |
4444 | .help-option {
4445 | padding: var(--space-2);
4446 | }
4447 |
4448 | .help-tips {
4449 | padding: var(--space-2);
4450 | }
4451 |
4452 | .help-example {
4453 | padding: var(--space-2);
4454 | }
4455 |
4456 | .chunk-part {
4457 | font-size: 0.75em;
4458 | padding: var(--space-1);
4459 | }
4460 |
4461 | .chunk-part.overlap {
4462 | flex: 0 0 40%;
4463 | }
4464 | }
4465 |
4466 | /* ========================================
4467 | QUALITY SYSTEM UI COMPONENTS
4468 | ======================================== */
4469 |
4470 | /* Quality Badge Styles */
4471 | .quality-badge {
4472 | display: inline-flex;
4473 | align-items: center;
4474 | gap: var(--space-1);
4475 | padding: var(--space-1) var(--space-3);
4476 | border-radius: 12px;
4477 | font-size: var(--text-sm);
4478 | font-weight: 500;
4479 | transition: all var(--transition-base);
4480 | }
4481 |
4482 | .quality-star {
4483 | font-size: 1.1em;
4484 | color: #FFD700; /* Gold star */
4485 | }
4486 |
4487 | .quality-score {
4488 | font-weight: 600;
4489 | }
4490 |
4491 | .quality-label {
4492 | font-size: var(--text-xs);
4493 | opacity: 0.9;
4494 | }
4495 |
4496 | /* Quality tier color coding */
4497 | .quality-tier-high {
4498 | background-color: #D4EDDA;
4499 | color: #155724;
4500 | border: 1px solid #C3E6CB;
4501 | }
4502 |
4503 | .quality-tier-medium {
4504 | background-color: #FFF3CD;
4505 | color: #856404;
4506 | border: 1px solid #FFEAA7;
4507 | }
4508 |
4509 | .quality-tier-low {
4510 | background-color: #F8D7DA;
4511 | color: #721C24;
4512 | border: 1px solid #F5C6CB;
4513 | }
4514 |
4515 | /* Dark mode quality badge support */
4516 | body.dark-mode .quality-tier-high,
4517 | [data-theme="dark"] .quality-tier-high {
4518 | background-color: #2D5A3D;
4519 | color: #A5E0B5;
4520 | border-color: #4A8A5E;
4521 | }
4522 |
4523 | body.dark-mode .quality-tier-medium,
4524 | [data-theme="dark"] .quality-tier-medium {
4525 | background-color: #5A4A1F;
4526 | color: #F4D88A;
4527 | border-color: #7A6A2F;
4528 | }
4529 |
4530 | body.dark-mode .quality-tier-low,
4531 | [data-theme="dark"] .quality-tier-low {
4532 | background-color: #5A1F23;
4533 | color: #F5A5AB;
4534 | border-color: #7A3F43;
4535 | }
4536 |
4537 | /* Quality badge hover effect */
4538 | .quality-badge:hover {
4539 | transform: translateY(-1px);
4540 | box-shadow: var(--shadow-sm);
4541 | }
4542 |
4543 | /* Quality Analytics Section */
4544 | .quality-analytics-section {
4545 | padding: var(--space-6);
4546 | }
4547 |
4548 | .quality-summary {
4549 | display: grid;
4550 | grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
4551 | gap: var(--space-4);
4552 | margin-bottom: var(--space-6);
4553 | }
4554 |
4555 | .stat-card {
4556 | background: white;
4557 | border-radius: var(--radius-lg);
4558 | padding: var(--space-5);
4559 | box-shadow: var(--shadow-md);
4560 | transition: all var(--transition-base);
4561 | }
4562 |
4563 | .stat-card:hover {
4564 | transform: translateY(-2px);
4565 | box-shadow: var(--shadow-lg);
4566 | }
4567 |
4568 | .stat-card.stat-high {
4569 | border-left: 4px solid #10b981;
4570 | }
4571 |
4572 | .stat-card.stat-medium {
4573 | border-left: 4px solid #f59e0b;
4574 | }
4575 |
4576 | .stat-card.stat-low {
4577 | border-left: 4px solid #ef4444;
4578 | }
4579 |
4580 | .stat-value {
4581 | font-size: var(--text-3xl);
4582 | font-weight: 700;
4583 | color: var(--neutral-900);
4584 | margin-bottom: var(--space-2);
4585 | }
4586 |
4587 | .stat-label {
4588 | font-size: var(--text-sm);
4589 | color: var(--neutral-600);
4590 | font-weight: 500;
4591 | }
4592 |
4593 | /* Dark mode stat cards */
4594 | [data-theme="dark"] .stat-card {
4595 | background: var(--neutral-800);
4596 | }
4597 |
4598 | [data-theme="dark"] .stat-value {
4599 | color: var(--neutral-100);
4600 | }
4601 |
4602 | [data-theme="dark"] .stat-label {
4603 | color: var(--neutral-400);
4604 | }
4605 |
4606 | /* Chart containers */
4607 | .chart-container {
4608 | background: white;
4609 | border-radius: var(--radius-lg);
4610 | padding: var(--space-5);
4611 | box-shadow: var(--shadow-md);
4612 | margin-bottom: var(--space-6);
4613 | }
4614 |
4615 | .chart-container h3 {
4616 | font-size: var(--text-xl);
4617 | color: var(--neutral-900);
4618 | margin-bottom: var(--space-4);
4619 | }
4620 |
4621 | .chart-container canvas {
4622 | max-height: 300px;
4623 | }
4624 |
4625 | [data-theme="dark"] .chart-container {
4626 | background: var(--neutral-800);
4627 | }
4628 |
4629 | [data-theme="dark"] .chart-container h3 {
4630 | color: var(--neutral-100);
4631 | }
4632 |
4633 | /* Top/Bottom Performers Lists */
4634 | .top-performers,
4635 | .bottom-performers {
4636 | background: white;
4637 | border-radius: var(--radius-lg);
4638 | padding: var(--space-5);
4639 | box-shadow: var(--shadow-md);
4640 | margin-bottom: var(--space-6);
4641 | }
4642 |
4643 | .top-performers h3,
4644 | .bottom-performers h3 {
4645 | font-size: var(--text-xl);
4646 | color: var(--neutral-900);
4647 | margin-bottom: var(--space-4);
4648 | }
4649 |
4650 | [data-theme="dark"] .top-performers,
4651 | [data-theme="dark"] .bottom-performers {
4652 | background: var(--neutral-800);
4653 | }
4654 |
4655 | [data-theme="dark"] .top-performers h3,
4656 | [data-theme="dark"] .bottom-performers h3 {
4657 | color: var(--neutral-100);
4658 | }
4659 |
4660 | /* Memory preview cards in quality lists */
4661 | .memory-preview {
4662 | display: flex;
4663 | align-items: flex-start;
4664 | gap: var(--space-3);
4665 | padding: var(--space-3);
4666 | border: 1px solid var(--neutral-200);
4667 | border-radius: var(--radius-md);
4668 | margin-bottom: var(--space-3);
4669 | transition: all var(--transition-base);
4670 | }
4671 |
4672 | .memory-preview:hover {
4673 | background: var(--neutral-50);
4674 | border-color: var(--primary);
4675 | transform: translateX(4px);
4676 | }
4677 |
4678 | .memory-preview .memory-content {
4679 | flex: 1;
4680 | font-size: var(--text-sm);
4681 | color: var(--neutral-700);
4682 | line-height: 1.6;
4683 | }
4684 |
4685 | [data-theme="dark"] .memory-preview {
4686 | border-color: var(--neutral-700);
4687 | }
4688 |
4689 | [data-theme="dark"] .memory-preview:hover {
4690 | background: var(--neutral-700);
4691 | border-color: var(--primary);
4692 | }
4693 |
4694 | [data-theme="dark"] .memory-preview .memory-content {
4695 | color: var(--neutral-300);
4696 | }
4697 |
4698 | /* Manual Rating UI */
4699 | .memory-actions {
4700 | display: flex;
4701 | gap: var(--space-2);
4702 | margin-top: var(--space-4);
4703 | padding-top: var(--space-4);
4704 | border-top: 1px solid var(--neutral-200);
4705 | }
4706 |
4707 | .btn-rate {
4708 | display: inline-flex;
4709 | align-items: center;
4710 | gap: var(--space-2);
4711 | padding: var(--space-2) var(--space-4);
4712 | border: 1px solid var(--neutral-300);
4713 | border-radius: var(--radius-md);
4714 | background: white;
4715 | font-size: var(--text-sm);
4716 | font-weight: 500;
4717 | cursor: pointer;
4718 | transition: all var(--transition-base);
4719 | }
4720 |
4721 | .btn-rate:hover {
4722 | background: var(--neutral-100);
4723 | transform: translateY(-1px);
4724 | box-shadow: var(--shadow-sm);
4725 | }
4726 |
4727 | .btn-rate-up:hover {
4728 | background: #D4EDDA;
4729 | border-color: #10b981;
4730 | color: #155724;
4731 | }
4732 |
4733 | .btn-rate-neutral:hover {
4734 | background: var(--neutral-100);
4735 | border-color: var(--neutral-400);
4736 | }
4737 |
4738 | .btn-rate-down:hover {
4739 | background: #F8D7DA;
4740 | border-color: #ef4444;
4741 | color: #721C24;
4742 | }
4743 |
4744 | [data-theme="dark"] .btn-rate {
4745 | background: var(--neutral-700);
4746 | border-color: var(--neutral-600);
4747 | color: var(--neutral-200);
4748 | }
4749 |
4750 | [data-theme="dark"] .btn-rate:hover {
4751 | background: var(--neutral-600);
4752 | }
4753 |
4754 | /* Quality Settings Panel */
4755 | .quality-settings {
4756 | margin-top: var(--space-6);
4757 | }
4758 |
4759 | .quality-settings .setting-item {
4760 | margin-bottom: var(--space-5);
4761 | }
4762 |
4763 | .quality-settings label {
4764 | display: block;
4765 | font-size: var(--text-sm);
4766 | font-weight: 600;
4767 | color: var(--neutral-900);
4768 | margin-bottom: var(--space-2);
4769 | }
4770 |
4771 | .quality-settings .form-select {
4772 | width: 100%;
4773 | padding: var(--space-3);
4774 | border: 1px solid var(--neutral-300);
4775 | border-radius: var(--radius-md);
4776 | font-size: var(--text-sm);
4777 | background: white;
4778 | transition: all var(--transition-base);
4779 | }
4780 |
4781 | .quality-settings .form-select:focus {
4782 | outline: none;
4783 | border-color: var(--primary);
4784 | box-shadow: 0 0 0 3px rgb(59 130 246 / 0.1);
4785 | }
4786 |
4787 | .quality-settings .form-text {
4788 | display: block;
4789 | margin-top: var(--space-2);
4790 | font-size: var(--text-xs);
4791 | color: var(--neutral-600);
4792 | }
4793 |
4794 | .quality-settings .checkbox-label {
4795 | display: flex;
4796 | align-items: center;
4797 | gap: var(--space-3);
4798 | cursor: pointer;
4799 | }
4800 |
4801 | .quality-settings .checkbox-label input[type="checkbox"] {
4802 | width: 20px;
4803 | height: 20px;
4804 | cursor: pointer;
4805 | }
4806 |
4807 | .quality-settings .setting-info {
4808 | margin-top: var(--space-4);
4809 | padding: var(--space-4);
4810 | background: var(--neutral-50);
4811 | border-radius: var(--radius-md);
4812 | border-left: 4px solid var(--primary);
4813 | }
4814 |
4815 | .quality-settings .info-value {
4816 | font-size: var(--text-sm);
4817 | color: var(--neutral-700);
4818 | margin-top: var(--space-2);
4819 | }
4820 |
4821 | [data-theme="dark"] .quality-settings label {
4822 | color: var(--neutral-100);
4823 | }
4824 |
4825 | [data-theme="dark"] .quality-settings .form-select {
4826 | background: var(--neutral-700);
4827 | border-color: var(--neutral-600);
4828 | color: var(--neutral-100);
4829 | }
4830 |
4831 | [data-theme="dark"] .quality-settings .form-text {
4832 | color: var(--neutral-400);
4833 | }
4834 |
4835 | [data-theme="dark"] .quality-settings .setting-info {
4836 | background: var(--neutral-800);
4837 | }
4838 |
4839 | [data-theme="dark"] .quality-settings .info-value {
4840 | color: var(--neutral-300);
4841 | }
4842 |
4843 | /* Quality badge in memory cards */
4844 | .memory-card .quality-badge {
4845 | position: absolute;
4846 | top: var(--space-3);
4847 | right: var(--space-3);
4848 | }
4849 |
4850 | /* Responsive design for quality components */
4851 | @media (max-width: 768px) {
4852 | .quality-summary {
4853 | grid-template-columns: 1fr;
4854 | }
4855 |
4856 | .stat-card {
4857 | padding: var(--space-4);
4858 | }
4859 |
4860 | .chart-container {
4861 | padding: var(--space-3);
4862 | }
4863 |
4864 | .chart-container canvas {
4865 | max-height: 200px;
4866 | }
4867 |
4868 | .memory-actions {
4869 | flex-direction: column;
4870 | }
4871 |
4872 | .btn-rate {
4873 | width: 100%;
4874 | justify-content: center;
4875 | }
4876 | }
4877 |
4878 | /* Quality Analytics Navigation Item */
4879 | .nav-item[data-view="quality-analytics"] {
4880 | /* Highlighted when quality analytics is active */
4881 | }
4882 |
4883 | .nav-item[data-view="quality-analytics"].active {
4884 | background: var(--primary);
4885 | color: white;
4886 | }
4887 |
```