/*
 * VE Chat Widget — conversation-style scoped styles.
 *
 * All selectors namespaced under `.ve-cw-*` so the widget cannot leak
 * styles into the host theme and the theme cannot leak in.
 *
 * Palette (matches villaexperience.com theme, NOT the original spec):
 *   --ve-cw-cream:     #f9e9e0  (panel header bg — matches site's hotline bar)
 *   --ve-cw-navy:      #1a2142  (text, brand navy — real site value, was #1e2a2e in rev-1 spec)
 *   --ve-cw-copper:    #cfa190  (primary CTA, sent-bubble bg, button)
 *   --ve-cw-white:     #ffffff  (panel bg)
 *   --ve-cw-bubble:    #f1f5f9  (received-bubble bg)
 *   --ve-cw-line:      #e5e7eb  (hairline borders, dividers)
 *
 * z-index: button 999, panel 1000, ve-cw-hidden everywhere.
 */

/* ── P1 brand tokens (v0.8) ──────────────────────────────────────────
 * The luxury-concierge palette. New component CSS references these
 * vars (no inline hex). --ve-font-serif matches villaexperience.com's
 * headline face (Cormorant Garamond, confirmed from the homepage CSS;
 * the widget is injected into the site where that font is loaded —
 * Georgia is the graceful fallback). */
:root {
    --ve-copper:        #cfa190;
    --ve-copper-dark:   #b88876;
    --ve-copper-tint:   #f5efe9;
    --ve-ivory:         #fbf8f4;
    --ve-ink:           #1e2a2e;
    --ve-warm-gray:     #7a716a;
    --ve-warm-gray-12:  rgba(122, 113, 106, 0.12);
    --ve-warm-gray-8:   rgba(122, 113, 106, 0.08);
    --ve-status-online: #10b981;
    --ve-font-serif:    'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --ve-font-sans:     'Montserrat', system-ui, sans-serif;
    /* P1.3 — multi-layer launcher shadow (token so the button rule
     * carries no inline hex). */
    --ve-shadow-launcher:
        0 1px 2px rgba(30, 42, 46, 0.04),
        0 4px 12px rgba(30, 42, 46, 0.08),
        0 12px 32px rgba(207, 161, 144, 0.22);
}

.ve-cw {
    --ve-cw-cream:         #f9e9e0;
    --ve-cw-cream-line:    #ead8cd;
    --ve-cw-copper:        #cfa190;
    --ve-cw-copper-hover:  #d8b09f;
    --ve-cw-navy:          #1a2142;
    --ve-cw-navy-soft:     #3a4368;
    --ve-cw-white:         #ffffff;
    --ve-cw-bubble:        #faf3ed;  /* warm ivory — replaces slate #f1f5f9 */
    --ve-cw-line:          #ecdfd4;  /* warmed-up hairline to match bubble */
    --ve-cw-muted:         #807a85;
    --ve-cw-error:         #b14a3a;
    --ve-cw-shadow:        0 8px 28px rgba(26, 33, 66, 0.20);

    font-family: 'Montserrat', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--ve-cw-navy);
    font-size: 14px;
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
}

.ve-cw *,
.ve-cw *::before,
.ve-cw *::after {
    box-sizing: border-box;
}

.ve-cw-hidden { display: none !important; }
.ve-cw-sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ───────────────────────────────────────────────────────────────────────
 * Floating button (bottom-right, fixed 24px from the viewport edges)
 * ─────────────────────────────────────────────────────────────────────── */

/* ───────────────────────────────────────────────────────────────────────
 * M2.1 (v0.7.0) — rotating + pulsing launcher + choice menu
 * ───────────────────────────────────────────────────────────────────────
 *
 * One button, tap opens a choice menu. Three icons inside the button
 * (bubble / phone / form) stack in the same slot; JS gives exactly
 * one the .ve-cw-icon-active class every 2500ms and they cross-fade
 * on a 400ms opacity transition. The existing X-icon takes over while
 * .is-open is set (panel open), regardless of which icon is active.
 */

/* The three launcher icons stack in the same slot. Only the one
 * carrying .ve-cw-icon-active (set by JS every 2500ms) is visible;
 * swaps cross-fade on a 400ms opacity transition. */
