/* ─────────────────────────────────────────────────────────────────────────
   Design tokens — single source of truth for the app palette & radii.
   Values match the previous hardcoded literals, so this is visually lossless;
   adjust a token here to retune every element that references it.
   ───────────────────────────────────────────────────────────────────────── */
:root {
  /* Neutrals (slate) */
  --bg: #f8fafc;
  --surface: #ffffff;
  --surface-2: #f1f5f9;
  --border: #e2e8f0;
  --border-strong: #cbd5e1;
  --text: #0f172a;
  --text-strong: #1e293b;
  --text-body: #334155;
  --text-secondary: #475569;
  --text-muted: #64748b;
  --text-faint: #94a3b8;

  /* Primary (blue) */
  --primary: #2563eb;
  --primary-hover: #1d4ed8;
  --primary-light: #3b82f6;
  --primary-dark: #1e40af;
  --primary-bg: #dbeafe;
  --primary-bg-subtle: #eff6ff;
  --primary-border: #93c5fd;

  /* Danger (red) */
  --danger: #dc2626;
  --danger-light: #ef4444;
  --danger-dark: #991b1b;
  --danger-bg: #fee2e2;
  --danger-border: #fca5a5;

  /* Warning (amber) */
  --warning: #f59e0b;
  --warning-hover: #d97706;
  --warning-bg: #fef3c7;

  /* Success (green) */
  --success: #059669;
  --success-bg: #dcfce7;

  /* Radius */
  --radius-sm: 4px;
  --radius: 6px;
  --radius-lg: 8px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--text);
  background: var(--bg);
}

/* Consistent keyboard-focus ring across all interactive elements (accessibility
   + polish). :where() keeps specificity 0 so element-specific styles still win,
   and :focus-visible only shows during keyboard navigation, not mouse clicks. */
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Backprompter logo — masked so the single logo.svg renders in currentColor
   (adapts to light/dark contexts). Use <span class="brand-mark"></span>. */
.brand-mark {
  display: inline-block;
  width: 1.45em;
  height: 1.1em;
  background-color: currentColor;
  -webkit-mask: url(./logo.svg) center / contain no-repeat;
          mask: url(./logo.svg) center / contain no-repeat;
  vertical-align: -0.18em;
  flex-shrink: 0;
}

/* Loading Overlay */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.95);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  gap: 16px;
}

.loading-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

.loading-overlay p {
  margin: 0;
  font-size: 16px;
  color: var(--text-muted);
  max-width: 420px;
  text-align: center;
  padding: 0 16px;
}

/* Shown in place of the spinner when the workspace could not load. */
.loading-overlay .loading-action {
  padding: 8px 18px;
  border: none;
  border-radius: 8px;
  background: var(--primary);
  color: #fff;
  font-size: 14px;
  cursor: pointer;
}

.app-header, .app-footer {
  background: var(--text);
  color: var(--surface);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-docs-link {
  color: var(--text-faint);
  text-decoration: none;
  font-size: 13px;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--text-body);
  transition: background 0.15s, color 0.15s;
}
.nav-docs-link:hover {
  background: var(--text-strong);
  color: var(--surface);
}
.app-header h1 { margin: 0; font-size: 18px; }
.app-footer { flex: 0 0 auto; }
.header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.sidebar-toggle {
  background: none;
  border: none;
  color: var(--surface);
  font-size: 18px;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
}
.sidebar-toggle:hover {
  background: rgba(255, 255, 255, 0.1);
}
.app-footer { font-size: 12px; }

.config { display: flex; gap: 8px; align-items: center; }
.config input[type="url"] {
  width: 420px;
  max-width: 60vw;
  padding: 8px;
  border-radius: 6px;
  border: 1px solid var(--border-strong);
}
.config button { padding: 8px 10px; border-radius: 6px; border: none; cursor: pointer; }

#appContainer { flex-direction: column; height: 100vh; height: 100dvh; }
.app-header { flex: 0 0 auto; }
.chat-container { display: flex; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.sidebar { width: 300px; flex-shrink: 0; background: var(--surface); border-right: 1px solid var(--border); padding: 12px; overflow-y: auto; }
.chat { flex: 1; min-width: 0; }
.chat-container.sidebar-hidden .sidebar { position: absolute; left: -300px; }
.sidebar { background: var(--surface); border-right: 1px solid var(--border); padding: 12px; overflow-y: auto; }
.sidebar .field { display: grid; gap: 6px; margin-bottom: 12px; }
.sidebar .field.checkbox { grid-template-columns: auto 1fr; align-items: center; }
.sidebar textarea {
  width: 100%; min-height: 100px; resize: vertical; padding: 8px;
  border: 1px solid var(--border-strong); border-radius: 6px; font-family: inherit;
}
.sidebar select, .sidebar input[type="range"], .sidebar input[type="text"], .sidebar input[type="url"] {
  padding: 6px; border: 1px solid var(--border-strong); border-radius: 6px;
}

.profile-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
  margin-bottom: 8px;
}

.profile-actions button {
  padding: 8px 12px;
  border: none;
  border-radius: 6px;
  background: var(--primary);
  color: var(--surface);
  cursor: pointer;
  font-size: 12px;
  transition: background 0.2s;
}

.profile-actions button:hover:not(:disabled) {
  background: var(--primary-hover);
}

.profile-actions button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
  border-bottom: 2px solid var(--border);
}

.tab {
  padding: 8px 12px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-muted);
  transition: all 0.2s;
}

.tab:hover {
  color: var(--primary);
}

.tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
  font-weight: 500;
}

.tab-content {
  padding: 8px 0;
}

.prompt-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px;
  background: var(--bg);
  border-radius: 4px;
  font-size: 12px;
  color: var(--text-muted);
}

.prompt-info-actions {
  display: flex;
  gap: 6px;
}

.prompt-info button {
  padding: 4px 8px;
  font-size: 11px;
  border-radius: 4px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-secondary);
  cursor: pointer;
}

.prompt-info button:hover {
  background: var(--surface-2);
}

.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  align-items: center;
  justify-content: center;
}

.modal.show {
  display: flex;
}

.modal-content {
  background: var(--surface);
  border-radius: 8px;
  width: 90%;
  max-width: 800px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.modal-content.large {
  max-width: 1200px;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}

.modal-header h2 {
  margin: 0;
  font-size: 18px;
  color: var(--text);
}

.modal-close {
  background: none;
  border: none;
  font-size: 24px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}

.modal-close:hover {
  background: var(--surface-2);
}

.modal-body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
}

.modal-body textarea {
  width: 100%;
  font-family: 'Courier New', monospace;
  font-size: 13px;
  padding: 12px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  resize: vertical;
}

.modal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 16px 20px;
  border-top: 1px solid var(--border);
}

.modal-footer-right {
  display: flex;
  gap: 8px;
}

.modal-footer button {
  padding: 8px 16px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  font-size: 14px;
}

.modal-footer button:not(.secondary) {
  background: var(--primary);
  color: var(--surface);
}

.modal-footer button:not(.secondary):not(:disabled):hover {
  background: var(--primary-hover);
}

.modal-footer button.secondary {
  background: var(--border);
  color: var(--text-secondary);
}

.modal-footer button.secondary:not(:disabled):hover {
  background: var(--border-strong);
}

.modal-footer button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: #9ca3af !important;
  color: #6b7280 !important;
}

.modal-footer button.processing {
  background: var(--success) !important;
  color: var(--surface) !important;
  cursor: wait;
}

.chat { display: grid; grid-template-rows: 1fr auto; height: 100%; min-width: 0; overflow: hidden; }
.messages { padding: 16px; min-width: 0; overflow-y: auto; }
.composer { display: grid; grid-template-rows: auto 1fr auto; gap: 8px; padding: 12px; min-width: 0; border-top: 1px solid var(--border); background: var(--surface); }
.composer-header { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px 16px; min-width: 0; }
.stream-toggle { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500; color: var(--text-muted); cursor: pointer; user-select: none; }
.stream-toggle[hidden] { display: none; }
.stream-toggle input { margin: 0; cursor: pointer; }
.agent-selector { display: flex; align-items: center; gap: 6px; font-size: 12px; min-width: 0; max-width: 100%; }
.agent-selector label { font-weight: 500; color: var(--text-muted); }
.agent-selector select { padding: 4px 8px; border: 1px solid var(--border-strong); border-radius: 4px; font-size: 12px; background: var(--surface); min-width: 0; max-width: 100%; }
.composer textarea { width: 100%; padding: 10px; border: 1px solid var(--border-strong); border-radius: 8px; font-family: inherit; }
.prompt-file-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: -2px;
}
.prompt-file-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 4px 8px;
  color: var(--text-body);
}
.prompt-file-chip button {
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1;
  padding: 0;
}
.prompt-file-chip button:hover {
  color: var(--text);
}
.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.actions button { padding: 10px 14px; border-radius: 8px; border: none; cursor: pointer; }
.actions .secondary { background: var(--border); }
.actions button[type="submit"] { background: var(--primary); color: var(--surface); }
.actions button:disabled { opacity: 0.6; cursor: not-allowed; }

.actions .voice-btn {
  background: var(--text);
  color: var(--surface);
}

.actions .voice-btn:hover:not(:disabled) {
  background: #111827;
}

.voice-inline {
  padding: 0 12px 12px;
}

.voice-status {
  font-size: 13px;
  color: var(--text-secondary);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
}

.voice-status.listening {
  border-color: #86efac;
}

.voice-status.speaking {
  border-color: var(--primary-border);
}

.voice-status.error {
  border-color: #fecaca;
}


.msg { display: flex; margin: 8px 0; }
.msg .bubble { padding: 10px 12px; border-radius: 12px; max-width: 80ch; white-space: pre-wrap; word-wrap: break-word; }
.msg.user { justify-content: flex-end; }
.msg.user .bubble { background: var(--primary-bg); }
.msg.assistant { justify-content: flex-start; }
.msg.assistant .bubble { background: var(--border); }
.msg.assistant .bubble p { margin: 0 0 8px 0; }
.msg.assistant .bubble p:last-child { margin-bottom: 0; }
.msg.assistant .bubble pre {
  background: var(--text);
  color: var(--border);
  padding: 10px;
  border-radius: 8px;
  overflow-x: auto;
  white-space: pre;
}
.msg.assistant .bubble code {
  font-family: Consolas, 'Courier New', monospace;
  font-size: 0.92em;
}
.msg.pending .bubble { opacity: 0.8; font-style: italic; }
/* A reply that is arriving word by word reads as normal text, not a placeholder. */
.msg.pending.streaming .bubble { opacity: 1; font-style: normal; }

/* Attachment styles */
.attachment {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 14px;
  color: var(--text-secondary);
}

