:root{
  --cbw-accent:#6c5ce7;
  --cbw-accent-2:#8e79ff;
  --cbw-bg:#ffffff;
  --cbw-surface:#ffffff;
  --cbw-ink:#0b1220;
  --cbw-muted:#667085;
  --cbw-border:#e6e8f0;
  --cbw-shadow:0 12px 34px rgba(2,6,23,.12);
  --cbw-radius:20px;
  --cbw-radius-sm:12px;
  --cbw-font:'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji';
}

*{box-sizing:border-box}
.cbw-root, .cbw-panel, .cbw-launcher, .cbw-toast{font-family:var(--cbw-font); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}
.cbw-hidden{display:none!important}

/* micro-interactions */
@keyframes cbw-in{from{transform:translateY(6px); opacity:0} to{transform:translateY(0); opacity:1}}
@keyframes cbw-pop{0%{transform:scale(.96); opacity:.0} 100%{transform:scale(1); opacity:1}}
@keyframes cbw-slide-up{from{transform:translateY(14px); opacity:0} to{transform:translateY(0); opacity:1}}

/* launcher */
.cbw-launcher{position:fixed; right:24px; bottom:24px; width:62px; height:62px; border-radius:16px;
  background:linear-gradient(135deg,var(--cbw-accent),var(--cbw-accent-2));
  color:#fff; display:flex; align-items:center; justify-content:center; gap:8px;
  cursor:pointer; z-index:2147483000; border:0; box-shadow:var(--cbw-shadow); transition:transform .18s ease, box-shadow .18s ease; animation: cbw-pop .18s ease}
