/* Website AI chatbot pages (/webbot/*). Builds on wabot.css + the fx design tokens. */

/* ── hero chat mock ── */
.ww-mock{position:relative;max-width:420px;margin-left:auto;border:1px solid var(--border);border-radius:24px;background:var(--bg-card);box-shadow:0 30px 80px -30px rgba(0,0,0,.45);overflow:hidden}
.ww-mock-top{display:flex;align-items:center;gap:12px;padding:16px 18px;background:#1d4ed8;color:#fff}
.ww-mock-top b{display:block;font-size:15px}
.ww-mock-top small{opacity:.85;font-size:12px}
.ww-mock-av{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.18);font-weight:800}
.ww-mock-body{display:grid;gap:10px;padding:18px;font-size:14px;line-height:1.5}
.ww-msg{max-width:84%;padding:10px 14px;border-radius:16px}
.ww-msg.bot{background:color-mix(in srgb,var(--primary) 20%,var(--bg-card));border:1px solid color-mix(in srgb,var(--primary) 25%,var(--border));color:var(--text);border-bottom-left-radius:5px}
.ww-msg.me{justify-self:end;background:#1d4ed8;color:#fff;border-bottom-right-radius:5px}
.ww-msg small{display:block;margin-top:4px;opacity:.75;font-size:11.5px}
.ww-mock-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 18px;border-top:1px solid var(--border);font-size:12px;color:var(--muted)}
@media (max-width:900px){.ww-mock{margin:24px auto 0}}

/* ── landing sections ── */
.ww-steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.ww-steps3 .fxp-card b.ww-n{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;margin-bottom:14px;background:color-mix(in srgb,var(--primary) 16%,transparent);color:var(--primary);font-weight:800}
.ww-feat{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.ww-feat .fxp-card i{font-size:22px;color:var(--primary);margin-bottom:14px}
.ww-works{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.ww-works span{padding:8px 14px;border:1px solid var(--border);border-radius:999px;font-size:13px;font-weight:600;color:var(--text);background:var(--bg-card)}
.ww-try{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between;padding:18px 22px;border-radius:16px;border:1px dashed color-mix(in srgb,var(--primary) 50%,var(--border));background:color-mix(in srgb,var(--primary) 6%,var(--bg-card));color:var(--text-2)}
.ww-try b{color:var(--text)}

/* ── plan cards (Free + 3 paid) ── */
.ww-plans{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.ww-plans .wb-plan{cursor:default}
.ww-plans .wb-plan:hover{transform:none}
.ww-plans .wb-plan.free{border-style:dashed}
.ww-plans .wb-plan .fxp-btn{margin-top:auto;justify-content:center}
.ww-plan-pick .wb-plan{cursor:pointer}
.wb-plans.ww-three{grid-template-columns:repeat(3,1fr)}

/* ── comparison ── */
.ww-vs td:first-child{font-weight:600;color:var(--text)}
.ww-vs td.y{color:var(--success,#16a34a);font-weight:700}

/* ── setup screen extras ── */
.ww-snippet{position:relative;margin:12px 0;padding:16px 16px 52px;border-radius:14px;border:1px solid var(--border);background:var(--bg);font:500 13px/1.6 var(--fx-mono,monospace);color:var(--text);word-break:break-all}
.ww-snippet button{position:absolute;right:12px;bottom:12px}
.ww-platforms{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 10px}
.ww-platforms button{border:1px solid var(--border);background:var(--bg-card);color:var(--text-2);font:600 13px/1 inherit;padding:10px 14px;border-radius:10px;cursor:pointer}
.ww-platforms button.on{background:var(--primary);border-color:var(--primary);color:#fff}
.ww-howto{display:none;margin:0 0 6px;padding:14px 18px;border-radius:12px;background:color-mix(in srgb,var(--primary) 6%,transparent);color:var(--text-2);font-size:14.5px;line-height:1.65}
.ww-howto.on{display:block}
.ww-howto ol{margin:0;padding-left:20px}
.ww-preview{display:grid;grid-template-columns:1fr;gap:12px;margin:14px 0}
.ww-preview iframe{width:100%;height:480px;border:1px solid var(--border);border-radius:18px;background:#fff}
.ww-look{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:14px 0}
.ww-look label{display:grid;gap:6px;font-size:13px;font-weight:600;color:var(--text-2)}
.ww-look input,.ww-look select,.ww-look textarea{width:100%;padding:11px 12px;border-radius:10px;border:1px solid var(--border);background:var(--bg);color:var(--text);font:inherit;font-size:14px}
.ww-look input[type=color]{height:44px;padding:4px}
.ww-look .full{grid-column:1/-1}
.ww-lock{display:flex;gap:10px;align-items:flex-start;margin:10px 0 0;padding:12px 14px;border-radius:12px;border:1px solid color-mix(in srgb,#f59e0b 45%,var(--border));background:color-mix(in srgb,#f59e0b 9%,transparent);font-size:14px;color:var(--text-2)}
.ww-lock b{color:var(--text)}

/* ── billing ── */
.ww-meter{height:8px;border-radius:99px;background:var(--border);overflow:hidden;margin:-8px 0 14px}
.ww-meter div{height:100%;background:var(--primary)}
.ww-meter div.hi{background:#f59e0b}

@media (max-width:1100px){.ww-plans{grid-template-columns:repeat(2,1fr)}}
@media (max-width:900px){
  .ww-steps3,.ww-feat,.wb-plans.ww-three{grid-template-columns:1fr}
  .ww-look{grid-template-columns:1fr}
}
@media (max-width:620px){.ww-plans{grid-template-columns:1fr}.ww-preview iframe{height:420px}}

/* signup: optional extras folded away */
.wb-more{border:1px dashed var(--border);border-radius:12px;padding:10px 14px;margin:4px 0 0}
.wb-more summary{cursor:pointer;font-weight:600;color:var(--primary,#2563eb);font-size:14px}
.wb-more[open] summary{margin-bottom:12px}
.wb-more>div{margin-top:10px}