/* ============================================
   VIRTUAL RUN PANEL STYLES
   ============================================ */

#virtual-run-panel {
    position: absolute;
    top: 60px;
    right: 0;
    bottom: 0;
    width: 380px;
    max-width: 100%;
    background: #0f0f1a;
    border-left: 1px solid #2d2d44;
    display: flex;
    flex-direction: column;
    z-index: 70;
    transition: transform 0.3s ease;
}

#virtual-run-panel.hidden {
    transform: translateX(100%);
    pointer-events: none;
}

/* Panel Header */
.virtual-run-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid #2d2d44;
    background: #1a1a2e;
    flex-shrink: 0;
}

.virtual-run-header h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 8px;
}

.virtual-run-header .close-btn {
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    font-size: 18px;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s;
}

.virtual-run-header .close-btn:hover {
    background: #2d2d44;
    color: #fff;
}

/* Header Actions Container */
.virtual-run-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* History Button */
.virtual-run-header .history-btn {
    background: #2d2d44;
    border: 1px solid #3d3d54;
    color: #9ca3af;
    cursor: pointer;
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 6px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 4px;
}

.virtual-run-header .history-btn:hover {
    background: #3d3d54;
    color: #fff;
    border-color: #4d4d64;
}

.virtual-run-header .history-btn.hidden {
    display: none;
}

/* History Dropdown */
.vr-history-dropdown {
    position: absolute;
    top: 52px;
    left: 16px;
    right: 16px;
    background: #1a1a2e;
    border: 1px solid #3d3d54;
    border-radius: 8px;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    max-height: 300px;
    display: flex;
    flex-direction: column;
}

.vr-history-dropdown.hidden {
    display: none;
}

.vr-history-dropdown-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    border-bottom: 1px solid #2d2d44;
    font-size: 12px;
    font-weight: 600;
    color: #9ca3af;
}

.vr-history-close {
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    font-size: 16px;
    padding: 2px 6px;
    border-radius: 4px;
}

.vr-history-close:hover {
    background: #2d2d44;
    color: #fff;
}

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

.vr-history-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    margin-bottom: 4px;
    background: #0f0f1a;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s;
}

.vr-history-item:hover {
    background: #2d2d44;
}

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

.vr-history-item .status-icon {
    font-size: 14px;
    margin-right: 10px;
}

.vr-history-item .meta {
    flex: 1;
    min-width: 0;
}

.vr-history-item .time {
    font-size: 13px;
    color: #e5e7eb;
}

.vr-history-item .details {
    font-size: 11px;
    color: #9ca3af;
    margin-top: 2px;
}

.vr-history-item .status-badge {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    font-weight: 500;
}

.vr-history-item .status-badge.completed {
    background: #064e3b;
    color: #6ee7b7;
}

.vr-history-item .status-badge.failed {
    background: #7f1d1d;
    color: #fca5a5;
}

.vr-history-item .status-badge.running {
    background: #312e81;
    color: #c4b5fd;
}

.vr-history-empty {
    text-align: center;
    padding: 20px;
    color: #6b7280;
    font-size: 13px;
}

.vr-history-loading {
    text-align: center;
    padding: 20px;
    color: #9ca3af;
}

/* Panel Content */
.virtual-run-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

/* Loading State */
.virtual-run-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    gap: 24px;
}

.virtual-run-loading .loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #2d2d44;
    border-top-color: #10b981;
    border-radius: 50%;
    animation: vr-spin 1s linear infinite;
}

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

.virtual-run-loading .loading-steps p {
    margin: 8px 0;
    font-size: 13px;
    color: #6b7280;
    transition: all 0.3s;
}

.virtual-run-loading .loading-steps p.active {
    color: #10b981;
    font-weight: 500;
}

/* Error State */
.virtual-run-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 48px 24px;
    gap: 16px;
}

.virtual-run-error .error-icon {
    font-size: 48px;
}

.virtual-run-error h3 {
    margin: 0;
    color: #ef4444;
}

.virtual-run-error p {
    color: #9ca3af;
    margin: 0;
}

/* Manifest Styles */
.virtual-run-manifest {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.manifest-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.manifest-header h3 {
    margin: 0;
    font-size: 15px;
    color: #fff;
}

.manifest-mode {
    padding: 4px 10px;
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
}

/* Summary Stats */
.manifest-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.summary-stat {
    background: #1a1a2e;
    border: 1px solid #2d2d44;
    border-radius: 8px;
    padding: 12px 8px;
    text-align: center;
}

.summary-stat .stat-value {
    display: block;
    font-size: 20px;
    font-weight: 600;
    color: #fff;
}

.summary-stat .stat-label {
    display: block;
    font-size: 10px;
    color: #9ca3af;
    margin-top: 4px;
}

.summary-stat.success .stat-value {
    color: #10b981;
}

.summary-stat.warning .stat-value {
    color: #f59e0b;
}

/* Warnings */
.manifest-warnings {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 8px;
    padding: 12px;
}

.warning-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    color: #fca5a5;
}

.warning-item+.warning-item {
    margin-top: 8px;
}

