/* Scene 5 — AI Receptionist / VoIP (440x440) */
.wh-scene--5 {
  position: relative;
  width: 440px;
  height: 440px;
  overflow: hidden;
  border-radius: 16px;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
.wh-scene--5 .s5-bg {
  position: absolute;
  inset: 0;
}

/* ---- VoIP call bar ---- */
.wh-scene--5 .s5-voip {
  position: absolute;
  left: 68px;
  top: 0;
  width: 304px;
  height: 72px;
  transform-origin: 152px 0px;
  opacity: 0;
  will-change: transform, opacity;
}
.wh-scene--5 .s5-callbar {
  position: absolute;
  left: 2px;
  top: 2px;
  width: 300px;
  height: 68px;
  border-radius: 8px;
  background: #222431;
}
.wh-scene--5 .s5-callphoto {
  position: absolute;
  left: 21.8px;
  top: 17px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
}
.wh-scene--5 .s5-callname {
  position: absolute;
  left: 72px;
  top: 19px;
  font-size: 12.6px;
  line-height: 15px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
}
.wh-scene--5 .s5-calling {
  position: absolute;
  left: 72px;
  top: 38.5px;
  font-size: 11.6px;
  line-height: 14px;
  font-weight: 400;
  color: #fff;
  white-space: nowrap;
}
.wh-scene--5 .s5-accept,
.wh-scene--5 .s5-decline {
  position: absolute;
  top: 20px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wh-scene--5 .s5-accept {
  left: 252px;
  background: #00B94D;
  transform: scale(1.05);
}
.wh-scene--5 .s5-decline {
  left: 210px;
  background: #F03A14;
}

/* ---- sound spectrum ---- */
.wh-scene--5 .s5-spectrum {
  position: absolute;
  left: 114.8px;
  top: 358.5px;
  width: 210px;
  height: 49px;
  opacity: 0;
  transform: scale(0.95);
  will-change: transform, opacity;
}
.wh-scene--5 .s5-spectrum .s5-bar {
  position: absolute;
  width: 2px;
  border-radius: 1px;
  background: #BB3BFD;
  will-change: transform;
}

/* ---- avatars + logo ---- */
.wh-scene--5 .s5-david {
  position: absolute;
  left: 40.4px;
  top: 185.7px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  opacity: 0;
}
.wh-scene--5 .s5-logo {
  position: absolute;
  left: 372px;
  top: 230px;
  width: 28px;
  height: 28px;
  opacity: 0;
}
.wh-scene--5 .s5-kris {
  position: absolute;
  left: 372.5px;
  top: 273px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  opacity: 0;
}

/* ---- chat rows ---- */
.wh-scene--5 .s5-chat {
  position: absolute;
  height: 21px;
  line-height: 21px;
  font-size: 14px;
  font-weight: 500;
  color: #2B2A34;
  white-space: nowrap;
}
/* left rows (David) */
.wh-scene--5 .s5-c1,
.wh-scene--5 .s5-c3,
.wh-scene--5 .s5-c5 {
  left: 76.6px;
  top: 189.5px;
}
.wh-scene--5 .s5-c5 { opacity: 0.8; }
/* right rows (assistant) */
.wh-scene--5 .s5-c2 {
  right: 73px;
  top: 234.5px;
  text-align: right;
}
.wh-scene--5 .s5-c4 {
  right: 75px;
  top: 234.5px;
  text-align: right;
}
.wh-scene--5 .s5-c7 {
  right: 76px;
  top: 277.5px;
  text-align: right;
  opacity: 0.8;
}

/* ---- transferring box ---- */
.wh-scene--5 .s5-transfer {
  position: absolute;
  inset: 0;
  opacity: 0.8;
  pointer-events: none;
}
.wh-scene--5 .s5-txf-block {
  position: absolute;
  right: 76.1px;
  top: 228.9px;
  width: 0;
  height: 29px;
  background: rgba(43, 42, 52, 0.08);
}
.wh-scene--5 .s5-txf-bl,
.wh-scene--5 .s5-txf-br {
  position: absolute;
  top: 227.9px;
}
.wh-scene--5 .s5-txf-bl { left: 356px; }
.wh-scene--5 .s5-txf-br { left: 358px; }
.wh-scene--5 .s5-txf-t1,
.wh-scene--5 .s5-txf-t2 {
  position: absolute;
  right: 84.1px;
  top: 235.5px;
  height: 21px;
  line-height: 21px;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
}
.wh-scene--5 .s5-txf-t1 { color: #2B2A34; }
.wh-scene--5 .s5-txf-t2 { color: #16AF8A; }