This is page 41 of 47. 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
│ ├── settings.local.json.backup
│ └── settings.local.json.local
├── .commit-message
├── .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-code-review.yml
│ ├── claude.yml
│ ├── cleanup-images.yml.disabled
│ ├── dev-setup-validation.yml
│ ├── docker-publish.yml
│ ├── LATEST_FIXES.md
│ ├── main-optimized.yml.disabled
│ ├── main.yml
│ ├── publish-and-test.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
├── .pyscn
│ ├── .gitignore
│ └── reports
│ └── analyze_20251123_214224.html
├── AGENTS.md
├── 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
│ │ ├── memory-retrieval.js
│ │ ├── mid-conversation.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-NATURAL-TRIGGERS.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-session-tracking.json
│ │ └── test-threading.json
│ ├── utilities
│ │ ├── adaptive-pattern-detector.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-tracker.js
│ │ ├── tiered-conversation-monitor.js
│ │ └── version-checker.js
│ └── WINDOWS-SESSIONSTART-BUG.md
├── CLAUDE.md
├── CODE_OF_CONDUCT.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
│ │ ├── 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
│ ├── 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-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
│ │ └── tag-schema.json
│ ├── 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
│ │ ├── 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
│ ├── 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
│ ├── 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
│ ├── natural-memory-triggers
│ │ ├── cli-reference.md
│ │ ├── installation-guide.md
│ │ └── performance-optimization.md
│ ├── oauth-setup.md
│ ├── pr-graphql-integration.md
│ ├── quick-setup-cloudflare-dual-environment.md
│ ├── README.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
│ │ ├── general.md
│ │ ├── hooks-quick-reference.md
│ │ ├── pr162-schema-caching-issue.md
│ │ ├── session-end-hooks.md
│ │ └── sync-issues.md
│ └── tutorials
│ ├── advanced-techniques.md
│ ├── data-analysis.md
│ └── demo-session-walkthrough.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
├── install_service.py
├── install.py
├── LICENSE
├── NOTICE
├── pyproject.toml
├── pytest.ini
├── README.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
│ ├── 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
│ │ ├── assign_memory_types.py
│ │ ├── check_memory_types.py
│ │ ├── cleanup_corrupted_encoding.py
│ │ ├── cleanup_memories.py
│ │ ├── cleanup_organize.py
│ │ ├── consolidate_memory_types.py
│ │ ├── consolidation_mappings.json
│ │ ├── delete_orphaned_vectors_fixed.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
│ │ └── scan_todos.sh
│ ├── 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
│ │ ├── quality_gate.sh
│ │ ├── resolve_threads.sh
│ │ ├── run_pyscn_analysis.sh
│ │ ├── run_quality_checks.sh
│ │ ├── thread_status.sh
│ │ └── watch_reviews.sh
│ ├── quality
│ │ ├── fix_dead_code_install.sh
│ │ ├── phase1_dead_code_analysis.md
│ │ ├── phase2_complexity_analysis.md
│ │ ├── README_PHASE1.md
│ │ ├── README_PHASE2.md
│ │ ├── track_pyscn_metrics.sh
│ │ └── weekly_quality_review.sh
│ ├── README.md
│ ├── run
│ │ ├── 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
│ │ ├── install_http_service.sh
│ │ ├── mcp-memory-http.service
│ │ ├── mcp-memory.service
│ │ ├── memory_service_manager.sh
│ │ ├── service_control.sh
│ │ ├── service_utils.py
│ │ └── update_service.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
│ ├── utils
│ │ ├── claude_commands_utils.py
│ │ ├── generate_personalized_claude_md.sh
│ │ ├── groq
│ │ ├── groq_agent_bridge.py
│ │ ├── list-collections.py
│ │ ├── memory_wrapper_uv.py
│ │ ├── query_memories.py
│ │ ├── smithery_wrapper.py
│ │ ├── test_groq_bridge.sh
│ │ └── uv_wrapper.py
│ └── validation
│ ├── check_dev_setup.py
│ ├── check_documentation_links.py
│ ├── diagnose_backend_config.py
│ ├── validate_configuration_complete.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
│ ├── 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
│ ├── server.py
│ ├── services
│ │ ├── __init__.py
│ │ └── memory_service.py
│ ├── storage
│ │ ├── __init__.py
│ │ ├── base.py
│ │ ├── cloudflare.py
│ │ ├── factory.py
│ │ ├── http_client.py
│ │ ├── hybrid.py
│ │ └── 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
│ │ ├── document_processing.py
│ │ ├── gpu_detection.py
│ │ ├── hashing.py
│ │ ├── http_server_manager.py
│ │ ├── port_detection.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
│ │ ├── 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
│ ├── index.html
│ ├── README.md
│ ├── sse_test.html
│ └── style.css
├── start_http_debug.bat
├── start_http_server.sh
├── test_document.txt
├── test_version_checker.js
├── 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
│ ├── contracts
│ │ └── api-specification.yml
│ ├── integration
│ │ ├── package-lock.json
│ │ ├── package.json
│ │ ├── 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
│ ├── test_client.py
│ ├── test_content_splitting.py
│ ├── test_database.py
│ ├── test_hybrid_cloudflare_limits.py
│ ├── test_hybrid_storage.py
│ ├── test_memory_ops.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_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
├── 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
```
# 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 | .btn-danger {
244 | background: var(--error);
245 | color: white;
246 | }
247 |
248 | .btn-danger:hover {
249 | background: #dc2626;
250 | }
251 |
252 | /* Navigation */
253 | .main-nav {
254 | grid-area: nav;
255 | background: white;
256 | border-bottom: 1px solid var(--neutral-200);
257 | }
258 |
259 | .nav-container {
260 | max-width: 1200px;
261 | margin: 0 auto;
262 | padding: 0 var(--space-6);
263 | display: flex;
264 | gap: var(--space-2);
265 | }
266 |
267 | .nav-item {
268 | display: flex;
269 | align-items: center;
270 | gap: var(--space-2);
271 | padding: var(--space-4) var(--space-5);
272 | border: none;
273 | background: none;
274 | color: var(--neutral-600);
275 | font-size: var(--text-sm);
276 | font-weight: 500;
277 | cursor: pointer;
278 | border-bottom: 2px solid transparent;
279 | transition: var(--transition-base);
280 | }
281 |
282 | .nav-item:hover {
283 | color: var(--primary);
284 | background: var(--neutral-50);
285 | }
286 |
287 | .nav-item.active {
288 | color: var(--primary);
289 | border-bottom-color: var(--primary);
290 | }
291 |
292 | /* Sync Status Bar */
293 | .sync-status-bar {
294 | grid-area: sync;
295 | display: none; /* Hidden by default, shown by JavaScript for hybrid mode */
296 | background: var(--neutral-50);
297 | border-bottom: 1px solid var(--neutral-200);
298 | padding: var(--space-3) var(--space-6);
299 | transition: all 0.3s ease;
300 | }
301 |
302 | .sync-status-bar.visible {
303 | display: block;
304 | }
305 |
306 | .sync-status-bar.synced {
307 | background: linear-gradient(90deg, rgba(34, 197, 94, 0.05) 0%, rgba(34, 197, 94, 0) 100%);
308 | border-bottom-color: var(--success-light);
309 | }
310 |
311 | .sync-status-bar.syncing {
312 | background: linear-gradient(90deg, rgba(59, 130, 246, 0.1) 0%, rgba(59, 130, 246, 0) 100%);
313 | border-bottom-color: var(--primary-light);
314 | }
315 |
316 | .sync-status-bar.pending {
317 | background: linear-gradient(90deg, rgba(251, 191, 36, 0.1) 0%, rgba(251, 191, 36, 0) 100%);
318 | border-bottom-color: var(--warning-light);
319 | }
320 |
321 | .sync-status-bar.error {
322 | background: linear-gradient(90deg, rgba(239, 68, 68, 0.1) 0%, rgba(239, 68, 68, 0) 100%);
323 | border-bottom-color: var(--danger-light);
324 | }
325 |
326 | .sync-status-content {
327 | display: flex;
328 | justify-content: space-between;
329 | align-items: center;
330 | max-width: 1400px;
331 | margin: 0 auto;
332 | }
333 |
334 | .sync-status-indicator {
335 | display: flex;
336 | align-items: center;
337 | gap: var(--space-2);
338 | font-size: var(--text-sm);
339 | }
340 |
341 | #syncStatusIcon {
342 | font-size: var(--text-lg);
343 | animation: sync-pulse 2s ease-in-out infinite;
344 | }
345 |
346 | .sync-status-bar.syncing #syncStatusIcon {
347 | animation: sync-rotate 1s linear infinite;
348 | }
349 |
350 | #syncStatusText {
351 | font-weight: 600;
352 | color: var(--neutral-900);
353 | }
354 |
355 | .sync-details {
356 | color: var(--neutral-600);
357 | margin-left: var(--space-2);
358 | }
359 |
360 | .sync-button {
361 | display: flex;
362 | align-items: center;
363 | gap: var(--space-2);
364 | padding: var(--space-2) var(--space-4);
365 | background: var(--primary);
366 | color: white;
367 | border: none;
368 | border-radius: var(--radius-md);
369 | font-size: var(--text-sm);
370 | font-weight: 600;
371 | cursor: pointer;
372 | transition: all 0.2s ease;
373 | }
374 |
375 | .sync-button:hover:not(:disabled) {
376 | background: var(--primary-dark);
377 | transform: translateY(-1px);
378 | box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
379 | }
380 |
381 | .sync-button:active:not(:disabled) {
382 | transform: translateY(0);
383 | }
384 |
385 | .sync-button:disabled {
386 | background: var(--neutral-300);
387 | cursor: not-allowed;
388 | opacity: 0.6;
389 | }
390 |
391 | .sync-button-icon {
392 | font-size: var(--text-base);
393 | }
394 |
395 | @keyframes sync-rotate {
396 | from {
397 | transform: rotate(0deg);
398 | }
399 | to {
400 | transform: rotate(360deg);
401 | }
402 | }
403 |
404 | @keyframes sync-pulse {
405 | 0%, 100% {
406 | opacity: 1;
407 | }
408 | 50% {
409 | opacity: 0.6;
410 | }
411 | }
412 |
413 | /* Main Content */
414 | .main-content {
415 | grid-area: main;
416 | max-width: 1200px;
417 | margin: 0 auto;
418 | padding: var(--space-8) var(--space-6);
419 | width: 100%;
420 | }
421 |
422 | /* View Containers */
423 | .view-container {
424 | display: none;
425 | }
426 |
427 | .view-container.active {
428 | display: block;
429 | }
430 |
431 | /* Dashboard Grid Layout */
432 | .dashboard-grid {
433 | display: grid;
434 | grid-template-columns: 1fr 400px;
435 | grid-template-rows: auto auto;
436 | gap: var(--space-8);
437 | grid-template-areas:
438 | "welcome quick-actions"
439 | "recent quick-actions";
440 | }
441 |
442 | .welcome-card {
443 | grid-area: welcome;
444 | background: white;
445 | padding: var(--space-8);
446 | border-radius: var(--radius-xl);
447 | box-shadow: var(--shadow-md);
448 | }
449 |
450 | .welcome-card h2 {
451 | color: var(--neutral-900);
452 | margin-bottom: var(--space-3);
453 | }
454 |
455 | .welcome-card p {
456 | color: var(--neutral-600);
457 | margin-bottom: var(--space-6);
458 | }
459 |
460 | .quick-stats {
461 | display: grid;
462 | grid-template-columns: repeat(3, 1fr);
463 | gap: var(--space-6);
464 | }
465 |
466 | .stat-item {
467 | text-align: center;
468 | }
469 |
470 | .stat-number {
471 | display: block;
472 | font-size: var(--text-2xl);
473 | font-weight: 700;
474 | color: var(--primary);
475 | margin-bottom: var(--space-1);
476 | }
477 |
478 | .stat-label {
479 | font-size: var(--text-sm);
480 | color: var(--neutral-600);
481 | }
482 |
483 | .recent-memories {
484 | grid-area: recent;
485 | background: white;
486 | padding: var(--space-6);
487 | border-radius: var(--radius-xl);
488 | box-shadow: var(--shadow-md);
489 | }
490 |
491 | .quick-actions {
492 | grid-area: quick-actions;
493 | background: white;
494 | padding: var(--space-6);
495 | border-radius: var(--radius-xl);
496 | box-shadow: var(--shadow-md);
497 | }
498 |
499 | .action-grid {
500 | display: grid;
501 | gap: var(--space-4);
502 | }
503 |
504 | .action-card {
505 | display: flex;
506 | align-items: center;
507 | gap: var(--space-3);
508 | padding: var(--space-4);
509 | background: var(--neutral-50);
510 | border: 1px solid var(--neutral-200);
511 | border-radius: var(--radius-lg);
512 | cursor: pointer;
513 | transition: var(--transition-base);
514 | font-size: var(--text-sm);
515 | font-weight: 500;
516 | }
517 |
518 | .action-card:hover {
519 | background: var(--neutral-100);
520 | border-color: var(--primary);
521 | }
522 |
523 | /* Compact Sync Control Styles */
524 | .sync-control-compact {
525 | margin-top: var(--space-4);
526 | padding: var(--space-3);
527 | background: var(--neutral-50);
528 | border: 1px solid var(--neutral-200);
529 | border-radius: var(--radius-md);
530 | border-left: 3px solid var(--neutral-400);
531 | }
532 |
533 | .sync-row {
534 | display: flex;
535 | align-items: center;
536 | gap: var(--space-3);
537 | }
538 |
539 | .sync-status {
540 | display: flex;
541 | align-items: center;
542 | gap: var(--space-2);
543 | flex: 1;
544 | min-width: 0;
545 | }
546 |
547 | .sync-dot {
548 | width: 8px;
549 | height: 8px;
550 | border-radius: 50%;
551 | background: var(--neutral-400);
552 | flex-shrink: 0;
553 | }
554 |
555 | .sync-text-sm {
556 | font-size: var(--text-sm);
557 | color: var(--neutral-700);
558 | font-weight: 500;
559 | white-space: nowrap;
560 | overflow: hidden;
561 | text-overflow: ellipsis;
562 | }
563 |
564 | .sync-progress-sm {
565 | font-size: var(--text-xs);
566 | color: var(--neutral-500);
567 | flex-shrink: 0;
568 | white-space: nowrap;
569 | }
570 |
571 | .sync-buttons-sm {
572 | display: flex;
573 | gap: 2px;
574 | flex-shrink: 0;
575 | }
576 |
577 | .btn-icon-sm {
578 | width: 28px;
579 | height: 28px;
580 | display: flex;
581 | align-items: center;
582 | justify-content: center;
583 | background: transparent;
584 | border: none;
585 | border-radius: var(--radius-sm);
586 | cursor: pointer;
587 | color: var(--neutral-500);
588 | transition: all var(--transition-fast);
589 | }
590 |
591 | .btn-icon-sm:hover {
592 | background: var(--neutral-200);
593 | color: var(--neutral-700);
594 | }
595 |
596 | .btn-icon-sm:active {
597 | transform: scale(0.95);
598 | }
599 |
600 | .btn-icon-sm.btn-icon-primary {
601 | color: var(--primary);
602 | }
603 |
604 | .btn-icon-sm.btn-icon-primary:hover {
605 | background: rgba(59, 130, 246, 0.15);
606 | color: var(--primary-dark);
607 | }
608 |
609 | .btn-icon-sm:disabled {
610 | opacity: 0.4;
611 | cursor: not-allowed;
612 | }
613 |
614 | /* Sync Control Status States */
615 | .sync-control-compact.synced {
616 | border-left-color: var(--success);
617 | }
618 |
619 | .sync-control-compact.synced .sync-dot {
620 | background: var(--success);
621 | }
622 |
623 | .sync-control-compact.syncing {
624 | border-left-color: var(--primary);
625 | }
626 |
627 | .sync-control-compact.syncing .sync-dot {
628 | background: var(--primary);
629 | animation: spinner 1s linear infinite;
630 | }
631 |
632 | .sync-control-compact.pending {
633 | border-left-color: var(--warning);
634 | }
635 |
636 | .sync-control-compact.pending .sync-dot {
637 | background: var(--warning);
638 | }
639 |
640 | .sync-control-compact.error {
641 | border-left-color: var(--error);
642 | }
643 |
644 | .sync-control-compact.error .sync-dot {
645 | background: var(--error);
646 | }
647 |
648 | .sync-control-compact.paused {
649 | border-left-color: var(--neutral-400);
650 | }
651 |
652 | .sync-control-compact.paused .sync-dot {
653 | background: var(--neutral-400);
654 | }
655 |
656 | @keyframes pulse {
657 | 0%, 100% { opacity: 1; }
658 | 50% { opacity: 0.5; }
659 | }
660 |
661 | @keyframes spinner {
662 | 0% { transform: rotate(0deg); }
663 | 100% { transform: rotate(360deg); }
664 | }
665 |
666 | /* Backup Settings in Modal */
667 | .backup-settings {
668 | margin-top: var(--space-2);
669 | }
670 |
671 | .backup-actions {
672 | margin-top: var(--space-3);
673 | display: flex;
674 | gap: var(--space-2);
675 | }
676 |
677 | /* Small button variant */
678 | .btn-sm {
679 | padding: var(--space-2);
680 | font-size: var(--text-xs);
681 | min-width: auto;
682 | }
683 |
684 | .btn-sm svg {
685 | width: 16px;
686 | height: 16px;
687 | }
688 |
689 | /* Memory List/Grid Components */
690 | .memory-list {
691 | display: flex;
692 | flex-direction: column;
693 | gap: var(--space-4);
694 | max-height: 600px;
695 | overflow-y: auto;
696 | }
697 |
698 | .memory-grid {
699 | display: grid;
700 | grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
701 | gap: var(--space-6);
702 | }
703 |
704 | .memory-card {
705 | background: white;
706 | border: 1px solid var(--neutral-200);
707 | border-radius: var(--radius-lg);
708 | padding: var(--space-5);
709 | transition: var(--transition-base);
710 | cursor: pointer;
711 | }
712 |
713 | .memory-card:hover {
714 | border-color: var(--primary);
715 | box-shadow: var(--shadow-md);
716 | }
717 |
718 | .memory-header {
719 | display: flex;
720 | justify-content: space-between;
721 | align-items: flex-start;
722 | margin-bottom: var(--space-3);
723 | }
724 |
725 | .memory-meta {
726 | font-size: var(--text-xs);
727 | color: var(--neutral-500);
728 | }
729 |
730 | .memory-content {
731 | color: var(--neutral-700);
732 | line-height: 1.6;
733 | margin-bottom: var(--space-4);
734 | display: -webkit-box;
735 | -webkit-line-clamp: 3;
736 | -webkit-box-orient: vertical;
737 | overflow: hidden;
738 | }
739 |
740 | .memory-tags {
741 | display: flex;
742 | flex-wrap: wrap;
743 | gap: var(--space-2);
744 | }
745 |
746 | .tag {
747 | background: var(--neutral-100);
748 | color: var(--neutral-700);
749 | padding: var(--space-1) var(--space-2);
750 | border-radius: var(--radius-sm);
751 | font-size: var(--text-xs);
752 | font-weight: 500;
753 | }
754 |
755 | /* Document Group Styles */
756 | .document-group {
757 | background: white;
758 | border: 1px solid var(--neutral-200);
759 | border-radius: var(--radius-lg);
760 | padding: var(--space-5);
761 | transition: var(--transition-base);
762 | cursor: pointer;
763 | margin-bottom: var(--space-4);
764 | }
765 |
766 | .document-group:hover {
767 | border-color: var(--primary);
768 | box-shadow: var(--shadow-md);
769 | }
770 |
771 | .document-header {
772 | display: flex;
773 | align-items: center;
774 | gap: var(--space-3);
775 | margin-bottom: var(--space-3);
776 | }
777 |
778 | .document-icon {
779 | font-size: var(--text-xl);
780 | flex-shrink: 0;
781 | }
782 |
783 | .document-info {
784 | flex: 1;
785 | min-width: 0;
786 | }
787 |
788 | .document-title {
789 | font-weight: 600;
790 | color: var(--neutral-900);
791 | margin-bottom: var(--space-1);
792 | word-break: break-word;
793 | }
794 |
795 | .document-meta {
796 | font-size: var(--text-sm);
797 | color: var(--neutral-500);
798 | }
799 |
800 | .document-preview {
801 | color: var(--neutral-700);
802 | line-height: 1.6;
803 | margin-bottom: var(--space-3);
804 | display: -webkit-box;
805 | -webkit-line-clamp: 2;
806 | -webkit-box-orient: vertical;
807 | overflow: hidden;
808 | }
809 |
810 | .document-tags {
811 | display: flex;
812 | flex-wrap: wrap;
813 | gap: var(--space-2);
814 | margin-bottom: var(--space-3);
815 | }
816 |
817 | .document-actions {
818 | display: flex;
819 | gap: var(--space-2);
820 | justify-content: flex-end;
821 | }
822 |
823 | .document-actions .btn-icon {
824 | display: flex;
825 | align-items: center;
826 | gap: var(--space-1);
827 | padding: var(--space-2) var(--space-3);
828 | background: var(--neutral-100);
829 | color: var(--neutral-700);
830 | border: 1px solid var(--neutral-200);
831 | border-radius: var(--radius-md);
832 | font-size: var(--text-sm);
833 | transition: var(--transition-fast);
834 | cursor: pointer;
835 | }
836 |
837 | .document-actions .btn-icon:hover {
838 | background: var(--neutral-200);
839 | border-color: var(--neutral-300);
840 | }
841 |
842 | .document-actions .btn-remove:hover {
843 | background: var(--error);
844 | color: white;
845 | border-color: var(--error);
846 | }
847 |
848 | /* Document Chunks Modal */
849 | .document-chunks {
850 | max-height: 70vh;
851 | overflow-y: auto;
852 | }
853 |
854 | .chunk-item {
855 | background: var(--neutral-50);
856 | border: 1px solid var(--neutral-200);
857 | border-radius: var(--radius-md);
858 | padding: var(--space-4);
859 | margin-bottom: var(--space-4);
860 | }
861 |
862 | .chunk-header {
863 | display: flex;
864 | justify-content: space-between;
865 | align-items: center;
866 | margin-bottom: var(--space-2);
867 | }
868 |
869 | .chunk-number {
870 | font-weight: 600;
871 | color: var(--neutral-900);
872 | }
873 |
874 | .chunk-meta {
875 | font-size: var(--text-sm);
876 | color: var(--neutral-500);
877 | }
878 |
879 | .chunk-content {
880 | color: var(--neutral-700);
881 | line-height: 1.6;
882 | margin-bottom: var(--space-3);
883 | white-space: pre-wrap;
884 | word-break: break-word;
885 | max-height: 400px;
886 | overflow-y: auto;
887 | padding: var(--space-3);
888 | background: white;
889 | border-radius: var(--radius-sm);
890 | }
891 |
892 | .chunk-tags {
893 | display: flex;
894 | flex-wrap: wrap;
895 | gap: var(--space-2);
896 | }
897 |
898 | /* Dark mode: Fix white backgrounds in document chunk modals */
899 | body.dark-mode .chunk-item {
900 | background: #1f2937 !important;
901 | border-color: #374151 !important;
902 | }
903 |
904 | body.dark-mode .chunk-content {
905 | background: #111827 !important;
906 | color: #d1d5db !important;
907 | }
908 |
909 | body.dark-mode .chunk-number {
910 | color: #60a5fa !important;
911 | }
912 |
913 | body.dark-mode .chunk-meta {
914 | color: #9ca3af !important;
915 | }
916 |
917 | body.dark-mode .chunk-header {
918 | color: #f3f4f6 !important;
919 | }
920 |
921 | /* Search Layout */
922 | .search-layout {
923 | display: grid;
924 | grid-template-columns: 280px 1fr;
925 | gap: var(--space-8);
926 | }
927 |
928 | .search-filters {
929 | background: white;
930 | padding: var(--space-6);
931 | border-radius: var(--radius-xl);
932 | box-shadow: var(--shadow-md);
933 | height: fit-content;
934 | }
935 |
936 | .filter-section {
937 | margin-bottom: var(--space-5);
938 | }
939 |
940 | .filter-section label {
941 | display: block;
942 | font-size: var(--text-sm);
943 | font-weight: 500;
944 | color: var(--neutral-700);
945 | margin-bottom: var(--space-2);
946 | }
947 |
948 | .filter-section input,
949 | .filter-section select {
950 | width: 100%;
951 | padding: var(--space-3);
952 | border: 1px solid var(--neutral-300);
953 | border-radius: var(--radius-md);
954 | font-size: var(--text-sm);
955 | }
956 |
957 | .search-results {
958 | background: white;
959 | border-radius: var(--radius-xl);
960 | box-shadow: var(--shadow-md);
961 | overflow: hidden;
962 | }
963 |
964 | .search-header {
965 | padding: var(--space-6);
966 | border-bottom: 1px solid var(--neutral-200);
967 | display: flex;
968 | justify-content: space-between;
969 | align-items: center;
970 | }
971 |
972 | .results-meta {
973 | display: flex;
974 | align-items: center;
975 | gap: var(--space-4);
976 | }
977 |
978 | .view-options {
979 | display: flex;
980 | gap: var(--space-1);
981 | }
982 |
983 | .view-btn {
984 | padding: var(--space-2) var(--space-3);
985 | border: 1px solid var(--neutral-300);
986 | background: white;
987 | font-size: var(--text-sm);
988 | cursor: pointer;
989 | transition: var(--transition-base);
990 | }
991 |
992 | .view-btn:first-child {
993 | border-radius: var(--radius-md) 0 0 var(--radius-md);
994 | }
995 |
996 | .view-btn:last-child {
997 | border-radius: 0 var(--radius-md) var(--radius-md) 0;
998 | border-left: none;
999 | }
1000 |
1001 | .view-btn.active {
1002 | background: var(--primary);
1003 | color: white;
1004 | border-color: var(--primary);
1005 | }
1006 |
1007 | #searchResultsList {
1008 | padding: var(--space-6);
1009 | }
1010 |
1011 | /* Modal Components */
1012 | .modal-overlay {
1013 | position: fixed;
1014 | top: 0;
1015 | left: 0;
1016 | right: 0;
1017 | bottom: 0;
1018 | background: rgba(0, 0, 0, 0.5);
1019 | display: none;
1020 | align-items: center;
1021 | justify-content: center;
1022 | z-index: 1000;
1023 | padding: var(--space-4);
1024 | }
1025 |
1026 | .modal-overlay.active {
1027 | display: flex;
1028 | }
1029 |
1030 | .modal-content {
1031 | background: white;
1032 | border-radius: var(--radius-xl);
1033 | box-shadow: var(--shadow-xl);
1034 | max-width: 600px;
1035 | width: 100%;
1036 | max-height: 90vh;
1037 | overflow: hidden;
1038 | display: flex;
1039 | flex-direction: column;
1040 | }
1041 |
1042 | .modal-header {
1043 | padding: var(--space-6);
1044 | border-bottom: 1px solid var(--neutral-200);
1045 | display: flex;
1046 | justify-content: space-between;
1047 | align-items: center;
1048 | }
1049 |
1050 | .modal-header h3 {
1051 | margin: 0;
1052 | }
1053 |
1054 | .modal-close {
1055 | background: none;
1056 | border: none;
1057 | padding: var(--space-2);
1058 | cursor: pointer;
1059 | color: var(--neutral-500);
1060 | border-radius: var(--radius-md);
1061 | transition: var(--transition-base);
1062 | }
1063 |
1064 | .modal-close:hover {
1065 | background: var(--neutral-100);
1066 | color: var(--neutral-700);
1067 | }
1068 |
1069 | .modal-body {
1070 | padding: var(--space-6);
1071 | flex: 1;
1072 | overflow-y: auto;
1073 | }
1074 |
1075 | .modal-footer {
1076 | padding: var(--space-6);
1077 | border-top: 1px solid var(--neutral-200);
1078 | display: flex;
1079 | gap: var(--space-3);
1080 | justify-content: flex-end;
1081 | }
1082 |
1083 | /* Form Components */
1084 | .form-group {
1085 | margin-bottom: var(--space-5);
1086 | }
1087 |
1088 | .form-group label {
1089 | display: block;
1090 | font-size: var(--text-sm);
1091 | font-weight: 500;
1092 | color: var(--neutral-700);
1093 | margin-bottom: var(--space-2);
1094 | }
1095 |
1096 | .form-group input,
1097 | .form-group textarea,
1098 | .form-group select {
1099 | width: 100%;
1100 | padding: var(--space-3);
1101 | border: 1px solid var(--neutral-300);
1102 | border-radius: var(--radius-md);
1103 | font-size: var(--text-base);
1104 | transition: var(--transition-base);
1105 | }
1106 |
1107 | .form-group input:focus,
1108 | .form-group textarea:focus,
1109 | .form-group select:focus {
1110 | outline: none;
1111 | border-color: var(--primary);
1112 | box-shadow: 0 0 0 3px rgb(59 130 246 / 0.1);
1113 | }
1114 |
1115 | .form-group textarea {
1116 | resize: vertical;
1117 | min-height: 120px;
1118 | }
1119 |
1120 | /* System Info in Settings Modal */
1121 | .system-info {
1122 | display: flex;
1123 | flex-direction: column;
1124 | gap: var(--space-3);
1125 | }
1126 |
1127 | .info-row {
1128 | display: flex;
1129 | justify-content: space-between;
1130 | align-items: center;
1131 | padding: var(--space-2) 0;
1132 | border-bottom: 1px solid var(--neutral-100);
1133 | }
1134 |
1135 | .info-row:last-child {
1136 | border-bottom: none;
1137 | }
1138 |
1139 | .info-label {
1140 | font-size: var(--text-sm);
1141 | color: var(--neutral-600);
1142 | font-weight: 500;
1143 | }
1144 |
1145 | .info-value {
1146 | font-size: var(--text-sm);
1147 | color: var(--neutral-900);
1148 | font-weight: 600;
1149 | font-family: 'Monaco', 'Courier New', monospace;
1150 | }
1151 |
1152 | /* Loading and Status Components */
1153 | .loading-overlay {
1154 | position: fixed;
1155 | top: 0;
1156 | left: 0;
1157 | right: 0;
1158 | bottom: 0;
1159 | background: rgba(255, 255, 255, 0.9);
1160 | display: none;
1161 | align-items: center;
1162 | justify-content: center;
1163 | flex-direction: column;
1164 | gap: var(--space-4);
1165 | z-index: 2000;
1166 | }
1167 |
1168 | .loading-overlay.active {
1169 | display: flex;
1170 | }
1171 |
1172 | .loading-spinner {
1173 | width: 40px;
1174 | height: 40px;
1175 | border: 4px solid var(--neutral-200);
1176 | border-top: 4px solid var(--primary);
1177 | border-radius: 50%;
1178 | animation: spin 1s linear infinite;
1179 | }
1180 |
1181 | @keyframes spin {
1182 | 0% { transform: rotate(0deg); }
1183 | 100% { transform: rotate(360deg); }
1184 | }
1185 |
1186 | /* Toast Notifications */
1187 | .toast-container {
1188 | position: fixed;
1189 | top: var(--space-6);
1190 | right: var(--space-6);
1191 | z-index: 1500;
1192 | display: flex;
1193 | flex-direction: column;
1194 | gap: var(--space-3);
1195 | }
1196 |
1197 | .toast {
1198 | background: white;
1199 | border: 1px solid var(--neutral-200);
1200 | border-radius: var(--radius-lg);
1201 | padding: var(--space-4);
1202 | box-shadow: var(--shadow-lg);
1203 | min-width: 300px;
1204 | animation: slideIn 0.3s ease-out;
1205 | }
1206 |
1207 | .toast.success {
1208 | border-left: 4px solid var(--success);
1209 | }
1210 |
1211 | .toast.error {
1212 | border-left: 4px solid var(--error);
1213 | }
1214 |
1215 | .toast.warning {
1216 | border-left: 4px solid var(--warning);
1217 | }
1218 |
1219 | @keyframes slideIn {
1220 | from {
1221 | transform: translateX(100%);
1222 | opacity: 0;
1223 | }
1224 | to {
1225 | transform: translateX(0);
1226 | opacity: 1;
1227 | }
1228 | }
1229 |
1230 | /* Connection Status */
1231 | .connection-status {
1232 | position: fixed;
1233 | bottom: var(--space-6);
1234 | right: var(--space-6);
1235 | background: white;
1236 | border: 1px solid var(--neutral-200);
1237 | border-radius: var(--radius-lg);
1238 | padding: var(--space-3) var(--space-4);
1239 | box-shadow: var(--shadow-md);
1240 | display: flex;
1241 | align-items: center;
1242 | gap: var(--space-2);
1243 | font-size: var(--text-sm);
1244 | z-index: 100;
1245 | }
1246 |
1247 | .status-indicator {
1248 | width: 8px;
1249 | height: 8px;
1250 | border-radius: 50%;
1251 | background: var(--success);
1252 | }
1253 |
1254 | .status-indicator.disconnected {
1255 | background: var(--error);
1256 | }
1257 |
1258 | .status-indicator.connecting {
1259 | background: var(--warning);
1260 | animation: pulse 1.5s infinite;
1261 | }
1262 |
1263 | @keyframes pulse {
1264 | 0%, 100% { opacity: 1; }
1265 | 50% { opacity: 0.5; }
1266 | }
1267 |
1268 | /* Responsive Design */
1269 | @media (max-width: 768px) {
1270 | .header-content {
1271 | grid-template-columns: 1fr;
1272 | grid-template-rows: auto auto auto;
1273 | gap: var(--space-4);
1274 | text-align: center;
1275 | }
1276 |
1277 | .search-section {
1278 | max-width: none;
1279 | }
1280 |
1281 | .action-buttons {
1282 | justify-content: center;
1283 | }
1284 |
1285 | .btn-text {
1286 | display: none;
1287 | }
1288 |
1289 | .nav-container {
1290 | flex-wrap: wrap;
1291 | justify-content: center;
1292 | }
1293 |
1294 | .dashboard-grid {
1295 | grid-template-columns: 1fr;
1296 | grid-template-areas:
1297 | "welcome"
1298 | "recent"
1299 | "quick-actions";
1300 | }
1301 |
1302 | .search-layout {
1303 | grid-template-columns: 1fr;
1304 | gap: var(--space-4);
1305 | }
1306 |
1307 | .search-filters {
1308 | order: 2;
1309 | }
1310 |
1311 | .search-results {
1312 | order: 1;
1313 | }
1314 |
1315 | .memory-grid {
1316 | grid-template-columns: 1fr;
1317 | }
1318 |
1319 | .quick-stats {
1320 | grid-template-columns: 1fr;
1321 | gap: var(--space-4);
1322 | }
1323 | }
1324 |
1325 | @media (min-width: 769px) and (max-width: 1024px) {
1326 | .dashboard-grid {
1327 | grid-template-columns: 1fr 300px;
1328 | }
1329 |
1330 | .search-layout {
1331 | grid-template-columns: 250px 1fr;
1332 | }
1333 | }
1334 |
1335 | /* Utility Classes */
1336 | .hidden {
1337 | display: none !important;
1338 | }
1339 |
1340 | .sr-only {
1341 | position: absolute;
1342 | width: 1px;
1343 | height: 1px;
1344 | padding: 0;
1345 | margin: -1px;
1346 | overflow: hidden;
1347 | clip: rect(0, 0, 0, 0);
1348 | white-space: nowrap;
1349 | border: 0;
1350 | }
1351 |
1352 | /* Browse View - Tags Cloud */
1353 | .browse-content {
1354 | padding: var(--space-6);
1355 | }
1356 |
1357 | .tags-cloud {
1358 | display: flex;
1359 | flex-wrap: wrap;
1360 | gap: var(--space-3);
1361 | justify-content: center;
1362 | margin-bottom: var(--space-8);
1363 | padding: var(--space-6);
1364 | background: var(--neutral-50);
1365 | border-radius: var(--radius-lg);
1366 | }
1367 |
1368 | .tag-bubble {
1369 | display: inline-flex;
1370 | align-items: center;
1371 | gap: var(--space-2);
1372 | padding: var(--space-2) var(--space-4);
1373 | background: var(--neutral-100);
1374 | color: var(--neutral-700);
1375 | border: 1px solid var(--neutral-200);
1376 | border-radius: var(--radius-sm);
1377 | font-size: var(--text-sm);
1378 | font-weight: 500;
1379 | cursor: pointer;
1380 | transition: all 0.2s ease;
1381 | text-decoration: none;
1382 | }
1383 |
1384 | .tag-bubble:hover {
1385 | background: var(--neutral-200);
1386 | border-color: var(--neutral-300);
1387 | transform: translateY(-1px);
1388 | box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
1389 | }
1390 |
1391 | .tag-bubble .count {
1392 | background: var(--neutral-200);
1393 | color: var(--neutral-700);
1394 | padding: var(--space-1) var(--space-2);
1395 | border-radius: var(--radius-sm);
1396 | font-size: var(--text-xs);
1397 | font-weight: 600;
1398 | }
1399 |
1400 | .tagged-memories {
1401 | margin-top: var(--space-8);
1402 | }
1403 |
1404 | .tagged-memories .section-header {
1405 | display: flex;
1406 | justify-content: space-between;
1407 | align-items: center;
1408 | margin-bottom: var(--space-6);
1409 | padding-bottom: var(--space-4);
1410 | border-bottom: 2px solid var(--neutral-200);
1411 | }
1412 |
1413 | .tagged-memories h3 {
1414 | color: var(--neutral-800);
1415 | font-size: var(--text-xl);
1416 | }
1417 |
1418 | #selectedTagName {
1419 | color: var(--primary);
1420 | font-weight: 600;
1421 | }
1422 |
1423 | /* Memory Details Metadata Styles */
1424 | .memory-metadata {
1425 | margin-top: var(--space-4);
1426 | border: 1px solid var(--neutral-200);
1427 | border-radius: 8px;
1428 | overflow: hidden;
1429 | }
1430 |
1431 | .metadata-toggle {
1432 | background: var(--neutral-50);
1433 | padding: var(--space-3) var(--space-4);
1434 | margin: 0;
1435 | border-bottom: 1px solid var(--neutral-200);
1436 | font-size: var(--text-sm);
1437 | font-weight: 600;
1438 | color: var(--neutral-700);
1439 | transition: background-color 0.2s ease;
1440 | }
1441 |
1442 | .metadata-toggle:hover {
1443 | background: var(--neutral-100);
1444 | }
1445 |
1446 | .toggle-icon {
1447 | display: inline-block;
1448 | margin-right: var(--space-2);
1449 | transition: transform 0.2s ease;
1450 | font-size: 0.8em;
1451 | }
1452 |
1453 | .memory-metadata.expanded .toggle-icon {
1454 | transform: rotate(90deg);
1455 | }
1456 |
1457 | .metadata-content {
1458 | max-height: 0;
1459 | overflow: hidden;
1460 | transition: max-height 0.3s ease;
1461 | }
1462 |
1463 | .memory-metadata.expanded .metadata-content {
1464 | max-height: 500px;
1465 | padding: var(--space-4);
1466 | }
1467 |
1468 | .metadata-items {
1469 | display: flex;
1470 | flex-direction: column;
1471 | gap: var(--space-2);
1472 | }
1473 |
1474 | .metadata-item {
1475 | display: flex;
1476 | align-items: flex-start;
1477 | gap: var(--space-2);
1478 | padding: var(--space-2);
1479 | background: var(--neutral-50);
1480 | border-radius: 4px;
1481 | font-family: var(--font-mono);
1482 | font-size: var(--text-sm);
1483 | }
1484 |
1485 | .metadata-key {
1486 | font-weight: 600;
1487 | color: var(--neutral-700);
1488 | min-width: 120px;
1489 | flex-shrink: 0;
1490 | }
1491 |
1492 | .metadata-value {
1493 | color: var(--neutral-600);
1494 | word-break: break-word;
1495 | }
1496 |
1497 | .metadata-string {
1498 | color: var(--success);
1499 | }
1500 |
1501 | .metadata-number {
1502 | color: var(--primary);
1503 | }
1504 |
1505 | .metadata-boolean {
1506 | color: var(--warning);
1507 | }
1508 |
1509 | .metadata-array {
1510 | color: var(--secondary);
1511 | }
1512 |
1513 | .metadata-object {
1514 | color: var(--neutral-500);
1515 | }
1516 |
1517 | .metadata-empty {
1518 | color: var(--neutral-400);
1519 | font-style: italic;
1520 | padding: var(--space-4);
1521 | text-align: center;
1522 | }
1523 |
1524 | /* Memory Type Styling */
1525 | .memory-meta p {
1526 | margin-bottom: var(--space-2);
1527 | }
1528 |
1529 | .memory-meta strong {
1530 | color: var(--neutral-700);
1531 | margin-right: var(--space-2);
1532 | }
1533 |
1534 | /* Print Styles */
1535 | @media print {
1536 | .app-header,
1537 | .main-nav,
1538 | .modal-overlay,
1539 | .toast-container,
1540 | .connection-status {
1541 | display: none !important;
1542 | }
1543 |
1544 | .main-content {
1545 | max-width: none;
1546 | padding: 0;
1547 | }
1548 | }
1549 |
1550 | /* API Documentation Styles */
1551 | #apiDocsView {
1552 | padding: var(--space-6);
1553 | }
1554 |
1555 | .api-docs-header {
1556 | text-align: center;
1557 | margin-bottom: var(--space-8);
1558 | }
1559 |
1560 | .api-docs-header h2 {
1561 | color: var(--neutral-800);
1562 | margin-bottom: var(--space-3);
1563 | }
1564 |
1565 | .api-docs-header p {
1566 | color: var(--neutral-600);
1567 | font-size: var(--text-lg);
1568 | margin-bottom: var(--space-6);
1569 | }
1570 |
1571 | .api-docs-links {
1572 | display: flex;
1573 | gap: var(--space-4);
1574 | justify-content: center;
1575 | flex-wrap: wrap;
1576 | }
1577 |
1578 | .api-endpoints-grid {
1579 | display: grid;
1580 | grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
1581 | gap: var(--space-6);
1582 | max-width: 1200px;
1583 | margin: 0 auto;
1584 | }
1585 |
1586 | .endpoint-section {
1587 | background: var(--neutral-50);
1588 | border-radius: var(--radius-lg);
1589 | border: 1px solid var(--neutral-200);
1590 | overflow: hidden;
1591 | transition: border-color 0.2s ease, box-shadow 0.2s ease;
1592 | }
1593 |
1594 | .endpoint-section:hover {
1595 | border-color: var(--primary);
1596 | box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1);
1597 | }
1598 |
1599 | .endpoint-section h3 {
1600 | background: linear-gradient(135deg, var(--primary), var(--primary-dark));
1601 | color: white;
1602 | padding: var(--space-4);
1603 | margin: 0;
1604 | font-size: var(--text-lg);
1605 | }
1606 |
1607 | .endpoint-list {
1608 | padding: var(--space-4);
1609 | }
1610 |
1611 | .endpoint-item {
1612 | background: white;
1613 | border: 1px solid var(--neutral-200);
1614 | border-radius: var(--radius-md);
1615 | padding: var(--space-4);
1616 | margin-bottom: var(--space-3);
1617 | transition: border-color 0.2s ease, box-shadow 0.2s ease;
1618 | }
1619 |
1620 | .endpoint-item:last-child {
1621 | margin-bottom: 0;
1622 | }
1623 |
1624 | .endpoint-item:hover {
1625 | border-color: var(--primary);
1626 | box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1);
1627 | }
1628 |
1629 | .endpoint-item .method {
1630 | display: inline-block;
1631 | padding: var(--space-1) var(--space-3);
1632 | border-radius: var(--radius-sm);
1633 | font-size: var(--text-xs);
1634 | font-weight: 700;
1635 | text-transform: uppercase;
1636 | margin-right: var(--space-3);
1637 | min-width: 60px;
1638 | text-align: center;
1639 | }
1640 |
1641 | .endpoint-item .method.get {
1642 | background: var(--success);
1643 | color: white;
1644 | }
1645 |
1646 | .endpoint-item .method.post {
1647 | background: var(--primary);
1648 | color: white;
1649 | }
1650 |
1651 | .endpoint-item .method.delete {
1652 | background: var(--error);
1653 | color: white;
1654 | }
1655 |
1656 | .endpoint-item .path {
1657 | font-family: var(--font-mono);
1658 | font-weight: 600;
1659 | color: var(--neutral-700);
1660 | font-size: var(--text-sm);
1661 | }
1662 |
1663 | .endpoint-item .description {
1664 | display: block;
1665 | color: var(--neutral-600);
1666 | font-size: var(--text-sm);
1667 | margin-top: var(--space-2);
1668 | line-height: 1.5;
1669 | }
1670 |
1671 | /* Responsive adjustments for API docs */
1672 | @media (max-width: 768px) {
1673 | .api-endpoints-grid {
1674 | grid-template-columns: 1fr;
1675 | gap: var(--space-4);
1676 | }
1677 |
1678 | .api-docs-links {
1679 | flex-direction: column;
1680 | align-items: center;
1681 | }
1682 |
1683 | .api-docs-links .btn {
1684 | width: 100%;
1685 | max-width: 300px;
1686 | }
1687 | }
1688 |
1689 | /* ============================= */
1690 | /* Search Filter Enhancements */
1691 | /* ============================= */
1692 |
1693 | /* Tooltips */
1694 | .tooltip {
1695 | position: relative;
1696 | display: inline-flex;
1697 | align-items: center;
1698 | justify-content: center;
1699 | cursor: help;
1700 | color: var(--neutral-400);
1701 | font-size: var(--text-sm);
1702 | margin-left: var(--space-2);
1703 | transition: all 0.2s ease;
1704 | vertical-align: middle;
1705 | }
1706 |
1707 | .tooltip svg {
1708 | display: block;
1709 | transition: all 0.2s ease;
1710 | }
1711 |
1712 | .tooltip:hover {
1713 | color: var(--primary);
1714 | transform: scale(1.1);
1715 | }
1716 |
1717 | .tooltip:hover::after {
1718 | content: attr(title);
1719 | position: absolute;
1720 | bottom: 100%;
1721 | left: 50%;
1722 | transform: translateX(-50%);
1723 | background: var(--neutral-800);
1724 | color: white;
1725 | padding: var(--space-3) var(--space-4);
1726 | border-radius: var(--space-2);
1727 | font-size: var(--text-xs);
1728 | white-space: nowrap;
1729 | z-index: 1000;
1730 | box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
1731 | min-width: 150px;
1732 | max-width: 400px;
1733 | overflow: hidden;
1734 | text-overflow: ellipsis;
1735 | line-height: 1.4;
1736 | }
1737 |
1738 | .tooltip:hover::before {
1739 | content: '';
1740 | position: absolute;
1741 | bottom: calc(100% - 5px);
1742 | left: 50%;
1743 | transform: translateX(-50%);
1744 | border: 5px solid transparent;
1745 | border-top-color: var(--neutral-800);
1746 | z-index: 1001;
1747 | }
1748 |
1749 | /* Help Text */
1750 | .help-text {
1751 | display: block;
1752 | font-size: var(--text-xs);
1753 | color: var(--neutral-500);
1754 | margin-top: var(--space-1);
1755 | line-height: 1.4;
1756 | }
1757 |
1758 | /* Filter Actions */
1759 | .filter-actions {
1760 | display: flex;
1761 | gap: var(--space-3);
1762 | margin-top: var(--space-4);
1763 | padding-top: var(--space-4);
1764 | border-top: 1px solid var(--neutral-200);
1765 | }
1766 |
1767 | .filter-actions .btn {
1768 | flex: 1;
1769 | display: flex;
1770 | align-items: center;
1771 | justify-content: center;
1772 | gap: var(--space-2);
1773 | padding: var(--space-3) var(--space-4);
1774 | font-size: var(--text-sm);
1775 | font-weight: 500;
1776 | border-radius: var(--space-2);
1777 | border: none;
1778 | cursor: pointer;
1779 | transition: all 0.2s ease;
1780 | }
1781 |
1782 | .filter-actions .btn-primary {
1783 | background: var(--primary);
1784 | color: white;
1785 | }
1786 |
1787 | .filter-actions .btn-primary:hover {
1788 | background: var(--primary-dark);
1789 | transform: translateY(-1px);
1790 | }
1791 |
1792 | .filter-actions .btn-secondary {
1793 | background: var(--neutral-100);
1794 | color: var(--neutral-700);
1795 | border: 1px solid var(--neutral-300);
1796 | }
1797 |
1798 | .filter-actions .btn-secondary:hover {
1799 | background: var(--neutral-200);
1800 | }
1801 |
1802 | /* Active Filters Display */
1803 | .active-filters {
1804 | margin-top: var(--space-4);
1805 | padding: var(--space-4);
1806 | background: var(--neutral-50);
1807 | border-radius: var(--space-2);
1808 | border: 1px solid var(--neutral-200);
1809 | }
1810 |
1811 | .active-filters h4 {
1812 | font-size: var(--text-sm);
1813 | font-weight: 600;
1814 | color: var(--neutral-700);
1815 | margin-bottom: var(--space-3);
1816 | }
1817 |
1818 | .filter-pills {
1819 | display: flex;
1820 | flex-wrap: wrap;
1821 | gap: var(--space-2);
1822 | }
1823 |
1824 | .filter-pill {
1825 | display: inline-flex;
1826 | align-items: center;
1827 | gap: var(--space-2);
1828 | padding: var(--space-2) var(--space-3);
1829 | background: var(--primary);
1830 | color: white;
1831 | font-size: var(--text-xs);
1832 | border-radius: 9999px;
1833 | border: none;
1834 | cursor: pointer;
1835 | transition: all 0.2s ease;
1836 | }
1837 |
1838 | .filter-pill:hover {
1839 | background: var(--primary-dark);
1840 | }
1841 |
1842 | .filter-pill .remove-filter {
1843 | background: none;
1844 | border: none;
1845 | color: white;
1846 | cursor: pointer;
1847 | padding: 0;
1848 | width: 16px;
1849 | height: 16px;
1850 | border-radius: 50%;
1851 | display: flex;
1852 | align-items: center;
1853 | justify-content: center;
1854 | font-size: 12px;
1855 | line-height: 1;
1856 | }
1857 |
1858 | .filter-pill .remove-filter:hover {
1859 | background: rgba(255, 255, 255, 0.2);
1860 | }
1861 |
1862 | /* Enhanced filter section styling */
1863 | .filter-section {
1864 | margin-bottom: var(--space-4);
1865 | }
1866 |
1867 | .filter-section label {
1868 | display: flex;
1869 | align-items: center;
1870 | font-size: var(--text-sm);
1871 | font-weight: 500;
1872 | color: var(--neutral-700);
1873 | margin-bottom: var(--space-2);
1874 | }
1875 |
1876 | .filter-section input,
1877 | .filter-section select {
1878 | width: 100%;
1879 | padding: var(--space-3);
1880 | border: 1px solid var(--neutral-300);
1881 | border-radius: var(--space-2);
1882 | font-size: var(--text-sm);
1883 | transition: border-color 0.2s ease, box-shadow 0.2s ease;
1884 | }
1885 |
1886 | .filter-section input:focus,
1887 | .filter-section select:focus {
1888 | outline: none;
1889 | border-color: var(--primary);
1890 | box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
1891 | }
1892 |
1893 | /* Loading states */
1894 | .filter-actions .btn:disabled {
1895 | opacity: 0.6;
1896 | cursor: not-allowed;
1897 | transform: none;
1898 | }
1899 |
1900 | .filter-actions .btn.loading {
1901 | position: relative;
1902 | color: transparent;
1903 | }
1904 |
1905 | .filter-actions .btn.loading::after {
1906 | content: '';
1907 | position: absolute;
1908 | top: 50%;
1909 | left: 50%;
1910 | transform: translate(-50%, -50%);
1911 | width: 16px;
1912 | height: 16px;
1913 | border: 2px solid currentColor;
1914 | border-radius: 50%;
1915 | border-top-color: transparent;
1916 | animation: spin 1s linear infinite;
1917 | }
1918 |
1919 | @keyframes spin {
1920 | to {
1921 | transform: translate(-50%, -50%) rotate(360deg);
1922 | }
1923 | }
1924 |
1925 | /* Mobile responsiveness for filter improvements */
1926 | @media (max-width: 768px) {
1927 | .filter-actions {
1928 | flex-direction: column;
1929 | }
1930 |
1931 | .filter-pills {
1932 | gap: var(--space-1);
1933 | }
1934 |
1935 | .filter-pill {
1936 | font-size: 11px;
1937 | padding: var(--space-1) var(--space-2);
1938 | }
1939 |
1940 | .tooltip:hover::after {
1941 | max-width: 250px;
1942 | font-size: 11px;
1943 | }
1944 | }
1945 |
1946 | /* Filters Header with Toggle */
1947 | .filters-header {
1948 | display: flex;
1949 | justify-content: space-between;
1950 | align-items: center;
1951 | margin-bottom: var(--space-4);
1952 | padding-bottom: var(--space-3);
1953 | border-bottom: 1px solid var(--neutral-200);
1954 | }
1955 |
1956 | .filters-header h3 {
1957 | margin: 0;
1958 | display: flex;
1959 | align-items: center;
1960 | }
1961 |
1962 | .mode-toggle-compact {
1963 | display: flex;
1964 | align-items: center;
1965 | gap: var(--space-2);
1966 | }
1967 |
1968 | .mode-toggle-compact .toggle-switch {
1969 | width: 48px;
1970 | height: 24px;
1971 | }
1972 |
1973 | .mode-toggle-compact .slider:before {
1974 | height: 16px;
1975 | width: 16px;
1976 | left: 4px;
1977 | bottom: 4px;
1978 | }
1979 |
1980 | .mode-toggle-compact input:checked + .slider:before {
1981 | transform: translateX(24px);
1982 | }
1983 |
1984 | /* Search Mode Indicator */
1985 | .search-mode-indicator {
1986 | margin-bottom: var(--space-4);
1987 | padding: var(--space-3);
1988 | background: var(--neutral-50);
1989 | border-radius: var(--space-2);
1990 | border: 1px solid var(--neutral-200);
1991 | text-align: center;
1992 | }
1993 |
1994 | .mode-status {
1995 | font-size: var(--text-sm);
1996 | color: var(--neutral-600);
1997 | font-weight: 500;
1998 | }
1999 |
2000 | .mode-status #searchModeText {
2001 | color: var(--primary);
2002 | font-weight: 600;
2003 | }
2004 |
2005 | .toggle-switch {
2006 | position: relative;
2007 | display: inline-block;
2008 | width: 60px;
2009 | height: 28px;
2010 | }
2011 |
2012 | .toggle-switch input {
2013 | opacity: 0;
2014 | width: 0;
2015 | height: 0;
2016 | }
2017 |
2018 | .slider {
2019 | position: absolute;
2020 | cursor: pointer;
2021 | top: 0;
2022 | left: 0;
2023 | right: 0;
2024 | bottom: 0;
2025 | background-color: #666;
2026 | transition: .3s;
2027 | border-radius: 28px;
2028 | }
2029 |
2030 | .slider:before {
2031 | position: absolute;
2032 | content: "";
2033 | height: 20px;
2034 | width: 20px;
2035 | left: 4px;
2036 | bottom: 4px;
2037 | background-color: white;
2038 | transition: .3s;
2039 | border-radius: 50%;
2040 | }
2041 |
2042 | input:checked + .slider {
2043 | background-color: #2563eb; /* Cache bust: fixed 2025-10-03 */
2044 | }
2045 |
2046 | input:checked + .slider:before {
2047 | transform: translateX(32px);
2048 | background-color: white;
2049 | box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
2050 | }
2051 |
2052 | .mode-label {
2053 | display: flex;
2054 | align-items: center;
2055 | gap: var(--space-2);
2056 | font-weight: 600;
2057 | color: var(--neutral-700);
2058 | }
2059 |
2060 | #searchModeText {
2061 | min-width: 120px;
2062 | }
2063 |
2064 |
2065 | /* ============================================================
2066 | DARK MODE - VARIABLE REDEFINITION APPROACH
2067 | Appended 2025-10-04: Redefine color variables for dark theme
2068 | ============================================================ */
2069 |
2070 | /* Utility Classes */
2071 | .hidden {
2072 | display: none !important;
2073 | }
2074 |
2075 | .settings-section-heading {
2076 | margin-top: 0;
2077 | color: var(--neutral-600);
2078 | }
2079 |
2080 | .settings-divider {
2081 | margin: var(--space-6) 0;
2082 | border: none;
2083 | border-top: 1px solid var(--neutral-200);
2084 | }
2085 |
2086 | /* Dark Mode Theme - Redefine Color Variables */
2087 | body.dark-mode {
2088 | /* Invert neutral color scale for dark mode */
2089 | --neutral-50: #111827; /* Darkest background (was lightest) */
2090 | --neutral-100: #1f2937; /* Surface/card background */
2091 | --neutral-200: #374151; /* Borders/dividers */
2092 | --neutral-300: #4b5563; /* Subtle borders */
2093 | --neutral-400: #6b7280; /* Disabled text */
2094 | --neutral-500: #9ca3af; /* Muted text */
2095 | --neutral-600: #d1d5db; /* Body text (was dark, now light) */
2096 | --neutral-700: #e5e7eb; /* Strong text */
2097 | --neutral-800: #f3f4f6; /* Stronger text */
2098 | --neutral-900: #f9fafb; /* Headings/emphasis (was dark, now lightest) */
2099 |
2100 | /* Apply inverted variables to body */
2101 | background-color: var(--neutral-50);
2102 | color: var(--neutral-600);
2103 | }
2104 |
2105 | /* Specific overrides that can't use variables - Cache bust: v8.1.1 fix */
2106 | body.dark-mode .app-header,
2107 | body.dark-mode .main-nav,
2108 | body.dark-mode .sync-status-bar,
2109 | body.dark-mode .welcome-card,
2110 | body.dark-mode .recent-memories,
2111 | body.dark-mode .quick-actions,
2112 | body.dark-mode .memory-card,
2113 | body.dark-mode .action-card,
2114 | body.dark-mode .document-group,
2115 | body.dark-mode .search-filters,
2116 | body.dark-mode .search-results,
2117 | body.dark-mode .modal-content,
2118 | body.dark-mode .toast,
2119 | body.dark-mode .endpoint-item {
2120 | background: var(--neutral-100) !important; /* Dark card background */
2121 | }
2122 |
2123 | /* Dark mode sync status bar gradients */
2124 | body.dark-mode .sync-status-bar.synced {
2125 | background: linear-gradient(90deg, rgba(34, 197, 94, 0.15) 0%, rgba(34, 197, 94, 0) 100%) !important;
2126 | }
2127 |
2128 | body.dark-mode .sync-status-bar.syncing {
2129 | background: linear-gradient(90deg, rgba(59, 130, 246, 0.2) 0%, rgba(59, 130, 246, 0) 100%) !important;
2130 | }
2131 |
2132 | body.dark-mode .sync-status-bar.pending {
2133 | background: linear-gradient(90deg, rgba(251, 191, 36, 0.15) 0%, rgba(251, 191, 36, 0) 100%) !important;
2134 | }
2135 |
2136 | body.dark-mode .sync-status-bar.error {
2137 | background: linear-gradient(90deg, rgba(239, 68, 68, 0.15) 0%, rgba(239, 68, 68, 0) 100%) !important;
2138 | }
2139 |
2140 | body.dark-mode .memory-card,
2141 | body.dark-mode .welcome-card,
2142 | body.dark-mode .action-card,
2143 | body.dark-mode .modal-content,
2144 | body.dark-mode .search-filters,
2145 | body.dark-mode .search-results {
2146 | border-color: var(--neutral-200) !important;
2147 | }
2148 |
2149 | body.dark-mode .memory-card:hover,
2150 | body.dark-mode .action-card:hover {
2151 | box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
2152 | }
2153 |
2154 | body.dark-mode .nav-item:hover {
2155 | background: var(--neutral-200);
2156 | color: var(--primary);
2157 | }
2158 |
2159 | body.dark-mode .nav-item.active {
2160 | color: var(--primary);
2161 | border-bottom-color: var(--primary);
2162 | }
2163 |
2164 | /* Override specific element colors that need explicit dark mode values - Cache bust: v8.1.1 */
2165 | body.dark-mode .memory-content {
2166 | color: var(--neutral-900) !important; /* Brightest text for readability */
2167 | }
2168 |
2169 | body.dark-mode .memory-meta {
2170 | color: var(--neutral-600) !important; /* Lighter but still readable for metadata */
2171 | }
2172 |
2173 | body.dark-mode .memory-meta strong {
2174 | color: var(--neutral-900) !important; /* Bright labels for readability */
2175 | }
2176 |
2177 | body.dark-mode .action-card h3,
2178 | body.dark-mode .action-card p,
2179 | body.dark-mode .action-card span {
2180 | color: var(--neutral-900);
2181 | }
2182 |
2183 | /* Connection status indicator dark mode */
2184 | body.dark-mode .connection-status {
2185 | background: var(--neutral-100) !important;
2186 | border-color: var(--neutral-200) !important;
2187 | color: var(--neutral-900) !important;
2188 | }
2189 |
2190 | body.dark-mode .action-card svg {
2191 | color: var(--primary);
2192 | }
2193 |
2194 | body.dark-mode h4 {
2195 | color: var(--neutral-600);
2196 | }
2197 |
2198 | body.dark-mode .filter-chip.active {
2199 | background: var(--primary);
2200 | color: #ffffff;
2201 | border-color: var(--primary);
2202 | }
2203 |
2204 | body.dark-mode .toast.success {
2205 | border-left-color: var(--success);
2206 | }
2207 |
2208 | body.dark-mode .toast.error {
2209 | border-left-color: var(--error);
2210 | }
2211 |
2212 | body.dark-mode .toast.info {
2213 | border-left-color: var(--primary);
2214 | }
2215 |
2216 | /* Scrollbars (webkit browsers) */
2217 | body.dark-mode ::-webkit-scrollbar {
2218 | background: var(--neutral-50);
2219 | }
2220 |
2221 | body.dark-mode ::-webkit-scrollbar-thumb {
2222 | background: var(--neutral-200);
2223 | }
2224 |
2225 | body.dark-mode ::-webkit-scrollbar-thumb:hover {
2226 | background: var(--neutral-300);
2227 | }
2228 |
2229 | /* ===================================
2230 | Footer Styles
2231 | =================================== */
2232 |
2233 | .app-footer {
2234 | grid-area: footer;
2235 | margin-top: 4rem;
2236 | padding: 3rem 2rem 2rem;
2237 | background: var(--neutral-50);
2238 | border-top: 1px solid var(--neutral-100);
2239 | }
2240 |
2241 | .footer-content {
2242 | max-width: 1200px;
2243 | margin: 0 auto;
2244 | display: grid;
2245 | grid-template-columns: repeat(3, 1fr);
2246 | gap: 3rem;
2247 | }
2248 |
2249 | .footer-section h4 {
2250 | font-size: 0.875rem;
2251 | font-weight: 600;
2252 | text-transform: uppercase;
2253 | letter-spacing: 0.05em;
2254 | color: var(--neutral-900);
2255 | margin: 0 0 1rem 0;
2256 | }
2257 |
2258 | .footer-links {
2259 | list-style: none;
2260 | padding: 0;
2261 | margin: 0;
2262 | }
2263 |
2264 | .footer-links li {
2265 | margin-bottom: 0.75rem;
2266 | }
2267 |
2268 | .footer-links a {
2269 | color: var(--neutral-700);
2270 | text-decoration: none;
2271 | font-size: 0.875rem;
2272 | display: inline-flex;
2273 | align-items: center;
2274 | gap: 0.5rem;
2275 | transition: color 0.2s ease;
2276 | }
2277 |
2278 | .footer-links a:hover {
2279 | color: var(--blue-600);
2280 | }
2281 |
2282 | .footer-links svg {
2283 | flex-shrink: 0;
2284 | }
2285 |
2286 | .footer-description {
2287 | font-size: 0.875rem;
2288 | color: var(--neutral-600);
2289 | margin: 0 0 1.5rem 0;
2290 | line-height: 1.6;
2291 | }
2292 |
2293 | .footer-license {
2294 | display: flex;
2295 | align-items: center;
2296 | gap: 0.5rem;
2297 | margin-bottom: 0.75rem;
2298 | }
2299 |
2300 | .footer-license svg {
2301 | color: var(--neutral-500);
2302 | flex-shrink: 0;
2303 | }
2304 |
2305 | .footer-license a {
2306 | color: var(--neutral-700);
2307 | text-decoration: none;
2308 | font-size: 0.875rem;
2309 | transition: color 0.2s ease;
2310 | }
2311 |
2312 | .footer-license a:hover {
2313 | color: var(--blue-600);
2314 | }
2315 |
2316 | .footer-copyright {
2317 | font-size: 0.75rem;
2318 | color: var(--neutral-500);
2319 | }
2320 |
2321 | /* Dark mode footer styles */
2322 | body.dark-mode .app-footer {
2323 | background: var(--neutral-100) !important; /* Dark surface background */
2324 | border-top-color: var(--neutral-200) !important;
2325 | }
2326 |
2327 | body.dark-mode .footer-section h4 {
2328 | color: var(--neutral-900) !important; /* Light text for readability */
2329 | }
2330 |
2331 | body.dark-mode .footer-links a {
2332 | color: var(--neutral-700) !important; /* Medium-light link text */
2333 | }
2334 |
2335 | body.dark-mode .footer-links a:hover {
2336 | color: var(--blue-400);
2337 | }
2338 |
2339 | body.dark-mode .footer-description {
2340 | color: var(--neutral-600) !important; /* Readable body text */
2341 | }
2342 |
2343 | body.dark-mode .footer-license svg {
2344 | color: var(--neutral-500);
2345 | }
2346 |
2347 | body.dark-mode .footer-license a {
2348 | color: var(--neutral-700) !important; /* Match link colors */
2349 | }
2350 |
2351 | body.dark-mode .footer-license a:hover {
2352 | color: var(--blue-400);
2353 | }
2354 |
2355 | body.dark-mode .footer-copyright {
2356 | color: var(--neutral-500) !important; /* Muted text */
2357 | }
2358 |
2359 | /* ===================================
2360 | Documents View Styles
2361 | =================================== */
2362 |
2363 | .documents-layout {
2364 | display: flex;
2365 | flex-direction: column;
2366 | gap: var(--space-8);
2367 | padding: var(--space-6);
2368 | }
2369 |
2370 | .documents-section {
2371 | background: white;
2372 | border-radius: var(--radius-xl);
2373 | padding: var(--space-6);
2374 | box-shadow: var(--shadow-sm);
2375 | }
2376 |
2377 | .documents-section h2 {
2378 | margin: 0 0 var(--space-6) 0;
2379 | color: var(--neutral-900);
2380 | font-size: var(--text-xl);
2381 | font-weight: 600;
2382 | }
2383 |
2384 | /* Upload Area */
2385 | .upload-area {
2386 | margin-bottom: var(--space-6);
2387 | }
2388 |
2389 | .drop-zone {
2390 | border: 2px dashed var(--neutral-300);
2391 | border-radius: var(--radius-lg);
2392 | padding: var(--space-12);
2393 | text-align: center;
2394 | transition: var(--transition-base);
2395 | background: var(--neutral-50);
2396 | cursor: pointer;
2397 | }
2398 |
2399 | .drop-zone:hover,
2400 | .drop-zone.drag-over {
2401 | border-color: var(--primary);
2402 | background: rgba(59, 130, 246, 0.05);
2403 | }
2404 |
2405 | .drop-zone-content {
2406 | display: flex;
2407 | flex-direction: column;
2408 | align-items: center;
2409 | gap: var(--space-4);
2410 | }
2411 |
2412 | .drop-zone-content svg {
2413 | color: var(--neutral-400);
2414 | opacity: 0.7;
2415 | }
2416 |
2417 | .drop-zone-content h3 {
2418 | margin: 0;
2419 | color: var(--neutral-900);
2420 | font-size: var(--text-xl);
2421 | font-weight: 500;
2422 | }
2423 |
2424 | .drop-zone-content p {
2425 | margin: 0;
2426 | color: var(--neutral-600);
2427 | }
2428 |
2429 | .supported-formats {
2430 | font-size: var(--text-sm) !important;
2431 | color: var(--neutral-500) !important;
2432 | }
2433 |
2434 | .link-button {
2435 | background: none;
2436 | border: none;
2437 | color: var(--primary);
2438 | text-decoration: underline;
2439 | cursor: pointer;
2440 | font-size: inherit;
2441 | padding: 0;
2442 | }
2443 |
2444 | .link-button:hover {
2445 | color: var(--primary-dark);
2446 | }
2447 |
2448 | /* Upload Configuration */
2449 | .upload-config {
2450 | margin-bottom: var(--space-6);
2451 | }
2452 |
2453 | .config-section {
2454 | margin-bottom: var(--space-4);
2455 | }
2456 |
2457 | .config-section label {
2458 | display: block;
2459 | margin-bottom: var(--space-2);
2460 | font-weight: 500;
2461 | color: var(--neutral-700);
2462 | font-size: var(--text-sm);
2463 | }
2464 |
2465 | .config-row {
2466 | display: grid;
2467 | grid-template-columns: 1fr 1fr;
2468 | gap: var(--space-6);
2469 | margin-bottom: var(--space-4);
2470 | }
2471 |
2472 | .form-control {
2473 | width: 100%;
2474 | padding: var(--space-3);
2475 | border: 1px solid var(--neutral-300);
2476 | border-radius: var(--radius-md);
2477 | font-size: var(--text-base);
2478 | transition: var(--transition-fast);
2479 | }
2480 |
2481 | .form-control:focus {
2482 | outline: none;
2483 | border-color: var(--primary);
2484 | box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
2485 | }
2486 |
2487 | .form-control[type="range"] {
2488 | cursor: pointer;
2489 | }
2490 |
2491 | /* Processing Mode Toggle */
2492 | .processing-mode-toggle {
2493 | display: flex;
2494 | gap: var(--space-2);
2495 | margin-bottom: var(--space-2);
2496 | }
2497 |
2498 | .mode-btn {
2499 | display: flex;
2500 | align-items: center;
2501 | gap: var(--space-2);
2502 | padding: var(--space-3) var(--space-4);
2503 | border: 1px solid var(--neutral-300);
2504 | border-radius: var(--radius-md);
2505 | background: var(--neutral-50);
2506 | color: var(--neutral-700);
2507 | font-size: var(--text-sm);
2508 | font-weight: 500;
2509 | cursor: pointer;
2510 | transition: var(--transition-fast);
2511 | flex: 1;
2512 | justify-content: center;
2513 | }
2514 |
2515 | .mode-btn:hover {
2516 | background: var(--neutral-100);
2517 | border-color: var(--neutral-400);
2518 | }
2519 |
2520 | .mode-btn.active {
2521 | background: var(--primary);
2522 | border-color: var(--primary);
2523 | color: white;
2524 | }
2525 |
2526 | .mode-btn.active:hover {
2527 | background: var(--primary-dark);
2528 | }
2529 |
2530 | .mode-description {
2531 | font-size: var(--text-xs);
2532 | color: var(--neutral-500);
2533 | margin-top: var(--space-1);
2534 | }
2535 |
2536 | .form-help {
2537 | display: block;
2538 | font-size: var(--text-xs);
2539 | color: var(--neutral-500);
2540 | margin-top: var(--space-1);
2541 | }
2542 |
2543 | /* Upload Actions */
2544 | .upload-actions {
2545 | text-align: center;
2546 | margin-bottom: var(--space-8);
2547 | }
2548 |
2549 | /* Upload History */
2550 | .upload-history {
2551 | min-height: 200px;
2552 | display: flex;
2553 | flex-direction: column;
2554 | gap: var(--space-4);
2555 | }
2556 |
2557 | .upload-item {
2558 | display: flex;
2559 | align-items: center;
2560 | justify-content: space-between;
2561 | padding: var(--space-4);
2562 | border: 1px solid var(--neutral-200);
2563 | border-radius: var(--radius-md);
2564 | background: var(--neutral-50);
2565 | }
2566 |
2567 | .upload-item.success {
2568 | border-color: var(--success);
2569 | background: rgba(16, 185, 129, 0.05);
2570 | }
2571 |
2572 | .upload-item.error {
2573 | border-color: var(--error);
2574 | background: rgba(239, 68, 68, 0.05);
2575 | }
2576 |
2577 | .upload-item.processing {
2578 | border-color: var(--warning);
2579 | background: rgba(245, 158, 11, 0.05);
2580 | }
2581 |
2582 | .upload-info {
2583 | flex: 1;
2584 | }
2585 |
2586 | .upload-filename {
2587 | font-weight: 500;
2588 | color: var(--neutral-900);
2589 | margin-bottom: var(--space-1);
2590 | }
2591 |
2592 | .upload-meta {
2593 | font-size: var(--text-sm);
2594 | color: var(--neutral-600);
2595 | }
2596 |
2597 | .upload-status {
2598 | display: flex;
2599 | align-items: center;
2600 | gap: var(--space-2);
2601 | font-size: var(--text-sm);
2602 | font-weight: 500;
2603 | }
2604 |
2605 | .upload-status.success {
2606 | color: var(--success);
2607 | }
2608 |
2609 | .upload-status.error {
2610 | color: var(--error);
2611 | }
2612 |
2613 | .upload-status.processing {
2614 | color: var(--warning);
2615 | }
2616 |
2617 | /* Progress Bar */
2618 | .progress-bar {
2619 | width: 100%;
2620 | height: 8px;
2621 | background: var(--neutral-200);
2622 | border-radius: var(--radius-sm);
2623 | overflow: hidden;
2624 | margin-top: var(--space-2);
2625 | }
2626 |
2627 | .progress-fill {
2628 | height: 100%;
2629 | background: var(--primary);
2630 | border-radius: var(--radius-sm);
2631 | transition: width var(--transition-base);
2632 | }
2633 |
2634 | /* Dark mode for documents */
2635 | body.dark-mode .documents-section {
2636 | background: var(--neutral-100);
2637 | border-color: var(--neutral-200);
2638 | }
2639 |
2640 | body.dark-mode .drop-zone {
2641 | border-color: var(--neutral-200);
2642 | background: var(--neutral-100);
2643 | }
2644 |
2645 | body.dark-mode .drop-zone:hover,
2646 | body.dark-mode .drop-zone.drag-over {
2647 | border-color: var(--primary);
2648 | background: rgba(59, 130, 246, 0.1);
2649 | }
2650 |
2651 | body.dark-mode .drop-zone-content h3 {
2652 | color: var(--neutral-900);
2653 | }
2654 |
2655 | body.dark-mode .drop-zone-content p {
2656 | color: var(--neutral-700);
2657 | }
2658 |
2659 | body.dark-mode .upload-item {
2660 | background: var(--neutral-200);
2661 | border-color: var(--neutral-300);
2662 | }
2663 |
2664 | body.dark-mode .upload-item.success {
2665 | border-color: var(--success);
2666 | background: rgba(16, 185, 129, 0.1);
2667 | }
2668 |
2669 | body.dark-mode .upload-item.error {
2670 | border-color: var(--error);
2671 | background: rgba(16, 185, 129, 0.1);
2672 | }
2673 |
2674 | body.dark-mode .upload-item.processing {
2675 | border-color: var(--warning);
2676 | background: rgba(245, 158, 11, 0.1);
2677 | }
2678 |
2679 | body.dark-mode .upload-filename {
2680 | color: var(--neutral-900);
2681 | }
2682 |
2683 | body.dark-mode .upload-meta {
2684 | color: var(--neutral-600);
2685 | }
2686 |
2687 | /* Dark mode - Chunking Help Section */
2688 | body.dark-mode .chunking-help {
2689 | background: var(--neutral-100) !important;
2690 | border-color: var(--neutral-200) !important;
2691 | }
2692 |
2693 | body.dark-mode .help-header {
2694 | border-bottom-color: var(--neutral-200) !important;
2695 | color: var(--neutral-900) !important;
2696 | }
2697 |
2698 | body.dark-mode .help-content {
2699 | color: var(--neutral-700) !important;
2700 | }
2701 |
2702 | body.dark-mode .help-note {
2703 | background: rgba(245, 158, 11, 0.15) !important;
2704 | border-left-color: var(--warning) !important;
2705 | color: var(--neutral-900) !important;
2706 | }
2707 |
2708 | body.dark-mode .help-option {
2709 | background: var(--neutral-50) !important;
2710 | border-color: var(--neutral-200) !important;
2711 | }
2712 |
2713 | body.dark-mode .help-option:hover {
2714 | border-color: var(--primary) !important;
2715 | box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2) !important;
2716 | }
2717 |
2718 | body.dark-mode .help-option-header strong {
2719 | color: var(--neutral-900) !important;
2720 | }
2721 |
2722 | body.dark-mode .help-option p {
2723 | color: var(--neutral-700) !important;
2724 | }
2725 |
2726 | body.dark-mode .help-option p strong {
2727 | color: var(--neutral-900) !important;
2728 | }
2729 |
2730 | body.dark-mode .help-tips {
2731 | background: rgba(59, 130, 246, 0.15) !important;
2732 | border-left-color: var(--primary) !important;
2733 | }
2734 |
2735 | body.dark-mode .help-tips strong {
2736 | color: var(--neutral-900) !important;
2737 | }
2738 |
2739 | body.dark-mode .help-tips li {
2740 | color: var(--neutral-700) !important;
2741 | }
2742 |
2743 | body.dark-mode .help-tips li strong {
2744 | color: var(--primary) !important;
2745 | }
2746 |
2747 | body.dark-mode .close-help {
2748 | color: var(--neutral-600) !important;
2749 | }
2750 |
2751 | body.dark-mode .close-help:hover {
2752 | color: var(--error) !important;
2753 | }
2754 |
2755 | /* Dark mode - Overlap diagram */
2756 | body.dark-mode .help-example {
2757 | background: var(--neutral-50) !important;
2758 | border-color: var(--neutral-200) !important;
2759 | }
2760 |
2761 | body.dark-mode .help-example strong {
2762 | color: var(--neutral-900) !important;
2763 | }
2764 |
2765 | body.dark-mode .chunk-demo {
2766 | box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
2767 | }
2768 |
2769 | body.dark-mode .chunk-part.unique {
2770 | background: linear-gradient(135deg, rgba(59, 130, 246, 0.3) 0%, rgba(59, 130, 246, 0.2) 100%) !important;
2771 | color: var(--blue-300) !important;
2772 | border-color: var(--primary) !important;
2773 | }
2774 |
2775 | body.dark-mode .chunk-part.overlap {
2776 | background: linear-gradient(135deg, rgba(245, 158, 11, 0.3) 0%, rgba(245, 158, 11, 0.2) 100%) !important;
2777 | color: #fbbf24 !important;
2778 | border-color: var(--warning) !important;
2779 | }
2780 |
2781 | body.dark-mode .chunk-demo:hover .chunk-part.overlap {
2782 | background: linear-gradient(135deg, rgba(245, 158, 11, 0.4) 0%, rgba(245, 158, 11, 0.3) 100%) !important;
2783 | }
2784 |
2785 | /* Responsive */
2786 | @media (max-width: 768px) {
2787 | .documents-layout {
2788 | padding: var(--space-4);
2789 | gap: var(--space-6);
2790 | }
2791 |
2792 | .documents-section {
2793 | padding: var(--space-4);
2794 | }
2795 |
2796 | .drop-zone {
2797 | padding: var(--space-8);
2798 | }
2799 |
2800 | .config-row {
2801 | grid-template-columns: 1fr;
2802 | gap: var(--space-4);
2803 | }
2804 |
2805 | .upload-item {
2806 | flex-direction: column;
2807 | align-items: flex-start;
2808 | gap: var(--space-2);
2809 | }
2810 | }
2811 |
2812 | /* Responsive footer */
2813 | @media (max-width: 768px) {
2814 | .footer-content {
2815 | grid-template-columns: 1fr;
2816 | gap: 2rem;
2817 | }
2818 |
2819 | .app-footer {
2820 | padding: 2rem 1rem 1.5rem;
2821 | margin-top: 3rem;
2822 | }
2823 | }
2824 |
2825 | /* Manage View Styles */
2826 | .manage-layout {
2827 | display: flex;
2828 | flex-direction: column;
2829 | gap: var(--space-8);
2830 | padding: var(--space-6);
2831 | }
2832 |
2833 | .manage-section {
2834 | background: white;
2835 | border-radius: var(--radius-xl);
2836 | padding: var(--space-6);
2837 | box-shadow: var(--shadow-sm);
2838 | }
2839 |
2840 | .manage-section h2 {
2841 | margin: 0 0 var(--space-6) 0;
2842 | color: var(--neutral-900);
2843 | font-size: var(--text-xl);
2844 | font-weight: 600;
2845 | }
2846 |
2847 | .bulk-ops-grid {
2848 | display: grid;
2849 | grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
2850 | gap: var(--space-6);
2851 | }
2852 |
2853 | .bulk-op-card {
2854 | background: var(--neutral-50);
2855 | border: 1px solid var(--neutral-200);
2856 | border-radius: var(--radius-lg);
2857 | padding: var(--space-5);
2858 | transition: var(--transition-base);
2859 | }
2860 |
2861 | .bulk-op-card:hover {
2862 | border-color: var(--primary);
2863 | box-shadow: var(--shadow-md);
2864 | }
2865 |
2866 | .bulk-op-card h3 {
2867 | margin: 0 0 var(--space-2) 0;
2868 | color: var(--neutral-900);
2869 | font-size: var(--text-lg);
2870 | font-weight: 600;
2871 | }
2872 |
2873 | .bulk-op-card p {
2874 | margin: 0 0 var(--space-4) 0;
2875 | color: var(--neutral-600);
2876 | font-size: var(--text-sm);
2877 | }
2878 |
2879 | .op-controls {
2880 | display: flex;
2881 | gap: var(--space-3);
2882 | align-items: center;
2883 | }
2884 |
2885 | .op-controls .form-control {
2886 | min-width: 200px;
2887 | flex: 1;
2888 | }
2889 |
2890 | .system-ops-grid {
2891 | display: grid;
2892 | grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
2893 | gap: var(--space-4);
2894 | }
2895 |
2896 | .system-op-card {
2897 | background: var(--neutral-50);
2898 | border: 1px solid var(--neutral-200);
2899 | border-radius: var(--radius-lg);
2900 | padding: var(--space-4);
2901 | text-align: center;
2902 | }
2903 |
2904 | .system-op-card h3 {
2905 | margin: 0 0 var(--space-2) 0;
2906 | font-size: var(--text-base);
2907 | font-weight: 600;
2908 | }
2909 |
2910 | .system-op-card p {
2911 | margin: 0 0 var(--space-4) 0;
2912 | font-size: var(--text-sm);
2913 | color: var(--neutral-600);
2914 | }
2915 |
2916 | /* Analytics View Styles */
2917 | .analytics-layout {
2918 | display: flex;
2919 | flex-direction: column;
2920 | gap: var(--space-8);
2921 | padding: var(--space-6);
2922 | }
2923 |
2924 | .analytics-section {
2925 | background: white;
2926 | border-radius: var(--radius-xl);
2927 | padding: var(--space-6);
2928 | box-shadow: var(--shadow-sm);
2929 | }
2930 |
2931 | .analytics-section h2 {
2932 | margin: 0 0 var(--space-6) 0;
2933 | color: var(--neutral-900);
2934 | font-size: var(--text-xl);
2935 | font-weight: 600;
2936 | }
2937 |
2938 | .metrics-grid {
2939 | display: grid;
2940 | grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
2941 | gap: var(--space-4);
2942 | }
2943 |
2944 | .metric-card {
2945 | background: linear-gradient(135deg, var(--primary), var(--primary-dark));
2946 | color: white;
2947 | border-radius: var(--radius-lg);
2948 | padding: var(--space-5);
2949 | text-align: center;
2950 | box-shadow: var(--shadow-md);
2951 | }
2952 |
2953 | .metric-value {
2954 | font-size: var(--text-3xl);
2955 | font-weight: 700;
2956 | margin-bottom: var(--space-2);
2957 | font-variant-numeric: tabular-nums;
2958 | }
2959 |
2960 | .metric-label {
2961 | font-size: var(--text-sm);
2962 | opacity: 0.9;
2963 | font-weight: 500;
2964 | }
2965 |
2966 | .charts-grid {
2967 | display: grid;
2968 | grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
2969 | gap: var(--space-6);
2970 | }
2971 |
2972 | .chart-card {
2973 | background: var(--neutral-50);
2974 | border: 1px solid var(--neutral-200);
2975 | border-radius: var(--radius-lg);
2976 | padding: var(--space-5);
2977 | }
2978 |
2979 | .chart-card h3 {
2980 | margin: 0 0 var(--space-4) 0;
2981 | color: var(--neutral-900);
2982 | font-size: var(--text-lg);
2983 | font-weight: 600;
2984 | }
2985 |
2986 | .chart-controls {
2987 | margin-bottom: var(--space-4);
2988 | }
2989 |
2990 | .chart-container {
2991 | min-height: 200px;
2992 | display: flex;
2993 | align-items: center;
2994 | justify-content: center;
2995 | flex-direction: column;
2996 | gap: var(--space-3);
2997 | color: var(--neutral-500);
2998 | }
2999 |
3000 | .reports-grid {
3001 | display: grid;
3002 | grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
3003 | gap: var(--space-6);
3004 | }
3005 |
3006 | .report-card {
3007 | background: var(--neutral-50);
3008 | border: 1px solid var(--neutral-200);
3009 | border-radius: var(--radius-lg);
3010 | padding: var(--space-5);
3011 | }
3012 |
3013 | .report-card h3 {
3014 | margin: 0 0 var(--space-4) 0;
3015 | color: var(--neutral-900);
3016 | font-size: var(--text-lg);
3017 | font-weight: 600;
3018 | }
3019 |
3020 | .report-content {
3021 | color: var(--neutral-700);
3022 | }
3023 |
3024 | /* Tag Management Styles */
3025 | .tag-stats-table {
3026 | width: 100%;
3027 | border-collapse: collapse;
3028 | margin-top: var(--space-4);
3029 | }
3030 |
3031 | .tag-stats-table th,
3032 | .tag-stats-table td {
3033 | padding: var(--space-3);
3034 | text-align: left;
3035 | border-bottom: 1px solid var(--neutral-200);
3036 | }
3037 |
3038 | .tag-stats-table th {
3039 | background: var(--neutral-100);
3040 | font-weight: 600;
3041 | color: var(--neutral-900);
3042 | }
3043 |
3044 | .tag-stats-table .tag-name {
3045 | font-weight: 500;
3046 | color: var(--primary);
3047 | }
3048 |
3049 | .tag-stats-table .tag-count {
3050 | font-weight: 600;
3051 | color: var(--neutral-900);
3052 | }
3053 |
3054 | .tag-actions {
3055 | display: flex;
3056 | gap: var(--space-2);
3057 | }
3058 |
3059 | .tag-action-btn {
3060 | padding: var(--space-1) var(--space-2);
3061 | border: 1px solid var(--neutral-300);
3062 | border-radius: var(--radius-sm);
3063 | background: var(--neutral-50);
3064 | color: var(--neutral-700);
3065 | font-size: var(--text-xs);
3066 | cursor: pointer;
3067 | transition: var(--transition-base);
3068 | }
3069 |
3070 | .tag-action-btn:hover {
3071 | background: var(--neutral-200);
3072 | border-color: var(--neutral-400);
3073 | }
3074 |
3075 | .tag-action-btn.danger:hover {
3076 | background: var(--error);
3077 | color: white;
3078 | border-color: var(--error);
3079 | }
3080 |
3081 | /* Dark mode support for Manage/Analytics - Fixed v8.5.5 */
3082 | body.dark-mode .manage-section,
3083 | body.dark-mode .analytics-section {
3084 | background: var(--neutral-100) !important; /* Dark card background */
3085 | color: var(--neutral-900) !important; /* Light text */
3086 | }
3087 |
3088 | body.dark-mode .manage-section h2,
3089 | body.dark-mode .analytics-section h2 {
3090 | color: var(--neutral-900) !important;
3091 | }
3092 |
3093 | body.dark-mode .bulk-op-card,
3094 | body.dark-mode .system-op-card,
3095 | body.dark-mode .chart-card,
3096 | body.dark-mode .report-card {
3097 | background: var(--neutral-50) !important; /* Darker nested card background */
3098 | border-color: var(--neutral-200) !important;
3099 | color: var(--neutral-900) !important;
3100 | }
3101 |
3102 | body.dark-mode .bulk-op-card h3,
3103 | body.dark-mode .system-op-card h3,
3104 | body.dark-mode .chart-card h3,
3105 | body.dark-mode .report-card h3 {
3106 | color: var(--neutral-900) !important;
3107 | }
3108 |
3109 | body.dark-mode .bulk-op-card p,
3110 | body.dark-mode .system-op-card p,
3111 | body.dark-mode .chart-card p,
3112 | body.dark-mode .report-card p {
3113 | color: var(--neutral-600) !important;
3114 | }
3115 |
3116 | /* Activity Heatmap Styles */
3117 | .activity-heatmap {
3118 | font-family: var(--font-mono);
3119 | }
3120 |
3121 | .heatmap-stats {
3122 | display: flex;
3123 | gap: var(--space-6);
3124 | margin-bottom: var(--space-4);
3125 | font-size: var(--text-sm);
3126 | color: var(--neutral-600);
3127 | }
3128 |
3129 | .heatmap-month {
3130 | margin-bottom: var(--space-4);
3131 | }
3132 |
3133 | .month-label {
3134 | font-size: var(--text-sm);
3135 | font-weight: 600;
3136 | color: var(--neutral-700);
3137 | margin-bottom: var(--space-2);
3138 | }
3139 |
3140 | .month-grid {
3141 | display: grid;
3142 | grid-template-columns: repeat(7, 1fr);
3143 | gap: 1px;
3144 | background: var(--neutral-200);
3145 | border-radius: var(--radius-sm);
3146 | overflow: hidden;
3147 | }
3148 |
3149 | .heatmap-cell {
3150 | aspect-ratio: 1;
3151 | background: var(--neutral-100);
3152 | border: 1px solid var(--neutral-200);
3153 | cursor: pointer;
3154 | transition: var(--transition-base);
3155 | }
3156 |
3157 | .heatmap-cell:hover {
3158 | opacity: 0.8;
3159 | }
3160 |
3161 | .heatmap-cell.empty {
3162 | background: transparent;
3163 | border: none;
3164 | }
3165 |
3166 | .heatmap-cell.level-0 {
3167 | background: var(--neutral-100);
3168 | }
3169 |
3170 | .heatmap-cell.level-1 {
3171 | background: #9be9a8;
3172 | }
3173 |
3174 | .heatmap-cell.level-2 {
3175 | background: #40c463;
3176 | }
3177 |
3178 | .heatmap-cell.level-3 {
3179 | background: #30a14e;
3180 | }
3181 |
3182 | .heatmap-cell.level-4 {
3183 | background: #216e39;
3184 | }
3185 |
3186 | .heatmap-legend {
3187 | display: flex;
3188 | align-items: center;
3189 | gap: var(--space-2);
3190 | margin-top: var(--space-4);
3191 | font-size: var(--text-sm);
3192 | color: var(--neutral-600);
3193 | }
3194 |
3195 | .legend-cell {
3196 | width: 12px;
3197 | height: 12px;
3198 | border-radius: 2px;
3199 | }
3200 |
3201 | /* Enhanced Tags Report */
3202 | .enhanced-tags-report .report-period {
3203 | font-size: var(--text-sm);
3204 | color: var(--neutral-600);
3205 | margin-bottom: var(--space-3);
3206 | padding-bottom: var(--space-2);
3207 | border-bottom: 1px solid var(--neutral-200);
3208 | }
3209 |
3210 | .enhanced-tags-report .tags-list {
3211 | list-style: none;
3212 | padding: 0;
3213 | }
3214 |
3215 | .enhanced-tags-report .tags-list li {
3216 | padding: var(--space-3);
3217 | border: 1px solid var(--neutral-200);
3218 | border-radius: var(--radius-sm);
3219 | margin-bottom: var(--space-2);
3220 | background: white;
3221 | }
3222 |
3223 | .enhanced-tags-report .tag-header {
3224 | display: flex;
3225 | justify-content: space-between;
3226 | align-items: center;
3227 | margin-bottom: var(--space-2);
3228 | }
3229 |
3230 | .enhanced-tags-report .tag-count {
3231 | font-weight: 600;
3232 | color: var(--primary);
3233 | }
3234 |
3235 | .enhanced-tags-report .tag-cooccurrence {
3236 | font-size: var(--text-sm);
3237 | color: var(--neutral-600);
3238 | font-style: italic;
3239 | }
3240 |
3241 | /* Activity Breakdown */
3242 | .activity-breakdown .activity-summary {
3243 | display: flex;
3244 | gap: var(--space-6);
3245 | margin-bottom: var(--space-4);
3246 | flex-wrap: wrap;
3247 | }
3248 |
3249 | .activity-breakdown .activity-stat {
3250 | font-size: var(--text-sm);
3251 | color: var(--neutral-600);
3252 | }
3253 |
3254 | .activity-breakdown .peak-times {
3255 | margin-bottom: var(--space-4);
3256 | font-size: var(--text-sm);
3257 | color: var(--neutral-700);
3258 | }
3259 |
3260 | .activity-breakdown .activity-chart {
3261 | margin-top: var(--space-4);
3262 | }
3263 |
3264 | .activity-bar-row {
3265 | display: flex;
3266 | align-items: center;
3267 | gap: var(--space-3);
3268 | margin-bottom: var(--space-2);
3269 | padding: var(--space-2);
3270 | background: var(--neutral-50);
3271 | border-radius: var(--radius-sm);
3272 | }
3273 |
3274 | .activity-label {
3275 | min-width: 60px;
3276 | font-size: var(--text-sm);
3277 | font-weight: 500;
3278 | color: var(--neutral-700);
3279 | }
3280 |
3281 | .activity-bar {
3282 | flex: 1;
3283 | height: 8px;
3284 | background: linear-gradient(90deg, var(--primary), var(--primary-dark));
3285 | border-radius: 4px;
3286 | transition: var(--transition-base);
3287 | }
3288 |
3289 | .activity-count {
3290 | min-width: 30px;
3291 | text-align: right;
3292 | font-size: var(--text-sm);
3293 | font-weight: 600;
3294 | color: var(--primary);
3295 | }
3296 |
3297 | /* Storage Report */
3298 | .storage-report .storage-summary {
3299 | display: flex;
3300 | gap: var(--space-6);
3301 | margin-bottom: var(--space-4);
3302 | flex-wrap: wrap;
3303 | }
3304 |
3305 | .storage-report .storage-stat {
3306 | font-size: var(--text-sm);
3307 | color: var(--neutral-600);
3308 | }
3309 |
3310 | .storage-report h4 {
3311 | margin: var(--space-4) 0 var(--space-2) 0;
3312 | color: var(--neutral-900);
3313 | font-size: var(--text-lg);
3314 | font-weight: 600;
3315 | }
3316 |
3317 | .storage-report .largest-memories {
3318 | list-style: none;
3319 | padding: 0;
3320 | }
3321 |
3322 | .storage-report .largest-memories li {
3323 | padding: var(--space-3);
3324 | border: 1px solid var(--neutral-200);
3325 | border-radius: var(--radius-sm);
3326 | margin-bottom: var(--space-2);
3327 | background: white;
3328 | }
3329 |
3330 | .storage-report .memory-size {
3331 | font-weight: 600;
3332 | color: var(--primary);
3333 | margin-bottom: var(--space-1);
3334 | }
3335 |
3336 | .storage-report .memory-preview {
3337 | font-size: var(--text-sm);
3338 | color: var(--neutral-700);
3339 | margin-bottom: var(--space-1);
3340 | word-break: break-word;
3341 | }
3342 |
3343 | .storage-report .memory-meta {
3344 | font-size: var(--text-xs);
3345 | color: var(--neutral-500);
3346 | }
3347 |
3348 | /* Dark mode support for new analytics features */
3349 | body.dark-mode .heatmap-cell.level-0 {
3350 | background: var(--neutral-200);
3351 | }
3352 |
3353 | body.dark-mode .heatmap-cell.level-1 {
3354 | background: #238636;
3355 | }
3356 |
3357 | body.dark-mode .heatmap-cell.level-2 {
3358 | background: #1a7f37;
3359 | }
3360 |
3361 | body.dark-mode .heatmap-cell.level-3 {
3362 | background: #0f5132;
3363 | }
3364 |
3365 | body.dark-mode .heatmap-cell.level-4 {
3366 | background: #033a16;
3367 | }
3368 |
3369 | body.dark-mode .enhanced-tags-report .tags-list li,
3370 | body.dark-mode .activity-bar-row,
3371 | body.dark-mode .storage-report .largest-memories li {
3372 | background: var(--neutral-100);
3373 | border-color: var(--neutral-300);
3374 | color: var(--neutral-900);
3375 | }
3376 |
3377 | /* Form controls in Manage/Analytics dark mode */
3378 | body.dark-mode .bulk-op-card input,
3379 | body.dark-mode .bulk-op-card select,
3380 | body.dark-mode .chart-card input,
3381 | body.dark-mode .chart-card select,
3382 | body.dark-mode .manage-section .form-control,
3383 | body.dark-mode .analytics-section .form-control {
3384 | background: var(--neutral-100) !important;
3385 | border-color: var(--neutral-200) !important;
3386 | color: var(--neutral-900) !important;
3387 | }
3388 |
3389 | body.dark-mode .bulk-op-card input:focus,
3390 | body.dark-mode .bulk-op-card select:focus,
3391 | body.dark-mode .chart-card input:focus,
3392 | body.dark-mode .chart-card select:focus {
3393 | border-color: var(--primary) !important;
3394 | background: var(--neutral-50) !important;
3395 | }
3396 |
3397 | /* Buttons in Manage/Analytics dark mode */
3398 | body.dark-mode .bulk-op-card .btn,
3399 | body.dark-mode .system-op-card .btn,
3400 | body.dark-mode .chart-card .btn {
3401 | opacity: 1;
3402 | }
3403 |
3404 | body.dark-mode .metric-card {
3405 | background: linear-gradient(135deg, var(--primary-dark), var(--primary)) !important;
3406 | color: white !important;
3407 | }
3408 |
3409 | body.dark-mode .metric-value,
3410 | body.dark-mode .metric-label {
3411 | color: white !important;
3412 | }
3413 |
3414 | /* Tag management table dark mode */
3415 | body.dark-mode .tag-stats-table {
3416 | color: var(--neutral-900);
3417 | }
3418 |
3419 | body.dark-mode .tag-stats-table th {
3420 | background: var(--neutral-200) !important;
3421 | color: var(--neutral-900) !important;
3422 | }
3423 |
3424 | body.dark-mode .tag-stats-table td {
3425 | border-bottom-color: var(--neutral-200) !important;
3426 | color: var(--neutral-900) !important;
3427 | }
3428 |
3429 | body.dark-mode .tag-stats-table .tag-name {
3430 | color: var(--primary) !important;
3431 | }
3432 |
3433 | body.dark-mode .tag-stats-table .tag-count {
3434 | color: var(--neutral-900) !important;
3435 | }
3436 |
3437 | /* Tag action buttons dark mode */
3438 | body.dark-mode .tag-action-btn {
3439 | background: var(--neutral-200) !important;
3440 | border-color: var(--neutral-300) !important;
3441 | color: var(--neutral-900) !important;
3442 | }
3443 |
3444 | body.dark-mode .tag-action-btn:hover {
3445 | background: var(--neutral-300) !important;
3446 | border-color: var(--neutral-400) !important;
3447 | }
3448 |
3449 | body.dark-mode .tag-action-btn.danger:hover {
3450 | background: var(--error) !important;
3451 | color: white !important;
3452 | border-color: var(--error) !important;
3453 | }
3454 |
3455 | /* Simple Chart Styles */
3456 | .simple-chart {
3457 | font-family: var(--font-mono);
3458 | font-size: var(--text-sm);
3459 | width: 100%;
3460 | overflow: hidden;
3461 | }
3462 |
3463 | .chart-header {
3464 | font-weight: 600;
3465 | margin-bottom: var(--space-4);
3466 | color: var(--neutral-900);
3467 | }
3468 |
3469 | .chart-row {
3470 | display: flex;
3471 | align-items: center;
3472 | margin-bottom: var(--space-2);
3473 | gap: var(--space-3);
3474 | min-height: 24px;
3475 | width: 100%;
3476 | max-width: 100%;
3477 | }
3478 |
3479 | .chart-bar {
3480 | height: 18px;
3481 | background: var(--primary);
3482 | border-radius: var(--radius-sm);
3483 | transition: width 0.3s ease;
3484 | min-width: 10px;
3485 | max-width: 200px;
3486 | position: relative;
3487 | flex-shrink: 0;
3488 | }
3489 |
3490 | .chart-label {
3491 | flex: 1;
3492 | min-width: 0;
3493 | color: var(--neutral-700);
3494 | font-size: var(--text-sm);
3495 | overflow: hidden;
3496 | text-overflow: ellipsis;
3497 | white-space: nowrap;
3498 | }
3499 |
3500 | .chart-bar::after {
3501 | content: '';
3502 | position: absolute;
3503 | top: 0;
3504 | left: 0;
3505 | right: 0;
3506 | bottom: 0;
3507 | background: linear-gradient(90deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 100%);
3508 | border-radius: var(--radius-sm);
3509 | }
3510 |
3511 | .chart-value {
3512 | min-width: 100px;
3513 | text-align: right;
3514 | color: var(--neutral-900);
3515 | font-weight: 500;
3516 | font-size: 1rem;
3517 | white-space: nowrap;
3518 | flex-shrink: 0;
3519 | }
3520 |
3521 | .chart-value small {
3522 | color: var(--neutral-600);
3523 | font-weight: 400;
3524 | font-size: 0.9rem;
3525 | }
3526 |
3527 | .tags-list, .activity-list {
3528 | list-style: none;
3529 | padding: 0;
3530 | margin: 0;
3531 | }
3532 |
3533 | .tags-list li, .activity-list li {
3534 | padding: var(--space-2) 0;
3535 | border-bottom: 1px solid var(--neutral-200);
3536 | }
3537 |
3538 | .tags-list li:last-child, .activity-list li:last-child {
3539 | border-bottom: none;
3540 | }
3541 |
3542 | .tags-list li strong {
3543 | color: var(--primary);
3544 | }
3545 |
3546 | /* Dark mode for charts - Fixed v8.5.5 contrast */
3547 | body.dark-mode .chart-label {
3548 | color: #e5e5e5 !important; /* Much brighter text for labels */
3549 | font-weight: 500; /* Slightly bolder for readability */
3550 | }
3551 |
3552 | body.dark-mode .chart-value {
3553 | color: #ffffff !important; /* Pure white for maximum readability */
3554 | font-weight: 600; /* Slightly bolder in dark mode */
3555 | }
3556 |
3557 | body.dark-mode .chart-value small {
3558 | color: var(--neutral-300) !important; /* Lighter text for small elements */
3559 | }
3560 |
3561 | body.dark-mode .chart-bar {
3562 | background: var(--primary) !important;
3563 | }
3564 |
3565 | body.dark-mode .chart-container {
3566 | color: var(--neutral-700) !important; /* Loading/placeholder text */
3567 | }
3568 |
3569 | body.dark-mode .tags-list li,
3570 | body.dark-mode .activity-list li {
3571 | border-bottom-color: var(--neutral-200) !important;
3572 | color: var(--neutral-900) !important;
3573 | }
3574 |
3575 | body.dark-mode .tags-list li strong {
3576 | color: var(--primary) !important;
3577 | }
3578 |
3579 | body.dark-mode .activity-list li {
3580 | color: var(--neutral-700) !important;
3581 | }
3582 |
3583 | /* Dark mode: Document chunks modal */
3584 | body.dark-mode .modal-content .chunk-item {
3585 | background: #1f2937 !important;
3586 | border-color: #374151 !important;
3587 | }
3588 |
3589 | body.dark-mode .modal-content .chunk-header {
3590 | color: #f3f4f6 !important;
3591 | }
3592 |
3593 | body.dark-mode .modal-content .chunk-content {
3594 | color: #d1d5db !important;
3595 | }
3596 |
3597 | body.dark-mode .modal-content .chunk-meta {
3598 | color: #9ca3af !important;
3599 | }
3600 |
3601 | body.dark-mode .modal-content .chunk-number {
3602 | color: #60a5fa !important;
3603 | }
3604 |
3605 | /* Document Management Features */
3606 | .upload-actions-container {
3607 | display: flex;
3608 | align-items: center;
3609 | gap: var(--space-4);
3610 | }
3611 |
3612 | .upload-actions {
3613 | display: flex;
3614 | gap: var(--space-2);
3615 | }
3616 |
3617 | .btn-icon {
3618 | display: flex;
3619 | align-items: center;
3620 | gap: var(--space-2);
3621 | padding: var(--space-2) var(--space-3);
3622 | border: 1px solid var(--neutral-300);
3623 | border-radius: var(--radius-md);
3624 | background: white;
3625 | cursor: pointer;
3626 | transition: all var(--transition-base);
3627 | font-size: var(--text-sm);
3628 | color: var(--neutral-700);
3629 | }
3630 |
3631 | .btn-icon:hover {
3632 | background: var(--neutral-50);
3633 | border-color: var(--neutral-400);
3634 | transform: translateY(-1px);
3635 | }
3636 |
3637 | .btn-icon svg {
3638 | flex-shrink: 0;
3639 | }
3640 |
3641 | .btn-view-memory {
3642 | color: var(--primary);
3643 | border-color: var(--primary-light);
3644 | }
3645 |
3646 | .btn-view-memory:hover {
3647 | background: rgba(99, 102, 241, 0.05);
3648 | border-color: var(--primary);
3649 | }
3650 |
3651 | .btn-remove {
3652 | color: var(--error);
3653 | border-color: rgba(239, 68, 68, 0.3);
3654 | }
3655 |
3656 | .btn-remove:hover {
3657 | background: rgba(239, 68, 68, 0.05);
3658 | border-color: var(--error);
3659 | }
3660 |
3661 | /* Document Search Section */
3662 | .doc-search-container {
3663 | display: flex;
3664 | gap: var(--space-3);
3665 | margin-bottom: var(--space-4);
3666 | }
3667 |
3668 | .doc-search-container .search-input {
3669 | flex: 1;
3670 | }
3671 |
3672 | .doc-search-results {
3673 | margin-top: var(--space-4);
3674 | }
3675 |
3676 | .search-results-header {
3677 | display: flex;
3678 | justify-content: space-between;
3679 | align-items: center;
3680 | margin-bottom: var(--space-4);
3681 | padding-bottom: var(--space-3);
3682 | border-bottom: 2px solid var(--neutral-200);
3683 | }
3684 |
3685 | .search-results-header h3 {
3686 | margin: 0;
3687 | font-size: var(--text-lg);
3688 | color: var(--neutral-900);
3689 | }
3690 |
3691 | .results-count {
3692 | color: var(--neutral-600);
3693 | font-size: var(--text-sm);
3694 | }
3695 |
3696 | .search-results-list {
3697 | display: flex;
3698 | flex-direction: column;
3699 | gap: var(--space-3);
3700 | }
3701 |
3702 | .search-result-item {
3703 | padding: var(--space-4);
3704 | background: white;
3705 | border: 1px solid var(--neutral-200);
3706 | border-radius: var(--radius-md);
3707 | transition: var(--transition-base);
3708 | }
3709 |
3710 | .search-result-item:hover {
3711 | box-shadow: var(--shadow-sm);
3712 | border-color: var(--primary-light);
3713 | }
3714 |
3715 | .result-header {
3716 | display: flex;
3717 | justify-content: space-between;
3718 | align-items: center;
3719 | margin-bottom: var(--space-2);
3720 | }
3721 |
3722 | .result-header strong {
3723 | color: var(--neutral-900);
3724 | }
3725 |
3726 | .similarity-score {
3727 | font-size: var(--text-sm);
3728 | color: var(--primary);
3729 | font-weight: 600;
3730 | }
3731 |
3732 | .result-content {
3733 | color: var(--neutral-700);
3734 | margin-bottom: var(--space-3);
3735 | line-height: 1.6;
3736 | }
3737 |
3738 | .result-tags {
3739 | display: flex;
3740 | gap: var(--space-2);
3741 | flex-wrap: wrap;
3742 | }
3743 |
3744 | .section-description {
3745 | color: var(--neutral-600);
3746 | margin-bottom: var(--space-4);
3747 | }
3748 |
3749 | /* Memory Viewer Modal */
3750 | .modal {
3751 | position: fixed;
3752 | top: 0;
3753 | left: 0;
3754 | right: 0;
3755 | bottom: 0;
3756 | background: rgba(0, 0, 0, 0.5);
3757 | display: none;
3758 | align-items: center;
3759 | justify-content: center;
3760 | z-index: 1000;
3761 | padding: var(--space-4);
3762 | }
3763 |
3764 | .memory-viewer-content {
3765 | max-width: 900px;
3766 | width: 100%;
3767 | max-height: 90vh;
3768 | background: white;
3769 | border-radius: var(--radius-xl);
3770 | box-shadow: var(--shadow-xl);
3771 | display: flex;
3772 | flex-direction: column;
3773 | }
3774 |
3775 | .memory-viewer-content .modal-header {
3776 | padding: var(--space-6);
3777 | border-bottom: 1px solid var(--neutral-200);
3778 | display: flex;
3779 | justify-content: space-between;
3780 | align-items: center;
3781 | }
3782 |
3783 | .memory-viewer-content .modal-header h2 {
3784 | margin: 0;
3785 | font-size: var(--text-xl);
3786 | color: var(--neutral-900);
3787 | }
3788 |
3789 | .memory-viewer-content .modal-close {
3790 | background: none;
3791 | border: none;
3792 | font-size: 2rem;
3793 | line-height: 1;
3794 | cursor: pointer;
3795 | color: var(--neutral-500);
3796 | padding: var(--space-2);
3797 | border-radius: var(--radius-md);
3798 | transition: var(--transition-base);
3799 | }
3800 |
3801 | .memory-viewer-content .modal-close:hover {
3802 | background: var(--neutral-100);
3803 | color: var(--neutral-700);
3804 | }
3805 |
3806 | .memory-viewer-content .modal-body {
3807 | flex: 1;
3808 | overflow-y: auto;
3809 | padding: var(--space-6);
3810 | }
3811 |
3812 | .memory-viewer-content .modal-footer {
3813 | padding: var(--space-6);
3814 | border-top: 1px solid var(--neutral-200);
3815 | display: flex;
3816 | justify-content: flex-end;
3817 | }
3818 |
3819 | .document-info {
3820 | margin-bottom: var(--space-6);
3821 | }
3822 |
3823 | .document-info h3 {
3824 | margin: 0 0 var(--space-2) 0;
3825 | color: var(--neutral-900);
3826 | font-size: var(--text-lg);
3827 | }
3828 |
3829 | .memory-chunks-list {
3830 | display: flex;
3831 | flex-direction: column;
3832 | gap: var(--space-4);
3833 | }
3834 |
3835 | .memory-chunk-item {
3836 | padding: var(--space-4);
3837 | background: var(--neutral-50);
3838 | border: 1px solid var(--neutral-200);
3839 | border-radius: var(--radius-md);
3840 | }
3841 |
3842 | .chunk-header {
3843 | display: flex;
3844 | justify-content: space-between;
3845 | align-items: center;
3846 | margin-bottom: var(--space-3);
3847 | padding-bottom: var(--space-2);
3848 | border-bottom: 1px solid var(--neutral-200);
3849 | }
3850 |
3851 | .chunk-number {
3852 | font-weight: 600;
3853 | color: var(--primary);
3854 | font-size: var(--text-sm);
3855 | }
3856 |
3857 | .chunk-hash {
3858 | font-family: 'Monaco', 'Courier New', monospace;
3859 | font-size: var(--text-xs);
3860 | color: var(--neutral-500);
3861 | }
3862 |
3863 | .chunk-tags {
3864 | display: flex;
3865 | gap: var(--space-2);
3866 | flex-wrap: wrap;
3867 | }
3868 |
3869 | /* Dark Mode Support for New Components */
3870 | body.dark-mode .btn-icon {
3871 | background: var(--neutral-200);
3872 | border-color: var(--neutral-300);
3873 | color: var(--neutral-900);
3874 | }
3875 |
3876 | body.dark-mode .btn-icon:hover {
3877 | background: var(--neutral-300);
3878 | }
3879 |
3880 | body.dark-mode .search-result-item,
3881 | body.dark-mode .memory-chunk-item {
3882 | background: var(--neutral-200);
3883 | border-color: var(--neutral-300);
3884 | }
3885 |
3886 | body.dark-mode .memory-viewer-content {
3887 | background: var(--neutral-100);
3888 | }
3889 |
3890 | body.dark-mode .section-description,
3891 | body.dark-mode .result-content {
3892 | color: var(--neutral-300);
3893 | }
3894 |
3895 | /* Responsive Adjustments */
3896 | @media (max-width: 768px) {
3897 | .upload-actions-container {
3898 | flex-direction: column;
3899 | align-items: flex-start;
3900 | }
3901 |
3902 | .upload-actions {
3903 | width: 100%;
3904 | }
3905 |
3906 | .btn-icon {
3907 | flex: 1;
3908 | justify-content: center;
3909 | }
3910 |
3911 | .doc-search-container {
3912 | flex-direction: column;
3913 | }
3914 |
3915 | .memory-viewer-content {
3916 | max-height: 95vh;
3917 | margin: var(--space-2);
3918 | }
3919 | }
3920 |
3921 | /* ============================================
3922 | Chunking Help Section Styles
3923 | ============================================ */
3924 |
3925 | .info-icon {
3926 | cursor: pointer;
3927 | font-size: 1.1em;
3928 | margin-left: var(--space-1);
3929 | opacity: 0.7;
3930 | transition: all var(--transition-base);
3931 | -webkit-user-select: none;
3932 | user-select: none;
3933 | }
3934 |
3935 | .info-icon:hover {
3936 | opacity: 1;
3937 | transform: scale(1.2);
3938 | }
3939 |
3940 | .chunking-help {
3941 | margin-top: var(--space-3);
3942 | padding: var(--space-3);
3943 | background: var(--neutral-50);
3944 | border: 1px solid var(--neutral-200);
3945 | border-radius: var(--radius-lg);
3946 | animation: slideDown 0.3s ease-out;
3947 | }
3948 |
3949 | @keyframes slideDown {
3950 | from {
3951 | opacity: 0;
3952 | transform: translateY(-10px);
3953 | }
3954 | to {
3955 | opacity: 1;
3956 | transform: translateY(0);
3957 | }
3958 | }
3959 |
3960 | .help-header {
3961 | display: flex;
3962 | justify-content: space-between;
3963 | align-items: center;
3964 | margin-bottom: var(--space-3);
3965 | padding-bottom: var(--space-2);
3966 | border-bottom: 2px solid var(--neutral-200);
3967 | color: var(--neutral-800);
3968 | }
3969 |
3970 | .help-header strong {
3971 | font-size: 1.1em;
3972 | }
3973 |
3974 | .close-help {
3975 | background: none;
3976 | border: none;
3977 | font-size: 1.5em;
3978 | color: var(--neutral-500);
3979 | cursor: pointer;
3980 | padding: 0 var(--space-2);
3981 | line-height: 1;
3982 | transition: color var(--transition-base);
3983 | }
3984 |
3985 | .close-help:hover {
3986 | color: var(--error);
3987 | }
3988 |
3989 | .help-content {
3990 | color: var(--neutral-700);
3991 | }
3992 |
3993 | .help-note {
3994 | background: var(--warning);
3995 | background: linear-gradient(135deg, #fff3cd 0%, #fcf8e3 100%);
3996 | border-left: 4px solid var(--warning);
3997 | padding: var(--space-2);
3998 | margin-bottom: var(--space-3);
3999 | border-radius: var(--radius-base);
4000 | font-size: 0.95em;
4001 | }
4002 |
4003 | .help-recommendations {
4004 | display: flex;
4005 | flex-direction: column;
4006 | gap: var(--space-3);
4007 | margin-bottom: var(--space-3);
4008 | }
4009 |
4010 | .help-option {
4011 | background: white;
4012 | padding: var(--space-3);
4013 | border-radius: var(--radius-base);
4014 | border: 1px solid var(--neutral-200);
4015 | transition: all var(--transition-base);
4016 | }
4017 |
4018 | .help-option:hover {
4019 | border-color: var(--primary);
4020 | box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1);
4021 | }
4022 |
4023 | .help-option-header {
4024 | display: flex;
4025 | justify-content: space-between;
4026 | align-items: center;
4027 | margin-bottom: var(--space-2);
4028 | }
4029 |
4030 | .help-option-header strong {
4031 | color: var(--neutral-800);
4032 | }
4033 |
4034 | .help-tag {
4035 | background: var(--success);
4036 | color: white;
4037 | padding: var(--space-1) var(--space-2);
4038 | border-radius: var(--radius-full);
4039 | font-size: 0.75em;
4040 | font-weight: 600;
4041 | text-transform: uppercase;
4042 | letter-spacing: 0.5px;
4043 | }
4044 |
4045 | .help-option p {
4046 | margin: var(--space-1) 0;
4047 | font-size: 0.9em;
4048 | line-height: 1.5;
4049 | }
4050 |
4051 | .help-option p strong {
4052 | color: var(--neutral-700);
4053 | }
4054 |
4055 | .help-tips {
4056 | background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
4057 | padding: var(--space-3);
4058 | border-radius: var(--radius-base);
4059 | border-left: 4px solid var(--primary);
4060 | }
4061 |
4062 | .help-tips strong {
4063 | color: var(--neutral-800);
4064 | display: block;
4065 | margin-bottom: var(--space-2);
4066 | }
4067 |
4068 | .help-tips ul {
4069 | margin: 0;
4070 | padding-left: var(--space-4);
4071 | }
4072 |
4073 | .help-tips li {
4074 | margin: var(--space-1) 0;
4075 | font-size: 0.9em;
4076 | line-height: 1.6;
4077 | color: var(--neutral-700);
4078 | }
4079 |
4080 | .help-tips li strong {
4081 | display: inline;
4082 | color: var(--primary-dark);
4083 | font-weight: 600;
4084 | }
4085 |
4086 | /* Overlap Visual Diagram */
4087 | .help-example {
4088 | margin: var(--space-3) 0;
4089 | padding: var(--space-3);
4090 | background: white;
4091 | border-radius: var(--radius-base);
4092 | border: 1px solid var(--neutral-200);
4093 | }
4094 |
4095 | .help-example strong {
4096 | display: block;
4097 | margin-bottom: var(--space-2);
4098 | color: var(--neutral-800);
4099 | }
4100 |
4101 | .overlap-diagram {
4102 | display: flex;
4103 | flex-direction: column;
4104 | gap: var(--space-2);
4105 | margin-top: var(--space-2);
4106 | }
4107 |
4108 | .chunk-demo {
4109 | display: flex;
4110 | border-radius: var(--radius-base);
4111 | overflow: hidden;
4112 | box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
4113 | }
4114 |
4115 | .chunk-part {
4116 | padding: var(--space-2);
4117 | font-family: monospace;
4118 | font-size: 0.85em;
4119 | display: flex;
4120 | align-items: center;
4121 | justify-content: center;
4122 | transition: all var(--transition-base);
4123 | }
4124 |
4125 | .chunk-part.unique {
4126 | background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
4127 | color: var(--primary-dark);
4128 | flex: 1;
4129 | border: 2px solid var(--primary);
4130 | }
4131 |
4132 | .chunk-part.overlap {
4133 | background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
4134 | color: #92400e;
4135 | flex: 0 0 35%;
4136 | border: 2px solid var(--warning);
4137 | font-weight: 600;
4138 | }
4139 |
4140 | .chunk-demo:hover .chunk-part.overlap {
4141 | background: linear-gradient(135deg, #fde68a 0%, #fbbf24 100%);
4142 | transform: scale(1.02);
4143 | }
4144 |
4145 | /* Mobile responsiveness for help section */
4146 | @media (max-width: 768px) {
4147 | .chunking-help {
4148 | padding: var(--space-2);
4149 | }
4150 |
4151 | .help-option {
4152 | padding: var(--space-2);
4153 | }
4154 |
4155 | .help-tips {
4156 | padding: var(--space-2);
4157 | }
4158 |
4159 | .help-example {
4160 | padding: var(--space-2);
4161 | }
4162 |
4163 | .chunk-part {
4164 | font-size: 0.75em;
4165 | padding: var(--space-1);
4166 | }
4167 |
4168 | .chunk-part.overlap {
4169 | flex: 0 0 40%;
4170 | }
4171 | }
4172 |
```