/* ====================================================
   Ari Agent Component Styles
   Uses Clevi CSS variables for theme integration
   ==================================================== */

/* --- Page containers --- */
.ari-home,
.ari-assets,
.ari-workflow-list,
.ari-workflow-editor,
.ari-skill-manager,
.ari-prompt-manager,
.ari-profile-manager,
.ari-mcp-manager,
.ari-connector-manager,
.ari-marketplace,
.ari-marketplace-publisher,
.ari-marketplace-install,
.ari-runtime-panel,
.ari-run-trace,
.ari-collaboration,
.ari-settings {
    padding: 20px;
    color: var(--clc-text-color);
}

/* --- Section (card-like block) --- */
.ari-section {
    background: var(--clv-background);
    border: 1px solid var(--clc-assign-base-50);
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 16px;
}

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

.ari-section-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--clc-text-color);
}

/* --- Summary grid (dashboard cards) --- */
.ari-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.ari-summary-item {
    background: var(--clv-background);
    border: 1px solid var(--clc-assign-base-50);
    border-radius: 10px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ari-summary-clickable {
    cursor: pointer;
}

.ari-summary-clickable:hover {
    border-color: var(--clc-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.ari-summary-label {
    font-size: 13px;
    color: var(--clc-assign-base-200);
    font-weight: 500;
}

.ari-summary-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--clc-text-color);
}

/* --- Tables --- */
.ari-section .table {
    color: var(--clc-text-color);
    margin-bottom: 0;
}

.ari-section .table thead th {
    background: var(--clc-assign-base-50);
    color: var(--clc-text-color);
    font-size: 13px;
    font-weight: 600;
    padding: 10px 12px;
    border-bottom: 1px solid var(--clc-assign-base-100);
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 1;
}

.ari-section .table tbody td {
    padding: 10px 12px;
    font-size: 13px;
    border-bottom: 1px solid var(--clc-assign-base-50);
    vertical-align: middle;
}

.ari-section .table tbody tr:hover {
    background: var(--clv-background-hover);
}

.ari-cell-truncate {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- Status badge --- */
.ari-status-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    background: var(--clc-assign-base-50);
    color: var(--clc-text-color);
    white-space: nowrap;
}

.ari-status-badge.status-completed { background: #E7F7F6; color: #2EB086; }
.ari-status-badge.status-running { background: #E8F0FE; color: #4285F4; }
.ari-status-badge.status-failed { background: #FDECEA; color: #EA4335; }
.ari-status-badge.status-cancelled { background: #FFF3E0; color: #FB8C00; }

/* --- Links --- */
.ari-link {
    color: var(--clc-primary);
    text-decoration: none;
    font-size: 13px;
    cursor: pointer;
}

.ari-link:hover {
    text-decoration: underline;
}

/* --- Empty state --- */
.ari-empty-state {
    text-align: center;
    color: var(--clc-assign-base-200);
    padding: 40px 20px;
    font-size: 14px;
}

/* --- Tab bar --- */
.ari-tab-bar {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--clc-assign-base-50);
    margin-bottom: 16px;
    overflow-x: auto;
}

.ari-tab {
    padding: 10px 20px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: var(--clc-assign-base-200);
    transition: all 0.15s ease;
    white-space: nowrap;
}

.ari-tab:hover { color: var(--clc-text-color); }
.ari-tab.active { color: var(--clc-primary); border-bottom-color: var(--clc-primary); }

/* --- Forms --- */
.ari-form-group {
    margin-bottom: 14px;
}

.ari-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--clc-text-color);
    margin-bottom: 6px;
}

.ari-input,
.ari-select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--clc-assign-base-100);
    border-radius: 6px;
    background: var(--clv-background);
    color: var(--clc-text-color);
    font-size: 13px;
    outline: none;
    transition: border-color 0.15s ease;
    box-sizing: border-box;
}

.ari-input:focus,
.ari-select:focus {
    border-color: var(--clc-primary);
}

.ari-input::placeholder {
    color: var(--clc-assign-base-200);
}

.ari-input-error {
    border-color: #EA4335 !important;
}

.ari-input[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
}

.ari-textarea {
    resize: vertical;
    font-family: inherit;
    line-height: 1.5;
}

.ari-prompt-editor {
    font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
    font-size: 13px;
    line-height: 1.6;
    min-height: 200px;
}