.attachment:hover {
  background: var(--border);
  border-color: var(--text-faint);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.attachment-icon {
  font-size: 16px;
}

.attachment-text {
  font-weight: 500;
}

/* Sidebar overlays as a drawer in portrait *or* on any narrow viewport.
   Orientation alone misses landscape phones, which have no room for a
   300px in-flow sidebar either. */
.portrait .chat-container { position: relative; }
.portrait .sidebar {
  position: absolute;
  top: 0;
  left: 0;
  width: min(360px, 92vw);
  height: 100%;
  z-index: 10;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  border-right: 1px solid var(--border);
}
.portrait .chat-container.sidebar-shown .sidebar { transform: translateX(0); }

/* Tapping outside the open drawer closes it. */
.sidebar-backdrop { display: none; }
.portrait .chat-container.sidebar-shown .sidebar-backdrop {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 9;
  background: rgba(2, 6, 23, 0.45);
}

@media (prefers-reduced-motion: reduce) {
  .portrait .sidebar { transition: none; }
}

/* ── Narrow-viewport workspace ── */
@media (max-width: 768px) {
  .chat-container { position: relative; }
  .sidebar {
    position: absolute;
    top: 0;
    left: 0;
    width: min(360px, 92vw);
    height: 100%;
    z-index: 10;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    border-right: 1px solid var(--border);
  }
  .chat-container.sidebar-shown .sidebar { transform: translateX(0); }
  .chat-container.sidebar-shown .sidebar-backdrop {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 9;
    background: rgba(2, 6, 23, 0.45);
  }

  .app-header { flex-wrap: wrap; gap: 6px 8px; padding: 10px 12px; }
  .app-header .user-info { flex: 1 1 100%; justify-content: flex-end; gap: 6px; min-width: 0; }
  /* Truncating the email to "pla..." is noise, and it is not actionable —
     Logout already identifies the session. Drop it and let the controls
     sit on one compact row. */
  .app-header #userEmail { display: none; }
  .config input[type="url"] { width: 100%; max-width: 100%; }
  /* Tappable without dominating the header. */
  .sidebar-toggle,
  .logout-btn,
  .billing-badge,
  .nav-docs-link {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    padding: 8px 10px;
    font-size: 13px;
  }
  /* 16px keeps iOS from auto-zooming on focus */
  .sidebar select,
  .sidebar input[type="text"],
  .sidebar input[type="url"],
  .sidebar textarea,
  .composer textarea,
  .modal input,
  .modal textarea,
  .modal select { font-size: 16px; }
}

/* Portrait composer layout */
.portrait .composer { display: flex; flex-direction: column; gap: 10px; }
.portrait .actions { justify-content: center; }

/* Portrait mode: stack profile-actions buttons vertically */
.portrait .profile-actions {
  flex-direction: column;
  width: 100%;
}
.portrait .profile-actions button {
  width: 100%;
}

/* Portrait mode: larger text for mobile readability */
.portrait {
  font-size: 16px;
}
.portrait input, .portrait textarea, .portrait select, .portrait button {
  font-size: 16px;
}
/* 16px exists to stop iOS zooming on input focus — buttons don't need it, and
   at that size the card actions blow their grid columns apart. Keep them
   compact but still a comfortable tap target via padding. */
.portrait .app-actions button,
.portrait .agent-actions button,
.portrait .mock-user-actions button {
  font-size: 13px;
  padding: 10px 8px;
}
.portrait .sidebar textarea {
  font-size: 16px;
}
.portrait .composer textarea {
  font-size: 16px;
}
.portrait .agent-selector select {
  font-size: 14px;
}
.portrait .actions button {
  font-size: 16px;
  padding: 12px 16px;
}
.portrait .sidebar .field label {
  font-size: 16px;
}
.portrait .sidebar select, .portrait .sidebar input[type="range"] {
  font-size: 16px;
}

/* Landscape mode: both sidebar and chat visible with equal width */
.landscape .sidebar {
  width: 50% !important;
  position: relative !important;
  transform: none !important;
  border-right: 1px solid var(--border);
  flex: none !important;
}

.landscape .chat {
  width: 50% !important;
  flex: none !important;
}

/* App and Agent Management Styles */
.section {
  margin-bottom: 20px;
  padding: 12px;
  background: var(--bg);
  border-radius: 8px;
  border: 1px solid var(--border);
}

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

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

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

.create-btn {
  background: #10b981;
  color: var(--surface);
  border: none;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.create-btn:hover:not(:disabled) {
  background: var(--success);
}

.create-btn:disabled {
  background: var(--border-strong);
  cursor: not-allowed;
}

.app-select, .agent-select, .mock-user-select {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--surface);
  font-size: 14px;
}

/* The type-to-filter app picker (app-picker.js); the real <select> is hidden inside it. */
.app-picker {
  position: relative;
}

.app-picker .app-picker-native {
  display: none;
}

.app-picker-input {
  box-sizing: border-box;
  color: var(--text);
  text-overflow: ellipsis;
}

.app-picker-input:focus {
  outline: 2px solid var(--primary);
  outline-offset: -1px;
}

.app-picker-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 50;
  max-height: 320px;
  overflow-y: auto;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.app-picker-option,
.app-picker-empty {
  padding: 7px 8px;
  border-radius: 4px;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-picker-option {
  cursor: pointer;
  color: var(--text);
}

.app-picker-option.active {
  background: var(--border);
}

.app-picker-option.selected {
  font-weight: 600;
}

.app-picker-empty {
  color: var(--text-muted);
}

.app-info, .agent-info, .mock-user-info {
  margin-top: 12px;
  padding: 12px;
  background: var(--surface);
  border-radius: 6px;
  border: 1px solid var(--border);
}

.app-details, .agent-details, .mock-user-details {
  margin-bottom: 12px;
}

.app-details strong, .agent-details strong, .mock-user-details strong {
  display: block;
  font-size: 14px;
  color: var(--text);
  margin-bottom: 4px;
}

.app-details p, .agent-details p, .mock-user-details p {
  margin: 0;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
}

/* A single flex row could not hold six buttons in a 300px sidebar — they
   overflowed and the last ones were clipped. An auto-fitting grid wraps them
   into even columns at whatever width the sidebar happens to be. */
.app-actions, .agent-actions, .mock-user-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: 8px;
}

.edit-btn, .delete-btn, .versions-btn {
  padding: 6px 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  background: var(--surface);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 12px;
  transition: all 0.2s;
}

.edit-btn:hover {
  background: var(--surface-2);
  border-color: var(--text-faint);
}

.delete-btn:hover {
  background: #fef2f2;
  border-color: var(--danger-border);
  color: var(--danger);
}

.versions-btn:hover {
  background: #f0f9ff;
  border-color: #7dd3fc;
  color: #0369a1;
}

/* Modal form styles */
.form-field {
  margin-bottom: 16px;
}

.form-field label {
  display: block;
  margin-bottom: 6px;
  font-weight: 500;
  color: #374151;
  font-size: 14px;
}

.form-field.checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
}

.form-field.checkbox label {
  margin-bottom: 0;
  font-weight: normal;
}

.form-field.checkbox input[type="checkbox"] {
  width: auto;
  margin: 0;
}

.form-field input[type="text"],
.form-field textarea {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-family: inherit;
  font-size: 14px;
}

.form-field input[type="text"]:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.form-field textarea {
  resize: vertical;
  min-height: 80px;
}

.inline-input-action {
  display: flex;
  gap: 8px;
  align-items: center;
}

.inline-input-action input[type="text"] {
  flex: 1;
}

.inline-input-action button {
  width: auto;
  padding: 8px 12px;
  flex-shrink: 0;
}

/* Versions modal layout */
.versions-container {
  display: flex;
  gap: 20px;
  height: 500px;
}

.version-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.version-metadata {
  flex-shrink: 0;
}

.version-metadata h3 {
  margin: 0 0 10px 0;
  font-size: 16px;
  color: var(--text-strong);
}

.metadata-content {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  max-height: 120px;
  overflow-y: auto;
}

.metadata-item {
  margin-bottom: 4px;
  font-size: 13px;
  line-height: 1.35;
}

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

.metadata-item strong {
  color: var(--text-secondary);
  font-weight: 500;
}

.version-prompt {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.version-prompt h3 {
  margin: 0 0 10px 0;
  font-size: 16px;
  color: var(--text-strong);
}

.prompt-content {
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px;
  overflow-y: auto;
}

.prompt-content pre {
  margin: 0;
  white-space: pre-wrap;
  word-wrap: break-word;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 13px;
  line-height: 1.4;
  color: #374151;
}

.versions-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.versions-list h3 {
  margin: 0;
  font-size: 16px;
  color: var(--text-strong);
}

.versions-list-content {
  flex: 1;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
}

/* Versions list */
.version-item {
  padding: 12px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.2s;
}

.version-item:hover {
  background: var(--surface-2);
}

.version-item.selected {
  background: var(--primary-bg);
  border-left: 3px solid var(--primary-light);
}

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

.version-commit {
  font-weight: 500;
  color: var(--text);
  font-size: 14px;
  margin-bottom: 4px;
}

.version-timestamp {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.version-committed-by {
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
}

/* Version action buttons */
#loadSelectedVersionBtn {
  padding: 8px 16px;
  background: var(--primary-light);
  color: var(--surface);
  border: none;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.2s;
}

#loadSelectedVersionBtn:hover:not(:disabled) {
  background: var(--primary);
}

#promoteSelectedVersionBtn {
  padding: 8px 16px;
  background: #10b981;
  color: var(--surface);
  border: none;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.2s;
}

#promoteSelectedVersionBtn:hover:not(:disabled) {
  background: var(--success);
}

#deleteSelectedVersionBtn {
  padding: 8px 16px;
  background: var(--danger-light);
  color: var(--surface);
  border: none;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.2s;
}

#deleteSelectedVersionBtn:hover:not(:disabled) {
  background: var(--danger);
}

#loadSelectedVersionBtn:disabled,
#promoteSelectedVersionBtn:disabled,
#deleteSelectedVersionBtn:disabled {
  background: #9ca3af;
  cursor: not-allowed;
  opacity: 0.6;
}

/* Version selection states */
.version-item.selected {
  background: var(--primary-bg);
  border-left: 3px solid var(--primary-light);
}

.version-item.selected-primary {
  background: var(--primary-bg);
  border-left: 3px solid var(--primary-light);
}

.version-item.selected-secondary {
  background: var(--warning-bg);
  border-left: 3px solid var(--warning);
}

/* Diff styling */
.diff-container {
  width: 100%;
}

.diff-content {
  margin: 0;
  white-space: pre-wrap;
  word-wrap: break-word;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 13px;
  line-height: 1.4;
  color: #374151;
}

.diff-insert {
  background-color: #d1fae5;
  color: #065f46;
}

.diff-delete {
  background-color: var(--danger-bg);
  color: var(--danger-dark);
  text-decoration: line-through;
}

.promote-version-btn {
  background: var(--warning);
  color: var(--surface);
  border: none;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.2s;
}

.promote-version-btn:hover {
  background: var(--warning-hover);
}

.delete-version-btn {
  flex: 1;
  padding: 8px;
  background: var(--danger-light);
  color: var(--surface);
  border: none;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.2s;
}

.delete-version-btn:hover {
  background: var(--danger);
}

.delete-version-btn:disabled {
  background: #9ca3af;
  cursor: not-allowed;
  opacity: 0.6;
}

.version-buttons {
  display: flex;
  flex-direction: row;
  gap: 8px;
  margin-top: 8px;
}

/* Builder section styles */
.section .field input[type="text"] {
  width: 100%;
  padding: 8px;
  margin-bottom: 8px;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
}

.section .field button.primary {
  width: 100%;
  padding: 8px;
  background: var(--primary-light);
  color: var(--surface);
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.section .field button.primary:hover {
  background: var(--primary);
}

/* Routable status indicator */
.routable-status {
  font-size: 12px;
  font-weight: 500;
  padding: 2px 6px;
  border-radius: 3px;
  display: inline-block;
  margin-top: 4px;
}

.routable-status.routable {
  background: var(--success-bg);
  color: #166534;
}

.routable-status.not-routable {
  background: var(--warning-bg);
  color: #92400e;
}

.agent-role-hint { display: block; margin-top: 4px; font-size: 12px; color: var(--text-muted); line-height: 1.4; }

/* Evaluations Styles */
.extra-large {
  max-width: 95vw;
  max-height: 90vh;
  width: 1400px;
}

.evaluations-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding: 12px;
  background: var(--bg);
  border-radius: 6px;
}

#evalCharCount {
  font-size: 14px;
  color: var(--text-muted);
  font-weight: 500;
}

.table-container {
  overflow: auto;
  max-height: calc(90vh - 250px);
  border: 1px solid var(--border);
  border-radius: 6px;
}

.evaluations-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.evaluations-table thead {
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 10;
}

