/* ============================================================
   "ASK LIBERTY" GUIDED-HELP WIDGET
   Loaded from include/header.php so page_chrome.php lifts the
   <link> into <head> with the rest of the chrome.

   Namespaced lb-chat-* so it can never leak into admin/,
   designer/ or partner/ (site.css header explains why).

   Tokens are consumed from brand.css only - no new colour
   values, no new fonts, no new icon font. FontAwesome is
   already loaded site-wide.

   Z-ORDER, and why 3000
   ---------------------
   Below : welcomePopup / quoteSuccessPopup / --z-modal  9999
   Below : cursorFollower (script.js)                    99999
   Below : #productModal                                 2100
   Below : site.css overlays                             1900
   Above : #backToTop                                    1600
   So the auto-opening welcome popup correctly covers the
   launcher, and the launcher never floats over a modal.

   POSITION, and why bottom-right
   ------------------------------
   #backToTop already sits at right:1.6rem / bottom:5.5rem
   (style.css). The launcher goes directly beneath it at
   bottom:1.4rem so the two stack instead of colliding. It
   is the only other fixed element in that corner.
   ============================================================ */

/* ---------- Inline SVG icons ----------
   Every icon in the widget is inline <svg>, never an icon font. See the note
   on libo_chat_icons(): the storefront does not load FontAwesome consistently,
   so a font-based icon renders on some pages and on none of the others. These
   inherit `currentColor` and size with width/height, so one rule covers hover,
   focus and every state. */
.lb-chat-ico {
    flex-shrink: 0;
    display: block;
    overflow: visible;
}

/* ---------- Launcher ---------- */
.lb-chat-launcher {
    position: fixed;
    right: 1.6rem;
    bottom: 1.4rem;
    z-index: 3000;
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .7rem 1.1rem .7rem .85rem;
    border: 1px solid var(--brand-border-strong);
    border-radius: 100px;
    background: var(--brand-gold-gradient);
    color: #0a0a0a;
    font-family: var(--lb-sans, 'Inter', sans-serif);
    font-size: .88rem;
    font-weight: 700;
    letter-spacing: .01em;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
    transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
    -webkit-appearance: none;
    appearance: none;
}
.lb-chat-launcher:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 38px rgba(0, 0, 0, .55);
}
.lb-chat-launcher:active { transform: translateY(0); }
.lb-chat-launcher:focus-visible {
    outline: 2px solid var(--brand-gold);
    outline-offset: 3px;
}
.lb-chat-launcher .lb-chat-ico { width: 16px; height: 16px; }
.lb-chat-launcher .lb-chat-launcher-txt { white-space: nowrap; }

/* Hidden by default. chat.js adds .lb-chat-ready to <html> once
   the tree has parsed and the thread is interactive, so a
   visitor without JS never sees a button that does nothing.
   include/chat_widget.php prints the <noscript> fallback link
   that takes its place. */
.lb-chat-launcher { display: none; }
.lb-chat-ready .lb-chat-launcher { display: inline-flex; }

/* One-time attention pulse. Suppressed once the visitor has
   opened the panel - state lives in localStorage, the same
   pattern showWelcomePopup() uses. */
.lb-chat-launcher.is-new::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 100px;
    border: 2px solid var(--brand-gold);
    animation: lbChatPulse 2.4s ease-out 2;
    pointer-events: none;
}
@keyframes lbChatPulse {
    0%   { opacity: .55; transform: scale(1); }
    70%  { opacity: 0;   transform: scale(1.18); }
    100% { opacity: 0;   transform: scale(1.18); }
}

/* ---------- Panel ---------- */
.lb-chat-panel {
    position: fixed;
    right: 1.6rem;
    bottom: 5.6rem;
    z-index: 3000;
    width: 372px;
    max-width: calc(100vw - 2rem);
    height: 560px;
    max-height: calc(100vh - 9rem);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--brand-bg-raised);
    border: 1px solid var(--brand-border-strong);
    border-radius: var(--brand-radius-lg);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px) scale(.98);
    transform-origin: bottom right;
    transition: opacity .22s ease, transform .22s ease, visibility .22s;
    font-family: var(--lb-sans, 'Inter', sans-serif);
}
.lb-chat-panel.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