/* Actions List */
.manifest-actions h4 {
    margin: 0 0 12px;
    font-size: 13px;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.actions-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.action-item {
    background: #1a1a2e;
    border: 1px solid #2d2d44;
    border-radius: 8px;
    padding: 12px;
    transition: all 0.2s;
}

.action-item:hover {
    border-color: #3b82f6;
}

.action-item.success {
    border-left: 3px solid #10b981;
}

.action-item.fail {
    border-left: 3px solid #ef4444;
}

.action-item.skipped {
    border-left: 3px solid #6b7280;
    opacity: 0.7;
}

.action-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 11px;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.action-name {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 4px;
}

.action-type {
    font-size: 12px;
    color: #9ca3af;
    margin-bottom: 8px;
    font-family: monospace;
}

.action-affect {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
    font-size: 11px;
    margin-bottom: 8px;
}

.destructive .action-affect {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
}

.action-preview {
    margin-top: 8px;
    background: #0f0f1a;
    border-radius: 4px;
    padding: 8px;
}

.action-preview .preview-label {
    font-size: 10px;
    color: #6b7280;
    margin-bottom: 4px;
}

.action-preview pre,
.action-preview code {
    margin: 0;
    font-family: monospace;
    font-size: 12px;
    color: #d1d5db;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-all;
}

.action-duration {
    margin-top: 8px;
    font-size: 11px;
    color: #4b5563;
    text-align: right;
}

.action-notes {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.action-notes .note {
    font-size: 11px;
    color: #9ca3af;
    background: #2d2d44;
    padding: 2px 6px;
    border-radius: 4px;
}

/* External Effects */
.manifest-effects {
    margin-top: 24px;
}

.manifest-effects h4 {
    margin: 0 0 12px;
    font-size: 13px;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.effect-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    background: #1a1a2e;
    border: 1px solid #2d2d44;
    border-radius: 4px;
    margin-bottom: 8px;
}

.effect-item.destructive {
    border-color: rgba(239, 68, 68, 0.5);
    background: rgba(239, 68, 68, 0.1);
}

.effect-action {
    font-family: monospace;
    font-size: 12px;
    color: #fff;
    padding: 2px 6px;
    background: #2d2d44;
    border-radius: 4px;
}

.effect-target {
    font-size: 13px;
    color: #d1d5db;
    flex: 1;
}

.destructive-badge {
    font-size: 10px;
    color: #ef4444;
    font-weight: 600;
    text-transform: uppercase;
    border: 1px solid #ef4444;
    padding: 2px 4px;
    border-radius: 4px;
}

/* Costs */
.manifest-costs h4 {
    margin: 0 0 12px;
    font-size: 13px;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cost-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.cost-item {
    background: #1a1a2e;
    border: 1px solid #2d2d44;
    border-radius: 4px;
    padding: 8px;
    display: flex;
    flex-direction: column;
}

.cost-label {
    font-size: 10px;
    color: #9ca3af;
}

.cost-value {
    font-size: 14px;
    color: #fff;
    font-weight: 500;
}

/* Panel Actions */
.virtual-run-actions {
    padding: 16px;
    border-top: 1px solid #2d2d44;
    background: #1a1a2e;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex-shrink: 0;
    align-items: stretch;
}

.virtual-run-actions-meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: #9ca3af;
    font-size: 12px;
}

.virtual-run-actions-row {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.virtual-run-actions-row .btn {
    flex: 1 1 140px;
}

.run-real-cost {
    font-size: 12px;
    color: #fbbf24;
}

.run-real-cost strong {
    color: #fde68a;
    font-weight: 600;
}

.run-real-note {
    font-size: 12px;
    color: #9ca3af;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border-radius: 6px;
    background: rgba(148, 163, 184, 0.08);
    border: 1px solid rgba(148, 163, 184, 0.2);
}

.run-real-note .note-icon {
    font-size: 12px;
    opacity: 0.8;
}

.composio-sample-editor {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 8px 0;
}

.composio-sample-editor .sample-title {
    font-size: 16px;
    font-weight: 600;
    color: #f9fafb;
}

.composio-sample-editor .sample-subtitle {
    font-size: 12px;
    color: #7dd3fc;
    font-family: monospace;
}

.composio-sample-editor .sample-help {
    font-size: 13px;
    color: #9ca3af;
    line-height: 1.5;
}

.composio-sample-textarea {
    min-height: 280px;
    width: 100%;
    background: #0f172a;
    border: 1px solid #334155;
    border-radius: 8px;
    color: #e5e7eb;
    font-family: "JetBrains Mono", monospace;
    font-size: 12px;
    line-height: 1.5;
    padding: 12px;
    resize: vertical;
}

.composio-sample-error {
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #fca5a5;
    font-size: 12px;
}

/* ─────────────────────────────────────────────────────────────────
 * Virtual Run sample-file upload widget (lives above the JSON
 * textarea in the Sample Event panel). Styling intentionally plain:
 * the customer test is "is the preview real?", not "is the widget
 * beautiful?".
 * ───────────────────────────────────────────────────────────────── */
.sample-file-dropzone-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sample-file-dropzone {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 8px;
    border: 1px dashed #334155;
    background: rgba(30, 41, 59, 0.6);
    color: #cbd5f5;
    font-size: 12px;
    line-height: 1.4;
}

.sample-file-dropzone.empty {
    justify-content: space-between;
    flex-wrap: wrap;
}

.sample-file-dropzone.has-file {
    border-style: solid;
    background: rgba(34, 197, 94, 0.06);
    border-color: rgba(34, 197, 94, 0.25);
}

.sample-file-dropzone.empty.required {
    border-color: rgba(250, 204, 21, 0.55);
    background: rgba(250, 204, 21, 0.08);
}

.sample-file-required-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 6px;
    background: rgba(250, 204, 21, 0.10);
    border: 1px solid rgba(250, 204, 21, 0.35);
    color: #fde68a;
    font-size: 12px;
    line-height: 1.4;
}

.sample-file-prompt {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 200px;
}

.sample-file-icon {
    font-size: 14px;
}

.sample-file-info {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.sample-file-name {
    color: #e5e7eb;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sample-file-meta {
    color: #9ca3af;
    font-size: 11px;
}

.sample-file-upload-btn {
    cursor: pointer;
    flex-shrink: 0;
}

.sample-file-input-hidden {
    display: none;
}

.sample-file-remove {
    background: transparent;
    border: none;
    color: #fca5a5;
    cursor: pointer;
    font-size: 12px;
    padding: 4px 8px;
}

.sample-file-remove:hover {
    color: #fecaca;
    text-decoration: underline;
}

/* Step-detail "Sample file used" badge + upload CTA + error one-liner */
.step-badge.sample-badge {
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.4);
    color: #86efac;
}

.step-upload-cta {
    margin-top: 6px;
    padding: 8px 10px;
    border-radius: 6px;
    background: rgba(59, 130, 246, 0.1);
    border-left: 3px solid #60a5fa;
    color: #bfdbfe;
    font-size: 12px;
    line-height: 1.4;
}

.step-detail .step-error {
    margin-top: 6px;
    padding: 8px 10px;
    border-radius: 6px;
    background: rgba(239, 68, 68, 0.08);
    color: #fca5a5;
    font-size: 12px;
    line-height: 1.4;
    word-break: break-word;
}

/*
 * Impossible-operation step errors (per impossible-operations Phase 1
 * spec §2 — "the platform has not malfunctioned and must not say so").
 * Info-style affordance — blue / neutral, no warning triangle. The user
 * asked for something the chosen substrate cannot do; the message names
 * what cannot be done and offers a concrete next step.
 */
.step-detail .step-error--impossible {
    background: rgba(59, 130, 246, 0.08);
    color: #bfdbfe;
    border-left: 3px solid #3b82f6;
    padding-left: 12px;
}

.step-detail .step-error--system {
    background: rgba(239, 68, 68, 0.08);
    color: #fca5a5;
    border-left: 3px solid #ef4444;
    padding-left: 12px;
}

.step-detail .step-error .step-error-headline {
    font-weight: 600;
    margin-bottom: 4px;
    font-size: 13px;
}

.step-detail .step-error .step-error-body {
    margin-bottom: 4px;
}

.step-detail .step-error .step-error-workaround {
    font-style: italic;
    opacity: 0.85;
    margin-top: 4px;
}

.virtual-run-actions .btn-run-real {
    width: 100%;
}

.virtual-run-actions-row .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.virtual-run-actions-row .btn-text {
    white-space: nowrap;
}

@media (max-width: 520px) {
    .virtual-run-actions-row {
        flex-direction: column;
    }

    .virtual-run-actions-row .btn {
        width: 100%;
    }

    .btn-run-real .btn-label {
        white-space: normal;
    }
}

@media (max-width: 360px) {
    .virtual-run-actions-row .btn-text {
        display: none;
    }
}

/* Utility */
.btn {
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    font-weight: 500;
}

.btn-primary {
    background: #3b82f6;
    color: #fff;
    border: none;
}

.btn-primary:hover {
    background: #2563eb;
}

.btn-secondary {
    background: #2d2d44;
    color: #fff;
    border: 1px solid #4b5563;
}

.btn-secondary:hover {
    background: #374151;
}

.btn-warning {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #1f2937;
    border: none;
}

.btn-warning:hover {
    background: linear-gradient(135deg, #fbbf24, #d97706);
}

.btn-run-real {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #fff;
    border: none;
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.35);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 600;
    flex-wrap: wrap;
}

.btn-run-real:hover {
    background: linear-gradient(135deg, #1d4ed8, #1e40af);
    box-shadow: 0 12px 26px rgba(37, 99, 235, 0.45);
}

.btn-disabled {
    opacity: 0.7;
    cursor: not-allowed;
    box-shadow: none;
}

.btn-muted {
    background: #2d2d44;
    color: #cbd5f5;
    border: 1px solid #3d3d54;
    box-shadow: none;
}

.btn-warning-soft {
    background: rgba(245, 158, 11, 0.18);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.35);
    box-shadow: none;
}

.btn-run-real.btn-warning {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #1f2937;
    box-shadow: 0 10px 22px rgba(245, 158, 11, 0.35);
}

.btn-run-real.btn-warning:hover {
    background: linear-gradient(135deg, #fbbf24, #d97706);
}

.btn-tertiary {
    background: transparent;
    color: #9ca3af;
    border: 1px solid transparent;
}

.btn-tertiary:hover {
    background: rgba(148, 163, 184, 0.1);
    color: #e5e7eb;
}

.btn-run-real .btn-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.btn-run-real .btn-icon {
    font-size: 16px;
}

.btn-run-real .btn-cost {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    color: rgba(255, 255, 255, 0.9);
    margin-left: auto;
    white-space: nowrap;
}

.btn-run-real.btn-warning .btn-cost {
    background: rgba(31, 41, 55, 0.15);
    color: #1f2937;
}

.btn-run-real.btn-warning-soft .btn-cost,
.btn-run-real.btn-muted .btn-cost {
    background: rgba(148, 163, 184, 0.15);
    color: #cbd5f5;
}

.btn-sm {
    padding: 6px 12px;
    font-size: 12px;
}

/* ============================================
   NEEDS CONNECTION STATE
   ============================================ */

.action-item.needs-connection {
    border-left: 3px solid #f59e0b;
    background: rgba(245, 158, 11, 0.08);
}

.action-item.needs-connection:hover {
    border-color: #f59e0b;
    background: rgba(245, 158, 11, 0.12);
}

.connection-warning-inline {
    margin-top: 12px;
    padding: 12px;
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.connection-warning-inline .warning-message {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fbbf24;
    font-size: 13px;
    font-weight: 500;
}

.connection-warning-inline .warning-icon {
    font-size: 16px;
}

.connection-warning-inline .warning-text {
    flex: 1;
}

.connect-service-btn {
    background: #f59e0b;
    color: #000;
    border: none;
    border-radius: 6px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.connect-service-btn:hover {
    background: #d97706;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4);
}

.connect-service-btn:active {
    transform: translateY(0);
}

/* Highlight pulse animation for connection panel */
.integration-card.highlight-pulse {
    animation: highlight-pulse 0.5s ease-in-out 3;
}

@keyframes highlight-pulse {
    0%, 100% {
        background: rgba(0, 0, 0, 0.2);
        box-shadow: none;
    }
    50% {
        background: rgba(245, 158, 11, 0.2);
        box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.5);
    }
}

/* ============================================
   RICH CONTENT PREVIEW STYLES
   LLM-Generated Content Previews
   ============================================ */

.content-preview {
    margin-top: 12px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #2d2d44;
    background: #0f0f1a;
}

.content-preview .preview-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #1a1a2e;
    border-bottom: 1px solid #2d2d44;
}

.content-preview .platform-icon {
    font-size: 14px;
}

.content-preview .platform-name {
    font-size: 12px;
    font-weight: 500;
    color: #9ca3af;
    flex: 1;
}

.content-preview .preview-body {
    padding: 12px;
}

/* Character Count */
.content-preview .char-count {
    font-size: 11px;
    color: #6b7280;
    font-family: monospace;
}

.content-preview .char-count.near-limit {
    color: #f59e0b;
}

.content-preview .char-count.over-limit {
    color: #ef4444;
    font-weight: 600;
}

/* Twitter Preview */
.twitter-preview .tweet-text {
    font-size: 14px;
    line-height: 1.5;
    color: #e5e7eb;
    white-space: pre-wrap;
    word-break: break-word;
}

.twitter-preview .hashtag,
.linkedin-preview .hashtag,
.instagram-preview .hashtag,
.post-hashtags .hashtag {
    color: #3b82f6;
    font-weight: 500;
}

.twitter-preview .mention {
    color: #3b82f6;
    font-weight: 500;
}

.twitter-preview .link {
    color: #3b82f6;
    text-decoration: none;
}

.twitter-preview .link:hover {
    text-decoration: underline;
}

/* LinkedIn Preview */
.linkedin-preview .linkedin-text {
    font-size: 14px;
    line-height: 1.6;
    color: #e5e7eb;
}

.linkedin-preview .expand-btn {
    background: none;
    border: none;
    color: #3b82f6;
    cursor: pointer;
    font-size: 13px;
    padding: 4px 0;
    font-weight: 500;
}

.linkedin-preview .expand-btn:hover {
    text-decoration: underline;
}

.post-hashtags {
    margin-top: 12px;
    padding-top: 8px;
    border-top: 1px solid #2d2d44;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.post-hashtags .more-hashtags {
    font-size: 12px;
    color: #6b7280;
}

/* Facebook Preview */
.facebook-preview .facebook-text {
    font-size: 14px;
    line-height: 1.5;
    color: #e5e7eb;
}

.facebook-preview .link-preview {
    margin-top: 12px;
    padding: 8px;
    background: #1a1a2e;
    border: 1px solid #2d2d44;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.facebook-preview .link-icon {
    font-size: 14px;
}

.facebook-preview .link-url {
    font-size: 12px;
    color: #9ca3af;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Instagram Preview */
.instagram-preview .media-placeholder {
    background: #1a1a2e;
    border: 2px dashed #2d2d44;
    border-radius: 8px;
    padding: 24px;
    text-align: center;
    margin-bottom: 12px;
    color: #6b7280;
    font-size: 13px;
}

.instagram-preview .instagram-caption {
    font-size: 14px;
    line-height: 1.5;
    color: #e5e7eb;
}

.instagram-preview .hashtag-count,
.hashtag-count {
    margin-top: 8px;
    font-size: 11px;
    color: #6b7280;
}

/* Email Preview */
.email-preview .email-meta {
    background: #1a1a2e;
    padding: 10px 12px;
    border-radius: 4px;
    margin-bottom: 12px;
}

.email-preview .email-to,
.email-preview .email-cc,
.email-preview .email-subject {
    font-size: 13px;
    color: #d1d5db;
    margin: 4px 0;
}

.email-preview .email-subject strong,
.email-preview .email-to strong,
.email-preview .email-cc strong {
    color: #9ca3af;
    font-weight: 500;
}

.email-preview .email-content {
    font-size: 14px;
    line-height: 1.6;
    color: #e5e7eb;
}

.email-preview .email-content p {
    margin: 8px 0;
}

.email-preview .email-content h1,
.email-preview .email-content h2,
.email-preview .email-content h3 {
    color: #fff;
    margin-top: 16px;
    margin-bottom: 8px;
}

/* Slack Preview */
.slack-preview .slack-channel,
.discord-preview .discord-channel,
.teams-preview .teams-channel {
    font-size: 12px;
    color: #6b7280;
    background: #2d2d44;
    padding: 2px 8px;
    border-radius: 4px;
}

.slack-preview .slack-message,
.discord-preview .discord-message,
.teams-preview .teams-message {
    font-size: 14px;
    line-height: 1.5;
    color: #e5e7eb;
}

.slack-preview .slack-message code,
.discord-preview .discord-message code {
    background: #2d2d44;
    padding: 2px 4px;
    border-radius: 3px;
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
    font-size: 12px;
    color: #f472b6;
}

/* Discord Preview - additional styling */
.discord-preview {
    border-color: #5865F2;
}

.discord-preview .preview-header {
    background: rgba(88, 101, 242, 0.1);
}

/* Teams Preview */
.teams-preview {
    border-color: #6264A7;
}

.teams-preview .preview-header {
    background: rgba(98, 100, 167, 0.1);
}

/* Notion Preview */
.notion-preview .notion-title {
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #2d2d44;
}

.notion-preview .notion-content {
    font-size: 14px;
    line-height: 1.6;
    color: #d1d5db;
    max-height: 200px;
    overflow-y: auto;
}

.notion-preview .notion-content h1,
.notion-preview .notion-content h2,
.notion-preview .notion-content h3 {
    color: #fff;
    margin-top: 12px;
    margin-bottom: 8px;
}

.notion-preview .notion-content li {
    margin: 4px 0;
}

/* Generic Preview */
.generic-preview .generic-text {
    font-size: 14px;
    line-height: 1.5;
    color: #e5e7eb;
}

.generic-preview pre {
    font-size: 11px;
    color: #9ca3af;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-all;
    margin: 0;
}

/* Engagement Estimate */
.engagement-estimate {
    margin-top: 12px;
    padding-top: 8px;
    border-top: 1px solid #2d2d44;
    font-size: 11px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.engagement-label {
    color: #6b7280;
}

.engagement-value {
    padding: 2px 10px;
    border-radius: 10px;
    font-weight: 500;
    text-transform: capitalize;
}

.engagement-value.high {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

.engagement-value.medium {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

.engagement-value.low {
    background: rgba(107, 114, 128, 0.2);
    color: #9ca3af;
}

/* Word Count */
.word-count {
    margin-top: 8px;
    font-size: 11px;
    color: #6b7280;
    text-align: right;
}

/* Basic preview fallback */
.action-preview.basic {
    margin-top: 8px;
    background: #0f0f1a;
    border-radius: 4px;
    padding: 8px;
    border: 1px solid #2d2d44;
}

.action-preview.basic .preview-label {
    font-size: 10px;
    color: #6b7280;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Platform-specific colors */
.twitter-preview .preview-header {
    background: rgba(29, 155, 240, 0.1);
}

.linkedin-preview .preview-header {
    background: rgba(10, 102, 194, 0.1);
}

.facebook-preview .preview-header {
    background: rgba(24, 119, 242, 0.1);
}

.instagram-preview .preview-header {
    background: linear-gradient(135deg, rgba(131, 58, 180, 0.1), rgba(253, 29, 29, 0.1), rgba(252, 176, 69, 0.1));
}

.email-preview .preview-header {
    background: rgba(239, 68, 68, 0.1);
}

.slack-preview .preview-header {
    background: rgba(74, 21, 75, 0.1);
}

.notion-preview .preview-header {
    background: rgba(255, 255, 255, 0.05);
}

/* Loading state for content generation */
.content-preview.generating {
    position: relative;
}

.content-preview.generating::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, #3b82f6, #8b5cf6, #3b82f6);
    background-size: 200% 100%;
    animation: content-generating 1.5s ease-in-out infinite;
}

@keyframes content-generating {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Responsive adjustments */
@media (max-width: 400px) {
    .content-preview .preview-header {
        flex-wrap: wrap;
        gap: 4px;
    }

    .content-preview .platform-name {
        flex: 0 0 100%;
        order: 2;
    }

    .content-preview .char-count {
        order: 3;
    }

    .slack-preview .slack-channel,
    .discord-preview .discord-channel,
    .teams-preview .teams-channel {
        order: 3;
        margin-left: auto;
    }
}


/* ============================================
   LIVE SIMULATION MODE STYLES
   Connection Gate, Visual Previews, Results
   ============================================ */

/* Connection Check Loading */
.connection-check-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    gap: 16px;
}

.connection-check-loading p {
    color: #9ca3af;
    font-size: 14px;
}

/* Connection Gate */
.connection-gate {
    padding: 24px;
}

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

.gate-icon {
    font-size: 32px;
}

.gate-header h3 {
    margin: 0;
    color: #f59e0b;
    font-size: 18px;
}

.gate-description {
    color: #9ca3af;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 20px;
}

.missing-connections-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}

.missing-connection-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #1a1a2e;
    border: 1px solid #2d2d44;
    border-radius: 8px;
}

.missing-connection-item .connection-icon {
    font-size: 20px;
}

.missing-connection-item .connection-name {
    flex: 1;
    color: #fff;
    font-weight: 500;
}

.missing-connection-item .connection-status {
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 12px;
}

.missing-connection-item .connection-status.not-connected {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
}

.missing-connection-item .connect-btn {
    padding: 6px 14px;
    font-size: 12px;
}

.gate-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.gate-note {
    text-align: center;
    font-size: 12px;
    color: #6b7280;
}

.connecting-message {
    text-align: center;
    color: #9ca3af;
    margin-bottom: 12px;
}

/* =========================================================================
   Resource Gate — mirrors Connection Gate structure
   ========================================================================= */

.resource-gate {
    padding: 24px;
}

.resource-gate .gate-header h3 {
    color: #818cf8;
}

.unbound-resources-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}

.unbound-resource-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #1a1a2e;
    border: 1px solid #2d2d44;
    border-radius: 8px;
}

.unbound-resource-item .resource-app-icon {
    font-size: 20px;
    flex-shrink: 0;
}

.unbound-resource-item .resource-item-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.unbound-resource-item .resource-item-name {
    color: #fff;
    font-weight: 500;
    font-size: 14px;
}

.unbound-resource-item .resource-item-step {
    color: #9ca3af;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.resource-status {
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 12px;
    white-space: nowrap;
    flex-shrink: 0;
}

.resource-status.not-selected {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
}

.resource-status.selected {
    background: rgba(34, 197, 94, 0.2);
    color: #4ade80;
}

.unbound-resource-item .resource-select-btn {
    padding: 6px 14px;
    font-size: 12px;
    flex-shrink: 0;
}

/* Suggested resource state */
.unbound-resource-item.suggested {
    flex-wrap: wrap;
    border-color: rgba(245, 158, 11, 0.3);
}

.resource-status.suggested {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
}

.resource-suggestion-context {
    font-size: 12px;
    color: #818cf8;
    font-style: italic;
}

.unbound-resource-item .resource-accept-btn {
    padding: 6px 14px;
    font-size: 12px;
    flex-shrink: 0;
}

/* Connection Status Banner */
.connection-status-banner {
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
}

.connection-status-banner.warning {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.connection-status-banner .banner-icon {
    font-size: 20px;
}

.connection-status-banner .banner-content {
    flex: 1;
}

.connection-status-banner strong {
    display: block;
    color: #fbbf24;
    font-size: 13px;
    margin-bottom: 8px;
}

.missing-services {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.missing-service {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #1a1a2e;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    color: #d1d5db;
}

.missing-service .connect-link {
    color: #3b82f6;
    font-weight: 500;
    text-decoration: none;
}

.missing-service .connect-link:hover {
    text-decoration: underline;
}

/* Simulation Header */
.simulation-header {
    margin-bottom: 20px;
}

.simulation-header h3 {
    margin: 0 0 12px;
    color: #10b981;
    font-size: 16px;
}

.simulation-stats {
    display: flex;
    gap: 12px;
}

.simulation-stats .stat {
    flex: 1;
    background: #1a1a2e;
    border: 1px solid #2d2d44;
    border-radius: 8px;
    padding: 12px 8px;
    text-align: center;
}

.simulation-stats .stat-value {
    display: block;
    font-size: 24px;
    font-weight: 600;
    color: #fff;
}

.simulation-stats .stat-label {
    display: block;
    font-size: 11px;
    color: #9ca3af;
    margin-top: 4px;
}

.simulation-stats .stat.live {
    border-color: #10b981;
}

.simulation-stats .stat.live .stat-value {
    color: #10b981;
}

.simulation-stats .stat.intercepted {
    border-color: #8b5cf6;
}

.simulation-stats .stat.intercepted .stat-value {
    color: #8b5cf6;
}

/* Visual Previews Section */
.visual-previews-section {
    margin-bottom: 20px;
}

.visual-previews-section h4 {
    margin: 0 0 16px;
    font-size: 14px;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.visual-previews-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Preview Cards */
.preview-card {
    background: #0f0f1a;
    border: 1px solid #2d2d44;
    border-radius: 12px;
    overflow: hidden;
}

.preview-card .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid #2d2d44;
}

.platform-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
}

.platform-badge.twitter {
    background: rgba(29, 155, 240, 0.15);
    color: #1d9bf0;
}

.platform-badge.linkedin {
    background: rgba(10, 102, 194, 0.15);
    color: #0a66c2;
}

.platform-badge.facebook {
    background: rgba(24, 119, 242, 0.15);
    color: #1877f2;
}

.platform-badge.instagram {
    background: linear-gradient(135deg, rgba(131, 58, 180, 0.15), rgba(253, 29, 29, 0.15));
    color: #e1306c;
}

.platform-badge.email {
    background: rgba(234, 67, 53, 0.15);
    color: #ea4335;
}

.platform-badge.slack {
    background: rgba(74, 21, 75, 0.15);
    color: #4a154b;
}

.platform-badge.discord {
    background: rgba(88, 101, 242, 0.15);
    color: #5865f2;
}

.platform-badge.notion {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.platform-badge.calendar {
    background: rgba(66, 133, 244, 0.15);
    color: #4285f4;
}

.platform-badge.generic {
    background: rgba(107, 114, 128, 0.15);
    color: #9ca3af;
}

.platform-badge .platform-icon {
    font-weight: 700;
}

.char-counter {
    font-size: 12px;
    font-family: monospace;
    color: #6b7280;
}

.char-counter.warning {
    color: #f59e0b;
}

.char-counter.over {
    color: #ef4444;
    font-weight: 600;
}

.preview-card .card-body {
    padding: 14px;
}

/* Tweet/Post Author */
.tweet-author,
.post-author,
.message-author {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.author-avatar {
    width: 40px;
    height: 40px;
    background: #2d2d44;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.author-info {
    display: flex;
    flex-direction: column;
}

.author-name {
    font-weight: 600;
    color: #fff;
    font-size: 14px;
}

.author-handle,
.author-title,
.post-time,
.message-time {
    font-size: 12px;
    color: #6b7280;
}

/* Tweet Content */
.tweet-content,
.post-content,
.message-content {
    font-size: 14px;
    line-height: 1.5;
    color: #e5e7eb;
    margin-bottom: 12px;
}

.tweet-content .hashtag,
.post-content .hashtag {
    color: #3b82f6;
}

.tweet-content .mention,
.post-content .mention {
    color: #3b82f6;
}

/* Actions row */
.tweet-actions,
.post-actions {
    display: flex;
    gap: 24px;
    padding-top: 8px;
    border-top: 1px solid #2d2d44;
}

.tweet-actions .action,
.post-actions .action {
    color: #6b7280;
    font-size: 14px;
    cursor: default;
}

/* Card Footer */
.preview-card .card-footer {
    padding: 8px 14px;
    background: #1a1a2e;
    border-top: 1px solid #2d2d44;
}

.preview-badge {
    font-size: 11px;
    color: #10b981;
    font-weight: 500;
}

/* Instagram specific */
.instagram-card .image-placeholder {
    background: #1a1a2e;
    border: 2px dashed #2d2d44;
    border-radius: 8px;
    padding: 32px;
    text-align: center;
    margin-bottom: 12px;
}

.image-placeholder span {
    display: block;
    color: #6b7280;
}

.image-placeholder .image-note {
    font-size: 12px;
    margin-top: 4px;
}

.post-caption {
    font-size: 14px;
    color: #e5e7eb;
    line-height: 1.5;
}

.post-caption strong {
    color: #fff;
}

/* Email specific */
.email-card .email-fields {
    background: #1a1a2e;
    border-radius: 6px;
    padding: 10px 12px;
    margin-bottom: 12px;
}

.email-field {
    display: flex;
    gap: 8px;
    font-size: 13px;
    padding: 4px 0;
}

.email-field:not(:last-child) {
    border-bottom: 1px solid #2d2d44;
}

.email-field .field-label {
    color: #6b7280;
    min-width: 60px;
}

.email-field .field-value {
    color: #d1d5db;
}

.email-field .field-value.subject {
    color: #fff;
    font-weight: 500;
}

.email-card .email-body {
    font-size: 14px;
    line-height: 1.6;
    color: #d1d5db;
    white-space: pre-wrap;
}

/* Slack/Discord channel name */
.channel-name {
    background: #2d2d44;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    color: #9ca3af;
}

/* Notion specific */
.notion-card .notion-title {
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #2d2d44;
}

.notion-card .notion-content {
    font-size: 14px;
    line-height: 1.6;
    color: #d1d5db;
    max-height: 150px;
    overflow-y: auto;
}

/* Calendar specific */
.calendar-card .calendar-title {
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #2d2d44;
}

.calendar-card .calendar-fields {
    background: #1a1a2e;
    border-radius: 6px;
    padding: 10px 12px;
    margin-bottom: 12px;
}

.calendar-card .calendar-field {
    display: flex;
    gap: 8px;
    font-size: 13px;
    padding: 4px 0;
}

.calendar-card .calendar-field:not(:last-child) {
    border-bottom: 1px solid #2d2d44;
}

.calendar-card .calendar-field .field-label {
    color: #6b7280;
    min-width: 80px;
}

.calendar-card .calendar-field .field-value {
    color: #d1d5db;
}

.calendar-card .calendar-description {
    font-size: 14px;
    line-height: 1.6;
    color: #d1d5db;
    white-space: pre-wrap;
}

/* Output Artifacts — Published Content (collapsible, defaults open) */
.output-artifacts-section {
    margin-top: 20px;
    border: 1px solid #2d2d44;
    border-radius: 8px;
    background: #1a1a2e;
}

.output-artifacts-section summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    cursor: pointer;
    font-size: 13px;
    color: #9ca3af;
}

.output-artifacts-section summary:hover {
    color: #fff;
}

.output-artifacts-section summary .summary-icon {
    font-size: 14px;
}

.artifacts-list {
    padding: 0 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.artifact-card {
    background: #0f0f1a;
    border: 1px solid #2d2d44;
    border-left: 3px solid #10b981;
    border-radius: 6px;
    overflow: hidden;
}

.artifact-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid #2d2d44;
}

.artifact-platform-icon {
    font-size: 14px;
}

.artifact-type-label {
    font-size: 11px;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-weight: 500;
}

.artifact-time {
    margin-left: auto;
    font-size: 11px;
    color: #6b7280;
}

.artifact-card-body {
    padding: 10px 12px;
}

.artifact-title {
    font-size: 13px;
    color: #fff;
    font-weight: 500;
    line-height: 1.4;
}

.artifact-description {
    font-size: 12px;
    color: #9ca3af;
    margin-top: 4px;
}

.artifact-unverified {
    display: inline-block;
    font-size: 11px;
    color: #6b7280;
    margin-top: 4px;
    font-style: italic;
}

.artifact-card-footer {
    padding: 6px 12px;
    background: #1a1a2e;
    border-top: 1px solid #2d2d44;
}

.artifact-link {
    font-size: 12px;
    color: #60a5fa;
    text-decoration: none;
    font-weight: 500;
}

.artifact-link:hover {
    color: #93bbfc;
    text-decoration: underline;
}

.artifact-copy-btn {
    background: none;
    border: none;
    color: #9ca3af;
    font-size: 12px;
    cursor: pointer;
    padding: 0;
    font-family: inherit;
}

.artifact-copy-btn:hover {
    color: #fff;
}

.artifact-copy-btn .copy-hint {
    color: #6b7280;
}

/* Step Details (collapsible) */
.step-details-section {
    margin-top: 20px;
    border: 1px solid #2d2d44;
    border-radius: 8px;
    background: #1a1a2e;
}

.step-details-section summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    cursor: pointer;
    font-size: 13px;
    color: #9ca3af;
}

.step-details-section summary:hover {
    color: #fff;
}

.step-details-section summary .summary-icon {
    font-size: 14px;
}

.steps-list {
    padding: 0 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.step-detail {
    background: #0f0f1a;
    border: 1px solid #2d2d44;
    border-radius: 6px;
    padding: 10px 12px;
}

.step-detail.success {
    border-left: 3px solid #10b981;
}

.step-detail.would_fail {
    border-left: 3px solid #ef4444;
}

.step-detail .step-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.step-number {
    font-size: 11px;
    color: #6b7280;
    text-transform: uppercase;
}

.step-status {
    font-size: 14px;
}

.step-name {
    flex: 1;
    font-size: 13px;
    color: #fff;
    font-weight: 500;
}

.step-badge {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 10px;
}

.step-badge.live {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

.step-badge.intercepted {
    background: rgba(139, 92, 246, 0.2);
    color: #8b5cf6;
}

.step-badge.auto-badge {
    background: rgba(107, 114, 128, 0.2);
    color: #9ca3af;
    font-size: 9px;
    padding: 1px 6px;
}

.step-action {
    font-size: 11px;
    font-family: monospace;
    color: #6b7280;
}

/* Create-action warning for recurring workflows */
.create-action-warning {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 6px;
    padding: 6px 8px;
    background: rgba(234, 179, 8, 0.08);
    border: 1px solid rgba(234, 179, 8, 0.25);
    border-radius: 4px;
}

.create-action-warning-icon {
    flex-shrink: 0;
    font-size: 12px;
    line-height: 1.4;
}

.create-action-warning-text {
    font-size: 11px;
    line-height: 1.4;
    color: #eab308;
}

.step-duration {
    font-size: 10px;
    color: #4b5563;
    margin-top: 4px;
}

/* Resource Estimates */
.resource-estimates {
    margin-top: 20px;
}

.resource-estimates h4 {
    margin: 0 0 12px;
    font-size: 13px;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.estimates-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.estimate-item {
    background: #1a1a2e;
    border: 1px solid #2d2d44;
    border-radius: 6px;
    padding: 10px;
    text-align: center;
}

.estimate-value {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
}

.estimate-label {
    display: block;
    font-size: 10px;
    color: #6b7280;
    margin-top: 2px;
}

/* Cost Breakdown */
.cost-breakdown {
    margin-top: 20px;
}

.cost-breakdown h4 {
    margin: 0 0 12px;
    font-size: 13px;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cost-rows {
    background: #1a1a2e;
    border: 1px solid #2d2d44;
    border-radius: 6px;
    padding: 10px 14px;
}

.cost-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    font-size: 13px;
}

.cost-row .cost-label {
    color: #9ca3af;
}

.cost-row .cost-value {
    color: #e5e7eb;
    font-variant-numeric: tabular-nums;
}

.cost-row.cost-total {
    border-top: 1px solid #2d2d44;
    margin-top: 6px;
    padding-top: 8px;
    font-weight: 600;
}

.cost-row.cost-total .cost-label,
.cost-row.cost-total .cost-value {
    color: #fff;
}

.cost-row.cost-charged .cost-value {
    color: #10b981;
}

.cost-disclosure {
    margin: 10px 0 0;
    font-size: 11px;
    color: #6b7280;
    line-height: 1.4;
}

.cost-row.cost-detail {
    padding: 2px 0;
}

.cost-detail-text {
    font-size: 11px;
    color: #6b7280;
    font-style: italic;
}

/* Button states */
.btn-outline {
    background: transparent;
    border: 1px solid #4b5563;
    color: #d1d5db;
}

.btn-outline:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #6b7280;
}

.btn-disabled {
    opacity: 0.7;
    cursor: not-allowed;
    box-shadow: none;
}

/* Live Simulation Results container */
.live-simulation-results {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* See more button in LinkedIn */
.see-more {
    background: none;
    border: none;
    color: #3b82f6;
    cursor: pointer;
    font-size: 13px;
    padding: 0;
    margin-left: 4px;
}

.see-more:hover {
    text-decoration: underline;
}

/* ============================================
   QUALITY CHECK WARNING STYLES
   ============================================ */

.quality-warning {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.35);
    border-radius: 8px;
    padding: 12px 14px;
    margin: 12px 14px;
}

.quality-warning-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.quality-warning-header .warning-icon {
    font-size: 16px;
}

.quality-warning-header .warning-title {
    font-size: 13px;
    font-weight: 600;
    color: #fca5a5;
}

.quality-issues-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.quality-issue {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    border-left: 3px solid #ef4444;
}

.quality-issue.warning {
    border-left-color: #f59e0b;
}

.quality-issue .issue-type {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #f87171;
}

.quality-issue.warning .issue-type {
    color: #fbbf24;
}

.quality-issue .issue-message {
    font-size: 12px;
    color: #fca5a5;
    line-height: 1.4;
    word-break: break-word;
}

.quality-issue.warning .issue-message {
    color: #fde68a;
}

/* Quality warning in card context adjustments */
.preview-card .quality-warning {
    margin-left: 0;
    margin-right: 0;
    border-radius: 0;
    border-left: none;
    border-right: none;
}

/* ============================================
   QUALITY BADGE STYLES
   Shows pass/fail status with retry info
   ============================================ */

.quality-badge {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12px;
    padding: 10px 14px;
    margin: 0 14px 8px;
    border-radius: 6px;
}

.quality-badge .badge-icon {
    font-size: 14px;
    line-height: 1;
}

.quality-badge .badge-text {
    font-weight: 600;
}

.quality-badge .badge-attempts {
    font-size: 10px;
    opacity: 0.8;
    margin-left: 4px;
}

.quality-badge .badge-review {
    font-size: 10px;
    background: rgba(239, 68, 68, 0.3);
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 8px;
}

/* Passed state - green success */
.quality-badge.passed {
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: #10b981;
}

.quality-badge.passed .badge-text {
    color: #34d399;
}

/* Failed state - needs review */
.quality-badge.failed {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #fca5a5;
    flex-direction: column;
}

.quality-badge.failed .badge-text {
    color: #f87171;
}

/* Issues list within failed badge */
.quality-badge .quality-issues {
    width: 100%;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(239, 68, 68, 0.2);
    font-size: 11px;
}

.quality-badge .quality-issues .issue {
    margin: 4px 0;
    padding-left: 8px;
    line-height: 1.4;
    color: #fca5a5;
}

/* Quality badge in preview card context */
.preview-card .quality-badge {
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
    border-radius: 0;
    border-left: none;
    border-right: none;
}

/* Animation for retry indicator */
@keyframes quality-retry-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.6;
    }
}

.quality-badge.passed .badge-attempts {
    animation: quality-retry-pulse 2s ease-in-out;
}

/* ============================================
   LAYOUT CONTROLS ADJUSTMENT
   When Virtual Run panel is open, move layout
   controls left to avoid overlap
   ============================================ */

body.virtual-run-panel-open #workflow-editor-toolbar {
    transform: translateX(-400px);
    transition: transform 0.3s ease;
}

body.virtual-run-panel-open .workflow-controls,
body.virtual-run-panel-open .layout-controls {
    transform: translateX(-400px);
    transition: transform 0.3s ease;
}

/* Ensure smooth transition when panel closes */
#workflow-editor-toolbar,
.workflow-controls,
.layout-controls {
    transition: transform 0.3s ease;
}

/* Mobile: don't translate, panel takes full width */
@media (max-width: 768px) {
    body.virtual-run-panel-open #workflow-editor-toolbar,
    body.virtual-run-panel-open .workflow-controls,
    body.virtual-run-panel-open .layout-controls {
        transform: none;
    }
}

/* ============================================
   GENERATED IMAGE PREVIEW STYLES
   AI-generated images for social posts
   ============================================ */

.preview-image-container {
    margin-bottom: 12px;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
}

.preview-image {
    width: 100%;
    max-height: 180px;
    object-fit: cover;
    cursor: pointer;
    transition: all 0.3s ease;
    display: block;
}

.preview-image:hover {
    opacity: 0.95;
    transform: scale(1.01);
}

.preview-image.expanded {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 90vw;
    max-height: 90vh;
    width: auto;
    height: auto;
    max-height: none;
    z-index: 2000;
    border-radius: 12px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.preview-image.expanded::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: -1;
}

.image-badge {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.75);
    color: #10b981;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

/* ============================================
   TEXT/LLM CONTENT CARD STYLES
   For research, summarization, analysis steps
   ============================================ */

.text-content-card {
    border-color: #3b82f6;
}

.text-content-card .card-header {
    background: rgba(59, 130, 246, 0.1);
}

.platform-badge.llm {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
}

.text-content-card .text-content-output {
    background: #0a0a14;
    padding: 12px;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.6;
    color: #d1d5db;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 250px;
    overflow-y: auto;
    margin: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

.text-content-card .card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.text-content-card .text-muted {
    font-size: 11px;
    color: #6b7280;
}

/* ============================================
   CODE OUTPUT CARD STYLES
   For Python/code execution steps
   ============================================ */

.code-output-card {
    border-color: #8b5cf6;
}

.code-output-card.success {
    border-color: #10b981;
}

.code-output-card.has-error {
    border-color: #ef4444;
}

.code-output-card .card-header {
    background: rgba(139, 92, 246, 0.1);
}

.code-output-card.success .card-header {
    background: rgba(16, 185, 129, 0.1);
}

.code-output-card.has-error .card-header {
    background: rgba(239, 68, 68, 0.1);
}

.platform-badge.code {
    background: rgba(139, 92, 246, 0.15);
    color: #a78bfa;
}

.platform-badge.code.success {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
}

.platform-badge.code.error {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
}

.code-output-card .code-section {
    margin-bottom: 12px;
}

.code-output-card .code-section:last-child {
    margin-bottom: 0;
}

.code-output-card .code-section-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6b7280;
    margin-bottom: 6px;
}

.code-output-card .code-section.error .code-section-label {
    color: #f87171;
}

.code-output-card .code-stdout {
    background: #0a0a14;
    padding: 12px;
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.5;
    color: #10b981;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 200px;
    overflow-y: auto;
    margin: 0;
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
}

.code-output-card .code-stderr {
    background: rgba(239, 68, 68, 0.1);
    padding: 12px;
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.5;
    color: #f87171;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 150px;
    overflow-y: auto;
    margin: 0;
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.code-output-card .card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.code-output-card .text-muted {
    font-size: 11px;
    color: #6b7280;
}

/* Step outputs section styling */
.visual-previews-section.step-outputs h4 {
    color: #60a5fa;
}

.visual-previews-section.write-actions h4 {
    color: #10b981;
}

/* ============================================
   SIMULATION HISTORY SECTION
   Collapsible history of past simulations
   ============================================ */

.simulation-history {
    border-top: 1px solid #374151;
    margin-top: 16px;
}

.simulation-history-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 0;
    cursor: pointer;
    color: #9ca3af;
    font-size: 13px;
    -webkit-user-select: none;
    user-select: none;
    transition: color 150ms ease;
}

.simulation-history-header:hover {
    color: #e5e7eb;
}

.simulation-history-header .history-toggle-icon {
    font-size: 10px;
    width: 14px;
    transition: transform 150ms ease;
}

.simulation-history-header .history-title {
    font-weight: 500;
}

.simulation-history-list {
    max-height: 300px;
    overflow-y: auto;
    padding-bottom: 8px;
}

.simulation-history-empty {
    padding: 20px;
    text-align: center;
    color: #6b7280;
    font-size: 13px;
}

.simulation-history-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 150ms ease;
    margin-bottom: 4px;
}

.simulation-history-item:hover {
    background: #1f2937;
}

.simulation-history-item:active {
    background: #374151;
}

.simulation-history-item .status-icon {
    width: 20px;
    flex-shrink: 0;
    font-size: 14px;
    text-align: center;
}

.simulation-history-item .status-icon.success {
    color: #22c55e;
}

.simulation-history-item .status-icon.failed {
    color: #ef4444;
}

.simulation-history-item .status-icon.running {
    color: #f59e0b;
    animation: pulse-running 1.5s ease-in-out infinite;
}

.simulation-history-item .status-icon.cancelled {
    color: #6b7280;
}

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

.simulation-history-item .meta {
    flex: 1;
    margin-left: 8px;
    font-size: 13px;
    color: #d1d5db;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.simulation-history-item .meta .time {
    color: #9ca3af;
}

.simulation-history-item .meta .details {
    color: #6b7280;
}

.simulation-history-item .meta .error-hint {
    color: #f87171;
    margin-left: 8px;
    font-size: 11px;
    font-weight: 500;
}

.simulation-history-item .delete-btn {
    opacity: 0;
    padding: 4px 8px;
    background: transparent;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    font-size: 14px;
    transition: opacity 150ms, color 150ms;
    border-radius: 4px;
}

.simulation-history-item:hover .delete-btn {
    opacity: 1;
}

.simulation-history-item .delete-btn:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

.simulation-history .load-more {
    width: 100%;
    padding: 8px;
    margin-top: 8px;
    background: transparent;
    border: 1px solid #374151;
    border-radius: 6px;
    color: #9ca3af;
    cursor: pointer;
    font-size: 13px;
    transition: all 150ms ease;
}

.simulation-history .load-more:hover {
    background: #1f2937;
    color: #e5e7eb;
    border-color: #4b5563;
}

.simulation-history .load-more:active {
    background: #374151;
}

/* Scrollbar styling for history list */
.simulation-history-list::-webkit-scrollbar {
    width: 6px;
}

.simulation-history-list::-webkit-scrollbar-track {
    background: transparent;
}

.simulation-history-list::-webkit-scrollbar-thumb {
    background: #374151;
    border-radius: 3px;
}

.simulation-history-list::-webkit-scrollbar-thumb:hover {
    background: #4b5563;
}

/* Historic simulation indicator */
.simulation-header.historic h3 {
    color: #9ca3af;
}

.simulation-header.historic h3::after {
    content: ' (historic)';
    font-size: 12px;
    font-weight: 400;
    color: #6b7280;
}

/* Status-aware header colours (added 2026-05-24): failed (red) and
   partial (amber) replace the default success-green for the header h3
   when manifest.status indicates the run didn't cleanly succeed. The
   per-step badges inside renderStepDetails are still the canonical
   detail surface; these styles drive the at-a-glance signal at the
   top of the panel. */
.simulation-header.failed h3 {
    color: #ef4444;
}

.simulation-header.partial h3 {
    color: #f59e0b;
}

.simulation-stats .stat.would-fail .stat-value {
    color: #ef4444;
}

/* No .stat-label colour override here: sibling stat modifiers
   (.live, .intercepted) leave the label at the default #9ca3af
   gray-400, which has acceptable contrast against the panel's dark
   background. The round-1 implementation carried a #b91c1c label
   that CodeRabbit flagged for low contrast; removed in favour of
   the sibling convention instead of introducing a new hex. */

/* ============================================
   INNGEST PROGRESS BAR
   Used for durable virtual run execution
   ============================================ */

.simulation-progress {
    padding: 20px;
    background: linear-gradient(135deg, #1a1a2e 0%, #16162a 100%);
    border-radius: 12px;
    margin-bottom: 16px;
    border: 1px solid #2d2d44;
}

.progress-bar-container {
    height: 8px;
    background: #2d2d44;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 12px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
}

.progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6, #60a5fa, #93c5fd);
    background-size: 200% 100%;
    border-radius: 4px;
    transition: width 400ms cubic-bezier(0.4, 0, 0.2, 1);
    animation: progress-shimmer 2s ease infinite;
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
}

@keyframes progress-shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

.progress-status {
    font-size: 14px;
    color: #e5e7eb;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
}

.progress-status .spinner {
    display: inline-block;
    animation: spin 1s linear infinite;
    font-size: 18px;
    color: #60a5fa;
}

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

.progress-note {
    font-size: 12px;
    color: #6b7280;
    margin: 12px 0 0 0;
    padding: 8px 12px;
    background: rgba(59, 130, 246, 0.1);
    border-radius: 6px;
    border-left: 3px solid #3b82f6;
}

/* Step pills showing progress */
.steps-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}

.step-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: 11px;
    border-radius: 12px;
    background: #2d2d44;
    color: #9ca3af;
    border: 1px solid #3d3d5c;
    transition: all 200ms ease;
}