.cbw-launcher:hover{ transform: translateY(-2px); box-shadow:0 14px 40px rgba(108,92,231,.28) }
.cbw-launcher.left{ right:auto; left:24px }
.cbw-launcher .cbw-icon{ width:28px; height:28px }
.cbw-launcher .cbw-badge{position:absolute; top:-4px; right:-4px; background:#22c55e; width:12px; height:12px; border-radius:50%; border:2px solid #fff}

/* panel */
.cbw-panel{position:fixed; right:24px; bottom:92px; width:400px; max-height:76vh; background:var(--cbw-surface); color:var(--cbw-ink);
  border:1px solid var(--cbw-border); border-radius:var(--cbw-radius); overflow:hidden; display:flex; flex-direction:column; z-index:2147483000; animation: cbw-slide-up .2s ease}
.cbw-panel.left{ right:auto; left:24px }
.cbw-header{padding:14px 16px; background:linear-gradient(135deg,var(--cbw-accent),var(--cbw-accent-2)); color:#fff; display:flex; align-items:center; justify-content:space-between; position:relative}
.cbw-title{display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.2px}
.cbw-title .cbw-logo{width:24px;height:24px;border-radius:8px;background:#fff;color:var(--cbw-accent);display:flex;align-items:center;justify-content:center;font-weight:900}
.cbw-title .cbw-ai{font-size:11px;padding:2px 6px;border-radius:999px;background:rgba(255,255,255,.25)}
.cbw-actions{display:flex; align-items:center; gap:8px}
.cbw-action{all:unset; cursor:pointer; padding:6px 10px; border-radius:10px; background:rgba(255,255,255,.15); font-size:12px; color:#fff}
.cbw-close{all:unset; cursor:pointer; font-size:18px; opacity:.9; padding:0 6px}

.cbw-status{position:absolute; left:12px; top:12px; display:flex; align-items:center; gap:6px; font-size:11px}
.cbw-status i{width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.3)}
.cbw-online i{background:#22c55e}
.cbw-offline i{background:#f59e0b}

/* body & messages */
.cbw-body{padding:14px 14px 10px; display:flex; flex-direction:column; gap:14px; overflow-y:auto; overflow-x:hidden; background:var(--cbw-bg)}
.cbw-row{display:flex; gap:10px; align-items:flex-end; animation: cbw-in .18s ease}
.cbw-avatar{width:30px;height:30px;border-radius:50%;background:#eef2ff;flex:0 0 auto;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:#475569; border:1px solid #e2e8f0}
.cbw-row.user{flex-direction:row-reverse}
.cbw-msg{max-width:78%; padding:11px 13px; border-radius:16px; white-space:pre-wrap; position:relative; line-height:1.45}
.cbw-row.user .cbw-msg{ background:#eef2ff; border:1px solid #e2e8f0 }
.cbw-row.bot .cbw-msg{ background:#f8fafc; border:1px solid #edf2f7 }
.cbw-msg strong, .cbw-card-title{font-weight:800}
.cbw-time{display:block; color:#8a94a4; margin-top:5px; font-size:11px}

/* quick replies */
.cbw-quick{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
.cbw-quick.onecol{grid-template-columns:1fr}
.cbw-quick button{all:unset; display:block; width:100%; text-align:center; padding:12px 12px; border-radius:999px; 
  border:1px solid var(--cbw-border); cursor:pointer; font-weight:700; color:#0f172a; background:#fff; box-shadow:0 1px 0 rgba(0,0,0,.02); letter-spacing:.15px}
.cbw-quick button:hover{background:#f1f5f9}
.cbw-quick button:active{transform:translateY(1px)}

/* composer */
.cbw-composer{position:relative; display:flex; align-items:center; gap:10px; padding:12px; border-top:1px solid var(--cbw-border); background:var(--cbw-surface)}
.cbw-composer input{flex:1; padding:12px 14px; border:1px solid var(--cbw-border); border-radius:12px; outline:none; min-height:46px; background:#fff; color:#0b1220; font-size:14px}
.cbw-composer input::placeholder{color:#9aa4b2}
.cbw-composer button{flex:0 0 auto; min-width:92px; height:46px; border-radius:12px; border:0; background:linear-gradient(135deg,var(--cbw-accent),var(--cbw-accent-2)); color:#fff; font-weight:800; cursor:pointer; letter-spacing:.2px}

/* suggestions */
.cbw-suggest{position:absolute; left:12px; right:12px; bottom:72px; background:#fff; border:1px solid var(--cbw-border); border-radius:14px; box-shadow:var(--cbw-shadow); max-height:280px; overflow:auto; z-index:2147483001}
.cbw-suggest header{display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-bottom:1px solid var(--cbw-border)}
.cbw-suggest header span{font-weight:800; font-size:12px; color:#64748b; letter-spacing:.03em}
.cbw-suggest header button{all:unset; cursor:pointer; padding:2px 6px; font-size:18px; opacity:.7}
.cbw-suggest ul{list-style:none; margin:0; padding:6px}
.cbw-suggest li{padding:12px 12px; border-radius:10px; cursor:pointer; border-bottom:1px solid #f1f5f9; font-weight:600; letter-spacing:.15px}
.cbw-suggest li:last-child{border-bottom:0}
.cbw-suggest li:hover{background:#f6f9ff}

/* cards + carousel */
.cbw-card{ width:100%; max-width:100%; border:1px solid var(--cbw-border); background:#fff; border-radius:16px; box-shadow:var(--cbw-shadow); overflow:hidden }
.cbw-card img{width:100%; height:auto; display:block}
.cbw-card .cbw-card-body{padding:14px 16px}
.cbw-card .cbw-card-title{font-weight:900; font-size:17px; margin-bottom:6px; letter-spacing:.2px}
.cbw-carousel{position:relative; display:flex; flex-direction:column; gap:8px}
.cbw-carousel .cbw-arrows{position:absolute; inset:0; pointer-events:none}
.cbw-carousel .cbw-arrow{ position:absolute; top:42%; width:36px; height:36px; border-radius:50%; background:var(--cbw-accent); color:#fff; border:0; box-shadow:var(--cbw-shadow); pointer-events:auto; cursor:pointer; display:flex; align-items:center; justify-content:center; font-weight:900 }
.cbw-carousel .cbw-arrow.prev{left:-10px}
.cbw-carousel .cbw-arrow.next{right:-10px}
.cbw-dots{display:flex; gap:6px; justify-content:center; padding-bottom:8px}
.cbw-dots span{width:6px; height:6px; border-radius:50%; background:#cbd5e1}
.cbw-dots span.active{background:#64748b}

/* toast */
.cbw-toast{position:fixed; bottom:16px; left:0; right:0; margin:auto; width:max-content; max-width:90vw; background:#111827; color:#fff; padding:10px 14px; border-radius:12px; z-index:2147483002; transform:translateY(30px); opacity:0; transition:all .2s ease}
.cbw-toast.show{transform:translateY(0); opacity:1}

/* scrollbars (webkit) */
.cbw-body::-webkit-scrollbar{width:10px}
.cbw-body::-webkit-scrollbar-thumb{background:#e5e7eb; border-radius:8px}

/* mobile */
@media (max-width: 600px){
  .cbw-panel{ right:12px; left:12px; bottom:96px; width:auto; max-height:78vh }
  .cbw-launcher{ right:12px; bottom:12px }
  .cbw-launcher.left{ left:12px }
}