/* ============ wa-theater — WhatsApp demo, restaged (2026-07-20) ============
   Same theater family as tel-theater/web-theater: the WhatsApp tab holds the
   SAME stage (560px, device 254×478 like the Telefonie phone), then the scene
   gets the full treatment. Pure override layer, scoped .v-wa / .mwp.wap —
   the other three tabs are untouched. Channel accent: WhatsApp green. */

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

/* the phone: same titanium-navy shell as the Telefonie device */
.mwp.wap{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(37,211,102,.28)}
.mwp.wap .mwp-screen{border-radius:36px}
.mwp.wap .mwp-notch{width:62px; height:16px; top:7px}
.mwp.wap .mwp-status{height:30px; padding:0 17px}
.mwp.wap .mwp-status b{font-size:11px}

@media (max-width:720px){
  .demo-stage:has(.v-wa.on){min-height:510px}
  .mwp.wap{width:236px; height:446px}
}

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

/* ============ the chat, restaged as a real WhatsApp Business moment ============
   Story: a customer sends a VOICE NOTE (the star — its waveform keeps breathing),
   the assistant types and answers instantly on a warm doodle wallpaper, and the
   scene lands with a glass "Beantwortet in 4 Sekunden" chip. Everything scales
   to the 254×478 device; channel-true WA greens, no brand-blue bleed. */

/* -- wallpaper: warm WA canvas + a quiet CSS doodle lattice (two offset dot
   grids) + soft green ambience. Replaces the flat beige; paints under all
   bubbles because it is the element's own background — no pseudo, no z games. */
/* wallpaper lives on the SCREEN (not .msgs): history can then fade out under
   a mask at the msgs top edge without the wallpaper fading with it, and the
   paper continues behind the composer like on a real phone. */