.step-pill.completed {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
    border-color: rgba(16, 185, 129, 0.3);
}

.step-pill.simulated {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
    border-color: rgba(245, 158, 11, 0.3);
}

.step-pill.running {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
    border-color: rgba(59, 130, 246, 0.3);
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.6;
    }
}

/* Toast notifications */
.virtual-run-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    z-index: 1000;
    animation: toast-slide-in 300ms ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

@keyframes toast-slide-in {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.virtual-run-toast.success {
    background: #10b981;
    color: white;
}

.virtual-run-toast.error {
    background: #ef4444;
    color: white;
}

.virtual-run-toast.warning {
    background: #f59e0b;
    color: white;
}

.virtual-run-toast.info {
    background: #3b82f6;
    color: white;
}

/* ============================================
   UNIFIED RUNS PANEL - TAB BAR
   Three tabs: Current, Simulations, Executions
   ============================================ */

#virtual-run-panel {
    width: 450px; /* Slightly wider for unified panel */
}

.runs-tab-bar {
    display: flex;
    border-bottom: 1px solid #2d2d44;
    background: #1a1a2e;
    padding: 0 16px;
}

.runs-tab {
    flex: 1;
    padding: 12px 8px;
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    position: relative;
    transition: color 0.2s;
    text-align: center;
}

