/* Scene 2 — "Voice Conversation" (440x440, teal accent block).
   The live 3-minute call: a status pill ("Voice Agent · 00:42", seconds tick),
   a teal sound spectrum in the upper third that speaks while the Voice Agent
   talks and goes quiet while the guest answers, a four-line transcript that
   types in (Voice Agent left with the u. mark, Lena right with her avatar),
   and a tag chip that pops in under the last answer.

   Colors: bg gradient #9CCBCA -> #D5E9E8 -> #fff (same geometry as the
   staffing scene-5 gradient, teal family); ink #2B2A34; muted #6B7280;
   bars rgb(55,148,146) (block accent); live dot #28d07f; chip dot #F2A63B;
   white boxes rgba(255,255,255,.8) + 1px #DFE3EB, radius 8.

   Beats (frames @60fps, 740 = 12.33s loop):
     0-20    pill drops in; 10-30 spectrum fades in
     30-125  bars speak (agent line 1); r1 in @40, types 50-100
     125-140 bars quiet; r2 in @140, types 150-215
     290-375 bars speak (agent line 2); r3 in @300, types 310-345
     375-390 bars quiet; r4 in @395, types 405-450
     480-498 chip pops (scale 0 -> 1, power2.out); hold to 700
     700-720 wrapper fades out; 720-740 blank hold; loop */
.wh-scene--2 {
  position: relative;
  width: 440px;
  height: 440px;
  overflow: hidden;
  border-radius: 16px;
  color: #2B2A34;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
.wh-scene--2 * { box-sizing: border-box; margin: 0; padding: 0; }
.wh-scene--2 .wh2-bg {
  position: absolute;
  inset: 0;
}
.wh-scene--2 .wh2-wrap {
  position: absolute;
  inset: 0;
}

/* ---- status pill ---- */
.wh-scene--2 .wh2-pillrow {
  position: absolute;
  left: 0;
  right: 0;
  top: 22px;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.wh-scene--2 .wh2-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 28px;
  padding: 0 12px 0 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid #DFE3EB;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
  opacity: 0;
  will-change: transform, opacity;
}
.wh-scene--2 .wh2-pill-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #28d07f;
  box-shadow: 0 0 0 3px rgba(40, 208, 127, 0.18);
}
.wh-scene--2 .wh2-pill-label {
  font-weight: 600;
  color: #2B2A34;
}
.wh-scene--2 .wh2-pill-sep {
  color: #9CA3AF;
}
.wh-scene--2 .wh2-pill-time {
  font-weight: 500;
  color: #6B7280;
  font-variant-numeric: tabular-nums;
}

/* ---- sound spectrum (upper third) ---- */
.wh-scene--2 .wh2-spectrum {
  position: absolute;
  left: 115px;
  top: 74px;
  width: 210px;
  height: 49px;
  opacity: 0;
  transform: scale(0.95);
  will-change: transform, opacity;
}
.wh-scene--2 .wh2-spectrum .wh2-bar {
  position: absolute;
  width: 2px;
  border-radius: 1px;
  background: rgb(55, 148, 146);
  will-change: transform;
}

/* ---- transcript ---- */
.wh-scene--2 .wh2-chat {
  position: absolute;
  left: 40px;
  right: 40px;
  top: 148px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.wh-scene--2 .wh2-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  opacity: 0;
  will-change: transform, opacity;
}
.wh-scene--2 .wh2-row--guest {
  flex-direction: row-reverse;
}
.wh-scene--2 .wh2-avatar {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: block;
}
.wh-scene--2 .wh2-avatar--mark {
  display: inline-flex;
}
.wh-scene--2 .wh2-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-width: 312px;
}
.wh-scene--2 .wh2-row--guest .wh2-col {
  align-items: flex-end;
  text-align: right;
}
.wh-scene--2 .wh2-name {
  font-size: 11px;
  line-height: 14px;
  font-weight: 500;
  color: #6B7280;
  margin-bottom: 2px;
  white-space: nowrap;
}
.wh-scene--2 .wh2-text {
  min-height: 20px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: #2B2A34;
}

/* ---- tag chip ---- */
.wh-scene--2 .wh2-chip {
  align-self: flex-end;
  margin-right: 40px; /* lines up with the guest text edge (avatar 28 + gap 12) */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 26px;
  padding: 0 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid #DFE3EB;
  transform: scale(0);
  transform-origin: right top;
  white-space: nowrap;
  will-change: transform;
}
.wh-scene--2 .wh2-chip-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #F2A63B;
}
.wh-scene--2 .wh2-chip-label {
  font-size: 12px;
  line-height: 1;
  font-weight: 600;
  color: #2B2A34;
}
.wh-scene--2 .wh2-chip-note {
  font-size: 11px;
  line-height: 1;
  font-weight: 500;
  color: #6B7280;
}