/* 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;
}

.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 {
  background: transparent;
}

.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;
}

.task-tab-mini .task-tab-status .task-tab-spinner {
  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));
}

.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);
}

.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;
}

: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;
}

.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;
}

.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;
}

.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;
}

@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(640px, 85vh);
  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;
}

#tab-launch {
  overflow-y: hidden;
}

#tab-launch.is-expanded {
  overflow-y: auto;
}

#tab-launch .ai-analysis-section {
  margin-bottom: 12px;
}

#tab-launch .judge-quick-summary {
  margin-bottom: 12px;
}

#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));
  }

  #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;
}

.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);
}

/* 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,
  #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;
  }

  /* ---- 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-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;
  }
}

/* ============================================================
   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. */
.mobile-launch-fab,
.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-launch-fab {
    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;
  }

  /* ---- 7) Mobile launch FAB (fallback when scrolled) ------- */
  .mobile-launch-fab {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    right: max(16px, env(safe-area-inset-right));
    bottom: max(16px, env(safe-area-inset-bottom));
    width: 52px;
    height: 52px;
    border: none;
    border-radius: 999px;
    background: var(--color-accent);
    color: white;
    font-size: 24px;
    line-height: 1;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.25),
                0 2px 6px rgba(15, 23, 42, 0.15);
    cursor: pointer;
    z-index: 950;
    opacity: 0;
    transform: translateY(8px) scale(0.95);
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
  }

  .mobile-launch-fab.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
  }

  .mobile-launch-fab:active {
    transform: translateY(0) scale(0.94);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.25);
  }

  .mobile-launch-fab[disabled] {
    background: var(--color-surface-muted);
    color: var(--color-text-muted);
    box-shadow: none;
    cursor: not-allowed;
  }

  body.task-selection-mode-active .mobile-launch-fab.visible {
    opacity: 0;
    transform: translateY(8px) scale(0.95);
    pointer-events: none;
  }

  /* ---- 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-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,
  body.objectives-mobile-dragging .mobile-launch-fab {
    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;
  }

  body:has(.task-launcher:not(.launcher-collapsed):focus-within) .mobile-launch-fab.visible {
    opacity: 0;
    transform: translateY(8px) scale(0.95);
    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);
  }

  /* Stack the launch FAB above the Ask CoderFlow launcher, which owns the
     bottom-right corner and would otherwise cover the FAB (z-index 1000000 vs
     950). Ride 60px above the launcher (its 48px height + a 12px gap), reusing
     --ask-cf-launcher-bottom so we track its dock-aware offset automatically. */
  .mobile-launch-fab {
    bottom: calc(var(--ask-cf-launcher-bottom, max(16px, env(safe-area-inset-bottom))) + 60px);
  }

  /* Follow the Ask launcher to the left edge when the user drags it there, so
     the FAB keeps sitting above it (and clear of scroll-to-top, which flips to
     the right in that case). */
  body.ask-cf-position-left .mobile-launch-fab {
    right: auto;
    left: max(16px, env(safe-area-inset-left));
  }

  .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;
  }

  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;
  }
}
