:root{--bf-teal:#05786E;--bf-ink:#12100D;--bf-muted:rgba(18,16,13,.55);--bf-faint:rgba(18,16,13,.12);--bf-surface:#fff}
.bf-dark{--bf-teal:#2FB3A6;--bf-ink:#F6F4F0;--bf-muted:rgba(246,244,240,.6);--bf-faint:rgba(246,244,240,.14);--bf-surface:#1b1916}

/* 1. Stage track: set data-stage="1" to "4" on .bf-stages. Finished stages are solid, the current one fills. */
.bf-stages{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;font:500 13px/1.3 Inter,system-ui,sans-serif;color:var(--bf-muted)}
.bf-stages li{list-style:none;padding-top:10px;position:relative}
.bf-stages{margin:0;padding:0}
.bf-stages li::before,.bf-stages li::after{content:"";position:absolute;top:0;left:0;height:4px;border-radius:2px}
.bf-stages li::before{right:0;background:var(--bf-faint)}
.bf-stages li::after{width:0;background:var(--bf-teal)}
.bf-stages[data-stage="1"] li:nth-child(1),.bf-stages[data-stage="2"] li:nth-child(2),.bf-stages[data-stage="3"] li:nth-child(3),.bf-stages[data-stage="4"] li:nth-child(4){color:var(--bf-ink)}
.bf-stages[data-stage="1"] li:nth-child(1)::after,.bf-stages[data-stage="2"] li:nth-child(2)::after,.bf-stages[data-stage="3"] li:nth-child(3)::after,.bf-stages[data-stage="4"] li:nth-child(4)::after{animation:bf-fill 2.2s cubic-bezier(.4,0,.2,1) forwards}
.bf-stages[data-stage="2"] li:nth-child(-n+1)::after,.bf-stages[data-stage="3"] li:nth-child(-n+2)::after,.bf-stages[data-stage="4"] li:nth-child(-n+3)::after{width:100%}
@keyframes bf-fill{from{width:0}to{width:88%}}

/* 2. Agent steps: li.is-done, li.is-active, or no class for waiting */
.bf-steps{margin:0;padding:0;font:400 14px/1.4 Inter,system-ui,sans-serif;color:var(--bf-muted)}
.bf-steps li{list-style:none;display:flex;gap:10px;align-items:center;padding:6px 0}
.bf-steps li::before{content:"";flex:none;width:14px;height:14px;border-radius:50%;box-sizing:border-box;border:2px solid var(--bf-faint)}
.bf-steps li.is-done{color:var(--bf-ink)}
.bf-steps li.is-done::before{border:0;background:var(--bf-teal) center/9px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.4 2.4 4.6-5' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.bf-steps li.is-active::before{border-color:var(--bf-faint);border-top-color:var(--bf-teal);animation:bf-spin .8s linear infinite}
.bf-steps li.is-active span{background:linear-gradient(90deg,var(--bf-ink) 35%,var(--bf-teal) 50%,var(--bf-ink) 65%) 0 0/250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:bf-shimmer 1.8s linear infinite}
@keyframes bf-spin{to{transform:rotate(360deg)}}
@keyframes bf-shimmer{from{background-position:120% 0}to{background-position:-30% 0}}

/* 3. Skeleton rows for content that has not arrived yet */
.bf-skel{display:grid;gap:10px}
.bf-skel i{display:block;height:12px;border-radius:6px;background:linear-gradient(90deg,var(--bf-faint) 30%,rgba(5,120,110,.22) 50%,var(--bf-faint) 70%) 0 0/300% 100%;animation:bf-shimmer 1.6s linear infinite}
.bf-skel i:nth-child(1){width:42%}.bf-skel i:nth-child(2){width:96%}.bf-skel i:nth-child(3){width:78%}

@media (prefers-reduced-motion:reduce){.bf-stages li::after,.bf-steps li.is-active::before,.bf-steps li.is-active span,.bf-skel i{animation:none}
.bf-steps li.is-active span{color:var(--bf-ink);background:none}.bf-stages[data-stage="1"] li:nth-child(1)::after,.bf-stages[data-stage="2"] li:nth-child(2)::after,.bf-stages[data-stage="3"] li:nth-child(3)::after,.bf-stages[data-stage="4"] li:nth-child(4)::after{width:60%}}