/* ==========================================================================
   Ask Lexi · interactive avatar guide (desktop-app.html only, TEST).
   Every rule is scoped under #ask-lexi. Tokens come from css/base.css.
   Motion: all animation lives under #ask-lexi.av--motion (set by js/avatar.js when
   motion is allowed, or forced with ?motion for QA). Without it the orb is static
   and each state is shown by the pill text and the orb colour only.
   Animated properties are transform and opacity only.
   ========================================================================== */

#ask-lexi{
  --av-r-card:28px;
  --av-r-stage:22px;
  --av-muted:#5f524b;          /* small text on cream, AA (about 6:1) */
  --av-body:#3d3530;           /* body text on cream */
  --av-chip-bg:rgba(26,25,24,.055);
  --av-chip-line:rgba(26,25,24,.12);
  --av-tone:255,143,90;        /* orb tone, rgb of --accent; changes per state */
  --av-dock-h:0px;             /* set by JS when the captions dock overlays the screen */
  position:relative;
  padding:clamp(48px,7vw,104px) 0 clamp(8px,2vw,24px);
}

/* ------------------------------------------------------------------ card */
#ask-lexi .av-card{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.32fr);gap:clamp(32px,4vw,56px);align-items:center;
  background:var(--cream);color:var(--ink);border-radius:var(--av-r-card);
  padding:clamp(28px,3.2vw,44px);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.75),0 12px 30px -18px rgba(0,0,0,.5);
}
#ask-lexi .av-card :focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* ------------------------------------------------------------------ copy column */
#ask-lexi .av-copy{display:flex;flex-direction:column;min-width:0}
#ask-lexi .av-title{font-size:clamp(40px,3.9vw,58px);line-height:.98;letter-spacing:-.035em;color:var(--taupe-2);text-wrap:balance}
#ask-lexi .av-title .av-title__l1,#ask-lexi .av-title .av-title__l2{display:block}
#ask-lexi .av-title .hi{color:var(--ink)}
#ask-lexi .av-intro{margin-top:18px;max-width:30em;font-size:17px;line-height:1.55;color:var(--av-body)}

#ask-lexi .av-chips{display:grid;grid-template-columns:repeat(2,minmax(0,max-content));gap:8px;margin-top:26px}
#ask-lexi .av-chips__wide{grid-column:1 / -1}
#ask-lexi .av-chip{
  display:flex;align-items:center;width:100%;min-height:42px;padding:8px 16px;border-radius:999px;
  background:var(--av-chip-bg);border:1px solid var(--av-chip-line);
  font-size:14px;font-weight:600;line-height:1.3;letter-spacing:-.005em;color:var(--ink);text-align:left;
  transition:background-color .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease),transform .25s var(--ease-out);
}
#ask-lexi .av-chip:hover{background:#fff;border-color:rgba(255,143,90,.7)}
#ask-lexi .av-chip:active{transform:scale(.98)}
#ask-lexi .av-chip[aria-current="true"]{background:var(--ink);border-color:var(--ink);color:var(--cream)}
#ask-lexi .av-chip--go{background:rgba(255,143,90,.16);border-color:rgba(255,143,90,.55)}
#ask-lexi .av-chip--go:hover{background:rgba(255,143,90,.28)}

#ask-lexi .av-talk{margin-top:26px;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px 18px;max-width:560px}
#ask-lexi .av-ptt{display:flex;align-items:center;gap:12px}
#ask-lexi .av-talk .av-novoice,#ask-lexi .av-talk .av-ptt__hint{grid-column:1 / -1}
#ask-lexi .av-ptt[hidden]~.av-type{grid-column:1 / -1}
#ask-lexi .av-ptt[hidden]{display:none}
#ask-lexi .av-mic{
  position:relative;flex:none;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;
  background:var(--accent);color:var(--accent-ink);touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
  box-shadow:0 10px 22px -10px rgba(255,143,90,.9);
  transition:background-color .2s var(--ease),transform .2s var(--ease-out),box-shadow .2s var(--ease);
}
#ask-lexi .av-mic:hover{background:var(--accent-hover)}
#ask-lexi .av-mic:active{transform:scale(.95)}
#ask-lexi .av-mic[aria-pressed="true"]{background:var(--ink);color:var(--accent)}
#ask-lexi .av-ptt__label{font-size:15px;font-weight:700;letter-spacing:-.01em;white-space:nowrap}
#ask-lexi .av-ptt__hint{font-size:12.5px;font-weight:500;line-height:1.35;color:var(--av-muted)}
#ask-lexi .av-ptt__hint[hidden]{display:none}
#ask-lexi .av-novoice{font-size:14px;line-height:1.5;color:var(--av-body);padding:12px 16px;border-radius:14px;background:var(--av-chip-bg)}

