/* Boutique Villas Bali Concierge widget styles
   All colours, fonts, shapes, background and effects are injected from PHP
   based on the admin settings. These are only fallbacks. */

#bvcb-root {
    --bvcb-radius: 0px;
    --bvcb-bubble-radius: 0px;
    --bvcb-shadow: 0 20px 50px -15px rgba(0, 0, 0, 0.35), 0 8px 20px -8px rgba(0, 0, 0, 0.18);
    --bvcb-font-display: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --bvcb-font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

    position: fixed;
    z-index: 999999;
    font-family: var(--bvcb-font-body);
    color: var(--bvcb-ink);
    line-height: 1.5;
}

#bvcb-root *,
#bvcb-root *::before,
#bvcb-root *::after {
    box-sizing: border-box;
}

/* Deferred launch: hidden until the script reveals it after the set delay,
   so the widget does not compete with the page's own first paint. */
#bvcb-root.bvcb-deferred { opacity: 0; pointer-events: none; }
#bvcb-root.bvcb-ready { opacity: 1; transition: opacity 0.35s ease; }

/* ---------- Toggle button ---------- */
#bvcb-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 22px 14px 18px;
    background: var(--bvcb-btn-bg);
    color: var(--bvcb-btn-fg);
    border: none;
    border-radius: 0;
    cursor: pointer;
    font-family: var(--bvcb-font-body);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.02em;
    box-shadow: var(--bvcb-shadow);
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease, background 0.25s ease;
    position: relative;
    overflow: visible;
    perspective: 800px;
}

#bvcb-toggle::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.08) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

#bvcb-toggle:hover {
    transform: translateY(-2px);
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.45), 0 10px 25px -8px rgba(0, 0, 0, 0.3);
}

#bvcb-toggle:hover::before {
    opacity: 1;
}

#bvcb-toggle:active {
    transform: translateY(0);
}

#bvcb-toggle .bvcb-toggle-close {
    display: none;
}

#bvcb-root.bvcb-open #bvcb-toggle .bvcb-toggle-icon,
#bvcb-root.bvcb-open #bvcb-toggle .bvcb-toggle-label {
    display: none;
}

#bvcb-root.bvcb-open #bvcb-toggle {
    padding: 14px;
    border-radius: 50% !important;
    width: 52px;
    height: 52px;
    justify-content: center;
}

#bvcb-root.bvcb-open #bvcb-toggle .bvcb-toggle-close {
    display: inline-flex;
}

.bvcb-toggle-icon,
.bvcb-toggle-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--bvcb-btn-fg);
    position: relative;
    z-index: 1;
    transform-style: preserve-3d;
}

.bvcb-toggle-icon svg,
.bvcb-toggle-close svg {
    display: block;
    transition: filter 0.3s ease;
    animation: bvcb-3d-rotate 5s ease-in-out infinite;
    transform-style: preserve-3d;
    will-change: transform, filter;
}
#bvcb-toggle:hover .bvcb-toggle-icon svg,
#bvcb-toggle:hover .bvcb-toggle-close svg {
    filter: drop-shadow(0 0 6px rgba(255,255,255,0.55));
}
@keyframes bvcb-3d-rotate {
    0%, 100% { transform: rotateY(0deg); }
    50%      { transform: rotateY(18deg); }
}
@media (prefers-reduced-motion: reduce) {
    .bvcb-toggle-icon svg, .bvcb-toggle-close svg { animation: none; }
}

.bvcb-toggle-label {
    position: relative;
    z-index: 1;
    color: inherit;
}

/* ---------- Panel ---------- */
#bvcb-panel {
    position: absolute;
    width: var(--bvcb-panel-w, 380px);
    max-width: calc(100vw - 32px);
    height: var(--bvcb-panel-h, 560px);
    max-height: calc(100vh - 110px);
    background: var(--bvcb-paper);
    border-radius: var(--bvcb-radius);
    box-shadow: var(--bvcb-shadow);
    display: none;
    flex-direction: column;
    overflow: hidden;
    transform-origin: bottom right;
    animation: bvcb-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Panel positioning relative to button */
#bvcb-root.bvcb-pos-br #bvcb-panel { bottom: calc(100% + 14px); right: 0; transform-origin: bottom right; }
#bvcb-root.bvcb-pos-bl #bvcb-panel { bottom: calc(100% + 14px); left: 0; transform-origin: bottom left; }
#bvcb-root.bvcb-pos-tr #bvcb-panel { top: calc(100% + 14px); right: 0; transform-origin: top right; }
#bvcb-root.bvcb-pos-tl #bvcb-panel { top: calc(100% + 14px); left: 0; transform-origin: top left; }

#bvcb-root.bvcb-open #bvcb-panel {
    display: flex;
}