.runs-tab:hover {
    color: #e5e7eb;
}

.runs-tab.active {
    color: #fff;
}

.runs-tab.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 16px;
    right: 16px;
    height: 2px;
    background: #3b82f6;
    border-radius: 1px 1px 0 0;
}

.runs-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    margin-left: 6px;
    padding: 0 5px;
    background: #2d2d44;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 600;
    color: #9ca3af;
}

.runs-tab.active .runs-tab-count {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
}

/* Tab content containers */
.runs-tab-content {
    display: none;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}

.runs-tab-content.active {
    display: flex;
}

/* ============================================
   RUNS LIST ITEMS
   Used in both Simulations and Executions tabs
   ============================================ */

.runs-list {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px;
}

.runs-list-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    background: #1a1a2e;
    border: 1px solid #2d2d44;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    margin-bottom: 8px;
}

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

.runs-list-item:hover {
    background: #252540;
    border-color: #3d3d5c;
}

.runs-list-item:active {
    background: #2d2d44;
}

.runs-list-item .status-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 4px;
}

.runs-list-item .status-indicator.completed,
.runs-list-item .status-indicator.success {
    background: #22c55e;
    box-shadow: 0 0 6px rgba(34, 197, 94, 0.4);
}

.runs-list-item .status-indicator.failed {
    background: #ef4444;
    box-shadow: 0 0 6px rgba(239, 68, 68, 0.4);
}

