/* ============================================================
 WASILBOX · CHATBOT — the living tree (v40) — scoped to .wbbot
 Auto-playing demo, 3D phone that follows the pointer, no pinning.
 Loads after site.css; uses site vars (--lime, --ink, --cream, --disp)
 ============================================================ */
.wbbot { background:#fff; color:var(--ink); position:relative; padding:88px 0 84px; overflow:hidden; }
.wbbot-wrap { width:min(1180px, 92vw); margin:0 auto; }
.wbbot-head { text-align:center; max-width:760px; margin:0 auto 26px; }
.wbbot-kicker { display:inline-flex; align-items:center; gap:8px; font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:#5a6b12; font-weight:700; margin-bottom:12px; }
.wbbot-kicker i { width:8px; height:8px; border-radius:50%; background:var(--lime); box-shadow:0 0 12px var(--lime); }
.wbbot-head h2 { font-family:var(--disp); font-size:clamp(28px,4vw,52px); line-height:1.15; margin:0 0 12px; font-weight:800; }
.wbbot-head h2 em { font-style:normal; background:linear-gradient(transparent 60%, var(--lime) 60%); }
.wbbot-head p { margin:0 auto; max-width:640px; font-size:clamp(15px,1.3vw,19px); line-height:1.7; color:#5b5b57; }
.wbbot-step { display:inline-flex; align-items:center; gap:8px; margin-top:16px; font-size:13px; padding:7px 14px; border-radius:999px; background:#f0f3e2; color:#3a4c08; border:1px solid #dbe6ad; min-height:32px; transition:opacity .25s; }
.wbbot-step i { width:8px; height:8px; border-radius:50%; background:#8fb01a; box-shadow:0 0 0 0 rgba(143,176,26,.5); animation:wbbot-pulse 1.6s infinite; }
.wbbot-step b { font-weight:700; }
.wbbot-step:empty { display:none; }
@keyframes wbbot-pulse { 0% { box-shadow:0 0 0 0 rgba(143,176,26,.55) } 70% { box-shadow:0 0 0 8px rgba(143,176,26,0) } 100% { box-shadow:0 0 0 0 rgba(143,176,26,0) } }

/* two columns: tree + phone */
.wbbot-grid { display:grid; grid-template-columns:minmax(0,1.25fr) 340px; gap:4%; align-items:center; }
.wbbot-tree { position:relative; width:100%; aspect-ratio:700 / 540; }
.wbbot-tree.compact { aspect-ratio:420 / 440; }
.wbbot-tree svg { position:absolute; inset:0; width:100%; height:100%; max-width:none; overflow:visible; }
.wbbot .edge { fill:none; stroke:#d8d8d2; stroke-width:2.5; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset .7s cubic-bezier(.2,.8,.2,1), stroke .3s, stroke-width .3s; }
.wbbot .edge.on { stroke:#b9bfa2; stroke-dashoffset:0; }
.wbbot .edge.hot { stroke:var(--lime); stroke-width:4; filter:drop-shadow(0 0 6px rgba(212,236,90,.9)); }
.wbbot .node { opacity:0; transform:scale(.6); transform-box:fill-box; transform-origin:center; transition:opacity .35s, transform .35s cubic-bezier(.2,.9,.3,1.3); }
.wbbot .node.on { opacity:1; transform:none; }
.wbbot .node rect { fill:#fff; stroke:#e1e1da; stroke-width:1.5; rx:14; transition:fill .3s, stroke .3s; }
.wbbot { --wbbot-hot:#075e54; }   /* active step = the phone-header green; change it here only */
.wbbot .node.hot rect, .wbbot .node.hot.hand rect { stroke:var(--lime); stroke-width:3; fill:var(--wbbot-hot); filter:drop-shadow(0 0 14px rgba(212,236,90,.85)) drop-shadow(0 8px 18px rgba(212,236,90,.45)); }
.wbbot .node.done rect { fill:#f3f7df; stroke:#c9d98a; }

.wbbot .node .lbl { font-weight:700; fill:#0b1114; transition:fill .3s; }
.wbbot .node .sub { fill:#7a7a74; transition:fill .3s; }
.wbbot .node.hot .lbl { fill:#fff; }
.wbbot .node.hot .sub { fill:rgba(255,255,255,.84); }
.wbbot .node.q rect { rx:22; }
.wbbot .node.hand rect { fill:#fff5f0; stroke:#f6c9b5; }

/* phone (3D) */
.wbbot-tilt { position:relative; perspective:1300px; justify-self:center; width:300px; height:580px; }
.wbbot-phone { position:relative; width:300px; height:580px; border-radius:38px; background:#111; padding:12px; box-shadow:0 40px 80px rgba(0,0,0,.32), 0 0 0 2px #222, inset 0 0 0 1px #333; transform-style:preserve-3d; will-change:transform; }
.wbbot-phone::before { content:''; position:absolute; top:10px; left:50%; transform:translateX(-50%); width:96px; height:22px; border-radius:12px; background:#111; z-index:2; }
.wbbot-shadow { position:absolute; left:8%; right:8%; bottom:-34px; height:44px; border-radius:50%; background:radial-gradient(50% 50% at 50% 50%, rgba(10,17,19,.28), transparent 70%); filter:blur(6px); z-index:-1; transition:transform .2s; }
.wbbot-screen { position:absolute; inset:12px; border-radius:28px; overflow:hidden; background:#e5ddd5; display:flex; flex-direction:column; color:#0b1114; }
.wbbot-top { background:#075e54; color:#fff; padding:18px 14px 10px; display:flex; align-items:center; gap:10px; font-size:13px; }
.wbbot-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; flex:0 0 auto; }
.wbbot-top small { display:block; opacity:.85; font-size:11px; }
.wbbot-msgs { flex:1; padding:12px 10px; display:flex; flex-direction:column; gap:8px; overflow:hidden; justify-content:flex-end; }
.wbbot-m { max-width:88%; padding:8px 10px; border-radius:12px; font-size:13px; line-height:1.55; color:#0b1114; animation:wbbot-pop .35s cubic-bezier(.2,.9,.3,1.3); }
.wbbot-m.in { background:#fff; align-self:flex-start; border-start-start-radius:4px; }
.wbbot-m.out { background:#dcf8c6; align-self:flex-end; border-start-end-radius:4px; }
.wbbot-m.sys { background:transparent; color:#5a5a5a; font-size:11px; align-self:center; text-align:center; }
.wbbot-m .t { display:block; font-size:10px; color:#888; text-align:end; margin-top:2px; }
.wbbot-m .lbtn { display:block; margin-top:8px; text-align:center; color:#00a5f4; font-weight:700; border-top:1px solid #eee; padding-top:6px; font-size:12.5px; }
.wbbot-m .opt { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:6px; padding:7px 9px; border-radius:9px; border:1px solid #d5e3a3; background:#fff; font-size:12px; }
.wbbot-m .opt i { width:14px; height:14px; border-radius:50%; border:2px solid #9fb84d; flex:0 0 auto; }
.wbbot-m .opt.pick { background:#f3fbdc; border-color:#8fb01a; } .wbbot-m .opt.pick i { background:#8fb01a; box-shadow:inset 0 0 0 3px #fff; }
.wbbot-typing { display:inline-flex; gap:3px; padding:7px 10px; background:#fff; border-radius:12px; align-self:flex-start; }
.wbbot-typing i { width:6px; height:6px; border-radius:50%; background:#8a8a84; animation:wbbot-blink 1s infinite; }
.wbbot-typing i:nth-child(2) { animation-delay:.15s } .wbbot-typing i:nth-child(3) { animation-delay:.3s }
.wbbot-bar { padding:8px 10px 10px; background:#f7f5f0; border-top:1px solid #ddd; display:flex; justify-content:center; }
.wbbot-live { display:inline-flex; align-items:center; gap:6px; font-size:11px; color:#3a6b00; font-weight:700; }
.wbbot-live i { width:7px; height:7px; border-radius:50%; background:#25d366; box-shadow:0 0 0 3px rgba(37,211,102,.25); }
@keyframes wbbot-blink { 0%,80%,100% { opacity:.25 } 40% { opacity:1 } }
@keyframes wbbot-pop { from { opacity:0; transform:translateY(8px) scale(.96) } to { opacity:1; transform:none } }

/* foot */
.wbbot-foot { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; margin-top:36px; }
.wbbot-stats { display:flex; gap:10px; flex-wrap:wrap; }
.wbbot-stat { border-radius:14px; padding:11px 16px; font-size:14px; font-weight:600; display:flex; align-items:center; gap:8px; }
.wbbot-btn { font:inherit; font-weight:700; background:var(--ink); color:#fff; border:0; border-radius:999px; padding:14px 26px; text-decoration:none; white-space:nowrap; }
.wbbot-btn:hover { background:#000; }

@media (max-width: 900px) {
  .wbbot { padding:64px 0 56px; }
  .wbbot-grid { grid-template-columns:1fr; gap:22px; }
  .wbbot-tree.compact { aspect-ratio:420 / 440; max-width:420px; margin:0 auto; }
  .wbbot-tilt, .wbbot-phone { width:250px; height:480px; }
  .wbbot-tilt { margin:0 auto; }
  .wbbot-foot { justify-content:center; text-align:center; }
  .wbbot-stats { justify-content:center; }
}
@media (prefers-reduced-motion: reduce) {
  .wbbot .edge, .wbbot .node { transition:none; }
  .wbbot-step i { animation:none; }
}