#ccai-root { position: fixed; bottom: 20px; z-index: 999999; }
#ccai-root.ccai-left { left: 20px; }
#ccai-root.ccai-right { right: 20px; }
.ccai-toggle { width: 64px; height: 64px; border-radius: 9999px; border: none; background: linear-gradient(135deg,#00a63f,#00c851); color:#fff; box-shadow:0 8px 24px rgba(0,166,63,.35); cursor:pointer; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.ccai-toggle img{width:100%;height:100%;object-fit:cover;}
.ccai-icon{font-size:26px;}
.ccai-window { position: absolute; bottom: 80px; width: var(--ccai-width,380px); height: var(--ccai-height,560px); background:#fff; border-radius:16px; box-shadow:0 24px 64px rgba(0,0,0,.18); border:1px solid rgba(0,166,63,.2); overflow:hidden; transform-origin: bottom left; }
#ccai-root.ccai-right .ccai-window{ right:0; }
#ccai-root.ccai-left .ccai-window{ left:0; }
.ccai-hidden{ opacity:0; visibility:hidden; transform: translateY(16px) scale(.95); transition:all .25s ease; }
.ccai-window:not(.ccai-hidden){ opacity:1; visibility:visible; transform: translateY(0) scale(1); }
.ccai-header{ background: linear-gradient(135deg,#00a63f,#00c851); padding:12px 16px; color:#fff; display:flex; align-items:center; justify-content:space-between; }
.ccai-close{ background:transparent;border:none;color:#fff;font-size:22px;cursor:pointer; }
.ccai-messages{ height: calc(var(--ccai-height,560px) - 120px); overflow:auto; background:#f8f9fa; padding:16px; }
.ccai-welcome{ background:#fff; border-radius:12px; padding:12px 14px; border:1px solid #eee; box-shadow:0 2px 6px rgba(0,0,0,.06); }
.ccai-suggestions{ display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.ccai-suggestion{ background: rgba(0,166,63,.1); border:1px solid rgba(0,166,63,.25); color:#007a2c; padding:8px 12px; border-radius:12px; cursor:pointer; }
.ccai-msg{ display:flex; margin-bottom:10px; gap:8px; }
.ccai-msg.bot .bubble{ background:#fff; border:1px solid #e6e6e6; }
.ccai-msg.user{ justify-content:flex-end; }
.ccai-msg.user .bubble{ background: linear-gradient(135deg,#00a63f,#00c851); color:#fff; }
.bubble{ max-width:80%; padding:10px 12px; border-radius:14px; box-shadow:0 2px 6px rgba(0,0,0,.08); }
.ccai-input{ display:flex; gap:8px; padding:10px; border-top:1px solid #eee; background:#fff; }
#ccai-input{ flex:1; border:2px solid #e6e6e6; border-radius:9999px; padding:12px 14px; outline:none; background:#f8f9fa; }
#ccai-input:focus{ border-color:#00a63f; background:#fff; }
#ccai-send{ width:46px;height:46px;border-radius:9999px;border:none;background:linear-gradient(135deg,#00a63f,#00c851);color:#fff;cursor:pointer; }
.ccai-typing{ display:flex; gap:4px; padding:10px 0; }
.ccai-typing span{ width:8px; height:8px; background:#00a63f; border-radius:50%; animation: ccai-dots 1.2s infinite ease-in-out; opacity:.6; }
.ccai-typing span:nth-child(2){ animation-delay:.2s; } .ccai-typing span:nth-child(3){ animation-delay:.4s; }
@keyframes ccai-dots{ 0%,60%,100%{ transform:translateY(0); opacity:.6;} 30%{ transform:translateY(-8px); opacity:1;} }
@media (max-width:480px){ .ccai-window{ width: calc(100vw - 30px); } }