/* Voice demo page (voice-demo.html). Uses the tokens and components in
   style.css; everything here is prefixed vd- so it cannot collide with them. */

[lang="ml"]{ font-family:"Noto Sans Malayalam","Malayalam Sangam MN","Malayalam MN","Nirmala UI","Kartika",Inter,system-ui,sans-serif; }

.vd{
  display:grid; grid-template-columns:280px minmax(0,1fr) 350px;
  border-radius:var(--r-xl); overflow:hidden; min-height:600px;
  background:
    radial-gradient(90% 140% at 100% 0%, rgba(168,12,240,.22), transparent 58%),
    linear-gradient(rgba(255,255,255,.055), rgba(255,255,255,.02));
  border:1px solid rgba(217,38,245,.24);
  box-shadow:var(--shadow-lg);
}
.vd__label{
  font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted-2); margin:0 0 12px;
}
.vd__text{ font-size:.92rem; color:var(--muted); margin:0 0 20px; }
.vd__text strong{ color:var(--text); font-weight:600; }
.vd__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; }

/* scenario column */
.vd__side{ padding:28px 24px; border-right:1px solid var(--line); }
.vd-agent{
  display:grid; grid-template-columns:auto 1fr; align-items:center; gap:12px;
  padding:14px; border-radius:var(--r); margin-bottom:16px;
  background:var(--surface-2); border:1px solid rgba(217,38,245,.3);
}
.vd-agent__avatar{
  width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
  font-family:"Space Grotesk",Inter,sans-serif; font-weight:700; font-size:18px; color:#fff;
  background:var(--grad);
}
.vd-agent__name{ margin:0; font-weight:600; color:var(--text); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.vd-agent__name .tag{ font-size:.62rem; padding:2px 8px; }
.vd-agent__role{ margin:0; font-size:.85rem; color:var(--muted); }

.vd-topics{ list-style:none; margin:0 0 20px; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.vd-topics li{
  display:inline-flex; align-items:center; gap:7px; font-size:.82rem; font-weight:500; color:var(--muted);
  padding:5px 12px 5px 10px; border-radius:999px; border:1px solid var(--line-strong); background:var(--surface);
  transition:all .4s var(--ease);
}
.vd-topics li::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--muted-2); transition:background .4s var(--ease); }
.vd-topics li.is-got{ color:var(--text); border-color:rgba(74,222,128,.45); background:rgba(74,222,128,.08); }
.vd-topics li.is-got::before{ background:#4ade80; box-shadow:0 0 8px rgba(74,222,128,.8); }
.vd-tips{ margin:0; padding-left:18px; display:grid; gap:8px; font-size:.86rem; color:var(--muted); line-height:1.5; }
.vd-tips li::marker{ color:var(--magenta); }

/* call stage */
.vd__stage{
  padding:28px 24px; display:flex; flex-direction:column; align-items:center; gap:18px;
  background-image:radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px); background-size:18px 18px;
}
.vd__title{ margin:0; font-family:"Space Grotesk",Inter,sans-serif; font-weight:600; font-size:1.2rem; color:var(--text); }
.vd__title span{ color:var(--muted); font-weight:500; }
.vd__center{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; }
.vd__hint{ margin:0; text-align:center; font-size:.9rem; color:var(--muted); max-width:320px; min-height:46px; }
.vd__hint strong{ color:var(--text); font-weight:600; }
.vd__controls{ display:flex; align-items:center; gap:14px; }
.vd-timer{ font-family:"Space Grotesk",Inter,sans-serif; font-size:.9rem; color:var(--muted); font-variant-numeric:tabular-nums; letter-spacing:.05em; }
#vdMute[aria-pressed="true"]{ border-color:rgba(248,113,113,.55); color:#fecaca; }
.vd-turnstile:empty{ display:none; }

