/* Lifted verbatim from assignment-result-driller.blade.php. Inline it was 39,428 bytes of HTML on every render; as a file the browser fetches it once. */ /* ============================================================ RESULT-DRILLER — mobile / tablet redesign (<= 1024px) The old layout display:none'd the Match Explorer and Analytics columns on small screens, so phones could only ever see code. This adds a segmented switcher that makes every panel reachable, one full-width panel at a time. Desktop is untouched. ============================================================ */ /* Segmented switcher + mobile-only sheet close — hidden on desktop */ .dr-mtabs { display: none; } .dr-subs-close { display: none; } @media (max-width: 1024px) { .dr-mtabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; position: sticky; top: 0; z-index: 60; margin: 0 0 12px; padding: 6px; background: rgba(255, 255, 255, 0.92); -webkit-backdrop-filter: saturate(180%) blur(12px); backdrop-filter: saturate(180%) blur(12px); border: 1px solid #e5e7eb; border-radius: 14px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); } .dr-mtab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 8px 4px; border: none; background: transparent; border-radius: 10px; color: #6b7280; font-size: 11px; font-weight: 600; letter-spacing: -0.01em; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .18s ease, color .18s ease, box-shadow .18s ease; } .dr-mtab i { font-size: 17px; line-height: 1; } .dr-mtab .dr-mtab-count { min-width: 16px; height: 15px; padding: 0 4px; line-height: 15px; border-radius: 8px; background: #eef2ff; color: #6366f1; font-size: 10px; font-weight: 700; } .dr-mtab.active { background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); color: #fff; box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35); } .dr-mtab.active .dr-mtab-count { background: rgba(255, 255, 255, 0.25); color: #fff; } /* One panel at a time */ .submission-viewer-grid { grid-template-columns: 1fr !important; gap: 0 !important; overflow: visible !important; } .submission-viewer-grid > .viewer-card { display: none !important; } body.drv-code .submission-viewer-grid > .viewer-card:nth-child(1), body.drv-matches .submission-viewer-grid > .viewer-card:nth-child(2), body.drv-insights .submission-viewer-grid > .viewer-card:nth-child(3) { display: flex !important; } .submission-viewer-grid > .viewer-card { height: calc(100vh - 178px) !important; max-height: calc(100vh - 178px) !important; height: calc(100dvh - 178px) !important; max-height: calc(100dvh - 178px) !important; min-height: 380px !important; border-radius: 14px !important; } /* Submissions tab — full-screen sheet. The widget is a direct child of (a flex row), so static positioning mis-lays-out; a fixed sheet sidesteps that entirely. */ .submission-nav-widget { display: none !important; } body.drv-subs .dr-mtabs { display: none !important; } /* sheet has its own close */ body.drv-subs .submission-viewer-grid { display: none !important; } body.drv-subs .submission-nav-widget { display: flex !important; position: fixed !important; top: var(--header-height, 58px) !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: auto !important; max-width: none !important; height: auto !important; max-height: none !important; margin: 0 !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; transform: none !important; z-index: 99000 !important; } body.drv-subs .nav-body { display: block !important; flex: 1; overflow: hidden; } body.drv-subs .nav-header { cursor: default !important; } body.drv-subs .nav-header .drag-handle, body.drv-subs #toggle-nav { display: none !important; } body.drv-subs .submissions-list { max-height: calc(100dvh - var(--header-height, 58px) - 130px); overflow-y: auto; } /* Mobile close button on the submissions sheet */ .dr-subs-close { display: none; } body.drv-subs .dr-subs-close { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: none; border-radius: 9px; background: #f1f5f9; color: #475569; cursor: pointer; flex-shrink: 0; } body.drv-subs .dr-subs-close:active { background: #e2e8f0; } /* Code viewer header — tighter still, and the legend gives up its room first */ .code-column .column-header { padding: 8px 12px; gap: 8px; min-height: 0; } .code-column .header-title { font-size: 13px; gap: 6px; } .code-column .header-icon { width: 24px; height: 24px; border-radius: 7px; } .current-submission-badge { max-width: 42vw; font-size: 10px; padding: 3px 7px; } .code-meta-bar { padding: 0 12px; gap: 8px; } .plagiarism-legend { display: none !important; } /* Match Explorer header — keep type filters in a swipeable row */ .matches-column .column-header { padding: 10px 12px; gap: 8px; } /* Analytics column must scroll on mobile (desktop keeps it clipped) */ .charts-column { overflow-y: auto !important; -webkit-overflow-scrolling: touch; } /* Clear the global "Ask AI" FAB so the last items aren't hidden behind it */ .code-viewer, .matches-list, .charts-column { padding-bottom: 92px !important; } } @media (max-width: 480px) { .dr-mtab { font-size: 10px; } .dr-mtab i { font-size: 16px; } .current-submission-badge { max-width: 36vw; } } /* Dark mode for the switcher */ [data-kt-theme-mode="dark"] .dr-mtabs, .dark .dr-mtabs { background: rgba(17, 24, 39, 0.92); border-color: #374151; } [data-kt-theme-mode="dark"] .dr-mtab, .dark .dr-mtab { color: #9ca3af; } [data-kt-theme-mode="dark"] .dr-mtab .dr-mtab-count, .dark .dr-mtab .dr-mtab-count { background: #312e81; color: #c7d2fe; } .apple-toggle { position: relative; display: inline-block; flex-shrink: 0; } .apple-toggle-sm { width: 32px; height: 18px; } .apple-toggle input { opacity: 0; width: 0; height: 0; position: absolute; } .apple-toggle-slider { position: absolute; cursor: pointer; inset: 0; background: #e5e5ea; border-radius: 18px; transition: background 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .apple-toggle-sm .apple-toggle-slider:before { content: ""; position: absolute; height: 14px; width: 14px; left: 2px; bottom: 2px; background: #fff; border-radius: 50%; transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 1px 2px rgba(0,0,0,0.2); } .apple-toggle input:checked + .apple-toggle-slider { background: #34c759; } .apple-toggle-sm input:checked + .apple-toggle-slider:before { transform: translateX(14px); } .apple-toggle input:focus-visible + .apple-toggle-slider { outline: 2px solid #007aff; outline-offset: 2px; } /* AI Threshold Slider Styles */ #ai-threshold-slider { -webkit-appearance: none; appearance: none; background: linear-gradient(to right, #8b5cf6 0%, #8b5cf6 var(--value, 40%), #e5e5ea var(--value, 40%), #e5e5ea 100%); border-radius: 4px; outline: none; transition: background 0.15s ease; } #ai-threshold-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 12px; height: 12px; border-radius: 50%; background: #8b5cf6; cursor: pointer; box-shadow: 0 1px 3px rgba(139, 92, 246, 0.4); transition: transform 0.15s ease, box-shadow 0.15s ease; } #ai-threshold-slider::-webkit-slider-thumb:hover { transform: scale(1.15); box-shadow: 0 2px 6px rgba(139, 92, 246, 0.5); } #ai-threshold-slider::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: #8b5cf6; cursor: pointer; border: none; box-shadow: 0 1px 3px rgba(139, 92, 246, 0.4); } /* Dark mode adjustments */ .dark #ai-threshold-slider { background: linear-gradient(to right, #8b5cf6 0%, #8b5cf6 var(--value, 40%), #374151 var(--value, 40%), #374151 100%); } /* ═══════════════════════════════════════════════════════════════════════════════ APPLE PREMIUM CODE COMPARISON MODAL - Clean, Minimal, Beautiful ═══════════════════════════════════════════════════════════════════════════════ */ /* Hide floating widgets that can sit above modals (they use huge z-index !important) */ body[data-premium-modal-open="true"] .submission-nav-widget, body[data-premium-modal-open="true"] #submission-navigator { display: none !important; } /* Force sidebar/header below modal */ body[data-premium-modal-open="true"] #header, body[data-premium-modal-open="true"] #sidebar, body[data-premium-modal-open="true"] #navbar, body[data-premium-modal-open="true"] .assignment-nav-modern, body[data-premium-modal-open="true"] [class*="z-20"], body[data-premium-modal-open="true"] [class*="z-50"], body[data-premium-modal-open="true"] [class*="fixed"]:not(.premium-code-modal) { z-index: 1 !important; } .premium-code-modal { position: fixed; inset: 0; z-index: 2147483647; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); display: flex; align-items: center; justify-content: center; padding: 16px; animation: premiumFadeIn 0.2s ease-out; isolation: isolate; } @keyframes premiumFadeIn { from { opacity: 0; } to { opacity: 1; } } .premium-code-modal-container { width: 100%; max-width: 1600px; height: calc(100vh - 32px); background: #ffffff; border-radius: 16px; box-shadow: 0 25px 80px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.05); display: flex; flex-direction: column; overflow: hidden; animation: premiumSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1); } @keyframes premiumSlideUp { from { opacity: 0; transform: translateY(20px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } /* Premium Header */ /* One compact row. The header is a label for the code below it, not a feature of its own, so it gets a strip rather than a banner. */ .premium-code-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 22px; border-bottom: 1px solid #f0f0f0; background: #fafafa; } .premium-code-header-left { display: flex; align-items: center; gap: 12px; min-width: 0; } /* Similarity ring (Apple-style radial progress) */ .premium-similarity-badge.premium-similarity-ring { position: relative; width: 46px; height: 46px; border-radius: 999px; display: block; flex: 0 0 auto; } .premium-similarity-badge.premium-similarity-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); } .premium-similarity-badge.premium-similarity-ring .ring-bg { fill: none; stroke: #e5e7eb; stroke-width: 5; } .premium-similarity-badge.premium-similarity-ring .ring-fill { fill: none; stroke: #10b981; /* default (low) - overridden by JS */ stroke-width: 5; stroke-linecap: round; transition: stroke-dasharray 0.6s ease, stroke 0.3s ease; } .premium-similarity-badge.premium-similarity-ring .ring-text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; } .premium-similarity-badge.premium-similarity-ring .similarity-value { font-size: 13.5px; font-weight: 700; color: #111827; letter-spacing: -0.02em; } /* Title and its badges share the row instead of stacking. */ .premium-code-title-group { display: flex; flex-direction: row; align-items: center; gap: 10px; min-width: 0; } .premium-code-title { font-size: 17px; font-weight: 600; color: #1a1a1a; margin: 0; letter-spacing: -0.01em; white-space: nowrap; } .premium-code-meta { display: flex; align-items: center; gap: 9px; min-width: 0; } .premium-type-badge { padding: 3px 10px; background: #007aff; color: white; font-size: 10.5px; font-weight: 700; border-radius: 20px; text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; } .premium-tokens { font-size: 13px; color: #666; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .premium-code-header-right { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; } .premium-btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 15px; border-radius: 9px; font-size: 13.5px; font-weight: 500; cursor: pointer; transition: all 0.2s ease; border: none; text-decoration: none; } .premium-btn-secondary { background: #f5f5f7; color: #1a1a1a; } .premium-btn-secondary:hover { background: #e8e8ed; } .premium-btn-primary { background: #007aff; color: white; } .premium-btn-primary:hover { background: #0066d6; } .premium-close-btn { width: 36px; height: 36px; border-radius: 50%; border: none; background: #f5f5f7; color: #666; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; } .premium-close-btn:hover { background: #e8e8ed; color: #1a1a1a; } /* Premium Code Body */ .premium-code-body { flex: 1; overflow: hidden; background: #f5f5f7; } .premium-code-grid { display: grid; grid-template-columns: 1fr 1px 1fr; height: 100%; } .premium-code-panel { display: flex; flex-direction: column; background: #ffffff; overflow: hidden; } .premium-code-divider { background: #e5e5e5; position: relative; } .premium-code-divider .divider-line { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 4px; height: 40px; background: #d1d1d6; border-radius: 4px; } /* Panel Header */ .premium-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; background: #fafafa; border-bottom: 1px solid #f0f0f0; } .premium-panel-title { display: flex; align-items: center; gap: 14px; } .premium-panel-icon { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 18px; } .premium-panel-icon.student { background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%); color: #1976d2; } .premium-panel-icon.matched { background: linear-gradient(135deg, #fce4ec 0%, #f8bbd9 100%); color: #c2185b; } .premium-panel-info { display: flex; flex-direction: column; gap: 2px; } .premium-panel-label { font-size: 11px; font-weight: 600; color: #999; text-transform: uppercase; letter-spacing: 0.5px; } .premium-panel-filename { font-size: 15px; font-weight: 600; color: #1a1a1a; max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .premium-lines-badge { padding: 6px 14px; background: #f5f5f7; color: #666; font-size: 12px; font-weight: 600; border-radius: 8px; font-family: 'SF Mono', 'Monaco', monospace; } .premium-similarity-badge-panel { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; background: #f0f9ff; border: 1px solid #bae6fd; color: #0369a1; font-size: 11px; font-weight: 500; border-radius: 6px; white-space: nowrap; transition: all 0.2s ease; letter-spacing: 0.01em; } .premium-similarity-badge-panel i { font-size: 12px; opacity: 0.9; } .premium-similarity-badge-panel.high { background: #fee2e2; border-color: #fecaca; color: #dc2626; } .premium-similarity-badge-panel.medium { background: #fef3c7; border-color: #fde68a; color: #d97706; } .premium-similarity-badge-panel.low { background: #dcfce7; border-color: #bbf7d0; color: #16a34a; } /* A headline the panes underneath cannot support. Neutral on purpose: the alarm colours are reserved for percentages the displayed code corroborates. See mrApplyCorroboration() for when this is applied and why. */ .premium-similarity-badge-panel.uncorroborated { background: #f8fafc; border-color: #cbd5e1; color: #64748b; } /* Code Area */ .premium-panel-code { flex: 1; overflow: auto; background: #fafafa; position: relative; } /* Let long lines expand the row so the panel gets one horizontal scrollbar instead of a per-line scrollbar on each .code-content. */ .premium-panel-code .comparison-code-line { min-width: max-content; } .premium-panel-code pre { margin: 0; padding: 12px 8px; font-family: 'SF Mono', 'JetBrains Mono', 'Fira Code', 'Monaco', monospace; font-size: 13px; line-height: 1.7; color: #1a1a1a; background: transparent; min-height: 100%; } .premium-panel-code code { font-family: inherit; } /* Loading State */ .premium-code-loading { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; background: #fafafa; color: #999; font-size: 14px; } .premium-spinner { width: 32px; height: 32px; border: 3px solid #e5e5e5; border-top-color: #007aff; border-radius: 50%; animation: premiumSpin 0.8s linear infinite; } @keyframes premiumSpin { to { transform: rotate(360deg); } } /* Premium Footer */ .premium-code-footer { display: flex; align-items: center; justify-content: space-between; padding: 16px 28px; border-top: 1px solid #f0f0f0; background: #fafafa; } .premium-shortcut { font-size: 13px; color: #999; } .premium-shortcut kbd { display: inline-block; padding: 3px 8px; background: #e5e5e5; border-radius: 6px; font-size: 11px; font-weight: 600; color: #666; font-family: inherit; } /* Highlighted Lines */ .premium-panel-code .highlighted-line { background: rgba(255, 59, 48, 0.08) !important; border-left: 3px solid #ff3b30; margin-left: -8px; padding-left: 5px; display: block; } .premium-panel-code .line-number { color: #c7c7cc; user-select: none; padding-right: 10px; text-align: right; min-width: 36px; display: inline-block; } /* Syntax Highlighting */ .premium-panel-code .hljs-keyword { color: #af52de; } .premium-panel-code .hljs-string { color: #34c759; } .premium-panel-code .hljs-number { color: #007aff; } .premium-panel-code .hljs-comment { color: #8e8e93; font-style: italic; } .premium-panel-code .hljs-function { color: #5856d6; } .premium-panel-code .hljs-class { color: #00c7be; } .premium-panel-code .hljs-variable { color: #1a1a1a; } .premium-panel-code .hljs-built_in { color: #ff9500; } .premium-panel-code .hljs-type { color: #00c7be; } .premium-panel-code .hljs-title { color: #007aff; } /* Dark Mode */ .dark .premium-code-modal { background: rgba(0, 0, 0, 0.75); } .dark .premium-code-modal-container { background: #1c1c1e; box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5); } .dark .premium-code-header { background: #2c2c2e; border-bottom-color: #3a3a3c; } .dark .premium-code-title { color: #ffffff; } .dark .premium-tokens { color: #98989d; } /* The ring value is near-black by default, which disappeared into the dark header. The track is lightened for the same reason. */ .dark .premium-similarity-badge.premium-similarity-ring .similarity-value { color: #ffffff; } .dark .premium-similarity-badge.premium-similarity-ring .ring-bg { stroke: #3a3a3c; } .dark .premium-btn-secondary { background: #3a3a3c; color: #ffffff; } .dark .premium-btn-secondary:hover { background: #48484a; } .dark .premium-close-btn { background: #3a3a3c; color: #98989d; } .dark .premium-close-btn:hover { background: #48484a; color: #ffffff; } .dark .premium-code-body { background: #1c1c1e; } .dark .premium-code-panel { background: #2c2c2e; } .dark .premium-code-divider { background: #3a3a3c; } .dark .premium-code-divider .divider-line { background: #48484a; } .dark .premium-panel-header { background: #2c2c2e; border-bottom-color: #3a3a3c; } .dark .premium-panel-label { color: #636366; } .dark .premium-panel-filename { color: #ffffff; } .dark .premium-lines-badge { background: #3a3a3c; color: #98989d; } .dark .premium-similarity-badge-panel { background: #1e3a5f; border-color: #3b82f6; color: #93c5fd; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); } .dark .premium-similarity-badge-panel.high { background: #7f1d1d; border-color: #dc2626; color: #fecaca; box-shadow: 0 2px 8px rgba(220, 38, 38, 0.3); } .dark .premium-similarity-badge-panel.medium { background: #78350f; border-color: #f59e0b; color: #fde68a; box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3); } .dark .premium-similarity-badge-panel.low { background: #166534; border-color: #10b981; color: #d1fae5; box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3); } .dark .premium-similarity-badge-panel.uncorroborated { background: rgba(148, 163, 184, 0.12); border-color: rgba(148, 163, 184, 0.38); color: #cbd5e1; box-shadow: none; } /* Alternative: media query for systems using prefers-color-scheme */ @media (prefers-color-scheme: dark) { .premium-similarity-badge-panel { background: #1e3a5f; border-color: #3b82f6; color: #93c5fd; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); } .premium-similarity-badge-panel.high { background: #7f1d1d; border-color: #dc2626; color: #fecaca; box-shadow: 0 2px 8px rgba(220, 38, 38, 0.3); } .premium-similarity-badge-panel.medium { background: #78350f; border-color: #f59e0b; color: #fde68a; box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3); } .premium-similarity-badge-panel.low { background: #166534; border-color: #10b981; color: #d1fae5; box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3); } } .dark .premium-panel-code { background: #1c1c1e; } .dark .premium-panel-code pre { color: #ffffff; } .dark .premium-code-loading { background: #1c1c1e; color: #636366; } .dark .premium-spinner { border-color: #3a3a3c; border-top-color: #0a84ff; } .dark .premium-code-footer { background: #2c2c2e; border-top-color: #3a3a3c; } .dark .premium-shortcut { color: #636366; } .dark .premium-shortcut kbd { background: #3a3a3c; color: #98989d; } .dark .premium-panel-code .highlighted-line { background: rgba(255, 69, 58, 0.15) !important; border-left-color: #ff453a; } .dark .premium-panel-code .line-number { color: #48484a; } .dark .premium-panel-code .hljs-keyword { color: #ff7abe; } .dark .premium-panel-code .hljs-string { color: #30d158; } .dark .premium-panel-code .hljs-number { color: #64d2ff; } .dark .premium-panel-code .hljs-comment { color: #636366; } .dark .premium-panel-code .hljs-function { color: #bf5af2; } .dark .premium-panel-code .hljs-class { color: #66d4cf; } .dark .premium-panel-code .hljs-type { color: #66d4cf; } .dark .premium-panel-code .hljs-title { color: #64d2ff; } /* Responsive */ /* Laptops: go (almost) fullscreen so all the code is visible */ @media (max-width: 1440px) { .premium-code-modal { padding: 0; } .premium-code-modal-container { height: 100vh; max-width: 100vw; border-radius: 0; box-shadow: none; } } @media (max-width: 1024px) { .premium-code-grid { grid-template-columns: 1fr; grid-template-rows: 1fr 1px 1fr; } .premium-code-divider { background: #e5e5e5; } .premium-code-divider .divider-line { width: 40px; height: 4px; } } @media (max-width: 640px) { .premium-code-modal { padding: 0; } .premium-code-modal-container { height: 100vh; border-radius: 0; } .premium-code-header { padding: 8px 14px; } /* Narrow enough that the title and its badges cannot share a line. */ .premium-code-title-group { flex-direction: column; align-items: flex-start; gap: 3px; } .premium-code-title { font-size: 14px; } } /* ═══════════════════════════════════════════════════════════════════════════════ MATCH REPORT — what these two blocks actually share. Two layers: a measured diff of the highlighted lines (computed in the browser, always shown) and a written analysis of that diff (fetched, fills in after). ═══════════════════════════════════════════════════════════════════════════════ */ /* Let the report stack above the grid without breaking the panel height */ .premium-code-body { display: flex; flex-direction: column; } .premium-code-grid { flex: 1 1 auto; min-height: 0; height: auto; } /* Compact by default: verdict, headline, counts and a hairline meter, in two dense rows. Everything else lives behind the chevron, because this sits on top of the code the reviewer actually came to read. */ .match-report { flex: 0 0 auto; display: block; max-height: 38vh; overflow-y: auto; padding: 11px 20px 12px; background: #ffffff; border-bottom: 1px solid #e5e7eb; border-left: 3px solid #94a3b8; font-size: 14px; color: #1f2937; } .dark .match-report { background: rgba(255, 255, 255, 0.02); border-bottom-color: rgba(255, 255, 255, 0.09); color: #e5e7eb; } .match-report.mr-risk-high { border-left-color: #ef4444; } .match-report.mr-risk-med { border-left-color: #f59e0b; } .match-report.mr-risk-low { border-left-color: #10b981; } /* Detail lives behind the chevron. Collapsed is the resting state. */ .match-report .mr-details { display: none; } .match-report.mr-expanded .mr-details { display: block; } /* ── Head: verdict, headline, counts, confidence ───────────────────────── */ .mr-head { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; } /* The answer to the question, so it is sized like an answer. */ .mr-verdict { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; padding: 4px 12px; border-radius: 999px; font-size: 13.5px; font-weight: 700; letter-spacing: 0.01em; white-space: nowrap; background: #f1f5f9; color: #334155; border: 1px solid #cbd5e1; } .mr-verdict svg { width: 15px; height: 15px; flex: 0 0 auto; } .mr-risk-high .mr-verdict { background: #fef2f2; color: #b91c1c; border-color: #fca5a5; } .mr-risk-med .mr-verdict { background: #fffbeb; color: #b45309; border-color: #fcd34d; } .mr-risk-low .mr-verdict { background: #ecfdf5; color: #047857; border-color: #6ee7b7; } .dark .mr-verdict { background: rgba(255,255,255,0.06); color: #cbd5e1; border-color: rgba(255,255,255,0.14); } .dark .mr-risk-high .mr-verdict { background: rgba(239,68,68,0.14); color: #fca5a5; border-color: rgba(239,68,68,0.4); } .dark .mr-risk-med .mr-verdict { background: rgba(245,158,11,0.14); color: #fcd34d; border-color: rgba(245,158,11,0.4); } .dark .mr-risk-low .mr-verdict { background: rgba(16,185,129,0.14); color: #6ee7b7; border-color: rgba(16,185,129,0.4); } .mr-headline { font-size: 14px; font-weight: 650; color: #111827; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dark .mr-headline { color: #f3f4f6; } /* Counts, inline in the head row rather than a band of their own. */ .mr-quick { display: flex; align-items: baseline; gap: 14px; flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; margin-left: auto; justify-content: flex-end; } .mr-conf { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; font-size: 12.5px; font-weight: 600; color: #64748b; white-space: nowrap; } .dark .mr-conf { color: #94a3b8; } .mr-conf-track { display: block; width: 64px; height: 7px; border-radius: 999px; background: #e2e8f0; overflow: hidden; } .dark .mr-conf-track { background: rgba(255,255,255,0.12); } /* display:block matters: a span is inline, and width/height do not apply to inline elements, so the fill rendered as nothing at all. The track escaped it by being a flex item, which blockifies; its child did not. */ .mr-conf-fill { display: block; height: 100%; min-width: 3px; border-radius: 999px; background: #64748b; transition: width 0.4s ease, background 0.3s ease; } /* Coloured by the confidence itself, not by the panel's verdict, so the bar still means something when the two disagree. */ .mr-conf-high .mr-conf-fill { background: #ef4444; } .mr-conf-med .mr-conf-fill { background: #f59e0b; } .mr-conf-low .mr-conf-fill { background: #10b981; } .mr-conf-high { color: #b91c1c; } .mr-conf-med { color: #b45309; } .dark .mr-conf-high { color: #fca5a5; } .dark .mr-conf-med { color: #fcd34d; } .mr-toggle { flex: 0 0 auto; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #e2e8f0; border-radius: 7px; background: #ffffff; color: #64748b; cursor: pointer; transition: background 0.15s, color 0.15s; } .mr-toggle:hover { background: #f1f5f9; color: #0f172a; } .dark .mr-toggle { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.12); color: #94a3b8; } .dark .mr-toggle:hover { background: rgba(255,255,255,0.1); color: #f3f4f6; } .mr-toggle svg { width: 14px; height: 14px; transition: transform 0.18s; transform: rotate(-90deg); } .mr-expanded .mr-toggle svg { transform: none; } /* ── Measured diff ─────────────────────────────────────────────────────── */ .mr-stat { display: inline-flex; align-items: baseline; gap: 5px; font-size: 12.5px; color: #64748b; white-space: nowrap; } .dark .mr-stat { color: #94a3b8; } .mr-stat b { font-size: 14px; font-weight: 700; color: #0f172a; } .dark .mr-stat b { color: #f1f5f9; } .mr-stat.is-identical b { color: #dc2626; } .dark .mr-stat.is-identical b { color: #f87171; } .mr-stat.is-renamed b { color: #d97706; } .dark .mr-stat.is-renamed b { color: #fbbf24; } .mr-meter { display: flex; width: 100%; height: 5px; border-radius: 999px; overflow: hidden; background: #eef2f6; margin-top: 9px; } .dark .mr-meter { background: rgba(255,255,255,0.08); } .mr-meter i { display: block; height: 100%; } .mr-meter i.seg-identical { background: #ef4444; } .mr-meter i.seg-formatting { background: #fb923c; } .mr-meter i.seg-renamed { background: #fbbf24; } .mr-meter i.seg-other { background: transparent; } /* ── Written analysis ──────────────────────────────────────────────────── */ .mr-body { margin-top: 10px; } /* Two lines is the whole budget while collapsed; the chevron reveals the rest. */ .match-report:not(.mr-expanded) .mr-summary { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .mr-ai-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #7c3aed; background: rgba(124, 58, 237, 0.09); border: 1px solid rgba(124, 58, 237, 0.25); border-radius: 5px; padding: 2px 6px; vertical-align: 1px; margin-right: 7px; } .dark .mr-ai-tag { color: #c4b5fd; background: rgba(139,92,246,0.16); border-color: rgba(139,92,246,0.4); } .mr-summary { margin: 0; line-height: 1.6; color: #374151; font-size: 13.8px; } .dark .mr-summary { color: #d1d5db; } .mr-evidence { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 5px; } .mr-evidence li { display: flex; gap: 8px; align-items: flex-start; line-height: 1.55; font-size: 13.4px; color: #4b5563; } .dark .mr-evidence li { color: #cbd5e1; } .mr-evidence li::before { content: ''; flex: 0 0 auto; width: 5px; height: 5px; margin-top: 7px; border-radius: 50%; background: #94a3b8; } .mr-risk-high .mr-evidence li::before { background: #ef4444; } .mr-risk-med .mr-evidence li::before { background: #f59e0b; } .mr-evidence b { color: #111827; font-weight: 650; } .dark .mr-evidence b { color: #f3f4f6; } .mr-note { margin-top: 8px; padding: 6px 10px; border-radius: 7px; font-size: 13px; line-height: 1.55; background: #f8fafc; border: 1px solid #e2e8f0; color: #475569; } .dark .mr-note { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.09); color: #cbd5e1; } .mr-note strong { color: #0f172a; font-weight: 650; } .dark .mr-note strong { color: #f1f5f9; } .mr-note + .mr-note { margin-top: 6px; } /* Placeholder while the written analysis is still loading */ .mr-loading { display: flex; align-items: center; gap: 9px; font-size: 13.4px; color: #64748b; } .dark .mr-loading { color: #94a3b8; } .mr-loading .mr-spin { width: 13px; height: 13px; flex: 0 0 auto; border: 2px solid #cbd5e1; border-top-color: #6366f1; border-radius: 50%; animation: mrSpin 0.7s linear infinite; } @keyframes mrSpin { to { transform: rotate(360deg); } } /* ── Evidence chips ────────────────────────────────────────────────────── */ .mr-chips { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-top: 9px; padding-top: 8px; border-top: 1px dashed #e2e8f0; } .dark .mr-chips { border-top-color: rgba(255,255,255,0.1); } .mr-chips-label { font-size: 11.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #94a3b8; margin-right: 2px; } .verbatim-chip { display: inline-flex; align-items: center; gap: 5px; max-width: 260px; padding: 3px 10px; border-radius: 999px; border: 1px solid #f59e0b; background: #ffffff; color: #78350f; font-family: 'Fira Code', 'Monaco', 'Consolas', monospace; font-size: 12px; line-height: 1.5; cursor: pointer; transition: background 0.15s, transform 0.15s, box-shadow 0.15s; } .verbatim-chip:hover { background: #fef3c7; transform: translateY(-1px); box-shadow: 0 3px 10px -4px rgba(245, 158, 11, 0.6); } .dark .verbatim-chip { background: rgba(0, 0, 0, 0.25); border-color: rgba(245, 158, 11, 0.5); color: #fde68a; } .dark .verbatim-chip:hover { background: rgba(245, 158, 11, 0.18); } .verbatim-chip .vb-kind { font-weight: 700; font-size: 10px; letter-spacing: 0.04em; color: #b45309; flex: 0 0 auto; } .dark .verbatim-chip .vb-kind { color: #fbbf24; } .verbatim-chip .vb-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Rename chips (old -> new) and the longest-identical-run chip reuse the chip shell in cooler colors, so amber stays reserved for literal verbatim text. */ .verbatim-chip.vb-rename { border-color: #c7d2fe; color: #3730a3; } .verbatim-chip.vb-rename:hover { background: #eef2ff; box-shadow: 0 3px 10px -4px rgba(99, 102, 241, 0.6); } .verbatim-chip.vb-rename .vb-kind { color: #6366f1; } .dark .verbatim-chip.vb-rename { border-color: rgba(129, 140, 248, 0.45); color: #c7d2fe; } .dark .verbatim-chip.vb-rename:hover { background: rgba(99, 102, 241, 0.18); } .dark .verbatim-chip.vb-rename .vb-kind { color: #a5b4fc; } .verbatim-chip.vb-run { border-color: #fca5a5; color: #991b1b; } .verbatim-chip.vb-run:hover { background: #fef2f2; box-shadow: 0 3px 10px -4px rgba(239, 68, 68, 0.6); } .verbatim-chip.vb-run .vb-kind { color: #ef4444; } .dark .verbatim-chip.vb-run { border-color: rgba(248, 113, 113, 0.45); color: #fecaca; } .dark .verbatim-chip.vb-run:hover { background: rgba(239, 68, 68, 0.18); } .dark .verbatim-chip.vb-run .vb-kind { color: #f87171; } /* The shared token, highlighted inside both code panes */ mark.verbatim-hit { background: rgba(245, 158, 11, 0.3); color: inherit; border-radius: 3px; padding: 0 1px; box-shadow: 0 1px 0 #f59e0b; } .dark mark.verbatim-hit { background: rgba(245, 158, 11, 0.38); box-shadow: 0 1px 0 #fbbf24; } mark.verbatim-hit.vb-pulse { animation: vbPulse 1.1s ease; } @keyframes vbPulse { 0% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7), 0 1px 0 #f59e0b; } 100% { box-shadow: 0 0 0 10px rgba(245, 158, 11, 0), 0 1px 0 #f59e0b; } }