/* CentralChamber Component Styles */
/* Terminal, modals, config panels */

/* ========================================
   Mode Selector Dropdown (Software/Websites/Scribe)
   ======================================== */
.mode-selector {
  padding: 8px;
  background: var(--surface-contrast);
  border-bottom: 1px solid var(--border);
}

.mode-dropdown {
  width: 100%;
  padding: 10px 12px;
  background: var(--glass-strong);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 500;
  font-family: 'Space Grotesk', sans-serif;
  cursor: pointer;
  transition: all 0.15s ease;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238888aa' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

.mode-dropdown:hover {
  border-color: var(--accent);
  background-color: var(--glass);
}

.mode-dropdown:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.2);
}

.mode-dropdown option {
  background: var(--panel);
  color: var(--text);
  padding: 8px;
}

/* Site Card Styles */
.site-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  margin: 0.25rem 0;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.site-card:hover {
  background: var(--glass-strong);
  border-color: var(--accent);
}

.site-card.active {
  background: var(--glass-strong);
  border-color: var(--accent-purple);
  box-shadow: 0 0 0 1px var(--accent-purple);
}

.site-card-icon {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

.site-card-info {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.site-card-name {
  font-weight: 500;
  font-size: 0.85rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.site-card-url {
  font-size: 0.7rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.site-card-status {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.site-card-status.online {
  background: #22c55e;
  box-shadow: 0 0 6px rgba(34, 197, 94, 0.5);
}

.site-card-status.offline {
  background: #f85149;
}

.site-card-status.unknown {
  background: var(--muted);
}

/* Krenwatch Site Card Enhancements */
.site-card.krenwatch-site {
  border-left: 3px solid var(--accent-blue);
}

.site-card.krenwatch-site:hover {
  border-left-color: var(--accent-blue);
}

.site-card-badges {
  display: flex;
  gap: 4px;
  margin-top: 4px;
  flex-wrap: wrap;
}

.site-badge {
  font-size: 0.6rem;
  padding: 1px 5px;
  border-radius: 3px;
  text-transform: uppercase;
  font-weight: 500;
}

.site-badge.status-ready {
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
}

.site-badge.status-provisioning {
  background: rgba(59, 130, 246, 0.2);
  color: #3b82f6;
}

.site-badge.status-error {
  background: rgba(248, 81, 73, 0.2);
  color: #f85149;
}

.site-badge.ssl-active {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

.site-badge.ssl-pending {
  background: rgba(234, 179, 8, 0.2);
  color: #eab308;
}

.site-badge.wordpress {
  background: rgba(33, 117, 155, 0.2);
  color: #21759b;
}

.krenwatch-header {
  background: linear-gradient(90deg, rgba(59, 130, 246, 0.1) 0%, transparent 100%);
  border-radius: 4px;
  padding: 6px 8px !important;
}

.refresh-btn {
  padding: 4px;
  background: transparent;
  border: none;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.15s;
  border-radius: 4px;
}

.refresh-btn:hover {
  opacity: 1;
  background: var(--glass);
}

.krenwatch-connect-hint button {
  background: var(--accent-blue);
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: opacity 0.15s;
}

.krenwatch-connect-hint button:hover {
  opacity: 0.9;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Terminal Output View */
.terminal-container {
  background: #0d1117;
  border-radius: 8px;
  margin: 1rem 0;
  overflow: hidden;
  flex-shrink: 0;
}

.terminal-header {
  background: #161b22;
  padding: 0.5rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #30363d;
}

.terminal-header-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.terminal-dots {
  display: flex;
  gap: 0.4rem;
}

.terminal-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.terminal-dot.red { background: #ff5f56; }
.terminal-dot.yellow { background: #ffbd2e; }
.terminal-dot.green { background: #27c93f; }

.terminal-title {
  font-size: 0.75rem;
  color: #8b949e;
  margin-left: 0.5rem;
}

.terminal-agent-badge {
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 500;
}

.terminal-agent-badge.codex {
  background: rgba(16, 163, 127, 0.2);
  color: #10a37f;
}

.terminal-agent-badge.claude {
  background: rgba(124, 58, 237, 0.2);
  color: #a78bfa;
}

.terminal-header-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.terminal-toggle-btn {
  padding: 0.15rem 0.5rem;
  border: 1px solid rgba(139, 148, 158, 0.3);
  border-radius: 4px;
  background: rgba(139, 148, 158, 0.1);
  color: #8b949e;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  line-height: 1;
}

.terminal-toggle-btn:hover {
  background: rgba(139, 148, 158, 0.2);
  border-color: rgba(139, 148, 158, 0.5);
  color: #c9d1d9;
}

.terminal-agent-badge.aider {
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
}

.terminal-output {
  font-family: 'SF Mono', 'Fira Code', 'Monaco', monospace;
  font-size: 0.8rem;
  line-height: 1.8;
  padding: 1.25rem;
  max-height: 500px;
  overflow-y: auto;
  color: #d4d8dd;
  white-space: pre-wrap;
  word-break: break-word;
  letter-spacing: 0.01em;
}

.terminal-output::-webkit-scrollbar {
  width: 8px;
}

.terminal-output::-webkit-scrollbar-track {
  background: #0d1117;
}

.terminal-output::-webkit-scrollbar-thumb {
  background: #30363d;
  border-radius: 4px;
}

.terminal-line {
  display: block;
  margin: 0;
  padding: 0.15rem 0;
}

.terminal-line.error {
  color: #f85149;
}

.terminal-line.success {
  color: #3fb950;
}

.terminal-line.info {
  color: #58a6ff;
}

.terminal-line.terminal-injection {
  color: #f0883e;
  background: rgba(240, 136, 62, 0.1);
  padding: 0.25rem 0.5rem;
  margin: 0.25rem 0;
  border-radius: 4px;
  border-left: 3px solid #f0883e;
}

.terminal-line.terminal-injection .injection-icon {
  margin-right: 0.5rem;
}

.terminal-cursor {
  display: inline-block;
  width: 8px;
  height: 1em;
  background: #58a6ff;
  animation: blink 1s step-end infinite;
  vertical-align: text-bottom;
}

@keyframes blink {
  50% { opacity: 0; }
}

/* Message injection bar for running orchestrations */
.inject-message-bar {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: #21262d;
  border-top: 1px solid #30363d;
  border-radius: 0 0 6px 6px;
  position: sticky;
  bottom: 0;
  z-index: 10;
  margin-top: 0.5rem;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.3);
}

.inject-input-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.inject-message-bar input[type="text"] {
  flex: 1;
  padding: 0.5rem;
  background: #0d1117;
  border: 1px solid #30363d;
  border-radius: 6px;
  color: #c9d1d9;
  font-family: inherit;
  font-size: 0.85rem;
}

.inject-message-bar input[type="text"]:focus {
  outline: none;
  border-color: #58a6ff;
}

.inject-message-bar button {
  padding: 0.5rem 0.75rem;
  background: var(--accent);
  border: none;
  border-radius: 6px;
  color: white;
  cursor: pointer;
  font-size: 0.8rem;
  white-space: nowrap;
}

.inject-message-bar button:hover {
  opacity: 0.9;
}

.inject-message-bar button.switch-agent {
  background: #f0883e;
}

.inject-attach-btn {
  background: #30363d !important;
  padding: 0.5rem !important;
  font-size: 1rem !important;
}

.inject-attach-btn:hover {
  background: #484f58 !important;
}

/* Injection attachments preview */
.inject-attachments-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-bottom: 0.25rem;
}

.inject-attachment {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid #30363d;
  background: #0d1117;
}

.inject-attachment img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.inject-attachment.uploading {
  display: flex;
  align-items: center;
  justify-content: center;
}

.inject-attachment-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 16px;
  height: 16px;
  padding: 0 !important;
  background: rgba(248, 81, 73, 0.9) !important;
  border-radius: 50% !important;
  font-size: 10px !important;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.inject-attachment-remove:hover {
  background: #f85149 !important;
}

.inject-message-bar .checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  color: #8b949e;
}

/* Settings button and modal */
.settings-btn {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 8px;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  margin-left: 12px;
}
.settings-btn:hover {
  background: var(--surface);
  color: var(--text);
  border-color: var(--accent);
}
.settings-modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 1000;
  align-items: center;
  justify-content: center;
}
.settings-modal-overlay.open {
  display: flex;
}
.settings-modal {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  width: 90%;
  max-width: 600px;
  max-height: 80vh;
  overflow: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.settings-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.settings-header h2 {
  margin: 0;
  font-size: 1.1rem;
}
.settings-close {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
}
.settings-close:hover {
  color: var(--text);
}
.settings-body {
  padding: 20px;
}
.settings-section {
  margin-bottom: 24px;
}
.settings-section h3 {
  font-size: 0.85rem;
  color: var(--accent);
  margin: 0 0 12px 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.settings-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.settings-row:last-child {
  border-bottom: none;
}
.settings-label {
  color: var(--muted);
  font-size: 0.85rem;
}
.settings-value {
  color: var(--text);
  font-size: 0.9rem;
  font-family: monospace;
}
.settings-value.connected {
  color: #3fb950;
}
.settings-value.disconnected {
  color: #f85149;
}
.settings-textarea {
  width: 100%;
  min-height: 100px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px;
  color: var(--text);
  font-family: inherit;
  font-size: 0.85rem;
  resize: vertical;
}
.settings-textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.settings-save-btn {
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 6px;
  padding: 10px 20px;
  cursor: pointer;
  font-weight: 500;
  width: 100%;
  margin-top: 12px;
}
.settings-save-btn:hover {
  opacity: 0.9;
}

/* Small action buttons in settings */
.settings-btn-small {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 10px;
  cursor: pointer;
  font-size: 0.75rem;
  transition: all 0.2s ease;
}
.settings-btn-small:hover {
  background: var(--border);
  border-color: var(--accent);
}

/* Settings form inputs */
.settings-input {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 8px 12px;
  font-size: 0.875rem;
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
}
.settings-input:focus {
  outline: none;
  border-color: var(--accent);
}
.settings-input::placeholder {
  color: var(--muted);
}

/* Large textarea for orchestrator prompt */
.settings-textarea-large {
  min-height: 300px;
  line-height: 1.4;
}

/* Project path display */
.project-path-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.project-path-row label {
  font-size: 0.75rem;
  color: var(--muted);
  min-width: 35px;
}
.project-path-input {
  flex: 1;
  background: var(--surface);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 6px 8px;
  font-family: monospace;
  font-size: 0.7rem;
  cursor: pointer;
}
.project-path-input:focus {
  outline: none;
  border-color: var(--accent);
}
.project-path-input:hover {
  border-color: var(--accent);
}

/* Multi-relay selector bar */
.relay-selector-bar {
  display: none;
  background: var(--surface-contrast);
  border-bottom: 1px solid var(--border);
  padding: 0.5rem 1rem;
  overflow-x: auto;
  white-space: nowrap;
  gap: 0.5rem;
}

.relay-selector-bar.visible {
  display: flex;
}

.relay-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.75rem;
  flex-shrink: 0;
}

.relay-chip:hover {
  background: var(--glass-strong);
  border-color: var(--accent);
}

.relay-chip.active {
  background: var(--glass-strong);
  border-color: var(--accent-purple);
  box-shadow: 0 0 0 1px var(--accent-purple);
}

.relay-chip-project {
  font-weight: 500;
  color: var(--text);
}

.relay-chip-task {
  color: var(--muted);
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.relay-chip-agent {
  padding: 0.1rem 0.4rem;
  background: rgba(124, 58, 237, 0.2);
  color: #a78bfa;
  border-radius: 3px;
  font-size: 0.65rem;
  font-weight: 500;
}

.relay-chip-agent.codex {
  background: rgba(16, 163, 127, 0.2);
  color: #10a37f;
}

.relay-chip-agent.aider {
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
}

.relay-chip-iteration {
  font-size: 0.65rem;
  color: var(--muted);
  padding: 0 0.2rem;
}

.relay-chip-status {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse-dot 1.5s ease-in-out infinite;
}

.relay-chip-status.paused {
  background: #f0ad4e;
  animation: none;
}

/* Config panels (deprecated but kept for compatibility) */
.config-panel {
  padding: 0.75rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface-contrast);
}

.config-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  padding: 0.25rem 0;
}

.config-toggle-title {
  font-size: 0.75rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.config-toggle-icon {
  font-size: 0.7rem;
  color: var(--muted);
  transition: transform 0.2s ease;
}

.config-toggle-icon.expanded {
  transform: rotate(180deg);
}

.config-content {
  display: none;
  margin-top: 0.75rem;
}

.config-content.expanded {
  display: block;
}

.config-row {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.config-row label {
  font-size: 0.75rem;
  color: var(--muted);
  min-width: 65px;
}

.config-row input {
  flex: 1;
  padding: 0.35rem 0.5rem;
  font-size: 0.8rem;
}

.config-row input[type="number"] {
  width: 70px;
  flex: none;
}

.config-notes {
  width: 100%;
  padding: 0.35rem 0.5rem;
  font-size: 0.8rem;
  min-height: 50px;
  resize: vertical;
}

.config-save-btn {
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.4rem;
  font-size: 0.75rem;
  background: var(--glass);
}

.config-save-btn:hover {
  background: var(--glass-strong);
}

.config-status {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
  font-size: 0.7rem;
}

.port-status {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.5rem;
  background: var(--glass);
  border-radius: 4px;
}

.port-status.running {
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
}

.port-status.stopped {
  background: var(--glass);
  color: var(--muted);
}

/* ========================================
   Relay Detail View Components
   ======================================== */

/* Relay Summary Card - Compact Design */
.relay-summary-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
}

.relay-summary-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.relay-summary-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
  font-weight: 500;
}

.relay-icon {
  font-size: 1.1rem;
}

.relay-summary-status {
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.relay-summary-status.status-completed {
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
}

.relay-summary-status.status-failed {
  background: rgba(248, 81, 73, 0.2);
  color: #f85149;
}

.relay-summary-status.status-running {
  background: rgba(88, 166, 255, 0.2);
  color: #58a6ff;
}

.relay-summary-status.status-cancelled {
  background: rgba(240, 136, 62, 0.2);
  color: #f0883e;
}

.relay-task-display {
  background: var(--glass);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin-bottom: 0.75rem;
  position: relative;
}

.relay-task-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.35rem;
  letter-spacing: 0.3px;
}

.relay-task-text {
  font-size: 0.9rem;
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 80px;
  overflow-y: auto;
}

.relay-task-display .copy-prompt-btn.small {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  padding: 0.2rem 0.4rem;
  font-size: 0.65rem;
}

.relay-meta-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  padding: 0.5rem 0;
}

.relay-meta-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.meta-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.meta-value {
  font-size: 0.8rem;
  font-weight: 500;
}

.relay-context-section {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}

.section-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.35rem;
  letter-spacing: 0.3px;
}

.relay-context-text {
  font-size: 0.85rem;
  color: var(--muted);
  white-space: pre-wrap;
  max-height: 60px;
  overflow-y: auto;
}

/* Iteration Timeline */
.iteration-timeline {
  margin-bottom: 1rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.timeline-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
  font-weight: 500;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
}

.timeline-icon {
  font-size: 1.1rem;
}

.timeline-iteration {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 0;
}

.timeline-connector {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 20px;
  flex-shrink: 0;
}

.timeline-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--muted);
  flex-shrink: 0;
}

.timeline-dot.codex {
  background: #10a37f;
}

.timeline-dot.claude {
  background: #7c3aed;
}

.timeline-dot.aider {
  background: #22c55e;
}

.timeline-line {
  width: 2px;
  flex: 1;
  background: var(--border);
  min-height: 16px;
}

.iteration-card {
  flex: 1;
  min-width: 0; /* Prevent flex item from overflowing */
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  margin-bottom: 0.75rem;
  overflow: hidden;
}

.iteration-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.iteration-agent {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.agent-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

.agent-icon.codex {
  background: rgba(16, 163, 127, 0.2);
}

.agent-icon.claude {
  background: rgba(124, 58, 237, 0.2);
}

.agent-icon.aider {
  background: rgba(34, 197, 94, 0.2);
}

.agent-name {
  font-weight: 600;
  font-size: 1rem;
}

.iteration-meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.8rem;
  color: var(--muted);
}

.iteration-number {
  background: var(--glass);
  padding: 0.2rem 0.6rem;
  border-radius: 4px;
  font-weight: 500;
}

/* Handoff Sections */
.handoff-section {
  margin-top: 0.75rem;
  padding: 0.85rem 1rem;
  background: var(--glass);
  border-radius: 8px;
}

.handoff-section.findings {
  border-left: 3px solid #58a6ff;
}

.handoff-section.files {
  border-left: 3px solid #f0883e;
}

.handoff-section.suggestions {
  border-left: 3px solid #3fb950;
}

.handoff-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.handoff-list {
  margin: 0;
  padding-left: 1.25rem;
  font-size: 0.95rem;
  line-height: 1.7;
}

.handoff-list li {
  margin-bottom: 0.35rem;
}

.suggestions-list li {
  color: #3fb950;
}

.file-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.file-chip {
  background: rgba(240, 136, 62, 0.15);
  color: #f0883e;
  padding: 0.3rem 0.6rem;
  border-radius: 4px;
  font-size: 0.8rem;
  font-family: 'SF Mono', 'Fira Code', monospace;
}

/* Output Toggle */
.iteration-output-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding: 0.6rem 0.75rem;
  background: var(--glass);
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--muted);
  transition: all 0.15s ease;
}