.evaluations-table th {
  padding: 12px 8px;
  text-align: left;
  font-weight: 600;
  color: var(--text-secondary);
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
}

.evaluations-table th.sortable {
  cursor: pointer;
  user-select: none;
}

.evaluations-table th.sortable:hover {
  background: var(--border);
}

.sort-indicator {
  display: inline-block;
  margin-left: 4px;
  color: var(--text-faint);
}

.sort-indicator.asc::after {
  content: '▲';
}

.sort-indicator.desc::after {
  content: '▼';
}

.filter-row th {
  padding: 8px;
  border-bottom: 1px solid var(--border);
}

.filter-input {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  font-size: 13px;
}

.filter-input:focus {
  outline: none;
  border-color: var(--primary);
}

.evaluations-table tbody tr {
  border-bottom: 1px solid var(--border);
}

.evaluations-table tbody tr:hover {
  background: var(--bg);
}

.evaluations-table td {
  padding: 12px 8px;
  max-width: 250px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.evaluations-table td:first-child {
  text-align: center;
  width: 40px;
}

.evaluations-table input[type="checkbox"] {
  cursor: pointer;
}

.response-display {
  padding: 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  max-height: 200px;
  overflow-y: auto;
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.word-count {
  display: block;
  text-align: right;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
}

button.danger {
  background: var(--danger);
  color: var(--surface);
}

button.danger:hover {
  background: #b91c1c;
}

button.danger:disabled {
  background: var(--danger-border);
  cursor: not-allowed;
}

/* Artifact Side Pane */
.artifact-pane {
  position: fixed;
  left: -100%;
  top: 0;
  width: 500px;
  height: 100vh;
  background: var(--surface);
  border-right: 2px solid var(--border);
  box-shadow: 4px 0 16px rgba(0,0,0,0.1);
  transition: left 0.3s ease;
  z-index: 1000;
  display: flex;
  flex-direction: column;
}

.artifact-pane.open {
  left: 0;
}

.artifact-pane-header {
  padding: 16px 20px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.artifact-pane-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
}

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

.action-btn {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  color: var(--text-muted);
  transition: all 0.2s;
}

.action-btn:hover {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--border-strong);
}

.close-pane-btn {
  background: none;
  border: none;
  font-size: 28px;
  cursor: pointer;
  color: var(--text-muted);
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: background-color 0.2s, color 0.2s;
}

.close-pane-btn:hover {
  background: var(--border);
  color: var(--text);
}

.artifact-pane-content {
  flex: 1;
  overflow: auto;
  padding: 20px;
}

.artifact-pane-content pre {
  margin: 0;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Courier New', monospace;
  font-size: inherit;
  line-height: 1.6;
  color: var(--text);
  white-space: pre;
  overflow-x: auto;
}

.artifact-pane-content img {
  max-width: 100%;
  height: auto;
}

.artifact-pane-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
}

.artifact-pane-content table th,
.artifact-pane-content table td {
  border: 1px solid var(--border);
  padding: 8px 12px;
  text-align: left;
}

.artifact-pane-content table th {
  background: var(--bg);
  font-weight: 600;
}

.mermaid-wrapper {
  overflow: auto;
  margin-bottom: 20px;
  width: 100%;
  max-height: 80vh;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

.mermaid {
  display: block;
  width: 100%;
  overflow: visible;
  min-height: 100px; /* Prevent collapsing */
}

.mermaid svg {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

/* Responsive artifact pane */
@media (min-width: 1200px) and (orientation: landscape) {
  .artifact-pane {
    width: 50vw;
  }
}

@media (max-width: 768px) {
  .artifact-pane {
    width: 100%;
    left: -100%;
  }
}

/* Agent Suggestions */
.agent-suggestions {
  position: absolute;
  background: var(--surface);
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  max-height: 200px;
  overflow-y: auto;
  z-index: 1000;
  width: 100%;
}

.agent-suggestions div {
  padding: 8px 12px;
  cursor: pointer;
  border-bottom: 1px solid #eee;
}

.agent-suggestions div:hover,
.agent-suggestions div.selected {
  background: #f8f9fa;
}

.agent-suggestions div:last-child {
  border-bottom: none;
}

/* ===========================
   File Management Modal Styles
   =========================== */

.file-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 10000;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.file-modal-content {
  background: var(--surface);
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  max-width: 1200px;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.file-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
}

.file-modal-header h2 {
  margin: 0;
  font-size: 20px;
  color: var(--text);
}

.file-modal-close {
  background: none;
  border: none;
  font-size: 32px;
  color: var(--text-muted);
  cursor: pointer;
  line-height: 1;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.2s;
}

.file-modal-close:hover {
  background: var(--surface-2);
  color: var(--text);
}

.file-upload-controls {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 24px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.file-upload-section, .url-upload-section {
  display: flex;
  gap: 12px;
  align-items: center;
  flex: 1;
  min-width: 250px;
}

.file-upload-btn {
  background: var(--primary);
  color: var(--surface);
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s;
  white-space: nowrap;
}

.file-upload-btn:hover {
  background: var(--primary-hover);
}

.file-upload-btn:disabled {
  background: var(--text-faint);
  cursor: not-allowed;
}

.file-help-text {
  font-size: 12px;
  color: var(--text-muted);
}

.url-upload-section input[type="url"] {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  font-size: 14px;
}

.url-upload-section input[type="url"]:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.file-main-content {
  display: flex;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}

.file-list-panel {
  width: 350px;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

.file-list-panel h3 {
  margin: 0;
  padding: 16px 20px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.select-all-label {
  font-size: 12px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 500;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.select-all-label input[type="checkbox"] {
  cursor: pointer;
}

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

.file-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
}

.file-checkbox {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.file-item:hover {
  border-color: var(--border-strong);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.file-item.selected {
  border-color: var(--primary);
  background: var(--primary-bg-subtle);
}

.file-icon {
  font-size: 24px;
  flex-shrink: 0;
}

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

.file-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 8px;
}

.kb-badge {
  font-size: 11px;
  padding: 2px 6px;
  background: var(--primary-bg);
  color: var(--primary-dark);
  border-radius: 3px;
  font-weight: 600;
  white-space: nowrap;
}

.file-meta {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

.file-remove {
  background: none;
  border: none;
  color: var(--text-faint);
  font-size: 24px;
  cursor: pointer;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  flex-shrink: 0;
  transition: all 0.2s;
  line-height: 1;
  padding: 0;
}

.file-remove:hover {
  background: var(--danger-bg);
  color: var(--danger);
}

.file-preview-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.file-preview-panel h3 {
  margin: 0;
  padding: 16px 20px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}

.file-preview {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-faint);
  font-size: 14px;
  text-align: center;
  padding: 40px 20px;
}

.preview-content {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 16px;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text);
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
}

.url-preview {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

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

.file-desc-editor {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.file-desc-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.file-desc-row input {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
}

.file-desc-row button {
  flex: none;
}

.file-desc-note {
  font-size: 12px;
  color: var(--text-muted);
}

.url-link {
  color: var(--primary);
  text-decoration: none;
  font-size: 14px;
  word-break: break-all;
  padding: 8px 12px;
  background: var(--surface-2);
  border-radius: 4px;
  display: inline-block;
}

.url-link:hover {
  background: var(--border);
  text-decoration: underline;
}

.pdf-preview, .url-preview {
  text-align: center;
  padding: 40px 20px;
}

.pdf-preview p {
  margin: 8px 0;
  color: var(--text-secondary);
}

.preview-note {
  font-size: 13px;
  color: var(--text-faint);
  font-style: italic;
}

.file-modal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* Wraps onto a second line in a narrow window; the content box clips, so a
     row that didn't wrap lost Replace and Delete off its right edge. */
  flex-wrap: wrap;
  row-gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid var(--border);
  background: var(--bg);
}

.file-modal-footer span {
  font-size: 14px;
  color: var(--text-muted);
  font-weight: 500;
  white-space: nowrap;
}

/* Dragging files over the Files window: the whole window takes an upload,
   and a single file over a row replaces that file. */
.file-modal-content.file-drop-active {
  outline: 2px dashed var(--primary);
  outline-offset: -6px;
}
.file-item.file-drop-target {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
  background: var(--primary-bg);
}

.file-modal-footer button {
  padding: 8px 16px;
  margin-left: 10px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  white-space: nowrap;
}

.file-modal-footer button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.file-modal-footer #addToKBBtn {
  background: var(--primary);
  color: var(--surface);
}

.file-modal-footer #addToKBBtn:hover:not(:disabled) {
  background: var(--primary-hover);
}

.file-modal-footer #removeFromKBBtn {
  background: var(--text-muted);
  color: var(--surface);
}

.file-modal-footer #removeFromKBBtn:hover:not(:disabled) {
  background: var(--text-secondary);
}

.file-modal-footer #deleteFilesBtn {
  background: var(--danger-light);
  color: var(--surface);
}

.file-modal-footer #deleteFilesBtn:hover:not(:disabled) {
  background: var(--danger);
}

/* File item badges */
.kb-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  background: var(--primary-bg);
  color: var(--primary-dark);
  margin-right: 8px;
}

.appdata-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  background: #f3f4f6;
  color: #4b5563;
  margin-right: 8px;
}

/* "Replaced <date>" after a file's new version was swapped in */
.file-replaced-note {
  font-size: 11px;
  color: var(--text-muted, #6b7280);
}

/* Preview button in file list */
.preview-btn {
  padding: 6px 10px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.2s;
  opacity: 0;
  margin-left: auto;
}

.file-item:hover .preview-btn {
  opacity: 1;
}

.preview-btn:hover {
  background: var(--bg);
  border-color: var(--text-faint);
  transform: scale(1.1);
}

/* Loading and error states */
.loading-state, .error-state {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: var(--text-muted);
  font-size: 14px;
}

.error-state {
  color: var(--danger-light);
}

.preview-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: var(--text-secondary);
  font-size: 14px;
  text-align: center;
}

.danger-btn:hover:not(:disabled) {
  background: var(--danger);
  border-color: var(--danger);
}

.secondary-btn {
  background: var(--surface-2);
  color: var(--text-secondary);
}

.secondary-btn:hover {
  background: var(--border);
}

.primary-btn {
  background: var(--primary);
  color: var(--surface);
}

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

/* Responsive */
@media (max-width: 768px) {
  .file-main-content {
    flex-direction: column;
  }

  .file-list-panel {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--border);
    max-height: 40%;
  }

  .file-upload-controls {
    flex-direction: column;
    gap: 16px;
  }
  
  .file-upload-section, .url-upload-section {
    width: 100%;
    min-width: 100%;
  }
}

/* ============================================================
   API Reference Modal
   ============================================================ */

/* Scrollable content area */
.api-ref-content {
  overflow-y: auto;
  max-height: calc(80vh - 180px);
  padding-right: 4px;
}

.api-ref-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 20px;
}

.api-ref-main {
  min-width: 0;
}

.api-wiki-nav {
  position: sticky;
  top: 0;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
}

.api-wiki-nav-title {
  font-size: 0.82em;
  font-weight: 700;
  color: var(--text-body);
  margin-bottom: 4px;
}

.api-wiki-nav a {
  display: block;
  text-decoration: none;
  color: var(--primary-hover);
  font-size: 0.84em;
  padding: 4px 6px;
  border-radius: 5px;
}

.api-wiki-nav a:hover {
  background: var(--primary-bg-subtle);
}

/* Intro block */
.api-ref-intro {
  padding: 10px 14px;
  background: var(--bg);
  border-radius: 6px;
  border: 1px solid var(--border);
  margin-bottom: 18px;
  font-size: 0.88em;
  line-height: 1.6;
}

.api-ref-intro code {
  background: var(--border);
  padding: 2px 5px;
  border-radius: 3px;
  font-size: 0.95em;
}

