/* ============================================================
 WASILBOX · AI AGENT section (v33 · inside Wasil's head) — scoped to .wbai
 Loads after site.css; uses site vars (--lime, --ink, --disp)
 ============================================================ */
/* ================= v33 · AI AGENT — INSIDE WASIL'S HEAD (scoped .wbai) ================= */
.wbai { position:relative; background:#07090b; color:#f4f2ec; overflow:hidden; }
.wbai-stage { position:relative; height:calc(100vh - var(--wbai-hdr, 0px)); min-height:640px; }
.wbai-canvas { position:absolute; inset:0; width:100%; height:100%; display:block; }
.wbai-vignette { position:absolute; inset:0; pointer-events:none; background:radial-gradient(70% 60% at 50% 50%, transparent 55%, rgba(0,0,0,.55) 100%); }
.wbai-glow { position:absolute; inset:0; pointer-events:none; background:radial-gradient(55% 45% at 50% 60%, rgba(212,236,90,.12), transparent 70%); opacity:0; transition:opacity 1s; }
.wbai-sky { position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity 1.2s; background:linear-gradient(180deg,#0a0f2a 0%,#07090b 60%); }
.wbai-stars { position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity 1.2s; background-image:radial-gradient(1px 1px at 12% 22%, #fff 40%, transparent 60%), radial-gradient(1px 1px at 33% 12%, #fff 40%, transparent 60%), radial-gradient(1.5px 1.5px at 58% 18%, #fff 40%, transparent 60%), radial-gradient(1px 1px at 78% 30%, #fff 40%, transparent 60%), radial-gradient(1px 1px at 88% 12%, #fff 40%, transparent 60%), radial-gradient(1px 1px at 45% 35%, #fff 40%, transparent 60%); }
.wbai-moon { position:absolute; top:12%; inset-inline-end:14%; width:64px; height:64px; border-radius:50%; background:radial-gradient(circle at 35% 35%, #fffbe6, #d9d3b8 70%); box-shadow:0 0 60px rgba(255,250,220,.35); opacity:0; transform:translateY(40px); transition:opacity 1s, transform 1.2s; pointer-events:none; }

.wbai-copy { position:absolute; z-index:5; inset-inline-start:6%; top:12%; max-width:min(520px, 34vw); text-shadow:0 2px 18px rgba(0,0,0,.55); opacity:0; transform:translateY(24px); transition:opacity .6s, transform .6s; pointer-events:none; }
.wbai-copy.on { opacity:1; transform:none; pointer-events:auto; }
.wbai-copy.center { inset-inline:0; margin:auto; text-align:center; top:10%; max-width:640px; }
.wbai-kicker { display:inline-flex; align-items:center; gap:8px; font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--lime); font-weight:700; margin-bottom:14px; }
.wbai-kicker i { width:8px; height:8px; border-radius:50%; background:var(--lime); box-shadow:0 0 12px var(--lime); display:inline-block; }
.wbai-copy h2 { font-family:var(--disp); font-size:clamp(28px,4.2vw,54px); line-height:1.15; margin:0 0 14px; font-weight:800; }
.wbai-copy h2 em { font-style:normal; color:var(--lime); }
.wbai-copy p { font-size:clamp(15px,1.3vw,19px); line-height:1.7; color:#cfcbc2; margin:0; }
.wbai-labels { position:absolute; inset:0; pointer-events:none; z-index:4; }
.wbai-lbl { position:absolute; transform:translate(-50%,-50%); font-size:12px; padding:4px 10px; border-radius:999px; background:rgba(11,17,20,.7); border:1px solid rgba(212,236,90,.35); color:#e7e4dc; white-space:nowrap; opacity:0; transition:opacity .4s, border-color .3s, color .3s, box-shadow .3s; }
.wbai-lbl.on { opacity:1; }
.wbai-lbl.hot { border-color:var(--lime); color:#fff; box-shadow:0 0 18px rgba(212,236,90,.45); }
.wbai-xray { position:absolute; z-index:7; inset-inline-end:6%; top:auto; bottom:calc(50% + 276px); display:inline-flex; align-items:center; gap:10px; background:rgba(255,255,255,.06); border:1px solid rgba(212,236,90,.4); border-radius:999px; padding:8px 8px 8px 14px; font-size:13px; opacity:0; transition:opacity .5s; cursor:pointer; user-select:none; }
.wbai-xray.on { opacity:1; }
.wbai-xray .sw { width:38px; height:22px; border-radius:11px; background:#333; position:relative; transition:background .25s; }
.wbai-xray .sw::after { content:''; position:absolute; top:3px; inset-inline-start:3px; width:16px; height:16px; border-radius:50%; background:#fff; transition:transform .25s; }
.wbai-xray.active .sw { background:var(--lime); } .wbai-xray.active .sw::after { transform:translateX(16px); }
[dir="rtl"] .wbai-xray.active .sw::after { transform:translateX(-16px); }

/* phone */
.wbai-phone { position:absolute; z-index:6; inset-inline-end:6%; top:50%; width:280px; height:520px; transform:translateY(-50%); opacity:0; transition:opacity .7s, transform .9s cubic-bezier(.2,.8,.2,1); border-radius:38px; background:#111; padding:12px; box-shadow:0 40px 80px rgba(0,0,0,.6), 0 0 0 2px #222, inset 0 0 0 1px #333; }
.wbai-phone.on { opacity:1; } .wbai-phone.off { opacity:0; transform:translateY(-50%) translateX(40px); pointer-events:none; }
.wbai-screen { position:absolute; inset:12px; border-radius:28px; overflow:hidden; background:#e5ddd5; color:#0b1114; display:flex; flex-direction:column; direction:rtl; }
[dir="ltr"] .wbai-screen { direction:ltr; }
.wbai-top { background:#075e54; color:#fff; padding:14px 14px 10px; display:flex; align-items:center; gap:10px; font-size:13px; transition:background .4s; }
.wbai-top.human { background:#1f2d3a; }
.wbai-top.human .av { background:linear-gradient(135deg,#f5d0b5,#e8b08c); color:#5a3a20; box-shadow:0 0 0 2px var(--lime); }
.wbai-eg { display:inline-block; font-style:normal; font-size:11px; color:#9a968e; border:1px solid rgba(255,255,255,.18); border-radius:999px; padding:1px 8px; margin-inline-start:6px; vertical-align:middle; }
/* v51 · SITE7-13: the badge's brackets are in the text (screen readers, copy-paste: "… (illustrative)") but take no room */
.wbai-eg .wbai-pr { font-size:0; }
.wbai-top .av { width:30px; height:30px; border-radius:50%; background:var(--lime); color:#0b1114; display:grid; place-items:center; font-weight:800; font-size:12px; }
.wbai-top small { display:block; opacity:.8; font-size:11px; }
.wbai-msgs { flex:1; padding:12px 10px; display:flex; flex-direction:column; gap:8px; overflow:hidden; justify-content:flex-end; }
.wbai-m { max-width:86%; padding:8px 10px; border-radius:12px; font-size:13px; line-height:1.55; color:#0b1114; animation:wbai-pop .35s cubic-bezier(.2,.9,.3,1.3); }
.wbai-m.in { background:#fff; align-self:flex-start; border-start-start-radius:4px; }
.wbai-m.out { background:#dcf8c6; align-self:flex-end; border-start-end-radius:4px; }
.wbai-m.sys { background:transparent; color:#5a5a5a; font-size:11px; align-self:center; }
.wbai-m .ai { display:inline-flex; align-items:center; gap:4px; font-size:10px; color:#3a6b00; font-weight:700; margin-top:4px; }
.wbai-m .t { display:block; font-size:10px; color:#888; text-align:end; margin-top:2px; }
.wbai-typing { display:inline-flex; gap:3px; padding:6px 10px; background:#dcf8c6; border-radius:12px; align-self:flex-end; }
.wbai-typing i { width:6px; height:6px; border-radius:50%; background:#6b8f3a; animation:wbai-blink 1s infinite; }
.wbai-typing i:nth-child(2) { animation-delay:.15s } .wbai-typing i:nth-child(3) { animation-delay:.3s }
@keyframes wbai-blink { 0%,80%,100% { opacity:.25 } 40% { opacity:1 } }
@keyframes wbai-pop { from { opacity:0; transform:translateY(8px) scale(.96) } to { opacity:1; transform:none } }
.wbai-ask { padding:10px; background:#f7f5f0; border-top:1px solid #ddd; display:flex; flex-direction:column; gap:6px; }
.wbai-ask small { font-size:11px; color:#666; }
.wbai-ask .row { display:flex; gap:6px; flex-wrap:wrap; }
.wbai-q { font:inherit; font-size:12px; padding:6px 10px; border-radius:999px; border:1px solid #cfe3a0; background:#fff; color:#0b1114; cursor:pointer; transition:transform .15s, background .15s; }
.wbai-q:hover { background:#f3fbdc; transform:translateY(-1px); } .wbai-q:disabled, .wbai-q[aria-disabled="true"] { opacity:.5; cursor:default; } .wbai-q.bad { border-color:#f0c4c4; }
.wbai-human { position:absolute; z-index:7; inset-inline-end:calc(8% + 320px); top:36%; display:flex; align-items:center; gap:10px; opacity:0; transform:translateX(30px); transition:opacity .6s, transform .6s; }
.wbai-human.on { opacity:1; transform:none; }
.wbai-human .ph { width:64px; height:64px; border-radius:50%; box-shadow:0 0 0 3px var(--lime), 0 12px 30px rgba(0,0,0,.5); background:linear-gradient(135deg,#f5d0b5,#e8b08c); display:grid; place-items:center; font-weight:800; color:#5a3a20; font-size:22px; }
.wbai-human b { display:block; font-size:14px; } .wbai-human small { color:#cfcbc2; font-size:12px; }
.wbai-spark { position:absolute; width:6px; height:6px; border-radius:50%; background:var(--lime); box-shadow:0 0 10px var(--lime); pointer-events:none; z-index:6; opacity:0; }
.wbai-counter { position:absolute; z-index:6; inset-inline-start:6%; bottom:17%; opacity:0; transform:translateY(20px); transition:opacity .6s, transform .6s; }
.wbai-counter.on { opacity:1; transform:none; }
.wbai-counter b { display:block; font-family:var(--disp); font-size:clamp(40px,6vw,84px); line-height:1; color:var(--lime); letter-spacing:-.02em; }
.wbai-counter span { color:#cfcbc2; font-size:15px; }
.wbai-final { position:absolute; z-index:6; inset-inline:6%; bottom:6%; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; opacity:0; transform:translateY(20px); transition:opacity .6s, transform .6s; }
.wbai-final.on { opacity:1; transform:none; }
/* v49 · SITE6-03: while it is invisible (scenes 1–4) the closing call to action is out of the Tab order too — the keyboard landed on
   an unseen "Try AI Agent for free"; it fades out first, then leaves the order */
.wbai-final { visibility:hidden; transition:opacity .6s, transform .6s, visibility 0s linear .6s; }
.wbai-final.on { visibility:visible; transition:opacity .6s, transform .6s, visibility 0s; }
.wbai-final p { margin:0; font-size:clamp(15px,1.4vw,20px); color:#e7e4dc; }
.wbai-final .btn { font:inherit; font-weight:700; background:var(--lime); color:#0b1114; border:0; border-radius:999px; padding:14px 26px; cursor:pointer; text-decoration:none; box-shadow:0 10px 30px rgba(212,236,90,.3); }
.wbai-dots { position:absolute; z-index:6; inset-inline-end:2%; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:10px; }
.wbai-dots i { width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.25); transition:background .3s, transform .3s; }
.wbai-dots i.on { background:var(--lime); transform:scale(1.4); box-shadow:0 0 10px var(--lime); }
.wbai-hint { position:absolute; z-index:6; inset-inline:0; bottom:5%; text-align:center; font-size:13px; color:#9a968e; opacity:0; transition:opacity .5s; }
.wbai-hint.on { opacity:1; }

.wbai.nogl .wbai-canvas { display:none; }
.wbai-2d { position:absolute; inset-inline-start:50%; top:46%; transform:translate(50%,-50%); width:180px; display:none; }
[dir="ltr"] .wbai-2d { transform:translate(-50%,-50%); }
.wbai.nogl .wbai-2d { display:block; }

/* ---------- mobile (≤900px): title on top, character in the middle, phone / counter below — nothing overlaps ---------- */
@media (max-width: 900px) {
  .wbai-stage { min-height:600px; }
  .wbai-copy { inset-inline:6%; top:5%; max-width:none; text-shadow:none; }
  .wbai-copy.center { max-width:none; top:5%; text-align:start; inset-inline:6%; }   /* v42 · SITE-12: side padding on phones */
  .wbai-copy h2 { font-size:clamp(24px, 7vw, 32px); margin-bottom:8px; }
  .wbai-copy p { font-size:14px; line-height:1.6; }
  .wbai-kicker { margin-bottom:8px; }
  .wbai-2d, [dir="ltr"] .wbai-2d { width:120px; inset-inline-start:auto; inset-inline-end:auto; left:50%; right:auto; top:auto; bottom:12%; transform:translateX(-50%); transition:opacity .4s, bottom .5s; }
  .wbai.s5 .wbai-2d { bottom:38%; }
  .wbai.phone-on .wbai-2d { opacity:0; }
  .wbai-hint { bottom:3%; }
  .wbai-moon { top:3%; inset-inline-end:5%; width:40px; height:40px; }
  .wbai-phone { width:230px; height:420px; inset-inline-end:auto; inset-inline-start:auto; left:50%; right:auto; top:auto; bottom:5%; transform:translateX(-50%); }
  [dir="ltr"] .wbai-phone { transform:translateX(-50%); }
  .wbai-phone.off { transform:translateX(-50%) translateY(30px); }
  .wbai-xray { left:auto; right:auto; inset-inline-start:auto; inset-inline-end:5%; top:3%; bottom:auto; transform:none; padding:6px 6px 6px 10px; font-size:12px; }
  .wbai-xray .sw { width:32px; height:18px; } .wbai-xray .sw::after { width:12px; height:12px; }
  .wbai-xray.active .sw::after { transform:translateX(14px); } [dir="rtl"] .wbai-xray.active .sw::after { transform:translateX(-14px); }
  .wbai-counter { inset-inline-start:6%; inset-inline-end:6%; top:auto; bottom:calc(4% + 150px); }   /* v42 · SITE-12: bounded on both sides */
  .wbai-counter b { font-size:44px; }
  .wbai-counter span { font-size:13px; }
  .wbai-final { inset-inline:6%; bottom:4%; flex-direction:column; align-items:stretch; gap:10px; }
  .wbai-final .btn { margin-right:60px; }   /* v43 · SITE-24: leaves the chat button's corner free (it sits bottom-right in both languages) */
  .wbai-final p { font-size:14px; }
  .wbai-final .btn { text-align:center; padding:12px 20px; }
  .wbai-dots, .wbai-labels { display:none; }
}

/* v51 · QA pass #7 · SITE7-07: the X-ray switch is a <button role="switch"> (its look unchanged); while it is not shown it takes no
   pointer either. With the keyboard's scene jumps (ai-agent.js adds .kb) "Try AI Agent for free" stays in the Tab order — the
   scene comes to it the moment it has the focus — and, while not shown, takes no pointer (an invisible link over the phone) */
.wbai-xray { font:inherit; font-size:13px; color:inherit; text-align:start; }
.wbai-xray:not(.on) { pointer-events:none; }
.wbai:not(.kb) .wbai-xray:not(.on) { visibility:hidden; }
.wbai.kb .wbai-final { visibility:visible; }
.wbai-final:not(.on) { pointer-events:none; }
@media (max-width: 900px) { .wbai-xray { font-size:12px; } }
/* v51 · SITE7-10: on touch screens the X-ray switch is 44 px tall (the phone's questions keep their 35 px: 44 px pills filled the
   small phone, one per row, and left the conversation no room) */
@media (max-width: 1060px), (pointer: coarse) { .wbai-xray { min-height:44px; } }