.iteration-output-toggle:hover {
  background: var(--glass-strong);
  color: var(--text);
}

.toggle-icon {
  font-size: 0.75rem;
  transition: transform 0.15s ease;
}

.iteration-output-content {
  margin-top: 0.75rem;
}

.output-section {
  margin-bottom: 1rem;
}

.output-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.5rem;
  font-weight: 500;
}

.output-pre {
  background: #0d1117;
  border-radius: 8px;
  padding: 1rem;
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 0.85rem;
  line-height: 1.6;
  overflow-x: auto;
  max-height: 400px;
  overflow-y: auto;
  color: #c9d1d9;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
}

/* Simple Output View (fallback) */
.simple-output-view {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.output-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

.output-card.codex {
  border-left: 3px solid #10a37f;
}

.output-card.claude {
  border-left: 3px solid #7c3aed;
}

.output-card.aider {
  border-left: 3px solid #22c55e;
}

.output-card-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: var(--glass);
  border-bottom: 1px solid var(--border);
  font-weight: 500;
  font-size: 0.9rem;
}

.output-card .output-pre {
  border-radius: 0;
  margin: 0;
}

/* Handoff Card */
.handoff-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 3px solid #58a6ff;
  border-radius: 10px;
  overflow: hidden;
}

.handoff-card-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: rgba(88, 166, 255, 0.1);
  border-bottom: 1px solid var(--border);
  font-weight: 500;
  font-size: 0.9rem;
}

.handoff-icon {
  font-size: 1.1rem;
}

.handoff-card .handoff-section {
  margin: 0;
  border-radius: 0;
  border-left: none;
}

/* Error Card */
.error-card {
  background: rgba(248, 81, 73, 0.1);
  border: 1px solid rgba(248, 81, 73, 0.3);
  border-radius: 10px;
  overflow: hidden;
  margin-top: 1rem;
}

.error-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: rgba(248, 81, 73, 0.15);
  border-bottom: 1px solid rgba(248, 81, 73, 0.2);
  font-weight: 500;
  color: #f85149;
}

.error-icon {
  font-size: 1.1rem;
}

.error-time {
  margin-left: auto;
  font-size: 0.75rem;
  font-weight: normal;
  color: var(--muted);
}

.error-content {
  padding: 1rem;
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 0.8rem;
  white-space: pre-wrap;
  color: #f85149;
}

/* Orchestrator Decision Styles */
.timeline-dot.orchestrator {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.4);
}

.agent-icon.orchestrator {
  background: linear-gradient(135deg, #f59e0b, #d97706);
}

.orchestrator-card {
  border-left: 3px solid #f59e0b;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.05), transparent);
}

.orchestrator-decision-content {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.decision-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.decision-label {
  font-size: 0.75rem;
  color: var(--muted);
  font-weight: 500;
  min-width: 90px;
}

.decision-value {
  font-size: 0.85rem;
  color: var(--text);
  font-weight: 500;
}

.decision-value.agent-choice-codex {
  color: #58a6ff;
}

.decision-value.agent-choice-claude {
  color: #a855f7;
}

.decision-reasoning {
  margin-top: 0.5rem;
  padding: 0.75rem;
  background: var(--glass);
  border-radius: 6px;
  border-left: 2px solid #f59e0b;
}

.reasoning-text {
  font-size: 0.8rem;
  color: var(--text);
  line-height: 1.5;
  white-space: pre-wrap;
}

/* ============================================
   Failed Iteration Styles
   ============================================ */

.timeline-dot.failed {
  width: 14px;
  height: 14px;
  background: #ef4444;
  color: white;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

.failed-iteration {
  opacity: 0.9;
}

.failed-card {
  border-left: 3px solid #ef4444 !important;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.08), transparent) !important;
}

.failed-card .iteration-header {
  border-bottom: 1px solid rgba(239, 68, 68, 0.2);
  padding-bottom: 0.5rem;
}

.failed-badge {
  display: inline-block;
  font-size: 0.65rem;
  padding: 0.15rem 0.4rem;
  background: #ef4444;
  color: white;
  border-radius: 3px;
  font-weight: 600;
  text-transform: uppercase;
  margin-left: 0.5rem;
}

.agent-icon.failed {
  opacity: 0.7;
}

.failed-iteration-message {
  padding: 0.5rem 0.75rem;
  color: #fca5a5;
  font-size: 0.8rem;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.failed-iteration-message .error-icon {
  flex-shrink: 0;
  font-size: 1rem;
}

.failed-iteration-message .exit-code {
  color: var(--muted);
  font-size: 0.75rem;
  margin-left: 0.25rem;
}

/* ============================================
   Progress Bar & Enhanced Timeline Styles
   ============================================ */

/* Progress Section in Summary Card */
.relay-progress-section {
  margin: 0.5rem 0;
  padding: 0.6rem 0.75rem;
  background: var(--glass);
  border-radius: 6px;
}

.progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.4rem;
}

.progress-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}

.progress-text {
  font-size: 0.75rem;
  color: var(--text);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.editable-iterations {
  font-weight: 600;
  color: var(--accent);
}

.edit-iterations-btn {
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.7rem;
  padding: 2px 4px;
  border-radius: 3px;
  transition: all 0.2s ease;
  opacity: 0.6;
}

.edit-iterations-btn:hover {
  background: var(--glass-hover);
  color: var(--accent);
  opacity: 1;
}

.progress-bar-container {
  position: relative;
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #10a37f, #7c3aed);
  border-radius: 4px;
  transition: width 0.3s ease;
}

.progress-bar-fill.animated {
  background: linear-gradient(90deg, #10a37f, #7c3aed, #10a37f);
  background-size: 200% 100%;
  animation: progressShimmer 2s linear infinite;
}

@keyframes progressShimmer {
  0% { background-position: 0% 0%; }
  100% { background-position: 200% 0%; }
}

.progress-bar-pulse {
  position: absolute;
  right: 0;
  top: 0;
  width: 20px;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3));
  animation: progressPulse 1.5s ease-in-out infinite;
}

@keyframes progressPulse {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

.progress-stats {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
  flex-wrap: wrap;
}

.stat-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15rem 0.4rem;
  background: var(--glass);
  border-radius: 3px;
  font-size: 0.7rem;
  color: var(--muted);
}

.stat-chip .stat-icon {
  font-size: 0.8rem;
}

.stat-chip.files {
  border-left: 2px solid #f0883e;
}

.stat-chip.time {
  border-left: 2px solid #58a6ff;
}

.stat-chip.agents {
  border-left: 2px solid #7c3aed;
}

/* Current Agent Indicator */
.agent-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.agent-indicator.codex {
  color: #10a37f;
}

.agent-indicator.claude {
  color: #7c3aed;
}

.agent-indicator.aider {
  color: #22c55e;
}

.agent-indicator.none {
  color: var(--muted);
}

/* Live Duration */
.duration-live {
  color: #58a6ff;
}

.duration-live::after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  background: #58a6ff;
  border-radius: 50%;
  margin-left: 6px;
  animation: livePulse 1s ease-in-out infinite;
}

@keyframes livePulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

/* Enhanced Timeline Header */
.timeline-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
}

.timeline-header-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.timeline-header-actions {
  display: flex;
  gap: 0.5rem;
}

.timeline-action-btn {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.6rem;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 0.7rem;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s ease;
}

.timeline-action-btn:hover {
  background: var(--glass-strong);
  color: var(--text);
}

/* Iteration Card Enhancements */
.iteration-header.clickable {
  cursor: pointer;
  transition: background 0.15s ease;
  padding: 0.5rem;
  margin: -0.5rem -0.5rem 0.5rem -0.5rem;
  border-radius: 6px;
}

.iteration-header.clickable:hover {
  background: var(--glass);
}

.card-toggle-icon {
  font-size: 0.7rem;
  color: var(--muted);
  transition: transform 0.15s ease;
}

.iteration-card.collapsed .card-toggle-icon {
  transform: rotate(-90deg);
}

.iteration-elapsed {
  background: rgba(88, 166, 255, 0.15);
  color: #58a6ff;
  padding: 0.15rem 0.4rem;
  border-radius: 3px;
  font-weight: 500;
}

.iteration-compact-summary {
  font-size: 0.85rem;
  color: var(--muted);
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0.5rem;
}

.iteration-details {
  transition: max-height 0.3s ease;
}

.iteration-card.collapsed .iteration-details {
  display: none;
}

/* Output size indicator */
.output-size {
  font-weight: 400;
  opacity: 0.7;
}

/* More items indicator */
.more-items {
  color: var(--muted);
  font-style: italic;
}

.file-chip.more {
  background: var(--glass);
  color: var(--muted);
}

/* Orchestrator Card Collapse */
.orchestrator-card.collapsed .decision-reasoning {
  display: none;
}

/* Resume Section Styles */
.relay-resume-section {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 1rem;
}

.resume-relay-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: linear-gradient(135deg, #10a37f, #7c3aed);
  border: none;
  border-radius: 6px;
  color: white;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.resume-relay-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
}

.resume-hint {
  font-size: 0.75rem;
  color: var(--muted);
}

/* Continue button for completed relays */
.relay-continue-section {
  border-top-color: rgba(16, 163, 127, 0.3);
}

.continue-relay-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: linear-gradient(135deg, #10a37f, #059669);
  border: none;
  border-radius: 6px;
  color: white;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.continue-relay-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(16, 163, 127, 0.4);
}

/* Status badge for stopped state */
.relay-summary-status.status-stopped {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: white;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .relay-meta-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .decision-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }

  .decision-label {
    min-width: auto;
  }
}

/* ========================================
   Processes Panel
   ======================================== */
.processes-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  font-size: 0.65rem;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
  color: white;
  background: var(--accent-hot);
  border-radius: 8px;
}

.settings-btn {
  position: relative;
}

.process-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  transition: background 0.15s ease;
}

.process-card:hover {
  background: var(--glass);
}

.process-card:last-child {
  border-bottom: none;
}

.process-port {
  min-width: 60px;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--accent);
  font-family: monospace;
}

