/*
 * TrueFin FAQ Assistant - deterministic, client-side FAQ chatbot.
 * Scoped entirely under .tf-faq-* / #tfFaq* selectors so it never touches
 * existing site rules. Colors, radii and shadows are copied from the
 * site's existing tokens (#DD1A1E / #1f2222 / #6b7070, 16px card radius,
 * 10px button radius) so the widget looks native to the site.
 *
 * Stacking with the WhatsApp button (.whatsapp-float, css/style.css):
 * desktop WhatsApp = 60px @ bottom:25/right:25 (top edge at 85px);
 * mobile (<=576px) WhatsApp = 50px @ bottom:15/right:15 (top edge at 65px).
 * The launcher below is always positioned above that top edge with a
 * fixed gap, at both breakpoints, so the two buttons never overlap.
 */

.tf-faq-launcher {
    position: fixed;
    right: 25px;
    bottom: 101px; /* 25 + 60 (WhatsApp) + 16 gap */
    /* Above the site's sticky header (.header, z-index:1030) and mobile
       nav dropdown (z-index:1050) so it's never painted over by them. */
    z-index: 2001;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 52px;
    padding: 0 18px 0 8px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 999px;
    background-color: #fff;
    color: #1f2222;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(31, 34, 34, 0.16);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.tf-faq-launcher:hover,
.tf-faq-launcher:focus-visible {
    border-color: #DD1A1E;
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(31, 34, 34, 0.2);
}
.tf-faq-launcher:focus-visible {
    outline: 2px solid rgba(221, 26, 30, 0.6);
    outline-offset: 3px;
}
.tf-faq-launcher-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #DD1A1E;
    color: #fff;
    font-size: 16px;
}
.tf-faq-launcher-label {
    white-space: nowrap;
}
/* Body swaps to the close icon while the panel is open */
.tf-faq-launcher-icon .tf-faq-icon-close { display: none; }
.tf-faq-launcher[aria-expanded="true"] .tf-faq-icon-chat { display: none; }
.tf-faq-launcher[aria-expanded="true"] .tf-faq-icon-close { display: inline-flex; }

/* ---------- Panel ---------- */
.tf-faq-panel {
    position: fixed;
    right: 25px;
    /* top+bottom (rather than a computed height) lets the panel fill the
       space between a guaranteed top margin and the launcher stack below
       it, so it always keeps clear air at the top of the window instead
       of the height math occasionally pushing it flush against the top
       on shorter/non-maximized browser windows. */
    top: 24px;
    bottom: 169px; /* launcher bottom(101) + launcher height(52) + 16 gap */
    /* Above the site's sticky header (.header, z-index:1030) and mobile
       nav dropdown (z-index:1050) so the header never paints over the
       top of the panel when it sits close to the top of the viewport. */
    z-index: 2002;
    /* Scales up on larger screens instead of staying pinned to a small
       fixed box; still respects narrow viewports via the vw/vh min. */
    width: min(clamp(384px, 27vw, 460px), calc(100vw - 50px));
    /* No max-height: the panel fills the full space between the top
       margin and the launcher stack on every screen size, from short
       windows up to tall desktop monitors. */
    min-height: 320px;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 20px;
    box-shadow: 0 22px 60px rgba(31, 34, 34, 0.22);
    overflow: hidden;
    opacity: 0;
    transform: translateY(16px) scale(0.98);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.tf-faq-panel.is-open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
.tf-faq-panel[hidden] { display: none; }

.tf-faq-header {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 18px 16px;
    background-color: #1c1c1c;
    color: #fff;
}
.tf-faq-header-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background-color: #DD1A1E;
    color: #fff;
    font-size: 15px;
}
.tf-faq-header-text { flex: 1 1 auto; min-width: 0; }
.tf-faq-header-title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
}
.tf-faq-header-subtitle {
    margin: 2px 0 0;
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.7);
}
.tf-faq-header-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0;
    margin-right: -6px;
}
.tf-faq-header-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid transparent;
    background-color: transparent;
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.tf-faq-header-btn:hover,
.tf-faq-header-btn:focus-visible {
    background-color: rgba(255, 255, 255, 0.14);
    color: #fff;
}
.tf-faq-header-btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 1px;
}

.tf-faq-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 16px;
    background-color: #FAF9F8;
    scroll-behavior: smooth;
}
.tf-faq-body:focus-visible { outline: none; }