/* ---------- Header ---------- */
.lb-chat-head {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .85rem 1rem;
    background: linear-gradient(135deg, rgba(212, 175, 55, .12), transparent 70%), var(--brand-surface);
    border-bottom: 1px solid var(--brand-border);
    flex-shrink: 0;
}
.lb-chat-avatar {
    position: relative;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-gold-gradient);
    color: #0a0a0a;
    font-size: 1rem;
    border: 1px solid rgba(212, 175, 55, .5);
}
.lb-chat-avatar::after {
    content: '';
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--brand-success);
    border: 2px solid var(--brand-surface);
}
.lb-chat-id { min-width: 0; flex: 1; }
.lb-chat-id strong {
    display: block;
    font-size: .92rem;
    font-weight: 700;
    color: var(--brand-text);
    line-height: 1.25;
}
.lb-chat-id span {
    display: block;
    font-size: .72rem;
    color: var(--brand-text-muted);
    line-height: 1.3;
}
.lb-chat-back {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: none;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--brand-border);
    color: var(--brand-text-muted);
    cursor: pointer;
    font-size: .8rem;
    transition: background .15s, color .15s;
}
.lb-chat-back:hover { background: var(--brand-surface-hover); color: var(--brand-text); }
.lb-chat-back.is-on { display: inline-flex; }
.lb-chat-back:focus-visible { outline: 2px solid var(--brand-gold); outline-offset: 2px; }
.lb-chat-x {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--brand-border);
    color: var(--brand-text-muted);
    cursor: pointer;
    font-size: .85rem;
    transition: background .15s, color .15s;
}
.lb-chat-x:hover { background: var(--brand-surface-hover); color: var(--brand-text); }
.lb-chat-x:focus-visible { outline: 2px solid var(--brand-gold); outline-offset: 2px; }

/* ---------- Breadcrumb ---------- */
.lb-chat-crumb {
    flex-shrink: 0;
    display: none;
    align-items: center;
    gap: .35rem;
    padding: .45rem 1rem;
    font-size: .72rem;
    color: var(--brand-text-muted);
    background: rgba(255, 255, 255, .02);
    border-bottom: 1px solid var(--brand-border);
}
.lb-chat-crumb.is-on { display: flex; }
.lb-chat-crumb .lb-chat-ico { width: 10px; height: 10px; opacity: .5; }

/* ---------- Thread ---------- */
.lb-chat-thread {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 1rem .9rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: .7rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .16) transparent;
}
.lb-chat-thread::-webkit-scrollbar { width: 7px; }
.lb-chat-thread::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .16);
    border-radius: 10px;
}
.lb-chat-thread::-webkit-scrollbar-track { background: transparent; }

/* ---------- Messages ---------- */
.lb-chat-msg {
    max-width: 86%;
    padding: .6rem .8rem;
    font-size: .855rem;
    line-height: 1.58;
    border-radius: 14px;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.lb-chat-msg--bot {
    align-self: flex-start;
    background: var(--brand-surface);
    border: 1px solid var(--brand-border);
    border-bottom-left-radius: 5px;
    color: var(--brand-text);
    opacity: 0;
    transform: translateY(6px);
    animation: lbChatIn .2s ease forwards;
}
.lb-chat-msg--user {
    align-self: flex-end;
    background: rgba(212, 175, 55, .16);
    border: 1px solid rgba(212, 175, 55, .32);
    color: var(--brand-text);
    border-bottom-right-radius: 5px;
    font-weight: 600;
}
@keyframes lbChatIn { to { opacity: 1; transform: translateY(0); } }

.lb-chat-msg p { margin: 0 0 .55rem; }
.lb-chat-msg p:last-child { margin-bottom: 0; }
.lb-chat-msg b { color: var(--brand-gold); font-weight: 700; }
.lb-chat-msg em { font-style: italic; color: var(--brand-text-muted); }
.lb-chat-msg a { color: var(--brand-gold); text-decoration: underline; text-underline-offset: 2px; }
.lb-chat-note {
    margin: .7rem 0 0;
    padding: .55rem .7rem;
    background: rgba(255, 255, 255, .03);
    border-left: 2px solid var(--brand-gold);
    border-radius: 0 6px 6px 0;
    font-size: .8rem;
    color: var(--brand-text-muted);
    line-height: 1.5;
}
.lb-chat-mono {
    font-family: var(--brand-mono, monospace);
    font-size: .78rem;
    background: rgba(255, 255, 255, .07);
    padding: .05rem .3rem;
    border-radius: 4px;
}

/* ---------- Typing indicator ---------- */
.lb-chat-typing {
    align-self: flex-start;
    display: none;
    align-items: center;
    gap: .45rem;
    padding: .6rem .85rem;
    background: var(--brand-surface);
    border: 1px solid var(--brand-border);
    border-radius: 14px;
    border-bottom-left-radius: 5px;
}
.lb-chat-typing.is-on { display: flex; }
.lb-chat-typing i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--brand-text-muted);
    animation: lbChatBlink 1.25s ease-in-out infinite;
}
.lb-chat-typing i:nth-child(2) { animation-delay: .18s; }
.lb-chat-typing i:nth-child(3) { animation-delay: .36s; }
@keyframes lbChatBlink {
    0%, 60%, 100% { opacity: .3; transform: translateY(0); }
    30%           { opacity: 1;  transform: translateY(-3px); }
}