.ve-cw-button .ve-cw-icon-bubble,
.ve-cw-button .ve-cw-icon-phone,
.ve-cw-button .ve-cw-icon-form {
    display: flex; align-items: center; justify-content: center;
    position: absolute; inset: 0;
    transition: opacity 0.4s ease;
    opacity: 0;
    pointer-events: none;
}

/* Active icon visible (bubble on load, then phone, then form). */
.ve-cw-button .ve-cw-icon-active {
    opacity: 1;
}

/* When panel is open, all rotating icons hide; the existing X-icon
 * shows (its rules live below in the legacy block, reused). */
.ve-cw.is-open .ve-cw-button .ve-cw-icon-bubble,
.ve-cw.is-open .ve-cw-button .ve-cw-icon-phone,
.ve-cw.is-open .ve-cw-button .ve-cw-icon-form {
    opacity: 0;
    transform: rotateY(90deg);
}

/* When the choice menu is open, briefly freeze rotation at "bubble"
 * (set by JS) — the button is no longer "asking for attention", it's
 * waiting for a choice. */

/* ─── Choice menu — slides up from the button on tap ──────────────── */
.ve-cw-choice-menu {
    position: fixed;
    bottom: 100px;
    right: 24px;
    z-index: 1001;
    background: var(--ve-cw-white);
    border-radius: 16px;
    /* Deeper drop shadow than the panel — gives the menu lift */
    box-shadow: 0 12px 32px rgba(26, 33, 66, 0.18),
                0 4px 12px  rgba(26, 33, 66, 0.10);
    padding: 8px;
    min-width: 240px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    opacity: 0;
    /* Per quality-pass spec: translateY 8px → 0, opacity 0 → 1, 200ms ease-out */
    transform: translateY(8px);
    transform-origin: bottom right;
    transition: opacity 0.2s ease-out, transform 0.2s ease-out;
    pointer-events: none;
}
.ve-cw.is-choice-open .ve-cw-choice-menu {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.ve-cw-choice-item {
    background: transparent;
    border: none;
    color: var(--ve-cw-navy);
    /* Per spec: 44px tall */
    min-height: 44px;
    padding: 0 14px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    font: 500 14px/1.2 'Montserrat', system-ui, -apple-system, sans-serif;
    text-align: left;
    transition: background-color 0.14s ease;
}
.ve-cw-choice-item:hover,
.ve-cw-choice-item:focus-visible {
    /* Copper at 8% opacity per the spec */
    background: rgba(207, 161, 144, 0.08);
    outline: none;
}
.ve-cw-choice-icon {
    display: flex; align-items: center; justify-content: center;
    width: 28px; height: 28px;
    flex-shrink: 0;
    /* Copper icon color per the spec — no circular background */
    color: var(--ve-cw-copper);
}
.ve-cw-choice-icon svg {
    width: 20px; height: 20px;
    stroke: currentColor;
}
.ve-cw-choice-label { flex: 1; }

@media (max-width: 768px) {
    .ve-cw-choice-menu { bottom: 88px; right: 16px; }
    /* When panel is full-screen on mobile, hide choice menu */
    .ve-cw.is-open .ve-cw-choice-menu { opacity: 0; pointer-events: none; }
}

/* ── P1.1.2 — launcher hub + proactive greeting bubble.
 * The radar rings (P1.1/P1.1.1) were reverted: a sonar/tech metaphor
 * doesn't fit a luxury-concierge brand. The .ve-cw-launcher wrapper is
 * KEPT as the positioning hub for the button + the greeting bubble.
 * The ve-cw-pulse on .ve-cw-button is untouched. */
.ve-cw-launcher {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 64px;
    height: 64px;
    z-index: 99999;
    pointer-events: none;
}
.ve-cw-launcher .ve-cw-button {
    position: relative;
    bottom: 0;
    right: 0;
    pointer-events: auto;
}

/* Proactive operator greeting bubble — floats left of the launcher,
 * fades in after a delay, click opens chat, × dismisses for the session. */
.ve-cw-greeting-bubble {
    position: absolute;
    bottom: 0;
    right: 76px; /* 56px button + 20px gap */
    width: 280px;
    background: #ffffff;
    border-radius: 16px;
    padding: 14px 16px;
    padding-right: 32px; /* room for close button */
    display: flex;
    align-items: flex-start;
    gap: 12px;
    box-shadow:
        0 1px 2px rgba(30, 42, 46, 0.04),
        0 4px 12px rgba(30, 42, 46, 0.06),
        0 12px 32px rgba(207, 161, 144, 0.18);
    opacity: 0;
    transform: translateX(8px);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
    pointer-events: none;
    cursor: pointer;
    font-family: var(--ve-font-sans, system-ui, sans-serif);
}
.ve-cw-greeting-bubble[data-state="visible"] {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}
.ve-cw-greeting-photo {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    background: #cfa190;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ve-cw-greeting-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ve-cw-greeting-initials {
    color: #ffffff;
    font-weight: 500;
    font-size: 16px;
    display: none; /* shown by onerror fallback only */
    align-items: center;
    justify-content: center;
}
.ve-cw-greeting-content {
    flex: 1;
    min-width: 0;
}
.ve-cw-greeting-name {
    font-size: 14px;
    font-weight: 600;
    color: #1e2a2e;
    line-height: 1.2;
}
.ve-cw-greeting-role {
    font-size: 12px;
    color: #7a716a;
    margin-top: 1px;
    margin-bottom: 6px;
}
.ve-cw-greeting-message {
    font-size: 13px;
    color: #1e2a2e;
    line-height: 1.4;
}
.ve-cw-greeting-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: #7a716a;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
}
.ve-cw-greeting-close:hover {
    background: rgba(122, 113, 106, 0.08);
    color: #1e2a2e;
}
/* Hide bubble when chat / choice menu is open */
.ve-cw.is-open .ve-cw-greeting-bubble,
.ve-cw.is-choice-open .ve-cw-greeting-bubble {
    opacity: 0;
    pointer-events: none;
}
/* Mobile: stack above launcher, near-full width */
@media (max-width: 768px) {
    .ve-cw-greeting-bubble {
        bottom: 76px; /* above launcher */
        right: 0;
        width: calc(100vw - 32px);
        max-width: 320px;
    }
}

