/* ═══════════════════════════════════════════════════════════════════════════
   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;
}

.wf-connection {
    transition: opacity 0.4s ease, stroke 0.4s ease;
}

.wf-connection-active {
    stroke-dasharray: 5, 5;
    animation: wf-dash-flow 1.5s linear infinite;
}

@keyframes wf-dash-flow {
    to { stroke-dashoffset: -10; }
}

/* ── 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;
}

/* Default (pending) — subtle muted appearance */
.wf-node-pending .wf-svg-circle {
    fill: color-mix(in srgb, var(--rz-base-600, #9e9e9e), transparent 88%);
    stroke: var(--rz-base-600, #9e9e9e);
}

/* Done — slightly brighter than pending, no green/red */
.wf-node-done .wf-svg-circle {
    fill: color-mix(in srgb, var(--rz-base-500, #b0b0b0), transparent 80%);
    stroke: var(--rz-base-500, #b0b0b0);
}

/* Failed — same as done, no red */
.wf-node-failed .wf-svg-circle {
    fill: color-mix(in srgb, var(--rz-base-500, #b0b0b0), transparent 80%);
    stroke: var(--rz-base-500, #b0b0b0);
}

/* ── ACTIVE step — very prominent ───────────────────────────────────────── */
.wf-node-running .wf-svg-circle {
    fill: color-mix(in srgb, var(--rz-info, #2196f3), transparent 70%);
    stroke: var(--rz-info, #2196f3);
    stroke-width: 3;
}

.wf-node-running {
    filter: drop-shadow(0 0 8px var(--rz-info, #2196f3))
            drop-shadow(0 0 16px color-mix(in srgb, var(--rz-info, #2196f3), transparent 50%));
}

/* Pulse animation — expanding ring for active step */
.wf-svg-pulse {
    fill: none;
    stroke: var(--rz-info, #2196f3);
    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; }
}

/* Glow breathing on the active node circle itself */
.wf-node-running .wf-svg-circle {
    animation: wf-active-glow 2s ease-in-out infinite;
}

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

/* Node text */
.wf-svg-label {
    font-size: 11px;
    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;
}

/* Hover effect */
.wf-svg-node:hover .wf-svg-circle {
    stroke-width: 3;
    filter: drop-shadow(0 0 4px currentColor);
}

/* ── 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;
}

/* ── SVG particles (LLM → node token stream) ────────────────────────────── */
.wf-svg-particle {
    pointer-events: none;
}

/* Thinking tokens — pale purple, matching debug panel --app-accent (#7c3aed) */
.wf-svg-particle-thinking {
    fill: #7c3aed;
    filter: drop-shadow(0 0 4px rgba(124, 58, 237, 0.5));
}

/* Content tokens — pale green */
.wf-svg-particle-content {
    fill: #4caf50;
    filter: drop-shadow(0 0 4px rgba(76, 175, 80, 0.5));
}