/* ============================================================
   FUNNELS THAT SELL — Chat widget (chatbot.css v1)
   Premium glass launcher + panel, brand palette, mobile-first
   ============================================================ */
.cb-root { --cbp:#7b68ee; --cbpk:#fd71af; --cbbl:#4e9bfa; --cbgr:#18a957; position:fixed; right:22px; bottom:22px; z-index:9999; font-family:'Plus Jakarta Sans',system-ui,sans-serif; }
/* ---------- launcher ---------- */
.cb-launch {
  width:62px; height:62px; border-radius:50%; border:none; cursor:pointer; position:relative;
  background:linear-gradient(135deg,var(--cbp) 0%,var(--cbbl) 100%);
  box-shadow:0 14px 34px -10px rgba(123,104,238,.65), 0 4px 12px rgba(23,23,60,.22);
  display:grid; place-items:center; transition:transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease;
  animation:cbPulse 3.2s ease infinite;
}
.cb-launch:hover { transform:scale(1.08) translateY(-2px); }
.cb-launch svg { width:27px; height:27px; color:#fff; transition:transform .3s ease, opacity .2s ease; }
.cb-launch .cb-x { position:absolute; opacity:0; transform:rotate(-90deg) scale(.6); }
.cb-root.open .cb-launch .cb-x { opacity:1; transform:rotate(0) scale(1); }
.cb-root.open .cb-launch .cb-chat { opacity:0; transform:rotate(90deg) scale(.6); }
.cb-root.open .cb-launch { animation:none; }
@keyframes cbPulse { 0%,100% { box-shadow:0 14px 34px -10px rgba(123,104,238,.65), 0 0 0 0 rgba(123,104,238,.45); } 50% { box-shadow:0 14px 34px -10px rgba(123,104,238,.65), 0 0 0 14px rgba(123,104,238,0); } }
.cb-dot { position:absolute; top:3px; right:3px; width:14px; height:14px; border-radius:50%; background:var(--cbgr); border:2.5px solid #fff; box-shadow:0 0 0 3px rgba(24,169,87,.22); }
.cb-badge { position:absolute; top:-4px; left:-4px; min-width:21px; height:21px; border-radius:99px; background:#ff4d6d; color:#fff; font-size:11.5px; font-weight:800; display:none; place-items:center; padding:0 5px; box-shadow:0 6px 14px -4px rgba(255,77,109,.6); }
.cb-badge.show { display:grid; animation:cbPop .35s cubic-bezier(.34,1.56,.64,1); }
/* ---------- teaser bubble ---------- */
.cb-teaser { position:absolute; bottom:74px; right:0; width:238px; background:#fff; border:1px solid #eceaf6; border-radius:16px 16px 4px 16px; padding:13px 15px; box-shadow:0 18px 40px -18px rgba(23,23,60,.4); font-size:13px; font-weight:600; color:#23262f; line-height:1.5; opacity:0; transform:translateY(10px) scale(.96); pointer-events:none; transition:all .35s cubic-bezier(.34,1.56,.64,1); }
.cb-teaser.show { opacity:1; transform:none; pointer-events:auto; }
.cb-teaser b { color:var(--cbp); }
.cb-teaser .cb-tclose { position:absolute; top:6px; right:8px; border:none; background:none; cursor:pointer; color:#b9b6c9; font-size:14px; padding:2px 4px; line-height:1; }
/* ---------- panel ---------- */
.cb-panel {
  position:absolute; bottom:78px; right:0; width:384px; max-width:calc(100vw - 32px); height:610px; max-height:calc(100vh - 110px);
  background:#fff; border-radius:22px; box-shadow:0 34px 80px -22px rgba(23,23,60,.5), 0 0 0 1px #eceaf6;
  display:flex; flex-direction:column; overflow:hidden;
  opacity:0; transform:translateY(18px) scale(.94); transform-origin:bottom right; pointer-events:none;
  transition:all .32s cubic-bezier(.34,1.56,.64,1);
}
.cb-root.open .cb-panel { opacity:1; transform:none; pointer-events:auto; }
/* header */
.cb-head { background:linear-gradient(120deg,#171528 0%,#241d47 60%,#1b2b4a 100%); color:#fff; padding:16px 18px; display:flex; align-items:center; gap:12px; position:relative; overflow:hidden; }
.cb-head::before { content:""; position:absolute; width:190px; height:190px; border-radius:50%; background:radial-gradient(circle, rgba(123,104,238,.4), transparent 65%); top:-90px; right:-40px; }
.cb-ava { width:42px; height:42px; border-radius:14px; flex:none; display:grid; place-items:center; background:linear-gradient(135deg,var(--cbpk),var(--cbp)); color:#fff; font-weight:800; font-size:17px; box-shadow:0 8px 18px -6px rgba(253,113,175,.6); }
.cb-htxt { flex:1; min-width:0; position:relative; }
.cb-htxt b { display:block; font-size:15px; }
.cb-htxt span { display:flex; align-items:center; gap:6px; font-size:11.5px; color:#c8f5dd; font-weight:600; }
.cb-htxt .cb-live { width:7px; height:7px; border-radius:50%; background:#37e08b; box-shadow:0 0 0 3px rgba(55,224,139,.25); animation:cbBlink 2s ease infinite; }
@keyframes cbBlink { 50% { opacity:.45; } }
.cb-close { border:none; background:rgba(255,255,255,.1); color:#fff; width:32px; height:32px; border-radius:10px; cursor:pointer; display:grid; place-items:center; transition:background .2s ease; position:relative; }
.cb-close:hover { background:rgba(255,255,255,.2); }
.cb-close svg { width:15px; height:15px; }
/* messages */
.cb-body { flex:1; overflow-y:auto; padding:18px 16px 10px; background:linear-gradient(180deg,#fbfaff 0%,#f6f5fc 100%); scroll-behavior:smooth; }
.cb-body::-webkit-scrollbar { width:5px; }
.cb-body::-webkit-scrollbar-thumb { background:#d9d5f0; border-radius:99px; }
.cb-row { display:flex; gap:9px; margin-bottom:13px; animation:cbIn .3s ease both; }
.cb-row.me { flex-direction:row-reverse; }
@keyframes cbIn { from { opacity:0; transform:translateY(9px); } to { opacity:1; transform:none; } }
.cb-msg { max-width:78%; padding:11px 14px; border-radius:16px; font-size:13.8px; line-height:1.6; color:#23262f; white-space:pre-line; word-wrap:break-word; }
.cb-row.bot .cb-msg { background:#fff; border:1px solid #eceaf6; border-bottom-left-radius:5px; box-shadow:0 8px 20px -14px rgba(23,23,60,.28); }
.cb-row.me .cb-msg { background:linear-gradient(120deg,var(--cbp),#9a8bf3); color:#fff; border-bottom-right-radius:5px; box-shadow:0 10px 22px -12px rgba(123,104,238,.55); }
.cb-row.bot .cb-ava2 { width:30px; height:30px; border-radius:10px; flex:none; display:grid; place-items:center; background:linear-gradient(135deg,var(--cbpk),var(--cbp)); color:#fff; font-weight:800; font-size:12px; margin-top:2px; }
.cb-time { display:block; font-size:10px; color:#a5a1bd; margin-top:4px; font-weight:600; }
.cb-row.me .cb-time { color:rgba(255,255,255,.75); }
/* typing */
.cb-typing { display:inline-flex; gap:4px; padding:13px 15px; }
.cb-typing i { width:7px; height:7px; border-radius:50%; background:#b3aed6; animation:cbBounce 1.2s ease infinite; }
.cb-typing i:nth-child(2) { animation-delay:.15s; }
.cb-typing i:nth-child(3) { animation-delay:.3s; }
@keyframes cbBounce { 0%,60%,100% { transform:translateY(0); opacity:.5; } 30% { transform:translateY(-5px); opacity:1; } }
/* chips */
.cb-chips { display:flex; flex-wrap:wrap; gap:7px; padding:2px 16px 10px; background:#f6f5fc; }
.cb-chip { border:1.5px solid #ddd7f6; background:#fff; color:#6a56e8; font:inherit; font-size:12.5px; font-weight:700; padding:7px 13px; border-radius:99px; cursor:pointer; transition:all .2s ease; animation:cbIn .3s ease both; }
.cb-chip:hover { background:linear-gradient(90deg,var(--cbp),var(--cbpk)); color:#fff; border-color:transparent; transform:translateY(-1px); }
/* whatsapp CTA */
.cb-wa { display:flex; align-items:center; justify-content:center; gap:9px; margin:2px 16px 10px; padding:12px; border-radius:14px; background:linear-gradient(120deg,#128c5f,#25d366); color:#fff; font-weight:800; font-size:14px; text-decoration:none; box-shadow:0 12px 26px -12px rgba(37,211,102,.65); transition:transform .2s ease, filter .2s ease; animation:cbPop .4s cubic-bezier(.34,1.56,.64,1); }
.cb-wa:hover { transform:translateY(-2px); filter:brightness(1.05); }
.cb-wa svg { width:19px; height:19px; }
@keyframes cbPop { from { opacity:0; transform:scale(.8); } to { opacity:1; transform:scale(1); } }
/* input bar */
.cb-inputbar { display:flex; gap:9px; padding:12px; border-top:1px solid #eceaf6; background:#fff; align-items:flex-end; }
.cb-inputbar textarea { flex:1; resize:none; border:1.5px solid #e4e1f4; border-radius:13px; padding:10px 13px; font:inherit; font-size:13.5px; line-height:1.5; max-height:96px; outline:none; background:#fbfaff; transition:border-color .2s ease; }
.cb-inputbar textarea:focus { border-color:var(--cbp); background:#fff; }
.cb-send { width:44px; height:44px; flex:none; border:none; border-radius:13px; cursor:pointer; display:grid; place-items:center; background:linear-gradient(135deg,var(--cbp),var(--cbbl)); color:#fff; box-shadow:0 10px 20px -8px rgba(123,104,238,.6); transition:transform .2s ease, filter .2s ease; }
.cb-send:hover { transform:translateY(-2px) scale(1.04); }
.cb-send:disabled { opacity:.5; cursor:default; transform:none; }
.cb-send svg { width:18px; height:18px; }
.cb-note { text-align:center; font-size:10px; color:#a5a1bd; padding:0 12px 9px; background:#fff; font-weight:600; }
/* ---------- mobile ---------- */
@media (max-width:560px) {
  .cb-root { right:14px; bottom:14px; }
  .cb-panel { position:fixed; inset:0; width:100%; height:100%; max-width:none; max-height:none; border-radius:0; transform:translateY(24px); z-index:100000; }
  .cb-root.open .cb-panel { transform:none; }
  .cb-teaser { width:200px; bottom:70px; }
  .cb-launch { width:56px; height:56px; }
}
@media (prefers-reduced-motion:reduce) {
  .cb-launch, .cb-htxt .cb-live { animation:none; }
  .cb-panel, .cb-row, .cb-teaser { transition:none; animation:none; }
}

/* ---------- v2: message rating ---------- */
.cb-rate { display: none; align-items: center; gap: 8px; padding: 4px 14px 0; font-size: 11.5px; color: #8a87a3; }
.cb-rate span { margin-right: auto; }
.cb-rate button { background: #f4f3fb; border: 1px solid #e8e7f4; border-radius: 8px; width: 30px; height: 26px; cursor: pointer; font-size: 13px; line-height: 1; transition: transform .15s; }
.cb-rate button:hover { transform: scale(1.12); }