.ve-cw-button {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: none;
    background-color: var(--ve-cw-copper);
    color: var(--ve-cw-navy);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--ve-shadow-launcher);
    z-index: 999;
    /* transition handles hover-state colour changes only — the
     * continuous scale animation is owned by @keyframes (see below). */
    transition: background-color 0.15s ease;
    padding: 0;
    /* transform-origin centres the breathing scale so the button
     * pulses out from its visual centre, not from a corner. */
    transform-origin: center center;
    will-change: transform;
}

.ve-cw-button:hover,
.ve-cw-button:focus-visible {
    background-color: var(--ve-cw-copper-hover);
    outline: none;
}

.ve-cw-button:focus-visible {
    box-shadow: var(--ve-shadow-launcher), 0 0 0 3px rgba(30, 42, 46, 0.4);
}

.ve-cw-button:active { transform: scale(0.96); }

.ve-cw-button svg { width: 28px; height: 28px; pointer-events: none; }

/* X-icon swap — only the X. The bubble/phone/form icons are handled
 * by the rotation rules above (.ve-cw-icon-active). X stays hidden by
 * default; appears with a rotate-in when .is-open is set on the
 * .ve-cw container (panel open). */
.ve-cw-button .ve-cw-icon-x {
    display: flex; align-items: center; justify-content: center;
    position: absolute; inset: 0;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                opacity   0.4s cubic-bezier(0.16, 1, 0.3, 1);
    transform-origin: center center;
    transform: rotate(-90deg);
    opacity: 0;
}
.ve-cw.is-open .ve-cw-button .ve-cw-icon-x { transform: rotate(0deg); opacity: 1; }

/* M2.1 (v0.7.0) — hover-triggered launcher pulse. The closed button
 * reads as static by default and only breathes on hover/focus to
 * invite a click. JS owns the matching icon-rotation on hover
 * (mouseenter starts the interval, mouseleave stops it). */
@keyframes ve-cw-pulse {
    0%, 100% { transform: scale(1);    opacity: 1;    }
    50%      { transform: scale(1.05); opacity: 0.95; }
}

.ve-cw-button {
    /* static by default — pulse only on hover */
}

.ve-cw-button:hover,
.ve-cw-button:focus-visible {
    animation: ve-cw-pulse 1.5s ease-in-out infinite;
}

/* Panel open / widget hidden — no ambient motion. */
.ve-cw.is-open .ve-cw-button,
.ve-cw-hidden .ve-cw-button {
    animation: none;
}

@media (prefers-reduced-motion: reduce) {
    .ve-cw-button { animation: none; }
}