.process-info {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.process-type {
  display: inline-block;
  padding: 2px 6px;
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  background: var(--glass-strong);
  border-radius: 4px;
  margin-right: 0.5rem;
}

.process-type.vite { background: rgba(147, 51, 234, 0.2); color: #a855f7; }
.process-type.next { background: rgba(0, 0, 0, 0.3); color: #fff; }
.process-type.uvicorn { background: rgba(34, 197, 94, 0.2); color: #22c55e; }
.process-type.server { background: rgba(59, 130, 246, 0.2); color: #3b82f6; }

.process-project {
  font-size: 0.85rem;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.process-command {
  font-size: 0.75rem;
  color: var(--muted);
  font-family: monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 350px;
}

.process-meta {
  font-size: 0.7rem;
  color: var(--muted);
  margin-top: 2px;
}

.process-relay {
  color: var(--accent-purple);
  cursor: pointer;
}

.process-relay:hover {
  text-decoration: underline;
}

.process-actions {
  display: flex;
  gap: 0.5rem;
}

.process-kill-btn {
  padding: 0.4rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: white;
  background: var(--accent-hot);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.process-kill-btn:hover {
  background: #dc2626;
  transform: translateY(-1px);
}

.process-kill-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.process-status {
  font-size: 0.7rem;
  padding: 2px 6px;
  border-radius: 4px;
}

.process-status.running {
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
}

.process-status.killed, .process-status.dead {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

.process-empty {
  padding: 3rem;
  text-align: center;
  color: var(--muted);
}

.process-empty-icon {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
  opacity: 0.5;
}

.processes-header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  background: var(--surface-contrast);
  border-bottom: 1px solid var(--border);
  font-size: 0.8rem;
}

.processes-filter {
  display: flex;
  gap: 0.5rem;
}

.processes-filter-btn {
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--muted);
  cursor: pointer;
}

.processes-filter-btn.active {
  background: var(--glass-strong);
  border-color: var(--accent);
  color: var(--accent);
}

/* ========================================
   Attachment Previews (Pasted/Dropped Files)
   ======================================== */
.attachment-previews {
  display: none;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
  padding: 8px;
  background: var(--surface-contrast);
  border: 1px solid var(--border);
  border-radius: 6px;
}

.attachment-preview {
  position: relative;
  width: 80px;
  height: 80px;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  background: var(--surface);
}

.attachment-preview img {
  width: 100%;
  height: 60px;
  object-fit: cover;
}

.attachment-preview .attachment-name {
  display: block;
  padding: 2px 4px;
  font-size: 0.65rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  background: var(--surface);
}

.attachment-preview .attachment-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 18px;
  height: 18px;
  padding: 0;
  background: rgba(0, 0, 0, 0.7);
  border: none;
  border-radius: 50%;
  color: #fff;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.attachment-preview:hover .attachment-remove {
  opacity: 1;
}

.attachment-preview.file-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.attachment-preview .file-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: 4px;
  background: var(--glass);
  border-radius: 4px;
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--accent);
}

/* Drag over state for textarea */
.relay-task-input.drag-over {
  border-color: var(--accent) !important;
  background: var(--glass-strong) !important;
}

/* Relay task wrapper with attach button */
.relay-task-wrapper {
  position: relative;
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.relay-task-wrapper .relay-task-input {
  flex: 1;
}

.attach-file-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.attach-file-btn:hover {
  background: var(--surface-hover);
  border-color: var(--accent);
  color: var(--accent);
}

.attach-file-btn svg {
  width: 18px;
  height: 18px;
}

/* Full Prompt Expandable Container */
.full-prompt-container {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin: 0 1rem 0.5rem 1rem;
  overflow: hidden;
}

.full-prompt-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0.75rem;
  background: var(--surface-contrast);
  border-bottom: 1px solid var(--border);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--muted);
}

.full-prompt-actions {
  display: flex;
  gap: 0.5rem;
}

.full-prompt-actions button {
  padding: 0.25rem 0.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.full-prompt-actions button:hover {
  background: var(--surface-hover);
  border-color: var(--accent);
}

.full-prompt-text {
  padding: 0.75rem;
  margin: 0;
  font-family: inherit;
  font-size: 0.85rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 300px;
  overflow-y: auto;
  color: var(--text);
  background: var(--surface);
}

/* Make the conversation title look clickable */
#conversation-title {
  transition: color 0.15s ease;
}

#conversation-title:hover {
  color: var(--accent);
}

/* ========================================
   Running Threads Dropdown
   ======================================== */
.running-threads-dropdown {
  position: relative;
}

.running-threads-btn {
  position: relative;
}

.running-threads-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: linear-gradient(135deg, #10a37f, #7c3aed);
  color: white;
  font-size: 0.65rem;
  font-weight: 600;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: badgePulse 2s ease-in-out infinite;
}

@keyframes badgePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.running-threads-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  width: 380px;
  max-height: 400px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  z-index: 1000;
  display: none;
  overflow: hidden;
}

.running-threads-menu.visible {
  display: block;
  animation: dropdownSlide 0.15s ease-out;
}

@keyframes dropdownSlide {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.running-threads-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.15), rgba(16, 163, 127, 0.15));
  border-bottom: 1px solid var(--border);
  font-weight: 500;
  font-size: 0.9rem;
}

.running-threads-close {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: color 0.15s ease;
}

.running-threads-close:hover {
  color: var(--text);
}

.running-threads-list {
  max-height: 340px;
  overflow-y: auto;
}

.running-threads-empty {
  padding: 24px;
  text-align: center;
  color: var(--muted);
  font-size: 0.85rem;
}

.running-thread-item {
  display: flex;
  flex-direction: column;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.15s ease;
}

.running-thread-item:last-child {
  border-bottom: none;
}

.running-thread-item:hover {
  background: var(--glass);
}

.running-thread-item.active {
  background: var(--glass-strong);
  border-left: 3px solid var(--accent);
}

.running-thread-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.running-thread-status {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  animation: statusPulse 1.5s ease-in-out infinite;
}

@keyframes statusPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.running-thread-status.paused {
  background: #f59e0b;
  animation: none;
}

.running-thread-project {
  font-weight: 500;
  font-size: 0.85rem;
  color: var(--text);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.running-thread-agent {
  font-size: 0.7rem;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 500;
  text-transform: capitalize;
}

.running-thread-agent.codex {
  background: rgba(16, 163, 127, 0.2);
  color: #10a37f;
}

.running-thread-agent.claude {
  background: rgba(124, 58, 237, 0.2);
  color: #a78bfa;
}

.running-thread-agent.aider {
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
}

.running-thread-task {
  font-size: 0.8rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 8px;
}

.running-thread-actions {
  display: flex;
  gap: 6px;
}

.running-thread-actions button {
  padding: 4px 10px;
  font-size: 0.7rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.15s ease;
}

.running-thread-actions .view-btn {
  background: linear-gradient(135deg, #10a37f, #7c3aed);
  color: white;
}

.running-thread-actions .view-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.3);
}

.running-thread-actions .end-btn {
  background: #f59e0b;
  color: white;
}

.running-thread-actions .end-btn:hover {
  background: #d97706;
}

.running-thread-actions .cancel-btn {
  background: #dc2626;
  color: white;
}

.running-thread-actions .cancel-btn:hover {
  background: #b91c1c;
}

/* ========================================
   Promote to Release Button
   ======================================== */
.promote-release-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: 0.7rem;
  font-weight: 500;
  background: linear-gradient(135deg, #8b5cf6, #d946ef);
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.promote-release-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(217, 70, 239, 0.3);
}

.promote-release-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.promote-release-btn svg {
  flex-shrink: 0;
}

/* ========================================
   Thread List Live Badge
   ======================================== */
.thread-task-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.thread-task-row .thread-task,
.thread-task-row .thread-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.thread-live-badge {
  font-size: 0.6rem;
  font-weight: 600;
  padding: 2px 6px;
  background: linear-gradient(135deg, #10a37f, #7c3aed);
  color: white;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  animation: liveBadgePulse 1.5s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes liveBadgePulse {
  0%, 100% {
    opacity: 1;
    box-shadow: 0 0 4px rgba(124, 58, 237, 0.4);
  }
  50% {
    opacity: 0.8;
    box-shadow: 0 0 8px rgba(124, 58, 237, 0.6);
  }
}

/* Iteration count badge in thread list */
.thread-iterations {
  font-size: 0.65rem;
  color: var(--accent);
  background: rgba(88, 166, 255, 0.12);
  padding: 1px 5px;
  border-radius: 3px;
  font-weight: 500;
  flex-shrink: 0;
}

/* Small spinner for inline loading states */
.spinner-small {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spinnerRotate 0.8s linear infinite;
}

@keyframes spinnerRotate {
  to { transform: rotate(360deg); }
}

/* Relay Steering Section */
.relay-steering-section {
  margin-top: 1rem;
  padding: 0.75rem;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.1), rgba(16, 163, 127, 0.1));
  border-radius: 8px;
  border: 1px solid rgba(124, 58, 237, 0.2);
}

.relay-steering-section .section-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  margin-bottom: 0.5rem;
}

.steering-input-container {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.steering-input {
  flex: 1;
  padding: 8px 12px;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 0.85rem;
  resize: vertical;
  min-height: 36px;
  font-family: inherit;
}

.steering-input:focus {
  outline: none;
  border-color: #7c3aed;
  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.2);
}

.steering-input::placeholder {
  color: var(--muted);
  font-size: 0.8rem;
}

.steering-send-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: linear-gradient(135deg, #7c3aed, #10a37f);
  border: none;
  border-radius: 6px;
  color: white;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.steering-send-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.4);
}

.steering-send-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.steering-hint {
  font-size: 0.7rem;
  color: var(--muted);
  margin-top: 6px;
}

/* Steering Toast Notification */
.steering-toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 12px 20px;
  background: linear-gradient(135deg, #10a37f, #7c3aed);
  color: white;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  transform: translateY(100px);
  opacity: 0;
  transition: all 0.3s ease;
  z-index: 10000;
}

.steering-toast.visible {
  transform: translateY(0);
  opacity: 1;
}

.steering-toast .toast-icon {
  font-size: 1.1rem;
}

/* ========================================
   Full Timeline Replay View
   ======================================== */
.timeline-replay-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 400px;
}

.timeline-replay-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.15), rgba(16, 163, 127, 0.15));
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.timeline-replay-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 0.95rem;
}

.timeline-replay-title .timeline-icon {
  font-size: 1.1rem;
}

.timeline-replay-title .event-count {
  font-weight: 400;
  font-size: 0.8rem;
  color: var(--muted);
}

.timeline-replay-actions {
  display: flex;
  gap: 0.5rem;
}

.timeline-replay-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  gap: 1rem;
  color: var(--muted);
}

.timeline-replay-loading .loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spinnerRotate 0.8s linear infinite;
}

.timeline-replay-error {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1.5rem;
  margin: 1rem;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 8px;
  color: #ef4444;
}

.timeline-replay-search {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 1rem;
  background: var(--surface-contrast);
  border-bottom: 1px solid var(--border);
}

.timeline-replay-search input {
  flex: 1;
  padding: 0.5rem 0.75rem;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 0.85rem;
}

.timeline-replay-search input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.2);
}

.timeline-replay-search .search-results-count {
  font-size: 0.8rem;
  color: var(--muted);
  white-space: nowrap;
}

.timeline-replay-content {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem;
}

/* Timeline Group */
.timeline-group {
  margin-bottom: 0.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.timeline-group.iteration {
  border-left: 3px solid var(--accent-purple);
}

.timeline-group.codex {
  border-left: 3px solid #10a37f;
}

.timeline-group.claude {
  border-left: 3px solid #a78bfa;
}

.timeline-group.aider {
  border-left: 3px solid #22c55e;
}

.timeline-group.start {
  border-left: 3px solid #60a5fa;
}

/* Relay separator for chained relays */
.timeline-group.relay-separator {
  border-left: 3px solid var(--accent-gold, #f59e0b);
  background: var(--glass);
}

.timeline-group.relay-separator .timeline-group-header {
  background: rgba(245, 158, 11, 0.1);
  border-bottom: none;
}

.timeline-group.relay-separator .timeline-group-title {
  color: var(--accent-gold, #f59e0b);
}

/* Chain notice banner */
.timeline-chain-notice {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  margin-bottom: 0.75rem;
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 6px;
  font-size: 0.8rem;
  color: var(--accent-gold, #f59e0b);
}

.timeline-chain-notice span {
  font-size: 1rem;
}

.timeline-group-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem;
  background: var(--surface-contrast);
  cursor: pointer;
  user-select: none;
  transition: background 0.15s ease;
}

.timeline-group-header:hover {
  background: var(--glass);
}

.timeline-group-icon {
  font-size: 1rem;
}

.timeline-group-title {
  flex: 1;
  font-weight: 500;
  font-size: 0.85rem;
}

.timeline-group-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.75rem;
  color: var(--muted);
}

.timeline-group-meta .event-count {
  padding: 2px 6px;
  background: var(--glass);
  border-radius: 4px;
}

.timeline-group-header .toggle-icon {
  color: var(--muted);
  transition: transform 0.15s ease;
}

.timeline-group.collapsed .toggle-icon {
  transform: rotate(-90deg);
}

.timeline-group-content {
  padding: 0.5rem;
}

.timeline-group.collapsed .timeline-group-content {
  display: none;
}

/* Timeline Terminal */
.timeline-terminal {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}

.timeline-terminal-output {
  max-height: 400px;
  overflow-y: auto;
  padding: 0.5rem;
  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace;
  font-size: 0.75rem;
  line-height: 1.5;
}

.timeline-terminal-output .terminal-line {
  display: block;
  white-space: pre-wrap;
  word-break: break-word;
}

.timeline-terminal-output .terminal-line.search-match {
  background: rgba(251, 191, 36, 0.3);
  border-radius: 2px;
}

.timeline-terminal-output .terminal-line-empty {
  min-height: 1rem;
  display: block;
}

/* Code blocks within timeline terminal output */
.timeline-terminal-output .code-block-wrapper {
  margin: 0.75rem 0;
}

.timeline-terminal-output .code-block-wrapper:first-child {
  margin-top: 0;
}

.timeline-terminal-output .code-block-wrapper:last-child {
  margin-bottom: 0;
}

/* Timeline Tool Blocks */
.timeline-tool-block {
  margin: 0.5rem 0;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}

.timeline-tool-block.tool-error {
  border-color: var(--destructive);
  background: rgba(239, 68, 68, 0.1);
}

.timeline-tool-block .tool-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
}

.timeline-tool-block .tool-header:hover {
  background: var(--bg-hover);
}

.timeline-tool-block .tool-icon {
  font-size: 1rem;
  flex-shrink: 0;
}

.timeline-tool-block .tool-name {
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--foreground);
}

