/* ============================================================
   flow-builder.css — the Flow Builder canvas, once, for every demo

   Chrome measured from the Flow Builder prototype at
   flow-builder-prototype-266-a7e6c7b0e18c.herokuapp.com: SLDS 2
   Cosmos header, pill toolbar, review bar, auto-layout column of
   285px elements joined by 2px connectors.

   Priya's demo was the original; this file is that markup's
   styling lifted out so a second scenario can open a canvas that
   looks like the same product rather than an approximation.

   The states an incident needs are here: .amber for the element
   that went quietly wrong, .fail for the one that threw, .ghost
   for what never ran, .prop for a dashed proposal that has not
   been saved.
   ============================================================ */

/* ===== Flow Builder (SLDS 2 Cosmos) — chrome measured from
   https://flow-builder-prototype-266-a7e6c7b0e18c.herokuapp.com/ ===== */
#view-slack, #view-builder{flex:1; min-height:0; display:none;}
#view-slack.on, #view-builder.on{display:flex; flex-direction:column;}
#view-builder{font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; color:#2e2e2e;}
.sf{flex:1; min-height:0; background:#f3f3f3; display:flex; flex-direction:column;}
.sfhd{height:50px; background:#032d60; border-bottom:1px solid #03234d; display:flex; align-items:center; padding:0 14px; color:#fff; flex:0 0 auto;}
.sfhd svg{width:16px; height:16px;}
.sfhd .hback{margin-right:16px; opacity:.95; display:flex; background:none; border:0; color:#fff; cursor:pointer; padding:4px;}
.sfhd .hgroup{display:flex; align-items:center; gap:9px; font-size:14px;}
.sfhd .hsep{width:1px; height:28px; background:rgba(255,255,255,.24); margin:0 16px;}
.sfhd .hcaret{width:11px; height:11px; opacity:.85;}
.sfhd .hhelp{margin-left:auto; display:flex; align-items:center; gap:7px;}
.hver{display:inline-flex; align-items:center; gap:7px; margin-left:10px; font-size:11.5px;}
.hver .vnow{background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.28); border-radius:4px; padding:2px 7px; font-weight:600;}
.hver .vlive{opacity:.78;}
/* Build / Test mode toggle — the SLDS builder-header segmented control from
   the real Agentforce-for-Flow app (data-mode build|test). */
.hmode{display:inline-flex; margin-left:16px; border:1px solid rgba(255,255,255,.28); border-radius:999px; overflow:hidden; flex:0 0 auto;}
.hmode button{border:0; background:transparent; color:#cfe0ff; font:600 12.5px/1 inherit; padding:7px 16px; cursor:pointer;}
.hmode button + button{border-left:1px solid rgba(255,255,255,.28);}
.hmode button.on{background:#066afe; color:#fff;}
.sftb{height:49px; background:#fff; border-bottom:1px solid #c9c9c9; display:flex; align-items:center; gap:6px; padding:0 10px; flex:0 0 auto; flex-wrap:nowrap; overflow-x:auto;}
.tbi{width:30px; height:30px; border:1px solid #c9c9c9; border-radius:999px; background:#fff; color:#066afe; display:flex; align-items:center; justify-content:center; flex:0 0 auto;}
.tbi svg{width:14px; height:14px;}
.tbi.dis{color:#c9c9c9;}
.tbgrp{display:flex;}
.tbgrp .tbi{border-radius:0; margin-left:-1px;}
.tbgrp .tbi:first-child{border-radius:999px 0 0 999px; margin-left:0;}
.tbgrp .tbi:last-child{border-radius:0 999px 999px 0;}
.tbsel{height:32px; border:1px solid #c9c9c9; border-radius:999px; display:flex; align-items:center; gap:9px; padding:0 13px; font-size:13px; color:#066afe; white-space:nowrap;}
.sftb .right{margin-left:auto; display:flex; align-items:center; gap:7px;}
.lastmod{font-size:11.5px; color:#5c5c5c; white-space:nowrap;}
.sfbadge{font-size:11px; font-weight:600; background:#5c5c5c; color:#fff; border-radius:4px; padding:3px 8px;}
.sfbtn{height:30px; padding:0 11px; display:inline-flex; align-items:center; font-size:12.5px; border:1px solid #c9c9c9; border-radius:999px; background:#fff; color:#066afe; white-space:nowrap; cursor:pointer;}
.sfbtn.brand{background:#066afe; border-color:#066afe; color:#fff;}
.sfbtn.dis{color:#c9c9c9; cursor:default;}
.revbar{background:#eef4ff; border-bottom:1px solid #b9d0f7; display:flex; align-items:center; gap:11px; padding:0 14px; height:52px; flex:0 0 auto;}
/* display:flex would otherwise beat [hidden], the same way .rvb does */
.revbar[hidden]{display:none;}
.revbar .rvi{width:26px; height:26px; border-radius:50%; background:#066afe; color:#fff; display:flex; align-items:center; justify-content:center; flex:0 0 auto;}
.revbar .rvi svg{width:15px; height:15px;}
.revbar .rvt b{display:block; font-size:13px; font-weight:700; color:#032d60; line-height:17px;}
.revbar .rvt span{display:block; font-size:11.5px; color:#3c5a86; line-height:16px;}
.revbar .rvacts{margin-left:auto; display:flex; align-items:center; gap:7px;}
.rvb{height:30px; padding:0 13px; display:inline-flex; align-items:center; font-size:12.5px; border:1px solid #c9c9c9; border-radius:999px; background:#fff; color:#066afe; cursor:pointer;}
.rvb.acc{background:#066afe; border-color:#066afe; color:#fff; font-weight:600;}
.rvb:disabled{opacity:.55; cursor:default;}
#view-slack .slack{flex:1; min-height:0; width:100%;}
.rvchip{font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#066afe; background:#dbe9ff; border:1px solid #b9d0f7; border-radius:4px; padding:3px 8px;}
.sfbody{flex:1; display:flex; min-height:0;}
.canvaswrap{flex:1; min-width:0; position:relative; display:flex;}
.canvas{flex:1; background:#f3f3f3; overflow:auto; padding:22px 0 56px; display:flex; justify-content:center;}
.alcol{display:flex; flex-direction:column; align-items:center;}
.el{width:285px; min-height:63px; background:#fff; border:1px solid #c9c9c9; border-radius:8px;
    box-shadow:0 0 2px rgba(0,0,0,.18), 0 2px 2px rgba(0,0,0,.18), 0 -1px 2px rgba(0,0,0,.1);
    display:flex; align-items:flex-start; gap:10px; padding:12px 8px 10px 12px; flex:0 0 auto; position:relative;}
.el .ei{width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; flex:0 0 auto;}
.el .ei svg{width:17px; height:17px;}
.el .etxt{flex:1; min-width:0;}
.el .elab{display:block; font-size:13px; font-weight:700; color:#2e2e2e; line-height:18px;}
.el .etype{display:block; font-size:13px; color:#5c5c5c; line-height:20px;}
.el .erun{display:block; font-size:11px; font-weight:700; color:#c23934; line-height:16px; margin-top:2px;}
.el.amber .erun{color:#a86a12;}
.el .eact{color:#5c5c5c; flex:0 0 auto; margin-top:9px; display:flex; gap:4px;}
.el .eact svg{width:16px; height:16px;}
.tbsel svg{width:11px; height:11px;}
.sfbtn.brand.dis{background:#c9c9c9; border-color:#c9c9c9; color:#fff;}
.ei.start{background:#3ba755;} .ei.data{background:#eb7092;} .ei.action{background:#5867e8;} .ei.endi{background:#ea4e3d;}
.el.amber{border-color:#c79600; background:#fff8e8;}
.el.fail{border-color:#ea4e3d; box-shadow:0 0 0 2px rgba(194,57,52,.18);}
.el.ghost{opacity:.42;}
.el.prop{border:1.5px dashed #066afe; background:#f7faff; box-shadow:none;}
.el .epill{position:absolute; top:-10px; left:12px; font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; background:#066afe; color:#fff; border-radius:3px; padding:2px 7px;}
.conn{width:2px; background:#5c5c5c; flex:0 0 auto; height:14px;}
.conn.fail{background:#ea4e3d;} .conn.ghost{background:#c9c9c9;} .conn.rw{background:#066afe;}
.plus{width:24px; height:24px; border-radius:50%; background:#fff; border:1px solid #5c5c5c; color:#066afe;
      display:flex; align-items:center; justify-content:center; font-size:15px; line-height:1; flex:0 0 auto;}
.plus.rw{border-color:#066afe; border-style:dashed;}
.cbadge{height:24px; display:inline-flex; align-items:center; font-size:12px; color:#5c5c5c; background:#ecebea; border-radius:12px; padding:0 11px;}
.hint{font-size:11px; font-weight:700; color:#a86a12; background:#fff8e8; border:1px solid #f0d9a8; border-radius:4px; padding:3px 8px; margin:6px 0 2px; max-width:285px; text-align:center;}
.hint.red{color:#c23934; background:#fdf4f3; border-color:#f0c9c7;}
.zoom{position:absolute; left:24px; bottom:24px; display:flex; width:128px; height:32px; background:#fff; border:1px solid #c9c9c9; border-radius:999px; overflow:hidden; z-index:2;}
.zoom span{flex:1; display:flex; align-items:center; justify-content:center; color:#066afe; border-right:1px solid #c9c9c9;}
.zoom span:last-child{border-right:none;}
.zoom svg{width:14px; height:14px;}
/* Agentforce panel lives in agentforce-panel.css — one copy, shared. */
.el.pulse{box-shadow:0 0 0 3px rgba(6,106,254,.35);}
#view-builder.agent-closed .agentp{display:none;}
.tbi.agent-on{background:#eef4ff; border-color:#066afe;}
button.tbi{padding:0; cursor:pointer; font:inherit;}
#view-builder.accepted .rvchip{color:#177245; background:#e8f5ec; border-color:#b6e3d1;}
#view-builder.accepted .el.prop{border-style:solid;}