@memberjunction/ng-core-entity-forms 5.11.0 → 5.13.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (102) hide show
  1. package/dist/lib/custom/AIAgents/FlowAgentType/flow-agent-form-section.component.js +2 -2
  2. package/dist/lib/custom/AIAgents/add-action-dialog.component.js +2 -2
  3. package/dist/lib/custom/AIAgents/agent-prompt-advanced-settings-dialog.component.js +2 -2
  4. package/dist/lib/custom/AIAgents/ai-agent-form.component.d.ts +8 -0
  5. package/dist/lib/custom/AIAgents/ai-agent-form.component.d.ts.map +1 -1
  6. package/dist/lib/custom/AIAgents/ai-agent-form.component.js +199 -139
  7. package/dist/lib/custom/AIAgents/ai-agent-form.component.js.map +1 -1
  8. package/dist/lib/custom/AIAgents/create-prompt-dialog.component.js +2 -2
  9. package/dist/lib/custom/AIAgents/create-sub-agent-dialog.component.js +2 -2
  10. package/dist/lib/custom/AIAgents/new-agent-dialog.component.js +2 -2
  11. package/dist/lib/custom/AIAgents/prompt-selector-dialog.component.js +6 -6
  12. package/dist/lib/custom/AIAgents/prompt-selector-dialog.component.js.map +1 -1
  13. package/dist/lib/custom/AIAgents/sub-agent-advanced-settings-dialog.component.js +2 -2
  14. package/dist/lib/custom/AIAgents/sub-agent-selector-dialog.component.js +6 -6
  15. package/dist/lib/custom/AIAgents/sub-agent-selector-dialog.component.js.map +1 -1
  16. package/dist/lib/custom/AIPromptRuns/ai-prompt-run-form.component.js +3 -3
  17. package/dist/lib/custom/AIPromptRuns/ai-prompt-run-form.component.js.map +1 -1
  18. package/dist/lib/custom/AIPromptRuns/chat-message-viewer.component.js +2 -2
  19. package/dist/lib/custom/AIPrompts/ai-prompt-form.component.js +4 -4
  20. package/dist/lib/custom/AIPrompts/ai-prompt-form.component.js.map +1 -1
  21. package/dist/lib/custom/AIPrompts/template-selector-dialog.component.js +2 -2
  22. package/dist/lib/custom/Actions/action-execution-log-form.component.js +5 -5
  23. package/dist/lib/custom/Actions/action-execution-log-form.component.js.map +1 -1
  24. package/dist/lib/custom/Actions/action-form.component.js +22 -22
  25. package/dist/lib/custom/Actions/action-form.component.js.map +1 -1
  26. package/dist/lib/custom/Entities/entity-form.component.d.ts +11 -0
  27. package/dist/lib/custom/Entities/entity-form.component.d.ts.map +1 -1
  28. package/dist/lib/custom/Entities/entity-form.component.js +244 -217
  29. package/dist/lib/custom/Entities/entity-form.component.js.map +1 -1
  30. package/dist/lib/custom/EntityActions/entityaction.form.component.js +3 -3
  31. package/dist/lib/custom/EntityActions/entityaction.form.component.js.map +1 -1
  32. package/dist/lib/custom/Lists/list-form.component.js +8 -8
  33. package/dist/lib/custom/Lists/list-form.component.js.map +1 -1
  34. package/dist/lib/custom/Queries/query-category-dialog.component.js +3 -3
  35. package/dist/lib/custom/Queries/query-category-dialog.component.js.map +1 -1
  36. package/dist/lib/custom/Queries/query-form.component.js +2 -2
  37. package/dist/lib/custom/Queries/query-run-dialog.component.js +3 -3
  38. package/dist/lib/custom/Queries/query-run-dialog.component.js.map +1 -1
  39. package/dist/lib/custom/Templates/template-param-dialog.component.js +107 -111
  40. package/dist/lib/custom/Templates/template-param-dialog.component.js.map +1 -1
  41. package/dist/lib/custom/Templates/template-params-grid.component.js +2 -2
  42. package/dist/lib/custom/Templates/templates-form.component.js +40 -43
  43. package/dist/lib/custom/Templates/templates-form.component.js.map +1 -1
  44. package/dist/lib/custom/Tests/entity-link-pill.component.js +2 -2
  45. package/dist/lib/custom/Tests/entity-link-pill.component.js.map +1 -1
  46. package/dist/lib/custom/Tests/test-form.component.js +2 -2
  47. package/dist/lib/custom/Tests/test-rubric-form.component.js +2 -2
  48. package/dist/lib/custom/Tests/test-rubric-form.component.js.map +1 -1
  49. package/dist/lib/custom/Tests/test-run-feedback-form.component.js +2 -2
  50. package/dist/lib/custom/Tests/test-run-feedback-form.component.js.map +1 -1
  51. package/dist/lib/custom/Tests/test-run-form.component.js +2 -2
  52. package/dist/lib/custom/Tests/test-suite-form.component.js +2 -2
  53. package/dist/lib/custom/Tests/test-suite-run-form.component.js +2 -2
  54. package/dist/lib/custom/ai-agent-run/ai-agent-run-analytics.component.js +2 -2
  55. package/dist/lib/custom/ai-agent-run/ai-agent-run-step-detail.component.js +2 -2
  56. package/dist/lib/custom/ai-agent-run/ai-agent-run-step-node.component.js +2 -2
  57. package/dist/lib/custom/ai-agent-run/ai-agent-run-timeline.component.js +2 -2
  58. package/dist/lib/custom/ai-agent-run/ai-agent-run-visualization.component.d.ts +1 -0
  59. package/dist/lib/custom/ai-agent-run/ai-agent-run-visualization.component.d.ts.map +1 -1
  60. package/dist/lib/custom/ai-agent-run/ai-agent-run-visualization.component.js +28 -18
  61. package/dist/lib/custom/ai-agent-run/ai-agent-run-visualization.component.js.map +1 -1
  62. package/dist/lib/custom/ai-agent-run/ai-agent-run.component.js +2 -2
  63. package/dist/lib/custom/custom-forms.module.d.ts +2 -1
  64. package/dist/lib/custom/custom-forms.module.d.ts.map +1 -1
  65. package/dist/lib/custom/custom-forms.module.js +7 -3
  66. package/dist/lib/custom/custom-forms.module.js.map +1 -1
  67. package/dist/lib/custom/shared/entity-selector-dialog.component.js +2 -2
  68. package/dist/lib/custom/shared/entity-selector-dialog.component.js.map +1 -1
  69. package/dist/lib/generated/Entities/MJAIAgent/mjaiagent.form.component.js +155 -153
  70. package/dist/lib/generated/Entities/MJAIAgent/mjaiagent.form.component.js.map +1 -1
  71. package/dist/lib/generated/Entities/MJAIAgentCategory/mjaiagentcategory.form.component.d.ts +10 -0
  72. package/dist/lib/generated/Entities/MJAIAgentCategory/mjaiagentcategory.form.component.d.ts.map +1 -0
  73. package/dist/lib/generated/Entities/MJAIAgentCategory/mjaiagentcategory.form.component.js +105 -0
  74. package/dist/lib/generated/Entities/MJAIAgentCategory/mjaiagentcategory.form.component.js.map +1 -0
  75. package/dist/lib/generated/Entities/MJAIAgentRequest/mjaiagentrequest.form.component.d.ts.map +1 -1
  76. package/dist/lib/generated/Entities/MJAIAgentRequest/mjaiagentrequest.form.component.js +31 -7
  77. package/dist/lib/generated/Entities/MJAIAgentRequest/mjaiagentrequest.form.component.js.map +1 -1
  78. package/dist/lib/generated/Entities/MJAIAgentRequestType/mjaiagentrequesttype.form.component.d.ts +10 -0
  79. package/dist/lib/generated/Entities/MJAIAgentRequestType/mjaiagentrequesttype.form.component.d.ts.map +1 -0
  80. package/dist/lib/generated/Entities/MJAIAgentRequestType/mjaiagentrequesttype.form.component.js +89 -0
  81. package/dist/lib/generated/Entities/MJAIAgentRequestType/mjaiagentrequesttype.form.component.js.map +1 -0
  82. package/dist/lib/generated/Entities/MJAIAgentRun/mjaiagentrun.form.component.d.ts.map +1 -1
  83. package/dist/lib/generated/Entities/MJAIAgentRun/mjaiagentrun.form.component.js +50 -14
  84. package/dist/lib/generated/Entities/MJAIAgentRun/mjaiagentrun.form.component.js.map +1 -1
  85. package/dist/lib/generated/Entities/MJAIAgentRunStep/mjaiagentrunstep.form.component.d.ts.map +1 -1
  86. package/dist/lib/generated/Entities/MJAIAgentRunStep/mjaiagentrunstep.form.component.js +22 -4
  87. package/dist/lib/generated/Entities/MJAIAgentRunStep/mjaiagentrunstep.form.component.js.map +1 -1
  88. package/dist/lib/generated/Entities/MJAIAgentType/mjaiagenttype.form.component.js +13 -11
  89. package/dist/lib/generated/Entities/MJAIAgentType/mjaiagenttype.form.component.js.map +1 -1
  90. package/dist/lib/generated/Entities/MJAction/mjaction.form.component.js +83 -81
  91. package/dist/lib/generated/Entities/MJAction/mjaction.form.component.js.map +1 -1
  92. package/dist/lib/generated/Entities/MJIntegration/mjintegration.form.component.js +35 -33
  93. package/dist/lib/generated/Entities/MJIntegration/mjintegration.form.component.js.map +1 -1
  94. package/dist/lib/generated/Entities/MJIntegrationObject/mjintegrationobject.form.component.js +25 -19
  95. package/dist/lib/generated/Entities/MJIntegrationObject/mjintegrationobject.form.component.js.map +1 -1
  96. package/dist/lib/generated/generated-forms.module.d.ts +289 -287
  97. package/dist/lib/generated/generated-forms.module.d.ts.map +1 -1
  98. package/dist/lib/generated/generated-forms.module.js +102 -96
  99. package/dist/lib/generated/generated-forms.module.js.map +1 -1
  100. package/dist/lib/shared/components/template-editor.component.js +85 -89
  101. package/dist/lib/shared/components/template-editor.component.js.map +1 -1
  102. package/package.json +31 -31
package/dist/lib/custom/Tests/test-run-form.component.js CHANGED
@@ -1569,7 +1569,7 @@ let MJTestRunFormComponentExtended = class MJTestRunFormComponentExtended extend
1569
1569
  i0.ɵɵconditional(ctx.activeTab === "execution" ? 117 : -1);
1570
1570
  i0.ɵɵadvance();
1571
1571
  i0.ɵɵconditional(ctx.activeTab === "log" ? 118 : -1);
