/* ═══════════════════════════════════════════════════════════════════════════
   Workflow Inline View – Canvas-based agent state machine visualization
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Root container ──────────────────────────────────────────────────────── */
.wf-inline-root {
    margin-top: 0.4rem;
    border-radius: 0.5rem;
    overflow: hidden;
    background: color-mix(in srgb, var(--rz-base-background-color), rgba(0, 0, 0, 0.03));
}

/* ── Toggle row ──────────────────────────────────────────────────────────── */
.wf-toggle-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.6rem;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
}

.wf-toggle-row:hover {
    background: color-mix(in srgb, var(--rz-base-background-color), rgba(0, 0, 0, 0.06));
}

/* ── Dot row (mini status indicators) ────────────────────────────────────── */
.wf-dot-row {
    display: flex;
    gap: 4px;
    align-items: center;
}

.wf-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    transition: background-color 0.3s;
}

.wf-dot-pending  { background-color: var(--rz-base-600, #9e9e9e); }
.wf-dot-running  { background-color: var(--rz-info, #2196f3); animation: wf-dot-pulse 1s infinite; box-shadow: 0 0 4px var(--rz-info, #2196f3); }
.wf-dot-done     { background-color: var(--rz-base-500, #b0b0b0); }
.wf-dot-failed   { background-color: var(--rz-base-500, #b0b0b0); }

@keyframes wf-dot-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* ── Toggle label + chevron ──────────────────────────────────────────────── */
.wf-toggle-label {
    font-size: 0.72rem;
    color: var(--rz-text-tertiary-color);
    flex: 1;
}

.wf-toggle-chevron {
    font-size: 1rem;
    color: var(--rz-text-tertiary-color);
    transition: transform 0.3s ease;
}

.wf-toggle-chevron.wf-chevron-open {
    transform: rotate(180deg);
}

/* ── Canvas wrapper – grid-based expand/collapse ─────────────────────────── */
.wf-canvas-wrapper {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease;
}

.wf-canvas-wrapper.wf-canvas-open {
    grid-template-rows: 1fr;
}

/* ── Canvas – FULL WIDTH container ───────────────────────────────────────── */
.wf-canvas-fullwidth {
    overflow: hidden;
    min-height: 0;
}

/* ── Canvas container with layered rendering ─────────────────────────────── */
.wf-canvas-container {
    position: relative;
    width: 100%;
    aspect-ratio: 5 / 2;
}

/* ── SVG connections layer ────────────────────────────────────────────────── */
.wf-svg-connections {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* ── Connections ─────────────────────────────────────────────────────────── */
.wf-connection {
    transition: opacity 0.4s ease, stroke 0.4s ease;
}

/* Wider glow ribbon behind active connections */
.wf-connection-ribbon {
    stroke-linecap: round;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

/* Active connection: more prominent dashes + faster flow */
.wf-connection-active {
    stroke-dasharray: 14, 7;
    animation: wf-dash-flow 1s linear infinite;
}

@keyframes wf-dash-flow {
    to { stroke-dashoffset: -21; }   /* sum of dasharray */
}

/* ── SVG nodes ───────────────────────────────────────────────────────────── */
.wf-svg-node {
    cursor: grab;
    pointer-events: all;
    transition: filter 0.4s ease;
}

.wf-svg-node-dragging {
    cursor: grabbing;
}

.wf-svg-circle {
    stroke-width: 2;
    transition: fill 0.4s ease, stroke 0.4s ease, stroke-width 0.3s ease;
}

/* ── ACTIVE step — prominent glow via CSS custom property ──────────────── */
/* --step-color is set inline on the <g> element by GetStepColor() */
.wf-node-running {
    filter: drop-shadow(0 0 8px var(--step-color, var(--rz-info, #2196f3)))
            drop-shadow(0 0 18px color-mix(in srgb, var(--step-color, var(--rz-info, #2196f3)), transparent 55%));
}

.wf-node-running .wf-svg-circle {
    stroke-width: 4;
    animation: wf-active-glow 2s ease-in-out infinite;
}

@keyframes wf-active-glow {
    0%, 100% { stroke-width: 3; }
    50%      { stroke-width: 4.5; }
}

/* Hover: subtle ring on any node */
.wf-svg-node:hover .wf-svg-circle {
    stroke-width: 4;
}

/* ── Pulse ring (expanding halo for active step) ──────────────────────── */
.wf-svg-pulse {
    fill: none;
    /* stroke colour set inline via style="stroke: @stepColor" */
    stroke-width: 2;
    transform-box: fill-box;
    transform-origin: center;
    animation: wf-svg-pulse-expand 1.8s ease-out infinite;
}

@keyframes wf-svg-pulse-expand {
    0%   { transform: scale(1);   opacity: 0.8; stroke-width: 3; }
    100% { transform: scale(1.6); opacity: 0;   stroke-width: 1; }
}

/* ── Progress arc (spinning indicator around active node) ─────────────── */
/* r=50 → circumference ≈ 314; stroke-dasharray 105 209 ≈ one-third arc    */
.wf-svg-progress-arc {
    stroke-dasharray: 105 209;
    stroke-linecap: round;
    transform-box: fill-box;
    transform-origin: center;
    animation: wf-arc-spin 1.25s linear infinite;
    pointer-events: none;
}

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

/* ── Node icon (Unicode symbol above step name) ───────────────────────── */
.wf-svg-icon {
    font-size: 13px;
    pointer-events: none;
    user-select: none;
}

/* ── Node text labels ─────────────────────────────────────────────────── */
.wf-svg-label {
    font-size: 10px;
    font-weight: 600;
    fill: var(--rz-text-primary-color);
    pointer-events: none;
    user-select: none;
}

.wf-node-pending .wf-svg-label {
    fill: var(--rz-text-secondary-color);
    opacity: 0.7;
}

.wf-node-running .wf-svg-label {
    fill: var(--rz-text-primary-color);
    font-weight: 700;
}

.wf-svg-detail {
    font-size: 10px;
    fill: var(--rz-text-tertiary-color);
    pointer-events: none;
    user-select: none;
}

/* ── Connection arrow markers ────────────────────────────────────────────── */
.wf-arrow-marker {
    fill: var(--rz-base-700, #616161);
    opacity: 0.85;
}

.wf-arrow-marker-active {
    fill: var(--rz-info, #2196f3);
    opacity: 0.9;
}

/* ── Particles ───────────────────────────────────────────────────────────── */
.wf-svg-particle {
    pointer-events: none;
}