.ari-form-row {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    flex-wrap: wrap;
}

.ari-form-row .ari-form-group {
    flex: 1;
    min-width: 160px;
    margin-bottom: 0;
}

.ari-form-action {
    display: flex;
    align-items: flex-end;
    flex: 0 0 auto !important;
    min-width: auto !important;
}

/* --- Search bar --- */
.ari-search-bar {
    display: flex;
    gap: 8px;
    align-items: center;
    width: 100%;
}

.ari-search-bar .ari-input { max-width: 300px; }
.ari-search-bar .ari-select { width: auto; min-width: 120px; }

/* --- Action groups (inline buttons) --- */
.ari-action-group {
    display: flex;
    gap: 6px;
    align-items: center;
}

.ari-action-stack {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* --- Detail / Editor grids --- */
.ari-editor-grid,
.ari-detail-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 16px;
}

.ari-editor-main,
.ari-detail-main { min-width: 0; }
.ari-editor-sidebar,
.ari-detail-sidebar { min-width: 0; }

/* --- Property list (key-value pairs) --- */
.ari-property-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ari-property {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    gap: 8px;
}

.ari-property-label {
    font-weight: 500;
    color: var(--clc-assign-base-200);
    white-space: nowrap;
}

.ari-property-row {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

/* --- Detail blocks --- */
.ari-detail-block { margin-bottom: 20px; }

.ari-detail-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--clc-text-color);
}

/* --- Marketplace listing cards --- */
.ari-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.ari-listing-card {
    background: var(--clv-background);
    border: 1px solid var(--clc-assign-base-50);
    border-radius: 10px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    cursor: pointer;
}

.ari-listing-card:hover {
    border-color: var(--clc-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.ari-listing-card-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ari-listing-name { font-size: 15px; font-weight: 600; color: var(--clc-text-color); }
.ari-listing-summary { font-size: 13px; color: var(--clc-assign-base-200); line-height: 1.5; }

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

.ari-listing-meta { font-size: 12px; color: var(--clc-assign-base-200); }

/* --- Tags --- */
.ari-tag-list {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.ari-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    background: var(--clc-assign-base-50);
    color: var(--clc-assign-base-200);
}

/* --- Asset list (marketplace detail) --- */
.ari-asset-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ari-asset-list li {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 8px 12px;
    background: var(--clc-assign-base-50);
    border-radius: 6px;
    font-size: 13px;
    flex-wrap: wrap;
}

.ari-asset-name { font-weight: 500; }

.ari-asset-type {
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 11px;
    background: var(--clc-assign-base-100);
    color: var(--clc-text-color);
}

/* --- Result box --- */
.ari-result-box {
    margin-top: 16px;
    padding: 16px;
    background: var(--clc-assign-base-50);
    border-radius: 8px;
}

/* --- Error text --- */
.ari-error-text {
    color: #EA4335;
    font-size: 13px;
    margin-top: 4px;
}

/* --- Text helpers --- */
.ari-text-muted {
    color: var(--clc-assign-base-200);
    font-size: 13px;
}

/* --- Divider --- */
.ari-divider {
    height: 1px;
    background: var(--clc-assign-base-50);
    margin: 16px 0;
}

/* --- Checkbox group --- */
.ari-checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ari-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 13px;
}

.ari-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--clc-primary);
}

/* --- Run summary (trace page) --- */
.ari-run-summary { margin-bottom: 16px; }

/* --- Agent loop --- */
.ari-agent-loop-panel {
    margin-top: 12px;
    padding: 12px;
    border: 1px solid rgba(66, 133, 244, 0.26);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(66, 133, 244, 0.08), rgba(66, 133, 244, 0.03));
}

.ari-agent-loop-panel-inline {
    margin-top: 8px;
}

.ari-agent-loop-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.ari-agent-loop-title {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.ari-agent-loop-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.ari-agent-loop-metric {
    min-width: 108px;
    padding: 7px 9px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(66, 133, 244, 0.2);
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ari-agent-loop-metric strong {
    font-size: 13px;
    line-height: 1.2;
}

.ari-agent-loop-progress {
    height: 8px;
    border-radius: 999px;
    background: rgba(66, 133, 244, 0.16);
    overflow: hidden;
    margin-bottom: 10px;
}

.ari-agent-loop-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #4285F4 0%, #34A853 100%);
    transition: width 0.2s ease;
}

.ari-agent-loop-round-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.ari-agent-loop-round-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid var(--clc-assign-base-100);
    color: var(--clc-assign-base-200);
    background: var(--clv-background);
}

