/* Scene 4 — "AI Workflows" card (pink gradient), 440x440.
   Rebuilt from whippy tl-4 Lottie. All positions in stage px. */

.wh-scene--4 {
  position: relative;
  width: 440px;
  height: 440px;
  border-radius: 16px;
  overflow: hidden;
  /* gradient rect: stops #EC87C0 / #F6C3DF / #FFF, line from (-409.6,-192) to (685,440) */
  background: linear-gradient(120deg, #ec87c0 -75%, #f6c3df 30%, #ffffff 135%);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
.wh-scene--4 * { box-sizing: border-box; }

/* ---------- workflow pill ---------- */
.wh-scene--4 .s4-pill {
  position: absolute;
  left: 98px;
  top: 199px;
  width: 244px;
  height: 42px;
  background: #fff;
  border: 1.19px solid #dfe3eb;
  border-radius: 8px;
  display: flex;
  align-items: center;
  opacity: 0;
}
.wh-scene--4 .s4-pill__label {
  margin-left: 18px;
  font-size: 12px;
  line-height: 18px;
  font-weight: 600;
  color: #2b2a34;
}
.wh-scene--4 .s4-toggle {
  position: absolute;
  left: 200px;
  top: 11px;
  width: 32px;
  height: 18px;
  border-radius: 9px;
  background: #d7dbdf;
}
.wh-scene--4 .s4-toggle__knob {
  position: absolute;
  left: 1.5px;
  top: 1.6px;
  width: 15.2px;
  height: 14.7px;
  border-radius: 8px;
  background: #fff;
}

/* ---------- flow group (rows + connectors) ---------- */
.wh-scene--4 .s4-flow {
  position: absolute;
  inset: 0;
  transform-origin: 220px 146.5px; /* row-1 center: group scales to 96% around it */
}

.wh-scene--4 .s4-row {
  position: absolute;
  left: 90px;
  width: 260px;
  height: 42px;
  background: #fff;
  border: 1.19px solid #dfe3eb;
  border-radius: 8px;
  opacity: 0;
}
.wh-scene--4 .s4-row--1 { top: 125.5px; }
.wh-scene--4 .s4-row--2 { top: 199px; }
.wh-scene--4 .s4-row--3 { top: 272.5px; }

.wh-scene--4 .s4-row__icon {
  position: absolute;
  left: 10.4px; /* border 1.19 + 11.6 inner offset ~= icon box at stage x 101.6 */
  top: 11.8px;
  width: 16px;
  height: 16px;
}
.wh-scene--4 .s4-check {
  position: absolute;
  inset: 0;
  transform: scale(0);
}
.wh-scene--4 .s4-row__label {
  position: absolute;
  left: 32.3px;
  top: 0;
  height: 39.6px; /* inner height */
  display: flex;
  align-items: center;
}
.wh-scene--4 .s4-label {
  font-size: 12px;
  line-height: 18px;
  font-weight: 600;
  color: #2b2a34;
  white-space: nowrap;
  opacity: 0.4;
}
.wh-scene--4 .s4-row--3 .s4-row__label { position: absolute; }
.wh-scene--4 .s4-label--b {
  position: absolute;
  left: 0;
  opacity: 0;
}

/* spinner ("loading" sparkle) on row 3 */
.wh-scene--4 .s4-spin {
  position: absolute;
  inset: 0;
  transform: scale(0);
}
.wh-scene--4 .s4-spin i {
  position: absolute;
  width: 4.24px;
  height: 4.24px;
  border-radius: 1px;
  transform: rotate(45deg);
}
/* orbit centers: (8,4.5) (11.5,8) (8,11.5) (4.5,8) */
.wh-scene--4 .s4-spin i:nth-child(1) { left: 5.88px; top: 2.38px; background: #2e6b44; }
.wh-scene--4 .s4-spin i:nth-child(2) { left: 9.38px; top: 5.88px; background: #16af8a; }
.wh-scene--4 .s4-spin i:nth-child(3) { left: 5.88px; top: 9.38px; background: #2e6b44; }
.wh-scene--4 .s4-spin i:nth-child(4) { left: 2.38px; top: 5.88px; background: #16af8a; }

/* ---------- connectors (dot / line / dot) ---------- */
.wh-scene--4 .s4-conn { position: absolute; left: 0; top: 0; width: 440px; }
.wh-scene--4 .s4-conn i { position: absolute; display: block; background: #2e6b44; }
.wh-scene--4 .s4-conn__d1,
.wh-scene--4 .s4-conn__d2 {
  left: 217.5px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  transform: scale(0);
}
.wh-scene--4 .s4-conn__line {
  left: 219.5px;
  width: 1px;
  height: 31px;
  transform: scaleY(0);
  transform-origin: top;
}
.wh-scene--4 .s4-conn--1 .s4-conn__d1 { top: 165.25px; }
.wh-scene--4 .s4-conn--1 .s4-conn__line { top: 167.75px; }
.wh-scene--4 .s4-conn--1 .s4-conn__d2 { top: 196.25px; }
.wh-scene--4 .s4-conn--2 .s4-conn__d1 { top: 238.75px; }
.wh-scene--4 .s4-conn--2 .s4-conn__line { top: 241.25px; }
.wh-scene--4 .s4-conn--2 .s4-conn__d2 { top: 269.75px; }
.wh-scene--4 .s4-conn--3 .s4-conn__d1 { top: 311.75px; }
.wh-scene--4 .s4-conn--3 .s4-conn__line { top: 314.25px; }
.wh-scene--4 .s4-conn--3 .s4-conn__d2 { top: 342.75px; }

/* ---------- chat panel ---------- */
.wh-scene--4 .s4-chat {
  position: absolute;
  left: 56px;
  top: 267px;
  width: 328px;
  height: 138px;
  border: 1px solid rgba(46, 107, 68, 0.4); /* lottie: 0.5px #2e6b44 stroke */
  border-radius: 8px;
  background: linear-gradient(130deg, #eef1ff 13%, #f7f0fa 74%, #ffeff5 135%);
  opacity: 0;
  visibility: hidden;
  transform-origin: 164px -2px; /* stage point (220,265): exit shrinks toward it */
}
.wh-scene--4 .s4-bubble {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  font-size: 10.73px;
  line-height: 16.1px;
  font-weight: 500;
  white-space: nowrap;
}
.wh-scene--4 .s4-bubble--msg1 {
  left: 41px;
  top: 46px;
  width: 249px;
  border-radius: 12px 12px 2px 12px;
  background: #2e6b44;
  color: #fff;
  transform: scale(0);
  transform-origin: 100% 100%;
}
.wh-scene--4 .s4-bubble--msg2 {
  left: 190px;
  top: 46px;
  width: 100px;
  border-radius: 12px 2px 2px 12px;
  background: #2e6b44;
  color: #fff;
  transform: scale(0);
  transform-origin: 100% 100%;
}
.wh-scene--4 .s4-chat__logo {
  position: absolute;
  left: 293.6px;
  top: 55.6px;
  width: 18.4px;
  height: 18.4px;
  transform: scale(0);
  transform-origin: 100% 100%;
}
.wh-scene--4 .s4-chat__logo svg { display: block; }
.wh-scene--4 .s4-chat__avatar {
  position: absolute;
  left: 16.1px;
  top: 102.8px;
  width: 19.2px;
  height: 19.2px;
  border-radius: 50%;
  transform: scale(0);
  transform-origin: 0 100%;
}
.wh-scene--4 .s4-bubble--reply {
  left: 39.1px;
  top: 94px;
  width: 69px;
  border-radius: 12px 12px 12px 2px;
  background: #d1d8e0;
  color: #2b2a34;
  transform: scale(0);
  transform-origin: 0 100%;
}