@keyframes bvcb-pop {
    0%   { opacity: 0; transform: scale(0.92) translateY(12px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* ---------- Header ---------- */
.bvcb-header {
    padding: 18px 22px;
    background: linear-gradient(135deg, var(--bvcb-header-bg, var(--bvcb-btn-bg)) 0%, color-mix(in srgb, var(--bvcb-header-bg, var(--bvcb-btn-bg)) 80%, #ffffff 20%) 100%);
    color: var(--bvcb-header-fg, var(--bvcb-btn-fg));
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    flex-shrink: 0;
}

.bvcb-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 22px;
    right: 22px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
    opacity: 0.5;
}

.bvcb-header-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bvcb-eyebrow {
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--bvcb-header-fg, var(--bvcb-btn-fg)) 78%, transparent);
    font-weight: 500;
}

.bvcb-logo {
    height: 26px;
    width: auto;
    margin-right: 10px;
    flex-shrink: 0;
    object-fit: contain;
}

.bvcb-title {
    font-family: var(--bvcb-font-display);
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1.1;
    color: inherit;
}

.bvcb-status {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #6cc070;
    box-shadow: 0 0 0 4px rgba(108, 192, 112, 0.18);
    animation: bvcb-pulse 2s ease-in-out infinite;
}

@keyframes bvcb-pulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(108, 192, 112, 0.18); }
    50%      { box-shadow: 0 0 0 7px rgba(108, 192, 112, 0.05); }
}

/* ---------- Messages ---------- */
.bvcb-messages {
    flex: 1;
    padding: 20px 18px;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 12px;
    scroll-behavior: smooth;
    background: var(--bvcb-paper);
}

.bvcb-messages::-webkit-scrollbar { width: 6px; }
.bvcb-messages::-webkit-scrollbar-track { background: transparent; }
.bvcb-messages::-webkit-scrollbar-thumb { background: var(--bvcb-sand); border-radius: 0; }

.bvcb-msg {
    display: flex;
    max-width: 88%;
    min-width: 0;
    animation: bvcb-fade-in 0.3s ease;
}

@keyframes bvcb-fade-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.bvcb-msg-bot  { align-self: flex-start; }
.bvcb-msg-user { align-self: flex-end; }

.bvcb-bubble {
    padding: 12px 16px;
    border-radius: var(--bvcb-bubble-radius, 0);
    font-size: 14px;
    line-height: 1.55;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: pre-wrap;
    max-width: 100%;
}

.bvcb-msg-bot .bvcb-bubble {
    background: var(--bvcb-bot-bubble);
    color: var(--bvcb-bot-fg, var(--bvcb-ink));
    box-shadow: 0 2px 10px -6px rgba(0, 0, 0, 0.2);
}

.bvcb-msg-user .bvcb-bubble {
    background: var(--bvcb-user-bubble);
    color: var(--bvcb-user-text);
}

.bvcb-bubble a {
    color: var(--bvcb-accent);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    text-decoration-color: color-mix(in srgb, var(--bvcb-accent) 45%, transparent);
    word-break: break-word;
    overflow-wrap: anywhere;
    transition: text-decoration-color 0.2s ease, color 0.2s ease;
}

.bvcb-bubble a:hover {
    text-decoration-color: var(--bvcb-accent);
}

/* Inline buttons / link-buttons the assistant or embeds may produce */
.bvcb-bubble a.bvcb-btnlink,
.bvcb-bubble button,
.bvcb-bubble .button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    margin: 2px 0;
    background: var(--bvcb-accent);
    color: var(--bvcb-btn-fg, #fff);
    border: 1px solid var(--bvcb-accent);
    border-radius: var(--bvcb-bubble-radius, 0);
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: filter 0.2s ease, transform 0.15s ease;
}

.bvcb-bubble a.bvcb-btnlink:hover,
.bvcb-bubble button:hover,
.bvcb-bubble .button:hover {
    filter: brightness(0.92);
    transform: translateY(-1px);
}

/* ---------- Suggested opening questions (bullet clickable text) ---------- */
.bvcb-starters {
    display: none;
    flex-direction: column;
    gap: 4px;
    margin: 4px 4px 8px;
}
.bvcb-starters.bvcb-starters-on { display: flex; }
#bvcb-root .bvcb-suggest {
    display: flex;
    align-items: baseline;
    gap: 7px;
    width: 100%;
    max-width: 100%;
    padding: 3px 2px;
    margin: 0;
    background: none;
    background-image: none;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    color: var(--bvcb-accent);
    font-family: var(--bvcb-font-body);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
    text-align: left;
    text-transform: none;
    letter-spacing: normal;
    cursor: pointer;
    transition: color 0.15s ease;
}
#bvcb-root .bvcb-suggest::before {
    content: "";
    flex: 0 0 auto;
    width: 5px;
    height: 5px;
    margin-top: 6px;
    border-radius: 50%;
    background: var(--bvcb-accent);
}
#bvcb-root .bvcb-suggest:hover { text-decoration: underline; filter: brightness(0.9); }
#bvcb-root .bvcb-suggest .bvcb-suggest-label { flex: 1 1 auto; }

/* ---------- Welcome opener pills (compact property toggles) ---------- */
.bvcb-welcome-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
/* Scoped to #bvcb-root and fully reset so themes/page builders (Elementor
   global button styles) cannot bleed their colours or shapes into the pills. */
#bvcb-root .bvcb-welcome-pill, .bvcb-pill-scope .bvcb-welcome-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    margin: 0;
    background: var(--bvcb-pill-bg);
    background-image: none;
    color: var(--bvcb-pill-fg);
    border-style: var(--bvcb-pill-bs, solid);
    border-width: var(--bvcb-pill-bw, 1px);
    border-color: var(--bvcb-pill-bd);
    border-radius: var(--bvcb-bubble-radius, 0);
    box-shadow: none;
    text-shadow: none;
    text-transform: none;
    letter-spacing: 0.01em;
    font-family: var(--bvcb-font-pill);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.15;
    min-height: 0;
    width: auto;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
