/* =================================== Lite Task Detail Page Additions =================================== */ /* Path Tags */ .path-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; } .path-tag { padding: 0.25rem 0.5rem; background: hsl(var(--muted)); border-radius: 0.25rem; font-family: var(--font-mono); font-size: 0.8rem; color: hsl(var(--foreground)); } /* JSON Content */ .json-content { background: hsl(var(--muted)); padding: 1rem; border-radius: 0.5rem; overflow-x: auto; font-size: 0.75rem; line-height: 1.6; color: hsl(var(--foreground)); max-height: 500px; overflow-y: auto; white-space: pre-wrap; word-break: break-word; } /* Button View JSON */ .btn-view-json { padding: 0.25rem 0.5rem; background: hsl(var(--muted)); border: 1px solid hsl(var(--border)); border-radius: 0.25rem; font-size: 0.7rem; font-family: var(--font-mono); color: hsl(var(--muted-foreground)); cursor: pointer; transition: all 0.15s; } .btn-view-json:hover { background: hsl(var(--hover)); color: hsl(var(--foreground)); } /* Context Fields */ .context-fields { display: flex; flex-direction: column; gap: 1rem; } .context-section { padding: 1rem; background: hsl(var(--muted) / 0.3); border: 1px solid hsl(var(--border)); border-radius: 0.5rem; } .context-section-title { font-size: 1rem; font-weight: 600; color: hsl(var(--foreground)); margin-bottom: 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid hsl(var(--border)); } .context-field { display: flex; flex-direction: column; gap: 0.25rem; } .context-label { font-size: 0.75rem; font-weight: 600; color: hsl(var(--muted-foreground)); text-transform: uppercase; letter-spacing: 0.025em; } .context-value { font-size: 0.875rem; color: hsl(var(--foreground)); line-height: 1.6; } .context-field label { display: block; font-size: 0.75rem; font-weight: 600; color: hsl(var(--muted-foreground)); margin-bottom: 0.5rem; text-transform: uppercase; } .context-field p { margin: 0; font-size: 0.875rem; color: hsl(var(--foreground)); line-height: 1.5; } .context-field ul { margin: 0; padding-left: 1.25rem; font-size: 0.875rem; color: hsl(var(--foreground)); } .context-field ul li { margin-bottom: 0.25rem; } /* Modification Points */ .mod-points { display: flex; flex-direction: column; gap: 0.5rem; } .mod-point { padding: 0.5rem; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: 0.25rem; } .mod-target { font-size: 0.75rem; color: hsl(var(--muted-foreground)); margin-left: 0.5rem; } .mod-change { margin: 0.5rem 0 0 0; font-size: 0.8rem; color: hsl(var(--foreground)); } /* Implementation Steps */ .impl-steps { margin: 0; padding-left: 1.25rem; font-size: 0.875rem; color: hsl(var(--foreground)); } .impl-steps li { margin-bottom: 0.5rem; line-height: 1.5; } /* Implementation Steps List (Drawer) */ .impl-steps-list { display: flex; flex-direction: column; gap: 1rem; } .impl-step-item { background: hsl(var(--muted) / 0.3); border: 1px solid hsl(var(--border)); border-radius: 0.5rem; padding: 1rem; transition: border-color 0.2s; } .impl-step-item:hover { border-color: hsl(var(--primary) / 0.5); } .impl-step-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem; } .impl-step-number { display: inline-flex; align-items: center; justify-content: center; min-width: 1.75rem; height: 1.75rem; padding: 0 0.5rem; background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); border-radius: 0.375rem; font-size: 0.75rem; font-weight: 600; white-space: nowrap; } .impl-step-title { font-weight: 600; font-size: 0.9rem; color: hsl(var(--foreground)); flex: 1; } .impl-step-desc { font-size: 0.85rem; color: hsl(var(--muted-foreground)); line-height: 1.5; margin-bottom: 0.75rem; padding-left: 2.5rem; } .impl-step-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid hsl(var(--border)); } .impl-step-mods, .impl-step-flow { font-size: 0.8rem; } .impl-step-mods strong, .impl-step-flow strong { display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: hsl(var(--muted-foreground)); margin-bottom: 0.5rem; } .impl-step-mods ul, .impl-step-flow ol { margin: 0; padding-left: 1.25rem; color: hsl(var(--foreground)); } .impl-step-mods li, .impl-step-flow li { margin-bottom: 0.375rem; line-height: 1.4; } .impl-step-mods code { font-size: 0.75rem; padding: 0.125rem 0.375rem; background: hsl(var(--muted)); border-radius: 0.25rem; color: hsl(var(--primary)); } .impl-step-deps { margin-top: 0.75rem; padding-top: 0.5rem; border-top: 1px dashed hsl(var(--border)); font-size: 0.75rem; color: hsl(var(--muted-foreground)); } .dep-badge { display: inline-block; padding: 0.125rem 0.5rem; background: hsl(var(--muted)); border-radius: 0.25rem; font-size: 0.7rem; margin-left: 0.25rem; } /* Field Groups */ .field-group { display: flex; flex-direction: column; gap: 0.5rem; } .field-row { display: flex; gap: 0.5rem; font-size: 0.875rem; } .field-label { font-weight: 500; color: hsl(var(--muted-foreground)); min-width: 100px; } .field-value { color: hsl(var(--foreground)); flex: 1; } .json-value-null { color: hsl(var(--muted-foreground)); font-style: italic; } .json-value-boolean { color: hsl(220 80% 60%); } .json-value-number { color: hsl(142 71% 45%); } .json-value-string { color: hsl(var(--foreground)); } /* Array Items */ .array-value { display: flex; flex-wrap: wrap; gap: 0.375rem; } .array-item { padding: 0.125rem 0.375rem; background: hsl(var(--muted)); border-radius: 0.25rem; font-size: 0.8rem; } .array-item.path-item { font-family: var(--font-mono); background: hsl(var(--accent)); } /* Nested Array */ .nested-array { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.25rem; } .array-object { padding: 0.5rem; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: 0.25rem; } .array-object-header { font-size: 0.7rem; font-weight: 600; color: hsl(var(--muted-foreground)); margin-bottom: 0.25rem; } /* Collapsible Sections */ .collapsible-section { border-top: 1px solid hsl(var(--border)); } .collapsible-header { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; cursor: pointer; transition: background 0.15s; } .collapsible-header:hover { background: hsl(var(--hover)); } .collapse-icon { font-size: 0.75rem; color: hsl(var(--muted-foreground)); transition: transform 0.2s; } .collapsible-header.expanded .collapse-icon { transform: rotate(90deg); } .section-label { font-size: 0.75rem; font-weight: 600; color: hsl(var(--foreground)); text-transform: uppercase; } .section-preview { flex: 1; font-size: 0.75rem; color: hsl(var(--muted-foreground)); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .collapsible-content { padding: 1rem; background: hsl(var(--muted)); } .collapsible-content.collapsed { display: none; } /* Summary Tab */ .summary-tab-content { display: flex; flex-direction: column; gap: 1rem; } .summary-item-collapsible { border: 1px solid hsl(var(--border)); border-radius: 0.5rem; overflow: hidden; } .summary-collapsible-header { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; background: hsl(var(--card)); cursor: pointer; transition: background 0.15s; } .summary-collapsible-header:hover { background: hsl(var(--hover)); } .summary-name { font-weight: 600; color: hsl(var(--foreground)); } .summary-preview { flex: 1; font-size: 0.75rem; color: hsl(var(--muted-foreground)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .summary-collapsible-content { padding: 1rem; background: hsl(var(--muted)); } .summary-collapsible-content.collapsed { display: none; } .summary-content-pre { margin: 0; white-space: pre-wrap; word-break: break-word; font-size: 0.8rem; line-height: 1.6; } /* Summary Item Direct (No collapse) */ .summary-item-direct { border: 1px solid hsl(var(--border)); border-radius: 0.5rem; padding: 1rem; background: hsl(var(--card)); } .summary-item-direct .summary-content-pre { margin-top: 0.5rem; padding: 0.75rem; background: hsl(var(--muted)); border-radius: 0.375rem; } .markdown-content { background: hsl(var(--muted)); padding: 1rem; border-radius: 0.5rem; overflow-x: auto; font-size: 0.8rem; line-height: 1.6; color: hsl(var(--foreground)); max-height: 600px; overflow-y: auto; white-space: pre-wrap; word-break: break-word; margin: 0; } /* JSON Modal */ .json-modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 100; opacity: 0; transition: opacity 0.2s; } .json-modal-overlay.active { opacity: 1; } .json-modal { background: hsl(var(--card)); border-radius: 0.5rem; width: 90%; max-width: 700px; max-height: 80vh; display: flex; flex-direction: column; box-shadow: 0 8px 24px rgb(0 0 0 / 0.2); } .json-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem; border-bottom: 1px solid hsl(var(--border)); } .json-modal-title { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; color: hsl(var(--foreground)); } .json-modal-close { width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; background: none; border: none; font-size: 1.5rem; color: hsl(var(--muted-foreground)); cursor: pointer; border-radius: 0.25rem; } .json-modal-close:hover { background: hsl(var(--hover)); color: hsl(var(--foreground)); } .json-modal-body { flex: 1; overflow: auto; padding: 1rem; } .json-modal-content { margin: 0; white-space: pre-wrap; word-break: break-word; font-size: 0.75rem; line-height: 1.6; color: hsl(var(--foreground)); } .json-modal-footer { padding: 1rem; border-top: 1px solid hsl(var(--border)); display: flex; justify-content: flex-end; } .btn-copy-json { padding: 0.5rem 1rem; background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); border: none; border-radius: 0.375rem; font-size: 0.875rem; cursor: pointer; transition: opacity 0.15s; } .btn-copy-json:hover { opacity: 0.9; } /* Flowchart Fallback */ .flowchart-fallback { display: flex; align-items: center; justify-content: center; height: 200px; color: hsl(var(--muted-foreground)); font-size: 0.875rem; } /* =================================== Markdown Modal =================================== */ .markdown-modal.hidden { display: none; } .md-tab-btn { color: hsl(var(--muted-foreground)); } .md-tab-btn.active { background: hsl(var(--background)); color: hsl(var(--foreground)); font-weight: 500; } .md-tab-btn:hover:not(.active) { color: hsl(var(--foreground)); } /* Markdown Preview Prose Styles */ .markdown-preview { color: hsl(var(--foreground)); line-height: 1.7; } .markdown-preview h1, .markdown-preview h2, .markdown-preview h3, .markdown-preview h4, .markdown-preview h5, .markdown-preview h6 { color: hsl(var(--foreground)); font-weight: 600; margin-top: 1.5em; margin-bottom: 0.5em; line-height: 1.3; } .markdown-preview h1 { font-size: 1.75rem; border-bottom: 1px solid hsl(var(--border)); padding-bottom: 0.3em; } .markdown-preview h2 { font-size: 1.5rem; border-bottom: 1px solid hsl(var(--border)); padding-bottom: 0.3em; } .markdown-preview h3 { font-size: 1.25rem; } .markdown-preview h4 { font-size: 1.1rem; } .markdown-preview p { margin-bottom: 1em; } .markdown-preview ul, .markdown-preview ol { margin-bottom: 1em; padding-left: 1.5em; } .markdown-preview li { margin-bottom: 0.25em; } .markdown-preview code { background: hsl(var(--muted)); padding: 0.125rem 0.375rem; border-radius: 0.25rem; font-size: 0.875em; color: hsl(var(--primary)); } .markdown-preview pre { background: hsl(var(--muted)); padding: 1rem; border-radius: 0.5rem; overflow-x: auto; margin-bottom: 1em; } .markdown-preview pre code { background: none; padding: 0; color: hsl(var(--foreground)); } .markdown-preview blockquote { border-left: 3px solid hsl(var(--primary)); padding-left: 1rem; margin-left: 0; margin-bottom: 1em; color: hsl(var(--muted-foreground)); font-style: italic; } .markdown-preview table { width: 100%; border-collapse: collapse; margin-bottom: 1em; } .markdown-preview th, .markdown-preview td { border: 1px solid hsl(var(--border)); padding: 0.5rem 0.75rem; text-align: left; } .markdown-preview th { background: hsl(var(--muted)); font-weight: 600; } .markdown-preview a { color: hsl(var(--primary)); text-decoration: underline; } .markdown-preview hr { border: none; border-top: 1px solid hsl(var(--border)); margin: 1.5em 0; } /* View Details Button */ .btn-view-details { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.75rem; background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); border: none; border-radius: 0.375rem; font-size: 0.8rem; cursor: pointer; transition: opacity 0.15s; } .btn-view-details:hover { opacity: 0.9; } .summary-item-card { background: hsl(var(--muted) / 0.3); border: 1px solid hsl(var(--border)); border-radius: 0.5rem; padding: 1rem; margin-bottom: 0.75rem; } .summary-item-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .summary-item-name { font-weight: 500; color: hsl(var(--foreground)); display: flex; align-items: center; gap: 0.5rem; } .summary-item-title { font-weight: 600; font-size: 0.95rem; color: hsl(var(--foreground)); margin: 0; } .summary-item-preview { font-size: 0.8rem; color: hsl(var(--muted-foreground)); margin-top: 0.5rem; line-height: 1.5; } .summary-preview-text { margin: 0; padding: 0.75rem; background: hsl(var(--muted) / 0.5); border-radius: 0.25rem; font-size: 0.75rem; line-height: 1.4; white-space: pre-wrap; word-break: break-word; max-height: 80px; overflow: hidden; } .impl-plan-card { background: hsl(var(--muted) / 0.3); border: 1px solid hsl(var(--border)); border-radius: 0.5rem; padding: 1rem; } .impl-plan-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; } .impl-plan-title { font-weight: 600; color: hsl(var(--foreground)); display: flex; align-items: center; gap: 0.5rem; } .impl-plan-preview { font-size: 0.8rem; color: hsl(var(--muted-foreground)); line-height: 1.5; } .impl-plan-preview-text { margin: 0; padding: 0.75rem; background: hsl(var(--muted) / 0.5); border-radius: 0.25rem; font-size: 0.75rem; line-height: 1.4; white-space: pre-wrap; word-break: break-word; max-height: 100px; overflow: hidden; } /* =================================== Fix Plan Enhanced Styles =================================== */ .plan-root-cause-text, .plan-strategy-text, .plan-requirements-text { font-size: 0.875rem; line-height: 1.6; color: hsl(var(--foreground)); background: hsl(var(--muted) / 0.3); padding: 0.75rem; border-radius: 0.375rem; border-left: 3px solid hsl(var(--primary)); } .severity-badge, .risk-badge { display: inline-block; padding: 0.125rem 0.5rem; border-radius: 0.25rem; font-size: 0.75rem; font-weight: 500; text-transform: uppercase; } .severity-badge.critical, .risk-badge.high { background: hsl(0 70% 50% / 0.15); color: hsl(0 70% 45%); } .severity-badge.high, .risk-badge.medium { background: hsl(30 90% 50% / 0.15); color: hsl(30 90% 40%); } .severity-badge.medium { background: hsl(45 90% 50% / 0.15); color: hsl(45 80% 35%); } .severity-badge.low, .risk-badge.low { background: hsl(142 70% 50% / 0.15); color: hsl(142 70% 35%); } .fix-tasks-summary { display: flex; flex-direction: column; gap: 0.5rem; } .fix-task-summary-item { background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: 0.5rem; overflow: hidden; } .fix-task-summary-item .collapsible-header { padding: 0.75rem 1rem; } .task-num { font-weight: 600; color: hsl(var(--primary)); font-size: 0.85rem; } .task-title-brief { font-size: 0.875rem; color: hsl(var(--foreground)); flex: 1; } .task-scope-badge { padding: 0.125rem 0.5rem; background: hsl(var(--muted)); border-radius: 0.25rem; font-size: 0.7rem; color: hsl(var(--muted-foreground)); } .task-detail-section { margin-bottom: 1rem; } .task-detail-section:last-child { margin-bottom: 0; } .task-detail-section strong { display: block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.025em; color: hsl(var(--muted-foreground)); margin-bottom: 0.5rem; } .mod-points-list, .verify-list { margin: 0; padding-left: 1rem; font-size: 0.8rem; } .mod-points-list li, .verify-list li { margin-bottom: 0.375rem; line-height: 1.5; } .mod-points-list code { font-size: 0.75rem; padding: 0.125rem 0.375rem; background: hsl(var(--muted)); border-radius: 0.25rem; color: hsl(var(--primary)); } .func-name { color: hsl(var(--muted-foreground)); font-size: 0.75rem; } .change-type { color: hsl(var(--muted-foreground)); font-size: 0.7rem; font-style: italic; } /* =================================== Diagnoses Tab Styles =================================== */ .diagnoses-tab-content { display: flex; flex-direction: column; gap: 1.5rem; } .diagnoses-section-title { font-size: 1rem; font-weight: 600; color: hsl(var(--foreground)); margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.5rem; } .diagnoses-manifest-section { background: hsl(var(--muted) / 0.3); border: 1px solid hsl(var(--border)); border-radius: 0.5rem; padding: 1rem; } .manifest-meta-grid { display: flex; flex-wrap: wrap; gap: 1rem; } .diagnoses-grid { display: flex; flex-direction: column; gap: 0.75rem; } .diagnosis-card { background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: 0.5rem; overflow: hidden; } .diagnosis-card .collapsible-content { display: block; padding: 1rem; background: hsl(var(--card)); } .diagnosis-card .collapsible-content.collapsed { display: none; } .diagnosis-header { background: hsl(var(--muted) / 0.3); } .diagnosis-id { font-weight: 600; color: hsl(var(--foreground)); flex: 1; display: flex; align-items: center; gap: 0.5rem; } .diag-section { margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid hsl(var(--border) / 0.5); } .diag-section:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; } .diag-section strong { display: block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.025em; color: hsl(var(--muted-foreground)); margin-bottom: 0.5rem; } .diag-section p { margin: 0; font-size: 0.875rem; line-height: 1.6; color: hsl(var(--foreground)); } .issues-list { margin: 0; padding-left: 1rem; font-size: 0.85rem; } .issue-item { margin-bottom: 0.5rem; padding: 0.5rem; background: hsl(var(--muted) / 0.3); border-radius: 0.25rem; } .issue-title { font-weight: 500; color: hsl(var(--foreground)); } .issue-location { font-size: 0.75rem; margin-top: 0.25rem; } .issue-location code { padding: 0.125rem 0.375rem; background: hsl(var(--muted)); border-radius: 0.25rem; color: hsl(var(--primary)); } .contracts-list { display: flex; flex-direction: column; gap: 0.5rem; } .contract-item { padding: 0.75rem; background: hsl(var(--muted) / 0.3); border: 1px solid hsl(var(--border)); border-radius: 0.375rem; } .contract-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.25rem; } .contract-endpoint { font-weight: 500; color: hsl(var(--foreground)); } .contract-method { padding: 0.125rem 0.375rem; background: hsl(var(--primary) / 0.15); color: hsl(var(--primary)); border-radius: 0.25rem; font-size: 0.7rem; font-weight: 600; } .contract-desc { font-size: 0.8rem; color: hsl(var(--muted-foreground)); } .contract-issues { font-size: 0.75rem; color: hsl(0 70% 50%); margin-top: 0.25rem; } .dataflow-details { display: flex; flex-direction: column; gap: 0.5rem; } .df-item { font-size: 0.85rem; } .df-label { font-weight: 500; color: hsl(var(--muted-foreground)); } .df-transforms { margin: 0.25rem 0 0 1rem; padding-left: 0; } .recommendations-list { margin: 0; padding-left: 1.25rem; font-size: 0.85rem; } .recommendations-list li { margin-bottom: 0.375rem; line-height: 1.5; } /* =================================== Multi-CLI Discussion View Styles =================================== */ /* Multi-CLI Card (List View) */ .multi-cli-card { background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: 0.5rem; padding: 1rem; cursor: pointer; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); position: relative; } .multi-cli-card::before { content: ""; position: absolute; inset: 0; border-radius: 0.5rem; border: 2px solid transparent; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); } .multi-cli-card:hover { border-color: hsl(var(--purple, 280 60% 50%) / 0.5); box-shadow: 0 4px 16px hsl(var(--purple, 280 60% 50%) / 0.15); transform: translateY(-2px); } .multi-cli-card:hover::before { border-color: hsl(var(--purple, 280 60% 50%) / 0.3); } .multi-cli-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 0.75rem; } .multi-cli-card-title { font-weight: 600; font-size: 0.95rem; color: hsl(var(--foreground)); line-height: 1.4; flex: 1; } .multi-cli-card-meta { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; font-size: 0.8rem; color: hsl(var(--muted-foreground)); } .multi-cli-round-count { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.25rem 0.5rem; background: hsl(var(--purple-light, 280 60% 95%)); color: hsl(var(--purple, 280 60% 50%)); border-radius: 0.25rem; font-size: 0.75rem; font-weight: 500; } /* Multi-CLI Status Badges */ .multi-cli-status { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.25rem 0.5rem; border-radius: 0.25rem; font-size: 0.75rem; font-weight: 500; } .multi-cli-status.converged, .multi-cli-status.decided { background: hsl(var(--success-light, 142 70% 95%)); color: hsl(var(--success, 142 70% 45%)); } .multi-cli-status.analyzing { background: hsl(var(--warning-light, 45 90% 95%)); color: hsl(var(--warning, 45 90% 40%)); } .multi-cli-status.blocked, .multi-cli-status.conflict { background: hsl(var(--destructive) / 0.1); color: hsl(var(--destructive)); } .multi-cli-status.pending, .multi-cli-status.exploring, .multi-cli-status.initialized { ) background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); } .multi-cli-status.plan_generated, .multi-cli-status.completed { background: hsl(var(--success-light, 142 70% 95%)); color: hsl(var(--success, 142 70% 45%)); } /* Multi-CLI Detail Page */ .multi-cli-detail-page { display: flex; flex-direction: column; gap: 1.5rem; } .multi-cli-detail-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding-bottom: 1rem; border-bottom: 1px solid hsl(var(--border)); } .multi-cli-detail-info { flex: 1; } .multi-cli-detail-meta { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; font-size: 0.85rem; color: hsl(var(--muted-foreground)); } .multi-cli-detail-meta .info-label { font-weight: 500; color: hsl(var(--muted-foreground)); } .multi-cli-detail-meta .info-value { color: hsl(var(--foreground)); font-weight: 500; } .multi-cli-detail-title { font-size: 1.25rem; font-weight: 600; color: hsl(var(--foreground)); margin-bottom: 0.5rem; } .multi-cli-detail-meta { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; font-size: 0.85rem; color: hsl(var(--muted-foreground)); } /* Multi-CLI Tabs */ .multi-cli-tabs { display: flex; gap: 0; border-bottom: 1px solid hsl(var(--border)); margin-bottom: 1.5rem; overflow-x: auto; background: hsl(var(--muted) / 0.2); padding: 0 0.5rem; border-radius: 0.5rem 0.5rem 0 0; } .multi-cli-tab { padding: 0.75rem 1.25rem; font-size: 0.875rem; font-weight: 500; color: hsl(var(--muted-foreground)); background: transparent; border: none; border-bottom: 3px solid transparent; cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); white-space: nowrap; border-radius: 0.375rem 0.375rem 0 0; display: flex; align-items: center; gap: 0.5rem; } .multi-cli-tab:hover { color: hsl(var(--foreground)); background: hsl(var(--hover)); border-bottom-color: hsl(var(--purple, 280 60% 50%) / 0.5); } .multi-cli-tab.active { color: hsl(var(--purple, 280 60% 50%)); border-bottom-color: hsl(var(--purple, 280 60% 50%)); background: hsl(var(--purple, 280 60% 50%) / 0.05); font-weight: 600; } .multi-cli-tab .tab-icon { width: 1rem; height: 1rem; } .multi-cli-tab-content { display: none; animation: fadeIn 0.2s ease; } .multi-cli-tab-content.active { display: block; } @keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } /* Multi-CLI Topic Tab */ .multi-cli-topic-section { background: hsl(var(--muted) / 0.3); border: 1px solid hsl(var(--border)); border-radius: 0.5rem; padding: 1rem; margin-bottom: 1rem; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .multi-cli-topic-section:hover { border-color: hsl(var(--purple, 280 60% 50%) / 0.3); box-shadow: 0 2px 8px hsl(var(--purple, 280 60% 50%) / 0.05); } .multi-cli-topic-title { font-size: 1rem; font-weight: 600; color: hsl(var(--foreground)); margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.5rem; letter-spacing: -0.01em; } .multi-cli-topic-description { font-size: 0.875rem; color: hsl(var(--foreground)); line-height: 1.6; white-space: pre-wrap; } /* Topic Meta Container */ .topic-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.75rem; } /* Tag Badge */ .tag-badge { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.25rem 0.5rem; background: hsl(var(--primary) / 0.1); color: hsl(var(--primary)); border-radius: 0.25rem; font-size: 0.75rem; font-weight: 500; transition: background 0.2s ease, color 0.2s ease; } .tag-badge:hover { background: hsl(var(--primary) / 0.15); } /* Additional Multi-CLI Status Variants */ .multi-cli-status.plan_generated { background: hsl(var(--success-light, 142 70% 95%)); color: hsl(var(--success, 142 70% 45%)); } .multi-cli-status.initialized, .multi-cli-status.exploring { background: hsl(var(--info-light, 220 80% 95%)); color: hsl(var(--info, 220 80% 55%)); } .multi-cli-status.completed { background: hsl(var(--success-light, 142 70% 95%)); color: hsl(var(--success, 142 70% 45%)); } .multi-cli-complexity-badge { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.25rem 0.5rem; border-radius: 0.25rem; font-size: 0.75rem; font-weight: 500; } .multi-cli-complexity-badge.high { background: hsl(var(--destructive) / 0.1); color: hsl(var(--destructive)); } .multi-cli-complexity-badge.medium { background: hsl(var(--warning-light, 45 90% 95%)); color: hsl(var(--warning, 45 90% 40%)); } .multi-cli-complexity-badge.low { background: hsl(var(--success-light, 142 70% 95%)); color: hsl(var(--success, 142 70% 45%)); } /* Multi-CLI Files Tab */ .multi-cli-files-section { margin-bottom: 1rem; } .multi-cli-files-title { font-size: 0.9rem; font-weight: 600; color: hsl(var(--foreground)); margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.5rem; } .file-tree { background: hsl(var(--muted) / 0.3); border: 1px solid hsl(var(--border)); border-radius: 0.5rem; padding: 0.75rem; } .file-tree-node { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.5rem; font-size: 0.85rem; border-radius: 0.25rem; transition: background 0.15s; } .file-tree-node:hover { background: hsl(var(--hover)); } .file-tree-node.directory { color: hsl(var(--primary)); font-weight: 500; } .file-tree-node.file { color: hsl(var(--foreground)); padding-left: 1.5rem; } .file-tree-node .file-icon { width: 1rem; height: 1rem; color: hsl(var(--muted-foreground)); } .file-tree-node.directory .file-icon { color: hsl(var(--primary)); } .file-purpose { font-size: 0.75rem; color: hsl(var(--muted-foreground)); margin-left: auto; } /* Multi-CLI Planning Tab */ .multi-cli-planning-section { margin-bottom: 1.5rem; } .planning-section-title { font-size: 0.9rem; font-weight: 600; color: hsl(var(--foreground)); margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.5rem; } .requirements-list { display: flex; flex-direction: column; gap: 0.5rem; } .requirement-item { background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: 0.5rem; padding: 0.75rem; } .requirement-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; } .requirement-id { font-weight: 600; font-size: 0.8rem; color: hsl(var(--primary)); } .requirement-priority { padding: 0.125rem 0.375rem; border-radius: 0.25rem; font-size: 0.7rem; font-weight: 500; } .requirement-priority.high { background: hsl(var(--destructive) / 0.1); color: hsl(var(--destructive)); } .requirement-priority.medium { background: hsl(var(--warning-light, 45 90% 95%)); color: hsl(var(--warning, 45 90% 40%)); } .requirement-priority.low { background: hsl(var(--success-light, 142 70% 95%)); color: hsl(var(--success, 142 70% 45%)); } .requirement-title { font-size: 0.875rem; font-weight: 500; color: hsl(var(--foreground)); margin-bottom: 0.25rem; } .requirement-description { font-size: 0.8rem; color: hsl(var(--muted-foreground)); line-height: 1.5; } .impact-items { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; } .impact-item { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.25rem 0.5rem; background: hsl(var(--muted)); border-radius: 0.25rem; font-size: 0.75rem; color: hsl(var(--foreground)); } .impact-item .impact-icon { width: 0.875rem; height: 0.875rem; color: hsl(var(--muted-foreground)); } /* Multi-CLI Decision Tab */ .multi-cli-decision-section { margin-bottom: 1.5rem; } .decision-section-title { font-size: 0.9rem; font-weight: 600; color: hsl(var(--foreground)); margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.5rem; } .solutions-grid { display: flex; flex-direction: column; gap: 0.75rem; } /* Unified Solution Card - used in both Decision and Rounds tabs */ .solution-card { background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: 0.5rem; overflow: hidden; transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } .solution-card:hover { border-color: hsl(var(--primary) / 0.3); box-shadow: 0 4px 12px hsla(var(--primary), 0.1); transform: translateY(-1px); } .solution-card.selected { border-color: hsl(var(--success, 142 70% 45%)); background: hsl(var(--success, 142 70% 45%) / 0.05); box-shadow: 0 0 0 6px hsl(var(--success, 142 70% 45%) / 0.15); } .solution-card.rejected { border-color: hsl(var(--destructive) / 0.5); background: hsl(var(--destructive) / 0.03); opacity: 0.7; text-decoration: line-through; } .solution-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.75rem; padding: 0.75rem 1rem; background: hsl(var(--muted) / 0.2); border-bottom: 1px solid hsl(var(--border)); } .solution-title { font-weight: 600; font-size: 0.95rem; color: hsl(var(--foreground)); display: flex; align-items: center; gap: 0.5rem; } .solution-status { padding: 0.25rem 0.5rem; border-radius: 0.25rem; font-size: 0.75rem; font-weight: 500; } .solution-status.selected { background: hsl(var(--success, 142 70% 45%) / 0.15); color: hsl(var(--success, 142 70% 45%)); } .solution-status.rejected { background: hsl(var(--destructive) / 0.1); color: hsl(var(--destructive)); } .solution-status.considering { background: hsl(var(--warning-light, 45 90% 95%)); color: hsl(var(--warning, 45 90% 40%)); } .solution-description { font-size: 0.85rem; color: hsl(var(--foreground)); line-height: 1.6; margin-bottom: 0.75rem; } .solution-meta { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; } .solution-meta-item { display: flex; align-items: center; gap: 0.25rem; font-size: 0.8rem; color: hsl(var(--muted-foreground)); } .confidence-meter { display: flex; align-items: center; gap: 0.5rem; } .confidence-bar { width: 60px; height: 6px; background: hsl(var(--muted)); border-radius: 3px; overflow: hidden; } .confidence-fill { height: 100%; border-radius: 3px; transition: width 0.3s ease; } .confidence-fill.high { background: hsl(var(--success, 142 70% 45%)); } .confidence-fill.medium { background: hsl(var(--warning, 45 90% 50%)); } .confidence-fill.low { background: hsl(var(--destructive)); } .confidence-value { font-size: 0.75rem; font-weight: 500; color: hsl(var(--foreground)); } /* Multi-CLI Timeline Tab */ .multi-cli-timeline { display: flex; flex-direction: column; gap: 0; } .timeline-event { display: flex; gap: 1.25rem; position: relative; margin-bottom: 0.25rem; } .timeline-marker { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; width: 2.25rem; } .timeline-dot { width: 1.5rem; height: 1.5rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 1; flex-shrink: 0; box-shadow: 0 0 0 3px currentColor; transition: all 0.2s ease; } .timeline-dot:hover { transform: scale(1.2); box-shadow: 0 0 0 8px currentColor; } .timeline-dot.proposal { background: hsl(var(--primary)); color: white; } .timeline-dot.analysis { background: hsl(var(--info, 220 80% 55%)); color: white; } .timeline-dot.decision { background: hsl(var(--success, 142 70% 45%)); color: white; } .timeline-dot.conflict { background: hsl(var(--warning, 45 90% 50%)); color: hsl(var(--foreground)); } .timeline-dot.resolution { background: hsl(var(--purple, 280 60% 50%)); color: white; } .timeline-dot i { width: 0.75rem; height: 0.75rem; } .timeline-line { width: 2px; flex: 1; min-height: 1rem; background: hsl(var(--border)); margin: 0.25rem 0; } .timeline-content { flex: 1; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: 0.5rem; padding: 1rem; margin-bottom: 0.75rem; transition: all 0.2s ease; } .timeline-content:hover { border-color: hsl(var(--primary) / 0.4); box-shadow: 0 2px 8px hsl(var(--primary) / 0.05); transform: translateX(4px); } .timeline-event-header { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.5rem; } .timeline-event-type { font-weight: 600; font-size: 0.85rem; color: hsl(var(--foreground)); } .timeline-event-time { font-size: 0.75rem; color: hsl(var(--muted-foreground)); } .timeline-event-agent { font-size: 0.75rem; color: hsl(var(--purple, 280 60% 50%)); margin-bottom: 0.25rem; } .timeline-event-description { font-size: 0.85rem; color: hsl(var(--foreground)); line-height: 1.5; } /* Multi-CLI Rounds Tab */ .multi-cli-rounds-nav { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid hsl(var(--border)); } .round-nav-btn { padding: 0.5rem 1rem; background: hsl(var(--muted)); border: 1px solid hsl(var(--border)); border-radius: 0.375rem; font-size: 0.85rem; font-weight: 500; color: hsl(var(--foreground)); cursor: pointer; transition: all 0.2s ease; } .round-nav-btn:hover { background: hsl(var(--hover)); border-color: hsl(var(--purple, 280 60% 50%) / 0.5); } .round-nav-btn.active { background: hsl(var(--purple, 280 60% 50%)); border-color: hsl(var(--purple, 280 60% 50%)); color: white; } .round-content { background: hsl(var(--muted) / 0.3); border: 1px solid hsl(var(--border)); border-radius: 0.5rem; padding: 1rem; } .round-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid hsl(var(--border)); } .round-title { font-weight: 600; font-size: 1rem; color: hsl(var(--foreground)); } .round-timestamp { font-size: 0.8rem; color: hsl(var(--muted-foreground)); } .round-section { margin-bottom: 1rem; } .round-section:last-child { margin-bottom: 0; } .round-section-title { font-size: 0.85rem; font-weight: 600; color: hsl(var(--foreground)); margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.5rem; } .round-agents { display: flex; flex-direction: column; gap: 0.5rem; } .round-agent-item { background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: 0.375rem; padding: 0.75rem; } .round-agent-name { font-weight: 500; font-size: 0.85rem; color: hsl(var(--purple, 280 60% 50%)); margin-bottom: 0.25rem; } .round-agent-response { font-size: 0.8rem; color: hsl(var(--foreground)); line-height: 1.5; white-space: pre-wrap; } .round-convergence { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: 0.375rem; } .convergence-indicator { font-weight: 500; font-size: 0.85rem; } .convergence-indicator.converged { color: hsl(var(--success, 142 70% 45%)); } .convergence-indicator.not-converged { color: hsl(var(--warning, 45 90% 40%)); } .round-loading { display: flex; align-items: center; justify-content: center; padding: 2rem; color: hsl(var(--muted-foreground)); font-size: 0.9rem; } /* Multi-CLI Empty States */ .multi-cli-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4rem 2rem; text-align: center; color: hsl(var(--muted-foreground)); background: hsl(var(--muted) / 0.2); border: 1px dashed hsl(var(--border)); border-radius: 0.75rem; } .multi-cli-empty-icon { width: 3.5rem; height: 3.5rem; margin-bottom: 1.25rem; color: hsl(var(--purple, 280 60% 50%) / 0.4); animation: float 3s ease-in-out infinite; } .multi-cli-empty-title { font-size: 1rem; font-weight: 500; margin-bottom: 0.5rem; color: hsl(var(--foreground)); } .multi-cli-empty-description { font-size: 0.875rem; color: hsl(var(--muted-foreground)); line-height: 1.6; } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } /* =================================== Multi-CLI Detail Page Extended Styles =================================== */ /* Scope Lists */ .scope-list { display: flex; flex-direction: column; gap: 0.5rem; margin: 0; padding-left: 0; font-size: 0.85rem; } .scope-list li { padding: 0.5rem 0.75rem; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: 0.375rem; font-family: var(--font-mono); color: hsl(var(--foreground)); line-height: 1.5; transition: all 0.2s ease; } .scope-list li:hover { border-color: hsl(var(--primary) / 0.5); transform: translateX(4px); } .scope-list.excluded li { background: hsl(var(--destructive) / 0.05); border-color: hsl(var(--destructive) / 0.2); color: hsl(var(--muted-foreground)); text-decoration: line-through; opacity: 0.7; } .scope-list.excluded li:hover { border-color: hsl(var(--destructive) / 0.4); } /* Acceptance List */ .acceptance-list { display: flex; flex-direction: column; gap: 0.5rem; } .acceptance-item { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.75rem; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: 0.375rem; transition: border-color 0.2s ease; } .acceptance-item:hover { border-color: hsl(var(--primary) / 0.3); } .acceptance-item.met { border-color: hsl(var(--success, 142 70% 45%) / 0.5); background: hsl(var(--success, 142 70% 45%) / 0.03); } .acceptance-item.unmet { border-color: hsl(var(--destructive) / 0.3); background: hsl(var(--destructive) / 0.02); } .acceptance-check { display: flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; border-radius: 0.25rem; flex-shrink: 0; margin-top: 0.125rem; } .acceptance-item.met .acceptance-check { background: hsl(var(--success, 142 70% 45%)); color: white; } .acceptance-item.unmet .acceptance-check { background: hsl(var(--muted)); border: 1px solid hsl(var(--border)); color: hsl(var(--muted-foreground)); } .acceptance-check i { width: 0.75rem; height: 0.75rem; } .acceptance-id { font-weight: 600; font-size: 0.75rem; color: hsl(var(--primary)); margin-bottom: 0.25rem; } .acceptance-desc { font-size: 0.85rem; color: hsl(var(--foreground)); line-height: 1.5; } /* Decision Status Bar */ .decision-status-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem; background: hsl(var(--muted) / 0.3); border: 1px solid hsl(var(--border)); border-radius: 0.5rem; margin-bottom: 1rem; } .decision-status-bar.converged { border-color: hsl(var(--success, 142 70% 45%) / 0.5); background: hsl(var(--success, 142 70% 45%) / 0.05); } .decision-status-bar.divergent { border-color: hsl(var(--warning, 45 90% 50%) / 0.5); background: hsl(var(--warning, 45 90% 50%) / 0.05); } .decision-summary { display: flex; flex-direction: column; gap: 0.5rem; flex: 1; } .decision-summary-text { font-size: 0.875rem; color: hsl(var(--foreground)); line-height: 1.5; } .decision-confidence { display: flex; align-items: center; gap: 0.75rem; } .decision-confidence-label { font-size: 0.75rem; font-weight: 500; color: hsl(var(--muted-foreground)); } .decision-confidence-bar { width: 100px; height: 8px; background: hsl(var(--muted)); border-radius: 4px; overflow: hidden; } .decision-confidence-fill { height: 100%; border-radius: 4px; transition: width 0.3s ease; } .decision-status-bar.converged .decision-confidence-fill { background: hsl(var(--success, 142 70% 45%)); } .decision-status-bar.divergent .decision-confidence-fill { background: hsl(var(--warning, 45 90% 50%)); } .decision-confidence-value { font-size: 0.8rem; font-weight: 600; color: hsl(var(--foreground)); } /* Pros and Cons Lists */ .pros-list, .cons-list { display: flex; flex-direction: column; gap: 0.5rem; margin: 0; padding: 0; list-style: none; } .pro-item, .con-item { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.75rem 1rem; border-radius: 0.5rem; font-size: 0.85rem; line-height: 1.6; color: hsl(var(--foreground)); transition: all 0.2s ease; position: relative; } .pro-item { background: hsl(142 71% 45% / 0.08); border-left: 4px solid #10b981; } .pro-item:hover { background: hsl(142 71% 45% / 0.12); transform: translateX(4px); } .pro-item::before { content: "+"; font-weight: 700; color: #10b981; flex-shrink: 0; width: 1.25rem; height: 1.25rem; display: flex; align-items: center; justify-content: center; background: #10b981; color: white; border-radius: 50%; font-size: 1rem; line-height: 1; } .con-item { background: hsl(0 84% 60% / 0.08); border-left: 4px solid #ef4444; } .con-item:hover { background: hsl(0 84% 60% / 0.12); transform: translateX(4px); } .con-item::before { content: "-"; font-weight: 700; color: #ef4444; flex-shrink: 0; width: 1.25rem; height: 1.25rem; display: flex; align-items: center; justify-content: center; background: #ef4444; color: white; border-radius: 50%; font-size: 1.25rem; line-height: 1; } /* Rounds Navigation */ .rounds-nav { display: flex; gap: 0.5rem; flex-wrap: wrap; padding-bottom: 1rem; border-bottom: 1px solid hsl(var(--border)); margin-bottom: 1rem; background: hsl(var(--muted) / 0.2); padding: 0.5rem; border-radius: 0.5rem; } .round-item { padding: 0.5rem 1rem; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: 0.5rem; font-size: 0.8rem; font-weight: 500; color: hsl(var(--muted-foreground)); cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); display: flex; align-items: center; gap: 0.375rem; } .round-item:hover { background: hsl(var(--hover)); border-color: hsl(var(--purple, 280 60% 50%) / 0.5); color: hsl(var(--foreground)); transform: translateY(-2px); box-shadow: 0 2px 8px hsl(var(--purple, 280 60% 50%) / 0.1); } .round-item.active { background: hsl(var(--purple, 280 60% 50%)); border-color: hsl(var(--purple, 280 60% 50%)); color: white; box-shadow: 0 2px 8px hsl(var(--purple, 280 60% 50%) / 0.25); } .round-item i { width: 0.875rem; height: 0.875rem; } /* Timeline Event Parts */ .event-type { display: inline-block; padding: 0.125rem 0.5rem; background: hsl(var(--primary) / 0.1); color: hsl(var(--primary)); border-radius: 0.25rem; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.025em; } .event-type.proposal { background: hsl(var(--primary) / 0.1); color: hsl(var(--primary)); } .event-type.analysis { background: hsl(var(--info, 220 80% 55%) / 0.1); color: hsl(var(--info, 220 80% 55%)); } .event-type.decision { background: hsl(var(--success, 142 70% 45%) / 0.1); color: hsl(var(--success, 142 70% 45%)); } .event-type.conflict { background: hsl(var(--warning, 45 90% 50%) / 0.1); color: hsl(var(--warning, 45 90% 40%)); } .event-type.resolution { background: hsl(var(--purple, 280 60% 50%) / 0.1); color: hsl(var(--purple, 280 60% 50%)); } .event-contributor { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.8rem; font-weight: 500; color: hsl(var(--purple, 280 60% 50%)); } .event-contributor i { width: 0.875rem; height: 0.875rem; } .event-summary { font-size: 0.875rem; font-weight: 500; color: hsl(var(--foreground)); line-height: 1.5; margin: 0.5rem 0; } .event-evidence { font-size: 0.8rem; color: hsl(var(--muted-foreground)); line-height: 1.5; padding: 0.5rem 0.75rem; background: hsl(var(--muted) / 0.5); border-radius: 0.375rem; border-left: 2px solid hsl(var(--border)); margin-top: 0.5rem; } .event-evidence code { font-size: 0.75rem; padding: 0.125rem 0.375rem; background: hsl(var(--muted)); border-radius: 0.25rem; color: hsl(var(--primary)); } /* File Tree List */ .file-tree-list { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.5rem; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: 0.375rem; } /* Impact List */ .impact-list { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.5rem; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: 0.375rem; } .impact-item { display: flex; flex-direction: column; gap: 0.375rem; padding: 0.75rem; background: hsl(var(--muted) / 0.3); border-radius: 0.375rem; border-left: 3px solid hsl(var(--warning)); } .impact-item.impact-high { border-left-color: hsl(var(--destructive)); } .impact-item.impact-medium { border-left-color: hsl(var(--warning)); } .impact-item.impact-low { border-left-color: hsl(var(--success)); } .impact-header { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .impact-file { font-family: var(--font-mono); font-size: 0.85rem; color: hsl(var(--foreground)); background: hsl(var(--muted)); padding: 0.125rem 0.375rem; border-radius: 0.25rem; } .impact-line { font-size: 0.8rem; color: hsl(var(--muted-foreground)); } .impact-score { font-size: 0.75rem; font-weight: 500; padding: 0.125rem 0.5rem; border-radius: 0.25rem; text-transform: uppercase; } .impact-score.high { background: hsl(var(--destructive) / 0.15); color: hsl(var(--destructive)); } .impact-score.medium { background: hsl(var(--warning) / 0.15); color: hsl(var(--warning)); } .impact-score.low { background: hsl(var(--success) / 0.15); color: hsl(var(--success)); } .impact-reason { font-size: 0.85rem; color: hsl(var(--muted-foreground)); line-height: 1.5; padding-left: 0.25rem; } /* Dependencies List */ .deps-list { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.5rem; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: 0.375rem; } /* Timeline Connecting Line */ .timeline-event::before { content: ""; position: absolute; left: 0.9375rem; top: 1.75rem; bottom: -0.5rem; width: 2px; background: hsl(var(--border)); z-index: 0; } .timeline-event:last-child::before { display: none; } /* Round Solutions */ .round-solutions { margin-top: 1.5rem; } .round-solutions > strong { display: block; margin-bottom: 0.75rem; font-size: 0.95rem; color: hsl(var(--foreground)); } .solutions-list { display: flex; flex-direction: column; gap: 1rem; } /* Solution Card Styles (extensions to unified .solution-card above) */ .solution-number { display: inline-flex; align-items: center; justify-content: center; min-width: 1.5rem; height: 1.5rem; background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); border-radius: 0.25rem; font-size: 0.75rem; font-weight: 600; margin-right: 0.5rem; } .solution-name { font-weight: 600; font-size: 0.95rem; color: hsl(var(--foreground)); flex: 1; } .solution-meta { display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.85rem; } .source-clis { display: flex; gap: 0.375rem; flex-wrap: wrap; } .cli-badge { display: inline-block; padding: 0.125rem 0.5rem; background: hsl(var(--purple, 280 60% 50%) / 0.15); color: hsl(var(--purple, 280 60% 50%)); border: 1px solid hsl(var(--purple, 280 60% 50%) / 0.3); border-radius: 0.25rem; font-size: 0.75rem; font-weight: 500; } .solution-scores { display: flex; gap: 0.375rem; flex-wrap: wrap; } .score-badge { display: inline-block; padding: 0.125rem 0.5rem; border-radius: 0.25rem; font-size: 0.75rem; font-weight: 500; } .score-badge.feasibility { background: hsl(var(--success) / 0.15); color: hsl(var(--success)); border: 1px solid hsl(var(--success) / 0.3); } .score-badge.effort-low { background: hsl(var(--success) / 0.15); color: hsl(var(--success)); border: 1px solid hsl(var(--success) / 0.3); } .score-badge.effort-medium { background: hsl(var(--warning) / 0.15); color: hsl(var(--warning)); border: 1px solid hsl(var(--warning) / 0.3); } .score-badge.effort-high { background: hsl(var(--destructive) / 0.15); color: hsl(var(--destructive)); border: 1px solid hsl(var(--destructive) / 0.3); } .score-badge.risk-low { background: hsl(var(--success) / 0.15); color: hsl(var(--success)); border: 1px solid hsl(var(--success) / 0.3); } .score-badge.risk-medium { background: hsl(var(--warning) / 0.15); color: hsl(var(--warning)); border: 1px solid hsl(var(--warning) / 0.3); } .score-badge.risk-high { background: hsl(var(--destructive) / 0.15); color: hsl(var(--destructive)); border: 1px solid hsl(var(--destructive) / 0.3); } .solution-summary { padding: 1rem; font-size: 0.875rem; color: hsl(var(--foreground)); line-height: 1.5; border-bottom: 1px solid hsl(var(--border)); } .solution-approach, .solution-dependencies, .solution-concerns { border-bottom: 1px solid hsl(var(--border)); } .solution-approach:last-child, .solution-dependencies:last-child, .solution-concerns:last-child { border-bottom: none; } .solution-tasks, .solution-milestones, .internal-deps, .external-deps { margin-top: 0.75rem; } .solution-tasks > strong, .solution-milestones > strong, .internal-deps > strong, .external-deps > strong { display: block; margin-bottom: 0.5rem; font-size: 0.85rem; color: hsl(var(--foreground)); } .task-list, .milestone-list, .dep-list, .concern-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.375rem; } .task-item, .milestone-item, .dep-item, .concern-item { padding: 0.375rem 0.5rem; background: hsl(var(--muted) / 0.2); border-radius: 0.25rem; font-size: 0.85rem; color: hsl(var(--foreground)); line-height: 1.4; } .task-id { display: inline-block; min-width: 2rem; font-weight: 600; color: hsl(var(--primary)); margin-right: 0.5rem; font-size: 0.75rem; } .task-name { flex: 1; } .task-key-point { display: block; margin-top: 0.25rem; font-size: 0.75rem; color: hsl(var(--muted-foreground)); font-style: italic; } .execution-flow { margin-top: 0.75rem; } .execution-flow > strong { display: block; margin-bottom: 0.5rem; font-size: 0.85rem; color: hsl(var(--foreground)); } .flow-code { display: block; padding: 0.5rem; background: hsl(var(--muted)); border-radius: 0.25rem; font-size: 0.8rem; font-family: var(--font-mono); color: hsl(var(--foreground)); overflow-x: auto; } /* =================================== Multi-CLI Right Toolbar =================================== */ /* Container with toolbar layout */ .multi-cli-detail-with-toolbar { display: flex; position: relative; gap: 0; } .multi-cli-main-content { flex: 1; min-width: 0; transition: margin-right 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .multi-cli-detail-with-toolbar.toolbar-expanded .multi-cli-main-content { margin-right: 320px; } /* Toolbar Container */ .multi-cli-toolbar { position: fixed; top: 80px; right: 0; bottom: 0; width: 320px; background: hsl(var(--card)); border-left: 1px solid hsl(var(--border)); display: flex; flex-direction: column; z-index: 50; transform: translateX(calc(100% - 48px)); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: -4px 0 16px rgb(0 0 0 / 0.1); } .multi-cli-toolbar.expanded { transform: translateX(0); } .multi-cli-toolbar.collapsed { transform: translateX(calc(100% - 48px)); } /* Toggle Button */ .toolbar-toggle-btn { position: absolute; left: 0; top: 50%; transform: translate(-50%, -50%); width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: 50%; cursor: pointer; z-index: 51; transition: all 0.2s ease; box-shadow: 0 2px 8px rgb(0 0 0 / 0.15); } .toolbar-toggle-btn:hover { background: hsl(var(--primary)); border-color: hsl(var(--primary)); color: hsl(var(--primary-foreground)); transform: translate(-50%, -50%) scale(1.1); } .toolbar-toggle-btn i { color: hsl(var(--muted-foreground)); transition: color 0.2s ease; } .toolbar-toggle-btn:hover i { color: hsl(var(--primary-foreground)); } /* Toolbar Content */ .toolbar-content { flex: 1; display: flex; flex-direction: column; overflow: hidden; padding: 0; opacity: 0; transition: opacity 0.2s ease 0.1s; } .multi-cli-toolbar.expanded .toolbar-content { opacity: 1; } .multi-cli-toolbar.collapsed .toolbar-content { opacity: 0; pointer-events: none; } /* Toolbar Header */ .toolbar-header { padding: 1rem; border-bottom: 1px solid hsl(var(--border)); background: hsl(var(--muted) / 0.3); } .toolbar-title { display: flex; align-items: center; gap: 0.5rem; margin: 0; font-size: 0.9rem; font-weight: 600; color: hsl(var(--foreground)); } .toolbar-title i { color: hsl(var(--primary)); } .toolbar-count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.5rem; height: 1.5rem; padding: 0 0.375rem; background: hsl(var(--primary) / 0.15); color: hsl(var(--primary)); border-radius: 0.75rem; font-size: 0.75rem; font-weight: 600; margin-left: auto; } /* Toolbar Actions */ .toolbar-actions { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; border-bottom: 1px solid hsl(var(--border)); } .toolbar-action-btn { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: hsl(var(--muted)); border: 1px solid hsl(var(--border)); border-radius: 0.375rem; cursor: pointer; transition: all 0.15s ease; } .toolbar-action-btn i { color: hsl(var(--muted-foreground)); } .toolbar-action-btn:hover { background: hsl(var(--primary) / 0.1); border-color: hsl(var(--primary) / 0.3); } .toolbar-action-btn:hover i { color: hsl(var(--primary)); } /* Toolbar Task List */ .toolbar-task-list { flex: 1; overflow-y: auto; padding: 0.5rem; scrollbar-width: thin; } .toolbar-task-list::-webkit-scrollbar { width: 6px; } .toolbar-task-list::-webkit-scrollbar-track { background: transparent; } .toolbar-task-list::-webkit-scrollbar-thumb { background: hsl(var(--border)); border-radius: 3px; } .toolbar-task-item { display: flex; align-items: flex-start; gap: 0.625rem; padding: 0.625rem 0.75rem; background: hsl(var(--muted) / 0.3); border: 1px solid hsl(var(--border)); border-radius: 0.5rem; margin-bottom: 0.375rem; cursor: pointer; transition: all 0.2s ease; } .toolbar-task-item:hover { background: hsl(var(--primary) / 0.08); border-color: hsl(var(--primary) / 0.3); transform: translateX(-2px); } .toolbar-task-item:active { transform: translateX(-2px) scale(0.98); } .toolbar-task-num { display: inline-flex; align-items: center; justify-content: center; min-width: 1.5rem; height: 1.5rem; background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); border-radius: 0.25rem; font-size: 0.7rem; font-weight: 600; flex-shrink: 0; } .toolbar-task-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; } .toolbar-task-title { font-size: 0.8rem; font-weight: 500; color: hsl(var(--foreground)); line-height: 1.4; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .toolbar-task-scope { font-size: 0.7rem; color: hsl(var(--muted-foreground)); font-family: var(--font-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Toolbar Empty State */ .toolbar-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem 1rem; color: hsl(var(--muted-foreground)); text-align: center; gap: 0.75rem; } .toolbar-empty i { color: hsl(var(--muted-foreground) / 0.5); } .toolbar-empty span { font-size: 0.8rem; } /* Toolbar Session Info */ .toolbar-session-info { padding: 0.75rem 1rem; border-top: 1px solid hsl(var(--border)); background: hsl(var(--muted) / 0.2); margin-top: auto; } .toolbar-info-item { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 0.5rem; } .toolbar-info-item:last-child { margin-bottom: 0; } .toolbar-info-label { font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.025em; color: hsl(var(--muted-foreground)); } .toolbar-info-value { font-size: 0.75rem; color: hsl(var(--foreground)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .toolbar-info-value.toolbar-summary { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; white-space: normal; line-height: 1.4; } /* Task Highlight Animation */ .fix-task-summary-item.toolbar-highlight { animation: toolbarHighlightPulse 2s ease-out; } @keyframes toolbarHighlightPulse { 0% { box-shadow: 0 0 0 0 hsl(var(--primary)); } 20% { box-shadow: 0 0 0 4px hsl(var(--primary) / 0.4); border-color: hsl(var(--primary)); } 100% { box-shadow: 0 0 0 0 hsl(var(--primary) / 0); border-color: hsl(var(--border)); } } /* Responsive adjustments */ @media (max-width: 1024px) { .multi-cli-toolbar { width: 280px; } } @media (max-width: 768px) { .multi-cli-toolbar { width: 100%; top: auto; bottom: 0; height: 50vh; transform: translateY(calc(100% - 48px)); border-left: none; border-top: 1px solid hsl(var(--border)); border-radius: 1rem 1rem 0 0; } .multi-cli-toolbar.expanded { transform: translateY(0); } .multi-cli-toolbar.collapsed { transform: translateY(calc(100% - 48px)); } .toolbar-toggle-btn { left: 50%; top: 0; transform: translate(-50%, -50%); } .toolbar-toggle-btn:hover { transform: translate(-50%, -50%) scale(1.1); } } /* ========== Discussion Section Styles ========== */ .multi-cli-discussion-section { padding: 1rem; } .discussion-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid hsl(var(--border) / 0.5); } .discussion-title { font-size: 1.125rem; font-weight: 600; color: hsl(var(--foreground)); margin: 0; } .discussion-status { font-size: 0.75rem; padding: 0.25rem 0.5rem; border-radius: 4px; text-transform: capitalize; } .discussion-status.converged { background: hsl(var(--success) / 0.15); color: hsl(var(--success)); } .discussion-status.analyzing { background: hsl(var(--warning) / 0.15); color: hsl(var(--warning)); } .discussion-round { margin-bottom: 0.75rem; border: 1px solid hsl(var(--border)); border-radius: 8px; overflow: hidden; background: hsl(var(--card)); } .discussion-round-header { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; background: hsl(var(--muted) / 0.3); cursor: pointer; transition: background-color 0.2s; } .discussion-round-header:hover { background: hsl(var(--muted) / 0.5); } .round-title-group { display: flex; align-items: center; gap: 0.5rem; flex: 1; } .round-badge { font-size: 0.75rem; font-weight: 600; padding: 0.125rem 0.5rem; background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); border-radius: 4px; } .round-timestamp { font-size: 0.75rem; color: hsl(var(--muted-foreground)); } .round-indicators { display: flex; align-items: center; gap: 0.5rem; } .convergence-badge { font-size: 0.7rem; padding: 0.125rem 0.375rem; background: hsl(var(--success) / 0.15); color: hsl(var(--success)); border-radius: 4px; } .recommendation-badge { font-size: 0.7rem; padding: 0.125rem 0.375rem; border-radius: 4px; text-transform: capitalize; } .recommendation-badge.converged { background: hsl(var(--success) / 0.15); color: hsl(var(--success)); } .recommendation-badge.continue { background: hsl(var(--info) / 0.15); color: hsl(var(--info)); } .recommendation-badge.user_input_needed { background: hsl(var(--warning) / 0.15); color: hsl(var(--warning)); } .discussion-round-content { padding: 1rem; border-top: 1px solid hsl(var(--border) / 0.5); } .round-section-title { font-size: 0.8rem; font-weight: 600; color: hsl(var(--muted-foreground)); margin: 0.75rem 0 0.5rem; display: flex; align-items: center; gap: 0.375rem; } .round-section-title:first-child { margin-top: 0; } .agent-badges { display: flex; flex-wrap: wrap; gap: 0.375rem; } .agent-badge { font-size: 0.7rem; padding: 0.125rem 0.5rem; background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); border-radius: 999px; } .solution-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.75rem; margin-top: 0.5rem; } .solution-mini-card { border: 1px solid hsl(var(--border)); border-radius: 6px; padding: 0.75rem; background: hsl(var(--background)); } .solution-mini-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; } .solution-mini-title { font-size: 0.8rem; font-weight: 500; flex: 1; } .solution-mini-source { font-size: 0.65rem; color: hsl(var(--muted-foreground)); } .solution-mini-description { font-size: 0.75rem; color: hsl(var(--muted-foreground)); line-height: 1.4; } /* Discussion Round Expand/Collapse */ .discussion-round.collapsed .discussion-round-content { display: none; } .discussion-round-header .expand-icon { transition: transform 0.2s; } .discussion-round.collapsed .discussion-round-header .expand-icon { transform: rotate(-90deg); } /* ========== Association Section Styles ========== */ .association-section { margin-bottom: 1.5rem; } .association-section-title { font-size: 0.9rem; font-weight: 600; color: hsl(var(--foreground)); margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.375rem; } .association-section-title i { color: hsl(var(--primary)); } .association-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; } .association-card { border: 1px solid hsl(var(--border)); border-radius: 8px; padding: 1rem; background: hsl(var(--card)); transition: box-shadow 0.2s, border-color 0.2s; } .association-card:hover { box-shadow: 0 4px 12px hsl(var(--foreground) / 0.08); border-color: hsl(var(--border)); } .association-card .card-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; } .association-card .card-number { width: 1.5rem; height: 1.5rem; border-radius: 50%; background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 600; flex-shrink: 0; } .association-card .card-title { font-weight: 500; flex: 1; font-size: 0.9rem; } .association-card .card-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-bottom: 0.75rem; } .association-card .metric { text-align: center; } .association-card .metric-label { display: block; font-size: 0.65rem; color: hsl(var(--muted-foreground)); margin-bottom: 0.125rem; } .association-card .metric-value { font-size: 0.85rem; font-weight: 600; } .association-card .metric-value.effort-low { color: hsl(var(--success)); } .association-card .metric-value.effort-medium { color: hsl(var(--warning)); } .association-card .metric-value.effort-high { color: hsl(var(--error)); } .association-card .metric-value.risk-low { color: hsl(var(--success)); } .association-card .metric-value.risk-medium { color: hsl(var(--warning)); } .association-card .metric-value.risk-high { color: hsl(var(--error)); } .association-card .card-section-title { font-size: 0.75rem; font-weight: 600; color: hsl(var(--muted-foreground)); margin: 0.75rem 0 0.375rem; } .dependency-list, .consensus-list { list-style: none; padding: 0; margin: 0.5rem 0 0 0; } .dependency-item, .consensus-item { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.375rem 0; font-size: 0.8rem; border-bottom: 1px solid hsl(var(--border) / 0.3); } .dependency-item:last-child, .consensus-item:last-child { border-bottom: none; } .dep-type { font-size: 0.65rem; padding: 0.125rem 0.375rem; border-radius: 4px; text-transform: uppercase; flex-shrink: 0; } .dep-type.internal { background: hsl(var(--info) / 0.15); color: hsl(var(--info)); } .dep-type.external { background: hsl(var(--warning) / 0.15); color: hsl(var(--warning)); } .dep-name { flex: 1; word-break: break-word; } .consensus-icon { color: hsl(var(--success)); flex-shrink: 0; } .consensus-text { flex: 1; line-height: 1.4; } /* Association Empty State */ .association-empty { text-align: center; padding: 2rem; color: hsl(var(--muted-foreground)); } .association-empty i { font-size: 2rem; margin-bottom: 0.5rem; opacity: 0.5; } .association-empty p { margin: 0; font-size: 0.875rem; } /* Discussion/Association Responsive */ @media (max-width: 768px) { .association-cards-grid { grid-template-columns: 1fr; } .solution-cards-grid { grid-template-columns: 1fr; } .association-card .card-metrics { grid-template-columns: repeat(3, 1fr); } }