/* ──────────────────────────────────────────────────────────────
   LXF Chat Widget  v1.0.0
   All values use --lxf-* design tokens from tokens.css.
   No magic pixels; no heading font/size/weight overrides.
   ────────────────────────────────────────────────────────────── */

/* Mobile CTA bar offset (56px inner height, verified in components.css).
   Defined as a local variable so it's easy to update in one place. */
:root {
    --lxf-chat-cta-h:   calc(56px + env(safe-area-inset-bottom, 0px));
    --lxf-chat-toggle-h: 44px; /* 20px icon plus 24px vertical padding */
    --lxf-chat-badge-h: 0px; /* set by ResizeObserver in ChatWidget.php when Google Merchant badge is present */
}

/* ── Toggle button ───────────────────────────────────────────── */

.lxf-chat__toggle {
    position: fixed;
    min-height: var(--lxf-chat-toggle-h);
    bottom: calc(1.5rem + var(--lxf-chat-badge-h));
    right:  1.5rem;
    z-index: 999;                       /* above mobile CTA (998); below panel */
    isolation: isolate;                 /* stacking context for badge */

    display: flex;
    align-items: center;
    gap: 0.5rem;

    padding: 0.75rem 1.25rem;
    border: none;
    border-radius: 2rem;                /* pill */
    cursor: pointer;

    background-color: var(--lxf-navy);
    color:            var(--lxf-white);
    font-family:      var(--lxf-font-body);
    font-size:        0.9375rem;
    font-weight:      600;
    line-height:      1;
    box-shadow:       var(--lxf-shadow-lg);

    transition:
        background-color var(--lxf-transition),
        transform        var(--lxf-transition),
        box-shadow       var(--lxf-transition);
    will-change: transform;
}

.lxf-chat__toggle:hover {
    background-color: #003580;          /* navy darkened ~10% */
    transform:        translateY(-1px);
    box-shadow:       0 8px 28px rgba(0, 37, 89, 0.22);
}

/* Unread badge — shown when messages arrive while panel is closed */
.lxf-chat__badge {
    position:      absolute;
    top:           -7px;
    right:         -7px;
    min-width:     20px;
    height:        20px;
    padding:       0 5px;
    background:    #e53e3e;
    color:         #fff;
    border-radius: 10px;
    font-size:     0.6875rem;
    font-weight:   700;
    line-height:   20px;
    text-align:    center;
    white-space:   nowrap;
    box-sizing:    border-box;
    pointer-events: none;

    opacity:    0;
    transform:  scale(0.5);
    transition:
        opacity   0.2s ease,
        transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.lxf-chat__badge.is-visible {
    opacity:   1;
    transform: scale(1);
}

.lxf-chat__toggle:focus-visible {
    outline:        2px solid var(--lxf-blue);
    outline-offset: 3px;
}

.lxf-chat__toggle-icon {
    width:  20px;
    height: 20px;
    flex-shrink: 0;
}

/* Hide label on very small screens to save horizontal space */
@media (max-width: 359px) {
    .lxf-chat__toggle-label {
        display: none;
    }
}

/* ── Panel ───────────────────────────────────────────────────── */

.lxf-chat__panel {
    position:    fixed;
    bottom:      calc(5.5rem + var(--lxf-chat-badge-h)); /* clears the toggle button */
    right:       1.5rem;
    z-index:     1100;                  /* above header (1000) and mobile CTA (998); below modal overlay (9000) */

    width:       22rem;
    max-height:  70vh;

    display:     flex;
    flex-direction: column;

    background-color: var(--lxf-white);
    border-radius:    var(--lxf-radius-lg);
    box-shadow:       var(--lxf-shadow-lg);
    overflow:    hidden;

    /* Hidden state */
    opacity:         0;
    transform:       translateY(10px);
    pointer-events:  none;
    transition:
        opacity   var(--lxf-trans-std),
        transform var(--lxf-trans-std);
    will-change: opacity, transform;
}

.lxf-chat__panel.is-open {
    opacity:        1;
    transform:      translateY(0);
    pointer-events: auto;
}

/* ── Panel header ────────────────────────────────────────────── */

.lxf-chat__header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         0.875rem 1rem;
    background-color: var(--lxf-navy);
    color:           var(--lxf-white);
    flex-shrink:     0;
}