#ask-lexi .av-type{position:relative;display:flex;align-items:center;min-width:0}
#ask-lexi .av-type__in{
  width:100%;height:50px;padding:0 58px 0 20px;border-radius:999px;border:1px solid rgba(26,25,24,.18);
  background:rgba(255,255,255,.6);color:var(--ink);font-size:15px;font-weight:500;
  transition:border-color .2s var(--ease),background-color .2s var(--ease);
}
#ask-lexi .av-type__in::placeholder{color:#6f625b;opacity:1}
#ask-lexi .av-type__in:hover{background:rgba(255,255,255,.85)}
#ask-lexi .av-type__in:focus{outline:none}
#ask-lexi .av-type__in:focus-visible{outline:2px solid var(--ink);outline-offset:2px;background:#fff}
#ask-lexi .av-type__send{
  position:absolute;right:5px;top:5px;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  background:var(--ink);color:var(--cream);transition:background-color .2s var(--ease)}
#ask-lexi .av-type__send:hover{background:#3a3633}
#ask-lexi .av-type__send:hover svg{animation:arrow-kick .5s var(--ease)}

#ask-lexi .av-demo-trigger{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;padding:0;border:0;opacity:0;pointer-events:none}

/* ------------------------------------------------------------------ stage */
#ask-lexi .av-stagecol{min-width:0}
#ask-lexi .av-stage{
  position:relative;border-radius:var(--av-r-stage);overflow:hidden;isolation:isolate;
  background:#0d0a09;color:var(--fg);
  box-shadow:0 26px 60px -26px rgba(43,17,5,.75),0 0 0 1px rgba(26,25,24,.08);
}
#ask-lexi .av-screen{
  position:relative;aspect-ratio:16 / 10;overflow:hidden;
  background:
    radial-gradient(60% 70% at 50% 38%,rgba(255,143,90,.16) 0%,rgba(255,143,90,0) 70%),
    radial-gradient(120% 100% at 50% 0%,#2a1a12 0%,#17110e 52%,#0d0a09 100%);
}

/* presence (default placeholder avatar) */
#ask-lexi .av-presence{position:absolute;inset:0;z-index:0;pointer-events:none}
#ask-lexi .av-particles i{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);border-radius:50%;background:rgba(255,196,160,.55);opacity:.5}
#ask-lexi .av-orb{position:absolute;left:50%;top:40%;height:46%;aspect-ratio:1;transform:translate(-50%,-50%)}
#ask-lexi .av-orb > *{position:absolute;inset:0;border-radius:50%}
#ask-lexi .av-orb__glow{inset:-38%;background:radial-gradient(closest-side,rgba(var(--av-tone),.34),rgba(var(--av-tone),.1) 55%,rgba(var(--av-tone),0) 100%);opacity:.8;transition:opacity .6s var(--ease)}
#ask-lexi .av-orb__core{
  background:radial-gradient(circle at 34% 28%,rgba(255,214,190,.2),rgba(var(--av-tone),.1) 46%,rgba(var(--av-tone),.04) 72%,rgba(var(--av-tone),0) 100%);
  box-shadow:inset 0 0 0 1px rgba(var(--av-tone),.26),inset 0 -20px 40px -20px rgba(var(--av-tone),.3),0 0 60px -10px rgba(var(--av-tone),.35)}
#ask-lexi .av-orbit{inset:-9%;opacity:0;transition:opacity .4s var(--ease)}
#ask-lexi .av-orbit i{position:absolute;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:22%;background:rgb(var(--av-tone))}
#ask-lexi .av-orbit i:nth-child(1){left:50%;top:0}
#ask-lexi .av-orbit i:nth-child(2){left:69.1%;top:3.8%;opacity:.7;transform:scale(.8)}
#ask-lexi .av-orbit i:nth-child(3){left:85.4%;top:14.6%;opacity:.45;transform:scale(.6)}
#ask-lexi .av-orb__float{display:grid;place-items:center}
#ask-lexi .av-mark{width:42%;height:auto;filter:drop-shadow(0 12px 28px rgba(255,143,90,.45))}
#ask-lexi .av-mark__bg{fill:var(--accent)}
#ask-lexi .av-mark__l{stroke:var(--accent-ink)}
#ask-lexi .av-mark__dot{fill:var(--accent-ink)}
#ask-lexi .av-check{inset:auto;right:2%;bottom:2%;width:30%;height:30%;display:grid;place-items:center;border-radius:22%;background:var(--ok);opacity:0;transform:scale(.6);pointer-events:none;
  transition:opacity .3s var(--ease),transform .3s var(--ease)}
#ask-lexi .av-check svg{width:62%;height:62%;stroke:var(--accent-ink)}

