/* CoderFlow Web UI - Minimal control panel styling */

:root {
  --color-background: #e8ecf3;
  --color-surface: #ffffff;
  --color-surface-muted: #eef1f6;
  --color-border: #d9deeb;
  --color-text: #1f2a44;
  --color-text-muted: #5a6480;
  --color-text-secondary: #4b5563;
  --color-accent: #3f72ff;
  --color-accent-dark: #3158c9;
  --color-accent-rgb: 63, 114, 255;
  --color-success: #2eb67d;
  --color-warning: #f4b740;
  --color-danger: #e55368;
  --shadow-card: 0 20px 60px rgba(15, 23, 42, 0.12);
  --shadow-soft: 0 12px 32px rgba(15, 23, 42, 0.08);
  --radius-large: 20px;
  --radius-medium: 12px;
  --radius-small: 8px;
  --max-width: 1200px;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --color-background: #0b1220;
  --color-surface: #0f172a;
  --color-surface-muted: #111c2f;
  --color-border: #243352;
  --color-text: #e2e8f0;
  --color-text-muted: #94a3b8;
  --color-text-secondary: #cbd5e1;
  --shadow-card: 0 20px 60px rgba(0, 0, 0, 0.45);
  --shadow-soft: 0 12px 32px rgba(0, 0, 0, 0.35);
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html, body {
  margin: 0;
  padding: 0;
  font-family: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--color-text);
  background: var(--color-background);
}

body {
  display: flex;
  justify-content: center;
  min-height: 100vh;
}

main {
  width: 100%;
  max-width: var(--max-width);
  padding: 48px 32px 72px;
}

main.terminal-main {
  max-width: 100%;
  padding: 0 16px 16px 16px;
  flex: 1;
  min-height: 0; /* Allow flex item to shrink */
  display: flex;
  flex-direction: column;
  gap: 12px;
}

main.layout {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 32px;
}

.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  width: 100%;
}

header.app-header {
  width: 100%;
  max-width: var(--max-width);
  padding: 32px 32px 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 0;
  background: linear-gradient(180deg, rgba(232,236,243,0.92) 0%, rgba(232,236,243,0.75) 65%, rgba(232,236,243,0) 100%);
  backdrop-filter: blur(16px);
  z-index: 40;
}

:root[data-theme="dark"] header.app-header {
  background: linear-gradient(180deg, rgba(15,23,42,0.92) 0%, rgba(15,23,42,0.82) 65%, rgba(15,23,42,0) 100%);
}

.header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  width: 100%;
}

.header-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

/* Notification Permission Banner */
.notification-banner {
  width: 100%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: 12px 16px;
  border-radius: var(--radius-medium);
  animation: slideDown 0.3s ease;
}

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

.notification-banner-content {
  display: flex;
  align-items: center;
  gap: 12px;
}

.notification-banner-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--color-accent);
  border-radius: 8px;
  flex-shrink: 0;
  color: white;
}

.notification-banner-icon svg {
  width: 20px;
  height: 20px;
}

.notification-banner-text {
  flex: 1;
  min-width: 0;
}

.notification-banner-text strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 2px;
}

.notification-banner-text span {
  font-size: 13px;
  color: var(--color-text-muted);
}

.notification-banner-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.notification-banner-actions .btn-primary {
  background: var(--color-accent);
  color: white;
  border: none;
  font-weight: 500;
}

.notification-banner-actions .btn-primary:hover {
  background: var(--color-accent-dark);
}

.notification-banner-actions .btn-ghost {
  color: var(--color-text-muted);
  border: none;
  background: transparent;
}

.notification-banner-actions .btn-ghost:hover {
  color: var(--color-text);
  background: rgba(127, 127, 127, 0.1);
}

.user-info {
  font-size: 14px;
  color: var(--color-text-muted);
  font-weight: 500;
}

.user-filter-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Override CustomSelect width for user filter to be content-based */
.user-filter-group .custom-select {
  width: auto;
  min-width: 160px;
}

.user-filter-group .custom-select-trigger {
  width: auto;
  min-width: 160px;
  padding: 6px 12px;
  min-height: auto;
  font-size: 14px;
  background: var(--color-surface-muted);
  border-color: rgba(217, 222, 235, 0.6);
}

.user-filter-group .custom-select-trigger:hover {
  border-color: var(--color-border);
  background: var(--color-surface);
}

.user-filter-group .custom-select-trigger.open {
  border-color: var(--color-border);
  background: var(--color-surface);
}

.user-filter-group .custom-select-dropdown {
  width: max-content;
  min-width: 100%;
  left: 0;
  right: auto;
  background: var(--color-surface);
  border-color: var(--color-border);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.1);
  overflow-x: hidden;
}

.user-filter-group .custom-select-option {
  padding: 8px 12px;
  font-size: 14px;
  white-space: nowrap;
}

.user-filter-group .custom-select-option:hover {
  background: rgba(63, 114, 255, 0.05);
}

.user-filter-group .custom-select-option.selected {
  background: rgba(63, 114, 255, 0.08);
}

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

.task-launcher {
  /* Spacing handled by main.layout gap */
}

.task-launcher form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.control-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-end;
  justify-content: flex-start;
}

.single-row-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.single-row-controls .flex-item {
  flex: 1 1 180px;
  min-width: 140px;
}

.single-row-controls .btn-branch-options {
  flex-shrink: 0;
}

.btn-icon-template-preview {
  width: 44px;
  min-height: 44px;
  flex: 0 0 44px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
  color: var(--color-text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.btn-icon-template-preview[hidden] {
  display: none !important;
}

.btn-icon-template-preview:hover:not(:disabled),
.btn-icon-template-preview:focus-visible:not(:disabled) {
  background: rgba(63, 114, 255, 0.08);
  border-color: var(--color-accent);
  color: var(--color-accent);
  box-shadow: 0 2px 6px rgba(63, 114, 255, 0.15);
  outline: none;
}

.btn-icon-template-preview:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.btn-icon-template-preview svg {
  flex-shrink: 0;
}

.env-controls {
  display: flex;
  flex: 1 1 260px;
  gap: 12px;
  align-items: center;
}

.field-group.compact {
  flex: 1 1 220px;
}

.field-group.compact select,
.field-group.compact input {
  min-height: 44px;
}

.count-group {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-left: auto;
  justify-content: flex-end;
  align-items: flex-end;
}

.counter {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 80px;
}

.counter .field-label {
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-muted);
}

.counter-controls {
  display: grid;
  grid-template-columns: repeat(3, auto);
  align-items: center;
  gap: 8px;
  background: var(--color-surface-muted);
  border-radius: 999px;
  padding: 4px;
}

.counter-controls input {
  width: 40px;
  text-align: center;
  border: none;
  background: transparent;
  font-size: 16px;
  font-weight: 600;
  padding: 8px 4px;
  -moz-appearance: textfield;
  cursor: default;
  user-select: none;
}

/* Hide number input spinners */
.counter-controls input::-webkit-outer-spin-button,
.counter-controls input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.counter-controls input[readonly] {
  cursor: default;
  pointer-events: none;
}

.btn-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  font-size: 20px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.btn-circle:hover {
  background: rgba(63,114,255,0.08);
}

.template-description {
  background: rgba(63,114,255,0.08);
  border-radius: var(--radius-medium);
  padding: 16px 18px;
  color: var(--color-text-muted);
  font-size: 14px;
  max-height: 120px;
  overflow-y: auto;
  white-space: pre-wrap;
  line-height: 1.6;
  border: 2px solid var(--color-border);
}

.parameter-fields {
  display: grid;
  gap: 16px;
}

.form-footer {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 16px;
  padding-top: 8px;
  min-height: 0;
}

.form-footer[hidden] {
  display: none;
}

.form-message {
  flex: 1;
  min-height: 20px;
  font-size: 14px;
  color: var(--color-text-muted);
}

.form-message[data-state="error"] {
  color: var(--color-danger);
}

.form-message[data-state="success"] {
  color: var(--color-success);
}

.task-board {
  background: var(--color-surface);
  border-radius: var(--radius-large);
  box-shadow: var(--shadow-soft);
}

.task-board-header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 20px 28px;
}

.task-board-header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.task-filter-summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 28px 16px;
  padding: 10px 12px;
  background: var(--color-surface-muted);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-small);
}

.task-filter-summary-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--color-text-muted);
}

.task-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  flex: 1;
}

.task-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  font-size: 12px;
  color: var(--color-text);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.task-filter-chip:hover {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px rgba(63, 114, 255, 0.12);
  transform: translateY(-1px);
}

.task-filter-chip:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.automation-filter-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 28px 16px;
  padding: 10px 12px;
  border-radius: var(--radius-small);
  border: 1px solid rgba(59, 130, 246, 0.35);
  background: rgba(59, 130, 246, 0.08);
}

.task-filter-chip .chip-label {
  font-weight: 500;
}

.task-filter-chip .chip-remove {
  color: var(--color-text-muted);
  font-weight: 700;
}

.task-filter-clear {
  margin-left: auto;
}

.task-board-header-actions .view-icon {
  font-size: 14px;
  display: inline-block;
}

.task-board-header-actions .view-label {
  font-size: 13px;
  font-weight: 500;
  margin-left: 2px;
}

#toggle-view-btn {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Collapse/Expand All Objectives buttons */
#collapse-all-objectives-btn,
#expand-all-objectives-btn {
  display: flex;
  align-items: center;
  justify-content: center;
}

#collapse-all-objectives-btn svg,
#expand-all-objectives-btn svg {
  stroke: var(--color-text-muted);
}

#collapse-all-objectives-btn:hover svg,
#expand-all-objectives-btn:hover svg {
  stroke: var(--color-text);
}

/* Task Search */
.task-search-wrapper {
  display: flex;
  align-items: center;
  position: relative;
}

.task-search-wrapper #toggle-search-btn .search-icon {
  width: 16px;
  height: 16px;
}

/* Hide toggle button when search is open */
.task-search-wrapper.search-open #toggle-search-btn {
  display: none;
}

.task-search-container {
  display: flex;
  align-items: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  overflow: hidden;
  animation: searchExpand 0.12s ease-out;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.task-search-container:focus-within {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(63, 114, 255, 0.1);
}

@keyframes searchExpand {
  from {
    width: 0;
    opacity: 0;
  }
  to {
    width: 320px;
    opacity: 1;
  }
}

.task-search-container[hidden] {
  display: none;
}

/* Embedded search icon */
.task-search-icon {
  margin-left: 10px;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

#task-search-input {
  width: 240px;
  padding: 6px 10px;
  border: none;
  background: transparent;
  font-size: 13px;
  color: var(--color-text);
  outline: none;
}

#task-search-input::placeholder {
  color: var(--color-text-muted);
}

/* Close button to dismiss search */
.task-search-close {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color 0.15s;
}

.task-search-close:hover {
  color: var(--color-text);
}

/* Task Filter */
.task-filter-wrapper {
  position: relative;
}

#toggle-filter-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
}

#toggle-filter-btn .filter-icon {
  width: 16px;
  height: 16px;
}

.filter-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: var(--color-accent);
  color: white;
  font-size: 10px;
  font-weight: 600;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.filter-badge[hidden] {
  display: none;
}

/* When filter is active, highlight the filter button */
.task-filter-wrapper.filter-active #toggle-filter-btn {
  color: var(--color-accent);
  background: rgba(63, 114, 255, 0.1);
}

.task-filter-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 280px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-medium);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  z-index: 100;
  animation: filterDropIn 0.15s ease-out;
}

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

.task-filter-dropdown[hidden] {
  display: none;
}

.filter-section {
  padding: 12px 14px;
  border-bottom: 1px solid var(--color-border);
}

.filter-section:last-of-type {
  border-bottom: none;
}

.filter-section-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-text-muted);
  margin-bottom: 8px;
}

.filter-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.filter-option {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 4px 0;
}

.filter-option input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--color-accent);
  cursor: pointer;
}

.filter-option-label {
  font-size: 13px;
  color: var(--color-text);
}

.filter-options-pills {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6px;
}

.filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all 0.15s;
}

.filter-pill:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.filter-pill.active {
  background: rgba(63, 114, 255, 0.1);
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.filter-pill-icon {
  width: 14px;
  height: 14px;
}

.filter-select {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  background: var(--color-surface);
  font-size: 13px;
  color: var(--color-text);
  cursor: pointer;
  transition: border-color 0.15s;
}

.filter-select:hover {
  border-color: var(--color-accent);
}

.filter-select:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px rgba(63, 114, 255, 0.1);
}

.auto-filter-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  margin-top: 2px;
}

.auto-filter-toggle input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: var(--color-accent);
  cursor: pointer;
}

.auto-filter-label {
  font-size: 12px;
  color: var(--color-text-muted);
  user-select: none;
}

.filter-actions {
  padding: 10px 14px;
  border-top: 1px solid var(--color-border);
  display: flex;
  justify-content: flex-end;
}

#clear-filters-btn {
  font-size: 12px;
  padding: 4px 8px;
}

/* Search Results Header */
.search-results-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  color: var(--color-text-muted);
  margin-bottom: 12px;
  padding: 8px 12px;
  background: rgba(63, 114, 255, 0.05);
  border-radius: var(--radius-small);
  border-left: 3px solid var(--color-accent);
}

.search-results-close {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  border-radius: var(--radius-small);
  transition: color 0.15s, background 0.15s;
}

.search-results-close:hover {
  color: var(--color-text);
  background: rgba(0, 0, 0, 0.1);
}

.task-board-content {
  max-height: 5000px;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.3s ease;
  opacity: 1;
  padding: 0 28px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.task-hero {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 12px;
}

.hero-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.breadcrumb-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--color-accent);
  text-decoration: none;
  padding: 6px 8px;
  border-radius: var(--radius-small);
  transition: background 0.15s ease, color 0.15s ease;
}

.breadcrumb-link svg {
  width: 16px;
  height: 16px;
}

.breadcrumb-link:hover {
  background: rgba(31,42,68,0.08);
}

:root[data-theme="dark"] .breadcrumb-link:hover {
  background: rgba(148, 163, 184, 0.15);
}

.breadcrumb-separator {
  color: var(--color-text-muted);
}

.breadcrumb-current {
  color: var(--color-text-muted);
  font-weight: 500;
}

.task-context {
  color: var(--color-text-muted);
  font-size: 14px;
  flex: 1;
}

.task-context .task-test-pill {
  display: inline-flex;
  align-items: center;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 500;
  color: rgb(16, 185, 129);
  vertical-align: middle;
}

/* Interactive (terminal) task session badges. These tasks have no completion monitor; */
/* their only status is whether the terminal session is alive. Live ~ success/green, */
/* Ended ~ muted/secondary, matching the existing status-* badge treatment. */
.status-live,
.status-badge.status-live,
.agent-status-badge.status-live,
.task-status-label.status-live {
  background: rgba(46, 182, 125, 0.12);
  color: var(--color-success);
}

.status-ended,
.status-badge.status-ended,
.agent-status-badge.status-ended,
.task-status-label.status-ended {
  background: rgba(127, 127, 127, 0.14);
  color: var(--color-text-secondary);
}

.status-hero {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: flex-start;
}

.status-copy {
  min-width: 0;
  flex: 1;
}

.status-copy h1 {
  margin: 0 0 6px;
  font-size: 28px;
  letter-spacing: -0.02em;
}

.task-subtitle {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 15px;
}

.status-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-shrink: 0;
}

.task-error-hero {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid rgba(229, 83, 104, 0.38);
  border-left: 4px solid var(--color-danger);
  border-radius: 8px;
  background: rgba(229, 83, 104, 0.08);
  color: var(--color-text);
}

.task-error-hero[hidden] {
  display: none;
}

.task-error-hero-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  color: var(--color-danger);
  background: rgba(229, 83, 104, 0.12);
  flex: 0 0 auto;
}

.task-error-hero-copy {
  min-width: 0;
  flex: 1;
}

.task-error-hero-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-danger);
  margin-bottom: 4px;
}

.task-error-hero-message {
  font-size: 13px;
  line-height: 1.45;
  color: var(--color-text);
  overflow-wrap: anywhere;
}

.task-error-hero .btn-ghost {
  flex: 0 0 auto;
}

:root[data-theme="dark"] .task-error-hero {
  background: rgba(229, 83, 104, 0.12);
  border-color: rgba(229, 83, 104, 0.46);
}

.scroll-to-top {
  position: fixed;
  right: 24px;
  bottom: 72px;
  width: 48px;
  height: 52px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: radial-gradient(circle at 30% 20%, rgba(63, 114, 255, 0.18), transparent 55%),
    var(--color-bg-primary);
  color: var(--color-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 2px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.18);
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
  z-index: 70;
}

.scroll-to-top.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* The Ask launcher lifts above the feedback / QA widget when both controls are
   on the right, so stack the scroll-to-top button above the lifted launcher to
   avoid overlap. Scoped to desktop — the mobile layout moves this button to
   the bottom-left, clear of the launcher. */
@media (min-width: 721px) {
  body:not(.ask-cf-position-left):has(.profound-feedback-float-btn):not(:has(.profound-feedback-panel.left)) .scroll-to-top {
    bottom: 140px;
  }
}

.scroll-to-top:hover {
  box-shadow: 0 16px 28px rgba(15, 23, 42, 0.22);
}

.scroll-to-top:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.scroll-to-top svg {
  width: 16px;
  height: 16px;
}

.scroll-to-top-label {
  display: block;
  line-height: 1;
}

.latest-activity-banner {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(63, 114, 255, 0.12), rgba(46, 182, 125, 0.12));
  border: 1px solid rgba(63, 114, 255, 0.25);
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
  cursor: pointer;
  transition: box-shadow 0.15s ease, transform 0.12s ease;
}

/* Styles for fade gradient when panel is expandable */
.fade-gradient-container {
  position: relative;
  overflow: hidden; /* Ensure gradient stays within bounds */
}

.fade-gradient-container.expanded .fade-gradient {
  display: none; /* Hide gradient when expanded */
}

.fade-gradient-container.replying .fade-gradient {
  display: none; /* Hide gradient when reply box is shown to prevent corner overlap */
}

.fade-gradient {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px; /* Increased height for a smoother fade */
  background: linear-gradient(to top, var(--color-background) 0%, rgba(232, 236, 243, 0) 100%);
  pointer-events: none; /* Allows interaction with content beneath */
  opacity: 0; /* Initially hidden */
  transition: opacity 0.3s ease; /* Smooth transition for opacity */
}

.fade-gradient.visible {
  opacity: 1; /* Show gradient when content is overflowing */
}


.latest-activity-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.latest-activity-label {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 700;
  flex: 1;
}

.latest-activity-loading {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(63, 114, 255, 0.1);
  color: var(--color-accent);
  border: 1px solid rgba(63, 114, 255, 0.18);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.latest-activity-loading[hidden] {
  display: none;
}

.latest-activity-loading::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
  animation: latest-activity-loading-pulse 1.2s ease-in-out infinite;
}

@keyframes latest-activity-loading-pulse {
  0%, 100% {
    opacity: 0.35;
    transform: scale(0.85);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}

.latest-activity-header .latest-activity-time {
  margin-left: auto;
}

.latest-activity-chevron {
  color: var(--color-text-muted);
  transition: transform 0.2s ease;
  opacity: 0.7;
}

.latest-activity-banner:hover .latest-activity-chevron {
  opacity: 1;
}

.latest-activity-banner.expanded .latest-activity-chevron {
  transform: rotate(180deg);
}

.jump-to-comments-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  font-size: 12px;
  color: var(--color-text-muted);
  border-radius: var(--radius-small);
  margin-right: 4px;
}

.jump-to-comments-btn:hover {
  color: var(--color-accent);
  background: rgba(63, 114, 255, 0.1);
}

.jump-to-comments-btn[hidden] {
  display: none;
}

#jump-to-comments-count {
  font-weight: 600;
}

.latest-activity-content {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
}

.latest-activity-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  background: rgba(63, 114, 255, 0.12);
  border: 1px solid rgba(63, 114, 255, 0.2);
  color: var(--color-accent);
  transition: all 0.3s ease;
}

.latest-activity-icon.thinking {
  animation: pulse-thinking 2s infinite;
  background: rgba(63, 114, 255, 0.18);
  box-shadow: 0 0 0 0 rgba(63, 114, 255, 0.4);
}

@keyframes pulse-thinking {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(63, 114, 255, 0.4);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 6px rgba(63, 114, 255, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(63, 114, 255, 0);
  }
}

.latest-activity-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.latest-activity-action {
  font-weight: 700;
  color: var(--color-text);
}

.latest-activity-detail {
  color: var(--color-text);
  opacity: 0.86;
  font-size: 14px;
  line-height: 1.4;
  display: block;
  max-height: 9.6em; /* ~6 lines */
  overflow: hidden;
  position: relative;
}

.latest-activity-detail.expanded {
  max-height: none;
}

.latest-activity-banner.expanded {
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.16);
  transform: translateY(-1px);
}

.latest-activity-banner.expanded .latest-activity-detail {
  overflow: visible;
}

.latest-activity-markdown {
  padding: 0;
  background: transparent;
  border-left: 0;
  border-radius: 0;
}

.latest-activity-markdown pre {
  background: transparent;
  color: inherit;
  padding: 8px 0;
  border-radius: 0;
  overflow-x: auto;
  margin: 6px 0 0;
  border: 1px solid var(--color-border);
  padding: 10px 12px;
  border-radius: 10px;
}

.latest-activity-markdown code {
  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', 'Consolas', monospace;
  font-size: 13px;
}

.latest-activity-markdown pre code {
  background: transparent;
  padding: 0;
  color: inherit;
}

.latest-activity-markdown :not(pre) > code {
  background: rgba(0, 0, 0, 0.06);
  padding: 2px 6px;
  border-radius: 3px;
  color: #c7254e;
}

.latest-activity-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.latest-activity-time {
  font-size: 12px;
  color: var(--color-text-muted);
}

/* Sticky Todo Progress Section */
.todo-progress-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 14px;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(59, 130, 246, 0.08));
  border-radius: 10px;
  border: 1px solid rgba(16, 185, 129, 0.2);
  margin: 0 -2px 12px -2px;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.todo-progress-section:hover {
  opacity: 0.85;
}

.todo-progress-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.todo-progress-icon {
  font-size: 16px;
  flex-shrink: 0;
}

.todo-progress-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  flex-shrink: 0;
}

.todo-progress-bar-container {
  flex: 1;
  height: 8px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  overflow: hidden;
  min-width: 60px;
}

.todo-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #10b981, #3b82f6);
  border-radius: 4px;
  transition: width 0.3s ease;
  width: 0%;
}

.todo-progress-count {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text);
  flex-shrink: 0;
  min-width: 40px;
  text-align: right;
}

.todo-progress-dismiss {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  margin-left: 4px;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: var(--color-text-muted);
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.15s ease, background 0.15s ease;
  flex-shrink: 0;
}

.todo-progress-dismiss:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.1);
}

.todo-progress-current {
  font-size: 12px;
  color: var(--color-text-muted);
  padding-left: 26px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.todo-progress-current:empty {
  display: none;
}

.todo-progress-current .todo-current-status {
  color: #3b82f6;
  font-weight: 600;
}

/* Dark mode adjustments for todo progress */
@media (prefers-color-scheme: dark) {
  .todo-progress-section {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(59, 130, 246, 0.12));
    border-color: rgba(16, 185, 129, 0.25);
  }

  .todo-progress-bar-container {
    background: rgba(255, 255, 255, 0.1);
  }
}

.latest-activity-jump {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.latest-jump-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 10px;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.latest-jump-icon {
  font-size: 14px;
}

.activity-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(63, 114, 255, 0.12);
  color: var(--color-accent);
  font-size: 12px;
  font-weight: 700;
}

.repos-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(255, 152, 0, 0.15);
  color: #f57c00;
  font-size: 11px;
  font-weight: 600;
}

.summary-check {
  color: var(--color-success);
  font-weight: 800;
  font-size: 13px;
}

.latest-jump-btn .diff-add {
  color: var(--color-success);
}

.latest-jump-btn .diff-del {
  color: var(--color-danger);
}

.latest-jump-btn.btn-ghost:hover {
  background: var(--color-surface-muted);
  color: var(--color-text);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

:root[data-theme="dark"] .latest-jump-btn.btn-ghost:hover {
  background: rgba(63, 114, 255, 0.18);
  color: var(--color-text);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}

/* Quick Reply Section - Proximity-aware feedback in latest activity banner */
.quick-reply-section {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(63, 114, 255, 0.15);
  animation: quickReplyFadeIn 0.2s ease-out;
  cursor: default;
}

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

.quick-reply-collapsed {
  display: flex;
  align-items: center;
}

.quick-reply-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(63, 114, 255, 0.08);
  border: 1px solid rgba(63, 114, 255, 0.2);
  border-radius: 20px;
  color: var(--color-accent);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.quick-reply-trigger:hover {
  background: rgba(63, 114, 255, 0.15);
  border-color: rgba(63, 114, 255, 0.35);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(63, 114, 255, 0.15);
}

.quick-reply-trigger:active {
  transform: translateY(0);
}

.quick-reply-trigger svg {
  flex-shrink: 0;
}

.quick-reply-kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: rgba(63, 114, 255, 0.12);
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  font-family: inherit;
  color: var(--color-accent);
  opacity: 0.7;
}

.quick-reply-expanded {
  animation: quickReplyExpandIn 0.25s ease-out;
}

@keyframes quickReplyExpandIn {
  from {
    opacity: 0;
    transform: scale(0.98);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.quick-reply-input-wrapper {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.quick-reply-editor-wrapper,
.follow-up-editor-container,
.follow-up-editor-container .markdown-editor {
  cursor: text;
}

/* Input row with textarea and integrated submit button */
.quick-reply-input-row {
  position: relative;
  display: flex;
  align-items: flex-start;
}

.quick-reply-textarea {
  width: 100%;
  min-height: 60px;
  max-height: 160px;
  padding: 12px 42px 12px 14px;
  border: 1px solid rgba(63, 114, 255, 0.25);
  border-radius: 12px;
  font-size: 14px;
  font-family: inherit;
  color: var(--color-text);
  background: var(--color-surface);
  line-height: 1.5;
  resize: none;
  overflow-y: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, height 0.15s ease;
}

.quick-reply-textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(63, 114, 255, 0.12), 0 4px 16px rgba(63, 114, 255, 0.08);
}

.quick-reply-textarea::placeholder {
  color: var(--color-text-muted);
}

/* Submit button positioned inside textarea */
.quick-reply-submit-btn.btn-icon-launch {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 8px;
}

/* Override the default hover/active transforms to keep button centered */
.quick-reply-submit-btn.btn-icon-launch:hover:not(:disabled),
.quick-reply-submit-btn.btn-icon-launch:active:not(:disabled) {
  transform: translateY(-50%);
}

.quick-reply-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.quick-reply-left-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.quick-reply-right-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Dark mode adjustments for quick reply */
:root[data-theme="dark"] .quick-reply-section {
  border-top-color: rgba(63, 114, 255, 0.2);
}

:root[data-theme="dark"] .quick-reply-trigger {
  background: rgba(63, 114, 255, 0.12);
  border-color: rgba(63, 114, 255, 0.25);
}

:root[data-theme="dark"] .quick-reply-trigger:hover {
  background: rgba(63, 114, 255, 0.2);
  border-color: rgba(63, 114, 255, 0.4);
}

:root[data-theme="dark"] .quick-reply-textarea {
  background: rgba(0, 0, 0, 0.2);
  border-color: rgba(63, 114, 255, 0.2);
}

:root[data-theme="dark"] .quick-reply-textarea:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(63, 114, 255, 0.15), 0 4px 16px rgba(0, 0, 0, 0.2);
}

/* Drag over state for quick reply */
.quick-reply-input-wrapper.drag-over {
  border: 2px dashed var(--color-accent);
  border-radius: 12px;
  background: rgba(63, 114, 255, 0.05);
}

.quick-reply-input-wrapper.drag-over .quick-reply-textarea {
  border-color: transparent;
}

/* Visual indicator when banner is in reply mode */
.latest-activity-banner.replying {
  border-color: var(--color-accent);
  box-shadow: 0 14px 32px rgba(63, 114, 255, 0.18), 0 0 0 1px rgba(63, 114, 255, 0.15);
}

.latest-activity-banner.activity-highlight {
  animation: activityFocus 1.2s ease;
  box-shadow: 0 0 0 3px rgba(63, 114, 255, 0.22), var(--shadow-soft);
}

:root[data-theme="dark"] .latest-activity-banner.replying {
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(63, 114, 255, 0.25);
}

/* Pulse animation for the trigger button when task awaits feedback */
.quick-reply-trigger.pulse {
  animation: quickReplyPulse 2s ease-in-out infinite;
}

@keyframes quickReplyPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(63, 114, 255, 0);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(63, 114, 255, 0.15);
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .quick-reply-section {
    margin-top: 10px;
    padding-top: 10px;
  }

  .quick-reply-trigger {
    padding: 6px 12px;
    font-size: 12px;
  }

  .quick-reply-kbd {
    display: none;
  }

  .quick-reply-textarea {
    min-height: 50px;
    padding: 10px 12px;
    font-size: 13px;
  }

  .quick-reply-actions {
    flex-wrap: wrap;
  }

}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  text-transform: capitalize;
  background: rgba(31,42,68,0.08);
  color: var(--color-text);
}

.status-pill.status-completed { background: rgba(46,182,125,0.12); color: var(--color-success); }
.status-pill.status-running { background: rgba(244,183,64,0.16); color: var(--color-warning); }
.status-pill.status-interrupted { background: rgba(107,114,128,0.16); color: #4b5563; }
.status-pill.status-failed { background: rgba(229,83,104,0.14); color: var(--color-danger); }
.status-pill.status-mixed { background: rgba(249,115,22,0.14); color: #c2410c; }
.status-pill.status-staged { background: rgba(139,92,246,0.14); color: #8b5cf6; }
.status-pill.status-queued { background: rgba(59,130,246,0.14); color: #3b82f6; }
.status-pill.status-unknown { background: rgba(31,42,68,0.12); color: var(--color-text-muted); }

:root[data-theme="dark"] .status-pill.status-interrupted { background: rgba(148,163,184,0.16); color: #94a3b8; }
:root[data-theme="dark"] .status-pill.status-mixed { background: rgba(249,115,22,0.18); color: #fb923c; }

.judge-indicator-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 8px;
  min-height: 30px;
}

.judge-indicator-icon {
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
}

.judge-indicator-icon svg {
  display: block;
  width: 16px;
  height: 16px;
}

.judge-count-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--color-accent);
  color: white;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.judge-indicator-btn.judge-running {
  background: rgba(244, 183, 64, 0.15);
  color: var(--color-text);
  border-color: rgba(244, 183, 64, 0.35);
}

.judge-indicator-btn.judge-running .judge-count-badge {
  background: var(--color-warning);
  animation: judge-badge-pulse 1.5s ease-in-out infinite;
}

@keyframes judge-badge-pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.1);
  }
}

/* Task tabs for grouped tasks */
.task-tabs {
  display: flex;
  gap: 8px;
  padding: 16px 0;
  border-bottom: 2px solid var(--color-border);
  margin-bottom: 8px;
}

/* Sticky header for task page */
.task-sticky-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.1);
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  row-gap: 12px;
  flex-wrap: wrap;
  padding: 12px 32px;
  opacity: 0;
  transform: translateY(-100%);
  transition: opacity 0.2s ease, transform 0.2s ease, left 0.3s ease;
  pointer-events: none;
}

.task-sticky-header.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}

/* Shift sticky header when task list panel is open */
body.task-list-open .task-sticky-header {
  left: 380px;
}

.sticky-tabs-section {
  display: flex;
  gap: 8px;
  align-items: center;
}

.sticky-title-section {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text);
}

.sticky-agent-info {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: rgba(63, 114, 255, 0.08);
  border-radius: 6px;
  border: 1px solid rgba(63, 114, 255, 0.2);
}

.sticky-agent-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: var(--color-accent);
}

.sticky-agent-icon svg {
  width: 100%;
  height: 100%;
}

/* Brand-specific colors for sticky header agent icon */
.sticky-agent-icon[data-agent="claude"] {
  color: #D97757; /* Claude orange */
}

.sticky-agent-icon[data-agent="codex"] {
  color: #10a37f; /* Codex green */
}

.sticky-agent-icon[data-agent="gemini"] {
  color: #4285f4; /* Gemini blue */
}

.sticky-agent-icon[data-agent="bob"] {
  color: #6366F1; /* Bob indigo */
}

.sticky-agent-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-accent);
}

.sticky-task-title {
  color: var(--color-text);
  font-weight: 600;
}

.sticky-actions-section {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-left: auto;
}

/* Group Testing buttons together - main button */
.sticky-actions-section button#sticky-app-server-task {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  margin-right: 0 !important;
}

/* Group Testing buttons together - dropdown toggle */
.sticky-actions-section button#sticky-app-server-dropdown-toggle {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-left: 1px solid rgba(63, 114, 255, 0.2) !important;
  padding: 8px 8px !important;
  font-size: 10px !important;
  min-width: auto !important;
  margin-left: -8px !important;
  height: auto !important;
  line-height: normal !important;
  align-self: stretch !important;
}

/* Group Terminal buttons together - main button */
.sticky-actions-section button#sticky-terminal-task {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  margin-right: 0 !important;
}

/* Group Terminal buttons together - dropdown toggle */
.sticky-actions-section button#sticky-terminal-dropdown-toggle {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-left: 1px solid rgba(63, 114, 255, 0.2) !important;
  padding: 8px 8px !important;
  font-size: 10px !important;
  min-width: auto !important;
  margin-left: -8px !important;
  height: auto !important;
  line-height: normal !important;
  align-self: stretch !important;
}

.sticky-latest-activity {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: rgba(63, 114, 255, 0.1);
  border: 1px solid rgba(63, 114, 255, 0.28);
  border-radius: 999px;
  color: var(--color-text);
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.12);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
  max-width: 420px;
  min-width: 260px;
}

.sticky-latest-activity:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.16);
  background: rgba(63, 114, 255, 0.16);
}

.sticky-latest-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  background: var(--color-surface);
  color: var(--color-accent);
  border: 1px solid rgba(63, 114, 255, 0.22);
}

.sticky-latest-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.sticky-latest-label {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 700;
}

.sticky-latest-detail {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 240px;
}

.task-tab-mini {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {
  .task-tab-mini:hover {
    background: rgba(63,114,255,0.08);
    border-color: var(--color-accent);
  }
}

.task-tab-mini.active {
  background: var(--color-accent);
  color: white;
  border-color: var(--color-accent);
  font-weight: 600;
}

.task-tab-mini .task-tab-status {
  font-size: 11px;
}

.task-tab-mini.active .task-tab-status {
  filter: brightness(1.5);
}

/* Agent icon styling in tabs */
.task-tab-icon,
.task-tab-mini .task-tab-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.task-tab-icon svg,
.task-tab-mini .task-tab-icon svg {
  width: 100%;
  height: 100%;
}

/* Agent icon colors in tabs - brand specific */
.task-tab .task-tab-icon[data-agent="claude"],
.task-tab-mini .task-tab-icon[data-agent="claude"] {
  color: #D97757; /* Claude orange */
}

.task-tab .task-tab-icon[data-agent="codex"],
.task-tab-mini .task-tab-icon[data-agent="codex"] {
  color: #10a37f; /* Codex green */
}

.task-tab .task-tab-icon[data-agent="gemini"],
.task-tab-mini .task-tab-icon[data-agent="gemini"] {
  color: #4285f4; /* Gemini blue */
}

.task-tab .task-tab-icon[data-agent="bob"],
.task-tab-mini .task-tab-icon[data-agent="bob"] {
  color: #6366F1; /* Bob indigo */
}

.task-tab .task-tab-icon,
.task-tab-mini .task-tab-icon {
  color: var(--color-text-muted);
}

.task-tab.active .task-tab-icon,
.task-tab-mini.active .task-tab-icon {
  color: white;
}

.task-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {
  .task-tab:hover {
    background: rgba(63,114,255,0.08);
    border-color: var(--color-accent);
  }
}

.task-tab.active {
  background: var(--color-accent);
  color: white;
  border-color: var(--color-accent);
  font-weight: 600;
}

.task-tab-label {
  font-weight: inherit;
}

/* Inline alias rename input inside a tab */
.task-tab-label .tab-alias-input {
  font-size: inherit;
  font-weight: inherit;
  max-width: 120px;
  width: 100%;
  padding: 0 2px 2px;
  background: rgba(255, 255, 255, 0.15);
  border-bottom: 2px solid currentColor;
  color: inherit;
  caret-color: currentColor;
  border-radius: 2px 2px 0 0;
}

.task-tab-label .tab-alias-input:focus {
  background: rgba(255, 255, 255, 0.25);
  border-bottom-color: currentColor;
}

/* On non-active tabs, use darker styling for contrast */
.task-tab:not(.active) .task-tab-label .tab-alias-input,
.task-tab-mini:not(.active) .task-tab-label .tab-alias-input {
  background: var(--color-bg);
  color: var(--color-text);
  caret-color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

.task-tab:not(.active) .task-tab-label .tab-alias-input:focus,
.task-tab-mini:not(.active) .task-tab-label .tab-alias-input:focus {
  background: var(--color-bg);
  border-bottom-color: var(--color-accent);
}

/* Inline judge alias rename input (timeline + table) */
.timeline-agent .judge-alias-input,
.judgment-judge .judge-alias-input {
  font-size: inherit;
  font-weight: inherit;
  max-width: 160px;
  width: 100%;
  padding: 0 2px 2px;
  color: var(--color-text);
  caret-color: var(--color-accent);
  border-bottom: 2px solid var(--color-accent);
  background: var(--color-bg);
  border-radius: 2px 2px 0 0;
}

.timeline-agent .judge-alias-input:focus,
.judgment-judge .judge-alias-input:focus {
  border-bottom-color: var(--color-accent);
}

/* Actions container - holds both status and popout in same space */
.task-tab-actions {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
}

/* Status icon in tabs */
.task-tab-status {
  font-size: 12px;
  opacity: 1;
  transition: opacity 0.2s ease;
}

.task-tab-status.status-running,
.task-tab-status.status-completed,
.task-tab-status.status-interrupted,
.task-tab-status.status-failed,
.task-tab-status.status-live,
.task-tab-status.status-ended {
  background: transparent;
}

/* Interactive Live/Ended tab icon colors (icon-only, no pill background) so the group
   tabs match the hero pill. Higher specificity beats the generic .status-* rule. */
.task-tab-status.status-live { color: var(--color-success); }
.task-tab-status.status-ended { color: var(--color-text-secondary); }

.task-tab-status .task-tab-spinner,
.status-pill .task-tab-spinner {
  width: 12px;
  height: 12px;
  display: inline-block;
  animation: spin 1.4s linear infinite;
  transform-origin: center;
}

/* Steady terminal glyph for interactive (Live/Ended) tasks — sized like the spinner but
   deliberately NOT animated, so the session reads as settled. Used in the hero pill and
   in the group tabs (both regular and mini). */
.status-pill .status-terminal-icon,
.task-tab-status .status-terminal-icon {
  width: 12px;
  height: 12px;
  display: inline-block;
  animation: none;
}

.task-tab-mini .task-tab-status .task-tab-spinner,
.task-tab-mini .task-tab-status .status-terminal-icon {
  width: 11px;
  height: 11px;
}

.task-tab.active .task-tab-status {
  filter: brightness(1.5);
}

/* Popout button in tabs - positioned absolutely to overlay status */
.task-tab-popout {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  border-radius: 3px;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

/* Cross-fade on hover — gated to active tab so inactive tabs don't reveal
   the popout button (which sits where users aim to click to switch tabs) */
.task-tab.active:hover .task-tab-status,
.task-tab-mini.active:hover .task-tab-status {
  opacity: 0;
}

.task-tab.active:hover .task-tab-popout,
.task-tab-mini.active:hover .task-tab-popout {
  opacity: 1;
  pointer-events: all;
}

.task-tab-popout:hover {
  background: rgba(0, 0, 0, 0.1);
  color: var(--color-accent);
}

.task-tab.active .task-tab-popout {
  color: white;
}

.task-tab.active .task-tab-popout:hover {
  background: rgba(255, 255, 255, 0.2);
  color: white;
}

.task-tab-mini .task-tab-actions {
  min-width: 16px;
  height: 16px;
}

.task-tab-mini .task-tab-status {
  font-size: 11px;
}

.task-tab-mini .task-tab-popout {
  width: 16px;
  height: 16px;
}

.task-tab-popout svg,
.task-tab-mini .task-tab-popout svg {
  flex-shrink: 0;
}

.task-detail {
  width: 100%;
  max-width: var(--max-width);
  padding: 24px 32px 64px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  transition: margin-left 0.3s ease, max-width 0.3s ease, padding 0.3s ease;
}

/* When task list panel is open, shift content and use full width */
body.task-list-open .task-detail {
  margin-left: 380px;
  max-width: none;
  padding-left: 24px;
  padding-right: 24px;
}

body.task-terminal-open .task-detail {
  padding-bottom: calc(64px + var(--task-terminal-panel-height, 320px));
}

/* Interactive task view: the live terminal replaces the activity feed + reply UI. */
body.task-interactive #live-activity-card,
body.task-interactive #latest-activity-banner,
body.task-interactive #inline-follow-up-wrapper,
body.task-interactive .mobile-task-detail-dock {
  display: none !important;
}

/* Interactive task terminal rendered as an inline page section (not the floating panel). */
.interactive-terminal-frame-wrap {
  height: 70vh;
  min-height: 360px;
  border-radius: var(--radius-medium);
  overflow: hidden;
  background: #0f172a;
}
.interactive-terminal-frame-wrap iframe.task-terminal-frame {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.interactive-terminal-pending {
  padding: 16px;
}
/* When the terminal card is maximized, let the terminal fill the card instead
   of staying at its fixed 70vh inline height. */
.detail-card.expanded .interactive-terminal-frame-wrap {
  height: auto;
  flex: 1;
  min-height: 0;
}

.detail-stack {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.detail-card {
  background: var(--color-surface);
  border-radius: var(--radius-large);
  box-shadow: var(--shadow-soft);
  padding: 0;
  display: flex;
  flex-direction: column;
  scroll-margin-top: 80px;
}

.detail-card.activity-highlight {
  animation: activityFocus 1.2s ease;
  box-shadow: 0 0 0 3px rgba(63, 114, 255, 0.22), var(--shadow-soft);
}

@keyframes activityFocus {
  0% { box-shadow: 0 0 0 0 rgba(63, 114, 255, 0.3), var(--shadow-soft); }
  60% { box-shadow: 0 0 0 10px rgba(63, 114, 255, 0.0), var(--shadow-soft); }
  100% { box-shadow: 0 0 0 3px rgba(63, 114, 255, 0.22), var(--shadow-soft); }
}

.detail-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 28px;
  cursor: pointer;
  user-select: none;
}

.drag-handle {
  cursor: grab;
  color: var(--color-text-secondary);
  font-size: 16px;
  margin-right: 12px;
  opacity: 0.4;
  transition: opacity 0.2s ease;
  user-select: none;
  line-height: 1;
}

.drag-handle:hover {
  opacity: 0.8;
}

.detail-card.dragging {
  opacity: 0.4;
  cursor: grabbing;
}

.detail-card.drag-over {
  border-top: 3px solid var(--color-accent);
  margin-top: -3px;
}

.detail-card-header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  flex: 1;
}

.detail-card-header h2 .comments-count-badge {
  margin-left: 8px;
  vertical-align: middle;
  font-size: 12px;
}

.detail-card-header .header-actions {
  display: flex;
  gap: 4px;
  align-items: center;
}

.detail-card-header button {
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

.detail-card.collapsed .detail-card-header button .collapse-icon {
  transform: rotate(-90deg);
}

/* Compact header mode for collapsed cards */
.detail-card.collapsed .detail-card-header {
  padding: 10px 20px;
}

.detail-card.collapsed .detail-card-header h2 {
  font-size: 15px;
  font-weight: 500;
}

.detail-card.collapsed .drag-handle {
  font-size: 14px;
  margin-right: 8px;
}

/* Hide card functionality */
.detail-card.user-hidden {
  display: none;
}

.hide-card-btn {
  opacity: 0.5;
  transition: opacity 0.2s ease;
}

.hide-card-btn:hover {
  opacity: 1;
  color: var(--color-danger);
}

.hide-icon {
  font-size: 20px;
  line-height: 1;
  font-weight: 300;
}

/* Expanded/maximized card state */
.detail-card.expanded {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  border-radius: 0;
  margin: 0;
  max-width: none;
}

/* Force full-sized header when expanded (override collapsed compact mode) */
.detail-card.expanded .detail-card-header {
  padding: 20px 28px !important;
}

.detail-card.expanded .detail-card-header h2 {
  font-size: 18px !important;
  font-weight: 600 !important;
}

.detail-card.expanded .drag-handle {
  font-size: 16px !important;
  margin-right: 12px !important;
}

/* Hide collapse button, hide button, and drag handle when expanded */
.detail-card.expanded .toggle-card-btn,
.detail-card.expanded .hide-card-btn,
.detail-card.expanded .drag-handle {
  display: none;
}

/* Force content to show when expanded (override collapsed state) */
.detail-card.expanded .detail-card-content {
  max-height: calc(100vh - 80px) !important;
  overflow-y: auto;
  opacity: 1 !important;
  padding: 0 28px 28px 28px !important;
  flex: 1;
}

/* Remove max-height constraints on content when expanded */
.detail-card.expanded .log-window {
  max-height: none;
  height: calc(100vh - 140px);
}

.detail-card.expanded .summary-box.scroll-box {
  max-height: none;
  height: calc(100vh - 140px);
}

.detail-card.expanded #output-summary {
  max-height: none;
  height: calc(100vh - 140px);
}

.detail-card.expanded .file-diff-content:not(.collapsed) {
  max-height: none;
}

.detail-card.expanded .activity-feed {
  max-height: none;
  height: calc(100vh - 140px);
}

.expand-icon {
  display: inline-block;
  font-size: 16px;
}

.detail-card-content {
  max-height: 3000px;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.3s ease;
  opacity: 1;
  padding: 0 28px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.detail-card.collapsed .detail-card-content {
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
}

#changes-card:not(.collapsed):not(.expanded) > .detail-card-content {
  max-height: none;
}

.brand {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Brand logo light/dark mode switching */
.brand-logo-dark {
  display: none;
}

:root[data-theme="dark"] .brand-logo-light {
  display: none;
}

:root[data-theme="dark"] .brand-logo-dark {
  display: block;
}

.brand h1 {
  margin: 0;
  font-size: 24px;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, #005eb8 0%, #005eb8 60%, #ff6600 60%, #ff6600 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700;
}

.brand .tagline {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 16px;
}

button, .btn {
  font-family: inherit;
  border: none;
  border-radius: var(--radius-small);
  padding: 12px 20px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.btn-loading {
  position: relative;
  pointer-events: none;
  color: rgba(255, 255, 255, 0.8);
}

.btn-loading::after {
  content: '';
  position: absolute;
  right: 16px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  animation: spin 0.8s linear infinite;
}

.btn-primary {
  background: var(--color-accent);
  color: #fff;
  box-shadow: var(--shadow-soft);
}

.btn-primary:hover {
  transform: translateY(-1px);
  background: var(--color-accent-dark);
}

.btn-secondary {
  background: rgba(63,114,255,0.08);
  color: var(--color-accent);
}

.btn-secondary:hover {
  background: rgba(63,114,255,0.16);
}

.btn-ghost {
  background: transparent;
  color: var(--color-text-muted);
}

.btn-ghost:hover {
  background: rgba(31,42,68,0.08);
}

:root[data-theme="dark"] .btn-ghost:hover {
  background: rgba(148, 163, 184, 0.15);
}

.btn-ghost.btn-loading {
  color: var(--color-text);
}

.btn-danger {
  background: var(--color-danger);
  color: #fff;
  box-shadow: var(--shadow-soft);
}

.btn-danger:hover {
  transform: translateY(-1px);
  background: #c73e52;
}

.btn-warning {
  background: var(--color-warning);
  color: #1f2a44;
  box-shadow: var(--shadow-soft);
}

.btn-warning:hover {
  transform: translateY(-1px);
  background: #d79c22;
}

.theme-toggle-btn {
  align-items: center;
  gap: 6px;
  border: 1px solid var(--color-border);
  padding: 8px 12px;
}

.theme-toggle-btn .theme-icon {
  font-size: 16px;
  line-height: 1;
}

.theme-toggle-btn.theme-toggle-floating {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 1200;
  background: var(--color-surface);
  box-shadow: var(--shadow-soft);
}

:root[data-theme="dark"] .theme-toggle-btn.theme-toggle-floating {
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
}

.btn-small {
  padding: 8px 14px;
  font-size: 14px;
}

.btn-branch-options {
  background: rgba(31, 42, 68, 0.06);
  font-weight: 600;
  letter-spacing: 0.5px;
}

.btn-branch-options:hover {
  background: rgba(31, 42, 68, 0.12);
}

/* Disabled button states */
button:disabled,
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-primary:disabled {
  background: var(--color-text-muted);
}

.btn-primary.btn-approved:disabled {
  background: transparent;
  color: var(--color-success);
  border: none;
  font-weight: 600;
  box-shadow: none;
  opacity: 1;
  cursor: default;
  pointer-events: auto;
}

.btn-primary.btn-approved:disabled:hover {
  transform: none;
  background: transparent;
}

.btn-primary.btn-approved:disabled svg {
  color: #1e8a55;
}

.btn-secondary:disabled {
  background: rgba(31, 42, 68, 0.06);
  color: var(--color-text-muted);
}

/* Dropdown Menu */
.dropdown-container {
  position: relative;
  display: inline-block;
}

.btn-dropdown {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding-right: 8px;
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 160px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 100;
  overflow: visible;
}

.dropdown-item {
  width: 100%;
  padding: 10px 16px;
  text-align: left;
  background: none;
  border: none;
  color: var(--color-text);
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.15s ease;
  display: block;
}

.dropdown-item:hover {
  background: rgba(63, 114, 255, 0.08);
}

.dropdown-item:active {
  background: rgba(63, 114, 255, 0.16);
}

.dropdown-item:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  color: var(--color-text-secondary);
}

.dropdown-item[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  color: var(--color-text-secondary);
}

.dropdown-item:disabled:hover {
  background: none;
  color: var(--color-text-secondary);
}

.dropdown-item[aria-disabled="true"]:hover {
  background: none;
  color: var(--color-text-secondary);
}

.btn-ghost:disabled {
  color: rgba(31, 42, 68, 0.3);
}

/* Dark mode disabled button states */
:root[data-theme="dark"] .btn-secondary:disabled {
  background: rgba(148, 163, 184, 0.12);
  color: rgba(148, 163, 184, 0.5);
}

:root[data-theme="dark"] .btn-ghost:disabled {
  color: rgba(148, 163, 184, 0.4);
}

.hero {
  background: var(--color-surface);
  border-radius: var(--radius-large);
  padding: 40px 48px;
  box-shadow: var(--shadow-card);
  margin-bottom: 48px;
  display: grid;
  gap: 24px;
  justify-items: center;
  text-align: center;
}

.hero h2 {
  margin: 0;
  font-size: 32px;
  letter-spacing: -0.02em;
}

.hero p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 18px;
  line-height: 1.6;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  width: 100%;
}

.inline-form {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.inline-form select {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  padding: 10px 16px;
  font-size: 15px;
  font-family: inherit;
  background: var(--color-surface);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.section-header h3 {
  margin: 0;
  font-size: 20px;
  letter-spacing: -0.01em;
}

.task-grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 4px 0;
}

/* Task Stats Cards */
.task-stats-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px;
  margin-bottom: 10px;
  border-radius: calc(var(--radius-medium) + 6px);
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(15, 23, 42, 0.10);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 10px 28px rgba(15, 23, 42, 0.06);
  backdrop-filter: blur(10px);
}

:root[data-theme="dark"] .task-stats-cards {
  background: rgba(15, 23, 42, 0.55);
  border-color: rgba(148, 163, 184, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 14px 34px rgba(0, 0, 0, 0.35);
}

.stat-card {
  --stat-accent: var(--color-accent);
  --stat-accent-weak: rgba(63, 114, 255, 0.16);
  --stat-accent-border: rgba(63, 114, 255, 0.45);
  --stat-accent-glow: rgba(63, 114, 255, 0.22);

  appearance: none;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex: 1 1 160px;
  min-width: 140px;
  padding: 12px 14px;
  background: transparent;
  border-radius: var(--radius-medium);
  border: 1px solid transparent;
  cursor: pointer;
  position: relative;
  user-select: none;
  text-align: left;
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease, color 0.18s ease;
}

.stat-card::after {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 6px;
  height: 3px;
  border-radius: 999px;
  background: var(--stat-accent);
  opacity: 0;
  transform: scaleX(0.55);
  transform-origin: center;
  transition: opacity 0.18s ease, transform 0.18s ease;
  filter: drop-shadow(0 6px 16px var(--stat-accent-glow));
}

.stat-card.status-pinned {
  --stat-accent: var(--color-accent);
  --stat-accent-weak: rgba(63, 114, 255, 0.14);
  --stat-accent-border: rgba(63, 114, 255, 0.50);
  --stat-accent-glow: rgba(63, 114, 255, 0.28);
}

.stat-card.status-recent {
  --stat-accent: var(--color-accent);
  --stat-accent-weak: rgba(63, 114, 255, 0.16);
  --stat-accent-border: rgba(63, 114, 255, 0.50);
  --stat-accent-glow: rgba(63, 114, 255, 0.26);
}

.stat-card.status-older {
  --stat-accent: rgba(31, 42, 68, 0.55);
  --stat-accent-weak: rgba(31, 42, 68, 0.06);
  --stat-accent-border: rgba(31, 42, 68, 0.22);
  --stat-accent-glow: rgba(31, 42, 68, 0.18);
}

:root[data-theme="dark"] .stat-card.status-older {
  --stat-accent: rgba(148, 163, 184, 0.75);
  --stat-accent-weak: rgba(148, 163, 184, 0.12);
  --stat-accent-border: rgba(148, 163, 184, 0.35);
  --stat-accent-glow: rgba(148, 163, 184, 0.22);
}

.stat-card.status-running {
  --stat-accent: var(--color-warning);
  --stat-accent-weak: rgba(244, 183, 64, 0.16);
  --stat-accent-border: rgba(244, 183, 64, 0.50);
  --stat-accent-glow: rgba(244, 183, 64, 0.26);
}

/* Live interactive terminal sessions (Terminals stat card / section chip) */
.stat-card.status-live {
  --stat-accent: var(--color-success);
  --stat-accent-weak: rgba(34, 197, 94, 0.16);
  --stat-accent-border: rgba(34, 197, 94, 0.50);
  --stat-accent-glow: rgba(34, 197, 94, 0.26);
}

/* Persistent green "live" dot so the Terminals tab reads as a distinct,
   live-session category even when unselected (otherwise it blends with All). */
.stat-card.status-live .stat-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.stat-card.status-live .stat-label::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-success);
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
  flex: 0 0 auto;
}

.stat-card.status-all {
  --stat-accent: #f59e0b;
  --stat-accent-weak: rgba(245, 158, 11, 0.14);
  --stat-accent-border: rgba(245, 158, 11, 0.52);
  --stat-accent-glow: rgba(245, 158, 11, 0.26);
}

.stat-card:hover {
  transform: translateY(-1px);
  background: rgba(15, 23, 42, 0.03);
}

:root[data-theme="dark"] .stat-card:hover {
  background: rgba(148, 163, 184, 0.08);
}

.stat-card:hover::after {
  opacity: 0.35;
  transform: scaleX(0.80);
}

.stat-card:focus-visible {
  outline: none;
  border-color: var(--stat-accent-border);
  box-shadow: 0 0 0 3px var(--stat-accent-glow), 0 12px 30px rgba(15, 23, 42, 0.12);
}

:root[data-theme="dark"] .stat-card:focus-visible {
  box-shadow: 0 0 0 3px var(--stat-accent-glow), 0 14px 34px rgba(0, 0, 0, 0.45);
}

/* Active state for stat cards */
.stat-card.active {
  transform: translateY(-1px);
  background: linear-gradient(180deg, var(--stat-accent-weak), rgba(255, 255, 255, 0));
  border-color: var(--stat-accent-border);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.65);
  color: var(--color-text);
}

:root[data-theme="dark"] .stat-card.active {
  background: linear-gradient(180deg, var(--stat-accent-weak), rgba(15, 23, 42, 0));
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.stat-card.active::after {
  opacity: 1;
  transform: scaleX(1);
}

.stat-count {
  font-size: 22px;
  font-weight: 750;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-text);
}

.stat-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* View mode segmented tabs (Tasks / Objectives) */
.view-mode-tabs {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(15, 23, 42, 0.10);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 10px 24px rgba(15, 23, 42, 0.06);
}

:root[data-theme="dark"] .view-mode-tabs {
  background: rgba(15, 23, 42, 0.55);
  border-color: rgba(148, 163, 184, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 14px 30px rgba(0, 0, 0, 0.35);
}

.view-mode-tab {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--color-text-muted);
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  line-height: 1;
  padding: 8px 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: background 0.18s ease, box-shadow 0.18s ease, color 0.18s ease, transform 0.18s ease;
  user-select: none;
  white-space: nowrap;
}

.view-mode-tab#view-mode-tasks {
  --view-accent-rgb: 59, 130, 246; /* blue */
}

.view-mode-tab#view-mode-objectives {
  --view-accent-rgb: 245, 158, 11; /* amber (matches objective convention) */
}

.view-mode-tab .view-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(var(--view-accent-rgb), 0.82);
  transition: color 0.18s ease, opacity 0.18s ease;
}

.view-mode-tab .view-icon svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.view-mode-tab .view-label {
  font-weight: 650;
  margin-left: 0;
}

.view-mode-tab:hover {
  transform: translateY(-1px);
  background: rgba(var(--view-accent-rgb), 0.10);
  color: var(--color-text);
}

.view-mode-tab:hover .view-icon {
  color: rgba(var(--view-accent-rgb), 0.95);
}

.view-mode-tab.active {
  transform: translateY(-1px);
  background: linear-gradient(180deg, rgba(var(--view-accent-rgb), 0.24), rgba(var(--view-accent-rgb), 0.10));
  color: var(--color-text);
  border-color: rgba(var(--view-accent-rgb), 0.30);
  box-shadow: 0 12px 26px rgba(var(--view-accent-rgb), 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.view-mode-tab.active .view-icon {
  color: rgba(var(--view-accent-rgb), 1);
}

:root[data-theme="dark"] .view-mode-tab.active {
  background: linear-gradient(180deg, rgba(var(--view-accent-rgb), 0.22), rgba(var(--view-accent-rgb), 0.08));
  border-color: rgba(var(--view-accent-rgb), 0.26);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

:root[data-theme="dark"] .view-mode-tab:hover {
  background: rgba(var(--view-accent-rgb), 0.14);
}

.view-mode-tab:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--view-accent-rgb), 0.22), 0 10px 22px rgba(15, 23, 42, 0.10);
}

/* Task Sections */
.task-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.task-section-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(63, 114, 255, 0.05);
  border-radius: var(--radius-small);
  cursor: pointer;
  user-select: none;
  transition: background 0.2s ease;
}

.task-section-header:hover {
  background: rgba(63, 114, 255, 0.10);
}

.task-section-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  flex: 1;
  color: var(--color-text);
}

.section-toggle-icon {
  font-size: 12px;
  color: var(--color-text-muted);
  transition: transform 0.2s ease;
  display: inline-block;
  width: 16px;
}

.section-count {
  background: var(--color-accent);
  color: white;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  min-width: 24px;
  text-align: center;
}

.task-section-content {
  max-height: 5000px;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.3s ease;
  opacity: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.task-section.collapsed .task-section-content {
  max-height: 0;
  opacity: 0;
}

.task-section-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.section-load-more {
  display: flex;
  justify-content: center;
  padding: 12px 0;
}

.section-load-more button {
  min-width: 200px;
}

.task-section-container {
  margin-top: 16px;
}

.section-empty-message {
  text-align: center;
  padding: 48px 24px;
  color: var(--color-text-muted);
  font-size: 15px;
}

.task-tile {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px;
  background: #fdfcfb; /* Very subtle warm cream to feel inviting */
  border-radius: var(--radius-medium);
  border: 1px solid rgba(31,42,68,0.08);
  border-left: 3px solid rgba(31,42,68,0.15);
  color: inherit;
  text-decoration: none;
  transition: box-shadow 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
  position: relative; /* Needed for absolutely positioned buttons */
}

.task-tile:hover,
.task-tile:focus-visible {
  transform: none;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
  background: var(--color-surface); /* Brighten to pure white on hover */
  border-top-color: rgba(63,114,255,0.14);
  border-right-color: rgba(63,114,255,0.14);
  border-bottom-color: rgba(63,114,255,0.14);
  outline: none;
}

/* Very subtle status-based background tints layered on the warm base */
.task-tile.status-running {
  background: linear-gradient(135deg, rgba(244, 183, 64, 0.09) 0%, #fdfcfb 100%);
  border-left-color: var(--color-warning);
}

.task-tile.status-interrupted {
  background: linear-gradient(135deg, rgba(107, 114, 128, 0.08) 0%, #fdfcfb 100%);
  border-left-color: #6b7280;
}

.task-tile.status-failed {
  background: linear-gradient(135deg, rgba(229, 83, 104, 0.07) 0%, #fdfcfb 100%);
  border-left-color: var(--color-danger);
}

.task-tile.status-mixed {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.08) 0%, #fdfcfb 100%);
  border-left-color: #f97316;
}

.task-tile.status-completed {
  background: #fdfcfb; /* Keep the warm cream base */
  border-left-color: var(--color-success);
}

.task-tile.status-staged {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.09) 0%, #fdfcfb 100%);
  border-left-color: #8b5cf6;
}

.task-tile.status-queued {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.09) 0%, #fdfcfb 100%);
  border-left-color: #3b82f6;
}

/* Interactive terminal tasks have no completion monitor: the tile color is driven off the
   terminal-session liveness instead of the running yellow. Live ~ success/green (session up),
   Ended ~ muted/secondary (session stopped, settled). */
.task-tile.status-live {
  background: linear-gradient(135deg, rgba(46, 182, 125, 0.09) 0%, #fdfcfb 100%);
  border-left-color: var(--color-success);
}

.task-tile.status-ended {
  background: linear-gradient(135deg, rgba(127, 127, 127, 0.08) 0%, #fdfcfb 100%);
  border-left-color: var(--color-text-secondary);
}

:root[data-theme="dark"] .task-tile {
  background: var(--color-surface-muted);
  border-color: rgba(148, 163, 184, 0.2);
  border-left-color: rgba(148, 163, 184, 0.35);
  box-shadow: var(--shadow-soft);
}

:root[data-theme="dark"] .task-tile:hover,
:root[data-theme="dark"] .task-tile:focus-visible {
  background: var(--color-surface);
  border-top-color: rgba(63,114,255,0.35);
  border-right-color: rgba(63,114,255,0.35);
  border-bottom-color: rgba(63,114,255,0.35);
}

:root[data-theme="dark"] .task-tile.status-running {
  background: linear-gradient(135deg, rgba(244, 183, 64, 0.12) 0%, var(--color-surface-muted) 100%);
  border-left-color: var(--color-warning);
}

:root[data-theme="dark"] .task-tile.status-interrupted {
  background: linear-gradient(135deg, rgba(148, 163, 184, 0.14) 0%, var(--color-surface-muted) 100%);
  border-left-color: #94a3b8;
}

:root[data-theme="dark"] .task-tile.status-failed {
  background: linear-gradient(135deg, rgba(229, 83, 104, 0.12) 0%, var(--color-surface-muted) 100%);
  border-left-color: var(--color-danger);
}

:root[data-theme="dark"] .task-tile.status-mixed {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.14) 0%, var(--color-surface-muted) 100%);
  border-left-color: #fb923c;
}

:root[data-theme="dark"] .task-tile.status-completed {
  background: var(--color-surface-muted);
  border-left-color: var(--color-success);
}

:root[data-theme="dark"] .task-tile.status-staged {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.14) 0%, var(--color-surface-muted) 100%);
  border-left-color: #8b5cf6;
}

:root[data-theme="dark"] .task-tile.status-queued {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.14) 0%, var(--color-surface-muted) 100%);
  border-left-color: #3b82f6;
}

:root[data-theme="dark"] .task-tile.status-live {
  background: linear-gradient(135deg, rgba(46, 182, 125, 0.14) 0%, var(--color-surface-muted) 100%);
  border-left-color: var(--color-success);
}

:root[data-theme="dark"] .task-tile.status-ended {
  background: linear-gradient(135deg, rgba(148, 163, 184, 0.12) 0%, var(--color-surface-muted) 100%);
  border-left-color: rgba(148, 163, 184, 0.55);
}

.task-tile .task-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  min-width: 0;
  padding-right: 26px; /* Reserve space for Pin icon on first line only */
}

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

/* Editable title text - cursor indicates click-to-edit */
.task-title .task-title-editable {
  cursor: text;
}

.task-title .task-title-editable:hover {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
}

/* Objective editable titles override grab cursor from parent */
.task-tile.is-objective .objective-title-editable {
  cursor: text;
}

.task-title .task-time {
  font-size: 12px;
  color: var(--color-text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Inline status label pill for at-a-glance task status */
.task-status-label {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.task-status-label.status-running {
  background: rgba(244, 183, 64, 0.15);
  color: #b8860b;
  animation: pulse-running 2s ease-in-out infinite;
}
.task-status-label.status-interrupted {
  background: rgba(107, 114, 128, 0.16);
  color: #4b5563;
}
.task-status-label.status-failed {
  background: rgba(229, 83, 104, 0.14);
  color: var(--color-danger);
}
.task-status-label.status-mixed {
  background: rgba(249, 115, 22, 0.14);
  color: #c2410c;
}
.task-status-label.status-staged {
  background: rgba(139, 92, 246, 0.12);
  color: #8b5cf6;
}
.task-status-label.status-queued {
  background: rgba(59, 130, 246, 0.12);
  color: #3b82f6;
}

:root[data-theme="dark"] .task-status-label.status-running {
  background: rgba(244, 183, 64, 0.18);
  color: #f4b740;
}
:root[data-theme="dark"] .task-status-label.status-interrupted {
  background: rgba(148, 163, 184, 0.2);
  color: #cbd5e1;
}
:root[data-theme="dark"] .task-status-label.status-failed {
  background: rgba(229, 83, 104, 0.18);
  color: #f87171;
}
:root[data-theme="dark"] .task-status-label.status-mixed {
  background: rgba(249, 115, 22, 0.18);
  color: #fb923c;
}
:root[data-theme="dark"] .task-status-label.status-staged {
  background: rgba(139, 92, 246, 0.18);
  color: #a78bfa;
}
:root[data-theme="dark"] .task-status-label.status-queued {
  background: rgba(59, 130, 246, 0.18);
  color: #60a5fa;
}

.task-tile .task-meta {
  font-size: 13px;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.task-tile .task-running-status {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.task-tile .task-queue-position {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: rgba(59, 130, 246, 0.08);
  border-radius: 6px;
  font-size: 13px;
  color: #3b82f6;
  width: 100%;
  box-sizing: border-box;
}

.task-queue-position .queue-icon {
  font-size: 14px;
}

.task-queue-position .queue-label {
  font-weight: 500;
}

:root[data-theme="dark"] .task-tile .task-queue-position {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
}

/* Error indicator for failed tasks */
.task-tile .task-error-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: rgba(229, 83, 104, 0.1);
  border-radius: 6px;
  font-size: 12px;
  color: var(--color-danger);
  width: 100%;
  box-sizing: border-box;
  margin-top: 6px;
}

.task-error-indicator .error-icon {
  font-size: 12px;
  flex-shrink: 0;
}

.task-error-indicator .error-label {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:root[data-theme="dark"] .task-tile .task-error-indicator {
  background: rgba(229, 83, 104, 0.15);
}

.task-agent-icons {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.task-agent-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: rgba(31,42,68,0.04);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  flex-shrink: 0;
  opacity: 1; /* Default visible, animation only on initial render */
  cursor: pointer;
}

.agent-overflow-badge {
  font-size: 11px;
  font-weight: 600;
  background: rgba(31, 42, 68, 0.08);
  color: var(--color-text);
  letter-spacing: -0.5px;
  cursor: default;
  position: relative;
  overflow: visible;
}

.agent-overflow-badge:hover {
  background: rgba(31, 42, 68, 0.12);
  color: var(--color-text);
}

.overflow-popover {
  display: none;
  position: fixed;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15);
  z-index: 10000;
  flex-direction: row;
  gap: 4px;
  white-space: nowrap;
  min-width: max-content;
}

/* Transparent bridge to allow hovering into the popover */
.overflow-popover::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 10px;
}

.overflow-popover.popover-visible {
  display: flex;
  animation: popoverFadeIn 0.2s ease-out;
}

.overflow-popover .task-agent-icon {
  width: 24px;
  height: 24px;
  opacity: 1;
}

.overflow-popover .task-agent-icon svg {
  width: 12px;
  height: 12px;
}

/* Popover Arrow */
.overflow-popover::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: var(--color-surface) transparent transparent transparent;
}

/* Popover displayed below badge (when near top of screen) */
.overflow-popover.popover-below::after {
  top: auto;
  bottom: 100%;
  border-color: transparent transparent var(--color-surface) transparent;
}

.overflow-popover.popover-below::before {
  top: auto;
  bottom: 100%;
}

@keyframes popoverFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Only animate on initial render when task-board has the animate-icons class */
.task-board.animate-icons .task-agent-icon {
  animation: bounceInFromTop 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
  opacity: 0;
}

@keyframes bounceInFromTop {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  60% {
    opacity: 1;
    transform: translateY(4px);
  }
  80% {
    transform: translateY(-2px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.task-agent-icon svg {
  width: 14px;
  height: 14px;
}

.task-agent-icon[data-agent="claude"] {
  color: #D97757;
  background: rgba(217, 119, 87, 0.12);
  border-color: rgba(217, 119, 87, 0.4);
}

.task-agent-icon[data-agent="codex"] {
  color: #10a37f;
  background: rgba(16, 163, 127, 0.12);
  border-color: rgba(16, 163, 127, 0.4);
}

.task-agent-icon[data-agent="gemini"] {
  color: #4285f4;
  background: rgba(66, 133, 244, 0.12);
  border-color: rgba(66, 133, 244, 0.35);
}

.task-agent-icon[data-agent="bob"] {
  color: #6366F1;
  background: rgba(99, 102, 241, 0.12);
  border-color: rgba(99, 102, 241, 0.35);
}

/* Judge task icon - uses gold/amber to match ⚖️ emoji appearance */
.task-agent-icon.is-judge {
  color: #b8860b !important;
  background: rgba(184, 134, 11, 0.12) !important;
  border-color: rgba(184, 134, 11, 0.35) !important;
}

.task-agent-icon.is-selected::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 12px;
  height: 1px;
  border-radius: 999px;
  background: var(--color-accent);
  transform: translateX(-50%);
  pointer-events: none;
}

.task-agent-icon-separator {
  width: 1px;
  height: 18px;
  margin: 0 1px;
  border-radius: 999px;
  background: var(--color-border);
  opacity: 0.85;
  flex-shrink: 0;
}

:root[data-theme="dark"] .task-agent-icon-separator {
  opacity: 0.7;
}

.overflow-popover .task-agent-icon-separator {
  height: 16px;
  margin: 0 2px;
}

.task-agent-icon .agent-status-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-text);
  color: #fff;
  font-size: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 6px rgba(15, 23, 42, 0.2);
}

.agent-status-badge.status-completed {
  background: var(--color-success);
}

.agent-status-badge.status-interrupted {
  background: #6b7280;
}

.agent-status-badge.status-failed {
  background: var(--color-danger);
}

.agent-status-badge.status-running {
  background: var(--color-warning);
  animation: spin 1.5s linear infinite;
}

/* Interactive terminal tasks have no completion monitor: the agent badge shows a settled
   Live/Ended treatment instead of the running spinner. Solid color circle with a white symbol
   (matching status-completed/status-approved), and explicitly NO animation so the spin from
   .status-running never leaks onto a terminal-session badge. These rules sit after the
   .task-agent-icon .agent-status-badge base so they win the background. */
.agent-status-badge.status-live {
  background: var(--color-success);
  color: #fff;
  animation: none;
}

.agent-status-badge.status-ended {
  background: var(--color-text-secondary);
  color: #fff;
  animation: none;
}

.agent-status-badge.status-staged {
  background: #8b5cf6;
}

.agent-status-badge.status-queued {
  background: #3b82f6;
}

.agent-status-badge.status-winner {
  background: var(--color-warning);
}

.agent-status-badge.status-loser {
  background: var(--color-danger);
}

.agent-status-badge.status-loser svg {
  width: 9px;
  height: 9px;
}

.agent-status-badge.status-approved {
  background: var(--color-success, #22c55e);
}

.agent-status-badge.status-approved svg {
  width: 9px;
  height: 9px;
}

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

.task-tile .task-test-pill {
  display: inline-flex;
  align-items: center;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 500;
  color: rgb(16, 185, 129);
  margin-left: 6px;
}

.task-tile .task-automation-pill {
  display: inline-flex;
  align-items: center;
  background: rgba(59, 130, 246, 0.12);
  border: 1px solid rgba(59, 130, 246, 0.32);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  color: rgb(37, 99, 235);
  margin-left: 6px;
  text-decoration: none;
}

.task-tile .task-automation-pill:hover {
  background: rgba(59, 130, 246, 0.2);
}

.task-tile .task-fork-pill {
  display: inline-flex;
  align-items: center;
  background: rgba(13, 148, 136, 0.12);
  border: 1px solid rgba(13, 148, 136, 0.28);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  color: rgb(15, 118, 110);
  margin-left: 6px;
  white-space: nowrap;
}

:root[data-theme="dark"] .task-tile .task-fork-pill {
  background: rgba(45, 212, 191, 0.14);
  border-color: rgba(94, 234, 212, 0.32);
  color: rgb(153, 246, 228);
}

.task-tile .task-params {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  max-height: 56px; /* Allow 2 lines of parameter pills */
  overflow: hidden;
}

.task-tile .param-pill {
  display: inline-flex;
  align-items: center;
  background: rgba(63,114,255,0.08);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 12px;
  color: var(--color-text-muted);
  white-space: normal; /* Allow text to wrap within pills */
  word-break: break-word; /* Break long words if needed */
}

/* Stacked card styling for grouped tasks */
.task-tile.stacked {
  position: relative;
  box-shadow:
    0 6px 18px rgba(15, 23, 42, 0.08),
    0 10px 24px rgba(15, 23, 42, 0.06),
    0 14px 30px rgba(15, 23, 42, 0.04);
}

.task-tile.stacked:hover {
  box-shadow:
    0 12px 28px rgba(15, 23, 42, 0.12),
    0 16px 34px rgba(15, 23, 42, 0.10),
    0 20px 40px rgba(15, 23, 42, 0.08);
}

/* Delete button removed - users can delete via selection mode or task detail page */

/* Pin button for task tiles */
.task-tile .task-pin-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 6px;
  font-size: 18px;
  line-height: 1;
  transition: transform 0.2s ease, opacity 0.2s ease;
  opacity: 0;
  z-index: 2;
  color: var(--color-text-muted);
}

.task-tile:hover .task-pin-btn {
  opacity: 0.5;
}

.task-tile .task-pin-btn:hover {
  opacity: 1 !important;
  transform: scale(1.15);
}

.task-tile .task-pin-btn.pinned {
  opacity: 1 !important;
}

.task-tile .task-pin-btn .pin-svg {
  flex-shrink: 0;
  color: currentColor; /* Inherits from .task-pin-btn which has color: var(--color-text-muted) */
}

.task-tile .task-pin-btn .pin-filled {
  flex-shrink: 0;
}

.task-tile .task-pin-btn.loading {
  opacity: 1 !important;
  pointer-events: none;
}

.task-tile .task-pin-btn.loading .pin-svg,
.task-tile .task-pin-btn.loading .pin-filled {
  display: none;
}

.task-tile .task-pin-btn.loading::after {
  content: '•••';
  display: inline-block;
  letter-spacing: 1px;
  font-size: 18px;
  animation: pin-loading-dots 1.4s ease-in-out infinite;
}

@keyframes pin-loading-dots {
  0%, 20% {
    opacity: 0.3;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.3;
  }
}

/* Last activity display for running tasks */
.task-last-activity {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-size: 12px;
  color: var(--color-text-muted);
  min-width: 0;
  max-width: 100%;
}

.task-last-activity .activity-label {
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
}

.task-last-activity .activity-detail {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
  max-width: 100%;
}

/* List view styles */
.task-section-grid.list-view {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.task-section-grid.list-view .task-tile {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 12px 40px 12px 16px;
  overflow: hidden;
}

.task-section-grid.list-view .task-tile.stacked {
  padding-right: 40px;
}

.task-section-grid.list-view .task-tile:hover {
  transform: none;
}

.task-section-grid.list-view .task-tile .task-title {
  flex: 1 1 250px;
  min-width: 180px;
  max-width: 450px;
}

.task-section-grid.list-view .task-tile .task-meta {
  flex: 1 1 auto;
  min-width: 120px;
  max-width: 400px;
}

.task-section-grid.list-view .task-tile .task-params {
  flex: 1 1 auto;
  max-width: 550px;
  min-width: 0;
  max-height: none;
}

.task-section-grid.list-view .task-tile .task-params .param-pill {
  flex-shrink: 0;
  /* Clamp long single-pill content (e.g. an objective's full instructions text)
     so one pill cannot blow up the card height. Container max-height stays
     unset so multi-pill tasks can still wrap freely. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

.task-section-grid.list-view .task-tile .task-running-status {
  flex-direction: row;
  flex-basis: 100%;
  margin-top: 4px;
}

.task-section-grid.list-view .task-tile .task-progress {
  flex: 0 0 auto;
  width: 150px;
  margin: 0;
}

.task-section-grid.list-view .task-tile .task-last-activity {
  flex: 1 1 auto;
  max-width: 600px;
  min-width: 120px;
  margin: 0;
}
.task-section-grid.list-view .task-tile.stacked {
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
}

.task-section-grid.list-view .task-tile.stacked:hover {
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
}

.task-section-grid.list-view .task-tile .task-pin-btn {
  right: 10px;
}

.task-card {
  background: var(--color-surface);
  border-radius: var(--radius-medium);
  padding: 24px;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.task-card .status-badge {
  align-self: flex-start;
}

.status-badge {
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  text-transform: capitalize;
}

.status-completed { background: rgba(46,182,125,0.12); color: var(--color-success); }
.status-running { background: rgba(244,183,64,0.16); color: var(--color-warning); }
.status-interrupted { background: rgba(107,114,128,0.16); color: #4b5563; }
.status-failed { background: rgba(229,83,104,0.14); color: var(--color-danger); }
.status-mixed { background: rgba(249,115,22,0.14); color: #c2410c; }
.status-staged { background: rgba(139,92,246,0.12); color: #8b5cf6; }
.status-queued { background: rgba(59,130,246,0.12); color: #3b82f6; }
.status-unknown { background: rgba(31,42,68,0.12); color: var(--color-text-muted); }
.status-objective { background: rgba(245,158,11,0.12); color: #d97706; }

/* Objective card styling */
.task-tile.is-objective,
.task-card.is-objective {
  border: 2px dashed var(--color-border);
  background: var(--color-background);
  opacity: 0.9;
}

.task-tile.is-objective:hover,
.task-card.is-objective:hover {
  border-color: #d97706;
  opacity: 1;
}

.task-tile.is-objective .task-name,
.task-card.is-objective .task-meta strong {
  color: var(--color-text-secondary);
}

/* Objective badge removed - no longer showing "OBJECTIVE" label */

/* Cursor for objective tiles - grab indicates draggable */
.task-tile.is-objective {
  cursor: grab;
}

.task-tile.is-objective:active {
  cursor: grabbing;
}

/* ===== Hierarchical List View Styles ===== */

/* Container for hierarchical structure */
.task-section-grid.hierarchical-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  max-width: 100%;
}

/* Parent container for objective with children */
.hierarchy-parent {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  border-radius: 8px;
  background: transparent;
  transition: background-color 0.2s ease;
}

/* No background on hover - keep it clean */
.hierarchy-parent:hover {
  background: transparent;
}

/* Objective tile in hierarchical mode */
.hierarchy-objective-tile {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  padding: 12px 16px;
  position: relative;
  border-radius: 8px;
}

.hierarchy-objective-tile > .task-title,
.hierarchy-objective-tile > .task-params {
  min-width: 0;
  max-width: 100%;
}

.hierarchy-objective-tile > .task-params {
  flex: 1 1 280px;
}

.hierarchy-objective-tile > .task-params .param-pill {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* Only top-rounded when expanded with children */
.hierarchy-parent:not(.collapsed) .hierarchy-objective-tile.has-children {
  border-radius: 8px 8px 0 0;
}

/* Collapse toggle button */
.hierarchy-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  font-size: 10px;
  color: var(--color-text-muted);
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.15s ease;
  flex-shrink: 0;
  user-select: none;
  margin: -6px;
  margin-right: 0;
}

.hierarchy-toggle:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--color-text);
}

.hierarchy-toggle.collapsed {
  color: var(--color-text-muted);
}

.hierarchy-toggle-placeholder {
  display: none;
}

/* Child count badge - color indicates task status when collapsed */
.hierarchy-child-count {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(100, 116, 139, 0.1);
  color: var(--color-text-muted);
  margin-left: 8px;
}

/* Failed tasks - red (highest priority) */
.hierarchy-child-count.status-failed {
  background: rgba(239, 68, 68, 0.15);
  color: #dc2626;
}

/* Running tasks - amber with pulse animation */
.hierarchy-child-count.status-running {
  background: rgba(245, 158, 11, 0.15);
  color: #d97706;
  animation: pulse-running 2s ease-in-out infinite;
}

@keyframes pulse-running {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* Pending/queued tasks - keep default gray */
.hierarchy-child-count.status-pending {
  background: rgba(100, 116, 139, 0.1);
  color: var(--color-text-muted);
}

/* Completed tasks - green */
.hierarchy-child-count.status-completed {
  background: rgba(34, 197, 94, 0.15);
  color: #16a34a;
}

/* Dark theme adjustments */
:root[data-theme="dark"] .hierarchy-child-count.status-failed {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
}

:root[data-theme="dark"] .hierarchy-child-count.status-running {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
}

:root[data-theme="dark"] .hierarchy-child-count.status-pending {
  background: rgba(148, 163, 184, 0.15);
  color: var(--color-text-muted);
}

:root[data-theme="dark"] .hierarchy-child-count.status-completed {
  background: rgba(34, 197, 94, 0.2);
  color: #4ade80;
}

/* Children container */
.hierarchy-children {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding-left: 32px;
  position: relative;
  margin-top: 4px;
}

/* Individual child container */
.hierarchy-child {
  position: relative;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding-left: 16px;
}

/* Vertical tree line - extends from top to horizontal connector */
.hierarchy-child::after {
  content: '';
  position: absolute;
  left: -7px;
  top: 0;
  height: 21px; /* Match horizontal connector position (20px) + 1px */
  width: 1px;
  background: rgba(156, 163, 175, 0.7);
}

/* Non-last children extend the vertical line beyond to bridge the gap */
.hierarchy-child:not(.last-child)::after {
  height: calc(100% + 4px); /* 4px to match the gap */
}

/* Horizontal connector line to each child - points to top of item */
.hierarchy-child::before {
  content: '';
  position: absolute;
  left: -7px;
  top: 20px; /* Fixed position to align with top of tile content */
  width: 14px;
  height: 1px;
  background: rgba(156, 163, 175, 0.7);
}

/* Task tiles within hierarchy */
.hierarchy-child .task-tile {
  margin: 0;
  border-radius: 6px;
  transition: transform 0.15s ease;
}

.hierarchy-child .task-tile:hover {
  transform: translateX(2px);
  /* No background change on hover */
  background: inherit;
}

/* Smooth collapse animation */
.hierarchy-parent.collapsed .hierarchy-children {
  display: none;
}

/* ===== Dark theme adjustments ===== */
:root[data-theme="dark"] .hierarchy-parent:hover {
  background: transparent;
}

:root[data-theme="dark"] .hierarchy-child::before {
  background: rgba(100, 116, 139, 0.35);
}

:root[data-theme="dark"] .hierarchy-child::after {
  background: rgba(100, 116, 139, 0.35);
}

:root[data-theme="dark"] .hierarchy-toggle:hover {
  background: rgba(255, 255, 255, 0.08);
}

:root[data-theme="dark"] .hierarchy-child-count {
  background: rgba(148, 163, 184, 0.15);
}

/* ===== Standalone Tasks Section ===== */
.standalone-tasks-section {
  margin-top: 16px;
  border-top: 1px solid var(--color-border);
  padding-top: 12px;
}

.standalone-tasks-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  border-radius: 6px;
  transition: background-color 0.15s ease;
}

.standalone-tasks-header:hover {
  background: rgba(0, 0, 0, 0.03);
}

:root[data-theme="dark"] .standalone-tasks-header:hover {
  background: rgba(255, 255, 255, 0.05);
}

.standalone-tasks-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.standalone-tasks-count {
  font-size: 12px;
  color: var(--color-text-muted);
  background: rgba(0, 0, 0, 0.05);
  padding: 2px 8px;
  border-radius: 10px;
}

:root[data-theme="dark"] .standalone-tasks-count {
  background: rgba(255, 255, 255, 0.08);
}

.standalone-tasks-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 8px;
}

.standalone-tasks-section.collapsed .standalone-tasks-content {
  display: none;
}

/* ===== Nested Objectives (Sub-objectives) Styles ===== */

/* Depth-based indentation for nested objectives */
.hierarchy-parent.depth-1 {
  margin-left: 0;
}

.hierarchy-parent.depth-2 {
  margin-left: 0;
}

.hierarchy-parent.depth-3 {
  margin-left: 0;
}

.hierarchy-parent.depth-4 {
  margin-left: 0;
}

.hierarchy-parent.depth-5 {
  margin-left: 0;
}

/* Sub-objective badge removed - no longer used */

/* Add sub-objective button */
.task-add-subobjective-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  margin: -6px;
  margin-left: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
  opacity: 0;
}

.task-tile.is-objective:hover .task-add-subobjective-btn {
  opacity: 1;
}

.task-add-subobjective-btn:hover {
  background: rgba(34, 197, 94, 0.15);
  color: #16a34a;
}

.task-add-subobjective-btn:active {
  transform: scale(0.95);
}

:root[data-theme="dark"] .task-add-subobjective-btn:hover {
  background: rgba(34, 197, 94, 0.2);
  color: #4ade80;
}

/* Nested child objectives styling */
.hierarchy-child-objective {
  /* Distinguish child objectives from child tasks */
}

.hierarchy-child-objective .hierarchy-objective-tile {
  /* Slightly smaller padding for nested objectives */
  padding: 10px 14px;
}

/* Nested objective visual indicator removed - all objectives now look uniform */

/* Deep nesting visual cues - more subtle as depth increases */
.hierarchy-parent[data-depth="1"] > .hierarchy-objective-tile {
  background: var(--color-bg-secondary);
}

.hierarchy-parent[data-depth="2"] > .hierarchy-objective-tile,
.hierarchy-parent[data-depth="3"] > .hierarchy-objective-tile,
.hierarchy-parent[data-depth="4"] > .hierarchy-objective-tile,
.hierarchy-parent[data-depth="5"] > .hierarchy-objective-tile {
  background: rgba(0, 0, 0, 0.02);
}

:root[data-theme="dark"] .hierarchy-parent[data-depth="2"] > .hierarchy-objective-tile,
:root[data-theme="dark"] .hierarchy-parent[data-depth="3"] > .hierarchy-objective-tile,
:root[data-theme="dark"] .hierarchy-parent[data-depth="4"] > .hierarchy-objective-tile,
:root[data-theme="dark"] .hierarchy-parent[data-depth="5"] > .hierarchy-objective-tile {
  background: rgba(255, 255, 255, 0.02);
}

/* Ensure tree lines connect properly for nested objectives */
.hierarchy-child-objective .hierarchy-children {
  padding-left: 32px;
}

/* ===== Drag-and-Drop for Parent Reassignment ===== */

/* Draggable items use grab cursor to indicate drag capability */
.hierarchy-objective-tile[draggable="true"] {
  cursor: grab;
}

.hierarchy-objective-tile[draggable="true"]:active {
  cursor: grabbing;
}

/* Element being dragged */
.hierarchy-parent.dragging,
.task-tile.dragging {
  opacity: 0.5;
}

.hierarchy-objective-tile.dragging {
  opacity: 0.5;
  transform: scale(0.98);
}

/* Hovering over a valid drop target */
.hierarchy-objective-tile.drop-target-hover {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
  background: rgba(59, 130, 246, 0.15);
  transform: scale(1.01);
  transition: transform 0.1s ease, background 0.1s ease;
}

:root[data-theme="dark"] .hierarchy-objective-tile.drop-target-hover {
  background: rgba(59, 130, 246, 0.2);
}

/* Task section grid drop target (for dropping tasks to root) */
.task-section-grid.drop-target-hover {
  outline: 2px dashed var(--color-accent);
  outline-offset: 4px;
  background: rgba(59, 130, 246, 0.08);
  border-radius: 8px;
  transition: background 0.1s ease;
}

:root[data-theme="dark"] .task-section-grid.drop-target-hover {
  background: rgba(59, 130, 246, 0.15);
}

/* Drag reordering insertion indicators */
.hierarchy-parent.drop-insert-before::before,
.hierarchy-parent.drop-insert-after::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--color-accent);
  border-radius: 2px;
  z-index: 10;
  pointer-events: none;
}

.hierarchy-parent.drop-insert-before::before {
  top: -2px;
}

.hierarchy-parent.drop-insert-after::after {
  bottom: -2px;
}

/* Add position relative to hierarchy-parent for indicator positioning */
.hierarchy-parent {
  position: relative;
}

/* Task tiles are draggable (both under objectives and orphan tasks) */
.hierarchy-child-task .task-tile[draggable="true"],
.task-section-grid > .task-tile[draggable="true"] {
  cursor: pointer;
  -webkit-user-drag: element;
  user-select: none;
}

.mobile-objective-drag-ghost,
.task-tile.mobile-objective-drag-ghost,
.task-tile.stacked.mobile-objective-drag-ghost {
  position: fixed;
  top: 0;
  left: 0;
  right: auto;
  bottom: auto;
  flex: 0 0 auto;
  max-width: none;
  margin: 0;
  z-index: 10060;
  pointer-events: none;
  opacity: 0.94;
  box-sizing: border-box;
  transform: translate3d(-9999px, -9999px, 0);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.26);
}

body.objectives-mobile-dragging {
  user-select: none;
  -webkit-user-select: none;
  overscroll-behavior: none;
}

body.objectives-mobile-dragging .hierarchy-objective-tile.dragging {
  transform: none;
}

/* Move to root button for nested objectives */
.hierarchy-move-to-root-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  margin-left: 4px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
}

/* Only show for nested objectives (depth > 0) */
.hierarchy-parent[data-depth]:not([data-depth="0"]) .hierarchy-move-to-root-btn {
  display: inline-flex;
}

.hierarchy-objective-tile:hover .hierarchy-move-to-root-btn {
  opacity: 0.6;
}

.hierarchy-move-to-root-btn:hover {
  opacity: 1 !important;
  background: rgba(0, 0, 0, 0.05);
  color: var(--color-text);
}

:root[data-theme="dark"] .hierarchy-move-to-root-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

.hierarchy-move-to-root-btn svg {
  width: 12px;
  height: 12px;
}

/* Move to root button for child tasks (tasks under objectives) */
.task-move-to-root-btn {
  display: none;
  align-items: center;
  justify-content: center;
  padding: 4px;
  margin-left: 4px;
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  color: var(--color-text-muted);
  opacity: 0;
  transition: opacity 0.15s ease, background-color 0.15s ease;
}

/* Only show for child tasks */
.hierarchy-child-task .task-move-to-root-btn {
  display: inline-flex;
}

.task-tile:hover .task-move-to-root-btn {
  opacity: 0.6;
}

.task-move-to-root-btn:hover {
  opacity: 1 !important;
  background: rgba(0, 0, 0, 0.05);
  color: var(--color-text);
}

:root[data-theme="dark"] .task-move-to-root-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* Loading state for move-to-root buttons - prevent generic .loading styles */
.task-move-to-root-btn.loading,
.hierarchy-move-to-root-btn.loading {
  padding: 4px;
  pointer-events: none;
  opacity: 0.5;
}

.task-move-to-root-btn.loading::after,
.hierarchy-move-to-root-btn.loading::after {
  content: none;
}

.task-move-to-root-btn svg {
  width: 12px;
  height: 12px;
}

.task-card .task-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--color-text-muted);
  font-size: 15px;
}

.task-card .task-meta strong {
  color: var(--color-text);
  font-weight: 600;
}

.task-card footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.container-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.task-card code {
  font-family: "JetBrains Mono", "SFMono-Regular", Menlo, monospace;
  font-size: 14px;
}

.empty-state {
  background: var(--color-surface);
  border-radius: var(--radius-large);
  padding: 60px 40px;
  text-align: center;
  box-shadow: var(--shadow-soft);
  color: var(--color-text-muted);
}

.loading {
  text-align: center;
  color: var(--color-text-muted);
  padding: 48px 0;
  font-size: 16px;
}

.loading::after {
  content: '…';
  animation: ellipsis 1.2s infinite;
}

@keyframes ellipsis {
  0%, 20% { content: '.'; }
  40% { content: '..'; }
  60%, 100% { content: '...'; }
}

/* Skeleton loading screen */
@keyframes skeleton-shimmer {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

.skeleton-loading {
  padding: 0;
}

.skeleton-line {
  background: linear-gradient(90deg, var(--color-surface-muted) 25%, var(--color-border) 37%, var(--color-surface-muted) 63%);
  background-size: 800px 100%;
  animation: skeleton-shimmer 1.6s ease-in-out infinite;
  border-radius: 6px;
}

.skeleton-hero {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 20px;
}

.skeleton-hero-top {
  display: flex;
  align-items: center;
}

.skeleton-breadcrumb {
  width: 100px;
  height: 14px;
}

.skeleton-hero-body {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
}

.skeleton-hero-copy {
  flex: 1;
  min-width: 0;
}

.skeleton-title {
  width: 55%;
  height: 28px;
  margin-bottom: 10px;
  max-width: 400px;
}

.skeleton-subtitle {
  width: 80%;
  height: 16px;
  max-width: 560px;
}

.skeleton-hero-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}

.skeleton-pill {
  width: 80px;
  height: 28px;
  border-radius: 14px;
  background: linear-gradient(90deg, var(--color-surface-muted) 25%, var(--color-border) 37%, var(--color-surface-muted) 63%);
  background-size: 800px 100%;
  animation: skeleton-shimmer 1.6s ease-in-out infinite;
}

.skeleton-btn {
  width: 72px;
  height: 32px;
  border-radius: var(--radius-small);
  background: linear-gradient(90deg, var(--color-surface-muted) 25%, var(--color-border) 37%, var(--color-surface-muted) 63%);
  background-size: 800px 100%;
  animation: skeleton-shimmer 1.6s ease-in-out infinite;
}

.skeleton-banner {
  background: var(--color-surface);
  border-radius: var(--radius-large);
  padding: 16px 20px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.skeleton-banner-label {
  width: 100px;
  height: 12px;
}

.skeleton-banner-text {
  width: 60%;
  height: 16px;
  max-width: 400px;
}

.skeleton-cards {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.skeleton-card {
  background: var(--color-surface);
  border-radius: var(--radius-large);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.skeleton-card-header {
  padding: 16px 24px;
  border-bottom: 1px solid var(--color-border);
}

.skeleton-card-title {
  width: 140px;
  height: 18px;
}

.skeleton-card-body {
  padding: 20px 24px;
}

.skeleton-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}

.skeleton-meta-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--color-surface-muted);
  border-radius: var(--radius-small);
  padding: 10px 14px;
}

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

@media (max-width: 720px) {
  main.layout {
    padding: 24px;
    gap: 16px;
  }

  .top-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  /* Spacing handled by main.layout gap */

  .task-board-header {
    padding: 16px 20px;
    justify-content: stretch;
  }

  .task-board-header-actions {
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-end;
    row-gap: 10px;
  }

  .task-board-header-actions > .btn-ghost.btn-small,
  .task-board-header-actions > .task-search-wrapper > .btn-ghost.btn-small,
  .task-board-header-actions > .task-filter-wrapper > .btn-ghost.btn-small {
    width: 36px;
    height: 36px;
    padding: 0;
    justify-content: center;
  }

  .task-board-header-actions > .task-search-wrapper,
  .task-board-header-actions > .task-filter-wrapper {
    flex-shrink: 0;
  }

  .task-board-content {
    padding: 0 20px 20px 20px;
  }

  .control-row {
    flex-direction: column;
    align-items: stretch;
  }

  .single-row-controls {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .single-row-controls .flex-item {
    flex: 1 1 auto;
    min-width: 100%;
  }

  .dropdown-container {
    width: 100%;
  }

  .btn-dropdown {
    width: 100%;
    justify-content: center;
  }

  .dropdown-menu {
    left: 0;
    right: 0;
    min-width: 100%;
  }

  .env-controls {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .count-group {
    margin-left: 0;
    justify-content: flex-start;
  }

  .inline-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .form-footer {
    flex-direction: column;
    align-items: stretch;
  }

  .form-message {
    width: 100%;
  }

  .instructions-container textarea {
    min-height: 56px;
  }

  .textarea-controls {
    padding: 8px;
    flex-wrap: wrap;
    gap: 8px;
  }

  .compact-counters {
    gap: 12px;
  }

  .compact-counter {
    font-size: 12px;
  }

  .counter-display {
    min-width: 50px;
    font-size: 12px;
  }

  .btn-counter-mini {
    width: 28px;
    height: 28px;
  }

  .btn-icon-launch {
    width: 40px;
    height: 40px;
    font-size: 18px;
  }

  .status-hero {
    flex-direction: column;
    align-items: flex-start;
  }

  .task-error-hero {
    flex-direction: column;
  }

  .task-error-hero .btn-ghost {
    width: 100%;
  }

  .hero-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .latest-activity-content {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .latest-activity-meta {
    align-items: flex-start;
  }

  .latest-activity-jump {
    flex-direction: column;
    align-items: flex-start;
  }

  .sticky-latest-activity {
    width: 100%;
    min-width: 0;
  }

  .task-detail {
    padding: 16px 20px 48px;
  }

  /* Mobile-friendly textarea controls - keep submit on same line as agents */
  .textarea-controls {
    flex-wrap: wrap;
    gap: 8px;
  }

  .textarea-controls-left {
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start;
    flex: 1;
    min-width: 0;
  }

  .agent-selector {
    margin-right: 0;
  }

  .agent-card {
    transform: scale(0.95);
  }

  .agent-hint {
    display: none !important;
  }

  .control-separator {
    display: none;
  }

  /* Mobile-friendly status actions on task page */
  .status-actions {
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
    justify-content: flex-start;
  }

  .status-actions .btn-group {
    flex-shrink: 0;
  }

  .status-actions .btn-small {
    padding: 9px 13px;
    font-size: 13px;
    white-space: nowrap;
  }

  .status-actions .btn-secondary {
    min-width: auto;
  }

  .status-actions .status-pill {
    font-size: 11px;
    padding: 4px 10px;
  }

  /* Hero top mobile layout - icons flow horizontally, packed left */
  .hero-top {
    width: 100%;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    row-gap: 8px;
  }

  .hero-top > .btn-icon,
  .hero-top > .btn-ghost,
  .hero-top > .btn-group {
    flex-shrink: 0;
  }

  /* Push action buttons to the right edge of the row, breadcrumb stays left */
  .hero-top .breadcrumb {
    margin-right: auto;
  }

  /* Task hero spacing tightened for mobile */
  .task-hero {
    gap: 12px;
    margin-bottom: 4px;
  }

  /* Compact breadcrumb on mobile */
  .breadcrumb {
    font-size: 13px;
    gap: 4px;
  }

  .breadcrumb-link {
    padding: 4px 6px;
  }

  .task-context {
    font-size: 13px;
    flex-basis: 100%;
    flex-grow: 0;
    order: 10;
    margin-top: -4px;
  }

  .task-context:empty {
    display: none;
  }

  /* Smaller icon-only buttons in hero-top to fit more per row */
  .hero-top .btn-icon {
    width: 34px;
    height: 34px;
  }

  .hero-top .btn-ghost.btn-small {
    padding: 6px 10px;
    font-size: 12px;
  }

  /* Title scales down on mobile */
  .status-copy h1 {
    font-size: 24px;
  }

  .task-subtitle {
    font-size: 14px;
  }

  /* Task list side trigger for mobile */
  .task-list-side-trigger {
    left: 0;
    padding: 8px 10px;
  }

  .task-list-side-trigger .side-trigger-label {
    font-size: 11px;
  }
}

/* Extra small screens (iPhone 5/SE first gen - 320px) */
@media (max-width: 380px) {
  main.layout {
    padding: 16px;
  }

  .top-bar {
    gap: 8px;
  }

  .header-actions {
    width: 100%;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
  }

  .user-filter-group {
    flex: 1;
    min-width: 120px;
  }

  .brand-logo {
    height: 32px !important;
  }

  /* Instructions container */
  .instructions-container {
    padding: 8px;
  }

  /* Smaller toolbar icons */
  .btn-icon-mini {
    width: 28px;
    height: 28px;
  }

  .btn-icon-mini svg {
    width: 12px;
    height: 12px;
  }

  /* Agent cards compact */
  .agent-card {
    transform: scale(0.85);
  }

  .agent-selector {
    gap: 4px;
  }

  /* Task detail page */
  .task-detail {
    padding: 12px 16px 48px;
  }

  /* Move task list trigger out of the way */
  .task-list-side-trigger {
    padding: 6px 8px;
    font-size: 10px;
  }

  .task-list-side-trigger .side-trigger-icon {
    font-size: 14px;
  }

  .task-list-side-trigger .side-trigger-label {
    display: none;
  }

  /* Status actions on task page */
  .status-actions {
    gap: 6px;
  }

  .status-actions .btn-small {
    padding: 7px 11px;
    font-size: 12px;
  }

  .status-actions .status-pill {
    font-size: 10px;
    padding: 3px 8px;
  }

  /* Task title */
  .status-copy h1 {
    font-size: 22px;
  }

  .task-subtitle {
    font-size: 13px;
  }

  /* Hero top buttons */
  .hero-top .btn-icon {
    width: 30px;
    height: 30px;
  }

  .hero-top .btn-ghost.btn-small {
    padding: 4px 8px;
    font-size: 11px;
  }

  /* Drop redundant breadcrumb tail — page title already shows task name */
  .breadcrumb-separator,
  .breadcrumb-current {
    display: none;
  }

  .breadcrumb {
    font-size: 12px;
    gap: 2px;
  }

  .breadcrumb-link {
    padding: 4px 4px;
  }
}

.toast {
  position: fixed;
  bottom: 32px;
  right: 32px;
  background: var(--color-text);
  color: #fff;
  padding: 14px 22px;
  border-radius: var(--radius-small);
  box-shadow: var(--shadow-soft);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.2s ease, transform 0.2s ease, bottom 0.25s ease;
  /* Sit above the QA float button/panel (999998/999999) and the Ask
     launcher + drawer (1000000/1000001) so toasts in the bottom-right
     corner are never covered by those controls. */
  z-index: 1000002;
  max-width: 500px;
  word-wrap: break-word;
  white-space: pre-wrap;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

/* Swipe-to-dismiss (touch devices only — desktop falls through to the
   normal show/hide transitions above). Suppress the bottom-position
   transition during a drag so each frame of the gesture is instant, and
   bias scrolling to vertical so vertical swipes still pan the page. */
@media (hover: none), (pointer: coarse) {
  .toast {
    touch-action: pan-y;
    user-select: none;
    cursor: grab;
  }

  .toast.mobile-toast-swiping {
    transition: none !important;
    cursor: grabbing;
  }
}

.toast-success { background: var(--color-success); }
.toast-error { background: var(--color-danger); }
.toast-warning { background: var(--color-warning); color: #1f2a44; }
.toast-info { background: var(--color-accent); }

.connectivity-banner {
  position: fixed;
  top: 16px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(560px, calc(100vw - 32px));
  padding: 10px 14px;
  border: 1px solid var(--color-danger);
  border-radius: var(--radius-medium);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-soft);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -12px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 10002;
}

.connectivity-banner.show {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.connectivity-banner-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-danger);
  color: #fff;
  font-weight: 700;
  flex-shrink: 0;
}

.connectivity-banner-text {
  min-width: 0;
  font-size: 14px;
  line-height: 1.4;
}

/* ------------------------------------------------------------------
   Live-status pill (mobile-live-resync.js)
   A small, state-driven badge that surfaces SSE live-stream health:
   a pulsing "Reconnecting…" while the stream is down and a brief "Live"
   confirmation once it recovers (e.g. after the app returns from the
   background on a phone). Hidden during healthy steady state and during
   the first connect. Sits just below — and behind — the server-unreachable
   connectivity banner so the two never overlap.
   ------------------------------------------------------------------ */
.live-status-pill {
  position: fixed;
  top: calc(14px + env(safe-area-inset-top, 0px));
  left: 50%;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-soft);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -10px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 10001;
}

.live-status-pill.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

.live-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-success);
  flex-shrink: 0;
}

.live-status-pill.reconnecting {
  border-color: var(--color-warning);
}

.live-status-pill.reconnecting .live-status-dot {
  background: var(--color-warning);
  animation: liveStatusPulse 1s ease-in-out infinite;
}

.live-status-pill.live {
  border-color: var(--color-success);
}

.live-status-pill.live .live-status-dot {
  background: var(--color-success);
}

@keyframes liveStatusPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.3; transform: scale(0.65); }
}

@media (prefers-reduced-motion: reduce) {
  .live-status-pill.reconnecting .live-status-dot {
    animation: none;
  }
}

.toast.toast-undo {
  padding: 12px 14px 14px;
  overflow: hidden;
}

.toast-undo-content {
  display: flex;
  align-items: center;
  gap: 10px;
}

.toast-undo-message {
  flex: 1;
  font-weight: 600;
  line-height: 1.25;
}

.toast-undo-action {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  padding: 6px 10px;
  border-radius: 10px;
  font-weight: 700;
  cursor: pointer;
}

.toast-undo-action:hover {
  background: rgba(255, 255, 255, 0.22);
}

.toast-undo-action:disabled {
  opacity: 0.6;
  cursor: default;
}

.toast-undo-dismiss {
  appearance: none;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.9);
  width: 28px;
  height: 28px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}

.toast-undo-dismiss:hover {
  background: rgba(255, 255, 255, 0.16);
}

.toast-undo-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: rgba(255, 255, 255, 0.72);
  transform-origin: left;
  animation-name: toastUndoProgress;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  opacity: 0.95;
}

@keyframes toastUndoProgress {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(31, 42, 68, 0.08);
  color: var(--color-text-muted);
  font-size: 13px;
}

/* Drawer */
.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.32);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 90;
}

.drawer-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.reference-drawer {
  position: fixed;
  top: 0;
  right: -420px;
  width: 380px;
  height: 100vh;
  background: var(--color-surface);
  box-shadow: -24px 0 60px rgba(15, 23, 42, 0.18);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  transition: right 0.28s ease;
  z-index: 95;
}

.reference-drawer.active {
  right: 0;
}

.drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.drawer-section {
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow-y: auto;
}

.drawer-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-medium);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.drawer-card h4 {
  margin: 0;
  font-size: 17px;
}

.drawer-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.drawer-card li {
  font-size: 14px;
  color: var(--color-text-muted);
}

/* Forms */
form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.form-section {
  background: var(--color-surface);
  border-radius: var(--radius-medium);
  padding: 28px;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-section header h2,
.form-section header h3 {
  margin: 0;
}

.field-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.field-group label {
  font-size: 15px;
  font-weight: 600;
}

.field-group input,
.field-group select,
.field-group textarea {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  padding: 12px;
  font-size: 15px;
  font-family: inherit;
  background: var(--color-surface);
}

/* Custom Dropdown */
.custom-select {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  user-select: none;
}

.custom-select-trigger {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  padding: 12px;
  font-size: 15px;
  font-family: inherit;
  background: var(--color-surface);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: left;
  transition: border-color 0.2s ease;
  min-height: 44px;
  box-sizing: border-box;
  user-select: none;
}

.custom-select-trigger-text {
  user-select: none;
}

.custom-select-trigger:hover {
  border-color: var(--color-accent);
}

.custom-select-trigger.placeholder {
  color: var(--color-text-muted);
}

.custom-select-trigger.open {
  border-color: var(--color-accent);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* Flipped trigger (dropdown appears above) */
.custom-select-trigger.open.flipped {
  border-bottom-left-radius: var(--radius-small);
  border-bottom-right-radius: var(--radius-small);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.custom-select-arrow {
  margin-left: 8px;
  transition: transform 0.2s ease;
  color: var(--color-text-muted);
}

.custom-select-trigger.open .custom-select-arrow {
  transform: rotate(180deg);
}

.custom-select.disabled .custom-select-trigger {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

.custom-select.disabled .custom-select-trigger:hover {
  border-color: var(--color-border);
}

.custom-select-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 350px;
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-accent);
  border-top: none;
  border-bottom-left-radius: var(--radius-small);
  border-bottom-right-radius: var(--radius-small);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.15);
  z-index: 100;
  display: none;
}

.custom-select-dropdown.open {
  display: block;
}

/* Flipped dropdown (appears above trigger) */
.custom-select-dropdown.flipped {
  border-top: 1px solid var(--color-accent);
  border-bottom: none;
  border-radius: var(--radius-small) var(--radius-small) 0 0;
  box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.15);
}

.custom-select-option {
  padding: 12px;
  cursor: pointer;
  font-size: 15px;
  transition: background 0.15s ease;
  user-select: none;
}

.custom-select-option:hover {
  background: rgba(63, 114, 255, 0.08);
}

.custom-select-option.selected {
  background: rgba(63, 114, 255, 0.12);
  font-weight: 600;
  color: var(--color-accent);
}

.custom-select-option.disabled {
  color: var(--color-text-muted);
  cursor: not-allowed;
  font-style: italic;
}

.custom-select-option.disabled.hidden-placeholder {
  display: none;
}

.custom-select-option.disabled:hover {
  background: transparent;
}

.custom-select-option.custom-select-free-text-hint {
  font-style: italic;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
}

.custom-select-option.custom-select-free-text-hint:hover {
  color: var(--color-text);
  background: rgba(63, 114, 255, 0.08);
}

.custom-select-option-label {
  font-size: 14px;
  font-weight: 500;
}

.custom-select-option-desc {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: 2px;
  line-height: 1.3;
}

/* Custom Select Search */
.custom-select-search {
  padding: 8px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
  position: sticky;
  top: 0;
  z-index: 10;
}

.custom-select-search-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  font-size: 14px;
  font-family: inherit;
  background: var(--color-surface);
  color: var(--color-text);
  outline: none;
  transition: border-color 0.2s ease;
}

.custom-select-search-input:focus {
  border-color: var(--color-accent);
}

.custom-select-search-input::placeholder {
  color: var(--color-text-muted);
  opacity: 0.7;
}

.custom-select-options {
  max-height: 250px;
  overflow-y: auto;
}

/* ============================================
   Rich Environment Option Styles
   ============================================ */

/* Dropdown option card */
.custom-select-option.env-rich-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
}

.env-option-avatar {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-top: 1px;
}

.env-option-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.env-option-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--color-accent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.env-option-desc {
  font-size: 12px;
  color: var(--color-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.env-option-meta {
  font-size: 12px;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.env-meta-icon {
  vertical-align: -1px;
  opacity: 0.7;
  flex-shrink: 0;
}

.env-meta-sep {
  display: inline-block;
  width: 12px;
}

/* Trigger avatar (compact inline) */
.env-trigger-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
  vertical-align: middle;
  margin-right: 8px;
  flex-shrink: 0;
}

.env-trigger-name {
  vertical-align: middle;
}

/* Ensure the trigger text uses flex for avatar alignment */
.custom-select-trigger-text {
  display: inline-flex;
  align-items: center;
}

/* --- Template rich option (no avatar, lighter than environment) --- */
.custom-select-option.tmpl-rich-option {
  padding: 10px 12px;
}

.tmpl-option-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.tmpl-option-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--color-accent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tmpl-option-desc {
  font-size: 12px;
  color: var(--color-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.tmpl-option-meta {
  font-size: 12px;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ============================================
   Autocomplete Select Component
   ============================================ */
.autocomplete-select {
  position: relative;
  width: 100%;
}

.autocomplete-select-input {
  width: 100%;
  padding: 10px 32px 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  font-size: 15px;
  font-family: inherit;
  background: var(--color-surface);
  color: var(--color-text);
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.autocomplete-select-input:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(63,114,255,0.1);
}

.autocomplete-select-input::placeholder {
  color: var(--color-text-muted);
  opacity: 0.7;
}

.autocomplete-select-input:disabled {
  background: var(--color-bg-secondary);
  cursor: not-allowed;
  opacity: 0.6;
}

.autocomplete-select.disabled .autocomplete-select-input {
  background: var(--color-bg-secondary);
  cursor: not-allowed;
  opacity: 0.6;
}

.autocomplete-select.open .autocomplete-select-input {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.autocomplete-select-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 18px;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 4px 6px;
  line-height: 1;
  border-radius: var(--radius-small);
  transition: color 0.2s ease, background 0.2s ease;
}

.autocomplete-select-clear:hover {
  color: var(--color-text);
  background: rgba(0, 0, 0, 0.05);
}

.autocomplete-select-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-accent);
  border-top: none;
  border-radius: 0 0 var(--radius-small) var(--radius-small);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.15);
  z-index: 1000;
  display: none;
  max-height: 350px;
  overflow: hidden;
}

.autocomplete-select-dropdown.open {
  display: block;
}

.autocomplete-select-items {
  max-height: 300px;
  overflow-y: auto;
}

.autocomplete-select-item {
  display: flex;
  align-items: flex-start;
  padding: 8px 10px;
  cursor: pointer;
  transition: background-color 0.15s ease;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.autocomplete-select-item:last-child {
  border-bottom: none;
}

.autocomplete-select-item:hover,
.autocomplete-select-item.keyboard-selected {
  background: var(--color-accent);
  color: white;
}

.autocomplete-select-item:hover .autocomplete-select-item-secondary,
.autocomplete-select-item.keyboard-selected .autocomplete-select-item-secondary {
  color: rgba(255, 255, 255, 0.85);
}

.autocomplete-select-item:hover .autocomplete-select-item-icon,
.autocomplete-select-item.keyboard-selected .autocomplete-select-item-icon {
  color: rgba(255, 255, 255, 0.9);
}

.autocomplete-select-item-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-right: 8px;
  margin-top: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  font-size: 12px;
}

.autocomplete-select-item-icon.icon-public {
  color: var(--color-text-muted);
}

.autocomplete-select-item-icon.icon-private {
  color: var(--color-text-muted);
}

.autocomplete-select-item-content {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.autocomplete-select-item-primary {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  word-break: break-word;
}

.autocomplete-select-item-secondary {
  font-size: 11px;
  color: var(--color-text-muted);
  line-height: 1.35;
  margin-top: 1px;
  word-break: break-word;
}

.autocomplete-select-footer {
  padding: 8px 10px;
  text-align: center;
  font-size: 11px;
  color: var(--color-text-muted);
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-secondary);
}

.autocomplete-select-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px 12px;
  color: var(--color-text-muted);
  font-size: 14px;
}

.autocomplete-select-empty {
  padding: 20px 12px;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 14px;
}

.autocomplete-select-error {
  padding: 20px 12px;
  text-align: center;
  color: var(--color-error);
  font-size: 14px;
}

/* SVG icons for repo visibility */
.autocomplete-select-item-icon svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

select:required:invalid {
  color: var(--color-text-muted);
}

select option[value=""] {
  color: var(--color-text-muted);
}

.field-group input:focus,
.field-group select:focus,
.field-group textarea:focus {
  outline: 2px solid rgba(63,114,255,0.25);
  border-color: var(--color-accent);
}

/* Instructions container with embedded controls */
.instructions-container {
  position: relative;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  background: var(--color-surface);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.instructions-container:focus-within {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(63,114,255,0.1);
}

.instructions-container.drag-over {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(63,114,255,0.2);
  background: rgba(63,114,255,0.05);
}

.instructions-container.drag-over::after {
  content: 'Drop files here';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 8px 16px;
  background: var(--color-accent);
  color: white;
  border-radius: var(--radius-small);
  font-size: 14px;
  font-weight: 500;
  pointer-events: none;
  z-index: 10;
}

.instructions-container textarea {
  width: 100%;
  min-height: 60px;
  max-height: 300px;
  border: none;
  border-radius: var(--radius-small) var(--radius-small) 0 0;
  padding: 12px;
  font-size: 15px;
  line-height: 1.5;
  font-family: inherit;
  background: transparent;
  resize: none;
  outline: none;
  overflow-y: auto;
  transition: height 0.1s ease;
}

.task-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px 10px;
}

.task-name-row input {
  flex: 1;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-small);
  padding: 8px 10px;
  font-size: 14px;
  background: var(--color-surface-muted);
}

.task-name-row input:focus {
  border-color: var(--color-accent);
  background: var(--color-surface);
  outline: 2px solid rgba(63,114,255,0.1);
}

.task-name-row .btn-icon-mini {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Stage Task Button */
.btn-stage-task {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-small);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.btn-stage-task svg {
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.btn-stage-task:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: rgba(63, 114, 255, 0.04);
}

.btn-stage-task:hover svg {
  opacity: 1;
}

.btn-stage-task:active {
  transform: scale(0.98);
  background: rgba(63, 114, 255, 0.08);
}

.btn-stage-task:focus-visible {
  outline: 2px solid rgba(63, 114, 255, 0.25);
  outline-offset: 1px;
}

/* Shake animation for task name validation */
.task-name-row input.shake {
  animation: shakeWarning 0.5s ease-in-out;
  border-color: var(--color-danger);
}

.btn-icon-mini#toggle-task-name-btn[aria-pressed="true"] {
  background: var(--color-surface-muted);
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.textarea-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px;
  border-top: 1px solid var(--color-border);
  background: rgba(0, 0, 0, 0.02);
  border-radius: 0 0 var(--radius-small) var(--radius-small);
}

.textarea-controls-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Options menu in textarea controls */
.options-menu-container {
  position: relative;
}

.options-menu-container .dropdown-menu {
  left: 0;
  right: auto;
}

.options-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.options-menu-item input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  cursor: pointer;
  flex-shrink: 0;
  accent-color: var(--color-accent);
  vertical-align: middle;
}

.options-menu-item .option-icon {
  font-size: 14px;
  line-height: 1;
  flex-shrink: 0;
  font-variant-emoji: emoji;
  width: 20px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

#importFromJiraBtn .option-icon {
  font-size: 16px;
}

/* Model Configuration section in options menu */
.options-menu-section {
  padding: 4px 0;
}

.options-menu-label {
  padding: 6px 16px 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-text-muted);
}

.options-menu-select-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 16px;
}

.options-menu-select-row label {
  font-size: 13px;
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.options-menu-select-row select {
  flex: 0 1 auto;
  min-width: 130px;
  padding: 4px 8px;
  font-size: 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
}

.options-menu-select-row select option {
  background: var(--color-surface);
  color: var(--color-text);
}

.options-menu-select-row select:focus {
  outline: none;
  border-color: var(--color-accent);
}

.options-menu-actions-row {
  display: flex;
  justify-content: flex-end;
  padding: 4px 16px 8px;
}

#more-follow-up-model-config-section .options-menu-select-row select {
  max-width: 190px;
}

.options-menu-link-btn {
  background: none;
  border: none;
  padding: 0;
  color: var(--color-text-muted);
  font-size: 12px;
  cursor: pointer;
  text-decoration: underline;
}

.options-menu-link-btn:hover {
  color: var(--color-text);
}

.options-menu-link-btn:focus {
  outline: none;
  color: var(--color-text);
}

.options-menu-link-btn:disabled {
  opacity: 0.45;
  cursor: default;
  text-decoration: none;
}

.options-menu-item .option-text {
  flex: 1;
  white-space: nowrap;
}

/* Agent Selector - Modern Icon-Based Design */
.agent-selector {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: 8px;
  padding-inline-end: 6px;
  position: relative;
}

/* Agent selection hint message */
.agent-hint {
  display: none;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-accent);
  white-space: nowrap;
  pointer-events: none;
}

.agent-hint[data-visible="true"] {
  display: flex;
}

.agent-hint-arrow {
  font-size: 14px;
  line-height: 1;
  animation: pointLeft 1.5s ease-in-out infinite;
}

.agent-hint-text {
  line-height: 1;
}

@keyframes pointLeft {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-3px);
  }
}

/* Validation error hint when trying to submit with no agents */
.agent-selector[data-needs-selection="true"] {
  animation: shakeWarning 0.5s ease-in-out;
}

.agent-selector[data-needs-selection="true"]::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 12px;
  border: 2px solid var(--color-danger);
  animation: pulseWarning 1.5s ease-in-out 3;
  pointer-events: none;
  box-shadow: 0 0 0 4px rgba(229, 83, 104, 0.1);
}

@keyframes pulseWarning {
  0%, 100% {
    opacity: 0.3;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
}

@keyframes shakeWarning {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

.control-separator {
  width: 1px;
  height: 24px;
  background: var(--color-border);
  margin: 0 6px;
}

.agent-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1px;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: 8px;
  padding: 1px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  user-select: none;
}

.agent-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.agent-btn-decrement,
.agent-btn-increment {
  width: 16px;
  height: 28px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  opacity: 0.3;
  outline: none;
}

.agent-btn-decrement:hover,
.agent-btn-increment:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.04);
}

.agent-btn-decrement:active,
.agent-btn-increment:active {
  transform: scale(0.9);
}

.agent-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  transition: all 0.2s ease;
  cursor: pointer;
  border-radius: 6px;
}

.agent-icon:hover {
  background: rgba(0, 0, 0, 0.03);
}

.agent-icon svg {
  width: 16px;
  height: 16px;
  opacity: 0.5;
  transition: all 0.2s ease;
}

/* Count Badge */
.agent-count-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--color-text);
  color: white;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: all 0.2s ease;
  opacity: 0;
  transform: scale(0.8);
}

/* Active state - when count > 0 */
.agent-card[data-agent="claude"]:not([data-count="0"]) {
  background: linear-gradient(135deg, rgba(217, 119, 87, 0.1) 0%, rgba(217, 119, 87, 0.05) 100%);
  border-color: rgba(217, 119, 87, 0.4);
}

.agent-card[data-agent="claude"]:not([data-count="0"]) .agent-icon svg {
  opacity: 1;
  color: #D97757;
}

.agent-card[data-agent="claude"]:not([data-count="0"]) .agent-btn-decrement,
.agent-card[data-agent="claude"]:not([data-count="0"]) .agent-btn-increment {
  color: #D97757;
  opacity: 0.6;
}

.agent-card[data-agent="claude"]:not([data-count="0"]) .agent-btn-decrement:hover,
.agent-card[data-agent="claude"]:not([data-count="0"]) .agent-btn-increment:hover {
  opacity: 1;
  background: rgba(217, 119, 87, 0.1);
}

.agent-card[data-agent="claude"]:not([data-count="0"]) .agent-count-badge {
  background: #D97757;
  opacity: 1;
  transform: scale(1);
}

.agent-card[data-agent="codex"]:not([data-count="0"]) {
  background: linear-gradient(135deg, rgba(16, 163, 127, 0.1) 0%, rgba(16, 163, 127, 0.05) 100%);
  border-color: rgba(16, 163, 127, 0.4);
}

.agent-card[data-agent="codex"]:not([data-count="0"]) .agent-icon svg {
  opacity: 1;
  color: #10a37f;
}

.agent-card[data-agent="codex"]:not([data-count="0"]) .agent-btn-decrement,
.agent-card[data-agent="codex"]:not([data-count="0"]) .agent-btn-increment {
  color: #10a37f;
  opacity: 0.6;
}

.agent-card[data-agent="codex"]:not([data-count="0"]) .agent-btn-decrement:hover,
.agent-card[data-agent="codex"]:not([data-count="0"]) .agent-btn-increment:hover {
  opacity: 1;
  background: rgba(16, 163, 127, 0.1);
}

.agent-card[data-agent="codex"]:not([data-count="0"]) .agent-count-badge {
  background: #10a37f;
  opacity: 1;
  transform: scale(1);
}

.agent-card[data-agent="gemini"]:not([data-count="0"]) {
  background: linear-gradient(135deg, rgba(66, 133, 244, 0.1) 0%, rgba(66, 133, 244, 0.05) 100%);
  border-color: rgba(66, 133, 244, 0.4);
}

.agent-card[data-agent="gemini"]:not([data-count="0"]) .agent-icon svg {
  opacity: 1;
  color: #4285f4;
}

.agent-card[data-agent="gemini"]:not([data-count="0"]) .agent-btn-decrement,
.agent-card[data-agent="gemini"]:not([data-count="0"]) .agent-btn-increment {
  color: #4285f4;
  opacity: 0.6;
}

.agent-card[data-agent="gemini"]:not([data-count="0"]) .agent-btn-decrement:hover,
.agent-card[data-agent="gemini"]:not([data-count="0"]) .agent-btn-increment:hover {
  opacity: 1;
  background: rgba(66, 133, 244, 0.1);
}

.agent-card[data-agent="gemini"]:not([data-count="0"]) .agent-count-badge {
  background: #4285f4;
  opacity: 1;
  transform: scale(1);
}

/* Hover effects for specific agents */
.agent-card[data-agent="claude"]:hover {
  border-color: rgba(217, 119, 87, 0.6);
  box-shadow: 0 4px 16px rgba(217, 119, 87, 0.15);
}

.agent-card[data-agent="codex"]:hover {
  border-color: rgba(16, 163, 127, 0.6);
  box-shadow: 0 4px 16px rgba(16, 163, 127, 0.15);
}

.agent-card[data-agent="gemini"]:hover {
  border-color: rgba(66, 133, 244, 0.6);
  box-shadow: 0 4px 16px rgba(66, 133, 244, 0.15);
}

/* Bob (IBM) - Indigo #6366F1 */
.agent-card[data-agent="bob"]:not([data-count="0"]) {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(99, 102, 241, 0.05) 100%);
  border-color: rgba(99, 102, 241, 0.4);
}

.agent-card[data-agent="bob"]:not([data-count="0"]) .agent-icon svg {
  opacity: 1;
  color: #6366F1;
}

.agent-card[data-agent="bob"]:not([data-count="0"]) .agent-btn-decrement,
.agent-card[data-agent="bob"]:not([data-count="0"]) .agent-btn-increment {
  color: #6366F1;
  opacity: 0.6;
}

.agent-card[data-agent="bob"]:not([data-count="0"]) .agent-btn-decrement:hover,
.agent-card[data-agent="bob"]:not([data-count="0"]) .agent-btn-increment:hover {
  opacity: 1;
  background: rgba(99, 102, 241, 0.1);
}

.agent-card[data-agent="bob"]:not([data-count="0"]) .agent-count-badge {
  background: #6366F1;
  opacity: 1;
  transform: scale(1);
}

.agent-card[data-agent="bob"]:hover {
  border-color: rgba(99, 102, 241, 0.6);
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.15);
}

/* Grok (xAI) - black/near-black with subtle tint so it's visible on light + dark themes */
.agent-card[data-agent="grok"]:not([data-count="0"]) {
  background: linear-gradient(135deg, rgba(20, 20, 20, 0.10) 0%, rgba(20, 20, 20, 0.05) 100%);
  border-color: rgba(20, 20, 20, 0.45);
}

.agent-card[data-agent="grok"]:not([data-count="0"]) .agent-icon svg {
  opacity: 1;
  color: #111111;
}

.agent-card[data-agent="grok"]:not([data-count="0"]) .agent-btn-decrement,
.agent-card[data-agent="grok"]:not([data-count="0"]) .agent-btn-increment {
  color: #111111;
  opacity: 0.6;
}

.agent-card[data-agent="grok"]:not([data-count="0"]) .agent-btn-decrement:hover,
.agent-card[data-agent="grok"]:not([data-count="0"]) .agent-btn-increment:hover {
  opacity: 1;
  background: rgba(20, 20, 20, 0.1);
}

.agent-card[data-agent="grok"]:not([data-count="0"]) .agent-count-badge {
  background: #111111;
  opacity: 1;
  transform: scale(1);
}

.agent-card[data-agent="grok"]:hover {
  border-color: rgba(20, 20, 20, 0.6);
  box-shadow: 0 4px 16px rgba(20, 20, 20, 0.18);
}

/* Dark theme: invert the grok color so the xAI logo stays visible. */
:root[data-theme="dark"] .agent-card[data-agent="grok"]:not([data-count="0"]) {
  background: linear-gradient(135deg, rgba(240, 240, 240, 0.12) 0%, rgba(240, 240, 240, 0.05) 100%);
  border-color: rgba(240, 240, 240, 0.45);
}
:root[data-theme="dark"] .agent-card[data-agent="grok"]:not([data-count="0"]) .agent-icon svg,
:root[data-theme="dark"] .agent-card[data-agent="grok"]:not([data-count="0"]) .agent-btn-decrement,
:root[data-theme="dark"] .agent-card[data-agent="grok"]:not([data-count="0"]) .agent-btn-increment {
  color: #f5f5f5;
}
:root[data-theme="dark"] .agent-card[data-agent="grok"]:not([data-count="0"]) .agent-count-badge {
  background: #f5f5f5;
  color: #111;
}
:root[data-theme="dark"] .agent-card[data-agent="grok"]:hover {
  border-color: rgba(240, 240, 240, 0.6);
  box-shadow: 0 4px 16px rgba(240, 240, 240, 0.18);
}

.agent-card.agent-disabled {
  display: none;
}
.judge-agent-btn.agent-disabled {
  display: none;
}
.agent-card.agent-disabled .agent-icon {
  cursor: default;
}

/* Focus states for accessibility */
.agent-card:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Legacy support for old counter classes */
.compact-counters {
  display: flex;
  align-items: center;
  margin-right: 8px;
  gap: 16px;
}

.compact-counter {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--color-text-secondary);
}

.btn-counter-mini {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.btn-counter-mini:hover {
  background: var(--color-accent);
  color: #fff;
  border-color: var(--color-accent);
}

.btn-counter-mini:active {
  transform: scale(0.95);
}

.counter-display {
  min-width: 60px;
  text-align: center;
  font-weight: 500;
  color: var(--color-text);
  user-select: none;
}

.compact-counter[data-agent="claude"] .counter-display {
  color: #D97757;
  font-weight: 600;
}

.compact-counter[data-agent="codex"] .counter-display {
  color: #10a37f;
  font-weight: 600;
}

.compact-counter[data-agent="gemini"] .counter-display {
  color: #4285f4;
  font-weight: 600;
}

.compact-counter[data-agent="bob"] .counter-display {
  color: #6366F1;
  font-weight: 600;
}

.btn-icon-launch {
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font-size: 18px;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-icon-launch:hover:not(:disabled) {
  background: rgba(63, 114, 255, 0.08);
  border-color: var(--color-accent);
  color: var(--color-accent);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(63, 114, 255, 0.15);
}

.btn-icon-launch:active:not(:disabled) {
  transform: translateY(0);
  background: rgba(63, 114, 255, 0.15);
}

.btn-icon-launch:disabled {
  background: var(--color-surface);
  color: var(--color-text-muted);
  cursor: not-allowed;
  opacity: 0.4;
}

.btn-icon-launch.btn-loading {
  width: auto;
  min-width: 36px;
  padding: 0 12px;
  background: rgba(63, 114, 255, 0.08);
  border-color: var(--color-accent);
  color: var(--color-accent);
  font-size: 13px;
  font-weight: 500;
}

.field-hint {
  color: var(--color-text-muted);
  font-size: 14px;
}

.step-indicator {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  color: var(--color-text-muted);
}

.step-indicator .bullet {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  background: rgba(63,114,255,0.12);
  color: var(--color-accent);
}

.wizard-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}

.template-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.template-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-medium);
  padding: 20px;
  background: var(--color-surface);
  display: flex;
  flex-direction: column;
  gap: 10px;
  cursor: pointer;
  transition: border 0.2s ease, box-shadow 0.2s ease;
}

.template-card h3 {
  margin: 0;
  font-size: 18px;
  letter-spacing: -0.01em;
}

.template-card p {
  margin: 0;
}

.template-card:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-soft);
}

.template-card.active {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(63,114,255,0.12);
}

.template-card .template-meta {
  color: var(--color-text-muted);
  font-size: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.parameter-group {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.parameter-pill {
  padding: 6px 10px;
  background: rgba(31,42,68,0.08);
  border-radius: 999px;
  font-size: 13px;
  color: var(--color-text-muted);
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: default;
}

/* Branch selection pills - blue */
.parameter-pill.pill-branch {
  background: #e3f2fd;
  color: #1976d2;
  border: 1px solid #90caf9;
}

/* Environment variable pills - orange/amber */
.parameter-pill.pill-env {
  background: #fff3e0;
  color: #e65100;
  border: 1px solid #ffb74d;
}

/* Attachment pills - green */
.parameter-pill.pill-attachment {
  background: #e8f5e9;
  color: #2e7d32;
  border: 1px solid #81c784;
}

:root[data-theme="dark"] .parameter-pill.pill-branch {
  background: rgba(25, 118, 210, 0.18);
  color: #cbdfff;
  border: 1px solid rgba(59, 130, 246, 0.45);
}

:root[data-theme="dark"] .parameter-pill.pill-env {
  background: rgba(255, 184, 77, 0.16);
  color: #fcdca6;
  border: 1px solid rgba(255, 184, 77, 0.35);
}

:root[data-theme="dark"] .parameter-pill.pill-attachment {
  background: rgba(46, 182, 125, 0.14);
  color: #b8f3da;
  border: 1px solid rgba(46, 182, 125, 0.35);
}

.review-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-medium);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.review-card h3 {
  margin: 0;
  font-size: 17px;
}

.review-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.review-list li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 15px;
}

.review-list li span {
  color: var(--color-text-muted);
}

.summary-box {
  background: rgba(63,114,255,0.08);
  border-radius: var(--radius-medium);
  padding: 16px 18px;
  color: var(--color-text-muted);
  font-size: 14px;
  white-space: pre-wrap;
  line-height: 1.6;
  border: 2px solid var(--color-border);
}

.summary-box.scroll-box {
  max-height: 120px;
  overflow-y: auto;
}

/* Collapsible execution notes */
.execution-notes-collapsed {
  max-height: calc(1.6em * 3 + 32px); /* 3 lines at 1.6 line-height + vertical padding */
  overflow: hidden;
  position: relative;
}

.execution-notes-collapsed.has-overflow::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2em;
  background: linear-gradient(to bottom, transparent, rgba(63,114,255,0.08));
  pointer-events: none;
}

[data-theme="dark"] .execution-notes-collapsed.has-overflow::after {
  background: linear-gradient(to bottom, transparent, rgba(63,114,255,0.12));
}

.execution-notes-expanded {
  max-height: none;
  overflow-y: auto;
}

/* When Task Details execution notes are expanded, lift the card-content's
   3000px max-height cap so extremely long content isn't clipped.
   - :not(.collapsed) keeps the card's own collapse animation working
     (.detail-card.collapsed .detail-card-content sets max-height: 0).
   - :not(.expanded) defers explicitly to the maximized-card rules at
     .detail-card.expanded .detail-card-content, which already use
     max-height: calc(100vh - 80px) !important. Without this guard the
     override only loses by accident of the !important above. */
#execution-card:not(.collapsed):not(.expanded).notes-expanded-override .detail-card-content {
  max-height: none;
}

.btn-show-more {
  display: block;
  width: 100%;
  padding: 6px 0;
  background: none;
  border: 2px solid var(--color-border);
  border-top: none;
  border-radius: 0 0 var(--radius-medium) var(--radius-medium);
  color: var(--color-primary);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  text-align: center;
  transition: background 0.15s;
}

.btn-show-more:hover {
  background: var(--color-surface-muted);
}

/* When toggle is visible, remove bottom border-radius from the notes box */
.summary-box-wrapper .has-overflow {
  border-radius: var(--radius-medium) var(--radius-medium) 0 0;
}

/* Click-to-copy on key fields */
.copyable-value {
  cursor: pointer;
}

.copyable-value::after {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: 4px;
  opacity: 0;
  transition: opacity 0.15s;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='13' height='13' rx='2' ry='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='13' height='13' rx='2' ry='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background-color: currentColor;
  vertical-align: middle;
}

.copyable-value:hover::after {
  opacity: 0.6;
}

.copyable-value.copied::after {
  -webkit-mask-image: none;
  mask-image: none;
  background-color: transparent;
  content: '✓';
  opacity: 1;
  color: var(--color-success, #28a745);
  font-size: 11px;
  font-weight: bold;
  width: auto;
  height: auto;
}

#output-summary {
  background: transparent;
  border: none;
  padding: 0;
  max-height: 240px;
  white-space: normal; /* Override pre-wrap from .summary-box */
}

/* Shared Markdown Styles */
#output-summary h1, .summary-cell h1 {
  font-size: 18px;
  margin: 16px 0 12px 0;
}

#output-summary h1:first-child, .summary-cell h1:first-child {
  margin-top: 0;
}

#output-summary h2, .summary-cell h2 {
  font-size: 16px;
  margin: 14px 0 10px 0;
}

#output-summary h3, .summary-cell h3 {
  font-size: 14px;
  margin: 12px 0 8px 0;
}

#output-summary p, .summary-cell p {
  margin: 10px 0;
}

#output-summary p:empty, .summary-cell p:empty {
  display: none;
}

#output-summary ul, #output-summary ol,
.summary-cell ul, .summary-cell ol {
  margin: 10px 0;
  padding-left: 24px;
}

#output-summary li, .summary-cell li {
  margin: 4px 0;
}

#output-summary pre, .summary-cell pre {
  margin: 12px 0;
  padding: 0;
  border-radius: 4px;
  overflow-x: auto;
  border: 1px solid #444;
  background: #2d2d2d; /* Ensure dark bg for code */
  color: #f8f8f2;
}

#output-summary pre code, .summary-cell pre code {
  display: block;
  padding: 12px;
  white-space: pre;
  background: transparent;
  color: inherit;
}

#output-summary code, .summary-cell code {
  font-family: 'Courier New', Courier, monospace;
  font-size: 13px;
}

#output-summary table, .summary-cell table {
  border-collapse: collapse;
  width: 100%;
  margin: 12px 0;
  font-size: 14px;
}

#output-summary table th, #output-summary table td,
.summary-cell table th, .summary-cell table td {
  border: 1px solid var(--color-border);
  padding: 8px;
}

/* Remove white-space: pre-wrap from summary-cell to allow markdown rendering to control spacing */
.summary-cell {
  font-size: 13px;
  line-height: 1.6;
  max-width: 300px;
  text-align: left;
  /* white-space: pre-wrap; REMOVED */
  white-space: normal;
  
  /* Initial Height / Scroll Logic */
  min-height: 4.5em; 
  max-height: calc(90vh - 350px); 
  overflow-y: auto; 
  display: block; 
  
  /* Aesthetics */
  padding: 4px 12px 4px 4px; 
  border: 1px solid transparent;
  border-radius: var(--radius-small);
  transition: border-color 0.1s, background-color 0.1s;
  
  /* Custom Scrollbar for neatness */
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}
  padding: 8px 12px;
  text-align: left;
}

#output-summary table th {
  background: rgba(63, 114, 255, 0.08);
  font-weight: 600;
  color: var(--color-text);
}

#output-summary table tr:nth-child(even) {
  background: rgba(0, 0, 0, 0.02);
}

#output-summary table tr:hover {
  background: rgba(63, 114, 255, 0.05);
}

/* Diff syntax highlighting */
.diff-line-content .diff-prefix {
  display: inline-block;
  width: 1ch;
  margin-right: 0.5ch;
  font-weight: bold;
}

.diff-line.diff-add .diff-prefix {
  color: #22863a;
}

.diff-line.diff-remove .diff-prefix {
  color: #cb2431;
}

.diff-line-content .hljs-keyword {
  font-weight: 600;
}

.card-placeholder {
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-medium);
  padding: 24px;
  text-align: center;
  color: var(--color-text-muted);
}

/* Task detail layout */
.task-layout {
  display: grid;
  gap: 24px;
}

.task-panel {
  background: var(--color-surface);
  border-radius: var(--radius-medium);
  padding: 28px;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.task-panel header h2 {
  margin: 0;
}

.status-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 10px 10px;
}

.meta-grid > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--color-surface-muted);
  border-radius: var(--radius-small);
  padding: 10px 14px;
  border: 1px solid transparent;
  transition: border-color 0.15s ease;
}

.meta-grid > div:hover {
  border-color: var(--color-border);
}

.meta-grid dt {
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.meta-grid dd {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
}

.context-usage-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 20px;
}

.context-usage-bar {
  width: 128px;
  height: 8px;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.24);
}

.context-usage-fill {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--color-accent);
  transition: width 0.2s ease, background-color 0.2s ease;
}

.context-usage-fill.context-usage-ok {
  background: var(--color-success);
}

.context-usage-fill.context-usage-warning {
  background: var(--color-warning);
}

.context-usage-fill.context-usage-danger {
  background: var(--color-danger);
}

#meta-context-usage-wrapper.context-usage-clickable .context-usage-meta {
  cursor: pointer;
  border-radius: 4px;
  padding: 2px 4px;
  margin: -2px -4px;
  transition: background-color 0.15s ease;
}

#meta-context-usage-wrapper.context-usage-clickable .context-usage-meta:hover,
#meta-context-usage-wrapper.context-usage-clickable .context-usage-meta:focus-visible {
  background: var(--color-bg-secondary);
  outline: none;
}

#meta-context-usage-wrapper.context-usage-clickable .context-usage-meta:focus-visible {
  box-shadow: 0 0 0 2px var(--color-primary);
}

.context-usage-modal-summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.context-usage-modal-percent {
  font-size: 28px;
  font-weight: 600;
  line-height: 1;
}

.context-usage-modal-window {
  font-size: 13px;
  color: var(--color-text-secondary);
}

.context-usage-modal-bar {
  width: 100%;
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.24);
}

.context-usage-modal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.context-usage-modal-table tr + tr td {
  border-top: 1px solid var(--color-border);
}

.context-usage-modal-table td {
  padding: 8px 0;
  vertical-align: top;
}

.context-usage-modal-table td.context-usage-modal-label {
  color: var(--color-text-secondary);
}

.context-usage-modal-table td.context-usage-modal-value {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.context-usage-modal-table tr.context-usage-modal-total td {
  font-weight: 600;
  color: var(--color-text-primary);
}

.log-window {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  background: #0f172a;
  color: #dbe4ff;
  font-family: "JetBrains Mono", "SFMono-Regular", Menlo, monospace;
  font-size: 13px;
  padding: 18px;
  max-height: 400px;
  overflow-y: auto;
}

.log-line {
  white-space: pre-wrap;
  word-break: break-word;
  padding: 2px 0;
  line-height: 1.6;
}

.log-timestamp {
  color: #64748b;
  margin-right: 8px;
  font-size: 12px;
}

.log-success {
  color: #6ee7b7;
}

.log-error {
  color: #fca5a5;
}

.log-warning {
  color: #fcd34d;
}

.log-info {
  color: #93c5fd;
}

.log-json-hidden {
  background: rgba(100, 116, 139, 0.1);
  border: 1px solid rgba(100, 116, 139, 0.2);
  border-radius: 6px;
  padding: 6px 12px;
  margin: 4px 0;
  color: #94a3b8;
  font-size: 12px;
  font-style: italic;
}

.log-duration {
  opacity: 0.7;
  font-size: 13px;
  font-weight: normal;
  margin-left: 8px;
}

.log-result {
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 8px;
  margin: 12px 0;
  overflow: hidden;
}

.log-result-header {
  background: rgba(16, 185, 129, 0.15);
  padding: 8px 12px;
  font-weight: 600;
  color: #6ee7b7;
  border-bottom: 1px solid rgba(16, 185, 129, 0.3);
}

.log-result-body {
  padding: 12px;
  white-space: pre-wrap;
  word-break: break-word;
  color: #d1fae5;
  line-height: 1.6;
}

.log-result-footer {
  background: rgba(16, 185, 129, 0.08);
  padding: 6px 12px;
  font-size: 12px;
  color: #6ee7b7;
  border-top: 1px solid rgba(16, 185, 129, 0.2);
}

.diff-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.diff-item {
  padding: 14px 16px;
  background: rgba(63,114,255,0.08);
  border-radius: var(--radius-small);
  font-family: "JetBrains Mono", monospace;
  font-size: 14px;
  color: var(--color-text);
}

.diff-repo-header {
  margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.diff-repo-info {
  flex: 1;
  min-width: 0;
}

.file-diff {
  margin-top: 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  background: var(--color-surface);
  overflow: hidden;
}

.file-diff-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: rgba(63,114,255,0.05);
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
  user-select: none;
  font-size: 13px;
  font-weight: 500;
}

.file-diff-header:hover {
  background: rgba(63,114,255,0.1);
}

.file-diff-name {
  font-family: "JetBrains Mono", monospace;
  color: var(--color-text);
}

.file-diff-toggle {
  color: var(--color-text-muted);
  transition: transform 0.2s ease;
  font-size: 10px;
}

.file-diff-toggle-btn {
  font-size: 18px !important;
}

.mobile-file-review-nav {
  display: none;
}

.file-diff-content {
  max-height: 400px;
  overflow-y: auto;
  transition: max-height 0.3s ease;
}

.file-diff-content.collapsed {
  max-height: 0;
  overflow: hidden;
}

.file-diff-image-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: var(--color-bg-primary);
}

.file-diff-image-preview img {
  max-width: 100%;
  max-height: 360px;
  object-fit: contain;
  border-radius: var(--radius-small);
}

.file-diff-image-preview--message {
  color: var(--color-text-muted);
  font-size: 13px;
  font-style: italic;
}

.file-page-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 8px 0;
  font-size: 13px;
}

.page-arrow-btn {
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  color: var(--color-text-muted);
  padding: 4px 10px;
  cursor: pointer;
  font-size: 13px;
}

.page-arrow-btn:hover:not(:disabled) {
  background: var(--color-surface-hover);
  color: var(--color-text);
}

.page-arrow-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.page-num-btn {
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius-small);
  color: var(--color-text-muted);
  padding: 4px 8px;
  min-width: 28px;
  cursor: pointer;
  font-size: 13px;
}

.page-num-btn:hover {
  background: var(--color-surface-hover);
  color: var(--color-text);
}

.page-num-btn.active {
  background: rgba(63,114,255,0.15);
  color: var(--color-primary);
  border-color: var(--color-primary);
  font-weight: 600;
}

.page-ellipsis {
  color: var(--color-text-muted);
  padding: 0 4px;
}

.diff-hunk {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
}

.diff-hunk-header {
  background: rgba(63,114,255,0.08);
  color: var(--color-text-muted);
  padding: 6px 14px;
  font-size: 11px;
  border-top: 1px solid var(--color-border);
}

.diff-line {
  display: flex;
  padding: 0;
  white-space: pre;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  line-height: 1.5;
}

.diff-line-num {
  display: inline-block;
  padding: 2px 8px;
  text-align: right;
  user-select: none;
  min-width: 50px;
  background: rgba(0, 0, 0, 0.1);
  color: var(--color-text-muted);
  border-right: 1px solid var(--color-border);
  font-size: 11px;
}

.diff-line-num-old {
  border-right: none;
}

.diff-line-num-new {
  border-right: 1px solid var(--color-border);
}

.diff-line-content {
  flex: 1;
  padding: 2px 14px;
  white-space: pre-wrap;
  word-break: break-all;
  overflow-wrap: break-word;
}

.diff-add {
  background: rgba(34, 197, 94, 0.1);
}

.diff-add .diff-line-content {
  color: #22c55e;
}

.diff-remove {
  background: rgba(239, 68, 68, 0.1);
}

.diff-remove .diff-line-content {
  color: #ef4444;
}

.diff-context .diff-line-content {
  color: var(--color-text-muted);
}

.diff-meta {
  color: var(--color-text-muted);
  font-style: italic;
  font-size: 11px;
}

/* Word-level diff highlighting */
.diff-word-add {
  background: rgba(34, 197, 94, 0.35);
  border-radius: 2px;
  padding: 0 1px;
}

.diff-word-remove {
  background: rgba(239, 68, 68, 0.35);
  border-radius: 2px;
  padding: 0 1px;
}

/* Maximized individual file diff */
.file-diff.maximized {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  margin: 0;
  border-radius: 0;
  display: flex;
  flex-direction: column;
}

.file-diff.maximized .file-diff-header {
  flex-shrink: 0;
}

.file-diff.maximized .file-diff-content {
  max-height: none;
  flex: 1;
  overflow-y: auto;
}

.file-diff.maximized .file-editor-container.editor-active {
  flex: 1;
  display: flex !important;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.file-diff.maximized .monaco-editor-wrapper {
  flex: 1;
  min-height: 0;
  height: 100% !important;
  display: flex;
  flex-direction: column;
}

.file-diff.maximized .monaco-editor-wrapper > * {
  flex: 1;
  min-height: 0;
}

.command-block {
  position: relative;
  border-radius: var(--radius-small);
  background: #0f172a;
  color: #dbe4ff;
  padding: 18px 48px 18px 18px;
  font-family: "JetBrains Mono", monospace;
  font-size: 14px;
}

.command-block button {
  position: absolute;
  top: 12px;
  right: 12px;
}

/* Copy file dropdown menu (appended to body, not using .dropdown-menu to avoid specificity conflicts) */
.copy-file-dropdown {
  position: fixed;
  min-width: 200px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  overflow: visible;
}

.copy-file-dropdown .dropdown-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 10px 14px;
}

.copy-file-dropdown .dropdown-item .option-icon {
  flex-shrink: 0;
  color: var(--color-text-muted);
}

.copy-file-dropdown .dropdown-item:hover .option-icon {
  color: var(--color-accent);
}

.terminal-body {
  margin: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--color-background);
  color: var(--color-text);
  overflow: hidden;
}

.terminal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 32px;
  background: var(--color-surface);
  box-shadow: var(--shadow-soft);
  gap: 16px;
}

:root[data-theme="dark"] .terminal-header {
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(10px);
}

.terminal-header > div:first-child {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.terminal-header h1 {
  margin: 0;
  font-size: 16px;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.terminal-header #terminal-subtitle {
  margin: 0;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

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


.terminal-status {
  font-size: 14px;
  color: var(--color-text-muted);
}

.terminal-status[data-variant="success"] {
  color: var(--color-success);
}

.terminal-status[data-variant="error"] {
  color: var(--color-danger);
}

.terminal-status[data-variant="info"] {
  color: var(--color-text-muted);
}

.terminal-container {
  flex: 1;
  min-height: 0; /* Allow flex item to shrink below content size */
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-medium);
  overflow: hidden;
}

.terminal-container .xterm {
  padding: 12px;
  height: 100%; /* Fill container height */
  min-height: 0; /* Allow shrinking */
}

html.terminal-embedded,
body.terminal-embedded {
  height: 100%;
  min-height: 100%;
}

body.terminal-embedded {
  justify-content: stretch;
}

body.terminal-embedded .terminal-header {
  display: none;
}

body.terminal-embedded main.terminal-main {
  padding: 0;
  gap: 0;
  background: #0f172a;
}

body.terminal-embedded .terminal-status {
  padding: 10px 14px 0;
}

body.terminal-embedded .terminal-container {
  border: 0;
  border-radius: 0;
  background: #0f172a;
}

body.terminal-embedded .terminal-container .xterm {
  padding: 10px 14px 14px;
}

/* Terminal scrollbar: the vendor xterm css forces overflow-y: scroll (a
   permanent gutter even with no content) plus a hard #000 thumb that is nearly
   invisible on the dark terminal, so it looks broken and is hard to grab. Use a
   selector more specific than the vendor rule so it wins regardless of
   stylesheet load order: only show the bar when there is something to scroll,
   and give it a visible, grabbable thumb. */
.terminal-container .xterm .xterm-viewport,
.terminal-container .xterm-viewport {
  overflow-y: auto !important;
  background-color: transparent !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.55) transparent;
}
.terminal-container .xterm .xterm-viewport::-webkit-scrollbar {
  width: 12px;
}
.terminal-container .xterm .xterm-viewport::-webkit-scrollbar-track {
  background: transparent;
}
.terminal-container .xterm .xterm-viewport::-webkit-scrollbar-thumb {
  background-color: rgba(148, 163, 184, 0.55);
  border-radius: 6px;
  border: 3px solid transparent;
  background-clip: content-box;
}
.terminal-container .xterm .xterm-viewport::-webkit-scrollbar-thumb:hover {
  background-color: rgba(148, 163, 184, 0.85);
  background-clip: content-box;
}

@media (max-width: 768px) {
  .terminal-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 20px;
  }

  main.terminal-main {
    padding: 0 12px 0 12px;
  }
}

@media (max-width: 768px) {
  header.app-header {
    padding: 24px;
  }

  .header-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .header-actions {
    width: 100%;
  }

  .detail-card-header .header-actions {
    width: auto;
    margin-left: auto;
    flex-wrap: nowrap;
    justify-content: flex-end;
  }

  /* Responsive notification banner */
  .notification-banner-content {
    flex-direction: column;
    gap: 12px;
  }

  .notification-banner-text {
    text-align: center;
  }

  .notification-banner-actions {
    width: 100%;
  }

  .notification-banner-actions button {
    flex: 1;
  }

  main {
    padding: 32px 20px 64px;
  }

  .hero {
    padding: 32px;
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .inline-form {
    flex-direction: column;
    align-items: stretch;
  }

  .reference-drawer {
    width: 100%;
    right: -100%;
  }
}

/* Approve Modal */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal[hidden] {
  display: none;
}

.modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
}

.modal-content {
  position: relative;
  background: var(--color-surface);
  border-radius: var(--radius-large);
  border: 1px solid var(--color-border);
  max-width: 600px;
  width: 90%;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  transition: width 0.25s ease, height 0.25s ease, max-width 0.25s ease, max-height 0.25s ease, border-radius 0.25s ease, top 0.25s ease, left 0.25s ease;
}

/* Approve modal - green action button */
.modal.profound-approve-modal .modal-content {
  max-width: 560px;
}

.modal.profound-approve-modal .btn-primary {
  background: linear-gradient(135deg, #2eb67d 0%, #25a268 100%);
}

.modal.profound-approve-modal .btn-primary:hover:not(:disabled) {
  box-shadow: 0 4px 12px rgba(46, 182, 125, 0.3);
  background: linear-gradient(135deg, #25a268 0%, #1e8a55 100%);
}

/* Approve Modal Maximized State */
.modal.profound-approve-modal.maximized {
  padding: 0 !important;
  display: block !important;
}

.modal.profound-approve-modal.maximized[hidden] {
  display: none !important;
}

.modal.profound-approve-modal.maximized .modal-content {
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  display: flex;
  flex-direction: column;
}

.modal.profound-approve-modal.maximized .modal-body {
  flex: 1;
  overflow-y: auto;
}

/* Conflict resolution panel shown when approval hits merge conflicts */
.conflict-resolution-panel {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
}

.conflict-resolution-message {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  background: rgba(255, 152, 0, 0.08);
  border: 1px solid rgba(255, 152, 0, 0.25);
  border-radius: 6px;
  color: var(--color-text, #e0e0e0);
  font-size: 13px;
  line-height: 1.4;
  margin-bottom: 16px;
}

.conflict-resolution-message .warning-icon {
  flex-shrink: 0;
}

.conflict-resolution-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.conflict-resolution-options button {
  width: 100%;
  text-align: left;
  padding: 10px 12px;
}

.conflict-resolution-options .field-hint {
  margin: 0 0 10px 12px;
}

.conflict-resolution-options button:last-child {
  margin-top: 6px;
}

/* Wider modal for activity details to accommodate code and tool outputs */
#activity-detail-modal .modal-content,
#widget-activity-detail-modal .modal-content {
  max-width: 1000px;
  width: 92%;
}

#activity-detail-modal .modal-header h2,
#widget-activity-detail-modal .modal-header h2 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Activity Detail Modal Maximized State */
#activity-detail-modal.maximized {
  padding: 0 !important;
  display: block !important;
}

#activity-detail-modal.maximized[hidden] {
  display: none !important;
}

#activity-detail-modal.maximized .modal-content {
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  border-radius: 0;
  position: fixed;
  top: 0;
  left: 0;
  margin: 0;
  z-index: 10000;
  transition: width 0.25s ease, height 0.25s ease, max-width 0.25s ease, max-height 0.25s ease, border-radius 0.25s ease, top 0.25s ease, left 0.25s ease;
}

/* Follow-Up History Modal Maximized State */
#follow-up-history-modal.maximized {
  padding: 0 !important;
  display: block !important;
}

#follow-up-history-modal.maximized[hidden] {
  display: none !important;
}

#follow-up-history-modal.maximized .modal-content {
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  border-radius: 0;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  transition: width 0.25s ease, height 0.25s ease, max-width 0.25s ease, max-height 0.25s ease, border-radius 0.25s ease, top 0.25s ease, left 0.25s ease;
}

.modal-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-header > .header-actions {
  width: auto;
  margin-left: auto;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  justify-content: flex-end;
}

.modal-header > .header-actions > * {
  flex: 0 0 auto;
}

.modal-header h2 {
  margin: 0;
  min-width: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text);
}

.modal-close {
  background: none;
  border: none;
  font-size: 28px;
  line-height: 1;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-small);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.modal-close:hover {
  background: var(--color-hover);
  color: var(--color-text);
}

.modal-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.activity-detail-nav {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding-right: 8px;
  margin-right: 2px;
  border-right: 1px solid var(--color-border);
}

.activity-detail-nav[hidden] {
  display: none !important;
}

.activity-detail-nav-position {
  min-width: 48px;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
}

.icon-btn {
  background: none;
  border: none;
  font-size: 20px;
  line-height: 1;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-small);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.icon-btn:hover {
  background: var(--color-hover);
  color: var(--color-text);
}

.icon-btn:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.icon-btn:disabled:hover {
  background: none;
  color: var(--color-text-muted);
}

.icon-btn:active {
  transform: scale(0.95);
}
.icon-btn.active {
  background: var(--color-surface-muted);
  color: var(--color-text);
}

#activity-detail-modal .modal-content:focus,
#widget-activity-detail-modal .modal-content:focus {
  outline: none;
}

.modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
}

.modal-error {
  padding: 12px 16px;
  margin-bottom: 16px;
  background: rgba(229, 83, 104, 0.1);
  border: 1px solid var(--color-danger);
  border-radius: var(--radius-medium);
  color: var(--color-danger);
  font-size: 14px;
  font-weight: 500;
}

.modal-warning {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  margin-bottom: 16px;
  background: rgba(244,183,64,0.14);
  border: 1px solid var(--color-warning);
  border-radius: var(--radius-medium);
  color: var(--color-text);
  font-size: 14px;
}

.modal-warning .warning-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-warning);
  color: var(--color-surface);
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  flex-shrink: 0;
}

.modal-error {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  margin-bottom: 16px;
  background: rgba(239,68,68,0.14);
  border: 1px solid var(--color-error);
  border-radius: var(--radius-medium);
  color: var(--color-text);
  font-size: 14px;
}

.modal-error .error-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: white;
  color: var(--color-error);
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  flex-shrink: 0;
  border: 2px solid var(--color-error);
}

.modal-section {
  margin-bottom: 20px;
}

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

.modal-section label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: var(--color-text);
  font-size: 14px;
}

.activity-raw-json {
  margin-top: 20px;
  padding: 16px;
  border-radius: var(--radius-medium);
  border: 1px solid var(--color-border);
  background: var(--color-surface-muted);
}

.activity-raw-json-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-bottom: 8px;
}

.activity-raw-json-content {
  margin: 0;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre;
  overflow-x: auto;
  max-height: 400px;
}

.modal-info {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 12px 16px;
  background: rgba(63,114,255,0.05);
  border-radius: var(--radius-medium);
  border: 1px solid var(--color-border);
}

.modal-repo {
  font-weight: 600;
  color: var(--color-text);
  font-family: "JetBrains Mono", monospace;
  font-size: 14px;
}

.modal-stats {
  color: var(--color-text-muted);
  font-size: 13px;
}

.modal-branches {
  margin-top: 12px;
  padding: 10px 16px;
  background: rgba(63,114,255,0.08);
  border-radius: 6px;
  border-left: 3px solid var(--color-primary);
}

.branch-info {
  font-size: 13px;
  color: var(--color-text);
}

.branch-info code {
  background: rgba(0,0,0,0.2);
  padding: 2px 6px;
  border-radius: 3px;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  color: var(--color-primary-light);
  font-weight: 500;
}

.branch-badge {
  background: rgba(0,0,0,0.2);
  padding: 2px 6px;
  border-radius: 3px;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  color: var(--color-primary-light);
  font-weight: 500;
}

.branch-list {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.branch-item {
  font-size: 13px;
  color: var(--color-text);
}

.branch-item strong {
  font-weight: 600;
  margin-right: 4px;
}

.commit-message-input {
  width: 100%;
  min-height: 120px;
  padding: 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-medium);
  background: var(--color-background);
  color: var(--color-text);
  font-family: "JetBrains Mono", monospace;
  font-size: 14px;
  line-height: 1.5;
  resize: vertical;
  transition: border-color 0.2s ease;
}

.commit-message-input:focus {
  outline: none;
  border-color: var(--color-primary);
}

.commit-message-input::placeholder {
  color: var(--color-text-muted);
}

.commit-message-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.btn-generate-commit-msg {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font-size: 12px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn-generate-commit-msg:hover:not(:disabled) {
  background: var(--color-primary-light, rgba(99, 102, 241, 0.1));
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn-generate-commit-msg:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-generate-commit-msg svg {
  flex-shrink: 0;
}

.modal-section label.checkbox-label,
.modal-body label.checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  margin-bottom: 6px;
}

.checkbox-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  cursor: pointer;
  accent-color: var(--color-primary);
}

.checkbox-label span {
  color: var(--color-text);
  font-size: 14px;
  font-weight: 400;
}

.new-branch-container {
  margin-top: 8px;
  margin-left: 26px;
}

.new-branch-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-medium);
  background: var(--color-background);
  color: var(--color-text);
  font-family: "JetBrains Mono", monospace;
  font-size: 14px;
}

.new-branch-input:focus {
  outline: none;
  border-color: var(--color-primary);
}

.new-branch-input::placeholder {
  color: var(--color-text-muted);
}

.modal-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--color-border);
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.modal-footer .btn-ghost {
  background: transparent;
}

.modal-footer .btn-primary {
  min-width: 140px;
}

.modal-actions {
  padding: 16px 24px;
  border-top: 1px solid var(--color-border);
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.modal-actions button {
  min-width: 120px;
}

.template-preview-modal-content {
  width: min(92vw, 980px);
  max-width: calc(100vw - 32px);
  max-height: 86vh;
}

.template-preview-header {
  align-items: flex-start;
  gap: 16px;
}

.template-preview-heading {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.template-preview-heading h2,
.template-preview-subtitle {
  min-width: 0;
  overflow-wrap: anywhere;
}

.template-preview-subtitle {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.35;
}

.template-preview-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.template-preview-loading {
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
  font-size: 14px;
}

.template-preview-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.template-preview-meta-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 9px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface-muted);
  color: var(--color-text-secondary);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
}

.template-preview-description {
  padding: 12px 14px;
  border: 1px solid rgba(63, 114, 255, 0.25);
  border-radius: 8px;
  background: rgba(63, 114, 255, 0.08);
  color: var(--color-text-secondary);
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.template-preview-rendered {
  padding: 18px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 14px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.template-preview-rendered > :first-child {
  margin-top: 0;
}

.template-preview-rendered > :last-child {
  margin-bottom: 0;
}

.template-preview-rendered h1,
.template-preview-rendered h2,
.template-preview-rendered h3,
.template-preview-rendered h4 {
  margin: 1.2em 0 0.5em;
  color: var(--color-text);
  line-height: 1.25;
}

.template-preview-rendered h1 {
  font-size: 22px;
}

.template-preview-rendered h2 {
  font-size: 18px;
}

.template-preview-rendered h3,
.template-preview-rendered h4 {
  font-size: 16px;
}

.template-preview-rendered p,
.template-preview-rendered ul,
.template-preview-rendered ol,
.template-preview-rendered blockquote,
.template-preview-rendered pre,
.template-preview-rendered table {
  margin: 0 0 12px;
}

.template-preview-rendered ul,
.template-preview-rendered ol {
  padding-left: 22px;
}

.template-preview-rendered li + li {
  margin-top: 4px;
}

.template-preview-rendered blockquote {
  padding: 10px 14px;
  border-left: 3px solid var(--color-accent);
  background: var(--color-surface-muted);
  color: var(--color-text-secondary);
  border-radius: 0 8px 8px 0;
}

.template-preview-rendered code,
.template-preview-source {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

.template-preview-rendered code {
  padding: 2px 5px;
  border-radius: 5px;
  background: var(--color-surface-muted);
  color: var(--color-text);
  font-size: 0.92em;
}

.template-preview-rendered pre {
  max-width: 100%;
  padding: 12px;
  border-radius: 8px;
  background: var(--color-surface-muted);
  overflow-x: auto;
  white-space: pre;
}

.template-preview-rendered pre code {
  padding: 0;
  background: transparent;
  white-space: pre;
}

.template-preview-rendered table {
  display: block;
  width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
}

.template-preview-rendered th,
.template-preview-rendered td {
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
}

.template-preview-source-wrapper {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface-muted);
  overflow: hidden;
}

.template-preview-source-wrapper summary {
  padding: 10px 12px;
  color: var(--color-text-secondary);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
}

.template-preview-source {
  margin: 0;
  padding: 12px;
  border-top: 1px solid var(--color-border);
  color: var(--color-text);
  font-size: 12px;
  line-height: 1.55;
  overflow-x: auto;
  white-space: pre;
}

/* Branch Selection Modal */
.branch-field {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--color-border);
}

.branch-field:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.branch-field-header {
  margin-bottom: 8px;
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.branch-label {
  font-weight: 600;
  font-size: 15px;
  color: var(--color-text);
  flex-shrink: 0;
}

.branch-description {
  font-size: 13px;
  color: var(--color-text-muted);
  font-weight: 400;
}

.branch-path {
  font-size: 12px;
  color: var(--color-text-muted);
  font-weight: 400;
  margin-left: auto;
  font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
}

.branch-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  font-size: 14px;
  font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
  transition: all 0.2s;
}

.branch-input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(63, 114, 255, 0.1);
}

.branch-hint {
  display: block;
  font-size: 12px;
  color: var(--color-text-muted);
  font-style: italic;
}

/* Branch Select Wrapper */
.branch-select-wrapper {
  position: relative;
}

.branch-select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  font-size: 14px;
  font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
  background-color: var(--color-background);
  color: var(--color-text);
  transition: all 0.2s;
  cursor: pointer;
  appearance: none;
}

.branch-select:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(63, 114, 255, 0.1);
}

.branch-select:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.branch-select-wrapper.has-error .branch-select {
  border-color: var(--color-danger);
}

/* Branch Select Loading Indicator */
.branch-select-loading {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

.branch-select-loading[hidden] {
  display: none;
}

.branch-select-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: branch-spinner-spin 0.8s linear infinite;
}

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

/* Branch Select Status (hint, error, retry) */
.branch-select-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  flex-wrap: wrap;
}

.branch-error-message {
  font-size: 12px;
  color: var(--color-danger);
}

.branch-error-message[hidden] {
  display: none;
}

.branch-retry-btn {
  font-size: 12px;
  color: var(--color-accent);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
}

.branch-retry-btn:hover {
  color: var(--color-accent-hover);
}

.branch-retry-btn[hidden] {
  display: none;
}

.branch-refresh-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  font-size: 12px;
  color: var(--color-text-muted, #888);
  background: none;
  border: none;
  padding: 2px 4px;
  cursor: pointer;
  border-radius: 4px;
}

.branch-refresh-btn:hover {
  color: var(--color-accent);
  background: var(--color-hover-bg, rgba(0, 0, 0, 0.04));
}

.branch-refresh-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.branch-refresh-btn[hidden] {
  display: none;
}

/* Branch Manual Input Fallback */
.branch-manual-input-wrapper {
  margin-top: 8px;
}

.branch-manual-input-wrapper[hidden] {
  display: none;
}

.branch-manual-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  font-size: 14px;
  font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
  transition: all 0.2s;
}

.branch-manual-input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(63, 114, 255, 0.1);
}

/* Custom select styles within branch modal */
.branch-field .custom-select {
  width: 100%;
}

.branch-field .custom-select-trigger {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  font-size: 14px;
  font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
  background-color: var(--color-background);
  color: var(--color-text);
  transition: all 0.2s;
}

.branch-field .custom-select-trigger:hover {
  border-color: var(--color-border-hover);
}

.branch-field .custom-select-trigger.open,
.branch-field .custom-select-trigger:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(63, 114, 255, 0.1);
}

.branch-field .custom-select-dropdown {
  max-height: 250px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  box-shadow: var(--shadow-medium);
}

.branch-field .custom-select-options {
  max-height: 200px;
  overflow-y: auto;
}

.branch-field .custom-select-option {
  padding: 8px 12px;
  font-size: 14px;
  font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
}

.branch-field .custom-select-search-input {
  font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
}

/* Branch modal overflow fix - scrollable body with fixed-position dropdowns */
#branch-modal {
  z-index: 11000;
}

#branch-modal .modal-body {
  overflow-y: auto;
}

#branch-modal .modal-content {
  max-height: 90vh;
}

#branch-modal .custom-select-dropdown {
  position: fixed;
  z-index: 11001;
}

/* Test Selection Modal */
.test-search-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  font-size: 14px;
  margin-bottom: 16px;
  transition: all 0.2s;
}

.test-search-input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(63, 114, 255, 0.1);
}

.test-choices {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
}

.test-choice-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  background-color: var(--color-surface);
  cursor: pointer;
  transition: all 0.2s;
}

.test-choice-item:hover {
  border-color: var(--color-accent);
  background-color: var(--color-surface-hover);
}

.test-choice-item:has(.test-choice-checkbox:checked) {
  border-color: var(--color-accent);
  background-color: rgba(63, 114, 255, 0.05);
}

.test-choice-checkbox {
  margin: 3px 0 0 0;
  cursor: pointer;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.test-choice-content {
  flex: 1;
  min-width: 0;
}

.test-choice-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--color-text);
  margin-bottom: 4px;
}

.test-choice-description {
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.4;
}

.modal-description {
  margin-bottom: 16px;
  font-size: 14px;
  color: var(--color-text-muted);
}

/* Field hints (Ask CoderFlow field coverage). Scoped to the index modals/forms
   that carry visible hints so other surfaces keep their own .form-hint rules. */
.profile-field > .form-hint,
.objective-form .form-hint,
#test-search-container .form-hint,
#deploy-search-container .form-hint,
#prompt-search-container .form-hint,
#jiraSearchStep .form-hint {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--color-text-muted);
}

/* User Management */
.users-table-container {
  overflow-x: auto;
}

.users-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.users-table thead {
  background: var(--color-surface-muted);
  border-bottom: 2px solid var(--color-border);
}

.users-table th {
  padding: 12px 16px;
  text-align: left;
  font-weight: 600;
  color: var(--color-text);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.users-table th.sortable {
  padding: 0;
  cursor: pointer;
  user-select: none;
}

.users-table th.sortable:hover {
  background: rgba(63, 114, 255, 0.06);
}

.users-table th.sortable .sort-header {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 12px 16px;
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  text-align: left;
  cursor: pointer;
}

.users-table th.sortable .sort-header:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

.users-table th.sortable .sort-indicator {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 5px solid currentColor;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.users-table th.sortable:hover .sort-indicator {
  opacity: 0.4;
}

.users-table th.sortable[aria-sort="ascending"] .sort-indicator {
  opacity: 1;
  border-bottom: 5px solid currentColor;
  border-top: 0;
}

.users-table th.sortable[aria-sort="descending"] .sort-indicator {
  opacity: 1;
  border-top: 5px solid currentColor;
  border-bottom: 0;
}

.users-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}

.users-table tbody tr:hover {
  background: rgba(63, 114, 255, 0.03);
}

.users-empty-row td {
  padding: 28px 16px;
  text-align: center;
  color: var(--color-text-muted);
  background: transparent;
}

.users-filter-panel {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 12px;
  padding: 0 0 16px;
}

.users-filter-search {
  flex: 1 1 280px;
  min-width: 240px;
}

.users-filter-access {
  flex: 0 1 220px;
  min-width: 180px;
}

.users-filter-search label,
.users-filter-access label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.users-search-shell {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  background: var(--color-surface);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.users-search-shell:focus-within {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(63, 114, 255, 0.12);
}

.users-search-icon {
  flex: 0 0 auto;
  color: var(--color-text-muted);
}

.users-search-shell .form-input.users-search-input {
  min-height: auto;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}

.users-search-shell .form-input.users-search-input:focus {
  outline: none;
  border-color: transparent;
}

.users-search-shell .form-input.users-search-input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

.users-search-shell .form-input.users-search-input[type="search"]::-ms-clear {
  display: none;
  width: 0;
  height: 0;
}

.users-search-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.users-search-clear:hover,
.users-search-clear:focus-visible {
  background: var(--color-surface-muted);
  color: var(--color-text);
  outline: none;
}

.users-filter-clear {
  margin-bottom: 3px;
}

.users-filter-status {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  color: var(--color-text-muted);
  font-size: 13px;
}

.user-username {
  font-weight: 600;
  color: var(--color-text);
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
}

.user-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.role-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  text-transform: capitalize;
}

.access-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.role-badge.role-admin {
  background: rgba(63, 114, 255, 0.12);
  color: var(--color-accent);
}

.role-badge.role-user-binding {
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
}

.role-badge.role-team-binding {
  background: rgba(139, 92, 246, 0.12);
  color: #7c3aed;
}

.form-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  font-size: 14px;
  font-family: inherit;
  background: var(--color-surface);
  color: var(--color-text);
}

.form-input:focus {
  outline: 2px solid rgba(63,114,255,0.25);
  border-color: var(--color-accent);
}

.form-input.input-error {
  border-color: var(--color-danger);
  background: rgba(229, 83, 104, 0.05);
}

.form-input.input-error:focus {
  outline: 2px solid rgba(229, 83, 104, 0.25);
  border-color: var(--color-danger);
}

/* Toggle Switch */
.toggle-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.toggle-slider {
  position: relative;
  display: inline-block;
  cursor: pointer;
  width: 48px;
  height: 24px;
  background-color: var(--color-border);
  transition: 0.3s;
  border-radius: 24px;
  flex-shrink: 0;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.3s;
  border-radius: 50%;
}

.toggle-switch input:checked + .toggle-slider {
  background-color: var(--color-accent);
}

.toggle-switch input:focus + .toggle-slider {
  box-shadow: 0 0 0 2px rgba(63, 114, 255, 0.25);
}

.toggle-switch input:checked + .toggle-slider:before {
  transform: translateX(24px);
}

.toggle-switch input:disabled + .toggle-slider {
  opacity: 0.5;
  cursor: not-allowed;
}

.toggle-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
  user-select: none;
  cursor: pointer;
}

.login-error {
  padding: 12px;
  background: rgba(229, 83, 104, 0.1);
  border: 1px solid var(--color-danger);
  border-radius: var(--radius-small);
  color: var(--color-danger);
  font-size: 14px;
  margin-bottom: 16px;
}

@media (max-width: 768px) {
  .users-table {
    font-size: 13px;
  }

  .users-table th,
  .users-table td {
    padding: 10px 12px;
  }

  .user-actions {
    flex-direction: column;
    align-items: flex-start;
  }

  .users-filter-panel {
    align-items: stretch;
  }

  .users-filter-search,
  .users-filter-access {
    flex-basis: 100%;
    min-width: 0;
  }

  .users-filter-clear {
    align-self: flex-start;
  }
}

/* Button Group with Dropdown */
.btn-group {
  position: relative;
  display: inline-flex;
  align-items: stretch;
}

.btn-group .btn-secondary:first-child {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.btn-group .btn-dropdown-toggle {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left: 1px solid rgba(63, 114, 255, 0.2);
  padding-left: 8px;
  padding-right: 8px;
  font-size: 10px;
  min-width: auto;
}

.btn-group .btn-dropdown-toggle:hover {
  background: rgba(63, 114, 255, 0.2);
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  box-shadow: var(--shadow-soft);
  min-width: 200px;
  z-index: 1000;
  overflow: visible;
}

.dropdown-menu[hidden] {
  display: none;
}

.dropdown-item {
  display: block;
  width: 100%;
  padding: 10px 16px;
  border: none;
  background: var(--color-surface);
  color: var(--color-text);
  text-align: left;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease;
  border-bottom: 1px solid rgba(31, 42, 68, 0.06);
  white-space: nowrap;
}

.dropdown-item[hidden] {
  display: none;
}

/* Only remove border from the last item in the last section */
.dropdown-section:last-of-type .dropdown-item:last-child,
.dropdown-menu > .dropdown-item:last-child {
  border-bottom: none;
}

.dropdown-item:hover {
  background: rgba(63, 114, 255, 0.08);
  color: var(--color-accent);
}

.dropdown-item:active {
  background: rgba(63, 114, 255, 0.12);
}

/* Application Server Status Indicator */
.status-indicator {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  background: var(--color-text-muted);
}

.status-indicator.running {
  background: var(--color-success);
}

.status-indicator.stopped {
  background: var(--color-danger);
}

.status-indicator.starting {
  background: var(--color-warning);
  animation: pulse-indicator 1s ease-in-out infinite;
}

.status-indicator.degraded {
  background: var(--color-warning);
}

@keyframes pulse-indicator {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* Application Server Dropdown Sections */
.dropdown-section {
  /* No padding for consistency with Terminal menu */
}

.dropdown-header {
  padding: 6px 16px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 4px;
}

.dropdown-divider {
  height: 1px;
  background: var(--color-border);
  margin: 4px 0;
}

/* QA Mode menu items */
.qa-action-item {
  color: var(--color-text);
}

.qa-action-item .icon-qa {
  color: #8e44ad;
}

.qa-action-item:hover .icon-qa {
  color: #9b59b6;
}

.qa-divider {
  margin: 8px 0 4px;
}

.custom-url-input {
  width: calc(100% - 32px);
  margin: 8px 16px 4px;
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  font-size: 13px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--color-surface-muted);
  color: var(--color-text);
  transition: border-color 0.15s ease;
}

.custom-url-input:focus {
  outline: none;
  border-color: var(--color-accent);
  background: var(--color-surface);
}

/* Ensure emojis in dropdown items align properly */
.dropdown-item {
  font-variant-emoji: text;
}

/* Submenu styles */
.dropdown-submenu-wrapper {
  position: relative;
}

.dropdown-submenu-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.dropdown-arrow {
  font-size: 10px;
  transition: transform 0.2s ease;
  opacity: 0.6;
}

.dropdown-submenu {
  position: absolute;
  left: 100%;
  top: 0;
  min-width: 200px;
  max-width: 400px;
  max-height: 250px;
  overflow-y: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  box-shadow: var(--shadow-soft);
  z-index: 1000;
  margin-left: 2px;
}

.dropdown-submenu .dropdown-item {
  padding: 10px 16px;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Scrollbar styling for submenus */
.dropdown-submenu::-webkit-scrollbar {
  width: 8px;
}

.dropdown-submenu::-webkit-scrollbar-track {
  background: rgba(31, 42, 68, 0.05);
  border-radius: 4px;
}

.dropdown-submenu::-webkit-scrollbar-thumb {
  background: rgba(31, 42, 68, 0.2);
  border-radius: 4px;
}

.dropdown-submenu::-webkit-scrollbar-thumb:hover {
  background: rgba(31, 42, 68, 0.3);
}

/* Keyboard shortcut hints in dropdown items */
.dropdown-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.dropdown-item-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shortcut-hint {
  font-size: 11px;
  color: var(--color-text-muted);
  background: var(--color-bg-secondary);
  padding: 2px 6px;
  border-radius: 3px;
  font-family: var(--font-mono);
  white-space: nowrap;
  flex-shrink: 0;
}

.dropdown-item:hover .shortcut-hint {
  background: var(--color-bg-tertiary);
}

.primary-hint {
  font-size: 11px;
  color: var(--color-text);
  background: rgba(76, 129, 255, 0.15);
  padding: 2px 6px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ============================================
   Jira Integration Styles
   ============================================ */

/* Jira Link Badge (shown when issue is linked) */
.jira-link-badge {
  margin-bottom: 8px;
  padding: 8px 12px;
  background: #e7f3ff;
  border: 1px solid #2684ff;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9em;
}

.jira-link-badge a {
  color: #0052cc;
  font-weight: 500;
  text-decoration: none;
}

.jira-link-badge a:hover {
  text-decoration: underline;
}

.jira-icon {
  font-size: 1.1em;
}

.fork-link-badge {
  margin-bottom: 8px;
  padding: 8px 12px;
  background: #ecfeff;
  border: 1px solid #14b8a6;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9em;
  color: #0f172a;
}

.fork-link-badge a {
  color: #0f766e;
  font-weight: 500;
  text-decoration: none;
}

.fork-link-badge a:hover {
  text-decoration: underline;
}

.fork-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #0f766e;
}

.fork-link-meta {
  color: #115e59;
  font-size: 0.95em;
}

/* Non-default branch indicator */
.branch-indicator {
  margin-bottom: 8px;
  padding: 7px 12px;
  background: rgba(244, 183, 64, 0.1);
  border: 1px solid rgba(244, 183, 64, 0.4);
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--color-text);
  animation: slideDown 0.3s ease;
}

.branch-indicator-icon {
  flex-shrink: 0;
  color: var(--color-warning);
  width: 16px;
  height: 16px;
}

.branch-indicator-text {
  flex: 1;
  min-width: 0;
}

.branch-indicator-text code {
  background: rgba(0, 0, 0, 0.06);
  padding: 1px 5px;
  border-radius: 3px;
  font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
  font-size: 12px;
  font-weight: 500;
}

.branch-indicator-edit {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-accent);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

.branch-indicator-edit:hover {
  text-decoration: underline;
}

:root[data-theme="dark"] .branch-indicator {
  background: rgba(244, 183, 64, 0.08);
  border-color: rgba(244, 183, 64, 0.3);
}

:root[data-theme="dark"] .branch-indicator-text code {
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-primary-light);
}

.member-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
}

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 6px;
  margin-left: 2px;
  margin-right: 4px;
  line-height: 1;
  transition: all 0.2s ease;
  border-radius: var(--radius-small);
}

.btn-icon:hover:not(:disabled) {
  background: rgba(31,42,68,0.08);
  color: var(--color-text);
}

.btn-icon:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.btn-icon svg {
  flex-shrink: 0;
}

/* Dark mode for Jira Link Badge */
:root[data-theme="dark"] .jira-link-badge {
  background: rgba(63, 114, 255, 0.15);
  border-color: rgba(90, 155, 255, 0.4);
}

:root[data-theme="dark"] .jira-link-badge a {
  color: #5a9bff;
}

:root[data-theme="dark"] .fork-link-badge {
  background: rgba(20, 184, 166, 0.12);
  border-color: rgba(94, 234, 212, 0.35);
  color: var(--color-text);
}

:root[data-theme="dark"] .fork-link-badge a,
:root[data-theme="dark"] .fork-icon,
:root[data-theme="dark"] .fork-link-meta {
  color: #99f6e4;
}

:root[data-theme="dark"] .btn-icon:hover:not(:disabled) {
  background: rgba(148, 163, 184, 0.15);
}

/* Share button dropdown on task detail page */
#share-btn-group {
  position: relative;
  display: inline-flex;
}

#share-btn-group .btn-icon {
  margin-right: 0;
}

#share-dropdown-menu {
  min-width: 180px;
}

#share-dropdown-menu .dropdown-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 10px 14px;
}

#share-dropdown-menu .dropdown-item .option-icon {
  flex-shrink: 0;
  color: var(--color-text-muted);
}

#share-dropdown-menu .dropdown-item:hover .option-icon {
  color: var(--color-accent);
}

/* More Actions button dropdown on task detail page */
#more-actions-btn-group {
  position: relative;
  display: inline-flex;
}

#more-actions-btn-group .btn-icon {
  margin-right: 0;
}

#more-actions-dropdown {
  min-width: 220px;
}

#more-actions-dropdown .dropdown-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 10px 14px;
}

#more-actions-dropdown .dropdown-item .option-icon {
  flex-shrink: 0;
  color: var(--color-text-muted);
}

#more-actions-dropdown .dropdown-item:hover .option-icon {
  color: var(--color-accent);
}

/* Delete task item - red/danger styling */
#more-delete-task:hover {
  background: rgba(239, 68, 68, 0.08);
  color: var(--color-danger);
}

#more-delete-task:hover .option-icon {
  color: var(--color-danger);
}

/* Pin button on task detail page */
#pin-task {
  transition: transform 0.2s ease;
}

#pin-task:hover:not(:disabled) {
  transform: scale(1.1);
}

#pin-task .pin-svg {
  color: var(--color-text-muted);
}

#pin-task:hover .pin-svg {
  color: var(--color-text);
}

#pin-task.loading {
  pointer-events: none;
  opacity: 0.7;
}

#pin-task.loading .pin-svg,
#pin-task.loading .pin-filled {
  display: none;
}

#pin-task.loading::after {
  content: '•••';
  display: inline-block;
  letter-spacing: 1px;
  animation: pin-button-loading-dots 1.4s ease-in-out infinite;
}

@keyframes pin-button-loading-dots {
  0%, 20% {
    opacity: 0.3;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.3;
  }
}

/* Modal Enhancements for Jira */
.modal-large {
  max-width: 700px;
  width: 90%;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 12px;
}

.modal-close {
  background: none;
  border: none;
  font-size: 1.5em;
  cursor: pointer;
  color: #6c757d;
  padding: 0;
  line-height: 1;
  transition: color 0.15s;
}

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

/* Search Box */
.search-box {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.search-input {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-size: 1em;
  font-family: inherit;
}

.search-input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(63, 114, 255, 0.1);
}

.search-status {
  margin-bottom: 16px;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 0.9em;
}

.search-status.error {
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

.search-status.loading {
  background: #d1ecf1;
  color: #0c5460;
  border: 1px solid #bee5eb;
}

/* Search Results */
.search-results {
  max-height: 400px;
  overflow-y: auto;
  border: 1px solid var(--color-border);
  border-radius: 4px;
}

.results-header {
  padding: 8px 12px;
  background: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border);
  font-size: 0.9em;
  color: var(--color-text-secondary);
  font-weight: 500;
}

.results-list {
  /* Container for result items */
}

.result-item {
  padding: 10px 12px;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  transition: background 0.15s;
}

.result-item:hover {
  background: #f5f8fa;
}

.result-item.selected {
  background: #e7f3ff;
  border-left: 3px solid #2684ff;
  padding-left: 9px; /* Compensate for border */
}

.result-item.selected:hover {
  background: #d6ebff;
}

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

.result-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.result-key {
  font-weight: 700;
  color: #0052cc;
  font-size: 1.05em;
  font-family: monospace;
  flex-shrink: 0;
}

.result-summary {
  font-weight: 400;
  color: var(--color-text-primary);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.result-meta {
  display: flex;
  gap: 12px;
  font-size: 0.85em;
  color: var(--color-text-secondary);
  margin-top: 4px;
}

.result-meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Issue Preview */
.preview-header {
  margin-bottom: 16px;
}

.issue-preview {
  padding: 20px;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  margin-bottom: 20px;
  max-height: 400px;
  overflow-y: auto;
}

.issue-preview h3 {
  margin-top: 0;
  margin-bottom: 16px;
  color: #0052cc;
  font-size: 1.1em;
}

.issue-preview .meta-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 16px 0;
}

.issue-preview .meta-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.issue-preview .meta-label {
  font-size: 0.85em;
  color: var(--color-text-secondary);
  font-weight: 500;
}

.issue-preview .meta-value {
  font-size: 0.95em;
  color: var(--color-text-primary);
}

.issue-preview .description {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
}

.issue-preview .description-content {
  margin-top: 8px;
  line-height: 1.6;
  color: var(--color-text-primary);
}

/* Markdown styles within description */
.issue-preview .description-content p {
  margin: 0.75em 0;
}

.issue-preview .description-content h1,
.issue-preview .description-content h2,
.issue-preview .description-content h3,
.issue-preview .description-content h4 {
  margin-top: 1.5em;
  margin-bottom: 0.5em;
}

.issue-preview .description-content ul,
.issue-preview .description-content ol {
  margin: 0.75em 0;
  padding-left: 1.5em;
}

.issue-preview .description-content code {
  background: rgba(0, 0, 0, 0.05);
  padding: 0.2em 0.4em;
  border-radius: 3px;
  font-size: 0.9em;
}

.issue-preview .description-content pre {
  background: rgba(0, 0, 0, 0.05);
  padding: 12px;
  border-radius: 4px;
  overflow-x: auto;
  margin: 0.75em 0;
}

.issue-preview .description-content pre code {
  background: transparent;
  padding: 0;
}

/* Comments section */
.issue-preview .comments-section {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
}

.issue-preview .comments-header {
  margin-bottom: 12px;
  color: var(--color-text-primary);
}

.issue-preview .comments-list {
  margin-bottom: 12px;
}

.issue-preview .comment-item {
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 12px;
  margin-bottom: 8px;
}

.issue-preview .comment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-border);
}

.issue-preview .comment-author {
  font-weight: 600;
  color: var(--color-text-primary);
  font-size: 0.9em;
}

.issue-preview .comment-date {
  color: var(--color-text-secondary);
  font-size: 0.85em;
}

.issue-preview .comment-body-content {
  color: var(--color-text-primary);
  line-height: 1.6;
}

.issue-preview .comment-body-content p {
  margin: 0.5em 0;
}

.issue-preview .comment-body-content code {
  background: rgba(0, 0, 0, 0.05);
  padding: 0.2em 0.4em;
  border-radius: 3px;
  font-size: 0.9em;
}

.issue-preview .comment-body-content pre {
  background: rgba(0, 0, 0, 0.05);
  padding: 8px;
  border-radius: 4px;
  overflow-x: auto;
  margin: 0.5em 0;
}

.issue-preview .comment-body-content pre code {
  background: transparent;
  padding: 0;
}

.issue-preview .include-comments-option {
  margin-top: 12px;
  padding: 12px;
  background: #e7f3ff;
  border: 1px solid #2684ff;
  border-radius: 4px;
}

.issue-preview .include-comments-option label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  color: var(--color-text-primary);
  font-size: 0.9em;
  font-weight: 500;
}

.issue-preview .include-comments-option input[type="checkbox"] {
  cursor: pointer;
  width: 16px;
  height: 16px;
}

.preview-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* Scrollbar Styling for Search Results */
.search-results::-webkit-scrollbar,
.issue-preview::-webkit-scrollbar {
  width: 8px;
}

.search-results::-webkit-scrollbar-track,
.issue-preview::-webkit-scrollbar-track {
  background: var(--color-bg-secondary);
  border-radius: 4px;
}

.search-results::-webkit-scrollbar-thumb,
.issue-preview::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 4px;
}

.search-results::-webkit-scrollbar-thumb:hover,
.issue-preview::-webkit-scrollbar-thumb:hover {
  background: #999;
}

/* Dark mode styles for Jira import */
:root[data-theme="dark"] .result-item {
  border-bottom-color: var(--color-border);
}

:root[data-theme="dark"] .result-item:hover {
  background: rgba(63, 114, 255, 0.12);
}

:root[data-theme="dark"] .result-item.selected {
  background: rgba(63, 114, 255, 0.18);
  border-left-color: #5a9bff;
}

:root[data-theme="dark"] .result-item.selected:hover {
  background: rgba(63, 114, 255, 0.25);
}

:root[data-theme="dark"] .result-key {
  color: #5a9bff;
}

:root[data-theme="dark"] .issue-preview h3 {
  color: #5a9bff;
}

:root[data-theme="dark"] .issue-preview .comment-item {
  background: rgba(255, 255, 255, 0.03);
}

:root[data-theme="dark"] .issue-preview .description-content code,
:root[data-theme="dark"] .issue-preview .comment-body-content code {
  background: rgba(255, 255, 255, 0.08);
}

:root[data-theme="dark"] .issue-preview .description-content pre,
:root[data-theme="dark"] .issue-preview .comment-body-content pre {
  background: rgba(255, 255, 255, 0.05);
}

:root[data-theme="dark"] .issue-preview .include-comments-option {
  background: rgba(63, 114, 255, 0.15);
  border-color: #5a9bff;
}

/* Responsive adjustments for Jira modal */
@media (max-width: 768px) {
  .modal-large {
    width: 95%;
    max-width: none;
  }

  .issue-preview .meta-grid {
    grid-template-columns: 1fr;
  }

  .search-box {
    flex-direction: column;
  }

  .preview-actions {
    flex-direction: column-reverse;
  }

  .preview-actions button {
    width: 100%;
  }
}

/* =====================================================
   Live Activity Feed
   ===================================================== */

.activity-count {
  display: inline-block;
  background: var(--color-accent);
  color: white;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  margin-left: 8px;
  min-width: 30px;
  text-align: center;
}

/* Activity Type Filter Chips */
.activity-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 0 12px 0;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 8px;
}

.activity-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-secondary);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.activity-filter-chip:hover {
  background: var(--color-bg-hover);
  border-color: var(--color-border-strong);
  color: var(--color-text-primary);
}

.activity-filter-chip.active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: white;
}

.activity-filter-chip.active:hover {
  background: #2d5ce6;
  border-color: #2d5ce6;
}

.activity-filter-chip svg {
  flex-shrink: 0;
  opacity: 0.7;
}

.activity-filter-chip.active svg {
  opacity: 1;
}

/* Error filter chip styling when active */
.activity-filter-chip[data-filter="errors"].active {
  background: var(--color-danger);
  border-color: var(--color-danger);
}

.activity-filter-chip[data-filter="errors"].active:hover {
  background: #c9293d;
  border-color: #c9293d;
}

/* Filter chip count badges */
.filter-chip-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 16px;
  padding: 0 5px;
  margin-left: 2px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  color: var(--color-text-muted);
  background: var(--color-bg-secondary);
  border-radius: 8px;
  transition: all 0.15s ease;
}

.activity-filter-chip:hover .filter-chip-count {
  background: var(--color-bg-tertiary);
  color: var(--color-text-secondary);
}

.activity-filter-chip.active .filter-chip-count {
  background: rgba(255, 255, 255, 0.25);
  color: white;
}

.activity-filter-chip.active:hover .filter-chip-count {
  background: rgba(255, 255, 255, 0.35);
}

/* Special styling for errors chip with count > 0 (not active) */
.activity-filter-chip.has-errors:not(.active) {
  border-color: var(--color-danger);
}

.activity-filter-chip.has-errors:not(.active) .filter-chip-count {
  background: var(--color-danger);
  color: white;
}

.activity-filter-chip.has-errors:not(.active):hover .filter-chip-count {
  background: #c9293d;
}

/* Responsive: Stack chips on very small screens */
@media (max-width: 480px) {
  .activity-filter-chips {
    gap: 4px;
  }

  .activity-filter-chip {
    padding: 3px 8px;
    font-size: 11px;
  }

  .filter-chip-count {
    min-width: 16px;
    height: 14px;
    padding: 0 4px;
    font-size: 9px;
  }
}

/* Tool Type Sub-filter Row */
.tool-type-filter-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-secondary);
  margin: 0 -12px;
  padding: 8px 12px;
}

.tool-type-filter-label {
  font-size: 11px;
  color: var(--color-text-muted);
  white-space: nowrap;
  font-weight: 500;
}

.tool-type-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.tool-type-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text-secondary);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.tool-type-chip:hover {
  background: var(--color-bg-hover);
  border-color: var(--color-border-strong);
  color: var(--color-text-primary);
}

.tool-type-chip.active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: white;
}

.tool-type-chip.active:hover {
  background: #2d5ce6;
  border-color: #2d5ce6;
}

/* Hide chips with zero count */
.tool-type-chip.hidden-zero {
  display: none;
}

/* Tool type chip count badges */
.tool-type-chip-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 14px;
  height: 12px;
  padding: 0 3px;
  font-size: 9px;
  font-weight: 600;
  background: var(--color-bg-tertiary);
  color: var(--color-text-muted);
  border-radius: 6px;
  margin-left: 2px;
}

.tool-type-chip:hover .tool-type-chip-count {
  background: var(--color-bg-tertiary);
  color: var(--color-text-secondary);
}

.tool-type-chip.active .tool-type-chip-count {
  background: rgba(255, 255, 255, 0.25);
  color: white;
}

.tool-type-chip.active:hover .tool-type-chip-count {
  background: rgba(255, 255, 255, 0.35);
}

.ibmi-type-filter-row {
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-secondary);
  margin: 0 -12px;
  padding: 8px 12px;
}

.ibmi-type-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.ibmi-type-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text-secondary);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.ibmi-type-chip:hover {
  background: var(--color-bg-hover);
  border-color: var(--color-border-strong);
  color: var(--color-text-primary);
}

.ibmi-type-chip.active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: white;
}

.ibmi-type-chip.active:hover {
  background: #2d5ce6;
  border-color: #2d5ce6;
}

.ibmi-type-chip.hidden-zero {
  display: none;
}

.ibmi-type-chip-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 14px;
  height: 12px;
  padding: 0 3px;
  font-size: 9px;
  font-weight: 600;
  background: var(--color-bg-tertiary);
  color: var(--color-text-muted);
  border-radius: 6px;
  margin-left: 2px;
}

.ibmi-type-chip.active .ibmi-type-chip-count {
  background: rgba(255, 255, 255, 0.25);
  color: white;
}

.ibmi-activity-item .activity-timeline-marker {
  background: rgba(15, 99, 184, 0.12);
  color: #0f63b8;
}

.ibmi-detail {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ibmi-detail-header {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.ibmi-detail-badge,
.ibmi-detail-session,
.ibmi-detail-op {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}

.ibmi-detail-badge {
  background: rgba(15, 99, 184, 0.14);
  color: #0f63b8;
}

.ibmi-detail-badge-build {
  background: rgba(25, 135, 84, 0.14);
  color: #198754;
}

.ibmi-detail-session {
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
}

.ibmi-detail-op {
  background: rgba(63, 114, 255, 0.08);
  color: var(--color-text-secondary);
}

.ibmi-detail-summary {
  font-size: 13px;
  color: var(--color-text-secondary);
}

.ibmi-screen-preview .iframe-wrapper {
  min-height: 260px;
  max-height: 420px;
  margin: 0;
}

.ibmi-5250-screen-shell {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(102, 255, 153, 0.18);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 18%),
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.03) 1px, transparent 1px, transparent 3px),
    linear-gradient(180deg, #07170e 0%, #031108 100%);
  box-shadow: inset 0 0 0 1px rgba(102, 255, 153, 0.05);
}

.ibmi-5250-screen-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(102, 255, 153, 0.12);
  color: #d4ffe5;
}

.ibmi-5250-screen-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(102, 255, 153, 0.12);
  color: #b7ffd0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ibmi-5250-screen-title {
  font-size: 12px;
  font-weight: 600;
  color: #d4ffe5;
}

.ibmi-5250-screen-text {
  margin: 0;
  padding: 14px 16px 16px;
  overflow-x: auto;
  color: #9df7bf;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 12px;
  line-height: 1.35;
  white-space: pre;
}

.ibmi-session-nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-bg-secondary);
}

.ibmi-session-nav-header,
.ibmi-session-nav-controls,
.ibmi-session-nav-dots {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ibmi-session-nav-header {
  justify-content: space-between;
}

.ibmi-session-nav-title {
  font-size: 12px;
  font-weight: 600;
}

.ibmi-session-nav-count {
  font-size: 11px;
  color: var(--color-text-muted);
}

.ibmi-session-nav-dots {
  flex-wrap: wrap;
  justify-content: center;
}

.ibmi-session-nav-btn {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.ibmi-session-nav-btn:hover:not(:disabled) {
  border-color: var(--color-border-strong);
  color: var(--color-text-primary);
  background: var(--color-bg-hover);
}

.ibmi-session-nav-btn:disabled {
  opacity: 0.45;
  cursor: default;
}

.ibmi-session-nav-arrow {
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 600;
}

.ibmi-session-nav-dot {
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 700;
}

.ibmi-session-nav-dot.active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: white;
}

.ibmi-compile-target-list,
.ibmi-compile-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ibmi-compile-target-list .inline-code {
  padding: 4px 8px;
}

.ibmi-compile-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}

.ibmi-compile-meta-grid > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-bg-secondary);
}

.ibmi-compile-meta-label {
  font-size: 11px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ibmi-compile-meta-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary);
}

.ibmi-compile-step {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
}

.ibmi-compile-step-verb {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #198754;
}

.ibmi-compile-step-target {
  font-size: 12px;
}

.ibmi-detail-raw-command summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-secondary);
}

/* Responsive: Stack tool type chips on small screens */
@media (max-width: 480px) {
  .tool-type-filter-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .tool-type-filter-chips {
    gap: 3px;
  }

  .tool-type-chip {
    padding: 2px 6px;
    font-size: 10px;
  }

  .tool-type-chip-count {
    min-width: 12px;
    height: 10px;
    font-size: 8px;
  }

  .ibmi-type-filter-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .ibmi-session-nav-controls {
    flex-direction: column;
    align-items: stretch;
  }

  .ibmi-session-nav-dots {
    justify-content: flex-start;
  }
}

.activity-feed {
  max-height: 500px;
  overflow-y: auto;
  background: var(--color-surface);
  border-radius: var(--radius-small);
  padding: 12px 12px 8px 12px;
}

/* Activity Search - Styled like task search in index.html */
.activity-search-wrapper {
  display: flex;
  align-items: center;
  margin-left: auto;
  margin-right: 8px;
}

/* Hide toggle button when search is open */
.activity-search-wrapper.search-open #activity-search-toggle {
  display: none;
}

.activity-search-container {
  display: flex;
  align-items: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  overflow: hidden;
  animation: activitySearchExpand 0.12s ease-out;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.activity-search-container:focus-within {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(63, 114, 255, 0.1);
}

@keyframes activitySearchExpand {
  from {
    width: 0;
    opacity: 0;
  }
  to {
    width: 240px;
    opacity: 1;
  }
}

.activity-search-container[hidden] {
  display: none;
}

/* Embedded search icon */
.activity-search-icon {
  margin-left: 10px;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

#activity-search-input {
  width: 160px;
  padding: 6px 10px;
  border: none;
  background: transparent;
  font-size: 13px;
  color: var(--color-text);
  outline: none;
}

#activity-search-input::placeholder {
  color: var(--color-text-muted);
}

/* Close button to dismiss search */
.activity-search-close {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color 0.15s;
}

.activity-search-close:hover {
  color: var(--color-text);
}

.activity-filter-count {
  font-size: 11px;
  color: var(--color-text-muted);
  white-space: nowrap;
  margin-left: 8px;
}

.logs-search-wrapper {
  display: flex;
  align-items: center;
  margin-left: auto;
  margin-right: 8px;
}

.logs-search-wrapper.search-open #logs-search-toggle {
  display: none;
}

.logs-search-container {
  display: flex;
  align-items: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  overflow: hidden;
  animation: activitySearchExpand 0.12s ease-out;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.logs-search-container:focus-within {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(63, 114, 255, 0.1);
}

.logs-search-container[hidden] {
  display: none;
}

.logs-search-icon {
  margin-left: 10px;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

#logs-search-input {
  width: 150px;
  padding: 6px 8px;
  border: none;
  background: transparent;
  font-size: 13px;
  color: var(--color-text);
  outline: none;
}

#logs-search-input::placeholder {
  color: var(--color-text-muted);
}

.logs-search-count {
  font-size: 11px;
  color: var(--color-text-muted);
  margin-right: 6px;
  white-space: nowrap;
}

.logs-search-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 6px;
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color 0.15s;
}

.logs-search-nav:hover {
  color: var(--color-text);
}

.logs-search-nav:disabled {
  opacity: 0.4;
  cursor: default;
}

.logs-search-close {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color 0.15s;
}

.logs-search-close:hover {
  color: var(--color-text);
}

.log-search-highlight {
  background: rgba(250, 204, 21, 0.3);
  color: #fef08a;
  border-radius: 2px;
  padding: 0 1px;
}

.log-search-highlight.active {
  background: #facc15;
  color: #111827;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.4);
}

.activity-no-results {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px;
  color: var(--color-text-muted);
  font-style: normal;
}

.activity-no-results svg {
  opacity: 0.5;
}

.activity-placeholder {
  text-align: left;
  color: var(--color-text-muted);
  padding: 12px 0 8px 42px;
  font-style: italic;
}

.activity-placeholder.staged-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px 16px;
  font-style: normal;
}

.staged-placeholder .staged-icon {
  font-size: 32px;
  margin-bottom: 12px;
  opacity: 0.7;
}

.staged-placeholder .staged-message {
  font-size: 14px;
  max-width: 280px;
  line-height: 1.5;
}

/* Timeline style for activity feed */
.activity-timeline-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 20px;
  position: relative;
  padding: 6px 8px;
  margin-left: 8px;
}

.activity-timeline-item::before {
  content: '';
  position: absolute;
  left: 27px;
  top: 40px;
  bottom: -20px;
  width: 2px;
  background: var(--color-border);
}

.activity-timeline-item:last-child::before {
  display: none;
}

.activity-timeline-marker {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-surface);
  border: 3px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  z-index: 1;
  position: relative;
}

.activity-timeline-item.success .activity-timeline-marker {
  border-color: var(--color-success);
  background: var(--color-surface);
}

.activity-timeline-item.error .activity-timeline-marker {
  border-color: var(--color-danger);
  background: var(--color-surface);
}

.activity-timeline-item.running .activity-timeline-marker {
  border-color: var(--color-accent);
  background: #e3f2fd;
}

.activity-timeline-content {
  margin-left: 15px;
  flex: 1;
  min-width: 0;
}

.activity-timeline-action {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 4px;
  color: var(--color-text);
}

.activity-timeline-detail {
  color: var(--color-text-muted);
  font-size: 13px;
  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', 'Consolas', monospace;
  word-break: break-word;
}

.activity-timeline-status {
  margin-left: 12px;
  font-size: 16px;
  flex-shrink: 0;
  align-self: center;
}

.activity-timeline-item.expandable {
  cursor: pointer;
  transition: background-color 0.2s;
  margin-left: -8px;
  margin-right: -8px;
  padding-left: 16px;
  padding-right: 8px;
  padding-top: 4px;
  padding-bottom: 4px;
  border-radius: var(--radius-small);
}

.activity-timeline-item.expandable:hover {
  background-color: rgba(63, 114, 255, 0.05);
}

.expand-hint {
  font-size: 10px;
  color: var(--color-text-muted);
  margin-left: 4px;
}

/* Activity typing indicator (chat-like "working" animation) */
.activity-typing-indicator {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 12px 0 8px 42px;
}

.activity-elapsed-time {
  margin-left: 8px;
  font-size: 12px;
  color: var(--color-text-muted);
  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', 'Consolas', monospace;
}

.activity-turn-elapsed {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text-muted);
  background: rgba(0, 0, 0, 0.05);
  border-radius: 9px;
  vertical-align: 1px;
  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', 'Consolas', monospace;
}

.activity-typing-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-text-muted);
  opacity: 0.6;
  animation: typing-bounce 1.4s infinite ease-in-out;
}

.activity-typing-dot:nth-child(1) {
  animation-delay: 0s;
}

.activity-typing-dot:nth-child(2) {
  animation-delay: 0.2s;
}

.activity-typing-dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes typing-bounce {
  0%, 60%, 100% {
    transform: translateY(0);
    opacity: 0.6;
  }
  30% {
    transform: translateY(-8px);
    opacity: 1;
  }
}

/* User message styling - distinct from agent activity */
.activity-feed .activity-timeline-item.user-message {
  background-color: rgba(46, 182, 125, 0.05) !important;
  border-left: 3px solid var(--color-success) !important;
  border-radius: 6px !important;
  padding: 8px 12px 8px 12px !important;
  margin-left: 8px !important;
  margin-bottom: 20px !important;
}

.activity-feed .activity-timeline-item.user-message .activity-timeline-marker {
  border-color: var(--color-success) !important;
  background: #e8f5e9 !important;
}

.activity-feed .activity-timeline-item.user-message .activity-timeline-action {
  color: var(--color-success) !important;
  font-weight: 600 !important;
}

.activity-feed .activity-timeline-item.user-message.expandable:hover {
  background-color: rgba(46, 182, 125, 0.1) !important;
  cursor: pointer !important;
}

/* Agent response styling - conversational replies */
.activity-feed .activity-timeline-item.agent-response {
  background-color: rgba(63, 114, 255, 0.04) !important;
  border-left: 3px solid var(--color-accent) !important;
  border-radius: 6px !important;
  padding: 8px 12px 8px 12px !important;
  margin-left: 8px !important;
  margin-bottom: 20px !important;
}

.activity-feed .activity-timeline-item.agent-response .activity-timeline-marker {
  border-color: var(--color-accent) !important;
  background: #e3f2fd !important;
}

.activity-feed .activity-timeline-item.agent-response .activity-timeline-action {
  color: var(--color-accent) !important;
  font-weight: 600 !important;
}

.activity-feed .activity-timeline-item.agent-response.expandable:hover {
  background-color: rgba(63, 114, 255, 0.08) !important;
  cursor: pointer !important;
}

/* Inline follow-up wrapper - fixed at bottom of activity card */
.inline-follow-up-wrapper {
  position: relative;
  padding: 4px 8px 8px 8px;
  background: var(--color-surface);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.inline-follow-up-wrapper.drag-over {
  border: 2px dashed var(--color-accent);
  border-radius: var(--radius-small);
  box-shadow: 0 0 0 3px rgba(63,114,255,0.2);
  background: rgba(63,114,255,0.05);
}

.inline-follow-up-wrapper.drag-over::after {
  content: 'Drop files here';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 8px 16px;
  background: var(--color-accent);
  color: white;
  border-radius: var(--radius-small);
  font-size: 14px;
  font-weight: 500;
  pointer-events: none;
  z-index: 10;
}

.inline-follow-up-textarea {
  width: 100%;
  min-height: 60px;
  max-height: 160px;
  padding: 8px 42px 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  font-size: 14px;
  font-family: inherit;
  color: var(--color-text);
  background: var(--color-surface);
  line-height: 1.4;
  resize: none;
  overflow-y: hidden;
  transition: height 0.1s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.inline-follow-up-textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(63,114,255,0.1);
}

.inline-follow-up-textarea:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.inline-follow-up-submit {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 14px;
}

.inline-follow-up-submit:hover:not(:disabled),
.inline-follow-up-submit:active:not(:disabled) {
  transform: translateY(-50%);
}

/* Follow-up markdown editor wrapper (for inline follow-up and quick reply) */
.quick-reply-editor-wrapper,
.inline-follow-up-editor-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  background: var(--color-surface);
  overflow: visible; /* Allow dropdown menus to escape */
}

.quick-reply-editor-wrapper:focus-within,
.inline-follow-up-editor-wrapper:focus-within {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(63,114,255,0.1);
}

/* Follow-up toolbar */
.follow-up-toolbar {
  padding: 6px 8px;
  background: var(--color-surface-muted);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  border-radius: calc(var(--radius-small) - 1px) calc(var(--radius-small) - 1px) 0 0; /* Match wrapper's top corners, minus border width */
  position: relative; /* For dropdown z-index stacking */
}

.follow-up-toolbar-hidden {
  display: none !important;
}

.follow-up-toolbar > button,
.follow-up-toolbar > .markdown-toolbar-dropdown > button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: var(--radius-small);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.follow-up-toolbar > button:hover,
.follow-up-toolbar > .markdown-toolbar-dropdown > button:hover {
  background: var(--color-surface-hover);
  color: var(--color-text);
}

.follow-up-toolbar > button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.follow-up-toolbar > button.active,
.follow-up-toolbar > .markdown-toolbar-dropdown > button.active {
  background: var(--color-accent-muted);
  color: var(--color-accent);
}

.follow-up-toolbar > button.markdown-voice-btn.voice-listening {
  background: rgba(229, 83, 104, 0.12);
  color: var(--color-danger);
  animation: markdown-voice-listening-pulse 1.25s ease-in-out infinite;
}

.follow-up-toolbar .toolbar-separator {
  width: 1px;
  height: 20px;
  background: var(--color-border);
  margin: 4px 4px;
}

/* Follow-up editor container - use position relative for button alignment */
.follow-up-editor-container {
  position: relative;
  flex: 1;
  min-width: 0;
}

.follow-up-editor-container .markdown-editor {
  min-height: 60px;
  max-height: 160px;
  padding: 8px 50px 8px 10px; /* Right padding reserves space for submit button */
  border: none;
  border-radius: 0;
  font-size: 14px;
  line-height: 1.4;
  overflow-y: auto;
  background: transparent;
}

.follow-up-editor-container .markdown-editor-source-container {
  margin-right: 50px; /* Right margin reserves space for submit button, matching visual editor */
}

.follow-up-editor-container .markdown-editor:focus {
  outline: none;
}

.follow-up-editor-container .markdown-editor[data-placeholder]:empty:before {
  content: attr(data-placeholder);
  color: var(--color-text-muted);
  pointer-events: none;
}

/* Position submit button centered relative to editor container, not the whole wrapper */
.quick-reply-input-row > .quick-reply-submit-btn,
.follow-up-input-row > .inline-follow-up-submit {
  position: absolute;
  right: 8px;
  /* Align to vertical center of editor container */
  top: 50%;
  transform: translateY(-50%);
  /* Adjust for toolbar height when visible - toolbar is ~40px */
}

/* When toolbar is visible, offset the button to center on editor area only */
.quick-reply-editor-wrapper:has(.follow-up-toolbar:not(.follow-up-toolbar-hidden)) ~ .quick-reply-submit-btn,
.inline-follow-up-editor-wrapper:has(.follow-up-toolbar:not(.follow-up-toolbar-hidden)) ~ .inline-follow-up-submit {
  /* Toolbar is ~41px (6px padding * 2 + 28px button + 1px border), so offset by half */
  top: calc(50% + 20px);
}

/* Allow dropdown menus to overflow parent containers */
.latest-activity-banner.replying {
  overflow: visible !important;
}

.latest-activity-banner.replying .quick-reply-section {
  overflow: visible !important;
  /* Match parent's bottom border-radius to prevent rectangular corners showing through */
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 14px;
  /* Extend to the edges of the parent to fill the rounded corners */
  margin-left: -16px;
  margin-right: -16px;
  margin-bottom: -14px;
  padding-left: 16px;
  padding-right: 16px;
  padding-bottom: 14px;
}

/* Agent activity card and live activity card - allow dropdown overflow when follow-up input is visible */
#activity-card:not(.collapsed),
#live-activity-card:not(.collapsed) {
  overflow: visible !important;
}

#activity-card:not(.collapsed) .detail-card-content,
#live-activity-card:not(.collapsed) .detail-card-content {
  overflow: visible !important;
}

#activity-card .inline-follow-up-wrapper,
#live-activity-card .inline-follow-up-wrapper {
  overflow: visible !important;
}

/* Ensure follow-up toolbar dropdowns appear above all card content */
.follow-up-toolbar {
  overflow: visible !important;
}

.follow-up-toolbar .markdown-toolbar-dropdown-menu {
  z-index: 10000;
}

/* Resubmit modal instructions textarea */
.resubmit-instructions-textarea {
  width: 100%;
  min-height: 60px;
  max-height: 160px;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  font-size: 14px;
  font-family: inherit;
  color: var(--color-text);
  background: var(--color-surface);
  line-height: 1.5;
  resize: vertical;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.resubmit-instructions-textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(63,114,255,0.1);
}

.resubmit-instructions-textarea::placeholder {
  color: var(--color-text-tertiary);
}

/* Markdown editor inside resubmit modal */
#resubmit-modal .markdown-editor {
  max-height: 200px;
  min-height: 60px;
  overflow-y: auto;
}

/* Resubmit modal markdown editor container - wraps toolbar + editor */
.resubmit-markdown-editor-container {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  overflow: hidden;
}

.resubmit-markdown-editor-container:focus-within {
  outline: 2px solid rgba(63,114,255,0.25);
  border-color: var(--color-accent);
}

.resubmit-markdown-editor-container .markdown-editor-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.resubmit-markdown-editor-container .markdown-editor {
  border: none;
  border-radius: 0;
  box-shadow: none;
  font-size: 15px;
  line-height: 1.5;
}

.resubmit-markdown-editor-container .markdown-editor p {
  margin: 0;
}

.resubmit-markdown-editor-container .markdown-editor:focus {
  outline: none;
  box-shadow: none;
}

/* Resubmit modal variant checkbox */
.resubmit-variant-checkbox {
  padding: 10px 12px;
  background: rgba(63, 114, 255, 0.06);
  border-radius: var(--radius-small);
  border: 1px solid rgba(63, 114, 255, 0.15);
}

.resubmit-variant-checkbox span {
  color: var(--color-text-secondary);
}

.resubmit-variant-checkbox input[type="checkbox"]:checked + span {
  color: var(--color-text);
}

/* Resubmit model/effort disclosure — collapsed by default, low visual weight */
.resubmit-model-config {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  background: var(--color-bg-secondary);
}

.resubmit-model-config-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--color-text-secondary);
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.resubmit-model-config-summary::-webkit-details-marker {
  display: none;
}

.resubmit-model-config-summary::after {
  content: "▸";
  font-size: 10px;
  color: var(--color-text-muted);
  transition: transform 0.15s ease;
}

.resubmit-model-config[open] .resubmit-model-config-summary::after {
  transform: rotate(90deg);
}

.resubmit-model-config-summary:hover {
  color: var(--color-text);
}

.resubmit-model-config-hint {
  margin-left: auto;
  font-size: 12px;
  color: var(--color-text-muted);
}

.resubmit-model-config-body {
  padding: 4px 0 8px;
  border-top: 1px solid var(--color-border);
}

/* User instruction detail in modal */
.user-instruction-detail {
  padding: 16px;
  background: rgba(46, 182, 125, 0.05);
  border-radius: var(--radius-medium);
  border-left: 3px solid var(--color-success);
}

.user-instruction-detail pre {
  background: #2d2d2d;
  color: #f8f8f2;
  padding: 12px;
  border-radius: var(--radius-small);
  overflow-x: auto;
  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', 'Consolas', monospace;
  font-size: 13px;
}

.user-instruction-detail code {
  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', 'Consolas', monospace;
  font-size: 13px;
}

.user-instruction-detail pre code {
  background: transparent;
  padding: 0;
  color: inherit;
}

.user-instruction-detail :not(pre) > code {
  background: rgba(0, 0, 0, 0.06);
  padding: 2px 6px;
  border-radius: 3px;
  color: #c7254e;
}

.user-instruction-detail ul,
.user-instruction-detail ol {
  margin: 8px 0 12px 0;
  padding-left: 24px;
}

.user-instruction-detail li {
  margin: 4px 0;
}

/* Agent response detail in modal */
.agent-response-detail {
  padding: 16px;
  background: rgba(63, 114, 255, 0.04);
  border-radius: var(--radius-medium);
  border-left: 3px solid var(--color-accent);
}

.agent-response-detail pre {
  background: #2d2d2d;
  color: #f8f8f2;
  padding: 12px;
  border-radius: var(--radius-small);
  overflow-x: auto;
  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', 'Consolas', monospace;
  font-size: 13px;
}

.agent-response-detail code {
  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', 'Consolas', monospace;
  font-size: 13px;
}

.agent-response-detail pre code {
  background: transparent;
  padding: 0;
  color: inherit;
}

.agent-response-detail :not(pre) > code {
  background: rgba(0, 0, 0, 0.06);
  padding: 2px 6px;
  border-radius: 3px;
  color: #c7254e;
}

.agent-response-detail ul,
.agent-response-detail ol {
  margin: 8px 0 12px 0;
  padding-left: 24px;
}

.agent-response-detail li {
  margin: 4px 0;
}

/* Load More Activity Button */
.activity-load-more {
  padding: 12px 0;
  text-align: center;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 12px;
}

.activity-load-more .btn-ghost {
  font-size: 13px;
}

/* ===== Pagination ===== */
.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  border-top: 1px solid var(--color-border);
  margin-top: 16px;
}

.pagination-info {
  font-size: 13px;
  color: var(--color-text-muted);
}

.pagination-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pagination-current {
  font-size: 13px;
  color: var(--color-text);
  padding: 0 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.pagination-input {
  width: 50px;
  padding: 4px 8px;
  font-size: 13px;
  text-align: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  background: var(--color-surface);
  color: var(--color-text);
}

.pagination-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

/* Hide spinner buttons on number input */
.pagination-input::-webkit-outer-spin-button,
.pagination-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.pagination-input[type=number] {
  -moz-appearance: textfield;
}

.pagination-btn {
  min-width: 60px;
}

.pagination-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

:root[data-theme="dark"] .pagination-btn:disabled {
  opacity: 0.3;
}

:root[data-theme="dark"] .pagination-input {
  background: var(--color-surface);
  border-color: var(--color-border);
}

/* Todo list in modal */
.todo-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.todo-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 12px;
  background: var(--color-surface);
  border-radius: var(--radius-small);
  border-left: 3px solid transparent;
}

.todo-item.todo-completed {
  border-left-color: #10b981;
  opacity: 0.7;
}

.todo-item.todo-completed .todo-content {
  text-decoration: line-through;
}

.todo-item.todo-in_progress {
  border-left-color: #3b82f6;
}

.todo-item.todo-pending {
  border-left-color: #6b7280;
}

.todo-status {
  font-size: 16px;
  flex-shrink: 0;
}

.todo-content {
  flex: 1;
  line-height: 1.5;
}

/* ExitPlanMode / Plan detail */
.plan-detail {
  font-family: inherit;
  line-height: 1.6;
  color: var(--color-text);
}

.plan-detail h1,
.plan-detail h2,
.plan-detail h3 {
  margin: 12px 0 6px;
  font-weight: 600;
}

.plan-detail h1 { font-size: 16px; }
.plan-detail h2 { font-size: 14px; }
.plan-detail h3 { font-size: 13px; }

.plan-detail ul,
.plan-detail ol {
  padding-left: 20px;
  margin: 4px 0;
}

.plan-detail li {
  margin: 2px 0;
}

.plan-detail code {
  background: var(--color-surface);
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 12px;
}

.plan-detail pre {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  padding: 10px;
  overflow-x: auto;
  font-size: 12px;
  margin: 6px 0;
}

/* AskUserQuestion styles */
.ask-question-detail {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Collapsible question */
.ask-question-collapsible {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  overflow: hidden;
}

.ask-question-summary {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 10px 14px;
  cursor: pointer;
  font-size: 13px;
  color: var(--color-text);
  user-select: none;
  list-style: none;
  background: var(--color-surface);
}

.ask-question-summary::-webkit-details-marker {
  display: none;
}

.ask-question-summary::before {
  content: '▶';
  font-size: 9px;
  color: var(--color-text-muted);
  transition: transform 0.15s;
  flex-shrink: 0;
  margin-top: 3px;
}

.ask-question-collapsible[open] > .ask-question-summary::before {
  transform: rotate(90deg);
}

.ask-question-summary:hover {
  background: var(--color-surface-hover, var(--color-surface));
}

.ask-question-summary-num {
  font-weight: 600;
  color: #8b5cf6;
}

.ask-question-summary-chip {
  display: inline-flex;
  padding: 1px 8px;
  background: #8b5cf620;
  color: #8b5cf6;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
  margin-top: 1px;
}

.ask-question-summary-text {
  flex: 1;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.4;
}

.ask-question-summary-count {
  font-size: 11px;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.ask-question-body {
  padding: 8px 14px 14px;
  border-top: 1px solid var(--color-border);
}

.ask-question-multi-badge {
  font-size: 10px;
  background: #8b5cf620;
  color: #8b5cf6;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 500;
  flex-shrink: 0;
}

.ask-question-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ask-question-option {
  padding: 10px 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  transition: border-color 0.15s;
}

.ask-question-option-label {
  font-weight: 500;
  font-size: 14px;
  color: var(--color-text);
}

.ask-question-option-desc {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: 2px;
  line-height: 1.4;
}

.ask-question-option-preview {
  margin: 6px 0 0;
  padding: 8px 10px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', 'Consolas', monospace;
  font-size: 11px;
  line-height: 1.4;
  white-space: pre-wrap;
  max-height: 120px;
  overflow: auto;
  color: var(--color-text-muted);
}

/* Answer UI for AskUserQuestion in activity feed */
.ask-question-answer-ui {
  margin-top: 12px;
  padding: 12px;
  background: #8b5cf610;
  border: 1px solid #8b5cf630;
  border-radius: var(--radius-small);
}

.ask-question-answer-ui .ask-answer-label {
  font-size: 12px;
  font-weight: 600;
  color: #8b5cf6;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.ask-question-answer-ui .ask-answer-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.ask-question-answer-ui .ask-answer-option-btn {
  padding: 8px 12px 8px 36px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  cursor: pointer;
  font-size: 13px;
  color: var(--color-text);
  transition: all 0.15s;
  position: relative;
  text-align: left;
}

/* Radio indicator (single-select) */
.ask-question-answer-ui .ask-answer-option-btn::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  background: transparent;
  transition: all 0.15s;
}

/* Checkbox indicator (multi-select) */
.ask-answer-question[data-multi-select="true"] .ask-answer-option-btn::before,
.ask-question-answer-ui[data-multi-select="true"] .ask-answer-option-btn::before {
  border-radius: 3px;
}

.ask-question-answer-ui .ask-answer-option-btn:hover {
  border-color: #8b5cf6;
  background: #8b5cf610;
}

.ask-question-answer-ui .ask-answer-option-btn:hover::before {
  border-color: #8b5cf6;
}

/* Selected state: radio fill */
.ask-question-answer-ui .ask-answer-option-btn.selected {
  border-color: #8b5cf6;
  background: #8b5cf610;
}

.ask-question-answer-ui .ask-answer-option-btn.selected::before {
  border-color: #8b5cf6;
  background: #8b5cf6;
  box-shadow: inset 0 0 0 2.5px var(--color-surface);
}

/* Selected checkbox: checkmark instead of filled circle */
.ask-answer-question[data-multi-select="true"] .ask-answer-option-btn.selected::before,
.ask-question-answer-ui[data-multi-select="true"] .ask-answer-option-btn.selected::before {
  box-shadow: none;
}

.ask-answer-question[data-multi-select="true"] .ask-answer-option-btn.selected::after,
.ask-question-answer-ui[data-multi-select="true"] .ask-answer-option-btn.selected::after {
  content: '';
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-60%) rotate(45deg);
  width: 5px;
  height: 9px;
  border: solid white;
  border-width: 0 2px 2px 0;
}

.ask-question-answer-ui .ask-answer-freeform {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.ask-question-answer-ui .ask-answer-freeform textarea {
  flex: 1;
  min-height: 36px;
  max-height: 120px;
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  font-family: inherit;
  font-size: 13px;
  resize: vertical;
  background: var(--color-surface);
  color: var(--color-text);
}

.ask-question-answer-ui .ask-answer-submit {
  padding: 8px 16px;
  background: #8b5cf6;
  color: white;
  border: none;
  border-radius: var(--radius-small);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  transition: background 0.15s;
}

.ask-question-answer-ui .ask-answer-submit:hover {
  background: #7c3aed;
}

.ask-question-answer-ui .ask-answer-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Preview layout: side-by-side options + preview panel */
.ask-question-preview-layout,
.ask-answer-preview-layout {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 12px;
  min-height: 120px;
}

.ask-question-preview-options,
.ask-answer-preview-options {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ask-question-preview-option {
  padding: 8px 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  cursor: pointer;
  transition: all 0.15s;
}

.ask-question-preview-option:hover {
  border-color: #8b5cf6;
}

.ask-question-preview-option.active {
  border-color: #8b5cf6;
  background: #8b5cf610;
}

.ask-question-preview-panel,
.ask-answer-preview-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  overflow: auto;
  max-height: 300px;
}

.ask-question-preview-content,
.ask-answer-preview-content {
  margin: 0;
  padding: 12px;
  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', 'Consolas', monospace;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  color: var(--color-text);
}

/* Answer UI: preview-aware option buttons */
.ask-answer-preview-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding: 8px 12px;
}

.ask-answer-option-btn-label {
  font-weight: 500;
}

.ask-answer-option-btn-desc {
  font-size: 11px;
  color: var(--color-text-muted);
  margin-top: 2px;
}

/* Multi-question answer layout */
.ask-answer-question {
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border);
}

.ask-answer-question:last-of-type {
  border-bottom: none;
  margin-bottom: 8px;
  padding-bottom: 0;
}

.ask-answer-question-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: 8px;
}

.ask-answer-submit-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
}

.ask-question-denied-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: #f59e0b;
  background: #f59e0b20;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 500;
  margin-top: 8px;
}

.ask-question-answered-badge {
  font-size: 13px;
  color: #10b981;
  font-weight: 500;
  margin-top: 8px;
  padding: 8px 12px;
  background: #10b98110;
  border-radius: var(--radius-small);
  white-space: pre-wrap;
}

.thinking-detail {
  font-family: inherit;
  line-height: 1.6;
  color: var(--color-text);
}

/* Markdown styling for thinking detail - match output-summary */
.thinking-detail h1 {
  font-size: 18px;
  margin: 16px 0 12px 0;
}

.thinking-detail h1:first-child {
  margin-top: 0;
}

.thinking-detail h2 {
  font-size: 16px;
  margin: 14px 0 10px 0;
}

.thinking-detail h3 {
  font-size: 14px;
  margin: 12px 0 8px 0;
}

.thinking-detail p {
  margin: 0 0 12px 0;
}

.thinking-detail p:last-child {
  margin-bottom: 0;
}

.thinking-detail ul, .thinking-detail ol {
  margin: 8px 0 12px 0;
  padding-left: 24px;
}

.thinking-detail li {
  margin: 4px 0;
}

.thinking-detail pre {
  margin: 12px 0;
  padding: 12px;
  background: #2d2d2d;
  color: #f8f8f2;
  border-radius: var(--radius-small);
  overflow-x: auto;
  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', 'Consolas', monospace;
  font-size: 13px;
}

.thinking-detail code {
  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', 'Consolas', monospace;
  font-size: 13px;
}

.thinking-detail pre code {
  background: transparent;
  padding: 0;
  color: inherit;
}

.thinking-detail :not(pre) > code {
  background: rgba(0, 0, 0, 0.06);
  padding: 2px 6px;
  border-radius: 3px;
  color: #c7254e;
}

.activity-feed::-webkit-scrollbar {
  width: 8px;
}

.activity-feed::-webkit-scrollbar-track {
  background: var(--color-surface-muted);
  border-radius: 4px;
}

.activity-feed::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 4px;
}

.activity-feed::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-muted);
}

/* Prompt parameter UI */
.input-with-button {
  display: flex;
  gap: 8px;
  align-items: center;
}

.input-with-button input {
  flex: 1;
}

.input-with-button input.readonly-count {
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
  cursor: default;
  font-style: italic;
}

.input-with-button input.readonly-count:focus {
  outline: none;
  border-color: var(--color-border);
}

.parameter-checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  min-height: 36px;
  cursor: pointer;
  user-select: none;
  font-size: 15px;
  font-weight: 600;
}

.parameter-checkbox-text {
  min-width: 0;
  color: var(--color-text);
  overflow-wrap: anywhere;
}

.parameter-field-label {
  color: var(--color-text);
}

.parameter-checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  cursor: pointer;
  accent-color: var(--color-primary);
  flex: 0 0 auto;
}

.parameter-description,
.parameter-checkbox-description {
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.4;
}

.prompt-button {
  min-width: 36px;
  height: 36px;
  padding: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  cursor: pointer;
  font-size: 18px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  color: var(--color-text-muted);
}

.prompt-button:hover {
  background: var(--color-surface-muted);
  border-color: var(--color-primary);
  color: var(--color-text);
}

.prompt-button:active {
  transform: scale(0.95);
}

.prompt-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.clear-parameter-btn,
.clear-deploy-param-btn {
  min-width: 28px;
  height: 36px;
  padding: 0 6px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  transition: all 0.15s ease;
}

.clear-parameter-btn:hover,
.clear-deploy-param-btn:hover {
  background: var(--color-surface-muted);
  border-color: var(--color-danger, #e53e3e);
  color: var(--color-danger, #e53e3e);
}

.prompt-search-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  margin-bottom: 12px;
  font-size: 14px;
}

.prompt-search-input:focus {
  outline: none;
  border-color: var(--color-primary);
}

#prompt-search-container {
  margin-bottom: 12px;
}

.prompt-progress-container {
  margin-bottom: 16px;
  padding: 12px;
  background: var(--color-surface-muted);
  border-radius: 4px;
  max-height: 150px;
  overflow-y: auto;
}

.prompt-progress-log {
  font-size: 13px;
  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
}

.prompt-progress-item {
  padding: 4px 0;
  color: var(--color-text-muted);
}

.prompt-progress-item:last-child {
  color: var(--color-text);
  font-weight: 500;
}

/* Loading indicator for prompt modal */
.prompt-loading-indicator {
  display: flex;
  align-items: center;
  gap: 2px;
}

.prompt-loading-indicator .loading-dots::after {
  content: '';
  animation: prompt-loading-dots 1.2s infinite;
}

@keyframes prompt-loading-dots {
  0%, 20% { content: '.'; }
  40% { content: '..'; }
  60%, 100% { content: '...'; }
}

.prompt-choices {
  margin: 0;
  /* Let modal-body handle scrolling, not this container */
}

.prompt-choice {
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  margin-bottom: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  background: var(--color-surface);
}

.prompt-choice:hover {
  border-color: var(--color-primary);
  background: var(--color-surface-muted);
}

.prompt-choice.selected {
  border-color: var(--color-primary);
  background: var(--color-primary-alpha);
}

.prompt-choice-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.prompt-choice input[type="checkbox"],
.prompt-choice input[type="radio"] {
  margin: 0;
  cursor: pointer;
}

.prompt-choice-label {
  font-weight: 500;
  flex: 1;
  cursor: pointer;
  font-size: 14px;
}

.prompt-choice-description {
  margin-top: 2px;
  font-size: 12px;
  color: var(--color-text-muted);
  margin-left: 24px;
  line-height: 1.3;
}

.prompt-choice-value {
  font-size: 0.85em;
  color: var(--color-text-muted);
  font-family: 'Courier New', monospace;
  margin-left: 24px;
  margin-top: 2px;
}

.multiselect-preview {
  max-height: 300px;
  overflow-y: auto;
  margin-top: 16px;
}

.multiselect-preview-item {
  padding: 8px 12px;
  background: var(--color-surface-muted);
  border-radius: 4px;
  margin-bottom: 8px;
  font-size: 0.9em;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.multiselect-preview-item strong {
  color: var(--color-text);
}

.multiselect-preview-item .preview-param {
  font-family: 'Courier New', monospace;
  font-size: 0.9em;
  color: var(--color-text-muted);
  padding-left: 12px;
}

.parameter-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-size: 0.9em;
  margin-right: 4px;
  margin-bottom: 4px;
}

.parameter-tag-remove {
  cursor: pointer;
  font-weight: bold;
  color: var(--color-text-muted);
  transition: color 0.2s ease;
}

.parameter-tag-remove:hover {
  color: var(--color-danger);
}

/* File Upload Styles */
.file-upload-section {
  margin-top: 8px;
  margin-bottom: 8px;
}

.attached-files-list {
  margin-top: 8px;
  padding: 8px;
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  max-height: 150px;
  overflow-y: auto;
}

.attached-file-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  margin-bottom: 6px;
  font-size: 0.9em;
}

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

.attached-file-item .file-name {
  flex: 1;
  font-weight: 500;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attached-file-item .file-size {
  color: var(--color-text-muted);
  font-size: 0.85em;
  white-space: nowrap;
}

.attached-file-item .remove-file-btn {
  padding: 2px 6px;
  cursor: pointer;
  color: var(--color-text-muted);
  background: transparent;
  border: none;
  font-size: 1.2em;
  line-height: 1;
  border-radius: 3px;
  transition: all 0.2s ease;
}

.attached-file-item .remove-file-btn:hover {
  color: var(--color-danger);
  background: var(--color-surface-muted);
}

/* Follow-up input row with submit button */
.follow-up-input-row {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.follow-up-input-row .inline-follow-up-textarea {
  flex: 1;
}

.follow-up-input-row .btn-icon-launch {
  flex-shrink: 0;
  align-self: flex-end;
}

/* Follow-up file attachment buttons */
.follow-up-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
}

/* Compact icon buttons for file attachments */
.btn-icon-mini {
  padding: 5px 8px;
  font-size: 1em;
  line-height: 1;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--color-text-muted);
  font-weight: 400;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-icon-mini svg {
  vertical-align: middle;
  color: inherit;
}

.btn-icon-mini:hover {
  background: var(--color-surface-muted);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.btn-icon-mini:active {
  transform: scale(0.95);
}

/* Attachment Modal */
.attachment-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.attachment-modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  cursor: pointer;
}

.attachment-modal-content {
  position: relative;
  background: var(--color-surface-muted);
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  max-width: 85vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

.attachment-confirm-dialog {
  max-width: 500px;
}

.attachment-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
  border-radius: 8px 8px 0 0;
}

.attachment-modal-header h3 {
  margin: 0;
  font-size: 1.1em;
  font-weight: 600;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attachment-modal-body {
  padding: 24px;
  overflow: auto;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}

.attachment-image {
  max-width: 100%;
  max-height: 75vh;
  object-fit: contain;
  transition: transform 0.2s ease;
  transform-origin: center center;
  display: block;
}

.attachment-confirm-dialog .attachment-modal-body {
  display: block;
}

.attachment-confirm-dialog .attachment-modal-body p {
  margin: 12px 0;
  color: var(--color-text);
}

.attachment-modal-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  flex-shrink: 0;
  border-radius: 0 0 8px 8px;
}

.attachment-modal-footer button {
  flex-shrink: 0;
  min-width: 80px;
  padding: 8px 16px;
}

/* Markdown Editor Styles */
.markdown-editor {
  position: relative;
  min-height: 100px;
  padding: 12px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  font-size: 14px;
  font-family: inherit;
  color: var(--color-text);
  background: var(--color-surface);
  line-height: 1.6;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  overflow-y: auto;
  white-space: normal;
  word-wrap: break-word;
}

.markdown-editor:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(63,114,255,0.1);
}

.markdown-editor.empty::before {
  content: attr(data-placeholder);
  color: var(--color-text-muted);
  opacity: 0.7;
  pointer-events: none;
  position: absolute;
}

.markdown-editor[contenteditable="false"] {
  cursor: default;
  border-color: transparent;
  background: transparent;
  padding: 0;
}

/* When inside instructions-container, remove duplicate border/styling */
.instructions-container .markdown-editor {
  border: none;
  border-radius: var(--radius-small) var(--radius-small) 0 0;
  padding: 12px;
  min-height: 60px;
  max-height: 300px;
  font-size: 15px;
  line-height: 1.5;
  background: transparent;
}

.instructions-container .markdown-editor:focus {
  box-shadow: none;
}

/* Markdown content styling inside editor */
.markdown-editor h1 {
  font-size: 24px;
  font-weight: 700;
  margin: 16px 0 12px 0;
  line-height: 1.3;
}

.markdown-editor h1:first-child {
  margin-top: 0;
}

.markdown-editor h2 {
  font-size: 20px;
  font-weight: 600;
  margin: 14px 0 10px 0;
  line-height: 1.3;
}

.markdown-editor h3 {
  font-size: 17px;
  font-weight: 600;
  margin: 12px 0 8px 0;
  line-height: 1.3;
}

.markdown-editor p {
  margin: 8px 0;
}

.markdown-editor p:first-child {
  margin-top: 0;
}

.markdown-editor p:last-child {
  margin-bottom: 0;
}

.markdown-editor ul,
.markdown-editor ol {
  margin: 8px 0;
  padding-left: 24px;
}

.markdown-editor li {
  margin: 4px 0;
}

.markdown-editor code {
  font-family: "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 13px;
  background: rgba(0, 0, 0, 0.05);
  padding: 2px 6px;
  border-radius: 3px;
}

.markdown-editor pre {
  background: rgba(0, 0, 0, 0.05);
  padding: 12px;
  border-radius: var(--radius-small);
  overflow-x: auto;
  margin: 12px 0;
}

.markdown-editor pre code {
  background: none;
  padding: 0;
}

/* Dark mode code blocks for markdown editor */
[data-theme="dark"] .markdown-editor code {
  background: rgba(255, 255, 255, 0.1);
  color: #e2e8f0;
}

[data-theme="dark"] .markdown-editor pre {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .markdown-editor pre code {
  background: none;
  color: #e2e8f0;
}

.markdown-editor a {
  color: var(--color-accent);
  text-decoration: underline;
}

.markdown-editor a:hover {
  text-decoration: none;
}

/* Ctrl+click hint for links in edit mode */
.markdown-editor[contenteditable="true"] a {
  cursor: text;
}

.markdown-editor[contenteditable="true"] a:hover {
  cursor: pointer;
}

/* Link hint tooltip - rendered via JavaScript to avoid overflow clipping */
.markdown-editor-link-tooltip {
  position: fixed;
  background: var(--color-text);
  color: var(--color-surface);
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 10000;
}

.markdown-editor-link-tooltip.visible {
  opacity: 1;
}

.markdown-editor strong,
.markdown-editor b {
  font-weight: 600;
}

.markdown-editor em,
.markdown-editor i {
  font-style: italic;
}

.markdown-editor blockquote {
  border-left: 3px solid var(--color-border);
  margin: 12px 0;
  padding-left: 16px;
  color: var(--color-text-muted);
}

.markdown-editor hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 16px 0;
}

.markdown-editor img {
  max-width: 100%;
  height: auto;
}

/* @Mention Styles */
.mention {
  display: inline;
  background-color: rgba(59, 130, 246, 0.15);
  color: var(--color-primary, #3b82f6);
  padding: 1px 4px;
  border-radius: 4px;
  font-weight: 500;
  white-space: nowrap;
}

.mention:hover {
  background-color: rgba(59, 130, 246, 0.25);
}

[data-theme="dark"] .mention {
  background-color: rgba(96, 165, 250, 0.2);
  color: #60a5fa;
}

[data-theme="dark"] .mention:hover {
  background-color: rgba(96, 165, 250, 0.3);
}

/* Mention Dropdown Autocomplete */
.mention-dropdown {
  position: absolute;
  z-index: 10000;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.08);
  min-width: 220px;
  max-width: 320px;
  max-height: 240px;
  overflow-y: auto;
  overflow-x: hidden;
  display: none;
  padding: 4px 0;
}

.mention-dropdown::-webkit-scrollbar {
  width: 6px;
}

.mention-dropdown::-webkit-scrollbar-track {
  background: transparent;
}

.mention-dropdown::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 3px;
}

.mention-dropdown::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}

.mention-option {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  cursor: pointer;
  transition: background-color 0.1s ease;
}

.mention-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 50%;
  background: var(--avatar-color, #60A5FA);
  color: white;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.mention-option:hover,
.mention-option-selected {
  background-color: #3b82f6;
}

.mention-option:hover .mention-option-name,
.mention-option-selected .mention-option-name {
  color: #ffffff;
}

.mention-option:hover .mention-option-username,
.mention-option-selected .mention-option-username {
  color: rgba(255, 255, 255, 0.8);
}

.mention-option-name {
  font-weight: 500;
  color: #1f2937;
  font-size: 14px;
  line-height: 1.3;
}

.mention-option-username {
  font-size: 13px;
  color: #6b7280;
  text-align: right;
  flex-shrink: 0;
  margin-left: auto;
}

[data-theme="dark"] .mention-dropdown {
  background: #1e293b;
  border-color: #334155;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .mention-dropdown::-webkit-scrollbar-thumb {
  background: #475569;
}

[data-theme="dark"] .mention-dropdown::-webkit-scrollbar-thumb:hover {
  background: #64748b;
}

[data-theme="dark"] .mention-option:hover,
[data-theme="dark"] .mention-option-selected {
  background-color: #3b82f6;
}

[data-theme="dark"] .mention-option-name {
  color: #f1f5f9;
}

[data-theme="dark"] .mention-option-username {
  color: #64748b;
}

[data-theme="dark"] .mention-option:hover .mention-option-username,
[data-theme="dark"] .mention-option-selected .mention-option-username {
  color: rgba(255, 255, 255, 0.7);
}

/* Inline follow-up editor specific */
.follow-up-input-row {
  position: relative;
}

/* Bulk Selection Mode */
.bulk-actions-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
  padding: 16px 24px;
  z-index: 100;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

.bulk-actions-bar:not([hidden]) {
  transform: translateY(0);
}

.bulk-actions-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.bulk-selected-count {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
}

.bulk-actions-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Make pin SVG gray instead of blue in bulk actions */
#bulk-pin-btn svg {
  color: var(--color-text-muted);
}

#bulk-pin-btn:hover svg {
  color: var(--color-text);
}

/* Task selection checkbox */
.task-selection-checkbox {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 20px;
  height: 20px;
  cursor: pointer;
  accent-color: var(--color-accent);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 10;
}

.task-board.selection-mode .task-selection-checkbox {
  opacity: 1;
  pointer-events: auto;
}

.task-board.selection-mode .task-tile {
  padding-left: 44px;
}

.task-board.selection-mode .task-section-grid.list-view .task-tile {
  padding-left: 44px;
}

/* Selection mode active state for toggle button */
.task-board.selection-mode #toggle-selection-mode-btn {
  background: rgba(63, 114, 255, 0.1);
  color: var(--color-accent);
}

.task-board.selection-mode .task-board-content {
  padding-bottom: calc(28px + var(--bulk-actions-offset, 88px));
}

/* Image Editor Modal */
#image-editor-modal {
  z-index: 10002; /* Ensure image editor is above other modals (like objective modal) */
}

.modal-fullscreen .modal-content {
  width: 95vw;
  height: 95vh;
  max-width: none;
  max-height: none;
  display: flex;
  flex-direction: column;
}

.modal-fullscreen .modal-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

#image-editor-container {
  flex: 1;
  min-height: 0;
  width: 100%;
  height: 100%;
}

/* Hide Load and Download buttons in image editor (not configurable via API) */
.tui-image-editor-header-buttons {
  display: none !important;
}

/* File attachment edit button */
.attached-file-edit {
  background: none;
  border: none;
  color: var(--color-accent);
  cursor: pointer;
  padding: 4px 8px;
  font-size: 13px;
  transition: opacity 0.2s ease;
}

.attached-file-edit:hover {
  opacity: 0.7;
}

/* Tool Detail Modals */
.tool-detail {
  font-family: inherit;
  line-height: 1.5;
  color: var(--color-text);
}

.tool-section {
  margin-bottom: 16px;
}

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

.tool-section-header {
  font-weight: 600;
  font-size: 13px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.tool-code {
  background: #f5f5f5;
  border: 1px solid #e0e0e0;
  border-radius: var(--radius-small);
  padding: 12px;
  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', 'Consolas', monospace;
  font-size: 13px;
  line-height: 1.5;
  overflow-x: auto;
  color: #1a1a1a;
  margin: 0;
}

.tool-output {
  background: #2d2d2d;
  border: 1px solid #404040;
  border-radius: var(--radius-small);
  padding: 12px;
  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', 'Consolas', monospace;
  font-size: 13px;
  line-height: 1.5;
  overflow-x: auto;
  color: #f8f8f2;
  margin: 0;
  max-height: 400px;
  overflow-y: auto;
}

.file-path {
  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', 'Consolas', monospace;
  font-size: 13px;
  color: var(--color-accent);
  background: rgba(63, 114, 255, 0.08);
  padding: 6px 10px;
  border-radius: var(--radius-small);
  display: inline-block;
  word-break: break-all;
}

.error-section .tool-section-header {
  color: var(--color-danger);
}

.error-output {
  background: #2d1f1f;
  border-color: var(--color-danger);
  color: #ff6b6b;
}

.success-message {
  color: var(--color-success);
  font-size: 14px;
  padding: 8px 12px;
  background: rgba(46, 182, 125, 0.1);
  border-radius: var(--radius-small);
  border-left: 3px solid var(--color-success);
}

.exit-code {
  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', 'Consolas', monospace;
  font-size: 24px;
  font-weight: bold;
  padding: 12px;
  border-radius: var(--radius-small);
  display: inline-block;
  min-width: 60px;
  text-align: center;
}

.exit-code.success {
  color: var(--color-success);
  background: rgba(46, 182, 125, 0.1);
  border: 2px solid var(--color-success);
}

.exit-code.error {
  color: var(--color-danger);
  background: rgba(239, 83, 80, 0.1);
  border: 2px solid var(--color-danger);
}

.inline-code {
  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', 'Consolas', monospace;
  font-size: 13px;
  background: rgba(0, 0, 0, 0.06);
  padding: 3px 8px;
  border-radius: 3px;
  color: #c7254e;
}

.muted-text {
  color: var(--color-text-muted);
  font-style: italic;
}

/* Diff section for Edit tool */
.diff-section {
  position: relative;
}

.diff-section .tool-output.old-string {
  background: #2d1f1f;
  border-left: 3px solid #ef5350;
}

.diff-section .tool-output.new-string {
  background: #1f2d1f;
  border-left: 3px solid #66bb6a;
}

.diff-section .tool-output.old-string::before {
  content: '−';
  position: absolute;
  left: -16px;
  color: #ef5350;
  font-weight: bold;
}

.diff-section .tool-output.new-string::before {
  content: '+';
  position: absolute;
  left: -16px;
  color: #66bb6a;
  font-weight: bold;
}

/* Side-by-side diff for Edit tool */
.edit-diff-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--color-surface);
  border-radius: var(--radius-small);
  font-size: 13px;
}

.edit-diff-mode {
  color: var(--color-text-muted);
}

.edit-diff-stats {
  display: flex;
  gap: 12px;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
}

.edit-diff-removed {
  color: #ef5350;
}

.edit-diff-added {
  color: #66bb6a;
}

.edit-diff-container {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  overflow: hidden;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
}

.edit-diff-header {
  display: flex;
  background: rgba(63, 114, 255, 0.08);
  border-bottom: 1px solid var(--color-border);
}

.edit-diff-header-left,
.edit-diff-header-right {
  flex: 1;
  padding: 8px 14px;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-text-muted);
}

.edit-diff-header-left {
  border-right: 1px solid var(--color-border);
  background: rgba(239, 83, 80, 0.05);
  color: #ef5350;
}

.edit-diff-header-right {
  background: rgba(102, 187, 106, 0.05);
  color: #66bb6a;
}

.edit-diff-body {
  max-height: 500px;
  overflow-y: auto;
}

.edit-diff-row {
  display: flex;
  border-bottom: 1px solid var(--color-border);
}

.edit-diff-row:last-child {
  border-bottom: none;
}

.edit-diff-side {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.edit-diff-left {
  border-right: 1px solid var(--color-border);
}

.edit-diff-line {
  display: flex;
  align-items: stretch;
  white-space: pre;
  min-height: 22px;
}

.edit-diff-line-num {
  display: inline-block;
  padding: 2px 8px;
  text-align: right;
  color: var(--color-text-muted);
  background: rgba(0, 0, 0, 0.15);
  user-select: none;
  min-width: 45px;
  font-size: 11px;
}

.edit-diff-prefix {
  display: inline-block;
  width: 16px;
  padding: 2px 4px;
  text-align: center;
  font-weight: bold;
  user-select: none;
}

.edit-diff-content {
  flex: 1;
  padding: 2px 8px;
  white-space: pre-wrap;
  word-break: break-all;
  overflow-wrap: break-word;
}

/* Diff line states */
.edit-diff-add {
  background: rgba(102, 187, 106, 0.15);
}

.edit-diff-add .edit-diff-prefix {
  color: #66bb6a;
}

.edit-diff-add .edit-diff-content {
  background: rgba(102, 187, 106, 0.1);
}

.edit-diff-remove {
  background: rgba(239, 83, 80, 0.15);
}

.edit-diff-remove .edit-diff-prefix {
  color: #ef5350;
}

.edit-diff-remove .edit-diff-content {
  background: rgba(239, 83, 80, 0.1);
}

.edit-diff-context {
  background: transparent;
}

.edit-diff-context .edit-diff-prefix {
  color: transparent;
}

.edit-diff-empty {
  background: rgba(128, 128, 128, 0.08);
}

.edit-diff-empty .edit-diff-line-num {
  color: transparent;
}

.edit-diff-empty .edit-diff-prefix {
  color: transparent;
}

.edit-diff-empty .edit-diff-content {
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 4px,
    rgba(128, 128, 128, 0.05) 4px,
    rgba(128, 128, 128, 0.05) 8px
  );
}

.external-link {
  color: var(--color-accent);
  text-decoration: none;
  word-break: break-all;
}

.external-link:hover {
  text-decoration: underline;
}

.search-query,
.prompt-text {
  font-size: 14px;
  padding: 8px 12px;
  background: rgba(63, 114, 255, 0.06);
  border-radius: var(--radius-small);
  border-left: 3px solid var(--color-accent);
  line-height: 1.6;
}

/* Iframe wrapper with overlay mask */
.iframe-wrapper {
  position: relative;
  width: 100%;
  /* Use aspect ratio for better responsive sizing */
  aspect-ratio: 16 / 10;
  min-height: 400px;
  max-height: 800px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  overflow: hidden;
  margin: 16px 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.aitool-ibmi-screen-render {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
  background: #000;
}

/* Overlay mask to prevent interaction with iframe */
.iframe-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  z-index: 1;
  pointer-events: all;
}

/* Admin Menu Styles */
.admin-menu-container {
  position: relative;
}

.btn-icon-admin {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--color-text);
  font-size: 20px;
  cursor: pointer;
  border-radius: var(--radius-small);
  transition: all 0.15s ease;
}

.btn-icon-admin:hover {
  background: rgba(63, 114, 255, 0.08);
  transform: scale(1.05);
}

.btn-icon-admin:active {
  background: rgba(63, 114, 255, 0.12);
  transform: scale(0.95);
}

.btn-icon-help {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  text-decoration: none;
}

.btn-icon-help:hover {
  background: rgba(63, 114, 255, 0.08);
  color: var(--color-accent);
  transform: scale(1.05);
}

.btn-icon-help:active {
  background: rgba(63, 114, 255, 0.12);
  transform: scale(0.95);
}

/* User Menu / Avatar Dropdown */
.user-menu-container {
  position: relative;
}

.user-avatar-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 20px;
  transition: background 0.15s ease;
}

.user-avatar-btn:hover {
  background: rgba(63, 114, 255, 0.08);
}

.user-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--avatar-color, #60A5FA);
  color: white;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  position: relative;
  overflow: hidden;
}

.user-avatar-initials {
  display: block;
}

.user-avatar-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Avatar color palette - used by JS to assign consistent colors per user */
.avatar-color-0 { --avatar-color: #F87171; } /* Red */
.avatar-color-1 { --avatar-color: #FB923C; } /* Orange */
.avatar-color-2 { --avatar-color: #FBBF24; } /* Amber */
.avatar-color-3 { --avatar-color: #4ADE80; } /* Green */
.avatar-color-4 { --avatar-color: #2DD4BF; } /* Teal */
.avatar-color-5 { --avatar-color: #22D3EE; } /* Cyan */
.avatar-color-6 { --avatar-color: #60A5FA; } /* Blue */
.avatar-color-7 { --avatar-color: #A78BFA; } /* Purple */
.avatar-color-8 { --avatar-color: #F472B6; } /* Pink */
.avatar-color-9 { --avatar-color: #94A3B8; } /* Slate */

.avatar-chevron {
  color: var(--color-text-muted);
  transition: transform 0.15s ease;
}

.user-avatar-btn[aria-expanded="true"] .avatar-chevron {
  transform: rotate(180deg);
}

.user-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  z-index: 1000;
  overflow: hidden;
}

.user-menu-header {
  padding: 14px 16px;
  background: var(--color-surface-muted);
  border-bottom: 1px solid var(--color-border);
}

.user-menu-name {
  display: block;
  font-weight: 600;
  color: var(--color-text);
  font-size: 14px;
  line-height: 1.3;
}

.user-menu-email {
  display: block;
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: 3px;
  line-height: 1.3;
}

.user-menu-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  padding: 10px 16px;
  border: none;
  background: transparent;
  color: var(--color-text);
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease;
  text-align: left;
}

.user-menu-item:hover {
  background: var(--color-surface-muted);
}

.user-menu-item .menu-icon {
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.user-menu-item:hover .menu-icon {
  color: var(--color-accent);
}

.user-menu-item span {
  flex: 1;
  text-align: left;
}

/* Preference rows (theme, notifications) */
.preference-row {
  cursor: default;
}

.preference-row:hover {
  background: transparent !important;
}

.preference-toggle-slot {
  display: flex;
  align-items: center;
  margin-left: auto;
}

.preference-toggle-slot .theme-toggle-btn {
  width: 32px !important;
  height: 32px !important;
  padding: 6px !important;
}

/* Notification row - hidden by default until supported */
.notification-row {
  display: none;
}

.notification-row.visible {
  display: flex;
}

/* Toggle switch for notifications */
input.toggle-switch {
  appearance: none;
  -webkit-appearance: none;
  width: 36px;
  height: 20px;
  background: var(--color-border);
  border-radius: 10px;
  position: relative;
  cursor: pointer;
  transition: background 0.2s ease;
  margin: 0;
}

input.toggle-switch::before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: white;
  top: 2px;
  left: 2px;
  transition: transform 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

input.toggle-switch:checked {
  background: var(--color-accent);
}

input.toggle-switch:checked::before {
  transform: translateX(16px);
}

input.toggle-switch:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(63, 114, 255, 0.3);
}

/* Dark mode adjustments for user menu */
:root[data-theme="dark"] .user-dropdown {
  background: var(--color-surface);
  border-color: var(--color-border);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

:root[data-theme="dark"] .user-menu-header {
  background: var(--color-bg-secondary);
}

:root[data-theme="dark"] input.toggle-switch {
  background: var(--color-text-muted);
}

:root[data-theme="dark"] input.toggle-switch:checked {
  background: var(--color-accent);
}

/* ============================================
   Profile Settings Modal
   ============================================ */

.modal-profile {
  max-width: 560px;
  width: 90%;
}

.modal-profile .modal-body {
  padding: 0 24px 24px;
}

/* Profile Tabs */
.profile-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 20px;
  padding: 0;
  position: sticky;
  top: 0;
  background: var(--color-surface);
  z-index: 1;
  padding-top: 20px;
}

.profile-tab {
  background: none;
  border: none;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-muted);
  cursor: pointer;
  position: relative;
  transition: color 0.15s ease;
}

.profile-tab:hover {
  color: var(--color-text);
}

.profile-tab.active {
  color: var(--color-accent);
  font-weight: 600;
}

.profile-tab::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-accent);
  transform: scaleX(0);
  transition: transform 0.15s ease;
}

.profile-tab:hover::after {
  transform: scaleX(0.6);
}

.profile-tab.active::after {
  transform: scaleX(1);
}

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

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

/* Avatar Section */
.profile-avatar-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 24px;
}

.profile-avatar-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.profile-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--avatar-color, #60A5FA);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.profile-avatar-initials {
  color: white;
  font-size: 32px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.profile-avatar-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-avatar-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

.profile-avatar-actions .btn-secondary {
  padding: 6px 12px;
  font-size: 13px;
}

.btn-link-danger {
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 6px 12px;
  font-size: 13px;
}

.btn-link-danger:hover {
  color: #ef4444;
}

/* Cropper Section */
.profile-cropper-section {
  margin-bottom: 24px;
}

.profile-cropper-hint {
  text-align: center;
  font-size: 13px;
  color: var(--color-text-muted);
  margin-bottom: 12px;
}

.profile-cropper-container {
  width: 100%;
  max-width: 320px;
  height: 320px;
  margin: 0 auto;
  background: var(--color-bg-secondary);
  border-radius: 8px;
  overflow: hidden;
}

.profile-cropper-container img {
  display: block;
  max-width: 100%;
}

/* Cropper.js circular mask */
.profile-cropper-container .cropper-view-box,
.profile-cropper-container .cropper-face {
  border-radius: 50%;
}

.profile-cropper-container .cropper-view-box {
  box-shadow: 0 0 0 1px #39f;
  outline: 0;
}

.profile-cropper-container .cropper-dashed {
  border-radius: 50%;
}

.profile-cropper-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 16px;
}

/* Profile Fields */
.profile-field {
  margin-bottom: 16px;
}

.profile-field label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-muted);
  margin-bottom: 6px;
}

.profile-input {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-surface);
  color: var(--color-text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.profile-input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(63, 114, 255, 0.15);
}

.profile-divider {
  height: 1px;
  background: var(--color-border);
  margin: 20px 0;
}

.profile-section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}

.profile-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  cursor: pointer;
}

.profile-toggle-row:hover {
  color: var(--color-text);
}

.profile-toggle-label {
  font-size: 14px;
  color: var(--color-text);
}

.profile-toggle-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  padding-right: 12px;
}

.profile-toggle-desc {
  font-size: 12px;
  line-height: 1.35;
  color: var(--color-text-muted);
}

/* Hide avatar section when cropper is active */
.profile-avatar-section.hidden {
  display: none;
}

.profile-section-desc {
  font-size: 13px;
  color: var(--color-text-muted);
  margin-bottom: 12px;
}

/* Git Connections Section */
.git-connections-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.git-connections-loading {
  font-size: 13px;
  color: var(--color-text-muted);
  padding: 8px 0;
}

.git-connection-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: var(--color-bg-secondary);
  border-radius: 8px;
  border: 1px solid var(--color-border);
}

.git-connection-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.git-connection-icon {
  width: 24px;
  height: 24px;
  color: var(--color-text-muted);
}

.git-connection-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.git-connection-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
}

.git-connection-display-name {
  font-size: 12px;
  color: var(--color-text-muted);
}

.git-connection-status {
  font-size: 12px;
  color: var(--color-text-muted);
}

.git-connection-status.connected {
  color: var(--color-success);
}

.git-connection-actions .btn-small {
  padding: 4px 10px;
  font-size: 12px;
}

.git-connections-empty {
  font-size: 13px;
  color: var(--color-text-muted);
  padding: 12px 0;
  text-align: center;
}

/* Profile Access Info Section */
.profile-access-info {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.profile-access-loading {
  font-size: 13px;
  color: var(--color-text-muted);
  padding: 8px 0;
}

.profile-access-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.profile-access-group-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.profile-access-items {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.profile-access-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  background: var(--color-bg-secondary);
  border-radius: 6px;
  border: 1px solid var(--color-border);
}

.profile-access-item-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.profile-access-item-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text);
}

.profile-access-via {
  font-size: 11px;
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
}

.profile-access-badge {
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
}

.profile-access-badge.member {
  background: rgba(96, 165, 250, 0.15);
  color: #60A5FA;
}

.profile-access-badge.manager {
  background: rgba(251, 191, 36, 0.15);
  color: #FBBF24;
}

.profile-access-badge.role {
  background: rgba(139, 92, 246, 0.15);
  color: #A78BFA;
}

.profile-access-badge.admin {
  background: rgba(239, 68, 68, 0.15);
  color: #F87171;
}

.profile-access-admin-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--color-text-muted);
  margin-bottom: 12px;
}

.profile-access-empty {
  font-size: 13px;
  color: var(--color-text-muted);
  padding: 8px 0;
}

/* User Secrets List */
.user-secrets-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.user-secrets-loading {
  font-size: 13px;
  color: var(--color-text-muted);
  padding: 8px 0;
}

.user-secret-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: var(--color-bg-secondary);
  border-radius: 8px;
  border: 1px solid var(--color-border);
}

.user-secret-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.user-secret-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
  font-family: monospace;
}

.user-secret-description {
  font-size: 12px;
  color: var(--color-text-muted);
}

.user-secret-meta {
  font-size: 11px;
  color: var(--color-text-muted);
}

.user-secret-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.user-secret-actions .btn-small {
  padding: 4px 10px;
  font-size: 12px;
}

.user-secrets-empty {
  font-size: 13px;
  color: var(--color-text-muted);
  padding: 12px 0;
  text-align: center;
}

/* User Secret Form */
.user-secret-form {
  margin-top: 8px;
}

.user-secret-value-wrapper {
  display: flex;
  gap: 8px;
  align-items: center;
}

.user-secret-value-wrapper .profile-input {
  flex: 1;
}

.user-secret-toggle-visibility {
  background: none;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 8px;
  color: var(--color-text-muted);
  cursor: pointer;
  flex-shrink: 0;
}

.user-secret-toggle-visibility:hover {
  color: var(--color-text);
  border-color: var(--color-text-muted);
}

.user-secret-hint {
  font-size: 12px;
  color: var(--color-accent);
  margin-top: 4px;
}

.user-secret-contexts {
  display: flex;
  gap: 16px;
}

.user-secret-context-option {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--color-text);
  cursor: pointer;
}

.user-secret-context-option input[type="checkbox"] {
  width: auto;
}

.user-secret-form-actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}

/* Git Connections Required Modal */
.git-connections-intro {
  margin-bottom: 16px;
  color: var(--color-text);
}

.git-connections-required-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.git-provider-card {
  padding: 16px;
  background: var(--color-bg-secondary);
  border-radius: 8px;
  border: 1px solid var(--color-border);
}

.git-provider-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.git-provider-card-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.git-provider-card-icon {
  width: 24px;
  height: 24px;
  color: var(--color-text-muted);
}

.git-provider-card-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.git-provider-card-name {
  font-weight: 500;
  color: var(--color-text);
}

.git-provider-card-display-name {
  font-size: 12px;
  color: var(--color-text-muted);
}

.git-provider-card.connected {
  border-color: var(--color-success);
  background: color-mix(in srgb, var(--color-success) 5%, var(--color-bg-secondary));
}

.git-provider-card-connected {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-success);
}

.git-provider-card.unsupported {
  border-color: var(--color-warning);
  background: color-mix(in srgb, var(--color-warning) 5%, var(--color-bg-secondary));
}

.git-provider-card-unsupported {
  font-size: 12px;
  color: var(--color-warning);
  font-style: italic;
}

.git-provider-card-repos {
  font-size: 13px;
  color: var(--color-text-muted);
  padding-left: 34px;
}

.git-provider-card-repos ul {
  margin: 4px 0 0 0;
  padding-left: 16px;
}

.git-provider-card-repos li {
  margin-bottom: 2px;
}

.git-connections-hint {
  font-size: 13px;
  color: var(--color-text-muted);
  margin-top: 8px;
}

/* ============================================================
   PULL REQUEST DIALOG
   ============================================================ */

.profound-pr-modal {
  /* Inherits modal styles */
}

.pr-title-input {
  width: 100%;
  padding: 12px;
  font-size: 14px;
  font-family: "JetBrains Mono", monospace;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-medium);
  background: var(--color-background);
  color: var(--color-text);
  line-height: 1.5;
  transition: border-color 0.2s ease;
}

.pr-title-input:focus {
  outline: none;
  border-color: var(--color-primary);
}

.pr-title-input::placeholder {
  color: var(--color-text-muted);
}

.pr-body-input {
  width: 100%;
  padding: 12px;
  font-size: 14px;
  font-family: "JetBrains Mono", monospace;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-medium);
  background: var(--color-background);
  color: var(--color-text);
  line-height: 1.5;
  resize: vertical;
  min-height: 120px;
  transition: border-color 0.2s ease;
}

.pr-body-input:focus {
  outline: none;
  border-color: var(--color-primary);
}

.pr-body-input::placeholder {
  color: var(--color-text-muted);
}

.pr-repos-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}

/* Let the searchable base-branch dropdown escape the modal's overflow.
   CustomSelect detects position:fixed and handles viewport-relative
   positioning + auto-flip (see app.js open()). */
.profound-pr-modal .custom-select-dropdown,
.profound-approve-modal .custom-select-dropdown {
  position: fixed;
  z-index: 10001;
}

.pr-repos-header {
  font-size: 12px;
  color: var(--color-text-muted, #888);
  margin: 6px 0 4px;
}

.profound-pr-modal .field-hint {
  margin-top: 6px;
}

.pr-repo-selector {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

/* At default modal sizes the wrapper happily fills the row, which is fine.
   But when the Approve dialog is maximized the modal stretches to 100vw,
   leaving the picker absurdly wide. Cap it only in that state so the row
   looks like it does at the dialog's natural width. Keep the default
   width:100% from .custom-select — `width:auto` would collapse the trigger
   to the text content ("main") in this flex row. */
.profound-approve-modal.maximized .pr-repo-selector .custom-select {
  max-width: 480px;
}

.pr-repo-name {
  color: var(--color-text);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}

.pr-arrow {
  color: var(--color-text-secondary);
  font-size: 14px;
  margin: 0 4px;
}

.pr-source-branch {
  color: var(--color-text-secondary);
  font-size: 14px;
  white-space: nowrap;
}

.pr-base-branch {
  color: var(--color-text);
  font-size: 14px;
  white-space: nowrap;
}

/* Style the <select> used for choosing PR target (base) branch in PR dialog.
   Allows selecting any remote branch as PR target, decoupling from task launch branch. */
select.pr-base-branch {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small, 3px);
  font-size: 13px;
  font-family: inherit;
  padding: 2px 6px;
  cursor: pointer;
  max-width: 240px;
  min-width: 90px;
  line-height: 1.2;
}

select.pr-base-branch:focus {
  outline: none;
  border-color: var(--color-accent, var(--color-primary));
  box-shadow: 0 0 0 2px rgba(74, 158, 255, 0.15);
}

select.pr-base-branch option {
  background: var(--color-surface);
  color: var(--color-text);
}

.pr-connections-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}

.pr-link {
  color: var(--color-primary);
  text-decoration: none;
}

.pr-link:hover {
  text-decoration: underline;
}

.pr-modal-warning {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  background: color-mix(in srgb, var(--color-warning) 10%, var(--color-bg-secondary));
  border-left: 3px solid var(--color-warning);
  border-radius: 4px;
  margin-bottom: 16px;
}

.pr-modal-error {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  background: color-mix(in srgb, var(--color-error) 10%, var(--color-bg-secondary));
  border-left: 3px solid var(--color-error);
  border-radius: 4px;
  margin-bottom: 16px;
}

#meta-pull-requests {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-dropdown {
  min-width: 220px;
}

.admin-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.admin-menu-item .option-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  flex-shrink: 0;
}

.admin-menu-item .option-text {
  flex: 1;
}

/* Color coding for admin menu icons */
.icon-users {
  stroke: #3f72ff; /* Blue for users */
}

.icon-health {
  stroke: #2eb67d; /* Green for health */
}

.icon-environments {
  stroke: #f4b740; /* Yellow/orange for environments */
}

.admin-menu-item:hover .icon-users {
  stroke: #3158c9;
}

.admin-menu-item:hover .icon-health {
  stroke: #248a5f;
}

.admin-menu-item:hover .icon-environments {
  stroke: #d49a2a;
}

/* Quick Actions Menu Styles */
#start-actions-menu {
  min-width: 240px;
}

.quick-action-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.quick-action-item .option-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  flex-shrink: 0;
}

.quick-action-item .option-text {
  flex: 1;
}

/* Color coding for quick action icons */
.icon-branch {
  stroke: #9b59b6; /* Purple for branch/git */
}

.icon-test {
  stroke: #2eb67d; /* Green for tests/checks */
}

.icon-deploy {
  stroke: #3b82f6; /* Blue for deploy/release */
}

.icon-claude {
  color: #d97757; /* Anthropic Orange */
  stroke: none;
}

.icon-codex {
  color: var(--color-text-primary); /* Black/White for OpenAI */
  stroke: none;
}

.icon-gemini {
  stroke: #4285f4; /* Google Blue for Gemini */
}

.icon-bob {
  stroke: #6366f1; /* Indigo for Bob */
}

.icon-terminal {
  stroke: #64748b; /* Gray for terminal */
}

.icon-vscode {
  color: #007acc; /* VS Code blue */
  stroke: none;
}

.quick-action-item:hover .icon-branch {
  stroke: #7d3c98;
}

.quick-action-item:hover .icon-test {
  stroke: #248a5f;
}

.quick-action-item:hover .icon-deploy {
  stroke: #2563eb;
}

.quick-action-item:hover .icon-claude {
  color: #c06040;
}

.quick-action-item:hover .icon-codex {
  color: var(--color-text);
}

.quick-action-item:hover .icon-gemini {
  stroke: #1a73e8;
}

.quick-action-item:hover .icon-bob {
  stroke: #4f46e5;
}

.quick-action-item:hover .icon-terminal {
  stroke: #475569;
}

.quick-action-item:hover .icon-vscode {
  color: #005a9e;
}

/* Task Page Menu Styles */
#terminal-dropdown-menu {
  min-width: 240px;
}

.task-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.task-menu-item .option-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  flex-shrink: 0;
}

.task-menu-item .option-text {
  flex: 1;
}

/* Color coding for task menu icons */
/* Testing menu icons */
.icon-play {
  stroke: #2eb67d; /* Green for play/start */
}

.icon-restart {
  stroke: #f4b740; /* Orange for restart */
}

.icon-stop {
  stroke: #e55368; /* Red for stop */
}

.icon-logs {
  stroke: #64748b; /* Gray for logs */
}

.icon-globe {
  stroke: #3f72ff; /* Blue for URLs/web */
}

.icon-test-run {
  stroke: #2eb67d; /* Green for tests */
}

/* Terminal menu icons */
.icon-terminal-open {
  stroke: #64748b; /* Gray for terminal */
}

.icon-copy {
  stroke: #94a3b8; /* Light gray for copy */
}

.icon-resume {
  stroke: #2eb67d; /* Green for resume */
}

.icon-claude-session {
  color: #d97757; /* Anthropic Orange */
  stroke: none;
}

.icon-codex-session {
  color: var(--color-text-primary); /* Black/White for OpenAI */
  stroke: none;
}

.icon-gemini-session {
  stroke: #4285f4; /* Google Blue for Gemini */
}

.icon-bob-session {
  stroke: #6366f1; /* Indigo for Bob */
}

/* Hover states for task menu icons */
.task-menu-item:hover .icon-play {
  stroke: #248a5f;
}

.task-menu-item:hover .icon-restart {
  stroke: #d49a2a;
}

.task-menu-item:hover .icon-stop {
  stroke: #c93d52;
}

.task-menu-item:hover .icon-logs {
  stroke: #475569;
}

.task-menu-item:hover .icon-globe {
  stroke: #3158c9;
}

.task-menu-item:hover .icon-test-run {
  stroke: #248a5f;
}

.task-menu-item:hover .icon-terminal-open {
  stroke: #475569;
}

.task-menu-item:hover .icon-copy {
  stroke: #64748b;
}

.task-menu-item:hover .icon-resume {
  stroke: #248a5f;
}

.task-menu-item:hover .icon-claude-session {
  color: #c06040;
}

.task-menu-item:hover .icon-codex-session {
  color: var(--color-text);
}

.task-menu-item:hover .icon-gemini-session {
  stroke: #1a73e8;
}

.task-menu-item:hover .icon-bob-session {
  stroke: #4f46e5;
}

/* Server Administration Health Styles */
.health-metrics {
  display: grid;
  /* Fixed column count rather than auto-fit so the cell math (7 cards with
     two `metric-card-wide` spans = 9 cells = 3 perfect rows) stays correct.
     auto-fit changed the column count with viewport width, which broke the
     layout at 2- and 4-column widths. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 8px;
}

@media (max-width: 900px) {
  .health-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* At 2 columns, Storage's span-2 takes a full row (good), but Sessions's
     span-2 would orphan Uptime in the previous row. Drop Sessions back to
     span 1 so Uptime + Sessions share the final row cleanly. */
  .metric-card-wide[data-drilldown="sessions"] {
    grid-column: span 1;
  }
}

.metric-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  transition: all 0.2s ease;
}

.metric-card:hover {
  background: var(--color-surface);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}

.metric-icon {
  font-size: 32px;
  line-height: 1;
}

.metric-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.metric-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.metric-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text);
}

.metric-progress {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  overflow: hidden;
  margin-top: 2px;
}

.metric-progress-fill {
  width: 0;
  height: 100%;
  border-radius: inherit;
  transition: width 0.25s ease;
  background: var(--color-success);
}

.metric-progress-fill.status-warning {
  background: var(--color-warning, #f59e0b);
}

.metric-progress-fill.status-critical {
  background: var(--color-danger, #e55368);
}

.metric-sub {
  font-size: 13px;
  color: var(--color-text-muted);
  margin-top: 2px;
}

.metric-card.status-warning {
  border-color: var(--color-warning, #f59e0b);
  background: rgba(245, 158, 11, 0.05);
}

.metric-card.status-critical {
  border-color: var(--color-danger, #e55368);
  background: rgba(229, 83, 104, 0.05);
}

.metric-card.status-warning .metric-value,
.metric-card.status-critical .metric-value {
  color: inherit;
}

.metric-card.status-warning .metric-label::after {
  content: ' ⚠️';
}

.metric-card.status-critical .metric-label::after {
  content: ' 🚨';
}

.metric-card-wide {
  grid-column: span 2;
  align-items: flex-start;
}

.docker-storage-breakdown {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 16px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
}

.storage-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
}

.storage-label {
  color: var(--color-text-muted);
}

.storage-value {
  font-weight: 600;
  color: var(--color-text);
}

@media (max-width: 600px) {
  .health-metrics {
    grid-template-columns: 1fr;
  }
  .metric-card-wide {
    grid-column: span 1;
  }

  .docker-storage-breakdown {
    grid-template-columns: 1fr;
  }
}

.health-actions {
  margin-top: 24px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  background: var(--color-surface-muted);
}

.health-actions-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  transition: background 0.15s ease;
}

.health-actions-header:hover {
  background: rgba(0, 0, 0, 0.03);
}

.health-actions-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.collapse-chevron {
  transition: transform 0.2s ease;
  color: var(--color-text-muted);
}

.collapsible-section.expanded .collapse-chevron {
  transform: rotate(90deg);
}

.collapsible-content {
  padding: 0 16px 16px 16px;
}

.health-action-status {
  font-size: 13px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: var(--radius-small);
  background: var(--color-surface-muted);
}

.health-action-status.success {
  color: var(--color-success);
  background: rgba(46, 182, 125, 0.1);
}

.health-action-status.error {
  color: var(--color-danger);
  background: rgba(229, 83, 104, 0.1);
}

/* Cleanup Cards */
.cleanup-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cleanup-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  transition: all 0.2s ease;
}

.cleanup-card:hover {
  border-color: var(--color-accent);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}

.cleanup-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  background: rgba(63, 114, 255, 0.08);
  border-radius: var(--radius-small);
  color: var(--color-accent);
}

.cleanup-card-icon svg {
  width: 22px;
  height: 22px;
}

.cleanup-card-danger .cleanup-card-icon {
  background: rgba(229, 83, 104, 0.1);
  color: var(--color-danger);
}

.cleanup-card-content {
  flex: 1;
  min-width: 0;
}

.cleanup-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 4px;
}

.cleanup-card-description {
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.4;
}

.cleanup-card-btn {
  flex-shrink: 0;
  min-width: 80px;
}

.cleanup-card-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

@media (max-width: 768px) {
  .health-metrics {
    grid-template-columns: 1fr;
  }

  .cleanup-card {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }

  .cleanup-card-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto;
  }

  .cleanup-card-btn {
    width: 100%;
    margin-top: 8px;
  }
}

/* Settings icon button - make gear more prominent */
.settings-icon-btn {
  padding: 6px 10px !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.settings-icon-btn svg {
  width: 20px;
  height: 20px;
  stroke: var(--color-text-muted);
  transition: all 0.2s ease;
}

.settings-icon-btn:hover svg {
  stroke: var(--color-text);
  transform: rotate(90deg);
}

/* Allow custom selects in modals to overflow */
#general-settings-modal .modal-body {
  overflow: visible;
}

#general-settings-modal .modal-content {
  overflow: visible;
}

/* Allow role dropdown to escape modal boundaries using fixed positioning */
#user-modal .custom-select-dropdown {
  position: fixed;
  z-index: 10001;
}

/* Allow deployment parameter dropdowns to escape modal boundaries */
#deploy-param-modal .custom-select-dropdown,
#run-deployment-modal .custom-select-dropdown {
  position: fixed;
  z-index: 10001;
}

/* Allow profile modal dropdowns to escape the modal-body overflow clip */
#profile-modal .custom-select-dropdown {
  position: fixed;
  z-index: 10001;
}

/* AI provider add/edit modals: endpoint-type dropdown sits near the bottom of
   the modal and gets clipped by .modal-body's overflow-y. Switching to fixed
   positioning lets the CustomSelect open() routine flip/size against the
   viewport instead. */
.ai-provider-modal-content .custom-select-dropdown {
  position: fixed;
  z-index: 10001;
}

/* Task Tab Actions (Winner/Loser) */
.task-tab-actions-primary {
  position: absolute;
  top: -8px;
  right: -8px;
  display: flex;
  gap: 4px;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none; /* Let events pass through container */
}

.task-tab:hover .task-tab-actions-primary,
.task-tab-mini:hover .task-tab-actions-primary {
  opacity: 1;
  pointer-events: auto;
}

/* Make icons visible if they are active even without hover */
.task-tab-actions-primary:has(.winner),
.task-tab-actions-primary:has(.loser) {
  opacity: 1;
  pointer-events: auto;
}

.task-tab-star,
.task-tab-loser {
  width: 20px;
  height: 20px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  color: var(--color-text-muted); /* Default gray */
}

@media (hover: hover) {
  .task-tab-star:hover,
  .task-tab-loser:hover {
    transform: scale(1.15);
    border-color: var(--color-text);
  }
}

/* Winner Pop Animation */
@keyframes winner-pop {
  0% { transform: scale(0) rotate(-90deg); opacity: 0; box-shadow: 0 0 0 rgba(244, 183, 64, 0); }
  50% { transform: scale(1.5) rotate(10deg); box-shadow: 0 0 15px rgba(244, 183, 64, 0.6); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; box-shadow: 0 2px 6px rgba(244, 183, 64, 0.5); }
}

/* Winner Star Styles */
.task-tab-star.winner {
  background: var(--color-warning);
  color: #ffffff;
  border-color: var(--color-warning);
  box-shadow: 0 2px 6px rgba(244, 183, 64, 0.4);
}

.task-tab-star.winner.winner-animate {
  animation: winner-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Loser Icon Styles */
.task-tab-loser.loser {
  background: var(--color-danger);
  color: #ffffff;
  border-color: var(--color-danger);
  box-shadow: 0 2px 6px rgba(229, 83, 104, 0.4);
  /* animation removed for loser */
}

/* Hide non-active icons when not hovering, unless one of them is active? 
   Actually, showing both on hover is good. 
   If one is active, show it always.
   The container :has handles the container opacity.
*/
.task-tab-actions-primary:not(:hover) .task-tab-star:not(.winner),
.task-tab-actions-primary:not(:hover) .task-tab-loser:not(.loser) {
  /* Optional: hide the unselected one when not hovering the container?
     Let's keep them visible if container is visible for simplicity/discoverability. */
}

/* Approved Badge - shown when task has been approved */
.task-tab-approved {
  width: 20px;
  height: 20px;
  background: var(--color-success, #22c55e);
  border: 1px solid var(--color-success, #22c55e);
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(34, 197, 94, 0.3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  /* Always visible, doesn't hide like winner/loser buttons */
  opacity: 1 !important;
}

.task-tab-approved svg {
  width: 12px;
  height: 12px;
}

/* When approved badge is present, show container so badge is visible */
.task-tab-actions-primary:has(.task-tab-approved) {
  opacity: 1;
  pointer-events: auto;
}

/* Hide unselected winner button when not hovering (even if approved badge visible) */
.task-tab-actions-primary:has(.task-tab-approved) .task-tab-star:not(.winner) {
  opacity: 0;
  pointer-events: none;
}

/* Show winner button on hover */
.task-tab:hover .task-tab-actions-primary:has(.task-tab-approved) .task-tab-star:not(.winner),
.task-tab-mini:hover .task-tab-actions-primary:has(.task-tab-approved) .task-tab-star:not(.winner) {
  opacity: 1;
  pointer-events: auto;
}





/* Compare Variants Modal */
.modal.modal-xl .modal-content {
  width: 90%;
  max-width: 1200px;
  height: 90vh;
  display: flex;
  flex-direction: column;
  transition: width 0.25s ease, height 0.25s ease, max-width 0.25s ease, max-height 0.25s ease, border-radius 0.25s ease, top 0.25s ease, left 0.25s ease;
  position: relative;
}

.modal.modal-xl.maximized {
  padding: 0 !important;
  display: block !important;
}

/* Critical fix: Ensure hidden attribute wins over maximized display !important */
.modal.modal-xl.maximized[hidden] {
  display: none !important;
}

.modal.modal-xl.maximized .modal-content {
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  border-radius: 0;
  position: fixed;
  top: 0;
  left: 0;
  margin: 0;
  z-index: 10000; /* Ensure above everything */
  transition: width 0.25s ease, height 0.25s ease, max-width 0.25s ease, max-height 0.25s ease, border-radius 0.25s ease, top 0.25s ease, left 0.25s ease;
}

.modal.modal-xl .modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 0;
  display: flex;
  flex-direction: column;
}

/* Controls (Footer) */
.compare-controls {
  padding: 16px 24px;
  background: var(--color-surface-muted);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

.auto-select-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.auto-select-group .label {
  font-weight: 700;
  color: var(--color-text-muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.compare-table-wrapper {
  flex: 1;
  overflow: auto;
  padding: 0;
}

.compare-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 800px;
}

.compare-table th,
.compare-table td {
  padding: 16px 24px;
  text-align: center;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top; /* Align top */
  position: relative;
}

/* Sticky Header Configuration */
.compare-table th {
  background: var(--color-surface-muted);
  font-weight: 600;
  position: sticky;
  top: 0;
  z-index: 2;
  border-bottom: 1px solid var(--color-border);
}

/* Sticky First Column - Left Aligned Labels */
.compare-table th:first-child,
.compare-table td:first-child {
  position: sticky;
  left: 0;
  background: var(--color-surface);
  z-index: 1;
  font-weight: 600;
  color: var(--color-text-muted);
  border-right: 1px solid var(--color-border);
  min-width: 150px;
  width: 150px;
  text-align: left;
}

/* Corner Cell */
.compare-table th:first-child {
  z-index: 3;
  background: var(--color-surface-muted);
}

/* Agent Column Header */
.compare-agent-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 180px;
  opacity: 0.7; /* Default lighter state for non-winners */
  transition: opacity 0.2s ease;
}

.compare-agent-header.is-winner {
  opacity: 1; /* Full opacity for winner */
}

.compare-agent-header .agent-icon {
  width: 24px;
  height: 24px;
  color: var(--color-text-muted);
  cursor: pointer; /* Clickable */
}

/* Override generic opacity */
.compare-agent-header .agent-icon svg {
  opacity: 1;
}

/* Brand Colors - Applied ONLY when winner is selected */
.compare-agent-header.is-winner .agent-icon[data-agent="claude"] { color: #D97757; }
.compare-agent-header.is-winner .agent-icon[data-agent="claude"] ~ .agent-name { color: #D97757; }

.compare-agent-header.is-winner .agent-icon[data-agent="codex"] { color: #10a37f; }
.compare-agent-header.is-winner .agent-icon[data-agent="codex"] ~ .agent-name { color: #10a37f; }

.compare-agent-header.is-winner .agent-icon[data-agent="gemini"] { color: #4285f4; }
.compare-agent-header.is-winner .agent-icon[data-agent="gemini"] ~ .agent-name { color: #4285f4; }

.compare-agent-header.is-winner .agent-icon[data-agent="bob"] { color: #6366F1; }
.compare-agent-header.is-winner .agent-icon[data-agent="bob"] ~ .agent-name { color: #6366F1; }

.compare-agent-header .agent-name {
  font-size: 14px;
  font-weight: 700;
  text-transform: capitalize;
}

.compare-agent-header .winner-btn {
  margin-top: 4px;
  padding: 4px 12px;
  border-radius: 12px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  color: var(--color-text-muted);
}

.compare-agent-header .winner-btn:hover {
  background: var(--color-surface-muted);
  color: var(--color-text);
}

/* Winner Column Styles */
.compare-table col.is-winner {
  background: rgba(244, 183, 64, 0.05);
}

.compare-table td.is-winner {
  background: rgba(244, 183, 64, 0.05);
}

/* Best Metric Styles */
.compare-table td.is-best {
  background: #e0f2f1 !important; /* Light teal */
  color: #00695c;
  font-weight: 600;
}

/* Winner State in Header */
.compare-agent-header.is-winner .agent-icon {
  filter: drop-shadow(0 0 4px rgba(0,0,0,0.1));
  transform: scale(1.1);
  transition: transform 0.2s ease;
  opacity: 1 !important;
  animation: winner-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); /* Pop animation */
}

.compare-agent-header.is-winner .winner-btn {
  background: var(--color-warning);
  color: white;
  border-color: var(--color-warning);
  box-shadow: 0 2px 4px rgba(244, 183, 64, 0.3);
}

/* Metric Cell Styles */
.metric-cell {
  font-variant-numeric: tabular-nums;
}

.metric-cell .diff-stat {
  display: inline-flex;
  gap: 8px;
  font-weight: 500;
  justify-content: center;
}

.metric-cell .diff-add { color: var(--color-success); }
.metric-cell .diff-del { color: var(--color-danger); }

/* Summary Cell Styles */
.summary-cell {
  font-size: 13px;
  line-height: 1.5;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  min-width: 0;
  text-align: left;
  
  /* Initial Height / Scroll Logic */
  min-height: 4.5em; /* Approx 3 lines (current min height) */
  max-height: calc(90vh - 350px); /* Default dialog (90vh) minus headers/other rows */
  overflow-y: auto; 
  display: block;
  
  /* Aesthetics */
  padding: 4px 12px 4px 4px; 
  border: 1px solid transparent;
  border-radius: var(--radius-small);
  transition: border-color 0.1s, background-color 0.1s;
  
  /* Custom Scrollbar for neatness */
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}

/* Adjust max-height when modal is maximized */
.modal.modal-xl.maximized .summary-cell {
  max-height: calc(100vh - 350px);
}

.summary-cell::-webkit-scrollbar {
  width: 6px;
}
.summary-cell::-webkit-scrollbar-thumb {
  background-color: var(--color-border);
  border-radius: 3px;
}

/* Highlight specific cell on hover */
.summary-cell:hover {
  background: var(--color-surface);
  border-color: var(--color-accent);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  z-index: 10;
  cursor: pointer;
}

/* Full Width Expansion (Clicked) */
.summary-cell.expanded-full {
  max-height: none; /* Allow full expansion */
  max-width: none;
  width: 100%;
  background: var(--color-surface);
  border: 2px solid var(--color-accent);
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  padding: 16px;
  margin: -12px;
} /* This is the original replace string, starting with '}' */

/* Side-by-Side Diff Panel */
.side-by-side-diff-panel {
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
  max-height: 50vh;
  display: flex;
  flex-direction: column;
}

.side-by-side-diff-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: var(--color-surface-muted);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.side-by-side-diff-header h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
}

.side-by-side-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

.side-by-side-file-select {
  padding: 6px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 13px;
  min-width: 200px;
  cursor: pointer;
}

.side-by-side-file-select:focus {
  outline: none;
  border-color: var(--color-accent);
}

.side-by-side-diff-content {
  flex: 1;
  overflow: auto;
  padding: 0;
}

/* Side-by-Side Grid Layout */
.side-by-side-grid {
  display: grid;
  gap: 0;
  min-width: 100%;
}

.side-by-side-column {
  border-right: 1px solid var(--color-border);
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.side-by-side-column:last-child {
  border-right: none;
}

.side-by-side-column-header {
  padding: 8px 12px;
  background: var(--color-surface-muted);
  border-bottom: 1px solid var(--color-border);
  font-weight: 600;
  font-size: 12px;
  color: var(--color-text-muted);
  text-align: center;
  position: sticky;
  top: 0;
  z-index: 1;
}

.side-by-side-column-header.is-winner {
  background: rgba(244, 183, 64, 0.1);
  color: var(--color-text);
}

.side-by-side-diff-view {
  flex: 1;
  overflow: auto;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
}

.side-by-side-diff-view .file-diff {
  margin: 0;
  border: none;
  border-radius: 0;
}

.side-by-side-diff-view .file-diff-header {
  display: none;
}

.side-by-side-diff-view .file-diff-content {
  max-height: none;
}

.side-by-side-no-changes {
  padding: 24px;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 13px;
}

/* Compare Code Button in Table */
.compare-code-btn {
  padding: 6px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.compare-code-btn:hover {
  background: var(--color-surface-muted);
  color: var(--color-text);
  border-color: var(--color-accent);
}

.compare-code-btn.active {
  background: var(--color-accent);
  color: white;
  border-color: var(--color-accent);
}

.compare-code-btn svg {
  width: 14px;
  height: 14px;
}

/* Task Rename Button */
.task-rename-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 4px;
  margin: -6px;
  margin-left: 2px;
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  opacity: 0;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.task-rename-btn:hover {
  background: rgba(63, 114, 255, 0.1);
  color: var(--color-accent);
}

.task-title-wrapper .task-rename-btn {
  opacity: 1; /* Always visible on task.html */
}

.task-tile:hover .task-rename-btn,
.task-title:hover .task-rename-btn {
  opacity: 1;
}

.task-rename-input {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--color-accent);
  border-radius: 0;
  padding: 0 0 2px 0;
  margin: 0;
  width: 100%;
  max-width: 400px;
  outline: none;
  transition: border-color 0.15s ease;
  caret-color: var(--color-accent);
}

/* In grid view task tiles, make rename input match title text flex behavior */
.task-title .task-rename-input {
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
  width: auto;
}

.task-rename-input::placeholder {
  color: var(--color-text-muted);
  opacity: 0.6;
}

.task-rename-input:focus {
  border-bottom-color: var(--color-accent);
  border-bottom-width: 2px;
  padding-bottom: 1px;
}

/* Header variant for task.html page title */
.task-rename-input--header {
  font-size: 24px;
  font-weight: 700;
  min-width: 300px;
}

/* ============================================================================
   AI Analysis Modal Styles - Enhanced UI/UX
   ============================================================================ */

.ai-analysis-content {
  width: 850px;
  max-width: 95vw;
  height: min(672px, 88vh);
  display: flex;
  flex-direction: column;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

/* Enhanced Header */
.ai-analysis-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border);
  background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-surface-muted) 100%);
}

.ai-analysis-title-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ai-analysis-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(63, 114, 255, 0.15) 0%, rgba(139, 92, 246, 0.15) 100%);
  border-radius: 10px;
  color: var(--color-accent);
}

.ai-analysis-header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.ai-analysis-subtitle {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--color-text-muted);
}

/* Tabbed Navigation - Professional Style */
.ai-analysis-tabs {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 16px;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  height: 44px;
}

.ai-analysis-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  height: 100%;
  border: none;
  background: none;
  color: var(--color-text-muted);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  position: relative;
  transition: color 0.15s ease;
  white-space: nowrap;
}

.ai-analysis-tab::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: transparent;
  transition: background 0.15s ease;
}

.ai-analysis-tab:hover:not(:disabled) {
  color: var(--color-text);
}

.ai-analysis-tab.active {
  color: var(--color-accent);
}

.ai-analysis-tab.active::after {
  background: var(--color-accent);
}

.ai-analysis-tab:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.ai-analysis-tab svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.tab-label {
  line-height: 1;
}

.tab-divider {
  width: 1px;
  height: 20px;
  background: var(--color-border);
  margin: 0 8px;
  flex-shrink: 0;
}

.tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: 10px;
  font-weight: 600;
  background: var(--color-text-muted);
  color: var(--color-surface);
  border-radius: 9px;
  margin-left: 4px;
}

.ai-analysis-tab.active .tab-badge {
  background: var(--color-accent);
  color: white;
}

.tab-badge.feedback-badge {
  background: rgba(139, 92, 246, 0.8);
}

/* Tab Panels */
.ai-analysis-body {
  flex: 1;
  overflow: hidden;
  position: relative;
  min-height: 0;
}

.ai-analysis-panel {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
  padding: 16px 20px;
  animation: fadeIn 0.2s ease;
}

.ai-analysis-panel.active {
  display: block;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Quick Summary Cards */
.judge-quick-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}

.quick-summary-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  transition: all 0.2s ease;
}

.quick-summary-card:hover {
  border-color: var(--color-accent);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.quick-summary-card[data-status="ready"] .summary-icon { color: var(--color-success); }
.quick-summary-card[data-status="running"] .summary-icon { color: var(--color-warning); }
.quick-summary-card[data-status="completed"] .summary-icon { color: var(--color-accent); }

.summary-icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: currentColor;
  background: rgba(var(--color-accent-rgb, 63, 114, 255), 0.1);
  border-radius: 6px;
}

.summary-icon svg {
  width: 16px;
  height: 16px;
}

.quick-summary-card[data-status="ready"] .summary-icon { background: rgba(46, 182, 125, 0.1); }
.quick-summary-card[data-status="running"] .summary-icon { background: rgba(244, 183, 64, 0.1); }
.quick-summary-card[data-status="completed"] .summary-icon { background: rgba(63, 114, 255, 0.1); }

.summary-content {
  display: flex;
  flex-direction: column;
}

.summary-value {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.2;
}

.summary-label {
  font-size: 11px;
  color: var(--color-text-muted);
  margin-top: 1px;
}

/* Section Styles */
.ai-analysis-section {
  margin-bottom: 16px;
}

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

.section-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 16px;
}

.ai-analysis-section .section-label {
  display: block;
  font-weight: 600;
  font-size: 12px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}

.section-hint {
  font-size: 12px;
  color: var(--color-text-muted);
}

.judge-custom-instructions-textarea {
  width: 100%;
  min-height: 84px;
  max-height: 220px;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 13px;
  line-height: 1.45;
  resize: vertical;
}

.judge-custom-instructions-textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(63, 114, 255, 0.14);
}

.judge-custom-instructions-textarea::placeholder {
  color: var(--color-text-muted);
}

.judge-custom-instructions-section {
  margin-top: -2px;
  margin-bottom: 10px;
}

.judge-custom-instructions-toggle {
  border-style: solid;
}

.judge-custom-instructions-toggle .toggle-chevron {
  transition: transform 0.2s ease !important;
}

.judge-custom-instructions-toggle.expanded .toggle-chevron {
  transform: rotate(180deg);
}

.judge-custom-instructions-container {
  margin-top: 8px;
}

/* Optional per-judge Model & Effort overrides */
.judge-model-config-section {
  margin-top: -2px;
  margin-bottom: 10px;
}

.judge-model-config-toggle {
  border-style: solid;
}

.judge-model-config-toggle .toggle-chevron {
  transition: transform 0.2s ease !important;
}

.judge-model-config-toggle.expanded .toggle-chevron {
  transform: rotate(180deg);
}

.judge-model-config-container {
  margin-top: 8px;
}

/* The list is the grid (not each row), so every agent's cells share the same
   five columns and align vertically: agent | model-label | model-select |
   level-label | level-select. Rows and fields use display:contents so their
   children land directly on the list grid. */
.judge-model-config-list {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px 10px;
}

.judge-model-config-row {
  display: contents;
}

.judge-model-config-agent {
  grid-column: 1;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
}

.judge-model-config-field {
  display: contents;
}

.judge-model-config-field-label {
  font-size: 12px;
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.judge-model-config-field--model > .judge-model-config-field-label { grid-column: 2; }
.judge-model-config-field--model > .judge-model-config-select { grid-column: 3; }
.judge-model-config-field--level > .judge-model-config-field-label { grid-column: 4; }
.judge-model-config-field--level > .judge-model-config-select { grid-column: 5; }

.judge-model-config-select {
  padding: 6px 8px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 13px;
  width: 100%;
  max-width: 200px;
}

.judge-model-config-select:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(63, 114, 255, 0.14);
}

/* Narrow viewports: stack each agent's controls so they never overflow. */
@media (max-width: 640px) {
  .judge-model-config-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .judge-model-config-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }
  .judge-model-config-field {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .judge-model-config-field-label {
    flex: 0 0 64px;
  }
  .judge-model-config-select {
    flex: 1 1 auto;
    width: auto;
    max-width: none;
  }
}

/* Auto-judge dialog: optional per-agent Model & Effort overrides */
.auto-judge-model-config {
  margin-top: 1.25rem;
  border-top: 1px solid var(--color-border);
  padding-top: 1rem;
}

.auto-judge-model-config-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text);
  font-size: 13px;
  font-weight: 600;
}

.auto-judge-model-config-summary {
  margin-left: auto;
  font-size: 12px;
  font-weight: 400;
  color: var(--color-text-secondary);
}

.auto-judge-model-config-toggle .toggle-chevron {
  transition: transform 0.2s ease;
}

.auto-judge-model-config-toggle.expanded .toggle-chevron {
  transform: rotate(180deg);
}

.auto-judge-model-config-container {
  margin-top: 10px;
}

/* Same column-aligned grid as the judge dialog (see .judge-model-config-list). */
.auto-judge-model-config-list {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px 10px;
}

.auto-judge-model-config-row {
  display: contents;
}

.auto-judge-model-config-agent {
  grid-column: 1;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
}

.auto-judge-model-config-field {
  display: contents;
}

.auto-judge-model-config-field-label {
  font-size: 12px;
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.auto-judge-model-config-field--model > .auto-judge-model-config-field-label { grid-column: 2; }
.auto-judge-model-config-field--model > .auto-judge-model-config-select { grid-column: 3; }
.auto-judge-model-config-field--level > .auto-judge-model-config-field-label { grid-column: 4; }
.auto-judge-model-config-field--level > .auto-judge-model-config-select { grid-column: 5; }

.auto-judge-model-config-select {
  padding: 6px 8px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 13px;
  width: 100%;
  max-width: 200px;
}

.auto-judge-model-config-select:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(63, 114, 255, 0.14);
}

@media (max-width: 640px) {
  .auto-judge-model-config-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .auto-judge-model-config-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }
  .auto-judge-model-config-field {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .auto-judge-model-config-field-label {
    flex: 0 0 64px;
  }
  .auto-judge-model-config-select {
    flex: 1 1 auto;
    width: auto;
    max-width: none;
  }
}

.auto-judge-model-config-hint {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--color-text-secondary);
}

/* Always allow the launch panel to scroll when its content exceeds the modal
   body, so the Launch button stays reachable regardless of which optional
   sections are present or expanded. */
#tab-launch {
  overflow-y: auto;
}

#tab-launch .ai-analysis-section {
  margin-bottom: 8px;
}

#tab-launch .judge-quick-summary {
  margin-bottom: 8px;
}

#tab-launch .judge-agent-btn {
  padding: 10px 10px;
  gap: 6px;
}

#tab-launch .judge-launch-area {
  padding: 12px;
  margin-top: 0;
}

/* Variant Selector (collapsible checklist) */
.variant-selector-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  color: var(--color-text);
  transition: all 0.2s ease;
}

.variant-selector-toggle:hover {
  border-color: var(--color-accent);
}

.variant-selector-toggle .section-label {
  font-weight: 600;
  font-size: 12px;
  margin-bottom: 0;
}

.variant-selector-summary {
  flex: 1;
  text-align: right;
  font-size: 12px;
  color: var(--color-text-muted);
}

.variant-selector-toggle .toggle-chevron {
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.variant-selector-toggle.expanded .toggle-chevron {
  transform: rotate(180deg);
}

.variant-selector-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 6px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
  overflow: hidden;
}

.variant-selector-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  cursor: pointer;
  font-size: 13px;
  transition: background 0.15s ease;
  margin: 0;
}

.variant-selector-item:hover {
  background: var(--color-surface-muted);
}

.variant-selector-item + .variant-selector-item {
  border-top: 1px solid var(--color-border);
}

.variant-selector-item input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: var(--color-accent);
  cursor: pointer;
  flex-shrink: 0;
  margin: 0;
}

.variant-selector-item .variant-agent-icon {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-text-muted);
}

.variant-selector-item .variant-agent-icon svg {
  width: 14px;
  height: 14px;
}

.variant-selector-item .variant-agent-name {
  color: var(--color-text);
  font-weight: 500;
}

.variant-selector-item .variant-task-id {
  color: var(--color-text-muted);
  font-size: 11px;
  font-family: var(--font-mono, monospace);
  margin-left: auto;
}

/* Review mode verdict styles */
.timeline-verdict,
.judgment-verdict {
  font-size: 12px;
  font-weight: 500;
}

.verdict-pass {
  color: var(--color-success);
}

.verdict-fail {
  color: var(--color-danger, #ef4444);
}

.verdict-needs-improvement {
  color: var(--color-warning);
}

/* Judge Agent Selector - Enhanced */
.judge-agent-selector {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 12px;
}

.judge-agent-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 12px;
  border: 2px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-surface);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.agent-card-glow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.judge-agent-btn[data-agent="claude"] .agent-card-glow {
  background: radial-gradient(circle at center, rgba(217, 119, 87, 0.15) 0%, transparent 70%);
}

.judge-agent-btn[data-agent="codex"] .agent-card-glow {
  background: radial-gradient(circle at center, rgba(16, 163, 127, 0.15) 0%, transparent 70%);
}

.judge-agent-btn[data-agent="gemini"] .agent-card-glow {
  background: radial-gradient(circle at center, rgba(66, 133, 244, 0.15) 0%, transparent 70%);
}

.judge-agent-btn[data-agent="bob"] .agent-card-glow {
  background: radial-gradient(circle at center, rgba(99, 102, 241, 0.15) 0%, transparent 70%);
}

.judge-agent-btn:hover .agent-card-glow {
  opacity: 0.5;
}

.judge-agent-btn.selected .agent-card-glow {
  opacity: 1;
}

.judge-agent-btn:hover {
  border-color: var(--color-text-muted);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.judge-agent-btn.selected {
  border-color: var(--color-accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(63, 114, 255, 0.2);
}

/* Agent-specific selected colors */
.judge-agent-btn[data-agent="claude"].selected {
  border-color: #D97757;
  box-shadow: 0 4px 16px rgba(217, 119, 87, 0.25);
}

.judge-agent-btn[data-agent="codex"].selected {
  border-color: #10a37f;
  box-shadow: 0 4px 16px rgba(16, 163, 127, 0.25);
}

.judge-agent-btn[data-agent="gemini"].selected {
  border-color: #4285f4;
  box-shadow: 0 4px 16px rgba(66, 133, 244, 0.25);
}

.judge-agent-btn[data-agent="bob"].selected {
  border-color: #6366F1;
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.25);
}

.judge-agent-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  transition: all 0.25s ease;
  position: relative;
  z-index: 1;
}

.judge-agent-icon svg {
  width: 100%;
  height: 100%;
}

.judge-agent-btn[data-agent="claude"] .judge-agent-icon {
  color: #D97757;
}

.judge-agent-btn[data-agent="codex"] .judge-agent-icon {
  color: #10a37f;
}

.judge-agent-btn[data-agent="gemini"] .judge-agent-icon {
  color: #4285f4;
}

.judge-agent-btn[data-agent="bob"] .judge-agent-icon {
  color: #6366F1;
}

.judge-agent-btn:hover .judge-agent-icon,
.judge-agent-btn.selected .judge-agent-icon {
  transform: scale(1.1);
}

.judge-agent-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  position: relative;
  z-index: 1;
}

.judge-agent-desc {
  font-size: 11px;
  color: var(--color-text-muted);
  position: relative;
  z-index: 1;
}

.agent-selection-indicator {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-success);
  border-radius: 50%;
  color: white;
  opacity: 0;
  transform: scale(0.5);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.judge-agent-btn.selected .agent-selection-indicator {
  opacity: 1;
  transform: scale(1);
}

/* Launch Area */
.judge-launch-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: linear-gradient(180deg, var(--color-surface-muted) 0%, var(--color-surface) 100%);
  border-radius: 10px;
  border: 1px solid var(--color-border);
  margin-top: 4px;
}

.launch-info {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--color-text-muted);
}

.launch-info svg {
  width: 14px;
  height: 14px;
  opacity: 0.6;
}

.judge-launch-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 8px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.judge-launch-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(63, 114, 255, 0.35);
}

.judge-launch-btn .btn-icon {
  display: inline-flex;
  color: inherit;
}

.judge-launch-btn .btn-spinner,
.judge-launch-btn .btn-text-loading {
  display: none;
}

.judge-launch-btn.is-submitting .btn-text,
.judge-launch-btn.is-submitting .btn-icon {
  display: none;
}

.judge-launch-btn.is-submitting .btn-spinner,
.judge-launch-btn.is-submitting .btn-text-loading {
  display: inline-flex;
}

.judge-launch-btn .spinner {
  animation: spin 1s linear infinite;
}

/* Enhanced Footer */
.ai-analysis-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-top: 1px solid var(--color-border);
  background: var(--color-surface-muted);
}

.footer-left {
  display: flex;
  align-items: center;
}

.footer-hint {
  font-size: 12px;
  color: var(--color-text-muted);
}

.footer-hint kbd {
  display: inline-block;
  padding: 2px 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  margin: 0 2px;
}

.footer-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* AI Analysis Modal Maximized State */
#ai-analysis-modal.maximized {
  padding: 0 !important;
  display: block !important;
}

#ai-analysis-modal.maximized[hidden] {
  display: none !important;
}

#ai-analysis-modal.maximized .modal-content {
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  border-radius: 0;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
}

/* Previous Judgments - Enhanced History Panel */
.previous-judgments-container {
  background: transparent;
  min-height: 200px;
}

.previous-judgments-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
}

.empty-state-icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface-muted);
  border-radius: 50%;
  margin-bottom: 16px;
  color: var(--color-text-muted);
}

.previous-judgments-empty h3 {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text);
}

.previous-judgments-empty p {
  margin: 0;
  font-size: 13px;
  color: var(--color-text-muted);
}

/* Timeline-style Judgment History */
.judgment-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  padding-left: 24px;
}

.judgment-timeline::before {
  content: '';
  position: absolute;
  left: 11px;
  top: 24px;
  bottom: 24px;
  width: 2px;
  background: var(--color-border);
  border-radius: 1px;
}

.timeline-item {
  position: relative;
  display: flex;
  gap: 16px;
  padding: 16px 0;
  cursor: pointer;
  transition: all 0.2s ease;
}

.timeline-item:hover {
  background: rgba(63, 114, 255, 0.04);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  padding: 16px 16px;
}

.timeline-item.selected {
  background: rgba(63, 114, 255, 0.08);
  border-radius: 8px;
  border-left: 3px solid var(--color-primary, #3f72ff);
  padding-left: 13px;
}

/* Verification reruns: indented left rail to thread visually off the parent. */
.timeline-item.is-verification {
  padding-left: 24px;
  margin-left: 12px;
  border-left: 2px dashed rgba(63, 114, 255, 0.35);
}

.timeline-item.is-verification.selected {
  padding-left: 21px;
}

.timeline-verification-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(63, 114, 255, 0.12);
  color: var(--color-primary, #3f72ff);
  border: 1px solid rgba(63, 114, 255, 0.35);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.timeline-superseded-by {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: transparent;
  color: var(--color-text-secondary);
  border: 1px dashed var(--color-border);
  font-size: 11px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.timeline-superseded-by:hover {
  color: var(--color-text);
  border-color: var(--color-primary, #3f72ff);
  background: rgba(63, 114, 255, 0.06);
}

.timeline-verification-pending {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(244, 183, 64, 0.12);
  color: var(--color-warning, #f4b740);
  border: 1px solid rgba(244, 183, 64, 0.35);
  font-size: 11px;
  font-weight: 500;
}

.timeline-verification-pending .pulse-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: pulse 1.6s infinite;
}

.follow-up-from-judge-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(63, 114, 255, 0.10);
  color: var(--color-primary, #3f72ff);
  border: 1px solid rgba(63, 114, 255, 0.30);
  font-size: 11px;
  font-weight: 500;
}

.follow-up-from-judge-badge .follow-up-verify-hint {
  color: var(--color-warning, #f4b740);
  font-weight: 600;
}

.timeline-dot {
  position: absolute;
  left: -24px;
  top: 20px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: 50%;
  z-index: 1;
}

.timeline-dot svg {
  width: 12px;
  height: 12px;
}

.timeline-item[data-status="completed"] .timeline-dot {
  border-color: var(--color-success);
  color: var(--color-success);
}

.timeline-item[data-status="running"] .timeline-dot {
  border-color: var(--color-warning);
  color: var(--color-warning);
  animation: pulse 2s infinite;
}

.timeline-item[data-status="failed"] .timeline-dot {
  border-color: var(--color-danger);
  color: var(--color-danger);
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(244, 183, 64, 0.4); }
  50% { box-shadow: 0 0 0 8px rgba(244, 183, 64, 0); }
}

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

.timeline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.timeline-agent {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 14px;
}

.timeline-agent-icon {
  width: 20px;
  height: 20px;
}

.timeline-agent[data-agent="claude"] .timeline-agent-icon { color: #D97757; }
.timeline-agent[data-agent="codex"] .timeline-agent-icon { color: #10a37f; }
.timeline-agent[data-agent="gemini"] .timeline-agent-icon { color: #4285f4; }
.timeline-agent[data-agent="bob"] .timeline-agent-icon { color: #6366F1; }

.timeline-time {
  font-size: 12px;
  color: var(--color-text-muted);
}

.timeline-body {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.timeline-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.timeline-status.status-completed {
  background: rgba(46, 182, 125, 0.12);
  color: var(--color-success);
}

.timeline-status.status-running {
  background: rgba(244, 183, 64, 0.16);
  color: var(--color-warning);
}

.timeline-status.status-interrupted {
  background: rgba(107, 114, 128, 0.16);
  color: #4b5563;
}

.timeline-status.status-failed {
  background: rgba(229, 83, 104, 0.14);
  color: var(--color-danger);
}

.timeline-winner {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--color-text-muted);
}

.timeline-winner strong {
  color: var(--color-text);
  font-weight: 600;
}

.timeline-feedback-priority {
  font-size: 11px;
  font-weight: 600;
  padding: 1px 8px;
  border-radius: 10px;
  letter-spacing: 0.3px;
  margin-left: auto;
  white-space: nowrap;
  cursor: pointer;
  transition: opacity 0.15s;
}

.timeline-feedback-priority:hover {
  opacity: 0.8;
}

.timeline-feedback-priority.priority-low {
  background: rgba(52, 199, 89, 0.12);
  color: var(--color-success, #34c759);
}

.timeline-feedback-priority.priority-medium {
  background: rgba(255, 159, 10, 0.12);
  color: var(--color-warning, #ff9f0a);
}

.timeline-feedback-priority.priority-high {
  background: rgba(229, 83, 104, 0.12);
  color: var(--color-danger, #e55368);
}

.timeline-freshness-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2px;
  white-space: nowrap;
}

.timeline-freshness-badge.kind-stale {
  background: rgba(255, 159, 10, 0.14);
  color: var(--color-warning, #ff9f0a);
}

.timeline-freshness-badge.kind-used {
  background: rgba(63, 114, 255, 0.12);
  color: var(--color-primary, #3f72ff);
}

.timeline-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

/* Quick Action Bar in Details Tab */
.judgment-quick-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: linear-gradient(90deg, rgba(63, 114, 255, 0.08) 0%, rgba(139, 92, 246, 0.08) 100%);
  border: 1px solid var(--color-accent);
  border-radius: 10px;
  margin-bottom: 20px;
}

.quick-action-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.quick-action-judge {
  font-weight: 600;
  color: var(--color-accent);
}

.quick-action-separator {
  color: var(--color-text-muted);
}

.quick-action-winner {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--color-success);
  background: rgba(46, 182, 125, 0.12);
  padding: 4px 10px;
  border-radius: 6px;
}

.quick-action-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Score Cards */
.judgment-score-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.score-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  text-align: center;
  transition: all 0.2s ease;
}

.score-card:hover {
  border-color: var(--color-accent);
  transform: translateY(-2px);
}

.score-ring {
  position: relative;
  width: 60px;
  height: 60px;
  margin-bottom: 10px;
}

.score-ring svg {
  transform: rotate(-90deg);
}

.score-ring-bg {
  fill: none;
  stroke: var(--color-border);
  stroke-width: 6;
}

.score-ring-progress {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 6;
  stroke-linecap: round;
  transition: stroke-dashoffset 1s ease;
}

.score-value {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 16px;
  font-weight: 700;
}

.score-label {
  font-size: 12px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Keyboard Shortcuts Modal */
.keyboard-shortcuts-modal .modal-content {
  max-width: 720px;
}

.shortcuts-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.shortcut-group h4 {
  margin: 0 0 10px;
  padding-bottom: 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--color-border);
}

.shortcut-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
}

.shortcut-item kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  box-shadow: 0 1px 0 var(--color-border);
}

.shortcut-item span {
  font-size: 13px;
  color: var(--color-text-secondary);
}

.keyboard-shortcuts-modal .modal-body {
  padding: 16px 24px;
}

.keyboard-shortcuts-modal .shortcut-group {
  padding: 12px 14px;
  background: var(--color-surface-muted);
  border-radius: var(--radius-medium);
  border: 1px solid var(--color-border);
}

/* Global Keyboard Shortcuts Modal */
.global-shortcuts-modal .modal-content {
  max-width: 720px;
}

.global-shortcuts-modal .modal-header h3 {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: 600;
  margin: 0;
}

.global-shortcuts-body {
  padding: 16px 24px;
}

.shortcuts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.shortcuts-grid .shortcut-group {
  padding: 12px 14px;
  background: var(--color-surface-muted);
  border-radius: var(--radius-medium);
  border: 1px solid var(--color-border);
}

.shortcuts-grid .shortcut-group h4 {
  margin: 0 0 10px;
  padding-bottom: 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--color-border);
}

.shortcuts-grid .shortcut-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  font-size: 13px;
}

.shortcuts-grid .shortcut-item kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  font-size: 11px;
  font-weight: 500;
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  box-shadow: 0 1px 0 var(--color-border);
}

.shortcuts-grid .shortcut-item span {
  font-size: 13px;
  color: var(--color-text-secondary);
}

/* Keyboard shortcuts hint button */
.keyboard-hint-btn {
  opacity: 0.6;
  transition: opacity 0.2s ease;
}

.keyboard-hint-btn:hover {
  opacity: 1;
}

.keyboard-hint-btn svg {
  width: 16px;
  height: 16px;
}

/* Card highlight flash animation */
.detail-card.highlight-flash {
  animation: highlight-flash 1s ease-out;
}

@keyframes highlight-flash {
  0% {
    box-shadow: 0 0 0 3px rgba(63, 114, 255, 0.4);
  }
  100% {
    box-shadow: none;
  }
}

/* Responsive: 2 columns on medium screens */
@media (max-width: 680px) {
  .shortcuts-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .shortcuts-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Responsive: single column on small screens */
@media (max-width: 480px) {
  .shortcuts-grid {
    grid-template-columns: 1fr;
  }

  .shortcuts-list {
    grid-template-columns: 1fr;
  }

  .global-shortcuts-modal .modal-content {
    max-width: 100%;
    margin: 16px;
  }

  .keyboard-shortcuts-modal .modal-content {
    max-width: 100%;
    margin: 16px;
  }
}

.previous-judgments-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.previous-judgments-table th {
  text-align: left;
  padding: 10px 12px;
  font-weight: 600;
  color: var(--color-text-muted);
  background: var(--color-surface-muted);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
}

.previous-judgments-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}

.previous-judgments-table tr:last-child td {
  border-bottom: none;
}

.previous-judgments-table tr:hover td {
  background: rgba(63, 114, 255, 0.04);
}

.previous-judgments-table tr.selected td {
  background: rgba(63, 114, 255, 0.08);
}

.judgment-status-cell {
  min-width: 140px;
}

.judgment-winner-cell {
  min-width: 150px;
}

.judgment-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  text-transform: capitalize;
  background: rgba(31, 42, 68, 0.08);
  color: var(--color-text);
}

.judgment-status-pill.status-completed { background: rgba(46,182,125,0.12); color: var(--color-success); }
.judgment-status-pill.status-running { background: rgba(244,183,64,0.16); color: var(--color-warning); }
.judgment-status-pill.status-interrupted { background: rgba(107,114,128,0.16); color: #4b5563; }
.judgment-status-pill.status-failed { background: rgba(229,83,104,0.14); color: var(--color-danger); }
.judgment-status-pill.status-staged { background: rgba(139,92,246,0.14); color: #8b5cf6; }
.judgment-status-pill.status-queued { background: rgba(59,130,246,0.14); color: #3b82f6; }
.judgment-status-pill.status-unknown { background: rgba(31,42,68,0.12); color: var(--color-text-muted); }

.judgment-status-icon .task-tab-spinner {
  width: 14px;
  height: 14px;
  display: inline-block;
  animation: spin 1.4s linear infinite;
  transform-origin: center;
}

.judgment-time {
  color: var(--color-text-muted);
  white-space: nowrap;
}

.judgment-judge,
.judgment-winner {
  display: flex;
  align-items: center;
  gap: 6px;
}

.judgment-winner {
  font-weight: 500;
}

.judgment-winner.pending {
  color: var(--color-text-muted);
  font-style: italic;
}

.judgment-agent-icon {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.judgment-agent-icon svg {
  width: 100%;
  height: 100%;
}

/* Agent-specific colors for judgment table */
.judgment-judge[data-agent="claude"] .judgment-agent-icon,
.judgment-winner[data-agent="claude"] .judgment-agent-icon {
  color: #D97757;
}

.judgment-judge[data-agent="codex"] .judgment-agent-icon,
.judgment-winner[data-agent="codex"] .judgment-agent-icon {
  color: #10a37f;
}

.judgment-judge[data-agent="gemini"] .judgment-agent-icon,
.judgment-winner[data-agent="gemini"] .judgment-agent-icon {
  color: #4285f4;
}

.judgment-judge[data-agent="bob"] .judgment-agent-icon,
.judgment-winner[data-agent="bob"] .judgment-agent-icon {
  color: #6366F1;
}

.judgment-actions {
  /* Keep this as a normal table-cell so vertical alignment works consistently.
     Use margins for spacing instead of flex layout on the <td>. */
  white-space: nowrap;
}

.judgment-actions button + button {
  margin-left: 8px;
}

.judgment-actions .btn-small {
  padding: 4px 10px;
  font-size: 12px;
}

.judgment-view-btn {
  color: var(--color-accent);
  background: transparent;
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-small);
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.judgment-view-btn:hover {
  background: var(--color-accent);
  color: white;
}

.judgment-apply-btn {
  color: var(--color-success);
  background: transparent;
  border: 1px solid var(--color-success);
  border-radius: var(--radius-small);
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.judgment-apply-btn:hover {
  background: var(--color-success);
  color: white;
}

.judgment-actions button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Judgment Preview */
.judgment-preview-section {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.judgment-preview {
  flex: 1;
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 20px;
  overflow-y: auto;
  font-size: 14px;
  line-height: 1.6;
  min-height: 200px;
}

.judgment-preview h1,
.judgment-preview h2,
.judgment-preview h3 {
  margin-top: 0;
  margin-bottom: 12px;
  color: var(--color-text);
}

.judgment-preview h1 { font-size: 18px; }
.judgment-preview h2 { font-size: 16px; }
.judgment-preview h3 { font-size: 14px; }

.judgment-preview table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0;
  font-size: 13px;
}

.judgment-preview th,
.judgment-preview td {
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  text-align: left;
}

.judgment-preview th {
  background: var(--color-surface);
  font-weight: 600;
}

.judgment-preview p {
  margin: 0 0 12px;
}

.judgment-preview p:last-child {
  margin-bottom: 0;
}

.judgment-variant-legend {
  margin-top: 16px;
  margin-bottom: 0;
  padding: 10px 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
}

.judgment-variant-legend-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
  list-style: none;
}

.judgment-variant-legend-summary::-webkit-details-marker {
  display: none;
}

.judgment-variant-legend-summary::before {
  content: '▸';
  color: var(--color-text-muted);
  font-size: 11px;
  margin-right: 2px;
  transform-origin: center;
  transition: transform 0.15s ease;
}

.judgment-variant-legend[open] .judgment-variant-legend-summary::before {
  transform: rotate(90deg);
}

.judgment-variant-legend-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text);
  letter-spacing: 0.02em;
}

.judgment-variant-legend-summary-meta {
  font-size: 12px;
  color: var(--color-text-muted);
}

.judgment-variant-legend-note {
  margin: 8px 0 8px;
  font-size: 12px;
  color: var(--color-text-muted);
}

.judgment-variant-legend-table {
  width: 100%;
  margin-top: 2px;
  border-collapse: collapse;
  font-size: 12px;
}

.judgment-variant-legend-table th,
.judgment-variant-legend-table td {
  border: 1px solid var(--color-border);
  padding: 6px 8px;
  text-align: left;
  vertical-align: top;
}

.judgment-variant-legend-table th {
  background: var(--color-surface-muted);
  font-weight: 600;
}

.judgment-variant-task-id-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.judgment-variant-task-id {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--color-surface-muted);
}

.judgment-variant-task-link {
  color: var(--color-accent);
  text-decoration: none;
}

.judgment-variant-task-link:hover {
  text-decoration: underline;
}

.judgment-variant-copy-id-btn {
  border: 1px solid var(--color-border);
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
  border-radius: 4px;
  font-size: 11px;
  line-height: 1;
  padding: 4px 7px;
  cursor: pointer;
}

.judgment-variant-copy-id-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.judgment-variant-copy-id-btn:disabled {
  opacity: 0.7;
  cursor: default;
}

.judgment-variant-task-name {
  display: block;
  margin-top: 4px;
  color: var(--color-text-muted);
}

/* Preview Placeholder */
.preview-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 200px;
  color: var(--color-text-muted);
  text-align: center;
}

.preview-placeholder svg {
  opacity: 0.4;
  margin-bottom: 12px;
}

.preview-placeholder p {
  margin: 0;
  font-size: 14px;
}

/* Judgment Preview Header */
.judgment-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.preview-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.judgment-preview-header .section-label {
  margin-bottom: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
}

.preview-judge-info {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.preview-judge-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
  font-size: 12px;
}

.preview-judge-pill.is-freshness.is-stale {
  background: rgba(255, 159, 10, 0.14);
  color: var(--color-warning, #ff9f0a);
}

.preview-judge-pill.is-freshness.is-used {
  background: rgba(63, 114, 255, 0.12);
  color: var(--color-primary, #3f72ff);
}

/* Feedback Panel */
.feedback-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-border);
}

.feedback-header-info h3 {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 600;
}

.feedback-description {
  margin: 0;
  font-size: 13px;
  color: var(--color-text-muted);
}

.feedback-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
  color: var(--color-text-muted);
}

.feedback-empty-state svg {
  opacity: 0.4;
  margin-bottom: 12px;
}

.feedback-empty-state p {
  margin: 0;
  font-size: 14px;
}

/* Maximized Judgment Preview */
.judgment-preview-section.maximized {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10001;
  background: var(--color-background);
  padding: 16px;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.judgment-preview-section.maximized .judgment-preview {
  max-height: none;
  flex: 1;
}

/* AI JUDGING MOBILE DIALOG */
@media (max-width: 720px) {
  #ai-analysis-modal {
    width: 100dvw;
    height: 100dvh;
    overflow: hidden;
  }

  #ai-analysis-modal .modal-overlay {
    width: 100dvw;
    height: 100dvh;
  }

  #ai-analysis-modal .ai-analysis-content {
    width: 100dvw !important;
    height: 100dvh !important;
    max-width: none !important;
    max-height: 100dvh !important;
    min-height: 0;
  }

  #ai-analysis-modal.maximized .modal-content {
    width: 100dvw !important;
    height: 100dvh !important;
    max-width: 100dvw !important;
    max-height: 100dvh !important;
  }

  #ai-analysis-modal .ai-analysis-header {
    align-items: flex-start;
    flex: 0 0 auto;
    gap: 10px;
    padding: 12px 14px;
  }

  #ai-analysis-modal .ai-analysis-title-group {
    flex: 1 1 auto;
    min-width: 0;
    gap: 10px;
  }

  #ai-analysis-modal .ai-analysis-title-group > div:last-child {
    min-width: 0;
  }

  #ai-analysis-modal .ai-analysis-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
  }

  #ai-analysis-modal .ai-analysis-header h2 {
    font-size: 17px;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #ai-analysis-modal .ai-analysis-subtitle {
    display: none;
  }

  #ai-analysis-modal .header-actions {
    width: auto;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    justify-content: flex-end;
    flex-shrink: 0;
    gap: 4px;
  }

  #ai-analysis-modal .keyboard-hint-btn,
  #ai-analysis-modal #maximize-ai-analysis-modal {
    display: none;
  }

  #ai-analysis-modal .ai-analysis-tabs {
    flex: 0 0 auto;
    height: auto;
    min-height: 44px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 8px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  #ai-analysis-modal .ai-analysis-tabs::-webkit-scrollbar {
    display: none;
  }

  #ai-analysis-modal .ai-analysis-tab {
    flex: 0 0 auto;
    min-height: 44px;
    min-width: 74px;
    justify-content: center;
    padding: 0 12px;
  }

  #ai-analysis-modal .tab-divider {
    height: 24px;
    margin: 0 4px;
  }

  #ai-analysis-modal .ai-analysis-panel {
    padding: 14px;
    overflow-y: auto;
  }

  #ai-analysis-modal .ai-analysis-body {
    min-height: 0;
    padding: 0;
  }

  #ai-analysis-modal #tab-launch {
    overflow-y: auto;
  }

  #ai-analysis-modal .judge-quick-summary {
    grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
    gap: 8px;
    margin-bottom: 12px;
  }

  #ai-analysis-modal .quick-summary-card {
    min-width: 0;
    padding: 9px 10px;
  }

  #ai-analysis-modal .summary-content {
    min-width: 0;
  }

  #ai-analysis-modal .summary-label {
    line-height: 1.25;
    white-space: normal;
  }

  #ai-analysis-modal .variant-selector-toggle {
    min-height: 44px;
  }

  #ai-analysis-modal .variant-selector-summary {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #ai-analysis-modal .variant-selector-item {
    align-items: flex-start;
    padding: 10px 12px;
  }

  #ai-analysis-modal .variant-selector-item .variant-task-id {
    flex: 1 0 100%;
    margin-left: 23px;
    overflow-wrap: anywhere;
  }

  #ai-analysis-modal .judge-agent-selector {
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    gap: 8px;
  }

  #ai-analysis-modal .judge-agent-btn {
    min-height: 96px;
    border-radius: 8px;
  }

  #ai-analysis-modal .judge-agent-btn:hover,
  #ai-analysis-modal .judge-agent-btn.selected {
    transform: none;
  }

  #ai-analysis-modal .agent-selection-indicator {
    width: 20px;
    height: 20px;
    top: 6px;
    right: 6px;
  }

  #ai-analysis-modal .judge-launch-area {
    align-items: stretch;
    padding: 12px;
  }

  #ai-analysis-modal .launch-info {
    align-items: flex-start;
    line-height: 1.35;
  }

  #ai-analysis-modal .judge-launch-btn {
    width: 100%;
    min-height: 44px;
    justify-content: center;
  }

  #ai-analysis-modal .judge-custom-instructions-textarea {
    min-height: 116px;
  }

  #ai-analysis-modal .ai-analysis-footer {
    flex: 0 0 auto;
    padding: 10px 14px max(10px, env(safe-area-inset-bottom));
    /* Preserve this modal's bespoke muted footer background; the shared
       mobile .modal-content > .modal-footer rule would otherwise win. */
    background: var(--color-surface-muted);
  }

  #ai-analysis-modal .footer-left {
    display: none;
  }

  #ai-analysis-modal .footer-right,
  #ai-analysis-modal .footer-right .btn-ghost {
    width: 100%;
  }

  #ai-analysis-modal .footer-right .btn-ghost {
    min-height: 44px;
  }

  #ai-analysis-modal .judgment-timeline {
    padding-left: 18px;
  }

  #ai-analysis-modal .judgment-timeline::before {
    left: 8px;
  }

  #ai-analysis-modal .timeline-item {
    gap: 10px;
    padding: 14px 0;
  }

  #ai-analysis-modal .timeline-item:hover {
    padding: 14px 0;
    box-shadow: none;
  }

  #ai-analysis-modal .timeline-item.selected {
    padding-left: 10px;
  }

  #ai-analysis-modal .timeline-dot {
    left: -22px;
  }

  #ai-analysis-modal .timeline-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  #ai-analysis-modal .timeline-agent,
  #ai-analysis-modal .timeline-time,
  #ai-analysis-modal .timeline-winner {
    min-width: 0;
  }

  #ai-analysis-modal .timeline-body {
    gap: 8px;
  }

  #ai-analysis-modal .timeline-feedback-priority {
    margin-left: 0;
  }

  #ai-analysis-modal .timeline-actions {
    flex-wrap: wrap;
    gap: 8px;
  }

  #ai-analysis-modal .timeline-actions .btn-small {
    min-height: 36px;
  }

  #ai-analysis-modal .judgment-quick-actions {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
  }

  #ai-analysis-modal .quick-action-info {
    align-items: flex-start;
    flex-wrap: wrap;
    line-height: 1.35;
  }

  #ai-analysis-modal .quick-action-buttons,
  #ai-analysis-modal .quick-action-buttons .btn-small {
    width: 100%;
  }

  #ai-analysis-modal .quick-action-buttons .btn-small {
    justify-content: center;
    min-height: 40px;
  }

  #ai-analysis-modal .judgment-preview-header {
    align-items: flex-start;
    gap: 8px;
  }

  #ai-analysis-modal .preview-header-left {
    align-items: flex-start;
    flex-direction: column;
    min-width: 0;
    gap: 6px;
  }

  #ai-analysis-modal .preview-judge-info,
  #ai-analysis-modal .preview-judge-pill {
    max-width: 100%;
  }

  #ai-analysis-modal .judgment-preview {
    padding: 14px;
    overflow: auto;
    font-size: 13px;
    line-height: 1.55;
  }

  #ai-analysis-modal .judgment-preview table,
  #ai-analysis-modal .judgment-variant-legend-table {
    min-width: 520px;
  }

  #ai-analysis-modal .judgment-variant-legend {
    padding: 10px;
  }

  #ai-analysis-modal .judgment-variant-legend-summary {
    align-items: flex-start;
  }

  #ai-analysis-modal .feedback-panel-header {
    flex-direction: column;
    gap: 10px;
  }

  #ai-analysis-modal #expand-all-feedback {
    width: 100%;
    min-height: 40px;
    justify-content: center;
  }

  #ai-analysis-modal .feedback-judgment-pill {
    width: 100%;
    justify-content: space-between;
  }

  #ai-analysis-modal .variant-feedback-card .variant-feedback-header {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
  }

  #ai-analysis-modal .variant-feedback-info {
    flex-wrap: wrap;
    gap: 8px;
  }

  #ai-analysis-modal .variant-feedback-actions {
    align-items: stretch;
    flex-direction: column;
  }

  #ai-analysis-modal .variant-feedback-actions .btn-small {
    width: 100%;
    min-height: 40px;
    justify-content: center;
  }

  #ai-analysis-modal .variant-feedback-content {
    padding: 14px;
    font-size: 13px;
  }
}

/* Submit button spinner */
#submit-judge-task {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 150px;
  justify-content: center;
}

#submit-judge-task .btn-spinner,
#submit-judge-task .btn-text-loading {
  display: none;
}

#submit-judge-task.is-submitting .btn-text {
  display: none;
}

#submit-judge-task.is-submitting .btn-spinner,
#submit-judge-task.is-submitting .btn-text-loading {
  display: inline-flex;
}

#submit-judge-task .spinner {
  animation: spin 1s linear infinite;
}

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

/* ============================================
   VARIANT FEEDBACK SECTION
   ============================================ */

.variant-feedback-section {
  margin-top: 16px;
}

.variant-feedback-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.variant-feedback-header .section-label {
  font-weight: 600;
  color: var(--color-text);
  font-size: 14px;
}

.variant-feedback-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.variant-feedback-card {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
  overflow: hidden;
}

.variant-feedback-card.is-winner {
  border-color: var(--color-success);
  background: rgba(46, 182, 125, 0.05);
}

.variant-feedback-card .variant-feedback-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: rgba(0, 0, 0, 0.02);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 0;
}

.variant-feedback-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.variant-feedback-agent {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  font-size: 14px;
}

.variant-agent-icon {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background: var(--color-surface-elevated);
}

.variant-agent-icon svg {
  width: 14px;
  height: 14px;
}

/* Agent-specific colors */
.variant-feedback-agent[data-agent="claude"] .variant-agent-icon {
  background: rgba(217, 119, 87, 0.15);
  color: #d97757;
}

.variant-feedback-agent[data-agent="codex"] .variant-agent-icon {
  background: rgba(16, 163, 127, 0.15);
  color: #10a37f;
}

.variant-feedback-agent[data-agent="gemini"] .variant-agent-icon {
  background: rgba(66, 133, 244, 0.15);
  color: #4285f4;
}

.variant-feedback-agent[data-agent="bob"] .variant-agent-icon {
  background: rgba(99, 102, 241, 0.15);
  color: #6366F1;
}

.variant-winner-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: 4px;
  background: rgba(46, 182, 125, 0.15);
  color: var(--color-success);
}

.variant-priority-badge {
  display: inline-flex;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 500;
  border-radius: 4px;
  text-transform: capitalize;
}

.variant-priority-badge.priority-high {
  background: rgba(229, 83, 104, 0.15);
  color: var(--color-danger);
}

.variant-priority-badge.priority-medium {
  background: rgba(244, 183, 64, 0.15);
  color: var(--color-warning);
}

.variant-priority-badge.priority-low {
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
}

.variant-feedback-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.feedback-judgment-summary {
  margin-bottom: 16px;
}

.feedback-judgment-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.feedback-judgment-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.05);
  color: var(--color-text-secondary);
  font-size: 13px;
}

.feedback-judgment-pill strong {
  color: var(--color-text);
}

.feedback-judgment-pill.is-freshness.is-stale {
  background: rgba(255, 159, 10, 0.14);
  color: var(--color-warning, #ff9f0a);
}

.feedback-judgment-pill.is-freshness.is-used {
  background: rgba(63, 114, 255, 0.12);
  color: var(--color-primary, #3f72ff);
}

.toggle-feedback-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.toggle-feedback-btn .toggle-arrow {
  transition: transform 0.2s ease;
}

.toggle-feedback-btn .toggle-arrow.expanded {
  transform: rotate(180deg);
}

.send-feedback-btn {
  white-space: nowrap;
}

.variant-feedback-content {
  display: none;
  padding: 16px;
  font-size: 14px;
  line-height: 1.6;
}

.variant-feedback-content.expanded {
  display: block;
}

.variant-feedback-content p {
  margin: 0 0 12px;
}

.variant-feedback-content p:last-child {
  margin-bottom: 0;
}

.variant-feedback-content ul,
.variant-feedback-content ol {
  margin: 8px 0;
  padding-left: 24px;
}

.variant-feedback-content li {
  margin: 4px 0;
}

.variant-feedback-content code {
  background: rgba(0, 0, 0, 0.06);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 13px;
}

/* ============================================
   SEND FEEDBACK MODAL
   ============================================ */

/* Must be above AI Analysis modal (z-index: 10000) */
#send-feedback-modal.modal {
  z-index: 10001;
}

#send-feedback-modal .modal-content {
  max-width: 700px;
}

.send-feedback-info {
  margin-bottom: 16px;
}

.send-feedback-info p {
  margin: 0;
  color: var(--color-text-secondary);
}

.send-feedback-info strong {
  color: var(--color-text);
}

/* Editor container - matches resubmit-markdown-editor-container style */
.send-feedback-editor-container {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  overflow: hidden;
}

.send-feedback-editor-container:focus-within {
  outline: 2px solid rgba(63,114,255,0.25);
  border-color: var(--color-accent);
}

.send-feedback-options {
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  background: var(--color-bg-secondary);
}

.send-feedback-verify-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}

.send-feedback-verify-label input[type="checkbox"] {
  margin-top: 3px;
  flex-shrink: 0;
}

.send-feedback-verify-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.send-feedback-verify-title {
  color: var(--color-text);
  font-weight: 500;
}

.send-feedback-verify-hint {
  color: var(--color-text-secondary);
  font-size: 12px;
}

.send-feedback-editor-container .markdown-editor-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.send-feedback-editor-container .markdown-editor {
  border: none;
  border-radius: 0;
  box-shadow: none;
  min-height: 300px;
  max-height: 400px;
  overflow-y: auto;
}

.send-feedback-editor-container .markdown-editor:focus {
  outline: none;
  box-shadow: none;
}

/* Confirm button spinner state */
#confirm-send-feedback {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 150px;
  justify-content: center;
}

#confirm-send-feedback .btn-spinner,
#confirm-send-feedback .btn-text-loading {
  display: none;
}

#confirm-send-feedback.is-submitting .btn-text {
  display: none;
}

#confirm-send-feedback.is-submitting .btn-spinner,
#confirm-send-feedback.is-submitting .btn-text-loading {
  display: inline-flex;
}

#confirm-send-feedback .spinner {
  animation: spin 1s linear infinite;
}

/* ============================================
   JIRA COMMENT MODAL
   ============================================ */

#jira-comment-modal .modal-content {
  max-width: 760px;
}

.jira-comment-info {
  margin-bottom: 16px;
}

.jira-comment-info p {
  margin: 0;
  color: var(--color-text-secondary);
}

.jira-comment-info strong {
  color: var(--color-text);
}

.jira-comment-editor-container {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  overflow: hidden;
}

.jira-comment-editor-container:focus-within {
  outline: 2px solid rgba(63,114,255,0.25);
  border-color: var(--color-accent);
}

.jira-comment-editor-container .markdown-editor-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.jira-comment-editor-container .markdown-editor {
  border: none;
  border-radius: 0;
  box-shadow: none;
  min-height: 260px;
  max-height: 420px;
  overflow-y: auto;
}

.jira-comment-editor-container .markdown-editor:focus {
  outline: none;
  box-shadow: none;
}

#confirm-jira-comment {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 132px;
  justify-content: center;
}

#confirm-jira-comment .btn-spinner,
#confirm-jira-comment .btn-text-loading {
  display: none;
}

#confirm-jira-comment.is-submitting .btn-text {
  display: none;
}

#confirm-jira-comment.is-submitting .btn-spinner,
#confirm-jira-comment.is-submitting .btn-text-loading {
  display: inline-flex;
}

#confirm-jira-comment .spinner {
  animation: spin 1s linear infinite;
}

/* ============================================
   OBJECTIVES FEATURE STYLES
   ============================================ */

/* Save Options Button (Icon with Dropdown) */
.save-options-group {
  display: inline-flex;
  position: relative;
}

.btn-save-options {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 6px 8px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-save-options:hover {
  background: var(--color-surface-hover);
  color: var(--color-text);
  border-color: var(--color-border-hover);
}

.btn-save-options .dropdown-chevron {
  transition: transform 0.15s ease;
}

.btn-save-options[aria-expanded="true"] .dropdown-chevron {
  transform: rotate(180deg);
}

/* Save Options Dropdown Menu */
.save-options-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 160px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 100;
  overflow: hidden;
}

.save-options-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s ease;
  color: var(--color-text);
  font-size: 13px;
  white-space: nowrap;
}

.save-options-item:hover {
  background: var(--color-surface-hover);
}

.save-options-item:not(:last-child) {
  border-bottom: 1px solid var(--color-border);
}

.save-options-item svg {
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

.save-options-item:hover svg {
  transform: scale(1.1);
}

.save-options-item span {
  font-weight: 500;
}

/* Stage Task option - blue color */
.save-options-item[data-action="stage"] svg {
  color: #3b82f6;
}

.save-options-item[data-action="stage"]:hover {
  background: rgba(59, 130, 246, 0.1);
}

/* Save as Objective option - amber color */
.save-options-item[data-action="save-objective"] svg {
  color: #f59e0b;
}

.save-options-item[data-action="save-objective"]:hover {
  background: rgba(245, 158, 11, 0.1);
}

/* Launch in Terminal(s) option - teal color */
.save-options-item[data-action="launch-terminal"] svg {
  color: #14b8a6;
}

.save-options-item[data-action="launch-terminal"]:hover {
  background: rgba(20, 184, 166, 0.1);
}

/* Objectives Section */
.objectives-section {
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-medium);
  margin-bottom: 16px;
  overflow: hidden;
}

.objectives-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
  user-select: none;
}

.objectives-header:hover {
  background: var(--color-surface-hover);
}

.objectives-header h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
}

.objectives-icon {
  font-size: 16px;
}

.objectives-count {
  font-weight: 400;
  color: var(--color-text-muted);
}

.objectives-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.objectives-content {
  padding: 0;
  max-height: 300px;
  overflow-y: auto;
}

.objectives-content.collapsed {
  display: none;
}

.objectives-empty-state {
  padding: 24px 16px;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 13px;
}

.objectives-empty-state p {
  margin: 0;
}

/* Objectives List */
.objectives-list {
  display: flex;
  flex-direction: column;
}

.objective-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
  transition: background 0.15s ease;
}

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

.objective-item:hover {
  background: var(--color-surface-hover);
}

.objective-item-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.objective-item-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.objective-item-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--color-text-muted);
}

.objective-item-agents {
  display: flex;
  gap: 4px;
}

.objective-item-agent {
  padding: 1px 5px;
  background: var(--color-surface-muted);
  border-radius: 3px;
  font-size: 10px;
  text-transform: capitalize;
}

.objective-item-time {
  color: var(--color-text-muted);
}

.objective-item-arrow {
  color: var(--color-text-muted);
  font-size: 14px;
  margin-left: 8px;
  transition: transform 0.15s ease;
}

.objective-item:hover .objective-item-arrow {
  transform: translateX(2px);
  color: var(--color-primary);
}

/* Archived objectives */
.objectives-archived-section {
  border-top: 1px solid var(--color-border);
}

.objectives-archived-divider {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  background: var(--color-surface-muted);
}

.objectives-archived-divider span {
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.objectives-list.objectives-archived .objective-item {
  opacity: 0.7;
}

.objectives-list.objectives-archived .objective-item:hover {
  opacity: 1;
}

.objectives-list.objectives-archived .objective-item-name {
  color: var(--color-text-secondary);
}

/* Objective Editor Modal */
.modal-objective {
  width: 90%;
  max-width: 820px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-medium);
  transition: width 0.25s ease, height 0.25s ease, max-width 0.25s ease, max-height 0.25s ease, border-radius 0.25s ease, top 0.25s ease, left 0.25s ease;
}

.modal-objective .modal-content {
  overflow: hidden;
}

.modal-objective .modal-body {
  flex: 1;
  overflow-y: auto; /* Enable scrolling for tall content */
  padding: 16px 20px;
}

/* Environment dropdown needs to escape modal overflow */
#objective-environment-field .custom-select-dropdown {
  position: fixed;
  /* Reset position values that are set for absolute positioning -
     JS will set correct values based on viewport space */
  top: auto;
  left: auto;
  right: auto;
}

.objective-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
}

.objective-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.objective-field-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* Objective attachments wrapper drag-drop styles */
.objective-attachments-wrapper {
  position: relative;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.objective-attachments-wrapper.drag-over {
  border: 2px dashed var(--color-accent);
  border-radius: var(--radius-small);
  box-shadow: 0 0 0 3px rgba(63,114,255,0.2);
  background: rgba(63,114,255,0.05);
  padding: 8px;
}

.objective-attachments-wrapper.drag-over::after {
  content: 'Drop files here';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 8px 16px;
  background: var(--color-accent);
  color: white;
  border-radius: var(--radius-small);
  font-size: 14px;
  font-weight: 500;
  pointer-events: none;
  z-index: 10;
}

.objective-field-grow {
  flex: 1;
  min-height: 150px;
}

.objective-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text);
}

.objective-label-hint {
  font-weight: 400;
  color: var(--color-text-muted);
}

/* Launch Notes */
.launch-notes-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 0;
  color: var(--color-text);
  font-size: 13px;
  width: 100%;
  text-align: left;
}

.launch-notes-toggle:hover {
  color: var(--color-accent);
}

#objective-launch-notes-field > .collapsible-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 8px;
}

.launch-notes-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.launch-note-chip {
  padding: 4px 10px;
  font-size: 12px;
  font-family: inherit;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-bg-secondary);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.launch-note-chip:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.launch-note-chip.selected {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}

.launch-notes-textarea {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  font-size: 13px;
  font-family: inherit;
  background: var(--color-surface);
  color: var(--color-text);
  resize: vertical;
  min-height: 60px;
  box-sizing: border-box;
}

.launch-notes-textarea:focus {
  outline: 2px solid rgba(63,114,255,0.25);
  border-color: var(--color-accent);
}

.launch-notes-textarea::placeholder {
  color: var(--color-text-muted);
}

.objective-name-input {
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  font-size: 14px;
  background: var(--color-surface);
  color: var(--color-text);
}

.objective-name-input:focus {
  outline: 2px solid rgba(63,114,255,0.25);
  border-color: var(--color-accent);
}

.objective-name-input::placeholder {
  color: var(--color-text-muted);
}

input.generating {
  background: linear-gradient(90deg, var(--color-surface) 0%, var(--color-bg-secondary) 50%, var(--color-surface) 100%);
  background-size: 200% 100%;
  animation: generating-shimmer 1.5s ease-in-out infinite;
}

input.generating::placeholder {
  color: var(--color-text-secondary, var(--color-text-muted));
}

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

.objective-instructions-input {
  flex: 1;
  min-height: 150px;
  padding: 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  font-size: 14px;
  font-family: inherit;
  background: var(--color-surface);
  color: var(--color-text);
  resize: vertical;
  line-height: 1.5;
}

.objective-instructions-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-primary-alpha);
}

.objective-instructions-input::placeholder {
  color: var(--color-text-muted);
}

/* Hide native select when CustomSelect is used */
.objective-environment-select {
  display: none;
}

/* Objective environment CustomSelect styling */
#objective-environment-field .custom-select {
  width: 100%;
}

#objective-environment-field .custom-select-trigger {
  width: 100%;
  padding: 10px 12px;
  min-height: 42px;
}

#objective-environment-field .custom-select-dropdown {
  max-height: 200px;
  z-index: 1001;
}

#objective-environment-field .objective-environment-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

#objective-environment-field .objective-environment-row .custom-select {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
}

#objective-environment-field .objective-branch-btn {
  width: 40px;
  height: 42px;
  padding: 0;
}

#objective-environment-field .objective-branch-btn.active {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-surface-muted);
}

/* Objective field validation */
.objective-field.has-error .objective-name-input,
.objective-field.has-error .objective-environment-select {
  border-color: var(--color-error, #dc3545);
}

.objective-field-error {
  font-size: 12px;
  color: var(--color-error, #dc3545);
  margin-top: 4px;
}

.objective-name-input.error,
.objective-environment-select.error {
  border-color: var(--color-error, #dc3545);
}

/* Objective markdown editor */
.objective-markdown-editor-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 200px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  overflow: hidden;
}

.objective-markdown-editor-container:focus-within {
  outline: 2px solid rgba(63,114,255,0.25);
  border-color: var(--color-accent);
}

.objective-markdown-editor-container .markdown-editor-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.objective-markdown-editor-container .markdown-editor {
  border: none;
  border-radius: 0;
  flex: 1;
  min-height: 150px;
  max-height: 250px;
  overflow-y: auto;
  box-shadow: none;
  font-size: 15px;
  line-height: 1.5;
}

.objective-markdown-editor-container .markdown-editor:focus {
  outline: none;
  box-shadow: none;
}

/* Objective agent selector uses the same styles as main form agent-selector */

/* Objective agents field - horizontal layout with label on left */
.objective-field-agents {
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
}

.objective-agents-label {
  margin-right: 12px;
  white-space: nowrap;
}

.objective-field-agents .objective-agent-selector {
  flex: 1;
}

.objective-field-agents .objective-field-error {
  width: 100%;
  margin-left: 0;
}

/* Extra spacing before modal actions */
.objective-field-agents {
  margin-bottom: 8px;
}

.objective-model-config-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.objective-model-config-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.objective-model-config-row label {
  font-size: 13px;
  color: var(--color-text-secondary);
}

.objective-model-config-row select {
  min-width: 180px;
  max-width: 260px;
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 13px;
}

.objective-model-config-row select option {
  background: var(--color-surface);
  color: var(--color-text);
}

.objective-model-config-row select:focus {
  outline: 2px solid rgba(63,114,255,0.25);
  border-color: var(--color-accent);
}

.objective-model-config-actions {
  display: flex;
  justify-content: flex-end;
}

@media (max-width: 700px) {
  .objective-model-config-row {
    flex-direction: column;
    align-items: stretch;
  }

  .objective-model-config-row select {
    min-width: 0;
    max-width: none;
  }
}

/* Objective Modal Actions */
.objective-modal-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
}

.objective-modal-actions-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Inline checkbox label for objective modal */
.checkbox-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--color-text-secondary);
  cursor: pointer;
  user-select: none;
}

.checkbox-inline input[type="checkbox"] {
  width: 14px;
  height: 14px;
  margin: 0;
  cursor: pointer;
}

.checkbox-inline span {
  white-space: nowrap;
}

.objective-modal-actions-right {
  display: flex;
  gap: 8px;
}

/* Objective modal button icons */
.objective-modal-actions button svg {
  vertical-align: middle;
  margin-right: 4px;
  margin-top: -2px;
}

/* Ensure consistent button styling in objective modal */
.objective-modal-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  font-size: 14px;
  line-height: 1.4;
  box-sizing: border-box;
}

/* Override btn-small padding for consistency */
.objective-modal-actions button.btn-small {
  padding: 8px 16px;
}

/* Objective Modal Maximized State */
#objective-modal.maximized,
#objective-modal.instructions-maximized {
  padding: 0 !important;
  display: block !important;
}

#objective-modal.maximized[hidden],
#objective-modal.instructions-maximized[hidden] {
  display: none !important;
}

#objective-modal.maximized .modal-content,
#objective-modal.instructions-maximized .modal-content {
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  border-radius: 0;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  transition: width 0.25s ease, height 0.25s ease, max-width 0.25s ease, max-height 0.25s ease, border-radius 0.25s ease, top 0.25s ease, left 0.25s ease;
}

#objective-modal.instructions-maximized .modal-header,
#objective-modal.instructions-maximized #objective-name-field,
#objective-modal.instructions-maximized #objectiveJiraLinkBadge,
#objective-modal.instructions-maximized #objective-attachments-field,
#objective-modal.instructions-maximized #objective-environment-field,
#objective-modal.instructions-maximized #objective-agents-field,
#objective-modal.instructions-maximized #objective-model-config-field,
#objective-modal.instructions-maximized #objective-comments-field,
#objective-modal.instructions-maximized #objective-launch-notes-field,
#objective-modal.instructions-maximized .objective-modal-actions {
  display: none;
}

#objective-modal.instructions-maximized .modal-body {
  padding: 0;
  overflow: hidden;
  height: 100%;
}

#objective-modal.instructions-maximized .objective-form {
  gap: 0;
  height: 100%;
}

#objective-modal.instructions-maximized #objective-instructions-field {
  flex: 1;
  min-height: 0;
  padding: 16px 20px;
}

#objective-modal.instructions-maximized .objective-markdown-editor-container {
  flex: 1;
  height: 100%;
  min-height: 0;
}

#objective-modal.instructions-maximized .objective-markdown-editor-container .markdown-editor-wrapper {
  height: 100%;
  min-height: 0;
}

#objective-modal.instructions-maximized .objective-markdown-editor-container .markdown-editor {
  height: 100%;
  max-height: none;
  min-height: 0;
}

/* Delete Confirmation for Objectives */
.objective-delete-confirm {
  background: var(--color-danger-bg);
  border: 1px solid var(--color-danger);
  border-radius: var(--radius-small);
  padding: 12px;
  margin-top: 12px;
}

.objective-delete-confirm p {
  margin: 0 0 12px;
  color: var(--color-danger);
  font-size: 13px;
}

.objective-delete-confirm-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* ============================================
   Task List Slide-Out Panel
   ============================================ */

/* Side Trigger for Task List */
.task-list-side-trigger {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 900; /* Below panel (1000) but above content */
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: none;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  box-shadow: 2px 0 12px rgba(0, 0, 0, 0.08);
  padding: 12px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  color: var(--color-text-muted);
  width: 32px;
}

.task-list-side-trigger:hover {
  transform: translateY(-50%) translateX(4px);
  background: var(--color-surface);
  color: var(--color-accent);
  box-shadow: 4px 0 16px rgba(63, 114, 255, 0.15);
}

.task-list-side-trigger .side-trigger-icon {
  font-size: 18px;
  line-height: 1;
}

.task-list-side-trigger .side-trigger-label {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-top: 4px;
}

/* Hide trigger when panel is open */
body.task-list-open .task-list-side-trigger {
  transform: translateY(-50%) translateX(-100%);
  opacity: 0;
  pointer-events: none;
}

.task-terminal-panel {
  position: fixed;
  left: 24px;
  right: 24px;
  bottom: 0;
  height: var(--task-terminal-panel-height, 320px);
  z-index: 950;
  pointer-events: none;
  transform: translateY(100%);
  transition: transform 0.25s ease;
}

.task-terminal-panel:not([hidden]) {
  pointer-events: auto;
  transform: translateY(0);
}

.task-terminal-restore {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 940;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
}

.task-terminal-panel-content {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-bottom: none;
  border-top-left-radius: var(--radius-large);
  border-top-right-radius: var(--radius-large);
  box-shadow: 0 -10px 32px rgba(15, 23, 42, 0.16);
  overflow: hidden;
}

.task-terminal-resize-handle {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 8px;
  cursor: ns-resize;
  z-index: 2;
}

.task-terminal-resize-handle::after {
  content: "";
  display: block;
  width: 56px;
  height: 4px;
  margin: 10px auto 0;
  border-radius: 999px;
  background: rgba(100, 116, 139, 0.45);
  transition: background 0.15s ease;
}

.task-terminal-resize-handle:hover::after,
.task-terminal-resize-handle.dragging::after {
  background: var(--color-accent);
}

.task-terminal-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
  flex-shrink: 0;
}

.task-terminal-panel-heading {
  min-width: 0;
}

.task-terminal-panel-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
}

.task-terminal-panel-subtitle {
  margin-top: 4px;
  font-size: 12px;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.task-terminal-panel-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.task-terminal-panel-action,
.task-terminal-panel-close {
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.task-terminal-panel-action:hover,
.task-terminal-panel-close:hover {
  color: var(--color-text);
  background: var(--color-surface-muted);
}

.task-terminal-panel-body {
  flex: 1;
  min-height: 0;
  background: #0f172a;
  display: flex;
  flex-direction: column;
}

.task-terminal-tabs {
  display: flex;
  align-items: stretch;
  gap: 8px;
  padding: 10px 12px 0;
  overflow-x: auto;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-muted);
  flex-shrink: 0;
}

.task-terminal-tab {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: 220px;
  border: 1px solid var(--color-border);
  border-bottom: none;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  background: rgba(148, 163, 184, 0.14);
}

.task-terminal-tab.active {
  background: var(--color-surface);
  border-color: var(--color-border);
}

.task-terminal-tab-select,
.task-terminal-tab-close {
  border: 0;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
}

.task-terminal-tab-select {
  min-width: 0;
  max-width: 180px;
  padding: 9px 10px 8px 12px;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.task-terminal-tab.active .task-terminal-tab-select,
.task-terminal-tab.active .task-terminal-tab-close {
  color: var(--color-text);
}

.task-terminal-tab-close {
  padding: 8px 10px 7px 6px;
  font-size: 16px;
  line-height: 1;
}

.task-terminal-tab-select:hover,
.task-terminal-tab-close:hover {
  color: var(--color-text);
}

.task-terminal-tab-panels {
  flex: 1;
  min-height: 0;
  position: relative;
}

.task-terminal-tab-panel {
  position: absolute;
  inset: 0;
}

.task-terminal-tab-panel.active {
  z-index: 1;
}

.task-terminal-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #0f172a;
}


.task-list-panel {
  position: fixed;
  top: 0;
  left: 0;
  width: 380px;
  height: 100%;
  z-index: 1000;
  pointer-events: none;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
}

.task-list-panel:not([hidden]) {
  pointer-events: auto;
  transform: translateX(0);
}

.task-list-panel.side-panel-dragging,
.file-browser-panel.side-panel-dragging {
  transition: none !important;
}

.side-panel-swipe-edge {
  display: none;
}

body.side-panel-gesture-active {
  user-select: none;
  -webkit-user-select: none;
}

.task-list-panel-overlay {
  display: none;
}

.task-list-panel-content {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--color-surface);
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
}

.task-list-panel-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.task-list-search {
  flex: 1;
  min-width: 0;
  padding: 6px 10px;
  font-size: 13px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  background: var(--color-surface-muted);
  color: var(--color-text);
  transition: border-color 0.15s ease;
}

.task-list-search:focus {
  outline: none;
  border-color: var(--color-accent);
}

.task-list-search::placeholder {
  color: var(--color-text-muted);
}

.task-list-close {
  color: var(--color-text-muted);
}

.task-list-close:hover {
  color: var(--color-text);
  background: var(--color-surface-muted);
}

.task-list-filter-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-small);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}

.task-list-filter-btn:hover {
  background: var(--color-surface-muted);
  color: var(--color-text);
}

.task-list-filter-btn.active {
  background: var(--color-accent);
  color: white;
  border-color: var(--color-accent);
}

.task-list-filter-btn svg {
  width: 16px;
  height: 16px;
}

.task-list-filter-btn.spinning svg {
  animation: spin 0.8s linear infinite;
}

.task-list-panel-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px;
}

.task-list-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: var(--color-text-muted);
  font-size: 14px;
}

.task-list-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
  color: var(--color-text-muted);
}

.task-list-empty-icon {
  font-size: 32px;
  margin-bottom: 12px;
  opacity: 0.5;
}

.task-list-empty-text {
  font-size: 14px;
}

/* Task List Items */
.task-list-section {
  margin-bottom: 16px;
}

.task-list-section-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-text-muted);
  padding: 8px 8px 6px;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.task-list-section.collapsible .task-list-section-title {
  cursor: pointer;
  user-select: none;
}

.task-list-section.collapsible .task-list-section-title:hover {
  color: var(--color-text);
}

.task-list-section-title .collapse-icon {
  transition: transform 0.15s ease;
  flex-shrink: 0;
}

.task-list-section.collapsed .task-list-section-title .collapse-icon {
  transform: rotate(-90deg);
}

.task-list-section-count {
  font-size: 10px;
  font-weight: 500;
  color: var(--color-text-muted);
  background: var(--color-surface-muted);
  padding: 1px 6px;
  border-radius: 10px;
  margin-left: auto;
}

.task-list-section-content {
  overflow: hidden;
}

.task-list-section.collapsed .task-list-section-content {
  display: none;
}

.task-list-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  padding: 12px;
  margin-bottom: 4px;
  background: var(--color-surface-muted);
  border-radius: var(--radius-small);
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
  text-decoration: none;
  color: inherit;
  border: 1px solid transparent;
}

.task-list-item:hover {
  background: var(--color-background);
  border-color: var(--color-border);
}

.task-list-item:active {
  transform: scale(0.99);
}

.task-list-item.active {
  background: rgba(63, 114, 255, 0.1);
  border-color: var(--color-accent);
}

.task-list-item-header {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.task-list-item-status {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.task-list-item-status.status-running {
  background: var(--color-warning);
  animation: pulse 1.5s ease-in-out infinite;
}

.task-list-item-status.status-completed {
  background: var(--color-success);
}

.task-list-item-status.status-interrupted {
  background: #6b7280;
}

.task-list-item-status.status-approved {
  background: var(--color-accent);
}

.task-list-item-status.status-failed {
  background: var(--color-danger);
}

.task-list-item-status.status-stopped {
  background: var(--color-text-muted);
}

.task-list-item-status.status-queued {
  background: #3b82f6;
}

.task-list-item-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.task-list-item-agents {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
  min-width: 0;
}

.task-list-item-agent {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
}

.task-list-item-agent svg {
  width: 10px;
  height: 10px;
  color: var(--color-text-muted);
}

.task-list-item-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 11px;
  color: var(--color-text-muted);
}

.task-list-item-env {
  background: var(--color-surface);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-list-item-time {
  margin-left: auto;
}

.task-list-panel-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--color-border);
  display: flex;
  justify-content: center;
  flex-shrink: 0;
}

/* Group indicator for task items with multiple variants */
.task-list-item-group-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 10px;
  color: var(--color-text-muted);
  background: var(--color-surface);
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 4px;
}

.task-list-item-group-badge svg {
  width: 10px;
  height: 10px;
}

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

/* Dark theme adjustments */
:root[data-theme="dark"] .task-list-panel-overlay {
  background: rgba(0, 0, 0, 0.6);
}

:root[data-theme="dark"] .task-list-panel-content {
  box-shadow: 4px 0 32px rgba(0, 0, 0, 0.4);
}

/* Responsive - wider panel on larger screens */
@media (min-width: 768px) {
  .task-list-panel {
    width: 420px;
  }

  body.task-list-open .task-detail {
    margin-left: 420px;
  }

  body.task-list-open .task-sticky-header {
    left: 420px;
  }

  body.task-list-open .task-terminal-panel {
    left: 444px;
  }
}

/* On smaller screens, revert to overlay behavior */
@media (max-width: 767px) {
  .side-panel-swipe-edge {
    display: block;
    position: fixed;
    top: 0;
    bottom: 0;
    width: 24px;
    z-index: 890;
    background: transparent;
    touch-action: pan-y;
  }

  .side-panel-swipe-edge-left {
    left: 0;
  }

  .side-panel-swipe-edge-right {
    right: 0;
  }

  body.task-list-open .side-panel-swipe-edge-left,
  body.file-browser-open .side-panel-swipe-edge-right,
  .file-browser-side-trigger[hidden] ~ .side-panel-swipe-edge-right {
    display: none;
  }

  .task-list-panel {
    width: 100%;
    max-width: 380px;
  }

  .task-list-side-trigger,
  .file-browser-side-trigger,
  .task-list-panel-content,
  .file-browser-panel-header,
  .file-browser-tree-pane {
    touch-action: pan-y;
  }

  body.task-list-open .task-detail {
    margin-left: 0;
    max-width: var(--max-width);
    padding-left: 32px;
    padding-right: 32px;
  }

  body.task-list-open .task-sticky-header {
    left: 0;
  }

  .task-terminal-panel {
    left: 0;
    right: 0;
  }

  .task-terminal-restore {
    right: 16px;
    bottom: 16px;
  }

  .task-terminal-panel-header {
    padding-left: 16px;
    padding-right: 16px;
  }

  .task-terminal-tabs {
    padding-left: 8px;
    padding-right: 8px;
  }

  .task-terminal-tab {
    max-width: 180px;
  }
}


/* ============================================ */
/* Add-to-Group Mode Styles (Task List Panel)  */
/* ============================================ */

.add-to-group-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  background: var(--color-accent);
  color: white;
  font-size: 13px;
  font-weight: 500;
}

.add-to-group-banner-content {
  display: flex;
  align-items: center;
  gap: 8px;
}

.add-to-group-banner-content svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.add-to-group-banner-cancel {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s;
}

.add-to-group-banner-cancel:hover {
  background: rgba(255, 255, 255, 0.3);
}

.add-to-group-banner-cancel svg {
  width: 14px;
  height: 14px;
}

/* Task list item states in add-to-group mode */
.task-list-panel.add-to-group-mode .task-list-item {
  cursor: pointer;
}

.task-list-panel.add-to-group-mode .task-list-item.can-add-to-group:hover {
  background: rgba(63, 114, 255, 0.08);
  border-color: var(--color-accent);
}

.task-list-panel.add-to-group-mode .task-list-item.in-target-group {
  opacity: 0.6;
  cursor: default;
}

.task-list-panel.add-to-group-mode .task-list-item.in-different-group {
  border-left: 3px solid var(--color-warning);
}

/* Add button on task list items */
.task-list-item-add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  margin-left: auto;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-accent);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
}

.task-list-item-add-btn:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: white;
}

.task-list-item-add-btn svg {
  width: 14px;
  height: 14px;
}

/* Move button variant (for tasks in different groups) */
.task-list-item-move-btn {
  color: var(--color-warning);
  border-color: var(--color-warning);
}

.task-list-item-move-btn:hover {
  background: var(--color-warning);
  border-color: var(--color-warning);
  color: white;
}

/* Already in group indicator */
.task-list-item-in-group {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-left: auto;
  color: var(--color-success);
  flex-shrink: 0;
}

.task-list-item-in-group svg {
  width: 14px;
  height: 14px;
}

/* Dark theme adjustments for add-to-group mode */
:root[data-theme="dark"] .add-to-group-banner {
  background: var(--color-accent-dark);
}

:root[data-theme="dark"] .task-list-panel.add-to-group-mode .task-list-item.can-add-to-group:hover {
  background: rgba(63, 114, 255, 0.15);
}


/* Markdown Editor Toolbar Styles */
.markdown-editor-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.markdown-editor-toolbar {
  display: flex;
  gap: 2px;
  padding: 6px 8px;
  background: var(--color-surface-muted);
  border-bottom: 1px solid var(--color-border);
  flex-wrap: wrap;
  border-radius: var(--radius-small) var(--radius-small) 0 0;
}

.markdown-editor-toolbar-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--color-text-secondary);
  border-radius: 4px;
  cursor: pointer;
  padding: 0;
  transition: all 0.15s ease;
}

.markdown-editor-toolbar-btn:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--color-text);
}

.markdown-editor-toolbar-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.markdown-editor-toolbar-btn:active {
  background: rgba(0, 0, 0, 0.1);
  transform: translateY(1px);
}

/* Active state when formatting is enabled at cursor position */
.markdown-editor-toolbar-btn.active {
  background: var(--color-primary-muted, rgba(59, 130, 246, 0.15));
  color: var(--color-primary, #3b82f6);
  border-color: var(--color-primary, #3b82f6);
}

.markdown-editor-toolbar-btn.active:hover {
  background: var(--color-primary-muted, rgba(59, 130, 246, 0.25));
}

.markdown-editor-toolbar-btn.markdown-voice-btn.voice-listening {
  background: rgba(229, 83, 104, 0.18);
  color: var(--color-danger);
  border-color: var(--color-danger);
  animation: markdown-voice-listening-pulse 1.25s ease-in-out infinite;
}

@keyframes markdown-voice-listening-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(229, 83, 104, 0.3), 0 0 8px rgba(229, 83, 104, 0.18);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 7px rgba(229, 83, 104, 0.14), 0 0 14px rgba(229, 83, 104, 0.28);
    transform: scale(1.06);
  }
}

@media (prefers-reduced-motion: reduce) {
  .markdown-editor-toolbar-btn.markdown-voice-btn.voice-listening,
  .follow-up-toolbar > button.markdown-voice-btn.voice-listening {
    animation: none;
  }
}

.markdown-toolbar-separator {
  width: 1px;
  height: 16px;
  background: var(--color-border);
  margin: 0 4px;
  align-self: center;
}

[data-theme="dark"] .markdown-editor-toolbar {
  background: rgba(255, 255, 255, 0.03);
}

[data-theme="dark"] .markdown-editor-toolbar-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .markdown-editor-toolbar-btn.active {
  background: rgba(59, 130, 246, 0.25);
  color: #60a5fa;
  border-color: #60a5fa;
}

[data-theme="dark"] .markdown-editor-toolbar-btn.active:hover {
  background: rgba(59, 130, 246, 0.35);
}

/* Ensure proper border radius when toolbar is present */
.instructions-container .markdown-editor-toolbar {
  border-radius: var(--radius-small) var(--radius-small) 0 0;
}

/* Adjust editor styling when preceded by toolbar */
.markdown-editor-wrapper .markdown-editor {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* Markdown Toolbar Dropdown Styles */
.markdown-toolbar-dropdown {
  position: relative;
  display: inline-flex;
}

.markdown-toolbar-dropdown-btn {
  display: flex;
  align-items: center;
  gap: 2px;
}

.markdown-toolbar-dropdown-btn .dropdown-arrow {
  opacity: 0.6;
  margin-left: 2px;
}

.markdown-toolbar-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 140px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  margin-top: 4px;
}

.markdown-dropdown-item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
  color: var(--color-text);
  font-size: 13px;
}

.markdown-dropdown-item:hover {
  background: var(--color-surface-muted);
}

.markdown-dropdown-item:first-child {
  border-radius: var(--radius-small) var(--radius-small) 0 0;
}

.markdown-dropdown-item:last-child {
  border-radius: 0 0 var(--radius-small) var(--radius-small);
}

.markdown-color-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 8px;
}

.markdown-color-btn {
  width: 24px;
  height: 24px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.markdown-color-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .markdown-toolbar-dropdown-menu {
  background: var(--color-surface);
  border-color: var(--color-border);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .markdown-dropdown-item:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* Inline Activity Details */
.activity-timeline-item.expanded {
  flex-wrap: wrap;
  padding-bottom: 12px;
  background-color: rgba(63, 114, 255, 0.03);
}

.activity-inline-details {
  flex-basis: 100%;
  width: 100%;
  margin-top: 12px;
  padding: 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  overflow-x: auto;
  font-size: 13px;
  animation: slideDown 0.2s ease-out;
  margin-left: 50px; /* Indent to align with content */
  width: calc(100% - 50px);
}

.activity-timeline-item.expanded .expand-toggle {
  transform: rotate(90deg);
  background-color: rgba(0,0,0,0.05);
  color: var(--color-text);
}

.expand-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  margin-left: 6px;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 10px;
  vertical-align: middle;
}

.expand-toggle:hover {
  background-color: rgba(63, 114, 255, 0.1);
  color: var(--color-accent);
}

/* Inline detail styles reusing modal styles where possible */
.activity-inline-details .tool-detail {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.activity-inline-details .tool-section-header {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-text-muted);
  margin-bottom: 6px;
}

.activity-inline-details pre {
  margin: 0;
  padding: 12px;
  background: var(--color-surface-muted);
  border-radius: var(--radius-small);
  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', 'Consolas', monospace;
  font-size: 12px;
  line-height: 1.5;
  overflow-x: auto;
  white-space: pre-wrap;
  color: var(--color-text);
  border: 1px solid var(--color-border);
}

/* Reuse existing markdown styles */
.activity-inline-details .thinking-detail,
.activity-inline-details .user-instruction-detail,
.activity-inline-details .agent-response-detail {
  line-height: 1.6;
}

.activity-inline-details p {
  margin-top: 0;
  margin-bottom: 0.8em;
}

.activity-inline-details p:last-child {
  margin-bottom: 0;
}

/* ============================================================
   Comments Widget Styles
   ============================================================ */

/* Comments card - allow dropdown menus to overflow */
#comments-card:not(.collapsed) .detail-card-content {
  overflow: visible;
}

/* Main comments widget container */
.comments-widget {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Full mode header (task detail page) */
.comments-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.comments-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
}

.comments-title svg {
  color: var(--color-text-muted);
}

.comments-count {
  color: var(--color-text-muted);
  font-weight: normal;
}

/* Compact mode header (objectives dialog) */
.comments-widget-compact .comments-header {
  padding: 0;
}

.comments-toggle-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  color: var(--color-text);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
}

.comments-toggle-btn:hover {
  background: var(--color-bg-secondary);
  border-color: var(--color-border-hover);
}

.comments-toggle-icon {
  color: var(--color-text-muted);
}

.comments-count-label {
  flex: 1;
  text-align: left;
}

.comments-count-badge {
  background: var(--color-accent);
  color: white;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
}

.comments-count-badge[hidden] {
  display: none;
}

.comments-chevron {
  color: var(--color-text-muted);
  transition: transform 0.2s;
}

/* Comments list */
.comments-list-wrapper {
  max-height: 400px;
  overflow-y: auto;
}

.comments-widget-compact .comments-list-wrapper {
  max-height: 200px;
}

.comments-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.comments-empty,
.comments-loading,
.comments-error {
  padding: 16px;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 13px;
}

.comments-error {
  color: var(--color-error);
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

/* Individual comment item */
.comment-item {
  padding: 12px;
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  transition: border-color 0.15s;
}

.comment-item:hover {
  border-color: var(--color-border-hover);
}

.comment-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.comment-author {
  display: flex;
  align-items: center;
  gap: 8px;
}

.comment-author-name {
  font-weight: 600;
  font-size: 13px;
  color: var(--color-text);
}

.comment-timestamp {
  font-size: 12px;
  color: var(--color-text-muted);
}

.comment-actions {
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.15s;
}

.comment-item:hover .comment-actions {
  opacity: 1;
}

.btn-icon-mini {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  border-radius: var(--radius-small);
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}

.btn-icon-mini:hover {
  background: var(--color-bg-secondary);
  color: var(--color-text);
}

.comment-delete-btn:hover {
  background: rgba(239, 68, 68, 0.1);
  color: var(--color-error);
}

/* Comment content */
.comment-content {
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text);
}

.comment-content p {
  margin: 0 0 0.5em;
}

.comment-content p:last-child {
  margin-bottom: 0;
}

.comment-content code {
  background: var(--color-bg-secondary);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 13px;
  font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
}

.comment-content pre {
  background: var(--color-bg-secondary);
  padding: 12px;
  border-radius: var(--radius-small);
  overflow-x: auto;
  margin: 8px 0;
}

.comment-content pre code {
  background: transparent;
  padding: 0;
}

/* Comments input section */
.comments-input-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.comments-editor-wrapper {
  display: flex;
  flex-direction: column;
}

.comments-editor-wrapper .markdown-editor-wrapper {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  transition: border-color 0.15s;
}

.comments-editor-wrapper .markdown-editor-wrapper:focus-within {
  border-color: var(--color-accent);
}

.comments-editor-wrapper .markdown-editor {
  min-height: 80px;
  max-height: 200px;
  overflow-y: auto;
  padding: 12px;
  font-size: 14px;
  border: none;
  border-radius: 0;
  background: var(--color-bg-primary);
}

.comments-widget-compact .comments-editor-wrapper .markdown-editor {
  min-height: 60px;
}

/* Hidden toolbar until focus */
.comments-toolbar-hidden {
  display: none !important;
}

.comments-editor-wrapper .markdown-editor-toolbar {
  padding: 6px 8px;
  background: var(--color-surface-muted);
  border-bottom: 1px solid var(--color-border);
}

/* Input actions */
.comments-input-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.comments-cancel-btn[hidden] {
  display: none;
}

.comments-submit-btn {
  display: flex;
  align-items: center;
  gap: 6px;
}

.comments-submit-btn .btn-loading {
  display: flex;
  align-items: center;
}

.comments-submit-btn .btn-loading[hidden] {
  display: none;
}

.comments-submit-btn .spinner {
  animation: spin 1s linear infinite;
}

/* Compact mode specific styles for objectives dialog */
.comments-widget-compact {
  margin-top: 8px;
}

.comments-widget-compact .comments-list {
  gap: 8px;
}

.comments-widget-compact .comment-item {
  padding: 10px;
}

.comments-widget-compact .comment-content {
  font-size: 13px;
}

/* Objective comments field styling */
.objective-comments-field {
  margin-top: 8px;
  border-top: 1px solid var(--color-border);
  padding-top: 16px;
}

.objective-comments-field[hidden] {
  display: none;
}

/* Comments Delete Confirm Modal */
.comments-confirm-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.comments-confirm-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
}

.comments-confirm-dialog {
  position: relative;
  background: var(--color-surface);
  border-radius: var(--radius-medium);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  max-width: 400px;
  width: 90%;
  animation: modal-appear 0.15s ease-out;
}

@keyframes modal-appear {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.comments-confirm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border);
}

.comments-confirm-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.comments-confirm-close {
  color: var(--color-text-muted);
  font-size: 20px;
  line-height: 1;
}

.comments-confirm-body {
  padding: 20px;
}

.comments-confirm-body p {
  margin: 0;
  color: var(--color-text-secondary);
  line-height: 1.5;
}

.comments-confirm-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 16px 20px;
  border-top: 1px solid var(--color-border);
}

.comments-confirm-footer .btn-danger {
  background: var(--color-danger);
  color: white;
  border: none;
}

.comments-confirm-footer .btn-danger:hover {
  background: #c73e52;
}

.comments-confirm-footer .btn-ghost {
  background: var(--color-surface-muted);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}

.comments-confirm-footer .btn-ghost:hover {
  background: var(--color-border);
}

/* ============================================
   API Keys Modal Styles
   ============================================ */

.modal-content-narrow {
  max-width: 560px;
}

.modal-content-medium {
  max-width: 600px;
}

/* ============================================
   About CoderFlow Modal Styles
   ============================================ */

#about-coderflow-modal .modal-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: center;
}

#about-coderflow-modal .about-modal-hero {
  display: flex;
  justify-content: center;
}

#about-coderflow-modal .about-logo {
  height: 48px;
  width: auto;
}

#about-coderflow-modal .about-version-card {
  display: flex;
  flex-direction: column;
  padding: 10px 14px;
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  text-align: left;
  gap: 8px;
}

#about-coderflow-modal .about-version-label {
  font-size: 13px;
  color: var(--color-text-muted);
}

#about-coderflow-modal .about-version-value {
  font-weight: 600;
  font-size: 14px;
  color: var(--color-text);
}

#about-coderflow-modal .about-copyright {
  margin: 0;
  font-size: 12px;
  color: var(--color-text-muted);
}

#about-coderflow-modal .about-link {
  display: inline-flex;
  justify-content: center;
  font-weight: 600;
  text-decoration: none;
  color: var(--color-primary);
}

#about-coderflow-modal .about-link:hover {
  text-decoration: underline;
}

/* About modal - Update check styles */
.btn-sm {
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
}

#about-check-updates-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.about-update-status {
  margin-top: 0.5rem;
  padding: 0.75rem;
  border-radius: 4px;
  font-size: 0.9rem;
  line-height: 1.4;
}

.about-update-status.up-to-date {
  background-color: rgba(72, 187, 120, 0.1);
  border: 1px solid rgba(72, 187, 120, 0.3);
  color: #2f855a;
}

.about-update-status.update-available {
  background-color: rgba(66, 153, 225, 0.1);
  border: 1px solid rgba(66, 153, 225, 0.3);
  color: #2c5282;
}

.about-update-status.update-error {
  background-color: rgba(245, 101, 101, 0.1);
  border: 1px solid rgba(245, 101, 101, 0.3);
  color: #c53030;
}

.about-update-status.update-ahead {
  background-color: rgba(237, 137, 54, 0.1);
  border: 1px solid rgba(237, 137, 54, 0.3);
  color: #9c4221;
}

.about-update-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
}

.about-update-status-icon {
  display: inline-block;
  font-weight: bold;
}

.about-update-link {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  color: #3182ce;
  text-decoration: none;
  font-weight: 500;
}

.about-update-link:hover {
  text-decoration: underline;
}

.about-update-version-row {
  margin-top: 0.5rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.about-update-version-arrow {
  opacity: 0.8;
}

.about-update-command-row {
  margin-top: 0.6rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: nowrap;
}

.about-update-command {
  white-space: nowrap;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

.about-copy-command-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  background: var(--color-surface);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}

.about-copy-command-btn:hover {
  background: var(--color-surface-muted);
  color: var(--color-text);
}

.about-copy-command-btn.copied {
  background-color: rgba(72, 187, 120, 0.2);
  border-color: rgba(72, 187, 120, 0.4);
  color: #2f855a;
}

.about-update-help {
  margin-top: 0.6rem;
  display: block;
  opacity: 0.85;
}

.about-update-status code {
  background-color: rgba(0, 0, 0, 0.1);
  padding: 0.125rem 0.25rem;
  border-radius: 3px;
  font-size: 0.85em;
}

@media (max-width: 640px) {
  .about-update-link {
    margin-left: 0;
  }
}

.apikeys-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.apikey-row {
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border);
}

.apikey-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.apikey-row:first-child {
  padding-top: 0;
}

.apikey-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}

.apikey-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--color-text);
}

.apikey-provider {
  font-size: 12px;
  color: var(--color-text-muted);
}

.apikey-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.apikey-input-group {
  display: flex;
  align-items: center;
  flex: 1;
  gap: 4px;
}

.apikey-input-group .form-input {
  flex: 1;
  font-size: 13px;
  padding: 6px 10px;
}

.apikey-input-group .btn-icon {
  margin: 0;
  padding: 4px;
  flex-shrink: 0;
}

.apikey-controls .toggle-switch {
  flex-shrink: 0;
  margin-left: 4px;
}

/* Secret Value Visibility Toggle */
.secret-value-group {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.secret-value-group textarea {
  flex: 1;
}

.secret-value-group .btn-icon {
  flex-shrink: 0;
  margin-top: 4px;
}

/* Model Configuration Modal */
.model-config-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.model-config-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: var(--color-bg-tertiary);
  border-radius: 8px;
  border: 1px solid var(--color-border);
}

.model-config-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.model-provider-main {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.model-provider-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  flex-shrink: 0;
}

.model-provider-logo svg {
  width: 14px;
  height: 14px;
}

.model-provider-logo[data-agent="claude"] {
  color: #D97757;
}

.model-provider-logo[data-agent="codex"] {
  color: #10a37f;
}

.model-provider-logo[data-agent="gemini"] {
  color: #4285f4;
}

.model-provider-logo[data-agent="bob"] {
  color: #6366F1;
}

.model-provider-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--color-text-primary);
}

.model-provider-company {
  font-size: 12px;
  color: var(--color-text-muted);
}

.model-config-select-wrapper {
  width: 100%;
}

.model-config-select {
  width: 100%;
  font-size: 13px;
  padding: 8px 12px;
}

.model-config-message {
  margin: 6px 0 0 0;
  padding: 8px 10px;
  font-size: 12px;
  color: var(--color-text-muted);
  background-color: var(--color-bg-secondary);
  border-radius: 4px;
  border-left: 3px solid var(--color-warning);
}

/* Inline reasoning level for Codex */
.model-config-reasoning {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--color-border-light, rgba(128,128,128,0.2));
}

.reasoning-label {
  font-size: 13px;
  color: var(--color-text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.model-config-reasoning .custom-select,
.model-config-reasoning .model-config-select {
  flex: 1;
}

/* Model config modal - allow dropdowns to overflow */
#model-config-modal .modal-body {
  overflow: visible;
}

#model-config-modal .modal-content {
  overflow: visible;
}

/* Provider Authentication Modal */
.modal-description {
  color: var(--color-text-muted);
  font-size: 13px;
  margin-bottom: 16px;
}

/* Provider Auth Multi-Account UI */
.provider-auth-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.provider-auth-section {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 12px 16px;
  background: var(--color-bg-secondary);
}

.provider-auth-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.provider-auth-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.provider-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--color-text);
}

.provider-company {
  font-size: 12px;
  color: var(--color-text-muted);
}

.provider-accounts-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.provider-no-accounts {
  color: var(--color-text-muted);
  font-size: 13px;
  font-style: italic;
  padding: 8px 0;
}

.provider-account-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 6px;
}

.provider-account-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.provider-account-label {
  display: flex;
  align-items: center;
  gap: 6px;
}

.account-label-text {
  font-weight: 500;
  font-size: 13px;
  color: var(--color-text);
}

.account-default-badge {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 2px 6px;
  background: var(--color-success, #10b981);
  color: white;
  border-radius: 4px;
}

.account-round-robin-badge {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 2px 6px;
  background: rgba(245, 158, 11, 0.14);
  color: #b45309;
  border-radius: 4px;
}

.account-type-badge {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
}

.account-type-badge.oauth {
  background: rgba(63, 114, 255, 0.14);
  color: var(--color-accent);
}

.account-type-badge.api-key {
  background: rgba(14, 165, 233, 0.14);
  color: #0284c7;
}

.account-endpoint-badge {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(99, 102, 241, 0.12);
  color: #4f46e5;
  white-space: nowrap;
}

.account-active-check {
  color: var(--color-success, #10b981);
  flex-shrink: 0;
}

.account-inactive-spacer {
  width: 16px;
  flex-shrink: 0;
}

.provider-account-row.is-default {
  background: var(--color-success-bg, rgba(16, 185, 129, 0.08));
  border-color: var(--color-success, #10b981);
}

.provider-account-email {
  font-size: 12px;
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.provider-account-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
  margin-left: 12px;
}

.provider-account-actions .btn-small {
  padding: 4px 10px;
  font-size: 12px;
}

.btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  cursor: pointer;
  color: var(--color-text-muted);
  transition: all 0.15s ease;
}

.btn-icon:hover {
  background: var(--color-bg-hover);
  color: var(--color-text);
  border-color: var(--color-border-hover);
}

.btn-icon.btn-danger:hover {
  background: var(--color-danger-bg, rgba(239, 68, 68, 0.1));
  color: var(--color-danger, #ef4444);
  border-color: var(--color-danger, #ef4444);
}

.btn-icon.btn-icon-active,
.btn-icon.btn-icon-active:disabled {
  color: var(--color-accent, #3f72ff);
  border-color: var(--color-accent, #3f72ff);
  background: rgba(63, 114, 255, 0.08);
  opacity: 1;
  cursor: default;
}

.provider-fallback-note {
  color: var(--color-text-muted);
  font-size: 12px;
  line-height: 1.4;
  margin: -2px 0 10px;
}

.ai-provider-manager-desc {
  margin-top: 0;
}

.ai-provider-manager .form-single-column,
.ai-provider-modal-content .form-single-column {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ai-provider-manager .form-row,
.ai-provider-modal-content .form-row {
  display: grid;
  grid-template-columns: minmax(130px, 0.35fr) minmax(0, 1fr);
  align-items: center;
  gap: 10px 14px;
}

.ai-provider-manager .form-row label,
.ai-provider-modal-content .form-row label {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-muted);
}

.ai-provider-manager .form-hint,
.ai-provider-modal-content .form-hint {
  grid-column: 2;
  color: var(--color-text-muted);
  font-size: 12px;
  line-height: 1.4;
}

.ai-provider-models {
  margin-top: 8px;
}

.ai-provider-runtime-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--color-text);
  font-size: 13px;
}

.ai-provider-model-actions {
  justify-content: flex-end;
}

.ai-provider-add-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--color-border);
}

.ai-provider-tab {
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 13px;
  font-weight: 600;
  padding: 10px 12px;
  border-radius: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  margin-bottom: -1px;
}

.ai-provider-tab.active {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

.ai-provider-tab-content {
  display: none;
}

.ai-provider-tab-content.active {
  display: block;
}

.apikey-endpoint-fields {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-bg-secondary);
}

.apikey-endpoint-field-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text);
}

.apikey-endpoint-fields .form-input {
  margin: 0;
  font-size: 13px;
}

@media (max-width: 720px) {
  .provider-auth-header-row,
  .provider-account-row {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
  }

  .provider-account-actions {
    margin-left: 0;
    flex-wrap: wrap;
  }

  .ai-provider-manager .form-row,
  .ai-provider-modal-content .form-row {
    grid-template-columns: 1fr;
  }

  .ai-provider-manager .form-hint,
  .ai-provider-modal-content .form-hint {
    grid-column: 1;
  }
}

/* Legacy styles kept for backwards compatibility */
.provider-auth-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border);
}

.provider-auth-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.provider-auth-row:first-child {
  padding-top: 0;
}

.provider-auth-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.provider-auth-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.provider-auth-status {
  display: flex;
  align-items: center;
  gap: 6px;
}

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

.status-indicator.status-connected {
  background-color: var(--color-success, #10b981);
}

.status-indicator.status-disconnected {
  background-color: var(--color-text-muted);
}

.provider-auth-status .status-text {
  font-size: 12px;
  color: var(--color-text-muted);
}

.provider-auth-actions {
  display: flex;
  gap: 8px;
}

/* Sign-in steps */
.signin-steps {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.signin-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 0;
}

.step-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: var(--color-primary);
  color: white;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}

.step-text {
  font-size: 13px;
  color: var(--color-text);
  line-height: 1.5;
  padding-top: 2px;
}

/* Secure Redirect Notice - Provider OAuth */
.secure-redirect-notice {
  background: var(--color-surface-alt, rgba(59, 130, 246, 0.08));
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 16px;
  margin: 12px 0 4px 0;
}

.secure-redirect-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 13px;
  color: var(--color-text);
  margin-bottom: 10px;
}

.secure-redirect-header svg {
  color: var(--color-primary);
  flex-shrink: 0;
}

.secure-redirect-notice p {
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.5;
  margin: 0 0 12px 0;
}

.secure-redirect-instruction {
  background: var(--color-surface);
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 12px;
  color: var(--color-text);
  border: 1px solid var(--color-border);
}

.secure-redirect-instruction strong {
  color: var(--color-text);
}

/* Changes Card Layout - File Tree Sidebar */
.changes-layout {
  display: flex;
  gap: 20px;
  position: relative;
  align-items: flex-start;
}

.changes-sidebar {
  width: 260px;
  flex-shrink: 0;
  position: sticky;
  top: 20px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  border-right: 1px solid var(--color-border);
  padding-right: 12px;
  margin-right: -12px; /* Offset the gap visually for the border */
  display: flex;
  flex-direction: column;
}

.changes-sidebar[hidden] {
  display: none;
}

.changes-main {
  flex: 1;
  min-width: 0; /* Prevent flex item from overflowing */
  display: flex;
  flex-direction: column;
}

.changes-tree-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px 8px 4px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--color-border);
}

.changes-tree-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.changes-tree-content {
  font-size: 13px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Tree Items */
.tree-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--color-text);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 0.15s ease, color 0.15s ease;
  user-select: none;
}

.tree-item:hover {
  background: rgba(63, 114, 255, 0.08);
  color: var(--color-accent);
}

.tree-item.active {
  background: rgba(63, 114, 255, 0.12);
  color: var(--color-accent);
  font-weight: 500;
}

.tree-item-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
}

.tree-item.active .tree-item-icon {
  color: var(--color-accent);
}

.tree-item-label {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Folder Items */
.tree-folder {
  display: flex;
  flex-direction: column;
}

.tree-folder-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--color-text-secondary);
  font-weight: 500;
  transition: background 0.15s ease;
}

.tree-folder-header:hover {
  background: rgba(0, 0, 0, 0.04);
}

:root[data-theme="dark"] .tree-folder-header:hover {
  background: rgba(255, 255, 255, 0.06);
}

.tree-folder-icon {
  color: var(--color-text-muted);
  width: 16px;
  height: 16px;
}

.tree-toggle-icon {
  color: var(--color-text-muted);
  width: 16px;
  height: 16px;
  transition: transform 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tree-folder.collapsed .tree-folder-children {
  display: none;
}

.tree-folder.collapsed .tree-toggle-icon {
  transform: rotate(-90deg);
}

.tree-folder-children {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-left: 6px; /* Spacing between line and children */
  margin-top: 1px;
  border-left: 1px solid var(--color-border);
  margin-left: 15px; /* Align border with parent icon center (8px padding + 7px half-icon) */
}

/* File type colors */
.tree-item[data-ext=".js"] .tree-item-icon, 
.tree-item[data-ext=".ts"] .tree-item-icon { color: #f1e05a; }
.tree-item[data-ext=".html"] .tree-item-icon { color: #e34c26; }
.tree-item[data-ext=".css"] .tree-item-icon { color: #563d7c; }
.tree-item[data-ext=".json"] .tree-item-icon { color: #cbcb41; }
.tree-item[data-ext=".md"] .tree-item-icon { color: #083fa1; }
.tree-item[data-ext=".py"] .tree-item-icon { color: #3572a5; }

/* File Selection Tree (checkbox variant) */
.file-selection-tree .tree-item-checkbox { margin-right: 6px; cursor: pointer; }
.file-selection-tree .tree-item-checkbox:disabled { cursor: not-allowed; opacity: 0.5; }
.file-selection-tree .tree-folder-checkbox { margin-right: 6px; cursor: pointer; }
.file-selection-tree .tree-item.disabled { opacity: 0.55; }
.file-selection-tree .tree-item.disabled .tree-item-label { text-decoration: none; }
.file-selection-tree-container { max-height: 300px; overflow-y: auto; border: 1px solid var(--border-color, var(--color-border)); border-radius: 4px; padding: 8px; }
.file-selection-summary { font-size: 12px; color: var(--color-text-muted); margin-top: 6px; }

/* Toggle Button */
.changes-tree-toggle {
  position: sticky;
  top: 6px;
  align-self: flex-start;
  margin-bottom: 8px;
  z-index: 10;
  padding: 6px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.changes-tree-toggle[hidden] {
  display: none;
}

/* Responsive */
@media (max-width: 900px) {
  .changes-sidebar {
    display: none; /* Hide by default on small screens */
  }

  .changes-layout.sidebar-open .changes-sidebar {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 280px;
    height: 100vh;
    background: var(--color-surface);
    z-index: 1000;
    padding: 20px;
    box-shadow: 0 0 20px rgba(0,0,0,0.2);
    border-right: none;
  }
}

/* ============================================================================
   Variant Grouping Manager - Drag & Drop Interface
   ============================================================================ */

/* Main container */
body.variant-grouping-open {
  overflow: hidden;
}

.variant-grouping-manager {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 400px;
  max-width: 90vw;
  background: var(--color-surface);
  box-shadow: -4px 0 24px rgba(15, 23, 42, 0.15);
  z-index: 1100;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s ease;
}

.variant-grouping-container.open .variant-grouping-manager {
  transform: translateX(0);
}

/* Header */
.vgm-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border);
}

.vgm-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text);
}

.vgm-close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  border-radius: 8px;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.vgm-close-btn:hover {
  background: var(--color-surface-muted);
  color: var(--color-text);
}

.vgm-close-btn svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* Content area */
.vgm-content {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Sections */
.vgm-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.vgm-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 4px;
}

.vgm-section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0;
}

.vgm-section-count {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-muted);
  background: var(--color-surface-muted);
  padding: 2px 8px;
  border-radius: 12px;
}

/* Drop zones */
.vgm-drop-zone {
  min-height: 80px;
  border: 2px dashed var(--color-border);
  border-radius: 12px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color 0.2s, background 0.2s;
}

.vgm-drop-zone.drag-over {
  border-color: var(--color-accent);
  background: rgba(63, 114, 255, 0.05);
}

.vgm-grouped-zone {
  border-color: var(--color-accent);
  border-style: solid;
  background: rgba(63, 114, 255, 0.03);
}

.vgm-empty-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  color: var(--color-text-muted);
  font-size: 13px;
  font-style: italic;
}

/* Divider */
.vgm-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
}

.vgm-divider-line {
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

.vgm-divider-text {
  font-size: 11px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0;
}

/* Variant cards */
.vgm-variant-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  min-width: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  cursor: grab;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s, opacity 0.15s;
}

.vgm-variant-card:hover {
  border-color: var(--color-accent);
  box-shadow: 0 2px 8px rgba(63, 114, 255, 0.1);
}

.vgm-variant-card:active {
  cursor: grabbing;
}

.vgm-variant-card.dragging {
  opacity: 0.5;
  transform: scale(0.98);
}

/* Disable pointer events on card children during drag to ensure drop targets work */
.variant-grouping-container.is-dragging .vgm-variant-card > * {
  pointer-events: none;
}

/* Drop indicators on cards */
.vgm-variant-card.drop-before {
  border-top: 3px solid var(--color-accent);
  margin-top: -2px;
}

.vgm-variant-card.drop-after {
  border-bottom: 3px solid var(--color-accent);
  margin-bottom: -2px;
}

/* Drag handle */
.vgm-variant-drag-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--color-text-muted);
  opacity: 0.5;
  transition: opacity 0.15s;
}

.vgm-variant-card:hover .vgm-variant-drag-handle {
  opacity: 1;
}

/* Variant icon */
.vgm-variant-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 6px;
  background: var(--color-surface-muted);
}

.vgm-variant-icon[data-agent="claude"] {
  color: #D97757;
  background: rgba(217, 119, 87, 0.1);
}

.vgm-variant-icon[data-agent="codex"] {
  color: #10a37f;
  background: rgba(16, 163, 127, 0.1);
}

.vgm-variant-icon[data-agent="gemini"] {
  color: #4285f4;
  background: rgba(66, 133, 244, 0.1);
}

.vgm-variant-icon[data-agent="bob"] {
  color: #6366F1;
  background: rgba(99, 102, 241, 0.1);
}

/* Variant info */
.vgm-variant-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.vgm-variant-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vgm-variant-meta {
  font-size: 11px;
  color: var(--color-text-muted);
}

/* Badges */
.vgm-variant-badges {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.vgm-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 10px;
}

.vgm-badge-winner {
  background: linear-gradient(135deg, #ffd700, #ffb800);
  color: #1f2a44;
}

.vgm-badge-approved {
  background: var(--color-success);
  color: white;
}

/* Status */
.vgm-variant-status {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.vgm-variant-status.status-running {
  color: var(--color-accent);
}

.vgm-variant-status.status-completed {
  color: var(--color-success);
}

.vgm-variant-status.status-interrupted {
  color: #6b7280;
}

.vgm-variant-status.status-failed {
  color: var(--color-danger);
}

.vgm-variant-status.status-staged,
.vgm-variant-status.status-queued {
  color: var(--color-warning);
}

.vgm-variant-status .status-icon {
  width: 14px;
  height: 14px;
}

.vgm-variant-status .status-icon.spinning {
  animation: spin 1s linear infinite;
}

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

/* Card action buttons */
.vgm-variant-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.vgm-variant-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  border-radius: 6px;
  color: var(--color-text-muted);
  cursor: pointer;
  touch-action: manipulation;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s, color 0.15s;
}

.vgm-variant-card:hover .vgm-variant-action-btn,
.vgm-variant-action-btn:focus-visible {
  opacity: 1;
}

.vgm-variant-action-btn:disabled {
  cursor: not-allowed;
  opacity: 0.25;
}

.vgm-variant-action-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.vgm-variant-move-btn:hover:not(:disabled) {
  background: var(--color-surface-muted);
  color: var(--color-text);
}

.vgm-variant-remove-btn:hover {
  background: var(--color-danger);
  color: white;
}

.vgm-variant-card[data-is-grouped="false"] .vgm-variant-remove-btn:hover {
  background: var(--color-success);
}

/* Footer */
.vgm-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 16px 20px;
  border-top: 1px solid var(--color-border);
}

.vgm-btn {
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}

.vgm-btn:active {
  transform: scale(0.98);
}

.vgm-btn-secondary {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text);
}

.vgm-btn-secondary:hover {
  background: var(--color-surface-muted);
}

.vgm-btn-primary {
  background: var(--color-accent);
  border: none;
  color: white;
}

.vgm-btn-primary:hover {
  background: var(--color-accent-dark);
}

/* Actions section (Add Existing Task button) */
.vgm-actions {
  display: flex;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--color-border);
  background: var(--color-surface-muted);
}

.vgm-add-existing-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  justify-content: center;
}

.vgm-add-existing-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Task tab drag-drop styles */
.task-tabs.is-dragging {
  background: rgba(63, 114, 255, 0.03);
}

.task-tab.dragging {
  opacity: 0.5;
}

/* Disable pointer events on tab children during drag to ensure drop targets work */
.task-tabs.is-dragging .task-tab > * {
  pointer-events: none;
}

.task-tab.drop-before::before {
  content: '';
  position: absolute;
  left: -5px;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--color-accent);
  border-radius: 2px;
}

.task-tab.drop-after::after {
  content: '';
  position: absolute;
  right: -5px;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--color-accent);
  border-radius: 2px;
}

/* Remove zone for tabs */
.task-tab-remove-zone {
  display: none;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  margin-left: 8px;
  background: rgba(229, 83, 104, 0.08);
  border: 2px dashed rgba(229, 83, 104, 0.4);
  border-radius: 8px;
  color: var(--color-danger);
  font-size: 12px;
  font-weight: 500;
  transition: background 0.2s, border-color 0.2s;
}

.task-tab-remove-zone.drag-over {
  background: rgba(229, 83, 104, 0.15);
  border-color: var(--color-danger);
}

.task-tab-remove-zone svg {
  width: 14px;
  height: 14px;
}

/* Manage variants button in task tabs area */
.manage-variants-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.manage-variants-btn:hover {
  background: var(--color-surface-muted);
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.manage-variants-btn svg {
  width: 14px;
  height: 14px;
}

/* Container backdrop */
.variant-grouping-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1050;
  pointer-events: none;
}

.variant-grouping-container.open {
  pointer-events: all;
}

.variant-grouping-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(15, 23, 42, 0.3);
  opacity: 0;
  transition: opacity 0.3s;
}

.variant-grouping-container.open::before {
  opacity: 1;
}

@media (hover: none), (pointer: coarse) {
  .vgm-variant-action-btn {
    opacity: 1;
  }

  .vgm-variant-card {
    cursor: default;
  }
}

@media (max-width: 640px) {
  .variant-grouping-manager {
    left: 0;
    right: 0;
    bottom: auto;
    width: 100%;
    max-width: none;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    box-shadow: 0 -8px 28px rgba(15, 23, 42, 0.18);
    transform: translateY(100%);
  }

  .variant-grouping-container.open .variant-grouping-manager {
    transform: translateY(0);
  }

  .vgm-header {
    padding: max(12px, env(safe-area-inset-top)) 16px 12px;
  }

  .vgm-header h3 {
    font-size: 15px;
  }

  .vgm-close-btn {
    width: 40px;
    height: 40px;
    margin-right: -8px;
  }

  .vgm-content {
    padding: 12px;
    gap: 12px;
  }

  .vgm-section {
    gap: 6px;
  }

  .vgm-drop-zone {
    min-height: 72px;
    padding: 6px;
    border-radius: 8px;
  }

  .vgm-divider {
    gap: 8px;
    padding: 4px 0;
  }

  .vgm-variant-card {
    align-items: flex-start;
    gap: 8px;
    padding: 10px 8px;
  }

  .vgm-variant-drag-handle {
    display: none;
  }

  .vgm-variant-icon {
    width: 24px;
    height: 24px;
  }

  .vgm-variant-name {
    white-space: normal;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .vgm-variant-meta {
    overflow-wrap: anywhere;
  }

  .vgm-variant-status {
    height: 34px;
  }

  .vgm-variant-actions {
    gap: 4px;
  }

  .vgm-variant-action-btn {
    width: 34px;
    height: 34px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    opacity: 1;
  }

  .vgm-actions {
    padding: 10px 12px max(10px, env(safe-area-inset-bottom));
  }

  .vgm-add-existing-btn {
    min-height: 40px;
  }
}

@media (max-width: 360px) {
  .vgm-variant-card {
    gap: 6px;
  }

  .vgm-variant-badges,
  .vgm-variant-status {
    display: none;
  }

  .vgm-variant-action-btn {
    width: 32px;
  }
}

/* Dark theme adjustments */
:root[data-theme="dark"] .variant-grouping-manager {
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.4);
}

:root[data-theme="dark"] .vgm-drop-zone.drag-over {
  background: rgba(63, 114, 255, 0.1);
}

:root[data-theme="dark"] .vgm-grouped-zone {
  background: rgba(63, 114, 255, 0.05);
}

:root[data-theme="dark"] .vgm-variant-card:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

@media (max-width: 640px) {
  :root[data-theme="dark"] .variant-grouping-manager {
    box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.45);
  }
}

/* ============================================================
   MARKDOWN FILE EDITOR STYLES
   Editor component for editing .md files with WYSIWYG features
   ============================================================ */

.markdown-file-editor-wrapper {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  overflow: hidden;
  background: var(--color-surface);
  min-height: 0;
}

.markdown-file-editor-wrapper .markdown-editor-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

.markdown-file-editor-wrapper .markdown-editor-toolbar {
  flex-shrink: 0;
  border-radius: 0;
  border-top: none;
  border-left: none;
  border-right: none;
}

.markdown-file-editor-wrapper .markdown-editor {
  flex: 1;
  min-height: 0;
  overflow: auto;
  border: none;
  border-radius: 0;
  padding: 16px;
  font-size: 14px;
  line-height: 1.6;
}

.markdown-file-editor-wrapper .markdown-editor:focus {
  box-shadow: none;
  outline: none;
}

/* Override default markdown editor styling within file editor context */
.markdown-file-editor-wrapper .markdown-editor h1 {
  font-size: 24px;
  font-weight: 700;
  margin: 16px 0 12px 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-border);
}

.markdown-file-editor-wrapper .markdown-editor h2 {
  font-size: 20px;
  font-weight: 600;
  margin: 14px 0 10px 0;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--color-border-light, rgba(0,0,0,0.05));
}

.markdown-file-editor-wrapper .markdown-editor h3 {
  font-size: 17px;
  font-weight: 600;
  margin: 12px 0 8px 0;
}

.markdown-file-editor-wrapper .markdown-editor h4 {
  font-size: 15px;
  font-weight: 600;
  margin: 10px 0 6px 0;
}

.markdown-file-editor-wrapper .markdown-editor pre {
  background: #1e1e1e;
  color: #d4d4d4;
  padding: 14px 16px;
  border-radius: var(--radius-small);
  overflow-x: auto;
  margin: 12px 0;
  font-family: "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.5;
}

.markdown-file-editor-wrapper .markdown-editor pre code {
  background: none;
  padding: 0;
  color: inherit;
}

.markdown-file-editor-wrapper .markdown-editor code {
  font-family: "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 13px;
  background: rgba(0, 0, 0, 0.06);
  padding: 2px 6px;
  border-radius: 4px;
}

.markdown-file-editor-wrapper .markdown-editor blockquote {
  border-left: 4px solid var(--color-accent);
  margin: 12px 0;
  padding: 8px 16px;
  background: rgba(63, 114, 255, 0.04);
  color: var(--color-text-secondary);
}

.markdown-file-editor-wrapper .markdown-editor table {
  border-collapse: collapse;
  width: 100%;
  margin: 12px 0;
}

.markdown-file-editor-wrapper .markdown-editor th,
.markdown-file-editor-wrapper .markdown-editor td {
  border: 1px solid var(--color-border);
  padding: 8px 12px;
  text-align: left;
}

.markdown-file-editor-wrapper .markdown-editor th {
  background: var(--color-surface-muted);
  font-weight: 600;
}

.markdown-file-editor-wrapper .markdown-editor hr {
  border: none;
  border-top: 2px solid var(--color-border);
  margin: 20px 0;
}

.markdown-file-editor-wrapper .markdown-editor img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-small);
}

/* Dark mode adjustments for markdown file editor */
[data-theme="dark"] .markdown-file-editor-wrapper {
  background: var(--color-surface);
}

[data-theme="dark"] .markdown-file-editor-wrapper .markdown-editor code {
  background: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .markdown-file-editor-wrapper .markdown-editor blockquote {
  background: rgba(63, 114, 255, 0.08);
  border-left-color: var(--color-accent);
}

[data-theme="dark"] .markdown-file-editor-wrapper .markdown-editor h1,
[data-theme="dark"] .markdown-file-editor-wrapper .markdown-editor h2 {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .markdown-file-editor-wrapper .markdown-editor th {
  background: rgba(255, 255, 255, 0.05);
}

/* ============================================================
   MARKDOWN EDITOR MODE TOGGLE
   Toggle buttons for switching between Visual and Source modes
   ============================================================ */

.markdown-editor-mode-toggle {
  display: flex;
  align-items: center;
  padding: 4px 8px;
  gap: 4px;
  background: var(--color-surface-secondary, var(--color-surface-muted));
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.markdown-mode-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-secondary);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.markdown-mode-btn svg {
  flex-shrink: 0;
}

.markdown-mode-btn:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--color-text);
}

.markdown-mode-btn.active {
  background: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-border);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.markdown-mode-btn.active:hover {
  background: var(--color-surface);
}

/* Source editor container (Monaco Editor) */
.markdown-source-container,
.markdown-editor-source-container {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.markdown-source-container .monaco-editor,
.markdown-editor-source-container .monaco-editor {
  height: 100% !important;
}

/* Dark mode for mode toggle */
[data-theme="dark"] .markdown-editor-mode-toggle {
  background: rgba(255, 255, 255, 0.03);
}

[data-theme="dark"] .markdown-mode-btn:hover {
  background: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .markdown-mode-btn.active {
  background: var(--color-surface);
  border-color: var(--color-border);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Task Progress Card Styles (New Design) */
.task-progress-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 8px 4px 16px;
}

.task-progress-header {
  display: flex;
  align-items: center;
  gap: 16px;
}

.task-progress-track {
  flex: 1;
  height: 8px;
  background-color: #e2e8f0;
  border-radius: 4px;
  overflow: hidden;
}

.task-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #10b981 0%, #3b82f6 100%);
  border-radius: 4px;
  transition: width 0.5s ease-out;
}

.task-progress-text {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-muted);
  min-width: 40px;
  text-align: right;
}

.task-todo-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
}

/* Vertical connector line */
.task-todo-list::before {
  content: '';
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: 14px;
  width: 2px;
  background-color: #e2e8f0;
  z-index: 0;
}

.task-todo-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  position: relative;
  z-index: 1;
}

.task-todo-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 600;
  background-color: var(--color-surface); /* Mask the connector line */
  transition: all 0.2s ease;
}

.task-todo-icon.icon-completed {
  background-color: #10b981;
  color: white;
  border: 2px solid #10b981;
}

.task-todo-icon.icon-completed svg {
  width: 16px;
  height: 16px;
}

.task-todo-icon.icon-in-progress {
  border: 2px solid #3b82f6;
  color: #3b82f6;
  background-color: var(--color-surface);
}

.task-todo-icon.icon-in-progress svg {
  width: 16px;
  height: 16px;
  animation: task-spin 2s linear infinite;
}

.task-todo-icon.icon-pending {
  border: 2px solid #e2e8f0;
  color: #94a3b8;
  background-color: var(--color-surface);
}

.task-todo-content {
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-text);
  padding-top: 3px;
  font-weight: 500;
}

.task-todo-item.status-completed .task-todo-content {
  color: var(--color-text-muted);
}

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

/* Dark mode adjustments */
:root[data-theme="dark"] .task-progress-track {
  background-color: #1e293b;
}

:root[data-theme="dark"] .task-todo-list::before {
  background-color: #1e293b;
}

:root[data-theme="dark"] .task-todo-icon.icon-pending {
  border-color: #334155;
  color: #64748b;
}

:root[data-theme="dark"] .task-todo-icon.icon-in-progress,
:root[data-theme="dark"] .task-todo-icon.icon-pending {
  background-color: var(--color-surface);
}

/* ── File Browser Side Trigger (right edge, mirrors task-list-side-trigger) ── */

.file-browser-side-trigger {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 900;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-right: none;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  box-shadow: -2px 0 12px rgba(0, 0, 0, 0.08);
  padding: 12px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  color: var(--color-text-muted);
  width: 32px;
}

.file-browser-side-trigger:hover {
  transform: translateY(-50%) translateX(-4px);
  background: var(--color-surface);
  color: var(--color-accent);
  box-shadow: -4px 0 16px rgba(63, 114, 255, 0.15);
}

.file-browser-side-trigger .side-trigger-icon {
  font-size: 18px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.file-browser-side-trigger .side-trigger-label {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-top: 4px;
}

/* Hide trigger when panel is open */
body.file-browser-open .file-browser-side-trigger {
  transform: translateY(-50%) translateX(100%);
  opacity: 0;
  pointer-events: none;
}

/* Hide when container is not running (controlled by JS) */
.file-browser-side-trigger[hidden] {
  display: none;
}

/* ── File Browser Slide-Out Panel ── */

.file-browser-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 480px;
  max-width: 90vw;
  height: 100%;
  z-index: 1000;
  pointer-events: none;
  transform: translateX(100%);
  transition: transform 0.3s ease;
}

.file-browser-panel:not([hidden]) {
  pointer-events: auto;
  transform: translateX(0);
}

.file-browser-panel-overlay {
  display: none;
}

.file-browser-panel-content {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--color-surface);
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
}

.file-browser-panel-content.drag-over::after {
  content: 'Drop files to upload to this folder';
  position: absolute;
  inset: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed var(--color-accent);
  border-radius: var(--radius-medium);
  background: rgba(63, 114, 255, 0.08);
  color: var(--color-accent);
  font-size: 13px;
  font-weight: 600;
  pointer-events: none;
  z-index: 30;
}

.file-browser-resize-handle {
  position: absolute;
  left: 0;
  top: 0;
  width: 5px;
  height: 100%;
  cursor: col-resize;
  z-index: 10;
  background: transparent;
  transition: background 0.15s ease;
}

.file-browser-resize-handle:hover,
.file-browser-resize-handle.dragging {
  background: var(--color-accent);
}

.file-browser-panel-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.file-browser-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
}

.file-browser-close {
  color: var(--color-text-muted);
}

.file-browser-close:hover {
  color: var(--color-text);
  background: var(--color-surface-muted);
}

.file-browser-upload-btn {
  flex-shrink: 0;
}

.file-browser-new-folder-btn {
  flex-shrink: 0;
}

.file-browser-header-icon-btn {
  flex-shrink: 0;
}

.file-browser-breadcrumb {
  padding: 8px 16px;
  font-size: 12px;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.file-browser-breadcrumb-segment {
  cursor: pointer;
  color: var(--color-accent);
  text-decoration: none;
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 12px;
}

.file-browser-breadcrumb-segment:hover {
  text-decoration: underline;
}

.file-browser-breadcrumb-separator {
  color: var(--color-text-muted);
  user-select: none;
}

.file-browser-breadcrumb-current {
  color: var(--color-text);
  font-weight: 500;
}

.file-browser-breadcrumb-root-select {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-bg-secondary);
  color: var(--color-accent);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  padding: 2px 20px 2px 6px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 5px center;
  flex-shrink: 0;
}

.file-browser-breadcrumb-root-select:hover {
  border-color: var(--color-accent);
}

.file-browser-breadcrumb-root-select:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 1px var(--color-accent);
}

.file-browser-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

.file-browser-tree-pane {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.file-browser-search-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.file-browser-search-icon {
  flex-shrink: 0;
  color: var(--color-text-muted);
}

.file-browser-search-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--color-text);
  font-size: 13px;
  font-family: inherit;
  padding: 2px 0;
  min-width: 0;
}

.file-browser-search-input::placeholder {
  color: var(--color-text-muted);
}

.file-browser-search-clear {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  padding: 2px;
  border-radius: 4px;
  flex-shrink: 0;
}

.file-browser-search-clear:hover {
  color: var(--color-text);
  background: var(--color-surface-muted);
}

.file-browser-search-result-path {
  display: block;
  font-size: 11px;
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-left: 24px;
}

.file-browser-search-status {
  padding: 4px 16px;
  font-size: 11px;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.file-browser-tree {
  padding: 4px 0;
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.file-browser-placeholder {
  padding: 24px 16px;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 13px;
}

.file-browser-row {
  display: flex;
  align-items: center;
}

.file-browser-entry {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 16px;
  font-size: 13px;
  color: var(--color-text);
  cursor: pointer;
  border: none;
  background: none;
  flex: 1;
  text-align: left;
  font-family: inherit;
  transition: background 0.1s ease;
  min-width: 0;
}

.file-browser-entry:hover {
  background: var(--color-surface-muted);
}

.file-browser-entry.active {
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
  color: var(--color-accent);
}

.file-browser-entry-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--color-text-muted);
}

.file-browser-entry.is-directory .file-browser-entry-icon {
  color: var(--color-accent);
}

.file-browser-entry-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-browser-entry-size {
  font-size: 11px;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.file-browser-entry-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-right: 10px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
}

.file-browser-row:hover .file-browser-entry-actions,
.file-browser-entry-actions:focus-within {
  opacity: 1;
  pointer-events: auto;
}

.file-browser-entry-action {
  color: var(--color-text-muted);
}

.file-browser-entry-action:hover {
  color: var(--color-text);
}

.file-browser-entry-action.file-browser-entry-delete:hover {
  color: var(--color-danger);
}

/* File viewer pane */
.file-browser-viewer-pane {
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  flex: none;
  height: 55%;
  min-height: 120px;
  overflow: hidden;
  position: relative;
}

.file-browser-viewer-pane[hidden] {
  display: none;
}

.file-browser-viewer-resize-handle {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  cursor: ns-resize;
  z-index: 10;
  background: transparent;
  transition: background 0.15s ease;
}

.file-browser-viewer-resize-handle:hover,
.file-browser-viewer-resize-handle.dragging {
  background: var(--color-accent);
}

.file-browser-viewer-header {
  padding: 6px 16px;
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
  background: var(--color-bg-secondary);
}

.file-browser-viewer-path {
  font-size: 12px;
  font-family: var(--font-mono);
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-browser-viewer-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

.file-browser-viewer-content {
  flex: 1;
  overflow: auto;
  margin: 0;
  padding: 12px 16px;
  font-size: 12px;
  line-height: 1.6;
  background: var(--color-bg-primary);
  tab-size: 2;
}

.file-browser-viewer-content code {
  font-family: var(--font-mono);
  white-space: pre;
  display: block;
}

/* File browser editor container */
.file-browser-editor-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

.file-browser-editor-wrapper {
  flex: 1;
  min-height: 0;
  border: 1px solid var(--color-border);
}

/* File browser markdown render */
.file-browser-markdown-render {
  flex: 1;
  overflow: auto;
  padding: 16px 24px;
  font-size: 14px;
  line-height: 1.7;
  background: var(--color-bg-primary);
}

.file-browser-markdown-render h1,
.file-browser-markdown-render h2,
.file-browser-markdown-render h3,
.file-browser-markdown-render h4,
.file-browser-markdown-render h5,
.file-browser-markdown-render h6 {
  margin-top: 1.2em;
  margin-bottom: 0.4em;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.3;
}

.file-browser-markdown-render h1 { font-size: 1.6em; border-bottom: 1px solid var(--color-border); padding-bottom: 0.3em; }
.file-browser-markdown-render h2 { font-size: 1.35em; border-bottom: 1px solid var(--color-border); padding-bottom: 0.2em; }
.file-browser-markdown-render h3 { font-size: 1.15em; }

.file-browser-markdown-render p {
  margin: 0.6em 0;
}

.file-browser-markdown-render ul,
.file-browser-markdown-render ol {
  margin: 0.5em 0;
  padding-left: 1.8em;
}

.file-browser-markdown-render li {
  margin: 0.2em 0;
}

.file-browser-markdown-render code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  padding: 2px 6px;
  background: var(--color-surface-muted);
  border-radius: 3px;
}

.file-browser-markdown-render pre {
  margin: 0.8em 0;
  padding: 12px 16px;
  background: var(--color-surface-muted);
  border-radius: var(--radius-small);
  overflow-x: auto;
}

.file-browser-markdown-render pre code {
  padding: 0;
  background: none;
  font-size: 12px;
  line-height: 1.5;
}

.file-browser-markdown-render blockquote {
  margin: 0.6em 0;
  padding: 4px 16px;
  border-left: 3px solid var(--color-accent);
  color: var(--color-text-muted);
}

.file-browser-markdown-render table {
  border-collapse: collapse;
  margin: 0.6em 0;
  width: 100%;
}

.file-browser-markdown-render th,
.file-browser-markdown-render td {
  border: 1px solid var(--color-border);
  padding: 6px 12px;
  text-align: left;
}

.file-browser-markdown-render th {
  background: var(--color-surface-muted);
  font-weight: 600;
}

.file-browser-markdown-render a {
  color: var(--color-accent);
  text-decoration: none;
}

.file-browser-markdown-render a:hover {
  text-decoration: underline;
}

.file-browser-markdown-render img {
  max-width: 100%;
  height: auto;
}

.file-browser-markdown-render hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 1em 0;
}

/* File browser image preview */
.file-browser-image-preview {
  flex: 1;
  overflow: auto;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-primary);
}

.file-browser-image-preview img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--radius-small);
}

/* File browser PDF preview */
.file-browser-pdf-preview {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--color-bg-primary);
}

.file-browser-pdf-preview iframe {
  flex: 1;
  width: 100%;
  border: none;
}

/* File browser CSV/TSV preview */
.file-browser-csv-preview {
  flex: 1;
  overflow: auto;
  padding: 0;
  font-size: 12px;
  background: var(--color-bg-primary);
}

.file-browser-csv-preview table {
  border-collapse: collapse;
  width: max-content;
  min-width: 100%;
}

.file-browser-csv-preview th,
.file-browser-csv-preview td {
  border: 1px solid var(--color-border);
  padding: 4px 10px;
  text-align: left;
  white-space: nowrap;
  max-width: 400px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.file-browser-csv-preview th {
  background: var(--color-surface-muted);
  font-weight: 600;
  position: sticky;
  top: 0;
  z-index: 1;
}

.file-browser-csv-preview tbody tr:hover {
  background: var(--color-surface-muted);
}

.file-browser-csv-preview caption {
  padding: 8px 10px;
  font-size: 11px;
  color: var(--color-text-muted);
  text-align: left;
}

.mermaid {
  display: block;
  width: 100%;
  margin: 1rem 0;
  padding: 12px;
  overflow-x: auto;
  text-align: center;
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
}

.mermaid svg {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

.mermaid[data-mermaid-error="true"] {
  text-align: left;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-danger);
}

/* File browser viewer maximized state
   The viewer is moved to <body> via JS when maximized so it escapes the
   panel's transform containing block and truly covers the full viewport. */
.file-browser-viewer-pane.maximized {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10001;
  height: 100% !important;
  width: 100% !important;
  max-height: none;
  min-height: 0;
  border: none;
  background: var(--color-surface);
}

.file-browser-viewer-pane.maximized .file-browser-viewer-resize-handle {
  display: none;
}

.file-browser-viewer-pane.maximized .file-browser-viewer-body {
  flex: 1;
}

.file-browser-viewer-pane.maximized .file-browser-editor-container {
  flex: 1;
}

.file-browser-viewer-pane.maximized .file-browser-editor-wrapper {
  flex: 1;
  height: 100% !important;
}

.file-browser-viewer-pane.maximized .file-browser-editor-wrapper > * {
  flex: 1;
  min-height: 0;
}

.file-browser-viewer-pane.maximized .file-browser-markdown-render {
  flex: 1;
}

.file-browser-viewer-pane.maximized .file-browser-viewer-content {
  flex: 1;
}

.file-browser-viewer-pane.maximized .file-browser-image-preview {
  flex: 1;
}

.file-browser-viewer-pane.maximized .file-browser-pdf-preview {
  flex: 1;
}

.file-browser-viewer-pane.maximized .file-browser-csv-preview {
  flex: 1;
}

/* Dark theme overrides */
:root[data-theme="dark"] .file-browser-panel-content {
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.4);
}

/* Mobile responsive */
@media (max-width: 768px) {
  .file-browser-panel-header {
    flex-wrap: wrap;
  }

  .file-browser-panel {
    width: 100vw;
    max-width: 100vw;
  }

  .file-browser-entry-actions {
    opacity: 1;
    pointer-events: auto;
  }

}

/* ============================================================
   MOBILE UX REFINEMENTS
   ------------------------------------------------------------
   Two layers:
     1) (hover: none) / (pointer: coarse) — any touch device
        (phones AND tablets). Disables hover-only affordances
        so action buttons stay reachable without a cursor.
     2) (max-width: 720px) — phone-sized viewports. Bumps tap
        targets to ≥44px, prevents iOS input zoom, turns full-
        screen modals and a bottom-sheet filter panel.
   These rules live at the end of the stylesheet so they win
   the cascade against the desktop-first rules above.
   ============================================================ */

.mobile-menu-backdrop,
.mobile-menu-sheet-header {
  display: none;
}

/* --- Layer 1: touch devices (no hover available) --- */
@media (hover: none), (pointer: coarse) {
  /* Winner/loser tab corner buttons would otherwise stay at
     opacity:0 forever on touch (see .task-tab-actions-primary
     reveal at :hover). Pin them visible. */
  .task-tab-actions-primary {
    opacity: 1;
    pointer-events: auto;
  }

  /* Comment item edit/delete buttons normally appear on row
     hover only — surface them on touch. */
  .comment-item .comment-actions,
  .comment-actions {
    opacity: 1;
  }

  /* Agent +/- counter buttons sit at opacity:0.3 by default
     and only reach full opacity on hover. Lift the resting
     state so they read as live controls on a phone. */
  .agent-btn-decrement,
  .agent-btn-increment {
    opacity: 0.7;
  }

  /* Agent count badge starts hidden (opacity:0, scale:0.8) and
     only grows when count > 0. Keep that, but ensure the
     surrounding agent-card itself has a visible affordance. */
  .agent-card[data-count="0"] .agent-icon svg {
    opacity: 0.65; /* up from 0.5 — easier to spot on a phone */
  }

  .mobile-objective-drag-source {
    touch-action: pan-y;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
  }

  .mobile-objective-drag-source * {
    -webkit-user-drag: none;
  }

  .mobile-objective-drag-source[draggable="true"] {
    cursor: grab;
  }

  body.objectives-mobile-dragging {
    cursor: grabbing;
  }

  body.objectives-mobile-dragging .mobile-objective-drag-source {
    touch-action: none;
  }
}

/* --- Layer 2: phone-sized viewports (≤ 720px) --- */
/* Keep this paired with MOBILE_MENU_QUERY in mobile-menu-sheet.js. */
@media (max-width: 720px) {

  /* ---- Task detail variant tabs: wrap instead of overflowing ---- */
  .task-tabs {
    flex-wrap: wrap;
    align-items: stretch;
    gap: 8px;
    padding: 10px 0;
    min-width: 0;
  }

  .task-tab {
    flex: 1 1 148px;
    min-width: 136px;
    max-width: 100%;
    justify-content: flex-start;
    padding: 9px 10px;
  }

  .task-tab .task-tab-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* ---- Top bar tap targets ---- */
  .btn-icon-admin,
  .user-avatar-btn {
    min-width: 44px;
    min-height: 44px;
  }

  /* ---- Task board header buttons: 36→44px ---- */
  .task-board-header-actions > .btn-ghost.btn-small,
  .task-board-header-actions > .task-search-wrapper > .btn-ghost.btn-small,
  .task-board-header-actions > .task-filter-wrapper > .btn-ghost.btn-small {
    width: 44px;
    height: 44px;
    min-width: 44px;
  }

  /* The view-mode tabs (Tasks/Objectives) and "+" new objective */
  .view-mode-tab,
  #new-objective-btn {
    min-height: 44px;
  }

  /* ---- Toolbar mini buttons (attach, screenshot, options) ---- */
  .btn-icon-mini {
    min-width: 36px;
    min-height: 36px;
    padding: 8px;
  }

  /* Larger launch button — primary submit action ---- */
  .btn-icon-launch {
    width: 48px;
    height: 48px;
    font-size: 22px;
    flex-shrink: 0;
  }

  /* ---- Agent selector: bigger +/- buttons, no shrink-down ---- */
  .agent-selector {
    /* Allow horizontal scroll if 4 cards don't fit comfortably */
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 4px 6px 4px 2px;
    gap: 8px;
  }
  .agent-selector::-webkit-scrollbar { display: none; }

  .agent-card {
    /* Override the existing scale(0.95) — we want the real size. */
    transform: none;
    flex-shrink: 0;
    padding: 2px 4px;
  }

  .agent-btn-decrement,
  .agent-btn-increment {
    /* Up from 16×28 — both axes now meet a finger-friendly size */
    width: 28px;
    height: 36px;
    font-size: 18px;
  }

  .agent-icon {
    width: 36px;
    height: 36px;
  }

  .agent-icon svg {
    width: 18px;
    height: 18px;
  }

  /* Task tab winner/loser corner buttons — bigger so they can
     actually be tapped without hitting neighbours */
  .task-tab-star,
  .task-tab-loser {
    width: 28px;
    height: 28px;
  }

  /* ---- Task detail floating header ---- */
  .task-sticky-header {
    justify-content: flex-start;
    align-items: stretch;
    gap: 8px;
    row-gap: 8px;
    padding: calc(8px + env(safe-area-inset-top, 0px)) 12px 10px;
    max-height: min(42vh, 220px);
    max-height: min(42dvh, 220px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .sticky-title-section {
    width: 100%;
    min-width: 0;
    gap: 8px;
    font-size: 14px;
  }

  .sticky-agent-info {
    max-width: 46%;
    min-width: 0;
    flex: 0 1 auto;
    padding: 4px 8px;
  }

  .sticky-agent-name,
  .sticky-task-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sticky-tabs-section,
  .sticky-actions-section {
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    justify-content: flex-start;
    padding-bottom: 2px;
  }

  .sticky-tabs-section::-webkit-scrollbar,
  .sticky-actions-section::-webkit-scrollbar {
    display: none;
  }

  .sticky-tabs-section {
    gap: 6px;
    scroll-snap-type: x proximity;
  }

  .task-tab-mini {
    flex: 0 0 auto;
    max-width: 148px;
    min-height: 40px;
    padding: 8px 10px;
    scroll-snap-align: start;
  }

  .task-tab-mini .task-tab-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sticky-latest-activity {
    width: 100%;
    max-width: none;
    min-width: 0;
    padding: 7px 10px;
    gap: 8px;
    border-radius: 10px;
  }

  .sticky-latest-icon {
    width: 24px;
    height: 24px;
    font-size: 14px;
    flex: 0 0 auto;
  }

  .sticky-latest-text {
    min-width: 0;
  }

  .sticky-latest-label {
    display: none;
  }

  .sticky-latest-detail {
    max-width: none;
    font-size: 12px;
  }

  .sticky-actions-section {
    gap: 6px;
    margin-left: 0;
  }

  .sticky-actions-section > * {
    flex: 0 0 auto;
  }

  .sticky-actions-section .status-pill {
    padding: 7px 10px;
    font-size: 12px;
  }

  .sticky-actions-section .btn-small {
    min-height: 40px;
    padding: 7px 10px;
    font-size: 12px;
    white-space: nowrap;
  }

  .sticky-actions-section button#sticky-app-server-dropdown-toggle,
  .sticky-actions-section button#sticky-terminal-dropdown-toggle {
    min-height: 40px !important;
    padding: 7px 8px !important;
  }

  /* ---- Changed file review mode: swipe or step through files ---- */
  .file-diff.maximized .file-diff-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px 10px;
    padding: calc(8px + env(safe-area-inset-top, 0px)) 10px 8px;
    touch-action: pan-y;
  }

  .file-diff.maximized .file-diff-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .file-diff.maximized .file-diff-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    min-width: 0;
  }

  .file-diff.maximized .file-diff-actions .btn-small {
    min-width: 36px;
    min-height: 36px;
    padding: 7px 8px;
  }

  .file-diff.maximized .mobile-file-review-nav {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    align-items: center;
    gap: 8px;
    padding: 6px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-surface-muted);
  }

  .mobile-file-review-btn {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 40px;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    color: var(--color-text);
    background: var(--color-surface);
  }

  .mobile-file-review-btn:disabled {
    opacity: 0.35;
    cursor: default;
  }

  .mobile-file-review-position {
    min-width: 0;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-text-muted);
    font-family: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 12px;
    font-weight: 700;
  }

  .file-diff.maximized .file-diff-content {
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }

  /* ---- Filter pills: tappable height ---- */
  .filter-pill {
    min-height: 40px;
    padding: 8px 14px;
    font-size: 13px;
    border-radius: 20px;
  }

  .filter-options-pills {
    gap: 8px;
  }

  /* ---- iOS zoom prevention: every input needs ≥16px font-size ----
     iOS Safari zooms the viewport when a focused input has font-size <16px.
     Use selectors specific enough to beat the desktop-first declarations
     (e.g. `.instructions-container textarea` and `.field-group.compact select`). */
  .task-name-row input,
  #task-name-input,
  #task-search-input,
  #task-effort-level,
  #task-reasoning-level,
  /* All selects in the model-config menu (Claude/Codex/Grok model + effort).
     Needs the class selector — not the bare `select` below — to out-rank the
     desktop `.options-menu-select-row select { font-size: 12px }` rule, which
     otherwise leaves the model selects at 12px while the effort select (an ID
     above) renders at 16px, so they looked mismatched on mobile. */
  .options-menu-select-row select,
  #filter-environment,
  .filter-select,
  .test-search-input,
  .search-input,
  .instructions-container textarea,
  .field-group.compact select,
  .field-group.compact input,
  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  textarea,
  select {
    font-size: 16px;
  }

  /* ---- Model-config selects: uniform box width ----
     Each native <select> otherwise auto-sizes to its own widest <option>, so
     the Model box (long model names) ended up wider than the Effort box (short
     effort labels, which bottom out at the min-width floor). Pin the label to a
     fixed column and let the select fill the remaining row width, so every box
     lines up at the same width and right edge regardless of its options. */
  .options-menu-select-row label {
    flex: 0 0 7.5rem;
  }
  .options-menu-select-row select {
    flex: 1 1 0;
    min-width: 0;
  }

  /* ---- Full-bleed modals on phones ---- */
  .modal-content {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    border-radius: 0 !important;
    border: none;
  }

  .modal-content > .modal-header {
    /* Sticky header so the title stays put while body scrolls */
    position: sticky;
    top: 0;
    background: var(--color-surface);
    z-index: 5;
    padding: 14px 16px;
  }

  .modal-content > .modal-body {
    padding: 16px;
  }

  .modal-content > .modal-actions {
    /* Sticky action bar pinned to bottom for thumb reach.
       Stack vertically with the primary action on top so it
       sits closer to the natural thumb arc. */
    position: sticky;
    bottom: 0;
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    padding: 12px 16px;
    z-index: 5;
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 8px;
  }

  .modal-content > .modal-actions button {
    width: 100%;
    min-width: 0;
    min-height: 44px;
  }

  /* .modal-footer is the desktop twin of .modal-actions and is the
     dominant footer class — it carries the Approve, Create PR and the
     task.html confirm/stop/delete dialogs. It never got the mobile
     treatment, so on phones its action buttons sat cramped at the end
     of a long scrolling body and could fall below the fold. Give it
     the same proven sticky bottom-bar behaviour: pinned to the bottom
     for thumb reach, full-width 44px buttons, and the primary action
     (declared last in markup) stacked on top via column-reverse. */
  .modal-content > .modal-footer {
    position: sticky;
    bottom: 0;
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    padding: 12px 16px;
    /* Keep the action bar clear of the iOS home indicator. */
    padding-bottom: max(12px, env(safe-area-inset-bottom));
    z-index: 5;
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 8px;
    /* The body is flex:1; don't let it squeeze the bar away. */
    flex-shrink: 0;
  }

  /* Direct-child combinator: stretch only the footer's own action
     buttons to full width. A few footers (e.g. the variant-compare
     modal) nest a flex button group whose row layout must be left
     intact, so we deliberately don't reach descendant buttons here. */
  .modal-content > .modal-footer > button {
    width: 100%;
    min-width: 0;
    min-height: 44px;
  }

  /* Header icon buttons (copy / raw-toggle / maximize) are a 28px
     square on desktop — below the touch-target minimum. Bump the tap
     area to 44px on phones, matching the enlarged close button. Scoped
     to the header so in-body icon buttons keep their compact size. */
  .modal-content > .modal-header .icon-btn {
    min-width: 44px;
    min-height: 44px;
  }

  .modal-close {
    /* Bigger close target */
    min-width: 40px;
    min-height: 40px;
  }

  .template-preview-header {
    gap: 10px;
  }

  .template-preview-body {
    gap: 12px;
  }

  .template-preview-rendered {
    padding: 14px;
    font-size: 14px;
  }

  .template-preview-source {
    font-size: 12px;
  }

  .profound-approve-modal .approve-maximize-btn {
    display: none !important;
  }

  #objective-modal-maximize {
    display: none !important;
  }

  #maximize-activity-detail-modal,
  #maximize-widget-activity-detail-modal {
    display: none !important;
  }

  #activity-detail-modal .activity-detail-nav,
  #widget-activity-detail-modal .activity-detail-nav {
    gap: 2px;
    padding-right: 4px;
  }

  #activity-detail-modal .activity-detail-nav-position,
  #widget-activity-detail-modal .activity-detail-nav-position {
    display: none;
  }

  /* ---- Filter dropdown becomes a bottom sheet on mobile ---- */
  .task-filter-dropdown {
    position: fixed;
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    min-width: 0;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    border-radius: 16px 16px 0 0;
    border-bottom: none;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.18);
    animation: filterDropInMobile 0.2s ease-out;
    z-index: 1100;
    /* Respect iOS home indicator inset */
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }

  @keyframes filterDropInMobile {
    from { transform: translateY(20px); opacity: 0.7; }
    to   { transform: translateY(0);    opacity: 1;   }
  }

  /* Grab handle at top of bottom sheet for visual affordance */
  .task-filter-dropdown::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: var(--color-border);
    margin: 8px auto 4px;
  }

  /* More breathing room inside filter sections at phone widths */
  .task-filter-dropdown .filter-section {
    padding: 14px 16px;
  }
  .task-filter-dropdown .filter-actions {
    padding: 12px 16px;
    border-top: 1px solid var(--color-border);
    position: sticky;
    bottom: 0;
    background: var(--color-surface);
  }

  /* ---- Quick Actions / admin / user dropdowns: full-width sheets ---- */
  .admin-dropdown,
  .user-dropdown {
    position: fixed;
    left: 8px;
    right: 8px;
    top: auto;
    min-width: 0;
    width: auto;
    max-height: 75vh;
    overflow-y: auto;
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
  }

  /* Larger dropdown items so admin/user menus are tappable */
  .dropdown-item {
    min-height: 44px;
    padding: 10px 14px;
  }

  /* ---- Shared mobile menu sheets ---- */
  .mobile-menu-backdrop[hidden] {
    display: none !important;
  }

  .mobile-menu-backdrop {
    position: fixed;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: rgba(15, 23, 42, 0.42);
    z-index: 10001;
    cursor: default;
  }

  :root[data-theme="dark"] .mobile-menu-backdrop {
    background: rgba(0, 0, 0, 0.58);
  }

  .dropdown-menu.mobile-menu-sheet,
  .save-options-menu.mobile-menu-sheet,
  .task-filter-dropdown.mobile-menu-sheet,
  .copy-file-dropdown.mobile-menu-sheet,
  .hidden-sections-dropdown.mobile-menu-sheet {
    position: fixed !important;
    top: auto !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    max-height: 78vh;
    max-height: min(78vh, calc(100dvh - 24px));
    margin: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    transform: none !important;
    color: var(--color-text);
    background: var(--color-surface) !important;
    border: 1px solid var(--color-border) !important;
    border-bottom: 0 !important;
    border-radius: 16px 16px 0 0 !important;
    box-shadow: 0 -16px 44px rgba(15, 23, 42, 0.28) !important;
    z-index: 10002 !important;
    animation: mobileMenuSheetIn 0.18s ease-out;
    padding-bottom: max(8px, env(safe-area-inset-bottom));
    overscroll-behavior: contain;
  }

  .mobile-menu-sheet.mobile-menu-sheet-dragging {
    transition: none !important;
  }

  .mobile-menu-sheet.mobile-menu-sheet-snapping {
    transition: transform 0.16s ease-out;
  }

  @keyframes mobileMenuSheetIn {
    from {
      opacity: 0.78;
      transform: translateY(18px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .mobile-menu-sheet::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    margin: 9px auto 2px;
    border-radius: 999px;
    background: var(--color-border);
  }

  .mobile-menu-sheet-header {
    position: sticky;
    top: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 52px;
    padding: 6px 10px 10px 16px;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    touch-action: none;
  }

  .mobile-menu-sheet-title {
    min-width: 0;
    overflow: hidden;
    color: var(--color-text);
    font-size: 15px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-menu-sheet-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    background: var(--color-surface-muted);
    color: var(--color-text);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
  }

  .mobile-menu-sheet-close:hover,
  .mobile-menu-sheet-close:focus-visible {
    background: var(--color-surface-muted);
    color: var(--color-text);
    outline: none;
  }

  .mobile-menu-sheet .dropdown-item,
  .mobile-menu-sheet .save-options-item {
    min-height: 48px;
    padding: 12px 16px;
    gap: 12px;
    white-space: normal;
  }

  .mobile-menu-sheet .dropdown-item .option-text,
  .mobile-menu-sheet .dropdown-item-text,
  .mobile-menu-sheet .save-options-item span,
  .mobile-menu-sheet .user-menu-item span {
    min-width: 0;
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .mobile-menu-sheet .dropdown-divider {
    margin: 6px 0;
  }

  .mobile-menu-sheet .user-menu-header {
    padding: 14px 16px;
  }

  .mobile-menu-sheet .preference-row {
    min-height: 52px;
  }

  .mobile-menu-sheet .options-menu-section {
    padding: 12px 16px 14px;
  }

  .mobile-menu-sheet .options-menu-select-row {
    gap: 8px;
  }

  .mobile-menu-sheet .filter-section {
    padding: 14px 16px;
  }

  .mobile-menu-sheet .filter-actions {
    position: sticky;
    bottom: 0;
    z-index: 2;
    padding: 12px 16px max(12px, env(safe-area-inset-bottom));
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
  }

  .mobile-menu-sheet .filter-actions .btn-ghost {
    min-height: 44px;
  }

  .mobile-menu-sheet .dropdown-submenu-wrapper {
    position: static;
  }

  .mobile-menu-sheet .dropdown-submenu-toggle {
    width: 100%;
  }

  .mobile-menu-sheet .dropdown-submenu {
    position: static !important;
    max-width: none;
    max-height: 240px;
    margin: 0;
    overflow-y: auto;
    background: var(--color-surface-muted);
    border: 0;
    border-top: 1px solid var(--color-border);
    border-radius: 0;
    box-shadow: none;
  }

  .mobile-menu-sheet .dropdown-submenu .dropdown-item {
    padding-left: 32px;
    background: transparent;
  }

  .mobile-menu-sheet .shortcut-hint,
  .mobile-menu-sheet .primary-hint {
    white-space: nowrap;
  }
}

/* --- Tiny phones (≤ 380px): keep agent cards reachable ---- */
@media (max-width: 380px) {
  /* Override the inherited transform: scale(0.85) so the
     larger touch targets defined above don't get shrunk back
     into unusable territory. */
  .agent-card {
    transform: none;
  }

  /* Compact horizontal scroll, smaller gap */
  .agent-selector {
    gap: 6px;
  }

  /* Brand stays prominent but doesn't hog the row */
  .brand-logo {
    height: 28px !important;
  }
}

/* --- Larger phones / small tablets in landscape: keep modals
       usable but allow some breathing room (override the
       full-bleed rule when there's enough vertical space) --- */
@media (max-width: 720px) and (orientation: landscape) and (min-height: 480px) {
  .modal-content > .modal-actions {
    flex-direction: row;
    justify-content: flex-end;
  }
  .modal-content > .modal-actions button {
    width: auto;
    min-width: 120px;
  }
  /* Match .modal-actions: in landscape the bottom bar would eat too
     much vertical space stacked, so lay the footer buttons out in a
     row like the desktop layout. */
  .modal-content > .modal-footer {
    flex-direction: row;
    justify-content: flex-end;
  }
  .modal-content > .modal-footer > button {
    width: auto;
    min-width: 120px;
  }
}

/* ============================================================
   MOBILE INDEX UX — consolidated mobile launcher rules
   ------------------------------------------------------------
   This block consolidates two earlier passes:
   - v1 ("Reclaim mobile screen space and add launch FAB")
   - v2 (Substantial mobile overhaul follow-up)

   Themes:
   1) Single-row top bar (brand + avatar) — saves ~75px chrome.
   2) Markdown toolbar collapsible behind an "Aa" toggle —
      saves another ~85px before typing.
   3) Inline "no environments" empty-state, with the env-select
      and standalone Quick Actions row collapsed to a single
      compact strip.
   4) Mobile-only Quick Actions ☰ inside the editor toolbar
      (forwards to #start-actions-btn so the same bottom sheet
      opens via mobile-menu-sheet.js).
   5) Single-row agent steppers (4 equal-flex columns) at
      ≥360px, falling back to a 2x2 grid on tiny phones (≤340px)
      so each card keeps a usable hit target.
   6) Prominent full-width "Launch task" CTA replacing the small
      ➤ icon button. Real DOM text + aria-label for accessibility.
   7) Tasks/Objectives tabs promoted above the icon toolbar
      as a true segmented control.
   8) Mobile launch FAB stays as a fallback when the form has
      scrolled out of view.
   ============================================================ */

/* The mobile-only buttons are inert above the breakpoint. */
.btn-mobile-toolbar-toggle,
.btn-mobile-quick-actions,
.mobile-launcher-summary,
.mobile-launcher-collapse-btn,
.mobile-section-switcher {
  display: none;
}

/* The launch label inside the task launcher's submit button
   (the only `.btn-icon-launch` that has the new label markup).
   Other `.btn-icon-launch` instances (quick-reply, inline
   follow-up, feedback widget) don't carry this span and aren't
   affected by these rules. */
#submit-task-btn .btn-launch-label {
  /* Visually hidden on desktop, but kept in the accessibility
     tree for screen readers (the ➤ glyph alone is sufficient
     visually on desktop). */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 720px) {
  .mobile-launcher-summary[hidden] {
    display: none !important;
  }

  .task-launcher.launcher-collapsed {
    position: sticky;
    top: 0;
    z-index: 60;
  }

  .task-launcher.launcher-collapsed #task-form {
    display: none;
  }

  .task-launcher.launcher-collapsed .mobile-launcher-summary {
    display: block;
  }

  .mobile-launcher-expand-btn {
    width: 100%;
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.96);
    color: var(--color-text);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
    text-align: left;
    cursor: pointer;
  }

  .mobile-launcher-expand-btn:hover,
  .mobile-launcher-expand-btn:focus-visible {
    border-color: rgba(63, 114, 255, 0.35);
    background: var(--color-surface);
    outline: none;
  }

  .mobile-launcher-summary-text {
    min-width: 0;
    display: grid;
    gap: 2px;
  }

  .mobile-launcher-summary-title,
  .mobile-launcher-summary-meta {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-launcher-summary-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text);
  }

  .mobile-launcher-summary-meta {
    font-size: 12px;
    line-height: 1.35;
    color: var(--color-text-muted);
  }

  .mobile-launcher-summary-action {
    flex: 0 0 auto;
    padding: 6px 9px;
    border-radius: 8px;
    background: var(--color-surface-muted);
    color: var(--color-accent);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
  }

  .mobile-launcher-collapse-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    width: 44px;
    min-height: 44px;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
  }

  .mobile-launcher-collapse-btn:hover,
  .mobile-launcher-collapse-btn:focus-visible {
    color: var(--color-text);
    background: var(--color-surface-muted);
    outline: none;
  }

  /* ---- 1) Single-row top bar ------------------------------- */
  .top-bar {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 8px;
  }

  .top-bar .brand {
    flex: 0 1 auto;
    min-width: 0;
  }

  .top-bar .brand .brand-logo {
    height: 32px !important;
  }

  .top-bar .header-actions {
    width: auto;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: 6px;
  }

  /* Tighten layout padding — desktop's 24/32px pushes the
     form below the fold on a phone. */
  main.layout {
    padding: 16px;
    gap: 12px;
  }

  /* Bottom padding for the launcher page only. The 52px FAB
     sits at `bottom: max(16px, safe-area)`, occupying ~68px of
     overlap-territory; we reserve 80px so the FAB can't cover
     the last task-list row when scrolled. */
  main.layout:has(.task-launcher) {
    padding-bottom: calc(80px + env(safe-area-inset-bottom));
  }

  /* ---- 2) Collapsible markdown toolbar --------------------- */
  .instructions-container .markdown-editor-toolbar {
    display: none;
  }

  .instructions-container.show-mobile-toolbar .markdown-editor-toolbar {
    display: flex;
  }

  .btn-mobile-toolbar-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    min-height: 36px;
    padding: 6px 8px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: transparent;
    color: var(--color-text-muted);
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    line-height: 1;
  }

  .btn-mobile-toolbar-toggle:hover,
  .btn-mobile-toolbar-toggle:focus-visible {
    color: var(--color-text);
    background: var(--color-surface-muted);
    outline: none;
  }

  .instructions-container.show-mobile-toolbar .btn-mobile-toolbar-toggle {
    background: var(--color-surface-muted);
    border-color: var(--color-accent);
    color: var(--color-accent);
  }

  /* ---- 3) Inline "no environments" empty state ------------- */
  .single-row-controls:has(#no-env-access-msg) #environment-select {
    display: none;
  }
  .single-row-controls:has(#no-env-access-msg) .field-group:has(#environment-select) {
    display: none;
  }

  #no-env-access-msg {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 !important;
    padding: 10px 12px !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    color: var(--color-text-muted);
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border);
    border-radius: 8px;
  }

  #no-env-access-msg::before {
    content: "ⓘ";
    flex: 0 0 auto;
    font-size: 14px;
    line-height: 1.4;
    color: var(--color-accent);
  }

  /* Env-select keeps the full row width on its own; the
     standalone Quick Actions ☰ is hidden in favor of the
     editor-toolbar one (see section 4). */
  .single-row-controls {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 8px;
  }

  .single-row-controls .flex-item {
    flex: 1 1 220px;
    min-width: 0;
  }

  /* IMPORTANT: hide only the button, not the whole
     .dropdown-container. The container still holds
     #start-actions-menu, and `display: none` on the container
     would remove the menu from the render tree — its mobile
     bottom-sheet `position: fixed` styling can't escape a
     hidden ancestor.

     We also need to reset the earlier mobile rule that
     stretched `.dropdown-container { width: 100% }` so the
     now-empty container doesn't claim a full-width flex row
     next to the env-select. Collapsing it via flex: 0 + width: 0
     keeps the menu render-tree intact while reclaiming the row. */
  .single-row-controls > .dropdown-container {
    width: auto;
    min-width: 0;
    flex: 0 0 0;
  }
  .single-row-controls > .dropdown-container > #start-actions-btn {
    display: none;
  }

  .instructions-container {
    padding: 8px;
    gap: 8px;
  }

  .textarea-controls {
    padding: 6px;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .textarea-controls-left {
    width: 100%;
    gap: 6px;
    flex: 0 0 auto;
  }

  /* ---- 4) Mobile Quick Actions inside the editor toolbar --- */
  .btn-mobile-quick-actions {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    line-height: 1;
  }

  .btn-mobile-quick-actions:hover,
  .btn-mobile-quick-actions:focus-visible {
    color: var(--color-text);
    background: var(--color-surface-muted);
    outline: none;
  }

  .btn-mobile-quick-actions[aria-expanded="true"] {
    background: var(--color-surface-muted);
    border-color: var(--color-accent);
    color: var(--color-accent);
  }

  .btn-mobile-quick-actions svg {
    width: 16px;
    height: 16px;
  }

  .textarea-controls-left > .btn-icon-mini,
  .textarea-controls-left > .options-menu-container > .btn-icon-mini,
  .btn-mobile-toolbar-toggle,
  .btn-mobile-quick-actions {
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    border-radius: 10px;
  }

  /* ---- 5) Agent steppers: single row at ≥ 360px ----------- */
  .agent-selector {
    flex-wrap: nowrap;
    justify-content: space-between;
    width: 100%;
    gap: 4px;
    row-gap: 0;
  }

  .agent-card {
    flex: 1 1 0;
    min-width: 0;
    transform: none;
    padding: 1px;
    gap: 0;
    justify-content: center;
  }

  .agent-card .agent-icon {
    width: 32px;
    height: 32px;
  }

  .agent-card .agent-icon svg {
    width: 18px;
    height: 18px;
    display: block;
  }

  .agent-btn-decrement,
  .agent-btn-increment {
    width: 24px;
    min-width: 24px;
    height: 32px;
    font-size: 16px;
    line-height: 1;
  }

  /* ---- 6) Prominent "Launch task" full-width CTA -----------
     Scoped to #submit-task-btn (the task-launcher submit button)
     so we don't accidentally restyle the other .btn-icon-launch
     instances on the task page (#quick-reply-submit,
     #submit-inline-follow-up) or in the feedback widget. */
  #submit-task-btn.btn-icon-launch {
    width: 100%;
    height: 44px;
    min-height: 44px;
    border-radius: 10px;
    background: var(--color-accent, #2563eb);
    color: #fff;
    border: none;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.25);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 650;
    letter-spacing: 0;
    line-height: 1;
  }

  /* On mobile, the screen-reader-only span becomes the visible
     label. Reset the visually-hidden styling. */
  #submit-task-btn .btn-launch-label {
    position: static;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: nowrap;
    border: 0;
  }

  #submit-task-btn .btn-launch-glyph {
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
  }

  #submit-task-btn.btn-icon-launch[disabled],
  #submit-task-btn.btn-icon-launch:disabled {
    background: var(--color-surface-muted);
    color: var(--color-text-muted);
    box-shadow: none;
    cursor: not-allowed;
  }

  /* ---- 8) Tasks/Objectives tabs as primary nav ------------- */
  .task-board-header {
    padding: 12px 16px 4px;
  }

  .task-board-header-actions {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    row-gap: 8px;
  }

  .task-board-header-actions > .view-mode-tabs {
    order: -1;
    flex: 1 0 100%;
    width: 100%;
    display: flex;
    justify-content: stretch;
    border-radius: 12px;
    padding: 4px;
  }

  .task-board-header-actions > .view-mode-tabs > .view-mode-tab {
    flex: 1 1 0;
    justify-content: center;
    padding: 10px 12px;
    font-size: 14px;
    border-radius: 10px;
  }

  .task-board-header-actions > .btn-ghost.btn-small,
  .task-board-header-actions > .task-search-wrapper > .btn-ghost.btn-small,
  .task-board-header-actions > .task-filter-wrapper > .btn-ghost.btn-small {
    width: 36px;
    height: 36px;
    padding: 0;
    flex: 0 0 auto;
    justify-content: center;
  }

  .task-board-content {
    padding: 0 16px 16px 16px;
  }
}

/* ====== Tiny-phone fallback (≤ 340px): 2x2 agent grid ======
   At very narrow widths the 4 equal-flex agent cards drop below
   a usable size. Wrap to a 2x2 grid so each card keeps its
   minimum width and tap target. The brand logo also tightens
   to keep the avatar reachable. */
@media (max-width: 340px) {
  .top-bar .brand .brand-logo {
    height: 28px !important;
  }

  .agent-selector {
    flex-wrap: wrap;
    row-gap: 6px;
  }

  .agent-selector > .agent-card {
    flex: 1 1 calc(50% - 4px);
    min-width: calc(50% - 4px);
  }

  /* Drop action-bar labels when the row is too narrow to fit text. */
  #toggle-search-btn::after,
  #toggle-filter-btn::after,
  #refresh-tasks-btn::after,
  #toggle-selection-mode-btn::after {
    display: none;
  }
}

/* ====== Tablet / mid-width tweaks (721 – 900px) ====== */
@media (max-width: 900px) and (min-width: 721px) {
  #no-env-access-msg {
    padding: 12px 16px;
    font-size: 14px;
    line-height: 1.5;
  }
}

/* ====== Dark mode mobile tweaks ====== */
@media (max-width: 720px) {
  :root[data-theme="dark"] #submit-task-btn.btn-icon-launch:not([disabled]):not(:disabled) {
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.4);
  }

  :root[data-theme="dark"] #no-env-access-msg {
    background: rgba(148, 163, 184, 0.08);
    border-color: rgba(148, 163, 184, 0.2);
  }

  :root[data-theme="dark"] .mobile-launcher-expand-btn {
    background: rgba(15, 23, 42, 0.96);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.38);
  }

  :root[data-theme="dark"] .mobile-launcher-expand-btn:hover,
  :root[data-theme="dark"] .mobile-launcher-expand-btn:focus-visible {
    background: rgba(17, 28, 47, 0.98);
  }
}

/* ============================================================
   MOBILE TASK BOARD UX
   ------------------------------------------------------------
   Phone-sized index pages need the board controls to stay close
   while the user works through a long task list. These rules keep
   task triage controls sticky, give search a full row when open,
   compress the task-list rail, and turn bulk selection into a
   phone bottom sheet without changing the desktop layout.
   ============================================================ */
@media (max-width: 720px) {
  .task-board {
    border-radius: 14px;
    box-shadow: 0 12px 34px rgba(15, 23, 42, 0.10);
  }

  :root[data-theme="dark"] .task-board {
    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.38);
  }

  .task-board-header {
    position: sticky;
    top: 0;
    z-index: 45;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 10px 12px 8px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 14px 14px 0 0;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
  }

  :root[data-theme="dark"] .task-board-header {
    background: rgba(15, 23, 42, 0.94);
    border-bottom-color: rgba(148, 163, 184, 0.16);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.30);
  }

  .task-board-header-actions {
    width: 100%;
    gap: 6px;
    row-gap: 8px;
  }

  .mobile-section-switcher:not([hidden]) {
    display: flex;
    width: 100%;
    min-width: 0;
    gap: 8px;
    padding: 2px 2px 6px;
    border: 0;
    border-radius: 0;
    background: transparent;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }

  .mobile-section-switcher::-webkit-scrollbar {
    display: none;
  }

  .mobile-section-switcher-btn {
    --mobile-section-accent: var(--color-accent);
    --mobile-section-accent-weak: rgba(63, 114, 255, 0.14);
    --mobile-section-accent-border: rgba(63, 114, 255, 0.50);
    --mobile-section-accent-glow: rgba(63, 114, 255, 0.28);

    appearance: none;
    flex: 1 1 0;
    min-width: 0;
    min-height: 50px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 12px 13px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: var(--color-surface);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.07);
    color: var(--color-text-muted);
    font: inherit;
    letter-spacing: 0;
    line-height: 1;
    text-align: left;
    cursor: pointer;
    position: relative;
    scroll-snap-align: start;
    transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease, color 0.18s ease;
  }

  .mobile-section-switcher-btn::after {
    content: '';
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 6px;
    height: 3px;
    border-radius: 999px;
    background: var(--mobile-section-accent);
    opacity: 0;
    transform: scaleX(0.55);
    transform-origin: center;
    transition: opacity 0.18s ease, transform 0.18s ease;
    filter: drop-shadow(0 6px 16px var(--mobile-section-accent-glow));
  }

  .mobile-section-switcher-btn.status-pinned {
    --mobile-section-accent: var(--color-accent);
    --mobile-section-accent-weak: rgba(63, 114, 255, 0.14);
    --mobile-section-accent-border: rgba(63, 114, 255, 0.50);
    --mobile-section-accent-glow: rgba(63, 114, 255, 0.28);
  }

  .mobile-section-switcher-btn.status-running {
    --mobile-section-accent: var(--color-warning);
    --mobile-section-accent-weak: rgba(244, 183, 64, 0.16);
    --mobile-section-accent-border: rgba(244, 183, 64, 0.50);
    --mobile-section-accent-glow: rgba(244, 183, 64, 0.26);
  }

  .mobile-section-switcher-btn.status-live {
    --mobile-section-accent: var(--color-success);
    --mobile-section-accent-weak: rgba(34, 197, 94, 0.16);
    --mobile-section-accent-border: rgba(34, 197, 94, 0.50);
    --mobile-section-accent-glow: rgba(34, 197, 94, 0.26);
  }

  .mobile-section-switcher-btn.status-all {
    --mobile-section-accent: #f59e0b;
    --mobile-section-accent-weak: rgba(245, 158, 11, 0.14);
    --mobile-section-accent-border: rgba(245, 158, 11, 0.52);
    --mobile-section-accent-glow: rgba(245, 158, 11, 0.26);
  }

  .mobile-section-switcher-btn:hover,
  .mobile-section-switcher-btn:focus-visible {
    outline: none;
    color: var(--color-text);
    background: rgba(15, 23, 42, 0.03);
  }

  .mobile-section-switcher-btn.active {
    transform: translateY(-1px);
    color: var(--color-text);
    background: linear-gradient(180deg, var(--mobile-section-accent-weak), rgba(255, 255, 255, 0));
    border-color: var(--mobile-section-accent-border);
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.65);
  }

  .mobile-section-switcher-btn:focus-visible {
    border-color: var(--mobile-section-accent-border);
    box-shadow: 0 0 0 3px var(--mobile-section-accent-glow), 0 12px 30px rgba(15, 23, 42, 0.12);
  }

  .mobile-section-switcher-btn.active::after {
    opacity: 1;
    transform: scaleX(1);
  }

  .mobile-section-switcher-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
  }

  .mobile-section-switcher-count {
    color: var(--color-text);
    font-size: 20px;
    font-weight: 750;
    line-height: 1;
    letter-spacing: 0;
  }

  :root[data-theme="dark"] .mobile-section-switcher:not([hidden]) {
    background: transparent;
  }

  :root[data-theme="dark"] .mobile-section-switcher-btn {
    background: rgba(17, 28, 47, 0.82);
    border-color: rgba(148, 163, 184, 0.15);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.26);
  }

  :root[data-theme="dark"] .mobile-section-switcher-btn:hover,
  :root[data-theme="dark"] .mobile-section-switcher-btn:focus-visible {
    background: rgba(148, 163, 184, 0.08);
  }

  :root[data-theme="dark"] .mobile-section-switcher-btn.active {
    background: linear-gradient(180deg, var(--mobile-section-accent-weak), rgba(15, 23, 42, 0));
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  }

  .task-board-header-actions > .view-mode-tabs {
    order: -3;
    margin-bottom: 2px;
  }

  .task-board-header-actions > .view-mode-tabs > .view-mode-tab {
    min-height: 40px;
    padding: 9px 10px;
  }

  .task-board-header-actions > .btn-ghost.btn-small,
  .task-board-header-actions > .task-search-wrapper > .btn-ghost.btn-small,
  .task-board-header-actions > .task-filter-wrapper > .btn-ghost.btn-small {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 10px;
    background: var(--color-surface-muted);
    border: 1px solid transparent;
  }

  .task-board-header-actions > .btn-ghost.btn-small:hover,
  .task-board-header-actions > .task-search-wrapper > .btn-ghost.btn-small:hover,
  .task-board-header-actions > .task-filter-wrapper > .btn-ghost.btn-small:hover,
  .task-board-header-actions > .btn-ghost.btn-small:focus-visible,
  .task-board-header-actions > .task-search-wrapper > .btn-ghost.btn-small:focus-visible,
  .task-board-header-actions > .task-filter-wrapper > .btn-ghost.btn-small:focus-visible {
    border-color: rgba(63, 114, 255, 0.28);
    background: rgba(63, 114, 255, 0.10);
  }

  /* ---- Distribute primary action buttons across the row with labels ----
     Replaces the right-aligned icon-only cluster with a full-width
     toolbar so search/filter/refresh/select share space evenly,
     keep ≥44px touch targets, and self-describe via inline labels. */
  .task-board-header-actions > .task-search-wrapper,
  .task-board-header-actions > .task-filter-wrapper,
  .task-board-header-actions > #refresh-tasks-btn,
  .task-board-header-actions > #toggle-selection-mode-btn {
    flex: 1 1 0;
    min-width: 0;
  }

  .task-board-header-actions > .task-search-wrapper > .btn-ghost.btn-small,
  .task-board-header-actions > .task-filter-wrapper > .btn-ghost.btn-small,
  .task-board-header-actions > #refresh-tasks-btn,
  .task-board-header-actions > #toggle-selection-mode-btn {
    width: 100%;
    height: auto;
    min-height: 52px;
    min-width: 0;
    padding: 6px 4px;
    gap: 4px;
    flex-direction: column;
    color: var(--color-text);
  }

  #toggle-search-btn::after,
  #toggle-filter-btn::after,
  #refresh-tasks-btn::after,
  #toggle-selection-mode-btn::after {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2px;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    min-width: 0;
  }

  #toggle-search-btn::after { content: 'Search'; }
  #toggle-filter-btn::after { content: 'Filter'; }
  #refresh-tasks-btn::after { content: 'Refresh'; }
  #toggle-selection-mode-btn::after { content: 'Select'; }

  .task-board.selection-mode #toggle-selection-mode-btn::after {
    content: 'Done';
  }

  /* Objectives view adds collapse/expand/+ buttons; 7 items won't fit
     labeled, so fall back to icon-only when those siblings are visible. */
  .task-board-header-actions:has(> .objectives-only-btn:not([hidden])) #toggle-search-btn::after,
  .task-board-header-actions:has(> .objectives-only-btn:not([hidden])) #toggle-filter-btn::after,
  .task-board-header-actions:has(> .objectives-only-btn:not([hidden])) #refresh-tasks-btn::after,
  .task-board-header-actions:has(> .objectives-only-btn:not([hidden])) #toggle-selection-mode-btn::after {
    display: none;
  }

  .task-board-header-actions:has(> .objectives-only-btn:not([hidden])) > .task-search-wrapper > .btn-ghost.btn-small,
  .task-board-header-actions:has(> .objectives-only-btn:not([hidden])) > .task-filter-wrapper > .btn-ghost.btn-small,
  .task-board-header-actions:has(> .objectives-only-btn:not([hidden])) > #refresh-tasks-btn,
  .task-board-header-actions:has(> .objectives-only-btn:not([hidden])) > #toggle-selection-mode-btn {
    min-height: 44px;
    flex-direction: row;
    padding: 0;
  }

  .task-search-wrapper.search-open {
    order: -2;
    flex: 1 0 100%;
    width: 100%;
  }

  .task-search-wrapper.search-open .task-search-container {
    flex: 1 1 auto;
    width: 100%;
    min-height: 42px;
    animation: none;
  }

  .task-search-wrapper.search-open #task-search-input {
    width: 100%;
    min-width: 0;
    padding: 9px 10px;
  }

  .task-filter-summary,
  .automation-filter-banner {
    margin: 0 12px 10px;
  }

  .task-filter-summary {
    align-items: flex-start;
    gap: 8px;
    padding: 8px;
  }

  .task-filter-summary-label {
    flex: 1 0 100%;
  }

  .task-filter-chips {
    flex-wrap: nowrap;
    min-width: 0;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
  }

  .task-filter-chips::-webkit-scrollbar {
    display: none;
  }

  .task-filter-chip {
    flex: 0 0 auto;
    max-width: 78vw;
  }

  .task-board-content {
    padding: 10px 12px 14px;
    gap: 12px;
  }

  .task-board.selection-mode .task-board-content {
    padding-bottom: calc(14px + var(--bulk-actions-offset, 190px));
  }

  .task-grid {
    gap: 14px;
  }

  .task-stats-cards {
    display: none;
    flex-wrap: nowrap;
    gap: 8px;
    margin: 0 -2px 2px;
    padding: 4px 2px 8px;
    overflow-x: auto;
    background: transparent;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }

  .task-stats-cards::-webkit-scrollbar {
    display: none;
  }

  .stat-card {
    flex: 1 1 calc((100% - 16px) / 3);
    min-width: 0;
    padding: 10px 12px 12px;
    border-radius: 12px;
    background: var(--color-surface);
    border-color: rgba(15, 23, 42, 0.08);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.07);
    scroll-snap-align: start;
  }

  :root[data-theme="dark"] .stat-card {
    background: rgba(17, 28, 47, 0.82);
    border-color: rgba(148, 163, 184, 0.15);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.26);
  }

  .stat-count {
    font-size: 20px;
  }

  .stat-label {
    font-size: 11px;
  }

  .task-section-container {
    margin-top: 0;
  }

  .task-section-grid,
  .task-section-grid.list-view {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    min-width: 0;
  }

  .task-section-grid.list-view .task-tile,
  .task-tile,
  .task-tile.stacked {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    padding: 12px 42px 12px 12px;
    border-radius: 10px;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
  }

  .task-section-grid.list-view .task-tile {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }

  .task-tile:hover,
  .task-tile:focus-visible,
  .task-section-grid.list-view .task-tile:hover {
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
  }

  .task-tile .task-pin-btn {
    top: 5px;
    right: 5px;
    width: 34px;
    height: 34px;
    padding: 7px;
    border-radius: 9px;
    opacity: 0.72;
    background: rgba(255, 255, 255, 0.64);
  }

  :root[data-theme="dark"] .task-tile .task-pin-btn {
    background: rgba(15, 23, 42, 0.66);
  }

  .task-tile .task-pin-btn.pinned {
    background: rgba(63, 114, 255, 0.12);
  }

  .task-tile .task-title,
  .task-section-grid.list-view .task-tile .task-title {
    flex: 0 1 auto;
    flex-wrap: wrap;
    min-width: 0;
    max-width: none;
    width: 100%;
    align-items: flex-start;
    gap: 6px;
    padding-right: 0;
    font-size: 14px;
    line-height: 1.35;
  }

  .task-title .task-title-text {
    flex: 1 1 100%;
    max-width: 100%;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .task-tile .task-automation-pill,
  .task-tile .task-fork-pill {
    max-width: 100%;
    min-width: 0;
    margin-left: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .task-status-label {
    margin-left: 0;
    padding: 2px 7px;
    font-size: 10px;
    line-height: 1.4;
  }

  .task-title .task-time {
    font-size: 11px;
    line-height: 1.4;
  }

  .task-tile .task-meta,
  .task-section-grid.list-view .task-tile .task-meta {
    flex: 0 1 auto;
    min-width: 0;
    max-width: none;
    width: 100%;
    font-size: 12px;
    line-height: 1.4;
    white-space: normal;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .task-tile .task-params,
  .task-section-grid.list-view .task-tile .task-params {
    max-width: none;
    max-height: 46px;
    gap: 4px;
  }

  .task-tile .param-pill {
    max-width: 100%;
    padding: 2px 6px;
    font-size: 11px;
    line-height: 1.35;
  }

  .task-agent-icons {
    max-width: 100%;
    min-width: 0;
    flex-wrap: wrap;
    gap: 5px;
  }

  .task-list-panel {
    max-width: 100vw;
  }

  .task-list-panel-content,
  .task-list-panel-body,
  .task-list-section,
  .task-list-section-content,
  .task-list-item,
  .task-list-item-header,
  .task-list-item-meta {
    min-width: 0;
    max-width: 100%;
  }

  .task-list-item-title {
    white-space: normal;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .task-list-item-meta {
    flex-wrap: wrap;
    gap: 6px;
  }

  .task-list-item-env {
    max-width: 100%;
  }

  .task-list-item-time {
    margin-left: 0;
  }

  .task-agent-icon {
    width: 24px;
    height: 24px;
    border-radius: 7px;
  }

  .task-agent-icon svg {
    width: 13px;
    height: 13px;
  }

  .task-tile .task-running-status {
    gap: 6px;
    min-width: 0;
    max-width: 100%;
  }

  .task-section-grid.list-view .task-tile .task-running-status {
    flex-direction: column;
  }

  .task-section-grid.list-view .task-tile .task-progress {
    width: 100%;
  }

  .task-tile .task-last-activity,
  .task-section-grid.list-view .task-tile .task-last-activity {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 4px 6px;
    overflow: hidden;
  }

  .task-tile .task-last-activity .activity-label {
    max-width: 100%;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .task-tile .task-last-activity .activity-detail {
    flex: 1 1 100%;
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.35;
  }

  .task-tile .task-error-indicator,
  .task-tile .task-queue-position {
    padding: 7px 9px;
    font-size: 12px;
  }

  .task-section-grid.hierarchical-list .task-tile.hierarchy-objective-tile,
  .task-section-grid.list-view .task-tile.hierarchy-objective-tile {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    padding: 8px 48px 8px 8px;
  }

  /* Title takes the remaining row space alongside toggle/checkbox; the
     instructions pill below wraps to its own line. */
  .task-section-grid.hierarchical-list .task-tile.hierarchy-objective-tile > .task-title,
  .task-section-grid.list-view .task-tile.hierarchy-objective-tile > .task-title {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    max-width: none;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    padding-right: 0;
    line-height: 1.25;
  }

  .task-section-grid.hierarchical-list .task-tile.hierarchy-objective-tile > .task-params,
  .task-section-grid.list-view .task-tile.hierarchy-objective-tile > .task-params {
    flex: 1 1 100%;
    margin-left: 34px;
    max-height: 22px;
  }

  .task-section-grid.hierarchical-list .task-tile.hierarchy-objective-tile > .task-params .param-pill,
  .task-section-grid.list-view .task-tile.hierarchy-objective-tile > .task-params .param-pill {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .task-section-grid.hierarchical-list .task-tile.hierarchy-objective-tile > .hierarchy-toggle,
  .task-section-grid.list-view .task-tile.hierarchy-objective-tile > .hierarchy-toggle {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    margin: -2px 0 -2px -2px;
  }

  .task-section-grid.hierarchical-list .task-tile.hierarchy-objective-tile > .task-title .task-title-text,
  .task-section-grid.list-view .task-tile.hierarchy-objective-tile > .task-title .task-title-text {
    flex: 1 1 0;
  }

  .task-section-grid.hierarchical-list .task-tile.hierarchy-objective-tile .task-rename-btn,
  .task-section-grid.hierarchical-list .task-tile.hierarchy-objective-tile .task-add-subobjective-btn,
  .task-section-grid.list-view .task-tile.hierarchy-objective-tile .task-rename-btn,
  .task-section-grid.list-view .task-tile.hierarchy-objective-tile .task-add-subobjective-btn {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
  }

  .task-section-grid.hierarchical-list .task-tile.hierarchy-objective-tile .hierarchy-child-count,
  .task-section-grid.list-view .task-tile.hierarchy-objective-tile .hierarchy-child-count {
    display: none;
  }

  .task-section-grid.hierarchical-list .task-tile.hierarchy-objective-tile > .objective-pin-btn,
  .task-section-grid.list-view .task-tile.hierarchy-objective-tile > .objective-pin-btn {
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
  }

  .task-section-grid.hierarchical-list .task-tile.hierarchy-objective-tile > .objective-pin-btn:hover,
  .task-section-grid.list-view .task-tile.hierarchy-objective-tile > .objective-pin-btn:hover {
    transform: translateY(-50%) scale(1.08);
  }

  .hierarchy-children {
    padding-left: 14px;
  }

  .hierarchy-child {
    padding-left: 10px;
  }

  .mobile-objective-drag-ghost {
    border-radius: 10px;
    background: var(--color-surface);
    outline: 2px solid rgba(63, 114, 255, 0.24);
  }

  .mobile-objective-drag-ghost.task-tile.hierarchy-objective-tile {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    padding: 8px 48px 8px 8px;
  }

  .mobile-objective-drag-ghost.task-tile.hierarchy-objective-tile > .task-title {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    max-width: none;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    padding-right: 0;
    line-height: 1.25;
  }

  .mobile-objective-drag-ghost.task-tile.hierarchy-objective-tile > .task-params {
    flex: 1 1 100%;
    margin-left: 34px;
    max-height: 22px;
  }

  .mobile-objective-drag-ghost.task-tile.hierarchy-objective-tile > .task-params .param-pill {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mobile-objective-drag-ghost.task-tile.hierarchy-objective-tile > .hierarchy-toggle {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    margin: -2px 0 -2px -2px;
  }

  .mobile-objective-drag-ghost.task-tile.hierarchy-objective-tile > .task-title .task-title-text {
    flex: 1 1 0;
  }

  .mobile-objective-drag-ghost.task-tile.hierarchy-objective-tile .task-rename-btn,
  .mobile-objective-drag-ghost.task-tile.hierarchy-objective-tile .task-add-subobjective-btn {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
  }

  .mobile-objective-drag-ghost.task-tile.hierarchy-objective-tile .hierarchy-child-count {
    display: none;
  }

  .mobile-objective-drag-ghost.task-tile.hierarchy-objective-tile > .objective-pin-btn {
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
  }

  .task-section-grid.hierarchical-list.drop-target-hover {
    outline-offset: 2px;
    min-height: 72px;
  }

  .hierarchy-objective-tile.drop-target-hover {
    outline-width: 3px;
    background: rgba(63, 114, 255, 0.16);
  }

  .hierarchy-parent.drop-insert-before::before,
  .hierarchy-parent.drop-insert-after::after {
    height: 4px;
  }

  body.objectives-mobile-dragging .mobile-task-dock {
    opacity: 0;
    pointer-events: none;
  }

  /* Touch devices have no :hover, so reveal action buttons that desktop
     hides until hover. Keep them dim so they don't crowd the title. */
  .task-tile.is-objective .task-add-subobjective-btn,
  .hierarchy-child-task .task-move-to-root-btn,
  .hierarchy-parent[data-depth]:not([data-depth="0"]) .hierarchy-move-to-root-btn,
  .task-tile .task-rename-btn {
    opacity: 0.55;
  }

  .hierarchy-child-count {
    font-size: 10px;
    padding: 2px 6px;
    margin-left: 6px;
  }

  /* Tree connector lines: align with the tighter mobile indent
     (.hierarchy-child padding-left went 16px → 10px). */
  .hierarchy-child::before,
  .hierarchy-child::after {
    left: -5px;
  }

  .hierarchy-child::before {
    width: 10px;
  }

  .bulk-actions-bar {
    left: 8px;
    right: 8px;
    bottom: max(8px, env(safe-area-inset-bottom));
    padding: 10px;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    box-shadow: 0 -10px 34px rgba(15, 23, 42, 0.20);
    transform: translateY(calc(100% + 20px));
  }

  .bulk-actions-bar:not([hidden]) {
    transform: translateY(0);
  }

  .bulk-actions-content {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
  }

  .bulk-selected-count {
    text-align: center;
  }

  .bulk-actions-buttons {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .bulk-actions-buttons .btn-small {
    min-height: 42px;
    justify-content: center;
  }

  #exit-selection-mode-btn {
    grid-column: 1 / -1;
  }
}

@media (max-width: 380px) {
  .stat-card {
    flex-basis: calc((100% - 16px) / 3);
    min-width: 0;
    padding: 9px 8px 11px;
  }

  .task-board-header-actions > .btn-ghost.btn-small,
  .task-board-header-actions > .task-search-wrapper > .btn-ghost.btn-small,
  .task-board-header-actions > .task-filter-wrapper > .btn-ghost.btn-small {
    width: 100%;
    min-width: 0;
  }

  .task-board-header-actions > .task-search-wrapper > .btn-ghost.btn-small,
  .task-board-header-actions > .task-filter-wrapper > .btn-ghost.btn-small,
  .task-board-header-actions > #refresh-tasks-btn,
  .task-board-header-actions > #toggle-selection-mode-btn {
    min-height: 48px;
    padding: 4px 2px;
  }

  .bulk-actions-buttons {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   MOBILE TASK COMMAND DOCK
   ------------------------------------------------------------
   Phone users often work near the bottom of a long task list.
   This dock mirrors the main dashboard actions into thumb reach
   while the existing header controls remain the canonical source
   for behavior.
   ============================================================ */
.mobile-task-dock {
  display: none;
}

.mobile-task-dock-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--color-text-muted);
  font: inherit;
}

@media (max-width: 720px) {
  main.layout:has(.mobile-task-dock) {
    padding-bottom: calc(152px + env(safe-area-inset-bottom));
  }

  .mobile-task-dock {
    position: fixed;
    left: max(8px, env(safe-area-inset-left));
    right: max(8px, env(safe-area-inset-right));
    bottom: max(8px, env(safe-area-inset-bottom));
    z-index: 900;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
    padding: 8px;
    border: 1px solid rgba(217, 222, 235, 0.88);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 -12px 34px rgba(15, 23, 42, 0.18);
    transition: opacity 0.18s ease, transform 0.18s ease;
  }

  :root[data-theme="dark"] .mobile-task-dock {
    border-color: rgba(148, 163, 184, 0.20);
    background: rgba(15, 23, 42, 0.96);
    box-shadow: 0 -14px 38px rgba(0, 0, 0, 0.42);
  }

  .task-board-header-actions > .task-search-wrapper:not(.search-open),
  .task-board-header-actions > .task-filter-wrapper,
  .task-board-header-actions > #refresh-tasks-btn,
  .task-board-header-actions > #toggle-selection-mode-btn {
    display: none;
  }

  .task-board-header-actions > .objectives-only-btn,
  .task-board-header-actions > #new-objective-btn {
    display: none !important;
  }

  .task-board-header-actions > .task-search-wrapper.search-open {
    display: flex;
    order: -2;
    flex: 1 0 100%;
    width: 100%;
  }

  .task-board-header-actions > .task-search-wrapper.search-open > #toggle-search-btn {
    display: none;
  }

  body.mobile-menu-open .mobile-task-dock,
  body.task-selection-mode-active .mobile-task-dock,
  body:has(.task-launcher:not(.launcher-collapsed):focus-within) .mobile-task-dock {
    opacity: 0;
    transform: translateY(calc(100% + 16px));
    pointer-events: none;
  }

  .mobile-task-dock-btn {
    position: relative;
    min-width: 0;
    min-height: 52px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px 2px;
    border-radius: 10px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-task-dock-btn svg {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
  }

  .mobile-task-dock-btn > span:not(.mobile-task-dock-icon-wrap) {
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
    font-weight: 650;
    line-height: 1;
    letter-spacing: 0;
  }

  .mobile-task-dock-btn:hover,
  .mobile-task-dock-btn:focus-visible,
  .mobile-task-dock-btn.active {
    color: var(--color-accent);
    background: rgba(63, 114, 255, 0.10);
    outline: none;
  }

  .mobile-task-dock-btn:active {
    transform: translateY(1px);
  }

  .mobile-task-dock-icon-wrap {
    position: relative;
    display: inline-flex;
  }

  .mobile-task-dock-badge {
    position: absolute;
    top: -8px;
    right: -9px;
    min-width: 17px;
    height: 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    border: 2px solid var(--color-surface);
    border-radius: 999px;
    background: var(--color-accent);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
  }

  :root[data-theme="dark"] .mobile-task-dock-badge {
    border-color: var(--color-surface);
  }

  .scroll-to-top {
    right: auto;
    left: max(16px, env(safe-area-inset-left));
    bottom: calc(86px + env(safe-area-inset-bottom));
    width: 44px;
    height: 48px;
  }

  /* When the user drags the Ask CoderFlow launcher to the left edge it takes
     over the bottom-left corner, so flip scroll-to-top to the right to stay
     clear of it. */
  body.ask-cf-position-left .scroll-to-top {
    left: auto;
    right: max(16px, env(safe-area-inset-right));
  }
}

@media (max-width: 360px) {
  .mobile-task-dock {
    left: max(6px, env(safe-area-inset-left));
    right: max(6px, env(safe-area-inset-right));
    gap: 2px;
    padding: 6px;
  }

  .mobile-task-dock-btn {
    min-height: 48px;
  }

  .mobile-task-dock-btn svg {
    width: 18px;
    height: 18px;
  }

  .mobile-task-dock-btn > span:not(.mobile-task-dock-icon-wrap) {
    font-size: 10px;
  }
}

/* ============================================================
   MOBILE TASK DETAIL COMMAND DOCK
   ------------------------------------------------------------
   Task detail pages are long. This phone-only dock keeps task
   output, changed files, testing, and overflow actions in thumb
   reach while delegating to the existing task detail controls.
   ============================================================ */
.mobile-task-detail-dock {
  display: none;
}

.mobile-task-detail-dock-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--color-text-muted);
  font: inherit;
}

@media (max-width: 720px) {
  body:has(.mobile-task-detail-dock):not(.task-terminal-open) .task-detail {
    padding-bottom: calc(144px + env(safe-area-inset-bottom));
  }

  .mobile-task-detail-dock {
    position: fixed;
    left: max(8px, env(safe-area-inset-left));
    right: max(8px, env(safe-area-inset-right));
    bottom: max(8px, env(safe-area-inset-bottom));
    z-index: 900;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 4px;
    padding: 8px;
    border: 1px solid rgba(217, 222, 235, 0.88);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 -12px 34px rgba(15, 23, 42, 0.18);
    transition: opacity 0.18s ease, transform 0.18s ease;
  }

  :root[data-theme="dark"] .mobile-task-detail-dock {
    border-color: rgba(148, 163, 184, 0.20);
    background: rgba(15, 23, 42, 0.96);
    box-shadow: 0 -14px 38px rgba(0, 0, 0, 0.42);
  }

  body.mobile-menu-open .mobile-task-detail-dock,
  body.task-list-open .mobile-task-detail-dock,
  body.file-browser-open .mobile-task-detail-dock,
  body.task-terminal-open .mobile-task-detail-dock,
  body:has(.quick-reply-expanded:not([hidden]):focus-within) .mobile-task-detail-dock,
  body:has(.inline-follow-up-wrapper:not([hidden]):focus-within) .mobile-task-detail-dock {
    opacity: 0;
    transform: translateY(calc(100% + 16px));
    pointer-events: none;
  }

  .mobile-task-detail-dock-btn {
    position: relative;
    min-width: 0;
    min-height: 52px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px 2px;
    border-radius: 10px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-task-detail-dock-btn svg {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
  }

  .mobile-task-detail-dock-btn > span:not(.mobile-task-detail-dock-icon-wrap) {
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
    font-weight: 650;
    line-height: 1;
    letter-spacing: 0;
  }

  .mobile-task-detail-dock-btn:hover,
  .mobile-task-detail-dock-btn:focus-visible,
  .mobile-task-detail-dock-btn.active {
    color: var(--color-accent);
    background: rgba(63, 114, 255, 0.10);
    outline: none;
  }

  .mobile-task-detail-dock-btn:active {
    transform: translateY(1px);
  }

  .mobile-task-detail-dock-btn.disabled,
  .mobile-task-detail-dock-btn:disabled {
    opacity: 0.46;
    cursor: not-allowed;
    color: var(--color-text-muted);
    background: transparent;
    transform: none;
  }

  .mobile-task-detail-dock-icon-wrap {
    position: relative;
    display: inline-flex;
  }

  .mobile-task-detail-dock-status {
    position: absolute;
    top: -5px;
    right: -6px;
    margin-right: 0;
    border: 2px solid var(--color-surface);
  }

  .mobile-task-detail-dock-badge {
    position: absolute;
    top: -8px;
    right: -9px;
    min-width: 17px;
    height: 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    border: 2px solid var(--color-surface);
    border-radius: 999px;
    background: var(--color-accent);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
  }

  :root[data-theme="dark"] .mobile-task-detail-dock-badge {
    border-color: var(--color-surface);
  }

  body:has(.mobile-task-detail-dock) .task-terminal-restore {
    bottom: calc(86px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 360px) {
  .mobile-task-detail-dock {
    left: max(6px, env(safe-area-inset-left));
    right: max(6px, env(safe-area-inset-right));
    gap: 2px;
    padding: 6px;
  }

  .mobile-task-detail-dock-btn {
    min-height: 48px;
  }

  .mobile-task-detail-dock-btn svg {
    width: 18px;
    height: 18px;
  }

  .mobile-task-detail-dock-btn > span:not(.mobile-task-detail-dock-icon-wrap) {
    font-size: 10px;
  }
}

/* Shared content-nav tab bar (also defined in environments.css; kept here
   so pages that don't load environments.css — users / teams / roles / access —
   pick up the same styling). */
.content-nav-container {
  display: flex;
  align-items: center;
  position: relative;
  gap: 4px;
  margin-bottom: 16px;
}

.content-nav {
  display: flex;
  gap: 6px;
  padding: 0;
  flex: 1;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  border-bottom: 1px solid var(--color-border);
}

.content-nav::-webkit-scrollbar {
  display: none;
}

.content-tab {
  background: none;
  border: none;
  padding: 12px 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
  position: relative;
  text-decoration: none;
}

.content-tab::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--color-accent);
  transform: scaleX(0);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.content-tab:hover {
  color: var(--color-text);
}

.content-tab:hover::after {
  transform: scaleX(0.6);
  opacity: 0.5;
}

.content-tab.active {
  color: var(--color-accent);
  font-weight: 600;
}

.content-tab.active::after {
  transform: scaleX(1);
  opacity: 1;
}

.content-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: 10px;
  font-weight: 600;
  background: var(--color-text-muted);
  color: var(--color-surface);
  border-radius: 9px;
  margin-left: 4px;
  line-height: 1;
}

.content-tab.active .content-tab-badge {
  background: var(--color-accent);
}

/* People & Access — Access (bindings overview) page */
.access-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 16px;
}

.access-toolbar .access-filter {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 180px;
}

.access-toolbar .access-filter label {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.access-toolbar .access-filter input,
.access-toolbar .access-filter select {
  font-size: 14px;
}

.access-toolbar .access-toolbar-spacer {
  flex: 1;
}

.access-subject-cell {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.access-subject-cell .subject-type-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 94, 184, 0.10);
  color: var(--color-accent);
}

.access-subject-cell .subject-type-icon.team {
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
}

.access-subject-cell .subject-name {
  font-weight: 600;
}

.access-subject-cell .subject-meta {
  font-size: 12px;
  color: var(--color-text-secondary);
}

.access-source-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(31, 42, 68, 0.06);
  color: var(--color-text-secondary);
}

:root[data-theme="dark"] .access-source-tag {
  background: rgba(255, 255, 255, 0.06);
}

.access-empty {
  padding: 48px 24px;
  text-align: center;
  color: var(--color-text-secondary);
}

.access-empty h3 {
  margin: 0 0 8px 0;
  color: var(--color-text);
}

/* Add Binding modal — uses standard .modal classes; layout helpers below */
.add-binding-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.add-binding-grid .full-row {
  grid-column: 1 / -1;
}

/* ============================================================
   MOBILE PULL-TO-REFRESH INDICATOR
   ------------------------------------------------------------
   Rendered into <body> by mobile-pull-to-refresh.js and animated
   via inline transforms. Sits below the sticky header but above
   most content. The wrapper is centered horizontally and pinned
   to the top edge; JS slides it down to follow the user's pull.
   ============================================================ */
.mobile-ptr-indicator {
  position: fixed;
  top: max(8px, env(safe-area-inset-top));
  left: 50%;
  z-index: 950;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-50%, -60px, 0);
  will-change: transform, opacity;
}

.mobile-ptr-bubble {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(217, 222, 235, 0.92);
  color: var(--color-accent);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.18);
  transition: background 0.18s ease, color 0.18s ease, transform 0.05s linear;
}

:root[data-theme="dark"] .mobile-ptr-bubble {
  background: rgba(15, 23, 42, 0.96);
  border-color: rgba(148, 163, 184, 0.28);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}

.mobile-ptr-bubble .mobile-ptr-arrow,
.mobile-ptr-bubble .mobile-ptr-spinner {
  width: 20px;
  height: 20px;
}

.mobile-ptr-bubble .mobile-ptr-spinner {
  display: none;
  color: var(--color-accent);
  animation: mobilePtrSpin 0.9s linear infinite;
}

.mobile-ptr-indicator.mobile-ptr-ready .mobile-ptr-bubble {
  background: var(--color-accent);
  color: #fff;
  border-color: transparent;
}

.mobile-ptr-indicator.mobile-ptr-reload .mobile-ptr-bubble {
  background: #ea7f1c;
  color: #fff;
  border-color: transparent;
  box-shadow: 0 12px 30px rgba(234, 127, 28, 0.32);
}

:root[data-theme="dark"] .mobile-ptr-indicator.mobile-ptr-reload .mobile-ptr-bubble {
  background: #f59e0b;
  box-shadow: 0 12px 32px rgba(245, 158, 11, 0.42);
}

.mobile-ptr-indicator.mobile-ptr-reload .mobile-ptr-label {
  color: #b9560b;
  border-color: rgba(234, 127, 28, 0.45);
  background: rgba(255, 246, 235, 0.96);
}

:root[data-theme="dark"] .mobile-ptr-indicator.mobile-ptr-reload .mobile-ptr-label {
  color: #fcd34d;
  border-color: rgba(245, 158, 11, 0.5);
  background: rgba(45, 25, 5, 0.92);
}

.mobile-ptr-indicator.mobile-ptr-refreshing.mobile-ptr-reload .mobile-ptr-bubble {
  color: #ea7f1c;
}

.mobile-ptr-indicator.mobile-ptr-refreshing.mobile-ptr-reload .mobile-ptr-spinner {
  color: #ea7f1c;
}

:root[data-theme="dark"] .mobile-ptr-indicator.mobile-ptr-refreshing.mobile-ptr-reload .mobile-ptr-bubble,
:root[data-theme="dark"] .mobile-ptr-indicator.mobile-ptr-refreshing.mobile-ptr-reload .mobile-ptr-spinner {
  color: #f59e0b;
}

.mobile-ptr-indicator.mobile-ptr-refreshing .mobile-ptr-bubble {
  background: rgba(255, 255, 255, 0.98);
  color: var(--color-accent);
  border-color: rgba(217, 222, 235, 0.92);
  transform: none !important;
}

:root[data-theme="dark"] .mobile-ptr-indicator.mobile-ptr-refreshing .mobile-ptr-bubble {
  background: rgba(15, 23, 42, 0.96);
  border-color: rgba(148, 163, 184, 0.28);
}

.mobile-ptr-indicator.mobile-ptr-refreshing .mobile-ptr-arrow {
  display: none;
}

.mobile-ptr-indicator.mobile-ptr-refreshing .mobile-ptr-spinner {
  display: inline-block;
}

.mobile-ptr-label {
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-text-muted);
  border: 1px solid rgba(217, 222, 235, 0.7);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
  min-height: 1em;
}

:root[data-theme="dark"] .mobile-ptr-label {
  background: rgba(15, 23, 42, 0.9);
  color: var(--color-text-muted);
  border-color: rgba(148, 163, 184, 0.22);
}

.mobile-ptr-indicator.mobile-ptr-ready .mobile-ptr-label {
  color: var(--color-accent);
  border-color: rgba(63, 114, 255, 0.4);
}

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

@media (hover: hover) and (pointer: fine) {
  /* Hidden on devices that can't trigger the gesture. JS also
     guards against this, but the CSS guarantees no stray paint. */
  .mobile-ptr-indicator { display: none; }
}

/* ============================================================
   MOBILE LONG-PRESS SELECT
   ------------------------------------------------------------
   Visual press feedback while mobile-long-press-select.js is
   counting toward the long-press threshold. The class is added
   on pointerdown and removed when the gesture fires, is moved
   past the slop, or is released early.
   ============================================================ */
.task-tile.mobile-long-press-active {
  transition: transform 220ms ease, box-shadow 220ms ease;
  transform: scale(0.97);
  box-shadow: 0 0 0 2px rgba(63, 114, 255, 0.35), 0 8px 22px rgba(15, 23, 42, 0.18);
}

:root[data-theme="dark"] .task-tile.mobile-long-press-active {
  box-shadow: 0 0 0 2px rgba(63, 114, 255, 0.55), 0 8px 22px rgba(0, 0, 0, 0.55);
}

@media (hover: hover) and (pointer: fine) {
  .task-tile.mobile-long-press-active {
    transform: none;
    box-shadow: none;
  }
}