/* ============ web-theater — the Web-Chat demo, restaged (2026-07-20) ============
   Iman: the Web-Chat tab must hold the SAME stage as the restaged Telefonie —
   same card presence (478px device height, 560px stage, no shell jump when the
   visitor switches tabs) and responsive at every width. Pure override layer on
   top of live-demo.css, scoped to .v-web / .bw-wrap — other tabs untouched.

   Also here: the cursor light lens (motion-lux) now travels BENEATH the page
   content instead of over it — it lights the background, and cards occlude it.
   One override, kept in this file so the whole restage ships/rolls back as one. */

/* ---------- the lens rides under the content, not over the cards ----------
   motion-lux.css put .cursor-light at z-index:60 (fixed, body-level) — the lens
   floated ABOVE every card and asset. html carries no background, so body's
   #fff propagates to the canvas: at z-index:-1 the lens still paints above the
   canvas, but every section, card and asset now covers it. Glass surfaces
   (backdrop-filter) diffuse it instead of wearing it. */
.cursor-light{z-index:-1}

/* ---------- the stage: same room as the tel theater (no jump between tabs) ---------- */
.demo-stage:has(.v-web.on){min-height:560px}

/* ---------- the scene: same light pool under the device as v-tel ---------- */
.v-web .bw-wrap{position:relative; gap:44px; padding:26px 26px 30px}
.v-web .bw-wrap::before{content:""; position:absolute; left:50%; bottom:10px; z-index:0;
  width:72%; height:64px; transform:translateX(-50%);
  background:radial-gradient(ellipse at center, rgba(45,108,246,.20), rgba(34,211,238,.10) 45%, transparent 72%);
  filter:blur(16px); pointer-events:none}
.v-web .bw-wrap > *{position:relative; z-index:1}

/* ---------- the browser: same presence as the phone (478px tall) ---------- */
.v-web .bwin{width:486px; height:478px; border-radius:18px;
  box-shadow:0 34px 70px -28px rgba(10,19,34,.4),
    0 60px 110px -50px rgba(45,108,246,.3), inset 0 1px 0 #fff}
.v-web .bs-hero{margin-top:22px}
.v-web .bs-hero b{font-size:18px}

/* the taller page needs body: two quiet skeleton cards bottom-left,
   clear of the widget (same mock language as .mwp-cards). z-index keeps them
   UNDER the widget — an absolutely-positioned ::after otherwise paints after
   (= above) the .aww child. */
.v-web .bwin-site::before, .v-web .bwin-site::after{content:""; position:absolute; left:16px;
  z-index:1; border-radius:12px; background:rgba(255,255,255,.92); border:1px solid rgba(24,54,120,.09);
  box-shadow:0 14px 26px -18px rgba(20,50,110,.4); pointer-events:none}
.v-web .bwin-site::before{bottom:154px; width:178px; height:62px}
.v-web .bwin-site::after{bottom:16px; width:178px; height:122px}

/* ---------- the widget grows with its window ---------- */
.v-web .aww{width:262px; height:330px; right:14px; bottom:14px; border-radius:16px; z-index:2}
.v-web .aww .bub{font-size:11.5px}

/* ---------- responsive: mirrors the tel-theater ladder ---------- */
@media (max-width:880px){
  .v-web .bw-wrap{gap:26px}
  .v-web .bwin{width:min(100%,440px)}
  .v-web .bs-hero{max-width:54%}
  .v-web .bs-hero b{font-size:15.5px}
  .v-web .aww{height:300px}
  .v-web .bwin-site::before{display:none}
  .v-web .bwin-site::after{width:140px; height:110px}
}
@media (max-width:720px){
  .v-web .bw-wrap{padding:18px 14px 22px}
  .v-web .bwin{width:min(100%,420px); height:446px}
  .demo-stage:has(.v-web.on){min-height:510px}
  /* narrow window: the hero shortens to one strip ABOVE the widget, the
     skeletons leave — the widget is the star, nothing under it */
  .v-web .bs-hero{max-width:100%; margin-top:14px}
  .v-web .bs-hero b{font-size:14px}
  .v-web .bs-hero i{display:none}
  .v-web .aww{width:min(242px, calc(100% - 20px)); height:290px; right:10px; bottom:10px}
  .v-web .bwin-site::before, .v-web .bwin-site::after{display:none}
}