/* Section */
.api-section {
  margin-bottom: 28px;
}

.api-section-title {
  font-size: 1em;
  font-weight: 700;
  color: var(--text-strong);
  border-bottom: 2px solid var(--border);
  padding-bottom: 6px;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.api-anchor-link {
  text-decoration: none;
  color: var(--primary-light);
  font-weight: 700;
  opacity: 0.4;
}

.api-section:hover .api-anchor-link,
.api-endpoint:hover .api-anchor-link {
  opacity: 1;
}

.api-section-desc {
  font-size: 0.85em;
  color: var(--text-muted);
  margin-bottom: 12px;
  margin-top: 0;
}

.mcp-snippet {
  margin: 4px 0 10px;
  padding: 8px 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: 12px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  user-select: all;
}

/* Deploy modal sections collapse so the dialog opens on one task rather than
   all of them at once. Uses <details>, so everything stays in the DOM and the
   scripts that look these elements up are unaffected. */
.deploy-section > summary {
  cursor: pointer;
  font-size: 1.05em;
  font-weight: 700;
  padding: 4px 0;
  margin: 0 0 8px 0;
  user-select: none;
}

.deploy-section > summary:hover {
  color: var(--accent, #4f46e5);
}

/* Endpoint entry */
.api-endpoint {
  margin-bottom: 16px;
}

.api-endpoint-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}

.api-endpoint-desc {
  font-size: 0.83em;
  color: var(--text-secondary);
  margin: 0 0 8px 0;
}

.api-path {
  font-size: 0.88em;
  font-family: monospace;
  background: var(--surface-2);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--text-strong);
}

/* HTTP method badges */
.api-method {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.75em;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  min-width: 52px;
  text-align: center;
  color: var(--surface);
  flex-shrink: 0;
}

.api-method-post   { background: #16a34a; }
.api-method-get    { background: var(--primary); }
.api-method-put    { background: var(--warning-hover); }
.api-method-delete { background: var(--danger); }
.api-method-—      { background: #6b7280; }

/* Code block */
.api-code-block {
  position: relative;
  background: var(--text);
  border-radius: 6px;
  overflow: hidden;
}

.api-code-block pre {
  margin: 0;
  padding: 14px 14px 14px 14px;
  overflow-x: auto;
  font-size: 0.78em;
  line-height: 1.55;
  color: var(--border);
  font-family: 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
  white-space: pre;
  tab-size: 2;
  max-height: 340px;
  overflow-y: auto;
}

.api-copy-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 3px 10px;
  font-size: 0.75em;
  background: var(--text-body);
  color: var(--border-strong);
  border: 1px solid var(--text-secondary);
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  z-index: 1;
}

.api-copy-btn:hover {
  background: var(--text-secondary);
  color: var(--surface-2);
}

.api-copy-btn.copied {
  background: #16a34a;
  color: var(--surface);
  border-color: #15803d;
}

.api-action-btn {
  padding: 6px 12px;
  font-size: 0.8em;
  background: var(--primary-hover);
  color: var(--surface);
  border: 1px solid var(--primary-dark);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.api-action-btn:hover:not(:disabled) {
  background: var(--primary-dark);
  border-color: #1e3a8a;
}

.api-action-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Deploy dialog, for an editor: owner-only buttons look unavailable but stay
   clickable, so a click can say why (deploy-modal.js). */
#deployModal button.owner-locked {
  opacity: 0.55;
  cursor: not-allowed;
}

.owner-only-notice {
  background: #eff6ff;
  border: 1px solid #93c5fd;
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 16px;
  font-size: 13px;
  color: #1e3a8a;
}

/* Agents table */
.api-agents-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85em;
  margin-top: 4px;
}

.api-agents-table th,
.api-agents-table td {
  text-align: left;
  padding: 7px 10px;
  border-bottom: 1px solid var(--border);
}

.api-agents-table th {
  background: var(--surface-2);
  font-weight: 600;
  color: #374151;
}

.api-agents-table td code {
  background: var(--border);
  padding: 2px 5px;
  border-radius: 3px;
  font-size: 0.95em;
}

.api-agents-table tr:last-child td {
  border-bottom: none;
}

.api-ref-page-body {
  margin: 0;
  background: var(--bg);
}

.api-ref-page-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
}

.api-ref-page-header {
  margin-bottom: 16px;
}

.api-ref-page-header h1 {
  margin: 0;
  font-size: 1.5rem;
  color: var(--text);
}

.api-ref-page-header p {
  margin: 8px 0 0 0;
  color: var(--text-secondary);
  font-size: 0.95rem;
}

.api-ref-standalone-content {
  max-height: none;
  overflow: visible;
  padding-right: 0;
}

@media (max-width: 960px) {
  .api-ref-layout {
    grid-template-columns: 1fr;
  }

  .api-wiki-nav {
    position: static;
  }
}

/* ===== Billing ===== */
.billing-badge {
  background: #1e3a5f;
  color: var(--primary-border);
  border: 1px solid var(--primary-light);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}
