/* Agentic UX components — workspace, approvals, run timeline, model
   settings. Loaded after app.css; uses the same CSS variables the
   existing components rely on so themes (light/dark/midnight) carry. */

/* ─────────── Onboarding / checklist ─────────── */
.ws-checklist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.ws-step { display: flex; gap: 12px; align-items: flex-start; padding: 10px; border: 1px solid var(--border, #e3e6ea); border-radius: 12px; background: var(--surface, #fff); }
.ws-step.is-done { opacity: .65; }
.ws-step-icon {
  width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent, #2563eb); color: #fff;
  font-size: 12px; font-weight: 700; flex: 0 0 auto;
}
.ws-step.is-done .ws-step-icon { background: var(--ok, #16a34a); }
.ws-step-title { font-weight: 600; font-size: 13px; }
.ws-step-help { font-size: 12px; color: var(--text-dim, #6b7280); margin-top: 2px; }

/* ─────────── Status dot + pill variants ─────────── */
.status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.status-dot-ok { background: var(--ok, #16a34a); }
.status-dot-warn { background: var(--warn, #d97706); }
.status-dot-error { background: var(--danger, #dc2626); }

.status-pill-ok { background: rgba(22,163,74,.12); color: var(--ok, #16a34a); }
.status-pill-warn { background: rgba(217,119,6,.12); color: var(--warn, #d97706); }
.status-pill-error { background: rgba(220,38,38,.12); color: var(--danger, #dc2626); }
.status-pill-info { background: rgba(37,99,235,.12); color: var(--accent, #2563eb); }
.status-pill-dim { background: rgba(107,114,128,.15); color: var(--text-dim, #6b7280); }
.status-pill-draft { background: rgba(107,114,128,.15); color: var(--text-dim, #6b7280); }
.status-pill-scheduled { background: rgba(37,99,235,.12); color: var(--accent, #2563eb); }
.status-pill-approved { background: rgba(22,163,74,.12); color: var(--ok, #16a34a); }
.status-pill-published { background: rgba(22,163,74,.18); color: var(--ok, #16a34a); }
.status-pill-failed { background: rgba(220,38,38,.12); color: var(--danger, #dc2626); }
.status-pill-rejected { background: rgba(220,38,38,.12); color: var(--danger, #dc2626); }

/* ─────────── Workspace mini-lists ─────────── */
.ws-conn-list, .ws-content-list, .ws-mini-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.ws-conn-row, .ws-content-row, .ws-run-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: 8px;
  background: var(--surface-2, #f8fafc);
  font-size: 13px;
}
.ws-conn-row .fa-brands { width: 18px; text-align: center; }
.ws-mini-list li { display: flex; align-items: center; gap: 6px; font-size: 13px; }

/* ─────────── Approval cards ─────────── */
.approval-card .approval-action {
  background: var(--surface-2, #0f172a14);
  padding: 8px 10px; border-radius: 6px; font-size: 12px;
  white-space: pre-wrap; word-break: break-word; max-height: 220px; overflow: auto;
  margin-top: 4px;
}

/* Inline media preview in the approval card and review modal. The
   card-size thumbnail sits next to the title; the modal-size one fills
   the row so the operator can actually evaluate the image. */
.approval-card .approval-media-wrap {
  flex: 0 0 auto;
}
.approval-card .approval-media {
  border-radius: 6px;
  object-fit: cover;
  max-width: 80px;
  border: 1px solid var(--border, #e5e7eb33);
  background: var(--surface-2, #0f172a14);
}
.approval-card .approval-media.max-h-20 { max-height: 80px; }

.approval-media-link {
  display: inline-block;
  text-decoration: none;
  border-radius: 8px;
  overflow: hidden;
}
.approval-media-link .approval-media {
  max-width: 100%;
  border-radius: 8px;
  border: 1px solid var(--border, #e5e7eb33);
  background: var(--surface-2, #0f172a14);
  display: block;
}
.approval-media-link .approval-media.max-h-72 { max-height: 288px; }
.approval-card-desc {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.md-content {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text, #111827);
}
.md-content-compact {
  line-height: 1.5;
}
.md-content h3,
.md-content h4 {
  margin: 14px 0 6px;
  font-weight: 700;
  line-height: 1.3;
}
.md-content-compact h3,
.md-content-compact h4 {
  margin-top: 8px;
}
.md-content h3 { font-size: 15px; }
.md-content h4 { font-size: 13px; }
.md-content p { margin: 6px 0; }
.md-content ul {
  margin: 6px 0 10px;
  padding-left: 18px;
}
.md-content li { margin: 3px 0; }
.md-content code {
  background: var(--surface-2, #f1f5f9);
  border-radius: 4px;
  padding: 1px 4px;
  font-size: 12px;
}
.timeline-md {
  background: var(--surface-2, #0f172a0d);
  padding: 8px 10px;
  border-radius: 6px;
  max-height: 220px;
  overflow: auto;
  margin-top: 4px;
}

/* ─────────── Segmented control (filters) ─────────── */
.segmented {
  display: inline-flex; gap: 0;
  background: var(--surface-2, #f1f5f9);
  border-radius: 10px;
  padding: 3px;
}
.segmented-btn {
  border: 0; background: transparent; cursor: pointer;
  padding: 5px 12px; font-size: 12px; font-weight: 500;
  color: var(--text-dim, #6b7280);
  border-radius: 7px;
}
.segmented-btn.is-active {
  background: var(--surface, #fff);
  color: var(--text, #111827);
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
}

/* The HTML `hidden` attribute should always win over component styles.
 * The bare [hidden] is required by spec, but app.css's `.alert { display: flex }`
 * ties on specificity and load order can be defeated by browser CSS cache —
 * so we add an explicit `.alert[hidden]` rule too (specificity 0,2,0 beats
 * `.alert` 0,1,0) plus a generic high-specificity catch-all. Belt + suspenders. */
[hidden]              { display: none !important; }
.alert[hidden]        { display: none !important; }
[hidden][hidden]      { display: none !important; }   /* doubles specificity for any stubborn cache */

/* ─────────── Native <dialog> modals ───────────
   app.css also has an older `.modal` class for custom div overlays. These
   dialog-specific rules keep native dialogs from inheriting the full-screen
   custom overlay behaviour, which made close/cancel appear broken. */
dialog.modal:not([open]) { display: none !important; }
dialog.modal[open] {
  display: block !important;
  position: fixed;
  inset: 0;
  width: fit-content;
  height: fit-content;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 32px);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: transparent;
  pointer-events: auto;
}
dialog.modal::backdrop { background: rgba(15, 23, 42, .55); }
.modal-card {
  background: var(--surface, #fff);
  width: min(560px, 92vw);
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0,0,0,.25);
  display: flex; flex-direction: column;
  max-height: 90vh;
}
.modal-header { padding: 16px 20px; border-bottom: 1px solid var(--border, #e3e6ea); display: flex; align-items: center; gap: 12px; }
.modal-header h3 { flex: 1; margin: 0; }
.modal-close {
  background: transparent; border: 0; cursor: pointer;
  width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-dim, #6b7280);
}
.modal-close:hover { background: var(--surface-2, #f1f5f9); }
.modal-body { padding: 20px; overflow: auto; }
.modal-footer { padding: 12px 20px; border-top: 1px solid var(--border, #e3e6ea); display: flex; gap: 8px; align-items: center; }

/* ─────────── Plan + child run cards ─────────── */
.ws-plan-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.ws-plan-step {
  display: flex; align-items: center; gap: 10px; padding: 8px;
  border-radius: 8px; background: var(--surface-2, #f8fafc);
  transition: background .2s, opacity .2s;
}
.ws-plan-step.is-queued    { opacity: .65; }
.ws-plan-step.is-running   { background: var(--accent-glow); }
.ws-plan-step.is-failed,
.ws-plan-step.is-cancelled { background: color-mix(in srgb, var(--danger) 10%, var(--surface-2)); }
.ws-plan-step.is-done      { opacity: .85; }
.ws-plan-idx {
  width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent, #2563eb); color: #fff; font-size: 11px; font-weight: 700;
  flex: 0 0 auto;
}
.ws-plan-idx-queued    { background: var(--surface-hi); color: var(--text-dim); }
.ws-plan-idx-running   { background: var(--accent); color: var(--text-invert); }
.ws-plan-idx-done      { background: var(--ok); color: var(--text-invert); }
.ws-plan-idx-failed,
.ws-plan-idx-cancelled { background: var(--danger); color: var(--text-invert); }
.ws-plan-step-status {
  text-transform: uppercase; letter-spacing: .04em;
  font-weight: 700; font-size: 10px;
  flex-shrink: 0;
}
.ws-plan-step.is-running   .ws-plan-step-status { color: var(--accent-hi); }
.ws-plan-step.is-done      .ws-plan-step-status { color: var(--ok); }
.ws-plan-step.is-failed    .ws-plan-step-status,
.ws-plan-step.is-cancelled .ws-plan-step-status { color: var(--danger); }
.ws-plan-progress { margin-left: auto; }
.cockpit-plan > summary { gap: 8px; }
.ws-children-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.ws-child-row { padding: 10px; border: 1px solid var(--border, #e3e6ea); border-radius: 10px; background: var(--surface, #fff); }
.run-child-detail > summary {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  list-style: none;
}
.run-child-detail > summary::-webkit-details-marker { display: none; }
.run-child-detail > summary::before {
  content: "›";
  color: var(--text-dim, #6b7280);
  font-size: 16px;
  transform: rotate(0deg);
  transition: transform .15s ease;
}
.run-child-detail[open] > summary::before { transform: rotate(90deg); }
.run-child-title { font-size: 13px; font-weight: 700; color: var(--text, #111827); }
.timeline-pre {
  background: var(--surface-2, #0f172a0d);
  padding: 8px 10px; border-radius: 6px; font-size: 12px;
  white-space: pre-wrap; word-break: break-word;
  max-height: 200px; overflow: auto; margin: 4px 0 0 0;
}
.timeline-more { margin-top: 4px; }
.timeline-more > summary {
  cursor: pointer; font-size: 12px; color: var(--text-dim, #6b7280);
}

/* ─────────── Activity timeline ─────────── */
.run-timeline { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; position: relative; }
.timeline-item { display: flex; gap: 12px; }
.timeline-dot {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--surface-2, #eef2ff); color: var(--accent, #2563eb);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; flex: 0 0 auto;
}
.timeline-body { flex: 1; padding-top: 2px; min-width: 0; }
.timeline-meta { display: flex; gap: 10px; align-items: baseline; margin-bottom: 2px; }
.timeline-plan { list-style: decimal inside; font-size: 12px; padding-left: 4px; margin: 4px 0 0 0; }

/* ─────────── Recent runs list ─────────── */
.runs-row { text-decoration: none; color: inherit; transition: background .15s; }
.runs-row:hover { background: var(--surface-2, #f8fafc); }

/* ─────────── Form label helper ─────────── */
.form-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim, #6b7280); display: block; margin-bottom: 4px; }
.input-textarea { width: 100%; min-height: 80px; resize: vertical; padding: 10px 12px; border: 1px solid var(--border, #e3e6ea); border-radius: 10px; font: inherit; background: var(--surface, #fff); color: inherit; }
.input-textarea:focus { outline: 2px solid var(--accent, #2563eb); outline-offset: -1px; }

/* ─────────── Small text helpers ─────────── */
.text-warn { color: var(--warn, #d97706); }
.text-error { color: var(--danger, #dc2626); }
.link { color: var(--accent, #2563eb); text-decoration: none; }
.link:hover { text-decoration: underline; }
.cursor-pointer { cursor: pointer; }

/* ─────────── Skeleton loaders ─────────── */
.skel {
  display: block;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--surface-2, #f1f5f9) 100%, transparent 0%) 0%,
    color-mix(in srgb, var(--surface-hi, #e4e9f2) 100%, transparent 0%) 50%,
    color-mix(in srgb, var(--surface-2, #f1f5f9) 100%, transparent 0%) 100%);
  background-size: 200% 100%;
  animation: skel-shimmer 1.2s ease-in-out infinite;
  border-radius: 6px;
}
@keyframes skel-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skel-line  { height: 12px; margin: 6px 0; }
.skel-line.w-40  { width: 40%; }
.skel-line.w-60  { width: 60%; }
.skel-line.w-80  { width: 80%; }
.skel-line.w-100 { width: 100%; }
.skel-pill { height: 18px; width: 60px; border-radius: 999px; display: inline-block; }
.skel-stack { display: flex; flex-direction: column; gap: 4px; }
.skel-row   { display: flex; align-items: center; gap: 8px; padding: 6px 0; }

/* ─────────── Workspace load-error banner ─────────── */
.ws-load-error {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--danger, #EF4444) 12%, transparent);
  color: var(--danger, #EF4444);
  border: 1px solid color-mix(in srgb, var(--danger, #EF4444) 30%, transparent);
  border-radius: 10px;
  font-size: 13px;
}
.ws-load-error .ws-load-error-action { margin-left: auto; }

/* ─────────── Billing plan cards ─────────── */
.plans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}
.plan-card {
  display: flex;
  flex-direction: column;
  transition: transform .15s, box-shadow .15s;
  height: 100%;
}
.plan-card > .card-body { display: flex; flex-direction: column; flex: 1; }
.plan-card.is-current { outline: 2px solid var(--accent, #3B82F6); outline-offset: -1px; }
.plan-card-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.plan-price { font-size: 22px; font-weight: 700; margin-bottom: 8px; }
.plan-price-period { font-size: 12px; font-weight: 500; color: var(--text-dim, #6b7280); margin-left: 2px; }
.plan-limits { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; flex: 1; }
.plan-limits li { display: flex; gap: 8px; align-items: flex-start; }
.plan-limits li .fa-check { color: var(--ok, #16a34a); margin-top: 3px; font-size: 11px; }
.plan-card-actions { display: flex; gap: 8px; margin-top: 12px; }
.plan-card-actions .btn { width: 100%; justify-content: center; }
.billing-country-picker { min-width: 220px; }
.billing-country-picker .label { margin-bottom: 4px; }
.billing-country-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--text-dim, #6b7280);
  font-size: 12px;
}
.billing-country-note i {
  color: var(--accent, #2563eb);
  margin-top: 2px;
}

/* ─────────── "Your plan" header card ─────────── */
.billing-current-panel {
  padding: 16px;
  border: 1px solid var(--border, #e3e6ea);
  border-radius: 8px;
  background: var(--bg-elev, #fff);
}
.current-plan-header {
  display: flex; flex-wrap: wrap; gap: 16px; align-items: center;
}
.current-plan-summary { flex: 1; min-width: 240px; }
.current-plan-price {
  font-size: 24px; font-weight: 700; line-height: 1;
  white-space: nowrap;
}
.current-plan-price-period { font-size: 12px; font-weight: 500; color: var(--text-dim, #6b7280); margin-left: 4px; }
.current-plan-meta { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 6px; }

/* Managed AI pool meter */
.managed-meter {
  height: 6px;
  background: var(--surface-2, #f1f5f9);
  border-radius: 999px;
  overflow: hidden;
}
.managed-meter-fill {
  height: 100%;
  background: var(--accent, #3B82F6);
  transition: width .25s ease;
}
.managed-meter-fill.is-warn { background: var(--warn, #F59E0B); }
.managed-meter-fill.is-over { background: var(--danger, #EF4444); }

/* ─────────── "How this works" panel ─────────── */
.ws-help-panel {
  margin-top: 12px;
  padding: 14px;
  border: 1px dashed var(--border, #e3e6ea);
  border-radius: 10px;
  background: var(--surface-2, #f8fafc);
}
.ws-help-tile {
  padding: 12px;
  border-radius: 10px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e3e6ea);
}
.ws-help-tile-icon {
  width: 24px; height: 24px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent, #2563eb); color: #fff;
  font-size: 11px; font-weight: 700; margin-bottom: 6px;
}
.ws-help-tile-title { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.ws-help-tile-body { font-size: 12px; color: var(--text-dim, #6b7280); }
.ws-help-details { margin-top: 10px; }
.ws-help-details > summary {
  cursor: pointer; padding: 6px 0; font-size: 13px;
}
.ws-help-bullets { list-style: disc inside; padding: 0; margin: 4px 0 0 0; font-size: 12px; color: var(--text-dim, #6b7280); }
.ws-help-bullets li { margin: 2px 0; }

/* ─────────── Empty-state callout ─────────── */
.empty-callout {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 12px;
  background: var(--surface-2, #f8fafc);
  border: 1px dashed var(--border, #e3e6ea);
  border-radius: 10px;
}
.empty-callout .ec-icon {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent, #2563eb); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.empty-callout .ec-body { font-size: 12px; color: var(--text-dim, #6b7280); }
.empty-callout .ec-body strong { color: var(--text, #111827); }

/* Tooltip / help-icon — pure CSS, no JS */
.help-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--surface-2, #eef2ff); color: var(--text-dim, #6b7280);
  font-size: 10px; cursor: help;
  vertical-align: middle; margin-left: 4px;
  position: relative;
}
.help-icon:hover::after,
.help-icon:focus-visible::after {
  content: attr(data-help);
  position: absolute; left: 50%; bottom: 130%; transform: translateX(-50%);
  /* Theme-aware: --tooltip-bg / --tooltip-fg / --tooltip-border per theme.
     The previous version did `background: var(--text)` which inverted
     wrong — on dark themes --text is near-white, so the tooltip became
     white-on-white and invisible. */
  background: var(--tooltip-bg, #111827);
  color: var(--tooltip-fg, #fff);
  border: 1px solid var(--tooltip-border, rgba(255,255,255,0.08));
  padding: 7px 10px; border-radius: 6px;
  font-size: 11px; font-weight: 400; line-height: 1.45;
  white-space: normal; width: max-content; max-width: 260px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  z-index: 50; pointer-events: none;
}

/* ═════════════════════════════════════════════════════════════════════
   Workspace cockpit
   Top: thin pill strip with drawer beneath it.
   Below: split pane — launch + activity feed on the left, live run
   inspector on the right. Help slides in from the right edge.
   ═════════════════════════════════════════════════════════════════════ */

.cockpit { display: flex; flex-direction: column; gap: 16px; }

/* ─── Pill strip ─── */
.cockpit-strip {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 8px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e3e6ea);
  border-radius: 14px;
}
.cockpit-strip-spacer { flex: 1; min-width: 8px; }

.cockpit-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  background: var(--surface-2, #f8fafc);
  border: 1px solid var(--border, #e3e6ea);
  border-radius: 999px;
  font-size: 12px; font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .05s;
}
.cockpit-pill:hover { background: color-mix(in srgb, var(--surface-hi) 45%, transparent); }
.cockpit-pill:active { transform: translateY(1px); }
.cockpit-pill.is-open {
  /* "Open" should read as elevated, not recessed, across every theme.
     --surface-hi is the canonical elevated tint (lighter than --surface
     on light themes, lighter-than-base on dark themes). */
  background: var(--surface-hi);
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-glow);
}
.cockpit-pill-icon { color: var(--text-dim, #6b7280); }
.cockpit-pill-label { font-weight: 600; }
.cockpit-pill-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; padding: 0 6px; height: 18px;
  border-radius: 999px;
  background: var(--surface-hi); color: var(--text);
  font-size: 11px; font-weight: 700;
}
.cockpit-pill-count.is-ok    { background: color-mix(in srgb, var(--ok, #16a34a) 18%, transparent); color: var(--ok, #16a34a); }
.cockpit-pill-count.is-warn  { background: color-mix(in srgb, var(--warn, #d97706) 18%, transparent); color: var(--warn, #d97706); }
.cockpit-pill-count.is-error { background: color-mix(in srgb, var(--danger) 18%, transparent); color: var(--danger); }

.cockpit-pill-ghost {
  background: transparent;
  border-style: dashed;
  color: var(--text-dim, #6b7280);
}
.cockpit-pill-ghost:hover { background: var(--surface-2, #f8fafc); }

/* ─── Drawer beneath the strip ─── */
.cockpit-drawer {
  padding: 14px 16px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e3e6ea);
  border-radius: 14px;
}
.cockpit-drawer-body { font-size: 13px; }
.cockpit-mcp-list {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px;
  font-size: 12px;
}
.cockpit-mcp-list li { line-height: 1.45; }

/* ─── Split pane ─── */
.cockpit-split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 16px;
  align-items: start;
}
@media (max-width: 1080px) {
  .cockpit-split { grid-template-columns: 1fr; }
}

.cockpit-left, .cockpit-right {
  display: flex; flex-direction: column; gap: 16px;
  min-width: 0;
}

.cockpit-card { margin: 0; }
.cockpit-launch-card .input-textarea { resize: vertical; }

/* ─── Activity feed ─── */
.cockpit-activity-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.cockpit-activity-empty { padding: 14px 0; text-align: center; }
.cockpit-activity-row {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 8px;
  border-radius: 8px;
  background: var(--surface-2, #f8fafc);
  font-size: 13px;
}
.cockpit-activity-row + .cockpit-activity-row { /* even spacing baked in via gap */ }
.cockpit-activity-icon { color: var(--text-dim, #6b7280); width: 14px; text-align: center; }
.cockpit-activity-meta { white-space: nowrap; }
.cockpit-activity-row-action {
  border: 0; background: transparent; color: var(--text-dim, #6b7280);
  padding: 4px 6px; border-radius: 6px; cursor: pointer;
}
.cockpit-activity-row-action:hover { background: color-mix(in srgb, var(--surface-hi) 50%, transparent); color: var(--text); }

/* ─── Right pane: live run ─── */
.cockpit-run-card { min-height: 320px; }
.cockpit-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 36px 24px;
  color: var(--text-dim, #6b7280);
}
.cockpit-empty-icon {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--surface-2, #f8fafc);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: var(--accent, #2563eb); margin-bottom: 10px;
}
.cockpit-empty-title { font-size: 14px; font-weight: 600; color: var(--text, #111827); margin-bottom: 4px; }
.cockpit-empty-body  { font-size: 13px; max-width: 380px; line-height: 1.5; margin: 0; }

.cockpit-run-header {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border, #e3e6ea);
  margin-bottom: 10px;
}
.cockpit-run-meta {
  display: flex; flex-wrap: wrap; gap: 12px;
  font-size: 11px; color: var(--text-dim, #6b7280);
  margin-top: 6px;
}
.cockpit-run-meta i { margin-right: 4px; }

.cockpit-plan {
  margin: 6px 0 12px;
  padding: 10px 12px;
  background: var(--surface-2, #f8fafc);
  border-radius: 10px;
}
.cockpit-plan > summary {
  cursor: pointer; font-size: 13px; font-weight: 600;
  padding: 2px 0;
}
.cockpit-plan > summary i { margin-right: 6px; color: var(--text-dim, #6b7280); }
.cockpit-plan > .ws-plan-list { margin-top: 8px; }

/* ─── Specialist accordions ─── */
.cockpit-specialists { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.cockpit-specialists-empty { padding: 18px 0; text-align: center; }

/* ─── Drafts-produced panel (post-run inspector view) ─── */
.cockpit-drafts {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-soft);
}
.cockpit-drafts-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 10px;
}
.cockpit-drafts-head h3 i { color: var(--accent); margin-right: 6px; }
.cockpit-drafts-head a { margin-left: auto; }

.cockpit-drafts-tabs {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-bottom: 10px;
  padding: 3px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  width: fit-content;
}
.cockpit-draft-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px;
  border-radius: 7px;
  font: inherit; font-size: 12px; font-weight: 600;
  color: var(--text-mute);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color .15s, background .15s;
}
.cockpit-draft-tab:hover { color: var(--text); }
.cockpit-draft-tab.is-active {
  color: var(--text);
  background: var(--surface-hi);
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 1px 2px rgba(0,0,0,.18);
}
.cockpit-draft-tab-count {
  display: inline-block;
  min-width: 16px; padding: 0 5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text-mute) 14%, transparent);
  color: var(--text-mute);
  font-size: 10px; font-weight: 700;
  text-align: center; line-height: 16px;
}
.cockpit-draft-tab.is-active .cockpit-draft-tab-count {
  background: var(--accent-glow); color: var(--accent-hi);
}

.cockpit-draft-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.cockpit-draft-row {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  padding: 10px 12px;
}
.cockpit-draft-row-head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 11px;
  margin-bottom: 6px;
}
.cockpit-draft-row-idx {
  font-weight: 700; color: var(--text-mute);
  background: var(--surface-2);
  border-radius: 6px;
  padding: 1px 6px;
}
.cockpit-draft-row-body {
  font-size: 13px; line-height: 1.5; color: var(--text);
  white-space: pre-wrap; word-break: break-word;
  background: var(--surface-2);
  border-radius: 8px;
  padding: 8px 10px;
  max-height: 180px; overflow: auto;
}
.cockpit-draft-row-actions {
  display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap;
}

.specialist-card {
  border: 1px solid var(--border, #e3e6ea);
  border-radius: 10px;
  background: var(--surface, #fff);
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}
.specialist-card.is-running {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  box-shadow: 0 0 0 1px var(--accent-glow);
}
.specialist-card-header {
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  padding: 10px 12px;
  background: var(--surface, #fff);
  border: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
}
.specialist-card-header:hover { background: color-mix(in srgb, var(--surface-hi) 50%, transparent); }

/* "Currently calling tool_x" line on a running specialist's header.
   Replaces the static goal text so the operator sees live activity. */
.cockpit-specialist-doing {
  flex: 1; min-width: 0;
  font-family: var(--font-mono);
  color: var(--accent-hi);
  background: var(--accent-glow);
  border-radius: 6px;
  padding: 2px 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-weight: 600;
}
.specialist-card-chevron {
  color: var(--text-dim, #6b7280);
  transition: transform .15s;
  width: 12px; text-align: center;
}
.specialist-card.is-open .specialist-card-chevron { transform: rotate(90deg); }
.specialist-card-name { font-size: 13px; }
.cockpit-specialist-meta { margin-left: auto; white-space: nowrap; }
.specialist-card-body {
  display: none;
  padding: 0 12px 12px 32px;
  border-top: 1px solid var(--border, #e3e6ea);
}
.specialist-card.is-open .specialist-card-body { display: block; }

.cockpit-step-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.cockpit-step {
  display: flex; gap: 8px; align-items: flex-start;
  padding: 6px 0;
  border-bottom: 1px dashed var(--border, #e3e6ea);
}
.cockpit-step:last-child { border-bottom: 0; }
.cockpit-step-icon { color: var(--text-dim, #6b7280); width: 14px; text-align: center; margin-top: 2px; }
.cockpit-step-label { font-weight: 500; line-height: 1.4; }
.cockpit-step-detail {
  margin: 6px 0 0;
  padding: 8px 10px;
  background: var(--surface-2, #f8fafc);
  border-radius: 8px;
  font-size: 11px;
  color: var(--text-dim, #6b7280);
  overflow-x: auto;
  white-space: pre-wrap;
  max-height: 280px;
}

/* ─── Help drawer (slide-in from right) ─── */
.cockpit-help-scrim {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, .35);
  opacity: 0; transition: opacity .22s;
  z-index: 80;
}
.cockpit-help-scrim.is-open { opacity: 1; }

.cockpit-help-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(440px, 92vw);
  background: var(--surface, #fff);
  border-left: 1px solid var(--border, #e3e6ea);
  box-shadow: -8px 0 32px rgba(15, 23, 42, .12);
  transform: translateX(100%);
  transition: transform .22s;
  z-index: 90;
  display: flex; flex-direction: column;
}
.cockpit-help-drawer.is-open { transform: translateX(0); }
.cockpit-help-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border, #e3e6ea);
}
.cockpit-help-body {
  padding: 18px;
  overflow-y: auto;
  flex: 1;
}

/* ─── Inline approvals (right pane + drawer) ─── */
.cockpit-approvals-block {
  margin-bottom: 12px;
  padding: 12px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--warn, #d97706) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--warn, #d97706) 28%, transparent);
}
.cockpit-approvals-block-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600;
  color: var(--warn, #d97706);
  margin-bottom: 8px;
}

.cockpit-approval-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.cockpit-approval-card {
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e3e6ea);
  border-radius: 10px;
  padding: 10px 12px;
  transition: opacity .15s;
}
.cockpit-approval-card.is-busy { opacity: .55; }
.cockpit-approval-head {
  display: flex; align-items: flex-start; gap: 10px;
  margin-bottom: 8px;
}
.cockpit-approval-icon {
  color: var(--warn, #d97706);
  margin-top: 2px;
}
.cockpit-approval-subject {
  font-size: 13px; font-weight: 600; line-height: 1.35;
}
.cockpit-approval-desc {
  font-size: 12px; color: var(--text-dim, #6b7280);
  margin-top: 2px; line-height: 1.45;
}
.cockpit-approval-priority {
  flex-shrink: 0;
  text-transform: lowercase;
}
.cockpit-approval-actions {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
}
.cockpit-approval-detail-link {
  margin-left: auto;
}
.cockpit-approval-reject-form {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border, #e3e6ea);
  display: flex; flex-direction: column; gap: 8px;
}
.cockpit-approval-reason {
  resize: vertical;
  font-size: 12px;
}
.cockpit-approval-reject-actions {
  display: flex; gap: 8px; justify-content: flex-end;
}
.cockpit-approval-error {
  margin-top: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  color: var(--danger);
  font-size: 12px;
}
/* btn-danger fallback if the theme doesn't already define it */
.btn-danger {
  background: var(--danger);
  color: #fff;
  border: 1px solid var(--danger);
}
.btn-danger:hover { filter: brightness(.95); }