:root {
    /* Default brand; the actual admin colour is set inline on #wj-chat-root
       (style="--chat-brand: …") so this static file stays cacheable. */
    --chat-brand: #ff6a00;
    --chat-brand-dark: #e05500;
    --chat-radius: 16px;
    --chat-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}

/* Chat edge anchoring (was Blade $position). Defaults below place the widget on
   the RIGHT; when admin sets position=left, #wj-chat-root carries
   data-chat-pos="left", which overrides these custom properties (see rule at the
   bottom of this file). Behaviour is byte-identical to the old inline output. */

/* ── FAB cluster ──
   Anchored to the configured edge. Children align to that same edge
   so the small launcher button (58px) hugs the screen edge instead of
   being centred inside the cluster's wider bounds (the open menu items
   are ~180px wide, which would push the launcher ~60px away from the
   edge if we used align-items:center). */
.wj-fab-cluster {
    position: fixed;
    left: var(--wj-fab-left, auto);
    right: var(--wj-fab-right, 20px);
    bottom: 24px;
    /* 2026-06-09 — Dropped from 99998 to 1030 so the chat FAB no longer
       sits above every dropdown / popover / modal in the site. Customer
       reported the guests +/- buttons on the farmhouse search filter
       didn't respond on certain viewports — root cause: the 58×58px
       chat FAB at z-index 99998 was eating taps meant for elements
       beneath it. 1030 places the FAB above normal page content but
       below all interactive overlays (.dropdown-menu = 2000, Bootstrap
       modal = 1050). Site-wide fix — applies to all dashboards too. */
    z-index: 1030;
    display: flex;
    flex-direction: column;
    align-items: var(--wj-fab-align, flex-end);
    gap: 12px;
    font-family: var(--chat-font);
}

/* Hide the chat FAB when the mobile offcanvas menu is open — otherwise
   the orange bubble floats over the navigation sheet and looks clumsy.
   Scoped to <=991px so the desktop experience is untouched.
   Uses :has() (supported on all current mobile Safari/Chrome/Firefox).
   Fallback rule below handles the body.mobile-menu-open class if any
   legacy JS sets it. */
@media (max-width: 991px) {
    body:has(.offcanvas-overlay.overlay-open) .wj-fab-cluster,
    body.mobile-menu-open .wj-fab-cluster {
        display: none !important;
    }
}

/* 2026-06-09 — Defence in depth: hide the FAB whenever ANY dropdown
   anywhere on the page is visibly open. Belt-and-suspenders on top of
   the z-index reduction above, so even if a future custom widget uses
   an extreme z-index, the FAB still won't intercept its taps.
   :has() is universally supported on the browsers Wenjoy targets. */
body:has(.dropdown-menu.show) .wj-fab-cluster,
body:has(.guests-dropdown.show) .wj-fab-cluster,
body:has(.calendar-dropdown.show) .wj-fab-cluster,
body:has(.search-overlay.show) .wj-fab-cluster {
    display: none !important;
}

/* Main launcher button (orange Wenjoy bubble) — toggles the menu.
   Uses two looping animations to stay visible without being annoying:
     • wjFabBob    — a soft vertical bounce every 3.2s
     • wjFabPulse  — a pulsing ring (::before pseudo-element) every 2s
   Both pause on hover and when the menu is open so the effect doesn't
   compete with deliberate user interaction. */
#wenjoy-chat-fab {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: var(--chat-brand);
    box-shadow: 0 4px 20px rgba(255,106,0,.45);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .25s, box-shadow .25s;
    border: none;
    outline: none;
    order: 2;
    position: relative;
    flex-shrink: 0;
    animation: wjFabBob 3.2s ease-in-out infinite;
}
/* Expanding pulse ring behind the button */
#wenjoy-chat-fab::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--chat-brand);
    opacity: .55;
    z-index: -1;
    animation: wjFabPulse 2s ease-out infinite;
    pointer-events: none;
}
#wenjoy-chat-fab:hover,
#wenjoy-chat-fab.menu-open { animation-play-state: paused; transform: scale(1.08); box-shadow: 0 6px 28px rgba(255,106,0,.55); }
#wenjoy-chat-fab:hover::before,
#wenjoy-chat-fab.menu-open::before { animation-play-state: paused; opacity: 0; }