.runs-list-item .status-indicator.running {
    background: #3b82f6;
    box-shadow: 0 0 6px rgba(59, 130, 246, 0.4);
    animation: pulse-indicator 1.5s ease-in-out infinite;
}

.runs-list-item .status-indicator.partial {
    background: #eab308;
    box-shadow: 0 0 6px rgba(234, 179, 8, 0.4);
}

@keyframes pulse-indicator {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.6;
        transform: scale(0.9);
    }
}

.runs-list-item .run-info {
    flex: 1;
    min-width: 0;
}

.runs-list-item .run-time {
    font-size: 14px;
    color: #e5e7eb;
    font-weight: 500;
    margin-bottom: 4px;
}

.runs-list-item .run-meta {
    font-size: 12px;
    color: #6b7280;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.runs-list-item .run-meta span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.runs-list-item .run-type-badge {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 10px;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.3px;
    flex-shrink: 0;
}

.runs-list-item .run-type-badge.simulation {
    background: rgba(139, 92, 246, 0.15);
    color: #a78bfa;
    border: 1px solid rgba(139, 92, 246, 0.3);
}

.runs-list-item .run-type-badge.execution {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.runs-list-item .run-type-badge.manual {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
}

.runs-list-item .run-type-badge.cron {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
}

.runs-list-item .run-type-badge.webhook {
    background: rgba(236, 72, 153, 0.15);
    color: #f472b6;
}

.runs-list-item .run-type-badge.composio_event {
    background: rgba(14, 165, 233, 0.15);
    color: #7dd3fc;
}

/* ============================================
   RUNS EMPTY STATES
   ============================================ */

.runs-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 32px;
    text-align: center;
}

