/* Button */
.wpcp-btn { background:#0f172a; color:#fff; border:0; padding:10px 14px; border-radius:10px; cursor:pointer; font-weight:600; }
.wpcp-login a { color:#0f172a; text-decoration:underline; }

/* Floating chat */
.wpcp-box { 
    position:fixed; right:20px; bottom:55px; width:360px; max-width:calc(100vw - 40px); 
    background:#fff; border-radius:14px; box-shadow:0 12px 36px rgba(2,6,23,.18); 
    transform:translateY(12px); opacity:0; transition:all .18s ease; z-index:999999; overflow:hidden;
}
.wpcp-show { transform:translateY(0); opacity:1; }
.wpcp-header { 
    padding:12px 14px; display:flex; justify-content:space-between; align-items:center; 
    background:#f8fafc; color:#0f172a; border-bottom:1px solid #eef2f6; font-weight:700;
}
.wpcp-close { background:transparent; border:0; font-size:18px; cursor:pointer; opacity:.7; }
.wpcp-messages { height:320px; overflow-y:auto; padding:12px; background:#fbfdff; }
.wpcp-item { display:flex; margin:8px 0; }

/* Align messages */
.wpcp-item.wpcp-user { justify-content:flex-start; }
.wpcp-item.wpcp-admin { justify-content:flex-end; }

/* Message bubbles */
.wpcp-bubble { max-width:78%; padding:10px 12px; border-radius:12px; box-shadow:0 1px 0 rgba(0,0,0,.02); color:#000; white-space:pre-wrap; word-break:break-word; }
.wpcp-item.wpcp-user .wpcp-bubble { background:#e5e7eb; color:#000; }
.wpcp-item.wpcp-admin .wpcp-bubble { background:#3b82f6; color:#fff; } /* Admin messages highlighted blue */

/* Labels & time */
.wpcp-label { font-size:11px; font-weight:700; opacity:.7; margin-bottom:4px; }
.wpcp-text { font-size:14px; }
.wpcp-time { font-size:11px; opacity:.6; margin-top:3px; display:block; }

/* Input area */
.wpcp-input { display:flex; gap:8px; border-top:1px solid #eef2f6; padding:10px; background:#fff; }
#wpcp-input, .wpcp-input input { flex:1; padding:10px; border-radius:8px; border:1px solid #e6eef6; font-size:14px; }
.wpcp-send { background:#0f172a; color:#fff; border:0; padding:8px 12px; border-radius:8px; cursor:pointer; }

/* Admin badge in admin bar */
.wpcp-badge-inline { background:#ef4444; color:#fff; padding:2px 7px; border-radius:999px; font-size:12px; margin-left:6px; font-weight:700; }

/* Scrollbar (optional, nice touch) */
.wpcp-messages::-webkit-scrollbar { width:6px; }
.wpcp-messages::-webkit-scrollbar-thumb { background:#cbd5e1; border-radius:3px; }
.wpcp-messages::-webkit-scrollbar-track { background:#f8fafc; }