/* state colours (also the whole story in reduced motion) */
#ask-lexi .av-stage[data-state="thinking"]{--av-tone:155,156,255}  /* --violet: working */
#ask-lexi .av-stage[data-state="speaking"]{--av-tone:255,171,128} /* --accent-hover */
#ask-lexi .av-stage[data-state="done"]{--av-tone:255,210,138}     /* --ok gold */
#ask-lexi .av-stage[data-state="notice"]{--av-tone:168,151,140}   /* --taupe */
#ask-lexi .av-stage[data-state="listening"] .av-orb__glow,#ask-lexi .av-stage[data-state="speaking"] .av-orb__glow{opacity:1}
#ask-lexi .av-stage[data-state="thinking"] .av-orbit{opacity:1}
#ask-lexi .av-stage[data-state="done"] .av-check{opacity:1;transform:none}

/* video driver layer */
#ask-lexi .av-video{position:absolute;inset:0;z-index:1;opacity:0;pointer-events:none;transition:opacity .4s var(--ease)}
#ask-lexi .av-video video{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;opacity:0;transition:opacity .25s var(--ease)}
#ask-lexi .av-video video.is-on{opacity:1}
#ask-lexi .av-stage.has-video .av-video{opacity:1}
#ask-lexi .av-stage.has-video .av-presence{opacity:0}

/* talking-loop driver: one muted clip filling the stage (object-fit:cover at the manifest "focus").
   .av-tl__zoom takes the listening lean-in, .av-tl__breath the idle breathing; both scale around the face.
   Inside: the idle still (canvas) under two <video> elements that crossfade (200 ms) by opacity. */
#ask-lexi .av-tl{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none;background:#cfc8c1;
  opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility 0s linear .5s}
#ask-lexi .av-stage.has-tl .av-tl{opacity:1;visibility:visible;transition:opacity .5s var(--ease),visibility 0s}
#ask-lexi .av-stage.has-tl .av-presence{visibility:hidden;transition:visibility 0s linear .5s}
#ask-lexi .av-stage.has-tl .av-presence *{animation:none!important}
#ask-lexi .av-tl__zoom,#ask-lexi .av-tl__breath{position:absolute;inset:0;transform-origin:50% 30%}
#ask-lexi .av-tl__zoom{z-index:0;isolation:isolate;transition:transform .9s var(--ease);--td:.9s} /* own stacking context: the videos stay under the shade */
#ask-lexi .av-tl canvas,#ask-lexi .av-tl video{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;
  object-fit:cover;object-position:var(--tl-focus,50% 50%)}
#ask-lexi .av-tl video{opacity:0;transition:opacity .2s linear;--td:.2s}
#ask-lexi .av-tl video.is-on{opacity:1}
/* light office footage: a soft shade at the top (pill, controls) and a deeper one at the bottom (captions, chip) */
#ask-lexi .av-tl::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(to bottom,rgba(13,10,9,.34) 0,rgba(13,10,9,.12) 9%,rgba(13,10,9,0) 18%),
    linear-gradient(to top,rgba(13,10,9,.6) 0,rgba(13,10,9,.32) 18%,rgba(13,10,9,0) 42%)}
/* overlays on the footage: darker glass so text and icons keep AA contrast */
#ask-lexi .av-stage.has-tl .av-pill{background:rgba(13,10,9,.78);border-color:rgba(255,255,255,.16)}
#ask-lexi .av-stage.has-tl .av-ctrl{background:rgba(13,10,9,.72);border-color:rgba(255,255,255,.16)}
#ask-lexi .av-stage.has-tl .av-ctrl:hover{background:rgba(13,10,9,.88);border-color:rgba(255,255,255,.3)}
#ask-lexi .av-stage.has-tl .av-ctrl[aria-disabled="true"]:hover{background:rgba(13,10,9,.72);border-color:rgba(255,255,255,.16)}
#ask-lexi .av-stage.has-tl .av-ctrl[aria-pressed="true"]{background:var(--fg);color:var(--ink);border-color:rgba(26,25,24,.35)}
/* captions stay below the chin: at most about a third of the screen (--av-screen-h is set by js/avatar.js), then they scroll */
#ask-lexi .av-stage.has-tl .av-cap{background:rgba(13,10,9,.8);border-color:rgba(255,255,255,.12);max-height:min(9.5em,calc(var(--av-screen-h,400px) * .36))}
#ask-lexi .av-stage.has-tl .av-cta{background:rgba(26,25,24,.8);border-color:rgba(255,255,255,.18);box-shadow:0 10px 24px -12px rgba(0,0,0,.6)}
#ask-lexi .av-stage.has-tl .av-cta:hover{background:rgba(26,25,24,.92);border-color:rgba(255,255,255,.32)}
#ask-lexi .av-stage.has-tl .av-cta[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}