.runs-empty-state .empty-icon {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.6;
}

.runs-empty-state .empty-title {
    font-size: 15px;
    font-weight: 600;
    color: #d1d5db;
    margin-bottom: 8px;
}

.runs-empty-state .empty-hint {
    font-size: 13px;
    color: #6b7280;
    max-width: 280px;
    line-height: 1.5;
}

/* ============================================
   RUNS TOOLBAR BUTTON
   Button in workflow editor toolbar
   ============================================ */

#runs-toolbar-btn {
    position: relative;
}

#runs-toolbar-btn .runs-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: #3b82f6;
    color: white;
    border-radius: 9px;
    font-size: 10px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

#runs-toolbar-btn .runs-badge:empty {
    display: none;
}

#runs-toolbar-btn .runs-badge.hidden {
    display: none;
}

/* ============================================
   CURRENT TAB CONTENT OVERRIDE
   When showing a specific run in the Current tab
   ============================================ */

.runs-current-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 32px;
    text-align: center;
}

.runs-current-empty .empty-icon {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.6;
}

.runs-current-empty .empty-title {
    font-size: 15px;
    font-weight: 600;
    color: #d1d5db;
    margin-bottom: 8px;
}

.runs-current-empty .empty-hint {
    font-size: 13px;
    color: #6b7280;
    max-width: 280px;
    line-height: 1.5;
}