#bvcb-root .bvcb-welcome-pill:hover, .bvcb-pill-scope .bvcb-welcome-pill:hover {
    background: var(--bvcb-pill-hbg);
    color: var(--bvcb-pill-hfg);
    border-color: var(--bvcb-pill-hbd);
    transform: translateY(-1px);
}
#bvcb-root .bvcb-welcome-pill[aria-expanded="true"], .bvcb-pill-scope .bvcb-welcome-pill[aria-expanded="true"] {
    background: var(--bvcb-pill-hbg);
    color: var(--bvcb-pill-hfg);
    border-color: var(--bvcb-pill-hbd);
}
#bvcb-root .bvcb-welcome-pill .bvcb-pill-caret, .bvcb-pill-scope .bvcb-welcome-pill .bvcb-pill-caret {
    width: 7px;
    height: 7px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
    opacity: 0.75;
}
#bvcb-root .bvcb-welcome-pill[aria-expanded="true"] .bvcb-pill-caret, .bvcb-pill-scope .bvcb-welcome-pill[aria-expanded="true"] .bvcb-pill-caret {
    transform: rotate(-135deg);
}
.bvcb-welcome-reveal { margin-top: 8px; }

/* ---------- Welcome opener cards (revealed under a pill) ---------- */
.bvcb-welcome-extra { margin: 0 2px 6px; }
.bvcb-welcome-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.bvcb-welcome-card {
    flex: 1 1 150px;
    min-width: 140px;
    max-width: 100%;
    transition: box-shadow 0.2s ease;
}
.bvcb-welcome-card:focus-visible {
    outline: 2px solid var(--bvcb-accent);
    outline-offset: 2px;
}
.bvcb-cards-title-mini {
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--bvcb-ink-soft);
    margin: 0 2px 4px;
}

/* ---------- Booking calendar: action buttons + embed ---------- */
.bvcb-cal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 2px 0 4px;
}

.bvcb-cal-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    background: var(--bvcb-accent);
    color: var(--bvcb-btn-fg, #fff);
    border: 1px solid var(--bvcb-accent);
    border-radius: var(--bvcb-bubble-radius, 0);
    font-family: var(--bvcb-font-body);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: filter 0.2s ease, transform 0.15s ease;
}

.bvcb-cal-btn:hover { filter: brightness(0.92); transform: translateY(-1px); }
.bvcb-cal-btn:disabled { opacity: 0.6; cursor: default; transform: none; }

.bvcb-cal-embed {
    width: 100%;
    max-width: 100%;
    background: var(--bvcb-bot-bubble);
    border: 1px solid var(--bvcb-sand);
    border-radius: var(--bvcb-bubble-radius, 0);
    overflow: hidden;
}

.bvcb-cal-caption {
    padding: 8px 12px;
    font-family: var(--bvcb-font-display);
    font-size: 13px;
    font-weight: 600;
    color: var(--bvcb-ink);
    border-bottom: 1px solid var(--bvcb-sand);
}

.bvcb-cal-holder { width: 100%; }

.bvcb-cal-holder iframe,
.bvcb-cal-frame {
    display: block;
    width: 100%;
    min-height: 420px;
    border: 0;
    background: #fff;
}

/* Typing indicator */
.bvcb-typing {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    padding: 4px 0;
}

.bvcb-typing span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--bvcb-ink-soft);
    animation: bvcb-typing 1.2s ease-in-out infinite;
}

.bvcb-typing span:nth-child(2) { animation-delay: 0.15s; }
.bvcb-typing span:nth-child(3) { animation-delay: 0.3s; }

@keyframes bvcb-typing {
    0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
    30%           { opacity: 1; transform: translateY(-3px); }
}

/* ---------- Input form ---------- */
.bvcb-form {
    display: flex;
    gap: 10px;
    padding: 14px 16px;
    background: var(--bvcb-paper);
    border-top: 1px solid var(--bvcb-sand);
    align-items: stretch;
    flex-shrink: 0;
    justify-content: space-between !important;
}

.bvcb-form textarea {
    width: 100%;
    border-color: var(--bvcb-accent);
}

#bvcb-input {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    border: none;
    border-bottom: 1.5px solid var(--bvcb-accent);
    background: var(--bvcb-input-bg);
    border-radius: 0;
    padding: 11px 12px;
    font-family: var(--bvcb-font-body);
    font-size: 14px;
    line-height: 1.5;
    color: var(--bvcb-ink);
    resize: none;
    max-height: 120px;
    min-height: 44px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    outline: none;
    display: block;
    box-sizing: border-box;
}

#bvcb-input:focus {
    border-bottom-color: var(--bvcb-accent);
    box-shadow: 0 2px 0 -1px var(--bvcb-accent);
}

#bvcb-input::placeholder {
    color: var(--bvcb-placeholder);
    font-style: italic;
}

/* Send button. Uses its own dedicated class + colour vars and forces them
   with !important so a host theme's generic submit-button styling (which is
   what makes it show up pink on some sites) cannot bleed in. The vars fall
   back to the launcher button colours when no explicit send colour is set. */
