:root{
  --vfp-bg:#f5f7ff;
  --vfp-surface:rgba(255,255,255,.82);
  --vfp-surface-strong:#ffffff;
  --vfp-border:rgba(94,111,255,.12);
  --vfp-text:#172033;
  --vfp-muted:#65708c;
  --vfp-blue:#6c63ff;
  --vfp-blue2:#7c8cff;
  --vfp-shadow:0 24px 60px rgba(96,109,255,.10);
  --vfp-shadow-soft:0 8px 24px rgba(23,32,51,.06);
}

.vfp-root{
  color:var(--vfp-text);
  font-family:'Plus Jakarta Sans',sans-serif;
}

.vfp-shell{
  min-height:calc(100vh - 40px);
  padding:24px;
  background:
    radial-gradient(circle at top left, rgba(124,140,255,.22), transparent 24%),
    radial-gradient(circle at top right, rgba(108,99,255,.18), transparent 26%),
    linear-gradient(180deg, #ffffff 0%, #f8faff 42%, #f2f5ff 100%);
  border-radius:24px;
}

.vfp-hero{
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:flex-start;
  margin-bottom:18px;
}

.vfp-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  letter-spacing:.16em;
  font-size:.72rem;
  font-weight:800;
  color:var(--vfp-blue);
  background:rgba(108,99,255,.08);
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(108,99,255,.12);
}

.vfp-title{
  font-size:2rem;
  line-height:1.15;
  letter-spacing:-.04em;
  margin:12px 0 8px;
  max-width:720px;
}

.vfp-subtitle{
  font-size:.95rem;
  color:var(--vfp-muted);
  max-width:780px;
  line-height:1.7;
}

.vfp-meta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.vfp-chip{
  padding:10px 14px;
  border-radius:999px;
  background:var(--vfp-surface);
  border:1px solid var(--vfp-border);
  box-shadow:var(--vfp-shadow-soft);
  font-size:.82rem;
  font-weight:700;
  color:var(--vfp-text);
  backdrop-filter:blur(18px);
}

.vfp-chip-soft{
  color:var(--vfp-blue);
}

.vfp-layout{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(340px,.95fr);
  gap:18px;
}

.vfp-stage-card,
.vfp-card{
  background:var(--vfp-surface);
  border:1px solid var(--vfp-border);
  border-radius:24px;
  box-shadow:var(--vfp-shadow);
  backdrop-filter:blur(18px);
}

.vfp-stage-card{
  padding:18px;
  min-height:760px;
  display:flex;
  flex-direction:column;
}

.vfp-stage-top{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
  margin-bottom:14px;
}

.vfp-card-title{
  font-weight:800;
  letter-spacing:-.03em;
  font-size:1rem;
}

.vfp-card-subtitle{
  color:var(--vfp-muted);
  font-size:.82rem;
  margin-top:2px;
}

.vfp-stage-switches{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

.vfp-switch{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:.8rem;
  color:var(--vfp-muted);
  user-select:none;
}

.vfp-switch input{
  accent-color:var(--vfp-blue);
}

.vfp-stage-wrap{
  position:relative;
  flex:1;
  min-height:520px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border-radius:22px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.72), rgba(242,245,255,.78)),
    radial-gradient(circle at 50% 30%, rgba(108,99,255,.12), transparent 28%);
  border:1px solid rgba(108,99,255,.10);
}

.vfp-canvas,
.vfp-avatar-fallback{
  position:absolute;
  inset:0;
}

.vfp-canvas{
  z-index:2;
}

.vfp-avatar-fallback{
  display:none;
  align-items:center;
  justify-content:center;
  z-index:1;
}

.vfp-avatar-core{
  width:240px;
  height:240px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  background:
    radial-gradient(circle at 50% 38%, rgba(255,255,255,.98), rgba(240,244,255,.9) 42%, rgba(224,230,255,.7) 100%);
  box-shadow:inset 0 0 0 1px rgba(110,120,255,.10), 0 20px 70px rgba(98,110,255,.12);
}

.vfp-avatar-core::before{
  content:'';
  position:absolute;
  inset:-18px;
  border-radius:50%;
  border:1px solid rgba(108,99,255,.12);
  animation:vfpPulse 3.2s ease-in-out infinite;
}