.billing-badge:hover { background: var(--primary); color: var(--surface); }
.billing-badge.low-credits { border-color: var(--warning); color: #fbbf24; }

.modal-overlay {
  position: fixed;
  z-index: 2000;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
}
.billing-modal {
  background: var(--surface);
  border-radius: 10px;
  width: 90%;
  max-width: 520px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
  /* overflow:hidden keeps the dark header inside the rounded corners, but on its
     own it clips anything taller than the viewport with no way to reach it. Cap
     the height and let the body scroll under a pinned header instead. */
  overflow: hidden;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}
.billing-modal .modal-header { flex: 0 0 auto; }
.billing-modal #billingModalBody {
  flex: 1 1 auto;
  min-height: 0;   /* without this a flex item refuses to shrink below its content */
  overflow-y: auto;
}
.billing-modal .modal-header {
  background: var(--text);
  color: var(--surface);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.billing-modal .modal-header h2 { margin: 0; font-size: 16px; }
.billing-modal .modal-close {
  background: none; border: none; color: var(--text-faint); font-size: 18px;
  cursor: pointer; padding: 0 4px; line-height: 1;
}
.billing-modal .modal-close:hover { color: var(--surface); }
.billing-body { padding: 18px 20px; display: flex; flex-direction: column; gap: 16px; }
.billing-section { border: 1px solid var(--border); border-radius: 8px; padding: 14px; }
.billing-section h3 { margin: 0 0 10px; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.billing-tier-row { display: flex; align-items: center; justify-content: space-between; }
.billing-tier-name { font-size: 18px; font-weight: 700; color: var(--text); }
.billing-tier-badge { background: var(--primary-bg); color: var(--primary-dark); border-radius: 4px; padding: 2px 8px; font-size: 11px; font-weight: 600; }
.billing-tier-badge.pro { background: #fef9c3; color: #92400e; }
.billing-credits { font-size: 28px; font-weight: 800; color: var(--text); }
.billing-credits-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.billing-usage-row { display: flex; justify-content: space-between; font-size: 13px; color: var(--text-body); padding: 3px 0; }
.billing-usage-bar { height: 6px; background: var(--border); border-radius: 3px; margin-top: 6px; overflow: hidden; }
.billing-usage-fill { height: 100%; background: var(--primary); border-radius: 3px; transition: width 0.3s; }
.billing-usage-fill.warning { background: var(--warning); }
.billing-usage-fill.danger { background: var(--danger-light); }
.billing-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.billing-actions button { flex: 1; min-width: 120px; padding: 8px 12px; border-radius: 6px; border: none; cursor: pointer; font-size: 13px; font-weight: 600; }
.billing-actions .btn-primary { background: var(--primary); color: var(--surface); }
.billing-actions .btn-primary:hover { background: var(--primary-hover); }
.billing-actions .btn-secondary { background: var(--surface-2); color: var(--text-body); border: 1px solid var(--border-strong); }
.billing-actions .btn-secondary:hover { background: var(--border); }
.billing-actions .btn-upgrade { background: var(--warning); color: var(--surface); }
.billing-actions .btn-upgrade:hover { background: var(--warning-hover); }
.billing-input-row { display: flex; gap: 8px; align-items: center; }
.billing-input-row input { flex: 1; padding: 7px 10px; border: 1px solid var(--border-strong); border-radius: 6px; font-size: 14px; }
/* Daily spend chart. One series (the day's total), so no legend and no
   categorical palette — the section heading names what the bars are, and the
   per-category split lives in the totals list and each bar's tooltip. */
.billing-chart {
  display: flex;
  align-items: flex-end;
  gap: 2px;                 /* surface gap between adjacent bars */
  height: 72px;
  margin: 10px 0 4px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 1px;
}
.billing-chart-col {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  display: flex;
  align-items: flex-end;
  cursor: default;
}
/* The column is the hit target; the bar inside it is the mark. */
.billing-chart-col:hover .billing-chart-bar { background: var(--primary-hover); }
.billing-chart-bar {
  width: 100%;
  background: var(--primary);
  border-radius: 4px 4px 0 0;   /* rounded data-end, square on the baseline */
  min-height: 2px;
}
.billing-chart-bar.empty { background: var(--border); min-height: 2px; }
.billing-chart-axis {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-faint);
}
.billing-breakdown { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; }
.billing-breakdown-row { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--text-body); }
/* App names can be long and the amount must stay readable, so the name
   truncates rather than both halves wrapping into each other. */
.billing-breakdown-row > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.billing-breakdown-row > span:last-child { flex: 0 0 auto; text-align: right; }
.billing-breakdown-row.total { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 6px; font-weight: 600; color: var(--text); }
.billing-subhead { font-size: 12px; font-weight: 600; color: var(--text-muted); margin: 14px 0 4px; }
.billing-note { font-size: 11px; color: var(--text-faint); margin-top: 6px; }

/* ── User Authentication modal ── */
.au-block { margin-bottom: 18px; }
.au-block > label { display: block; font-size: 13px; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; }
.au-hint { font-size: 12px; color: var(--text-muted); margin-top: 6px; line-height: 1.5; }
.au-hint code { background: var(--surface-2); padding: 1px 4px; border-radius: 3px; font-size: 11px; }
.au-handoff-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.au-handoff-row input, .au-handoff-row select {
  flex: 1 1 220px; min-width: 0; padding: 7px 10px;
  border: 1px solid var(--border-strong); border-radius: 6px; font-size: 13px;
}
.au-handoff-row select { flex: 0 0 auto; }
.au-handoff-row button {
  flex: 0 0 auto; padding: 7px 14px; border: none; border-radius: 6px;
  background: var(--primary); color: var(--surface); cursor: pointer; font-size: 13px; font-weight: 600;
}
.au-handoff-row button:hover { background: var(--primary-hover); }
.au-handoff-title { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.au-listhead { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.au-linkbtn { background: none; border: none; color: var(--primary); cursor: pointer; font-size: 12px; padding: 4px 0; }
.au-empty { font-size: 13px; color: var(--text-muted); padding: 10px 0; }
.au-row {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 0; border-bottom: 1px solid var(--border);
}
.au-who { min-width: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.au-email { font-size: 13px; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.au-meta { font-size: 11px; color: var(--text-faint); flex-basis: 100%; }
.au-badge { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; padding: 2px 6px; border-radius: 4px; background: var(--surface-2); color: var(--text-muted); }
.au-badge.disabled { background: var(--warning-bg); color: #92400e; }
.au-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.au-actions button {
  padding: 5px 10px; border: 1px solid var(--border-strong); border-radius: 5px;
  background: var(--surface); color: var(--text-secondary); cursor: pointer; font-size: 12px; white-space: nowrap;
}
.au-actions button:hover { background: var(--surface-2); }
.au-actions button.au-danger:hover { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger); }

.billing-msg { font-size: 13px; padding: 8px 12px; border-radius: 6px; }
.billing-msg.success { background: var(--success-bg); color: #166534; }
.billing-msg.error { background: var(--danger-bg); color: var(--danger-dark); }

.au-check { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text-secondary); cursor: pointer; }
.au-check input { width: auto; margin: 0; }

/* RAG picker: a bounded, scrolling list of tickable sources.
   Selectors are .rag-source-list .x rather than .x on its own because
   `.form-field label` sets display:block and a heavier weight, which outranks a
   single class and stacked the checkbox above its text. */
.rag-source-list {
  max-height: 168px;
  overflow-y: auto;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #fff;
  padding: 2px;
}
.rag-source-list .rag-source-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 7px 10px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.35;
  color: #374151;
  cursor: pointer;
}
.rag-source-list .rag-source-row + .rag-source-row {
  border-top: 1px solid #f1f3f5;
}
.rag-source-list .rag-source-row:hover { background: #f3f6fb; }
.rag-source-list .rag-source-check {
  margin: 0;
  flex: none;
  width: 15px;
  height: 15px;
  accent-color: #2563eb;
}
/* Long collection names must wrap inside the row rather than widen it and
   force the whole list to scroll sideways. */
.rag-source-list .rag-source-row span {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}
/* Still configured, but absent from the list — kept visible so it is obvious
   why, rather than silently disappearing. */
.rag-source-list .rag-source-missing span { color: #a25b00; font-style: italic; }
.rag-source-list:empty::after {
  content: "No indexed collections or files yet.";
  display: block;
  padding: 10px;
  color: #9ca3af;
  font-size: 13px;
}

/* Show sources: the button under an answer that used retrieval, and the
   passages it opens in the artifact pane. */
.rag-sources-row { margin-top: 8px; }
.rag-sources-btn {
  font-size: 12px;
  padding: 3px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  background: #f8fafc;
  color: #334155;
  cursor: pointer;
}
.rag-sources-btn:hover { background: #eef2f7; border-color: #94a3b8; }
.rag-sources { line-height: 1.6; color: #1f2937; }
.rag-sources-intro { margin: 0 0 14px; font-size: 0.86em; color: #64748b; }
.rag-source-card {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 12px;
  background: #fff;
}
.rag-source-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  margin-bottom: 8px;
}
.rag-source-index {
  flex: none;
  min-width: 1.5em;
  text-align: center;
  font-size: 0.8em;
  font-weight: 600;
  color: #475569;
  background: #f1f5f9;
  border-radius: 999px;
  padding: 0 6px;
}
.rag-source-name { font-weight: 600; overflow-wrap: anywhere; }
.rag-source-meta { font-size: 0.86em; color: #64748b; }
.rag-source-meta::before { content: "· "; }
.rag-source-body p { margin: 0 0 0.7em; overflow-wrap: anywhere; }
.rag-source-body p:last-child { margin-bottom: 0; }
.rag-source-note { margin: 6px 0 0; font-size: 0.82em; color: #94a3b8; font-style: italic; }

/* Sentences of a passage the answer appears to rest on. */
.rag-sources-status { margin: 0 0 12px; font-size: 0.82em; color: #64748b; font-style: italic; }
.rag-sources-status-done { font-style: normal; }
.rag-sentence-used {
  font-weight: 600;
  color: #0f172a;
  background: #fef3c7;
  border-radius: 3px;
  padding: 0 2px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Passages the answer did not rest on, folded away but kept one click away. */
.rag-sources-fold { margin-top: 4px; }
.rag-sources-toggle {
  font-size: 12px;
  padding: 3px 10px;
  border: 1px dashed #cbd5e1;
  border-radius: 999px;
  background: transparent;
  color: #64748b;
  cursor: pointer;
}
.rag-sources-toggle:hover { border-color: #94a3b8; color: #475569; }
.rag-sources-hidden { margin-top: 10px; }

/* A table in a passage, one markable row each. */
.rag-source-table { border-collapse: collapse; width: 100%; font-size: 0.92em; margin: 0 0 0.7em; }
.rag-source-table th, .rag-source-table td {
  border: 1px solid #e5e7eb;
  padding: 4px 8px;
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}
.rag-source-table th { background: #f8fafc; font-weight: 600; }
.rag-source-table tr.rag-sentence-used td { background: #fef3c7; font-weight: 600; color: #0f172a; }
/* Named -items, not -list: .rag-source-list belongs to the agent modal's
   picker, which is a scrolling box, and a passage's list must not inherit it. */
.rag-source-items { margin: 0 0 0.7em; padding-left: 1.2em; }
.rag-source-items li { margin: 0 0 0.25em; overflow-wrap: anywhere; }
.rag-source-subhead { font-weight: 600; margin: 0 0 0.4em; color: #0f172a; }
.rag-source-body code, .rag-source-items code, .rag-source-table code {
  background: #f1f5f9;
  border-radius: 3px;
  padding: 0 3px;
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 0.92em;
}

/* Delete control on a chat message. Revealed on hover rather than always shown:
   a transcript with a button beside every line reads as a list of controls, and
   the common case is reading, not pruning. It stays reachable by keyboard
   because :focus-within also reveals it. */
.msg { position: relative; }
.msg .msg-delete,
.msg-notice .msg-delete {
  position: absolute;
  top: 2px;
  opacity: 0;
  pointer-events: none;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--bg, #fff);
  color: var(--text-muted, #64748b);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: opacity 0.12s ease;
}
/* Outside the bubble on the side it is anchored to, so it never covers text. */
.msg.user .msg-delete { left: -8px; }
.msg.assistant .msg-delete { right: -8px; }
.msg:hover .msg-delete,
.msg:focus-within .msg-delete,
.msg-notice:hover .msg-delete,
.msg-notice:focus-within .msg-delete { opacity: 1; pointer-events: auto; }
.msg .msg-delete:hover,
.msg-notice .msg-delete:hover { color: #b91c1c; border-color: #b91c1c; }

/* System notices — "Version created successfully", "App deleted", a failed
   profile update. These are the app reporting on itself, and they used to be
   drawn as assistant bubbles, which made them read as things the agent said.
   That matters here: the whole screen exists to judge what an agent replies,
   so the app's own bookkeeping must not share that channel.

   So a notice gets none of a bubble's cues — no background slab, no side, no
   80ch block. It is a short centred line with a small coloured mark, which
   reads as an aside between turns at a glance and never as a reply. */
.msg-notice {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 7px;
  /* Wider vertical breathing room than a bubble: the gap is what separates
     the turns either side of it. */
  margin: 14px auto;
  /* Room for the delete control without it landing on the text. */
  padding: 0 26px;
  max-width: 68ch;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--text-secondary);
}
.msg-notice-mark {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  margin-top: 1px;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}
.msg-notice.success .msg-notice-mark { background: var(--success-bg); color: var(--success); }
.msg-notice.error .msg-notice-mark { background: var(--danger-bg); color: var(--danger-dark); }
.msg-notice.info .msg-notice-mark {
  background: var(--surface-2);
  color: var(--text-faint);
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
}
/* A failure is the one notice worth reading immediately. */
.msg-notice.error .msg-notice-text { color: var(--danger-dark); }
.msg-notice .msg-delete { top: -2px; right: 0; }

/* ---- Copilot (copilot.js) ------------------------------------------------
   A right-hand panel above everything else, so it stays usable while a modal
   is open; open modals and the main layout shift left to make room. Violet
   rather than the primary blue, so its replies never read as the agent's. */
:root {
  --copilot: #7c3aed;
  --copilot-hover: #6d28d9;
  --copilot-bg: #f5f3ff;
  --copilot-border: #c4b5fd;
  --copilot-width: 380px;
}
.copilot-launch {
  font-size: 13px;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--copilot-border);
  background: transparent;
  color: var(--copilot-border);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.copilot-launch:hover,
.copilot-launch[aria-expanded="true"] { background: var(--copilot); border-color: var(--copilot); color: #fff; }

/* At the far left of the window, next to the settings it talks about. */
.copilot-panel {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--copilot-width);
  max-width: 100vw;
  height: 100vh;
  height: 100dvh;
  z-index: 2600;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-right: 1px solid var(--copilot-border);
  box-shadow: 4px 0 16px rgba(0, 0, 0, 0.12);
  transform: translateX(-100%);
  visibility: hidden;
  transition: transform 0.25s ease, visibility 0s linear 0.25s;
}
body.copilot-open .copilot-panel {
  transform: none;
  visibility: visible;
  transition: transform 0.25s ease;
}
@media (min-width: 900px) {
  body.copilot-open #appContainer { padding-left: var(--copilot-width); box-sizing: border-box; }
  body.copilot-open .modal { left: var(--copilot-width); width: calc(100% - var(--copilot-width)); }
}

.copilot-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  background: var(--copilot-bg);
  border-bottom: 1px solid var(--copilot-border);
}
.copilot-title { display: flex; flex-direction: column; line-height: 1.25; }
.copilot-title strong { color: var(--copilot-hover); font-size: 15px; }
.copilot-title span { color: var(--text-muted); font-size: 12px; }
.copilot-header-actions { display: flex; gap: 6px; }
.copilot-icon-btn {
  background: var(--surface);
  border: 1px solid var(--copilot-border);
  color: var(--text-secondary);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 12px;
  cursor: pointer;
}
.copilot-icon-btn:hover { color: var(--copilot-hover); border-color: var(--copilot); }

.copilot-messages {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px;
}
.copilot-empty p { color: var(--text-secondary); margin: 0 0 10px; line-height: 1.45; }
.copilot-starter {
  display: block;
  width: 100%;
  text-align: left;
  margin-bottom: 6px;
  padding: 8px 10px;
  background: var(--copilot-bg);
  border: 1px solid var(--copilot-border);
  border-radius: 8px;
  color: var(--copilot-hover);
  cursor: pointer;
  font-size: 13px;
}
.copilot-starter:hover { border-color: var(--copilot); }
.copilot-window-starters { margin-top: 4px; }
.copilot-window-starters-head { font-size: 12px; color: var(--text-muted); margin: 0 0 6px; }

.copilot-msg { border-radius: 10px; padding: 8px 11px; line-height: 1.45; overflow-wrap: anywhere; }
.copilot-msg.user { align-self: flex-end; max-width: 85%; background: var(--copilot); color: #fff; white-space: pre-wrap; }
.copilot-msg.assistant { align-self: stretch; background: var(--surface-2); color: var(--text-body); }
.copilot-text > :first-child { margin-top: 0; }
.copilot-text > :last-child { margin-bottom: 0; }
.copilot-text pre { overflow-x: auto; max-width: 100%; }

.copilot-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.copilot-action {
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid var(--copilot);
  background: var(--surface);
  color: var(--copilot-hover);
  font-size: 13px;
  cursor: pointer;
}
.copilot-action:hover { background: var(--copilot); color: #fff; }
.copilot-fill { margin-top: 8px; padding: 8px; border: 1px dashed var(--copilot-border); border-radius: 8px; background: var(--surface); }
.copilot-fill summary { cursor: pointer; color: var(--text-secondary); font-size: 13px; margin-bottom: 6px; }
.copilot-fill pre { white-space: pre-wrap; max-height: 220px; overflow-y: auto; font-size: 12px; background: var(--surface-2); padding: 6px; border-radius: 6px; }

.copilot-note { font-size: 12px; color: var(--text-muted); width: 100%; margin-top: 4px; }
.copilot-note.pending { font-style: italic; }
.copilot-note.warn { color: var(--danger-dark); }
.copilot-note.ok { color: var(--success); }

.copilot-composer { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--border); }
.copilot-composer textarea {
  flex: 1 1 auto;
  resize: none;
  font: inherit;
  font-size: 14px;
  padding: 8px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
}
.copilot-composer textarea:focus { outline: 2px solid var(--copilot-border); border-color: var(--copilot); }
.copilot-composer button {
  align-self: flex-end;
  padding: 8px 14px;
  border: none;
  border-radius: 8px;
  background: var(--copilot);
  color: #fff;
  cursor: pointer;
}
.copilot-composer button:disabled { opacity: 0.6; cursor: default; }

/* Where the copilot is pointing. */
.copilot-highlight {
  outline: 3px solid var(--copilot) !important;
  outline-offset: 2px;
  border-radius: 4px;
  animation: copilot-pulse 0.85s ease-in-out 3;
}
@keyframes copilot-pulse {
  50% { outline-color: var(--copilot-border); box-shadow: 0 0 0 6px rgba(124, 58, 237, 0.18); }
}
/* What the copilot's latest reply points at: a steady ring after the pulse,
   until it is clicked or the next question (copilot.js, point). */
.copilot-pointing {
  outline: 3px solid var(--copilot) !important;
  outline-offset: 2px;
  box-shadow: 0 0 0 7px rgba(124, 58, 237, 0.22) !important;
  border-radius: 4px;
}
.copilot-pointer {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  padding: 2px 8px;
  border: 1px dashed var(--copilot-border);
  border-radius: 999px;
  background: transparent;
  color: var(--copilot-hover);
  font-size: 12px;
  cursor: pointer;
}
.copilot-pointer::before { content: "◎"; }
.copilot-pointer:hover { border-style: solid; background: var(--copilot-bg); }

/* The next step, while the copilot is open: a steady ring and a small tag on
   the section to go to (copilot.js, updateGuide). */
.copilot-guide {
  box-shadow: 0 0 0 2px var(--copilot), 0 0 14px 2px rgba(124, 58, 237, 0.35) !important;
  transition: box-shadow 0.3s ease;
}
.copilot-guide-tag {
  margin-left: auto;
  margin-right: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--copilot);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .copilot-highlight { animation: none; }
  .copilot-panel { transition: none; }
  .copilot-guide { transition: none; }
}
.copilot-sources { margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 3px; font-size: 12px; }
.copilot-sources-head { color: var(--text-muted); }
.copilot-sources a { color: var(--copilot-hover); text-decoration: none; overflow-wrap: anywhere; }
.copilot-sources a:hover { text-decoration: underline; }
.copilot-sources a span { color: var(--text-faint); }
/* "Review Agent" in the agent window hands off to the copilot, so it wears its colour. */
.modal-footer button.copilot-review-btn { border-color: var(--copilot-border); color: var(--copilot-hover); }
.modal-footer button.copilot-review-btn:hover { background: var(--copilot-bg); border-color: var(--copilot); }

/* ---- Evaluations section (eval-scores.js) ---------------------------------- */
/* Four rows show; more agents scroll inside the list. Rows have a fixed
   height so "four" holds whatever is in them. */
.eval-scores {
  --eval-row-h: 48px;
  --eval-row-gap: 4px;
  display: flex;
  flex-direction: column;
  gap: var(--eval-row-gap);
  max-height: calc(4 * var(--eval-row-h) + 3 * var(--eval-row-gap));
  overflow-y: auto;
  overscroll-behavior: contain;
}
.eval-scores.scrolls { padding-right: 4px; }
.eval-note { margin: 0 0 6px; font-size: 12px; color: var(--text-muted); line-height: 1.4; }
.eval-row {
  display: flex;
  flex: 0 0 var(--eval-row-h);
  box-sizing: border-box;
  height: var(--eval-row-h);
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  width: 100%;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  cursor: pointer;
  font-size: 13px;
  text-align: left;
  color: var(--text-body);
}
.eval-row:hover { border-color: var(--border-strong); background: var(--surface-2); }
.eval-row.selected { border-color: var(--primary-border); background: var(--primary-bg-subtle); }
.eval-row-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.eval-row-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eval-row-count { color: var(--text-faint); font-size: 11px; }
/* Now / Deployed / Best for one agent. */
.eval-row-chips { display: flex; gap: 4px; min-width: 0; overflow: hidden; white-space: nowrap; }
.eval-chip-label { font-weight: 500; opacity: 0.85; margin-right: 4px; }

.eval-chip {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.eval-chip.good { background: var(--success-bg); color: var(--success); }
.eval-chip.mid { background: var(--warning-bg); color: var(--warning-hover); }
.eval-chip.low { background: var(--danger-bg); color: var(--danger-dark); }
.eval-chip.none { background: var(--surface-2); color: var(--text-faint); font-weight: 500; }
.eval-trend.up { color: var(--success); }
.eval-trend.down { color: var(--danger); }
.eval-trend.same { color: var(--text-faint); }

.eval-section-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.eval-section-actions #viewEvaluationsBtn { grid-column: 1 / -1; }
.eval-section-actions button {
  flex: 1 1 0;
  padding: 8px 10px;
  border: none;
  border-radius: 6px;
  background: var(--primary);
  color: var(--surface);
  cursor: pointer;
  font-size: 12px;
  transition: background 0.2s;
}
.eval-section-actions button:hover:not(:disabled) { background: var(--primary-hover); }
.eval-section-actions button.secondary { background: var(--border); color: var(--text-secondary); }
.eval-section-actions button.secondary:hover:not(:disabled) { background: var(--border-strong); }
/* The test chat has replies nobody has evaluated yet. */
.eval-section-actions button.eval-ready { box-shadow: 0 0 0 3px var(--primary-bg); animation: eval-ready-pulse 1.6s ease-in-out 3; }
@keyframes eval-ready-pulse { 50% { box-shadow: 0 0 0 6px var(--primary-bg-subtle); } }
@media (prefers-reduced-motion: reduce) { .eval-section-actions button.eval-ready { animation: none; } }

/* Mock users live inside Evaluations: they are who plays the user in a test. */
/* Evaluations is the section to come back to, so it gets a blue box, an
   accent stripe and a tinted background instead of the plain grey card. */
.section.eval-section {
  background: var(--primary-bg-subtle);
  border: 1px solid var(--primary-border);
  border-left: 4px solid var(--primary);
  box-shadow: 0 1px 4px rgba(37, 99, 235, 0.12);
}
.eval-section > .section-header h3 { display: flex; align-items: center; gap: 6px; color: var(--primary-dark); }
.section-icon { flex: 0 0 auto; }
.eval-section .eval-row.selected { background: var(--primary-bg); }
.eval-subsection { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--primary-bg); }
.eval-subsection .section-header { margin-bottom: 8px; }
.eval-subsection h4 { margin: 0; font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.mock-user-row { display: flex; gap: 6px; align-items: stretch; }
.mock-user-row .mock-user-select { flex: 1 1 auto; min-width: 0; width: auto; }
.simulate-btn {
  flex: 0 0 auto;
  padding: 6px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text-secondary);
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}
.simulate-btn:hover:not(:disabled) { border-color: var(--primary-border); color: var(--primary); }
.simulate-btn.processing { border-color: var(--danger); color: var(--danger); }

/* Icon-only buttons in the composer row (Download chat as PDF). */
.actions .icon-btn { display: inline-flex; align-items: center; justify-content: center; padding: 8px 10px; color: var(--text-secondary); }

/* The agent window's title row carries the agent's rating. */
.modal-title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.eval-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); }
.eval-badge[hidden] { display: none; }

/* ─────────────────────────────────────────────────────────────────────────
   Dark sidebar. The left pane redefines the palette tokens for itself, so
   every card, select, button and chip inside it turns dark without touching
   their own rules; modals live outside it and stay light. --surface doubles
   as "white text on a coloured button" elsewhere, so those buttons get an
   explicit white below.
   ───────────────────────────────────────────────────────────────────────── */
.sidebar {
  color-scheme: dark;
  --bg: #172136;
  --surface: #1f2b42;
  --surface-2: #2a3852;
  --border: #2b3850;
  --border-strong: #3a4a66;
  --text: #f1f5f9;
  --text-strong: #f8fafc;
  --text-body: #e2e8f0;
  --text-secondary: #cbd5e1;
  --text-muted: #aab6c8;
  --text-faint: #9ba8bb;
  --primary-dark: #bfdbfe;
  --primary-light: #60a5fa;
  --primary-bg: rgba(59, 130, 246, 0.28);
  --primary-bg-subtle: rgba(59, 130, 246, 0.12);
  --primary-border: rgba(96, 165, 250, 0.5);
  --danger: #f87171;
  --danger-dark: #fca5a5;
  --danger-bg: rgba(239, 68, 68, 0.2);
  --danger-border: rgba(248, 113, 113, 0.5);
  --warning-hover: #fcd34d;
  --warning-bg: rgba(245, 158, 11, 0.2);
  --success: #6ee7b7;
  --success-bg: rgba(16, 185, 129, 0.2);
  background: #111a2c;
  border-right-color: #0b1220;
  color: var(--text-body);
}
.sidebar .section { border-color: var(--border); }
.sidebar .section h3,
.sidebar .eval-subsection h4 { display: flex; align-items: center; gap: 7px; letter-spacing: 0.01em; }
.sidebar .section-icon.icon-apps { color: #a78bfa; }
.sidebar .section-icon.icon-agents { color: #2dd4bf; }
.sidebar .section-icon.icon-evals { color: #60a5fa; }
.sidebar .section-icon.icon-mock { color: #7dd3fc; }
.sidebar .section-icon.icon-users { color: #fbbf24; }
.sidebar .section.eval-section {
  background: linear-gradient(180deg, rgba(59, 130, 246, 0.16), rgba(59, 130, 246, 0.07));
  border-left-color: #3b82f6;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}
.sidebar .eval-section > .section-header h3 { color: #dbeafe; }

/* White text on coloured buttons (elsewhere these use var(--surface)). */
.sidebar .profile-actions button,
.sidebar .eval-section-actions button:not(.secondary),
.sidebar .create-btn { color: #fff; }
.sidebar .create-btn { background: #059669; }
.sidebar .create-btn:hover:not(:disabled) { background: #047857; }
.sidebar .create-btn:disabled { background: var(--surface-2); color: var(--text-muted); }

/* Hover colours that were hard-coded for a white background. */
.sidebar .delete-btn:hover { background: var(--danger-bg); }
.sidebar .versions-btn:hover { background: rgba(14, 165, 233, 0.18); border-color: #38bdf8; color: #7dd3fc; }
.sidebar .simulate-btn:hover:not(:disabled) { color: #93c5fd; }
.sidebar .routable-status.routable { color: #6ee7b7; }
.sidebar .routable-status.not-routable { color: #fcd34d; }
.sidebar .routable-status.evaluator { background: rgba(96, 165, 250, 0.2); color: #93c5fd; }
.sidebar .section-icon.icon-evaluators { color: #93c5fd; }

/* Evaluators box: the built-in evaluator and each evaluator agent. */
.evaluator-list { display: flex; flex-wrap: wrap; gap: 6px; }
.evaluator-chip {
  display: inline-flex; align-items: center; max-width: 100%;
  padding: 3px 9px; border-radius: 999px; font-size: 12px; font-family: inherit; line-height: 1.5;
  border: 1px solid rgba(147, 197, 253, 0.45); background: rgba(59, 130, 246, 0.14); color: #dbeafe;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer;
}
button.evaluator-chip:hover { background: rgba(59, 130, 246, 0.3); border-color: #93c5fd; }
button.evaluator-chip:focus-visible { outline: 2px solid #93c5fd; outline-offset: 1px; }
.evaluator-chip.is-builtin { cursor: default; background: transparent; border-style: dashed; color: var(--text-muted); }

/* ─────────────────────────────────────────────────────────────────────────
   Platform panel (creator-panel.js): shown only to Backprompter's creator.
   The modal stays light like every other modal.
   ───────────────────────────────────────────────────────────────────────── */
.sidebar .section-icon.icon-platform { color: #f472b6; }
.creator-modal { max-height: 92vh; }
.creator-title-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.creator-tabs { display: flex; gap: 4px; background: var(--surface-2); border-radius: 8px; padding: 3px; }
.creator-tabs button { border: 0; background: transparent; padding: 5px 14px; border-radius: 6px; font-size: 13px; color: var(--text-muted); cursor: pointer; }
.creator-tabs button.active { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); font-weight: 600; }
.creator-body { overflow-y: auto; padding: 16px 20px 20px; }
.creator-muted { color: var(--text-muted); font-size: 13px; }
.creator-error { color: var(--danger); }
.creator-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.creator-toolbar select, .creator-toolbar input[type="search"] { padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; min-width: 220px; }
.creator-toolbar button { padding: 6px 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); cursor: pointer; font-size: 13px; }
.creator-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; margin-bottom: 16px; }
.creator-tile { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; background: var(--surface); }
.creator-tile-label { font-size: 12px; color: var(--text-muted); }
.creator-tile-value { font-size: 22px; font-weight: 650; color: var(--text); margin-top: 2px; font-variant-numeric: tabular-nums; }
.creator-tile-note { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.creator-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 12px; margin-bottom: 8px; }
.creator-chart { margin: 0; border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px 6px; }
.creator-chart figcaption { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.creator-chart svg { width: 100%; height: auto; display: block; }
.creator-chart .grid { stroke: var(--border); stroke-width: 1; }
.creator-chart .axis { fill: var(--text-muted); font-size: 11px; }
.creator-chart .mark { fill: #2563eb; }
.creator-chart .hit { fill: transparent; }
.creator-chart .creator-bar:hover .hit, .creator-chart .creator-bar:focus .hit { fill: rgba(37, 99, 235, 0.08); }
.creator-chart .creator-bar:focus { outline: none; }
.creator-h3 { font-size: 15px; margin: 18px 0 8px; color: var(--text); }
.creator-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 8px; }
.creator-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.creator-table th, .creator-table td { padding: 7px 10px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; white-space: nowrap; }
.creator-table tbody tr:last-child td { border-bottom: 0; }
.creator-table th { background: var(--surface-2); font-weight: 600; color: var(--text-muted); font-size: 12px; }
.creator-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.creator-table.compact { width: auto; min-width: 360px; border: 1px solid var(--border); border-radius: 8px; }
.creator-sort { border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.creator-email { color: var(--text); }
.creator-chip { display: inline-block; font-size: 11px; padding: 1px 7px; margin: 0 4px 2px 0; border-radius: 999px; background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--border); }
.creator-footnote { margin-top: 14px; }
.creator-group { margin-bottom: 4px; }
.creator-setting { display: grid; grid-template-columns: 220px minmax(220px, 360px) 1fr; gap: 4px 14px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); }
.creator-setting label { font-weight: 600; font-size: 13px; color: var(--text); }
.creator-setting-input input, .creator-setting-input textarea { width: 100%; padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; box-sizing: border-box; }
.creator-setting-input textarea { resize: vertical; line-height: 1.45; }
.creator-setting-help { font-size: 12px; color: var(--text-muted); grid-column: 1 / -1; }
.creator-setting-input { grid-column: 2; grid-row: 1; }
.creator-setting-state { font-size: 12px; grid-column: 3; grid-row: 1; }
.creator-set { color: var(--success); font-weight: 600; }
.creator-link { border: 0; background: none; color: var(--primary); cursor: pointer; padding: 0 0 0 6px; font-size: 12px; text-decoration: underline; }
/* Per-account plan editor under a developer row (creator-panel.js). */
.creator-plan-editor td { background: var(--bg-subtle, #f8fafc); }
.creator-plan-form { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.creator-plan-form label { display: flex; gap: 6px; align-items: center; font-size: 13px; }
.creator-plan-form input { width: 110px; }
.creator-save-row { display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin-top: 14px; }
.creator-save-row button { padding: 8px 16px; border: 0; border-radius: 6px; background: var(--primary); color: #fff; font-weight: 600; cursor: pointer; }
.creator-history { margin: 0; padding-left: 18px; font-size: 13px; }
.creator-history li { margin-bottom: 4px; }
@media (max-width: 760px) {
  .creator-setting { grid-template-columns: 1fr; }
  .creator-setting-input, .creator-setting-state { grid-column: 1; grid-row: auto; }
  .creator-charts { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Evaluations: which scores to show, a batch's progress (batch-evals.js),
   the Batch evaluate form, its results, and one evaluation's conversation.
   ───────────────────────────────────────────────────────────────────────── */
.eval-source { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.eval-source-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.sidebar .eval-source select {
  max-width: 132px;
  padding: 3px 6px;
  font-size: 12px;
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-strong);
}

.batch-status {
  margin-top: 8px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  font-size: 12px;
  color: var(--text-body);
}
.batch-status[hidden] { display: none; }
.batch-status-line { display: flex; align-items: flex-start; gap: 6px; line-height: 1.4; }
.batch-dot { flex: 0 0 auto; width: 8px; height: 8px; margin-top: 4px; border-radius: 50%; background: var(--text-faint); }
.batch-status.is-running .batch-dot { background: var(--primary-light); animation: batch-pulse 1.4s ease-in-out infinite; }
.batch-status.is-done .batch-dot { background: var(--success); }
.batch-status.is-stopped .batch-dot, .batch-status.is-cancelled .batch-dot { background: var(--warning-hover); }
@keyframes batch-pulse { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .batch-status.is-running .batch-dot { animation: none; } }
.batch-progress { height: 4px; margin: 6px 0 2px; border-radius: 2px; background: var(--surface-2); overflow: hidden; }
.batch-progress span { display: block; height: 100%; background: var(--primary-light); transition: width 0.4s ease; }
.batch-status-reason { margin-top: 4px; color: var(--warning-hover); }
.batch-status-actions { display: flex; gap: 6px; margin-top: 6px; }
.batch-status-actions button {
  padding: 3px 8px;
  font-size: 12px;
  border-radius: 4px;
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
}
.batch-status-actions button:hover { border-color: var(--primary-border); color: var(--text); }

.batch-form .batch-intro { margin: 0 0 14px; color: var(--text-secondary); font-size: 14px; line-height: 1.5; }
.batch-form select,
.batch-form input[type="number"] {
  padding: 8px 10px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  background: var(--surface);
}
.batch-form select { width: 100%; }
.batch-form .form-field textarea { font-family: inherit; font-size: 14px; }
.batch-hint { display: block; margin-top: 4px; font-size: 12px; color: var(--text-muted); }
.batch-optional { font-weight: 400; color: var(--text-muted); }
.batch-row { display: grid; grid-template-columns: 1fr 1.4fr; gap: 16px; }
.batch-row input[type="number"] { width: 100%; }
.batch-range { display: flex; align-items: center; gap: 8px; }
.batch-range input[type="number"] { width: 72px; }
.batch-range span { color: var(--text-muted); font-size: 13px; }
.batch-checklist {
  display: grid;
  gap: 2px;
  max-height: 180px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
}
.form-field .batch-check {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 8px;
  align-items: baseline;
  margin: 0;
  padding: 4px 6px;
  border-radius: 4px;
  font-weight: 400;
  cursor: pointer;
}
.batch-check:hover { background: var(--surface-2); }
.batch-check small { grid-column: 2; color: var(--text-muted); font-size: 12px; }
.batch-estimate {
  padding: 10px 12px;
  border-radius: 6px;
  background: var(--primary-bg-subtle);
  border: 1px solid var(--primary-bg);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-body);
}
.batch-estimate p { margin: 0; }
.batch-estimate p + p { margin-top: 4px; }
.batch-estimate .batch-problem, .batch-summary .batch-problem { color: var(--danger); font-weight: 500; }
@media (max-width: 560px) { .batch-row { grid-template-columns: 1fr; gap: 0; } }

/* Compare: one row per variant (a version and a model). */
.batch-variants { display: grid; gap: 6px; }
.batch-variant {
  display: grid;
  grid-template-columns: 22px minmax(0, 1.2fr) minmax(0, 1fr) 28px;
  gap: 8px;
  align-items: center;
}
.batch-variant-letter {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--primary-bg); color: var(--primary); font-size: 12px; font-weight: 600;
}
.batch-form .batch-variant input[type="text"] {
  width: 100%; min-width: 0; padding: 8px 10px; border: 1px solid #d1d5db; border-radius: 6px;
  font-size: 14px; font-family: inherit; background: var(--surface); box-sizing: border-box;
}
.batch-variant-model { display: flex; gap: 6px; align-items: center; min-width: 0; }
.batch-form .batch-variant-model input[type="text"] { flex: 1 1 auto; width: auto; }
.batch-variant-browse { flex: none; padding: 6px 10px; }
.batch-variant-remove {
  width: 28px; height: 28px; padding: 0; border: 1px solid transparent; border-radius: 6px;
  background: transparent; color: var(--text-muted); font-size: 18px; line-height: 1; cursor: pointer;
}
.batch-variant-remove:hover { border-color: var(--border-strong); color: var(--text); }
.batch-add-variant {
  margin-top: 6px; padding: 5px 10px; font-size: 13px; font-family: inherit;
  border: 1px solid var(--border-strong); border-radius: 6px;
  background: var(--surface); color: var(--text-secondary); cursor: pointer;
}
.batch-add-variant:hover:not(:disabled) { border-color: var(--primary-border); color: var(--text); }
.batch-add-variant:disabled { opacity: 0.5; cursor: default; }
.batch-topics-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.batch-topics-head label { margin-bottom: 0; }
.batch-suggest-topics { margin-top: 0; padding: 3px 9px; font-size: 12px; white-space: nowrap; }
.batch-topics-note { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.batch-topics-note:empty { display: none; }
.batch-topics-note.is-error { color: var(--danger, #c0392b); }
@media (max-width: 560px) {
  .batch-variant { grid-template-columns: 22px minmax(0, 1fr) 28px; }
  .batch-variant-model { grid-column: 2; }
}

/* Results of a batch that compared variants. */
.batch-compare { margin: 0 0 16px; }
.batch-compare h3 { margin: 0 0 6px; font-size: 14px; color: var(--text-strong); }
.batch-compare h3 ~ h3 { margin-top: 14px; }
.batch-compare .batch-hint { margin: 0 0 6px; }
.batch-compare table { width: 100%; border-collapse: collapse; font-size: 13px; }
.batch-compare th, .batch-compare td { padding: 6px 8px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.batch-compare th { color: var(--text-muted); font-weight: 600; }
.batch-compare td.num, .batch-compare th.num { text-align: right; white-space: nowrap; }
.batch-compare tr.is-best td { background: var(--primary-bg-subtle); }
.batch-compare tr.is-best td:first-child { box-shadow: inset 3px 0 0 var(--primary); }
.batch-compare .batch-grid-wrap { overflow-x: auto; }
.batch-compare .cell-link {
  padding: 2px 6px; border: 1px solid transparent; border-radius: 4px; background: transparent;
  color: var(--primary); font: inherit; cursor: pointer;
}
.batch-compare .cell-link:hover, .batch-compare .cell-link:focus-visible { border-color: var(--primary-border); }
.batch-compare .cell-muted { color: var(--text-muted); }
.batch-compare .cell-failed { color: var(--danger); }

.batch-results-top { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 14px; }
.batch-results-top select { flex: 1 1 auto; min-width: 0; padding: 6px 8px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 14px; }
.batch-summary dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 16px;
  margin: 0 0 14px;
  font-size: 14px;
}
.batch-summary dt { color: var(--text-muted); }
.batch-summary dd { margin: 0; color: var(--text-body); overflow-wrap: anywhere; }
.batch-runs-table td { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* All Evaluations (eval-list.js) */
.eval-list-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.eval-list-bar select, .eval-list-bar input[type="search"] {
  padding: 6px 8px; border: 1px solid var(--border-strong); border-radius: 6px;
  font-size: 13px; font-family: inherit; background: var(--surface); color: var(--text-body);
}
.eval-list-bar select { max-width: 220px; }
.eval-list-bar select:disabled { color: var(--text-faint); }
.eval-list-bar input[type="search"] { flex: 1 1 200px; min-width: 160px; }
.eval-list-group { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-secondary); white-space: nowrap; cursor: pointer; }
.eval-list-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; min-height: 28px; }
#evalCharCount { font-size: 13px; color: var(--text-muted); font-weight: 400; }
.eval-list-buttons { display: inline-flex; gap: 8px; }
.eval-list-delete, .eval-list-report { padding: 4px 10px; font-size: 13px; }
.eval-list-report:disabled { opacity: 0.45; cursor: default; }
.eval-list-delete:disabled { opacity: 0.45; cursor: default; }
.eval-list-table { font-size: 13px; }
.eval-list-table th { padding: 8px; font-size: 12px; text-transform: none; }
.eval-list-table td { padding: 7px 8px; vertical-align: middle; }
/* Takes the room that is left and cuts off with an ellipsis. */
.eval-list-table td.eval-col-verdict { width: 45%; max-width: 0; color: var(--text-body); }
.eval-list-table .eval-col-select { width: 32px; text-align: center; }
.eval-list-table .eval-col-score, .eval-list-table .eval-col-rating { width: 1%; white-space: nowrap; }
.eval-list-table td.eval-col-time { color: var(--text-muted); white-space: nowrap; }
.eval-list-table .eval-col-first, .eval-list-table .eval-col-reply, .eval-list-table .eval-col-tps, .eval-list-table .eval-col-cost { width: 1%; white-space: nowrap; }
.eval-list-table td.eval-col-mock { max-width: 180px; }
.eval-list-table td.eval-col-source { max-width: 150px; }
.eval-list-table td.eval-col-source .eval-sub { max-width: 150px; }
.eval-list-table .cell-muted { color: var(--text-faint); }
.eval-sub { display: block; max-width: 180px; font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eval-list-table .cell-link {
  padding: 1px 6px; margin-left: -6px; border: 1px solid transparent; border-radius: 4px;
  background: transparent; color: var(--primary); font: inherit; cursor: pointer;
}
.eval-list-table .cell-link:hover, .eval-list-table .cell-link:focus-visible { border-color: var(--primary-border); }
.eval-badge {
  display: inline-block; min-width: 34px; padding: 2px 7px; border-radius: 999px;
  font-size: 12px; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums;
  background: var(--bg); color: var(--text-secondary); border: 1px solid transparent;
}
.eval-badge.good { background: var(--success-bg); color: var(--success); }
.eval-badge.mid { background: var(--warning-bg); color: #b45309; }
.eval-badge.low { background: var(--danger-bg); color: var(--danger); }
.eval-badge.outline { background: transparent; border-color: currentColor; }
.eval-note-tag {
  display: inline-block; margin-right: 6px; padding: 0 5px; border-radius: 4px;
  font-size: 11px; font-weight: 600; background: var(--primary-bg); color: var(--primary-dark); vertical-align: 1px;
}
.eval-list-table tr.eval-group-row td {
  text-align: left; width: auto;
  padding: 8px 8px 7px; background: var(--bg); border-top: 1px solid var(--border-strong);
  max-width: none; white-space: normal; cursor: pointer;
}
.eval-group-row:hover td { background: var(--primary-bg-subtle); }
.eval-group-toggle {
  width: 22px; height: 22px; padding: 0; margin-right: 4px; border: none; background: transparent;
  color: var(--text-muted); font-size: 13px; cursor: pointer; vertical-align: middle;
}
.eval-group-name { color: var(--text-strong); }
.eval-tag {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  font-size: 11px; font-weight: 600; background: var(--primary-bg); color: var(--primary-dark);
}
.eval-group-count { margin-left: 10px; color: var(--text-muted); font-size: 12px; }
.eval-group-stats { display: inline-flex; flex-wrap: wrap; gap: 4px 14px; margin-left: 14px; font-size: 12px; color: var(--text-secondary); vertical-align: middle; }
.eval-group-speed { margin-left: 14px; font-size: 12px; color: var(--text-secondary); vertical-align: middle; }
.eval-stat { display: inline-flex; align-items: center; gap: 5px; }
.eval-stat .eval-badge { min-width: 30px; padding: 1px 6px; }
.eval-list-table tr.eval-group-row.is-flash td { background: var(--primary-bg); transition: background 0.3s; }
/* The "Compare versions" chart above the table. */
.eval-plot { margin: 0 0 12px; border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px 10px; background: var(--surface); }
.eval-plot > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text-strong); padding: 2px 0; }
.eval-plot-controls { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; margin: 8px 0 4px; font-size: 13px; color: var(--text-secondary); }
.eval-plot-controls label { display: inline-flex; align-items: center; gap: 6px; }
.eval-plot-controls select { padding: 4px 6px; border: 1px solid var(--border-strong); border-radius: 6px; font-size: 13px; font-family: inherit; background: var(--surface); color: var(--text-body); }
.eval-plot-note { margin: 2px 0 6px; font-size: 12px; color: var(--text-muted); }
.eval-plot-area { position: relative; max-width: 760px; }
.eval-plot-area svg { display: block; overflow: visible; }
.eval-plot-pt { cursor: pointer; outline: none; }
.eval-plot-pt:hover .eval-plot-dot, .eval-plot-pt:focus-visible .eval-plot-dot { r: 8; }
.eval-plot-pt:focus-visible .eval-plot-dot { stroke: var(--primary); }
.eval-plot-pt.is-single:hover .eval-plot-dot, .eval-plot-pt.is-single:focus-visible .eval-plot-dot { r: 6; fill-opacity: 0.8; }
.eval-plot-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 4px; font-size: 12px; color: var(--text-secondary); }
.eval-plot-legend span { display: inline-flex; align-items: center; gap: 6px; }
.eval-plot-legend i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.eval-plot-empty { margin: 8px 0 4px; font-size: 13px; color: var(--text-muted); }
.eval-plot-tip {
  position: absolute; transform: translate(-50%, calc(-100% - 12px)); z-index: 5; pointer-events: none;
  min-width: 180px; max-width: 280px; padding: 8px 10px; border-radius: 6px;
  background: var(--surface); border: 1px solid var(--border-strong); box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
  font-size: 12px; line-height: 1.45; color: var(--text-body);
}
.eval-plot-tip b { font-variant-numeric: tabular-nums; }
.eval-plot-tip-sub { margin-top: 3px; color: var(--text-muted); }
#evalListOrder:disabled { color: var(--text-faint); }
.eval-list-table tr.eval-empty td { width: auto; padding: 28px 8px; text-align: center; color: var(--text-muted); max-width: none; white-space: normal; }
@media (max-width: 700px) {
  .eval-list-bar select { flex: 1 1 45%; max-width: none; }
  .eval-group-stats, .eval-group-speed { display: flex; margin: 4px 0 0 26px; }
}
.evaluations-table tr.clickable { cursor: pointer; }
.evaluations-table tr.clickable:hover td { background: var(--primary-bg-subtle); }
.evaluations-table tr.clickable:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }

.eval-record-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 14px; font-size: 13px; color: var(--text-secondary); }
.eval-record-cols { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; }
.eval-record-cols h3 { margin: 0 0 8px; font-size: 14px; color: var(--text-strong); }
.eval-record-cols h3 ~ h3 { margin-top: 16px; }
.eval-record-transcript {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 60vh;
  overflow-y: auto;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
}
.eval-record-msg { max-width: 88%; padding: 8px 10px; border-radius: 8px; font-size: 14px; line-height: 1.45; }
.eval-record-msg.from-user { align-self: flex-end; background: var(--primary-bg); }
.eval-record-msg.from-agent { align-self: flex-start; background: var(--surface); border: 1px solid var(--border); }
.eval-record-who { font-size: 11px; font-weight: 600; color: var(--text-muted); margin-bottom: 2px; }
.eval-record-text { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text-body); }
.eval-fact-check { max-height: 32vh; overflow-y: auto; font-size: 13px; line-height: 1.45; }
.eval-fact-reply + .eval-fact-reply { margin-top: 10px; }
.eval-fact-head { font-weight: 600; color: var(--text-strong); margin-bottom: 4px; }
.eval-fact-claim { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 5px; overflow-wrap: anywhere; }
.eval-fact-claim .eval-badge { flex: none; }
.eval-fact-quote { display: block; color: var(--text-muted); font-size: 12px; }
.eval-fact-note { margin: 0; color: var(--text-muted); }
.eval-record-verdict {
  max-height: 32vh;
  overflow-y: auto;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.eval-record-rate { display: grid; gap: 8px; }
.eval-record-rate input[type="number"] { width: 96px; padding: 6px 8px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 14px; }
.eval-record-rate textarea { font-family: inherit !important; font-size: 14px !important; }
.eval-record-rate-actions { display: flex; align-items: center; gap: 10px; }
.eval-record-rate-actions button {
  padding: 8px 14px;
  border: none;
  border-radius: 6px;
  background: var(--primary);
  color: #fff;
  font-size: 14px;
  cursor: pointer;
}
.eval-record-rate-actions button:hover:not(:disabled) { background: var(--primary-hover); }
.eval-record-rate-actions .batch-hint { margin: 0; }
@media (max-width: 760px) { .eval-record-cols { grid-template-columns: 1fr; } }

/* Evaluate this chat (evaluation.js): laid out like a saved evaluation. */
.eval-run-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; margin-bottom: 6px; }
.eval-run-field { display: grid; gap: 4px; flex: 1 1 200px; min-width: 0; font-size: 12px; font-weight: 600; color: var(--text-muted); }
.eval-run-field select { width: 100%; padding: 7px 8px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 14px; font-weight: 400; color: var(--text-body); background: var(--surface); }
.eval-run-btn {
  flex: none; padding: 8px 16px; border: none; border-radius: 6px;
  background: var(--primary); color: #fff; font-size: 14px; cursor: pointer;
}
.eval-run-btn:hover:not(:disabled) { background: var(--primary-hover); }
.eval-run-btn:disabled { opacity: 0.6; cursor: default; }
.eval-run-hint { margin: 0 0 14px; font-size: 12px; color: var(--text-muted); }
.eval-verdict-live { min-height: 90px; }
.eval-verdict-live:empty::before { content: attr(data-empty); color: var(--text-faint); }
.eval-record-rate .word-count { font-size: 12px; color: var(--text-muted); }
.eval-suggestion { margin-top: 18px; padding: 12px; border: 1px solid var(--primary-border); border-radius: 8px; background: var(--primary-bg-subtle); }
.eval-suggestion h3 { margin: 0 0 8px; font-size: 14px; color: var(--primary-dark); }
.eval-suggestion textarea {
  width: 100%; box-sizing: border-box; padding: 8px; border: 1px solid var(--primary-border); border-radius: 6px;
  background: var(--surface); font-family: ui-monospace, Consolas, monospace; font-size: 13px; line-height: 1.45;
}
.eval-suggestion-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.eval-suggestion-actions button { padding: 5px 12px; font-size: 13px; }

/* Billing window: what each paid plan includes (billing-modal.js). */
.billing-plan-list { margin: 8px 0 0; padding-left: 18px; font-size: 12px; color: #475569; line-height: 1.5; }
.billing-plan-list li { margin-bottom: 4px; }

/* Team window: an Enterprise owner's switches (members-modal.js). */
.team-switches { margin-top: 16px; border: 1px solid #e2e8f0; border-radius: 8px; padding: 10px 14px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.team-switches legend { font-weight: 600; padding: 0 4px; }
.team-switch-help { color: #64748b; }
.team-switch-status { font-size: 12px; color: #64748b; }