#bvcb-root .bvcb-send-btn,
#bvcb-send {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    align-self: flex-end;
    border: none !important;
    border-radius: 0;
    background: var(--bvcb-send-bg, var(--bvcb-btn-bg)) !important;
    color: var(--bvcb-send-fg, var(--bvcb-btn-fg)) !important;
    box-shadow: none !important;
    text-shadow: none !important;
    background-image: none !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: filter 0.2s ease, transform 0.15s ease;
}

#bvcb-root .bvcb-send-btn svg { color: var(--bvcb-send-fg, var(--bvcb-btn-fg)) !important; }

#bvcb-root .bvcb-send-btn:hover:not(:disabled),
#bvcb-send:hover:not(:disabled) {
    transform: scale(1.05);
    filter: brightness(1.15);
    background: var(--bvcb-send-bg, var(--bvcb-btn-bg)) !important;
}

#bvcb-root .bvcb-send-btn:focus,
#bvcb-root .bvcb-send-btn:active {
    background: var(--bvcb-send-bg, var(--bvcb-btn-bg)) !important;
    outline: none;
}

#bvcb-send:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ---------- Footer ---------- */
.bvcb-footer {
    padding: 8px 16px 12px;
    background: var(--bvcb-paper);
    text-align: center;
    font-size: 10px;
    letter-spacing: 0.04em;
    color: var(--bvcb-placeholder);
    flex-shrink: 0;
}

/* ---------- Tablet & smaller desktop ---------- */
@media (max-width: 768px) {
    #bvcb-panel {
        width: calc(100vw - 32px);
        max-width: 420px;
    }
}

/* ---------- Mobile ---------- */
@media (max-width: 600px) {
    #bvcb-root {
        bottom: 16px !important;
        right: 16px !important;
        left: auto !important;
        top: auto !important;
    }

    /* When open, expand panel to near-fullscreen on mobile */
    #bvcb-root.bvcb-open #bvcb-panel {
        position: fixed;
        bottom: 80px !important;
        right: 16px !important;
        left: 16px !important;
        top: 16px !important;
        width: auto !important;
        height: auto !important;
        max-width: none;
        max-height: none;
    }

    .bvcb-header { padding: 16px 18px; }
    .bvcb-title { font-size: 18px; }
    .bvcb-messages { padding: 16px 14px; }
    .bvcb-form { padding: 12px 14px; }
    #bvcb-input { font-size: 16px; } /* prevents iOS zoom-on-focus */
}

/* ---------- Very small phones ---------- */
@media (max-width: 380px) {
    #bvcb-root.bvcb-open #bvcb-panel {
        bottom: 76px !important;
        right: 8px !important;
        left: 8px !important;
        top: 8px !important;
    }

    /* Compact button label on tiny screens */
    #bvcb-toggle .bvcb-toggle-label { display: none; }
    #bvcb-toggle {
        padding: 14px !important;
        border-radius: 50% !important;
        width: 56px;
        height: 56px;
    }
}

/* ---------- Handoff bar (continue on WhatsApp / email) ---------- */
.bvcb-handoff {
    display: none;
    gap: 8px;
    padding: 10px 16px 0;
    background: var(--bvcb-paper);
    flex-shrink: 0;
}

.bvcb-handoff.bvcb-handoff-on {
    display: flex;
}

.bvcb-handoff-btn {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 10px;
    border-radius: 0;
    font-family: var(--bvcb-font-body);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.01em;
    text-decoration: none;
    cursor: pointer;
    transition: filter 0.2s ease, background 0.2s ease;
}

.bvcb-handoff-wa {
    background: var(--bvcb-btn-bg);
    color: var(--bvcb-btn-fg);
}

.bvcb-handoff-email {
    background: var(--bvcb-bot-bubble);
    color: var(--bvcb-accent);
}

.bvcb-handoff-btn:hover { filter: brightness(1.06); }
.bvcb-handoff-btn svg { display: block; }

/* ---------- Toggle icon: 3D periodic flip + hover glow (on by default) ---------- */
.bvcb-toggle-icon,
.bvcb-toggle-close {
    transform-style: preserve-3d;
}

.bvcb-toggle-icon svg,
.bvcb-toggle-close svg {
    transition: filter 0.3s ease;
    animation: bvcb-3d-rotate 5s ease-in-out infinite;
    transform-style: preserve-3d;
    will-change: transform, filter;
    display: block;
}

#bvcb-toggle:hover .bvcb-toggle-icon svg,
#bvcb-toggle:hover .bvcb-toggle-close svg {
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.95))
            drop-shadow(0 0 12px rgba(255, 255, 255, 0.75))
            drop-shadow(0 0 20px rgba(255, 255, 255, 0.5))
            brightness(1.6);
}

#bvcb-toggle:hover .bvcb-toggle-icon svg path,
#bvcb-toggle:hover .bvcb-toggle-close svg path {
    fill: #ffffff;
    stroke: #ffffff;
}

@keyframes bvcb-3d-rotate {
    0%, 70%, 100% { transform: rotateY(0deg); }
    80%           { transform: rotateY(180deg); }
    90%           { transform: rotateY(360deg); }
}

/* Status dot: keep the green presence pulse and add a soft star glow */
.bvcb-status {
    animation: bvcb-pulse 2s ease-in-out infinite,
               bvcb-star-pulse 3s ease-in-out infinite;
    will-change: box-shadow, filter;
}