@keyframes wjFabBob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}
@keyframes wjFabPulse {
    0%   { transform: scale(1);   opacity: .55; }
    80%  { transform: scale(1.7); opacity: 0;   }
    100% { transform: scale(1.7); opacity: 0;   }
}
/* Respect user accessibility preference — no motion if they opt out */
@media (prefers-reduced-motion: reduce) {
    #wenjoy-chat-fab, #wenjoy-chat-fab::before { animation: none; }
}
#wenjoy-chat-fab .fab-logo {
    width: 34px; height: 34px; border-radius: 50%; object-fit: contain;
    background: #fff; padding: 3px;
    transition: opacity .2s;
}
#wenjoy-chat-fab.menu-open .fab-logo { opacity: 0; }
#wenjoy-chat-fab .fab-close-icon {
    position: absolute;
    width: 22px; height: 22px;
    color: #fff;
    opacity: 0;
    transition: opacity .2s;
    pointer-events: none;
}
#wenjoy-chat-fab.menu-open .fab-close-icon { opacity: 1; }
#wenjoy-chat-fab svg.fab-fallback { width: 26px; height: 26px; fill: #fff; }

.chat-badge {
    position: absolute;
    top: -4px; right: -4px;
    min-width: 20px; height: 20px;
    border-radius: 10px;
    background: #ef4444;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    font-family: var(--chat-font);
}

/* Expanding menu — two pill buttons stacked above the launcher */
.wj-fab-menu {
    order: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px) scale(.95);
    transform-origin: bottom right;
    transition: opacity .22s ease, transform .22s ease, visibility .22s;
    pointer-events: none;
}
.wj-fab-menu.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
.wj-fab-option {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px 10px 12px;
    background: #fff;
    border: none;
    border-radius: 30px;
    box-shadow: 0 4px 18px rgba(0,0,0,.14);
    cursor: pointer;
    text-decoration: none;
    color: #1f2937;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    transition: transform .18s, box-shadow .18s;
    font-family: var(--chat-font);
}
.wj-fab-option:hover {
    transform: translateX(-2px);
    box-shadow: 0 6px 22px rgba(0,0,0,.18);
}
.wj-fab-option .wj-fab-option-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.wj-fab-option .wj-fab-option-icon svg { width: 18px; height: 18px; fill: #fff; }
.wj-fab-option.live-chat .wj-fab-option-icon { background: var(--chat-brand); }
.wj-fab-option.whatsapp  .wj-fab-option-icon { background: #25d366; }

/* ── Chat window ── */
#wenjoy-chat-window {
    position: fixed;
    left: var(--wj-win-left, auto);
    right: var(--wj-win-right, 90px);
    bottom: 24px;
    /* 2026-06-09 — Dropped from 99999 to 1045 alongside the FAB cluster
       (see comment in .wj-fab-cluster above). 1045 is above the FAB
       (1030) so the window appears on top of its own launcher when open,
       but stays below Bootstrap modals (1050) and dropdowns (2000) so
       the chat never traps form interactions underneath. */
    z-index: 1045;
    width: 380px;
    max-width: calc(100vw - 24px);
    height: 600px;
    max-height: calc(100vh - 100px);
    background: #fff;
    border-radius: var(--chat-radius);
    box-shadow: 0 12px 48px rgba(0,0,0,.18);
    display: none;
    flex-direction: column;
    overflow: hidden;
    font-family: var(--chat-font);
    animation: chatSlideUp .22s ease;
}
#wenjoy-chat-window.open { display: flex; }

@media (max-width: 480px) {
    #wenjoy-chat-window {
        position: fixed;
        /* Anchor to the TOP and fill the dynamic viewport so the input bar sits
           just above the on-screen keyboard (height is also corrected live via
           visualViewport in JS for older iOS). */
        /* Anchor BOTH edges: top to the visible top, bottom to the keyboard top
           (computed in JS). This fills exactly the area above the keyboard with
           NO gap, and the input bar sits flush on the keyboard. */
        top: 0; left: 0; right: 0; bottom: 0;
        width: 100%;
        max-width: 100%;
        height: auto;
        border-radius: 0;
        animation: none; /* slide uses transform; we don't need it on mobile */
        will-change: top, bottom;
    }
    /* Mobile FAB — lifted above the bottom navigation bar.
       .bottom-nav (frontend) and .bnav (dashboard) both sit at bottom:0,
       ~56-60px tall. 88px gives a 28px gap above the nav and stays clear
       of the iOS home indicator. Also nudge in from the edge so the
       pulse ring doesn't clip against the viewport border. */
    .wj-fab-cluster {
        left: var(--wj-fab-left-m, auto);
        right: var(--wj-fab-right-m, 14px);
        bottom: calc(88px + env(safe-area-inset-bottom, 0px));
    }
    /* Pages without a bottom nav — allow the widget to sit lower.
       Add data-no-bottom-nav="1" on <body> (or a parent) to opt in. */
    body[data-no-bottom-nav="1"] .wj-fab-cluster,
    [data-no-bottom-nav="1"] .wj-fab-cluster {
        bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    }
    /* Slightly smaller launcher on small screens for better balance */
    #wenjoy-chat-fab { width: 54px; height: 54px; }
    #wenjoy-chat-fab .fab-logo { width: 30px; height: 30px; }
}

