@pennyfarthing/cyclist 10.4.0 → 11.0.0

package/src/public/styles/tailwind.css

@@ -1,4396 +0,0 @@
-/* Tailwind CSS for Cyclist React components */
-
-@import "tailwindcss";
-@config "../../../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%;
-}
-
-/* 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;
-}
-
-/* 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);
-}
-
-/* Sync all repos action bar */
-.git-panel .git-panel-actions {
-  padding: 0 0 4px;
-}
-
-.git-panel .sync-all-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  width: 100%;
-  padding: 6px 10px;
-  border: 1px solid var(--border-secondary, rgba(255, 255, 255, 0.08));
-  border-radius: 4px;
-  background: var(--bg-tertiary, #2d2d2d);
-  color: var(--text-secondary, #8b8b8b);
-  font-size: 0.75rem;
-  font-family: var(--font-mono, 'SF Mono', Monaco, monospace);
-  cursor: pointer;
-  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
-}
-
-.git-panel .sync-all-btn:hover {
-  background: var(--bg-hover, #3d3d3d);
-  color: var(--text-primary, #e0e0e0);
-  border-color: var(--accent-color, #007acc);
-}
-
-.git-panel .sync-all-btn:active {
-  background: var(--bg-active, #4d4d4d);
-}
-
-.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;
-}
-
-/* Changed panel (FileTree) */
-.changed-panel {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  min-height: 0;
-}
-
-/* =============================================================================
-   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);
-  }
-}