.timeline-tool-block .tool-summary {
  flex: 1;
  font-size: 0.75rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
}

.timeline-tool-block .tool-lines {
  font-size: 0.7rem;
  color: var(--muted);
  opacity: 0.7;
}

.timeline-tool-block .tool-toggle {
  font-size: 0.7rem;
  color: var(--muted);
  transition: transform 0.15s;
}

.timeline-tool-block .tool-content {
  border-top: 1px solid var(--border);
  max-height: 400px;
  overflow-y: auto;
}

.timeline-tool-block .tool-input,
.timeline-tool-block .tool-output {
  padding: 0.5rem 0.75rem;
}

.timeline-tool-block .tool-input {
  background: rgba(99, 102, 241, 0.08);
  border-bottom: 1px solid var(--border);
}

.timeline-tool-block .tool-output {
  background: var(--bg-primary);
}

.timeline-tool-block .tool-section-label {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin-bottom: 0.25rem;
}

.timeline-tool-block pre {
  margin: 0;
  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace;
  font-size: 0.72rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--foreground);
}

.timeline-tool-block.tool-error .tool-output pre {
  color: var(--destructive);
}

/* Timeline tool block collapsed/expanded states */
.timeline-tool-block.collapsed .tool-content {
  display: none;
}

.timeline-tool-block.expanded .tool-content {
  display: block;
}

.timeline-tool-block.expanded .tool-toggle {
  transform: rotate(90deg);
}

/* Timeline Event Types */
.timeline-orchestrator-event {
  margin-bottom: 0.5rem;
  padding: 0.75rem;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(139, 92, 246, 0.1));
  border-radius: 6px;
  border-left: 3px solid #8b5cf6;
}

.timeline-orchestrator-event .orchestrator-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
  font-size: 0.8rem;
  margin-bottom: 0.5rem;
}

.timeline-orchestrator-event .agent-choice {
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.75rem;
}

.timeline-orchestrator-event .agent-choice.codex {
  background: rgba(16, 163, 127, 0.2);
  color: #10a37f;
}

.timeline-orchestrator-event .agent-choice.claude {
  background: rgba(167, 139, 250, 0.2);
  color: #a78bfa;
}

.timeline-orchestrator-event .agent-choice.aider {
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
}

.timeline-orchestrator-event .completion-status {
  margin-left: auto;
  font-size: 0.7rem;
  color: var(--muted);
}

.timeline-orchestrator-event .orchestrator-reasoning {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.5;
}

.timeline-orchestrator-event .orchestrator-prompt {
  margin-top: 0.5rem;
}

.timeline-orchestrator-event .orchestrator-prompt summary {
  font-size: 0.75rem;
  color: var(--muted);
  cursor: pointer;
}

.timeline-orchestrator-event .orchestrator-prompt pre {
  margin-top: 0.5rem;
  padding: 0.5rem;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  font-size: 0.75rem;
  white-space: pre-wrap;
  overflow-x: auto;
}

.timeline-question-event {
  margin-bottom: 0.5rem;
  padding: 0.75rem;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.15), rgba(245, 158, 11, 0.1));
  border-radius: 6px;
  border-left: 3px solid #fbbf24;
}

.timeline-question-event .question-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
  font-size: 0.8rem;
  margin-bottom: 0.5rem;
  color: #fbbf24;
}

.timeline-question-event .question-text {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.9);
}

.timeline-info-event {
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.5rem;
  background: rgba(34, 197, 94, 0.1);
  border-radius: 6px;
  font-size: 0.8rem;
  color: #22c55e;
}

.timeline-error-event {
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.5rem;
  background: rgba(239, 68, 68, 0.1);
  border-radius: 6px;
  font-size: 0.8rem;
  color: #ef4444;
}

/* View Timeline Button styling */
.view-timeline-btn {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.2), rgba(16, 163, 127, 0.2)) !important;
  border-color: rgba(124, 58, 237, 0.4) !important;
}

.view-timeline-btn:hover {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.3), rgba(16, 163, 127, 0.3)) !important;
  border-color: var(--accent) !important;
}

/* ========================================
   Parent Relay Banner (for resumed/continued relays)
   ======================================== */
.relay-parent-banner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  margin: -0.75rem -0.75rem 0.75rem -0.75rem;
  background: linear-gradient(135deg, rgba(96, 165, 250, 0.15), rgba(124, 58, 237, 0.15));
  border-bottom: 1px solid rgba(96, 165, 250, 0.3);
  font-size: 0.8rem;
  color: #60a5fa;
}

.relay-parent-banner .parent-icon {
  font-size: 1rem;
}

.relay-parent-banner code {
  padding: 0.1rem 0.4rem;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  font-size: 0.75rem;
}

.parent-link-btn {
  margin-left: auto;
  padding: 0.25rem 0.5rem;
  background: rgba(96, 165, 250, 0.2);
  border: 1px solid rgba(96, 165, 250, 0.4);
  border-radius: 4px;
  color: #60a5fa;
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.parent-link-btn:hover {
  background: rgba(96, 165, 250, 0.3);
  border-color: #60a5fa;
}

/* ========================================
   Completion Summary Section
   ======================================== */
.relay-completion-summary {
  margin-top: 0.75rem;
  padding: 0.75rem;
  background: var(--surface-contrast);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.completion-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
}

.completion-icon {
  font-size: 1.1rem;
}

.completion-title {
  font-weight: 600;
  font-size: 0.9rem;
}

.completion-section {
  margin-bottom: 0.75rem;
}

.completion-section:last-child {
  margin-bottom: 0;
}

.completion-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--muted);
  margin-bottom: 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.completion-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.35rem;
}

.completion-actions .timeline-action-btn {
  flex: 0 0 auto;
}

.completion-text {
  font-size: 0.85rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.9);
}

.completion-files {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.file-chip {
  padding: 0.2rem 0.5rem;
  background: var(--glass);
  border-radius: 4px;
  font-size: 0.75rem;
  font-family: 'SF Mono', Monaco, monospace;
  color: var(--accent);
}

.completion-blockers {
  padding: 0.5rem;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 6px;
}

.completion-blockers .completion-label {
  color: #ef4444;
}

.completion-blockers .completion-text {
  color: #fca5a5;
}

/* ========================================
   Dashboard Command Center
   ======================================== */

.dashboard-tabs {
  display: flex;
  gap: 4px;
  padding: 12px 16px;
  background: var(--surface-contrast);
  border-bottom: 1px solid var(--border);
}

.dashboard-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.dashboard-tab:hover {
  background: var(--glass);
  color: var(--text);
}

.dashboard-tab.active {
  background: var(--glass-strong);
  border-color: var(--accent);
  color: var(--accent);
}

.dashboard-tab svg {
  flex-shrink: 0;
}

.tab-badge {
  background: var(--accent);
  color: var(--bg);
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
}

.tab-badge.warning {
  background: var(--accent-hot);
}

.dashboard-tab-content {
  display: none;
}

.dashboard-tab-content.active {
  display: block;
}

/* Command Center Header */
.command-center-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.command-center-header h3 {
  margin: 0;
}

/* Active Relays List */
.active-relays-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.command-center-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  text-align: center;
  color: var(--muted);
}

.command-center-empty p {
  margin: 1rem 0 0.25rem;
  font-size: 1rem;
  color: var(--text);
}

.command-center-empty span {
  font-size: 0.85rem;
  opacity: 0.8;
}

/* Active Orchestrations Link (Dashboard to Right Panel) */
.active-orchestrations-link {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: linear-gradient(135deg, rgba(127, 165, 255, 0.1), rgba(139, 92, 246, 0.08));
  border: 1px solid rgba(127, 165, 255, 0.3);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.active-orchestrations-link:hover {
  background: linear-gradient(135deg, rgba(127, 165, 255, 0.18), rgba(139, 92, 246, 0.12));
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(127, 165, 255, 0.15);
}

.active-orchestrations-link .link-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: rgba(127, 165, 255, 0.15);
  border-radius: 10px;
  flex-shrink: 0;
}

.active-orchestrations-link .link-icon svg {
  color: var(--accent);
}

.active-orchestrations-link .link-content {
  flex: 1;
  min-width: 0;
}

.active-orchestrations-link .link-content h3 {
  margin: 0 0 4px 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}

.active-orchestrations-link .link-content p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted);
}

.active-orchestrations-link .link-arrow {
  font-size: 1.5rem;
  color: var(--accent);
  opacity: 0.7;
  transition: all 0.2s ease;
}

.active-orchestrations-link:hover .link-arrow {
  opacity: 1;
  transform: translateX(4px);
}

/* Active Relay Card */
.active-relay-card {
  display: flex;
  gap: 16px;
  padding: 16px;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.active-relay-card:hover {
  background: var(--glass-strong);
  border-color: var(--accent);
  transform: translateY(-1px);
}

.active-relay-card.running {
  border-left: 3px solid var(--accent-green);
}

.active-relay-card.paused {
  border-left: 3px solid var(--accent-yellow);
}

.active-relay-card.failed {
  border-left: 3px solid var(--accent-hot);
}

.relay-card-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 48px;
}

.relay-status-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}

.relay-status-icon.running {
  background: rgba(34, 197, 94, 0.15);
  animation: pulse-green 2s ease-in-out infinite;
}

.relay-status-icon.paused {
  background: rgba(250, 204, 21, 0.15);
}

.relay-status-icon.failed {
  background: rgba(248, 81, 73, 0.15);
}

.relay-status-icon.completed {
  background: rgba(96, 165, 250, 0.15);
}

@keyframes pulse-green {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(34, 197, 94, 0);
  }
}

.relay-card-info {
  flex: 1;
  min-width: 0;
}

.relay-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.relay-card-project {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text);
}

.relay-card-agent {
  font-size: 0.7rem;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--glass-strong);
  color: var(--muted);
  text-transform: uppercase;
}

.relay-card-agent.claude {
  background: rgba(167, 139, 250, 0.2);
  color: #a78bfa;
}

.relay-card-agent.codex {
  background: rgba(74, 222, 128, 0.2);
  color: #4ade80;
}

.relay-card-agent.aider {
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
}

.relay-card-agent.gemini {
  background: rgba(96, 165, 250, 0.2);
  color: #60a5fa;
}

.relay-card-task {
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.relay-card-meta {
  display: flex;
  gap: 16px;
  font-size: 0.75rem;
  color: var(--muted);
}

.relay-card-meta span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.relay-card-meta .duration {
  font-family: 'Space Mono', monospace;
}

/* Progress bar for iterations */
.relay-progress {
  width: 100%;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  margin-top: 8px;
  overflow: hidden;
}

.relay-progress-bar {
  height: 100%;
  background: var(--accent-green);
  border-radius: 2px;
  transition: width 0.3s ease;
}

/* Relay Card Actions */
.relay-card-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
}

.relay-card-actions button {
  padding: 6px 12px;
  font-size: 0.75rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--glass);
  color: var(--text);
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.relay-card-actions button:hover {
  background: var(--glass-strong);
  border-color: var(--accent);
}

.relay-card-actions button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
}

.relay-card-actions button.danger {
  background: rgba(248, 81, 73, 0.1);
  border-color: var(--accent-hot);
  color: var(--accent-hot);
}

/* Activity Timeline */
.activity-timeline {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 300px;
  overflow-y: auto;
}

.timeline-event {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  background: var(--glass);
  border-radius: 8px;
  font-size: 0.85rem;
}

.timeline-event-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.8rem;
}