.runs-current-empty .empty-actions {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}

.schedule-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 32px;
    text-align: center;
    gap: 10px;
}

.schedule-success .success-icon {
    width: 56px;
    height: 56px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(16, 185, 129, 0.14);
    border: 1px solid rgba(16, 185, 129, 0.35);
    box-shadow: 0 0 0 6px rgba(16, 185, 129, 0.08);
    color: #34d399;
    font-size: 28px;
    font-weight: 700;
}

.schedule-success .success-title {
    font-size: 16px;
    font-weight: 600;
    color: #f9fafb;
}

.schedule-success .success-message {
    font-size: 14px;
    font-weight: 600;
    color: #34d399;
}

.schedule-success .success-detail {
    font-size: 13px;
    color: #9ca3af;
    line-height: 1.5;
    max-width: 300px;
}

/* Run detail breadcrumb when viewing historic run */
.run-detail-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(59, 130, 246, 0.1);
    border-bottom: 1px solid rgba(59, 130, 246, 0.2);
    font-size: 12px;
    color: #9ca3af;
}

.run-detail-breadcrumb .back-btn {
    background: none;
    border: none;
    color: #60a5fa;
    cursor: pointer;
    padding: 4px 8px;
    font-size: 12px;
    border-radius: 4px;
    transition: background 0.15s;
}

.run-detail-breadcrumb .back-btn:hover {
    background: rgba(59, 130, 246, 0.15);
}

.run-detail-breadcrumb .run-type {
    text-transform: capitalize;
}

.run-detail-breadcrumb .run-time {
    color: #e5e7eb;
}

/* Loading state for lists */
.runs-list-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 32px;
    gap: 16px;
}

.runs-list-loading .loading-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid #2d2d44;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: vr-spin 1s linear infinite;
}

.runs-list-loading p {
    color: #9ca3af;
    font-size: 13px;
}

/* Error state */
.runs-list-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 32px;
    text-align: center;
}

.runs-list-error .error-icon {
    font-size: 32px;
    margin-bottom: 12px;
}

.runs-list-error p {
    color: #f87171;
    font-size: 13px;
    margin-bottom: 16px;
}

.runs-list-error .retry-btn {
    padding: 8px 16px;
    background: #2d2d44;
    border: 1px solid #3d3d5c;
    border-radius: 6px;
    color: #e5e7eb;
    cursor: pointer;
    font-size: 13px;
    transition: background 0.15s;
}

.runs-list-error .retry-btn:hover {
    background: #3d3d54;
}

/* ============================================================================
   Agent Step Preview Cards
   ============================================================================ */

/* Single agent card */
.preview-card.agent-card {
    border-left: 4px solid #7c3aed;
}

.platform-badge.agent {
    background: rgba(124, 58, 237, 0.2);
    color: #a78bfa;
}

.platform-badge.agent .platform-icon {
    background: #7c3aed;
    color: white;
}