/* First-visit tooltip — sits ABOVE the bottom-right button. The
 * diamond tail points down toward the button. */
.ve-cw-first-tooltip {
    position: fixed;
    bottom: 100px;
    right: 24px;
    z-index: 999;
    background: var(--ve-cw-navy);
    color: var(--ve-cw-white);
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 13px;
    box-shadow: var(--ve-cw-shadow);
    max-width: 240px;
    opacity: 0;
    /* Tooltip lives ABOVE the bottom-right button; start slightly below
     * (translateY +6) so the fade-in reads as a small upward nudge,
     * matching the panel's upward open direction. */
    transform: translateY(6px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
}
.ve-cw-first-tooltip::after {
    /* Diamond tail sits at the BOTTOM of the tooltip and points DOWN
     * toward the bottom-right button. */
    content: ''; position: absolute; right: 20px; bottom: -6px; top: auto;
    width: 12px; height: 12px; background: var(--ve-cw-navy);
    transform: rotate(45deg);
}
.ve-cw.is-first-visit .ve-cw-first-tooltip {
    opacity: 1; transform: translateY(0);
}

/* Notification badge (red dot at top-right of button) */
.ve-cw-badge {
    position: absolute;
    top: 4px; right: 4px;
    width: 14px; height: 14px;
    background: var(--ve-cw-error);
    border-radius: 50%;
    border: 2px solid var(--ve-cw-white);
    display: none;
}
.ve-cw.has-unread .ve-cw-badge { display: block; }
.ve-cw.is-open .ve-cw-badge { display: none; }

@media (max-width: 768px) {
    .ve-cw-launcher { bottom: 16px; right: 16px; width: 56px; height: 56px; }
    .ve-cw-button { width: 56px; height: 56px; }
    .ve-cw-button svg { width: 24px; height: 24px; }
    .ve-cw-first-tooltip { bottom: 80px; right: 16px; max-width: 200px; }
}

/* ───────────────────────────────────────────────────────────────────────
 * Chat panel — 380×500 desktop, full-screen mobile
 * ─────────────────────────────────────────────────────────────────────── */

.ve-cw-panel {
    position: fixed;
    /* Bottom-anchored: panel floats UPWARD from the button. With the
     * button at bottom: 24px + 64px height = top edge at 88px from the
     * viewport bottom, anchoring the panel at bottom: 100px leaves a
     * 12px breathing gap between them on desktop. */
    bottom: 100px;
    right: 24px;
    top: auto;
    width: 380px;
    height: 500px;
    /* Max-height keeps the panel from running off the top of the
     * viewport on short windows. 100vh - panel-bottom (100) -
     * top-margin (24) - safe-area = 100vh - ~144px. */
    max-height: calc(100vh - 144px);
    background-color: var(--ve-cw-white);
    border-radius: 16px;
    box-shadow: var(--ve-cw-shadow);
    z-index: 1000;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    opacity: 0;
    /* Closed state lives BELOW its anchor (translateY +20). When
     * `.is-open` is added, the rule below pulls it to translateY(0) —
     * visually the panel slides UPWARD into view. When `.is-open` is
     * removed, the panel slides back DOWN to translateY(+20). */
    transform: translateY(20px) scale(0.97);
    /* Asymmetric timing — close fast (0.14 s), open slow (set by .is-open
     * rule below at 0.25 s). Material Design pattern: opening introduces
     * new content (deserves time to read); closing dismisses (should feel
     * responsive). */
    transition: opacity 0.14s ease, transform 0.14s ease;
    pointer-events: none;
}

.ve-cw.is-open .ve-cw-panel {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
    /* Material deceleration curve — fast start, soft landing. */
    transition: opacity 0.25s cubic-bezier(0, 0, 0.2, 1),
                transform 0.25s cubic-bezier(0, 0, 0.2, 1);
}

/* Header — cream bg + navy text, matches the site's hotline bar */

.ve-cw-panel-header {
    background-color: var(--ve-cw-cream);
    color: var(--ve-cw-navy);
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    border-bottom: 1px solid var(--ve-cw-cream-line);
}

.ve-cw-panel-header-text {
    flex: 1;
    min-width: 0;
}

.ve-cw-panel-title {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.1px;
    line-height: 1.2;
    color: var(--ve-cw-navy);
}

.ve-cw-panel-subtitle {
    margin: 3px 0 0;
    font-size: 11.5px;
    color: var(--ve-cw-navy-soft);
    line-height: 1.2;
}

.ve-cw-panel-header-actions {
    display: flex;
    gap: 2px;
}

.ve-cw-panel-action-btn {
    background: none;
    border: none;
    color: var(--ve-cw-navy);
    cursor: pointer;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    padding: 0;
}

.ve-cw-panel-action-btn:hover,
.ve-cw-panel-action-btn:focus-visible {
    background-color: rgba(26, 33, 66, 0.08);
    outline: none;
}

.ve-cw-panel-action-btn svg { width: 18px; height: 18px; }

/* Logo: kept as a class for backwards-compat / shortcode embedders.
   No usages in M1 — the operator avatar replaces it in the panel header. */
.ve-cw-logo {
    height: 32px;
    width: auto;
    flex-shrink: 0;
    display: block;
}

/* Operator block — M1 (002-live-chat). Round photo or initials chip,
   sits in the header where the brand logo used to be. The presence
   dot is rendered server-side (placeholder for M2's real-time
   online/offline indicator — for now it just reads as "available"). */

.ve-cw-operator {
    position: relative;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
}

.ve-cw-operator-avatar {
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--ve-cw-bubble);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border: 1.5px solid var(--ve-cw-cream-line);
    box-sizing: border-box;
}

