/* Scene 1 — "AI Recruiter" card. Rebuilt from whippy.ai Lottie tl-1 (440x440 @60fps).
   Colors sampled from the Lottie JSON:
   - bg gradient stops: #D2CFFD #E1D2FE #F0D6FF #F6D1F3 #FDCDE7
   - box stroke #DFE3EB, box fill rgba(255,255,255,.8)
   - accent blue (connectors, transcript outline) #2e6b44
   - magenta gradient (icons) #A107FF -> #CB11C6 -> #F61B8E
   - ink #2B2A34, bell #F8BE3E */

.wh-scene--1 {
  position: relative;
  width: 440px;
  height: 440px;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(113deg, #D2CFFD 0%, #E1D2FE 24.8%, #F0D6FF 49.6%, #F6D1F3 74.8%, #FDCDE7 100%);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: #2B2A34;
  -webkit-font-smoothing: antialiased;
}
.wh-scene--1 * { box-sizing: border-box; margin: 0; padding: 0; }

.wh-scene--1 .wh1-fade { position: absolute; inset: 0; }

/* ---- flow group (notif + connectors + call box) ---- */
.wh-scene--1 .wh1-flow { position: absolute; inset: 0; }

/* white boxes */
.wh-scene--1 .wh1-notif,
.wh-scene--1 .wh1-call {
  position: absolute;
  left: 220px;
  top: 220px;
  height: 60px;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid #DFE3EB;
  border-radius: 8px;
  overflow: hidden;
}
.wh-scene--1 .wh1-notif { width: 284px; }
.wh-scene--1 .wh1-call  { width: 188px; top: 311.5px; }

.wh-scene--1 .wh1-notif-main,
.wh-scene--1 .wh1-call-main {
  position: absolute;
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
  white-space: nowrap;
}
.wh-scene--1 .wh1-notif-main { left: 14px; gap: 4px; }
.wh-scene--1 .wh1-notif-label {
  font-size: 14px;
  font-weight: 600;
  line-height: 21px;
}
.wh-scene--1 .wh1-pill {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  height: 29px;
  padding: 0 13px;
  border-radius: 14.5px;
  background: #DFE3EB;
  font-size: 14px;
  font-weight: 600;
  line-height: 29px;
  white-space: nowrap;
}

.wh-scene--1 .wh1-call-main { left: 18px; gap: 9px; }
.wh-scene--1 .wh1-call-label {
  font-size: 14px;
  font-weight: 600;
  line-height: 21px;
  color: #000;
}

/* connectors: dot / line / dot, laid out on the column at x=218 */
.wh-scene--1 .wh1-conn {
  position: absolute;
  left: 215.5px;
  width: 5px;
}
.wh-scene--1 .wh1-conn1 { top: 247.9px; height: 36px; }  /* dot centers at 250.4 / 281.4 */
.wh-scene--1 .wh1-conn2 { top: 339px;   height: 36px; }  /* dot centers at 341.5 / 372.5 */
.wh-scene--1 .wh1-dot {
  position: absolute;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #2e6b44;
}
.wh-scene--1 .wh1-dot-a { top: 0; }
.wh-scene--1 .wh1-dot-b { bottom: 0; }
.wh-scene--1 .wh1-line {
  position: absolute;
  left: 2px;
  top: 2.5px;
  bottom: 2.5px;
  width: 1px;
  background: #2e6b44;
  transform-origin: 50% 0;
}

/* ---- transcript panel ---- */
.wh-scene--1 .wh1-transcript {
  position: absolute;
  left: 56px;
  top: 214px;
  width: 328px;
  height: 157px;
  border: 1px solid rgba(46, 107, 68, 0.5); /* Lottie: 0.5px #2e6b44 stroke */
  border-radius: 8px;
  background: linear-gradient(117deg,
    rgba(230, 234, 252, 0.8) 0%,
    rgba(242, 236, 249, 0.8) 46%,
    rgba(255, 239, 245, 0.8) 100%);
}
.wh-scene--1 .wh1-t-title {
  position: absolute;
  left: 15px;
  top: 16px;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 700;
  line-height: 14px;
}
.wh-scene--1 .wh1-t-row {
  position: absolute;
  left: 19px;
  right: 16px;
  display: flex;
  font-size: 10px;
  line-height: 17.3px;
}
.wh-scene--1 .wh1-t-row1 { top: 44px; }
.wh-scene--1 .wh1-t-row2 { top: 93px; }
.wh-scene--1 .wh1-t-row3 { top: 123px; }
.wh-scene--1 .wh1-t-time { width: 31px; flex: 0 0 31px; }
.wh-scene--1 .wh1-t-row p { flex: 1; }
.wh-scene--1 .wh1-t-row b { font-weight: 700; }