1572
- } }, dependencies: [i1.NgClass, i2.DefaultValueAccessor, i2.NgControlStatus, i2.NgModel, i3.ButtonComponent, i4.CodeEditorComponent, i5.ExecutionContextComponent, i6.EntityLinkPillComponent, i1.DecimalPipe, i1.DatePipe], styles: ["\n\n\n\n\n\n\n\n[_nghost-%COMP%] {\n --test-primary: #2563eb;\n --test-primary-light: #3b82f6;\n --test-primary-dark: #1d4ed8;\n --test-success: #10b981;\n --test-success-light: #d1fae5;\n --test-error: #ef4444;\n --test-error-light: #fee2e2;\n --test-warning: #f59e0b;\n --test-warning-light: #fef3c7;\n --test-timeout: #f97316;\n --test-timeout-light: #ffedd5;\n --test-running: #3b82f6;\n --test-pending: #8b5cf6;\n --test-skipped: #6b7280;\n --test-bg: #f8fafc;\n --test-surface: #ffffff;\n --test-border: #e2e8f0;\n --test-text: #1e293b;\n --test-text-secondary: #64748b;\n --test-text-muted: #94a3b8;\n --test-radius-sm: 6px;\n --test-radius-md: 10px;\n --test-radius-lg: 16px;\n --test-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);\n --test-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n --test-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n --test-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n display: block;\n height: 100%;\n}\n\n\n\n.test-run-form[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n height: 100%;\n background: var(--test-bg);\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n\n\n\n\n.error-banner[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 12px;\n padding: 12px 20px;\n background: linear-gradient(135deg, var(--test-error) 0%, #dc2626 100%);\n color: white;\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n transition: var(--test-transition);\n animation: _ngcontent-%COMP%_slideDown 0.3s ease-out;\n}\n\n.error-banner[_ngcontent-%COMP%]:hover {\n background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);\n}\n\n.error-banner[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 16px;\n}\n\n.retry-btn[_ngcontent-%COMP%] {\n background: rgba(255, 255, 255, 0.2);\n border: 1px solid rgba(255, 255, 255, 0.3);\n color: white;\n padding: 6px 12px;\n border-radius: var(--test-radius-sm);\n cursor: pointer;\n font-size: 12px;\n font-weight: 600;\n transition: var(--test-transition);\n}\n\n.retry-btn[_ngcontent-%COMP%]:hover {\n background: rgba(255, 255, 255, 0.3);\n}\n\n@keyframes _ngcontent-%COMP%_slideDown {\n from {\n transform: translateY(-100%);\n opacity: 0;\n }\n to {\n transform: translateY(0);\n opacity: 1;\n }\n}\n\n\n\n\n\n.test-run-header[_ngcontent-%COMP%] {\n background: var(--test-surface);\n border-bottom: 1px solid var(--test-border);\n padding: 20px;\n position: relative;\n}\n\n\n\n.breadcrumb[_ngcontent-%COMP%] {\n margin-bottom: 16px;\n}\n\n.breadcrumb[_ngcontent-%COMP%] ol[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 4px;\n list-style: none;\n margin: 0;\n padding: 0;\n font-size: 13px;\n flex-wrap: wrap;\n}\n\n.breadcrumb[_ngcontent-%COMP%] li[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.breadcrumb[_ngcontent-%COMP%] a[_ngcontent-%COMP%] {\n color: var(--test-primary);\n text-decoration: none;\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 4px 8px;\n border-radius: var(--test-radius-sm);\n transition: var(--test-transition);\n}\n\n.breadcrumb[_ngcontent-%COMP%] a[_ngcontent-%COMP%]:hover {\n background: rgba(37, 99, 235, 0.1);\n text-decoration: none;\n}\n\n.breadcrumb[_ngcontent-%COMP%] .separator[_ngcontent-%COMP%] {\n font-size: 10px;\n color: var(--test-text-muted);\n margin: 0 4px;\n}\n\n.breadcrumb[_ngcontent-%COMP%] .current[_ngcontent-%COMP%] {\n color: var(--test-text-secondary);\n font-weight: 500;\n}\n\n.breadcrumb-text[_ngcontent-%COMP%] {\n max-width: 200px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n\n\n.header-content[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n margin-bottom: 20px;\n gap: 16px;\n}\n\n.header-left[_ngcontent-%COMP%] {\n display: flex;\n gap: 16px;\n flex: 1;\n min-width: 0;\n}\n\n\n\n.status-indicator[_ngcontent-%COMP%] {\n width: 56px;\n height: 56px;\n border-radius: var(--test-radius-md);\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n font-size: 24px;\n flex-shrink: 0;\n box-shadow: var(--test-shadow-md);\n transition: var(--test-transition);\n}\n\n.status-indicator[_ngcontent-%COMP%]:hover {\n transform: scale(1.05);\n}\n\n\n\n.test-run-info[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 0;\n}\n\n.test-run-info[_ngcontent-%COMP%] h1[_ngcontent-%COMP%] {\n margin: 0 0 8px 0;\n font-size: clamp(18px, 4vw, 24px);\n font-weight: 700;\n color: var(--test-text);\n line-height: 1.2;\n word-wrap: break-word;\n}\n\n.test-run-info[_ngcontent-%COMP%] h1[_ngcontent-%COMP%] .run-id[_ngcontent-%COMP%] {\n color: var(--test-text-secondary);\n font-weight: 500;\n}\n\n.test-run-meta[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n flex-wrap: wrap;\n}\n\n\n\n.status-badge[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 6px 14px;\n border-radius: 20px;\n color: white;\n font-size: 12px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n box-shadow: var(--test-shadow-sm);\n}\n\n\n\n.meta-item[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n font-size: 14px;\n color: var(--test-text-secondary);\n}\n\n.meta-item[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 12px;\n}\n\n\n\n.header-actions[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n flex-shrink: 0;\n}\n\n.header-actions[_ngcontent-%COMP%] button[_ngcontent-%COMP%] {\n white-space: nowrap;\n}\n\n.btn-text[_ngcontent-%COMP%] {\n margin-left: 6px;\n}\n\n\n\n\n\n.metrics-bar[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));\n gap: 12px;\n margin-bottom: 16px;\n}\n\n.metric-card[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);\n border: 1px solid var(--test-border);\n border-radius: var(--test-radius-md);\n padding: 14px;\n transition: var(--test-transition);\n}\n\n.metric-card[_ngcontent-%COMP%]:hover {\n transform: translateY(-2px);\n box-shadow: var(--test-shadow-md);\n}\n\n.metric-icon[_ngcontent-%COMP%] {\n width: 40px;\n height: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--test-surface);\n border-radius: var(--test-radius-sm);\n color: var(--test-primary);\n font-size: 16px;\n flex-shrink: 0;\n}\n\n.metric-content[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 0;\n}\n\n.metric-label[_ngcontent-%COMP%] {\n font-size: 10px;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n color: var(--test-text-muted);\n margin-bottom: 4px;\n}\n\n.metric-value[_ngcontent-%COMP%] {\n font-size: 16px;\n font-weight: 700;\n color: var(--test-text);\n}\n\n.metric-detail[_ngcontent-%COMP%] {\n font-size: 11px;\n color: var(--test-text-muted);\n margin-top: 2px;\n}\n\n\n\n.metric-progress[_ngcontent-%COMP%] {\n margin-top: 6px;\n height: 4px;\n background: var(--test-border);\n border-radius: 2px;\n overflow: hidden;\n}\n\n.progress-bar[_ngcontent-%COMP%] {\n height: 100%;\n border-radius: 2px;\n transition: width 0.5s ease-out;\n}\n\n\n\n.secondary-info[_ngcontent-%COMP%] {\n display: flex;\n gap: 12px;\n padding-top: 16px;\n border-top: 1px solid var(--test-border);\n flex-wrap: wrap;\n}\n\n.info-chip[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n font-size: 13px;\n color: var(--test-text-secondary);\n padding: 6px 12px;\n background: var(--test-bg);\n border-radius: 20px;\n transition: var(--test-transition);\n}\n\n.info-chip[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 12px;\n}\n\n.info-chip.clickable[_ngcontent-%COMP%] {\n cursor: pointer;\n}\n\n.info-chip.clickable[_ngcontent-%COMP%]:hover {\n background: rgba(37, 99, 235, 0.1);\n color: var(--test-primary);\n}\n\n\n\n\n\n.tabs-container[_ngcontent-%COMP%] {\n background: var(--test-surface);\n border-bottom: 1px solid var(--test-border);\n position: sticky;\n top: 0;\n z-index: 10;\n}\n\n.tabs[_ngcontent-%COMP%] {\n display: flex;\n padding: 0 20px;\n overflow-x: auto;\n -webkit-overflow-scrolling: touch;\n scrollbar-width: none;\n -ms-overflow-style: none;\n}\n\n.tabs[_ngcontent-%COMP%]::-webkit-scrollbar {\n display: none;\n}\n\n.tab[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 14px 18px;\n border: none;\n background: transparent;\n border-bottom: 3px solid transparent;\n color: var(--test-text-secondary);\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n transition: var(--test-transition);\n white-space: nowrap;\n position: relative;\n}\n\n.tab[_ngcontent-%COMP%]:hover {\n color: var(--test-primary);\n background: rgba(37, 99, 235, 0.05);\n}\n\n.tab.active[_ngcontent-%COMP%] {\n color: var(--test-primary);\n border-bottom-color: var(--test-primary);\n font-weight: 600;\n}\n\n.tab[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 15px;\n}\n\n.tab-badge[_ngcontent-%COMP%] {\n background: var(--test-border);\n color: var(--test-text-secondary);\n padding: 2px 8px;\n border-radius: 10px;\n font-size: 11px;\n font-weight: 600;\n transition: var(--test-transition);\n}\n\n.tab.active[_ngcontent-%COMP%] .tab-badge[_ngcontent-%COMP%] {\n background: rgba(37, 99, 235, 0.15);\n color: var(--test-primary);\n}\n\n.shortcut-hint[_ngcontent-%COMP%] {\n font-size: 10px;\n color: var(--test-text-muted);\n background: var(--test-bg);\n padding: 2px 6px;\n border-radius: 4px;\n font-weight: 600;\n margin-left: 4px;\n font-family: -apple-system, BlinkMacSystemFont, sans-serif;\n}\n\n\n\n\n\n.tab-content[_ngcontent-%COMP%] {\n flex: 1;\n overflow-y: auto;\n padding: 20px;\n scroll-behavior: smooth;\n}\n\n\n\n\n\n.overview-tab[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 20px;\n animation: _ngcontent-%COMP%_fadeIn 0.3s ease-out;\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n from { opacity: 0; transform: translateY(10px); }\n to { opacity: 1; transform: translateY(0); }\n}\n\n\n\n.result-hero[_ngcontent-%COMP%] {\n background: var(--test-surface);\n border-radius: var(--test-radius-lg);\n padding: 32px;\n text-align: center;\n border: 2px solid var(--test-border);\n box-shadow: var(--test-shadow-sm);\n transition: var(--test-transition);\n}\n\n.result-hero.passed[_ngcontent-%COMP%] {\n background: linear-gradient(135deg, #ecfdf5 0%, var(--test-success-light) 100%);\n border-color: var(--test-success);\n}\n\n.result-hero.failed[_ngcontent-%COMP%] {\n background: linear-gradient(135deg, #fef2f2 0%, var(--test-error-light) 100%);\n border-color: var(--test-error);\n}\n\n.result-hero.error[_ngcontent-%COMP%] {\n background: linear-gradient(135deg, #fffbeb 0%, var(--test-warning-light) 100%);\n border-color: var(--test-warning);\n}\n\n.result-hero.timeout[_ngcontent-%COMP%] {\n background: linear-gradient(135deg, #fff7ed 0%, var(--test-timeout-light) 100%);\n border-color: var(--test-timeout);\n}\n\n.result-hero.running[_ngcontent-%COMP%], \n.result-hero.pending[_ngcontent-%COMP%] {\n background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);\n border-color: var(--test-primary-light);\n}\n\n.result-icon-wrapper[_ngcontent-%COMP%] {\n position: relative;\n display: inline-block;\n margin-bottom: 16px;\n}\n\n.result-icon[_ngcontent-%COMP%] {\n width: 80px;\n height: 80px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--test-surface);\n border-radius: 50%;\n font-size: 40px;\n margin: 0 auto;\n box-shadow: var(--test-shadow-md);\n}\n\n.result-hero.passed[_ngcontent-%COMP%] .result-icon[_ngcontent-%COMP%] { color: var(--test-success); }\n.result-hero.failed[_ngcontent-%COMP%] .result-icon[_ngcontent-%COMP%] { color: var(--test-error); }\n.result-hero.error[_ngcontent-%COMP%] .result-icon[_ngcontent-%COMP%] { color: var(--test-warning); }\n.result-hero.timeout[_ngcontent-%COMP%] .result-icon[_ngcontent-%COMP%] { color: var(--test-timeout); }\n.result-hero.running[_ngcontent-%COMP%] .result-icon[_ngcontent-%COMP%], \n.result-hero.pending[_ngcontent-%COMP%] .result-icon[_ngcontent-%COMP%] { color: var(--test-primary); }\n\n.result-pulse[_ngcontent-%COMP%] {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 100px;\n height: 100px;\n border-radius: 50%;\n background: rgba(59, 130, 246, 0.2);\n animation: _ngcontent-%COMP%_pulse 2s ease-in-out infinite;\n}\n\n@keyframes _ngcontent-%COMP%_pulse {\n 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }\n 50% { transform: translate(-50%, -50%) scale(1.2); opacity: 0; }\n}\n\n.result-text[_ngcontent-%COMP%] h2[_ngcontent-%COMP%] {\n margin: 0 0 12px 0;\n font-size: clamp(24px, 5vw, 32px);\n font-weight: 800;\n color: var(--test-text);\n}\n\n.result-details[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 12px;\n flex-wrap: wrap;\n}\n\n.result-score[_ngcontent-%COMP%] {\n font-size: 18px;\n font-weight: 600;\n color: var(--test-text-secondary);\n}\n\n.result-divider[_ngcontent-%COMP%] {\n color: var(--test-border);\n}\n\n.result-checks[_ngcontent-%COMP%] {\n font-size: 16px;\n color: var(--test-text-muted);\n}\n\n\n\n.section-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 16px;\n gap: 12px;\n}\n\n.section-header[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 18px;\n font-weight: 700;\n color: var(--test-text);\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.section-header[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--test-primary);\n}\n\n.section-header.error[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--test-error);\n}\n\n.check-summary[_ngcontent-%COMP%] {\n font-size: 13px;\n color: var(--test-text-secondary);\n}\n\n\n\n.check-results[_ngcontent-%COMP%] {\n background: var(--test-surface);\n border-radius: var(--test-radius-lg);\n padding: 24px;\n box-shadow: var(--test-shadow-sm);\n}\n\n.check-list[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 10px;\n}\n\n.check-item[_ngcontent-%COMP%] {\n display: flex;\n gap: 12px;\n padding: 14px 16px;\n border-radius: var(--test-radius-md);\n border: 1px solid var(--test-border);\n transition: var(--test-transition);\n animation: _ngcontent-%COMP%_fadeIn 0.3s ease-out backwards;\n}\n\n.check-item[_ngcontent-%COMP%]:hover {\n transform: translateX(4px);\n}\n\n.check-item.passed[_ngcontent-%COMP%] {\n background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);\n border-color: #86efac;\n}\n\n.check-item.failed[_ngcontent-%COMP%] {\n background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);\n border-color: #fca5a5;\n}\n\n.check-status[_ngcontent-%COMP%] {\n font-size: 20px;\n flex-shrink: 0;\n margin-top: 2px;\n}\n\n.check-item.passed[_ngcontent-%COMP%] .check-status[_ngcontent-%COMP%] { color: var(--test-success); }\n.check-item.failed[_ngcontent-%COMP%] .check-status[_ngcontent-%COMP%] { color: var(--test-error); }\n\n.check-content[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 0;\n}\n\n.check-name[_ngcontent-%COMP%] {\n font-size: 14px;\n font-weight: 600;\n color: var(--test-text);\n margin-bottom: 4px;\n}\n\n.check-message[_ngcontent-%COMP%] {\n font-size: 13px;\n color: var(--test-text-secondary);\n line-height: 1.5;\n word-wrap: break-word;\n}\n\n.check-weight[_ngcontent-%COMP%] {\n font-size: 12px;\n color: var(--test-text-muted);\n flex-shrink: 0;\n text-align: right;\n}\n\n.weight-label[_ngcontent-%COMP%] {\n font-weight: 500;\n}\n\n\n\n.comparison-section[_ngcontent-%COMP%] {\n background: var(--test-surface);\n border-radius: var(--test-radius-lg);\n padding: 24px;\n box-shadow: var(--test-shadow-sm);\n}\n\n.comparison-tabs[_ngcontent-%COMP%] {\n display: flex;\n gap: 4px;\n margin-bottom: 16px;\n background: var(--test-bg);\n border-radius: var(--test-radius-md);\n padding: 4px;\n}\n\n.comparison-tab[_ngcontent-%COMP%] {\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 6px;\n padding: 10px 16px;\n border: none;\n background: transparent;\n color: var(--test-text-secondary);\n font-size: 13px;\n font-weight: 500;\n cursor: pointer;\n border-radius: var(--test-radius-sm);\n transition: var(--test-transition);\n}\n\n.comparison-tab[_ngcontent-%COMP%]:hover {\n color: var(--test-text);\n background: rgba(0, 0, 0, 0.05);\n}\n\n.comparison-tab.active[_ngcontent-%COMP%] {\n background: var(--test-surface);\n color: var(--test-primary);\n font-weight: 600;\n box-shadow: var(--test-shadow-sm);\n}\n\n.comparison-content[_ngcontent-%COMP%] {\n border-radius: var(--test-radius-md);\n overflow: hidden;\n border: 1px solid var(--test-border);\n}\n\n\n\n\n\n.details-tab[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 20px;\n animation: _ngcontent-%COMP%_fadeIn 0.3s ease-out;\n}\n\n.details-grid[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n gap: 12px;\n}\n\n.detail-card[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 14px;\n padding: 16px;\n background: var(--test-surface);\n border: 1px solid var(--test-border);\n border-radius: var(--test-radius-md);\n transition: var(--test-transition);\n}\n\n.detail-card.clickable[_ngcontent-%COMP%] {\n cursor: pointer;\n}\n\n.detail-card.clickable[_ngcontent-%COMP%]:hover {\n background: rgba(37, 99, 235, 0.05);\n border-color: var(--test-primary-light);\n transform: translateX(4px);\n}\n\n.detail-icon[_ngcontent-%COMP%] {\n width: 44px;\n height: 44px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--test-bg);\n border-radius: var(--test-radius-md);\n color: var(--test-primary);\n font-size: 18px;\n flex-shrink: 0;\n}\n\n.detail-content[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 0;\n}\n\n.detail-label[_ngcontent-%COMP%] {\n font-size: 11px;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n color: var(--test-text-muted);\n margin-bottom: 4px;\n}\n\n.detail-value[_ngcontent-%COMP%] {\n font-size: 14px;\n color: var(--test-text);\n word-wrap: break-word;\n font-weight: 500;\n}\n\n.detail-value.monospace[_ngcontent-%COMP%] {\n font-family: 'SF Mono', Monaco, 'Courier New', monospace;\n font-size: 12px;\n}\n\n.detail-value.link[_ngcontent-%COMP%] {\n color: var(--test-primary);\n}\n\n.detail-action[_ngcontent-%COMP%] {\n color: var(--test-text-muted);\n font-size: 12px;\n transition: var(--test-transition);\n}\n\n.detail-card.clickable[_ngcontent-%COMP%]:hover .detail-action[_ngcontent-%COMP%] {\n color: var(--test-primary);\n}\n\n\n\n.error-section[_ngcontent-%COMP%] {\n background: var(--test-surface);\n border-radius: var(--test-radius-lg);\n padding: 24px;\n box-shadow: var(--test-shadow-sm);\n}\n\n.error-content[_ngcontent-%COMP%] {\n border-radius: var(--test-radius-md);\n overflow: hidden;\n border: 1px solid #fca5a5;\n}\n\n\n\n.result-details-section[_ngcontent-%COMP%] {\n background: var(--test-surface);\n border-radius: var(--test-radius-lg);\n padding: 24px;\n box-shadow: var(--test-shadow-sm);\n}\n\n.result-details-content[_ngcontent-%COMP%] {\n border-radius: var(--test-radius-md);\n overflow: hidden;\n border: 1px solid var(--test-border);\n}\n\n\n\n\n\n.ai-runs-tab[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 20px;\n animation: _ngcontent-%COMP%_fadeIn 0.3s ease-out;\n}\n\n.ai-section[_ngcontent-%COMP%] {\n background: var(--test-surface);\n border-radius: var(--test-radius-lg);\n padding: 24px;\n box-shadow: var(--test-shadow-sm);\n}\n\n.count-badge[_ngcontent-%COMP%] {\n background: var(--test-bg);\n color: var(--test-text-secondary);\n padding: 4px 10px;\n border-radius: 12px;\n font-size: 12px;\n font-weight: 600;\n}\n\n.ai-run-list[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 10px;\n}\n\n.ai-run-card[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 14px;\n padding: 16px;\n background: var(--test-bg);\n border: 1px solid var(--test-border);\n border-radius: var(--test-radius-md);\n cursor: pointer;\n transition: var(--test-transition);\n}\n\n.ai-run-card[_ngcontent-%COMP%]:hover {\n background: rgba(37, 99, 235, 0.05);\n border-color: var(--test-primary-light);\n transform: translateX(4px);\n box-shadow: var(--test-shadow-sm);\n}\n\n.ai-run-icon[_ngcontent-%COMP%] {\n width: 44px;\n height: 44px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: linear-gradient(135deg, var(--test-primary) 0%, var(--test-primary-dark) 100%);\n color: white;\n border-radius: var(--test-radius-md);\n font-size: 18px;\n flex-shrink: 0;\n box-shadow: var(--test-shadow-sm);\n}\n\n.ai-run-icon.agent[_ngcontent-%COMP%] {\n background: linear-gradient(135deg, var(--test-primary) 0%, var(--test-primary-dark) 100%);\n}\n\n.ai-run-icon.prompt[_ngcontent-%COMP%] {\n background: linear-gradient(135deg, #9333ea 0%, #7c3aed 100%);\n}\n\n.ai-run-content[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 0;\n}\n\n.ai-run-name[_ngcontent-%COMP%] {\n font-size: 14px;\n font-weight: 600;\n color: var(--test-text);\n margin-bottom: 6px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.ai-run-meta[_ngcontent-%COMP%] {\n display: flex;\n gap: 10px;\n font-size: 12px;\n color: var(--test-text-secondary);\n flex-wrap: wrap;\n}\n\n.status-chip[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n padding: 2px 8px;\n border-radius: 10px;\n font-size: 11px;\n font-weight: 600;\n text-transform: uppercase;\n}\n\n.status-chip.complete[_ngcontent-%COMP%], \n.status-chip.completed[_ngcontent-%COMP%], \n.status-chip.passed[_ngcontent-%COMP%] {\n background: var(--test-success-light);\n color: #059669;\n}\n\n.status-chip.failed[_ngcontent-%COMP%], \n.status-chip.error[_ngcontent-%COMP%] {\n background: var(--test-error-light);\n color: #dc2626;\n}\n\n.status-chip.running[_ngcontent-%COMP%] {\n background: #dbeafe;\n color: var(--test-primary);\n}\n\n.cost-chip[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 2px;\n color: var(--test-text-muted);\n}\n\n.ai-run-arrow[_ngcontent-%COMP%] {\n color: var(--test-text-muted);\n font-size: 14px;\n transition: var(--test-transition);\n}\n\n.ai-run-card[_ngcontent-%COMP%]:hover .ai-run-arrow[_ngcontent-%COMP%] {\n color: var(--test-primary);\n transform: translateX(2px);\n}\n\n\n\n\n\n.feedback-tab[_ngcontent-%COMP%] {\n animation: _ngcontent-%COMP%_fadeIn 0.3s ease-out;\n}\n\n.feedback-list[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 16px;\n}\n\n.feedback-item[_ngcontent-%COMP%] {\n padding: 20px;\n background: var(--test-surface);\n border-radius: var(--test-radius-lg);\n border: 1px solid var(--test-border);\n box-shadow: var(--test-shadow-sm);\n transition: var(--test-transition);\n}\n\n.feedback-item[_ngcontent-%COMP%]:hover {\n border-color: var(--test-primary-light);\n}\n\n.feedback-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 16px;\n flex-wrap: wrap;\n gap: 8px;\n}\n\n.feedback-user[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n}\n\n.user-avatar[_ngcontent-%COMP%] {\n width: 36px;\n height: 36px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--test-bg);\n border-radius: 50%;\n color: var(--test-primary);\n font-size: 14px;\n}\n\n.user-name[_ngcontent-%COMP%] {\n font-size: 14px;\n font-weight: 600;\n color: var(--test-text);\n}\n\n.feedback-date[_ngcontent-%COMP%] {\n font-size: 12px;\n color: var(--test-text-muted);\n}\n\n.feedback-body[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 12px;\n}\n\n.feedback-rating[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.rating-stars[_ngcontent-%COMP%] {\n display: flex;\n gap: 2px;\n}\n\n.rating-stars[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 14px;\n color: var(--test-border);\n}\n\n.rating-stars[_ngcontent-%COMP%] i.filled[_ngcontent-%COMP%] {\n color: #fbbf24;\n}\n\n.rating-value[_ngcontent-%COMP%] {\n font-size: 14px;\n font-weight: 600;\n color: var(--test-text);\n}\n\n.feedback-verdict[_ngcontent-%COMP%] {\n display: flex;\n}\n\n.verdict-badge[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 6px 12px;\n border-radius: 20px;\n font-size: 12px;\n font-weight: 600;\n}\n\n.verdict-badge.correct[_ngcontent-%COMP%] {\n background: var(--test-success-light);\n color: #059669;\n}\n\n.verdict-badge.incorrect[_ngcontent-%COMP%] {\n background: var(--test-error-light);\n color: #dc2626;\n}\n\n.feedback-comments[_ngcontent-%COMP%] {\n padding: 14px;\n background: var(--test-bg);\n border-radius: var(--test-radius-md);\n border-left: 3px solid var(--test-primary);\n}\n\n.feedback-comments[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 14px;\n line-height: 1.6;\n color: var(--test-text);\n}\n\n\n\n\n\n.log-tab[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 0;\n height: 100%;\n animation: _ngcontent-%COMP%_fadeIn 0.3s ease-out;\n}\n\n.log-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n background: var(--test-surface);\n padding: 16px 20px;\n border-radius: var(--test-radius-lg) var(--test-radius-lg) 0 0;\n border: 1px solid var(--test-border);\n border-bottom: none;\n}\n\n.log-title[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n}\n\n.log-title[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--test-text-secondary);\n font-size: 16px;\n}\n\n.log-title[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 16px;\n font-weight: 700;\n color: var(--test-text);\n}\n\n.log-actions[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n}\n\n.log-container[_ngcontent-%COMP%] {\n flex: 1;\n border-radius: 0 0 var(--test-radius-lg) var(--test-radius-lg);\n overflow: hidden;\n min-height: 300px;\n border: 1px solid var(--test-border);\n border-top: none;\n}\n\n\n\n\n\n.loading-state[_ngcontent-%COMP%] {\n padding: 20px;\n}\n\n.skeleton-list[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 12px;\n}\n\n.skeleton-card[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 14px;\n padding: 16px;\n background: var(--test-surface);\n border-radius: var(--test-radius-md);\n border: 1px solid var(--test-border);\n}\n\n.skeleton-icon[_ngcontent-%COMP%], \n.skeleton-avatar[_ngcontent-%COMP%] {\n width: 44px;\n height: 44px;\n border-radius: var(--test-radius-md);\n background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);\n background-size: 200% 100%;\n animation: _ngcontent-%COMP%_shimmer 1.5s infinite;\n}\n\n.skeleton-avatar[_ngcontent-%COMP%] {\n border-radius: 50%;\n}\n\n.skeleton-content[_ngcontent-%COMP%] {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.skeleton-line[_ngcontent-%COMP%] {\n height: 14px;\n border-radius: 4px;\n background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);\n background-size: 200% 100%;\n animation: _ngcontent-%COMP%_shimmer 1.5s infinite;\n}\n\n.skeleton-line.wide[_ngcontent-%COMP%] { width: 70%; }\n.skeleton-line.medium[_ngcontent-%COMP%] { width: 55%; }\n.skeleton-line.narrow[_ngcontent-%COMP%] { width: 40%; }\n\n@keyframes _ngcontent-%COMP%_shimmer {\n 0% { background-position: 200% 0; }\n 100% { background-position: -200% 0; }\n}\n\n\n\n\n\n.empty-state[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 60px 24px;\n text-align: center;\n background: var(--test-surface);\n border-radius: var(--test-radius-lg);\n}\n\n.empty-icon[_ngcontent-%COMP%] {\n width: 80px;\n height: 80px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--test-bg);\n border-radius: 50%;\n margin-bottom: 20px;\n}\n\n.empty-icon[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 36px;\n color: var(--test-text-muted);\n}\n\n.empty-state[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n margin: 0 0 8px 0;\n font-size: 18px;\n font-weight: 600;\n color: var(--test-text);\n}\n\n.empty-state[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 14px;\n color: var(--test-text-secondary);\n max-width: 300px;\n}\n\n\n\n\n\n.shortcuts-hint[_ngcontent-%COMP%] {\n position: fixed;\n bottom: 20px;\n right: 20px;\n z-index: 100;\n}\n\n.shortcuts-hint[_ngcontent-%COMP%] > i[_ngcontent-%COMP%] {\n width: 40px;\n height: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--test-surface);\n border: 1px solid var(--test-border);\n border-radius: 50%;\n color: var(--test-text-muted);\n font-size: 16px;\n cursor: pointer;\n box-shadow: var(--test-shadow-md);\n transition: var(--test-transition);\n}\n\n.shortcuts-hint[_ngcontent-%COMP%]:hover > i[_ngcontent-%COMP%] {\n color: var(--test-primary);\n border-color: var(--test-primary-light);\n}\n\n.shortcuts-popup[_ngcontent-%COMP%] {\n display: none;\n position: absolute;\n bottom: 50px;\n right: 0;\n background: var(--test-surface);\n border: 1px solid var(--test-border);\n border-radius: var(--test-radius-md);\n padding: 16px;\n box-shadow: var(--test-shadow-lg);\n min-width: 200px;\n}\n\n.shortcuts-hint[_ngcontent-%COMP%]:hover .shortcuts-popup[_ngcontent-%COMP%] {\n display: block;\n animation: _ngcontent-%COMP%_fadeIn 0.2s ease-out;\n}\n\n.shortcuts-popup[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] {\n margin: 0 0 12px 0;\n font-size: 14px;\n font-weight: 700;\n color: var(--test-text);\n}\n\n.shortcuts-popup[_ngcontent-%COMP%] ul[_ngcontent-%COMP%] {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n\n.shortcuts-popup[_ngcontent-%COMP%] li[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 6px 0;\n font-size: 13px;\n color: var(--test-text-secondary);\n}\n\n.shortcuts-popup[_ngcontent-%COMP%] kbd[_ngcontent-%COMP%] {\n background: var(--test-bg);\n border: 1px solid var(--test-border);\n border-radius: 4px;\n padding: 2px 6px;\n font-family: -apple-system, BlinkMacSystemFont, sans-serif;\n font-size: 11px;\n color: var(--test-text);\n}\n\n\n\n\n\n@media (max-width: 1024px) {\n .metrics-bar[_ngcontent-%COMP%] {\n grid-template-columns: repeat(3, 1fr);\n }\n\n .details-grid[_ngcontent-%COMP%] {\n grid-template-columns: repeat(2, 1fr);\n }\n\n .shortcuts-hint[_ngcontent-%COMP%] {\n display: none;\n }\n}\n\n\n\n\n\n@media (max-width: 768px) {\n .test-run-form[_ngcontent-%COMP%] {\n height: auto;\n min-height: 100%;\n }\n\n .test-run-header[_ngcontent-%COMP%] {\n padding: 16px;\n }\n\n .breadcrumb[_ngcontent-%COMP%] {\n margin-bottom: 12px;\n }\n\n .breadcrumb[_ngcontent-%COMP%] ol[_ngcontent-%COMP%] {\n font-size: 12px;\n }\n\n .header-content[_ngcontent-%COMP%] {\n flex-direction: column;\n gap: 16px;\n }\n\n .header-left[_ngcontent-%COMP%] {\n width: 100%;\n }\n\n .status-indicator[_ngcontent-%COMP%] {\n width: 48px;\n height: 48px;\n font-size: 20px;\n }\n\n .test-run-info[_ngcontent-%COMP%] h1[_ngcontent-%COMP%] {\n font-size: 18px;\n }\n\n .test-run-meta[_ngcontent-%COMP%] {\n gap: 8px;\n }\n\n .status-badge[_ngcontent-%COMP%] {\n padding: 4px 10px;\n font-size: 11px;\n }\n\n .header-actions[_ngcontent-%COMP%] {\n width: 100%;\n justify-content: stretch;\n }\n\n .header-actions[_ngcontent-%COMP%] button[_ngcontent-%COMP%] {\n flex: 1;\n }\n\n .metrics-bar[_ngcontent-%COMP%] {\n grid-template-columns: repeat(2, 1fr);\n gap: 10px;\n }\n\n .metric-card[_ngcontent-%COMP%] {\n padding: 12px;\n }\n\n .metric-icon[_ngcontent-%COMP%] {\n width: 36px;\n height: 36px;\n font-size: 14px;\n }\n\n .metric-value[_ngcontent-%COMP%] {\n font-size: 14px;\n }\n\n .tabs[_ngcontent-%COMP%] {\n padding: 0 12px;\n }\n\n .tab[_ngcontent-%COMP%] {\n padding: 12px 14px;\n font-size: 13px;\n gap: 6px;\n }\n\n .tab[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 14px;\n }\n\n .shortcut-hint[_ngcontent-%COMP%] {\n display: none;\n }\n\n .tab-content[_ngcontent-%COMP%] {\n padding: 16px;\n }\n\n .result-hero[_ngcontent-%COMP%] {\n padding: 24px 20px;\n }\n\n .result-icon[_ngcontent-%COMP%] {\n width: 64px;\n height: 64px;\n font-size: 32px;\n }\n\n .result-text[_ngcontent-%COMP%] h2[_ngcontent-%COMP%] {\n font-size: 24px;\n }\n\n .result-score[_ngcontent-%COMP%] {\n font-size: 16px;\n }\n\n .check-results[_ngcontent-%COMP%], \n .comparison-section[_ngcontent-%COMP%], \n .ai-section[_ngcontent-%COMP%], \n .feedback-item[_ngcontent-%COMP%] {\n padding: 18px;\n }\n\n .check-item[_ngcontent-%COMP%] {\n padding: 12px;\n }\n\n .comparison-tabs[_ngcontent-%COMP%] {\n flex-direction: column;\n gap: 4px;\n }\n\n .comparison-tab[_ngcontent-%COMP%] {\n text-align: center;\n }\n\n .details-grid[_ngcontent-%COMP%] {\n grid-template-columns: 1fr;\n }\n\n .detail-card[_ngcontent-%COMP%] {\n padding: 14px;\n }\n\n .ai-run-card[_ngcontent-%COMP%] {\n padding: 14px;\n }\n\n .ai-run-icon[_ngcontent-%COMP%] {\n width: 40px;\n height: 40px;\n font-size: 16px;\n }\n\n .ai-run-meta[_ngcontent-%COMP%] {\n flex-direction: column;\n gap: 4px;\n }\n\n .feedback-header[_ngcontent-%COMP%] {\n flex-direction: column;\n align-items: flex-start;\n }\n\n .log-header[_ngcontent-%COMP%] {\n flex-direction: column;\n gap: 12px;\n align-items: stretch;\n }\n\n .log-actions[_ngcontent-%COMP%] {\n justify-content: stretch;\n }\n\n .log-actions[_ngcontent-%COMP%] button[_ngcontent-%COMP%] {\n flex: 1;\n }\n\n .empty-state[_ngcontent-%COMP%] {\n padding: 40px 20px;\n }\n\n .empty-icon[_ngcontent-%COMP%] {\n width: 64px;\n height: 64px;\n }\n\n .empty-icon[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 28px;\n }\n}\n\n\n\n\n\n@media (max-width: 480px) {\n .test-run-header[_ngcontent-%COMP%] {\n padding: 12px;\n }\n\n .header-left[_ngcontent-%COMP%] {\n gap: 12px;\n }\n\n .status-indicator[_ngcontent-%COMP%] {\n width: 40px;\n height: 40px;\n font-size: 18px;\n border-radius: 8px;\n }\n\n .test-run-info[_ngcontent-%COMP%] h1[_ngcontent-%COMP%] {\n font-size: 16px;\n }\n\n .metrics-bar[_ngcontent-%COMP%] {\n grid-template-columns: 1fr 1fr;\n }\n\n .metric-card[_ngcontent-%COMP%] {\n padding: 10px;\n flex-direction: column;\n text-align: center;\n }\n\n .metric-icon[_ngcontent-%COMP%] {\n margin-bottom: 8px;\n }\n\n .metric-label[_ngcontent-%COMP%] {\n font-size: 9px;\n }\n\n .metric-value[_ngcontent-%COMP%] {\n font-size: 14px;\n }\n\n .tabs[_ngcontent-%COMP%] {\n padding: 0 8px;\n }\n\n .tab[_ngcontent-%COMP%] {\n padding: 10px 12px;\n font-size: 12px;\n }\n\n .tab-badge[_ngcontent-%COMP%] {\n display: none;\n }\n\n .tab-content[_ngcontent-%COMP%] {\n padding: 12px;\n }\n\n .result-hero[_ngcontent-%COMP%] {\n padding: 20px 16px;\n }\n\n .result-icon[_ngcontent-%COMP%] {\n width: 56px;\n height: 56px;\n font-size: 28px;\n }\n\n .result-text[_ngcontent-%COMP%] h2[_ngcontent-%COMP%] {\n font-size: 20px;\n }\n\n .result-score[_ngcontent-%COMP%] {\n font-size: 14px;\n }\n\n .result-checks[_ngcontent-%COMP%] {\n font-size: 12px;\n }\n\n .section-header[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n font-size: 16px;\n }\n\n .check-item[_ngcontent-%COMP%] {\n flex-direction: column;\n gap: 8px;\n }\n\n .check-weight[_ngcontent-%COMP%] {\n text-align: left;\n }\n}\n\n\n\n\n\n@media (hover: none) and (pointer: coarse) {\n .tab[_ngcontent-%COMP%], \n .comparison-tab[_ngcontent-%COMP%], \n .ai-run-card[_ngcontent-%COMP%], \n .check-item[_ngcontent-%COMP%], \n .feedback-item[_ngcontent-%COMP%], \n .detail-card.clickable[_ngcontent-%COMP%] {\n -webkit-tap-highlight-color: transparent;\n }\n\n .ai-run-card[_ngcontent-%COMP%]:active, \n .detail-card.clickable[_ngcontent-%COMP%]:active {\n background: rgba(37, 99, 235, 0.1);\n transform: scale(0.98);\n }\n\n .tab[_ngcontent-%COMP%]:active {\n background: rgba(37, 99, 235, 0.1);\n }\n\n \n\n .tab[_ngcontent-%COMP%] {\n min-height: 48px;\n }\n\n .ai-run-card[_ngcontent-%COMP%], \n .detail-card[_ngcontent-%COMP%] {\n min-height: 64px;\n }\n}\n\n\n\n\n\n@media (prefers-contrast: high) {\n .status-badge[_ngcontent-%COMP%] {\n border: 2px solid currentColor;\n }\n\n .check-item[_ngcontent-%COMP%] {\n border-width: 2px;\n }\n\n .tab.active[_ngcontent-%COMP%] {\n border-bottom-width: 4px;\n }\n}\n\n\n\n\n\n@media (prefers-reduced-motion: reduce) {\n *[_ngcontent-%COMP%], \n *[_ngcontent-%COMP%]::before, \n *[_ngcontent-%COMP%]::after {\n animation-duration: 0.01ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 0.01ms !important;\n }\n\n .skeleton-icon[_ngcontent-%COMP%], \n .skeleton-avatar[_ngcontent-%COMP%], \n .skeleton-line[_ngcontent-%COMP%] {\n animation: none;\n background: #e2e8f0;\n }\n\n .result-pulse[_ngcontent-%COMP%] {\n animation: none;\n display: none;\n }\n}\n\n\n\n\n\n@media print {\n .test-run-form[_ngcontent-%COMP%] {\n background: white;\n height: auto;\n }\n\n .header-actions[_ngcontent-%COMP%], \n .tabs-container[_ngcontent-%COMP%], \n .shortcuts-hint[_ngcontent-%COMP%], \n .log-actions[_ngcontent-%COMP%] {\n display: none !important;\n }\n\n .tab-content[_ngcontent-%COMP%] {\n overflow: visible;\n padding: 0;\n }\n\n .result-hero[_ngcontent-%COMP%], \n .check-results[_ngcontent-%COMP%], \n .details-grid[_ngcontent-%COMP%], \n .ai-section[_ngcontent-%COMP%], \n .feedback-item[_ngcontent-%COMP%] {\n break-inside: avoid;\n box-shadow: none;\n border: 1px solid #ddd;\n }\n\n .comparison-content[_ngcontent-%COMP%], \n .log-container[_ngcontent-%COMP%] {\n max-height: none;\n overflow: visible;\n }\n}\n\n\n\n\n\n.tags-bar[_ngcontent-%COMP%] {\n margin-top: 16px;\n padding: 8px 14px;\n background: linear-gradient(135deg, rgba(37, 99, 235, 0.04) 0%, rgba(37, 99, 235, 0.08) 100%);\n border: 1px solid rgba(37, 99, 235, 0.15);\n border-radius: 8px;\n max-width: 600px;\n}\n\n.tags-bar-content[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n flex-wrap: wrap;\n}\n\n.tags-bar-label[_ngcontent-%COMP%] {\n color: var(--test-text-secondary);\n font-size: 14px;\n}\n\n.tags-bar-label[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n opacity: 0.6;\n}\n\n.tags-bar-chips[_ngcontent-%COMP%] {\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n flex: 1;\n}\n\n.tag-inline[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n padding: 4px 10px;\n background: rgba(37, 99, 235, 0.1);\n color: var(--test-primary);\n border-radius: 12px;\n font-size: 11px;\n font-weight: 500;\n letter-spacing: 0.01em;\n}\n\n.tags-bar-empty[_ngcontent-%COMP%] {\n font-size: 12px;\n color: var(--test-text-secondary);\n opacity: 0.7;\n flex: 1;\n}\n\n.tags-bar-edit[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 4px 10px;\n background: transparent;\n border: 1px dashed var(--test-border);\n border-radius: 12px;\n font-size: 11px;\n font-weight: 500;\n color: var(--test-text-secondary);\n cursor: pointer;\n transition: var(--test-transition);\n}\n\n.tags-bar-edit[_ngcontent-%COMP%]:hover {\n border-color: var(--test-primary);\n color: var(--test-primary);\n background: rgba(37, 99, 235, 0.05);\n}\n\n.tags-bar-edit[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 10px;\n}\n\n\n\n\n\n.tags-editor-panel[_ngcontent-%COMP%] {\n margin-top: 16px;\n background: var(--test-surface);\n border: 1px solid var(--test-primary);\n border-radius: var(--test-radius-md);\n overflow: hidden;\n box-shadow: 0 4px 12px rgba(37, 99, 235, 0.1);\n max-width: 600px;\n}\n\n.tags-editor-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n padding: 12px 16px;\n background: rgba(37, 99, 235, 0.08);\n border-bottom: 1px solid rgba(37, 99, 235, 0.2);\n}\n\n.tags-editor-title[_ngcontent-%COMP%] {\n font-size: 13px;\n font-weight: 600;\n color: var(--test-primary);\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.tags-editor-body[_ngcontent-%COMP%] {\n padding: 16px;\n display: flex;\n flex-direction: column;\n gap: 12px;\n}\n\n.tags-editor-chips[_ngcontent-%COMP%] {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n min-height: 32px;\n}\n\n.tag-editable[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 5px 8px 5px 12px;\n background: var(--test-surface);\n border: 1px solid var(--test-primary);\n color: var(--test-primary);\n border-radius: 14px;\n font-size: 12px;\n font-weight: 500;\n}\n\n.tag-remove-btn[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 16px;\n height: 16px;\n background: transparent;\n border: none;\n color: var(--test-primary);\n cursor: pointer;\n border-radius: 50%;\n font-size: 9px;\n opacity: 0.6;\n transition: var(--test-transition);\n}\n\n.tag-remove-btn[_ngcontent-%COMP%]:hover {\n opacity: 1;\n background: var(--test-error-light);\n color: var(--test-error);\n}\n\n.tags-empty-hint[_ngcontent-%COMP%] {\n font-size: 12px;\n color: var(--test-text-secondary);\n font-style: italic;\n padding: 4px 0;\n}\n\n.tags-editor-input[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n align-items: center;\n}\n\n.tag-text-input[_ngcontent-%COMP%] {\n flex: 1;\n padding: 10px 14px;\n border: 1px solid var(--test-border);\n border-radius: 8px;\n font-size: 13px;\n background: var(--test-bg);\n}\n\n.tag-text-input[_ngcontent-%COMP%]:focus {\n outline: none;\n border-color: var(--test-primary);\n background: var(--test-surface);\n box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);\n}\n\n.tag-text-input[_ngcontent-%COMP%]::placeholder {\n color: var(--test-text-secondary);\n opacity: 0.6;\n}\n\n.tags-editor-footer[_ngcontent-%COMP%] {\n display: flex;\n justify-content: flex-start;\n gap: 8px;\n padding: 12px 16px;\n background: var(--test-bg);\n border-top: 1px solid var(--test-border);\n}\n\n\n\n@media (max-width: 768px) {\n .tags-bar[_ngcontent-%COMP%] {\n padding: 8px 12px;\n }\n\n .tags-bar-content[_ngcontent-%COMP%] {\n gap: 8px;\n }\n\n .tag-inline[_ngcontent-%COMP%] {\n padding: 3px 8px;\n font-size: 10px;\n }\n\n .tags-editor-panel[_ngcontent-%COMP%] {\n margin-top: 12px;\n }\n\n .tags-editor-body[_ngcontent-%COMP%] {\n padding: 12px;\n }\n\n .tags-editor-footer[_ngcontent-%COMP%] {\n padding: 10px 12px;\n }\n}"], changeDetection: 0 }); }
1572
+ } }, dependencies: [i1.NgClass, i2.DefaultValueAccessor, i2.NgControlStatus, i2.NgModel, i3.ButtonComponent, i4.CodeEditorComponent, i5.ExecutionContextComponent, i6.EntityLinkPillComponent, i1.DecimalPipe, i1.DatePipe], styles: ["\n\n\n\n\n\n\n\n[_nghost-%COMP%] {\n --test-primary: var(--mj-brand-primary);\n --test-primary-light: var(--mj-brand-primary);\n --test-primary-dark: var(--mj-brand-primary-hover);\n --test-success: var(--mj-status-success);\n --test-success-light: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n --test-error: var(--mj-status-error);\n --test-error-light: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n --test-warning: var(--mj-status-warning);\n --test-warning-light: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n --test-timeout: var(--mj-status-warning);\n --test-timeout-light: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n --test-running: var(--mj-brand-primary);\n --test-pending: var(--mj-brand-primary);\n --test-skipped: var(--mj-text-muted);\n --test-bg: var(--mj-bg-surface-card);\n --test-surface: var(--mj-bg-surface);\n --test-border: var(--mj-border-default);\n --test-text: var(--mj-text-primary);\n --test-text-secondary: var(--mj-text-muted);\n --test-text-muted: var(--mj-text-disabled);\n --test-radius-sm: 6px;\n --test-radius-md: 10px;\n --test-radius-lg: 16px;\n --test-shadow-sm: var(--mj-shadow-sm);\n --test-shadow-md: var(--mj-shadow-md);\n --test-shadow-lg: var(--mj-shadow-lg);\n --test-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n display: block;\n height: 100%;\n}\n\n\n\n.test-run-form[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n height: 100%;\n background: var(--test-bg);\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n\n\n\n\n.error-banner[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 12px;\n padding: 12px 20px;\n background: var(--test-error);\n color: var(--mj-text-inverse);\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n transition: var(--test-transition);\n animation: _ngcontent-%COMP%_slideDown 0.3s ease-out;\n}\n\n.error-banner[_ngcontent-%COMP%]:hover {\n background: var(--mj-status-error);\n}\n\n.error-banner[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 16px;\n}\n\n.retry-btn[_ngcontent-%COMP%] {\n background: rgba(255, 255, 255, 0.2);\n border: 1px solid rgba(255, 255, 255, 0.3);\n color: var(--mj-text-inverse);\n padding: 6px 12px;\n border-radius: var(--test-radius-sm);\n cursor: pointer;\n font-size: 12px;\n font-weight: 600;\n transition: var(--test-transition);\n}\n\n.retry-btn[_ngcontent-%COMP%]:hover {\n background: rgba(255, 255, 255, 0.3);\n}\n\n@keyframes _ngcontent-%COMP%_slideDown {\n from {\n transform: translateY(-100%);\n opacity: 0;\n }\n to {\n transform: translateY(0);\n opacity: 1;\n }\n}\n\n\n\n\n\n.test-run-header[_ngcontent-%COMP%] {\n background: var(--test-surface);\n border-bottom: 1px solid var(--test-border);\n padding: 20px;\n position: relative;\n}\n\n\n\n.breadcrumb[_ngcontent-%COMP%] {\n margin-bottom: 16px;\n}\n\n.breadcrumb[_ngcontent-%COMP%] ol[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 4px;\n list-style: none;\n margin: 0;\n padding: 0;\n font-size: 13px;\n flex-wrap: wrap;\n}\n\n.breadcrumb[_ngcontent-%COMP%] li[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.breadcrumb[_ngcontent-%COMP%] a[_ngcontent-%COMP%] {\n color: var(--test-primary);\n text-decoration: none;\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 4px 8px;\n border-radius: var(--test-radius-sm);\n transition: var(--test-transition);\n}\n\n.breadcrumb[_ngcontent-%COMP%] a[_ngcontent-%COMP%]:hover {\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n text-decoration: none;\n}\n\n.breadcrumb[_ngcontent-%COMP%] .separator[_ngcontent-%COMP%] {\n font-size: 10px;\n color: var(--test-text-muted);\n margin: 0 4px;\n}\n\n.breadcrumb[_ngcontent-%COMP%] .current[_ngcontent-%COMP%] {\n color: var(--test-text-secondary);\n font-weight: 500;\n}\n\n.breadcrumb-text[_ngcontent-%COMP%] {\n max-width: 200px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n\n\n.header-content[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n margin-bottom: 20px;\n gap: 16px;\n}\n\n.header-left[_ngcontent-%COMP%] {\n display: flex;\n gap: 16px;\n flex: 1;\n min-width: 0;\n}\n\n\n\n.status-indicator[_ngcontent-%COMP%] {\n width: 56px;\n height: 56px;\n border-radius: var(--test-radius-md);\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--mj-text-inverse);\n font-size: 24px;\n flex-shrink: 0;\n box-shadow: var(--test-shadow-md);\n transition: var(--test-transition);\n}\n\n.status-indicator[_ngcontent-%COMP%]:hover {\n transform: scale(1.05);\n}\n\n\n\n.test-run-info[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 0;\n}\n\n.test-run-info[_ngcontent-%COMP%] h1[_ngcontent-%COMP%] {\n margin: 0 0 8px 0;\n font-size: clamp(18px, 4vw, 24px);\n font-weight: 700;\n color: var(--test-text);\n line-height: 1.2;\n word-wrap: break-word;\n}\n\n.test-run-info[_ngcontent-%COMP%] h1[_ngcontent-%COMP%] .run-id[_ngcontent-%COMP%] {\n color: var(--test-text-secondary);\n font-weight: 500;\n}\n\n.test-run-meta[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n flex-wrap: wrap;\n}\n\n\n\n.status-badge[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 6px 14px;\n border-radius: 20px;\n color: var(--mj-text-inverse);\n font-size: 12px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n box-shadow: var(--test-shadow-sm);\n}\n\n\n\n.meta-item[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n font-size: 14px;\n color: var(--test-text-secondary);\n}\n\n.meta-item[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 12px;\n}\n\n\n\n.header-actions[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n flex-shrink: 0;\n}\n\n.header-actions[_ngcontent-%COMP%] button[_ngcontent-%COMP%] {\n white-space: nowrap;\n}\n\n.btn-text[_ngcontent-%COMP%] {\n margin-left: 6px;\n}\n\n\n\n\n\n.metrics-bar[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));\n gap: 12px;\n margin-bottom: 16px;\n}\n\n.metric-card[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n background: var(--mj-bg-surface-sunken);\n border: 1px solid var(--test-border);\n border-radius: var(--test-radius-md);\n padding: 14px;\n transition: var(--test-transition);\n}\n\n.metric-card[_ngcontent-%COMP%]:hover {\n transform: translateY(-2px);\n box-shadow: var(--test-shadow-md);\n}\n\n.metric-icon[_ngcontent-%COMP%] {\n width: 40px;\n height: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--test-surface);\n border-radius: var(--test-radius-sm);\n color: var(--test-primary);\n font-size: 16px;\n flex-shrink: 0;\n}\n\n.metric-content[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 0;\n}\n\n.metric-label[_ngcontent-%COMP%] {\n font-size: 10px;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n color: var(--test-text-muted);\n margin-bottom: 4px;\n}\n\n.metric-value[_ngcontent-%COMP%] {\n font-size: 16px;\n font-weight: 700;\n color: var(--test-text);\n}\n\n.metric-detail[_ngcontent-%COMP%] {\n font-size: 11px;\n color: var(--test-text-muted);\n margin-top: 2px;\n}\n\n\n\n.metric-progress[_ngcontent-%COMP%] {\n margin-top: 6px;\n height: 4px;\n background: var(--test-border);\n border-radius: 2px;\n overflow: hidden;\n}\n\n.progress-bar[_ngcontent-%COMP%] {\n height: 100%;\n border-radius: 2px;\n transition: width 0.5s ease-out;\n}\n\n\n\n.secondary-info[_ngcontent-%COMP%] {\n display: flex;\n gap: 12px;\n padding-top: 16px;\n border-top: 1px solid var(--test-border);\n flex-wrap: wrap;\n}\n\n.info-chip[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n font-size: 13px;\n color: var(--test-text-secondary);\n padding: 6px 12px;\n background: var(--test-bg);\n border-radius: 20px;\n transition: var(--test-transition);\n}\n\n.info-chip[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 12px;\n}\n\n.info-chip.clickable[_ngcontent-%COMP%] {\n cursor: pointer;\n}\n\n.info-chip.clickable[_ngcontent-%COMP%]:hover {\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n color: var(--test-primary);\n}\n\n\n\n\n\n.tabs-container[_ngcontent-%COMP%] {\n background: var(--test-surface);\n border-bottom: 1px solid var(--test-border);\n position: sticky;\n top: 0;\n z-index: 10;\n}\n\n.tabs[_ngcontent-%COMP%] {\n display: flex;\n padding: 0 20px;\n overflow-x: auto;\n -webkit-overflow-scrolling: touch;\n scrollbar-width: none;\n -ms-overflow-style: none;\n}\n\n.tabs[_ngcontent-%COMP%]::-webkit-scrollbar {\n display: none;\n}\n\n.tab[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 14px 18px;\n border: none;\n background: transparent;\n border-bottom: 3px solid transparent;\n color: var(--test-text-secondary);\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n transition: var(--test-transition);\n white-space: nowrap;\n position: relative;\n}\n\n.tab[_ngcontent-%COMP%]:hover {\n color: var(--test-primary);\n background: color-mix(in srgb, var(--mj-brand-primary) 5%, transparent);\n}\n\n.tab.active[_ngcontent-%COMP%] {\n color: var(--test-primary);\n border-bottom-color: var(--test-primary);\n font-weight: 600;\n}\n\n.tab[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 15px;\n}\n\n.tab-badge[_ngcontent-%COMP%] {\n background: var(--test-border);\n color: var(--test-text-secondary);\n padding: 2px 8px;\n border-radius: 10px;\n font-size: 11px;\n font-weight: 600;\n transition: var(--test-transition);\n}\n\n.tab.active[_ngcontent-%COMP%] .tab-badge[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n color: var(--test-primary);\n}\n\n.shortcut-hint[_ngcontent-%COMP%] {\n font-size: 10px;\n color: var(--test-text-muted);\n background: var(--test-bg);\n padding: 2px 6px;\n border-radius: 4px;\n font-weight: 600;\n margin-left: 4px;\n font-family: -apple-system, BlinkMacSystemFont, sans-serif;\n}\n\n\n\n\n\n.tab-content[_ngcontent-%COMP%] {\n flex: 1;\n overflow-y: auto;\n padding: 20px;\n scroll-behavior: smooth;\n}\n\n\n\n\n\n.overview-tab[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 20px;\n animation: _ngcontent-%COMP%_fadeIn 0.3s ease-out;\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n from { opacity: 0; transform: translateY(10px); }\n to { opacity: 1; transform: translateY(0); }\n}\n\n\n\n.result-hero[_ngcontent-%COMP%] {\n background: var(--test-surface);\n border-radius: var(--test-radius-lg);\n padding: 32px;\n text-align: center;\n border: 2px solid var(--test-border);\n box-shadow: var(--test-shadow-sm);\n transition: var(--test-transition);\n}\n\n.result-hero.passed[_ngcontent-%COMP%] {\n background: var(--test-success-light);\n border-color: var(--test-success);\n}\n\n.result-hero.failed[_ngcontent-%COMP%] {\n background: var(--test-error-light);\n border-color: var(--test-error);\n}\n\n.result-hero.error[_ngcontent-%COMP%] {\n background: var(--test-warning-light);\n border-color: var(--test-warning);\n}\n\n.result-hero.timeout[_ngcontent-%COMP%] {\n background: var(--test-timeout-light);\n border-color: var(--test-timeout);\n}\n\n.result-hero.running[_ngcontent-%COMP%], \n.result-hero.pending[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n border-color: var(--test-primary-light);\n}\n\n.result-icon-wrapper[_ngcontent-%COMP%] {\n position: relative;\n display: inline-block;\n margin-bottom: 16px;\n}\n\n.result-icon[_ngcontent-%COMP%] {\n width: 80px;\n height: 80px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--test-surface);\n border-radius: 50%;\n font-size: 40px;\n margin: 0 auto;\n box-shadow: var(--test-shadow-md);\n}\n\n.result-hero.passed[_ngcontent-%COMP%] .result-icon[_ngcontent-%COMP%] { color: var(--test-success); }\n.result-hero.failed[_ngcontent-%COMP%] .result-icon[_ngcontent-%COMP%] { color: var(--test-error); }\n.result-hero.error[_ngcontent-%COMP%] .result-icon[_ngcontent-%COMP%] { color: var(--test-warning); }\n.result-hero.timeout[_ngcontent-%COMP%] .result-icon[_ngcontent-%COMP%] { color: var(--test-timeout); }\n.result-hero.running[_ngcontent-%COMP%] .result-icon[_ngcontent-%COMP%], \n.result-hero.pending[_ngcontent-%COMP%] .result-icon[_ngcontent-%COMP%] { color: var(--test-primary); }\n\n.result-pulse[_ngcontent-%COMP%] {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 100px;\n height: 100px;\n border-radius: 50%;\n background: color-mix(in srgb, var(--mj-brand-primary) 20%, transparent);\n animation: _ngcontent-%COMP%_pulse 2s ease-in-out infinite;\n}\n\n@keyframes _ngcontent-%COMP%_pulse {\n 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }\n 50% { transform: translate(-50%, -50%) scale(1.2); opacity: 0; }\n}\n\n.result-text[_ngcontent-%COMP%] h2[_ngcontent-%COMP%] {\n margin: 0 0 12px 0;\n font-size: clamp(24px, 5vw, 32px);\n font-weight: 800;\n color: var(--test-text);\n}\n\n.result-details[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 12px;\n flex-wrap: wrap;\n}\n\n.result-score[_ngcontent-%COMP%] {\n font-size: 18px;\n font-weight: 600;\n color: var(--test-text-secondary);\n}\n\n.result-divider[_ngcontent-%COMP%] {\n color: var(--test-border);\n}\n\n.result-checks[_ngcontent-%COMP%] {\n font-size: 16px;\n color: var(--test-text-muted);\n}\n\n\n\n.section-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 16px;\n gap: 12px;\n}\n\n.section-header[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 18px;\n font-weight: 700;\n color: var(--test-text);\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.section-header[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--test-primary);\n}\n\n.section-header.error[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--test-error);\n}\n\n.check-summary[_ngcontent-%COMP%] {\n font-size: 13px;\n color: var(--test-text-secondary);\n}\n\n\n\n.check-results[_ngcontent-%COMP%] {\n background: var(--test-surface);\n border-radius: var(--test-radius-lg);\n padding: 24px;\n box-shadow: var(--test-shadow-sm);\n}\n\n.check-list[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 10px;\n}\n\n.check-item[_ngcontent-%COMP%] {\n display: flex;\n gap: 12px;\n padding: 14px 16px;\n border-radius: var(--test-radius-md);\n border: 1px solid var(--test-border);\n transition: var(--test-transition);\n animation: _ngcontent-%COMP%_fadeIn 0.3s ease-out backwards;\n}\n\n.check-item[_ngcontent-%COMP%]:hover {\n transform: translateX(4px);\n}\n\n.check-item.passed[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-status-success) 10%, var(--mj-bg-surface));\n border-color: color-mix(in srgb, var(--mj-status-success) 40%, var(--mj-bg-surface));\n}\n\n.check-item.failed[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n border-color: color-mix(in srgb, var(--mj-status-error) 40%, var(--mj-bg-surface));\n}\n\n.check-status[_ngcontent-%COMP%] {\n font-size: 20px;\n flex-shrink: 0;\n margin-top: 2px;\n}\n\n.check-item.passed[_ngcontent-%COMP%] .check-status[_ngcontent-%COMP%] { color: var(--test-success); }\n.check-item.failed[_ngcontent-%COMP%] .check-status[_ngcontent-%COMP%] { color: var(--test-error); }\n\n.check-content[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 0;\n}\n\n.check-name[_ngcontent-%COMP%] {\n font-size: 14px;\n font-weight: 600;\n color: var(--test-text);\n margin-bottom: 4px;\n}\n\n.check-message[_ngcontent-%COMP%] {\n font-size: 13px;\n color: var(--test-text-secondary);\n line-height: 1.5;\n word-wrap: break-word;\n}\n\n.check-weight[_ngcontent-%COMP%] {\n font-size: 12px;\n color: var(--test-text-muted);\n flex-shrink: 0;\n text-align: right;\n}\n\n.weight-label[_ngcontent-%COMP%] {\n font-weight: 500;\n}\n\n\n\n.comparison-section[_ngcontent-%COMP%] {\n background: var(--test-surface);\n border-radius: var(--test-radius-lg);\n padding: 24px;\n box-shadow: var(--test-shadow-sm);\n}\n\n.comparison-tabs[_ngcontent-%COMP%] {\n display: flex;\n gap: 4px;\n margin-bottom: 16px;\n background: var(--test-bg);\n border-radius: var(--test-radius-md);\n padding: 4px;\n}\n\n.comparison-tab[_ngcontent-%COMP%] {\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 6px;\n padding: 10px 16px;\n border: none;\n background: transparent;\n color: var(--test-text-secondary);\n font-size: 13px;\n font-weight: 500;\n cursor: pointer;\n border-radius: var(--test-radius-sm);\n transition: var(--test-transition);\n}\n\n.comparison-tab[_ngcontent-%COMP%]:hover {\n color: var(--test-text);\n background: var(--mj-bg-overlay);\n}\n\n.comparison-tab.active[_ngcontent-%COMP%] {\n background: var(--test-surface);\n color: var(--test-primary);\n font-weight: 600;\n box-shadow: var(--test-shadow-sm);\n}\n\n.comparison-content[_ngcontent-%COMP%] {\n border-radius: var(--test-radius-md);\n overflow: hidden;\n border: 1px solid var(--test-border);\n}\n\n\n\n\n\n.details-tab[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 20px;\n animation: _ngcontent-%COMP%_fadeIn 0.3s ease-out;\n}\n\n.details-grid[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n gap: 12px;\n}\n\n.detail-card[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 14px;\n padding: 16px;\n background: var(--test-surface);\n border: 1px solid var(--test-border);\n border-radius: var(--test-radius-md);\n transition: var(--test-transition);\n}\n\n.detail-card.clickable[_ngcontent-%COMP%] {\n cursor: pointer;\n}\n\n.detail-card.clickable[_ngcontent-%COMP%]:hover {\n background: color-mix(in srgb, var(--mj-brand-primary) 5%, transparent);\n border-color: var(--test-primary-light);\n transform: translateX(4px);\n}\n\n.detail-icon[_ngcontent-%COMP%] {\n width: 44px;\n height: 44px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--test-bg);\n border-radius: var(--test-radius-md);\n color: var(--test-primary);\n font-size: 18px;\n flex-shrink: 0;\n}\n\n.detail-content[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 0;\n}\n\n.detail-label[_ngcontent-%COMP%] {\n font-size: 11px;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n color: var(--test-text-muted);\n margin-bottom: 4px;\n}\n\n.detail-value[_ngcontent-%COMP%] {\n font-size: 14px;\n color: var(--test-text);\n word-wrap: break-word;\n font-weight: 500;\n}\n\n.detail-value.monospace[_ngcontent-%COMP%] {\n font-family: 'SF Mono', Monaco, 'Courier New', monospace;\n font-size: 12px;\n}\n\n.detail-value.link[_ngcontent-%COMP%] {\n color: var(--test-primary);\n}\n\n.detail-action[_ngcontent-%COMP%] {\n color: var(--test-text-muted);\n font-size: 12px;\n transition: var(--test-transition);\n}\n\n.detail-card.clickable[_ngcontent-%COMP%]:hover .detail-action[_ngcontent-%COMP%] {\n color: var(--test-primary);\n}\n\n\n\n.error-section[_ngcontent-%COMP%] {\n background: var(--test-surface);\n border-radius: var(--test-radius-lg);\n padding: 24px;\n box-shadow: var(--test-shadow-sm);\n}\n\n.error-content[_ngcontent-%COMP%] {\n border-radius: var(--test-radius-md);\n overflow: hidden;\n border: 1px solid color-mix(in srgb, var(--mj-status-error) 40%, var(--mj-bg-surface));\n}\n\n\n\n.result-details-section[_ngcontent-%COMP%] {\n background: var(--test-surface);\n border-radius: var(--test-radius-lg);\n padding: 24px;\n box-shadow: var(--test-shadow-sm);\n}\n\n.result-details-content[_ngcontent-%COMP%] {\n border-radius: var(--test-radius-md);\n overflow: hidden;\n border: 1px solid var(--test-border);\n}\n\n\n\n\n\n.ai-runs-tab[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 20px;\n animation: _ngcontent-%COMP%_fadeIn 0.3s ease-out;\n}\n\n.ai-section[_ngcontent-%COMP%] {\n background: var(--test-surface);\n border-radius: var(--test-radius-lg);\n padding: 24px;\n box-shadow: var(--test-shadow-sm);\n}\n\n.count-badge[_ngcontent-%COMP%] {\n background: var(--test-bg);\n color: var(--test-text-secondary);\n padding: 4px 10px;\n border-radius: 12px;\n font-size: 12px;\n font-weight: 600;\n}\n\n.ai-run-list[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 10px;\n}\n\n.ai-run-card[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 14px;\n padding: 16px;\n background: var(--test-bg);\n border: 1px solid var(--test-border);\n border-radius: var(--test-radius-md);\n cursor: pointer;\n transition: var(--test-transition);\n}\n\n.ai-run-card[_ngcontent-%COMP%]:hover {\n background: color-mix(in srgb, var(--mj-brand-primary) 5%, transparent);\n border-color: var(--test-primary-light);\n transform: translateX(4px);\n box-shadow: var(--test-shadow-sm);\n}\n\n.ai-run-icon[_ngcontent-%COMP%] {\n width: 44px;\n height: 44px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--test-primary);\n color: var(--mj-text-inverse);\n border-radius: var(--test-radius-md);\n font-size: 18px;\n flex-shrink: 0;\n box-shadow: var(--test-shadow-sm);\n}\n\n.ai-run-icon.agent[_ngcontent-%COMP%] {\n background: var(--test-primary);\n}\n\n.ai-run-icon.prompt[_ngcontent-%COMP%] {\n background: var(--mj-brand-primary);\n}\n\n.ai-run-content[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 0;\n}\n\n.ai-run-name[_ngcontent-%COMP%] {\n font-size: 14px;\n font-weight: 600;\n color: var(--test-text);\n margin-bottom: 6px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.ai-run-meta[_ngcontent-%COMP%] {\n display: flex;\n gap: 10px;\n font-size: 12px;\n color: var(--test-text-secondary);\n flex-wrap: wrap;\n}\n\n.status-chip[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n padding: 2px 8px;\n border-radius: 10px;\n font-size: 11px;\n font-weight: 600;\n text-transform: uppercase;\n}\n\n.status-chip.complete[_ngcontent-%COMP%], \n.status-chip.completed[_ngcontent-%COMP%], \n.status-chip.passed[_ngcontent-%COMP%] {\n background: var(--test-success-light);\n color: var(--mj-status-success);\n}\n\n.status-chip.failed[_ngcontent-%COMP%], \n.status-chip.error[_ngcontent-%COMP%] {\n background: var(--test-error-light);\n color: var(--mj-status-error);\n}\n\n.status-chip.running[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n color: var(--test-primary);\n}\n\n.cost-chip[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 2px;\n color: var(--test-text-muted);\n}\n\n.ai-run-arrow[_ngcontent-%COMP%] {\n color: var(--test-text-muted);\n font-size: 14px;\n transition: var(--test-transition);\n}\n\n.ai-run-card[_ngcontent-%COMP%]:hover .ai-run-arrow[_ngcontent-%COMP%] {\n color: var(--test-primary);\n transform: translateX(2px);\n}\n\n\n\n\n\n.feedback-tab[_ngcontent-%COMP%] {\n animation: _ngcontent-%COMP%_fadeIn 0.3s ease-out;\n}\n\n.feedback-list[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 16px;\n}\n\n.feedback-item[_ngcontent-%COMP%] {\n padding: 20px;\n background: var(--test-surface);\n border-radius: var(--test-radius-lg);\n border: 1px solid var(--test-border);\n box-shadow: var(--test-shadow-sm);\n transition: var(--test-transition);\n}\n\n.feedback-item[_ngcontent-%COMP%]:hover {\n border-color: var(--test-primary-light);\n}\n\n.feedback-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 16px;\n flex-wrap: wrap;\n gap: 8px;\n}\n\n.feedback-user[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n}\n\n.user-avatar[_ngcontent-%COMP%] {\n width: 36px;\n height: 36px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--test-bg);\n border-radius: 50%;\n color: var(--test-primary);\n font-size: 14px;\n}\n\n.user-name[_ngcontent-%COMP%] {\n font-size: 14px;\n font-weight: 600;\n color: var(--test-text);\n}\n\n.feedback-date[_ngcontent-%COMP%] {\n font-size: 12px;\n color: var(--test-text-muted);\n}\n\n.feedback-body[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 12px;\n}\n\n.feedback-rating[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.rating-stars[_ngcontent-%COMP%] {\n display: flex;\n gap: 2px;\n}\n\n.rating-stars[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 14px;\n color: var(--test-border);\n}\n\n.rating-stars[_ngcontent-%COMP%] i.filled[_ngcontent-%COMP%] {\n color: var(--mj-status-warning);\n}\n\n.rating-value[_ngcontent-%COMP%] {\n font-size: 14px;\n font-weight: 600;\n color: var(--test-text);\n}\n\n.feedback-verdict[_ngcontent-%COMP%] {\n display: flex;\n}\n\n.verdict-badge[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 6px 12px;\n border-radius: 20px;\n font-size: 12px;\n font-weight: 600;\n}\n\n.verdict-badge.correct[_ngcontent-%COMP%] {\n background: var(--test-success-light);\n color: var(--mj-status-success);\n}\n\n.verdict-badge.incorrect[_ngcontent-%COMP%] {\n background: var(--test-error-light);\n color: var(--mj-status-error);\n}\n\n.feedback-comments[_ngcontent-%COMP%] {\n padding: 14px;\n background: var(--test-bg);\n border-radius: var(--test-radius-md);\n border-left: 3px solid var(--test-primary);\n}\n\n.feedback-comments[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 14px;\n line-height: 1.6;\n color: var(--test-text);\n}\n\n\n\n\n\n.log-tab[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 0;\n height: 100%;\n animation: _ngcontent-%COMP%_fadeIn 0.3s ease-out;\n}\n\n.log-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n background: var(--test-surface);\n padding: 16px 20px;\n border-radius: var(--test-radius-lg) var(--test-radius-lg) 0 0;\n border: 1px solid var(--test-border);\n border-bottom: none;\n}\n\n.log-title[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n}\n\n.log-title[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--test-text-secondary);\n font-size: 16px;\n}\n\n.log-title[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 16px;\n font-weight: 700;\n color: var(--test-text);\n}\n\n.log-actions[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n}\n\n.log-container[_ngcontent-%COMP%] {\n flex: 1;\n border-radius: 0 0 var(--test-radius-lg) var(--test-radius-lg);\n overflow: hidden;\n min-height: 300px;\n border: 1px solid var(--test-border);\n border-top: none;\n}\n\n\n\n\n\n.loading-state[_ngcontent-%COMP%] {\n padding: 20px;\n}\n\n.skeleton-list[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 12px;\n}\n\n.skeleton-card[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 14px;\n padding: 16px;\n background: var(--test-surface);\n border-radius: var(--test-radius-md);\n border: 1px solid var(--test-border);\n}\n\n.skeleton-icon[_ngcontent-%COMP%], \n.skeleton-avatar[_ngcontent-%COMP%] {\n width: 44px;\n height: 44px;\n border-radius: var(--test-radius-md);\n background: linear-gradient(90deg, var(--mj-border-default) 25%, var(--mj-bg-surface-sunken) 50%, var(--mj-border-default) 75%);\n background-size: 200% 100%;\n animation: _ngcontent-%COMP%_shimmer 1.5s infinite;\n}\n\n.skeleton-avatar[_ngcontent-%COMP%] {\n border-radius: 50%;\n}\n\n.skeleton-content[_ngcontent-%COMP%] {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.skeleton-line[_ngcontent-%COMP%] {\n height: 14px;\n border-radius: 4px;\n background: linear-gradient(90deg, var(--mj-border-default) 25%, var(--mj-bg-surface-sunken) 50%, var(--mj-border-default) 75%);\n background-size: 200% 100%;\n animation: _ngcontent-%COMP%_shimmer 1.5s infinite;\n}\n\n.skeleton-line.wide[_ngcontent-%COMP%] { width: 70%; }\n.skeleton-line.medium[_ngcontent-%COMP%] { width: 55%; }\n.skeleton-line.narrow[_ngcontent-%COMP%] { width: 40%; }\n\n@keyframes _ngcontent-%COMP%_shimmer {\n 0% { background-position: 200% 0; }\n 100% { background-position: -200% 0; }\n}\n\n\n\n\n\n.empty-state[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 60px 24px;\n text-align: center;\n background: var(--test-surface);\n border-radius: var(--test-radius-lg);\n}\n\n.empty-icon[_ngcontent-%COMP%] {\n width: 80px;\n height: 80px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--test-bg);\n border-radius: 50%;\n margin-bottom: 20px;\n}\n\n.empty-icon[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 36px;\n color: var(--test-text-muted);\n}\n\n.empty-state[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n margin: 0 0 8px 0;\n font-size: 18px;\n font-weight: 600;\n color: var(--test-text);\n}\n\n.empty-state[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 14px;\n color: var(--test-text-secondary);\n max-width: 300px;\n}\n\n\n\n\n\n.shortcuts-hint[_ngcontent-%COMP%] {\n position: fixed;\n bottom: 20px;\n right: 20px;\n z-index: 100;\n}\n\n.shortcuts-hint[_ngcontent-%COMP%] > i[_ngcontent-%COMP%] {\n width: 40px;\n height: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--test-surface);\n border: 1px solid var(--test-border);\n border-radius: 50%;\n color: var(--test-text-muted);\n font-size: 16px;\n cursor: pointer;\n box-shadow: var(--test-shadow-md);\n transition: var(--test-transition);\n}\n\n.shortcuts-hint[_ngcontent-%COMP%]:hover > i[_ngcontent-%COMP%] {\n color: var(--test-primary);\n border-color: var(--test-primary-light);\n}\n\n.shortcuts-popup[_ngcontent-%COMP%] {\n display: none;\n position: absolute;\n bottom: 50px;\n right: 0;\n background: var(--test-surface);\n border: 1px solid var(--test-border);\n border-radius: var(--test-radius-md);\n padding: 16px;\n box-shadow: var(--test-shadow-lg);\n min-width: 200px;\n}\n\n.shortcuts-hint[_ngcontent-%COMP%]:hover .shortcuts-popup[_ngcontent-%COMP%] {\n display: block;\n animation: _ngcontent-%COMP%_fadeIn 0.2s ease-out;\n}\n\n.shortcuts-popup[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] {\n margin: 0 0 12px 0;\n font-size: 14px;\n font-weight: 700;\n color: var(--test-text);\n}\n\n.shortcuts-popup[_ngcontent-%COMP%] ul[_ngcontent-%COMP%] {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n\n.shortcuts-popup[_ngcontent-%COMP%] li[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 6px 0;\n font-size: 13px;\n color: var(--test-text-secondary);\n}\n\n.shortcuts-popup[_ngcontent-%COMP%] kbd[_ngcontent-%COMP%] {\n background: var(--test-bg);\n border: 1px solid var(--test-border);\n border-radius: 4px;\n padding: 2px 6px;\n font-family: -apple-system, BlinkMacSystemFont, sans-serif;\n font-size: 11px;\n color: var(--test-text);\n}\n\n\n\n\n\n@media (max-width: 1024px) {\n .metrics-bar[_ngcontent-%COMP%] {\n grid-template-columns: repeat(3, 1fr);\n }\n\n .details-grid[_ngcontent-%COMP%] {\n grid-template-columns: repeat(2, 1fr);\n }\n\n .shortcuts-hint[_ngcontent-%COMP%] {\n display: none;\n }\n}\n\n\n\n\n\n@media (max-width: 768px) {\n .test-run-form[_ngcontent-%COMP%] {\n height: auto;\n min-height: 100%;\n }\n\n .test-run-header[_ngcontent-%COMP%] {\n padding: 16px;\n }\n\n .breadcrumb[_ngcontent-%COMP%] {\n margin-bottom: 12px;\n }\n\n .breadcrumb[_ngcontent-%COMP%] ol[_ngcontent-%COMP%] {\n font-size: 12px;\n }\n\n .header-content[_ngcontent-%COMP%] {\n flex-direction: column;\n gap: 16px;\n }\n\n .header-left[_ngcontent-%COMP%] {\n width: 100%;\n }\n\n .status-indicator[_ngcontent-%COMP%] {\n width: 48px;\n height: 48px;\n font-size: 20px;\n }\n\n .test-run-info[_ngcontent-%COMP%] h1[_ngcontent-%COMP%] {\n font-size: 18px;\n }\n\n .test-run-meta[_ngcontent-%COMP%] {\n gap: 8px;\n }\n\n .status-badge[_ngcontent-%COMP%] {\n padding: 4px 10px;\n font-size: 11px;\n }\n\n .header-actions[_ngcontent-%COMP%] {\n width: 100%;\n justify-content: stretch;\n }\n\n .header-actions[_ngcontent-%COMP%] button[_ngcontent-%COMP%] {\n flex: 1;\n }\n\n .metrics-bar[_ngcontent-%COMP%] {\n grid-template-columns: repeat(2, 1fr);\n gap: 10px;\n }\n\n .metric-card[_ngcontent-%COMP%] {\n padding: 12px;\n }\n\n .metric-icon[_ngcontent-%COMP%] {\n width: 36px;\n height: 36px;\n font-size: 14px;\n }\n\n .metric-value[_ngcontent-%COMP%] {\n font-size: 14px;\n }\n\n .tabs[_ngcontent-%COMP%] {\n padding: 0 12px;\n }\n\n .tab[_ngcontent-%COMP%] {\n padding: 12px 14px;\n font-size: 13px;\n gap: 6px;\n }\n\n .tab[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 14px;\n }\n\n .shortcut-hint[_ngcontent-%COMP%] {\n display: none;\n }\n\n .tab-content[_ngcontent-%COMP%] {\n padding: 16px;\n }\n\n .result-hero[_ngcontent-%COMP%] {\n padding: 24px 20px;\n }\n\n .result-icon[_ngcontent-%COMP%] {\n width: 64px;\n height: 64px;\n font-size: 32px;\n }\n\n .result-text[_ngcontent-%COMP%] h2[_ngcontent-%COMP%] {\n font-size: 24px;\n }\n\n .result-score[_ngcontent-%COMP%] {\n font-size: 16px;\n }\n\n .check-results[_ngcontent-%COMP%], \n .comparison-section[_ngcontent-%COMP%], \n .ai-section[_ngcontent-%COMP%], \n .feedback-item[_ngcontent-%COMP%] {\n padding: 18px;\n }\n\n .check-item[_ngcontent-%COMP%] {\n padding: 12px;\n }\n\n .comparison-tabs[_ngcontent-%COMP%] {\n flex-direction: column;\n gap: 4px;\n }\n\n .comparison-tab[_ngcontent-%COMP%] {\n text-align: center;\n }\n\n .details-grid[_ngcontent-%COMP%] {\n grid-template-columns: 1fr;\n }\n\n .detail-card[_ngcontent-%COMP%] {\n padding: 14px;\n }\n\n .ai-run-card[_ngcontent-%COMP%] {\n padding: 14px;\n }\n\n .ai-run-icon[_ngcontent-%COMP%] {\n width: 40px;\n height: 40px;\n font-size: 16px;\n }\n\n .ai-run-meta[_ngcontent-%COMP%] {\n flex-direction: column;\n gap: 4px;\n }\n\n .feedback-header[_ngcontent-%COMP%] {\n flex-direction: column;\n align-items: flex-start;\n }\n\n .log-header[_ngcontent-%COMP%] {\n flex-direction: column;\n gap: 12px;\n align-items: stretch;\n }\n\n .log-actions[_ngcontent-%COMP%] {\n justify-content: stretch;\n }\n\n .log-actions[_ngcontent-%COMP%] button[_ngcontent-%COMP%] {\n flex: 1;\n }\n\n .empty-state[_ngcontent-%COMP%] {\n padding: 40px 20px;\n }\n\n .empty-icon[_ngcontent-%COMP%] {\n width: 64px;\n height: 64px;\n }\n\n .empty-icon[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 28px;\n }\n}\n\n\n\n\n\n@media (max-width: 480px) {\n .test-run-header[_ngcontent-%COMP%] {\n padding: 12px;\n }\n\n .header-left[_ngcontent-%COMP%] {\n gap: 12px;\n }\n\n .status-indicator[_ngcontent-%COMP%] {\n width: 40px;\n height: 40px;\n font-size: 18px;\n border-radius: 8px;\n }\n\n .test-run-info[_ngcontent-%COMP%] h1[_ngcontent-%COMP%] {\n font-size: 16px;\n }\n\n .metrics-bar[_ngcontent-%COMP%] {\n grid-template-columns: 1fr 1fr;\n }\n\n .metric-card[_ngcontent-%COMP%] {\n padding: 10px;\n flex-direction: column;\n text-align: center;\n }\n\n .metric-icon[_ngcontent-%COMP%] {\n margin-bottom: 8px;\n }\n\n .metric-label[_ngcontent-%COMP%] {\n font-size: 9px;\n }\n\n .metric-value[_ngcontent-%COMP%] {\n font-size: 14px;\n }\n\n .tabs[_ngcontent-%COMP%] {\n padding: 0 8px;\n }\n\n .tab[_ngcontent-%COMP%] {\n padding: 10px 12px;\n font-size: 12px;\n }\n\n .tab-badge[_ngcontent-%COMP%] {\n display: none;\n }\n\n .tab-content[_ngcontent-%COMP%] {\n padding: 12px;\n }\n\n .result-hero[_ngcontent-%COMP%] {\n padding: 20px 16px;\n }\n\n .result-icon[_ngcontent-%COMP%] {\n width: 56px;\n height: 56px;\n font-size: 28px;\n }\n\n .result-text[_ngcontent-%COMP%] h2[_ngcontent-%COMP%] {\n font-size: 20px;\n }\n\n .result-score[_ngcontent-%COMP%] {\n font-size: 14px;\n }\n\n .result-checks[_ngcontent-%COMP%] {\n font-size: 12px;\n }\n\n .section-header[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n font-size: 16px;\n }\n\n .check-item[_ngcontent-%COMP%] {\n flex-direction: column;\n gap: 8px;\n }\n\n .check-weight[_ngcontent-%COMP%] {\n text-align: left;\n }\n}\n\n\n\n\n\n@media (hover: none) and (pointer: coarse) {\n .tab[_ngcontent-%COMP%], \n .comparison-tab[_ngcontent-%COMP%], \n .ai-run-card[_ngcontent-%COMP%], \n .check-item[_ngcontent-%COMP%], \n .feedback-item[_ngcontent-%COMP%], \n .detail-card.clickable[_ngcontent-%COMP%] {\n -webkit-tap-highlight-color: transparent;\n }\n\n .ai-run-card[_ngcontent-%COMP%]:active, \n .detail-card.clickable[_ngcontent-%COMP%]:active {\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n transform: scale(0.98);\n }\n\n .tab[_ngcontent-%COMP%]:active {\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n }\n\n \n\n .tab[_ngcontent-%COMP%] {\n min-height: 48px;\n }\n\n .ai-run-card[_ngcontent-%COMP%], \n .detail-card[_ngcontent-%COMP%] {\n min-height: 64px;\n }\n}\n\n\n\n\n\n@media (prefers-contrast: high) {\n .status-badge[_ngcontent-%COMP%] {\n border: 2px solid currentColor;\n }\n\n .check-item[_ngcontent-%COMP%] {\n border-width: 2px;\n }\n\n .tab.active[_ngcontent-%COMP%] {\n border-bottom-width: 4px;\n }\n}\n\n\n\n\n\n@media (prefers-reduced-motion: reduce) {\n *[_ngcontent-%COMP%], \n *[_ngcontent-%COMP%]::before, \n *[_ngcontent-%COMP%]::after {\n animation-duration: 0.01ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 0.01ms !important;\n }\n\n .skeleton-icon[_ngcontent-%COMP%], \n .skeleton-avatar[_ngcontent-%COMP%], \n .skeleton-line[_ngcontent-%COMP%] {\n animation: none;\n background: var(--mj-border-default);\n }\n\n .result-pulse[_ngcontent-%COMP%] {\n animation: none;\n display: none;\n }\n}\n\n\n\n\n\n@media print {\n .test-run-form[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface);\n height: auto;\n }\n\n .header-actions[_ngcontent-%COMP%], \n .tabs-container[_ngcontent-%COMP%], \n .shortcuts-hint[_ngcontent-%COMP%], \n .log-actions[_ngcontent-%COMP%] {\n display: none !important;\n }\n\n .tab-content[_ngcontent-%COMP%] {\n overflow: visible;\n padding: 0;\n }\n\n .result-hero[_ngcontent-%COMP%], \n .check-results[_ngcontent-%COMP%], \n .details-grid[_ngcontent-%COMP%], \n .ai-section[_ngcontent-%COMP%], \n .feedback-item[_ngcontent-%COMP%] {\n break-inside: avoid;\n box-shadow: none;\n border: 1px solid var(--mj-border-default);\n }\n\n .comparison-content[_ngcontent-%COMP%], \n .log-container[_ngcontent-%COMP%] {\n max-height: none;\n overflow: visible;\n }\n}\n\n\n\n\n\n.tags-bar[_ngcontent-%COMP%] {\n margin-top: 16px;\n padding: 8px 14px;\n background: color-mix(in srgb, var(--mj-brand-primary) 6%, var(--mj-bg-surface));\n border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n border-radius: 8px;\n max-width: 600px;\n}\n\n.tags-bar-content[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n flex-wrap: wrap;\n}\n\n.tags-bar-label[_ngcontent-%COMP%] {\n color: var(--test-text-secondary);\n font-size: 14px;\n}\n\n.tags-bar-label[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n opacity: 0.6;\n}\n\n.tags-bar-chips[_ngcontent-%COMP%] {\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n flex: 1;\n}\n\n.tag-inline[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n padding: 4px 10px;\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n color: var(--test-primary);\n border-radius: 12px;\n font-size: 11px;\n font-weight: 500;\n letter-spacing: 0.01em;\n}\n\n.tags-bar-empty[_ngcontent-%COMP%] {\n font-size: 12px;\n color: var(--test-text-secondary);\n opacity: 0.7;\n flex: 1;\n}\n\n.tags-bar-edit[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 4px 10px;\n background: transparent;\n border: 1px dashed var(--test-border);\n border-radius: 12px;\n font-size: 11px;\n font-weight: 500;\n color: var(--test-text-secondary);\n cursor: pointer;\n transition: var(--test-transition);\n}\n\n.tags-bar-edit[_ngcontent-%COMP%]:hover {\n border-color: var(--test-primary);\n color: var(--test-primary);\n background: color-mix(in srgb, var(--mj-brand-primary) 5%, transparent);\n}\n\n.tags-bar-edit[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 10px;\n}\n\n\n\n\n\n.tags-editor-panel[_ngcontent-%COMP%] {\n margin-top: 16px;\n background: var(--test-surface);\n border: 1px solid var(--test-primary);\n border-radius: var(--test-radius-md);\n overflow: hidden;\n box-shadow: var(--mj-shadow-md);\n max-width: 600px;\n}\n\n.tags-editor-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n padding: 12px 16px;\n background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n border-bottom: 1px solid color-mix(in srgb, var(--mj-brand-primary) 20%, transparent);\n}\n\n.tags-editor-title[_ngcontent-%COMP%] {\n font-size: 13px;\n font-weight: 600;\n color: var(--test-primary);\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.tags-editor-body[_ngcontent-%COMP%] {\n padding: 16px;\n display: flex;\n flex-direction: column;\n gap: 12px;\n}\n\n.tags-editor-chips[_ngcontent-%COMP%] {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n min-height: 32px;\n}\n\n.tag-editable[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 5px 8px 5px 12px;\n background: var(--test-surface);\n border: 1px solid var(--test-primary);\n color: var(--test-primary);\n border-radius: 14px;\n font-size: 12px;\n font-weight: 500;\n}\n\n.tag-remove-btn[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 16px;\n height: 16px;\n background: transparent;\n border: none;\n color: var(--test-primary);\n cursor: pointer;\n border-radius: 50%;\n font-size: 9px;\n opacity: 0.6;\n transition: var(--test-transition);\n}\n\n.tag-remove-btn[_ngcontent-%COMP%]:hover {\n opacity: 1;\n background: var(--test-error-light);\n color: var(--test-error);\n}\n\n.tags-empty-hint[_ngcontent-%COMP%] {\n font-size: 12px;\n color: var(--test-text-secondary);\n font-style: italic;\n padding: 4px 0;\n}\n\n.tags-editor-input[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n align-items: center;\n}\n\n.tag-text-input[_ngcontent-%COMP%] {\n flex: 1;\n padding: 10px 14px;\n border: 1px solid var(--test-border);\n border-radius: 8px;\n font-size: 13px;\n background: var(--test-bg);\n}\n\n.tag-text-input[_ngcontent-%COMP%]:focus {\n outline: none;\n border-color: var(--test-primary);\n background: var(--test-surface);\n box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.tag-text-input[_ngcontent-%COMP%]::placeholder {\n color: var(--test-text-secondary);\n opacity: 0.6;\n}\n\n.tags-editor-footer[_ngcontent-%COMP%] {\n display: flex;\n justify-content: flex-start;\n gap: 8px;\n padding: 12px 16px;\n background: var(--test-bg);\n border-top: 1px solid var(--test-border);\n}\n\n\n\n@media (max-width: 768px) {\n .tags-bar[_ngcontent-%COMP%] {\n padding: 8px 12px;\n }\n\n .tags-bar-content[_ngcontent-%COMP%] {\n gap: 8px;\n }\n\n .tag-inline[_ngcontent-%COMP%] {\n padding: 3px 8px;\n font-size: 10px;\n }\n\n .tags-editor-panel[_ngcontent-%COMP%] {\n margin-top: 12px;\n }\n\n .tags-editor-body[_ngcontent-%COMP%] {\n padding: 12px;\n }\n\n .tags-editor-footer[_ngcontent-%COMP%] {\n padding: 10px 12px;\n }\n}"], changeDetection: 0 }); }
1573
1573
  };