.ve-cw-operator-avatar--initials {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--ve-cw-navy);
    letter-spacing: 0.3px;
    background-color: var(--ve-cw-copper);
    color: var(--ve-cw-white);
    border-color: var(--ve-cw-copper);
}

/* Presence indicator — green dot tucked into the bottom-right of the
   avatar. M1 always shows it as "available" (no real-time signal
   yet). M2 will flip it red/grey when the matched operator's session
   is offline. */
.ve-cw-operator-presence {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background-color: #2ec27e;       /* warm green */
    border: 2px solid var(--ve-cw-cream);
    box-sizing: border-box;
}

/* Chat thread */

.ve-cw-thread {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px 16px 12px;
    background: var(--ve-cw-white);
    display: flex;
    flex-direction: column;
    gap: 10px;
    scroll-behavior: smooth;
}

/* Message bubbles */

.ve-cw-msg {
    max-width: 86%;
    display: flex;
    flex-direction: column;
    gap: 2px;
    animation: ve-cw-msg-in 0.22s ease;
}

@keyframes ve-cw-msg-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.ve-cw-msg-bubble {
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 14px;
    line-height: 1.4;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

.ve-cw-msg-meta {
    font-size: 11px;
    color: var(--ve-cw-muted);
    padding: 0 4px;
}

/* Greeting role label — small caps copper line ABOVE the first received
 * bubble so visitors immediately know they're talking to a real person. */
.ve-cw-msg-role {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--ve-cw-copper);
    padding: 0 6px 2px;
    line-height: 1.2;
}

/* received (left) */

.ve-cw-msg.is-received { align-self: flex-start; }
.ve-cw-msg.is-received .ve-cw-msg-bubble {
    background: var(--ve-cw-bubble);
    color: var(--ve-cw-navy);
    border-bottom-left-radius: 4px;
}

/* sent (right) */

.ve-cw-msg.is-sent { align-self: flex-end; }
.ve-cw-msg.is-sent .ve-cw-msg-bubble {
    background: var(--ve-cw-copper);
    color: var(--ve-cw-navy);
    border-bottom-right-radius: 4px;
}
.ve-cw-msg.is-sent .ve-cw-msg-meta { text-align: right; }