/* portrait driver: the guide character on a light, warm studio backdrop.
   Nothing between .av-pt and the image may create a stacking context (no transform, z-index,
   filter or opacity below 1 at rest), so the image's multiply blend reaches the backdrop.
   .av-pt fades in with opacity; while it is below 1 it is its own group, which still contains the backdrop. */
#ask-lexi .av-pt{
  position:absolute;inset:0;display:flex;justify-content:center;align-items:flex-end;padding-left:4%;
  pointer-events:none;opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility 0s linear .5s}
#ask-lexi .av-pt::before{ /* warm cream at the edges; the pure white core sits behind the character (.av-pt__core) */
  content:"";position:absolute;inset:0;
  background:radial-gradient(120% 105% at 52% 34%,#f6f0ea 0%,#efe6de 58%,#e9ddd2 100%)}
#ask-lexi .av-stage.has-portrait .av-pt{opacity:1;visibility:visible;transition:opacity .5s var(--ease),visibility 0s}
#ask-lexi .av-stage.has-portrait .av-presence{visibility:hidden;transition:visibility 0s linear .5s}
#ask-lexi .av-stage.has-portrait .av-presence *{animation:none!important}
/* about 92% of the stage height, never more than 1.6x the 360px image; arms tucked just under the bottom edge */
#ask-lexi .av-pt__box{position:relative;flex:none;height:min(92%,576px);aspect-ratio:1;margin-bottom:-8px}
#ask-lexi .av-pt__img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;mix-blend-mode:multiply;
  -webkit-user-select:none;user-select:none}
#ask-lexi .av-pt__img,#ask-lexi .av-pt__fx{transform-origin:50% 100%;transition:transform .6s var(--ease)}
#ask-lexi .av-pt__fx{position:absolute;inset:0}

/* behind the image: white core and a soft apricot glow around the head (status lives in the pill square, never rings).
   Masked above the collar so nothing shows through the white shirt. */
#ask-lexi .av-pt__aura{position:absolute;inset:-30%;
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 54%,transparent 60%);mask-image:linear-gradient(to bottom,#000 0,#000 54%,transparent 60%)}
#ask-lexi .av-pt__aura > *{position:absolute;display:block;border-radius:50%}
#ask-lexi .av-pt__core{position:absolute;left:-20%;right:-20%;top:-20%;bottom:-30%;
  background:radial-gradient(closest-side,#fff 0,#fff 62%,rgba(255,255,255,0) 100%)}
#ask-lexi .av-pt__glow{ /* centred on the head; % of the aura box (box + 60%) */
  left:calc((30% + var(--hx)) / 1.6);top:calc((30% + var(--hy)) / 1.6);width:calc(var(--hr) * 2 / 1.6);aspect-ratio:1;margin:calc(var(--hr) / -1.6) 0 0 calc(var(--hr) / -1.6)}
#ask-lexi .av-pt__glow{width:calc(var(--hr) * 2.7 / 1.6);margin:calc(var(--hr) * -1.35 / 1.6) 0 0 calc(var(--hr) * -1.35 / 1.6);
  background:radial-gradient(closest-side,rgba(255,143,90,0) 0,rgba(255,143,90,0) 56%,rgba(255,143,90,.24) 74%,rgba(255,143,90,.08) 88%,rgba(255,143,90,0) 100%);
  transition:opacity .6s var(--ease)}