.mwp.wap .mwp-screen{background:
    radial-gradient(circle at 18% 24%, rgba(37,211,102,.10), transparent 42%),
    radial-gradient(circle at 84% 72%, rgba(18,161,74,.08), transparent 44%),
    radial-gradient(rgba(11,19,34,.045) 1px, transparent 1.4px),
    radial-gradient(rgba(11,19,34,.03) 1px, transparent 1.4px),
    linear-gradient(180deg,#F0E9DE 0%,#E9E1D4 100%);
  background-size:auto, auto, 22px 22px, 22px 22px, auto;
  background-position:0 0, 0 0, 0 0, 11px 11px, 0 0}
.wascr .msgs{top:82px; bottom:58px; padding:12px 11px; gap:7px; background:none;
  -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 28px);
  mask-image:linear-gradient(180deg, transparent 0, #000 28px)}

/* -- header: deep WA-green gradient with a top sheen; identity scaled up -- */
.wascr .wah{padding:33px 14px 11px; gap:10px;
  background:linear-gradient(160deg,#12A14A 0%,#0E7E3C 62%,#0C6E35 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 6px 18px -10px rgba(12,110,53,.55)}
.wascr .wah .ava{width:34px; height:34px; background:rgba(255,255,255,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 0 0 2px rgba(255,255,255,.18)}
.wascr .wah .ava svg{width:18px; height:18px}
.wascr .wah b{font-size:13px; letter-spacing:-.01em}
.wascr .wah em{font-size:10px; opacity:.85; margin-top:2px}

/* -- bubbles: WA geometry — sharp TOP outer corner + a real tail. The me-green
   flattens slightly so the tail color matches its corner exactly. -- */
.wap .bub{position:relative; font-size:12px; line-height:1.5; padding:8px 11px;
  border-radius:13px; max-width:84%; box-shadow:0 1px 2px rgba(10,19,34,.14)}
.wap .bub.bot{border-top-left-radius:4px}
.wap .bub.me{border-top-right-radius:4px;
  background:linear-gradient(135deg,#23BE5C,#1CA24F)}
.wap .bub .meta{font-size:9px; margin-top:3px; opacity:.78}
.v-wa .bub.me .meta .ck2{color:#A7E9FF}   /* read-ticks go WhatsApp-blue */
/* tails: a rotated chip peeking from the sharp corner (bot+typing white, me green) */
.wap .bub.bot::before, .wap .typing::before, .wap .bub.me::before{content:"";
  position:absolute; top:1px; width:10px; height:10px; border-radius:2.5px;
  transform:rotate(45deg); pointer-events:none}
.wap .bub.bot::before, .wap .typing::before{left:-3.5px; background:#fff}
.wap .bub.me::before{right:-3.5px; background:#23BE5C}

/* -- the voice note: star prop. Bigger play, taller bars, mono length.
   MUST always fit its bubble: the row is shrink-safe (bars give way, clipped)
   so no font-metric/DPI drift can push the time out of the phone (Iman
   screenshot 2026-07-20: 0:07 clipped at the screen edge on 125% Windows). -- */
.wap .bub:has(.wa-vnote){max-width:92%}
.wap .wa-vnote{display:flex; align-items:center; gap:7px; max-width:100%; min-width:0}
.wap .wa-vnote .vplay{width:26px; height:26px; flex:0 0 auto; background:rgba(255,255,255,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.wap .wa-vnote .vbars{height:15px; gap:2px; flex:0 1 auto; min-width:0; overflow:hidden}
.wap .wa-vnote .vbars i{width:2px; flex:0 0 auto}
.wap .wa-vnote .vlen{font-size:10px; flex:0 0 auto}

/* -- typing: white WA pill, calmer dots -- */
.wap .typing{position:relative; padding:9px 12px; border-radius:13px; border-top-left-radius:4px}
.wap .typing i{width:5px; height:5px; background:#93A79C}

/* -- result: glass chip that LANDS (spring below, motion-guarded) -- */
.wap .result{font-size:10.5px; padding:7px 14px; margin-top:4px; gap:7px;
  color:#0C6E35; background:rgba(255,255,255,.9);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(18,161,74,.35);
  box-shadow:0 12px 26px -16px rgba(18,161,74,.6), inset 0 1px 0 rgba(255,255,255,.7)}
.wap .result .rck{width:16px; height:16px}

/* -- composer: real WA input pill + breathing mic -- */
.wap .wa-in{left:10px; right:10px; bottom:10px; gap:7px; padding:7px 7px 7px 13px;
  box-shadow:0 8px 20px -10px rgba(10,19,34,.35), inset 0 1px 0 #fff}
.wap .wa-in span{font-size:11px}
.wap .wa-in .snd{position:relative; width:28px; height:28px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 8px 16px -7px rgba(18,161,74,.8)}
.wap .wa-in .snd::after{content:""; position:absolute; inset:-4px; border-radius:50%;
  border:2px solid rgba(37,211,102,.45); opacity:0; pointer-events:none}

/* -- motion: transform/opacity only; static frame reads complete without it.
   Base reduce-rule already kills .bub/.typing animation; .result gets the
   same courtesy here. -- */
@media (prefers-reduced-motion:no-preference){
  .v-wa .bub{animation:waPop .45s cubic-bezier(.34,1.45,.5,1)}
  .v-wa .typing{animation:waPop .35s cubic-bezier(.34,1.45,.5,1)}
  .wap .result{animation:waLand .55s cubic-bezier(.34,1.45,.5,1)}
  .v-wa .wa-vnote .vbars i{transform-origin:50% 50%;
    animation:waVoice 1.15s ease-in-out infinite}
  .v-wa .wa-vnote .vbars i:nth-child(8n+2){animation-delay:.09s}
  .v-wa .wa-vnote .vbars i:nth-child(8n+3){animation-delay:.18s}
  .v-wa .wa-vnote .vbars i:nth-child(8n+4){animation-delay:.27s}
  .v-wa .wa-vnote .vbars i:nth-child(8n+5){animation-delay:.36s}
  .v-wa .wa-vnote .vbars i:nth-child(8n+6){animation-delay:.45s}
  .v-wa .wa-vnote .vbars i:nth-child(8n+7){animation-delay:.54s}
  .v-wa .wa-vnote .vbars i:nth-child(8n){animation-delay:.63s}
  .v-wa .wa-vnote .vplay{animation:waPlay 2.4s ease-in-out infinite}
  .wap .wa-in .snd::after{animation:waMic 2.2s ease-out infinite}
}
@media (prefers-reduced-motion:reduce){.wap .result{animation:none!important}}
@keyframes waPop{from{transform:translateY(12px) scale(.92); opacity:0}
  to{transform:none; opacity:1}}
@keyframes waLand{from{transform:translateY(10px) scale(.9); opacity:0}
  to{transform:none; opacity:1}}
@keyframes waVoice{0%,100%{transform:scaleY(.55)}50%{transform:scaleY(1.06)}}
@keyframes waPlay{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
@keyframes waMic{0%{opacity:.85; transform:scale(.7)}70%,100%{opacity:0; transform:scale(1.35)}}

/* -- ≤720: everything rides the 236×446 device -- */
@media (max-width:720px){
  .wascr .msgs{top:78px; bottom:54px; padding:10px 10px}
  .wascr .wah{padding:31px 12px 10px}
  .wascr .wah .ava{width:30px; height:30px}
  .wascr .wah b{font-size:12px}
  .wap .bub{font-size:11.5px; max-width:86%}
  .wap .wa-vnote .vbars{height:13px}
  .wap .wa-in{left:9px; right:9px; bottom:9px}
}