.lxf-chat__header-title {
    font-family: var(--lxf-font-body);
    font-size:   0.9375rem;
    font-weight: 600;
    line-height: 1.2;
    margin:      0;
}

.lxf-chat__header-sub {
    font-size:  0.75rem;
    opacity:    0.75;
    margin-top: 0.125rem;
}

.lxf-chat__close {
    display:     flex;
    align-items: center;
    justify-content: center;
    width:       30px;
    height:      30px;
    border:      none;
    border-radius: 50%;
    cursor:      pointer;
    background:  rgba(255, 255, 255, 0.12);
    color:       var(--lxf-white);
    flex-shrink: 0;
    transition:  background var(--lxf-transition);
}

.lxf-chat__close:hover {
    background: rgba(255, 255, 255, 0.22);
}

.lxf-chat__close:focus-visible {
    outline:        2px solid var(--lxf-white);
    outline-offset: 2px;
}

.lxf-chat__close svg {
    width:  14px;
    height: 14px;
    display: block;
}

/* ── Message thread ──────────────────────────────────────────── */

.lxf-chat__thread {
    flex:        1;
    overflow-y:  auto;
    padding:     1rem;
    display:     flex;
    flex-direction: column;
    gap:         0.625rem;
    scroll-behavior: smooth;
    overscroll-behavior: contain;
}

/* Scrollbar styling (Webkit) */
.lxf-chat__thread::-webkit-scrollbar        { width: 4px; }
.lxf-chat__thread::-webkit-scrollbar-track  { background: transparent; }
.lxf-chat__thread::-webkit-scrollbar-thumb  { background: var(--lxf-gray-300); border-radius: 2px; }

/* Base message bubble */
.lxf-chat__msg {
    max-width:    85%;
    padding:      0.625rem 0.875rem;
    border-radius: var(--lxf-radius-lg);
    font-size:    0.875rem;
    line-height:  1.5;
    color:        var(--lxf-text-body);
    word-break:   break-word;
}

/* AI message — left-aligned, surface background */
.lxf-chat__msg--ai {
    align-self:       flex-start;
    background-color: var(--lxf-gray-100);
    border-bottom-left-radius: 4px;
}