/* eyelids and mouth: placed over the measured anchors by js/avatar.js (left/top/width/height in % of the image) */
#ask-lexi .av-pt__lid,#ask-lexi .av-pt__mouth{position:absolute;display:block}
#ask-lexi .av-pt__lid i{position:absolute;inset:0;display:block;border-radius:50%;transform-origin:50% 0;transform:scaleY(0);
  -webkit-mask-image:radial-gradient(closest-side,#000 0,#000 80%,transparent 100%);mask-image:radial-gradient(closest-side,#000 0,#000 80%,transparent 100%)}
#ask-lexi .av-pt__lid b{position:absolute;inset:10%;display:block;border-radius:50%;border-bottom:2.5px solid #2a1812}
#ask-lexi .av-pt__mouth i{
  position:absolute;inset:0;display:block;transform-origin:50% 0;transform:scaleY(0);opacity:0;
  border-radius:40% 40% 50% 50% / 26% 26% 74% 74%;
  background:
    radial-gradient(58% 34% at 50% 0,#efe2da 0,#efe2da 62%,rgba(239,226,218,0) 76%),   /* upper teeth */
    radial-gradient(60% 52% at 50% 104%,#9c3d36 0,rgba(156,61,54,0) 100%),             /* tongue */
    radial-gradient(90% 90% at 50% 40%,#4a1412 0,#5e1c18 70%,#6f2620 100%);
  box-shadow:0 0 1.5px .5px rgba(150,62,52,.45),inset 0 -1.2px 1px rgba(205,120,108,.55)}

/* thinking: three dots orbiting near the top right of the head */
#ask-lexi .av-pt__think{position:absolute;width:9%;aspect-ratio:1;margin:-4.5% 0 0 -4.5%;opacity:0;transition:opacity .35s var(--ease)}
#ask-lexi .av-pt__think > span{position:absolute;inset:0;display:block}
#ask-lexi .av-pt__think i{position:absolute;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:22%;background:#7f80f0}
#ask-lexi .av-pt__think i:nth-child(1){left:50%;top:0}
#ask-lexi .av-pt__think i:nth-child(2){left:93.3%;top:75%;opacity:.75;transform:scale(.82)}
#ask-lexi .av-pt__think i:nth-child(3){left:6.7%;top:75%;opacity:.5;transform:scale(.66)}
#ask-lexi .av-stage[data-state="thinking"] .av-pt__think{opacity:1}

/* done: a gold check near the shoulder, lifted above the captions when they are tall */
#ask-lexi .av-pt__badge{position:absolute;bottom:max(24%,calc(var(--av-dock-h) + 14px));width:34px;height:34px;margin-left:-17px;
  display:grid;place-items:center;border-radius:22%;background:var(--ok);
  opacity:0;transform:scale(.6);transition:opacity .3s var(--ease),transform .3s var(--ease)}
#ask-lexi .av-pt__badge svg{width:62%;height:62%;stroke:var(--accent-ink)}
#ask-lexi .av-stage[data-state="done"] .av-pt__badge{opacity:1;transform:none}

/* states without motion: the pill text and its status square say it (no state ring: status is always the square) */

/* overlays on the light backdrop: darker glass so text and icons keep AA contrast */
#ask-lexi .av-stage.has-portrait .av-pill{background:rgba(13,10,9,.8);border-color:rgba(255,255,255,.16)}
#ask-lexi .av-stage.has-portrait .av-ctrl{background:rgba(13,10,9,.74);border-color:rgba(255,255,255,.16)}
#ask-lexi .av-stage.has-portrait .av-ctrl:hover{background:rgba(13,10,9,.88);border-color:rgba(255,255,255,.3)}
#ask-lexi .av-stage.has-portrait .av-ctrl[aria-disabled="true"]:hover{background:rgba(13,10,9,.74);border-color:rgba(255,255,255,.16)}
#ask-lexi .av-stage.has-portrait .av-ctrl[aria-pressed="true"]{background:var(--fg);color:var(--ink);border-color:rgba(26,25,24,.35)}
#ask-lexi .av-stage.has-portrait .av-cap{background:rgba(13,10,9,.8);border-color:rgba(255,255,255,.12);box-shadow:0 10px 26px -14px rgba(43,17,5,.5)}
#ask-lexi .av-stage.has-portrait .av-card2{box-shadow:0 18px 40px -16px rgba(43,17,5,.55),0 0 0 1px rgba(26,25,24,.1)}
/* the talk chip moves to the bottom left, clear of the face */
#ask-lexi .av-stage.has-portrait .av-cta{left:16px;transform:none;background:rgba(26,25,24,.8);border-color:rgba(255,255,255,.16);box-shadow:0 10px 24px -12px rgba(43,17,5,.55)}
#ask-lexi .av-stage.has-portrait .av-cta:hover{background:rgba(26,25,24,.9);border-color:rgba(255,255,255,.3)}
#ask-lexi .av-stage.has-portrait .av-cta:active{transform:scale(.97)}
#ask-lexi .av-stage.has-portrait .av-cta[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
#ask-lexi .av-stage.has-portrait .av-top :focus-visible,#ask-lexi .av-stage.has-portrait .av-cta:focus-visible{outline-color:var(--ink)}

/* top bar: state pill + controls */
#ask-lexi .av-top{position:absolute;z-index:3;left:0;right:0;top:0;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:16px}
#ask-lexi .av-pill{
  display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 12px;border-radius:999px;
  background:rgba(13,10,9,.6);border:1px solid rgba(234,227,221,.14);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  font-family:var(--font-mono);font-weight:600;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg);
  opacity:0;transform:translateY(-4px);transition:opacity .25s var(--ease),transform .25s var(--ease)}
#ask-lexi .av-pill.is-on{opacity:1;transform:none}
#ask-lexi .av-pill__sq{font-size:12px} /* status square (css/base.css), about 7px */
#ask-lexi .av-ctrls{display:flex;gap:8px}
#ask-lexi .av-ctrl{
  display:grid;place-items:center;width:36px;height:36px;border-radius:50%;
  background:rgba(13,10,9,.55);border:1px solid rgba(234,227,221,.16);color:var(--fg);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:background-color .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease),opacity .2s var(--ease)}