/* emoji reaction pills + picker */
.ve-cw-reactions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
    padding: 0 2px;
}
.ve-cw-reaction-pill {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px 6px;
    border-radius: 999px;
    border: 1px solid #e5e5e5;
    background: #f5f5f5;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.15s;
}
.ve-cw-reaction-pill:hover { background: #ece0d9; }
.ve-cw-reaction-pill.is-mine {
    background: rgba(207,161,144,0.18);
    border-color: rgba(207,161,144,0.45);
}
.ve-cw-reaction-count { font-size: 10px; font-weight: 600; color: #666; }
.ve-cw-reaction-picker {
    position: absolute;
    bottom: 100%;
    left: 0;
    margin-bottom: 4px;
    display: flex;
    gap: 2px;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 999px;
    padding: 3px 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    z-index: 20;
}
.ve-cw-reaction-pick-btn {
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    border: none; background: none;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.15s;
}
.ve-cw-reaction-pick-btn:hover { background: rgba(207,161,144,0.15); }

/* typing indicator bubble */

.ve-cw-typing {
    align-self: flex-start;
    background: var(--ve-cw-bubble);
    border-radius: 14px;
    border-bottom-left-radius: 4px;
    padding: 12px 16px;
    display: inline-flex;
    gap: 4px;
}
.ve-cw-typing span {
    width: 6px; height: 6px;
    background: var(--ve-cw-copper, #cfa190);
    border-radius: 50%;
    animation: ve-cw-typing-bounce 1.2s infinite ease-in-out;
}
.ve-cw-typing span:nth-child(2) { animation-delay: 0.18s; }
.ve-cw-typing span:nth-child(3) { animation-delay: 0.36s; }

@keyframes ve-cw-typing-bounce {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.45; }
    30% { transform: translateY(-4px); opacity: 1; }
}

/* M5 — Spec-compliant alias classes for the typing indicator.
 * The internal widget JS uses .ve-cw-typing (above); external tests
 * and any future imports of this stylesheet may reference the
 * canonical .ve-cw-typing-indicator / .ve-cw-typing-dot pair. */
.ve-cw-typing-indicator {
    align-self: flex-start;
    background: var(--ve-cw-bubble);
    border-radius: 14px;
    border-bottom-left-radius: 4px;
    padding: 12px 16px;
    display: inline-flex;
    gap: 4px;
}
.ve-cw-typing-dot {
    width: 6px; height: 6px;
    background: var(--ve-cw-copper, #cfa190);
    border-radius: 50%;
    animation: ve-cw-typing-bounce 1.2s infinite ease-in-out;
}
.ve-cw-typing-dot:nth-child(2) { animation-delay: 0.18s; }
.ve-cw-typing-dot:nth-child(3) { animation-delay: 0.36s; }

/* M2 (002-live-chat): system/notice messages — centred, smaller, no
 * bubble background. Used for "Operator joined", session closure, etc. */
.ve-cw-system-msg {
    align-self: center;
    font-size: 11.5px;
    color: var(--ve-cw-muted);
    padding: 4px 10px;
    background: transparent;
    text-align: center;
    max-width: 80%;
}

/* Chat-bubble options (the welcome quick replies) */

.ve-cw-options {
    align-self: flex-end;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
    max-width: 86%;
}

.ve-cw-option {
    background: var(--ve-cw-white);
    border: 1px solid var(--ve-cw-cream-line);
    color: var(--ve-cw-navy);
    padding: 12px 16px;
    border-radius: 14px;
    border-bottom-right-radius: 4px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.1px;
    text-align: left;
    cursor: pointer;
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 12px;
    /* Material deceleration on box-shadow — borrowed from Bitrix's
     * social-item:hover transition. Fast start (0 — quick lift) and
     * soft landing (0.2, 1 — long settle). 0.17 s feels instant but
     * not abrupt. */
    transition: background 0.15s ease,
                border-color 0.15s ease,
                transform 0.1s ease,
                box-shadow 0.17s cubic-bezier(0, 0, 0.2, 1);
    box-shadow: 0 1px 0 rgba(26, 33, 66, 0.04);
}

.ve-cw-option:hover,
.ve-cw-option:focus-visible {
    background: var(--ve-cw-cream);
    border-color: var(--ve-cw-copper);
    /* Hover lift — two-stop shadow gives a soft inner glow + a deeper
     * drop, makes the option feel like it rises off the surface. */
    box-shadow: 0 0 6px rgba(26, 33, 66, 0.16),
                0 6px 12px rgba(26, 33, 66, 0.20);
    outline: none;
}
.ve-cw-option:active { transform: scale(0.98); }

.ve-cw-option-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    flex-shrink: 0;
    color: var(--ve-cw-copper);
    background: var(--ve-cw-cream);
    border-radius: 50%;
}
.ve-cw-option-icon svg { width: 16px; height: 16px; display: block; }

/* WhatsApp brand option: tint the circle the brand green so the
 * icon reads as a recognised WhatsApp affordance. */
.ve-cw-option-icon.is-whatsapp-brand {
    background: rgba(37, 211, 102, 0.14);
}
.ve-cw-option-icon.is-whatsapp-brand svg { width: 18px; height: 18px; }

.ve-cw-option-label {
    flex: 1;
    min-width: 0;
}

/* Inline forms inside the chat thread */

.ve-cw-form {
    align-self: stretch;
    background: var(--ve-cw-bubble);
    border-radius: 14px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 4px;
}

.ve-cw-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ve-cw-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--ve-cw-navy);
}