/* User message — right-aligned, blue pill */
.lxf-chat__msg--user {
    align-self:       flex-end;
    background-color: var(--lxf-blue-action, #1d57d4);
    color:            var(--lxf-white);
    border-bottom-right-radius: 4px;
}

/* Staff reply — left-aligned, accent left-border, distinct from AI */
.lxf-chat__msg--staff {
    align-self:       flex-start;
    background-color: var(--lxf-white);
    border:           1px solid var(--lxf-border);
    border-left:      3px solid var(--lxf-blue);
    border-bottom-left-radius: 4px;
    padding-left:     0.75rem;
}

.lxf-chat__msg-sender {
    display:     block;
    font-size:   0.6875rem;
    font-weight: 600;
    color:       var(--lxf-blue-text, #1d57d4);
    margin-bottom: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Escalation notice banner */
.lxf-chat__notice {
    align-self:       stretch;
    padding:          0.625rem 0.875rem;
    background-color: var(--lxf-light-blue);
    border-radius:    var(--lxf-radius);
    font-size:        0.8125rem;
    line-height:      1.5;
    color:            var(--lxf-navy);
    text-align:       center;
}

/* Typing indicator dots */
.lxf-chat__typing {
    align-self: flex-start;
    display:    flex;
    gap:        4px;
    padding:    0.625rem 0.875rem;
    background-color: var(--lxf-gray-100);
    border-radius:    var(--lxf-radius-lg);
    border-bottom-left-radius: 4px;
}

.lxf-chat__typing span {
    width:  6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--lxf-gray-400);
    animation: lxf-chat-dot 1.2s infinite ease-in-out;
}

.lxf-chat__typing span:nth-child(2) { animation-delay: 0.2s; }
.lxf-chat__typing span:nth-child(3) { animation-delay: 0.4s; }

@keyframes lxf-chat-dot {
    0%, 80%, 100% { transform: scale(0.8); opacity: 0.4; }
    40%           { transform: scale(1.1); opacity: 1;   }
}

/* Error message */
.lxf-chat__msg--error {
    align-self:       stretch;
    background-color: #fff0f0;
    border:           1px solid #fcd4d4;
    color:            #c0392b;
    font-size:        0.8125rem;
    text-align:       center;
    border-radius:    var(--lxf-radius);
}

/* ── Input row ───────────────────────────────────────────────── */

.lxf-chat__input-row {
    display:       flex;
    align-items:   flex-end;
    gap:           0.5rem;
    padding:       0.75rem 1rem;
    border-top:    1px solid var(--lxf-border);
    background-color: var(--lxf-white);
    flex-shrink:   0;
}

.lxf-chat__textarea {
    flex:           1;
    resize:         none;
    border:         1.5px solid var(--lxf-border-strong);
    border-radius:  var(--lxf-radius);
    padding:        0.5rem 0.75rem;
    font-family:    var(--lxf-font-body);
    font-size:      0.875rem;
    line-height:    1.5;
    color:          var(--lxf-text-body);
    min-height:     2.5rem;
    max-height:     7rem;
    overflow-y:     auto;
    background-color: var(--lxf-white);
    transition:     border-color var(--lxf-transition);
    field-sizing:   content;           /* auto-grows where supported */
}

.lxf-chat__textarea:focus {
    outline:      none;
    border-color: var(--lxf-blue);
    box-shadow:   0 0 0 3px rgba(43, 111, 238, 0.15);
}

.lxf-chat__textarea:disabled {
    background-color: var(--lxf-gray-100);
    cursor: not-allowed;
    opacity: 0.7;
}

.lxf-chat__send {
    flex-shrink: 0;
    display:     flex;
    align-items: center;
    justify-content: center;
    width:       36px;
    height:      36px;
    border:      none;
    border-radius: 50%;
    cursor:      pointer;
    background-color: var(--lxf-blue);
    color:       var(--lxf-white);
    transition:
        background-color var(--lxf-transition),
        transform        var(--lxf-transition);
}

.lxf-chat__send:hover:not(:disabled) {
    background-color: #1a5fd6;         /* blue darkened */
    transform: scale(1.05);
}

.lxf-chat__send:focus-visible {
    outline:        2px solid var(--lxf-blue);
    outline-offset: 3px;
}

.lxf-chat__send:disabled {
    opacity: 0.45;
    cursor:  not-allowed;
    transform: none;
}

.lxf-chat__send svg {
    width:  16px;
    height: 16px;
    display: block;
}

/* Ended state — muted input area */
.lxf-chat__input-row--ended {
    background-color: var(--lxf-gray-100);
}

.lxf-chat__ended-msg {
    flex:       1;
    font-size:  0.8125rem;
    color:      var(--lxf-text-muted);
    text-align: center;
    padding:    0.375rem 0;
}

.lxf-chat__human-link {
    display:     block;
    text-align:  center;
    font-size:   0.6875rem;
    padding:     0.375rem 0.875rem 0;
    color:       var(--lxf-blue-text, #1d57d4);
    text-decoration: none;
}
.lxf-chat__human-link:hover { text-decoration: underline; }

.lxf-chat__disclaimer {
    margin:     0;
    padding:    0.25rem 0.875rem 0.375rem;
    font-size:  0.6875rem;
    font-style: italic;
    color:      var(--lxf-text-muted);
    text-align: center;
    line-height: 1.4;
}

/* ── Mobile breakpoint ───────────────────────────────────────── */
/* Matches the breakpoint at which .lxf-mobile-cta becomes visible (max-width: 767px in components.css). */

@media (max-width: 767px) {
    footer:has([data-lxf-disclosure="footer"]) {
        padding-bottom: calc(var(--lxf-chat-cta-h) + 0.875rem + var(--lxf-chat-toggle-h));
    }

    .lxf-chat__toggle {
        bottom: calc(var(--lxf-chat-cta-h) + 0.875rem);
        right:  0.875rem;
    }

    .lxf-chat__panel {
        width:         100vw;
        right:         0;
        bottom:        var(--lxf-chat-cta-h);
        max-height:    85vh;
        border-radius: var(--lxf-radius-lg) var(--lxf-radius-lg) 0 0;
    }
}

/* ── Header actions (ticket + close buttons) ─────────────────── */

.lxf-chat__header-actions {
    display:     flex;
    align-items: center;
    gap:         0.375rem;
    flex-shrink: 0;
}

.lxf-chat__ticket-btn {
    display:       inline-flex;
    align-items:   center;
    padding:       0.3125rem 0.6875rem;
    border:        1.5px solid rgba(255, 255, 255, 0.45);
    border-radius: 1rem;
    background:    transparent;
    color:         var(--lxf-white);
    font-family:   var(--lxf-font-body);
    font-size:     0.75rem;
    font-weight:   600;
    cursor:        pointer;
    white-space:   nowrap;
    transition:
        background-color var(--lxf-transition),
        border-color     var(--lxf-transition);
}

.lxf-chat__ticket-btn:hover {
    background-color: rgba(255, 255, 255, 0.15);
    border-color:     rgba(255, 255, 255, 0.70);
}

.lxf-chat__ticket-btn:focus-visible {
    outline:        2px solid var(--lxf-white);
    outline-offset: 2px;
}

/* ── Page suggestion link ─────────────────────────────────────── */

.lxf-chat__suggestion {
    align-self: flex-start;
    margin-top: 0.125rem;
}

.lxf-chat__suggestion a {
    display:          inline-flex;
    align-items:      center;
    gap:              0.25rem;
    padding:          0.4375rem 0.875rem;
    background-color: var(--lxf-white);
    border:           1.5px solid var(--lxf-blue);
    border-radius:    1rem;
    color:            var(--lxf-blue-text, #1d57d4);
    font-family:      var(--lxf-font-body);
    font-size:        0.8125rem;
    font-weight:      600;
    text-decoration:  none;
    transition:
        background-color var(--lxf-transition),
        color            var(--lxf-transition);
}

.lxf-chat__suggestion a:hover {
    background-color: var(--lxf-blue-action, #1d57d4);
    color:            var(--lxf-white);
}

/* Booking / external CTA — solid filled button */
.lxf-chat__suggestion--btn {
    align-self: center;
    margin-top: 0.375rem;
}

.lxf-chat__suggestion--btn a {
    background-color: var(--lxf-green, #00c37d);
    border-color:     var(--lxf-green, #00c37d);
    color:            var(--lxf-white);
    padding:          0.5rem 1.25rem;
    font-size:        0.875rem;
    justify-content:  center;
    width:            100%;
    box-sizing:       border-box;
}

.lxf-chat__suggestion--btn a:hover {
    background-color: #00a86b;
    border-color:     #00a86b;
    color:            var(--lxf-white);
}

/* ── Cherry financing CTA ────────────────────────────────────── */

.lxf-chat__cherry {
    align-self: flex-start;
    margin-top: 0.125rem;
}

.lxf-chat__cherry-btn {
    display:          inline-flex;
    align-items:      center;
    flex-wrap:        wrap;
    gap:              0.15em;
    padding:          0.5rem 1rem;
    background-color: #00b36b;
    color:            #fff;
    font-family:      var(--lxf-font-body);
    font-size:        0.8125rem;
    font-weight:      600;
    border:           none;
    border-radius:    1rem;
    line-height:      1.3;
    cursor:           pointer;
    transition:       background-color var(--lxf-transition);
}

.lxf-chat__cherry-btn strong {
    font-weight: 800;
}

.lxf-chat__cherry-btn:hover {
    background-color: #009a5c;
    color:            #fff;
}

/* ── Leave-a-message ticket form ─────────────────────────────── */

.lxf-chat__ticket-form {
    align-self:       stretch;
    background-color: var(--lxf-gray-100);
    border-radius:    var(--lxf-radius);
    padding:          0.875rem;
    display:          flex;
    flex-direction:   column;
    gap:              0.625rem;
    margin-top:       0.25rem;
}

.lxf-chat__ticket-field {
    display:       flex;
    flex-direction: column;
    gap:           0.25rem;
}

.lxf-chat__ticket-field label {
    font-family:  var(--lxf-font-body);
    font-size:    0.75rem;
    font-weight:  600;
    color:        var(--lxf-text-body);
}

.lxf-tf__input,
.lxf-tf__textarea {
    width:            100%;
    border:           1.5px solid var(--lxf-border-strong);
    border-radius:    var(--lxf-radius);
    padding:          0.4375rem 0.625rem;
    font-family:      var(--lxf-font-body);
    font-size:        0.8125rem;
    line-height:      1.4;
    color:            var(--lxf-text-body);
    background-color: var(--lxf-white);
    box-sizing:       border-box;
    transition:       border-color var(--lxf-transition);
}

.lxf-tf__input:focus,
.lxf-tf__textarea:focus {
    outline:      none;
    border-color: var(--lxf-blue);
    box-shadow:   0 0 0 2px rgba(43, 111, 238, 0.15);
}

.lxf-tf__textarea {
    resize:         vertical;
    min-height:     4.5rem;
    field-sizing:   content;
}

.lxf-tf__btn-row {
    display:     flex;
    align-items: center;
    gap:         0.5rem;
}

.lxf-tf__submit {
    padding:          0.5rem 1.125rem;
    background-color: var(--lxf-blue-action, #1d57d4);
    color:            var(--lxf-white);
    font-family:      var(--lxf-font-body);
    font-size:        0.875rem;
    font-weight:      600;
    border:           none;
    border-radius:    var(--lxf-radius);
    cursor:           pointer;
    transition:       background-color var(--lxf-transition);
}

.lxf-tf__submit:hover:not(:disabled) {
    background-color: #1a5fd6;
}

.lxf-tf__submit:disabled {
    opacity: 0.55;
    cursor:  not-allowed;
}

.lxf-tf__cancel {
    padding:          0.5rem 1rem;
    background:       transparent;
    color:            var(--lxf-text-muted);
    font-family:      var(--lxf-font-body);
    font-size:        0.875rem;
    font-weight:      500;
    border:           1.5px solid var(--lxf-border);
    border-radius:    var(--lxf-radius);
    cursor:           pointer;
    transition:       border-color var(--lxf-transition), color var(--lxf-transition);
}

.lxf-tf__cancel:hover {
    border-color: var(--lxf-border-strong);
    color:        var(--lxf-text-body);
}

.lxf-tf__note {
    font-size:  0.6875rem;
    color:      var(--lxf-text-muted);
    margin:     0;
    line-height: 1.5;
}

.lxf-tf__success {
    font-size:   0.875rem;
    color:       #0a6e3f;
    font-weight: 600;
    margin:      0;
    text-align:  center;
    padding:     0.5rem 0;
}

/* ── Cherry financing modal ──────────────────────────────────── */

.lxf-cherry-modal {
    position:         fixed;
    inset:            0;
    z-index:          9000;
    background-color: rgba(0, 0, 0, 0.55);
    display:          flex;
    align-items:      flex-start;
    justify-content:  center;
    padding:          2rem 1rem;
    overflow-y:       auto;

    opacity:         0;
    pointer-events:  none;
    transition:      opacity var(--lxf-trans-std);
}

.lxf-cherry-modal.is-open {
    opacity:        1;
    pointer-events: auto;
}

.lxf-cherry-modal__inner {
    background-color: var(--lxf-white);
    border-radius:    var(--lxf-radius-lg);
    box-shadow:       var(--lxf-shadow-lg);
    width:            100%;
    max-width:        560px;
    display:          flex;
    flex-direction:   column;

    transform:        translateY(12px);
    transition:       transform var(--lxf-trans-std);
}

.lxf-cherry-modal.is-open .lxf-cherry-modal__inner {
    transform: translateY(0);
}

.lxf-cherry-modal__header {
    display:          flex;
    align-items:      center;
    justify-content:  space-between;
    padding:          1rem 1.25rem;
    border-bottom:    1px solid var(--lxf-border);
    flex-shrink:      0;
}

.lxf-cherry-modal__title {
    font-family: var(--lxf-font-body);
    font-size:   1rem;
    font-weight: 600;
    color:       var(--lxf-navy);
}

.lxf-cherry-modal__close {
    display:     flex;
    align-items: center;
    justify-content: center;
    width:       32px;
    height:      32px;
    border:      none;
    border-radius: 50%;
    background:  var(--lxf-gray-100);
    color:       var(--lxf-text-muted);
    cursor:      pointer;
    flex-shrink: 0;
    transition:  background var(--lxf-transition), color var(--lxf-transition);
}

.lxf-cherry-modal__close:hover {
    background: var(--lxf-gray-200, #e5e7eb);
    color:      var(--lxf-text-body);
}

.lxf-cherry-modal__close:focus-visible {
    outline:        2px solid var(--lxf-blue);
    outline-offset: 2px;
}

.lxf-cherry-modal__close svg {
    width:   14px;
    height:  14px;
    display: block;
}

.lxf-cherry-modal__body {
    padding: 0;
}

/* ── Reduced motion ──────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .lxf-chat__panel,
    .lxf-chat__toggle,
    .lxf-chat__typing span,
    .lxf-cherry-modal,
    .lxf-cherry-modal__inner {
        transition: none;
        animation:  none;
    }
}