Spaces:
Sleeping
Sleeping
| /* ============================================================ | |
| RAG Visualizer — Chunking Lab Design System | |
| Theme: Superman High-Contrast Color-Blocked Light Mode | |
| Palette: Blue #2563eb | Red #ef4444 | Gold #f59e0b | |
| ============================================================ */ | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Roboto+Condensed:wght@400;700&display=swap'); | |
| /* --- Design Tokens --- */ | |
| :root { | |
| /* Surface Colors */ | |
| --bg-root: #f8fafc; | |
| --bg-surface: #ffffff; | |
| --bg-surface-raised: #f1f5f9; | |
| --bg-surface-overlay: #e2e8f0; | |
| --bg-input: #f8fafc; | |
| /* Borders */ | |
| --border-subtle: rgba(15, 23, 42, 0.05); | |
| --border-default: rgba(15, 23, 42, 0.09); | |
| --border-active: rgba(37, 99, 235, 0.35); | |
| /* Text Colors */ | |
| --text-primary: #0f172a; | |
| --text-secondary: #475569; | |
| --text-tertiary: #64748b; | |
| --text-inverse: #ffffff; | |
| /* Superman Blue — Structural (borders, headers, outlines, secondary data) */ | |
| --superman-blue: #2563eb; | |
| --superman-blue-hover: #1d4ed8; | |
| --superman-blue-muted: rgba(37, 99, 235, 0.08); | |
| --superman-blue-glow: rgba(37, 99, 235, 0.2); | |
| /* Superman Red — Action/Attention (CTA buttons, active states, query nodes) */ | |
| --superman-red: #ef4444; | |
| --superman-red-hover: #dc2626; | |
| --superman-red-muted: rgba(239, 68, 68, 0.08); | |
| --superman-red-glow: rgba(239, 68, 68, 0.2); | |
| /* Superman Gold — Interactive/Highlight (slider thumbs, Rank 1, connecting lines) */ | |
| --superman-yellow: #f59e0b; | |
| --superman-yellow-hover: #d97706; | |
| --superman-yellow-muted: rgba(245, 158, 11, 0.08); | |
| --superman-yellow-glow: rgba(245, 158, 11, 0.2); | |
| /* Functional Accent — Default to Blue for structural context */ | |
| --accent: var(--superman-blue); | |
| --accent-hover: var(--superman-blue-hover); | |
| --accent-muted: var(--superman-blue-muted); | |
| --accent-glow: var(--superman-blue-glow); | |
| /* Chunk Highlight Colors */ | |
| --chunk-color-1: var(--superman-blue); | |
| --chunk-color-2: var(--superman-red); | |
| --chunk-color-3: var(--superman-yellow); | |
| --chunk-color-4: #818cf8; | |
| /* Semantic */ | |
| --success: #16a34a; | |
| --warning: #d97706; | |
| --error: #dc2626; | |
| --info: #2563eb; | |
| /* Spacing */ | |
| --space-xs: 4px; | |
| --space-sm: 8px; | |
| --space-md: 16px; | |
| --space-lg: 24px; | |
| --space-xl: 32px; | |
| --space-2xl: 48px; | |
| /* Radius */ | |
| --radius-sm: 6px; | |
| --radius-md: 10px; | |
| --radius-lg: 16px; | |
| --radius-xl: 20px; | |
| /* Shadows */ | |
| --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.05); | |
| --shadow-md: 0 4px 16px rgba(15, 23, 42, 0.06); | |
| --shadow-lg: 0 10px 36px rgba(15, 23, 42, 0.08); | |
| --shadow-glow-red: 0 0 20px var(--superman-red-glow); | |
| --shadow-glow-blue: 0 0 20px var(--superman-blue-glow); | |
| --shadow-glow-gold: 0 0 20px var(--superman-yellow-glow); | |
| /* Transitions */ | |
| --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); | |
| --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1); | |
| --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1); | |
| /* Typography */ | |
| --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; | |
| --font-heading: 'Roboto Condensed', 'Inter', sans-serif; | |
| --font-mono: 'JetBrains Mono', 'Fira Code', monospace; | |
| } | |
| /* --- Kryptonite Protocol (Error States) --- */ | |
| .text-kryptonite { | |
| color: #22c55e ; | |
| } | |
| .bg-kryptonite-wash { | |
| background-color: rgba(34, 197, 94, 0.1) ; | |
| border: 1px solid #22c55e ; | |
| } | |
| /* --- Reset & Base --- */ | |
| *, | |
| *::before, | |
| *::after { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| html { | |
| font-size: 14px; | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| } | |
| body { | |
| font-family: var(--font-sans); | |
| background: var(--bg-root); | |
| color: var(--text-primary); | |
| line-height: 1.6; | |
| min-height: 100vh; | |
| overflow-x: hidden; | |
| } | |
| /* Subtle dot grid texture */ | |
| body::before { | |
| content: ''; | |
| position: fixed; | |
| inset: 0; | |
| background-image: | |
| radial-gradient(circle at 1px 1px, rgba(148, 163, 184, 0.03) 1px, transparent 0); | |
| background-size: 32px 32px; | |
| pointer-events: none; | |
| z-index: 0; | |
| } | |
| /* --- Scrollbar --- */ | |
| ::-webkit-scrollbar { width: 6px; height: 6px; } | |
| ::-webkit-scrollbar-track { background: transparent; } | |
| ::-webkit-scrollbar-thumb { background: var(--text-tertiary); border-radius: 99px; } | |
| ::-webkit-scrollbar-thumb:hover { background: var(--text-secondary); } | |
| /* --- Layout --- */ | |
| .app-wrapper { | |
| position: relative; | |
| z-index: 1; | |
| display: flex; | |
| flex-direction: column; | |
| min-height: 100vh; | |
| } | |
| /* ============================================================ | |
| 1. HEADER — Blue-to-Red gradient logo, frosted glass bar | |
| ============================================================ */ | |
| .app-header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: var(--space-md) var(--space-xl); | |
| border-bottom: 1px solid var(--border-default); | |
| background: rgba(255, 255, 255, 0.85); | |
| backdrop-filter: blur(16px); | |
| -webkit-backdrop-filter: blur(16px); | |
| position: sticky; | |
| top: 0; | |
| z-index: 100; | |
| } | |
| .app-logo { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-sm); | |
| } | |
| /* Logo icon: Blue-to-Red gradient */ | |
| .app-logo-icon { | |
| width: 32px; | |
| height: 32px; | |
| background: linear-gradient(90deg, #2563eb 0%, #ef4444 100%); | |
| border-radius: var(--radius-sm); | |
| display: grid; | |
| place-items: center; | |
| font-size: 16px; | |
| } | |
| .app-logo-text { | |
| font-weight: 700; | |
| font-size: 1.15rem; | |
| letter-spacing: -0.02em; | |
| } | |
| /* "Visualizer" span in Blue */ | |
| .app-logo-text span { | |
| color: var(--superman-blue); | |
| } | |
| .app-header-badge { | |
| font-size: 0.75rem; | |
| font-weight: 500; | |
| color: var(--superman-blue); | |
| background: var(--superman-blue-muted); | |
| padding: 2px 10px; | |
| border-radius: 99px; | |
| border: 1px solid rgba(37, 99, 235, 0.2); | |
| } | |
| /* ============================================================ | |
| 2. MAIN CONTENT — 3 Column Grid | |
| ============================================================ */ | |
| .app-main { | |
| display: grid; | |
| grid-template-columns: 300px 1fr 340px; | |
| gap: 0; | |
| flex: 1; | |
| overflow: hidden; | |
| } | |
| /* --- Panels --- */ | |
| .panel { | |
| display: flex; | |
| flex-direction: column; | |
| border-right: 1px solid var(--border-default); | |
| overflow-y: auto; | |
| height: calc(100vh - 57px); | |
| } | |
| .panel:last-child { | |
| border-right: none; | |
| } | |
| .panel-header { | |
| padding: var(--space-md) var(--space-lg); | |
| border-bottom: 1px solid var(--border-subtle); | |
| background: var(--bg-surface); | |
| position: sticky; | |
| top: 0; | |
| z-index: 10; | |
| } | |
| .panel-header h2 { | |
| font-family: var(--font-heading); | |
| font-size: 1rem; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| letter-spacing: 0.08em; | |
| color: var(--text-secondary); | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-sm); | |
| } | |
| .panel-header h2 .icon { | |
| font-size: 1rem; | |
| } | |
| /* Sidebar Panel Header Overrides */ | |
| #config-panel .panel-header, | |
| #inspector-panel .panel-header { | |
| border-bottom: none; | |
| background: transparent; | |
| padding-bottom: var(--space-xs); | |
| } | |
| #config-panel .panel-header h2, | |
| #inspector-panel .panel-header h2 { | |
| font-family: var(--font-heading); | |
| font-size: 1.15rem; | |
| font-weight: 700; | |
| text-transform: none; | |
| letter-spacing: normal; | |
| color: var(--text-primary); | |
| } | |
| .panel-body { | |
| padding: var(--space-lg); | |
| flex: 1; | |
| overflow-y: auto; | |
| } | |
| /* ============================================================ | |
| 3. CONFIG PANEL (Left Sidebar) | |
| ============================================================ */ | |
| .config-section { | |
| margin-bottom: var(--space-xl); | |
| } | |
| .config-section-title { | |
| font-family: var(--font-heading); | |
| font-size: 0.8rem; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| letter-spacing: 0.1em; | |
| color: var(--text-tertiary); | |
| margin-bottom: var(--space-md); | |
| } | |
| /* --- Strategy Selector Cards --- */ | |
| .strategy-grid { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: var(--space-sm); | |
| } | |
| .strategy-card { | |
| position: relative; | |
| padding: var(--space-md); | |
| background-color: #ffffff; | |
| border: 1px solid #e5e7eb; | |
| border-top: 4px solid var(--superman-blue); | |
| border-radius: 10px; | |
| cursor: pointer; | |
| transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease; | |
| text-align: center; | |
| overflow: hidden; | |
| } | |
| .strategy-card:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.15); | |
| border-color: var(--superman-blue); | |
| } | |
| /* Active strategy card: White background, thicker blue border, corner badge */ | |
| .strategy-card.active { | |
| border: 2px solid var(--superman-blue); | |
| border-top: 4px solid var(--superman-blue); | |
| background-color: #ffffff; | |
| box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.25), var(--shadow-glow-blue); | |
| } | |
| /* Corner badge for active strategy */ | |
| .strategy-card.active::after { | |
| content: '✓'; | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| width: 24px; | |
| height: 24px; | |
| background-color: var(--superman-red); | |
| color: #ffffff; | |
| font-size: 12px; | |
| font-weight: bold; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| border-bottom-left-radius: 4px; | |
| } | |
| .strategy-card input[type="radio"] { | |
| display: none; | |
| } | |
| .strategy-card-icon { | |
| font-size: 1.4rem; | |
| margin-bottom: var(--space-xs); | |
| } | |
| .strategy-card-name { | |
| font-size: 0.78rem; | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| } | |
| .strategy-card-desc { | |
| font-size: 0.65rem; | |
| color: var(--text-tertiary); | |
| margin-top: 2px; | |
| } | |
| /* --- Sliders (Blue track, Gold thumb) --- */ | |
| .config-field { | |
| margin-bottom: var(--space-lg); | |
| } | |
| .config-field label { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| font-family: var(--font-heading); | |
| font-size: 0.85rem; | |
| font-weight: 700; | |
| color: var(--text-secondary); | |
| margin-bottom: var(--space-sm); | |
| } | |
| /* Value badges in Blue */ | |
| .config-field .value-badge { | |
| font-family: var(--font-mono); | |
| font-size: 0.72rem; | |
| font-weight: 500; | |
| color: var(--superman-blue); | |
| background: var(--superman-blue-muted); | |
| padding: 1px 8px; | |
| border-radius: 99px; | |
| } | |
| /* Slider track: thin Blue */ | |
| input[type="range"] { | |
| -webkit-appearance: none; | |
| appearance: none; | |
| width: 100%; | |
| height: 4px; | |
| background: linear-gradient(90deg, var(--superman-blue-muted) 0%, rgba(37, 99, 235, 0.15) 100%); | |
| border-radius: 99px; | |
| outline: none; | |
| cursor: pointer; | |
| } | |
| /* Slider thumb: Superman Gold */ | |
| input[type="range"]::-webkit-slider-thumb { | |
| -webkit-appearance: none; | |
| appearance: none; | |
| width: 16px; | |
| height: 16px; | |
| border-radius: 50%; | |
| background: var(--superman-yellow); | |
| border: 2px solid var(--bg-surface); | |
| box-shadow: 0 0 8px var(--superman-yellow-glow); | |
| cursor: pointer; | |
| transition: transform var(--transition-fast); | |
| } | |
| input[type="range"]::-webkit-slider-thumb:hover { | |
| transform: scale(1.2); | |
| box-shadow: 0 0 12px var(--superman-yellow-glow); | |
| } | |
| input[type="range"]::-moz-range-thumb { | |
| width: 16px; | |
| height: 16px; | |
| border-radius: 50%; | |
| background: var(--superman-yellow); | |
| border: 2px solid var(--bg-surface); | |
| box-shadow: 0 0 8px var(--superman-yellow-glow); | |
| cursor: pointer; | |
| } | |
| /* --- Text Input --- */ | |
| .text-input-wrapper { | |
| position: relative; | |
| } | |
| .text-input { | |
| width: 100%; | |
| min-height: 120px; | |
| padding: var(--space-md); | |
| background: var(--bg-input); | |
| border: 1px solid var(--border-default); | |
| border-radius: var(--radius-md); | |
| color: var(--text-primary); | |
| font-family: var(--font-mono); | |
| font-size: 0.78rem; | |
| line-height: 1.7; | |
| resize: vertical; | |
| outline: none; | |
| transition: border-color var(--transition-base), box-shadow var(--transition-base); | |
| } | |
| .text-input:focus { | |
| border-color: var(--superman-blue); | |
| box-shadow: 0 0 0 3px var(--superman-blue-muted); | |
| } | |
| .text-input::placeholder { | |
| color: var(--text-tertiary); | |
| } | |
| .char-count { | |
| position: absolute; | |
| bottom: var(--space-sm); | |
| right: var(--space-md); | |
| font-size: 0.65rem; | |
| font-family: var(--font-mono); | |
| color: var(--text-tertiary); | |
| } | |
| /* --- Separators Input --- */ | |
| .separator-tags { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: var(--space-xs); | |
| padding: var(--space-sm); | |
| background: var(--bg-input); | |
| border: 1px solid var(--border-default); | |
| border-radius: var(--radius-md); | |
| min-height: 36px; | |
| cursor: text; | |
| } | |
| .separator-tag { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 4px; | |
| padding: 2px 8px; | |
| background: var(--bg-surface-overlay); | |
| border: 1px solid var(--border-default); | |
| border-radius: var(--radius-sm); | |
| font-family: var(--font-mono); | |
| font-size: 0.7rem; | |
| color: var(--text-secondary); | |
| } | |
| .separator-tag .remove { | |
| cursor: pointer; | |
| color: var(--text-tertiary); | |
| font-size: 0.85rem; | |
| line-height: 1; | |
| transition: color var(--transition-fast); | |
| } | |
| .separator-tag .remove:hover { | |
| color: var(--superman-red); | |
| } | |
| .separator-input { | |
| border: none; | |
| outline: none; | |
| background: transparent; | |
| color: var(--text-primary); | |
| font-family: var(--font-mono); | |
| font-size: 0.72rem; | |
| flex: 1; | |
| min-width: 60px; | |
| } | |
| /* ============================================================ | |
| 4. RUN BUTTON — Superman Red CTA (primary action) | |
| ============================================================ */ | |
| .btn-run { | |
| width: 100%; | |
| padding: var(--space-md) var(--space-lg); | |
| background: linear-gradient(135deg, var(--superman-red), var(--superman-red-hover)); | |
| color: var(--text-inverse); | |
| font-family: var(--font-sans); | |
| font-size: 0.85rem; | |
| font-weight: 700; | |
| border: none; | |
| border-radius: var(--radius-md); | |
| cursor: pointer; | |
| transition: all var(--transition-base); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: var(--space-sm); | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .btn-run::before { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| background: linear-gradient(135deg, transparent, rgba(255, 255, 255, 0.15)); | |
| opacity: 0; | |
| transition: opacity var(--transition-base); | |
| } | |
| .btn-run:hover::before { | |
| opacity: 1; | |
| } | |
| .btn-run:hover { | |
| transform: translateY(-1px); | |
| box-shadow: var(--shadow-glow-red), var(--shadow-md); | |
| } | |
| .btn-run:active { | |
| transform: translateY(0); | |
| } | |
| .btn-run:disabled { | |
| opacity: 0.5; | |
| cursor: not-allowed; | |
| transform: none; | |
| } | |
| .btn-run:disabled:hover::before { | |
| opacity: 0; | |
| } | |
| .btn-run .spinner { | |
| width: 16px; | |
| height: 16px; | |
| border: 2px solid rgba(255, 255, 255, 0.3); | |
| border-top-color: var(--text-inverse); | |
| border-radius: 50%; | |
| animation: spin 0.6s linear infinite; | |
| display: none; | |
| } | |
| .btn-run.loading .spinner { | |
| display: block; | |
| } | |
| .btn-run.loading .btn-text { | |
| display: none; | |
| } | |
| @keyframes spin { | |
| to { transform: rotate(360deg); } | |
| } | |
| /* Pulse animation for Run button — Red glow */ | |
| @keyframes pulse-glow-red { | |
| 0%, 100% { box-shadow: 0 0 8px var(--superman-red-glow); } | |
| 50% { box-shadow: 0 0 20px var(--superman-red-glow), 0 0 40px rgba(239, 68, 68, 0.1); } | |
| } | |
| .btn-run.ready { | |
| animation: pulse-glow-red 2s ease-in-out infinite; | |
| } | |
| /* ============================================================ | |
| 5. CENTER PANEL — Tabs (Document Viewer / Vector Space 2D) | |
| ============================================================ */ | |
| .xray-viewer { | |
| position: relative; | |
| } | |
| /* --- Interactive Tabs Navigation --- */ | |
| .tabs-header { | |
| padding: 0 ; | |
| } | |
| .tab-buttons { | |
| display: flex; | |
| height: 56px; | |
| width: 100%; | |
| } | |
| /* Tab button: Blue text, no background highlight */ | |
| .tab-btn { | |
| flex: 1; | |
| background: transparent; | |
| border: none; | |
| border-bottom: 3px solid transparent; | |
| color: var(--text-secondary); | |
| font-family: var(--font-sans); | |
| font-size: 0.85rem; | |
| font-weight: 600; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: var(--space-sm); | |
| transition: all var(--transition-base); | |
| } | |
| .tab-btn:hover { | |
| color: var(--text-primary); | |
| background: transparent; | |
| } | |
| /* Active tab: 3px solid Red bottom border, Red text, NO background tint */ | |
| .tab-btn.active { | |
| color: var(--superman-red); | |
| border-bottom-color: var(--superman-red); | |
| background: transparent; | |
| } | |
| /* --- Tab Content Visibility --- */ | |
| .tab-content { | |
| display: none ; | |
| } | |
| .tab-content.active { | |
| display: flex ; | |
| flex-direction: column; | |
| } | |
| /* --- X-Ray Text Container --- */ | |
| .xray-text-container { | |
| font-family: var(--font-mono); | |
| font-size: 0.8rem; | |
| line-height: 2; | |
| white-space: pre-wrap; | |
| word-break: break-word; | |
| padding: var(--space-lg); | |
| position: relative; | |
| } | |
| /* Chunk highlights in the text */ | |
| .chunk-highlight { | |
| position: relative; | |
| border-radius: 3px; | |
| padding: 1px 0; | |
| border-left: 3px solid var(--superman-red); /* "Cape" Accent */ | |
| transition: all var(--transition-fast); | |
| cursor: pointer; | |
| } | |
| /* ============================================================ | |
| RETRIEVAL X-RAY HIGHLIGHTS (TASK 3.4) | |
| ============================================================ */ | |
| /* --- Premium Toast Notification System --- */ | |
| .toast-container { | |
| position: fixed; | |
| bottom: 24px; | |
| right: 24px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 12px; | |
| z-index: 9999; | |
| pointer-events: none; | |
| } | |
| .toast { | |
| pointer-events: auto; | |
| background-color: var(--bg-surface-raised, #1f2937); | |
| border: 1px solid var(--border-default, #374151); | |
| color: var(--text-primary, #f3f4f6); | |
| padding: 12px 18px; | |
| border-radius: var(--radius-md, 8px); | |
| box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.3)); | |
| font-family: var(--font-sans, system-ui); | |
| font-size: 0.85rem; | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-sm, 8px); | |
| min-width: 250px; | |
| max-width: 380px; | |
| animation: toast-slide-in 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards; | |
| transition: all 0.3s ease; | |
| border-left: 4px solid var(--superman-blue, #3b82f6); | |
| } | |
| .toast.toast-info { | |
| border-left-color: var(--superman-blue, #3b82f6); | |
| } | |
| .toast.toast-warning { | |
| border-left-color: var(--warning-color, #f59e0b); | |
| } | |
| .toast.toast-success { | |
| border-left-color: var(--success-color, #10b981); | |
| } | |
| .toast.toast-error { | |
| border-left-color: var(--superman-red, #ef4444); | |
| } | |
| .toast.toast-fade-out { | |
| opacity: 0; | |
| transform: translateY(10px); | |
| } | |
| @keyframes toast-slide-in { | |
| from { | |
| opacity: 0; | |
| transform: translateY(20px) scale(0.95); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0) scale(1); | |
| } | |
| } | |
| /* --- Select Dropdown Styling --- */ | |
| .select-input { | |
| padding: 8px 12px; | |
| background-color: var(--bg-input); | |
| border: 1px solid var(--border-default); | |
| border-radius: var(--radius-md); | |
| color: var(--text-primary); | |
| font-family: var(--font-sans); | |
| font-size: 0.8rem; | |
| outline: none; | |
| transition: all var(--transition-base); | |
| cursor: pointer; | |
| } | |
| .select-input:focus { | |
| border-color: var(--superman-blue); | |
| box-shadow: 0 0 0 2px var(--superman-blue-muted); | |
| } | |
| .xray-content.search-active .chunk-highlight { | |
| opacity: 0.3; | |
| transition: all 0.3s ease; | |
| } | |
| .xray-content.search-active .chunk-highlight.retrieved-rank-1 { | |
| opacity: 1.0; | |
| background-color: rgba(255, 165, 0, 0.4); | |
| box-shadow: 0 0 12px rgba(255, 165, 0, 0.6); | |
| border-top: 2px solid var(--warning-color); | |
| border-bottom: 2px solid var(--warning-color); | |
| z-index: 10; | |
| position: relative; | |
| } | |
| .xray-content.search-active .chunk-highlight.retrieved-rank-2 { | |
| opacity: 0.9; | |
| background-color: rgba(255, 165, 0, 0.25); | |
| border-top: 2px dashed rgba(255, 165, 0, 0.6); | |
| border-bottom: 2px dashed rgba(255, 165, 0, 0.6); | |
| z-index: 9; | |
| position: relative; | |
| } | |
| .xray-content.search-active .chunk-highlight.retrieved-rank-3 { | |
| opacity: 0.8; | |
| background-color: rgba(255, 165, 0, 0.15); | |
| border-top: 2px dotted rgba(255, 165, 0, 0.4); | |
| border-bottom: 2px dotted rgba(255, 165, 0, 0.4); | |
| z-index: 8; | |
| position: relative; | |
| } | |
| /* Query Result Footer Metadata */ | |
| .query-result-meta { | |
| display: flex; | |
| gap: var(--space-md); | |
| margin-top: 6px; | |
| font-size: 0.68rem; | |
| color: var(--text-tertiary); | |
| font-family: var(--font-mono); | |
| border-top: 1px dashed var(--border-default); | |
| padding-top: 4px; | |
| } | |
| /* Distance and Score Badges */ | |
| .dist-badge { | |
| display: inline-flex; | |
| align-items: center; | |
| font-family: var(--font-mono); | |
| font-size: 0.72rem; | |
| background: var(--bg-surface-raised); | |
| border: 1px solid var(--border-default); | |
| padding: 2px 8px; | |
| border-radius: 99px; | |
| color: var(--text-secondary); | |
| } | |
| .score-badge-val { | |
| font-weight: 600; | |
| color: var(--superman-blue); | |
| } | |
| .score-badge-original { | |
| font-size: 0.65rem; | |
| color: var(--text-tertiary); | |
| font-style: italic; | |
| margin-left: 4px; | |
| } | |
| /* Rank Shift Badges */ | |
| .rank-shift-badge { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 2px; | |
| font-size: 0.72rem; | |
| font-weight: 700; | |
| padding: 2px 6px; | |
| border-radius: 4px; | |
| margin-left: 8px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.02em; | |
| } | |
| .rank-shift-up { | |
| color: #16a34a; | |
| background-color: rgba(22, 163, 74, 0.08); | |
| border: 1px solid rgba(22, 163, 74, 0.2); | |
| } | |
| .rank-shift-down { | |
| color: #dc2626; | |
| background-color: rgba(220, 38, 38, 0.08); | |
| border: 1px solid rgba(220, 38, 38, 0.2); | |
| } | |
| .rank-shift-unchanged { | |
| color: var(--text-tertiary); | |
| background-color: var(--bg-surface-raised); | |
| border: 1px solid var(--border-default); | |
| } | |
| /* Lexical Heatmap Highlights */ | |
| .query-result-text mark, | |
| .retrieved-chunk-text mark { | |
| background-color: rgba(245, 158, 11, 0.22); /* Superman Gold Muted */ | |
| color: #b45309; /* Highly readable deep amber */ | |
| border-bottom: 2px solid var(--superman-yellow); | |
| font-weight: 600; | |
| padding: 1px 3px; | |
| border-radius: 3px; | |
| transition: all 0.2s ease; | |
| } | |
| .query-result-text mark:hover, | |
| .retrieved-chunk-text mark:hover { | |
| background-color: rgba(245, 158, 11, 0.35); | |
| color: #78350f; | |
| cursor: help; | |
| } | |
| /* ============================================================ | |
| THE GRAND COMPARISON ARENA (TASK 3.5) | |
| ============================================================ */ | |
| .arena-modal-overlay { | |
| position: fixed; | |
| inset: 0; | |
| background: rgba(15, 23, 42, 0.9); | |
| backdrop-filter: blur(8px); | |
| z-index: 9999; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .arena-modal-content { | |
| background: var(--bg-surface); | |
| width: 90vw; | |
| height: 90vh; | |
| border-radius: var(--radius-lg); | |
| box-shadow: var(--shadow-xl); | |
| display: flex; | |
| flex-direction: column; | |
| overflow: hidden; | |
| border: 1px solid var(--border-default); | |
| } | |
| .arena-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: var(--space-md) var(--space-xl); | |
| background: var(--bg-surface-elevated); | |
| border-bottom: 1px solid var(--border-default); | |
| } | |
| .arena-header h2 { | |
| margin: 0; | |
| font-size: 1.25rem; | |
| color: var(--superman-red); | |
| } | |
| .btn-close-arena { | |
| background: none; | |
| border: none; | |
| color: var(--text-secondary); | |
| font-size: 1.5rem; | |
| cursor: pointer; | |
| } | |
| .btn-close-arena:hover { | |
| color: var(--superman-red); | |
| } | |
| .arena-query-bar { | |
| display: flex; | |
| padding: var(--space-lg) var(--space-xl); | |
| gap: var(--space-md); | |
| background: var(--bg-surface-elevated); | |
| border-bottom: 1px solid var(--border-default); | |
| } | |
| .arena-query-bar input { | |
| flex: 1; | |
| padding: var(--space-md) var(--space-lg); | |
| border-radius: var(--radius-md); | |
| border: 1px solid var(--border-default); | |
| background: var(--bg-surface); | |
| color: var(--text-primary); | |
| font-size: 1rem; | |
| } | |
| .arena-columns { | |
| display: flex; | |
| height: 385px; | |
| flex-shrink: 0; | |
| border-bottom: 1px solid var(--border-default); | |
| } | |
| .arena-body { | |
| flex: 1; | |
| overflow-y: auto; | |
| padding: 0 0 var(--space-xl) 0; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .arena-col { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| border-right: 1px solid var(--border-default); | |
| } | |
| .arena-col:last-child { | |
| border-right: none; | |
| } | |
| .arena-col-header { | |
| padding: var(--space-md) var(--space-xl); | |
| border-bottom: 2px solid var(--warning-color); | |
| background: rgba(255, 255, 255, 0.02); | |
| } | |
| .arena-col-header h3 { | |
| margin: 0 0 var(--space-sm) 0; | |
| font-size: 1.1rem; | |
| font-weight: 700; | |
| color: var(--text-primary); | |
| } | |
| .arena-config-row { | |
| display: flex; | |
| gap: var(--space-sm); | |
| } | |
| .arena-config-row select { | |
| flex: 1; | |
| } | |
| .arena-results-list { | |
| flex: 1; | |
| overflow-y: auto; | |
| padding: var(--space-xl); | |
| display: flex; | |
| flex-direction: column; | |
| gap: var(--space-md); | |
| } | |
| /* Low opacity wash of primary colors, no underlines */ | |
| .chunk-highlight[data-color="1"] { background: rgba(37, 99, 235, 0.1); } | |
| .chunk-highlight[data-color="2"] { background: rgba(239, 68, 68, 0.1); } | |
| .chunk-highlight[data-color="3"] { background: rgba(245, 158, 11, 0.1); } | |
| .chunk-highlight[data-color="4"] { background: rgba(129, 140, 248, 0.1); } | |
| .chunk-highlight.active[data-color="1"] { background: rgba(37, 99, 235, 0.25); box-shadow: 0 0 12px rgba(37, 99, 235, 0.15); } | |
| .chunk-highlight.active[data-color="2"] { background: rgba(239, 68, 68, 0.25); box-shadow: 0 0 12px rgba(239, 68, 68, 0.15); } | |
| .chunk-highlight.active[data-color="3"] { background: rgba(245, 158, 11, 0.25); box-shadow: 0 0 12px rgba(245, 158, 11, 0.15); } | |
| .chunk-highlight.active[data-color="4"] { background: rgba(129, 140, 248, 0.25); box-shadow: 0 0 12px rgba(129, 140, 248, 0.15); } | |
| /* Chunk boundary marker */ | |
| .chunk-boundary { | |
| display: inline-block; | |
| width: 0; | |
| height: 1em; | |
| border-left: 2px dashed var(--text-tertiary); | |
| margin: 0 2px; | |
| vertical-align: middle; | |
| opacity: 0.5; | |
| } | |
| /* Overlap region */ | |
| .overlap-region { | |
| background: repeating-linear-gradient( | |
| -45deg, | |
| transparent, | |
| transparent 2px, | |
| rgba(251, 146, 60, 0.15) 2px, | |
| rgba(251, 146, 60, 0.15) 4px | |
| ) ; | |
| border-bottom: 2px dashed var(--warning) ; | |
| } | |
| /* Empty state */ | |
| .empty-state { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| height: 100%; | |
| min-height: 400px; | |
| color: var(--text-tertiary); | |
| text-align: center; | |
| gap: var(--space-md); | |
| } | |
| .empty-state-icon { | |
| font-size: 3rem; | |
| opacity: 0.8; | |
| color: #22c55e; /* Kryptonite Green */ | |
| } | |
| .empty-state-title { | |
| font-size: 1rem; | |
| font-weight: 600; | |
| color: var(--text-secondary); | |
| } | |
| .empty-state-desc { | |
| font-size: 0.78rem; | |
| max-width: 280px; | |
| line-height: 1.6; | |
| } | |
| /* ============================================================ | |
| 6. VECTOR SPACE TAB (Phase 2) | |
| ============================================================ */ | |
| .vector-space-container { | |
| display: flex; | |
| flex-direction: column; | |
| height: 100%; | |
| position: relative; | |
| gap: var(--space-md); | |
| padding: var(--space-lg); | |
| } | |
| /* Canvas wrapper: Fortress of Solitude Grid */ | |
| .canvas-wrapper { | |
| flex: 1; | |
| position: relative; | |
| border: 1px solid var(--superman-blue); | |
| border-radius: var(--radius-lg); | |
| background-color: #fafafa; | |
| background-image: | |
| linear-gradient(rgba(37, 99, 235, 0.05) 1px, transparent 1px), | |
| linear-gradient(90deg, rgba(37, 99, 235, 0.05) 1px, transparent 1px); | |
| background-size: 24px 24px; | |
| overflow: hidden; | |
| box-shadow: inset 0 2px 8px rgba(15, 23, 42, 0.04); | |
| min-height: 380px; | |
| } | |
| #vector-canvas { | |
| display: block; | |
| width: 100%; | |
| height: 100%; | |
| cursor: grab; | |
| } | |
| #vector-canvas:active { | |
| cursor: grabbing; | |
| } | |
| /* Canvas Help Overlay */ | |
| .canvas-help-overlay { | |
| position: absolute; | |
| top: var(--space-md); | |
| right: var(--space-md); | |
| display: flex; | |
| flex-direction: column; | |
| gap: var(--space-xs); | |
| background: rgba(255, 255, 255, 0.85); | |
| backdrop-filter: blur(4px); | |
| padding: 6px 12px; | |
| border-radius: var(--radius-md); | |
| border: 1px solid var(--border-default); | |
| pointer-events: none; | |
| } | |
| .canvas-help-overlay span { | |
| font-size: 0.68rem; | |
| color: var(--text-tertiary); | |
| font-family: var(--font-mono); | |
| } | |
| /* Floating Tooltip inside Canvas — Blue left accent bar */ | |
| .vector-tooltip { | |
| position: absolute; | |
| pointer-events: none; | |
| background: rgba(255, 255, 255, 0.95); | |
| backdrop-filter: blur(12px); | |
| -webkit-backdrop-filter: blur(12px); | |
| border: 1px solid var(--border-default); | |
| border-left: 3px solid var(--superman-blue); | |
| border-radius: var(--radius-md); | |
| padding: var(--space-md); | |
| color: var(--text-primary); | |
| max-width: 280px; | |
| font-size: 0.75rem; | |
| box-shadow: var(--shadow-lg); | |
| z-index: 50; | |
| transition: opacity 100ms ease; | |
| } | |
| .vector-tooltip-title { | |
| font-family: var(--font-mono); | |
| font-weight: 700; | |
| color: var(--superman-blue); | |
| margin-bottom: var(--space-xs); | |
| font-size: 0.68rem; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| display: flex; | |
| justify-content: space-between; | |
| } | |
| .vector-tooltip-coords { | |
| color: var(--text-tertiary); | |
| font-family: var(--font-mono); | |
| font-size: 0.65rem; | |
| } | |
| .vector-tooltip-text { | |
| font-family: var(--font-mono); | |
| color: var(--text-secondary); | |
| line-height: 1.5; | |
| margin-top: var(--space-xs); | |
| border-top: 1px solid var(--border-subtle); | |
| padding-top: var(--space-xs); | |
| } | |
| /* ============================================================ | |
| 7. SONAR QUERY SIMULATOR | |
| ============================================================ */ | |
| .query-simulator-section { | |
| background: var(--bg-surface); | |
| border: 1px solid var(--border-default); | |
| border-radius: var(--radius-lg); | |
| padding: var(--space-md); | |
| display: flex; | |
| flex-direction: column; | |
| gap: var(--space-sm); | |
| box-shadow: var(--shadow-md); | |
| } | |
| .query-section-title { | |
| font-family: var(--font-heading); | |
| font-size: 0.9rem; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| letter-spacing: 0.08em; | |
| color: var(--superman-blue); | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| } | |
| .query-section-title .radar-icon { | |
| color: var(--superman-yellow); | |
| } | |
| .query-input-wrapper { | |
| display: flex; | |
| gap: var(--space-sm); | |
| } | |
| /* Query input: Blue focus ring */ | |
| #query-input { | |
| flex: 1; | |
| padding: 10px 14px; | |
| background: var(--bg-input); | |
| border: 1px solid var(--border-default); | |
| border-radius: var(--radius-md); | |
| color: var(--text-primary); | |
| font-size: 0.8rem; | |
| outline: none; | |
| transition: all var(--transition-base); | |
| } | |
| #query-input:focus { | |
| border-color: var(--superman-blue); | |
| box-shadow: 0 0 0 2px var(--superman-blue-muted); | |
| } | |
| /* Query button: Red CTA style */ | |
| .btn-query { | |
| padding: 10px var(--space-lg); | |
| background: var(--superman-red); | |
| border: 1px solid var(--superman-red); | |
| color: var(--text-inverse); | |
| font-family: var(--font-heading); | |
| font-weight: 700; | |
| font-size: 0.9rem; | |
| border-radius: var(--radius-md); | |
| cursor: pointer; | |
| transition: all var(--transition-base); | |
| } | |
| .btn-query:hover { | |
| background: var(--superman-red-hover); | |
| box-shadow: var(--shadow-glow-red); | |
| } | |
| /* Retrieved Results Drawer */ | |
| .query-results-drawer { | |
| border-top: 1px solid var(--border-subtle); | |
| padding-top: var(--space-sm); | |
| display: flex; | |
| flex-direction: column; | |
| gap: var(--space-sm); | |
| max-height: 200px; | |
| overflow-y: auto; | |
| } | |
| .drawer-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .drawer-header h3 { | |
| font-size: 0.72rem; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| color: var(--text-secondary); | |
| } | |
| .close-drawer { | |
| cursor: pointer; | |
| font-size: 1.2rem; | |
| color: var(--text-tertiary); | |
| line-height: 1; | |
| transition: color var(--transition-fast); | |
| } | |
| .close-drawer:hover { | |
| color: var(--superman-red); | |
| } | |
| .query-results-list { | |
| display: flex; | |
| flex-direction: column; | |
| gap: var(--space-xs); | |
| } | |
| .retrieved-chunk-card { | |
| display: flex; | |
| flex-direction: column; | |
| padding: var(--space-sm) var(--space-md); | |
| background-color: #ffffff; | |
| border: 1px solid var(--border-subtle); | |
| border-left: 4px solid var(--superman-blue); | |
| border-radius: var(--radius-md); | |
| gap: 2px; | |
| cursor: pointer; | |
| transition: all var(--transition-fast); | |
| } | |
| .retrieved-chunk-card:hover { | |
| border-color: var(--superman-blue); | |
| background: var(--superman-blue-muted); | |
| } | |
| /* Rank 1 card: Gold left accent border */ | |
| .retrieved-chunk-card.rank-1 { | |
| border-left: 4px solid var(--superman-yellow); | |
| background: #ffffff; | |
| } | |
| .retrieved-chunk-card.rank-1:hover { | |
| background: var(--superman-yellow-muted); | |
| } | |
| .retrieved-chunk-meta { | |
| display: flex; | |
| justify-content: space-between; | |
| font-size: 0.65rem; | |
| font-family: var(--font-mono); | |
| } | |
| /* Rank label: Gold for Rank 1, Blue for others */ | |
| .retrieved-chunk-rank { | |
| font-weight: 700; | |
| color: var(--superman-blue); | |
| } | |
| .retrieved-chunk-card.rank-1 .retrieved-chunk-rank { | |
| color: var(--superman-yellow); | |
| } | |
| /* Score badge: Red pill */ | |
| .retrieved-chunk-score { | |
| color: var(--text-inverse); | |
| background-color: var(--superman-red); | |
| font-weight: bold; | |
| padding: 1px 8px; | |
| border-radius: 99px; | |
| } | |
| .retrieved-chunk-text { | |
| font-family: var(--font-mono); | |
| font-size: 0.7rem; | |
| color: var(--text-secondary); | |
| line-height: 1.4; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| } | |
| /* ============================================================ | |
| 8. CHUNK INSPECTOR (Right Panel) | |
| ============================================================ */ | |
| /* --- Stat Cards: Frosted glass with Blue top accent border --- */ | |
| .stats-grid { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: var(--space-sm); | |
| margin-bottom: var(--space-lg); | |
| } | |
| .stat-card { | |
| padding: var(--space-md); | |
| background: rgba(255, 255, 255, 0.7); | |
| backdrop-filter: blur(8px); | |
| -webkit-backdrop-filter: blur(8px); | |
| border: 1px solid var(--border-default); | |
| border-top: 3px solid var(--superman-blue); | |
| border-radius: var(--radius-md); | |
| text-align: center; | |
| box-shadow: var(--shadow-sm); | |
| transition: all var(--transition-base); | |
| } | |
| .stat-card:hover { | |
| box-shadow: var(--shadow-md); | |
| transform: translateY(-1px); | |
| } | |
| /* Stat values: Red/Gold monospace */ | |
| .stat-card .stat-value { | |
| font-family: var(--font-heading); | |
| font-size: 1.8rem; | |
| font-weight: 700; | |
| color: var(--superman-red); | |
| } | |
| .stat-card:nth-child(even) .stat-value { | |
| color: var(--superman-yellow); | |
| } | |
| .stat-card .stat-label { | |
| font-family: var(--font-heading); | |
| font-size: 0.75rem; | |
| text-transform: uppercase; | |
| letter-spacing: 0.08em; | |
| color: var(--text-tertiary); | |
| margin-top: 2px; | |
| } | |
| /* --- Chunk List --- */ | |
| .chunk-list { | |
| display: flex; | |
| flex-direction: column; | |
| gap: var(--space-sm); | |
| } | |
| .chunk-item { | |
| padding: var(--space-md); | |
| padding-left: calc(var(--space-md) + 28px); /* Room for the index circle */ | |
| background-color: #ffffff; | |
| border: 1px solid #e5e7eb; | |
| border-left: 4px solid var(--superman-blue); /* Default alternating later */ | |
| border-radius: 4px; | |
| cursor: pointer; | |
| transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| /* Alternate Left Borders */ | |
| .chunk-item:nth-child(3n+1) { border-left-color: var(--superman-blue); } | |
| .chunk-item:nth-child(3n+2) { border-left-color: var(--superman-red); } | |
| .chunk-item:nth-child(3n+3) { border-left-color: var(--superman-yellow); } | |
| .chunk-item:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.15); | |
| } | |
| /* Active chunk */ | |
| .chunk-item.active { | |
| background: rgba(37, 99, 235, 0.05); | |
| } | |
| .chunk-item.active::before { | |
| background: var(--superman-red); | |
| } | |
| /* Parent chunk styling */ | |
| .chunk-item[data-level="0"] { | |
| border-left: 3px solid var(--superman-blue); | |
| } | |
| .chunk-item[data-level="0"]::before { | |
| background: var(--superman-blue); | |
| } | |
| /* Child chunk styling */ | |
| .chunk-item[data-level="1"] { | |
| margin-left: var(--space-lg); | |
| border-left: 3px solid var(--superman-yellow); | |
| opacity: 0.85; | |
| } | |
| .chunk-item[data-level="1"]::before { | |
| background: var(--superman-yellow); | |
| } | |
| .chunk-item-header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| margin-bottom: var(--space-sm); | |
| } | |
| /* Chunk ID: Blue mono label */ | |
| .chunk-item-id { | |
| font-family: var(--font-mono); | |
| font-size: 0.7rem; | |
| font-weight: 600; | |
| color: var(--superman-blue); | |
| } | |
| .chunk-item.active .chunk-item-id { | |
| color: var(--superman-red); | |
| } | |
| .chunk-item-badges { | |
| display: flex; | |
| gap: var(--space-xs); | |
| } | |
| .chunk-badge { | |
| font-family: var(--font-mono); | |
| font-size: 0.6rem; | |
| padding: 1px 6px; | |
| border-radius: 99px; | |
| background: var(--bg-surface-overlay); | |
| color: var(--text-tertiary); | |
| border: 1px solid var(--border-subtle); | |
| } | |
| /* Token badge: Blue tinted */ | |
| .chunk-badge.tokens { | |
| color: var(--superman-blue); | |
| background: var(--superman-blue-muted); | |
| border-color: rgba(37, 99, 235, 0.2); | |
| } | |
| .chunk-item-text { | |
| font-family: var(--font-mono); | |
| font-size: 0.72rem; | |
| color: var(--text-secondary); | |
| line-height: 1.6; | |
| max-height: 60px; | |
| overflow: hidden; | |
| position: relative; | |
| } | |
| .chunk-item-text::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| height: 24px; | |
| background: linear-gradient(transparent, var(--bg-surface)); | |
| pointer-events: none; | |
| } | |
| .chunk-item.active .chunk-item-text::after { | |
| background: linear-gradient(transparent, rgba(239, 68, 68, 0.06)); | |
| } | |
| .chunk-item-meta { | |
| display: flex; | |
| gap: var(--space-md); | |
| margin-top: var(--space-sm); | |
| font-size: 0.65rem; | |
| color: var(--text-tertiary); | |
| font-family: var(--font-mono); | |
| } | |
| /* Parent-child connector label */ | |
| .parent-child-label { | |
| font-size: 0.6rem; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.1em; | |
| color: var(--superman-blue); | |
| padding: var(--space-xs) 0; | |
| margin-top: var(--space-sm); | |
| } | |
| /* --- Config: Parent-Child Fields --- */ | |
| .parent-child-config { | |
| display: none; | |
| flex-direction: column; | |
| gap: var(--space-md); | |
| padding: var(--space-md); | |
| background: var(--bg-surface); | |
| border: 1px solid var(--border-default); | |
| border-radius: var(--radius-md); | |
| margin-top: var(--space-sm); | |
| } | |
| .parent-child-config.visible { | |
| display: flex; | |
| } | |
| .pc-section-label { | |
| font-size: 0.65rem; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| letter-spacing: 0.1em; | |
| padding-bottom: var(--space-xs); | |
| border-bottom: 1px solid var(--border-subtle); | |
| } | |
| .pc-section-label.parent { color: var(--superman-blue); } | |
| .pc-section-label.child { color: var(--superman-yellow); } | |
| /* ============================================================ | |
| 9. SELECT INPUT | |
| ============================================================ */ | |
| .select-input { | |
| width: 100%; | |
| padding: 8px 12px; | |
| background: var(--bg-input); | |
| border: 1px solid var(--border-default); | |
| border-radius: var(--radius-md); | |
| color: var(--text-primary); | |
| outline: none; | |
| font-family: var(--font-sans); | |
| font-size: 0.85rem; | |
| cursor: pointer; | |
| transition: border-color var(--transition-base); | |
| } | |
| .select-input:focus { | |
| border-color: var(--superman-blue); | |
| } | |
| /* ============================================================ | |
| 10. ANIMATIONS & SKELETONS | |
| ============================================================ */ | |
| @keyframes fadeInUp { | |
| from { | |
| opacity: 0; | |
| transform: translateY(8px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .chunk-item { | |
| animation: fadeInUp var(--transition-slow) both; | |
| } | |
| .chunk-item:nth-child(1) { animation-delay: 0ms; } | |
| .chunk-item:nth-child(2) { animation-delay: 40ms; } | |
| .chunk-item:nth-child(3) { animation-delay: 80ms; } | |
| .chunk-item:nth-child(4) { animation-delay: 120ms; } | |
| .chunk-item:nth-child(5) { animation-delay: 160ms; } | |
| .chunk-item:nth-child(6) { animation-delay: 200ms; } | |
| .chunk-item:nth-child(7) { animation-delay: 240ms; } | |
| .chunk-item:nth-child(8) { animation-delay: 280ms; } | |
| /* 1. Heat Vision Pulse (Applied to the Sonar Probe node in Canvas via JS, but CSS provided if DOM used) */ | |
| @keyframes radar-pulse { | |
| 0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); } | |
| 70% { transform: scale(1); box-shadow: 0 0 0 20px rgba(239, 68, 68, 0); } | |
| 100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); } | |
| } | |
| .sonar-probe { | |
| background-color: #ef4444; | |
| border-radius: 50%; | |
| animation: radar-pulse 2s infinite; | |
| } | |
| /* 2. Super Speed Data Flow (Applied to the SVG connecting lines if DOM used) */ | |
| @keyframes data-flow { | |
| to { stroke-dashoffset: -20; } | |
| } | |
| .connection-line { | |
| stroke: #f59e0b; | |
| stroke-width: 2; | |
| stroke-dasharray: 5, 5; | |
| animation: data-flow 0.8s linear infinite; | |
| } | |
| /* 3. Yellow Sun Glow (Applied to the Rank 1 retrieved node if DOM used) */ | |
| @keyframes sun-glow { | |
| 0%, 100% { box-shadow: 0 0 5px rgba(245, 158, 11, 0.6); } | |
| 50% { box-shadow: 0 0 15px #f59e0b, 0 0 25px rgba(245, 158, 11, 0.4); } | |
| } | |
| .rank-1-node { | |
| background-color: #f59e0b; | |
| border-radius: 50%; | |
| animation: sun-glow 3s ease-in-out infinite; | |
| } | |
| /* Heat Vision Skeleton Animation */ | |
| @keyframes heat-sweep { | |
| 0% { background-position: -200% 0; } | |
| 100% { background-position: 200% 0; } | |
| } | |
| .skeleton-loader { | |
| height: 60px; /* Adjust based on your text line height */ | |
| border-radius: 4px; | |
| /* Sweeps a soft red gradient over a standard grey skeleton base */ | |
| background: linear-gradient(90deg, #f3f4f6 25%, rgba(239, 68, 68, 0.15) 50%, #f3f4f6 75%); | |
| background-size: 200% 100%; | |
| animation: heat-sweep 1.5s infinite linear; | |
| } | |
| /* ============================================================ | |
| 11. RESPONSIVE | |
| ============================================================ */ | |
| @media (max-width: 1200px) { | |
| .app-main { | |
| grid-template-columns: 260px 1fr 300px; | |
| } | |
| } | |
| @media (max-width: 900px) { | |
| .app-main { | |
| grid-template-columns: 1fr; | |
| grid-template-rows: auto 1fr auto; | |
| } | |
| .panel { | |
| height: auto; | |
| max-height: 50vh; | |
| border-right: none; | |
| border-bottom: 1px solid var(--border-default); | |
| } | |
| } | |
| /* ============================================================ | |
| 12. AI REFEREE (TASK 5.1) | |
| ============================================================ */ | |
| .arena-referee-panel { | |
| margin-top: 2rem; | |
| padding: 1.5rem; | |
| border-radius: 8px; | |
| background-color: var(--bg-surface-raised); | |
| border: 1px solid var(--border-default); | |
| box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02); | |
| } | |
| .referee-divider { | |
| display: flex; | |
| align-items: center; | |
| text-align: center; | |
| margin-bottom: 1.5rem; | |
| } | |
| .referee-divider::before, | |
| .referee-divider::after { | |
| content: ''; | |
| flex: 1; | |
| border-bottom: 1px dashed var(--border-default); | |
| } | |
| .referee-badge { | |
| padding: 0.25rem 0.75rem; | |
| font-family: 'Roboto Condensed', sans-serif; | |
| font-weight: 700; | |
| font-size: 0.85rem; | |
| color: var(--superman-blue); | |
| background-color: var(--superman-blue-muted); | |
| border-radius: 50px; | |
| border: 1px solid rgba(37, 99, 235, 0.2); | |
| letter-spacing: 0.05em; | |
| margin: 0 1rem; | |
| } | |
| .referee-prompt-text { | |
| text-align: center; | |
| color: var(--text-secondary); | |
| font-size: 0.9rem; | |
| margin-bottom: 1rem; | |
| } | |
| .referee-status-text { | |
| text-align: center; | |
| font-weight: 500; | |
| color: var(--superman-blue); | |
| font-size: 0.9rem; | |
| animation: pulse 1.5s infinite ease-in-out; | |
| } | |
| .referee-verdict-box { | |
| animation: fadeIn 0.4s ease-out; | |
| } | |
| /* Verdict banner */ | |
| .verdict-banner { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 1rem 1.5rem; | |
| border-radius: 6px; | |
| border: 1.5px solid; | |
| margin-bottom: 1.5rem; | |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03); | |
| } | |
| .verdict-title { | |
| font-family: 'Roboto Condensed', sans-serif; | |
| font-weight: 700; | |
| font-size: 1.2rem; | |
| letter-spacing: 0.02em; | |
| } | |
| .verdict-confidence { | |
| font-size: 0.85rem; | |
| font-weight: 600; | |
| background-color: rgba(255, 255, 255, 0.7); | |
| padding: 0.2rem 0.5rem; | |
| border-radius: 4px; | |
| border: 1px solid rgba(0, 0, 0, 0.05); | |
| } | |
| /* Verdict reason */ | |
| .verdict-reason { | |
| background-color: var(--bg-surface); | |
| padding: 1.25rem; | |
| border-radius: 6px; | |
| border: 1px solid var(--border-default); | |
| margin-bottom: 1.5rem; | |
| } | |
| .verdict-reason > strong { | |
| display: block; | |
| font-size: 0.85rem; | |
| color: var(--text-tertiary); | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| margin-bottom: 0.5rem; | |
| } | |
| .verdict-reason p { | |
| font-size: 0.95rem; | |
| color: var(--text-primary); | |
| line-height: 1.5; | |
| margin-bottom: 0.75rem; | |
| font-style: italic; | |
| } | |
| .deciding-factor { | |
| font-size: 0.8rem; | |
| color: var(--text-tertiary); | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .deciding-factor code { | |
| background-color: var(--bg-surface-raised); | |
| padding: 0.1rem 0.4rem; | |
| border-radius: 4px; | |
| font-family: 'JetBrains Mono', monospace; | |
| color: var(--superman-red); | |
| font-weight: 600; | |
| } | |
| /* Scorecard Table */ | |
| .referee-scores-table { | |
| background-color: var(--bg-surface); | |
| border: 1px solid var(--border-default); | |
| border-radius: 6px; | |
| overflow: hidden; | |
| margin-bottom: 1.5rem; | |
| } | |
| .scores-table-header { | |
| display: grid; | |
| grid-template-columns: 150px 70px 1fr 70px; | |
| padding: 0.75rem 1rem; | |
| background-color: var(--bg-surface-raised); | |
| border-bottom: 1px solid var(--border-default); | |
| font-weight: 600; | |
| font-size: 0.8rem; | |
| color: var(--text-tertiary); | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| } | |
| .scores-table-row { | |
| display: grid; | |
| grid-template-columns: 150px 70px 1fr 70px; | |
| align-items: center; | |
| padding: 0.75rem 1rem; | |
| border-bottom: 1px solid var(--border-default); | |
| font-size: 0.9rem; | |
| } | |
| .scores-table-row:last-child { | |
| border-bottom: none; | |
| } | |
| .overall-row { | |
| background-color: rgba(37, 99, 235, 0.02); | |
| border-top: 1.5px solid var(--border-default); | |
| } | |
| .score-col-label { | |
| font-weight: 500; | |
| color: var(--text-primary); | |
| } | |
| .score-col-val { | |
| text-align: center; | |
| font-weight: 600; | |
| } | |
| .score-col-bar { | |
| padding: 0 1rem; | |
| } | |
| .score-progress-bar { | |
| height: 6px; | |
| background-color: #e2e8f0; | |
| border-radius: 10px; | |
| overflow: hidden; | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 2px; | |
| } | |
| .score-val-a { | |
| background-color: var(--superman-yellow); | |
| height: 100%; | |
| border-radius: 10px 0 0 10px; | |
| justify-self: end; | |
| } | |
| .score-val-b { | |
| background-color: var(--superman-blue); | |
| height: 100%; | |
| border-radius: 0 10px 10px 0; | |
| justify-self: start; | |
| } | |
| .overall-progress-bar { | |
| height: 10px; | |
| background-color: #e2e8f0; | |
| border-radius: 10px; | |
| overflow: hidden; | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 2px; | |
| } | |
| .overall-val-a { | |
| background-color: var(--superman-yellow); | |
| height: 100%; | |
| border-radius: 10px 0 0 10px; | |
| justify-self: end; | |
| } | |
| .overall-val-b { | |
| background-color: var(--superman-blue); | |
| height: 100%; | |
| border-radius: 0 10px 10px 0; | |
| justify-self: start; | |
| } | |
| /* Strengths & Weaknesses Columns */ | |
| .verdict-details-grid { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 1.5rem; | |
| } | |
| .verdict-details-col { | |
| background-color: var(--bg-surface); | |
| border: 1px solid var(--border-default); | |
| padding: 1.25rem; | |
| border-radius: 6px; | |
| } | |
| .verdict-details-col h4 { | |
| font-family: 'Roboto Condensed', sans-serif; | |
| font-weight: 700; | |
| margin-bottom: 1rem; | |
| font-size: 1rem; | |
| border-bottom: 1.5px solid var(--border-default); | |
| padding-bottom: 0.5rem; | |
| } | |
| .verdict-details-col:first-child h4 { | |
| color: var(--warning-color); | |
| border-bottom-color: rgba(245, 158, 11, 0.2); | |
| } | |
| .verdict-details-col:last-child h4 { | |
| color: var(--info-color); | |
| border-bottom-color: rgba(59, 130, 246, 0.2); | |
| } | |
| .verdict-list-title { | |
| font-size: 0.75rem; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| margin-bottom: 0.5rem; | |
| } | |
| .strength-list-title { | |
| color: #16a34a; | |
| } | |
| .weakness-list-title { | |
| color: #dc2626; | |
| margin-top: 1rem; | |
| } | |
| .verdict-details-col ul { | |
| padding-left: 1.25rem; | |
| margin: 0; | |
| } | |
| .verdict-details-col li { | |
| font-size: 0.85rem; | |
| color: var(--text-secondary); | |
| line-height: 1.4; | |
| margin-bottom: 0.4rem; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| / * = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = | |
| R E T R I E V A L X - R A Y H I G H L I G H T S ( T A S K 3 . 4 ) | |
| = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = * / | |
| . x r a y - c o n t e n t . s e a r c h - a c t i v e . c h u n k - h i g h l i g h t { | |
| o p a c i t y : 0 . 3 ; | |
| t r a n s i t i o n : a l l 0 . 3 s e a s e ; | |
| } | |
| . x r a y - c o n t e n t . s e a r c h - a c t i v e . c h u n k - h i g h l i g h t . r e t r i e v e d - r a n k - 1 { | |
| o p a c i t y : 1 . 0 ; | |
| b a c k g r o u n d - c o l o r : r g b a ( 2 5 5 , 1 6 5 , 0 , 0 . 4 ) ; | |
| b o x - s h a d o w : 0 0 1 2 p x r g b a ( 2 5 5 , 1 6 5 , 0 , 0 . 6 ) ; | |
| b o r d e r - t o p : 2 p x s o l i d v a r ( - - w a r n i n g - c o l o r ) ; | |
| b o r d e r - b o t t o m : 2 p x s o l i d v a r ( - - w a r n i n g - c o l o r ) ; | |
| z - i n d e x : 1 0 ; | |
| p o s i t i o n : r e l a t i v e ; | |
| } | |
| . x r a y - c o n t e n t . s e a r c h - a c t i v e . c h u n k - h i g h l i g h t . r e t r i e v e d - r a n k - 2 { | |
| o p a c i t y : 0 . 9 ; | |
| b a c k g r o u n d - c o l o r : r g b a ( 2 5 5 , 1 6 5 , 0 , 0 . 2 5 ) ; | |
| b o r d e r - t o p : 2 p x d a s h e d r g b a ( 2 5 5 , 1 6 5 , 0 , 0 . 6 ) ; | |
| b o r d e r - b o t t o m : 2 p x d a s h e d r g b a ( 2 5 5 , 1 6 5 , 0 , 0 . 6 ) ; | |
| z - i n d e x : 9 ; | |
| p o s i t i o n : r e l a t i v e ; | |
| } | |
| . x r a y - c o n t e n t . s e a r c h - a c t i v e . c h u n k - h i g h l i g h t . r e t r i e v e d - r a n k - 3 { | |
| o p a c i t y : 0 . 8 ; | |
| b a c k g r o u n d - c o l o r : r g b a ( 2 5 5 , 1 6 5 , 0 , 0 . 1 5 ) ; | |
| b o r d e r - t o p : 2 p x d o t t e d r g b a ( 2 5 5 , 1 6 5 , 0 , 0 . 4 ) ; | |
| b o r d e r - b o t t o m : 2 p x d o t t e d r g b a ( 2 5 5 , 1 6 5 , 0 , 0 . 4 ) ; | |
| z - i n d e x : 8 ; | |
| p o s i t i o n : r e l a t i v e ; | |
| } | |
| /* ============================================================ | |
| MOBILE RESPONSIVENESS MEDIA QUERIES | |
| ============================================================ */ | |
| @media (max-width: 1024px) { | |
| .app-main { | |
| grid-template-columns: 1fr ; | |
| height: auto ; | |
| } | |
| .panel { | |
| border-right: none ; | |
| border-bottom: 1px solid var(--border-default) ; | |
| height: auto ; | |
| max-height: none ; | |
| overflow-y: visible ; | |
| } | |
| #config-panel { | |
| order: 1; | |
| } | |
| #xray-panel { | |
| order: 2; | |
| min-height: 450px; | |
| height: 600px ; /* Contain document viewer / vector map height */ | |
| } | |
| #inspector-panel { | |
| order: 3; | |
| max-height: 500px ; | |
| } | |
| .canvas-wrapper { | |
| height: 350px ; | |
| } | |
| .arena-modal-content { | |
| width: 95% ; | |
| height: 90% ; | |
| max-height: 90% ; | |
| padding: var(--space-md) ; | |
| } | |
| } | |
| @media (max-width: 768px) { | |
| .app-header { | |
| padding: var(--space-sm) var(--space-md) ; | |
| flex-direction: column; | |
| gap: var(--space-sm); | |
| align-items: flex-start; | |
| } | |
| .strategy-grid { | |
| grid-template-columns: 1fr ; | |
| } | |
| .stats-grid { | |
| grid-template-columns: 1fr 1fr ; | |
| gap: var(--space-sm) ; | |
| } | |
| .arena-columns { | |
| flex-direction: column ; | |
| gap: var(--space-md) ; | |
| } | |
| .arena-col { | |
| width: 100% ; | |
| border-right: none ; | |
| border-bottom: 1px solid var(--border-default) ; | |
| padding-bottom: var(--space-md) ; | |
| } | |
| .verdict-details-grid { | |
| grid-template-columns: 1fr ; | |
| gap: var(--space-md) ; | |
| } | |
| .arena-query-bar { | |
| flex-direction: column ; | |
| gap: var(--space-sm) ; | |
| } | |
| .arena-query-bar button { | |
| width: 100% ; | |
| } | |
| .query-input-wrapper { | |
| flex-direction: column ; | |
| gap: var(--space-sm) ; | |
| } | |
| .query-input-wrapper select, | |
| .query-input-wrapper input, | |
| .query-input-wrapper button { | |
| width: 100% ; | |
| } | |
| .score-col-bar { | |
| display: none ; /* Hide visual score comparison bar to save screen width */ | |
| } | |
| } | |