/* ============ mw-theater — KI to go demo, restaged (2026-07-20) ============
   Same theater family as tel-theater/web-theater: the KI-to-go tab holds the
   SAME stage (560px, device 254×478 like the Telefonie phone), then the scene
   itself gets the full treatment. Pure override layer, scoped .v-mw / .mwp.k2g.
   PRODUCT TRUTH (Iman QA 2026-06-14, do not undo): the phone shows the
   STANDALONE /k/ page reached by QR — no website behind, no launcher FAB. */

/* ---------- SIZE PARITY (locked — the agent refines interiors to fit) ---------- */
.demo-stage:has(.v-mw.on){min-height:560px}
.v-mw .mw-wrap{position:relative; gap:44px; padding:26px 26px 30px}
.v-mw .mw-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(124,92,252,.20), rgba(45,108,246,.10) 45%, transparent 72%);
  filter:blur(16px); pointer-events:none}
.v-mw .mw-wrap > *{position:relative; z-index:1}

/* the phone: same titanium-navy shell as the Telefonie device */
.mwp.k2g{width:254px; height:478px; border-radius:44px; padding:9px;
  background:linear-gradient(160deg,#243352 0%,#0B1322 34%,#0B1322 68%,#1C2A47 100%);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(255,255,255,.06),
    0 34px 70px -28px rgba(10,19,34,.65),
    0 60px 110px -50px rgba(124,92,252,.32)}
.mwp.k2g .mwp-screen{border-radius:36px}
.mwp.k2g .mwp-sheet{border-radius:36px}
.mwp.k2g .mwp-notch{width:62px; height:16px; top:7px}
.mwp.k2g .mwp-status{height:30px; padding:0 17px}
.mwp.k2g .mwp-status b{font-size:11px}
.mwp.k2g .mwp-head{padding-top:34px}

@media (max-width:720px){
  /* QR + phone stack: the fixed 600px stage grows with the bigger device */
  .demo-stage:has(.v-mw.on){height:640px}
  .mwp.k2g{width:236px; height:446px}
  .v-mw .mw-qr{width:66px; height:66px}
  .v-mw .mw-cap{font-size:17px}
}

/* ---------- AGENT ZONE (interior design + animation lives below) ---------- */

/* ============ the /k/ page, treated as a crafted mini-landing ============
   Story: the guest scanned the QR one breath ago — the page ARRIVES when
   runMw() sets .open, then the conversation plays on a quiet violet-washed
   canvas. Business chrome stays the tenant blue; VIOLET is the channel voice
   (atmosphere, QR prop, typing) — same split as tel (blue orb, cyan accents). */

/* -- atmosphere: pastel violet aurora under everything (z0 < children z1;
   the sheet is already position:absolute + its own stacking context, z5) -- */
.mwp.k2g .mwp-sheet::before{content:""; position:absolute; left:50%; top:38%; z-index:0;
  width:330px; height:330px; margin:-165px 0 0 -165px; border-radius:50%; pointer-events:none;
  opacity:.6;
  background:conic-gradient(from 40deg, rgba(124,92,252,.12), rgba(45,108,246,.05) 30%,
    transparent 55%, rgba(34,211,238,.08) 74%, rgba(124,92,252,.12));
  filter:blur(26px)}
.mwp.k2g .mwp-head, .mwp.k2g .mwp-msgs, .mwp.k2g .mwp-in, .mwp.k2g .mwp-foot{
  position:relative; z-index:1}

/* -- arrival: the page settles + a light sheen crosses it, keyed on .open -- */
.mwp.k2g .mwp-sheet::after{content:""; position:absolute; inset:0; z-index:0;
  border-radius:inherit; pointer-events:none; opacity:0;
  background:linear-gradient(115deg, transparent 30%, rgba(124,92,252,.14) 46%,
    rgba(255,255,255,.5) 52%, rgba(34,211,238,.10) 58%, transparent 72%)}

/* -- head: glass over the aurora, business identity scaled up -- */
.mwp.k2g .mwp-head{padding:34px 14px 11px; gap:9px;
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(24,54,120,.07)}
.mwp.k2g .mwp-blogo{width:32px; height:32px; border-radius:10px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 8px 18px -8px rgba(0,132,255,.75)}
.mwp.k2g .mwp-blogo svg{width:16px; height:13px}
.mwp.k2g .mwp-bid b{font-size:13.5px}
.mwp.k2g .mwp-bid small{font-size:10px; margin-top:3px}
.mwp.k2g .mwp-bid .mdot{position:relative; width:6px; height:6px}
.mwp.k2g .mdot::after{content:""; position:absolute; inset:-2px; border-radius:50%;
  border:1.5px solid rgba(31,201,126,.55); opacity:0}

/* -- conversation: roomier bubbles with a spring entrance -- */
.mwp.k2g .mwp-msgs{padding:12px 13px; gap:8px}
.mwp.k2g .mwp-msgs .mb{max-width:88%; padding:9px 12px; border-radius:14px;
  font-size:12.5px; line-height:1.5}
.mwp.k2g .mwp-msgs .mb.bot{background:rgba(240,244,252,.92);
  border:1px solid rgba(24,54,120,.06); border-bottom-left-radius:5px;
  box-shadow:0 10px 22px -16px rgba(20,50,110,.5)}
.mwp.k2g .mwp-msgs .mb.me{border-bottom-right-radius:5px;
  box-shadow:0 12px 24px -14px rgba(0,132,255,.65)}
.mwp.k2g .mwp-msgs .mtyping{padding:10px 12px; border-radius:14px;
  background:rgba(240,244,252,.92); border:1px solid rgba(24,54,120,.06)}
.mwp.k2g .mwp-msgs .mtyping i{width:4.5px; height:4.5px;
  background:linear-gradient(150deg,#7C5CFC,#2D6CF6)}

/* -- composer: taller pill, glowing send -- */
.mwp.k2g .mwp-in{margin:0 12px 10px; padding:8px 8px 8px 14px;
  border-color:rgba(24,54,120,.12);
  box-shadow:0 10px 24px -18px rgba(20,50,110,.55), inset 0 1.5px 0 rgba(255,255,255,.8)}
.mwp.k2g .mwp-in span{font-size:11.5px}
.mwp.k2g .mwp-in .snd{width:30px; height:30px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 8px 16px -7px rgba(0,132,255,.8)}

/* -- foot: quiet, slightly larger -- */
.mwp.k2g .mwp-foot{font-size:10px; padding:7px 0 9px; border-top:1px solid rgba(24,54,120,.06);
  background:rgba(255,255,255,.8)}

/* -- the QR card: hero prop of this channel — lifted, violet halo, scan beam -- */
.v-mw .mw-qrcard{position:relative; overflow:hidden;
  border-color:rgba(124,92,252,.22);
  box-shadow:0 18px 40px -20px rgba(91,61,245,.45), 0 0 0 4px rgba(124,92,252,.07)}
.v-mw .mw-qrcard::before{content:""; position:absolute; left:10px; top:10px; z-index:2;
  width:84px; height:84px; border-radius:7px; pointer-events:none; opacity:0;
  background:linear-gradient(180deg, transparent 0%, rgba(124,92,252,.28) 46%,
    rgba(124,92,252,.45) 50%, rgba(124,92,252,.28) 54%, transparent 100%)}
.v-mw .mw-qrlabel b{letter-spacing:-.01em}
.v-mw .mw-qrlabel small{color:#6B5BD6}

/* -- motion (transform/opacity only; static page stays complete) -- */
@media (prefers-reduced-motion:no-preference){
  .mwp.k2g .mwp-sheet::before{animation:k2gAurora 26s linear infinite}
  .mwp.k2g .mwp-screen.open .mwp-sheet{animation:k2gArrive .6s cubic-bezier(.3,1.4,.4,1)}
  .mwp.k2g .mwp-screen.open .mwp-sheet::after{animation:k2gSheen 1.2s ease-out .15s}
  .mwp.k2g .mwp-msgs .mb, .mwp.k2g .mwp-msgs .mtyping{
    animation:k2gMsg .5s cubic-bezier(.34,1.45,.5,1)}
  .mwp.k2g .mdot::after{animation:k2gPing 2.4s ease-out infinite}
  .v-mw .mw-qrcard{animation:qrFloat 6s ease-in-out infinite}
  .v-mw .mw-qrcard::before{animation:qrScan 3s ease-in-out infinite}
}
@keyframes k2gAurora{to{transform:rotate(360deg)}}
@keyframes k2gArrive{from{transform:translateY(12px) scale(.965); opacity:.4}
  to{transform:none; opacity:1}}
@keyframes k2gSheen{0%{opacity:0; transform:translateX(-40%)}
  35%{opacity:1} 100%{opacity:0; transform:translateX(40%)}}
@keyframes k2gMsg{from{transform:translateY(14px) scale(.94); opacity:0}
  to{transform:none; opacity:1}}
@keyframes k2gPing{0%{opacity:.8; transform:scale(.6)} 70%,100%{opacity:0; transform:scale(2)}}
@keyframes qrFloat{0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)}}
@keyframes qrScan{0%{opacity:0; transform:translateY(-46px)} 18%{opacity:1}
  82%{opacity:1} 100%{opacity:0; transform:translateY(46px)}}

/* -- ≤720 stack: reclaim the room the desktop gap would waste -- */
@media (max-width:720px){
  .v-mw .mw-wrap{gap:12px; padding:16px 14px 20px}
  .v-mw .mw-qrcard{margin:2px auto 0}
  .v-mw .mw-qrcard::before{left:9px; top:9px; width:66px; height:66px}
  .mwp.k2g .mwp-head{padding:32px 12px 9px}
  .mwp.k2g .mwp-blogo{width:29px; height:29px}
  .mwp.k2g .mwp-msgs .mb{font-size:12px}
  .mwp.k2g .mwp-bid b{font-size:12.5px}
}