.vfp-avatar-face{
  width:150px;
  height:170px;
  border-radius:48% 48% 42% 42%;
  background:linear-gradient(180deg, #ffe9dc 0%, #f6cfb8 48%, #eeb99b 100%);
  position:relative;
  box-shadow:inset 0 -22px 32px rgba(120,70,30,.10);
  transform:translateY(12px);
}

.vfp-avatar-eyes{
  position:absolute;
  top:52px;
  left:50%;
  width:80px;
  transform:translateX(-50%);
  display:flex;
  justify-content:space-between;
}

.vfp-avatar-eyes span{
  width:14px;
  height:14px;
  border-radius:50%;
  background:#1f2937;
  box-shadow:0 0 0 5px rgba(255,255,255,.32);
  animation:vfpBlink 4.8s infinite;
}

.vfp-avatar-mouth{
  position:absolute;
  bottom:38px;
  left:50%;
  width:38px;
  height:12px;
  margin-left:-19px;
  border-radius:0 0 18px 18px;
  background:#8c3b4d;
  transform-origin:center center;
  transition:transform .15s ease, height .15s ease;
}

.vfp-avatar-orbit{
  position:absolute;
  inset:50% auto auto 50%;
  width:380px;
  height:380px;
  margin-left:-190px;
  margin-top:-190px;
  border-radius:50%;
  border:1px dashed rgba(108,99,255,.12);
  animation:vfpSpin 18s linear infinite;
}

.vfp-stage-caption{
  position:absolute;
  bottom:18px;
  left:50%;
  transform:translateX(-50%);
  z-index:3;
  padding:10px 16px;
  border-radius:999px;
  background:rgba(255,255,255,.74);
  border:1px solid rgba(108,99,255,.10);
  box-shadow:0 10px 30px rgba(23,32,51,.07);
  color:var(--vfp-text);
  font-size:.85rem;
  font-weight:700;
}

.vfp-glow{
  position:absolute;
  width:240px;
  height:240px;
  border-radius:50%;
  filter:blur(12px);
  opacity:.8;
}
.vfp-glow-a{ background:rgba(108,99,255,.16); top:16%; left:14%; }
.vfp-glow-b{ background:rgba(124,140,255,.14); bottom:14%; right:12%; }

.vfp-controls{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:14px;
}

.vfp-btn{
  appearance:none;
  border:1px solid rgba(108,99,255,.14);
  background:var(--vfp-surface-strong);
  color:var(--vfp-text);
  border-radius:16px;
  padding:12px 16px;
  font-weight:800;
  box-shadow:var(--vfp-shadow-soft);
  display:inline-flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, opacity .18s ease;
}

.vfp-btn:hover{
  transform:translateY(-1px);
  border-color:rgba(108,99,255,.26);
}

.vfp-btn:disabled{
  opacity:.45;
  cursor:not-allowed;
  transform:none;
}

.vfp-btn-primary{
  background:linear-gradient(135deg, var(--vfp-blue) 0%, var(--vfp-blue2) 100%);
  color:#fff;
  border-color:transparent;
}

.vfp-btn-ghost{
  background:rgba(255,255,255,.92);
}

.vfp-btn-sm{
  padding:11px 14px;
  border-radius:14px;
}

.vfp-bar-wrap{
  margin-top:14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.vfp-bars{
  display:flex;
  gap:5px;
  align-items:flex-end;
  height:34px;
}

.vfp-bars span{
  width:7px;
  height:10px;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(108,99,255,.28), rgba(108,99,255,.88));
  transform-origin:bottom center;
  animation:vfpBars 1.6s ease-in-out infinite;
}

.vfp-bars span:nth-child(2){ animation-delay:.14s; }
.vfp-bars span:nth-child(3){ animation-delay:.28s; }
.vfp-bars span:nth-child(4){ animation-delay:.42s; }
.vfp-bars span:nth-child(5){ animation-delay:.56s; }

.vfp-bar-label{
  color:var(--vfp-muted);
  font-size:.8rem;
  font-weight:700;
}

.vfp-side{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.vfp-card{
  padding:18px;
}

.vfp-grid-2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.vfp-grid-tight{
  margin-top:12px;
}

.vfp-label{
  display:block;
  margin-bottom:7px;
  font-size:.8rem;
  font-weight:700;
  color:var(--vfp-muted);
}

.vfp-select,
.vfp-text-input{
  width:100%;
  border:1px solid rgba(108,99,255,.14);
  background:#fff;
  color:var(--vfp-text);
  border-radius:14px;
  padding:12px 14px;
  font-size:.92rem;
  outline:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5);
}

.vfp-select:focus,
.vfp-text-input:focus{
  border-color:rgba(108,99,255,.32);
  box-shadow:0 0 0 4px rgba(108,99,255,.08);
}

.vfp-provider{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(108,99,255,.12);
  background:linear-gradient(180deg, #fff, #fbfcff);
  font-weight:800;
}

.vfp-provider-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--vfp-blue), var(--vfp-blue2));
  box-shadow:0 0 0 6px rgba(108,99,255,.12);
}