1574
1574
  MJTestRunFormComponentExtended = __decorate([
1575
1575
  RegisterClass(BaseFormComponent, 'MJ: Test Runs')
@@ -1577,7 +1577,7 @@ MJTestRunFormComponentExtended = __decorate([
1577
1577
  export { MJTestRunFormComponentExtended };
1578
1578
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MJTestRunFormComponentExtended, [{
1579
1579
  type: Component,
1580
- args: [{ standalone: false, selector: 'mj-test-run-form', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"test-run-form\" [class.is-mobile]=\"false\">\n <!-- Error State -->\n @if (error) {\n <div class=\"error-banner\" (click)=\"retryLoad()\">\n <i class=\"fas fa-exclamation-triangle\"></i>\n <span>{{ error }}</span>\n <button class=\"retry-btn\">\n <i class=\"fas fa-redo\"></i> Retry\n </button>\n </div>\n }\n\n <!-- Header Section -->\n <div class=\"test-run-header\" [class]=\"getStatusClass()\">\n <!-- Breadcrumb Navigation -->\n <nav class=\"breadcrumb\" aria-label=\"Breadcrumb\">\n <ol>\n <li>\n <a href=\"javascript:void(0)\" (click)=\"navigateToTestingDashboard()\">\n <i class=\"fas fa-vial\"></i>\n <span class=\"breadcrumb-text\">Testing</span>\n </a>\n </li>\n @if (test) {\n <li>\n <i class=\"fas fa-chevron-right separator\"></i>\n <a href=\"javascript:void(0)\" (click)=\"openTest()\">\n <i class=\"fas fa-flask\"></i>\n <span class=\"breadcrumb-text\">{{ test.Name }}</span>\n </a>\n </li>\n }\n <li class=\"current\">\n <i class=\"fas fa-chevron-right separator\"></i>\n <span>Run #{{ record.ID.substring(0, 8) }}</span>\n </li>\n </ol>\n </nav>\n\n <div class=\"header-content\">\n <div class=\"header-left\">\n <!-- Status Indicator -->\n <div class=\"status-indicator\" [style.background-color]=\"getStatusColor()\">\n <i class=\"fas\" [ngClass]=\"getStatusIcon()\"></i>\n </div>\n\n <div class=\"test-run-info\">\n <h1>\n Test Run\n <span class=\"run-id\">#{{ record.ID.substring(0, 8) }}</span>\n </h1>\n <div class=\"test-run-meta\">\n <span class=\"status-badge\" [style.background-color]=\"getStatusColor()\">\n {{ record.Status }}\n </span>\n @if (test) {\n <span class=\"meta-item\">\n <i class=\"fas fa-flask\"></i>\n {{ test.Type }}\n </span>\n }\n @if (autoRefreshEnabled) {\n <span class=\"meta-item\">\n <i class=\"fas fa-sync-alt fa-spin\"></i>\n Auto-refreshing\n </span>\n }\n </div>\n </div>\n </div>\n\n <div class=\"header-actions\">\n <button kendoButton (click)=\"reRunTest()\" [disabled]=\"!record.TestID\" title=\"Re-run this test (Cmd+Shift+R)\">\n <i class=\"fas fa-redo\"></i>\n <span class=\"btn-text\">Re-run</span>\n </button>\n <button kendoButton (click)=\"refresh()\" [disabled]=\"isRefreshing\" title=\"Refresh (Cmd+R)\">\n <i class=\"fas fa-sync-alt\" [class.fa-spin]=\"isRefreshing\"></i>\n <span class=\"btn-text\">Refresh</span>\n </button>\n </div>\n </div>\n\n <!-- Metrics Bar -->\n <div class=\"metrics-bar\">\n <div class=\"metric-card\">\n <div class=\"metric-icon\">\n <i class=\"fas fa-clock\"></i>\n </div>\n <div class=\"metric-content\">\n <div class=\"metric-label\">Started</div>\n <div class=\"metric-value\">{{ getRelativeTime(record.StartedAt) }}</div>\n <div class=\"metric-detail\">{{ record.StartedAt | date:'short' }}</div>\n </div>\n </div>\n\n <div class=\"metric-card\">\n <div class=\"metric-icon\">\n <i class=\"fas fa-stopwatch\"></i>\n </div>\n <div class=\"metric-content\">\n <div class=\"metric-label\">Duration</div>\n <div class=\"metric-value\">{{ calculateDuration() }}</div>\n </div>\n </div>\n\n <div class=\"metric-card\">\n <div class=\"metric-icon\">\n <i class=\"fas fa-star\"></i>\n </div>\n <div class=\"metric-content\">\n <div class=\"metric-label\">Score</div>\n <div class=\"metric-value\">{{ formatScore(record.Score) }}</div>\n @if (record.Score != null) {\n <div class=\"metric-progress\">\n <div class=\"progress-bar\" [style.width.%]=\"getScorePercentage()\" [style.background-color]=\"getStatusColor()\"></div>\n </div>\n }\n </div>\n </div>\n\n <div class=\"metric-card\">\n <div class=\"metric-icon\">\n <i class=\"fas fa-check-double\"></i>\n </div>\n <div class=\"metric-content\">\n <div class=\"metric-label\">Checks</div>\n <div class=\"metric-value\">{{ record.PassedChecks }}/{{ record.TotalChecks }}</div>\n @if (record.TotalChecks) {\n <div class=\"metric-progress\">\n <div class=\"progress-bar\" [style.width.%]=\"getPassRatePercentage()\" [style.background-color]=\"getStatusColor()\"></div>\n </div>\n }\n </div>\n </div>\n\n <div class=\"metric-card\">\n <div class=\"metric-icon\">\n <i class=\"fas fa-dollar-sign\"></i>\n </div>\n <div class=\"metric-content\">\n <div class=\"metric-label\">Cost</div>\n <div class=\"metric-value\">{{ formatCost(record.CostUSD) }}</div>\n </div>\n </div>\n </div>\n\n <!-- Secondary Info -->\n @if (record.RunByUser || testSuiteRun || record.TargetLogEntityID) {\n <div class=\"secondary-info\">\n @if (record.RunByUser) {\n <span class=\"info-chip\">\n <i class=\"fas fa-user\"></i>\n {{ record.RunByUser }}\n </span>\n }\n @if (testSuiteRun) {\n <span class=\"info-chip clickable\" (click)=\"openTestSuiteRun()\">\n <i class=\"fas fa-layer-group\"></i>\n Part of Suite Run (Seq: {{ record.Sequence }})\n </span>\n }\n <!-- Target Entity Link Pill -->\n @if (record.TargetLogEntityID && record.TargetLogID) {\n <mj-entity-link-pill\n [entityName]=\"record.TargetLogEntity\"\n [recordId]=\"record.TargetLogID\">\n </mj-entity-link-pill>\n }\n </div>\n }\n\n <!-- Tags Section - Sleek inline design -->\n @if (!editingTags) {\n <div class=\"tags-bar\">\n <div class=\"tags-bar-content\">\n <span class=\"tags-bar-label\"><i class=\"fas fa-tags\"></i></span>\n @if (tags.length > 0) {\n <div class=\"tags-bar-chips\">\n @for (tag of tags; track tag) {\n <span class=\"tag-inline\">{{ tag }}</span>\n }\n </div>\n }\n @if (tags.length === 0) {\n <span class=\"tags-bar-empty\">No tags</span>\n }\n <button class=\"tags-bar-edit\" (click)=\"startEditingTags()\" title=\"Edit tags\">\n <i class=\"fas fa-plus\"></i> Add\n </button>\n </div>\n </div>\n }\n\n <!-- Tags Editor - Expanded when editing -->\n @if (editingTags) {\n <div class=\"tags-editor-panel\">\n <div class=\"tags-editor-header\">\n <span class=\"tags-editor-title\"><i class=\"fas fa-tags\"></i> Edit Tags</span>\n </div>\n <div class=\"tags-editor-body\">\n <div class=\"tags-editor-chips\">\n @for (tag of tags; track tag) {\n <span class=\"tag-editable\">\n {{ tag }}\n <button class=\"tag-remove-btn\" (click)=\"removeTag(tag)\" title=\"Remove tag\">\n <i class=\"fas fa-times\"></i>\n </button>\n </span>\n }\n @if (tags.length === 0) {\n <span class=\"tags-empty-hint\">No tags yet</span>\n }\n </div>\n <div class=\"tags-editor-input\">\n <input type=\"text\"\n [(ngModel)]=\"newTag\"\n placeholder=\"Type a tag and press Enter...\"\n (keyup.enter)=\"addTag()\"\n class=\"tag-text-input\" />\n <button kendoButton (click)=\"addTag()\" [disabled]=\"!newTag.trim()\" fillMode=\"flat\">\n <i class=\"fas fa-plus\"></i>\n </button>\n </div>\n </div>\n <div class=\"tags-editor-footer\">\n <button kendoButton (click)=\"saveTags()\" themeColor=\"primary\" [disabled]=\"savingTags\">\n @if (savingTags) {\n <i class=\"fas fa-spinner fa-spin\"></i>\n }\n {{ savingTags ? 'Saving...' : 'Save' }}\n </button>\n <button kendoButton (click)=\"cancelEditingTags()\" fillMode=\"flat\">Cancel</button>\n </div>\n </div>\n }\n </div>\n\n <!-- Tabs -->\n <div class=\"tabs-container\">\n <div class=\"tabs\" role=\"tablist\">\n <button class=\"tab\" [class.active]=\"activeTab === 'overview'\" (click)=\"changeTab('overview')\"\n role=\"tab\" [attr.aria-selected]=\"activeTab === 'overview'\" title=\"Press 1\">\n <i class=\"fas fa-chart-pie\"></i>\n <span>Overview</span>\n </button>\n <button class=\"tab\" [class.active]=\"activeTab === 'details'\" (click)=\"changeTab('details')\"\n role=\"tab\" [attr.aria-selected]=\"activeTab === 'details'\" title=\"Press 2\">\n <i class=\"fas fa-info-circle\"></i>\n <span>Details</span>\n </button>\n <button class=\"tab\" [class.active]=\"activeTab === 'ai-runs'\" (click)=\"changeTab('ai-runs')\"\n role=\"tab\" [attr.aria-selected]=\"activeTab === 'ai-runs'\" title=\"Press 3\">\n <i class=\"fas fa-robot\"></i>\n <span>AI Runs</span>\n @if (aiRunsLoaded) {\n <span class=\"tab-badge\">{{ aiAgentRuns.length + aiPromptRuns.length }}</span>\n }\n </button>\n <button class=\"tab\" [class.active]=\"activeTab === 'feedback'\" (click)=\"changeTab('feedback')\"\n role=\"tab\" [attr.aria-selected]=\"activeTab === 'feedback'\" title=\"Press 4\">\n <i class=\"fas fa-comments\"></i>\n <span>Feedback</span>\n @if (feedbackLoaded) {\n <span class=\"tab-badge\">{{ feedbacks.length }}</span>\n }\n </button>\n <button class=\"tab\" [class.active]=\"activeTab === 'execution'\" (click)=\"changeTab('execution')\"\n role=\"tab\" [attr.aria-selected]=\"activeTab === 'execution'\" title=\"Press 5\">\n <i class=\"fas fa-microchip\"></i>\n <span>Execution</span>\n </button>\n @if (record.Log) {\n <button class=\"tab\" [class.active]=\"activeTab === 'log'\" (click)=\"changeTab('log')\"\n role=\"tab\" [attr.aria-selected]=\"activeTab === 'log'\" title=\"Press 6\">\n <i class=\"fas fa-terminal\"></i>\n <span>Log</span>\n </button>\n }\n </div>\n </div>\n\n <!-- Tab Content -->\n <div class=\"tab-content\">\n <!-- Overview Tab -->\n @if (activeTab === 'overview') {\n <div class=\"overview-tab\" [@fadeIn]>\n <!-- Result Hero -->\n <div class=\"result-hero\" [class]=\"getStatusClass()\">\n <div class=\"result-icon-wrapper\">\n <div class=\"result-icon\">\n <i class=\"fas\" [ngClass]=\"getStatusIcon()\"></i>\n </div>\n @if (record.Status === 'Running') {\n <div class=\"result-pulse\"></div>\n }\n </div>\n <div class=\"result-text\">\n <h2>TEST {{ record.Status.toUpperCase() }}</h2>\n <div class=\"result-details\">\n <span class=\"result-score\">Score: {{ formatScore(record.Score) }}</span>\n <span class=\"result-divider\">|</span>\n <span class=\"result-checks\">{{ record.PassedChecks }} of {{ record.TotalChecks }} checks passed</span>\n </div>\n </div>\n </div>\n <!-- Check Results -->\n @if (getCheckResults().length > 0) {\n <div class=\"check-results\">\n <div class=\"section-header\">\n <h3><i class=\"fas fa-tasks\"></i> Check Results</h3>\n <span class=\"check-summary\">{{ record.PassedChecks }} passed, {{ record.FailedChecks }} failed</span>\n </div>\n <div class=\"check-list\">\n @for (check of getCheckResults(); track check; let i = $index) {\n <div class=\"check-item\"\n [class.passed]=\"check.passed\" [class.failed]=\"!check.passed\"\n [style.animation-delay.ms]=\"i * 50\">\n <div class=\"check-status\">\n <i class=\"fas\" [class.fa-check-circle]=\"check.passed\" [class.fa-times-circle]=\"!check.passed\"></i>\n </div>\n <div class=\"check-content\">\n <div class=\"check-name\">{{ check.name }}</div>\n @if (check.message) {\n <div class=\"check-message\">{{ check.message }}</div>\n }\n </div>\n @if (check.weight) {\n <div class=\"check-weight\">\n <span class=\"weight-label\">Weight:</span> {{ check.weight }}\n </div>\n }\n </div>\n }\n </div>\n </div>\n }\n <!-- Data Comparison -->\n <div class=\"comparison-section\">\n <div class=\"section-header\">\n <h3><i class=\"fas fa-exchange-alt\"></i> Data Comparison</h3>\n </div>\n <div class=\"comparison-tabs\">\n <button class=\"comparison-tab\" [class.active]=\"comparisonView === 'input'\" (click)=\"setComparisonView('input')\">\n <i class=\"fas fa-sign-in-alt\"></i> Input\n </button>\n <button class=\"comparison-tab\" [class.active]=\"comparisonView === 'expected'\" (click)=\"setComparisonView('expected')\">\n <i class=\"fas fa-bullseye\"></i> Expected\n </button>\n <button class=\"comparison-tab\" [class.active]=\"comparisonView === 'actual'\" (click)=\"setComparisonView('actual')\">\n <i class=\"fas fa-check-square\"></i> Actual\n </button>\n </div>\n <div class=\"comparison-content\">\n <mj-code-editor\n [value]=\"getComparisonData()\"\n language=\"json\"\n [readonly]=\"true\"\n [toolbar]=\"jsonToolbar\"\n [lineWrapping]=\"true\">\n </mj-code-editor>\n </div>\n </div>\n </div>\n }\n\n <!-- Details Tab -->\n @if (activeTab === 'details') {\n <div class=\"details-tab\" [@fadeIn]>\n <div class=\"details-grid\">\n <div class=\"detail-card\">\n <div class=\"detail-icon\"><i class=\"fas fa-fingerprint\"></i></div>\n <div class=\"detail-content\">\n <div class=\"detail-label\">Test Run ID</div>\n <div class=\"detail-value monospace\">{{ record.ID }}</div>\n </div>\n </div>\n @if (test) {\n <div class=\"detail-card clickable\" (click)=\"openTest()\">\n <div class=\"detail-icon\"><i class=\"fas fa-flask\"></i></div>\n <div class=\"detail-content\">\n <div class=\"detail-label\">Test</div>\n <div class=\"detail-value link\">{{ test.Name }}</div>\n </div>\n <i class=\"fas fa-external-link-alt detail-action\"></i>\n </div>\n }\n <div class=\"detail-card\">\n <div class=\"detail-icon\"><i class=\"fas fa-tag\"></i></div>\n <div class=\"detail-content\">\n <div class=\"detail-label\">Target Type</div>\n <div class=\"detail-value\">{{ record.TargetType || 'N/A' }}</div>\n </div>\n </div>\n <div class=\"detail-card\">\n <div class=\"detail-icon\"><i class=\"fas fa-play-circle\"></i></div>\n <div class=\"detail-content\">\n <div class=\"detail-label\">Started At</div>\n <div class=\"detail-value\">{{ record.StartedAt | date:'medium' }}</div>\n </div>\n </div>\n <div class=\"detail-card\">\n <div class=\"detail-icon\"><i class=\"fas fa-stop-circle\"></i></div>\n <div class=\"detail-content\">\n <div class=\"detail-label\">Completed At</div>\n <div class=\"detail-value\">{{ record.CompletedAt | date:'medium' }}</div>\n </div>\n </div>\n <div class=\"detail-card\">\n <div class=\"detail-icon\"><i class=\"fas fa-hourglass-half\"></i></div>\n <div class=\"detail-content\">\n <div class=\"detail-label\">Duration</div>\n <div class=\"detail-value\">{{ calculateDuration() }}</div>\n </div>\n </div>\n </div>\n <!-- Error Message -->\n @if (record.ErrorMessage) {\n <div class=\"error-section\">\n <div class=\"section-header error\">\n <h3><i class=\"fas fa-exclamation-triangle\"></i> Error Message</h3>\n </div>\n <div class=\"error-content\">\n <mj-code-editor\n [value]=\"record.ErrorMessage\"\n [readonly]=\"true\"\n [toolbar]=\"jsonToolbar\"\n [lineWrapping]=\"true\">\n </mj-code-editor>\n </div>\n </div>\n }\n <!-- Result Details -->\n @if (parsedData.resultDetails) {\n <div class=\"result-details-section\">\n <div class=\"section-header\">\n <h3><i class=\"fas fa-file-code\"></i> Result Details</h3>\n </div>\n <div class=\"result-details-content\">\n <mj-code-editor\n [value]=\"getFormattedResultDetails()\"\n language=\"json\"\n [readonly]=\"true\"\n [toolbar]=\"jsonToolbar\"\n [lineWrapping]=\"true\">\n </mj-code-editor>\n </div>\n </div>\n }\n </div>\n }\n\n <!-- AI Runs Tab -->\n @if (activeTab === 'ai-runs') {\n <div class=\"ai-runs-tab\" [@fadeIn]>\n <!-- Loading State -->\n @if (loadingAIRuns) {\n <div class=\"loading-state\">\n <div class=\"skeleton-list\">\n @for (i of [1,2,3]; track i) {\n <div class=\"skeleton-card\">\n <div class=\"skeleton-icon\"></div>\n <div class=\"skeleton-content\">\n <div class=\"skeleton-line wide\"></div>\n <div class=\"skeleton-line narrow\"></div>\n </div>\n </div>\n }\n </div>\n </div>\n }\n <!-- AI Agent Runs -->\n @if (!loadingAIRuns && aiAgentRuns.length > 0) {\n <div class=\"ai-section\">\n <div class=\"section-header\">\n <h3><i class=\"fas fa-robot\"></i> AI Agent Runs</h3>\n <span class=\"count-badge\">{{ aiAgentRuns.length }}</span>\n </div>\n <div class=\"ai-run-list\">\n @for (run of aiAgentRuns; track run) {\n <div class=\"ai-run-card\" (click)=\"openAIAgentRun(run.ID)\">\n <div class=\"ai-run-icon agent\">\n <i class=\"fas fa-robot\"></i>\n </div>\n <div class=\"ai-run-content\">\n <div class=\"ai-run-name\">{{ run.Agent }}</div>\n <div class=\"ai-run-meta\">\n <span class=\"status-chip\" [class]=\"run.Status.toLowerCase()\">{{ run.Status }}</span>\n @if (run.TotalCost) {\n <span class=\"cost-chip\">\n <i class=\"fas fa-dollar-sign\"></i> {{ run.TotalCost | number:'1.4-4' }}\n </span>\n }\n </div>\n </div>\n <i class=\"fas fa-chevron-right ai-run-arrow\"></i>\n </div>\n }\n </div>\n </div>\n }\n <!-- AI Prompt Runs -->\n @if (!loadingAIRuns && aiPromptRuns.length > 0) {\n <div class=\"ai-section\">\n <div class=\"section-header\">\n <h3><i class=\"fas fa-comment-dots\"></i> AI Prompt Runs</h3>\n <span class=\"count-badge\">{{ aiPromptRuns.length }}</span>\n </div>\n <div class=\"ai-run-list\">\n @for (run of aiPromptRuns; track run) {\n <div class=\"ai-run-card\" (click)=\"openAIPromptRun(run.ID)\">\n <div class=\"ai-run-icon prompt\">\n <i class=\"fas fa-comment-dots\"></i>\n </div>\n <div class=\"ai-run-content\">\n <div class=\"ai-run-name\">{{ run.Prompt || run.Model }}</div>\n <div class=\"ai-run-meta\">\n @if (run.TotalCost) {\n <span class=\"cost-chip\">\n <i class=\"fas fa-dollar-sign\"></i> {{ run.TotalCost | number:'1.4-4' }}\n </span>\n }\n </div>\n </div>\n <i class=\"fas fa-chevron-right ai-run-arrow\"></i>\n </div>\n }\n </div>\n </div>\n }\n <!-- Empty State -->\n @if (aiRunsLoaded && aiAgentRuns.length === 0 && aiPromptRuns.length === 0) {\n <div class=\"empty-state\">\n <div class=\"empty-icon\">\n <i class=\"fas fa-robot\"></i>\n </div>\n <h3>No AI Runs</h3>\n <p>This test execution didn't involve any AI agent or prompt runs.</p>\n </div>\n }\n </div>\n }\n\n <!-- Feedback Tab -->\n @if (activeTab === 'feedback') {\n <div class=\"feedback-tab\" [@fadeIn]>\n <!-- Loading State -->\n @if (loadingFeedback) {\n <div class=\"loading-state\">\n <div class=\"skeleton-list\">\n @for (i of [1,2]; track i) {\n <div class=\"skeleton-card\">\n <div class=\"skeleton-avatar\"></div>\n <div class=\"skeleton-content\">\n <div class=\"skeleton-line wide\"></div>\n <div class=\"skeleton-line narrow\"></div>\n <div class=\"skeleton-line medium\"></div>\n </div>\n </div>\n }\n </div>\n </div>\n }\n <!-- Feedback List -->\n @if (!loadingFeedback && feedbacks.length > 0) {\n <div class=\"feedback-list\">\n @for (feedback of feedbacks; track feedback) {\n <div class=\"feedback-item\">\n <div class=\"feedback-header\">\n <div class=\"feedback-user\">\n <div class=\"user-avatar\">\n <i class=\"fas fa-user\"></i>\n </div>\n <span class=\"user-name\">{{ feedback.ReviewerUser }}</span>\n </div>\n <div class=\"feedback-date\">\n {{ getRelativeTime(feedback.__mj_CreatedAt) }}\n </div>\n </div>\n <div class=\"feedback-body\">\n <div class=\"feedback-rating\">\n <div class=\"rating-stars\">\n @for (s of [1,2,3,4,5,6,7,8,9,10]; track s) {\n <i class=\"fas fa-star\"\n [class.filled]=\"s <= (feedback.Rating || 0)\"></i>\n }\n </div>\n <span class=\"rating-value\">{{ feedback.Rating }}/10</span>\n </div>\n @if (feedback.IsCorrect !== null) {\n <div class=\"feedback-verdict\">\n <span class=\"verdict-badge\" [class.correct]=\"feedback.IsCorrect\" [class.incorrect]=\"!feedback.IsCorrect\">\n <i class=\"fas\" [class.fa-check]=\"feedback.IsCorrect\" [class.fa-times]=\"!feedback.IsCorrect\"></i>\n {{ feedback.IsCorrect ? 'Marked Correct' : 'Marked Incorrect' }}\n </span>\n </div>\n }\n @if (feedback.CorrectionSummary) {\n <div class=\"feedback-comments\">\n <p>{{ feedback.CorrectionSummary }}</p>\n </div>\n }\n </div>\n </div>\n }\n </div>\n }\n <!-- Empty State -->\n @if (feedbackLoaded && feedbacks.length === 0) {\n <div class=\"empty-state\">\n <div class=\"empty-icon\">\n <i class=\"fas fa-comments\"></i>\n </div>\n <h3>No Feedback Yet</h3>\n <p>No one has reviewed this test run yet. Be the first to provide feedback!</p>\n </div>\n }\n </div>\n }\n\n <!-- Execution Context Tab -->\n @if (activeTab === 'execution') {\n <div class=\"execution-tab\" [@fadeIn]>\n <mj-execution-context\n [machineName]=\"record.MachineName\"\n [machineId]=\"record.MachineID\"\n [runByUserName]=\"record.RunByUserName\"\n [runByUserEmail]=\"record.RunByUserEmail\"\n [runContextDetailsJson]=\"record.RunContextDetails\">\n </mj-execution-context>\n </div>\n }\n\n <!-- Execution Log Tab -->\n @if (activeTab === 'log') {\n <div class=\"log-tab\" [@fadeIn]>\n <div class=\"log-header\">\n <div class=\"log-title\">\n <i class=\"fas fa-terminal\"></i>\n <h3>Execution Log</h3>\n </div>\n <div class=\"log-actions\">\n <button kendoButton (click)=\"copyLogToClipboard()\" look=\"flat\">\n <i class=\"fas fa-copy\"></i>\n <span class=\"btn-text\">Copy</span>\n </button>\n </div>\n </div>\n <div class=\"log-container\">\n <mj-code-editor\n [value]=\"record.Log || ''\"\n [readonly]=\"true\"\n [toolbar]=\"jsonToolbar\"\n [lineWrapping]=\"true\">\n </mj-code-editor>\n </div>\n </div>\n }\n </div>\n\n <!-- Keyboard Shortcuts Help (shown on hover of ? icon) -->\n <div class=\"shortcuts-hint\" title=\"Keyboard Shortcuts\">\n <i class=\"fas fa-keyboard\"></i>\n <div class=\"shortcuts-popup\">\n <h4>Keyboard Shortcuts</h4>\n <ul>\n <li><kbd>1-6</kbd> Switch tabs</li>\n <li><kbd>Cmd+R</kbd> Refresh</li>\n <li><kbd>Cmd+Shift+R</kbd> Re-run test</li>\n </ul>\n </div>\n </div>\n</div>\n", styles: ["/* ===========================\n Test Run Form - World-Class UX\n Premium Testing Dashboard Styles\n =========================== */\n\n/* CSS Custom Properties for Theming - using :host for Angular encapsulation */\n:host {\n --test-primary: #2563eb;\n --test-primary-light: #3b82f6;\n --test-primary-dark: #1d4ed8;\n --test-success: #10b981;\n --test-success-light: #d1fae5;\n --test-error: #ef4444;\n --test-error-light: #fee2e2;\n --test-warning: #f59e0b;\n --test-warning-light: #fef3c7;\n --test-timeout: #f97316;\n --test-timeout-light: #ffedd5;\n --test-running: #3b82f6;\n --test-pending: #8b5cf6;\n --test-skipped: #6b7280;\n --test-bg: #f8fafc;\n --test-surface: #ffffff;\n --test-border: #e2e8f0;\n --test-text: #1e293b;\n --test-text-secondary: #64748b;\n --test-text-muted: #94a3b8;\n --test-radius-sm: 6px;\n --test-radius-md: 10px;\n --test-radius-lg: 16px;\n --test-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);\n --test-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n --test-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n --test-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n display: block;\n height: 100%;\n}\n\n/* Base Container */\n.test-run-form {\n display: flex;\n flex-direction: column;\n height: 100%;\n background: var(--test-bg);\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n/* ===========================\n Error Banner\n =========================== */\n.error-banner {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 12px;\n padding: 12px 20px;\n background: linear-gradient(135deg, var(--test-error) 0%, #dc2626 100%);\n color: white;\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n transition: var(--test-transition);\n animation: slideDown 0.3s ease-out;\n}\n\n.error-banner:hover {\n background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);\n}\n\n.error-banner i {\n font-size: 16px;\n}\n\n.retry-btn {\n background: rgba(255, 255, 255, 0.2);\n border: 1px solid rgba(255, 255, 255, 0.3);\n color: white;\n padding: 6px 12px;\n border-radius: var(--test-radius-sm);\n cursor: pointer;\n font-size: 12px;\n font-weight: 600;\n transition: var(--test-transition);\n}\n\n.retry-btn:hover {\n background: rgba(255, 255, 255, 0.3);\n}\n\n@keyframes slideDown {\n from {\n transform: translateY(-100%);\n opacity: 0;\n }\n to {\n transform: translateY(0);\n opacity: 1;\n }\n}\n\n/* ===========================\n Header Section\n =========================== */\n.test-run-header {\n background: var(--test-surface);\n border-bottom: 1px solid var(--test-border);\n padding: 20px;\n position: relative;\n}\n\n/* Breadcrumb */\n.breadcrumb {\n margin-bottom: 16px;\n}\n\n.breadcrumb ol {\n display: flex;\n align-items: center;\n gap: 4px;\n list-style: none;\n margin: 0;\n padding: 0;\n font-size: 13px;\n flex-wrap: wrap;\n}\n\n.breadcrumb li {\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.breadcrumb a {\n color: var(--test-primary);\n text-decoration: none;\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 4px 8px;\n border-radius: var(--test-radius-sm);\n transition: var(--test-transition);\n}\n\n.breadcrumb a:hover {\n background: rgba(37, 99, 235, 0.1);\n text-decoration: none;\n}\n\n.breadcrumb .separator {\n font-size: 10px;\n color: var(--test-text-muted);\n margin: 0 4px;\n}\n\n.breadcrumb .current {\n color: var(--test-text-secondary);\n font-weight: 500;\n}\n\n.breadcrumb-text {\n max-width: 200px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n/* Header Content */\n.header-content {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n margin-bottom: 20px;\n gap: 16px;\n}\n\n.header-left {\n display: flex;\n gap: 16px;\n flex: 1;\n min-width: 0;\n}\n\n/* Status Indicator */\n.status-indicator {\n width: 56px;\n height: 56px;\n border-radius: var(--test-radius-md);\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n font-size: 24px;\n flex-shrink: 0;\n box-shadow: var(--test-shadow-md);\n transition: var(--test-transition);\n}\n\n.status-indicator:hover {\n transform: scale(1.05);\n}\n\n/* Test Run Info */\n.test-run-info {\n flex: 1;\n min-width: 0;\n}\n\n.test-run-info h1 {\n margin: 0 0 8px 0;\n font-size: clamp(18px, 4vw, 24px);\n font-weight: 700;\n color: var(--test-text);\n line-height: 1.2;\n word-wrap: break-word;\n}\n\n.test-run-info h1 .run-id {\n color: var(--test-text-secondary);\n font-weight: 500;\n}\n\n.test-run-meta {\n display: flex;\n align-items: center;\n gap: 12px;\n flex-wrap: wrap;\n}\n\n/* Status Badge */\n.status-badge {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 6px 14px;\n border-radius: 20px;\n color: white;\n font-size: 12px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n box-shadow: var(--test-shadow-sm);\n}\n\n/* Meta Item */\n.meta-item {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n font-size: 14px;\n color: var(--test-text-secondary);\n}\n\n.meta-item i {\n font-size: 12px;\n}\n\n/* Header Actions */\n.header-actions {\n display: flex;\n gap: 8px;\n flex-shrink: 0;\n}\n\n.header-actions button {\n white-space: nowrap;\n}\n\n.btn-text {\n margin-left: 6px;\n}\n\n/* ===========================\n Metrics Bar\n =========================== */\n.metrics-bar {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));\n gap: 12px;\n margin-bottom: 16px;\n}\n\n.metric-card {\n display: flex;\n align-items: center;\n gap: 12px;\n background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);\n border: 1px solid var(--test-border);\n border-radius: var(--test-radius-md);\n padding: 14px;\n transition: var(--test-transition);\n}\n\n.metric-card:hover {\n transform: translateY(-2px);\n box-shadow: var(--test-shadow-md);\n}\n\n.metric-icon {\n width: 40px;\n height: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--test-surface);\n border-radius: var(--test-radius-sm);\n color: var(--test-primary);\n font-size: 16px;\n flex-shrink: 0;\n}\n\n.metric-content {\n flex: 1;\n min-width: 0;\n}\n\n.metric-label {\n font-size: 10px;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n color: var(--test-text-muted);\n margin-bottom: 4px;\n}\n\n.metric-value {\n font-size: 16px;\n font-weight: 700;\n color: var(--test-text);\n}\n\n.metric-detail {\n font-size: 11px;\n color: var(--test-text-muted);\n margin-top: 2px;\n}\n\n/* Progress bar in metric card */\n.metric-progress {\n margin-top: 6px;\n height: 4px;\n background: var(--test-border);\n border-radius: 2px;\n overflow: hidden;\n}\n\n.progress-bar {\n height: 100%;\n border-radius: 2px;\n transition: width 0.5s ease-out;\n}\n\n/* Secondary Info */\n.secondary-info {\n display: flex;\n gap: 12px;\n padding-top: 16px;\n border-top: 1px solid var(--test-border);\n flex-wrap: wrap;\n}\n\n.info-chip {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n font-size: 13px;\n color: var(--test-text-secondary);\n padding: 6px 12px;\n background: var(--test-bg);\n border-radius: 20px;\n transition: var(--test-transition);\n}\n\n.info-chip i {\n font-size: 12px;\n}\n\n.info-chip.clickable {\n cursor: pointer;\n}\n\n.info-chip.clickable:hover {\n background: rgba(37, 99, 235, 0.1);\n color: var(--test-primary);\n}\n\n/* ===========================\n Tabs Navigation\n =========================== */\n.tabs-container {\n background: var(--test-surface);\n border-bottom: 1px solid var(--test-border);\n position: sticky;\n top: 0;\n z-index: 10;\n}\n\n.tabs {\n display: flex;\n padding: 0 20px;\n overflow-x: auto;\n -webkit-overflow-scrolling: touch;\n scrollbar-width: none;\n -ms-overflow-style: none;\n}\n\n.tabs::-webkit-scrollbar {\n display: none;\n}\n\n.tab {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 14px 18px;\n border: none;\n background: transparent;\n border-bottom: 3px solid transparent;\n color: var(--test-text-secondary);\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n transition: var(--test-transition);\n white-space: nowrap;\n position: relative;\n}\n\n.tab:hover {\n color: var(--test-primary);\n background: rgba(37, 99, 235, 0.05);\n}\n\n.tab.active {\n color: var(--test-primary);\n border-bottom-color: var(--test-primary);\n font-weight: 600;\n}\n\n.tab i {\n font-size: 15px;\n}\n\n.tab-badge {\n background: var(--test-border);\n color: var(--test-text-secondary);\n padding: 2px 8px;\n border-radius: 10px;\n font-size: 11px;\n font-weight: 600;\n transition: var(--test-transition);\n}\n\n.tab.active .tab-badge {\n background: rgba(37, 99, 235, 0.15);\n color: var(--test-primary);\n}\n\n.shortcut-hint {\n font-size: 10px;\n color: var(--test-text-muted);\n background: var(--test-bg);\n padding: 2px 6px;\n border-radius: 4px;\n font-weight: 600;\n margin-left: 4px;\n font-family: -apple-system, BlinkMacSystemFont, sans-serif;\n}\n\n/* ===========================\n Tab Content Area\n =========================== */\n.tab-content {\n flex: 1;\n overflow-y: auto;\n padding: 20px;\n scroll-behavior: smooth;\n}\n\n/* ===========================\n Overview Tab\n =========================== */\n.overview-tab {\n display: flex;\n flex-direction: column;\n gap: 20px;\n animation: fadeIn 0.3s ease-out;\n}\n\n@keyframes fadeIn {\n from { opacity: 0; transform: translateY(10px); }\n to { opacity: 1; transform: translateY(0); }\n}\n\n/* Result Hero Card */\n.result-hero {\n background: var(--test-surface);\n border-radius: var(--test-radius-lg);\n padding: 32px;\n text-align: center;\n border: 2px solid var(--test-border);\n box-shadow: var(--test-shadow-sm);\n transition: var(--test-transition);\n}\n\n.result-hero.passed {\n background: linear-gradient(135deg, #ecfdf5 0%, var(--test-success-light) 100%);\n border-color: var(--test-success);\n}\n\n.result-hero.failed {\n background: linear-gradient(135deg, #fef2f2 0%, var(--test-error-light) 100%);\n border-color: var(--test-error);\n}\n\n.result-hero.error {\n background: linear-gradient(135deg, #fffbeb 0%, var(--test-warning-light) 100%);\n border-color: var(--test-warning);\n}\n\n.result-hero.timeout {\n background: linear-gradient(135deg, #fff7ed 0%, var(--test-timeout-light) 100%);\n border-color: var(--test-timeout);\n}\n\n.result-hero.running,\n.result-hero.pending {\n background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);\n border-color: var(--test-primary-light);\n}\n\n.result-icon-wrapper {\n position: relative;\n display: inline-block;\n margin-bottom: 16px;\n}\n\n.result-icon {\n width: 80px;\n height: 80px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--test-surface);\n border-radius: 50%;\n font-size: 40px;\n margin: 0 auto;\n box-shadow: var(--test-shadow-md);\n}\n\n.result-hero.passed .result-icon { color: var(--test-success); }\n.result-hero.failed .result-icon { color: var(--test-error); }\n.result-hero.error .result-icon { color: var(--test-warning); }\n.result-hero.timeout .result-icon { color: var(--test-timeout); }\n.result-hero.running .result-icon,\n.result-hero.pending .result-icon { color: var(--test-primary); }\n\n.result-pulse {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 100px;\n height: 100px;\n border-radius: 50%;\n background: rgba(59, 130, 246, 0.2);\n animation: pulse 2s ease-in-out infinite;\n}\n\n@keyframes pulse {\n 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }\n 50% { transform: translate(-50%, -50%) scale(1.2); opacity: 0; }\n}\n\n.result-text h2 {\n margin: 0 0 12px 0;\n font-size: clamp(24px, 5vw, 32px);\n font-weight: 800;\n color: var(--test-text);\n}\n\n.result-details {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 12px;\n flex-wrap: wrap;\n}\n\n.result-score {\n font-size: 18px;\n font-weight: 600;\n color: var(--test-text-secondary);\n}\n\n.result-divider {\n color: var(--test-border);\n}\n\n.result-checks {\n font-size: 16px;\n color: var(--test-text-muted);\n}\n\n/* Section Headers */\n.section-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 16px;\n gap: 12px;\n}\n\n.section-header h3 {\n margin: 0;\n font-size: 18px;\n font-weight: 700;\n color: var(--test-text);\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.section-header h3 i {\n color: var(--test-primary);\n}\n\n.section-header.error h3 i {\n color: var(--test-error);\n}\n\n.check-summary {\n font-size: 13px;\n color: var(--test-text-secondary);\n}\n\n/* Check Results Section */\n.check-results {\n background: var(--test-surface);\n border-radius: var(--test-radius-lg);\n padding: 24px;\n box-shadow: var(--test-shadow-sm);\n}\n\n.check-list {\n display: flex;\n flex-direction: column;\n gap: 10px;\n}\n\n.check-item {\n display: flex;\n gap: 12px;\n padding: 14px 16px;\n border-radius: var(--test-radius-md);\n border: 1px solid var(--test-border);\n transition: var(--test-transition);\n animation: fadeIn 0.3s ease-out backwards;\n}\n\n.check-item:hover {\n transform: translateX(4px);\n}\n\n.check-item.passed {\n background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);\n border-color: #86efac;\n}\n\n.check-item.failed {\n background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);\n border-color: #fca5a5;\n}\n\n.check-status {\n font-size: 20px;\n flex-shrink: 0;\n margin-top: 2px;\n}\n\n.check-item.passed .check-status { color: var(--test-success); }\n.check-item.failed .check-status { color: var(--test-error); }\n\n.check-content {\n flex: 1;\n min-width: 0;\n}\n\n.check-name {\n font-size: 14px;\n font-weight: 600;\n color: var(--test-text);\n margin-bottom: 4px;\n}\n\n.check-message {\n font-size: 13px;\n color: var(--test-text-secondary);\n line-height: 1.5;\n word-wrap: break-word;\n}\n\n.check-weight {\n font-size: 12px;\n color: var(--test-text-muted);\n flex-shrink: 0;\n text-align: right;\n}\n\n.weight-label {\n font-weight: 500;\n}\n\n/* Comparison Section */\n.comparison-section {\n background: var(--test-surface);\n border-radius: var(--test-radius-lg);\n padding: 24px;\n box-shadow: var(--test-shadow-sm);\n}\n\n.comparison-tabs {\n display: flex;\n gap: 4px;\n margin-bottom: 16px;\n background: var(--test-bg);\n border-radius: var(--test-radius-md);\n padding: 4px;\n}\n\n.comparison-tab {\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 6px;\n padding: 10px 16px;\n border: none;\n background: transparent;\n color: var(--test-text-secondary);\n font-size: 13px;\n font-weight: 500;\n cursor: pointer;\n border-radius: var(--test-radius-sm);\n transition: var(--test-transition);\n}\n\n.comparison-tab:hover {\n color: var(--test-text);\n background: rgba(0, 0, 0, 0.05);\n}\n\n.comparison-tab.active {\n background: var(--test-surface);\n color: var(--test-primary);\n font-weight: 600;\n box-shadow: var(--test-shadow-sm);\n}\n\n.comparison-content {\n border-radius: var(--test-radius-md);\n overflow: hidden;\n border: 1px solid var(--test-border);\n}\n\n/* ===========================\n Details Tab\n =========================== */\n.details-tab {\n display: flex;\n flex-direction: column;\n gap: 20px;\n animation: fadeIn 0.3s ease-out;\n}\n\n.details-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n gap: 12px;\n}\n\n.detail-card {\n display: flex;\n align-items: center;\n gap: 14px;\n padding: 16px;\n background: var(--test-surface);\n border: 1px solid var(--test-border);\n border-radius: var(--test-radius-md);\n transition: var(--test-transition);\n}\n\n.detail-card.clickable {\n cursor: pointer;\n}\n\n.detail-card.clickable:hover {\n background: rgba(37, 99, 235, 0.05);\n border-color: var(--test-primary-light);\n transform: translateX(4px);\n}\n\n.detail-icon {\n width: 44px;\n height: 44px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--test-bg);\n border-radius: var(--test-radius-md);\n color: var(--test-primary);\n font-size: 18px;\n flex-shrink: 0;\n}\n\n.detail-content {\n flex: 1;\n min-width: 0;\n}\n\n.detail-label {\n font-size: 11px;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n color: var(--test-text-muted);\n margin-bottom: 4px;\n}\n\n.detail-value {\n font-size: 14px;\n color: var(--test-text);\n word-wrap: break-word;\n font-weight: 500;\n}\n\n.detail-value.monospace {\n font-family: 'SF Mono', Monaco, 'Courier New', monospace;\n font-size: 12px;\n}\n\n.detail-value.link {\n color: var(--test-primary);\n}\n\n.detail-action {\n color: var(--test-text-muted);\n font-size: 12px;\n transition: var(--test-transition);\n}\n\n.detail-card.clickable:hover .detail-action {\n color: var(--test-primary);\n}\n\n/* Error Section */\n.error-section {\n background: var(--test-surface);\n border-radius: var(--test-radius-lg);\n padding: 24px;\n box-shadow: var(--test-shadow-sm);\n}\n\n.error-content {\n border-radius: var(--test-radius-md);\n overflow: hidden;\n border: 1px solid #fca5a5;\n}\n\n/* Result Details Section */\n.result-details-section {\n background: var(--test-surface);\n border-radius: var(--test-radius-lg);\n padding: 24px;\n box-shadow: var(--test-shadow-sm);\n}\n\n.result-details-content {\n border-radius: var(--test-radius-md);\n overflow: hidden;\n border: 1px solid var(--test-border);\n}\n\n/* ===========================\n AI Runs Tab\n =========================== */\n.ai-runs-tab {\n display: flex;\n flex-direction: column;\n gap: 20px;\n animation: fadeIn 0.3s ease-out;\n}\n\n.ai-section {\n background: var(--test-surface);\n border-radius: var(--test-radius-lg);\n padding: 24px;\n box-shadow: var(--test-shadow-sm);\n}\n\n.count-badge {\n background: var(--test-bg);\n color: var(--test-text-secondary);\n padding: 4px 10px;\n border-radius: 12px;\n font-size: 12px;\n font-weight: 600;\n}\n\n.ai-run-list {\n display: flex;\n flex-direction: column;\n gap: 10px;\n}\n\n.ai-run-card {\n display: flex;\n align-items: center;\n gap: 14px;\n padding: 16px;\n background: var(--test-bg);\n border: 1px solid var(--test-border);\n border-radius: var(--test-radius-md);\n cursor: pointer;\n transition: var(--test-transition);\n}\n\n.ai-run-card:hover {\n background: rgba(37, 99, 235, 0.05);\n border-color: var(--test-primary-light);\n transform: translateX(4px);\n box-shadow: var(--test-shadow-sm);\n}\n\n.ai-run-icon {\n width: 44px;\n height: 44px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: linear-gradient(135deg, var(--test-primary) 0%, var(--test-primary-dark) 100%);\n color: white;\n border-radius: var(--test-radius-md);\n font-size: 18px;\n flex-shrink: 0;\n box-shadow: var(--test-shadow-sm);\n}\n\n.ai-run-icon.agent {\n background: linear-gradient(135deg, var(--test-primary) 0%, var(--test-primary-dark) 100%);\n}\n\n.ai-run-icon.prompt {\n background: linear-gradient(135deg, #9333ea 0%, #7c3aed 100%);\n}\n\n.ai-run-content {\n flex: 1;\n min-width: 0;\n}\n\n.ai-run-name {\n font-size: 14px;\n font-weight: 600;\n color: var(--test-text);\n margin-bottom: 6px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.ai-run-meta {\n display: flex;\n gap: 10px;\n font-size: 12px;\n color: var(--test-text-secondary);\n flex-wrap: wrap;\n}\n\n.status-chip {\n display: inline-flex;\n align-items: center;\n padding: 2px 8px;\n border-radius: 10px;\n font-size: 11px;\n font-weight: 600;\n text-transform: uppercase;\n}\n\n.status-chip.complete,\n.status-chip.completed,\n.status-chip.passed {\n background: var(--test-success-light);\n color: #059669;\n}\n\n.status-chip.failed,\n.status-chip.error {\n background: var(--test-error-light);\n color: #dc2626;\n}\n\n.status-chip.running {\n background: #dbeafe;\n color: var(--test-primary);\n}\n\n.cost-chip {\n display: inline-flex;\n align-items: center;\n gap: 2px;\n color: var(--test-text-muted);\n}\n\n.ai-run-arrow {\n color: var(--test-text-muted);\n font-size: 14px;\n transition: var(--test-transition);\n}\n\n.ai-run-card:hover .ai-run-arrow {\n color: var(--test-primary);\n transform: translateX(2px);\n}\n\n/* ===========================\n Feedback Tab\n =========================== */\n.feedback-tab {\n animation: fadeIn 0.3s ease-out;\n}\n\n.feedback-list {\n display: flex;\n flex-direction: column;\n gap: 16px;\n}\n\n.feedback-item {\n padding: 20px;\n background: var(--test-surface);\n border-radius: var(--test-radius-lg);\n border: 1px solid var(--test-border);\n box-shadow: var(--test-shadow-sm);\n transition: var(--test-transition);\n}\n\n.feedback-item:hover {\n border-color: var(--test-primary-light);\n}\n\n.feedback-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 16px;\n flex-wrap: wrap;\n gap: 8px;\n}\n\n.feedback-user {\n display: flex;\n align-items: center;\n gap: 10px;\n}\n\n.user-avatar {\n width: 36px;\n height: 36px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--test-bg);\n border-radius: 50%;\n color: var(--test-primary);\n font-size: 14px;\n}\n\n.user-name {\n font-size: 14px;\n font-weight: 600;\n color: var(--test-text);\n}\n\n.feedback-date {\n font-size: 12px;\n color: var(--test-text-muted);\n}\n\n.feedback-body {\n display: flex;\n flex-direction: column;\n gap: 12px;\n}\n\n.feedback-rating {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.rating-stars {\n display: flex;\n gap: 2px;\n}\n\n.rating-stars i {\n font-size: 14px;\n color: var(--test-border);\n}\n\n.rating-stars i.filled {\n color: #fbbf24;\n}\n\n.rating-value {\n font-size: 14px;\n font-weight: 600;\n color: var(--test-text);\n}\n\n.feedback-verdict {\n display: flex;\n}\n\n.verdict-badge {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 6px 12px;\n border-radius: 20px;\n font-size: 12px;\n font-weight: 600;\n}\n\n.verdict-badge.correct {\n background: var(--test-success-light);\n color: #059669;\n}\n\n.verdict-badge.incorrect {\n background: var(--test-error-light);\n color: #dc2626;\n}\n\n.feedback-comments {\n padding: 14px;\n background: var(--test-bg);\n border-radius: var(--test-radius-md);\n border-left: 3px solid var(--test-primary);\n}\n\n.feedback-comments p {\n margin: 0;\n font-size: 14px;\n line-height: 1.6;\n color: var(--test-text);\n}\n\n/* ===========================\n Log Tab\n =========================== */\n.log-tab {\n display: flex;\n flex-direction: column;\n gap: 0;\n height: 100%;\n animation: fadeIn 0.3s ease-out;\n}\n\n.log-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n background: var(--test-surface);\n padding: 16px 20px;\n border-radius: var(--test-radius-lg) var(--test-radius-lg) 0 0;\n border: 1px solid var(--test-border);\n border-bottom: none;\n}\n\n.log-title {\n display: flex;\n align-items: center;\n gap: 10px;\n}\n\n.log-title i {\n color: var(--test-text-secondary);\n font-size: 16px;\n}\n\n.log-title h3 {\n margin: 0;\n font-size: 16px;\n font-weight: 700;\n color: var(--test-text);\n}\n\n.log-actions {\n display: flex;\n gap: 8px;\n}\n\n.log-container {\n flex: 1;\n border-radius: 0 0 var(--test-radius-lg) var(--test-radius-lg);\n overflow: hidden;\n min-height: 300px;\n border: 1px solid var(--test-border);\n border-top: none;\n}\n\n/* ===========================\n Loading States & Skeletons\n =========================== */\n.loading-state {\n padding: 20px;\n}\n\n.skeleton-list {\n display: flex;\n flex-direction: column;\n gap: 12px;\n}\n\n.skeleton-card {\n display: flex;\n align-items: center;\n gap: 14px;\n padding: 16px;\n background: var(--test-surface);\n border-radius: var(--test-radius-md);\n border: 1px solid var(--test-border);\n}\n\n.skeleton-icon,\n.skeleton-avatar {\n width: 44px;\n height: 44px;\n border-radius: var(--test-radius-md);\n background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);\n background-size: 200% 100%;\n animation: shimmer 1.5s infinite;\n}\n\n.skeleton-avatar {\n border-radius: 50%;\n}\n\n.skeleton-content {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.skeleton-line {\n height: 14px;\n border-radius: 4px;\n background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);\n background-size: 200% 100%;\n animation: shimmer 1.5s infinite;\n}\n\n.skeleton-line.wide { width: 70%; }\n.skeleton-line.medium { width: 55%; }\n.skeleton-line.narrow { width: 40%; }\n\n@keyframes shimmer {\n 0% { background-position: 200% 0; }\n 100% { background-position: -200% 0; }\n}\n\n/* ===========================\n Empty States\n =========================== */\n.empty-state {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 60px 24px;\n text-align: center;\n background: var(--test-surface);\n border-radius: var(--test-radius-lg);\n}\n\n.empty-icon {\n width: 80px;\n height: 80px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--test-bg);\n border-radius: 50%;\n margin-bottom: 20px;\n}\n\n.empty-icon i {\n font-size: 36px;\n color: var(--test-text-muted);\n}\n\n.empty-state h3 {\n margin: 0 0 8px 0;\n font-size: 18px;\n font-weight: 600;\n color: var(--test-text);\n}\n\n.empty-state p {\n margin: 0;\n font-size: 14px;\n color: var(--test-text-secondary);\n max-width: 300px;\n}\n\n/* ===========================\n Keyboard Shortcuts Help\n =========================== */\n.shortcuts-hint {\n position: fixed;\n bottom: 20px;\n right: 20px;\n z-index: 100;\n}\n\n.shortcuts-hint > i {\n width: 40px;\n height: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--test-surface);\n border: 1px solid var(--test-border);\n border-radius: 50%;\n color: var(--test-text-muted);\n font-size: 16px;\n cursor: pointer;\n box-shadow: var(--test-shadow-md);\n transition: var(--test-transition);\n}\n\n.shortcuts-hint:hover > i {\n color: var(--test-primary);\n border-color: var(--test-primary-light);\n}\n\n.shortcuts-popup {\n display: none;\n position: absolute;\n bottom: 50px;\n right: 0;\n background: var(--test-surface);\n border: 1px solid var(--test-border);\n border-radius: var(--test-radius-md);\n padding: 16px;\n box-shadow: var(--test-shadow-lg);\n min-width: 200px;\n}\n\n.shortcuts-hint:hover .shortcuts-popup {\n display: block;\n animation: fadeIn 0.2s ease-out;\n}\n\n.shortcuts-popup h4 {\n margin: 0 0 12px 0;\n font-size: 14px;\n font-weight: 700;\n color: var(--test-text);\n}\n\n.shortcuts-popup ul {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n\n.shortcuts-popup li {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 6px 0;\n font-size: 13px;\n color: var(--test-text-secondary);\n}\n\n.shortcuts-popup kbd {\n background: var(--test-bg);\n border: 1px solid var(--test-border);\n border-radius: 4px;\n padding: 2px 6px;\n font-family: -apple-system, BlinkMacSystemFont, sans-serif;\n font-size: 11px;\n color: var(--test-text);\n}\n\n/* ===========================\n Responsive Design - Tablet\n =========================== */\n@media (max-width: 1024px) {\n .metrics-bar {\n grid-template-columns: repeat(3, 1fr);\n }\n\n .details-grid {\n grid-template-columns: repeat(2, 1fr);\n }\n\n .shortcuts-hint {\n display: none;\n }\n}\n\n/* ===========================\n Responsive Design - Mobile\n =========================== */\n@media (max-width: 768px) {\n .test-run-form {\n height: auto;\n min-height: 100%;\n }\n\n .test-run-header {\n padding: 16px;\n }\n\n .breadcrumb {\n margin-bottom: 12px;\n }\n\n .breadcrumb ol {\n font-size: 12px;\n }\n\n .header-content {\n flex-direction: column;\n gap: 16px;\n }\n\n .header-left {\n width: 100%;\n }\n\n .status-indicator {\n width: 48px;\n height: 48px;\n font-size: 20px;\n }\n\n .test-run-info h1 {\n font-size: 18px;\n }\n\n .test-run-meta {\n gap: 8px;\n }\n\n .status-badge {\n padding: 4px 10px;\n font-size: 11px;\n }\n\n .header-actions {\n width: 100%;\n justify-content: stretch;\n }\n\n .header-actions button {\n flex: 1;\n }\n\n .metrics-bar {\n grid-template-columns: repeat(2, 1fr);\n gap: 10px;\n }\n\n .metric-card {\n padding: 12px;\n }\n\n .metric-icon {\n width: 36px;\n height: 36px;\n font-size: 14px;\n }\n\n .metric-value {\n font-size: 14px;\n }\n\n .tabs {\n padding: 0 12px;\n }\n\n .tab {\n padding: 12px 14px;\n font-size: 13px;\n gap: 6px;\n }\n\n .tab i {\n font-size: 14px;\n }\n\n .shortcut-hint {\n display: none;\n }\n\n .tab-content {\n padding: 16px;\n }\n\n .result-hero {\n padding: 24px 20px;\n }\n\n .result-icon {\n width: 64px;\n height: 64px;\n font-size: 32px;\n }\n\n .result-text h2 {\n font-size: 24px;\n }\n\n .result-score {\n font-size: 16px;\n }\n\n .check-results,\n .comparison-section,\n .ai-section,\n .feedback-item {\n padding: 18px;\n }\n\n .check-item {\n padding: 12px;\n }\n\n .comparison-tabs {\n flex-direction: column;\n gap: 4px;\n }\n\n .comparison-tab {\n text-align: center;\n }\n\n .details-grid {\n grid-template-columns: 1fr;\n }\n\n .detail-card {\n padding: 14px;\n }\n\n .ai-run-card {\n padding: 14px;\n }\n\n .ai-run-icon {\n width: 40px;\n height: 40px;\n font-size: 16px;\n }\n\n .ai-run-meta {\n flex-direction: column;\n gap: 4px;\n }\n\n .feedback-header {\n flex-direction: column;\n align-items: flex-start;\n }\n\n .log-header {\n flex-direction: column;\n gap: 12px;\n align-items: stretch;\n }\n\n .log-actions {\n justify-content: stretch;\n }\n\n .log-actions button {\n flex: 1;\n }\n\n .empty-state {\n padding: 40px 20px;\n }\n\n .empty-icon {\n width: 64px;\n height: 64px;\n }\n\n .empty-icon i {\n font-size: 28px;\n }\n}\n\n/* ===========================\n Responsive Design - Small Mobile\n =========================== */\n@media (max-width: 480px) {\n .test-run-header {\n padding: 12px;\n }\n\n .header-left {\n gap: 12px;\n }\n\n .status-indicator {\n width: 40px;\n height: 40px;\n font-size: 18px;\n border-radius: 8px;\n }\n\n .test-run-info h1 {\n font-size: 16px;\n }\n\n .metrics-bar {\n grid-template-columns: 1fr 1fr;\n }\n\n .metric-card {\n padding: 10px;\n flex-direction: column;\n text-align: center;\n }\n\n .metric-icon {\n margin-bottom: 8px;\n }\n\n .metric-label {\n font-size: 9px;\n }\n\n .metric-value {\n font-size: 14px;\n }\n\n .tabs {\n padding: 0 8px;\n }\n\n .tab {\n padding: 10px 12px;\n font-size: 12px;\n }\n\n .tab-badge {\n display: none;\n }\n\n .tab-content {\n padding: 12px;\n }\n\n .result-hero {\n padding: 20px 16px;\n }\n\n .result-icon {\n width: 56px;\n height: 56px;\n font-size: 28px;\n }\n\n .result-text h2 {\n font-size: 20px;\n }\n\n .result-score {\n font-size: 14px;\n }\n\n .result-checks {\n font-size: 12px;\n }\n\n .section-header h3 {\n font-size: 16px;\n }\n\n .check-item {\n flex-direction: column;\n gap: 8px;\n }\n\n .check-weight {\n text-align: left;\n }\n}\n\n/* ===========================\n Touch Device Optimizations\n =========================== */\n@media (hover: none) and (pointer: coarse) {\n .tab,\n .comparison-tab,\n .ai-run-card,\n .check-item,\n .feedback-item,\n .detail-card.clickable {\n -webkit-tap-highlight-color: transparent;\n }\n\n .ai-run-card:active,\n .detail-card.clickable:active {\n background: rgba(37, 99, 235, 0.1);\n transform: scale(0.98);\n }\n\n .tab:active {\n background: rgba(37, 99, 235, 0.1);\n }\n\n /* Larger touch targets */\n .tab {\n min-height: 48px;\n }\n\n .ai-run-card,\n .detail-card {\n min-height: 64px;\n }\n}\n\n/* ===========================\n High Contrast Mode\n =========================== */\n@media (prefers-contrast: high) {\n .status-badge {\n border: 2px solid currentColor;\n }\n\n .check-item {\n border-width: 2px;\n }\n\n .tab.active {\n border-bottom-width: 4px;\n }\n}\n\n/* ===========================\n Reduced Motion\n =========================== */\n@media (prefers-reduced-motion: reduce) {\n *,\n *::before,\n *::after {\n animation-duration: 0.01ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 0.01ms !important;\n }\n\n .skeleton-icon,\n .skeleton-avatar,\n .skeleton-line {\n animation: none;\n background: #e2e8f0;\n }\n\n .result-pulse {\n animation: none;\n display: none;\n }\n}\n\n/* ===========================\n Print Styles\n =========================== */\n@media print {\n .test-run-form {\n background: white;\n height: auto;\n }\n\n .header-actions,\n .tabs-container,\n .shortcuts-hint,\n .log-actions {\n display: none !important;\n }\n\n .tab-content {\n overflow: visible;\n padding: 0;\n }\n\n .result-hero,\n .check-results,\n .details-grid,\n .ai-section,\n .feedback-item {\n break-inside: avoid;\n box-shadow: none;\n border: 1px solid #ddd;\n }\n\n .comparison-content,\n .log-container {\n max-height: none;\n overflow: visible;\n }\n}\n\n/* ===========================\n Tags Bar - Sleek Inline Display\n =========================== */\n.tags-bar {\n margin-top: 16px;\n padding: 8px 14px;\n background: linear-gradient(135deg, rgba(37, 99, 235, 0.04) 0%, rgba(37, 99, 235, 0.08) 100%);\n border: 1px solid rgba(37, 99, 235, 0.15);\n border-radius: 8px;\n max-width: 600px;\n}\n\n.tags-bar-content {\n display: flex;\n align-items: center;\n gap: 10px;\n flex-wrap: wrap;\n}\n\n.tags-bar-label {\n color: var(--test-text-secondary);\n font-size: 14px;\n}\n\n.tags-bar-label i {\n opacity: 0.6;\n}\n\n.tags-bar-chips {\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n flex: 1;\n}\n\n.tag-inline {\n display: inline-flex;\n align-items: center;\n padding: 4px 10px;\n background: rgba(37, 99, 235, 0.1);\n color: var(--test-primary);\n border-radius: 12px;\n font-size: 11px;\n font-weight: 500;\n letter-spacing: 0.01em;\n}\n\n.tags-bar-empty {\n font-size: 12px;\n color: var(--test-text-secondary);\n opacity: 0.7;\n flex: 1;\n}\n\n.tags-bar-edit {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 4px 10px;\n background: transparent;\n border: 1px dashed var(--test-border);\n border-radius: 12px;\n font-size: 11px;\n font-weight: 500;\n color: var(--test-text-secondary);\n cursor: pointer;\n transition: var(--test-transition);\n}\n\n.tags-bar-edit:hover {\n border-color: var(--test-primary);\n color: var(--test-primary);\n background: rgba(37, 99, 235, 0.05);\n}\n\n.tags-bar-edit i {\n font-size: 10px;\n}\n\n/* ===========================\n Tags Editor Panel - Expanded Edit Mode\n =========================== */\n.tags-editor-panel {\n margin-top: 16px;\n background: var(--test-surface);\n border: 1px solid var(--test-primary);\n border-radius: var(--test-radius-md);\n overflow: hidden;\n box-shadow: 0 4px 12px rgba(37, 99, 235, 0.1);\n max-width: 600px;\n}\n\n.tags-editor-header {\n display: flex;\n align-items: center;\n padding: 12px 16px;\n background: rgba(37, 99, 235, 0.08);\n border-bottom: 1px solid rgba(37, 99, 235, 0.2);\n}\n\n.tags-editor-title {\n font-size: 13px;\n font-weight: 600;\n color: var(--test-primary);\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.tags-editor-body {\n padding: 16px;\n display: flex;\n flex-direction: column;\n gap: 12px;\n}\n\n.tags-editor-chips {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n min-height: 32px;\n}\n\n.tag-editable {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 5px 8px 5px 12px;\n background: var(--test-surface);\n border: 1px solid var(--test-primary);\n color: var(--test-primary);\n border-radius: 14px;\n font-size: 12px;\n font-weight: 500;\n}\n\n.tag-remove-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 16px;\n height: 16px;\n background: transparent;\n border: none;\n color: var(--test-primary);\n cursor: pointer;\n border-radius: 50%;\n font-size: 9px;\n opacity: 0.6;\n transition: var(--test-transition);\n}\n\n.tag-remove-btn:hover {\n opacity: 1;\n background: var(--test-error-light);\n color: var(--test-error);\n}\n\n.tags-empty-hint {\n font-size: 12px;\n color: var(--test-text-secondary);\n font-style: italic;\n padding: 4px 0;\n}\n\n.tags-editor-input {\n display: flex;\n gap: 8px;\n align-items: center;\n}\n\n.tag-text-input {\n flex: 1;\n padding: 10px 14px;\n border: 1px solid var(--test-border);\n border-radius: 8px;\n font-size: 13px;\n background: var(--test-bg);\n}\n\n.tag-text-input:focus {\n outline: none;\n border-color: var(--test-primary);\n background: var(--test-surface);\n box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);\n}\n\n.tag-text-input::placeholder {\n color: var(--test-text-secondary);\n opacity: 0.6;\n}\n\n.tags-editor-footer {\n display: flex;\n justify-content: flex-start;\n gap: 8px;\n padding: 12px 16px;\n background: var(--test-bg);\n border-top: 1px solid var(--test-border);\n}\n\n/* Mobile Responsive for Tags */\n@media (max-width: 768px) {\n .tags-bar {\n padding: 8px 12px;\n }\n\n .tags-bar-content {\n gap: 8px;\n }\n\n .tag-inline {\n padding: 3px 8px;\n font-size: 10px;\n }\n\n .tags-editor-panel {\n margin-top: 12px;\n }\n\n .tags-editor-body {\n padding: 12px;\n }\n\n .tags-editor-footer {\n padding: 10px 12px;\n }\n}\n"] }]
1580
+ args: [{ standalone: false, selector: 'mj-test-run-form', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"test-run-form\" [class.is-mobile]=\"false\">\n <!-- Error State -->\n @if (error) {\n <div class=\"error-banner\" (click)=\"retryLoad()\">\n <i class=\"fas fa-exclamation-triangle\"></i>\n <span>{{ error }}</span>\n <button class=\"retry-btn\">\n <i class=\"fas fa-redo\"></i> Retry\n </button>\n </div>\n }\n\n <!-- Header Section -->\n <div class=\"test-run-header\" [class]=\"getStatusClass()\">\n <!-- Breadcrumb Navigation -->\n <nav class=\"breadcrumb\" aria-label=\"Breadcrumb\">\n <ol>\n <li>\n <a href=\"javascript:void(0)\" (click)=\"navigateToTestingDashboard()\">\n <i class=\"fas fa-vial\"></i>\n <span class=\"breadcrumb-text\">Testing</span>\n </a>\n </li>\n @if (test) {\n <li>\n <i class=\"fas fa-chevron-right separator\"></i>\n <a href=\"javascript:void(0)\" (click)=\"openTest()\">\n <i class=\"fas fa-flask\"></i>\n <span class=\"breadcrumb-text\">{{ test.Name }}</span>\n </a>\n </li>\n }\n <li class=\"current\">\n <i class=\"fas fa-chevron-right separator\"></i>\n <span>Run #{{ record.ID.substring(0, 8) }}</span>\n </li>\n </ol>\n </nav>\n\n <div class=\"header-content\">\n <div class=\"header-left\">\n <!-- Status Indicator -->\n <div class=\"status-indicator\" [style.background-color]=\"getStatusColor()\">\n <i class=\"fas\" [ngClass]=\"getStatusIcon()\"></i>\n </div>\n\n <div class=\"test-run-info\">\n <h1>\n Test Run\n <span class=\"run-id\">#{{ record.ID.substring(0, 8) }}</span>\n </h1>\n <div class=\"test-run-meta\">\n <span class=\"status-badge\" [style.background-color]=\"getStatusColor()\">\n {{ record.Status }}\n </span>\n @if (test) {\n <span class=\"meta-item\">\n <i class=\"fas fa-flask\"></i>\n {{ test.Type }}\n </span>\n }\n @if (autoRefreshEnabled) {\n <span class=\"meta-item\">\n <i class=\"fas fa-sync-alt fa-spin\"></i>\n Auto-refreshing\n </span>\n }\n </div>\n </div>\n </div>\n\n <div class=\"header-actions\">\n <button kendoButton (click)=\"reRunTest()\" [disabled]=\"!record.TestID\" title=\"Re-run this test (Cmd+Shift+R)\">\n <i class=\"fas fa-redo\"></i>\n <span class=\"btn-text\">Re-run</span>\n </button>\n <button kendoButton (click)=\"refresh()\" [disabled]=\"isRefreshing\" title=\"Refresh (Cmd+R)\">\n <i class=\"fas fa-sync-alt\" [class.fa-spin]=\"isRefreshing\"></i>\n <span class=\"btn-text\">Refresh</span>\n </button>\n </div>\n </div>\n\n <!-- Metrics Bar -->\n <div class=\"metrics-bar\">\n <div class=\"metric-card\">\n <div class=\"metric-icon\">\n <i class=\"fas fa-clock\"></i>\n </div>\n <div class=\"metric-content\">\n <div class=\"metric-label\">Started</div>\n <div class=\"metric-value\">{{ getRelativeTime(record.StartedAt) }}</div>\n <div class=\"metric-detail\">{{ record.StartedAt | date:'short' }}</div>\n </div>\n </div>\n\n <div class=\"metric-card\">\n <div class=\"metric-icon\">\n <i class=\"fas fa-stopwatch\"></i>\n </div>\n <div class=\"metric-content\">\n <div class=\"metric-label\">Duration</div>\n <div class=\"metric-value\">{{ calculateDuration() }}</div>\n </div>\n </div>\n\n <div class=\"metric-card\">\n <div class=\"metric-icon\">\n <i class=\"fas fa-star\"></i>\n </div>\n <div class=\"metric-content\">\n <div class=\"metric-label\">Score</div>\n <div class=\"metric-value\">{{ formatScore(record.Score) }}</div>\n @if (record.Score != null) {\n <div class=\"metric-progress\">\n <div class=\"progress-bar\" [style.width.%]=\"getScorePercentage()\" [style.background-color]=\"getStatusColor()\"></div>\n </div>\n }\n </div>\n </div>\n\n <div class=\"metric-card\">\n <div class=\"metric-icon\">\n <i class=\"fas fa-check-double\"></i>\n </div>\n <div class=\"metric-content\">\n <div class=\"metric-label\">Checks</div>\n <div class=\"metric-value\">{{ record.PassedChecks }}/{{ record.TotalChecks }}</div>\n @if (record.TotalChecks) {\n <div class=\"metric-progress\">\n <div class=\"progress-bar\" [style.width.%]=\"getPassRatePercentage()\" [style.background-color]=\"getStatusColor()\"></div>\n </div>\n }\n </div>\n </div>\n\n <div class=\"metric-card\">\n <div class=\"metric-icon\">\n <i class=\"fas fa-dollar-sign\"></i>\n </div>\n <div class=\"metric-content\">\n <div class=\"metric-label\">Cost</div>\n <div class=\"metric-value\">{{ formatCost(record.CostUSD) }}</div>\n </div>\n </div>\n </div>\n\n <!-- Secondary Info -->\n @if (record.RunByUser || testSuiteRun || record.TargetLogEntityID) {\n <div class=\"secondary-info\">\n @if (record.RunByUser) {\n <span class=\"info-chip\">\n <i class=\"fas fa-user\"></i>\n {{ record.RunByUser }}\n </span>\n }\n @if (testSuiteRun) {\n <span class=\"info-chip clickable\" (click)=\"openTestSuiteRun()\">\n <i class=\"fas fa-layer-group\"></i>\n Part of Suite Run (Seq: {{ record.Sequence }})\n </span>\n }\n <!-- Target Entity Link Pill -->\n @if (record.TargetLogEntityID && record.TargetLogID) {\n <mj-entity-link-pill\n [entityName]=\"record.TargetLogEntity\"\n [recordId]=\"record.TargetLogID\">\n </mj-entity-link-pill>\n }\n </div>\n }\n\n <!-- Tags Section - Sleek inline design -->\n @if (!editingTags) {\n <div class=\"tags-bar\">\n <div class=\"tags-bar-content\">\n <span class=\"tags-bar-label\"><i class=\"fas fa-tags\"></i></span>\n @if (tags.length > 0) {\n <div class=\"tags-bar-chips\">\n @for (tag of tags; track tag) {\n <span class=\"tag-inline\">{{ tag }}</span>\n }\n </div>\n }\n @if (tags.length === 0) {\n <span class=\"tags-bar-empty\">No tags</span>\n }\n <button class=\"tags-bar-edit\" (click)=\"startEditingTags()\" title=\"Edit tags\">\n <i class=\"fas fa-plus\"></i> Add\n </button>\n </div>\n </div>\n }\n\n <!-- Tags Editor - Expanded when editing -->\n @if (editingTags) {\n <div class=\"tags-editor-panel\">\n <div class=\"tags-editor-header\">\n <span class=\"tags-editor-title\"><i class=\"fas fa-tags\"></i> Edit Tags</span>\n </div>\n <div class=\"tags-editor-body\">\n <div class=\"tags-editor-chips\">\n @for (tag of tags; track tag) {\n <span class=\"tag-editable\">\n {{ tag }}\n <button class=\"tag-remove-btn\" (click)=\"removeTag(tag)\" title=\"Remove tag\">\n <i class=\"fas fa-times\"></i>\n </button>\n </span>\n }\n @if (tags.length === 0) {\n <span class=\"tags-empty-hint\">No tags yet</span>\n }\n </div>\n <div class=\"tags-editor-input\">\n <input type=\"text\"\n [(ngModel)]=\"newTag\"\n placeholder=\"Type a tag and press Enter...\"\n (keyup.enter)=\"addTag()\"\n class=\"tag-text-input\" />\n <button kendoButton (click)=\"addTag()\" [disabled]=\"!newTag.trim()\" fillMode=\"flat\">\n <i class=\"fas fa-plus\"></i>\n </button>\n </div>\n </div>\n <div class=\"tags-editor-footer\">\n <button kendoButton (click)=\"saveTags()\" themeColor=\"primary\" [disabled]=\"savingTags\">\n @if (savingTags) {\n <i class=\"fas fa-spinner fa-spin\"></i>\n }\n {{ savingTags ? 'Saving...' : 'Save' }}\n </button>\n <button kendoButton (click)=\"cancelEditingTags()\" fillMode=\"flat\">Cancel</button>\n </div>\n </div>\n }\n </div>\n\n <!-- Tabs -->\n <div class=\"tabs-container\">\n <div class=\"tabs\" role=\"tablist\">\n <button class=\"tab\" [class.active]=\"activeTab === 'overview'\" (click)=\"changeTab('overview')\"\n role=\"tab\" [attr.aria-selected]=\"activeTab === 'overview'\" title=\"Press 1\">\n <i class=\"fas fa-chart-pie\"></i>\n <span>Overview</span>\n </button>\n <button class=\"tab\" [class.active]=\"activeTab === 'details'\" (click)=\"changeTab('details')\"\n role=\"tab\" [attr.aria-selected]=\"activeTab === 'details'\" title=\"Press 2\">\n <i class=\"fas fa-info-circle\"></i>\n <span>Details</span>\n </button>\n <button class=\"tab\" [class.active]=\"activeTab === 'ai-runs'\" (click)=\"changeTab('ai-runs')\"\n role=\"tab\" [attr.aria-selected]=\"activeTab === 'ai-runs'\" title=\"Press 3\">\n <i class=\"fas fa-robot\"></i>\n <span>AI Runs</span>\n @if (aiRunsLoaded) {\n <span class=\"tab-badge\">{{ aiAgentRuns.length + aiPromptRuns.length }}</span>\n }\n </button>\n <button class=\"tab\" [class.active]=\"activeTab === 'feedback'\" (click)=\"changeTab('feedback')\"\n role=\"tab\" [attr.aria-selected]=\"activeTab === 'feedback'\" title=\"Press 4\">\n <i class=\"fas fa-comments\"></i>\n <span>Feedback</span>\n @if (feedbackLoaded) {\n <span class=\"tab-badge\">{{ feedbacks.length }}</span>\n }\n </button>\n <button class=\"tab\" [class.active]=\"activeTab === 'execution'\" (click)=\"changeTab('execution')\"\n role=\"tab\" [attr.aria-selected]=\"activeTab === 'execution'\" title=\"Press 5\">\n <i class=\"fas fa-microchip\"></i>\n <span>Execution</span>\n </button>\n @if (record.Log) {\n <button class=\"tab\" [class.active]=\"activeTab === 'log'\" (click)=\"changeTab('log')\"\n role=\"tab\" [attr.aria-selected]=\"activeTab === 'log'\" title=\"Press 6\">\n <i class=\"fas fa-terminal\"></i>\n <span>Log</span>\n </button>\n }\n </div>\n </div>\n\n <!-- Tab Content -->\n <div class=\"tab-content\">\n <!-- Overview Tab -->\n @if (activeTab === 'overview') {\n <div class=\"overview-tab\" [@fadeIn]>\n <!-- Result Hero -->\n <div class=\"result-hero\" [class]=\"getStatusClass()\">\n <div class=\"result-icon-wrapper\">\n <div class=\"result-icon\">\n <i class=\"fas\" [ngClass]=\"getStatusIcon()\"></i>\n </div>\n @if (record.Status === 'Running') {\n <div class=\"result-pulse\"></div>\n }\n </div>\n <div class=\"result-text\">\n <h2>TEST {{ record.Status.toUpperCase() }}</h2>\n <div class=\"result-details\">\n <span class=\"result-score\">Score: {{ formatScore(record.Score) }}</span>\n <span class=\"result-divider\">|</span>\n <span class=\"result-checks\">{{ record.PassedChecks }} of {{ record.TotalChecks }} checks passed</span>\n </div>\n </div>\n </div>\n <!-- Check Results -->\n @if (getCheckResults().length > 0) {\n <div class=\"check-results\">\n <div class=\"section-header\">\n <h3><i class=\"fas fa-tasks\"></i> Check Results</h3>\n <span class=\"check-summary\">{{ record.PassedChecks }} passed, {{ record.FailedChecks }} failed</span>\n </div>\n <div class=\"check-list\">\n @for (check of getCheckResults(); track check; let i = $index) {\n <div class=\"check-item\"\n [class.passed]=\"check.passed\" [class.failed]=\"!check.passed\"\n [style.animation-delay.ms]=\"i * 50\">\n <div class=\"check-status\">\n <i class=\"fas\" [class.fa-check-circle]=\"check.passed\" [class.fa-times-circle]=\"!check.passed\"></i>\n </div>\n <div class=\"check-content\">\n <div class=\"check-name\">{{ check.name }}</div>\n @if (check.message) {\n <div class=\"check-message\">{{ check.message }}</div>\n }\n </div>\n @if (check.weight) {\n <div class=\"check-weight\">\n <span class=\"weight-label\">Weight:</span> {{ check.weight }}\n </div>\n }\n </div>\n }\n </div>\n </div>\n }\n <!-- Data Comparison -->\n <div class=\"comparison-section\">\n <div class=\"section-header\">\n <h3><i class=\"fas fa-exchange-alt\"></i> Data Comparison</h3>\n </div>\n <div class=\"comparison-tabs\">\n <button class=\"comparison-tab\" [class.active]=\"comparisonView === 'input'\" (click)=\"setComparisonView('input')\">\n <i class=\"fas fa-sign-in-alt\"></i> Input\n </button>\n <button class=\"comparison-tab\" [class.active]=\"comparisonView === 'expected'\" (click)=\"setComparisonView('expected')\">\n <i class=\"fas fa-bullseye\"></i> Expected\n </button>\n <button class=\"comparison-tab\" [class.active]=\"comparisonView === 'actual'\" (click)=\"setComparisonView('actual')\">\n <i class=\"fas fa-check-square\"></i> Actual\n </button>\n </div>\n <div class=\"comparison-content\">\n <mj-code-editor\n [value]=\"getComparisonData()\"\n language=\"json\"\n [readonly]=\"true\"\n [toolbar]=\"jsonToolbar\"\n [lineWrapping]=\"true\">\n </mj-code-editor>\n </div>\n </div>\n </div>\n }\n\n <!-- Details Tab -->\n @if (activeTab === 'details') {\n <div class=\"details-tab\" [@fadeIn]>\n <div class=\"details-grid\">\n <div class=\"detail-card\">\n <div class=\"detail-icon\"><i class=\"fas fa-fingerprint\"></i></div>\n <div class=\"detail-content\">\n <div class=\"detail-label\">Test Run ID</div>\n <div class=\"detail-value monospace\">{{ record.ID }}</div>\n </div>\n </div>\n @if (test) {\n <div class=\"detail-card clickable\" (click)=\"openTest()\">\n <div class=\"detail-icon\"><i class=\"fas fa-flask\"></i></div>\n <div class=\"detail-content\">\n <div class=\"detail-label\">Test</div>\n <div class=\"detail-value link\">{{ test.Name }}</div>\n </div>\n <i class=\"fas fa-external-link-alt detail-action\"></i>\n </div>\n }\n <div class=\"detail-card\">\n <div class=\"detail-icon\"><i class=\"fas fa-tag\"></i></div>\n <div class=\"detail-content\">\n <div class=\"detail-label\">Target Type</div>\n <div class=\"detail-value\">{{ record.TargetType || 'N/A' }}</div>\n </div>\n </div>\n <div class=\"detail-card\">\n <div class=\"detail-icon\"><i class=\"fas fa-play-circle\"></i></div>\n <div class=\"detail-content\">\n <div class=\"detail-label\">Started At</div>\n <div class=\"detail-value\">{{ record.StartedAt | date:'medium' }}</div>\n </div>\n </div>\n <div class=\"detail-card\">\n <div class=\"detail-icon\"><i class=\"fas fa-stop-circle\"></i></div>\n <div class=\"detail-content\">\n <div class=\"detail-label\">Completed At</div>\n <div class=\"detail-value\">{{ record.CompletedAt | date:'medium' }}</div>\n </div>\n </div>\n <div class=\"detail-card\">\n <div class=\"detail-icon\"><i class=\"fas fa-hourglass-half\"></i></div>\n <div class=\"detail-content\">\n <div class=\"detail-label\">Duration</div>\n <div class=\"detail-value\">{{ calculateDuration() }}</div>\n </div>\n </div>\n </div>\n <!-- Error Message -->\n @if (record.ErrorMessage) {\n <div class=\"error-section\">\n <div class=\"section-header error\">\n <h3><i class=\"fas fa-exclamation-triangle\"></i> Error Message</h3>\n </div>\n <div class=\"error-content\">\n <mj-code-editor\n [value]=\"record.ErrorMessage\"\n [readonly]=\"true\"\n [toolbar]=\"jsonToolbar\"\n [lineWrapping]=\"true\">\n </mj-code-editor>\n </div>\n </div>\n }\n <!-- Result Details -->\n @if (parsedData.resultDetails) {\n <div class=\"result-details-section\">\n <div class=\"section-header\">\n <h3><i class=\"fas fa-file-code\"></i> Result Details</h3>\n </div>\n <div class=\"result-details-content\">\n <mj-code-editor\n [value]=\"getFormattedResultDetails()\"\n language=\"json\"\n [readonly]=\"true\"\n [toolbar]=\"jsonToolbar\"\n [lineWrapping]=\"true\">\n </mj-code-editor>\n </div>\n </div>\n }\n </div>\n }\n\n <!-- AI Runs Tab -->\n @if (activeTab === 'ai-runs') {\n <div class=\"ai-runs-tab\" [@fadeIn]>\n <!-- Loading State -->\n @if (loadingAIRuns) {\n <div class=\"loading-state\">\n <div class=\"skeleton-list\">\n @for (i of [1,2,3]; track i) {\n <div class=\"skeleton-card\">\n <div class=\"skeleton-icon\"></div>\n <div class=\"skeleton-content\">\n <div class=\"skeleton-line wide\"></div>\n <div class=\"skeleton-line narrow\"></div>\n </div>\n </div>\n }\n </div>\n </div>\n }\n <!-- AI Agent Runs -->\n @if (!loadingAIRuns && aiAgentRuns.length > 0) {\n <div class=\"ai-section\">\n <div class=\"section-header\">\n <h3><i class=\"fas fa-robot\"></i> AI Agent Runs</h3>\n <span class=\"count-badge\">{{ aiAgentRuns.length }}</span>\n </div>\n <div class=\"ai-run-list\">\n @for (run of aiAgentRuns; track run) {\n <div class=\"ai-run-card\" (click)=\"openAIAgentRun(run.ID)\">\n <div class=\"ai-run-icon agent\">\n <i class=\"fas fa-robot\"></i>\n </div>\n <div class=\"ai-run-content\">\n <div class=\"ai-run-name\">{{ run.Agent }}</div>\n <div class=\"ai-run-meta\">\n <span class=\"status-chip\" [class]=\"run.Status.toLowerCase()\">{{ run.Status }}</span>\n @if (run.TotalCost) {\n <span class=\"cost-chip\">\n <i class=\"fas fa-dollar-sign\"></i> {{ run.TotalCost | number:'1.4-4' }}\n </span>\n }\n </div>\n </div>\n <i class=\"fas fa-chevron-right ai-run-arrow\"></i>\n </div>\n }\n </div>\n </div>\n }\n <!-- AI Prompt Runs -->\n @if (!loadingAIRuns && aiPromptRuns.length > 0) {\n <div class=\"ai-section\">\n <div class=\"section-header\">\n <h3><i class=\"fas fa-comment-dots\"></i> AI Prompt Runs</h3>\n <span class=\"count-badge\">{{ aiPromptRuns.length }}</span>\n </div>\n <div class=\"ai-run-list\">\n @for (run of aiPromptRuns; track run) {\n <div class=\"ai-run-card\" (click)=\"openAIPromptRun(run.ID)\">\n <div class=\"ai-run-icon prompt\">\n <i class=\"fas fa-comment-dots\"></i>\n </div>\n <div class=\"ai-run-content\">\n <div class=\"ai-run-name\">{{ run.Prompt || run.Model }}</div>\n <div class=\"ai-run-meta\">\n @if (run.TotalCost) {\n <span class=\"cost-chip\">\n <i class=\"fas fa-dollar-sign\"></i> {{ run.TotalCost | number:'1.4-4' }}\n </span>\n }\n </div>\n </div>\n <i class=\"fas fa-chevron-right ai-run-arrow\"></i>\n </div>\n }\n </div>\n </div>\n }\n <!-- Empty State -->\n @if (aiRunsLoaded && aiAgentRuns.length === 0 && aiPromptRuns.length === 0) {\n <div class=\"empty-state\">\n <div class=\"empty-icon\">\n <i class=\"fas fa-robot\"></i>\n </div>\n <h3>No AI Runs</h3>\n <p>This test execution didn't involve any AI agent or prompt runs.</p>\n </div>\n }\n </div>\n }\n\n <!-- Feedback Tab -->\n @if (activeTab === 'feedback') {\n <div class=\"feedback-tab\" [@fadeIn]>\n <!-- Loading State -->\n @if (loadingFeedback) {\n <div class=\"loading-state\">\n <div class=\"skeleton-list\">\n @for (i of [1,2]; track i) {\n <div class=\"skeleton-card\">\n <div class=\"skeleton-avatar\"></div>\n <div class=\"skeleton-content\">\n <div class=\"skeleton-line wide\"></div>\n <div class=\"skeleton-line narrow\"></div>\n <div class=\"skeleton-line medium\"></div>\n </div>\n </div>\n }\n </div>\n </div>\n }\n <!-- Feedback List -->\n @if (!loadingFeedback && feedbacks.length > 0) {\n <div class=\"feedback-list\">\n @for (feedback of feedbacks; track feedback) {\n <div class=\"feedback-item\">\n <div class=\"feedback-header\">\n <div class=\"feedback-user\">\n <div class=\"user-avatar\">\n <i class=\"fas fa-user\"></i>\n </div>\n <span class=\"user-name\">{{ feedback.ReviewerUser }}</span>\n </div>\n <div class=\"feedback-date\">\n {{ getRelativeTime(feedback.__mj_CreatedAt) }}\n </div>\n </div>\n <div class=\"feedback-body\">\n <div class=\"feedback-rating\">\n <div class=\"rating-stars\">\n @for (s of [1,2,3,4,5,6,7,8,9,10]; track s) {\n <i class=\"fas fa-star\"\n [class.filled]=\"s <= (feedback.Rating || 0)\"></i>\n }\n </div>\n <span class=\"rating-value\">{{ feedback.Rating }}/10</span>\n </div>\n @if (feedback.IsCorrect !== null) {\n <div class=\"feedback-verdict\">\n <span class=\"verdict-badge\" [class.correct]=\"feedback.IsCorrect\" [class.incorrect]=\"!feedback.IsCorrect\">\n <i class=\"fas\" [class.fa-check]=\"feedback.IsCorrect\" [class.fa-times]=\"!feedback.IsCorrect\"></i>\n {{ feedback.IsCorrect ? 'Marked Correct' : 'Marked Incorrect' }}\n </span>\n </div>\n }\n @if (feedback.CorrectionSummary) {\n <div class=\"feedback-comments\">\n <p>{{ feedback.CorrectionSummary }}</p>\n </div>\n }\n </div>\n </div>\n }\n </div>\n }\n <!-- Empty State -->\n @if (feedbackLoaded && feedbacks.length === 0) {\n <div class=\"empty-state\">\n <div class=\"empty-icon\">\n <i class=\"fas fa-comments\"></i>\n </div>\n <h3>No Feedback Yet</h3>\n <p>No one has reviewed this test run yet. Be the first to provide feedback!</p>\n </div>\n }\n </div>\n }\n\n <!-- Execution Context Tab -->\n @if (activeTab === 'execution') {\n <div class=\"execution-tab\" [@fadeIn]>\n <mj-execution-context\n [machineName]=\"record.MachineName\"\n [machineId]=\"record.MachineID\"\n [runByUserName]=\"record.RunByUserName\"\n [runByUserEmail]=\"record.RunByUserEmail\"\n [runContextDetailsJson]=\"record.RunContextDetails\">\n </mj-execution-context>\n </div>\n }\n\n <!-- Execution Log Tab -->\n @if (activeTab === 'log') {\n <div class=\"log-tab\" [@fadeIn]>\n <div class=\"log-header\">\n <div class=\"log-title\">\n <i class=\"fas fa-terminal\"></i>\n <h3>Execution Log</h3>\n </div>\n <div class=\"log-actions\">\n <button kendoButton (click)=\"copyLogToClipboard()\" look=\"flat\">\n <i class=\"fas fa-copy\"></i>\n <span class=\"btn-text\">Copy</span>\n </button>\n </div>\n </div>\n <div class=\"log-container\">\n <mj-code-editor\n [value]=\"record.Log || ''\"\n [readonly]=\"true\"\n [toolbar]=\"jsonToolbar\"\n [lineWrapping]=\"true\">\n </mj-code-editor>\n </div>\n </div>\n }\n </div>\n\n <!-- Keyboard Shortcuts Help (shown on hover of ? icon) -->\n <div class=\"shortcuts-hint\" title=\"Keyboard Shortcuts\">\n <i class=\"fas fa-keyboard\"></i>\n <div class=\"shortcuts-popup\">\n <h4>Keyboard Shortcuts</h4>\n <ul>\n <li><kbd>1-6</kbd> Switch tabs</li>\n <li><kbd>Cmd+R</kbd> Refresh</li>\n <li><kbd>Cmd+Shift+R</kbd> Re-run test</li>\n </ul>\n </div>\n </div>\n</div>\n", styles: ["/* ===========================\n Test Run Form - World-Class UX\n Premium Testing Dashboard Styles\n =========================== */\n\n/* CSS Custom Properties for Theming - using :host for Angular encapsulation */\n:host {\n --test-primary: var(--mj-brand-primary);\n --test-primary-light: var(--mj-brand-primary);\n --test-primary-dark: var(--mj-brand-primary-hover);\n --test-success: var(--mj-status-success);\n --test-success-light: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n --test-error: var(--mj-status-error);\n --test-error-light: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n --test-warning: var(--mj-status-warning);\n --test-warning-light: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n --test-timeout: var(--mj-status-warning);\n --test-timeout-light: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n --test-running: var(--mj-brand-primary);\n --test-pending: var(--mj-brand-primary);\n --test-skipped: var(--mj-text-muted);\n --test-bg: var(--mj-bg-surface-card);\n --test-surface: var(--mj-bg-surface);\n --test-border: var(--mj-border-default);\n --test-text: var(--mj-text-primary);\n --test-text-secondary: var(--mj-text-muted);\n --test-text-muted: var(--mj-text-disabled);\n --test-radius-sm: 6px;\n --test-radius-md: 10px;\n --test-radius-lg: 16px;\n --test-shadow-sm: var(--mj-shadow-sm);\n --test-shadow-md: var(--mj-shadow-md);\n --test-shadow-lg: var(--mj-shadow-lg);\n --test-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n display: block;\n height: 100%;\n}\n\n/* Base Container */\n.test-run-form {\n display: flex;\n flex-direction: column;\n height: 100%;\n background: var(--test-bg);\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n/* ===========================\n Error Banner\n =========================== */\n.error-banner {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 12px;\n padding: 12px 20px;\n background: var(--test-error);\n color: var(--mj-text-inverse);\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n transition: var(--test-transition);\n animation: slideDown 0.3s ease-out;\n}\n\n.error-banner:hover {\n background: var(--mj-status-error);\n}\n\n.error-banner i {\n font-size: 16px;\n}\n\n.retry-btn {\n background: rgba(255, 255, 255, 0.2);\n border: 1px solid rgba(255, 255, 255, 0.3);\n color: var(--mj-text-inverse);\n padding: 6px 12px;\n border-radius: var(--test-radius-sm);\n cursor: pointer;\n font-size: 12px;\n font-weight: 600;\n transition: var(--test-transition);\n}\n\n.retry-btn:hover {\n background: rgba(255, 255, 255, 0.3);\n}\n\n@keyframes slideDown {\n from {\n transform: translateY(-100%);\n opacity: 0;\n }\n to {\n transform: translateY(0);\n opacity: 1;\n }\n}\n\n/* ===========================\n Header Section\n =========================== */\n.test-run-header {\n background: var(--test-surface);\n border-bottom: 1px solid var(--test-border);\n padding: 20px;\n position: relative;\n}\n\n/* Breadcrumb */\n.breadcrumb {\n margin-bottom: 16px;\n}\n\n.breadcrumb ol {\n display: flex;\n align-items: center;\n gap: 4px;\n list-style: none;\n margin: 0;\n padding: 0;\n font-size: 13px;\n flex-wrap: wrap;\n}\n\n.breadcrumb li {\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.breadcrumb a {\n color: var(--test-primary);\n text-decoration: none;\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 4px 8px;\n border-radius: var(--test-radius-sm);\n transition: var(--test-transition);\n}\n\n.breadcrumb a:hover {\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n text-decoration: none;\n}\n\n.breadcrumb .separator {\n font-size: 10px;\n color: var(--test-text-muted);\n margin: 0 4px;\n}\n\n.breadcrumb .current {\n color: var(--test-text-secondary);\n font-weight: 500;\n}\n\n.breadcrumb-text {\n max-width: 200px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n/* Header Content */\n.header-content {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n margin-bottom: 20px;\n gap: 16px;\n}\n\n.header-left {\n display: flex;\n gap: 16px;\n flex: 1;\n min-width: 0;\n}\n\n/* Status Indicator */\n.status-indicator {\n width: 56px;\n height: 56px;\n border-radius: var(--test-radius-md);\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--mj-text-inverse);\n font-size: 24px;\n flex-shrink: 0;\n box-shadow: var(--test-shadow-md);\n transition: var(--test-transition);\n}\n\n.status-indicator:hover {\n transform: scale(1.05);\n}\n\n/* Test Run Info */\n.test-run-info {\n flex: 1;\n min-width: 0;\n}\n\n.test-run-info h1 {\n margin: 0 0 8px 0;\n font-size: clamp(18px, 4vw, 24px);\n font-weight: 700;\n color: var(--test-text);\n line-height: 1.2;\n word-wrap: break-word;\n}\n\n.test-run-info h1 .run-id {\n color: var(--test-text-secondary);\n font-weight: 500;\n}\n\n.test-run-meta {\n display: flex;\n align-items: center;\n gap: 12px;\n flex-wrap: wrap;\n}\n\n/* Status Badge */\n.status-badge {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 6px 14px;\n border-radius: 20px;\n color: var(--mj-text-inverse);\n font-size: 12px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n box-shadow: var(--test-shadow-sm);\n}\n\n/* Meta Item */\n.meta-item {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n font-size: 14px;\n color: var(--test-text-secondary);\n}\n\n.meta-item i {\n font-size: 12px;\n}\n\n/* Header Actions */\n.header-actions {\n display: flex;\n gap: 8px;\n flex-shrink: 0;\n}\n\n.header-actions button {\n white-space: nowrap;\n}\n\n.btn-text {\n margin-left: 6px;\n}\n\n/* ===========================\n Metrics Bar\n =========================== */\n.metrics-bar {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));\n gap: 12px;\n margin-bottom: 16px;\n}\n\n.metric-card {\n display: flex;\n align-items: center;\n gap: 12px;\n background: var(--mj-bg-surface-sunken);\n border: 1px solid var(--test-border);\n border-radius: var(--test-radius-md);\n padding: 14px;\n transition: var(--test-transition);\n}\n\n.metric-card:hover {\n transform: translateY(-2px);\n box-shadow: var(--test-shadow-md);\n}\n\n.metric-icon {\n width: 40px;\n height: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--test-surface);\n border-radius: var(--test-radius-sm);\n color: var(--test-primary);\n font-size: 16px;\n flex-shrink: 0;\n}\n\n.metric-content {\n flex: 1;\n min-width: 0;\n}\n\n.metric-label {\n font-size: 10px;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n color: var(--test-text-muted);\n margin-bottom: 4px;\n}\n\n.metric-value {\n font-size: 16px;\n font-weight: 700;\n color: var(--test-text);\n}\n\n.metric-detail {\n font-size: 11px;\n color: var(--test-text-muted);\n margin-top: 2px;\n}\n\n/* Progress bar in metric card */\n.metric-progress {\n margin-top: 6px;\n height: 4px;\n background: var(--test-border);\n border-radius: 2px;\n overflow: hidden;\n}\n\n.progress-bar {\n height: 100%;\n border-radius: 2px;\n transition: width 0.5s ease-out;\n}\n\n/* Secondary Info */\n.secondary-info {\n display: flex;\n gap: 12px;\n padding-top: 16px;\n border-top: 1px solid var(--test-border);\n flex-wrap: wrap;\n}\n\n.info-chip {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n font-size: 13px;\n color: var(--test-text-secondary);\n padding: 6px 12px;\n background: var(--test-bg);\n border-radius: 20px;\n transition: var(--test-transition);\n}\n\n.info-chip i {\n font-size: 12px;\n}\n\n.info-chip.clickable {\n cursor: pointer;\n}\n\n.info-chip.clickable:hover {\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n color: var(--test-primary);\n}\n\n/* ===========================\n Tabs Navigation\n =========================== */\n.tabs-container {\n background: var(--test-surface);\n border-bottom: 1px solid var(--test-border);\n position: sticky;\n top: 0;\n z-index: 10;\n}\n\n.tabs {\n display: flex;\n padding: 0 20px;\n overflow-x: auto;\n -webkit-overflow-scrolling: touch;\n scrollbar-width: none;\n -ms-overflow-style: none;\n}\n\n.tabs::-webkit-scrollbar {\n display: none;\n}\n\n.tab {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 14px 18px;\n border: none;\n background: transparent;\n border-bottom: 3px solid transparent;\n color: var(--test-text-secondary);\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n transition: var(--test-transition);\n white-space: nowrap;\n position: relative;\n}\n\n.tab:hover {\n color: var(--test-primary);\n background: color-mix(in srgb, var(--mj-brand-primary) 5%, transparent);\n}\n\n.tab.active {\n color: var(--test-primary);\n border-bottom-color: var(--test-primary);\n font-weight: 600;\n}\n\n.tab i {\n font-size: 15px;\n}\n\n.tab-badge {\n background: var(--test-border);\n color: var(--test-text-secondary);\n padding: 2px 8px;\n border-radius: 10px;\n font-size: 11px;\n font-weight: 600;\n transition: var(--test-transition);\n}\n\n.tab.active .tab-badge {\n background: color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n color: var(--test-primary);\n}\n\n.shortcut-hint {\n font-size: 10px;\n color: var(--test-text-muted);\n background: var(--test-bg);\n padding: 2px 6px;\n border-radius: 4px;\n font-weight: 600;\n margin-left: 4px;\n font-family: -apple-system, BlinkMacSystemFont, sans-serif;\n}\n\n/* ===========================\n Tab Content Area\n =========================== */\n.tab-content {\n flex: 1;\n overflow-y: auto;\n padding: 20px;\n scroll-behavior: smooth;\n}\n\n/* ===========================\n Overview Tab\n =========================== */\n.overview-tab {\n display: flex;\n flex-direction: column;\n gap: 20px;\n animation: fadeIn 0.3s ease-out;\n}\n\n@keyframes fadeIn {\n from { opacity: 0; transform: translateY(10px); }\n to { opacity: 1; transform: translateY(0); }\n}\n\n/* Result Hero Card */\n.result-hero {\n background: var(--test-surface);\n border-radius: var(--test-radius-lg);\n padding: 32px;\n text-align: center;\n border: 2px solid var(--test-border);\n box-shadow: var(--test-shadow-sm);\n transition: var(--test-transition);\n}\n\n.result-hero.passed {\n background: var(--test-success-light);\n border-color: var(--test-success);\n}\n\n.result-hero.failed {\n background: var(--test-error-light);\n border-color: var(--test-error);\n}\n\n.result-hero.error {\n background: var(--test-warning-light);\n border-color: var(--test-warning);\n}\n\n.result-hero.timeout {\n background: var(--test-timeout-light);\n border-color: var(--test-timeout);\n}\n\n.result-hero.running,\n.result-hero.pending {\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n border-color: var(--test-primary-light);\n}\n\n.result-icon-wrapper {\n position: relative;\n display: inline-block;\n margin-bottom: 16px;\n}\n\n.result-icon {\n width: 80px;\n height: 80px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--test-surface);\n border-radius: 50%;\n font-size: 40px;\n margin: 0 auto;\n box-shadow: var(--test-shadow-md);\n}\n\n.result-hero.passed .result-icon { color: var(--test-success); }\n.result-hero.failed .result-icon { color: var(--test-error); }\n.result-hero.error .result-icon { color: var(--test-warning); }\n.result-hero.timeout .result-icon { color: var(--test-timeout); }\n.result-hero.running .result-icon,\n.result-hero.pending .result-icon { color: var(--test-primary); }\n\n.result-pulse {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 100px;\n height: 100px;\n border-radius: 50%;\n background: color-mix(in srgb, var(--mj-brand-primary) 20%, transparent);\n animation: pulse 2s ease-in-out infinite;\n}\n\n@keyframes pulse {\n 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }\n 50% { transform: translate(-50%, -50%) scale(1.2); opacity: 0; }\n}\n\n.result-text h2 {\n margin: 0 0 12px 0;\n font-size: clamp(24px, 5vw, 32px);\n font-weight: 800;\n color: var(--test-text);\n}\n\n.result-details {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 12px;\n flex-wrap: wrap;\n}\n\n.result-score {\n font-size: 18px;\n font-weight: 600;\n color: var(--test-text-secondary);\n}\n\n.result-divider {\n color: var(--test-border);\n}\n\n.result-checks {\n font-size: 16px;\n color: var(--test-text-muted);\n}\n\n/* Section Headers */\n.section-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 16px;\n gap: 12px;\n}\n\n.section-header h3 {\n margin: 0;\n font-size: 18px;\n font-weight: 700;\n color: var(--test-text);\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.section-header h3 i {\n color: var(--test-primary);\n}\n\n.section-header.error h3 i {\n color: var(--test-error);\n}\n\n.check-summary {\n font-size: 13px;\n color: var(--test-text-secondary);\n}\n\n/* Check Results Section */\n.check-results {\n background: var(--test-surface);\n border-radius: var(--test-radius-lg);\n padding: 24px;\n box-shadow: var(--test-shadow-sm);\n}\n\n.check-list {\n display: flex;\n flex-direction: column;\n gap: 10px;\n}\n\n.check-item {\n display: flex;\n gap: 12px;\n padding: 14px 16px;\n border-radius: var(--test-radius-md);\n border: 1px solid var(--test-border);\n transition: var(--test-transition);\n animation: fadeIn 0.3s ease-out backwards;\n}\n\n.check-item:hover {\n transform: translateX(4px);\n}\n\n.check-item.passed {\n background: color-mix(in srgb, var(--mj-status-success) 10%, var(--mj-bg-surface));\n border-color: color-mix(in srgb, var(--mj-status-success) 40%, var(--mj-bg-surface));\n}\n\n.check-item.failed {\n background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n border-color: color-mix(in srgb, var(--mj-status-error) 40%, var(--mj-bg-surface));\n}\n\n.check-status {\n font-size: 20px;\n flex-shrink: 0;\n margin-top: 2px;\n}\n\n.check-item.passed .check-status { color: var(--test-success); }\n.check-item.failed .check-status { color: var(--test-error); }\n\n.check-content {\n flex: 1;\n min-width: 0;\n}\n\n.check-name {\n font-size: 14px;\n font-weight: 600;\n color: var(--test-text);\n margin-bottom: 4px;\n}\n\n.check-message {\n font-size: 13px;\n color: var(--test-text-secondary);\n line-height: 1.5;\n word-wrap: break-word;\n}\n\n.check-weight {\n font-size: 12px;\n color: var(--test-text-muted);\n flex-shrink: 0;\n text-align: right;\n}\n\n.weight-label {\n font-weight: 500;\n}\n\n/* Comparison Section */\n.comparison-section {\n background: var(--test-surface);\n border-radius: var(--test-radius-lg);\n padding: 24px;\n box-shadow: var(--test-shadow-sm);\n}\n\n.comparison-tabs {\n display: flex;\n gap: 4px;\n margin-bottom: 16px;\n background: var(--test-bg);\n border-radius: var(--test-radius-md);\n padding: 4px;\n}\n\n.comparison-tab {\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 6px;\n padding: 10px 16px;\n border: none;\n background: transparent;\n color: var(--test-text-secondary);\n font-size: 13px;\n font-weight: 500;\n cursor: pointer;\n border-radius: var(--test-radius-sm);\n transition: var(--test-transition);\n}\n\n.comparison-tab:hover {\n color: var(--test-text);\n background: var(--mj-bg-overlay);\n}\n\n.comparison-tab.active {\n background: var(--test-surface);\n color: var(--test-primary);\n font-weight: 600;\n box-shadow: var(--test-shadow-sm);\n}\n\n.comparison-content {\n border-radius: var(--test-radius-md);\n overflow: hidden;\n border: 1px solid var(--test-border);\n}\n\n/* ===========================\n Details Tab\n =========================== */\n.details-tab {\n display: flex;\n flex-direction: column;\n gap: 20px;\n animation: fadeIn 0.3s ease-out;\n}\n\n.details-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n gap: 12px;\n}\n\n.detail-card {\n display: flex;\n align-items: center;\n gap: 14px;\n padding: 16px;\n background: var(--test-surface);\n border: 1px solid var(--test-border);\n border-radius: var(--test-radius-md);\n transition: var(--test-transition);\n}\n\n.detail-card.clickable {\n cursor: pointer;\n}\n\n.detail-card.clickable:hover {\n background: color-mix(in srgb, var(--mj-brand-primary) 5%, transparent);\n border-color: var(--test-primary-light);\n transform: translateX(4px);\n}\n\n.detail-icon {\n width: 44px;\n height: 44px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--test-bg);\n border-radius: var(--test-radius-md);\n color: var(--test-primary);\n font-size: 18px;\n flex-shrink: 0;\n}\n\n.detail-content {\n flex: 1;\n min-width: 0;\n}\n\n.detail-label {\n font-size: 11px;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n color: var(--test-text-muted);\n margin-bottom: 4px;\n}\n\n.detail-value {\n font-size: 14px;\n color: var(--test-text);\n word-wrap: break-word;\n font-weight: 500;\n}\n\n.detail-value.monospace {\n font-family: 'SF Mono', Monaco, 'Courier New', monospace;\n font-size: 12px;\n}\n\n.detail-value.link {\n color: var(--test-primary);\n}\n\n.detail-action {\n color: var(--test-text-muted);\n font-size: 12px;\n transition: var(--test-transition);\n}\n\n.detail-card.clickable:hover .detail-action {\n color: var(--test-primary);\n}\n\n/* Error Section */\n.error-section {\n background: var(--test-surface);\n border-radius: var(--test-radius-lg);\n padding: 24px;\n box-shadow: var(--test-shadow-sm);\n}\n\n.error-content {\n border-radius: var(--test-radius-md);\n overflow: hidden;\n border: 1px solid color-mix(in srgb, var(--mj-status-error) 40%, var(--mj-bg-surface));\n}\n\n/* Result Details Section */\n.result-details-section {\n background: var(--test-surface);\n border-radius: var(--test-radius-lg);\n padding: 24px;\n box-shadow: var(--test-shadow-sm);\n}\n\n.result-details-content {\n border-radius: var(--test-radius-md);\n overflow: hidden;\n border: 1px solid var(--test-border);\n}\n\n/* ===========================\n AI Runs Tab\n =========================== */\n.ai-runs-tab {\n display: flex;\n flex-direction: column;\n gap: 20px;\n animation: fadeIn 0.3s ease-out;\n}\n\n.ai-section {\n background: var(--test-surface);\n border-radius: var(--test-radius-lg);\n padding: 24px;\n box-shadow: var(--test-shadow-sm);\n}\n\n.count-badge {\n background: var(--test-bg);\n color: var(--test-text-secondary);\n padding: 4px 10px;\n border-radius: 12px;\n font-size: 12px;\n font-weight: 600;\n}\n\n.ai-run-list {\n display: flex;\n flex-direction: column;\n gap: 10px;\n}\n\n.ai-run-card {\n display: flex;\n align-items: center;\n gap: 14px;\n padding: 16px;\n background: var(--test-bg);\n border: 1px solid var(--test-border);\n border-radius: var(--test-radius-md);\n cursor: pointer;\n transition: var(--test-transition);\n}\n\n.ai-run-card:hover {\n background: color-mix(in srgb, var(--mj-brand-primary) 5%, transparent);\n border-color: var(--test-primary-light);\n transform: translateX(4px);\n box-shadow: var(--test-shadow-sm);\n}\n\n.ai-run-icon {\n width: 44px;\n height: 44px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--test-primary);\n color: var(--mj-text-inverse);\n border-radius: var(--test-radius-md);\n font-size: 18px;\n flex-shrink: 0;\n box-shadow: var(--test-shadow-sm);\n}\n\n.ai-run-icon.agent {\n background: var(--test-primary);\n}\n\n.ai-run-icon.prompt {\n background: var(--mj-brand-primary);\n}\n\n.ai-run-content {\n flex: 1;\n min-width: 0;\n}\n\n.ai-run-name {\n font-size: 14px;\n font-weight: 600;\n color: var(--test-text);\n margin-bottom: 6px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.ai-run-meta {\n display: flex;\n gap: 10px;\n font-size: 12px;\n color: var(--test-text-secondary);\n flex-wrap: wrap;\n}\n\n.status-chip {\n display: inline-flex;\n align-items: center;\n padding: 2px 8px;\n border-radius: 10px;\n font-size: 11px;\n font-weight: 600;\n text-transform: uppercase;\n}\n\n.status-chip.complete,\n.status-chip.completed,\n.status-chip.passed {\n background: var(--test-success-light);\n color: var(--mj-status-success);\n}\n\n.status-chip.failed,\n.status-chip.error {\n background: var(--test-error-light);\n color: var(--mj-status-error);\n}\n\n.status-chip.running {\n background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n color: var(--test-primary);\n}\n\n.cost-chip {\n display: inline-flex;\n align-items: center;\n gap: 2px;\n color: var(--test-text-muted);\n}\n\n.ai-run-arrow {\n color: var(--test-text-muted);\n font-size: 14px;\n transition: var(--test-transition);\n}\n\n.ai-run-card:hover .ai-run-arrow {\n color: var(--test-primary);\n transform: translateX(2px);\n}\n\n/* ===========================\n Feedback Tab\n =========================== */\n.feedback-tab {\n animation: fadeIn 0.3s ease-out;\n}\n\n.feedback-list {\n display: flex;\n flex-direction: column;\n gap: 16px;\n}\n\n.feedback-item {\n padding: 20px;\n background: var(--test-surface);\n border-radius: var(--test-radius-lg);\n border: 1px solid var(--test-border);\n box-shadow: var(--test-shadow-sm);\n transition: var(--test-transition);\n}\n\n.feedback-item:hover {\n border-color: var(--test-primary-light);\n}\n\n.feedback-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 16px;\n flex-wrap: wrap;\n gap: 8px;\n}\n\n.feedback-user {\n display: flex;\n align-items: center;\n gap: 10px;\n}\n\n.user-avatar {\n width: 36px;\n height: 36px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--test-bg);\n border-radius: 50%;\n color: var(--test-primary);\n font-size: 14px;\n}\n\n.user-name {\n font-size: 14px;\n font-weight: 600;\n color: var(--test-text);\n}\n\n.feedback-date {\n font-size: 12px;\n color: var(--test-text-muted);\n}\n\n.feedback-body {\n display: flex;\n flex-direction: column;\n gap: 12px;\n}\n\n.feedback-rating {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.rating-stars {\n display: flex;\n gap: 2px;\n}\n\n.rating-stars i {\n font-size: 14px;\n color: var(--test-border);\n}\n\n.rating-stars i.filled {\n color: var(--mj-status-warning);\n}\n\n.rating-value {\n font-size: 14px;\n font-weight: 600;\n color: var(--test-text);\n}\n\n.feedback-verdict {\n display: flex;\n}\n\n.verdict-badge {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 6px 12px;\n border-radius: 20px;\n font-size: 12px;\n font-weight: 600;\n}\n\n.verdict-badge.correct {\n background: var(--test-success-light);\n color: var(--mj-status-success);\n}\n\n.verdict-badge.incorrect {\n background: var(--test-error-light);\n color: var(--mj-status-error);\n}\n\n.feedback-comments {\n padding: 14px;\n background: var(--test-bg);\n border-radius: var(--test-radius-md);\n border-left: 3px solid var(--test-primary);\n}\n\n.feedback-comments p {\n margin: 0;\n font-size: 14px;\n line-height: 1.6;\n color: var(--test-text);\n}\n\n/* ===========================\n Log Tab\n =========================== */\n.log-tab {\n display: flex;\n flex-direction: column;\n gap: 0;\n height: 100%;\n animation: fadeIn 0.3s ease-out;\n}\n\n.log-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n background: var(--test-surface);\n padding: 16px 20px;\n border-radius: var(--test-radius-lg) var(--test-radius-lg) 0 0;\n border: 1px solid var(--test-border);\n border-bottom: none;\n}\n\n.log-title {\n display: flex;\n align-items: center;\n gap: 10px;\n}\n\n.log-title i {\n color: var(--test-text-secondary);\n font-size: 16px;\n}\n\n.log-title h3 {\n margin: 0;\n font-size: 16px;\n font-weight: 700;\n color: var(--test-text);\n}\n\n.log-actions {\n display: flex;\n gap: 8px;\n}\n\n.log-container {\n flex: 1;\n border-radius: 0 0 var(--test-radius-lg) var(--test-radius-lg);\n overflow: hidden;\n min-height: 300px;\n border: 1px solid var(--test-border);\n border-top: none;\n}\n\n/* ===========================\n Loading States & Skeletons\n =========================== */\n.loading-state {\n padding: 20px;\n}\n\n.skeleton-list {\n display: flex;\n flex-direction: column;\n gap: 12px;\n}\n\n.skeleton-card {\n display: flex;\n align-items: center;\n gap: 14px;\n padding: 16px;\n background: var(--test-surface);\n border-radius: var(--test-radius-md);\n border: 1px solid var(--test-border);\n}\n\n.skeleton-icon,\n.skeleton-avatar {\n width: 44px;\n height: 44px;\n border-radius: var(--test-radius-md);\n background: linear-gradient(90deg, var(--mj-border-default) 25%, var(--mj-bg-surface-sunken) 50%, var(--mj-border-default) 75%);\n background-size: 200% 100%;\n animation: shimmer 1.5s infinite;\n}\n\n.skeleton-avatar {\n border-radius: 50%;\n}\n\n.skeleton-content {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.skeleton-line {\n height: 14px;\n border-radius: 4px;\n background: linear-gradient(90deg, var(--mj-border-default) 25%, var(--mj-bg-surface-sunken) 50%, var(--mj-border-default) 75%);\n background-size: 200% 100%;\n animation: shimmer 1.5s infinite;\n}\n\n.skeleton-line.wide { width: 70%; }\n.skeleton-line.medium { width: 55%; }\n.skeleton-line.narrow { width: 40%; }\n\n@keyframes shimmer {\n 0% { background-position: 200% 0; }\n 100% { background-position: -200% 0; }\n}\n\n/* ===========================\n Empty States\n =========================== */\n.empty-state {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 60px 24px;\n text-align: center;\n background: var(--test-surface);\n border-radius: var(--test-radius-lg);\n}\n\n.empty-icon {\n width: 80px;\n height: 80px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--test-bg);\n border-radius: 50%;\n margin-bottom: 20px;\n}\n\n.empty-icon i {\n font-size: 36px;\n color: var(--test-text-muted);\n}\n\n.empty-state h3 {\n margin: 0 0 8px 0;\n font-size: 18px;\n font-weight: 600;\n color: var(--test-text);\n}\n\n.empty-state p {\n margin: 0;\n font-size: 14px;\n color: var(--test-text-secondary);\n max-width: 300px;\n}\n\n/* ===========================\n Keyboard Shortcuts Help\n =========================== */\n.shortcuts-hint {\n position: fixed;\n bottom: 20px;\n right: 20px;\n z-index: 100;\n}\n\n.shortcuts-hint > i {\n width: 40px;\n height: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--test-surface);\n border: 1px solid var(--test-border);\n border-radius: 50%;\n color: var(--test-text-muted);\n font-size: 16px;\n cursor: pointer;\n box-shadow: var(--test-shadow-md);\n transition: var(--test-transition);\n}\n\n.shortcuts-hint:hover > i {\n color: var(--test-primary);\n border-color: var(--test-primary-light);\n}\n\n.shortcuts-popup {\n display: none;\n position: absolute;\n bottom: 50px;\n right: 0;\n background: var(--test-surface);\n border: 1px solid var(--test-border);\n border-radius: var(--test-radius-md);\n padding: 16px;\n box-shadow: var(--test-shadow-lg);\n min-width: 200px;\n}\n\n.shortcuts-hint:hover .shortcuts-popup {\n display: block;\n animation: fadeIn 0.2s ease-out;\n}\n\n.shortcuts-popup h4 {\n margin: 0 0 12px 0;\n font-size: 14px;\n font-weight: 700;\n color: var(--test-text);\n}\n\n.shortcuts-popup ul {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n\n.shortcuts-popup li {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 6px 0;\n font-size: 13px;\n color: var(--test-text-secondary);\n}\n\n.shortcuts-popup kbd {\n background: var(--test-bg);\n border: 1px solid var(--test-border);\n border-radius: 4px;\n padding: 2px 6px;\n font-family: -apple-system, BlinkMacSystemFont, sans-serif;\n font-size: 11px;\n color: var(--test-text);\n}\n\n/* ===========================\n Responsive Design - Tablet\n =========================== */\n@media (max-width: 1024px) {\n .metrics-bar {\n grid-template-columns: repeat(3, 1fr);\n }\n\n .details-grid {\n grid-template-columns: repeat(2, 1fr);\n }\n\n .shortcuts-hint {\n display: none;\n }\n}\n\n/* ===========================\n Responsive Design - Mobile\n =========================== */\n@media (max-width: 768px) {\n .test-run-form {\n height: auto;\n min-height: 100%;\n }\n\n .test-run-header {\n padding: 16px;\n }\n\n .breadcrumb {\n margin-bottom: 12px;\n }\n\n .breadcrumb ol {\n font-size: 12px;\n }\n\n .header-content {\n flex-direction: column;\n gap: 16px;\n }\n\n .header-left {\n width: 100%;\n }\n\n .status-indicator {\n width: 48px;\n height: 48px;\n font-size: 20px;\n }\n\n .test-run-info h1 {\n font-size: 18px;\n }\n\n .test-run-meta {\n gap: 8px;\n }\n\n .status-badge {\n padding: 4px 10px;\n font-size: 11px;\n }\n\n .header-actions {\n width: 100%;\n justify-content: stretch;\n }\n\n .header-actions button {\n flex: 1;\n }\n\n .metrics-bar {\n grid-template-columns: repeat(2, 1fr);\n gap: 10px;\n }\n\n .metric-card {\n padding: 12px;\n }\n\n .metric-icon {\n width: 36px;\n height: 36px;\n font-size: 14px;\n }\n\n .metric-value {\n font-size: 14px;\n }\n\n .tabs {\n padding: 0 12px;\n }\n\n .tab {\n padding: 12px 14px;\n font-size: 13px;\n gap: 6px;\n }\n\n .tab i {\n font-size: 14px;\n }\n\n .shortcut-hint {\n display: none;\n }\n\n .tab-content {\n padding: 16px;\n }\n\n .result-hero {\n padding: 24px 20px;\n }\n\n .result-icon {\n width: 64px;\n height: 64px;\n font-size: 32px;\n }\n\n .result-text h2 {\n font-size: 24px;\n }\n\n .result-score {\n font-size: 16px;\n }\n\n .check-results,\n .comparison-section,\n .ai-section,\n .feedback-item {\n padding: 18px;\n }\n\n .check-item {\n padding: 12px;\n }\n\n .comparison-tabs {\n flex-direction: column;\n gap: 4px;\n }\n\n .comparison-tab {\n text-align: center;\n }\n\n .details-grid {\n grid-template-columns: 1fr;\n }\n\n .detail-card {\n padding: 14px;\n }\n\n .ai-run-card {\n padding: 14px;\n }\n\n .ai-run-icon {\n width: 40px;\n height: 40px;\n font-size: 16px;\n }\n\n .ai-run-meta {\n flex-direction: column;\n gap: 4px;\n }\n\n .feedback-header {\n flex-direction: column;\n align-items: flex-start;\n }\n\n .log-header {\n flex-direction: column;\n gap: 12px;\n align-items: stretch;\n }\n\n .log-actions {\n justify-content: stretch;\n }\n\n .log-actions button {\n flex: 1;\n }\n\n .empty-state {\n padding: 40px 20px;\n }\n\n .empty-icon {\n width: 64px;\n height: 64px;\n }\n\n .empty-icon i {\n font-size: 28px;\n }\n}\n\n/* ===========================\n Responsive Design - Small Mobile\n =========================== */\n@media (max-width: 480px) {\n .test-run-header {\n padding: 12px;\n }\n\n .header-left {\n gap: 12px;\n }\n\n .status-indicator {\n width: 40px;\n height: 40px;\n font-size: 18px;\n border-radius: 8px;\n }\n\n .test-run-info h1 {\n font-size: 16px;\n }\n\n .metrics-bar {\n grid-template-columns: 1fr 1fr;\n }\n\n .metric-card {\n padding: 10px;\n flex-direction: column;\n text-align: center;\n }\n\n .metric-icon {\n margin-bottom: 8px;\n }\n\n .metric-label {\n font-size: 9px;\n }\n\n .metric-value {\n font-size: 14px;\n }\n\n .tabs {\n padding: 0 8px;\n }\n\n .tab {\n padding: 10px 12px;\n font-size: 12px;\n }\n\n .tab-badge {\n display: none;\n }\n\n .tab-content {\n padding: 12px;\n }\n\n .result-hero {\n padding: 20px 16px;\n }\n\n .result-icon {\n width: 56px;\n height: 56px;\n font-size: 28px;\n }\n\n .result-text h2 {\n font-size: 20px;\n }\n\n .result-score {\n font-size: 14px;\n }\n\n .result-checks {\n font-size: 12px;\n }\n\n .section-header h3 {\n font-size: 16px;\n }\n\n .check-item {\n flex-direction: column;\n gap: 8px;\n }\n\n .check-weight {\n text-align: left;\n }\n}\n\n/* ===========================\n Touch Device Optimizations\n =========================== */\n@media (hover: none) and (pointer: coarse) {\n .tab,\n .comparison-tab,\n .ai-run-card,\n .check-item,\n .feedback-item,\n .detail-card.clickable {\n -webkit-tap-highlight-color: transparent;\n }\n\n .ai-run-card:active,\n .detail-card.clickable:active {\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n transform: scale(0.98);\n }\n\n .tab:active {\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n }\n\n /* Larger touch targets */\n .tab {\n min-height: 48px;\n }\n\n .ai-run-card,\n .detail-card {\n min-height: 64px;\n }\n}\n\n/* ===========================\n High Contrast Mode\n =========================== */\n@media (prefers-contrast: high) {\n .status-badge {\n border: 2px solid currentColor;\n }\n\n .check-item {\n border-width: 2px;\n }\n\n .tab.active {\n border-bottom-width: 4px;\n }\n}\n\n/* ===========================\n Reduced Motion\n =========================== */\n@media (prefers-reduced-motion: reduce) {\n *,\n *::before,\n *::after {\n animation-duration: 0.01ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 0.01ms !important;\n }\n\n .skeleton-icon,\n .skeleton-avatar,\n .skeleton-line {\n animation: none;\n background: var(--mj-border-default);\n }\n\n .result-pulse {\n animation: none;\n display: none;\n }\n}\n\n/* ===========================\n Print Styles\n =========================== */\n@media print {\n .test-run-form {\n background: var(--mj-bg-surface);\n height: auto;\n }\n\n .header-actions,\n .tabs-container,\n .shortcuts-hint,\n .log-actions {\n display: none !important;\n }\n\n .tab-content {\n overflow: visible;\n padding: 0;\n }\n\n .result-hero,\n .check-results,\n .details-grid,\n .ai-section,\n .feedback-item {\n break-inside: avoid;\n box-shadow: none;\n border: 1px solid var(--mj-border-default);\n }\n\n .comparison-content,\n .log-container {\n max-height: none;\n overflow: visible;\n }\n}\n\n/* ===========================\n Tags Bar - Sleek Inline Display\n =========================== */\n.tags-bar {\n margin-top: 16px;\n padding: 8px 14px;\n background: color-mix(in srgb, var(--mj-brand-primary) 6%, var(--mj-bg-surface));\n border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n border-radius: 8px;\n max-width: 600px;\n}\n\n.tags-bar-content {\n display: flex;\n align-items: center;\n gap: 10px;\n flex-wrap: wrap;\n}\n\n.tags-bar-label {\n color: var(--test-text-secondary);\n font-size: 14px;\n}\n\n.tags-bar-label i {\n opacity: 0.6;\n}\n\n.tags-bar-chips {\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n flex: 1;\n}\n\n.tag-inline {\n display: inline-flex;\n align-items: center;\n padding: 4px 10px;\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n color: var(--test-primary);\n border-radius: 12px;\n font-size: 11px;\n font-weight: 500;\n letter-spacing: 0.01em;\n}\n\n.tags-bar-empty {\n font-size: 12px;\n color: var(--test-text-secondary);\n opacity: 0.7;\n flex: 1;\n}\n\n.tags-bar-edit {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 4px 10px;\n background: transparent;\n border: 1px dashed var(--test-border);\n border-radius: 12px;\n font-size: 11px;\n font-weight: 500;\n color: var(--test-text-secondary);\n cursor: pointer;\n transition: var(--test-transition);\n}\n\n.tags-bar-edit:hover {\n border-color: var(--test-primary);\n color: var(--test-primary);\n background: color-mix(in srgb, var(--mj-brand-primary) 5%, transparent);\n}\n\n.tags-bar-edit i {\n font-size: 10px;\n}\n\n/* ===========================\n Tags Editor Panel - Expanded Edit Mode\n =========================== */\n.tags-editor-panel {\n margin-top: 16px;\n background: var(--test-surface);\n border: 1px solid var(--test-primary);\n border-radius: var(--test-radius-md);\n overflow: hidden;\n box-shadow: var(--mj-shadow-md);\n max-width: 600px;\n}\n\n.tags-editor-header {\n display: flex;\n align-items: center;\n padding: 12px 16px;\n background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n border-bottom: 1px solid color-mix(in srgb, var(--mj-brand-primary) 20%, transparent);\n}\n\n.tags-editor-title {\n font-size: 13px;\n font-weight: 600;\n color: var(--test-primary);\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.tags-editor-body {\n padding: 16px;\n display: flex;\n flex-direction: column;\n gap: 12px;\n}\n\n.tags-editor-chips {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n min-height: 32px;\n}\n\n.tag-editable {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 5px 8px 5px 12px;\n background: var(--test-surface);\n border: 1px solid var(--test-primary);\n color: var(--test-primary);\n border-radius: 14px;\n font-size: 12px;\n font-weight: 500;\n}\n\n.tag-remove-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 16px;\n height: 16px;\n background: transparent;\n border: none;\n color: var(--test-primary);\n cursor: pointer;\n border-radius: 50%;\n font-size: 9px;\n opacity: 0.6;\n transition: var(--test-transition);\n}\n\n.tag-remove-btn:hover {\n opacity: 1;\n background: var(--test-error-light);\n color: var(--test-error);\n}\n\n.tags-empty-hint {\n font-size: 12px;\n color: var(--test-text-secondary);\n font-style: italic;\n padding: 4px 0;\n}\n\n.tags-editor-input {\n display: flex;\n gap: 8px;\n align-items: center;\n}\n\n.tag-text-input {\n flex: 1;\n padding: 10px 14px;\n border: 1px solid var(--test-border);\n border-radius: 8px;\n font-size: 13px;\n background: var(--test-bg);\n}\n\n.tag-text-input:focus {\n outline: none;\n border-color: var(--test-primary);\n background: var(--test-surface);\n box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.tag-text-input::placeholder {\n color: var(--test-text-secondary);\n opacity: 0.6;\n}\n\n.tags-editor-footer {\n display: flex;\n justify-content: flex-start;\n gap: 8px;\n padding: 12px 16px;\n background: var(--test-bg);\n border-top: 1px solid var(--test-border);\n}\n\n/* Mobile Responsive for Tags */\n@media (max-width: 768px) {\n .tags-bar {\n padding: 8px 12px;\n }\n\n .tags-bar-content {\n gap: 8px;\n }\n\n .tag-inline {\n padding: 3px 8px;\n font-size: 10px;\n }\n\n .tags-editor-panel {\n margin-top: 12px;\n }\n\n .tags-editor-body {\n padding: 12px;\n }\n\n .tags-editor-footer {\n padding: 10px 12px;\n }\n}\n"] }]
1581
1581
  }], null, { handleKeyboardShortcut: [{
1582
1582
  type: HostListener,
1583
1583
  args: ['document:keydown', ['$event']]