#ask-lexi .av-ctrl:hover{background:rgba(234,227,221,.14);border-color:rgba(234,227,221,.3)}
#ask-lexi .av-ctrl[aria-disabled="true"]{opacity:.45;cursor:default}
#ask-lexi .av-ctrl[aria-disabled="true"]:hover{background:rgba(13,10,9,.55);border-color:rgba(234,227,221,.16)}
#ask-lexi .av-ctrl[aria-pressed="true"]{background:var(--fg);color:var(--ink);border-color:var(--fg)}
#ask-lexi .av-ctrl .av-i-off{display:none}
#ask-lexi .av-ctrl[aria-pressed="true"] .av-i-on{display:none}
#ask-lexi .av-ctrl[aria-pressed="true"] .av-i-off{display:block}
#ask-lexi .av-ctrl[hidden]{display:none}
#ask-lexi .av-stage :focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* "Hold to talk" overlay chip */
#ask-lexi .av-cta{
  position:absolute;z-index:3;left:50%;bottom:calc(var(--av-dock-h) + 16px);transform:translateX(-50%);
  display:inline-flex;align-items:center;gap:10px;height:42px;padding:0 18px 0 16px;border-radius:999px;
  background:rgba(234,227,221,.12);border:1px solid rgba(234,227,221,.22);color:var(--fg);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  font-size:14px;font-weight:600;letter-spacing:-.005em;white-space:nowrap;
  touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
  transition:background-color .2s var(--ease),border-color .2s var(--ease),opacity .25s var(--ease),transform .25s var(--ease-out)}
#ask-lexi .av-cta:hover{background:rgba(234,227,221,.2);border-color:rgba(234,227,221,.36)}
#ask-lexi .av-cta:active{transform:translateX(-50%) scale(.97)}
#ask-lexi .av-cta__sq{font-size:13px} /* status square, about 8px */
#ask-lexi .av-cta__chev{opacity:.8;transition:transform .25s var(--ease)}
#ask-lexi .av-cta:hover .av-cta__chev{transform:translateX(2px)}
#ask-lexi .av-cta[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
#ask-lexi .av-cta[aria-pressed="true"] .av-cta__sq{--status-c:var(--accent-ink)}
#ask-lexi .av-cta[hidden]{display:none}
#ask-lexi .av-stage.has-card .av-cta,#ask-lexi .av-stage.is-tight .av-cta{opacity:0;pointer-events:none;visibility:hidden}

/* dock: captions + cards. Overlays the screen bottom on wide layouts, sits below it on phones. */
#ask-lexi .av-dock{position:absolute;z-index:4;left:0;right:0;bottom:0;padding:0 16px 16px;display:flex;flex-direction:column;gap:10px;pointer-events:none}
#ask-lexi .av-dock{max-height:calc(100% - 52px);min-height:0}
#ask-lexi .av-dock > *{pointer-events:auto;min-height:0;flex:0 1 auto}
#ask-lexi .av-cap{
  max-height:min(9.5em,46%);overflow:auto;padding:12px 16px;border-radius:14px;
  background:rgba(13,10,9,.74);border:1px solid rgba(234,227,221,.1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  font-size:15px;font-weight:500;line-height:1.5;color:var(--fg);scrollbar-width:thin}
#ask-lexi .av-cap[hidden]{display:none}
#ask-lexi .av-cap.is-user{color:#d9cfc7;font-style:italic}
#ask-lexi .av-cap.is-user .av-cap__who{font-style:normal}
#ask-lexi .av-cap.is-interim .av-cap__txt{opacity:.8}
#ask-lexi .av-cap__who{display:inline-flex;vertical-align:-3px;margin-right:8px;color:var(--accent)}
#ask-lexi .av-cap__who svg{width:16px;height:16px}
#ask-lexi .av-cap__wait{display:inline-flex;gap:4px;margin-left:6px;vertical-align:middle}
#ask-lexi .av-cap__wait .status-sq{width:5px;height:5px;min-width:5px;min-height:5px;opacity:.8}
#ask-lexi .av-cap__chip{
  display:inline-flex;align-items:center;margin:6px 0 0;min-height:36px;padding:6px 14px;border-radius:999px;
  background:var(--accent);color:var(--accent-ink);font-size:14px;font-weight:600;font-style:normal;transition:background-color .2s var(--ease)}
#ask-lexi .av-cap__chip:hover{background:var(--accent-hover)}
#ask-lexi .av-stage.has-card .av-cap{display:none}