.vfp-transcript{
  height:364px;
  overflow:auto;
  padding:4px 2px;
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-bottom:12px;
}

.vfp-empty{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  text-align:center;
  color:var(--vfp-muted);
  height:100%;
  min-height:280px;
  border:1px dashed rgba(108,99,255,.14);
  border-radius:18px;
  background:rgba(255,255,255,.65);
}

.vfp-empty-emoji{
  font-size:2.4rem;
  margin-bottom:10px;
}

.vfp-msg{
  display:flex;
  gap:10px;
  align-items:flex-start;
}

.vfp-msg-bubble{
  max-width:100%;
  padding:12px 14px;
  border-radius:18px;
  line-height:1.65;
  font-size:.92rem;
  white-space:pre-wrap;
  box-shadow:0 8px 24px rgba(23,32,51,.06);
}

.vfp-msg-user{
  flex-direction:row-reverse;
}
.vfp-msg-user .vfp-msg-bubble{
  background:linear-gradient(135deg, rgba(108,99,255,.98), rgba(124,140,255,.94));
  color:#fff;
  border-bottom-right-radius:6px;
}
.vfp-msg-ai .vfp-msg-bubble{
  background:#fff;
  border:1px solid rgba(108,99,255,.10);
  border-bottom-left-radius:6px;
}

.vfp-msg-avatar{
  width:36px;
  height:36px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.85rem;
  flex-shrink:0;
  color:#fff;
  background:linear-gradient(135deg, var(--vfp-blue), var(--vfp-blue2));
}

.vfp-hint{
  font-size:.72rem;
  color:var(--vfp-muted);
  margin-top:8px;
}

.vfp-input-row{
  display:flex;
  gap:10px;
  align-items:center;
}

.vfp-input-row .vfp-text-input{
  flex:1;
}

.vfp-status-listening .vfp-stage-caption{ color:#6c63ff; }
.vfp-status-thinking .vfp-stage-caption{ color:#4c6fff; }
.vfp-status-speaking .vfp-stage-caption{ color:#4338ca; }

.vfp-status-listening .vfp-bars span,
.vfp-status-speaking .vfp-bars span{
  animation-duration:.75s;
}

.vfp-status-listening .vfp-avatar-core,
.vfp-status-speaking .vfp-avatar-core{
  transform:translateY(-2px) scale(1.03);
}

.vfp-status-thinking .vfp-avatar-core{
  filter:saturate(1.02);
}

@keyframes vfpPulse{
  0%,100%{ transform:scale(.98); opacity:.65; }
  50%{ transform:scale(1.02); opacity:1; }
}

@keyframes vfpSpin{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(360deg); }
}

@keyframes vfpBlink{
  0%,92%,100%{ transform:scaleY(1); }
  94%{ transform:scaleY(.12); }
  96%{ transform:scaleY(1); }
}

@keyframes vfpBars{
  0%,100%{ height:10px; opacity:.45; }
  50%{ height:30px; opacity:1; }
}

@media (max-width: 1100px){
  .vfp-layout{
    grid-template-columns:1fr;
  }
  .vfp-stage-card{
    min-height:680px;
  }
}

@media (max-width: 768px){
  .vfp-shell{
    padding:14px;
    border-radius:18px;
  }
  .vfp-hero{
    flex-direction:column;
  }
  .vfp-title{
    font-size:1.55rem;
  }
  .vfp-stage-card{
    min-height:620px;
  }
  .vfp-grid-2{
    grid-template-columns:1fr;
  }
  .vfp-input-row{
    flex-direction:column;
    align-items:stretch;
  }
  .vfp-btn{
    justify-content:center;
  }
}