@keyframes bvcb-star-pulse {
    0%, 100% {
        filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.4))
                drop-shadow(0 0 4px rgba(255, 255, 255, 0.2));
    }
    50% {
        filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.9))
                drop-shadow(0 0 12px rgba(255, 255, 255, 0.6))
                drop-shadow(0 0 18px rgba(255, 255, 255, 0.3));
    }
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
    .bvcb-toggle-icon svg,
    .bvcb-toggle-close svg,
    .bvcb-status {
        animation: none !important;
    }
}

/* ---- Corner radius ----
   Launcher and controls stay sharp (the button shape control owns the
   launcher). The panel container and message bubbles follow the admin's
   radius settings via their CSS variables. */
#bvcb-root.bvcb-open #bvcb-toggle { border-radius: 0 !important; }
#bvcb-toggle,
.bvcb-input,
.bvcb-cal-embed,
.bvcb-cal-btn,
.bvcb-handoff-btn,
.bvcb-send {
    border-radius: 0 !important;
}
#bvcb-panel { border-radius: var(--bvcb-radius, 0) !important; }
.bvcb-bubble { border-radius: var(--bvcb-bubble-radius, 0) !important; }

/* ============================================================
   Rich cards
   - desktop: a transparent horizontal strip anchored to the screen edge the
     chatbox sits on, sitting BEHIND the panel (lower z-index). Scrolls
     horizontally to reveal cards tucked under the panel. Max 70% of screen.
   - mobile: a bottom sheet (unchanged).
   ============================================================ */

.bvcb-cards { display: none; }
#bvcb-root.bvcb-open.bvcb-cards-open .bvcb-cards { display: flex; }
.bvcb-cards-body { display: flex; gap: 14px; }
.bvcb-card-group { display: contents; }