.timeline-event-icon.started {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

.timeline-event-icon.completed {
  background: rgba(96, 165, 250, 0.15);
  color: #60a5fa;
}

.timeline-event-icon.failed {
  background: rgba(248, 81, 73, 0.15);
  color: #f85149;
}

.timeline-event-info {
  flex: 1;
  min-width: 0;
}

.timeline-event-title {
  font-weight: 500;
  color: var(--text);
}

.timeline-event-task {
  font-size: 0.8rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.timeline-event-time {
  font-size: 0.75rem;
  color: var(--muted);
  white-space: nowrap;
}

/* ========================================
   Error Toast Notifications
   ======================================== */

.error-toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  max-width: 400px;
  min-width: 300px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  display: flex;
  gap: 12px;
  padding: 16px;
  z-index: 10000;
  transform: translateY(100px);
  opacity: 0;
  transition: all 0.3s ease;
}

.error-toast.visible {
  transform: translateY(0);
  opacity: 1;
}

.error-toast.hiding {
  transform: translateX(100px);
  opacity: 0;
}

.error-toast.warning {
  border-left: 4px solid #facc15;
}

.error-toast.error {
  border-left: 4px solid #f85149;
}

.error-toast.critical {
  border-left: 4px solid #a855f7;
}

.error-toast.info {
  border-left: 4px solid #60a5fa;
}

.error-toast.success {
  border-left: 4px solid #10b981;
}

.error-toast-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.error-toast.warning .error-toast-icon { color: #facc15; }
.error-toast.error .error-toast-icon { color: #f85149; }
.error-toast.critical .error-toast-icon { color: #a855f7; }
.error-toast.info .error-toast-icon { color: #60a5fa; }
.error-toast.success .error-toast-icon { color: #10b981; }

.error-toast-content {
  flex: 1;
  min-width: 0;
}

.error-toast-title {
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 4px;
  color: var(--text);
}

.error-toast-message {
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.4;
}

.error-toast-suggestions {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.error-toast-suggestions-title {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--muted);
  margin-bottom: 6px;
}

.error-toast-suggestions ul {
  margin: 0;
  padding-left: 16px;
  font-size: 0.8rem;
  color: var(--text);
}

.error-toast-suggestions li {
  margin-bottom: 4px;
}

.error-toast-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.15s ease;
}

.error-toast-close:hover {
  background: var(--glass);
  color: var(--text);
}

/* ========================================
   Inline Error Panel (for conversation view)
   ======================================== */

.inline-error-panel {
  margin: 16px 0;
  padding: 16px;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.inline-error-panel.warning {
  border-color: rgba(250, 204, 21, 0.3);
  background: rgba(250, 204, 21, 0.05);
}

.inline-error-panel.error {
  border-color: rgba(248, 81, 73, 0.3);
  background: rgba(248, 81, 73, 0.05);
}

.inline-error-panel.critical {
  border-color: rgba(168, 85, 247, 0.3);
  background: rgba(168, 85, 247, 0.05);
}

.inline-error-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.inline-error-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.inline-error-panel.warning .inline-error-icon { color: #facc15; }
.inline-error-panel.error .inline-error-icon { color: #f85149; }
.inline-error-panel.critical .inline-error-icon { color: #a855f7; }

.inline-error-title {
  font-weight: 600;
  font-size: 1rem;
  color: var(--text);
}

.inline-error-message {
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: 12px;
}

.inline-error-suggestions {
  background: var(--surface);
  padding: 12px;
  border-radius: 8px;
  margin-bottom: 12px;
}

.inline-error-suggestions strong {
  font-size: 0.8rem;
  color: var(--text);
  display: block;
  margin-bottom: 8px;
}

.inline-error-suggestions ul {
  margin: 0;
  padding-left: 20px;
  font-size: 0.85rem;
  color: var(--muted);
}

.inline-error-suggestions li {
  margin-bottom: 4px;
}

.inline-error-actions {
  display: flex;
  gap: 8px;
}

.inline-error-actions button {
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-retry {
  background: var(--accent);
  border: 1px solid var(--accent);
  color: var(--bg);
}

.btn-retry:hover {
  filter: brightness(1.1);
}

.btn-dismiss {
  background: var(--glass);
  border: 1px solid var(--border);
  color: var(--text);
}

.btn-dismiss:hover {
  background: var(--glass-strong);
}

/* ========================================
   Connection Error Banner
   ======================================== */

.connection-error-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: linear-gradient(135deg, #f85149 0%, #da3633 100%);
  color: white;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 10001;
  box-shadow: 0 4px 12px rgba(248, 81, 73, 0.3);
}

.connection-error-banner.hiding {
  animation: slideUp 0.3s ease forwards;
}

@keyframes slideUp {
  to {
    transform: translateY(-100%);
    opacity: 0;
  }
}

.connection-error-icon {
  flex-shrink: 0;
}

.connection-error-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.connection-error-text strong {
  font-weight: 600;
}

.connection-error-text span {
  font-size: 0.85rem;
  opacity: 0.9;
}

.connection-error-retry {
  padding: 6px 16px;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 6px;
  color: white;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.connection-error-retry:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* ========================================
   Memory Dashboard Styles
   ======================================== */

/* Loading and Empty States */
.memory-loading,
.memory-empty,
.memory-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
  text-align: center;
  color: var(--muted);
}

.memory-loading .spinner {
  width: 24px;
  height: 24px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.memory-empty svg,
.memory-error svg {
  margin-bottom: 1rem;
  opacity: 0.5;
}

.memory-empty h3,
.memory-error h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--foreground);
  margin-bottom: 0.5rem;
}

.memory-empty p,
.memory-error p {
  font-size: 0.9rem;
  max-width: 300px;
}

.memory-error .error-detail {
  font-size: 0.8rem;
  color: var(--accent-hot);
  margin-top: 0.5rem;
}

.memory-error .btn-retry {
  margin-top: 1rem;
  padding: 8px 20px;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.memory-error .btn-retry:hover {
  background: var(--accent-hover);
}

/* Memory Header */
.memory-header {
  padding: 1rem;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.1), rgba(16, 163, 127, 0.1));
  border-radius: 8px;
  margin-bottom: 1.5rem;
}

.memory-header h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

/* Memory Stats Grid */
.memory-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.memory-stat {
  text-align: center;
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 6px;
}

.memory-stat .stat-value {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--accent);
}

.memory-stat .stat-label {
  display: block;
  font-size: 0.75rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 4px;
}

.memory-activity-range {
  display: flex;
  justify-content: space-between;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  font-size: 0.8rem;
  color: var(--muted);
}

/* Memory Sections */
.memory-sections {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.memory-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem;
}

.memory-section h4 {
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
}

/* Context Box */
.context-box {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  padding: 1rem;
}

.context-item {
  margin-bottom: 1rem;
}

.context-item:last-child {
  margin-bottom: 0;
}

.context-item strong {
  display: block;
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.context-item p {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--foreground);
}

/* Decisions List */
.decisions-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.decision-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 6px;
}

.decision-agent {
  flex-shrink: 0;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
}

.decision-agent.claude {
  background: rgba(124, 58, 237, 0.2);
  color: #a78bfa;
}

.decision-agent.codex {
  background: rgba(16, 163, 127, 0.2);
  color: #34d399;
}

.decision-agent.aider {
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
}

.decision-agent.gemini {
  background: rgba(59, 130, 246, 0.2);
  color: #60a5fa;
}

.decision-reasoning {
  flex: 1;
  font-size: 0.85rem;
  color: var(--foreground);
  line-height: 1.4;
}

.decision-time {
  flex-shrink: 0;
  font-size: 0.75rem;
  color: var(--muted);
}

/* Files Touched List */
.files-touched-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.file-tag {
  padding: 4px 10px;
  background: rgba(59, 130, 246, 0.15);
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: 4px;
  font-size: 0.8rem;
  font-family: 'SF Mono', 'Monaco', monospace;
  color: var(--foreground);
}

.more-files {
  padding: 4px 10px;
  background: rgba(100, 100, 100, 0.2);
  border-radius: 4px;
  font-size: 0.8rem;
  color: var(--muted);
}

/* Memories List */
.memories-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.memory-item {
  padding: 0.75rem;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 6px;
  border-left: 3px solid var(--accent);
}

.memory-type {
  display: inline-block;
  padding: 2px 8px;
  background: rgba(124, 58, 237, 0.2);
  border-radius: 3px;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #a78bfa;
  margin-bottom: 0.5rem;
}

.memory-content {
  font-size: 0.85rem;
  color: var(--foreground);
  line-height: 1.4;
  margin-bottom: 0.5rem;
}

.memory-time {
  font-size: 0.75rem;
  color: var(--muted);
}

/* Memory Timeline */
.memory-timeline {
  position: relative;
  padding-left: 20px;
}

.memory-timeline::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--border);
}

.memory-timeline .timeline-item {
  position: relative;
  padding: 0.75rem 0 0.75rem 1.5rem;
}

.memory-timeline .timeline-dot {
  position: absolute;
  left: -17px;
  top: 1rem;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--border);
}

.memory-timeline .timeline-dot.relay_start {
  border-color: var(--accent);
  background: var(--accent);
}

.memory-timeline .timeline-dot.relay_complete {
  border-color: var(--success);
  background: var(--success);
}

.memory-timeline .timeline-content {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 6px;
  padding: 0.75rem;
}

.memory-timeline .timeline-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.memory-timeline .timeline-type {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: capitalize;
}

.memory-timeline .timeline-time {
  font-size: 0.75rem;
  color: var(--muted);
}

.memory-timeline .timeline-task {
  font-size: 0.85rem;
  color: var(--foreground);
  margin: 0.5rem 0;
  line-height: 1.4;
}

.memory-timeline .timeline-status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 0.7rem;
  text-transform: uppercase;
}

.memory-timeline .timeline-status.status-completed {
  background: rgba(16, 163, 127, 0.2);
  color: #34d399;
}

.memory-timeline .timeline-status.status-failed {
  background: rgba(248, 81, 73, 0.2);
  color: #f85149;
}

.memory-timeline .timeline-status.status-cancelled {
  background: rgba(100, 100, 100, 0.2);
  color: var(--muted);
}

.memory-timeline .timeline-iterations {
  font-size: 0.75rem;
  color: var(--muted);
  margin-left: 0.5rem;
}

.timeline-empty,
.timeline-error {
  padding: 2rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.9rem;
}

@media (max-width: 600px) {
  .memory-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .memory-activity-range {
    flex-direction: column;
    gap: 0.25rem;
  }
  
  .decision-item {
    flex-direction: column;
  }
  
  .decision-time {
    align-self: flex-end;
  }
}

/* ========================================
   Recently Finished Dropdown
   ======================================== */
.recently-finished-dropdown {
  position: relative;
}

.recently-finished-btn {
  position: relative;
}

.recently-finished-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: linear-gradient(135deg, #3b82f6, #60a5fa);
  color: white;
  font-size: 0.65rem;
  font-weight: 600;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.recently-finished-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  width: 420px;
  max-height: 500px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  z-index: 1000;
  display: none;
  overflow: hidden;
}

.recently-finished-menu.visible {
  display: block;
  animation: dropdownSlide 0.15s ease-out;
}

.recently-finished-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(96, 165, 250, 0.15));
  border-bottom: 1px solid var(--border);
  font-weight: 500;
  font-size: 0.9rem;
}

.recently-finished-close {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: color 0.15s ease;
}

.recently-finished-close:hover {
  color: var(--text);
}

.recently-finished-list {
  max-height: 440px;
  overflow-y: auto;
}

.recently-finished-empty {
  padding: 24px;
  text-align: center;
  color: var(--muted);
  font-size: 0.85rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.recently-finished-empty .retry-btn {
  padding: 4px 12px;
  font-size: 0.75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--foreground);
  cursor: pointer;
}

.recently-finished-empty .retry-btn:hover {
  background: var(--glass);
  border-color: var(--accent-blue);
}

.recently-finished-loading {
  padding: 32px 24px;
  text-align: center;
  color: var(--muted);
  font-size: 0.85rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.recently-finished-loading .loading-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--border);
  border-top-color: var(--accent-blue);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.recently-finished-item {
  display: flex;
  flex-direction: column;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.15s ease;
}

.recently-finished-item:last-child {
  border-bottom: none;
}

.recently-finished-item:hover {
  background: var(--glass);
}

.recently-finished-item.completed {
  border-left: 2px solid rgba(127, 165, 255, 0.4);
}

.recently-finished-item.failed {
  border-left: 2px solid rgba(255, 126, 182, 0.5);
}

.recently-finished-item.cancelled {
  border-left: 2px solid rgba(240, 136, 62, 0.5);
}

.recently-finished-item.stopped {
  border-left: 2px solid rgba(245, 158, 11, 0.5);
}

.finished-item-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.finished-item-status {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.finished-item-status.completed {
  background: var(--accent-2);
}

.finished-item-status.failed {
  background: var(--accent-hot);
}

.finished-item-status.cancelled {
  background: #f0883e;
}

.finished-item-status.stopped {
  background: #f59e0b;
}

.finished-item-project {
  font-weight: 500;
  font-size: 0.85rem;
  color: var(--text);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.finished-item-time {
  font-size: 0.7rem;
  color: var(--muted);
}

.finished-item-iterations {
  font-size: 0.65rem;
  color: var(--accent);
  background: rgba(88, 166, 255, 0.15);
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: auto;
  margin-right: 6px;
  font-weight: 500;
}

.finished-item-task {
  font-size: 0.8rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 8px;
}

.finished-item-actions {
  display: flex;
  gap: 6px;
}

.finished-item-actions button {
  padding: 4px 10px;
  font-size: 0.7rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.15s ease;
}

.finished-item-actions .view-btn {
  background: linear-gradient(135deg, #3b82f6, #60a5fa);
  color: white;
}

.finished-item-actions .view-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.finished-item-actions .remove-btn {
  background: var(--glass);
  color: var(--muted);
  border: 1px solid var(--border);
}

.finished-item-actions .remove-btn:hover {
  background: rgba(248, 81, 73, 0.15);
  color: #f85149;
  border-color: #f85149;
}

/* ========================================
   Active Orchestrations Right Panel
   ======================================== */
.active-orchestrations-panel {
  display: none;
  flex-direction: column;
  background: var(--surface-contrast);
  border-left: 1px solid var(--border);
  overflow: hidden;
}

.active-orchestrations-panel.visible {
  display: flex;
}

.active-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: linear-gradient(135deg, rgba(16, 163, 127, 0.15), rgba(124, 58, 237, 0.15));
  border-bottom: 1px solid var(--border);
}

.active-panel-header h3 {
  font-size: 0.9rem;
  font-weight: 600;
  margin: 0;
  color: var(--text);
}

.active-panel-close {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: color 0.15s ease;
}

.active-panel-close:hover {
  color: var(--text);
}

.active-panel-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}

.active-panel-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 32px 16px;
  text-align: center;
  color: var(--muted);
  font-size: 0.8rem;
}