.ari-agent-loop-round-chip.current {
    color: #1a73e8;
    border-color: rgba(66, 133, 244, 0.45);
    background: rgba(66, 133, 244, 0.14);
}

.ari-agent-loop-round-chip.completed {
    color: #188038;
    border-color: rgba(52, 168, 83, 0.45);
    background: rgba(52, 168, 83, 0.14);
}

.ari-agent-loop-round-chip.pending {
    opacity: 0.86;
}

.ari-agent-loop-round-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
}

.ari-agent-loop-round-item {
    border: 1px solid var(--clc-assign-base-50);
    border-radius: 8px;
    padding: 9px 10px;
    background: var(--clv-background);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ari-agent-loop-round-item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.ari-agent-loop-inline-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(26, 115, 232, 0.16);
    color: #1a73e8;
    border: 1px solid rgba(26, 115, 232, 0.28);
    font-size: 11px;
    font-weight: 700;
}

/* --- Header button container --- */
.header-button-container {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* --- Workflow Editor: Node Cards --- */
.ari-node-card {
    border: 1px solid var(--clc-assign-base-50);
    border-radius: 8px;
    margin-bottom: 8px;
    transition: border-color 0.15s ease;
}

.ari-node-card:hover {
    border-color: var(--clc-assign-base-100);
}

.ari-node-card.selected {
    border-color: var(--clc-primary);
    box-shadow: 0 0 0 1px var(--clc-primary);
}

.ari-node-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    cursor: pointer;
}

.ari-node-card-title {
    font-weight: 600;
    font-size: 14px;
}

.ari-node-card-body {
    padding: 0 16px 16px;
    border-top: 1px solid var(--clc-assign-base-50);
}

/* --- Run Trace: Step Cards --- */
.ari-step-card {
    border: 1px solid var(--clc-assign-base-50);
    border-radius: 8px;
    margin-bottom: 8px;
    transition: border-color 0.15s ease;
}

.ari-step-card:hover {
    border-color: var(--clc-assign-base-100);
}

.ari-step-card.expanded {
    border-color: var(--clc-primary);
}

.ari-step-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    cursor: pointer;
    gap: 12px;
}

.ari-step-card-body {
    padding: 0 16px 16px;
    border-top: 1px solid var(--clc-assign-base-50);
}

.ari-step-expand-icon {
    font-size: 11px;
    color: var(--clc-assign-base-200);
}

/* --- Output box (pre-formatted text) --- */
.ari-output-box {
    padding: 12px;
    background: var(--clc-assign-base-50);
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 200px;
    overflow-y: auto;
}

/* --- Toast notification --- */
.ari-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: var(--clc-text-color);
    color: var(--clv-background);
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 14px;
    z-index: 9999;
    opacity: 0;
    transition: all 0.3s ease;
    pointer-events: none;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.ari-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* --- Dialog (confirm, publish, etc.) --- */
.dialog-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9000;
}