/* ---------- Typing caret ----------
   Sits inline immediately after the character currently being written, so it
   tracks the reveal across every element boundary in the answer rather than
   sitting at the end of the bubble. display:inline-block keeps it on the text
   baseline; the negative margin stops it opening a line box of its own. */
.lb-chat-caret {
    display: inline-block;
    width: 2px;
    height: 1.05em;
    margin: 0 0 -.14em 1px;
    vertical-align: text-bottom;
    background: var(--brand-gold);
    border-radius: 1px;
    animation: lbChatCaret 1s steps(1, end) infinite;
}
@keyframes lbChatCaret {
    0%, 50%   { opacity: 1; }
    50.01%, 100% { opacity: 0; }
}

/* ---------- Category tiles ---------- */
.lb-chat-cats {
    align-self: stretch;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .45rem;
    margin-top: .2rem;
}
.lb-chat-cat {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .6rem .65rem;
    background: var(--brand-surface);
    border: 1px solid var(--brand-border);
    border-radius: 10px;
    color: var(--brand-text);
    font-family: inherit;
    font-size: .8rem;
    font-weight: 600;
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
    transition: background .15s, border-color .15s, transform .12s;
}
.lb-chat-cat:hover {
    background: var(--brand-surface-hover);
    border-color: var(--brand-gold);
    transform: translateY(-1px);
}
.lb-chat-cat:focus-visible { outline: 2px solid var(--brand-gold); outline-offset: 2px; }
.lb-chat-cat-ico {
    width: 26px;
    height: 26px;
    padding: 5px;
    border-radius: 7px;
    background: rgba(212, 175, 55, .13);
    color: var(--brand-gold);
}
.lb-chat-cat:hover .lb-chat-cat-ico { background: rgba(212, 175, 55, .22); }
.lb-chat-cat span { min-width: 0; }

/* ---------- Chips ---------- */
.lb-chat-chips {
    align-self: stretch;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: .15rem;
}
.lb-chat-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .42rem .7rem;
    background: var(--brand-surface);
    border: 1px solid var(--brand-border-strong);
    border-radius: 100px;
    color: var(--brand-text);
    font-family: inherit;
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.lb-chat-chip:hover {
    background: var(--brand-gold-gradient);
    border-color: transparent;
    color: #0a0a0a;
}
.lb-chat-chip:focus-visible { outline: 2px solid var(--brand-gold); outline-offset: 2px; }
.lb-chat-chip-ico { width: 11px; height: 11px; opacity: .75; }
.lb-chat-chip--exit {
    background: transparent;
    border-color: rgba(212, 175, 55, .4);
    color: var(--brand-gold);
}
.lb-chat-chip--exit:hover { background: var(--brand-gold-gradient); color: #0a0a0a; }

/* ---------- Primary CTA inside an answer ----------
   Scoped as .lb-chat-msg .lb-chat-btn-primary on purpose.

   The generic `.lb-chat-msg a` rule above is specificity (0,1,1) - one class
   plus one type. A bare `.lb-chat-btn-primary` is only (0,1,0), so it LOSES,
   and the CTA inherited gold link colour on a gold gradient: unreadable. That
   is exactly how it rendered. Two classes beats one-class-plus-type, so the
   button now actually wins. */
.lb-chat-cta { margin: .75rem 0 .1rem; }
.lb-chat-msg .lb-chat-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .55rem .9rem;
    background: var(--brand-gold-gradient);
    color: #0a0a0a;
    font-size: .82rem;
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none;
    border-radius: 9px;
    transition: transform .15s, box-shadow .15s;
}
.lb-chat-msg .lb-chat-btn-primary:hover {
    color: #0a0a0a;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(212, 175, 55, .3);
}
.lb-chat-msg .lb-chat-btn-primary:focus-visible {
    color: #0a0a0a;
    outline: 2px solid var(--brand-gold);
    outline-offset: 2px;
}
.lb-chat-msg .lb-chat-btn-primary .lb-chat-ico {
    width: 14px;
    height: 14px;
    color: inherit;   /* inherits the button's near-black, not --brand-gold */
}

/* ---------- Price table inside an answer ---------- */
.lb-chat-price {
    margin: .65rem 0 .2rem;
    border: 1px solid var(--brand-border);
    border-radius: 10px;
    overflow: hidden;
}
.lb-chat-price-h {
    padding: .45rem .65rem;
    background: rgba(212, 175, 55, .1);
    border-bottom: 1px solid var(--brand-border);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--brand-gold);
}
.lb-chat-price-r {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: .8rem;
    padding: .35rem .65rem;
    font-size: .8rem;
    color: var(--brand-text-muted);
}
.lb-chat-price-r + .lb-chat-price-r { border-top: 1px solid rgba(255, 255, 255, .04); }
.lb-chat-price-r b {
    color: var(--brand-text);
    font-family: var(--brand-mono, monospace);
    font-size: .8rem;
    font-weight: 600;
    white-space: nowrap;
}

