/* ── Workflow builder + run pages — shared structural CSS ──────── */

/* Page wrappers */
.workflows-page,
.wf-run-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--space-6) var(--space-5);
}
/* Builder is a split-pane (chat + form) so it needs a lot more horizontal
   room — 1200px squeezes both columns. Allowed to fill the viewport with
   generous gutters; on huge monitors a 1700px cap stops lines from
   stretching uncomfortably wide. */
.wf-builder {
    max-width: 1700px;
    margin: 0 auto;
    padding: var(--space-6) var(--space-5);
}

/* Page headers */
.workflows-header,
.wf-builder-header,
.wf-run-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

.wf-run-header-actions {
    display: flex;
    gap: var(--space-2);
    flex-shrink: 0;
}

/* Stop run — danger-tinted so it reads as destructive next to Refresh. */
.wf-stop-btn {
    color: #b91c1c;
    border-color: #fca5a5;
}

.wf-stop-btn:hover:not(:disabled) {
    background: #b91c1c;
    border-color: #b91c1c;
    color: #fff;
}

/* Verify-step verdict shown under the step name in run detail. */
.verify-verdict {
    margin-top: 4px;
    font-size: 0.82rem;
    font-weight: 600;
}
.verify-verdict.verdict-pass { color: #0f766e; }
.verify-verdict.verdict-fail { color: #b91c1c; }
.verify-detail {
    margin-top: 4px;
    font-size: 0.8rem;
}
.verify-detail summary {
    cursor: pointer;
    color: #b91c1c;
}
.verify-detail ul {
    margin: 4px 0 0 0;
    padding-left: 18px;
    color: var(--text-secondary);
}

/* AI Analysis step editor — suggested-question chips. */
.ai-suggest-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: 6px;
}
.ai-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}
.ai-chip {
    border: 1px solid #99f6e4;
    background: #f0fdfa;
    color: #0f766e;
    border-radius: 14px;
    padding: 4px 10px;
    font-size: 0.82rem;
    cursor: pointer;
    text-align: left;
}
.ai-chip:hover {
    background: #0f766e;
    border-color: #0f766e;
    color: #fff;
}

.workflows-header .header-content h1,
.wf-builder-header h1,
.wf-run-header h1 {
    margin: 0 0 6px 0;
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--text-primary);
}

.workflows-header .subtitle,
.wf-run-header .run-id {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.92rem;
}

.back-link {
    display: inline-block;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.85rem;
    margin-bottom: 6px;
}
.back-link:hover { color: var(--text-primary); }

.wf-builder-actions { display: flex; gap: var(--space-3); }