.dialog {
    background: var(--clv-background);
    border-radius: 12px;
    padding: 0;
    min-width: 400px;
    max-width: 560px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

.dialog-header {
    padding: 20px 24px 0;
}

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

.dialog-body {
    padding: 16px 24px;
    font-size: 14px;
    color: var(--clc-text-color);
}

.dialog-body p {
    margin: 0 0 8px;
}

.dialog-footer {
    padding: 12px 24px 20px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* --- Code/mono text --- */
code {
    background: var(--clc-assign-base-50);
    padding: 1px 4px;
    border-radius: 3px;
    font-size: 12px;
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .ari-editor-grid,
    .ari-detail-grid {
        grid-template-columns: 1fr;
    }

    .ari-summary-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .ari-form-row {
        flex-direction: column;
    }

    .ari-form-row .ari-form-group {
        min-width: 100%;
    }

    .ari-property-row {
        flex-direction: column;
        gap: 12px;
    }

    .ari-card-grid {
        grid-template-columns: 1fr;
    }

    .ari-search-bar {
        flex-wrap: wrap;
    }

    .ari-search-bar .ari-input {
        max-width: 100%;
    }

    .dialog {
        min-width: 90%;
        margin: 0 16px;
    }

    .ari-tab-bar {
        overflow-x: auto;
    }

    .ari-step-card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

/* Phase 8: Additional styles */
.ari-select[disabled] { opacity: 0.6; cursor: not-allowed; }

/* Node type color indicators */
.ari-node-type-skill-call { border-left: 3px solid #4285F4; }
.ari-node-type-mcp-call { border-left: 3px solid #34A853; }
.ari-node-type-connector-call { border-left: 3px solid #FBBC04; }
.ari-node-type-router { border-left: 3px solid #EA4335; }
.ari-node-type-decision { border-left: 3px solid #9C27B0; }
.ari-node-type-legacy { border-left: 3px solid var(--clc-assign-base-200); }

/* Auth advanced toggle */
.ari-auth-advanced-toggle { font-size: 12px; color: var(--clc-primary); cursor: pointer; margin-top: 8px; display: inline-block; }
.ari-auth-advanced-toggle:hover { text-decoration: underline; }

/* --- Onboarding (AriHome) --- */
.ari-onboarding { background: var(--clv-background); border: 2px dashed var(--clc-primary); border-radius: 10px; padding: 32px; margin-bottom: 20px; text-align: center; }
.ari-onboarding-title { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.ari-onboarding-subtitle { font-size: 14px; color: var(--clc-assign-base-200); margin-bottom: 24px; }
.ari-onboarding-steps { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.ari-onboarding-step { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 20px; background: var(--clc-assign-base-50); border-radius: 8px; min-width: 140px; }
.ari-onboarding-step-number { width: 28px; height: 28px; border-radius: 50%; background: var(--clc-primary); color: #fff; font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
.ari-onboarding-step-label { font-size: 13px; font-weight: 500; }
.ari-onboarding-step-arrow { display: flex; align-items: center; font-size: 20px; color: var(--clc-assign-base-200); }

/* --- Enhanced empty state --- */
.ari-empty-state-card { text-align: center; color: var(--clc-assign-base-200); padding: 48px 20px; font-size: 14px; }
.ari-empty-state-card .ari-empty-state-message { margin-bottom: 16px; }
.ari-empty-state-card .ari-empty-state-hint { font-size: 13px; margin-bottom: 16px; }

/* --- Inline create form --- */
.ari-create-inline { display: flex; align-items: flex-end; gap: 8px; padding: 12px 0; }
.ari-create-inline .ari-input { max-width: 300px; }
.ari-key-hint { font-size: 12px; color: var(--clc-assign-base-200); margin-top: 4px; }

/* ====================================================
   Visual Node Editor (ari-ve- prefix)
   ==================================================== */

/* --- Top-level container --- */
.ari-ve-container {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 56px);
    overflow: hidden;
    color: var(--clc-text-color);
}

/* --- Toolbar --- */
.ari-ve-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--clv-background);
    border-bottom: 1px solid var(--clc-assign-base-50);
    flex-shrink: 0;
    font-size: 13px;
}

.ari-ve-toolbar-divider {
    width: 1px;
    height: 20px;
    background: var(--clc-assign-base-100);
    margin: 0 4px;
}

.ari-ve-toolbar-zoom {
    display: flex;
    align-items: center;
    gap: 4px;
}

.ari-ve-toolbar-zoom span {
    min-width: 42px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* --- Content area (palette + canvas + properties) --- */
.ari-ve-content {
    display: flex;
    flex: 1;
    overflow: hidden;
    position: relative;
}

/* --- Palette (left) --- */
.ari-ve-palette {
    width: 200px;
    flex-shrink: 0;
    background: var(--clv-background);
    border-right: 1px solid var(--clc-assign-base-50);
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ari-ve-palette.hidden { display: none; }

.ari-ve-palette-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--clc-assign-base-200);
    padding: 8px 4px 4px;
    letter-spacing: 0.5px;
}

.ari-ve-palette-item {
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    cursor: grab;
    border: 1px solid var(--clc-assign-base-50);
    background: var(--clv-background);
    transition: border-color 0.15s, box-shadow 0.15s;
    user-select: none;
}

.ari-ve-palette-item-head {
    display: flex;
    align-items: center;
}

.ari-ve-palette-item-label {
    font-weight: 600;
}

.ari-ve-palette-item-desc {
    margin-top: 4px;
    margin-left: 16px;
    font-size: 11px;
    line-height: 1.35;
    color: var(--clc-assign-base-200);
}

.ari-ve-palette-item:hover {
    border-color: var(--clc-primary);
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.ari-ve-palette-item:active { cursor: grabbing; }

.ari-ve-palette-color {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 8px;
}

/* --- Canvas container --- */
.ari-ve-canvas-container {
    flex: 1;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 20px 20px, rgba(120, 144, 172, 0.18) 1px, transparent 1px),
        linear-gradient(180deg, #111925 0%, #0c131d 100%);
    background-size: 24px 24px, auto;
    cursor: grab;
}

.ari-ve-canvas-container.grabbing { cursor: grabbing; }

/* --- SVG connection layer --- */
.ari-ve-connections-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
}

.ari-ve-connections-svg > g { transform-origin: 0 0; }

/* --- HTML nodes layer --- */
.ari-ve-nodes-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    transform-origin: 0 0;
}

/* --- Individual node card --- */
.ari-ve-node {
    position: absolute;
    width: 320px;
    background: linear-gradient(180deg, rgba(29, 40, 57, 0.98) 0%, rgba(18, 28, 40, 0.98) 100%);
    border: 1px solid rgba(103, 125, 151, 0.42);
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
    user-select: none;
    transition: box-shadow 0.15s, border-color 0.15s;
    cursor: default;
    color: #e9eef5;
    overflow: visible;
}

.ari-ve-node:hover {
    box-shadow: 0 22px 48px rgba(0, 0, 0, 0.34);
}

.ari-ve-node.selected {
    border-color: rgba(125, 207, 255, 0.9);
    box-shadow: 0 0 0 2px rgba(125, 207, 255, 0.3), 0 24px 48px rgba(0, 0, 0, 0.36);
}

.ari-ve-node-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-radius: 13px 13px 0 0;
    cursor: grab;
    font-size: 12px;
    font-weight: 700;
    gap: 8px;
}

.ari-ve-node-header:active { cursor: grabbing; }

.ari-ve-node-header-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

.ari-ve-node-summary {
    padding: 12px 14px 10px;
    min-height: 154px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-bottom: 1px solid rgba(108, 126, 149, 0.18);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0%, rgba(255, 255, 255, 0) 100%);
}

.ari-ve-node-title {
    font-size: 14px;
    font-weight: 700;
    color: #f7fafc;
}

.ari-ve-node-body-key {
    font-size: 11px;
    color: #9fb1c6;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ari-ve-node-description {
    font-size: 12px;
    line-height: 1.45;
    color: #c5d2e1;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.ari-ve-feedback-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 2px;
}

.ari-ve-feedback-chip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.03);
}

.ari-ve-feedback-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.ari-ve-feedback-value {
    font-size: 11px;
    line-height: 1.35;
    color: #e7eef8;
}

.ari-ve-feedback-source {
    background: rgba(52, 168, 83, 0.12);
    border-color: rgba(52, 168, 83, 0.24);
}

.ari-ve-feedback-source .ari-ve-feedback-label {
    color: #7ddf99;
}

.ari-ve-feedback-artifact {
    background: rgba(47, 128, 237, 0.12);
    border-color: rgba(47, 128, 237, 0.26);
}

.ari-ve-feedback-artifact .ari-ve-feedback-label {
    color: #8fc4ff;
}

.ari-ve-feedback-transform {
    background: rgba(242, 153, 74, 0.12);
    border-color: rgba(242, 153, 74, 0.26);
}

.ari-ve-feedback-transform .ari-ve-feedback-label {
    color: #ffc180;
}

.ari-ve-feedback-inject,
.ari-ve-feedback-llm {
    background: rgba(155, 81, 224, 0.12);
    border-color: rgba(155, 81, 224, 0.26);
}

.ari-ve-feedback-inject .ari-ve-feedback-label,
.ari-ve-feedback-llm .ari-ve-feedback-label {
    color: #caa0ff;
}

.ari-ve-node-ports {
    padding: 10px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ari-ve-port-lane {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 30px;
}

.ari-ve-port-slot {
    width: calc(50% - 10px);
    display: flex;
}

.ari-ve-port-slot-output {
    justify-content: flex-end;
}

.ari-ve-port-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
}

.ari-ve-port-row-output {
    text-align: right;
}

.ari-ve-port-row-output .ari-ve-port-text {
    align-items: flex-end;
    text-align: right;
}

.ari-ve-port-row-input .ari-ve-port {
    margin-left: -18px;
}

.ari-ve-port-row-output .ari-ve-port {
    margin-right: -18px;
}

.ari-ve-port-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ari-ve-port-label {
    font-size: 12px;
    font-weight: 600;
    color: #edf3fa;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ari-ve-port-type {
    font-size: 10px;
    color: #8ea2b9;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.ari-ve-badge-start {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    background: rgba(125, 207, 255, 0.16);
    color: #8fd3ff;
    align-self: flex-start;
}

/* --- Ports --- */
.ari-ve-port {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--ari-port-color, #7F8EA3);
    border: 0;
    cursor: crosshair;
    transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s;
    pointer-events: all;
    box-shadow: 0 0 0 2px #0d1620, 0 0 0 4px rgba(255, 255, 255, 0.03), 0 0 18px color-mix(in srgb, var(--ari-port-color, #7F8EA3) 50%, transparent);
    flex-shrink: 0;
}

.ari-ve-port:hover,
.ari-ve-port.compatible {
    transform: scale(1.28);
    box-shadow: 0 0 0 2px #0d1620, 0 0 0 4px rgba(125, 207, 255, 0.28), 0 0 24px color-mix(in srgb, var(--ari-port-color, #7F8EA3) 78%, white);
}

.ari-ve-port.incompatible {
    opacity: 0.22;
}

/* --- SVG connections --- */
.ari-ve-connection {
    fill: none;
    stroke: rgba(176, 194, 214, 0.72);
    stroke-width: 3;
    pointer-events: stroke;
    cursor: pointer;
    transition: stroke 0.15s, stroke-width 0.15s;
}

.ari-ve-connection:hover { stroke: #8fd3ff; stroke-width: 4; }
.ari-ve-connection.selected { stroke: #ffd166; stroke-width: 4; }

.ari-ve-connection-temp {
    fill: none;
    stroke: #7dcfff;
    stroke-width: 3;
    stroke-dasharray: 10 6;
    pointer-events: none;
}

/* --- Properties panel (right) --- */
.ari-ve-properties {
    width: 360px;
    flex-shrink: 0;
    background: var(--clv-background);
    border-left: 1px solid var(--clc-assign-base-50);
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ari-ve-properties-title {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ari-ve-properties-section {
    border-top: 1px solid var(--clc-assign-base-50);
    padding-top: 12px;
}

.ari-ve-properties-section-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--clc-assign-base-200);
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.ari-ve-connection-empty {
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(120, 144, 172, 0.08);
    color: var(--clc-assign-base-200);
    font-size: 12px;
}

.ari-ve-connection-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(120, 144, 172, 0.08);
    border: 1px solid rgba(120, 144, 172, 0.12);
}

.ari-ve-connection-item + .ari-ve-connection-item {
    margin-top: 8px;
}

.ari-ve-connection-item-text {
    font-size: 12px;
    line-height: 1.45;
    color: var(--clc-text-color);
}

.ari-ve-feedback-panel {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ari-ve-feedback-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(120, 144, 172, 0.08);
    border: 1px solid rgba(120, 144, 172, 0.12);
}

.ari-ve-feedback-row-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--clc-assign-base-200);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ari-ve-feedback-row-value {
    font-size: 12px;
    line-height: 1.45;
    color: var(--clc-text-color);
}

.ari-ve-assembly-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}

.ari-ve-assembly-step {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(120, 144, 172, 0.08);
    border: 1px solid rgba(120, 144, 172, 0.12);
}

.ari-ve-assembly-step-order {
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: rgba(47, 128, 237, 0.12);
    color: #2f80ed;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ari-ve-assembly-step-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.ari-ve-assembly-step-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--clc-text-color);
}

.ari-ve-assembly-step-detail {
    font-size: 12px;
    line-height: 1.45;
    color: var(--clc-assign-base-200);
}

.ari-ve-assembly-inject .ari-ve-assembly-step-order {
    background: rgba(155, 81, 224, 0.14);
    color: #9b51e0;
}

.ari-ve-assembly-llm .ari-ve-assembly-step-order {
    background: rgba(52, 168, 83, 0.14);
    color: #34a853;
}

.ari-ve-test-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}