@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');
:root{ --primary: var(--chat-primary, #7c3aed); }
#chattable-root *{ font-family:'Inter',sans-serif; box-sizing:border-box; }
.ct-bubble{
  position:fixed; width:60px; height:60px; border-radius:50%;
  background:var(--primary); color:#fff; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 24px rgba(124,58,237,.35); z-index:9998;
  transition:.2s; bottom:24px; right:24px;
}
.ct-bubble:hover{ transform:scale(1.06); }
.ct-bubble svg{ width:28px; height:28px; }
.ct-window{
  position:fixed; width:380px; height:520px; background:#fff;
  border-radius:20px; box-shadow:0 20px 60px rgba(0,0,0,.18);
  display:flex; flex-direction:column; overflow:hidden;
  z-index:9998; bottom:100px; right:24px;
  transform:translateY(20px) scale(.98); opacity:0; pointer-events:none;
  transition:.3s cubic-bezier(.16,1,.3,1);
}
.ct-window.open{ transform:translateY(0) scale(1); opacity:1; pointer-events:auto; }
@media(max-width:480px){
  .ct-window{ width:100%; height:100%; bottom:0; right:0; border-radius:0; }
}
.ct-header{ background:var(--primary); color:#fff; padding:16px 18px; display:flex; align-items:center; justify-content:space-between; }
.ct-header-info{ display:flex; align-items:center; gap:12px; }
.ct-avatar{ width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.25); display:flex; align-items:center; justify-content:center; font-weight:600; }
.ct-status{ display:flex; align-items:center; gap:6px; font-size:12px; opacity:.9; }
.ct-dot{ width:8px; height:8px; background:#22c55e; border-radius:50%; box-shadow:0 0 0 3px rgba(34,197,94,.3); }
.ct-close{ background:rgba(255,255,255,.15); border:none; color:#fff; width:32px; height:32px; border-radius:50%; cursor:pointer; }
.ct-messages{ flex:1; overflow-y:auto; padding:18px; background:#f8f7ff; display:flex; flex-direction:column; gap:12px; }
.ct-msg{ max-width:78%; padding:12px 14px; border-radius:18px; font-size:14px; line-height:1.4; position:relative; animation:msgIn .25s ease; }
@keyframes msgIn{ from{ transform:translateY(6px); opacity:0; } to{ transform:none; opacity:1; } }
.ct-msg.customer{ align-self:flex-end; background:var(--primary); color:#fff; border-bottom-right-radius:6px; }
.ct-msg.agent{ align-self:flex-start; background:#fff; color:#111; border:1px solid #eee; border-bottom-left-radius:6px; box-shadow:0 2px 8px rgba(0,0,0,.04); }
.ct-msg-time{ font-size:10px; opacity:.6; margin-top:4px; }
.ct-input-area{ padding:14px; background:#fff; border-top:1px solid #f0f0f0; display:flex; gap:10px; align-items:center; }
.ct-input{ flex:1; border:1.5px solid #ece9ff; border-radius:24px; padding:12px 16px; font-size:14px; outline:none; transition:.2s; }
.ct-input:focus{ border-color:var(--primary); }
.ct-send{ width:44px; height:44px; border-radius:50%; background:var(--primary); color:#fff; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.ct-typing{ font-size:12px; color:#888; padding:0 18px 8px; }