claude-code-workflow 6.3.26 → 6.3.28

package/ccw/src/templates/dashboard-css/04-lite-tasks.css

@@ -1179,3 +1179,2445 @@
   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);
+  }
+}
+