@in-the-loop-labs/pair-review 3.6.0 → 3.7.1

package/public/css/pr.css

@@ -1661,6 +1661,23 @@
   scroll-margin-top: var(--toolbar-height, 0px);
 }
 
+/* Suggestion / finding / comment / chat-line navigation lands the target at
+   the TOP of the diff panel (scrollIntoView block:'start'). Offset it below
+   the sticky toolbar AND the sticky file header so it isn't hidden behind
+   them. `--diff-file-header-height` is measured in JS (_measureFileHeaderHeight)
+   with a sane fallback. Suppressed during a tour, which scrolls to center and
+   manages its own sticky offsets. */
+:root {
+  --diff-scroll-offset: calc(var(--toolbar-height, 0px) + var(--diff-file-header-height, 38px));
+}
+body:not(.tour-active) .d2h-file-wrapper tr,
+body:not(.tour-active) .ai-suggestion,
+body:not(.tour-active) .file-comment-card,
+body:not(.tour-active) .user-comment-row,
+body:not(.tour-active) .external-comment-row {
+  scroll-margin-top: var(--diff-scroll-offset);
+}
+
 /* Hide diff content when collapsed */
 .d2h-file-wrapper.collapsed .d2h-file-body,
 .d2h-file-wrapper.collapsed .d2h-diff-table {
@@ -2686,164 +2703,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;
@@ -2921,43 +2780,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);
@@ -9945,1548 +9767,6 @@ body.resizing * {
   background: var(--color-text-tertiary);
 }
 
-/* ============================================
-   AI Analysis Configuration Modal
-   ============================================ */
-
-.analysis-config-overlay {
-  z-index: 1100;
-}
-
-.analysis-config-overlay.visible {
-  opacity: 1;
-}
-
-.analysis-config-overlay.visible .analysis-config-container {
-  transform: translateY(0) scale(1);
-  opacity: 1;
-}
-
-.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));
-  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;
-}
-
-[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);
-}
-
-/* Header */
-.analysis-config-header {
-  display: 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);
-}
-
-.header-title-section {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.header-icon {
-  display: 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%);
-  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