#ask-lexi .av-card2{
  padding:18px 20px;border-radius:16px;background:var(--cream);color:var(--ink);
  box-shadow:0 18px 40px -18px rgba(0,0,0,.8);
  opacity:0;transform:translateY(18px);transition:opacity .3s var(--ease),transform .45s var(--ease-out)}
#ask-lexi .av-card2.is-in{opacity:1;transform:none}
#ask-lexi .av-card2[hidden]{display:none}
#ask-lexi .av-card2__t{font-size:15px;font-weight:500;line-height:1.5;color:var(--ink)}
#ask-lexi .av-card2__btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
#ask-lexi .av-card2 :focus-visible{outline:2px solid var(--ink);outline-offset:3px}

#ask-lexi .av-honest{margin-top:12px;text-align:right;font-size:12.5px;font-weight:500;color:var(--av-muted)}

/* ------------------------------------------------------------------ motion (only with .av--motion) */
#ask-lexi.av--motion .av-orb__glow{animation:av-breathe-glow var(--ad) ease-in-out var(--ai);--ad:6s;--ai:infinite}
#ask-lexi.av--motion .av-orb__core{animation:av-breathe var(--ad) ease-in-out var(--ai);--ad:6s;--ai:infinite}
#ask-lexi.av--motion .av-orb__float{animation:av-float var(--ad) ease-in-out var(--ai);--ad:7.5s;--ai:infinite}
#ask-lexi.av--motion .av-particles i{animation:av-drift var(--t) ease-in-out var(--dl) var(--ai);--ad:var(--t);--ai:infinite}
#ask-lexi.av--motion .av-stage[data-state="thinking"] .av-orbit{animation:av-spin var(--ad) linear var(--ai);--ad:2.6s;--ai:infinite}
/* done: a brief check flash that always fades out by 1.2s, even if the state lingers */
#ask-lexi.av--motion .av-stage[data-state="done"] .av-check{animation:av-flash var(--ad) var(--ease-out) both;--ad:1.2s;--ai:1}
#ask-lexi.av--motion .av-stage[data-state="speaking"] .av-orb__float{animation-duration:3.2s;--ad:3.2s}
/* status squares: opacity-only blink (never a ring); the listening pill square carries .is-blink */
#ask-lexi.av--motion .status-sq.is-blink{--ad:1.6s;--ai:infinite}
#ask-lexi.av--motion .av-cta[aria-pressed="true"] .av-cta__sq{animation:status-sq-blink var(--ad) var(--ease) var(--ai);--ad:1.6s;--ai:infinite}
#ask-lexi.av--motion .av-cap__wait .status-sq{animation:av-blink var(--ad) ease-in-out var(--ai);--ad:1s;--ai:infinite}
#ask-lexi.av--motion .av-cap__wait .status-sq:nth-child(2){animation-delay:.15s}
#ask-lexi.av--motion .av-cap__wait .status-sq:nth-child(3){animation-delay:.3s}
/* portrait: breathing (translate + scale, 4s) and sway (rotate around the bottom centre, 7s) on the image
   and its overlay layer together, so the eyelids and mouth stay locked to the face */
#ask-lexi.av--motion .av-pt__img,#ask-lexi.av--motion .av-pt__fx{
  animation:av-pt-breathe 4s ease-in-out infinite,av-pt-sway 7s ease-in-out infinite;--ad:4s,7s;--ai:infinite}
#ask-lexi.av--motion .av-stage[data-state="listening"] .av-pt__img,
#ask-lexi.av--motion .av-stage[data-state="listening"] .av-pt__fx{transform:scale(1.015)} /* lean in */
#ask-lexi.av--motion .av-stage[data-state="listening"] .av-pt__glow{opacity:1}
#ask-lexi.av--motion .av-stage[data-state="thinking"] .av-pt__think > span{animation:av-spin var(--ad) linear var(--ai);--ad:2.4s;--ai:infinite}
#ask-lexi.av--motion .av-stage[data-state="done"] .av-pt__badge{animation:av-flash var(--ad) var(--ease-out) both;--ad:1.2s;--ai:1}
/* talking loop: idle breathing zoom (1.000 to 1.012 over 6s), listening lean-in (1.03). None without motion. */
#ask-lexi.av--motion .av-tl__breath{animation:av-tl-breathe var(--ad) ease-in-out var(--ai);--ad:6s;--ai:infinite}
#ask-lexi.av--motion .av-stage[data-state="listening"] .av-tl__zoom{transform:scale(1.03);--td:.9s}
#ask-lexi.is-off .av-stage *,#ask-lexi.is-off .av-stage *::after{animation-play-state:paused!important}