/* Buttons (page-scoped variants) */
.workflows-page .btn-primary,
.wf-builder .btn-primary,
.wf-run-page .btn-primary {
    background: var(--qwri-accent, var(--accent-primary, #6d28d9));
    color: #fff;
    padding: 9px 16px;
    border-radius: 6px;
    font-weight: 500;
    font-size: 0.9rem;
    border: none;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background 120ms ease-out;
}
.workflows-page .btn-primary:hover,
.wf-builder .btn-primary:hover,
.wf-run-page .btn-primary:hover { background: var(--qwri-accent-ink, var(--accent-hover, #5b21b6)); }
.workflows-page .btn-primary:disabled,
.wf-builder .btn-primary:disabled,
.wf-run-page .btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }

.workflows-page .btn-secondary,
.wf-builder .btn-secondary,
.wf-run-page .btn-secondary {
    background: var(--bg-secondary, transparent);
    color: var(--text-primary);
    padding: 9px 14px;
    border-radius: 6px;
    border: 1px solid var(--border-default, #d4d4d8);
    font-weight: 500;
    font-size: 0.88rem;
    cursor: pointer;
    transition: background 120ms ease-out;
}
.workflows-page .btn-secondary:hover,
.wf-builder .btn-secondary:hover,
.wf-run-page .btn-secondary:hover { background: var(--bg-tertiary, rgba(0,0,0,0.04)); }
.workflows-page .btn-secondary.small,
.wf-builder .btn-secondary.small,
.wf-run-page .btn-secondary.small { padding: 5px 10px; font-size: 0.82rem; }
.workflows-page .btn-secondary:disabled,
.wf-builder .btn-secondary:disabled,
.wf-run-page .btn-secondary:disabled { opacity: 0.6; cursor: not-allowed; }

/* Banners / loading / empty */
.workflows-page .error-banner,
.wf-builder .error-banner,
.wf-run-page .error-banner {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 12px 16px;
    margin-bottom: var(--space-4);
    background: var(--bg-danger, rgba(239, 68, 68, 0.08));
    color: var(--text-danger, #ef4444);
    border: 1px solid var(--text-danger, #ef4444);
    border-radius: 6px;
    font-size: 0.9rem;
}
.workflows-page .error-banner.muted-banner,
.wf-run-page .error-banner.muted-banner {
    background: var(--bg-tertiary, rgba(0,0,0,0.04));
    color: var(--text-secondary);
    border-color: var(--border-default, #d4d4d8);
}
.workflows-page .close-btn {
    margin-left: auto;
    background: none; border: none;
    color: inherit; cursor: pointer;
    font-size: 1.2rem; line-height: 1;
}

.workflows-page .loading-container,
.wf-builder .loading-container,
.wf-run-page .loading-container {
    display: flex; flex-direction: column; align-items: center;
    padding: var(--space-8) 0; gap: var(--space-3);
    color: var(--text-tertiary, #71717a);
}
.workflows-page .loading-spinner-large,
.wf-builder .loading-spinner-large,
.wf-run-page .loading-spinner-large {
    width: 32px; height: 32px;
    border: 3px solid var(--border-light, #e4e4e7);
    border-top-color: var(--qwri-accent, var(--accent-primary, #6d28d9));
    border-radius: 50%;
    animation: wfSpin 0.8s linear infinite;
}
@keyframes wfSpin { to { transform: rotate(360deg); } }

.workflows-page .empty-state,
.wf-run-page .empty-state {
    text-align: center;
    padding: var(--space-8) var(--space-5);
    color: var(--text-secondary);
}
.workflows-page .empty-state h2,
.wf-run-page .empty-state h2 {
    margin: 0 0 8px 0;
    color: var(--text-primary);
    font-weight: 600;
    font-size: 1.2rem;
}

/* Tables (list + run-detail step states) */
.workflows-table-wrap,
.wf-run-page .step-states-table { width: 100%; }
.workflows-table,
.step-states-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}
.workflows-table thead,
.step-states-table thead {
    background: var(--bg-tertiary, rgba(0,0,0,0.04));
    text-align: left;
}
.workflows-table th,
.workflows-table td,
.step-states-table th,
.step-states-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-light, #e4e4e7);
    vertical-align: top;
}
.workflows-table .wf-name { font-weight: 600; color: var(--text-primary); }
.workflows-table .wf-desc { font-size: 0.82rem; color: var(--text-tertiary); margin-top: 2px; }
.workflows-table .wf-schedule { font-size: 0.78rem; color: var(--accent-primary, #7c3aed); margin-top: 3px; }
.workflows-table .wf-owner { font-size: 0.75rem; color: var(--text-tertiary, #71717a); margin-top: 2px; }
.workflows-table .shared-chip {
    display: inline-flex; align-items: center;
    margin-left: 8px; padding: 1px 8px;
    font-size: 0.7rem; font-weight: 600;
    color: var(--accent-primary, #7c3aed);
    background: rgba(124, 58, 237, 0.10);
    border-radius: 999px; vertical-align: middle;
}
.workflows-table .muted,
.wf-run-page .muted { color: var(--text-tertiary, #71717a); }
.workflows-table .col-actions,
.wf-run-page .col-actions { width: 1%; white-space: nowrap; text-align: right; }
.workflows-table .col-actions button,
.wf-run-page .action-btn {
    margin-left: 4px;
    background: transparent;
    border: 1px solid var(--border-default, #d4d4d8);
    color: var(--text-primary);
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8rem;
}
.workflows-table .action-btn:hover { background: var(--bg-tertiary); }
.workflows-table .action-btn.delete:hover { color: var(--text-danger); border-color: var(--text-danger); }
.workflows-table .action-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* Status badges + step states */
.status-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.status-draft    { background: rgba(113,113,122,0.15); color: #71717a; }
.status-active   { background: rgba(34,197,94,0.15);  color: #16a34a; }
.status-disabled { background: rgba(239,68,68,0.15);  color: #ef4444; }

.run-status {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
}
.run-status.status-pending           { background: rgba(113,113,122,0.15); color: #52525b; }
.run-status.status-running           { background: rgba(99,102,241,0.15);  color: #4f46e5; }
.run-status.status-completed         { background: rgba(34,197,94,0.15);   color: #16a34a; }
.run-status.status-failed            { background: rgba(239,68,68,0.15);   color: #ef4444; }
.run-status.status-cancelled         { background: rgba(113,113,122,0.15); color: #52525b; }
.run-status.status-awaitingapproval  { background: rgba(245,158,11,0.18);  color: #d97706; }

.step-state {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
}
.state-pending           { background: rgba(113,113,122,0.15); color: #52525b; }
.state-running           { background: rgba(99,102,241,0.15);  color: #4f46e5; }
.state-completed,
.state-approved          { background: rgba(34,197,94,0.15);   color: #16a34a; }
.state-failed,
.state-rejected          { background: rgba(239,68,68,0.15);   color: #ef4444; }
.state-skipped           { background: rgba(113,113,122,0.15); color: #71717a; }
.state-awaitingapproval  { background: rgba(245,158,11,0.18);  color: #d97706; }

/* Combo B — a step's run gate (condition). Shown on the builder card so the
   user can see "this only fires when the analysis flags action" and clear it. */
.step-gate {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 6px 0 2px;
    padding: 6px 10px;
    border-radius: 8px;
    background: rgba(245, 158, 11, 0.10);
    border: 1px solid rgba(245, 158, 11, 0.25);
    font-size: 0.82rem;
    color: #92400e;
}
.step-gate-icon  { font-size: 0.9rem; opacity: 0.8; }
.step-gate-text  { flex: 1; }
.step-gate-text strong { font-weight: 600; }
.step-gate-clear {
    background: none;
    border: 1px solid rgba(146, 64, 14, 0.35);
    color: #92400e;
    border-radius: 6px;
    padding: 1px 8px;
    font-size: 0.72rem;
    cursor: pointer;
}
.step-gate-clear:hover { background: rgba(146, 64, 14, 0.08); }

/* Phase A — live activity line under the currently-running step. The row
   itself gets a subtle indigo tint so users can locate it instantly while
   scrolling a long step list. */
.step-row-running        { background: rgba(99, 102, 241, 0.05); }

.step-activity {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    font-size: 0.83rem;
    color: var(--text-secondary, #52525b);
    font-style: italic;
}

.step-activity-spinner {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid rgba(99, 102, 241, 0.25);
    border-top-color: #4f46e5;
    animation: step-activity-spin 0.8s linear infinite;
    flex-shrink: 0;
}

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

/* Phase C — Running-now indicator on the workflows list + runs page. */
.running-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 1px 8px;
    margin-left: 8px;
    font-size: 0.75rem;
    font-weight: 500;
    color: #4f46e5;
    background: rgba(99, 102, 241, 0.12);
    border-radius: 999px;
    vertical-align: middle;
}
.running-chip-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4f46e5;
    animation: running-pulse 1.4s ease-in-out infinite;
}
@keyframes running-pulse {
    0%, 100% { opacity: 0.45; }
    50%      { opacity: 1; }
}

.active-runs-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    margin-bottom: 12px;
    background: rgba(99, 102, 241, 0.08);
    border-left: 3px solid #6366f1;
    border-radius: 4px;
    font-size: 0.88rem;
    color: var(--text-primary, #18181b);
}
.active-runs-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #6366f1;
    animation: running-pulse 1.4s ease-in-out infinite;
}

/* Builder structure */
.wf-builder-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.card {
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-light, #e4e4e7);
    border-radius: 8px;
    padding: var(--space-4) var(--space-5);
}
.card h2 {
    margin: 0 0 var(--space-3) 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
}
.card .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-3);
}
.card .section-header h2 { margin: 0; }
.card p.muted { color: var(--text-tertiary, #71717a); font-size: 0.85rem; margin: 0 0 var(--space-3) 0; }
.card p.muted.small { font-size: 0.8rem; margin-top: 4px; }

/* Form fields */
.field { display: flex; flex-direction: column; gap: 4px; margin-bottom: var(--space-3); }
.field.grow { flex: 1; }
.field-row {
    display: flex;
    gap: var(--space-3);
    align-items: flex-end;
    margin-bottom: var(--space-3);
}
.field label {
    font-size: 0.82rem;
    color: var(--text-secondary, #52525b);
    font-weight: 500;
}
.field-hint {
    font-size: 0.78rem;
    color: var(--text-tertiary, #71717a);
    margin-top: 2px;
}
.field input[type="text"],
.field input[type="number"],
.field select,
.field textarea,
.input-row input,
.input-row select,
.kv-row input {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--border-default, #d4d4d8);
    border-radius: 4px;
    background: var(--bg-primary, #fff);
    color: var(--text-primary, #18181b);
    font-size: 0.9rem;
    font-family: inherit;
}
.field textarea.code-area {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.83rem;
    line-height: 1.45;
    white-space: pre;
}
.checkbox-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--text-primary);
    cursor: pointer;
    padding: 7px 0;
}
.checkbox-row input { width: auto; margin: 0; }

/* Inputs editor rows */
.input-row {
    display: grid;
    grid-template-columns: 1fr 1.4fr 0.8fr 1fr auto auto;
    gap: 8px;
    margin-bottom: 8px;
    align-items: center;
}

/* select-input dropdown choices sub-editor */
.input-options {
    margin: -2px 0 12px 24px;
    padding: 8px 10px;
    border-left: 2px solid var(--border-default, #d4d4d8);
    background: var(--bg-secondary, #fafafa);
    border-radius: 4px;
}
.input-options-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}
.option-row {
    display: grid;
    grid-template-columns: 1fr 1.6fr auto;
    gap: 8px;
    margin-bottom: 6px;
    align-items: center;
}
.option-row input {
    width: 100%;
    padding: 6px 9px;
    border: 1px solid var(--border-default, #d4d4d8);
    border-radius: 4px;
    background: var(--bg-primary, #fff);
    color: var(--text-primary, #18181b);
    font-size: 0.88rem;
    font-family: inherit;
}

/* Step cards */
.steps-card { display: flex; flex-direction: column; gap: var(--space-3); }
.add-step-cluster { display: flex; gap: 6px; flex-wrap: wrap; }

.step-card {
    border: 1px solid var(--border-default, #d4d4d8);
    border-radius: 6px;
    background: var(--bg-secondary, rgba(0,0,0,0.02));
}
.step-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--bg-tertiary, rgba(0,0,0,0.04));
    border-bottom: 1px solid var(--border-light, #e4e4e7);
    border-radius: 6px 6px 0 0;
}
.step-index { font-weight: 600; color: var(--text-tertiary); font-family: ui-monospace, monospace; font-size: 0.85rem; }
.step-id { width: 110px !important; padding: 4px 8px !important; font-size: 0.82rem !important; font-family: ui-monospace, monospace; }
.step-name { flex: 1; padding: 4px 8px !important; font-size: 0.85rem !important; }
.step-type-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    background: rgba(99,102,241,0.15);
    color: #4f46e5;
}
.step-type-badge.step-type-write_action { background: rgba(245,158,11,0.18); color: #d97706; }
.step-type-badge.step-type-bulk_export  { background: rgba(34,197,94,0.15);  color: #16a34a; }
.step-type-badge.step-type-transform    { background: rgba(168,85,247,0.18); color: #9333ea; }

.step-actions { display: flex; gap: 4px; margin-left: auto; }
.icon-btn {
    background: transparent;
    border: 1px solid var(--border-default, #d4d4d8);
    color: var(--text-primary);
    width: 28px; height: 26px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    line-height: 1;
}
.icon-btn:hover { background: var(--bg-tertiary); }
.icon-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.icon-btn.delete:hover { color: var(--text-danger); border-color: var(--text-danger); }

.step-card-body { padding: 12px 14px; }
.step-editor { display: flex; flex-direction: column; gap: var(--space-3); }

.recipe-reset-row {
    margin-top: var(--space-3);
    padding: 10px 12px;
    background: var(--bg-tertiary);
    border: 1px dashed var(--border-color);
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
.recipe-reset-text { flex: 1; font-size: 0.85rem; line-height: 1.4; }
.recipe-reset-text strong { display: block; margin-bottom: 2px; }
/* Auto-cleared-on-edit variant: amber accent to signal a pending re-capture. */
.recipe-recapture-note {
    background: var(--warning-bg, rgba(245, 158, 11, 0.10));
    border-color: var(--warning-border, rgba(245, 158, 11, 0.45));
}
.kv-row {
    display: grid;
    grid-template-columns: 1fr 2fr auto;
    gap: 6px;
    margin-bottom: 6px;
}

/* Run detail */
.run-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--space-4);
}
.run-summary-block .label {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}

.approval-card { border: 1px solid #f59e0b; }
.approval-block {
    border: 1px solid var(--border-light);
    border-radius: 6px;
    padding: 12px 14px;
    margin-top: var(--space-3);
}
.approval-meta { font-size: 0.82rem; color: var(--text-secondary); margin-bottom: 8px; }
.approval-meta .muted { color: var(--text-tertiary); margin: 0 4px 0 12px; }
.approval-actions { display: flex; gap: 8px; margin-top: 8px; }
.payload-pre {
    background: var(--bg-tertiary, rgba(0,0,0,0.04));
    padding: 10px 12px;
    border-radius: 4px;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.82rem;
    white-space: pre-wrap;
    max-height: 320px;
    overflow: auto;
}
.step-error { color: var(--text-danger, #ef4444); font-size: 0.82rem; }
.muted.small, .small { font-size: 0.78rem; }

/* Modal — scoped to all three workflow roots. The builder page root is
   .wf-builder; omitting it here left the modal card unstyled so Bootstrap's
   global .modal-backdrop covered the screen in black with no visible card. */
.workflows-page .modal-backdrop,
.wf-run-page .modal-backdrop,
.wf-builder .modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 100;
}
.workflows-page .modal-card,
.wf-run-page .modal-card,
.wf-builder .modal-card {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: min(560px, 92vw);
    background: var(--bg-primary, #fff);
    border-radius: 8px;
    z-index: 101;
    display: flex; flex-direction: column;
    max-height: 88vh;
}
/* Wider variant for the sample-run modal, which renders a step-states table. */
.workflows-page .modal-card.modal-card-wide,
.wf-run-page .modal-card.modal-card-wide,
.wf-builder .modal-card.modal-card-wide {
    width: min(820px, 94vw);
}
.workflows-page .modal-header,
.wf-run-page .modal-header,
.wf-builder .modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-light);
}
.workflows-page .modal-header h2,
.wf-run-page .modal-header h2,
.wf-builder .modal-header h2 { margin: 0; font-size: 1.05rem; font-weight: 600; }
.workflows-page .modal-close,
.wf-run-page .modal-close,
.wf-builder .modal-close {
    background: none; border: none;
    font-size: 1.4rem; line-height: 1;
    cursor: pointer; color: var(--text-tertiary);
}
.workflows-page .modal-body,
.wf-run-page .modal-body,
.wf-builder .modal-body { padding: 16px 18px; overflow: auto; }
.workflows-page .modal-footer,
.wf-run-page .modal-footer,
.wf-builder .modal-footer {
    display: flex; justify-content: flex-end; gap: 8px;
    padding: 12px 18px;
    border-top: 1px solid var(--border-light);
}

code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.85em; }

/* ── Builder validation banner ────────────────────────────────── */
.warning-banner {
    background: rgba(245, 158, 11, 0.10);
    border: 1px solid #f59e0b;
    color: var(--text-primary, #18181b);
    border-radius: 6px;
    padding: 12px 16px;
    margin-bottom: var(--space-4);
    font-size: 0.9rem;
}
.warning-banner-header {
    margin-bottom: 8px;
    color: #b45309;
}
.warning-banner-header strong { color: #92400e; }
.warning-banner-list {
    margin: 0;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.warning-banner-list code {
    background: rgba(245, 158, 11, 0.15);
    color: #92400e;
    padding: 0 4px;
    border-radius: 3px;
}
.link-btn {
    background: none;
    border: none;
    color: var(--qwri-accent, #6d28d9);
    text-decoration: underline;
    cursor: pointer;
    padding: 0 4px;
    font: inherit;
}
.link-btn:hover { color: var(--qwri-accent-ink, #5b21b6); }

/* ── Per-step editor extras: key-pills + advanced details ─────── */
.key-pill-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 6px;
}
.key-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--border-default, #d4d4d8);
    background: var(--bg-primary, #fff);
    color: var(--text-primary, #18181b);
    cursor: pointer;
    font-size: 0.82rem;
    transition: background 100ms ease, border-color 100ms ease;
}
.key-pill:hover {
    background: var(--bg-tertiary, rgba(0,0,0,0.04));
}
.key-pill.selected {
    background: rgba(99,102,241,0.12);
    border-color: #6366f1;
    color: #4338ca;
}
.key-pill .check { font-weight: 700; }
.key-pill code { background: transparent; padding: 0; font-size: 0.82rem; }

.advanced-block {
    margin-top: var(--space-2, 8px);
    border: 1px dashed var(--border-default, #d4d4d8);
    border-radius: 6px;
    padding: 6px 10px;
}
.advanced-block summary {
    cursor: pointer;
    font-size: 0.82rem;
    color: var(--text-secondary);
    user-select: none;
    padding: 4px 0;
}
.advanced-block[open] summary {
    margin-bottom: var(--space-2, 8px);
    color: var(--text-primary);
    font-weight: 500;
}

/* ── Phase 10a — split-pane builder + revealable step cards ─────────── */

/* Two-column layout: chat on the left, form on the right. Collapses to a
   stacked layout on narrow viewports (tablets / small laptops). */
.wf-split {
    display: grid;
    /* Roughly equal split — chat pane is a primary surface, not a side
       panel. minmax floors keep both columns usable on narrower
       monitors. align-items: start keeps the chat-pane card anchored
       to the TOP of its column instead of stretching to match the
       right column's height (stretching pushes the input box far away
       from the intent textarea when there are many steps on the right). */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-5, 20px);
    align-items: start;
}
@media (max-width: 1200px) {
    .wf-split {
        grid-template-columns: 1fr;
    }
}

.wf-chat-pane {
    /* Sticky so as the user scrolls the right-column step list the
       chat stays visible at the top of the viewport. */
    position: sticky;
    top: var(--space-5, 20px);
    max-height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;
}

.chat-pane-card {
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-default, #e4e4e7);
    border-radius: 10px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    /* Content-sized — the card no longer stretches to match the right
       column's height. The intent textarea + clarification + actions
       sit as a tight visual cluster regardless of how many steps are
       on the right. Sticky positioning (on .wf-chat-pane) keeps the
       card visible as the user scrolls the step list. */
    overflow: hidden;
}
/* Messages area sizes to its content; when the conversation gets long
   it scrolls internally up to ~half the viewport so the input stays
   visible. Crucially NO flex: 1 — that would create a giant empty
   region above the textarea when the chat is empty. */
.chat-pane-messages {
    max-height: 50vh;
    overflow-y: auto;
    min-height: 0;
}
.chat-pane-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-light, #f1f1f3);
}
.chat-pane-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary, #18181b);
}
.chat-pane-subtitle {
    font-size: 0.72rem;
    color: var(--text-tertiary, #71717a);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--bg-tertiary, rgba(0,0,0,0.04));
    padding: 2px 6px;
    border-radius: 4px;
}
.chat-pane-body p {
    margin: 0 0 8px 0;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--text-secondary, #52525b);
}
.chat-pane-body p.muted {
    color: var(--text-tertiary, #71717a);
}

/* Conversation input area — flex: 1 so it claims all the remaining
   space in the card. When messages are empty the textarea fills
   most of the pane; when a conversation accumulates the messages
   area scrolls and the textarea still keeps its comfortable
   minimum. */
.chat-pane-input {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 1 auto;
    min-height: 0;
}
.chat-pane-input textarea {
    flex: 1 1 auto;
}
.chat-pane-input textarea {
    width: 100%;
    min-height: 280px;
    padding: 12px 14px;
    font-size: 0.95rem;
    line-height: 1.55;
    border: 1px solid var(--border-default, #d4d4d8);
    border-radius: 6px;
    resize: vertical;
    font-family: inherit;
    color: var(--text-primary, #18181b);
    background: var(--bg-primary, #fff);
}
.chat-pane-input textarea:focus {
    outline: none;
    border-color: var(--qwri-accent, #6366f1);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15);
}
.chat-pane-input textarea:disabled {
    background: var(--bg-tertiary, rgba(0,0,0,0.03));
    color: var(--text-tertiary, #71717a);
    cursor: not-allowed;
}
.chat-pane-input .btn-primary {
    align-self: flex-end;
}

/* ── v2 intent-doc shape ─────────────────────────────────────── */
.chat-pane-intent {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.intent-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary, #52525b);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.intent-textarea {
    width: 100%;
    min-height: 260px;
    padding: 12px 14px;
    font-size: 0.95rem;
    line-height: 1.55;
    border: 1px solid var(--border-default, #d4d4d8);
    border-radius: 6px;
    resize: vertical;
    font-family: inherit;
    color: var(--text-primary, #18181b);
    background: var(--bg-primary, #fff);
}
.intent-textarea:focus {
    outline: none;
    border-color: var(--qwri-accent, #6366f1);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15);
}
.intent-textarea:disabled {
    background: var(--bg-tertiary, rgba(0,0,0,0.03));
    color: var(--text-tertiary, #71717a);
    cursor: not-allowed;
}
.intent-hint {
    font-size: 0.78rem;
    color: var(--text-tertiary, #71717a);
}

.intent-autosave {
    font-size: 0.78rem;
    color: var(--text-tertiary, #71717a);
    font-style: italic;
}

.intent-autosave-err {
    font-size: 0.78rem;
    color: var(--qwri-danger, #dc2626);
}

.chat-pane-updated {
    font-size: 0.78rem;
    font-weight: 400;
    color: var(--text-tertiary, #71717a);
    margin-left: 6px;
}

.bld-pickup-banner {
    padding: 8px 12px;
    background: rgba(99, 102, 241, 0.08);
    border-left: 3px solid var(--qwri-accent, #6366f1);
    border-radius: 4px;
    font-size: 0.82rem;
    color: var(--text-secondary, #52525b);
    font-style: italic;
}

.bld-note {
    padding: 10px 12px;
    background: var(--bg-tertiary, rgba(0,0,0,0.03));
    border-left: 3px solid var(--qwri-accent, #6366f1);
    border-radius: 4px;
    font-size: 0.9rem;
    color: var(--text-primary, #18181b);
    line-height: 1.5;
}

.bld-clarification {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    background: rgba(99, 102, 241, 0.05);
    border: 1px solid rgba(99, 102, 241, 0.25);
    border-radius: 8px;
}
.bld-clar-q {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-primary, #18181b);
    line-height: 1.45;
}
.bld-clar-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.bld-chip {
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-default, #d4d4d8);
    color: var(--text-primary, #18181b);
    font-size: 0.85rem;
    padding: 6px 12px;
    border-radius: 999px;
    cursor: pointer;
    transition: background 100ms ease, border-color 100ms ease;
}
.bld-chip:hover:not(:disabled) {
    background: rgba(99, 102, 241, 0.12);
    border-color: var(--qwri-accent, #6366f1);
}
.bld-chip:disabled { opacity: 0.5; cursor: not-allowed; }
.bld-clar-input {
    width: 100%;
    padding: 10px 12px;
    font-size: 0.9rem;
    line-height: 1.5;
    border: 1px solid var(--border-default, #d4d4d8);
    border-radius: 6px;
    resize: vertical;
    font-family: inherit;
    background: var(--bg-primary, #fff);
}
.bld-clar-input:focus {
    outline: none;
    border-color: var(--qwri-accent, #6366f1);
}
.bld-clar-actions {
    display: flex;
    justify-content: flex-end;
}

.chat-pane-actions {
    display: flex;
    justify-content: flex-end;
}

/* Compact summary row (always visible) for each step. */
.step-card-summary {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 12px;
}
.step-card-summary .step-index {
    font-size: 0.82rem;
    color: var(--text-tertiary, #71717a);
    font-weight: 600;
    padding-top: 8px;
    min-width: 24px;
}
.step-summary-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.step-name-input {
    width: 100%;
    border: none;
    background: transparent;
    font-size: 0.98rem;
    font-weight: 500;
    color: var(--text-primary, #18181b);
    padding: 6px 0;
    outline: none;
}
.step-name-input::placeholder {
    color: var(--text-tertiary, #a1a1aa);
    font-weight: 400;
    font-style: italic;
}
.step-name-input:focus {
    border-bottom: 1px solid var(--qwri-accent, #6366f1);
}
.step-summary-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    color: var(--text-tertiary, #71717a);
}
.step-id-label {
    background: var(--bg-tertiary, rgba(0,0,0,0.04));
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.72rem;
    color: var(--text-secondary, #52525b);
}
.step-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.reveal-toggle {
    background: transparent;
    border: 1px solid var(--border-default, #d4d4d8);
    color: var(--text-secondary, #52525b);
    font-size: 0.78rem;
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 120ms ease;
}
.reveal-toggle:hover {
    background: var(--bg-tertiary, rgba(0,0,0,0.04));
    color: var(--text-primary, #18181b);
}

/* ── Output files (run artifacts) ─────────────────────────── */
.wf-run-page .artifact-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.wf-run-page .artifact-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 14px;
    border: 1px solid var(--border-light, #e4e4e7);
    border-radius: 8px;
    background: var(--bg-secondary, rgba(0,0,0,0.015));
}
.wf-run-page .artifact-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.wf-run-page .artifact-icon { font-size: 1.4rem; line-height: 1; }
.wf-run-page .artifact-name { font-weight: 600; color: var(--text-primary, #18181b); }

/* Inline download affordance on a step's output key. */
.wf-run-page .link-button {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    color: var(--qwri-accent, var(--accent, #6d28d9));
    font: inherit;
}
.wf-run-page .link-button:hover { text-decoration: underline; }
.wf-run-page .link-button code { color: inherit; }