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

package/public/css/analysis-config.css

@@ -1,5 +1,1812 @@
 /* Copyright 2026 Tim Perkins (tjwp) | SPDX-License-Identifier: Apache-2.0 */
 
+/* Shared modal shell used by the analysis configuration dialog. */
+
+.analysis-config-overlay {
+  --color-bg-subtle: var(--color-bg-secondary, #f6f8fa);
+  --color-bg-elevated: var(--color-bg-primary, #ffffff);
+  --color-text-muted: var(--color-text-tertiary, #8c959f);
+  --color-border-default: var(--color-border-primary, #d1d9e0);
+  --color-border-subtle: var(--color-border-secondary, rgba(0, 0, 0, 0.06));
+  --color-accent-light: var(--color-accent-subtle, rgba(9, 105, 218, 0.1));
+  --color-accent-ai: var(--ai-secondary, #fbbf24);
+  --color-accent-ai-dark: var(--ai-primary, #f59e0b);
+  --color-info: var(--color-accent-primary, #0969da);
+}
+
+/* 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 .btn-secondary,
+#confirm-dialog .btn-secondary {
+  background-color: #f6f8fa;
+  color: #24292f;
+  border: 1px solid #d1d9e0;
+}
+
+#text-input-dialog .btn-secondary:hover,
+#confirm-dialog .btn-secondary:hover {
+  background-color: #eaeef2;
+}
+
+#text-input-dialog .btn-primary,
+#confirm-dialog .btn-primary {
+  background-color: var(--color-accent-primary, #0969da);
+  color: white;
+  border: 1px solid var(--color-accent-primary, #0969da);
+}
+
+#text-input-dialog .btn-danger,
+#confirm-dialog .btn-danger {
+  background-color: var(--color-danger, #d1242f);
+  color: white;
+  border: 1px solid var(--color-danger, #d1242f);
+}
+
+#text-input-dialog .btn-warning,
+#confirm-dialog .btn-warning {
+  background-color: #d97706;
+  color: white;
+  border: 1px solid #d97706;
+}
+
+[data-theme="dark"] #text-input-dialog .btn-secondary,
+[data-theme="dark"] #confirm-dialog .btn-secondary {
+  background-color: var(--color-bg-secondary, #161b22);
+  color: var(--color-text-primary, #c9d1d9);
+  border-color: var(--color-border-primary, #30363d);
+}
+
+[data-theme="dark"] #text-input-dialog .btn-secondary:hover,
+[data-theme="dark"] #confirm-dialog .btn-secondary:hover {
+  background-color: var(--color-bg-tertiary, #1c2128);
+}
+
+.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);
+}
+
+/* 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);
+}
+
+.analysis-config-footer .btn-secondary {
+  color: var(--color-text-primary);
+  background-color: var(--color-bg-secondary);
+  border: 1px solid var(--color-border-primary);
+}
+
+.analysis-config-footer .btn-secondary:hover {
+  background-color: var(--color-bg-tertiary);
+  border-color: var(--color-border-primary);
+}
+
+/* ============================================
+   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);
+}
+
 /* Exclude Previous Findings — collapsible <details> section */
 
 .exclude-previous-section {