.tf-faq-msg {
    display: flex;
    margin-bottom: 14px;
}
.tf-faq-msg-user { justify-content: flex-end; }
.tf-faq-msg-bot { justify-content: flex-start; }
.tf-faq-bubble {
    max-width: 86%;
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 13.5px;
    line-height: 1.55;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.tf-faq-msg-user .tf-faq-bubble {
    background-color: #DD1A1E;
    color: #fff;
    border-bottom-right-radius: 4px;
}
.tf-faq-msg-bot .tf-faq-bubble {
    background-color: #fff;
    color: #1f2222;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-bottom-left-radius: 4px;
    box-shadow: 0 4px 10px rgba(31, 34, 34, 0.05);
}
.tf-faq-bubble p { margin: 0 0 8px; }
.tf-faq-bubble p:last-child { margin-bottom: 0; }
.tf-faq-bubble-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
    color: #DD1A1E;
    font-weight: 700;
    text-decoration: none;
}
.tf-faq-bubble-link:hover,
.tf-faq-bubble-link:focus-visible {
    text-decoration: underline;
    color: #C4141A;
}

/* Suggestion / follow-up chips */
.tf-faq-chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 4px 0 14px;
}
.tf-faq-chip-group.tf-faq-chip-group-initial { margin-top: 2px; }
.tf-faq-chip {
    display: inline-flex;
    align-items: center;
    padding: 9px 14px;
    min-height: 36px;
    border: 1px solid #e3e3e3;
    border-radius: 999px;
    background-color: #fff;
    color: #1f2222;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}
.tf-faq-chip:hover,
.tf-faq-chip:focus-visible {
    border-color: #DD1A1E;
    color: #DD1A1E;
    background-color: rgba(221, 26, 30, 0.05);
}
.tf-faq-chip:focus-visible {
    outline: 2px solid rgba(221, 26, 30, 0.5);
    outline-offset: 2px;
}
.tf-faq-chip:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Typing indicator */
.tf-faq-typing {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 12px 14px;
}
.tf-faq-typing-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #b6b9b9;
    animation: tfFaqTypingBounce 1.1s infinite ease-in-out;
}
.tf-faq-typing-dot:nth-child(2) { animation-delay: 0.15s; }
.tf-faq-typing-dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes tfFaqTypingBounce {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
    30% { transform: translateY(-4px); opacity: 1; }
}

/* Welcome / empty state small print */
.tf-faq-disclaimer {
    flex: 0 0 auto;
    padding: 8px 16px;
    font-size: 11px;
    line-height: 1.5;
    color: #8a8f8f;
    background-color: #fff;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

/* Input row */
.tf-faq-input-row {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background-color: #fff;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    padding-bottom: max(12px, env(safe-area-inset-bottom));
}
.tf-faq-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 44px;
    padding: 0 14px;
    border: 1px solid #e3e3e3;
    border-radius: 10px;
    background-color: #FAF9F8;
    color: #1f2222;
    font-size: 14px;
}
.tf-faq-input::placeholder { color: #8a8f8f; }
.tf-faq-input:focus-visible {
    outline: none;
    border-color: #DD1A1E;
    background-color: #fff;
    box-shadow: 0 0 0 3px rgba(221, 26, 30, 0.12);
}
.tf-faq-send {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 10px;
    background-color: #DD1A1E;
    color: #fff;
    font-size: 15px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(221, 26, 30, 0.3);
    transition: background-color 0.2s ease, transform 0.2s ease;
}
.tf-faq-send:hover:not(:disabled),
.tf-faq-send:focus-visible {
    background-color: #C4141A;
    transform: translateY(-1px);
}
.tf-faq-send:focus-visible {
    outline: 2px solid rgba(221, 26, 30, 0.5);
    outline-offset: 2px;
}
.tf-faq-send:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}

/* Mobile: near full-screen bottom sheet */
@media (max-width: 767px) {
    .tf-faq-launcher-label { display: none; }
    .tf-faq-launcher {
        width: 52px;
        height: 52px;
        padding: 0;
        justify-content: center;
        border-radius: 50%;
    }
    .tf-faq-panel {
        right: 0;
        left: 0;
        top: auto; /* cancel the desktop top:24px so bottom+height control position */
        bottom: 0;
        width: 100%;
        height: min(88dvh, var(--tf-faq-vvh, 88vh));
        max-height: min(88dvh, var(--tf-faq-vvh, 88vh));
        border-radius: 18px 18px 0 0;
        transform: translateY(24px);
    }
    .tf-faq-panel.is-open { transform: translateY(0); }
    .tf-faq-input-row {
        padding-bottom: max(14px, env(safe-area-inset-bottom));
    }
}

@media (max-width: 576px) {
    .tf-faq-launcher {
        width: 50px;
        height: 50px;
        bottom: 77px; /* 15 + 50 (WhatsApp mobile) + 12 gap */
        right: 15px;
    }
}

@media (max-width: 360px) {
    .tf-faq-header { padding: 14px 12px; }
    .tf-faq-body { padding: 12px; }
    .tf-faq-input-row { padding-left: 12px; padding-right: 12px; }
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
    .tf-faq-launcher,
    .tf-faq-panel,
    .tf-faq-chip,
    .tf-faq-send,
    .tf-faq-header-btn {
        transition: none !important;
    }
    .tf-faq-panel { transform: none !important; }
    .tf-faq-typing-dot { animation: none !important; opacity: 0.85; }
}