.bvcb-card {
    background: var(--bvcb-card-bg, var(--bvcb-paper, #fff));
    border: 1px solid var(--bvcb-card-border, var(--bvcb-sand, #e6e1da));
    border-radius: var(--bvcb-card-radius, 0);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 14px 34px -16px rgba(0,0,0,0.45);
}
.bvcb-card-img { width: 100%; aspect-ratio: 16 / 10; background-size: cover; background-position: center; background-color: #ddd; }
.bvcb-card-item .bvcb-card-img { aspect-ratio: 16 / 9; }
.bvcb-card-body { padding: var(--bvcb-card-pad, 11px 13px 13px); display: flex; flex-direction: column; gap: 5px; flex: 1; }
.bvcb-card-title { font-family: var(--bvcb-font-display, inherit); font-size: 15px; font-weight: 600; color: var(--bvcb-card-title, var(--bvcb-ink, #1a2224)); line-height: 1.22; }
.bvcb-card-sub { font-size: 12px; color: var(--bvcb-card-text, var(--bvcb-ink-soft, #5b6a6c)); }
.bvcb-card-points { margin: 2px 0 0; padding-left: 16px; }
.bvcb-card-points li { font-size: 11.5px; line-height: 1.5; color: var(--bvcb-card-title, var(--bvcb-ink, #1a2224)); }
.bvcb-card-item .bvcb-card-points { display: none; }
.bvcb-card-btn {
    margin-top: auto; align-self: flex-start;
    background: var(--bvcb-card-btn-bg, var(--bvcb-accent, #14525a)); color: var(--bvcb-card-btn-fg, var(--bvcb-btn-fg, #fff));
    border-radius: 0; padding: 8px 14px; font-size: 12px; font-weight: 600; text-decoration: none;
}
.bvcb-card-btn:hover { filter: brightness(1.08); }

/* themed "hide cards" button, sits in the panel header next to the chat controls */
/* per-card close (×) inside each card */
.bvcb-card { position: relative; }
.bvcb-card-x {
    position: absolute; top: 6px; right: 6px; z-index: 3;
    width: 26px !important; height: 26px !important;
    min-width: 0 !important; min-height: 0 !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    -webkit-appearance: none !important; appearance: none !important;
    background: rgba(0,0,0,0.45) !important; background-image: none !important;
    color: #fff !important; border: none !important; border-radius: 0 !important;
    box-shadow: none !important; text-shadow: none !important; cursor: pointer !important;
    font: 700 18px/1 var(--bvcb-font-body, sans-serif) !important; padding: 0 !important;
}
.bvcb-card-x:hover { background: rgba(0,0,0,0.65) !important; }

/* Reopen pill */
.bvcb-cards-reopen {
    position: absolute; bottom: calc(100% + 14px); right: 0;
    -webkit-appearance: none !important; appearance: none !important;
    background: var(--bvcb-accent, #14525a) !important; background-image: none !important;
    color: #fff !important; border: none !important; box-shadow: var(--bvcb-shadow, 0 10px 30px -10px rgba(0,0,0,0.4)) !important;
    width: 42px; height: 42px; display: flex; align-items: center; justify-content: center;
    cursor: pointer; z-index: 2; border-radius: 0 !important;
}
#bvcb-root.bvcb-cards-open .bvcb-cards-reopen { display: none !important; }

/* ---- desktop: horizontal strip BESIDE the panel (no overlap), max 3 cards ---- */
@media (min-width: 601px) {
    .bvcb-cards {
        position: fixed;
        bottom: 92px;
        background: transparent;
        box-shadow: none;
        flex-direction: column;
        align-items: stretch;
        z-index: 2;
        pointer-events: none;    /* transparent gaps do not block the page */
    }
    #bvcb-root.bvcb-pos-tr .bvcb-cards,
    #bvcb-root.bvcb-pos-tl .bvcb-cards { top: 92px; bottom: auto; }
    .bvcb-cards .bvcb-cards-body,
    .bvcb-cards .bvcb-card { pointer-events: auto; }
    #bvcb-panel { z-index: 3; }
    #bvcb-toggle { z-index: 4; }

    /* sit next to the panel on whichever side the chatbox is anchored */
    #bvcb-root.bvcb-pos-br .bvcb-cards,
    #bvcb-root.bvcb-pos-tr .bvcb-cards {
        right: calc(var(--bvcb-panel-w, 380px) + 40px); left: auto;
        max-width: min(70vw, calc(100vw - var(--bvcb-panel-w, 380px) - 64px));
    }
    #bvcb-root.bvcb-pos-bl .bvcb-cards,
    #bvcb-root.bvcb-pos-tl .bvcb-cards {
        left: calc(var(--bvcb-panel-w, 380px) + 40px); right: auto;
        max-width: min(70vw, calc(100vw - var(--bvcb-panel-w, 380px) - 64px));
    }

    .bvcb-cards-head { display: none; }   /* closed via the panel header button */

    .bvcb-cards-body {
        flex-direction: row;
        align-items: flex-end;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 4px 4px 8px;
        scrollbar-width: thin;
    }
    .bvcb-cards-body::-webkit-scrollbar { height: 8px; }
    .bvcb-cards-body::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.25); }

    .bvcb-card { flex: 0 0 auto; }
    /* property cards at ~80% of the chatbox */
    .bvcb-card-property {
        width: calc(var(--bvcb-panel-w, 380px) * 0.8);
        height: calc(var(--bvcb-panel-h, 560px) * 0.8);
        max-height: calc(100dvh - 130px);
    }
    .bvcb-card-property .bvcb-card-img { aspect-ratio: auto; height: 56%; flex: 0 0 auto; }
    .bvcb-card-property .bvcb-card-body { overflow-y: auto; }
    /* item cards smaller: ~62% width, half the chatbox height */
    .bvcb-card-item {
        width: calc(var(--bvcb-panel-w, 380px) * 0.62);
        height: calc(var(--bvcb-panel-h, 560px) * 0.5);
    }
    .bvcb-card-item .bvcb-card-img { aspect-ratio: auto; height: 50%; flex: 0 0 auto; }
    .bvcb-card-item .bvcb-card-body { overflow-y: auto; }
}

/* ---- mobile: bottom sheet ---- */
@media (max-width: 600px) {
    .bvcb-cards {
        position: fixed;
        left: 12px; right: 12px; bottom: 78px; top: auto;
        max-height: 52dvh;
        background: var(--bvcb-paper, #fff);
        box-shadow: var(--bvcb-shadow, 0 20px 50px -12px rgba(0,0,0,0.35));
        flex-direction: column;
        overflow: hidden;
        z-index: 2147483000;
    }
    .bvcb-cards-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--bvcb-sand, #e6e1da); flex: 0 0 auto; }
    .bvcb-cards-title { font-family: var(--bvcb-font-display, inherit); font-size: 13px; font-weight: 600; color: var(--bvcb-ink, #1a2224); }
    .bvcb-cards-close {
        -webkit-appearance: none !important; appearance: none !important;
        border: none !important; background: none !important; background-image: none !important;
        box-shadow: none !important; font-size: 24px !important; line-height: 1 !important;
        color: var(--bvcb-accent, #14525a) !important; cursor: pointer !important; padding: 0 4px !important;
    }
    .bvcb-cards-body { flex-direction: column; gap: 12px; padding: 12px; overflow-y: auto; }
    .bvcb-card-group { display: block; }
    .bvcb-card-group-property { display: flex; gap: 10px; overflow-x: auto; }
    .bvcb-card-group-property .bvcb-card { flex: 0 0 78%; }
    .bvcb-card-group-item { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .bvcb-cards-reopen { bottom: 78px; right: 12px; }
}

/* ============================================================
   Native availability calendar card (drawn from synced feeds)
   ============================================================ */
.bvcb-cal-inner {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.bvcb-cal-nav {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.bvcb-cal-month {
    font-size: 13px; font-weight: 600; color: var(--bvcb-ink, #1a2224);
    text-align: center; flex: 1;
}
.bvcb-cal-arrow {
    -webkit-appearance: none !important; appearance: none !important;
    width: 30px; height: 30px; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--bvcb-sand, #e6e1da) !important;
    background: var(--bvcb-paper, #fff) !important; background-image: none !important;
    color: var(--bvcb-ink, #1a2224) !important; box-shadow: none !important;
    border-radius: 0 !important; cursor: pointer; font-size: 18px; line-height: 1; padding: 0 !important;
}
.bvcb-cal-arrow:hover:not(:disabled) { background: var(--bvcb-bot-bubble, #f2f2f2) !important; }
.bvcb-cal-arrow:disabled { opacity: 0.35; cursor: default; }
.bvcb-cal-grid {
    display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px;
}
.bvcb-cal-dow {
    font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em;
    color: var(--bvcb-ink-soft, #5b6a6c); text-align: center; padding: 2px 0 4px;
}
.bvcb-cal-day {
    aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center;
    font-size: 12px; color: var(--bvcb-ink, #1a2224); border: 1px solid transparent;
}
.bvcb-cal-empty { background: transparent; }
.bvcb-cal-open { background: var(--bvcb-bot-bubble, #f2f2f2); }
.bvcb-cal-booked {
    background: var(--bvcb-accent, #14525a);
    color: var(--bvcb-btn-fg, #fff);
    position: relative; text-decoration: line-through; opacity: 0.92;
}
.bvcb-cal-past { color: var(--bvcb-ink-soft, #9aa6a7); opacity: 0.5; }
.bvcb-cal-legend {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    font-size: 11px; color: var(--bvcb-ink-soft, #5b6a6c); margin-top: 2px;
}
.bvcb-cal-key { width: 12px; height: 12px; display: inline-block; border-radius: 0; }
.bvcb-cal-key-open { background: var(--bvcb-bot-bubble, #f2f2f2); border: 1px solid var(--bvcb-sand, #e6e1da); }
.bvcb-cal-key-booked { background: var(--bvcb-accent, #14525a); margin-left: 10px; }

/* ---- Villa card: an outer frame holding two stacked, swappable views ----
   .bvcb-villa (frame, carries the card chrome)
     .bvcb-villa-stage
       .bvcb-villa-browse   -> .bvcb-villa-card row (calendar + details)
       .bvcb-villa-booking  -> live booking widget
   The frame keeps the border/radius/shadow; the inner row is pure layout. */
.bvcb-villa {
    position: relative;
    overflow: hidden;
}
.bvcb-villa-stage { position: relative; display: block; }

/* Each view animates its own height (max-height, driven by JS so it can start
   from an explicit pixel height and settle back to auto). The frame grows and
   shrinks with whichever view is open; on close the other view is released to
   auto so it returns to its natural size. */
.bvcb-villa-view {
    overflow: hidden;
    opacity: 1;
    transition: max-height 0.42s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
}
.bvcb-villa-view-in { min-height: 0; transition: transform 0.42s cubic-bezier(0.4, 0, 0.2, 1); }
.bvcb-villa-view.is-collapsed { max-height: 0 !important; opacity: 0; pointer-events: none; }

/* Browse slides up and out; booking rises from below into its place. */
.bvcb-villa.bvcb-booking-open .bvcb-villa-browse .bvcb-villa-view-in { transform: translateY(-12px); }
.bvcb-villa-booking .bvcb-villa-view-in { transform: translateY(14px); }
.bvcb-villa.bvcb-booking-open .bvcb-villa-booking .bvcb-villa-view-in { transform: translateY(0); }

/* The inner row that pairs the calendar with the details. */
.bvcb-villa-card {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    position: relative;
    display: flex;
    flex-direction: row;
}
.bvcb-villa-cal {
    flex: 0 0 auto;
    padding: 12px 13px 13px;
    border-right: 1px solid var(--bvcb-card-border, var(--bvcb-sand, #e6e1da));
    background: var(--bvcb-card-bg, var(--bvcb-paper, #fff));
}
.bvcb-villa-cal-head {
    font-family: var(--bvcb-font-display, inherit);
    font-size: 13px; font-weight: 600; color: var(--bvcb-card-title, var(--bvcb-ink, #1a2224));
    margin-bottom: 8px;
}
.bvcb-villa-info {
    flex: 1 1 0; min-width: 0;
    display: flex; flex-direction: column;
}
.bvcb-villa-info .bvcb-card-img { width: 100%; flex: 0 0 auto; }
.bvcb-villa-info .bvcb-card-body { padding: var(--bvcb-card-pad, 11px 13px 13px); display: flex; flex-direction: column; gap: 5px; flex: 1; }
.bvcb-villa-card-calonly { flex-direction: column; }
.bvcb-villa-card-calonly .bvcb-villa-cal { border-right: 0; }

/* ---- Actions row: View details + Book now sit side by side ---- */
.bvcb-card-actions {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding-top: 4px;
}
.bvcb-card-actions .bvcb-card-btn { margin-top: 0; }

/* Primary booking button. Uses the calendar-embed accent so it reads as the
   live, do-it-now action, distinct from the outline of View details. */
.bvcb-book-btn {
    -webkit-appearance: none; appearance: none;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 8px 15px;
    background: var(--bvcb-book-bg, #e8743b);
    color: #fff;
    border: 1px solid var(--bvcb-book-bg, #e8743b);
    border-radius: 0;
    font-family: var(--bvcb-font-body, sans-serif);
    font-size: 12px; font-weight: 700; letter-spacing: 0.01em;
    line-height: 1.1; cursor: pointer;
    transition: filter 0.2s ease, transform 0.15s ease;
}
.bvcb-book-btn:hover { filter: brightness(0.92); transform: translateY(-1px); }
.bvcb-book-btn:active { transform: none; }

/* Book button shown under a calendar when there is no details pane. */
.bvcb-villa-cal-book { margin-top: 10px; }
.bvcb-villa-cal-book .bvcb-book-btn { width: 100%; padding: 10px 15px; font-size: 13px; }
.bvcb-villa-lead { display: flex; flex-direction: column; justify-content: center; gap: 4px; }

/* ---- Booking view: back bar + widget holder ---- */
.bvcb-villa-booking-bar {
    display: flex; align-items: center;
    padding: 8px 10px;
    border-bottom: 1px solid var(--bvcb-card-border, var(--bvcb-sand, #e6e1da));
    background: var(--bvcb-card-bg, var(--bvcb-paper, #fff));
}
.bvcb-booking-back {
    -webkit-appearance: none; appearance: none;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 10px 6px 6px;
    background: transparent; border: 0; border-radius: 0;
    color: var(--bvcb-card-title, var(--bvcb-ink, #1a2224));
    font-family: var(--bvcb-font-body, sans-serif);
    font-size: 13px; font-weight: 600; cursor: pointer;
}
.bvcb-booking-back:hover { color: var(--bvcb-accent, #14525a); }
.bvcb-booking-back-i { font-size: 20px; line-height: 1; margin-top: -1px; }

.bvcb-villa-booking-holder {
    width: 100%;
    background: var(--bvcb-card-bg, var(--bvcb-paper, #fff));
    min-height: 8px;
}
.bvcb-villa-booking-holder iframe { display: block; width: 100%; border: 0; background: #fff; }
.bvcb-booking-loading { position: relative; min-height: 180px; }
.bvcb-booking-loading::after {
    content: ""; position: absolute; top: 50%; left: 50%;
    width: 26px; height: 26px; margin: -13px 0 0 -13px;
    border: 3px solid var(--bvcb-sand, #e6e1da);
    border-top-color: var(--bvcb-accent, #14525a);
    border-radius: 50%; animation: bvcb-spin 0.8s linear infinite;
}
@keyframes bvcb-spin { to { transform: rotate(360deg); } }
.bvcb-booking-err {
    padding: 22px 18px; text-align: center;
    font-family: var(--bvcb-font-body, sans-serif);
    font-size: 13px; color: var(--bvcb-ink-soft, #5b6a6c);
}
@media (prefers-reduced-motion: reduce) {
    .bvcb-villa-view, .bvcb-villa-view-in { transition: none !important; }
    .bvcb-booking-loading::after { animation: none !important; }
}

/* styled scrollbars (the horizontal options strip and any inner scrollers) */
.bvcb-cards-body,
.bvcb-villa-info .bvcb-card-body,
.bvcb-villa-cal {
    scrollbar-width: thin;
    scrollbar-color: var(--bvcb-accent, #14525a) transparent;
}
.bvcb-cards-body::-webkit-scrollbar { height: 10px; width: 10px; }
.bvcb-cards-body::-webkit-scrollbar-track { background: transparent; }
.bvcb-cards-body::-webkit-scrollbar-thumb {
    background: var(--bvcb-accent, #14525a);
    border-radius: 999px;
    border: 3px solid transparent;
    background-clip: padding-box;
}
.bvcb-cards-body::-webkit-scrollbar-thumb:hover { filter: brightness(1.12); }

/* ---- desktop / tablet: two-pane card sits in the side strip ---- */
@media (min-width: 601px) {
    .bvcb-card-group-villa { display: contents; }
    .bvcb-villa {
        flex: 0 0 auto;
        width: min(560px, calc(100vw - var(--bvcb-panel-w, 380px) - 80px));
        max-height: calc(100dvh - 130px);
    }
    /* When the live widget is open, let the frame grow to fit it (its picker
       goes fullscreen on its own), so the card grows and shrinks with use. */
    .bvcb-villa.bvcb-booking-open { max-height: none; overflow: visible; }
    .bvcb-villa-cal { width: 248px; }
    .bvcb-villa.bvcb-villa-card-calonly { width: calc(var(--bvcb-panel-w, 380px) * 0.85); }
    .bvcb-villa.bvcb-villa-card-calonly .bvcb-villa-cal { width: auto; }
    .bvcb-villa-card-calonly .bvcb-villa-cal { width: auto; }
}

/* ---- mobile: options inline after the reply; card panes stack ---- */
@media (max-width: 600px) {
    .bvcb-options-inline {
        display: block !important;
        width: 100%;
        margin-top: 4px;
    }
    .bvcb-options-inline .bvcb-card-group { display: block; }
    .bvcb-options-inline .bvcb-card-group + .bvcb-card-group { margin-top: 12px; }
    .bvcb-options-inline .bvcb-card-group-villa > .bvcb-villa + .bvcb-villa { margin-top: 12px; }
    .bvcb-options-inline .bvcb-card-group-property { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
    .bvcb-options-inline .bvcb-card-group-property .bvcb-card { flex: 0 0 78%; }
    .bvcb-options-inline .bvcb-card-group-item { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

    /* stack the two panes on narrow screens, property card first */
    .bvcb-villa-card { flex-direction: column-reverse; }
    .bvcb-villa-card-calonly { flex-direction: column; }
    .bvcb-villa-cal { width: auto; border-right: 0; border-top: 1px solid var(--bvcb-sand, #e6e1da); }
    .bvcb-villa-card-calonly .bvcb-villa-cal { border-top: 0; }
    .bvcb-villa-info .bvcb-card-img { aspect-ratio: 16 / 10; }
}