/* Bring in the shared palette first (relative to this file) */
@import url("../core/background_colors.css") layer(theme);

/* =========================================
   Step 4 – Sources → Email flow
   Scope: #procStep4Flow only
   ========================================= */
@layer components {

    /* Keep tall content visible inside the blue panel */
    .section-panel:has(#procStep4Flow) {
        overflow: visible;
    }

    /* Local reset */
    #procStep4Flow,
    #procStep4Flow * {
        box-sizing: border-box;
        min-width: 0;
    }

    /* ===== Container (same look as other steps) ===== */
    #procStep4Flow .flow-ui {
        all: revert-layer;
        /* nuke foreign utilities, keep theme tokens */
        position: relative;
        display: grid;
        grid-template-columns: 1fr 1.6fr;
        /* sources | email */
        gap: 260px;
        /* extra breathing room */
        padding: 16px;
        border-radius: var(--r-lg);
        background: linear-gradient(180deg, var(--panel-tint), transparent), var(--panel-dark);
        border: 1px solid var(--bd-soft);
        box-shadow: var(--shadow-deck);
        color: var(--ink-dark);
        overflow: hidden;
        /* contains glow */
        isolation: isolate;
        /* keep effects inside */
    }

    /* Neon outline + soft glow (use your edge tokens) */
    #procStep4Flow .flow-ui::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        padding: 1px;
        z-index: 2;
        pointer-events: none;
        background: linear-gradient(135deg, var(--edge-1), var(--edge-2));
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
    }

    #procStep4Flow .flow-ui::before {
        content: "";
        position: absolute;
        inset: -24px;
        border-radius: 24px;
        z-index: 0;
        pointer-events: none;
        background: radial-gradient(60% 40% at 20% 0%, var(--edge-out), transparent 70%);
        filter: blur(22px);
    }

    /* ===== Wires layer (ON TOP, non-interactive) ===== */
    #procStep4Flow .flow-wires {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        z-index: 3;
        /* above chips & mail card */
        pointer-events: none;
        /* don’t block hover/clicks */
    }

    #procStep4Flow .fw {
        fill: none;
        stroke: url(#fw-grad);
        stroke-width: 2.2;
        stroke-linecap: round;
        filter: url(#fw-glow);
        opacity: .95;
        mix-blend-mode: screen;
        stroke-dasharray: 14 18;
        stroke-dashoffset: 0;
        animation: flow 1.35s linear forwards;
    }

    @keyframes flow {
        from {
            stroke-dashoffset: 0;
        }

        to {
            stroke-dashoffset: -32;
        }
    }

    /* ===== Sources (left) ===== */
    #procStep4Flow .src-col {
        display: grid;
        gap: 12px;
        z-index: 2;
        /* under wires, above background */
    }

    #procStep4Flow .src-chip {
        all: revert-layer;
        display: flex;
        gap: 10px;
        align-items: center;
        padding: 12px 14px;
        border-radius: var(--r-md);
        background: rgba(255, 255, 255, .04);
        border: 1px solid rgba(255, 255, 255, .10);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
    }

    #procStep4Flow .src-ico {
        width: 18px;
        height: 18px;
        filter: invert(1) brightness(1.05);
    }

    #procStep4Flow .src-meta strong {
        display: block;
        font-weight: 800;
        color: var(--ink-dark);
        line-height: 1.1;
    }

    #procStep4Flow .src-meta small {
        display: block;
        color: var(--ink-muted);
    }

    /* ===== Email preview (right) ===== */
    #procStep4Flow .mail-preview {
        all: revert-layer;
        position: relative;
        z-index: 2;
        /* under wires, above background */
        border-radius: var(--r-md);
        background: rgba(255, 255, 255, .04);
        border: 1px solid rgba(255, 255, 255, .10);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
        padding: 14px;
        transform-origin: center;
        opacity: 0;
        transform: translateY(8px) scale(.98);
        transition: opacity .45s ease, transform .45s ease;
        min-height: 300px;
        /* keep the whole card steady while typing */
        color: var(--ink-dark);
    }

    #procStep4Flow .mail-preview.show {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    #procStep4Flow .mail-mini-head {
        color: var(--ink-dark);
        display: grid;
        gap: 4px;
        margin-bottom: 8px;
    }

    /* --- Force the email body to start at the top and keep a fixed height --- */
    #procStep4Flow .mail-mini-body {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 6px;
        height: 260px;
        overflow: hidden;
        /* fixed body height so the card never grows */
        color: var(--ink-dark);
        /* extra guards in case something upstream centers things */
        align-content: flex-start;
        place-content: start;
        place-items: start;
    }

    #procStep4Flow .mail-mini-body .tw {
        white-space: pre-wrap;
        margin: 0;
        line-height: 1.4;
    }

    /* ===== Progress ===== */
    #procStep4Flow .gen-status {
        margin-top: 10px;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    #procStep4Flow .pbar {
        position: relative;
        height: 8px;
        width: clamp(180px, 30vw, 280px);
        border-radius: 999px;
        background: #263148;
        border: 1px solid rgba(255, 255, 255, .10);
        overflow: hidden;
    }

    #procStep4Flow .pbar b {
        display: block;
        height: 100%;
        width: 100% !important;
        /* used by transform fill */
        border-radius: inherit;
        background: linear-gradient(90deg, var(--ai-c1), var(--ai-c2));
        position: relative;
        overflow: hidden;
        transform-origin: left center;
        transform: scaleX(0);
        /* transform-driven fill (GPU) */
        transition: none !important;
        will-change: transform;
    }

    #procStep4Flow .pbar b::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .25) 44%, rgba(255, 255, 255, .55) 50%, rgba(255, 255, 255, .25) 56%, transparent 70%);
        background-size: 200% 100%;
        animation: shimmer .9s linear infinite;
        mix-blend-mode: overlay;
    }

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

        to {
            background-position: -200% 0;
        }
    }

    /* ===== Responsive ===== */
    @media (max-width: 920px) {
        #procStep4Flow .flow-ui {
            grid-template-columns: 1fr;
            gap: 16px;
        }
    }
}