@in-the-loop-labs/pair-review 1.6.2 → 2.0.0

package/public/css/pr.css

@@ -629,6 +629,12 @@
   --ai-border: rgba(217, 119, 6, 0.3);
   --ai-text: #92400e;
 
+  /* Chat Identity - Blue accent for chat panel */
+  --chat-primary: #2563eb;
+  --chat-subtle: rgba(37, 99, 235, 0.08);
+  --chat-border: rgba(37, 99, 235, 0.2);
+  --chat-text: #1e40af;
+
   /* Category colors for AI suggestions */
   --category-bug: #dc2626;
   --category-bug-bg: #fef2f2;
@@ -720,6 +726,12 @@
   --ai-border: rgba(245, 158, 11, 0.3);
   --ai-text: #fcd34d;
 
+  /* Chat Identity - Blue accent for dark theme */
+  --chat-primary: #60a5fa;
+  --chat-subtle: rgba(96, 165, 250, 0.1);
+  --chat-border: rgba(96, 165, 250, 0.2);
+  --chat-text: #93c5fd;
+
   /* Category colors for dark theme */
   --category-bug: #f87171;
   --category-bug-bg: rgba(248, 113, 113, 0.1);
@@ -1346,8 +1358,9 @@
   white-space: nowrap;
 }
 
