@in-the-loop-labs/pair-review 3.5.2 → 3.7.0

package/public/css/pr.css

@@ -1445,7 +1445,8 @@
 
 /* File header comment button and file header chat button */
 .file-header-comment-btn,
-.file-header-chat-btn {
+.file-header-chat-btn,
+.file-header-summary-toggle {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1459,38 +1460,66 @@
   color: var(--color-text-secondary, #656d76);
   transition: background-color 0.15s, color 0.15s, border-color 0.15s;
   flex-shrink: 0;
+  position: relative;
 }
 
 .file-header-comment-btn:hover,
-.file-header-chat-btn:hover {
+.file-header-chat-btn:hover,
+.file-header-summary-toggle:not([disabled]):hover {
   background-color: var(--color-accent-bg, rgba(9, 105, 218, 0.1));
   border-color: var(--color-accent-primary, #0969da);
   color: var(--color-accent-primary, #0969da);
 }
 
 .file-header-comment-btn:active,
-.file-header-chat-btn:active {
+.file-header-chat-btn:active,
+.file-header-summary-toggle:not([disabled]):active {
   background-color: var(--color-accent-bg, rgba(9, 105, 218, 0.15));
 }
 
 .file-header-comment-btn svg,
-.file-header-chat-btn svg {
+.file-header-chat-btn svg,
+.file-header-summary-toggle svg {
   width: 16px;
   height: 16px;
 }
 
 [data-theme="dark"] .file-header-comment-btn,
-[data-theme="dark"] .file-header-chat-btn {
+[data-theme="dark"] .file-header-chat-btn,
+[data-theme="dark"] .file-header-summary-toggle {
   color: #8b949e;
 }
 
 [data-theme="dark"] .file-header-comment-btn:hover,
-[data-theme="dark"] .file-header-chat-btn:hover {
+[data-theme="dark"] .file-header-chat-btn:hover,
+[data-theme="dark"] .file-header-summary-toggle:not([disabled]):hover {
   background-color: rgba(56, 139, 253, 0.15);
   border-color: #58a6ff;
   color: #58a6ff;
 }
 
+/* Disabled state — no summaries available for this file */
+.file-header-summary-toggle[disabled] {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* Off state — summaries hidden for this file. Shows the same slash overlay
+   used by the toolbar toggle so the on/off state is visually distinct. */
+.file-header-summary-toggle.summaries-off:not([disabled])::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 18%;
+  right: 18%;
+  height: 2px;
+  background-color: currentColor;
+  transform: rotate(-25deg);
+  transform-origin: center;
+  pointer-events: none;
+  border-radius: 1px;
+}
+
 /* Has comments state - filled icon with accent color */
 .file-header-comment-btn.has-comments {
   color: var(--color-accent-primary, #0969da);
@@ -2657,164 +2686,6 @@ tr.newly-expanded .d2h-code-line-ctn {
   background-color: var(--color-bg-secondary);
 }
 
-/* Modal Styles */
-.modal-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 1000;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.modal-backdrop {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.5);
-  cursor: pointer;
-}
-
-.modal-container {
-  position: relative;
-  width: min(960px, 90vw);
-  height: 520px; /* Increased from 420px to show all 4 levels without scrolling */
-  background: var(--color-bg-primary, #ffffff);
-  border-radius: 20px;
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  border: 1px solid var(--color-border-default, #d1d9e0);
-}
-
-.modal-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 24px 24px 16px 24px;
-  border-bottom: 1px solid var(--ai-border, rgba(217, 119, 6, 0.3));
-  background: linear-gradient(to right, var(--ai-subtle, rgba(217, 119, 6, 0.08)), transparent);
-}
-
-.modal-header h3 {
-  font-size: 18px;
-  font-weight: 600;
-  color: var(--ai-primary, #d97706);
-  margin: 0;
-}
-
-.modal-close-btn {
-  background: none;
-  border: none;
-  padding: 4px;
-  cursor: pointer;
-  border-radius: 4px;
-  color: var(--color-text-secondary, #656d76);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.modal-close-btn:hover {
-  background: var(--color-bg-tertiary, #f6f8fa);
-  color: var(--color-text-primary, #24292f);
-}
-
-.modal-body {
-  padding: 16px 24px;
-  flex: 1;
-  overflow-y: auto;
-}
-
-.modal-footer {
-  padding: 16px 24px 24px 24px;
-  display: flex;
-  gap: 8px;
-  justify-content: flex-end;
-  border-top: 1px solid var(--color-border-default, #d1d9e0);
-}
-
-.modal-footer .btn {
-  padding: 8px 16px;
-  font-size: 14px;
-}
-
-/* Confirm dialog buttons should be centered */
-.confirm-dialog-container .modal-footer {
-  justify-content: center;
-}
-
-/* When a secondary button is visible (3 buttons), widen and stack vertically.
-   column-reverse puts Confirm (primary) on top, Cancel on bottom. */
-.confirm-dialog-container.has-secondary {
-  min-width: 440px;
-}
-
-.confirm-dialog-container.has-secondary .modal-footer {
-  flex-direction: column-reverse;
-  align-items: stretch;
-}
-
-.confirm-dialog-container.has-secondary .modal-footer .btn {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-/* Button description subtitles */
-.modal-footer .btn .btn-label {
-  display: block;
-}
-
-.modal-footer .btn .btn-desc {
-  display: block;
-  font-size: 12px;
-  font-weight: normal;
-  opacity: 0.7;
-  margin-top: 2px;
-}
-
-/* Dialogs spawned from within other modals need higher z-index */
-#text-input-dialog,
-#confirm-dialog {
-  z-index: 10000; /* Must stack above analysis-config-overlay (1100) */
-}
-
-.text-input-dialog-field {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-.text-input-dialog-field label {
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--color-fg-default, #1f2328);
-}
-
-.text-input-dialog-field input {
-  padding: 8px 12px;
-  font-size: 14px;
-  border: 1px solid var(--color-border-default, #d1d9e0);
-  border-radius: 6px;
-  background: var(--color-bg-primary, #ffffff);
-  color: var(--color-fg-default, #1f2328);
-  outline: none;
-  width: 100%;
-  box-sizing: border-box;
-}
-
-.text-input-dialog-field input:focus {
-  border-color: var(--color-accent-fg, #0969da);
-  box-shadow: 0 0 0 3px rgba(9, 105, 218, 0.3);
-}
-
 /* Status Indicator Styles */
 .status-indicator {
   display: none;
@@ -2892,43 +2763,6 @@ tr.newly-expanded .d2h-code-line-ctn {
   color: var(--color-text-secondary, #656d76);
 }
 
-/* Dark theme adjustments for modal */
-[data-theme="dark"] .modal-container {
-  background: var(--color-bg-primary);
-  border-color: var(--color-border-default);
-}
-
-[data-theme="dark"] .modal-header {
-  border-color: var(--color-border-default);
-}
-
-[data-theme="dark"] .modal-footer {
-  border-color: var(--color-border-default);
-}
-
-[data-theme="dark"] .modal-close-btn:hover {
-  background: var(--color-bg-secondary);
-}
-
-[data-theme="dark"] .modal-body {
-  color: var(--color-text-primary); /* Better contrast for dark mode */
-}
-
-[data-theme="dark"] .text-input-dialog-field label {
-  color: var(--color-fg-default, #f0f6fc);
-}
-
-[data-theme="dark"] .text-input-dialog-field input {
-  background: var(--color-bg-tertiary, #161b22);
-  border-color: var(--color-border-default, #30363d);
-  color: var(--color-fg-default, #f0f6fc);
-}
-
-[data-theme="dark"] .text-input-dialog-field input:focus {
-  border-color: var(--color-accent-fg, #58a6ff);
-  box-shadow: 0 0 0 3px rgba(56, 139, 253, 0.3);
-}
-
 [data-theme="dark"] .status-indicator {
   background: var(--color-bg-primary);
   border-color: var(--color-border-primary);
@@ -9916,1668 +9750,126 @@ body.resizing * {
   background: var(--color-text-tertiary);
 }
 
-/* ============================================
-   AI Analysis Configuration Modal
-   ============================================ */
+/* ==========================================================================
+   File-Level Comments Zone
+   Collapsible section between file header and diff content
+   ========================================================================== */
 
-.analysis-config-overlay {
-  z-index: 1100;
+/* CSS Variables for file-level comments */
+:root {
+  --file-comment-bg: #f6f8fa;
+  --file-comment-border: #d0d7de;
+  --file-comment-accent: linear-gradient(135deg, #0969da 0%, #8250df 100%);
+  --file-comment-header-bg: #eaeef2;
 }
 
-.analysis-config-overlay.visible {
-  opacity: 1;
+[data-theme="dark"] {
+  --file-comment-bg: #1c2128;
+  --file-comment-border: #30363d;
+  --file-comment-header-bg: #21262d;
 }
 
-.analysis-config-overlay.visible .analysis-config-container {
-  transform: translateY(0) scale(1);
-  opacity: 1;
+/* File Comments Zone Container - always visible (no collapse)
+   Zone is invisible when empty - styling only applied when has content via :has() */
+
+/* Conditional styling - only show background/border when zone has actual content */
+.file-comments-zone:has(.file-comment-card),
+.file-comments-zone:has(.file-comment-form) {
+  background: var(--file-comment-bg);
+  border-bottom: 1px solid var(--file-comment-border);
 }
 
-.analysis-config-container {
-  width: 90vw;
-  max-width: min(900px, calc(100vw - 32px));
-  height: auto; /* Override fixed height from .modal-container */
-  max-height: min(90vh, calc(100vh - 32px));
+/* Comments Container - only has padding when there's content */
+.file-comments-container {
   display: flex;
   flex-direction: column;
-  transform: translateY(8px) scale(0.98);
-  opacity: 0;
-  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
-              opacity 0.2s ease-out;
-  border-radius: 12px;
-  overflow: hidden;
-  box-shadow:
-    0 0 0 1px var(--color-border-primary),
-    0 16px 70px -12px rgba(0, 0, 0, 0.35),
-    0 4px 16px rgba(0, 0, 0, 0.1);
-  /* Ensure the dialog content is visible from the top */
-  margin: auto;
+  gap: 12px;
 }
 
-[data-theme="dark"] .analysis-config-container {
-  box-shadow:
-    0 0 0 1px var(--color-border-primary),
-    0 16px 70px -12px rgba(0, 0, 0, 0.6),
-    0 4px 16px rgba(0, 0, 0, 0.25);
+/* Only add padding when container has visible content */
+.file-comments-container:has(.file-comment-card),
+.file-comments-container:has(.file-comment-form) {
+  padding: 12px 16px;
 }
 
-/* Header */
-.analysis-config-header {
-  display: flex;
+/* ==========================================================================
+   File Comment Badge - indicates file-level scope (like GitHub)
+   ========================================================================== */
+.file-comment-badge {
+  display: inline-flex;
   align-items: center;
-  justify-content: space-between;
-  padding: 16px 20px;
-  background: linear-gradient(135deg,
-    var(--color-bg-secondary) 0%,
-    var(--color-bg-tertiary) 100%);
-  border-bottom: 1px solid var(--color-border-primary);
+  gap: 4px;
+  padding: 2px 8px;
+  border-radius: 12px;
+  font-size: 11px;
+  font-weight: 500;
+  background: var(--color-bg-tertiary);
+  color: var(--color-text-secondary);
+  border: 1px solid var(--color-border-secondary);
+  white-space: nowrap;
+}
+
+/* Dark theme adjustments for file comment badge */
+[data-theme="dark"] .file-comment-badge {
+  background: rgba(110, 118, 129, 0.2);
+  border-color: rgba(110, 118, 129, 0.4);
+  color: #8b949e;
+}
+
+
+/* ==========================================================================
+   File-Level Comment Card
+   ========================================================================== */
+.file-comment-card {
+  background: var(--color-bg-primary);
+  border: 1px solid var(--color-border-primary);
+  border-radius: 6px;
+  overflow: hidden;
+  animation: fileCommentSlideIn 0.25s ease-out;
+}
+
+@keyframes fileCommentSlideIn {
+  from {
+    opacity: 0;
+    transform: translateY(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
-.header-title-section {
+/* Comment Header */
+.file-comment-header {
   display: flex;
   align-items: center;
   gap: 12px;
+  padding: 12px 16px;
+  background: var(--color-bg-tertiary);
+  border-bottom: 1px solid var(--color-border-secondary);
 }
 
-.header-icon {
-  display: flex;
+/* Source Badge (AI vs User) */
+.comment-source-badge {
+  display: inline-flex;
   align-items: center;
-  justify-content: center;
-  width: 40px;
-  height: 40px;
-  border-radius: 10px;
-  background: linear-gradient(135deg, var(--color-accent-ai-dark) 0%, #d97706 100%);
+  gap: 4px;
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.02em;
+}
+
+.comment-source-badge.ai {
+  background: linear-gradient(135deg, var(--ai-primary) 0%, var(--ai-secondary) 100%);
   color: white;
-  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
 }
 
-[data-theme="dark"] .header-icon {
-  background: linear-gradient(135deg, var(--color-accent-ai) 0%, var(--color-accent-ai-dark) 100%);
-  box-shadow: 0 2px 12px rgba(251, 191, 36, 0.25);
-}
-
-.analysis-config-header h3 {
-  margin: 0;
-  font-size: 16px;
-  font-weight: 600;
-  color: var(--color-text-primary);
-}
-
-.header-subtitle {
-  margin: 2px 0 0;
-  font-size: 12px;
-  color: var(--color-text-secondary);
-}
-
-/* Body */
-.analysis-config-body {
-  flex: 1;
-  overflow-y: auto;
-  padding: 20px;
-  background: var(--color-bg-primary);
-  position: relative;
-}
-
-/* Loading overlay shown while providers are being fetched */
-.config-loading-overlay {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 12px;
-  background: var(--color-bg-primary);
-  z-index: 10;
-  color: var(--color-text-secondary);
-  font-size: 13px;
-}
-
-.config-loading-spinner {
-  width: 24px;
-  height: 24px;
-  border: 2.5px solid var(--color-border-primary);
-  border-top-color: var(--color-text-link, #2f81f7);
-  border-radius: 50%;
-  animation: spin 0.8s linear infinite;
-}
-
-/* Section styling */
-.config-section {
-  margin-bottom: 20px;
-}
-
-.config-section:last-child {
-  margin-bottom: 0;
-}
-
-.section-title {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin: 0 0 10px;
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--color-text-primary);
-  text-transform: uppercase;
-  letter-spacing: 0.03em;
-}
-
-.section-hint {
-  font-weight: 400;
-  font-size: 11px;
-  color: var(--color-text-tertiary);
-  text-transform: none;
-  letter-spacing: 0;
-}
-
-/* Provider Toggle */
-.provider-toggle {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  gap: 8px;
-  width: 100%;
-  max-width: 100%;
-}
-
-.provider-btn {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: 10px 18px;
-  border: 2px solid var(--color-border-primary);
-  background: var(--color-bg-secondary);
-  color: var(--color-text-secondary);
-  font-size: 14px;
-  font-weight: 500;
-  border-radius: 10px;
-  cursor: pointer;
-  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
-  white-space: nowrap;
-}
-
-.provider-btn:hover {
-  border-color: var(--color-border-secondary);
-  background: var(--color-bg-tertiary);
-  color: var(--color-text-primary);
-  transform: translateY(-2px);
-  box-shadow: 0 4px 12px var(--color-shadow);
-}
-
-.provider-btn.selected {
-  border-color: var(--color-accent-ai-dark);
-  background: rgba(245, 158, 11, 0.08);
-  color: var(--color-text-primary);
-  box-shadow:
-    0 0 0 3px rgba(245, 158, 11, 0.15),
-    0 4px 12px rgba(245, 158, 11, 0.1);
-}
-
-[data-theme="dark"] .provider-btn.selected {
-  background: rgba(251, 191, 36, 0.1);
-  border-color: var(--color-accent-ai);
-  color: #fbbf24;
-  box-shadow:
-    0 0 0 3px rgba(251, 191, 36, 0.15),
-    0 4px 12px rgba(251, 191, 36, 0.08);
-}
-
-/* No providers available message */
-.no-providers-message {
-  font-size: 13px;
-  font-style: italic;
-  color: var(--color-text-muted);
-  padding: 8px 12px;
-}
-
-/* Provider refresh button */
-.provider-refresh-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 22px;
-  height: 22px;
-  padding: 0;
-  margin-left: 4px;
-  border: none;
-  background: transparent;
-  color: var(--color-text-tertiary);
-  border-radius: 4px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
-
-.provider-refresh-btn:hover {
-  background: var(--color-bg-tertiary);
-  color: var(--color-text-secondary);
-}
-
-.provider-refresh-btn:disabled {
-  cursor: not-allowed;
-  opacity: 0.5;
-}
-
-.provider-refresh-btn.refreshing svg {
-  animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-/* Model Cards */
-.model-cards {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 220px));
-  gap: 12px;
-  justify-content: center;
-}
-
-.model-card {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 14px 10px;
-  background: var(--color-bg-secondary);
-  border: 2px solid var(--color-border-primary);
-  border-radius: 10px;
-  cursor: pointer;
-  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
-  text-align: center;
-  aspect-ratio: 1.618 / 1;
-  overflow: hidden;
-  justify-content: center;
-}
-
-.model-card:hover {
-  border-color: var(--color-border-secondary);
-  background: var(--color-bg-tertiary);
-  transform: translateY(-2px);
-  box-shadow: 0 4px 12px var(--color-shadow);
-}
-
-.model-card.selected {
-  border-color: var(--color-accent-ai-dark);
-  background: rgba(245, 158, 11, 0.08);
-  box-shadow:
-    0 0 0 3px rgba(245, 158, 11, 0.15),
-    0 4px 12px rgba(245, 158, 11, 0.1);
-}
-
-[data-theme="dark"] .model-card.selected {
-  background: rgba(251, 191, 36, 0.1);
-  border-color: var(--color-accent-ai);
-  box-shadow:
-    0 0 0 3px rgba(251, 191, 36, 0.15),
-    0 4px 12px rgba(251, 191, 36, 0.08);
-}
-
-.model-badge {
-  position: absolute;
-  top: 8px;
-  right: 8px;
-  padding: 2px 8px;
-  font-size: 9px;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  border-radius: 10px;
-  white-space: nowrap;
-}
-
-.badge-speed {
-  background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
-  color: white;
-}
-
-.badge-recommended {
-  background: linear-gradient(135deg, var(--color-accent-ai-dark) 0%, #d97706 100%);
-  color: white;
-}
-
-.badge-power {
-  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
-  color: white;
-}
-
-.badge-premium {
-  background: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
-  color: white;
-}
-
-.badge-balanced {
-  background: linear-gradient(135deg, var(--color-accent-ai-dark) 0%, #d97706 100%);
-  color: white;
-}
-
-.model-icon {
-  font-size: 28px;
-  line-height: 1;
-  margin-bottom: 2px;
-}
-
-.model-info {
-  display: flex;
-  flex-direction: column;
-  gap: 1px;
-}
-
-.model-name {
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--color-text-primary);
-}
-
-.model-tagline {
-  font-size: 11px;
-  color: var(--color-text-secondary);
-}
-
-.model-description {
-  margin: 4px 0 0;
-  font-size: 10px;
-  color: var(--color-text-tertiary);
-  line-height: 1.3;
-}
-
-.model-selected-indicator {
-  position: absolute;
-  bottom: 8px;
-  right: 8px;
-  width: 20px;
-  height: 20px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: var(--color-accent-ai-dark);
-  border-radius: 50%;
-  color: white;
-  opacity: 0;
-  transform: scale(0.5);
-  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
-}
-
-[data-theme="dark"] .model-selected-indicator {
-  background: var(--color-accent-ai);
-  color: #1a1a1a;
-}
-
-.model-card.selected .model-selected-indicator {
-  opacity: 1;
-  transform: scale(1);
-}
-
-/* Remember toggle */
-.remember-toggle {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  margin-top: 12px;
-  cursor: pointer;
-  font-size: 12px;
-  color: var(--color-text-secondary);
-  user-select: none;
-}
-
-.remember-toggle input {
-  display: none;
-}
-
-.toggle-switch {
-  position: relative;
-  width: 36px;
-  height: 20px;
-  background: var(--color-border-primary);
-  border-radius: 10px;
-  transition: background 0.2s ease;
-  flex-shrink: 0;
-}
-
-.toggle-switch::after {
-  content: '';
-  position: absolute;
-  top: 2px;
-  left: 2px;
-  width: 16px;
-  height: 16px;
-  background: white;
-  border-radius: 50%;
-  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
-}
-
-.remember-toggle input:checked + .toggle-switch {
-  background: var(--color-accent-ai-dark);
-}
-
-[data-theme="dark"] .remember-toggle input:checked + .toggle-switch {
-  background: var(--color-accent-ai);
-}
-
-.remember-toggle input:checked + .toggle-switch::after {
-  transform: translateX(16px);
-}
-
-.toggle-label {
-  line-height: 1.4;
-}
-
-/* Skip Level 3 Info */
-.skip-level3-info {
-  display: flex;
-  align-items: flex-start;
-  gap: 8px;
-  margin-bottom: 12px;
-  padding: 8px 12px;
-  background: var(--color-accent-light);
-  border-radius: 6px;
-  font-size: 12px;
-  color: var(--color-info);
-  line-height: 1.4;
-}
-
-.skip-level3-info svg {
-  flex-shrink: 0;
-  margin-top: 1px;
-  color: var(--color-info);
-}
-
-/* Preset Chips */
-.preset-chips {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-}
-
-.preset-chip {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: 8px 14px;
-  background: var(--color-bg-secondary);
-  border: 1px solid var(--color-border-primary);
-  border-radius: 20px;
-  font-size: 13px;
-  color: var(--color-text-secondary);
-  cursor: pointer;
-  transition: all var(--transition-fast);
-  user-select: none;
-}
-
-.preset-chip:hover {
-  background: var(--color-bg-tertiary);
-  border-color: var(--color-border-secondary);
-  color: var(--color-text-primary);
-}
-
-.preset-chip.active {
-  background: rgba(245, 158, 11, 0.12);
-  border-color: var(--color-accent-ai-dark);
-  color: #b45309;
-}
-
-[data-theme="dark"] .preset-chip.active {
-  background: rgba(251, 191, 36, 0.12);
-  border-color: var(--color-accent-ai);
-  color: #fcd34d;
-}
-
-.preset-label {
-  font-weight: 500;
-}
-
-/* Instructions Container */
-.instructions-container {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.repo-instructions-banner {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 10px 12px;
-  background: var(--color-bg-tertiary);
-  border: 1px solid var(--color-border-primary);
-  border-radius: 8px;
-}
-
-.banner-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  background: var(--color-accent-light);
-  border-radius: 6px;
-  color: var(--color-accent-primary);
-  flex-shrink: 0;
-}
-
-.banner-content {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-}
-
-.banner-label {
-  font-size: 12px;
-  color: var(--color-text-secondary);
-}
-
-.banner-toggle {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  padding: 4px 10px;
-  background: transparent;
-  border: 1px solid var(--color-border-primary);
-  border-radius: 6px;
-  font-size: 11px;
-  font-weight: 500;
-  color: var(--color-text-secondary);
-  cursor: pointer;
-  transition: all var(--transition-fast);
-}
-
-.banner-toggle:hover {
-  background: var(--color-bg-secondary);
-  border-color: var(--color-border-secondary);
-  color: var(--color-text-primary);
-}
-
-.repo-instructions-expanded {
-  background: var(--color-bg-tertiary);
-  border: 1px solid var(--color-border-primary);
-  border-radius: 8px;
-  overflow: hidden;
-}
-
-.expanded-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 8px 12px;
-  background: var(--color-bg-secondary);
-  border-bottom: 1px solid var(--color-border-primary);
-  font-size: 11px;
-  font-weight: 600;
-  color: var(--color-text-secondary);
-  text-transform: uppercase;
-  letter-spacing: 0.03em;
-}
-
-.collapse-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  background: transparent;
-  border: none;
-  border-radius: 4px;
-  color: var(--color-text-tertiary);
-  cursor: pointer;
-  transition: all var(--transition-fast);
-}
-
-.collapse-btn:hover {
-  background: var(--color-bg-tertiary);
-  color: var(--color-text-secondary);
-}
-
-.expanded-content {
-  padding: 12px;
-  font-size: 13px;
-  color: var(--color-text-secondary);
-  line-height: 1.5;
-  white-space: pre-wrap;
-}
-
-.instructions-textarea {
-  width: 100%;
-  padding: 12px;
-  background: var(--color-bg-secondary);
-  border: 1px solid var(--color-border-primary);
-  border-radius: 8px;
-  font-family: inherit;
-  font-size: 13px;
-  color: var(--color-text-primary);
-  resize: vertical;
-  min-height: 100px;
-  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
-}
-
-.instructions-textarea::placeholder {
-  color: var(--color-text-tertiary);
-  opacity: 0.8;
-}
-
-.instructions-textarea:focus {
-  outline: none;
-  border-color: var(--color-accent-ai-dark);
-  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
-}
-
-[data-theme="dark"] .instructions-textarea:focus {
-  border-color: var(--color-accent-ai);
-  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.15);
-}
-
-.instructions-footer {
-  display: flex;
-  justify-content: flex-end;
-}
-
-.char-count {
-  font-size: 11px;
-  color: var(--color-text-muted);
-  transition: color 0.2s ease;
-}
-
-.char-count-warning {
-  color: #d97706;
-  font-weight: 500;
-}
-
-[data-theme="dark"] .char-count-warning {
-  color: var(--color-accent-ai);
-}
-
-.char-count-error {
-  color: #dc2626;
-  font-weight: 600;
-}
-
-[data-theme="dark"] .char-count-error {
-  color: #f87171;
-}
-
-/* Textarea validation states */
-.instructions-textarea.textarea-warning {
-  border-color: #d97706;
-}
-
-[data-theme="dark"] .instructions-textarea.textarea-warning {
-  border-color: var(--color-accent-ai);
-}
-
-.instructions-textarea.textarea-error {
-  border-color: #dc2626;
-  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
-}
-
-[data-theme="dark"] .instructions-textarea.textarea-error {
-  border-color: #f87171;
-  box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.15);
-}
-
-/* Disabled submit button state */
-.btn-analyze:disabled {
-  background: linear-gradient(135deg, #9ca3af 0%, #6b7280 100%);
-  cursor: not-allowed;
-  box-shadow: none;
-  opacity: 0.7;
-}
-
-.btn-analyze:disabled:hover {
-  background: linear-gradient(135deg, #9ca3af 0%, #6b7280 100%);
-  transform: none;
-}
-
-/* Footer */
-.analysis-config-footer {
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  gap: 10px;
-  padding: 16px 20px;
-  background: var(--color-bg-secondary);
-  border-top: 1px solid var(--color-border-primary);
-}
-
-/* Unsaved council changes hint + footer save button container */
-.council-footer-left {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  margin-right: auto;
-}
-
-.council-dirty-hint {
-  font-size: 12px;
-  color: var(--color-accent-primary, #0969da);
-  font-style: italic;
-}
-
-[data-theme="dark"] .council-dirty-hint {
-  color: var(--color-accent-primary, #58a6ff);
-}
-
-/* Blue save button for council footer */
-.btn-save-council {
-  background-color: var(--color-accent-primary, #0969da);
-  color: #ffffff;
-  border-color: var(--color-accent-primary, #0969da);
-}
-
-.btn-save-council:hover {
-  background-color: #0860ca;
-  border-color: #0860ca;
-}
-
-[data-theme="dark"] .btn-save-council {
-  background-color: var(--color-accent-primary, #58a6ff);
-  border-color: var(--color-accent-primary, #58a6ff);
-  color: #ffffff;
-}
-
-[data-theme="dark"] .btn-save-council:hover {
-  background-color: #79b8ff;
-  border-color: #79b8ff;
-}
-
-.btn-analyze {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  padding: 10px 20px;
-  background: linear-gradient(135deg, var(--color-accent-ai-dark) 0%, #d97706 100%);
-  border: none;
-  border-radius: 8px;
-  font-size: 14px;
-  font-weight: 600;
-  color: white;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
-}
-
-.btn-analyze:hover {
-  background: linear-gradient(135deg, var(--color-accent-ai) 0%, var(--color-accent-ai-dark) 100%);
-  transform: translateY(-1px);
-  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35);
-}
-
-.btn-analyze:active {
-  transform: translateY(0);
-}
-
-[data-theme="dark"] .btn-analyze {
-  background: linear-gradient(135deg, var(--color-accent-ai) 0%, var(--color-accent-ai-dark) 100%);
-  color: #1a1a1a;
-  box-shadow: 0 2px 12px rgba(251, 191, 36, 0.25);
-}
-
-[data-theme="dark"] .btn-analyze:hover {
-  box-shadow: 0 4px 16px rgba(251, 191, 36, 0.3);
-}
-
-/* Responsive */
-@media (max-width: 600px) {
-  .analysis-config-container {
-    width: 100%;
-    max-width: none;
-    max-height: 100vh;
-    border-radius: 0;
-  }
-
-  .model-cards {
-    grid-template-columns: 1fr;
-  }
-
-  .model-card {
-    flex-direction: row;
-    text-align: left;
-    padding: 12px 16px;
-    gap: 12px;
-    aspect-ratio: auto;
-    overflow: visible;
-    justify-content: flex-start;
-  }
-
-  .model-icon {
-    font-size: 24px;
-    margin-bottom: 0;
-  }
-
-  .model-info {
-    flex: 1;
-  }
-
-  .model-description {
-    margin-top: 4px;
-  }
-
-  .model-badge {
-    position: static;
-    align-self: flex-start;
-    margin-left: auto;
-  }
-
-  .model-selected-indicator {
-    position: static;
-    margin-left: 8px;
-  }
-
-  .preset-chips {
-    gap: 6px;
-  }
-
-  .preset-chip {
-    padding: 6px 12px;
-    font-size: 12px;
-  }
-}
-
-/* ==========================================================================
-   Review Council Tab
-   Multi-voice, multi-provider analysis configuration
-   ========================================================================== */
-
-.analysis-tab-bar {
-  display: flex;
-  gap: 0;
-  border-bottom: 1px solid var(--border-color, #d0d7de);
-  margin-bottom: 16px;
-}
-
-.analysis-tab {
-  padding: 8px 16px;
-  border: none;
-  background: none;
-  cursor: pointer;
-  font-size: 13px;
-  font-weight: 500;
-  color: var(--fg-muted, #656d76);
-  border-bottom: 2px solid transparent;
-  transition: color 0.15s, border-color 0.15s;
-}
-
-.analysis-tab:hover {
-  color: var(--fg-default, #1f2328);
-}
-
-.analysis-tab.active {
-  color: var(--fg-default, #1f2328);
-  border-bottom-color: var(--accent-emphasis, #0969da);
-}
-
-[data-theme="dark"] .analysis-tab {
-  color: #8b949e;
-}
-
-[data-theme="dark"] .analysis-tab:hover {
-  color: #c9d1d9;
-}
-
-[data-theme="dark"] .analysis-tab.active {
-  color: #c9d1d9;
-  border-bottom-color: #58a6ff;
-}
-
-.beta-badge {
-  display: inline-block;
-  font-size: 10px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  padding: 1px 5px;
-  border-radius: 3px;
-  background-color: var(--accent-subtle, #ddf4ff);
-  color: var(--accent-fg, #0969da);
-  margin-left: 4px;
-  vertical-align: middle;
-}
-
-[data-theme="dark"] .beta-badge {
-  background-color: transparent;
-  color: #8b949e;
-  border: 1px solid #30363d;
-}
-
-.council-selector-row {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-}
-
-.council-select {
-  flex: 1;
-  padding: 6px 10px;
-  border: 1px solid var(--border-color, #d0d7de);
-  border-radius: 6px;
-  background: var(--bg-default, #fff);
-  color: var(--fg-default, #1f2328);
-  font-size: 13px;
-}
-
-[data-theme="dark"] .council-select {
-  background: var(--bg-subtle, #161b22);
-  color: var(--fg-default, #e6edf3);
-  border-color: var(--border-color, #30363d);
-}
-
-/* "New Council" option in council selector */
-.council-option-new {
-  font-style: italic;
-  color: var(--fg-muted, #656d76);
-}
-
-/* Style the select itself when "New Council" is the active selection */
-.council-select.new-council-selected {
-  font-style: italic;
-  color: var(--fg-muted, #656d76);
-}
-
-/* Council review divider - separates council config from per-review settings */
-.council-review-divider {
-  margin: 24px 0 16px;
-  padding-top: 20px;
-  border-top: 1px solid var(--color-border-subtle, rgba(0, 0, 0, 0.06));
-}
-
-[data-theme="dark"] .council-review-divider {
-  border-top-color: var(--color-border-subtle, rgba(255, 255, 255, 0.06));
-}
-
-.divider-label {
-  font-size: 12px;
-  font-weight: 500;
-  color: var(--color-text-tertiary, #656d76);
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-
-[data-theme="dark"] .divider-label {
-  color: var(--color-text-tertiary, #6e7681);
-}
-
-.council-level-section .section-title {
-  margin-bottom: 8px;
-}
-
-.level-toggle {
-  font-weight: 600;
-}
-
-.level-toggle .toggle-label {
-  font-weight: 600;
-}
-
-.level-voices {
-  margin-left: 24px;
-  margin-top: 8px;
-}
-
-.voice-list {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-.voice-row {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-}
-
-.voice-provider,
-.voice-model,
-.voice-tier {
-  padding: 5px 8px;
-  border: 1px solid var(--border-color, #d0d7de);
-  border-radius: 6px;
-  background: var(--bg-default, #fff);
-  color: var(--fg-default, #1f2328);
-  font-size: 12px;
-}
-
-[data-theme="dark"] .voice-provider,
-[data-theme="dark"] .voice-model,
-[data-theme="dark"] .voice-tier {
-  background: var(--bg-subtle, #161b22);
-  color: var(--fg-default, #e6edf3);
-  border-color: var(--border-color, #30363d);
-}
-
-.voice-provider {
-  min-width: 100px;
-}
-
-.voice-model {
-  min-width: 140px;
-  flex: 1;
-}
-
-.voice-tier {
-  min-width: 90px;
-}
-
-.executable-note {
-  font-size: 11px;
-  color: var(--fg-muted, #656d76);
-  font-style: italic;
-  white-space: nowrap;
-}
-
-.vc-levels-disabled-note {
-  margin-top: 12px;
-  margin-bottom: 0;
-}
-
-.btn-icon {
-  box-sizing: border-box;
-  width: 28px;
-  height: 28px;
-  padding: 0;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 16px;
-  line-height: 1;
-  border-radius: 6px;
-  border: 1px solid var(--border-color, #d0d7de);
-  background: var(--bg-default, #fff);
-  color: var(--fg-muted, #656d76);
-  cursor: pointer;
-}
-
-.btn-icon:hover {
-  color: var(--color-text-primary);
-  border-color: var(--color-border-secondary);
-}
-
-.btn-ghost {
-  background: none;
-  border: none;
-  color: var(--accent-fg, #0969da);
-  cursor: pointer;
-  font-size: 12px;
-  padding: 4px 8px;
-}
-
-.btn-ghost:hover {
-  text-decoration: underline;
-}
-
-.btn-sm {
-  font-size: 12px;
-  padding: 4px 10px;
-}
-
-.add-voice-btn {
-  margin-top: 6px;
-}
-
-.add-voice-btn:hover {
-  color: var(--color-accent-primary, #0969da);
-  border-color: var(--color-accent-primary, #0969da);
-}
-
-.section-hint-text {
-  font-size: 12px;
-  color: var(--fg-muted, #656d76);
-  margin-bottom: 8px;
-  margin-top: -4px;
-}
-
-.voice-instructions-area {
-  margin-left: 0;
-  margin-bottom: 4px;
-}
-
-.voice-instructions-input {
-  width: 100%;
-  padding: 6px 8px;
-  border: 1px solid var(--border-color, #d0d7de);
-  border-radius: 6px;
-  background: var(--bg-default, #fff);
-  color: var(--fg-default, #1f2328);
-  font-size: 12px;
-  font-family: inherit;
-  resize: vertical;
-}
-
-[data-theme="dark"] .voice-instructions-input {
-  background: var(--bg-subtle, #161b22);
-  color: var(--fg-default, #e6edf3);
-  border-color: var(--border-color, #30363d);
-}
-
-/* Icon-only toggle for per-participant instructions */
-.toggle-instructions-icon {
-  width: 24px;
-  height: 24px;
-  padding: 0;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  background: none;
-  border: 1px solid transparent;
-  border-radius: 4px;
-  color: var(--color-text-tertiary, #6e7681);
-  cursor: pointer;
-  flex-shrink: 0;
-  transition: color 0.15s ease, border-color 0.15s ease;
-}
-
-.toggle-instructions-icon:hover {
-  color: var(--color-accent-primary, #0969da);
-  border-color: var(--color-border-secondary, #d0d7de);
-}
-
-.toggle-instructions-icon.has-instructions {
-  color: var(--color-accent-primary, #0969da);
-}
-
-[data-theme="dark"] .toggle-instructions-icon {
-  color: var(--color-text-tertiary, #484f58);
-}
-
-[data-theme="dark"] .toggle-instructions-icon:hover {
-  color: var(--color-accent-primary, #58a6ff);
-  border-color: var(--color-border-primary, #30363d);
-}
-
-[data-theme="dark"] .toggle-instructions-icon.has-instructions {
-  color: var(--color-accent-primary, #58a6ff);
-}
-
-/* Icon-only toggle for per-voice timeout (clock icon) */
-.toggle-timeout-icon {
-  width: 24px;
-  height: 24px;
-  padding: 0;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  background: none;
-  border: 1px solid transparent;
-  border-radius: 4px;
-  color: var(--color-text-tertiary, #6e7681);
-  cursor: pointer;
-  flex-shrink: 0;
-  transition: color 0.15s ease, border-color 0.15s ease;
-}
-
-.toggle-timeout-icon:hover {
-  color: var(--color-accent-primary, #0969da);
-  border-color: var(--color-border-secondary, #d0d7de);
-}
-
-.toggle-timeout-icon.has-custom-timeout {
-  color: var(--color-attention-fg, #9a6700);
-}
-
-[data-theme="dark"] .toggle-timeout-icon {
-  color: var(--color-text-tertiary, #484f58);
-}
-
-[data-theme="dark"] .toggle-timeout-icon:hover {
-  color: var(--color-accent-primary, #58a6ff);
-  border-color: var(--color-border-primary, #30363d);
-}
-
-[data-theme="dark"] .toggle-timeout-icon.has-custom-timeout {
-  color: var(--color-attention-fg, #d29922);
-}
-
-/* Custom timeout dropdown selector (replaces native <select> for timeouts) */
-.timeout-select {
-  position: relative;
-  display: inline-flex;
-  flex-shrink: 0;
-}
-
-.timeout-select-trigger {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  padding: 4px 8px;
-  border: 1px solid var(--border-color, #d0d7de);
-  border-radius: 6px;
-  background: var(--bg-default, #fff);
-  color: var(--fg-default, #1f2328);
-  font-size: 12px;
-  font-family: inherit;
-  font-weight: 500;
-  cursor: pointer;
-  white-space: nowrap;
-  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
-  min-width: 52px;
-  justify-content: center;
-  line-height: 1.4;
-}
-
-.timeout-select-trigger:hover {
-  border-color: var(--color-accent-primary, #0969da);
-  background: var(--bg-subtle, #f6f8fa);
-}
-
-.timeout-select.open .timeout-select-trigger {
-  border-color: var(--color-accent-primary, #0969da);
-  box-shadow: 0 0 0 2px rgba(9, 105, 218, 0.15);
-}
-
-.timeout-select-label {
-  pointer-events: none;
-}
-
-.timeout-select-caret {
-  flex-shrink: 0;
-  transition: transform 0.15s ease;
-  pointer-events: none;
-}
-
-.timeout-select.open .timeout-select-caret {
-  transform: rotate(180deg);
-}
-
-/* Dropdown menu */
-.timeout-select-menu {
-  display: none;
-  position: absolute;
-  top: calc(100% + 4px);
-  left: 50%;
-  transform: translateX(-50%);
-  min-width: 64px;
-  background: var(--bg-default, #fff);
-  border: 1px solid var(--border-color, #d0d7de);
-  border-radius: 8px;
-  box-shadow: 0 4px 12px rgba(27, 31, 36, 0.12), 0 1px 3px rgba(27, 31, 36, 0.08);
-  z-index: 1100;
-  padding: 4px;
-  flex-direction: column;
-}
-
-.timeout-select.open .timeout-select-menu {
-  display: flex;
-}
-
-/* Individual option */
-.timeout-select-option {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 5px 10px;
-  border: none;
-  border-radius: 5px;
-  background: transparent;
-  color: var(--fg-default, #1f2328);
-  font-size: 12px;
-  font-family: inherit;
-  font-weight: 500;
-  cursor: pointer;
-  white-space: nowrap;
-  transition: background 0.1s ease, color 0.1s ease;
-}
-
-.timeout-select-option:hover,
-.timeout-select-option.focused {
-  background: var(--bg-subtle, #f6f8fa);
-}
-
-.timeout-select-option.selected {
-  color: var(--color-accent-primary, #0969da);
-  background: rgba(9, 105, 218, 0.08);
-  font-weight: 600;
-}
-
-.timeout-select-option.selected:hover,
-.timeout-select-option.selected.focused {
-  background: rgba(9, 105, 218, 0.14);
-}
-
-/* Dark theme overrides */
-[data-theme="dark"] .timeout-select-trigger {
-  background: var(--bg-subtle, #161b22);
-  color: var(--fg-default, #e6edf3);
-  border-color: var(--border-color, #30363d);
-}
-
-[data-theme="dark"] .timeout-select-trigger:hover {
-  border-color: var(--color-accent-primary, #58a6ff);
-  background: var(--color-bg-tertiary, #1c2128);
-}
-
-[data-theme="dark"] .timeout-select.open .timeout-select-trigger {
-  border-color: var(--color-accent-primary, #58a6ff);
-  box-shadow: 0 0 0 2px rgba(88, 166, 255, 0.15);
-}
-
-[data-theme="dark"] .timeout-select-menu {
-  background: var(--bg-subtle, #161b22);
-  border-color: var(--border-color, #30363d);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2);
-}
-
-[data-theme="dark"] .timeout-select-option {
-  color: var(--fg-default, #e6edf3);
-}
-
-[data-theme="dark"] .timeout-select-option:hover,
-[data-theme="dark"] .timeout-select-option.focused {
-  background: rgba(255, 255, 255, 0.06);
-}
-
-[data-theme="dark"] .timeout-select-option.selected {
-  color: var(--color-accent-primary, #58a6ff);
-  background: rgba(88, 166, 255, 0.1);
-}
-
-[data-theme="dark"] .timeout-select-option.selected:hover,
-[data-theme="dark"] .timeout-select-option.selected.focused {
-  background: rgba(88, 166, 255, 0.16);
-}
-
-/* Participant card layout (item 4) */
-.participant-wrapper {
-  display: flex;
-  flex-direction: row;
-  gap: 8px;
-  align-items: flex-start;
-}
-
-.participant-card {
-  flex: 1;
-  border: 1px solid var(--border-color, #d0d7de);
-  border-radius: 8px;
-  padding: 10px;
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  background: var(--bg-default, #fff);
-}
-
-[data-theme="dark"] .participant-card {
-  border-color: var(--border-color, #30363d);
-  background: var(--bg-subtle, #161b22);
-}
-
-.participant-card .voice-row {
-  margin: 0;
-}
-
-.participant-card .voice-instructions-area {
-  margin: 0;
-}
-
-/* Orchestration/consolidation card — same styling as participant-card */
-.orchestration-card {
-  border: 1px solid var(--border-color, #d0d7de);
-  border-radius: 8px;
-  padding: 10px;
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  background: var(--bg-default, #fff);
-}
-
-[data-theme="dark"] .orchestration-card {
-  border-color: var(--border-color, #30363d);
-  background: var(--bg-subtle, #161b22);
-}
-
-.orchestration-card .voice-row {
-  margin: 0;
-}
-
-.orchestration-card .voice-instructions-area {
-  margin: 0;
-}
-
-.participant-wrapper > .remove-voice-btn {
-  flex-shrink: 0;
-  margin-top: 10px;
-}
-
-/* Spacer to align consolidation row with level voice rows that have a remove button */
-.participant-wrapper > .remove-voice-btn-spacer {
-  flex-shrink: 0;
-  width: 28px; /* matches .btn-icon width */
-}
-
-/* Dark mode overrides for council +/- icon buttons */
-[data-theme="dark"] .btn-icon {
-  background: var(--color-bg-tertiary, #1c2128);
-  border-color: var(--color-border-primary, #30363d);
-  color: var(--color-text-secondary, #8b949e);
-}
-
-[data-theme="dark"] .btn-icon:hover {
-  background: var(--color-bg-elevated, #1e2329);
-  color: var(--color-text-primary, #e6edf3);
-  border-color: var(--color-border-secondary, #484f58);
-}
-
-[data-theme="dark"] .add-voice-btn {
-  color: var(--color-text-secondary, #8b949e);
-}
-
-[data-theme="dark"] .add-voice-btn:hover {
-  color: var(--color-accent-primary, #58a6ff);
-  border-color: var(--color-accent-primary, #58a6ff);
-}
-
-/* Disabled button styles for council selector row (item 6) */
-.council-selector-row .btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-/* Icon-only danger button (e.g. delete council) */
-.btn-icon-danger {
-  background: none;
-  border: 1px solid transparent;
-  color: var(--fg-muted, #656d76);
-  padding: 4px 6px;
-  border-radius: 6px;
-  cursor: pointer;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  transition: color 0.15s, background 0.15s;
-}
-
-.btn-icon-danger:hover:not(:disabled) {
-  color: var(--danger-fg, #d1242f);
-  background: var(--color-danger-subtle, rgba(255, 129, 130, 0.1));
-}
-
-.btn-icon-danger:disabled {
-  opacity: 0.4;
-  cursor: not-allowed;
-}
-
-[data-theme="dark"] .btn-icon-danger {
-  color: var(--color-text-secondary, #8b949e);
-}
-
-[data-theme="dark"] .btn-icon-danger:hover:not(:disabled) {
-  color: var(--color-danger, #f85149);
-  background: rgba(248, 81, 73, 0.1);
-}
-
-/* Info-tip toggle buttons (circled "i" icons next to section headers) */
-.info-tip-toggle {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 18px;
-  height: 18px;
-  padding: 0;
-  border: none;
-  border-radius: 50%;
-  background: none;
-  color: var(--color-text-tertiary, #656d76);
-  cursor: pointer;
-  flex-shrink: 0;
-  transition: color 0.15s ease;
-}
-
-.info-tip-toggle:hover {
-  color: var(--color-info, #0969da);
-}
-
-.info-tip-toggle.active {
-  color: var(--color-info, #0969da);
-}
-
-.info-tip-content {
-  background: var(--color-info-subtle, #ddf4ff);
-  border-radius: 6px;
-  padding: 8px 10px;
-  margin: 0 0 8px;
-  font-size: 12px;
-  line-height: 1.45;
-  color: var(--color-text-secondary, #424a53);
-}
-
-[data-theme="dark"] .info-tip-toggle {
-  color: var(--color-text-tertiary, #484f58);
-}
-
-[data-theme="dark"] .info-tip-toggle:hover,
-[data-theme="dark"] .info-tip-toggle.active {
-  color: var(--color-info, #58a6ff);
-}
-
-[data-theme="dark"] .info-tip-content {
-  background: rgba(56, 139, 253, 0.1);
-  color: var(--color-text-secondary, #8b949e);
-}
-
-/* ==========================================================================
-   File-Level Comments Zone
-   Collapsible section between file header and diff content
-   ========================================================================== */
-
-/* CSS Variables for file-level comments */
-:root {
-  --file-comment-bg: #f6f8fa;
-  --file-comment-border: #d0d7de;
-  --file-comment-accent: linear-gradient(135deg, #0969da 0%, #8250df 100%);
-  --file-comment-header-bg: #eaeef2;
-}
-
-[data-theme="dark"] {
-  --file-comment-bg: #1c2128;
-  --file-comment-border: #30363d;
-  --file-comment-header-bg: #21262d;
-}
-
-/* File Comments Zone Container - always visible (no collapse)
-   Zone is invisible when empty - styling only applied when has content via :has() */
-
-/* Conditional styling - only show background/border when zone has actual content */
-.file-comments-zone:has(.file-comment-card),
-.file-comments-zone:has(.file-comment-form) {
-  background: var(--file-comment-bg);
-  border-bottom: 1px solid var(--file-comment-border);
-}
-
-/* Comments Container - only has padding when there's content */
-.file-comments-container {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-/* Only add padding when container has visible content */
-.file-comments-container:has(.file-comment-card),
-.file-comments-container:has(.file-comment-form) {
-  padding: 12px 16px;
-}
-
-/* ==========================================================================
-   File Comment Badge - indicates file-level scope (like GitHub)
-   ========================================================================== */
-.file-comment-badge {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  padding: 2px 8px;
-  border-radius: 12px;
-  font-size: 11px;
-  font-weight: 500;
-  background: var(--color-bg-tertiary);
-  color: var(--color-text-secondary);
-  border: 1px solid var(--color-border-secondary);
-  white-space: nowrap;
-}
-
-/* Dark theme adjustments for file comment badge */
-[data-theme="dark"] .file-comment-badge {
-  background: rgba(110, 118, 129, 0.2);
-  border-color: rgba(110, 118, 129, 0.4);
-  color: #8b949e;
-}
-
-
-/* ==========================================================================
-   File-Level Comment Card
-   ========================================================================== */
-.file-comment-card {
-  background: var(--color-bg-primary);
-  border: 1px solid var(--color-border-primary);
-  border-radius: 6px;
-  overflow: hidden;
-  animation: fileCommentSlideIn 0.25s ease-out;
-}
-
-@keyframes fileCommentSlideIn {
-  from {
-    opacity: 0;
-    transform: translateY(-8px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-/* Comment Header */
-.file-comment-header {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 12px 16px;
-  background: var(--color-bg-tertiary);
-  border-bottom: 1px solid var(--color-border-secondary);
-}
-
-/* Source Badge (AI vs User) */
-.comment-source-badge {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  padding: 2px 8px;
-  border-radius: 4px;
-  font-size: 11px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.02em;
-}
-
-.comment-source-badge.ai {
-  background: linear-gradient(135deg, var(--ai-primary) 0%, var(--ai-secondary) 100%);
-  color: white;
-}
-
-.comment-source-badge.ai svg {
-  width: 12px;
-  height: 12px;
+.comment-source-badge.ai svg {
+  width: 12px;
+  height: 12px;
 }
 
 .comment-source-badge.user {
@@ -14149,74 +12441,366 @@ body.resizing * {
   font-variant-numeric: tabular-nums;
 }
 
-.stack-nav-title {
+.stack-nav-title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: 600;
+  font-size: 14px;
+  color: var(--color-text-primary, #1f2328);
+}
+
+/* Secondary row: branch name */
+.stack-nav-branch {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 12px;
+  color: var(--color-text-tertiary, #656d76);
+  overflow: hidden;
+}
+
+.stack-nav-branch span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.stack-nav-branch-icon {
+  flex-shrink: 0;
+  width: 12px;
+  height: 12px;
+  fill: currentColor;
+  opacity: 0.7;
+}
+
+[data-theme="dark"] .stack-nav-menu {
+  background: var(--color-bg-elevated, #1e2329);
+  border-color: var(--color-border-primary, #30363d);
+  box-shadow: 0 4px 16px var(--color-shadow-large, rgba(0, 0, 0, 0.5));
+}
+
+[data-theme="dark"] .stack-nav-item {
+  color: var(--color-text-primary, #c9d1d9);
+}
+
+[data-theme="dark"] .stack-nav-item:hover {
+  background: var(--color-accent-lighter, rgba(88, 166, 255, 0.08));
+}
+
+[data-theme="dark"] .stack-nav-item.current {
+  background: var(--color-accent-lighter, rgba(88, 166, 255, 0.08));
+}
+
+[data-theme="dark"] .stack-nav-title {
+  color: var(--color-text-primary, #c9d1d9);
+}
+
+[data-theme="dark"] .stack-nav-chevron {
+  color: var(--color-text-tertiary, #6e7681);
+}
+
+[data-theme="dark"] .stack-nav-branch {
+  color: var(--color-text-tertiary, #6e7681);
+}
+
+/* ============================================
+   Stack Review — Stack Analysis Dialog
+   ============================================ */
+
+.stack-dialog-overlay {
+  position: fixed;
+  inset: 0;
+  background: var(--color-bg-overlay, rgba(0, 0, 0, 0.5));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.stack-dialog-backdrop {
+  position: absolute;
+  inset: 0;
+}
+
+.stack-dialog {
+  position: relative;
+  z-index: 1;
+  background: var(--color-bg-elevated, #fff);
+  border: 1px solid var(--color-border-primary, #d1d9e0);
+  border-radius: 12px;
+  box-shadow: 0 8px 32px var(--color-shadow-large, rgba(0, 0, 0, 0.2));
+  width: 680px;
+  max-width: 90vw;
+  max-height: 80vh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.stack-dialog-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px;
+  border-bottom: 1px solid var(--color-border-primary, #d1d9e0);
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--color-text-primary, #1f2328);
+}
+
+.stack-dialog-header button {
+  background: none;
+  border: none;
+  color: var(--color-text-tertiary, #656d76);
+  cursor: pointer;
+  padding: 4px;
+  border-radius: 4px;
+  transition: color 0.15s ease;
+}
+
+.stack-dialog-header button:hover {
+  color: var(--color-text-primary, #1f2328);
+}
+
+.stack-dialog-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px 20px;
+}
+
+.stack-dialog-footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 12px 20px;
+  border-top: 1px solid var(--color-border-primary, #d1d9e0);
+}
+
+.stack-dialog-pr-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  padding: 10px 4px;
+  border-bottom: 1px solid var(--color-border-subtle, rgba(0, 0, 0, 0.06));
+  font-size: 13px;
+  color: var(--color-text-primary, #1f2328);
+}
+
+.stack-dialog-pr-item:last-child {
+  border-bottom: none;
+}
+
+.stack-dialog-pr-checkbox {
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  accent-color: var(--color-accent-primary, #0969da);
+  cursor: pointer;
+}
+
+.stack-dialog-pr-current {
+  font-weight: 600;
+}
+
+.stack-dialog-current-badge {
+  flex-shrink: 0;
+  width: 16px;
+  text-align: center;
+  color: var(--color-accent-ai, #f59e0b);
+  font-size: 14px;
+}
+
+.stack-dialog-pr-info {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.stack-dialog-pr-title-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.stack-dialog-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 32px 16px;
+  color: var(--color-text-secondary, #656d76);
+  font-size: 13px;
+  gap: 8px;
+}
+
+.stack-dialog-loading .loading-spinner {
+  width: 18px;
+  height: 18px;
+  margin-bottom: 0;
+}
+
+.stack-dialog-pr-list {
+  max-height: 50vh;
+  overflow-y: auto;
+}
+
+.stack-dialog-pr-number {
+  flex-shrink: 0;
+  font-family: var(--font-mono, ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace);
+  color: var(--color-text-secondary, #656d76);
+}
+
+.stack-dialog-pr-title {
+  flex: 1;
+  min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  font-weight: 600;
-  font-size: 14px;
-  color: var(--color-text-primary, #1f2328);
 }
 
-/* Secondary row: branch name */
-.stack-nav-branch {
+.stack-dialog-pr-branch {
   display: flex;
   align-items: center;
   gap: 4px;
+  color: var(--color-text-secondary, #656d76);
   font-size: 12px;
-  color: var(--color-text-tertiary, #656d76);
-  overflow: hidden;
 }
 
-.stack-nav-branch span {
+.stack-dialog-branch-name {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  min-width: 0;
 }
 
-.stack-nav-branch-icon {
+.stack-dialog-branch-icon {
   flex-shrink: 0;
-  width: 12px;
-  height: 12px;
-  fill: currentColor;
   opacity: 0.7;
 }
 
-[data-theme="dark"] .stack-nav-menu {
+.stack-dialog-analyzed-badge {
+  flex-shrink: 0;
+  color: var(--color-accent-primary, #0969da);
+  font-size: 11px;
+}
+
+.stack-dialog-note {
+  color: var(--color-text-secondary, #656d76);
+  font-size: 12px;
+  padding: 8px 16px;
+  border-top: 1px solid var(--color-border-subtle, rgba(0, 0, 0, 0.06));
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.stack-dialog-note-info {
+  display: flex;
+  align-items: flex-start;
+  gap: 4px;
+  color: var(--color-text-tertiary, #8c959f);
+}
+
+.stack-dialog-info-icon {
+  flex-shrink: 0;
+  margin-top: 2px;
+  opacity: 0.7;
+}
+
+.stack-dialog-error {
+  padding: 16px;
+  color: var(--color-danger, #cf222e);
+}
+
+.stack-dialog-controls {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 12px;
+}
+
+.stack-dialog-controls button {
+  background: none;
+  border: none;
+  color: var(--color-accent-primary, #0969da);
+  cursor: pointer;
+  font-size: 12px;
+  padding: 2px 4px;
+}
+
+.stack-dialog-controls button:hover {
+  text-decoration: underline;
+}
+
+[data-theme="dark"] .stack-dialog {
   background: var(--color-bg-elevated, #1e2329);
   border-color: var(--color-border-primary, #30363d);
-  box-shadow: 0 4px 16px var(--color-shadow-large, rgba(0, 0, 0, 0.5));
+  box-shadow: 0 8px 32px var(--color-shadow-large, rgba(0, 0, 0, 0.5));
 }
 
-[data-theme="dark"] .stack-nav-item {
+[data-theme="dark"] .stack-dialog-header {
+  border-color: var(--color-border-primary, #30363d);
   color: var(--color-text-primary, #c9d1d9);
 }
 
-[data-theme="dark"] .stack-nav-item:hover {
-  background: var(--color-accent-lighter, rgba(88, 166, 255, 0.08));
+[data-theme="dark"] .stack-dialog-header button:hover {
+  color: var(--color-text-primary, #c9d1d9);
 }
 
-[data-theme="dark"] .stack-nav-item.current {
-  background: var(--color-accent-lighter, rgba(88, 166, 255, 0.08));
+[data-theme="dark"] .stack-dialog-body {
+  color: var(--color-text-primary, #c9d1d9);
 }
 
-[data-theme="dark"] .stack-nav-title {
+[data-theme="dark"] .stack-dialog-footer {
+  border-color: var(--color-border-primary, #30363d);
+}
+
+[data-theme="dark"] .stack-dialog-pr-item {
+  border-color: var(--color-border-subtle, rgba(255, 255, 255, 0.06));
   color: var(--color-text-primary, #c9d1d9);
 }
 
-[data-theme="dark"] .stack-nav-chevron {
-  color: var(--color-text-tertiary, #6e7681);
+[data-theme="dark"] .stack-dialog-loading {
+  color: var(--color-text-secondary, #8b949e);
 }
 
-[data-theme="dark"] .stack-nav-branch {
+[data-theme="dark"] .stack-dialog-controls button {
+  color: var(--color-accent-primary, #58a6ff);
+}
+
+[data-theme="dark"] .stack-dialog-pr-number {
+  color: var(--color-text-secondary, #8b949e);
+}
+
+[data-theme="dark"] .stack-dialog-pr-branch {
+  color: var(--color-text-secondary, #8b949e);
+}
+
+[data-theme="dark"] .stack-dialog-analyzed-badge {
+  color: var(--color-accent-primary, #58a6ff);
+}
+
+[data-theme="dark"] .stack-dialog-note {
+  color: var(--color-text-secondary, #8b949e);
+  border-color: var(--color-border-subtle, rgba(255, 255, 255, 0.06));
+}
+
+[data-theme="dark"] .stack-dialog-note-info {
   color: var(--color-text-tertiary, #6e7681);
 }
 
+[data-theme="dark"] .stack-dialog-error {
+  color: var(--color-danger, #f85149);
+}
+
 /* ============================================
-   Stack Review — Stack Analysis Dialog
+   Stack Review — Stack Progress Modal
    ============================================ */
 
-.stack-dialog-overlay {
+.stack-progress-overlay {
   position: fixed;
   inset: 0;
   background: var(--color-bg-overlay, rgba(0, 0, 0, 0.5));
@@ -14226,19 +12810,17 @@ body.resizing * {
   z-index: 1000;
 }
 
-.stack-dialog-backdrop {
+.stack-progress-backdrop {
   position: absolute;
   inset: 0;
 }
 
-.stack-dialog {
-  position: relative;
-  z-index: 1;
+.stack-progress-modal {
   background: var(--color-bg-elevated, #fff);
   border: 1px solid var(--color-border-primary, #d1d9e0);
   border-radius: 12px;
   box-shadow: 0 8px 32px var(--color-shadow-large, rgba(0, 0, 0, 0.2));
-  width: 680px;
+  width: 520px;
   max-width: 90vw;
   max-height: 80vh;
   display: flex;
@@ -14246,7 +12828,7 @@ body.resizing * {
   overflow: hidden;
 }
 
-.stack-dialog-header {
+.stack-progress-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -14257,466 +12839,744 @@ body.resizing * {
   color: var(--color-text-primary, #1f2328);
 }
 
-.stack-dialog-header button {
-  background: none;
-  border: none;
-  color: var(--color-text-tertiary, #656d76);
-  cursor: pointer;
-  padding: 4px;
-  border-radius: 4px;
-  transition: color 0.15s ease;
+.stack-progress-header button {
+  background: none;
+  border: none;
+  color: var(--color-text-tertiary, #656d76);
+  cursor: pointer;
+  padding: 4px;
+  border-radius: 4px;
+  transition: color 0.15s ease;
+}
+
+.stack-progress-header button:hover {
+  color: var(--color-text-primary, #1f2328);
+}
+
+.stack-progress-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px 20px;
+}
+
+.stack-progress-footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 12px 20px;
+  border-top: 1px solid var(--color-border-primary, #d1d9e0);
+}
+
+.stack-progress-pr-list {
+  max-height: 320px;
+  overflow-y: auto;
+}
+
+.stack-progress-pr-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 4px;
+  border-bottom: 1px solid var(--color-border-subtle, rgba(0, 0, 0, 0.06));
+  font-size: 13px;
+}
+
+.stack-progress-pr-row:last-child {
+  border-bottom: none;
+}
+
+.stack-progress-status-icon {
+  flex-shrink: 0;
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+}
+
+.stack-progress-pr-label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--color-text-primary, #1f2328);
+}
+
+.stack-progress-pr-link {
+  cursor: pointer;
+  color: var(--color-accent-primary, #0969da);
+}
+
+.stack-progress-pr-link:hover {
+  text-decoration: underline;
+}
+
+.stack-progress-pr-detail {
+  flex-shrink: 0;
+  color: var(--color-text-secondary, #656d76);
+}
+
+.stack-progress-pr-detail a {
+  color: var(--color-accent-primary, #0969da);
+  text-decoration: none;
+}
+
+.stack-progress-pr-detail a:hover {
+  text-decoration: underline;
+}
+
+.status-completed .stack-progress-status-icon {
+  color: var(--color-accent-emphasis, #1a7f37);
+}
+
+.status-running .stack-progress-status-icon {
+  color: var(--color-accent-ai, #f59e0b);
+  animation: pulse-dot 1.2s ease-in-out infinite;
+}
+
+.status-setting_up .stack-progress-status-icon {
+  color: var(--color-text-secondary, #656d76);
+  animation: pulse-dot 1.2s ease-in-out infinite;
+}
+
+.status-pending .stack-progress-status-icon {
+  color: var(--color-text-muted, #d1d9e0);
+}
+
+.status-failed .stack-progress-status-icon {
+  color: var(--color-danger, #cf222e);
+}
+
+[data-theme="dark"] .stack-progress-modal {
+  background: var(--color-bg-elevated, #1e2329);
+  border-color: var(--color-border-primary, #30363d);
+  box-shadow: 0 8px 32px var(--color-shadow-large, rgba(0, 0, 0, 0.5));
+}
+
+[data-theme="dark"] .stack-progress-header {
+  border-color: var(--color-border-primary, #30363d);
+  color: var(--color-text-primary, #c9d1d9);
 }
 
-.stack-dialog-header button:hover {
-  color: var(--color-text-primary, #1f2328);
+[data-theme="dark"] .stack-progress-header button:hover {
+  color: var(--color-text-primary, #c9d1d9);
 }
 
-.stack-dialog-body {
-  flex: 1;
-  overflow-y: auto;
-  padding: 16px 20px;
+[data-theme="dark"] .stack-progress-body {
+  color: var(--color-text-primary, #c9d1d9);
 }
 
-.stack-dialog-footer {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 8px;
-  padding: 12px 20px;
-  border-top: 1px solid var(--color-border-primary, #d1d9e0);
+[data-theme="dark"] .stack-progress-footer {
+  border-color: var(--color-border-primary, #30363d);
 }
 
-.stack-dialog-pr-item {
-  display: flex;
-  align-items: flex-start;
-  gap: 10px;
-  padding: 10px 4px;
-  border-bottom: 1px solid var(--color-border-subtle, rgba(0, 0, 0, 0.06));
-  font-size: 13px;
-  color: var(--color-text-primary, #1f2328);
+[data-theme="dark"] .stack-progress-pr-row {
+  border-color: var(--color-border-subtle, rgba(255, 255, 255, 0.06));
 }
 
-.stack-dialog-pr-item:last-child {
-  border-bottom: none;
+[data-theme="dark"] .stack-progress-pr-label {
+  color: var(--color-text-primary, #c9d1d9);
 }
 
-.stack-dialog-pr-checkbox {
-  flex-shrink: 0;
-  width: 16px;
-  height: 16px;
-  accent-color: var(--color-accent-primary, #0969da);
-  cursor: pointer;
+[data-theme="dark"] .stack-progress-pr-link {
+  color: var(--color-accent-primary, #58a6ff);
 }
 
-.stack-dialog-pr-current {
-  font-weight: 600;
+[data-theme="dark"] .stack-progress-pr-detail {
+  color: var(--color-text-secondary, #8b949e);
 }
 
-.stack-dialog-current-badge {
-  flex-shrink: 0;
-  width: 16px;
-  text-align: center;
-  color: var(--color-accent-ai, #f59e0b);
-  font-size: 14px;
+[data-theme="dark"] .stack-progress-pr-detail a {
+  color: var(--color-accent-primary, #58a6ff);
 }
 
-.stack-dialog-pr-info {
-  flex: 1;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
+[data-theme="dark"] .status-completed .stack-progress-status-icon {
+  color: var(--color-accent-emphasis-hover, #2ea043);
 }
 
-.stack-dialog-pr-title-row {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  min-width: 0;
+[data-theme="dark"] .status-running .stack-progress-status-icon {
+  color: var(--color-accent-ai-dark, #f59e0b);
 }
 
-.stack-dialog-loading {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 32px 16px;
-  color: var(--color-text-secondary, #656d76);
-  font-size: 13px;
-  gap: 8px;
+[data-theme="dark"] .status-setting_up .stack-progress-status-icon {
+  color: var(--color-text-secondary, #8b949e);
 }
 
-.stack-dialog-loading .loading-spinner {
-  width: 18px;
-  height: 18px;
-  margin-bottom: 0;
+[data-theme="dark"] .status-pending .stack-progress-status-icon {
+  color: var(--color-text-muted, #484f58);
 }
 
-.stack-dialog-pr-list {
-  max-height: 50vh;
-  overflow-y: auto;
+[data-theme="dark"] .status-failed .stack-progress-status-icon {
+  color: var(--color-danger, #f85149);
 }
 
-.stack-dialog-pr-number {
-  flex-shrink: 0;
-  font-family: var(--font-mono, ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace);
-  color: var(--color-text-secondary, #656d76);
+/* ==========================================================================
+   Hunk Summary Annotations (Phase 5)
+   ========================================================================== */
+
+.hunk-summary-row {
+  background: transparent;
 }
 
-.stack-dialog-pr-title {
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+.hunk-summary-cell {
+  padding: 4px 0;
+  border: none;
 }
 
-.stack-dialog-pr-branch {
+.hunk-summary-annotation {
   display: flex;
-  align-items: center;
-  gap: 4px;
-  color: var(--color-text-secondary, #656d76);
-  font-size: 12px;
+  align-items: flex-start;
+  gap: 10px;
+  padding: 8px 12px;
+  margin: 6px auto;
+  font-size: 13px;
+  line-height: 1.5;
+  color: #0550ae;
+  background: rgba(9, 105, 218, 0.06);
+  border: 1px solid rgba(9, 105, 218, 0.18);
+  border-left: 3px solid #0969da;
+  border-radius: var(--radius-md, 6px);
+  max-width: calc(100vw - var(--sidebar-width, 0px) - var(--right-panel-group-width, 0px) - 64px);
+  box-sizing: border-box;
+  word-break: break-word;
 }
 
-.stack-dialog-branch-name {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  min-width: 0;
+[data-theme="dark"] .hunk-summary-annotation {
+  color: #79c0ff;
+  background: rgba(56, 139, 253, 0.10);
+  border-color: rgba(56, 139, 253, 0.25);
+  border-left-color: #58a6ff;
 }
 
-.stack-dialog-branch-icon {
+.hunk-summary-icon {
   flex-shrink: 0;
-  opacity: 0.7;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  margin-top: 1px;
+  opacity: 0.85;
 }
 
-.stack-dialog-analyzed-badge {
-  flex-shrink: 0;
-  color: var(--color-accent-primary, #0969da);
-  font-size: 11px;
+.hunk-summary-text {
+  flex: 1;
+  min-width: 0;
 }
 
-.stack-dialog-note {
-  color: var(--color-text-secondary, #656d76);
-  font-size: 12px;
-  padding: 8px 16px;
-  border-top: 1px solid var(--color-border-subtle, rgba(0, 0, 0, 0.06));
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
+/* Review-level toggle hides every annotation row */
+body.summaries-hidden .hunk-summary-row,
+.d2h-file-wrapper.summaries-hidden-file .hunk-summary-row {
+  display: none;
 }
 
-.stack-dialog-note-info {
-  display: flex;
-  align-items: flex-start;
-  gap: 4px;
-  color: var(--color-text-tertiary, #8c959f);
+/* ---------- Toolbar toggle states ---------- */
+/* Default toolbar buttons inherit a transparent border; the toggle button
+   uses a fixed neutral border so the on-state color swap is visible. */
+.btn-summary-toggle {
+  position: relative;
+  border: 1px solid var(--color-border-primary, #d1d9e0);
+  color: var(--color-text-secondary, #57606a);
+  transition: color var(--transition-fast, 0.1s ease),
+              border-color var(--transition-fast, 0.1s ease),
+              background-color var(--transition-fast, 0.1s ease);
 }
 
-.stack-dialog-info-icon {
-  flex-shrink: 0;
-  margin-top: 2px;
-  opacity: 0.7;
+/* Summaries are visible (default state when feature is on). */
+.btn-summary-toggle.active {
+  color: var(--color-accent-primary, #0969da);
+  border-color: var(--color-accent-primary, #0969da);
+  background-color: rgba(9, 105, 218, 0.08);
 }
 
-.stack-dialog-error {
-  padding: 16px;
-  color: var(--color-danger, #cf222e);
+[data-theme="dark"] .btn-summary-toggle.active {
+  color: var(--color-accent-primary, #58a6ff);
+  border-color: var(--color-accent-primary, #58a6ff);
+  background-color: rgba(56, 139, 253, 0.12);
 }
 
-.stack-dialog-controls {
-  display: flex;
-  gap: 8px;
-  margin-bottom: 12px;
+/* Summaries hidden — the off state is just the base button styling
+   (gray secondary color, no background). Matches the tour-toggle pattern
+   so the two buttons read consistently when off. */
+
+/* "Generating" pulse — applied while the background summary job is running. */
+.btn-summary-toggle.generating {
+  animation: summaryPulse 1.6s ease-in-out infinite;
 }
 
-.stack-dialog-controls button {
-  background: none;
-  border: none;
-  color: var(--color-accent-primary, #0969da);
-  cursor: pointer;
-  font-size: 12px;
-  padding: 2px 4px;
+@keyframes summaryPulse {
+  0%, 100% {
+    box-shadow: 0 0 0 0 rgba(9, 105, 218, 0);
+  }
+  50% {
+    box-shadow: 0 0 0 4px rgba(9, 105, 218, 0.18);
+  }
 }
 
-.stack-dialog-controls button:hover {
-  text-decoration: underline;
+[data-theme="dark"] .btn-summary-toggle.generating {
+  animation-name: summaryPulseDark;
 }
 
-[data-theme="dark"] .stack-dialog {
-  background: var(--color-bg-elevated, #1e2329);
-  border-color: var(--color-border-primary, #30363d);
-  box-shadow: 0 8px 32px var(--color-shadow-large, rgba(0, 0, 0, 0.5));
+@keyframes summaryPulseDark {
+  0%, 100% {
+    box-shadow: 0 0 0 0 rgba(56, 139, 253, 0);
+  }
+  50% {
+    box-shadow: 0 0 0 4px rgba(56, 139, 253, 0.28);
+  }
 }
 
-[data-theme="dark"] .stack-dialog-header {
-  border-color: var(--color-border-primary, #30363d);
-  color: var(--color-text-primary, #c9d1d9);
+/* Custom hover label — shown alongside the native title in case the user's
+   browser is suppressing native tooltips. Uses a `data-label` attr so the
+   label tracks the on/off state. */
+.btn-summary-toggle[data-label]:hover::before {
+  content: attr(data-label);
+  position: absolute;
+  top: calc(100% + 6px);
+  right: 0;
+  z-index: 200;
+  padding: 4px 8px;
+  font-size: 12px;
+  line-height: 1.2;
+  white-space: nowrap;
+  color: var(--color-text-primary, #24292f);
+  background: var(--color-bg-primary, #ffffff);
+  border: 1px solid var(--color-border-primary, #d1d9e0);
+  border-radius: var(--radius-sm, 4px);
+  box-shadow: 0 2px 4px var(--color-shadow, rgba(27, 31, 36, 0.04));
+  pointer-events: none;
 }
 
-[data-theme="dark"] .stack-dialog-header button:hover {
+[data-theme="dark"] .btn-summary-toggle[data-label]:hover::before {
   color: var(--color-text-primary, #c9d1d9);
+  background: var(--color-bg-primary, #0d1117);
+  border-color: var(--color-border-primary, #30363d);
 }
 
-[data-theme="dark"] .stack-dialog-body {
-  color: var(--color-text-primary, #c9d1d9);
+.file-header-summary-toggle.summaries-off {
+  opacity: 0.45;
 }
 
-[data-theme="dark"] .stack-dialog-footer {
-  border-color: var(--color-border-primary, #30363d);
+/* ==========================================================================
+   Tour Annotations & Tour Bar (Phase 8)
+   ========================================================================== */
+
+/* The inline annotation row that is mounted above the anchor line for each
+   stop. Pale-yellow palette to differentiate from info-blue summaries. */
+.tour-annotation-row {
+  background: transparent;
 }
 
-[data-theme="dark"] .stack-dialog-pr-item {
-  border-color: var(--color-border-subtle, rgba(255, 255, 255, 0.06));
-  color: var(--color-text-primary, #c9d1d9);
+.tour-annotation-cell {
+  padding: 4px 0;
+  border: none;
 }
 
-[data-theme="dark"] .stack-dialog-loading {
-  color: var(--color-text-secondary, #8b949e);
+.tour-annotation {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 10px 14px;
+  margin: 6px auto;
+  font-size: 13px;
+  line-height: 1.45;
+  color: #7d5700;
+  /* Brighter amber matching the .tour-bar gradient so stops read as part
+     of the same tour surface, not a muted variant of it. */
+  background: linear-gradient(180deg, #fff8e1 0%, #fef3c7 100%);
+  border: 1px solid rgba(212, 167, 44, 0.55);
+  border-left: 3px solid #d4a72c;
+  border-radius: var(--radius-md, 6px);
+  max-width: calc(100vw - var(--sidebar-width, 0px) - var(--right-panel-group-width, 0px) - 64px);
+  box-sizing: border-box;
+  word-break: break-word;
+  transition: box-shadow var(--transition-fast, 0.1s ease),
+              border-color var(--transition-fast, 0.1s ease);
 }
 
-[data-theme="dark"] .stack-dialog-controls button {
-  color: var(--color-accent-primary, #58a6ff);
+[data-theme="dark"] .tour-annotation {
+  color: #e3b341;
+  /* Mirror the bar's dark-mode amber wash so light- and dark-mode tours
+     share one visual language. */
+  background: linear-gradient(180deg, rgba(187, 128, 9, 0.18) 0%, rgba(187, 128, 9, 0.28) 100%),
+              var(--color-bg-primary, #0d1117);
+  border-color: rgba(187, 128, 9, 0.55);
+  border-left-color: #bb8009;
 }
 
-[data-theme="dark"] .stack-dialog-pr-number {
-  color: var(--color-text-secondary, #8b949e);
+.tour-annotation-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  font-weight: 600;
 }
 
-[data-theme="dark"] .stack-dialog-pr-branch {
-  color: var(--color-text-secondary, #8b949e);
+.tour-stop-marker {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  opacity: 0.9;
 }
 
-[data-theme="dark"] .stack-dialog-analyzed-badge {
-  color: var(--color-accent-primary, #58a6ff);
+.tour-stop-marker svg {
+  width: 14px;
+  height: 14px;
 }
 
-[data-theme="dark"] .stack-dialog-note {
-  color: var(--color-text-secondary, #8b949e);
-  border-color: var(--color-border-subtle, rgba(255, 255, 255, 0.06));
+.tour-annotation-title {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 1.3;
 }
 
-[data-theme="dark"] .stack-dialog-note-info {
-  color: var(--color-text-tertiary, #6e7681);
+.tour-annotation-description {
+  margin: 0;
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 1.45;
+  opacity: 0.95;
+}
+
+/* Wrap around the description <p>. Collapsed state uses the WebKit
+   line-clamp triplet to cap visible content at ~3 lines; expanded state
+   removes the clamp so the full description shows. The wrapper (not the
+   inner <p>) carries the clamp so the JS overflow check has a stable
+   element to measure (`scrollHeight > clientHeight`). */
+.tour-annotation-description-wrap {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  line-clamp: 3;
+  overflow: hidden;
 }
 
-[data-theme="dark"] .stack-dialog-error {
-  color: var(--color-danger, #f85149);
+.tour-annotation-description-wrap.expanded {
+  display: block;
+  -webkit-line-clamp: unset;
+  line-clamp: unset;
+  overflow: visible;
 }
 
-/* ============================================
-   Stack Review — Stack Progress Modal
-   ============================================ */
-
-.stack-progress-overlay {
-  position: fixed;
-  inset: 0;
-  background: var(--color-bg-overlay, rgba(0, 0, 0, 0.5));
+/* Footer holds only the "Show more"/"Show less" toggle when the
+   description overflows the line-clamp; otherwise it's an empty stub.
+   Chat about lives in the header now. */
+.tour-annotation-footer {
   display: flex;
   align-items: center;
-  justify-content: center;
-  z-index: 1000;
+  gap: 6px;
+  margin-top: 4px;
 }
 
-.stack-progress-backdrop {
-  position: absolute;
-  inset: 0;
+.tour-annotation-footer:empty {
+  display: none;
 }
 
-.stack-progress-modal {
-  background: var(--color-bg-elevated, #fff);
-  border: 1px solid var(--color-border-primary, #d1d9e0);
-  border-radius: 12px;
-  box-shadow: 0 8px 32px var(--color-shadow-large, rgba(0, 0, 0, 0.2));
-  width: 520px;
-  max-width: 90vw;
-  max-height: 80vh;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
+/* "Show more" / "Show less" toggle. Styled as a borderless amber link
+   button so it reads as part of the tour annotation but doesn't compete
+   with the primary Chat about action. */
+.tour-annotation-show-more-btn {
+  appearance: none;
+  background: none;
+  border: 0;
+  padding: 2px 4px;
+  margin: 0;
+  font: inherit;
+  font-size: 12px;
+  font-weight: 600;
+  color: #7d5700;
+  cursor: pointer;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  border-radius: var(--radius-sm, 3px);
 }
 
-.stack-progress-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 16px 20px;
-  border-bottom: 1px solid var(--color-border-primary, #d1d9e0);
-  font-size: 15px;
-  font-weight: 600;
-  color: var(--color-text-primary, #1f2328);
+.tour-annotation-show-more-btn:hover {
+  color: #5b3f00;
+  background: rgba(255, 255, 255, 0.45);
 }
 
-.stack-progress-header button {
-  background: none;
-  border: none;
-  color: var(--color-text-tertiary, #656d76);
-  cursor: pointer;
-  padding: 4px;
-  border-radius: 4px;
-  transition: color 0.15s ease;
+.tour-annotation-show-more-btn:focus-visible {
+  outline: 2px solid #d4a72c;
+  outline-offset: 1px;
 }
 
-.stack-progress-header button:hover {
-  color: var(--color-text-primary, #1f2328);
+[data-theme="dark"] .tour-annotation-show-more-btn {
+  color: #e3b341;
 }
 
-.stack-progress-body {
-  flex: 1;
-  overflow-y: auto;
-  padding: 16px 20px;
+[data-theme="dark"] .tour-annotation-show-more-btn:hover {
+  color: #f3c861;
+  background: rgba(187, 128, 9, 0.18);
 }
 
-.stack-progress-footer {
-  display: flex;
+/* The chat button on a tour-stop annotation reuses .ai-action / .ai-action-chat
+   so its idle and hover treatments stay in sync with the rest of the app. We
+   override surface colors (so it reads on the amber background) AND collapse
+   it to an icon-only square — the button sits in the header next to the
+   stop marker, where a labelled button would crowd the title row. The title
+   attribute / aria-label carry the meaning for accessibility + tooltip. */
+.tour-annotation .tour-annotation-chat-btn {
+  background: rgba(255, 255, 255, 0.6);
+  color: #7d5700;
+  border: 1px solid rgba(212, 167, 44, 0.55);
+  padding: 2px;
+  width: 22px;
+  height: 22px;
+  display: inline-flex;
   align-items: center;
-  justify-content: flex-end;
-  gap: 8px;
-  padding: 12px 20px;
-  border-top: 1px solid var(--color-border-primary, #d1d9e0);
+  justify-content: center;
+  flex: 0 0 auto;
 }
 
-.stack-progress-pr-list {
-  max-height: 320px;
-  overflow-y: auto;
+.tour-annotation .tour-annotation-chat-btn svg {
+  width: 14px;
+  height: 14px;
 }
 
-.stack-progress-pr-row {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 10px 4px;
-  border-bottom: 1px solid var(--color-border-subtle, rgba(0, 0, 0, 0.06));
-  font-size: 13px;
+.tour-annotation .tour-annotation-chat-btn:hover {
+  background: rgba(255, 255, 255, 0.9);
+  color: #5b3f00;
+  border-color: #d4a72c;
 }
 
-.stack-progress-pr-row:last-child {
-  border-bottom: none;
+[data-theme="dark"] .tour-annotation .tour-annotation-chat-btn {
+  background: rgba(187, 128, 9, 0.12);
+  color: #e3b341;
+  border-color: rgba(187, 128, 9, 0.55);
 }
 
-.stack-progress-status-icon {
-  flex-shrink: 0;
-  width: 20px;
-  height: 20px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 14px;
+[data-theme="dark"] .tour-annotation .tour-annotation-chat-btn:hover {
+  background: rgba(187, 128, 9, 0.25);
+  color: #f3c861;
+  border-color: #e3b341;
 }
 
-.stack-progress-pr-label {
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  color: var(--color-text-primary, #1f2328);
+/* Emphasize the currently-active stop annotation. */
+body.tour-active .tour-annotation-row.active-stop .tour-annotation {
+  box-shadow: 0 0 0 2px rgba(212, 167, 44, 0.55),
+              0 2px 6px rgba(0, 0, 0, 0.08);
+  border-color: #d4a72c;
 }
 
-.stack-progress-pr-link {
-  cursor: pointer;
-  color: var(--color-accent-primary, #0969da);
+[data-theme="dark"] body.tour-active .tour-annotation-row.active-stop .tour-annotation {
+  box-shadow: 0 0 0 2px rgba(187, 128, 9, 0.65),
+              0 2px 6px rgba(0, 0, 0, 0.30);
+  border-color: #e3b341;
 }
 
-.stack-progress-pr-link:hover {
-  text-decoration: underline;
+/* ---------- Sticky top tour bar ---------- */
+:root {
+  /* Height assumed by the diff-toolbar / file-header offset rules below.
+     Keep this in sync with the bar's computed height (icon + button row +
+     vertical padding). The bar also sets `min-height: var(--tour-bar-height)`
+     so its actual rendered height never drops below this value. */
+  --tour-bar-height: 56px;
 }
 
-.stack-progress-pr-detail {
+/* While a tour is active, push the sticky `.diff-toolbar` and the
+   per-file `.d2h-file-header` down by the bar's height so they stack
+   below it instead of overlapping. The bar itself is `position: sticky;
+   top: 0` inside the same scroll container (.main-layout .diff-view),
+   so all three pin in order: tour bar (top: 0), diff toolbar (top:
+   --tour-bar-height), file header (top: --toolbar-height + --tour-bar-height). */
+body.tour-active .diff-toolbar {
+  top: var(--tour-bar-height);
+}
+
+body.tour-active .d2h-file-header {
+  top: calc(var(--toolbar-height, 0px) + var(--tour-bar-height));
+}
+
+.tour-bar {
+  /* Sticky inside the diff-view scroll container so the bar spans the
+     diff width only — the file-tree sidebar (and its hide/show toggle in
+     the diff toolbar) stays visible and clickable. Mounted as the first
+     child of .diff-view via TourBar.mount(parent). */
+  position: sticky;
+  top: 0;
+  /* z-index must exceed .diff-toolbar (5) and .d2h-file-header (4) so the
+     bar paints above them at the top of the scrollport. */
+  z-index: 6;
+  /* Lock the rendered height to the var so the sticky-top offsets on
+     .diff-toolbar and .d2h-file-header line up exactly with the bar's
+     bottom edge (no gap, no overlap). flex-shrink:0 prevents the parent
+     flex column (.diff-view) from squashing the bar below min-height. */
+  box-sizing: border-box;
   flex-shrink: 0;
-  color: var(--color-text-secondary, #656d76);
+  min-height: var(--tour-bar-height);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 10px 16px;
+  /* Distinctive amber theme so the bar reads as a tour-mode chrome and
+     not just another toolbar. Soft tinted background + a thicker amber
+     bottom rule echo the per-stop annotation accent (#d4a72c). */
+  background: linear-gradient(180deg, #fff8e1 0%, #fef3c7 100%);
+  border-bottom: 2px solid #d4a72c;
+  box-shadow: 0 2px 12px rgba(212, 167, 44, 0.18);
+  font-size: 13px;
+  color: #7d5700;
 }
 
-.stack-progress-pr-detail a {
-  color: var(--color-accent-primary, #0969da);
-  text-decoration: none;
+[data-theme="dark"] .tour-bar {
+  background: linear-gradient(180deg, rgba(187, 128, 9, 0.18) 0%, rgba(187, 128, 9, 0.28) 100%),
+              var(--color-bg-primary, #0d1117);
+  border-bottom-color: #bb8009;
+  color: #e3b341;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.40);
 }
 
-.stack-progress-pr-detail a:hover {
-  text-decoration: underline;
+.tour-bar__brand {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-weight: 600;
+  color: #7d5700;
 }
 
-.status-completed .stack-progress-status-icon {
-  color: var(--color-accent-emphasis, #1a7f37);
+[data-theme="dark"] .tour-bar__brand {
+  color: #e3b341;
 }
 
-.status-running .stack-progress-status-icon {
-  color: var(--color-accent-ai, #f59e0b);
-  animation: pulse-dot 1.2s ease-in-out infinite;
+.tour-bar__brand svg {
+  width: 16px;
+  height: 16px;
 }
 
-.status-setting_up .stack-progress-status-icon {
-  color: var(--color-text-secondary, #656d76);
-  animation: pulse-dot 1.2s ease-in-out infinite;
+.tour-bar__progress {
+  flex: 1;
+  text-align: center;
+  font-variant-numeric: tabular-nums;
+  font-weight: 500;
+  color: #6b4500;
 }
 
-.status-pending .stack-progress-status-icon {
-  color: var(--color-text-muted, #d1d9e0);
+[data-theme="dark"] .tour-bar__progress {
+  color: #e3b341;
 }
 
-.status-failed .stack-progress-status-icon {
-  color: var(--color-danger, #cf222e);
+.tour-bar__nav {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
 }
 
-[data-theme="dark"] .stack-progress-modal {
-  background: var(--color-bg-elevated, #1e2329);
-  border-color: var(--color-border-primary, #30363d);
-  box-shadow: 0 8px 32px var(--color-shadow-large, rgba(0, 0, 0, 0.5));
+.tour-bar__nav button {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 10px;
+  font-size: 12px;
+  font-weight: 500;
+  color: #7d5700;
+  background: rgba(255, 255, 255, 0.65);
+  border: 1px solid rgba(212, 167, 44, 0.55);
+  border-radius: var(--radius-sm, 4px);
+  cursor: pointer;
+  transition: background-color var(--transition-fast, 0.1s ease),
+              border-color var(--transition-fast, 0.1s ease);
 }
 
-[data-theme="dark"] .stack-progress-header {
-  border-color: var(--color-border-primary, #30363d);
-  color: var(--color-text-primary, #c9d1d9);
+.tour-bar__nav button:hover:not(:disabled) {
+  background: rgba(255, 255, 255, 0.95);
+  border-color: #d4a72c;
 }
 
-[data-theme="dark"] .stack-progress-header button:hover {
-  color: var(--color-text-primary, #c9d1d9);
+.tour-bar__nav button:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
 }
 
-[data-theme="dark"] .stack-progress-body {
-  color: var(--color-text-primary, #c9d1d9);
+.tour-bar__nav button svg {
+  width: 12px;
+  height: 12px;
 }
 
-[data-theme="dark"] .stack-progress-footer {
-  border-color: var(--color-border-primary, #30363d);
+[data-theme="dark"] .tour-bar__nav button {
+  color: #e3b341;
+  background: rgba(13, 17, 23, 0.55);
+  border-color: rgba(187, 128, 9, 0.55);
 }
 
-[data-theme="dark"] .stack-progress-pr-row {
-  border-color: var(--color-border-subtle, rgba(255, 255, 255, 0.06));
+[data-theme="dark"] .tour-bar__nav button:hover:not(:disabled) {
+  background: rgba(13, 17, 23, 0.85);
+  border-color: #e3b341;
 }
 
-[data-theme="dark"] .stack-progress-pr-label {
-  color: var(--color-text-primary, #c9d1d9);
+/* ---------- Toolbar tour-toggle button states ---------- */
+.btn-tour-toggle {
+  position: relative;
+  border: 1px solid var(--color-border-primary, #d1d9e0);
+  color: var(--color-text-secondary, #57606a);
+  transition: color var(--transition-fast, 0.1s ease),
+              border-color var(--transition-fast, 0.1s ease),
+              background-color var(--transition-fast, 0.1s ease);
 }
 
-[data-theme="dark"] .stack-progress-pr-link {
-  color: var(--color-accent-primary, #58a6ff);
+/* Tour active — pale-yellow highlight. */
+.btn-tour-toggle.active {
+  color: #7d5700;
+  border-color: #d4a72c;
+  background-color: rgba(212, 167, 44, 0.12);
 }
 
-[data-theme="dark"] .stack-progress-pr-detail {
-  color: var(--color-text-secondary, #8b949e);
+[data-theme="dark"] .btn-tour-toggle.active {
+  color: #e3b341;
+  border-color: #bb8009;
+  background-color: rgba(187, 128, 9, 0.20);
 }
 
-[data-theme="dark"] .stack-progress-pr-detail a {
-  color: var(--color-accent-primary, #58a6ff);
+/* Generating pulse while the background tour job is running. */
+.btn-tour-toggle.generating {
+  animation: tourPulse 1.6s ease-in-out infinite;
 }
 
-[data-theme="dark"] .status-completed .stack-progress-status-icon {
-  color: var(--color-accent-emphasis-hover, #2ea043);
+/* Subtle indicator that a newer tour is stashed and waiting for restart.
+   Renders as a small dot in the corner of the toolbar button. */
+.btn-tour-toggle.tour-updated-pending::after {
+  content: '';
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #d4a72c;
+  box-shadow: 0 0 0 2px var(--color-bg-primary, #ffffff);
 }
 
-[data-theme="dark"] .status-running .stack-progress-status-icon {
-  color: var(--color-accent-ai-dark, #f59e0b);
+[data-theme="dark"] .btn-tour-toggle.tour-updated-pending::after {
+  background: #e3b341;
+  box-shadow: 0 0 0 2px var(--color-bg-primary, #0d1117);
 }
 
-[data-theme="dark"] .status-setting_up .stack-progress-status-icon {
-  color: var(--color-text-secondary, #8b949e);
+@keyframes tourPulse {
+  0%, 100% {
+    box-shadow: 0 0 0 0 rgba(212, 167, 44, 0);
+  }
+  50% {
+    box-shadow: 0 0 0 4px rgba(212, 167, 44, 0.28);
+  }
 }
 
-[data-theme="dark"] .status-pending .stack-progress-status-icon {
-  color: var(--color-text-muted, #484f58);
+[data-theme="dark"] .btn-tour-toggle.generating {
+  animation-name: tourPulseDark;
 }
 
-[data-theme="dark"] .status-failed .stack-progress-status-icon {
-  color: var(--color-danger, #f85149);
+@keyframes tourPulseDark {
+  0%, 100% {
+    box-shadow: 0 0 0 0 rgba(187, 128, 9, 0);
+  }
+  50% {
+    box-shadow: 0 0 0 4px rgba(187, 128, 9, 0.40);
+  }
 }