:root{
  --cwp-color: #2563eb;
}

#cwp-chat-root, #cwp-chat-root * { box-sizing: border-box; }

.cwp-bubble{
  position: fixed;
  bottom: 24px;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: var(--cwp-color);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0,0,0,.2);
  z-index: 99998;
  transition: transform .15s ease;
}
.cwp-bubble:hover{ transform: scale(1.06); }
.cwp-bubble.cwp-right{ right: 24px; }
.cwp-bubble.cwp-left{ left: 24px; }
.cwp-bubble svg{ width: 28px; height: 28px; fill: #fff; }
.cwp-bubble .cwp-pending-dot{
  position:absolute; top:-4px; right:-4px;
  width:16px;height:16px;border-radius:50%;
  background:#ef4444; border:2px solid #fff;
  display:none;
}
.cwp-bubble.cwp-has-pending .cwp-pending-dot{ display:block; }

.cwp-social-stack{
  position: fixed;
  bottom: 96px;
  display: flex; flex-direction: column; gap: 10px;
  z-index: 99997;
}
.cwp-social-stack.cwp-right{ right: 24px; align-items:flex-end; }
.cwp-social-stack.cwp-left{ left: 24px; align-items:flex-start; }
.cwp-social-btn{
  width: 46px; height: 46px; border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  color:#fff; text-decoration:none; font-size:18px;
  box-shadow: 0 4px 12px rgba(0,0,0,.18);
}

.cwp-window{
  position: fixed;
  bottom: 96px;
  width: 360px;
  max-height: 70vh;
  background:#fff;
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0,0,0,.25);
  display: none;
  flex-direction: column;
  overflow: hidden;
  z-index: 99999;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.cwp-window.cwp-open{ display:flex; }
.cwp-window.cwp-right{ right: 24px; }
.cwp-window.cwp-left{ left: 24px; }

.cwp-header{
  background: var(--cwp-color);
  color:#fff;
  padding: 16px;
  display:flex; align-items:center; justify-content:space-between;
}
.cwp-header h3{ margin:0; font-size:16px; }
.cwp-header .cwp-close{ cursor:pointer; opacity:.85; font-size:20px; line-height:1;}

.cwp-tabs{ display:flex; border-bottom:1px solid #eee; }
.cwp-tab{ flex:1; text-align:center; padding:10px; cursor:pointer; font-size:13px; color:#666; }
.cwp-tab.cwp-active{ color: var(--cwp-color); border-bottom:2px solid var(--cwp-color); font-weight:600; }

.cwp-body{ flex:1; overflow-y:auto; padding:14px; background:#f8f9fb; }

.cwp-msg{ max-width: 80%; margin-bottom:10px; padding:10px 14px; border-radius:14px; font-size:14px; line-height:1.4; word-wrap:break-word; }
.cwp-msg-visitor{ background: var(--cwp-color); color:#fff; margin-left:auto; border-bottom-right-radius:4px; }
.cwp-msg-agent, .cwp-msg-ai{ background:#fff; color:#222; border:1px solid #eee; margin-right:auto; border-bottom-left-radius:4px; }
.cwp-msg-ai .cwp-ai-tag{ display:block; font-size:10px; color:#999; margin-bottom:2px; text-transform:uppercase; }
.cwp-msg img{ max-width: 100%; border-radius: 8px; margin-top:4px; }

.cwp-faq-list .cwp-faq-q{
  background:#fff; border:1px solid #eee; border-radius:10px; padding:10px 12px; margin-bottom:8px; cursor:pointer; font-size:13px;
}
.cwp-faq-list .cwp-faq-q:hover{ border-color: var(--cwp-color); }

.cwp-footer{ padding: 10px; border-top: 1px solid #eee; display:flex; gap:8px; background:#fff; }
.cwp-footer input[type=text]{ flex:1; border:1px solid #ddd; border-radius: 20px; padding: 10px 14px; font-size: 13px; outline:none; }
.cwp-footer input[type=text]:focus{ border-color: var(--cwp-color); }
.cwp-footer button{ background: var(--cwp-color); border:none; color:#fff; border-radius: 50%; width:38px; height:38px; cursor:pointer; }
.cwp-footer label.cwp-attach{ display:flex; align-items:center; cursor:pointer; color:#888; }

.cwp-welcome-bubble{
  position: fixed;
  bottom: 96px;
  background:#fff;
  border-radius: 14px;
  padding: 12px 16px;
  box-shadow: 0 6px 24px rgba(0,0,0,.18);
  max-width: 240px;
  font-size: 13px;
  z-index: 99997;
}
.cwp-welcome-bubble.cwp-right{ right: 24px; }
.cwp-welcome-bubble.cwp-left{ left: 24px; }

.cwp-faq-shortcode .cwp-faq-item{ border:1px solid #eee; border-radius:8px; padding:10px 14px; margin-bottom:8px; }
.cwp-faq-shortcode summary{ cursor:pointer; font-weight:600; }

@media (max-width: 480px){
  .cwp-window{ width: 92vw; right: 4vw !important; left: 4vw !important; bottom: 84px; }
}