.budget-badge {
    background: #7c3aed;
    color: white;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

.agent-objective {
    margin-bottom: 12px;
}

.agent-objective strong {
    color: #9CA3AF;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.agent-objective p {
    margin: 6px 0 0;
    color: #F9FAFB;
    line-height: 1.5;
}

.agent-details {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.detail-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #9CA3AF;
}

.detail-icon {
    font-size: 14px;
}

.agent-note {
    margin-top: 12px;
    padding: 10px;
    background: rgba(124, 58, 237, 0.1);
    border-radius: 6px;
    font-size: 13px;
    color: #a78bfa;
    white-space: pre-wrap;
}

.preview-badge.agent {
    background: #7c3aed;
    color: white;
}

/* Parallel agent card */
.preview-card.parallel-agent-card {
    border-left: 4px solid #7c3aed;
}

.platform-badge.parallel-agent {
    background: rgba(124, 58, 237, 0.2);
    color: #a78bfa;
}

.platform-badge.parallel-agent .platform-icon {
    background: linear-gradient(135deg, #7c3aed, #a78bfa);
    color: white;
}

.parallel-badge {
    background: linear-gradient(135deg, #7c3aed, #9333ea);
    color: white;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

.parallel-summary {
    display: flex;
    gap: 20px;
    margin-bottom: 16px;
    padding: 12px;
    background: rgba(124, 58, 237, 0.1);
    border-radius: 8px;
}

.summary-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}

.stat-value {
    font-size: 18px;
    font-weight: 600;
    color: #F9FAFB;
}

.stat-label {
    font-size: 11px;
    color: #9CA3AF;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.children-details {
    cursor: pointer;
}

.children-details summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    color: #a78bfa;
    font-weight: 500;
    font-size: 13px;
    list-style: none;
}

.children-details summary::-webkit-details-marker {
    display: none;
}

.children-details[open] summary .expand-icon {
    transform: rotate(180deg);
}

.expand-icon {
    transition: transform 0.2s ease;
    font-size: 10px;
}

.children-grid {
    display: grid;
    gap: 10px;
    margin-top: 8px;
}

.parallel-child-preview {
    padding: 12px;
    background: #1F2937;
    border: 1px solid #374151;
    border-radius: 8px;
    transition: border-color 0.15s;
}

.parallel-child-preview:hover {
    border-color: #7c3aed;
}

.parallel-child-preview.perspective {
    border-left: 3px solid #a78bfa;
}

.child-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.child-number {
    background: #7c3aed;
    color: white;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
}

.child-title {
    flex: 1;
    font-weight: 500;
    color: #F9FAFB;
}

.child-budget {
    font-size: 12px;
    color: #a78bfa;
    background: rgba(124, 58, 237, 0.2);
    padding: 2px 8px;
    border-radius: 10px;
}

.child-focus {
    font-size: 12px;
    color: #9CA3AF;
    margin-bottom: 6px;
    font-style: italic;
}

.child-objective {
    font-size: 13px;
    color: #D1D5DB;
    line-height: 1.4;
}

.child-expertise {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.expertise-tag {
    background: rgba(124, 58, 237, 0.2);
    color: #a78bfa;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
}

.preview-badge.parallel {
    background: linear-gradient(135deg, #7c3aed, #9333ea);
    color: white;
}

/* ============================================
   RESOURCE BINDING UI
   ============================================ */

.step-resource-binding {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    margin: 8px 0;
    border-radius: 6px;
    font-size: 12px;
    border: 1px solid transparent;
    flex-wrap: wrap;
}

.step-resource-binding.bound {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.2);
}

.step-resource-binding.suggested {
    background: rgba(139, 92, 246, 0.1);
    border-color: rgba(139, 92, 246, 0.2);
}

.step-resource-binding.unbound {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.2);
}

.step-resource-binding .resource-icon {
    font-size: 14px;
}

.step-resource-binding .resource-label {
    color: #9ca3af;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.step-resource-binding .resource-name {
    color: #e5e7eb;
    font-weight: 600;
    flex: 1;
    min-width: 120px;
}

.step-resource-binding .resource-status {
    color: #fca5a5;
    font-weight: 500;
    flex: 1;
    min-width: 120px;
}

.ai-badge {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(139, 92, 246, 0.2);
    color: #c4b5fd;
    border: 1px solid rgba(139, 92, 246, 0.3);
}

.resource-change-btn,
.resource-select-btn,
.resource-create-btn,
.resource-accept-btn {
    background: #2d2d44;
    color: #e5e7eb;
    border: 1px solid #3d3d54;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.resource-change-btn:hover,
.resource-select-btn:hover,
.resource-create-btn:hover,
.resource-accept-btn:hover {
    background: #3d3d54;
    color: #fff;
}

.resource-create-btn {
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.3);
    color: #a7f3d0;
}

.resource-create-btn:hover {
    background: rgba(16, 185, 129, 0.2);
}

.resource-accept-btn {
    background: rgba(139, 92, 246, 0.2);
    border-color: rgba(139, 92, 246, 0.35);
    color: #ddd6fe;
}

.resource-accept-btn:hover {
    background: rgba(139, 92, 246, 0.3);
}

.resource-why {
    width: 100%;
    font-size: 11px;
    color: #9ca3af;
    margin-top: 6px;
}

.resource-why summary {
    cursor: pointer;
    color: #a78bfa;
    font-weight: 500;
    list-style: none;
}

.resource-why summary::-webkit-details-marker {
    display: none;
}

.resource-why div {
    margin-top: 4px;
    color: #d1d5db;
    line-height: 1.4;
}

/* ============================================
   CONNECTED ACCOUNT DISPLAY
   ============================================ */

.step-connected-account {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    margin: 4px 0;
    font-size: 11px;
    border-radius: 6px;
    line-height: 1.4;
}

.step-connected-account.connected {
    color: #9ca3af;
}

.step-connected-account.disconnected {
    color: #fca5a5;
    background: rgba(239, 68, 68, 0.06);
    border: 1px solid rgba(239, 68, 68, 0.12);
    padding: 6px 10px;
}

.step-connected-account .account-icon {
    font-size: 12px;
    flex-shrink: 0;
}

.step-connected-account .account-label {
    color: #9ca3af;
}

.step-connected-account .account-name {
    color: #d1d5db;
    font-weight: 500;
}

.step-connected-account .account-connect-btn {
    background: #2d2d44;
    border: 1px solid #3d3d54;
    border-radius: 4px;
    color: #a78bfa;
    font-size: 10px;
    padding: 2px 8px;
    cursor: pointer;
    margin-left: auto;
    white-space: nowrap;
    transition: background 0.15s;
}

.step-connected-account .account-connect-btn:hover {
    background: #3d3d54;
}

/* Resource Picker Modal */
.resource-picker-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 15, 26, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001;
}

.resource-picker-overlay.hidden {
    display: none;
}

.resource-picker-modal {
    width: 520px;
    max-width: calc(100% - 32px);
    max-height: 80vh;
    background: #1a1a2e;
    border: 1px solid #2d2d44;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.resource-picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid #2d2d44;
    background: #171728;
}

.resource-picker-title {
    font-size: 14px;
    font-weight: 600;
    color: #f9fafb;
}

.resource-picker-close {
    background: transparent;
    border: none;
    color: #9ca3af;
    font-size: 18px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
}

.resource-picker-close:hover {
    background: #2d2d44;
    color: #fff;
}

.resource-picker-body {
    padding: 0;
    overflow-y: auto;
}

.resource-picker-content.hidden {
    display: none;
}

.resource-picker-search {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid #2d2d44;
    background: #141425;
}

.resource-picker-search input {
    flex: 1;
    background: #0f0f1a;
    border: 1px solid #2d2d44;
    color: #e5e7eb;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 12px;
}

.resource-picker-search input::placeholder {
    color: #6b7280;
}

.resource-picker-refresh {
    background: #2d2d44;
    border: 1px solid #3d3d54;
    color: #e5e7eb;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
}

.resource-picker-refresh:hover {
    background: #3d3d54;
}

.resource-picker-section {
    padding: 12px 16px;
}

.resource-picker-section-title {
    font-size: 10px;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 8px;
}

.resource-picker-list {
    border: 1px solid #2d2d44;
    border-radius: 8px;
    overflow: hidden;
    background: #0f0f1a;
}

.resource-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid #2d2d44;
    cursor: pointer;
    transition: background 0.15s ease;
    color: #e5e7eb;
    font-size: 12px;
}

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

.resource-item:hover {
    background: rgba(139, 92, 246, 0.1);
}

.resource-item .resource-meta {
    font-size: 10px;
    color: #a78bfa;
}

.resource-picker-paste {
    display: flex;
    gap: 8px;
}

.resource-picker-paste input {
    flex: 1;
    background: #0f0f1a;
    border: 1px solid #2d2d44;
    color: #e5e7eb;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 12px;
}

.resource-picker-url-btn {
    background: #3b82f6;
    border: none;
    color: #fff;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
}

.resource-picker-url-btn:hover {
    background: #2563eb;
}

.resource-picker-hint {
    margin-top: 6px;
    font-size: 11px;
    color: #6b7280;
}

.resource-picker-empty {
    padding: 24px 16px;
    text-align: center;
    color: #9ca3af;
    font-size: 12px;
}

.resource-picker-empty-title {
    font-size: 14px;
    color: #e5e7eb;
    margin-bottom: 12px;
}

.resource-picker-empty-state.hidden {
    display: none;
}

.resource-picker-connect {
    background: #10b981;
    border: none;
    color: #0f172a;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
}

.resource-picker-connect:hover {
    background: #059669;
}

/* =================================================================
   Toolkit Picker (Layer 1, spec §3.2)
   Reuses .resource-picker-overlay / .resource-picker-modal classes
   for visual consistency with the existing ResourcePicker. The
   .toolkit-picker-* classes below cover the picker-specific
   subtitle + candidate list + connection pills.
   ================================================================= */

.toolkit-picker-subtitle {
    padding: 12px 16px 8px;
    color: #9ca3af;
    font-size: 13px;
    line-height: 1.5;
    border-bottom: 1px solid #2d2d44;
}

.toolkit-picker-list {
    padding: 8px 0;
    overflow-y: auto;
    max-height: 50vh;
}

.toolkit-picker-candidate {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    cursor: pointer;
    border-bottom: 1px solid rgba(45, 45, 68, 0.4);
    transition: background-color 120ms ease;
}

.toolkit-picker-candidate:hover {
    background: #2d2d44;
}

.toolkit-picker-candidate:last-child {
    border-bottom: none;
}

.toolkit-picker-name {
    color: #f9fafb;
    font-size: 14px;
    font-weight: 500;
}

.toolkit-picker-pill {
    font-size: 11px;
    font-weight: 500;
    padding: 3px 8px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.toolkit-picker-pill-connected {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.toolkit-picker-pill-not-connected {
    background: rgba(156, 163, 175, 0.1);
    color: #9ca3af;
    border: 1px solid rgba(156, 163, 175, 0.25);
}

.toolkit-picker-footer {
    display: flex;
    justify-content: flex-end;
    padding: 12px 16px;
    border-top: 1px solid #2d2d44;
    background: #141425;
}

.toolkit-picker-cancel {
    background: transparent;
    border: 1px solid #2d2d44;
    color: #e5e7eb;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease;
}

.toolkit-picker-cancel:hover {
    background: #2d2d44;
    border-color: #3d3d54;
}

.toolkit-picker-empty {
    padding: 24px 16px;
    text-align: center;
    color: #9ca3af;
    font-size: 13px;
}