.active-panel-item {
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.active-panel-item:hover {
  background: var(--glass-strong);
  border-color: var(--accent-purple);
}

.active-panel-item.selected {
  background: var(--glass-strong);
  border-color: var(--accent-purple);
  box-shadow: 0 0 0 1px var(--accent-purple);
}

.active-panel-item.running {
  border-left: 2px solid rgba(112, 217, 191, 0.6);
}

.active-panel-item.paused {
  border-left: 2px solid rgba(245, 158, 11, 0.5);
}

.active-item-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.active-item-status {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  animation: statusPulse 1.5s ease-in-out infinite;
}

.active-item-status.paused {
  background: #f59e0b;
  animation: none;
}

.active-item-project {
  font-weight: 500;
  font-size: 0.85rem;
  color: var(--text);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.active-item-agent {
  font-size: 0.65rem;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 500;
  text-transform: capitalize;
}

.active-item-agent.codex {
  background: rgba(16, 163, 127, 0.2);
  color: #10a37f;
}

.active-item-agent.claude {
  background: rgba(124, 58, 237, 0.2);
  color: #a78bfa;
}

.active-item-agent.aider {
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
}

.active-item-agent.gemini {
  background: rgba(59, 130, 246, 0.2);
  color: #60a5fa;
}

.active-item-task {
  font-size: 0.75rem;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 8px;
}

.active-item-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.7rem;
  color: var(--muted);
  margin-bottom: 8px;
}

.active-item-duration {
  font-family: monospace;
  color: var(--accent);
}

.active-item-actions {
  display: flex;
  gap: 4px;
}

.active-item-actions button {
  flex: 1;
  padding: 4px 8px;
  font-size: 0.65rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.15s ease;
}

.active-item-actions .view-btn {
  background: linear-gradient(135deg, #10a37f, #7c3aed);
  color: white;
}

.active-item-actions .view-btn:hover {
  transform: translateY(-1px);
}

.active-item-actions .end-btn {
  background: #f59e0b;
  color: white;
}

.active-item-actions .cancel-btn {
  background: #dc2626;
  color: white;
}

.active-item-actions .resume-btn {
  background: linear-gradient(135deg, #10a37f, #7c3aed);
  color: white;
}

.active-item-actions .resume-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.3);
}

/* Active Panel Badge in Header */
.active-panel-btn {
  position: relative;
}

.active-panel-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: linear-gradient(135deg, #10a37f, #7c3aed);
  color: white;
  font-size: 0.65rem;
  font-weight: 600;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: badgePulse 2s ease-in-out infinite;
}

/* ========================================
   Active Prompts Badge & Context Preview
   ======================================== */
.active-prompts-badge {
  font-size: 0.75rem;
  color: var(--accent);
  background: rgba(127, 165, 255, 0.15);
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  border: 1px solid rgba(127, 165, 255, 0.3);
}

.context-preview-toggle {
  font-size: 0.75rem;
  padding: 0.2rem 0.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s ease;
}

.context-preview-toggle:hover {
  background: var(--glass);
  color: var(--text);
  border-color: var(--accent);
}

.context-preview-panel {
  margin-top: 0.5rem;
  background: var(--surface-contrast);
  border: 1px solid var(--border);
  border-radius: 6px;
  max-height: 200px;
  overflow: hidden;
}

.context-preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.4rem 0.6rem;
  background: var(--glass);
  border-bottom: 1px solid var(--border);
  font-size: 0.75rem;
  color: var(--muted);
}

.context-preview-header button {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 1rem;
  padding: 0;
  line-height: 1;
}

.context-preview-header button:hover {
  color: var(--text);
}

.context-preview-panel pre {
  margin: 0;
  padding: 0.5rem;
  font-size: 0.7rem;
  line-height: 1.4;
  color: var(--text-secondary);
  overflow-y: auto;
  max-height: 150px;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ========================================
   Prompt History Overlay
   ======================================== */
.prompt-history-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(4px);
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.prompt-history-overlay.open {
  display: flex;
}

.prompt-history-container {
  width: 100%;
  max-width: 1200px;
  max-height: 90vh;
  background: var(--bg);
  border-radius: 12px;
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Two-column layout: main content + context sidebar */
.prompt-history-body {
  display: flex;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}

.prompt-history-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

.prompt-history-sidebar {
  width: 320px;
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  background: var(--surface);
}

.prompt-history-sidebar.collapsed {
  width: 40px;
}

.prompt-history-sidebar.collapsed .sidebar-content {
  display: none;
}

.sidebar-toggle {
  padding: 0.5rem;
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 1rem;
  border-bottom: 1px solid var(--border);
}

.sidebar-toggle:hover {
  color: var(--text);
  background: var(--glass);
}

.sidebar-content {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
}

.sidebar-title {
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: var(--text);
}

/* Override prompt-context-body styles when in sidebar */
.prompt-history-sidebar .prompt-context-body {
  max-height: none;
  flex: 1;
  margin-top: 0.75rem;
}

.prompt-history-sidebar .prompt-context-meta {
  font-size: 0.75rem;
  color: var(--muted);
}

.prompt-history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.prompt-history-header h2 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
}

.prompt-history-close {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  line-height: 1;
}

.prompt-history-close:hover {
  color: var(--text);
}

.prompt-history-toolbar {
  display: flex;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface-contrast);
}

.prompt-context-panel {
  padding: 0.75rem 1.5rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.prompt-context-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
}

.prompt-context-toggle {
  padding: 0.25rem 0.6rem;
  background: var(--surface-contrast);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 0.75rem;
  cursor: pointer;
}

.prompt-context-toggle:hover {
  background: var(--surface);
}

.prompt-context-meta {
  margin-top: 0.4rem;
  font-size: 0.75rem;
  color: var(--muted);
}

.prompt-context-body {
  margin-top: 0.5rem;
  padding: 0.6rem;
  background: var(--surface-contrast);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--text-secondary);
  white-space: pre-wrap;
  max-height: 200px;
  overflow-y: auto;
}

.relay-diff-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10010;
  padding: 2rem;
}

.relay-diff-modal.open {
  display: flex;
}

.relay-diff-content {
  width: min(1100px, 95vw);
  max-height: 90vh;
  background: var(--bg);
  border-radius: 12px;
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.relay-diff-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.relay-diff-close {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 1.5rem;
  cursor: pointer;
}

.relay-diff-close:hover {
  color: var(--text);
}

.relay-diff-meta {
  padding: 0.75rem 1.5rem;
  font-size: 0.8rem;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  background: var(--surface-contrast);
}

.relay-diff-body {
  margin: 0;
  padding: 1rem 1.5rem;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--text);
  background: var(--bg);
  overflow-y: auto;
  white-space: pre-wrap;
}

.prompt-search-input {
  flex: 1;
  padding: 0.5rem 0.75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 0.85rem;
}

.prompt-filter-select {
  padding: 0.5rem 0.75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 0.85rem;
  cursor: pointer;
}

.prompt-add-btn {
  padding: 0.5rem 1rem;
  background: var(--accent);
  border: none;
  border-radius: 6px;
  color: white;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}

.prompt-add-btn:hover {
  opacity: 0.9;
}

.prompt-history-grid-header {
  display: grid;
  grid-template-columns: 40px 40px 100px 70px 1fr 80px 100px;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: var(--surface-contrast);
  border-bottom: 1px solid var(--border);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  position: sticky;
  top: 0;
  z-index: 1;
}

.prompt-history-grid-wrapper {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.prompt-history-grid {
  padding: 0.5rem;
}

.prompt-item {
  display: grid;
  grid-template-columns: 40px 40px 100px 70px 1fr 80px 100px;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  align-items: center;
  border-radius: 6px;
  transition: background 0.15s;
}

/* Responsive grid for smaller screens */
@media (max-width: 900px) {
  .prompt-history-sidebar {
    display: none;
  }

  .prompt-history-grid-header,
  .prompt-item {
    grid-template-columns: 40px 40px 80px 1fr 80px;
  }

  .prompt-type-col {
    display: none;
  }

  .prompt-date-col {
    font-size: 0.7rem;
  }
}

@media (max-width: 600px) {
  .prompt-history-grid-header,
  .prompt-item {
    grid-template-columns: 40px 1fr 70px;
  }

  .prompt-date-col,
  .prompt-type-col,
  .prompt-select-col {
    display: none;
  }
}

.prompt-item:hover {
  background: var(--glass);
}

.prompt-item.inactive {
  opacity: 0.6;
  background: var(--surface-contrast);
}

.prompt-item.inactive .prompt-active-badge {
  background: var(--muted);
}

.prompt-item.selected {
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid var(--accent);
}

/* Bulk selection column */
.prompt-select-col {
  text-align: center;
}

.prompt-select-checkbox {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--accent);
}

/* Active status with visual badge */
.prompt-active-col {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
}

.prompt-active-toggle {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--accent);
}

.prompt-active-badge {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
}

.prompt-item.inactive .prompt-active-badge {
  background: #6b7280;
}

/* Bulk actions toolbar */
.prompt-bulk-actions {
  display: none;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: rgba(59, 130, 246, 0.1);
  border-bottom: 1px solid var(--accent);
}

.prompt-bulk-actions.visible {
  display: flex;
}

.bulk-count {
  font-size: 0.85rem;
  color: var(--text);
  font-weight: 500;
}

.bulk-btn {
  padding: 0.35rem 0.75rem;
  font-size: 0.8rem;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
}

.bulk-btn:hover {
  background: var(--glass);
}

.bulk-btn.danger:hover {
  background: #ef4444;
  color: white;
  border-color: #ef4444;
}

/* Search highlighting */
.prompt-text-col .search-highlight {
  background: rgba(251, 191, 36, 0.4);
  border-radius: 2px;
  padding: 0 2px;
}

/* Hover preview tooltip */
.prompt-text-col {
  position: relative;
}

.prompt-text-preview {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 100;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.75rem;
  max-width: 400px;
  max-height: 200px;
  overflow-y: auto;
  font-size: 0.85rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.prompt-item:hover .prompt-text-preview {
  display: block;
}

.prompt-date-col {
  font-size: 0.8rem;
  color: var(--muted);
}

.prompt-type-col {
  text-align: center;
}

.prompt-type-badge {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  font-size: 0.7rem;
  font-weight: 500;
  border-radius: 4px;
  text-transform: uppercase;
}

.prompt-type-initial {
  background: #10b981;
  color: white;
}

.prompt-type-injected {
  background: #8b5cf6;
  color: white;
}

.prompt-type-manual {
  background: #f59e0b;
  color: white;
}

.prompt-type-continuation {
  background: #3b82f6;
  color: white;
}

.prompt-text-col {
  font-size: 0.85rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: relative;
  cursor: default;
}

.prompt-text-truncated {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.prompt-status-col {
  text-align: center;
}

.prompt-status-badge {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  font-size: 0.7rem;
  font-weight: 500;
  border-radius: 4px;
}

.status-success {
  background: #10b981;
  color: white;
}

.status-failed {
  background: #ef4444;
  color: white;
}

.status-cancelled {
  background: #6b7280;
  color: white;
}

.status-running {
  background: #3b82f6;
  color: white;
}

.status-none {
  background: var(--surface);
  color: var(--muted);
  border: 1px solid var(--border);
}

.prompt-actions-col {
  display: flex;
  gap: 0.25rem;
  justify-content: flex-end;
}

.prompt-view-btn,
.prompt-delete-btn {
  padding: 0.25rem 0.5rem;
  font-size: 0.7rem;
  border-radius: 4px;
  cursor: pointer;
  border: none;
}

.prompt-view-btn {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
}

.prompt-view-btn:hover {
  background: var(--glass);
}

.prompt-delete-btn {
  background: transparent;
  color: var(--muted);
}

.prompt-delete-btn:hover {
  background: #ef4444;
  color: white;
}

.prompt-loading,
.prompt-empty,
.prompt-error {
  text-align: center;
  padding: 3rem;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

.prompt-loading::before {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spinnerRotate 0.8s linear infinite;
}

.prompt-error {
  color: #ef4444;
}

/* Prompt History Link Button (in relay form) */
.prompt-history-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.75rem;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--muted);
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.15s;
}

.prompt-history-link:hover {
  background: var(--glass);
  color: var(--text);
  border-color: var(--accent);
}

.prompt-history-link svg {
  opacity: 0.7;
}

/* Add Instruction Modal */
.add-instruction-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 10001;
  display: none;
  align-items: center;
  justify-content: center;
}

.add-instruction-modal.open {
  display: flex;
}

.add-instruction-content {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.5rem;
  width: 100%;
  max-width: 500px;
}

.add-instruction-content h3 {
  margin: 0 0 0.5rem 0;
  font-size: 1rem;
}

/* ========================================
   Scribe Document Styles
   ======================================== */

/* Scribe preview container */
.scribe-preview-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

.scribe-preview-toolbar {
  padding: 0.5rem 1rem;
  background: var(--surface-contrast);
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.scribe-preview-toolbar .btn-secondary,
.scribe-preview-toolbar .btn-primary {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.75rem;
  font-size: 0.8rem;
}

.scribe-preview-frame {
  flex: 1;
  border: none;
  background: white;
}

/* Scribe editor container */
.scribe-editor-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.scribe-editor-toolbar {
  padding: 0.75rem 1rem;
  background: var(--surface-contrast);
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.scribe-editor-content {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
}

.editor-section {
  margin-bottom: 1rem;
  padding: 1rem;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 6px;
}

.editor-section:hover {
  border-color: var(--accent);
}

.section-content {
  width: 100%;
  padding: 0.5rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  resize: vertical;
  font-family: inherit;
}

.section-content:focus {
  outline: none;
  border-color: var(--accent);
}

/* Document status badges */
.status-draft {
  background: var(--glass);
  color: var(--muted);
}

.status-published {
  background: var(--accent-green);
  color: white;
}

/* Loading spinner for document preview */
.loading-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid var(--border);
  border-top: 2px solid var(--accent);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ========================================
   Task Scheduler Styles
   ======================================== */

/* Queue Stats */
.queued-tasks-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1rem;
}

.queue-item {
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.75rem;
  transition: all 0.15s ease;
}

.queue-item:hover {
  border-color: var(--accent);
}

.queue-item-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.queue-status {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 12px;
}

.queue-status.status-pending { background: var(--muted); color: white; }
.queue-status.status-ready { background: var(--accent-green); color: white; }
.queue-status.status-starting { background: var(--accent); color: white; }
.queue-status.status-running { background: var(--accent); color: white; animation: pulse 1s infinite; }
.queue-status.status-completed { background: var(--accent-green); color: white; }
.queue-status.status-failed { background: var(--accent-hot); color: white; }
.queue-status.status-cancelled { background: var(--muted); color: white; }

.queue-project {
  font-weight: 500;
  color: var(--text);
}

.queue-priority {
  font-size: 0.75rem;
  padding: 2px 6px;
  background: var(--glass-strong);
  border-radius: 4px;
  color: var(--muted);
}

.queue-pipeline {
  font-size: 0.75rem;
  padding: 2px 6px;
  background: var(--accent);
  border-radius: 4px;
  color: white;
}

.queue-task {
  color: var(--text-dim);
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
}

.queue-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.queue-time {
  font-size: 0.75rem;
  color: var(--muted);
}

/* Pipeline Templates */
.pipeline-templates {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.template-card {
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem;
  transition: all 0.15s ease;
}

.template-card:hover {
  border-color: var(--accent);
}

.template-name {
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.5rem;
}

.template-description {
  font-size: 0.85rem;
  color: var(--text-dim);
  margin-bottom: 0.75rem;
}

.template-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-bottom: 0.75rem;
  font-size: 0.75rem;
  color: var(--muted);
}

.template-step {
  background: var(--glass-strong);
  padding: 2px 6px;
  border-radius: 4px;
}

/* Pipelines List */
.pipelines-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1rem;
}