-/* File header comment button */
-.file-header-comment-btn {
+/* File header comment button and file header chat button */
+.file-header-comment-btn,
+.file-header-chat-btn {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1363,26 +1376,31 @@
   flex-shrink: 0;
 }
 
-.file-header-comment-btn:hover {
+.file-header-comment-btn:hover,
+.file-header-chat-btn: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-comment-btn:active,
+.file-header-chat-btn:active {
   background-color: var(--color-accent-bg, rgba(9, 105, 218, 0.15));
 }
 
-.file-header-comment-btn svg {
+.file-header-comment-btn svg,
+.file-header-chat-btn svg {
   width: 16px;
   height: 16px;
 }
 
-[data-theme="dark"] .file-header-comment-btn {
+[data-theme="dark"] .file-header-comment-btn,
+[data-theme="dark"] .file-header-chat-btn {
   color: #8b949e;
 }
 
-[data-theme="dark"] .file-header-comment-btn:hover {
+[data-theme="dark"] .file-header-comment-btn:hover,
+[data-theme="dark"] .file-header-chat-btn:hover {
   background-color: rgba(56, 139, 253, 0.15);
   border-color: #58a6ff;
   color: #58a6ff;
@@ -1734,8 +1752,9 @@ tr.newly-expanded .d2h-code-line-ctn {
   animation: slideUp 0.3s ease;
   overflow: visible;
   word-break: break-word;
-  /* Viewport-based max-width: total viewport minus sidebar, AI panel, and minimal padding */
-  max-width: calc(100vw - var(--sidebar-width) - var(--ai-panel-width) - 64px);
+  /* Viewport-based max-width: total viewport minus sidebar, right panel group, and padding.
+     --right-panel-group-width is set by PanelGroup.js (sum for horizontal, max for vertical). */
+  max-width: calc(100vw - var(--sidebar-width) - var(--right-panel-group-width, 0px) - 64px);
   box-sizing: border-box;
 }
 
@@ -2293,6 +2312,19 @@ tr.newly-expanded .d2h-code-line-ctn {
   background: rgba(248, 81, 73, 0.15);
 }
 
+/* Chat button: neutral style, blue on hover (matches Edit button) */
+.ai-action-chat {
+  background: var(--color-bg-elevated, #1e2329);
+  color: var(--color-text-secondary, #8b949e);
+  border: 1px solid var(--color-border-default, rgba(255, 255, 255, 0.1));
+}
+
+.ai-action-chat:hover {
+  background: var(--color-accent-light, rgba(56, 139, 253, 0.15));
+  color: var(--color-accent-primary, #58a6ff);
+  border-color: var(--color-accent-primary, #58a6ff);
+}
+
 /* Icon styling inside action buttons */
 .ai-action svg {
   width: 12px;
@@ -2453,6 +2485,34 @@ tr.newly-expanded .d2h-code-line-ctn {
   fill: var(--color-text-primary);
 }
 
+/* Chat button in collapsed suggestion bar - icon only, transparent */
+.btn-collapsed-chat {
+  color: var(--color-text-tertiary, #6e7681);
+  background-color: transparent;
+  border: none;
+  padding: 2px;
+  font-size: 12px;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  min-height: 24px;
+  min-width: 24px;
+  transition: color 150ms ease, background 150ms ease;
+}
+
+.btn-collapsed-chat:hover {
+  color: var(--color-accent-primary, #58a6ff);
+  background-color: var(--color-accent-light, rgba(56, 139, 253, 0.15));
+}
+
+.btn-collapsed-chat svg {
+  width: 14px;
+  height: 14px;
+  fill: currentColor;
+}
+
 /* Dark theme adjustments for AI suggestions - matches prototype styling */
 [data-theme="dark"] .ai-suggestion {
   background: #181c23; /* Exact prototype --bg-tertiary value */
@@ -3628,6 +3688,50 @@ tr:hover .add-comment-btn {
   opacity: 1;
 }
 
+/* Gutter chat button — matches .add-comment-btn style */
+.chat-line-btn {
+  position: absolute;
+  right: 12px;                /* Left of the + button at right: -12px */
+  top: 50%;
+  transform: translateY(-50%);
+  width: 22px;
+  height: 22px;
+  background: linear-gradient(180deg, #0969da 0%, #0860ca 100%);
+  color: #fff;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.1s ease, transform 0.1s ease, box-shadow 0.1s ease;
+  z-index: 20;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: auto;
+  padding: 0;
+}
+
+.chat-line-btn svg {
+  width: 12px;
+  height: 12px;
+}
+
+.chat-line-btn:hover {
+  background: linear-gradient(180deg, #0860ca 0%, #0757b8 100%);
+  transform: translateY(-50%) scale(1.08);
+  box-shadow: 0 2px 6px rgba(9, 105, 218, 0.35), 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.chat-line-btn:active {
+  transform: translateY(-50%) scale(0.96);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+
+tr:hover .chat-line-btn {
+  opacity: 1;
+}
+
 /* Line range selection */
 .line-range-selected,
 tr.line-range-selected,
@@ -3889,8 +3993,9 @@ tr.line-range-start .d2h-code-line-ctn {
   position: relative;
   overflow: hidden;
   word-break: break-word;
-  /* Viewport-based max-width: total viewport minus sidebar, AI panel, and minimal padding */
-  max-width: calc(100vw - var(--sidebar-width) - var(--ai-panel-width) - 64px);
+  /* Viewport-based max-width: total viewport minus sidebar, right panel group, and padding.
+     --right-panel-group-width is set by PanelGroup.js (sum for horizontal, max for vertical). */
+  max-width: calc(100vw - var(--sidebar-width) - var(--right-panel-group-width, 0px) - 64px);
   box-sizing: border-box;
 }
 
@@ -4045,21 +4150,12 @@ tr.line-range-start .d2h-code-line-ctn {
 }
 
 
-.user-comment-timestamp {
-  color: #656d76;
-  font-size: 11px;
-  font-weight: 500;
-  background: rgba(139, 92, 246, 0.05);
-  padding: 2px 6px;
-  border-radius: 10px;
-  margin-left: auto;
-  margin-right: 6px;
-}
 
 .user-comment-actions {
   display: flex;
   align-items: center;
   gap: 4px;
+  margin-left: auto;
 }
 
 /* Hide edit/delete buttons when in editing mode */
@@ -4067,6 +4163,7 @@ tr.line-range-start .d2h-code-line-ctn {
   display: none;
 }
 
+.btn-chat-comment,
 .btn-edit-comment,
 .btn-delete-comment {
   background: transparent;
@@ -4080,16 +4177,29 @@ tr.line-range-start .d2h-code-line-ctn {
   align-items: center;
 }
 
+[data-theme="dark"] .btn-chat-comment,
 [data-theme="dark"] .btn-edit-comment,
 [data-theme="dark"] .btn-delete-comment {
   color: #c9d1d9;
 }
 
+.btn-chat-comment svg,
 .btn-edit-comment svg,
 .btn-delete-comment svg {
   fill: currentColor;
 }
 
+.btn-chat-comment svg {
+  width: 14px;
+  height: 14px;
+}
+
+.btn-chat-comment:hover {
+  background: var(--color-accent-light, rgba(139, 92, 246, 0.1));
+  border-color: var(--color-accent-primary, #8b5cf6);
+  color: var(--color-accent-primary, #8b5cf6);
+}
+
 .btn-edit-comment:hover {
   background: rgba(139, 92, 246, 0.1);
   border-color: #8b5cf6;
@@ -4116,6 +4226,12 @@ tr.line-range-start .d2h-code-line-ctn {
   display: none;
 }
 
+/* File-comment-card editing puts the textarea inside .user-comment-body,
+   so we must keep the body visible (the content is already replaced). */
+.file-comment-card.editing-mode .user-comment-body {
+  display: block;
+}
+
 .user-comment-edit-form,
 .comment-edit-textarea {
   width: 100%;
@@ -4202,6 +4318,12 @@ tr.line-range-start .d2h-code-line-ctn {
   box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.2);
 }
 
+[data-theme="dark"] .btn-chat-comment:hover {
+  background: rgba(167, 139, 250, 0.15);
+  border-color: #a78bfa;
+  color: #a78bfa;
+}
+
 [data-theme="dark"] .btn-edit-comment:hover {
   background: rgba(167, 139, 250, 0.15);
   border-color: #a78bfa;
@@ -4220,6 +4342,7 @@ tr.line-range-start .d2h-code-line-ctn {
   margin-top: 8px;
 }
 
+
 /* Review Submission Panel */
 .review-panel {
   position: fixed;
@@ -4393,11 +4516,6 @@ tr.line-range-start .d2h-code-line-ctn {
   border-bottom-color: rgba(167, 139, 250, 0.1);
 }
 
-[data-theme="dark"] .user-comment-timestamp {
-  background: rgba(167, 139, 250, 0.1);
-  color: #8b949e;
-}
-
 [data-theme="dark"] .user-comment-body {
   color: #e6edf3;
 }
@@ -5478,6 +5596,41 @@ tr.line-range-start .d2h-code-line-ctn {
     color: var(--color-text-muted);
 }
 
+.analysis-history-chat-btn {
+    width: 22px;
+    height: 22px;
+    padding: 0;
+    margin-left: auto;
+    border: 1px solid transparent;
+    box-sizing: border-box;
+    border-radius: 4px;
+    background: transparent;
+    color: var(--color-fg-muted);
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    transition: opacity 0.15s ease, background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
+    flex-shrink: 0;
+}
+
+/* Show on hover of parent item or when item is previewing */
+.analysis-history-item:hover .analysis-history-chat-btn,
+.analysis-history-item.previewing .analysis-history-chat-btn {
+    opacity: 1;
+}
+
+.analysis-history-chat-btn:hover {
+    color: var(--color-accent-hover, #1f6feb);
+    border-color: var(--color-accent-hover, #1f6feb);
+}
+
+.analysis-history-chat-btn svg {
+    width: 14px;
+    height: 14px;
+}
+
 /* ============================================
    Generated Files Styles
    ============================================ */
@@ -5549,6 +5702,7 @@ tr.line-range-start .d2h-code-line-ctn {
   --header-height: 64px;
   --sidebar-width: 260px;
   --ai-panel-width: 320px;
+  --chat-panel-width: 0px;
 
   /* Transitions */
   --transition-fast: 0.1s ease;
@@ -5996,6 +6150,7 @@ body:not([data-theme="dark"]) .theme-icon-light {
   gap: 10px;
   flex: 1;
   min-width: 0;
+  overflow: hidden;
 }
 
 .toolbar-separator {
@@ -6282,6 +6437,9 @@ body:not([data-theme="dark"]) .theme-icon-light {
   position: relative;
   overflow: hidden;
   transition: all 0.3s ease;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
 }
 
 #analyze-btn::before {
@@ -6368,6 +6526,54 @@ body:not([data-theme="dark"]) .theme-icon-light {
   color: #1c1917;
 }
 
+/* Review panel toggle button - orange/amber AI identity */
+#ai-panel-toggle svg {
+  color: var(--ai-primary, #d97706);
+}
+
+#ai-panel-toggle:hover {
+  background: var(--ai-subtle, rgba(217, 119, 6, 0.08));
+  border-color: var(--ai-border, rgba(217, 119, 6, 0.3));
+  color: var(--ai-primary, #d97706);
+}
+
+[data-theme="dark"] #ai-panel-toggle svg {
+  color: var(--ai-primary, #f59e0b);
+}
+
+[data-theme="dark"] #ai-panel-toggle:hover {
+  background: var(--ai-subtle, rgba(245, 158, 11, 0.1));
+  border-color: var(--ai-border, rgba(245, 158, 11, 0.3));
+  color: var(--ai-primary, #f59e0b);
+}
+
+/* Chat toggle button - icon-only, blue chat identity */
+#chat-toggle-btn .chat-icon {
+  color: #3b82f6;
+}
+
+#chat-toggle-btn.active {
+  background: rgba(59, 130, 246, 0.1);
+  border-color: #3b82f6;
+}
+
+#chat-toggle-btn.active .chat-icon {
+  color: #2563eb;
+}
+
+[data-theme="dark"] #chat-toggle-btn .chat-icon {
+  color: #60a5fa;
+}
+
+[data-theme="dark"] #chat-toggle-btn.active {
+  background: rgba(59, 130, 246, 0.15);
+  border-color: #3b82f6;
+}
+
+[data-theme="dark"] #chat-toggle-btn.active .chat-icon {
+  color: #60a5fa;
+}
+
 .main-layout .diff-container {
   flex: 1;
   min-width: 0; /* Prevent flex item from expanding beyond container */
@@ -6388,6 +6594,7 @@ body:not([data-theme="dark"]) .theme-icon-light {
   overflow: visible;
   flex-shrink: 0;
   transition: width var(--transition-default), opacity var(--transition-default);
+  position: relative; /* Needed for absolute resize-handle positioning (see "Resize Handles" section below) */
 }
 
 .ai-panel.collapsed {
@@ -6396,6 +6603,13 @@ body:not([data-theme="dark"]) .theme-icon-light {
   overflow: hidden;
 }
 
+.right-panel-group[class*="layout-v-"] .ai-panel.collapsed {
+  flex: 0 0 0;
+  height: 0;
+  min-height: 0;
+  overflow: hidden;
+}
+
 /* --------------------------------------------------------------------------
    Resize Handles for Panels
    -------------------------------------------------------------------------- */
@@ -6412,7 +6626,7 @@ body:not([data-theme="dark"]) .theme-icon-light {
 
 .resize-handle:hover,
 .resize-handle.dragging {
-  background: var(--border-color);
+  background: var(--color-border-primary);
 }
 
 .resize-handle-right {
@@ -6428,8 +6642,23 @@ body:not([data-theme="dark"]) .theme-icon-light {
   position: relative;
 }
 
-.ai-panel {
+/* Ensure AI panel content children stack below the resize handle.
+   overflow-y:auto on children like .findings-summary creates implicit stacking
+   contexts that can paint over the absolutely-positioned resize-handle (z-index:10).
+   Explicitly place content children at z-index:1 so the handle stays on top. */
+.ai-panel > *:not(.resize-handle) {
   position: relative;
+  z-index: 1;
+}
+
+/* Dropdown must overlay sibling panel sections */
+.ai-panel > .analysis-context {
+  z-index: 2;
+}
+
+/* When dropdown is open, lift above resize-handle (z-index:10) */
+.ai-panel > .analysis-context.open {
+  z-index: 11;
 }
 
 /* Prevent text selection during drag */
@@ -6452,116 +6681,389 @@ body.resizing * {
   display: flex;
 }
 
-/* Ensure toggle button shows when panel is collapsed via responsive rules */
-@media (max-width: 900px) {
-  #ai-panel-toggle {
-    display: flex;
-  }
+/* Hide Chat panel toggle button when panel is visible */
+#chat-toggle-btn {
+  display: none;
 }
 
-/* Dark theme toolbar button overrides */
-[data-theme="dark"] .toolbar-actions .btn-icon {
-  background: var(--color-bg-tertiary);
-  border-color: var(--color-border-secondary);
-  color: var(--color-text-secondary);
+.main-layout:has(.chat-panel--closed) #chat-toggle-btn {
+  display: flex;
 }
 
-[data-theme="dark"] .toolbar-actions .btn-icon:hover {
-  background: var(--color-bg-elevated);
-  color: var(--color-text-primary);
+/* Ensure toggle buttons show when panels are collapsed via responsive rules */
+@media (max-width: 900px) {
+  #ai-panel-toggle,
+  #chat-toggle-btn {
+    display: flex;
+  }
 }
 
-.ai-panel-header {
+/* --------------------------------------------------------------------------
+   Right Panel Group (Review + Chat)
+   -------------------------------------------------------------------------- */
+.right-panel-group {
   display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 16px;
-  border-bottom: 1px solid var(--ai-border);
-  background: linear-gradient(to bottom, var(--ai-subtle), transparent);
+  flex-direction: row;
   flex-shrink: 0;
+  height: 100%;
+  overflow: visible;
+  position: relative;
 }
 
-.ai-panel-title {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 0.875rem;
-  font-weight: 600;
-  color: var(--ai-primary);
+/* Make the container wrapper transparent to flex layout so .chat-panel
+   becomes a direct flex child — required for order and flex rules to work. */
+#chat-panel-container {
+  display: contents;
 }
 
-.ai-avatar-small {
-  width: 24px;
-  height: 24px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: var(--color-bg-tertiary);
-  border-radius: var(--radius-sm);
-  color: var(--ai-primary);
+/* When both panels are hidden */
+.right-panel-group.group-collapsed {
+  width: 0;
+  overflow: hidden;
 }
 
-.ai-avatar-small svg {
-  width: 14px;
-  height: 14px;
+/* Horizontal layouts */
+.right-panel-group.layout-h-review-chat { flex-direction: row; }
+.right-panel-group.layout-h-review-chat .ai-panel { order: 1; }
+.right-panel-group.layout-h-review-chat .chat-panel { order: 2; }
+
+.right-panel-group.layout-h-chat-review { flex-direction: row; }
+.right-panel-group.layout-h-chat-review .ai-panel { order: 2; }
+.right-panel-group.layout-h-chat-review .chat-panel { order: 1; }
+
+/* Vertical layouts — group takes the wider of the two panel widths,
+   so collapsing one panel doesn't hide the other. */
+.right-panel-group.layout-v-review-chat,
+.right-panel-group.layout-v-chat-review {
+  flex-direction: column;
+  width: max(var(--ai-panel-width), var(--chat-panel-width));
 }
 
-.ai-panel-close {
-  width: 28px;
-  height: 28px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: transparent;
-  border: none;
-  color: var(--color-text-tertiary);
-  border-radius: var(--radius-sm);
-  cursor: pointer;
-  transition: all var(--transition-fast);
+.right-panel-group.layout-v-review-chat .ai-panel { order: 0; }
+.right-panel-group.layout-v-review-chat .panel-group-divider { order: 1; }
+.right-panel-group.layout-v-review-chat .chat-panel { order: 2; }
+.right-panel-group.layout-v-chat-review .ai-panel { order: 2; }
+.right-panel-group.layout-v-chat-review .panel-group-divider { order: 1; }
+.right-panel-group.layout-v-chat-review .chat-panel { order: 0; }
+
+/* In vertical mode, children fill width and split height */
+.right-panel-group[class*="layout-v-"] .ai-panel,
+.right-panel-group[class*="layout-v-"] .chat-panel {
+  width: 100% !important;
+  flex: 1 1 0;
+  min-height: 0;
 }
 
-.ai-panel-close:hover {
-  background: var(--color-bg-tertiary);
-  color: var(--color-text-primary);
+/* In vertical mode, chat panel has top border instead of left */
+.right-panel-group[class*="layout-v-"] .chat-panel {
+  border-left: none;
+  border-top: 1px solid var(--color-border-primary);
 }
 
-/* ============================================
-   Analysis Context Section (in Review Panel)
-   ============================================ */
+/* Hide per-panel horizontal resize handles in vertical mode (group handle replaces them) */
+.right-panel-group[class*="layout-v-"] .chat-panel__resize-handle {
+  display: none;
+}
 
-.analysis-context {
-  padding: 10px 12px;
-  border-bottom: 1px solid var(--color-border-muted);
-  position: relative;
-  background: var(--color-bg-primary);
-  border-top: 2px solid var(--color-accent-ai);
-  flex-shrink: 0;
-  overflow: visible; /* Allow dropdown to extend beyond bounds */
+.right-panel-group[class*="layout-v-"] .ai-panel > .resize-handle {
+  display: none;
 }
 
-.analysis-context-empty {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  color: var(--color-text-muted);
-  font-size: 12px;
+/* When only one panel is visible in vertical mode, restore its own resize handle */
+.right-panel-group[class*="layout-v-"].chat-only .chat-panel__resize-handle {
+  display: block;
 }
 
-.analysis-context-empty-icon {
-  color: var(--color-text-muted);
-  opacity: 0.6;
+.right-panel-group[class*="layout-v-"].review-only .ai-panel > .resize-handle {
+  display: block;
 }
 
-.analysis-context-selector {
-  display: flex;
-  align-items: center;
-  gap: 4px;
+/* Full-height group resize handle (shown only in vertical layouts) */
+.panel-group-resize-handle {
+  display: none;
 }
 
-.analysis-context-btn {
-  display: flex;
-  align-items: center;
-  gap: 6px;
+.right-panel-group[class*="layout-v-"] .panel-group-resize-handle {
+  display: block;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+}
+
+/* Hide group resize handle when only one panel is visible — per-panel handle takes over */
+.right-panel-group[class*="layout-v-"].chat-only .panel-group-resize-handle,
+.right-panel-group[class*="layout-v-"].review-only .panel-group-resize-handle {
+  display: none;
+}
+
+/* Vertical resize divider between panels (hidden by default in horizontal layouts) */
+.panel-group-divider {
+  display: none;
+  height: 6px;
+  cursor: row-resize;
+  z-index: 10;
+  background: transparent;
+  transition: background-color var(--transition-fast);
+  flex-shrink: 0;
+}
+
+.panel-group-divider:hover,
+.panel-group-divider.dragging {
+  background: var(--color-border-primary);
+}
+
+/* Show vertical divider only in vertical layouts */
+.right-panel-group[class*="layout-v-"] .panel-group-divider {
+  display: block;
+}
+
+/* Layout Popover */
+.layout-popover {
+  position: fixed;
+  z-index: 1100;
+  background: var(--color-bg-primary);
+  border: 1px solid var(--color-border-default);
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.08), 0 8px 24px rgba(0,0,0,0.12);
+  padding: 8px;
+  opacity: 0;
+  transform: translateY(-4px);
+  transition: opacity 0.15s ease, transform 0.15s ease;
+  pointer-events: none;
+}
+
+.layout-popover--visible {
+  opacity: 1;
+  transform: translateY(0);
+  pointer-events: auto;
+}
+
+.layout-popover__grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 6px;
+}
+
+.layout-popover__thumb {
+  position: relative;
+  width: 80px;
+  height: 52px;
+  padding: 0;
+  background: var(--color-bg-subtle);
+  border: 2px solid var(--color-border-default);
+  border-radius: 6px;
+  cursor: pointer;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+.layout-popover__thumb:hover {
+  border-color: var(--color-text-secondary);
+}
+
+.layout-popover__thumb--active {
+  border-color: #3b82f6;
+  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
+}
+
+.layout-popover__badge {
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  width: 14px;
+  height: 14px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 9px;
+  font-weight: 600;
+  color: var(--color-text-tertiary);
+  background: var(--color-bg-primary);
+  border-radius: 3px;
+  line-height: 1;
+  z-index: 1;
+}
+
+.layout-popover__preview {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  border-radius: 4px;
+  overflow: hidden;
+  gap: 1px;
+}
+
+.layout-popover__preview--h {
+  flex-direction: row;
+}
+
+.layout-popover__preview--v {
+  flex-direction: column;
+}
+
+.layout-popover__pane {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.layout-popover__pane--review {
+  background: rgba(245, 158, 11, 0.1);
+  border-left: 2px solid #f59e0b;
+}
+
+.layout-popover__preview--v .layout-popover__pane--review {
+  border-left: none;
+  border-top: 2px solid #f59e0b;
+}
+
+.layout-popover__pane--chat {
+  background: rgba(59, 130, 246, 0.1);
+  border-left: 2px solid #3b82f6;
+}
+
+.layout-popover__preview--v .layout-popover__pane--chat {
+  border-left: none;
+  border-top: 2px solid #3b82f6;
+}
+
+.layout-popover__pane--review svg {
+  color: #f59e0b;
+}
+
+.layout-popover__pane--chat svg {
+  color: #3b82f6;
+}
+
+/* Dark theme adjustments */
+[data-theme="dark"] .layout-popover {
+  background: #0d1117;
+  border-color: #30363d;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.4);
+}
+
+[data-theme="dark"] .layout-popover__thumb {
+  background: #161b22;
+  border-color: #30363d;
+}
+
+[data-theme="dark"] .layout-popover__thumb:hover {
+  border-color: #8b949e;
+}
+
+[data-theme="dark"] .layout-popover__thumb--active {
+  border-color: #58a6ff;
+  box-shadow: 0 0 0 2px rgba(88, 166, 255, 0.4);
+}
+
+[data-theme="dark"] .layout-popover__badge {
+  background: #0d1117;
+  color: #8b949e;
+}
+
+/* Dark theme toolbar button overrides */
+[data-theme="dark"] .toolbar-actions .btn-icon {
+  background: var(--color-bg-tertiary);
+  border-color: var(--color-border-secondary);
+  color: var(--color-text-secondary);
+}
+
+[data-theme="dark"] .toolbar-actions .btn-icon:hover {
+  background: var(--color-bg-elevated);
+  color: var(--color-text-primary);
+}
+
+.ai-panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px;
+  border-bottom: 1px solid var(--ai-border);
+  background: linear-gradient(to bottom, var(--ai-subtle), transparent);
+  flex-shrink: 0;
+}
+
+.ai-panel-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--ai-primary);
+}
+
+.ai-avatar-small {
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--color-bg-tertiary);
+  border-radius: var(--radius-sm);
+  color: var(--ai-primary);
+}
+
+.ai-avatar-small svg {
+  width: 14px;
+  height: 14px;
+}
+
+.ai-panel-close {
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: none;
+  color: var(--color-text-tertiary);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: all var(--transition-fast);
+}
+
+.ai-panel-close:hover {
+  background: var(--color-bg-tertiary);
+  color: var(--color-text-primary);
+}
+
+/* ============================================
+   Analysis Context Section (in Review Panel)
+   ============================================ */
+
+.analysis-context {
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--color-border-muted);
+  position: relative;
+  background: var(--color-bg-primary);
+  border-top: 2px solid var(--color-accent-ai);
+  flex-shrink: 0;
+  overflow: visible; /* Allow dropdown to extend beyond bounds */
+}
+
+.analysis-context-empty {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--color-text-muted);
+  font-size: 12px;
+}
+
+.analysis-context-empty-icon {
+  color: var(--color-text-muted);
+  opacity: 0.6;
+}
+
+.analysis-context-selector {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.analysis-context-btn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
   padding: 5px 10px;
   background: var(--color-bg-primary);
   border: 1px solid var(--color-border-default);
@@ -7573,6 +8075,7 @@ body.resizing * {
   display: flex;
   align-items: stretch;
   position: relative;
+  min-height: 56px; /* Accommodate stacked chat + action buttons */
 }
 
 .finding-item-wrapper .finding-item {
@@ -7598,6 +8101,32 @@ body.resizing * {
   opacity: 1;
 }
 
+/* Chat action button - upper-right corner of finding items */
+.finding-chat-action {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  display: flex;
+  opacity: 0;
+  transition: opacity 150ms ease;
+  z-index: 1;
+}
+
+.finding-item-wrapper:hover .finding-chat-action,
+.finding-item-wrapper:focus-within .finding-chat-action {
+  opacity: 1;
+}
+
+/* Chat quick-action button - blue accent on hover */
+.quick-action-chat {
+  color: var(--color-text-tertiary, #6e7681);
+}
+
+.quick-action-chat:hover {
+  background: var(--color-accent-light, rgba(56, 139, 253, 0.15));
+  color: var(--color-accent-primary, #58a6ff);
+}
+
 .quick-action-btn {
   width: 24px;
   height: 24px;
@@ -8039,7 +8568,9 @@ body.resizing * {
 }
 
 @media (max-width: 900px) {
-  .ai-panel {
+  .right-panel-group,
+  .ai-panel,
+  .chat-panel {
     display: none;
   }
 
@@ -9155,8 +9686,8 @@ body.resizing * {
 }
 
 .btn-icon:hover {
-  color: var(--danger-fg, #cf222e);
-  border-color: var(--danger-fg, #cf222e);
+  color: var(--color-text-primary);
+  border-color: var(--color-border-secondary);
 }
 
 .btn-ghost {
@@ -9518,8 +10049,8 @@ body.resizing * {
 
 [data-theme="dark"] .btn-icon:hover {
   background: var(--color-bg-elevated, #1e2329);
-  color: var(--color-danger, #f85149);
-  border-color: var(--color-danger, #f85149);
+  color: var(--color-text-primary, #e6edf3);
+  border-color: var(--color-border-secondary, #484f58);
 }
 
 [data-theme="dark"] .add-voice-btn {
@@ -10204,3 +10735,1288 @@ body.resizing * {
 [data-theme="dark"] .emoji-picker-popup::-webkit-scrollbar-thumb:hover {
   background-color: var(--color-text-tertiary, #6e7681);
 }
+
+/* ==========================================================================
+   Chat Panel
+   ========================================================================== */
+
+.chat-panel {
+  width: var(--chat-panel-width, 400px);
+  height: 100%;
+  background: var(--color-bg-primary);
+  border-left: 1px solid var(--color-border-primary);
+  display: none;
+  flex-direction: column;
+  flex-shrink: 0;
+  overflow: hidden;
+  position: relative;
+}
+
+/* Chat Panel Resize Handle */
+.chat-panel__resize-handle {
+  position: absolute;
+  top: 0;
+  left: -3px;
+  width: 6px;
+  height: 100%;
+  cursor: col-resize;
+  z-index: 10;
+  transition: background-color var(--transition-fast);
+}
+
+.chat-panel__resize-handle:hover,
+.chat-panel__resize-handle.dragging {
+  background: var(--color-border-primary);
+}
+
+/* Disable width transition during active resize drag */
+.chat-panel--resizing {
+  transition: none;
+}
+
+.chat-panel--open {
+  display: flex;
+}
+
+.chat-panel--closed {
+  display: none;
+}
+
+/* Chat Panel Header */
+.chat-panel__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--chat-border);
+  background: linear-gradient(to bottom, var(--chat-subtle), transparent);
+  flex-shrink: 0;
+}
+/* Session picker wrapper */
+.chat-panel__session-picker {
+  position: relative;
+  flex: 1;
+  min-width: 0;
+}
+
+.chat-panel__session-picker-btn {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--chat-text);
+  background: transparent;
+  border: none;
+  border-radius: 6px;
+  padding: 4px 8px;
+  cursor: pointer;
+  transition: background 0.15s ease;
+  max-width: 100%;
+}
+
+.chat-panel__session-picker-btn:hover {
+  background: var(--color-bg-tertiary, rgba(128, 128, 128, 0.1));
+}
+
+.chat-panel__session-picker-btn svg:first-child {
+  color: var(--chat-primary);
+  flex-shrink: 0;
+}
+
+.chat-panel__title-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.chat-panel__chevron-sep {
+  opacity: 0.4;
+  font-size: 13px;
+}
+
+.chat-panel__chevron {
+  flex-shrink: 0;
+  opacity: 0.5;
+}
+
+/* Session dropdown flyout */
+.chat-panel__session-dropdown {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  right: 0;
+  background: var(--color-bg-primary, #fff);
+  border: 1px solid var(--color-border-primary, #d0d7de);
+  border-radius: 8px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+  max-height: 300px;
+  overflow-y: auto;
+  z-index: 100;
+  padding: 4px;
+}
+
+.chat-panel__session-empty {
+  padding: 16px;
+  text-align: center;
+  color: var(--color-text-tertiary);
+  font-size: 12px;
+}
+
+.chat-panel__session-item {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  width: 100%;
+  padding: 8px 12px;
+  border: none;
+  background: transparent;
+  text-align: left;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: background 0.15s ease;
+  position: relative;
+}
+
+.chat-panel__session-item:hover {
+  background: var(--color-bg-tertiary, rgba(128, 128, 128, 0.08));
+}
+
+.chat-panel__session-item--active {
+  background: var(--color-bg-secondary, #f6f8fa);
+}
+
+.chat-panel__session-item--active::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 4px;
+  bottom: 4px;
+  width: 3px;
+  border-radius: 2px;
+  background: var(--chat-primary, #0969da);
+}
+
+.chat-panel__session-preview {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--color-text-primary, #1f2328);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.chat-panel__session-meta {
+  font-size: 11px;
+  color: var(--color-text-tertiary, #656d76);
+}
+
+/* Dark theme overrides */
+[data-theme="dark"] .chat-panel__session-dropdown {
+  background: var(--color-bg-primary, #0d1117);
+  border-color: var(--color-border-primary, #30363d);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+}
+
+[data-theme="dark"] .chat-panel__session-item--active {
+  background: var(--color-bg-secondary, #161b22);
+}
+
+[data-theme="dark"] .chat-panel__session-preview {
+  color: var(--color-text-primary, #e6edf3);
+}
+
+.chat-panel__actions {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.chat-panel__new-btn,
+.chat-panel__close-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: none;
+  background: transparent;
+  color: var(--color-text-tertiary);
+  border-radius: 6px;
+  cursor: pointer;
+  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
+}
+
+.chat-panel__new-btn {
+  border: 1px solid var(--color-border-primary);
+  background: var(--color-bg-secondary);
+  color: var(--color-text-secondary);
+}
+
+.chat-panel__new-btn:hover {
+  background: var(--color-bg-tertiary);
+  border-color: var(--color-text-tertiary);
+  color: var(--color-text-primary);
+}
+
+.chat-panel__close-btn:hover {
+  background: var(--color-bg-tertiary);
+  color: var(--color-text-primary);
+}
+
+/* Chat Messages Area */
+.chat-panel__messages-wrapper {
+  flex: 1;
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.chat-panel__messages {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.chat-panel__messages::-webkit-scrollbar {
+  width: 6px;
+}
+
+.chat-panel__messages::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.chat-panel__messages::-webkit-scrollbar-thumb {
+  background-color: var(--color-border-primary);
+  border-radius: 3px;
+}
+
+/* New Content Pill */
+.chat-panel__new-content-pill {
+  position: absolute;
+  bottom: 8px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 10;
+  padding: 4px 14px;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1.4;
+  color: var(--color-text-primary);
+  background: var(--color-bg-secondary);
+  border: 1px solid var(--color-border-primary);
+  border-radius: 20px;
+  cursor: pointer;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
+  opacity: 0;
+  animation: chat-pill-fade-in 0.15s ease-out forwards;
+  white-space: nowrap;
+}
+
+.chat-panel__new-content-pill:hover {
+  background: var(--color-bg-tertiary);
+  border-color: var(--color-border-secondary);
+}
+
+@keyframes chat-pill-fade-in {
+  from { opacity: 0; transform: translateX(-50%) translateY(4px); }
+  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
+}
+
+[data-theme="dark"] .chat-panel__new-content-pill {
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+}
+
+/* Empty State */
+.chat-panel__empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: 40px 20px;
+  color: var(--color-text-tertiary);
+  gap: 12px;
+  flex: 1;
+}
+
+.chat-panel__empty svg {
+  opacity: 0.4;
+}
+
+.chat-panel__empty p {
+  font-size: 13px;
+  line-height: 1.5;
+  max-width: 260px;
+}
+
+/* Message Bubbles */
+.chat-panel__message {
+  display: flex;
+  flex-direction: column;
+  max-width: 85%;
+}
+
+.chat-panel__message--user {
+  align-self: flex-end;
+}
+
+.chat-panel__message--assistant {
+  align-self: flex-start;
+}
+
+.chat-panel__message--error {
+  align-self: center;
+  max-width: 100%;
+}
+
+.chat-panel__bubble {
+  padding: 8px 12px;
+  border-radius: 12px;
+  font-size: 13px;
+  line-height: 1.5;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+}
+
+/* User bubble */
+.chat-panel__message--user .chat-panel__bubble {
+  background: var(--color-accent-primary);
+  color: #ffffff;
+  border-bottom-right-radius: 4px;
+  white-space: pre-wrap;
+}
+
+/* Assistant bubble */
+.chat-panel__message--assistant .chat-panel__bubble {
+  position: relative;
+  background: var(--color-bg-secondary);
+  border: 1px solid var(--color-border-primary);
+  color: var(--color-text-primary);
+  border-bottom-left-radius: 4px;
+}
+
+/* Copy button on assistant messages */
+.chat-panel__copy-btn {
+  display: none;
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 24px;
+  height: 24px;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: none;
+  border-radius: 4px;
+  background: var(--color-bg-tertiary);
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  z-index: 1;
+}
+
+.chat-panel__message--assistant:hover .chat-panel__copy-btn {
+  display: flex;
+}
+
+.chat-panel__copy-btn:hover {
+  background: var(--color-border-primary);
+  color: var(--color-text-primary);
+}
+
+.chat-panel__copy-btn--success {
+  display: flex;
+  color: var(--color-success, #2da44e);
+}
+
+/* Markdown content inside assistant bubbles */
+.chat-panel__message--assistant .chat-panel__bubble p {
+  margin: 0 0 8px 0;
+}
+
+.chat-panel__message--assistant .chat-panel__bubble p:last-of-type {
+  margin-bottom: 0;
+}
+
+.chat-panel__message--assistant .chat-panel__bubble code {
+  font-family: 'JetBrains Mono', 'SFMono-Regular', 'Consolas', monospace;
+  font-size: 12px;
+  background: var(--color-bg-tertiary);
+  padding: 1px 4px;
+  border-radius: 3px;
+}
+
+.chat-panel__message--assistant .chat-panel__bubble pre {
+  margin: 8px 0;
+  padding: 8px;
+  background: var(--color-bg-tertiary);
+  border-radius: 6px;
+  overflow-x: auto;
+}
+
+.chat-panel__message--assistant .chat-panel__bubble pre code {
+  background: transparent;
+  padding: 0;
+}
+
+.chat-panel__message--assistant .chat-panel__bubble ul,
+.chat-panel__message--assistant .chat-panel__bubble ol {
+  margin: 4px 0;
+  padding-left: 20px;
+}
+
+/* Chat file links (auto-linked file:line references in assistant messages) */
+.chat-file-link {
+  display: inline;
+  font-family: 'JetBrains Mono', 'SFMono-Regular', 'Consolas', monospace;
+  font-size: 12px;
+  color: var(--color-accent, #0969da);
+  text-decoration: none;
+  background: var(--color-bg-tertiary);
+  padding: 1px 5px;
+  border-radius: 3px;
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s;
+  word-break: break-all;
+  -webkit-box-decoration-break: clone;
+  box-decoration-break: clone;
+}
+
+.chat-file-link:hover {
+  background: var(--color-bg-accent-subtle, rgba(9, 105, 218, 0.1));
+  text-decoration: underline;
+}
+
+.chat-file-link__icon {
+  display: inline;
+  vertical-align: text-bottom;
+  opacity: 0.6;
+}
+
+/* Highlight flash when navigating to a line from a chat file link */
+.chat-file-link--highlight {
+  animation: chat-file-link-flash 2s ease-out;
+}
+
+@keyframes chat-file-link-flash {
+  0% { background-color: rgba(227, 179, 65, 0.25); }
+  100% { background-color: transparent; }
+}
+
+.chat-file-link--loading {
+  opacity: 0.6;
+  pointer-events: none;
+}
+.chat-file-link--loading::after {
+  content: '';
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  margin-left: 4px;
+  border: 1.5px solid currentColor;
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: chat-file-link-spin 0.6s linear infinite;
+}
+@keyframes chat-file-link-spin {
+  to { transform: rotate(360deg); }
+}
+
+/* Gutter arrow for "already here" micro-feedback */
+.chat-gutter-arrow {
+  position: absolute;
+  left: -2px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: #e3b341;
+  font-size: 20px;
+  font-weight: bold;
+  pointer-events: none;
+  transition: opacity 0.3s ease;
+  z-index: 2;
+}
+
+.chat-gutter-arrow--fade {
+  opacity: 0;
+}
+
+[data-theme="dark"] .chat-gutter-arrow {
+  color: #e3b341;
+}
+
+/* Error bubble */
+.chat-panel__error-bubble {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  background: rgba(208, 36, 47, 0.08);
+  border: 1px solid rgba(208, 36, 47, 0.2);
+  color: var(--color-danger);
+  border-radius: 8px;
+  font-size: 12px;
+}
+
+/* Streaming / Typing Indicator */
+.chat-panel__typing-indicator {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 0;
+}
+
+.chat-panel__typing-indicator span {
+  width: 6px;
+  height: 6px;
+  background: var(--color-text-tertiary);
+  border-radius: 50%;
+  animation: chat-typing 1.2s ease-in-out infinite;
+}
+
+.chat-panel__typing-indicator span:nth-child(2) {
+  animation-delay: 0.2s;
+}
+
+.chat-panel__typing-indicator span:nth-child(3) {
+  animation-delay: 0.4s;
+}
+
+@keyframes chat-typing {
+  0%, 60%, 100% { opacity: 0.3; transform: scale(0.8); }
+  30% { opacity: 1; transform: scale(1); }
+}
+
+/* Blinking cursor during streaming */
+.chat-panel__cursor {
+  display: inline-block;
+  width: 2px;
+  height: 14px;
+  background: var(--color-text-primary);
+  margin-left: 2px;
+  vertical-align: text-bottom;
+  animation: chat-cursor-blink 0.8s step-end infinite;
+}
+
+@keyframes chat-cursor-blink {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0; }
+}
+
+/* Thinking indicator (shown below content when agent is processing) */
+.chat-panel__thinking {
+  padding: 4px 0 0;
+}
+
+/* Empty response fallback */
+.chat-panel__empty-response {
+  color: var(--color-text-tertiary);
+  font-size: 12px;
+}
+
+/* Tool use badge */
+.chat-panel__tool-badge {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 8px;
+  margin-bottom: 4px;
+  background: var(--color-bg-tertiary);
+  border: 1px solid var(--color-border-primary);
+  border-radius: 10px;
+  font-size: 11px;
+  color: var(--color-text-tertiary);
+  max-width: 100%;
+}
+
+.chat-panel__tool-badge svg {
+  color: var(--color-text-tertiary);
+}
+
+.chat-panel__tool-args {
+  font-family: var(--font-mono, ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace);
+  color: var(--color-text-quaternary, var(--color-text-tertiary));
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  opacity: 0.8;
+  border-left: 1px solid var(--color-border-primary);
+  padding-left: 5px;
+  min-width: 0;
+  flex: 1;
+}
+
+.chat-panel__tool-spinner {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  border: 1.5px solid var(--color-border-primary);
+  border-top-color: var(--color-accent-primary);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+/* Chat Panel Context Card */
+.chat-panel__context-card {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  margin: 4px 12px;
+  background: var(--color-bg-tertiary);
+  border: 1px solid var(--color-border-primary);
+  border-radius: 8px;
+  font-size: 11px;
+  color: var(--color-text-tertiary);
+  overflow: hidden;
+}
+
+.chat-panel__context-card svg {
+  flex-shrink: 0;
+  color: var(--color-accent-primary);
+}
+
+.chat-panel__context-label {
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  flex-shrink: 0;
+}
+
+.chat-panel__context-title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--color-text-secondary);
+}
+
+.chat-panel__context-file {
+  flex-shrink: 0;
+  font-family: var(--font-mono, 'SFMono-Regular', Consolas, monospace);
+  color: var(--color-text-tertiary);
+  font-size: 10px;
+}
+
+.chat-panel__context-remove {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  margin-left: auto;
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  background: var(--color-bg-secondary);
+  color: var(--color-text-tertiary);
+  font-size: 12px;
+  line-height: 1;
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: background 0.15s ease, color 0.15s ease;
+}
+
+.chat-panel__context-card:hover .chat-panel__context-remove {
+  display: flex;
+}
+
+.chat-panel__context-remove:hover {
+  background: var(--color-danger, #d1242f);
+  color: #ffffff;
+}
+
+.chat-panel__toast {
+  position: absolute;
+  top: 44px;
+  left: 8px;
+  right: 8px;
+  z-index: 10;
+  padding: 6px 12px;
+  border-radius: 6px;
+  background: var(--color-attention-subtle, #fff8c5);
+  color: var(--color-attention-fg, #6f5e00);
+  border: 1px solid var(--color-attention-muted, #d4a72c);
+  font-size: 12px;
+  text-align: center;
+  animation: toast-slide-in 0.2s ease-out;
+}
+
+[data-theme="dark"] .chat-panel__toast {
+  background: var(--color-attention-subtle, #3b2e00);
+  color: var(--color-attention-fg, #e3b341);
+  border-color: var(--color-attention-muted, #7d6600);
+}
+
+.chat-panel__toast--dismissing {
+  animation: toast-fade-out 0.3s ease-out forwards;
+}
+
+@keyframes toast-slide-in {
+  from { opacity: 0; transform: translateY(-8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes toast-fade-out {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+
+.chat-panel__context-title code {
+  padding: 1px 4px;
+  background: var(--color-bg-secondary);
+  border-radius: 3px;
+  font-size: 10px;
+  font-family: var(--font-mono, ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace);
+}
+
+/* Context card tooltip */
+.chat-panel__ctx-tooltip {
+  position: fixed;
+  z-index: 9999;
+  width: 300px;
+  max-height: 300px;
+  overflow-y: auto;
+  background: var(--color-bg-primary, #0d1117);
+  border: 1px solid var(--color-border-primary, rgba(255, 255, 255, 0.1));
+  border-radius: 8px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.2);
+  pointer-events: none;
+}
+
+.chat-panel__ctx-tooltip-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--color-border-secondary, rgba(255, 255, 255, 0.06));
+}
+
+.chat-panel__ctx-tooltip-type {
+  font-size: 0.6875rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--color-text-tertiary, #6e7681);
+}
+
+.chat-panel__ctx-tooltip-title {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--color-text-primary, #e6edf3);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.chat-panel__ctx-tooltip-body {
+  padding: 8px 12px;
+  font-size: 0.8125rem;
+  line-height: 1.6;
+  color: var(--color-text-secondary, #8b949e);
+}
+
+.chat-panel__ctx-tooltip-body p {
+  margin: 0 0 6px;
+}
+
+.chat-panel__ctx-tooltip-body p:last-child {
+  margin-bottom: 0;
+}
+
+.chat-panel__ctx-tooltip-body code {
+  padding: 2px 6px;
+  background: var(--color-bg-tertiary, rgba(255, 255, 255, 0.04));
+  border-radius: 3px;
+  font-size: 0.75rem;
+}
+
+.chat-panel__ctx-tooltip-body pre {
+  margin: 6px 0;
+  padding: 6px 10px;
+  background: var(--color-bg-tertiary, rgba(255, 255, 255, 0.04));
+  border-radius: 6px;
+  overflow-x: auto;
+}
+
+.chat-panel__ctx-tooltip-body pre code {
+  padding: 0;
+  background: none;
+}
+
+.chat-panel__ctx-tooltip-body ul,
+.chat-panel__ctx-tooltip-body ol {
+  margin: 4px 0 6px;
+  padding-left: 20px;
+}
+
+.chat-panel__ctx-tooltip-body li {
+  margin: 2px 0;
+}
+
+/* Chat Action Bar */
+.chat-panel__action-bar {
+  display: flex;
+  gap: 8px;
+  padding: 8px 16px;
+  border-top: 1px solid var(--color-border-primary);
+  background: var(--color-bg-secondary);
+  flex-shrink: 0;
+}
+
+.chat-panel__action-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  border: 1px solid var(--color-border-primary);
+  border-radius: 6px;
+  background: var(--color-bg-primary);
+  color: var(--color-text-secondary);
+  font-size: 12px;
+  font-family: inherit;
+  cursor: pointer;
+  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
+}
+
+.chat-panel__action-btn:hover:not(:disabled) {
+  background: var(--color-bg-tertiary);
+  border-color: var(--color-text-tertiary);
+  color: var(--color-text-primary);
+}
+
+.chat-panel__action-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.chat-panel__action-btn svg {
+  flex-shrink: 0;
+}
+
+.chat-panel__action-btn--adopt {
+  background: var(--color-accent-primary, #2f81f7);
+  border-color: var(--color-accent-primary, #2f81f7);
+  color: #ffffff;
+}
+
+.chat-panel__action-btn--adopt:hover:not(:disabled) {
+  background: var(--color-accent-hover, #388bfd);
+  border-color: var(--color-accent-hover, #388bfd);
+  color: #ffffff;
+}
+
+.chat-panel__action-btn--update {
+  background: var(--color-accent-primary, #2f81f7);
+  border-color: var(--color-accent-primary, #2f81f7);
+  color: #ffffff;
+}
+
+.chat-panel__action-btn--update:hover:not(:disabled) {
+  background: var(--color-accent-hover, #388bfd);
+  border-color: var(--color-accent-hover, #388bfd);
+  color: #ffffff;
+}
+
+.chat-panel__action-btn--create-comment {
+  background: var(--color-accent-primary, #2f81f7);
+  border-color: var(--color-accent-primary, #2f81f7);
+  color: #ffffff;
+}
+
+.chat-panel__action-btn--create-comment:hover:not(:disabled) {
+  background: var(--color-accent-hover, #388bfd);
+  border-color: var(--color-accent-hover, #388bfd);
+  color: #ffffff;
+}
+
+.chat-panel__action-btn--dismiss-suggestion,
+.chat-panel__action-btn--dismiss-comment {
+  background: var(--color-danger, #d1242f);
+  border-color: var(--color-danger, #d1242f);
+  color: #ffffff;
+}
+
+.chat-panel__action-btn--dismiss-suggestion:hover:not(:disabled),
+.chat-panel__action-btn--dismiss-comment:hover:not(:disabled) {
+  background: var(--color-danger-hover, #b91c1c);
+  border-color: var(--color-danger-hover, #b91c1c);
+  color: #ffffff;
+}
+
+.chat-panel__action-bar-dismiss {
+  margin-left: auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  color: var(--color-text-tertiary);
+  cursor: pointer;
+  padding: 4px;
+  border-radius: 4px;
+  line-height: 1;
+  transition: background 0.15s ease, color 0.15s ease;
+}
+
+.chat-panel__action-bar-dismiss:hover {
+  background: var(--color-bg-tertiary);
+  color: var(--color-text-primary);
+}
+
+/* Chat Input Area */
+.chat-panel__input-area {
+  display: flex;
+  flex-direction: column;
+  margin: 0 12px 12px;
+  border: 1px solid var(--color-border-primary);
+  border-radius: 8px;
+  background: var(--color-bg-primary);
+  flex-shrink: 0;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+.chat-panel__input-area:focus-within {
+  border-color: var(--color-accent-primary);
+  box-shadow: 0 0 0 2px var(--color-accent-light);
+}
+
+.chat-panel__input {
+  min-height: 36px;
+  max-height: 120px;
+  padding: 8px 12px 4px;
+  border: none;
+  background: transparent;
+  color: var(--color-text-primary);
+  font-family: inherit;
+  font-size: 13px;
+  line-height: 1.4;
+  resize: none;
+  outline: none;
+  overflow-y: hidden;
+  box-sizing: border-box;
+}
+
+.chat-panel__input::placeholder {
+  color: var(--color-text-tertiary);
+}
+
+.chat-panel__input-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 4px 8px 6px 12px;
+}
+
+.chat-panel__input-hint {
+  font-size: 11px;
+  color: var(--color-text-tertiary);
+  user-select: none;
+}
+
+.chat-panel__input-actions {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.chat-panel__send-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: none;
+  background: var(--color-accent-primary);
+  color: #ffffff;
+  border-radius: 6px;
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: background 0.15s ease, opacity 0.15s ease;
+}
+
+.chat-panel__send-btn:hover:not(:disabled) {
+  background: var(--color-accent-hover);
+}
+
+.chat-panel__send-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.chat-panel__stop-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: none;
+  border-radius: 6px;
+  background: var(--color-danger, #d1242f);
+  color: white;
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: background 0.15s;
+}
+
+.chat-panel__stop-btn:hover {
+  opacity: 0.85;
+}
+
+/* Dark theme adjustments */
+[data-theme="dark"] .chat-panel {
+  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.3);
+}
+
+[data-theme="dark"] .chat-panel__message--user .chat-panel__bubble {
+  background: var(--color-accent-primary);
+}
+
+[data-theme="dark"] .chat-panel__error-bubble {
+  background: rgba(248, 81, 73, 0.1);
+  border-color: rgba(248, 81, 73, 0.2);
+}
+
+/* Responsive: narrower on small screens */
+@media (max-width: 768px) {
+  .chat-panel {
+    width: 100% !important;
+  }
+}
+
+/* ==========================================================================
+   Context Files
+   Pinned non-diff file ranges shown below the diff for review context
+   ========================================================================== */
+
+/* Context badge for sidebar and diff header */
+.context-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 1px 6px;
+  font-size: 10px;
+  font-weight: 600;
+  color: #bf6a02;
+  border: 1px solid #bf6a02;
+  border-radius: 3px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  white-space: nowrap;
+}
+
+[data-theme="dark"] .context-badge {
+  color: #e09b3d;
+  border-color: #e09b3d;
+}
+
+/* Smaller context badge in file navigator */
+.file-item .context-badge {
+  font-size: 9px;
+  padding: 0px 4px;
+  opacity: 0.7;
+}
+
+/* Smaller context badge in diff panel header */
+.context-file-header .context-badge {
+  font-size: 9px;
+  padding: 0px 4px;
+}
+
+.d2h-file-wrapper.context-file {
+  border-left: 3px solid var(--color-accent-primary, #0969da);
+  margin-bottom: 24px;
+  overflow-x: auto;
+  max-width: 100%;
+  background: var(--color-bg-subtle, #f6f8fa);
+}
+
+.context-file-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background: var(--color-bg-secondary);
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--color-border-primary);
+  font-weight: 600;
+  font-size: 14px;
+}
+
+/* Override flex: 1 so the file name doesn't push the badge away */
+.context-file-header .d2h-file-name {
+  flex: none;
+}
+
+/* Push viewed checkbox (and everything after it) to the right */
+.context-file-header .file-viewed-label {
+  margin-left: auto;
+}
+
+.context-file-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 8px;
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--color-accent-primary, #0969da);
+  background: var(--color-accent-lighter, rgba(9, 105, 218, 0.08));
+  border-radius: 12px;
+  font-family: var(--font-mono, 'JetBrains Mono', monospace);
+  white-space: nowrap;
+}
+
+/* Label is now a tooltip on the CONTEXT badge (title attribute) */
+
+.context-file-dismiss {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  cursor: pointer;
+  color: var(--color-text-tertiary);
+  transition: background-color 0.15s, color 0.15s;
+  flex-shrink: 0;
+}
+
+.context-file-dismiss:hover {
+  background: var(--color-bg-tertiary);
+  color: var(--color-danger, #cf222e);
+}
+
+/* Context chunk header (range label + per-chunk dismiss) */
+.context-chunk-header td {
+  padding: 4px 12px;
+  font-size: 11px;
+  color: var(--color-text-secondary);
+  border-top: 1px dashed var(--color-border-secondary, #d0d7de);
+}
+
+.context-range-label {
+  font-family: var(--font-mono, 'JetBrains Mono', monospace);
+}
+
+.context-chunk-dismiss {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  border: none;
+  background: transparent;
+  color: var(--color-text-tertiary);
+  cursor: pointer;
+  font-size: 14px;
+  margin-left: 8px;
+  border-radius: 3px;
+  vertical-align: middle;
+}
+
+.context-chunk-dismiss:hover {
+  background: var(--color-bg-tertiary);
+  color: var(--color-danger, #cf222e);
+}
+
+/* Separator between non-contiguous context chunks */
+.context-chunk-separator-row {
+  height: 8px;
+}
+
+.context-chunk-separator-cell {
+  border-top: 1px dashed var(--color-border-secondary, #d0d7de);
+  background: var(--color-bg-subtle, #f6f8fa);
+}
+
+.file-item.context-file-item .file-name {
+  font-size: 11px;
+  color: var(--color-text-secondary);
+}
+
+/* Highlight flash animation for scroll-to-line targeting */
+.highlight-flash {
+  animation: highlightFlash 1.5s ease-out;
+}
+
+@keyframes highlightFlash {
+  0% {
+    background-color: var(--color-selection, #fff8c5);
+  }
+  100% {
+    background-color: transparent;
+  }
+}
+
+/* Dark theme overrides for context files */
+[data-theme="dark"] .d2h-file-wrapper.context-file {
+  border-left-color: var(--color-accent-primary, #58a6ff);
+  background: var(--color-bg-subtle, #161b22);
+}
+
+[data-theme="dark"] .context-file-badge {
+  color: var(--color-accent-primary, #58a6ff);
+  background: var(--color-accent-lighter, rgba(88, 166, 255, 0.08));
+}
+
+[data-theme="dark"] .context-file-dismiss:hover {
+  color: var(--color-danger, #f85149);
+}
+
+[data-theme="dark"] .context-chunk-dismiss:hover {
+  color: var(--color-danger, #f85149);
+}
+
+[data-theme="dark"] .context-chunk-separator-cell {
+  background: var(--color-bg-subtle, #161b22);
+}
+
+[data-theme="dark"] .chat-file-link {
+  color: var(--color-accent-primary, #58a6ff);
+  background: var(--color-bg-tertiary);
+}
+
+[data-theme="dark"] .chat-file-link:hover {
+  color: var(--color-accent-hover, #1f6feb);
+  background: var(--color-bg-accent-subtle, rgba(88, 166, 255, 0.1));
+}
+
+/* ─── Chat Feature Gating ──────────────────────────────────────────────────── */
+
+/* Chat disabled: hide everything */
+[data-chat="disabled"] #chat-toggle-btn,
+[data-chat="disabled"] #panel-layout-toggle,
+[data-chat="disabled"] #chat-panel-container,
+[data-chat="disabled"] .file-header-chat-btn,
+[data-chat="disabled"] .ai-action-chat,
+[data-chat="disabled"] .btn-collapsed-chat,
+[data-chat="disabled"] .finding-chat-action,
+[data-chat="disabled"] .btn-chat-comment,
+[data-chat="disabled"] .analysis-history-chat-btn,
+[data-chat="disabled"] .chat-line-btn,
+[data-chat="disabled"] .btn-chat-from-comment {
+  display: none !important;
+}
+
+/* Chat enabled but Pi unavailable: hide all except toggle (which is disabled) */
+[data-chat="unavailable"] #panel-layout-toggle,
+[data-chat="unavailable"] #chat-panel-container,
+[data-chat="unavailable"] .file-header-chat-btn,
+[data-chat="unavailable"] .ai-action-chat,
+[data-chat="unavailable"] .btn-collapsed-chat,
+[data-chat="unavailable"] .finding-chat-action,
+[data-chat="unavailable"] .btn-chat-comment,
+[data-chat="unavailable"] .analysis-history-chat-btn,
+[data-chat="unavailable"] .chat-line-btn,
+[data-chat="unavailable"] .btn-chat-from-comment {
+  display: none !important;
+}
+
+[data-chat="unavailable"] #chat-toggle-btn {
+  opacity: 0.4;
+  cursor: not-allowed;
+}