/* ==========================================================================
   Palistory Assistant — lightweight scripted chat widget (no backend)
   Opens from the header search button. Matches user text against keyword
   intents and replies with helpful answers + links. On-brand colors.
   ========================================================================== */

:root {
    --pa-green: #2e512d;
    --pa-maroon: #781911;
    --pa-smoke: #F8F8F8;
    --pa-ink: #1F1F1F;
}

/* Overlay + panel */
.pa-overlay {
    position: fixed;
    inset: 0;
    z-index: 99998;
    background: rgba(31, 31, 31, 0.45);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.pa-overlay.is-open { opacity: 1; visibility: visible; }

.pa-panel {
    position: fixed;
    z-index: 99999;
    right: 24px;
    bottom: 24px;
    width: 380px;
    max-width: calc(100vw - 32px);
    height: 560px;
    max-height: calc(100vh - 48px);
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.45);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(24px) scale(0.98);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.3s ease, visibility 0.3s ease;
}
.pa-panel.is-open { transform: none; opacity: 1; visibility: visible; }

/* Header */
.pa-header {
    background: var(--pa-green);
    color: #fff;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.pa-header .pa-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex: 0 0 auto;
}
.pa-header .pa-meta { line-height: 1.2; }
.pa-header .pa-title { font-weight: 700; font-size: 16px; }
.pa-header .pa-status { font-size: 12px; opacity: 0.85; display: flex; align-items: center; gap: 6px; }
.pa-header .pa-status::before {
    content: "";
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #8FD694;
}
.pa-header .pa-close {
    margin-left: auto;
    background: transparent;
    border: 0;
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    opacity: 0.85;
    transition: opacity 0.2s ease;
}
.pa-header .pa-close:hover { opacity: 1; }

/* Message log */
.pa-log {
    flex: 1;
    overflow-y: auto;
    padding: 18px;
    background: var(--pa-smoke);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.pa-msg {
    max-width: 85%;
    padding: 11px 15px;
    border-radius: 14px;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--pa-ink);
    animation: paFade 0.3s ease both;
}
.pa-msg a { color: var(--pa-maroon); font-weight: 700; text-decoration: underline; }
.pa-msg.bot {
    background: #fff;
    border: 1px solid #ECECEC;
    border-bottom-left-radius: 4px;
    align-self: flex-start;
}
.pa-msg.user {
    background: var(--pa-green);
    color: #fff;
    border-bottom-right-radius: 4px;
    align-self: flex-end;
}
@keyframes paFade {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

/* Typing dots */
.pa-typing { display: inline-flex; gap: 4px; align-self: flex-start; padding: 13px 16px; background: #fff; border: 1px solid #ECECEC; border-radius: 14px; border-bottom-left-radius: 4px; }
.pa-typing span { width: 7px; height: 7px; border-radius: 50%; background: #bbb; animation: paBounce 1.2s infinite ease-in-out; }
.pa-typing span:nth-child(2) { animation-delay: 0.2s; }
.pa-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes paBounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-5px); opacity: 1; } }

/* Quick-reply chips */
.pa-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 18px 12px;
    background: var(--pa-smoke);
}
.pa-chip {
    background: #fff;
    border: 1px solid var(--pa-green);
    color: var(--pa-green);
    font-size: 13px;
    font-weight: 600;
    padding: 7px 13px;
    border-radius: 20px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}