.pipeline-card {
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem;
  transition: all 0.15s ease;
}

.pipeline-card:hover {
  border-color: var(--accent);
}

.pipeline-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.pipeline-name {
  font-weight: 600;
  color: var(--text);
}

.pipeline-status {
  font-size: 0.75rem;
  padding: 2px 8px;
  border-radius: 4px;
  text-transform: uppercase;
}

.pipeline-status.status-draft { background: var(--muted); color: white; }
.pipeline-status.status-pending { background: var(--muted); color: white; }
.pipeline-status.status-running { background: var(--accent); color: white; }
.pipeline-status.status-paused { background: #f59e0b; color: white; }
.pipeline-status.status-completed { background: var(--accent-green); color: white; }
.pipeline-status.status-failed { background: var(--accent-hot); color: white; }
.pipeline-status.status-cancelled { background: var(--muted); color: white; }

.pipeline-description {
  color: var(--text-dim);
  font-size: 0.85rem;
  margin-bottom: 0.75rem;
}

.pipeline-progress {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.progress-bar {
  flex: 1;
  height: 6px;
  background: var(--glass-strong);
  border-radius: 3px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: var(--accent-green);
  transition: width 0.3s ease;
}

.progress-text {
  font-size: 0.75rem;
  color: var(--muted);
}

.pipeline-actions {
  display: flex;
  gap: 0.5rem;
}

/* Pipeline Modal Steps */
.pipeline-steps {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1rem;
}

.pipeline-step {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 0.75rem;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 6px;
}

.pipeline-step.step-completed {
  border-color: var(--accent-green);
  background: rgba(16, 185, 129, 0.05);
}

.pipeline-step.step-running {
  border-color: var(--accent);
  background: rgba(139, 92, 246, 0.05);
}

.pipeline-step.step-failed {
  border-color: var(--accent-hot);
  background: rgba(239, 68, 68, 0.05);
}

.step-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--glass-strong);
  border-radius: 50%;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text);
  flex-shrink: 0;
}

.step-content {
  flex: 1;
}

.step-name {
  font-weight: 500;
  color: var(--text);
  margin-bottom: 0.25rem;
}

.step-task {
  font-size: 0.85rem;
  color: var(--text-dim);
  margin-bottom: 0.25rem;
}

.step-meta {
  display: flex;
  gap: 1rem;
  font-size: 0.75rem;
  color: var(--muted);
}

.step-status {
  display: flex;
  align-items: center;
  font-size: 18px;
  color: var(--muted);
}

/* Section description text */
.section-description {
  color: var(--text-dim);
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
}

/* Modal footer buttons */
.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 1rem;
  border-top: 1px solid var(--border);
  margin-top: 1rem;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* ========================================
   Pipeline Step Inputs (Orchestration Form)
   ======================================== */
.pipeline-steps-list {
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.pipeline-step-input {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 6px;
}

.pipeline-step-input .step-number {
  width: 24px;
  height: 24px;
  min-width: 24px;
  font-size: 0.75rem;
  background: var(--accent);
  color: white;
}

.step-task-input {
  flex: 1;
  background: var(--glass-strong);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.5rem 0.75rem;
  color: var(--text);
  font-size: 0.85rem;
  font-family: inherit;
}

.step-task-input:focus {
  outline: none;
  border-color: var(--accent);
}

.step-task-input::placeholder {
  color: var(--muted);
}

.step-remove-btn {
  width: 24px;
  height: 24px;
  min-width: 24px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  transition: all 0.15s ease;
}

.step-remove-btn:hover {
  background: var(--accent-hot);
  border-color: var(--accent-hot);
  color: white;
}

/* Schedule Options Row */
#schedule-options {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

#schedule-options input[type="datetime-local"] {
  background: var(--glass-strong);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.5rem 0.75rem;
  color: var(--text);
  font-size: 0.85rem;
  font-family: inherit;
}

#schedule-options input[type="datetime-local"]:focus {
  outline: none;
  border-color: var(--accent);
}

/* Pipeline Steps Row in Form */
#pipeline-steps-row {
  padding: 0.75rem;
  background: var(--glass);
  border-radius: 6px;
  border: 1px solid var(--border);
}

#pipeline-steps-row label {
  font-size: 0.85rem;
  color: var(--text-dim);
}

#pipeline-steps-row button {
  padding: 0.25rem 0.75rem;
  background: var(--accent);
  border: none;
  border-radius: 4px;
  color: white;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

#pipeline-steps-row button:hover {
  background: var(--accent-hover);
}

/* ========================================
   Scheduled Tasks in Active Panel
   ======================================== */

/* Scheduled banner at top of item */
.active-item-scheduled-banner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.5rem;
  margin: -0.5rem -0.5rem 0.5rem -0.5rem;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(217, 119, 6, 0.1));
  border-bottom: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 6px 6px 0 0;
  font-size: 0.75rem;
}

.scheduled-icon {
  font-size: 0.9rem;
}

.scheduled-label {
  font-weight: 600;
  color: #f59e0b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.scheduled-time {
  color: var(--text);
  margin-left: auto;
}

/* Status indicator for scheduled items */
.active-item-status.scheduled {
  background: #f59e0b;
}

.active-item-status.ready {
  background: #22c55e;
  animation: pulse 1.5s infinite;
}

/* Scheduled item styling */
.active-panel-item.scheduled {
  border-color: rgba(245, 158, 11, 0.3);
}

.active-panel-item.scheduled:hover {
  border-color: #f59e0b;
  background: rgba(245, 158, 11, 0.05);
}

.active-panel-item.ready {
  border-color: rgba(34, 197, 94, 0.3);
}

.active-panel-item.ready:hover {
  border-color: #22c55e;
  background: rgba(34, 197, 94, 0.05);
}

/* Edit button styling */
.active-item-actions .edit-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.7rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.active-item-actions .edit-btn:hover {
  background: #f59e0b;
  border-color: #f59e0b;
  color: white;
}

/* Status indicator in conversation */
.status-indicator.scheduled {
  background: #f59e0b;
}

/* ========================================
   Token Budget Metrics Chip
   ======================================== */
.token-metrics-chip {
  position: relative;
  display: flex;
  align-items: center;
}

.token-metrics-content {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  font-size: 0.8rem;
}

.token-metrics-content:hover {
  background: var(--glass-strong);
  border-color: var(--accent-blue);
}

.token-icon {
  font-size: 0.9rem;
}

.token-value {
  font-weight: 500;
  color: var(--text);
  min-width: 32px;
}

.token-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--muted);
}

.token-status-dot.healthy {
  background: #10b981;
  box-shadow: 0 0 4px rgba(16, 185, 129, 0.5);
}

.token-status-dot.moderate {
  background: #f59e0b;
  box-shadow: 0 0 4px rgba(245, 158, 11, 0.5);
}

.token-status-dot.caution {
  background: #f97316;
  box-shadow: 0 0 4px rgba(249, 115, 22, 0.5);
}

.token-status-dot.critical {
  background: #ef4444;
  box-shadow: 0 0 4px rgba(239, 68, 68, 0.5);
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.budget-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 320px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  z-index: 1000;
  display: none;
}

.budget-dropdown.visible {
  display: block;
}

.budget-dropdown-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  font-size: 0.9rem;
}

.budget-dropdown-close {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.budget-dropdown-close:hover {
  color: var(--foreground);
}

.budget-details {
  padding: 16px;
  font-size: 0.85rem;
}

.budget-loading {
  text-align: center;
  color: var(--muted);
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.budget-loading::before {
  content: '';
  display: block;
  width: 14px;
  height: 14px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spinnerRotate 0.8s linear infinite;
}

.budget-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}

.budget-stat-row:last-child {
  border-bottom: none;
}

.budget-stat-label {
  color: var(--muted);
}

.budget-stat-value {
  font-weight: 500;
}

.budget-stat-value.healthy {
  color: #10b981;
}

.budget-stat-value.moderate {
  color: #f59e0b;
}

.budget-stat-value.caution {
  color: #f97316;
}

.budget-stat-value.critical {
  color: #ef4444;
}

.budget-recommendation {
  margin-top: 12px;
  padding: 10px;
  background: var(--glass);
  border-radius: 6px;
  font-size: 0.8rem;
  color: var(--text-dim);
}

.budget-controls {
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}

.budget-control-label {
  font-size: 0.75rem;
  color: var(--muted);
  margin-bottom: 8px;
}

.budget-buttons {
  display: flex;
  gap: 6px;
}

.budget-btn {
  flex: 1;
  padding: 6px 8px;
  font-size: 0.7rem;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  cursor: pointer;
  transition: all 0.15s ease;
}

.budget-btn:hover {
  background: var(--glass-strong);
  border-color: var(--accent-blue);
}

.budget-btn.active {
  background: var(--accent-blue);
  border-color: var(--accent-blue);
  color: white;
}

.budget-override-active {
  margin-top: 8px;
  padding: 8px;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 4px;
  font-size: 0.75rem;
  color: #10b981;
}

/* ============================================================
   Collapsible Code Blocks - Claude CLI style
   ============================================================ */

.code-block-wrapper {
  margin: 0.5rem 0;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border);
  transition: all 0.2s ease;
}

.code-block-wrapper:hover {
  border-color: var(--accent-purple);
}

.code-block-wrapper.expanded {
  background: rgba(0, 0, 0, 0.4);
}

.code-block-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.15), rgba(16, 163, 127, 0.1));
  cursor: pointer;
  user-select: none;
  transition: background 0.15s ease;
}

.code-block-header:hover {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.25), rgba(16, 163, 127, 0.15));
}

.code-block-icon {
  font-size: 1rem;
  flex-shrink: 0;
}

.code-block-language {
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--accent-purple);
  flex-shrink: 0;
}

.code-block-preview {
  flex: 1;
  font-size: 0.75rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
  opacity: 0.7;
}

.code-block-wrapper.expanded .code-block-preview {
  display: none;
}

.code-block-info {
  font-size: 0.7rem;
  color: var(--text-dim);
  flex-shrink: 0;
  padding: 0.15rem 0.4rem;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

.code-block-toggle {
  font-size: 0.7rem;
  color: var(--muted);
  flex-shrink: 0;
  width: 1rem;
  text-align: center;
  transition: transform 0.2s ease;
}

.code-block-wrapper.expanded .code-block-toggle {
  transform: rotate(0deg);
}

.code-block-copy {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0.25rem 0.4rem;
  border-radius: 4px;
  opacity: 0.6;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.code-block-copy:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.1);
}

.code-block-copy.copied {
  opacity: 1;
  color: #10b981;
}

.code-block-copy .copy-icon {
  font-size: 0.85rem;
}

.code-block-content {
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.code-block-wrapper.collapsed .code-block-content {
  display: none;
}

.code-block-wrapper.expanded .code-block-content {
  display: block;
}

.code-block-pre {
  margin: 0;
  padding: 0.75rem 1rem;
  overflow-x: auto;
  background: rgba(0, 0, 0, 0.2);
  border-top: 1px solid var(--border);
}

.code-block-pre code {
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
  font-size: 0.8rem;
  line-height: 1.6;
  color: #e4e4e7;
  white-space: pre;
  display: block;
}

/* Syntax highlighting colors (basic) */
.code-block-pre code .keyword {
  color: #c084fc;
}

.code-block-pre code .string {
  color: #86efac;
}

.code-block-pre code .comment {
  color: #71717a;
  font-style: italic;
}

.code-block-pre code .number {
  color: #fbbf24;
}

.code-block-pre code .function {
  color: #60a5fa;
}

/* Code block scrollbar styling */
.code-block-pre::-webkit-scrollbar {
  height: 6px;
}

.code-block-pre::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
}

.code-block-pre::-webkit-scrollbar-thumb {
  background: var(--glass-strong);
  border-radius: 3px;
}

.code-block-pre::-webkit-scrollbar-thumb:hover {
  background: var(--accent-purple);
}

/* Pending code block indicator (for streaming) */
.code-block-pending {
  margin: 0.5rem 0;
  padding: 0.5rem 0.75rem;
  background: rgba(124, 58, 237, 0.1);
  border: 1px dashed var(--accent-purple);
  border-radius: 8px;
  font-size: 0.75rem;
  color: var(--accent-purple);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.code-block-pending::before {
  content: '📝';
}

.code-block-pending .spinner {
  width: 12px;
  height: 12px;
  border: 2px solid var(--accent-purple);
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* ============================================================
   Collapsible Tool Blocks - Claude CLI Tool Call Style
   ============================================================ */

.tool-block-wrapper {
  margin: 0.5rem 0;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(16, 163, 127, 0.3);
  background: rgba(16, 163, 127, 0.05);
  transition: all 0.2s ease;
}

.tool-block-wrapper:hover {
  border-color: var(--accent);
}

.tool-block-wrapper.expanded {
  background: rgba(16, 163, 127, 0.1);
}

.tool-block-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  background: linear-gradient(135deg, rgba(16, 163, 127, 0.15), rgba(16, 163, 127, 0.05));
  user-select: none;
  transition: background 0.15s ease;
}

.tool-block-header:hover {
  background: linear-gradient(135deg, rgba(16, 163, 127, 0.25), rgba(16, 163, 127, 0.15));
}

.tool-block-icon {
  font-size: 1rem;
  flex-shrink: 0;
}

.tool-block-name {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--accent);
}