@keyframes av-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
@keyframes av-breathe-glow{0%,100%{opacity:.72;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}
@keyframes av-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-3.5%)}}
@keyframes av-drift{0%,100%{transform:translate(0,0);opacity:.25}50%{transform:translate(14px,-22px);opacity:.75}}
@keyframes av-spin{to{transform:rotate(360deg)}}
@keyframes av-flash{0%{transform:scale(.4);opacity:0}22%{transform:scale(1.1);opacity:1}38%{transform:scale(1);opacity:1}72%{transform:scale(1);opacity:1}100%{transform:scale(.92);opacity:0}}
@keyframes av-blink{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes av-pt-breathe{0%,100%{translate:0 0;scale:1}50%{translate:0 -2px;scale:1.008}}
@keyframes av-pt-sway{0%,100%{rotate:-.4deg}50%{rotate:.4deg}}
@keyframes av-tl-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.012)}}

/* QA: ?motion forces motion even when the OS asks for less. base.css shortens every
   animation under reduced motion with !important; restore this section's own timings. */
@media (prefers-reduced-motion:reduce){
  #ask-lexi.av--motion *,#ask-lexi.av--motion *::after{
    animation-duration:var(--ad,.001ms)!important;animation-iteration-count:var(--ai,1)!important;transition-duration:var(--td,.3s)!important}
}

/* ------------------------------------------------------------------ layout: stacked */
@media (max-width:1024px){
  #ask-lexi .av-card{grid-template-columns:minmax(0,1fr);gap:32px}
  #ask-lexi .av-stagecol{order:-1}
  #ask-lexi .av-copy{max-width:680px}
}
@media (max-width:640px){
  #ask-lexi{padding-top:40px}
  #ask-lexi .av-card{padding:12px 12px 24px;border-radius:24px;gap:24px}
  #ask-lexi .av-copy{padding:0 8px}
  #ask-lexi .av-stage{border-radius:16px}
  #ask-lexi .av-title{font-size:clamp(34px,10vw,44px)}
  #ask-lexi .av-intro{margin-top:14px;font-size:15.5px}
  #ask-lexi .av-chips{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:22px}
  #ask-lexi .av-chip{height:100%;min-height:44px;padding:8px 14px;border-radius:18px;font-size:13px;line-height:1.3}
  /* phones: a taller stage so the orb stays clear of the talk chip and captions (overlays still scroll inside it) */
  #ask-lexi .av-screen{aspect-ratio:1 / .92}
  #ask-lexi .av-top{padding:8px;gap:8px}
  #ask-lexi .av-ctrls{gap:4px;flex:none}
  #ask-lexi .av-ctrl{width:44px;height:44px}
  #ask-lexi .av-pill{height:26px;padding:0 10px;font-size:10px;min-width:0;max-width:100%}
  #ask-lexi .av-pill__t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #ask-lexi .av-orb{top:31%;height:36%}
  /* portrait on phones: a little larger than the screen so the face sits high, above the captions and chip */
  #ask-lexi .av-pt{padding-left:0}
  #ask-lexi .av-pt__box{height:104%;margin-bottom:-4px}
  #ask-lexi .av-stage.has-portrait .av-cta{left:8px}
  #ask-lexi .av-pt__badge{width:30px;height:30px;margin-left:-15px}
  #ask-lexi .av-cta{height:44px;padding:0 16px 0 14px;font-size:13px}
  #ask-lexi .av-dock{max-height:calc(100% - 48px);padding:0 8px 8px;gap:8px}
  #ask-lexi .av-cap{padding:9px 12px;border-radius:12px;font-size:13px;line-height:1.42;background:rgba(13,10,9,.82)}
  #ask-lexi .av-cap__chip{min-height:44px}
  #ask-lexi .av-card2{padding:8px 12px;border-radius:12px;overflow:auto;overscroll-behavior:contain}
  #ask-lexi .av-card2__t{font-size:13px;line-height:1.42}
  #ask-lexi .av-card2__btns{gap:8px;margin-top:8px;flex-wrap:nowrap}
  #ask-lexi .av-card2__btns .btn{flex:1 1 0;min-width:0;height:44px;padding:0 8px}
  #ask-lexi .av-honest{text-align:center;margin-top:10px}
  #ask-lexi .av-mic{width:52px;height:52px}
  #ask-lexi .av-type__in{height:52px}
  #ask-lexi .av-type__send{width:44px;height:44px;right:4px;top:4px}
  #ask-lexi .av-talk{grid-template-columns:minmax(0,1fr);gap:12px}
}
/* the keyboard hint is noise on touch-only devices; it stays as the mic's accessible description */
@media (hover:none) and (pointer:coarse){
  #ask-lexi .av-ptt__hint{display:none}
}

/* Test page only (this stylesheet loads only on desktop-app.html): hide the site-wide floating
   "Ask about Lexi" helper here so visitors don't see two assistants at once. */
.page-desktop-app .ov-help{display:none!important}