.vd-status{
  display:inline-flex; align-items:center; gap:7px; font-size:.78rem; font-weight:600;
  padding:4px 12px; border-radius:999px; color:var(--muted); background:var(--surface); border:1px solid var(--line-strong);
}
.vd-status::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--muted-2); }
[data-state="connecting"] .vd-status::before{ background:#fbbf24; animation:vd-blink 1s infinite; }
[data-state="live"] .vd-status{ color:#bbf7d0; border-color:rgba(74,222,128,.4); }
[data-state="live"] .vd-status::before{ background:#4ade80; animation:vd-blink 1.6s infinite; }
[data-state="error"] .vd-status{ color:#fecaca; border-color:rgba(248,113,113,.45); }
[data-state="error"] .vd-status::before{ background:#f87171; }
@keyframes vd-blink{ 50%{ opacity:.35; } }

.vd-orb{ --me:0; --agent:0; position:relative; width:min(290px,68vw); aspect-ratio:1; display:grid; place-items:center; }
.vd-orb__core{
  position:absolute; inset:16%; border-radius:50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.35), transparent 38%),
    radial-gradient(circle at 70% 75%, rgba(217,38,245,.9), transparent 55%),
    radial-gradient(circle at 30% 70%, rgba(139,92,246,.95), transparent 60%),
    radial-gradient(circle, #6d28d9, #2e1065);
  box-shadow:0 0 60px -6px rgba(217,38,245,.55), inset 0 0 40px rgba(0,0,0,.35);
  transform:scale(calc(1 + var(--agent) * .12 + var(--me) * .05));
  transition:transform .12s linear, filter .4s var(--ease);
}
.vd-orb__ring{ position:absolute; inset:8%; border-radius:50%; border:1px solid rgba(217,38,245,.28); opacity:.5; }
.vd-orb__ring--2{ inset:0; border-color:rgba(139,92,246,.18); }
[data-state="live"] .vd-orb__ring--1{ animation:vd-ripple 2.4s var(--ease) infinite; }
[data-state="live"] .vd-orb__ring--2{ animation:vd-ripple 2.4s var(--ease) 1.2s infinite; }
[data-state="idle"] .vd-orb__core,[data-state="ended"] .vd-orb__core,[data-state="error"] .vd-orb__core{ filter:saturate(.75) brightness(.85); }
@keyframes vd-ripple{ 0%{ transform:scale(.92); opacity:.7; } 100%{ transform:scale(1.18); opacity:0; } }
.vd-orb__btn{
  position:relative; z-index:2; display:inline-flex; align-items:center; gap:9px;
  font:600 15px Inter,system-ui,sans-serif; color:#1b0b33; cursor:pointer;
  padding:13px 22px; border-radius:999px; border:0;
  background:rgba(255,255,255,.92); box-shadow:0 12px 30px -10px rgba(0,0,0,.6);
  transition:transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
}
.vd-orb__btn:hover{ transform:translateY(-2px); background:#fff; }
.vd-orb__btn svg{ width:17px; height:17px; fill:currentColor; transition:transform .3s var(--ease); }
[data-state="live"] .vd-orb__btn,[data-state="connecting"] .vd-orb__btn{ color:#fff; background:rgba(239,68,68,.92); }
[data-state="live"] .vd-orb__btn svg,[data-state="connecting"] .vd-orb__btn svg{ transform:rotate(135deg); }

/* transcript */
.vd__transcript{ padding:28px 24px; border-left:1px solid var(--line); display:flex; flex-direction:column; min-height:0; }
.vd-transcript{
  list-style:none; margin:0; padding:4px 2px 0 0; flex:1; overflow-y:auto; max-height:460px;
  display:flex; flex-direction:column; gap:10px; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.15) transparent;
}
.vd-transcript__empty{ margin:auto 0; text-align:center; font-size:.9rem; color:var(--muted-2); padding:40px 12px; }
.vd-msg{ max-width:88%; display:flex; flex-direction:column; gap:3px; animation:vd-rise .35s var(--ease); }
.vd-msg__who{ font-size:.68rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-2); }
.vd-msg__text{ margin:0; font-size:.95rem; line-height:1.6; color:var(--text); padding:10px 14px; border-radius:14px; }
.vd-msg--agent{ align-self:flex-start; }
.vd-msg--agent .vd-msg__text{ background:linear-gradient(135deg, rgba(139,92,246,.26), rgba(217,38,245,.16)); border:1px solid rgba(217,38,245,.28); border-top-left-radius:4px; }
.vd-msg--you{ align-self:flex-end; text-align:right; }
.vd-msg--you .vd-msg__text{ text-align:left; background:var(--surface-2); border:1px solid var(--line-strong); border-top-right-radius:4px; }
.vd-msg--event{ align-self:center; font-size:.75rem; color:var(--muted-2); }
@keyframes vd-rise{ from{ opacity:0; transform:translateY(6px); } }
.vd-partial{ margin:8px 0 0; font-size:.88rem; color:var(--muted); text-align:right; min-height:24px; }
.vd-partial:not(:empty)::after{ content:" …"; color:var(--magenta); }
.vd__note{ margin:10px 0 0; padding-top:12px; border-top:1px solid var(--line); font-size:.76rem; color:var(--muted-2); }
.vd-foot{ margin:18px auto 0; max-width:70ch; text-align:center; font-size:.84rem; color:var(--muted-2); }

/* how it works */
.vd-step{
  display:inline-block; margin-bottom:12px; font-family:"Space Grotesk",Inter,sans-serif; font-weight:600;
  font-size:.82rem; letter-spacing:.08em; background:var(--grad-soft); -webkit-background-clip:text; background-clip:text; color:transparent;
}

@media (max-width:1080px){
  .vd{ grid-template-columns:260px minmax(0,1fr); }
  .vd__transcript{ grid-column:1 / -1; border-left:0; border-top:1px solid var(--line); }
  .vd-transcript{ max-height:360px; }
}
@media (max-width:760px){
  .vd{ grid-template-columns:1fr; min-height:0; }
  .vd__stage{ order:1; }
  .vd__side{ order:2; border-right:0; border-top:1px solid var(--line); }
  .vd__transcript{ order:3; }
}
@media (prefers-reduced-motion:reduce){
  .vd *,.vd *::before{ animation:none !important; transition:none !important; }
}