/* A product's voice expert: the "Talk to …" button and the side panel it opens (partials/voice_here.html).
   Sits above the desktop bottom bar and the phone tab bar; the panel is a right-hand drawer on laptops and a
   bottom sheet on phones. Colours fall back to plain values on pages without the site tokens (the builder). */
.vh-fab{position:fixed;right:22px;bottom:calc(var(--dock-h,0px) + var(--app-tabbar-h-on,0px) + 22px);z-index:950;
  display:inline-flex;align-items:center;gap:10px;padding:10px 18px 10px 10px;border-radius:50px;cursor:pointer;
  background:#fff;border:1.5px solid rgba(0,168,255,.3);box-shadow:0 12px 36px rgba(0,120,190,.22);
  color:var(--text,#1b2a41);font:700 .9rem var(--font,'Poppins',system-ui,sans-serif)}
.vh-fab i{font-style:normal;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:linear-gradient(135deg,#0072d6 0%,#0096ff 45%,#2eb82e 100%);box-shadow:inset 0 0 0 2px rgba(255,255,255,.35),0 3px 10px rgba(0,100,200,.35);
  animation:vh-ring 2.6s ease-in-out infinite}
.vh-fab i svg{display:block;filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.35))}
.vh-fab:hover{border-color:#00a8ff;transform:translateY(-1px)}
.vh-fab:focus-visible,.vh-x:focus-visible{outline:3px solid #00a8ff;outline-offset:2px}
@keyframes vh-ring{0%,100%{box-shadow:0 0 0 0 rgba(0,168,255,.45)}50%{box-shadow:0 0 0 9px rgba(0,168,255,0)}}
.vh-open .vh-fab{opacity:0;pointer-events:none}
.vh-fab.vh-compact{padding:8px}.vh-fab.vh-compact span{display:none}   /* set by here.js beside a page's own controls */

.vh{position:fixed;right:18px;bottom:calc(var(--dock-h,0px) + var(--app-tabbar-h-on,0px) + 18px);z-index:960;
  width:min(440px,calc(100vw - 36px));max-height:calc(100vh - 120px - var(--dock-h,0px));display:flex;flex-direction:column;
  background:var(--bg,#f5f9fc);border:1px solid var(--border,#dfe8f1);border-radius:22px;overflow:hidden;
  box-shadow:0 24px 70px rgba(16,40,70,.28);font-family:var(--font,'Poppins',system-ui,sans-serif);color:var(--text,#1b2a41);
  animation:vh-in .22s ease-out}
.vh[hidden]{display:none}
@keyframes vh-in{from{opacity:0;transform:translateY(14px)}}
.vh-head{display:flex;align-items:center;gap:12px;padding:14px 14px 12px 16px;background:#fff;border-bottom:1px solid var(--border-lt,#e8eff6)}
.vh-head>div{flex:1;min-width:0}
.vh-head b{display:block;font-size:.98rem}
.vh-head small{display:block;color:var(--text-dim,#5f7389);font-size:.78rem;line-height:1.35}
.vh-ic{width:40px;height:40px;flex:none;border-radius:13px;display:grid;place-items:center;font-size:1.3rem;background:var(--violet-bg,#e6f6ff)}
.vh-x{flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--border,#dfe8f1);background:#fff;cursor:pointer;font-size:.95rem;color:var(--text-dim,#5f7389)}
.vh-x:hover{background:var(--violet-bg,#e6f6ff)}
.vh-body{overflow-y:auto;padding:14px;overscroll-behavior:contain}
.vh-wait{display:flex;align-items:center;gap:10px;padding:30px 10px;justify-content:center;color:var(--text-dim,#5f7389);font-size:.9rem}
.vh-wait span{width:18px;height:18px;border-radius:50%;border:2.5px solid #cfe6f5;border-top-color:#00a8ff;animation:vh-spin .8s linear infinite}
@keyframes vh-spin{to{transform:rotate(360deg)}}

/* the talk interface inside the panel: one column, compact */
.vh .xv{margin:0}
.vh .va-talk{grid-template-columns:minmax(0,1fr);gap:12px}
.vh .va-card{padding:16px}
.vh .va-stage{padding:16px 12px}
.vh .va-orb{width:110px;height:110px}
.vh .va-log{max-height:200px;min-height:60px}
.vh .va-card h2{font-size:.95rem;margin:0 0 8px}

.vh-signin{text-align:center;padding:22px 10px 12px;display:grid;gap:10px;justify-items:center}
.vh-signin p{margin:0;color:var(--text-dim,#5f7389);font-size:.9rem}
.vh-orb{width:90px;height:90px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#bfe9ff,#00a8ff 55%,#64dd17);animation:vh-ring 2.6s ease-in-out infinite}
.vh-btn{display:inline-block;padding:11px 22px;border-radius:50px;color:#fff;font-weight:700;text-decoration:none;
  background:linear-gradient(90deg,#00a8ff 0%,#00a8ff 30%,#64dd17 100%)}

@media (max-width:1199px){
  .vh-fab{bottom:calc(var(--app-tabbar-h,64px) + env(safe-area-inset-bottom,0px) + 14px);right:14px;padding:8px}
  .vh-fab span{display:none}
  .vh{left:8px;right:8px;width:auto;bottom:calc(var(--app-tabbar-h,64px) + env(safe-area-inset-bottom,0px) + 8px);
      max-height:calc(100vh - var(--app-tabbar-h,64px) - 90px);border-radius:20px}
}
@media (prefers-reduced-motion:reduce){.vh-fab i,.vh-orb,.vh-wait span,.vh{animation:none}}
@media print{.vh-fab,.vh{display:none}}