/* Voice Agent capability demos: lightweight HTML/CSS motion, no raster placeholders. */
.voice-demo{
  width:min(100%, 780px);
  min-height:clamp(300px, 34vw, 430px);
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border:1px solid rgba(174,201,239,.76);
  border-radius:24px;
  background:
    radial-gradient(circle at 14% 14%, rgba(19,194,194,.16), transparent 30%),
    radial-gradient(circle at 88% 90%, rgba(125,140,255,.16), transparent 35%),
    linear-gradient(145deg, #f8fcff, #edf4ff 72%);
  box-shadow:0 20px 48px rgba(58,99,159,.11);
}

.voice-demo::before{
  display:none;
}

/* 与智能问答页一致：演示画面平直收在内容容器内，不做倾斜卡片或背景光圈。 */
.voice-demo.capability-asset-visual{
  overflow:hidden;
  border:0;
  background:transparent;
  box-shadow:none;
}

.voice-demo *{ box-sizing:border-box; }
.voice-demo-window{
  width:78%;
  position:relative;
  z-index:1;
  overflow:hidden;
  border:1px solid rgba(192,211,242,.88);
  border-radius:16px;
  background:rgba(255,255,255,.81);
  box-shadow:0 14px 32px rgba(67,103,157,.11);
}
.voice-demo-topbar{
  height:48px;
  padding:0 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid rgba(220,231,247,.9);
  color:#7587a2;
  font-size:14px;
  font-weight:700;
}
.voice-demo-dots{ display:flex; gap:8px; }
.voice-demo-dots i{ width:10px; height:10px; border-radius:50%; background:#a8b7cf; }
.voice-demo-dots i:nth-child(1){ background:#ff5f57; }
.voice-demo-dots i:nth-child(2){ background:#ffbd2e; }
.voice-demo-dots i:nth-child(3){ background:#28c840; }
.voice-demo-body{ padding:20px; }
.voice-demo-label{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:0 13px;
  border-radius:999px;
  color:#4170bf;
  background:#edf4ff;
  font-size:14px;
  font-weight:700;
}
.voice-demo-label::before{ content:""; width:10px; height:10px; margin-right:8px; border-radius:50%; background:#16bcc2; box-shadow:0 0 0 6px rgba(22,188,194,.13); }

/* 外呼：任务创建 */
.task-demo .voice-demo-window{ transform:none; }
.task-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:10px; margin-top:12px; }
.task-list{ display:grid; gap:7px; }
.task-row{ height:28px; display:flex; align-items:center; gap:7px; padding:0 7px; border:1px solid #e7eef9; border-radius:7px; color:#7990ae; font-size:9px; animation:taskRow 4.5s ease-in-out infinite; }
.task-row:nth-child(2){ animation-delay:.55s; }.task-row:nth-child(3){ animation-delay:1.1s; }.task-row:nth-child(4){ animation-delay:1.65s; }
.task-avatar{ width:13px; height:13px; flex:none; border-radius:50%; background:linear-gradient(135deg,#a8e4ed,#6f9cff); }
.task-line{ flex:1; height:5px; border-radius:99px; background:#dfeafb; }.task-line.short{ max-width:22px; }
.task-panel{ padding:9px; border-radius:9px; background:linear-gradient(145deg,#f0f8ff,#eff0ff); }
.task-panel b{ display:block; margin-bottom:8px; color:#567196; font-size:9px; }.task-toggle{ height:18px; margin-top:6px; padding:3px; border-radius:99px; background:#c9d8f3; }.task-toggle::after{ content:""; display:block; width:12px; height:12px; border-radius:50%; background:#fff; box-shadow:0 2px 5px rgba(52,93,155,.2); animation:toggleMove 4.5s ease-in-out infinite; }
.task-progress{ height:5px; margin-top:12px; overflow:hidden; border-radius:99px; background:#e1ebfa; }.task-progress i{ display:block; width:52%; height:100%; border-radius:inherit; background:linear-gradient(90deg,#13c2c2,#4e8dff); animation:progressGrow 4.5s ease-in-out infinite; }

/* 外呼：双向确认 */
.dialog-demo .voice-demo-window{ transform:none; }.dialog-lines{ display:grid; gap:8px; margin-top:13px; }.dialog-bubble{ width:max-content; max-width:79%; padding:8px 10px; border-radius:9px 9px 9px 2px; color:#6680a0; background:#eef5ff; font-size:10px; line-height:1.3; opacity:0; animation:bubbleIn 5.4s ease-in-out infinite; }.dialog-bubble.right{ justify-self:end; border-radius:9px 9px 2px 9px; color:#fff; background:linear-gradient(135deg,#13c2c2,#4e8dff); animation-delay:1.15s; }.dialog-bubble:nth-child(3){ animation-delay:2.3s; }.voice-wave{ display:flex; align-items:center; gap:3px; width:82px; height:23px; margin:12px auto 0; padding:0 8px; border-radius:99px; background:#f0f5ff; }.voice-wave i{ width:3px; height:6px; border-radius:99px; background:#4e8dff; animation:wave 1.1s ease-in-out infinite; }.voice-wave i:nth-child(2){ animation-delay:.15s }.voice-wave i:nth-child(3){ animation-delay:.3s }.voice-wave i:nth-child(4){ animation-delay:.45s }.voice-wave i:nth-child(5){ animation-delay:.6s }.voice-wave i:nth-child(6){ animation-delay:.75s }.voice-wave i:nth-child(7){ animation-delay:.9s }

/* 外呼：结果沉淀 */
.result-demo .voice-demo-window{ transform:none; }.result-summary{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:7px; margin-top:11px; }.result-chip{ padding:8px 6px; border-radius:8px; color:#67819f; background:#f3f7fe; text-align:center; font-size:9px; }.result-chip b{ display:block; margin-bottom:3px; color:#4170bf; font-size:14px; }.result-table{ display:grid; gap:7px; margin-top:11px; }.result-row{ display:grid; grid-template-columns:1fr 48px 26px; align-items:center; gap:7px; color:#7188a6; font-size:9px; }.result-row::before{ content:"客户通话"; }.result-status{ height:17px; border-radius:99px; background:#e8f8f3; color:#25a576; text-align:center; line-height:17px; font-size:8px; }.result-status::after{ content:"已完成"; }.result-score{ width:20px; height:20px; border-radius:50%; color:#5d78df; background:#eef0ff; text-align:center; line-height:20px; font-size:9px; font-weight:700; animation:scorePulse 3s ease-in-out infinite; }

/* 呼入：接听承接 */
.call-demo .voice-demo-window{ transform:none; }.call-core{ display:grid; place-items:center; padding:14px 0 7px; }.call-ring{ width:88px; height:88px; display:grid; place-items:center; border:9px solid rgba(78,141,255,.18); border-radius:50%; background:linear-gradient(145deg,#f9fcff,#e6f1ff); box-shadow:0 0 0 13px rgba(19,194,194,.07),0 0 0 26px rgba(78,141,255,.045); animation:ringPulse 2.8s ease-in-out infinite; }.call-ring::before{ content:""; width:30px; height:38px; border:7px solid #4e8dff; border-top:0; border-radius:7px 7px 12px 12px; transform:rotate(-25deg); }.call-status{ margin-top:12px; color:#3d72be; font-size:10px; font-weight:700; }.call-status::before{ content:"●"; margin-right:5px; color:#13c2c2; animation:statusBlink 1.4s ease-in-out infinite; }.call-queue{ display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-top:8px; }.call-queue span{ padding:6px 3px; border-radius:7px; color:#7690ad; background:#f1f6ff; text-align:center; font-size:8px; }

/* 呼入：问答与查单 */
.lookup-demo .voice-demo-window{ transform:none; }.lookup-question{ margin-top:11px; padding:9px 11px; border-radius:10px 10px 2px 10px; color:#fff; background:linear-gradient(135deg,#4e8dff,#7d8cff); font-size:10px; line-height:1.35; animation:queryFloat 4.5s ease-in-out infinite; }.lookup-card{ position:relative; margin-top:9px; padding:10px; border:1px solid #dce8fa; border-radius:9px; background:#f7fbff; }.lookup-card b{ color:#55749a; font-size:10px; }.lookup-card p{ margin:6px 0 0; color:#7890ab; font-size:9px; }.lookup-track{ display:flex; gap:4px; margin-top:9px; }.lookup-track i{ width:13px; height:13px; border-radius:50%; background:#dce7f6; }.lookup-track i:nth-child(1),.lookup-track i:nth-child(2){ background:#4e8dff; }.lookup-track i:nth-child(2){ box-shadow:0 0 0 5px rgba(78,141,255,.12); animation:trackPulse 2s ease-in-out infinite; }.lookup-track em{ flex:1; height:3px; margin-top:5px; background:#dbe6f6; }

/* 呼入：转人工与摘要 */
.handoff-demo .voice-demo-window{ transform:none; }.handoff-flow{ display:flex; align-items:center; justify-content:space-between; margin-top:14px; }.handoff-person{ width:48px; text-align:center; color:#6a83a2; font-size:8px; }.handoff-avatar{ width:35px; height:35px; margin:0 auto 5px; border-radius:12px; background:linear-gradient(145deg,#c6f0ee,#6699ff); box-shadow:0 7px 14px rgba(78,141,255,.14); }.handoff-person.human .handoff-avatar{ background:linear-gradient(145deg,#d9dcff,#8d8eff); }.handoff-arrow{ width:58px; height:3px; position:relative; background:linear-gradient(90deg,#13c2c2,#4e8dff); }.handoff-arrow::after{ content:""; position:absolute; right:-1px; top:-3px; width:8px; height:8px; border-top:3px solid #4e8dff; border-right:3px solid #4e8dff; transform:rotate(45deg); }.handoff-arrow::before{ content:"转接"; position:absolute; top:-17px; left:15px; color:#5f81a9; font-size:8px; }.handoff-summary{ margin-top:16px; padding:10px; border-radius:9px; background:linear-gradient(145deg,#f0f9f9,#eff3ff); }.handoff-summary b{ color:#4c70a1; font-size:10px; }.handoff-summary p{ margin:5px 0 0; color:#778da7; font-size:9px; line-height:1.45; }.handoff-summary p::after{ content:""; display:inline-block; width:18px; height:8px; margin-left:4px; border-radius:3px; background:#b8cef7; animation:summaryScan 3.2s ease-in-out infinite; }

@keyframes voiceHalo{ 50%{ transform:scale(1.09); opacity:.65; } }
@keyframes taskRow{ 0%,100%{ transform:translateX(0); background:#fff; } 42%{ transform:translateX(3px); background:#f1f8ff; } }
@keyframes toggleMove{ 0%,45%{ transform:translateX(0); } 55%,100%{ transform:translateX(20px); } }
@keyframes progressGrow{ 0%,30%{ width:18%; } 72%,100%{ width:88%; } }
@keyframes bubbleIn{ 0%,17%{ opacity:0; transform:translateY(7px); } 28%,82%{ opacity:1; transform:translateY(0); } 94%,100%{ opacity:0; } }
@keyframes wave{ 50%{ height:17px; background:#13c2c2; } }
@keyframes scorePulse{ 50%{ transform:scale(1.13); background:#dfe4ff; } }
@keyframes ringPulse{ 50%{ transform:scale(1.06); box-shadow:0 0 0 18px rgba(19,194,194,.06),0 0 0 36px rgba(78,141,255,.03); } }
@keyframes statusBlink{ 50%{ opacity:.25; } }
@keyframes queryFloat{ 50%{ transform:translateY(-3px); } }
@keyframes trackPulse{ 50%{ transform:scale(1.2); } }
@keyframes summaryScan{ 50%{ width:44px; background:#86b4ff; } }

@media (max-width: 680px){
  .voice-demo{ min-height:280px; border-radius:18px; }
  .voice-demo-window{ width:86%; }
  .voice-demo-topbar{ height:38px; padding:0 14px; font-size:11px; }
  .voice-demo-dots{ gap:5px; }
  .voice-demo-dots i{ width:7px; height:7px; }
  .voice-demo-body{ padding:14px; }
  .voice-demo-label{ min-height:23px; padding:0 9px; font-size:10px; }
  .voice-demo-label::before{ width:7px; height:7px; margin-right:6px; }
}
@media (prefers-reduced-motion: reduce){
  .voice-demo *, .voice-demo::before{ animation:none !important; }
}