@keyframes chatSlideUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Header ── */
.chat-header {
    background: var(--chat-brand);
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.chat-header-avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: #fff;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
    padding: 4px;
}
.chat-header-avatar img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; }
.chat-header-info { flex: 1; min-width: 0; }
.chat-header-name { color: #fff; font-size: 14px; font-weight: 700; line-height: 1.2; }
.chat-header-sub  { color: rgba(255,255,255,.85); font-size: 11px; margin-top: 1px; }
.chat-header-status {
    width: 8px; height: 8px; border-radius: 50%;
    background: #22c55e;
    flex-shrink: 0;
}
.chat-header-status.offline { background: #94a3b8; }
.chat-header-actions { display: flex; align-items: center; gap: 4px; }
.chat-header-btn {
    background: none; border: none; cursor: pointer;
    color: rgba(255,255,255,.85);
    padding: 5px 6px; border-radius: 6px;
    display: flex; align-items: center; gap: 4px;
    font-size: 11px; font-family: var(--chat-font); font-weight: 600;
    white-space: nowrap;
}
.chat-header-btn:hover { color: #fff; background: rgba(255,255,255,.2); }
.chat-header-btn svg { width: 15px; height: 15px; }
/* Minimize (X) button — square, icon-only */
.chat-header-min { padding: 5px; }
/* End button — visible pill so guests can clearly end the chat */
.chat-header-end {
    padding: 5px 14px;
    background: rgba(255,255,255,.20);
    border-radius: 16px;
    font-weight: 700;
}
.chat-header-end:hover { background: rgba(255,255,255,.34); color: #fff; }

/* ── End-chat confirmation overlay ── */
/* ── End-chat feedback modal (centred, blurred backdrop) ── */
.chat-end-overlay {
    position: absolute;
    inset: 0;
    background: rgba(15,23,42,.45);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    z-index: 30;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
    animation: chatFbFade .18s ease;
}
.chat-end-overlay.active { display: flex; }
@keyframes chatFbFade { from { opacity: 0; } to { opacity: 1; } }

.chat-end-card {
    position: relative;
    background: #fff;
    border-radius: 18px;
    padding: 26px 22px 20px;
    width: 100%;
    max-width: 320px;
    text-align: center;
    box-shadow: 0 18px 50px rgba(0,0,0,.30);
    animation: chatFbPop .22s ease;
}
@keyframes chatFbPop { from { transform: scale(.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.chat-fb-close {
    position: absolute; top: 9px; right: 12px;
    background: none; border: none; font-size: 24px; line-height: 1;
    color: #b6bcc6; cursor: pointer; padding: 2px 6px;
}
.chat-fb-close:hover { color: #4b5563; }

.chat-fb-emoji { font-size: 30px; margin-bottom: 6px; }
.chat-fb-title { font-size: 17px; font-weight: 800; color: #111827; margin-bottom: 5px; }
.chat-fb-sub   { font-size: 13px; color: #6b7280; margin-bottom: 16px; line-height: 1.45; }

.chat-fb-stars { display: flex; justify-content: center; gap: 8px; margin-bottom: 16px; direction: ltr; }
.chat-fb-star  {
    font-size: 42px; line-height: 1; cursor: pointer; color: #e3e6ea;
    transition: color .12s, transform .12s;
}
.chat-fb-star:hover { transform: scale(1.14); }
.chat-fb-stars:hover .chat-fb-star { color: #fbbf24; }
.chat-fb-stars .chat-fb-star:hover ~ .chat-fb-star { color: #e3e6ea; }
.chat-fb-star.active { color: #fbbf24; }

.chat-fb-text {
    width: 100%; box-sizing: border-box; resize: none;
    border: 1px solid #e5e7eb; border-radius: 12px;
    padding: 10px 12px; font-size: 13px; font-family: var(--chat-font); color: #1f2937;
    outline: none; margin-bottom: 14px; min-height: 64px;
}
.chat-fb-text:focus { border-color: var(--chat-brand); box-shadow: 0 0 0 3px rgba(255,106,0,.12); }

.chat-fb-submit {
    width: 100%; padding: 12px; border: none; border-radius: 12px;
    background: var(--chat-brand); color: #fff; font-weight: 700; font-size: 14px;
    cursor: pointer; font-family: var(--chat-font); transition: background .15s, opacity .15s;
}
.chat-fb-submit:hover { background: var(--chat-brand-dark); }
.chat-fb-submit:disabled { opacity: .5; cursor: default; }
.chat-fb-skip {
    margin-top: 10px; background: none; border: none;
    color: #9ca3af; font-size: 12.5px; cursor: pointer; text-decoration: underline; font-family: var(--chat-font);
}
.chat-fb-skip:hover { color: #6b7280; }

.chat-fb-thanks { padding: 12px 4px; }
.chat-fb-thanks .em { font-size: 42px; }
.chat-fb-thanks h4 { font-size: 16px; font-weight: 800; color: #111827; margin: 8px 0 4px; }
.chat-fb-thanks p  { font-size: 13px; color: #6b7280; margin: 0; }

/* ── Messages area ── */
.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #f5f6f8;
    scroll-behavior: smooth;
    position: relative;
    -webkit-overflow-scrolling: touch; /* momentum scroll on iOS */
    overscroll-behavior: contain;
}
.chat-messages::-webkit-scrollbar { width: 4px; }
.chat-messages::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 4px; }

/* ── Welcome illustration ── */
.chat-welcome-illus {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    text-align: center;
    pointer-events: none;
}
.chat-welcome-illus svg { width: 80px; height: 80px; margin-bottom: 12px; }
.chat-welcome-illus h5 { font-size: 14px; font-weight: 700; color: #1f2937; margin: 0 0 4px; }
.chat-welcome-illus p  { font-size: 12px; color: #6b7280; margin: 0; }

/* ── Bubble ── */
.chat-bubble {
    max-width: 80%;
    padding: 9px 13px;
    border-radius: 14px;
    font-size: 13.5px;
    line-height: 1.5;
    word-break: break-word;
    white-space: pre-wrap; /* preserve the assistant's line breaks / sections */
}
/* Wenjoy team / bot — clean white card with a soft border (left). */
.chat-bubble.bot, .chat-bubble.admin, .chat-bubble.vendor {
    background: #ffffff;
    color: #1f2937;
    border: 1px solid #ececf0;
    border-radius: 4px 16px 16px 16px;
    box-shadow: 0 1px 2px rgba(16,24,40,.06);
    align-self: flex-start;
}
/* Guest — brand-coloured bubble (right). */
.chat-bubble.visitor {
    background: var(--chat-brand);
    color: #fff;
    border-radius: 16px 16px 4px 16px;
    box-shadow: 0 1px 2px rgba(255,106,0,.22);
    align-self: flex-end;
}
/* Links inside bubbles */
.chat-bubble.bot a, .chat-bubble.admin a, .chat-bubble.vendor a {
    color: var(--chat-brand); text-decoration: underline; word-break: break-all;
}
.chat-bubble.visitor a { color: #fff; text-decoration: underline; word-break: break-all; }
/* System notices — neutral, professional (not green) */
.chat-bubble.system {
    background: #eef1f5;
    color: #475569;
    font-size: 12px;
    align-self: center;
    max-width: 90%;
    text-align: center;
    border-radius: 8px;
    padding: 8px 14px;
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.chat-bubble.system .sys-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.chat-bubble.system.sys-join {
    background: #eef6ff;
    color: #1d4ed8;
    border-color: #cfe1ff;
}
.chat-bubble.system.sys-leave {
    background: #fef2f2;
    color: #991b1b;
    border-color: #fecaca;
}
.chat-bubble.system.sys-info {
    background: #f1f5f9;
    color: #64748b;
    border-color: #e2e8f0;
}
.chat-bubble strong { font-weight: 700; }
.chat-bubble .chat-img-attach { max-width: 200px; border-radius: 8px; display: block; margin-top: 4px; }
.chat-bubble .chat-file-attach {
    display: flex; align-items: center; gap: 7px;
    background: rgba(0,0,0,.06); border-radius: 8px; padding: 7px 10px; margin-top: 4px;
    text-decoration: none; color: inherit; font-size: 12px;
}
.chat-bubble .chat-file-attach svg { width: 16px; height: 16px; flex-shrink: 0; }

/* Sender label */
.chat-msg-wrap { display: flex; flex-direction: column; }
.chat-msg-wrap.visitor { align-items: flex-end; }
.chat-msg-wrap.bot, .chat-msg-wrap.admin, .chat-msg-wrap.vendor { align-items: flex-start; }
.chat-sender-name {
    font-size: 10px; color: #9ca3af; margin-bottom: 2px;
    font-weight: 600; letter-spacing: .3px;
}

/* ── Quick replies ── */
.chat-quick-replies {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-top: 6px;
    align-self: flex-start;
    max-width: 90%;
}
.chat-qr-btn {
    background: #fff;
    border: 1.5px solid var(--chat-brand);
    color: var(--chat-brand);
    border-radius: 20px;
    padding: 5px 12px;
    font-size: 12.5px;
    cursor: pointer;
    transition: background .15s, color .15s;
    font-family: var(--chat-font);
    white-space: nowrap;
}
.chat-qr-btn:hover { background: var(--chat-brand); color: #fff; }
.chat-qr-btn:disabled { opacity: .45; pointer-events: none; }

/* ── Property cards ── */
.chat-cards {
    display: flex; flex-direction: column; gap: 10px;
    align-self: flex-start;
    max-width: 100%;
    width: 100%;
}
.chat-card {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(16,24,40,.08);
    display: flex;
    flex-direction: column;
    transition: box-shadow .15s, transform .15s;
    border: 1px solid #ececf0;
}
.chat-card:hover { box-shadow: 0 6px 18px rgba(16,24,40,.14); transform: translateY(-1px); }
.chat-card-img-wrap { width: 100%; height: 124px; overflow: hidden; background: #f3f4f6; }
.chat-card-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chat-card-body { padding: 11px 13px 13px; display: flex; flex-direction: column; gap: 7px; }
.chat-card-title { font-size: 13.5px; font-weight: 700; color: #111827; line-height: 1.35; }
.chat-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.chat-card-price { font-size: 13px; color: var(--chat-brand); font-weight: 800; }
.chat-card-price small { font-weight: 600; color: #9ca3af; font-size: 11px; }
.chat-card-guests { font-size: 11.5px; color: #6b7280; font-weight: 600; }
.chat-card-btn {
    display: block; text-align: center; text-decoration: none;
    background: var(--chat-brand); color: #fff;
    font-size: 13px; font-weight: 700; padding: 8px 10px; border-radius: 10px;
    transition: background .15s; margin-top: 2px;
}
.chat-card-btn:hover { background: var(--chat-brand-dark); color: #fff; }

/* ── Forms ── */
.chat-form {
    background: #fff;
    border-radius: 12px;
    padding: 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,.07);
    align-self: flex-start;
    width: 100%;
    max-width: 95%;
    box-sizing: border-box;
}
.chat-form-field { margin-bottom: 10px; }
.chat-form-label { font-size: 11.5px; color: #6b7280; font-weight: 600; margin-bottom: 4px; display: block; }
.chat-form-input {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 13px;
    outline: none;
    font-family: var(--chat-font);
    box-sizing: border-box;
    background: #fff;
    color: #1f2937;
    -webkit-appearance: none;
    appearance: none;
}
.chat-form-input:focus { border-color: var(--chat-brand); box-shadow: 0 0 0 3px rgba(255,106,0,.12); }
.chat-form-submit {
    width: 100%;
    padding: 9px;
    background: var(--chat-brand);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    font-family: var(--chat-font);
    transition: background .15s;
}
.chat-form-submit:hover { background: var(--chat-brand-dark); }

/* ── Typing indicator ── */
.chat-typing {
    display: flex; align-items: center; gap: 4px;
    padding: 8px 12px;
    background: #fff;
    border-radius: 4px 14px 14px 14px;
    align-self: flex-start;
    box-shadow: 0 1px 4px rgba(0,0,0,.07);
}
.chat-typing span {
    width: 7px; height: 7px; border-radius: 50%;
    background: #9ca3af;
    animation: chatDot 1.2s infinite;
}
.chat-typing span:nth-child(2) { animation-delay: .2s; }
.chat-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes chatDot {
    0%,80%,100% { transform: scale(.8); opacity: .5; }
    40%          { transform: scale(1.1); opacity: 1; }
}

/* ── File preview bar ── */
#chat-file-preview {
    padding: 6px 12px;
    background: #f0f9ff;
    border-top: 1px solid #bae6fd;
    display: none;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #0369a1;
    flex-shrink: 0;
}
#chat-file-preview svg { width: 15px; height: 15px; flex-shrink: 0; }
#chat-file-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#chat-file-clear { background: none; border: none; cursor: pointer; color: #94a3b8; padding: 2px; display: flex; }
#chat-file-clear svg { width: 14px; height: 14px; }

/* ── Emoji picker ── */
#chat-emoji-panel {
    display: none;
    padding: 8px 10px;
    background: #fff;
    border-top: 1px solid #f0f0f0;
    flex-wrap: wrap;
    gap: 2px;
    flex-shrink: 0;
    max-height: 80px;
    overflow-y: auto;
}
#chat-emoji-panel.open { display: flex; }
.chat-emoji-btn {
    font-size: 20px;
    background: none; border: none; cursor: pointer;
    padding: 4px 5px; border-radius: 6px; line-height: 1;
    transition: background .1s;
}
.chat-emoji-btn:hover { background: #f3f4f6; }

/* ── Input bar ── */
.chat-input-bar {
    padding: 8px 10px;
    background: #fff;
    border-top: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.chat-bar-icon-btn {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: none;
    border: 1px solid #e5e7eb;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    color: #6b7280;
    transition: background .15s, color .15s;
}
.chat-bar-icon-btn:hover { background: #f3f4f6; color: var(--chat-brand); border-color: var(--chat-brand); }
.chat-bar-icon-btn svg { width: 16px; height: 16px; }
.chat-text-input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    font-size: 13.5px;
    outline: none;
    font-family: var(--chat-font);
    background: #f9fafb;
    resize: none;
    max-height: 100px;
    overflow-y: auto;
    line-height: 1.4;
}
.chat-text-input:focus { border-color: var(--chat-brand); background: #fff; }
.chat-send-btn {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--chat-brand);
    border: none;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: background .15s, transform .15s;
}
.chat-send-btn:hover { background: var(--chat-brand-dark); transform: scale(1.07); }
.chat-send-btn svg { width: 17px; height: 17px; fill: #fff; }
.chat-send-btn:disabled { opacity: .5; pointer-events: none; }
#chat-file-input { display: none; }

/* ── Rating ── */
.chat-rating { padding: 12px 16px; background: #fff; border-top: 1px solid #f0f0f0; text-align: center; flex-shrink: 0; }
.chat-rating p { font-size: 12px; color: #6b7280; margin: 0 0 8px; }
.chat-star-row { display: flex; justify-content: center; gap: 6px; }
.chat-star { font-size: 22px; cursor: pointer; color: #d1d5db; transition: color .12s; line-height: 1; }
.chat-star.active { color: #fbbf24; }
.chat-star-row:hover .chat-star { color: #fbbf24; }
.chat-star-row .chat-star:hover ~ .chat-star { color: #d1d5db; }

/* ── Position = LEFT ──
   When admin sets chat_position=left, #wj-chat-root carries data-chat-pos="left",
   overriding the edge custom properties for its descendants (.wj-fab-cluster and
   #wenjoy-chat-window). Default (no attribute / "right") keeps the var() fallbacks
   above (right:20px/90px/14px, align flex-end) — byte-identical to the previous
   inline output. Only the anchored edge and FAB alignment change. */
[data-chat-pos="left"] {
    --wj-fab-left: 20px;   --wj-fab-right: auto;
    --wj-win-left: 90px;   --wj-win-right: auto;
    --wj-fab-left-m: 14px; --wj-fab-right-m: auto;
    --wj-fab-align: flex-start;
}