.voice-demo-section{ padding-top:56px; }
@media (max-width:760px){ .voice-demo-section{ padding-top:40px; } }
.voice-demo-card{
  max-width:640px;
  margin:0 auto;
  background:var(--panel, rgba(15,20,36,.78));
  border:1px solid var(--line, rgba(255,255,255,.12));
  border-radius:var(--radius, 16px);
  box-shadow:var(--shadow, 0 22px 70px rgba(0,0,0,.34));
  padding:22px;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.vd-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.vd-head h3{ margin:0 0 4px; font-size:1.15rem; }
.vd-head p{ margin:0; color:var(--muted, #c6d0e7); font-size:.9rem; }
.vd-badges{ display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
.vd-badge{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.72rem; font-weight:600; letter-spacing:.02em;
  padding:4px 10px; border-radius:999px;
  border:1px solid var(--line, rgba(255,255,255,.14));
  color:var(--green, #52e6aa);
  background:rgba(82,230,170,.08);
  white-space:nowrap;
}
.vd-badge::before{ content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }
.vd-turns{
  font-size:.72rem; font-weight:600;
  color:var(--muted, #c6d0e7);
  padding:2px 0;
}

.vd-statusbar{
  display:flex; align-items:center; gap:8px;
  font-size:.82rem; color:var(--muted, #c6d0e7);
}
.vd-status{ display:inline-flex; align-items:center; gap:8px; }
.vd-status::before{
  content:""; width:9px; height:9px; border-radius:50%;
  background:var(--muted, #8a95ad); flex:none;
}
.vd-status[data-tone="active"]::before{ background:var(--green, #52e6aa); box-shadow:0 0 0 4px rgba(82,230,170,.16); }
.vd-status[data-tone="error"]::before{ background:var(--red, #ff6b8a); }
.vd-status[data-tone="ended"]::before{ background:var(--amber, #ffd166); }

.vd-transcript{
  min-height:150px; max-height:280px; overflow-y:auto;
  display:flex; flex-direction:column; gap:10px;
  padding:14px;
  border-radius:calc(var(--radius, 16px) - 6px);
  border:1px solid var(--line, rgba(255,255,255,.10));
  background:rgba(0,0,0,.18);
}
.vd-transcript:empty::after{
  content:"Your call transcript will appear here.";
  color:var(--muted, #8a95ad); font-size:.85rem; margin:auto;
}
.vd-turn{ display:flex; flex-direction:column; gap:3px; max-width:88%; }
.vd-turn-caller{ align-self:flex-end; align-items:flex-end; }
.vd-turn-assistant{ align-self:flex-start; align-items:flex-start; }
.vd-turn-role{ font-size:.66rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted, #8a95ad); }
.vd-turn-text{
  margin:0; padding:9px 13px; border-radius:14px; font-size:.9rem; line-height:1.4;
}
.vd-turn-caller .vd-turn-text{
  background:linear-gradient(180deg, var(--blue, #1bb8ff), var(--cyan, #27e0ff));
  color:#04121c; border-bottom-right-radius:4px;
}
.vd-turn-assistant .vd-turn-text{
  background:var(--panel2, rgba(255,255,255,.06));
  border:1px solid var(--line, rgba(255,255,255,.10));
  color:var(--text, #f8fbff); border-bottom-left-radius:4px;
}

.vd-start{ align-self:flex-start; }
.vd-form{ display:flex; align-items:center; gap:8px; }
.vd-input{
  flex:1; min-width:0;
  background:rgba(0,0,0,.22);
  border:1px solid var(--line, rgba(255,255,255,.16));
  border-radius:999px;
  color:var(--text, #f8fbff);
  padding:11px 16px; font-size:.92rem; font-family:inherit;
}
.vd-input:focus{ outline:none; border-color:var(--blue, #1bb8ff); }
.vd-input:disabled{ opacity:.55; }
.vd-icon-btn{
  flex:none; width:44px; height:44px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--line, rgba(255,255,255,.16));
  background:var(--panel2, rgba(255,255,255,.05));
  color:var(--text, #f8fbff); cursor:pointer;
  transition:transform .12s ease, background .12s ease, border-color .12s ease;
}
.vd-icon-btn:hover:not(:disabled){ transform:translateY(-1px); border-color:var(--blue, #1bb8ff); }
.vd-icon-btn:disabled{ opacity:.5; cursor:not-allowed; }
.vd-icon-btn svg{ width:20px; height:20px; }
.vd-send{
  background:linear-gradient(180deg, var(--blue, #1bb8ff), var(--cyan, #27e0ff));
  color:#04121c; border-color:transparent;
}
.vd-mic-on{
  background:var(--red, #ff6b8a); border-color:transparent; color:#160309;
  animation:vd-pulse 1.4s ease-in-out infinite;
}
@keyframes vd-pulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(255,107,138,.45); }
  50%{ box-shadow:0 0 0 8px rgba(255,107,138,0); }
}

.vd-controls-note{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.vd-voice-toggle{
  display:inline-flex; align-items:center; gap:7px;
  font-size:.76rem; color:var(--muted, #c6d0e7);
  background:none; border:1px solid var(--line, rgba(255,255,255,.14));
  border-radius:999px; padding:5px 12px; cursor:pointer; font-family:inherit;
}
.vd-voice-toggle.vd-voice-off{ opacity:.6; }
.vd-hint{ font-size:.74rem; color:var(--muted, #8a95ad); }

.vd-cta{
  border-top:1px solid var(--line, rgba(255,255,255,.12));
  padding-top:16px; display:flex; flex-direction:column; gap:10px;
}
.vd-cta p{ margin:0; font-size:.9rem; color:var(--muted, #c6d0e7); }
.vd-cta-actions{ display:flex; gap:10px; flex-wrap:wrap; }

.vd-verify{
  display:flex; align-items:flex-start; gap:10px;
  padding:11px 14px; border-radius:12px;
  border:1px solid rgba(82,230,170,.4);
  background:rgba(82,230,170,.09);
  color:var(--text, #f8fbff); font-size:.84rem; line-height:1.45;
}
.vd-verify-lock{ flex:none; color:var(--green, #52e6aa); margin-top:1px; }
.vd-verify strong{ color:var(--green, #52e6aa); }

.vd-fullinfo-box{
  border-top:1px solid var(--line, rgba(255,255,255,.12));
  padding-top:12px; font-size:.84rem; color:var(--muted, #c6d0e7);
}
.vd-fullinfo-box summary{
  cursor:pointer; font-weight:600; color:var(--text, #f8fbff);
  list-style:none; padding:2px 0;
}
.vd-fullinfo-box summary::-webkit-details-marker{ display:none; }
.vd-fullinfo-box summary::before{ content:"▸ "; color:var(--cyan, #27e0ff); }
.vd-fullinfo-box[open] summary::before{ content:"▾ "; }
.vd-stack-line{ margin:8px 0 6px; }
.vd-stack-line strong{ color:var(--cyan, #27e0ff); }
.vd-fullinfo{ margin:0; padding-left:18px; display:flex; flex-direction:column; gap:6px; }
.vd-fullinfo li{ line-height:1.45; }
.vd-fullinfo strong{ color:var(--text, #f8fbff); }

@media (max-width:560px){
  .voice-demo-card{ padding:18px; }
  .vd-badges{ align-items:flex-start; }
  .vd-head{ flex-direction:column; }
}
@media (prefers-reduced-motion:reduce){
  .vd-mic-on{ animation:none; }
}