/* AgentDesk showcase voice sidebar — the campaign site's own voice agent.
 *
 * Themed from the page's :root tokens (--ink / --panel / --green / --teal …)
 * with hard fallbacks so the widget still looks right if it is ever dropped on
 * a page that doesn't define them.
 *
 * Layout: a fixed full-height panel on the RIGHT. When open, the page gets
 * padding-right so the content reflows beside it instead of hiding under it
 * (the sticky topbar reflows too — it is in normal flow). Under 900px the panel
 * becomes a full-screen sheet and the padding is dropped.
 */

:root{
  --va-w: 400px;
  --va-panel: var(--panel, #0e1d14);
  --va-panel-2: var(--panel-2, #122619);
  --va-line: var(--line, rgba(152,204,172,.14));
  --va-text: var(--text, #eef8f1);
  --va-muted: var(--muted, #9cbfa9);
  --va-dim: var(--dim, #6d8a79);
  --va-green: var(--green, #3ddc8c);
  --va-teal: var(--teal, #3fc7d9);
  --va-radius: 16px;
  --va-disp: var(--disp, "Bricolage Grotesque", sans-serif);
  --va-body: var(--body, "Instrument Sans", sans-serif);
  /* Live audio level (0–1), written by the widget on every animation frame. */
  --va-level: 0;
}

/* ---------- launcher ---------- */

.va-fab{
  position:fixed; right:22px; bottom:22px; z-index:190;
  display:inline-flex; align-items:center; gap:10px;
  padding:13px 20px 13px 16px; border:0; cursor:pointer;
  border-radius:999px; font-family:var(--va-body); font-size:15px; font-weight:600;
  color:#04150c; background:linear-gradient(135deg, var(--va-green), var(--va-teal));
  box-shadow:0 10px 34px rgba(61,220,140,.28), 0 2px 8px rgba(0,0,0,.4);
  transition:transform .18s ease, box-shadow .18s ease, opacity .2s ease;
}
.va-fab:hover{transform:translateY(-2px); box-shadow:0 14px 40px rgba(61,220,140,.36), 0 2px 8px rgba(0,0,0,.45)}
.va-fab:active{transform:translateY(0)}
.va-fab svg{width:19px;height:19px;flex:none}
.va-fab .va-fab-ping{
  position:absolute; inset:0; border-radius:999px; pointer-events:none;
  box-shadow:0 0 0 0 rgba(61,220,140,.55);
  animation:va-ping 2.8s cubic-bezier(.22,.61,.36,1) infinite;
}
@keyframes va-ping{
  0%{box-shadow:0 0 0 0 rgba(61,220,140,.5)}
  70%{box-shadow:0 0 0 18px rgba(61,220,140,0)}
  100%{box-shadow:0 0 0 0 rgba(61,220,140,0)}
}
body.va-open .va-fab{opacity:0; pointer-events:none; transform:translateY(12px)}

/* ---------- panel ---------- */

.va-panel{
  position:fixed; top:0; right:0; z-index:200;
  width:var(--va-w); max-width:100vw; height:100dvh;
  display:flex; flex-direction:column;
  background:linear-gradient(180deg, var(--va-panel-2), var(--va-panel) 42%);
  border-left:1px solid var(--va-line);
  box-shadow:-24px 0 60px rgba(0,0,0,.45);
  font-family:var(--va-body); color:var(--va-text);
  transform:translateX(100%); transition:transform .34s cubic-bezier(.4,0,.2,1);
  overscroll-behavior:contain;
}
body.va-open .va-panel{transform:translateX(0)}
@media (min-width:901px){
  body{transition:padding-right .34s cubic-bezier(.4,0,.2,1)}
  body.va-open{padding-right:var(--va-w)}
}
@media (max-width:900px){
  :root{--va-w:100vw}
  .va-panel{border-left:0}
}
@media (prefers-reduced-motion:reduce){
  .va-panel,body{transition:none}
}

/* header */
.va-head{
  display:flex; align-items:center; gap:12px;
  padding:16px 16px 14px 20px; border-bottom:1px solid var(--va-line); flex:none;
}
.va-head-id{flex:1; min-width:0}
.va-head h2{
  font-family:var(--va-disp); font-size:16.5px; font-weight:700; letter-spacing:-.01em;
  margin:0; line-height:1.25;
}
.va-head p{margin:1px 0 0; font-size:12.5px; color:var(--va-dim); line-height:1.35}
.va-badge{
  display:inline-flex; align-items:center; gap:6px; flex:none;
  padding:5px 10px; border-radius:999px; font-size:11px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--va-muted); background:rgba(255,255,255,.04); border:1px solid var(--va-line);
}
.va-badge i{width:6px;height:6px;border-radius:50%;background:var(--va-dim);font-style:normal}
.va-live .va-badge{color:var(--va-green); border-color:rgba(61,220,140,.3); background:rgba(61,220,140,.09)}
.va-live .va-badge i{background:var(--va-green); animation:va-blink 2s ease-in-out infinite}
@keyframes va-blink{0%,100%{opacity:1}50%{opacity:.35}}
.va-x{
  flex:none; width:32px; height:32px; display:grid; place-items:center; cursor:pointer;
  border-radius:9px; border:1px solid var(--va-line); background:transparent;
  color:var(--va-muted); font-size:19px; line-height:1; transition:.15s;
}
.va-x:hover{background:rgba(255,255,255,.06); color:var(--va-text)}

/* scrolling body */
.va-body{flex:1; overflow-y:auto; padding:22px 20px 16px; display:flex; flex-direction:column}
.va-body::-webkit-scrollbar{width:8px}
.va-body::-webkit-scrollbar-thumb{background:rgba(152,204,172,.16); border-radius:8px}

/* ---------- the orb ---------- */

.va-stage{display:flex; flex-direction:column; align-items:center; text-align:center; flex:none}
.va-orb{
  position:relative; width:132px; height:132px; display:grid; place-items:center;
  margin:6px 0 18px;
}
.va-orb::before{                        /* outer bloom, scales with the voice */
  content:""; position:absolute; inset:-26px; border-radius:50%;
  background:radial-gradient(circle, rgba(61,220,140,.22), transparent 68%);
  opacity:calc(.25 + var(--va-level) * .75);
  transform:scale(calc(.85 + var(--va-level) * .35));
  transition:opacity .12s linear, transform .12s linear;
}
.va-ring{
  position:absolute; inset:0; border-radius:50%;
  border:1px solid rgba(152,204,172,.18);
}
.va-ring:nth-of-type(2){
  inset:-14px; border-color:rgba(61,220,140,.16);
  transform:scale(calc(1 + var(--va-level) * .12));
  transition:transform .12s linear;
}
.va-core{
  position:relative; width:96px; height:96px; border-radius:50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.5), transparent 42%),
    linear-gradient(150deg, var(--va-green), var(--va-teal) 78%);
  box-shadow:
    inset 0 0 26px rgba(4,21,12,.35),
    0 0 calc(16px + var(--va-level) * 34px) rgba(61,220,140,calc(.28 + var(--va-level) * .5));
  transform:scale(calc(1 + var(--va-level) * .07));
  transition:transform .1s linear, box-shadow .1s linear;
  display:grid; place-items:center;
}
.va-core svg{width:34px;height:34px;color:#04150c;opacity:.72}
/* idle breathing — only when nobody is speaking */
.va-idle .va-core{animation:va-breathe 4.2s ease-in-out infinite}
@keyframes va-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
/* thinking — a slow sweep around the rim */
.va-thinking .va-ring:nth-of-type(1){
  border-color:transparent; border-top-color:var(--va-teal);
  animation:va-spin 1.1s linear infinite;
}
@keyframes va-spin{to{transform:rotate(360deg)}}

/* level bars under the orb — only meaningful once there is audio to measure */
.va-bars{display:none; align-items:flex-end; justify-content:center; gap:5px; height:26px; margin-bottom:14px}
.va-incall .va-bars{display:flex}
.va-bars i{
  display:block; width:4px; border-radius:3px; background:linear-gradient(180deg, var(--va-green), var(--va-teal));
  height:calc(4px + var(--va-bar, 0) * 22px);
  opacity:.85; transition:height .09s linear;
}
.va-listening .va-bars i{background:linear-gradient(180deg, var(--va-teal), #8fd8e6)}

.va-status{font-size:14px; color:var(--va-muted); min-height:20px; line-height:1.4}
.va-status b{color:var(--va-text); font-weight:600}
.va-said{
  margin:12px 0 0; padding:10px 14px; border-radius:12px; max-width:100%;
  background:rgba(255,255,255,.04); border:1px solid var(--va-line);
  font-size:13.5px; color:var(--va-muted); line-height:1.5; text-align:left;
}
.va-said span{display:block; font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--va-dim); margin-bottom:4px}

/* ---------- pre-call ---------- */

.va-intro{flex:1; display:flex; flex-direction:column}
.va-intro .va-lede{font-size:14.5px; color:var(--va-muted); line-height:1.6; margin:2px 0 18px; text-align:center}
.va-points{list-style:none; margin:0 0 22px; padding:0; display:grid; gap:9px}
.va-points li{
  display:flex; gap:10px; align-items:flex-start;
  font-size:13.5px; color:var(--va-muted); line-height:1.5;
}
.va-points li::before{
  content:"✓"; color:var(--va-green); font-size:12px; font-weight:700; flex:none;
  margin-top:2px;
}
.va-start{
  width:100%; padding:15px 20px; border:0; cursor:pointer; border-radius:13px;
  font-family:var(--va-body); font-size:15.5px; font-weight:700; color:#04150c;
  background:linear-gradient(135deg, var(--va-green), var(--va-teal));
  box-shadow:0 8px 26px rgba(61,220,140,.24); transition:transform .16s ease, box-shadow .16s ease;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
}
.va-start:hover{transform:translateY(-1px); box-shadow:0 12px 32px rgba(61,220,140,.32)}
.va-start svg{width:18px;height:18px}
.va-note{
  display:flex; gap:9px; margin-top:14px; font-size:12px; color:var(--va-dim); line-height:1.55;
}
.va-note svg{width:14px;height:14px;flex:none;margin-top:2px}
.va-note strong{color:var(--va-muted); font-weight:600}

/* ---------- suggested questions ---------- */

.va-qs{margin-top:22px; flex:none}
.va-qs-label{
  display:flex; align-items:center; gap:10px; margin-bottom:11px;
  font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--va-dim);
}
.va-qs-label::after{content:""; flex:1; height:1px; background:var(--va-line)}
.va-qlist{display:grid; gap:8px}
.va-q{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left; cursor:pointer;
  padding:11px 13px; border-radius:12px; font-family:var(--va-body); font-size:13.5px;
  line-height:1.4; color:var(--va-text);
  background:rgba(255,255,255,.035); border:1px solid var(--va-line);
  transition:background .15s ease, border-color .15s ease, transform .12s ease;
}
.va-q:hover{background:rgba(61,220,140,.1); border-color:rgba(61,220,140,.34); transform:translateX(2px)}
.va-q:disabled{opacity:.45; cursor:default; transform:none; background:rgba(255,255,255,.02)}
.va-q svg{width:14px;height:14px;flex:none;color:var(--va-green);opacity:.8}
.va-q.va-q-asked{border-color:rgba(61,220,140,.3); background:rgba(61,220,140,.07); color:var(--va-muted)}

/* ---------- details form ---------- */
/* Shown when the agent calls open_details_panel. Typed beats spoken for an
   email address by a wide margin — this is how a lead actually survives. */

.va-lead{margin-top:20px; flex:none}
.va-lead h3{
  font-family:var(--va-disp); font-size:15px; font-weight:700; margin:0 0 4px;
  letter-spacing:-.01em;
}
.va-lead p.va-lead-sub{font-size:12.5px; color:var(--va-dim); margin:0 0 14px; line-height:1.5}
.va-fields{display:grid; gap:9px; margin-bottom:12px}
.va-field label{
  display:block; font-size:10.5px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--va-dim); margin-bottom:5px;
}
.va-field input,
.va-field textarea{
  width:100%; padding:11px 13px; border-radius:11px; font-family:var(--va-body);
  font-size:14px; color:var(--va-text);
  background:rgba(255,255,255,.04); border:1px solid var(--va-line);
  transition:border-color .15s ease, background .15s ease;
}
.va-field textarea{resize:vertical; min-height:64px; line-height:1.5}
.va-field input::placeholder,
.va-field textarea::placeholder{color:rgba(109,138,121,.7)}
.va-field input:focus,
.va-field textarea:focus{
  outline:none; border-color:rgba(61,220,140,.45); background:rgba(61,220,140,.06);
}
.va-field input:invalid:not(:placeholder-shown){border-color:rgba(255,120,105,.45)}
.va-row{display:grid; grid-template-columns:1fr 1fr; gap:9px}
.va-send{
  width:100%; padding:13px 18px; border:0; cursor:pointer; border-radius:12px;
  font-family:var(--va-body); font-size:14.5px; font-weight:700; color:#04150c;
  background:linear-gradient(135deg, var(--va-green), var(--va-teal));
  transition:transform .16s ease, opacity .16s ease;
}
.va-send:hover{transform:translateY(-1px)}
.va-send:disabled{opacity:.5; cursor:default; transform:none}
.va-sent{
  display:flex; gap:10px; align-items:flex-start; margin-top:14px;
  padding:12px 14px; border-radius:12px; font-size:13.5px; line-height:1.5;
  color:var(--va-text); background:rgba(61,220,140,.09);
  border:1px solid rgba(61,220,140,.3);
}
.va-sent svg{width:16px;height:16px;flex:none;color:var(--va-green);margin-top:1px}

/* ---------- controls ---------- */

.va-foot{
  flex:none; display:flex; gap:10px; padding:14px 20px calc(14px + env(safe-area-inset-bottom));
  border-top:1px solid var(--va-line); background:rgba(4,16,10,.35);
}
.va-btn{
  flex:1; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 14px; border-radius:12px; cursor:pointer; font-family:var(--va-body);
  font-size:13.5px; font-weight:600; color:var(--va-text);
  background:rgba(255,255,255,.05); border:1px solid var(--va-line); transition:.15s;
}
.va-btn:hover{background:rgba(255,255,255,.09)}
.va-btn svg{width:15px;height:15px}
.va-btn-end{color:#ffb4ac; background:rgba(255,120,105,.09); border-color:rgba(255,120,105,.26)}
.va-btn-end:hover{background:rgba(255,120,105,.16)}
.va-btn.va-on{color:#04150c; background:var(--va-green); border-color:transparent}

/* ---------- misc states ---------- */

.va-err{
  margin:14px 0 0; padding:11px 13px; border-radius:11px; font-size:13px; line-height:1.5;
  color:#ffcfc9; background:rgba(255,120,105,.1); border:1px solid rgba(255,120,105,.28);
}
.va-hidden{display:none !important}
.va-build{
  padding:10px 20px 0; font-size:10.5px; color:rgba(109,138,121,.55); text-align:center; flex:none;
}