/* Communication Engine — WooCommerce product-page chat button. */

.ce-wc-chat-wrap { margin: 14px 0; }
.ce-wc-chat-align-center { text-align: center; }
.ce-wc-chat-align-right { text-align: right; }

.ce-wc-chat-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #25D366;
    color: #fff;
    padding: 11px 18px;
    border-radius: 8px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    border: 0;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
    transition: filter .15s ease, transform .05s ease, box-shadow .15s ease;
    max-width: 100%;
}

.ce-wc-chat-btn:hover,
.ce-wc-chat-btn:focus { color: #fff; filter: brightness(.93); box-shadow: 0 3px 8px rgba(0, 0, 0, .18); }
.ce-wc-chat-btn:active { transform: translateY(1px); }
.ce-wc-chat-btn:focus-visible { outline: 2px solid rgba(0, 0, 0, .35); outline-offset: 2px; }

/* Spacing via margin (not flex `gap`) so it works even when a theme renders the button
   as a non-flex element. The gap value comes from a CSS var the Elementor control sets;
   the margin side follows the icon position (before = right of icon, after = left). */
.ce-wc-chat-btn .ce-wc-chat-ico { flex: 0 0 auto; display: inline-block; margin-right: var(--ce-wc-icon-gap, 8px); }
.ce-wc-chat-btn.ce-wc-icon-after .ce-wc-chat-ico { margin-right: 0; margin-left: var(--ce-wc-icon-gap, 8px); }
.ce-wc-chat-btn-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ce-wc-chat-note { display: block; margin-top: 6px; color: #b45309; font-size: 12px; }
.ce-wc-chat-edit-note { padding: 10px 12px; border: 1px dashed #cbd5e1; border-radius: 8px; color: #64748b; font-size: 13px; }

/* Toast shown after a logged-in user's background send. */
.ce-wc-chat-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%) translateY(20px);
    background: #1e293b;
    color: #fff;
    padding: 12px 18px;
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .28);
    z-index: 999999;
    max-width: 90vw;
    font-size: 14px;
    line-height: 1.4;
    opacity: 0;
    transition: opacity .25s ease, transform .25s ease;
}
.ce-wc-chat-toast.is-in { opacity: 1; transform: translateX(-50%) translateY(0); }
.ce-wc-chat-toast.is-ok { background: #15803d; }
.ce-wc-chat-toast.is-err { background: #b91c1c; }