.tool-block-preview {
  font-size: 0.75rem;
  color: var(--muted);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0.7;
}

.tool-block-wrapper.expanded .tool-block-preview {
  display: none;
}

.tool-block-info {
  font-size: 0.7rem;
  color: var(--muted);
  padding: 0.15rem 0.4rem;
  background: rgba(16, 163, 127, 0.1);
  border-radius: 4px;
  flex-shrink: 0;
}

.tool-block-toggle {
  font-size: 0.7rem;
  color: var(--muted);
  transition: transform 0.2s ease;
}

.tool-block-wrapper.expanded .tool-block-toggle {
  transform: rotate(0deg);
}

.tool-block-content {
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.tool-block-wrapper.collapsed .tool-block-content {
  display: none;
}

.tool-block-wrapper.expanded .tool-block-content {
  display: block;
}

.tool-block-pre {
  margin: 0;
  padding: 0.75rem;
  font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', 'Menlo', 'Consolas', monospace;
  font-size: 0.75rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  background: rgba(0, 0, 0, 0.3);
  color: rgba(255, 255, 255, 0.85);
  max-height: 300px;
  overflow-y: auto;
}

/* Tool block pending indicator */
.tool-block-pending {
  margin: 0.5rem 0;
  padding: 0.5rem 0.75rem;
  background: rgba(16, 163, 127, 0.1);
  border: 1px dashed var(--accent);
  border-radius: 8px;
  font-size: 0.75rem;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.tool-block-pending::before {
  content: '🔧';
}

.tool-block-pending .spinner {
  width: 12px;
  height: 12px;
  border: 2px solid var(--accent);
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* Tool Result Block Styles */
.tool-result-wrapper {
  margin: 0.5rem 0;
  border-radius: 8px;
  background: rgba(34, 197, 94, 0.08);
  border: 1px solid rgba(34, 197, 94, 0.25);
  overflow: hidden;
  transition: border-color 0.2s ease;
}

.tool-result-wrapper:hover {
  border-color: rgba(34, 197, 94, 0.4);
}

.tool-result-wrapper.expanded {
  border-color: rgba(34, 197, 94, 0.5);
}

.tool-result-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  background: rgba(34, 197, 94, 0.12);
  transition: background 0.2s ease;
  user-select: none;
}

.tool-result-header:hover {
  background: rgba(34, 197, 94, 0.18);
}

.tool-result-icon {
  font-size: 0.9rem;
  flex-shrink: 0;
}

.tool-result-name {
  font-weight: 600;
  font-size: 0.75rem;
  color: #22c55e;
}

.tool-result-preview {
  flex: 1;
  font-size: 0.7rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-left: 0.5rem;
}

.tool-result-wrapper.expanded .tool-result-preview {
  display: none;
}

.tool-result-info {
  font-size: 0.65rem;
  color: var(--muted);
  padding: 0.15rem 0.4rem;
  background: rgba(34, 197, 94, 0.15);
  border-radius: 4px;
  flex-shrink: 0;
}

.tool-result-toggle {
  color: var(--muted);
  font-size: 0.65rem;
  transition: transform 0.2s ease;
}

.tool-result-wrapper.expanded .tool-result-toggle {
  transform: rotate(90deg);
}

.tool-result-content {
  border-top: 1px solid rgba(34, 197, 94, 0.2);
}

.tool-result-wrapper.collapsed .tool-result-content {
  display: none;
}

.tool-result-wrapper.expanded .tool-result-content {
  display: block;
}

.tool-result-pre {
  margin: 0;
  padding: 0.75rem;
  font-size: 0.7rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace;
  background: rgba(0, 0, 0, 0.15);
  max-height: 300px;
  overflow-y: auto;
  color: var(--text-secondary);
}

.tool-result-pending {
  margin: 0.5rem 0;
  padding: 0.5rem 0.75rem;
  background: rgba(34, 197, 94, 0.1);
  border: 1px dashed #22c55e;
  border-radius: 8px;
  font-size: 0.75rem;
  color: #22c55e;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.tool-result-pending::before {
  content: '📤';
}

.tool-result-pending .spinner {
  width: 12px;
  height: 12px;
  border: 2px solid #22c55e;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* Data Block (JSON/config dumps) */
.data-block-wrapper {
  margin: 0.5rem 0;
  border-radius: 6px;
  border: 1px solid rgba(251, 191, 36, 0.3);
  background: rgba(251, 191, 36, 0.05);
  overflow: hidden;
}

.data-block-wrapper:hover {
  border-color: rgba(251, 191, 36, 0.5);
}

.data-block-wrapper.expanded {
  border-color: rgba(251, 191, 36, 0.4);
}

.data-block-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.75rem;
  cursor: pointer;
  background: rgba(251, 191, 36, 0.08);
  user-select: none;
  transition: background 0.15s ease;
}

.data-block-header:hover {
  background: rgba(251, 191, 36, 0.12);
}

.data-block-icon {
  font-size: 0.85rem;
  flex-shrink: 0;
}

.data-block-name {
  font-weight: 600;
  color: #fbbf24;
  font-size: 0.8rem;
}

.data-block-preview {
  color: #8b949e;
  font-size: 0.75rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  font-family: 'SF Mono', monospace;
}

.data-block-wrapper.expanded .data-block-preview {
  display: none;
}

.data-block-info {
  color: #6e7681;
  font-size: 0.7rem;
  flex-shrink: 0;
  padding: 0.15rem 0.4rem;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

.data-block-toggle {
  color: #fbbf24;
  font-size: 0.7rem;
  flex-shrink: 0;
}

.data-block-wrapper.expanded .data-block-toggle {
  color: #fde047;
}

.data-block-content {
  border-top: 1px solid rgba(251, 191, 36, 0.2);
}

.data-block-wrapper.collapsed .data-block-content {
  display: none;
}

.data-block-wrapper.expanded .data-block-content {
  display: block;
}

.data-block-pre {
  margin: 0;
  padding: 0.75rem;
  background: rgba(0, 0, 0, 0.2);
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 0.75rem;
  line-height: 1.5;
  color: #c9d1d9;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

.data-block-pending {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.75rem;
  background: rgba(251, 191, 36, 0.1);
  border-radius: 6px;
  margin: 0.25rem 0;
  font-size: 0.75rem;
  color: #fbbf24;
}

.data-block-pending .spinner {
  width: 12px;
  height: 12px;
  border: 2px solid #fbbf24;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* Terminal output improvements for better readability */
/* Note: Base styles are in earlier section, these override for enhanced readability */

.terminal-output .terminal-line {
  display: block;
  padding: 0.25rem 0;
  max-width: 100%;
  line-height: 1.6;
}

/* Improve readability of prose text */
.terminal-output .terminal-line:not(.terminal-injection):not(.terminal-line-empty) {
  /* Subtle left border for text content helps distinguish from code/tool output */
  padding-left: 0.5rem;
}

/* Empty lines should have substantial height for visual separation */
.terminal-output .terminal-line-empty {
  min-height: 1.25rem;
  display: block;
}

/* Text paragraph grouping - consecutive text lines with visual separation */
.terminal-output .text-paragraph {
  margin: 0.5rem 0;
  padding: 0.5rem;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 4px;
  border-left: 2px solid rgba(88, 166, 255, 0.2);
}

.terminal-output .text-paragraph .terminal-line {
  padding: 0.1rem 0;
}

/* Add spacing between different content types */
.terminal-output .code-block-wrapper,
.terminal-output .tool-block-wrapper,
.terminal-output .tool-result-wrapper,
.terminal-output .data-block-wrapper {
  margin: 1.25rem 0;
}

.terminal-output .code-block-wrapper:first-child,
.terminal-output .tool-block-wrapper:first-child,
.terminal-output .tool-result-wrapper:first-child,
.terminal-output .data-block-wrapper:first-child {
  margin-top: 0.75rem;
}

/* Better separation after prose text before code/tool blocks */
.terminal-output .terminal-line + .code-block-wrapper,
.terminal-output .terminal-line + .tool-block-wrapper,
.terminal-output .terminal-line + .tool-result-wrapper,
.terminal-output .terminal-line + .data-block-wrapper {
  margin-top: 1.25rem;
}

/* Better separation after blocks before prose text */
.terminal-output .code-block-wrapper + .terminal-line,
.terminal-output .tool-block-wrapper + .terminal-line,
.terminal-output .tool-result-wrapper + .terminal-line,
.terminal-output .data-block-wrapper + .terminal-line {
  margin-top: 1rem;
  padding-top: 0.5rem;
}

/* Consecutive blocks should have smaller spacing */
.terminal-output .code-block-wrapper + .code-block-wrapper,
.terminal-output .tool-block-wrapper + .tool-block-wrapper,
.terminal-output .tool-result-wrapper + .tool-result-wrapper,
.terminal-output .tool-block-wrapper + .tool-result-wrapper,
.terminal-output .tool-result-wrapper + .tool-block-wrapper {
  margin-top: 0.5rem;
}

/* ============================================================
   System Health & Management Styles
   ============================================================ */

.system-health-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.75rem;
}

.health-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.75rem;
}

.health-card-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.health-icon {
  font-size: 1rem;
}

.health-title {
  font-weight: 600;
  font-size: 0.85rem;
}

.health-card-body {
  font-size: 0.8rem;
}

.health-detail {
  color: var(--muted);
  font-size: 0.75rem;
  margin-top: 0.25rem;
}

/* Server Info Styles */
.server-info-category {
  margin-bottom: 1rem;
  padding: 0.75rem;
  background: var(--surface);
  border-radius: 6px;
}

.server-info-items {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.server-info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

.server-info-key {
  font-size: 0.85rem;
  color: var(--muted);
  min-width: 100px;
}

.server-info-value {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex: 1;
}

.server-info-input {
  flex: 1;
  min-width: 150px;
}

.server-info-input.changed {
  border-color: var(--warning) !important;
  background: rgba(234, 179, 8, 0.1);
}

.server-info-delete {
  padding: 0.25rem 0.5rem !important;
  min-width: auto !important;
  color: var(--accent-hot) !important;
  opacity: 0.5;
}

.server-info-delete:hover {
  opacity: 1;
}

/* Shared State Viewer Styles */
.shared-state-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 300px;
  overflow-y: auto;
}

.shared-state-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  font-size: 0.8rem;
}

.shared-state-item.expired {
  opacity: 0.5;
  border-color: var(--accent-hot);
}

.shared-state-header {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 0.25rem;
}

.shared-state-project {
  font-weight: 600;
  color: var(--accent);
}

.shared-state-type {
  background: var(--accent-purple);
  color: white;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  font-size: 0.7rem;
}

.shared-state-agent {
  color: var(--muted);
  font-size: 0.75rem;
}

.shared-state-body {
  color: var(--text);
  word-break: break-word;
}

.shared-state-meta {
  color: var(--muted);
  font-size: 0.7rem;
  margin-top: 0.25rem;
}

/* Database Management Styles */
.db-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

.db-stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem;
  text-align: center;
}

.db-stat-value {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--accent);
}

.db-stat-label {
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 0.25rem;
}

.db-path {
  word-break: break-all;
  font-family: monospace;
}

/* Setup Wizard Styles */
.setup-wizard h4 {
  margin-bottom: 1rem;
  color: var(--text);
}

#setup-steps {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.setup-step {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  background: var(--surface);
  border-radius: 6px;
}

.setup-step-icon {
  font-size: 1rem;
}

.setup-step-name {
  font-weight: 500;
  flex: 1;
}

.setup-step-status {
  font-size: 0.8rem;
}

/* Settings value states */
.settings-value.warning {
  color: var(--warning);
}

/* ============================================================
   Hook Event Styles - Real-time tool call display
   ============================================================ */

.hook-events-panel {
  background: var(--surface);
  border-radius: 8px;
  padding: 0.75rem;
  margin-bottom: 1rem;
}

.hook-events-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
}

.hook-events-title {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text);
}

.hook-events-count {
  font-size: 0.75rem;
  color: var(--muted);
  padding: 0.15rem 0.5rem;
  background: var(--background);
  border-radius: 10px;
}

.hook-events-list {
  max-height: 200px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.hook-event {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.5rem;
  font-size: 0.8rem;
  border-radius: 4px;
  background: var(--background);
  transition: background 0.15s ease;
}

.hook-event:hover {
  background: rgba(var(--accent-rgb), 0.1);
}

.hook-event-pretooluse {
  border-left: 2px solid #f59e0b;
}

.hook-event-posttooluse {
  border-left: 2px solid #22c55e;
}

.hook-event-stop {
  border-left: 2px solid #6366f1;
}

.hook-event-icon {
  font-size: 0.9rem;
  flex-shrink: 0;
}

.hook-event-name {
  font-weight: 500;
  color: var(--text);
  min-width: 60px;
}

.hook-event-preview {
  flex: 1;
  color: var(--muted);
  font-size: 0.75rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hook-event-status {
  font-size: 0.85rem;
  flex-shrink: 0;
}

.hook-event-status.success {
  color: #22c55e;
}

.hook-event-status.error {
  color: #ef4444;
}

.hook-event-status.pending {
  color: #f59e0b;
}

.hook-event-duration {
  font-size: 0.7rem;
  color: var(--muted);
  min-width: 45px;
  text-align: right;
}

.hook-event-time {
  font-size: 0.65rem;
  color: var(--muted);
  opacity: 0.7;
}

/* Tool summary stats */
.tool-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border);
}

.tool-summary-item {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.5rem;
  background: var(--background);
  border-radius: 4px;
  font-size: 0.75rem;
}

.tool-summary-icon {
  font-size: 0.8rem;
}

.tool-summary-count {
  font-weight: 600;
  color: var(--accent);
}

.tool-summary-name {
  color: var(--muted);
}