/* ---------- Footer: pinned human exit ---------- */
.lb-chat-foot {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    padding: .6rem .9rem;
    background: var(--brand-surface);
    border-top: 1px solid var(--brand-border);
    font-size: .74rem;
}
.lb-chat-foot-links { display: flex; align-items: center; gap: .9rem; }
.lb-chat-foot-links a {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    color: var(--brand-text-muted);
    text-decoration: none;
    font-weight: 600;
    transition: color .15s;
}
.lb-chat-foot-links a:hover { color: var(--brand-gold); }
.lb-chat-foot-links a:focus-visible { outline: 2px solid var(--brand-gold); outline-offset: 2px; }
.lb-chat-foot-links .lb-chat-ico { width: 13px; height: 13px; }
.lb-chat-foot-note {
    color: var(--brand-text-muted);
    font-size: .68rem;
    white-space: nowrap;
    opacity: .8;
}

/* ---------- No-JS fallback ---------- */
.lb-chat-nojs {
    position: fixed;
    right: 1.6rem;
    bottom: 1.4rem;
    z-index: 3000;
}
.lb-chat-nojs a {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .7rem 1.05rem;
    background: var(--brand-gold-gradient);
    color: #0a0a0a;
    font-size: .86rem;
    font-weight: 700;
    text-decoration: none;
    border-radius: 100px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
}

/* ---------- Body scroll lock while the panel is open ---------- */
.lb-chat-locked { overflow: hidden; }

/* ============================================================
   MOBILE - the 768px breakpoint script.js already uses to split
   its own desktop and mobile behaviour
   ============================================================ */
@media (max-width: 768px) {
    .lb-chat-launcher {
        right: 1rem;
        bottom: 1rem;
        width: 56px;
        height: 56px;
        padding: 0;
        justify-content: center;
        border-radius: 50%;
    }
    .lb-chat-launcher .lb-chat-launcher-txt { display: none; }
    .lb-chat-launcher .lb-chat-ico { width: 22px; height: 22px; }

    .lb-chat-panel {
        right: 0;
        left: 0;
        bottom: 0;
        top: 0;
        width: 100%;
        max-width: none;
        height: 100%;
        max-height: none;
        border-radius: 0;
        border: 0;
        transform: translateY(100%);
        transform-origin: bottom center;
    }
    .lb-chat-panel.is-open { transform: translateY(0); }

    .lb-chat-cats { grid-template-columns: 1fr; }
    .lb-chat-msg { max-width: 90%; }
    .lb-chat-foot-note { display: none; }
    .lb-chat-foot { justify-content: center; }

    /* Respect the iOS home indicator on devices without a real bottom bar. */
    .lb-chat-foot { padding-bottom: max(.6rem, env(safe-area-inset-bottom)); }

    .lb-chat-nojs { right: 1rem; bottom: 1rem; }
}

/* Short viewports: cap the panel so the thread never collapses to nothing. */
@media (min-width: 769px) and (max-height: 620px) {
    .lb-chat-panel { height: 470px; }
}

/* ============================================================
   REDUCED MOTION
   The thread still works and the content is identical - only the
   theatre is removed: no pulse, no bubble rise, no blinking dots,
   and answers appear immediately instead of after a typing beat.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .lb-chat-launcher,
    .lb-chat-launcher:hover,
    .lb-chat-panel,
    .lb-chat-cat,
    .lb-chat-btn-primary { transition: none !important; }
    .lb-chat-launcher:hover,
    .lb-chat-cat:hover,
    .lb-chat-btn-primary:hover { transform: none; }
    .lb-chat-launcher.is-new::after { animation: none; display: none; }
    .lb-chat-msg--bot { opacity: 1; transform: none; animation: none; }
    .lb-chat-typing i { animation: none; opacity: .7; }
    /* The typewriter is skipped entirely for reduced motion, so the caret
       should never appear at all; this is belt-and-braces for the case where
       chat.js is mid-reveal when the preference changes. */
    .lb-chat-caret { display: none; }
    .lb-chat-thread { scroll-behavior: auto; }
}

/* ============================================================
   HIGH CONTRAST / FOCUS VISIBILITY
   ============================================================ */
@media (prefers-contrast: more) {
    .lb-chat-panel { border-color: var(--brand-gold); }
    .lb-chat-msg--bot,
    .lb-chat-cat,
    .lb-chat-chip { border-color: rgba(255, 255, 255, .4); }
}

/* Coarse pointers (touch) get a larger tap target on the small controls. */
@media (pointer: coarse) {
    .lb-chat-back,
    .lb-chat-x { width: 40px; height: 40px; }
    .lb-chat-chip { padding: .6rem .85rem; }
}