@pennyfarthing/core 11.3.7 → 11.4.0

package/packages/core/src/public/styles/tailwind.css

@@ -0,0 +1,4454 @@
+/* Tailwind CSS for Cyclist React components */
+
+@import "tailwindcss";
+@config "../../../tailwind.config.js";
+/* Config path resolves to packages/core/tailwind.config.js */
+
+/* =============================================================================
+   Docking Workspace Styles
+   ============================================================================= */
+
+/* Screen reader only — visually hidden but accessible */
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.cyclist-app {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  background: var(--bg-primary, #1e1e1e);
+  color: var(--text-primary, #d4d4d4);
+  font-family: var(--font-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
+  font-size: var(--font-size-ui, 1rem);
+}
+
+/* Main element needs to fill the flex container */
+.cyclist-app > main {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+}
+
+.docking-workspace {
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+}
+
+/* Sidebar styling */
+.sidebar {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  background: var(--bg-secondary, #252526);
+  border-color: var(--border-color, #3c3c3c);
+  overflow: hidden;
+  transition: width 0.2s ease;
+  height: 100%;
+  min-height: 0;
+}
+
+.sidebar-left {
+  border-right: 1px solid var(--border-color, #3c3c3c);
+}
+
+.sidebar-right {
+  border-left: 1px solid var(--border-color, #3c3c3c);
+}
+
+.sidebar[data-collapsed="true"] {
+  /* Use min-width for toggle visibility instead of 0 */
+  width: 32px !important;
+  min-width: 32px;
+}
+
+/* Hide content but keep toggle visible when collapsed */
+.sidebar[data-collapsed="true"] .tablist,
+.sidebar[data-collapsed="true"] .panel {
+  display: none;
+}
+
+/* Style collapse toggle when collapsed - make it fill the narrow strip */
+.sidebar[data-collapsed="true"] .collapse-toggle {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  bottom: auto;
+  padding: 8px 4px;
+}
+
+/* Tablist styling */
+.tablist {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 2px;
+  padding: 4px;
+  background: var(--bg-tertiary, #2d2d2d);
+  border-bottom: 1px solid var(--border-color, #3c3c3c);
+}
+
+.tab {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 8px;
+  background: transparent;
+  border: none;
+  color: var(--text-secondary, #8b8b8b);
+  cursor: pointer;
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  transition: all 0.15s ease;
+}
+
+.tab:hover {
+  color: var(--text-primary, #d4d4d4);
+  background: var(--bg-hover, #3c3c3c);
+}
+
+.tab.active {
+  color: var(--accent-color, #007acc);
+  background: var(--bg-active, #37373d);
+}
+
+.tab.dragging {
+  opacity: 0.5;
+}
+
+/* Drag handle */
+.drag-handle {
+  opacity: 0.4;
+  font-size: 0.6rem;
+  cursor: grab;
+}
+
+.drag-handle:hover {
+  opacity: 0.8;
+}
+
+.drag-handle.dragging {
+  cursor: grabbing;
+}
+
+/* Tab drop targets */
+.tab-drop-target {
+  width: 4px;
+  height: 24px;
+  margin: 0 -2px;
+  transition: background 0.15s ease;
+}
+
+.tab-drop-target.tab-insertion-indicator {
+  background: var(--accent-color, #007acc);
+}
+
+/* Panel content */
+.panel {
+  flex: 1;
+  min-height: 0; /* Allow flex child to shrink below content size */
+  overflow: auto;
+  padding: 8px;
+}
+
+/* Message panel needs special flex handling - no padding, full height */
+.panel.panel-message {
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+  overflow: hidden;
+}
+
+.panel[hidden] {
+  display: none;
+}
+
+.panel-content {
+  height: 100%;
+  overflow: auto;
+}
+
+/* Center region */
+.center-region {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  background: var(--bg-primary, #1e1e1e);
+  overflow: hidden;
+  height: 100%;
+  min-height: 0;
+}
+
+.center-region.drop-zone-rejected {
+  background: rgba(255, 0, 0, 0.1);
+}
+
+/* Drop zone active state */
+.drop-zone-active {
+  background: rgba(0, 122, 204, 0.1) !important;
+}
+
+/* Resize handles */
+.resize-handle {
+  width: 4px;
+  background: transparent;
+  cursor: col-resize;
+  transition: background 0.15s ease;
+}
+
+.resize-handle:hover {
+  background: var(--accent-color, #007acc);
+}
+
+/* Collapse toggle buttons */
+.collapse-toggle {
+  position: absolute;
+  bottom: 8px;
+  padding: 4px 8px;
+  background: var(--bg-tertiary, #2d2d2d);
+  border: 1px solid var(--border-color, #3c3c3c);
+  border-radius: 4px;
+  color: var(--text-secondary, #8b8b8b);
+  cursor: pointer;
+  font-size: 0.75rem;
+  transition: all 0.15s ease;
+}
+
+.sidebar-left .collapse-toggle {
+  right: 8px;
+}
+
+.sidebar-right .collapse-toggle {
+  left: 8px;
+}
+
+.collapse-toggle:hover {
+  color: var(--text-primary, #d4d4d4);
+  background: var(--bg-hover, #3c3c3c);
+}
+
+/* Drag ghost */
+.drag-ghost {
+  padding: 4px 8px;
+  background: var(--bg-tertiary, #2d2d2d);
+  border: 1px solid var(--accent-color, #007acc);
+  border-radius: 4px;
+  color: var(--text-primary, #d4d4d4);
+  font-size: 0.75rem;
+  pointer-events: none;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+}
+
+/* Placeholder panels */
+.sprint-placeholder,
+.progress-placeholder,
+.background-placeholder,
+.git-placeholder,
+.settings-placeholder,
+.debug-placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: var(--text-secondary, #8b8b8b);
+  font-size: 0.875rem;
+}
+
+/* =============================================================================
+   PersonaHeader Component Styles
+   ============================================================================= */
+
+.persona-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 12px;
+  background: var(--bg-secondary, #252526);
+  border-bottom: 1px solid var(--border-color, #3c3c3c);
+  flex-shrink: 0;
+  position: relative;
+  overflow: visible;
+  min-width: 0;
+}
+
+.persona-header.empty {
+  display: none;
+}
+
+.persona-header.clickable {
+  cursor: pointer;
+  border-radius: 6px;
+  transition: background 0.15s;
+}
+
+.persona-header.clickable:hover {
+  background: var(--hover-color, rgba(255, 255, 255, 0.05));
+}
+
+.persona-header.clickable:focus-visible {
+  outline: 2px solid var(--accent-color, #007acc);
+  outline-offset: 2px;
+}
+
+/* Portrait group: portrait + tandem positioned together */
+.persona-portrait-group {
+  container-type: inline-size;
+  container-name: portrait-group;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+  flex-shrink: 0;
+  width: 100px;
+}
+
+/* Container query: hide backseat portrait when panel is narrow */
+@container portrait-group (max-width: 180px) {
+  .persona-tandem-portrait {
+    display: none;
+  }
+}
+
+.persona-portrait {
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  overflow: hidden;
+  flex-shrink: 0;
+  min-width: 48px;
+  min-height: 48px;
+  aspect-ratio: 1;
+  background: var(--bg-tertiary, #2d2d2d);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: width 0.2s ease, height 0.2s ease;
+}
+
+.persona-portrait .portrait-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.persona-portrait .portrait-fallback {
+  font-size: 1.5rem;
+}
+
+/* Role badge inline in name row */
+.persona-name-row .persona-role.badge {
+  padding: 1px 6px;
+  color: #fff;
+  font-size: 0.6rem;
+  border-radius: 8px;
+  text-transform: uppercase;
+  font-weight: 600;
+  white-space: nowrap;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+  flex-shrink: 0;
+}
+
+.persona-info {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  flex: 1;
+  min-width: 0;
+  width: 0;
+  overflow: hidden;
+}
+
+.persona-branding {
+  height: 80px;
+  width: auto;
+  flex-shrink: 0;
+  opacity: 0.5;
+  pointer-events: none;
+  transition: height 0.2s ease;
+}
+
+/* Compact mode: collapsed header */
+.persona-header.compact .persona-portrait {
+  width: 40px;
+  height: 40px;
+}
+
+.persona-header.compact .persona-portrait .portrait-fallback {
+  font-size: 1.2rem;
+}
+
+.persona-header.compact .persona-tandem-portrait {
+  display: none;
+}
+
+.persona-header.compact .persona-branding {
+  height: 32px;
+}
+
+/* Tandem portrait: backseat agent below primary (Story 96-1) */
+.persona-tandem-portrait {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  opacity: 0.55;
+  transition: opacity 300ms ease-in-out;
+  position: relative;
+  overflow: hidden;
+}
+
+.persona-tandem-portrait .tandem-portrait-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.persona-tandem-portrait .tandem-portrait-fallback {
+  font-size: 1.2rem;
+}
+
+.tandem-role-badge {
+  position: absolute;
+  bottom: -2px;
+  right: -2px;
+  font-size: 9px;
+  font-weight: 700;
+  line-height: 16px;
+  padding: 0 4px;
+  border-radius: 8px;
+  background: var(--accent-color, #007acc);
+  color: #fff;
+}
+
+.persona-header.compact .persona-catchphrase {
+  display: none;
+}
+
+/* Collapse toggle button */
+.persona-collapse-toggle {
+  position: absolute;
+  bottom: 2px;
+  right: 8px;
+  background: none;
+  border: none;
+  color: var(--text-secondary, #8b8b8b);
+  font-size: 0.6rem;
+  cursor: pointer;
+  padding: 0 4px;
+  opacity: 0;
+  transition: opacity 0.15s;
+}
+
+.persona-header:hover .persona-collapse-toggle {
+  opacity: 1;
+}
+
+.persona-collapse-toggle:hover {
+  color: var(--text-primary, #d4d4d4);
+}
+
+.persona-name-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: nowrap;
+  overflow: hidden;
+}
+
+.persona-character {
+  font-weight: 600;
+  color: var(--text-primary, #d4d4d4);
+  font-size: 0.95rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.persona-theme {
+  color: var(--text-secondary, #8b8b8b);
+  font-size: 0.8rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.persona-catchphrase {
+  color: var(--text-secondary, #8b8b8b);
+  font-size: 0.75rem;
+  font-style: italic;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 100%;
+}
+
+/* =============================================================================
+   ProjectInfoBar Component Styles (Story 110-6)
+   ============================================================================= */
+
+.project-info-bar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 2px 12px;
+  background: var(--bg-primary, #1e1e1e);
+  border-bottom: 1px solid var(--border-color, #3c3c3c);
+  flex-shrink: 0;
+  min-height: 0;
+  font-size: 0.75rem;
+  color: var(--text-secondary, #8b8b8b);
+}
+
+.project-info-bar:empty {
+  display: none;
+}
+
+.project-info-dir {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: var(--font-mono, monospace);
+}
+
+/* Message panel */
+.message-panel {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  flex: 1;
+}
+
+.message-panel-content {
+  flex: 1;
+  overflow: hidden; /* scroll handled by .message-list inside */
+  min-height: 0;
+}
+
+.message-panel-resize-handle {
+  height: 4px;
+  flex-shrink: 0;
+  cursor: row-resize;
+  background: var(--border-color, #3c3c3c);
+  transition: background 0.15s ease;
+}
+
+.message-panel-resize-handle:hover {
+  background: var(--accent-color, #007acc);
+}
+
+.message-panel-editor {
+  flex-shrink: 0;
+  background: var(--bg-secondary, #252526);
+  overflow: visible;
+  display: flex;
+  flex-direction: column;
+  min-height: 120px;
+}
+
+/* Message View - the conversation area */
+.message-view {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  position: relative;
+}
+
+/* Message List - scrollable message container */
+.message-list {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  padding: 1rem 1.5rem;
+}
+
+/* Individual messages — Tufte: no bubbles, no backgrounds */
+.message {
+  display: flex;
+  gap: 0.75rem;
+  padding: 0.25rem 0;
+  line-height: 1.5;
+}
+
+.message-avatar {
+  flex-shrink: 0;
+  width: 2rem;
+  height: 2rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.25rem;
+}
+
+.message-content {
+  flex: 1;
+  min-width: 0;
+  overflow-wrap: break-word;
+}
+
+.message-content p {
+  margin: 0 0 0.5rem 0;
+}
+
+.message-content p:last-child {
+  margin-bottom: 0;
+}
+
+.message-content pre {
+  background: var(--bg-primary, #1e1e1e);
+  padding: 0.75rem;
+  border-radius: 4px;
+  overflow-x: auto;
+  margin: 0.5rem 0;
+}
+
+.message-content code {
+  font-family: var(--font-mono, 'SF Mono', Monaco, monospace);
+  font-size: var(--font-size-code, 0.875em);
+}
+
+.message-content pre code {
+  background: none;
+  padding: 0;
+}
+
+.message-content :not(pre) > code {
+  background: var(--bg-tertiary, #2d2d2d);
+  padding: 0.125rem 0.375rem;
+  border-radius: 3px;
+}
+
+.message-content .table-wrapper {
+  margin: 0.5rem 0;
+  overflow-x: auto;
+  border-radius: 4px;
+  border: 1px solid var(--border-primary, #333);
+}
+
+.message-content table {
+  border-collapse: collapse;
+  width: 100%;
+  font-size: 0.85em;
+}
+
+.message-content thead th {
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+  color: var(--text-secondary, #8b8b8b);
+  padding: 0.4rem 0.75rem;
+  text-align: left;
+  background: var(--bg-primary, #1e1e1e);
+  border-bottom: 1px solid var(--border-primary, #333);
+  white-space: nowrap;
+}
+
+.message-content tbody td {
+  padding: 0.35rem 0.75rem;
+  color: var(--text-primary, #d4d4d4);
+  border-bottom: 1px solid var(--border-primary, #333);
+}
+
+.message-content tbody tr:last-child td {
+  border-bottom: none;
+}
+
+.message-content tbody tr:hover {
+  background: var(--bg-secondary, #252526);
+}
+
+.message-content th.sortable-th {
+  cursor: pointer;
+  user-select: none;
+}
+
+.message-content th.sortable-th:hover {
+  color: var(--text-primary, #d4d4d4);
+}
+
+.message-content .sort-indicator {
+  font-size: 0.65em;
+  opacity: 0.7;
+}
+
+/* User messages — blockquote left border */
+.message-user {
+  border-left: 2px solid var(--text-secondary, #8b8b8b);
+  padding-left: 0.75rem;
+  color: var(--text-primary, #d4d4d4);
+}
+
+.message-user .message-content pre,
+.message-user .message-content :not(pre) > code {
+  background: var(--bg-tertiary, #2d2d2d);
+}
+
+.message-attachment-indicator {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  margin-top: 0.5rem;
+  padding: 0.125rem 0.5rem;
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 4px;
+  font-size: 0.75rem;
+  opacity: 0.8;
+}
+
+/* Agent messages — no background, no constraints */
+.message-agent {
+  color: var(--text-primary, #d4d4d4);
+}
+
+/* Turn-based grouping — Tufte spacing */
+.turn-group {
+  padding-top: 1rem;
+}
+
+.turn-group:first-child {
+  padding-top: 0;
+}
+
+.turn-group + .turn-group {
+  border-top: 1px solid var(--border-color, #3c3c3c);
+}
+
+/* Turn label — speaker + timestamp + optional role badge */
+.turn-label {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  padding: 0.25rem 0;
+  margin-bottom: 0.25rem;
+  padding-left: 2.75rem; /* align with message content: avatar 2rem + gap 0.75rem */
+}
+
+.turn-speaker {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--text-secondary, #8b8b8b);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.turn-timestamp {
+  font-size: 0.6875rem;
+  color: var(--text-muted, #666);
+  margin-left: auto;
+}
+
+/* Role badge in turn label — flush right under timestamp */
+.turn-role-badge {
+  font-size: 0.5625rem;
+  padding: 0px 5px;
+  color: #fff;
+  border-radius: 3px;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  line-height: 1.4;
+}
+
+/* Context cleared divider bar */
+.context-cleared-bar {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.5rem 0;
+}
+
+.context-cleared-line {
+  flex: 1;
+  background-color: var(--text-muted, #666);
+  opacity: 0.4;
+}
+
+.context-cleared-label {
+  font-size: 0.6875rem;
+  font-weight: 600;
+  color: var(--text-muted, #666);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  white-space: nowrap;
+}
+
+.context-cleared-time {
+  font-size: 0.625rem;
+  color: var(--text-muted, #666);
+  opacity: 0.7;
+  white-space: nowrap;
+}
+
+/* User turn: left-aligned like agent turns */
+
+/* Hide avatar on continuation messages (same speaker, not first in turn) */
+.message.continuation .message-avatar {
+  visibility: hidden;
+}
+
+/* Same-turn messages: tight spacing */
+.message.continuation {
+  padding-top: 0;
+}
+
+/* Hook/System message styling (AC3: Story 75-5) */
+.message-hook,
+.message-system {
+  background: none;
+  border-left: 2px dashed var(--border-color, #3c3c3c);
+  padding-left: 0.75rem;
+  color: var(--text-secondary, #8b8b8b);
+  font-size: 0.85rem;
+}
+
+.message-hook .message-avatar,
+.message-system .message-avatar {
+  color: var(--text-secondary, #8b8b8b);
+}
+
+.hook-feedback {
+  background: var(--bg-secondary, #252526);
+  border-left: 3px solid var(--warning-color, #cca700);
+  padding-left: 0.75rem;
+}
+
+.message-tool_use,
+.message-tool_result {
+  background: none;
+  border: none;
+  color: var(--text-secondary, #8b8b8b);
+  font-family: var(--font-mono, 'SF Mono', Monaco, monospace);
+  font-size: var(--font-size-code, 0.85rem);
+}
+
+.tool-name {
+  font-weight: 600;
+  color: var(--accent-color, #007acc);
+  margin-bottom: 0.25rem;
+}
+
+/* =============================================================================
+   Avatar Portraits
+   ============================================================================= */
+
+.avatar-portrait {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+.avatar-emoji {
+  font-size: 1.25rem;
+}
+
+/* Thinking/streaming indicator - portrait throbs */
+@keyframes avatar-throb {
+  0%, 100% {
+    transform: scale(1);
+    box-shadow: 0 0 0 0 var(--accent-color, #007acc);
+  }
+  50% {
+    transform: scale(1.08);
+    box-shadow: 0 0 8px 2px var(--accent-color, #007acc);
+  }
+}
+
+.avatar-thinking {
+  animation: avatar-throb 1.2s ease-in-out infinite;
+}
+
+/* Backseat thinking indicator - subtler throb for tandem portrait */
+@keyframes tandem-throb {
+  0%, 100% {
+    transform: scale(1);
+    box-shadow: 0 0 0 0 var(--accent-color, #007acc);
+  }
+  50% {
+    transform: scale(1.04);
+    box-shadow: 0 0 6px 1px var(--accent-color, #007acc);
+  }
+}
+
+.avatar-tandem-thinking {
+  animation: tandem-throb 1.8s ease-in-out infinite;
+}
+
+/* Observation pulse - one-shot on primary portrait when backseat observation injected */
+@keyframes observation-pulse {
+  0% {
+    box-shadow: 0 0 12px 4px var(--accent-color, #007acc);
+  }
+  100% {
+    box-shadow: 0 0 0 0 var(--accent-color, #007acc);
+  }
+}
+
+.avatar-observation-pulse {
+  animation: observation-pulse 600ms ease-out 1;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .avatar-thinking {
+    animation: none;
+    opacity: 0.85;
+    border: 2px solid var(--accent-color, #007acc);
+  }
+  .avatar-tandem-thinking {
+    animation: none;
+    opacity: 0.85;
+    border: 2px solid var(--accent-color, #007acc);
+  }
+  .avatar-observation-pulse {
+    animation: none;
+    opacity: 0.9;
+    border: 2px solid var(--accent-color, #007acc);
+  }
+}
+
+.message-avatar.avatar-fallback::after {
+  content: '🤖';
+  font-size: 1.25rem;
+}
+
+/* =============================================================================
+   Subagent Span Styles — Tufte: indented left-border, no box
+   ============================================================================= */
+
+.subagent-span {
+  margin: 0.5rem 0;
+  margin-left: 2.75rem; /* align with message content */
+  border: none;
+  border-left: 2px solid var(--accent-color, #007acc);
+  border-radius: 0;
+  background: none;
+  padding-left: 0.5rem;
+}
+
+.subagent-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.25rem 0;
+  cursor: pointer;
+  background: none;
+  border-radius: 0;
+  font-size: 0.8rem;
+  transition: background-color 0.15s ease;
+}
+
+.subagent-header:hover {
+  background-color: var(--bg-secondary, #252526);
+}
+
+.subagent-toggle {
+  color: var(--text-secondary, #8b8b8b);
+  font-size: 0.625rem;
+  width: 0.875rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.subagent-helper-name {
+  font-weight: 600;
+  color: var(--text-primary, #d4d4d4);
+}
+
+.subagent-friendly-message {
+  color: var(--text-secondary, #8b8b8b);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+  min-width: 0;
+}
+
+.subagent-type-badge {
+  font-size: 0.625rem;
+  padding: 0 4px;
+  flex-shrink: 0;
+}
+
+.subagent-count {
+  color: var(--text-muted, #666);
+  font-size: 0.6875rem;
+  font-family: var(--font-mono, monospace);
+  margin-left: auto;
+  flex-shrink: 0;
+}
+
+.subagent-content {
+  padding: 0.25rem 0;
+}
+
+/* Subagent prompt — truncated single line, no avatar */
+.message-subagent-prompt {
+  background: none;
+  border-left: none;
+  color: var(--text-muted, #666);
+  font-size: 0.75rem;
+  padding: 0.125rem 0;
+}
+
+.message-subagent-prompt .message-content {
+  font-style: italic;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Tool calls inside subagent: no extra indent (already indented by parent) */
+.subagent-content .tool-call-block {
+  margin-left: 0;
+}
+
+.subagent-content .message {
+  padding: 0.125rem 0;
+}
+
+/* =============================================================================
+   QuickActions Component Styles
+   ============================================================================= */
+
+.quick-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 12px 16px;
+  margin: 8px 0;
+  background: var(--bg-secondary, #252526);
+  border-radius: 8px;
+  border: 1px solid var(--border-color, #3c3c3c);
+  position: relative;
+  z-index: 10;
+  pointer-events: auto;
+}
+
+.quick-actions-content {
+  color: var(--text-secondary, #8b8b8b);
+  font-size: 0.875rem;
+  margin-bottom: 4px;
+}
+
+.quick-actions-buttons {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.quick-action-btn {
+  padding: 8px 16px;
+  background: var(--accent-color, #007acc);
+  border: 1px solid var(--accent-color, #007acc);
+  border-radius: 6px;
+  color: #fff;
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.quick-action-btn:hover:not(:disabled) {
+  background: var(--accent-hover, #0098ff);
+  border-color: var(--accent-hover, #0098ff);
+  filter: brightness(1.1);
+}
+
+.quick-action-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.quick-actions-input {
+  display: flex;
+  gap: 8px;
+}
+
+.quick-actions-input input {
+  flex: 1;
+  padding: 8px 12px;
+  background: var(--bg-primary, #1e1e1e);
+  border: 1px solid var(--border-color, #3c3c3c);
+  border-radius: 6px;
+  color: var(--text-primary, #d4d4d4);
+  font-size: 0.875rem;
+}
+
+.quick-actions-input input:focus {
+  outline: none;
+  border-color: var(--accent-color, #007acc);
+}
+
+.auto-invoke-status {
+  color: var(--text-secondary, #8b8b8b);
+  font-size: 0.875rem;
+  font-style: italic;
+}
+
+/* Scroll to bottom button */
+.scroll-to-bottom-button {
+  position: absolute;
+  bottom: 1rem;
+  right: 1rem;
+  padding: 0.5rem 0.75rem;
+  background: var(--accent-color, #007acc);
+  border: none;
+  border-radius: 4px;
+  color: #fff;
+  cursor: pointer;
+  font-size: 0.875rem;
+  transition: all 0.2s ease;
+  z-index: 10;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+}
+
+.scroll-to-bottom-button:hover {
+  background: var(--accent-color-hover, #0098ff);
+}
+
+/* Empty state */
+.message-view-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  color: var(--text-secondary, #8b8b8b);
+  font-size: 0.875rem;
+  text-align: center;
+  padding: 2rem;
+}
+
+.message-panel.error {
+  color: var(--error-color, #f14c4c);
+}
+
+.streaming-indicator {
+  padding: 8px 1rem;
+  text-align: left;
+  color: var(--accent-color, #007acc);
+  font-style: italic;
+  font-size: 0.875rem;
+}
+
+
+/* =============================================================================
+   Editor Component Styles
+   ============================================================================= */
+
+/* Editor with controls layout */
+.editor-with-controls {
+  display: flex;
+  gap: 8px;
+  align-items: stretch;
+  height: 100%;
+}
+
+.editor-area {
+  flex: 1;
+  min-width: 0; /* Prevent overflow */
+  display: flex;
+  flex-direction: column;
+}
+
+.editor-container {
+  display: flex;
+  flex-direction: column;
+  padding: 8px;
+  min-width: 0; /* Prevent overflow */
+  flex: 1;
+}
+
+.mode-toolbar {
+  display: flex;
+  gap: 4px;
+  margin-bottom: 8px;
+}
+
+.mode-button {
+  padding: 4px 12px;
+  background: var(--bg-tertiary, #2d2d2d);
+  border: 1px solid var(--border-color, #3c3c3c);
+  border-radius: 4px;
+  color: var(--text-secondary, #8b8b8b);
+  font-size: 0.75rem;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.mode-button:hover {
+  color: var(--text-primary, #d4d4d4);
+  background: var(--bg-hover, #3c3c3c);
+}
+
+.mode-button.active {
+  color: var(--accent-color, #007acc);
+  border-color: var(--accent-color, #007acc);
+  background: var(--bg-active, #37373d);
+}
+
+.editor-wrapper {
+  position: relative;
+  min-width: 0; /* Prevent overflow */
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.editor-textarea {
+  width: 100%;
+  min-height: 60px;
+  flex: 1;
+  padding: 8px;
+  background: var(--bg-primary, #1e1e1e);
+  border: 1px solid var(--border-color, #3c3c3c);
+  border-radius: 4px;
+  color: var(--text-primary, #d4d4d4);
+  font-family: var(--font-mono, 'SF Mono', Monaco, monospace);
+  font-size: 0.875rem;
+  line-height: 1.4;
+  resize: none;
+  box-sizing: border-box;
+}
+
+.editor-textarea:focus {
+  outline: none;
+  border-color: var(--accent-color, #007acc);
+}
+
+.editor-textarea::placeholder {
+  color: var(--text-secondary, #8b8b8b);
+}
+
+/* Completion popup */
+.completion-popup {
+  position: absolute;
+  bottom: 100%;
+  left: 0;
+  right: 0;
+  max-height: 200px;
+  overflow-y: auto;
+  background: var(--bg-secondary, #252526);
+  border: 1px solid var(--border-color, #3c3c3c);
+  border-radius: 4px;
+  margin-bottom: 4px;
+  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.3);
+  z-index: 100;
+}
+
+.completion-item {
+  display: flex;
+  justify-content: space-between;
+  padding: 6px 10px;
+  cursor: pointer;
+  transition: background 0.1s ease;
+}
+
+.completion-item:hover,
+.completion-item.selected {
+  background: var(--bg-hover, #3c3c3c);
+}
+
+.completion-name {
+  color: var(--accent-color, #007acc);
+  font-family: var(--font-mono, 'SF Mono', Monaco, monospace);
+  font-size: 0.8rem;
+}
+
+.completion-desc {
+  color: var(--text-secondary, #8b8b8b);
+  font-size: 0.75rem;
+  margin-left: 12px;
+}
+
+/* Queue indicator */
+.queue-indicator {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 4px 8px;
+  background: var(--bg-tertiary, #2d2d2d);
+  border-radius: 4px;
+  margin-top: 8px;
+  font-size: 0.75rem;
+}
+
+.queue-count {
+  color: var(--text-secondary, #8b8b8b);
+}
+
+.queue-clear {
+  padding: 2px 8px;
+  background: transparent;
+  border: 1px solid var(--border-color, #3c3c3c);
+  border-radius: 3px;
+  color: var(--text-secondary, #8b8b8b);
+  cursor: pointer;
+  font-size: 0.7rem;
+}
+
+.queue-clear:hover {
+  color: var(--text-primary, #d4d4d4);
+  border-color: var(--text-secondary, #8b8b8b);
+}
+
+/* Image preview */
+.image-preview {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+
+.image-preview-item {
+  position: relative;
+  width: 60px;
+  height: 60px;
+  border-radius: 4px;
+  overflow: hidden;
+  border: 1px solid var(--border-color, #3c3c3c);
+}
+
+.image-preview-item img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.image-remove {
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  width: 16px;
+  height: 16px;
+  background: rgba(0, 0, 0, 0.7);
+  border: none;
+  border-radius: 50%;
+  color: white;
+  font-size: 10px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* =============================================================================
+   ControlBar Component Styles
+   ============================================================================= */
+
+.control-bar {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 8px;
+  flex-shrink: 0;
+  align-self: flex-end;
+}
+
+.btn-stop {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 16px;
+  background: var(--error-color, #f14c4c);
+  border: none;
+  border-radius: 4px;
+  color: #fff;
+  font-size: 0.8rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  white-space: nowrap;
+}
+
+.btn-stop:hover:not(:disabled) {
+  background: #ff6b6b;
+}
+
+.btn-stop:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+  background: var(--bg-tertiary, #2d2d2d);
+  color: var(--text-secondary, #8b8b8b);
+}
+
+.btn-stop.stopping {
+  background: var(--warning-color, #cca700);
+}
+
+.btn-stop.throbbing {
+  animation: throb 1.5s ease-in-out infinite;
+}
+
+@keyframes throb {
+  0%, 100% {
+    transform: scale(1);
+    box-shadow: 0 0 0 0 rgba(241, 76, 76, 0.4);
+  }
+  50% {
+    transform: scale(1.02);
+    box-shadow: 0 0 0 6px rgba(241, 76, 76, 0);
+  }
+}
+
+.btn-stop .icon {
+  font-size: 0.9rem;
+}
+
+.btn-stop .spinner {
+  width: 12px;
+  height: 12px;
+  border: 2px solid rgba(255, 255, 255, 0.3);
+  border-top-color: #fff;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+.btn-reset {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 8px 16px;
+  background: var(--bg-tertiary, #2d2d2d);
+  border: 1px solid var(--border-color, #3c3c3c);
+  border-radius: 4px;
+  color: var(--text-secondary, #8b8b8b);
+  font-size: 0.8rem;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  white-space: nowrap;
+}
+
+.btn-reset:hover {
+  color: var(--text-primary, #d4d4d4);
+  background: var(--bg-hover, #3c3c3c);
+  border-color: var(--text-secondary, #8b8b8b);
+}
+
+/* =============================================================================
+   Sidebar Panel Styles
+   ============================================================================= */
+
+/* Sprint panel */
+.sprint-panel {
+  padding: 8px;
+}
+
+.sprint-panel .story-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+
+.sprint-panel .story-id {
+  color: var(--accent-color, #007acc);
+  font-family: var(--font-mono, 'SF Mono', Monaco, monospace);
+  font-size: 0.8rem;
+}
+
+.sprint-panel .story-status {
+  padding: 2px 6px;
+  background: var(--bg-tertiary, #2d2d2d);
+  border-radius: 3px;
+  font-size: 0.7rem;
+  text-transform: uppercase;
+}
+
+.sprint-panel .story-title {
+  font-size: 0.875rem;
+  font-weight: 500;
+  margin: 0 0 8px 0;
+}
+
+.sprint-panel .story-phase,
+.sprint-panel .story-workflow,
+.sprint-panel .story-points,
+.sprint-panel .story-epic {
+  font-size: 0.75rem;
+  color: var(--text-secondary, #8b8b8b);
+  margin-bottom: 4px;
+}
+
+.sprint-panel .hint {
+  font-size: 0.75rem;
+  color: var(--text-secondary, #8b8b8b);
+  margin-top: 8px;
+}
+
+/* Enhanced Sprint Panel (MSSCI-14189) */
+.enhanced-sprint-panel {
+  padding: 12px;
+  font-size: 0.8rem;
+}
+
+.enhanced-sprint-panel section {
+  margin-bottom: 16px;
+}
+
+.enhanced-sprint-panel section:last-child {
+  margin-bottom: 0;
+}
+
+.enhanced-sprint-panel h2 {
+  font-size: 0.7rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--text-secondary, #8b8b8b);
+  margin: 0 0 8px 0;
+  padding-bottom: 4px;
+  border-bottom: 1px solid var(--border-color, #3c3c3c);
+}
+
+/* Current Story Section */
+.enhanced-sprint-panel [data-section="current-story"] .story-id {
+  color: var(--accent-color, #007acc);
+  font-family: var(--font-mono, 'SF Mono', Monaco, monospace);
+  font-size: 0.75rem;
+  margin-right: 8px;
+}
+
+.enhanced-sprint-panel [data-section="current-story"] .story-title {
+  font-weight: 500;
+  display: block;
+  margin: 4px 0;
+}
+
+.enhanced-sprint-panel [data-section="current-story"] .story-status {
+  display: inline-block;
+  padding: 2px 6px;
+  background: var(--accent-color, #007acc);
+  color: #fff;
+  border-radius: 3px;
+  font-size: 0.65rem;
+  text-transform: uppercase;
+  margin-right: 6px;
+}
+
+.enhanced-sprint-panel [data-section="current-story"] .story-points {
+  font-size: 0.7rem;
+  color: var(--text-secondary, #8b8b8b);
+}
+
+.enhanced-sprint-panel .next-up-label {
+  font-size: 0.7rem;
+  color: var(--text-secondary, #8b8b8b);
+  font-style: italic;
+  margin-right: 6px;
+}
+
+/* Epic Group */
+.enhanced-sprint-panel .epic-group {
+  border: 1px solid var(--border-color, #3c3c3c);
+  border-radius: 4px;
+  margin-bottom: 8px;
+  overflow: hidden;
+}
+
+.enhanced-sprint-panel .epic-group:last-child {
+  margin-bottom: 0;
+}
+
+.enhanced-sprint-panel .epic-group.epic-completed {
+  opacity: 0.7;
+}
+
+/* Completed Epics Section */
+.enhanced-sprint-panel [data-section="completed-epics"] .epic-group {
+  opacity: 0.5;
+  border-color: var(--border-color, #3c3c3c);
+}
+
+.enhanced-sprint-panel [data-section="completed-epics"] .epic-group:hover {
+  opacity: 0.7;
+}
+
+/* Epic Header */
+.enhanced-sprint-panel .epic-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px;
+  background: var(--bg-tertiary, #2d2d2d);
+}
+
+.enhanced-sprint-panel .epic-toggle {
+  background: none;
+  border: none;
+  color: var(--text-secondary, #8b8b8b);
+  cursor: pointer;
+  padding: 0;
+  font-size: 0.7rem;
+  width: 16px;
+  flex-shrink: 0;
+}
+
+.enhanced-sprint-panel .epic-toggle:hover {
+  color: var(--text-primary, #d4d4d4);
+}
+
+.enhanced-sprint-panel .epic-toggle:focus-visible {
+  outline: 2px solid var(--accent-color, #007acc);
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+
+.enhanced-sprint-panel .epic-title {
+  font-weight: 500;
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.enhanced-sprint-panel .epic-jira {
+  font-size: 0.65rem;
+  color: var(--text-secondary, #8b8b8b);
+  font-family: var(--font-mono, 'SF Mono', Monaco, monospace);
+}
+
+/* Epic Progress Bar */
+.enhanced-sprint-panel .epic-progress {
+  width: 60px;
+  height: 4px;
+  background: var(--bg-secondary, #252526);
+  border-radius: 2px;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+.enhanced-sprint-panel .epic-progress .progress-bar {
+  height: 100%;
+  background: var(--accent-color, #007acc);
+  border-radius: 2px;
+  transition: width 0.2s ease;
+}
+
+.enhanced-sprint-panel .epic-progress-label {
+  font-size: 0.65rem;
+  color: var(--text-secondary, #8b8b8b);
+  min-width: 50px;
+  text-align: right;
+}
+
+/* Archive Button */
+.enhanced-sprint-panel .archive-button {
+  padding: 2px 8px;
+  background: transparent;
+  border: 1px solid var(--border-color, #3c3c3c);
+  border-radius: 3px;
+  color: var(--text-secondary, #8b8b8b);
+  font-size: 0.65rem;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.enhanced-sprint-panel .archive-button:hover:not(:disabled) {
+  background: var(--bg-hover, #3c3c3c);
+  color: var(--text-primary, #d4d4d4);
+  border-color: var(--text-secondary, #8b8b8b);
+}
+
+.enhanced-sprint-panel .archive-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Story Items */
+.enhanced-sprint-panel .epic-stories {
+  border-top: 1px solid var(--border-color, #3c3c3c);
+}
+
+.enhanced-sprint-panel .story-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 8px 6px 28px;
+  border-bottom: 1px solid var(--border-color, #3c3c3c);
+  transition: background 0.1s ease;
+}
+
+.enhanced-sprint-panel .story-item:last-child {
+  border-bottom: none;
+}
+
+.enhanced-sprint-panel .story-item:hover {
+  background: var(--bg-hover, rgba(255, 255, 255, 0.03));
+}
+
+.enhanced-sprint-panel .story-item .story-info {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+
+.enhanced-sprint-panel .story-item .story-title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 0.75rem;
+}
+
+.enhanced-sprint-panel .story-item .story-meta {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.enhanced-sprint-panel .story-item .story-assignee {
+  font-size: 0.625rem;
+  color: var(--text-tertiary, #6b6b6b);
+  font-style: italic;
+}
+
+.enhanced-sprint-panel .story-item .story-workflow-badge {
+  font-size: 0.5625rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--text-secondary, #8b8b8b);
+  background: var(--bg-tertiary, #2d2d2d);
+  padding: 0 4px;
+  border-radius: 2px;
+}
+
+.enhanced-sprint-panel .story-item .story-completed-date {
+  font-size: 0.625rem;
+  font-variant-numeric: tabular-nums;
+  font-family: var(--font-mono, monospace);
+  color: var(--text-tertiary, #6b6b6b);
+}
+
+.enhanced-sprint-panel .story-item .priority-label {
+  font-size: 0.6rem;
+  font-weight: 500;
+  color: var(--text-tertiary, #6b6b6b);
+  flex-shrink: 0;
+  opacity: 0.7;
+  font-family: var(--font-mono, 'SF Mono', Monaco, monospace);
+}
+
+.enhanced-sprint-panel .story-item .story-points {
+  font-size: 0.65rem;
+  color: var(--text-secondary, #8b8b8b);
+  background: var(--bg-tertiary, #2d2d2d);
+  padding: 1px 5px;
+  border-radius: 3px;
+  flex-shrink: 0;
+}
+
+/* Story Status Colors via data-status attribute */
+.enhanced-sprint-panel .story-item[data-status="backlog"] {
+  border-left: 3px solid var(--text-secondary, #8b8b8b);
+}
+
+.enhanced-sprint-panel .story-item[data-status="in_progress"] {
+  border-left: 3px solid var(--accent-color, #007acc);
+  background: rgba(0, 122, 204, 0.05);
+}
+
+.enhanced-sprint-panel .story-item[data-status="done"] {
+  border-left: 3px solid var(--success-color, #4ec9b0);
+}
+
+.enhanced-sprint-panel .story-item[data-status="cancelled"] {
+  border-left: 3px solid var(--error-color, #f14c4c);
+  opacity: 0.6;
+  text-decoration: line-through;
+}
+
+/* Copy ID Button — show on hover, feedback on click */
+.enhanced-sprint-panel .copy-id-button {
+  opacity: 0;
+  background: none;
+  border: none;
+  color: var(--text-secondary, #8b8b8b);
+  cursor: pointer;
+  padding: 2px;
+  line-height: 1;
+  flex-shrink: 0;
+  transition: opacity 0.15s, color 0.15s;
+}
+
+.enhanced-sprint-panel .story-item:hover .copy-id-button,
+.enhanced-sprint-panel .epic-header:hover .copy-id-button {
+  opacity: 1;
+}
+
+.enhanced-sprint-panel .copy-id-button:hover {
+  color: var(--text-primary, #d4d4d4);
+}
+
+.enhanced-sprint-panel .copy-id-button.copied {
+  opacity: 1;
+  color: var(--success-color, #4ec9b0);
+}
+
+/* Future Initiatives Section */
+.enhanced-sprint-panel .future-epic {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px;
+  border: 1px solid var(--border-color, #3c3c3c);
+  border-radius: 4px;
+  margin-bottom: 6px;
+}
+
+.enhanced-sprint-panel .future-epic:last-child {
+  margin-bottom: 0;
+}
+
+.enhanced-sprint-panel .future-epic-title {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: 500;
+}
+
+.enhanced-sprint-panel .future-epic-points {
+  font-size: 0.65rem;
+  color: var(--text-secondary, #8b8b8b);
+}
+
+/* Future Epic Status Badges */
+.enhanced-sprint-panel .future-epic-status {
+  padding: 2px 6px;
+  border-radius: 3px;
+  font-size: 0.6rem;
+  text-transform: uppercase;
+  font-weight: 500;
+}
+
+.enhanced-sprint-panel .future-epic-status[data-status="ready"],
+.enhanced-sprint-panel .future-epic[data-testid*="ready"] .future-epic-status {
+  background: var(--accent-color, #007acc);
+  color: #fff;
+}
+
+.enhanced-sprint-panel .future-epic-status[data-status="planning"],
+.enhanced-sprint-panel .future-epic[data-testid*="planning"] .future-epic-status {
+  background: var(--bg-tertiary, #2d2d2d);
+  color: var(--text-secondary, #8b8b8b);
+}
+
+.enhanced-sprint-panel .future-epic-status[data-status="blocked"],
+.enhanced-sprint-panel .future-epic[data-testid*="blocked"] .future-epic-status {
+  background: var(--warning-color, #cca700);
+  color: #000;
+}
+
+/* Promote Button */
+.enhanced-sprint-panel .promote-button {
+  padding: 3px 10px;
+  background: var(--accent-color, #007acc);
+  border: none;
+  border-radius: 3px;
+  color: #fff;
+  font-size: 0.65rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.15s ease;
+}
+
+.enhanced-sprint-panel .promote-button:hover:not(:disabled) {
+  background: var(--accent-hover, #0098ff);
+}
+
+.enhanced-sprint-panel .promote-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Empty State */
+.enhanced-sprint-panel .empty-state {
+  padding: 16px;
+  text-align: center;
+  color: var(--text-secondary, #8b8b8b);
+  border: 1px dashed var(--border-color, #3c3c3c);
+  border-radius: 4px;
+}
+
+.enhanced-sprint-panel .empty-state .hint {
+  font-size: 0.7rem;
+  margin-top: 6px;
+  margin-bottom: 0;
+  font-style: italic;
+}
+
+/* Loading and Error States */
+.enhanced-sprint-panel .loading-state {
+  padding: 20px;
+  text-align: center;
+  color: var(--text-secondary, #8b8b8b);
+}
+
+.enhanced-sprint-panel .error-toast {
+  padding: 8px 12px;
+  background: var(--error-color, #f14c4c);
+  color: #fff;
+  border-radius: 4px;
+  font-size: 0.75rem;
+  margin-bottom: 12px;
+}
+
+/* Confirmation Dialog */
+.enhanced-sprint-panel .confirm-dialog {
+  padding: 12px;
+  background: var(--bg-tertiary, #2d2d2d);
+  border: 1px solid var(--border-color, #3c3c3c);
+  border-radius: 4px;
+  margin-bottom: 12px;
+}
+
+.enhanced-sprint-panel .confirm-dialog p {
+  margin: 0 0 8px 0;
+  font-size: 0.8rem;
+}
+
+.enhanced-sprint-panel .confirm-dialog button {
+  padding: 4px 12px;
+  margin-right: 8px;
+  border-radius: 3px;
+  font-size: 0.75rem;
+  cursor: pointer;
+}
+
+.enhanced-sprint-panel .confirm-dialog button[data-testid="confirm-archive-yes"] {
+  background: var(--error-color, #f14c4c);
+  border: none;
+  color: #fff;
+}
+
+.enhanced-sprint-panel .confirm-dialog button[data-testid="confirm-archive-no"] {
+  background: transparent;
+  border: 1px solid var(--border-color, #3c3c3c);
+  color: var(--text-secondary, #8b8b8b);
+}
+
+/* Git panel */
+.git-panel {
+  padding: 8px;
+}
+
+.git-panel .branch-info {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 8px;
+}
+
+.git-panel .branch-icon {
+  color: var(--accent-color, #007acc);
+}
+
+.git-panel .branch-name {
+  font-family: var(--font-mono, 'SF Mono', Monaco, monospace);
+  font-size: 0.8rem;
+}
+
+.git-panel .dirty-indicator {
+  color: var(--warning-color, #cca700);
+}
+
+.git-panel .sync-status {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 8px;
+  font-size: 0.75rem;
+}
+
+.git-panel .ahead {
+  color: var(--success-color, #4ec9b0);
+}
+
+.git-panel .behind {
+  color: var(--warning-color, #cca700);
+}
+
+.git-panel .file-status {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.git-panel .status-item {
+  font-size: 0.75rem;
+}
+
+.git-panel .status-item.staged {
+  color: var(--success-color, #4ec9b0);
+}
+
+.git-panel .status-item.modified {
+  color: var(--warning-color, #cca700);
+}
+
+.git-panel .status-item.untracked {
+  color: var(--text-secondary, #8b8b8b);
+}
+
+/* Git panel - stacked multi-repo view */
+.git-panel.stacked {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.git-panel .repo-status {
+  padding: 8px;
+  background: var(--bg-tertiary, #2d2d2d);
+  border-radius: 4px;
+  border-left: 3px solid var(--accent-color, #007acc);
+}
+
+.git-panel .repo-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 4px;
+}
+
+.git-panel .repo-name {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--text-secondary, #8b8b8b);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.git-panel .repo-status .branch-info {
+  margin-bottom: 4px;
+}
+
+.git-panel .repo-status .sync-status {
+  margin-bottom: 4px;
+}
+
+/* Develop-behind indicator */
+.git-panel .develop-behind {
+  color: var(--status-warning, #cca700);
+}
+
+.git-panel .repo-status .file-status {
+  gap: 6px;
+}
+
+/* File status toggle button */
+.git-panel .file-status-toggle {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  background: none;
+  border: none;
+  padding: 4px 0;
+  cursor: pointer;
+  width: 100%;
+  text-align: left;
+}
+
+.git-panel .file-status-toggle:hover {
+  opacity: 0.8;
+}
+
+.git-panel .toggle-icon {
+  font-size: 0.6rem;
+  color: var(--text-secondary, #8b8b8b);
+  transition: transform 0.15s ease;
+}
+
+.git-panel .toggle-icon.open {
+  transform: rotate(90deg);
+}
+
+/* File list dropdown */
+.git-panel .file-list {
+  list-style: none;
+  margin: 8px 0 0 0;
+  padding: 0;
+  border-top: 1px solid var(--border-color, #404040);
+  padding-top: 8px;
+  max-height: 200px;
+  overflow-y: auto;
+}
+
+.git-panel .file-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 2px 0;
+  font-size: 0.75rem;
+  font-family: var(--font-mono, 'SF Mono', Monaco, monospace);
+}
+
+.git-panel .file-status-icon {
+  width: 14px;
+  text-align: center;
+  font-weight: 600;
+}
+
+.git-panel .file-item.staged .file-status-icon {
+  color: var(--success-color, #4ec9b0);
+}
+
+.git-panel .file-item.modified .file-status-icon {
+  color: var(--warning-color, #cca700);
+}
+
+.git-panel .file-item.untracked .file-status-icon {
+  color: var(--text-secondary, #8b8b8b);
+}
+
+.git-panel .file-path {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--text-primary, #d4d4d4);
+}
+
+/* Progress panel and Todo panel (shared styles) */
+.progress-panel,
+.todo-panel {
+  padding: 8px;
+}
+
+.progress-panel .progress-bar-container,
+.todo-panel .progress-bar-container {
+  position: relative;
+  height: 20px;
+  background: var(--bg-tertiary, #2d2d2d);
+  border-radius: 4px;
+  margin-bottom: 12px;
+  overflow: hidden;
+}
+
+.progress-panel .progress-bar,
+.todo-panel .progress-bar {
+  height: 100%;
+  background: var(--accent-color, #007acc);
+  transition: width 0.3s ease;
+}
+
+.progress-panel .progress-text,
+.todo-panel .progress-text {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 0.7rem;
+  color: var(--text-primary, #d4d4d4);
+}
+
+.progress-panel .todo-section,
+.todo-panel .todo-section {
+  margin-bottom: 12px;
+}
+
+.progress-panel .todo-section h4,
+.todo-panel .todo-section h4 {
+  font-size: 0.75rem;
+  color: var(--text-secondary, #8b8b8b);
+  margin: 0 0 6px 0;
+  text-transform: uppercase;
+}
+
+.progress-panel .todo-item,
+.todo-panel .todo-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 0;
+  font-size: 0.8rem;
+}
+
+.progress-panel .todo-status,
+.todo-panel .todo-status {
+  width: 16px;
+  text-align: center;
+  color: var(--text-secondary, #8b8b8b);
+}
+
+.progress-panel .todo-in_progress .todo-status,
+.todo-panel .todo-in_progress .todo-status {
+  color: var(--accent-color, #007acc);
+}
+
+.progress-panel .todo-completed .todo-status,
+.todo-panel .todo-completed .todo-status {
+  color: var(--success-color, #4ec9b0);
+}
+
+.progress-panel .todo-blocked,
+.todo-panel .todo-blocked {
+  font-size: 0.7rem;
+  color: var(--error-color, #f14c4c);
+}
+
+/* Progress panel internal tabs (Workflow/AC/Todo) */
+.progress-tabs {
+  display: flex;
+  gap: 2px;
+  margin-bottom: 8px;
+  border-bottom: 1px solid var(--border-color, #3d3d3d);
+  padding-bottom: 4px;
+}
+
+.progress-tab {
+  padding: 4px 8px;
+  font-size: 0.75rem;
+  color: var(--text-secondary, #8b8b8b);
+  background: transparent;
+  border: none;
+  border-radius: 4px 4px 0 0;
+  cursor: pointer;
+  transition: color 0.15s, background 0.15s;
+  position: relative;
+}
+
+.progress-tab:hover {
+  color: var(--text-primary, #d4d4d4);
+  background: var(--bg-tertiary, #2d2d2d);
+}
+
+.progress-tab.active {
+  color: var(--text-primary, #d4d4d4);
+  background: var(--bg-tertiary, #2d2d2d);
+  border-bottom: 2px solid var(--accent-color, #007acc);
+  margin-bottom: -5px;
+}
+
+.progress-tab .tab-indicator {
+  font-size: 0.5rem;
+  color: var(--accent-color, #007acc);
+  margin-left: 4px;
+  vertical-align: super;
+}
+
+.progress-tab-content {
+  padding-top: 4px;
+}
+
+/* Workflow content within Progress panel */
+.workflow-content {
+  padding: 4px 0;
+}
+
+.workflow-content .workflow-type-badge {
+  display: inline-block;
+  padding: 2px 8px;
+  font-size: 0.7rem;
+  font-weight: 600;
+  color: var(--text-primary, #d4d4d4);
+  background: var(--bg-tertiary, #2d2d2d);
+  border-radius: 4px;
+  margin-bottom: 8px;
+}
+
+.workflow-content .phase-progress {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px;
+}
+
+.workflow-content .phase-step {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 6px;
+  font-size: 0.7rem;
+  border-radius: 4px;
+}
+
+.workflow-content .phase-step.done {
+  color: var(--success-color, #4ec9b0);
+}
+
+.workflow-content .phase-step.current {
+  color: var(--accent-color, #007acc);
+  background: var(--bg-tertiary, #2d2d2d);
+}
+
+.workflow-content .phase-step.pending {
+  color: var(--text-secondary, #8b8b8b);
+}
+
+.workflow-content .phase-arrow {
+  color: var(--text-secondary, #8b8b8b);
+  font-size: 0.65rem;
+}
+
+.workflow-content .phase-icon {
+  flex-shrink: 0;
+  width: 14px;
+  text-align: center;
+}
+
+.workflow-content .phase-label {
+  white-space: nowrap;
+}
+
+/* Stepped workflow progress (Step N of M) */
+.stepped-progress {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  font-size: 0.75rem;
+}
+
+.stepped-counter {
+  color: var(--accent-color, #007acc);
+  font-weight: 600;
+}
+
+.stepped-current-label {
+  color: var(--text-secondary, #8b8b8b);
+  font-style: italic;
+}
+
+/* Available workflows list (MSSCI-14301) */
+.available-workflows {
+  padding: 4px 0;
+}
+
+.available-workflows-header {
+  padding: 4px 8px;
+  border-bottom: 1px solid var(--border-color, #3c3c3c);
+}
+
+.available-workflows-title {
+  font-size: 0.7rem;
+  font-weight: 600;
+  color: var(--text-secondary, #8b8b8b);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.available-workflows-list {
+  overflow-y: auto;
+}
+
+.workflow-entry {
+  padding: 6px 8px;
+  border-bottom: 1px solid var(--border-color, #3c3c3c);
+}
+
+.workflow-entry:last-child {
+  border-bottom: none;
+}
+
+.workflow-entry-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 6px;
+}
+
+.workflow-entry-name {
+  font-size: 0.8rem;
+  font-weight: 500;
+  color: var(--text-primary, #d4d4d4);
+}
+
+.workflow-entry-type-badge {
+  font-size: 0.6rem;
+  padding: 0 4px;
+  flex-shrink: 0;
+}
+
+.workflow-entry-description {
+  font-size: 0.7rem;
+  color: var(--text-secondary, #8b8b8b);
+  margin-top: 2px;
+  line-height: 1.3;
+}
+
+.workflow-entry-hint {
+  font-size: 0.65rem;
+  color: var(--accent-color, #007acc);
+  font-family: var(--font-mono, monospace);
+  margin-top: 4px;
+  opacity: 0.8;
+}
+
+.workflow-entry-footer {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 4px;
+}
+
+.workflow-start-button {
+  font-size: 0.65rem;
+  height: 22px;
+  padding: 0 8px;
+  color: var(--accent-color, #007acc);
+}
+
+/* Workflow panel container */
+.workflow-panel {
+  height: 100%;
+  overflow-y: auto;
+  padding: 4px 8px;
+}
+
+.workflow-panel .error-message {
+  color: var(--color-danger, #ef4444);
+  font-size: 0.75rem;
+  padding: 8px 0;
+}
+
+/* Todo content wrapper */
+.todo-content {
+  padding: 4px 0;
+}
+
+/* Background panel */
+.background-panel {
+  padding: 8px;
+}
+
+.background-panel .panel-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
+}
+
+.background-panel .task-counts {
+  font-size: 0.75rem;
+  color: var(--text-secondary, #8b8b8b);
+}
+
+.background-panel .pending-count {
+  color: var(--accent-color, #007acc);
+  margin-right: 8px;
+}
+
+.background-panel .clear-button {
+  padding: 2px 8px;
+  background: transparent;
+  border: 1px solid var(--border-color, #3c3c3c);
+  border-radius: 3px;
+  color: var(--text-secondary, #8b8b8b);
+  cursor: pointer;
+  font-size: 0.7rem;
+}
+
+.background-panel .task-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 0;
+  border-bottom: 1px solid var(--border-color, #3c3c3c);
+}
+
+.background-panel .task-status {
+  width: 20px;
+  text-align: center;
+  font-size: 0.8rem;
+}
+
+.background-panel .task-pending .task-status {
+  color: var(--accent-color, #007acc);
+}
+
+.background-panel .task-completed .task-status {
+  color: var(--success-color, #4ec9b0);
+}
+
+.background-panel .task-error .task-status {
+  color: var(--error-color, #f14c4c);
+}
+
+.background-panel .task-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.background-panel .task-description {
+  font-size: 0.8rem;
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.background-panel .task-type {
+  font-size: 0.7rem;
+  color: var(--text-secondary, #8b8b8b);
+}
+
+.background-panel .task-elapsed {
+  font-size: 0.7rem;
+  color: var(--text-secondary, #8b8b8b);
+}
+
+/* Diffs panel */
+.diffs-panel {
+  padding: 8px;
+}
+
+.diffs-panel .panel-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
+}
+
+.diffs-panel .diff-count {
+  font-size: 0.75rem;
+  color: var(--text-secondary, #8b8b8b);
+}
+
+.diffs-panel .diff-tabs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  margin-bottom: 8px;
+}
+
+.diffs-panel .diff-tab {
+  padding: 4px 8px;
+  background: var(--bg-tertiary, #2d2d2d);
+  border: none;
+  border-radius: 3px;
+  color: var(--text-secondary, #8b8b8b);
+  font-size: 0.75rem;
+  cursor: pointer;
+}
+
+.diffs-panel .diff-tab.active {
+  color: var(--accent-color, #007acc);
+  background: var(--bg-active, #37373d);
+}
+
+.diffs-panel .diff-view {
+  background: var(--bg-tertiary, #2d2d2d);
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.diffs-panel .diff-header {
+  display: flex;
+  justify-content: space-between;
+  padding: 6px 8px;
+  background: var(--bg-secondary, #252526);
+  font-size: 0.75rem;
+}
+
+.diffs-panel .diff-path {
+  font-family: var(--font-mono, 'SF Mono', Monaco, monospace);
+}
+
+.diffs-panel .diff-tool {
+  color: var(--text-secondary, #8b8b8b);
+}
+
+.diffs-panel .diff-content {
+  font-family: var(--font-mono, 'SF Mono', Monaco, monospace);
+  font-size: 0.75rem;
+  overflow-x: auto;
+}
+
+.diffs-panel .diff-line {
+  display: flex;
+  padding: 0 8px;
+  line-height: 1.4;
+}
+
+.diffs-panel .diff-line.diff-added {
+  background: rgba(78, 201, 176, 0.1);
+}
+
+.diffs-panel .diff-line.diff-removed {
+  background: rgba(241, 76, 76, 0.1);
+}
+
+.diffs-panel .line-num {
+  min-width: 32px;
+  width: 32px;
+  flex-shrink: 0;
+  color: var(--text-secondary, #8b8b8b);
+  text-align: right;
+  padding-right: 8px;
+  user-select: none;
+}
+
+.diffs-panel .line-prefix {
+  width: 16px;
+  flex-shrink: 0;
+  color: var(--text-secondary, #8b8b8b);
+}
+
+.diffs-panel .line-content {
+  flex: 1;
+  white-space: pre;
+  overflow-x: visible;
+}
+
+.diffs-panel .diff-added .line-prefix {
+  color: var(--success-color, #4ec9b0);
+}
+
+.diffs-panel .diff-removed .line-prefix {
+  color: var(--error-color, #f14c4c);
+}
+
+/* Debug panel */
+.debug-panel {
+  padding: 8px;
+}
+
+.debug-panel h4 {
+  font-size: 0.75rem;
+  color: var(--text-secondary, #8b8b8b);
+  margin: 0 0 8px 0;
+  text-transform: uppercase;
+}
+
+.debug-panel .context-info {
+  background: var(--bg-tertiary, #2d2d2d);
+  border-radius: 4px;
+  padding: 8px 12px;
+  margin-bottom: 16px;
+}
+
+.debug-panel .context-bar {
+  height: 8px;
+  background: var(--bg-primary, #1e1e1e);
+  border-radius: 4px;
+  overflow: hidden;
+  margin-bottom: 4px;
+}
+
+.debug-panel .context-fill {
+  height: 100%;
+  background: var(--accent-color, #007acc);
+}
+
+.context-sparkline {
+  width: 100%;
+  height: 32px;
+  margin: 4px 0;
+}
+
+.context-sparkline svg {
+  width: 100%;
+  height: 100%;
+}
+
+.debug-panel .context-text {
+  font-size: 0.75rem;
+  color: var(--text-primary, #d4d4d4);
+  font-family: var(--font-mono, 'SF Mono', Monaco, monospace);
+}
+
+.debug-panel .token-stats {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 4px 12px;
+  font-family: var(--font-mono, 'SF Mono', Monaco, monospace);
+  font-size: 0.75rem;
+  background: var(--bg-tertiary, #2d2d2d);
+  padding: 8px 12px;
+  border-radius: 4px;
+  margin: 0;
+}
+
+.debug-panel .token-stats dt {
+  color: var(--text-secondary, #8b8b8b);
+}
+
+.debug-panel .token-stats dd {
+  color: var(--text-primary, #d4d4d4);
+  text-align: right;
+  margin: 0;
+}
+
+.debug-panel .context-breakdown {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 4px 12px;
+  font-size: 0.75rem;
+  margin-top: 8px;
+  padding-top: 8px;
+  border-top: 1px solid var(--border-color, #3d3d3d);
+}
+
+.debug-panel .context-breakdown dt {
+  color: var(--text-secondary, #8b8b8b);
+}
+
+.debug-panel .context-breakdown dd {
+  color: var(--text-primary, #d4d4d4);
+  text-align: right;
+  margin: 0;
+}
+
+/* Tier display - MSSCI-12799 */
+.debug-panel .tier-display {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 8px;
+  padding: 6px 8px;
+  background: var(--bg-tertiary, #2d2d2d);
+  border-radius: 4px;
+}
+
+.debug-panel .tier-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-size: 0.7rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.debug-panel .tier-badge.tier-full {
+  background: rgba(59, 130, 246, 0.2);
+  color: #3b82f6;
+  border: 1px solid rgba(59, 130, 246, 0.4);
+}
+
+.debug-panel .tier-badge.tier-refresh {
+  background: rgba(34, 197, 94, 0.2);
+  color: #22c55e;
+  border: 1px solid rgba(34, 197, 94, 0.4);
+}
+
+.debug-panel .tier-badge.tier-handoff {
+  background: rgba(234, 179, 8, 0.2);
+  color: #eab308;
+  border: 1px solid rgba(234, 179, 8, 0.4);
+}
+
+.debug-panel .tier-badge.tier-minimal {
+  background: rgba(168, 85, 247, 0.2);
+  color: #a855f7;
+  border: 1px solid rgba(168, 85, 247, 0.4);
+}
+
+.debug-panel .tier-savings {
+  font-size: 0.7rem;
+  color: var(--text-secondary, #8b8b8b);
+}
+
+/* Token stat cards - MSSCI-12782 */
+.debug-panel .token-stat-card {
+  display: contents;
+}
+
+/* Component breakdown - MSSCI-12800 */
+.debug-panel .component-breakdown {
+  margin: 8px 0;
+  background: var(--bg-tertiary, #2d2d2d);
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.debug-panel .breakdown-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 6px 8px;
+  background: var(--bg-secondary, #252526);
+}
+
+.debug-panel .breakdown-toggle {
+  background: none;
+  border: none;
+  color: var(--text-secondary, #8b8b8b);
+  cursor: pointer;
+  font-size: 0.75rem;
+  padding: 0;
+}
+
+.debug-panel .breakdown-toggle:hover {
+  color: var(--text-primary, #d4d4d4);
+}
+
+.debug-panel .total-tokens {
+  font-size: 0.7rem;
+  color: var(--text-secondary, #8b8b8b);
+  font-family: var(--font-mono, 'SF Mono', Monaco, monospace);
+}
+
+.debug-panel .component-list {
+  padding: 0 8px;
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.2s ease, padding 0.2s ease;
+}
+
+.debug-panel .component-list.expanded {
+  max-height: 200px;
+  padding: 8px;
+  overflow-y: auto;
+}
+
+.debug-panel .component-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 2px 0;
+  font-size: 0.7rem;
+}
+
+.debug-panel .component-name {
+  color: var(--text-secondary, #8b8b8b);
+}
+
+.debug-panel .component-tokens {
+  color: var(--text-primary, #d4d4d4);
+  font-family: var(--font-mono, 'SF Mono', Monaco, monospace);
+}
+
+/* HealthGauge header and controls */
+
+.health-gauge-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.25rem;
+}
+
+.health-gauge-age {
+  font-size: 0.75rem;
+  color: var(--text-muted);
+}
+
+.health-gauge-error {
+  font-size: 0.75rem;
+  color: var(--color-danger, #ef4444);
+}
+
+/* HealthGauge SVG */
+
+[data-testid="health-gauge"] svg {
+  display: block;
+  margin: 0 auto;
+}
+
+/* HealthGauge dimension breakdown */
+
+.health-gauge-partial {
+  text-align: center;
+  font-size: 0.75rem;
+  color: var(--text-muted);
+  margin-top: 0.25rem;
+}
+
+.health-gauge-breakdown {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  margin-top: 0.5rem;
+  padding: 0.5rem 0;
+  border-top: 1px solid var(--border);
+}
+
+.health-gauge-dimension {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  cursor: pointer;
+  padding: 0.25rem 0.5rem;
+  border-radius: 4px;
+}
+
+.health-gauge-dimension:hover {
+  background: var(--border);
+}
+
+.dimension-label {
+  font-size: 0.8125rem;
+  color: var(--text-secondary);
+  text-decoration: underline;
+  text-decoration-color: transparent;
+  transition: text-decoration-color 0.15s, color 0.15s;
+}
+
+.health-gauge-dimension:hover .dimension-label {
+  text-decoration-color: currentColor;
+  color: var(--text-primary);
+}
+
+.dimension-score {
+  font-size: 0.8125rem;
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+  font-family: var(--font-mono, monospace);
+  color: var(--text-primary);
+}
+
+/* Settings panel */
+.settings-panel {
+  padding: 8px;
+}
+
+.settings-panel .settings-section {
+  margin-bottom: 16px;
+}
+
+.settings-panel .settings-section h4 {
+  font-size: 0.75rem;
+  color: var(--text-secondary, #8b8b8b);
+  margin: 0 0 8px 0;
+  text-transform: uppercase;
+}
+
+.settings-panel select {
+  width: 100%;
+  padding: 6px 8px;
+  background: var(--bg-tertiary, #2d2d2d);
+  border: 1px solid var(--border-color, #3c3c3c);
+  border-radius: 4px;
+  color: var(--text-primary, #d4d4d4);
+  font-size: 0.8rem;
+}
+
+.settings-panel .toggle-setting {
+  display: grid;
+  grid-template-columns: 36px 1fr;
+  align-items: center;
+  gap: 4px 8px;
+  padding: 4px 0;
+  font-size: 0.8rem;
+  cursor: pointer;
+}
+
+.settings-panel .setting-description {
+  grid-column: 2;
+  font-size: 0.7rem;
+  color: var(--text-secondary, #8b8b8b);
+}
+
+/* Switch (Radix) - explicit colors since Tailwind v4 data-[state] variants don't generate */
+.cyclist-switch {
+  background: var(--bg-tertiary, #2d2d2d);
+  border-color: var(--border-color, #3c3c3c);
+}
+
+.cyclist-switch[data-state="checked"] {
+  background: var(--accent, #4f46e5);
+  border-color: var(--accent, #4f46e5);
+}
+
+.cyclist-switch-thumb {
+  background: var(--text-primary, #e4e4e7);
+}
+
+/* ThemePalette in settings - ensure solid background for dropdown */
+.settings-panel .theme-palette-menu {
+  background: var(--bg-secondary, #252526);
+}
+
+/* Audit Log panel - Tufte-inspired: maximize data-ink, minimize chrome */
+.audit-log-panel {
+  font-size: 0.8rem;
+}
+
+.audit-log-panel .audit-log-stats {
+  font-size: 0.75rem;
+  color: var(--text-secondary, #8b8b8b);
+}
+
+.audit-log-panel .audit-log-stats .text-success {
+  color: var(--text-secondary, #8b8b8b);
+}
+
+.audit-log-panel .audit-log-stats .text-error {
+  color: var(--error, #ef4444);
+}
+
+/* Only highlight error count when there are actual errors */
+.audit-log-panel .audit-log-stats .text-error:has(strong:empty),
+.audit-log-panel .audit-log-stats .text-error strong:only-child {
+  opacity: 0.6;
+}
+
+.audit-log-panel .audit-log-toolbar {
+  gap: 6px;
+}
+
+.audit-log-panel select {
+  padding: 4px 8px;
+  background: var(--bg-tertiary, #2d2d2d);
+  border: 1px solid var(--border-color, #3c3c3c);
+  border-radius: 4px;
+  color: var(--text-primary, #d4d4d4);
+  font-size: 0.75rem;
+}
+
+.audit-log-panel .audit-log-btn {
+  padding: 4px 10px !important;
+  background: transparent !important;
+  border: none !important;
+  color: var(--text-secondary, #8b8b8b);
+  font-size: 0.7rem;
+  font-weight: normal;
+  letter-spacing: 0.03em;
+  opacity: 0.7;
+}
+
+.audit-log-panel .audit-log-btn:hover {
+  background: var(--bg-tertiary, #2d2d2d) !important;
+  color: var(--text-primary, #d4d4d4);
+  opacity: 1;
+}
+
+.audit-log-panel .audit-log-btn-clear {
+  color: var(--error, #ef4444);
+  border-color: transparent !important;
+  background: transparent;
+  opacity: 0.6;
+}
+
+.audit-log-panel .audit-log-btn-clear:hover {
+  opacity: 1;
+  background: transparent;
+}
+
+.audit-log-panel table {
+  border-collapse: collapse;
+  width: 100%;
+}
+
+.audit-log-panel thead th {
+  font-size: 0.65rem;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--text-muted, #666);
+  border-bottom: 1px solid var(--border-color, #3c3c3c);
+  padding: 6px 8px;
+  background: var(--bg-primary, #1e1e1e);
+}
+
+.audit-log-panel tbody tr {
+  border-bottom: none;
+}
+
+.audit-log-panel tbody td {
+  padding: 3px 8px;
+  color: var(--text-secondary, #8b8b8b);
+  font-size: 0.75rem;
+}
+
+.audit-log-panel tbody tr:hover {
+  background: var(--bg-secondary, #252526);
+}
+
+.audit-log-panel tbody .tool-name {
+  font-weight: 500;
+}
+.audit-log-panel tbody .tool-name[data-tool="read"] { color: var(--tool-read-color, #3b82f6); }
+.audit-log-panel tbody .tool-name[data-tool="write"] { color: var(--tool-write-color, #f97316); }
+.audit-log-panel tbody .tool-name[data-tool="bash"] { color: var(--tool-bash-color, #22c55e); }
+.audit-log-panel tbody .tool-name[data-tool="glob"] { color: var(--tool-glob-color, #a855f7); }
+.audit-log-panel tbody .tool-name[data-tool="grep"] { color: var(--tool-grep-color, #06b6d4); }
+.audit-log-panel tbody .tool-name[data-tool="edit"] { color: var(--tool-edit-color, #eab308); }
+.audit-log-panel tbody .tool-name[data-tool="task"] { color: var(--tool-task-color, #ec4899); }
+.audit-log-panel tbody .tool-name[data-tool="skill"] { color: var(--text-secondary, #8b8b8b); }
+
+.audit-log-panel tbody .status-ok {
+  color: var(--success, #22c55e);
+  opacity: 0.4;
+}
+
+.audit-log-panel tbody .status-err {
+  color: var(--error, #ef4444);
+  opacity: 0.9;
+}
+
+.audit-log-panel .expanded-detail {
+  background: var(--bg-secondary, #252526);
+}
+
+.audit-log-panel .expanded-detail > td {
+  padding: 8px 12px !important;
+}
+
+.audit-log-panel .detail-grid {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 2px 12px;
+  font-size: 0.72rem;
+}
+
+.audit-log-panel .detail-row {
+  display: contents;
+}
+
+.audit-log-panel .detail-label {
+  color: var(--text-muted, #666);
+  font-size: 0.68rem;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  white-space: nowrap;
+  padding: 1px 0;
+}
+
+.audit-log-panel .detail-value {
+  color: var(--text-primary, #d4d4d4);
+  word-break: break-all;
+  padding: 1px 0;
+}
+
+.audit-log-panel .detail-output {
+  margin-top: 6px;
+}
+
+.audit-log-panel .detail-output .detail-label {
+  margin-bottom: 3px;
+}
+
+.audit-log-panel .expanded-detail pre {
+  background: var(--bg-tertiary, #2d2d2d);
+  padding: 6px 8px;
+  border-radius: 4px;
+  font-size: 0.68rem;
+  overflow-x: auto;
+  max-height: 10rem;
+  color: var(--text-secondary, #8b8b8b);
+  margin: 0;
+}
+
+/* Git panel - clickable file items for diff drill-through */
+.git-panel .file-item.clickable {
+  cursor: pointer;
+  border-radius: 2px;
+  padding: 2px 4px;
+}
+
+.git-panel .file-item.clickable:hover {
+  background: var(--bg-hover, rgba(255, 255, 255, 0.05));
+}
+
+.git-panel .diff-back-bar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 8px;
+  border-bottom: 1px solid var(--border-color, #404040);
+  margin-bottom: 8px;
+}
+
+.git-panel .diff-back-bar .back-button {
+  font-size: 0.75rem;
+  padding: 2px 8px;
+}
+
+.git-panel .diff-back-bar .breadcrumb-path {
+  font-family: var(--font-mono, 'SF Mono', Monaco, monospace);
+  font-size: 0.75rem;
+  color: var(--text-secondary, #8b8b8b);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.git-panel.diff-drillthrough {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+  overflow: auto;
+}
+
+/* =============================================================================
+   FileTree Component Styles
+   ============================================================================= */
+
+.filetree {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  font-family: var(--font-mono, 'SF Mono', Monaco, monospace);
+  font-size: 0.8rem;
+  overflow: hidden;
+}
+
+/* File count badge - positioned at top right */
+.file-count-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 20px;
+  height: 18px;
+  padding: 0 6px;
+  margin: 8px 8px 0 auto;
+  background: var(--bg-tertiary, #2d2d2d);
+  border: 1px solid var(--border-color, #3c3c3c);
+  border-radius: 10px;
+  color: var(--text-secondary, #8b8b8b);
+  font-size: 0.7rem;
+  font-weight: 600;
+  flex-shrink: 0;
+}
+
+.file-count-badge:not([title=""]) {
+  background: var(--accent-color, #007acc);
+  border-color: var(--accent-color, #007acc);
+  color: #fff;
+}
+
+/* Empty state */
+.filetree .empty-state {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  color: var(--text-secondary, #8b8b8b);
+  font-size: 0.8rem;
+  font-family: var(--font-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
+  font-style: italic;
+}
+
+/* Full file tree enhancements */
+.full-filetree .filetree-scroll {
+  flex: 1;
+  min-height: 0;
+}
+
+.full-filetree .tree-loading {
+  color: var(--text-secondary, #8b8b8b);
+  font-size: 0.75rem;
+  font-style: italic;
+  padding: 4px 8px;
+}
+
+.full-filetree .tree-error {
+  color: var(--color-danger, #ef4444);
+  font-size: 0.75rem;
+  padding: 4px 8px;
+}
+
+.full-filetree .directory-header.has-changes .directory-name {
+  color: var(--color-warning, #f59e0b);
+}
+
+/* Directory sections */
+.directory-section {
+  border-bottom: 1px solid var(--border-color, #3c3c3c);
+}
+
+.directory-section:last-child {
+  border-bottom: none;
+}
+
+/* Directory header (clickable toggle row) */
+.directory-header {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 6px 8px;
+  background: var(--bg-secondary, #252526);
+  cursor: pointer;
+  user-select: none;
+  transition: background 0.1s ease;
+}
+
+.directory-header:hover {
+  background: var(--bg-tertiary, #2d2d2d);
+}
+
+/* Toggle button */
+.directory-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  padding: 0;
+  background: transparent;
+  border: none;
+  color: var(--text-secondary, #8b8b8b);
+  cursor: pointer;
+  flex-shrink: 0;
+}
+
+.directory-toggle:hover {
+  color: var(--text-primary, #d4d4d4);
+}
+
+.directory-toggle:focus {
+  outline: 1px solid var(--accent-color, #007acc);
+  outline-offset: 1px;
+  border-radius: 2px;
+}
+
+.toggle-icon {
+  font-size: 0.65rem;
+  line-height: 1;
+}
+
+/* Directory name (path) */
+.directory-name {
+  flex: 1;
+  min-width: 0;
+  color: var(--text-primary, #d4d4d4);
+  font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Directory file count */
+.directory-count {
+  padding: 1px 6px;
+  background: var(--bg-primary, #1e1e1e);
+  border-radius: 8px;
+  color: var(--text-secondary, #8b8b8b);
+  font-size: 0.65rem;
+  flex-shrink: 0;
+}
+
+/* Container for file items within a directory */
+.directory-files {
+  background: var(--bg-primary, #1e1e1e);
+}
+
+/* Individual file item */
+.file-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 8px 4px 28px;
+  cursor: pointer;
+  transition: background 0.1s ease;
+  border-left: 2px solid transparent;
+}
+
+.file-item:hover {
+  background: var(--bg-tertiary, #2d2d2d);
+}
+
+.file-item.focused,
+.file-item:focus {
+  background: var(--bg-active, #37373d);
+  border-left-color: var(--accent-color, #007acc);
+  outline: none;
+}
+
+/* File status colors - row background tint */
+.file-item.file-created {
+  border-left-color: transparent;
+}
+
+.file-item.file-created:hover,
+.file-item.file-created.focused,
+.file-item.file-created:focus {
+  border-left-color: var(--color-success, #22c55e);
+}
+
+.file-item.file-modified {
+  border-left-color: transparent;
+}
+
+.file-item.file-modified:hover,
+.file-item.file-modified.focused,
+.file-item.file-modified:focus {
+  border-left-color: var(--color-warning, #f59e0b);
+}
+
+.file-item.file-deleted {
+  border-left-color: transparent;
+}
+
+.file-item.file-deleted:hover,
+.file-item.file-deleted.focused,
+.file-item.file-deleted:focus {
+  border-left-color: var(--color-danger, #ef4444);
+}
+
+/* Status icon (+, ~, -) */
+.status-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  height: 14px;
+  font-size: 0.85rem;
+  font-weight: 700;
+  flex-shrink: 0;
+  line-height: 1;
+}
+
+.status-icon.status-created {
+  color: var(--color-success, #22c55e);
+}
+
+.status-icon.status-modified {
+  color: var(--color-warning, #f59e0b);
+}
+
+.status-icon.status-deleted {
+  color: var(--color-danger, #ef4444);
+}
+
+/* File name */
+.file-name {
+  flex: 1;
+  min-width: 0;
+  color: var(--text-primary, #d4d4d4);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Deleted files have muted/strikethrough style */
+.file-item.file-deleted .file-name {
+  color: var(--text-secondary, #8b8b8b);
+  text-decoration: line-through;
+  text-decoration-color: var(--color-danger, #ef4444);
+}
+
+/* Empty and placeholder states */
+.empty,
+.placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-secondary, #8b8b8b);
+  height: 100%;
+  font-size: 0.875rem;
+}
+
+.loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+
+.spinner {
+  color: var(--text-secondary, #8b8b8b);
+  font-size: 0.875rem;
+}
+
+/* =============================================================================
+   Hide vanilla JS UI when React is active
+   ============================================================================= */
+
+/* When React app is mounted, hide the vanilla JS container */
+#react-root:not(:empty) ~ #container {
+  display: none !important;
+}
+
+/* =============================================================================
+   StatsStrip Component Styles
+   ============================================================================= */
+
+.stats-strip {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.25rem 0.75rem;
+  background: var(--bg-secondary, #252526);
+  border-top: 1px solid var(--border-color, #3c3c3c);
+  font-size: 0.8125rem;
+  flex-shrink: 0;
+}
+
+.stats-left,
+.stats-right {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+/* PWD display */
+.stats-pwd {
+  font-family: var(--font-mono, 'SF Mono', Monaco, monospace);
+  color: var(--text-secondary, #8b8b8b);
+  font-size: 0.75rem;
+  max-width: 200px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.stats-pwd:empty {
+  display: none;
+}
+
+/* Identity elements */
+.stats-jira-email,
+.stats-github-user {
+  font-family: var(--font-mono, 'SF Mono', Monaco, monospace);
+  font-size: 0.75rem;
+  color: var(--text-secondary, #8b8b8b);
+  opacity: 0.8;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 150px;
+}
+
+.stats-github-user {
+  color: var(--text-muted, #6b6b6b);
+}
+
+/* Model badge */
+.stats-model-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.125rem 0.5rem;
+  background: var(--accent-color, #007acc);
+  color: white;
+  border-radius: 10px;
+  font-weight: 600;
+  font-size: 0.7rem;
+  text-transform: lowercase;
+  letter-spacing: 0.03em;
+}
+
+/* Context meter */
+.stats-context-meter {
+  position: relative;
+  width: 80px;
+  height: 18px;
+  background: var(--bg-primary, #1e1e1e);
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.stats-context-meter .context-fill {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  border-radius: 4px;
+  transition: width 0.3s ease, background-color 0.3s ease;
+}
+
+.stats-context-meter .context-percent {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--text-primary, #d4d4d4);
+  text-shadow: 0 0 2px var(--bg-primary, #1e1e1e);
+  z-index: 1;
+}
+
+/* Context level colors */
+.stats-context-meter.level-safe .context-fill {
+  background: var(--color-success, #22c55e);
+}
+
+.stats-context-meter.level-warning .context-fill {
+  background: var(--color-warning, #f59e0b);
+}
+
+.stats-context-meter.level-danger .context-fill {
+  background: var(--color-danger, #ef4444);
+}
+
+/* =============================================================================
+   Queue Display Component Styles (MSSCI-12275)
+   ============================================================================= */
+
+.queue-display {
+  display: flex;
+  flex-direction: column;
+  background: var(--bg-tertiary, #2d2d2d);
+  border-radius: 4px;
+  margin-top: 8px;
+  max-height: 150px;
+  overflow: hidden;
+}
+
+.queue-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 8px;
+  background: var(--bg-secondary, #252526);
+  border-bottom: 1px solid var(--border-color, #3c3c3c);
+}
+
+.queue-display .queue-count {
+  font-size: 0.75rem;
+  color: var(--text-secondary, #8b8b8b);
+}
+
+.queue-mode-badge {
+  font-size: 0.7rem;
+  padding: 1px 4px;
+  border-radius: 3px;
+  background: var(--bg-primary, #1e1e1e);
+}
+
+.queue-mode-badge.bell-mode {
+  background: rgba(245, 158, 11, 0.2);
+  color: var(--color-warning, #f59e0b);
+}
+
+.queue-clear-btn {
+  margin-left: auto;
+  padding: 2px 8px;
+  background: transparent;
+  border: 1px solid var(--border-color, #3c3c3c);
+  border-radius: 3px;
+  color: var(--text-secondary, #8b8b8b);
+  cursor: pointer;
+  font-size: 0.7rem;
+}
+
+.queue-clear-btn:hover {
+  color: var(--text-primary, #d4d4d4);
+  border-color: var(--text-secondary, #8b8b8b);
+}
+
+.queue-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  overflow-y: auto;
+  max-height: 100px;
+}
+
+.queue-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 8px;
+  border-bottom: 1px solid var(--border-color, #3c3c3c);
+  font-size: 0.75rem;
+}
+
+.queue-item:last-child {
+  border-bottom: none;
+}
+
+.queue-item-text {
+  flex: 1;
+  color: var(--text-primary, #d4d4d4);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.queue-image-indicator {
+  color: var(--accent-color, #007acc);
+  font-size: 0.7rem;
+  flex-shrink: 0;
+}
+
+.queue-item-remove {
+  padding: 0 4px;
+  background: transparent;
+  border: none;
+  color: var(--text-secondary, #8b8b8b);
+  cursor: pointer;
+  font-size: 0.9rem;
+  line-height: 1;
+}
+
+.queue-item-remove:hover {
+  color: var(--error-color, #f14c4c);
+}
+
+.queue-item-actions {
+  display: flex;
+  gap: 2px;
+  flex-shrink: 0;
+}
+
+.queue-item-inject {
+  padding: 0 4px;
+  background: transparent;
+  border: none;
+  color: var(--accent-color, #007acc);
+  cursor: pointer;
+  font-size: 0.7rem;
+  line-height: 1;
+}
+
+.queue-item-inject:hover {
+  color: var(--success-color, #4caf50);
+}
+
+/* =============================================================================
+   Bell Injected Message Styles (Audit Fix 2026-02-03)
+   ============================================================================= */
+
+.message-bell-injected {
+  border-left: 2px solid var(--warning-color, #cca700);
+  padding-left: 0.75rem;
+}
+
+.message-bell-injected .bell-indicator {
+  display: inline-block;
+  margin-right: 6px;
+  font-size: 0.9em;
+  opacity: 0.8;
+}
+
+/* =============================================================================
+   Agent Popup Styles (MSSCI-12403)
+   ============================================================================= */
+
+.agent-popup-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 1000;
+}
+
+.agent-popup {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: var(--surface-color, #1e1e1e);
+  border: 1px solid var(--border-color, #3c3c3c);
+  border-radius: 8px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+  z-index: 1001;
+  width: 600px;
+  max-width: 90vw;
+  max-height: 80vh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.agent-popup-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--border-color, #3c3c3c);
+  background: var(--surface-alt, #252526);
+}
+
+.agent-popup-theme {
+  font-size: 1.1rem;
+  font-weight: 600;
+  margin: 0;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.agent-popup-close {
+  background: transparent;
+  border: none;
+  color: var(--text-muted, #888);
+  font-size: 1.5rem;
+  cursor: pointer;
+  padding: 0 4px;
+  line-height: 1;
+}
+
+.agent-popup-close:hover {
+  color: var(--text-color, #fff);
+}
+
+.agent-popup-content {
+  display: grid;
+  grid-template-columns: 200px 1fr;
+  flex: 1;
+  overflow: hidden;
+}
+
+.agent-popup-loading,
+.agent-popup-error {
+  padding: 32px;
+  text-align: center;
+  color: var(--text-muted, #888);
+}
+
+/* Team Roster */
+.agent-popup-roster {
+  border-right: 1px solid var(--border-color, #3c3c3c);
+  overflow-y: auto;
+  padding: 8px 0;
+}
+
+.roster-title {
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  color: var(--text-muted, #888);
+  padding: 4px 12px;
+  margin: 0 0 4px 0;
+}
+
+.roster-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.roster-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.roster-item:hover {
+  background: var(--hover-color, rgba(255, 255, 255, 0.05));
+}
+
+.roster-item.current {
+  background: var(--hover-color, rgba(255, 255, 255, 0.08));
+}
+
+.roster-item.previewing {
+  background: var(--accent-bg, rgba(0, 122, 204, 0.15));
+}
+
+.roster-character {
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 0.9rem;
+}
+
+.roster-role {
+  font-size: 0.65rem;
+  padding: 2px 6px;
+  border-radius: 3px;
+  text-transform: uppercase;
+  font-weight: 500;
+  color: #000;
+}
+
+.roster-current-marker {
+  font-size: 0.6rem;
+  color: var(--accent-color, #007acc);
+}
+
+/* Agent Details - MSSCI-14204: Fixed dimensions to prevent layout shift */
+.agent-popup-details {
+  padding: 16px;
+  overflow-y: auto;
+  min-height: 380px;
+  max-height: calc(80vh - 60px); /* Account for header */
+  transition: opacity 0.15s ease;
+}
+
+.popup-portrait {
+  width: 200px;
+  height: 200px;
+  margin: 0 auto 16px;
+  border-radius: 8px;
+  overflow: hidden;
+  background: var(--surface-alt, #252526);
+}
+
+.popup-portrait img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.popup-portrait .portrait-placeholder {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 3rem;
+}
+
+.popup-character {
+  text-align: center;
+  font-size: 1.2rem;
+  margin: 0 0 8px 0;
+}
+
+.popup-role-mapping {
+  text-align: center;
+  font-size: 0.85rem;
+  color: var(--text-muted, #888);
+  margin-bottom: 16px;
+}
+
+.popup-role-mapping .role-badge {
+  display: inline-block;
+  font-size: 0.65rem;
+  padding: 2px 6px;
+  border-radius: 3px;
+  text-transform: uppercase;
+  font-weight: 500;
+  color: #000;
+  margin-right: 4px;
+}
+
+.popup-detail {
+  margin-bottom: 12px;
+  max-height: 4.5em; /* ~3 lines */
+  overflow: hidden;
+}
+
+.popup-detail label {
+  display: block;
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  color: var(--text-muted, #888);
+  margin-bottom: 2px;
+}
+
+.popup-detail span {
+  font-size: 0.9rem;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.lift-value.positive {
+  color: var(--success-color, #4caf50);
+}
+
+.lift-value.negative {
+  color: var(--error-color, #f44336);
+}
+
+.tier-badge {
+  font-size: 0.7rem;
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-weight: 600;
+}
+
+.tier-badge.tier-s {
+  background: linear-gradient(135deg, #ffd700, #ffb700);
+  color: #000;
+}
+
+.tier-badge.tier-a {
+  background: #4caf50;
+  color: #fff;
+}
+
+.tier-badge.tier-b {
+  background: #2196f3;
+  color: #fff;
+}
+
+.tier-badge.tier-c {
+  background: #757575;
+  color: #fff;
+}
+
+/* =============================================================================
+   Span Timeline Styles
+   ============================================================================= */
+
+.span-timeline {
+  display: flex;
+  flex-direction: column;
+  background: var(--surface-color, #1e1e1e);
+  border: 1px solid var(--border-color, #3c3c3c);
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.span-timeline-loading {
+  padding: 16px;
+  text-align: center;
+  color: var(--text-muted, #888);
+}
+
+.span-timeline-toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 4px 8px;
+  background: var(--surface-alt, #252526);
+  border-bottom: 1px solid var(--border-color, #3c3c3c);
+  font-size: 0.8rem;
+}
+
+.span-timeline-toolbar .span-count {
+  color: var(--text-muted, #888);
+}
+
+.span-timeline-toolbar .zoom-controls {
+  display: flex;
+  gap: 2px;
+}
+
+.span-timeline-toolbar .zoom-controls button {
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  background: var(--surface-color, #1e1e1e);
+  border: 1px solid var(--border-color, #3c3c3c);
+  border-radius: 3px;
+  color: var(--text-color, #fff);
+  cursor: pointer;
+  font-size: 0.9rem;
+}
+
+.span-timeline-toolbar .zoom-controls button:hover {
+  background: var(--hover-color, rgba(255, 255, 255, 0.1));
+}
+
+.span-timeline-container {
+  flex: 1;
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+.span-timeline-track {
+  position: relative;
+  min-height: 160px;
+}
+
+.span-timeline-axis {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 20px;
+  border-bottom: 1px solid var(--border-color, #3c3c3c);
+}
+
+.span-timeline-axis .axis-tick {
+  position: absolute;
+  top: 0;
+  height: 100%;
+  border-left: 1px solid var(--border-color, #3c3c3c);
+}
+
+.span-timeline-axis .tick-label {
+  position: absolute;
+  top: 2px;
+  left: 4px;
+  font-size: 0.65rem;
+  color: var(--text-muted, #888);
+  white-space: nowrap;
+}
+
+.span-timeline-bars {
+  position: absolute;
+  top: 24px;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+.span-bar {
+  position: absolute;
+  height: 24px;
+  border-radius: 3px;
+  cursor: pointer;
+  overflow: hidden;
+  transition: opacity 0.15s, transform 0.15s;
+  opacity: 0.85;
+}
+
+.span-bar:hover {
+  opacity: 1;
+  transform: scaleY(1.1);
+  z-index: 10;
+}
+
+.span-bar.selected {
+  opacity: 1;
+  box-shadow: 0 0 0 2px var(--accent-color, #007acc);
+  z-index: 11;
+}
+
+.span-bar.error {
+  background-image: repeating-linear-gradient(
+    45deg,
+    transparent,
+    transparent 4px,
+    rgba(0, 0, 0, 0.2) 4px,
+    rgba(0, 0, 0, 0.2) 8px
+  );
+}
+
+.span-bar-label {
+  padding: 2px 6px;
+  font-size: 0.65rem;
+  color: #000;
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.span-timeline-details {
+  background: var(--surface-alt, #252526);
+  border-top: 1px solid var(--border-color, #3c3c3c);
+  padding: 8px;
+  font-size: 0.8rem;
+}
+
+.span-timeline-details .detail-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+
+.span-timeline-details .tool-badge {
+  padding: 2px 8px;
+  border-radius: 3px;
+  font-size: 0.7rem;
+  font-weight: 500;
+  color: #000;
+}
+
+.span-timeline-details .duration {
+  color: var(--text-muted, #888);
+}
+
+.span-timeline-details .status.success {
+  color: var(--success-color, #4caf50);
+}
+
+.span-timeline-details .status.error {
+  color: var(--error-color, #f44336);
+}
+
+.span-timeline-details .close-details {
+  margin-left: auto;
+  background: transparent;
+  border: none;
+  color: var(--text-muted, #888);
+  font-size: 1.2rem;
+  cursor: pointer;
+  padding: 0 4px;
+}
+
+.span-timeline-details .close-details:hover {
+  color: var(--text-color, #fff);
+}
+
+.span-timeline-details .detail-body {
+  display: grid;
+  gap: 4px;
+}
+
+.span-timeline-details .detail-row {
+  display: flex;
+  gap: 8px;
+}
+
+.span-timeline-details .detail-row label {
+  color: var(--text-muted, #888);
+  min-width: 60px;
+}
+
+.span-timeline-details .detail-row .mono {
+  font-family: monospace;
+  font-size: 0.75rem;
+}
+
+.span-timeline-details .detail-row.error span {
+  color: var(--error-color, #f44336);
+}
+
+.span-timeline-legend {
+  display: flex;
+  gap: 12px;
+  padding: 4px 8px;
+  background: var(--surface-alt, #252526);
+  border-top: 1px solid var(--border-color, #3c3c3c);
+  font-size: 0.7rem;
+}
+
+.span-timeline-legend .legend-item {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.span-timeline-legend .legend-color {
+  width: 12px;
+  height: 12px;
+  border-radius: 2px;
+}
+
+.span-timeline-legend .legend-label {
+  color: var(--text-muted, #888);
+}
+
+/* =============================================================================
+   Confirm Dialog Styles
+   ============================================================================= */
+
+.confirm-dialog-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.6);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 2000;
+}
+
+.confirm-dialog {
+  background: var(--surface-color, #1e1e1e);
+  border: 1px solid var(--border-color, #3c3c3c);
+  border-radius: 8px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+  width: 400px;
+  max-width: 90vw;
+  padding: 20px;
+}
+
+.confirm-dialog.danger {
+  border-color: var(--error-color, #f44336);
+}
+
+.confirm-dialog-title {
+  font-size: 1.1rem;
+  font-weight: 600;
+  margin: 0 0 12px 0;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.confirm-dialog-title .danger-icon {
+  font-size: 1.2rem;
+}
+
+.confirm-dialog-message {
+  margin: 0 0 20px 0;
+  color: var(--text-muted, #b0b0b0);
+  font-size: 0.95rem;
+  line-height: 1.5;
+}
+
+.confirm-dialog-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+.confirm-dialog-btn {
+  padding: 8px 16px;
+  border-radius: 4px;
+  font-size: 0.9rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.15s, border-color 0.15s;
+}
+
+.confirm-dialog-btn.cancel {
+  background: transparent;
+  border: 1px solid var(--border-color, #3c3c3c);
+  color: var(--text-color, #fff);
+}
+
+.confirm-dialog-btn.cancel:hover {
+  background: var(--hover-color, rgba(255, 255, 255, 0.05));
+}
+
+.confirm-dialog-btn.confirm {
+  background: var(--accent-color, #007acc);
+  border: 1px solid var(--accent-color, #007acc);
+  color: #fff;
+}
+
+.confirm-dialog-btn.confirm:hover {
+  background: var(--accent-hover, #005a9e);
+}
+
+.confirm-dialog-btn.confirm.danger {
+  background: var(--error-color, #f44336);
+  border-color: var(--error-color, #f44336);
+}
+
+.confirm-dialog-btn.confirm.danger:hover {
+  background: #d32f2f;
+  border-color: #d32f2f;
+}
+
+.confirm-dialog-btn:focus-visible {
+  outline: 2px solid var(--accent-color, #007acc);
+  outline-offset: 2px;
+}
+
+/* =============================================================================
+   Bell/Relay Toggle Styles (MSSCI-12275, MSSCI-12395)
+   ============================================================================= */
+
+.control-bar-toggles {
+  display: flex;
+  gap: 4px;
+  margin-bottom: 4px;
+}
+
+/* Agent Quick Picker (MSSCI-14762) */
+.agent-quick-picker-wrapper {
+  position: relative;
+}
+
+.agent-quick-picker-dropdown {
+  position: absolute;
+  bottom: 100%;
+  left: 0;
+  margin-bottom: 4px;
+  min-width: 120px;
+  max-height: 300px;
+  overflow-y: auto;
+  background: var(--bg-secondary, #1e1e1e);
+  border: 1px solid var(--border-color, #3c3c3c);
+  border-radius: 6px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  z-index: 100;
+  padding: 4px;
+}
+
+.agent-quick-picker-option {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 8px;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background 0.1s ease;
+}
+
+.agent-quick-picker-option:hover {
+  background: var(--bg-hover, #3c3c3c);
+}
+
+.agent-quick-picker-option.current {
+  background: var(--bg-tertiary, #2d2d2d);
+  border-left: 2px solid var(--accent, #007acc);
+}
+
+.agent-option-role {
+  font-size: 0.7rem;
+  text-transform: uppercase;
+  color: var(--text-secondary, #8b8b8b);
+  min-width: 64px;
+}
+
+
+.btn-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 28px;
+  padding: 0;
+  background: var(--bg-tertiary, #2d2d2d);
+  border: 1px solid var(--border-color, #3c3c3c);
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.btn-toggle:hover {
+  background: var(--bg-hover, #3c3c3c);
+  border-color: var(--text-secondary, #8b8b8b);
+}
+
+.btn-toggle svg {
+  opacity: 0.5;
+  transition: opacity 0.15s ease;
+}
+
+.btn-toggle:hover svg {
+  opacity: 0.8;
+}
+
+/* Bell mode active */
+.btn-toggle.bell-toggle.active {
+  background: rgba(245, 158, 11, 0.15);
+  border-color: var(--color-warning, #f59e0b);
+}
+
+.btn-toggle.bell-toggle.active svg {
+  opacity: 1;
+}
+
+/* Relay mode active */
+.btn-toggle.relay-toggle.active {
+  background: rgba(139, 92, 246, 0.15);
+  border-color: var(--color-purple, #8b5cf6);
+}
+
+.btn-toggle.relay-toggle.active svg {
+  opacity: 1;
+}
+
+/* Active toggle colors (no animation - too distracting) */
+.btn-toggle.bell-toggle.active {
+  color: var(--color-warning, #f59e0b);
+}
+
+.btn-toggle.relay-toggle.active {
+  color: var(--color-purple, #8b5cf6);
+}
+
+/* TirePump button - visible at 50%+ context */
+.btn-toggle.pump-toggle {
+  background: rgba(6, 182, 212, 0.15);
+  border-color: var(--color-cyan, #06b6d4);
+}
+
+.btn-toggle.pump-toggle svg {
+  opacity: 1;
+}
+
+/* TirePump warning state at 70%+ context */
+.btn-toggle.pump-toggle.warning {
+  background: rgba(239, 68, 68, 0.2);
+  border-color: var(--color-error, #ef4444);
+  animation: pump-pulse 1.5s ease-in-out infinite;
+}
+
+.btn-toggle.pump-toggle.warning svg {
+  opacity: 1;
+}
+
+@keyframes pump-pulse {
+  0%, 100% {
+    opacity: 1;
+    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
+  }
+  50% {
+    opacity: 0.85;
+    box-shadow: 0 0 8px 2px rgba(239, 68, 68, 0.3);
+  }
+}