/* ============ AIOOS — live demo theater ============ */

.demo-shell{position:relative; max-width:860px; margin:0 auto; border-radius:26px;
  background:rgba(255,255,255,.62); backdrop-filter:blur(34px); -webkit-backdrop-filter:blur(34px);
  border:1px solid rgba(255,255,255,.95);
  box-shadow:inset 0 3px 4px rgba(255,255,255,.5), 0 40px 90px -40px rgba(20,50,110,.5);
  overflow:hidden}

/* ---------- tabs ---------- */
.demo-tabs{display:flex; gap:8px; padding:14px; border-bottom:1px solid rgba(24,54,120,.08);
  background:rgba(255,255,255,.4)}
.dt{display:inline-flex; align-items:center; gap:9px; padding:10px 18px; border-radius:12px;
  border:1px solid transparent; background:transparent; cursor:pointer;
  font-family:var(--font-head); font-size:14.5px; font-weight:700; letter-spacing:-.01em; color:var(--ink-2);
  white-space:nowrap; transition:background .25s, color .25s, border-color .25s, transform .25s}
.dt:hover{background:rgba(45,108,246,.06); color:var(--ink)}
.dt:active{transform:scale(.97)}
.dt .di{width:26px; height:26px; border-radius:8px; display:grid; place-items:center; color:#fff;
  background:#ADBDD6; transition:background .25s; flex:0 0 auto}
.dt.active{background:rgba(255,255,255,.92); color:var(--ink); border-color:rgba(0,0,0,.07);
  box-shadow:inset 0 2px 3px rgba(255,255,255,.6), 0 10px 24px -14px rgba(20,50,110,.45)}
.dt.active .di.tel,.dt .di.tel.hot{background:linear-gradient(150deg,#2D6CF6,#1E5BE6)}
.dt.active .di.web{background:linear-gradient(150deg,#22D3EE,#2D6CF6)}
.dt.active .di.wa{background:linear-gradient(150deg,#25D366,#12A14A)}

/* ---------- stage ---------- */
.demo-stage{position:relative; min-height:430px}
.dview{position:absolute; inset:0; display:none; flex-direction:column}
.dview.on{display:flex; animation:dviewIn .4s cubic-bezier(.2,.7,.3,1)}
/* transform-only: if animation timelines are throttled (hidden/preview iframes), the frozen from-state stays visible */
@keyframes dviewIn{from{transform:translateY(8px)}to{transform:none}}
@media (prefers-reduced-motion:reduce){.dview.on{animation:none}}

/* ---------- telephone view ---------- */
.call-head{display:flex; align-items:center; gap:13px; padding:16px 22px;
  border-bottom:1px solid rgba(24,54,120,.07); background:rgba(255,255,255,.35)}
.call-head .ca{position:relative; width:42px; height:42px; border-radius:50%; flex:0 0 auto;
  display:grid; place-items:center; color:#fff; background:linear-gradient(150deg,#2D6CF6,#1E5BE6)}
.call-head .ca .ring{position:absolute; inset:-3px; border-radius:50%; border:2px solid rgba(45,108,246,.5)}
.calling .call-head .ca .ring{animation:callRing 1.1s ease-out infinite}
@keyframes callRing{0%{transform:scale(1); opacity:.9}100%{transform:scale(1.55); opacity:0}}
.call-head .ct{flex:1; min-width:0}
.call-head .ct b{display:block; font-family:var(--font-head); font-size:15.5px; letter-spacing:-.01em; color:var(--ink); white-space:nowrap}
.call-head .ct em{display:block; font-style:normal; font-size:12px; font-weight:600; color:#7E8EA6; margin-top:2px;
  font-variant-numeric:tabular-nums}

/* ---------- widget-face: mini orb in the call head ---------- */
.morb{position:relative; width:40px; height:40px; flex:0 0 auto}
.morb .ring{position:absolute; inset:-4px; border-radius:50%; border:2px solid rgba(45,108,246,.45)}
.v-tel.calling .morb .ring{animation:callRing 1.1s ease-out infinite}
.v-tel.connected .morb .ring,.v-tel.talk .morb .ring{opacity:0}
.morb .sph{position:absolute; inset:0; border-radius:50%;
  background:
    radial-gradient(circle at 33% 27%, rgba(255,255,255,.95), transparent 28%),
    radial-gradient(circle at 36% 32%, #7FB9FF 0%, #2D6CF6 55%, #102A66 100%);
  box-shadow:inset 0 -7px 14px rgba(8,20,60,.55), inset 0 3px 7px rgba(255,255,255,.35),
    0 10px 22px -8px rgba(45,108,246,.6)}
.morb .bars{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:2.5px}
.morb .bars i{width:2.5px; height:5px; border-radius:2px; background:rgba(255,255,255,.95);
  box-shadow:0 0 6px rgba(255,255,255,.5)}
@media (prefers-reduced-motion:no-preference){
  .v-tel.connected .morb{animation:morbBreath 3.2s ease-in-out infinite}
  .v-tel.talk .morb .bars i{animation:bar 1s ease-in-out infinite}
}
@keyframes morbBreath{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}

/* widget-face captions: clean bubbles, no avatars */
.cap .cav{display:none}
.cap{gap:0; padding:9px 14px; border-radius:15px}
.cap.ai{border-bottom-left-radius:5px}
.cap.cu{border-bottom-right-radius:5px; background:rgba(45,108,246,.09); border-color:rgba(45,108,246,.18)}

/* powered-by footer, like the real widget */
.tel-foot{display:flex; align-items:center; justify-content:center; gap:6px; padding:8px 0 10px;
  border-top:1px solid rgba(24,54,120,.07); font-size:10.5px; font-weight:700;
  letter-spacing:.04em; color:#8395AE; flex:0 0 auto}
.tel-foot b{color:var(--ink-2); font-weight:800}

/* ---------- call console: waveform strip + hang-up ---------- */
.wave-strip{margin-left:auto; display:flex; align-items:center; gap:2.5px; height:24px; flex:0 1 auto; overflow:hidden; justify-content:flex-end}
.wave-strip i{width:3px; height:5px; border-radius:2px; background:#C9D6E8; transition:background .35s}
.v-tel.connected .wave-strip i{background:linear-gradient(180deg,#14B8A6,#22D3EE)}
.v-tel.talk .wave-strip i{background:linear-gradient(180deg,#2D6CF6,#22D3EE)}
@media (prefers-reduced-motion:no-preference){
  .v-tel.connected .wave-strip i{animation:bar 1s ease-in-out infinite}
}
.hang{width:34px; height:34px; border-radius:50%; flex:0 0 auto; display:grid; place-items:center;
  background:linear-gradient(150deg,#F4736B,#E5484D); box-shadow:0 8px 18px -8px rgba(229,72,77,.6)}

/* ---------- two-pane body: conversation + behind-the-scenes rail ---------- */
.tel-body{flex:1; display:grid; grid-template-columns:minmax(0,1fr) 252px; min-height:0}
.transcript{padding:18px 22px 20px; display:flex; flex-direction:column; gap:10px; overflow:hidden; justify-content:flex-end; min-height:0}
.ai-rail{display:flex; flex-direction:column; min-height:0; padding:15px 16px 18px;
  border-left:1px solid rgba(24,54,120,.08);
  background:linear-gradient(180deg, rgba(45,108,246,.05), rgba(34,211,238,.04))}
.rail-title{display:flex; align-items:center; gap:8px; margin-bottom:12px;
  font-size:10.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:#7E8EA6}
.rail-live{margin-left:auto; display:inline-flex; align-items:center; gap:5px;
  font-size:10px; font-weight:800; color:#12A14A}
.rail-live i{width:6px; height:6px; border-radius:50%; background:#12A14A}
@media (prefers-reduced-motion:no-preference){.rail-live i{animation:livePip 1.4s ease-in-out infinite}}
@keyframes livePip{0%,100%{opacity:1}50%{opacity:.3}}
.rail-log{position:relative; flex:1; display:flex; flex-direction:column; gap:9px; justify-content:flex-end; overflow:hidden}
.rcard{display:flex; gap:10px; align-items:flex-start; padding:9px 11px; border-radius:13px;
  background:rgba(255,255,255,.88); border:1px solid rgba(24,54,120,.08);
  box-shadow:0 8px 18px -14px rgba(20,50,110,.45); animation:msgIn .4s cubic-bezier(.2,.7,.3,1)}
.rcard .ri{width:28px; height:28px; border-radius:9px; flex:0 0 auto; display:grid; place-items:center; color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.rcard .ri.blue{background:linear-gradient(150deg,#2D6CF6,#1E5BE6)}
.rcard .ri.violet{background:linear-gradient(150deg,#7C5CFC,#5B6BF6)}
.rcard .ri.cyan{background:linear-gradient(150deg,#22D3EE,#2D6CF6)}
.rcard .ri.teal{background:linear-gradient(150deg,#14B8A6,#0E9F8E)}
.rcard .ri.green{background:linear-gradient(150deg,#25D366,#12A14A)}
.rcard b{display:block; font-family:var(--font-head); font-size:12px; font-weight:700; letter-spacing:-.01em; color:var(--ink); line-height:1.3}
.rcard em{display:block; font-style:normal; font-size:11px; font-weight:600; color:#7E8EA6; margin-top:1px; font-variant-numeric:tabular-nums}

/* narrow: rail folds into inline system chips */
.syschip{align-self:center; display:inline-flex; align-items:center; gap:7px; padding:6px 13px;
  border-radius:100px; font-size:11.5px; font-weight:700; color:var(--blue);
  background:rgba(45,108,246,.08); border:1px solid rgba(45,108,246,.18);
  animation:msgIn .4s cubic-bezier(.2,.7,.3,1)}
.syschip i{width:6px; height:6px; border-radius:50%; background:linear-gradient(135deg,#14B8A6,#2D6CF6); flex:0 0 auto}

/* ---------- live captions ---------- */
.cap{display:flex; gap:10px; align-items:flex-start; max-width:86%; padding:10px 15px; border-radius:16px;
  background:rgba(255,255,255,.88); border:1px solid rgba(24,54,120,.08);
  box-shadow:0 10px 22px -16px rgba(20,50,110,.4);
  animation:msgIn .4s cubic-bezier(.2,.7,.3,1); transition:opacity .45s, transform .45s}
.cap.ai{align-self:flex-start; border-bottom-left-radius:6px}
.cap.cu{align-self:flex-end; flex-direction:row-reverse; border-bottom-right-radius:6px;
  background:linear-gradient(150deg,rgba(45,108,246,.1),rgba(34,211,238,.07)); border-color:rgba(45,108,246,.16)}
.cap .cav{width:26px; height:26px; border-radius:50%; flex:0 0 auto; margin-top:1px;
  display:grid; place-items:center; color:#fff; font-size:10.5px; font-weight:800; font-family:var(--font-head)}
.cap.ai .cav{background:linear-gradient(150deg,#2D6CF6,#22D3EE)}
.cap.cu .cav{background:linear-gradient(150deg,#94A8C6,#7E8EA6)}
.cap .ctxt{font-size:14.5px; line-height:1.5; color:var(--ink-soft); font-weight:500; min-height:21px}
.cap.dim{opacity:.45; transform:scale(.985)}

/* ---------- shared bubbles ---------- */
/* transform-only (capture/throttle-safe): frozen from-state stays visible */
@keyframes msgIn{from{transform:translateY(10px) scale(.97)}to{transform:none}}
@media (prefers-reduced-motion:reduce){.cap,.bub,.typing{animation:none!important}}
.msgs{flex:1; padding:20px 22px; display:flex; flex-direction:column; gap:10px; overflow:hidden; justify-content:flex-end}
.bub{max-width:72%; padding:10px 15px; border-radius:16px; font-size:14px; line-height:1.5;
  font-weight:500; animation:msgIn .4s cubic-bezier(.2,.7,.3,1)}
.bub.me{align-self:flex-end; color:#fff; border-bottom-right-radius:5px}
.bub.bot{align-self:flex-start; background:rgba(255,255,255,.92); color:var(--ink-soft);
  border:1px solid rgba(24,54,120,.08); border-bottom-left-radius:5px;
  box-shadow:0 8px 18px -12px rgba(20,50,110,.35)}
.bub .meta{display:block; font-size:10.5px; font-weight:600; opacity:.6; margin-top:4px; text-align:right;
  font-variant-numeric:tabular-nums}

.typing{align-self:flex-start; display:inline-flex; gap:4px; padding:12px 16px; border-radius:16px;
  border-bottom-left-radius:5px; background:rgba(255,255,255,.92); border:1px solid rgba(24,54,120,.08);
  animation:msgIn .3s ease}
.typing i{width:6px; height:6px; border-radius:50%; background:#9FB0C8; animation:typdot 1.1s ease-in-out infinite}
.typing i:nth-child(2){animation-delay:.15s}
.typing i:nth-child(3){animation-delay:.3s}
@keyframes typdot{0%,100%{transform:translateY(0); opacity:.5}40%{transform:translateY(-4px); opacity:1}}

/* ---------- web widget view ---------- */
.web-head{display:flex; align-items:center; gap:11px; padding:14px 20px;
  border-bottom:1px solid rgba(24,54,120,.07); background:rgba(255,255,255,.35)}
.web-head .wa-logo{width:34px; height:34px; border-radius:10px; display:grid; place-items:center; color:#fff;
  background:linear-gradient(150deg,#22D3EE,#2D6CF6); flex:0 0 auto}
.web-head b{font-family:var(--font-head); font-size:15px; color:var(--ink)}
.web-head em{font-style:normal; display:inline-flex; align-items:center; gap:6px;
  font-size:11.5px; font-weight:600; color:#12A14A; margin-left:auto}
.web-head em i{width:7px; height:7px; border-radius:50%; background:#12A14A}
.v-web .bub.me{background:linear-gradient(150deg,#2D6CF6,#1E5BE6)}
.chips{display:flex; flex-wrap:wrap; gap:8px; padding:0 22px 18px}
.chip{padding:8px 15px; border-radius:100px; cursor:pointer; font-size:13px; font-weight:600;
  color:var(--blue); background:rgba(45,108,246,.07); border:1px solid rgba(45,108,246,.22);
  transition:background .2s, transform .2s}
.chip:hover{background:rgba(45,108,246,.13)}
.chip:active{transform:scale(.95)}
.chip.flash{background:rgba(45,108,246,.2)}

/* ---------- whatsapp view ---------- */
.wah{display:flex; align-items:center; gap:11px; padding:13px 20px; color:#fff;
  background:linear-gradient(150deg,#1FAF54,#128C42)}
.wah .ava{width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.2);
  display:grid; place-items:center; flex:0 0 auto}
.wah b{font-family:var(--font-head); font-size:15px; display:inline-flex; align-items:center; gap:6px}
.wah em{display:block; font-style:normal; font-size:11.5px; opacity:.8; margin-top:1px}
.v-wa .msgs{background:
  radial-gradient(circle at 20% 30%, rgba(37,211,102,.06), transparent 40%),
  radial-gradient(circle at 80% 70%, rgba(37,211,102,.05), transparent 40%)}
.v-wa .bub.me{background:linear-gradient(120deg,#25C766,#1FAF54)}
.v-wa .bub.me .meta .ck2{color:#CFF5DD; letter-spacing:-3px; margin-left:4px}
.wa-vnote{display:flex; align-items:center; gap:9px}
.wa-vnote .vplay{width:24px; height:24px; border-radius:50%; background:rgba(255,255,255,.25);
  display:grid; place-items:center; flex:0 0 auto}
.wa-vnote .vbars{display:flex; align-items:center; gap:2.5px; height:16px}
.wa-vnote .vbars i{width:2.5px; border-radius:2px; background:#fff; opacity:.9}
.wa-vnote .vlen{font-size:11px; opacity:.85; font-variant-numeric:tabular-nums}

/* ---------- result ribbon ---------- */
.result{align-self:center; display:inline-flex; align-items:center; gap:9px; margin-top:6px;
  padding:9px 18px; border-radius:100px; font-size:13px; font-weight:700; color:#0E7A3D;
  background:rgba(37,211,102,.12); border:1px solid rgba(18,161,74,.3);
  animation:msgIn .5s cubic-bezier(.2,.7,.3,1)}
.result .rck{width:18px; height:18px; border-radius:50%; background:#12A14A; color:#fff;
  display:grid; place-items:center; flex:0 0 auto}

/* ---------- footer strip: live clock line + replay ---------- */
.demo-foot{display:flex; align-items:center; gap:14px; padding:13px 20px;
  border-top:1px solid rgba(24,54,120,.08); background:rgba(255,255,255,.4)}
.demo-foot .clockline{font-size:13px; font-weight:600; color:var(--ink-2); font-variant-numeric:tabular-nums}
.demo-foot .clockline b{color:var(--ink); font-weight:700}
.demo-replay{margin-left:auto; display:inline-flex; align-items:center; gap:7px; padding:8px 15px;
  border-radius:10px; border:1px solid rgba(0,0,0,.08); background:rgba(255,255,255,.7); cursor:pointer;
  font-size:13px; font-weight:600; color:var(--ink);
  box-shadow:inset 0 2px 3px rgba(255,255,255,.6); transition:background .2s, transform .2s}
.demo-replay:hover{background:#fff}
.demo-replay:active{transform:scale(.95)}
.demo-replay svg{transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.demo-replay:hover svg{transform:rotate(-180deg)}

@media (max-width:720px){
  /* four labels never fit one phone row (Mobile Widget + WhatsApp Bald are long)
     → a clean 2×2 grid: equal cells, every label on ONE line, icons kept */
  .demo-tabs{display:grid; grid-template-columns:repeat(2,1fr); gap:8px}
  .dt{justify-content:center; padding:11px 10px; font-size:13.5px}
  .demo-stage{min-height:470px}
  .bub{max-width:86%}
  .demo-foot{flex-wrap:wrap}
  .cap{max-width:94%}
  .tel-body{grid-template-columns:1fr}
  .ai-rail{display:none}
  .wave-strip{display:none}
}

/* ===== Mobile-Widget view (4th tab, 2026-06-12 — mirrors the hero card-mob) ===== */
/* violet only when ACTIVE — like the sibling channel icons (Iman: it sat
   violet permanently while the others rest gray) */
.dt.active .di.mob{background:linear-gradient(150deg,#7C5CFC,#5B3DF5)}
.v-mw{align-items:center; justify-content:center}
.mw-wrap{display:flex; align-items:center; justify-content:center; gap:46px; width:100%; padding:18px 26px}
.mw-side{max-width:300px}
.mw-cap{font-family:'Fustat',sans-serif; font-weight:800; font-size:24px; line-height:1.18; letter-spacing:-.02em; color:var(--ink,#0A1222)}
.mw-cap em{font-family:'Instrument Serif',Georgia,serif; font-style:italic; font-weight:400;
  background:linear-gradient(96deg,#7C5CFC,#5B3DF5); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.mw-side p{margin:10px 0 14px; font-size:13.5px; line-height:1.55; color:var(--ink-2,#3D4D6B)}
.mw-points{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.mw-points li{display:flex; align-items:center; gap:9px; font-size:13px; font-weight:600; color:var(--ink,#0A1222)}
.mw-points .d{width:7px; height:7px; border-radius:50%; flex:0 0 auto}
.mw-points .d.v{background:#7C5CFC; box-shadow:0 0 0 3px rgba(124,92,252,.14)}

.mwp{flex:0 0 auto; width:212px; height:392px; border-radius:34px; background:#0B1322;
  padding:7px; box-shadow:0 24px 50px -22px rgba(10,19,34,.55), inset 0 1px 0 rgba(255,255,255,.12)}
.mwp-screen{position:relative; width:100%; height:100%; border-radius:27px; overflow:hidden; background:#F4F7FD}
.mwp-status{position:absolute; top:0; left:0; right:0; height:26px; display:flex; align-items:center;
  padding:0 14px; z-index:6; color:#0A1222}
.mwp-status b{font-size:10px; font-weight:700; letter-spacing:.02em}
.mwp-notch{position:absolute; left:50%; top:6px; transform:translateX(-50%); width:54px; height:14px;
  border-radius:100px; background:#0B1322}
.mwp-sig{margin-left:auto; display:inline-flex; align-items:flex-end; gap:2.5px; color:#0A1222}
.mwp-sig i{width:2.5px; background:#0A1222; border-radius:1px}
.mwp-sig i:nth-child(1){height:4px}.mwp-sig i:nth-child(2){height:6px}.mwp-sig i:nth-child(3){height:8px}
.mwp-sig svg{margin-left:3px}
.mwp-site{position:absolute; inset:0; padding:32px 12px 12px; z-index:1}
.mwp-nav{display:flex; align-items:center; gap:7px; font-size:11px; font-weight:800; letter-spacing:-.02em; color:#0A1222}
.mwp-nav .sq{width:20px; height:20px; border-radius:6px; display:grid; place-items:center;
  background:linear-gradient(150deg,#33A3FF,#0084FF)}
.mwp-burger{margin-left:auto; display:flex; flex-direction:column; gap:3px}
.mwp-burger i{width:14px; height:1.6px; background:#24324B; border-radius:2px; display:block}
.mwp-hero{margin-top:18px}
.mwp-hero b{display:block; font-family:'Fustat',sans-serif; font-size:14.5px; line-height:1.25; letter-spacing:-.015em; color:#0A1222}
.mwp-hero i{display:block; height:7px; border-radius:4px; background:rgba(36,50,75,.12); margin-top:7px}
.mwp-cards{display:flex; gap:8px; margin-top:14px}
.mwp-cards span{flex:1; height:54px; border-radius:10px; background:#fff; border:1px solid rgba(24,54,120,.1);
  box-shadow:0 10px 18px -14px rgba(20,50,110,.4)}
.mwp-fab{position:absolute; right:10px; bottom:10px; z-index:4; width:42px; height:42px; border-radius:50%;
  display:grid; place-items:center; background:linear-gradient(150deg,#33A3FF,#0064D6);
  box-shadow:0 10px 22px -8px rgba(0,100,214,.65), inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .18s cubic-bezier(.2,.7,.3,1), opacity .18s}
.mwp-fab::after{content:""; position:absolute; inset:-5px; border-radius:50%;
  border:2px solid rgba(0,132,255,.4); animation:mwPulse 2s ease-out infinite}
@keyframes mwPulse{0%{transform:scale(.85); opacity:.9}70%,100%{transform:scale(1.25); opacity:0}}
.mwp-fab.press{transform:scale(.86)}
.v-mw .open ~ .mwp-fab, .mwp-screen.open .mwp-fab{opacity:0; pointer-events:none}
.mwp-sheet{position:absolute; left:0; right:0; bottom:0; z-index:5; height:72%;
  background:rgba(255,255,255,.96); backdrop-filter:blur(10px); border-radius:18px 18px 0 0;
  box-shadow:0 -16px 40px -18px rgba(10,19,34,.45);
  display:flex; flex-direction:column;
  transform:translateY(104%); transition:transform .45s cubic-bezier(.2,.75,.25,1)}
.mwp-screen.open .mwp-sheet{transform:translateY(0)}
.mwp-head{display:flex; align-items:center; gap:6px; padding:10px 12px 8px; font-size:10.5px; font-weight:700; color:#0A1222;
  border-bottom:1px solid rgba(24,54,120,.08)}
.mdot{width:6px; height:6px; border-radius:50%; background:#12A14A; box-shadow:0 0 0 3px rgba(18,161,74,.15)}
.mwp-msgs{flex:1; overflow:hidden; padding:9px 10px; display:flex; flex-direction:column; gap:6px}
.mwp-msgs .mb{max-width:86%; padding:7px 10px; border-radius:12px; font-size:11px; line-height:1.45}
.mwp-msgs .mb.bot{align-self:flex-start; background:#EFF4FC; color:#0A1222; border-bottom-left-radius:4px}
.mwp-msgs .mb.me{align-self:flex-end; background:linear-gradient(150deg,#33A3FF,#0084FF); color:#fff; border-bottom-right-radius:4px}
.mwp-msgs .mtyping{align-self:flex-start; display:inline-flex; gap:3px; padding:8px 10px; background:#EFF4FC; border-radius:12px}
.mwp-msgs .mtyping i{width:4px; height:4px; border-radius:50%; background:#7C8AA5; animation:mwTy 1s ease-in-out infinite}
.mwp-msgs .mtyping i:nth-child(2){animation-delay:.15s}.mwp-msgs .mtyping i:nth-child(3){animation-delay:.3s}
@keyframes mwTy{0%,100%{opacity:.35; transform:translateY(0)}50%{opacity:1; transform:translateY(-2px)}}
.mwp-in{display:flex; align-items:center; gap:7px; margin:0 9px 7px; padding:7px 7px 7px 11px;
  border:1px solid rgba(24,54,120,.14); border-radius:100px; background:#fff}
.mwp-in span{flex:1; font-size:10.5px; color:#7C8AA5; white-space:nowrap; overflow:hidden}
.mwp-in .snd{width:24px; height:24px; border-radius:50%; display:grid; place-items:center; flex:0 0 auto;
  background:linear-gradient(150deg,#33A3FF,#0084FF)}
.mwp-foot{display:flex; align-items:center; justify-content:center; gap:5px; padding:6px 0 8px;
  font-size:9px; color:#64748F; border-top:1px solid rgba(24,54,120,.07)}
.mwp-foot b{color:#24324B; font-weight:800}
@media (max-width:720px){
  .mw-wrap{gap:0; padding:14px}
  .mw-side{display:none}
}

/* ===== channel-true frames for Web-Chat + WhatsApp (2026-06-12, follows the
   Mobile-Widget pattern: side caption + the channel's real device) ===== */
.cyem{background:linear-gradient(96deg,#22D3EE,#2D6CF6)!important; -webkit-background-clip:text!important; background-clip:text!important}
.grem{background:linear-gradient(96deg,#25C766,#128C42)!important; -webkit-background-clip:text!important; background-clip:text!important}
.mw-points.pts-cy .d.v{background:#22B8E0; box-shadow:0 0 0 3px rgba(34,184,224,.16)}
.mw-points.pts-gr .d.v{background:#1FAF54; box-shadow:0 0 0 3px rgba(31,175,84,.16)}
.mw-points .soon{margin-left:2px}

/* --- v-web: desktop browser window with the widget in its corner --- */
.v-web{align-items:center; justify-content:center}
.bw-wrap{display:flex; align-items:center; justify-content:center; gap:46px; width:100%; padding:18px 26px}
.bwin{flex:0 0 auto; width:470px; height:368px; border-radius:16px; overflow:hidden;
  background:#fff; border:1px solid rgba(24,54,120,.12);
  box-shadow:0 26px 54px -26px rgba(20,50,110,.5), inset 0 1px 0 #fff}
.bwin-top{display:flex; align-items:center; gap:12px; height:34px; padding:0 12px;
  background:linear-gradient(180deg,#F4F7FD,#ECF1FA); border-bottom:1px solid rgba(24,54,120,.09)}
.blights{display:inline-flex; gap:5px}
.blights i{width:9px; height:9px; border-radius:50%}
.blights i:nth-child(1){background:#FF5F57}.blights i:nth-child(2){background:#FEBC2E}.blights i:nth-child(3){background:#28C840}
.burl{display:inline-flex; align-items:center; gap:6px; margin:0 auto; padding:4px 14px; border-radius:100px;
  background:#fff; border:1px solid rgba(24,54,120,.1); font-size:10.5px; font-weight:600; color:#3D4D6B}
.bwin-site{position:relative; height:calc(100% - 34px); background:#F7FAFF; padding:14px 16px; overflow:hidden}
.bs-nav{display:flex; align-items:center; gap:8px; font-size:12px; font-weight:800; letter-spacing:-.02em; color:#0A1222}
.bs-nav .sq{width:22px; height:22px; border-radius:7px; display:grid; place-items:center;
  background:linear-gradient(150deg,#33A3FF,#0084FF)}
.bs-links{margin-left:auto; display:inline-flex; gap:8px}
.bs-links i{width:30px; height:6px; border-radius:4px; background:rgba(36,50,75,.12)}
.bs-hero{margin-top:18px; max-width:55%}
.bs-hero b{display:block; font-family:'Fustat',sans-serif; font-size:17px; line-height:1.25; letter-spacing:-.015em; color:#0A1222}
.bs-hero i{display:block; height:7px; border-radius:4px; background:rgba(36,50,75,.12); margin-top:8px}
.aww{position:absolute; right:12px; bottom:12px; width:252px; height:268px; border-radius:15px;
  display:flex; flex-direction:column; overflow:hidden;
  background:rgba(255,255,255,.96); border:1px solid rgba(24,54,120,.1);
  box-shadow:0 22px 46px -20px rgba(20,50,110,.55)}
.aww .web-head{padding:9px 12px; gap:8px; background:rgba(255,255,255,.6)}
.aww .web-head .wa-logo{width:26px; height:26px; border-radius:8px}
.aww .web-head b{font-size:12px}
.aww .web-head em{font-size:9.5px; gap:4px}
.aww .web-head em i{width:5px; height:5px}
.aww .msgs{flex:1; min-height:0; overflow:hidden; display:flex; flex-direction:column; gap:6px; padding:9px 10px}
.aww .bub{font-size:11px; padding:7px 10px; border-radius:12px; max-width:88%}
.aww .typing{padding:8px 11px; border-radius:12px}
.aww .typing i{width:4px; height:4px}
.aww .chips{padding:0 10px 10px; gap:5px}
.aww .chip{font-size:10px; padding:5px 9px}
.aww .result{font-size:10px; padding:6px 11px; margin-top:2px}

/* --- v-wa: WhatsApp inside the phone frame --- */
.v-wa{align-items:center; justify-content:center}
.mwp.wap .mwp-screen{background:#EAE6DF}
.mwp-status.lite{color:#fff}
.mwp-status.lite b{color:#fff}
.mwp-sig.lite i{background:#fff}
.mwp-sig.lite{color:#fff}
.wascr .wah{padding:30px 12px 9px; gap:8px}
.wascr .wah .ava{width:26px; height:26px}
.wascr .wah b{font-size:11.5px; gap:4px}
.wascr .wah em{font-size:9px; margin-top:0}
.wascr .msgs{position:absolute; top:84px; bottom:42px; left:0; right:0; overflow:hidden;
  display:flex; flex-direction:column; gap:6px; padding:9px 9px;
  background:
    radial-gradient(circle at 20% 30%, rgba(37,211,102,.07), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(37,211,102,.06), transparent 40%)}
.wap .bub{font-size:10.5px; padding:6px 9px; border-radius:11px; max-width:86%; box-shadow:0 1px 1px rgba(10,19,34,.08)}
.wap .bub.bot{background:#fff; border:0}
.wap .bub .meta{font-size:8.5px; margin-top:3px}
.wap .typing{padding:7px 10px; border-radius:11px; border:0; background:#fff}
.wap .typing i{width:4px; height:4px}
.wap .wa-vnote{gap:6px}
.wap .wa-vnote .vplay{width:18px; height:18px}
.wap .wa-vnote .vbars{height:11px}
.wap .wa-vnote .vbars i{width:2px}
.wap .wa-vnote .vlen{font-size:9px}
.wap .result{font-size:9.5px; padding:5px 10px; margin-top:2px}
.wa-in{position:absolute; left:8px; right:8px; bottom:8px; display:flex; align-items:center; gap:6px;
  padding:5px 5px 5px 11px; border-radius:100px; background:#fff;
  box-shadow:0 4px 12px -6px rgba(10,19,34,.25)}
.wa-in span{flex:1; font-size:10px; color:#7C8AA5}
.wa-in .snd{width:24px; height:24px; border-radius:50%; display:grid; place-items:center; flex:0 0 auto;
  background:linear-gradient(150deg,#25C766,#1FAF54)}

@media (max-width:880px){
  .bwin{width:min(100%,440px)}
  .bs-hero{max-width:46%}
}
@media (max-width:720px){
  .bw-wrap{gap:0; padding:14px}
  .aww{right:8px; bottom:8px; width:232px}
}

/* ===== v-tel: in-call phone + the rail beside it (Iman GO, 2026-06-12) ===== */
.v-tel{align-items:center; justify-content:center}
.tel-wrap{display:flex; align-items:center; justify-content:center; gap:38px; width:100%; padding:18px 26px}
.callscr{background:linear-gradient(172deg,#0E1A30 0%,#16233D 58%,#1B2C52 100%)}
.call-ui{position:absolute; inset:0; padding:32px 9px 9px; display:flex; flex-direction:column; align-items:center}
.call-ui .morb{width:44px; height:44px; margin-top:5px}
.call-ui .ct{display:flex; flex-direction:column; align-items:center; text-align:center; margin-top:9px; min-width:0}
.call-ui .ct b{font-family:'Fustat',sans-serif; font-size:13.5px; letter-spacing:-.015em; color:#fff; line-height:1.2}
.call-ui .ct em{font-style:normal; font-size:9.5px; font-weight:600; color:rgba(234,241,255,.62); margin-top:3px;
  font-variant-numeric:tabular-nums}
.call-ui .wave-strip{margin:8px 0 0; height:14px; flex:0 0 auto; justify-content:center; overflow:visible}
.call-ui .wave-strip i{width:2px}
.call-ui .transcript{flex:1; min-height:0; width:100%; overflow:hidden; display:flex; flex-direction:column;
  gap:5px; padding:8px 4px 4px; justify-content:flex-end}
.callscr .cap{max-width:94%; padding:6px 9px; border-radius:10px; border:0; background:rgba(255,255,255,.1)}
.callscr .cap.ai{border-bottom-left-radius:4px}
.callscr .cap.cu{background:rgba(0,132,255,.34); border-bottom-right-radius:4px}
.callscr .cap .ctxt{font-size:9.8px; line-height:1.45; color:#EAF1FF; min-height:14px; font-weight:500}
.callscr .cap.dim{opacity:.4}
.callscr .syschip{font-size:8.5px; padding:4px 9px; background:rgba(255,255,255,.1); color:#CBD8F0; border:0}
.callscr .result{font-size:9.3px; padding:5px 10px; margin-top:3px;
  background:rgba(18,161,74,.22); color:#9DE8BC; border:1px solid rgba(18,161,74,.4)}
.callscr .result .rck{width:13px; height:13px}
.hangbtn{margin:7px 0 2px; width:36px; height:36px; border-radius:50%; display:grid; place-items:center; flex:0 0 auto;
  background:linear-gradient(160deg,#FF6B5E,#E5483A); box-shadow:0 10px 22px -8px rgba(229,72,58,.65), inset 0 1px 0 rgba(255,255,255,.3)}
.callfoot{display:flex; align-items:center; justify-content:center; gap:4px; padding:5px 0 2px;
  font-size:8.5px; color:rgba(234,241,255,.5)}
.callfoot b{color:rgba(234,241,255,.85); font-weight:800}
.tel-wrap .ai-rail{flex:0 0 272px; max-height:356px; border-radius:16px;
  background:rgba(255,255,255,.7); border:1px solid rgba(24,54,120,.09);
  box-shadow:0 18px 40px -24px rgba(20,50,110,.4)}
@media (max-width:880px){
  .tel-wrap{gap:22px}
  .tel-wrap .ai-rail{flex-basis:240px}
}
@media (max-width:720px){
  .tel-wrap{padding:14px}
}
/* the rail is a floating card now — drop the old column border */
.tel-wrap .ai-rail{border-left:0; min-height:300px}

/* ===== KI to go demo: the phone shows the STANDALONE /k/ page (reached by QR),
   not a website + sheet. CSS-driven over the shared .mwp frame; .wap untouched. ===== */
.mw-qrcard{display:flex; align-items:center; gap:12px; margin:15px 0 4px; padding:10px; width:fit-content;
  border-radius:14px; background:#fff; border:1px solid rgba(24,54,120,.1);
  box-shadow:0 12px 28px -16px rgba(20,50,110,.45)}
.mw-qr{width:84px; height:84px; flex:0 0 auto; display:block; border-radius:7px}
.mw-qrlabel b{display:block; font-size:13px; font-weight:800; color:#0A1222; letter-spacing:-.01em}
.mw-qrlabel small{font-size:11px; color:#5B6B86; font-family:ui-monospace,Menlo,monospace}
/* the standalone page fills the phone — no website behind, no launcher */
.mwp.k2g .mwp-site, .mwp.k2g .mwp-fab{display:none}
/* the status bar & footer are transparent → at the rounded screen corners they
   revealed the cool-grey screen bg (#F4F7FD) as grey triangles. Keep the whole
   k2g page white so the corners blend with the header/footer (Iman QA 2026-06-14) */
.mwp.k2g .mwp-screen{background:#fff}
.mwp.k2g .mwp-foot{background:#fff}
/* the SQUARE top corners were a transform-escape: a child with `transform`
   ignores the parent's overflow:hidden+border-radius round clip and gets clipped
   to the rectangle. Drop the (now-useless) translate AND round the sheet itself
   + clip it, so the corners are round regardless (Iman QA 2026-06-14). */
.mwp.k2g .mwp-sheet{top:0; bottom:auto; height:100%; transform:none; border-radius:27px; overflow:hidden;
  box-shadow:none; background:#fff; display:flex; flex-direction:column}
.mwp.k2g .mwp-head{padding:32px 12px 9px; gap:8px; background:#fff; border-bottom:1px solid rgba(24,54,120,.08)}
.mwp.k2g .mwp-blogo{width:25px; height:25px; border-radius:8px; flex:0 0 auto; display:grid; place-items:center;
  background:linear-gradient(150deg,#33A3FF,#0084FF); box-shadow:0 6px 14px -7px rgba(0,132,255,.8)}
.mwp.k2g .mwp-bid b{display:block; font-size:11.5px; font-weight:800; color:#0A1222; letter-spacing:-.015em; line-height:1.1}
.mwp.k2g .mwp-bid small{display:flex; align-items:center; gap:5px; font-size:9px; font-weight:600; color:#5B6B86; margin-top:2px}
.mwp.k2g .mwp-bid .mdot{width:5px; height:5px; border-radius:50%; background:#1FC97E; flex:0 0 auto}
/* anchor the short demo conversation to the bottom (above the composer) so there
   is no dead gap — chats grow upward, like a real messenger */
.mwp.k2g .mwp-msgs{flex:1; justify-content:flex-end}
/* mobile: the side text is hidden site-wide (≤720px), but for KI to go the QR IS
   the point — keep a compact QR + caption above the phone (scoped to .v-mw, so
   the Web-Chat/WhatsApp/Telefonie tabs are untouched) */
@media (max-width:720px){
  /* the stage has a FIXED height sized for one device + the side hidden; KI to go
     stacks QR + phone (taller) → it overflowed UP into the tabs. Grow the stage
     ONLY while the KI-to-go tab is active so the column fits (Iman QA 2026-06-14). */
  .demo-stage:has(.v-mw.on){height:600px}
  .v-mw .mw-wrap{flex-direction:column; gap:14px}
  .v-mw .mw-side{display:flex; flex-direction:column; align-items:center; text-align:center; max-width:340px; margin:0 auto}
  .v-mw .mw-side p, .v-mw .mw-side .mw-points{display:none}
  .v-mw .mw-cap{font-size:18px}
  .v-mw .mw-qrcard{margin:2px auto 0; padding:9px}
  .v-mw .mw-qr{width:72px; height:72px}
}