.ve-cw-required-marker { color: var(--ve-cw-copper); }

.ve-cw-input,
.ve-cw-textarea {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid var(--ve-cw-line);
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
    color: var(--ve-cw-navy);
    background-color: var(--ve-cw-white);
    -webkit-appearance: none;
    appearance: none;
}

.ve-cw-textarea { resize: vertical; min-height: 64px; }

.ve-cw-input:focus,
.ve-cw-textarea:focus {
    outline: none;
    border-color: var(--ve-cw-copper);
    box-shadow: 0 0 0 3px rgba(207, 161, 144, 0.25);
}

.ve-cw-input.is-error,
.ve-cw-textarea.is-error { border-color: var(--ve-cw-error); }

.ve-cw-field-error {
    display: none;
    color: var(--ve-cw-error);
    font-size: 11px;
}
.ve-cw-field-error.is-shown { display: block; }

/* Radio group (callback window) */

.ve-cw-radio-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ve-cw-radio-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 11px;
    background: var(--ve-cw-white);
    border: 1px solid var(--ve-cw-line);
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    min-height: 36px;
}

.ve-cw-radio-option:hover { background: rgba(207, 161, 144, 0.06); }
.ve-cw-radio-option input[type="radio"] { accent-color: var(--ve-cw-copper); margin: 0; }
.ve-cw-radio-option input[type="radio"]:checked + span { font-weight: 600; }

/* Two-column form layout (check-in / check-out) */

.ve-cw-field-row {
    display: flex;
    gap: 8px;
}
.ve-cw-field-row > .ve-cw-field {
    flex: 1;
    min-width: 0;
}

/* Primary CTA */

.ve-cw-btn-primary {
    width: 100%;
    background-color: var(--ve-cw-copper);
    color: var(--ve-cw-navy);
    border: none;
    border-radius: 10px;
    padding: 11px 14px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    min-height: 44px;
    transition: background-color 0.15s ease;
}

.ve-cw-btn-primary:hover,
.ve-cw-btn-primary:focus-visible {
    background-color: var(--ve-cw-copper-hover);
    outline: none;
}

.ve-cw-btn-primary[disabled] { opacity: 0.6; cursor: wait; }

.ve-cw-btn-link {
    background: none;
    border: none;
    color: var(--ve-cw-copper);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
    padding: 4px 0;
}
.ve-cw-btn-link:hover { color: var(--ve-cw-copper-hover); }

/* Error retry block */

.ve-cw-retry {
    align-self: flex-start;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: -2px;
}

/* ───────────────────────────────────────────────────────────────────────
 * Mobile: full-screen overlay
 * ─────────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .ve-cw-panel {
        bottom: 0; right: 0; top: 0; left: 0;
        width: 100vw;
        /* 100dvh respects the iOS Safari dynamic toolbar — falls back to
         * 100vh on browsers that don't support dynamic viewport units. */
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        border-radius: 0;
        transform: translateY(20px);
    }
    .ve-cw.is-open .ve-cw-panel {
        transform: translateY(0);
    }
    .ve-cw.is-open .ve-cw-button {
        /* keep the button reachable (a tap to close) above the sheet */
        z-index: 1001;
    }
    .ve-cw-panel-header {
        padding-top: max(14px, env(safe-area-inset-top));
    }
    .ve-cw-thread {
        padding-bottom: max(12px, env(safe-area-inset-bottom));
        /* Prevent pull-to-refresh / overscroll bouncing from leaking
         * scroll to the page underneath the overlay. */
        overscroll-behavior: contain;
    }
    /* Body scroll lock — the JS toggles this class on/off as the
     * mobile overlay opens and closes. Keeps the page behind from
     * scrolling under the visitor's fingers. */
    body.ve-cw-body-lock {
        overflow: hidden;
        touch-action: none;
    }
}

/* Minimized state — used by the minimize action */
.ve-cw.is-minimized .ve-cw-panel {
    height: 56px;
    overflow: hidden;
}
.ve-cw.is-minimized .ve-cw-thread { display: none; }