.pa-chip:hover { background: var(--pa-green); color: #fff; }

/* Follow-up chips rendered inside the chat log, under a bot answer */
.pa-followups {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    align-self: flex-start;
    max-width: 90%;
    margin: -2px 0 2px;
    animation: paFade 0.3s ease both;
}
.pa-chip-sm {
    font-size: 12.5px;
    padding: 6px 12px;
    background: #fff;
    border: 1px dashed var(--pa-green);
    color: var(--pa-green);
    border-radius: 18px;
    cursor: pointer;
    font-weight: 600;
    transition: background 0.2s ease, color 0.2s ease, border-style 0.2s ease;
}
.pa-chip-sm:hover { background: var(--pa-green); color: #fff; border-style: solid; }

/* Input */
.pa-input {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border-top: 1px solid #ECECEC;
    background: #fff;
}
.pa-input input {
    flex: 1;
    border: 1px solid #DDD;
    border-radius: 22px;
    padding: 11px 16px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s ease;
}
.pa-input input:focus { border-color: var(--pa-green); }
.pa-input button {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 0;
    background: var(--pa-green);
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    flex: 0 0 auto;
    transition: background 0.2s ease, transform 0.2s ease;
}
.pa-input button:hover { background: var(--pa-maroon); transform: scale(1.05); }

@media (max-width: 480px) {
    .pa-panel { right: 8px; bottom: 8px; height: calc(100vh - 16px); }
}

/* --- Pop-out nudge bubble (speech cloud) -------------------------------- */
.pa-nudge {
    position: fixed;
    left: 0;          /* JS sets the live left/top to track the search button */
    top: 0;
    z-index: 99997;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 270px;
    padding: 13px 38px 13px 15px;
    background: #fff;
    color: var(--pa-ink);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    border-radius: 18px;
    border: 1px solid rgba(46, 81, 45, 0.15);
    box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.35);
    cursor: pointer;
    transform-origin: top right;
    transform: translateY(-10px) scale(0.85);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
                opacity 0.3s ease, visibility 0.3s ease;
}
.pa-nudge.is-open {
    transform: none;
    opacity: 1;
    visibility: visible;
    animation: paNudgeWiggle 2.2s ease-in-out 0.6s 2;
}
/* tail pointing UP toward the header search button */
.pa-nudge::after {
    content: "";
    position: absolute;
    top: -7px;
    right: var(--tail-right, 26px);
    width: 16px;
    height: 16px;
    background: #fff;
    border-left: 1px solid rgba(46, 81, 45, 0.15);
    border-top: 1px solid rgba(46, 81, 45, 0.15);
    transform: rotate(45deg);
}
/* When shown ABOVE the trigger (mobile FAB): move the tail to the bottom,
   pointing DOWN at the button, and flip the pop-in origin. */
.pa-nudge.pa-nudge-above { transform-origin: bottom right; }
.pa-nudge.pa-nudge-above::after {
    top: auto;
    bottom: -7px;
    border-left: 0;
    border-top: 0;
    border-right: 1px solid rgba(46, 81, 45, 0.15);
    border-bottom: 1px solid rgba(46, 81, 45, 0.15);
}
.pa-nudge:hover { box-shadow: 0 22px 48px -16px rgba(0, 0, 0, 0.45); }
.pa-nudge-emoji { font-size: 20px; flex: 0 0 auto; }
.pa-nudge-text { position: relative; z-index: 1; }
.pa-nudge-close {
    position: absolute;
    top: 6px;
    right: 8px;
    width: 20px;
    height: 20px;
    border: 0;
    border-radius: 50%;
    background: rgba(46, 81, 45, 0.08);
    color: var(--pa-ink);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
    transition: background 0.2s ease;
}
.pa-nudge-close:hover { background: rgba(120, 25, 17, 0.15); }

@keyframes paNudgeWiggle {
    0%, 100% { transform: none; }
    25%      { transform: rotate(-2.5deg); }
    75%      { transform: rotate(2.5deg); }
}

@media (max-width: 480px) {
    /* Search button is hidden on mobile, so the nudge generally won't show;
       cap width just in case a visible toggler appears. */
    .pa-nudge { max-width: 220px; }
}

@media (prefers-reduced-motion: reduce) {
    .pa-overlay, .pa-panel, .pa-msg, .pa-input button { transition: none !important; animation: none !important; }
    .pa-typing span { animation: none !important; }
    .pa-nudge { transition: opacity 0.2s ease, visibility 0.2s ease !important; transform: none !important; }
    .pa-nudge.is-open { animation: none !important; }
    .pa-fab { transition: none !important; animation: none !important; }
}

/* --- Floating action button ----------------------------------------------
   The assistant's persistent opener, created by the JS on every page.
   Mobile/tablet (<992px): hugs the bottom-RIGHT corner, stacked just above
   the scroll-to-top button (right:30px / bottom:55px, 50px tall).
   Desktop/MacBook (>=992px): pinned to the bottom-LEFT corner, styled like
   the old navbar chat icon (white circle, green icon, maroon ring), which
   is now hidden — see the desktop media block below. */
.pa-fab {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 99996;
    width: 54px;
    height: 54px;
    border: 0;
    border-radius: 50%;
    background: var(--pa-green);
    color: #fff;
    font-size: 21px;
    line-height: 54px;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.45);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    animation: paFabGlow 2.4s ease-in-out infinite;
}
.pa-fab:hover, .pa-fab:focus-visible { background: var(--pa-maroon); transform: scale(1.06); outline: none; }
.pa-fab:active { transform: scale(0.96); }

/* Pulsing glow so the chat button catches the eye on mobile. */
@keyframes paFabGlow {
    0%, 100% { box-shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.45), 0 0 0 0 rgba(46, 81, 45, 0.55); }
    50%      { box-shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.45), 0 0 22px 8px rgba(46, 81, 45, 0.0); }
}
/* Desktop / MacBook: move the opener to the lower-LEFT of the screen and
   match the old navbar icon's look (white circle, green icon, maroon ring).
   Offsets mirror the theme's scroll-to-top button (50px circle at right:30 /
   bottom:55) so the two sit at the same height, one per corner: both centers
   land 80px from the bottom and 55px from their side edge. */
@media (min-width: 992px) {
    .pa-fab {
        right: auto;
        left: 28px;
        bottom: 53px;
        background: #fff;
        color: var(--pa-green);
        border: 2px solid var(--pa-maroon);
        line-height: 50px; /* 54px minus the 2px border top+bottom */
    }
    .pa-fab:hover,
    .pa-fab:focus-visible { background: var(--pa-maroon); color: #fff; }

    /* The opener now floats bottom-left, so retire the navbar chat icon
       (present in the header of every page). */
    .header-button .icon-btn.searchBoxToggler { display: none !important; }
}

/* On mobile the chat FAB owns the bottom-right corner; lift the theme's
   scroll-to-top button so the two stack instead of overlapping. */
@media (max-width: 991px) {
    .scroll-top { right: 27px !important; bottom: 90px !important; }
}